:root {
  --nav-h: 72px;
  --wrap: 1160px;
  --side-w: 284px;
  --topbar-h: 60px;
  --thread-w: 780px;
  --page-w: 1100px;
  --ctl: 44px;
  --ctl-sm: 36px;
  --ctl-lg: 52px;
  --icon-btn: 40px;
  --avatar: 32px;
  --mark: 26px;
  --row: 40px;
  --section-y: var(--space-26);
  --chart-height: 168px;
  --chart-axis: 52px;
  --chart-label-h: 22px;
  --chart-gap: 2px;
  --chart-bar-max: 32px;
  --share-w: 64px;
  --share-h: 4px;
  --field-xs: 96px;
  --field-sm: 150px;
  --field-md: 240px;
  --form-narrow: 380px;
  --auth-w: 440px;
  --menu-w: 280px;
  --picker-w: 360px;
  --copy-gutter: 120px;
  --blur: 14px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--text-base);
  line-height: 1.6;
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { max-width: 100%; display: block; }
a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
button, input, textarea, select { font: inherit; color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.12; }
h1 { font-size: var(--text-h1); letter-spacing: var(--tracking-h1); }
h2 { font-size: var(--text-h2); letter-spacing: var(--tracking-h2); text-wrap: balance; }
h3 { font-size: var(--text-h3); letter-spacing: var(--tracking-h3); line-height: 1.3; }
code, pre, .mono { font-family: var(--mono); font-size: 0.92em; }
::selection { background: var(--accent-soft); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--scroll); border-radius: var(--pill); border: 2px solid transparent; background-clip: padding-box; }

.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.muted { color: var(--dim); }
.faint { color: var(--faint); }
.ok { color: var(--ok); }
.bad { color: var(--danger); }
.warn { color: var(--amber); }
.accent { color: var(--accent-ink); }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--space-3); top: var(--space-2); z-index: 50; background: var(--panel); padding: var(--space-2) var(--space-3); border-radius: var(--r-sm); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--space-6); }

.brand { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--ink); font-weight: 600; font-size: var(--text-lg); letter-spacing: -0.01em; }
.brand:hover { text-decoration: none; }
.brand-mark { width: var(--mark); height: var(--mark); flex: none; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--ctl);
  padding: 0 var(--space-5);
  border: 1px solid var(--edge-2);
  border-radius: var(--pill);
  background: transparent;
  color: var(--ink);
  font-size: var(--text-md);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn:hover { background: var(--panel-2); text-decoration: none; }
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-ghost { background: transparent; }
.btn-quiet { border-color: transparent; }
.btn-sm { height: var(--ctl-sm); padding: 0 var(--space-4); font-size: var(--text-sm); }
.btn-lg { height: var(--ctl-lg); padding: 0 var(--space-6); font-size: var(--text-base); }
.btn-danger { color: var(--danger); }
.btn-link { height: auto; padding: 0; border: 0; background: none; color: var(--accent-ink); font-weight: 400; }
.btn-link:hover { background: none; text-decoration: underline; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.btn svg { width: 18px; height: 18px; }

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: var(--icon-btn);
  height: var(--icon-btn);
  border: 1px solid var(--edge-2);
  border-radius: var(--pill);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease);
}
.icon-btn:hover { background: var(--panel-2); }
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn-quiet { border-color: transparent; }
.theme-icon-light, :root[data-theme="light"] .theme-icon-dark { display: none; }
:root[data-theme="light"] .theme-icon-light { display: block; }

.site-nav {
  position: sticky;
  top: 0;
  z-index: 30;
  height: var(--nav-h);
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(var(--blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(140%);
  box-shadow: 0 1px 0 var(--edge);
  transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), backdrop-filter var(--dur) var(--ease), -webkit-backdrop-filter var(--dur) var(--ease);
}
.js .site-nav:not(.is-scrolled) {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}
.site-main { margin-top: calc(var(--nav-h) * -1); }
.site-main > .aura-host:first-child { padding-top: var(--nav-h); }
.site-nav .wrap { height: 100%; display: flex; align-items: center; gap: var(--space-6); }
.nav-links { display: flex; gap: var(--space-1); }
.nav-links a { display: inline-flex; align-items: center; height: var(--ctl-sm); padding: 0 var(--space-4); border-radius: var(--pill); color: var(--dim); font-size: var(--text-md); }
.nav-links a:hover { color: var(--ink); background: var(--panel-2); text-decoration: none; }
.nav-links a[aria-current="page"] { color: var(--accent-ink); background: var(--accent-soft); }
.nav-spacer { flex: 1; }
.nav-actions { display: flex; align-items: center; gap: var(--space-2); }

.aura-host { position: relative; isolation: isolate; overflow: hidden; }
.aura { position: absolute; inset: 0; z-index: -1; background: var(--bg); pointer-events: none; }
.aura::before, .aura::after {
  content: "";
  position: absolute;
  inset: -30% -40%;
  filter: blur(var(--blur)) saturate(125%);
  will-change: transform;
}
.aura::before {
  background:
    radial-gradient(36% 42% at 22% 18%, var(--aura-1), transparent 70%),
    radial-gradient(30% 36% at 62% 8%, var(--aura-3), transparent 72%),
    radial-gradient(28% 30% at 86% 30%, var(--aura-2), transparent 70%);
  animation: aura-a 23s var(--ease) infinite alternate;
}
.aura::after {
  background:
    radial-gradient(26% 30% at 40% 30%, var(--aura-4), transparent 72%),
    radial-gradient(34% 30% at 10% 40%, var(--aura-3), transparent 72%),
    radial-gradient(40% 40% at 74% 20%, var(--aura-smoke), transparent 75%);
  animation: aura-b 37s var(--ease) infinite alternate;
}
.aura-fade { position: absolute; inset: auto 0 0 0; height: 55%; z-index: -1; background: linear-gradient(to bottom, transparent, var(--bg)); pointer-events: none; }
@keyframes aura-a { from { transform: translate3d(-8%, 0, 0) scale(1); } to { transform: translate3d(9%, 3%, 0) scale(1.08); } }
@keyframes aura-b { from { transform: translate3d(7%, 2%, 0) scale(1.05); } to { transform: translate3d(-10%, -2%, 0) scale(1); } }

.hero { min-height: calc(100svh - var(--nav-h)); display: grid; align-items: center; padding: var(--space-16) 0; text-align: center; }
.hero h1 { max-width: 19ch; margin: 0 auto; text-wrap: balance; }
.hero .lead { max-width: 640px; margin: var(--space-5) auto 0; font-size: var(--text-lg); }
.hero-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }
.checks { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin-top: var(--space-6); color: var(--dim); font-size: var(--text-md); }
.checks span { display: inline-flex; align-items: center; gap: var(--space-2); }
.checks svg { width: 16px; height: 16px; color: var(--ok); }

.lead { color: var(--dim); font-size: var(--text-base); line-height: 1.6; letter-spacing: -0.008em; max-width: 68ch; }
.eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); height: 30px; padding: 0 var(--space-3); border-radius: var(--pill); background: var(--accent-soft); color: var(--accent-ink); font-size: var(--text-sm); font-weight: 500; white-space: nowrap; }
.eyebrow svg { width: 16px; height: 16px; flex: none; }

.l-section { padding: var(--section-y) 0; }
.l-head { max-width: 720px; margin-bottom: var(--space-12); }
.l-head h2, .l-head h1 { margin-top: var(--space-4); }
.l-head h1 { font-size: var(--text-h2); letter-spacing: var(--tracking-h2); text-wrap: balance; }
.l-head .lead { margin-top: var(--space-4); }
.l-head-center { margin-left: auto; margin-right: auto; text-align: center; }
.l-head-center .lead { margin-left: auto; margin-right: auto; }

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.cell { padding: var(--space-8); border-radius: var(--r-lg); background: var(--panel); }
.cell h3 + p { margin-top: var(--space-3); color: var(--dim); }
.cell-num { display: block; margin-bottom: var(--space-4); color: var(--accent-ink); font-size: var(--text-sm); font-weight: 600; }

.console { border-radius: var(--r-xl); background: var(--panel); box-shadow: var(--shadow-lg); overflow: hidden; }
.console-bar { display: flex; align-items: center; gap: var(--space-2); height: 44px; padding: 0 var(--space-5); background: var(--panel-2); color: var(--faint); font-size: var(--text-sm); }
.console-bar i { width: 11px; height: 11px; border-radius: 50%; background: var(--panel-3); }
.console-bar span { margin-left: var(--space-3); }
.console img { width: 100%; height: auto; }
.shot-light, :root[data-theme="light"] .shot-dark { display: none; }
:root[data-theme="light"] .shot-light { display: block; }
.shot { margin-top: var(--space-16); }

.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-12); align-items: center; }
.split-text h2 { margin-top: var(--space-4); }
.split-text .lead { margin-top: var(--space-4); }
.list { margin: var(--space-5) 0 0; padding: 0; list-style: none; display: grid; gap: var(--space-3); }
.list li { display: flex; gap: var(--space-3); color: var(--dim); }
.list svg { flex: none; width: 18px; height: 18px; margin-top: 4px; color: var(--accent-ink); }

.price-band { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.price-card { padding: var(--space-8); border-radius: var(--r-lg); background: var(--panel); }
.price-card .big { display: block; margin-top: var(--space-3); font-size: 2rem; font-weight: 600; letter-spacing: -0.02em; }
.price-card p { margin-top: var(--space-2); color: var(--dim); }

.faq { display: grid; gap: var(--space-3); max-width: 820px; margin: 0 auto; }
.faq details { border-radius: var(--r-lg); background: var(--panel); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-5) var(--space-6); cursor: pointer; list-style: none; font-weight: 500; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--faint); font-size: 22px; line-height: 1; transition: transform var(--dur) var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 var(--space-6) var(--space-6); color: var(--dim); }

.actions-start { justify-content: flex-start; }
.stack-list { display: grid; gap: var(--space-3); }
.model-row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-5) var(--space-6); }
.center-link { margin-top: var(--space-6); text-align: center; }
.cta-title { margin-top: var(--space-4); }
.page-top { padding-bottom: var(--space-12); }
.page-body { padding-bottom: var(--section-y); }
.below-gap { margin-bottom: var(--space-5); }
.above-gap { margin-top: var(--space-5); }

.downloads { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }
.download { display: inline-flex; align-items: center; gap: var(--space-3); min-width: 240px; padding: var(--space-4) var(--space-6) var(--space-4) var(--space-5); border-radius: var(--r-lg); background: var(--accent); color: var(--on-accent); text-align: left; box-shadow: var(--shadow-sm); transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.download:hover { background: var(--accent-hover); text-decoration: none; }
.download:active { transform: scale(0.98); }
.download svg { width: 26px; height: 26px; flex: none; }
.download b { display: block; font-weight: 600; }
.download small { display: block; opacity: 0.8; font-size: var(--text-sm); }
.download-notes { max-width: 640px; margin: var(--space-6) auto 0; color: var(--dim); font-size: var(--text-sm); text-align: left; }
.download-notes p + p { margin-top: var(--space-2); }
.download-notes b { color: var(--ink); }

.cta { padding: var(--space-16) var(--space-8); border-radius: var(--r-xl); text-align: center; }
.cta h2 { max-width: 20ch; margin: 0 auto; }
.cta .lead { margin: var(--space-4) auto 0; }
.cta .hero-actions { margin-top: var(--space-6); }

.site-foot { padding: var(--space-12) 0; color: var(--faint); font-size: var(--text-sm); }
.site-foot .wrap { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-8); align-items: center; }
.site-foot a { color: var(--dim); }

.auth { min-height: calc(100svh - var(--nav-h)); display: grid; place-items: center; padding: var(--space-10) var(--space-4); }
.auth-card { width: 100%; max-width: var(--auth-w); padding: var(--space-10) var(--space-8); border-radius: var(--r-xl); background: var(--panel); box-shadow: var(--shadow-lg); }
.auth-card h1 { font-size: 1.9rem; letter-spacing: var(--tracking-h2); }
.auth-card .lead { margin-top: var(--space-3); font-size: var(--text-md); }
.auth-card form { margin-top: var(--space-6); }
.auth-card .btn-primary { width: 100%; }
.auth-alt { margin-top: var(--space-5); color: var(--dim); font-size: var(--text-md); text-align: center; }

.field { display: grid; gap: 6px; }
.field + .field { margin-top: var(--space-4); }
.label { color: var(--dim); font-size: var(--text-sm); font-weight: 500; }
.hint { color: var(--faint); font-size: var(--text-sm); }
.input, .select, .textarea {
  width: 100%;
  height: var(--ctl);
  padding: 0 var(--space-4);
  border: 1px solid var(--edge-2);
  border-radius: var(--r-sm);
  background: var(--panel-2);
  color: var(--ink);
  font-size: var(--text-md);
  outline: 0;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.input:focus, .select:focus, .textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.input::placeholder, .textarea::placeholder { color: var(--faint); }
.select { appearance: none; padding-right: var(--space-10); background-image: linear-gradient(45deg, transparent 50%, var(--dim) 50%), linear-gradient(135deg, var(--dim) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.inline-form { display: flex; align-items: flex-end; gap: var(--space-3); flex-wrap: wrap; }
.inline-form .field + .field { margin-top: 0; }
.w-xs { width: var(--field-xs); }
.w-sm { width: var(--field-sm); }
.w-md { width: var(--field-md); }
.form-top { margin-top: var(--space-6); }
.form-narrow { max-width: var(--form-narrow); }
.form-actions { margin-top: var(--space-6); display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }

.notice { padding: var(--space-3) var(--space-4); border-radius: var(--r); background: var(--info-soft); color: var(--ink); margin-bottom: var(--space-5); font-size: var(--text-md); }
.notice-ok { background: var(--ok-soft); }
.notice-error { background: var(--danger-soft); }
.notice-warn { background: var(--amber-soft); }

.app {
  display: grid;
  grid-template-columns: var(--side-w) minmax(0, 1fr);
  height: 100dvh;
  overflow: hidden;
}
.side {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: var(--space-3);
  background: var(--bg-2);
}
.side-head { display: flex; align-items: center; justify-content: space-between; height: 48px; padding: 0 var(--space-2); }
.side-close { display: none; }
.new-chat { width: 100%; justify-content: flex-start; margin-top: var(--space-3); background: var(--panel); border-color: transparent; }
.new-chat:hover { background: var(--panel-2); }
.side-title { padding: var(--space-5) var(--space-3) var(--space-2); color: var(--faint); font-size: var(--text-xs); font-weight: 500; }
.chat-list { flex: 1; min-height: 0; overflow-y: auto; margin: 0 calc(var(--space-1) * -1); padding: 0 var(--space-1); }
.chat-item { position: relative; display: flex; align-items: center; height: 38px; padding: 0 var(--space-3); border-radius: var(--r-sm); color: var(--ink); font-size: var(--text-md); }
.chat-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-item:hover { background: var(--panel-2); text-decoration: none; }
.chat-item[aria-current="page"] { background: var(--accent-soft); }
.chat-empty { padding: var(--space-2) var(--space-3); color: var(--faint); font-size: var(--text-sm); }

.side-foot { position: relative; padding-top: var(--space-3); }
.ide-card { display: block; margin-bottom: var(--space-3); padding: var(--space-4); border-radius: var(--r); background: var(--panel); color: var(--ink); font-size: var(--text-sm); }
.ide-card:hover { background: var(--panel-2); text-decoration: none; }
.ide-card strong { display: block; font-weight: 600; }
.ide-card span { color: var(--dim); }
.profile > summary { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2); border-radius: var(--r); cursor: pointer; list-style: none; }
.profile > summary::-webkit-details-marker { display: none; }
.profile > summary:hover, .profile[open] > summary { background: var(--panel-2); }
.avatar { display: inline-grid; place-items: center; flex: none; width: var(--avatar); height: var(--avatar); border-radius: 50%; background: var(--accent); color: var(--on-accent); font-weight: 600; font-size: var(--text-sm); text-transform: uppercase; }
.profile-who { min-width: 0; display: grid; line-height: 1.3; }
.profile-who b { font-weight: 500; font-size: var(--text-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-who small { color: var(--dim); font-size: var(--text-xs); white-space: nowrap; }
.menu {
  position: absolute;
  z-index: 40;
  min-width: var(--menu-w);
  padding: var(--space-2);
  border: 1px solid var(--edge);
  border-radius: var(--r-lg);
  background: var(--panel);
  box-shadow: var(--shadow-lg);
}
.profile .menu { left: 0; right: 0; bottom: calc(100% + var(--space-2)); }
.menu-item { display: flex; align-items: center; gap: var(--space-3); width: 100%; height: var(--row); padding: 0 var(--space-3); border: 0; border-radius: var(--r-sm); background: none; color: var(--ink); font-size: var(--text-md); text-align: left; white-space: nowrap; cursor: pointer; }
.menu-aside { margin-left: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--faint); font-size: var(--text-xs); }
.menu-item:hover { background: var(--panel-2); text-decoration: none; }
.menu-item[aria-current="page"] { background: var(--accent-soft); }
.menu-item svg { width: 18px; height: 18px; color: var(--dim); flex: none; }
.menu-sep { height: 1px; margin: var(--space-2); background: var(--edge); }
.menu-balance { display: block; padding: var(--space-3); border-radius: var(--r); background: var(--panel-2); margin-bottom: var(--space-2); color: var(--ink); }
.menu-balance:hover { text-decoration: none; background: var(--panel-3); }
.menu-balance b { display: block; font-size: var(--text-lg); font-weight: 600; }
.menu-balance span { color: var(--dim); font-size: var(--text-sm); }
.menu form { margin: 0; }

.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.topbar { display: flex; align-items: center; gap: var(--space-3); height: var(--topbar-h); padding: 0 var(--space-5); flex: none; }
.topbar-title { display: none; font-weight: 600; font-size: var(--text-lg); }
.topbar-spacer { flex: 1; }
.menu-toggle { display: none; }
.main-scroll { flex: 1; min-height: 0; overflow-y: auto; }
.page { width: 100%; max-width: var(--page-w); margin: 0 auto; padding: var(--space-4) var(--space-8) var(--space-16); }

.balance-chip { display: inline-flex; align-items: center; gap: var(--space-2); height: var(--ctl-sm); padding: 0 var(--space-4); border-radius: var(--pill); background: var(--panel); color: var(--dim); font-size: var(--text-sm); }
.balance-chip b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.balance-chip:hover { background: var(--panel-2); text-decoration: none; }

.picker { position: relative; }
.picker > summary { display: inline-flex; align-items: center; gap: var(--space-2); height: var(--ctl-sm); padding: 0 var(--space-3) 0 var(--space-4); border-radius: var(--pill); cursor: pointer; list-style: none; font-weight: 600; font-size: var(--text-lg); white-space: nowrap; }
.picker > summary::-webkit-details-marker { display: none; }
.picker > summary:hover, .picker[open] > summary { background: var(--panel-2); }
.picker > summary svg { width: 16px; height: 16px; color: var(--dim); }
.picker .menu { top: calc(100% + var(--space-2)); left: 0; width: var(--picker-w); max-height: 64vh; overflow-y: auto; }
.picker-group { padding: var(--space-3) var(--space-3) var(--space-1); color: var(--faint); font-size: var(--text-xs); font-weight: 500; }
.picker-item { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px var(--space-3); width: 100%; padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--r-sm); background: none; color: var(--ink); text-align: left; cursor: pointer; }
.picker-item:hover { background: var(--panel-2); }
.picker-item b { font-weight: 500; font-size: var(--text-md); }
.picker-item small { grid-column: 1; color: var(--faint); font-size: var(--text-xs); }
.picker-item em { grid-row: 1 / span 2; grid-column: 2; color: var(--dim); font-style: normal; font-size: var(--text-xs); text-align: right; }
.picker-item[aria-checked="true"] { background: var(--accent-soft); }

.chat-main { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.thread { width: 100%; max-width: var(--thread-w); margin: 0 auto; padding: var(--space-6) var(--space-6) var(--space-8); display: grid; gap: var(--space-8); }
.msg-user { justify-self: end; max-width: 85%; padding: var(--space-3) var(--space-5); border-radius: var(--r-lg); background: var(--panel-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-ai { min-width: 0; }
.msg-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin-top: var(--space-3); color: var(--faint); font-size: var(--text-xs); }
.msg-meta button { border: 0; background: none; padding: 0; color: var(--faint); cursor: pointer; font-size: var(--text-xs); }
.msg-meta button:hover { color: var(--ink); }
.msg-error { padding: var(--space-3) var(--space-4); border-radius: var(--r); background: var(--danger-soft); font-size: var(--text-md); }
.typing { display: inline-flex; gap: 5px; padding: var(--space-2) 0; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); animation: typing 1.2s var(--ease) infinite; }
.typing i:nth-child(2) { animation-delay: 0.15s; }
.typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing { 0%, 80%, 100% { opacity: 0.25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

.empty { flex: 1; display: grid; place-items: center; padding: var(--space-8) var(--space-6); }
.empty-inner { width: 100%; max-width: var(--thread-w); }
.empty h1 { font-size: clamp(2rem, 4vw, 2.8rem); letter-spacing: var(--tracking-h2); }
.empty .lead { margin-top: var(--space-3); }
.suggest { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-6); }
.suggest button { height: var(--ctl-sm); padding: 0 var(--space-4); border: 1px solid var(--edge-2); border-radius: var(--pill); background: var(--panel); color: var(--ink); font-size: var(--text-sm); cursor: pointer; }
.suggest button:hover { background: var(--panel-2); }

.composer-wrap { flex: none; padding: 0 var(--space-6) var(--space-5); }
.composer { width: 100%; max-width: var(--thread-w); margin: 0 auto; padding: var(--space-3) var(--space-3) var(--space-3) var(--space-5); border: 1px solid var(--edge-2); border-radius: var(--r-xl); background: var(--panel); box-shadow: var(--shadow); }
.composer:focus-within { border-color: var(--accent-line); }
.composer textarea { display: block; width: 100%; min-height: 28px; max-height: 40vh; padding: var(--space-2) 0; border: 0; background: none; outline: 0; resize: none; font-size: var(--text-base); line-height: 1.5; }
.composer-row { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-1); }
.composer-info { flex: 1; min-width: 0; color: var(--faint); font-size: var(--text-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.send { display: inline-grid; place-items: center; flex: none; width: var(--icon-btn); height: var(--icon-btn); border: 0; border-radius: 50%; background: var(--accent); color: var(--on-accent); cursor: pointer; transition: background-color var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.send:hover { background: var(--accent-hover); }
.send[disabled] { opacity: 0.4; cursor: not-allowed; }
.send svg { width: 18px; height: 18px; }
.send .icon-stop { display: none; }
.composer.busy .send .icon-send { display: none; }
.composer.busy .send .icon-stop { display: block; }
.composer-note { max-width: var(--thread-w); margin: var(--space-2) auto 0; color: var(--faint); font-size: var(--text-xs); text-align: center; }

.md { overflow-wrap: anywhere; }
.md > * + * { margin-top: var(--space-4); }
.md h1, .md h2, .md h3 { font-size: var(--text-lg); letter-spacing: -0.01em; margin-top: var(--space-6); }
.md ul, .md ol { padding-left: var(--space-6); margin-bottom: 0; }
.md li + li { margin-top: var(--space-1); }
.md a { text-decoration: underline; text-underline-offset: 3px; }
.md code { padding: 1px 6px; border-radius: 6px; background: var(--panel-2); }
.md pre { margin: var(--space-4) 0 0; padding: var(--space-4); border-radius: var(--r); background: var(--panel); overflow-x: auto; font-size: var(--text-sm); line-height: 1.6; }
.md pre code { padding: 0; background: none; }
.md blockquote { margin: 0; padding-left: var(--space-4); border-left: 3px solid var(--edge-2); color: var(--dim); }
.md table { border-collapse: collapse; font-size: var(--text-md); }
.md th, .md td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--edge); text-align: left; }
.md hr { border: 0; height: 1px; background: var(--edge); }
.gen-image { display: block; width: fit-content; max-width: 100%; border-radius: var(--r-lg); overflow: hidden; background: var(--panel); }
.gen-image img { display: block; max-width: 100%; max-height: 70vh; height: auto; }
.img-pending { display: grid; place-items: center; width: min(100%, 420px); aspect-ratio: 1; border-radius: var(--r-lg); background: linear-gradient(110deg, var(--panel) 30%, var(--panel-2) 50%, var(--panel) 70%); background-size: 200% 100%; animation: img-shimmer 1.6s linear infinite; color: var(--dim); font-size: var(--text-sm); }
.img-pending.img-landscape { aspect-ratio: 3 / 2; width: min(100%, 520px); }
.img-pending.img-portrait { aspect-ratio: 2 / 3; width: min(100%, 320px); }
@keyframes img-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.msg-meta a { color: var(--faint); }
.msg-meta a:hover { color: var(--ink); }
.redteam-btn { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 32px; padding: 0 var(--space-3); border: 0; border-radius: var(--pill); background: none; color: var(--dim); font-size: var(--text-xs); white-space: nowrap; cursor: pointer; }
.redteam-btn[hidden] { display: none; }
.redteam-btn:hover { background: var(--panel-2); color: var(--ink); }
.redteam-btn svg { width: 14px; height: 14px; flex: none; }
@media (max-width: 640px) { .redteam-btn span { display: none; } }
.effort { position: relative; flex: none; }
.effort[hidden] { display: none; }
.effort > summary { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 var(--space-2) 0 var(--space-3); border-radius: var(--pill); color: var(--dim); font-size: var(--text-xs); white-space: nowrap; list-style: none; cursor: pointer; }
.effort > summary::-webkit-details-marker { display: none; }
.effort > summary:hover, .effort[open] > summary { background: var(--panel-2); color: var(--ink); }
.effort > summary svg { width: 14px; height: 14px; flex: none; }
.effort[data-level="ultra"] > summary { color: var(--accent); }
.effort .menu { right: 0; bottom: calc(100% + var(--space-2)); width: 320px; max-width: calc(100vw - 32px); }
.effort-item { display: grid; gap: 2px; width: 100%; padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--r-sm); background: none; color: var(--ink); text-align: left; cursor: pointer; }
.effort-item[hidden] { display: none; }
.effort-item:hover { background: var(--panel-2); }
.effort-item[aria-checked="true"] { background: var(--accent-soft); }
.effort-item b { font-weight: 500; font-size: var(--text-md); }
.effort-item small { color: var(--faint); font-size: var(--text-xs); }
.queue { display: grid; gap: var(--space-1); margin-bottom: var(--space-2); padding: var(--space-2); border-radius: var(--r-lg); background: var(--panel); }
.queue[hidden] { display: none; }
.queue-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: 0 var(--space-1); color: var(--faint); font-size: var(--text-xs); }
.queue-resume { height: 26px; padding: 0 var(--space-3); border: 0; border-radius: var(--pill); background: var(--accent); color: var(--on-accent); font-size: var(--text-xs); font-weight: 600; cursor: pointer; }
.queue-item { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-1) var(--space-1) var(--space-3); border-radius: var(--r-sm); background: var(--panel-2); font-size: var(--text-sm); }
.queue-item b { color: var(--accent); font-size: var(--text-xs); }
.queue-item span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.queue-item button { width: 26px; height: 26px; border: 0; border-radius: 50%; background: none; color: var(--dim); font-size: 16px; line-height: 1; cursor: pointer; }
.queue-item button:hover { background: var(--panel-3); color: var(--ink); }
.thinking { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--faint); font-size: var(--text-sm); }
.size-switch { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--pill); background: var(--panel-2); flex: none; }
.size-switch button { height: 28px; padding: 0 var(--space-3); border: 0; border-radius: var(--pill); background: transparent; color: var(--dim); font-size: var(--text-xs); cursor: pointer; }
.size-switch button[aria-checked="true"] { background: var(--panel-3); color: var(--ink); }

.page-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-6); }
.page-head h1 { font-size: clamp(1.7rem, 3vw, 2.2rem); letter-spacing: var(--tracking-h2); }
.page-head .lead { margin-top: var(--space-3); }
.section { margin-top: var(--space-10); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.section-head h2 { font-size: var(--text-h3); letter-spacing: var(--tracking-h3); }
.row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

.tabs-inline { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--pill); background: var(--panel); }
.tabs-inline a { display: inline-flex; align-items: center; height: 34px; padding: 0 var(--space-4); border-radius: var(--pill); color: var(--dim); font-size: var(--text-sm); }
.tabs-inline a:hover { color: var(--ink); text-decoration: none; }
.tabs-inline a[aria-current="true"] { background: var(--panel-3); color: var(--ink); }

.summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--space-3); margin: 0; }
.summary-item { padding: var(--space-5); border-radius: var(--r-lg); background: var(--panel); min-width: 0; }
.summary-item dt { color: var(--dim); font-size: var(--text-sm); }
.summary-item dd { margin: var(--space-2) 0 0; font-size: 1.35rem; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.summary-item dd .unit { font-size: var(--text-sm); font-weight: 500; color: var(--dim); letter-spacing: 0; }
.summary-item dd small { display: block; margin-top: 2px; color: var(--faint); font-size: var(--text-xs); font-weight: 400; letter-spacing: 0; }

.props { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-3) var(--space-8); margin: 0; padding: var(--space-6); border-radius: var(--r-lg); background: var(--panel); }
.props dt { color: var(--dim); }
.props dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

.card { padding: var(--space-6); border-radius: var(--r-lg); background: var(--panel); }

.table-wrap { width: 100%; overflow-x: auto; border-radius: var(--r-lg); background: var(--panel); padding: var(--space-2) var(--space-3); }
.table { width: 100%; border-collapse: collapse; font-size: var(--text-md); font-variant-numeric: tabular-nums; }
.table th { height: 44px; line-height: 1.3; padding-top: var(--space-2); padding-bottom: var(--space-2); padding: 0 var(--space-3); color: var(--faint); font-size: var(--text-xs); font-weight: 500; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--edge); }
.table td { height: 48px; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--edge); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: var(--panel-2); }
.table .num, .table th.num { text-align: right; }
.table td.actions { text-align: right; white-space: nowrap; }
.table td.actions form { display: inline; }
.table td:first-child { white-space: nowrap; }
.table-group td { height: 40px; padding-top: var(--space-4); color: var(--accent-ink); font-size: var(--text-xs); font-weight: 600; }
.table tbody tr.table-group:hover td { background: none; }
.th-sub { color: var(--faint); font-weight: 400; }
.col-slafy, .table th.col-slafy, .col-slafy .th-sub { color: var(--ok); }
.table th .th-sub { font-size: var(--text-xs); }
.source { margin-left: var(--space-2); font-size: var(--text-xs); }
.cell-note { display: block; margin-top: 2px; color: var(--faint); font-size: var(--text-xs); font-variant-numeric: normal; }
.model-id { display: block; color: var(--faint); font-family: var(--mono); font-size: var(--text-xs); }

.inline-edit { position: relative; display: inline-block; }
.inline-edit summary { cursor: pointer; list-style: none; color: var(--accent-ink); }
.inline-edit summary::-webkit-details-marker { display: none; }
.inline-edit-pop { position: absolute; right: 0; top: calc(100% + var(--space-2)); z-index: 5; display: grid; gap: var(--space-2); padding: var(--space-4); border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--edge); box-shadow: var(--shadow-lg); text-align: left; }

.share { display: inline-flex; align-items: center; gap: var(--space-2); justify-content: flex-end; }
.share-bar { width: var(--share-w); height: var(--share-h); border-radius: var(--pill); background: var(--panel-3); overflow: hidden; }
.share-bar i { display: block; height: 100%; border-radius: var(--pill); background: var(--chart); }

.chart-box { padding: var(--space-6) var(--space-6) var(--space-4); border-radius: var(--r-lg); background: var(--panel); }
.chart { position: relative; padding-left: var(--chart-axis); }
.chart-grid { position: absolute; inset: 0 0 var(--chart-label-h) var(--chart-axis); border-bottom: 1px solid var(--edge-2); pointer-events: none; }
.chart-grid span { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--edge); }
.chart-grid em { position: absolute; right: calc(100% + var(--space-2)); transform: translateY(-50%); color: var(--faint); font: normal var(--text-xs) / 1 var(--sans); white-space: nowrap; font-variant-numeric: tabular-nums; }
.chart-bars { position: relative; display: flex; align-items: flex-end; gap: var(--chart-gap); height: var(--chart-height); }
.chart-bar { flex: 1; height: 100%; display: flex; align-items: flex-end; justify-content: center; border-radius: 6px; }
.chart-bar i { display: block; width: 100%; max-width: var(--chart-bar-max); background: var(--chart); border-radius: 6px 6px 0 0; transition: background-color var(--dur) var(--ease); }
.chart-bar:hover i, .chart-bar:focus-visible i { background: var(--chart-hover); }
.chart-labels { display: flex; gap: var(--chart-gap); height: var(--chart-label-h); align-items: flex-end; }
.chart-labels span { flex: 1; min-width: 0; color: var(--faint); font-size: var(--text-xs); text-align: center; white-space: nowrap; }
.chart-empty { color: var(--dim); padding: var(--space-8) 0; text-align: center; }

.tooltip { position: fixed; z-index: 60; pointer-events: none; padding: var(--space-2) var(--space-3); border-radius: var(--r-sm); background: var(--panel-3); color: var(--ink); font-size: var(--text-xs); white-space: pre; box-shadow: var(--shadow); }

.code-wrap { position: relative; }
.code { margin: 0; padding: var(--space-4) var(--copy-gutter) var(--space-4) var(--space-5); border-radius: var(--r); background: var(--panel); color: var(--ink); font: var(--text-sm) / 1.7 var(--mono); overflow-x: auto; white-space: pre; }
.code-wrap .copy { position: absolute; top: var(--space-3); right: var(--space-3); }
.secret { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-4) var(--space-5); border-radius: var(--r-lg); background: var(--ok-soft); margin-bottom: var(--space-5); }
.secret code { flex: 1 1 280px; font-size: var(--text-md); overflow-wrap: anywhere; }

.docs h2 { margin-top: var(--space-12); margin-bottom: var(--space-4); font-size: 1.5rem; }
.docs h3 { margin-top: var(--space-6); margin-bottom: var(--space-3); }
.docs p + p, .docs p + .code-wrap, .docs .code-wrap + p, .docs p + .table-wrap { margin-top: var(--space-4); }
.docs .table-wrap + p { margin-top: var(--space-3); }

.pager { margin-top: var(--space-5); }
.toast { position: fixed; left: 50%; bottom: var(--space-8); z-index: 70; transform: translateX(-50%); padding: var(--space-3) var(--space-5); border-radius: var(--pill); background: var(--panel-3); color: var(--ink); font-size: var(--text-md); box-shadow: var(--shadow); }

@media (max-width: 1024px) {
  :root { --section-y: var(--space-19); }
  .grid-3, .price-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
  .nav-links { display: none; }
  .app { grid-template-columns: minmax(0, 1fr); }
  .side { position: fixed; inset: 0 auto 0 0; z-index: 45; width: min(var(--side-w), 86vw); transform: translateX(-102%); transition: transform var(--dur) var(--ease); box-shadow: var(--shadow-lg); }
  .app.side-open .side { transform: none; }
  .app.side-open::after { content: ""; position: fixed; inset: 0; z-index: 44; background: rgb(0 0 0 / 0.45); }
  .side-close, .menu-toggle { display: inline-grid; }
  .topbar-title { display: block; }
  .topbar { padding: 0 var(--space-3); }
  .page { padding: var(--space-3) var(--space-4) var(--space-12); }
  .thread { padding: var(--space-4) var(--space-4) var(--space-6); }
  .composer-wrap { padding: 0 var(--space-3) var(--space-3); }
  .picker .menu { width: min(var(--picker-w), calc(100vw - 32px)); }
  .chart { padding-left: var(--space-10); }
  .chart-grid { left: var(--space-10); }
  .chart-labels .minor { visibility: hidden; }
  .code-wrap { display: flex; flex-direction: column-reverse; align-items: flex-end; gap: var(--space-2); }
  .code-wrap .copy { position: static; }
  .code { width: 100%; padding-right: var(--space-5); }
  .input, .select, .textarea { font-size: var(--text-base); }
  .balance-chip .hide-sm { display: none; }
}

@media (max-width: 640px) {
  :root { --section-y: var(--space-16); }
  .wrap { padding: 0 var(--space-4); }
  .grid-2, .grid-3, .price-band { grid-template-columns: minmax(0, 1fr); }
  .cell, .price-card { padding: var(--space-6); }
  .nav-actions .hide-sm { display: none; }
  .cta { padding: var(--space-12) var(--space-5); }
  .auth-card { padding: var(--space-8) var(--space-5); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}
.admin-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); margin-bottom: var(--space-6); padding: var(--space-1); border-radius: var(--pill); background: var(--panel); width: fit-content; max-width: 100%; }
.admin-nav a { padding: var(--space-2) var(--space-4); border-radius: var(--pill); color: var(--dim); font-size: var(--text-sm); white-space: nowrap; }
.admin-nav a:hover { color: var(--ink); text-decoration: none; background: var(--panel-2); }
.admin-nav a[aria-current="page"] { background: var(--accent-soft); color: var(--ink); font-weight: 500; }
.admin-nav form { margin: 0; }
.admin-lock { padding: var(--space-2) var(--space-4); border: 0; border-radius: var(--pill); background: none; color: var(--faint); font-size: var(--text-sm); cursor: pointer; }
.admin-lock:hover { color: var(--bad, #d14343); background: var(--panel-2); }
.gate { display: grid; place-items: center; min-height: 100dvh; padding: var(--space-6) 16px; background: var(--bg); }
.gate-card { width: min(100%, 420px); padding: var(--space-8); border-radius: var(--r-xl, 24px); background: var(--panel); }
.gate-card h1 { font-size: var(--text-h2); }
.gate-card .lead { margin: var(--space-3) 0 var(--space-6); color: var(--dim); }
.totp-secret { display: inline-block; padding: var(--space-3) var(--space-4); border-radius: var(--r); background: var(--panel-2); font-size: var(--text-lg); letter-spacing: 0.06em; user-select: all; }
.site-foot-legal { margin-top: var(--space-4); font-size: var(--text-xs); }
.legal { max-width: 860px; padding-top: 128px; }
.legal h1 { font-size: var(--text-h2); }
.legal-rev { margin-top: var(--space-3); color: var(--faint); font-size: var(--text-sm); }
.legal h2 { margin: var(--space-10, 40px) 0 var(--space-3); font-size: 1.25rem; }
.legal p, .legal li { color: var(--dim); line-height: 1.7; }
.legal p + p, .legal p + ul, .legal ul + p, .legal .table-wrap + p, .legal p + .table-wrap { margin-top: var(--space-3); }
.legal ul { padding-left: 1.25em; }
.legal b { color: var(--ink); font-weight: 600; }
.legal .table td { vertical-align: top; }
.legal-accept { flex-basis: 100%; }