/* ============================================================= *
 *  Speakeasy — themed stylesheet
 *  Three switchable skins: Terminal (default), Cinema, Speakeasy
 * ============================================================= */
:root{
  --r:16px; --r-sm:10px; --pad:clamp(16px,3vw,26px);
  --display:"Space Grotesk",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --body:"Inter",system-ui,sans-serif;
}
[data-theme="terminal"]{
  --base:#070A07; --surface:#0C110C; --surface-2:#111811; --edge:#1D2A1D;
  --text:#CFF7CF; --muted:#5E8F63; --accent:#3BF07A; --accent-ink:#04140a;
  --accent-2:#7DFFC0; --warn:#FFCB57; --glow:rgba(59,240,122,.16); --grid:rgba(59,240,122,.04);
}
[data-theme="cinema"]{
  --base:#13151C; --surface:#1B1E28; --surface-2:#232734; --edge:#2F3443;
  --text:#ECEEF4; --muted:#98A1B2; --accent:#E6B25A; --accent-ink:#1c1405;
  --accent-2:#68E6C4; --warn:#F2795B; --glow:rgba(230,178,90,.18); --grid:rgba(255,255,255,.03);
}
/* Prohibition skin — deep espresso base, restrained candlelight so it reads
   as a dim room with brass accents, not a sepia wash. */
[data-theme="speakeasy"]{
  --base:#110B05; --surface:#1E160D; --surface-2:#271C11; --edge:#3C2C19;
  --text:#ECDBB2; --muted:#A2895A; --accent:#CBA24A; --accent-ink:#1a1206;
  --accent-2:#9DB472; --warn:#C6633B; --glow:rgba(203,162,74,.09); --grid:rgba(203,162,74,.02);
}
/* engraved deco caps for speakeasy headings only */
[data-theme="speakeasy"] .bname,[data-theme="speakeasy"] h2,[data-theme="speakeasy"] h3,
[data-theme="speakeasy"] .kpi .kv,[data-theme="speakeasy"] .conn-name{
  font-family:"Cinzel",serif; letter-spacing:.04em;
}
[data-theme="speakeasy"] .bname{letter-spacing:.12em}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:
    radial-gradient(1000px 560px at 84% -14%, var(--glow), transparent 62%),
    linear-gradient(var(--grid) 1px,transparent 1px) 0 0/26px 26px,
    linear-gradient(90deg,var(--grid) 1px,transparent 1px) 0 0/26px 26px,
    var(--base);
  color:var(--text); font-family:var(--body); line-height:1.5; min-height:100vh;
  -webkit-font-smoothing:antialiased; transition:background-color .3s ease;
}
a{color:var(--accent); text-decoration:none}
a:hover{filter:brightness(1.12)}
button{font-family:inherit; cursor:pointer}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}

/* ---------- topbar ---------- */
.topbar{display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:12px clamp(14px,3vw,26px); border-bottom:1px solid var(--edge);
  background:rgba(0,0,0,.28); backdrop-filter:blur(8px); position:sticky; top:0; z-index:40}
.brand{display:flex; align-items:center; gap:11px}
.mono-mark{width:36px; height:36px; border-radius:10px; display:grid; place-items:center; flex:none;
  background:linear-gradient(145deg,var(--accent),color-mix(in srgb,var(--accent) 55%,#000));
  color:var(--accent-ink); font-family:var(--mono); font-weight:700; font-size:15px; box-shadow:0 6px 16px -6px var(--glow)}
.mono-mark.big{width:52px; height:52px; font-size:21px; border-radius:14px; margin:0 auto 18px}
.bwrap{display:flex; flex-direction:column; line-height:1.15}
.bname{font-family:var(--display); font-weight:700; font-size:16px; letter-spacing:.06em; display:flex; align-items:baseline}
.tag{font-family:var(--mono); font-size:9px; color:var(--muted); letter-spacing:.2em}
.tb-right{display:flex; align-items:center; gap:10px}
.chip{display:flex; align-items:center; gap:8px; padding:5px 11px 5px 5px; border:1px solid var(--edge); border-radius:999px; background:var(--surface); font-size:12.5px; color:var(--text)}
.avatar{width:22px; height:22px; border-radius:50%; background:conic-gradient(from 210deg,var(--accent),var(--accent-2),var(--accent))}
.ghost-btn{background:transparent; border:1px solid var(--edge); color:var(--muted); padding:7px 12px; border-radius:9px; font-size:12.5px}
.ghost-btn:hover{color:var(--text); border-color:var(--muted)}

.seg{display:inline-flex; border:1px solid var(--edge); border-radius:999px; overflow:hidden}
.seg button{background:transparent; border:0; color:var(--muted); padding:5px 11px; font-family:var(--mono); font-size:11px; letter-spacing:.05em}
.seg button[aria-pressed="true"]{background:var(--accent); color:var(--accent-ink); font-weight:700}

/* ---------- flash ---------- */
.flash-wrap{max-width:1040px; margin:14px auto 0; padding:0 clamp(14px,3vw,26px); display:flex; flex-direction:column; gap:8px}
.flash{padding:11px 15px; border-radius:var(--r-sm); font-size:13px; border:1px solid}
.flash-ok{background:color-mix(in srgb,var(--accent-2) 10%,transparent); border-color:color-mix(in srgb,var(--accent-2) 40%,transparent); color:var(--accent-2)}
.flash-err{background:color-mix(in srgb,var(--warn) 12%,transparent); border-color:color-mix(in srgb,var(--warn) 45%,transparent); color:var(--warn)}

/* ---------- centred auth cards ---------- */
.centre{min-height:72vh; display:grid; place-items:center; padding:44px clamp(14px,3vw,26px)}
.auth-card{width:100%; max-width:410px; text-align:center; background:var(--surface); border:1px solid var(--edge);
  border-radius:var(--r); padding:36px 30px; position:relative; overflow:hidden}
.auth-card::before{content:""; position:absolute; inset:0 0 auto; height:3px; background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.auth-card h2{font-family:var(--display); font-size:22px; margin:0 0 6px; letter-spacing:.03em}
.knock{font-family:var(--mono); font-size:11px; color:var(--accent); letter-spacing:.16em; margin:0 0 14px}
.lead{color:var(--muted); font-size:13.5px; margin:0 auto 24px; max-width:320px}

/* ---------- forms ---------- */
.frm{display:flex; flex-direction:column; gap:14px; text-align:left}
.frm label,.frm-lbl{display:flex; flex-direction:column; gap:6px; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.frm input,.frm-lbl input,.frm-inline input,.mono-field{
  background:var(--surface-2); border:1px solid var(--edge); color:var(--text);
  border-radius:9px; padding:11px 12px; font-family:var(--body); font-size:14px; width:100%}
.mono-field{font-family:var(--mono); font-size:12.5px; color:var(--muted)}
.frm input:focus,.frm-lbl input:focus{border-color:var(--accent); outline:none}
.cta{margin-top:6px; border:0; border-radius:11px; padding:13px; font-family:var(--display); font-weight:700; font-size:14.5px;
  background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 60%,#000)); color:var(--accent-ink); box-shadow:0 10px 22px -12px var(--glow)}
.cta:hover{filter:brightness(1.06)}
.fine{text-align:center; font-size:11.5px; color:var(--muted); margin:16px 0 0}

/* ---------- admin shell ---------- */
/* Horizontal sub-nav under the topbar, content spanning full width below it —
   not a sidebar layout, so no fixed-width column stealing space from .amain. */
.admin-shell{display:flex; flex-direction:column; min-height:calc(100vh - 61px)}
.arail{border-bottom:1px solid var(--edge); padding:10px clamp(14px,3vw,26px); background:rgba(0,0,0,.15)}
.anav{display:flex; flex-direction:row; flex-wrap:wrap; gap:3px}
.anav a{padding:8px 12px; border-radius:9px; color:var(--muted); font-size:13.5px; white-space:nowrap}
.anav a.on{background:var(--surface-2); color:var(--text)}
.anav a:hover{color:var(--text)}
.muted-link{opacity:.6; pointer-events:none}
.soon{font-family:var(--mono); font-size:9px; color:var(--muted); border:1px solid var(--edge); border-radius:6px; padding:1px 5px; margin-left:6px; letter-spacing:.1em}
.amain{padding:var(--pad) clamp(14px,3vw,26px); min-width:0}
.ahead{margin-bottom:20px}
.ahead h2{font-family:var(--display); font-size:20px; margin:0 0 3px; letter-spacing:.02em}
.ahead .when{font-family:var(--mono); font-size:11px; color:var(--muted); letter-spacing:.04em}

.panel{background:var(--surface); border:1px solid var(--edge); border-radius:var(--r); padding:var(--pad); margin-bottom:16px}
.panel h3{font-family:var(--display); font-size:14.5px; margin:0 0 3px}
.panel .sub{color:var(--muted); font-size:12.5px; margin:0 0 14px}

/* ---------- kpis ---------- */
.kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:16px}
.kpi{border:1px solid var(--edge); border-radius:var(--r-sm); background:var(--surface); padding:15px}
.kpi .kl{font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.kpi .kv{font-family:var(--display); font-size:27px; margin:8px 0 3px; line-height:1}
.kpi .kv .of{font-size:15px; color:var(--muted)}
.kpi .kd{font-family:var(--mono); font-size:11px}
.kd.upd{color:var(--accent-2)} .kd.warnd{color:var(--warn)} .kd.mutd{color:var(--muted)}

/* ---------- checklist ---------- */
.checklist{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px}
.checklist li{display:flex; align-items:baseline; gap:11px; font-size:13.5px; color:var(--muted)}
.checklist li.done{color:var(--text)}
.checklist .ck{font-family:var(--mono); color:var(--muted); width:14px; flex:none}
.checklist li.done .ck{color:var(--accent-2)}

.copyrow{display:flex; gap:8px}
.copyrow .mono-field{flex:1}

/* ---------- connections ---------- */
.cat-label{display:flex; align-items:baseline; gap:10px; margin:22px 0 10px}
.cat-label .l{font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--accent)}
.cat-label .c{font-family:var(--mono); font-size:11px; color:var(--muted)}
.cat-label .rule{flex:1; height:1px; background:var(--edge)}
.conn-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:12px}
.conn{margin-bottom:0; display:flex; flex-direction:column; gap:12px}
.conn-head{display:flex; align-items:flex-start; justify-content:space-between; gap:10px}
.conn-name{font-family:var(--display); font-weight:600; font-size:15px}
.conn-desc{font-size:11.5px; color:var(--muted)}
.cpill{font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; padding:4px 9px; border-radius:999px; border:1px solid; white-space:nowrap}
.cpill.ok{color:var(--accent-2); border-color:color-mix(in srgb,var(--accent-2) 40%,transparent); background:color-mix(in srgb,var(--accent-2) 10%,transparent)}
.cpill.err{color:var(--warn); border-color:color-mix(in srgb,var(--warn) 40%,transparent); background:color-mix(in srgb,var(--warn) 10%,transparent)}
.cpill.idle{color:var(--muted); border-color:var(--edge)}
.cpill.warn{color:var(--warn); border-color:color-mix(in srgb,var(--warn) 40%,transparent); background:color-mix(in srgb,var(--warn) 10%,transparent)}
.toggle{display:flex !important; flex-direction:row !important; align-items:center; gap:9px; font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.toggle input{width:auto}
.cmsg{font-family:var(--mono); font-size:11px; color:var(--muted); min-height:14px}
.conn-actions{display:flex; gap:8px}
.btn-primary{border:0; border-radius:9px; padding:9px 15px; font-family:var(--display); font-weight:700; font-size:13px;
  background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 60%,#000)); color:var(--accent-ink)}
.btn-primary:hover{filter:brightness(1.06)}
.frm-inline{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.frm-inline input{flex:1; min-width:220px; background:var(--surface-2); border:1px solid var(--edge); color:var(--text); border-radius:9px; padding:11px 12px; font-family:var(--body); font-size:14px}
.frm-inline select{background:var(--surface-2); border:1px solid var(--edge); color:var(--text); border-radius:9px; padding:11px 12px; font-family:var(--body); font-size:14px}

/* ---------- data tables (members) ---------- */
.table-wrap{overflow-x:auto}
.dtable{width:100%; border-collapse:collapse; font-size:13.5px; white-space:nowrap}
.dtable th{text-align:left; font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); padding:10px 12px; border-bottom:1px solid var(--edge)}
.dtable td{padding:11px 12px; border-bottom:1px solid var(--edge); vertical-align:middle}
.dtable tr:last-child td{border-bottom:0}
.dtable tbody tr:hover td{background:var(--surface-2)}
.dtable .mono{font-family:var(--mono); font-size:12px}
.dtable .dim{color:var(--muted); font-size:11px}
.dtable .actions{display:flex; gap:6px; justify-content:flex-end; flex-wrap:wrap; align-items:center}
.expiry-form{display:flex !important; flex-direction:row !important; gap:6px}
.expiry-form input[type="datetime-local"]{width:auto; padding:6px 8px; font-size:12px; border-radius:9px}
.empty-row td{text-align:center; color:var(--muted); padding:30px 12px; font-family:var(--mono); font-size:12px; white-space:normal}

/* ============================================================= *
 *  Member portal — pass card, top-up, rooms grid
 * ============================================================= */
.wrap{max-width:1060px; margin:0 auto; padding:var(--pad)}
.cols{display:grid; grid-template-columns:1.35fr 1fr; gap:18px; align-items:start; margin-bottom:18px}

.pass{position:relative; display:grid; grid-template-columns:1fr 118px;
  background:radial-gradient(120% 140% at 0% 0%, color-mix(in srgb,var(--surface-2) 86%, var(--accent) 14%), var(--surface-2));
  border:1px solid var(--edge); border-radius:var(--r); overflow:hidden}
.pass-main{padding:var(--pad)}
.pass-status{display:flex; align-items:center; gap:10px; margin-bottom:20px}
.dot{width:9px; height:9px; border-radius:50%; background:var(--accent-2); box-shadow:0 0 0 4px color-mix(in srgb,var(--accent-2) 22%, transparent)}
.dot.warn{background:var(--warn); box-shadow:0 0 0 4px color-mix(in srgb,var(--warn) 22%,transparent)}
.pass-status .live{font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-2)}
.pass-status .live.warnl{color:var(--warn)}
.countdown{display:flex; align-items:center; gap:20px; margin:6px 0 22px; flex-wrap:wrap}
.ring{--p:60; width:112px; height:112px; border-radius:50%; flex:none; background:conic-gradient(var(--accent) calc(var(--p)*1%), var(--edge) 0); display:grid; place-items:center; position:relative}
.ring::after{content:""; position:absolute; inset:9px; border-radius:50%; background:var(--surface-2)}
.ring b{position:relative; z-index:1; font-family:var(--display); font-size:30px; line-height:1}
.ring span{position:relative; z-index:1; font-family:var(--mono); font-size:10px; letter-spacing:.18em; color:var(--muted); text-transform:uppercase; margin-top:3px}
.ring .stack{display:grid; place-items:center}
.cd-copy .big{font-family:var(--display); font-size:19px; margin:0 0 4px}
.cd-copy p{margin:0; color:var(--muted); font-size:13px}
.cd-copy .when{color:var(--text); font-family:var(--mono); font-size:13px}
.fields{display:grid; grid-template-columns:1fr 1fr; gap:14px 18px; border-top:1px dashed var(--edge); padding-top:16px}
.field .k{font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.field .v{font-family:var(--mono); font-size:14px; margin-top:3px}
.pass-stub{position:relative; border-left:2px dashed var(--edge);
  background:linear-gradient(180deg, color-mix(in srgb,var(--accent) 16%, var(--surface)), var(--surface));
  display:flex; flex-direction:column; align-items:center; justify-content:space-between; padding:18px 10px; text-align:center}
.pass-stub .tier{writing-mode:vertical-rl; transform:rotate(180deg); font-family:var(--display); font-weight:700; letter-spacing:.24em; text-transform:uppercase; font-size:13px; color:var(--accent)}
.barcode{width:44px; height:52px; background:repeating-linear-gradient(90deg,var(--text) 0 2px,transparent 2px 4px,var(--text) 4px 5px,transparent 5px 9px); opacity:.55; border-radius:2px}
.perf{position:absolute; top:-7px; left:0; width:14px; height:14px; border-radius:50%; background:var(--base); transform:translateX(-50%)}
.perf.b{top:auto; bottom:-7px}

.durs{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px}
.dur{appearance:none; border:1px solid var(--edge); background:var(--surface-2); color:var(--text); border-radius:10px; padding:10px 12px; text-align:center; min-width:64px; text-decoration:none; display:block}
.dur:hover{border-color:var(--accent)}
.dur:hover{border-color:var(--accent)}
.dur small{display:block; font-family:var(--mono); font-size:10px; color:var(--muted); margin-top:3px}

.board{margin-top:18px}
.board-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:4px}
.status-pill{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--muted); border:1px solid var(--edge); padding:5px 11px; border-radius:999px}
.status-pill .pd{width:7px; height:7px; border-radius:50%; background:var(--accent-2)}
.cat{margin-top:20px}
.svc-row{display:grid; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); gap:10px}
.service{border:1px solid var(--edge); border-radius:var(--r-sm); background:var(--surface); padding:14px; display:flex; flex-direction:column; gap:12px; transition:.18s}
.service:hover{border-color:var(--accent); transform:translateY(-1px)}
.s-row1{display:flex; align-items:center; gap:11px}
.s-ic{width:36px; height:36px; border-radius:9px; display:grid; place-items:center; background:var(--surface-2); color:var(--accent); flex:none}
.s-ic svg{width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.s-meta{min-width:0}
.s-nm{font-size:14px; font-weight:600; line-height:1.2}
.s-desc{font-size:11.5px; color:var(--muted)}
.s-dot{width:8px; height:8px; border-radius:50%; flex:none; margin-left:auto; align-self:flex-start; margin-top:6px}
.service.up .s-dot{background:var(--accent-2); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent-2) 20%,transparent)}
.service.deg .s-dot{background:var(--warn); box-shadow:0 0 0 3px color-mix(in srgb,var(--warn) 20%,transparent)}
.s-row2{display:flex; align-items:center; gap:14px; border-top:1px dashed var(--edge); padding-top:11px}
.s-open{font-family:var(--display); font-weight:600; font-size:13px; color:var(--accent); text-decoration:none}
.s-app{font-family:var(--mono); font-size:11px; color:var(--muted); text-decoration:none; margin-left:auto}
.s-state{font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase}
.service.up .s-state{color:var(--accent-2)} .service.deg .s-state{color:var(--warn)}

.support{margin-top:18px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; border:1px solid var(--edge); border-radius:var(--r-sm); padding:14px 16px; background:var(--surface); font-size:13px; color:var(--muted)}
.support a{color:var(--accent); text-decoration:none; font-weight:600}

/* Plex sign-in button — join/redeem/account-login */
.plex-btn{width:100%; display:flex; align-items:center; justify-content:center; gap:10px; border:0; border-radius:12px; padding:15px; font-weight:700; font-size:15px; font-family:var(--display);
  background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 60%,#000)); color:var(--accent-ink); box-shadow:0 10px 24px -10px var(--glow); text-decoration:none}
.plex-btn:hover{filter:brightness(1.06)}

/* ---------- responsive ---------- */
@media (max-width:820px){
  .anav{gap:2px}
  .anav a{padding:7px 10px; font-size:13px}
  .kpis{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .cols{grid-template-columns:1fr}
  .pass{grid-template-columns:1fr 84px}
  .fields{grid-template-columns:1fr}
  .countdown{flex-direction:column; align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}