:root{
  --bg:#EDF0F3; --surface:#FFFFFF; --surface-2:#F5F8FA; --surface-3:#E9EEF2;
  --line:#D7DFE6; --line-strong:#BCC8D1;
  --ink:#111A21; --ink-2:#425260; --ink-3:#6E7F8C;
  --accent:#0D7C9E; --accent-2:#0A6482; --accent-soft:#DCEEF5; --accent-line:#9FCEDF;
  --warm:#9E6317; --warm-soft:#F8EAD6; --warm-line:#E0BE8B;
  --good:#1F6E50; --good-soft:#DCEDE4; --good-line:#9CCBB4;
  --bad:#A32E24; --bad-soft:#F9DFDC; --bad-line:#E5AFA8;
  --mute:#6E7F8C; --mute-soft:#E6EBEF; --mute-line:#C6D0D8;
  --shadow:0 1px 2px rgba(17,26,33,.06), 0 8px 24px -12px rgba(17,26,33,.18);
  --shadow-lg:0 2px 6px rgba(17,26,33,.08), 0 24px 60px -20px rgba(17,26,33,.35);
  --r:10px; --r-sm:6px;
  --sans:'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0E1317; --surface:#161C22; --surface-2:#1B232A; --surface-3:#212B33;
    --line:#28323A; --line-strong:#3C4A54;
    --ink:#E5EBF0; --ink-2:#A7B5C0; --ink-3:#7A8994;
    --accent:#4CB8DA; --accent-2:#7FD0E9; --accent-soft:#0F3543; --accent-line:#215B6F;
    --warm:#DFA055; --warm-soft:#3A2A13; --warm-line:#6B4E22;
    --good:#54B98A; --good-soft:#123326; --good-line:#245C44;
    --bad:#E5766D; --bad-soft:#3B1B18; --bad-line:#6E322C;
    --mute:#7A8994; --mute-soft:#212B33; --mute-line:#3C4A54;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
    --shadow-lg:0 2px 6px rgba(0,0,0,.5), 0 24px 60px -20px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --bg:#0E1317; --surface:#161C22; --surface-2:#1B232A; --surface-3:#212B33;
  --line:#28323A; --line-strong:#3C4A54;
  --ink:#E5EBF0; --ink-2:#A7B5C0; --ink-3:#7A8994;
  --accent:#4CB8DA; --accent-2:#7FD0E9; --accent-soft:#0F3543; --accent-line:#215B6F;
  --warm:#DFA055; --warm-soft:#3A2A13; --warm-line:#6B4E22;
  --good:#54B98A; --good-soft:#123326; --good-line:#245C44;
  --bad:#E5766D; --bad-soft:#3B1B18; --bad-line:#6E322C;
  --mute:#7A8994; --mute-soft:#212B33; --mute-line:#3C4A54;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  --shadow-lg:0 2px 6px rgba(0,0,0,.5), 0 24px 60px -20px rgba(0,0,0,.8);
}

*{box-sizing:border-box}
svg{width:15px; height:15px; flex:none}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0; text-wrap:balance; font-weight:600; letter-spacing:-.01em}
button,input,select,textarea{font:inherit; color:inherit}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:3px}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums}
.num{font-variant-numeric:tabular-nums}

/* ---------- Gerüst ---------- */
#app{display:grid; grid-template-columns:232px minmax(0,1fr); min-height:100vh}
.rail{
  background:var(--surface); border-right:1px solid var(--line);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh;
}
.brand{padding:20px 20px 16px; border-bottom:1px solid var(--line)}
.brand .wm{
  font-size:19px; font-weight:700; font-stretch:118%; letter-spacing:.01em;
  display:flex; align-items:center; gap:9px;
}
.brand .wm i{
  width:9px; height:9px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft); flex:none;
}
.brand .sub{font-size:11px; color:var(--ink-3); margin-top:3px; letter-spacing:.04em; text-transform:uppercase; font-weight:500}
.nav{padding:10px; display:flex; flex-direction:column; gap:1px; overflow-y:auto; flex:1}
.nav button{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  background:none; border:0; padding:8px 10px; border-radius:var(--r-sm);
  color:var(--ink-2); cursor:pointer; font-weight:500;
}
.nav button:hover{background:var(--surface-2); color:var(--ink)}
.nav button[aria-current="true"]{background:var(--accent-soft); color:var(--accent-2); font-weight:600}
.nav svg{width:17px; height:17px; flex:none; stroke-width:1.7}
.nav .cnt{margin-left:auto; font-size:11px; color:var(--ink-3); font-family:var(--mono)}
.nav button[aria-current="true"] .cnt{color:var(--accent-2)}
.railfoot{padding:12px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:8px}
.dbchip{
  display:flex; align-items:center; gap:7px; font-size:11px; color:var(--ink-3);
  padding:6px 8px; border-radius:var(--r-sm); background:var(--surface-2);
}
.dbchip i{width:6px;height:6px;border-radius:50%;background:var(--mute);flex:none}
.dbchip[data-s="ok"] i{background:var(--good)}
.dbchip[data-s="off"] i{background:var(--warm)}
.dbchip[data-s="err"] i{background:var(--bad)}

main{min-width:0; display:flex; flex-direction:column}
.topbar{
  position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
  padding:14px 26px; display:flex; align-items:center; gap:14px; flex-wrap:nowrap;
}
.topbar h1{font-size:17px; font-stretch:112%; font-weight:600; flex:none; white-space:nowrap}
.topbar .hint{
  font-size:12px; color:var(--ink-3); flex:0 1 auto; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.topbar #viewactions{flex:none; flex-wrap:nowrap}
.spacer{flex:1}
.today{font-family:var(--mono); font-size:11.5px; color:var(--ink-3); white-space:nowrap; flex:none}
/* Ein auf drei Zeichen gekürzter Untertitel hilft niemandem – dann lieber weg */
@media (max-width:1150px){ .topbar .hint{display:none} }
@media (max-width:840px){ .topbar .today{display:none} }
.wrap{padding:22px 26px 80px; max-width:1460px; width:100%}

/* ---------- Bausteine ---------- */
.btn{
  display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:var(--r-sm);
  border:1px solid var(--line-strong); background:var(--surface); color:var(--ink);
  cursor:pointer; font-weight:500; font-size:13px; white-space:nowrap;
}
.btn:hover{background:var(--surface-2); border-color:var(--ink-3)}
.btn svg{width:15px;height:15px;stroke-width:1.8}
.btn.primary{background:var(--accent); border-color:var(--accent); color:#fff}
.btn.primary:hover{background:var(--accent-2); border-color:var(--accent-2)}
.btn.danger{color:var(--bad); border-color:var(--bad-line)}
.btn.danger:hover{background:var(--bad-soft)}
.btn.sm{padding:4px 8px; font-size:12px}
.btn.ghost{border-color:transparent; background:none}
.btn.ghost:hover{background:var(--surface-2); border-color:var(--line)}
.btn:disabled{opacity:.45; cursor:not-allowed}

.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow)}
.card-h{padding:13px 16px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:10px}
.card-h h2{font-size:12px; text-transform:uppercase; letter-spacing:.07em; font-weight:600; color:var(--ink-2); font-stretch:106%}
.card-b{padding:16px}

.eyebrow{font-size:11px; text-transform:uppercase; letter-spacing:.08em; font-weight:600; color:var(--ink-3); font-stretch:106%}

.chip{
  display:inline-flex; align-items:center; gap:5px; padding:2px 8px; border-radius:100px;
  font-size:11.5px; font-weight:600; border:1px solid; white-space:nowrap; line-height:1.6;
}
.chip i{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.c-good{color:var(--good); background:var(--good-soft); border-color:var(--good-line)}
.c-warm{color:var(--warm); background:var(--warm-soft); border-color:var(--warm-line)}
.c-bad{color:var(--bad); background:var(--bad-soft); border-color:var(--bad-line)}
.c-acc{color:var(--accent-2); background:var(--accent-soft); border-color:var(--accent-line)}
.c-mute{color:var(--mute); background:var(--mute-soft); border-color:var(--mute-line)}

.grid{display:grid; gap:16px}
.stack{display:flex; flex-direction:column; gap:16px}
.row{display:flex; align-items:center; gap:10px; flex-wrap:wrap}

/* ---------- Kennzahlen ---------- */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); gap:12px}
.kpis.dense{grid-template-columns:repeat(auto-fit,minmax(142px,1fr)); gap:10px}
.kpis.dense .v{font-size:25px}
.kpi{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:13px 15px; position:relative; overflow:hidden; box-shadow:var(--shadow);
  text-align:left; cursor:pointer; font:inherit; color:inherit; display:block; width:100%;
}
.kpi:hover{border-color:var(--line-strong)}
.kpi::before{content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--mute)}
.kpi[data-t="good"]::before{background:var(--good)}
.kpi[data-t="warm"]::before{background:var(--warm)}
.kpi[data-t="bad"]::before{background:var(--bad)}
.kpi[data-t="acc"]::before{background:var(--accent)}
.kpi .v{font-size:29px; font-weight:700; font-stretch:112%; line-height:1.05; font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.kpi .l{font-size:11.5px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.06em; font-weight:600; margin-top:3px}
.kpi .d{font-size:11.5px; color:var(--ink-3); margin-top:5px; font-family:var(--mono)}

/* ---------- Auslastung ---------- */
.bars{display:flex; flex-direction:column; gap:11px}
.barrow{display:grid; grid-template-columns:118px minmax(0,1fr) 52px; align-items:center; gap:11px}
.barrow .nm{font-size:12.5px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bar{height:9px; border-radius:100px; background:var(--surface-3); display:flex; overflow:hidden}
.bar span{display:block; height:100%}
.bar .s-good{background:var(--good)} .bar .s-warm{background:var(--warm)}
.bar .s-bad{background:var(--bad)} .bar .s-acc{background:var(--accent)}
.barrow .qt{font-size:11.5px; color:var(--ink-3); font-family:var(--mono); text-align:right}
.legend{display:flex; gap:14px; flex-wrap:wrap; font-size:11.5px; color:var(--ink-3); margin-top:14px; padding-top:13px; border-top:1px solid var(--line)}
.legend span{display:inline-flex; align-items:center; gap:5px}
.legend i{width:8px;height:8px;border-radius:2px;flex:none}

/* ---------- Shooting-Board ("Spot") ---------- */
.board{display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:14px}
.daygroup{display:block}
.daygroup + .daygroup{margin-top:26px}
.daysep{display:flex; align-items:baseline; gap:11px; margin:0 0 12px;
  position:sticky; top:52px; z-index:6; background:var(--bg); padding:7px 0 8px}
.daysep .wt{font-size:11px; text-transform:uppercase; letter-spacing:.09em; font-weight:600;
  color:var(--ink-3); font-stretch:106%; white-space:nowrap}
.daysep .d{font-size:14px; font-weight:600; font-stretch:108%; white-space:nowrap;
  font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.daysep .mark{font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.07em;
  color:var(--accent-2); background:var(--accent-soft); border:1px solid var(--accent-line);
  border-radius:100px; padding:1px 7px; white-space:nowrap}
.daysep .rule{flex:1; height:1px; background:var(--line); align-self:center}
.daysep .cnt{font-size:11.5px; color:var(--ink-3); font-family:var(--mono); white-space:nowrap}
.daysep.heute .wt,.daysep.heute .d{color:var(--accent-2)}
.daysep.heute .rule{background:linear-gradient(90deg,var(--accent-line),var(--line) 200px)}
.sh{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column;
  text-align:left; font:inherit; color:inherit; cursor:pointer; width:100%; padding:0;
}
.sh:hover{border-color:var(--line-strong); box-shadow:var(--shadow-lg)}
.sh .stripe{height:3px; background:var(--mute)}
.sh[data-p="laufend"] .stripe{background:var(--warm)}
.sh[data-p="geplant"] .stripe{background:var(--accent)}
.sh[data-p="abgeschlossen"] .stripe{background:var(--good)}
.sh[data-p="ueberfaellig"] .stripe{background:var(--bad)}
.sh-h{padding:13px 15px 11px; display:flex; flex-direction:column; gap:6px}
.sh-h .t{font-size:15px; font-weight:600; font-stretch:106%; letter-spacing:-.01em}
.sh-h .m{font-size:12px; color:var(--ink-3); display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.sh-b{padding:0 15px 13px; display:flex; flex-direction:column; gap:9px}
.who{display:flex; align-items:center; gap:7px; font-size:12.5px}
.av{
  width:22px;height:22px;border-radius:50%;flex:none; display:grid; place-items:center;
  font-size:9.5px; font-weight:700; background:var(--accent-soft); color:var(--accent-2);
  font-family:var(--mono); letter-spacing:-.02em;
}
.av.sm{width:19px;height:19px;font-size:8.5px}
.packs{display:flex; flex-wrap:wrap; gap:5px}
.pk{
  display:inline-flex; align-items:center; gap:5px; font-size:11.5px; padding:2px 7px;
  border-radius:var(--r-sm); background:var(--surface-2); border:1px solid var(--line);
  color:var(--ink-2);
}
.pk.out{background:var(--warm-soft); border-color:var(--warm-line); color:var(--warm)}
.pk.miss{background:var(--bad-soft); border-color:var(--bad-line); color:var(--bad)}
.sh-f{
  margin-top:auto; padding:9px 15px; border-top:1px solid var(--line); background:var(--surface-2);
  display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--ink-3);
}

/* ---------- Warnungen ---------- */
.warns{display:flex; flex-direction:column}
.warn{
  display:flex; gap:11px; padding:11px 16px; border-bottom:1px solid var(--line);
  align-items:flex-start; text-align:left; background:none; border-left:0; border-right:0; border-top:0;
  width:100%; font:inherit; color:inherit; cursor:pointer;
}
.warn:last-child{border-bottom:0}
.warn:hover{background:var(--surface-2)}
.warn .ic{width:19px;height:19px;flex:none; margin-top:1px}
.warn .ic svg{width:19px;height:19px}
.warn[data-s="bad"] .ic{color:var(--bad)} .warn[data-s="warm"] .ic{color:var(--warm)}
.warn[data-s="acc"] .ic{color:var(--accent)}
.warn .tx{font-size:13px; min-width:0}
.warn .tx b{font-weight:600}
.warn .tx small{display:block; color:var(--ink-3); font-size:11.5px; margin-top:1px}

/* ---------- Tabellen ---------- */
.tablewrap{overflow-x:auto}
table{width:100%; border-collapse:collapse; font-size:13px}
thead th{
  text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ink-3); font-weight:600; padding:9px 12px; border-bottom:1px solid var(--line);
  white-space:nowrap; position:sticky; top:0; background:var(--surface); z-index:2;
}
thead th.sortable{cursor:pointer; user-select:none}
thead th.sortable:hover{color:var(--ink)}
thead th .ar{opacity:.5; font-size:9px}
tbody td{padding:9px 12px; border-bottom:1px solid var(--line); vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--surface-2)}
tbody tr.clickable{cursor:pointer}
td.stripe-cell{padding:0; width:3px}
td.stripe-cell i{display:block; width:3px; height:38px; background:var(--mute)}
td.stripe-cell i[data-t="good"]{background:var(--good)}
td.stripe-cell i[data-t="warm"]{background:var(--warm)}
td.stripe-cell i[data-t="bad"]{background:var(--bad)}
td.stripe-cell i[data-t="acc"]{background:var(--accent)}
.nm2{font-weight:500}
.sub2{font-size:11.5px; color:var(--ink-3)}
.acts{display:flex; gap:4px; justify-content:flex-end; opacity:.35}
tr:hover .acts{opacity:1}
.iconbtn{
  border:1px solid transparent; background:none; border-radius:var(--r-sm); padding:4px;
  cursor:pointer; color:var(--ink-3); display:grid; place-items:center;
}
.iconbtn:hover{background:var(--surface-3); color:var(--ink); border-color:var(--line)}
.iconbtn svg{width:15px;height:15px;stroke-width:1.8}
.iconbtn.danger:hover{color:var(--bad); border-color:var(--bad-line); background:var(--bad-soft)}

/* ---------- Filterleiste ---------- */
.filters{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:14px}
.search{position:relative; flex:1; min-width:190px; max-width:340px}
.search svg{position:absolute; left:9px; top:50%; transform:translateY(-50%); width:15px;height:15px; color:var(--ink-3); stroke-width:1.8}
input[type="text"],input[type="password"],input[type="email"],input[type="time"],
input[type="date"],input[type="number"],select,textarea{
  width:100%; padding:7px 10px; border:1px solid var(--line-strong); border-radius:var(--r-sm);
  background:var(--surface); font-size:13px;
}
input[type="text"]:focus,input[type="password"]:focus,input[type="email"]:focus,
input[type="time"]:focus,input[type="date"]:focus,select:focus,textarea:focus{border-color:var(--accent); outline:none; box-shadow:0 0 0 3px var(--accent-soft)}
.search input{padding-left:30px}
select.mini{width:auto; min-width:118px; padding:7px 26px 7px 10px; cursor:pointer;
  appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 14px) 52%, calc(100% - 9px) 52%; background-size:5px 5px,5px 5px; background-repeat:no-repeat;
}
.segs{display:flex; border:1px solid var(--line-strong); border-radius:var(--r-sm); overflow:hidden}
.segs button{border:0; background:var(--surface); padding:7px 11px; font-size:12.5px; cursor:pointer; color:var(--ink-2); border-right:1px solid var(--line)}
.segs button:last-child{border-right:0}
.segs button[aria-pressed="true"]{background:var(--accent-soft); color:var(--accent-2); font-weight:600}
.segs button:hover:not([aria-pressed="true"]){background:var(--surface-2)}

.empty{padding:44px 20px; text-align:center; color:var(--ink-3)}
.empty svg{width:34px;height:34px;stroke-width:1.3; margin-bottom:10px; opacity:.5}
.empty p{margin:0 0 4px; font-size:14px; color:var(--ink-2); font-weight:500}
.empty small{font-size:12.5px}

/* ---------- Modal / Drawer ---------- */
.ovl{
  position:fixed; inset:0; background:rgba(10,16,20,.5); z-index:100;
  display:flex; align-items:flex-start; justify-content:center; padding:38px 18px;
  overflow-y:auto; backdrop-filter:blur(2px);
}
.modal{
  background:var(--surface); border:1px solid var(--line); border-radius:12px; width:100%;
  max-width:620px; box-shadow:var(--shadow-lg); overflow:hidden; margin:auto 0;
}
.modal.wide{max-width:880px}
.mh{padding:16px 20px; border-bottom:1px solid var(--line); display:flex; align-items:flex-start; gap:12px}
.mh h3{font-size:16px; font-stretch:108%}
.mh .ic svg{width:22px;height:22px}
.mh .msub{font-size:12px; color:var(--ink-3); margin-top:2px}
.mb{padding:20px; max-height:min(66vh,660px); overflow-y:auto}
.mf{padding:13px 20px; border-top:1px solid var(--line); display:flex; gap:8px; justify-content:flex-end; background:var(--surface-2); flex-wrap:wrap}
.mf .spacer{flex:1}
.fgrid{display:grid; grid-template-columns:1fr 1fr; gap:13px}
.f{display:flex; flex-direction:column; gap:4px}
.f.span2{grid-column:1/-1}
.f label{font-size:11.5px; font-weight:600; color:var(--ink-2); text-transform:uppercase; letter-spacing:.05em}
.f .hint2{font-size:11.5px; color:var(--ink-3)}
.f textarea{min-height:64px; resize:vertical; font-family:inherit}
.f input.mono,.f select.mono{font-family:var(--mono)}
.checks{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:6px;
  max-height:150px; overflow-y:auto; border:1px solid var(--line-strong); border-radius:var(--r-sm); padding:9px;
}
.checks label{
  display:flex; align-items:center; gap:7px; font-size:12.5px; cursor:pointer; text-transform:none;
  letter-spacing:0; font-weight:400; color:var(--ink); padding:3px 4px; border-radius:4px;
}
.checks label:hover{background:var(--surface-2)}
.checks input{accent-color:var(--accent); width:14px;height:14px; flex:none}
.err{color:var(--bad); font-size:12px; margin-top:2px}

/* ---------- Detail-Abschnitte ---------- */
.dl{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:13px 18px}
.dl div{min-width:0}
.dl dt{font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3); font-weight:600; margin-bottom:2px}
.dl dd{margin:0; font-size:13.5px; overflow-wrap:anywhere}
.sect{border-top:1px solid var(--line); margin-top:18px; padding-top:16px}
.sect > h4{font-size:11.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-3); margin-bottom:11px; display:flex; align-items:center; gap:9px}
.sect > h4 .spacer{flex:1}

.tl{position:relative; padding-left:19px; display:flex; flex-direction:column; gap:13px}
.tl::before{content:''; position:absolute; left:4px; top:5px; bottom:5px; width:1px; background:var(--line)}
.tl .ev{position:relative}
.tl .ev::before{
  content:''; position:absolute; left:-19px; top:5px; width:9px;height:9px; border-radius:50%;
  background:var(--surface); border:2px solid var(--line-strong);
}
.tl .ev[data-s="good"]::before{border-color:var(--good)}
.tl .ev[data-s="warm"]::before{border-color:var(--warm)}
.tl .ev[data-s="bad"]::before{border-color:var(--bad)}
.tl .ev[data-s="acc"]::before{border-color:var(--accent)}
.tl .ev .ts{font-size:11px; color:var(--ink-3); font-family:var(--mono)}
.tl .ev .tt{font-size:13px; margin-top:1px}

.pool{border:1px solid var(--line); border-radius:var(--r); background:var(--surface); overflow:hidden; box-shadow:var(--shadow)}
.poolhead{display:flex; align-items:center; gap:10px; width:100%; padding:12px 16px; background:none;
  border:0; cursor:pointer; font:inherit; color:inherit; text-align:left}
.poolhead:hover{background:var(--surface-2)}
.poolhead .chev{transition:transform .16s ease; color:var(--ink-3)}
.poolhead[aria-expanded="true"] .chev{transform:rotate(90deg)}
.poolhead .t{font-size:13px; font-weight:600}
.poolhead .s{font-size:12px; color:var(--ink-3)}
.poolbody{border-top:1px solid var(--line); padding:14px 16px; display:flex; flex-direction:column; gap:18px}
.poolgrp > .eyebrow{display:block; margin-bottom:8px}
.poolrow{display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--line);
  border-radius:var(--r-sm); background:var(--surface-2); flex-wrap:wrap}
.poolrow .nm{flex:1; min-width:150px; font-weight:500; font-size:13px}
.veh{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px}
.plate{
  display:inline-flex; align-items:center; font-family:var(--mono); font-weight:600; font-size:13px;
  border:2px solid var(--ink-2); border-radius:4px; padding:2px 9px; letter-spacing:.06em;
  background:var(--surface); color:var(--ink);
}
.plate::before{
  content:'D'; font-size:8px; background:var(--accent-2); color:#fff; margin:-2px 8px -2px -9px;
  padding:5px 3px; align-self:stretch; display:flex; align-items:flex-end; justify-content:center; border-radius:2px 0 0 2px;
}
.toast{
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%); z-index:200;
  background:var(--ink); color:var(--bg); padding:10px 16px; border-radius:100px;
  font-size:13px; font-weight:500; box-shadow:var(--shadow-lg); display:flex; align-items:center; gap:8px;
  animation:pop .2s ease-out;
}
@keyframes pop{from{opacity:0; transform:translate(-50%,8px)}to{opacity:1; transform:translate(-50%,0)}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001s !important; transition-duration:.001s !important}}

.banner{
  display:flex; gap:11px; align-items:flex-start; padding:12px 15px; border-radius:var(--r);
  border:1px solid var(--warm-line); background:var(--warm-soft); color:var(--warm); font-size:13px;
}
.banner svg{width:18px;height:18px;flex:none; margin-top:1px; stroke-width:1.8}
.banner > span:first-child{display:flex;flex:none}
.banner b{display:block; font-weight:600}
.banner span{color:var(--ink-2); display:block; margin-top:2px}

@media (max-width:980px){
  #app{grid-template-columns:1fr}
  .rail{position:static; height:auto; border-right:0; border-bottom:1px solid var(--line)}
  .nav{flex-direction:row; overflow-x:auto; padding:8px 10px; gap:4px}
  .nav button{width:auto; white-space:nowrap}
  .nav .cnt{display:none}
  .railfoot{display:none}
  .brand{padding:14px 16px 12px}
  .wrap{padding:18px 16px 60px}
  .topbar{padding:12px 16px}
  .fgrid{grid-template-columns:1fr}
}