/* KoreVia Fixtures — styles. Brand colour is set per organisation via --brand. */
:root {
  --bg: #F2F3EF;
  --surface: #FFFFFF;
  --surface-2: #E9ECE6;
  --ink: #17212B;
  --ink-2: #4A5663;
  --ink-3: #737F8B;
  --line: #D7DBD4;
  --line-strong: #B9BFB6;
  --brand: #0B4DA2;
  --brand-ink-light: #0B4DA2;
  --brand-ink-dark: #60A5FA;
  --brand-ink: var(--brand-ink-light);
  --on-brand: #FFFFFF;
  --brand-soft: color-mix(in srgb, var(--brand) 12%, var(--surface));
  --ok: #1D7F52;
  --ok-soft: color-mix(in srgb, #1D7F52 12%, var(--surface));
  --warn: #9A6412;
  --warn-soft: color-mix(in srgb, #C98A1E 16%, var(--surface));
  --bad: #B3362A;
  --bad-soft: color-mix(in srgb, #B3362A 12%, var(--surface));
  --live: #2459A8;
  --live-soft: color-mix(in srgb, #2459A8 12%, var(--surface));
  --shadow: 0 1px 2px rgba(20, 30, 40, .06), 0 4px 16px rgba(20, 30, 40, .06);
  --radius: 10px;
  --kv-navy: #0B1437;
  --kv-navy-2: #12205A;
  --kv-blue: #0B4DA2;
  --kv-teal: #14B8A6;
  --kv-teal-ink: #0F766E;
  --ai: #7C3AED;
  --ai-ink: #6D28D9;
  --ai-soft: color-mix(in srgb, #7C3AED 9%, var(--surface));
  --ai-line: color-mix(in srgb, #7C3AED 32%, var(--surface));
  --ai-glow: 0 0 0 1px color-mix(in srgb, #7C3AED 30%, transparent), 0 8px 24px color-mix(in srgb, #7C3AED 22%, transparent);
  --display: 'Barlow Condensed', 'Arial Narrow', 'Roboto Condensed', sans-serif;
  --body: 'Public Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0E1419; --surface: #161E25; --surface-2: #1D2730; --ink: #E6EBEE; --ink-2: #A8B3BC; --ink-3: #7B8791;
    --line: #29343E; --line-strong: #3A4752; --brand-ink: var(--brand-ink-dark);
    --ai-ink: #C4B5FD; --kv-teal-ink: #2DD4BF; --ai-soft: color-mix(in srgb, #8B5CF6 16%, var(--surface)); --ai-line: color-mix(in srgb, #8B5CF6 45%, var(--surface));
    --ok: #4CC08A; --warn: #E0A948; --bad: #F07A6C; --live: #7FAEF0;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.25);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0E1419; --surface: #161E25; --surface-2: #1D2730; --ink: #E6EBEE; --ink-2: #A8B3BC; --ink-3: #7B8791;
  --line: #29343E; --line-strong: #3A4752; --brand-ink: var(--brand-ink-dark);
  --ai-ink: #C4B5FD; --kv-teal-ink: #2DD4BF; --ai-soft: color-mix(in srgb, #8B5CF6 16%, var(--surface)); --ai-line: color-mix(in srgb, #8B5CF6 45%, var(--surface));
  --ok: #4CC08A; --warn: #E0A948; --bad: #F07A6C; --live: #7FAEF0;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.25);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font: 15px/1.5 var(--body); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--brand-ink); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.1; margin: 0; text-wrap: balance; letter-spacing: .01em; }
h1 { font-size: clamp(28px, 4vw, 40px); }
h2 { font-size: 24px; }
h3 { font-size: 19px; }
p { margin: 0; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-3); }
.small { font-size: 13px; }
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.boot { padding: 48px 16px; text-align: center; color: var(--ink-3); }

/* ---------- shell ---------- */
.topbar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--surface); border-bottom: 1px solid var(--line); }
.topbar-inner { max-width: 1240px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 14px; }
.org { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.org-logo { width: 38px; height: 38px; border-radius: 8px; object-fit: contain; background: var(--surface-2); flex: none; }
.org-mono { width: 38px; height: 38px; border-radius: 8px; background: var(--brand); color: var(--on-brand); display: grid; place-items: center; font: 700 18px var(--display); flex: none; }
.org-name { font: 700 20px/1.05 var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.org-sub { font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.comp-select { max-width: 240px; }
@media (max-width: 640px) { .topbar-inner { flex-wrap: wrap; } .topbar-actions { width: 100%; } .comp-select { flex: 1; max-width: none; } }

.tabs { max-width: 1240px; margin: 0 auto; padding: 0 16px; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { border: 0; background: none; padding: 10px 12px 11px; font-weight: 600; font-size: 14px; color: var(--ink-2); cursor: pointer; border-bottom: 3px solid transparent; white-space: nowrap; }
.tab:hover { color: var(--ink); }
.tab[aria-current="page"] { color: var(--ink); border-bottom-color: var(--brand); }

main > *, .grid-2 > *, .grid-3 > *, .slot > * { min-width: 0; }
main { max-width: 1240px; margin: 0 auto; padding: 22px 16px 80px; display: grid; gap: 22px; }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.page-head .meta { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--ink-2); font-size: 14px; margin-top: 6px; }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.spread { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.grid-2 { align-items: start; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 16px; }
.grid-3 { align-items: start; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.stack { display: grid; gap: 12px; align-content: start; }
.stack-lg { display: grid; gap: 20px; align-content: start; }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.panel-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 12px; }
.note { padding: 10px 12px; border-radius: 8px; background: var(--surface-2); color: var(--ink-2); font-size: 14px; }
.note.warn { background: var(--warn-soft); color: var(--warn); }
.note.bad { background: var(--bad-soft); color: var(--bad); }
.note.ok { background: var(--ok-soft); color: var(--ok); }

/* ---------- controls ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--line-strong); background: var(--surface); padding: 8px 14px; border-radius: 8px; font-weight: 600; font-size: 14px; cursor: pointer; text-decoration: none; color: var(--ink); white-space: nowrap; }
.btn:hover { border-color: var(--ink-3); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.btn.primary:hover { filter: brightness(1.06); }
.btn.ghost { border-color: transparent; background: none; }
.btn.ghost:hover { background: var(--surface-2); }
.btn.danger { color: var(--bad); }
.btn.sm { padding: 5px 10px; font-size: 13px; }
/* AI: one consistent purple treatment wherever AI can help */
.ai-ico { width: 16px; height: 16px; flex: none; color: var(--ai); }
.btn.ai { background: var(--ai-soft); border-color: var(--ai-line); color: var(--ai-ink); }
.btn.ai:hover { border-color: var(--ai); box-shadow: var(--ai-glow); }
.btn.ai .ai-ico { color: currentColor; }
.btn.ai-solid { background: var(--ai); border-color: var(--ai); color: #fff; }
.btn.ai-solid:hover { filter: brightness(1.08); box-shadow: var(--ai-glow); }
.btn.ai-solid .ai-ico { color: #fff; }
.ai-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ai-ink); }
.ai-panel { background: var(--ai-soft); border: 1px solid var(--ai-line); border-radius: var(--radius); padding: 16px 18px; }
.ai-panel h3 { display: flex; align-items: center; gap: 8px; }
.ai-panel .ai-ico { width: 20px; height: 20px; }
.chip.ai-chip { border-color: var(--ai-line); color: var(--ai-ink); background: var(--surface); display: inline-flex; align-items: center; gap: 6px; }
.chip.ai-chip:hover { border-color: var(--ai); color: var(--ai-ink); box-shadow: var(--ai-glow); }
.chip.ai-chip .ai-ico { width: 13px; height: 13px; }
.tab .ai-ico { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; }
.match-ai { border: 0; background: none; padding: 2px; border-radius: 6px; cursor: pointer; display: inline-grid; place-items: center; }
.match-ai:hover { background: var(--ai-soft); }
.match-ai .ai-ico { width: 15px; height: 15px; }

/* Floating AI co-pilot */
.ai-fab { position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 40; display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px 12px 14px; border-radius: 999px; border: 0; background: var(--ai); color: #fff; font-weight: 700; font-size: 14px; cursor: pointer; box-shadow: 0 10px 30px color-mix(in srgb, #7C3AED 40%, transparent); }
.ai-fab .ai-ico { color: #fff; width: 20px; height: 20px; }
.ai-fab:hover { filter: brightness(1.08); }
@media (max-width: 560px) { .ai-fab span { display: none; } .ai-fab { padding: 14px; } }
.drawer-back { position: fixed; inset: 0; background: rgba(10, 16, 30, .35); z-index: 45; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(100%, 440px); background: var(--surface); z-index: 46; display: grid; grid-template-rows: auto 1fr auto; box-shadow: -20px 0 60px rgba(0,0,0,.2); padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
.drawer-head { padding: 16px 18px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 8px; background: linear-gradient(180deg, var(--ai-soft), var(--surface)); }
.drawer-head h2 { display: flex; align-items: center; gap: 8px; font-size: 22px; }
.drawer-head .ai-ico { width: 22px; height: 22px; }
.drawer .chat-log { padding: 16px 18px; max-height: none; }
.drawer .chat-form { padding: 12px 18px 16px; border-top: 1px solid var(--line); }

label.field { display: grid; gap: 4px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
label.field .hint { font-weight: 400; color: var(--ink-3); }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=time], input[type=search], input[type=url], select, textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); font-size: 15px; min-width: 0;
}
textarea { resize: vertical; min-height: 90px; line-height: 1.45; }
input[type=color] { width: 44px; height: 36px; padding: 2px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); }
.check { display: flex; gap: 8px; align-items: center; font-size: 14px; font-weight: 500; color: var(--ink); }
.form-grid { align-items: end; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 12px; }
.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 8px; overflow: hidden; }
.seg button { border: 0; background: var(--surface); padding: 7px 12px; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--ink-2); }
.seg button + button { border-left: 1px solid var(--line-strong); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--surface); }

/* ---------- pills & chips ---------- */
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--surface-2); color: var(--ink-2); white-space: nowrap; }
.pill.ok { background: var(--ok-soft); color: var(--ok); }
.pill.live { background: var(--live-soft); color: var(--live); }
.pill.bad { background: var(--bad-soft); color: var(--bad); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.brand { background: var(--brand-soft); color: var(--brand-ink); }
.pill.live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .pill.live::before { animation: none; } }
.duty { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ink-3); }
.duty svg { width: 13px; height: 13px; }

/* ---------- stats ---------- */
.progress { height: 8px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--brand); border-radius: inherit; }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.stat { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.stat b { display: block; font: 700 30px/1 var(--display); font-variant-numeric: tabular-nums; }
.stat span { font-size: 13px; color: var(--ink-3); }

/* ---------- fixtures ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filters select { width: auto; min-width: 140px; }
.day-head { font: 700 20px var(--display); margin: 6px 0 -4px; }
.slot { display: grid; grid-template-columns: 76px 1fr; gap: 12px; align-items: start; }
.slot-time { font: 700 24px/1 var(--display); font-variant-numeric: tabular-nums; padding-top: 12px; }
.slot-time small { display: block; font: 500 12px var(--body); color: var(--ink-3); margin-top: 4px; }
.slot-games { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 10px; }
@media (max-width: 560px) { .slot { grid-template-columns: 1fr; gap: 6px; } .slot-time { padding-top: 0; font-size: 20px; } .slot-time small { display: inline; margin-left: 8px; } }

.match { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; display: grid; gap: 6px; text-align: left; width: 100%; cursor: default; }
button.match { cursor: pointer; }
button.match:hover { border-color: var(--line-strong); box-shadow: var(--shadow); }
.match.is-complete { background: color-mix(in srgb, var(--surface) 70%, var(--bg)); }
.match-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-3); }
.court { font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
.team-line { display: grid; grid-template-columns: 1fr auto 28px; gap: 8px; align-items: center; }
.team-line .nm { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.team-line .nm.tbc { font-weight: 500; color: var(--ink-3); font-style: italic; }
.team-line.win .nm { color: var(--ink); }
.team-line.lose .nm { color: var(--ink-3); font-weight: 500; }
.set-pts { display: flex; gap: 4px; font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.set-pts span { min-width: 20px; text-align: right; }
.set-pts span.w { color: var(--ink); font-weight: 700; }
.sets-big { font: 700 22px/1 var(--display); text-align: right; font-variant-numeric: tabular-nums; }
.team-line.win .sets-big { color: var(--brand-ink); }
.match-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; }

/* ---------- standings ---------- */
.table-wrap { overflow-x: auto; }
table.std { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
table.std th { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; text-align: right; padding: 6px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.std td { padding: 8px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
table.std th:nth-child(-n+2), table.std td:nth-child(-n+2) { text-align: left; }
table.std td.team { font-weight: 600; min-width: 140px; }
table.std td.pts { font-weight: 700; }
table.std tr.q td:first-child { box-shadow: inset 3px 0 0 var(--brand); }
table.std tr.cut td { border-bottom: 2px dashed var(--line-strong); }
.rank { font: 700 17px var(--display); width: 30px; }
.why { font-size: 12px; color: var(--ink-3); font-weight: 400; }

/* ---------- bracket ---------- */
.bracket { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 18px; overflow-x: auto; padding-bottom: 6px; }
.bracket-col { display: grid; grid-template-rows: auto 1fr; gap: 12px; }
.bracket-col > h3 { font-size: 16px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); }
.bracket-games { display: grid; align-content: space-around; gap: 12px; }
.src { font-size: 11px; color: var(--ink-3); }

/* ---------- pools & teams ---------- */
.pool-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; display: grid; gap: 10px; align-content: start; }
.pool-name { font: 700 20px var(--display); border: 0; background: none; padding: 2px 4px; margin-left: -4px; width: 100%; border-radius: 6px; }
.pool-name:hover, .pool-name:focus { background: var(--surface-2); }
.team-item { display: grid; grid-template-columns: 22px 1fr auto; gap: 6px; align-items: center; padding: 4px 0; border-top: 1px solid var(--line); }
.team-item input { border-color: transparent; background: none; padding: 5px 6px; }
.team-item input:hover, .team-item input:focus { border-color: var(--line-strong); background: var(--surface); }
.team-item .n { font-size: 12px; color: var(--ink-3); text-align: center; font-variant-numeric: tabular-nums; }
.team-item select { width: auto; padding: 4px 6px; font-size: 12px; }

/* ---------- assistant ---------- */
.chat { display: grid; grid-template-rows: 1fr auto; min-height: 460px; max-height: 70vh; }
.chat-log { overflow-y: auto; display: grid; align-content: start; gap: 10px; padding: 4px 2px 12px; }
.bubble { max-width: 84%; padding: 10px 12px; border-radius: 12px; white-space: pre-wrap; font-size: 14px; }
.bubble.user { justify-self: end; background: var(--ink); color: var(--surface); border-bottom-right-radius: 4px; }
.bubble.bot { justify-self: start; background: var(--ai-soft); border: 1px solid var(--ai-line); border-bottom-left-radius: 4px; }
.bubble.thinking { color: var(--ink-3); font-style: italic; }
.action-card { justify-self: start; width: min(100%, 520px); border: 1px solid var(--ai); background: var(--surface); border-radius: 10px; padding: 10px 12px; display: grid; gap: 8px; font-size: 14px; }
.action-card.done { border-color: var(--line); background: var(--surface); color: var(--ink-3); }
.chat-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.chat-form textarea { min-height: 46px; height: 46px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border: 1px solid var(--line-strong); background: var(--surface); border-radius: 999px; padding: 5px 11px; font-size: 13px; cursor: pointer; color: var(--ink-2); }
.chip:hover { border-color: var(--brand); color: var(--brand-ink); }
.ai-out { white-space: pre-wrap; font-size: 14px; background: var(--surface-2); border-radius: 8px; padding: 12px; }

/* ---------- modal & toast ---------- */
.overlay { position: fixed; inset: 0; background: rgba(10, 16, 22, .5); display: grid; place-items: center; padding: 16px; z-index: 50; }
.dialog { background: var(--surface); border-radius: 14px; width: min(100%, 560px); max-height: calc(100vh - 32px); overflow: auto; box-shadow: 0 20px 60px rgba(0,0,0,.3); display: grid; }
.dialog.wide { width: min(100%, 760px); }
.dialog-head { padding: 16px 18px 10px; display: flex; justify-content: space-between; gap: 10px; align-items: start; }
.dialog-body { padding: 4px 18px 16px; display: grid; gap: 14px; }
.dialog-foot { padding: 12px 18px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; background: var(--surface); position: sticky; bottom: 0; }
.close-x { border: 0; background: none; font-size: 22px; line-height: 1; cursor: pointer; color: var(--ink-3); padding: 2px 6px; }
.set-grid { display: grid; grid-template-columns: 1fr 76px 76px; gap: 8px; align-items: center; }
.set-grid .hd { font-size: 12px; font-weight: 600; color: var(--ink-2); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-grid input { text-align: center; font: 700 22px var(--display); padding: 6px; }
.set-grid .lbl { font-size: 13px; color: var(--ink-2); }
.set-grid .lbl small { color: var(--ink-3); }
.result-banner { font: 700 22px var(--display); }
#toast { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 60; display: grid; gap: 8px; }
.toast { background: var(--ink); color: var(--surface); padding: 10px 16px; border-radius: 10px; font-size: 14px; box-shadow: var(--shadow); }
.toast.bad { background: var(--bad); color: #fff; }

/* ---------- KoreVia platform ---------- */
.kv-bar { background: var(--kv-navy); color: #E7EAF6; font-size: 13px; }
.kv-bar-inner { max-width: 1240px; margin: 0 auto; padding: 7px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.kv-bar .kv-pill { display: inline-flex; align-items: center; gap: 6px; color: #D8CCFF; font-weight: 600; }
.kv-bar .kv-pill .ai-ico { color: #B79CFF; width: 14px; height: 14px; }
.kv-foot { display: grid; justify-items: center; gap: 6px; text-align: center; font-size: 12px; color: var(--ink-3); padding: 28px 16px 90px; }

/* ---------- landing / sign in ---------- */
.land { min-height: 100vh; display: grid; grid-template-columns: 1.25fr 1fr; background: var(--bg); }
.land-hero { background: var(--kv-navy); color: #EEF0FA; padding: 32px clamp(20px, 5vw, 64px) 40px; display: grid; align-content: space-between; gap: 36px; position: relative; overflow: hidden; }
.land-hero::after { content: ''; position: absolute; width: 520px; height: 520px; right: -180px; top: -160px; border-radius: 50%; background: radial-gradient(circle, rgba(20, 184, 166, .38), rgba(11, 77, 162, .25) 40%, transparent 68%); pointer-events: none; }
.land-hero > * { position: relative; z-index: 1; }
.land-kicker { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px; background: rgba(124, 58, 237, .22); color: #DCCFFF; font-size: 13px; font-weight: 600; border: 1px solid rgba(167, 139, 250, .35); }
.land-kicker .ai-ico { color: #C4B5FD; }
.land-hero h1 { font-size: clamp(40px, 5.4vw, 68px); color: #fff; max-width: 13ch; margin-top: 16px; line-height: 1; }
.land-hero h1 span { background: linear-gradient(90deg, #2DD4BF, #38BDF8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.land-hero p.lede { color: #C3C9E0; max-width: 46ch; margin-top: 16px; font-size: 17px; }
.demo-card { background: #fff; color: #17212B; border-radius: 14px; padding: 14px; max-width: 520px; box-shadow: 0 30px 60px rgba(0, 0, 0, .35); display: grid; gap: 10px; }
.demo-card .prompt { display: flex; gap: 10px; align-items: flex-start; background: #F4F1FE; border: 1px solid #DDD3FC; border-radius: 10px; padding: 10px 12px; font-size: 14px; }
.demo-card .prompt .ai-ico { width: 18px; height: 18px; margin-top: 2px; }
.demo-card .out { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; font-size: 12px; }
.demo-card .out div { border: 1px solid #E3E6E1; border-radius: 8px; padding: 8px; }
.demo-card .out b { display: block; font: 700 14px var(--display); margin-bottom: 4px; }
.demo-card .out span { display: block; color: #5B6672; }
.demo-card .foot { display: flex; justify-content: space-between; font-size: 12px; color: #5B6672; }
.feature-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.feature { display: grid; grid-template-columns: 30px 1fr; gap: 10px; font-size: 14px; color: #C3C9E0; }
.feature b { color: #fff; display: block; font-size: 15px; }
.feature .fi { width: 30px; height: 30px; border-radius: 8px; background: rgba(124, 58, 237, .25); display: grid; place-items: center; }
.feature .fi .ai-ico { color: #C4B5FD; }
.land-form { padding: 40px clamp(20px, 5vw, 56px); display: grid; align-content: center; gap: 18px; max-width: 460px; width: 100%; justify-self: center; }
@media (max-width: 900px) { .land { grid-template-columns: 1fr; } .demo-card .out { grid-template-columns: 1fr; } }
.demo-banner { background: var(--warn-soft); color: var(--warn); font-size: 13px; text-align: center; padding: 6px 16px; }
.logo-preview { width: 72px; height: 72px; border-radius: 12px; border: 1px dashed var(--line-strong); display: grid; place-items: center; overflow: hidden; background: var(--surface-2); }
.logo-preview img { width: 100%; height: 100%; object-fit: contain; }
.copy-field { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.copy-field input { font-size: 13px; }
.empty { text-align: center; padding: 40px 16px; display: grid; gap: 12px; justify-items: center; }
.list-plain { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 14px; }
.order-list { display: grid; gap: 6px; }
.order-item { display: grid; grid-template-columns: 24px 1fr auto; gap: 8px; align-items: center; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-size: 14px; }
.order-item.off { opacity: .55; }


table.std.diff td, table.std.diff th { white-space: normal; text-align: left; }


/* share kit */
.share-grid { display: grid; grid-template-columns: 240px 1fr; gap: 20px; align-items: start; }
@media (max-width: 600px) { .share-grid { grid-template-columns: 1fr; justify-items: center; } }
.qr-box { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 8px; width: 100%; max-width: 240px; }
.qr-box.sm { max-width: 120px; }
.qr-box svg.qr { display: block; width: 100%; height: auto; }
.share-mini { display: grid; grid-template-columns: 120px 1fr; gap: 14px; align-items: start; }
@media (max-width: 480px) { .share-mini { grid-template-columns: 1fr; } }
.slug-field { display: flex; align-items: center; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); min-width: 0; }
.slug-field span { padding-left: 10px; color: var(--ink-3); font-size: 13px; white-space: nowrap; }
.slug-field input { border: 0; padding-left: 2px; background: none; }

/* ---------- KoreVia logo ---------- */
.kv-logo { display: inline-flex; align-items: center; gap: .5em; font-size: 16px; color: inherit; text-decoration: none; }
.kv-mark { width: 2em; height: 2em; border-radius: .45em; background: #fff; display: grid; place-items: center; padding: .16em; flex: none; box-shadow: 0 0 0 1px rgba(11, 20, 55, .08); }
.kv-mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
.kv-wm { height: 1.15em; width: auto; display: block; }
.kv-prod { font: 700 1.2em/1 var(--display); letter-spacing: .01em; color: var(--ink-2); padding-left: .5em; border-left: 1px solid var(--line-strong); }
.kv-prod b { color: var(--kv-teal-ink); }
.kv-logo.on-dark .kv-prod { color: #E6ECF7; border-color: rgba(255, 255, 255, .25); }
.kv-logo.on-dark .kv-prod b { color: #2DD4BF; }
.wm-d { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wm-l { display: none; } :root:not([data-theme="light"]) .wm-d { display: block; } }
:root[data-theme="dark"] .wm-l { display: none; }
:root[data-theme="dark"] .wm-d { display: block; }
.kv-bar .kv-logo { font-size: 15px; }
.land-hero .kv-logo { font-size: 22px; }
.kv-foot .kv-logo { font-size: 15px; }
.kv-bar-links { display: inline-flex; gap: 14px; align-items: center; }
.kv-bar-links a { color: #CFE3F7; text-decoration: none; font-weight: 600; }
.kv-bar-links a:hover { color: #fff; }
@media (max-width: 640px) { .kv-bar-links .hide-sm { display: none; } }
.kv-foot-links { color: var(--ink-3); }
.kv-foot-links a { color: var(--kv-teal-ink); font-weight: 600; text-decoration: none; }
.kv-foot-links a:hover { text-decoration: underline; }

/* ---------- Technology partner band ---------- */
.kv-partner { background: linear-gradient(135deg, #0B1437 0%, #0B2A63 60%, #0B4DA2 100%); color: #DCE6F5; }
.kv-partner-inner { max-width: 1240px; margin: 0 auto; padding: 48px clamp(20px, 5vw, 64px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 40px; align-items: center; }
@media (max-width: 860px) { .kv-partner-inner { grid-template-columns: 1fr; } }
.kv-partner-brand { display: grid; justify-items: start; gap: 14px; }
.kv-partner-brand .kv-mark { font-size: 44px; }
.kv-partner-brand .pw { height: 56px; width: auto; max-width: 100%; }
.kv-partner-brand .ps { height: 20px; width: auto; max-width: 100%; }
.kv-partner h2 { color: #fff; font-size: 34px; }
.kv-partner .eyebrow { color: #5EEAD4; }
.kv-partner p { color: #C9D6EA; max-width: 60ch; }
.kv-tagline { font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: 13px; color: #fff !important; }
.kv-tagline span { color: #38BDF8; }
.kv-pillars { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: #9FB3D1 !important; }
.kv-services { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.kv-services div { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); border-radius: 10px; padding: 10px 12px; font-size: 13px; color: #E6ECF7; }
.kv-services b { display: block; color: #fff; font-size: 14px; }
.btn.kv-teal { background: #14B8A6; border-color: #14B8A6; color: #04201D; }
.btn.kv-teal:hover { filter: brightness(1.06); }
.btn.kv-ghost { background: transparent; border-color: rgba(255, 255, 255, .35); color: #fff; }
.btn.kv-ghost:hover { border-color: #fff; }
.support-panel a { color: var(--kv-teal-ink); font-weight: 600; }
@media (max-width: 640px) { .kv-bar .kv-pill { font-size: 0; gap: 0; } .kv-bar .kv-pill .ai-ico { width: 18px; height: 18px; } }
.share-mini > * { min-width: 0; } .share-mini .btn { white-space: normal; }

/* ---------- platform notices & plans ---------- */
.announce { background: #E6F6F4; color: #0F5F57; font-size: 14px; text-align: center; padding: 8px 16px; border-bottom: 1px solid #BFE9E3; }
.announce.warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.announce a { color: inherit; font-weight: 700; }
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 14px; align-items: stretch; }
.plan-card.current { border-color: var(--kv-teal); box-shadow: 0 0 0 1px var(--kv-teal); }
.plan-price { font: 700 30px/1 var(--display); }
.plan-price small { font: 500 14px var(--body); color: var(--ink-3); margin-left: 2px; }
.usage { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; padding: 6px 0; border-top: 1px solid var(--line); }

/* ---------- admin console ---------- */
.admin-pill { background: rgba(20, 184, 166, .2); color: #5EEAD4; padding: 3px 10px; border-radius: 999px; }
main.admin { max-width: 1320px; }
.stat.hero { background: linear-gradient(135deg, #0B1437, #0B4DA2); border-color: transparent; }
.stat.hero b, .stat.hero span, .stat.hero small { color: #fff; }
.stat small { display: block; font-size: 12px; color: var(--ink-3); margin-top: 4px; }
.stat.hero small { color: #BFD3F2; }
svg.chart { width: 100%; height: auto; display: block; overflow: visible; }
svg.chart .gl { stroke: var(--line); stroke-width: 1; }
svg.chart .base { stroke: var(--line-strong); stroke-width: 1; }
svg.chart .al { fill: var(--ink-3); font-size: 11px; font-family: var(--body); }
svg.chart .bf { fill: color-mix(in srgb, var(--kv-blue) 70%, var(--surface)); }
svg.chart .bf.last { fill: var(--kv-blue); }
svg.chart .bar:hover .bf { fill: var(--kv-teal); }
:root[data-theme="dark"] svg.chart .bf { fill: #3B82F6; }
.hbars { display: grid; gap: 8px; }
.hbar { display: grid; grid-template-columns: minmax(90px, 30%) 1fr auto; gap: 10px; align-items: center; font-size: 13px; }
.hbar .hl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink-2); }
.hbar .ht { height: 12px; background: var(--surface-2); border-radius: 0 4px 4px 0; overflow: hidden; }
.hbar .ht span { display: block; height: 100%; background: var(--kv-blue); border-radius: 0 4px 4px 0; }
.hbar:hover .ht span { background: var(--kv-teal); }
.hbar .hv { font-variant-numeric: tabular-nums; font-weight: 600; }
.adm-tip { position: fixed; z-index: 70; pointer-events: none; background: var(--ink); color: var(--surface); font-size: 12px; padding: 6px 9px; border-radius: 6px; box-shadow: var(--shadow); white-space: nowrap; }
table.adm { width: 100%; border-collapse: collapse; font-size: 14px; }
table.adm th { text-align: left; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.adm td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.adm td small { display: block; color: var(--ink-3); font-size: 12px; }
table.adm .r { text-align: right; font-variant-numeric: tabular-nums; }
table.adm tr.click { cursor: pointer; }
table.adm tr.click:hover td { background: var(--surface-2); }
table.adm tr.tot td { font-weight: 700; border-bottom: 0; }
.nowrap { white-space: nowrap; }
.org-cell { display: flex; gap: 10px; align-items: center; }
.org-cell .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.mini-prog { width: 80px; height: 6px; background: var(--surface-2); border-radius: 999px; overflow: hidden; display: inline-block; vertical-align: middle; margin-right: 6px; }
.mini-prog span { display: block; height: 100%; background: var(--kv-teal); }
.list { display: grid; }
.list-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 2px; border: 0; border-top: 1px solid var(--line); background: none; text-align: left; width: 100%; font-size: 14px; }
button.list-row { cursor: pointer; }
button.list-row:hover { background: var(--surface-2); }
.list-row small { display: block; color: var(--ink-3); font-size: 12px; }
.asset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.asset { border: 1px solid var(--line); border-radius: 10px; padding: 10px; display: grid; gap: 6px; font-size: 13px; }
.asset small { color: var(--ink-3); word-break: break-all; }
.asset-img { height: 110px; border-radius: 8px; background: #fff; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--line); }
.asset.dark-bg .asset-img { background: #0B1437; }
.asset-img img { width: auto; height: auto; max-width: 92%; max-height: 94px; object-fit: contain; }
.pill.ai-pill { background: var(--ai-soft); color: var(--ai-ink); }

.seg { justify-self: start; max-width: 100%; overflow-x: auto; }

.grid-2.wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr)); }
.panel > h3 { margin-bottom: 12px; }
.panel > h3 + p.small { margin-top: -8px; margin-bottom: 10px; }
table.adm td:first-child { white-space: nowrap; }

.kv-build { display: block; font-size: 11px; color: var(--ink-3); opacity: .8; font-variant-numeric: tabular-nums; }