/* QuotaCheck — Aurevia CI v1.2 refined (UI-SPEC §6). Every colour is a token on :root. */
:root {
  --bg: #F8F5EE; --surface: #FFFDF9; --surface-raised: #FFFFFF; --surface-sunken: #F1ECE1; --surface-hover: #F4EFE5;
  --border: #E6DFD1; --border-control: #788591; --input-bg: #FFFFFF;
  --text-1: #0B1B36; --text-2: #4E5A6B; --text-3: #626C7C; --text-inverse: #FFFFFF;
  --btn-primary-bg: #21615D; --btn-primary-text: #FFFFFF; --btn-primary-hover: #184B48;
  --accent: #21615D; --accent-soft: #E3EFEC; --accent-ink: #174A47; --focus: #21615D;
  --gold: #F7CB66; --gold-ink: #8A6516; --gold-soft: #FBF1D6; --gold-soft-ink: #7A5810;
  --navy-panel: #0B1B36; --navy-panel-text: #F3EFE6;
  --ok: #1F7A55; --ok-ink: #1A6647; --ok-soft: #E4F3EA;
  --warn: #8A5A00; --warn-ink: #8A5A00; --warn-soft: #FFF3D6;
  --crit: #B42318; --crit-ink: #B42318; --crit-soft: #FDE9E6; --crit-solid: #B42318; --on-crit: #FFFFFF;
  --meter-track: #ECE6DA; --skeleton: #EEE9DF;
  /* provider identity - ring gauge ONLY (UI-SPEC 7 exception): outer = OpenAI ink, inner = ElevenLabs violet */
  --prov-openai: #14284F; --prov-el: #6A3FC0; --gauge-track: #ECE6DA; --gauge-empty: #C9C3B6;
  --shadow-1: 0 1px 2px rgba(11,27,54,.06), 0 2px 8px rgba(11,27,54,.04);
  --shadow-pop: 0 12px 32px rgba(11,27,54,.12);
  --scrim: rgba(11,27,54,.45);
  --slot-1: #008C7E; --slot-2: #C98F1E; --slot-3: #3D6BD4; --slot-4: #C2557E;
  --slot-5: #5B7F3A; --slot-6: #8C5BC4; --slot-7: #B5652E; --slot-8: #2E8FB0;
  --data-system: #9AA3B2; --data-other: #C9C3B6; --data-stripe: rgba(255,255,255,.55);
  --font-th: "Kanit", "Noto Sans Thai", "Leelawadee UI", sans-serif;
  --font-en: "Noto Sans", system-ui, sans-serif;
  --font-mono: "Noto Sans Mono", ui-monospace, monospace;
  --z-sticky: 10; --z-nav: 20; --z-pop: 30; --z-modal: 40; --z-toast: 50;
  --ease: cubic-bezier(.2,.8,.2,1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #020B1F; --surface: #0B1833; --surface-raised: #112244; --surface-sunken: #06112A; --surface-hover: #142650;
    --border: #1E2E4D; --border-control: #9CA9B9; --input-bg: #101F35;
    --text-1: #F3EFE6; --text-2: #B9C2D0; --text-3: #8D99AB; --text-inverse: #010D25;
    --btn-primary-bg: #F7CB66; --btn-primary-text: #010D25; --btn-primary-hover: #EABD59;
    --accent: #6FC1B8; --accent-soft: #163B45; --accent-ink: #9FDAD2; --focus: #F7CB66;
    --gold: #F7CB66; --gold-ink: #F7CB66; --gold-soft: #2E2A1A; --gold-soft-ink: #F7CB66;
    --ok: #5FD0A0; --ok-ink: #5FD0A0; --ok-soft: #0F3229;
    --warn: #F2B84B; --warn-ink: #F2B84B; --warn-soft: #352A10;
    --crit: #F59A8F; --crit-ink: #F59A8F; --crit-soft: #3A1A1E; --crit-solid: #F59A8F; --on-crit: #020B1F;
    --meter-track: #1A2A4A; --skeleton: #15244A;
    --prov-openai: #E9E2D2; --prov-el: #9A7CF4; --gauge-track: #1A2A4A; --gauge-empty: #33405C;
    --shadow-1: 0 1px 2px rgba(0,0,0,.45); --shadow-pop: 0 16px 40px rgba(0,0,0,.55); --scrim: rgba(0,0,0,.6);
    --slot-1: #109A8B; --slot-2: #BF8A20; --slot-3: #5A80E3; --slot-4: #C9608B;
    --data-system: #4D5B78; --data-other: #33405C; --data-stripe: rgba(255,255,255,.18);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #020B1F; --surface: #0B1833; --surface-raised: #112244; --surface-sunken: #06112A; --surface-hover: #142650;
  --border: #1E2E4D; --border-control: #9CA9B9; --input-bg: #101F35;
  --text-1: #F3EFE6; --text-2: #B9C2D0; --text-3: #8D99AB; --text-inverse: #010D25;
  --btn-primary-bg: #F7CB66; --btn-primary-text: #010D25; --btn-primary-hover: #EABD59;
  --accent: #6FC1B8; --accent-soft: #163B45; --accent-ink: #9FDAD2; --focus: #F7CB66;
  --gold: #F7CB66; --gold-ink: #F7CB66; --gold-soft: #2E2A1A; --gold-soft-ink: #F7CB66;
  --ok: #5FD0A0; --ok-ink: #5FD0A0; --ok-soft: #0F3229;
  --warn: #F2B84B; --warn-ink: #F2B84B; --warn-soft: #352A10;
  --crit: #F59A8F; --crit-ink: #F59A8F; --crit-soft: #3A1A1E; --crit-solid: #F59A8F; --on-crit: #020B1F;
  --meter-track: #1A2A4A; --skeleton: #15244A;
  --prov-openai: #E9E2D2; --prov-el: #9A7CF4; --gauge-track: #1A2A4A; --gauge-empty: #33405C;
  --shadow-1: 0 1px 2px rgba(0,0,0,.45); --shadow-pop: 0 16px 40px rgba(0,0,0,.55); --scrim: rgba(0,0,0,.6);
  --slot-1: #109A8B; --slot-2: #BF8A20; --slot-3: #5A80E3; --slot-4: #C9608B;
  --data-system: #4D5B78; --data-other: #33405C; --data-stripe: rgba(255,255,255,.18);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text-1); font: 400 1rem/1.7 var(--font-th); }
h1, h2, h3, p { margin: 0; }
h1 { font: 500 1.75rem/1.4 var(--font-th); overflow-wrap: anywhere; min-width: 0; }
h2 { font: 500 1.25rem/1.45 var(--font-th); overflow-wrap: anywhere; }
h3 { font: 500 1rem/1.5 var(--font-th); }
a { color: var(--accent); text-underline-offset: 3px; }
button, input, textarea { font: inherit; color: inherit; }
.num, .en { font-family: var(--font-en); font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); font-size: .875rem; overflow-wrap: anywhere; }
.muted { color: var(--text-2); }
.faint { color: var(--text-3); }
.caption { font-size: .75rem; line-height: 1.6; font-weight: 500; }
.small { font-size: .875rem; line-height: 1.6; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ic { flex: none; display: inline-block; vertical-align: middle; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
[hidden] { display: none !important; }

/* ---------- shell ---------- */
.shell { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 100dvh; }
.sidebar { position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; gap: 4px; padding: 24px 16px; background: var(--bg); border-right: 1px solid var(--border); z-index: var(--z-nav); }
.brand { display: flex; align-items: center; gap: 10px; padding: 0 8px 20px; text-decoration: none; color: var(--text-1); }
.brand img { width: 28px; height: 28px; }
.brand span { font: 600 1.125rem/1.2 var(--font-en); }
.nav-sep { margin: 16px 8px 4px; font-size: .75rem; color: var(--text-3); font-weight: 500; display: flex; align-items: center; gap: 8px; }
.nav-sep::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.nav a { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 12px; border-radius: 8px; color: var(--text-2); text-decoration: none; font-size: .9375rem; font-weight: 500; border-left: 3px solid transparent; white-space: nowrap; transition: background-color 150ms var(--ease), color 150ms var(--ease); }
.nav a:hover { background: var(--surface-hover); color: var(--text-1); }
.nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; border-left-color: var(--gold); }
.side-user { margin-top: auto; padding: 12px; border-top: 1px solid var(--border); font-size: .875rem; }
.side-user b { display: block; font-weight: 500; overflow-wrap: anywhere; }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; gap: 16px; min-height: 64px; padding: 12px 40px; }
.topbar h1 { flex: 1; }
.topbar-actions { display: flex; gap: 8px; align-items: center; }
.mobile-brand { display: none; }
.content { width: 100%; max-width: 1280px; padding: 8px 40px 48px; }
.manage-banner { display: flex; align-items: center; gap: 10px; padding: 10px 40px; background: var(--surface-sunken); color: var(--text-2); font-size: .875rem; border-bottom: 1px solid var(--border); }
.demo-banner { display: flex; align-items: center; gap: 10px; padding: 8px 40px; background: var(--gold-soft); color: var(--gold-soft-ink); font-size: .875rem; font-weight: 500; }
.subtabs { display: flex; gap: 4px; padding: 0 40px; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.subtabs a { display: inline-flex; align-items: center; height: 44px; padding: 0 12px; color: var(--text-2); text-decoration: none; font-size: .9375rem; white-space: nowrap; border-bottom: 2px solid transparent; transition: color 150ms var(--ease), border-color 150ms var(--ease); }
.subtabs a:hover { color: var(--text-1); }
.subtabs a[aria-selected="true"] { color: var(--text-1); font-weight: 600; border-bottom-color: var(--accent); }
.subtabs-mobile { display: none; padding: 0 20px 8px; }
.filterbar { position: sticky; top: 0; z-index: var(--z-sticky); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px 40px; background: var(--bg); border-bottom: 1px solid var(--border); }
.filterbar .grow { flex: 1; }
.filterbar-mobile { display: none; }
.bottombar { display: none; }

@media (max-width: 1023px) {
  .shell { display: block; }
  .sidebar { display: none; }
  .topbar { flex-wrap: wrap; padding: 8px 20px 4px; min-height: 56px; }
  .topbar h1 { flex-basis: 100%; order: 3; font-size: 1.375rem; }
  .mobile-brand { display: flex; flex: 1; padding: 0; }
  .content { padding: 8px 20px calc(64px + env(safe-area-inset-bottom) + 24px); }
  .manage-banner, .demo-banner { padding: 8px 20px; }
  .subtabs { display: none; }
  .subtabs-mobile { display: block; }
  .filterbar { display: none; }
  .filterbar-mobile { display: flex; gap: 8px; position: sticky; top: 0; z-index: var(--z-sticky); padding: 8px 20px; background: var(--bg); border-bottom: 1px solid var(--border); }
  .filterbar-mobile > * { flex: 1; min-width: 0; }
  .bottombar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-nav); background: var(--surface); border-top: 1px solid var(--border); padding-bottom: env(safe-area-inset-bottom); }
  .bottombar a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 64px; color: var(--text-2); text-decoration: none; font-size: .75rem; font-weight: 500; }
  .bottombar a[aria-current="page"] { color: var(--accent-ink); font-weight: 600; }
  .bottombar a[aria-current="page"] .ic { color: var(--accent); }
  .bottombar a[aria-current="page"]::before { content: ""; position: absolute; top: 0; width: 32px; height: 3px; border-radius: 0 0 3px 3px; background: var(--gold); }
  .bottombar a { position: relative; }
}

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 8px; border: 1px solid transparent; font: 500 1rem/1.5 var(--font-th); white-space: nowrap; cursor: pointer; text-decoration: none; background: transparent; color: var(--text-1); transition: background-color 150ms var(--ease), border-color 150ms var(--ease), color 150ms var(--ease), transform 150ms var(--ease); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.btn-primary { background: var(--btn-primary-bg); color: var(--btn-primary-text); }
.btn-primary:hover:not(:disabled) { background: var(--btn-primary-hover); }
.btn-secondary { border-color: var(--border-control); background: var(--surface); }
.btn-secondary:hover:not(:disabled) { background: var(--surface-hover); }
.btn-ghost { color: var(--accent); padding: 0 8px; }
.btn-ghost:hover:not(:disabled) { text-decoration: underline; }
.btn-danger { background: var(--crit-solid); color: var(--on-crit); }
.btn-danger:hover:not(:disabled) { filter: brightness(.95); }
.btn-icon { width: 44px; padding: 0; border-color: var(--border); background: var(--surface); color: var(--text-2); }
.btn-icon:hover:not(:disabled) { background: var(--surface-hover); color: var(--text-1); }
.btn-block { width: 100%; }
.btn .spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.link-btn { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; font: inherit; }

/* ---------- cards / layout ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 24px; box-shadow: var(--shadow-1); min-width: 0; }
.card-gold { border-top: 2px solid var(--gold); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
.span-12 { grid-column: span 12; } .span-8 { grid-column: span 8; } .span-7 { grid-column: span 7; } .span-6 { grid-column: span 6; } .span-5 { grid-column: span 5; } .span-4 { grid-column: span 4; }
.stack { display: flex; flex-direction: column; gap: 24px; }
.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.spacer { flex: 1; }
@media (max-width: 1023px) {
  .grid { gap: 16px; }
  .span-8, .span-7, .span-6, .span-5, .span-4 { grid-column: span 12; }
  .card { padding: 20px; }
  .stack { gap: 16px; }
}
@media (min-width: 768px) and (max-width: 1023px) { .grid .span-6.md-half { grid-column: span 6; } }

/* ---------- pool card ---------- */
.pool-card { min-height: 296px; display: flex; flex-direction: column; gap: 4px; padding: 20px 24px; }
.pool-head { display: flex; align-items: center; gap: 12px; }
.pool-mark { width: 32px; height: 32px; border-radius: 999px; background: var(--surface-sunken); display: grid; place-items: center; font: 600 .75rem/1 var(--font-en); color: var(--text-2); flex: none; }
.pool-name { font: 600 1rem/1.4 var(--font-en); flex: 1; }
.pool-label { display: flex; align-items: center; gap: 8px; justify-content: space-between; color: var(--text-2); font-size: .875rem; font-weight: 500; margin-top: 4px; flex-wrap: wrap; }
.hero { font: 600 3rem/1.05 var(--font-en); font-variant-numeric: tabular-nums; letter-spacing: -.01em; overflow-wrap: anywhere; }
.hero-unit { font: 500 1rem/1.5 var(--font-th); color: var(--text-2); margin-left: 6px; letter-spacing: 0; }
.hero-empty { font: 500 1.125rem/1.5 var(--font-th); color: var(--text-2); }
.answer { font: 500 1.125rem/1.5 var(--font-th); color: var(--text-1); }
.meter-row { display: flex; align-items: center; gap: 12px; margin: 4px 0 8px; }
.meter { flex: 1; height: 8px; border-radius: 999px; background: var(--meter-track); overflow: hidden; }
.meter > i { display: block; height: 100%; border-radius: 999px; background: var(--ok); }
.meter.s-warn > i { background: var(--warn); } .meter.s-crit > i, .meter.s-out > i { background: var(--crit); } .meter.s-unknown > i { background: var(--text-3); }
.meter.sm { height: 6px; min-width: 60px; }
.substats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; border-top: 1px solid var(--border); padding-top: 10px; margin-top: auto; }
.substats dt { font-size: .8125rem; color: var(--text-2); font-weight: 500; }
.substats dd { margin: 0; font: 600 1rem/1.4 var(--font-en); font-variant-numeric: tabular-nums; }
.pool-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.pool-note { font-size: .75rem; color: var(--text-3); }
@media (max-width: 1023px) {
  .pool-card { min-height: 248px; }
  .hero { font-size: 2.25rem; }
  .substats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .substats .hide-sm { display: none; }
}

/* ---------- badges / tags ---------- */
.badge { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; font: 600 .75rem/1 var(--font-th); white-space: nowrap; }
.b-ok { background: var(--ok-soft); color: var(--ok-ink); }
.b-warn { background: var(--warn-soft); color: var(--warn-ink); }
.b-crit { background: var(--crit-soft); color: var(--crit-ink); }
.b-out { background: var(--crit-solid); color: var(--on-crit); }
.b-unknown, .b-neutral { background: var(--surface-sunken); color: var(--text-2); }
.tag { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; font: 500 .75rem/1 var(--font-th); white-space: nowrap; background: var(--surface-sunken); color: var(--text-2); }
.tag-estimate { background: var(--gold-soft); color: var(--gold-soft-ink); }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border-radius: 999px; font: 500 .75rem/1 var(--font-en); background: var(--surface-sunken); color: var(--text-2); white-space: nowrap; }
.swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; display: inline-block; }
.sw-1 { background: var(--slot-1); } .sw-2 { background: var(--slot-2); } .sw-3 { background: var(--slot-3); } .sw-4 { background: var(--slot-4); }
.sw-5 { background: var(--slot-5); } .sw-6 { background: var(--slot-6); } .sw-7 { background: var(--slot-7); } .sw-8 { background: var(--slot-8); }
.sw-0, .sw-system { background: var(--data-system); background-image: repeating-linear-gradient(45deg, var(--data-stripe) 0 2px, transparent 2px 5px); }
.sw-other { background: var(--data-other); }
.sw-scope { background: var(--data-other); background-image: repeating-linear-gradient(135deg, var(--data-stripe) 0 2px, transparent 2px 5px); }

/* ---------- alert strip / inline alerts ---------- */
.alerts { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
.alert { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 8px 8px 16px; border-radius: 12px; font-size: .9375rem; }
.alert p { flex: 1; min-width: 0; }
.alert.l-crit, .alert.l-out { background: var(--crit-soft); color: var(--crit-ink); }
.alert.l-warn { background: var(--warn-soft); color: var(--warn-ink); }
.alert.l-unknown, .alert.l-info { background: var(--surface-sunken); color: var(--text-2); }
.alert .btn-ghost { color: inherit; font-weight: 600; }
@media (max-width: 1023px) { .alert { flex-wrap: wrap; } .alert p { flex-basis: calc(100% - 40px); } }

/* ---------- top users ---------- */
.top-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
.share-bar { display: flex; gap: 2px; height: 24px; border-radius: 6px; overflow: hidden; background: var(--meter-track); }
.share-bar > span { display: block; height: 100%; min-width: 2px; }
.share-bar.tall { height: 28px; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: .8125rem; color: var(--text-2); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.rank { list-style: none; padding: 0; margin: 12px 0 0; }
.rank li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 44px; padding: 4px 0; border-bottom: 1px solid var(--border); }
.rank li:last-child { border-bottom: 0; }
.rank .who { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.rank .who b { font-weight: 500; overflow-wrap: anywhere; line-height: 1.4; }
.rank .amt { text-align: right; font: 600 .9375rem/1.3 var(--font-en); font-variant-numeric: tabular-nums; }
.rank .amt small { display: inline; margin-left: 8px; font-weight: 500; color: var(--text-3); font-size: .75rem; }
@media (max-width: 1023px) { .top-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; } }

/* ---------- stat tiles ---------- */
.tiles { display: grid; gap: 16px; grid-template-columns: repeat(var(--cols, 6), minmax(0, 1fr)); }
.tile { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 16px 18px; min-width: 0; }
.tile .lbl { font-size: .875rem; font-weight: 500; color: var(--text-2); line-height: 1.5; }
.tile .val { font: 600 1.5rem/1.3 var(--font-en); font-variant-numeric: tabular-nums; margin-top: 4px; overflow-wrap: anywhere; }
.tile .val.th { font-family: var(--font-th); font-weight: 500; font-size: 1.125rem; line-height: 1.5; }
.tile .sub { font-size: .75rem; color: var(--text-3); margin-top: 4px; line-height: 1.6; }
@media (max-width: 1023px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .tiles .wide-sm { grid-column: span 2; } }

/* ---------- tables ---------- */
.table-wrap { width: 100%; }
.table-wrap.scroll-x { overflow-x: auto; }
table.dt { width: 100%; border-collapse: collapse; font-size: .9375rem; line-height: 1.5; }
.dt th { text-align: left; font: 600 .8125rem/1.4 var(--font-th); color: var(--text-2); background: var(--surface-sunken); padding: 10px 12px; white-space: nowrap; }
.dt th:first-child { border-radius: 8px 0 0 8px; } .dt th:last-child { border-radius: 0 8px 8px 0; }
.dt th button { all: unset; cursor: pointer; display: inline-flex; gap: 4px; align-items: center; }
.dt th button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.dt td { padding: 12px; border-bottom: 1px solid var(--border); height: 52px; vertical-align: middle; }
.dt td.r, .dt th.r { text-align: right; }
.dt td.r { font-family: var(--font-en); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dt tr.click { cursor: pointer; }
.dt tbody tr:hover td { background: var(--surface-hover); }
.dt tfoot td { font-weight: 600; border-bottom: 0; }
.dt .name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dt .name > span:not(.swatch) { overflow-wrap: anywhere; }
.dt .chev { color: var(--text-3); width: 32px; }
.dt tr.muted-row td { color: var(--text-3); }
.dt tr.muted-row .strike { text-decoration: line-through; }
.dt tr.child-row td:first-child { padding-left: 36px; }
.dt tr.hl td { background: var(--gold-soft); }
.row-cards { display: none; list-style: none; padding: 0; margin: 0; }
.row-cards li { border-bottom: 1px solid var(--border); padding: 12px 4px; display: flex; flex-direction: column; gap: 4px; min-height: 64px; }
.row-cards li.click { cursor: pointer; }
.row-cards .l1 { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.row-cards .l1 b { font-weight: 500; overflow-wrap: anywhere; min-width: 0; }
.row-cards .l1 .num { font-weight: 600; white-space: nowrap; }
.row-cards .l2 { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: .8125rem; color: var(--text-2); }
.row-cards .l2 .meter { max-width: 120px; }
@media (max-width: 1023px) {
  .table-wrap.cards-sm table { display: none; }
  .table-wrap.cards-sm .row-cards { display: block; }
}
@media (max-width: 767px) {
  .table-wrap.cards-xs table { display: none; }
  .table-wrap.cards-xs .row-cards { display: block; }
}
.bar-inline { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.bar-inline i { display: block; height: 6px; border-radius: 3px; background: var(--accent); }

/* ---------- forms ---------- */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > label, .field > .label { font-size: .875rem; font-weight: 500; line-height: 1.6; }
.input { height: 44px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--border-control); background: var(--input-bg); color: var(--text-1); width: 100%; outline: 2px solid transparent; outline-offset: 1px; transition: border-color 150ms var(--ease); }
textarea.input { height: auto; min-height: 88px; padding: 10px 12px; resize: vertical; line-height: 1.6; }
.input::placeholder { color: var(--text-3); }
.input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.input[aria-invalid="true"] { border-color: var(--crit); }
.input:disabled { opacity: .55; cursor: not-allowed; }
.help { min-height: 1lh; font-size: .75rem; line-height: 1.6; color: var(--text-3); }
.help.err { color: var(--crit-ink); display: flex; gap: 6px; align-items: flex-start; }
.form { display: flex; flex-direction: column; gap: 14px; }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pw-wrap { position: relative; }
.pw-wrap .input { padding-right: 48px; }
.pw-wrap button { position: absolute; right: 0; top: 0; width: 44px; height: 44px; border: 0; background: none; color: var(--text-2); cursor: pointer; border-radius: 8px; }
.inline-alert { display: flex; gap: 10px; padding: 12px 14px; border-radius: 10px; font-size: .9375rem; line-height: 1.6; align-items: flex-start; }
.inline-alert.crit { background: var(--crit-soft); color: var(--crit-ink); }
.inline-alert.warn { background: var(--warn-soft); color: var(--warn-ink); }
.inline-alert.info { background: var(--surface-sunken); color: var(--text-2); }
.inline-alert.ok { background: var(--ok-soft); color: var(--ok-ink); }
.check { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--accent); margin: 0; flex: none; }
.radio-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.radio-card { display: flex; gap: 10px; align-items: flex-start; padding: 14px; border-radius: 12px; border: 1px solid var(--border-control); cursor: pointer; background: var(--surface); text-align: left; }
.radio-card[aria-checked="true"] { border: 2px solid var(--accent); padding: 13px; background: var(--accent-soft); color: var(--accent-ink); }
.radio-card .ic { color: var(--text-3); }
.radio-card[aria-checked="true"] .ic { color: var(--accent); }
.tree { border: 1px solid var(--border); border-radius: 12px; padding: 4px 12px; max-height: 280px; overflow: auto; }
.tree .kids { padding-left: 28px; }
@media (max-width: 1023px) { .form-row, .radio-cards { grid-template-columns: minmax(0, 1fr); } }

/* ---------- segmented ---------- */
.seg { display: inline-flex; padding: 4px; gap: 2px; border-radius: 10px; background: var(--surface-sunken); max-width: 100%; }
.seg button { height: 36px; padding: 0 14px; border: 0; border-radius: 8px; background: transparent; color: var(--text-2); cursor: pointer; white-space: nowrap; font-size: .9375rem; transition: background-color 150ms var(--ease), color 150ms var(--ease); }
.seg button:hover { color: var(--text-1); }
.seg button[aria-checked="true"] { background: var(--surface); color: var(--text-1); font-weight: 600; box-shadow: var(--shadow-1); }
@media (max-width: 1023px) { .seg button { height: 44px; } .seg.full { display: flex; } .seg.full button { flex: 1; } }

/* ---------- dropdown / popover ---------- */
.dd { position: relative; display: inline-flex; min-width: 0; }
.dd-trigger { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--border-control); background: var(--surface); color: var(--text-1); cursor: pointer; white-space: nowrap; max-width: 100%; min-width: 0; }
.dd-trigger > span { overflow: hidden; text-overflow: ellipsis; }
.dd-trigger .k { color: var(--text-2); }
.dd-trigger:hover { background: var(--surface-hover); }
.dd-trigger.block { width: 100%; justify-content: space-between; }
.pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: var(--z-pop); min-width: 240px; max-width: min(360px, calc(100vw - 32px)); background: var(--surface-raised); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-pop); padding: 6px; }
.pop.right { left: auto; right: 0; }
.pop .list { max-height: 320px; overflow: auto; }
.opt { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 10px; border-radius: 8px; color: var(--text-1); cursor: pointer; line-height: 1.4; }
.opt .ck { width: 16px; height: 16px; flex: none; color: var(--accent); visibility: hidden; }
.opt:hover { background: var(--surface-hover); }
.opt[aria-selected="true"] { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.opt[aria-selected="true"] .ck { visibility: visible; }
.opt.active { outline: 2px solid var(--focus); outline-offset: -2px; }
.pop .search { margin: 4px 4px 6px; width: calc(100% - 8px); }
.pop-foot { display: flex; justify-content: space-between; gap: 8px; border-top: 1px solid var(--border); margin-top: 6px; padding-top: 6px; }
.pop-group { padding: 8px 10px 4px; font-size: .75rem; color: var(--text-3); font-weight: 500; }
.menu .opt { font-weight: 400; }
.menu .opt.danger { color: var(--crit-ink); }

/* ---------- calendar ---------- */
.dr { display: flex; gap: 12px; }
.dr-presets { display: flex; flex-direction: column; gap: 2px; min-width: 132px; }
.cal { width: 252px; }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; font-weight: 500; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 36px); gap: 0; }
.cal-grid .dow { font-size: .75rem; color: var(--text-3); text-align: center; height: 28px; line-height: 28px; }
.cal-grid button { width: 36px; height: 36px; border: 0; background: none; border-radius: 8px; cursor: pointer; font: 500 .8125rem/1 var(--font-en); color: var(--text-1); }
.cal-grid button:hover:not(:disabled) { background: var(--surface-hover); }
.cal-grid button:disabled { color: var(--text-3); opacity: .5; cursor: not-allowed; }
.cal-grid button.in { background: var(--accent-soft); color: var(--accent-ink); border-radius: 0; }
.cal-grid button.sel { background: var(--btn-primary-bg); color: var(--btn-primary-text); border-radius: 8px; }
@media (max-width: 767px) { .dr { flex-direction: column; } .dr-presets { flex-direction: row; flex-wrap: wrap; } }

/* ---------- modal / sheet / toast ---------- */
.scrim { position: fixed; inset: 0; background: var(--scrim); z-index: var(--z-modal); display: grid; place-items: center; padding: 24px; }
.modal { background: var(--surface-raised); border-radius: 16px; width: min(560px, 100%); max-height: calc(100dvh - 48px); display: flex; flex-direction: column; box-shadow: var(--shadow-pop); }
.modal.wide { width: min(720px, 100%); }
.modal-head { display: flex; align-items: center; gap: 12px; padding: 20px 24px 8px; }
.modal-head h2 { flex: 1; }
.modal-body { padding: 8px 24px 16px; overflow: auto; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 24px 20px; border-top: 1px solid var(--border); flex-wrap: wrap; }
@media (max-width: 767px) {
  .scrim { padding: 0; place-items: stretch; }
  .modal, .modal.wide { width: 100%; max-height: none; height: 100dvh; border-radius: 0; }
  .modal-foot { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
  .modal-foot .btn { flex: 1; }
}
.toasts { position: fixed; right: 24px; bottom: 24px; z-index: var(--z-toast); display: flex; flex-direction: column; gap: 8px; max-width: min(420px, calc(100vw - 32px)); }
.toast { display: flex; align-items: center; gap: 10px; padding: 10px 8px 10px 16px; border-radius: 12px; background: var(--navy-panel); color: var(--navy-panel-text); box-shadow: var(--shadow-pop); font-size: .9375rem; }
.toast p { flex: 1; }
.toast button { width: 40px; height: 40px; border: 0; border-radius: 8px; background: none; color: inherit; cursor: pointer; }
@media (max-width: 1023px) { .toasts { right: 16px; left: 16px; bottom: calc(64px + env(safe-area-inset-bottom) + 12px); max-width: none; } }

/* ---------- empty / error / skeleton ---------- */
.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 40px 16px; color: var(--text-2); min-height: 200px; }
.empty .ic { color: var(--text-3); }
.empty h3 { color: var(--text-1); font-weight: 600; }
.empty p { max-width: 46ch; }
.sk { background: var(--skeleton); border-radius: 8px; animation: shimmer 1.2s ease-in-out infinite alternate; }
@keyframes shimmer { from { opacity: .6; } to { opacity: 1; } }
.stale { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 8px 6px 14px; background: var(--warn-soft); color: var(--warn-ink); border-radius: 10px; font-size: .875rem; }
.stale p { flex: 1; }
.note-box { background: var(--surface-sunken); border-radius: 12px; padding: 16px 18px; color: var(--text-2); font-size: .9375rem; line-height: 1.7; }
.note-box ul { margin: 6px 0 0; padding-left: 20px; }
.foot-line { display: flex; align-items: center; gap: 12px; margin-top: 16px; color: var(--text-3); font-size: .8125rem; flex-wrap: wrap; }

/* ---------- charts ---------- */
.chart { position: relative; }
.chart svg { display: block; width: 100%; overflow: visible; }
.chart .axis { fill: var(--text-3); font: 500 12px var(--font-en); }
.chart .grid-line { stroke: var(--border); stroke-width: 1; }
.chart .lbl { fill: var(--text-2); font: 600 12px var(--font-en); }
.f-1 { fill: var(--slot-1); } .f-2 { fill: var(--slot-2); } .f-3 { fill: var(--slot-3); } .f-4 { fill: var(--slot-4); }
.f-5 { fill: var(--slot-5); } .f-6 { fill: var(--slot-6); } .f-7 { fill: var(--slot-7); } .f-8 { fill: var(--slot-8); }
.f-0, .f-system { fill: var(--data-system); } .f-other { fill: var(--data-other); } .f-series { fill: var(--slot-1); }
.s-series { stroke: var(--slot-1); fill: none; stroke-width: 2; }
.tip { position: absolute; z-index: var(--z-pop); pointer-events: none; background: var(--surface-raised); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-pop); padding: 8px 12px; font-size: .8125rem; line-height: 1.6; min-width: 140px; color: var(--text-1); }
.tip b { font-weight: 600; display: block; }
.chart-tools { display: flex; justify-content: flex-end; margin-top: 4px; }
.spark { display: block; }
.spark path { stroke: var(--text-2); stroke-width: 1.5; fill: none; }

/* ---------- login ---------- */
.login-page { min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
.login-frame { width: min(960px, 100%); display: grid; grid-template-columns: 440px minmax(0, 1fr); background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-1); overflow: hidden; }
.login-card { padding: 40px; display: flex; flex-direction: column; gap: 6px; }
.login-card .logo { width: 56px; height: 56px; }
.login-card .appname { font: 600 1.5rem/1.3 var(--font-en); margin-top: 8px; }
.login-panel { background: var(--navy-panel); color: var(--navy-panel-text); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 40px; text-align: center; border-top: 2px solid var(--gold); }
.login-panel img { width: 160px; height: 160px; }
.login-panel p { font: 500 1.375rem/1.6 var(--font-th); max-width: 16em; }
@media (max-width: 1023px) {
  .login-page { place-items: start center; padding: 48px 16px; }
  .login-frame { grid-template-columns: minmax(0, 1fr); }
  .login-panel { display: none; }
  .login-card { padding: 24px; }
  .login-card .input, .login-card .btn { height: 48px; }
}

/* ---------- misc ---------- */
.crumbs { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: .875rem; color: var(--text-2); margin-bottom: 4px; }
.crumbs a { color: var(--text-2); }
.section-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; font-size: .9375rem; }
.kv dt { color: var(--text-2); }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.hub { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.hub a { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); color: var(--text-1); text-decoration: none; min-height: 64px; }
.hub a .spacer { flex: 1; }
.err-page { max-width: 520px; margin: 64px auto; }
.quality li { display: flex; gap: 12px; align-items: center; justify-content: space-between; min-height: 48px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.quality { list-style: none; padding: 0; margin: 0; }
.temp-pw { display: flex; gap: 8px; align-items: center; padding: 12px; border-radius: 10px; background: var(--surface-sunken); font: 600 1.125rem/1.4 var(--font-mono); }
.temp-pw span { flex: 1; overflow-wrap: anywhere; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation: none !important; }
  .btn:active:not(:disabled) { transform: none; }
}

/* project cards */
.cards4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.proj-card { display: flex; flex-direction: column; gap: 10px; color: var(--text-1); text-decoration: none; transition: border-color 150ms var(--ease), background-color 150ms var(--ease); }
.proj-card:hover { border-color: var(--border-control); background: var(--surface-hover); }
.strike { text-decoration: line-through; }
.flip { transform: rotate(180deg); }
@media (max-width: 1023px) { .cards4 { grid-template-columns: minmax(0, 1fr); gap: 16px; } }
@media (min-width: 768px) and (max-width: 1023px) { .cards4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.grid > .md-half { display: flex; flex-direction: column; }
.grid > .md-half > .pool-card { flex: 1; }
.legend .amt-paren { display: none; }
.top-card .rank { margin-top: 8px; }
.pool-foot .btn-ghost { height: 36px; }
.top-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.top-head h3 { flex: 1; }
.top-head .btn-ghost { height: 32px; }
.legend { gap: 4px 12px; }
.top-card { padding: 20px 24px; }
.top-card .card-head { margin-bottom: 8px; }
.pool-foot .btn-ghost { height: 32px; }
.dt td .num.small, .dt td .en.small, .dt td .mono { white-space: nowrap; overflow-wrap: normal; }
.dt td .badge { white-space: nowrap; }
.form > div:empty { display: none; }
@media (max-width: 1023px) {
  .pool-card { padding: 16px 18px; }
  .pool-note.tier { display: none; }
  .alerts { margin-bottom: 16px; }
  .alert { min-height: 0; padding: 8px 8px 4px 14px; }
  .alert .btn-ghost { height: 36px; }
  .demo-banner { padding: 6px 20px; }
}

/* ================= fix round 1 (Mina F6 + Pimma FIX-LIST) ================= */
/* F6: every control gets a ≥44px hit area; the visual size may stay smaller */
.btn-ghost, .link-btn, .dt th button, a.hit, .crumbs a, .quality a, .note-box a, .inline-alert a, .dt td a, .foot-line a { position: relative; }
.btn-ghost::after, .link-btn::after, .dt th button::after, a.hit::after, .crumbs a::after, .quality a::after, .note-box a::after, .inline-alert a::after, .dt td a::after, .foot-line a::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: 44px; transform: translate(-50%, -50%);
}
.rank .who { min-height: 44px; }
.nowrap { white-space: nowrap; }
.clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.grow { flex: 1; min-width: 0; }
.grid.align-start { align-items: start; }
.only-sm { display: none; }
@media (max-width: 1023px) { .only-sm { display: block; } .hide-sm { display: none !important; } }
.only-xs { display: none; }
@media (max-width: 767px) { .only-xs { display: block; } .hide-xs { display: none !important; } }

/* #4 / #15 banners */
.demo-banner { min-height: 32px; padding: 4px 40px; background: var(--surface-sunken); color: var(--text-2); font-size: .8125rem; font-weight: 500; border-bottom: 1px solid var(--border); }
.manage-banner { min-height: 36px; padding: 4px 40px; }
.demo-pill { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; background: var(--gold-soft); color: var(--gold-soft-ink); font-size: .75rem; font-weight: 600; white-space: nowrap; }
@media (max-width: 1023px) { .demo-banner, .manage-banner { padding: 4px 20px; } }

/* #4 overview height */
.alert { min-height: 48px; padding: 6px 8px 6px 16px; }
.alert .btn-ghost { height: 36px; }
.pool-note.one-line { font-size: .75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
.pool-foot { flex-wrap: nowrap; }
.top-card .card-head .spacer { flex: 1; }
.top-card .card-head .btn-icon { width: 40px; height: 40px; }
.top-seg { display: none; }

/* #5 overview 390 */
@media (max-width: 767px) {
  .top-seg { display: block; margin-bottom: 16px; }
  .top-grid.show-elevenlabs .top-openai, .top-grid.show-openai .top-elevenlabs { display: none; }
  .rank li { min-height: 56px; }
  .rank .who { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; }
  .rank .who .chip { background: transparent; padding: 0; height: auto; font: 500 .75rem/1.5 var(--font-en); color: var(--text-3); }
  .rank .who .chip .swatch { width: 8px; height: 8px; }
  .top-half .legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .top-card .card-head .caption { display: none; }
}

/* #6 / #7 pool tiles */
.src-inline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

/* #1 raw rows: 9 columns fit at 1440 */
.rows-table table { font-size: .875rem; }
.rows-table .dt td, .rows-table .dt th { padding: 8px 8px; }
.rows-table .cell-cap { font: 500 .75rem/1.5 var(--font-en); color: var(--text-3); white-space: nowrap; }
.rows-table .units-cell { display: inline-block; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.rows-table .rc-company { min-width: 110px; }
.rows-table .rc-key .mono { white-space: normal; overflow-wrap: anywhere; font-size: .8125rem; }
.rows-table .rc-result { width: 44px; text-align: center; }
.result-ic { display: inline-flex; }
.result-ic.ok { color: var(--ok); } .result-ic.fail { color: var(--crit); }
@media (min-width: 1024px) { .rows-table.scroll-x { overflow-x: visible; } }
@media (max-width: 1023px) {
  .rows-table table { min-width: 960px; }
  .rows-table:not(.at-end) { -webkit-mask-image: linear-gradient(to left, transparent, black 24px); mask-image: linear-gradient(to left, transparent, black 24px); }
}

/* #2 tables: one-line rows */
.dt .col-name { min-width: 200px; }

/* #10 budget card */
.budget-l1 { font: 500 1rem/1.5 var(--font-th); color: var(--text-1); }
.budget-l2 { font-size: .875rem; color: var(--text-2); }

/* #14 top-up form + history */
.seg.full { display: flex; width: 100%; }
.seg.full button { flex: 1; }
.field.with-counter { position: relative; }
.field.with-counter .counter { position: absolute; right: 0; bottom: 0; font: 500 .75rem/1.6 var(--font-en); color: var(--text-3); }
.topup-table table { table-layout: fixed; }
.topup-table .col-date { width: 132px; }
.topup-table .col-note { width: 40%; min-width: 260px; }
.input-like { background: var(--input-bg); justify-content: space-between; }
@media (max-width: 1023px) { .pool-note.one-line { white-space: normal; overflow: visible; } }
/* #4 overview ≤ 900px @1440 */
@media (min-width: 1024px) {
  .pool-card { padding: 16px 24px 12px; min-height: 0; }
  .meter-row { margin: 2px 0 6px; }
  .substats { padding-top: 8px; }
  .alerts { margin-bottom: 16px; }
  .rank li { padding: 0; min-height: 44px; }
  .top-card { padding: 16px 24px; }
  .top-card .share-bar { height: 20px; }
  .content:has(.top-card) { padding-bottom: 24px; }
  .topbar { min-height: 60px; padding-top: 8px; padding-bottom: 8px; }
}

/* ================= fix round 2: Mina r2-4 — every control's own box is ≥44px (getBoundingClientRect), visual rhythm kept with negative margins ================= */
.btn-ghost { height: 44px; min-width: 44px; }
.pool-foot .btn-ghost, .top-head .btn-ghost, .alert .btn-ghost, .card-head .btn-ghost, .chart-tools .btn-ghost { height: 44px; margin-block: -6px; }
.top-card .card-head .btn-icon { width: 44px; height: 44px; margin-block: -4px; }
.dt th button { display: inline-flex; align-items: center; min-height: 44px; margin-block: -12px; padding: 0 2px; }
.crumbs a, .note-box a, .quality a, .inline-alert a, .foot-line a, .dt td a, a.hit, .link-btn { display: inline-flex; align-items: center; min-height: 44px; margin-block: -10px; }
.cal { width: 308px; }
.cal-grid { grid-template-columns: repeat(7, 44px); }
.cal-grid button { width: 44px; height: 44px; }
.cal-grid .dow { height: 24px; line-height: 24px; }
.toast button { width: 44px; height: 44px; }
.seg button { height: 44px; }
summary { min-height: 44px; display: list-item; padding-block: 11px; margin-block: -11px; cursor: pointer; }
@media (max-width: 767px) { .cal { width: 100%; } .cal-grid { grid-template-columns: repeat(7, minmax(44px, 1fr)); } .cal-grid button { width: 100%; } }

/* Pimma r2-4 / r2-5 / r2-6 */
@media (max-width: 1023px) {
  .pool-foot { flex-wrap: wrap; }
  .pool-foot .pool-note { flex: 1 1 100%; }
  .pool-foot > .btn-ghost:last-child { margin-left: auto; }
}
@media (max-width: 767px) { .top-half .legend .lg-system { grid-column: 1 / -1; } }
.tile .sub { text-wrap: balance; }
.dt th button { min-width: 44px; }
.crumbs a, .note-box a, .quality a, .inline-alert a, .foot-line a, .dt td a, a.hit, .link-btn { min-width: 44px; justify-content: center; }
.brand { min-height: 44px; }
.btn-icon, .dd:has(> .btn-icon) { flex: none; }

/* ---------- ring gauge (Pimma SPEC 2026-10-22, owner: centre = 2 % lines, pool cards kept below) ---------- */
.gauge-card { padding: 20px 24px 24px; container-type: inline-size; }
.gauge-card .card-head { margin-bottom: 12px; }
.gauge-body { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 40px; align-items: center; }
.gauge { position: relative; width: 264px; height: 264px; margin: 0 auto; }
.gauge > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.g-track { fill: none; stroke: var(--gauge-track); }
.g-track.empty { opacity: .55; }
.g-empty-line { fill: none; stroke: var(--gauge-empty); stroke-width: 2; stroke-dasharray: 4 5; }
.g-arc { fill: none; stroke-linecap: round; transition: stroke-dasharray 400ms var(--ease), opacity 150ms var(--ease); }
.g-arc.openai { stroke: var(--prov-openai); } .g-arc.elevenlabs { stroke: var(--prov-el); }
.g-arc.unknown { opacity: .38; }
.g-knob { stroke: var(--surface); stroke-width: 3; }
.g-knob.warn { fill: var(--warn); } .g-knob.crit, .g-knob.out { fill: var(--crit); }
.g-center { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; pointer-events: none; }
.g-center > div { width: 132px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.g-center .k { font-size: .75rem; font-weight: 500; color: var(--text-2); line-height: 1.4; }
.g-line { display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.g-line .lbl { font: 600 .75rem/1.35 var(--font-en); }
.g-line .val { font: 600 1.625rem/1.15 var(--font-en); font-variant-numeric: tabular-nums; letter-spacing: -.01em; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.g-line .val small { font: 500 .75rem/1.3 var(--font-th); color: var(--text-2); letter-spacing: 0; }
.g-line .val.word { font: 500 1rem/1.4 var(--font-th); }
.g-line.openai { color: var(--prov-openai); } .g-line.elevenlabs { color: var(--prov-el); }
.g-line.unknown .val { opacity: .6; }
.g-line .ic.warn { color: var(--warn-ink); } .g-line .ic.crit, .g-line .val.word.out { color: var(--crit-ink); }
.g-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.g-legend li + li { border-top: 1px solid var(--border); }
.g-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto 24px; gap: 16px; align-items: center; min-height: 96px; padding: 12px 12px 12px 8px; margin: 0 -12px 0 -8px; border-radius: 12px; color: inherit; text-decoration: none; transition: background-color 150ms var(--ease); }
.g-row:hover { background: var(--surface-hover); }
.g-key { width: 32px; height: 32px; }
.g-key .o { fill: none; stroke: var(--gauge-track); stroke-width: 4; } .g-key .on.openai { stroke: var(--prov-openai); } .g-key .on.elevenlabs { stroke: var(--prov-el); }
.g-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font: 600 1rem/1.4 var(--font-en); }
.g-name .pos { font: 500 .75rem/1 var(--font-th); color: var(--text-3); }
.g-sub { font-size: .875rem; color: var(--text-2); margin-top: 4px; line-height: 1.55; }
.g-sub b { font-weight: 500; color: var(--text-1); }
.g-val { text-align: right; min-width: 0; }
.g-val .amt { font: 600 1.75rem/1.3 var(--font-en); font-variant-numeric: tabular-nums; white-space: nowrap; }
.g-val .amt small { font: 500 .875rem/1 var(--font-th); color: var(--text-2); margin-left: 4px; }
.g-val .amt.none { color: var(--text-3); }
.g-val .pct { font-size: .8125rem; color: var(--text-2); white-space: nowrap; }
.g-chev { color: var(--text-3); display: inline-flex; }
.g-foot { margin-top: 12px; font-size: .75rem; color: var(--text-3); }
@container (max-width: 720px) {
  .gauge-body { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .gauge { width: 228px; height: 228px; }
  .g-center > div { width: 116px; }
  .g-line .val { font-size: 1.375rem; }
  .g-row { grid-template-columns: 28px minmax(0, 1fr) 20px; grid-template-areas: "k n c" "k v c" "k s c"; gap: 2px 12px; min-height: 88px; padding: 12px 8px; margin: 0 -8px; }
  .g-key { grid-area: k; width: 28px; height: 28px; align-self: start; margin-top: 2px; }
  .g-row > .g-main { display: contents; }
  .g-name { grid-area: n; }
  .g-name .tag-src { display: none; }
  .g-sub { grid-area: s; margin-top: 0; font-size: .8125rem; }
  .g-val { grid-area: v; text-align: left; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
  .g-val .amt { font-size: 1.5rem; }
  .g-chev { grid-area: c; }
}
@media (max-width: 1023px) { .gauge-card { padding: 16px 16px 20px; } }
@media (prefers-reduced-motion: reduce) { .g-arc, .g-row { transition: none; } }