*,*::before,*::after{box-sizing:border-box}
:root{
  --bg:#0a0a0a;
  --bg-2:#111;
  --panel:#0f0f0f;
  --border:#1f1f1f;
  --border-hi:#2a2a2a;
  --text:#ededed;
  --muted:#7a7a7a;
  --dim:#4a4a4a;
  --accent:#ff3b30;
  --ok:#30d158;
  --warn:#ffcc00;
  --err:#ff453a;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:"Inter","Helvetica Neue",system-ui,-apple-system,sans-serif;
  --radius:4px;
}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:14px/1.5 var(--sans);-webkit-font-smoothing:antialiased}
body{
  min-height:100vh;
  background-image:radial-gradient(rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:18px 18px;
  background-position:0 0;
}
a{color:var(--text);text-decoration:none;border-bottom:1px solid var(--dim)}
a:hover{border-bottom-color:var(--text)}

.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 24px;border-bottom:1px solid var(--border);
  background:rgba(10,10,10,.85);backdrop-filter:blur(8px);
  position:sticky;top:0;z-index:10;
}
.brand{
  font-family:var(--mono);font-weight:600;font-size:13px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--text);
  border:none;display:flex;align-items:center;gap:8px;
}
.brand::before{content:"";width:8px;height:8px;background:var(--accent);border-radius:50%;display:inline-block;box-shadow:0 0 10px var(--accent)}
.topbar nav{display:flex;align-items:center;gap:20px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.topbar nav a{border:none;color:var(--muted)}
.topbar nav a:hover{color:var(--text)}
.who{color:var(--muted);font-family:var(--mono);font-size:12px}
.who .admin-tag{color:var(--accent);margin-left:6px}

main{max-width:1100px;margin:40px auto;padding:0 24px}

h1{font-family:var(--mono);font-weight:500;font-size:24px;letter-spacing:-.01em;margin:0 0 4px;text-transform:uppercase}
h2{font-family:var(--mono);font-weight:500;font-size:13px;color:var(--muted);letter-spacing:.14em;text-transform:uppercase;margin:28px 0 12px}
.page-head{margin-bottom:32px;padding-bottom:20px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:16px}
.page-head .tagline{color:var(--muted);font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase}

.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:28px;margin-bottom:20px}
.card.wide{max-width:none}
.card.auth{max-width:420px;margin:80px auto}

/* forms */
form label{display:block;margin-bottom:16px;color:var(--muted);font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
form input[type=text],form input[type=password],form input[type=datetime-local],form input:not([type]),form textarea,form select{
  display:block;width:100%;margin-top:6px;padding:11px 14px;
  background:var(--bg-2);color:var(--text);
  border:1px solid var(--border-hi);border-radius:var(--radius);
  font:14px var(--sans);transition:border-color .15s;
}
form input:focus,form textarea:focus,form select:focus{outline:none;border-color:var(--text)}
form textarea{font-family:var(--mono);resize:vertical;font-size:13px}

button,.btn{
  padding:10px 18px;background:var(--text);color:var(--bg);
  border:1px solid var(--text);border-radius:var(--radius);
  font-family:var(--mono);font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;cursor:pointer;
  transition:all .12s;display:inline-flex;align-items:center;gap:8px;
}
button:hover,.btn:hover{background:transparent;color:var(--text)}
button.ghost{background:transparent;color:var(--text);border-color:var(--border-hi)}
button.ghost:hover{border-color:var(--text);background:transparent}
button.danger-btn{background:transparent;color:var(--err);border-color:var(--err)}
button.danger-btn:hover{background:var(--err);color:var(--bg)}
button.linklike{background:none;border:none;color:var(--muted);padding:0;font:inherit;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
button.linklike:hover{color:var(--text);background:none}
form.inline{display:inline}

.flash{background:rgba(255,204,0,.08);border:1px solid var(--warn);color:var(--warn);padding:12px 16px;border-radius:var(--radius);margin-bottom:20px;font-family:var(--mono);font-size:12px}
.error{background:rgba(255,69,58,.08);border:1px solid var(--err);color:var(--err);padding:12px 16px;border-radius:var(--radius);margin-bottom:16px;font-family:var(--mono);font-size:12px}
.info{background:rgba(255,255,255,.03);border:1px solid var(--border-hi);padding:12px 16px;border-radius:var(--radius);margin-top:12px;color:var(--muted);font-size:13px}
.muted{color:var(--muted)}
.small{font-size:12px}
.mono{font-family:var(--mono)}

/* subscription grid + flip cards */
.sub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.flip{perspective:1200px;height:200px}
.flip-inner{position:relative;width:100%;height:100%;transition:transform .5s cubic-bezier(.4,.1,.2,1);transform-style:preserve-3d}
.flip.flipped .flip-inner{transform:rotateY(180deg)}
.flip-face{position:absolute;inset:0;backface-visibility:hidden;background:var(--panel);border:1px solid var(--border-hi);border-radius:var(--radius);padding:20px;display:flex;flex-direction:column;justify-content:space-between}
.flip-face.back{transform:rotateY(180deg)}
.flip-face.front:hover{border-color:var(--text)}
.flip-face .plan{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.flip-face .status-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:6px;vertical-align:middle}
.status-dot.active{background:var(--ok);box-shadow:0 0 8px var(--ok)}
.status-dot.expired{background:var(--err)}
.status-dot.canceled{background:var(--dim)}
.flip-face .status-label{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.flip-face .countdown{font-family:var(--mono);font-size:28px;font-weight:300;letter-spacing:-.02em;margin:8px 0}
.flip-face .countdown.expired{color:var(--err)}
.flip-face .expires{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.08em}
.flip-face .reveal-btn{align-self:flex-start;margin-top:auto;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);background:none;border:none;padding:6px 0;cursor:pointer}
.flip-face .reveal-btn:hover{color:var(--text);background:none}
.flip-face .reveal-btn::after{content:" →";transition:transform .2s}
.flip-face .reveal-btn:hover::after{transform:translateX(2px)}
.flip-face.back .cred-label{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.flip-face.back .cred-val{font-family:var(--mono);font-size:12px;color:var(--text);word-break:break-all;flex:1;overflow:auto;background:var(--bg-2);border:1px solid var(--border);padding:8px;border-radius:var(--radius)}
.flip-face.back .back-actions{display:flex;gap:10px;margin-top:10px}
.flip-face.back .back-actions button{flex:1;padding:8px;font-size:10px}

.sub-empty{border:1px dashed var(--border-hi);border-radius:var(--radius);padding:40px;text-align:center;color:var(--muted);font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase}

/* plans (buy) */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:12px}
.plan-card{border:1px solid var(--border-hi);border-radius:var(--radius);padding:20px;background:var(--panel)}
.plan-card .price{font-family:var(--mono);font-size:32px;font-weight:300;margin:8px 0}
.plan-card .price small{font-size:13px;color:var(--muted)}
.plan-card .desc{color:var(--muted);font-size:13px;margin-bottom:16px}
.plan-card button{width:100%;justify-content:center}

/* admin */
.user-row{border:1px solid var(--border);border-radius:var(--radius);padding:20px;margin-bottom:14px;background:var(--panel)}
.user-head{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap;padding-bottom:12px;border-bottom:1px solid var(--border)}
.user-head strong{font-family:var(--mono);font-size:14px;letter-spacing:.04em}
.badge{display:inline-block;padding:3px 10px;font-family:var(--mono);font-size:10px;border-radius:2px;background:var(--border);color:var(--muted);text-transform:uppercase;letter-spacing:.12em}
.badge.ok{background:rgba(48,209,88,.12);color:var(--ok);border:1px solid rgba(48,209,88,.3)}
.badge.off{background:rgba(122,122,122,.1);color:var(--muted)}
.badge.admin{background:rgba(255,59,48,.12);color:var(--accent);border:1px solid rgba(255,59,48,.3)}

.sub-table{width:100%;border-collapse:collapse;margin-bottom:12px;font-family:var(--mono);font-size:12px}
.sub-table th{text-align:left;color:var(--muted);font-weight:500;letter-spacing:.1em;text-transform:uppercase;font-size:10px;padding:8px 6px;border-bottom:1px solid var(--border)}
.sub-table td{padding:8px 6px;border-bottom:1px solid var(--border);vertical-align:top}
.sub-table tr:last-child td{border-bottom:none}
.sub-table td input,.sub-table td textarea{padding:6px 8px;font-size:12px;margin:0}
.sub-table td textarea{min-height:40px}
.sub-table .td-actions{display:flex;gap:6px;flex-wrap:wrap}
.sub-table .td-actions button{padding:6px 10px;font-size:10px}

.add-sub{border-top:1px dashed var(--border-hi);padding-top:14px;margin-top:10px}
.add-sub-grid{display:grid;grid-template-columns:120px 1fr 180px auto;gap:10px;align-items:end}
.add-sub-grid label{margin-bottom:0}
@media(max-width:720px){.add-sub-grid{grid-template-columns:1fr}}

.row-actions{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.inline-form{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap}
.inline-form label{flex:1;min-width:200px;margin-bottom:0}
.checkbox{display:flex;align-items:center;gap:8px;color:var(--text);font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.checkbox input{width:auto;margin:0}

.copied-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--text);color:var(--bg);padding:10px 18px;border-radius:var(--radius);font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:0;transition:opacity .2s;pointer-events:none;z-index:100}
.copied-toast.show{opacity:1}

/* plan + provider picker */
.plan-pick{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:10px}
@media(max-width:560px){.plan-pick{grid-template-columns:1fr}}
.plan-opt input,.prov-opt input{position:absolute;opacity:0;pointer-events:none}
.plan-opt{cursor:pointer;display:block}
.plan-opt-inner{border:1px solid var(--border-hi);border-radius:var(--radius);padding:18px;background:var(--panel);transition:all .15s}
.plan-opt:hover .plan-opt-inner{border-color:var(--text)}
.plan-opt input:checked + .plan-opt-inner{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.plan-opt .price{font-family:var(--mono);font-size:26px;font-weight:300;margin:6px 0}
.plan-opt .price small{font-size:12px;color:var(--muted)}
.plan-opt .plan{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.plan-opt .desc{color:var(--muted);font-size:12px}

.provider-tabs{display:flex;gap:2px;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius);padding:3px;margin-top:10px;width:fit-content}
.provider-tabs .tab{padding:8px 14px;border:none;background:transparent;color:var(--muted);font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;border-radius:2px}
.provider-tabs .tab:hover{color:var(--text);background:transparent}
.provider-tabs .tab.active{background:var(--text);color:var(--bg)}

.provider-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin-top:12px}
.prov-opt{cursor:pointer;display:block}
.prov-opt-inner{border:1px solid var(--border-hi);border-radius:var(--radius);padding:14px;background:var(--panel);transition:all .12s;height:100%}
.prov-opt:hover .prov-opt-inner{border-color:var(--text)}
.prov-opt input:checked + .prov-opt-inner{border-color:var(--accent);background:rgba(255,59,48,.04);box-shadow:0 0 0 1px var(--accent)}
.prov-label{font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.04em;margin-bottom:4px}
.prov-desc{color:var(--muted);font-size:11px;line-height:1.4}
.pay-section{opacity:0;transform:translateY(8px);transition:opacity .3s,transform .3s}
.pay-section.visible{opacity:1;transform:none}

/* email field — matches plan/provider tiles */
.email-field{display:flex;align-items:stretch;border:1px solid var(--border-hi);border-radius:var(--radius);background:var(--panel);margin-top:10px;transition:border-color .15s;overflow:hidden}
.email-field:focus-within{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.email-field .email-at{display:flex;align-items:center;justify-content:center;width:44px;font-family:var(--mono);font-size:16px;color:var(--muted);background:var(--bg-2);border-right:1px solid var(--border-hi)}
.email-field input{flex:1;margin:0 !important;padding:14px 16px !important;background:transparent !important;border:none !important;font-family:var(--mono) !important;font-size:13px !important;letter-spacing:.02em}
.email-field input:focus{outline:none;border:none !important;box-shadow:none !important}