@font-face { font-family:ViniaSans; src:url('/assets/fonts/ibm-plex-sans-400.ttf') format('truetype'); font-display:swap; font-weight:400; }
@font-face { font-family:ViniaSans; src:url('/assets/fonts/ibm-plex-sans-600.ttf') format('truetype'); font-display:swap; font-weight:600; }
@font-face { font-family:ViniaSerif; src:url('/assets/fonts/source-serif-4-600.ttf') format('truetype'); font-display:swap; font-weight:600; }

:root {
  --bg: #031017;
  --bg-elev: #06151b;
  --panel: rgba(7, 25, 33, 0.91);
  --panel-solid: #071921;
  --panel-soft: #0a2028;
  --line: rgba(125, 220, 208, 0.18);
  --line-strong: rgba(125, 220, 208, 0.34);
  --text: #eff7f3;
  --muted: #9eb4b2;
  --faint: #607b7a;
  --accent: #e8c773;
  --accent-soft: rgba(232, 199, 115, 0.13);
  --cyan: #6ed8cb;
  --cyan-soft: rgba(110, 216, 203, 0.12);
  --danger: #ff7b5f;
  --danger-soft: rgba(255, 123, 95, 0.12);
  --ok: #83c8b2;
  --warning: #d6a15d;
  --sidebar: 248px;
  --radius: 10px;
  --shadow: 0 20px 70px rgba(0, 0, 0, 0.34);
  --mono: "Cascadia Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --sans: ViniaSans, "Segoe UI Variable", "Segoe UI", Inter, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body { width:100%; height:100%; min-height:100%; }

body {
  margin: 0;
  background:
    radial-gradient(circle at 68% -10%, rgba(110, 216, 203, 0.11), transparent 31rem),
    radial-gradient(circle at 18% 85%, rgba(232, 199, 115, 0.055), transparent 34rem),
    var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  overflow: hidden;
}

button, input { font: inherit; }
button { color: inherit; }

.ambient-grid {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.14;
  background-image:
    linear-gradient(rgba(110,216,203,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(110,216,203,.04) 1px, transparent 1px);
  background-size: 50px 50px;
  mask-image: linear-gradient(to bottom, #000 0, transparent 88%);
}

.app-shell { height:100dvh; min-height:0; display:grid; grid-template-columns:var(--sidebar) minmax(0,1fr); overflow:hidden; }

.sidebar {
  position: fixed;
  z-index: 10;
  inset: 0 auto 0 0;
  width: var(--sidebar);
  display: flex;
  flex-direction: column;
  padding: 28px 22px 22px;
  background: rgba(6, 9, 12, 0.94);
  border-right: 1px solid var(--line);
  backdrop-filter: blur(18px);
}

.brand-block { display:flex; align-items:center; gap:13px; margin-bottom:44px; color:inherit; text-decoration:none; }
.brand-block:hover .brand-name { color:var(--cyan); }
.brand-block:focus-visible { outline:1px solid var(--cyan); outline-offset:6px; }
.brand-mark {
  width: 42px; height: 42px; display: grid; place-items: center;
  border: 1px solid rgba(233,184,95,.46);
  background: linear-gradient(145deg, rgba(233,184,95,.12), transparent 58%);
  position: relative;
}
.brand-mark::before, .brand-mark::after { content: ""; position: absolute; background: var(--accent); opacity: .4; }
.brand-mark::before { width: 1px; height: 54px; }
.brand-mark::after { width: 54px; height: 1px; }
.brand-mark span { font: 600 18px/1 var(--mono); color: var(--accent); position: relative; z-index: 1; }
.brand-name { font-size: 16px; font-weight: 750; letter-spacing: .22em; }
.brand-sub { margin-top: 4px; color: var(--muted); font: 9px/1 var(--mono); letter-spacing: .18em; }

.nav-list { display: grid; gap: 6px; }
.nav-item {
  width: 100%; border: 0; border-left: 2px solid transparent; background: transparent;
  display: grid; grid-template-columns: 28px 1fr; align-items: center; text-align: left;
  gap: 8px; padding: 12px 10px; color: var(--muted); cursor: pointer; transition: .18s ease;
}
.nav-item:hover { color: var(--text); background: rgba(255,255,255,.025); }
.nav-item.active { color: var(--text); border-left-color: var(--accent); background: linear-gradient(90deg, var(--accent-soft), transparent); }
.nav-index { font: 10px/1 var(--mono); color: var(--faint); }
.nav-item.active .nav-index { color: var(--accent); }
.sidebar-spacer { flex: 1; }
.notify-action { width:100%; display:grid; grid-template-columns:34px minmax(0,1fr); gap:10px; align-items:center; margin:0 0 10px; padding:10px 8px; border:1px solid var(--line-strong); background:linear-gradient(90deg,rgba(110,216,203,.08),transparent); color:var(--text); text-align:left; cursor:pointer; }
.notify-action:hover,.notify-action:focus-visible { border-color:var(--cyan); outline:none; }
.notify-action.subscribed { border-color:rgba(232,199,115,.5); background:linear-gradient(90deg,var(--accent-soft),transparent); }
.notify-glyph { display:grid; width:30px; height:30px; place-items:center; border:1px solid var(--cyan); color:var(--cyan); font:16px/1 var(--mono); }
.notify-action.subscribed .notify-glyph { border-color:var(--accent); color:var(--accent); transform:rotate(45deg); }
.notify-action strong,.notify-action small { display:block; }
.notify-action strong { font:600 9px/1.25 var(--sans); letter-spacing:.045em; text-transform:uppercase; }
.notify-action small { margin-top:4px; color:var(--muted); font:8px/1.25 var(--mono); }
.language-switch { display:grid; grid-template-columns:repeat(3,1fr); margin-bottom:10px; border:1px solid var(--line); }
.language-switch button { min-height:30px; border:0; border-right:1px solid var(--line); background:transparent; color:var(--faint); font:9px/1 var(--mono); letter-spacing:.12em; cursor:pointer; }
.language-switch button:last-child { border-right:0; }
.language-switch button:hover { color:var(--text); background:rgba(255,255,255,.025); }
.language-switch button.active { color:#161108; background:var(--accent); }

.protocol-chip {
  display: flex; gap: 10px; align-items: center; padding: 12px 10px; margin-bottom: 13px;
  border: 1px solid var(--line); background: rgba(255,255,255,.018);
  color: var(--text); font: 11px/1.4 var(--mono);
}
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 14px rgba(135,195,143,.7); }
.protocol-chip-label { color: var(--faint); font-size: 8px; letter-spacing: .12em; margin-bottom: 2px; }

.primary-action, .ghost-action, .icon-button {
  border: 0; cursor: pointer; transition: transform .16s ease, background .16s ease, border-color .16s ease, opacity .16s ease;
}
.primary-action {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 15px; background: var(--accent); color: #17120a; font-weight: 720;
}
.primary-action:hover { transform: translateY(-1px); background: #f2c979; }
.primary-action:disabled { opacity: .38; cursor: not-allowed; transform: none; }
.primary-action.compact { min-height: 38px; padding-inline: 16px; }
.ghost-action {
  min-height: 38px; padding: 0 16px; border: 1px solid var(--line-strong); background: rgba(255,255,255,.025); color: var(--text);
}
.ghost-action:hover { border-color: rgba(233,184,95,.45); background: var(--accent-soft); }
.runtime-note { margin-top: 12px; text-align: center; color: var(--faint); font: 8px/1 var(--mono); letter-spacing: .15em; }

.main-stage { grid-column:2; min-width:0; min-height:0; height:100dvh; padding:0 34px 18px; display:flex; flex-direction:column; overflow:hidden; }
.topbar {
  min-height: 102px; display: flex; align-items: center; justify-content: space-between; gap: 30px;
  border-bottom: 1px solid var(--line); margin-bottom: 26px;
}
.eyebrow, .panel-kicker { color: var(--accent); font: 9px/1.2 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
h1, h2, p { margin-top: 0; }
h1 { margin: 7px 0 0; font-size: 27px; font-weight: 620; letter-spacing: -.035em; }
h2 { margin: 6px 0 0; font-size: 17px; font-weight: 620; letter-spacing: -.02em; }
.topbar-meta { display: flex; align-items: stretch; gap: 10px; }
.meta-cell {
  min-width: 155px; padding: 11px 13px; border-left: 1px solid var(--line);
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
}
.meta-cell span { color: var(--faint); font-size: 10px; }
.meta-cell strong { font: 11px/1.3 var(--mono); font-weight: 500; color: var(--text); }
.mode-badge { align-self: center; padding: 7px 9px; border: 1px solid rgba(112,207,203,.35); color: var(--cyan); font: 9px/1 var(--mono); letter-spacing: .12em; }

.view-panel { display:none; min-height:0; }
.view-panel.active { display:block; flex:1 1 auto; min-height:0; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:rgba(112,207,203,.28) transparent; animation:appear .24s ease; }
.view-panel.active::-webkit-scrollbar { width:5px; height:5px; }
.view-panel.active::-webkit-scrollbar-thumb { background:rgba(112,207,203,.28); }
#view-overview.active { display:flex; flex-direction:column; overflow:hidden; }
#view-overview .kpi-grid { flex:0 0 auto; }
#view-overview .overview-grid { flex:1 1 auto; min-height:0; margin-bottom:0; }
#view-overview .rose-panel, #view-overview .verdict-panel { height:100%; min-height:0; }
#view-overview .rose-panel { display:flex; flex-direction:column; overflow:hidden; }
#view-overview .rose-chart { flex:1 1 auto; min-height:0; }
#view-overview .rose-chart svg { height:100%; min-height:300px; }
#view-overview .rose-footer { flex:0 0 66px; }
#view-overview .verdict-panel { overflow:auto; scrollbar-width:thin; scrollbar-color:rgba(112,207,203,.22) transparent; }
@keyframes appear { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.hidden { display: none !important; }
.admin-only { display:none !important; }
.admin-mode .admin-only { display:block !important; }


.warning-strip { margin:0 0 12px; padding:9px 14px; border:1px solid rgba(244,190,87,.30); background:rgba(244,190,87,.075); color:var(--accent); font:9px/1.45 var(--mono); letter-spacing:.07em; text-transform:uppercase; }
.empty-state {
  min-height: 460px; display: grid; grid-template-columns: 230px minmax(0, 570px); gap: 50px; align-items: center; justify-content: center;
  border: 1px dashed var(--line-strong); background: linear-gradient(135deg, rgba(233,184,95,.025), rgba(112,207,203,.02));
}
.empty-state h2 { font-size: 29px; margin: 8px 0 12px; }
.empty-state p { color: var(--muted); font-size: 15px; line-height: 1.7; }
.empty-compass { width: 200px; aspect-ratio: 1; position: relative; display: grid; place-items: center; }
.empty-ring { position: absolute; inset: 12%; border: 1px solid var(--line-strong); border-radius: 50%; box-shadow: inset 0 0 55px rgba(112,207,203,.04); }
.empty-ring::before, .empty-ring::after { content:""; position:absolute; inset:16%; border:1px solid var(--line); transform:rotate(45deg); }
.empty-ring::after { inset:34%; border-radius:50%; }
.empty-cross::before, .empty-cross::after { content:""; position:absolute; inset:50% 0 auto; height:1px; background:var(--line-strong); }
.empty-cross::after { transform:rotate(90deg); }
.empty-compass > span { font: 30px/1 var(--mono); color: var(--accent); }
.empty-actions { display: flex; gap: 10px; margin-top: 22px; }

.kpi-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; }
.kpi-card {
  min-height: 135px; padding: 16px 16px 13px; background: var(--panel); border: 1px solid var(--line); position: relative; overflow: hidden;
}
.kpi-card::after { content:""; position:absolute; inset:auto 0 0; height:2px; background:linear-gradient(90deg, transparent, var(--line-strong), transparent); }
.kpi-card.kpi-primary { border-color: rgba(233,184,95,.27); background: linear-gradient(145deg, rgba(233,184,95,.09), var(--panel) 58%); }
.kpi-label { color: var(--muted); font: 9px/1.2 var(--mono); letter-spacing: .12em; }
.kpi-value { margin-top: 17px; display: flex; align-items: baseline; gap: 7px; }
.kpi-value > span { font: 500 35px/1 var(--mono); letter-spacing: -.06em; }
.kpi-value small { color: var(--faint); font: 11px/1 var(--mono); }
.kpi-value.text > span { font-size: 16px; letter-spacing: -.02em; line-height: 1.3; }
.kpi-value.signed > span { color: var(--cyan); }
.kpi-foot { position: absolute; inset: auto 15px 12px; display: flex; justify-content: space-between; gap: 8px; color: var(--faint); font-size: 9px; }
.kpi-meter { height: 2px; margin-top: 14px; background: rgba(255,255,255,.06); }
.kpi-meter i { display: block; height: 100%; width: 0; background: var(--cyan); transition: width .5s ease; }

.panel { background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); }
.panel-head { min-height: 67px; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 15px 18px; border-bottom: 1px solid var(--line); }
.compact-head { min-height: 62px; }
.overview-grid { display:grid; grid-template-columns:minmax(0,1.24fr) minmax(300px,.76fr); gap:10px; margin-bottom:10px; }
.rose-panel { min-height: 546px; }
.verdict-panel { min-height: 546px; }
.legend { display: flex; gap: 17px; color: var(--muted); font-size: 10px; }
.legend span { display: flex; align-items: center; gap: 6px; }
.legend i { width: 16px; height: 2px; display: inline-block; }
.legend-signal { background: var(--accent); }
.legend-coverage { border-top: 1px dashed var(--cyan); }

.rose-chart { position:relative; min-height:402px; padding:4px 10px 0; display:grid; place-items:center; overflow:hidden; background:radial-gradient(circle at 50% 49%,rgba(110,216,203,.055),transparent 38%); }
.rose-chart::before,.rose-chart::after { content:""; position:absolute; pointer-events:none; }
.rose-chart::before { inset:18px; border-left:1px solid rgba(110,216,203,.16); border-right:1px solid rgba(232,199,115,.12); }
.rose-chart::after { width:56px; height:1px; left:18px; top:18px; background:var(--cyan); box-shadow:calc(100% + 556px) 364px 0 var(--accent); opacity:.55; }
.rose-chart svg { position:relative; z-index:1; width:100%; height:397px; overflow:visible; }
.rose-grid { fill:none; stroke:rgba(125,220,208,.12); stroke-width:1; vector-effect:non-scaling-stroke; }
.rose-grid.major { stroke:rgba(125,220,208,.28); }
.rose-spoke { stroke:rgba(125,220,208,.13); stroke-width:1; vector-effect:non-scaling-stroke; }
.rose-terminal { fill:var(--panel-solid); stroke:var(--cyan); stroke-width:1; vector-effect:non-scaling-stroke; }
.rose-coverage { fill:rgba(110,216,203,.035); stroke:var(--cyan); stroke-width:1.35; stroke-dasharray:3 5; filter:drop-shadow(0 0 5px rgba(110,216,203,.18)); vector-effect:non-scaling-stroke; }
.rose-signal { fill:rgba(232,199,115,.15); stroke:var(--accent); stroke-width:1.9; filter:drop-shadow(0 0 8px rgba(232,199,115,.22)); vector-effect:non-scaling-stroke; }
.rose-node { fill:var(--accent); stroke:#071014; stroke-width:1.2; vector-effect:non-scaling-stroke; }
.rose-index { fill:var(--cyan); font:600 8px var(--mono); letter-spacing:.12em; }
.rose-label { fill:var(--text); font:600 12px var(--sans); letter-spacing:.025em; }
.rose-value { fill:var(--muted); font:11px var(--mono); }
.rose-value-signal { fill:var(--accent); font-weight:600; }
.rose-value-coverage { fill:var(--cyan); font-weight:600; }
.rose-center-orbit { fill:none; stroke:rgba(110,216,203,.25); stroke-width:1; stroke-dasharray:2 5; }
.rose-center-ring { fill:#051218; stroke:rgba(232,199,115,.55); stroke-width:1.2; }
.rose-center-label { fill:var(--cyan); font:8px var(--mono); letter-spacing:.18em; }
.rose-center-value {
  fill: var(--text);
  font: 19px/1 var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.035em;
}
.rose-mobile-register { display:none; }
.rose-footer { height: 66px; display: grid; grid-template-columns: repeat(3,1fr); border-top:1px solid var(--line); }
.rose-footer > div { display:flex; align-items:center; justify-content:center; gap:9px; border-right:1px solid var(--line); }
.rose-footer > div:last-child { border-right:0; }
.rose-footer span { color:var(--faint); font-size:10px; }
.rose-footer strong { font: 12px/1 var(--mono); }

.state-code { min-width: 46px; padding: 7px 9px; text-align:center; border:1px solid var(--line-strong); color:var(--accent); font: 12px/1 var(--mono); }
.state-band { display:flex; align-items:center; gap:14px; margin:18px; padding:16px 16px; border-left:2px solid var(--accent); background:linear-gradient(90deg,var(--accent-soft),transparent); }
.state-pulse { width:11px; height:11px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 6px rgba(233,184,95,.08),0 0 18px rgba(233,184,95,.34); }
.state-title { font-size:18px; font-weight:650; }
.morphology-title { color:var(--muted); margin-top:3px; font-size:11px; }
.verdict-summary { margin:0 18px 20px; color:var(--text); font-size:15px; line-height:1.6; }
.verdict-block { margin:0 18px 13px; padding:14px 15px; border:1px solid var(--line); background:rgba(255,255,255,.017); }
.verdict-block span { color:var(--faint); font:9px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; }
.verdict-block p { margin:8px 0 0; color:var(--muted); line-height:1.55; }
.action-block { border-color:rgba(112,207,203,.2); background:var(--cyan-soft); }
.verdict-meta { display:grid; grid-template-columns:1fr 1fr; margin:18px; border-top:1px solid var(--line); }
.verdict-meta > div { padding:12px 0 0; }
.verdict-meta span { display:block; color:var(--faint); font-size:9px; }
.verdict-meta strong { display:block; margin-top:4px; font:10px/1.3 var(--mono); font-weight:500; }

@media (min-width:861px) and (max-height:850px) {
  .topbar { min-height:86px; margin-bottom:18px; }
  .kpi-card { min-height:112px; padding-top:13px; }
  .kpi-value { margin-top:13px; }
  .kpi-value > span { font-size:32px; }
  .kpi-value.text { margin-top:8px; }
  .kpi-value.text > span { font-size:14px; line-height:1.15; }
  .kpi-foot { bottom:8px; font-size:8px; }
  #view-overview .verdict-panel { overflow:hidden; }
  .state-band { margin:10px 18px; padding:9px 14px; }
  .verdict-summary { margin:0 18px 9px; font-size:13px; line-height:1.38; }
  .verdict-block { margin:0 18px 7px; padding:8px 13px; }
  .verdict-block p { margin-top:5px; font-size:11px; line-height:1.34; }
  .verdict-meta { margin:7px 18px; }
  .verdict-meta > div { padding-top:7px; }
}

.horizon-panel { margin-bottom:10px; }
.snapshot-selector { display:grid; grid-template-columns:auto minmax(160px,300px) 92px; align-items:center; gap:12px; color:var(--muted); font-size:10px; }
.snapshot-selector input { accent-color:var(--accent); }
.snapshot-selector strong { font:10px/1 var(--mono); color:var(--text); }
.horizon-grid { display:grid; grid-template-columns:repeat(3,1fr); }
.horizon-card { min-height:112px; padding:18px; border-right:1px solid var(--line); }
.horizon-card:last-child { border-right:0; }
.horizon-card > span { color:var(--accent); font:9px/1 var(--mono); letter-spacing:.12em; }
.horizon-card strong { display:block; margin-top:7px; font-size:15px; }
.horizon-card p { margin:10px 0 0; color:var(--muted); line-height:1.5; }

.lower-grid { display:grid; grid-template-columns:minmax(520px,1.2fr) minmax(320px,.8fr); gap:10px; }
.axes-panel, .mini-timeline-panel { min-height:390px; }
.axis-rows { padding:4px 18px 16px; }
.axis-row { display:grid; grid-template-columns:minmax(175px,.85fr) minmax(150px,1.65fr) 58px 132px 76px; gap:12px; align-items:center; min-height:44px; border-bottom:1px solid rgba(255,255,255,.052); }
.axis-name { display:flex; align-items:center; gap:8px; min-width:0; }
.axis-order { color:var(--faint); font:8px/1 var(--mono); }
.axis-name strong { overflow:visible; white-space:normal; overflow-wrap:anywhere; font-size:11px; line-height:1.25; font-weight:570; }
.axis-bar { height:4px; background:rgba(255,255,255,.055); position:relative; }
.axis-bar i, .axis-bar b { position:absolute; inset:0 auto 0 0; display:block; }
.axis-bar i { width:0; background:var(--accent); z-index:2; }
.axis-bar b { width:0; border-right:1px solid var(--cyan); background:rgba(112,207,203,.11); }
.axis-score { font:11px/1 var(--mono); text-align:right; }
.axis-trend { color:var(--muted); font:9px/1.2 var(--mono); }
.axis-coverage { color:var(--faint); font:9px/1.2 var(--mono); text-align:right; }
.axis-row[data-level="CRITICAL"] .axis-bar i, .axis-row[data-level="HIGH"] .axis-bar i { background:var(--danger); }
.axis-row[data-trend="rising"] .axis-trend { color:var(--accent); }
.axis-row[data-trend="falling"] .axis-trend { color:var(--cyan); }

.timeline-chart { height:265px; padding:12px 16px 0; }
.timeline-chart svg, .full-timeline svg { width:100%; height:100%; overflow:visible; }
.chart-grid { stroke:rgba(255,255,255,.07); stroke-width:1; }
.chart-axis-label { fill:var(--faint); font:8px var(--mono); }
.chart-line-emri { fill:none; stroke:var(--accent); stroke-width:2; }
.chart-line-asi { fill:none; stroke:var(--cyan); stroke-width:1.6; }
.chart-area-emri { fill:rgba(233,184,95,.07); }
.chart-point-emri { fill:var(--accent); }
.chart-point-asi { fill:var(--cyan); }
.timeline-legend { display:flex; gap:12px; font:9px/1 var(--mono); }
.emri-line { color:var(--accent); }
.asi-line { color:var(--cyan); }
.timeline-foot { height:54px; display:flex; align-items:center; padding:0 18px; color:var(--muted); border-top:1px solid var(--line); font-size:11px; }

.full-panel { min-height:calc(100vh - 154px); }
.count-badge { padding:6px 9px; border:1px solid var(--line); color:var(--muted); font:9px/1 var(--mono); }
.full-timeline { height:430px; padding:22px 25px 5px; }
.history-table, .source-list, .protocol-content { padding:0 18px 24px; }
.history-row { display:grid; grid-template-columns:120px 90px 90px 72px 80px minmax(160px,1fr); gap:12px; min-height:48px; align-items:center; border-bottom:1px solid var(--line); cursor:pointer; }
.history-row:hover { background:rgba(255,255,255,.018); }
.history-row span, .history-row strong { font-size:11px; }
.history-row .mono { font:10px/1 var(--mono); }
.history-row .muted { color:var(--muted); }

.source-group { margin-top:20px; }
.source-group-head { display:flex; justify-content:space-between; align-items:center; padding:9px 0; border-bottom:1px solid var(--line-strong); }
.source-group-head h3 { margin:0; font-size:13px; font-weight:600; }
.source-card { display:grid; grid-template-columns:minmax(190px,.9fr) 100px 120px 120px minmax(180px,1fr); gap:14px; align-items:center; min-height:54px; border-bottom:1px solid var(--line); }
.source-card strong { font-size:11px; }
.source-card span, .source-card a { color:var(--muted); font-size:10px; }
.source-card a { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.observation-card { display:grid; grid-template-columns:minmax(230px,1.2fr) 90px 90px 90px 100px minmax(180px,1fr); gap:12px; align-items:center; min-height:49px; border-bottom:1px solid var(--line); }
.observation-card > * { font-size:10px; }
.observation-card .mono { font-family:var(--mono); }
.observation-card .missing { color:var(--faint); }

.protocol-section { margin-top:22px; }
.protocol-section h3 { margin:0 0 10px; font-size:14px; }
.protocol-meta-grid { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); }
.protocol-meta-grid > div { min-height:76px; padding:14px; border-right:1px solid var(--line); }
.protocol-meta-grid > div:last-child { border-right:0; }
.protocol-meta-grid span { display:block; color:var(--faint); font-size:9px; }
.protocol-meta-grid strong { display:block; margin-top:8px; font:11px/1.4 var(--mono); }
.protocol-axis-table { width:100%; border-collapse:collapse; }
.protocol-axis-table th, .protocol-axis-table td { padding:11px 10px; border-bottom:1px solid var(--line); text-align:left; font-size:10px; }
.protocol-axis-table th { color:var(--faint); font-weight:500; }
.protocol-rule { display:grid; grid-template-columns:110px 1fr; gap:16px; padding:12px 0; border-bottom:1px solid var(--line); }
.protocol-rule code { color:var(--accent); font:10px/1.4 var(--mono); }
.protocol-rule p { margin:0; color:var(--muted); line-height:1.5; }

.modal { position:fixed; z-index:50; inset:0; display:grid; place-items:center; }
.modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.72); backdrop-filter:blur(7px); }
.modal-card { width:min(560px,calc(100vw - 40px)); position:relative; z-index:1; background:var(--panel-solid); border:1px solid var(--line-strong); box-shadow:0 34px 120px rgba(0,0,0,.58); }
.modal-head { display:flex; justify-content:space-between; align-items:center; padding:18px; border-bottom:1px solid var(--line); }
.icon-button { width:34px; height:34px; background:transparent; border:1px solid var(--line); font-size:21px; }
.icon-button:hover { border-color:var(--accent); }
.drop-zone { margin:18px; min-height:200px; display:flex; flex-direction:column; align-items:center; justify-content:center; border:1px dashed var(--line-strong); background:rgba(255,255,255,.015); cursor:pointer; }
.drop-zone.dragover { border-color:var(--accent); background:var(--accent-soft); }
.drop-zone input { display:none; }
.drop-icon { color:var(--accent); font-size:31px; line-height:1; }
.drop-zone strong { margin-top:14px; }
.drop-zone small { margin-top:5px; color:var(--muted); }
.import-status { margin:0 18px; min-height:42px; padding:11px 12px; border-left:2px solid var(--line-strong); background:rgba(255,255,255,.02); color:var(--muted); font-size:11px; line-height:1.5; }
.import-status.error { border-color:var(--danger); color:#efaaa5; }
.import-status.ok { border-color:var(--ok); color:#b7dabd; }
.server-credentials { margin:14px 18px 0; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.server-credentials label { display:grid; gap:6px; color:var(--faint); font:9px/1.2 var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.server-credentials input { width:100%; min-height:40px; padding:0 11px; border:1px solid var(--line-strong); border-radius:0; outline:0; background:#090e12; color:var(--text); font:12px/1 var(--mono); }
.server-credentials input:focus { border-color:var(--accent); box-shadow:inset 3px 0 0 var(--accent); }
.server-credentials small { grid-column:1 / -1; color:var(--faint); font:9px/1.45 var(--mono); }
.audit-ledger { margin-top:18px; display:grid; grid-template-columns:1.3fr .55fr 1fr .8fr .9fr; border:1px solid var(--line); }
.audit-ledger > div { min-width:0; min-height:66px; padding:12px; border-right:1px solid var(--line); }
.audit-ledger > div:last-child { border-right:0; }
.audit-ledger span { display:block; color:var(--faint); font:8px/1 var(--mono); letter-spacing:.12em; }
.audit-ledger strong { display:block; margin-top:9px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:10px/1.3 var(--mono); font-weight:500; }
.modal-actions { display:flex; justify-content:flex-end; gap:10px; padding:18px; }
.toast { position:fixed; right:24px; bottom:24px; z-index:80; max-width:420px; padding:13px 16px; background:#151e23; border:1px solid var(--line-strong); box-shadow:var(--shadow); font-size:11px; }
.toast.error { border-color:rgba(229,110,103,.55); }
.toast.ok { border-color:rgba(135,195,143,.55); }

@media (max-width: 1280px) {
  :root { --sidebar: 218px; }
  .main-stage { padding-inline:22px; }
  .kpi-grid { grid-template-columns:repeat(3,1fr); }
  .lower-grid { grid-template-columns:1fr; }
  .rose-panel, .verdict-panel { min-height:auto; }
}

@media (max-width: 860px) {
  :root { --sidebar: 0px; }
  html, body { height:auto; overflow-x:hidden; overflow-y:auto; }
  .app-shell { display:block; height:auto; min-height:100dvh; overflow:visible; }
  .sidebar { position:relative; width:auto; height:auto; flex-direction:row; align-items:center; gap:12px; padding:12px 15px; border-right:0; border-bottom:1px solid var(--line); }
  .brand-block { margin:0 auto 0 0; }
  .brand-mark { width:34px; height:34px; }
  .nav-list { display:flex; }
  .nav-item { grid-template-columns:1fr; width:auto; padding:9px; border-left:0; border-bottom:2px solid transparent; }
  .nav-item.active { border-left:0; border-bottom-color:var(--accent); }
  .nav-index, .protocol-chip, .runtime-note, .sidebar-spacer { display:none; }
  .language-switch { margin:0; width:110px; }
  .sidebar .primary-action { min-height:36px; font-size:0; width:38px; padding:0; }
  .sidebar .primary-action span:first-child { font-size:18px; }
  .main-stage { height:auto; min-height:0; padding:0 14px 28px; display:block; overflow:visible; }
  .view-panel.active { overflow:visible; }
  #view-overview.active { display:block; overflow:visible; }
  #view-overview .overview-grid { display:grid; grid-template-columns:1fr; }
  #view-overview .rose-panel, #view-overview .verdict-panel { height:auto; overflow:visible; }
  #view-overview .rose-chart svg { height:397px; }
  .topbar { min-height:86px; }
  .topbar-meta .meta-cell { display:none; }
  .kpi-grid { grid-template-columns:repeat(2,1fr); }
  .overview-grid, .lower-grid { grid-template-columns:1fr; }
  .horizon-grid { grid-template-columns:1fr; }
  .horizon-card { border-right:0; border-bottom:1px solid var(--line); }
  .axis-row { grid-template-columns:minmax(145px,.9fr) minmax(120px,1.5fr) 45px 100px; }
  .axis-coverage { display:none; }
  .snapshot-selector { grid-template-columns:auto 1fr; }
  .snapshot-selector strong { grid-column:2; }
  .empty-state { grid-template-columns:1fr; padding:40px 24px; text-align:center; }
  .empty-compass { margin:auto; }
  .empty-actions { justify-content:center; }
  .server-credentials { grid-template-columns:1fr; }
  .server-credentials small { grid-column:auto; }
  .audit-ledger { grid-template-columns:1fr 1fr; }
  .audit-ledger > div { border-bottom:1px solid var(--line); }
  .source-card, .observation-card, .history-row { min-width:760px; }
  .source-list, .history-table { overflow-x:auto; }
}

@media (max-width: 620px) {
  .sidebar {
    display:grid;
    grid-template-columns:minmax(0,1fr) 38px;
    align-items:center;
    gap:9px 10px;
    padding:10px 14px 0;
  }
  .brand-block { min-width:0; }
  .brand-name { font-size:14px; }
  .brand-sub { font-size:7px; }
  .brand-mark { width:32px; height:32px; }
  .brand-mark::before { height:42px; }
  .brand-mark::after { width:42px; }
  .sidebar .primary-action { grid-column:2; grid-row:1; }
  .notify-action { grid-column:1 / -1; grid-row:4; margin:0 0 8px; }
  .language-switch { grid-column:1 / -1; grid-row:3; justify-self:end; margin-bottom:8px; }
  .nav-list {
    grid-column:1 / -1;
    grid-row:2;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    width:100%;
    gap:0;
  }
  .nav-item { min-width:0; justify-items:center; padding:9px 2px; font-size:11px; white-space:nowrap; }
  .axis-row { grid-template-columns:minmax(0,1fr) 52px; gap:7px 10px; padding:8px 0; }
  .axis-name { grid-column:1; grid-row:1; }
  .axis-score { grid-column:2; grid-row:1; }
  .axis-bar { grid-column:1 / -1; grid-row:2; }
  .axis-trend { grid-column:1 / -1; grid-row:3; }
  .main-stage { padding-inline:10px; }
  .topbar { min-height:92px; gap:10px; }
  h1 { font-size:24px; }
  .kpi-grid { gap:8px; }
  .kpi-card { min-height:135px; padding-inline:13px; }
  .kpi-value > span { font-size:32px; }
  .panel-head { align-items:flex-start; flex-direction:column; gap:10px; }
  .legend { align-self:stretch; justify-content:flex-end; }
  .snapshot-selector { width:100%; }
  .rose-chart { min-height:0; overflow:hidden; padding:8px 12px 14px; display:block; }
  .rose-chart::before { inset:18px 18px 14px; }
  .rose-chart svg { position:relative; left:auto; display:block; width:100%; height:300px; max-width:none; margin:0; transform:none; }
  .rose-chart svg .rose-index,.rose-chart svg .rose-label,.rose-chart svg .rose-value { display:none; }
  .rose-mobile-register { display:grid; grid-template-columns:1fr 1fr; margin-top:2px; border:1px solid var(--line); background:rgba(3,16,23,.58); }
  .rose-register-item { min-width:0; min-height:58px; display:grid; grid-template-columns:25px minmax(0,1fr) auto; grid-template-rows:1fr auto; column-gap:8px; align-items:center; padding:8px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
  .rose-register-item:nth-child(2n) { border-right:0; }
  .rose-register-item:nth-last-child(-n+2) { border-bottom:0; }
  .rose-register-item>span { grid-row:1 / 3; align-self:stretch; display:grid; place-items:center; border-right:1px solid var(--line); color:var(--cyan); font:600 8px var(--mono); letter-spacing:.08em; }
  .rose-register-item>strong { min-width:0; color:var(--text); font:600 10px/1.2 var(--sans); overflow-wrap:anywhere; }
  .rose-register-item>em { grid-column:2 / 4; display:flex; gap:9px; align-items:center; font:normal 9px/1 var(--mono); }
  .rose-register-item>em b { color:var(--accent); font-weight:600; }
  .rose-register-item>em i { color:var(--cyan); font-style:normal; }
  .modal-card { width:calc(100vw - 20px); }
}

.protocol-layout { display:grid; grid-template-columns:minmax(260px,.42fr) minmax(520px,.58fr); min-height:calc(100vh - 224px); }
.protocol-copy { padding:24px; border-right:1px solid var(--line); }
.protocol-copy h3 { margin:0 0 10px; font-size:14px; }
.protocol-copy h3:not(:first-child) { margin-top:28px; }
.protocol-copy p { color:var(--muted); line-height:1.7; }
.chain { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:20px; }
.chain span { padding:7px 8px; border:1px solid var(--line); color:var(--text); font:8px/1 var(--mono); letter-spacing:.07em; }
.chain i { color:var(--accent); font-style:normal; }
.protocol-axes { padding:0 18px 24px; min-width:0; }
.sources-content { min-width:0; }
.muted { color:var(--muted); }

@media (max-width: 1060px) {
  .protocol-layout { grid-template-columns:1fr; }
  .protocol-copy { border-right:0; border-bottom:1px solid var(--line); }
}
.danger-action { margin-top:14px; border-color:rgba(229,110,103,.28); color:#eaa39e; }
.danger-action:hover { border-color:rgba(229,110,103,.62); background:var(--danger-soft); }