:root {
  --bg:#f4f6fb; --card:#fff; --ink:#0f172a; --muted:#64748b; --line:#e2e8f0; --soft:#f8fafc; --chip:#eef2f7;
  --brand:#2e6cff; --brand-ink:#fff; --brand-soft:#e8efff; --ok:#15803d; --ok-soft:#dcfce7; --warn:#b45309; --warn-soft:#fef3c7;
  --bad:#b91c1c; --bad-soft:#fee2e2; --info:#1d4ed8; --info-soft:#dbeafe; --shadow:0 1px 2px rgba(15,23,42,.05), 0 4px 16px rgba(15,23,42,.04);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#0b1020; --card:#131a2e; --ink:#e7ecf6; --muted:#93a0b8; --line:#26304a; --soft:#182038; --chip:#1d2742;
    --brand:#5b8cff; --brand-soft:#1c2a52; --ok:#4ade80; --ok-soft:#12321f; --warn:#fbbf24; --warn-soft:#3a2c0b;
    --bad:#f87171; --bad-soft:#3b1414; --info:#93c5fd; --info-soft:#15284d; --shadow:none;
  }
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; font:15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color:var(--ink); background:var(--bg); }
main { max-width:1080px; margin:0 auto; padding:0 16px calc(64px + env(safe-area-inset-bottom)); }
h1 { font-size:22px; margin:0 0 4px; } h2 { font-size:17px; margin:0; } h3 { font-size:15px; margin:18px 0 8px; }
.muted { color:var(--muted); } .center { text-align:center; } .small { font-size:13px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:20px; margin:0 0 16px; box-shadow:var(--shadow); }
.card-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.narrow { max-width:420px; margin:10vh auto 0; }

/* Top bar and tabs */
.top { position:sticky; top:0; z-index:10; margin:0 -16px 16px; padding:12px 16px 0; padding-top:max(12px, env(safe-area-inset-top));
  background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:saturate(1.4) blur(12px); -webkit-backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--line); }
.top-row { display:flex; align-items:center; gap:12px; }
.brand { display:flex; align-items:center; gap:10px; font-size:17px; font-weight:700; flex:1; min-width:0; }
.logo { width:30px; height:30px; border-radius:9px; flex:0 0 auto; background:linear-gradient(135deg, #2e6cff, #22c3a6); box-shadow:inset 0 0 0 2px rgba(255,255,255,.25); }
.who { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:40vw; }
.tabs { display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; margin:10px -16px 0; padding:0 16px; scroll-snap-type:x proximity; }
.tabs::-webkit-scrollbar { display:none; }
.tabs button { flex:0 0 auto; scroll-snap-align:start; background:transparent; color:var(--muted); border:0; border-bottom:2px solid transparent;
  border-radius:0; padding:10px 12px; min-height:44px; }
.tabs button[aria-current="page"] { color:var(--brand); border-bottom-color:var(--brand); }

/* Controls */
button { font:inherit; font-weight:600; min-height:40px; padding:8px 14px; border-radius:10px; border:1px solid var(--brand); background:var(--brand);
  color:var(--brand-ink); cursor:pointer; transition:background .15s, transform .05s; -webkit-tap-highlight-color:transparent; }
button:active { transform:scale(.98); }
button.ghost { background:transparent; color:var(--brand); }
button.danger { background:var(--bad); border-color:var(--bad); color:#fff; }
button.ghost.danger { background:transparent; color:var(--bad); }
button.armed { background:var(--warn); border-color:var(--warn); color:#fff; }
button:disabled { opacity:.5; cursor:default; }
label { display:block; font-weight:600; margin:12px 0 4px; }
input, select, textarea { font:inherit; width:100%; min-height:44px; padding:10px 12px; border:1px solid var(--line); border-radius:10px;
  background:var(--card); color:var(--ink); }
input:focus, select:focus, textarea:focus, button:focus-visible { outline:2px solid var(--brand); outline-offset:1px; }
textarea { min-height:96px; resize:vertical; }
form > button[type=submit] { margin-top:16px; }
.row { display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; } .row > * { flex:1; min-width:140px; } .row > .fit { flex:0 0 auto; min-width:0; }
.actions { display:flex; gap:8px; flex-wrap:wrap; }

/* Overview */
.hero { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:12px; margin-bottom:12px; }
.hero .stat b { font-size:34px; }
.stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:12px; }
.stat { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px 16px; box-shadow:var(--shadow); }
.stat b { display:block; font-size:26px; line-height:1.2; font-variant-numeric:tabular-nums; }
.stat.accent { background:var(--brand-soft); border-color:transparent; }
.section-title { font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin:20px 0 8px; }

/* Tables (become cards on phones) */
table { width:100%; border-collapse:collapse; }
th, td { text-align:left; padding:10px; border-bottom:1px solid var(--line); vertical-align:top; }
th { font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
tr.click { cursor:pointer; } tr.click:hover { background:var(--soft); }
.scroll { overflow-x:auto; }

/* Lists */
.list { display:grid; gap:10px; }
.item { border:1px solid var(--line); border-radius:12px; padding:14px; display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.item .meta { flex:1; min-width:200px; }

.pill { display:inline-block; padding:2px 9px; border-radius:999px; font-size:12px; font-weight:700; background:var(--chip); color:var(--ink); white-space:nowrap; }
.pill.active, .pill.lifetime, .pill.live { background:var(--ok-soft); color:var(--ok); } .pill.trial { background:var(--info-soft); color:var(--info); }
.pill.cancelled, .pill.billing_issue, .pill.paused { background:var(--warn-soft); color:var(--warn); } .pill.expired { background:var(--bad-soft); color:var(--bad); }
.error { color:var(--bad); font-weight:600; margin-top:10px; } .notice { color:var(--ok); font-weight:600; margin-top:10px; }
.empty { text-align:center; color:var(--muted); padding:28px 12px; border:1px dashed var(--line); border-radius:12px; }
.bar-track { background:var(--chip); border-radius:6px; height:10px; overflow:hidden; } .bar-fill { background:var(--brand); height:10px; border-radius:6px; }
.answer { margin:8px 0 12px; } .answer .row-label { display:flex; justify-content:space-between; gap:8px; font-size:14px; margin-bottom:4px; }
.q { border:1px solid var(--line); border-radius:12px; padding:12px; margin:10px 0; background:var(--soft); }
code { background:var(--chip); padding:2px 6px; border-radius:6px; word-break:break-all; font-size:12.5px; }
img.qr { display:block; margin:12px auto; image-rendering:pixelated; background:#fff; padding:8px; border-radius:12px; }
pre { white-space:pre-wrap; word-break:break-word; background:var(--soft); border:1px solid var(--line); border-radius:10px; padding:10px; font-size:12px; max-height:360px; overflow:auto; }
.skeleton { height:90px; border-radius:14px; background:linear-gradient(90deg, var(--card), var(--soft), var(--card)); background-size:200% 100%; animation:shine 1.2s linear infinite; }
@keyframes shine { to { background-position:-200% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation:none; } }

.toast { position:fixed; left:50%; bottom:calc(20px + env(safe-area-inset-bottom)); transform:translateX(-50%); z-index:20; max-width:calc(100% - 32px);
  background:var(--ink); color:var(--bg); padding:10px 16px; border-radius:12px; font-weight:600; box-shadow:0 8px 24px rgba(0,0,0,.2); }
.toast.bad { background:var(--bad); color:#fff; }

@media (max-width: 640px) {
  body { font-size:16px; }
  main { padding-left:12px; padding-right:12px; }
  .top { margin:0 -12px 12px; padding-left:12px; padding-right:12px; }
  .tabs { margin:8px -12px 0; padding:0 12px; }
  .card { padding:16px; border-radius:14px; }
  .who { display:none; }
  .stats, .hero { grid-template-columns:1fr 1fr; gap:10px; }
  .hero .stat b { font-size:28px; }
  .stat { padding:12px; }
  .narrow { margin-top:6vh; }
  table.cards thead { display:none; }
  table.cards, table.cards tbody, table.cards tr, table.cards td { display:block; width:100%; }
  table.cards tr { border:1px solid var(--line); border-radius:12px; padding:8px 12px; margin:0 0 10px; background:var(--card); }
  table.cards td { display:flex; justify-content:space-between; align-items:baseline; gap:12px; border:0; padding:5px 0; text-align:right; min-width:0; }
  table.cards td::before { content:attr(data-label); color:var(--muted); font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; text-align:left; flex:0 0 auto; }
  .item .actions { width:100%; } .item .actions > button { flex:1; }
}