/* V6 Paramount+-style theme for the member dashboard (dashboard-v4.html).
   Pure restyle: no behavior changes. Black top band, light gray page, white cards,
   blue pill buttons, and every pop-up becomes a slide-up sheet on phones. */
:root{--pp-black:#000;--pp-gray:#f4f5f7;--pp-line:#d6dbe1;--pp-text:#111827;--pp-muted:#5b6673;--pp-blue:#0064ff;--pp-blue-h:#0052d1;--pp-accent:#79dfc4;--pp-danger:#b4232c}
[data-theme=light]{--bg:var(--pp-gray);--surface:#fff;--surface2:#f4f5f7;--surface3:#e9edf1;--input:#fff;--line:var(--pp-line);--border:var(--pp-line);--text:var(--pp-text);--muted:var(--pp-muted);--faint:var(--pp-muted);--accent:var(--pp-blue);--primary:var(--pp-blue);--primary-hover:var(--pp-blue-h);--ink:#fff;--gold:var(--pp-blue);--success:#1f8a4c;--danger:var(--pp-danger);--fg:var(--pp-text)}
[data-theme=dark]{--bg:#0a0a0a;--surface:#161616;--surface2:#1f1f1f;--surface3:#2a2a2a;--input:#111;--line:#333;--border:#333;--text:#f5f5f5;--muted:#b3bcc6;--faint:#b3bcc6;--accent:#4d8dff;--primary:#4d8dff;--primary-hover:#79a9ff;--ink:#fff;--gold:#79dfc4;--success:#6fcf97;--danger:#ff8a8a;--fg:#f5f5f5}

html,body{background:var(--bg)}
body{padding:0 16px 56px;overflow-x:hidden;font-size:16px}
.wrap{max-width:900px}

/* Black band: header + nav */
.top-bar,.member-dashboard-nav{position:relative;isolation:isolate;margin:0}
.top-bar::before,.member-dashboard-nav::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);background:var(--pp-black);z-index:-1}
.top-bar{padding:14px 0 6px;color:#fff;margin-bottom:0}
.top-bar .page-title{color:#fff;font-size:clamp(22px,4vw,30px);letter-spacing:-.01em}
.top-bar .user-email{color:#c5d0da}
.top-bar #logoutBtn{background:transparent;color:#fff;border:1px solid #444;border-radius:999px;min-height:44px;padding:0 16px}
.top-bar #logoutBtn:hover{border-color:#fff}
.member-dashboard-nav{padding:8px 0 18px;margin-bottom:28px;border-bottom:1px solid #1c1c1c}
.member-dashboard-nav a{color:#fff;border:1px solid #333;border-radius:999px;font-weight:700}
.member-dashboard-nav a:hover{background:#1a1a1a;border-color:#666}
.member-dashboard-nav #memberTheme{background:transparent;color:#c5d0da;border:1px solid #333;border-radius:999px;min-height:44px}
.member-dashboard-nav #memberTheme:hover{border-color:#666;color:#fff}

/* Cards */
.card,.subcard,.sub-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:0 1px 2px rgba(0,0,0,.06),0 12px 32px rgba(0,0,0,.06)}
[data-theme=dark] .card,[data-theme=dark] .subcard,[data-theme=dark] .sub-card{box-shadow:none}
.card{padding:28px 24px;margin-bottom:18px}
.subcard,.sub-card{background:var(--surface);border-radius:14px;padding:20px}
.sub-card.active{border-color:var(--line);box-shadow:inset 4px 0 0 var(--success)}
.sub-card.pending{border-color:var(--line);box-shadow:inset 4px 0 0 var(--gold)}
.eyebrow{color:var(--pp-muted);letter-spacing:.14em}
[data-theme=dark] .eyebrow{color:var(--pp-accent)}
.title,.greet{color:var(--text);letter-spacing:-.01em}
.sub-actions,.wiz-confirm-row{border-color:var(--line)}
.empty-subs{border:1px dashed var(--line);background:var(--surface2);color:var(--muted)}
#redeemCodeBox{border-radius:12px!important}

/* Buttons: blue pills */
.btn{border-radius:999px;min-height:44px;font-weight:800;padding:0 18px}
.btn-primary{background:var(--primary);color:#fff;border-color:var(--primary)}
.btn-primary:hover{background:var(--primary-hover);border-color:var(--primary-hover)}
.btn-secondary{background:var(--surface);color:var(--text);border:1.5px solid var(--line)}
.btn-secondary:hover{border-color:var(--primary);background:var(--surface2)}
.btn-sm{min-height:40px;font-size:13px;border-radius:999px}
.btn-xs{min-height:36px!important;padding:0 12px!important;font-size:12px!important;border-radius:999px!important}
.conn-stepper{border-radius:999px;border-color:var(--line)}
.conn-step-btn,.conn-count{background:var(--surface2);color:var(--text);min-height:40px}
.conn-step-btn:hover:not(:disabled){background:var(--surface3)}

/* Forms */
.plan-picker select,input:not([type=checkbox]),select{background:var(--input);color:var(--text);border:1.5px solid var(--line);border-radius:10px}
.plan-picker select:focus,input:focus,select:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(0,100,255,.18);outline:none}
.plan-price{background:var(--surface2);border-color:var(--line)}
.alert{border-radius:12px}

/* Wizard tiles (change / add plan) */
.wiz-card,.wiz-pill,.wiz-confirm-card{background:var(--surface);border:1.5px solid var(--line);border-radius:14px;color:var(--text)}
.wiz-card:hover,.wiz-pill:hover{border-color:var(--primary)}
.wiz-card.selected,.wiz-pill.selected{border-color:var(--primary);background:rgba(0,100,255,.06);box-shadow:0 0 0 1px var(--primary) inset}
.wiz-card.current{opacity:1;border-style:dashed}
.wiz-card.current::after{background:var(--surface2);color:var(--muted);border:1px solid var(--line)}
.wiz-card-tag{color:var(--primary)}
.wiz-pill{min-height:64px}
.wiz-steps{color:var(--muted)}
.modal-subtitle{color:var(--muted)}

/* Pop-ups: centered card on desktop, slide-up sheet on phones */
.modal-overlay{background:rgba(0,0,0,.55);backdrop-filter:blur(3px);padding:16px}
.modal{background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:18px;padding:26px 24px;max-width:min(640px,calc(100vw - 32px));max-height:88svh;box-shadow:0 30px 80px rgba(0,0,0,.35)}
.modal h2{color:var(--text);font-size:1.4rem}
.modal-footer{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:18px}
.modal-footer .btn{min-height:46px}
/* dynamic confirm pop-ups built in script (inline styles): give them the same card */
body > div[style*="z-index:9999"]{background:rgba(0,0,0,.55)!important;backdrop-filter:blur(3px)}
body > div[style*="z-index:9999"] > div{background:var(--surface)!important;color:var(--text)!important;border:1px solid var(--line)!important;border-radius:18px!important;padding:24px!important}
@keyframes ppSheetUp{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}
.modal,body > div[style*="z-index:9999"] > div{animation:ppSheetUp .26s ease-out}
@media (max-width:640px){
  .modal-overlay,body > div[style*="z-index:9999"]{align-items:flex-end!important;padding:0!important}
  .modal,body > div[style*="z-index:9999"] > div{width:100%!important;max-width:100%!important;border-radius:20px 20px 0 0!important;border-bottom:0!important;max-height:92svh!important;padding:14px 18px calc(20px + env(safe-area-inset-bottom))!important;animation-name:ppSheetUpM}
  .modal::before,body > div[style*="z-index:9999"] > div::before{content:"";display:block;width:40px;height:4px;border-radius:4px;background:var(--line);margin:0 auto 14px}
  @keyframes ppSheetUpM{from{transform:translateY(100%)}to{transform:none}}
  .modal-footer{position:sticky;bottom:0;background:var(--surface);padding-top:12px;margin-top:12px}
  .modal-footer .btn{flex:1 1 auto}
}
@media (max-width:600px){body{padding:0 12px 48px}.card{padding:20px 16px}.top-bar{padding-top:10px}.member-dashboard-nav{padding-bottom:14px}}
@media (hover:none){.btn-primary:hover{background:var(--primary)}.btn-secondary:hover{border-color:var(--line);background:var(--surface)}.wiz-card:hover,.wiz-pill:hover{border-color:var(--line)}.member-dashboard-nav a:hover{background:transparent;border-color:#333}}
.btn:active,.wiz-card:active,.wiz-pill:active{transform:scale(.985)}
@media (prefers-reduced-motion:reduce){.modal,body > div[style*="z-index:9999"] > div{animation:none}*{transition:none!important}}