/* =========================================================================
   AirtimeDeal dashboard — same palette as /documentation/ so the product
   reads as one thing. Light by default, dark when the OS asks for it.
   ========================================================================= */

:root{
  --bg:#f4f6f8; --panel:#ffffff; --panel-2:#f7f8fa; --border:#e3e6ea;
  --ink:#12161c; --muted:#5b6572; --faint:#8b95a1;
  --brand:#0a7d4b; --brand-ink:#fff; --brand-soft:#e6f4ed;
  --accent:#0b5cd5; --ok:#0a7d4b; --ok-bg:#e6f4ed;
  --warn:#a25c00; --warn-bg:#fdf3e3; --bad:#c0392b; --bad-bg:#fdeceb;
  --code-bg:#12161c; --code-ink:#e6edf3;
  --radius:10px; --shadow:0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.04);
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0d1117; --panel:#161b22; --panel-2:#1c222b; --border:#293039;
    --ink:#e6edf3; --muted:#9aa5b1; --faint:#6e7781;
    --brand:#2ea36a; --brand-soft:#12281e;
    --accent:#5b9dff; --ok:#2ea36a; --ok-bg:#12281e;
    --warn:#d99b45; --warn-bg:#2b2113; --bad:#e5534b; --bad-bg:#2d1715;
    --code-bg:#010409; --shadow:0 1px 2px rgba(0,0,0,.4);
  }
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font:15px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
code{font-family:var(--mono);font-size:.88em}
h1,h2,h3{letter-spacing:-.01em;margin:0}

/* ---------- top bar ---------- */
.topbar{background:var(--panel);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:50}
.topbar-in{max-width:1180px;margin:0 auto;padding:0 20px;display:flex;align-items:center;gap:26px;height:56px}
.brand{font-weight:700;color:var(--ink);font-size:15.5px;white-space:nowrap}
.brand span{color:var(--brand)}
.brand:hover{text-decoration:none}
.mainnav{display:flex;gap:2px;flex:1;overflow-x:auto}
.mainnav a{color:var(--muted);padding:7px 12px;border-radius:7px;font-size:14.5px;white-space:nowrap}
.mainnav a:hover{background:var(--panel-2);color:var(--ink);text-decoration:none}
.mainnav a.on{background:var(--brand-soft);color:var(--brand);font-weight:600}
.whoami{display:flex;align-items:center;gap:12px;font-size:13.5px;color:var(--muted);white-space:nowrap}
.ghost{color:var(--muted);border:1px solid var(--border);padding:5px 11px;border-radius:7px;font-size:13px}
.ghost:hover{color:var(--ink);text-decoration:none;background:var(--panel-2)}

.page{max-width:1180px;margin:0 auto;padding:28px 20px 80px}
.foot{max-width:1180px;margin:0 auto;padding:0 20px 40px;color:var(--faint);font-size:13px;display:flex;gap:8px;flex-wrap:wrap}

/* ---------- headings ---------- */
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.head h1{font-size:24px}
.head p{margin:4px 0 0;color:var(--muted);font-size:14.5px}

/* ---------- cards ---------- */
.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.card+.card{margin-top:18px}
.card-h{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.card-h h2{font-size:15.5px}
.card-h .sub{color:var(--muted);font-size:13px;margin-top:2px}
.card-b{padding:18px}
.card-b.tight{padding:0}

/* ---------- stat tiles ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:22px}
.stat{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow)}
.stat .label{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.stat .value{font-size:27px;font-weight:700;margin-top:6px;letter-spacing:-.02em}
.stat .value small{font-size:14px;font-weight:600;color:var(--muted);margin-right:3px}
.stat .foot{color:var(--faint);font-size:12.5px;margin-top:3px}
.stat.good .value{color:var(--ok)}
.stat.bad .value{color:var(--bad)}

/* ---------- tables ---------- */
.tablewrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;padding:10px 14px;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;
   color:var(--muted);font-weight:600;background:var(--panel-2);border-bottom:1px solid var(--border);white-space:nowrap}
td{padding:11px 14px;border-bottom:1px solid var(--border);vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--panel-2)}
td.mono,.mono{font-family:var(--mono);font-size:12.5px}
td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.empty{padding:44px 18px;text-align:center;color:var(--muted)}
.empty strong{display:block;color:var(--ink);margin-bottom:5px;font-size:15px}

/* ---------- pills ---------- */
.pill{display:inline-block;padding:2px 9px;border-radius:99px;font-size:11.5px;font-weight:600;
      text-transform:capitalize;letter-spacing:.01em;white-space:nowrap}
.pill.ok{background:var(--ok-bg);color:var(--ok)}
.pill.wait{background:var(--warn-bg);color:var(--warn)}
.pill.bad{background:var(--bad-bg);color:var(--bad)}
.pill.mute{background:var(--panel-2);color:var(--muted);border:1px solid var(--border)}
.tag{display:inline-block;background:var(--panel-2);border:1px solid var(--border);border-radius:5px;
     padding:1px 7px;font-size:11.5px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:14px;font-weight:600;
     background:var(--brand);color:var(--brand-ink);border:1px solid var(--brand);
     padding:8px 15px;border-radius:8px;cursor:pointer;white-space:nowrap}
.btn:hover{filter:brightness(1.07);text-decoration:none;color:var(--brand-ink)}
.btn.sec{background:var(--panel);color:var(--ink);border-color:var(--border)}
.btn.sec:hover{background:var(--panel-2);color:var(--ink)}
.btn.danger{background:var(--bad);border-color:var(--bad);color:#fff}
.btn.sm{padding:5px 11px;font-size:13px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btnrow{display:flex;gap:9px;flex-wrap:wrap;align-items:center}

/* ---------- forms ---------- */
label{display:block;font-size:13px;font-weight:600;margin-bottom:5px;color:var(--ink)}
label .opt{font-weight:400;color:var(--faint);text-transform:none;letter-spacing:0}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],select,textarea{
  width:100%;font:inherit;font-size:14.5px;padding:9px 11px;border:1px solid var(--border);
  border-radius:8px;background:var(--panel);color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:transparent}
.field{margin-bottom:15px}
.field .hint{color:var(--faint);font-size:12.5px;margin-top:5px}
.field .err{color:var(--bad);font-size:12.5px;margin-top:5px;font-weight:600}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:0 16px}
fieldset{border:none;margin:0;padding:0}

/* ---------- flash ---------- */
.flash{padding:12px 16px;border-radius:9px;margin-bottom:18px;font-size:14.5px;border:1px solid}
.flash.ok{background:var(--ok-bg);border-color:var(--ok);color:var(--ok)}
.flash.err{background:var(--bad-bg);border-color:var(--bad);color:var(--bad)}
.flash.warn{background:var(--warn-bg);border-color:var(--warn);color:var(--warn)}
.flash code{background:rgba(0,0,0,.07);padding:1px 5px;border-radius:4px}

/* ---------- key reveal ---------- */
.keybox{background:var(--code-bg);color:var(--code-ink);border-radius:8px;padding:12px 14px;
        font-family:var(--mono);font-size:12.5px;word-break:break-all;display:flex;
        align-items:center;gap:10px;justify-content:space-between}
.keybox span{flex:1;min-width:0}
.copy{background:rgba(255,255,255,.12);border:none;color:#fff;font:inherit;font-size:11.5px;font-weight:600;
      padding:4px 10px;border-radius:6px;cursor:pointer;white-space:nowrap}
.copy:hover{background:rgba(255,255,255,.22)}
.secret-once{border:2px solid var(--warn);background:var(--warn-bg);border-radius:var(--radius);padding:16px 18px;margin-bottom:20px}
.secret-once h3{font-size:15px;color:var(--warn);margin-bottom:4px}
.secret-once p{margin:0 0 12px;font-size:14px;color:var(--ink)}

/* ---------- account cards ---------- */
.acctgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:16px}
.acct .card-h{align-items:flex-start}
.acct .name{font-size:16px;font-weight:700}
.acct .dest{color:var(--muted);font-size:13.5px;margin-top:3px;font-family:var(--mono)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:7px 14px;font-size:13.5px;margin-top:4px}
.kv dt{color:var(--muted)}
.kv dd{margin:0;word-break:break-all}
.mini{display:flex;gap:18px;margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}
.mini div{font-size:12.5px;color:var(--muted)}
.mini b{display:block;font-size:17px;color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}

/* ---------- filters ---------- */
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.filters .field{margin-bottom:0;min-width:132px}
.filters .field.grow{flex:1;min-width:190px}

/* ---------- pagination ---------- */
.pager{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px;
       border-top:1px solid var(--border);font-size:13.5px;color:var(--muted);flex-wrap:wrap}
.pager a{padding:5px 11px;border:1px solid var(--border);border-radius:7px;color:var(--ink)}
.pager a:hover{background:var(--panel-2);text-decoration:none}
.pager .off{opacity:.4;pointer-events:none}

/* ---------- expandable detail row ---------- */
.detail{background:var(--panel-2)}
.detail td{padding:0}
.detail-in{padding:18px;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px}
.detail h4{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 8px}
pre.json{background:var(--code-bg);color:var(--code-ink);border-radius:8px;padding:12px;overflow-x:auto;
         font-family:var(--mono);font-size:12px;line-height:1.55;margin:0;max-height:260px}
.rowbtn{background:none;border:1px solid var(--border);border-radius:6px;color:var(--muted);
        cursor:pointer;font:inherit;font-size:12px;padding:3px 9px}
.rowbtn:hover{background:var(--panel);color:var(--ink)}

/* ---------- auth screen ---------- */
.authwrap{min-height:100vh;display:grid;place-items:center;padding:32px 20px}
.authbox{width:100%;max-width:430px}
.authlogo{text-align:center;margin-bottom:22px}
.authlogo b{font-size:21px;letter-spacing:-.02em}
.authlogo b span{color:var(--brand)}
.authlogo p{color:var(--muted);margin:5px 0 0;font-size:14px}
.tabs{display:flex;background:var(--panel-2);border:1px solid var(--border);border-radius:9px;padding:3px;margin-bottom:20px}
.tabs button{flex:1;font:inherit;font-size:14px;font-weight:600;background:none;border:none;color:var(--muted);
             padding:8px;border-radius:7px;cursor:pointer}
.tabs button.on{background:var(--panel);color:var(--ink);box-shadow:var(--shadow)}
.authbox .card-b{padding:22px}
.authbox .btn{width:100%;justify-content:center;padding:11px}
.steps{counter-reset:s;margin:0;padding:0;list-style:none}
.steps li{counter-increment:s;position:relative;padding-left:34px;margin-bottom:14px;color:var(--muted);font-size:14.5px}
.steps li::before{content:counter(s);position:absolute;left:0;top:0;width:23px;height:23px;border-radius:50%;
  background:var(--brand-soft);color:var(--brand);font-weight:700;font-size:12.5px;display:grid;place-items:center}
.steps li b{color:var(--ink);display:block}

@media(max-width:760px){
  .topbar-in{gap:14px}
  .whoami span{display:none}
  .grid2{grid-template-columns:1fr}
  .detail-in{grid-template-columns:1fr}
}

/* =========================================================================
   Dropdown menu — replaces the nav row that used to scroll sideways.
   ========================================================================= */
.topbar-in{gap:14px}
.menu{position:relative}
.menu:first-of-type{margin-right:auto}

.menu-btn{display:flex;align-items:center;gap:9px;font:inherit;font-size:14px;font-weight:600;
  background:var(--panel-2);color:var(--ink);border:1px solid var(--border);
  padding:7px 12px;border-radius:9px;cursor:pointer;white-space:nowrap}
.menu-btn:hover{background:var(--bg)}
.menu-btn[aria-expanded="true"]{border-color:var(--brand);color:var(--brand)}
.caret{font-size:10px;opacity:.6}

.burger{display:inline-flex;flex-direction:column;gap:3px;width:14px}
.burger i{display:block;height:2px;background:currentColor;border-radius:2px}

.avatar{width:22px;height:22px;border-radius:50%;background:var(--brand);color:#fff;
  display:grid;place-items:center;font-size:11.5px;font-weight:700}

.menu-pop{position:absolute;top:calc(100% + 7px);left:0;z-index:100;min-width:265px;
  background:var(--panel);border:1px solid var(--border);border-radius:11px;
  box-shadow:0 10px 34px rgba(16,24,40,.16);padding:6px;overflow:hidden}
.menu-pop.right{left:auto;right:0;min-width:215px}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .menu-pop{box-shadow:0 10px 34px rgba(0,0,0,.6)}
}

.menu-pop a{display:block;padding:9px 12px;border-radius:8px;color:var(--ink)}
.menu-pop a:hover{background:var(--panel-2);text-decoration:none}
.menu-pop a.on{background:var(--brand-soft)}
.menu-pop a.on b{color:var(--brand)}
.menu-pop b{display:block;font-size:14px;font-weight:600}
.menu-pop small{display:block;color:var(--muted);font-size:12.5px;margin-top:1px;line-height:1.45}
.menu-sep{height:1px;background:var(--border);margin:6px 4px}
.menu-head{padding:9px 12px}
.menu-head b{font-size:14px}
.menu-head small{color:var(--muted);font-size:12.5px;word-break:break-all}

@media(max-width:560px){
  .menu-current,.who-name{display:none}
  .brand span{display:none}
  .menu-pop{min-width:min(84vw,300px)}
}