/* nextstep – Stylesheet
   Ein Token-Set, zwei Themes. Light = warmes Papier, Dark = Tinte.
   Statusfarben sind nach Phase gruppiert (Vorbereitung / laufend / Erfolg / kritisch / beendet). */

:root{
  color-scheme:light;
  --bg:#f4f3ee; --s1:#fbfaf7; --s2:#ffffff; --s3:#efede6; --s4:#e6e3da;
  --line:#e2dfd5; --line-2:#d2cfc4; --line-3:#bdb9ac;
  --ink:#1b1c1a; --ink-2:#4d4f4a; --ink-3:#7d7f78; --ink-4:#a6a79f;
  --accent:#0e7c66; --accent-h:#0b6a57; --accent-ink:#ffffff; --accent-soft:#dcefe8; --accent-soft-2:#c4e4d9;
  --good:#0ca30c; --warn:#b87400; --serious:#d1633a; --crit:#c9302c; --info:#2a78d6;
  --p0:#c9302c; --p1:#d98b00; --p2:#2a78d6; --p3:#7d7f78; --px:#b9b6aa;
  --sh-1:0 1px 2px rgba(20,18,10,.06); --sh-2:0 6px 20px rgba(20,18,10,.10); --sh-3:0 20px 60px rgba(20,18,10,.18);
  --r-s:6px; --r-m:10px; --r-l:14px; --r-xl:20px;
  --font:"Inter var","Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"JetBrains Mono","SF Mono",Menlo,Consolas,monospace;
  --rail:236px; --drawer:560px;
  --ease:cubic-bezier(.2,.8,.2,1);
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#111214; --s1:#17181b; --s2:#1c1d21; --s3:#232428; --s4:#2a2b30;
  --line:#26272c; --line-2:#33343a; --line-3:#45464d;
  --ink:#ececea; --ink-2:#b5b6b1; --ink-3:#83847f; --ink-4:#5c5d59;
  --accent:#2fbf9f; --accent-h:#49cfb1; --accent-ink:#0b1f1a; --accent-soft:#173a33; --accent-soft-2:#1e4a41;
  --good:#3fbf3f; --warn:#e2a11b; --serious:#ec835a; --crit:#e05a56; --info:#3987e5;
  --p0:#e05a56; --p1:#e2a11b; --p2:#3987e5; --p3:#83847f; --px:#4a4b50;
  --sh-1:0 1px 2px rgba(0,0,0,.4); --sh-2:0 6px 20px rgba(0,0,0,.45); --sh-3:0 24px 70px rgba(0,0,0,.6);
}
/* Statusfarben: Vorbereitung grau/violett · laufend blau/cyan/gelb · Erfolg grün · kritisch rot · beendet taupe */
:root{
  --st-Entwurf:#8b8d86; --st-Backlog:#7c6fd9; --st-Beworben:#2a78d6; --st-Interview:#d98b00; --st-CaseStudy:#b9791c;
  --st-Warte:#1097a8; --st-Angebot:#5aa312; --st-Zusage:#0ca30c; --st-Absage:#c9302c; --st-Ghosted:#6f7169; --st-Zurueck:#a3805a;
}
:root[data-theme="dark"]{
  --st-Entwurf:#83847f; --st-Backlog:#9a8ff0; --st-Beworben:#4b95ee; --st-Interview:#e2a11b; --st-CaseStudy:#d59a3a;
  --st-Warte:#22b8cc; --st-Angebot:#8ccf3a; --st-Zusage:#3fbf3f; --st-Absage:#e05a56; --st-Ghosted:#7f817a; --st-Zurueck:#c39a6c;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;height:100%}
body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font:14px/1.5 var(--font);
  font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--accent)}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--accent-soft-2)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-s)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
[hidden]{display:none!important}
kbd{font:600 11px/1 var(--mono);background:var(--s3);border:1px solid var(--line-2);border-bottom-width:2px;border-radius:5px;padding:2px 5px;color:var(--ink-2)}
hr{border:0;border-top:1px solid var(--line);margin:16px 0}
h1,h2,h3{margin:0;font-weight:650;letter-spacing:-.01em}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:var(--r-m);border:1px solid var(--line-2);
  background:var(--s2);color:var(--ink);font-weight:550;cursor:pointer;line-height:1.2;white-space:nowrap;
  transition:background .15s,border-color .15s,transform .1s,box-shadow .15s;box-shadow:var(--sh-1)}
.btn:hover{background:var(--s3);border-color:var(--line-3)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{background:var(--accent-h);border-color:var(--accent-h)}
.btn.ghost{background:transparent;border-color:transparent;box-shadow:none;color:var(--ink-2)}
.btn.ghost:hover{background:var(--s3);color:var(--ink)}
.btn.soft{background:var(--accent-soft);border-color:transparent;color:var(--accent);box-shadow:none}
.btn.soft:hover{background:var(--accent-soft-2)}
.btn.danger{color:var(--crit);border-color:color-mix(in srgb,var(--crit) 35%,transparent);background:color-mix(in srgb,var(--crit) 8%,transparent);box-shadow:none}
.btn.danger:hover{background:color-mix(in srgb,var(--crit) 16%,transparent)}
.btn.sm{padding:5px 9px;font-size:12.5px;border-radius:8px}
.btn.xs{padding:3px 7px;font-size:11.5px;border-radius:6px;font-weight:600}
.btn.icon{padding:8px;width:36px;justify-content:center}
.btn.sm.icon{padding:5px;width:28px}
.btn:disabled{opacity:.5;cursor:default;transform:none}
.btn svg{width:16px;height:16px;flex:none}
.btn.sm svg{width:14px;height:14px}

/* ---------- Inputs ---------- */
.input,input.input,select.input,textarea.input{width:100%;background:var(--s2);border:1px solid var(--line-2);border-radius:var(--r-m);
  padding:8px 11px;color:var(--ink);transition:border-color .15s,box-shadow .15s;min-width:0}
.input:hover{border-color:var(--line-3)}
.input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.input::placeholder{color:var(--ink-4)}
textarea.input{resize:vertical;min-height:80px;line-height:1.5}
select.input{appearance:none;-webkit-appearance:none;padding-right:30px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center}
input[type=date].input{min-height:38px}
.field{display:flex;flex-direction:column;gap:5px}
.field>span{font-size:11.5px;font-weight:600;color:var(--ink-3);letter-spacing:.02em;text-transform:uppercase}
.field.full{grid-column:1/-1}
.seg{display:inline-flex;background:var(--s3);border:1px solid var(--line);border-radius:var(--r-m);padding:3px;gap:2px}
.seg button{background:transparent;border:0;border-radius:7px;padding:5px 10px;font-size:12.5px;font-weight:550;color:var(--ink-3);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.seg button:hover{color:var(--ink)}
.seg button.on{background:var(--s2);color:var(--ink);box-shadow:var(--sh-1)}
.seg svg{width:14px;height:14px}

/* ---------- Shell ---------- */
.shell{display:grid;grid-template-columns:var(--rail) 1fr;min-height:100vh}
.rail{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;padding:18px 14px;border-right:1px solid var(--line);background:var(--s1)}
.brand{display:flex;align-items:center;gap:10px;padding:4px 8px 18px}
.brand .mark{width:30px;height:30px;border-radius:9px;background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:800;font-size:15px;letter-spacing:-.04em}
.brand b{font-size:17px;letter-spacing:-.02em;font-weight:700}
.brand small{display:block;font-size:12px;color:var(--ink-3);margin-top:-1px;font-weight:550;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.auth .brand small{text-transform:uppercase;letter-spacing:.06em;font-size:11px;font-weight:600}
.nav{display:flex;flex-direction:column;gap:2px}
.nav a{display:flex;align-items:center;gap:10px;padding:9px 10px;font-size:13.5px;white-space:nowrap;min-width:0;border-radius:var(--r-m);color:var(--ink-2);text-decoration:none;font-weight:550;transition:background .12s,color .12s}
.nav a svg{width:17px;height:17px;opacity:.75;flex:none}
.nav a>span:not(.cnt){overflow:hidden;text-overflow:ellipsis}
.nav a:hover{background:var(--s3);color:var(--ink)}
.nav a.on{background:var(--accent-soft);color:var(--accent)}
.nav a.on svg{opacity:1}
.nav a .cnt{margin-left:auto;font-size:11.5px;font-weight:700;background:var(--s4);color:var(--ink-2);border-radius:999px;padding:1px 8px}
.nav a.on .cnt{background:var(--accent);color:var(--accent-ink)}
.rail-sec{margin-top:22px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4);padding:0 10px 6px}
.rail-foot{margin-top:auto;display:flex;flex-direction:column;gap:6px;padding-top:12px;border-top:1px solid var(--line)}
.rail-user{display:flex;align-items:center;gap:10px;padding:6px 8px;font-size:13px}
.avatar{width:28px;height:28px;border-radius:50%;background:var(--s4);color:var(--ink-2);display:grid;place-items:center;font-weight:700;font-size:11px;flex:none}
.rail-user .name{font-weight:600;line-height:1.2}
.nav a kbd{margin-left:auto}

.main{min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;padding:14px 28px;
  background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.topbar h1{font-size:19px}
.topbar .sub{color:var(--ink-3);font-size:12.5px;margin-left:4px}
.topbar .grow{flex:1}
.search{position:relative;width:min(380px,40vw)}
.search .input{padding-left:34px;padding-right:44px;background:var(--s2)}
.search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--ink-4);pointer-events:none}
.search kbd{position:absolute;right:8px;top:50%;transform:translateY(-50%)}
.content{padding:22px 28px 80px;flex:1;min-width:0}

/* ---------- Toolbar: Ansichten + Filter ---------- */
.toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:16px}
.toolbar .grow{flex:1}
.toolbar .count{font-size:12.5px;color:var(--ink-3);font-weight:550}
.seg.views button{padding:5px 11px}
.seg.views button em{font-style:normal;margin-left:6px;background:var(--warn);color:#fff;border-radius:999px;padding:0 6px;font-size:10.5px;font-weight:700}
.btn .cnt{font-style:normal;background:var(--accent);color:var(--accent-ink);border-radius:999px;padding:0 6px;font-size:11px;font-weight:700;margin-left:2px}
.fchip{display:inline-flex;align-items:center;gap:2px;padding:2px 4px 2px 9px;border-radius:999px;background:var(--s2);border:1px solid var(--line-2);font-size:12px}
.fchip .k{color:var(--ink-3);font-weight:600;margin-right:4px}
.fchip .v{display:inline-flex;align-items:center;gap:3px;border:0;background:var(--accent-soft);color:var(--accent);border-radius:999px;padding:2px 6px 2px 8px;font-size:12px;font-weight:600;cursor:pointer;margin-left:2px}
.fchip .v i{font-style:normal;opacity:.6}
.fchip .v:hover{background:var(--accent-soft-2)}
.pop-wrap{position:relative;display:inline-block}
.pop{position:absolute;z-index:40;top:calc(100% + 6px);left:0;background:var(--s2);border:1px solid var(--line-2);border-radius:var(--r-l);box-shadow:var(--sh-3);animation:pop .12s var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.pop.panel-f{width:min(640px,calc(100vw - 48px));padding:14px 16px 10px;display:flex;flex-direction:column;gap:12px;max-height:min(70vh,640px);overflow:auto}
.fsec{display:grid;grid-template-columns:112px minmax(0,1fr);gap:8px 12px;align-items:start}
.fsec .fl{font-size:11.5px;font-weight:700;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em;padding-top:5px}
.pills{display:flex;flex-wrap:wrap;gap:5px}
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;border:1px solid var(--line-2);background:var(--s1);color:var(--ink-2);font-size:12.5px;font-weight:550;cursor:pointer;transition:background .1s,border-color .1s}
.pill:hover{border-color:var(--line-3);color:var(--ink)}
.pill.on{background:var(--accent-soft);border-color:transparent;color:var(--accent)}
.pill .dot{background:var(--c,var(--ink-4))}
.pop-search{padding:6px 10px;font-size:12.5px;margin-bottom:6px;width:100%}
.firmlist{max-height:170px;overflow:auto;border:1px solid var(--line);border-radius:8px;padding:4px}
.firmlist label{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:6px;cursor:pointer;font-size:12.5px}
.firmlist label:hover{background:var(--s3)}
.firmlist label span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.firmlist label em{font-style:normal;color:var(--ink-4);font-size:11px}
.firmlist input{accent-color:var(--accent);margin:0}
.ffoot{display:flex;justify-content:space-between;align-items:center;padding-top:8px;border-top:1px solid var(--line)}

/* ---------- Badges / Chips ---------- */
.badge{display:inline-flex;align-items:center;gap:6px;padding:2px 9px;border-radius:999px;font-size:11.5px;font-weight:650;white-space:nowrap;
  background:color-mix(in srgb,var(--c,var(--ink-3)) 14%,transparent);color:var(--c,var(--ink-3))}
.badge .dot,.dot{width:7px;height:7px;border-radius:50%;background:var(--c,var(--ink-3));flex:none;display:inline-block}
.prio{display:inline-grid;place-items:center;min-width:22px;height:18px;padding:0 4px;border-radius:5px;font-size:10.5px;font-weight:800;letter-spacing:.02em;
  background:color-mix(in srgb,var(--c,var(--ink-4)) 16%,transparent);color:var(--c,var(--ink-3))}
.chip{display:inline-flex;align-items:center;gap:4px;padding:2px 7px;border-radius:6px;font-size:11px;font-weight:550;color:var(--ink-3);background:var(--s3);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.chip.warn{background:color-mix(in srgb,var(--warn) 14%,transparent);color:var(--warn)}
.chip.crit{background:color-mix(in srgb,var(--crit) 14%,transparent);color:var(--crit)}
.chip.good{background:color-mix(in srgb,var(--good) 14%,transparent);color:var(--good)}
.chip.info{background:color-mix(in srgb,var(--info) 14%,transparent);color:var(--info)}
.chip svg{width:11px;height:11px}

/* ---------- Home ---------- */
.kpistrip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) minmax(180px,1.4fr);gap:10px;margin-bottom:18px}
.kpi-mini{display:flex;flex-direction:column;gap:2px;padding:10px 14px;border-radius:var(--r-m);background:var(--s2);border:1px solid var(--line);text-align:left;cursor:pointer;min-width:0}
.kpi-mini:hover{border-color:var(--line-2);background:var(--s3)}
.kpi-mini .lbl{font-size:11px;font-weight:600;color:var(--ink-3);text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi-mini .num{font-size:20px;font-weight:700;letter-spacing:-.02em;line-height:1.2;color:var(--accent)}
.kpi-mini .spark{display:block;margin-top:2px}
.kpi-mini .spark svg{width:100%;height:34px}
.datebox{width:36px;text-align:center;border-radius:9px;background:var(--accent-soft);color:var(--accent);padding:4px 0;line-height:1.1}
.datebox b{display:block;font-size:15px}
.datebox span{font-size:10px;text-transform:uppercase;font-weight:700}
.curve-lbl{font-size:11.5px;color:var(--ink-3);font-weight:600;margin-bottom:6px}
.sparkline{display:block;width:100%;height:auto;overflow:visible}
.spark-axis{display:flex;justify-content:space-between;font-size:10.5px;color:var(--ink-4);margin-top:4px}
.funnel.small .fstep{grid-template-columns:70px minmax(0,1fr) 34px;font-size:12px}
.funnel.small .fstep .tr{height:14px;border-radius:4px}

.hero{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:22px;flex-wrap:wrap}
.hero h2{font-size:28px;letter-spacing:-.025em;font-weight:700}
.hero p{margin:6px 0 0;color:var(--ink-2);font-size:15px;max-width:60ch}
.hero .date{color:var(--ink-3);font-size:13px;font-weight:550}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:12px}
@media (max-width:820px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.tile{padding:12px 14px}.tile .num{font-size:24px}}
@media (max-width:1100px) and (min-width:821px){.kpistrip{grid-template-columns:repeat(4,minmax(0,1fr))}.kpi-mini.wide{grid-column:span 4}}
.tile{position:relative;display:flex;flex-direction:column;gap:2px;padding:16px 18px;border-radius:var(--r-l);background:var(--s2);border:1px solid var(--line);text-align:left;cursor:pointer;transition:transform .15s var(--ease),box-shadow .15s,border-color .15s;box-shadow:var(--sh-1)}
.tile:hover{transform:translateY(-2px);box-shadow:var(--sh-2);border-color:var(--line-2)}
.tile .lbl{font-size:12px;font-weight:600;color:var(--ink-3);letter-spacing:.02em}
.tile .num{font-size:30px;font-weight:700;letter-spacing:-.03em;line-height:1.1;margin:4px 0 2px}
.tile .note{font-size:12px;color:var(--ink-3)}
.tile.accent{background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 70%,#1a5cff));border-color:transparent;color:#fff}
.tile.accent .lbl,.tile.accent .note{color:rgba(255,255,255,.8)}
.tile .spark{position:absolute;right:14px;bottom:14px;opacity:.9}
.grid-2{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px;align-items:start}
.stack{display:flex;flex-direction:column;gap:16px;min-width:0}
.panel{background:var(--s2);border:1px solid var(--line);border-radius:var(--r-l);padding:18px 20px;box-shadow:var(--sh-1);min-width:0}
.panel-h{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.panel-h h3{font-size:15px}
.panel-h p{margin:2px 0 0;color:var(--ink-3);font-size:12.5px}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.task{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.task:first-of-type{border-top:0}
.task .job{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.task .meta{font-size:12.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.task .meta b{color:var(--ink-2);font-weight:600}
.task .acts{display:flex;gap:4px}
.avatar.co{border-radius:9px;background:var(--s3);color:var(--ink-2);font-size:11px;letter-spacing:.02em}
.empty{padding:22px;text-align:center;color:var(--ink-3);font-size:13.5px;border:1px dashed var(--line-2);border-radius:var(--r-m)}
.progress{height:8px;border-radius:999px;background:var(--s4);overflow:hidden;margin:12px 0 8px}
.progress span{display:block;height:100%;background:var(--accent);border-radius:999px;transition:width .5s var(--ease)}
.big{font-size:30px;font-weight:700;letter-spacing:-.03em}
.big small{font-size:15px;color:var(--ink-3);font-weight:550;letter-spacing:0}
.pipe{display:flex;height:10px;border-radius:999px;overflow:hidden;gap:2px;margin:12px 0}
.pipe span{display:block;min-width:2px}
.legend{display:flex;flex-direction:column;gap:6px;font-size:13px}
.legend div{display:flex;align-items:center;gap:8px}
.legend b{margin-left:auto;font-weight:650}
.feed{display:flex;flex-direction:column}
.feed .ev{display:grid;grid-template-columns:8px minmax(0,1fr) auto;gap:12px;align-items:baseline;padding:8px 0;border-top:1px solid var(--line);font-size:13px}
.feed .ev:first-child{border-top:0}
.feed .ev .t{color:var(--ink-3);font-size:11.5px;white-space:nowrap}
.feed .ev .what{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.feed .ev .what b{font-weight:600}
.urlrow{display:flex;gap:8px}
.urlrow .input{flex:1}

/* ---------- Kanban ---------- */
.board{display:flex;gap:12px;overflow-x:auto;padding-bottom:12px;align-items:flex-start;scroll-snap-type:x proximity;min-height:60vh}
.lane{flex:0 0 268px;display:flex;flex-direction:column;max-height:calc(100vh - 190px);background:var(--s1);border:1px solid var(--line);border-radius:var(--r-l);scroll-snap-align:start}
.board[data-density=compact] .lane{flex-basis:252px}
.lane.collapsed{flex-basis:44px;min-height:200px}
.lane-h{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line);background:none;border-top:0;border-left:0;border-right:0;cursor:pointer;text-align:left;font-weight:650;font-size:12.5px;color:var(--ink-2);width:100%;border-radius:var(--r-l) var(--r-l) 0 0}
.lane-h:hover{background:var(--s3)}
.lane-h .cnt{margin-left:auto;font-size:11px;font-weight:700;background:var(--s3);border-radius:999px;padding:1px 7px;color:var(--ink-3)}
.lane.collapsed .lane-h{flex-direction:column;height:100%;justify-content:flex-start;border-bottom:0;padding:12px 4px;border-radius:var(--r-l)}
.lane.collapsed .lane-h .t{writing-mode:vertical-rl;text-orientation:mixed}
.lane.collapsed .lane-h .cnt{margin:auto 0 0}
.lane.collapsed .lane-b{display:none}
.lane-b{overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:8px;flex:1;min-height:60px}
.lane.drop .lane-b,.lane.collapsed.drop{outline:2px dashed var(--accent);outline-offset:-4px;background:var(--accent-soft)}
.lane-empty{margin:10px auto;width:36px;height:24px;border:1px dashed var(--line-2);border-radius:6px;opacity:.6}
/* Komfort-Karte */
.card{position:relative;background:var(--s2);border:1px solid var(--line);border-left:3px solid var(--pc,var(--line-2));border-radius:var(--r-m);padding:11px 12px 10px;cursor:grab;box-shadow:var(--sh-1);transition:box-shadow .15s,transform .15s,border-color .15s;flex:none}
.card:hover{box-shadow:var(--sh-2);border-color:var(--line-2);transform:translateY(-1px)}
.card.dragging{opacity:.5;transform:rotate(-1.5deg) scale(.98)}
.card .co{font-size:11.5px;font-weight:650;color:var(--ink-3);text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:26px}
.card .ti{font-weight:600;line-height:1.35;margin:3px 0 8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13.5px}
.card .chips{display:flex;flex-wrap:wrap;gap:4px}
.card .pflag{position:absolute;top:9px;right:9px}
.card .foot{display:flex;align-items:center;gap:6px;margin-top:9px;padding-top:8px;border-top:1px solid var(--line);font-size:11.5px;color:var(--ink-3);min-width:0}
.card .foot .ns{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .foot .ns b{color:var(--ink-2);font-weight:600}
.card .acts{display:flex;gap:2px;opacity:0;transition:opacity .12s}
.card:hover .acts,.card:focus-within .acts{opacity:1}
/* Kompakt-Zeile: Prio-Label, Titel, Firma · Ort, rechts Tage/Termin, Aktionen beim Hover */
.board[data-density=compact] .lane-b{gap:2px;padding:6px}
.row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:center;padding:6px 8px 6px 7px;border-radius:8px;background:transparent;cursor:grab;flex:none;border:1px solid transparent}
.row:hover{background:var(--s2);border-color:var(--line);box-shadow:var(--sh-1)}
.row.dragging{opacity:.5}
.row .prio{min-width:24px;height:20px;font-size:10.5px}
.row .tx{min-width:0;line-height:1.3}
.row .tx .ti{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .tx .co{font-size:11px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .tx .co .due{color:var(--warn);font-weight:650}
.row .rr{display:flex;align-items:center;gap:4px}
.row .d{display:inline-flex;align-items:center;gap:3px;font-size:11px;color:var(--ink-3);font-weight:600;white-space:nowrap}
.row .d svg{width:12px;height:12px}
.row .d.warn{color:var(--warn)}.row .d.crit{color:var(--crit)}.row .d.info{color:var(--info)}
.row .acts{display:none}
.row:hover .acts{display:inline-flex}

/* ---------- Tabelle ---------- */
.tblwrap{overflow:auto;max-height:calc(100vh - 220px);border:1px solid var(--line);border-radius:var(--r-l);background:var(--s2);box-shadow:var(--sh-1)}
table{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}
th{position:sticky;top:0;z-index:2;background:var(--s1);text-align:left;padding:9px 12px;font-size:11.5px;font-weight:650;color:var(--ink-3);letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;border-bottom:1px solid var(--line-2);cursor:pointer;user-select:none}
th:hover{color:var(--ink)}
th .arr{opacity:.35;margin-left:4px}
th.on{color:var(--accent)}
th.on .arr{opacity:1}
td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:middle;max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
td.wrap{white-space:normal}
tbody tr{cursor:pointer}
tbody tr:hover td{background:var(--s3)}
tbody tr.sel td{background:var(--accent-soft)}
td.muted{color:var(--ink-4)}
td .b{font-weight:600}
td a{white-space:nowrap}
.tbl-empty{padding:40px;text-align:center;color:var(--ink-3)}

/* ---------- Stats ---------- */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px}
@media (max-width:1100px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.kpi{background:var(--s2);border:1px solid var(--line);border-radius:var(--r-l);padding:14px 16px;box-shadow:var(--sh-1)}
.kpi .lbl{font-size:12px;color:var(--ink-3);font-weight:600}
.kpi .num{font-size:26px;font-weight:700;letter-spacing:-.03em;margin:4px 0 2px}
.kpi .note{font-size:11.5px;color:var(--ink-3)}
.charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:14px}
.chart{background:var(--s2);border:1px solid var(--line);border-radius:var(--r-l);padding:16px 18px 12px;box-shadow:var(--sh-1);min-width:0}
.chart h3{font-size:14px}
.chart p.cs{margin:2px 0 12px;color:var(--ink-3);font-size:12px}
.chart svg{width:100%;height:auto;display:block;overflow:visible}
.chart .axis{stroke:var(--line-2);stroke-width:1}
.chart .grid{stroke:var(--line);stroke-width:1}
.chart text{font-family:var(--font);font-size:11px;fill:var(--ink-3)}
.chart text.v{fill:var(--ink-2);font-weight:600}
.chart .bar{rx:3;transition:opacity .12s}
.chart .goal{stroke:var(--ink-3);stroke-dasharray:4 4;stroke-width:1.5}
.chart .hit{fill:transparent}
.chart .cross{stroke:var(--ink-3);stroke-width:1;opacity:0}
.chart g:hover .cross{opacity:.5}
.chart.span2{grid-column:span 2}
.legend-row{display:flex;gap:16px;font-size:12px;color:var(--ink-2);margin-bottom:8px}
.legend-row i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.chart .hit:hover+.bar,.chart g:hover .bar{opacity:.8}
.hbars{display:flex;flex-direction:column;gap:7px}
.hbar{display:grid;grid-template-columns:150px minmax(0,1fr) 34px;align-items:center;gap:10px;font-size:12.5px}
.hbar .l{display:flex;align-items:center;gap:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink-2)}
.hbar .tr{height:10px;background:var(--s3);border-radius:999px;overflow:hidden}
.hbar .tr span{display:block;height:100%;border-radius:999px;background:var(--c,var(--accent));min-width:2px}
.hbar b{text-align:right;font-weight:650}
.funnel{display:flex;flex-direction:column;gap:8px}
.fstep{display:grid;grid-template-columns:150px minmax(0,1fr) 90px;align-items:center;gap:10px;font-size:12.5px}
.fstep .tr{height:22px;background:var(--s3);border-radius:6px;overflow:hidden}
.fstep .tr span{display:block;height:100%;border-radius:6px;min-width:3px}
.fstep .l{color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fstep .v{text-align:right;font-variant-numeric:tabular-nums}
.fstep .v small{color:var(--ink-3);margin-left:5px}
.tt{position:fixed;z-index:80;pointer-events:none;background:var(--ink);color:var(--bg);font-size:12px;padding:6px 9px;border-radius:7px;box-shadow:var(--sh-2);white-space:nowrap;transform:translate(-50%,calc(-100% - 10px))}
.tt b{font-weight:700}
.mini-table{width:100%;font-size:12.5px;table-layout:fixed}
.mini-table col.n{width:42%}
.mini-table td,.mini-table th{padding:6px 4px}
.mini-table td,.mini-table th{padding:6px 8px;white-space:nowrap}
.mini-table th{position:static;font-size:11px;background:transparent;border-bottom:1px solid var(--line-2)}
.mini-table td,.mini-table th{overflow:hidden;text-overflow:ellipsis}

/* ---------- Auswertung: Module ---------- */
.modgrid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px}
.mod{grid-column:span var(--w,6);position:relative;background:var(--s2);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--sh-1);min-width:0;display:flex;flex-direction:column}
.mod.dragging{opacity:.45}
.mod.over{outline:2px dashed var(--accent);outline-offset:-3px}
.mod.resizing{user-select:none;box-shadow:0 0 0 2px var(--accent)}
.mod-h{display:flex;align-items:flex-start;gap:10px;padding:14px 12px 6px 10px}
.mod-h h3{font-size:14px}
.mod-h .cs{margin:2px 0 0;color:var(--ink-3);font-size:12px}
.mod-h>div{flex:1;min-width:0}
.grip{cursor:grab;color:var(--ink-4);font-size:14px;letter-spacing:-3px;padding:2px 4px;border-radius:5px;user-select:none;line-height:1.2;flex:none}
.grip:hover{background:var(--s3);color:var(--ink-2)}
.grip:active{cursor:grabbing}
.mod-size{display:inline-flex;align-items:center;gap:2px;flex:none;opacity:0;transition:opacity .12s}
.mod:hover .mod-size,.mod:focus-within .mod-size{opacity:1}
.mod-size em{font-style:normal;font-size:11px;color:var(--ink-4);min-width:34px;text-align:center}
.mod-b{padding:6px 18px 14px;min-width:0;flex:1}
.mod-b .kpis{margin-bottom:0}
.mod-b svg{width:100%;height:auto;max-height:250px;display:block;overflow:visible;margin:0 auto}
.mod-b .kpis{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.mod-b .axis{stroke:var(--line-2);stroke-width:1}.mod-b .grid{stroke:var(--line);stroke-width:1}
.mod-b text{font-family:var(--font);font-size:11px;fill:var(--ink-3)}.mod-b text.v{fill:var(--ink-2);font-weight:600}
.mod-b .bar{rx:3}.mod-b .goal{stroke:var(--ink-3);stroke-dasharray:4 4;stroke-width:1.5}.mod-b .hit{fill:transparent}
.mod-b .cross{stroke:var(--ink-3);stroke-width:1;opacity:0}.mod-b g:hover .cross{opacity:.5}
.mod-resize{position:absolute;top:0;right:-4px;bottom:0;width:9px;cursor:col-resize;border-radius:4px}
.mod-resize:hover,.mod.resizing .mod-resize{background:color-mix(in srgb,var(--accent) 35%,transparent)}
@media (max-width:1100px){.mod{grid-column:span 12 !important}.mod-size,.mod-resize{display:none}}
/* Prioritäten-Editor */
.prioedit{display:flex;flex-direction:column;gap:6px}
.prow{display:grid;grid-template-columns:34px 64px minmax(0,1fr) auto auto;gap:8px;align-items:center}
.prow input[type=color]{width:34px;height:34px;padding:2px;border:1px solid var(--line-2);border-radius:8px;background:var(--s2);cursor:pointer}
.prow .code{font-family:var(--mono);font-weight:700;text-transform:uppercase;padding:7px 8px}
.prow .park{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--ink-3);white-space:nowrap}
.prow .park input{accent-color:var(--accent);margin:0}
.prow .pbtns{display:inline-flex;gap:2px}
/* Papierkorb */
.trashlist{display:flex;flex-direction:column;gap:4px}
.trow{display:flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid var(--line);border-radius:8px;font-size:13px}
.trow .tx{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trow small{color:var(--ink-4)}
/* ---------- Drawer ---------- */
.scrim{position:fixed;inset:0;z-index:50;background:rgba(10,10,8,.35);animation:fade .15s}
@keyframes fade{from{opacity:0}to{opacity:1}}
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:51;width:min(var(--drawer),100vw);background:var(--s1);border-left:1px solid var(--line);box-shadow:var(--sh-3);display:flex;flex-direction:column;animation:slide .22s var(--ease)}
@keyframes slide{from{transform:translateX(30px);opacity:0}to{transform:none;opacity:1}}
.drawer-h{padding:18px 22px 14px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:10px;background:var(--s1)}
.drawer-h .top{display:flex;align-items:center;gap:8px}
.drawer-h .top .grow{flex:1}
.drawer-h .co{font-size:12px;font-weight:700;color:var(--ink-3);letter-spacing:.04em;text-transform:uppercase}
.drawer-h .ti{font-size:18px;font-weight:700;letter-spacing:-.015em;line-height:1.3}
.drawer-h .st{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.drawer-h .meta-chips:empty{display:none}
.prio-pick{padding:2px;gap:1px}
.prio-pick button{padding:3px 8px;font-size:11px;font-weight:800;color:var(--ink-4)}
.prio-pick button:hover{color:var(--c)}
.prio-pick button.on{background:color-mix(in srgb,var(--c) 16%,transparent);color:var(--c);box-shadow:none}
.prio-lbl{font-size:12px;color:var(--ink-3)}
.field>span em{font-style:normal;font-weight:400;text-transform:none;letter-spacing:0;color:var(--ink-4)}
.status-sel{appearance:none;-webkit-appearance:none;border:0;border-radius:999px;padding:4px 26px 4px 12px;font-weight:650;font-size:12.5px;cursor:pointer;
  background:color-mix(in srgb,var(--c) 15%,transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 9px center;color:var(--c)}
.drawer-b{flex:1;overflow-y:auto;padding:16px 22px 30px}
.quick{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.form{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px}
.sec{margin:22px 0 10px;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);display:flex;align-items:center;gap:10px}
.sec::after{content:"";flex:1;height:1px;background:var(--line)}
.tl{display:flex;flex-direction:column}
.tl .ev{display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;padding:8px 0;position:relative}
.tl .ev::before{content:"";position:absolute;left:8px;top:22px;bottom:-8px;width:1px;background:var(--line)}
.tl .ev:last-child::before{display:none}
.tl .ev .ic{width:17px;height:17px;border-radius:50%;background:var(--s3);border:1px solid var(--line-2);display:grid;place-items:center;margin-top:2px}
.tl .ev .ic svg{width:10px;height:10px;color:var(--ink-3)}
.tl .ev .ic.st{background:color-mix(in srgb,var(--c) 18%,transparent);border-color:transparent}
.tl .ev .ic.st svg{color:var(--c)}
.tl .ev .tx{font-size:13px;line-height:1.45}
.tl .ev .tx b{font-weight:600}
.tl .ev .tx .n{white-space:pre-wrap;color:var(--ink);background:var(--s2);border:1px solid var(--line);border-radius:8px;padding:8px 10px;margin-top:4px;display:block}
.tl .ev .t{font-size:11.5px;color:var(--ink-3);display:flex;gap:8px;align-items:center}
.tl .ev .t button{background:none;border:0;color:var(--ink-4);cursor:pointer;padding:0;font-size:11px}
.tl .ev .t button:hover{color:var(--crit)}
.noterow{display:flex;gap:8px;margin:8px 0 6px}
.noterow .input{flex:1}
.drawer-f{padding:12px 22px;border-top:1px solid var(--line);display:flex;gap:6px;align-items:center;background:var(--s1)}
.drawer-f .state{font-size:11.5px;color:var(--ink-3);margin-right:auto}
.drawer-f .state.err{color:var(--crit)}

/* ---------- Dialoge ---------- */
dialog{border:1px solid var(--line-2);border-radius:var(--r-xl);background:var(--s1);color:var(--ink);padding:0;width:min(620px,calc(100vw - 32px));box-shadow:var(--sh-3);max-height:calc(100vh - 40px)}
dialog::backdrop{background:rgba(10,10,8,.45);backdrop-filter:blur(2px)}
dialog .dh{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;border-bottom:1px solid var(--line)}
dialog .dh h2{font-size:17px}
dialog .db{padding:18px 22px;overflow:auto;max-height:calc(100vh - 170px)}
dialog .df{padding:12px 22px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:8px}
dialog p{margin:0 0 10px;color:var(--ink-2)}
dialog p.hint{font-size:12.5px;color:var(--ink-3)}
.setgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px}
.opt{display:flex;flex-direction:column;gap:8px}
.preview{background:var(--s2);border:1px solid var(--line);border-radius:var(--r-m);padding:12px 14px;font-size:13px;display:grid;grid-template-columns:110px minmax(0,1fr);gap:5px 10px}
.preview span{color:var(--ink-3);font-size:12px}
.preview b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dup{border:1px solid color-mix(in srgb,var(--warn) 40%,transparent);background:color-mix(in srgb,var(--warn) 8%,transparent);border-radius:var(--r-m);padding:10px 12px;font-size:13px;display:flex;align-items:center;gap:10px;margin-bottom:12px}
.dup b{font-weight:650}
.dup .btn{margin-left:auto}

dialog.confirm{width:min(440px,calc(100vw - 32px))}
dialog.confirm .db p{font-size:14px;color:var(--ink-2)}
dialog .sec{margin:18px 0 10px}
dialog .sec.first{margin-top:0}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.opt-card{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line-2);border-radius:var(--r-m);cursor:pointer;background:var(--s2)}
.opt-card:hover{border-color:var(--line-3)}
.opt-card:has(input:checked){border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 1px var(--accent)}
.opt-card input{position:absolute;opacity:0;width:0;height:0}
.opt-card .ico{width:26px;height:26px;border-radius:8px;background:var(--s3);display:grid;place-items:center;flex:none;color:var(--ink-2)}
.opt-card:has(input:checked) .ico{background:var(--accent);color:var(--accent-ink)}
.opt-card .ico svg{width:14px;height:14px}
.opt-card b{display:block;font-size:13px}
.opt-card small{display:block;color:var(--ink-3);font-size:11.5px;line-height:1.35;margin-top:1px}
.fb-fields{margin-top:12px}
.fb-fields:empty{display:none}
.priogrid{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px}
.priogrid label{display:flex;align-items:center;gap:10px}
.priogrid .prio{min-width:30px;height:24px;font-size:11.5px}
.importbox{border:1px dashed var(--line-2);border-radius:var(--r-m);padding:12px 14px;display:flex;flex-direction:column;gap:10px;background:var(--s2)}
.improw{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.impname{font-size:12.5px;color:var(--ink-3)}
.radios{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.radios label{display:flex;gap:8px;align-items:flex-start;padding:8px 10px;border:1px solid var(--line);border-radius:8px;cursor:pointer;font-size:13px}
.radios label:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.radios input{accent-color:var(--accent);margin-top:3px}
.radios small{display:block;color:var(--ink-3);font-size:11.5px;line-height:1.35}
.radios b{font-weight:600}
/* ---------- Command Palette ---------- */
.cmd{width:min(600px,calc(100vw - 32px))}
.cmd .db{padding:0}
.cmd .ci{width:100%;border:0;border-bottom:1px solid var(--line);background:transparent;padding:16px 20px;font-size:16px;outline:none}
.cmd ul{list-style:none;margin:0;padding:8px;max-height:400px;overflow:auto}
.cmd li{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:9px;cursor:pointer;font-size:13.5px}
.cmd li.on,.cmd li:hover{background:var(--accent-soft)}
.cmd li .k{margin-left:auto;font-size:11px;color:var(--ink-3)}
.cmd li .sub{color:var(--ink-3);font-size:12px}
.cmd li .ico{width:24px;height:24px;border-radius:7px;background:var(--s3);display:grid;place-items:center;flex:none;font-size:11px;font-weight:700;color:var(--ink-2)}
.cmd .grp{padding:8px 12px 2px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4)}

/* ---------- Toasts ---------- */
.toasts{position:fixed;bottom:20px;right:20px;z-index:90;display:flex;flex-direction:column-reverse;gap:8px;pointer-events:none}
.toast{pointer-events:auto;display:flex;align-items:center;gap:10px;background:var(--ink);color:var(--bg);padding:10px 14px;border-radius:var(--r-m);box-shadow:var(--sh-3);font-size:13px;min-width:260px;max-width:380px;animation:toastIn .2s var(--ease);position:relative;overflow:hidden}
.toast.out{animation:toastOut .15s forwards}
@keyframes toastIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(6px)}}
.toast .m{flex:1}
.toast button{display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,.14);border:0;color:inherit;border-radius:6px;padding:4px 9px;font-weight:650;cursor:pointer;font-size:12px}
.toast button svg{width:14px;height:14px}
:root[data-theme="dark"] .toast button{background:rgba(0,0,0,.18)}
.toast .bar{position:absolute;left:0;bottom:0;height:2px;background:var(--accent);animation:tbar linear forwards}
.toast.err{background:var(--crit);color:#fff}
@keyframes tbar{from{width:100%}to{width:0}}

/* ---------- Auth ---------- */
.auth{min-height:100vh;display:grid;place-items:center;padding:20px;background:radial-gradient(900px 500px at 50% -10%,var(--accent-soft),transparent 70%)}
.auth .box{width:min(420px,100%);background:var(--s2);border:1px solid var(--line);border-radius:var(--r-xl);padding:30px;box-shadow:var(--sh-2)}
.auth .brand{padding:0 0 18px}
.auth form{display:flex;flex-direction:column;gap:12px}
.auth h2{font-size:20px;margin-bottom:2px}
.auth p{margin:0 0 6px;color:var(--ink-3);font-size:13px}
.auth .err{color:var(--crit);font-size:13px;min-height:18px}

/* ---------- Responsive ---------- */
.tabbar{display:none}
@media (max-width:1100px){
  :root{--rail:200px}
  .grid-2{grid-template-columns:1fr}
}
@media (max-width:820px){
  .shell{grid-template-columns:1fr}
  .rail{display:none}
  .topbar{padding:12px 16px}
  .topbar h1{font-size:17px}
  .topbar .sub{display:none}
  .search{width:auto;flex:1}
  .search kbd{display:none}
  .content{padding:16px 16px 90px}
  .btn .lbl{display:none}
  .form,.setgrid{grid-template-columns:1fr}
  .lane{flex-basis:84vw}
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--s1);border-top:1px solid var(--line);padding:6px 8px calc(6px + env(safe-area-inset-bottom))}
  .tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 4px;text-decoration:none;color:var(--ink-3);font-size:10.5px;font-weight:600;border-radius:9px}
  .tabbar a.on{color:var(--accent);background:var(--accent-soft)}
  .tabbar a svg{width:20px;height:20px}
  .hbar,.fstep{grid-template-columns:100px minmax(0,1fr) auto}
  .kpistrip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpi-mini.wide{grid-column:span 2}
  .chart.span2{grid-column:auto}
  .opts,.radios{grid-template-columns:1fr}
  .prow{grid-template-columns:34px 56px minmax(0,1fr);grid-auto-rows:auto}
  .prow .park,.prow .pbtns{grid-column:span 3}
  .fsec{grid-template-columns:1fr}
  .pop.panel-f{position:fixed;left:12px;right:12px;top:70px;width:auto}
  .toolbar{gap:6px}
  .seg.views{max-width:100%;overflow-x:auto;scrollbar-width:none}
  .seg.views button{padding:5px 9px;font-size:12px;white-space:nowrap}
  .toolbar .count{width:100%;order:9}
  .toasts{left:12px;right:12px;bottom:70px}
  .toast{min-width:0;max-width:none}
  .drawer-f .btn .lbl{display:none}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
@media print{.rail,.topbar,.tabbar,.toasts{display:none}.content{padding:0}}