/* =====================================================================
   SIGNAL · AI CRM Intelligence
   editorial intelligence desk — ink & paper, one accent, 8 fixed category hues
   (category palette validated for CVD/contrast on both surfaces)
===================================================================== */
:root {
    --font: 'Pretendard Variable', Pretendard, -apple-system, 'Segoe UI', system-ui, 'Noto Sans KR', sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;

    --bg: #f3f4f7;
    --surface: #ffffff;
    --surface-2: #f7f8fa;
    --surface-3: #eef0f4;
    --line: #e5e7ed;
    --line-2: #d3d8e1;
    --text: #0f1422;
    --text-2: #4b5468;
    --muted: #858ea1;
    --accent: #3b5bfd;
    --accent-ink: #2a45d6;
    --accent-soft: rgba(59, 91, 253, .08);
    --accent-line: rgba(59, 91, 253, .28);
    --hero-a: rgba(59, 91, 253, .10);
    --hero-b: rgba(0, 163, 154, .08);

    /* status (reserved: always icon + label) */
    --good: #0ca30c;
    --good-ink: #006300;
    --good-soft: rgba(12, 163, 12, .09);
    --warn: #fab219;
    --warn-ink: #8a5a00;
    --warn-soft: rgba(250, 178, 25, .14);
    --bad: #d03b3b;
    --bad-ink: #b42828;
    --bad-soft: rgba(208, 59, 59, .09);

    /* category palette — slot order is fixed (crm_cx … policy) */
    --c1: #2a78d6; --c2: #eb6834; --c3: #1baf7a; --c4: #eda100;
    --c5: #e87ba4; --c6: #008300; --c7: #6250d6; --c8: #e34948;

    /* sequential (blue) for heat cells */
    --seq-0: #f1f4f9; --seq-1: #cde2fb; --seq-2: #9ec5f4; --seq-3: #5598e7; --seq-4: #256abf; --seq-5: #104281;

    --grid: #eceef2;
    --axis: #c3c7d0;
    --shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 6px 20px rgba(16, 24, 40, .05);
    --shadow-lg: 0 18px 48px rgba(16, 24, 40, .12);
    --radius: 16px;
    --radius-sm: 10px;
    --nav-w: 244px;
}

[data-theme="dark"] {
    --bg: #090c12;
    --surface: #121620;
    --surface-2: #161b26;
    --surface-3: #1c2230;
    --line: rgba(255, 255, 255, .07);
    --line-2: rgba(255, 255, 255, .13);
    --text: #edf0f6;
    --text-2: #a9b2c3;
    --muted: #6e7789;
    --accent: #7f9bff;
    --accent-ink: #a5b7ff;
    --accent-soft: rgba(127, 155, 255, .12);
    --accent-line: rgba(127, 155, 255, .35);
    --hero-a: rgba(127, 155, 255, .14);
    --hero-b: rgba(63, 210, 199, .08);

    --good-ink: #3fcf3f;
    --good-soft: rgba(12, 163, 12, .16);
    --warn-ink: #fab219;
    --warn-soft: rgba(250, 178, 25, .14);
    --bad-ink: #f07272;
    --bad-soft: rgba(208, 59, 59, .18);

    --c1: #3987e5; --c2: #d95926; --c3: #199e70; --c4: #c98500;
    --c5: #d55181; --c6: #008300; --c7: #9085e9; --c8: #e66767;

    --seq-0: #171c28; --seq-1: #182c4c; --seq-2: #184f95; --seq-3: #2a78d6; --seq-4: #5598e7; --seq-5: #9ec5f4;

    --grid: #1f2533;
    --axis: #343b4b;
    --shadow: 0 1px 0 rgba(255, 255, 255, .02) inset, 0 10px 28px rgba(0, 0, 0, .28);
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, .5);
}

* { margin: 0; padding: 0; box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }
body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    word-break: keep-all;          /* 한국어는 어절 단위로 줄바꿈 */
    overflow-wrap: anywhere;       /* 긴 URL·모델명은 넘치지 않게 */
}
a { color: inherit; text-decoration: none }
button, input, select, textarea { font: inherit; color: inherit }
button { cursor: pointer; background: none; border: 0 }
::selection { background: var(--accent-soft) }
.mono { font-family: var(--mono) }
.num { font-variant-numeric: tabular-nums }
.hidden { display: none !important }
.muted { color: var(--muted) }
.dim { color: var(--text-2) }

/* ───────────── nav ───────────── */
.nav {
    position: fixed; inset: 0 auto 0 0; width: var(--nav-w); z-index: 40;
    background: var(--surface); border-right: 1px solid var(--line);
    display: flex; flex-direction: column; padding: 20px 14px 16px;
}
.brand { display: flex; align-items: center; gap: 11px; padding: 4px 8px 22px }
.brand-mark {
    width: 36px; height: 36px; border-radius: 10px; flex: none;
    background: linear-gradient(140deg, var(--accent), #00a39a);
    display: grid; place-items: center; box-shadow: 0 6px 18px var(--accent-soft);
}
.brand-mark svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round }
.brand-mark svg circle { fill: #fff; stroke: none }
.brand-title { display: block; font-weight: 850; font-size: 18px; letter-spacing: .14em; line-height: 1.1 }
.brand-sub { display: block; font-size: 9.5px; letter-spacing: .16em; color: var(--muted); font-weight: 600; margin-top: 3px }
.nav-close { display: none; position: absolute; top: 22px; right: 14px; width: 32px; height: 32px; border-radius: 8px; color: var(--text-2) }
.nav-list { display: flex; flex-direction: column; gap: 2px }
.nav-list a {
    display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px;
    color: var(--text-2); font-weight: 560; font-size: 14px; transition: background .15s, color .15s;
}
.nav-list a i { width: 18px; text-align: center; font-size: 14px; color: var(--muted); transition: color .15s }
.nav-list a:hover { background: var(--surface-2); color: var(--text) }
.nav-list a.active { background: var(--accent-soft); color: var(--accent-ink); font-weight: 700 }
.nav-list a.active i { color: var(--accent) }
.nav-foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px }
.pipeline { border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: var(--surface-2) }
.pl-title { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; color: var(--muted); margin-bottom: 8px; text-transform: uppercase }
.pl-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-2); padding: 3px 0 }
.pl-row b { margin-left: auto; font-weight: 650; color: var(--text); font-size: 12px; font-variant-numeric: tabular-nums; text-align: right; max-width: 110px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.pl-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line-2); flex: none }
.pl-dot.on { background: var(--good); box-shadow: 0 0 0 3px var(--good-soft) }
.pl-dot.busy { background: var(--accent); animation: pulse 1.4s infinite }
.pl-dot.err { background: var(--bad) }
.theme-toggle {
    display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px;
    color: var(--text-2); font-size: 13px; border: 1px solid var(--line);
}
.theme-toggle:hover { background: var(--surface-2); color: var(--text) }
.nav-backdrop { display: none }

/* ───────────── shell ───────────── */
.shell { margin-left: var(--nav-w); min-height: 100vh; display: flex; flex-direction: column }
.topbar {
    position: sticky; top: 0; z-index: 30; height: 60px; display: flex; align-items: center; gap: 14px;
    padding: 0 28px; background: color-mix(in srgb, var(--bg) 82%, transparent);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line);
}
.nav-toggle { display: none; width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--line); color: var(--text-2) }
.crumb { display: flex; align-items: center; gap: 10px; font-size: 11.5px; font-weight: 700; letter-spacing: .16em; color: var(--muted) }
.crumb-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent) }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px }
.page { padding: 26px 28px 40px; flex: 1; width: 100%; max-width: 1560px; margin: 0 auto }
.foot { padding: 18px 28px 26px; font-size: 12px; color: var(--muted); text-align: center }

/* ───────────── primitives ───────────── */
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px }
.span-3 { grid-column: span 3 } .span-4 { grid-column: span 4 } .span-5 { grid-column: span 5 }
.span-6 { grid-column: span 6 } .span-7 { grid-column: span 7 } .span-8 { grid-column: span 8 }
.span-9 { grid-column: span 9 } .span-12 { grid-column: span 12 }

.card {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 20px 22px; box-shadow: var(--shadow); min-width: 0;
}
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px }
.card-head h3 { font-size: 15.5px; font-weight: 750; letter-spacing: -.01em; display: flex; align-items: center; gap: 8px }
.card-head h3 i { color: var(--accent); font-size: 14px }
.card-head .sub { font-size: 12.5px; color: var(--muted); margin-top: 2px }
.link { font-size: 12.5px; color: var(--accent-ink); font-weight: 650; white-space: nowrap }
.link:hover { text-decoration: underline }
.section-title { font-size: 12px; font-weight: 750; letter-spacing: .12em; color: var(--muted); text-transform: uppercase; margin: 28px 0 12px }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap }
.page-head h1 { font-size: 26px; font-weight: 800; letter-spacing: -.025em; line-height: 1.25 }
.page-head p { color: var(--text-2); margin-top: 4px; font-size: 14px }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 16px;
    border-radius: 10px; font-weight: 650; font-size: 13.5px; border: 1px solid transparent; white-space: nowrap;
    transition: background .15s, border-color .15s, color .15s, transform .1s;
}
.btn:active { transform: translateY(1px) }
.btn:disabled { opacity: .55; cursor: not-allowed }
.btn-primary { background: var(--accent); color: #fff }
[data-theme="dark"] .btn-primary { color: #0b1020 }
.btn-primary:hover { filter: brightness(1.06) }
.btn-ghost { border-color: var(--line-2); color: var(--text); background: var(--surface) }
.btn-ghost:hover { background: var(--surface-2) }
.btn-sm { height: 32px; padding: 0 12px; font-size: 12.5px; border-radius: 9px }
.btn-icon { width: 32px; padding: 0 }
.btn .spin, .spin { animation: spin 1s linear infinite }

.chip {
    display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px;
    border: 1px solid var(--line); background: var(--surface); font-size: 12px; font-weight: 600; color: var(--text-2);
    white-space: nowrap;
}
.status-chip i { font-size: 11px }
.status-chip.ok { color: var(--good-ink); border-color: color-mix(in srgb, var(--good) 35%, transparent); background: var(--good-soft) }
.status-chip.busy { color: var(--accent-ink); border-color: var(--accent-line); background: var(--accent-soft) }
.status-chip.err { color: var(--bad-ink); border-color: color-mix(in srgb, var(--bad) 35%, transparent); background: var(--bad-soft) }

.cat {
    display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--text-2);
    padding: 2px 9px 2px 7px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); white-space: nowrap;
}
.cat::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--dot, var(--muted)); flex: none }

.badge {
    display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; padding: 2px 8px;
    border-radius: 6px; white-space: nowrap; line-height: 18px;
}
.badge i { font-size: 10px }
.badge.opportunity { color: var(--good-ink); background: var(--good-soft) }
.badge.threat { color: var(--bad-ink); background: var(--bad-soft) }
.badge.watch { color: var(--warn-ink); background: var(--warn-soft) }
.badge.neutral { color: var(--text-2); background: var(--surface-3) }
.badge.accent { color: var(--accent-ink); background: var(--accent-soft) }
.badge.new { color: var(--accent-ink); background: var(--accent-soft); letter-spacing: .04em }
.delta-up { color: var(--good-ink); font-weight: 700 }
.delta-down { color: var(--bad-ink); font-weight: 700 }
.delta-flat { color: var(--muted); font-weight: 600 }

.tag {
    display: inline-flex; align-items: center; font-size: 12px; color: var(--text-2); padding: 1px 8px; border-radius: 6px;
    background: var(--surface-3); white-space: nowrap; cursor: pointer; transition: color .15s, background .15s;
}
.tag:hover { color: var(--accent-ink); background: var(--accent-soft) }
.tag.ent { background: transparent; border: 1px solid var(--line); }

.meter { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--muted); white-space: nowrap }
.meter-bar { width: 54px; height: 4px; border-radius: 4px; background: var(--surface-3); overflow: hidden }
.meter-bar span { display: block; height: 100%; border-radius: 4px; background: var(--accent) }
.meter b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; min-width: 18px }

input.input, select.select, textarea.input {
    height: 38px; border: 1px solid var(--line-2); background: var(--surface); border-radius: 10px; padding: 0 12px;
    outline: none; transition: border-color .15s, box-shadow .15s; min-width: 0;
}
textarea.input { height: auto; padding: 10px 12px; resize: vertical; line-height: 1.6 }
input.input:focus, select.select:focus, textarea.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft) }
select.select { padding-right: 30px; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 15px) 16px, calc(100% - 10px) 16px; background-size: 5px 5px; background-repeat: no-repeat }

.seg { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--surface-3); gap: 2px }
.seg button { height: 30px; padding: 0 12px; border-radius: 8px; font-size: 12.5px; font-weight: 650; color: var(--text-2) }
.seg button:hover { color: var(--text) }
.seg button.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, .12) }

.switch { position: relative; width: 38px; height: 22px; flex: none; display: inline-block }
.switch input { opacity: 0; width: 0; height: 0 }
.switch span { position: absolute; inset: 0; border-radius: 22px; background: var(--line-2); transition: background .2s; cursor: pointer }
.switch span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 3px rgba(0, 0, 0, .25) }
.switch input:checked + span { background: var(--accent) }
.switch input:checked + span::after { transform: translateX(16px) }
.switch input:focus-visible + span { box-shadow: 0 0 0 3px var(--accent-soft) }

.empty { padding: 34px 16px; text-align: center; color: var(--muted); font-size: 13px }
.empty i { font-size: 22px; display: block; margin-bottom: 10px; opacity: .6 }
.skel { position: relative; overflow: hidden; background: var(--surface-3); border-radius: 8px; min-height: 14px }
.skel::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface) 55%, transparent), transparent); animation: shimmer 1.4s infinite }
.loading-soft { opacity: .55; transition: opacity .2s }

@keyframes spin { to { transform: rotate(360deg) } }
@keyframes shimmer { to { transform: translateX(100%) } }
@keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }
@keyframes rise { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }
.rise { animation: rise .35s ease both }

/* ───────────── tooltip & toasts ───────────── */
.tip {
    position: fixed; z-index: 100; pointer-events: none; opacity: 0; transition: opacity .12s;
    background: var(--text); color: var(--bg); font-size: 12px; padding: 7px 10px; border-radius: 8px; max-width: 320px;
    box-shadow: var(--shadow-lg); line-height: 1.45;
}
.tip.show { opacity: 1 }
.tip b { font-weight: 700 }
.toasts { position: fixed; right: 20px; bottom: 20px; z-index: 90; display: flex; flex-direction: column; gap: 8px }
.toast {
    display: flex; align-items: center; gap: 10px; min-width: 260px; max-width: 420px; padding: 12px 14px; border-radius: 12px;
    background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--shadow-lg); font-size: 13px; animation: rise .25s ease both;
}
.toast i { font-size: 15px }
.toast.ok i { color: var(--good) }
.toast.err i { color: var(--bad) }
.toast.info i { color: var(--accent) }

/* ───────────── dashboard: hero ───────────── */
.hero {
    position: relative; overflow: hidden; padding: 28px 30px 26px; display: flex; flex-direction: column;
    background:
        radial-gradient(700px 320px at 105% -20%, var(--hero-a), transparent 65%),
        radial-gradient(520px 300px at -10% 120%, var(--hero-b), transparent 65%),
        var(--surface);
}
.hero-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: 11.5px; font-weight: 800; letter-spacing: .16em; color: var(--accent-ink) }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); animation: pulse 2s infinite }
.hero-meta { font-size: 12px; color: var(--muted); display: flex; gap: 10px; flex-wrap: wrap }
.hero-title { font-size: clamp(22px, 2.3vw, 31px); font-weight: 820; letter-spacing: -.03em; line-height: 1.28; margin: 16px 0 12px; max-width: 920px; text-wrap: balance }
.hero-summary { font-size: 15px; line-height: 1.75; color: var(--text-2); max-width: 900px }
.hero-actions { display: flex; gap: 8px; margin-top: 22px; flex-wrap: wrap }
.hero-progress { margin-top: 18px; max-width: 520px }
.hero-progress .bar { height: 6px; border-radius: 6px; background: var(--surface-3); overflow: hidden; margin-top: 8px }
.hero-progress .bar span { display: block; height: 100%; background: var(--accent); border-radius: 6px; transition: width .4s }

.kpi-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-content: stretch }
.kpi { padding: 16px 18px; display: flex; flex-direction: column; gap: 4px }
.kpi .k-label { font-size: 12px; font-weight: 650; color: var(--text-2); display: flex; align-items: center; gap: 7px }
.kpi .k-label i { color: var(--muted); font-size: 12px }
.kpi .k-value { font-size: 28px; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; margin-top: 4px }
.kpi .k-value small { font-size: 14px; font-weight: 650; color: var(--muted); margin-left: 3px; letter-spacing: 0 }
.kpi .k-sub { font-size: 11.5px; color: var(--muted) }
.kpi.wide { grid-column: span 2 }
.split { display: flex; height: 8px; border-radius: 6px; overflow: hidden; gap: 2px; margin: 10px 0 8px; background: var(--surface) }
.split span { display: block; height: 100% }
.split-legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--text-2) }
.split-legend b { color: var(--text); font-variant-numeric: tabular-nums }
.split-legend i { font-size: 10px; margin-right: 3px }

/* trends */
.trend-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px }
.trend {
    border: 1px solid var(--line); border-radius: 14px; padding: 16px 16px 14px; display: flex; flex-direction: column; gap: 9px;
    background: var(--surface-2); transition: border-color .15s, transform .15s; min-width: 0;
}
.trend:hover { border-color: var(--accent-line) }
.trend-top { display: flex; align-items: center; justify-content: space-between; gap: 8px }
.trend-rank { font-size: 11px; font-weight: 800; color: var(--muted); letter-spacing: .08em }
.trend h4 { font-size: 16px; font-weight: 780; letter-spacing: -.02em; line-height: 1.35 }
.trend p { font-size: 13px; color: var(--text-2); line-height: 1.65 }
.momentum { font-size: 11.5px; font-weight: 750; display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 6px; background: var(--accent-soft); color: var(--accent-ink) }
.impact-dots { display: inline-flex; gap: 3px }
.impact-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--line-2) }
.impact-dots span.on { background: var(--accent) }
.implication { display: flex; gap: 9px; padding: 10px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); font-size: 12.5px; line-height: 1.6; color: var(--text) }
.implication i { color: var(--accent); margin-top: 3px; font-size: 12px }
.kw-row { display: flex; gap: 5px; flex-wrap: wrap }
.evidence { font-size: 12px; color: var(--muted); display: flex; flex-direction: column; gap: 3px; margin-top: auto; padding-top: 4px; border-top: 1px dashed var(--line) }
.evidence a { color: var(--text-2); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-top: 3px }
.evidence a:hover { color: var(--accent-ink) }
.evidence a i { font-size: 10px; margin-right: 5px; color: var(--muted) }

/* must-know list */
.mk-list { list-style: none; display: flex; flex-direction: column }
.mk { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; padding: 13px 0; border-top: 1px solid var(--line); align-items: start }
.mk:first-child { border-top: 0; padding-top: 2px }
.mk-rank { font-size: 18px; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; line-height: 1.3 }
.mk:nth-child(-n+3) .mk-rank { color: var(--accent) }
.mk-title { font-size: 14.5px; font-weight: 700; line-height: 1.45; letter-spacing: -.01em }
.mk-title:hover { color: var(--accent-ink) }
.mk-meta { display: flex; align-items: center; gap: 8px; margin-top: 5px; flex-wrap: wrap; font-size: 12px; color: var(--muted) }
.mk-reason { font-size: 12.5px; color: var(--text-2); margin-top: 6px; line-height: 1.6 }
.mk-reason i { color: var(--accent); font-size: 11px; margin-right: 5px }
.mk-score { text-align: right; display: flex; flex-direction: column; gap: 6px; align-items: flex-end }

/* vision */
.vision-card { display: flex; flex-direction: column }
.vision-statement {
    font-size: 17px; font-weight: 750; letter-spacing: -.02em; line-height: 1.55; padding: 16px 18px; border-radius: 12px;
    background: linear-gradient(135deg, var(--accent-soft), transparent 80%); border: 1px solid var(--accent-line); margin-bottom: 14px;
}
.vision-statement .q { font-size: 11px; font-weight: 800; letter-spacing: .14em; color: var(--accent-ink); display: block; margin-bottom: 6px }
.horizon-stack { display: flex; flex-direction: column; gap: 10px }
.hz { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px 0; border-top: 1px solid var(--line) }
.hz:first-child { border-top: 0 }
.hz-label { font-size: 11px; font-weight: 800; letter-spacing: .08em; color: var(--muted); line-height: 1.4 }
.hz-label b { display: block; font-size: 14px; color: var(--text); letter-spacing: -.01em }
.hz-title { font-weight: 700; font-size: 13.5px }
.hz-action { font-size: 12.5px; color: var(--text-2); margin-top: 3px; line-height: 1.6 }

/* category momentum */
.cm-row { display: grid; grid-template-columns: 112px minmax(0, 1fr) 92px; align-items: center; gap: 12px; padding: 7px 0 }
.cm-label { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 650; white-space: nowrap }
.cm-label::before { content: ''; width: 9px; height: 9px; border-radius: 3px; background: var(--dot); flex: none }
.cm-track { position: relative; height: 22px; border-radius: 4px }
.cm-bar { position: absolute; left: 0; top: 4px; bottom: 4px; border-radius: 0 4px 4px 0; background: var(--dot); min-width: 2px; cursor: default; transition: width .5s ease }
.cm-prev { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--text); opacity: .55; border-radius: 1px }
.cm-val { text-align: right; font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap }
.cm-val b { font-weight: 750; margin-right: 6px }
.cm-legend { display: flex; gap: 16px; font-size: 11.5px; color: var(--muted); margin-top: 10px; flex-wrap: wrap }
.cm-legend span { display: inline-flex; align-items: center; gap: 6px }
.cm-legend .lg-bar { width: 16px; height: 8px; border-radius: 2px; background: var(--muted) }
.cm-legend .lg-tick { width: 2px; height: 12px; background: var(--text); opacity: .55 }

/* keyword list */
.kw-list { display: flex; flex-direction: column }
.kw-item { display: grid; grid-template-columns: 22px minmax(0, 1fr) 84px 64px; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); cursor: pointer }
.kw-item:first-child { border-top: 0 }
.kw-item:hover .kw-name { color: var(--accent-ink) }
.kw-rank { font-size: 12px; color: var(--muted); font-weight: 700; font-variant-numeric: tabular-nums }
.kw-name { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.kw-name small { font-weight: 600; color: var(--muted); margin-left: 6px; font-size: 11.5px }
.kw-growth { text-align: right; font-size: 12px; font-variant-numeric: tabular-nums }
.spark { display: block; overflow: visible }
.spark .area { fill: var(--accent); opacity: .12 }
.spark .ln { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round }
.spark .end { fill: var(--accent); stroke: var(--surface); stroke-width: 2 }

/* radar mini */
.mini-list { list-style: none; display: flex; flex-direction: column }
.mini { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line) }
.mini:first-child { border-top: 0 }
.mini .r { font-size: 12px; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums }
.mini .n { font-size: 13px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.mini .n small { display: block; font-size: 11.5px; color: var(--muted); font-weight: 500; overflow: hidden; text-overflow: ellipsis }
.mini .m { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--text-2); text-align: right; white-space: nowrap }
.mv { font-size: 10.5px; font-weight: 750; margin-left: 4px }

/* community */
.pulse-item { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 11px 0; border-top: 1px solid var(--line) }
.pulse-item:first-child { border-top: 0; padding-top: 0 }
.src-ico { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-size: 14px; background: var(--surface-3); color: var(--text-2); font-weight: 800 }
.pulse-item h5 { font-size: 13.5px; font-weight: 680; line-height: 1.45 }
.pulse-item h5 a:hover { color: var(--accent-ink) }
.pulse-meta { font-size: 11.5px; color: var(--muted); display: flex; gap: 10px; margin-top: 3px; flex-wrap: wrap }

/* entity bars */
.rank-bars { display: flex; flex-direction: column; gap: 7px }
.rb { display: grid; grid-template-columns: 116px minmax(0, 1fr) 40px; gap: 10px; align-items: center; font-size: 12.5px; cursor: pointer }
.rb .rb-name { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.rb:hover .rb-name { color: var(--accent-ink) }
.rb .rb-track { height: 8px; background: var(--surface-3); border-radius: 0 4px 4px 0 }
.rb .rb-track span { display: block; height: 100%; background: var(--c1); border-radius: 0 4px 4px 0 }
.rb .rb-val { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-2) }

/* heat matrix */
.heat { display: grid; grid-template-columns: 72px repeat(3, minmax(0, 1fr)); gap: 3px; font-size: 12px }
.heat .hh { color: var(--muted); font-weight: 650; text-align: center; padding: 4px 0; font-size: 11.5px }
.heat .hr { display: flex; align-items: center; gap: 5px; font-weight: 700; font-size: 12px }
.heat .hc { height: 44px; border-radius: 6px; display: grid; place-items: center; font-weight: 750; font-variant-numeric: tabular-nums; cursor: default }

/* ───────────── news ───────────── */
.filters { padding: 16px 18px; position: sticky; top: 72px; z-index: 20 }
.f-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center }
.search { position: relative; flex: 1 1 260px; min-width: 200px }
.search i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 13px }
.search input { width: 100%; padding-left: 36px }
.cat-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px }
.cat-chip {
    display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-2);
    font-size: 12.5px; font-weight: 650; color: var(--text-2); background: var(--surface); transition: all .15s;
}
.cat-chip::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--dot, var(--muted)) }
.cat-chip.all::before { display: none }
.cat-chip small { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums }
.cat-chip:hover { border-color: var(--text-2); color: var(--text) }
.cat-chip.on { border-color: var(--text); color: var(--text); background: var(--surface-3) }
.active-filters { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px }
.af { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 6px 0 10px; border-radius: 7px; background: var(--accent-soft); color: var(--accent-ink); font-size: 12px; font-weight: 650 }
.af button { width: 18px; height: 18px; border-radius: 5px; color: inherit; font-size: 11px }
.af button:hover { background: var(--accent-line) }
.toggle-btn { height: 38px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line-2); font-size: 13px; font-weight: 650; color: var(--text-2); display: inline-flex; align-items: center; gap: 7px; background: var(--surface) }
.toggle-btn.on { color: var(--warn-ink); border-color: color-mix(in srgb, var(--warn) 55%, transparent); background: var(--warn-soft) }
.result-meta { display: flex; align-items: center; justify-content: space-between; margin: 18px 2px 12px; font-size: 13px; color: var(--text-2); gap: 10px; flex-wrap: wrap }
.result-meta b { color: var(--text) }
.news-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start }
.news-list.compact { grid-template-columns: minmax(0, 1fr) }

.news-card { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 16px; transition: border-color .15s }
.news-card:hover { border-color: var(--line-2) }
.nc-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--muted) }
.nc-meta .src { color: var(--text-2); font-weight: 650 }
.nc-meta .ai-flag { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--accent-ink); display: inline-flex; align-items: center; gap: 4px }
.nc-meta .ai-flag.h { color: var(--muted) }
.news-card h3 { font-size: 16.5px; font-weight: 760; line-height: 1.45; letter-spacing: -.015em }
.news-card h3 a:hover { color: var(--accent-ink) }
.nc-orig { font-size: 12px; color: var(--muted); margin-top: -6px; line-height: 1.45 }
.nc-sum { font-size: 13.5px; color: var(--text-2); line-height: 1.7 }
.why { border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: 0 10px 10px 0; padding: 9px 12px }
.why-label { font-size: 11px; font-weight: 800; letter-spacing: .06em; color: var(--accent-ink); display: flex; align-items: center; gap: 6px; margin-bottom: 3px }
.why p { font-size: 13px; line-height: 1.65; color: var(--text) }
.nc-tags { display: flex; gap: 5px; flex-wrap: wrap }
.nc-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--line); margin-top: auto }
.nc-foot .badges { display: flex; gap: 6px; flex-wrap: wrap }
.nc-foot .actions { margin-left: auto; display: flex; gap: 4px }
.icon-btn { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; color: var(--muted); transition: all .15s }
.icon-btn:hover { background: var(--surface-3); color: var(--text) }
.icon-btn.starred { color: var(--warn) }
.news-list.compact .news-card { padding: 14px 18px; gap: 7px }
.news-list.compact .nc-sum, .news-list.compact .nc-orig, .news-list.compact .nc-tags { display: none }
.news-list.compact .why { padding: 6px 10px }
.more-wrap { display: flex; justify-content: center; margin-top: 20px }

/* ───────────── trends ───────────── */
.kt { width: 100%; border-collapse: collapse; font-size: 13px }
.kt th { text-align: left; font-size: 11.5px; font-weight: 700; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap }
.kt td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: middle }
.kt tr:last-child td { border-bottom: 0 }
.kt tr.clickable { cursor: pointer }
.kt tr.clickable:hover td { background: var(--surface-2) }
.kt .r { text-align: right; font-variant-numeric: tabular-nums }
.kt .name { font-weight: 700 }
.kt .top-link { color: var(--text-2); font-size: 12.5px; display: block; max-width: 340px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.kt .top-link:hover { color: var(--accent-ink) }
.inline-bar { display: flex; align-items: center; gap: 8px }
.inline-bar span.b { height: 6px; border-radius: 0 3px 3px 0; background: var(--c1); display: block }
.sm-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px }
.sm { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px 8px; background: var(--surface-2) }
.sm-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px }
.sm-head .cat { background: transparent; border: 0; padding: 0; font-size: 12.5px; color: var(--text) }
.sm-head .v { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap }
.sm-head .v b { color: var(--text); font-size: 17px; font-weight: 800; margin-right: 4px }
.sm canvas { width: 100% !important; height: 86px !important; margin-top: 6px }
.chart-box { position: relative; height: 380px }
.quad-list { display: flex; flex-direction: column; gap: 2px }
.quad-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 13px; align-items: center }
.quad-item:first-child { border-top: 0 }
.quad-item a { font-weight: 650; line-height: 1.45 }
.quad-item a:hover { color: var(--accent-ink) }
.legend-row { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--text-2); margin-top: 10px }
.legend-row span { display: inline-flex; align-items: center; gap: 6px }
.legend-row i.sw { width: 10px; height: 10px; border-radius: 50%; display: inline-block }

/* ───────────── strategy ───────────── */
.st-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap }
.vision-hero {
    padding: 30px 32px; position: relative; overflow: hidden;
    background: radial-gradient(800px 360px at 100% 0%, var(--hero-a), transparent 60%), radial-gradient(600px 300px at 0% 100%, var(--hero-b), transparent 60%), var(--surface);
}
.vision-hero .eyebrow { margin-bottom: 14px }
.vision-hero h2 { font-size: clamp(21px, 2.1vw, 28px); font-weight: 820; letter-spacing: -.03em; line-height: 1.38; max-width: 1000px; text-wrap: balance }
.vh-summary { color: var(--text-2); font-size: 14.5px; line-height: 1.75; margin-top: 14px; max-width: 980px }
.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 22px }
.pillar { border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 70%, transparent); border-radius: 12px; padding: 14px 16px }
.pillar .pn { font-size: 11px; font-weight: 800; color: var(--accent-ink); letter-spacing: .1em }
.pillar h4 { font-size: 15px; font-weight: 760; margin: 4px 0 4px }
.pillar p { font-size: 13px; color: var(--text-2); line-height: 1.6 }
.roadmap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px }
.rm-col { border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); padding: 16px; display: flex; flex-direction: column; gap: 10px; position: relative }
.rm-col::before { content: ''; position: absolute; left: 16px; right: 16px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--accent); opacity: var(--op, 1) }
.rm-head { display: flex; align-items: baseline; justify-content: space-between }
.rm-head h4 { font-size: 15px; font-weight: 800 }
.rm-head span { font-size: 12px; color: var(--muted); font-weight: 650 }
.rm-step { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px 13px }
.rm-step h5 { font-size: 13.5px; font-weight: 750; line-height: 1.45 }
.rm-step p { font-size: 12.5px; color: var(--text-2); line-height: 1.6; margin-top: 4px }
.rm-kpi { margin-top: 8px; font-size: 11.5px; color: var(--accent-ink); display: flex; gap: 6px; align-items: flex-start; font-weight: 600 }
.rm-kpi i { margin-top: 3px; font-size: 10px }
.ot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px }
.ot ul { list-style: none; display: flex; flex-direction: column; gap: 8px }
.ot li { display: flex; gap: 10px; font-size: 13.5px; line-height: 1.6; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line) }
.ot li i { margin-top: 4px; font-size: 12px }
.ot .opp i { color: var(--good) }
.ot .thr i { color: var(--bad) }
.ot h4 { font-size: 13px; font-weight: 800; margin-bottom: 10px; display: flex; gap: 7px; align-items: center }
.comp-table { width: 100%; border-collapse: collapse; font-size: 13px }
.comp-table th { text-align: left; font-size: 11.5px; color: var(--muted); font-weight: 700; padding: 8px 10px; border-bottom: 1px solid var(--line) }
.comp-table td { padding: 11px 10px; border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.6 }
.comp-table tr:last-child td { border-bottom: 0 }
.comp-table td:first-child { font-weight: 750; white-space: nowrap }
.pick { display: flex; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line) }
.pick:first-child { border-top: 0; padding-top: 0 }
.pick-ico { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); flex: none; font-size: 13px }
.pick h5 { font-size: 13.5px; font-weight: 750 }
.pick p { font-size: 12.5px; color: var(--text-2); line-height: 1.6; margin-top: 2px }
.gen-overlay { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 12px; border: 1px solid var(--accent-line); background: var(--accent-soft); margin-bottom: 18px; font-size: 13.5px }
.gen-overlay i { color: var(--accent); font-size: 18px }
.gen-overlay b { font-weight: 750 }

/* ───────────── radar ───────────── */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 18px; overflow-x: auto }
.tabs button { padding: 10px 14px; font-weight: 700; font-size: 14px; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; display: inline-flex; gap: 8px; align-items: center }
.tabs button:hover { color: var(--text) }
.tabs button.on { color: var(--text); border-color: var(--accent) }
.lb { width: 100%; border-collapse: collapse; font-size: 13px }
.lb th { text-align: left; font-size: 11.5px; color: var(--muted); font-weight: 700; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap }
.lb td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: middle }
.lb tr:last-child td { border-bottom: 0 }
.lb .r { text-align: right; font-variant-numeric: tabular-nums }
.lb .rank { font-weight: 800; font-variant-numeric: tabular-nums; width: 34px }
.lb .model { font-weight: 700 }
.lic { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 5px; background: var(--surface-3); color: var(--text-2) }
.lic.open { background: var(--good-soft); color: var(--good-ink) }
.elo { display: flex; align-items: center; gap: 10px; min-width: 200px }
.elo-track { position: relative; flex: 1; height: 14px }
.elo-ci { position: absolute; top: 6px; height: 2px; background: var(--c1); opacity: .45 }
.elo-dot { position: absolute; top: 2px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--c1); border: 2px solid var(--surface) }
.elo b { font-variant-numeric: tabular-nums; min-width: 48px; text-align: right }
.rlist { list-style: none }
.ritem { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); align-items: start }
.ritem:first-child { border-top: 0; padding-top: 0 }
.ritem .rk { font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; font-size: 13px; line-height: 1.5 }
.ritem .tt { font-weight: 700; font-size: 13.5px; word-break: break-all; line-height: 1.45 }
.ritem .tt:hover { color: var(--accent-ink) }
.ritem .ds { font-size: 12.5px; color: var(--text-2); margin-top: 3px; line-height: 1.55 }
.ritem .note { font-size: 12.5px; color: var(--text); margin-top: 4px; line-height: 1.55; display: flex; gap: 6px }
.ritem .note i { color: var(--accent); font-size: 10px; margin-top: 5px }
.ritem .mt { font-size: 12px; color: var(--muted); display: flex; gap: 10px; margin-top: 5px; flex-wrap: wrap }
.ritem .mv-col { text-align: right; font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 750; white-space: nowrap }
.ritem .mv-col small { display: block; font-size: 11px; color: var(--muted); font-weight: 600 }
.paper { padding: 16px 0; border-top: 1px solid var(--line) }
.paper:first-child { border-top: 0; padding-top: 0 }
.paper h4 { font-size: 15px; font-weight: 750; line-height: 1.45 }
.paper h4 a:hover { color: var(--accent-ink) }
.paper .abs { font-size: 12.5px; color: var(--text-2); line-height: 1.65; margin-top: 6px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden }
.paper .abs.open { -webkit-line-clamp: unset }

/* ───────────── sources & settings ───────────── */
.src-group { margin-bottom: 18px }
.src-group-head { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 750; margin-bottom: 10px }
.src-group-head i { color: var(--accent); width: 18px; text-align: center }
.src-group-head small { font-weight: 600; color: var(--muted); font-size: 12px }
.st { width: 100%; border-collapse: collapse; font-size: 13px }
.st td { padding: 11px 10px; border-top: 1px solid var(--line); vertical-align: middle }
.st tr:first-child td { border-top: 0 }
.st .s-name { font-weight: 700 }
.st .s-name a:hover { color: var(--accent-ink) }
.st .s-desc { font-size: 12px; color: var(--muted); margin-top: 2px; line-height: 1.5 }
.st .s-err { font-size: 11.5px; color: var(--bad-ink); margin-top: 3px; line-height: 1.4; word-break: break-all }
.st .r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap }
.kind { font-family: var(--mono); font-size: 10.5px; padding: 1px 6px; border-radius: 5px; background: var(--surface-3); color: var(--text-2) }
.state-dot { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 650; white-space: nowrap }
.state-dot::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--line-2) }
.state-dot.ok { color: var(--good-ink) } .state-dot.ok::before { background: var(--good) }
.state-dot.fail { color: var(--bad-ink) } .state-dot.fail::before { background: var(--bad) }
.state-dot.off { color: var(--muted) }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0 }
.field.full { grid-column: 1 / -1 }
.field label { font-size: 12.5px; font-weight: 700; color: var(--text-2) }
.field .hint { font-size: 11.5px; color: var(--muted); line-height: 1.5 }
.field-inline { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2) }
.field-inline span { font-size: 13px; font-weight: 650 }
.field-inline small { display: block; font-size: 11.5px; color: var(--muted); font-weight: 500 }
.form-actions { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; align-items: center }
.stat-rows { display: flex; flex-direction: column }
.stat-rows div { display: flex; justify-content: space-between; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px }
.stat-rows div:first-child { border-top: 0 }
.stat-rows b { font-variant-numeric: tabular-nums }
.progress { height: 6px; border-radius: 6px; background: var(--surface-3); overflow: hidden }
.progress span { display: block; height: 100%; background: var(--accent); transition: width .4s }

/* ───────────── responsive ───────────── */
@media (max-width: 1280px) {
    .span-3 { grid-column: span 6 }
    .trend-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
    .sm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
@media (max-width: 1080px) {
    .span-4, .span-5, .span-7, .span-8, .span-9, .span-6 { grid-column: span 12 }
    .news-list { grid-template-columns: minmax(0, 1fr) }
    .roadmap, .pillars { grid-template-columns: minmax(0, 1fr) }
}
@media (max-width: 900px) {
    .nav { transform: translateX(-100%); transition: transform .25s ease; box-shadow: var(--shadow-lg) }
    .nav.open { transform: none }
    .nav-close { display: grid; place-items: center }
    .nav-backdrop.show { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, .35); z-index: 35 }
    .shell { margin-left: 0 }
    .nav-toggle { display: grid; place-items: center }
    .topbar { padding: 0 16px }
    .page { padding: 18px 16px 32px }
    #btnCollectNow span, .status-chip span { display: none }
    .filters { position: static }
    .ot { grid-template-columns: minmax(0, 1fr) }
    .form-grid { grid-template-columns: minmax(0, 1fr) }
}
@media (max-width: 640px) {
    .span-3 { grid-column: span 12 }
    .trend-grid, .sm-grid { grid-template-columns: minmax(0, 1fr) }
    .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
    .hero { padding: 22px 18px }
    .card { padding: 16px }
    .cm-row { grid-template-columns: 88px minmax(0, 1fr) 76px; gap: 8px }
    .kw-item { grid-template-columns: 20px minmax(0, 1fr) 70px }
    .kw-item .spark { display: none }
    .mk { grid-template-columns: 24px minmax(0, 1fr) }
    .mk-score { display: none }
    .lb .hide-sm, .st .hide-sm, .kt .hide-sm { display: none }
    .elo { min-width: 120px }
    .vision-hero { padding: 22px 18px }
}
@media print {
    .nav, .topbar, .foot, .no-print { display: none !important }
    .shell { margin-left: 0 }
    .card { box-shadow: none; break-inside: avoid }
}

/* =====================================================================
   AUTH · USERS · SECURITY
===================================================================== */
.nav-sep { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; color: var(--muted); padding: 14px 12px 6px; text-transform: uppercase }
.nav-list a .nav-lock { margin-left: auto; width: auto; font-size: 11px; color: var(--muted) }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
.nowrap { white-space: nowrap }
.table-wrap { overflow-x: auto }
.form-grid > .full { grid-column: 1 / -1 }
.btn-danger { background: var(--bad); color: #fff }
.btn-danger:hover { filter: brightness(1.06) }

/* user menu */
.user-menu { position: relative }
.user-menu summary {
    list-style: none; display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 11px 0 4px; border-radius: 999px;
    border: 1px solid var(--line); background: var(--surface); cursor: pointer; font-size: 13px; font-weight: 650; user-select: none;
}
.user-menu summary::-webkit-details-marker { display: none }
.user-menu summary:hover { background: var(--surface-2) }
.user-menu[open] summary { border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-soft) }
.um-caret { font-size: 10px; color: var(--muted) }
.um-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.avatar {
    width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 12.5px; font-weight: 800; flex: none;
    color: var(--text-2); background: var(--surface-3); border: 1px solid var(--line-2);
}
.avatar.admin { color: #fff; background: linear-gradient(140deg, var(--accent), #00a39a); border-color: transparent }
[data-theme="dark"] .avatar.admin { color: #0b1020 }
.avatar.lg { width: 40px; height: 40px; font-size: 16px }
.um-pop {
    position: absolute; right: 0; top: calc(100% + 8px); width: 252px; background: var(--surface); border: 1px solid var(--line);
    border-radius: 14px; box-shadow: var(--shadow-lg); padding: 8px; z-index: 60; animation: rise .16s ease both;
}
.um-head { display: flex; gap: 12px; align-items: center; padding: 10px 10px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px }
.um-head b { display: block; font-size: 14px }
.um-head small { display: block; color: var(--muted); font-size: 12px; font-family: var(--mono) }
.um-head .role-badge { margin-top: 6px }
.um-pop a, .um-pop button { display: flex; width: 100%; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; font-size: 13.5px; color: var(--text-2); font-weight: 600; text-align: left }
.um-pop a:hover, .um-pop button:hover { background: var(--surface-2); color: var(--text) }
.um-pop a i, .um-pop button i { width: 16px; text-align: center; color: var(--muted) }
.um-pop form { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 6px }
.role-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 6px; white-space: nowrap; line-height: 18px }
.role-badge i { font-size: 10px }
.role-badge.admin { color: var(--accent-ink); background: var(--accent-soft) }
.role-badge.user { color: var(--text-2); background: var(--surface-3) }
.role-badge.lg { font-size: 13px; padding: 6px 12px; border-radius: 9px }
.role-badge.lg i { font-size: 12px }
.role-badge.sm { font-size: 10.5px; padding: 0 6px; line-height: 17px }

.sec-banner {
    display: flex; align-items: center; gap: 12px; margin-bottom: 18px; padding: 11px 14px 11px 16px; border-radius: 12px;
    background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent); font-size: 13.5px;
}
.sec-banner > i { color: var(--warn-ink); font-size: 15px }
.sec-banner span { flex: 1; color: var(--text) }
.sec-banner b { color: var(--warn-ink) }

/* modal */
body.modal-open { overflow: hidden }
.modal-back {
    position: fixed; inset: 0; z-index: 100; background: rgba(9, 12, 20, .48); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
    display: grid; place-items: center; padding: 20px; animation: fadein .15s ease both;
}
@keyframes fadein { from { opacity: 0 } }
.modal {
    width: 100%; max-width: 440px; max-height: calc(100vh - 40px); overflow: auto; background: var(--surface); border: 1px solid var(--line);
    border-radius: 18px; box-shadow: var(--shadow-lg); padding: 22px 24px; animation: rise .2s ease both;
}
.modal.wide { max-width: 620px }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px }
.modal-head h3 { font-size: 17px; font-weight: 800; display: flex; gap: 10px; align-items: center; letter-spacing: -.01em }
.modal-head h3 i { color: var(--accent) }
.modal-msg { color: var(--text-2); font-size: 13.5px; line-height: 1.65; margin-bottom: 14px }
.modal-msg b { color: var(--text) }
.modal-err { margin-top: 14px; padding: 10px 12px; border-radius: 10px; background: var(--bad-soft); color: var(--bad-ink); font-size: 13px; line-height: 1.5 }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px }
.role-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px }
.rp { position: relative; cursor: pointer }
.rp input { position: absolute; opacity: 0; pointer-events: none }
.rp > span { display: block; height: 100%; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 12px; transition: border-color .15s, background .15s }
.rp b { display: flex; gap: 8px; align-items: center; font-size: 13.5px }
.rp b i { color: var(--muted); font-size: 12px }
.rp small { display: block; color: var(--muted); font-size: 12px; margin-top: 3px; line-height: 1.45 }
.rp:hover > span { border-color: var(--accent-line) }
.rp input:checked + span { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent) inset }
.rp input:checked + span b i { color: var(--accent) }
.rp input:focus-visible + span { box-shadow: 0 0 0 3px var(--accent-soft) }
.rp input:disabled + span { opacity: .55; cursor: not-allowed }
.pw-gen { display: flex; gap: 8px }
.pw-gen .input { flex: 1 }
.cred { border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); padding: 2px 14px; margin-bottom: 12px }
.cred div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 13px }
.cred div:first-child { border-top: 0 }
.cred span { color: var(--muted) }
.cred b { word-break: break-all; text-align: right; font-weight: 600 }
.hint-box { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin: 12px 0; line-height: 1.55 }
.hint-box i { color: var(--accent); margin-top: 3px }

/* password rules & strength (auth page + modals) */
.pw-rules { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 14px; font-size: 12px; color: var(--muted) }
.pw-rules li { display: flex; gap: 7px; align-items: center; line-height: 1.4 }
.pw-rules li i { font-size: 11px; width: 12px; text-align: center }
.pw-rules li:not(.ok):not(.no) i { font-size: 5px; opacity: .6 }
.pw-rules li.ok { color: var(--good-ink) }
.pw-rules li.no { color: var(--bad-ink) }
.pw-rules.sm { margin-top: 8px }
.pw-meter { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 6px; align-items: center; margin-top: -6px }
.pw-meter span { height: 5px; border-radius: 5px; background: var(--surface-3); transition: background .2s }
.pw-meter b { font-size: 12px; color: var(--muted); font-weight: 650; margin-left: 6px; min-width: 58px; text-align: right }
.pw-meter[data-score="0"] span:nth-child(-n+1), .pw-meter[data-score="1"] span:nth-child(-n+2) { background: var(--bad) }
.pw-meter[data-score="2"] span:nth-child(-n+3) { background: var(--warn) }
.pw-meter[data-score="3"] span:nth-child(-n+4), .pw-meter[data-score="4"] span:nth-child(-n+4) { background: var(--good) }
.match { font-size: 12px; display: flex; gap: 6px; align-items: center }
.match.ok { color: var(--good-ink) }
.match.no { color: var(--bad-ink) }

/* settings: tabs · users · security */
.tab-count { margin-left: 2px; font-size: 11px; font-weight: 700; padding: 0 7px; border-radius: 999px; background: var(--surface-3); color: var(--text-2); line-height: 18px }
.tab-count:empty { display: none }
.tab-count.warn { background: var(--bad-soft); color: var(--bad-ink) }
.lb th.c, .lb td.c { text-align: center }
.lb th.r, .lb td.r { text-align: right }
.ut td { padding: 12px 10px }
.u-cell { display: flex; align-items: center; gap: 11px; min-width: 160px }
.u-cell b { font-weight: 700 }
.u-cell small { display: block; color: var(--muted); font-size: 11.5px }
.row-actions { display: inline-flex; gap: 2px }
.show-sm { display: none !important }
.icon-btn.warn { color: var(--warn-ink) }
.icon-btn.danger:hover { color: var(--bad-ink); background: var(--bad-soft) }
.state-dot.warn { color: var(--warn-ink) }
.state-dot.warn::before { background: var(--warn) }
.role-cards { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px }
.role-card { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--surface-2) }
.role-card.admin { border-color: var(--accent-line) }
.rc-head { display: flex; justify-content: space-between; align-items: center; gap: 8px }
.rc-head small { color: var(--muted); font-size: 11.5px; font-weight: 600 }
.role-card p { font-size: 12.5px; color: var(--text-2); margin-top: 8px; line-height: 1.6 }
.perm td { font-size: 12.5px }
.perm .yes { color: var(--good-ink) }
.perm .no { color: var(--muted) }
.kpi-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px }
.sec-kpi.bad .k-label i { color: var(--bad) }
.sec-kpi.warn .k-label i { color: var(--warn-ink) }
.li-group { font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--muted); margin: 4px 0 2px; text-transform: uppercase }
.li-group small { font-size: 11px; color: var(--text-2); margin-left: 4px }
.lock-item { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line) }
.li-group + .lock-item { border-top: 0 }
.lock-item + .li-group { margin-top: 14px }
.li-icon { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none }
.li-icon.bad { background: var(--bad-soft); color: var(--bad-ink) }
.li-icon.warn { background: var(--warn-soft); color: var(--warn-ink) }
.li-main { flex: 1; min-width: 0 }
.li-main small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px }
.defense { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px }
.df { display: flex; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2) }
.df-icon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); flex: none }
.df b { font-size: 13.5px }
.df p { font-size: 12px; color: var(--text-2); margin-top: 4px; line-height: 1.55 }
.ev-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 6px; white-space: nowrap }
.ev-badge i { font-size: 11px }
.ev-badge.ok { color: var(--good-ink); background: var(--good-soft) }
.ev-badge.fail { color: var(--bad-ink); background: var(--bad-soft) }
.ev-badge.block { color: var(--warn-ink); background: var(--warn-soft) }
.ev-badge.admin { color: var(--accent-ink); background: var(--accent-soft) }
.ev-badge.neutral { color: var(--text-2); background: var(--surface-3) }
.ev td { font-size: 12.5px }
.err-page { max-width: 560px; margin: 40px auto; text-align: center; padding: 40px 32px }
.err-code { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--accent-ink); background: var(--accent-soft); padding: 4px 12px; border-radius: 999px }
.err-page h1 { font-size: 22px; margin: 16px 0 8px; letter-spacing: -.02em }
.err-page .btn { margin-top: 22px }

/* auth pages */
.auth-body { min-height: 100vh }
.auth-wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: 100vh }
.auth-side {
    position: relative; overflow: hidden; padding: 44px 56px; display: flex; flex-direction: column; color: #fff;
    background: radial-gradient(900px 520px at -10% -12%, rgba(98, 125, 255, .9) 0%, transparent 62%),
                radial-gradient(700px 500px at 110% 110%, rgba(0, 163, 154, .55) 0%, transparent 60%),
                linear-gradient(155deg, #1b2b93 0%, #0c1547 52%, #071d2c 100%);
}
.auth-brand { display: flex; align-items: center; gap: 12px; position: relative; z-index: 1 }
.auth-side .brand-mark { background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22); box-shadow: none }
.auth-side .brand-title { color: #fff }
.auth-side .brand-sub { color: rgba(255, 255, 255, .6) }
.auth-pitch { margin: auto 0; max-width: 520px; position: relative; z-index: 1; padding: 40px 0 }
.auth-pitch h1 { font-size: 40px; line-height: 1.22; font-weight: 850; letter-spacing: -.035em }
.auth-pitch p { margin-top: 16px; color: rgba(255, 255, 255, .76); font-size: 15.5px; line-height: 1.75 }
.auth-pitch ul { list-style: none; margin-top: 34px; display: flex; flex-direction: column; gap: 16px }
.auth-pitch li { display: flex; gap: 14px; align-items: flex-start }
.auth-pitch li i { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16); flex: none; font-size: 15px }
.auth-pitch li span { color: rgba(255, 255, 255, .66); font-size: 13px; line-height: 1.55 }
.auth-pitch li b { display: block; color: #fff; font-weight: 750; font-size: 14.5px; margin-bottom: 1px }
.auth-side-foot { font-size: 12px; color: rgba(255, 255, 255, .55); position: relative; z-index: 1; display: flex; gap: 8px; align-items: center }
.auth-waves { position: absolute; right: -60px; bottom: -60px; width: 560px; height: 560px; fill: none; stroke: rgba(255, 255, 255, .09); stroke-width: 1.2 }
.auth-waves circle { animation: wave 6s ease-in-out infinite }
.auth-waves circle:nth-child(2) { animation-delay: .6s }
.auth-waves circle:nth-child(3) { animation-delay: 1.2s }
.auth-waves circle:nth-child(4) { animation-delay: 1.8s }
@keyframes wave { 0%, 100% { opacity: .35 } 50% { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .auth-waves circle { animation: none } }
.auth-main { position: relative; display: grid; place-items: center; padding: 48px 24px; background: var(--bg) }
.auth-theme { position: absolute; top: 20px; right: 20px; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line); color: var(--text-2); background: var(--surface) }
.auth-theme:hover { color: var(--text) }
.auth-card { width: 100%; max-width: 400px }
.mobile-only { display: none }
.auth-title { font-size: 28px; font-weight: 850; letter-spacing: -.03em; line-height: 1.25 }
.auth-sub { color: var(--text-2); margin-top: 6px; font-size: 14px; line-height: 1.6 }
.alert { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; font-size: 13.5px; line-height: 1.55; margin-top: 18px; border: 1px solid transparent }
.alert > i { margin-top: 3px }
.alert.err { color: var(--bad-ink); background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 28%, transparent) }
.alert.lock { color: var(--warn-ink); background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 42%, transparent) }
.alert.info { color: var(--accent-ink); background: var(--accent-soft); border-color: var(--accent-line) }
.alert .countdown { font-variant-numeric: tabular-nums; white-space: nowrap }
.auth-form { margin-top: 24px; display: flex; flex-direction: column; gap: 16px }
.auth-field { display: flex; flex-direction: column; gap: 7px }
.auth-field > span:first-child { font-size: 13px; font-weight: 700; color: var(--text-2) }
.auth-input { position: relative; display: flex; align-items: center }
.auth-input > i { position: absolute; left: 15px; color: var(--muted); font-size: 14px; pointer-events: none }
.auth-input input {
    width: 100%; height: 48px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface); color: var(--text);
    padding: 0 48px 0 42px; font-size: 15px; outline: none; transition: border-color .15s, box-shadow .15s;
}
.auth-input input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft) }
.pw-eye { position: absolute; right: 6px; width: 36px; height: 36px; border-radius: 9px; color: var(--muted) }
.pw-eye:hover { color: var(--text); background: var(--surface-3) }
.caps { font-size: 12px; color: var(--warn-ink); display: flex; gap: 6px; align-items: center }
.auth-submit { height: 48px; font-size: 15px; border-radius: 12px; margin-top: 4px; width: 100% }
.auth-submit i { transition: transform .15s }
.auth-submit:hover:not(:disabled) i.fa-arrow-right { transform: translateX(3px) }
.auth-note { display: flex; gap: 10px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); line-height: 1.6 }
.auth-note i { color: var(--good); margin-top: 3px }
.hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; opacity: 0 }
.auth-links { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; font-size: 13px; gap: 12px }
.auth-links form { margin-left: auto }
.auth-links a, .auth-links button { color: var(--text-2); display: inline-flex; gap: 7px; align-items: center; font-weight: 600 }
.auth-links a:hover, .auth-links button:hover { color: var(--accent-ink) }
.auth-done { text-align: center }
.done-mark { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 18px; background: var(--good-soft); color: var(--good); font-size: 26px }
.auth-done .auth-submit { margin-top: 26px }

@media (max-width: 1280px) { .defense { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 960px) {
    .auth-wrap { grid-template-columns: minmax(0, 1fr) }
    .auth-side { display: none }
    .mobile-only { display: flex; margin-bottom: 30px }
}
@media (max-width: 900px) {
    .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px }
    .um-name, .um-caret { display: none }
    .user-menu summary { padding: 0 4px }
    .sec-banner { flex-wrap: wrap }
}
@media (max-width: 640px) {
    .defense, .role-pick, .pw-rules { grid-template-columns: minmax(0, 1fr) }
    .modal { padding: 18px }
    .pw-gen { flex-wrap: wrap }
    .auth-title { font-size: 24px }
    .ut .hide-sm, .ev .hide-sm { display: none }
    .ut .show-sm { display: inline-flex !important; margin-top: 4px }
    .u-cell { min-width: 0 }
    .ut td { padding: 10px 6px }
    .row-actions .icon-btn { width: 30px; height: 30px }
}