/* ---------- Round 5: pricing/checkout overlay ----------
     Uses the shared .fullscreen-overlay class (styles/main.css, added in index.html) for its
     show/hide + open/close animation, and the .ep-bar/.ep-body/.ep-title classes from exam.css
     for its header/body chrome — only the payment-specific content below is unique to this file. */
  #pricing-overlay{background:var(--paper); display:flex; flex-direction:column;}
  #pricing-panel{flex:1; display:flex; flex-direction:column; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; scroll-behavior:smooth;}

  .pp-status-banner{border:1.5px solid var(--line); background:var(--card); border-radius:12px; padding:14px 16px; font-size:var(--fs-base); margin-bottom:18px; transition:background 200ms ease, border-color 200ms ease;}
  .pp-status-banner-active{border-color:var(--success-border); background:var(--success-bg); font-weight:700;}

  /* Round 11: plan cards used to sit completely flat — the buy button inside already had a
     press-scale (.btn-black:active / .btn-outline:active in auth.css), but the card itself gave
     no signal it was worth reading closely. A soft border/shadow response on hover (desktop
     only — see (hover:hover)) draws the eye without implying the whole card is one giant button,
     since only .pp-buy-btn inside it is actually clickable. */
  .pp-plans-row{display:flex; flex-wrap:wrap; gap:14px;}
  .pp-plan-card{flex:1; min-width:220px; border:1.5px solid var(--line); border-radius:16px; padding:18px; background:var(--card); display:flex; flex-direction:column; transition:border-color 200ms ease, box-shadow 200ms ease;}
  @media (hover:hover){ .pp-plan-card:hover{ border-color:rgba(18,18,18,0.3); box-shadow:0 8px 20px rgba(18,18,18,0.07); } }
  .pp-plan-name{font-weight:800; font-size:var(--fs-md); margin-bottom:6px;}
  .pp-plan-price{font-size:var(--fs-2xl); font-weight:800; color:var(--ink); margin-bottom:12px;}
  .pp-plan-price span{font-size:var(--fs-xs); font-weight:500; color:var(--muted);}
  .pp-plan-features{margin:0 0 16px; padding-left:18px; font-size:var(--fs-sm); line-height:1.8; color:var(--ink); flex:1;}
  .pp-buy-btn{width:100%; transition:transform 120ms ease, opacity 150ms ease;}
  .pp-buy-btn:active{ transform:scale(0.98); }
  .pp-buy-btn:disabled{opacity:0.6; cursor:default;}

  .pp-history-list{display:flex; flex-direction:column; gap:8px;}
  .pp-history-row{display:flex; justify-content:space-between; align-items:center; border:1px solid var(--line); border-radius:12px; padding:10px 14px; font-size:var(--fs-sm); animation:motionFadeUp 300ms cubic-bezier(.2,.8,.3,1) both;}
  .pp-history-list .pp-history-row:nth-child(1){ animation-delay:0ms; }
  .pp-history-list .pp-history-row:nth-child(2){ animation-delay:30ms; }
  .pp-history-list .pp-history-row:nth-child(3){ animation-delay:60ms; }
  .pp-history-list .pp-history-row:nth-child(n+4){ animation-delay:90ms; }
  @media (prefers-reduced-motion:reduce){ .pp-history-row{ animation:none; } }
  .pp-history-plan{font-weight:700;}
  .pp-history-date{color:var(--muted); font-size:var(--fs-xs); margin-top:2px;}
  .pp-history-amount{font-weight:700;}
  .pp-history-status{font-size:var(--fs-xs); margin-top:2px;}
  .pp-status-succeeded{color:var(--success);}
  .pp-status-pending{color:var(--warning);}
  .pp-status-failed, .pp-status-expired{color:var(--danger);}

  /* Round 11: QR is generated fresh each time renderCheckoutScreen() runs (once per checkout
     attempt, not re-rendered by the 3s poll — confirmed in js/pricing.js, which only updates
     #pp-checkout-status's text on each poll tick) so a one-time entrance is safe: it plays once
     when the QR first appears and never replays while the user is staring at it waiting to pay,
     which a looping animation here would just be an annoying distraction during that wait. */
  .pp-qr-img{width:220px; height:220px; margin:18px auto; display:block; border:1px solid var(--line); border-radius:12px; background:#fff; animation:motionFadeUp 320ms cubic-bezier(.2,.8,.3,1) both;}
  .pp-checkout-status{font-size:var(--fs-base); color:var(--muted); margin-top:10px; transition:color 200ms ease;}
  /* Toggled by js/pricing.js's startPolling() once the purchase status flips to "succeeded" —
     a one-shot pop instead of a loop, matching the QR's own one-shot entrance right above it. */
  .pp-checkout-status.pp-status-success-text{ color:var(--success); font-weight:700; animation:motionPop 320ms var(--ease-pop); }
  @media (prefers-reduced-motion:reduce){
    .pp-qr-img{ animation:none; }
    .pp-checkout-status.pp-status-success-text{ animation:none; }
  }

  /* ---------- Round 5: small premium widget embedded in the account panel ---------- */
  .premium-widget{border:1.5px solid var(--line); border-radius:14px; padding:16px 18px; margin-top:16px; background:var(--card); transition:box-shadow 200ms ease;}
  @media (hover:hover){ .premium-widget:hover{ box-shadow:0 8px 18px rgba(18,18,18,0.06); } }
  .premium-widget-title{font-weight:800; font-size:var(--fs-base); margin-bottom:4px;}
  .premium-widget-sub{font-size:var(--fs-sm); color:var(--muted); margin-bottom:12px;}