/* GTR — subscriber interface. Premium dark AI-intelligence style: deep navy, electric blue, cyan highlights, restrained glow.
   ONE token system (below); templates never hard-code colours. Mobile-first: bottom tab bar + thumbnail banners; desktop adds a sidebar
   and a three-zone event card (visual | story | metrics). Brand motifs (radar / globe) are local SVG files, used only as accents. */
:root {
  color-scheme: dark;
  /* colour */
  --gtr-bg-deep: #060b19;
  --gtr-bg: #0a1020;
  --gtr-bg-2: #0d1528;
  --gtr-surface: #111a31;
  --gtr-surface-1: #111a31;
  --gtr-surface-raised: #17233f;
  --gtr-surface-2: #17233f;
  --gtr-surface-3: #1e2d52;
  --gtr-border: #23324f;
  --gtr-border-strong: #33466b;
  --gtr-text: #e4eaf6;
  --gtr-text-strong: #f4f7fd;
  --gtr-muted: #9fb0cc;
  --gtr-faint: #70829f;
  --gtr-blue: #4d8dff;
  --gtr-blue-strong: #3a78f0;
  --gtr-cyan: #3fd0ff;
  --gtr-violet: #9b95ff;
  --gtr-gold: #e0b45a;
  --gtr-success: #4fd6a0;
  --gtr-warning: #f0b45a;
  --gtr-danger: #ff8a7a;
  --gtr-glow: rgba(77, 141, 255, .32);
  --gtr-glow-cyan: rgba(63, 208, 255, .28);
  --gtr-on-blue: #06122b;
  --st-1: var(--gtr-cyan); --st-2: #8db6ff; --st-3: var(--gtr-violet); --st-4: var(--gtr-success);
  /* space / shape / depth */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px;
  --radius: 18px; --radius-md: 14px; --radius-sm: 10px;
  --shadow: 0 1px 0 rgba(255,255,255,.035) inset, 0 12px 34px rgba(2,6,16,.38);
  --shadow-lift: 0 1px 0 rgba(255,255,255,.05) inset, 0 18px 44px rgba(2,6,16,.5), 0 0 0 1px rgba(77,141,255,.16);
  --font: "Inter", "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --tabbar-h: 62px; --side-w: 264px;
  --globe: url("/static/subscriber/radar-globe.svg");
  font-family: var(--font);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--gtr-text); font-size: 16px; line-height: 1.55; font-family: var(--font); min-height: 100vh;
  background:
    radial-gradient(1000px 520px at 78% -160px, rgba(77,141,255,.2), transparent 62%),
    radial-gradient(700px 420px at -8% 4%, rgba(63,208,255,.08), transparent 60%),
    linear-gradient(180deg, var(--gtr-bg) 0%, var(--gtr-bg-deep) 100%);
  background-attachment: fixed; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: var(--gtr-cyan); text-decoration: none; } a:hover { text-decoration: underline; }
h1, h2, h3 { color: var(--gtr-text-strong); letter-spacing: -.012em; text-wrap: balance; margin: 0; }
h1 { font-size: 26px; line-height: 1.2; } h2 { font-size: 19px; line-height: 1.3; } h3 { font-size: 17px; line-height: 1.35; }
.muted { color: var(--gtr-muted); } .small { font-size: 14px; }
.eyebrow { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gtr-cyan); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.grow { flex: 1; }
.ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--gtr-cyan); outline-offset: 2px; }
[hidden] { display: none !important; }

/* ---------- brand ---------- */
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--gtr-text-strong); } .brand:hover { text-decoration: none; }
.brand-word { font-weight: 800; font-size: 26px; letter-spacing: .16em; background: linear-gradient(120deg, #8dbbff, var(--gtr-blue) 45%, var(--gtr-cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 14px var(--gtr-glow)); }
.brand.lg .brand-word { font-size: 44px; } .brand-logo { height: 34px; width: auto; } .brand.lg .brand-logo { height: 54px; }
.brand-sub { font-size: 11.5px; line-height: 1.3; color: var(--gtr-muted); letter-spacing: .02em; padding-left: 10px; border-left: 1px solid var(--gtr-border-strong); }

/* ---------- shell ---------- */
.shell { min-height: 100vh; }
.main-col { min-width: 0; }
.side, .tabbar { display: none; }
.mtop { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: rgba(8,13,28,.88); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--gtr-border); }
.authed .main-col { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 14px); }
.tabbar { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; height: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: rgba(9,15,31,.96); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid var(--gtr-border); }
.authed .tabbar { display: grid; grid-template-columns: repeat(4, 1fr); }
.tabbar a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--gtr-faint); font-size: 12px; font-weight: 600; } .tabbar a:hover { text-decoration: none; color: var(--gtr-text); }
.tabbar a.active { color: var(--gtr-cyan); } .tabbar a.active::before { content: ""; position: absolute; top: 0; width: 30px; height: 3px; border-radius: 0 0 4px 4px; background: var(--gtr-cyan); box-shadow: 0 0 14px var(--gtr-glow-cyan); }
.badge { position: absolute; top: 7px; left: calc(50% + 6px); min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--gtr-cyan); color: var(--gtr-on-blue); font-size: 11px; font-style: normal; font-weight: 800; text-align: center; line-height: 18px; }
.wrap { max-width: 980px; margin: 0 auto; padding: 16px 16px 8px; }
.plan-pill { display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--gtr-cyan); background: rgba(63,208,255,.1); border: 1px solid rgba(63,208,255,.28); white-space: nowrap; align-self: flex-start; } .plan-pill.off { color: var(--gtr-warning); background: rgba(240,180,90,.1); border-color: rgba(240,180,90,.3); }
.linkbtn { background: none; border: 0; color: var(--gtr-muted); font: inherit; font-size: 14px; cursor: pointer; padding: 8px 0; } .linkbtn:hover { color: var(--gtr-text); }
.demo-ribbon { background: linear-gradient(90deg, rgba(155,149,255,.16), rgba(63,208,255,.12)); color: var(--gtr-violet); text-align: center; font-size: 12.5px; font-weight: 700; padding: 6px 12px; border-bottom: 1px solid var(--gtr-border); }

@media (min-width: 1024px) {
  .authed { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); }
  .authed .main-col { padding-bottom: 40px; }
  .mtop, .tabbar, .authed .tabbar { display: none; }
  .side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 26px; padding: 28px 18px 18px; overflow: hidden; isolation: isolate;
    border-right: 1px solid var(--gtr-border); background: linear-gradient(180deg, rgba(17,26,49,.85), rgba(7,12,26,.7)); }
  .side::after { content: ""; position: absolute; z-index: -1; left: -90px; right: -90px; bottom: -150px; height: 400px; background: var(--globe) center / contain no-repeat; opacity: .6; pointer-events: none; }
  .side-top { padding: 0 8px; }
  .side-nav { display: flex; flex-direction: column; gap: 4px; }
  .side-nav a { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 13px; color: var(--gtr-muted); font-weight: 600; transition: background .15s, color .15s; } .side-nav a:hover { background: rgba(23,35,63,.8); color: var(--gtr-text); text-decoration: none; }
  .side-nav a.active { color: var(--gtr-text-strong); background: linear-gradient(90deg, rgba(77,141,255,.3), rgba(63,208,255,.07)); box-shadow: inset 2px 0 0 var(--gtr-cyan), 0 0 24px rgba(77,141,255,.12); } .side-nav a.active .ico { color: var(--gtr-cyan); }
  .side-nav .badge { position: static; margin-left: auto; }
  .side-foot { margin-top: auto; }
  .side-card { display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: var(--radius-md); background: rgba(17,26,49,.78); backdrop-filter: blur(10px); border: 1px solid var(--gtr-border); }
  .side-mail { font-size: 13px; color: var(--gtr-muted); word-break: break-all; }
  .wrap { padding: 30px 36px 8px; }
}

/* ---------- surfaces ---------- */
.panel, .card { background: linear-gradient(180deg, var(--gtr-surface), rgba(14,22,42,.9)); border: 1px solid var(--gtr-border); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--space-4); }
.card h2 { margin-bottom: 8px; } .stack > * + * { margin-top: 12px; }
.empty { text-align: center; padding: 40px 18px; color: var(--gtr-muted); } .empty h3 { color: var(--gtr-text-strong); margin-bottom: 6px; }
.notice { padding: 10px 14px; border-radius: var(--radius-sm); background: var(--gtr-surface-raised); margin: 0 0 12px; border: 1px solid var(--gtr-border); } .notice.error { color: var(--gtr-danger); border-color: rgba(255,138,122,.4); } .notice.ok { color: var(--gtr-success); border-color: rgba(79,214,160,.35); }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 0; } .kv dt { color: var(--gtr-muted); } .kv dd { margin: 0; word-break: break-word; }
.page-head { margin-bottom: 14px; } .page-head h1 { margin-bottom: 4px; } .page-head p { margin: 0; }
.head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }

/* ---------- controls ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 9px 18px; border-radius: 13px; border: 1px solid var(--gtr-border-strong); background: var(--gtr-surface-raised); color: var(--gtr-text); font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; transition: background .15s, border-color .15s, box-shadow .15s, transform .06s; }
.btn:hover { text-decoration: none; border-color: var(--gtr-blue); background: var(--gtr-surface-3); } .btn:active { transform: translateY(1px); }
.btn.primary { background: linear-gradient(180deg, #5f9cff, var(--gtr-blue-strong)); border-color: transparent; color: #fff; box-shadow: 0 8px 22px var(--gtr-glow); } .btn.primary:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--gtr-cyan); } .btn.ghost:hover { background: rgba(63,208,255,.08); }
.btn.small { min-height: 38px; padding: 6px 14px; font-size: 14px; } .btn.block { width: 100%; } .btn[disabled] { opacity: .5; cursor: default; }
.iconbtn { display: inline-flex; background: none; border: 0; color: var(--gtr-muted); padding: 6px; cursor: pointer; border-radius: 8px; } .iconbtn:hover { color: var(--gtr-text); background: var(--gtr-surface-raised); }
input[type=text], input[type=email], input[type=password], input[type=search], input[type=date], select { width: 100%; min-height: 46px; padding: 10px 14px; font: inherit; font-size: 16px; color: var(--gtr-text); background: rgba(6,11,25,.7); border: 1px solid var(--gtr-border-strong); border-radius: 13px; }
input::placeholder { color: var(--gtr-faint); } input[type=date] { color-scheme: dark; } select[multiple] { min-height: 110px; }
input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--gtr-blue); flex: none; margin-top: 3px; }
label { display: block; font-size: 14px; color: var(--gtr-muted); } label input:not([type=checkbox]) { margin-top: 5px; }
label.check, .checks label { display: flex; gap: 10px; align-items: flex-start; color: var(--gtr-text); font-size: 15px; padding: 5px 0; }
fieldset { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; } legend { padding: 0; margin-bottom: 8px; font-weight: 700; font-size: 12.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--gtr-muted); }
.row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; } .row > * { flex: 1 1 130px; }
.narrow-form { max-width: 420px; }

/* ---------- chips ---------- */
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--gtr-muted); background: var(--gtr-surface-raised); border: 1px solid var(--gtr-border); line-height: 1.5; }
.chip.topic { color: var(--gtr-text); background: transparent; } .chip.st { border-color: transparent; }
.chip.first_signal { color: var(--st-1); background: rgba(63,208,255,.12); } .chip.second_signal { color: var(--st-2); background: rgba(77,141,255,.17); }
.chip.candidate { color: var(--st-3); background: rgba(155,149,255,.16); } .chip.confirmed_trend { color: var(--st-4); background: rgba(79,214,160,.15); }
.chip.ok { color: var(--gtr-success); background: rgba(79,214,160,.12); border-color: transparent; } .chip.warn { color: var(--gtr-warning); background: rgba(240,180,90,.12); border-color: transparent; }
.chip.upd, .chip.new { color: var(--gtr-on-blue); background: var(--gtr-cyan); border-color: transparent; }
.chip.k-follow { color: var(--gtr-violet); background: rgba(155,149,255,.14); } .chip.k-stage { color: var(--st-2); background: rgba(77,141,255,.17); } .chip.k-confirm { color: var(--gtr-success); background: rgba(79,214,160,.12); }
.chip.k-important { color: var(--gtr-warning); background: rgba(240,180,90,.14); } .chip.k-digest { color: var(--gtr-cyan); background: rgba(63,208,255,.1); } .chip.k-system { color: var(--gtr-muted); }
.state-tag, .dev-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--gtr-muted); } .dev-tag { color: var(--gtr-cyan); }
.saved-state { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 13px; border: 1px dashed var(--gtr-border-strong); color: var(--gtr-success); font-size: 14px; font-weight: 600; } .saved-state .ico, .state-tag .ico, .dev-tag .ico { width: 16px; height: 16px; }

/* ---------- hero (compact) ---------- */
.hero { position: relative; overflow: hidden; isolation: isolate; padding: 16px 18px; margin-bottom: 12px; border-radius: var(--radius); border: 1px solid var(--gtr-border-strong); background: linear-gradient(135deg, rgba(23,35,63,.95), rgba(13,21,40,.95)); box-shadow: var(--shadow); }
.hero::before { content: ""; position: absolute; z-index: -1; top: -70%; right: -60px; width: 320px; height: 320px; background: var(--globe) center / contain no-repeat; opacity: .75; }
.hero h1 { font-size: 21px; max-width: 520px; } .hero-sub { margin: 4px 0 0; color: var(--gtr-muted); font-size: 14.5px; } .hero-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; } .hero .eyebrow { display: none; }
.hero-meta .chip { font-size: 12px; background: rgba(6,11,25,.5); }
@media (max-width: 767px) { .hero { padding: 13px 16px; } .hero h1 { font-size: 19px; } .hero-sub { font-size: 13.5px; } .hero-meta { display: none; } }
@media (min-width: 768px) { .hero { padding: 22px 28px; } .hero::before { right: 10px; top: -90px; width: 360px; height: 360px; } .hero h1 { font-size: 28px; } .hero .eyebrow { display: block; } .hero-sub { font-size: 16px; } }

/* ---------- toolbar, quick chips, filters ---------- */
.toolbar { position: relative; display: flex; gap: 8px; align-items: stretch; margin-bottom: 10px; }
.search { flex: 1; } .search input { margin: 0; height: 46px; }
.filters summary { list-style: none; } .filters summary::-webkit-details-marker { display: none; } .filters summary.btn { height: 46px; white-space: nowrap; }
.quick { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 10px; margin: 0 -16px; padding-inline: 16px; scrollbar-width: none; } .quick::-webkit-scrollbar { display: none; }
.qchip { flex: none; padding: 7px 15px; border-radius: 999px; border: 1px solid var(--gtr-border-strong); background: rgba(17,26,49,.7); color: var(--gtr-muted); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; } .qchip:hover { text-decoration: none; color: var(--gtr-text); border-color: var(--gtr-blue); }
.qchip.on { color: var(--gtr-on-blue); background: var(--gtr-cyan); border-color: transparent; box-shadow: 0 0 18px var(--gtr-glow-cyan); } .qchip.more { color: var(--gtr-cyan); }
@media (min-width: 768px) { .quick { margin: 0; padding-inline: 0; } }
.filters .sheet { position: fixed; z-index: 41; left: 0; right: 0; bottom: 0; display: none; flex-direction: column; max-height: 88vh; background: var(--gtr-surface); border: 1px solid var(--gtr-border-strong); border-radius: 24px 24px 0 0; box-shadow: 0 -20px 60px rgba(2,6,16,.65); }
.filters[open] .sheet { display: flex; }
.filters[open]::before { content: ""; position: fixed; inset: 0; z-index: 40; background: rgba(3,7,16,.68); }
.sheet-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--gtr-border); font-size: 17px; }
.sheet-body { overflow: auto; padding: 16px 18px 4px; -webkit-overflow-scrolling: touch; }
.sheet-foot { display: flex; justify-content: space-between; gap: 10px; padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--gtr-border); } .sheet-foot .btn.primary { flex: 1; }
.col2 { display: block; }
@media (min-width: 900px) {
  .filters[open]::before { display: none; }
  .filters .sheet { position: absolute; top: calc(100% + 8px); left: 0; right: 0; bottom: auto; max-height: 74vh; border-radius: var(--radius); box-shadow: 0 24px 60px rgba(2,6,16,.65); }
  .sheet-body { display: grid; grid-template-columns: 1.15fr 1fr; gap: 0 28px; } .sheet-body > fieldset.checks { grid-row: span 2; } .sheet-body > fieldset:last-child { grid-column: 2; }
}
.count { margin: 2px 2px 10px; color: var(--gtr-muted); font-size: 14px; } .count b { color: var(--gtr-text); }

/* ---------- event card: visual | story | metrics ---------- */
.feed > * + * { margin-top: 16px; }
.ev { position: relative; display: grid; gap: 12px; padding: 14px; overflow: hidden; transition: border-color .15s, box-shadow .2s, transform .15s; }
.ev:hover { border-color: var(--gtr-border-strong); box-shadow: var(--shadow-lift); }
.ev.hi { border-color: rgba(77,141,255,.4); background: linear-gradient(135deg, rgba(34,52,96,.55), rgba(14,22,42,.95) 55%); box-shadow: var(--shadow), 0 0 40px rgba(77,141,255,.1); }
.ev.hi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--gtr-cyan), var(--gtr-blue)); }
.ev.is-saved { border-color: rgba(79,214,160,.22); }
.ev-thumb { display: block; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--gtr-border); background: var(--gtr-bg-2); line-height: 0; height: 92px; }
.thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.ev-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; } .fresh { font-size: 13px; color: var(--gtr-faint); margin-left: auto; }
.ev-title { margin: 10px 0 0; font-size: 19px; line-height: 1.3; font-weight: 700; } .ev-title a { color: var(--gtr-text-strong); } .ev-title a:hover { color: var(--gtr-cyan); text-decoration: none; }
.ev-ctx { margin: 6px 0 0; color: var(--gtr-muted); font-size: 15px; } .clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ai { margin-top: 12px; padding: 12px 14px; border-radius: var(--radius-md); background: linear-gradient(135deg, rgba(77,141,255,.16), rgba(63,208,255,.05)); border: 1px solid rgba(77,141,255,.3); box-shadow: inset 0 0 30px rgba(63,208,255,.04); }
.ai-head { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gtr-cyan); } .ai-head .ico { width: 16px; height: 16px; filter: drop-shadow(0 0 6px var(--gtr-glow-cyan)); }
.ai p { margin: 7px 0 0; font-size: 15px; color: var(--gtr-text); } .ai b { color: var(--gtr-text-strong); }
.ai.compact .ai-main, .ai.compact .ai-line { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ai.compact .ai-line { font-size: 14px; color: var(--gtr-muted); }
.ev-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 12px; font-size: 13.5px; } .ev-foot .src { font-weight: 600; } .ev-foot .src a { color: var(--gtr-text); } .ev-foot .src a:hover { color: var(--gtr-cyan); }
.timeline { display: inline-block; font-variant-numeric: tabular-nums; font-size: 13px; color: var(--gtr-muted); background: rgba(6,11,25,.55); border: 1px solid var(--gtr-border); border-radius: 8px; padding: 2px 9px; margin: 0; }
.conf { font-size: 13px; color: var(--gtr-muted); } .conf b { color: var(--gtr-text-strong); } .notches { display: inline-flex; gap: 3px; margin-right: 7px; vertical-align: middle; } .notches i { width: 13px; height: 5px; border-radius: 3px; background: var(--gtr-border-strong); } .notches i.on { background: var(--gtr-success); }
/* metrics rail */
.ev-metrics { display: flex; flex-wrap: wrap; gap: 8px 18px; align-content: flex-start; padding-top: 10px; border-top: 1px solid var(--gtr-border); }
.m { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .m-k, .impact-k { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--gtr-faint); font-weight: 700; } .m-v { font-size: 14px; }
.mini { display: inline-flex; align-items: center; gap: 0; } .mini i { width: 11px; height: 11px; border-radius: 50%; background: var(--gtr-surface-3); border: 2px solid var(--gtr-border-strong); position: relative; } .mini i + i { margin-left: 14px; } .mini i + i::before { content: ""; position: absolute; right: 100%; top: 50%; width: 14px; height: 2px; margin-top: -1px; background: var(--gtr-border-strong); }
.mini i.past { background: var(--gtr-blue); border-color: var(--gtr-blue); opacity: .75; } .mini i.past + i::before, .mini i.now::before { background: var(--gtr-blue); } .mini i.now { background: var(--gtr-cyan); border-color: var(--gtr-cyan); box-shadow: 0 0 0 3px rgba(63,208,255,.2), 0 0 12px var(--gtr-glow-cyan); }
.rel-meter { display: inline-flex; align-items: center; gap: 8px; } .rel-meter b { font-size: 13.5px; color: var(--gtr-text-strong); } .bars { display: inline-flex; gap: 2px; align-items: flex-end; } .bars i { width: 4px; border-radius: 1px; background: var(--gtr-border-strong); height: 6px; } .bars i:nth-child(2) { height: 9px; } .bars i:nth-child(3) { height: 12px; } .bars i:nth-child(4) { height: 15px; } .bars i.on { background: var(--gtr-cyan); }
.impact { display: flex; flex-direction: column; gap: 4px; } .impact-t { font-size: 14px; color: var(--gtr-text); }
.lvl { display: inline-block; align-self: flex-start; padding: 1px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; } .lvl.hi { color: var(--gtr-warning); background: rgba(240,180,90,.14); } .lvl.mid { color: var(--gtr-cyan); background: rgba(63,208,255,.12); } .lvl.lo { color: var(--gtr-muted); background: var(--gtr-surface-raised); }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .actions form { margin: 0; }
@media (max-width: 899px) { .ev-thumb { height: 96px; } .ev-ctx { display: none; } .ev:not(.compact) .actions { padding-top: 2px; } .ev > .actions .btn:not(.ghost), .ev > .actions .saved-state { flex: 1 1 auto; } .ev-metrics { align-items: center; gap: 10px 18px; } .ev-metrics .m { flex-direction: row; align-items: center; } .ev-metrics .m-k, .ev-metrics .impact-k { display: none; } .ev-metrics .impact { flex-direction: row; } .ev-foot .conf { display: none; } .ev-thumb { height: 84px; } }
@media (max-width: 520px) { h1 { font-size: 23px; } .ev-title { font-size: 18px; } .ai { padding: 10px 12px; } }
@media (min-width: 900px) {
  .ev:not(.compact) { grid-template-columns: 176px minmax(0, 1fr) 210px; grid-template-areas: "thumb main metrics" "thumb actions actions"; gap: 14px 24px; padding: 20px 22px; }
  .ev:not(.compact) .ev-thumb { grid-area: thumb; height: auto; min-height: 150px; } .ev:not(.compact) .ev-main { grid-area: main; } .ev:not(.compact) .ev-metrics { grid-area: metrics; flex-direction: column; flex-wrap: nowrap; gap: 16px; padding: 0 0 0 20px; border-top: 0; border-left: 1px solid var(--gtr-border); } .ev:not(.compact) > .actions { grid-area: actions; align-self: end; }
  .ev-title { font-size: 20px; }
}
/* compact (saved) */
.ev.compact { grid-template-columns: 84px minmax(0, 1fr); grid-template-areas: "thumb main" "actions actions"; gap: 12px 14px; padding: 14px 16px; }
.ev.compact .ev-thumb { grid-area: thumb; height: 84px; } .ev.compact .ev-main { grid-area: main; } .ev.compact > .actions { grid-area: actions; } .ev.compact .ev-metrics { display: none; }
.ev.compact .ev-title { margin-top: 8px; font-size: 17px; } .meta { margin: 8px 0 0; font-size: 13.5px; color: var(--gtr-muted); }
@media (min-width: 900px) { .ev.compact { grid-template-columns: 120px minmax(0, 1fr) auto; grid-template-areas: "thumb main actions"; align-items: center; } .ev.compact .ev-thumb { height: 92px; } .ev.compact .ev-metrics { display: none; } .ev.compact > .actions { flex-direction: column; align-items: stretch; } }

/* ---------- event detail ---------- */
.backlink { margin: 0 0 12px; } .backlink a { display: inline-flex; align-items: center; gap: 4px; color: var(--gtr-muted); font-size: 14px; } .backlink a:hover { color: var(--gtr-text); text-decoration: none; }
.ev-hero { display: grid; gap: 14px; padding: 14px; overflow: hidden; background: radial-gradient(600px 240px at 100% -20%, rgba(63,208,255,.16), transparent 70%), linear-gradient(180deg, var(--gtr-surface-raised), var(--gtr-surface)); border-color: var(--gtr-border-strong); }
.ev-hero .vis { border-radius: var(--radius-md); overflow: hidden; height: 130px; border: 1px solid var(--gtr-border); line-height: 0; }
.ev-hero .ev-title { font-size: 24px; margin: 12px 0 6px; } .hero-source { margin: 0 0 10px; color: var(--gtr-muted); font-size: 15px; } .ev-hero .actions { margin-top: 14px; }
.hero-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; padding: 14px; border-radius: var(--radius-md); background: rgba(6,11,25,.5); border: 1px solid var(--gtr-border); } .hero-metrics .m-v b { font-size: 16px; color: var(--gtr-text-strong); }
.hero-track { padding-top: 6px; }
.track { display: grid; grid-template-columns: repeat(4, 1fr); list-style: none; margin: 0; padding: 0; }
.track li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: 12px; line-height: 1.25; color: var(--gtr-faint); }
.track li::before { content: ""; position: absolute; top: 6px; left: -50%; width: 100%; height: 2px; background: var(--gtr-border-strong); z-index: 0; } .track li:first-child::before { display: none; } .track li.past::before, .track li.now::before { background: var(--gtr-blue); }
.tdot { position: relative; z-index: 1; width: 14px; height: 14px; border-radius: 50%; background: var(--gtr-surface-3); border: 2px solid var(--gtr-border-strong); }
.track li.past .tdot { background: var(--gtr-blue); border-color: var(--gtr-blue); opacity: .7; } .track li.past { color: var(--gtr-muted); }
.track li.now .tdot { background: var(--gtr-cyan); border-color: var(--gtr-cyan); box-shadow: 0 0 0 4px rgba(63,208,255,.2), 0 0 16px var(--gtr-glow-cyan); } .track li.now { color: var(--gtr-text-strong); font-weight: 700; }
.subtabs { display: flex; gap: 4px; overflow-x: auto; margin: 18px 0 12px; border-bottom: 1px solid var(--gtr-border); scrollbar-width: none; } .subtabs::-webkit-scrollbar { display: none; }
.subtabs a { padding: 11px 15px; white-space: nowrap; color: var(--gtr-muted); font-weight: 700; font-size: 15px; border-bottom: 2px solid transparent; margin-bottom: -1px; } .subtabs a:hover { color: var(--gtr-text); text-decoration: none; } .subtabs a.on { color: var(--gtr-cyan); border-color: var(--gtr-cyan); }
.detail:not(.js) .subtabs { display: none; } .detail .pane, .acct .pane { margin-bottom: 14px; } .detail.js .pane, .acct.js .pane { margin-bottom: 0; } .acct:not(.js) ~ .subtabs, .acct-tabs { }
.pane h3 { margin: 16px 0 6px; font-size: 12.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--gtr-muted); } .pane h3:first-of-type { margin-top: 8px; } .pane p { margin: 0 0 8px; } .pane-h { margin-bottom: 10px; }
.points { margin: 0; padding-left: 20px; } .points li { margin: 4px 0; }
.detail .ai { margin-top: 0; padding: 18px; } .detail .ai p { font-size: 16px; }
.steps { list-style: none; margin: 8px 0 0; padding: 0; } .steps li { display: flex; gap: 14px; padding: 0 0 16px; position: relative; } .steps li:not(:last-child)::before { content: ""; position: absolute; left: 6px; top: 18px; bottom: 0; width: 2px; background: var(--gtr-border-strong); }
.dot { width: 14px; height: 14px; border-radius: 50%; background: var(--gtr-border-strong); flex: none; margin-top: 5px; } .dot.first_signal { background: var(--st-1); } .dot.second_signal { background: var(--st-2); } .dot.candidate { background: var(--st-3); } .dot.confirmed_trend { background: var(--st-4); }
.related { display: grid; gap: 10px; } .rel { display: grid; gap: 6px; color: var(--gtr-text); justify-items: start; } .rel:hover { text-decoration: none; border-color: var(--gtr-blue); } .rel b { font-size: 16px; color: var(--gtr-text-strong); }
@media (min-width: 900px) {
  .ev-hero { grid-template-columns: 250px minmax(0, 1fr) 250px; grid-template-areas: "vis body metrics" "track track track"; gap: 20px 28px; padding: 24px 28px; }
  .ev-hero .vis { grid-area: vis; height: auto; min-height: 190px; } .ev-hero .hero-body { grid-area: body; } .ev-hero .hero-metrics { grid-area: metrics; grid-template-columns: 1fr; align-content: start; } .ev-hero .hero-track { grid-area: track; }
  .ev-hero .ev-title { font-size: 29px; margin-top: 14px; } .related { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- saved / tabs ---------- */
.tabs { display: inline-flex; gap: 4px; padding: 4px; margin: 4px 0 16px; border-radius: 15px; background: rgba(6,11,25,.6); border: 1px solid var(--gtr-border); }
.tabs a { padding: 9px 18px; border-radius: 11px; color: var(--gtr-muted); font-weight: 700; font-size: 14.5px; } .tabs a:hover { text-decoration: none; color: var(--gtr-text); } .tabs a.on { background: var(--gtr-surface-3); color: var(--gtr-text-strong); box-shadow: 0 0 0 1px var(--gtr-border-strong); }

/* ---------- notifications ---------- */
.ntimeline { list-style: none; margin: 0; padding: 0; }
.note { position: relative; display: flex; gap: 14px; padding-bottom: 14px; --acc: var(--gtr-muted); }
.note.k-follow { --acc: var(--gtr-violet); } .note.k-stage { --acc: var(--st-2); } .note.k-confirm { --acc: var(--gtr-success); } .note.k-important { --acc: var(--gtr-warning); } .note.k-digest { --acc: var(--gtr-cyan); }
.note:not(:last-child)::before { content: ""; position: absolute; left: 19px; top: 40px; bottom: -4px; width: 2px; background: var(--gtr-border); }
.nicon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; color: var(--acc); background: color-mix(in srgb, var(--acc) 14%, var(--gtr-bg-2)); border: 1px solid color-mix(in srgb, var(--acc) 35%, transparent); position: relative; z-index: 1; }
.note.unread .nicon { box-shadow: 0 0 0 4px color-mix(in srgb, var(--acc) 16%, transparent), 0 0 18px color-mix(in srgb, var(--acc) 30%, transparent); }
.ncard { flex: 1; min-width: 0; display: flex; gap: 14px; justify-content: space-between; padding: 14px 16px; border-radius: var(--radius); background: var(--gtr-surface); border: 1px solid var(--gtr-border); }
.note.unread .ncard { border-color: color-mix(in srgb, var(--acc) 40%, var(--gtr-border)); background: linear-gradient(180deg, color-mix(in srgb, var(--acc) 8%, var(--gtr-surface)), var(--gtr-surface)); }
.note.important .ncard { border-color: rgba(240,180,90,.5); box-shadow: 0 0 34px rgba(240,180,90,.1); background: linear-gradient(135deg, rgba(240,180,90,.1), var(--gtr-surface) 60%); }
.ncontent { min-width: 0; } .ncard h3 { margin: 10px 0 4px; font-size: 16.5px; } .ncard p { margin: 0 0 10px; font-size: 15px; }
.nthumb { flex: none; width: 96px; height: 76px; border-radius: 12px; overflow: hidden; border: 1px solid var(--gtr-border); line-height: 0; align-self: center; } @media (max-width: 520px) { .nthumb { display: none; } }

/* ---------- account ---------- */
.plan-hero { position: relative; overflow: hidden; isolation: isolate; display: grid; gap: 18px; padding: 22px; border-color: var(--gtr-border-strong); background: linear-gradient(135deg, rgba(30,45,82,.95), rgba(13,21,40,.96)); --pc: var(--gtr-blue); }
.plan-hero::before { content: ""; position: absolute; z-index: -1; right: -70px; top: -90px; width: 360px; height: 360px; background: var(--globe) center / contain no-repeat; opacity: .7; }
.plan-hero.plan-h1 { --pc: var(--gtr-blue); } .plan-hero.plan-h3 { --pc: var(--gtr-violet); } .plan-hero.plan-h6 { --pc: var(--gtr-gold); } .plan-hero.plan-off { --pc: var(--gtr-warning); }
.plan-hero { box-shadow: var(--shadow), inset 3px 0 0 var(--pc); }
.plan-now { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } .plan-name { font-size: 34px; letter-spacing: -.02em; color: var(--gtr-text-strong); line-height: 1.1; }
.stat-tiles { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.tile { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: var(--radius-md); background: rgba(6,11,25,.5); border: 1px solid var(--gtr-border); } .tile .ico { color: var(--gtr-cyan); margin-bottom: 4px; } .tile b { color: var(--gtr-text-strong); }
.acct { display: grid; gap: 14px; } .acct .card { padding: 22px; }
.plans { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.plan { --pc: var(--gtr-blue); display: flex; flex-direction: column; gap: 8px; align-items: flex-start; padding: 18px; border: 1px solid var(--gtr-border); border-radius: var(--radius); background: linear-gradient(180deg, color-mix(in srgb, var(--pc) 8%, var(--gtr-surface)), var(--gtr-surface)); border-top: 3px solid var(--pc); }
.plan.plan-h3 { --pc: var(--gtr-violet); } .plan.plan-h6 { --pc: var(--gtr-gold); } .plan.cur { border-color: var(--pc); box-shadow: 0 0 30px color-mix(in srgb, var(--pc) 22%, transparent); }
.plan-t { font-size: 20px; color: var(--gtr-text-strong); } .ticks { list-style: none; margin: 4px 0 8px; padding: 0; font-size: 14.5px; } .ticks li { padding: 3px 0 3px 22px; position: relative; color: var(--gtr-text); } .ticks li::before { content: ""; position: absolute; left: 2px; top: 11px; width: 10px; height: 6px; border-left: 2px solid var(--gtr-cyan); border-bottom: 2px solid var(--gtr-cyan); transform: rotate(-45deg) translateY(-3px); }
.expired { max-width: 620px; margin: 6vh auto 0; padding: 26px; } .expired h1 { margin-bottom: 10px; }
.pager { display: flex; justify-content: space-between; margin-top: 16px; }
@media (min-width: 900px) { .plan-hero { grid-template-columns: 1.1fr 1.4fr; align-items: center; padding: 28px 30px; } .plan-name { font-size: 40px; } }

/* ---------- auth ---------- */
.auth { display: grid; gap: 20px; max-width: 1080px; margin: 0 auto; padding: 24px 16px 40px; align-items: center; }
.auth-hero { position: relative; isolation: isolate; } .auth-hero .globe { position: absolute; z-index: -1; right: -90px; top: -40px; width: 340px; height: 340px; background: var(--globe) center / contain no-repeat; opacity: .55; }
.auth-hero h1 { margin: 18px 0 8px; font-size: 27px; line-height: 1.15; } .values { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
.values li { display: flex; gap: 14px; align-items: flex-start; padding: 13px 15px; border-radius: var(--radius-md); background: rgba(17,26,49,.72); border: 1px solid var(--gtr-border); backdrop-filter: blur(8px); } .values .ico { color: var(--gtr-cyan); margin-top: 2px; } .values b { display: block; color: var(--gtr-text-strong); } .values span { color: var(--gtr-muted); font-size: 14.5px; }
.auth-card { padding: 26px; box-shadow: var(--shadow), 0 0 70px rgba(77,141,255,.14); border-color: var(--gtr-border-strong); } .auth-card h2 { margin-bottom: 14px; font-size: 22px; }
.auth.single { max-width: 460px; margin-top: 8vh; }
@media (max-width: 599px) { .values { display: none; } .auth { overflow: hidden; } .auth-hero .globe { width: 240px; height: 240px; right: -70px; top: -30px; } }
@media (min-width: 900px) { .auth:not(.single) { grid-template-columns: 1.25fr minmax(350px, .85fr); gap: 60px; padding-top: 8vh; } .auth-hero h1 { font-size: 42px; } .auth-hero .globe { width: 520px; height: 520px; right: -120px; top: -120px; } }

/* ---------- final polish ---------- */
.side .brand-logo { height: 46px; } .mtop .brand-logo { height: 38px; } .auth-hero .brand-logo { height: 60px; } .plan-hero .brand-logo { height: 40px; }
.plan-hero-logo { margin-bottom: 14px; } .plan-hero .brand-word { font-size: 28px; }
.role { font-weight: 700; color: var(--gtr-text); }
.auth, .anon .main-col { overflow-x: clip; } body { overflow-x: clip; }
.ev-metrics.secondary { opacity: .92; } .ev-metrics.secondary .m-v { font-size: 13.5px; color: var(--gtr-muted); } .ev-metrics.secondary b { color: var(--gtr-text); } .ev-metrics.secondary .m-k { color: var(--gtr-faint); }
.ai.compact .ai-main { font-size: 15.5px; -webkit-line-clamp: 3; }
.hero-metrics .role { font-size: 15px; }
/* ---------- about / help ---------- */
textarea { width: 100%; padding: 10px 14px; font: inherit; font-size: 16px; color: var(--gtr-text); background: rgba(6,11,25,.7); border: 1px solid var(--gtr-border-strong); border-radius: 13px; resize: vertical; min-height: 120px; margin-top: 5px; }
.field-error { display: block; margin-top: 4px; font-size: 13.5px; color: var(--gtr-danger); }
.narrow-card { max-width: 620px; padding: 22px; }
.prose { display: grid; gap: 14px; max-width: 760px; } .prose .card { padding: 22px; } .prose p { margin: 0 0 10px; } .prose p:last-child { margin-bottom: 0; } .prose h2 { margin-bottom: 10px; }
.about-steps { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 10px; } .about-steps li { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; } .about-steps p { margin: 0; color: var(--gtr-text); }
.cta-card { background: linear-gradient(135deg, rgba(77,141,255,.16), rgba(63,208,255,.05)); border-color: rgba(77,141,255,.35); }
.iconlink { display: inline-flex; padding: 8px; color: var(--gtr-muted); border-radius: 10px; } .iconlink:hover { color: var(--gtr-cyan); background: var(--gtr-surface-raised); text-decoration: none; }
@media (min-width: 1024px) { .iconlink { display: none; } .side-utility { display: flex; flex-direction: column; gap: 2px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--gtr-border); } .side-utility a { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 11px; color: var(--gtr-muted); font-size: 14px; font-weight: 600; } .side-utility a:hover { background: rgba(23,35,63,.8); color: var(--gtr-text); text-decoration: none; } .side-utility a.active { color: var(--gtr-text-strong); background: rgba(77,141,255,.16); } .side-utility + .side-foot { margin-top: 14px; } }
@media (max-width: 1023px) { .side-utility { display: none; } }
/* ---------- filters: compact premium panel (desktop) ---------- */
@media (min-width: 900px) {
  .filters .sheet { max-height: 62vh; border-color: var(--gtr-border-strong); background: linear-gradient(180deg, rgba(23,35,63,.98), rgba(14,22,42,.98)); backdrop-filter: blur(14px); }
  .sheet-head { padding: 10px 18px; font-size: 15px; }
  .sheet-body { padding: 12px 18px 0; gap: 0 24px; grid-template-columns: 1.3fr 1fr; }
  .sheet-body fieldset { margin-bottom: 10px; }
  .sheet-body legend { margin-bottom: 4px; font-size: 11.5px; }
  .sheet-body > fieldset.checks:first-child { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; align-content: start; }
  .sheet-body > fieldset.checks:first-child legend { grid-column: 1 / -1; }
  .sheet-body .checks label { padding: 2px 0; font-size: 14px; gap: 8px; line-height: 1.35; }
  .sheet-body input[type=checkbox] { width: 16px; height: 16px; margin-top: 2px; }
  .sheet-body input[type=date], .sheet-body select { min-height: 38px; padding: 6px 12px; font-size: 14.5px; border-radius: 11px; }
  .sheet-body select[multiple] { min-height: 84px; }
  .sheet-body .row { margin-top: 6px; gap: 6px; }
  .sheet-foot { padding: 10px 18px; }
  .sheet-foot .btn { min-height: 38px; }
  .sheet-foot .btn.primary { flex: 0 0 auto; min-width: 170px; }
  .sheet-body .col2 > fieldset.checks { display: grid; grid-template-columns: 1fr 1fr; column-gap: 10px; }
  .sheet-body .col2 > fieldset.checks legend { grid-column: 1 / -1; }
  .sheet-body select[multiple] { min-height: 0; height: 74px; }
  .filters .sheet { max-height: 70vh; }
}
@media (min-width: 1100px) {
  .sheet-body { grid-template-columns: 1.9fr 1fr 1fr; }
  .sheet-body > fieldset.checks:first-child { grid-row: span 2; }
  .sheet-body > fieldset:last-child { grid-column: 2 / span 2; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }