:root {
  color-scheme: dark;
  --ink: #061a12;
  --text: #ecf8f1;
  --muted: #9bb9aa;
  --line: #1e4936;
  --panel: #0c261b;
  --canvas: #05140e;
  --cyan: #35d98b;
  --cyan-soft: #123c2a;
  --orange: #ffbd69;
  --orange-soft: #3e2d18;
  --blue: #73c8ff;
  --blue-soft: #102f3f;
  --shadow: 0 24px 70px rgba(0, 8, 5, 0.38);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 320px;
  color: var(--text);
  background:
    radial-gradient(circle at 84% -8%, rgba(53, 217, 139, 0.20), transparent 34rem),
    radial-gradient(circle at 8% 50%, rgba(24, 115, 76, 0.14), transparent 30rem),
    var(--canvas);
}

button { font: inherit; }
[hidden] { display: none !important; }

.topbar {
  min-height: 76px;
  padding: 0 3vw;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr);
  align-items: center;
  gap: 24px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);
  position: sticky;
  top: 0;
  z-index: 10;
}

.brand { display: flex; align-items: center; gap: 12px; padding: 0; border: 0; color: inherit; background: transparent; text-align: left; cursor: pointer; }
.brand strong { display: block; font-size: 1.08rem; letter-spacing: 0.02em; }
.brand small { display: block; color: var(--muted); font-size: 0.78rem; margin-top: 1px; }
.brand-mark { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--ink); }
.brand-mark svg { width: 27px; fill: none; stroke: #75e2ef; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }

.view-tabs { display: flex; gap: 4px; padding: 5px; border: 1px solid var(--line); border-radius: 13px; background: #f7f9fc; }
.view-tab { border: 0; padding: 9px 13px; border-radius: 9px; color: #5c6880; background: transparent; cursor: pointer; font-size: 0.85rem; font-weight: 650; white-space: nowrap; }
.view-tab:hover { color: var(--ink); background: #fff; }
.view-tab.is-active { color: var(--ink); background: #fff; box-shadow: 0 4px 16px rgba(25, 47, 88, 0.09); }

.as-of { justify-self: end; display: flex; align-items: center; gap: 8px; color: #556077; font-size: 0.82rem; }
.as-of span { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 4px var(--cyan-soft); }
.header-actions { justify-self: end; display: flex; align-items: center; gap: 18px; }
.reset-button { border: 0; padding: 7px 0; border-bottom: 1px dashed #aab5c5; color: var(--muted); background: transparent; cursor: pointer; font-size: 0.78rem; }

main { width: min(1520px, 95vw); margin: 0 auto; }
.workspace { min-height: calc(100vh - 126px); padding: 42px 0; display: grid; grid-template-columns: 230px minmax(390px, 0.9fr) minmax(420px, 1.18fr); gap: 24px; align-items: stretch; }
.steps, .question-card, .live-map, .placeholder-panel { border: 1px solid var(--line); background: var(--panel); box-shadow: var(--shadow); }
.steps { padding: 26px 18px; border-radius: 22px; }
.eyebrow { margin: 0 0 12px; color: var(--cyan); font-size: 0.73rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.steps ol { padding: 0; margin: 22px 0 0; list-style: none; display: grid; gap: 5px; }
.steps li { position: relative; display: grid; grid-template-columns: 32px 1fr; gap: 11px; align-items: center; min-height: 62px; padding: 8px; border-radius: 13px; color: #7a8499; }
.steps li:not(:last-child)::after { content: ""; position: absolute; left: 23px; top: 49px; width: 1px; height: 26px; background: var(--line); }
.steps li span { width: 31px; height: 31px; border-radius: 10px; display: grid; place-items: center; background: #eef2f8; font-size: 0.76rem; font-weight: 800; }
.steps li strong, .steps li small { display: block; }
.steps li strong { color: inherit; font-size: 0.88rem; }
.steps li small { margin-top: 3px; font-size: 0.74rem; }
.steps li.is-current { color: var(--ink); background: var(--cyan-soft); }
.steps li.is-current span { color: white; background: var(--cyan); }
.steps li.is-complete { color: #415069; }
.steps li.is-complete span { color: #fff; background: var(--ink); }

.question-card { border-radius: 22px; padding: clamp(28px, 4vw, 54px); display: flex; flex-direction: column; }
.question-meta { display: flex; align-items: center; gap: 14px; margin-bottom: 44px; color: var(--muted); font-size: 0.8rem; }
.progress { height: 5px; flex: 1; max-width: 150px; border-radius: 99px; overflow: hidden; background: #e7ecf3; }
.progress i { display: block; height: 100%; border-radius: inherit; background: var(--cyan); }
.question-card h1, .placeholder-panel h1 { margin: 0; max-width: 650px; font-size: clamp(2rem, 3vw, 3.35rem); line-height: 1.05; letter-spacing: -0.04em; }
.question-note { max-width: 620px; margin: 18px 0 28px; color: var(--muted); font-size: 1rem; line-height: 1.6; }
.question-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 24px; }
.button { min-height: 44px; padding: 0 18px; border-radius: 11px; border: 1px solid var(--line); cursor: pointer; font-weight: 750; font-size: 0.84rem; }
.button:disabled { opacity: 0.4; cursor: not-allowed; }
.button-primary { border-color: var(--ink); color: #fff; background: var(--ink); }
.button-primary:not(:disabled):hover { background: #162b58; }
.button-secondary { color: var(--ink); background: #fff; }
.button-secondary:hover { border-color: #aab8cc; }
.choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.choices button { display: grid; grid-template-columns: 42px 1fr; align-items: center; gap: 12px; min-height: 86px; padding: 14px; text-align: left; border: 1px solid var(--line); border-radius: 15px; background: #fff; color: var(--ink); cursor: pointer; transition: 160ms ease; }
.choices button:hover, .choices button:focus-visible { transform: translateY(-2px); border-color: var(--cyan); box-shadow: 0 10px 24px rgba(11, 142, 163, 0.12); outline: none; }
.choices button.is-selected { border-color: var(--cyan); background: var(--cyan-soft); }
.choices button:disabled { cursor: not-allowed; border-style: dashed; background: #f3f5f8; color: #77849a; box-shadow: none; opacity: 0.78; transform: none; }
.choices button:disabled:hover, .choices button:disabled:focus-visible { border-color: var(--line); box-shadow: none; transform: none; }
.choices button:disabled .choice-icon { background: #e5e9ef; color: #7b8798; }
.choices button:disabled small { color: #6b7687; }
.choice-icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: #eff4f8; color: var(--cyan); font-size: 1.15rem; font-weight: 850; }
.choices strong, .choices small { display: block; }
.choices strong { font-size: 0.9rem; }
.choices small { margin-top: 5px; color: var(--muted); font-size: 0.74rem; line-height: 1.3; }
.choices-compact button { min-height: 72px; }
.date-field { width: fit-content; margin: -8px 0 24px; padding: 10px 12px; display: flex; align-items: center; gap: 14px; border: 1px solid var(--line); border-radius: 12px; background: #f8fafd; }
.date-field span { color: var(--muted); font-size: 0.8rem; font-weight: 700; }
.date-field input { border: 0; color: var(--ink); background: transparent; font: inherit; font-size: 0.84rem; font-weight: 750; }
.constraint-notice { margin: -8px 0 24px; padding: 12px 14px; border-left: 4px solid var(--orange); border-radius: 10px; background: #fff5e9; color: #6d4620; font-size: 0.84rem; line-height: 1.45; }
.unknown-link { align-self: flex-start; margin-top: 20px; padding: 4px 0; border: 0; border-bottom: 1px dashed #aeb8c8; background: none; color: var(--muted); cursor: pointer; font-size: 0.82rem; }

.live-map { border-radius: 22px; padding: 28px; overflow: hidden; background: var(--ink); color: #fff; position: relative; }
.live-map::before { content: ""; position: absolute; inset: 0; opacity: 0.22; background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size: 32px 32px; mask-image: linear-gradient(to bottom, black, transparent 86%); }
.map-head, .route-canvas, .document-strip, .map-status { position: relative; z-index: 1; }
.map-head { display: flex; justify-content: space-between; align-items: flex-start; }
.map-head h2 { margin: 0; font-size: 1.3rem; }
.map-head .eyebrow { color: #75e2ef; }
.draft-chip { padding: 7px 10px; border: 1px solid rgba(255,255,255,.18); border-radius: 99px; color: #b9c5d9; font-size: 0.72rem; }
.observer-strip { position: relative; z-index: 2; margin-bottom: 20px; padding: 15px 17px; display: flex; justify-content: space-between; align-items: center; gap: 20px; border: 1px solid rgba(109,225,242,.42); border-radius: 14px; background: rgba(109,225,242,.1); }
.observer-strip[hidden] { display: none; }
.observer-strip div, .observer-strip-compact { display: grid; }
.observer-strip span { color: #75e2ef; font-size: .68rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.observer-strip strong { color: #fff; font-size: .9rem; }
.observer-strip small, .observer-strip p { margin: 0; color: #c2cede; font-size: .75rem; line-height: 1.45; }
.observer-strip p { max-width: 720px; }
.observer-strip-compact { margin: 24px 0 -48px; gap: 4px; align-items: start; }
.route-canvas { margin: 86px 0 68px; display: grid; grid-template-columns: 1fr 34px 1fr 34px 1fr; align-items: center; }
.route-line { position: absolute; left: 10%; right: 10%; top: 50%; height: 1px; background: rgba(117,226,239,.42); }
.actor { position: relative; min-height: 126px; padding: 20px 13px 15px; display: flex; flex-direction: column; justify-content: flex-end; border: 1px solid rgba(255,255,255,.18); border-radius: 17px; background: rgba(255,255,255,.07); backdrop-filter: blur(6px); }
.actor::before { content: ""; position: absolute; top: -7px; left: 18px; width: 40px; height: 7px; border-radius: 8px 8px 0 0; background: var(--cyan); }
.actor-carrier::before { background: var(--orange); }
.actor-receiver::before { background: #7ba5ff; }
.actor-index { position: absolute; right: 13px; top: 12px; color: #697995; font-size: 0.68rem; font-weight: 850; }
.actor strong { font-size: 0.88rem; }
.actor small { margin-top: 5px; color: #aab6ca; font-size: 0.72rem; }
.route-arrow { position: relative; z-index: 2; width: 26px; height: 26px; margin: auto; display: grid; place-items: center; border-radius: 50%; background: #172647; color: #75e2ef; }
.document-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; padding: 14px; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; background: rgba(4, 13, 35, .45); }
.lop-control { position: relative; z-index: 2; margin: -46px 0 18px; border: 1px solid rgba(79,232,156,.26); border-radius: 14px; background: rgba(8,35,23,.88); overflow: hidden; }
.lop-summary { min-height: 58px; padding: 10px 12px 10px 14px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.lop-summary div { min-width: 0; display: grid; grid-template-columns: auto minmax(0,1fr); column-gap: 9px; align-items: baseline; }
.lop-summary span { color: #5ce9a4; font-size: .68rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.lop-summary strong { overflow: hidden; color: #f2fff7; font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }
.lop-summary small { grid-column: 2; margin-top: 2px; color: #89aa99; font-size: .68rem; }
.lop-summary button { padding: 7px 10px; border: 1px solid #2d6548; border-radius: 9px; color: #bff5d6; background: #153e2b; cursor: pointer; font-size: .72rem; font-weight: 750; }
.lop-summary button:hover, .lop-summary button:focus-visible { border-color: #53e69d; outline: none; }
.lop-choices { padding: 10px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; border-top: 1px solid rgba(79,232,156,.18); }
.lop-choices button { min-height: 58px; padding: 9px; display: grid; grid-template-columns: 29px 1fr; column-gap: 8px; align-items: center; border: 1px solid #27553e; border-radius: 10px; color: #e6f8ee; background: #0e2e20; text-align: left; cursor: pointer; }
.lop-choices button:hover, .lop-choices button:focus-visible, .lop-choices button.is-selected { border-color: #4ee39a; background: #16432e; outline: none; }
.lop-choices button > span { grid-row: 1 / 3; width: 29px; height: 29px; display: grid; place-items: center; border-radius: 8px; color: #62eda9; background: rgba(53,217,139,.12); font-weight: 850; }
.lop-choices strong, .lop-choices small { display: block; }
.lop-choices strong { font-size: .74rem; }
.lop-choices small { margin-top: 2px; color: #91ae9f; font-size: .64rem; line-height: 1.3; }
.document-strip span, .document-strip b { display: grid; place-items: center; min-width: 38px; height: 30px; padding: 0 8px; border-radius: 8px; background: #1b3158; font-size: 0.74rem; }
.document-strip span { color: #75e2ef; }
.document-strip b { background: var(--orange); color: #fff; }
.document-strip i { color: #8492aa; font-size: 0.68rem; font-style: normal; }
.document-strip .doc-required { color: #fff; background: var(--cyan); }
.document-strip .doc-check { color: #fff; background: var(--orange); }
.document-strip .doc-muted { color: #b5c0d1; background: #243452; }
.map-status { margin-top: 16px; padding: 13px; display: grid; grid-template-columns: 28px 1fr; gap: 10px; border-radius: 13px; background: rgba(117,226,239,.09); color: #c4cfdf; }
.map-status > span { width: 27px; height: 27px; display: grid; place-items: center; border: 1px solid rgba(117,226,239,.35); border-radius: 50%; color: #75e2ef; font-weight: 800; font-family: Georgia, serif; }
.map-status p { margin: 0; font-size: 0.75rem; line-height: 1.45; }
.map-status strong { color: #fff; }

.content-panel { min-height: calc(100vh - 150px); margin: 36px auto 26px; }
.section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: 24px; }
.section-heading h1 { margin: 0; max-width: 850px; font-size: clamp(2.2rem, 4.5vw, 4.6rem); line-height: 0.98; letter-spacing: -0.055em; }
.section-lead { max-width: 650px; margin: 16px 0 0; color: var(--muted); line-height: 1.6; }
.verdict-card { min-height: 150px; padding: 28px 30px; display: flex; justify-content: space-between; align-items: center; gap: 30px; border: 1px solid var(--line); border-radius: 20px; background: #fff; box-shadow: var(--shadow); }
.verdict-card h2 { margin: 0; font-size: clamp(1.55rem, 3vw, 2.55rem); letter-spacing: -0.035em; }
.verdict-card p:last-child { max-width: 800px; margin: 10px 0 0; color: var(--muted); line-height: 1.5; }
.verdict-positive { border-left: 7px solid var(--cyan); }
.verdict-warning { border-left: 7px solid var(--orange); }
.verdict-neutral { border-left: 7px solid #8b97aa; }
.verdict-date { min-width: 160px; padding: 14px 18px; border-radius: 14px; color: var(--muted); background: #f5f7fb; font-size: 0.74rem; }
.verdict-date strong { display: block; margin-top: 4px; color: var(--ink); font-size: 1rem; }
.route-board { margin-top: 20px; padding: 28px; border-radius: 22px; color: #fff; background: var(--ink); box-shadow: var(--shadow); overflow: hidden; }
.lane-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; position: relative; }
.lane-grid article { min-height: 120px; padding: 20px; display: flex; flex-direction: column; justify-content: flex-end; border: 1px solid rgba(255,255,255,.16); border-radius: 16px; background: rgba(255,255,255,.055); }
.lane-grid span { color: #75e2ef; font-size: 0.68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.lane-grid strong { margin-top: 22px; font-size: 1rem; }
.lane-grid small { margin-top: 5px; color: #aab6c8; }
.flow-documents { margin-top: 24px; display: flex; align-items: stretch; gap: 9px; overflow-x: auto; padding-bottom: 4px; }
.flow-doc { min-width: 165px; padding: 15px; border-radius: 13px; background: #172a50; position: relative; }
.flow-doc:not(:last-child)::after { content: "→"; position: absolute; right: -11px; top: 50%; color: #6de1f2; z-index: 2; }
.flow-doc > span { display: inline-grid; place-items: center; min-width: 43px; height: 29px; padding: 0 7px; border-radius: 8px; background: var(--cyan); font-size: .73rem; font-weight: 850; }
.flow-check > span { background: var(--orange); }
.flow-muted > span { background: #59677f; }
.flow-doc strong, .flow-doc small { display: block; }
.flow-doc strong { margin-top: 16px; font-size: .82rem; }
.flow-doc small { margin-top: 4px; color: #98a6bc; font-size: .7rem; }
.result-grid { margin-top: 20px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.result-card { min-height: 300px; padding: 25px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: 0 12px 38px rgba(15,32,68,.06); }
.observer-card { grid-column: 1 / -1; min-height: 0; }
.observer-card h2 { margin: 0 0 20px; font-size: 1.5rem; letter-spacing: -.025em; }
.role-list { margin: 0; }
.role-list div { padding: 12px 0; border-bottom: 1px solid #e8edf4; }
.role-list dt { color: var(--muted); font-size: .72rem; }
.role-list dd { margin: 4px 0 0; font-size: .88rem; font-weight: 750; }
.check-list, .number-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 13px; }
.check-list li { display: grid; grid-template-columns: 18px 1fr; gap: 9px; font-size: .84rem; line-height: 1.4; }
.check-list li span { width: 17px; height: 17px; margin-top: 1px; border-radius: 5px; border: 1px solid var(--line); }
.check-required span { background: var(--cyan); border-color: var(--cyan) !important; box-shadow: inset 0 0 0 4px #fff; }
.check-check span { background: var(--orange-soft); border-color: var(--orange) !important; }
.check-muted span { background: #e8edf4; }
.number-list li { display: grid; grid-template-columns: 25px 1fr; gap: 9px; align-items: start; font-size: .82rem; line-height: 1.42; }
.number-list span { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 8px; color: var(--cyan); background: var(--cyan-soft); font-weight: 850; font-size: .68rem; }

.legend { display: flex; gap: 16px; color: var(--muted); font-size: .76rem; }
.legend span { display: flex; align-items: center; gap: 7px; }
.legend i { width: 9px; height: 9px; border-radius: 50%; }
.core-dot { background: var(--cyan); }.event-dot { background: var(--orange); }
.title-flow { min-height: 230px; padding: 36px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; align-items: center; border-radius: 22px; background: var(--ink); position: relative; overflow: hidden; }
.title-flow::before { content: ""; position: absolute; inset: 0; opacity: .18; background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size: 36px 36px; }
.flow-line { position: absolute; left: 12%; right: 12%; top: 50%; height: 2px; background: rgba(109,225,242,.42); }
.title-node { min-height: 142px; padding: 16px; border: 1px solid rgba(255,255,255,.18); border-radius: 16px; color: #fff; background: #142649; text-align: left; position: relative; cursor: pointer; transition: 160ms ease; }
.title-node:hover, .title-node.is-active { transform: translateY(-4px); border-color: #6de1f2; box-shadow: 0 14px 32px rgba(0,0,0,.2); }
.title-node > span { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 12px; color: var(--ink); background: #6de1f2; font-weight: 900; }
.title-node strong, .title-node small { display: block; }
.title-node strong { margin-top: 20px; font-size: .9rem; }.title-node small { margin-top: 5px; color: #9eabc0; }
.optional-titles { margin-top: 13px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.optional-title { min-height: 84px; padding: 13px; display: grid; grid-template-columns: 42px 1fr; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 14px; color: var(--ink); background: #fff; text-align: left; cursor: pointer; }
.optional-title:hover, .optional-title.is-active { border-color: var(--orange); background: var(--orange-soft); }
.optional-title > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px; color: #fff; background: var(--orange); font-weight: 850; }
.optional-title strong, .optional-title small { display: block; }.optional-title strong { font-size: .78rem; }.optional-title small { margin-top: 4px; color: var(--muted); font-size: .67rem; }
.title-detail { margin-top: 18px; min-height: 340px; padding: 28px; display: grid; grid-template-columns: 120px 1fr; gap: 30px; border: 1px solid var(--line); border-radius: 20px; background: #fff; box-shadow: var(--shadow); }
.title-detail-number { width: 108px; height: 108px; display: grid; place-items: center; border-radius: 25px; color: #fff; background: var(--ink); font-size: 2rem; font-weight: 900; }
.title-detail h2 { margin: 0; font-size: 2rem; letter-spacing: -.035em; }
.title-facts { margin-top: 24px; display: grid; grid-template-columns: .8fr 1.3fr 1fr; gap: 20px; }
.title-facts div { padding: 15px 0; border-top: 1px solid var(--line); }
.title-facts span { display: block; color: var(--muted); font-size: .72rem; }.title-facts strong { display: block; margin-top: 8px; font-size: .82rem; line-height: 1.5; }
.legal-note { margin-top: 20px; padding: 15px; display: grid; grid-template-columns: 74px 1fr; gap: 12px; border-radius: 13px; background: var(--orange-soft); }
.legal-note > span { color: #a24a12; font-size: .7rem; font-weight: 850; text-transform: uppercase; }.legal-note p { margin: 0; color: #6e3d20; font-size: .8rem; line-height: 1.5; }

.incident-layout { display: grid; grid-template-columns: minmax(280px, .75fr) 1.4fr; gap: 18px; }
.incident-list { display: grid; gap: 9px; }
.incident-button { min-height: 70px; padding: 12px; display: grid; grid-template-columns: 42px 1fr auto; gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: 14px; color: var(--ink); background: #fff; text-align: left; cursor: pointer; }
.incident-button:hover, .incident-button.is-active { border-color: var(--cyan); background: var(--cyan-soft); }
.incident-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px; color: #fff; background: var(--ink); font-weight: 900; }
.incident-button strong { font-size: .84rem; }.incident-button small { padding: 5px 8px; border-radius: 99px; color: var(--orange); background: var(--orange-soft); font-size: .68rem; font-weight: 800; }
.incident-detail { min-height: 470px; padding: clamp(28px, 5vw, 58px); border-radius: 22px; color: #fff; background: var(--ink); box-shadow: var(--shadow); }
.incident-detail h2 { max-width: 630px; margin: 20px 0 35px; font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1; letter-spacing: -.045em; }
.incident-badge { display: inline-block; padding: 7px 10px; border-radius: 8px; color: var(--ink); background: #6de1f2; font-size: .72rem; font-weight: 850; }
.incident-detail ol { padding: 0; margin: 0; list-style: none; counter-reset: incident; display: grid; gap: 12px; }
.incident-detail li { counter-increment: incident; display: grid; grid-template-columns: 32px 1fr; gap: 11px; align-items: center; color: #ced7e7; line-height: 1.45; }
.incident-detail li::before { content: counter(incident); width: 31px; height: 31px; display: grid; place-items: center; border: 1px solid #405175; border-radius: 10px; color: #6de1f2; font-size: .72rem; font-weight: 850; }
.incident-detail .legal-note { margin-top: 30px; background: rgba(231,120,47,.12); }.incident-detail .legal-note p { color: #ffd4b9; }.incident-detail .legal-note > span { color: #ff9f62; }

.sources-panel { margin: 12px auto 28px; }
.sources-panel details { border: 1px solid var(--line); border-radius: 15px; background: #fff; }
.sources-panel summary { padding: 17px 20px; cursor: pointer; font-weight: 750; font-size: .84rem; }
.sources-content { padding: 0 20px 20px; color: var(--muted); font-size: .82rem; line-height: 1.55; }
.sources-content ul { margin-bottom: 0; }.sources-content a { color: #1f5dbd; }
footer { width: min(1520px, 95vw); margin: 0 auto; padding: 0 0 28px; color: var(--muted); font-size: 0.76rem; }

/* Forest night visual system */
.topbar {
  border-color: rgba(78, 161, 117, 0.24);
  background: rgba(5, 20, 14, 0.86);
  box-shadow: 0 12px 40px rgba(0, 8, 5, 0.22);
}
.brand { color: var(--text); }
.brand-mark {
  border: 1px solid rgba(79, 232, 156, 0.26);
  background: linear-gradient(145deg, #123b2a, #071a12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 8px 22px rgba(0,0,0,.24);
}
.brand-mark svg { stroke: #65eeaa; }
.view-tabs { border-color: rgba(78, 161, 117, 0.22); background: rgba(13, 39, 28, 0.76); }
.view-tab { color: #91ae9f; }
.view-tab:hover { color: var(--text); background: rgba(38, 87, 62, 0.46); }
.view-tab.is-active {
  color: #f3fff8;
  background: linear-gradient(135deg, #1d5a3d, #123e2c);
  box-shadow: 0 8px 22px rgba(0, 8, 5, 0.28), inset 0 1px 0 rgba(255,255,255,.08);
}
.as-of { color: #a6c2b4; }
.as-of span { background: #47e89b; box-shadow: 0 0 0 4px rgba(53,217,139,.13), 0 0 18px rgba(53,217,139,.45); }
.reset-button { color: #91ae9f; border-color: #3e6853; }
.reset-button:hover { color: #dff5e8; }

.steps, .question-card, .placeholder-panel {
  border-color: rgba(70, 145, 105, 0.28);
  background: linear-gradient(155deg, rgba(15, 43, 31, .96), rgba(8, 29, 20, .98));
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.035);
}
.steps li { color: #789689; }
.steps li span { color: #8ca99b; background: #102e21; }
.steps li.is-current { color: #f2fff8; background: linear-gradient(90deg, rgba(53,217,139,.19), rgba(53,217,139,.07)); }
.steps li.is-current span { color: #032417; background: #4ae39a; box-shadow: 0 0 22px rgba(53,217,139,.22); }
.steps li.is-complete { color: #b6d0c3; }
.steps li.is-complete span { color: #caffdf; background: #1f5b3f; }
.eyebrow { color: #55eaa1; }
.question-card h1, .placeholder-panel h1, .section-heading h1 { color: #f3fff7; text-wrap: balance; }
.progress { background: #173a2a; }
.progress i { background: linear-gradient(90deg, #25bd75, #62efaa); box-shadow: 0 0 16px rgba(53,217,139,.36); }
.button { border-color: #2b5b43; }
.button-primary {
  border-color: #45dc91;
  color: #032417;
  background: linear-gradient(135deg, #55eaa1, #2cc77c);
  box-shadow: 0 10px 26px rgba(31, 184, 110, .20);
}
.button-primary:not(:disabled):hover { background: linear-gradient(135deg, #6af2b0, #39d78a); }
.button-secondary { color: #dff5e8; background: #102e21; }
.button-secondary:hover { border-color: #48a473; background: #153a2a; }
.choices button {
  border-color: #26523d;
  color: var(--text);
  background: linear-gradient(145deg, #102f22, #0b251a);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
.choices button:hover, .choices button:focus-visible {
  border-color: #45df93;
  background: linear-gradient(145deg, #153b2a, #0e2e20);
  box-shadow: 0 14px 32px rgba(0, 10, 6, .34), 0 0 0 3px rgba(53,217,139,.08);
}
.choices button.is-selected {
  border-color: #4ee49b;
  background: linear-gradient(145deg, #194833, #103525);
  box-shadow: inset 0 0 0 1px rgba(89,240,169,.12), 0 14px 34px rgba(0,9,5,.28);
}
.choices button:disabled { color: #769184; border-color: #234536; background: #0d2219; }
.choices button:disabled .choice-icon { color: #6d8a7b; background: #163225; }
.choice-icon { color: #60eca8; background: rgba(53,217,139,.12); border: 1px solid rgba(83,231,159,.12); }
.date-field { border-color: #2a5b43; background: #0e2c20; }
.date-field input { color: #ecfff4; }
.constraint-notice { color: #ffdba9; border-color: #ffbd69; background: rgba(119, 76, 24, .24); }
.unknown-link { color: #9bb9aa; border-color: #416b55; }

.live-map, .route-board, .title-flow, .incident-detail {
  background:
    radial-gradient(circle at 90% 0%, rgba(61, 213, 138, .15), transparent 25rem),
    linear-gradient(145deg, #09251a, #04130d 74%);
  border: 1px solid rgba(79, 184, 129, .24);
}
.live-map::before, .title-flow::before { opacity: .18; background-image: linear-gradient(rgba(91,224,157,.11) 1px, transparent 1px), linear-gradient(90deg, rgba(91,224,157,.11) 1px, transparent 1px); }
.map-head .eyebrow, .lane-grid span { color: #61eda9; }
.draft-chip { color: #afd0bf; border-color: rgba(99, 221, 158, .24); background: rgba(30,79,55,.28); }
.observer-strip { border-color: rgba(79,232,156,.38); background: rgba(43,162,100,.12); }
.observer-strip span { color: #63eeaa; }
.observer-strip small, .observer-strip p { color: #b0cbbd; }
.route-line, .flow-line { background: rgba(74,227,154,.34); }
.actor, .lane-grid article { border-color: rgba(103,195,147,.20); background: linear-gradient(150deg, rgba(28,75,52,.46), rgba(9,36,24,.58)); }
.actor::before { background: #43df92; }
.actor-carrier::before { background: #ffbd69; }
.actor-receiver::before { background: #7ad7ff; }
.actor-index { color: #658978; }
.actor small, .lane-grid small { color: #9db9ab; }
.route-arrow { color: #66efac; background: #123a29; box-shadow: 0 0 0 4px rgba(53,217,139,.06); }
.document-strip { border-color: rgba(86,178,128,.20); background: rgba(1, 13, 8, .48); }
.document-strip span, .document-strip b { background: #17462f; }
.document-strip span { color: #65eeaa; }
.document-strip i { color: #78998a; }
.document-strip .doc-required { color: #032417; background: #45df93; }
.document-strip .doc-check { color: #321e05; background: #ffbd69; }
.document-strip .doc-muted { color: #adc8ba; background: #183628; }
.map-status { color: #b7d0c4; background: rgba(53,217,139,.10); border: 1px solid rgba(77,226,153,.12); }
.map-status > span { color: #62eca8; border-color: rgba(88,235,164,.38); }

.verdict-card, .result-card, .title-detail, .sources-panel details {
  border-color: rgba(70, 145, 105, 0.28);
  color: var(--text);
  background: linear-gradient(155deg, rgba(15, 43, 31, .96), rgba(8, 29, 20, .98));
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.035);
}
.verdict-positive { border-left-color: #3fde8e; }
.verdict-warning { border-left-color: #ffbd69; }
.verdict-neutral { border-left-color: #658978; }
.verdict-date { color: #9bb9aa; background: #0e2d20; border: 1px solid #244c39; }
.verdict-date strong { color: #effcf5; }
.flow-doc { background: linear-gradient(145deg, #174730, #0f3323); border: 1px solid rgba(94,197,143,.16); }
.flow-doc:not(:last-child)::after { color: #5de9a4; }
.flow-doc > span { color: #032417; background: #45df93; }
.flow-check > span { color: #321e05; background: #ffbd69; }
.flow-muted > span { color: #d4e8dd; background: #486b59; }
.flow-doc small { color: #96b5a6; }
.role-list div { border-color: #1b4432; }
.check-list li span { border-color: #326249; }
.check-required span { background: #43db8e; border-color: #43db8e !important; box-shadow: inset 0 0 0 4px #0d291d; }
.check-check span { background: rgba(255,189,105,.17); border-color: #ffbd69 !important; }
.check-muted span { background: #244738; }
.number-list span { color: #68efad; background: #123c2a; }

.title-node { color: #effcf5; border-color: rgba(89,186,135,.22); background: linear-gradient(145deg, #16462f, #0b2c1d); }
.title-node:hover, .title-node.is-active { border-color: #62eca8; box-shadow: 0 16px 34px rgba(0,5,3,.32), 0 0 0 3px rgba(53,217,139,.08); }
.title-node > span { color: #032417; background: #61eca8; }
.title-node small { color: #9dbbaa; }
.optional-title, .incident-button { color: var(--text); border-color: #25513c; background: linear-gradient(145deg, #102f22, #0b241a); }
.optional-title:hover, .optional-title.is-active { border-color: #ffbd69; background: #352817; }
.optional-title > span { color: #2d1c06; background: #ffbd69; }
.title-detail-number { color: #dff8e9; background: linear-gradient(145deg, #1b6040, #0a2b1c); border: 1px solid #367c56; }
.title-facts div { border-color: #24503b; }
.legal-note { background: rgba(128, 84, 28, .22); border: 1px solid rgba(255,189,105,.16); }
.legal-note > span { color: #ffc77f; }
.legal-note p { color: #efd1aa; }
.incident-button:hover, .incident-button.is-active { border-color: #4ee39a; background: #153e2c; }
.incident-icon { color: #dff8e9; background: #174b33; }
.incident-button small { color: #ffc477; background: rgba(255,189,105,.13); }
.incident-badge { color: #032417; background: #5ce9a4; }
.incident-detail li { color: #c3dacd; }
.incident-detail li::before { color: #64eda9; border-color: #2e6549; }
.incident-detail .legal-note { background: rgba(146,92,27,.18); }
.incident-detail .legal-note p { color: #f3d2a9; }
.incident-detail .legal-note > span { color: #ffc475; }
.sources-panel summary { color: #dff5e8; }
.sources-content a { color: #62e8a6; }

@supports (backdrop-filter: blur(18px)) {
  .steps, .question-card, .verdict-card, .result-card, .title-detail, .sources-panel details { backdrop-filter: blur(18px); }
}

@media (max-width: 1180px) {
  .topbar { grid-template-columns: 1fr auto; }
  .view-tabs { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; overflow-x: auto; margin-bottom: 12px; }
  .topbar { padding-top: 12px; }
  .workspace { grid-template-columns: 190px 1fr; }
  .live-map { grid-column: 1 / -1; }
  .result-grid { grid-template-columns: 1fr 1fr; }
  .result-card:last-child { grid-column: 1 / -1; }
  .title-facts { grid-template-columns: 1fr; gap: 4px; }
}

@media (max-width: 760px) {
  .topbar { gap: 12px; }
  .header-actions { gap: 10px; }.as-of { font-size: 0; }
  .as-of::after { content: "17.09.2026"; font-size: 0.72rem; }
  main { width: min(94vw, 680px); }
  .workspace { padding: 20px 0; grid-template-columns: 1fr; }
  .steps { overflow-x: auto; padding: 14px; }
  .steps .eyebrow { display: none; }
  .steps ol { display: flex; margin: 0; min-width: 620px; }
  .steps li { min-width: 98px; grid-template-columns: 30px; justify-items: center; text-align: center; }
  .steps li:not(:last-child)::after { left: 76px; top: 23px; width: 44px; height: 1px; }
  .steps li small { display: none; }
  .question-card { padding: 28px 20px; }
  .question-meta { margin-bottom: 30px; }
  .question-card h1 { font-size: 2.1rem; }
  .choices { grid-template-columns: 1fr; }
  .route-canvas { margin: 52px 0 42px; grid-template-columns: 1fr; gap: 12px; }
  .lop-control { margin-top: -22px; }
  .lop-choices { grid-template-columns: 1fr; }
  .route-line { left: 50%; right: auto; top: 10%; bottom: 10%; height: auto; width: 1px; }
  .route-arrow { transform: rotate(90deg); }
  .actor { min-height: 100px; }
  .section-heading { align-items: flex-start; flex-direction: column; }.section-heading h1 { font-size: 2.7rem; }
  .verdict-card { align-items: flex-start; flex-direction: column; }
  .lane-grid, .result-grid, .optional-titles { grid-template-columns: 1fr; }
  .observer-strip { align-items: flex-start; flex-direction: column; }
  .result-card:last-child { grid-column: auto; }
  .title-flow { grid-template-columns: 1fr; padding: 24px; }
  .flow-line { left: 50%; right: auto; top: 10%; bottom: 10%; width: 2px; height: auto; }
  .title-node { min-height: 110px; }
  .title-detail { grid-template-columns: 1fr; }.title-detail-number { width: 78px; height: 78px; border-radius: 19px; }
  .incident-layout { grid-template-columns: 1fr; }
  .incident-detail { min-height: 420px; }
  .legend { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}