@import url('https://fonts.googleapis.com/css2?family=Black+Ops+One&family=Permanent+Marker&family=Share+Tech+Mono&family=Barlow:wght@400;500;600;700&display=swap');

/* =====================================================================
   Proactive Patrol — "Bodycam" theme
   Night footage HUD, stencil type, duct-tape labels, marker whiteboard.
   ===================================================================== */
:root {
  --bg: #050505;
  --bg-2: #0d0d0d;
  --card: #111111;
  --card-2: #171717;
  --line: #2a2a2a;
  --line-2: #3a3a3a;
  --text: #e4e4e4;
  --muted: #8f8f8f;
  --hot: #e4252f;
  --hot-glow: rgba(228,37,47,.55);
  --amber: #e2b93b;
  --green: #3ddc84;
  --tape: #9a9a92;
  --radius: 2px;
  --max: 1120px;
  --display: "Black Ops One", Impact, "Arial Narrow", sans-serif;
  --marker: "Permanent Marker", cursive;
  --hud: "Share Tech Mono", ui-monospace, Consolas, monospace;
  --body: "Barlow", "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--body); color: var(--text); background: var(--bg); line-height: 1.55; overflow-x: hidden; counter-reset: sec; }
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 15%, rgba(255,255,255,.06), transparent 55%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 3px),
    radial-gradient(circle at 30% 70%, rgba(255,255,255,.025) 0 1px, transparent 2px),
    radial-gradient(circle at 70% 30%, rgba(0,0,0,.5) 0 1px, transparent 2px),
    #0a0a0a;
  background-size: auto, auto, 9px 9px, 13px 13px, auto;
}
body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.75) 100%); }
a { color: #fff; }
img { max-width: 100%; }
::selection { background: var(--hot); color: #fff; }
h1, h2, h3, h4, .brand, .btn, summary, .steps li strong, th { font-family: var(--display); font-weight: 400; letter-spacing: .01em; text-transform: uppercase; }
strong { color: #fff; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 16px; }

/* ===== HUD overlay (injected by js/main.js) ===== */
.hud { position: fixed; inset: 0; pointer-events: none; z-index: 95; font-family: var(--hud); font-size: 12px; color: #fff; text-shadow: 0 0 2px #000, 0 0 6px #000; }
.hud .tl { position: absolute; top: 10px; left: 16px; display: flex; align-items: center; gap: 9px; }
.hud .rec { width: 11px; height: 11px; border-radius: 50%; background: var(--hot); box-shadow: 0 0 10px var(--hot-glow); animation: rec 1.1s steps(2) infinite; }
@keyframes rec { to { opacity: .25; } }
.hud .tr { position: absolute; top: 10px; right: 16px; display: flex; gap: 12px; align-items: center; }
.hud .bl { position: absolute; bottom: 10px; left: 16px; }
.hud .corner { position: absolute; width: 22px; height: 22px; border: 2px solid rgba(255,255,255,.6); }
.hud .c1 { top: 6px; left: 6px; border-right: 0; border-bottom: 0; }
.hud .c2 { top: 6px; right: 6px; border-left: 0; border-bottom: 0; }
.hud .c3 { bottom: 6px; left: 6px; border-right: 0; border-top: 0; }
.hud .c4 { bottom: 6px; right: 6px; border-left: 0; border-top: 0; }
.hud .batt { display: inline-block; width: 20px; height: 10px; border: 1.5px solid #fff; border-radius: 2px; position: relative; }
.hud .batt::after { content: ""; position: absolute; left: 2px; top: 2px; bottom: 2px; width: 60%; background: #fff; }
@media (max-width: 600px) { .hud .tr span:not(.batt), .hud .bl { display: none; } .hud .tl { font-size: 11px; } }

/* ===== Header ===== */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(5,5,5,.86); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); padding-top: 30px; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 62px; padding: 6px 16px; }
.brand { display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; font-size: 18px; line-height: 1.05; white-space: nowrap; flex: none; }
.brand .logo { width: 46px; height: 46px; display: block; filter: drop-shadow(0 0 10px var(--hot-glow)); }
.brand small { display: block; font-family: var(--hud); font-size: 10px; color: var(--muted); letter-spacing: .25em; margin-top: 3px; }
nav.main-nav { display: flex; gap: 0; flex-wrap: nowrap; }
nav.main-nav a { font-family: var(--display); font-size: 12.5px; color: #bdbdbd; text-decoration: none; padding: 8px 8px; letter-spacing: .04em; white-space: nowrap; border-bottom: 3px solid transparent; }
nav.main-nav a:hover { color: #fff; }
nav.main-nav a.active { color: #fff; border-bottom-color: var(--hot); }
nav.main-nav a.nav-fb { color: #6aa6ff; }
.nav-toggle { display: none; background: none; border: 1px solid #444; color: #fff; padding: 6px 10px; font-size: 18px; cursor: pointer; }
@media (max-width: 1180px) {
  nav.main-nav { display: none; width: 100%; flex-direction: column; padding: 6px 0 10px; border-top: 1px solid #222; margin-top: 6px; }
  nav.main-nav.open { display: flex; }
  nav.main-nav a { font-size: 16px; padding: 10px 6px; border-bottom: 1px solid #1a1a1a; }
  nav.main-nav a.active { border-bottom-color: var(--hot); }
  .site-header .wrap { flex-wrap: wrap; }
  .nav-toggle { display: inline-block; }
}

/* ===== Buttons ===== */
.btn { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; letter-spacing: .05em; padding: 11px 18px; border: 2px solid #fff; color: #fff; background: transparent; cursor: pointer; text-decoration: none; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.btn.primary { background: var(--hot); border-color: var(--hot); color: #fff; box-shadow: 0 0 22px var(--hot-glow); }
.btn.ghost { background: transparent; }
.btn:hover { filter: brightness(1.12); }
.btn:disabled { opacity: .4; cursor: not-allowed; }

/* ===== Hero ===== */
.hero { padding: 60px 16px 52px; position: relative; }
.hero .wrap { max-width: var(--max); margin: 0 auto; }
.hero-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 30px; align-items: center; }
.hero .kicker { font-family: var(--hud); color: var(--hot); letter-spacing: .3em; font-size: 12px; margin-bottom: 10px; }
.hero h1 { font-size: clamp(42px, 6.2vw, 80px); line-height: .98; margin: 0 0 16px; color: #fff; text-shadow: 0 4px 0 #000, 0 0 30px rgba(0,0,0,.8); }
.hero h1 span { color: var(--hot); text-shadow: 0 4px 0 #000, 0 0 26px var(--hot-glow); }
.hero p.lead { font-size: 17px; max-width: 580px; color: #c8c8c8; margin: 0 0 26px; }
.hero .cta { display: flex; gap: 10px; flex-wrap: wrap; }
.hero-art { position: relative; justify-self: center; }
.hero-art img { width: 100%; max-width: 340px; display: block; filter: drop-shadow(0 20px 40px rgba(0,0,0,.8)) drop-shadow(0 0 30px var(--hot-glow)); }
.hero-art::before { content: ""; position: absolute; inset: -40px; background: radial-gradient(circle, rgba(255,255,255,.14), transparent 60%); z-index: -1; }
@media (max-width: 760px) { .hero { padding: 30px 16px 40px; } .hero-grid { grid-template-columns: 1fr; } .hero-art { order: -1; } .hero-art img { max-width: 190px; } .hero h1 { font-size: 44px; } }

/* ===== Duct tape labels (used by .tag) ===== */
.tag, .tape { display: inline-block; font-family: var(--hud); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: #111; background: var(--tape); padding: 3px 12px; transform: rotate(-2deg); box-shadow: 0 2px 4px rgba(0,0,0,.5); position: relative; margin-bottom: 12px; }
.tag::before, .tag::after, .tape::before, .tape::after { content: ""; position: absolute; top: 0; bottom: 0; width: 6px; background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,0,0,.18) 2px 3px); }
.tag::before, .tape::before { left: 0; } .tag::after, .tape::after { right: 0; }
.card:nth-child(even) .tag { transform: rotate(1.5deg); }

/* ===== Tools strip (camera modes) ===== */
.tools-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(0,0,0,.5); }
.tools-strip .wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1px; background: var(--line); border-left: 1px solid var(--line); border-right: 1px solid var(--line); padding: 0; counter-reset: mode; }
.tools-strip a { display: block; padding: 16px 14px 14px; text-decoration: none; color: #fff; background: #050505; counter-increment: mode; }
.tools-strip a::before { content: "M" counter(mode); display: block; font-family: var(--hud); font-size: 10px; color: var(--muted); letter-spacing: .2em; }
.tools-strip a:hover { background: #121212; }
.tools-strip b { display: block; font-family: var(--display); font-weight: 400; font-size: 16px; letter-spacing: .03em; color: #fff; margin: 3px 0 2px; text-transform: uppercase; }
.tools-strip a:first-child b { color: var(--hot); text-shadow: 0 0 14px var(--hot-glow); }
.tools-strip span { color: var(--muted); font-size: 12.5px; }

/* ===== Sections ===== */
section.block { padding: 52px 0; }
section.block.alt { background: rgba(0,0,0,.35); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.block h2 { font-size: 32px; margin: 0 0 8px; color: #fff; line-height: 1.05; }
.block h2::before { content: counter(sec, decimal-leading-zero) " "; counter-increment: sec; color: transparent; -webkit-text-stroke: 1.5px var(--hot); margin-right: 6px; }
.block h3 { font-size: 20px; margin: 22px 0 8px; color: #fff; }
.block .sub { color: var(--muted); margin: 0 0 24px; font-size: 16px; max-width: 800px; }
.grid { display: grid; gap: 16px; }
.grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
@media (min-width: 761px) { .grid.cols-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .grid.cols-3 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 899px) and (min-width: 761px) { .grid.cols-3 { grid-template-columns: 1fr; } }
.card { background: var(--card); border: 1px solid var(--line); padding: 20px; position: relative; }
.card:hover { border-color: var(--line-2); }
.card h3 { margin-top: 0; }
.card ul, .card ol { padding-left: 20px; margin: 8px 0; }
.card li { margin: 6px 0; }
.card li::marker { color: var(--hot); }
.card p, .card li { color: #cfcfcf; }

.callout { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--amber); padding: 14px 18px; margin: 18px 0; }
.callout.warn { border-left-color: var(--hot); box-shadow: inset 0 0 0 1px rgba(228,37,47,.25); }
.callout.ok { border-left-color: var(--green); }
.callout a { color: #fff; }

/* marker whiteboard */
.board { background: #f2f2ee; color: #111; border: 10px solid #d9d9d4; padding: 18px 24px; font-family: var(--marker); font-size: 23px; line-height: 1.3; position: relative; box-shadow: 0 10px 30px rgba(0,0,0,.6); transform: rotate(-.6deg); margin: 22px 0; }
.board strong, .board u, .board a { color: #111; font-weight: 400; text-decoration: none; border-bottom: 4px solid var(--hot); }
.board .by { display: block; font-size: 14px; margin-top: 10px; color: #444; }
.board::after { content: ""; position: absolute; right: 18px; bottom: 12px; width: 60px; height: 8px; background: #1a1a1a; border-radius: 4px; opacity: .75; }
@media (max-width: 600px) { .board { font-size: 19px; } }

/* steps as evidence log */
.steps { counter-reset: step; list-style: none; padding: 0; margin: 0; background: var(--card); border: 1px solid var(--line); }
.steps li { counter-increment: step; position: relative; display: block; padding: 16px 18px 16px 72px; border-bottom: 1px dashed #333; color: #cfcfcf; font-size: 14.5px; }
.steps li:last-child { border-bottom: 0; }
.steps li::before { content: counter(step, decimal-leading-zero); position: absolute; left: 18px; top: 19px; font-family: var(--hud); font-size: 14px; color: var(--hot); }
.steps li strong { display: block; color: #fff; font-size: 16px; margin-bottom: 3px; }

/* stats */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 20px 0; }
.stat { background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--hot); padding: 16px; text-align: center; }
.stat b { display: block; font-family: var(--display); font-weight: 400; font-size: 26px; color: #fff; line-height: 1; margin-bottom: 6px; text-transform: uppercase; }
.stat span { color: var(--muted); font-size: 13.5px; }

/* ===== Tables (statutes) ===== */
table { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--line); }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; font-size: 14.5px; }
th { background: #000; color: var(--hot); font-size: 13px; letter-spacing: .08em; position: static; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--card-2); }
td code { font-family: var(--hud); background: #000; color: #fff; border: 1px solid #333; padding: 1px 6px; font-size: 12.5px; white-space: nowrap; }
.pill { display: inline-block; font-family: var(--hud); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; padding: 2px 7px; border: 1px solid #444; color: #ccc; }
.pill.equip { border-color: #4a90e2; color: #8ec1ff; } .pill.moving { border-color: var(--amber); color: var(--amber); } .pill.license { border-color: var(--hot); color: #ff8a93; } .pill.safety { border-color: var(--green); color: var(--green); } .pill.procedure { border-color: #aaa; color: #ddd; }
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.toolbar input, .toolbar select { padding: 10px 12px; border: 1px solid #444; background: #000; color: #fff; font-size: 14px; min-width: 220px; font-family: var(--body); }
.toolbar input:focus, .toolbar select:focus { outline: none; border-color: var(--hot); }
.toolbar input { flex: 1; }
.count { color: var(--muted); font-size: 13px; font-family: var(--hud); }
@media (max-width: 700px) {
  table, thead, tbody, tr, td { display: block; width: 100%; }
  thead { display: none; }
  tr { border-bottom: 1px solid var(--line); padding: 10px 0; } tr:last-child { border-bottom: none; }
  td { border: none; padding: 3px 14px; } td:first-child { padding-top: 6px; } td:last-child { padding-bottom: 8px; color: var(--muted); }
  .toolbar input, .toolbar select { min-width: 0; width: 100%; }
}

/* ===== Accordion ===== */
details { background: var(--card); border: 1px solid var(--line); padding: 0 18px; margin-bottom: 8px; }
details summary { cursor: pointer; padding: 14px 0; font-size: 17px; color: #fff; list-style: none; display: flex; justify-content: space-between; align-items: center; }
details summary::after { content: "+"; font-family: var(--hud); font-size: 22px; color: var(--hot); }
details[open] summary::after { content: "-"; }
details[open] summary { border-bottom: 1px solid var(--line); margin-bottom: 10px; }
details .body { padding: 0 0 16px; color: #cfcfcf; }
details .body li::marker { color: var(--hot); }

/* ===== Footer ===== */
.site-footer { background: #000; color: var(--muted); padding: 34px 16px 56px; margin-top: 40px; font-size: 13.5px; border-top: 1px solid var(--line); }
.site-footer .wrap { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.site-footer a { color: #fff; }
.site-footer h4 { color: #fff; margin: 0 0 8px; font-size: 15px; }
.disclaimer { font-size: 12.5px; color: #777; }

/* ===== Facebook ===== */
.fb-grid { display: grid; grid-template-columns: minmax(0, 500px) 1fr; gap: 18px; align-items: start; }
.fb-frame { background: var(--card); border: 1px solid var(--line); box-shadow: 0 0 0 1px var(--hot), 0 0 24px var(--hot-glow); padding: 8px; position: relative; margin-top: 10px; }
.fb-frame::before { content: "Dispatch feed"; position: absolute; top: -12px; left: 14px; font-family: var(--hud); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: #111; background: var(--tape); padding: 3px 12px; transform: rotate(-2deg); box-shadow: 0 2px 4px rgba(0,0,0,.5); z-index: 1; }
.fb-frame iframe { display: block; width: 100%; max-width: 500px; }
.fb-side { display: grid; gap: 16px; }
.fb-side .btn { margin-top: 6px; }
@media (max-width: 760px) { .fb-grid { grid-template-columns: 1fr; } .fb-frame iframe { height: 600px; } }

/* ===== Music player ===== */
.ng-player { position: fixed; right: 18px; bottom: 34px; z-index: 90; width: 380px; max-width: calc(100vw - 24px); background: #0e0e0e; border: 1px solid #333; box-shadow: 0 16px 40px rgba(0,0,0,.7), 0 0 0 1px rgba(228,37,47,.15); color: #e6e6e6; font-family: var(--body); user-select: none; }
.ng-top { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px 0 14px; }
.ng-label { font-family: var(--hud); letter-spacing: .25em; font-size: 11px; color: var(--hot); text-transform: uppercase; }
.ng-main { display: flex; gap: 14px; padding: 8px 14px 14px; }
.ng-art { position: relative; width: 72px; height: 72px; flex: none; border-radius: 50%; overflow: hidden; background: #000; border: 2px solid #333; }
.ng-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ng-player.playing .ng-art img { animation: ngspin 12s linear infinite; }
@keyframes ngspin { to { transform: rotate(360deg); } }
.ng-eq { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); display: none; gap: 2px; align-items: flex-end; height: 14px; }
.ng-player.playing .ng-eq { display: flex; }
.ng-eq i { width: 3px; background: var(--hot); animation: ngbar .8s ease-in-out infinite; }
.ng-eq i:nth-child(2) { animation-delay: .2s; } .ng-eq i:nth-child(3) { animation-delay: .4s; }
@keyframes ngbar { 0%,100% { height: 4px; } 50% { height: 14px; } }
.ng-video { display: none; }
.ng-body { flex: 1; min-width: 0; }
.ng-title { font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 15px; }
.ng-artist { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 6px; }
.ng-seek { display: flex; align-items: center; gap: 8px; }
.ng-t { font-family: var(--hud); font-size: 11px; color: var(--muted); min-width: 30px; }
.ng-dur { text-align: right; }
.ng-range { -webkit-appearance: none; appearance: none; height: 4px; background: linear-gradient(90deg, var(--hot) var(--p, 0%), #333 var(--p, 0%)); outline: none; cursor: pointer; min-width: 0; }
.ng-pos { flex: 1; } .ng-vol { width: 70px; }
.ng-range::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: none; box-shadow: 0 0 0 2px #0e0e0e; }
.ng-range::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: none; }
.ng-ctrls { display: flex; align-items: center; gap: 4px; margin-top: 8px; }
.ng-ic { background: none; border: none; color: #bdbdbd; width: 30px; height: 30px; display: grid; place-items: center; cursor: pointer; padding: 0; }
.ng-ic svg { width: 18px; height: 18px; fill: currentColor; }
.ng-ic:hover { color: #fff; background: #222; }
.ng-ic.on { color: var(--hot); }
.ng-ic.big { width: 36px; height: 36px; background: #fff; color: #000; border-radius: 50%; }
.ng-ic.big:hover { background: var(--hot); color: #fff; }
.ng-ic.big svg { width: 20px; height: 20px; }
.ng-sep { width: 1px; height: 18px; background: #333; margin: 0 6px; }
.ng-player.collapsed { width: auto; }
.ng-player.collapsed .ng-main { display: none; }
.ng-player.collapsed .ng-top { padding: 6px 6px 6px 14px; gap: 10px; }
.ng-player.collapsed .ng-label::after { content: " \2022 " attr(data-title); }
@media (max-width: 480px) { .ng-player { right: 8px; bottom: 30px; width: calc(100vw - 16px); } .ng-main { gap: 10px; padding: 6px 12px 12px; } .ng-ctrls { gap: 2px; } .ng-sep { margin: 0 2px; } }

/* ===== Timer ===== */
.timer-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 860px) { .timer-grid { grid-template-columns: 1fr; } }
.timer-main { background: #000; border: 1px solid #333; position: relative; }
.timer-main::before { content: "\25CF REC"; position: absolute; top: 10px; left: 14px; font-family: var(--hud); font-size: 11px; color: var(--hot); animation: rec 1.1s steps(2) infinite; }
.timer-main::after { content: "BWC  CH1"; position: absolute; top: 10px; right: 14px; font-family: var(--hud); font-size: 11px; color: #ddd; }
.timer-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin: 14px 0 12px; }
.timer-elapsed { font-family: var(--hud); font-size: 76px; line-height: 1; color: #fff; letter-spacing: .02em; text-shadow: 0 0 2px #000, 2px 2px 0 #000, 0 0 18px rgba(255,255,255,.25); }
.timer-status { font-family: var(--hud); font-size: 12px; letter-spacing: .25em; text-transform: uppercase; color: var(--muted); }
.timer-status.live { color: var(--green); } .timer-status.live::before { content: "\25CF "; animation: rec 1s steps(2) infinite; }
.timer-status.ended { color: var(--amber); }
.timer-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.meta-row { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 8px; margin: 12px 0; }
@media (max-width: 600px) { .meta-row { grid-template-columns: 1fr; } }
.meta-row input, #t-out { width: 100%; padding: 10px 12px; border: 1px solid #444; background: #0a0a0a; color: #fff; font-family: var(--hud); font-size: 13px; }
.meta-row input:focus { outline: none; border-color: var(--hot); }
.t-events { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.t-events.disabled { opacity: .35; pointer-events: none; }
.t-btn { background: #121212; border: 1px solid #333; border-left: 4px solid #555; color: #fff; text-align: left; padding: 10px 12px; cursor: pointer; }
.t-btn:hover { background: #1a1a1a; border-color: #555; }
.t-btn.hot { border-left-color: var(--hot); } .t-btn.end { border-left-color: #fff; }
.t-btn b { display: block; font-family: var(--display); font-weight: 400; font-size: 13.5px; text-transform: uppercase; letter-spacing: .03em; }
.t-btn.hot b { color: var(--hot); }
.t-btn small { color: var(--muted); font-size: 11.5px; }
.t-list { list-style: none; padding: 0; margin: 0; max-height: 420px; overflow: auto; font-family: var(--hud); }
.t-list li { display: grid; grid-template-columns: 72px 62px 1fr 24px; gap: 8px; align-items: start; padding: 9px 0; border-bottom: 1px dashed #333; font-size: 13px; }
.t-list li.hot .t-label { color: #ff8a93; } .t-list li.mission .t-label { color: var(--amber); }
.t-clock { color: #fff; } .t-plus { color: var(--muted); }
.t-label em { display: block; font-style: normal; color: var(--muted); font-size: 12px; font-family: var(--body); }
.t-del { background: none; border: none; color: #666; cursor: pointer; font-size: 16px; } .t-del:hover { color: var(--hot); }
#t-out { margin-top: 8px; font-size: 12px; }

/* ===== Report templates ===== */
.tpl { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--hot); margin: 18px 0; padding: 16px 18px; }
.tpl-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.tpl-head h3 { margin: 0; }
.tpl .sub { margin: 6px 0 10px; }
.tpl pre { background: #000; border: 1px solid #2b2b2b; padding: 14px 16px; margin: 0; white-space: pre-wrap; font-family: var(--hud); font-size: 13px; line-height: 1.55; color: #ddd; max-height: 460px; overflow: auto; }
.tpl .btn { font-size: 13px; padding: 8px 14px; }

/* ===== Case law ===== */
.cases { display: grid; gap: 14px; }
.case { background: var(--card); border: 1px solid var(--line); border-left: 4px solid #3a3a3a; padding: 18px 20px; }
.case.il { border-left-color: var(--hot); }
.case header h3 { margin: 0 0 2px; }
.case-cite { color: var(--muted); font-size: 12.5px; font-family: var(--hud); margin-bottom: 8px; }
.case-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.case dl { margin: 0; display: grid; grid-template-columns: 130px 1fr; gap: 6px 14px; }
.case dt { font-family: var(--hud); letter-spacing: .15em; text-transform: uppercase; color: var(--amber); font-size: 12px; padding-top: 2px; }
.case dd { margin: 0; font-size: 14.5px; color: #cfcfcf; }
.case dd.road { color: #fff; }
@media (max-width: 600px) { .case dl { grid-template-columns: 1fr; } .case dt { margin-top: 6px; } }

/* ===== Chips (plates, graveyard) ===== */
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0 20px; }
.chip { background: #0d0d0d; border: 1px solid #333; color: #ccc; padding: 7px 12px; cursor: pointer; font-family: var(--display); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.chip:hover { border-color: #888; color: #fff; } .chip.on { background: var(--hot); border-color: var(--hot); color: #fff; }

/* ===== Plate returns ===== */
.pr { background: var(--card); border: 1px solid var(--line); border-top: 3px solid #444; padding: 20px; margin-bottom: 18px; }
.pr.lvl-low { border-top-color: #4a90e2; } .pr.lvl-mid { border-top-color: var(--amber); } .pr.lvl-high { border-top-color: var(--hot); } .pr.lvl-critical { border-top-color: var(--hot); box-shadow: 0 0 0 1px rgba(228,37,47,.4), 0 0 24px var(--hot-glow); } .pr.lvl-none { border-top-color: #666; }
.pr header h3 { margin: 6px 0 4px; font-size: 24px; }
.pr .means { color: var(--muted); margin: 0 0 14px; }
.pill.lvl { border-color: currentColor; }
.lvl-low .pill.lvl { color: #8ec1ff; } .lvl-mid .pill.lvl { color: var(--amber); } .lvl-high .pill.lvl, .lvl-critical .pill.lvl { color: #ff8a93; } .lvl-none .pill.lvl { color: #aaa; }
.pr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.pr-grid section { background: #0b0b0b; border: 1px solid #262626; padding: 12px 14px; }
.pr-grid h4 { margin: 0 0 6px; font-family: var(--hud); font-size: 12px; letter-spacing: .18em; color: var(--amber); }
.pr-grid h4 + p + h4 { margin-top: 10px; }
.pr-grid p { margin: 0; font-size: 14px; color: #cfcfcf; } .pr-grid ul { margin: 0; padding-left: 18px; font-size: 14px; color: #cfcfcf; } .pr-grid li { margin: 4px 0; } .pr-grid li::marker { color: var(--hot); }
.pr-grid section.pit { border-color: #4a2a2e; } .pr-grid .pit h4 { color: #ff8a93; }

/* ===== Graveyard ===== */
.grave { background: var(--card); border: 1px solid var(--line); border-left: 5px solid var(--hot); padding: 20px 22px; margin-bottom: 18px; position: relative; }
.grave.survived { border-left-color: var(--green); }
.grave header h3 { margin: 4px 0 2px; font-size: 24px; }
.stamp { position: absolute; right: 18px; top: 16px; font-family: var(--display); letter-spacing: .15em; font-size: 13px; padding: 4px 10px; border: 2px solid var(--hot); color: var(--hot); transform: rotate(-4deg); text-transform: uppercase; }
.grave.survived .stamp { border-color: var(--green); color: var(--green); }
.grave-body { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px; }
@media (max-width: 760px) { .grave-body { grid-template-columns: 1fr; } .stamp { position: static; display: inline-block; transform: none; margin-bottom: 6px; } }
.grave-body section { background: #0b0b0b; border: 1px solid #262626; padding: 12px 14px; }
.grave-body section:nth-child(2) { grid-row: span 2; }
.grave-body h4 { margin: 0 0 6px; font-family: var(--hud); font-size: 12px; letter-spacing: .18em; color: var(--amber); }
.grave-body p { margin: 0; font-size: 14px; color: #cfcfcf; }
.grave-body ol, .grave-body ul { margin: 0; padding-left: 18px; font-size: 14px; color: #cfcfcf; }
.grave-body li { margin: 5px 0; }
.grave-body ol li::marker { color: var(--muted); font-family: var(--hud); } .grave-body ul li::marker { color: var(--green); }
.grave-body section.broke { border-color: #4a2a2e; } .grave-body .broke h4 { color: #ff8a93; } .grave-body .broke p { color: #fff; }
.grave.survived .grave-body section.broke { border-color: #1f3d2c; } .grave.survived .broke h4 { color: var(--green); }
.grave-body section.saved { border-color: #1f3d2c; } .grave-body .saved h4 { color: var(--green); }

/* ===== RS builder ===== */
.rs-layout { display: grid; grid-template-columns: 1.1fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 900px) { .rs-layout { grid-template-columns: 1fr; } }
.rs-left, .rs-right, .rs-fields label, .rs-sticky { min-width: 0; }
.rs-layout > * { max-width: 100%; }
.rs-group { border: 1px solid var(--line); background: var(--card); padding: 10px 14px 12px; margin: 0 0 12px; }
.rs-group legend { font-family: var(--display); font-size: 15px; color: #fff; padding: 0 6px; text-transform: uppercase; letter-spacing: .04em; }
.rs-item { display: grid; grid-template-columns: 22px 1fr; gap: 4px 10px; align-items: start; padding: 7px 6px; border-left: 3px solid transparent; cursor: pointer; }
.rs-item:hover { background: #1a1a1a; }
.rs-item.on { border-left-color: var(--hot); background: #1a1111; }
.rs-item input[type=checkbox] { margin-top: 4px; accent-color: var(--hot); width: 16px; height: 16px; }
.rs-item.w0 { opacity: .55; cursor: default; }
.rs-label { font-size: 14.5px; color: #e6e6e6; }
.rs-w { color: var(--amber); font-size: 10px; letter-spacing: 2px; margin-left: 8px; vertical-align: middle; }
.rs-note { display: block; color: #ff8a93; font-size: 12px; margin-top: 2px; }
.rs-detail { grid-column: 2; width: 100%; padding: 7px 10px; border: 1px solid #444; background: #000; color: #fff; font-family: var(--body); font-size: 14px; }
.rs-detail:focus { outline: none; border-color: var(--hot); }
#rs-custom, #rs-out { width: 100%; padding: 10px 12px; border: 1px solid #444; background: #000; color: #fff; font-family: var(--body); font-size: 14px; line-height: 1.5; }
#rs-out { font-family: var(--hud); font-size: 13px; }
.rs-sticky { position: sticky; top: 104px; }
@media (max-width: 900px) { .rs-sticky { position: static; } }
.rs-meter-wrap { height: 10px; background: #222; border: 1px solid #333; overflow: hidden; }
.rs-bar { height: 100%; width: 0; transition: width .3s, background .3s; background: #555; }
.rs-bar.weak { background: var(--hot); } .rs-bar.mid { background: var(--amber); } .rs-bar.ok { background: var(--green); }
.rs-meter-text { font-size: 14px; color: var(--muted); margin: 8px 0 14px; min-height: 40px; }
.rs-fields { display: grid; gap: 10px; margin-bottom: 14px; }
.rs-fields label { display: grid; gap: 4px; font-size: 12px; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; font-family: var(--hud); }
.rs-fields input[type=text], .rs-fields select { padding: 8px 10px; border: 1px solid #444; background: #000; color: #fff; font-family: var(--body); font-size: 14px; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
.rs-fields label.rs-check { grid-template-columns: auto 1fr; align-items: center; color: #e6e6e6; text-transform: none; font-family: var(--body); font-size: 14px; letter-spacing: 0; }
.rs-fields input[type=checkbox] { accent-color: var(--hot); width: 16px; height: 16px; }

/* ===== Launcher (installed app) ===== */
body.launcher { min-height: 100vh; padding-bottom: env(safe-area-inset-bottom); }
body.launcher .site-header .wrap { justify-content: space-between; }
.net { font-family: var(--hud); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.net.on { color: var(--green); } .net.off { color: var(--amber); }
.launch { padding: 18px 16px 40px; }
.launch-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 700px) { .launch-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 699px) { .launch-grid .tile:last-child:nth-child(odd) { grid-column: 1 / -1; } }
.tile { display: block; background: var(--card); border: 1px solid var(--line); border-left: 4px solid #3a3a3a; padding: 20px 14px 16px; text-decoration: none; color: #fff; min-height: 104px; }
.tile:active { background: #222; }
.tile b { display: block; font-family: var(--display); font-weight: 400; font-size: 20px; letter-spacing: .03em; line-height: 1; margin-bottom: 6px; text-transform: uppercase; }
.tile span { color: var(--muted); font-size: 13px; }
.tile.hot { border-left-color: var(--hot); } .tile.hot b { color: var(--hot); text-shadow: 0 0 14px var(--hot-glow); }
.tile.dim { opacity: .75; }
.install-card { margin-top: 18px; }
.install-card .btn { margin: 6px 0 10px; }

/* ===== Print ===== */
@media print {
  .site-header, .site-footer, .hero .cta, .toolbar, .tools-strip, .chips, .nav-toggle, .rs-right, .timer-actions, .ng-player, .hud { display: none !important; }
  body { background: #fff; color: #000; } body::before, body::after { display: none; }
  .card, .steps, details, table, .case, .pr, .grave, .tpl { background: #fff; color: #000; border-color: #999; }
  strong, .block h2, .block h3, .steps li strong, .card p, .card li { color: #000; }
}