/* ===== Design-Tokens ===== */
:root {
  color-scheme: light;
  /* Farben (hell) */
  --bg: #f4f5f8; --panel: #fff; --ink: #18202d; --muted: #556073; --line: #d5dae3; --line-strong: #7d8799;
  --accent: #1a56b0; --accent-hover: #144590; --accent-ink: #fff;
  --ok: #14673a; --ok-bg: #e3f3ea; --warn: #7a4e00; --warn-bg: #fcefd0; --bad: #a3211a; --bad-bg: #fbe4e1;
  --info: #1a56b0; --info-bg: #e5edfa; --focus: #0b5fd8;
  /* Vollflächen mit Weißtext (Kontrast >= 4,5:1) */
  --ok-solid: #14673a; --bad-solid: #a3211a; --toast-bg: #17202e; --toast-ink: #fff;
  --input-bg: #fff; --hover: #eceff5; --row-hover: #eef3fb; --badge-bg: #e6e9f0; --badge-ink: #333e53;
  --skeleton: #e6e9f0; --skeleton-hi: #f3f5f9;
  --nav-bg: #17202e; --nav-ink: #cfd6e4; --nav-muted: #9aa5ba; --nav-hover: #222e42; --nav-active: #2a3a55;
  --occupied: #eceff4; --overlay: rgba(15, 20, 30, .5);
  /* Typografie */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-xs: 12px; --fs-sm: 13px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 20px; --fs-xxl: 26px;
  --lh: 1.45;
  /* Abstände */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
  /* Radien */
  --r-sm: 4px; --r-md: 6px; --r-lg: 8px; --r-pill: 999px;
  /* Schatten */
  --sh-1: 0 1px 2px rgba(15, 20, 30, .08); --sh-2: 0 4px 16px rgba(15, 20, 30, .18); --sh-3: 0 10px 40px rgba(15, 20, 30, .28);
  /* Touchziele */
  --touch: 40px;
  font-family: var(--font); font-size: var(--fs-md); line-height: var(--lh); color: var(--ink);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e131b; --panel: #171e29; --ink: #e8ecf3; --muted: #a3aec1; --line: #2c3748; --line-strong: #6b7a94;
  --accent: #6aa5f5; --accent-hover: #8bbcf8; --accent-ink: #08101c;
  --ok: #6fd89c; --ok-bg: #12301f; --warn: #f0c168; --warn-bg: #3a2d10; --bad: #ff9a92; --bad-bg: #3d1a18;
  --info: #8bbcf8; --info-bg: #172a47; --focus: #8bbcf8;
  --ok-solid: #1c7a47; --bad-solid: #c0372e; --toast-bg: #2c3748; --toast-ink: #fff;
  --input-bg: #0e141d; --hover: #212b3a; --row-hover: #1c2636; --badge-bg: #263042; --badge-ink: #cdd6e4;
  --skeleton: #212b3a; --skeleton-hi: #2c3748;
  --nav-bg: #0a0e14; --nav-ink: #c2cad9; --nav-muted: #8793ab; --nav-hover: #151d2a; --nav-active: #1f2d45;
  --occupied: #1c2431; --overlay: rgba(0, 0, 0, .68);
  --sh-1: 0 1px 2px rgba(0, 0, 0, .4); --sh-2: 0 4px 16px rgba(0, 0, 0, .5); --sh-3: 0 10px 40px rgba(0, 0, 0, .6);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0e131b; --panel: #171e29; --ink: #e8ecf3; --muted: #a3aec1; --line: #2c3748; --line-strong: #6b7a94;
    --accent: #6aa5f5; --accent-hover: #8bbcf8; --accent-ink: #08101c;
    --ok: #6fd89c; --ok-bg: #12301f; --warn: #f0c168; --warn-bg: #3a2d10; --bad: #ff9a92; --bad-bg: #3d1a18;
    --info: #8bbcf8; --info-bg: #172a47; --focus: #8bbcf8;
    --ok-solid: #1c7a47; --bad-solid: #c0372e; --toast-bg: #2c3748; --toast-ink: #fff;
    --input-bg: #0e141d; --hover: #212b3a; --row-hover: #1c2636; --badge-bg: #263042; --badge-ink: #cdd6e4;
    --skeleton: #212b3a; --skeleton-hi: #2c3748;
    --nav-bg: #0a0e14; --nav-ink: #c2cad9; --nav-muted: #8793ab; --nav-hover: #151d2a; --nav-active: #1f2d45;
    --occupied: #1c2431; --overlay: rgba(0, 0, 0, .68);
    --sh-1: 0 1px 2px rgba(0, 0, 0, .4); --sh-2: 0 4px 16px rgba(0, 0, 0, .5); --sh-3: 0 10px 40px rgba(0, 0, 0, .6);
  }
}
@media (pointer: coarse), (max-width: 900px) {
  :root { --touch: 44px; }
}

/* ===== Basis ===== */
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); }
h1 { font-size: var(--fs-xl); margin: 0 0 var(--sp-3); line-height: 1.25; }
h2 { font-size: 15px; margin: 18px 0 var(--sp-2); }
h3 { font-size: var(--fs-sm); margin: var(--sp-3) 0 6px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Fokus: immer sichtbar */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.nav :focus-visible { outline-color: #fff; outline-offset: -2px; }
.modal > h2:focus { outline: none; }
.modal > h2:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Hilfsklassen */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: var(--sp-2); top: -64px; z-index: 100; padding: var(--sp-2) var(--sp-4); background: var(--accent); color: var(--accent-ink); border-radius: var(--r-md); font-weight: 600; }
.skip-link:focus, .skip-link:focus-visible { top: var(--sp-2); text-decoration: none; }
[hidden] { display: none !important; }

/* ===== Layout ===== */
.shell { display: grid; grid-template-columns: 200px minmax(0, 1fr); min-height: 100vh; }
.nav { background: var(--nav-bg); color: var(--nav-ink); padding: 14px 0; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.nav .brand { padding: 0 16px 14px; font-weight: 600; color: #fff; line-height: 1.25; }
.nav .brand small { display: block; font-weight: 400; color: var(--nav-muted); font-size: 11px; }
.nav a { display: flex; align-items: center; min-height: var(--touch); padding: 4px 16px; color: var(--nav-ink); }
.nav a:hover { background: var(--nav-hover); text-decoration: none; }
.nav a.active, .nav a[aria-current="page"] { background: var(--nav-active); color: #fff; }
.nav .sep { margin: 10px 16px 4px; font-size: 11px; text-transform: uppercase; color: var(--nav-muted); letter-spacing: .05em; }
.nav .me { padding: 14px 16px 0; font-size: var(--fs-xs); color: var(--nav-muted); }
.nav button { margin: 6px 16px 0; }
main { padding: 20px 24px 60px; max-width: 1280px; width: 100%; }
.pagehead { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-3); }
.pagehead h1 { margin: 0; }
.pagehead .grow { flex: 1; }
.card, .notice, .modal { overflow-wrap: anywhere; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 16px; margin-bottom: 14px; box-shadow: var(--sh-1); }
.grid { display: grid; gap: 14px; }
.grid.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat { font-size: var(--fs-xxl); font-weight: 600; }
.stat small { font-size: var(--fs-xs); color: var(--muted); font-weight: 400; display: block; }

/* ===== Tabellen ===== */
table { width: 100%; border-collapse: collapse; background: var(--panel); }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: var(--fs-xs); color: var(--muted); font-weight: 600; white-space: nowrap; background: var(--panel); position: sticky; top: 0; z-index: 1; box-shadow: inset 0 -1px 0 var(--line); }
caption { text-align: left; padding: 8px 10px; color: var(--muted); font-size: var(--fs-sm); }
tr.click { cursor: pointer; }
tr.click:hover td { background: var(--row-hover); }
tr.click:focus-visible { outline-offset: -2px; }
tr.click:focus-visible td { background: var(--row-hover); }
.tablewrap { overflow: auto; max-height: 80vh; border: 1px solid var(--line); border-radius: var(--r-md); }
.tablewrap table { border: 0; }
.right { text-align: right; }

/* ===== Formulare und Schaltflächen ===== */
.toolbar { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin-bottom: var(--sp-3); }
.toolbar .grow { flex: 1; }
input, select, textarea, button { font: inherit; }
input[type=text], input[type=date], input[type=number], input[type=search], input[type=email], select, textarea {
  padding: 6px 10px; min-height: var(--touch); border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--input-bg); color: var(--ink); min-width: 0; width: 100%;
}
.toolbar input, .toolbar select { width: auto; }
textarea { min-height: 80px; resize: vertical; }
input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--accent); }
button { padding: 6px 14px; min-height: var(--touch); border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--panel); color: var(--ink); cursor: pointer; }
button:hover { background: var(--hover); }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
button.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
button.danger { border-color: var(--bad); color: var(--bad); }
button.danger:hover { background: var(--bad-bg); }
button:disabled { opacity: .55; cursor: not-allowed; }
button.loading { position: relative; color: transparent !important; pointer-events: none; }
button.loading::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border: 2px solid var(--ink); border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
button.primary.loading::after { border-color: var(--accent-ink); border-right-color: transparent; }
@keyframes spin { to { transform: rotate(360deg); } }
.field { display: flex; flex-direction: column; gap: 3px; margin-bottom: 10px; }
.field legend, .field label { font-size: var(--fs-xs); color: var(--muted); }
.field legend.req::after, .field .req::after { content: " *"; color: var(--bad); }
fieldset.field { border: 0; padding: 0; min-width: 0; }
fieldset.field legend { padding: 0; margin-bottom: 3px; }
.field .hint { font-size: var(--fs-xs); color: var(--muted); }
.field .err { font-size: var(--fs-xs); color: var(--bad); font-weight: 600; }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--bad); box-shadow: 0 0 0 1px var(--bad); }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.fields .wide { grid-column: 1 / -1; }
.checks { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.checks label { display: flex; gap: 6px; align-items: center; min-height: 28px; font-size: var(--fs-sm); color: var(--ink); }

/* ===== Badges (Symbol zusätzlich zur Farbe) ===== */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: var(--r-pill); font-size: var(--fs-xs); background: var(--badge-bg); color: var(--badge-ink); white-space: nowrap; }
.badge::before { content: "\2022"; font-weight: 700; line-height: 1; }
.badge.ok { background: var(--ok-bg); color: var(--ok); }
.badge.ok::before { content: "\2713"; }
.badge.warn { background: var(--warn-bg); color: var(--warn); }
.badge.warn::before { content: "!"; }
.badge.bad { background: var(--bad-bg); color: var(--bad); }
.badge.bad::before { content: "\2715"; }
.badge.info { background: var(--info-bg); color: var(--info); }
.badge.info::before { content: "i"; font-style: italic; font-family: Georgia, serif; }
.muted { color: var(--muted); }
.mono { font-variant-numeric: tabular-nums; font-family: ui-monospace, Consolas, monospace; }

/* ===== Tabs ===== */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 14px; flex-wrap: wrap; }
.tabs button { border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; padding: 8px 12px; }
.tabs button:hover { background: var(--hover); }
.tabs button.active, .tabs button[aria-selected="true"] { border-bottom-color: var(--accent); color: var(--accent); font-weight: 600; }
.tabs button:focus-visible { outline-offset: -2px; }

/* ===== Hinweise, leere Zustände, Skeleton ===== */
.notice { padding: 8px 12px; border-radius: var(--r-sm); margin: 8px 0; background: var(--info-bg); border-left: 4px solid var(--info); }
.notice.warn { background: var(--warn-bg); border-left-color: var(--warn); }
.notice.bad { background: var(--bad-bg); border-left-color: var(--bad); }
.notice.ok { background: var(--ok-bg); border-left-color: var(--ok); }
.notice ul { margin: 4px 0 0 18px; padding: 0; }
.empty { padding: var(--sp-5) var(--sp-4); text-align: center; color: var(--muted); border: 1px dashed var(--line-strong); border-radius: var(--r-md); background: var(--panel); }
.empty strong { display: block; color: var(--ink); margin-bottom: var(--sp-1); }
.skeleton { display: block; min-height: 1em; border-radius: var(--r-sm); background: linear-gradient(90deg, var(--skeleton) 25%, var(--skeleton-hi) 50%, var(--skeleton) 75%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; color: transparent; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ===== Modal, Toast ===== */
.overlay { position: fixed; inset: 0; background: var(--overlay); display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto; z-index: 20; }
.modal { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); width: min(760px, 100%); padding: 18px 20px; box-shadow: var(--sh-3); }
.modal > h2 { font-size: var(--fs-xl); line-height: 1.25; margin: 0 0 10px; }
.modal .actions { display: flex; gap: var(--sp-2); justify-content: flex-end; margin-top: 14px; flex-wrap: wrap; }
/* Tabellen im Dialog bleiben so niedrig, dass Titel und Aktionsknöpfe ohne Scrollen sichtbar sind */
.modal .tablewrap { max-height: 46vh; }
#toasts { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: var(--sp-2); z-index: 30; }
.toast { background: var(--toast-bg); color: var(--toast-ink); padding: 10px 14px; border-radius: var(--r-md); max-width: 420px; box-shadow: var(--sh-2); }
.toast { display: flex; align-items: flex-start; gap: var(--sp-3); }
.toast-msg { flex: 1; }
.toast .toast-close { min-height: 28px; min-width: 28px; padding: 0 6px; background: transparent; color: inherit; border-color: transparent; font-size: 18px; line-height: 1; }
.toast .toast-close:hover { background: rgba(255, 255, 255, .18); }
.toast.bad { background: var(--bad-solid); }
.toast.ok { background: var(--ok-solid); }
.login { max-width: 380px; margin: 14vh auto; text-align: center; }
.slotgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 6px; }
.slotgrid button { padding: 6px 4px; font-size: var(--fs-sm); }
.slotgrid button.sel { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.slotgrid button.occupied { background: var(--occupied); color: var(--muted); cursor: not-allowed; }
.slot-why { display: block; font-size: 11px; }
.slot-selected { margin: var(--sp-2) 0; font-weight: 600; }
.slotgrid button[aria-pressed="true"] { font-weight: 700; }
.kv { display: grid; grid-template-columns: fit-content(180px) minmax(0, 1fr); gap: 4px 12px; }
.kv dd, .kv dt { overflow-wrap: anywhere; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
.row { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }

/* ===== Mobil ===== */
@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .nav { position: static; height: auto; display: flex; flex-wrap: wrap; padding: 6px; }
  .nav .brand, .nav .sep, .nav .me { display: none; }
  .grid.c2, .grid.c3, .grid.c4, .fields { grid-template-columns: 1fr; }
  main { padding: 14px; }
  .tablewrap.stack table, .tablewrap.stack tbody, .tablewrap.stack tr, .tablewrap.stack td { display: block; width: 100%; }
  .tablewrap.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tablewrap.stack td[data-label]::before { content: attr(data-label) ": "; color: var(--muted); font-size: var(--fs-xs); font-weight: 600; }
}
/* Mobiles Menü */
.menu-toggle { display: none; }
@media (max-width: 900px) {
  .menu-toggle { display: flex; align-items: center; width: 100%; border: 0; border-bottom: 1px solid var(--nav-active); border-radius: 0; background: var(--nav-bg); color: var(--nav-ink); padding: 6px 16px; font-weight: 600; }
  .menu-toggle:hover { background: var(--nav-hover); }
  .menu-toggle:focus-visible { outline-color: #fff; outline-offset: -2px; }
  .nav:not(.open) { display: none; }
  .nav.open a { flex: 1 1 140px; }
}
.loading { padding: var(--sp-2) 0; }
.loading .skeleton { height: 44px; margin-bottom: var(--sp-3); }
.loading .skeleton:first-of-type { width: 40%; height: 28px; }
/* Modal als Bottom-Sheet */
@media (max-width: 640px) {
  .overlay { align-items: flex-end; padding: 0; }
  .modal { width: 100%; max-height: 92vh; overflow-y: auto; border-radius: var(--r-lg) var(--r-lg) 0 0; border-bottom: 0; padding: 16px; }
  .modal .actions { position: sticky; bottom: -16px; background: var(--panel); padding: var(--sp-3) 0 var(--sp-1); }
  .modal .actions button { flex: 1 1 auto; }
  #toasts { left: 16px; right: 16px; bottom: 16px; }
  .toast { max-width: none; }
}

/* Bewegung reduzieren (global) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}


/* Theme-Umschalter */
.nav .theme { margin: 10px 16px 0; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--nav-muted); }
.nav .theme button { margin: 0; padding: 3px 9px; background: transparent; color: var(--nav-ink); border-color: var(--nav-active); }
.nav .theme button:hover { background: var(--nav-hover); }
.nav button { background: transparent; color: var(--nav-ink); border-color: var(--nav-active); }
.nav button:hover { background: var(--nav-hover); }

/* Dienstnummern */
.slotgrid button.blocked { background: var(--bad-bg); color: var(--bad); border-color: transparent; }
.slotgrid button.placeholder { background: var(--warn-bg); color: var(--warn); border-color: transparent; }
.stats { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.linkbox { display: flex; gap: 8px; margin: 8px 0; }
.linkbox input { font-family: ui-monospace, Consolas, monospace; font-size: 12px; }

/* Unterschriftsseite (Einmallink) */
@font-face { font-family: "Great Vibes"; src: url("/fonts/GreatVibes-Regular.ttf") format("truetype"); font-display: swap; }
.signpage main, .signwrap { max-width: 920px; margin: 0 auto; padding: 24px 16px 60px; }
.signwrap h1 { margin-bottom: 4px; }
.signwrap .sub { color: var(--muted); margin-bottom: 14px; }
.pdfframe { width: 100%; height: 68vh; min-height: 420px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
.signbox { margin-top: 16px; padding: 16px 18px; }
.signbox label.confirm { display: flex; gap: 8px; align-items: flex-start; line-height: 1.35; }
.signpad { position: relative; margin: 14px 0 4px; border: 1px dashed var(--line); border-radius: 8px; background: var(--input-bg); min-height: 132px; display: flex; align-items: flex-end; justify-content: center; padding: 6px 12px; overflow: hidden; }
.signpad .x { position: absolute; left: 14px; bottom: 28px; font-size: 20px; color: var(--muted); }
.signpad .hint { position: absolute; top: 8px; left: 14px; font-size: 12px; color: var(--muted); }
.signpad svg { width: 100%; max-width: 560px; height: 120px; color: var(--accent); overflow: visible; }
.sig-text { font-family: "Great Vibes", "Segoe Script", "Lucida Handwriting", "Brush Script MT", "Snell Roundhand", cursive; font-size: 68px; font-style: normal; fill: currentColor; fill-opacity: 0; stroke: currentColor; stroke-width: 1; stroke-dasharray: 1400; stroke-dashoffset: 1400; }
.sig-line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 520; stroke-dashoffset: 520; }
.signing .sig-text { animation: sig-draw 1.7s cubic-bezier(.4, .1, .3, 1) forwards, sig-fill .9s ease 1.5s forwards; }
.signing .sig-line { animation: sig-draw-line .9s ease-out 1.9s forwards; }
.signing .sig-clip rect { animation: sig-reveal 2.1s cubic-bezier(.4, .1, .3, 1) forwards; }
.signed-final .sig-text { stroke-dashoffset: 0; fill-opacity: 1; stroke-width: 0; }
.signed-final .sig-line { stroke-dashoffset: 0; }
@keyframes sig-draw { to { stroke-dashoffset: 0; } }
@keyframes sig-fill { to { fill-opacity: 1; stroke-width: 0; } }
@keyframes sig-draw-line { to { stroke-dashoffset: 0; } }
@keyframes sig-reveal { from { width: 0; } to { width: 560px; } }
.signing .sig-clip rect { width: 0; }
.signdone { text-align: center; }
.signdone .check { width: 56px; height: 56px; margin: 4px auto 8px; display: block; }
.signdone .check circle { fill: var(--ok-bg); stroke: var(--ok); stroke-width: 2; }
.signdone .check path { fill: none; stroke: var(--ok); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: sig-draw .5s ease-out .1s forwards; }
@media (prefers-reduced-motion: reduce) {
  .signing .sig-text, .signing .sig-line, .signing .sig-clip rect, .signdone .check path { animation-duration: .01s; animation-delay: 0s; }
}

/* ===== Kleine Bildschirme (Etappe 5) ===== */
@media (max-width: 640px) {
  main { padding: 12px; }
  h1 { font-size: 18px; }
  .kv { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .kv dd { margin-bottom: var(--sp-2); }
  .toolbar > input, .toolbar > select, .toolbar > button { flex: 1 1 140px; width: auto; }
  .toolbar .grow { flex-basis: 0; }
  .checks label { min-height: var(--touch); }
  input[type=checkbox] { width: 22px; height: 22px; }
  .tabs button { flex: 1 1 auto; }
  .card { padding: 12px; }
  .stat { font-size: 22px; }
}
@media (max-width: 380px) {
  main { padding: 10px; }
  .slotgrid { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
  .linkbox { flex-wrap: wrap; }
}
@media (pointer: coarse) {
  .checks label, .field label.confirm { min-height: var(--touch); }
}