/* Dienstplan Manager — Designsystem: Tokens, Grundlayout, Komponenten.
   Seitenspezifisches (Anmeldung, Planung, Kalender …) steht in views.css. */
@font-face{font-family:Archivo;src:url(/static/fonts/archivo.woff2) format('woff2');font-weight:400 700;font-display:swap}
@font-face{font-family:'Plex Mono';src:url(/static/fonts/plexmono-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Plex Mono';src:url(/static/fonts/plexmono-600.woff2) format('woff2');font-weight:600;font-display:swap}

:root{
  --bg:#f6f7f9;--surface:#fff;--surface-2:#f9fafb;--neutral-soft:#f3f4f6;
  --ink:#111827;--ink-2:#374151;--muted:#6b7280;--border:#e5e7eb;--border-strong:#d1d5db;
  --acc:#0f766e;--acc-hover:#115e59;--acc-soft:#ccfbf1;--acc-softer:#f0fdfa;--on-acc:#fff;--ring:rgba(15,118,110,.22);
  --ok:#15803d;--ok-soft:#dcfce7;--warn:#b45309;--warn-soft:#fef3c7;--warn-line:#fcd34d;
  --bad:#b91c1c;--bad-soft:#fee2e2;--info:#1d4ed8;--info-soft:#dbeafe;
  --shadow-xs:0 1px 2px rgba(16,24,40,.05);
  --shadow-sm:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.1);
  --shadow-lg:0 12px 16px -4px rgba(16,24,40,.08),0 4px 6px -2px rgba(16,24,40,.03),0 24px 48px -12px rgba(16,24,40,.18);
  --ink-3:var(--muted);
  --font:Archivo,'Segoe UI',system-ui,-apple-system,sans-serif;
  --mono:'Plex Mono','Cascadia Mono',Consolas,ui-monospace,monospace;
  --side:240px;color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#0b1115;--surface:#121a20;--surface-2:#172229;--neutral-soft:#1e2a32;
  --ink:#e6e9ec;--ink-2:#c3cad1;--muted:#8d99a5;--border:#233039;--border-strong:#33424d;
  --acc:#2dd4bf;--acc-hover:#5eead4;--acc-soft:rgba(45,212,191,.18);--acc-softer:rgba(45,212,191,.09);--on-acc:#042f2e;--ring:rgba(45,212,191,.3);
  --ok:#4ade80;--ok-soft:rgba(74,222,128,.13);--warn:#fbbf24;--warn-soft:rgba(251,191,36,.12);--warn-line:rgba(251,191,36,.45);
  --bad:#f87171;--bad-soft:rgba(248,113,113,.13);--info:#60a5fa;--info-soft:rgba(96,165,250,.14);
  --shadow-xs:0 1px 2px rgba(0,0,0,.3);--shadow-sm:0 1px 2px rgba(0,0,0,.35),0 1px 3px rgba(0,0,0,.35);
  --shadow-lg:0 24px 48px -12px rgba(0,0,0,.6);color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font:400 14.5px/1.55 var(--font);-webkit-font-smoothing:antialiased;min-height:100vh}
[hidden]{display:none!important}
a{color:var(--acc);text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit;color:inherit}
.mono,.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
h1[tabindex="-1"]:focus,main:focus{outline:none}
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--acc);color:var(--on-acc);padding:10px 14px;border-radius:8px;font-weight:600}
.skip:focus{top:10px}
.noscript{padding:24px;text-align:center}
.boot{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:var(--muted)}
.mark{width:32px;height:32px;display:block;flex-shrink:0}
.mark-lg{width:48px;height:48px}

/* ── Shell ─────────────────────────────────────────────────────────────── */
.side{display:none}
.mtop{position:sticky;top:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:12px;height:calc(56px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 12px 0 16px;background:var(--surface);border-bottom:1px solid var(--border)}
.mtop-brand{display:flex;align-items:center;gap:10px;color:var(--ink);font-size:15px}
.mtop-brand:hover{text-decoration:none}
.mtop-brand .mark{width:28px;height:28px}
.mtop-tools{display:flex;align-items:center;gap:4px}
.main{padding:20px 16px calc(96px + env(safe-area-inset-bottom));max-width:1320px;margin:0 auto}
.bar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;background:var(--surface);border-top:1px solid var(--border);padding-bottom:env(safe-area-inset-bottom)}
.bar-link{flex:1;min-width:0;min-height:60px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:6px 2px;font-size:11px;font-weight:500;color:var(--muted);background:none;border:none;cursor:pointer}
.bar-link:hover{text-decoration:none;color:var(--ink)}
.bar-link svg{width:22px;height:22px}
.bar-link .lbl{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar-link[aria-current="page"]{color:var(--acc);font-weight:600}
.bar .nav-badge{position:absolute;top:5px;left:calc(50% + 5px);margin:0;min-width:18px;height:18px;line-height:18px;font-size:10.5px;background:var(--bad);color:#fff}
@media (min-width:960px){
  .app{padding-left:var(--side)}
  .mtop,.bar{display:none}
  .side{display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0;width:var(--side);background:var(--surface);border-right:1px solid var(--border);z-index:50}
  .main{padding:32px 40px 64px}
}
.side-brand{display:flex;align-items:center;gap:12px;padding:20px 20px 12px;color:var(--ink)}
.side-brand:hover{text-decoration:none}
.side-brand b{display:block;font-size:15px;font-weight:650;letter-spacing:-.01em;line-height:1.25}
.side-brand small{display:block;font-size:12.5px;color:var(--muted)}
.side-nav{flex:1;overflow-y:auto;padding:0 12px 12px}
.nav-group{margin:20px 10px 6px;font-size:12px;font-weight:600;color:var(--muted)}
.nav-link{position:relative;display:flex;align-items:center;gap:12px;min-height:40px;padding:8px 10px;margin:2px 0;border-radius:8px;color:var(--ink-2);font-size:14px;font-weight:500}
.nav-link svg{width:19px;height:19px;color:var(--muted);flex-shrink:0}
.nav-link:hover{background:var(--neutral-soft);color:var(--ink);text-decoration:none}
.nav-link[aria-current="page"]{background:var(--acc-softer);color:var(--acc);font-weight:600}
.nav-link[aria-current="page"] svg{color:var(--acc)}
.nav-link[aria-current="page"]::before{content:'';position:absolute;left:-12px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--acc)}
.nav-badge{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--acc);color:var(--on-acc);font-size:11.5px;font-weight:600;line-height:20px;text-align:center}
.side-foot{border-top:1px solid var(--border);padding:12px}
.side-tools{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 4px 10px}
.user-card{display:flex;align-items:center;gap:4px;border-radius:10px}
.user-link{flex:1;min-width:0;display:flex;align-items:center;gap:10px;padding:8px;border-radius:8px;color:var(--ink)}
.user-link:hover{background:var(--neutral-soft);text-decoration:none}
.user-link .meta{min-width:0;line-height:1.3}
.user-link b{display:block;font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-link span span{font-size:12.5px;color:var(--muted)}
.side-version{padding:4px 12px 0;font:11px var(--mono);color:var(--muted)}
.avatar{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--acc-soft);color:var(--acc);font-weight:650;font-size:13px;flex-shrink:0}
.user-chip{display:flex;align-items:center;padding:4px;border-radius:50%}
.theme-btn .sun{display:none}
:root[data-theme="dark"] .theme-btn .sun{display:block}
:root[data-theme="dark"] .theme-btn .moon{display:none}
.lang{display:inline-flex;padding:2px;gap:2px;background:var(--neutral-soft);border-radius:8px}
.lang button{min-width:34px;height:30px;padding:0 8px;border:none;border-radius:6px;background:none;font-size:12px;font-weight:600;color:var(--muted);cursor:pointer}
.lang button:hover{color:var(--ink)}
.lang button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-xs)}

/* ── Seitenkopf, Karten, Kennzahlen ────────────────────────────────────── */
.page-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 24px;margin-bottom:24px}
.eyebrow{display:none}
.pg-title{font-size:24px;line-height:32px;font-weight:650;letter-spacing:-.02em}
.page-sub{margin-top:4px;color:var(--muted);font-size:14.5px;max-width:72ch}
.page-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
@media (min-width:960px){.pg-title{font-size:28px}}
.sec{background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow-sm);padding:20px;margin-bottom:24px}
@media (min-width:700px){.sec{padding:24px}}
.sec-hd{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:8px 16px;margin-bottom:16px}
.sec-t{font-size:17px;line-height:26px;font-weight:600;letter-spacing:-.01em}
.sec-m{font-size:13.5px;color:var(--muted)}
.sec-actions{display:flex;flex-wrap:wrap;gap:8px}
.lead{font-size:14.5px;color:var(--ink-2);margin-bottom:16px;max-width:72ch}
.stack>*+*{margin-top:16px}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.spread{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:24px}
@media (min-width:1000px){.kpis{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}}
.kpi{display:flex;gap:14px;align-items:flex-start;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow-sm);padding:16px 18px;color:var(--ink);min-width:0}
a.kpi:hover{border-color:var(--acc);text-decoration:none}
.kpi-ico{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:var(--acc-softer);color:var(--acc);flex-shrink:0}
.kpi-ico svg{width:20px;height:20px}
.kpi-body{min-width:0}
.kpi-l{font-size:13px;font-weight:500;color:var(--muted)}
.kpi-v{font-size:28px;line-height:36px;font-weight:650;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kpi-v small{font-size:15px;font-weight:500;color:var(--muted);margin-left:4px}
.kpi-s{font-size:12.5px;color:var(--muted)}
.kpi.tone-warn .kpi-ico{background:var(--warn-soft);color:var(--warn)}.kpi.tone-bad .kpi-ico{background:var(--bad-soft);color:var(--bad)}
.kpi.tone-ok .kpi-ico{background:var(--ok-soft);color:var(--ok)}.kpi.tone-info .kpi-ico{background:var(--info-soft);color:var(--info)}
@media (max-width:520px){.kpi{padding:14px}.kpi-ico{display:none}.kpi-v{font-size:24px;line-height:32px}}
.meter{height:6px;background:var(--neutral-soft);border-radius:3px;overflow:hidden;margin-top:8px}
.meter span{display:block;height:100%;background:var(--acc);border-radius:3px}
.meter.over span{background:var(--warn)}

/* ── Formulare ─────────────────────────────────────────────────────────── */
.form-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.form-grid .full{grid-column:1/-1}
.field{min-width:0}
.field>label,.label{display:block;font-size:13px;font-weight:500;color:var(--ink-2);margin-bottom:6px}
.req::after{content:' *';color:var(--bad)}
.hint{font-size:12.5px;color:var(--muted);margin-top:6px}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],input[type=month],input[type=time],input[type=search],input[type=tel],select,textarea{width:100%;height:44px;padding:0 12px;font:inherit;font-size:14.5px;color:var(--ink);background:var(--surface);border:1px solid var(--border-strong);border-radius:8px;box-shadow:var(--shadow-xs);outline:none;transition:border-color .15s,box-shadow .15s}
textarea{height:auto;min-height:88px;padding:10px 12px;resize:vertical}
select{appearance:none;cursor:pointer;padding-right:34px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 8l4 4 4-4' fill='none' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:18px}
input:hover,select:hover,textarea:hover{border-color:var(--muted)}
input:focus,select:focus,textarea:focus{border-color:var(--acc);box-shadow:0 0 0 4px var(--ring)}
input:disabled,select:disabled{background:var(--neutral-soft);color:var(--muted);cursor:not-allowed}
input[aria-invalid="true"],select[aria-invalid="true"]{border-color:var(--bad);box-shadow:0 0 0 4px var(--bad-soft)}
input[type=color]{width:56px;height:44px;padding:4px;border:1px solid var(--border-strong);border-radius:8px;background:var(--surface);cursor:pointer}
::placeholder{color:var(--muted);opacity:.75}
.check{display:flex;align-items:center;gap:10px;min-height:44px;cursor:pointer;font-size:14.5px}
.check input{width:18px;height:18px;accent-color:var(--acc);flex-shrink:0}
.toolbar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 16px;padding:16px;margin-bottom:24px;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow-sm)}
.toolbar .field{flex:1 1 200px;max-width:300px}
.sec .toolbar{padding:0;margin-bottom:0;background:none;border:none;box-shadow:none}
.month-nav{display:flex;align-items:stretch;gap:6px}
.month-nav input{min-width:0}
.seg{display:inline-flex;padding:3px;gap:2px;background:var(--neutral-soft);border-radius:10px}
.seg label,.seg button{display:flex;align-items:center;gap:8px;height:38px;padding:0 14px;border:none;border-radius:8px;background:none;cursor:pointer;font-size:14px;font-weight:500;color:var(--muted)}
.seg svg{width:16px;height:16px}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label:has(input:checked),.seg button[aria-selected="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm)}
.seg label:has(input:focus-visible){outline:2px solid var(--acc)}
.drop{position:relative;display:flex;align-items:center;gap:16px;border:1.5px dashed var(--border-strong);border-radius:10px;background:var(--surface-2);padding:20px;cursor:pointer;transition:border-color .15s,background .15s}
.drop:hover,.drop.drag,.drop:focus-within{border-color:var(--acc);background:var(--acc-softer)}
.drop input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.drop-ico{display:grid;place-items:center;width:44px;height:44px;border-radius:10px;background:var(--acc-soft);color:var(--acc)}.drop-ico svg{width:22px;height:22px}
.drop-t{font-weight:600}.drop-s{font-size:13px;color:var(--muted)}
.drop-file{display:block;font:600 12.5px var(--mono);color:var(--ok);margin-top:4px;word-break:break-all}

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;font:600 14px var(--font);border-radius:8px;border:1px solid transparent;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s,color .15s,box-shadow .15s}
.btn:hover{text-decoration:none}
.btn svg{width:16px;height:16px;flex-shrink:0}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-primary{background:var(--acc);color:var(--on-acc);box-shadow:var(--shadow-xs)}
.btn-primary:hover:not(:disabled){background:var(--acc-hover)}
.btn-quiet{background:var(--surface);color:var(--ink-2);border-color:var(--border-strong);box-shadow:var(--shadow-xs)}
.btn-quiet:hover:not(:disabled){background:var(--surface-2);color:var(--ink)}
.btn-ghost{background:none;color:var(--ink-2)}.btn-ghost:hover{background:var(--neutral-soft)}
.btn-ok{background:var(--surface);color:var(--ok);border-color:var(--border-strong);box-shadow:var(--shadow-xs)}
.btn-ok:hover:not(:disabled){background:var(--ok-soft);border-color:var(--ok)}
.btn-danger{background:var(--surface);color:var(--bad);border-color:var(--border-strong);box-shadow:var(--shadow-xs)}
.btn-danger:hover:not(:disabled){background:var(--bad-soft);border-color:var(--bad)}
.btn-danger-solid{background:var(--bad);color:#fff}.btn-danger-solid:hover{filter:brightness(.93)}
.btn-sm{height:34px;padding:0 12px;font-size:13px}
.btn-link{height:auto;background:none;border:none;padding:0;color:var(--acc);font-weight:600;cursor:pointer}
.btn-link:hover{text-decoration:underline}
.btn.is-busy{position:relative;color:transparent!important}
.btn.is-busy::after{content:'';position:absolute;width:16px;height:16px;border:2px solid var(--border-strong);border-top-color:var(--acc);border-radius:50%;animation:spin .7s linear infinite}
.btn-primary.is-busy::after{border-color:rgba(255,255,255,.35);border-top-color:#fff}
.icon-btn{display:inline-grid;place-items:center;width:40px;height:40px;flex-shrink:0;border-radius:8px;border:1px solid var(--border-strong);background:var(--surface);color:var(--ink-2);cursor:pointer;transition:background .15s,color .15s}
.icon-btn:hover{background:var(--neutral-soft);color:var(--ink)}
.icon-btn svg{width:18px;height:18px}
.icon-btn.plain{border-color:transparent;background:none}
.icon-btn-sm{width:34px;height:34px}
@media (hover:none),(max-width:959px){.btn{height:44px}.btn-sm{height:40px}.icon-btn{width:44px;height:44px}input,select,textarea{font-size:16px!important}}

/* ── Status, Hinweise, Leerzustände ────────────────────────────────────── */
.sp{display:inline-block;width:16px;height:16px;flex-shrink:0;border:2px solid var(--border-strong);border-top-color:var(--acc);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.loading{display:flex;align-items:center;justify-content:center;gap:10px;padding:48px 0;color:var(--muted)}
.progress-line{display:flex;align-items:center;gap:10px;color:var(--ink-2);margin-top:12px}
.tone-ok{--tc:var(--ok);--tt:var(--ok-soft)}.tone-warn{--tc:var(--warn);--tt:var(--warn-soft)}.tone-bad{--tc:var(--bad);--tt:var(--bad-soft)}
.tone-info{--tc:var(--info);--tt:var(--info-soft)}.tone-muted{--tc:var(--muted);--tt:var(--neutral-soft)}.tone-acc{--tc:var(--acc);--tt:var(--acc-softer)}
.badge{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;border-radius:999px;font-size:12px;font-weight:500;line-height:1;white-space:nowrap;color:var(--tc,var(--muted));background:var(--tt,var(--neutral-soft))}
.badge::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}
.dot{display:inline-block;width:10px;height:10px;border-radius:3px;flex-shrink:0;background:var(--dc,var(--acc))}
.alert{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding:12px 14px;margin:12px 0;border:1px solid color-mix(in srgb,var(--tc,var(--info)) 30%,transparent);background:var(--tt,var(--info-soft));border-radius:8px;font-size:14px;color:var(--ink)}
.alert>svg{width:18px;height:18px;flex-shrink:0;color:var(--tc,var(--info))}
.alert:has(>svg){justify-content:flex-start;flex-wrap:nowrap}
.alert-bad{--tc:var(--bad);--tt:var(--bad-soft)}.alert-warn{--tc:var(--warn);--tt:var(--warn-soft)}.alert-ok{--tc:var(--ok);--tt:var(--ok-soft)}
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:40px 16px}
.empty-ico{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--acc-softer);color:var(--acc);margin-bottom:14px}
.empty-ico svg{width:22px;height:22px}
.empty-title{font-weight:600;font-size:16px}
.empty-text{color:var(--muted);margin-top:4px;max-width:48ch}
.empty-action{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.law{border:1px solid var(--warn-line);background:var(--warn-soft);border-radius:10px;margin:0 0 16px}
.law>summary{display:flex;align-items:center;gap:10px;padding:12px 16px;cursor:pointer;list-style:none;font-weight:600}
.law>summary::-webkit-details-marker{display:none}
.law-ico{display:grid;color:var(--warn)}.law-ico svg{width:18px;height:18px}
.law .chev{margin-left:auto;display:grid;color:var(--muted);transition:transform .2s}.law .chev svg{width:16px;height:16px}
.law[open] .chev{transform:rotate(90deg)}
.law-body{padding:0 16px 14px}
.law-intro{font-size:13px;color:var(--ink-2);margin-bottom:8px}
.law-g{font-size:12.5px;font-weight:600;color:var(--ink-2);margin:12px 0 4px}
.law ul{list-style:none}
.law li{padding:6px 0;border-top:1px solid var(--warn-line);font-size:13.5px}
.law.ok{display:flex;align-items:center;gap:10px;padding:12px 16px;border-color:color-mix(in srgb,var(--ok) 30%,transparent);background:var(--ok-soft);font-size:14px}
.law.ok .law-ico{color:var(--ok)}

/* ── Tabellen, Listen, Reiter ──────────────────────────────────────────── */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch;background:var(--surface);border:1px solid var(--border);border-radius:8px}
table{width:100%;border-collapse:separate;border-spacing:0;font-size:14px}
thead th{position:sticky;top:0;z-index:1;background:var(--surface-2);text-align:left;font-size:12.5px;font-weight:600;color:var(--muted);padding:10px 14px;border-bottom:1px solid var(--border);white-space:nowrap}
tbody th{text-align:left;font-weight:500;color:var(--muted);padding:12px 14px;border-bottom:1px solid var(--border)}
td{padding:12px 14px;border-bottom:1px solid var(--border);vertical-align:middle}
tbody tr:last-child>*{border-bottom:none}
tbody tr:hover>td{background:var(--surface-2)}
th.r,td.r{text-align:right}
td.n{font-family:var(--mono);font-size:13.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
tr.is-me>td{background:var(--acc-softer)}
tr.is-inactive td{color:var(--muted)}
.cell-sub{display:block;font-size:12.5px;color:var(--muted)}
.bar-cell{display:flex;align-items:center;gap:10px;min-width:140px}
.bar-cell .meter{flex:1;margin:0}
.list{list-style:none}
.item{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:14px 0;border-bottom:1px solid var(--border)}
.item:first-child{padding-top:0}.item:last-child{border-bottom:none;padding-bottom:0}
.item-main{flex:1 1 260px;min-width:0}
.item-t{font-weight:600;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.item-s{font-size:14px;color:var(--ink-2);margin-top:2px}
.item-n{font-size:13px;color:var(--muted);margin-top:2px;white-space:pre-line;overflow-wrap:anywhere}
.item-actions{display:flex;flex-wrap:wrap;gap:8px}
.tabs{display:flex;gap:4px;overflow-x:auto;border-bottom:1px solid var(--border);margin-bottom:24px;scrollbar-width:thin}
.tab{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 12px;margin-bottom:-1px;font-size:14px;font-weight:500;color:var(--muted);background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap}
.tab:hover{color:var(--ink);text-decoration:none}
.tab[aria-selected="true"],.tab[aria-current="page"]{color:var(--acc);border-bottom-color:var(--acc);font-weight:600}
.tab-n{font-size:12px;font-weight:600;background:var(--neutral-soft);color:var(--muted);border-radius:999px;padding:1px 8px}
.tab[aria-selected="true"] .tab-n{background:var(--acc-soft);color:var(--acc)}
.tab .dirty{width:7px;height:7px;border-radius:50%;background:var(--warn)}

/* ── Dialoge, Toasts ───────────────────────────────────────────────────── */
dialog{border:none;padding:0;background:transparent;color:inherit;max-width:none;max-height:none}
dialog::backdrop{background:rgba(17,24,39,.45)}
.dlg{margin:auto;width:min(560px,calc(100vw - 24px))}
.dlg-wide{width:min(840px,calc(100vw - 24px))}
.dlg-form{display:flex;flex-direction:column;max-height:calc(100dvh - 32px);background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-lg);overflow:hidden}
.dlg[open]{animation:pop .18s cubic-bezier(.2,.9,.3,1)}
@keyframes pop{from{opacity:0;transform:translateY(6px) scale(.98)}}
.dlg-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 16px 16px 24px;border-bottom:1px solid var(--border)}
.dlg-title{font-size:18px;font-weight:600}
.dlg-body{padding:20px 24px;overflow-y:auto}
.dlg-status:empty{display:none}
.dlg-status{margin:0 24px 16px;padding:10px 12px;border-radius:8px;background:var(--bad-soft);color:var(--bad);font-size:14px}
.dlg-foot{display:flex;flex-wrap:wrap-reverse;justify-content:flex-end;gap:8px;padding:16px 24px;border-top:1px solid var(--border);background:var(--surface-2)}
@media (max-width:599px){.dlg,.dlg-wide{width:100vw;margin:auto 0 0}.dlg-form{border-radius:16px 16px 0 0;max-height:92dvh;padding-bottom:env(safe-area-inset-bottom)}.dlg-foot .btn{flex:1}}
.toasts{position:fixed;z-index:300;left:12px;right:12px;bottom:calc(72px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:8px;pointer-events:none}
@media (min-width:960px){.toasts{left:auto;right:24px;bottom:24px;width:400px}}
.toast{pointer-events:auto;display:flex;align-items:flex-start;gap:12px;padding:12px 10px 12px 14px;background:var(--surface);color:var(--ink);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow-lg);font-size:14px;animation:pop .2s ease}
.toast.out{opacity:0;transition:opacity .2s}
.toast-ico svg{width:20px;height:20px}
.toast-ok .toast-ico{color:var(--ok)}.toast-err .toast-ico{color:var(--bad)}.toast-info .toast-ico{color:var(--info)}
.toast-err{border-left:3px solid var(--bad)}.toast-ok{border-left:3px solid var(--ok)}.toast-info{border-left:3px solid var(--info)}
.toast-msg{flex:1;padding-top:1px}
.toast-x{background:none;border:none;color:var(--muted);cursor:pointer;width:28px;height:28px;display:grid;place-items:center;border-radius:6px}
.toast-x:hover{background:var(--neutral-soft)}
.toast-x svg{width:14px;height:14px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
@media print{.side,.mtop,.bar,.toasts,.page-actions,.btn{display:none!important}.app{padding:0!important}}