/* ============================================================
   Clario Cloud — Industrial minimal dark UI
   system fonts only · 960px · 15/1.6 · lime accent #a3e635
   ============================================================ */

:root {
  --bg:        #0a0a0a;
  --card:      #141414;
  --card-hov:  #1a1a1a;
  --border:    #1e1e1e;
  --border-2:  #2a2a2a;
  --text:      #e0e0e0;
  --muted:     #707070;
  --muted-2:   #4a4a4a;
  --lime:      #a3e635;
  --lime-dim:  #7aa62a;
  --lime-bg:   rgba(163, 230, 53, 0.08);
  --red:       #ef4444;
  --red-bg:    rgba(239, 68, 68, 0.08);
  --amber:     #f59e0b;
  --blue:      #3b82f6;
  --yellow:    #f59e0b;
  --panel:     #111315;
  --line:      #252a31;
  --line2:     #343a43;
  --thead:     #101214;
  --price-off: #8b929c;
  --price-cl:  #d9f99d;
  --seg-bg:    #111419;
  --seg-bd:    #303640;
  --seg-tx:    #aeb5bf;
  --seg-on:    #c9e980;
  --seg-ontx:  #11150b;
  --sw-off:    #2b3038;
  --sw-bd:     #454c57;
  --sw-knob:   #a8b0bb;
  --sw-tr:     #3a4049;
  --sw-trbd:   #4a515c;
  --sw-knob2:  #a2aab5;
  --sw-lb:     #838c98;
  --subtle:    #78818d;
  --subtle-2:  #626b77;
  --btn-dk:    #0d0f11;
  --surface-dk:#101010;
  --input-dk:  #17191d;
  --mono:      'SF Mono', 'Cascadia Code', 'JetBrains Mono', Consolas, 'Liberation Mono', monospace;
  --sans:      -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --radius:    6px;
  --maxw:      960px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); color: var(--text); font: 15px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
::selection { background: var(--lime); color: #0a0a0a; }
a { color: var(--lime); text-decoration: none; }
a:hover { color: var(--text); }
.mono { font-family: var(--mono); }
.muted { color: var(--muted); }
.muted-2 { color: var(--muted-2); }
h1, h2, h3 { font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }
hr, .hr { border: 0; border-top: 1px solid var(--border); margin: 1.5rem 0; }
p { margin: .5rem 0; }
small { font-size: .82rem; }
ol, ul { padding-left: 1.4rem; margin: .5rem 0; }
li { margin: .15rem 0; }
code, pre { font-family: var(--mono); }

/* Admin tab navigation */
.admin-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:24px 0 8px;padding:8px;border:1px solid var(--line);background:var(--panel);position:sticky;top:64px;z-index:10}
.admin-tab{border:1px solid var(--line2);background:transparent;color:var(--muted);padding:10px 16px;border-radius:8px;font:600 .78rem var(--mono);cursor:pointer;text-transform:uppercase}
.admin-tab:hover,.admin-tab.active{background:var(--lime);color:#090b0d;border-color:var(--lime)}
.admin-panel{display:none}.admin-panel[data-admin-panel="overview"]{display:block}
/* ── Layout ─────────────────────────────────────────────── */
.shell { width:100%; max-width:none; margin:0; padding:0 clamp(16px,2.5vw,42px); }
/* Desktop-first layout: use the full viewport, retain compact mobile gutters. */
main.shell { max-width:none !important; width:100% !important; }
/* Global desktop-first rule: every public page uses the viewport, not a narrow centered column. */
main.shell[style*="max-width"], main.shell > .auth-wrap { max-width:none !important; width:100% !important; }
main.shell > .hero, main.shell > section, main.shell > .grid, main.shell > .card, main.shell > .stat-grid { width:100%; }
.page-copy, .hero-copy { max-width: none !important; }
@media (min-width:1100px){ main.shell { padding-left:clamp(32px,4vw,80px); padding-right:clamp(32px,4vw,80px); } }
@media (max-width:720px){ main.shell { padding-left:12px !important; padding-right:12px !important; } }
.card, .stat-grid, .hero { width:100%; }
table { min-width:980px; }
.card { overflow-x:auto; }
.copy-row input { min-width:0; }
@media (min-width:1200px) { .shell { padding-left:clamp(28px,3vw,64px); padding-right:clamp(28px,3vw,64px); } }
@media (max-width:720px) { .shell { padding-left:12px; padding-right:12px; } table { min-width:760px; } }
main.shell { padding-top: 2rem; padding-bottom: 4rem; }
/* Remove narrow centered inner wrappers on public pages while preserving readable text measure. */
main.shell > .container, main.shell > .content, main.shell > .wrap,
main.shell .usage-wrap, main.shell .usage-container, main.shell .usage-content,
main.shell .page-container, main.shell .page-content, main.shell .content-wrap { max-width:none !important; width:100% !important; margin-left:0 !important; margin-right:0 !important; }
main.shell .grid, main.shell .cards, main.shell .stat-grid, main.shell .pricing-grid,
main.shell .usage-grid, main.shell .usage-cards { width:100%; max-width:none !important; }
main.shell p[style*="max-width"], main.shell div[style*="max-width"] { max-width:none !important; }
/* Landing + usage: full desktop canvas, fluid hero/cards, no clipped orbit or fixed centered content. */
.hero{width:100%;max-width:none!important;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr)!important}
.hero-left,.hero-right{min-width:0}
.usage-input-grid,.usage-grid,.usage-cards,.feat-grid,.stat-grid{width:100%;max-width:none!important}
.trusted-models{text-align:left!important}
@media (min-width:1100px){ main.shell > * { max-width:none !important; } }
@media (max-width:900px){.hero{grid-template-columns:1fr!important;gap:1.5rem!important}.hero-right{order:2}.orbit-wrap{width:min(400px,92vw)!important;height:min(400px,92vw)!important;min-height:280px!important}}
@media (max-width:720px){.hero{padding-top:1rem!important}.hero h1{font-size:clamp(2rem,9vw,3.2rem)}.hero-left,.hero-right{width:100%;overflow:visible}.orbit-wrap{width:min(300px,88vw)!important;height:min(300px,88vw)!important;min-height:260px!important;overflow:visible!important}.orbit-container{overflow:visible!important;animation:orbit-cw 28s linear infinite!important}.orbit-container .o-logo{width:50px!important;height:50px!important;top:50%!important;left:50%!important;margin:-25px 0 0 -25px!important;animation:none!important}.orbit-container .o-logo:nth-child(1){transform:translateY(-112px)!important}.orbit-container .o-logo:nth-child(2){transform:rotate(45deg) translateY(-112px) rotate(-45deg)!important}.orbit-container .o-logo:nth-child(3){transform:rotate(90deg) translateY(-112px) rotate(-90deg)!important}.orbit-container .o-logo:nth-child(4){transform:rotate(135deg) translateY(-112px) rotate(-135deg)!important}.orbit-container .o-logo:nth-child(5){transform:rotate(180deg) translateY(-112px) rotate(-180deg)!important}.orbit-container .o-logo:nth-child(6){transform:rotate(225deg) translateY(-112px) rotate(-225deg)!important}.orbit-container .o-logo:nth-child(7){transform:rotate(270deg) translateY(-112px) rotate(-270deg)!important}.orbit-container .o-logo:nth-child(8){transform:rotate(315deg) translateY(-112px) rotate(-315deg)!important}.nav-inner{flex-wrap:wrap;gap:.6rem}.nav-links{width:100%;overflow-x:auto;white-space:nowrap;padding-bottom:.35rem}}


/* ── Header / nav ───────────────────────────────────────── */
.nav {
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
}
body{padding-top:53px!important}
body{padding-top:0!important;margin-top:0!important}body > svg.cc-aurora-svg:first-child{margin:0!important}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 52px;
}
.brand {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; color: var(--text); letter-spacing: -0.01em;
}
.brand:hover { color: var(--lime); }
.brand .mark {
  width: 22px; height: 22px; border: 1px solid var(--lime); color: var(--lime);
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  display: grid; place-items: center; border-radius: 4px;
  background: var(--lime-bg);
}
.nav-links { display: flex; gap: 16px; align-items: center; }
.nav-links a {
  color: var(--muted); font-size: .9rem; font-weight: 500;
  transition: color .12s;
}
.nav-links a:hover, .nav-links a.active { color: var(--lime); }
.nav-links a.btn { color: #0a0a0a; }

/* ── Footer ─────────────────────────────────────────────── */
footer {
  border-top: 1px solid var(--border);
  padding: 1.1rem 0; margin-top: 4rem;
  color: var(--muted-2); font-size: .82rem;
}
footer .shell { display: flex; justify-content: space-between; align-items: center; }

/* ── Buttons ────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 36px; padding: 0 16px; gap: 6px;
  font: 500 .9rem/1 var(--sans);
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer; white-space: nowrap;
  background: none; color: var(--text);
  transition: background .12s, border-color .12s, color .12s, opacity .12s;
}
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn-primary {
  background: var(--lime); color: #0a0a0a; font-weight: 600;
}
.btn-primary:hover { background: #b8f04e; color: #0a0a0a; }
.btn-secondary {
  background: transparent; color: var(--text); border-color: var(--border-2);
}
/* v152: a user-picked plan always reads selected, even on .btn-secondary. */
.plan-card.selected .btn-secondary {
  background: var(--lime)!important; color: #000!important; border-color: var(--lime)!important;
}
.btn-secondary:hover { border-color: var(--muted); }
.btn-danger {
  background: transparent; color: var(--red); border-color: rgba(239, 68, 68, .35);
}
.btn-danger:hover { background: var(--red-bg); border-color: var(--red); }
.btn-sm { height: 28px; padding: 0 10px; font-size: .8rem; }
.btn-block { display: flex; width: 100%; }

/* ── Cards ──────────────────────────────────────────────── */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.card + .card { margin-top: 1rem; }
.card-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.card-title h2, .card-title h3 { margin: 0; }

/* ── Forms ──────────────────────────────────────────────── */
input, textarea, select {
  background: #0d0d0d; border: 1px solid var(--border-2); color: var(--text);
  border-radius: var(--radius); padding: 0 12px; height: 36px;
  font: .92rem var(--sans); width: 100%;
  transition: border-color .12s;
}
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--lime);
}
input::placeholder { color: var(--muted-2); }
input.mono, textarea.mono { font-family: var(--mono); font-size: .85rem; }
textarea { min-height: 88px; padding: 10px 12px; line-height: 1.5; resize: vertical; }
label {
  display: block; font-size: .82rem; font-weight: 500; color: var(--muted);
  margin-bottom: 4px; letter-spacing: .01em;
}
.form-row { margin-bottom: .9rem; }
.form-row label + input { margin-top: 0; }
.form-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
}
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.input-group { display: flex; gap: 8px; align-items: stretch; }
.input-group input { flex: 1; min-width: 0; }
.copy-row { display: flex; gap: 8px; align-items: center; }
.copy-row input { flex: 1; min-width: 0; font-family: var(--mono); font-size: .85rem; }
.copy-row .btn { flex-shrink: 0; }

/* ── Flash ──────────────────────────────────────────────── */
.flash {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: .7rem 1rem; font-size: .9rem; margin-bottom: 1rem;
}
.flash.ok { border-color: rgba(163, 230, 53, .35); background: var(--lime-bg); color: var(--text); }
.flash.bad { border-color: rgba(239, 68, 68, .35); background: var(--red-bg); color: #fca5a5; }

/* ── Badges / tags ──────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; height: 22px; padding: 0 9px;
  font: 600 .72rem/1 var(--mono); letter-spacing: .04em;
  border-radius: 4px; border: 1px solid var(--border-2); color: var(--muted);
}
.badge-ok { background: var(--lime-bg); color: var(--lime); border-color: rgba(163, 230, 53, .35); }
.badge-wait { background: rgba(245, 158, 11, .08); color: var(--amber); border-color: rgba(245, 158, 11, .35); }
.badge-bad { background: var(--red-bg); color: var(--red); border-color: rgba(239, 68, 68, .35); }
/* Tier + key_tags (dashboard kartu, kanan atas) — palet locked Sep 24 */
.key-tags { display: inline-flex; align-items: center; gap: 6px; }
.tier-tag {
  display: inline-flex; align-items: center; height: 22px; padding: 0 9px;
  font: 800 .7rem/1 var(--mono); letter-spacing: .05em;
  border-radius: 4px; border: 1px solid var(--border-2); white-space: nowrap;
}
.tier-tag.tier-standart { color: #a3e635; border-color: #3f6212; background: #141a0d; }
.tier-tag.tier-full { color: #0a0a0a; background: #a3e635; border-color: #a3e635; }
/* Mult badge di key-tags (dashboard + admin, kanan atas) — mono, netral */
.key-tags .mult-tag {
  display: inline-flex; align-items: center; height: 22px; padding: 0 9px;
  font: 700 .7rem/1 var(--mono); letter-spacing: .03em; white-space: nowrap;
  color: var(--text); background: #101418; border: 1px solid var(--border-2); border-radius: 4px;
}
/* Key sub-line di header kartu (preview + to:) */
.dashboard-key-card .key-sub, .key-item .key-sub {
  display: block; margin-top: 2px; color: var(--muted);
  font: 500 10px ui-monospace, monospace; letter-spacing: .02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Status dot di key-tags (dashboard + admin, kanan atas) — ganti badge teks */
.key-tags .status-dot { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px 0 7px; border-radius: 99px; border: 1px solid var(--border-2); font: 700 .68rem/1 var(--mono); letter-spacing: .04em; color: var(--muted); }
.key-tags .status-dot::before { content: ""; width: 7px; height: 7px; border-radius: 99px; background: currentColor; }
.key-tags .status-dot.on { color: #a3e635; border-color: rgba(163,230,53,.35); background: rgba(163,230,53,.07); }
.key-tags .status-dot.off { color: #f87171; border-color: rgba(239,68,68,.35); background: rgba(239,68,68,.07); }
.key-tags .status-dot.limit { color: #fbbf24; border-color: rgba(245,158,11,.35); background: rgba(245,158,11,.07); }
.tag {
  display: inline-flex; align-items: center; height: 20px; padding: 0 8px;
  font: 500 .72rem/1 var(--sans); color: var(--muted);
  background: var(--surface-dk); border: 1px solid var(--border); border-radius: 4px;
}

/* ── Tables ─────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td {
  text-align: left; padding: .6rem .7rem; border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
th {
  font: 600 .76rem/1 var(--sans); color: var(--muted); letter-spacing: .04em;
  text-transform: uppercase;
}
tr:last-child td { border-bottom: none; }
tbody tr { transition: background .08s; }
tbody tr:hover { background: var(--card-hov); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td .mono { font-size: .82rem; }

/* ── Stat cards ─────────────────────────────────────────── */
.stat-grid {
  display: grid; gap: 1rem; margin-bottom: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.stat {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1rem 1.1rem;
}
.stat .stat-label {
  font: 600 .72rem/1 var(--sans); color: var(--muted); letter-spacing: .04em;
  text-transform: uppercase; margin-bottom: .55rem; display: block;
}
.stat .stat-value { font: 600 1.5rem/1.1 var(--sans); color: var(--text); }
.stat .stat-value.lime { color: var(--lime); }
.stat .stat-sub { font: .8rem/1 var(--sans); color: var(--muted); margin-top: .35rem; }

/* ── Pricing table ──────────────────────────────────────── */
.pricing-table th { font-size: .72rem; }
.pricing-table td { font-size: .88rem; }
.pricing-table .model-id { font-family: var(--mono); color: var(--text); font-size: .82rem; }
.pricing-table .save { color: var(--lime); font-weight: 600; }

/* ── Dashboard key rows ─────────────────────────────────── */
.key-row-grid {
  display: grid; grid-template-columns: 1.2fr 2fr 1fr auto;
  gap: 1rem; align-items: center;
}
.key-actions { display: flex; gap: 6px; }
.usage-bar {
  height: 8px; background: var(--border,#2a2a2a); border-radius: 4px; margin-top: .35rem; overflow: hidden; min-width: 40px;
}
.usage-bar > div { height: 100%; background: var(--blue,#3b82f6); transition: width .2s; }

/* ── Code block ─────────────────────────────────────────── */
.code-block {
  background: #080808; border: 1px solid var(--border); border-radius: var(--radius);
  padding: .9rem 1rem; overflow-x: auto;
}
.code-block pre {
  font: .84rem/1.55 var(--mono); color: var(--text); white-space: pre;
}
.code-block .c-key { color: var(--lime); }
.code-block .c-str { color: #9ca3af; }
.code-block .c-com { color: var(--muted-2); }

/* ── Hero ───────────────────────────────────────────────── */
.hero { padding: 4rem 0 2.5rem; }
.hero h1 { font-size: 2.4rem; margin-bottom: 1rem; line-height: 1.15; }
.hero .lead { font-size: 1.1rem; color: var(--muted); max-width: 600px; margin-bottom: 1.8rem; }
.hero .cta { display: flex; gap: .7rem; flex-wrap: wrap; }

/* ── Feature grid ───────────────────────────────────────── */
.feat-grid {
  display: grid; gap: 1rem; margin-top: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.feat { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.2rem 1.3rem; }
.feat h3 { margin-bottom: .4rem; }
.feat p { color: var(--muted); font-size: .92rem; margin: 0; }

/* ── Auth wrap (login/register) ─────────────────────────── */
.auth-wrap { max-width: 440px; margin: 3.5rem auto; padding: 0 24px; }
.auth-head { text-align: center; margin-bottom: 1.5rem; }
.auth-head h1 { margin: .4rem 0 .35rem; }
.auth-head .eyebrow { font: 600 .72rem/1 var(--mono); color: var(--lime); letter-spacing: .14em; }
.eyebrow { font: 600 .72rem/1 var(--mono); color: var(--lime); letter-spacing: .14em; text-transform: uppercase; }

/* ── Admin table rows ──────────────────────────────────── */
.admin-keys input, .admin-keys select { height: 30px; font-size: .82rem; padding: 0 8px; }
.inline-form { display: inline; }
.inline-form .btn { height: 28px; padding: 0 9px; font-size: .78rem; }
.tiny-input { height: 28px !important; font-size: .82rem !important; padding: 0 7px !important; }

/* ── Note / tip ─────────────────────────────────────────── */
.note {
  font-size: .82rem; color: var(--muted); border-left: 2px solid var(--border-2);
  padding-left: .9rem; margin: .9rem 0;
}

/* ── Hero table  / model pill ───────────────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 .74rem/1 var(--mono); padding: 4px 9px;
  background: var(--surface-dk); border: 1px solid var(--border); border-radius: 4px; color: var(--muted);
}
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); }
.pill.dim .dot { background: var(--muted-2); }

/* ── Usage tracker ──────────────────────────────────────── */
.usage-input-grid {
  display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-bottom: 1.5rem;
}

/* ── Misc ───────────────────────────────────────────────── */
.center { text-align: center; }
.hide { display: none; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: .5rem; }
.mb-2 { margin-bottom: 1rem; }
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.fs-sm { font-size: .82rem; }
.fs-xs { font-size: .74rem; }
.fw-600 { font-weight: 600; }
.upper { text-transform: uppercase; letter-spacing: .04em; }
.lime { color: var(--lime); }
.red { color: var(--red); }
nowrap { white-space: nowrap; }
.turnstile-wrap > div { min-height: 65px; }

@media (max-width: 720px) {
  .nav-links { gap: 14px; }
  .nav-links a { font-size: .82rem; }
  .hero h1 { font-size: 1.85rem; }
  .hero { padding: 2.5rem 0 1.5rem; }
  .key-row-grid { grid-template-columns: 1fr; gap: .4rem; }
  .key-actions { margin-top: .4rem; }
  .form-grid { grid-template-columns: 1fr; }
  main.shell { padding-top: 1.2rem; }
}


/* Release operations-console layer: restrained surfaces, no decorative gradients. */

.ops-page{padding-top:24px}.ops-header{display:grid;grid-template-columns:minmax(0,1fr) 180px 220px;gap:12px;align-items:stretch;margin-bottom:16px}.ops-header>div{border:1px solid var(--line);background:var(--panel);padding:16px;border-radius:6px}.ops-header>div:first-child{background:transparent;border:0;padding-left:0}.ops-kpi{display:flex;flex-direction:column;justify-content:center}.ops-kpi b{font:700 1.6rem var(--mono);color:var(--lime)}.ops-kpi span{color:var(--muted);font-size:.75rem;text-transform:uppercase;letter-spacing:.06em}.section-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:14px}.table-card{padding:0}.table-card .section-head{padding:16px 18px 0}.table-scroll{overflow-x:auto}table{min-width:820px}.rate-cell del{display:block;color:#71717a;font-size:.75rem}.rate-cell strong{color:var(--lime);font-family:var(--mono)}.ops-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}.ops-grid-3>div{background:var(--card);padding:14px}.voucher-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,.7fr);gap:20px;align-items:center}.voucher-form{margin:0}.pack-rate{font:600 .78rem var(--mono);color:var(--lime);margin-top:6px}.pager{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:10px 12px;border-top:1px solid var(--line);font:600 .72rem var(--mono);color:var(--muted)}.pager button{background:var(--btn-dk);color:var(--text);border:1px solid var(--line2);border-radius:4px;padding:5px 10px;cursor:pointer}.pager button:disabled{opacity:.35;cursor:not-allowed}.metric-row{display:grid;grid-template-columns:minmax(80px,1fr) 2fr 50px;gap:8px;align-items:center;font:10px var(--mono)}.metric-row i{height:8px;background:#20242a}.metric-row b{display:block;height:100%;background:var(--lime)}.metric-row em{text-align:right;color:var(--muted);font-style:normal}.recent-row{display:grid;grid-template-columns:1fr auto auto;gap:10px;padding:10px 12px;border-top:1px solid var(--border);font:600 .72rem var(--mono);color:var(--muted)}
@media(max-width:900px){.ops-header{grid-template-columns:1fr 1fr}.ops-header>div:first-child{grid-column:1/-1}.voucher-card{grid-template-columns:1fr}.admin-tabs{position:static}.ops-grid-3{grid-template-columns:1fr}}
@media(max-width:600px){.ops-header{grid-template-columns:1fr}.ops-header>div:first-child{grid-column:auto}.voucher-form{flex-direction:column}.voucher-form .btn{width:100%}.card{padding:1rem}.stat-grid{grid-template-columns:1fr 1fr}.admin-tabs{overflow-x:auto;flex-wrap:nowrap}.admin-tab{flex:0 0 auto}}

/* Approved pricing comparison, pagination and admin chart refinements */
.pricing-table{min-width:880px}.pricing-table thead{background:var(--thead)}.pricing-table td,.pricing-table th{padding:.72rem .8rem}.landing-compare .card{overflow:hidden}.landing-compare .pricing-table{min-width:720px}
.pager{justify-content:center;position:relative;min-height:54px;background:var(--thead)}.pager-pages{display:flex;gap:5px}.pager button{min-width:32px;height:32px;padding:0 9px;border-radius:6px;transition:border-color .15s,background .15s,color .15s}.pager button:hover:not(:disabled){border-color:var(--lime);color:var(--lime)}.pager .page-number.active{background:var(--lime);border-color:var(--lime);color:#090b0d}.pager-count{position:absolute;right:14px;font-weight:500}.model-dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;vertical-align:1px}
@media(max-width:720px){.landing-compare .row-between{align-items:flex-start}.landing-compare .btn{width:100%}.pager{justify-content:flex-start;overflow-x:auto;padding-right:12px}.pager-count{position:static;margin-left:auto;white-space:nowrap}.pager-pages{display:flex}.pricing-table{min-width:760px}}

.official-price{color:var(--price-off);text-decoration:line-through;text-decoration-thickness:1px;text-decoration-color:#656d78}.clario-price{color:var(--price-cl);font-weight:700}

.pager-compact{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 14px;border-top:1px solid var(--border);background:var(--thead)}.pager-controls,.pager-pages{display:flex;align-items:center;gap:5px}.pager-compact button{width:32px;height:32px;padding:0;border:1px solid var(--seg-bd);border-radius:7px;background:#171a1f;color:#aeb5bf;font:600 12px var(--mono);cursor:pointer}.pager-compact button:hover:not(:disabled){border-color:#59616d;color:#f4f4f5;background:#1d2127}.pager-compact button.active{background:var(--price-cl);border-color:var(--price-cl);color:#11150d}.pager-compact button:disabled{opacity:.28;cursor:default}.pager-count{font:500 11px var(--mono);color:#717986}@media(max-width:640px){.pager-compact{flex-direction:column;align-items:stretch}.pager-controls{justify-content:space-between}.pager-pages{overflow-x:auto}.pager-count{text-align:center}}

.landing-official{display:block;color:var(--subtle);text-decoration:line-through;text-decoration-thickness:1.5px;text-decoration-color:var(--subtle-2);font-size:.72rem;line-height:1.1}.landing-clario{display:block;color:var(--price-cl);font-weight:750;font-size:.92rem;margin-top:3px}.pricing-table .official-price{color:var(--subtle);text-decoration-color:var(--subtle-2)}.pricing-table .clario-price{color:var(--price-cl)}

/* Precision release: desktop-first tables, compact switches, mobile safety */
.models-table{width:100%;table-layout:fixed;border-collapse:collapse}.models-table th,.models-table td{vertical-align:middle}.models-table th:nth-child(1){width:32%}.models-table th:nth-child(2){width:22%}.models-table th:nth-child(3),.models-table th:nth-child(4){width:17%;text-align:right}.models-table th:nth-child(5){width:12%;text-align:center}.models-table td:nth-child(3),.models-table td:nth-child(4){text-align:right;font-variant-numeric:tabular-nums}.models-table td:nth-child(5){text-align:center}.landing-official{white-space:nowrap}.landing-clario{white-space:nowrap}.model-price-pair{display:inline-grid;grid-template-columns:1fr;justify-items:end;min-width:72px}.model-id-cell{overflow-wrap:anywhere}.admin-raw-usage{display:block;color:#747d89;font-size:9px;margin-top:3px;white-space:nowrap}.switch-control{display:inline-flex;align-items:center;gap:8px;min-height:28px;cursor:pointer;user-select:none}.switch-control input{position:absolute;opacity:0;pointer-events:none}.switch-track{display:inline-flex;width:36px;height:20px;padding:2px;border-radius:999px;background:var(--sw-tr);border:1px solid var(--sw-trbd);transition:.18s}.switch-track span{width:14px;height:14px;border-radius:50%;background:var(--sw-knob2);transition:.18s}.switch-control input:checked+.switch-track{background:#b8db70;border-color:#c9eb84}.switch-control input:checked+.switch-track span{transform:translateX(16px);background:#10150a}.switch-control b{font:650 10px var(--mono);color:#aeb6c0;letter-spacing:.04em}.switch-sm{gap:5px}.switch-sm .switch-track{width:30px;height:17px}.switch-sm .switch-track span{width:11px;height:11px}.switch-sm input:checked+.switch-track span{transform:translateX(13px)}
.table-wrap{max-width:100%;overflow-x:auto!important;-webkit-overflow-scrolling:touch}table{font-variant-numeric:tabular-nums}.shell{width:min(100% - 48px,1440px);max-width:none}.form-grid{align-items:end}
@media(max-width:900px){.shell{width:min(100% - 30px,1440px)}.stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.models-table{min-width:790px}.admin-panel table{min-width:980px}.hero{grid-template-columns:1fr!important}.hero-right{min-height:360px}.nav{overflow-x:auto;white-space:nowrap}.form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.shell{width:min(100% - 22px,1440px)}.stat-grid,.form-grid,.grid-2,.grid-3{grid-template-columns:1fr!important}.models-table{min-width:720px}.hero-right{min-height:300px}.card{border-radius:8px}.table-wrap{margin-inline:0}.pager-compact{gap:8px}.pager-pages{max-width:190px}.copy-row{min-width:240px}.topbar .shell{gap:10px;align-items:flex-start}.nav{max-width:100%}}

.card[style*="overflow:hidden"]{overflow-x:auto!important}.card>table{min-width:760px}.admin-panel .card>table{min-width:1040px}@media(max-width:600px){.card>table{min-width:700px}.admin-panel .card>table{min-width:960px}}

/* Final collision-proof price pairs and native-checkbox-proof switches */
.models-table .model-price-pair{display:inline-grid!important;grid-template-columns:minmax(52px,auto) 10px minmax(52px,auto)!important;align-items:center;justify-content:end;column-gap:7px;min-width:132px;white-space:nowrap}.models-table .landing-official,.models-table .landing-clario{display:inline!important;margin:0!important;line-height:1.2!important}.models-table .price-separator{display:inline-block;color:#68717d;text-align:center;font:500 11px var(--mono)}
.switch-control>input[type="checkbox"]{position:absolute!important;opacity:0!important;width:1px!important;height:1px!important;min-width:0!important;margin:0!important;padding:0!important;border:0!important;appearance:none!important;-webkit-appearance:none!important;pointer-events:none!important}.switch-control>.switch-track{display:inline-flex!important;flex:none!important;width:36px!important;height:20px!important;min-width:36px!important;padding:2px!important;border-radius:999px!important}.switch-control.switch-sm>.switch-track{width:30px!important;height:17px!important;min-width:30px!important}.switch-control>.switch-track>span{display:block!important}

/* Explicit price labels and checkbox-free segmented multiplier toggle */
.model-price-compare{display:inline-flex;flex-direction:column;align-items:stretch;gap:4px;min-width:118px}.price-line{display:grid;grid-template-columns:48px 1fr;align-items:center;gap:9px;white-space:nowrap}.price-line small{font:600 9px var(--mono);text-transform:uppercase;letter-spacing:.05em;text-align:left}.official-line small,.official-line del{color:var(--subtle)}.official-line del{text-decoration-thickness:1.4px;text-decoration-color:#656e79;font:500 11px var(--mono);text-align:right}.clario-line small{color:#93a06d}.clario-line strong{color:var(--price-cl);font:750 13px var(--mono);text-align:right}.multiplier-toggle{display:inline-grid;grid-template-columns:1fr 1fr;width:112px;padding:3px;background:var(--seg-bg);border:1px solid var(--seg-bd);border-radius:8px;gap:3px}.multiplier-toggle button{appearance:none!important;-webkit-appearance:none!important;border:0!important;border-radius:5px!important;background:transparent!important;color:var(--seg-tx)!important;min-width:0!important;height:26px!important;padding:0 10px!important;font:700 10px var(--mono)!important;cursor:pointer}.multiplier-toggle button.active{background:var(--seg-on)!important;color:var(--currency-active-text,#10150a)!important;box-shadow:0 0 0 1px rgba(201,233,128,.15)}.multiplier-toggle-sm{width:84px;padding:2px}.multiplier-toggle-sm button{height:22px!important;padding:0 6px!important;font-size:9px!important}

/* Seven-column landing model matrix: prices can never concatenate */
.models-table{table-layout:fixed!important;min-width:1200px!important}.models-table th:nth-child(n){width:auto!important}.models-table .models-head-main th:nth-child(1){width:19%!important}.models-table .models-head-main th:nth-child(2){width:12%!important}.models-table .models-head-main th.price-group{width:20%!important;text-align:center!important}.models-table .models-head-main th:nth-child(5){width:10%!important}.models-table .models-head-main th:nth-child(6){width:9.5%!important}.models-table .models-head-main th:nth-child(7){width:9.5%!important;text-align:center!important}.models-head-main th{padding-bottom:7px!important}.models-head-sub th{padding-top:6px!important;padding-bottom:8px!important;font-size:9px!important;color:var(--subtle)!important;text-transform:uppercase;letter-spacing:.06em;border-top:1px solid #252b33}.models-head-sub .clario-head{color:#adc978!important}.models-table td.official-cell,.models-table td.clario-cell{padding-left:16px!important;padding-right:16px!important;text-align:right!important;white-space:nowrap;font-family:var(--mono);font-variant-numeric:tabular-nums}.models-table td.official-cell{color:var(--subtle)!important}.models-table td.official-cell del{text-decoration-thickness:1.4px;text-decoration-color:var(--subtle-2)}.models-table td.clario-cell .clario-price,.models-table td.clario-cell{color:var(--price-cl)!important;font-weight:750}.models-table td.num.save{white-space:nowrap}.models-table .save-pill{display:inline-block;padding:2px 10px;border-radius:999px;background:var(--lime-bg);border:1px solid var(--lime-dim);color:var(--lime);font:700 .75rem var(--mono);white-space:nowrap}[data-theme="light"] .models-table .save-pill{background:#eef3e4;border-color:#b6c99a;color:#3f6212}.models-table tbody td:nth-child(7){text-align:center!important}

/* Single precision pill switch — no checkbox, no segmented buttons */
.multiplier-switch{display:inline-flex;align-items:center;gap:8px;width:max-content;min-height:28px;cursor:pointer;user-select:none;outline:none}.multiplier-switch input{display:none!important}.multiplier-switch-track{display:block;position:relative;width:42px;height:22px;flex:0 0 42px;border-radius:999px;background:var(--sw-off);border:1px solid var(--sw-bd);box-shadow:inset 0 1px 2px rgba(0,0,0,.32);transition:background .18s,border-color .18s}.multiplier-switch-track i{display:block;position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:var(--sw-knob);box-shadow:0 1px 3px rgba(0,0,0,.45);transition:transform .18s,background .18s}.multiplier-switch b{min-width:22px;font:700 10px var(--mono);color:var(--sw-lb);letter-spacing:.05em}.multiplier-switch.is-on .multiplier-switch-track{background:#badb72;border-color:#c9e983}.multiplier-switch.is-on .multiplier-switch-track i{transform:translateX(20px);background:var(--seg-ontx)}.multiplier-switch.is-on b{color:#cbe88a}.multiplier-switch:focus-visible .multiplier-switch-track{outline:2px solid #88a455;outline-offset:2px}.multiplier-switch-sm{gap:5px;min-height:23px}.multiplier-switch-sm .multiplier-switch-track{width:36px;height:19px;flex-basis:36px}.multiplier-switch-sm .multiplier-switch-track i{width:13px;height:13px}.multiplier-switch-sm.is-on .multiplier-switch-track i{transform:translateX(17px)}.multiplier-switch-sm b{font-size:9px;min-width:18px}



} /* close pre-existing unbalanced legacy rule before responsive layer */
/* cc-responsive-v102: dashboard/admin fluid desktop-first, mobile-safe */
:root{--content-max:1440px;--surface-2:var(--thead);--blue:#3b82f6;--yellow:#f59e0b}
.dashboard-page,.admin-page{min-width:0;background:radial-gradient(ellipse 80% 45% at 50% 0%,rgba(163,230,53,.055),transparent 70%),var(--bg)}
.dashboard-page .shell,.admin-page .shell{width:min(calc(100% - 40px),var(--content-max));margin-inline:auto;padding-inline:0}
.dashboard-page main.shell,.admin-page main.shell{width:min(calc(100% - 40px),var(--content-max))!important;padding:24px 0 56px!important}
.dashboard-masthead,.admin-masthead{padding:18px 0;border-bottom:1px solid var(--border)}
.dashboard-stat-grid{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;margin-bottom:0}.dashboard-stat-grid .stat{min-width:0;padding:14px 15px}
.registry-toolbar{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;margin-bottom:12px}.registry-toolbar h2{margin:2px 0}.registry-tools{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}.registry-tools>input{width:min(320px,42vw);height:36px}
.view-toggle{display:flex;padding:3px;border:1px solid var(--border-2);border-radius:8px;background:var(--btn-dk)}.view-toggle button{border:0;border-radius:5px;background:transparent;color:var(--muted);height:28px;padding:0 11px;font:700 10px var(--mono);cursor:pointer}.view-toggle button.active{background:var(--lime);color:#0a0a0a}
.dashboard-key-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.dashboard-key-card{min-width:0;padding:14px;background:var(--card);border:1px solid var(--border);border-radius:9px;display:grid;gap:11px}.dashboard-key-card>header{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}.dashboard-key-card h3{margin:2px 0;font-size:14px;overflow:hidden;text-overflow:ellipsis}.key-id{font:700 9px var(--mono);color:var(--lime)}.key-secret{display:flex;gap:6px;min-width:0}.key-secret input{min-width:0;flex:1;height:34px;font-size:11px}.key-copy,.key-edit-btn{border:1px solid var(--border-2);border-radius:6px;background:#181a1e;color:var(--text);padding:0 10px;font:700 10px var(--mono);cursor:pointer}.key-consumption{display:flex;justify-content:space-between;gap:8px;align-items:end}.key-consumption div{display:grid;gap:2px}.key-consumption span,.key-meta{color:var(--muted);font-size:10px}.key-consumption b,.key-consumption strong{font:650 10px var(--mono)}.key-meta{display:flex;justify-content:space-between;gap:8px}.key-card-actions{display:flex;align-items:center;justify-content:flex-end;gap:7px;padding-top:3px;border-top:1px solid var(--border)}.key-card-actions form{margin:0}.dashboard-key-grid.list-view{grid-template-columns:1fr}.dashboard-key-grid.list-view .dashboard-key-card{grid-template-columns:minmax(150px,1fr) minmax(220px,1.4fr) minmax(200px,1fr) auto;align-items:center;gap:8px 14px}.dashboard-key-grid.list-view .dashboard-key-card .key-consumption{margin:0}.dashboard-key-grid.list-view .key-card-actions{border:0;padding:0}
.dashboard-secondary-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:18px}.dashboard-secondary-grid>section:first-child{grid-column:1/-1}.dashboard-secondary-grid>section{margin:0!important;min-width:0}.dashboard-secondary-grid .card{height:100%;min-width:0}.dashboard-secondary-grid .code-block{height:100%;max-height:320px;overflow:auto}.recent-requests .card{overflow-x:auto!important}.recent-requests table{min-width:760px}.recent-main{cursor:pointer}.recent-main:hover,.recent-main:focus{background:rgba(132,204,22,.06);outline:none}.recent-main td:first-child:before{content:'›';display:inline-block;margin-right:7px;color:var(--muted);transition:transform .15s}.recent-main[aria-expanded="true"] td:first-child:before{transform:rotate(90deg)}.recent-detail td{padding:10px 16px!important;background:rgba(255,255,255,.025);border-top:0!important}.recent-detail td span{display:inline-block;margin:2px 22px 2px 0}.recent-detail strong{color:var(--muted);font-weight:600;margin-right:5px}
.key-create-overlay,.confirm-overlay{position:fixed;inset:0;z-index:9999;display:none;place-items:center;padding:16px;background:rgba(0,0,0,.78);backdrop-filter:blur(5px)}.key-create-overlay.open,.confirm-overlay.open{display:grid;animation:modalFade .16s ease}.key-create-modal,.confirm-card{width:min(440px,100%);padding:18px;background:var(--panel);border:1px solid var(--border-2);border-radius:12px;box-shadow:0 24px 80px #000}.modal-head{display:flex;justify-content:space-between;gap:12px;margin-bottom:14px}.modal-head button{border:0;background:transparent;color:var(--muted);font-size:24px;cursor:pointer}.modal-actions,.confirm-card>div{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}.confirm-card button{height:34px;padding:0 14px;border:1px solid var(--border-2);border-radius:6px;background:var(--input-dk);color:var(--text);cursor:pointer}.confirm-card button.danger{border-color:var(--red);color:var(--red)}@keyframes modalFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.ui-toggle-switch{position:relative;display:inline-flex!important;width:40px;height:22px;margin:0;cursor:pointer;vertical-align:middle}.ui-toggle-switch>input[type=checkbox]{position:absolute!important;opacity:0!important;width:0!important;height:0!important;pointer-events:none!important}.ui-toggle-slider{position:absolute;inset:0;border-radius:999px;background:var(--sw-off);border:1px solid var(--sw-bd);transition:.18s}.ui-toggle-slider:before{content:'';position:absolute;width:16px;height:16px;left:2px;top:2px;border-radius:50%;background:var(--sw-knob);box-shadow:0 1px 3px #0008;transition:.18s}.ui-toggle-switch>input:checked+.ui-toggle-slider{background:var(--lime);border-color:var(--lime)}.ui-toggle-switch>input:checked+.ui-toggle-slider:before{transform:translateX(18px);background:#0a0a0a}.ui-toggle-small{width:34px;height:19px}.ui-toggle-small .ui-toggle-slider:before{width:13px;height:13px}.ui-toggle-small>input:checked+.ui-toggle-slider:before{transform:translateX(15px)}
.admin-page .admin-tabs{position:sticky;top:52px;z-index:20;flex-wrap:nowrap;overflow-x:auto;background:rgba(10,10,10,.96);backdrop-filter:blur(8px)}.admin-page .admin-panel{width:100%;min-width:0}.admin-kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:8px;margin-bottom:8px}.admin-finance-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:8px}.admin-chart-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,.75fr);gap:8px;margin-bottom:8px}.admin-report-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:8px}.admin-kpi-grid>div,.admin-finance-grid>div,.admin-chart-grid>div,.admin-report-grid>div{min-width:0}.admin-page .card{min-width:0}.admin-page .form-grid{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px}.admin-page .key-item{grid-template-columns:minmax(150px,.8fr) minmax(220px,1.2fr) minmax(220px,1fr) auto}.edit-switches>label{display:flex!important;align-items:center;justify-content:space-between;gap:12px;padding:10px;border:1px solid var(--border);border-radius:8px;background:#141619}.model-option input[type=checkbox]{position:absolute!important;opacity:0!important;width:0!important;height:0!important}.model-option{grid-template-columns:38px minmax(0,1fr)!important}
@media(max-width:980px){.dashboard-page .shell,.admin-page .shell,.dashboard-page main.shell,.admin-page main.shell{width:min(calc(100% - 28px),var(--content-max))!important}.dashboard-secondary-grid,.admin-chart-grid,.admin-report-grid{grid-template-columns:1fr}.admin-finance-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.admin-page .key-item{grid-template-columns:minmax(150px,.8fr) minmax(220px,1.2fr) auto}.admin-page .key-metrics{grid-column:1/-1;order:5}.dashboard-key-grid.list-view .dashboard-key-card{grid-template-columns:minmax(140px,1fr) minmax(210px,1.5fr) auto}.dashboard-key-grid.list-view .key-meta{display:none}}
@media(max-width:640px){.dashboard-page .shell,.admin-page .shell,.dashboard-page main.shell,.admin-page main.shell{width:min(calc(100% - 22px),var(--content-max))!important}.nav-inner{height:auto;min-height:52px;padding:8px 0}.registry-toolbar{align-items:stretch;flex-direction:column}.registry-tools{justify-content:stretch}.registry-tools>input{width:100%}.registry-tools .view-toggle{flex:1}.registry-tools .view-toggle button{flex:1}.registry-tools>.btn{width:100%}.dashboard-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-key-grid.list-view .dashboard-key-card{display:grid;grid-template-columns:1fr}.dashboard-key-grid.list-view .dashboard-key-card .key-consumption,.dashboard-key-grid.list-view .dashboard-key-card .usage-bar,.dashboard-key-grid.list-view .key-meta{display:flex}.key-card-actions{justify-content:space-between}.dashboard-secondary-grid{grid-template-columns:1fr}.voucher-card{display:block}.voucher-form{display:grid;margin-top:12px}.recent-requests{margin-inline:0}.admin-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-finance-grid{grid-template-columns:1fr}.admin-page .admin-tabs{top:68px;margin-top:14px}.admin-page .key-item{grid-template-columns:1fr;padding:12px}.admin-page .key-secret,.admin-page .key-actions{width:100%}.admin-page .key-actions{justify-content:space-between}.model-option-list{grid-template-columns:1fr!important}.delivery-launch{align-items:stretch;flex-direction:column}.delivery-launch .btn{width:100%}.key-registry-head{align-items:stretch;flex-direction:column}.key-search-wrap{width:100%}.edit-grid{grid-template-columns:1fr!important}}
@media(max-width:390px){.dashboard-stat-grid,.admin-kpi-grid{grid-template-columns:1fr}.key-card-actions{flex-wrap:wrap}.key-card-actions form:first-child{margin-right:auto}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* cc-responsive-v103 compact flow corrections */
.dashboard-key-card{align-content:start!important;grid-auto-rows:max-content!important}
.dashboard-key-card .key-card-actions{margin:0!important;padding:9px 0 0!important;min-height:31px!important;border-top:1px solid var(--border)!important}
.key-pager{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:16px!important;margin:14px 0 4px!important;padding:10px 12px!important;border:1px solid var(--border)!important;border-radius:8px!important;background:var(--card)!important;flex-wrap:wrap!important}
.key-pager>span{display:flex!important;align-items:center!important;gap:10px!important;flex-wrap:wrap!important;max-width:100%!important;min-width:0!important}
.key-pager button{height:30px!important;padding:0 11px!important;border:1px solid var(--border-2)!important;border-radius:6px!important;background:var(--input-dk)!important;color:var(--text)!important;font:650 10px var(--mono)!important;cursor:pointer!important}
.key-pager button:disabled{opacity:.35!important;cursor:default!important}
.dashboard-secondary-grid{display:grid!important;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)!important;align-items:start!important;grid-auto-flow:row!important}
.dashboard-secondary-grid>section{position:static!important;min-width:0!important;height:auto!important;margin:0 0 12px!important;align-self:start!important}
.dashboard-secondary-grid .card,.dashboard-secondary-grid .code-block{position:static!important;height:auto!important;max-height:300px!important;overflow:auto!important}
@media(max-width:800px){.dashboard-secondary-grid{grid-template-columns:1fr!important}.key-pager{align-items:stretch!important;flex-direction:column!important}.key-pager>span{justify-content:space-between!important}}
[hidden]{display:none!important}
.admin-report-grid table{min-width:0!important;width:100%!important;table-layout:auto!important;font-size:10px!important}
.admin-report-grid th,.admin-report-grid td{padding:5px 6px!important;white-space:normal!important;overflow-wrap:anywhere!important}
.admin-report-grid>div{overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}
.admin-page .muted,.admin-page .admin-kpi-grid small,.admin-page .admin-finance-grid small{color:#8f98a5!important}
.admin-page main.shell{min-height:auto!important}

/* cc-full-desktop-v106: 1600px global canvas + Ops grids */
:root{--content-max:1600px!important;--maxw:1600px!important}
.shell{width:min(calc(100% - 48px),1600px)!important;max-width:1600px!important;margin-inline:auto!important;padding-inline:0!important}
main.shell{width:min(calc(100% - 48px),1600px)!important;max-width:1600px!important;margin-inline:auto!important}
.nav-inner{width:min(calc(100% - 48px),1600px)!important;max-width:1600px!important;margin-inline:auto!important}
footer .shell{width:min(calc(100% - 48px),1600px)!important;max-width:1600px!important;margin-inline:auto!important}
.dashboard-page .shell{width:min(calc(100% - 48px),1600px)!important;max-width:1600px!important}
.admin-page .shell{width:min(calc(100% - 48px),1600px)!important;max-width:1600px!important}
.dashboard-page main.shell{width:min(calc(100% - 48px),1600px)!important;max-width:1600px!important}
.admin-page main.shell{width:min(calc(100% - 48px),1600px)!important;max-width:1600px!important}
.key-registry-controls{display:flex;align-items:flex-start;justify-content:flex-end;gap:10px;flex:1}.key-registry-controls .key-search-wrap{width:min(520px,100%)}
.key-registry{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(340px,1fr))!important;gap:12px!important}
.key-registry .key-item{display:grid!important;grid-template-columns:1fr!important;align-content:start!important;gap:11px!important;min-width:0!important;padding:14px!important;border-radius:9px!important}
.key-registry .key-secret,.key-registry .key-actions{width:100%!important}.key-registry .key-actions{justify-content:space-between!important}.key-registry.list-view{grid-template-columns:1fr!important}.key-registry.list-view .key-item{grid-template-columns:minmax(180px,.8fr) minmax(250px,1.3fr) minmax(260px,1fr) auto!important;align-items:center!important}.key-registry.list-view .key-actions{width:auto!important;justify-content:flex-end!important}
.admin-view-tools{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:10px 12px;border-bottom:1px solid var(--border);color:var(--muted);font:650 10px var(--mono)}.admin-view-tools>b{font-weight:600}.admin-card-table{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(340px,1fr))!important;gap:12px!important;padding:12px!important;min-width:0!important}.admin-card-table thead{display:none!important}.admin-card-table tbody{display:contents!important}.admin-card-table tr{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;align-content:start!important;gap:8px 12px!important;padding:14px!important;border:1px solid var(--border)!important;border-radius:9px!important;background:var(--card)!important;min-width:0!important}.admin-card-table td{display:grid!important;grid-template-columns:minmax(76px,.65fr) minmax(0,1.35fr)!important;gap:8px!important;padding:0!important;border:0!important;text-align:left!important;min-width:0!important;overflow-wrap:anywhere!important}.admin-card-table td:before{content:attr(data-label);color:var(--muted);font:650 9px var(--mono);text-transform:uppercase;letter-spacing:.04em}.admin-card-table td.key-actions{display:flex!important;grid-column:1/-1!important;justify-content:flex-end!important;padding-top:8px!important;border-top:1px solid var(--border)!important}.admin-numbered-pager .pager-count{position:static!important}.admin-numbered-pager .pager-controls{margin-left:auto!important}
@media(max-width:900px){.shell,main.shell,.nav-inner,footer .shell,.dashboard-page .shell,.admin-page .shell,.dashboard-page main.shell,.admin-page main.shell{width:min(calc(100% - 30px),1600px)!important}.key-registry.list-view .key-item{grid-template-columns:1fr!important}.key-registry-head,.key-registry-controls{align-items:stretch!important;flex-direction:column!important}.key-registry-controls .key-search-wrap{width:100%!important}}
@media(max-width:600px){.shell,main.shell,.nav-inner,footer .shell,.dashboard-page .shell,.admin-page .shell,.dashboard-page main.shell,.admin-page main.shell{width:min(calc(100% - 22px),1600px)!important}.key-registry,.admin-card-table{grid-template-columns:1fr!important}.admin-card-table tr{grid-template-columns:1fr!important}.admin-card-table td{grid-template-columns:minmax(72px,.55fr) minmax(0,1.45fr)!important}.admin-view-tools{justify-content:space-between!important}.admin-numbered-pager .pager-controls{margin-left:0!important}}
/* cc-card-precision-v112: lock every key-card row to its own line so cards stay identical */
.dashboard-key-card>header{min-height:38px}
.dashboard-key-card>header>div{min-width:0;flex:1}
.dashboard-key-card .key-tags{flex-shrink:0;align-self:flex-start}
.dashboard-key-card .key-secret{grid-row:auto}
.dashboard-key-card .key-consumption{grid-row:auto}
.dashboard-key-card .usage-bar{grid-row:auto;height:6px}
.dashboard-key-card .key-meta{grid-row:auto}
.dashboard-key-card .key-card-actions{grid-row:auto}
.dashboard-key-card .key-secret{display:flex;gap:8px;min-width:0}.dashboard-key-card{grid-template-columns:minmax(0,1fr)}.dashboard-key-card input.mono{flex:1 1 0%;min-width:0;width:0}.dashboard-key-card .key-copy{flex-shrink:0}

/* cc-theme-paygo-v115: light/dark toggle via [data-theme]. Dark = default (existing vars). */
[data-theme="light"] {
  --bg:        #f4f4f2;
  --card:      #ffffff;
  --card-hov:  #f0f0ec;
  --border:    #e2e2dc;
  --border-2:  #cfcfc6;
  --text:      #161616;
  --muted:     #6b6b66;
  --muted-2:   #a3a39c;
  --lime:      #4d7c0f;
  --lime-dim:  #3f6212;
  --lime-bg:   rgba(77, 124, 15, 0.08);
  --red:       #dc2626;
  --red-bg:    rgba(220, 38, 38, 0.07);
  --amber:     #b45309;
  --panel:     #ffffff;
  --line:      #e2e2dc;
  --line2:     #cfcfc6;
  --thead:     #f0f0ec;
  --price-off: #667085;
  --price-cl:  #4d7c0f;
  --seg-bg:    #eef0ea;
  --seg-bd:    #cfcfc6;
  --seg-tx:    #3f6212;
  --seg-on:    #4d7c0f;
  --seg-ontx:  #ffffff;
  --sw-off:    #d4d4cf;
  --sw-bd:     #b9b9b0;
  --sw-knob:   #ffffff;
  --sw-tr:     #d4d4cf;
  --sw-trbd:   #b9b9b0;
  --sw-knob2:  #ffffff;
  --sw-lb:     #5b615b;
  --subtle:    #5b615b;
  --subtle-2:  #667085;
  --btn-dk:    #ffffff;
  --surface-dk:#ffffff;
  --input-dk:  #f0f0ec;
}
[data-theme="light"] input,[data-theme="light"] textarea,[data-theme="light"] select{background:var(--input-dk);color:var(--text);border-color:var(--border-2)}
[data-theme="light"] .btn-secondary,[data-theme="light"] .card,[data-theme="light"] .stat,[data-theme="light"] .terminal-card{color:var(--text)}
[data-theme="light"] .badge-thinking{color:#6d28d9;border-color:#8b5cf6;background:#f3e8ff}
[data-theme="light"] .cc-chip.cc-new{color:#3f6212;box-shadow:none}
.theme-toggle { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; min-height:36px; border:1px solid var(--border-2); border-radius:var(--radius); background:var(--card); color:var(--text); font:600 .8rem var(--sans); cursor:pointer; white-space:nowrap; }
.theme-toggle:hover { border-color:var(--lime-dim); }
.terminal-card{border:1px solid var(--border);border-radius:10px;background:var(--surface-dk);overflow:hidden}
.terminal-head{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid var(--border)}
.terminal-dots{display:inline-flex;gap:5px}
.terminal-dots i{width:9px;height:9px;border-radius:50%;background:var(--sw-bd)}
.terminal-dots i:first-child{background:#ef4444}
.terminal-tabs{display:flex;gap:2px;margin-right:auto}
.terminal-tabs button{border:0;background:transparent;color:var(--muted);font:700 10px var(--mono);padding:5px 10px;border-radius:6px;cursor:pointer}
.terminal-tabs button.active{background:var(--lime);color:var(--btn-dk)}
.terminal-body{margin:0;padding:14px;overflow-x:auto;font:12px/1.65 var(--mono);color:var(--text)}
.cmd-live{background:#020503!important;border-color:#0f2a1a!important}
.cmd-live .terminal-head{border-bottom-color:#0f2a1a!important}
.cmd-body{color:#35f27d!important;text-shadow:0 0 8px rgba(53,242,125,.3);white-space:pre;min-height:280px}
[data-theme="light"] .cmd-live{background:#071a2b!important;border-color:#164d78!important}
[data-theme="light"] .cmd-live .terminal-head{border-bottom-color:#164d78!important}
[data-theme="light"] .cmd-live .terminal-head .mono{color:#75c7ff!important}
[data-theme="light"] .cmd-live .terminal-head .muted{color:#77a8cf!important}
[data-theme="light"] .cmd-live .terminal-tabs button{color:#8bbbe0!important}
[data-theme="light"] .cmd-live .terminal-tabs button.active{background:#1687d9!important;color:#fff!important}
[data-theme="light"] .cmd-live .cmd-body{color:#60b8ff!important;text-shadow:0 0 8px rgba(70,160,255,.25)!important}
[data-theme="light"] .cmd-live .muted{color:#77a8cf!important}
.cmd-live .muted{color:#1e7a4c!important}
/* cx-nav-switch Oct07: button-based theme switch reusing switch-control track/knob */
button.switch-control { appearance:none; -webkit-appearance:none; border:0; padding:0; background:transparent; cursor:pointer; }
button.switch-control > .switch-track { display:inline-flex; }
button.switch-control[aria-checked="true"] > .switch-track { background:#b8db70; border-color:#c9eb84; }
button.switch-control[aria-checked="true"] > .switch-track > span { transform:translateX(16px); background:#10150a; }
button.switch-control.switch-sm[aria-checked="true"] > .switch-track > span { transform:translateX(13px); }
.cc-theme-switch{width:44px!important;min-width:44px!important;height:44px!important;min-height:44px!important;vertical-align:middle;align-items:center!important}
.cc-theme-switch .switch-track{width:44px!important;height:24px!important;min-width:44px!important}
.cc-theme-switch .switch-track span{width:18px!important;height:18px!important}
.cc-theme-switch .switch-track span::before{content:"☾";display:grid;place-items:center;width:100%;height:100%;border-radius:50%;color:#18202a;font:700 11px/1 var(--sans)}
.cc-theme-switch[aria-checked="false"] .switch-track{background:var(--sw-tr)!important;border-color:var(--sw-trbd)!important}
.cc-theme-switch[aria-checked="false"] .switch-track span::before{content:"☾";background:#a2aab5}
.cc-theme-switch[aria-checked="true"] .switch-track span::before{content:"☀";background:#fff3b0;color:#7c5200}
.cc-theme-switch[aria-checked="true"] .switch-track span{transform:translateX(20px)!important}
.cc-theme-switch:focus-visible{outline:2px solid #4c9ffe;outline-offset:3px}
@media (max-width:640px){ .theme-toggle { min-height:44px; } }

/* v121 precision: balanced features, readable themes, mobile-safe nav/table. */
.feat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.nav-scroll{display:contents}
.pricing-intro .cc-cur-seg{margin-left:.6rem}
.usage-key-picker{max-width:760px!important}.usage-key-picker select{min-height:42px}
[data-theme="light"]{--muted:#526071;--muted-2:#667085}
[data-theme="dark"]{--muted:#9aa6b2;--muted-2:#7f8b96}
[data-theme="light"] .orbit-center img,
[data-theme="light"] .orbit-core img,
[data-theme="light"] .provider-logo.is-monochrome img{filter:brightness(.18) saturate(.25)}
/* cc-ui-v124 Oct 08 (cx): (1) theme switch light ikut warna light (biru, bukan hijau),
   (2) brand mark putih -> terang di light, (3) token tint abu netral utk kartu/chip
   yang sebelumnya rgba putih (tak terlihat di light), (4) pending price light kontras. */
[data-theme="light"] button.switch-control[aria-checked="true"] > .switch-track,
[data-theme="light"] .switch-control input:checked + .switch-track{background:#2563eb!important;border-color:#1d4ed8!important}
[data-theme="light"] .brand-mark{filter:brightness(.18) saturate(.25)}
:root{--tint-bg:rgba(255,255,255,.05);--tint-bd:rgba(255,255,255,.08)}
[data-theme="light"]{--tint-bg:rgba(15,23,42,.05);--tint-bd:rgba(15,23,42,.10)}
@media(max-width:640px){
  .nav-inner{flex-wrap:wrap;gap:.55rem;height:auto;min-height:52px;padding-top:6px}
  .nav-links{display:flex;width:100%;min-width:0;align-items:center;overflow:hidden;white-space:nowrap;padding-bottom:6px;gap:8px}
  .nav-scroll{display:flex;flex:1 1 auto;min-width:0;gap:18px;overflow-x:auto;overscroll-behavior-inline:contain;white-space:nowrap;scrollbar-width:thin;padding:4px 0}
  .nav-scroll>a{flex:0 0 auto;min-height:36px;display:inline-flex;align-items:center}
  .nav-links>.cc-theme-switch{flex:0 0 44px;margin-left:2px}
  .feat-grid{grid-template-columns:minmax(0,1fr)}
  .pricing-intro{display:flex;flex-direction:column;gap:10px}
  .pricing-intro .cc-cur-seg{display:flex;align-items:center;justify-content:space-between;min-height:44px;margin:0}
  .cc-cur-seg .multiplier-toggle{height:44px;min-width:132px}
  .cc-cur-seg .multiplier-toggle button{min-width:64px;min-height:44px}
  .pricing-scroll{overscroll-behavior-inline:contain;box-shadow:inset -3px 0 0 var(--line2);scrollbar-width:thin}
  .pricing-scroll>.pricing-table{width:max-content;min-width:920px}
  .pub-terminal-head{display:grid;grid-template-columns:auto auto 1fr;gap:8px;align-items:center}
  .pub-terminal-head>.terminal-tabs{grid-column:1/3;margin:0}
  .pub-terminal-actions{grid-column:3;grid-row:2;display:inline-flex;justify-self:end;align-items:center;gap:8px;min-width:max-content}
  footer{margin-top:2.5rem}
}
/* v122 final authority: 44px touch target, 44x24 visual track. */
@media(max-width:640px){
  button.cc-theme-switch{width:44px!important;min-width:44px!important;height:44px!important;min-height:44px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important}
  button.cc-theme-switch>.switch-track{width:44px!important;height:24px!important;min-width:44px!important}
}
/* paygo pricing table: presisi, scroll dalam card di mobile */
.paygo-table-wrap { overflow-x:auto; }
.paygo-table { width:100%; border-collapse:collapse; font-size:.85rem; }
.paygo-table th, .paygo-table td { padding:8px 10px; text-align:right; border-bottom:1px solid var(--border); white-space:nowrap; }
.paygo-table th:first-child, .paygo-table td:first-child { text-align:left; }
.paygo-table td.num, .paygo-table th.num { font-family:var(--mono); }
.paygo-disc { color:var(--lime); font-weight:700; }
@media (max-width:640px){ .paygo-table th, .paygo-table td { padding:10px 8px; min-height:44px; } }

/* cc-ui-v125 Oct 08: (1) currency toggle base utk SEMUA breakpoint (sebelumnya cuma ada
   di @media600 -> desktop render tombol native mentah / "ga render"),
   (2) theme switch presisi: knob pill putih bulat, tanpa knob hitam + tanpa emoji (bikin tampilan "bendera"),
   (3) sel official landing pakai span cc-off-in/out (ikut currency toggle) + coretan global,
   (4) nav mobile wrap 2 baris tanpa scroll terpotong, (5) footer mobile stack. */
@media (min-width:601px){
  .multiplier-toggle{display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;position:relative;width:84px;height:26px;padding:3px;background:var(--seg-bg);border:1px solid var(--seg-bd);border-radius:999px;box-shadow:inset 0 1px 2px rgba(15,23,42,.08);flex:none;vertical-align:middle}
  .multiplier-toggle button{appearance:none;-webkit-appearance:none;position:relative;z-index:1;display:flex;align-items:center;justify-content:center;height:18px;padding:0 8px;margin:0;border:0;border-radius:999px;background:transparent;color:#5b6472;font:700 10px/1 var(--mono);letter-spacing:.06em;cursor:pointer;transition:color .16s ease,background .16s ease,box-shadow .16s ease}
  .multiplier-toggle button.active{color:var(--currency-active-text,#10150a)!important;background:var(--seg-on)!important;box-shadow:0 1px 2px rgba(15,23,42,.18)}
  .multiplier-toggle button.active:hover{filter:brightness(1.06)}
  .multiplier-toggle button:hover:not(.active){color:var(--ink)}
  .cc-cur-seg{display:inline-flex;align-items:center;gap:.5rem}
}
.cc-off-in,.cc-off-out{text-decoration:line-through;text-decoration-color:#707782}
[data-theme="light"] .cc-off-in,[data-theme="light"] .cc-off-out{color:#667085}
/* theme switch presisi (semua theme/breakpoint) */
.cc-theme-switch .switch-track{background:var(--sw-tr);border-color:var(--sw-trbd);padding:2px!important}
.cc-theme-switch .switch-track>span{transform:translateX(0)!important;background:#fff!important;border-radius:50%!important;box-shadow:0 1px 3px rgba(15,23,42,.35);transition:transform .18s ease,background .18s ease}
.cc-theme-switch .switch-track>span::before{content:none!important;display:none!important}
.cc-theme-switch[aria-checked="true"] .switch-track{background:#2563eb!important;border-color:#1d4ed8!important}
.cc-theme-switch[aria-checked="true"] .switch-track>span{transform:translateX(20px)!important;background:#fff!important}
@media (max-width:640px){
  .nav-links{overflow:visible!important;white-space:normal!important;flex-wrap:wrap;row-gap:2px}
  .nav-scroll{display:contents!important;overflow:visible!important}
  .nav-links>.cc-theme-switch{margin-left:auto}
  .nav-scroll>a{min-height:32px}
  footer .shell{flex-direction:column;align-items:flex-start;gap:.3rem}
}
/* cc-ui-v125: nav Login amber */
.nav-links a.nav-login{color:#d97706!important;font-weight:700}
.nav-links a.nav-login:hover{color:#b45309!important;text-decoration:underline}
/* cc-ui-v125 dashboard mobile/light: key-copy & mult-tag tak lagi kotak hitam tanpa teks di light */
[data-theme="light"] .key-copy,[data-theme="light"] .key-edit-btn{background:#ffffff!important;color:#1f2937!important;border-color:#cbd5e1!important;box-shadow:0 1px 2px rgba(15,23,42,.08)}
[data-theme="light"] .key-copy:hover,[data-theme="light"] .key-edit-btn:hover{background:#f1f5f9!important}
[data-theme="light"] .key-tags .mult-tag{background:#eef2f7!important;color:#1f2937!important;border-color:#d5dce6!important}
[data-theme="light"] .key-tags .status-dot{background:#f8fafc!important;border-color:#dbe2ea!important}
/* code block mobile: wrap, jangan terpotong */
@media(max-width:640px){.terminal-body{white-space:pre-wrap;word-break:break-word;overflow-x:visible}}

/* cc-ui-v126 Oct 08 (co-design cx/gpt-6-astra):
   A) theme switch presisi per state x theme (biru ON dipertahankan - keputusan pemilik,
      OFF netral #343b46/#cbd5e1, knob 18px, geometri 44x24 border-box, easing 180ms);
   B) canvas mobile stabil: text-size-adjust 100% (cegah text autosizing) + pagar overflow-x clip
      (bukan hidden - body tetap tanpa scroll container, sticky nav aman; @supports utk browser lama);
   C) status auto-track note di usage picker. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
@supports (overflow-x: clip){body{overflow-x:clip}}
#autotrack-note{display:block;margin:8px 0 0;font-size:.82rem;color:var(--muted)}
#autotrack-note[hidden]{display:none!important}
button.cc-theme-switch[role="switch"] {
  --cc-sw-off: #343b46;
  --cc-sw-off-border: #465160;
  --cc-sw-off-knob: #f8fafc;
  --cc-sw-on-border: #1e40af;
  width: 44px !important;
  height: 24px !important;
  min-width: 44px !important;
  min-height: 24px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center;
  flex: 0 0 auto;
  vertical-align: middle;
  cursor: pointer;
}
html[data-theme="light"] button.cc-theme-switch {
  --cc-sw-off: #cbd5e1;
  --cc-sw-off-border: #94a3b8;
  --cc-sw-off-knob: #ffffff;
  --cc-sw-on-border: #1d4ed8;
}
button.cc-theme-switch[role="switch"] .switch-track {
  box-sizing: border-box !important;
  display: block !important;
  position: relative !important;
  width: 44px !important;
  height: 24px !important;
  padding: 2px !important;
  margin: 0 !important;
  flex: 0 0 44px !important;
  border: 1px solid var(--cc-sw-off-border) !important;
  border-radius: 999px !important;
  background: var(--cc-sw-off) !important;
  box-shadow: none !important;
  transition: background-color 180ms cubic-bezier(.2,.8,.2,1),
              border-color 180ms cubic-bezier(.2,.8,.2,1);
}
button.cc-theme-switch[role="switch"] .switch-track > span {
  box-sizing: border-box !important;
  display: block !important;
  position: relative !important;
  inset: auto !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: var(--cc-sw-off-knob) !important;
  box-shadow: 0 1px 2px #00000033 !important;
  transform: translateX(0) !important;
  transition: transform 180ms cubic-bezier(.2,.8,.2,1),
              background-color 180ms cubic-bezier(.2,.8,.2,1);
}
button.cc-theme-switch[role="switch"][aria-checked="true"] .switch-track {
  background: #2563eb !important;
  border-color: var(--cc-sw-on-border) !important;
}
button.cc-theme-switch[role="switch"][aria-checked="true"] .switch-track > span {
  transform: translateX(20px) !important;
  background: #ffffff !important;
}
button.cc-theme-switch[role="switch"] .switch-track::before,
button.cc-theme-switch[role="switch"] .switch-track::after,
button.cc-theme-switch[role="switch"] .switch-track > span::before,
button.cc-theme-switch[role="switch"] .switch-track > span::after {
  content: none !important;
  display: none !important;
}
button.cc-theme-switch[role="switch"]:focus-visible {
  outline: 2px solid #2563eb !important;
  outline-offset: 3px !important;
}
@media (prefers-reduced-motion: reduce) {
  button.cc-theme-switch[role="switch"] .switch-track,
  button.cc-theme-switch[role="switch"] .switch-track > span {
    transition: none !important;
  }
}

/* cc-ui-v127 Oct 08 (co-design cx/gpt-6-astra): canvas presisi, admin light, topup box.
   TANPA ubah routing/masking/pricing/concurrency. */
/* A1 stat KPI deterministik — selalu baris penuh (6 kartu: 3+3 / 2+2+2 / 1x6) */
@media(min-width:768px){.dashboard-stat-grid,.admin-kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media(min-width:360px) and (max-width:767px){.dashboard-stat-grid,.admin-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
/* A2 konten lebar mobile: scroll di dalam kartu, canvas tidak boleh melebar */
.tbl-x{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.recent-requests .card{overflow-x:auto!important}
.admin-report-grid>div{overflow-x:auto;min-width:0}
.admin-report-grid>*{min-width:0}
.admin-tabs{overflow-x:auto;max-width:100%}
@media(max-width:767px){
  .terminal-body{white-space:pre-wrap!important;overflow-wrap:anywhere!important;overflow-x:hidden!important;min-width:0}
  .dashboard-secondary-grid,.dashboard-secondary-grid>*{min-width:0}
}
/* A3 landing stat grid: baris selalu penuh (index-scoped rules ada di index.html) */

/* B admin LIGHT — elemen yang masih hard-coded gelap */
html[data-theme="light"] .mult-btn .track{background:#dcdcd6;border-color:#c9c9c1}
html[data-theme="light"] .mult-btn .knob{background:#ffffff;box-shadow:0 1px 3px rgba(0,0,0,.18)}
html[data-theme="light"] .mult-btn .state{color:#6b6b66}
html[data-theme="light"] .mult-btn.on .state{color:#4d7c0f}
html[data-theme="light"] .model-option b{color:#161616}
html[data-theme="light"] .model-option small{color:#6b6b66}
html[data-theme="light"] .delivery-modal{background:#ffffff;color:#161616;border-color:#e2e2dc;box-shadow:0 28px 80px rgba(0,0,0,.22)}
html[data-theme="light"] .usage-bar{background:#e7e7e1}
html[data-theme="light"] .proxy-pool-box{background:#f4f4f1;border-color:#e2e2dc}
html[data-theme="light"] .key-mult-row select{background:#ffffff;color:#161616;border-color:#cfcfc6}
html[data-theme="light"] [id=recentRequests] .lime{color:#4d7c0f}
html[data-theme="light"] [id=recentRequests] .red{color:#dc2626}
html[data-theme="light"] .admin-tabs-scroll::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.85))}

/* C topup box presisi */
.topup-methods{align-items:start!important}
.topup-method{display:flex;flex-direction:column;gap:0}
.topup-method>section{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}
.topup-method .order-card{flex:1 1 auto;display:flex;flex-direction:column;min-width:0}
.topup-method .order-body{flex:1 1 auto}
.order-benefits{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr}
@media(max-width:411px){.order-benefits{grid-template-columns:1fr}}

/* Deterministic key rows: page size 20; six-card accounts also fill rows. */
@media(max-width:767px){.dashboard-key-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:359px){.dashboard-stat-grid{grid-template-columns:minmax(0,1fr)!important}}
.dashboard-stat-grid .stat-value{min-width:0;font-size:clamp(16px,2.5vw,28px);overflow-wrap:anywhere}

/* v129: contain rotated orbit bounds without resizing the mobile artwork. */
.orbit-container{max-width:100%}
@supports (overflow-x:clip){.hero{overflow-x:clip}}

/* v140: blue-on-white light controls on terminal cards. */
[data-theme="light"] #recentRefresh,
[data-theme="light"] .terminal-head .btn-secondary{background:#ffffff!important;color:#2563eb!important;border-color:#93c5fd!important;font-weight:600}
[data-theme="light"] #recentRefresh:hover,
[data-theme="light"] .terminal-head .btn-secondary:hover{background:#eff6ff!important}
[data-theme="light"] #recentUpdated{color:#64748b!important}
/* Quick start: reuse card padding and existing compact control sizes. */
.dashboard-quickstart > ol{margin:0 0 16px;padding-left:24px;line-height:1.65}
.dashboard-quickstart > ol > li + li{margin-top:8px}
.dashboard-quickstart .terminal-tabs{margin:0 auto}
.dashboard-quickstart .terminal-head > [data-copy]{margin-left:auto}
.dashboard-quickstart .terminal-body{max-height:none;padding:16px;font-size:12px;overflow:auto}
.dashboard-quickstart .terminal-body code{font-size:inherit}

/* v146: plan/top-up anchor navigation and accessible keyboard focus. */
#topup-order,#topup-qris,#topup-crypto{scroll-margin-top:88px}
.plan-select:focus-visible,.plan-dialog .btn:focus-visible{outline:2px solid var(--lime);outline-offset:4px}
.plan-card{cursor:pointer;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}.plan-card:hover{transform:translateY(-2px)}.plan-card.selected{border-color:var(--lime)!important;box-shadow:0 0 0 1px var(--lime),0 8px 28px rgba(163,230,53,.12)}.plan-card:focus-visible{outline:2px solid var(--lime);outline-offset:3px}.plan-note{margin-top:14px;padding:12px 16px;border:1px solid var(--border);border-radius:10px;background:var(--card);font-size:.85rem;color:var(--muted);min-height:1.2em}.plan-note strong{color:var(--text)}
/* v157: subtle shared aurora palette, ribbons and glow. */
.cc-aurora-svg{--aurora-lime:#a3e635;--aurora-blue:#3b82f6;--aurora-violet:#a78bfa;--aurora-strength:1;--aurora-halo-opacity:.14;--aurora-sharp-opacity:.32;--aurora-ribbon-opacity:.06;--aurora-ellipse-opacity:.08;--aurora-drift-duration:60s;--aurora-pulse-duration:14s;--aurora-pulse-low:.10;--aurora-pulse-high:.18;--aurora-mask:linear-gradient(180deg,#000 55%,transparent 98%);-webkit-mask-image:var(--aurora-mask);mask-image:var(--aurora-mask)}
[data-theme="light"] .cc-aurora-svg{--aurora-lime:#4d7c0f;--aurora-blue:#2563eb;--aurora-violet:#7c3aed;--aurora-strength:1.2}
body.cc-aurora{isolation:isolate}
@keyframes cc-aurora-drift{0%,100%{transform:translate3d(-30px,-15px,0)}50%{transform:translate3d(30px,15px,0)}}
@keyframes cc-aurora-pulse{0%,100%{opacity:var(--aurora-pulse-low)}50%{opacity:var(--aurora-pulse-high)}}
body.cc-aurora > .cc-aurora-svg{position:fixed !important;display:block;inset:-40px;width:calc(100% + 80px);height:calc(100% + 80px);z-index:-1;pointer-events:none;animation:cc-aurora-drift var(--aurora-drift-duration) ease-in-out infinite;filter:opacity(var(--aurora-strength))}
.cc-aurora-halo{opacity:var(--aurora-halo-opacity);animation:cc-aurora-pulse var(--aurora-pulse-duration) ease-in-out infinite}
.cc-aurora-sharp{opacity:var(--aurora-sharp-opacity)}
@media (prefers-reduced-motion:reduce){body.cc-aurora > .cc-aurora-svg,.cc-aurora-halo{animation:none}}

/* v148: currency contrast and breathing room for the trailing model columns. */
[data-theme="light"] .multiplier-toggle{--currency-active-text:#ffffff}
.models-table tbody td:nth-child(n+7),
.models-table .models-head-main th:nth-child(n+5){padding-left:12px!important;padding-right:12px!important;white-space:nowrap}
.models-table tbody td:nth-child(9){text-align:center!important}

/* Isolated negative decorative layer preserves sticky navigation and modal stacking. */
/* v152: recommendation stays visible without competing with user selection. */
.plan-card.popular.popular-dim{border-color:var(--border)!important;box-shadow:none}
.plan-card.popular.popular-dim .btn{background:transparent!important;color:var(--text)!important;border-color:var(--border)!important}.plan-card.popular.popular-dim.selected .btn{background:var(--lime)!important;color:#000!important;border-color:var(--lime)!important}
.plan-card.popular.popular-dim .plan-badge{opacity:.45}.plan-card.selected .btn{background:var(--lime)!important;color:#000!important;border-color:var(--lime)!important}.plan-card.selected.popular-dim{border-color:var(--lime)!important;box-shadow:0 0 0 1px var(--lime),0 8px 28px rgba(163,230,53,.12)}.plan-card.selected.popular-dim .plan-badge{opacity:1}.plan-card.popular.popular-dim.selected .btn{background:var(--lime)!important;color:#000!important;border-color:var(--lime)!important}

/* v177: auth-only spacing; preserve approved anonymous geometry and <=600 wrap. */
@media (min-width:601px){
  .nav .nav-links.nav-links-auth{gap:18px;flex-wrap:wrap;white-space:normal}
  .nav-links-auth .nav-scroll{display:contents!important}
  .nav .nav-links-auth>.user-menu{margin-left:12px;flex-shrink:0;max-width:240px}
  .nav-links-auth .user-menu>button{max-width:100%}
  .nav-links-auth .user-menu>button span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@media (min-width:601px) and (max-width:1100px){
  .nav .nav-links.nav-links-auth{gap:12px}
  .nav-links-auth a{font-size:13px}
  .nav .nav-links-auth>.user-menu{max-width:200px}
}

/* v209: display-only model configuration and stable top-up geometry */
.model-capabilities{display:grid;grid-template-columns:minmax(120px,1fr) 1.4fr;gap:0;border:1px solid var(--border,var(--line));border-radius:10px;overflow:hidden}
.model-capabilities dt,.model-capabilities dd{margin:0;padding:10px 12px;border-bottom:1px solid var(--border,var(--line));font-size:13px;overflow-wrap:anywhere}
.model-capabilities dt{color:var(--muted)}
.model-package{display:inline-block;padding:6px 10px;border-radius:20px;background:rgba(163,230,53,.12);color:var(--lime);font-size:12px}
.model-uptime{padding:14px;border:1px solid var(--border,var(--line));border-radius:10px;margin-top:16px}.model-uptime strong{display:flex;justify-content:space-between}.model-uptime small{display:block;color:var(--muted);margin-top:6px}
.model-config .model-config-pills[aria-label="Format"]{gap:6px}.model-config .model-config-pills[aria-label="Format"] button{border-radius:6px}
.shell .plan-grid{align-items:stretch;grid-auto-rows:1fr}.shell .plan-card{position:relative;min-height:430px;box-sizing:border-box;padding-top:24px}.shell .plan-card .plan-desc{display:block;min-height:4em;font-size:12px;line-height:1.4}.shell .plan-card .plan-price{white-space:nowrap;font-size:17px}.shell .plan-card .plan-price small{display:block}.shell .plan-card>.badge-ok{position:absolute;right:8px;top:6px;font-size:10px}.shell .plan-card>.btn{margin-top:auto;min-height:44px;padding:10px 6px;font-size:12px;white-space:nowrap}.shell .plan-card:hover{transform:none}
.plan-dialog .plan-payment-3way{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:16px 0}.plan-dialog .plan-payment-3way .btn{min-width:0;padding:10px 4px;white-space:nowrap;font-size:12px}.plan-dialog{max-height:calc(100dvh - 40px);overflow:auto}
@media(min-width:601px){main.shell .plan-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media(max-width:600px){.shell .plan-card{min-height:390px}.shell .plan-card .plan-desc{min-height:2.8em}}

.plan-dialog .plan-payment-3way .btn{min-height:44px}

/* v210: native payment controls stay visibly unavailable until consent. */
.plan-payment-3way button:disabled{opacity:.4;cursor:not-allowed;filter:saturate(.35)}
.plan-payment-3way button{min-width:0}

/* Preserve readable columns under the non-modal model overlay. */
.pricing-scroll>.pricing-table{min-width:1400px}

/* v211: scoped frames and visible token tracker */
.dashboard-key-card .usage-bar-link{display:block;min-width:0;width:100%}
.dashboard-key-card .usage-bar{display:block;width:100%;height:8px;min-height:8px;background:var(--border);margin:0;border-radius:4px}
.dashboard-key-card .usage-bar>div{display:block;height:100%}
.baseurl-3frame>.card,.voucher-qs-2frame>.card{padding:20px;margin:0;align-self:start}
.baseurl-frame .eyebrow,.qs-frame .eyebrow{margin:0 0 12px}
.recent-head .recent-controls{position:static;margin:0;justify-content:flex-start;max-width:100%}
.recent-head #recentUpdated{min-width:0;text-align:left}
.plan-card{position:relative}
.active-ribbon{position:absolute;right:-7px;top:22px;transform:rotate(35deg);background:linear-gradient(110deg,#9a6b16,#edbd52,#aa791c);color:#171006;box-shadow:0 3px 8px #0005;padding:5px 15px;font-size:10px;font-weight:800;letter-spacing:.04em;border:1px solid #e9bd61;z-index:1}
.instant-nominal.card{display:flex;flex-direction:column;gap:14px;margin:24px 0 0;padding:20px}
.instant-nominal h3,.instant-nominal .plan-note,.instant-nominal p{margin:0}
.instant-nominal .plan-note{border:0;padding:0;background:none}
.instant-nominal #quick-topup-status:empty{display:none}
.plan-payment-3way{margin:18px 0}
.plan-payment-3way .btn{display:flex;gap:6px;background:transparent;color:var(--text);border:1px solid var(--border)}
.plan-payment-3way .btn[aria-pressed="true"]{border-color:var(--lime);background:var(--lime);color:#101509;box-shadow:0 0 0 2px #a3e63525}
#plan-continue{width:100%;justify-content:center;margin-bottom:10px}
.plan-dialog{max-height:calc(100dvh - 40px);overflow:auto}
.model-uptime{padding:16px;border:1px solid var(--border);border-radius:10px;margin-top:20px}
.model-uptime strong{display:flex;justify-content:space-between}.model-uptime small{display:block;color:var(--muted);margin-top:8px}
.reliability-ticks{display:flex;gap:3px;height:28px;margin-top:12px}.reliability-ticks i{flex:1;background:var(--border);border-radius:2px}.reliability-ticks i.ok{background:#70b957}.reliability-ticks i.bad{background:#df6464}
@media(max-width:600px){.plan-payment-3way{gap:6px}.plan-payment-3way .btn{padding:10px 6px;font-size:11px}.recent-head{align-items:flex-start}.recent-head .recent-controls{width:100%}.instant-nominal.card{padding:16px}}

.usage-spark{display:flex;align-items:flex-end;gap:1px;height:14px;margin-top:6px}.usage-spark i{flex:1;min-width:2px;border-radius:2px;background:var(--blue,#3b82f6);opacity:.7}.usage-spark i.hot{background:var(--yellow,#f59e0b)}.usage-spark i.max{background:var(--red,#ef4444)}a.usage-spark-link{display:block;text-decoration:none}a.usage-spark-link:hover .usage-spark i{opacity:1}

/* v213: activity without quota and compact payment/telemetry frames. */
.usage-spark.unlimited i{background:var(--blue,#3b82f6)}
.topup-methods>.instant-nominal{margin:0;min-width:0}
.topup-methods .order-grid,.topup-methods .order-benefits{grid-template-columns:1fr}
.topup-methods .order-benefit{padding:10px 16px;white-space:nowrap}
.payment-method-label{min-height:44px;padding:10px 12px;border:1px solid var(--border);border-radius:7px;box-sizing:border-box}
.reliability-ticks[data-uptime-strip]{display:flex;align-items:baseline;gap:2px;min-width:0}
[data-uptime-strip] span{flex:1;min-width:0;height:24px;border-radius:2px;background:var(--border)}
[data-uptime-strip] .bg-positive{background:#70b957}
[data-uptime-strip] .bg-money{background:var(--yellow,#f59e0b)}
@media(min-width:901px){body.drawer-open .shell{width:calc(100% - 568px)!important;max-width:calc(100% - 568px)!important;margin-inline:24px 544px!important}body.drawer-open .table-wrap{max-width:100%;overflow-x:auto}}

/* v214: final meter palette; independent of theme/custom-property overrides. */
.usage-bar>div{background:#3b82f6!important}
.usage-bar>div.warning{background:#f59e0b!important}
.usage-bar>div.critical{background:#ef4444!important}
/* Definition pairs stay in two readable, bordered columns. */
.model-config .model-capabilities{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:0;border:1px solid var(--line2,#343a43)}
.model-config .model-capabilities dt,.model-config .model-capabilities dd{margin:0;padding:10px;font-size:14px;line-height:1.5;border-bottom:1px solid var(--line2,#343a43);min-width:0}
.model-config .model-capabilities dt{border-right:1px solid var(--line2,#343a43)}
.model-config .model-capabilities dt:last-of-type,.model-config .model-capabilities dd:last-of-type{border-bottom:0}
.model-config [data-uptime-strip] .no-data{background:#64748b}
.model-config [data-uptime-strip] .bg-money{background:#f59e0b}
.model-config[open] [data-uptime-strip] span{animation:uptime-fade-in .6s ease-out both;animation-delay:calc(var(--bucket-index,0)*8ms)}
.model-config [data-uptime-strip] span:hover{outline:2px solid var(--text);outline-offset:1px}
@keyframes uptime-fade-in{from{opacity:.25;transform:scaleY(.6)}to{opacity:1;transform:scaleY(1)}}
@media(prefers-reduced-motion:reduce){.model-config[open] [data-uptime-strip] span{animation:none}}

/* v216: one precise frame for both pay-as-you-go methods. */
.topup-frame{width:100%;max-width:none!important;padding:0!important;overflow:hidden!important}
.topup-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:20px 24px!important}
.topup-head .eyebrow{margin:0 0 10px}.topup-head h2{font-size:1.35rem;margin:0 0 4px}.topup-head p{margin:0}
.topup-balance{min-width:220px;text-align:right;padding-left:24px;border-left:1px solid var(--border)}
.topup-balance span,.topup-balance small{display:block;color:var(--muted);font-size:.75rem}
.topup-balance strong{display:block;margin:2px 0;font:700 1.15rem var(--mono);color:var(--lime)}
.topup-frame .order-body{padding:20px 24px!important}
.topup-method-switch{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:16px}
.topup-method-button{height:44px;border:1px solid var(--border-2);border-radius:7px;background:var(--input-dk);color:var(--muted);font:700 .78rem var(--mono);letter-spacing:.06em;cursor:pointer}
.topup-method-button:hover{color:var(--text);border-color:var(--muted)}.topup-method-button.active{border-color:var(--lime);background:var(--lime-bg);color:var(--lime)}
.topup-benefits{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin-bottom:20px;border:1px solid var(--border);background:var(--border);border-radius:7px;overflow:hidden}
.topup-benefits[hidden],.topup-panel[hidden]{display:none!important}.topup-benefits span{min-width:0;padding:10px 12px;background:var(--card);color:var(--muted);font-size:.76rem;text-align:center}
.topup-benefits[data-topup-benefits="qris"]{grid-template-columns:1fr}
.topup-fields{grid-template-columns:minmax(0,1fr) minmax(260px,.65fr)!important;gap:16px}
.topup-action-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,.65fr);gap:16px;align-items:center;margin-top:16px;padding-top:16px;border-top:1px solid var(--border)}
.topup-action-row .order-note{margin:0!important;padding:0!important;border:0!important}.topup-key-note{margin-top:16px!important}
.payment-method-label{display:flex;align-items:center;height:44px;padding:0 12px;border:1px solid var(--border);border-radius:7px;background:var(--surface-dk);color:var(--text);font:600 .82rem var(--mono)}
@media(max-width:640px){.topup-head{padding:16px!important;display:block}.topup-balance{min-width:0;margin-top:16px;padding:14px 0 0;border-left:0;border-top:1px solid var(--border);text-align:left}.topup-frame .order-body{padding:16px!important}.topup-benefits{grid-template-columns:repeat(2,minmax(0,1fr))}.topup-fields,.topup-action-row{grid-template-columns:1fr!important;gap:14px}.topup-action-row{align-items:stretch}}

/* v219: physical-width desktop mode, matched top-up/history frames, method modal. */
@media (min-width:601px){
  main.shell .plan-grid{grid-template-columns:repeat(6,minmax(0,1fr))!important}
  main.shell .plan-card{padding-left:clamp(8px,1.25vw,16px);padding-right:clamp(8px,1.25vw,16px)}
}
.topup-orders-grid>section{min-width:0;display:flex}
.topup-orders-grid .order-card{max-width:none;width:100%;padding:0!important;overflow:hidden}
.topup-orders-grid .order-head{box-sizing:border-box;min-height:116px;padding:20px}
.topup-orders-grid .order-head .eyebrow{margin:0 0 8px}
.topup-orders-grid .order-head h2{margin:0 0 6px}
.topup-orders-grid .order-head p{margin:0}
.topup-orders-grid .order-body{padding:20px}
.topup-orders-grid .history-frame>p{margin:0;padding:16px 20px 0}
.topup-orders-grid .history-frame>.table-wrap{width:calc(100% - 40px);max-width:calc(100% - 40px);margin:16px 20px 20px;border-radius:8px;overflow-x:auto!important}
.topup-orders-grid .history-frame table{display:table;min-width:760px;white-space:nowrap}
.topup-orders-grid .history-frame .pager-compact{margin:0 20px 20px}
@media(max-width:900px){.topup-orders-grid .order-head{min-height:0}.topup-orders-grid .history-frame{min-height:0}}
.plan-dialog{padding:24px}
.plan-dialog>.eyebrow{margin:0 0 10px}
.plan-dialog>h2{margin:0 0 6px}
.plan-dialog>#plan-payment-note{margin:0}
.plan-dialog .plan-payment-3way{margin:20px 0 16px}
.plan-dialog .plan-payment-3way .btn{gap:8px}
.plan-dialog .plan-payment-3way .btn[aria-pressed="false"]{background:transparent!important;color:var(--text)!important;border-color:var(--border-2)!important;box-shadow:none!important}
.plan-dialog .plan-payment-3way .btn[aria-pressed="true"]{background:var(--lime)!important;color:#0a0a0a!important;border-color:var(--lime)!important;box-shadow:0 0 0 2px rgba(163,230,53,.14)!important}
.plan-chain-field{margin:18px 0 0;padding:16px;border:1px solid var(--border);border-radius:8px;background:var(--surface-dk)}
.plan-modal-actions{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;margin-top:16px}
.plan-modal-actions #plan-continue{width:100%;margin:0;min-height:44px}
.plan-modal-actions .plan-modal-close{width:auto;min-height:44px}
@media(max-width:440px){.plan-dialog{padding:20px}.plan-dialog .plan-payment-3way{grid-template-columns:1fr}.plan-modal-actions{grid-template-columns:1fr}.plan-modal-actions .plan-modal-close{width:100%}}
/* v219 precision: use one shared outer margin so both grid items stretch equally. */
.topup-orders-grid .order-body{padding:20px!important}
.topup-orders-grid{margin-top:24px}
.topup-orders-grid>section.mt-3{margin-top:0}
.topup-orders-grid>.history-frame{height:100%}

img[src*="hy-v3"]{background:#0052D9;border-radius:8px;padding:2px}

/* IOS-FIX Oct23: iPhone Safari/Chrome precision + notch/home-bar. Additive only. */
.nav{padding-top:env(safe-area-inset-top);}
main.shell,.shell{padding-bottom:calc(20px + env(safe-area-inset-bottom));}
footer .shell,footer{padding-bottom:calc(14px + env(safe-area-inset-bottom));}
.key-create-overlay,.confirm-overlay,.admin-page .admin-tabs{-webkit-backdrop-filter:blur(8px);}
.key-create-overlay,.confirm-overlay{-webkit-backdrop-filter:blur(5px);}
#cc-announce{-webkit-backdrop-filter:blur(4px);}
#cc-ann-card{max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);overflow-y:auto;-webkit-overflow-scrolling:touch;}
.nav-scroll,.pager-pages,.admin-page .admin-tabs,.nav-links{-webkit-overflow-scrolling:touch;}
@media(max-width:640px){
.nav{position:sticky;top:env(safe-area-inset-top);}
body{padding-top:0!important;}
.admin-page .admin-tabs{position:static;}
input[type=text],input[type=number],input[type=email],input[type=password],input[type=search],input[type=tel],input[type=url],input[type=datetime-local],input[type=date],select,textarea{font-size:16px!important;}
.key-create-modal,.confirm-card{width:min(440px,calc(100vw - 32px))!important;}
#cc-announce{padding:12px;}
#cc-ann-title{font-size:19px;}
#cc-ann-media img,#cc-ann-media video{max-height:200px;}
}

/* MOBILE-GLOBAL Oct23: 360/375/390/430 iPhone + tablet. Desktop-first: SEMUA di dalam MQ, desktop NOL berubah. */
img,video,iframe{max-width:100%;}
@media(max-width:640px){
html,body{overflow-x:clip;}
.hero .cta .btn{flex:1 1 100%;min-height:48px;}
.usage-input-grid{grid-template-columns:1fr;}
.usage-input-grid .btn{width:100%;min-height:48px;}
.input-group{flex-wrap:wrap;}
.input-group .btn{flex:1 1 100%;min-height:48px;}
.admin-tabs{position:static;}
.key-row-grid .key-actions{flex-wrap:wrap;}
pre{-webkit-overflow-scrolling:touch;}
}
@media(max-width:390px){
.card{padding:.9rem;}
.btn{min-height:46px;}
.copy-row{min-width:0;width:100%;}
}
/* RR-MOB Oct23: recent-requests mobile jadi KARTU (anti-grid-squeeze). */
@media(max-width:640px){
[id=recentRequests] .rh{display:none!important;}
[id=recentRequests]{max-width:100%;overflow:hidden;}[id=recentRequests] .rr{display:block!important;max-width:100%!important;box-sizing:border-box!important;overflow:hidden!important;padding:.45rem .6rem!important;border:1px solid var(--border)!important;border-radius:9px;margin:0 0 .35rem 0!important;background:var(--thead)!important;}
[id=recentRequests] .rr>span{display:inline;overflow:visible;white-space:normal;line-height:1.55;}
[id=recentRequests] .rr span:nth-child(1){display:inline-block;min-width:52px;font-weight:800;}
[id=recentRequests] .rr span:nth-child(2){display:block;font-weight:700;font-size:11px;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
[id=recentRequests] .rr span:nth-child(3){display:block;font-size:10px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
[id=recentRequests] .rr span:nth-child(4)::before{content:"• ";color:var(--muted);}
[id=recentRequests] .rr span:nth-child(4){font-size:10px;color:var(--muted);}
[id=recentRequests] .rr span:nth-child(5),[id=recentRequests] .rr span:nth-child(6){display:none;}
}