:root {
  --ink: #090a0c;
  --ink-2: #101216;
  --panel: #15181d;
  --panel-2: #1b1f25;
  --panel-3: #22272f;
  --line: rgba(255,255,255,.09);
  --line-strong: rgba(255,255,255,.16);
  --text: #f6f6f2;
  --muted: #9a9fa8;
  --soft: #6f757f;
  --acid: #d8ff4f;
  --acid-2: #bce531;
  --coral: #ff7657;
  --cyan: #5ee7e7;
  --danger: #ff5c65;
  --success: #72e49c;
  --warning: #ffca63;
  --radius: 18px;
  --shadow: 0 24px 70px rgba(0,0,0,.32);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background: var(--ink);
  color: var(--text);
  font-family: "Noto Sans Thai", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
button { color: inherit; }
::selection { background: var(--acid); color: #111; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #2b3037; border-radius: 20px; }

.boot-screen { min-height: 100vh; display: grid; place-content: center; gap: 18px; }
.brand-mark {
  width: 48px; height: 48px; display: grid; place-items: center;
  background: var(--acid); color: #111; border-radius: 13px;
  font: 800 15px/1 "IBM Plex Mono", monospace; transform: rotate(-5deg);
}
.boot-line { width: 48px; height: 2px; overflow: hidden; background: #252930; }
.boot-line span { display: block; width: 50%; height: 100%; background: var(--acid); animation: boot 1s infinite alternate ease-in-out; }
@keyframes boot { to { transform: translateX(100%); } }

.icon { width: 19px; height: 19px; stroke-width: 1.8; }
.mono { font-family: "IBM Plex Mono", monospace; }
.muted { color: var(--muted); }
.danger-text { color: var(--danger); }
.success-text { color: var(--success); }
.hide { display: none !important; }

/* Public shell */
.public-shell { min-height: 100vh; background: var(--ink); overflow: hidden; }
.public-shell::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .16;
  background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 72px 72px; mask-image: linear-gradient(to bottom, #000, transparent 72%);
}
.public-nav {
  position: relative; z-index: 20; height: 78px; max-width: 1240px; margin: auto;
  display: flex; align-items: center; gap: 36px; padding: 0 28px;
}
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font-weight: 800; letter-spacing: -.03em; }
.brand .brand-mark { width: 38px; height: 38px; }
.brand-copy small { display: block; color: var(--soft); font: 500 9px/1.2 "IBM Plex Mono"; letter-spacing: .11em; text-transform: uppercase; margin-top: 3px; }
.public-links { display: flex; gap: 4px; margin-left: auto; }
.public-links a { text-decoration: none; color: var(--muted); font-size: 14px; font-weight: 500; padding: 9px 13px; border-radius: 9px; }
.public-links a:hover, .public-links a.active { color: var(--text); background: rgba(255,255,255,.06); }
.nav-actions { display: flex; align-items: center; gap: 9px; }
.mobile-nav-btn { display: none; }

.btn {
  border: 1px solid transparent; border-radius: 11px; min-height: 42px; padding: 0 17px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 700; font-size: 14px; text-decoration: none; cursor: pointer; transition: .2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--acid); color: #111; box-shadow: 0 8px 24px rgba(216,255,79,.13); }
.btn-primary:hover { background: #e3ff79; }
.btn-secondary { background: var(--panel-2); border-color: var(--line); }
.btn-secondary:hover { border-color: var(--line-strong); background: var(--panel-3); }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--muted); }
.btn-danger { background: rgba(255,92,101,.1); border-color: rgba(255,92,101,.22); color: #ff8b91; }
.btn-sm { min-height: 34px; padding: 0 11px; border-radius: 8px; font-size: 12px; }
.btn-lg { min-height: 52px; padding: 0 23px; border-radius: 13px; font-size: 15px; }
.btn-icon { width: 39px; min-height: 39px; padding: 0; }
.btn[disabled] { opacity: .48; pointer-events: none; }

.hero { position: relative; z-index: 1; max-width: 1240px; min-height: 710px; margin: auto; padding: 90px 28px 70px; display: grid; grid-template-columns: 1.06fr .94fr; gap: 82px; align-items: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; color: var(--acid); font: 600 11px/1 "IBM Plex Mono"; letter-spacing: .13em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.hero h1 { margin: 22px 0 23px; max-width: 760px; font-size: clamp(48px, 6.3vw, 86px); line-height: .98; letter-spacing: -.065em; }
.hero h1 em { color: var(--acid); font-style: normal; }
.hero-copy > p { max-width: 610px; margin: 0; color: var(--muted); font-size: 18px; line-height: 1.75; }
.hero-actions { display: flex; gap: 11px; flex-wrap: wrap; margin-top: 34px; }
.proof-row { display: flex; align-items: center; gap: 23px; margin-top: 34px; color: var(--soft); font-size: 12px; }
.proof-row span { display: flex; align-items: center; gap: 7px; }
.proof-dot { width: 7px; height: 7px; background: var(--success); border-radius: 50%; box-shadow: 0 0 0 5px rgba(114,228,156,.1); }

.terminal-card { position: relative; background: rgba(20,23,27,.92); border: 1px solid var(--line-strong); border-radius: 24px; padding: 16px; box-shadow: var(--shadow); transform: rotate(1.5deg); }
.terminal-card::after { content: "LIVE"; position: absolute; right: -12px; top: 28px; background: var(--coral); color: #111; padding: 5px 10px; font: 700 10px/1 "IBM Plex Mono"; transform: rotate(4deg); }
.terminal-head { height: 42px; display: flex; align-items: center; gap: 7px; border-bottom: 1px solid var(--line); padding: 0 5px 14px; }
.terminal-head i { width: 8px; height: 8px; border-radius: 50%; background: #424750; }
.terminal-head i:first-child { background: var(--coral); }
.terminal-head span { margin-left: auto; color: var(--soft); font: 500 10px "IBM Plex Mono"; }
.terminal-body { padding: 22px 11px 10px; }
.chat-demo-message { margin-bottom: 18px; }
.demo-label { color: var(--soft); font: 600 9px "IBM Plex Mono"; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 7px; }
.chat-demo-message p { margin: 0; font-size: 14px; line-height: 1.7; }
.chat-demo-message.ai { background: #20242a; border: 1px solid var(--line); border-radius: 13px; padding: 15px; }
.chat-demo-message.ai .demo-label { color: var(--acid); }
.code-lines { margin-top: 13px; border-left: 2px solid var(--acid); padding: 4px 0 4px 13px; color: #bdc2ca; font: 12px/1.75 "IBM Plex Mono"; }
.terminal-input { margin-top: 20px; display: flex; align-items: center; justify-content: space-between; background: #0e1013; border: 1px solid var(--line); border-radius: 12px; padding: 11px 12px 11px 15px; color: #747a83; font-size: 12px; }
.terminal-send { width: 31px; height: 31px; border-radius: 8px; display: grid; place-items: center; background: var(--acid); color: #111; }

.ticker { position: relative; z-index: 2; border-block: 1px solid var(--line); background: #0e1013; overflow: hidden; transform: rotate(-1deg) scale(1.01); }
.ticker-track { display: flex; width: max-content; padding: 13px 0; animation: ticker 24s linear infinite; }
.ticker-track span { color: #80858e; font: 600 11px "IBM Plex Mono"; letter-spacing: .12em; white-space: nowrap; }
.ticker-track span::after { content: "✦"; color: var(--acid); margin: 0 34px; }
@keyframes ticker { to { transform: translateX(-50%); } }

.section { position: relative; z-index: 1; max-width: 1240px; margin: auto; padding: 112px 28px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 44px; }
.section-heading h2 { margin: 12px 0 0; font-size: clamp(34px, 4vw, 52px); line-height: 1.09; letter-spacing: -.045em; }
.section-heading p { max-width: 490px; color: var(--muted); line-height: 1.7; margin: 0; }
.feature-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 15px; }
.feature-card { min-height: 235px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 25px; overflow: hidden; position: relative; }
.feature-card:nth-child(1), .feature-card:nth-child(4) { grid-column: span 7; }
.feature-card:nth-child(2), .feature-card:nth-child(3) { grid-column: span 5; }
.feature-card:hover { border-color: rgba(216,255,79,.28); }
.feature-no { position: absolute; right: 18px; top: 12px; color: rgba(255,255,255,.055); font: 700 64px/1 "IBM Plex Mono"; }
.feature-icon { width: 44px; height: 44px; display: grid; place-items: center; background: rgba(216,255,79,.08); border: 1px solid rgba(216,255,79,.2); color: var(--acid); border-radius: 12px; margin-bottom: 35px; }
.feature-card h3 { font-size: 20px; margin: 0 0 8px; }
.feature-card p { color: var(--muted); line-height: 1.65; margin: 0; max-width: 490px; }
.stat-strip { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--panel); }
.stat-strip > div { padding: 28px; border-right: 1px solid var(--line); }
.stat-strip > div:last-child { border-right: 0; }
.stat-strip strong { display: block; font: 600 27px "IBM Plex Mono"; color: var(--acid); }
.stat-strip span { color: var(--soft); font-size: 12px; }
.cta-panel { padding: 68px; border: 1px solid var(--line); border-radius: 26px; background: var(--acid); color: #10110d; display: flex; align-items: center; justify-content: space-between; gap: 34px; overflow: hidden; position: relative; }
.cta-panel::after { content: "AU"; position: absolute; right: 24%; bottom: -70px; font: 800 210px/1 "IBM Plex Mono"; opacity: .08; transform: rotate(-8deg); }
.cta-panel h2 { margin: 0 0 10px; font-size: clamp(34px, 4vw, 55px); letter-spacing: -.05em; line-height: 1.04; max-width: 690px; }
.cta-panel p { margin: 0; opacity: .65; }
.cta-panel .btn { position: relative; z-index: 1; background: #111; color: white; flex-shrink: 0; }
.public-footer { max-width: 1240px; margin: auto; padding: 42px 28px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 25px; color: var(--soft); font-size: 12px; }
.footer-links { display: flex; gap: 20px; }
.footer-links a { text-decoration: none; }

/* Generic public pages */
.page-hero { position: relative; z-index: 1; max-width: 1240px; margin: auto; padding: 95px 28px 44px; }
.page-hero h1 { margin: 17px 0 16px; font-size: clamp(45px, 6vw, 76px); letter-spacing: -.06em; line-height: 1; }
.page-hero p { margin: 0; max-width: 690px; color: var(--muted); font-size: 17px; line-height: 1.75; }
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.pricing-grid.package-pricing { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.price-card { background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 28px; position: relative; }
.price-card.featured { border-color: var(--acid); transform: translateY(-10px); }
.price-badge { position: absolute; top: 0; right: 22px; transform: translateY(-50%); background: var(--acid); color: #10110d; padding: 5px 10px; border-radius: 6px; font: 700 9px "IBM Plex Mono"; letter-spacing: .08em; }
.price-card h3 { margin: 0; font-size: 19px; }
.price-card > p { color: var(--muted); min-height: 49px; }
.price { margin: 23px 0 25px; }
.price strong { font: 700 42px "IBM Plex Mono"; letter-spacing: -.05em; }
.price span { color: var(--muted); font-size: 13px; }
.check-list { list-style: none; padding: 0; margin: 24px 0 30px; display: grid; gap: 12px; }
.check-list li { display: flex; gap: 10px; color: #c7cad0; font-size: 13px; }
.check-list .icon { width: 16px; color: var(--acid); flex-shrink: 0; }
.compare-wrap { overflow-x: auto; border: 1px solid var(--line-strong); border-radius: 18px; box-shadow: 0 24px 70px rgba(0,0,0,.16); }
.compare-table { width: 100%; min-width: 760px; border-collapse: collapse; background: var(--panel); }
.compare-table th, .compare-table td { padding: 20px 22px; text-align: left; border-bottom: 1px solid var(--line); font-size: 15px; vertical-align: middle; }
.compare-table th { color: #b8bec8; font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.compare-table td:first-child { color: #f1f2f3; font-weight: 650; }
.compare-table th:nth-child(2), .compare-table td:nth-child(2) { background: rgba(216,255,79,.055); color: var(--text); border-inline: 1px solid rgba(216,255,79,.08); }
.compare-table td strong, .compare-table td small { display: block; }
.compare-table td strong { font-size: 15px; color: #f4f5f0; }
.compare-table td small { margin-top: 4px; color: #aeb5bf; font-size: 12px; font-weight: 450; }
.compare-yes { display: inline-flex; align-items: center; gap: 7px; color: #7ee5a2; font-weight: 700; }
.compare-yes .icon { width: 17px; height: 17px; stroke-width: 2.5; }
.compare-no { color: #747c87; font-size: 18px; }
.compare-table tr:last-child td { border-bottom: 0; }

.docs-layout { display: grid; grid-template-columns: 230px minmax(0,1fr); gap: 54px; min-width: 0; }
.docs-nav { position: sticky; top: 25px; align-self: start; }
.docs-nav a { display: block; padding: 9px 12px; border-left: 1px solid var(--line); text-decoration: none; color: var(--soft); font-size: 13px; }
.docs-nav a:hover { color: var(--text); border-color: var(--acid); }
.docs-content { width: 100%; max-width: 810px; min-width: 0; }
.docs-content section { margin-bottom: 58px; scroll-margin-top: 24px; }
.docs-content h2 { font-size: 27px; margin: 0 0 14px; }
.docs-content p { color: var(--muted); line-height: 1.75; }
.code-block { position: relative; background: #0d0f12; border: 1px solid var(--line); border-radius: 14px; padding: 19px; overflow-x: auto; color: #c7ccd4; font: 12px/1.75 "IBM Plex Mono"; white-space: pre; }
.code-block .copy-code { position: absolute; top: 9px; right: 9px; }
.inline-code { color: var(--acid); background: rgba(216,255,79,.07); border: 1px solid rgba(216,255,79,.12); border-radius: 5px; padding: 1px 5px; font-family: "IBM Plex Mono"; font-size: .86em; }
.opencode-guide { display: grid; gap: 14px; margin-top: 24px; }
.guide-platform-tabs { display: inline-grid; grid-template-columns: 1fr; gap: 4px; width: min(280px, 100%); padding: 4px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
.guide-platform-tabs button { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 14px; border: 0; border-radius: 8px; background: transparent; color: var(--soft); cursor: pointer; font-weight: 700; }
.guide-platform-tabs button.active { background: var(--panel-3); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.guide-platform-tabs > span { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 14px; border-radius: 8px; background: var(--panel-3); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); font-weight: 700; }
.guide-platform-tabs .icon { width: 16px; height: 16px; }
.guide-step { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(135deg, rgba(255,255,255,.025), rgba(255,255,255,.008)); }
.guide-step-number { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(216,255,79,.3); border-radius: 11px; color: var(--acid); background: rgba(216,255,79,.06); font: 700 11px "IBM Plex Mono"; }
.guide-step-number.success { color: var(--success); border-color: rgba(114,228,156,.28); background: rgba(114,228,156,.07); }
.guide-step-content { min-width: 0; }
.guide-step-content h3 { margin: 3px 0 6px; font-size: 19px; }
.guide-step-content > p { margin: 0 0 15px; }
.guide-os-panel[hidden] { display: none; }
.install-method-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.install-method-grid.two-columns { grid-template-columns: repeat(2, minmax(0,1fr)); }
.install-method { position: relative; min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: #111419; }
.install-method.recommended { border-color: rgba(216,255,79,.3); background: rgba(216,255,79,.035); }
.install-method > span { position: absolute; top: 10px; right: 10px; color: var(--acid); font: 700 8px "IBM Plex Mono"; letter-spacing: .06em; text-transform: uppercase; }
.install-method > strong { display: block; min-height: 32px; padding-right: 42px; color: var(--text); font-size: 12px; }
.install-method .code-block { margin-top: 8px; padding: 13px 10px; border-radius: 9px; font-size: 10px; white-space: pre-wrap; overflow-wrap: anywhere; }
.install-method .copy-code { top: auto; right: 7px; bottom: 7px; width: 28px; height: 28px; padding: 0; font-size: 0; }
.install-method .copy-code .icon { width: 14px; height: 14px; }
.guide-mini-steps { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; padding: 0; margin: 0 0 16px; list-style: none; counter-reset: guide-mini; }
.guide-mini-steps li { position: relative; padding: 11px 12px 11px 37px; border: 1px solid var(--line); border-radius: 10px; color: #cbd0d8; font-size: 12px; counter-increment: guide-mini; }
.guide-mini-steps li::before { content: counter(guide-mini); position: absolute; left: 11px; top: 10px; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: rgba(216,255,79,.1); color: var(--acid); font: 700 9px "IBM Plex Mono"; }
.guide-security-note, .guide-success { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 11px 13px; border-radius: 10px; font-size: 11px; line-height: 1.5; }
.guide-security-note { color: #b8c7d5; background: rgba(78,209,229,.06); border: 1px solid rgba(78,209,229,.18); }
.guide-success { color: var(--success); background: rgba(114,228,156,.06); border: 1px solid rgba(114,228,156,.2); }
.guide-security-note .icon, .guide-success .icon { width: 16px; height: 16px; flex: 0 0 auto; }
.manual-config { border: 1px solid var(--line); border-radius: 14px; background: var(--panel); overflow: hidden; }
.manual-config summary { padding: 15px 18px; cursor: pointer; color: #d8dbe0; font-weight: 700; }
.manual-config > p { margin: 0; padding: 0 18px 12px; font-size: 12px; }
.manual-config .code-block { margin: 0 14px 14px; }
/* Public status center */
.status-page { position:relative; z-index:1; min-height:calc(100vh - 78px); padding-bottom:70px; }
.status-hero { position:relative; isolation:isolate; max-width:1184px; min-height:360px; display:grid; grid-template-columns:minmax(0,1fr) 260px; align-items:center; gap:60px; overflow:hidden; margin:28px auto 0; padding:58px 64px; border:1px solid rgba(114,228,156,.22); border-radius:28px; background:radial-gradient(circle at 82% 45%,rgba(114,228,156,.16),transparent 27%),linear-gradient(125deg,#161c1c 0%,#12171a 54%,#152019 100%); box-shadow:0 35px 100px rgba(0,0,0,.32); }
.status-hero::before { content:""; position:absolute; z-index:-1; inset:0; opacity:.36; background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size:42px 42px; mask-image:linear-gradient(90deg,#000,transparent 88%); }
.status-hero::after { content:""; position:absolute; z-index:-1; width:420px; height:420px; right:-205px; top:-235px; border:1px solid rgba(114,228,156,.24); border-radius:50%; box-shadow:0 0 0 55px rgba(114,228,156,.035),0 0 0 110px rgba(114,228,156,.018); }
.status-hero.degraded { border-color:rgba(255,92,101,.25); background:radial-gradient(circle at 82% 45%,rgba(255,92,101,.14),transparent 27%),linear-gradient(125deg,#1b1719,#141518 56%,#211719); }
.status-hero.checking { border-color:rgba(78,209,229,.2); }
.status-kicker { display:flex; align-items:center; gap:9px; color:var(--success); font:750 10px "IBM Plex Mono",monospace; letter-spacing:.14em; }
.status-hero.degraded .status-kicker { color:var(--danger); }
.status-hero.checking .status-kicker { color:var(--cyan); }
.status-kicker .icon { width:15px; height:15px; }
.status-hero h1 { max-width:720px; margin:17px 0 13px; color:#fff; font-size:clamp(40px,5.1vw,68px); line-height:1.02; letter-spacing:-.055em; }
.status-hero-copy > p { max-width:650px; margin:0; color:#aab4b8; font-size:15px; line-height:1.75; }
.status-hero-meta { display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.status-hero-meta span { display:flex; align-items:center; gap:7px; padding:8px 11px; border:1px solid rgba(255,255,255,.08); border-radius:999px; background:rgba(0,0,0,.18); color:#b8c1c5; font-size:10px; }
.status-hero-meta .icon { width:13px; height:13px; color:#d7e0e3; }
.status-orbit { position:relative; width:218px; height:218px; display:grid; place-content:center; justify-items:center; border:1px solid rgba(114,228,156,.22); border-radius:50%; background:radial-gradient(circle,rgba(114,228,156,.13),rgba(0,0,0,.08) 64%,transparent 65%); box-shadow:inset 0 0 50px rgba(114,228,156,.05),0 0 70px rgba(114,228,156,.06); }
.status-orbit::before,.status-orbit::after { content:""; position:absolute; inset:13px; border:1px dashed rgba(114,228,156,.2); border-radius:50%; animation:status-spin 18s linear infinite; }
.status-orbit::after { inset:34px; border-style:solid; border-color:rgba(114,228,156,.1); animation-direction:reverse; animation-duration:13s; }
.status-orbit > span { position:relative; z-index:1; width:56px; height:56px; display:grid; place-items:center; margin-bottom:11px; border:1px solid rgba(114,228,156,.28); border-radius:18px; background:#17211d; color:var(--success); box-shadow:0 12px 35px rgba(0,0,0,.32); }
.status-orbit > span i { position:absolute; right:5px; top:5px; width:7px; height:7px; border-radius:50%; background:currentColor; box-shadow:0 0 0 5px rgba(114,228,156,.08); }
.status-orbit .icon { width:25px; height:25px; }
.status-orbit b { position:relative; z-index:1; color:#fff; font:800 33px/1 "IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; }
.status-orbit small { position:relative; z-index:1; margin-top:7px; color:#87958c; font:650 8px "IBM Plex Mono",monospace; letter-spacing:.14em; }
.status-hero.degraded .status-orbit { border-color:rgba(255,92,101,.24); background:radial-gradient(circle,rgba(255,92,101,.12),rgba(0,0,0,.08) 64%,transparent 65%); }
.status-hero.degraded .status-orbit > span { color:var(--danger); border-color:rgba(255,92,101,.3); background:#24191c; }
@keyframes status-spin { to { transform:rotate(360deg); } }
.status-content.section { max-width:1184px; padding-top:28px; padding-bottom:0; }
.status-summary-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.status-summary-grid article { min-width:0; padding:20px 22px; border:1px solid var(--line); border-radius:17px; background:linear-gradient(145deg,rgba(255,255,255,.025),rgba(255,255,255,.008)),var(--panel); }
.status-summary-grid span,.status-summary-grid small { display:block; color:var(--soft); font-size:10px; }
.status-summary-grid strong { display:block; overflow:hidden; margin:10px 0 6px; color:#fff; font:750 24px/1.1 "Noto Sans Thai",sans-serif; font-variant-numeric:tabular-nums; text-overflow:ellipsis; white-space:nowrap; }
.status-summary-grid strong.operational { color:var(--success); }
.status-summary-grid strong.degraded { color:var(--danger); }
.status-summary-grid strong.checking { color:var(--cyan); }
.status-summary-grid strong em { color:#77818b; font-size:14px; font-style:normal; }
.status-section-head { display:flex; align-items:end; justify-content:space-between; gap:18px; margin:38px 0 15px; }
.status-section-head span { color:var(--acid); font:750 8px "IBM Plex Mono",monospace; letter-spacing:.15em; }
.status-section-head h2 { margin:5px 0 0; font-size:25px; letter-spacing:-.035em; }
.status-service-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.status-service-card { display:grid; grid-template-columns:48px minmax(0,1fr) auto; align-items:center; gap:14px; min-width:0; padding:19px; border:1px solid var(--line); border-radius:17px; background:linear-gradient(140deg,rgba(114,228,156,.025),transparent 55%),var(--panel); transition:border-color .2s ease,transform .2s ease; }
.status-service-card:hover { border-color:var(--line-strong); transform:translateY(-2px); }
.status-service-card.degraded { border-color:rgba(255,92,101,.25); background:linear-gradient(140deg,rgba(255,92,101,.06),transparent 55%),var(--panel); }
.status-service-card.maintenance { border-color:rgba(255,184,77,.22); }
.status-service-icon { width:48px; height:48px; display:grid; place-items:center; border:1px solid rgba(114,228,156,.14); border-radius:14px; background:rgba(114,228,156,.065); color:var(--success); }
.status-service-card.degraded .status-service-icon { border-color:rgba(255,92,101,.2); background:rgba(255,92,101,.07); color:var(--danger); }
.status-service-card.maintenance .status-service-icon { border-color:rgba(255,184,77,.2); background:rgba(255,184,77,.07); color:var(--warning); }
.status-service-icon .icon { width:21px; height:21px; }
.status-service-copy { min-width:0; }
.status-service-copy h3 { overflow:hidden; margin:0 0 4px; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.status-service-copy p { overflow:hidden; margin:0; color:#77828c; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.status-service-result { display:grid; justify-items:end; gap:6px; }
.status-service-result small { color:#86919b; font:650 9px "IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; }
.status-service-result small.slow { color:var(--warning); }
.status-chip { display:inline-flex; align-items:center; gap:6px; color:var(--success); font-size:10px; white-space:nowrap; }
.status-chip.degraded { color:var(--danger); }
.status-chip.maintenance { color:var(--warning); }
.status-chip.configured { color:var(--cyan); }
.status-chip.checking { color:var(--cyan); }
.status-chip::before { content:""; width:6px; height:6px; background:currentColor; border-radius:50%; box-shadow:0 0 0 4px color-mix(in srgb,currentColor 9%,transparent); }
.status-session-panel { display:grid; grid-template-columns:minmax(260px,.8fr) minmax(300px,1.2fr); align-items:center; gap:25px; margin-top:12px; padding:20px 22px; border:1px solid var(--line); border-radius:17px; background:var(--panel); }
.status-session-panel > div:first-child { display:flex; align-items:center; gap:13px; }
.status-session-icon { width:38px; height:38px; display:grid; place-items:center; flex:0 0 auto; border-radius:11px; background:rgba(216,255,79,.065); color:var(--acid); }
.status-session-icon .icon { width:17px; height:17px; }
.status-session-panel h3 { margin:0 0 3px; font-size:12px; }
.status-session-panel p { margin:0; color:#76818c; font-size:9px; }
.status-history-bars { display:flex; align-items:center; justify-content:flex-end; gap:4px; min-height:30px; }
.status-history-bars i { width:100%; max-width:16px; height:24px; border-radius:4px; background:var(--success); box-shadow:0 0 12px rgba(114,228,156,.12); }
.status-history-bars i.degraded { background:var(--danger); box-shadow:0 0 12px rgba(255,92,101,.12); }
.status-history-bars i.checking { background:#34414a; box-shadow:none; }
.status-monitor-note { display:grid; grid-template-columns:38px minmax(0,1fr) auto; align-items:center; gap:13px; margin-top:12px; padding:17px 20px; border:1px solid rgba(78,209,229,.16); border-radius:15px; background:rgba(78,209,229,.035); }
.status-monitor-note > .icon { width:19px; height:19px; color:var(--cyan); }
.status-monitor-note strong { display:block; color:#dce5e8; font-size:11px; }
.status-monitor-note p { margin:3px 0 0; color:#7f8d93; font-size:9px; }
.status-monitor-note > span { color:#8bbfc7; font:700 8px "IBM Plex Mono",monospace; letter-spacing:.12em; }

@media (max-width: 760px) {
  .status-page { padding-bottom:38px; }
  .status-hero { min-height:0; grid-template-columns:1fr; gap:28px; margin:12px 14px 0; padding:34px 24px; border-radius:22px; }
  .status-hero h1 { font-size:clamp(35px,11vw,50px); }
  .status-hero-copy > p { font-size:13px; }
  .status-hero-meta { display:grid; }
  .status-orbit { width:170px; height:170px; justify-self:center; }
  .status-content.section { padding:18px 14px 0; }
  .status-summary-grid { grid-template-columns:1fr; gap:8px; }
  .status-summary-grid article { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:3px 14px; padding:15px 17px; }
  .status-summary-grid strong { grid-column:2; grid-row:1 / 3; margin:0; font-size:20px; }
  .status-summary-grid small { grid-column:1; }
  .status-service-grid { grid-template-columns:1fr; gap:8px; }
  .status-section-head { margin-top:28px; }
  .status-section-head .btn { min-width:44px; padding-inline:12px; font-size:0; }
  .status-section-head .btn .icon { width:17px; height:17px; }
  .status-service-card { grid-template-columns:43px minmax(0,1fr); padding:15px; }
  .status-service-icon { width:43px; height:43px; }
  .status-service-result { grid-column:2; grid-row:2; display:flex; align-items:center; justify-content:space-between; width:100%; margin-top:3px; }
  .status-session-panel { grid-template-columns:1fr; gap:15px; padding:17px; }
  .status-history-bars { justify-content:flex-start; }
  .status-monitor-note { grid-template-columns:32px minmax(0,1fr); padding:15px; }
  .status-monitor-note > span { grid-column:2; }
}

@media (prefers-reduced-motion: reduce) {
  .status-orbit::before,.status-orbit::after { animation:none; }
}

/* Auth */
.auth-shell { min-height: 100vh; display: grid; grid-template-columns: 1.08fr .92fr; background: var(--ink); }
.auth-art { padding: 46px; display: flex; flex-direction: column; position: relative; overflow: hidden; border-right: 1px solid var(--line); }
.auth-art::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 72% 35%, rgba(216,255,79,.13), transparent 34%), linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: auto, 58px 58px, 58px 58px; }
.auth-art > * { position: relative; z-index: 1; }
.auth-quote { margin: auto 0 0; max-width: 690px; }
.auth-quote h1 { font-size: clamp(46px, 6vw, 80px); line-height: .98; letter-spacing: -.06em; margin: 0 0 24px; }
.auth-quote h1 span { color: var(--acid); }
.auth-quote p { color: var(--muted); max-width: 560px; line-height: 1.7; }
.auth-stats { display: flex; gap: 38px; margin-top: 38px; }
.auth-stats strong { display: block; font: 600 18px "IBM Plex Mono"; }
.auth-stats small { color: var(--soft); }
.auth-main { display: grid; place-items: center; padding: 34px; }
.auth-card { width: min(440px, 100%); }
.auth-back { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 38px; color: var(--soft); text-decoration: none; font-size: 13px; }
.auth-card h2 { margin: 0 0 8px; font-size: 31px; letter-spacing: -.04em; }
.auth-card > p { margin: 0 0 28px; color: var(--muted); line-height: 1.6; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; background: var(--panel); border-radius: 11px; margin-bottom: 24px; }
.auth-tabs button { height: 39px; border: 0; background: transparent; color: var(--soft); border-radius: 8px; cursor: pointer; font-weight: 600; }
.auth-tabs button.active { background: var(--panel-3); color: var(--text); }
.auth-notice { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 18px; padding: 12px 13px; border: 1px solid var(--line); border-radius: 11px; font-size: 11px; line-height: 1.55; }
.auth-notice .icon { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 1px; }
.discord-auth-button { min-height: 58px; display: grid; grid-template-columns: 38px minmax(0,1fr) 18px; align-items: center; gap: 11px; margin-bottom: 18px; padding: 9px 13px; border: 1px solid rgba(120,132,255,.5); border-radius: 12px; background: linear-gradient(135deg,rgba(88,101,242,.24),rgba(88,101,242,.11)); color: #f5f6ff; text-decoration: none; box-shadow: inset 0 1px rgba(255,255,255,.06),0 12px 28px rgba(28,34,105,.12); transition: .18s ease; }
.discord-auth-button:hover { border-color: rgba(145,154,255,.82); background: linear-gradient(135deg,rgba(88,101,242,.34),rgba(88,101,242,.16)); transform: translateY(-1px); box-shadow: inset 0 1px rgba(255,255,255,.08),0 14px 34px rgba(28,34,105,.2); }
.discord-auth-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: #5865f2; color: #fff; box-shadow: 0 8px 22px rgba(88,101,242,.28); }
.discord-auth-icon .icon { width: 20px; height: 20px; }
.discord-auth-button > span:nth-child(2) { min-width: 0; }
.discord-auth-button strong, .discord-auth-button small { display: block; }
.discord-auth-button strong { font-size: 12px; }
.discord-auth-button small { margin-top: 2px; color: #aeb4d4; font-size: 9px; }
.discord-auth-button > .icon { width: 16px; color: #aeb5ff; }
.auth-divider { display: flex; align-items: center; gap: 11px; margin: 0 0 18px; color: #6d737d; font-size: 9px; white-space: nowrap; }
.auth-divider::before, .auth-divider::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.form-group { margin-bottom: 16px; }
.form-label { display: block; margin-bottom: 7px; font-size: 12px; font-weight: 600; color: #c9ccd1; }
.form-hint { display: block; margin-top: 6px; color: var(--soft); font-size: 9px; line-height: 1.5; }
.form-control { width: 100%; height: 47px; border: 1px solid var(--line); background: var(--panel); color: var(--text); border-radius: 10px; padding: 0 14px; outline: none; transition: .2s; }
textarea.form-control { min-height: 110px; padding-top: 12px; resize: vertical; }
.form-control:focus { border-color: rgba(216,255,79,.55); box-shadow: 0 0 0 3px rgba(216,255,79,.07); }
.form-control::placeholder { color: #5b6068; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.forgot-link { display: block; margin: -4px 0 20px; text-align: right; color: var(--acid); text-decoration: none; font-size: 12px; }
.auth-help-links { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: -4px 0 20px; }
.auth-help-links a, .auth-help-links button { border: 0; padding: 0; background: transparent; color: var(--acid); text-decoration: none; font-size: 12px; cursor: pointer; }
.auth-help-links button { color: var(--muted); }
.auth-help-links button:hover { color: var(--text); }
.turnstile-field { margin: 4px 0 18px; }
.turnstile-field #turnstile-widget { min-height: 65px; }
.turnstile-status { min-height: 16px; margin-top: 6px; color: #72e6a5; font-size: 11px; text-align: center; }
.turnstile-status.error { color: #ff6b78; font-weight: 700; }
.turnstile-field small { display: block; margin-top: 7px; color: var(--soft); font-size: 9px; text-align: center; }
.auth-card .btn-primary { width: 100%; }
.auth-foot { text-align: center; margin-top: 23px; color: var(--soft); font-size: 11px; line-height: 1.6; }

/* App shell */
.app-shell { height: 100vh; display: grid; grid-template-columns: 260px minmax(0, 1fr); background: #0c0e11; overflow: hidden; }
.sidebar { background: #101216; border-right: 1px solid var(--line); padding: 18px 14px; display: flex; flex-direction: column; min-height: 0; }
.sidebar .brand { padding: 4px 7px 19px; }
.sidebar .brand-copy { font-size: 14px; }
.balance-card { background: var(--acid); color: #10110d; border: 1px solid rgba(255,255,255,.42); border-radius: 16px; padding: 14px 15px; margin: 3px 2px 18px; position: relative; overflow: hidden; box-shadow: inset 0 1px rgba(255,255,255,.36), 0 10px 25px rgba(169,215,25,.08); }
.balance-card::before { content: ""; position: absolute; width: 112px; height: 112px; right: -52px; top: -56px; border: 20px solid rgba(16,17,13,.055); border-radius: 50%; pointer-events: none; }
.balance-card::after { content: ""; position: absolute; width: 54px; height: 54px; right: -25px; bottom: -30px; border: 1px solid rgba(16,17,13,.1); border-radius: 50%; pointer-events: none; }
.balance-card-head { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font: 700 8px "IBM Plex Mono"; letter-spacing: .11em; }
.balance-card-head > span:first-child { opacity: .56; }
.balance-active { display: inline-flex; align-items: center; gap: 5px; padding: 3px 6px; border: 1px solid rgba(16,17,13,.13); border-radius: 999px; background: rgba(255,255,255,.24); font-size: 7px; letter-spacing: .08em; }
.balance-active i { width: 5px; height: 5px; border-radius: 50%; background: #0c791f; box-shadow: 0 0 0 3px rgba(12,121,31,.1); }
.balance-card > small { position: relative; z-index: 1; display: block; opacity: .62; font-size: 9px; font-weight: 700; }
.balance-points { position: relative; z-index: 1; display: block; margin: 1px 0 6px; font: 700 27px "IBM Plex Mono"; letter-spacing: -.045em; }
.balance-chat { position: relative; z-index: 1; display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.balance-infinity { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid rgba(16,17,13,.14); border-radius: 11px; background: rgba(255,255,255,.25); font: 500 24px/1 "IBM Plex Mono"; }
.balance-chat small { display: block; margin-bottom: -1px; color: rgba(16,17,13,.58); font-size: 8px; font-weight: 700; }
.balance-chat strong { display: block; font-size: 17px; line-height: 1.25; letter-spacing: -.025em; }
.balance-api { position: relative; z-index: 1; display: flex; align-items: baseline; justify-content: space-between; padding: 8px 9px; border: 1px solid rgba(16,17,13,.12); border-radius: 10px; background: rgba(16,17,13,.075); }
.balance-api span { color: rgba(16,17,13,.62); font-size: 8px; font-weight: 700; }
.balance-api strong { font: 700 16px/1 "IBM Plex Mono"; letter-spacing: -.03em; }
.balance-card-foot { position: relative; z-index: 1; display: flex; align-items: center; gap: 6px; margin-top: 8px; color: rgba(16,17,13,.58); font-size: 8px; white-space: nowrap; }
.balance-card-foot i { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .65; }
.side-nav { min-height: 0; overflow-y: auto; padding-right: 3px; }
.nav-group { margin-bottom: 18px; }
.nav-group-label { padding: 0 10px 7px; color: #565c65; font: 600 9px "IBM Plex Mono"; letter-spacing: .12em; text-transform: uppercase; }
.side-link { width: 100%; border: 0; background: transparent; color: #8c929c; padding: 9px 10px; margin-bottom: 2px; display: flex; align-items: center; gap: 10px; border-radius: 9px; cursor: pointer; text-align: left; font-size: 13px; }
.side-link:hover { background: rgba(255,255,255,.045); color: var(--text); }
.side-link.active { background: var(--panel-3); color: var(--text); }
.side-link.active .icon { color: var(--acid); }
.side-link .badge { margin-left: auto; background: rgba(255,202,99,.12); color: var(--warning); min-width: 19px; height: 19px; padding: 0 5px; border-radius: 6px; display: grid; place-items: center; font: 700 9px "IBM Plex Mono"; }
.sidebar-user { margin-top: auto; padding: 12px 7px 2px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 10px; }
.avatar { width: 36px; height: 36px; border-radius: 10px; background: var(--coral); color: #12100f; display: grid; place-items: center; font-weight: 800; flex-shrink: 0; }
.avatar img, .table-avatar img, .leader-avatar img, .profile-avatar-preview img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: inherit; }
.avatar.has-image { overflow: hidden; background: var(--panel-3); box-shadow: 0 0 0 1px rgba(255,255,255,.08); }
.user-meta { min-width: 0; flex: 1; }
.user-meta strong, .user-meta small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-meta strong { font-size: 12px; }
.user-meta small { color: var(--soft); font-size: 9px; margin-top: 2px; }
.logout-btn { border: 0; background: transparent; color: var(--soft); padding: 6px; cursor: pointer; }
.app-main { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.app-topbar { position: relative; z-index: 60; height: 68px; padding: 0 26px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-shrink: 0; overflow: visible; background: rgba(12,14,17,.88); }
.app-topbar-title h1 { margin: 0; font-size: 17px; letter-spacing: -.02em; }
.app-topbar-title p { margin: 2px 0 0; color: var(--soft); font-size: 10px; }
.topbar-actions { display: flex; align-items: center; gap: 9px; }
.mobile-menu { display: none; }
.model-pill { height: 34px; padding: 0 11px; display: flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); font: 10px "IBM Plex Mono"; }
.model-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px rgba(114,228,156,.08); }
.page-content { flex: 1; min-height: 0; overflow-y: auto; padding: 27px; }
.page-content.flush { padding: 0; overflow: hidden; }
.content-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.content-head h2 { margin: 0 0 5px; font-size: 25px; letter-spacing: -.035em; }
.content-head p { margin: 0; color: var(--muted); font-size: 12px; }
.content-actions { display: flex; gap: 9px; }

.cards-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 13px; }
.metric-card { background: var(--panel); border: 1px solid var(--line); border-radius: 15px; padding: 18px; min-width: 0; }
.metric-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.metric-icon { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 10px; background: rgba(216,255,79,.08); color: var(--acid); }
.metric-delta { color: var(--success); font: 600 9px "IBM Plex Mono"; }
.metric-card strong { display: block; margin-top: 20px; font: 600 25px "IBM Plex Mono"; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.metric-card > span { color: var(--soft); font-size: 10px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 15px; }
.panel-head { min-height: 56px; padding: 0 18px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.panel-head h3 { margin: 0; font-size: 14px; }
.panel-head p { margin: 2px 0 0; color: var(--soft); font-size: 10px; }
.panel-body { padding: 18px; }
.dashboard-grid { margin-top: 13px; display: grid; grid-template-columns: 1.45fr .85fr; gap: 13px; }
.chart { height: 240px; display: flex; align-items: end; gap: 9px; padding-top: 25px; }
.bar-wrap { height: 100%; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; }
.bar { background: var(--acid); opacity: .86; min-height: 4px; border-radius: 4px 4px 1px 1px; transition: .2s; }
.bar:hover { opacity: 1; }
.bar-wrap span { color: var(--soft); font: 8px "IBM Plex Mono"; text-align: center; }
.activity-list { display: grid; }
.activity { display: flex; align-items: center; gap: 11px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.activity:last-child { border: 0; }
.activity-icon { width: 33px; height: 33px; display: grid; place-items: center; border-radius: 9px; background: var(--panel-3); color: var(--muted); flex-shrink: 0; }
.activity strong { display: block; font-size: 11px; }
.activity span { display: block; color: var(--soft); font-size: 9px; margin-top: 2px; }

/* Admin analytics */
.admin-head { align-items: center; }
.admin-eyebrow { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 7px; color: var(--acid); font: 600 8px "IBM Plex Mono"; letter-spacing: .13em; }
.admin-eyebrow .icon { width: 13px; height: 13px; }
.admin-metrics { gap: 11px; }
.admin-finance-panel { margin-top: 12px; overflow: hidden; background: radial-gradient(circle at 8% 0,rgba(216,255,79,.08),transparent 31%),linear-gradient(145deg,rgba(255,255,255,.018),transparent 55%),var(--panel); }
.admin-finance-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 17px 19px; border-bottom: 1px solid var(--line); }
.admin-finance-head h3 { margin: 3px 0 2px; font-size: 15px; }
.admin-finance-head p { margin: 0; color: var(--soft); font-size: 9px; }
.admin-finance-eyebrow { display: inline-flex; align-items: center; gap: 6px; color: var(--acid); font: 600 8px "IBM Plex Mono"; letter-spacing: .12em; }
.admin-finance-eyebrow .icon { width: 13px; height: 13px; }
.admin-finance-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1px; background: var(--line); }
.finance-tile { min-width: 0; display: flex; align-items: flex-start; gap: 12px; padding: 18px; background: #15181d; }
.finance-tile.finance-balance { background: linear-gradient(145deg,rgba(216,255,79,.095),rgba(216,255,79,.025)),#15181d; }
.finance-tile-icon { width: 36px; height: 36px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 10px; background: rgba(216,255,79,.09); color: var(--acid); }
.finance-tile-icon.cyan { background: rgba(94,231,231,.08); color: var(--cyan); }
.finance-tile-icon.warning { background: rgba(255,202,99,.08); color: var(--warning); }
.finance-tile-icon.success { background: rgba(114,228,156,.08); color: var(--success); }
.finance-tile-icon .icon { width: 17px; height: 17px; }
.finance-tile div { min-width: 0; }
.finance-tile small,.finance-tile strong,.finance-tile p { display: block; }
.finance-tile small { color: var(--soft); font-size: 8px; }
.finance-tile strong { margin-top: 6px; font: 650 20px "IBM Plex Mono"; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.finance-tile strong.negative { color: var(--danger); }
.finance-tile p { margin: 5px 0 0; color: #89919c; font-size: 8px; line-height: 1.45; }
.admin-finance-foot { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 18px; padding: 12px 19px; border-top: 1px solid var(--line); }
.admin-finance-foot > span { display: inline-flex; align-items: center; gap: 7px; color: var(--text); font-size: 9px; font-weight: 650; }
.admin-finance-foot > span .icon { width: 14px; color: var(--acid); }
.admin-finance-foot small { color: var(--soft); font-size: 8px; line-height: 1.5; }
.admin-metric { --metric-accent: var(--acid); position: relative; overflow: hidden; min-height: 154px; padding: 16px 17px; background: linear-gradient(145deg,rgba(255,255,255,.02),transparent 64%),var(--panel); }
.admin-metric::after { content: ""; position: absolute; right: -34px; bottom: -45px; width: 125px; height: 125px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb,var(--metric-accent) 12%,transparent), transparent 68%); pointer-events: none; }
.admin-metric.cyan { --metric-accent: var(--cyan); }
.admin-metric.violet { --metric-accent: #a98cff; }
.admin-metric.gold { --metric-accent: var(--warning); }
.admin-metric .metric-icon { background: color-mix(in srgb,var(--metric-accent) 10%,transparent); color: var(--metric-accent); }
.admin-metric > strong { margin-top: 16px; font-size: 24px; }
.admin-metric > span:not(.metric-delta) { display: block; margin-top: 1px; color: #a2a8b1; font-size: 9px; }
.admin-metric > small { display: block; margin-top: 9px; color: var(--soft); font-size: 8px; }
.metric-delta { display: inline-flex; align-items: center; gap: 4px; padding: 5px 7px; border-radius: 99px; background: rgba(114,228,156,.07); }
.metric-delta .icon { width: 11px; height: 11px; }
.metric-delta.down { color: var(--danger); background: rgba(255,92,101,.07); }
.metric-delta.flat { color: var(--soft); background: rgba(255,255,255,.04); }
.admin-dashboard-grid { display: grid; grid-template-columns: minmax(0,1.7fr) minmax(300px,.62fr); align-items: stretch; gap: 12px; margin-top: 12px; }
.admin-usage-panel { min-width: 0; overflow: hidden; padding: 0; background: radial-gradient(circle at 46% 108%,rgba(216,255,79,.055),transparent 42%),var(--panel); }
.admin-panel-head { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 17px; border-bottom: 1px solid var(--line); }
.admin-panel-head h3 { margin: 0 0 3px; font-size: 13px; }
.admin-panel-head p { margin: 0; color: var(--soft); font-size: 9px; }
.admin-panel-head > .icon { color: var(--soft); }
.chart-filters { display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 10px; background: rgba(255,255,255,.035); }
.chart-filter { min-height: 28px; padding: 0 9px; border: 0; border-radius: 7px; background: transparent; color: var(--soft); font-size: 8px; cursor: pointer; }
.chart-filter:hover { color: var(--text); }
.chart-filter.active { background: var(--panel-3); color: var(--acid); box-shadow: 0 3px 10px rgba(0,0,0,.18); }
.admin-chart-summary { display: flex; align-items: center; gap: 24px; padding: 15px 18px 0; }
.admin-chart-summary div span, .admin-chart-summary div strong { display: block; }
.admin-chart-summary div span { color: var(--soft); font-size: 8px; }
.admin-chart-summary div strong { margin-top: 2px; font: 600 16px "IBM Plex Mono"; }
.live-indicator { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: var(--success); font: 600 7px "IBM Plex Mono"; letter-spacing: .08em; }
.live-indicator i { width: 6px; height: 6px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px rgba(114,228,156,.08),0 0 12px rgba(114,228,156,.35); }
.admin-chart-wrap { min-width: 0; height: 310px; padding: 2px 8px 7px 3px; }
.admin-area-chart { width: 100%; height: 100%; overflow: visible; }
.admin-chart-grid { stroke: rgba(255,255,255,.06); stroke-width: 1; stroke-dasharray: 3 6; vector-effect: non-scaling-stroke; }
.admin-chart-y, .admin-chart-x { fill: #606873; font: 8px "IBM Plex Mono"; }
.admin-chart-area { fill: url(#admin-chart-fill); }
.admin-chart-line { fill: none; stroke: var(--acid); stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; filter: url(#admin-chart-glow); vector-effect: non-scaling-stroke; }
.admin-chart-dot { fill: var(--panel); stroke: var(--acid); stroke-width: 1.7; vector-effect: non-scaling-stroke; transition: .15s; }
.admin-chart-dot:hover { r: 5; fill: var(--acid); }
.admin-chart-empty text:first-child { fill: #9ca3ad; font: 600 12px "Noto Sans Thai"; }
.admin-chart-empty text:last-child { fill: #636a74; font: 9px "Noto Sans Thai"; }
.admin-side-stack { display: grid; grid-template-rows: auto 1fr; gap: 12px; min-width: 0; }
.admin-audience-panel, .admin-pulse-panel { overflow: hidden; }
.donut-layout { display: grid; grid-template-columns: 132px minmax(0,1fr); align-items: center; gap: 17px; padding: 18px 17px 20px; }
.user-donut { width: 126px; height: 126px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--donut)); box-shadow: 0 0 0 1px rgba(255,255,255,.045),0 16px 35px rgba(0,0,0,.2); }
.user-donut > div { width: 82px; height: 82px; display: grid; place-content: center; border-radius: 50%; background: var(--panel); text-align: center; box-shadow: inset 0 0 0 1px var(--line); }
.user-donut strong { font: 600 20px "IBM Plex Mono"; }
.user-donut span { color: var(--soft); font-size: 8px; }
.donut-legend { display: grid; gap: 9px; min-width: 0; }
.donut-legend-row { display: grid; grid-template-columns: 7px minmax(0,1fr) auto; align-items: center; gap: 7px; color: var(--muted); font-size: 8px; }
.donut-legend-row strong { color: var(--text); font: 600 9px "IBM Plex Mono"; }
.donut-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dot); box-shadow: 0 0 9px color-mix(in srgb,var(--dot) 45%,transparent); }
.admin-pulse-list { display: grid; padding: 6px 16px 11px; }
.admin-pulse-list > div { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.admin-pulse-list > div:last-child { border: 0; }
.pulse-icon { width: 32px; height: 32px; display: grid; place-items: center; flex-shrink: 0; border-radius: 9px; background: rgba(216,255,79,.07); color: var(--acid); }
.pulse-icon.warning { background: rgba(255,202,99,.07); color: var(--warning); }
.pulse-icon.success { background: rgba(114,228,156,.07); color: var(--success); }
.pulse-icon .icon { width: 15px; height: 15px; }
.admin-pulse-list p { margin: 0; min-width: 0; }
.admin-pulse-list strong, .admin-pulse-list span { display: block; }
.admin-pulse-list strong { font-size: 11px; }
.admin-pulse-list span { margin-top: 2px; color: var(--soft); font-size: 8px; }

/* Chat */
.app-shell.is-chat .app-topbar { height: 72px; padding-inline: 28px; background: rgba(10,12,15,.84); backdrop-filter: blur(18px); }
.app-shell.is-chat .app-topbar-title h1 { font-size: 18px; }
.app-shell.is-chat .app-topbar-title p { margin-top: 3px; color: #7c838e; }
.app-shell.is-chat .model-pill { height: 36px; border-radius: 999px; padding: 0 13px; background: rgba(255,255,255,.025); color: #cbd0d6; }
.chat-layout { height: 100%; display: grid; grid-template-columns: 248px minmax(0, 1fr); background: #0b0d10; }
.chat-history { position: relative; border-right: 1px solid rgba(255,255,255,.075); background: linear-gradient(180deg,#111419 0%,#0f1115 100%); padding: 18px 15px; overflow-y: auto; }
.chat-history::before { content: ""; position: absolute; inset: 0 0 auto; height: 150px; pointer-events: none; background: radial-gradient(circle at 30% 0,rgba(216,255,79,.055),transparent 70%); }
.new-chat { position: relative; width: 100%; min-height: 46px; margin-bottom: 22px; border: 1px solid rgba(216,255,79,.19); border-radius: 13px; background: rgba(216,255,79,.075); color: #efffc1; box-shadow: inset 0 1px rgba(255,255,255,.04); }
.new-chat:hover { background: rgba(216,255,79,.12); border-color: rgba(216,255,79,.34); }
.new-chat .icon { color: var(--acid); }
.history-label { position: relative; color: #737a85; font: 600 9px "IBM Plex Mono"; letter-spacing: .12em; text-transform: uppercase; padding: 0 7px 9px; display: flex; align-items: center; justify-content: space-between; }
.history-label small { min-width: 20px; height: 20px; padding: 0 6px; display: grid; place-items: center; border-radius: 7px; background: rgba(255,255,255,.05); color: #89909a; font-size: 8px; }
.history-row { position: relative; margin-bottom: 4px; border-radius: 12px; }
.history-item { position: relative; width: 100%; border: 1px solid transparent; background: transparent; color: var(--muted); padding: 12px 40px 11px 11px; border-radius: 12px; cursor: pointer; text-align: left; transition: .18s ease; }
.history-item:hover { background: rgba(255,255,255,.035); color: var(--text); }
.history-item.active { background: linear-gradient(135deg,rgba(255,255,255,.075),rgba(255,255,255,.035)); border-color: rgba(255,255,255,.06); color: var(--text); box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.history-item.active::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 2px; border-radius: 3px; background: var(--acid); box-shadow: 0 0 10px rgba(216,255,79,.38); }
.history-item strong { display: block; font-size: 12px; line-height: 1.45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.history-item span { display: block; font-size: 9px; color: #606772; margin-top: 4px; }
.history-delete { position: absolute; z-index: 2; right: 7px; top: 50%; width: 29px; height: 29px; padding: 0; display: grid; place-items: center; transform: translateY(-50%); border: 1px solid transparent; border-radius: 8px; background: transparent; color: #6a717b; cursor: pointer; opacity: 0; transition: .16s ease; }
.history-delete .icon { width: 14px; height: 14px; }
.history-row:hover .history-delete, .history-row.active .history-delete { opacity: 1; }
.history-delete:hover { border-color: rgba(255,77,95,.2); background: rgba(255,77,95,.09); color: #ff6877; }
.history-empty { margin: 8px 6px; padding: 24px 12px; border: 1px dashed rgba(255,255,255,.08); border-radius: 12px; color: #777e88; text-align: center; font-size: 11px; line-height: 1.7; }
.history-empty span { color: #555c66; font-size: 9px; }
.chat-workspace { position: relative; isolation: isolate; min-width: 0; display: flex; flex-direction: column; min-height: 0; background: linear-gradient(180deg,#0c0f12 0%,#0b0d10 100%); }
.chat-workspace::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% -15%,rgba(216,255,79,.045),transparent 34%),linear-gradient(rgba(255,255,255,.012) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.012) 1px,transparent 1px); background-size: auto,64px 64px,64px 64px; mask-image: linear-gradient(to bottom,#000,transparent 72%); }
.chat-messages { position: relative; z-index: 1; flex: 1; min-height: 0; overflow-y: auto; scroll-behavior: smooth; padding: 42px max(32px,calc((100% - 940px)/2)) 30px; }
.chat-empty { min-height: 100%; display: grid; place-content: center; text-align: center; padding: 44px; }
.chat-empty .empty-mark { width: 68px; height: 68px; margin: 0 auto 23px; display: grid; place-items: center; border: 1px solid rgba(216,255,79,.22); background: linear-gradient(145deg,rgba(216,255,79,.12),rgba(216,255,79,.035)); color: var(--acid); border-radius: 21px; transform: rotate(-3deg); box-shadow: 0 18px 50px rgba(0,0,0,.24),0 0 35px rgba(216,255,79,.06); }
.chat-empty h2 { margin: 0; font-size: 32px; letter-spacing: -.045em; }
.chat-empty > p { color: #858c96; margin: 10px 0 27px; font-size: 14px; }
.prompt-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; max-width: 700px; }
.prompt-chip { border: 1px solid rgba(255,255,255,.09); background: rgba(21,24,29,.8); color: #9ca2ab; border-radius: 11px; padding: 10px 14px; cursor: pointer; font-size: 12px; transition: .18s ease; }
.prompt-chip:hover { color: var(--text); border-color: rgba(216,255,79,.24); background: rgba(216,255,79,.055); transform: translateY(-1px); }
.message { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 34px; animation: message-in .24s ease both; }
.message.user { flex-direction: row-reverse; }
@keyframes message-in { from { opacity: 0; transform: translateY(7px); } }
.message-avatar { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid rgba(216,255,79,.14); border-radius: 11px; background: linear-gradient(145deg,#222831,#181c22); color: var(--acid); font: 700 9px "IBM Plex Mono"; flex-shrink: 0; box-shadow: 0 9px 24px rgba(0,0,0,.22); }
.message.user .message-avatar { border-color: rgba(255,118,87,.22); background: rgba(255,118,87,.11); color: #ff947c; }
.message-body { max-width: min(84%,760px); min-width: 0; }
.message.user .message-body { max-width: min(74%,620px); }
.message-meta { color: #747c87; font: 600 8px "IBM Plex Mono"; letter-spacing: .09em; margin: 0 0 7px 4px; }
.message.user .message-meta { text-align: right; margin-inline: 0 4px; color: #8c756f; }
.message-bubble { background: linear-gradient(145deg,rgba(24,28,34,.97),rgba(20,23,28,.97)); border: 1px solid rgba(255,255,255,.09); border-radius: 5px 17px 17px 17px; padding: 16px 18px; color: #edf0f2; box-shadow: 0 13px 38px rgba(0,0,0,.16),inset 0 1px rgba(255,255,255,.018); font-size: 14px; line-height: 1.82; white-space: normal; word-break: break-word; }
.message-bubble p { margin: 0 0 12px; }
.message-bubble p:last-child { margin-bottom: 0; }
.message-bubble h2, .message-bubble h3, .message-bubble h4, .message-bubble h5 { margin: 19px 0 8px; color: #fff; line-height: 1.4; letter-spacing: -.015em; }
.message-bubble h2:first-child, .message-bubble h3:first-child, .message-bubble h4:first-child, .message-bubble h5:first-child { margin-top: 0; }
.message-bubble h2 { font-size: 20px; }
.message-bubble h3 { font-size: 18px; }
.message-bubble h4 { font-size: 16px; }
.message-bubble h5 { font-size: 15px; }
.message-bubble ul, .message-bubble ol { margin: 8px 0 14px; padding-left: 24px; }
.message-bubble li { margin: 5px 0; padding-left: 3px; }
.message-bubble li::marker { color: var(--acid); font-weight: 700; }
.message-bubble blockquote { margin: 12px 0; padding: 9px 13px; border-left: 3px solid var(--acid); background: rgba(216,255,79,.045); color: #cbd1d7; border-radius: 0 9px 9px 0; }
.message-bubble hr { height: 1px; margin: 18px 0; border: 0; background: rgba(255,255,255,.11); }
.message-bubble del { color: #8e96a0; }
.message-bubble strong { color: #fff; font-weight: 750; }
.message-bubble code { padding: 2px 6px; border: 1px solid rgba(216,255,79,.13); border-radius: 6px; background: rgba(216,255,79,.055); color: #e4ff85; font: 12px/1.6 "IBM Plex Mono",monospace; }
.message-bubble pre { overflow-x: auto; margin: 14px 0 2px; padding: 15px; border: 1px solid rgba(255,255,255,.08); border-radius: 11px; background: #0b0d10; }
.message-bubble pre[data-language]::before { content: attr(data-language); display: block; margin: -4px 0 8px; color: #89929d; font: 9px "IBM Plex Mono",monospace; letter-spacing: .08em; text-transform: uppercase; }
.message-bubble pre code { padding: 0; border: 0; background: transparent; color: #d9dee4; }
.message.user .message-bubble { background: linear-gradient(135deg,#dcff64,#cfff3f); color: #171a0d; border-color: rgba(216,255,79,.78); border-radius: 17px 5px 17px 17px; box-shadow: 0 12px 34px rgba(185,229,49,.11); }
.message.user .message-bubble strong { color: #0d0f07; }
.message-images { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-bottom:12px; }
.message-images:has(img:only-child) { grid-template-columns:minmax(0,360px); }
.message-images img { display:block; width:100%; max-height:360px; border:1px solid rgba(255,255,255,.12); border-radius:12px; background:#0c0f12; object-fit:contain; }
.message.user .message-images img { border-color:rgba(0,0,0,.16); background:rgba(0,0,0,.08); }
.typing-cursor::after { content: ""; display: inline-block; width: 6px; height: 16px; background: var(--acid); vertical-align: -3px; margin-left: 4px; animation: blink .7s infinite; }
@keyframes blink { 50% { opacity: 0; } }
.chat-composer { position: relative; z-index: 2; padding: 18px max(32px,calc((100% - 940px)/2)) 16px; background: linear-gradient(to bottom,transparent,rgba(11,13,16,.93) 30%); }
.composer-box { border: 1px solid rgba(255,255,255,.14); background: rgba(23,27,32,.96); border-radius: 18px; padding: 13px 12px 10px 17px; box-shadow: 0 18px 55px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.025); transition: border-color .18s,box-shadow .18s,transform .18s; }
.composer-box:focus-within { border-color: rgba(216,255,79,.42); box-shadow: 0 18px 55px rgba(0,0,0,.34),0 0 0 3px rgba(216,255,79,.045); transform: translateY(-1px); }
.composer-box textarea { width: 100%; min-height: 48px; max-height: 150px; border: 0; outline: 0; resize: none; background: transparent; color: var(--text); font-size: 14px; line-height: 1.7; }
.composer-box textarea::placeholder { color: #68707a; }
.composer-attachments { display:flex; gap:9px; overflow-x:auto; margin:0 0 10px; padding:1px 1px 4px; scrollbar-width:thin; }
.composer-attachment { position:relative; width:74px; height:62px; flex:0 0 auto; overflow:visible; border:1px solid rgba(216,255,79,.22); border-radius:11px; background:#0c0f12; }
.composer-attachment img { width:100%; height:100%; display:block; border-radius:10px; object-fit:cover; }
.composer-attachment button { position:absolute; top:-7px; right:-7px; width:22px; height:22px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.18); border-radius:50%; background:#242a31; color:#fff; cursor:pointer; box-shadow:0 5px 14px rgba(0,0,0,.35); }
.composer-attachment button:hover { background:#ff4d5f; }
.composer-attachment button .icon { width:12px; height:12px; }
.composer-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.composer-tools { min-width:0; display:flex; align-items:center; gap:9px; }
.composer-attach-button { width:34px; height:34px; display:grid; place-items:center; flex:0 0 auto; border:1px solid rgba(255,255,255,.1); border-radius:9px; background:rgba(255,255,255,.035); color:#aab2bc; cursor:pointer; transition:.16s ease; }
.composer-attach-button:hover { border-color:rgba(216,255,79,.28); background:rgba(216,255,79,.07); color:var(--acid); }
.composer-attach-button:disabled,.send-button:disabled { opacity:.45; cursor:not-allowed; transform:none; }
.composer-attach-button .icon { width:16px; height:16px; }
.composer-note { color: #666e78; font: 8px "IBM Plex Mono"; letter-spacing: .025em; }
.send-button { width: 40px; height: 40px; border-radius: 11px; border: 0; background: #ff4d5f; color: #fff; cursor: pointer; display: grid; place-items: center; box-shadow: 0 9px 26px rgba(255,77,95,.24); transition: .18s ease; }
.send-button:hover { background: #ff6877; box-shadow: 0 11px 30px rgba(255,77,95,.32); transform: translateY(-1px) scale(1.02); }
.send-button:active { transform: scale(.97); }
.send-button.is-loading .icon { animation: send-spin .8s linear infinite; }
.stop-button { background: #ff4d5f; box-shadow: 0 9px 26px rgba(255,77,95,.3),0 0 0 3px rgba(255,77,95,.07); }
.stop-button .icon { width: 13px; height: 13px; fill: currentColor; stroke-width: 1.5; }
.stop-button:hover { background: #ff6473; }
@keyframes send-spin { to { transform: rotate(360deg); } }
.composer-disclaimer { margin: 7px 0 0; color: #555c66; text-align: center; font-size: 9px; }

/* Tables and account pages */
.table-panel { overflow: hidden; }
.table-scroll { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; min-width: 720px; }
.data-table th, .data-table td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--line); font-size: 11px; vertical-align: middle; }
.data-table th { color: var(--soft); font: 500 9px "IBM Plex Mono"; letter-spacing: .05em; text-transform: uppercase; }
.data-table tbody tr:hover { background: rgba(255,255,255,.018); }
.data-table tr:last-child td { border-bottom: 0; }
.table-user { display: flex; align-items: center; gap: 9px; }
.table-avatar { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--panel-3); color: var(--acid); font-weight: 700; }
.table-avatar.has-image { overflow: hidden; border: 1px solid rgba(255,255,255,.09); }
.table-user strong, .table-user small { display: block; }
.table-user small { color: var(--soft); font-size: 8px; }
.users-monitor-actions { display: flex; align-items: center; gap: 9px; }
.auto-refresh-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 12px; border: 1px solid rgba(114,228,156,.18); border-radius: 10px; background: rgba(114,228,156,.055); color: var(--success); font: 600 8px "IBM Plex Mono"; letter-spacing: .06em; }
.auto-refresh-chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px rgba(114,228,156,.08), 0 0 12px rgba(114,228,156,.35); animation: monitor-pulse 1.8s ease-in-out infinite; }
@keyframes monitor-pulse { 50% { opacity: .45; transform: scale(.78); } }
.usage-total { display: block; }
.usage-spike-row { background: linear-gradient(90deg,rgba(255,92,101,.075),transparent 58%); }
.usage-spike-row:hover { background: linear-gradient(90deg,rgba(255,92,101,.11),rgba(255,255,255,.018) 70%); }
.usage-spike-note { display: flex; align-items: center; gap: 4px; margin-top: 4px; color: var(--danger); font: 600 8px "IBM Plex Mono"; white-space: nowrap; }
.usage-spike-note .icon { width: 11px; height: 11px; }
.member-rank-toolbar { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 18px; margin-bottom: 13px; padding: 14px 16px; border: 1px solid rgba(216,255,79,.13); border-radius: 14px; background: linear-gradient(120deg,rgba(216,255,79,.055),rgba(255,255,255,.018)); }
.member-rank-toolbar-copy { display: flex; align-items: center; gap: 10px; min-width: 225px; }
.member-rank-toolbar-copy > span { width: 36px; height: 36px; display: grid; place-items: center; flex-shrink: 0; border-radius: 10px; background: rgba(216,255,79,.1); color: var(--acid); }
.member-rank-toolbar-copy > span .icon { width: 17px; height: 17px; }
.member-rank-toolbar-copy strong,.member-rank-toolbar-copy small { display: block; }
.member-rank-toolbar-copy strong { font-size: 12px; }
.member-rank-toolbar-copy small { margin-top: 2px; color: var(--soft); font-size: 9px; }
.member-rank-filters { display: flex; justify-content: flex-end; gap: 6px; min-width: 0; overflow-x: auto; scrollbar-width: thin; }
.member-rank-filter { min-height: 36px; display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); color: var(--muted); cursor: pointer; }
.member-rank-filter span { font-size: 10px; }
.member-rank-filter strong { min-width: 20px; padding: 3px 5px; border-radius: 6px; background: rgba(255,255,255,.05); color: var(--soft); font: 600 8px "IBM Plex Mono"; }
.member-rank-filter:hover { border-color: var(--line-strong); color: var(--text); }
.member-rank-filter.active { border-color: rgba(216,255,79,.45); background: rgba(216,255,79,.1); color: var(--acid); box-shadow: inset 0 0 0 1px rgba(216,255,79,.06); }
.member-rank-filter.active strong { background: var(--acid); color: #10120c; }
.users-rank-table { min-width: 1240px; }
.user-manage-actions { min-width: 340px; }
.user-manage-actions .btn { white-space: nowrap; }
.member-rank { --rank-color: #858d98; display: flex; align-items: center; gap: 8px; min-width: 132px; }
.member-rank > span { width: 32px; height: 32px; display: grid; place-items: center; flex-shrink: 0; border: 1px solid color-mix(in srgb,var(--rank-color) 35%,transparent); border-radius: 9px; background: color-mix(in srgb,var(--rank-color) 10%,transparent); color: var(--rank-color); }
.member-rank > span .icon { width: 15px; height: 15px; }
.member-rank strong,.member-rank small { display: block; }
.member-rank strong { color: var(--rank-color); font-size: 11px; }
.member-rank small { margin-top: 2px; color: var(--soft); font-size: 8px; white-space: nowrap; }
.member-rank.rank-basic { --rank-color: #8fd7ff; }
.member-rank.rank-starter { --rank-color: #b6e77b; }
.member-rank.rank-pro { --rank-color: #c89cff; }
.member-rank.rank-turbo { --rank-color: #ffb35f; }
.member-rank.rank-developer { --rank-color: #ff7082; }
.member-rank.rank-unlimited { --rank-color: var(--acid); }
.users-filter-empty { min-height: 130px; display: grid; place-items: center; align-content: center; gap: 9px; color: var(--soft); }
.users-filter-empty .icon { width: 25px; height: 25px; }
.tag { display: inline-flex; align-items: center; gap: 5px; min-height: 24px; padding: 0 8px; border-radius: 7px; background: var(--panel-3); color: var(--muted); font-size: 9px; }
.tag.success { background: rgba(114,228,156,.09); color: var(--success); }
.tag.warning { background: rgba(255,202,99,.09); color: var(--warning); }
.tag.danger { background: rgba(255,92,101,.09); color: var(--danger); }
.table-actions { display: flex; gap: 5px; }
.empty-state { padding: 55px 20px; text-align: center; }
.empty-state .empty-icon { width: 48px; height: 48px; margin: 0 auto 14px; border-radius: 13px; display: grid; place-items: center; color: var(--soft); background: var(--panel-3); }
.empty-state h3 { margin: 0 0 5px; font-size: 15px; }
.empty-state p { margin: 0; color: var(--soft); font-size: 11px; }
.key-list { display: grid; gap: 10px; }
.key-card { display: flex; align-items: center; gap: 14px; padding: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; }
.key-icon { width: 39px; height: 39px; border-radius: 10px; display: grid; place-items: center; color: var(--acid); background: rgba(216,255,79,.07); flex-shrink: 0; }
.key-main { min-width: 0; flex: 1; }
.key-main strong { display: block; font-size: 12px; margin-bottom: 4px; }
.key-value { display: block; color: var(--muted); font: 10px "IBM Plex Mono"; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.key-meta { color: var(--soft); font-size: 9px; margin-top: 5px; }
.key-actions { display: flex; gap: 6px; }
.notice { display: flex; gap: 11px; background: rgba(94,231,231,.055); border: 1px solid rgba(94,231,231,.16); color: #aeb9bc; padding: 14px; border-radius: 12px; margin-bottom: 18px; font-size: 11px; line-height: 1.6; }
.notice .icon { color: var(--cyan); flex-shrink: 0; }
.auth-notice.success-notice { background: rgba(114,228,156,.07); border-color: rgba(114,228,156,.2); color: #b9dec6; }
.auth-notice.success-notice .icon { color: var(--success); }
.auth-notice.error-notice { background: rgba(255,77,95,.07); border-color: rgba(255,77,95,.2); color: #e1b2b8; }
.auth-notice.error-notice .icon { color: #ff6877; }

.topup-page { width: min(100%, 1400px); margin: 0 auto; }
.topup-hero {
  position: relative; overflow: hidden; display: flex; align-items: flex-end; justify-content: space-between; gap: 28px;
  padding: 26px 28px; margin-bottom: 16px; border: 1px solid var(--line); border-radius: 17px;
  background: radial-gradient(circle at 87% 20%, rgba(216,255,79,.11), transparent 28%), linear-gradient(115deg, #171a20, #121419 68%);
}
.topup-hero::after { content: ""; position: absolute; width: 210px; height: 210px; right: -70px; top: -115px; border: 1px solid rgba(216,255,79,.15); border-radius: 50%; box-shadow: 0 0 0 34px rgba(216,255,79,.025), 0 0 0 68px rgba(216,255,79,.018); pointer-events: none; }
.topup-hero-copy { position: relative; z-index: 1; max-width: 680px; }
.topup-eyebrow { display: inline-flex; align-items: center; gap: 7px; color: var(--acid); font: 600 9px "IBM Plex Mono"; letter-spacing: .12em; }
.topup-eyebrow .icon { width: 15px; height: 15px; }
.topup-hero h2 { margin: 10px 0 5px; font-size: clamp(24px, 2.2vw, 34px); letter-spacing: -.045em; }
.topup-hero p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.topup-trust { position: relative; z-index: 1; display: grid; gap: 8px; min-width: 250px; }
.topup-trust span { display: flex; align-items: center; gap: 8px; color: #c7cbd0; font-size: 10px; }
.topup-trust .icon { width: 16px; height: 16px; color: var(--acid); }
.topup-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; align-items: start; gap: 16px; }
.wallet-balance-strip { display: grid; grid-template-columns: minmax(190px, auto) minmax(220px, auto) 1fr; align-items: center; gap: 12px; margin: 12px 0 16px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.wallet-balance-strip > div { display: flex; align-items: center; gap: 10px; padding-right: 18px; border-right: 1px solid var(--line); }
.wallet-balance-icon { width: 35px; height: 35px; display: grid; place-items: center; flex-shrink: 0; border-radius: 10px; background: rgba(216,255,79,.1); color: var(--acid); }
.wallet-balance-icon.cash { background: rgba(94,231,231,.08); color: var(--cyan); }
.wallet-balance-icon .icon { width: 17px; height: 17px; }
.wallet-balance-strip p, .wallet-balance-strip small, .wallet-balance-strip strong { display: block; margin: 0; }
.wallet-balance-strip small { color: var(--soft); font-size: 8px; }
.wallet-balance-strip strong { margin-top: 2px; font: 650 14px "IBM Plex Mono"; }
.wallet-balance-note { justify-self: end; color: var(--muted); font-size: 9px; text-align: right; }
.checkout-panel { padding: 22px; }
.checkout-section-head { display: flex; align-items: center; gap: 12px; margin-bottom: 17px; }
.checkout-section-head h3 { margin: 0 0 2px; font-size: 14px; }
.checkout-section-head p { margin: 0; color: var(--soft); font-size: 10px; }
.checkout-step { width: 35px; height: 35px; display: grid; place-items: center; flex-shrink: 0; border: 1px solid rgba(216,255,79,.25); border-radius: 10px; background: rgba(216,255,79,.07); color: var(--acid); font: 600 10px "IBM Plex Mono"; }
.package-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; }
.package-card {
  position: relative; min-width: 0; min-height: 188px; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start;
  padding: 14px; border: 1px solid var(--line); border-radius: 13px; background: var(--panel-2); text-align: left; cursor: pointer; transition: border-color .18s, background .18s, transform .18s;
}
.package-card:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.package-card.active { border-color: var(--acid); background: linear-gradient(145deg, rgba(216,255,79,.09), rgba(216,255,79,.025) 70%), var(--panel-2); box-shadow: inset 0 0 0 1px rgba(216,255,79,.08), 0 12px 30px rgba(0,0,0,.16); }
.package-card-top { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 7px; margin-bottom: 16px; }
.package-icon { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 8px; background: rgba(255,255,255,.055); color: var(--muted); }
.package-icon .icon { width: 15px; height: 15px; }
.package-card.active .package-icon { background: var(--acid); color: #10120c; }
.package-badge { color: var(--soft); font: 500 8px "IBM Plex Mono"; letter-spacing: .03em; white-space: nowrap; }
.package-card.active .package-badge { color: var(--acid); }
.package-name { color: #c6cbd2; font-size: 10px; margin-bottom: 1px; }
.package-price { display: flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.package-price strong { font: 650 21px "IBM Plex Mono"; letter-spacing: -.05em; }
.package-price small { color: var(--soft); font-size: 8px; }
.package-questions { color: var(--acid); font-size: 11px; font-weight: 700; margin-top: 9px; }
.package-note { color: var(--soft); font-size: 8px; line-height: 1.5; margin-top: 3px; }
.package-check { position: absolute; right: 10px; bottom: 10px; width: 21px; height: 21px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: transparent; }
.package-check .icon { width: 12px; height: 12px; }
.package-card.active .package-check { border-color: var(--acid); background: var(--acid); color: #10120c; }
.checkout-divider { height: 1px; background: var(--line); margin: 24px 0 20px; }
.wallet-amount-box { padding: 20px; border: 1px solid var(--line); border-radius: 15px; background: linear-gradient(145deg, rgba(216,255,79,.045), rgba(255,255,255,.018)); }
.wallet-amount-box > label { display: block; margin-bottom: 10px; color: var(--muted); font-size: 10px; }
.wallet-amount-input { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 11px; padding: 10px 14px; border: 1px solid rgba(216,255,79,.28); border-radius: 12px; background: #0d1013; }
.wallet-amount-input > span { color: var(--acid); font: 700 23px "IBM Plex Mono"; }
.wallet-amount-input input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: #f3f5f7; font: 650 30px "IBM Plex Mono"; }
.wallet-amount-input small { color: var(--soft); font: 600 9px "IBM Plex Mono"; }
.quick-amounts { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; margin-top: 10px; }
.quick-amounts button { padding: 9px 5px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2); color: var(--muted); cursor: pointer; font: 600 9px "IBM Plex Mono"; }
.quick-amounts button:hover, .quick-amounts button.active { border-color: var(--acid); background: rgba(216,255,79,.07); color: var(--acid); }
.point-conversion { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line); }
.point-conversion span { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 10px; }
.point-conversion .icon { width: 15px; height: 15px; color: var(--acid); }
.point-conversion strong { color: var(--acid); font: 650 15px "IBM Plex Mono"; }
.payment-method-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.payment-choice { width: 100%; display: flex; align-items: center; gap: 13px; padding: 14px; border: 1px solid var(--line); border-radius: 13px; background: var(--panel-2); text-align: left; cursor: pointer; transition: border-color .18s, background .18s; }
.payment-choice:hover:not(:disabled) { border-color: var(--line-strong); }
.payment-choice.active { border-color: rgba(216,255,79,.55); background: rgba(216,255,79,.025); box-shadow: inset 0 0 0 1px rgba(216,255,79,.06); }
.payment-choice:disabled { cursor: not-allowed; opacity: .52; }
.promptpay-brand { width: 44px; height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 11px; background: linear-gradient(145deg, #2249a6, #153273); color: white; line-height: 1; }
.promptpay-brand small { font-size: 7px; font-weight: 600; }
.promptpay-brand strong { margin-top: 2px; font-size: 10px; }
.truemoney-brand { width: 44px; height: 44px; display: grid; place-items: center; flex-shrink: 0; border-radius: 11px; background: linear-gradient(145deg, #ffac2f, #ec7e14); color: #241405; }
.truemoney-brand .icon { width: 19px; height: 19px; stroke-width: 2.2; }
.payment-copy { flex: 1; min-width: 0; }
.payment-copy strong, .payment-copy span { display: block; }
.payment-copy strong { font-size: 12px; }
.payment-copy span { color: var(--soft); font-size: 9px; margin-top: 3px; }
.payment-selected { width: 24px; height: 24px; display: grid; place-items: center; flex-shrink: 0; border: 1px solid var(--line-strong); border-radius: 50%; background: transparent; color: var(--soft); }
.payment-choice.active .payment-selected { border-color: var(--acid); background: var(--acid); color: #111; }
.payment-selected .icon { width: 13px; height: 13px; }
.payment-notice { display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; padding: 12px 13px; border-radius: 11px; background: rgba(94,231,231,.045); border: 1px solid rgba(94,231,231,.13); color: #9da8ab; font-size: 9px; line-height: 1.65; }
.payment-notice .icon { width: 16px; height: 16px; flex-shrink: 0; color: var(--cyan); }
.payment-notice strong { color: #c9d2d3; }
.order-card { padding: 20px; position: sticky; top: 0; }
.order-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 18px; font-size: 15px; font-weight: 700; }
.secure-pill { display: inline-flex; align-items: center; gap: 4px; padding: 5px 7px; border-radius: 99px; background: rgba(114,228,156,.07); color: var(--success); font: 500 7px "IBM Plex Mono"; letter-spacing: .06em; }
.secure-pill .icon { width: 11px; height: 11px; }
.selected-package { display: flex; align-items: center; gap: 11px; padding: 13px; margin-bottom: 17px; border-radius: 12px; background: linear-gradient(130deg, rgba(216,255,79,.08), rgba(255,255,255,.025)); border: 1px solid rgba(216,255,79,.16); }
.selected-package-icon { width: 37px; height: 37px; display: grid; place-items: center; flex-shrink: 0; border-radius: 10px; background: var(--acid); color: #111; }
.selected-package-icon .icon { width: 18px; height: 18px; }
.selected-package div { min-width: 0; }
.selected-package small, .selected-package strong, .selected-package div > span { display: block; }
.selected-package small { color: var(--soft); font-size: 8px; }
.selected-package strong { margin: 1px 0; font-size: 14px; }
.selected-package div > span { overflow: hidden; color: var(--muted); font-size: 8px; white-space: nowrap; text-overflow: ellipsis; }
.summary-line { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 11px; color: var(--muted); font-size: 10px; }
.summary-line strong { color: #d7d9dc; font-size: 10px; text-align: right; }
.summary-line.total { border-top: 1px solid var(--line); padding-top: 15px; margin-top: 15px; color: var(--text); }
.summary-line.total strong { color: var(--text); font: 650 24px "IBM Plex Mono"; letter-spacing: -.04em; }
.order-card .btn { width: 100%; margin-top: 7px; }
.checkout-button { justify-content: space-between; padding-inline: 16px; }
.checkout-footnote { display: flex; align-items: center; justify-content: center; gap: 5px; margin: 9px 0 17px; color: var(--soft); font-size: 8px; }
.checkout-footnote .icon { width: 12px; height: 12px; }
.checkout-timeline { list-style: none; display: grid; gap: 10px; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--line); color: var(--soft); font-size: 8px; }
.checkout-timeline li { display: flex; align-items: center; gap: 8px; }
.checkout-timeline li span { width: 19px; height: 19px; display: grid; place-items: center; flex-shrink: 0; border-radius: 50%; background: var(--panel-3); color: var(--muted); font: 600 8px "IBM Plex Mono"; }
.angpao-order { display: flex; align-items: center; gap: 12px; padding: 13px; margin-bottom: 17px; border: 1px solid rgba(255,166,41,.2); border-radius: 12px; background: rgba(255,166,41,.055); }
.angpao-order div { min-width: 0; }
.angpao-order small, .angpao-order strong { display: block; }
.angpao-order small { color: var(--muted); font-size: 9px; }
.angpao-order strong { margin-top: 2px; font: 650 20px "IBM Plex Mono"; }
.notice.angpao-warning { border-color: rgba(255,166,41,.2); background: rgba(255,166,41,.055); }
.notice.angpao-warning .icon { color: var(--warning); }
.angpao-success { padding: 6px 0 2px; text-align: center; }
.angpao-success .empty-icon { color: var(--success); background: rgba(114,228,156,.08); }
.angpao-success h3 { margin: 0 0 4px; font-size: 15px; }
.angpao-success > strong { display: block; color: var(--acid); font: 650 25px "IBM Plex Mono"; }
.angpao-success p { margin: 7px 0 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
.modal.modal-topup-success { width: min(530px, 100%); background: #12151a; }
.modal-topup-success .modal-body { padding: 22px; }
.modal-topup-success .modal-actions { display: grid; grid-template-columns: .72fr 1.28fr; }
.modal-topup-success .modal-actions .btn { width: 100%; min-height: 44px; }
.topup-success-v2 { display: grid; gap: 14px; }
.topup-success-hero { position: relative; display: flex; align-items: center; gap: 13px; min-height: 92px; padding: 17px; overflow: hidden; border: 1px solid rgba(114,228,156,.22); border-radius: 15px; background: radial-gradient(circle at 88% 12%, rgba(114,228,156,.12), transparent 32%), linear-gradient(135deg, rgba(114,228,156,.095), rgba(255,255,255,.012)); }
.topup-success-check { width: 48px; height: 48px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: var(--success); color: #07120b; box-shadow: 0 0 0 7px rgba(114,228,156,.07), 0 12px 28px rgba(114,228,156,.12); }
.topup-success-check svg { width: 23px; stroke-width: 3; }
.topup-success-hero > div:nth-child(2) { position: relative; z-index: 1; min-width: 0; }
.topup-success-hero > div:nth-child(2) > span { color: var(--success); font: 700 8px "IBM Plex Mono"; letter-spacing: .12em; }
.topup-success-hero h2 { margin: 3px 0 1px; font-size: 18px; }
.topup-success-hero p { margin: 0; color: var(--muted); font-size: 9px; }
.topup-success-hero > i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--success); opacity: .7; }
.topup-success-hero > i:nth-of-type(1) { right: 31px; top: 23px; }
.topup-success-hero > i:nth-of-type(2) { right: 56px; bottom: 19px; width: 3px; height: 3px; }
.topup-success-hero > i:nth-of-type(3) { right: 18px; bottom: 39px; width: 2px; height: 2px; }
.topup-reward { display: grid; place-items: center; padding: 16px; border: 1px solid rgba(216,255,79,.18); border-radius: 14px; background: #0d0f12; }
.topup-reward > span { color: var(--soft); font-size: 9px; }
.topup-reward strong { margin: 1px 0 -2px; color: var(--acid); font: 700 36px "IBM Plex Mono"; letter-spacing: -.055em; }
.topup-reward strong small { margin-right: 3px; font-size: 18px; }
.topup-reward em { color: rgba(216,255,79,.55); font: normal 700 8px "IBM Plex Mono"; letter-spacing: .18em; }
.topup-success-summary { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); border: 1px solid var(--line); border-radius: 13px; overflow: hidden; background: rgba(255,255,255,.012); }
.topup-success-summary > div { display: grid; gap: 3px; min-width: 0; padding: 12px 13px; border-bottom: 1px solid var(--line); }
.topup-success-summary > div:nth-child(odd) { border-right: 1px solid var(--line); }
.topup-success-summary > div:nth-last-child(-n+2) { border-bottom: 0; }
.topup-success-summary span { color: var(--soft); font-size: 8px; }
.topup-success-summary strong { overflow: hidden; font-size: 10px; white-space: nowrap; text-overflow: ellipsis; }
.topup-balance-after { display: grid; grid-template-columns: 36px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 12px 13px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.014); }
.topup-balance-after > div { display: grid; gap: 2px; }
.topup-balance-after small { color: var(--soft); font-size: 8px; }
.topup-balance-after strong { font: 650 12px "IBM Plex Mono"; }
.topup-success-safe { display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--soft); font-size: 8px; }
.topup-success-safe svg { width: 13px; color: var(--success); }
.qr-wrap { text-align: center; }
.qr-wrap img { width: 210px; height: 210px; background: white; padding: 10px; border-radius: 13px; }
.qr-wrap strong { display: block; margin-top: 12px; }
.qr-wrap p { color: var(--muted); font-size: 11px; }

.settings-grid { display: grid; grid-template-columns: 210px minmax(0, 680px); gap: 28px; }
.settings-nav button { width: 100%; display: flex; align-items: center; gap: 9px; border: 0; background: transparent; color: var(--muted); padding: 10px 12px; border-radius: 9px; cursor: pointer; text-align: left; font-size: 12px; }
.settings-nav button.active { background: var(--panel-3); color: var(--text); }
.settings-section { padding: 21px; margin-bottom: 13px; }
.settings-section h3 { margin: 0 0 5px; font-size: 15px; }
.settings-section > p { margin: 0 0 20px; color: var(--soft); font-size: 10px; }
.profile-avatar-editor { position: relative; display: grid; grid-template-columns: 86px minmax(0,1fr); gap: 18px; align-items: center; margin: -4px -4px 22px; padding: 18px; overflow: hidden; border: 1px solid rgba(216,255,79,.16); border-radius: 15px; background: radial-gradient(circle at 0 0,rgba(216,255,79,.11),transparent 40%),#11151a; }
.profile-avatar-editor::after { content: ''; position: absolute; right: -38px; top: -42px; width: 130px; height: 130px; border: 1px solid rgba(216,255,79,.08); border-radius: 50%; pointer-events: none; }
.profile-avatar-preview { position: relative; z-index: 1; width: 86px; height: 86px; display: grid; place-items: center; overflow: hidden; border: 2px solid rgba(216,255,79,.52); border-radius: 24px; background: linear-gradient(145deg,#252c20,#171c1d); color: var(--acid); font: 850 29px "IBM Plex Mono",monospace; box-shadow: 0 14px 34px rgba(0,0,0,.32); }
.profile-avatar-copy { position: relative; z-index: 1; min-width: 0; }
.profile-avatar-copy > span { color: var(--acid); font: 700 8px "IBM Plex Mono",monospace; letter-spacing: .14em; }
.profile-avatar-copy h3 { margin: 4px 0 3px; font-size: 16px; }
.profile-avatar-copy p { margin: 0; color: var(--soft); font-size: 9px; line-height: 1.6; }
.profile-avatar-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.profile-avatar-actions .btn { min-height: 34px; }
.profile-avatar-remove { color: #ff8790; }
.discord-account-status { display: grid; grid-template-columns: 44px minmax(0,1fr) auto; align-items: center; gap: 13px; background: radial-gradient(circle at 90% 15%,rgba(88,101,242,.12),transparent 34%),var(--panel); }
.discord-account-status.connected { border-color: rgba(114,228,156,.18); }
.discord-account-icon, .discord-security-icon { width: 44px; height: 44px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 12px; background: rgba(88,101,242,.15); color: #8992ff; }
.discord-account-icon .icon, .discord-security-icon .icon { width: 20px; height: 20px; }
.discord-account-status small { color: #8992ff; font: 600 8px "IBM Plex Mono"; letter-spacing: .1em; }
.discord-account-status h3 { margin: 2px 0 1px; }
.discord-account-status p { margin: 0; color: var(--soft); font-size: 9px; }
.discord-security-card { display: flex; align-items: center; gap: 14px; border-color: rgba(114,228,156,.16); }
.discord-security-icon { background: rgba(114,228,156,.09); color: var(--success); }
.discord-security-card h3 { margin: 0 0 4px; }
.discord-security-card p { margin: 0; color: var(--soft); font-size: 10px; line-height: 1.6; }
.form-actions { display: flex; justify-content: flex-end; margin-top: 20px; }

/* Modal + toast */
.modal-backdrop { position: fixed; z-index: 100; inset: 0; background: rgba(0,0,0,.67); backdrop-filter: blur(5px); display: grid; place-items: center; padding: 20px; }
.modal { width: min(460px, 100%); max-height: 90vh; overflow-y: auto; background: var(--panel); border: 1px solid var(--line-strong); border-radius: 17px; box-shadow: var(--shadow); }
.modal-head { padding: 18px 20px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); }
.modal-head h3 { margin: 0; font-size: 16px; }
.modal-close { width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 9px; background: transparent; color: var(--soft); cursor: pointer; }
.modal-close:hover { background: var(--panel-3); color: var(--text); }
.modal-body { padding: 20px; }
.modal-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.modal-install { width: min(680px, 100%); background: #12151a; }
.modal-install .modal-head { padding: 18px 24px; }
.modal-install .modal-body { padding: 24px; }
.install-setup { display: grid; gap: 18px; }
.install-setup-hero { position: relative; display: flex; align-items: center; gap: 15px; padding: 18px; overflow: hidden; border: 1px solid rgba(216,255,79,.22); border-radius: 16px; background: linear-gradient(130deg, rgba(216,255,79,.11), rgba(216,255,79,.025) 58%, rgba(255,255,255,.015)); }
.install-setup-hero::after { content: ''; position: absolute; width: 130px; height: 130px; right: -45px; top: -65px; border: 1px solid rgba(216,255,79,.13); border-radius: 50%; box-shadow: 0 0 70px rgba(216,255,79,.08); }
.install-setup-icon { width: 48px; height: 48px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 14px; background: var(--acid); color: #090b0d; box-shadow: 0 10px 30px rgba(216,255,79,.13); }
.install-setup-icon svg { width: 23px; }
.install-setup-hero > div:nth-child(2) { min-width: 0; }
.install-setup-hero > div:nth-child(2) > span { color: var(--acid); font: 700 8px "IBM Plex Mono"; letter-spacing: .13em; }
.install-setup-hero h2 { margin: 3px 0 1px; font-size: 21px; }
.install-setup-hero p { margin: 0; color: var(--muted); font-size: 10px; }
.install-ready-badge { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 5px; margin-left: auto; padding: 7px 9px; border: 1px solid rgba(114,228,156,.2); border-radius: 99px; background: rgba(114,228,156,.08); color: var(--success); font: 700 8px "IBM Plex Mono"; }
.install-ready-badge svg { width: 12px; }
.install-flow-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.install-flow-grid article { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 13px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.018); }
.install-flow-grid article > span { color: var(--acid); font: 700 9px "IBM Plex Mono"; }
.install-flow-grid article div { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: center; gap: 1px 7px; min-width: 0; }
.install-flow-grid article svg { grid-row: 1 / span 2; width: 16px; color: var(--muted); }
.install-flow-grid strong { font-size: 11px; }
.install-flow-grid small { color: var(--soft); font-size: 8px; white-space: nowrap; }
.install-command-action { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px; border: 1px solid rgba(216,255,79,.22); border-radius: 14px; background: #0d0f12; }
.install-command-action > div { display: grid; gap: 3px; min-width: 0; }
.install-command-action > div > span { display: flex; align-items: center; gap: 5px; color: var(--acid); font: 700 8px "IBM Plex Mono"; letter-spacing: .08em; }
.install-command-action > div > span svg { width: 12px; }
.install-command-action strong { font: 600 13px "IBM Plex Mono"; }
.install-command-action small { color: var(--soft); font-size: 9px; }
.install-command-action .btn { flex: 0 0 auto; min-height: 44px; padding-inline: 18px; }
.install-or { display: flex; align-items: center; gap: 10px; color: var(--soft); font-size: 9px; }
.install-or::before, .install-or::after { content: ''; height: 1px; flex: 1; background: var(--line); }
.install-api-only { width: 100%; display: grid; grid-template-columns: 38px minmax(0,1fr) 18px; align-items: center; gap: 11px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.014); color: var(--text); cursor: pointer; text-align: left; }
.install-api-only:hover { border-color: var(--line-strong); background: var(--panel-3); }
.install-api-only > span:nth-child(2) { display: grid; gap: 2px; }
.install-api-only strong { font-size: 11px; }
.install-api-only small { color: var(--soft); font-size: 9px; }
.install-api-only > svg { width: 16px; color: var(--soft); }
.install-security { display: flex; justify-content: center; align-items: center; gap: 6px; color: var(--soft); font-size: 9px; }
.install-security svg { width: 13px; color: var(--success); }
.modal-key-choice { width: min(560px, 100%); }
.key-ready { display: flex; align-items: center; gap: 13px; }
.key-ready-icon, .key-choice-icon { display: grid; place-items: center; flex: 0 0 auto; background: rgba(216,255,79,.09); color: var(--acid); }
.key-ready-icon { width: 45px; height: 45px; border-radius: 13px; }
.key-ready-icon svg { width: 20px; }
.key-ready > div:last-child { display: grid; gap: 2px; }
.key-ready span { color: var(--success); font: 700 8px "IBM Plex Mono"; letter-spacing: .08em; }
.key-ready strong { font-size: 15px; }
.key-ready p { margin: 0; color: var(--soft); font-size: 9px; }
.key-secret { display: grid; gap: 6px; margin-top: 16px; padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: #0d0f12; }
.key-secret span { color: var(--soft); font: 700 8px "IBM Plex Mono"; letter-spacing: .08em; }
.key-secret code { overflow: hidden; color: #cfd3da; font: 10px "IBM Plex Mono"; white-space: nowrap; text-overflow: ellipsis; }
.key-choice-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 13px; }
.key-choice-action { display: grid; grid-template-columns: 34px minmax(0,1fr) 16px; align-items: center; gap: 9px; padding: 13px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.015); color: var(--text); cursor: pointer; text-align: left; }
.key-choice-action.primary { border-color: rgba(216,255,79,.28); background: rgba(216,255,79,.055); }
.key-choice-action:hover { transform: translateY(-1px); border-color: var(--line-strong); }
.key-choice-action > span:nth-child(2) { display: grid; gap: 3px; }
.key-choice-action strong { font-size: 10px; }
.key-choice-action small { color: var(--soft); font-size: 8px; line-height: 1.45; }
.key-choice-action > svg { width: 14px; color: var(--soft); }
.key-choice-icon { width: 34px; height: 34px; border-radius: 10px; }
.key-choice-icon svg { width: 15px; }
.key-ready-warning { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 13px; color: var(--soft); font-size: 9px; }
.key-ready-warning svg { width: 13px; color: var(--success); }
.quick-connect-ready { display: flex; align-items: center; gap: 12px; padding: 13px; border: 1px solid rgba(82,211,139,.25); background: rgba(82,211,139,.07); border-radius: 12px; }
.quick-connect-ready > svg { width: 24px; color: var(--success); flex: 0 0 auto; }
.quick-connect-ready div { display: grid; gap: 3px; }
.quick-connect-ready span, .quick-connect-steps small { color: var(--soft); font-size: 11px; }
.quick-connect-steps { display: grid; gap: 13px; padding: 0; margin: 18px 0; list-style: none; }
.quick-connect-steps li { display: flex; align-items: flex-start; gap: 11px; }
.quick-connect-steps li > span { width: 25px; height: 25px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 8px; background: var(--acid); color: #0a0b0d; font: 700 11px/1 "IBM Plex Mono"; }
.quick-connect-steps li div { display: grid; gap: 3px; }
.quick-connect .code-block { max-height: 150px; font-size: 10px; }
.quick-connect-warning { margin-top: 13px; }
.key-copy-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 13px; }
.key-copy-options > div { display: grid; gap: 5px; padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.018); }
.key-copy-options strong { display: flex; align-items: center; gap: 7px; font-size: 12px; }
.key-copy-options strong svg { width: 16px; color: var(--acid); }
.key-copy-options span { color: var(--soft); font-size: 10px; line-height: 1.55; }
.toast { position: fixed; z-index: 200; left: 50%; bottom: 25px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; background: #f1f2ec; color: #171815; border-radius: 10px; box-shadow: var(--shadow); padding: 11px 16px; font-size: 12px; font-weight: 600; transition: .22s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.error { background: #ff7c82; }

@media (max-width: 1080px) {
  .hero { grid-template-columns: 1fr 420px; gap: 36px; }
  .cards-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .topup-layout { grid-template-columns: 1fr 310px; }
  .package-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .admin-dashboard-grid { grid-template-columns: 1fr; }
  .admin-side-stack { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
  .admin-finance-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 840px) {
  .public-nav { height: 68px; padding: 0 18px; }
  .public-links { display: none; position: absolute; top: 62px; left: 14px; right: 14px; padding: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 13px; box-shadow: var(--shadow); }
  .public-links.open { display: grid; }
  .mobile-nav-btn { display: inline-flex; }
  .nav-actions .btn-ghost { display: none; }
  .hero { min-height: auto; grid-template-columns: 1fr; padding: 65px 20px 90px; }
  .hero-copy { max-width: 680px; }
  .terminal-card { max-width: 570px; transform: none; }
  .section { padding: 80px 20px; }
  .section-heading { display: block; }
  .section-heading p { margin-top: 18px; }
  .feature-card:nth-child(n) { grid-column: span 12; }
  .stat-strip { grid-template-columns: 1fr 1fr; }
  .stat-strip > div:nth-child(2) { border-right: 0; }
  .stat-strip > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .cta-panel { padding: 42px 28px; display: block; }
  .cta-panel .btn { margin-top: 25px; }
  .pricing-grid { grid-template-columns: 1fr; }
  .price-card.featured { transform: none; }
  .auth-shell { grid-template-columns: 1fr; }
  .auth-art { display: none; }
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; z-index: 60; left: 0; top: 0; bottom: 0; width: 260px; transform: translateX(-105%); transition: .25s; box-shadow: var(--shadow); }
  .sidebar.open { transform: translateX(0); }
  .mobile-menu { display: inline-flex; }
  .chat-layout { grid-template-columns: 1fr; }
  .chat-history { display: none; }
  .dashboard-grid, .topup-layout { grid-template-columns: 1fr; }
  .order-card { position: static; }
  .topup-hero { align-items: flex-start; flex-direction: column; }
  .topup-trust { grid-template-columns: 1fr 1fr; width: 100%; }
  .wallet-balance-strip { grid-template-columns: 1fr 1fr; }
  .wallet-balance-note { grid-column: 1 / -1; justify-self: start; text-align: left; }
  .package-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .payment-method-grid { grid-template-columns: 1fr; }
  .settings-grid { grid-template-columns: 1fr; }
  .settings-nav { display: flex; overflow-x: auto; }
  .settings-nav button { width: auto; white-space: nowrap; }
  .admin-side-stack { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .admin-finance-head { align-items: flex-start; }
  .admin-finance-grid { grid-template-columns: 1fr; }
  .admin-finance-foot { grid-template-columns: 1fr; gap: 7px; }
  .nav-actions .btn-primary { min-height: 37px; padding: 0 12px; font-size: 12px; }
  .brand-copy small { display: none; }
  .hero h1 { font-size: 47px; }
  .hero-copy > p { font-size: 15px; }
  .hero-actions .btn { width: 100%; }
  .proof-row { align-items: flex-start; gap: 10px; flex-direction: column; }
  .section { padding-block: 65px; }
  .section-heading h2 { font-size: 34px; }
  .stat-strip { grid-template-columns: 1fr; }
  .stat-strip > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .public-footer { flex-direction: column; }
  .page-hero { padding: 64px 20px 28px; }
  .docs-layout { grid-template-columns: 1fr; gap: 22px; }
  .docs-nav { display: flex; position: static; width: 100%; min-width: 0; max-width: 100%; overflow-x: auto; }
  .docs-nav a { white-space: nowrap; border-left: 0; border-bottom: 1px solid var(--line); }
  .install-method-grid, .install-method-grid.two-columns { grid-template-columns: 1fr; }
  .guide-mini-steps { grid-template-columns: 1fr; }
  .guide-step { grid-template-columns: 38px minmax(0, 1fr); gap: 11px; padding: 16px; }
  .guide-step-number { width: 34px; height: 34px; border-radius: 9px; }
  .key-copy-options { grid-template-columns: 1fr; }
  .modal-install .modal-body { padding: 16px; }
  .install-setup-hero { align-items: flex-start; padding: 15px; }
  .install-ready-badge { display: none; }
  .install-flow-grid { grid-template-columns: 1fr; }
  .install-command-action { align-items: stretch; flex-direction: column; }
  .install-command-action .btn { width: 100%; }
  .key-choice-actions { grid-template-columns: 1fr; }
  .modal-topup-success .modal-body { padding: 16px; }
  .topup-success-v2 { gap: 10px; }
  .topup-success-hero { min-height: 78px; padding: 13px; }
  .topup-success-check { width: 42px; height: 42px; }
  .topup-success-hero h2 { font-size: 16px; }
  .topup-reward { padding: 11px; }
  .topup-reward strong { font-size: 30px; }
  .topup-success-summary { grid-template-columns: 1fr; }
  .topup-success-summary > div { padding: 9px 11px; }
  .topup-success-summary > div, .topup-success-summary > div:nth-child(odd), .topup-success-summary > div:nth-last-child(-n+2) { border-right: 0; border-bottom: 1px solid var(--line); }
  .topup-success-summary > div:last-child { border-bottom: 0; }
  .topup-balance-after { padding: 10px 11px; }
  .modal-topup-success .modal-actions { grid-template-columns: 1fr; margin-top: 14px; }
  .auth-main { padding: 24px 18px; }
  .app-topbar { padding: 0 15px; }
  .model-pill { display: none; }
  .page-content { padding: 18px 14px; }
  .cards-grid { grid-template-columns: 1fr; }
  .content-head { align-items: flex-start; flex-direction: column; }
  .content-actions { width: 100%; }
  .content-actions .btn { flex: 1; }
  .chat-messages { padding: 23px 14px; }
  .chat-composer { padding: 10px 12px 14px; }
  .message-body { max-width: 88%; }
  .chat-empty { padding: 24px 12px; }
  .prompt-chip { flex: 1 1 45%; }
  .topup-hero { padding: 21px 18px; }
  .topup-trust { grid-template-columns: 1fr; min-width: 0; }
  .wallet-balance-strip { grid-template-columns: 1fr; }
  .wallet-balance-strip > div { padding: 0 0 10px; border-right: 0; border-bottom: 1px solid var(--line); }
  .checkout-panel, .order-card { padding: 15px; }
  .wallet-amount-box { padding: 14px; }
  .wallet-amount-input input { font-size: 25px; }
  .quick-amounts { grid-template-columns: repeat(3, 1fr); }
  .package-card { min-height: 177px; padding: 12px; }
  .package-price strong { font-size: 19px; }
  .form-row { grid-template-columns: 1fr; }
  .profile-avatar-editor { grid-template-columns: 68px minmax(0,1fr); gap: 13px; padding: 14px; }
  .profile-avatar-preview { width: 68px; height: 68px; border-radius: 19px; font-size: 23px; }
  .profile-avatar-actions .btn { flex: 1 1 auto; }
  .key-card { align-items: flex-start; flex-wrap: wrap; }
  .key-actions { width: 100%; padding-left: 53px; }
  .admin-head { align-items: flex-start; }
  .admin-head .btn { width: 100%; }
  .users-monitor-actions { width: 100%; flex-wrap: wrap; }
  .users-monitor-actions .btn { flex: 1; }
  .member-rank-toolbar { grid-template-columns: 1fr; gap: 12px; }
  .member-rank-filters { justify-content: flex-start; margin-inline: -2px; padding-bottom: 4px; }
  .admin-panel-head { align-items: flex-start; flex-direction: column; }
  .chart-filters { width: 100%; }
  .chart-filter { flex: 1; }
  .admin-chart-summary { gap: 14px; }
  .admin-chart-wrap { height: 260px; }
  .donut-layout { grid-template-columns: 112px minmax(0,1fr); }
  .user-donut { width: 108px; height: 108px; }
  .user-donut > div { width: 70px; height: 70px; }
}

/* Global readability pass */
:root {
  --muted: #c0c5ce;
  --soft: #9da4af;
  --line: rgba(255,255,255,.13);
  --line-strong: rgba(255,255,255,.22);
}

body { font-size: 15px; line-height: 1.55; }
input::placeholder, textarea::placeholder { color: #8f97a3; opacity: 1; }
.brand-copy small, .form-hint, .turnstile-field small, .user-meta small,
.app-topbar-title p, .metric-card > span, .panel-head p, .activity span,
.admin-panel-head p, .history-item span, .history-empty span, .message-meta,
.composer-note, .composer-disclaimer, .table-user small, .key-meta,
.topup-eyebrow, .wallet-balance-strip small, .wallet-balance-note,
.checkout-section-head p, .package-badge, .package-price small, .package-note,
.payment-copy span, .payment-notice, .secure-pill, .selected-package small,
.selected-package div > span, .summary-line, .summary-line strong,
.checkout-footnote, .checkout-timeline, .checkout-timeline li span,
.angpao-order small, .angpao-success p, .settings-section > p {
  font-size: 11px;
}

.nav-group-label, .history-label, .data-table th, .tag, .key-value,
.metric-delta, .admin-eyebrow, .admin-metric > span:not(.metric-delta),
.admin-metric > small, .chart-filter, .admin-chart-summary div span,
.live-indicator, .user-donut span, .donut-legend-row, .donut-legend-row strong,
.admin-pulse-list span, .package-name, .promptpay-brand strong,
.qr-wrap p {
  font-size: 12px;
}

.content-head p, .topup-hero p, .topup-trust span, .feature-card p,
.page-hero p, .docs-content p, .auth-card > p, .auth-quote p,
.empty-state p, .settings-nav button {
  font-size: 14px;
}

.side-link { font-size: 14px; }
.data-table td { font-size: 13px; }
.form-label { font-size: 13px; }
.form-control { font-size: 14px; }
.message-bubble { font-size: 15px; line-height: 1.8; }
.package-note { color: #aeb4bd; line-height: 1.55; }
.package-badge, .wallet-balance-strip small, .selected-package small,
.selected-package div > span, .checkout-section-head p, .checkout-timeline,
.checkout-footnote, .settings-section > p { color: #aeb4bd; }
.summary-line { color: #bcc2cb; }
.summary-line strong { color: #f0f1f2; font-size: 12px; }
.payment-copy span { color: #b3bac4; }
.app-topbar-title p, .panel-head p, .admin-panel-head p { color: #aeb5bf; }
.nav-group-label { color: #858d99; }
.admin-chart-y, .admin-chart-x { fill: #969eaa; font-size: 10px; }
.admin-chart-empty text:last-child { fill: #9da5af; font-size: 11px; }
.bar-wrap span { color: #9ca4af; font-size: 10px; }
.proof-row { color: #aab1bb; }
.balance-card > small { opacity: .72; }
.payment-choice:disabled { opacity: .7; }

/* Nova model controls */
.model-selector {
  min-width: 330px;
  height: 62px;
  display: grid;
  grid-template-columns: 34px minmax(0,1fr);
  grid-template-rows: 23px 16px 14px;
  column-gap: 9px;
  align-items: center;
  padding: 3px 12px 3px 8px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(255,255,255,.028);
  box-shadow: inset 0 1px rgba(255,255,255,.025);
}
.model-selector > span { grid-row: 1 / 4; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; background: rgba(216,255,79,.08); color: var(--acid); font-size: 0; }
.model-selector > span .icon { width: 16px; height: 16px; }
.model-selector > .model-picker { align-self: end; }
.model-selector .model-picker-menu { top: calc(100% + 37px); }
.model-fit { align-self: center; overflow: hidden; color: #e0e5ea; font-size: 10px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.model-rate { align-self: start; overflow: hidden; color: #aeb5bf; font: 10px/1.2 "IBM Plex Mono",monospace; text-overflow: ellipsis; white-space: nowrap; }

.model-picker { position: relative; min-width: 0; }
.model-picker-trigger { width: 100%; min-width: 0; height: 27px; display: flex; align-items: center; gap: 8px; border: 0; padding: 0; outline: 0; background: transparent; color: #f3f5f7; cursor: pointer; text-align: left; }
.model-picker-trigger:focus-visible { border-radius: 7px; box-shadow: 0 0 0 2px rgba(216,255,79,.34); }
.model-picker-current { min-width: 0; flex: 1; }
.model-picker-current strong, .model-picker-current small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.model-picker-current strong { font-size: 12px; font-weight: 800; letter-spacing: -.015em; }
.model-picker-current small { display: none; color: #858e99; font-size: 10px; }
.model-picker-rate { padding: 3px 7px; border: 1px solid rgba(216,255,79,.14); border-radius: 999px; background: rgba(216,255,79,.07); color: var(--acid); font: 700 9px "IBM Plex Mono",monospace; }
.model-picker-chevron { width: 14px; height: 14px; color: #7d8590; transition: transform .18s ease, color .18s ease; }
.model-picker.open .model-picker-chevron { transform: rotate(180deg); color: var(--acid); }
.model-picker-menu { position: absolute; z-index: 120; top: calc(100% + 11px); right: -4px; width: 360px; padding: 7px; border: 1px solid #343a43; border-radius: 14px; background: #15191f; box-shadow: 0 24px 60px rgba(0,0,0,.52), inset 0 1px rgba(255,255,255,.035); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-7px) scale(.985); transform-origin: top right; transition: opacity .16s ease, transform .16s ease, visibility .16s; }
.model-picker.open .model-picker-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); }
.model-picker-option { width: 100%; min-height: 58px; display: grid; grid-template-columns: 34px minmax(0,1fr) auto 20px; align-items: center; gap: 10px; border: 1px solid transparent; border-radius: 10px; padding: 8px 10px; background: transparent; color: #d8dde3; cursor: pointer; text-align: left; transition: background .14s ease, border-color .14s ease, color .14s ease; }
.model-picker-option + .model-picker-option { margin-top: 3px; }
.model-picker-option:hover, .model-picker-option:focus-visible { outline: 0; border-color: rgba(216,255,79,.13); background: rgba(255,255,255,.045); color: #fff; }
.model-picker-option.active { border-color: rgba(216,255,79,.2); background: linear-gradient(100deg, rgba(216,255,79,.11), rgba(216,255,79,.035)); color: #fff; }
.model-picker-option.locked { color: #8d949e; cursor: not-allowed; }
.model-picker-option.locked:hover, .model-picker-option.locked:focus-visible { border-color: rgba(255,255,255,.06); background: rgba(255,255,255,.025); }
.model-picker-option.locked .model-option-icon { color: #737c87; background: #20242a; }
.model-picker-option.locked .model-option-copy small { color: #d6a45b; }
.model-picker-option.locked .model-option-rate { display: grid; place-items: center; color: #767f89; }
.model-picker-option.locked .model-option-rate .icon { width: 14px; height: 14px; }
.model-option-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: #252a31; color: #8f98a4; }
.model-option-icon .icon { width: 15px; height: 15px; }
.model-picker-option.active .model-option-icon { background: var(--acid); color: #111; box-shadow: 0 6px 20px rgba(216,255,79,.13); }
.model-option-copy { min-width: 0; }
.model-option-copy strong, .model-option-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.model-option-copy strong { font-size: 12px; }
.model-option-copy small { margin-top: 2px; color: #858e99; font-size: 9px; }
.model-option-rate { color: #a9b1bc; font: 700 10px "IBM Plex Mono",monospace; }
.model-option-check { width: 19px; height: 19px; display: grid; place-items: center; border-radius: 50%; color: transparent; }
.model-option-check .icon { width: 12px; height: 12px; }
.model-picker-option.active .model-option-check { background: var(--acid); color: #111; }
.model-picker-field .model-picker-trigger { height: 58px; padding: 0 14px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel); transition: border-color .16s ease, box-shadow .16s ease, background .16s ease; }
.model-picker-field .model-picker-trigger:hover, .model-picker-field.open .model-picker-trigger { border-color: rgba(216,255,79,.38); background: #191d22; box-shadow: 0 0 0 3px rgba(216,255,79,.05); }
.model-picker-field .model-picker-current strong { font-size: 13px; }
.model-picker-field .model-picker-current small { display: block; }
.model-picker-field .model-picker-menu { left: 0; right: auto; width: 100%; }

.supported-models { margin-bottom: 16px; padding: 17px; }
.supported-models-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 13px; }
.supported-models-head h3 { margin: 0 0 3px; font-size: 15px; }
.supported-models-head p { margin: 0; color: var(--soft); font-size: 12px; }
.supported-models-head code { color: var(--acid); }
.supported-model-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.supported-model { display: flex; align-items: flex-start; gap: 11px; min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.018); }
.supported-model-icon { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 9px; background: rgba(216,255,79,.08); color: var(--acid); }
.supported-model-icon .icon { width: 15px; height: 15px; }
.supported-model strong, .supported-model small { display: block; }
.supported-model strong { margin-bottom: 4px; font-size: 13px; }
.supported-model small { color: #aeb5bf; font-size: 11px; line-height: 1.5; }
.supported-model code { color: #e3fba0; font: 10px "IBM Plex Mono",monospace; }
.supported-model-copy { min-width: 0; }
.supported-model-title { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.supported-model-title span { padding: 2px 6px; border-radius: 999px; background: rgba(216,255,79,.08); color: var(--acid); font-size: 9px; font-weight: 750; }
.supported-model-copy p { margin: 2px 0 7px; color: #d9dde2; font-size: 11px; line-height: 1.55; }
.supported-model-copy small + small { margin-top: 4px; }
.supported-model-copy b { color: #edf0f2; }

.model-guide-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.model-guide-card { position: relative; overflow: hidden; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.model-guide-card.recommended { border-color: rgba(216,255,79,.38); background: linear-gradient(145deg,rgba(216,255,79,.065),rgba(255,255,255,.018) 65%),var(--panel); }
.model-guide-card.locked { border-color: rgba(214,164,91,.2); }
.model-guide-card.locked .model-guide-icon, .model-guide-card.locked .model-guide-name span { color: #d6a45b; }
.model-guide-head { display: flex; align-items: flex-start; gap: 12px; }
.model-guide-icon { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 11px; background: rgba(216,255,79,.09); color: var(--acid); }
.model-guide-icon .icon { width: 17px; height: 17px; }
.model-guide-name { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.model-guide-name h3 { margin: 0; font-size: 17px; }
.model-guide-name span { padding: 3px 7px; border-radius: 999px; background: rgba(216,255,79,.09); color: var(--acid); font-size: 9px; font-weight: 800; }
.model-guide-head p { margin: 7px 0 0; color: #aeb5bf; font-size: 12px; line-height: 1.65; }
.model-guide-card ul { display: grid; gap: 7px; margin: 17px 0; padding: 14px 0; list-style: none; border-block: 1px solid var(--line); }
.model-guide-card li { display: flex; align-items: center; gap: 8px; color: #dfe3e7; font-size: 11px; }
.model-guide-card li .icon { width: 13px; height: 13px; color: var(--acid); }
.model-guide-rate { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 3px 10px; }
.model-guide-rate > span { color: var(--soft); font-size: 10px; }
.model-guide-rate strong { color: var(--acid); font: 750 17px "IBM Plex Mono",monospace; }
.model-guide-rate small { grid-column: 1 / 3; color: #8f98a4; font: 9px/1.4 "IBM Plex Mono",monospace; }

.admin-model-panel { margin-top: 12px; padding: 17px; }
.admin-model-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 14px; }
.admin-model-card { padding: 15px; border: 1px solid var(--line); border-radius: 13px; background: linear-gradient(145deg,rgba(255,255,255,.03),rgba(255,255,255,.012)); }
.admin-model-title { display: flex; align-items: center; gap: 10px; }
.admin-model-title > span { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 10px; background: rgba(216,255,79,.08); color: var(--acid); }
.admin-model-title .icon { width: 16px; height: 16px; }
.admin-model-title strong, .admin-model-title small { display: block; }
.admin-model-title strong { font-size: 14px; }
.admin-model-title small { margin-top: 2px; color: var(--soft); font-size: 11px; }
.admin-model-numbers { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line); }
.admin-model-numbers strong, .admin-model-numbers span { display: block; }
.admin-model-numbers strong { font: 700 15px "IBM Plex Mono",monospace; }
.admin-model-numbers span { margin-top: 3px; color: var(--soft); font-size: 11px; }

.model-help { display: grid; gap: 5px; margin-top: 9px; color: #aeb5bf; font-size: 11px; }
.model-help span { display: block; }
.model-help strong { color: #edf0f2; }
.model-help small { display: block; margin: 3px 0 8px; color: #89929e; font: 10px "IBM Plex Mono",monospace; }

/* Admin per-model prompt control */
.config-workspace { display:grid; gap:18px; width:min(100%,1500px); margin:0 auto; }
.config-general { width:100%; max-width:none; margin:0; }
.prompt-control-section { overflow:hidden; padding:24px; border:1px solid var(--line); border-radius:18px; background:radial-gradient(circle at 100% 0,rgba(216,255,79,.075),transparent 27%),linear-gradient(150deg,#15191e,#111419); }
.prompt-control-head { display:flex; align-items:flex-start; justify-content:space-between; gap:22px; margin-bottom:19px; }
.prompt-control-head h3 { margin:6px 0 4px; color:#fff; font-size:21px; letter-spacing:-.025em; }
.prompt-control-head p { margin:0; color:#9ba4af; font-size:12px; line-height:1.65; }
.prompt-safety-badge { display:inline-flex; align-items:center; gap:8px; flex:0 0 auto; padding:9px 12px; border:1px solid rgba(89,224,145,.2); border-radius:999px; background:rgba(89,224,145,.07); color:#72e49c; font-size:11px; font-weight:700; }
.prompt-safety-badge .icon { width:15px; height:15px; }
.model-prompt-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.model-prompt-card { min-width:0; padding:17px; border:1px solid #30363e; border-radius:15px; background:rgba(8,11,14,.48); transition:border-color .16s ease,box-shadow .16s ease; }
.model-prompt-card:focus-within { border-color:rgba(216,255,79,.45); box-shadow:0 0 0 3px rgba(216,255,79,.055); }
.model-prompt-card.customized { border-color:rgba(216,255,79,.25); background:linear-gradient(145deg,rgba(216,255,79,.045),rgba(8,11,14,.5)); }
.model-prompt-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:13px; }
.model-prompt-head > div { min-width:0; display:flex; align-items:center; gap:10px; }
.model-prompt-head > div > span { width:38px; height:38px; display:grid; place-items:center; flex:0 0 auto; border-radius:11px; background:rgba(216,255,79,.09); color:var(--acid); }
.model-prompt-head > div > span .icon { width:17px; height:17px; }
.model-prompt-head strong,.model-prompt-head small { display:block; }
.model-prompt-head strong { color:#f5f7f8; font-size:14px; }
.model-prompt-head small { margin-top:2px; color:#9099a5; font-size:10px; }
.model-prompt-textarea.form-control { width:100%; height:285px; min-height:190px; padding:14px; resize:vertical; border-color:#2b3138; background:#0b0e12; color:#dfe4e8; font:12px/1.72 "IBM Plex Mono","Noto Sans Thai",monospace; tab-size:2; }
.model-prompt-meta { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:9px; color:#7f8994; font-size:10px; }
.model-prompt-meta .mono { flex:0 0 auto; color:#aeb7c1; }
.config-savebar { position:sticky; z-index:5; bottom:14px; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:13px 15px; border:1px solid rgba(216,255,79,.26); border-radius:15px; background:rgba(18,22,26,.94); box-shadow:0 16px 45px rgba(0,0,0,.45); backdrop-filter:blur(16px); }
.config-savebar > div { display:flex; align-items:center; gap:9px; color:#abb3bd; font-size:11px; line-height:1.55; }
.config-savebar > div .icon { width:16px; height:16px; flex:0 0 auto; color:var(--acid); }

@media (max-width: 900px) {
  .model-prompt-grid { grid-template-columns:1fr; }
}

@media (max-width: 700px) {
  .prompt-control-section { padding:17px 13px; border-radius:15px; }
  .prompt-control-head { flex-direction:column; gap:12px; }
  .prompt-control-head h3 { font-size:19px; }
  .prompt-safety-badge { white-space:normal; }
  .model-prompt-card { padding:13px; }
  .model-prompt-head { align-items:flex-start; }
  .model-prompt-head .btn { width:38px; min-width:38px; overflow:hidden; justify-content:center; padding:0; color:transparent; gap:0; }
  .model-prompt-head .btn .icon { width:16px; color:#d8dde2; }
  .model-prompt-textarea.form-control { height:250px; padding:12px; font-size:11px; }
  .model-prompt-meta { align-items:flex-start; font-size:9px; }
  .config-savebar { position:static; flex-direction:column; align-items:stretch; gap:10px; padding:12px; }
  .config-savebar .btn { width:100%; }
}

/* Monthly leaderboard */
.leaderboard-page { display: grid; gap: 16px; padding-bottom: 28px; }
.leaderboard-loading { min-height: 470px; display: grid; place-content: center; justify-items: center; text-align: center; }
.leaderboard-loading > span { width: 54px; height: 54px; display: grid; place-items: center; border: 1px solid rgba(216,255,79,.2); border-radius: 17px; background: rgba(216,255,79,.07); color: var(--acid); }
.leaderboard-loading .icon { width: 24px; height: 24px; animation: spin .9s linear infinite; }
.leaderboard-loading h2 { margin: 18px 0 5px; }
.leaderboard-loading p { margin: 0; color: var(--soft); }
.leaderboard-hero { position: relative; isolation: isolate; min-height: 240px; display: grid; grid-template-columns: minmax(0,1fr) 220px; align-items: center; gap: 30px; overflow: hidden; padding: 34px 38px; border: 1px solid #30363e; border-radius: 22px; background: radial-gradient(circle at 78% 30%,rgba(216,255,79,.17),transparent 30%),linear-gradient(130deg,#171b20 0%,#111419 62%,#1a2115 100%); box-shadow: 0 24px 80px rgba(0,0,0,.28); }
.leaderboard-hero::before { content:""; position:absolute; z-index:-1; inset:0; opacity:.32; background-image: linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px); background-size:34px 34px; mask-image:linear-gradient(90deg,#000,transparent 82%); }
.leaderboard-hero::after { content:""; position:absolute; z-index:-1; width:360px; height:360px; right:-170px; top:-210px; border:1px solid rgba(216,255,79,.24); border-radius:50%; box-shadow:0 0 0 42px rgba(216,255,79,.035),0 0 0 86px rgba(216,255,79,.02); }
.leaderboard-kicker { display:flex; align-items:center; gap:8px; color:var(--acid); font:800 10px "IBM Plex Mono",monospace; letter-spacing:.12em; }
.leaderboard-kicker .icon { width:14px; height:14px; }
.leaderboard-hero h2 { max-width:700px; margin:14px 0 10px; color:#fff; font-size:clamp(28px,3vw,48px); line-height:1.08; letter-spacing:-.045em; }
.leaderboard-hero-copy > p { max-width:660px; margin:0; color:#aeb6c0; font-size:14px; line-height:1.7; }
.leaderboard-hero-copy > p strong { color:#fff; }
.leaderboard-season { display:flex; flex-wrap:wrap; gap:9px; margin-top:22px; }
.leaderboard-season span { display:flex; align-items:center; gap:7px; padding:8px 11px; border:1px solid rgba(255,255,255,.09); border-radius:999px; background:rgba(0,0,0,.18); color:#d7dce2; font-size:11px; }
.leaderboard-season .icon { width:13px; height:13px; color:var(--acid); }
.leaderboard-prize { position:relative; min-height:170px; display:grid; place-content:center; justify-items:center; overflow:hidden; padding:22px; border:1px solid rgba(216,255,79,.28); border-radius:20px; background:linear-gradient(145deg,rgba(216,255,79,.14),rgba(216,255,79,.035)); box-shadow:inset 0 1px rgba(255,255,255,.08),0 20px 50px rgba(0,0,0,.25); }
.leaderboard-prize small { position:relative; z-index:1; color:#e7edcf; font:700 12px/1.4 "Noto Sans Thai",sans-serif; letter-spacing:.01em; }
.leaderboard-prize strong { position:relative; z-index:1; display:flex; align-items:baseline; gap:3px; margin:3px 0 1px; color:var(--acid); font:850 60px/.96 "Noto Sans Thai",sans-serif; font-variant-numeric:tabular-nums; letter-spacing:-.055em; text-shadow:0 0 30px rgba(216,255,79,.2); }
.leaderboard-prize strong b { font:750 23px/1 "Noto Sans Thai",sans-serif; letter-spacing:-.03em; }
.leaderboard-prize > span { position:relative; z-index:1; color:#b7c09d; font:600 11px/1.5 "Noto Sans Thai",sans-serif; }
.leaderboard-prize > i { position:absolute; right:15px; bottom:13px; color:rgba(216,255,79,.14); transform:rotate(-5deg); }
.leaderboard-prize > i .icon { width:46px; height:46px; }
.leaderboard-eligibility { display:grid; grid-template-columns:40px minmax(0,1fr) auto; align-items:center; gap:13px; padding:14px 16px; border:1px solid rgba(255,184,77,.2); border-radius:15px; background:rgba(255,184,77,.055); }
.leaderboard-eligibility > span { width:40px; height:40px; display:grid; place-items:center; border-radius:11px; background:rgba(255,184,77,.1); color:#ffbd5a; }
.leaderboard-eligibility.eligible { border-color:rgba(89,224,145,.2); background:rgba(89,224,145,.055); }
.leaderboard-eligibility.eligible > span { background:rgba(89,224,145,.1); color:#59e091; }
.leaderboard-eligibility .icon { width:17px; height:17px; }
.leaderboard-eligibility strong,.leaderboard-eligibility small { display:block; }
.leaderboard-eligibility strong { color:#edf0f3; font-size:13px; }
.leaderboard-eligibility small { margin-top:3px; color:#9099a5; font-size:10px; }
.leaderboard-podium { min-height:420px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:end; gap:13px; padding:46px 24px 20px; border:1px solid var(--line); border-radius:20px; background:radial-gradient(circle at 50% 12%,rgba(216,255,79,.09),transparent 35%),linear-gradient(180deg,#12161b,#0e1115); }
.leader-podium { --medal:#c78c46; position:relative; min-width:0; display:flex; flex-direction:column; align-items:center; padding:22px 18px 76px; border:1px solid color-mix(in srgb,var(--medal) 28%,#30353c); border-radius:18px; background:linear-gradient(180deg,color-mix(in srgb,var(--medal) 9%,#181c21),#13171b); text-align:center; box-shadow:0 18px 48px rgba(0,0,0,.2),0 -18px 60px color-mix(in srgb,var(--medal) 7%,transparent); }
.leader-podium-1 { --medal:#d8ff4f; min-height:334px; order:2; }
.leader-podium-2 { --medal:#b8c5d2; min-height:290px; order:1; }
.leader-podium-3 { --medal:#df9554; min-height:254px; order:3; }
.leader-podium.is-me { box-shadow:0 0 0 2px rgba(216,255,79,.22),0 -18px 60px rgba(216,255,79,.08); }
.leader-crown { position:absolute; top:-18px; width:38px; height:38px; display:grid; place-items:center; border:1px solid color-mix(in srgb,var(--medal) 35%,transparent); border-radius:11px; background:#171b20; color:var(--medal); transform:rotate(-5deg); }
.leader-crown .icon { width:19px; height:19px; }
.leader-avatar { width:66px; height:66px; display:grid; place-items:center; margin:6px 0 12px; border:2px solid var(--medal); border-radius:20px; background:linear-gradient(145deg,color-mix(in srgb,var(--medal) 22%,#232831),#15191e); color:#fff; font:850 24px "IBM Plex Mono",monospace; box-shadow:0 12px 30px color-mix(in srgb,var(--medal) 12%,transparent); }
.leader-avatar.has-image { overflow:hidden; }
.leader-podium-1 .leader-avatar { width:76px; height:76px; font-size:28px; }
.leader-rank-label { color:var(--medal); font:800 8px "IBM Plex Mono",monospace; letter-spacing:.15em; }
.leader-podium h3 { max-width:100%; overflow:hidden; margin:7px 0 8px; color:#fff; font-size:16px; text-overflow:ellipsis; white-space:nowrap; }
.leader-podium strong { color:var(--medal); font:800 21px/1.2 "Noto Sans Thai",sans-serif; font-variant-numeric:tabular-nums; letter-spacing:-.025em; }
.leader-podium strong small { color:#929ba6; font-size:10px; font-weight:600; }
.leader-podium p { margin:7px 0 0; color:#808994; font-size:10px; }
.leader-step { position:absolute; right:0; bottom:0; left:0; height:66px; display:grid; place-items:center; border-top:1px solid color-mix(in srgb,var(--medal) 18%,transparent); border-radius:0 0 17px 17px; background:linear-gradient(180deg,color-mix(in srgb,var(--medal) 8%,transparent),transparent); }
.leader-step b { color:color-mix(in srgb,var(--medal) 68%,transparent); font:850 35px/1 "Noto Sans Thai",sans-serif; font-variant-numeric:tabular-nums; letter-spacing:-.04em; }
.leaderboard-lower { display:grid; grid-template-columns:minmax(0,1fr) 300px; align-items:start; gap:14px; }
.leaderboard-table-panel { overflow:hidden; }
.leaderboard-table-panel .panel-head { padding:17px 18px; }
.leaderboard-table-panel .panel-head h3 { margin:0 0 3px; }
.leaderboard-table-panel .panel-head p { margin:0; }
.leader-table-rank { color:#89929d; font:750 12px "IBM Plex Mono",monospace; }
.leader-row-me { background:rgba(216,255,79,.045); box-shadow:inset 3px 0 var(--acid); }
.leader-row-me .leader-table-rank,.leader-points-cell { color:var(--acid); }
.leaderboard-empty { padding:26px; color:#89929d; text-align:center; }
.leaderboard-side { display:grid; gap:12px; }
.my-rank-card { position:relative; overflow:hidden; padding:22px; background:linear-gradient(140deg,rgba(216,255,79,.1),rgba(255,255,255,.02)); }
.my-rank-card::after { content:"RANK"; position:absolute; right:-9px; top:3px; color:rgba(216,255,79,.045); font:900 62px "IBM Plex Mono",monospace; }
.my-rank-card > span { color:#aeb891; font:800 9px "IBM Plex Mono",monospace; letter-spacing:.13em; }
.my-rank-card > strong { display:block; margin:10px 0 4px; color:var(--acid); font:850 46px/1 "IBM Plex Mono",monospace; }
.my-rank-card p { margin:0 0 15px; color:#a7afb9; font-size:11px; }
.my-rank-card p b { color:#fff; }
.my-rank-card > div { height:5px; overflow:hidden; border-radius:999px; background:#272c32; }
.my-rank-card > div i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#8eab27,var(--acid)); box-shadow:0 0 15px rgba(216,255,79,.24); }
.leaderboard-rules,.previous-winners { padding:20px; }
.leaderboard-rules h3,.previous-winners h3 { display:flex; align-items:center; gap:8px; margin:0 0 14px; font-size:14px; }
.leaderboard-rules h3 .icon { width:16px; height:16px; color:var(--acid); }
.leaderboard-rules ol { display:grid; gap:12px; margin:0; padding:0; list-style:none; }
.leaderboard-rules li { display:flex; align-items:center; gap:10px; color:#b8bfc7; font-size:11px; }
.leaderboard-rules li b { width:26px; height:26px; display:grid; place-items:center; flex:0 0 auto; border-radius:8px; background:rgba(216,255,79,.07); color:var(--acid); font:750 9px "IBM Plex Mono",monospace; }
.previous-winners > span { display:grid; grid-template-columns:25px minmax(0,1fr) auto; align-items:center; gap:7px; padding:8px 0; border-top:1px solid var(--line); color:#d8dde2; font-size:11px; }
.previous-winners > span b { color:var(--acid); }
.previous-winners > span small { color:#7f8994; }

@media (max-width: 900px) {
  .leaderboard-hero { grid-template-columns:1fr 170px; padding:28px; }
  .leaderboard-lower { grid-template-columns:1fr; }
  .leaderboard-side { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width: 700px) {
  .leaderboard-hero { grid-template-columns:1fr; padding:24px 20px; }
  .leaderboard-prize { min-height:125px; }
  .leaderboard-podium { min-height:0; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:stretch; gap:8px; padding:24px 8px 8px; border-radius:16px; }
  .leader-podium { min-height:196px; padding:15px 8px 50px; border-bottom:1px solid color-mix(in srgb,var(--medal) 28%,#30353c); border-radius:14px; }
  .leader-podium-1 { grid-column:1 / -1; min-height:218px; order:1; }
  .leader-podium-2 { order:2; }
  .leader-podium-3 { order:3; }
  .leader-crown { top:-15px; width:34px; height:34px; border-radius:10px; }
  .leader-crown .icon { width:17px; height:17px; }
  .leader-avatar,.leader-podium-2 .leader-avatar,.leader-podium-3 .leader-avatar { width:48px; height:48px; margin:4px 0 8px; border-radius:14px; font-size:19px; }
  .leader-podium-1 .leader-avatar { width:62px; height:62px; border-radius:17px; font-size:23px; }
  .leader-rank-label { font-size:7px; }
  .leader-podium h3 { width:100%; max-width:150px; margin:5px 0 5px; font-size:12px; }
  .leader-podium strong { font-size:15px; }
  .leader-podium strong small { font-size:8px; }
  .leader-podium p { width:100%; max-width:150px; overflow:hidden; margin-top:4px; font-size:8px; line-height:1.3; text-overflow:ellipsis; white-space:nowrap; }
  .leader-step { height:42px; }
  .leader-step b { font-size:27px; }
  .leaderboard-eligibility { grid-template-columns:40px minmax(0,1fr); }
  .leaderboard-eligibility .btn { grid-column:1 / 3; width:100%; }
  .leaderboard-side { grid-template-columns:1fr; }
}

@media (max-width: 700px) {
  .app-shell.is-chat .app-topbar { padding-inline: 12px; }
  .app-shell.is-chat .app-topbar-title { display: none; }
  .app-shell.is-chat .topbar-actions { flex: 1; justify-content: flex-end; }
  .app-shell.is-chat .topbar-actions > .btn { display: none; }
  .model-selector { width:min(250px,calc(100vw - 82px)); min-width:0; max-width:calc(100vw - 82px); }
  .app-shell.is-chat .model-selector .model-picker-menu { position:fixed; top:74px; right:12px; left:12px; width:auto; max-height:calc(100dvh - 92px); overflow-y:auto; overscroll-behavior:contain; transform-origin:top center; }
  .model-picker-option { min-height:54px; grid-template-columns:34px minmax(0,1fr) auto 19px; gap:8px; padding:7px 8px; }
  .supported-model-grid, .admin-model-grid, .model-guide-grid { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .app-shell.is-chat .app-topbar { gap:8px; }
  .app-shell.is-chat .topbar-actions { min-width:0; }
  .model-selector { flex:1; width:auto; max-width:none; height:58px; padding-right:8px; }
  .model-selector > span { width:30px; height:30px; }
  .model-picker-trigger { gap:6px; }
  .model-picker-rate { padding-inline:6px; }
}

/* API key command center */
.keys-page { display:grid; gap:16px; width:min(100%,1500px); margin:0 auto; }
.keys-hero { position:relative; isolation:isolate; overflow:hidden; display:grid; grid-template-columns:minmax(0,1fr) minmax(360px,460px); align-items:center; gap:38px; min-height:250px; padding:34px 38px; border:1px solid #313840; border-radius:20px; background:radial-gradient(circle at 82% 12%,rgba(216,255,79,.15),transparent 28%),linear-gradient(125deg,#181c21 0%,#111419 66%,#192015 100%); box-shadow:0 24px 80px rgba(0,0,0,.22); }
.keys-hero::before { content:""; position:absolute; z-index:-1; inset:0; opacity:.32; background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:32px 32px; mask-image:linear-gradient(90deg,#000,transparent 82%); }
.keys-hero::after { content:""; position:absolute; z-index:-1; width:330px; height:330px; right:-165px; top:-205px; border:1px solid rgba(216,255,79,.22); border-radius:50%; box-shadow:0 0 0 42px rgba(216,255,79,.03),0 0 0 84px rgba(216,255,79,.018); }
.keys-eyebrow,.section-kicker,.admin-backup-eyebrow { display:inline-flex; align-items:center; gap:7px; color:var(--acid); font:800 9px "IBM Plex Mono",monospace; letter-spacing:.13em; }
.keys-eyebrow .icon,.admin-backup-eyebrow .icon { width:15px; height:15px; }
.keys-hero-copy h2 { margin:13px 0 9px; color:#fff; font-size:clamp(29px,3vw,45px); line-height:1.03; letter-spacing:-.052em; }
.keys-hero-copy h2 em { color:var(--acid); font-style:normal; }
.keys-hero-copy > p { max-width:650px; margin:0; color:#aeb6c0; font-size:13px; line-height:1.75; }
.keys-hero-meta { display:flex; flex-wrap:wrap; gap:9px; margin-top:22px; }
.keys-hero-meta span { display:inline-flex; align-items:center; gap:7px; padding:7px 10px; border:1px solid rgba(255,255,255,.09); border-radius:999px; background:rgba(0,0,0,.18); color:#d5dbe1; font-size:10px; }
.keys-hero-meta .icon { width:13px; height:13px; color:var(--acid); }
.keys-hero-actions { display:grid; gap:10px; }
.keys-cta { position:relative; width:100%; min-height:78px; display:grid; grid-template-columns:44px minmax(0,1fr) 22px; align-items:center; gap:13px; padding:13px 16px; border:1px solid var(--line); border-radius:15px; color:#fff; cursor:pointer; text-align:left; transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease,background .16s ease; }
.keys-cta:hover { transform:translateY(-2px); }
.keys-cta:focus-visible { outline:2px solid var(--acid); outline-offset:3px; }
.keys-cta.primary { border-color:rgba(216,255,79,.62); background:linear-gradient(105deg,#d8ff4f,#baf62f); color:#10130d; box-shadow:0 14px 34px rgba(194,242,49,.14); }
.keys-cta.primary:hover { box-shadow:0 18px 42px rgba(194,242,49,.22); }
.keys-cta.secondary { background:linear-gradient(115deg,rgba(255,255,255,.055),rgba(255,255,255,.022)); }
.keys-cta.secondary:hover { border-color:rgba(216,255,79,.3); background:rgba(255,255,255,.065); }
.keys-cta-icon { width:44px; height:44px; display:grid; place-items:center; border-radius:12px; background:rgba(0,0,0,.13); }
.keys-cta.secondary .keys-cta-icon { background:rgba(216,255,79,.085); color:var(--acid); }
.keys-cta-icon .icon { width:20px; height:20px; }
.keys-cta strong,.keys-cta small { display:block; }
.keys-cta strong { font-size:13px; }
.keys-cta small { margin-top:3px; color:rgba(16,19,13,.68); font-size:10px; font-weight:600; }
.keys-cta.secondary small { color:#8f99a5; }
.keys-cta-arrow { width:18px; height:18px; justify-self:end; }
.keys-security-strip { display:grid; grid-template-columns:38px minmax(0,1fr) auto; align-items:center; gap:12px; padding:13px 15px; border:1px solid rgba(94,231,231,.18); border-radius:14px; background:linear-gradient(100deg,rgba(94,231,231,.065),rgba(94,231,231,.018)); }
.keys-security-strip > .icon { width:38px; height:38px; padding:10px; border-radius:11px; background:rgba(94,231,231,.08); color:var(--cyan); }
.keys-security-strip strong,.keys-security-strip span { display:block; }
.keys-security-strip strong { color:#e3e9ec; font-size:11px; }
.keys-security-strip div span { margin-top:2px; color:#9ba6af; font-size:10px; }
.keys-security-badge { color:var(--cyan)!important; font:750 8px "IBM Plex Mono",monospace; letter-spacing:.1em; }
.keys-page .supported-models { margin:0; padding:22px; border-radius:18px; }
.keys-page .supported-models-head { margin-bottom:16px; }
.keys-page .supported-models-head h3,.key-vault-head h3 { margin:5px 0 4px; font-size:18px; }
.model-count-badge,.key-count { display:inline-flex; align-items:center; min-height:30px; padding:0 10px; border:1px solid rgba(216,255,79,.16); border-radius:9px; background:rgba(216,255,79,.065); color:var(--acid); font:750 9px "IBM Plex Mono",monospace; }
.keys-page .supported-model-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.keys-page .supported-model { min-height:190px; padding:16px; border-radius:14px; background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.012)); transition:transform .16s ease,border-color .16s ease,background .16s ease; }
.keys-page .supported-model:hover { transform:translateY(-2px); border-color:rgba(216,255,79,.24); background:linear-gradient(145deg,rgba(216,255,79,.05),rgba(255,255,255,.015)); }
.keys-page .supported-model.recommended { border-color:rgba(216,255,79,.28); background:linear-gradient(145deg,rgba(216,255,79,.065),rgba(255,255,255,.012) 70%); }
.model-api-meta { display:flex; flex-wrap:wrap; gap:6px; margin-top:11px; padding-top:10px; border-top:1px solid var(--line); }
.model-api-meta code,.model-api-meta span { display:inline-flex!important; align-items:center; min-height:24px; padding:0 7px; border-radius:7px; background:#111418; color:#c8d0d8; font:700 8px "IBM Plex Mono",monospace; }
.model-api-meta code { color:var(--acid); }
.key-vault { padding:22px; border:1px solid var(--line); border-radius:18px; background:linear-gradient(145deg,#15191e,#111419); }
.key-vault-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:16px; }
.key-vault-head p { margin:0; color:#929ca7; font-size:11px; }
.key-card-v2 { min-height:88px; gap:15px; padding:15px 17px; border-radius:14px; background:rgba(255,255,255,.02); transition:border-color .16s ease,background .16s ease,transform .16s ease; }
.key-card-v2:hover { transform:translateY(-1px); border-color:rgba(216,255,79,.2); background:rgba(255,255,255,.034); }
.key-card-v2 .key-icon { width:46px; height:46px; border:1px solid rgba(216,255,79,.12); border-radius:13px; background:rgba(216,255,79,.075); }
.key-name-row { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.key-name-row strong { margin:0; color:#f4f6f8; font-size:13px; }
.key-live { display:inline-flex; align-items:center; gap:5px; padding:3px 7px; border-radius:999px; background:rgba(89,224,145,.075); color:#68dd99; font-size:8px; font-weight:700; }
.key-live i { width:5px; height:5px; border-radius:50%; background:#59e091; box-shadow:0 0 9px rgba(89,224,145,.55); }
.key-card-v2 .key-value { margin-top:5px; color:#c7cdd4; font-size:10px; letter-spacing:.02em; }
.key-card-v2 .key-meta { display:flex; flex-wrap:wrap; gap:7px 14px; margin-top:6px; }
.key-card-v2 .key-meta span { display:flex; align-items:center; gap:5px; }
.key-card-v2 .key-meta .icon { width:11px; height:11px; color:#78838e; }
.key-delete-action { min-height:38px; display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:0 11px; border:1px solid rgba(255,92,101,.2); border-radius:10px; background:rgba(255,92,101,.055); color:#ff7b83; cursor:pointer; font-size:9px; font-weight:700; transition:background .15s ease,border-color .15s ease,transform .15s ease; }
.key-delete-action:hover { transform:translateY(-1px); border-color:rgba(255,92,101,.42); background:rgba(255,92,101,.12); }
.key-delete-action .icon { width:14px; height:14px; }
.keys-empty { display:grid; place-items:center; min-height:230px; padding:28px; border:1px dashed #343a42; border-radius:14px; background:rgba(0,0,0,.1); text-align:center; }
.keys-empty > span { width:50px; height:50px; display:grid; place-items:center; margin-bottom:12px; border-radius:14px; background:rgba(216,255,79,.075); color:var(--acid); }
.keys-empty > span .icon { width:22px; height:22px; }
.keys-empty h3 { margin:0 0 4px; }
.keys-empty p { max-width:440px; margin:0 0 15px; color:#909aa5; font-size:11px; }

/* Production backup console */
.admin-backup-panel { position:relative; overflow:hidden; display:grid; grid-template-columns:minmax(0,.95fr) minmax(420px,1.05fr); gap:26px; margin-top:12px; padding:22px; border-radius:17px; background:radial-gradient(circle at 8% 25%,rgba(94,231,231,.07),transparent 30%),linear-gradient(130deg,#151a1f,#111418 70%); }
.backup-panel-copy { align-self:center; padding:8px; }
.backup-panel-copy h3 { margin:9px 0 5px; color:#fff; font-size:23px; letter-spacing:-.035em; }
.backup-panel-copy > p { max-width:570px; margin:0; color:#a7b0ba; font-size:11px; line-height:1.7; }
.backup-facts { display:flex; flex-wrap:wrap; gap:7px; margin-top:17px; }
.backup-facts span { display:inline-flex; align-items:center; gap:6px; padding:6px 8px; border:1px solid rgba(255,255,255,.07); border-radius:8px; background:rgba(0,0,0,.13); color:#b9c1c8; font-size:9px; }
.backup-facts .icon { width:12px; height:12px; color:var(--cyan); }
.backup-panel-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.backup-create-btn { min-height:44px; }
.backup-create-btn:disabled { opacity:.65; cursor:wait; }
.backup-create-btn:disabled .icon { animation:spin .8s linear infinite; }
.backup-list { overflow:hidden; border:1px solid var(--line); border-radius:14px; background:rgba(6,8,10,.38); }
.backup-list-head { min-height:43px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 13px; border-bottom:1px solid var(--line); }
.backup-list-head span { color:#b9c1ca; font-size:10px; font-weight:700; }
.backup-list-head strong { color:var(--cyan); font:750 8px "IBM Plex Mono",monospace; letter-spacing:.08em; }
.backup-row { display:grid; grid-template-columns:35px minmax(0,1fr) auto; align-items:center; gap:10px; padding:10px 12px; border-bottom:1px solid var(--line); }
.backup-row:last-child { border-bottom:0; }
.backup-row:hover { background:rgba(255,255,255,.018); }
.backup-file-icon { width:35px; height:35px; display:grid; place-items:center; border-radius:9px; background:rgba(94,231,231,.07); color:var(--cyan); }
.backup-file-icon .icon { width:15px; height:15px; }
.backup-file-copy { min-width:0; }
.backup-file-copy strong,.backup-file-copy code,.backup-file-copy span { display:block; }
.backup-file-copy strong { color:#e4e8ec; font-size:10px; }
.backup-file-copy code { overflow:hidden; margin:2px 0; color:#a7b1bb; font:8px "IBM Plex Mono",monospace; text-overflow:ellipsis; white-space:nowrap; }
.backup-file-copy span { color:#727d88; font-size:8px; }
.backup-download { min-height:32px; display:inline-flex; align-items:center; gap:6px; padding:0 9px; border:1px solid rgba(94,231,231,.15); border-radius:8px; background:rgba(94,231,231,.045); color:#8fe9e9; cursor:pointer; font-size:8px; font-weight:700; transition:background .15s ease,border-color .15s ease; }
.backup-download:hover { border-color:rgba(94,231,231,.36); background:rgba(94,231,231,.1); }
.backup-download .icon { width:12px; height:12px; }
.backup-empty { min-height:175px; display:grid; place-content:center; justify-items:center; color:#7f8994; text-align:center; }
.backup-empty .icon { width:28px; height:28px; margin-bottom:9px; color:var(--cyan); opacity:.65; }
.backup-empty strong { color:#c3cad0; font-size:11px; }
.backup-empty span { margin-top:3px; font-size:9px; }

@media (max-width: 1180px) {
  .keys-hero { grid-template-columns:1fr minmax(320px,400px); padding:30px; }
  .keys-page .supported-model-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .admin-backup-panel { grid-template-columns:1fr; }
}

@media (max-width: 700px) {
  .keys-page { gap:12px; }
  .keys-hero { grid-template-columns:1fr; gap:23px; min-height:0; padding:24px 18px; border-radius:16px; }
  .keys-hero-copy h2 { font-size:31px; }
  .keys-hero-copy > p { font-size:11px; }
  .keys-hero-meta { margin-top:16px; }
  .keys-cta { min-height:72px; grid-template-columns:40px minmax(0,1fr) 18px; padding:11px 13px; border-radius:13px; }
  .keys-cta-icon { width:40px; height:40px; }
  .keys-security-strip { grid-template-columns:34px minmax(0,1fr); padding:11px; }
  .keys-security-strip > .icon { width:34px; height:34px; padding:9px; }
  .keys-security-badge { display:none!important; }
  .keys-page .supported-models,.key-vault { padding:16px; border-radius:15px; }
  .keys-page .supported-models-head,.key-vault-head { flex-direction:column; }
  .keys-page .supported-model-grid { grid-template-columns:1fr; }
  .keys-page .supported-model { min-height:0; }
  .key-card-v2 { align-items:flex-start; padding:14px; }
  .key-card-v2 .key-icon { width:40px; height:40px; }
  .key-card-v2 .key-actions { width:100%; padding-left:55px; }
  .key-delete-action { width:100%; }
  .admin-backup-panel { gap:18px; padding:16px; }
  .backup-panel-copy { padding:2px; }
  .backup-panel-copy h3 { font-size:20px; }
  .backup-panel-actions { flex-direction:column; }
  .backup-panel-actions .btn { width:100%; }
  .backup-row { grid-template-columns:34px minmax(0,1fr); }
  .backup-download { grid-column:1 / -1; width:100%; justify-content:center; }
}

/* Desktop typography scale — keep the interface readable on 1080p/1440p screens */
@media (min-width: 901px) {
  body { font-size:17px; }
  .app-shell { grid-template-columns:280px minmax(0,1fr); }
  .sidebar { padding:20px 16px; }
  .sidebar .brand-copy { font-size:16px; }
  .brand-copy small { font-size:11px; }
  .nav-group-label { font-size:11px; }
  .side-link { min-height:42px; padding:10px 11px; font-size:15px; }
  .side-link .badge { font-size:11px; }
  .balance-card-head { font-size:10px; }
  .balance-active { font-size:9px; }
  .balance-card > small,.balance-chat small,.balance-api span,.balance-card-foot { font-size:11px; }
  .balance-points { font-size:30px; }
  .balance-chat strong { font-size:19px; }
  .balance-api strong { font-size:18px; }
  .user-meta strong { font-size:14px; }
  .user-meta small { font-size:11px; }

  .app-topbar { height:76px; padding-inline:30px; }
  .app-topbar-title h1,.app-shell.is-chat .app-topbar-title h1 { font-size:20px; }
  .app-topbar-title p { font-size:13px; }
  .model-pill { font-size:12px; }
  .page-content { padding:32px; }
  .content-head h2 { font-size:30px; }
  .content-head p { font-size:15px; }
  .btn { min-height:46px; padding-inline:19px; font-size:15px; }
  .btn-sm { min-height:38px; font-size:13px; }
  .btn-lg { min-height:56px; font-size:16px; }

  .metric-card > span,.metric-delta,.admin-metric > span:not(.metric-delta),.admin-metric > small { font-size:12px; }
  .metric-card strong,.admin-metric > strong { font-size:28px; }
  .panel-head h3,.admin-panel-head h3 { font-size:16px; }
  .panel-head p,.admin-panel-head p { font-size:12px; }
  .admin-finance-head h3 { font-size:18px; }
  .admin-finance-head p { font-size:12px; }
  .admin-finance-eyebrow,.finance-tile small,.finance-tile p,.admin-finance-foot small { font-size:11px; }
  .finance-tile strong { font-size:24px; }
  .admin-finance-foot > span { font-size:12px; }
  .activity strong,.admin-pulse-list strong { font-size:14px; }
  .activity span,.admin-pulse-list span { font-size:12px; }
  .chart-filter,.admin-chart-summary div span,.live-indicator,.user-donut span,.donut-legend-row { font-size:11px; }
  .admin-chart-summary div strong { font-size:19px; }
  .tag { min-height:27px; font-size:11px; }
  .notice { font-size:13px; }

  .data-table th { font-size:11px; }
  .data-table td { font-size:14px; }
  .member-rank-toolbar-copy strong { font-size:14px; }
  .member-rank-toolbar-copy small { font-size:11px; }
  .member-rank-filter span { font-size:12px; }
  .member-rank-filter strong { font-size:10px; }
  .member-rank strong { font-size:13px; }
  .member-rank small { font-size:10px; }
  .table-user strong { font-size:14px; }
  .table-user small { font-size:11px; }
  .table-actions .btn { font-size:13px; }
  .empty-state h3 { font-size:18px; }
  .empty-state p { font-size:14px; }

  .form-label { font-size:14px; }
  .form-control { height:52px; font-size:16px; }
  .form-hint,.turnstile-field small,.turnstile-status,.auth-foot,.auth-notice { font-size:12px; }
  .forgot-link,.auth-help-links a,.auth-help-links button { font-size:14px; }
  .discord-auth-button strong { font-size:14px; }
  .discord-auth-button small,.auth-divider { font-size:11px; }

  .history-label { font-size:13px; }
  .history-label small { font-size:10px; }
  .history-item strong { font-size:14px; }
  .history-item span,.history-empty span { font-size:11px; }
  .history-empty { font-size:13px; }
  .chat-empty h2 { font-size:38px; }
  .chat-empty > p { font-size:17px; }
  .prompt-chip { min-height:46px; font-size:14px; }
  .message-meta { font-size:11px; }
  .message-bubble { font-size:17px; line-height:1.82; }
  .message-bubble code { font-size:14px; }
  .message-bubble pre[data-language]::before { font-size:11px; }
  .composer-box textarea { font-size:17px; }
  .composer-note,.composer-disclaimer { font-size:12px; }

  .topup-eyebrow,.keys-eyebrow,.section-kicker,.admin-backup-eyebrow { font-size:11px; }
  .topup-hero p,.topup-trust span,.wallet-balance-note,.checkout-section-head p { font-size:13px; }
  .wallet-balance-strip small,.package-badge,.package-price small,.package-note,.selected-package small,.selected-package div > span { font-size:11px; }
  .package-name,.wallet-amount-box > label,.point-conversion span,.payment-copy span,.payment-notice,.summary-line,.summary-line strong,.checkout-footnote,.checkout-timeline { font-size:12px; }
  .package-questions,.payment-copy strong,.promptpay-brand strong { font-size:14px; }
  .settings-nav button { font-size:15px; }
  .settings-section > p,.profile-avatar-copy p,.discord-account-status p,.discord-security-card p { font-size:13px; }

  .keys-hero-copy > p { font-size:15px; }
  .keys-hero-meta span { font-size:12px; }
  .keys-cta strong { font-size:15px; }
  .keys-cta small { font-size:12px; }
  .keys-security-strip strong { font-size:13px; }
  .keys-security-strip div span { font-size:12px; }
  .keys-security-badge,.model-count-badge,.key-count { font-size:10px; }
  .keys-page .supported-models-head p,.key-vault-head p { font-size:13px; }
  .supported-model strong { font-size:15px; }
  .supported-model-title span { font-size:11px; }
  .supported-model-copy p,.supported-model small { font-size:13px; }
  .model-api-meta code,.model-api-meta span { font-size:10px; }
  .key-name-row strong { font-size:15px; }
  .key-live { font-size:10px; }
  .key-card-v2 .key-value { font-size:12px; }
  .key-card-v2 .key-meta { font-size:11px; }
  .key-delete-action { min-height:42px; font-size:12px; }

  .backup-panel-copy > p { font-size:13px; }
  .backup-facts span { font-size:11px; }
  .backup-list-head span { font-size:12px; }
  .backup-list-head strong { font-size:10px; }
  .backup-file-copy strong { font-size:12px; }
  .backup-file-copy code,.backup-file-copy span { font-size:10px; }
  .backup-download { min-height:36px; font-size:11px; }
  .admin-model-title strong { font-size:16px; }
  .admin-model-title small,.admin-model-numbers span { font-size:12px; }
  .admin-model-numbers strong { font-size:18px; }
  .prompt-control-head h3 { font-size:24px; }
  .prompt-control-head p { font-size:14px; }
  .prompt-safety-badge { font-size:12px; }
  .model-prompt-head strong { font-size:16px; }
  .model-prompt-head small,.model-prompt-meta,.config-savebar > div { font-size:12px; }
  .model-prompt-textarea.form-control { height:320px; font-size:13px; }

  .install-setup-hero p,.install-flow-grid small,.install-command-action small,.install-api-only small,.install-security,.key-ready p,.key-choice-action small,.key-ready-warning { font-size:12px; }
  .install-flow-grid strong,.install-api-only strong,.key-choice-action strong { font-size:14px; }
  .modal-head h3 { font-size:17px; }
  .toast { font-size:14px; }

  .leaderboard-hero-copy > p { font-size:16px; }
  .leaderboard-season span,.leaderboard-eligibility small,.leader-podium p,.leaderboard-rules li,.previous-winners > span,.my-rank-card p { font-size:12px; }
  .leaderboard-eligibility strong,.leaderboard-rules h3,.previous-winners h3 { font-size:15px; }
  .leader-rank-label { font-size:10px; }
  .leader-podium h3 { font-size:18px; }
  .leader-podium strong { font-size:24px; }
  .leader-table-rank { font-size:14px; }

  .public-links a { font-size:15px; }
  .proof-row,.stat-strip span,.public-footer,.terminal-input { font-size:14px; }
  .chat-demo-message p { font-size:16px; }
  .docs-nav a,.check-list li,.price span { font-size:15px; }
  .install-method > strong,.guide-mini-steps li,.guide-security-note,.guide-success,.manual-config > p { font-size:14px; }
  .install-method .code-block { font-size:12px; }
}