/* ======================================================================
   StuRaOS — unified design tokens
   Institutional & modern · quiet confidence · editorial rhythm
   Type: Archivo Narrow (display) + Inter (body) + JetBrains Mono (data)
   Accent: deep navy + ember + pine (success) — all oklch, same chroma
   ====================================================================== */

:root {
  /* Type */
  --font-display: "Archivo Narrow", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Neutrals (warm institutional) */
  --paper: #fafaf7;
  --surface: #ffffff;
  --surface-2: #f4f3ee;
  --surface-3: #ebe9e1;
  --ink: #161513;
  --ink-2: #3a3831;
  --ink-muted: #6b685f;
  --ink-faint: #9a968b;
  --border: rgba(22, 21, 19, 0.09);
  --border-strong: rgba(22, 21, 19, 0.16);

  /* Accents — all oklch(50% 0.11 H) / oklch(62% 0.15 H) */
  --accent: oklch(42% 0.11 252);           /* deep navy */
  --accent-ink: oklch(36% 0.11 252);
  --accent-soft: oklch(93% 0.035 252);
  --accent-faint: oklch(96% 0.02 252);

  --ember: oklch(56% 0.14 52);             /* ember/amber — caution */
  --ember-soft: oklch(94% 0.05 60);
  --ember-ink: oklch(40% 0.14 56);         /* AA pill/chip text on -soft */
  --pine: oklch(48% 0.11 165);             /* success */
  --pine-soft: oklch(94% 0.04 165);
  --pine-ink: oklch(36% 0.11 165);
  --rust: oklch(52% 0.15 29);              /* danger */
  --rust-soft: oklch(94% 0.05 29);
  --rust-ink: oklch(38% 0.15 29);

  /* Shadows — institutional = very subtle */
  --sh-1: 0 1px 0 rgba(22, 21, 19, 0.04), 0 1px 2px rgba(22, 21, 19, 0.04);
  --sh-2: 0 1px 0 rgba(22, 21, 19, 0.05), 0 4px 14px -4px rgba(22, 21, 19, 0.08);
  --sh-3: 0 2px 0 rgba(22, 21, 19, 0.06), 0 14px 40px -14px rgba(22, 21, 19, 0.16);

  /* Overlay scrim — #160. Theme-STABLE: stays a dark veil in both modes so it
     never inverts to a light wash (the bg-ink/80 bug). */
  --scrim: rgba(22, 21, 19, 0.46);

  /* Radii */
  --r-xs: 3px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;

  /* Spacing */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 48px;

  /* Motion */
  --e-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --d-fast: 120ms;
  --d-med: 220ms;

  /* Accessibility baseline (matches repo app.css) */
  --touch-target-min: 44px;
  --focus-ring: var(--accent);
}

.dark {
  --paper: #0e0f10;
  --surface: #161719;
  --surface-2: #1d1e21;
  --surface-3: #25262a;
  --ink: #edece7;
  --ink-2: #c4c2ba;
  --ink-muted: #8c8a82;
  --ink-faint: #5e5c55;
  --border: rgba(237, 236, 231, 0.08);
  --border-strong: rgba(237, 236, 231, 0.16);

  --accent: oklch(72% 0.13 252);
  --accent-ink: oklch(78% 0.11 252);
  --accent-soft: oklch(28% 0.06 252);
  --accent-faint: oklch(22% 0.04 252);
  --ember: oklch(74% 0.14 60);
  --ember-soft: oklch(28% 0.07 60);
  --ember-ink: oklch(82% 0.10 60);
  --pine: oklch(70% 0.12 165);
  --pine-soft: oklch(26% 0.06 165);
  --pine-ink: oklch(82% 0.10 165);
  --rust: oklch(70% 0.14 29);
  --rust-soft: oklch(28% 0.08 29);
  --rust-ink: oklch(82% 0.10 29);

  --sh-1: 0 1px 0 rgba(0,0,0,0.4);
  --sh-2: 0 1px 0 rgba(0,0,0,0.5), 0 4px 14px -4px rgba(0, 0, 0, 0.4);
  --sh-3: 0 2px 0 rgba(0,0,0,0.6), 0 14px 40px -14px rgba(0, 0, 0, 0.6);
  /* #160 — darker scrim in dark mode so the page reads as backgrounded */
  --scrim: rgba(0, 0, 0, 0.66);
}

html.radius-sharp { --r-xs: 0; --r-sm: 2px; --r-md: 3px; --r-lg: 5px; }
html.density-compact { --s-3: 8px; --s-4: 12px; --s-5: 16px; --s-6: 18px; }

/* ====================================================================== */
/* Base */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
}
h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.01em; margin: 0; color: var(--ink); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.display { font-family: var(--font-display); }
.eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-muted); font-weight: 500;
}
button { font-family: inherit; }

/* Accessibility baseline — mirrors repo app.css */
::selection { background: var(--accent-faint); color: var(--ink); }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.icon-btn, .sb-item { min-width: var(--touch-target-min); min-height: var(--touch-target-min); }
@media (prefers-reduced-motion: reduce) {
  :root, .dark { --d-fast: 1ms; --d-med: 1ms; --e-out: linear; }
  *, *::before, *::after {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* ====================================================================== */
/* Shell */
.app-shell {
  display: grid;
  grid-template-columns: 232px 1fr;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
}

.sidebar {
  border-right: 1px solid var(--border);
  background: var(--surface);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
  overflow: hidden;
}
.sb-brand {
  padding: 18px 18px 14px;
  display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid var(--border);
}
.sb-logo {
  width: 30px; height: 30px;
  border-radius: 4px;
  background: var(--ink);
  color: var(--paper);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  letter-spacing: -0.02em;
  position: relative;
}
.sb-logo::after {
  content:''; position:absolute; right:-3px; bottom:-3px;
  width:8px; height:8px; background: var(--ember); border-radius: 2px;
}
.sb-brand-txt { line-height: 1.1; }
.sb-brand-txt .n {
  font-family: var(--font-display); font-weight: 600; font-size: 15px; letter-spacing: -0.01em;
}
.sb-brand-txt .s {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.14em;
  color: var(--ink-muted); text-transform: uppercase; margin-top: 2px;
}

.sb-section {
  padding: 18px 12px 6px;
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 500;
}
.sb-nav { padding: 0 8px; flex: 1; overflow-y: auto; }
.sb-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--r-sm);
  color: var(--ink-2); cursor: pointer;
  font-size: 13.5px; font-weight: 450;
  position: relative;
  transition: background var(--d-fast) var(--e-out);
  user-select: none;
}
.sb-item:hover { background: var(--surface-2); color: var(--ink); }
.sb-item.active { color: var(--ink); background: var(--accent-faint); }
.sb-item.active::before {
  content:''; position: absolute; left: -8px; top: 8px; bottom: 8px;
  width: 2px; background: var(--accent); border-radius: 0 2px 2px 0;
}
.sb-badge {
  margin-left: auto;
  font-family: var(--font-mono); font-size: 10px;
  background: var(--ember-soft); color: var(--ember);
  padding: 1px 6px; border-radius: 3px; font-weight: 500;
}
.sb-item.active .sb-badge { background: var(--accent); color: var(--surface); }

.sb-foot {
  border-top: 1px solid var(--border);
  padding: 10px 12px; display: flex; align-items: center; gap: 10px;
}
.avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--accent);
  color: var(--surface);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 600; font-size: 12px;
}
.sb-foot .n { font-size: 12.5px; font-weight: 500; line-height: 1.15; }
.sb-foot .r { font-family: var(--font-mono); font-size: 10px; color: var(--ink-muted); letter-spacing: 0.06em; }

/* ====================================================================== */
/* Topbar */
.topbar {
  height: 56px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  display: flex; align-items: center; gap: 14px;
  padding: 0 24px;
  position: sticky; top: 0; z-index: 5;
  min-width: 0;
  flex-wrap: nowrap;
}
.crumbs {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-muted);
  display: flex; align-items: center; gap: 8px;
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
.crumbs .sep { color: var(--ink-faint); }
.crumbs .last { color: var(--ink); }
.topbar .search {
  margin-left: auto; max-width: 260px; flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
}
.topbar .search > span {
  overflow: hidden; text-overflow: ellipsis;
  font-size: 12.5px;
}
.topbar .search .k {
  margin-left: auto; font-family: var(--font-mono); font-size: 10px;
  padding: 1px 5px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 3px;
}
.topbar .icon-btn {
  width: 32px; height: 32px; border-radius: var(--r-sm);
  display: grid; place-items: center; cursor: pointer;
  color: var(--ink-2); background: transparent; border: none;
  position: relative;
  flex-shrink: 0;
}
.topbar .icon-btn:hover { background: var(--surface-2); color: var(--ink); }
.topbar .icon-btn .dot {
  position: absolute; top: 6px; right: 6px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ember);
  box-shadow: 0 0 0 2px var(--surface);
}

/* ====================================================================== */
/* Main content */
.main {
  padding: 28px 32px 56px;
  max-width: 1280px;
  margin: 0 auto;
}
.page-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 24px; gap: 20px;
}
.page-title {
  font-family: var(--font-display);
  font-size: 34px; font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.1;
}
.page-sub {
  color: var(--ink-muted); font-size: 13.5px; margin-top: 6px;
  max-width: 620px;
}

/* ====================================================================== */
/* Cards & grids */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
}
.card-pad { padding: 18px 20px; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 16px; }
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }

.section-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 14px;
}
.section-head h3 { font-size: 18px; font-weight: 500; }

/* KPI */
.kpi {
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  position: relative;
}
.kpi .label {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-muted);
}
.kpi .val {
  font-family: var(--font-display); font-size: 32px; font-weight: 500;
  letter-spacing: -0.02em; line-height: 1; margin-top: 8px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.kpi .delta {
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-muted);
  margin-top: 8px;
}
.kpi .delta.up { color: var(--pine); }
.kpi .delta.down { color: var(--rust); }

/* Featured event card */
.featured {
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--r-md);
  padding: 22px 24px;
  display: grid; grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.featured::before {
  content:''; position: absolute; top:0; left:0; bottom:0; width: 3px;
  background: var(--ember);
}
.featured .eyebrow { color: var(--ember); }
.featured .countdown {
  font-family: var(--font-mono);
  font-size: 36px; font-weight: 500; letter-spacing: -0.02em;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
}

/* Rows (shared for upcoming / filelist / etc) */
.row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  transition: background var(--d-fast);
}
.row:last-child { border-bottom: none; }
.row:hover { background: var(--surface-2); }
.row .primary { font-weight: 500; font-size: 13.5px; color: var(--ink); }
.row .secondary { font-size: 12px; color: var(--ink-muted); margin-top: 2px; }

/* Pills */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px;
  border-radius: 100px;
  font-family: var(--font-mono); font-size: 10.5px;
  font-weight: 500; letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--surface-2); color: var(--ink-2);
  border: 1px solid var(--border);
}
.pill-ico { flex-shrink: 0; margin-left: -1px; opacity: .85; }
.pill-accent { background: var(--accent-soft); color: var(--accent-ink); border-color: transparent; }
.pill-success { background: var(--pine-soft); color: var(--pine-ink); border-color: transparent; }
.pill-warn { background: var(--ember-soft); color: var(--ember-ink); border-color: transparent; }
.pill-danger { background: var(--rust-soft); color: var(--rust-ink); border-color: transparent; }
.pill-live::before {
  content:''; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  animation: pulse 1.8s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; } 50% { opacity: 0.35; }
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  border-radius: var(--r-sm);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--ink);
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  transition: all var(--d-fast);
  line-height: 1;
}
.btn:hover { background: var(--surface-2); }
.btn-primary {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}
.btn-primary:hover { background: var(--ink-2); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: var(--surface-2); color: var(--ink); }
.btn-sm { padding: 5px 10px; font-size: 12px; }

/* Inputs */
.input, .select {
  padding: 7px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font-family: inherit; font-size: 13px;
  width: 100%;
}
.input:focus, .select:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }

/* ====================================================================== */
/* Calendar */
.cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.cal-hd {
  background: var(--surface-2);
  padding: 8px 12px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-muted); font-weight: 500;
}
.cal-cell {
  background: var(--surface);
  padding: 10px 10px 6px;
  min-height: 110px; position: relative;
}
.cal-cell .d {
  font-family: var(--font-mono); font-size: 11.5px;
  color: var(--ink-2); margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}
.cal-cell.other { background: var(--surface-2); }
.cal-cell.other .d { color: var(--ink-faint); }
.cal-cell.today { background: var(--accent-faint); }
.cal-cell.today .d {
  color: var(--paper); background: var(--accent);
  display: inline-block; padding: 1px 6px; border-radius: 3px; font-weight: 500;
}
.cal-ev {
  font-size: 11px; margin-top: 3px;
  border-radius: 3px;
  font-weight: 500;
  position: relative;
  /* --c-hue = committee hue (gutter) */
  /* --t-hue, --t-chroma = meeting type (body fill) */
  --c-bar:    oklch(50% 0.13 var(--c-hue, 252));
  --t-fill:   oklch(93% var(--t-chroma, 0.04) var(--t-hue, 252));
  --t-ink:    oklch(34% calc(var(--t-chroma, 0.04) * 2.5) var(--t-hue, 252));
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: stretch;
  overflow: hidden;
  min-height: 20px;
}
.dark .cal-ev {
  --c-bar:    oklch(72% 0.14 var(--c-hue, 252));
  --t-fill:   oklch(26% calc(var(--t-chroma, 0.04) * 1.5) var(--t-hue, 252));
  --t-ink:    oklch(86% calc(var(--t-chroma, 0.04) * 2) var(--t-hue, 252));
}

/* Committee gutter — always committee color */
.cal-ev .cev-gutter {
  display: flex; align-items: center; justify-content: center;
  background: var(--c-bar);
  color: var(--paper);
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.04em;
}
.cal-ev .cev-title {
  padding: 3px 6px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Body = meeting type color; "mine" just reads stronger */
.cal-ev.ghost {
  background: var(--t-fill);
  color: var(--t-ink);
  opacity: 0.82;
}
.cal-ev.ghost:hover { opacity: 1; }
.cal-ev.mine {
  background: var(--t-fill);
  color: var(--t-ink);
  font-weight: 600;
  box-shadow: inset 0 0 0 1.5px var(--c-bar);
}

/* Filter / legend chips */
.com-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px 4px 7px;
  border-radius: 100px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 12px; color: var(--ink-2);
  cursor: pointer;
  transition: all var(--d-fast);
  user-select: none;
  --c-bar: oklch(50% 0.13 var(--c-hue, 252));
}
.dark .com-chip { --c-bar: oklch(72% 0.14 var(--c-hue, 252)); }
.com-chip:hover { background: var(--surface-2); }
.com-chip .swatch {
  width: 10px; height: 10px; border-radius: 2px; background: var(--c-bar);
  flex-shrink: 0;
}
.com-chip.off { opacity: 0.5; }
.com-chip.off .swatch { background: var(--border-strong); }
.com-chip .mine-dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--ink);
  flex-shrink: 0;
}
.com-chip.active { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.com-chip.active .swatch { box-shadow: 0 0 0 1px var(--paper); }

/* Calendar legend — Termin-Art (body-fill colour) + gutter/own-vs-other key.
   The Gremien chips above already legend the committee gutter colours; this
   row explains the meeting-type fill that was previously tooltip-only. */
.cal-legend {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border);
}
.cal-legend .eyebrow { flex-shrink: 0; }
.cal-legend-item {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--ink-2);
}
.cal-legend-sw {
  width: 14px; height: 14px; border-radius: 3px; flex-shrink: 0;
  background: oklch(93% var(--t-chroma, 0.04) var(--t-hue, 252));
  box-shadow: inset 0 0 0 1px oklch(34% calc(var(--t-chroma, 0.04) * 2.5) var(--t-hue, 252) / 0.25);
}
.dark .cal-legend-sw {
  background: oklch(26% calc(var(--t-chroma, 0.04) * 1.5) var(--t-hue, 252));
  box-shadow: inset 0 0 0 1px oklch(86% calc(var(--t-chroma, 0.04) * 2) var(--t-hue, 252) / 0.25);
}
.cal-legend-div { width: 1px; align-self: stretch; background: var(--border); margin: 0 2px; }
.cal-legend-key { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink-muted); }
.cal-legend-bar { width: 5px; height: 15px; border-radius: 2px; background: oklch(50% 0.13 252); flex-shrink: 0; }
.dark .cal-legend-bar { background: oklch(72% 0.14 252); }
.cal-legend-swatchpair { display: inline-flex; gap: 3px; flex-shrink: 0; }
.cal-legend-swatchpair i { width: 13px; height: 14px; border-radius: 3px; display: block; }
.cal-legend-swatchpair i.full  { background: oklch(93% 0.05 165); }
.cal-legend-swatchpair i.faded { background: oklch(93% 0.05 165); opacity: 0.5; }
.dark .cal-legend-swatchpair i.full  { background: oklch(26% 0.06 165); }
.dark .cal-legend-swatchpair i.faded { background: oklch(26% 0.06 165); opacity: 0.5; }

/* Committee monogram (used outside the calendar too — agenda, file headers) */
.com-mono {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.04em;
  padding: 2px 5px; border-radius: 3px;
  --c-bar: oklch(50% 0.13 var(--c-hue, 252));
  --c-soft: oklch(94% 0.04 var(--c-hue, 252));
  --c-ink: oklch(38% 0.11 var(--c-hue, 252));
  background: var(--c-soft); color: var(--c-ink);
  display: inline-flex; align-items: center; gap: 5px;
}
.dark .com-mono {
  --c-soft: oklch(30% 0.07 var(--c-hue, 252));
  --c-ink: oklch(82% 0.10 var(--c-hue, 252));
}
.com-mono .bar { width: 2px; height: 10px; background: var(--c-bar); border-radius: 1px; }

/* ====================================================================== */
/* Files list */
.tree-row {
  padding: 6px 10px;
  border-radius: var(--r-sm);
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--ink-2);
  cursor: pointer;
}
.tree-row:hover { background: var(--surface-2); }
.tree-row.sel { background: var(--accent-faint); color: var(--ink); font-weight: 500; }

.file-row {
  display: grid;
  grid-template-columns: 22px 1fr 130px 100px 90px;
  gap: 14px; align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--d-fast);
}
.file-row:hover { background: var(--surface-2); }
.file-row .ext {
  width: 22px; height: 22px; border-radius: 4px;
  background: var(--surface-3); color: var(--ink-muted);
  font-family: var(--font-mono); font-size: 9px; font-weight: 600;
  display: grid; place-items: center;
  text-transform: uppercase;
}
.file-row .mod { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-muted); }
.file-row .size { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-muted); }

/* ====================================================================== */
/* Finance requests */
.req-row {
  display: grid;
  grid-template-columns: 80px 1fr 140px 120px 120px 100px;
  gap: 14px; align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.req-row:last-child { border-bottom: none; }
.req-row:hover { background: var(--surface-2); }
.req-row .id { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-muted); letter-spacing: 0.04em; }
.req-row .title { font-weight: 500; font-size: 13.5px; }
.req-row .title .sub { display:block; color: var(--ink-muted); font-weight: 400; font-size: 11.5px; margin-top: 2px; }
.req-row .amt {
  text-align: right; font-family: var(--font-mono);
  font-size: 14px; font-weight: 500; color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* ====================================================================== */
/* Votes */
.poll-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 22px 26px;
}
.poll-option {
  position: relative; overflow: hidden;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  margin-bottom: 8px;
  cursor: pointer;
  display: flex; align-items: center; gap: 12px;
  transition: border var(--d-fast);
}
.poll-option:hover { border-color: var(--border-strong); }
.poll-option.selected { border-color: var(--accent); background: var(--accent-faint); }
.poll-option .bar {
  position: absolute; top:0; left:0; bottom:0;
  background: var(--accent-soft);
  z-index: 0; pointer-events: none;
  transition: width 400ms var(--e-out);
}
.poll-option.selected .bar { background: var(--accent); opacity: 0.1; }
.poll-option > * { position: relative; z-index: 1; }
.poll-option .radio {
  width: 16px; height: 16px; border-radius: 50%;
  border: 1.5px solid var(--border-strong);
  flex-shrink: 0; background: var(--surface);
}
.poll-option.selected .radio {
  border-color: var(--accent);
  background: radial-gradient(circle, var(--accent) 0 40%, var(--surface) 45% 100%);
}
.poll-option .pct {
  margin-left: auto; font-family: var(--font-mono); font-size: 12px;
  color: var(--ink-muted); font-variant-numeric: tabular-nums;
}
.poll-option.selected .pct { color: var(--accent-ink); }

/* ====================================================================== */
/* Committees */
.user-card {
  display: flex; align-items: center; gap: 10px;
  padding: 10px; border-radius: var(--r-sm);
}
.user-card .avatar { flex-shrink: 0; }

/* ====================================================================== */
/* Chat */
.chat-shell {
  display: grid;
  grid-template-columns: 300px 1fr;
  height: calc(100vh - 56px);
  background: var(--surface);
}
.room-list {
  border-right: 1px solid var(--border);
  overflow-y: auto;
  background: var(--surface);
}
.room-item {
  display: flex; gap: 10px; align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.room-item:hover { background: var(--surface-2); }
.room-item.active { background: var(--accent-faint); }
.room-item.active::before {
  content:''; position: absolute; left: 0; top:0; bottom:0; width: 2px; background: var(--accent);
}
.room-item { position: relative; }
.ravatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--surface-3); color: var(--ink-2);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 600; font-size: 12px;
  flex-shrink: 0;
}
.r-meta { flex: 1; min-width: 0; }
.r-top { display: flex; justify-content: space-between; font-size: 12.5px; font-weight: 500; }
.r-top .t { font-family: var(--font-mono); font-size: 10px; color: var(--ink-muted); font-weight: 400; }
.r-preview { font-size: 11.5px; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.unread {
  background: var(--accent); color: var(--paper);
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  padding: 1px 6px; border-radius: 10px;
  min-width: 18px; text-align: center;
}
.chat-main { display: flex; flex-direction: column; min-width: 0; background: var(--paper); }
.chat-head {
  padding: 14px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  display: flex; align-items: center; gap: 12px;
}
.chat-body { flex: 1; overflow-y: auto; padding: 20px 32px; }
.divider-label {
  text-align: center;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
  color: var(--ink-faint); text-transform: uppercase;
  padding: 8px 0; position: relative;
}
.divider-label::before, .divider-label::after {
  content:''; position: absolute; top: 50%; width: 40%; height: 1px; background: var(--border);
}
.divider-label::before { left: 0; }
.divider-label::after { right: 0; }
.msg {
  display: flex; gap: 10px; margin-bottom: 14px; max-width: 720px;
}
.msg .mav {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-ink);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 600; font-size: 11px;
  flex-shrink: 0;
}
.mbody { flex: 1; }
.mhead { display: flex; gap: 10px; align-items: baseline; }
.mname { font-weight: 600; font-size: 13px; }
.mtime { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-muted); }
.mtext { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; margin-top: 2px; }
.chat-input {
  border-top: 1px solid var(--border);
  padding: 12px 24px;
  background: var(--surface);
  display: flex; gap: 10px; align-items: center;
}
.chat-input input {
  flex: 1; border: none; background: transparent; font-family: inherit;
  font-size: 13.5px; color: var(--ink); outline: none;
}

/* ====================================================================== */
/* Search */
.search {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink-muted);
}

/* ====================================================================== */
/* Split view */
.split-view {
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
  min-height: 100vh;
}
.split-pane { overflow: hidden; position: relative; }
.split-pane:first-child { border-right: 1px solid rgba(0,0,0,0.2); }
.split-label {
  position: absolute; top: 10px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; font-weight: 500;
  padding: 3px 8px; border-radius: 3px;
  z-index: 10;
}
.split-label.light { left: 24px + 232px + 20px; left: 276px; background: rgba(0,0,0,0.08); color: #000; }
.split-label.dark { right: 24px; background: rgba(255,255,255,0.1); color: #fff; }
.split-divider {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 1px;
  background: linear-gradient(transparent, rgba(0,0,0,0.15), transparent);
  pointer-events: none;
}

/* ====================================================================== */
/* Tweaks panel */
.tweaks-panel {
  position: fixed; bottom: 20px; right: 20px; z-index: 100;
  width: 300px;
  background: #161719; color: #edece7;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  box-shadow: 0 20px 60px -20px rgba(0,0,0,0.5);
  font-family: var(--font-body); font-size: 12.5px;
  overflow: hidden;
}
.tweaks-panel header {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-display); font-weight: 600; font-size: 13px;
  letter-spacing: 0.02em;
}
.tweaks-panel .body { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.tweak-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.tweak-row label { font-size: 12px; color: #c4c2ba; }
.seg { display: flex; background: rgba(255,255,255,0.06); border-radius: 4px; padding: 2px; }
.seg button {
  border: none; background: transparent;
  color: #8c8a82; font-family: var(--font-mono); font-size: 10px;
  padding: 4px 9px; border-radius: 3px; cursor: pointer; letter-spacing: 0.08em;
}
.seg button.on { background: #edece7; color: #161719; }

/* ====================================================================== */
/* Icons (inline) */
.icon { flex-shrink: 0; }
svg.icon { stroke-width: 1.5; }

/* Scrollbar — Shell-Kontrakt: html/body scrollen NIE (jede Spälte besitzt ihren
   eigenen Scroller); D8: schlanke, tokenisierte Bar auch in Firefox. */
html { scrollbar-color: var(--border-strong) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }

/* ====================================================================== */
/* Votes v2 — redesigned                                                    */
/* ====================================================================== */

.dim { color: var(--ink-faint); font-weight: 400; }

/* Kind badges */
.kind-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px 2px 6px;
  border-radius: 100px;
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  border: 1px solid transparent;
}
.kind-badge.lg { font-size: 11px; padding: 4px 10px 4px 8px; }
.kind-badge.helios {
  background: oklch(94% 0.04 252); color: oklch(36% 0.11 252);
}
.kind-badge.poll {
  background: oklch(94% 0.04 165); color: oklch(38% 0.11 165);
}
.dark .kind-badge.helios { background: oklch(26% 0.06 252); color: oklch(82% 0.11 252); }
.dark .kind-badge.poll   { background: oklch(26% 0.06 165); color: oklch(80% 0.10 165); }

.kind-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 2px;
  vertical-align: middle; margin: 0 4px 0 10px;
}
.kind-dot.helios { background: oklch(50% 0.13 252); }
.kind-dot.poll   { background: oklch(50% 0.11 165); }

/* Filter tabs */
.vote-tabs {
  display: flex; align-items: center; gap: 4px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0;
}
.vote-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  border: none; background: transparent;
  font-family: var(--font-body); font-size: 13px; font-weight: 500;
  color: var(--ink-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.vote-tab:hover { color: var(--ink); }
.vote-tab.on { color: var(--ink); border-bottom-color: var(--ink); }
.vote-tab .dot {
  width: 7px; height: 7px; border-radius: 50%;
}
.vote-tab .dot.live { background: var(--ember); animation: pulse 1.8s infinite; }
.vote-tab .dot.upcoming { background: var(--accent); }
.vote-tab .dot.closed { background: var(--ink-faint); }
.vote-tab .n {
  font-family: var(--font-mono); font-size: 10.5px;
  background: var(--surface-2); color: var(--ink-muted);
  padding: 1px 6px; border-radius: 10px;
  font-weight: 500;
}
.vote-tab.on .n { background: var(--ink); color: var(--paper); }
.vote-tabs-spacer { flex: 1; }
.vote-legend {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-muted);
  letter-spacing: 0.08em; text-transform: uppercase;
}

/* Grid */
.votes-grid {
  display: grid; grid-template-columns: 300px 1fr; gap: 18px;
  align-items: start;
}
@media (max-width: 1100px) {
  .votes-grid { grid-template-columns: 1fr; }
}

/* List card */
.vote-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px 16px 12px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all var(--d-fast);
  position: relative;
}
.vote-card:hover { border-color: var(--border-strong); }
.vote-card.active {
  border-color: var(--ink);
  box-shadow: var(--sh-2);
}
.vote-card.active::before {
  content:''; position:absolute; left:-1px; top:14px; bottom:14px;
  width: 3px; background: var(--ink); border-radius: 0 2px 2px 0;
}
.vote-card-top {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px;
}
.vote-card-title {
  font-family: var(--font-display);
  font-size: 15px; font-weight: 600;
  line-height: 1.25; letter-spacing: -0.005em;
  color: var(--ink);
}
.vote-card-sub {
  font-size: 11.5px; color: var(--ink-muted); margin-top: 3px;
}
.vote-card-meta {
  display: grid; grid-template-columns: 1fr 1.3fr;
  gap: 14px; margin-top: 12px;
}
.vote-meta-label {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-faint);
}
.vote-meta-val {
  font-size: 12px; color: var(--ink); margin-top: 2px;
  font-variant-numeric: tabular-nums;
  display: flex; align-items: center; gap: 6px;
}
.vote-meta-val .pct-tag {
  font-size: 10px; background: var(--surface-2); color: var(--ink-muted);
  padding: 1px 5px; border-radius: 3px; margin-left: auto;
}
.turnout-track {
  height: 3px; background: var(--surface-2); border-radius: 2px;
  margin-top: 10px; position: relative; overflow: visible;
}
.turnout-fill {
  height: 100%; background: var(--accent); border-radius: 2px;
}
.turnout-quorum {
  position: absolute; top: -2px; width: 1.5px; height: 7px;
  background: var(--ember); border-radius: 1px;
}
.voted-stamp {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 10px;
  font-family: var(--font-mono); font-size: 10px;
  color: var(--pine); font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Detail panel */
.detail-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 22px 26px 20px;
  min-height: 480px;
}
.detail-head {
  display: flex; justify-content: space-between;
  align-items: flex-start; gap: 14px;
  padding-bottom: 18px; border-bottom: 1px solid var(--border);
  margin-bottom: 18px;
}
.detail-title {
  font-family: var(--font-display);
  font-size: 24px; font-weight: 600;
  letter-spacing: -0.01em; margin: 8px 0 6px;
  line-height: 1.2;
}
.detail-meta {
  display: flex; flex-wrap: wrap; gap: 14px;
  font-size: 12px; color: var(--ink-muted);
  align-items: center;
}
.detail-meta span { display: inline-flex; align-items: center; gap: 5px; }
.detail-actions {
  display: flex; gap: 8px; align-items: center;
  margin-top: 20px;
  padding-top: 18px; border-top: 1px solid var(--border);
}
.detail-action-spacer { flex: 1; }

/* Poll specific */
.poll-hint {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: oklch(96% 0.03 165);
  border-left: 2px solid oklch(50% 0.11 165);
  border-radius: var(--r-sm);
  font-size: 12.5px; color: oklch(30% 0.08 165);
  margin-bottom: 16px;
}
.dark .poll-hint {
  background: oklch(22% 0.04 165); color: oklch(80% 0.09 165);
}
.poll-options { display: flex; flex-direction: column; gap: 8px; }
.poll-opt {
  position: relative; overflow: hidden;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: border-color var(--d-fast);
}
.poll-opt:hover { border-color: var(--border-strong); }
.poll-opt.selected { border-color: var(--accent); }
.poll-opt.cast { cursor: default; }
.poll-opt-fill {
  position: absolute; inset: 0;
  background: var(--accent-faint);
  transition: width 500ms var(--e-out);
  z-index: 0;
}
.poll-opt.selected .poll-opt-fill { background: var(--accent-soft); }
.poll-opt-row {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 12px;
}
.poll-opt-radio {
  width: 16px; height: 16px; border-radius: 50%;
  border: 1.5px solid var(--border-strong);
  background: var(--surface);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.poll-opt-radio .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: transparent; transition: background var(--d-fast);
}
.poll-opt.selected .poll-opt-radio { border-color: var(--accent); }
.poll-opt.selected .poll-opt-radio .dot { background: var(--accent); }
.poll-opt-label {
  font-size: 13.5px; font-weight: 500; color: var(--ink); flex: 1;
}
.poll-opt-stats {
  display: flex; gap: 10px; align-items: baseline;
  font-size: 12px;
}
.poll-opt-stats .pct { color: var(--ink); font-weight: 600; }
.poll-opt-stats .count { color: var(--ink-muted); font-size: 11px; }

/* Helios specific */
.helios-strip {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--r-sm);
  overflow: hidden;
  margin-bottom: 4px;
}
.helios-strip-col {
  padding: 12px 14px;
  display: flex; gap: 10px; align-items: center;
  border-right: 1px solid rgba(255,255,255,0.08);
}
.helios-strip-col:last-child { border-right: none; }
.helios-strip-label {
  font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: oklch(72% 0.08 252);
}
.helios-strip-val {
  font-size: 12px; font-weight: 500; margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

.helios-candidates {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.helios-cand {
  display: flex; gap: 10px; align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
}
.helios-cand-name { font-size: 13px; font-weight: 500; color: var(--ink); }
.helios-cand-role {
  font-size: 10.5px; color: var(--ink-muted);
  letter-spacing: 0.04em; margin-top: 1px;
}

.helios-tally { display: flex; flex-direction: column; gap: 8px; }
.helios-tally-row {
  display: grid; grid-template-columns: 140px 1fr 70px;
  gap: 14px; align-items: center;
}
.helios-tally-label { font-size: 13px; font-weight: 500; color: var(--ink); }
.helios-tally-bar {
  height: 10px; background: var(--surface-2); border-radius: 2px; overflow: hidden;
}
.helios-tally-fill { height: 100%; background: var(--accent); }
.helios-tally-nums {
  display: flex; gap: 10px; font-size: 12px; justify-content: flex-end;
}
.helios-result-banner {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: var(--pine-soft); color: var(--pine);
  border-radius: var(--r-sm);
  font-size: 12.5px; font-weight: 500;
  margin-top: 14px;
}

.ballot-handoff {
  border: 1px solid var(--accent);
  background: var(--accent-faint);
  border-radius: var(--r-sm);
  overflow: hidden;
  margin-top: 20px;
}
.ballot-handoff-head {
  padding: 9px 14px;
  background: var(--accent);
  color: var(--surface);
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600;
}
.ballot-handoff-body {
  padding: 14px 16px;
  color: var(--ink);
}
.ballot-handoff-body p { margin: 0 0 10px; font-size: 12.5px; line-height: 1.55; }
.ballot-url {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-xs);
  font-size: 11.5px; color: var(--ink-2);
}
.ballot-url span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ballot-copy {
  border: none; background: var(--surface-2);
  padding: 3px 6px; border-radius: 3px; cursor: pointer;
  color: var(--ink-muted);
}
.ballot-copy:hover { color: var(--ink); background: var(--surface-3); }

.empty-card {
  padding: 30px 20px;
  text-align: center; color: var(--ink-muted);
  background: var(--surface); border: 1px dashed var(--border-strong);
  border-radius: var(--r-md); font-size: 12.5px;
}

/* Dialog — #160 fix. The scrim is a theme-stable token (never --ink, which
   inverts to near-white in dark). The panel sits on --surface (elevated above
   the --paper page bg, so it never reads black-on-black) with an explicit
   z-index ABOVE the scrim and a defined border + shadow rather than a default
   ring. */
.dialog-backdrop {
  position: fixed; inset: 0;
  background: var(--scrim);
  backdrop-filter: blur(3px) saturate(0.9);
  -webkit-backdrop-filter: blur(3px) saturate(0.9);
  z-index: 300;
  display: grid; place-items: center;
  padding: 20px;
}
.dialog {
  position: relative;
  z-index: 1;                 /* unambiguously above the scrim */
  background: var(--surface); color: var(--ink);
  border-radius: var(--r-md);
  border: 1px solid var(--border-strong);
  box-shadow: var(--sh-3);
  width: 100%; max-width: 540px;
  overflow: hidden;
}
.dialog-head {
  padding: 18px 22px 14px;
  display: flex; justify-content: space-between; align-items: flex-start;
  border-bottom: 1px solid var(--border);
}
.dialog-choices { padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.dialog-choice {
  display: flex; gap: 14px; align-items: center;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: border-color var(--d-fast);
}
.dialog-choice:hover { border-color: var(--ink); }
.dialog-choice-icon {
  width: 42px; height: 42px; border-radius: var(--r-sm);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.dialog-choice-icon.helios { background: oklch(94% 0.04 252); color: oklch(36% 0.11 252); }
.dialog-choice-icon.poll   { background: oklch(94% 0.04 165); color: oklch(38% 0.11 165); }
.dark .dialog-choice-icon.helios { background: oklch(26% 0.06 252); color: oklch(82% 0.11 252); }
.dark .dialog-choice-icon.poll   { background: oklch(26% 0.06 165); color: oklch(80% 0.10 165); }
.dialog-choice-title { font-size: 14px; font-weight: 600; color: var(--ink); }
.dialog-choice-sub { font-size: 12px; color: var(--ink-muted); margin-top: 3px; line-height: 1.4; }
.dialog-choice-meta { font-size: 10px; color: var(--ink-faint); letter-spacing: 0.06em; margin-top: 6px; text-transform: uppercase; }
.dialog-foot {
  padding: 12px 22px;
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  font-size: 11px; color: var(--ink-muted);
  display: flex; align-items: center; gap: 8px;
  letter-spacing: 0.02em;
}

/* Topbar status chips */
.topbar-status {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 9px;
  border-radius: 100px;
  font-family: var(--font-mono); font-size: 10px;
  color: var(--ink-muted); letter-spacing: 0.06em;
  text-transform: uppercase; font-weight: 500;
  background: var(--surface-2); border: 1px solid var(--border);
  white-space: nowrap;
  flex-shrink: 0;
}
.topbar-status .pulse {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--pine);
  box-shadow: 0 0 0 2px oklch(94% 0.04 165);
}
.dark .topbar-status .pulse { box-shadow: 0 0 0 2px oklch(26% 0.06 165); }
.topbar-status.warn .pulse { background: var(--ember); box-shadow: 0 0 0 2px var(--ember-soft); }

/* ======================================================================
   Colorblind modes — remap semantic tokens so green/red and blue/yellow
   stay distinguishable. Applied via .cb-rg / .cb-by on <html>.
   cb-rg  Rot-Grün (Deuteranopie / Protanopie) — pine → teal-blue shift
   cb-by  Blau-Gelb (Tritanopie) — accent navy → magenta shift
   ====================================================================== */

html.cb-rg {
  --pine:      oklch(52% 0.14 220);     /* green → cerulean */
  --pine-soft: oklch(93% 0.04 220);
  --pine-ink:  oklch(36% 0.14 220);
  --rust:      oklch(58% 0.17 38);      /* red → deep orange with boost */
  --rust-soft: oklch(94% 0.06 40);
  --rust-ink:  oklch(40% 0.17 38);
  --ember:     oklch(62% 0.16 62);      /* amber — push yellower */
  --ember-soft: oklch(95% 0.05 68);
  --ember-ink: oklch(42% 0.16 62);
}
html.cb-rg.dark,
html.cb-rg .dark {
  --pine:      oklch(68% 0.14 220);
  --pine-soft: oklch(28% 0.05 220);
  --rust:      oklch(70% 0.17 38);
  --rust-soft: oklch(28% 0.06 40);
  --ember:     oklch(74% 0.14 66);
  --ember-soft: oklch(28% 0.05 68);
}

html.cb-by {
  --accent:      oklch(48% 0.16 340);   /* navy → magenta */
  --accent-ink:  oklch(40% 0.16 340);
  --accent-soft: oklch(93% 0.04 340);
  --accent-faint:oklch(96% 0.02 340);
  --ember:       oklch(56% 0.14 95);    /* shift ember off the rust hue */
  --ember-soft:  oklch(94% 0.05 95);
  --ember-ink:   oklch(40% 0.14 95);
}
html.cb-by.dark,
html.cb-by .dark {
  --accent:      oklch(66% 0.16 340);
  --accent-ink:  oklch(76% 0.12 340);
  --accent-soft: oklch(30% 0.08 340);
  --accent-faint:oklch(22% 0.04 340);
  --ember:       oklch(70% 0.14 95);
  --ember-soft:  oklch(28% 0.06 95);
}

/* Add non-color cues when CB mode is on */
html.cb-rg .pill-live::before,
html.cb-by .pill-live::before {
  content:''; display:inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; margin-right: 5px;
  vertical-align: middle;
}

/* Hide chrome that doesn't fit in a split pane */
.split-pane .topbar-status { display: none; }
.split-pane .topbar .search { max-width: 200px; }

/* Sidebar foot role pill */
.sb-foot .role-pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-mono); font-size: 9px;
  padding: 1px 5px; border-radius: 3px;
  background: var(--accent-soft); color: var(--accent-ink);
  letter-spacing: 0.06em; text-transform: uppercase;
  margin-top: 2px;
}

/* ======================================================================
   Finance — tabs, two-signer trail, FinTS banner, sub-orgs
   ====================================================================== */

/* Tabs */
.fin-tabs {
  display: flex; align-items: stretch; gap: 0;
  margin: 6px 0 18px;
  border-bottom: 1px solid var(--border);
  /* #169(b) — overflow-x:auto with overflow-y left visible makes the browser
     compute overflow-y to `auto`, so the 2px active border + margin-bottom:-1px
     spawn a phantom VERTICAL scrollbar (the stray up/dot/down control). Pin
     overflow-y to visible-clip and scroll only on X. */
  overflow-x: auto;
  overflow-y: hidden;
  /* Hide the horizontal scrollbar chrome; a mask-fade signals overflow instead. */
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
}
.fin-tabs::-webkit-scrollbar { display: none; }
/* Only apply the right-edge fade when the strip actually overflows; with no
   overflow the mask is harmless (everything is opaque before the fade zone). */
.fin-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 14px;
  background: transparent; border: none;
  font-family: var(--font-body); font-size: 13px; font-weight: 500;
  color: var(--ink-muted); cursor: pointer; white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.fin-tab:hover { color: var(--ink); }
.fin-tab.on { color: var(--ink); border-bottom-color: var(--ink); }
.fin-tab .route {
  font-family: var(--font-mono); font-size: 9.5px; color: var(--ink-faint);
  letter-spacing: 0.04em;
  display: none;
}
.spec-on .fin-tab .route { display: inline; }
.fin-tab .n {
  font-family: var(--font-mono); font-size: 10.5px;
  background: var(--surface-2); color: var(--ink-muted);
  padding: 0 6px; border-radius: 10px;
  min-width: 18px; text-align: center;
}
.fin-tab.on .n { background: var(--ink); color: var(--paper); }

/* Toolbar above tables */
.fin-toolbar {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px;
}
.fin-toolbar .filters {
  display: flex; border: 1px solid var(--border-strong); border-radius: var(--r-sm); overflow: hidden;
}
.fin-toolbar .filters button {
  background: transparent; border: none; padding: 6px 11px;
  font-size: 12px; font-weight: 500; color: var(--ink-muted);
  cursor: pointer; border-right: 1px solid var(--border);
}
.fin-toolbar .filters button:last-child { border-right: none; }
.fin-toolbar .filters button.on {
  background: var(--accent-soft); color: var(--accent-ink);
}
.fin-toolbar .grow { flex: 1; }

/* Table primitive */
.tbl {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.tbl-head, .tbl-row {
  display: grid; gap: 14px; align-items: center;
  padding: 11px 16px;
}
.tbl-head {
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink-muted);
}
.tbl-row { border-bottom: 1px solid var(--border); cursor: pointer; transition: background var(--d-fast); }
.tbl-row:last-child { border-bottom: none; }
.tbl-row:hover { background: var(--surface-2); }
.tbl .id   { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-muted); letter-spacing: 0.04em; }
.tbl .mono { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-muted); }
.tbl .amt  { text-align: right; font-family: var(--font-mono); font-size: 13.5px; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.tbl .amt.neg { color: var(--rust); }
.tbl .amt.pos { color: var(--pine); }
.tbl .title-primary { font-weight: 500; font-size: 13.5px; color: var(--ink); }
.tbl .title-secondary { color: var(--ink-muted); font-size: 11.5px; margin-top: 2px; }

/* Budget hierarchy view */
.budget-group {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  margin-bottom: 12px;
  overflow: hidden;
}
.budget-group-head {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.budget-group-head .label {
  font-family: var(--font-display); font-size: 15px; font-weight: 600;
  letter-spacing: -0.005em;
}
.budget-group-head .kind {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em;
  padding: 2px 7px; border-radius: 3px; text-transform: uppercase; font-weight: 600;
}
.budget-group-head .kind.income { background: var(--pine-soft); color: var(--pine-ink); }
.budget-group-head .kind.expense { background: var(--accent-soft); color: var(--accent-ink); }
.budget-group-head .sum { margin-left: auto; font-family: var(--font-mono); font-weight: 500; }
.budget-item {
  display: grid; grid-template-columns: 90px 1fr 130px 130px 130px;
  gap: 14px; align-items: center;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.budget-item:last-child { border-bottom: none; }
.budget-item .nr { font-family: var(--font-mono); color: var(--ink-muted); font-size: 11.5px; }
.budget-item .bar-cell {
  display: flex; align-items: center; gap: 8px;
}
.budget-item .bar-track {
  flex: 1; height: 4px; background: var(--surface-2);
  border-radius: 2px; overflow: hidden; min-width: 40px;
}
.budget-item .bar-fill { height: 100%; background: var(--accent); }
.budget-item .bar-fill.warn { background: var(--ember); }
.budget-item .bar-fill.full { background: var(--pine); }
.budget-item .bar-pct {
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-muted);
  min-width: 36px; text-align: right;
}

/* Two-signer audit trail */
.signer-trail {
  display: flex; align-items: center; gap: 8px;
}
.signer-step {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 8px 4px 6px;
  border-radius: 100px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.04em; font-weight: 600;
  border: 1px solid var(--border);
}
.signer-step .dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.signer-step.approved {
  background: var(--pine-soft); color: var(--pine-ink); border-color: transparent;
}
.signer-step.approved .dot { background: var(--pine); }
.signer-step.pending {
  background: var(--surface-2); color: var(--ink-muted);
}
.signer-step.pending .dot { background: var(--ember); animation: pulse 1.8s infinite; }
.signer-step.rejected {
  background: var(--rust-soft); color: var(--rust-ink); border-color: transparent;
}
.signer-step.rejected .dot { background: var(--rust); }
.signer-arrow {
  color: var(--ink-faint); font-family: var(--font-mono); font-size: 11px;
}

/* Audit log timeline */
.audit-log {
  border-left: 2px solid var(--border);
  padding-left: 16px;
  margin: 0;
}
.audit-event {
  position: relative;
  padding: 10px 0 14px;
  font-size: 12.5px;
  color: var(--ink-2);
}
.audit-event::before {
  content:''; position: absolute; left: -22px; top: 14px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--border-strong);
}
.audit-event.approved::before { background: var(--pine); border-color: var(--pine); }
.audit-event.rejected::before { background: var(--rust); border-color: var(--rust); }
.audit-event.created::before  { background: var(--accent); border-color: var(--accent); }
.audit-event .when {
  font-family: var(--font-mono); font-size: 10.5px;
  color: var(--ink-muted); letter-spacing: 0.04em;
}
.audit-event .actor { font-weight: 600; }
.audit-event .note {
  font-size: 11.5px; color: var(--ink-muted);
  background: var(--surface-2);
  padding: 6px 10px; border-radius: var(--r-sm);
  margin-top: 6px;
  border-left: 2px solid var(--border-strong);
}

/* FinTS banner */
.fints-banner {
  display: grid; grid-template-columns: 32px 1fr auto;
  align-items: center; gap: 14px;
  padding: 14px 18px;
  background: var(--ember-soft); color: var(--ember);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  margin-bottom: 18px;
}
.fints-banner.connected {
  background: var(--pine-soft); color: var(--pine);
}
.fints-banner.error {
  background: var(--rust-soft); color: var(--rust);
}
.fints-banner .b-title {
  font-weight: 600; font-size: 14px;
}
.fints-banner .b-sub {
  font-size: 12px; color: inherit; opacity: 0.82;
  margin-top: 2px;
}
.fints-banner .icon-bubble {
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.6);
}

/* Sub-orgs treemap */
.suborg-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.suborg-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px 16px;
  position: relative;
  overflow: hidden;
}
.suborg-card .type-tag {
  position: absolute; top: 0; right: 0;
  font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: 0.08em;
  padding: 2px 7px; border-radius: 0 0 0 4px;
  background: var(--surface-2); color: var(--ink-muted);
  font-weight: 600; text-transform: uppercase;
}
.suborg-card .name {
  font-family: var(--font-display); font-size: 15px; font-weight: 600;
  letter-spacing: -0.005em; padding-right: 60px;
}
.suborg-card .alloc {
  font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-muted);
  margin-top: 4px;
}
.suborg-card .meta {
  display: flex; gap: 12px; font-size: 11.5px; color: var(--ink-muted);
  margin-top: 10px;
}

/* Spec overlay — data-binding badges */
.spec-badge {
  display: none;
  font-family: var(--font-mono); font-size: 9.5px;
  background: oklch(94% 0.05 280); color: oklch(36% 0.13 280);
  padding: 1px 5px; border-radius: 3px;
  letter-spacing: 0.04em; font-weight: 500;
  border: 1px solid oklch(86% 0.04 280);
  white-space: nowrap;
  vertical-align: baseline;
}
.dark .spec-badge {
  background: oklch(28% 0.08 280); color: oklch(82% 0.10 280);
  border-color: oklch(38% 0.08 280);
}
.spec-on .spec-badge { display: inline-flex; }
.spec-marker {
  display: none;
  position: absolute;
  font-family: var(--font-mono); font-size: 9.5px;
  background: oklch(94% 0.05 280); color: oklch(36% 0.13 280);
  padding: 1px 5px; border-radius: 3px;
  pointer-events: none;
}
.spec-on .spec-marker { display: block; }

/* Members & Roles */
.member-row {
  display: grid; grid-template-columns: 36px 1fr 200px 240px 80px;
  gap: 14px; align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.member-row:last-child { border-bottom: none; }
.member-row:hover { background: var(--surface-2); }
.member-row .mav {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-ink);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 600; font-size: 12px;
}
.member-row .name { font-size: 13.5px; font-weight: 500; }
.member-row .email { font-family: var(--font-mono); font-size: 11px; color: var(--ink-muted); margin-top: 2px; }
.member-row .scopes {
  display: flex; gap: 4px; flex-wrap: wrap;
}
.scope-chip {
  font-family: var(--font-mono); font-size: 9.5px;
  background: var(--surface-2); color: var(--ink-2);
  border: 1px solid var(--border);
  padding: 1px 6px; border-radius: 3px;
  letter-spacing: 0.04em;
}
.scope-chip.finance { background: var(--accent-soft); color: var(--accent-ink); border-color: transparent; }
.scope-chip.admin   { background: var(--rust-soft); color: var(--rust); border-color: transparent; }

/* Handoff card (Collabora / Element / etc) */
.handoff-card {
  background: linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 22px 24px;
  display: grid; grid-template-columns: 56px 1fr auto;
  gap: 20px; align-items: center;
}
.handoff-icon {
  width: 56px; height: 56px; border-radius: var(--r-md);
  background: var(--ink); color: var(--paper);
  display: grid; place-items: center;
}
.handoff-title {
  font-family: var(--font-display); font-size: 16px; font-weight: 600;
}
.handoff-sub {
  font-size: 12.5px; color: var(--ink-muted); margin-top: 4px;
  max-width: 480px; line-height: 1.5;
}

/* Empty state */
.empty-state {
  padding: 60px 20px;
  text-align: center;
  color: var(--ink-muted);
}
.empty-state .glyph {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--surface-2);
  display: grid; place-items: center;
  margin: 0 auto 14px;
  color: var(--ink-faint);
}
.empty-state .ttl { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.empty-state .sub { font-size: 12.5px; max-width: 380px; margin: 0 auto; line-height: 1.5; }

/* Tweaks panel section labels */
.tweak-section-label {
  font-family: var(--font-mono); font-size: 9px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-top: 6px; margin-bottom: -2px;
}
.tweak-section-label:first-child { margin-top: 0; }

/* Notice strip used on members screen + sub-orgs */
.notice-strip {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: var(--accent-faint); color: var(--accent-ink);
  border-radius: var(--r-sm);
  font-size: 12.5px;
  margin-bottom: 14px;
}

/* Member view restriction notice */
.view-restriction {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em;
  color: var(--ink-muted);
  padding: 3px 8px; border-radius: 100px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  text-transform: uppercase;
}

/* ══════════════════════════════════════════════════════════════════════
   v4 ADDITIONS — sidebar role/group display · call PiP · misc
   ══════════════════════════════════════════════════════════════════════ */

/* Sidebar foot — hybrid auth display */
.sb-foot .role-pill {
  display: inline-flex; align-items: center; gap: 3px;
  font-family: var(--font-mono); font-size: 9px;
  padding: 1px 5px; border-radius: 3px;
  background: var(--ink); color: var(--paper);
  letter-spacing: 0.06em; text-transform: uppercase;
  font-weight: 600;
}
.sb-foot .group-pill {
  font-family: var(--font-mono); font-size: 8.5px;
  padding: 1px 5px; border-radius: 3px;
  background: var(--accent-soft); color: var(--accent-ink);
  letter-spacing: 0.04em; text-transform: lowercase;
  font-weight: 500;
}

/* ── Element Call · floating PiP (Zoom-style) ─────────────────────── */
.call-pip {
  position: fixed; bottom: 20px; right: 20px;
  z-index: 80;
  width: 280px;
  background: #161719; color: #edece7;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 20px 60px -20px rgba(0,0,0,0.5), 0 4px 12px -4px rgba(0,0,0,0.3);
  overflow: hidden;
  font-family: var(--font-body);
}
.call-pip-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 12px;
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.call-pip-stage {
  position: relative;
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, #1f2024 0%, #292a2e 100%);
  display: grid; place-items: center;
}
.call-pip-thumbs {
  position: absolute; bottom: 8px; right: 8px;
  display: flex; gap: 4px;
}
.call-pip-controls {
  display: flex; gap: 6px; justify-content: center; align-items: center;
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  border-top: 1px solid rgba(255,255,255,0.06);
}
.call-ctrl {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: none;
  color: #edece7;
  display: grid; place-items: center;
  cursor: pointer;
  transition: background var(--d-fast);
}
.call-ctrl:hover { background: rgba(255,255,255,0.14); }
.call-ctrl.danger { background: var(--rust); color: #fff; }
.call-ctrl.danger:hover { background: oklch(58% 0.16 29); }
.call-ctrl.lg { width: 44px; height: 44px; }

.call-live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--rust);
  box-shadow: 0 0 0 3px oklch(52% 0.15 29 / 0.25);
  animation: pulse 1.8s infinite;
}

/* Participant tile (used in pip / expanded / fullbleed) */
.call-tile {
  background: linear-gradient(135deg, oklch(28% 0.04 252) 0%, oklch(22% 0.03 252) 100%);
  border-radius: 6px;
  display: grid; place-items: center;
  position: relative;
  overflow: hidden;
  color: rgba(237,236,231,0.65);
  font-family: var(--font-display);
}
.call-tile.main { font-size: 30px; flex: 1; aspect-ratio: 16/9; min-height: 0; }
.call-tile.small {
  width: 38px; height: 26px;
  font-size: 10px; font-family: var(--font-mono);
  font-weight: 600;
  border: 1.5px solid rgba(255,255,255,0.08);
}
.call-tile.small.more { background: rgba(255,255,255,0.06); }
.call-tile.fb { aspect-ratio: 16/9; }
.call-tile-name {
  position: absolute; bottom: 6px; left: 8px;
  background: rgba(0,0,0,0.55);
  color: rgba(237,236,231,0.95);
  font-size: 10px; font-family: var(--font-mono);
  padding: 2px 6px; border-radius: 3px;
  letter-spacing: 0.04em;
}
.call-tile-mute {
  position: absolute; top: 6px; right: 6px;
  background: rgba(220, 90, 70, 0.85); color: #fff;
  width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center;
}

/* Expanded — side panel */
.call-expanded {
  position: fixed; top: 56px; right: 0; bottom: 0;
  width: 380px;
  z-index: 80;
  background: #0f1011; color: #edece7;
  border-left: 1px solid rgba(255,255,255,0.08);
  display: flex; flex-direction: column;
}
.call-expanded-grid {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 10px;
  overflow-y: auto;
  align-content: start;
}
.call-expanded-grid .call-tile.main { grid-column: 1 / -1; aspect-ratio: 16/9; }

/* Fullbleed — covers shell */
.call-fullbleed {
  position: fixed; inset: 0;
  z-index: 90;
  background: #0a0b0c; color: #edece7;
  display: grid;
  grid-template-rows: 56px 1fr 80px;
}
.call-fullbleed-head {
  display: flex; align-items: center; gap: 14px;
  padding: 0 22px;
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.call-fullbleed-head > :first-child { flex: 1; }
.call-fullbleed-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px; padding: 16px;
  overflow-y: auto;
  align-content: start;
}
.call-fullbleed-bar {
  display: flex; gap: 10px; justify-content: center; align-items: center;
  padding: 16px;
  background: rgba(255,255,255,0.03);
  border-top: 1px solid rgba(255,255,255,0.06);
}

/* ── Tweaks v4 — persona dropdown ─────────────────────────────────── */
.tweak-persona {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.04);
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.06);
  cursor: pointer;
}
.tweak-persona:hover { background: rgba(255,255,255,0.07); }
.tweak-persona.active { background: rgba(237,236,231,0.08); border-color: rgba(237,236,231,0.2); }
.tweak-persona .av {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent); color: var(--paper);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 600; font-size: 11px;
  flex-shrink: 0;
}
.tweak-persona .pdesc { flex: 1; min-width: 0; }
.tweak-persona .pdesc .pn { font-size: 12px; font-weight: 500; color: #edece7; }
.tweak-persona .pdesc .pr { font-family: var(--font-mono); font-size: 9.5px; color: #8c8a82; margin-top: 2px; letter-spacing: 0.04em; }

.tweaks-panel .body { max-height: 80vh; overflow-y: auto; }
.tweaks-panel { width: 320px; }
.tweak-section-label {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em;
  text-transform: uppercase; color: #8c8a82; font-weight: 500;
  margin-top: 6px; padding-bottom: 2px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* ── Misc fixes ─────────────────────────────────────────────────── */
.handoff-card .view-restriction { margin-left: auto; }

/* Member-row tweak for v4 multi-OU display (override base 5-col grid) */
.member-row .com-mono { font-size: 10px; }

/* ======================================================================
   Error pages — mirrors routes/+error.svelte, rendered inside the shell
   ====================================================================== */
.error-page {
  display: grid; place-items: center;
  min-height: calc(100vh - 56px);
  padding: 40px 24px;
}
.error-card {
  text-align: center;
  max-width: 460px;
  position: relative;
}
.error-status {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 116px; line-height: 0.92;
  letter-spacing: -0.04em;
  color: var(--accent);
  position: relative;
  display: inline-block;
}
.error-status::after {
  content: attr(data-code);
  position: absolute; inset: 0;
  color: var(--accent);
  opacity: 0.08;
  transform: translate(6px, 6px);
  z-index: -1;
}
.error-heading {
  font-family: var(--font-display);
  font-size: 24px; font-weight: 600;
  letter-spacing: -0.01em;
  margin-top: 12px;
}
.error-detail {
  color: var(--ink-muted);
  font-size: 14px; line-height: 1.55;
  margin: 8px auto 0;
  max-width: 380px;
}
.error-context {
  margin-top: 18px;
  padding: 11px 15px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--r-sm);
  font-size: 12.5px; color: var(--ink-muted);
  line-height: 1.5;
  text-align: left;
}
.error-context.mono { font-family: var(--font-mono); letter-spacing: 0.02em; }
.error-actions {
  display: flex; gap: 10px; justify-content: center;
  margin-top: 24px;
}

/* Finanzordnung text */
.fo-text { font-size: 13px; color: var(--ink-2); line-height: 1.6; margin: 0; }
.fo-rule {
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: 14px; padding: 11px 14px;
  background: var(--ember-soft); border-radius: var(--r-sm);
  font-size: 12.5px; color: var(--ink-2); line-height: 1.5;
}

/* Sidebar legal footer links — D10: darf umbrechen, nie clippen (3 Links). */
.sb-legal {
  display: flex; align-items: center; gap: 3px 8px; flex-wrap: wrap;
  padding: 9px 18px;
  border-top: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.04em; color: var(--ink-faint);
}
.sb-legal a { color: var(--ink-muted); cursor: pointer; text-decoration: none; }
.sb-legal a:hover { color: var(--ink); }

/* Legal document */
.legal-doc { padding: 8px 24px 22px; }
.legal-section { padding: 16px 0; border-bottom: 1px solid var(--border); }
.legal-section:first-child { padding-top: 8px; }
.legal-section:last-of-type { border-bottom: none; }
.legal-section h3 {
  font-family: var(--font-display); font-size: 14.5px; font-weight: 600;
  margin: 0 0 6px; color: var(--ink);
}
.legal-section p { margin: 0 0 3px; font-size: 13px; color: var(--ink-2); line-height: 1.6; }
.legal-updated {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border);
  font-size: 10.5px; color: var(--ink-faint); letter-spacing: 0.04em;
}

/* ======================================================================
   Aufgaben — kanban "deck": action items / finance follow-ups / personal
   ====================================================================== */
.task-board {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 14px; align-items: start;
}
.task-col {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 10px;
}
.task-col-head { display: flex; align-items: center; gap: 8px; padding: 4px 6px 11px; }
.task-col-head .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-faint); }
.task-col-head .t { font-family: var(--font-display); font-weight: 600; font-size: 13.5px; white-space: nowrap; }
.task-col-head .c { font-family: var(--font-mono); font-size: 11px; color: var(--ink-muted); margin-left: auto; }
.task-col.in_arbeit .dot { background: var(--ember); }
.task-col.erledigt  .dot { background: var(--pine); }
.task-list { display: flex; flex-direction: column; gap: 8px; min-height: 44px; }
.task-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 11px 12px;
  box-shadow: var(--sh-1);
  cursor: grab;
  transition: box-shadow var(--d-fast) var(--e-out), transform var(--d-fast) var(--e-out);
}
.task-card:hover { box-shadow: var(--sh-2); transform: translateY(-1px); }
.task-card.done { opacity: 0.6; }
.task-card.done .task-title { text-decoration: line-through; }
.task-card-top { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.task-type {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.07em;
  text-transform: uppercase; padding: 2px 6px; border-radius: var(--r-xs);
  background: var(--surface-3); color: var(--ink-muted);
}
.task-type.sitzung     { background: var(--accent-soft); color: var(--accent-ink); }
.task-type.finanzen    { background: var(--ember-soft);  color: var(--ember); }
.task-type.persoenlich { background: var(--pine-soft);   color: var(--pine); }
.task-prio { width: 6px; height: 6px; border-radius: 50%; background: var(--rust); display: inline-block; flex-shrink: 0; }
.task-due {
  margin-left: auto; font-family: var(--font-mono); font-size: 10px;
  padding: 2px 7px; border-radius: 999px; white-space: nowrap;
  background: var(--surface-2); color: var(--ink-muted);
}
.task-due.over { background: var(--rust-soft);  color: var(--rust-ink); }
.task-due.soon { background: var(--ember-soft); color: var(--ember-ink); }
.task-due.done { background: var(--pine-soft);  color: var(--pine-ink); }
.task-title { font-size: 13px; line-height: 1.4; color: var(--ink); font-weight: 500; }
.task-foot { display: flex; align-items: center; gap: 7px; margin-top: 10px; }
.task-bar { width: 3px; height: 13px; border-radius: 1px; flex-shrink: 0; }
.task-src {
  font-family: var(--font-mono); font-size: 10px; color: var(--ink-muted);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.task-av {
  margin-left: auto; width: 24px; height: 24px; border-radius: 50%;
  background: var(--surface-3); color: var(--ink-2);
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 600; flex-shrink: 0;
}
.task-empty {
  padding: 18px 8px; text-align: center;
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint);
}
@media (max-width: 920px) { .task-board { grid-template-columns: 1fr; } }

/* ======================================================================
   CONTRACT FEATURES v6 — Deck board · unified Mitglieder · 3-layer tree
   ====================================================================== */

/* Wider canvas for board + tree screens */
.main-wide { max-width: 1480px; }

/* ── Deck task board ─────────────────────────────────────────────── */
.board-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 12px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--r-md);
}
.board-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px 6px 9px; border-radius: 100px;
  background: var(--surface); border: 1px solid var(--border);
  font-size: 12.5px; font-weight: 500; color: var(--ink-2);
  cursor: pointer; transition: all var(--d-fast);
  --c-bar: oklch(50% 0.13 var(--c-hue, 252));
}
.dark .board-chip { --c-bar: oklch(72% 0.14 var(--c-hue, 252)); }
.board-chip:hover { background: var(--surface-2); }
.board-chip .swatch { width: 9px; height: 9px; border-radius: 3px; background: var(--c-bar); flex-shrink: 0; }
.board-chip.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.board-chip.on .swatch { box-shadow: 0 0 0 1.5px var(--paper); }
.board-archived {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-faint);
  letter-spacing: 0.04em;
}
.label-filter { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lf-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 100px;
  border: 1px solid var(--border); background: var(--surface);
  font-size: 11.5px; color: var(--ink-2); cursor: pointer;
  --c-bar: oklch(55% 0.14 var(--c-hue, 252));
}
.dark .lf-chip { --c-bar: oklch(72% 0.14 var(--c-hue, 252)); }
.lf-chip .dot { width: 8px; height: 8px; border-radius: 2px; background: var(--c-bar); }
.lf-chip.on { border-color: var(--ink); background: var(--surface-2); font-weight: 500; }

.deck-board { display: grid; gap: 14px; align-items: start; margin-top: 6px; overflow-x: auto; padding-bottom: 6px; }
.deck-stack {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 10px; min-width: 0;
  transition: background var(--d-fast), box-shadow var(--d-fast);
}
.deck-stack.droppable { box-shadow: inset 0 0 0 1.5px var(--accent-soft); }
.deck-stack-head {
  display: flex; align-items: center; gap: 8px; padding: 4px 6px 11px;
}
.deck-stack-head .t { font-family: var(--font-display); font-weight: 600; font-size: 13.5px; }
.deck-stack-head .c {
  margin-left: auto; font-family: var(--font-mono); font-size: 10.5px;
  background: var(--surface-3); color: var(--ink-muted);
  padding: 1px 7px; border-radius: 10px;
}
.deck-list { display: flex; flex-direction: column; gap: 8px; }
.deck-card {
  display: flex; gap: 4px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 10px 10px 10px 4px;
  box-shadow: var(--sh-1); cursor: grab;
  transition: box-shadow var(--d-fast), transform var(--d-fast), opacity var(--d-fast);
}
.deck-card:hover { box-shadow: var(--sh-2); transform: translateY(-1px); }
.deck-card:hover .deck-grip { opacity: 1; }
.deck-card.dragging { opacity: 0.4; cursor: grabbing; }
.deck-card.done { opacity: 0.62; }
.deck-card.done .deck-card-title { text-decoration: line-through; }
.deck-grip { color: var(--ink-faint); opacity: 0.35; display: flex; align-items: flex-start; padding-top: 1px; transition: opacity var(--d-fast); }
.deck-card-body { flex: 1; min-width: 0; }
.deck-label {
  display: inline-block; font-family: var(--font-mono); font-size: 9px;
  font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 3px; margin-bottom: 7px;
  background: oklch(94% 0.045 var(--c-hue, 252)); color: oklch(38% 0.12 var(--c-hue, 252));
}
.dark .deck-label { background: oklch(28% 0.07 var(--c-hue, 252)); color: oklch(82% 0.11 var(--c-hue, 252)); }
.deck-card-title { font-size: 13px; line-height: 1.4; font-weight: 500; color: var(--ink); }
.deck-card-desc {
  font-size: 11.5px; line-height: 1.45; color: var(--ink-muted); margin-top: 4px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.deck-card-foot { display: flex; align-items: center; gap: 7px; margin-top: 10px; }
.deck-src {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-mono); font-size: 9.5px; color: var(--accent-ink);
  background: var(--accent-faint); padding: 2px 6px; border-radius: 3px;
}
.deck-av {
  margin-left: auto; width: 24px; height: 24px; border-radius: 50%;
  background: var(--surface-3); color: var(--ink-2);
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 600; flex-shrink: 0;
}
.deck-add {
  display: flex; align-items: center; gap: 6px; justify-content: center;
  width: 100%; padding: 8px; margin-top: 2px;
  border: 1px dashed var(--border-strong); border-radius: var(--r-sm);
  background: transparent; color: var(--ink-muted);
  font-family: var(--font-body); font-size: 12px; cursor: pointer;
  transition: all var(--d-fast);
}
.deck-add:hover { background: var(--surface); color: var(--ink); border-color: var(--ink-faint); }
.deck-compose { background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-sm); padding: 8px; }
.deck-compose textarea {
  width: 100%; border: none; resize: none; outline: none;
  font-family: inherit; font-size: 13px; color: var(--ink); background: transparent;
}
.promote-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-sm);
}
.promote-row:hover { border-color: var(--border-strong); }

/* ── Unified Mitglieder ──────────────────────────────────────────── */
.members-layout { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: start; }
.members-layout.with-detail { grid-template-columns: 1fr 312px; }
.member-row.sel { background: var(--accent-faint); }
.member-row .mav.lg { width: 48px; height: 48px; font-size: 16px; }
.role-tag {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.04em; padding: 2px 8px; border-radius: 100px;
  background: oklch(95% 0.04 var(--c-hue, 252)); color: oklch(40% 0.12 var(--c-hue, 252));
  white-space: nowrap;
}
.dark .role-tag { background: oklch(28% 0.06 var(--c-hue, 252)); color: oklch(82% 0.11 var(--c-hue, 252)); }
.scope-pill {
  font-family: var(--font-body); font-size: 10.5px; color: var(--ink-muted);
  background: var(--surface-2); border: 1px solid var(--border);
  padding: 2px 8px; border-radius: 100px; white-space: nowrap;
}
.scope-pill.more { color: var(--ink-faint); }

.member-detail {
  position: sticky; top: 72px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--sh-2);
  padding: 20px; position: relative;
}
.member-detail-close { position: absolute; top: 12px; right: 12px; }
.member-detail-head { display: flex; gap: 12px; align-items: center; padding-right: 28px; }
.member-detail .mav {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-ink);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 600; font-size: 16px; flex-shrink: 0;
}
.md-section { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.md-scope {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: var(--ink-2);
}
.md-scope .icon { color: var(--pine); }
.md-membership { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.md-membership-meta { display: flex; align-items: center; gap: 8px; }
.md-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.md-switch {
  width: 38px; height: 22px; border-radius: 100px; background: var(--surface-3);
  position: relative; flex-shrink: 0; transition: background var(--d-fast);
}
.md-switch .knob {
  position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--surface); box-shadow: var(--sh-1);
  transition: transform var(--d-fast);
}
.md-switch.on { background: var(--pine); }
.md-switch.on .knob { transform: translateX(16px); }
@media (max-width: 1100px) { .members-layout.with-detail { grid-template-columns: 1fr; } }

/* ── Gremien/Referate 3-layer tree ───────────────────────────────── */
.org-layout { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 18px; align-items: start; }
.org-tree { padding: 8px; min-height: 620px; max-height: 80vh; overflow-y: auto; }
.org-tree-head { padding: 8px 10px 10px; }
.tn-wrap { position: relative; }
.tree-node {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: var(--r-sm);
  cursor: pointer; position: relative;
  transition: background var(--d-fast);
}
.tree-node:hover { background: var(--surface-2); }
.tree-node.sel { background: var(--accent-faint); }
.tree-node.sel::before {
  content:''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px;
  background: var(--accent); border-radius: 0 2px 2px 0;
}
.tn-caret {
  width: 16px; height: 16px; border: none; background: transparent;
  display: grid; place-items: center; cursor: pointer; color: var(--ink-muted);
  flex-shrink: 0; padding: 0;
}
.tn-caret.leaf { cursor: default; }
.tn-caret .icon { transition: transform var(--d-fast); }
.tn-caret .icon.open { transform: rotate(90deg); }
.tn-mono { font-size: 9.5px; flex-shrink: 0; }
.tn-name { font-size: 13.5px; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tn-kind {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-faint);
  border: 1px solid var(--border); padding: 1px 6px; border-radius: 100px; flex-shrink: 0;
}
.tn-count {
  margin-left: auto; display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-muted);
  flex-shrink: 0;
}
.tn-count .icon { opacity: 0.6; }
.tn-childterm {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-faint);
  padding-top: 8px; padding-bottom: 3px;
}
.tn-children { position: relative; }

.org-detail { position: sticky; top: 72px; min-height: 620px; }
.org-mono {
  width: 44px; height: 44px; border-radius: var(--r-sm); flex-shrink: 0;
  display: grid; place-items: center;
  font-family: var(--font-mono); font-weight: 600; font-size: 14px;
  background: oklch(94% 0.045 var(--c-hue, 252)); color: oklch(38% 0.12 var(--c-hue, 252));
}
.dark .org-mono { background: oklch(28% 0.07 var(--c-hue, 252)); color: oklch(82% 0.11 var(--c-hue, 252)); }
.org-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 18px 0; padding: 16px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.org-stat .v { font-family: var(--font-display); font-size: 22px; font-weight: 500; color: var(--ink); margin-top: 4px; }
.org-stat .sub { font-size: 10px; color: var(--ink-muted); margin-top: 2px; letter-spacing: 0.02em; }
.org-section { margin-bottom: 16px; }
.org-member {
  display: flex; align-items: center; gap: 9px; padding: 5px 6px;
  border-radius: var(--r-sm); cursor: pointer;
}
.org-member:hover { background: var(--surface-2); }
.org-member .nm { font-size: 13px; color: var(--ink-2); }
.org-actions { display: flex; gap: 8px; padding-top: 14px; border-top: 1px solid var(--border); }
.org-actions .btn { flex: 1; }
@media (max-width: 1100px) { .org-layout { grid-template-columns: 1fr; } .org-detail { position: static; } }


/* ======================================================================
   Settings — #167/#168. Unified, sectioned page (left section-nav + panel)
   that replaces the redundant card grid.
   ====================================================================== */
.set-layout { display: grid; grid-template-columns: 248px 1fr; gap: 30px; align-items: start; }
.set-nav { position: sticky; top: 72px; display: flex; flex-direction: column; gap: 4px; }
.set-nav-group {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-faint);
  padding: 14px 10px 6px;
}
.set-nav-group:first-child { padding-top: 2px; }
.set-nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border-radius: var(--r-sm);
  font-size: 13.5px; font-weight: 500; color: var(--ink-2);
  background: transparent; border: none; cursor: pointer; text-align: left;
  width: 100%; transition: background var(--d-fast), color var(--d-fast);
}
.set-nav-item:hover { background: var(--surface-2); color: var(--ink); }
.set-nav-item.on { background: var(--accent-soft); color: var(--accent-ink); }
.set-nav-item .ic { color: var(--ink-faint); display: flex; flex-shrink: 0; }
.set-nav-item.on .ic { color: var(--accent-ink); }
.set-nav-item.danger { color: var(--rust-ink); }
.set-nav-item.danger.on { background: var(--rust-soft); }
.set-nav-item.danger .ic { color: var(--rust); }
.set-nav-note {
  margin-top: 14px; padding: 11px 12px;
  border: 1px dashed var(--border-strong); border-radius: var(--r-sm);
  font-size: 11.5px; color: var(--ink-muted); line-height: 1.5;
}
.set-nav-note b { color: var(--ink-2); font-weight: 600; }

.set-panel { min-width: 0; }
.set-panel-head { margin-bottom: 18px; }
.set-panel-head h2 { font-family: var(--font-display); font-size: 22px; font-weight: 500; letter-spacing: -0.01em; }
.set-panel-head p { font-size: 13px; color: var(--ink-muted); margin-top: 4px; max-width: 560px; line-height: 1.5; }

.set-block { margin-bottom: 22px; }
.set-block-h {
  font-family: var(--font-display); font-size: 15px; font-weight: 600;
  margin-bottom: 4px;
}
.set-block-sub { font-size: 12px; color: var(--ink-muted); margin-bottom: 12px; line-height: 1.5; }

.set-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; max-width: 460px; }
.set-field > label { font-size: 12px; font-weight: 500; color: var(--ink-2); }
.set-field .hint { font-size: 11px; color: var(--ink-muted); }
.set-input {
  width: 100%; padding: 8px 11px; font-size: 13.5px;
  font-family: var(--font-body); color: var(--ink);
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
}
.set-input.mono { font-family: var(--font-mono); font-size: 12.5px; }
.set-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-faint); }

/* Setting rows (toggle / value list) */
.set-list { border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; background: var(--surface); max-width: 620px; }
.set-item {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border-bottom: 1px solid var(--border);
}
.set-item:last-child { border-bottom: none; }
.set-item .grow { flex: 1; min-width: 0; }
.set-item .t { font-size: 13.5px; font-weight: 500; color: var(--ink); }
.set-item .d { font-size: 12px; color: var(--ink-muted); margin-top: 2px; line-height: 1.45; }
.set-tag {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-muted);
  padding: 3px 9px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 100px; white-space: nowrap;
}

/* Toggle switch */
.set-switch {
  appearance: none; -webkit-appearance: none;
  width: 40px; height: 22px; border-radius: 100px; flex-shrink: 0;
  background: var(--surface-3); border: 1px solid var(--border-strong);
  position: relative; cursor: pointer; transition: background var(--d-fast);
}
.set-switch::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%; background: var(--surface);
  box-shadow: var(--sh-1); transition: transform var(--d-fast);
}
.set-switch:checked { background: var(--accent); border-color: var(--accent); }
.set-switch:checked::after { transform: translateX(18px); background: #fff; }

/* Segmented control (Sprache / Schriftgröße / Farbsehen) */
.set-seg { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--r-sm); overflow: hidden; }
.set-seg button {
  background: transparent; border: none; border-right: 1px solid var(--border);
  padding: 7px 14px; font-size: 12.5px; font-weight: 500; color: var(--ink-muted);
  cursor: pointer; font-family: var(--font-body);
}
.set-seg button:last-child { border-right: none; }
.set-seg button.on { background: var(--accent-soft); color: var(--accent-ink); }

.set-xref {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 13px; border-radius: var(--r-sm);
  background: var(--accent-faint); color: var(--ink-2);
  font-size: 12px; line-height: 1.45; max-width: 620px; margin-bottom: 16px;
}
.set-xref .icon { color: var(--accent); flex-shrink: 0; }

.set-danger-card {
  border: 1px solid var(--rust-soft); border-left: 3px solid var(--rust);
  background: var(--surface); border-radius: var(--r-md);
  padding: 16px 18px; max-width: 620px; margin-bottom: 12px;
  display: flex; align-items: center; gap: 16px;
}
.set-danger-card .grow { flex: 1; }
.btn-danger { background: var(--rust); color: #fff; border-color: var(--rust); }
.btn-danger:hover { background: var(--rust-ink); }

@media (max-width: 760px) {
  .set-layout { grid-template-columns: 1fr; }
  .set-nav { position: static; flex-direction: row; flex-wrap: wrap; }
}


/* ======================================================================
   Helios election wizard — #166. Full-bleed flow over the Votes screen,
   restyled into the token idiom (the live /elections/new is generic
   shadcn). Five steps: Grunddaten · Fragen · Wähler · Termin · Bestätigen.
   ====================================================================== */
.wiz-overlay {
  position: fixed; inset: 0; z-index: 250;
  background: var(--paper);
  overflow-y: auto;
}
.wiz { max-width: 880px; margin: 0 auto; padding: 28px 32px 60px; }
.wiz-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 18px;
}
.wiz-back {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--ink-muted); background: none; border: none;
  cursor: pointer; padding: 0;
}
.wiz-back:hover { color: var(--ink); }
.wiz-kindpill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 100px;
  background: var(--accent-soft); color: var(--accent-ink);
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.wiz-title { font-family: var(--font-display); font-size: 28px; font-weight: 500; letter-spacing: -0.015em; }
.wiz-sub { font-size: 13.5px; color: var(--ink-muted); margin-top: 4px; }

/* Stepper */
.wiz-stepper { display: flex; align-items: center; gap: 0; margin: 22px 0 24px; }
.wiz-step { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
.wiz-step .num {
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; flex-shrink: 0;
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  background: var(--surface-2); color: var(--ink-muted);
  border: 1px solid var(--border-strong); transition: all var(--d-fast);
}
.wiz-step .lbl { font-size: 12.5px; font-weight: 500; color: var(--ink-muted); white-space: nowrap; }
.wiz-step.active .num { background: var(--accent); color: #fff; border-color: var(--accent); }
.wiz-step.active .lbl { color: var(--ink); }
.wiz-step.done .num { background: var(--pine); color: #fff; border-color: var(--pine); }
.wiz-step.done .lbl { color: var(--ink-2); }
.wiz-step-line { flex: 1; height: 1px; background: var(--border-strong); margin: 0 12px; min-width: 16px; }
.wiz-step.done + .wiz-step-line { background: var(--pine); }

/* Body card + Helios trust rail */
.wiz-grid { display: grid; grid-template-columns: 1fr 248px; gap: 20px; align-items: start; }
.wiz-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--sh-1); padding: 24px; }
.wiz-card h2 { font-family: var(--font-display); font-size: 18px; font-weight: 600; margin-bottom: 18px; }
.wiz-rail {
  background: var(--accent-faint); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 16px 16px 18px; position: sticky; top: 16px;
}
.wiz-rail-h { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-ink); font-weight: 600; margin-bottom: 12px; }
.wiz-rail-row { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-top: 1px solid var(--border); }
.wiz-rail-row:first-of-type { border-top: none; }
.wiz-rail-row .ic { color: var(--accent); flex-shrink: 0; margin-top: 1px; }
.wiz-rail-row .t { font-size: 11.5px; font-weight: 600; color: var(--ink); }
.wiz-rail-row .d { font-size: 10.5px; color: var(--ink-muted); margin-top: 1px; font-family: var(--font-mono); }

.wiz-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 16px; }
.wiz-field > label { font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
.wiz-field .hint { font-size: 11px; color: var(--ink-muted); }
.wiz-input, .wiz-select, .wiz-textarea {
  width: 100%; padding: 9px 11px; font-size: 13.5px;
  font-family: var(--font-body); color: var(--ink);
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
}
.wiz-input.mono { font-family: var(--font-mono); font-size: 12.5px; }
.wiz-textarea { resize: vertical; min-height: 72px; }
.wiz-input:focus, .wiz-select:focus, .wiz-textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-faint); }
.wiz-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* Questions */
.wiz-q { border: 1px solid var(--border); border-radius: var(--r-md); padding: 16px; margin-bottom: 14px; }
.wiz-q-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.wiz-q-head .qn { font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--ink-muted); letter-spacing: 0.06em; text-transform: uppercase; }
.wiz-ans-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.wiz-ans-row .dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--border-strong); flex-shrink: 0; }
.wiz-iconbtn { width: 30px; height: 30px; border-radius: var(--r-sm); border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink-muted); cursor: pointer; display: grid; place-items: center; flex-shrink: 0; }
.wiz-iconbtn:hover { background: var(--surface-2); color: var(--ink); }

/* Voter list */
.wiz-voter { display: flex; align-items: center; gap: 12px; padding: 9px 4px; border-bottom: 1px solid var(--border); }
.wiz-voter:last-child { border-bottom: none; }
.wiz-voter input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--accent); flex-shrink: 0; }
.wiz-voter .nm { font-size: 13px; font-weight: 500; color: var(--ink); }
.wiz-voter .em { font-size: 11.5px; color: var(--ink-muted); font-family: var(--font-mono); }
.wiz-voterbox { max-height: 240px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--r-sm); padding: 4px 12px; }

/* Summary */
.wiz-sum-row { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.wiz-sum-row:last-child { border-bottom: none; }
.wiz-sum-row dt { color: var(--ink-muted); }
.wiz-sum-row dd { font-weight: 500; color: var(--ink); text-align: right; }

.wiz-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; }

@media (max-width: 820px) { .wiz-grid { grid-template-columns: 1fr; } .wiz-rail { position: static; } }


/* ══════════════════════════════════════════════════════════════════════
   Tenancy — #264 provisioning convergence + #290 module-OFF treatment
   ══════════════════════════════════════════════════════════════════════ */

/* neutral/queued pill (no semantic colour) */
.pill-neutral { background: var(--surface-3); color: var(--ink-muted); border-color: transparent; }

/* ---- topbar instance-state chip (clickable) ---- */
.topbar-status.inst { cursor: pointer; }
.topbar-status.inst.warn { background: var(--ember-soft); color: var(--ember-ink); border-color: transparent; }
.topbar-status.inst.danger { background: var(--rust-soft); color: var(--rust-ink); border-color: transparent; }
.topbar-status.inst.danger .pulse,
.topbar-status.inst.warn .pulse { box-shadow: none; }
.topbar-status.inst.danger .pulse { background: var(--rust); }
.topbar-status.inst.warn .pulse { background: var(--ember); }

/* ---- convergence banner (dashboard / screens) ---- */
.conv-banner {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px 18px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--surface);
  margin-bottom: 22px;
}
.conv-banner.warn   { background: var(--ember-soft); border-color: transparent; }
.conv-banner.danger { background: var(--rust-soft);  border-color: transparent; }
.conv-banner .cb-ico {
  width: 38px; height: 38px; border-radius: var(--r-sm); flex-shrink: 0;
  display: grid; place-items: center; color: var(--paper);
}
.conv-banner.warn   .cb-ico { background: var(--ember); }
.conv-banner.danger .cb-ico { background: var(--rust); }
.conv-banner .cb-title { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--ink); }
.conv-banner .cb-sub { font-size: 12.5px; color: var(--ink-2); margin-top: 3px; line-height: 1.5; max-width: 620px; }
.conv-banner .cb-act { margin-left: auto; flex-shrink: 0; display: flex; align-items: center; gap: 8px; }

/* ---- Systemstatus screen ---- */
.sys-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  padding: 22px 24px; border-radius: var(--r-md); border: 1px solid var(--border);
  background: var(--surface); margin-bottom: 8px;
}
.sys-head.warn   { background: var(--ember-soft); border-color: transparent; }
.sys-head.danger { background: var(--rust-soft);  border-color: transparent; }
.sys-head .badge-xl {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 100px;
}
.sys-prog { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.sys-progbar { height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; flex: 1; max-width: 280px; }
.sys-progbar > span { display: block; height: 100%; border-radius: 3px; transition: width .4s ease; }

.sys-plane-label {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-muted); font-weight: 600;
  margin: 26px 0 10px;
}
.sys-plane-label .ln { flex: 1; height: 1px; background: var(--border); }
.sys-plane-label .tag {
  font-size: 9.5px; letter-spacing: 0.06em; padding: 1px 7px; border-radius: 3px;
  background: var(--surface-2); color: var(--ink-muted); border: 1px solid var(--border);
}

.sys-svc {
  display: grid; grid-template-columns: 40px 1fr auto; gap: 16px; align-items: center;
  padding: 15px 18px; border-bottom: 1px solid var(--border);
}
.sys-svc:last-child { border-bottom: none; }
.sys-svc .svc-ico {
  width: 40px; height: 40px; border-radius: var(--r-sm);
  display: grid; place-items: center; background: var(--surface-2); color: var(--ink-2);
}
.sys-svc .svc-name { font-size: 14px; font-weight: 500; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.sys-svc .svc-tech { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-faint); margin-top: 3px; }
.sys-svc .svc-msg { font-size: 12px; color: var(--ink-muted); margin-top: 4px; line-height: 1.45; }
.sys-svc .svc-right { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
.sys-svc.is-failed .svc-ico { background: var(--rust-soft); color: var(--rust-ink); }
.sys-svc.is-provisioning .svc-ico,
.sys-svc.is-degraded .svc-ico { background: var(--ember-soft); color: var(--ember-ink); }
.sys-svc.is-ok .svc-ico { background: var(--pine-soft); color: var(--pine-ink); }

/* ---- module-OFF treatment ---- */
.mod-off-screen { max-width: 560px; margin: 8vh auto 0; text-align: center; }
.mod-off-screen .glyph {
  width: 64px; height: 64px; border-radius: var(--r-md); margin: 0 auto 18px;
  display: grid; place-items: center; background: var(--surface-2); color: var(--ink-faint);
  border: 1px solid var(--border);
}
.mod-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 14px; }
.mod-card {
  border: 1px solid var(--border); border-radius: var(--r-md); padding: 16px 18px; background: var(--surface);
}
.mod-card.off { background: var(--surface-2); border-style: dashed; }
.mod-card .mc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mod-card .mc-name { font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--ink); }
.mod-card.off .mc-name { color: var(--ink-muted); }
.mod-card .mc-svc { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-faint); margin-top: 4px; }
.mod-card .mc-note { font-size: 12px; color: var(--ink-muted); margin-top: 8px; line-height: 1.5; }


/* ======================================================================
   Protocol detail — Governance Phase-1 (#326): attendance · quorum gate ·
   resolution editor (majority rule + server-computed result) · publish-block
   ====================================================================== */

.proto-back {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: none; cursor: pointer;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-muted);
  padding: 4px 0; margin-bottom: 14px;
}
.proto-back:hover { color: var(--ink); }
.proto-back .flip { transform: rotate(180deg); }

.proto-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 24px; margin-bottom: 20px;
}
.proto-head-right {
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
  position: relative; flex-shrink: 0;
}

/* Quorum pill — compact, expands a popover */
.quorum-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 9px 5px 10px; border-radius: 100px; cursor: pointer;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.04em;
  border: 1px solid transparent;
}
.quorum-pill.ok { background: var(--pine-soft); color: var(--pine-ink); }
.quorum-pill.no { background: var(--rust-soft); color: var(--rust-ink); }
.quorum-pill .qp-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.quorum-pill .qp-count { opacity: 0.75; }
.quorum-pill .qp-chev { transition: transform var(--d-fast); opacity: 0.7; }
.quorum-pill .qp-chev.open { transform: rotate(90deg); }

.quorum-pop {
  position: absolute; top: 100%; right: 0; margin-top: 6px; z-index: 20;
  width: 240px; padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--r-md); box-shadow: var(--sh-3);
}
.quorum-pop .qpop-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12.5px; color: var(--ink-2); padding: 4px 0;
  border-bottom: 1px solid var(--border);
}
.quorum-pop .qpop-row:last-of-type { border-bottom: none; }
.quorum-pop .qpop-row b { color: var(--ink); }
.quorum-pop .qpop-rule {
  font-size: 11.5px; color: var(--ink-muted); line-height: 1.5; margin-top: 8px;
}

/* Publish-gate banner */
.proto-banner {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; border-radius: var(--r-md); margin-bottom: 22px;
  border: 1px solid transparent;
}
.proto-banner.danger { background: var(--rust-soft); color: var(--rust-ink); }
.proto-banner.ok { background: var(--pine-soft); color: var(--pine-ink); }
.proto-banner > .icon { flex-shrink: 0; }
.proto-banner .pb-body { flex: 1; min-width: 0; }
.proto-banner .pb-title {
  font-weight: 600; font-size: 14px; color: var(--ink);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.proto-banner .pb-sub { font-size: 12.5px; opacity: 0.92; margin-top: 3px; line-height: 1.5; color: var(--ink-2); }
.proto-banner .pb-code {
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.06em;
  padding: 1px 6px; border-radius: 3px;
  background: var(--rust); color: var(--paper);
}
.proto-banner .btn { flex-shrink: 0; }

/* Attendance panel */
.att-panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--sh-1);
  padding: 18px 20px; margin-bottom: 22px;
}
.att-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 20px; margin-bottom: 16px;
}
.att-title { font-size: 18px; font-weight: 600; }
.att-sub { font-size: 12px; color: var(--ink-muted); margin-top: 3px; max-width: 540px; }

.att-readout {
  display: grid; grid-template-columns: auto auto; grid-auto-rows: auto;
  column-gap: 10px; align-items: baseline; flex-shrink: 0; min-width: 168px;
}
.att-readout .ar-count { font-family: var(--font-display); display: flex; align-items: baseline; gap: 4px; }
.att-readout .ar-count b { font-size: 30px; font-weight: 600; line-height: 1; }
.att-readout .ar-count span { font-size: 14px; color: var(--ink-muted); }
.att-readout .ar-state {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; font-weight: 600; align-self: center;
}
.att-readout.ok .ar-count b { color: var(--pine-ink); }
.att-readout.ok .ar-state { color: var(--pine-ink); }
.att-readout.no .ar-count b { color: var(--rust-ink); }
.att-readout.no .ar-state { color: var(--rust-ink); }
.att-readout .ar-track {
  grid-column: 1 / -1; position: relative; height: 5px; margin-top: 8px;
  background: var(--surface-2); border-radius: 3px; overflow: visible;
}
.att-readout .ar-fill { height: 100%; border-radius: 3px; background: var(--ink-faint); transition: width var(--d-med) var(--e-out); }
.att-readout.ok .ar-fill { background: var(--pine); }
.att-readout.no .ar-fill { background: var(--ember); }
.att-readout .ar-marker {
  position: absolute; top: -2px; width: 2px; height: 9px;
  background: var(--ink); border-radius: 1px;
}

.att-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 760px) { .att-grid { grid-template-columns: 1fr; } }
.att-member {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: var(--surface);
}
.att-member.is-open { border-style: dashed; }
.att-av {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent-soft); color: var(--accent-ink);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 600; font-size: 11px;
}
.att-av.sm { width: 20px; height: 20px; font-size: 9px; }
.att-name { font-size: 13px; font-weight: 500; color: var(--ink); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.att-seg { display: flex; gap: 2px; background: var(--surface-2); border-radius: var(--r-sm); padding: 2px; flex-shrink: 0; }
.att-seg button {
  border: none; background: transparent; cursor: pointer;
  font-family: var(--font-body); font-size: 11px; font-weight: 500;
  color: var(--ink-muted); padding: 4px 8px; border-radius: 4px;
  transition: background var(--d-fast), color var(--d-fast);
}
.att-seg button:hover { color: var(--ink); }
.att-seg button.as-present.on { background: var(--pine); color: #fff; }
.att-seg button.as-excused.on { background: var(--ember); color: #fff; }
.att-seg button.as-absent.on  { background: var(--rust); color: #fff; }

.att-advisory {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border);
}
.att-adv-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--ink-muted);
  padding: 3px 9px 3px 4px; border-radius: 100px;
  background: var(--surface-2); border: 1px solid var(--border);
}

/* Sections */
.proto-section { margin-bottom: 24px; }
.proto-body {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 16px 20px; box-shadow: var(--sh-1);
}
.proto-body p { font-size: 13px; color: var(--ink-2); line-height: 1.6; margin: 0 0 10px; }
.proto-body p:last-child { margin-bottom: 0; }
.proto-body .proto-body-more { font-size: 11.5px; color: var(--ink-faint); font-style: italic; }

/* Resolution cards */
.res-list { display: flex; flex-direction: column; gap: 12px; }
.res-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--sh-1);
  padding: 16px 18px;
}
.res-card.is-withdrawn { opacity: 0.78; }
.res-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 24px; }
.res-id { font-size: 11px; font-weight: 600; color: var(--ink-muted); letter-spacing: 0.04em; }
.res-withdraw { color: var(--ink-muted); }
.res-text { font-size: 15px; font-weight: 500; color: var(--ink); line-height: 1.4; margin: 6px 0 12px; }
.res-text-input { font-size: 15px; margin: 8px 0 12px; }

.res-rule-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.res-rule-row .eyebrow { flex-shrink: 0; }
.res-rule-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  color: var(--accent-ink); background: var(--accent-soft);
  padding: 3px 10px 3px 8px; border-radius: 100px;
}
.res-rule-sel { width: auto; max-width: 260px; padding: 5px 8px; font-size: 12.5px; }

.res-withdrawn-note {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--ink-muted);
  background: var(--surface-2); border-radius: var(--r-sm);
  padding: 10px 12px;
}

/* Tallies */
.res-tally { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.res-tally .tally {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 12px; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: var(--surface-2);
  flex: 1; min-width: 120px;
}
.res-tally .tally-lbl { font-size: 12px; font-weight: 500; color: var(--ink-2); flex: 1; }
.res-tally .tally.t-yes { border-left: 3px solid var(--pine); }
.res-tally .tally.t-no  { border-left: 3px solid var(--rust); }
.res-tally .tally.t-ab  { border-left: 3px solid var(--ink-faint); }
.res-tally .tally-val { font-size: 16px; font-weight: 600; color: var(--ink); min-width: 18px; text-align: right; }
.tally-step { display: flex; align-items: center; gap: 2px; }
.tally-step button {
  width: 24px; height: 24px; border-radius: var(--r-xs);
  border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--ink-2); cursor: pointer; font-size: 15px; line-height: 1;
  display: grid; place-items: center;
}
.tally-step button:hover { background: var(--surface-3); color: var(--ink); }
.tally-step .tally-val { min-width: 26px; text-align: center; }

/* Live computation strip */
.res-calc {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 14px; border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--border);
}
.res-calc .calc-step { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-2); }
.res-calc .calc-rule { color: var(--ink-muted); }
.res-calc .calc-arrow { color: var(--ink-faint); flex-shrink: 0; }
.res-verdict {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600;
  padding: 4px 11px; border-radius: 100px;
}
.res-verdict.v-pass { background: var(--pine-soft); color: var(--pine-ink); }
.res-verdict.v-fail { background: var(--rust-soft); color: var(--rust-ink); }
.res-verdict.v-with { background: var(--surface-3); color: var(--ink-muted); }
.res-calc .calc-tag {
  display: inline-flex; align-items: center; gap: 4px; margin-left: auto;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-faint);
}

/* Actions + states */
.proto-actions {
  display: flex; align-items: center; gap: 10px;
  padding-top: 18px; margin-top: 8px; border-top: 1px solid var(--border);
}
.proto-actions .btn-primary.is-blocked {
  background: var(--surface-3); color: var(--ink-faint); border-color: var(--border-strong);
  cursor: not-allowed;
}
.proto-published-stamp {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px; border-radius: var(--r-md);
  background: var(--pine-soft); color: var(--pine-ink);
  font-size: 12.5px; font-weight: 500; margin-top: 8px;
}
.proto-toast {
  display: flex; align-items: center; gap: 8px;
  margin-top: 12px; padding: 11px 15px; border-radius: var(--r-sm);
  background: var(--rust); color: var(--paper);
  font-size: 12.5px; font-weight: 500;
  box-shadow: var(--sh-2);
}

/* ======================================================================
   Setup wizard — first-run brand & legal configuration (#291)
   ====================================================================== */
.setup-steps {
  display: flex; gap: 6px; margin-bottom: 18px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 6px;
}
.setup-step {
  flex: 1; display: flex; align-items: center; gap: 8px; justify-content: center;
  background: transparent; border: none; cursor: pointer;
  padding: 8px 10px; border-radius: var(--r-sm);
  color: var(--ink-muted); font-size: 12.5px; font-weight: 500;
  transition: background var(--d-fast), color var(--d-fast);
}
.setup-step:hover { background: var(--surface-2); color: var(--ink); }
.setup-step.on { background: var(--accent-faint); color: var(--ink); }
.setup-step .ss-num {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  background: var(--surface-3); color: var(--ink-muted);
}
.setup-step.on .ss-num { background: var(--accent); color: var(--paper); }
.setup-step.done .ss-num { background: var(--pine); color: #fff; }
.setup-step .ss-lbl { white-space: nowrap; }
@media (max-width: 720px) { .setup-step .ss-lbl { display: none; } }

.setup-h { font-size: 19px; font-weight: 600; margin-bottom: 14px; }
.setup-p { font-size: 13px; color: var(--ink-muted); line-height: 1.55; margin: 0 0 18px; max-width: 640px; }
.setup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .setup-grid { grid-template-columns: 1fr; } }

.setup-foot {
  display: flex; align-items: center; gap: 10px;
  margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--border);
}
.setup-foot .btn-primary.is-blocked {
  background: var(--surface-3); color: var(--ink-faint); border-color: var(--border-strong);
  cursor: not-allowed;
}

/* Brand step */
.setup-brand { display: grid; grid-template-columns: 1fr 300px; gap: 28px; align-items: start; }
@media (max-width: 760px) { .setup-brand { grid-template-columns: 1fr; } }
.setup-brand-form { display: flex; flex-direction: column; gap: 16px; }
.accent-swatches { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.accent-sw {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 11px; border-radius: var(--r-sm); cursor: pointer;
  border: 1px solid var(--border); background: var(--surface);
  font-size: 13px; color: var(--ink-2);
}
.accent-sw:hover { border-color: var(--border-strong); }
.accent-sw.on { border-color: var(--ink); color: var(--ink); font-weight: 500; }
.accent-sw .sw-dot { width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; }
.accent-sw .sw-name { flex: 1; }
.accent-sw .icon { color: var(--accent); }

.setup-preview {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 16px;
}
.prev-brand { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.prev-logo {
  width: 32px; height: 32px; border-radius: 5px; color: var(--paper);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
}
.prev-name { font-family: var(--font-display); font-weight: 600; font-size: 15px; }
.prev-sub { font-size: 9.5px; color: var(--ink-muted); letter-spacing: 0.06em; margin-top: 1px; }
.prev-nav { display: flex; flex-direction: column; gap: 2px; padding: 12px 0; }
.prev-nav-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: var(--r-sm);
  font-size: 12.5px; color: var(--ink-2);
}
.prev-nav-item .dot { width: 7px; height: 7px; border-radius: 50%; }
.prev-nav-item.active { background: var(--accent-faint); color: var(--ink); font-weight: 500; }
.prev-btns { display: flex; gap: 8px; align-items: center; padding-top: 12px; border-top: 1px solid var(--border); }
.prev-accent-btn {
  color: var(--paper); font-size: 12px; font-weight: 500;
  padding: 6px 12px; border-radius: var(--r-sm);
}

/* Legal step */
.legal-status-list { display: flex; flex-direction: column; gap: 8px; }
.legal-status-row {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px; border: 1px solid var(--border);
  border-radius: var(--r-sm); background: var(--surface);
}
.legal-status-row .ls-doc { flex: 1; min-width: 0; }
.legal-status-row .ls-title { font-size: 13.5px; font-weight: 500; color: var(--ink); }
.legal-status-row .ls-note { font-size: 10.5px; color: var(--ink-faint); margin-top: 2px; letter-spacing: 0.04em; }

.setup-check {
  display: flex; align-items: center; gap: 9px;
  font-size: 12.5px; color: var(--ink-2); cursor: pointer;
}

/* Module step */
.setup-mods { display: flex; flex-direction: column; gap: 10px; }
.setup-mod {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border: 1px solid var(--border);
  border-radius: var(--r-md); background: var(--surface); cursor: pointer;
  position: relative;
}
.setup-mod.on { border-color: var(--accent); background: var(--accent-faint); }
.setup-mod .sm-body { flex: 1; min-width: 0; }
.setup-mod .sm-title { font-size: 14px; font-weight: 600; color: var(--ink); }
.setup-mod .sm-desc { font-size: 12px; color: var(--ink-muted); margin-top: 3px; line-height: 1.45; }
.setup-mod input { position: absolute; opacity: 0; pointer-events: none; }
.setup-mod .sm-toggle {
  width: 40px; height: 22px; border-radius: 100px; flex-shrink: 0;
  background: var(--surface-3); position: relative; transition: background var(--d-fast);
}
.setup-mod .sm-toggle::after {
  content:''; position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; border-radius: 50%; background: var(--surface);
  box-shadow: var(--sh-1); transition: transform var(--d-fast) var(--e-out);
}
.setup-mod.on .sm-toggle { background: var(--accent); }
.setup-mod.on .sm-toggle::after { transform: translateX(18px); }

.setup-ready { display: flex; flex-direction: column; gap: 8px; }
.ready-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--r-sm); background: var(--surface-2);
}
.ready-row.ok { color: var(--pine-ink); }
.ready-row.no { color: var(--rust-ink); }
.ready-row .rr-t { font-size: 13px; font-weight: 500; color: var(--ink); }
.ready-row .rr-s { font-size: 11.5px; color: var(--ink-muted); margin-top: 1px; }

/* ======================================================================
   #289 — tenancy data dimensions: org-unit authority · Fraktion composition
   · per-instance term-map (shown in the Gremien/Committees screen)
   ====================================================================== */
/* Authority dot in the tree */
.auth-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin-right: 2px;
  background: var(--ink-faint);
}
.auth-dot.deciding { background: var(--pine); }
.auth-dot.advisory { background: var(--ink-faint); }
.auth-dot.caucus   { background: var(--accent); }

/* Authority badge in the detail */
.auth-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: 2px 8px 2px 7px; border-radius: 100px;
  border: 1px solid transparent;
}
.auth-badge .ab-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.auth-badge.deciding { background: var(--pine-soft); color: var(--pine-ink); }
.auth-badge.advisory { background: var(--surface-2); color: var(--ink-muted); border-color: var(--border); }
.auth-badge.caucus   { background: var(--accent-soft); color: var(--accent-ink); }

/* Fraktion / seat composition bar */
.frak-bar {
  display: flex; gap: 2px; height: 16px; border-radius: 4px; overflow: visible;
  position: relative; background: var(--surface-2);
}
.frak-seg { display: block; border-radius: 2px; min-width: 4px; }
.frak-seg:first-child { border-radius: 4px 2px 2px 4px; }
.frak-seg:last-of-type { border-radius: 2px 4px 4px 2px; }
.frak-majority {
  position: absolute; top: -3px; bottom: -3px; width: 2px;
  background: var(--ink); border-radius: 1px;
}
.frak-legend { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.frak-leg {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; color: var(--ink-2);
}
.frak-leg .fl-dot { width: 9px; height: 9px; border-radius: 2px; }
.frak-leg b { margin-left: 1px; color: var(--ink); font-size: 11px; }

/* Term-map */
.termmap { display: flex; flex-direction: column; gap: 5px; }
.tm-row {
  display: grid; grid-template-columns: 1fr 16px 1fr; align-items: center; gap: 8px;
  font-size: 12px;
}
.tm-base { color: var(--ink-muted); text-align: right; }
.tm-arrow { color: var(--ink-faint); }
.tm-term { color: var(--ink); font-weight: 500; }

/* ======================================================================
   #403 Handover / Amtsübergabe — Tracks · Playbook · Zeremonie · Snapshot
   ====================================================================== */
/* v10 --on-* family (R3/R5): text on accent/pine fills. Light #fff; dark = Tinte.
   Scoped tokens — .dark sits on .app-shell, values inherit downward. */
:root { --on-accent: #ffffff; --on-pine: #ffffff; }
.dark { --on-accent: oklch(22% 0.02 265); --on-pine: oklch(18% 0.04 165); }
.ho-wrap { flex: 1; overflow-y: auto; padding: 26px 34px 48px; max-width: 1240px; width: 100%; margin: 0 auto; }
.ho-back { display: inline-flex; gap: 6px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); cursor: pointer; margin-bottom: 14px; }
.ho-back:hover { color: var(--ink); }
.ho-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 18px; }
.ho-head h1 { font-family: var(--font-display); font-size: 26px; font-weight: 600; letter-spacing: -0.01em; margin: 2px 0 0; }
.ho-sub { color: var(--ink-muted); font-size: 13px; line-height: 1.55; margin: 6px 0 0; max-width: 620px; text-wrap: pretty; }
.ho-arrow { color: var(--ink-faint); font-weight: 400; }
.ho-cols { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 18px; align-items: start; }
.ho-main, .ho-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ho-col-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); display: flex; gap: 10px; align-items: baseline; }
.ho-spec { display: none; font-size: 9px; color: var(--accent-ink); background: var(--accent-faint); border: 1px dashed var(--accent); border-radius: 4px; padding: 1px 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.spec-on .ho-spec { display: inline-block; }
.ho-track { display: flex; justify-content: space-between; gap: 18px; padding: 16px 18px; cursor: pointer; transition: border-color var(--d-fast) var(--e-out); }
.ho-track:hover { border-color: var(--border-strong); }
.ho-track-main { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.ho-track-main strong { font-family: var(--font-display); font-size: 16px; font-weight: 600; }
.ho-bind { display: flex; flex-wrap: wrap; gap: 6px; }
.ho-track-desc { font-size: 12.5px; color: var(--ink-muted); line-height: 1.5; }
.ho-track-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; color: var(--ink-faint); }
.ho-snapcount { font-size: 10.5px; color: var(--ink-faint); }
.ho-empty-state { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 42px 32px; color: var(--ink-muted); border-style: dashed; }
.ho-empty-state strong { font-family: var(--font-display); font-size: 15px; color: var(--ink); }
.ho-empty-state p { font-size: 12.5px; line-height: 1.55; max-width: 380px; margin: 0; }
.ho-sec { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.ho-sec.is-empty { border-style: dashed; background: var(--surface-2); }
.ho-sec-head { display: flex; align-items: center; gap: 9px; min-width: 0; flex-wrap: wrap; }
.ho-sec-head strong { font-size: 13.5px; }
.ho-kind { font-size: 8.5px; flex-shrink: 0; }
.ho-req { font-size: 8.5px; }
.ho-sec-prompt { font-size: 11px; color: var(--ink-faint); font-style: italic; }
.ho-sec-body { font-size: 12.5px; line-height: 1.6; color: var(--ink-2); margin: 0; text-wrap: pretty; }
.ho-sec-body.empty { color: var(--ink-faint); font-style: italic; }
.ho-sec-edit { display: flex; flex-direction: column; gap: 8px; }
.ho-live { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; }
.ho-live-row { display: flex; align-items: baseline; gap: 12px; padding: 7px 12px; border-bottom: 1px solid var(--border); font-size: 12px; }
.ho-live-row:last-of-type { border-bottom: none; }
.ho-live-row .k { color: var(--ink-muted); width: 190px; flex-shrink: 0; }
.ho-live-row .v { color: var(--ink); font-weight: 500; flex: 1; }
.ho-live-note { font-family: var(--font-mono); font-size: 10px; color: var(--ink-faint); padding: 6px 12px; background: var(--surface-2); border-top: 1px solid var(--border); }
.ho-vault { display: flex; flex-direction: column; gap: 5px; }
.ho-vault-ref { display: flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-2); }
.ho-stepper { display: flex; align-items: center; gap: 10px; margin: 4px 0 18px; flex-wrap: wrap; }
.ho-step { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 500; color: var(--ink-faint); }
.ho-step .dot { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 600; background: var(--surface-2); border: 1px solid var(--border); color: var(--ink-muted); }
.ho-step.cur { color: var(--ink); }
.ho-step.cur .dot { background: var(--accent); border-color: var(--accent); color: var(--on-accent, #fff); }
.ho-step.done { color: var(--ink-2); }
.ho-step.done .dot { background: var(--pine); border-color: var(--pine); color: var(--on-pine, #fff); }
.ho-step-line { width: 34px; height: 1px; background: var(--border-strong); }
.ho-step-line.done { background: var(--pine); }
.ho-gate, .ho-gaps, .ho-review, .ho-signers, .ho-actions, .ho-integrity { padding: 14px 16px; display: flex; flex-direction: column; gap: 9px; }
.ho-gate-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.ho-gate-row:last-of-type { border-bottom: none; }
.ho-gate-name { font-size: 12.5px; font-weight: 500; flex: 1; min-width: 140px; }
.ho-gate-src { font-size: 9.5px; color: var(--ink-faint); }
.ho-gate-stamp { font-size: 9.5px; color: var(--ink-faint); }
.ho-gate-foot, .ho-gap-foot, .ho-sig-foot, .ho-act-note, .ho-side-note, .ho-int-note { font-size: 11.5px; color: var(--ink-muted); line-height: 1.55; text-wrap: pretty; }
.ho-side-note { padding: 2px 4px; }
.ho-gaps { background: var(--ember-soft, var(--surface-2)); border-color: var(--ember, var(--border)); }
.ho-gaps.sealed { background: var(--surface); border-color: var(--ember); }
.ho-gap-row { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; }
.ho-gap-row svg { flex-shrink: 0; margin-top: 2px; color: var(--ember-ink, var(--ink-muted)); }
.ho-gap-note { color: var(--ink-muted); font-size: 12px; line-height: 1.5; margin-top: 2px; }
.ho-rev-row { display: flex; gap: 9px; align-items: baseline; font-size: 12.5px; flex-wrap: wrap; }
.ho-sig-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border); }
.ho-sig-row:last-of-type { border-bottom: none; }
.ho-sig-row .avatar.sm { width: 28px; height: 28px; font-size: 10px; flex-shrink: 0; }
.ho-sig-main { flex: 1; min-width: 0; }
.ho-sig-main strong { font-size: 12.5px; }
.ho-sig-cap { font-size: 10.5px; color: var(--ink-muted); }
.ho-signed { display: inline-flex; gap: 5px; align-items: center; font-size: 10px; color: var(--pine-ink, var(--ink-2)); white-space: nowrap; }
.ho-floor-missing { font-size: 11.5px; color: var(--ember-ink, var(--ink-muted)); background: var(--ember-soft, var(--surface-2)); border-radius: var(--r-sm); padding: 8px 10px; }
.ho-actions { gap: 10px; }
.ho-actions .btn { justify-content: center; }
.ho-sealed { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.ho-sealed svg { flex-shrink: 0; margin-top: 1px; color: var(--pine-ink, var(--pine)); }
.ho-snap-row { display: flex; align-items: center; gap: 10px; padding: 11px 14px; cursor: pointer; font-size: 12px; }
.ho-snap-row:hover { border-color: var(--border-strong); }
.ho-snap-row > div { flex: 1; }
.ho-snap-row .mono { font-size: 9.5px; color: var(--ink-faint); }
.ho-snap-sub { font-size: 11px; color: var(--ink-muted); }
.ho-snap-none { font-size: 12px; color: var(--ink-faint); font-style: italic; padding: 6px 2px; }
.ho-frozen-row { display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--ink-2); padding: 6px 0; border-bottom: 1px solid var(--border); }
.ho-frozen-row:last-of-type { border-bottom: none; }
.ho-frozen-row svg { color: var(--ink-faint); flex-shrink: 0; }
.ho-int-row { display: flex; justify-content: space-between; gap: 12px; font-size: 11.5px; }
.ho-int-row span:first-child { color: var(--ink-muted); flex-shrink: 0; }
.ho-int-row .mono { font-size: 10px; word-break: break-all; text-align: right; }
.ho-overlay { position: fixed; inset: 0; background: var(--scrim, rgba(20,18,14,0.46)); display: grid; place-items: center; z-index: 80; }
.ho-create { width: 440px; max-width: calc(100vw - 48px); padding: 18px; display: flex; flex-direction: column; gap: 9px; }
.ho-lbl { font-size: 11px; font-weight: 600; color: var(--ink-2); margin-top: 2px; }
.ho-hint { font-size: 11.5px; color: var(--ink-muted); line-height: 1.5; margin: 0; }
.ho-check { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; color: var(--ink-2); line-height: 1.45; }
.ho-seg { align-self: flex-start; }
@media (max-width: 1100px) { .ho-cols { grid-template-columns: 1fr; } }

/* ── #405 Tresor (nativ + extern) ── */
.vt-notice { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); font-size: 12px; color: var(--ink-2); line-height: 1.55; margin-bottom: 16px; }
.vt-notice svg { flex-shrink: 0; margin-top: 1px; color: var(--ink-muted); }
.vt-notice span { flex: 1; }
.vt-unit { padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.vt-unit-head { display: flex; align-items: center; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border); margin-bottom: 4px; flex-wrap: wrap; }
.vt-unit-head strong { font-family: var(--font-display); font-size: 14.5px; }
.vt-tile { display: inline-grid; place-items: center; border-radius: 6px; color: #fff; font-family: var(--font-mono); font-size: 9px; font-weight: 600; flex-shrink: 0; }
.vt-count { font-size: 10px; color: var(--ink-faint); }
.vt-row { display: flex; gap: 14px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--border); }
.vt-row:last-of-type { border-bottom: none; }
.vt-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.vt-row-main strong { font-size: 13px; display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.vt-ho { font-size: 8.5px; cursor: pointer; }
.vt-ho:hover { border-color: var(--border-strong); }
.vt-meta { font-size: 10px; color: var(--ink-faint); }
.vt-secret { display: flex; gap: 8px; align-items: center; margin-top: 6px; padding: 7px 10px; border: 1px dashed var(--border-strong); border-radius: var(--r-sm); background: var(--surface-2); flex-wrap: wrap; }
.vt-secret > .mono { font-size: 12px; word-break: break-all; }
.vt-row-acts { display: flex; gap: 6px; flex-shrink: 0; }
.vt-none { font-size: 12px; color: var(--ink-faint); font-style: italic; padding: 6px 0; }
.vt-log-row { display: flex; flex-direction: column; gap: 1px; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 11.5px; }
.vt-log-row:last-of-type { border-bottom: none; }
.vt-log-ts { font-size: 9px; color: var(--ink-faint); }
.vt-log-line { color: var(--ink-2); }
.vt-extern { display: flex; gap: 18px; align-items: flex-start; padding: 24px; max-width: 640px; }
.vt-extern-icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--pine-soft); color: var(--pine-ink); }
.vt-extern-h { font-family: var(--font-display); font-size: 18px; font-weight: 600; margin: 8px 0; }
.vt-extern-p { font-size: 13px; color: var(--ink-2); line-height: 1.55; margin: 0 0 16px; text-wrap: pretty; }
.vt-extern-warn { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; max-width: 640px; margin-top: 12px; font-size: 12px; color: var(--ink-2); line-height: 1.55; background: var(--ember-soft); border-color: var(--ember); }
.vt-extern-warn svg { flex-shrink: 0; margin-top: 1px; color: var(--ember-ink); }
.vt-lock { display: flex; gap: 18px; align-items: flex-start; padding: 24px; max-width: 640px; }
.vt-lock-icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--surface-2); color: var(--ink-muted); }
.vt-lock h2 { font-family: var(--font-display); font-size: 18px; font-weight: 600; margin: 0 0 8px; }
.vt-lock p { font-size: 13px; color: var(--ink-2); line-height: 1.55; margin: 0 0 14px; text-wrap: pretty; }
.vt-lock-row { display: flex; gap: 8px; max-width: 380px; }
.vt-lock-hint { font-size: 11.5px; color: var(--ink-muted); line-height: 1.5; margin-top: 12px; }

/* D11 — Benachrichtigungs-Popover an der Glocke */
.ntf-wrap { position: relative; }
.ntf-scrim { position: fixed; inset: 0; z-index: 110; }
.ntf-pop { position: absolute; top: calc(100% + 8px); right: 0; width: 348px; z-index: 120; padding: 0; box-shadow: var(--sh-3); }
.ntf-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--border); }
.ntf-head strong { font-family: var(--font-display); font-size: 13.5px; }
.ntf-row { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-bottom: 1px solid var(--border); cursor: pointer; }
.ntf-row:hover { background: var(--surface-2); }
.ntf-row.unread { background: var(--accent-faint); }
.ntf-row.unread:hover { background: var(--accent-soft); }
.ntf-ico { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-muted); flex-shrink: 0; }
.ntf-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ntf-txt b { font-size: 12.5px; font-weight: 600; }
.ntf-txt span { font-size: 11.5px; color: var(--ink-muted); line-height: 1.4; }
.ntf-ts { font-size: 9px; color: var(--ink-faint); white-space: nowrap; margin-top: 2px; }
.ntf-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex-shrink: 0; margin-top: 5px; }
.ntf-foot { padding: 9px 14px; font-size: 10.5px; color: var(--ink-faint); line-height: 1.45; }

/* D9 — Sidebar-Nutzer-Menü (Session-Aktionen leben hier, nie in der Topbar) */
.sbm-wrap { position: relative; }
.sbm-btn { cursor: pointer; }
.sbm-btn:hover, .sbm-btn.open { background: var(--surface-2); }
.sbm-pop { position: absolute; bottom: calc(100% + 6px); left: 8px; right: 8px; z-index: 120; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--sh-3); overflow: hidden; }
.sbm-id { padding: 10px 14px; border-bottom: 1px solid var(--border); }
.sbm-id .n { font-size: 12.5px; font-weight: 600; }
.sbm-id .u { font-family: var(--font-mono); font-size: 9.5px; color: var(--ink-muted); margin-top: 2px; letter-spacing: 0.04em; }
.sbm-item { display: flex; align-items: center; gap: 9px; padding: 10px 14px; font-size: 12.5px; font-weight: 500; cursor: pointer; color: var(--ink); }
.sbm-item:hover { background: var(--surface-2); }
.sbm-item .sub { margin-left: auto; font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.05em; color: var(--ink-faint); text-transform: uppercase; }
.sbm-item + .sbm-item { border-top: 1px solid var(--border); }