/* ==========================================================================
   Regelwerk (D-189). Eine Quelle fuer alle Bereiche und Unterseiten.
   Grundlage: Minimalism / Swiss Style fuer dichte Arbeitsoberflaechen.
   Jeder Abstand ist ein Vielfaches von vier. Die Schriftskala hat mit 14 und 20
   eigene Stufen, weil sich 12 und 14 unterscheiden lassen muessen.
   Wer einen Wert braucht, der hier fehlt, aendert die Skala und nicht die
   einzelne Regel; tests/design.test.js schlaegt bei rohen Pixelwerten an.
   ========================================================================== */
:root {
  color-scheme: light;

  /* Abstaende: sechs Stufen. Der Name ist der Wert geteilt durch vier. */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px;
  /* Schrift: 12px ist die Untergrenze, darunter wird Text unlesbar klein. */
  --text-xs: 12px; --text-sm: 14px; --text-md: 16px; --text-lg: 20px; --text-xl: 24px; --text-2xl: 32px; --text-3xl: 40px;
  /* Radien: klein fuer Einbauteile, mittel fuer Felder, gross fuer Karten, pill fuer Marken. */
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 999px;
  --leading-none: 1; --leading-tight: 1.25; --leading-normal: 1.5;
  /* Hoehe aller Eingabe-, Auswahl- und Schaltflaechen. Auf Beruehrungsgeraeten
     hebt die Medienabfrage bei 760px auf 44px an (Mindestgroesse fuer Finger). */
  --control-h: 36px;
  --transition: 180ms ease;
  /* Hoehe der festen Kopfzeile. Sie wird auch fuer den Fokusabstand und die
     ausklappbaren Bereiche gebraucht und stand vorher an sechs Stellen einzeln. */
  --header-h: 78px;

  --bg: #f2f5f4; --surface: #fff; --surface-2: #f7f9f8; --text: #17211d;
  /* Alle folgenden Farben erreichen auf jeder Flaeche dieses Modus mindestens 4,5:1.
     --muted war #6e7b75 und lag mit 4,18:1 auf var(--surface-2) darunter. */
  --muted: #616d67;
  --border: #dde5e1; --accent: #0a7c58; --accent-soft: #e3f4ed;
  --amber: #8f5606;
  /* Ein Rot fuer alle Fehler, Sperren und Loeschungen. Vorher standen zwei fast
     gleiche Rottoene nebeneinander, beide unter 4,5:1. */
  --danger: #9e3b34;
  --info: #5a4bb8;
  /* Flaeche der Zustandsmarke "wartet intern". */
  --info-soft: #7667d222;
  /* Abdunklung hinter einem Dialog. */
  --backdrop: #07120f99;
  /* Seitenleiste und Einrichtungsspalte sind in beiden Modi dunkel und folgen
     deshalb nicht --surface. Im Hellmodus dunkelgruen, im Dunkelmodus neutral grau. */
  --nav-bg: #113a2e; --nav-text: #eefbf6; --nav-muted: #cbe1d9; --nav-dim: #91aaa1;
  --nav-accent: #78dcb7; --nav-mark-bg: #43c896; --nav-mark-text: #073d2b;
  /* Text auf einer Akzent- oder Warnflaeche. --accent und --amber wechseln zwischen
     den Modi ihre Helligkeit, eine feste weisse Schrift ergab im Dunkelmodus 1,87:1. */
  --on-accent: #ffffff;
  --focus: #0a7c58;
  --shadow: 0 12px 36px #15342810;
}

.qr-view { min-height: 0; flex: 1; overflow: hidden; padding: var(--space-4); }
.qr-toolbar { display: flex; justify-content: space-between; gap: var(--space-4); align-items: start; margin-bottom: var(--space-3); }
.qr-toolbar h2 { margin: 0; font-size: var(--text-lg); }.qr-toolbar p { margin: var(--space-1) 0 0; color: var(--muted); font-size: var(--text-xs); }body[data-live="connected"] .qr-toolbar h2::after { content: '● Live'; margin-left: var(--space-2); color: var(--accent); font-size: var(--text-xs); font-weight: 700; }body[data-live="reconnecting"] .qr-toolbar h2::after { content: 'Verbindung wird wiederhergestellt …'; margin-left: var(--space-2); color: var(--amber); font-size: var(--text-xs); font-weight: 500; }body[data-live="connected"] #page-subtitle::after { content: ' · ● Live'; color: var(--accent); font-weight: 700; }body[data-live="reconnecting"] #page-subtitle::after { content: ' · Verbindung wird wiederhergestellt …'; color: var(--amber); }
.new-qr { position: relative; z-index: 5; }.new-qr summary { list-style: none; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--accent); color:var(--on-accent); font-weight: 700; cursor: pointer; }
.new-qr[open] form { position: absolute; right: 0; top: 44px; width: 380px; display: grid; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); }
.new-qr form label { display: grid; gap: var(--space-1); color: var(--muted); font-size: var(--text-xs); }.new-qr input, .new-qr select { width: 100%; min-width: 0; padding: var(--space-2); }
.qr-layout { height: calc(100vh - 155px); display: grid; grid-template-columns: minmax(330px, 42%) 1fr; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); }
.qr-list { overflow: auto; border-right: 1px solid var(--border); }.qr-card { width: 100%; display: grid; grid-template-columns: 46px minmax(0,1fr) auto; gap: var(--space-2); align-items: center; padding: var(--space-3); border: 0; border-bottom: 1px solid var(--border); background: transparent; text-align: left; cursor: pointer; }
.qr-card:hover, .qr-card.active { background: var(--surface-2); }.qr-card.active { box-shadow: inset 3px 0 var(--accent); }.qr-mini { width: 42px; height: 42px; display: grid; place-items: center; border-radius: var(--radius-md); background: var(--accent-soft); color: var(--accent); font-size: var(--text-xl); }
.qr-card strong, .qr-card small, .qr-card em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.qr-card small { margin: var(--space-1) 0; color: var(--muted); font-size: var(--text-xs); }.qr-card em { color: var(--accent); font-size: var(--text-xs); font-style: normal; }
.qr-state { padding: var(--space-1) var(--space-2); border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 750; }.qr-state.live { background: var(--accent-soft); color: var(--accent); }.qr-state.draft { background: #ef9a2d22; color: var(--amber); }.qr-state.off { background: #9e3b341c; color: var(--danger); }
.qr-detail { overflow: auto; padding: var(--space-4); }.qr-preview-card { display: grid; justify-items: center; max-width: 480px; margin: 0 auto var(--space-4); padding: var(--space-6); border-radius: var(--radius-lg); background: #f6faf8; color: #173128; text-align: center; }
.qr-preview-card h2 { margin: var(--space-2) 0; }.qr-preview-card p { margin: 0 0 var(--space-3); color: #567065; }.qr-preview-card img { width: min(250px, 70vw); border-radius: var(--radius-md); background: white; }.qr-preview-card small { max-width: 100%; margin-top: var(--space-2); color: #5e7268; overflow-wrap: anywhere; }
.qr-facts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }.qr-facts > div { padding: var(--space-3); border-radius: var(--radius-md); background: var(--surface-2); }.qr-facts > div:nth-child(3) { grid-column: 1 / -1; }.qr-facts span, .qr-facts b { display: block; font-size: var(--text-xs); }.qr-facts span { margin-bottom: var(--space-1); color: var(--muted); }
.qr-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0; }.qr-actions button, .secondary-button { border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); background: var(--surface); color: var(--text); text-decoration: none; cursor: pointer; }.qr-actions button:disabled { opacity: .45; cursor: not-allowed; }.qr-actions .danger { color: var(--danger); }
.giveaway-separation { margin-top: var(--space-3); padding: var(--space-3); border-radius: var(--radius-md); background: var(--surface-2); }.giveaway-separation p { margin: var(--space-1) 0 0; color: var(--muted); font-size: var(--text-xs); }

@media (max-width: 760px) {
  .qr-view { padding: var(--space-2); overflow: auto; }.qr-toolbar { display: grid; }.new-qr summary { text-align: center; }.new-qr[open] form { position: static; width: 100%; margin-top: var(--space-2); }
  .qr-layout { height: auto; min-height: calc(100vh - 190px); display: block; }.qr-list { max-height: 42vh; border-right: 0; border-bottom: 1px solid var(--border); }.qr-card { grid-template-columns: 42px minmax(0,1fr); }.qr-card .qr-state { grid-column: 2; justify-self: start; }
  .qr-detail { min-height: 40vh; padding: var(--space-3); }.qr-facts { grid-template-columns: 1fr; }.qr-facts > div:nth-child(3) { grid-column: auto; }.qr-preview-card { padding: var(--space-4); }
}

/* Der Dunkelmodus aendert ausschliesslich Farben. Abstaende, Schrift und Radien
   sind modusunabhaengig und stehen nur einmal in :root. */
[data-theme="dark"] {
  color-scheme: dark;
  /* Neutrale Graustufen ohne Farbstich (D-190). Drei klar unterscheidbare Ebenen:
     Hintergrund, Karte, abgesetzte Zeile. */
  --bg: #141417; --surface: #1e1e21; --surface-2: #282a2d; --text: #f0f0f2; --muted: #a2a2a8;
  --border: #35353c;
  /* Der Akzent ist hier bewusst entfaerbt: Links, aktive Zustaende und Hauptknoepfe
     werden hell statt gruen. Farbe bleibt allein Warnung und Fehler vorbehalten,
     damit sie sofort auffaellt. */
  --accent: #e8e8ea; --accent-soft: #2a2a2f;
  --amber: #ffc167;
  --danger: #ee8a82;
  /* Auch "wartet intern" wird neutral, sonst waere es die dritte Farbe. */
  --info: #a2a2a8; --info-soft: #2a2a2f;
  --backdrop: #00000099;
  --nav-bg: #1a1a1d; --nav-text: #f0f0f2; --nav-muted: #a2a2a8; --nav-dim: #86868c;
  --nav-accent: #e8e8ea; --nav-mark-bg: #e8e8ea; --nav-mark-text: #1a1a1d;
  /* Text auf dem hellen Akzent muss dunkel sein. */
  --on-accent: #1a1a1d;
  --focus: #f0f0f2;
  --shadow: 0 12px 36px #0006;
}
* { box-sizing: border-box; }
.hidden { display: none !important; }

/* --------------------------------------------------------------------------
   Tastaturbedienung. Jedes bedienbare Element zeigt, wo der Fokus steht.
   :focus-visible trifft nur die Tastatur, ein Mausklick loest keinen Ring aus.
   -------------------------------------------------------------------------- */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* Die feste Kopfzeile darf das angesprungene Element nicht verdecken. */
html { scroll-padding-top: var(--header-h); }
.messages, .personal-security-content, .inbox-panel, .details-panel { scroll-padding-top: var(--space-4); }

/* --------------------------------------------------------------------------
   Wer im Betriebssystem weniger Bewegung verlangt, bekommt keine Uebergaenge.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}
body { margin: 0; overflow-x: hidden; font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--text); }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 232px 1fr; }
.sidebar { background: var(--nav-bg); color: var(--nav-text); padding: var(--space-6) var(--space-3); display: flex; flex-direction: column; }
.brand { display: flex; align-items: center; gap: var(--space-2); font-weight: 750; padding: 0 var(--space-2) var(--space-6); }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--radius-md); background: var(--nav-mark-bg); color: var(--nav-mark-text); }
nav { display: grid; gap: var(--space-1); }
.nav-item { display: grid; grid-template-columns: 24px 1fr auto; gap: var(--space-2); align-items: center; width: 100%; border: 0; border-radius: var(--radius-md); padding: var(--space-3) var(--space-3); text-align: left; background: transparent; color: var(--nav-muted); cursor: pointer; }
.nav-item.active { background: #ffffff18; color: white; }
.nav-item b { padding: var(--space-1) var(--space-2); border-radius: var(--radius-pill); background: var(--nav-mark-bg); color: var(--nav-mark-text); font-size: var(--text-xs); }
.test-badge { margin-top: auto; padding: var(--space-3); border: 1px solid #ffffff1f; border-radius: var(--radius-md); font-size: var(--text-xs); color: var(--nav-muted); }
.test-badge span { display: inline-block; width: 8px; height: 8px; margin-right: var(--space-1); border-radius: 50%; background: #ffc45e; }
main { min-width: 0; height: 100vh; display: flex; flex-direction: column; }
.topbar { height: var(--header-h); padding: var(--space-3) var(--space-6); background: var(--surface); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
h1 { margin: 0; font-size: var(--text-lg); } .topbar p { margin: var(--space-1) 0 0; color: var(--muted); font-size: var(--text-xs); }
.top-actions { display: flex; gap: var(--space-2); align-items: center; }
select, input, textarea { border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: var(--radius-md); }
select { padding: var(--space-2) var(--space-8) var(--space-2) var(--space-2); }
.icon-button, .mobile-menu { width: var(--control-h); height: var(--control-h); padding: 0; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); cursor: pointer; }
.mobile-menu { display: none; }
.workspace { min-height: 0; flex: 1; display: grid; grid-template-columns: minmax(270px, 330px) minmax(350px, 1fr) 360px; }
.inbox-panel, .chat-panel, .details-panel { min-height: 0; background: var(--surface); }
.inbox-panel { border-right: 1px solid var(--border); overflow: auto; }
.filters { padding: var(--space-3) var(--space-3) var(--space-2); display: flex; gap: var(--space-1); overflow-x: auto; }
.filter { white-space: nowrap; border: 0; background: transparent; color: var(--muted); padding: var(--space-2) var(--space-2); border-radius: var(--radius-md); cursor: pointer; }
.filter.active { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.search { margin: var(--space-1) var(--space-3) var(--space-2); padding: 0 var(--space-2); height: 38px; display: flex; gap: var(--space-2); align-items: center; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2); color: var(--muted); }
.search input { min-width: 0; flex: 1; padding: 0; border: 0; outline: 0; background: transparent; }
/* Das Suchfeld hat keinen eigenen Rahmen. Statt den Fokus zu unterdruecken,
   zeigt ihn die umgebende Leiste - der Ring bleibt sichtbar. */
.search:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.list-controls { padding: 0 var(--space-3) var(--space-2); }.list-controls select { width: 100%; padding: var(--space-2) var(--space-2); }
.contact { width: 100%; min-width: 0; border: 0; border-top: 1px solid var(--border); padding: var(--space-3); background: transparent; text-align: left; cursor: pointer; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: var(--space-2); }
.contact:hover, .contact.active { background: var(--surface-2); }
.contact.active { box-shadow: inset 3px 0 var(--accent); }
.avatar { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: 750; }
.contact-main { min-width: 0; }
.contact-title { display: flex; align-items: center; gap: var(--space-2); font-weight: 700; }
.contact-title span:first-child, .preview { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Zustaendigkeit. Die drei Zustaende unterscheiden sich nicht nur in der Farbe,
   sondern in der Form: gefuellt fuer eigene, hohl fuer fremde, gefuellt-gelb fuer
   nicht zugewiesene Kontakte. Grund: im einfarbigen Dunkelmodus lagen "eigene" und
   "fremde" als zwei Grautoene bei nur 1,74:1 zueinander - auf einem 8-Pixel-Punkt
   nicht unterscheidbar. Kapitel 2 verlangt aber, dass eigene, fremde und nicht
   zugewiesene Kontakte optisch getrennt bleiben. Ueber die Form gilt das in beiden
   Modi und auch bei einer Farbsehschwaeche. */
.ownership { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: transparent; border: 2px solid var(--muted); }
.ownership.mine { background: var(--accent); border-color: var(--accent); }
.ownership.unassigned { background: var(--amber); border-color: var(--amber); }
.topic { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--accent); font-size: var(--text-xs); margin: var(--space-1) 0; font-weight: 650; }
.preview { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: var(--text-xs); }
.contact-time { color: var(--muted); font-size: var(--text-xs); }
.contact-line { display: flex; gap: var(--space-1); align-items: center; min-width: 0; margin: var(--space-1) 0; }.contact-line .topic { margin: 0; }
.status-pill { flex: 0 0 auto; padding: var(--space-1) var(--space-2); border-radius: var(--radius-pill); background: var(--surface-2); color: var(--muted); font-size: var(--text-xs); font-weight: 700; }.status-pill.NEU { background: #ef9a2d22; color: var(--amber); }.status-pill.OFFEN { background: var(--accent-soft); color: var(--accent); }.status-pill.WARTET_INTERN { background: var(--info-soft); color: var(--info); }
.contact.warning { box-shadow: inset 3px 0 #ef9a2d; }.contact.overdue { box-shadow: inset 3px 0 var(--danger); background: #9e3b3408; }
.chat-panel { display: flex; flex-direction: column; }
.chat-panel.empty { display: grid; place-items: center; background: var(--surface-2); }
.empty-state { text-align: center; color: var(--muted); }.empty-state div { font-size: var(--text-3xl); }.empty-state h2 { color: var(--text); margin-bottom: var(--space-1); }
.chat-header { min-height: 68px; border-bottom: 1px solid var(--border); padding: var(--space-2) var(--space-3); display: flex; gap: var(--space-2); align-items: center; }
.chat-header-info { flex: 1; min-width: 115px; overflow: hidden; }.chat-header-info strong, .chat-header-info small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.chat-header-info small { color: var(--muted); }
.claim-button { border: 1px solid var(--accent); color: var(--accent); background: transparent; padding: var(--space-2) var(--space-2); border-radius: var(--radius-md); cursor: pointer; }
.status-select, .owner-select { width: 112px; max-width: 112px; padding: var(--space-2) var(--space-1); font-size: var(--text-xs); }.details-button { display: none; border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius-md); padding: var(--space-2); }.back-button { display: none; border: 0; background: transparent; font-size: var(--text-2xl); cursor: pointer; }
.messages { flex: 1; padding: var(--space-4); overflow: auto; background: color-mix(in srgb, var(--bg) 72%, var(--surface)); display: flex; flex-direction: column; gap: var(--space-2); }
.bubble { max-width: 76%; border-radius: var(--radius-lg); padding: var(--space-2) var(--space-3); box-shadow: 0 2px 8px #10251d0b; background: var(--surface); align-self: flex-start; }
.bubble.out { align-self: flex-end; background: var(--accent-soft); }
.bubble.note, .bubble.audit { max-width: 90%; align-self: center; border: 1px dashed var(--border); color: var(--muted); background: var(--surface-2); font-size: var(--text-xs); }
.bubble-meta { display: flex; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-1); font-size: var(--text-xs); color: var(--muted); }
.composer { border-top: 1px solid var(--border); padding: var(--space-3); display: flex; gap: var(--space-2); align-items: end; }
.snippet-row { padding: var(--space-2) var(--space-3) 0; border-top: 1px solid var(--border); }.snippet-select { width: 210px; padding: var(--space-2); font-size: var(--text-xs); }
.composer textarea { flex: 1; min-height: 42px; max-height: 110px; resize: vertical; padding: var(--space-2); }
.send-button { height: 42px; border: 0; border-radius: var(--radius-md); padding: 0 var(--space-4); background: var(--accent); color:var(--on-accent); font-weight: 700; cursor: pointer; }
.details-panel { border-left: 1px solid var(--border); overflow: auto; padding: 0; }
.empty-details { background: var(--surface-2); }
.details-top { padding: var(--space-4) var(--space-4) var(--space-2); }.detail-title { display: flex; align-items: center; gap: var(--space-2); }.detail-title .avatar { width: 48px; height: 48px; }
.close-details { display: none; float: right; border: 0; background: transparent; font-size: var(--text-xl); }.detail-tabs { display: flex; gap: var(--space-1); padding: 0 var(--space-3); border-bottom: 1px solid var(--border); overflow-x: auto; }.detail-tab { border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); padding: var(--space-2) var(--space-2); font-size: var(--text-xs); cursor: pointer; }.detail-tab.active { color: var(--accent); border-color: var(--accent); font-weight: 700; }.detail-content { padding: var(--space-4) var(--space-4) var(--space-6); }
.detail-card { padding: var(--space-3) 0; border-top: 1px solid var(--border); }
.detail-card h3 { margin: 0 0 var(--space-2); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.detail-row { display: flex; justify-content: space-between; gap: var(--space-3); margin: var(--space-2) 0; font-size: var(--text-sm); }.detail-row span:first-child { color: var(--muted); }
.consent { display: inline-block; border-radius: var(--radius-pill); padding: var(--space-1) var(--space-2); font-size: var(--text-xs); background: var(--accent-soft); color: var(--accent); }
.consent.REVOKED, .consent.DECLINED { color: var(--danger); background: #9e3b341c; }
.note-form textarea { width: 100%; min-height: 70px; padding: var(--space-2); }.note-form button { margin-top: var(--space-2); width: 100%; border: 1px solid var(--border); background: var(--surface-2); border-radius: var(--radius-md); padding: var(--space-2); cursor: pointer; }
.contact-form { display: grid; gap: var(--space-3); }.contact-form label { display: grid; gap: var(--space-1); color: var(--muted); font-size: var(--text-xs); }.contact-form input, .contact-form select { width: 100%; min-width: 0; padding: var(--space-2); color: var(--text); }.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }.detail-card.compact { padding-bottom: var(--space-1); }.tag-options { display: flex; flex-wrap: wrap; gap: var(--space-1); }.tag-options label input { display: none; }.tag-options label span { display: block; border: 1px solid var(--border); border-radius: var(--radius-pill); padding: var(--space-1) var(--space-2); cursor: pointer; }.tag-options label input:checked + span { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }.readonly-info { display: grid; grid-template-columns: auto 1fr; gap: var(--space-1) var(--space-3); padding: var(--space-3); border-radius: var(--radius-md); background: var(--surface-2); font-size: var(--text-xs); }.readonly-info span { color: var(--muted); }.primary-wide { border: 0; border-radius: var(--radius-md); background: var(--accent); color:var(--on-accent); padding: var(--space-2); font-weight: 700; cursor: pointer; }
.timeline { display: grid; gap: 0; }.timeline-item { position: relative; display: grid; grid-template-columns: 14px 1fr; gap: var(--space-2); padding: 0 0 var(--space-4); }.timeline-item::before { content: ''; position: absolute; left: 5px; top: 12px; bottom: 0; border-left: 1px solid var(--border); }.timeline-item:last-child::before { display: none; }.timeline-dot { z-index: 1; width: 11px; height: 11px; margin-top: var(--space-1); border: 2px solid var(--surface); border-radius: 50%; background: var(--accent); }.timeline-item.note .timeline-dot { background: var(--info); }.timeline-item.audit .timeline-dot { background: var(--amber); }.timeline-item b { font-size: var(--text-xs); }.timeline-item p { margin: var(--space-1) 0; font-size: var(--text-xs); }.timeline-item small { color: var(--muted); font-size: var(--text-xs); }.muted { color: var(--muted); font-size: var(--text-xs); }
.privacy-summary { padding: var(--space-3); border-radius: var(--radius-md); background: var(--surface-2); }.privacy-summary h3 { margin: 0 0 var(--space-2); }.privacy-summary p { color: var(--muted); font-size: var(--text-xs); }.evidence { display: grid; gap: var(--space-1); padding: var(--space-2) 0; border-bottom: 1px solid var(--border); font-size: var(--text-xs); }.evidence > span, .evidence small { color: var(--muted); }.protected-box { padding: var(--space-3); border: 1px solid #ef9a2d55; border-radius: var(--radius-md); background: #ef9a2d12; color: var(--amber); font-size: var(--text-xs); }
#toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; background: var(--text); color: var(--surface); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); box-shadow: var(--shadow); transition: opacity var(--transition), transform var(--transition); }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
.appointments-view { min-height: 0; flex: 1; overflow: hidden; padding: var(--space-4); }.appointment-toolbar { display: flex; justify-content: space-between; gap: var(--space-3); align-items: start; margin-bottom: var(--space-3); }.appointment-toolbar > div { display: flex; gap: var(--space-1); overflow-x: auto; }.appointment-filter { border: 1px solid var(--border); border-radius: var(--radius-pill); padding: var(--space-2) var(--space-3); background: var(--surface); color: var(--muted); white-space: nowrap; cursor: pointer; }.appointment-filter.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }.new-appointment { position: relative; z-index: 4; }.new-appointment summary { list-style: none; border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); background: var(--accent); color:var(--on-accent); font-weight: 700; cursor: pointer; }.new-appointment[open] form { position: absolute; right: 0; top: 44px; width: 360px; display: grid; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); }.new-appointment form label, .appointment-form label { display: grid; gap: var(--space-1); color: var(--muted); font-size: var(--text-xs); }.new-appointment input, .new-appointment select, .appointment-form input, .appointment-form select { width: 100%; min-width: 0; padding: var(--space-2); }
.appointment-layout { height: calc(100vh - 148px); display: grid; grid-template-columns: minmax(340px, 42%) 1fr; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); box-shadow: var(--shadow); }.appointment-list { overflow: auto; border-right: 1px solid var(--border); }.appointment-card { width: 100%; display: grid; grid-template-columns: 48px minmax(0,1fr) auto; gap: var(--space-3); align-items: center; padding: var(--space-3); border: 0; border-bottom: 1px solid var(--border); background: transparent; text-align: left; cursor: pointer; }.appointment-card:hover, .appointment-card.active { background: var(--surface-2); }.appointment-card.active { box-shadow: inset 3px 0 var(--accent); }.calendar-date { width: 44px; height: 48px; display: grid; place-items: center; align-content: center; border-radius: var(--radius-md); background: var(--accent-soft); color: var(--accent); }.calendar-date b { font-size: var(--text-lg); line-height: var(--leading-none); }.calendar-date small { font-size: var(--text-xs); text-transform: uppercase; }.appointment-card > span:nth-child(2) { min-width: 0; }.appointment-card strong, .appointment-card small, .appointment-card em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.appointment-card small { margin: var(--space-1) 0; color: var(--muted); font-size: var(--text-xs); }.appointment-card em { color: var(--accent); font-size: var(--text-xs); font-style: normal; }.appointment-status { display: inline-block; border-radius: var(--radius-pill); padding: var(--space-1) var(--space-2); background: var(--surface-2); color: var(--muted); font-size: var(--text-xs); font-weight: 700; white-space: nowrap; }.appointment-status.ANGEFRAGT { background: #ef9a2d22; color: var(--amber); }.appointment-status.BESTÄTIGT { background: var(--accent-soft); color: var(--accent); }.appointment-status.ABGESAGT, .appointment-status.NICHT_ERSCHIENEN { background: #9e3b341c; color: var(--danger); }.appointment-detail { overflow: auto; padding: var(--space-6); }.appointment-detail-head { display: flex; justify-content: space-between; gap: var(--space-4); align-items: start; padding-bottom: var(--space-4); border-bottom: 1px solid var(--border); }.appointment-detail-head h2 { margin: var(--space-1) 0; }.appointment-detail-head p { margin: 0; color: var(--muted); font-size: var(--text-xs); }.eyebrow { color: var(--accent); font-size: var(--text-xs); font-weight: 800; letter-spacing: .08em; }.appointment-form { display: grid; gap: var(--space-3); padding: var(--space-4) 0; }.form-hint { margin: -4px 0 0; color: var(--amber); font-size: var(--text-xs); }.notify-check { display: flex !important; grid-template-columns: 16px 1fr; align-items: start; }.notify-check input { width: auto; margin: var(--space-1) 0; }.appointment-meta { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }.appointment-meta > div { padding: var(--space-3); border-radius: var(--radius-md); background: var(--surface-2); }.appointment-meta span, .appointment-meta b { display: block; font-size: var(--text-xs); }.appointment-meta span { color: var(--muted); margin-bottom: var(--space-1); }.appointment-events { margin-top: var(--space-4); }.appointment-events h3 { font-size: var(--text-xs); text-transform: uppercase; color: var(--muted); }.appointment-events > div { display: grid; grid-template-columns: 10px 1fr; gap: var(--space-2); padding: var(--space-2) 0; }.appointment-events > div > span { width: 8px; height: 8px; margin-top: var(--space-1); border-radius: 50%; background: var(--accent); }.appointment-events p, .appointment-events b, .appointment-events small { margin: 0; display: block; font-size: var(--text-xs); }.appointment-events small { margin-top: var(--space-1); color: var(--muted); }.conflict-box { padding: var(--space-3); border: 1px solid #ef9a2d; border-radius: var(--radius-md); background: #ef9a2d18; color: var(--amber); font-size: var(--text-xs); }.conflict-box button { margin-left: var(--space-2); border: 0; border-radius: var(--radius-md); padding: var(--space-1) var(--space-2); background: var(--amber); color:var(--on-accent); }.empty-appointments { padding: var(--space-4); }
@media (max-width: 1180px) { .workspace { grid-template-columns: 300px 1fr; }.details-panel { display: none; }.details-button { display: block; }.details-panel.mobile-open { display: block; position: fixed; z-index: 20; right: 0; top: var(--header-h); bottom: 0; width: min(390px, 100vw); box-shadow: var(--shadow); }.close-details { display: block; } }
@media (max-width: 760px) {
  .app-shell { display: block; }.sidebar { display: none; }.sidebar.mobile-open { display: flex; position: fixed; z-index: 50; inset: var(--header-h) auto 0 0; width: min(290px, 82vw); box-shadow: var(--shadow); }.mobile-menu { display: inline-grid; place-items: center; }.topbar { height: var(--header-h); padding: var(--space-2) var(--space-3); gap: var(--space-2); }.topbar p { display: none; }
  h1 { font-size: var(--text-lg); }.top-actions { gap: var(--space-1); } #current-user { width: 118px; max-width: 118px; }.workspace { display: block; }.inbox-panel { height: calc(100vh - var(--header-h)); }.chat-panel { display: none; height: calc(100vh - var(--header-h)); }.workspace.chat-open .inbox-panel { display: none; }.workspace.chat-open .chat-panel { display: flex; }
  .back-button { display: block; }.chat-header .avatar { display: none; }.chat-header-info { min-width: 0; }.chat-header-info small { display: none; }.status-select { max-width: 92px; width: 92px; }.owner-select, .claim-button { max-width: 85px; padding: var(--space-2); }.details-button { font-size: 0; }.details-button::after { content: 'ⓘ'; font-size: var(--text-lg); }.details-panel.mobile-open { top: var(--header-h); width: 100vw; }.bubble { max-width: 88%; }.snippet-select { width: 100%; }.form-grid { grid-template-columns: 1fr 1fr; }
  .appointments-view { padding: var(--space-2); overflow: auto; }.appointment-toolbar { display: grid; }.new-appointment summary { text-align: center; }.new-appointment[open] form { position: static; width: 100%; margin-top: var(--space-2); }.appointment-layout { height: auto; min-height: calc(100vh - 190px); display: block; }.appointment-list { max-height: 46vh; border-right: 0; border-bottom: 1px solid var(--border); }.appointment-card { grid-template-columns: 44px minmax(0,1fr); }.appointment-card .appointment-status { grid-column: 2; justify-self: start; }.appointment-detail { min-height: 40vh; padding: var(--space-4); }
}

.code-format-note { display:grid; gap:var(--space-1); align-content:center; padding:var(--space-2) var(--space-3); border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface-2); }.code-format-note b { font-size:var(--text-xs); }.code-format-note span { color:var(--muted); font-size:var(--text-xs); line-height:var(--leading-normal); }.code-format-note code { color:var(--accent); font-family:inherit; font-weight:750; letter-spacing:.04em; }
.giveaway-view { min-height: 0; flex: 1; overflow: hidden; padding: var(--space-4); }.giveaway-toolbar { display: flex; justify-content: space-between; gap: var(--space-4); align-items: start; margin-bottom: var(--space-3); }.giveaway-toolbar h2 { margin: 0; font-size: var(--text-lg); }.giveaway-toolbar p { margin: var(--space-1) 0 0; color: var(--muted); font-size: var(--text-xs); }
.new-giveaway { position: relative; z-index: 7; }.new-giveaway summary { list-style: none; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--accent); color:var(--on-accent); font-weight: 700; cursor: pointer; }.new-giveaway[open] form { position: absolute; right: 0; top: 44px; width: min(680px,calc(100vw - 270px)); max-height: calc(100vh - 110px); overflow: auto; display: grid; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); }.new-giveaway form>label,.new-giveaway .form-grid>label { display: grid; gap: var(--space-1); color: var(--muted); font-size: var(--text-xs); }.new-giveaway input,.new-giveaway textarea,.new-giveaway select { width: 100%; min-width: 0; padding: var(--space-2); }.new-giveaway textarea { min-height: 58px; }.check-label { grid-template-columns: 18px 1fr !important; align-items: center; }.check-label input { width: auto; }
.pool-editor { padding: var(--space-3); border-radius: var(--radius-md); background: var(--surface-2); }.pool-editor>div:first-child { display: flex; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-2); }.pool-editor>div:first-child span { color: var(--muted); font-size: var(--text-xs); }.prize-rows { display: grid; gap: var(--space-1); }.prize-row { display: grid; grid-template-columns: minmax(140px,1fr) 90px 85px 34px; gap: var(--space-2); align-items: center; }.prize-row label { display: flex; gap: var(--space-1); color: var(--muted); font-size: var(--text-xs); }.prize-row label input { width: auto; }.remove-prize,.add-prize { border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-2); background: var(--surface); cursor: pointer; }.add-prize { margin-top: var(--space-2); }
.giveaway-layout { height: calc(100vh - 155px); display: grid; grid-template-columns: minmax(330px,40%) 1fr; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); }.giveaway-list { overflow: auto; border-right: 1px solid var(--border); }.giveaway-card { width: 100%; display: grid; grid-template-columns: 44px minmax(0,1fr) auto; gap: var(--space-2); align-items: center; padding: var(--space-3); border: 0; border-bottom: 1px solid var(--border); background: transparent; text-align: left; cursor: pointer; }.giveaway-card:hover,.giveaway-card.active { background: var(--surface-2); }.giveaway-card.active { box-shadow: inset 3px 0 var(--accent); }.giveaway-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--radius-md); background: var(--accent-soft); color: var(--accent); font-size: var(--text-xl); }.giveaway-card strong,.giveaway-card small,.giveaway-card em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.giveaway-card small { margin: var(--space-1) 0; color: var(--muted); font-size: var(--text-xs); }.giveaway-card em { color: var(--accent); font-size: var(--text-xs); font-style: normal; }.giveaway-status { padding: var(--space-1) var(--space-2); border-radius: var(--radius-pill); background: var(--surface-2); color: var(--muted); font-size: var(--text-xs); font-weight: 750; white-space: nowrap; }.giveaway-status.PUBLISHED,.giveaway-status.ISSUED { background: var(--accent-soft); color: var(--accent); }.giveaway-status.DRAFT,.giveaway-status.PAUSED { background: #ef9a2d22; color: var(--amber); }.giveaway-status.ENDED,.giveaway-status.BLOCKED { background: #9e3b341c; color: var(--danger); }
.giveaway-detail { overflow: auto; padding: var(--space-4); }.giveaway-detail-head { display: flex; justify-content: space-between; gap: var(--space-4); align-items: start; padding-bottom: var(--space-4); border-bottom: 1px solid var(--border); }.giveaway-detail-head h2 { margin: var(--space-1) 0; }.giveaway-detail-head p { max-width: 650px; margin: 0; color: var(--muted); font-size: var(--text-xs); }.giveaway-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--space-2); margin: var(--space-4) 0; }.giveaway-stats>div,.giveaway-config>div { padding: var(--space-3); border-radius: var(--radius-md); background: var(--surface-2); }.giveaway-stats span,.giveaway-stats b,.giveaway-config span,.giveaway-config b { display: block; font-size: var(--text-xs); }.giveaway-stats span,.giveaway-config span { margin-bottom: var(--space-1); color: var(--muted); }.giveaway-stats b { font-size: var(--text-lg); }.giveaway-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }.giveaway-actions button { border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); background: var(--surface); cursor: pointer; }.giveaway-actions .start-store { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }.giveaway-actions .danger { color: var(--danger); }
.store-launch-box { margin: var(--space-3) 0; padding: var(--space-3); border: 1px solid var(--accent); border-radius: var(--radius-md); background: var(--accent-soft); }.store-launch-box p { margin: var(--space-1) 0 var(--space-2); color: var(--muted); font-size: var(--text-xs); }.store-launch-box a { display: inline-block; border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); background: var(--accent); color:var(--on-accent); font-weight: 700; text-decoration: none; }.store-launch-box small { display: block; margin-top: var(--space-2); color: var(--muted); }.giveaway-config { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin: var(--space-3) 0; }.giveaway-pool,.giveaway-participants { margin-top: var(--space-4); }.giveaway-pool h3,.giveaway-participants h3 { font-size: var(--text-xs); text-transform: uppercase; color: var(--muted); }.giveaway-pool>div { display: grid; grid-template-columns: 1fr auto; gap: var(--space-1) var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--border); }.giveaway-pool small { grid-column: 1/-1; color: var(--muted); }.participant-table>div { display: grid; grid-template-columns: minmax(170px,1fr) minmax(120px,1fr) auto; gap: var(--space-2); align-items: center; padding: var(--space-2) 0; border-bottom: 1px solid var(--border); font-size: var(--text-xs); }.participant-table span b,.participant-table span small { display: block; }.participant-table small { color: var(--muted); }.participant-table em { font-style: normal; }.empty-giveaway { padding: var(--space-4); }

@media (max-width: 900px) { .giveaway-view { padding: var(--space-2); overflow: auto; }.giveaway-toolbar { display: grid; }.new-giveaway[open] form { position: static; width: 100%; max-height: none; margin-top: var(--space-2); }.giveaway-layout { height: auto; min-height: calc(100vh - 190px); display: block; }.giveaway-list { max-height: 40vh; border-right: 0; border-bottom: 1px solid var(--border); }.giveaway-stats { grid-template-columns: 1fr 1fr; }.giveaway-config { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .prize-row { grid-template-columns: 1fr 75px; }.prize-row label { grid-column: 1; }.prize-row .remove-prize { grid-column: 2; grid-row: 2; }.giveaway-card { grid-template-columns: 40px minmax(0,1fr); }.giveaway-card>.giveaway-status { grid-column: 2; justify-self: start; }.participant-table>div { grid-template-columns: 1fr auto; }.participant-table>div>span:nth-child(2) { grid-column: 1; }.form-grid { grid-template-columns: 1fr; } }

.giveaway-layout { grid-template-columns:minmax(270px,40%) minmax(0,1fr); }
.giveaway-list,.giveaway-detail,.giveaway-stats>div,.giveaway-config>div { min-width:0; }
.giveaway-config b { overflow-wrap:anywhere; }
.giveaway-stats { grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:900px) { .giveaway-layout { display:block; }.giveaway-stats { grid-template-columns:1fr 1fr; } }

.dashboard-view { min-height:0; flex:1; overflow:auto; padding:var(--space-6); background:var(--bg); }
.dashboard-view button { cursor:pointer; }
.dashboard-intro { max-width:1400px; margin:0 auto var(--space-4); display:flex; justify-content:space-between; gap:var(--space-6); align-items:center; }
.dashboard-intro h2 { margin:var(--space-1) 0 var(--space-1); font-size:var(--text-xl); }.dashboard-intro p { max-width:720px; margin:0; color:var(--muted); font-size:var(--text-xs); line-height:var(--leading-normal); }
.dashboard-live { min-width:150px; display:grid; grid-template-columns:10px 1fr; gap:var(--space-1) var(--space-2); align-items:center; padding:var(--space-3) var(--space-3); border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface); }
.dashboard-live>span { grid-row:1/span 2; width:9px; height:9px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); }.dashboard-live b { font-size:var(--text-xs); }.dashboard-live small { color:var(--muted); font-size:var(--text-xs); }
body[data-live="reconnecting"] .dashboard-live>span { background:var(--amber); box-shadow:0 0 0 4px #ef9a2d22; }
.dashboard-filters { max-width:1400px; margin:0 auto var(--space-4); display:flex; flex-wrap:wrap; gap:var(--space-2); align-items:end; padding:var(--space-3); border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface); box-shadow:var(--shadow); }
.dashboard-filters label { min-width:140px; display:grid; gap:var(--space-1); color:var(--muted); font-size:var(--text-xs); font-weight:700; text-transform:uppercase; letter-spacing:.04em; }.dashboard-filters select { max-width:230px; padding:var(--space-2) var(--space-8) var(--space-2) var(--space-2); font-size:var(--text-xs); text-transform:none; letter-spacing:0; }
.dashboard-reset { margin-left:auto; border:1px solid var(--border); border-radius:var(--radius-md); padding:var(--space-2) var(--space-2); background:var(--surface-2); color:var(--muted); font-size:var(--text-xs); }
.dashboard-section { max-width:1400px; margin:0 auto var(--space-6); }.dashboard-section-head { display:flex; justify-content:space-between; gap:var(--space-4); align-items:end; margin-bottom:var(--space-3); }.dashboard-section-head h2 { margin:var(--space-1) 0 0; font-size:var(--text-lg); }.dashboard-section-head>span { color:var(--muted); font-size:var(--text-xs); }
.dashboard-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space-3); }.dashboard-metrics.marketing-metrics { grid-template-columns:repeat(5,minmax(0,1fr)); }
.dashboard-metric { min-width:0; display:grid; grid-template-columns:38px minmax(0,1fr) auto; gap:var(--space-2); align-items:center; padding:var(--space-3); border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface); box-shadow:var(--shadow); text-align:left; }.dashboard-metric:hover { border-color:color-mix(in srgb,var(--accent) 60%,var(--border)); }.dashboard-metric.attention { border-color:#ef9a2d66; background:color-mix(in srgb,var(--surface) 92%,#ef9a2d); }
.metric-icon { width:36px; height:36px; display:grid; place-items:center; border-radius:var(--radius-md); background:var(--accent-soft); color:var(--accent); font-weight:800; }.attention .metric-icon { background:#ef9a2d22; color:var(--amber); }
.dashboard-metric small,.dashboard-metric strong,.dashboard-metric em { display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.dashboard-metric small { color:var(--muted); font-size:var(--text-xs); }.dashboard-metric strong { margin:var(--space-1) 0; font-size:var(--text-xl); }.dashboard-metric em { color:var(--muted); font-size:var(--text-xs); font-style:normal; }.dashboard-metric>i { color:var(--muted); font-size:var(--text-lg); font-style:normal; }
.dashboard-columns { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3); margin-top:var(--space-3); }.dashboard-panel { min-width:0; overflow:hidden; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface); box-shadow:var(--shadow); }
.panel-head { min-height:45px; display:flex; justify-content:space-between; gap:var(--space-3); align-items:center; padding:var(--space-2) var(--space-3); border-bottom:1px solid var(--border); }.panel-head h3 { margin:0; font-size:var(--text-xs); }.panel-head button { padding:var(--space-1) var(--space-2); border:0; background:transparent; color:var(--accent); font-size:var(--text-xs); font-weight:700; }
.dashboard-list>button { width:100%; display:grid; grid-template-columns:38px minmax(0,1fr) auto; gap:var(--space-2); align-items:center; padding:var(--space-2) var(--space-3); border:0; border-bottom:1px solid var(--border); background:transparent; text-align:left; }.dashboard-list>button:last-child { border-bottom:0; }.dashboard-list>button:hover,.qr-ranking>button:hover { background:var(--surface-2); }
.dashboard-list b,.dashboard-list small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.dashboard-list b { font-size:var(--text-xs); }.dashboard-list small { margin-top:var(--space-1); color:var(--muted); font-size:var(--text-xs); }.dashboard-avatar,.dashboard-date { width:34px; height:34px; display:grid; place-items:center; border-radius:var(--radius-md); background:var(--accent-soft); color:var(--accent); font-size:var(--text-xs); font-weight:750; }
.dashboard-empty,.dashboard-loading { padding:var(--space-6); color:var(--muted); text-align:center; font-size:var(--text-xs); }.dashboard-loading { min-height:calc(100vh - var(--header-h)); display:grid; place-items:center; }
.qr-ranking>button { width:100%; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--space-1) var(--space-3); padding:var(--space-2) var(--space-3); border:0; border-bottom:1px solid var(--border); background:transparent; text-align:left; }.qr-ranking>button:last-child { border-bottom:0; }.qr-ranking b,.qr-ranking small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.qr-ranking b { font-size:var(--text-xs); }.qr-ranking small { margin-top:var(--space-1); color:var(--muted); font-size:var(--text-xs); }.qr-ranking em { color:var(--accent); font-size:var(--text-xs); font-style:normal; font-weight:800; }.qr-ranking i { grid-column:1/-1; height:4px; overflow:hidden; border-radius:var(--radius-sm); background:var(--surface-2); }.qr-ranking i span { display:block; height:100%; border-radius:var(--radius-sm); background:var(--accent); }
@media (max-width:1200px) { .dashboard-metrics,.dashboard-metrics.marketing-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:760px) {
  .dashboard-view { padding:var(--space-3) var(--space-2) var(--space-6); }.dashboard-intro { align-items:start; }.dashboard-intro h2 { font-size:var(--text-xl); }.dashboard-intro p { font-size:var(--text-xs); }.dashboard-live { min-width:auto; padding:var(--space-2); }.dashboard-live b { display:none; }.dashboard-live small { grid-column:2; }
  .dashboard-filters { display:grid; grid-template-columns:1fr 1fr; }.dashboard-filters label,.dashboard-filters select { width:100%; max-width:none; min-width:0; }.dashboard-reset { width:100%; margin:0; grid-column:1/-1; }
  .dashboard-section-head { align-items:start; }.dashboard-section-head>span { text-align:right; }.dashboard-metrics,.dashboard-metrics.marketing-metrics { grid-template-columns:1fr 1fr; }.dashboard-metric { grid-template-columns:34px minmax(0,1fr); padding:var(--space-3); }.dashboard-metric>i { display:none; }.metric-icon { width:32px; height:32px; }.dashboard-metric strong { font-size:var(--text-lg); }.dashboard-columns { grid-template-columns:1fr; }
}
@media (max-width:430px) { .dashboard-metrics,.dashboard-metrics.marketing-metrics { grid-template-columns:1fr; }.dashboard-intro p { display:none; }.dashboard-live small { font-size:var(--text-xs); } }

.reports-view { min-height:0; flex:1; overflow:auto; padding:var(--space-6); background:var(--bg); }
.reports-head { max-width:1400px; margin:0 auto var(--space-4); display:flex; justify-content:space-between; gap:var(--space-6); align-items:end; }.reports-head h2 { margin:var(--space-1) 0; font-size:var(--text-xl); }.reports-head p { max-width:720px; margin:0; color:var(--muted); font-size:var(--text-xs); line-height:var(--leading-normal); }
.report-downloads { display:flex; flex-wrap:wrap; gap:var(--space-2); }.report-downloads a { border:1px solid var(--border); border-radius:var(--radius-md); padding:var(--space-2) var(--space-3); background:var(--surface); color:var(--text); text-decoration:none; font-size:var(--text-xs); font-weight:700; }.report-downloads a.primary { border-color:var(--accent); background:var(--accent); color:var(--on-accent); }
.report-filters { max-width:1400px; margin:0 auto var(--space-3); display:flex; flex-wrap:wrap; gap:var(--space-2); align-items:end; padding:var(--space-3); border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface); box-shadow:var(--shadow); }.report-filters label { min-width:140px; display:grid; gap:var(--space-1); color:var(--muted); font-size:var(--text-xs); font-weight:700; text-transform:uppercase; letter-spacing:.04em; }.report-filters select { max-width:230px; padding:var(--space-2) var(--space-8) var(--space-2) var(--space-2); font-size:var(--text-xs); text-transform:none; letter-spacing:0; }.report-reset { margin-left:auto; border:1px solid var(--border); border-radius:var(--radius-md); padding:var(--space-2) var(--space-2); background:var(--surface-2); color:var(--muted); font-size:var(--text-xs); cursor:pointer; }
.report-meta { max-width:1400px; margin:0 auto var(--space-3); display:flex; flex-wrap:wrap; gap:var(--space-2); }.report-meta span { padding:var(--space-1) var(--space-2); border-radius:var(--radius-pill); background:var(--accent-soft); color:var(--muted); font-size:var(--text-xs); }.report-meta b { color:var(--accent); }
.report-grid { max-width:1400px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3); }.report-card { min-width:0; overflow:hidden; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface); box-shadow:var(--shadow); }.report-card-head { display:flex; gap:var(--space-2); align-items:center; padding:var(--space-3); border-bottom:1px solid var(--border); }.report-card-head .metric-icon { flex:0 0 auto; }.report-card-head h3 { margin:var(--space-1) 0 0; font-size:var(--text-sm); }
.report-table>div { min-height:43px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--space-3); align-items:center; padding:var(--space-2) var(--space-3); border-bottom:1px solid var(--border); }.report-table>div:last-child { border-bottom:0; }.report-table b,.report-table small { display:block; }.report-table b { font-size:var(--text-xs); }.report-table small { margin-top:var(--space-1); color:var(--muted); font-size:var(--text-xs); }.report-table strong { color:var(--accent); font-size:var(--text-md); }
.report-table .report-giveaway-row { grid-template-columns:minmax(150px,1fr) repeat(3,minmax(62px,auto)); }.report-giveaway-row>span:not(:first-child) { text-align:right; }.report-giveaway-row>span:not(:first-child) b { color:var(--accent); font-size:var(--text-sm); }
.report-protection { max-width:1400px; margin:var(--space-3) auto 0; padding:var(--space-3); border:1px solid var(--accent); border-radius:var(--radius-lg); background:var(--accent-soft); }.report-protection b { font-size:var(--text-xs); }.report-protection p { margin:var(--space-1) 0 0; color:var(--muted); font-size:var(--text-xs); line-height:var(--leading-normal); }.report-restricted { max-width:580px; margin:auto; padding:var(--space-8); border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface); text-align:center; }.report-restricted p { color:var(--muted); }
@media (max-width:900px) { .report-grid { grid-template-columns:1fr; } }
@media (max-width:760px) {
  .reports-view { padding:var(--space-3) var(--space-2) var(--space-6); }.reports-head { display:grid; gap:var(--space-3); align-items:start; }.reports-head h2 { font-size:var(--text-xl); }.report-downloads { display:grid; grid-template-columns:1fr 1fr; }.report-downloads a { text-align:center; }
  .report-filters { display:grid; grid-template-columns:1fr 1fr; }.report-filters label,.report-filters select { width:100%; max-width:none; min-width:0; }.report-reset { width:100%; margin:0; grid-column:1/-1; }.report-meta { display:grid; grid-template-columns:1fr 1fr; }.report-meta span:last-child { grid-column:1/-1; }
  .report-table .report-giveaway-row { grid-template-columns:1fr 1fr 1fr; }.report-giveaway-row>span:first-child { grid-column:1/-1; }.report-giveaway-row>span:not(:first-child) { text-align:left; }
}
@media (max-width:430px) { .report-downloads { grid-template-columns:1fr; }.report-meta { grid-template-columns:1fr; }.report-meta span:last-child { grid-column:auto; } }

.auth-shell { min-height:100vh; display:grid; place-items:center; padding:var(--space-6); background:radial-gradient(circle at 20% 10%,var(--accent-soft),transparent 34%),var(--bg); }
.auth-card { width:min(440px,100%); padding:var(--space-8); border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface); box-shadow:0 28px 90px #08271c20; }
.auth-brand { display:flex; gap:var(--space-2); align-items:center; margin-bottom:var(--space-8); font-weight:800; }.auth-card h1 { margin:var(--space-2) 0 var(--space-2); font-size:var(--text-2xl); }.auth-card p { color:var(--muted); line-height:var(--leading-normal); }.auth-card>small { display:block; margin-top:var(--space-6); color:var(--muted); font-size:var(--text-xs); text-align:center; }
.auth-form { display:grid; gap:var(--space-3); margin-top:var(--space-6); }.auth-form label { display:grid; gap:var(--space-1); color:var(--muted); font-size:var(--text-xs); font-weight:650; }.auth-form input { width:100%; padding:var(--space-2) var(--space-3); font-size:var(--text-sm); }.primary-wide { border:0; border-radius:var(--radius-md); padding:var(--space-3) var(--space-3); background:var(--accent); color:var(--on-accent); font-weight:750; cursor:pointer; }
.local-credentials { margin-top:var(--space-4); padding:var(--space-3); border-radius:var(--radius-lg); background:var(--surface-2); }.local-credentials b { font-size:var(--text-xs); }.local-credentials p { margin:var(--space-1) 0 var(--space-2); font-size:var(--text-xs); }.local-credentials code,.local-code-box code { color:var(--accent); font-weight:800; }.local-credentials>div { display:flex; flex-wrap:wrap; gap:var(--space-1); }.local-credentials button,.text-button { border:1px solid var(--border); border-radius:var(--radius-md); padding:var(--space-2) var(--space-2); background:var(--surface); color:var(--text); cursor:pointer; font-size:var(--text-xs); }
.local-code-box { margin-top:var(--space-3); padding:var(--space-3); border:1px solid var(--accent); border-radius:var(--radius-lg); background:var(--accent-soft); }.local-code-box p { margin:0 0 var(--space-2); font-size:var(--text-xs); }.local-code-box button { width:100%; border:0; border-radius:var(--radius-md); padding:var(--space-2); background:var(--accent); color:var(--on-accent); cursor:pointer; }.auth-error { min-height:19px; margin:var(--space-3) 0 0 !important; color:var(--danger) !important; font-size:var(--text-xs); }.text-button { margin-bottom:var(--space-4); }
.setup-preview-link { width:100%; padding:var(--space-1) 0; margin-top:var(--space-3); border:0; background:transparent; color:var(--accent); text-decoration:underline; cursor:pointer; font-size:var(--text-xs); }

.setup-shell { min-height:100vh; padding:var(--space-6); background:radial-gradient(circle at 87% 8%,var(--accent-soft),transparent 32%),var(--bg); }
.setup-layout { width:min(1180px,100%); min-height:calc(100vh - 48px); margin:auto; display:grid; grid-template-columns:340px minmax(0,1fr); overflow:hidden; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface); box-shadow:0 30px 100px #08271c24; }
.setup-aside { padding:var(--space-8); background:var(--nav-bg); color:var(--nav-text); }.setup-aside .auth-brand { margin-bottom:var(--space-8); }.setup-aside .eyebrow { color:var(--nav-accent); }.setup-aside h1 { margin:var(--space-2) 0 var(--space-3); font-size:var(--text-2xl); line-height:var(--leading-tight); }.setup-aside>p { margin:0; color:var(--nav-muted); font-size:var(--text-xs); line-height:var(--leading-normal); }
.setup-steps { display:grid; gap:var(--space-1); margin:var(--space-8) 0 0; padding:0; list-style:none; }.setup-steps li { display:grid; grid-template-columns:35px 1fr; gap:var(--space-3); align-items:center; padding:var(--space-3); border-radius:var(--radius-lg); color:var(--nav-dim); }.setup-steps li.active { background:#ffffff12; color:white; }.setup-steps li>span { width:33px; height:33px; display:grid; place-items:center; border:1px solid #ffffff2a; border-radius:50%; font-size:var(--text-xs); font-weight:800; }.setup-steps li.active>span { border-color:var(--nav-mark-bg); background:var(--nav-mark-bg); color:var(--nav-mark-text); }.setup-steps b,.setup-steps small { display:block; }.setup-steps b { font-size:var(--text-xs); }.setup-steps small { margin-top:var(--space-1); font-size:var(--text-xs); color:inherit; }
.setup-steps li.done { color:var(--nav-muted); }.setup-steps li.done>span { border-color:var(--nav-accent); color:var(--nav-accent); }.setup-steps li.done>span::after { content:'✓'; }.setup-steps li.done>span { font-size:0; }.setup-steps li.done>span::after { font-size:var(--text-xs); }
.setup-demo-note { margin-top:var(--space-8); padding:var(--space-3); border:1px solid #ffffff22; border-radius:var(--radius-lg); background:#ffffff0b; }.setup-demo-note b { font-size:var(--text-xs); color:var(--nav-accent); }.setup-demo-note p { margin:var(--space-1) 0 0; color:var(--nav-muted); font-size:var(--text-xs); line-height:var(--leading-normal); }
.setup-main { min-height:0; height:auto; display:grid; align-content:center; padding:var(--space-8); background:var(--surface); }.setup-card { width:min(720px,100%); margin:auto; }.setup-card-head { display:flex; gap:var(--space-4); justify-content:space-between; align-items:start; padding-bottom:var(--space-6); border-bottom:1px solid var(--border); }.setup-card-head h2 { margin:var(--space-1) 0 var(--space-2); font-size:var(--text-xl); }.setup-card-head p { max-width:560px; margin:0; color:var(--muted); font-size:var(--text-xs); line-height:var(--leading-normal); }.setup-required { flex:0 0 auto; padding:var(--space-1) var(--space-2); border-radius:var(--radius-pill); background:var(--accent-soft); color:var(--accent); font-size:var(--text-xs); font-weight:750; }
.setup-form { padding-top:var(--space-6); }.setup-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3); }.setup-form label { display:grid; gap:var(--space-1); min-width:0; color:var(--muted); font-size:var(--text-xs); font-weight:650; }.setup-form label.wide { grid-column:1/-1; }.setup-form label em { justify-self:end; margin-top:-18px; font-size:var(--text-xs); font-weight:500; font-style:normal; }.setup-form input,.setup-form select { width:100%; min-width:0; padding:var(--space-2) var(--space-3); font-size:var(--text-xs); }.setup-form label small { color:var(--muted); font-size:var(--text-xs); font-weight:500; }.setup-form code { color:var(--accent); }
.password-rules { display:flex; justify-content:space-between; gap:var(--space-3); margin-top:var(--space-3); padding:var(--space-2) var(--space-3); border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface-2); font-size:var(--text-xs); }.password-rules span { color:var(--muted); text-align:right; }
.setup-assurance { display:flex; gap:var(--space-2); align-items:center; margin-top:var(--space-4); padding:var(--space-3); border-radius:var(--radius-md); background:var(--surface-2); }.setup-assurance>span { width:28px; height:28px; display:grid; place-items:center; border-radius:50%; background:var(--accent-soft); color:var(--accent); font-weight:850; }.setup-assurance p,.setup-assurance b,.setup-assurance small { display:block; margin:0; }.setup-assurance b { font-size:var(--text-xs); }.setup-assurance small { margin-top:var(--space-1); color:var(--muted); font-size:var(--text-xs); }
.setup-actions { display:flex; justify-content:flex-end; gap:var(--space-2); margin-top:var(--space-1); }.setup-actions button { min-width:210px; }.setup-actions .secondary-button { min-width:auto; }.setup-submit-busy { opacity:.7; cursor:wait !important; }
.setup-success { display:grid; grid-template-columns:44px 1fr; gap:var(--space-3); margin-top:var(--space-6); padding:var(--space-4); border:1px solid var(--accent); border-radius:var(--radius-lg); background:var(--accent-soft); }.setup-success>span { width:42px; height:42px; display:grid; place-items:center; border-radius:50%; background:var(--accent); color:var(--on-accent); font-size:var(--text-lg); }.setup-success h3 { margin:var(--space-1) 0 var(--space-1); font-size:var(--text-sm); }.setup-success p { margin:0; color:var(--muted); font-size:var(--text-xs); line-height:var(--leading-normal); }.setup-success div>div { display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-3); }.setup-success a,.setup-success button { border:0; border-radius:var(--radius-md); padding:var(--space-2) var(--space-2); background:var(--accent); color:var(--on-accent); text-decoration:none; cursor:pointer; font-size:var(--text-xs); font-weight:700; }.setup-success button { border:1px solid var(--border); background:var(--surface); color:var(--text); }
.setup-code-intro { display:grid; grid-template-columns:42px 1fr; gap:var(--space-3); align-items:center; margin-top:var(--space-6); padding:var(--space-4); border-radius:var(--radius-lg); background:var(--surface-2); }.setup-code-intro>span { width:40px; height:40px; display:grid; place-items:center; border-radius:50%; background:var(--accent-soft); color:var(--accent); }.setup-code-intro h3 { margin:0 0 var(--space-1); font-size:var(--text-sm); }.setup-code-intro p { margin:0; color:var(--muted); font-size:var(--text-xs); line-height:var(--leading-normal); }.setup-form.compact { max-width:460px; margin:auto; }.setup-code-label input { height:auto; text-align:center; font-size:var(--text-xl); font-weight:800; letter-spacing:8px; }.setup-stage-success { margin-top:var(--space-6); }.setup-next-stage { margin-top:var(--space-3); padding:var(--space-4); border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface-2); }.setup-next-stage h3 { margin:var(--space-1) 0; font-size:var(--text-lg); }.setup-next-stage p { margin:0; color:var(--muted); font-size:var(--text-xs); line-height:var(--leading-normal); }.setup-next-stage button { margin-top:var(--space-3); }
.factor-options { display:grid; gap:var(--space-2); margin-top:var(--space-4); }.factor-option { position:relative; width:100%; display:grid; grid-template-columns:38px 1fr auto; gap:var(--space-3); align-items:center; margin:0 !important; padding:var(--space-3); border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface); color:var(--text); text-align:left; cursor:pointer; }.factor-option:hover,.factor-option:focus-visible { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }.factor-option.recommended { border-color:var(--accent); }.factor-option .factor-icon { width:36px; height:36px; display:grid; place-items:center; border-radius:var(--radius-md); background:var(--accent-soft); color:var(--accent); font-size:var(--text-lg); }.factor-option b,.factor-option small { display:block; }.factor-option b { font-size:var(--text-xs); }.factor-option small { margin-top:var(--space-1); color:var(--muted); font-size:var(--text-xs); line-height:var(--leading-normal); }.factor-option em { padding:var(--space-1) var(--space-2); border-radius:var(--radius-pill); background:var(--accent); color:var(--on-accent); font-size:var(--text-xs); font-style:normal; font-weight:750; }.setup-choice-actions { display:flex; gap:var(--space-2); flex-wrap:wrap; }.setup-factor-stage { margin-top:var(--space-4); padding:var(--space-6); border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface-2); }.setup-factor-stage h3 { margin:var(--space-1) 0; font-size:var(--text-lg); }.setup-factor-stage>p { margin:0 0 var(--space-3); color:var(--muted); font-size:var(--text-xs); line-height:var(--leading-normal); }.authenticator-enrollment { display:grid; grid-template-columns:180px 1fr; gap:var(--space-4); align-items:center; margin:var(--space-4) 0; padding:var(--space-4); border-radius:var(--radius-lg); background:var(--surface); }.authenticator-enrollment img { width:180px; border-radius:var(--radius-md); background:white; }.authenticator-enrollment small,.authenticator-enrollment code,.authenticator-enrollment p { display:block; }.authenticator-enrollment small { font-size:var(--text-xs); }.authenticator-enrollment code { margin:var(--space-2) 0; padding:var(--space-2); border:1px dashed var(--border); border-radius:var(--radius-md); color:var(--accent); font-size:var(--text-xs); overflow-wrap:anywhere; }.authenticator-enrollment p { margin:0; color:var(--muted); font-size:var(--text-xs); line-height:var(--leading-normal); }.passkey-wait { display:flex; gap:var(--space-3); align-items:center; margin:var(--space-4) 0; padding:var(--space-4); border-radius:var(--radius-lg); background:var(--surface); }.passkey-wait span { width:38px; height:38px; display:grid; place-items:center; border-radius:50%; background:var(--accent-soft); color:var(--accent); }.passkey-wait b { font-size:var(--text-xs); }.setup-final-success { margin-top:var(--space-4); padding:var(--space-8); border:1px solid var(--accent); border-radius:var(--radius-lg); background:var(--accent-soft); text-align:center; }.setup-final-success>span { width:52px; height:52px; display:grid; place-items:center; margin:auto; border-radius:50%; background:var(--accent); color:var(--on-accent); font-size:var(--text-xl); }.setup-final-success h3 { margin:var(--space-3) 0 var(--space-1); font-size:var(--text-lg); }.setup-final-success p { margin:0 auto var(--space-4); max-width:460px; color:var(--muted); font-size:var(--text-xs); line-height:var(--leading-normal); }.setup-final-success button { max-width:300px; }.invite-message { padding:var(--space-8) var(--space-4); text-align:center; }.invite-message>span { width:54px; height:54px; display:grid; place-items:center; margin:auto; border-radius:50%; background:var(--accent-soft); color:var(--accent); font-size:var(--text-xl); font-weight:800; }.invite-message h2 { margin:var(--space-4) 0 var(--space-2); }.invite-message p { color:var(--muted); font-size:var(--text-xs); }.invite-link-button { display:inline-block; width:auto; min-width:220px; text-decoration:none; }.invite-factor-stage { margin-top:var(--space-4); }.invite-shell .setup-form>.primary-wide { margin-top:var(--space-1); }
.setup-footnote { max-width:720px; margin:var(--space-4) auto 0; color:var(--muted); font-size:var(--text-xs); text-align:center; line-height:var(--leading-normal); }

@media (max-width:900px) { .setup-shell { padding:var(--space-3); }.setup-layout { min-height:calc(100vh - 24px); grid-template-columns:260px minmax(0,1fr); }.setup-aside { padding:var(--space-6) var(--space-6); }.setup-aside .auth-brand { margin-bottom:var(--space-8); }.setup-main { padding:var(--space-6); } }
@media (max-width:700px) { .setup-shell { padding:0; }.setup-layout { min-height:100vh; display:block; border:0; border-radius:0; }.setup-aside { padding:var(--space-4) var(--space-4) var(--space-4); }.setup-aside .auth-brand { margin-bottom:var(--space-6); }.setup-aside h1 { font-size:var(--text-xl); }.setup-aside>p { font-size:var(--text-xs); }.setup-steps { grid-template-columns:repeat(3,1fr); gap:var(--space-2); margin-top:var(--space-4); }.setup-steps li { display:block; padding:var(--space-2); }.setup-steps li>span { width:27px; height:27px; margin-bottom:var(--space-1); }.setup-steps small { display:none; }.setup-demo-note { margin-top:var(--space-3); }.setup-main { padding:var(--space-6) var(--space-4) var(--space-8); }.setup-card-head { display:grid; }.setup-required { justify-self:start; }.setup-form-grid { grid-template-columns:1fr; }.setup-form label.wide { grid-column:auto; }.setup-actions { display:grid; }.setup-actions button { width:100%; min-width:0; }.setup-success { grid-template-columns:35px 1fr; }.setup-success>span { width:34px; height:34px; }.password-rules { display:grid; }.password-rules span { text-align:left; }.setup-code-intro { grid-template-columns:35px 1fr; }.setup-code-intro>span { width:34px; height:34px; }.factor-option { grid-template-columns:34px 1fr; }.factor-option em { grid-column:2; justify-self:start; }.authenticator-enrollment { grid-template-columns:1fr; text-align:center; }.authenticator-enrollment img { width:min(220px,100%); margin:auto; } }
.user-menu-wrap { position:relative; }
.session-user { display:flex; align-items:center; gap:var(--space-2); min-height:42px; padding:var(--space-1) var(--space-2) var(--space-1) var(--space-1); border:1px solid transparent; border-radius:var(--radius-md); background:transparent; color:var(--text); text-align:left; cursor:pointer; }.session-user:hover,.session-user[aria-expanded="true"] { border-color:var(--border); background:var(--surface-2); }.session-user>span:first-child { width:34px; height:34px; display:grid; flex:none; place-items:center; border-radius:var(--radius-md); background:var(--accent-soft); color:var(--accent); font-size:var(--text-xs); font-weight:800; }.session-user b,.session-user small { display:block; max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.session-user b { font-size:var(--text-xs); }.session-user small { color:var(--muted); font-size:var(--text-xs); }.session-user i { color:var(--muted); font-size:var(--text-xs); font-style:normal; transition:transform var(--transition); }.session-user[aria-expanded="true"] i { transform:rotate(180deg); }
.user-menu { position:absolute; z-index:80; top:calc(100% + 8px); right:0; width:min(285px,calc(100vw - 24px)); overflow:hidden; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface); box-shadow:var(--shadow); }.user-menu-account { padding:var(--space-3) var(--space-3) var(--space-3); border-bottom:1px solid var(--border); background:var(--surface-2); }.user-menu-account b,.user-menu-account small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.user-menu-account b { font-size:var(--text-xs); }.user-menu-account small { margin-top:var(--space-1); color:var(--muted); font-size:var(--text-xs); }.user-menu>button { width:100%; display:grid; grid-template-columns:26px minmax(0,1fr); gap:var(--space-2); align-items:center; padding:var(--space-2) var(--space-3); border:0; background:transparent; color:var(--text); text-align:left; cursor:pointer; }.user-menu>button:hover { background:var(--surface-2); }.user-menu>button:focus-visible { background:var(--surface-2); outline:2px solid var(--focus); outline-offset:-2px; }.user-menu>button>span:first-child { color:var(--accent); font-size:var(--text-md); text-align:center; }.user-menu>button b,.user-menu>button small { display:block; }.user-menu>button b { font-size:var(--text-xs); }.user-menu>button small { margin-top:var(--space-1); color:var(--muted); font-size:var(--text-xs); }.user-menu-divider { height:1px; background:var(--border); }.user-menu .user-menu-logout>span:first-child,.user-menu .user-menu-logout b { color:var(--danger); }
.modal-backdrop { position:fixed; z-index:100; inset:0; display:grid; place-items:center; padding:var(--space-4); background:var(--backdrop); backdrop-filter:blur(3px); }.personal-security-dialog { width:min(720px,100%); max-height:min(760px,calc(100vh - 36px)); overflow:hidden; display:flex; flex-direction:column; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface); box-shadow:0 24px 70px #00000040; }.personal-security-dialog>header { display:flex; justify-content:space-between; gap:var(--space-4); align-items:start; padding:var(--space-4) var(--space-4) var(--space-4); border-bottom:1px solid var(--border); }.personal-security-dialog h2 { margin:var(--space-1) 0; font-size:var(--text-lg); }.personal-security-dialog header p { margin:0; color:var(--muted); font-size:var(--text-xs); }.personal-security-content { overflow:auto; padding:var(--space-4) var(--space-4) var(--space-6); background:var(--bg); }.personal-security-section { scroll-margin-top:18px; overflow:hidden; margin-bottom:var(--space-3); border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface); }.personal-security-section:last-child { margin-bottom:0; }.personal-security-section>header { padding:var(--space-3) var(--space-3); border-bottom:1px solid var(--border); }.personal-security-section h3 { margin:0; font-size:var(--text-xs); }.personal-security-section header p { margin:var(--space-1) 0 0; color:var(--muted); font-size:var(--text-xs); }.personal-factor,.personal-session { display:grid; grid-template-columns:36px minmax(0,1fr) auto; gap:var(--space-2); align-items:center; padding:var(--space-3) var(--space-3); border-bottom:1px solid var(--border); }.personal-factor:last-child,.personal-session:last-child { border-bottom:0; }.personal-factor>span:first-child,.personal-session>span:first-child { width:34px; height:34px; display:grid; place-items:center; border-radius:var(--radius-md); background:var(--accent-soft); color:var(--accent); font-size:var(--text-sm); }.personal-factor b,.personal-factor small,.personal-session b,.personal-session small { display:block; }.personal-factor b,.personal-session b { font-size:var(--text-xs); }.personal-factor small,.personal-session small { margin-top:var(--space-1); color:var(--muted); font-size:var(--text-xs); }.personal-factor em,.personal-session em { padding:var(--space-1) var(--space-2); border-radius:var(--radius-pill); background:var(--accent-soft); color:var(--accent); font-size:var(--text-xs); font-style:normal; }.personal-session button { border:1px solid var(--border); border-radius:var(--radius-md); padding:var(--space-1) var(--space-2); background:var(--surface); color:var(--danger); cursor:pointer; font-size:var(--text-xs); }.personal-security-note { padding:var(--space-2) var(--space-3); color:var(--muted); font-size:var(--text-xs); line-height:var(--leading-normal); }
.users-view { min-height:0; flex:1; overflow:auto; padding:var(--space-6); background:var(--bg); }.users-wrap { max-width:1400px; margin:auto; }.users-intro { display:flex; justify-content:space-between; gap:var(--space-4); align-items:end; margin-bottom:var(--space-4); }.users-intro h2 { margin:var(--space-1) 0; font-size:var(--text-xl); }.users-intro p { margin:0; color:var(--muted); font-size:var(--text-xs); }.users-layout { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr); gap:var(--space-3); }.security-card { overflow:hidden; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface); box-shadow:var(--shadow); }.security-card>header { padding:var(--space-3) var(--space-4); border-bottom:1px solid var(--border); }.security-card h3 { margin:0; font-size:var(--text-xs); }.security-card header p { margin:var(--space-1) 0 0; color:var(--muted); font-size:var(--text-xs); }
.new-user-form { display:grid; grid-template-columns:1fr 1fr 160px; gap:var(--space-2); border-bottom:1px solid var(--border); background:var(--surface-2); }.new-user-form label { display:grid; gap:var(--space-1); color:var(--muted); font-size:var(--text-xs); }.new-user-form input,.new-user-form select { width:100%; min-width:0; padding:var(--space-2); }.new-user-form button { grid-column:1/-1; }.user-row { display:grid; grid-template-columns:38px minmax(0,1fr) auto; gap:var(--space-2); align-items:center; padding:var(--space-3) var(--space-3); border-bottom:1px solid var(--border); }.user-row:last-child { border-bottom:0; }.user-avatar { width:36px; height:36px; display:grid; place-items:center; border-radius:var(--radius-md); background:var(--accent-soft); color:var(--accent); font-size:var(--text-xs); font-weight:800; }.user-row b,.user-row small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.user-row b { font-size:var(--text-xs); }.user-row small { margin-top:var(--space-1); color:var(--muted); font-size:var(--text-xs); }.user-actions { display:flex; gap:var(--space-1); flex-wrap:wrap; justify-content:flex-end; }.user-actions button { border:1px solid var(--border); border-radius:var(--radius-md); padding:var(--space-1) var(--space-2); background:var(--surface); cursor:pointer; font-size:var(--text-xs); }.user-actions .danger { color:var(--danger); }
.security-list { max-height:330px; overflow:auto; }.session-row,.security-event { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--space-2); padding:var(--space-2) var(--space-3); border-bottom:1px solid var(--border); }.session-row b,.session-row small,.security-event b,.security-event small { display:block; }.session-row b,.security-event b { font-size:var(--text-xs); }.session-row small,.security-event small { margin-top:var(--space-1); color:var(--muted); font-size:var(--text-xs); }.session-row button { border:1px solid var(--border); border-radius:var(--radius-md); padding:var(--space-1) var(--space-2); background:var(--surface); color:var(--danger); cursor:pointer; font-size:var(--text-xs); }.security-event em { color:var(--accent); font-size:var(--text-xs); font-style:normal; }.credential-result { margin:var(--space-2) var(--space-3); padding:var(--space-3); border:1px solid var(--amber); border-radius:var(--radius-md); background:#ef9a2d16; font-size:var(--text-xs); }.credential-result span,.credential-result a,.credential-result code { display:block; margin-top:var(--space-1); }.credential-result a { color:var(--accent); font-weight:750; }.credential-result code { overflow-wrap:anywhere; color:var(--text); font-weight:750; }
@media (max-width:900px) { .users-layout { grid-template-columns:1fr; } }
@media (max-width:760px) { .auth-shell { padding:var(--space-3); }.auth-card { padding:var(--space-6) var(--space-4); }.auth-card h1 { font-size:var(--text-xl); }.session-user>span:nth-child(2),.session-user i { display:none; }.session-user { min-height:38px; padding:var(--space-1); }.user-menu { right:-45px; }.users-view { padding:var(--space-3) var(--space-2) var(--space-6); }.users-intro { align-items:start; }.new-user-form { grid-template-columns:1fr; }.new-user-form button { grid-column:auto; }.user-row { grid-template-columns:34px minmax(0,1fr); }.user-actions { grid-column:2; flex-wrap:wrap; }.modal-backdrop { padding:0; place-items:end center; }.personal-security-dialog { width:100%; max-height:92vh; border-radius:var(--radius-lg) var(--radius-lg) 0 0; }.personal-security-dialog>header,.personal-security-content { padding-left:var(--space-3); padding-right:var(--space-3); }.personal-factor,.personal-session { grid-template-columns:34px minmax(0,1fr); }.personal-factor em,.personal-session button,.personal-session em { grid-column:2; justify-self:start; } }
.personal-factor button { border:1px solid var(--border); border-radius:var(--radius-md); padding:var(--space-1) var(--space-2); background:var(--surface); color:var(--danger); cursor:pointer; font-size:var(--text-xs); }.personal-factor-actions { display:flex; gap:var(--space-2); flex-wrap:wrap; padding:var(--space-3) var(--space-3); border-bottom:1px solid var(--border); background:var(--surface-2); }.personal-factor-actions button { border:1px solid var(--border); border-radius:var(--radius-md); padding:var(--space-2) var(--space-2); background:var(--surface); color:var(--accent); cursor:pointer; font-size:var(--text-xs); font-weight:700; }.personal-factor-actions button:hover { border-color:var(--accent); }.personal-security-form { display:grid; gap:var(--space-3); padding:var(--space-4); }.personal-security-form label { display:grid; gap:var(--space-1); color:var(--muted); font-size:var(--text-xs); }.personal-security-form input { width:100%; padding:var(--space-2); }.personal-security-form>div:last-child { display:flex; justify-content:flex-end; gap:var(--space-2); }.personal-security-form button { width:auto; min-width:130px; }.personal-authenticator { display:grid; grid-template-columns:150px minmax(0,1fr); gap:var(--space-4); align-items:center; padding:var(--space-4); border-bottom:1px solid var(--border); }.personal-authenticator img { width:150px; border-radius:var(--radius-md); background:#fff; }.personal-authenticator b,.personal-authenticator code { display:block; }.personal-authenticator b { font-size:var(--text-xs); }.personal-authenticator code { margin-top:var(--space-2); overflow-wrap:anywhere; color:var(--accent); font-size:var(--text-xs); font-weight:800; letter-spacing:.08em; }
@media (max-width:760px) { .personal-factor button { grid-column:2; justify-self:start; }.personal-authenticator { grid-template-columns:1fr; text-align:center; }.personal-authenticator img { margin:auto; }.personal-security-form>div:last-child { display:grid; }.personal-security-form button { width:100%; }.personal-factor-actions { display:grid; }.personal-factor-actions button { width:100%; text-align:left; } }

/* Backup-Codes: einmalige Anzeige, Notfallanmeldung und Wiederherstellung */
.backup-codes { margin:var(--space-3) 0; padding:var(--space-3); border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface-2); text-align:left; }
.backup-codes header h3 { margin:0 0 var(--space-1); font-size:var(--text-sm); }
.backup-codes header p { margin:0 0 var(--space-3); color:var(--muted); font-size:var(--text-xs); line-height:var(--leading-normal); }
.backup-code-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-2); margin:0 0 var(--space-3); padding:0 0 0 var(--space-4); }
.backup-code-list li { color:var(--muted); font-size:var(--text-xs); }
.backup-code-list code { display:block; padding:var(--space-2) var(--space-2); border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface); color:var(--text); font-size:var(--text-sm); font-weight:700; letter-spacing:1.4px; text-align:center; user-select:all; }
.backup-code-actions { display:flex; flex-wrap:wrap; gap:var(--space-2); margin-bottom:var(--space-2); }
.backup-code-actions button { flex:1 1 150px; border:1px solid var(--border); border-radius:var(--radius-md); padding:var(--space-2) var(--space-3); background:var(--surface); color:var(--text); font-weight:650; font-size:var(--text-xs); cursor:pointer; }
.backup-code-actions button:hover { border-color:var(--accent); color:var(--accent); }
.backup-warning { margin:0; padding:var(--space-2) var(--space-3); border-radius:var(--radius-md); background:var(--accent-soft); color:var(--text); font-size:var(--text-xs); line-height:var(--leading-normal); }
.personal-security-note.warn { border-left:3px solid var(--amber); padding-left:var(--space-2); color:var(--amber); }
#personal-backup-codes .personal-factor-actions { border-bottom:0; }
.backup-hint { margin:var(--space-1) 0 0; color:var(--muted); font-size:var(--text-xs); line-height:var(--leading-normal); }
#backup-form input { text-transform:uppercase; letter-spacing:2px; font-weight:650; }
#auth-backup-link { display:block; width:100%; margin-top:var(--space-3); }
#auth-recovery-step .primary-wide { margin-top:var(--space-4); }
#auth-recovery-step #auth-recovery-logout { display:block; width:100%; margin-top:var(--space-2); }
@media (max-width:760px) { .backup-code-list { grid-template-columns:1fr; } .backup-code-actions button { flex:1 1 100%; } }

.contacts-view { min-height:0; flex:1; overflow:auto; padding:var(--space-4) var(--space-4) var(--space-8); background:var(--bg); }
.directory-toolbar { display:flex; justify-content:space-between; gap:var(--space-4); align-items:start; margin-bottom:var(--space-3); }
.directory-toolbar h2 { margin:0; font-size:var(--text-lg); }.directory-toolbar p { margin:var(--space-1) 0 0; max-width:70ch; color:var(--muted); font-size:var(--text-xs); }
body[data-live="connected"] .directory-toolbar h2::after { content:'● Live'; margin-left:var(--space-2); color:var(--accent); font-size:var(--text-xs); font-weight:700; }
body[data-live="reconnecting"] .directory-toolbar h2::after { content:'Verbindung wird wiederhergestellt …'; margin-left:var(--space-2); color:var(--amber); font-size:var(--text-xs); font-weight:500; }
.directory-count { flex:0 0 auto; border:1px solid var(--border); border-radius:var(--radius-pill); padding:var(--space-1) var(--space-3); background:var(--surface); color:var(--muted); font-size:var(--text-xs); font-weight:700; white-space:nowrap; }
.directory-filters { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:var(--space-2); padding:var(--space-3); border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface); box-shadow:var(--shadow); }
.directory-filters label { display:grid; gap:var(--space-1); min-width:0; color:var(--muted); font-size:var(--text-xs); }
.directory-filters input, .directory-filters select { width:100%; min-width:0; padding:var(--space-2); }
.directory-search { grid-column:span 2; }
.directory-active { display:flex; flex-wrap:wrap; gap:var(--space-2); align-items:center; margin:var(--space-3) 0; }
.directory-active .eyebrow { margin-right:var(--space-1); }
.directory-chip { display:inline-flex; gap:var(--space-2); align-items:center; border:1px solid var(--accent); border-radius:var(--radius-pill); padding:var(--space-1) var(--space-2); background:var(--accent-soft); color:var(--accent); font-size:var(--text-xs); font-weight:700; cursor:pointer; }
.directory-chip i { font-style:normal; font-size:var(--text-sm); line-height:var(--leading-none); }
.directory-reset { border:1px solid var(--border); border-radius:var(--radius-pill); padding:var(--space-1) var(--space-2); background:var(--surface); color:var(--muted); font-size:var(--text-xs); cursor:pointer; }
.directory-active-empty { margin:var(--space-3) 0; color:var(--muted); font-size:var(--text-xs); }
.directory-results { border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface); box-shadow:var(--shadow); overflow:hidden; }
.directory-head, .directory-row { display:grid; grid-template-columns:minmax(200px,2.1fr) minmax(120px,1fr) 92px 108px minmax(130px,1.2fr) minmax(120px,1fr); gap:var(--space-3); align-items:center; }
.directory-head { padding:var(--space-2) var(--space-3); border-bottom:1px solid var(--border); background:var(--surface-2); color:var(--muted); font-size:var(--text-xs); font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.directory-row { width:100%; padding:var(--space-3) var(--space-3); border:0; border-bottom:1px solid var(--border); background:transparent; text-align:left; cursor:pointer; }
.directory-row:last-child { border-bottom:0; }
.directory-row:hover, .directory-row:focus-visible { background:var(--surface-2); }
.directory-cell { display:flex; gap:var(--space-2); align-items:center; min-width:0; }
.directory-cell small { overflow:hidden; color:var(--muted); font-size:var(--text-xs); text-overflow:ellipsis; white-space:nowrap; }
.contact-cell { gap:var(--space-3); }
.directory-identity { display:grid; gap:var(--space-1); min-width:0; }
.directory-identity strong { overflow:hidden; font-size:var(--text-sm); text-overflow:ellipsis; white-space:nowrap; }
.directory-tags { display:flex; flex-wrap:wrap; gap:var(--space-1); margin-top:var(--space-1); }
.directory-tag { border-radius:var(--radius-pill); padding:var(--space-1) var(--space-2); background:var(--surface-2); color:var(--muted); font-size:var(--text-xs); font-style:normal; font-weight:700; }
.directory-note { max-width:90ch; margin:var(--space-3) 0 0; color:var(--muted); font-size:var(--text-xs); }
.contacts-view .empty-state { padding:var(--space-8) var(--space-4); }
@media (max-width:1100px) { .directory-head { display:none; }
  .directory-row { grid-template-columns:1fr 1fr; gap:var(--space-2); padding:var(--space-3); }
  .directory-row .contact-cell { grid-column:1 / -1; }
  .directory-cell[data-label]::before { content:attr(data-label) ': '; flex:0 0 auto; color:var(--muted); font-size:var(--text-xs); font-weight:800; letter-spacing:.04em; text-transform:uppercase; } }
@media (max-width:760px) { .contacts-view { padding:var(--space-3) var(--space-2) var(--space-6); }
  .directory-toolbar { display:grid; }.directory-count { justify-self:start; }
  .directory-filters { grid-template-columns:1fr; }.directory-search { grid-column:auto; }
  .directory-row { grid-template-columns:1fr; }
  .directory-reset { width:100%; } }

.privacy-view { min-height:0; flex:1; overflow:auto; padding:var(--space-4) var(--space-4) var(--space-8); background:var(--bg); }
.retention-head { display:flex; justify-content:space-between; gap:var(--space-4); align-items:start; margin-bottom:var(--space-3); }
.retention-head h2 { margin:var(--space-1) 0 0; font-size:var(--text-lg); }.retention-head p { margin:var(--space-1) 0 0; max-width:80ch; color:var(--muted); font-size:var(--text-xs); }
.retention-safety { display:grid; gap:var(--space-1); padding:var(--space-3) var(--space-4); border:1px solid var(--accent); border-radius:var(--radius-lg); background:var(--accent-soft); }
.retention-safety b { color:var(--accent); font-size:var(--text-sm); }.retention-safety p { margin:0; max-width:95ch; color:var(--text); font-size:var(--text-xs); }
.retention-totals, .retention-counts { display:flex; flex-wrap:wrap; gap:var(--space-2); }
.retention-totals { margin:var(--space-3) 0; }
.retention-pill { border:1px solid var(--border); border-radius:var(--radius-pill); padding:var(--space-1) var(--space-2); background:var(--surface); color:var(--muted); font-size:var(--text-xs); }
.retention-pill b { color:var(--text); font-size:var(--text-xs); }
.retention-pill.due { border-color:var(--danger); background:#9e3b341c; color:var(--danger); }.retention-pill.due b { color:var(--danger); }
.retention-pill.upcoming { border-color:var(--amber); background:#ef9a2d1c; color:var(--amber); }.retention-pill.upcoming b { color:var(--amber); }
.retention-pill.held { border-color:var(--accent); background:var(--accent-soft); color:var(--accent); }.retention-pill.held b { color:var(--accent); }
.retention-grid { display:grid; gap:var(--space-2); }
.retention-card { border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface); box-shadow:var(--shadow); overflow:hidden; }
.retention-card.DUE { border-color:var(--danger); }
.retention-card > summary { display:grid; grid-template-columns:14px minmax(0,1.7fr) minmax(0,1.1fr) auto; gap:var(--space-3); align-items:center; padding:var(--space-3) var(--space-4); cursor:pointer; }
.retention-card > summary::-webkit-details-marker { display:none; }
.retention-card > summary:hover { background:var(--surface-2); }
.retention-card[open] > summary { border-bottom:1px solid var(--border); }
.retention-light { width:11px; height:11px; border-radius:50%; background:var(--accent); }
.retention-light.DUE { background:var(--danger); }.retention-light.SOON { background:var(--amber); }.retention-light.NONE { background:#aab4b0; }
.retention-summary-main { min-width:0; }
.retention-summary-main b { display:block; font-size:var(--text-sm); }
.retention-summary-main small { display:block; overflow:hidden; margin-top:var(--space-1); color:var(--muted); font-size:var(--text-xs); text-overflow:ellipsis; white-space:nowrap; }
.retention-summary-pills { display:flex; flex-wrap:wrap; gap:var(--space-1); }
.retention-summary-flags { display:grid; gap:var(--space-1); justify-items:end; }
.retention-summary-flags em { border-radius:var(--radius-pill); padding:var(--space-1) var(--space-2); background:var(--surface-2); color:var(--muted); font-size:var(--text-xs); font-style:normal; font-weight:700; white-space:nowrap; }
.retention-summary-flags em.ok { background:var(--accent-soft); color:var(--accent); }
.retention-card-body { display:grid; gap:var(--space-3); padding:var(--space-3) var(--space-4) var(--space-4); }
.retention-tasks { margin:var(--space-3) 0; padding:var(--space-3) var(--space-4); border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface); box-shadow:var(--shadow); }
.retention-tasks h3 { margin:0 0 var(--space-2); font-size:var(--text-sm); }
.retention-task { display:grid; grid-template-columns:20px minmax(0,1fr) auto; gap:var(--space-2); align-items:center; width:100%; margin-bottom:var(--space-1); padding:var(--space-2) var(--space-3); border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface-2); color:var(--text); font-size:var(--text-xs); text-align:left; cursor:pointer; }
.retention-task:last-of-type { margin-bottom:0; }
.retention-task > span:first-child { width:19px; height:19px; display:grid; place-items:center; border-radius:50%; font-size:var(--text-xs); font-weight:800; }
.retention-task.due { border-color:var(--danger); }.retention-task.due > span:first-child { background:#9e3b341c; color:var(--danger); }
.retention-task.upcoming > span:first-child { background:#ef9a2d1c; color:var(--amber); }
.retention-task em { color:var(--accent); font-size:var(--text-xs); font-style:normal; font-weight:700; }
.retention-task:hover { border-color:var(--accent); }
.retention-task-none { display:flex; gap:var(--space-2); align-items:center; margin:0; color:var(--muted); font-size:var(--text-xs); }
.retention-task-none > span { flex:0 0 auto; width:20px; height:20px; display:grid; place-items:center; border-radius:50%; background:var(--accent-soft); color:var(--accent); font-weight:800; }
.retention-task-notes { margin:var(--space-2) 0 0; color:var(--muted); font-size:var(--text-xs); }
.retention-minimum { margin:0; padding:var(--space-2) var(--space-3); border:1px solid var(--amber); border-radius:var(--radius-md); background:#ef9a2d14; color:var(--text); font-size:var(--text-xs); }
.retention-inline-host { padding:var(--space-2) var(--space-3) var(--space-3); border-bottom:1px solid var(--border); background:var(--surface-2); }
.retention-inline-form { display:grid; gap:var(--space-2); }
.retention-section .retention-inline-form { margin-top:var(--space-3); padding:var(--space-3); border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface-2); }
.retention-inline-form label { display:grid; gap:var(--space-1); color:var(--muted); font-size:var(--text-xs); }
.retention-inline-form input, .retention-inline-form select { width:100%; min-width:0; padding:var(--space-2); }
.retention-inline-actions { display:flex; gap:var(--space-2); align-items:center; }
.retention-inline-actions .primary-wide { width:auto; padding:var(--space-2) var(--space-3); }
.retention-cancel { border:1px solid var(--border); border-radius:var(--radius-md); padding:var(--space-2) var(--space-3); background:var(--surface); color:var(--muted); font-size:var(--text-xs); cursor:pointer; }
.retention-form-row { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-2); }
.retention-advanced summary { color:var(--muted); font-size:var(--text-xs); font-weight:700; cursor:pointer; }
.retention-advanced > *:not(summary) { margin-top:var(--space-2); }
.retention-section-actions { margin-top:var(--space-3); }
.retention-hold-category { border:1px solid var(--border); border-radius:var(--radius-md); padding:var(--space-2) var(--space-3); background:var(--surface); color:var(--accent); font-size:var(--text-xs); font-weight:700; cursor:pointer; }
.retention-hold-category:hover { border-color:var(--accent); }
.retention-facts { display:grid; gap:var(--space-2); margin:0; }
.retention-facts dt { color:var(--muted); font-size:var(--text-xs); font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.retention-facts dd { margin:var(--space-1) 0 0; font-size:var(--text-xs); }
.retention-note, .retention-empty, .retention-truncated { margin:0; color:var(--muted); font-size:var(--text-xs); }
.retention-items { display:grid; border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; }
.retention-item { display:grid; grid-template-columns:minmax(0,1.5fr) 110px minmax(0,1fr) auto; gap:var(--space-2); align-items:center; padding:var(--space-2) var(--space-3); border-bottom:1px solid var(--border); background:var(--surface); }
.retention-item:last-child { border-bottom:0; }
.retention-item.DUE { background:#9e3b340f; }.retention-item.UPCOMING { background:#ef9a2d0f; }
.retention-item b, .retention-item small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.retention-item b { font-size:var(--text-xs); }.retention-item small { color:var(--muted); font-size:var(--text-xs); }
.retention-item small.retention-blocked { color:var(--accent); white-space:normal; }
.retention-item-status { border-radius:var(--radius-pill); padding:var(--space-1) var(--space-2); background:var(--surface-2); color:var(--muted); font-size:var(--text-xs); font-weight:700; text-align:center; }
.retention-item.DUE .retention-item-status { background:#9e3b341c; color:var(--danger); }
.retention-item.UPCOMING .retention-item-status { background:#ef9a2d1c; color:var(--amber); }
.retention-item.HELD .retention-item-status { background:var(--accent-soft); color:var(--accent); }
.retention-hold-item, .retention-release { border:1px solid var(--border); border-radius:var(--radius-md); padding:var(--space-1) var(--space-2); background:var(--surface); color:var(--text); font-size:var(--text-xs); cursor:pointer; }
.retention-hold-item:hover, .retention-release:hover { border-color:var(--accent); color:var(--accent); }
.retention-edit summary { color:var(--accent); font-size:var(--text-xs); font-weight:700; cursor:pointer; }
.retention-edit form { display:grid; gap:var(--space-2); margin-top:var(--space-2); padding:var(--space-3); border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface-2); }
.retention-edit label { display:grid; gap:var(--space-1); color:var(--muted); font-size:var(--text-xs); }
.retention-edit input, .retention-edit select, .retention-edit textarea { width:100%; min-width:0; padding:var(--space-2); }
.retention-check { display:flex !important; gap:var(--space-2); align-items:start; }.retention-check input { width:auto; margin:var(--space-1) 0; }
.retention-section { margin-top:var(--space-4); padding:var(--space-4); border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface); box-shadow:var(--shadow); }
.retention-section > header h3 { margin:0; font-size:var(--text-sm); }.retention-section > header p { margin:var(--space-1) 0 var(--space-3); max-width:90ch; color:var(--muted); font-size:var(--text-xs); }
.retention-hold, .retention-version-row { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto; gap:var(--space-3); align-items:center; padding:var(--space-2) 0; border-top:1px solid var(--border); }
.retention-version-row { grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); }
.retention-hold b, .retention-version-row b { font-size:var(--text-xs); }
.retention-hold small, .retention-version-row small { display:block; color:var(--muted); font-size:var(--text-xs); }
.retention-legal { max-width:95ch; margin:var(--space-4) 0 0; color:var(--muted); font-size:var(--text-xs); }
@media (max-width:1100px) { .retention-card > summary { grid-template-columns:14px minmax(0,1fr) auto; }
  .retention-summary-pills { grid-column:2 / -1; }
  .retention-item { grid-template-columns:1fr auto; }
  .retention-item > span:nth-child(3) { grid-column:1 / -1; } }
@media (max-width:760px) { .privacy-view { padding:var(--space-3) var(--space-2) var(--space-6); }
  .retention-head { display:grid; }
  .retention-card > summary { grid-template-columns:14px minmax(0,1fr); }
  .retention-summary-flags { grid-column:2; justify-items:start; grid-auto-flow:column; justify-content:start; }
  .retention-item { grid-template-columns:1fr; }.retention-item-status { justify-self:start; }
  .retention-hold, .retention-version-row { grid-template-columns:1fr; }
  .retention-hold-item, .retention-release { width:100%; }
  .retention-form-row { grid-template-columns:1fr; }
  .retention-task { grid-template-columns:20px minmax(0,1fr); }.retention-task em { grid-column:2; }
  .retention-inline-actions { display:grid; }.retention-inline-actions .primary-wide, .retention-cancel { width:100%; } }

.business-card { display:grid; gap:var(--space-2); }
.business-card p { margin:0; font-size:var(--text-xs); }
.business-card small { color:var(--muted); font-size:var(--text-xs); }
.business-card button { justify-self:start; border:1px solid var(--border); border-radius:var(--radius-md); padding:var(--space-2) var(--space-3); background:var(--surface); color:var(--accent); font-size:var(--text-xs); font-weight:700; cursor:pointer; }
.business-card button:hover { border-color:var(--accent); }
.business-card.marked { border-color:var(--amber); background:#ef9a2d12; }
.business-card.marked .business-release { color:var(--muted); }
.business-release-form { display:grid; gap:var(--space-2); margin-top:var(--space-1); padding-top:var(--space-2); border-top:1px solid var(--border); }
.business-release-form label { display:grid; gap:var(--space-1); color:var(--muted); font-size:var(--text-xs); }
.business-release-form input { width:100%; min-width:0; padding:var(--space-2); }
.directory-tag.business { background:#ef9a2d1c; color:var(--amber); }

.messages-deleted { display:grid; grid-template-columns:26px minmax(0,1fr); gap:var(--space-2); align-items:start; margin:0 0 var(--space-3); padding:var(--space-3) var(--space-3); border:1px dashed var(--border); border-radius:var(--radius-lg); background:var(--surface-2); }
.messages-deleted > span { width:24px; height:24px; display:grid; place-items:center; border-radius:var(--radius-md); background:var(--surface); color:var(--muted); font-size:var(--text-xs); }
.messages-deleted b { display:block; font-size:var(--text-xs); }
.messages-deleted p { margin:var(--space-1) 0 0; color:var(--muted); font-size:var(--text-xs); }
.directory-tag.deleted { background:var(--surface); color:var(--muted); border:1px solid var(--border); }

.consent-blocked { display:grid; gap:var(--space-1); margin-bottom:var(--space-3); padding:var(--space-3) var(--space-3); border:1px solid var(--danger); border-radius:var(--radius-lg); background:#9e3b3414; }
.consent-blocked b { color:var(--danger); font-size:var(--text-sm); }.consent-blocked p { margin:0; font-size:var(--text-xs); }
.consent-revoke { display:grid; gap:var(--space-2); }
.consent-revoke p { margin:0; font-size:var(--text-xs); }
.consent-revoke small { color:var(--muted); font-size:var(--text-xs); }
.consent-revoke button { justify-self:start; border:1px solid var(--border); border-radius:var(--radius-md); padding:var(--space-2) var(--space-3); background:var(--surface); color:var(--text); font-size:var(--text-xs); font-weight:700; cursor:pointer; }
.consent-revoke button:hover { border-color:var(--danger); color:var(--danger); }
.consent-revoke-form { display:grid; gap:var(--space-2); padding-top:var(--space-2); border-top:1px solid var(--border); }
.consent-revoke-form label { display:grid; gap:var(--space-1); color:var(--muted); font-size:var(--text-xs); }
.consent-revoke-form input { width:100%; min-width:0; padding:var(--space-2); }
.evidence-text summary { color:var(--accent); font-size:var(--text-xs); font-weight:700; cursor:pointer; }
.evidence-text p { margin:var(--space-1) 0 0; padding:var(--space-2); border-radius:var(--radius-md); background:var(--surface-2); font-size:var(--text-xs); }
.evidence-missing { margin:var(--space-1) 0 0; color:var(--amber); font-size:var(--text-xs); }
.consent-text-active { display:grid; gap:var(--space-1); padding:var(--space-3) var(--space-3); border:1px solid var(--accent); border-radius:var(--radius-lg); background:var(--accent-soft); }
.consent-text-active p { margin:0; font-size:var(--text-xs); }.consent-text-active small { color:var(--muted); font-size:var(--text-xs); }
.consent-text-old { padding:var(--space-2) 0; border-top:1px solid var(--border); }
.consent-text-old b { font-size:var(--text-xs); }.consent-text-old small { display:block; color:var(--muted); font-size:var(--text-xs); }
.consent-text-old p { margin:var(--space-1) 0 0; color:var(--muted); font-size:var(--text-xs); }
.consent-text-form { display:grid; gap:var(--space-2); margin-top:var(--space-2); padding:var(--space-3); border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface-2); }
.consent-text-form label { display:grid; gap:var(--space-1); color:var(--muted); font-size:var(--text-xs); }
.consent-text-form input, .consent-text-form textarea { width:100%; min-width:0; padding:var(--space-2); }

.admin-shell { min-height:0; }
.admin-tabs { display:flex; gap:var(--space-1); margin-bottom:var(--space-3); }
.settings-wrap { display:grid; gap:var(--space-3); }
/* Der Kartenkopf ist 15px eingerueckt. Der Inhalt braucht denselben Innenabstand, sonst stossen die
   Felder direkt an den Kartenrand und stehen nicht unter ihrer eigenen Ueberschrift.
   Bewusst fuer jede Karte, nicht nur fuer die Einstellungen: die frueher auf .settings-wrap begrenzte
   Fassung liess denselben Fehler im Kampagnenbereich erneut entstehen. Listen bleiben ohne Abstand,
   weil ihre Zeilen ihn selbst tragen und ihre Trennlinien die ganze Kartenbreite nutzen sollen. */
.security-card > form { padding:var(--space-3) var(--space-4); }
.security-card > .readonly-info { margin:var(--space-3) var(--space-4); }
.settings-form, .smtp-form { display:grid; gap:var(--space-3); }
.settings-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:var(--space-3); }
.settings-grid label, .settings-form label, .smtp-form label, .interest-form label { display:grid; gap:var(--space-1); min-width:0; color:var(--muted); font-size:var(--text-xs); }
.settings-grid label.wide, .settings-form label.wide { grid-column:1 / -1; }
/* Fuellt eine Zeile auf, die sonst mit einer leeren Spalte enden wuerde. */
.settings-grid label.wide2 { grid-column:span 2; }
/* Kurze Werte wie eine Zeitzone brauchen kein Feld ueber die ganze Breite. */
.settings-form label.field-short input { max-width:230px; }
.settings-grid input, .settings-grid select, .settings-form input, .settings-form textarea, .smtp-form input, .smtp-form select, .interest-form input { width:100%; min-width:0; padding:var(--space-2); }
.settings-subhead { margin:var(--space-1) 0 0; font-size:var(--text-sm); }
.settings-note { margin:0; max-width:90ch; color:var(--muted); font-size:var(--text-xs); }
.settings-advanced summary { color:var(--accent); font-size:var(--text-xs); font-weight:700; cursor:pointer; }
.settings-advanced > *:not(summary) { margin-top:var(--space-2); }
.hours-table { display:grid; gap:var(--space-2); border:1px solid var(--border); border-radius:var(--radius-md); padding:var(--space-3); background:var(--surface-2); }
/* Feste Spaltenbreiten: eine Uhrzeit braucht kein Feld ueber ein Drittel der Karte. Die Kopfzeile
   traegt bewusst nicht die Klasse hours-row, weil das Speichern alle .hours-row als Wochentag liest. */
.hours-row, .hours-head { display:grid; grid-template-columns:110px 130px 124px 124px; gap:var(--space-2); align-items:center; font-size:var(--text-xs); }
.hours-head { color:var(--muted); font-size:var(--text-xs); }
.hours-row input[type="time"] { width:100%; min-width:0; padding:var(--space-2); }
.hours-closed { display:flex !important; gap:var(--space-1); align-items:center; color:var(--muted); font-size:var(--text-xs); }
.hours-closed input { width:auto; }
.interest-list { display:grid; gap:0; }
/* Innenabstand wie bei den Benutzerzeilen, damit die Trennlinien die ganze Kartenbreite nutzen. */
.interest-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--space-3); align-items:center; padding:var(--space-3) var(--space-4); border-bottom:1px solid var(--border); }
.interest-row:last-child { border-bottom:0; }
.interest-row b { font-size:var(--text-xs); }.interest-row small { display:block; color:var(--muted); font-size:var(--text-xs); }
.interest-row.inactive b { color:var(--muted); text-decoration:line-through; }
.interest-row button, .interest-form button { border:1px solid var(--border); border-radius:var(--radius-md); padding:var(--space-2) var(--space-3); background:var(--surface); color:var(--text); font-size:var(--text-xs); cursor:pointer; }
.interest-row button:hover, .interest-form button:hover { border-color:var(--accent); color:var(--accent); }
/* Abschluss der Karte wie das Einladungsformular im Nachbarreiter: eigene Flaeche mit Trennlinie.
   Die Bezeichnung eines Interesses ist kurz, deshalb kein Feld ueber die ganze Breite. */
.interest-form { display:grid; grid-template-columns:minmax(0,320px) auto; gap:var(--space-2); align-items:end; justify-content:start; border-top:1px solid var(--border); background:var(--surface-2); }
@media (max-width:760px) { .settings-grid { grid-template-columns:1fr; }
  .settings-grid label.wide2 { grid-column:auto; }
  .hours-head { display:none; }
  .hours-row { grid-template-columns:1fr 1fr; }.hours-row > span { grid-column:1 / -1; font-weight:700; }
  .interest-row, .interest-form { grid-template-columns:1fr; }
  .admin-tabs { flex-wrap:wrap; } }

/* Einheitliche Feldmasse.
   Auswahlfelder brauchen rechts Platz fuer den Pfeil. Zahlreiche Bereichsregeln setzen jedoch ein
   symmetrisches padding und ueberschreiben damit die Grundregel, sodass der Pfeil auf dem Text liegt.
   Diese Regel hat dieselbe Spezifitaet wie die Bereichsregeln und wirkt durch ihre Position am Dateiende. */
select:not([multiple]) { padding: var(--space-2) var(--space-8) var(--space-2) var(--space-2); }
/* Das kompakte Statusfeld im Chatkopf bleibt schmal, braucht aber ebenfalls Platz fuer den Pfeil. */
.chat-header .status-select, .chat-header .owner-select { padding: var(--space-2) var(--space-6) var(--space-2) var(--space-2); }
/* Jedes Eingabe- und Auswahlfeld hat dieselbe Hoehe, damit Zeilen sauber abschliessen.
   Die Regel galt vorher nur innerhalb von Formularen; das Auswahlfeld in der Kopfzeile
   war dadurch 41px hoch. Kontrollkaestchen bleiben unberuehrt.
   Ohne feste Zeilenhoehe wuechse ein Feld je nach Schriftgroesse darueber hinaus
   (gemessen 37px statt 36px). */
/* Die Ausnahmen stehen in :where(), weil :where() keine Spezifitaet beitraegt und
   :not() sehr wohl. Mit :not() gewann diese Grundregel gegen jede Bereichsregel und
   drueckte das absichtlich grosse Code-Feld sowie die Anmeldefelder auf 12px. */
input:where(:not([type=checkbox]):not([type=radio]):not([type=file])), select:where(:not([multiple])), textarea {
  min-height: var(--control-h); box-sizing: border-box; line-height: var(--leading-tight);
  /* Ein Feld hat eine Schriftgroesse. Ohne diese Angabe erbte ein Feld die
     Groesse seiner Umgebung: das Auswahlfeld im Posteingang stand mit 16px
     neben Feldern mit 12px und war dadurch 41px statt 36px hoch. */
  font-size: var(--text-xs);
}
/* Wer hier schreibt, schreibt mehr als ein Wort. Schreibfelder sind deshalb
   eine Stufe groesser als Eingabefelder. */
textarea { font-size: var(--text-sm); }
/* Der Browser rechnet <small> ohne eigene Angabe als 0,8em seiner Umgebung.
   Das ergab 10px in einem 12px-Umfeld und 13px in einem 16px-Umfeld.
   Diese Untergrenze faengt jede Stelle ab, die keine eigene Groesse setzt. */
small { font-size: var(--text-xs); }
/* Dieselbe Fehlerklasse bei Ueberschriften: der Vorgabewert des Browsers ist fuer
   h3 1,17em (19px), h5 0,83em und h6 0,67em - alle drei liegen neben der Skala.
   h1 (2em = 32px), h2 (1,5em = 24px) und h4 (1em = 16px) treffen sie zufaellig.
   Diese Grundwerte greifen nur, wo keine Bereichsregel eine Groesse setzt. */
h3 { font-size: var(--text-md); }
h5 { font-size: var(--text-sm); }
h6 { font-size: var(--text-xs); }
.hours-row input[type="time"] { height: var(--control-h); padding: var(--space-2) var(--space-2); font-size: var(--text-xs); }
/* Ein Feld mit Hilfstext macht seine Rasterzeile hoeher und streckte bisher das Nachbarfeld mit.
   Damit behalten alle Felder einer Zeile dieselbe Hoehe. */
form label, .settings-grid > label, .form-grid > label { align-content: start; }
.prize-row label { align-items: center; }
/* Diese Felder stehen nicht in einem Label und erbten daher die Grundschriftgroesse,
   wodurch ihr Text groesser war als in allen anderen Feldern. */
.prize-row input { font-size: var(--text-xs); }

/* Kampagnen: Aussendungen nach D-182. Feldmasse folgen D-181 ueber die allgemeinen Regeln. */
.campaigns-view { min-height:0; flex:1; overflow:auto; padding:var(--space-4) var(--space-4) var(--space-8); background:var(--bg); }
.campaigns-wrap { max-width:1400px; margin:auto; display:grid; gap:var(--space-3); }
.campaign-layout { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:var(--space-3); align-items:start; }
.campaign-detail { display:grid; gap:var(--space-3); }
.campaign-list { display:grid; gap:0; }
.campaign-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--space-3); align-items:center; width:100%; padding:var(--space-3) var(--space-4); border:0; border-bottom:1px solid var(--border); background:none; color:var(--text); text-align:left; cursor:pointer; }
.campaign-row:last-of-type { border-bottom:0; }
.campaign-row:hover { background:var(--surface-2); }
.campaign-row.active { background:var(--accent-soft); }
.campaign-row b { font-size:var(--text-xs); }
.campaign-row small { display:block; margin-top:var(--space-1); color:var(--muted); font-size:var(--text-xs); }
.new-campaign-form { border-top:1px solid var(--border); }
.audience-body { display:grid; gap:var(--space-3); padding:var(--space-3) var(--space-4); }
.audience-total { display:flex; gap:var(--space-2); align-items:baseline; }
.audience-total b { color:var(--accent); font-size:var(--text-2xl); line-height:var(--leading-none); }
.audience-total span { color:var(--muted); font-size:var(--text-xs); }
.audience-list { display:grid; gap:0; border:1px solid var(--border); border-radius:var(--radius-md); padding:var(--space-2) var(--space-3); background:var(--surface-2); }
.audience-list .eyebrow { margin-bottom:var(--space-1); }
.audience-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--space-3); padding:var(--space-1) 0; font-size:var(--text-xs); }
.audience-row + .audience-row { border-top:1px solid var(--border); }
.audience-row b { font-variant-numeric:tabular-nums; }
.audience-note { margin:0; color:var(--muted); font-size:var(--text-xs); line-height:var(--leading-normal); }
.audience-warning { padding:var(--space-3) var(--space-4); border:1px solid var(--amber); border-radius:var(--radius-lg); background:var(--surface); }
.audience-warning b { font-size:var(--text-xs); }
.audience-warning p { margin:var(--space-1) 0 0; color:var(--muted); font-size:var(--text-xs); }
@media (max-width:1100px) { .campaign-layout { grid-template-columns:1fr; } }
@media (max-width:760px) { .campaigns-view { padding:var(--space-3) var(--space-2) var(--space-6); } .campaign-row { padding:var(--space-3) var(--space-3); } }

/* WhatsApp-Anbindung: Pruefen ohne Speichern neben dem Speichern. */
.meta-actions { display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--space-2); align-items:center; }
.meta-actions .secondary { border:1px solid var(--border); border-radius:var(--radius-md); padding:var(--space-2) var(--space-3); background:var(--surface); color:var(--text); font-size:var(--text-xs); font-weight:650; cursor:pointer; }
.meta-actions .secondary:hover:not(:disabled) { border-color:var(--accent); color:var(--accent); }
.meta-actions button:disabled { opacity:.6; cursor:progress; }
@media (max-width:760px) { .meta-actions { grid-template-columns:1fr; } }

/* Zustellzustand und Antwortzeile. Eine freie Antwort ist nur im Servicefenster von 24 Stunden
   zulaessig; danach verlangt Meta eine genehmigte Vorlage. */
.bubble-meta .delivery { white-space: nowrap; }
.bubble-meta .delivery.pending { color: var(--muted); }
.bubble-meta .delivery.sent, .bubble-meta .delivery.delivered { color: var(--accent); }
.bubble-meta .delivery.read { color: var(--accent); font-weight: 700; }
/* Dieselbe Warnfarbe wie bei ueberfaelligen Kontakten, damit ein Fehlschlag sofort ins Auge faellt. */
.bubble-meta .delivery.failed { color: var(--danger); font-weight: 700; white-space: normal; }
.bubble-meta .delivery.none { color: var(--amber); }
.composer-note { padding: var(--space-2) var(--space-3); border-top: 1px solid var(--border); background: var(--surface-2); color: var(--muted); font-size: var(--text-xs); }
.composer-note.open { color: var(--accent); }
.composer-blocked { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--amber); background: var(--surface-2); }
.composer-blocked b { font-size: var(--text-xs); }
.composer-blocked p { margin: var(--space-1) 0 0; color: var(--muted); font-size: var(--text-xs); line-height: var(--leading-normal); }

/* Einrichtung des Rueckkanals: die beiden Werte, die in der Meta-App eingetragen werden. */
.webhook-setup { display:grid; gap:var(--space-2); padding:var(--space-3) var(--space-4); border-bottom:1px solid var(--border); }
.webhook-steps { margin:0; padding-left:var(--space-4); display:grid; gap:var(--space-2); color:var(--text); font-size:var(--text-xs); line-height:var(--leading-normal); }
.webhook-steps b { font-size:var(--text-xs); }
.webhook-steps code { padding:var(--space-1) var(--space-1); border-radius:var(--radius-sm); background:var(--surface-2); font-size:var(--text-xs); overflow-wrap:anywhere; }
.webhook-steps small { display:block; margin-top:var(--space-1); color:var(--muted); font-size:var(--text-xs); line-height:var(--leading-normal); }
.webhook-url { display:flex; gap:var(--space-2); align-items:center; flex-wrap:wrap; margin-top:var(--space-1); }
.webhook-url code { padding:var(--space-2) var(--space-2); border:1px solid var(--accent); border-radius:var(--radius-md); background:var(--accent-soft); color:var(--accent); font-size:var(--text-xs); font-weight:650; }
.webhook-url.pending code { border-color:var(--border); background:var(--surface-2); color:var(--muted); font-weight:400; }
.webhook-url .secondary { border:1px solid var(--border); border-radius:var(--radius-md); padding:var(--space-2) var(--space-3); background:var(--surface); color:var(--text); font-size:var(--text-xs); cursor:pointer; }
.webhook-url .secondary:hover { border-color:var(--accent); color:var(--accent); }
.webhook-hint { margin:0; color:var(--muted); font-size:var(--text-xs); line-height:var(--leading-normal); }
/* Hilfe beim Erzeugen des Pruefworts. */
.secret-helper { display:flex; gap:var(--space-2); align-items:center; flex-wrap:wrap; }
.secret-helper .secondary { border:1px solid var(--border); border-radius:var(--radius-md); padding:var(--space-2) var(--space-3); background:var(--surface); color:var(--text); font-size:var(--text-xs); cursor:pointer; }
.secret-helper .secondary:hover { border-color:var(--accent); color:var(--accent); }
.secret-helper-note { flex:1 1 220px; min-width:0; color:var(--muted); font-size:var(--text-xs); line-height:var(--leading-normal); }
@media (max-width:760px) { .secret-helper-note { flex-basis:100%; } }

/* ==========================================================================
   Gemeinsame Seitenhuelle (D-189).
   Vorher hatte jeder Bereich seinen eigenen Rand: 18px, 24px sowie 18px mit
   30px unten. Diese Regel steht bewusst am Dateiende und gewinnt damit gegen
   die gleich starken Bereichsregeln weiter oben.
   ========================================================================== */
.dashboard-view, .qr-view, .appointments-view, .giveaway-view, .reports-view,
.users-view, .contacts-view, .privacy-view, .campaigns-view {
  padding: var(--space-6) var(--space-6) var(--space-8);
}

/* Keine Farbuebergaenge (D-190).
   Mit 0.9.26 hatten ein Dutzend Bedienelemente einen Uebergang auf background-color,
   border-color und color. Beim angemeldeten Durchgang zeigte sich: wechselt eine
   Farbe ueber eine Variable am :root - also bei jedem Wechsel zwischen Hell und
   Dunkel -, bleibt der Uebergang in Chrome stehen und das Element behaelt die
   Farbe des vorherigen Modus dauerhaft. Gemessen wurde .session-user mit der
   Textfarbe des Hellmodus auf dunklem Grund (1,01:1, der eigene Name unsichtbar)
   und der Umschalter selbst mit dunkler Flaeche im Hellmodus (ebenfalls 1,01:1).
   Mit transition:none war beides sofort richtig.
   Deshalb wechseln Farben ohne Uebergang. Das ist zugleich das schnellere
   Verhalten. Uebergaenge bleiben nur, wo keine Themenfarbe beteiligt ist:
   die Einblendung der Meldung unten und die Drehung des Pfeils im Benutzermenue. */

@media (max-width:760px) {
  .dashboard-view, .qr-view, .appointments-view, .giveaway-view, .reports-view,
  .users-view, .contacts-view, .privacy-view, .campaigns-view {
    padding: var(--space-3) var(--space-2) var(--space-6);
  }
  /* Beruehrungsgeraete: ein Finger braucht mindestens 44px. Am Rechner bleibt
     die Oberflaeche mit 36px dicht. Die Kopfzeile wird auf dem Handy flacher. */
  :root { --control-h: 44px; --header-h: 72px; }
  input:not([type=checkbox]):not([type=radio]):not([type=file]), select:not([multiple]), textarea {
    min-height: var(--control-h);
  }
  /* Gilt fuer jede Schaltflaeche, nicht fuer eine Liste einzelner Klassen.
     Die frueher aufgezaehlte Fassung uebersah sieben Knoepfe: .dashboard-reset,
     .panel-head button (24px), .retention-hold-item (26px), .retention-hold-category,
     .interest-toggle und zwei weitere - gemessen auf 375px Breite. */
  button, summary, [role="button"] {
    min-height: var(--control-h);
  }
}

/* Menuesymbole (D-189). Direkt in der Seite, kein Paket und kein Nachladen.
   currentColor uebernimmt die Textfarbe und damit auch den Dunkelmodus.
   Sie stehen neben sichtbarem Text, sind also dekorativ und im Markup
   mit aria-hidden ausgezeichnet, damit Vorleseprogramme nicht doppelt ansagen. */
.nav-icon {
  width: 20px; height: 20px; justify-self: center;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Geteilte Ansichten: Liste links, Einzelheiten rechts.
   Ihre Hoehe stand als feste Rechnung in der Datei - calc(100vh - 148px) und
   calc(100vh - 155px). Diese Zahlen waren bereits vorher schwer zu pflegen und
   nach der Vereinheitlichung der Raender falsch. Jetzt fuellt die Liste
   einfach den Rest der Ansicht. Nur am Rechner: die Handy-Ansichten weiter
   oben in der Datei bleiben unberuehrt. */
@media (min-width:761px) {
  .qr-view, .appointments-view, .giveaway-view { display: flex; flex-direction: column; }
  .qr-layout, .appointment-layout, .giveaway-layout { height: auto; min-height: 0; flex: 1; }
}

/* Bedienelemente der Kopfzeile und die Suchleiste folgen derselben Hoehe wie
   die Felder in den Formularen. Vorher waren es 38px neben 37px. */
.icon-button, .mobile-menu, .search { height: var(--control-h); }

/* Folge des entfaerbten Akzents (D-190): Im Dunkelmodus liegt der Akzent (#e8e8ea)
   dicht an der normalen Textfarbe (#f0f0f2). Diese fuenf Stellen tragen die
   Information "anklickbar" allein ueber die Farbe - sie haben weder Rahmen noch
   Fuellung. Sie erhalten deshalb eine Unterstreichung. Im Hellmodus bleibt es
   unveraendert, weil dort das Gruen den Unterschied schon traegt. */
[data-theme="dark"] .panel-head button,
[data-theme="dark"] .credential-result a,
[data-theme="dark"] .retention-edit summary,
[data-theme="dark"] .evidence-text summary,
[data-theme="dark"] .settings-advanced summary {
  text-decoration: underline;
  text-underline-offset: 2px;
}