/* Verwaltung im Rahmen der gebauten Konsole. Alles ist unter #wm-view (Ansichten) bzw. .wm-* (eingesetzte Teile in "Crews") begrenzt,
 * damit die Seiten der Konsole unberuehrt bleiben. Farben nur ueber die Tokens aus brand-theme.css (Hell und Dunkel). Der Preflight des
 * Bundles (Tailwind) setzt Abstaende, Listen, Ueberschriften zurueck: hier steht deshalb alles ausdruecklich. */

[data-wm-hidden] { display: none !important; }
html.wm-lock { overflow: hidden; }

/* ---------- Rahmen, flackerfrei ----------
 * <html data-wm-view="<ansicht>"> setzt console-boot.js (im <head>, vor der Konsole) und console-nav.js allein aus der Adresse, im selben Schritt wie der
 * Adresswechsel. Menue-Markierung und die Wahl zwischen dem Inhalt der Konsole und unserem Bereich sind deshalb reines CSS und nie dem Zeichnen der Konsole
 * hinterher. Keine Uebergaenge an den Menuepunkten: sonst blenden alter und neuer Punkt ueber 150 ms ineinander (zwei Markierungen zugleich). */
html { scrollbar-gutter: stable; }
aside nav a, aside nav a > span { transition: none !important; }
aside nav a[href="/events"], aside nav a[href="/spotlight"], aside nav a[href="/spontan"], aside nav a[href="/wishlists"], aside nav a[href="/rankings"], aside nav a[href="/subscriptions"] { display: none; }
html[data-wm-view] main > :not(#wm-view) { display: none !important; }
html[data-wm-view] main > #wm-view, html[data-wm-view] main > #wm-view[hidden] { display: block !important; }
html[data-wm-view="stats"] aside nav a[data-wm-key="stats"], html[data-wm-view="wish"] aside nav a[data-wm-key="wish"], html[data-wm-view="push"] aside nav a[data-wm-key="push"],
html[data-wm-view="flags"] aside nav a[data-wm-key="flags"], html[data-wm-view="exp"] aside nav a[data-wm-key="exp"], html[data-wm-view="price"] aside nav a[data-wm-key="price"],
html[data-wm-view="audit"] aside nav a[data-wm-key="audit"], html[data-wm-view="docs"] aside nav a[data-wm-key="docs"], html[data-wm-view="legal"] aside nav a[data-wm-key="legal"],
html[data-wm-view="sec"] aside nav a[data-wm-key="sec"], html[data-wm-view="wait"] aside nav a[data-wm-key="wait"] {
  background-color: var(--color-primary); background-image: none; color: var(--color-primary-foreground);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--brand-shadow) 8%, transparent), 0 8px 24px color-mix(in srgb, var(--brand-shadow) 7%, transparent);
}
html[data-wm-view="stats"] aside nav a[data-wm-key="stats"] > span:first-child, html[data-wm-view="wish"] aside nav a[data-wm-key="wish"] > span:first-child,
html[data-wm-view="push"] aside nav a[data-wm-key="push"] > span:first-child, html[data-wm-view="flags"] aside nav a[data-wm-key="flags"] > span:first-child,
html[data-wm-view="exp"] aside nav a[data-wm-key="exp"] > span:first-child, html[data-wm-view="price"] aside nav a[data-wm-key="price"] > span:first-child,
html[data-wm-view="audit"] aside nav a[data-wm-key="audit"] > span:first-child, html[data-wm-view="docs"] aside nav a[data-wm-key="docs"] > span:first-child,
html[data-wm-view="legal"] aside nav a[data-wm-key="legal"] > span:first-child, html[data-wm-view="sec"] aside nav a[data-wm-key="sec"] > span:first-child, html[data-wm-view="wait"] aside nav a[data-wm-key="wait"] > span:first-child {
  background-color: color-mix(in srgb, var(--color-primary-foreground) 16%, transparent);
}
/* Solange unsere Ansicht offen ist, zeigt kein Punkt der Konsole sich selbst als aktiv (sie steht dann auf der leeren Route /spontan) */
html[data-wm-view] aside nav a:not([data-wm-key])[aria-current="page"] { background-color: transparent; background-image: none; color: var(--color-muted-foreground); box-shadow: none; }
html[data-wm-view] aside nav a:not([data-wm-key])[aria-current="page"] > span:first-child { background-color: var(--color-surface); }

/* ---------- Grundlagen ---------- */
#wm-view { font-family: var(--font-sans); font-size: 0.95rem; line-height: 1.5; color: var(--color-foreground); }
#wm-view[hidden] { display: none; }
#wm-view [hidden] { display: none !important; }
#wm-view .sr, .wm-crewpass .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#wm-view .muted, .wm-crewpass .muted { color: var(--color-muted-foreground); }
#wm-view .small, .wm-crewpass .small { font-size: 0.8125rem; }
#wm-view .mono { font-family: var(--font-mono); }
#wm-view .nowrap { white-space: nowrap; }
#wm-view .wm-panel > * + * { margin-top: 20px; }
#wm-view .wm-panel > :is(.sheet, .modal) { margin-top: 0; }
#wm-view h2 { font-family: var(--font-display); font-size: 1.75rem; line-height: 1.15; font-weight: 800; letter-spacing: -0.01em; text-wrap: balance; }
#wm-view h3 { font-family: var(--font-display); font-size: 1.1rem; line-height: 1.3; font-weight: 700; }
#wm-view h4 { font-size: 0.95rem; font-weight: 700; }
#wm-view p { text-wrap: pretty; }
#wm-view a { color: var(--color-primary-ink); text-decoration: underline; }
#wm-view svg { display: block; }
#wm-view strong { font-weight: 700; }
#wm-view code { font-family: var(--font-mono); font-size: 0.85em; }
#wm-view pre { white-space: pre-wrap; }
#wm-view ul.plain, #wm-view ol.history, #wm-view ul.pick, #wm-view ul.legend { list-style: none; padding: 0; }
#wm-view summary { cursor: pointer; }

.wm-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px 24px; flex-wrap: wrap; }
.wm-head > div:first-child { max-width: 70ch; }
.wm-head p { margin-top: 6px; }
.wm-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.wm-card { background: var(--color-card); border: 1px solid var(--color-border); border-radius: 20px; padding: 20px; }
#wm-view .wm-card > * + * { margin-top: 12px; }
#wm-view details.wm-card > summary { font-weight: 700; min-height: 32px; display: flex; align-items: center; }
#wm-view details.wm-card[open] > summary { margin-bottom: 12px; }

/* Formularelemente (auch im eingesetzten Crew-Pass-Abschnitt) */
:is(#wm-view, .wm-crewpass, .wm-passfilter) :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  font: inherit; color: var(--color-foreground); background: var(--color-background); border: 1px solid var(--color-border);
  border-radius: 12px; padding: 8px 12px; min-height: 40px; max-width: 100%; width: 100%;
}
:is(#wm-view, .wm-crewpass, .wm-passfilter) textarea { resize: vertical; min-height: 64px; }
:is(#wm-view, .wm-crewpass, .wm-passfilter) :is(input, select, textarea, button, summary, [tabindex]):focus-visible { outline: 2px solid var(--color-ring); outline-offset: 2px; }
:is(#wm-view, .wm-crewpass, .wm-passfilter) input[type="checkbox"], :is(#wm-view) input[type="radio"] { width: 18px; height: 18px; accent-color: var(--color-primary); flex: none; }
:is(#wm-view, .wm-crewpass, .wm-passfilter) button {
  font: inherit; font-weight: 600; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--color-border);
  background: var(--color-card); color: var(--color-foreground); cursor: pointer; width: auto;
}
:is(#wm-view, .wm-crewpass) button:hover:not(:disabled) { background: var(--color-surface); }
:is(#wm-view, .wm-crewpass) button.primary { background: var(--color-primary); color: var(--color-primary-foreground); border-color: transparent; font-weight: 700; }
:is(#wm-view, .wm-crewpass) button.primary:hover:not(:disabled) { background: var(--color-primary); filter: brightness(0.95); }
:is(#wm-view, .wm-crewpass) button.ghost { background: transparent; }
:is(#wm-view, .wm-crewpass) button.danger { color: var(--color-destructive); }
:is(#wm-view, .wm-crewpass) button:disabled { opacity: 0.55; cursor: default; }
#wm-view button.linkish { min-height: 32px; padding: 0 2px; border: 0; background: transparent; color: var(--color-foreground); text-decoration: underline; text-underline-offset: 3px; border-radius: 6px; text-align: left; font-weight: 600; }
#wm-view button.linkish:hover:not(:disabled) { background: transparent; color: var(--color-primary-ink); }
#wm-view label { display: grid; gap: 4px; font-size: 0.8125rem; font-weight: 600; color: var(--color-muted-foreground); min-width: 0; }
#wm-view label.check { display: flex; align-items: center; gap: 8px; min-height: 40px; font-weight: 500; color: var(--color-foreground); }
#wm-view label.inline { display: inline-flex; align-items: center; gap: 8px; }
#wm-view label.inline :is(select, input) { width: auto; }
#wm-view label.grow { grid-column: span 2; }
#wm-view fieldset { border: 1px solid var(--color-border); border-radius: 14px; padding: 8px 14px; min-width: 0; margin: 0; }
#wm-view fieldset legend { font-size: 0.8125rem; color: var(--color-muted-foreground); padding: 0 6px; }
#wm-view fieldset.seg-fs { display: flex; gap: 4px 20px; flex-wrap: wrap; align-items: center; }
#wm-view .msg { min-height: 1.3em; color: var(--color-destructive); font-size: 0.875rem; }
#wm-view .msg.ok { color: var(--color-success); }
#wm-view .toolbar { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
#wm-view .toolbar > label { min-width: 160px; }
#wm-view .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
#wm-view .grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
#wm-view .callout { background: var(--color-primary-soft); color: var(--color-primary-ink); border: 1px solid var(--color-border); border-radius: 14px; padding: 12px 16px; max-width: 72ch; }
#wm-view .empty { color: var(--color-muted-foreground); padding: 24px 8px; text-align: center; }

/* Umschalter (Zeitraum, Darstellung, Ansicht) */
#wm-view .seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--color-surface); }
#wm-view .seg button { min-height: 34px; padding: 0 14px; border: 0; background: transparent; color: var(--color-muted-foreground); font-weight: 600; }
#wm-view .seg button:hover:not(:disabled) { background: var(--color-surface-2); color: var(--color-foreground); }
#wm-view .seg button[aria-pressed="true"] { background: var(--color-primary); color: var(--color-primary-foreground); font-weight: 700; }

/* Badges */
#wm-view .badge { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--color-primary-soft); color: var(--color-primary-ink); font-size: 0.78rem; font-weight: 700; white-space: nowrap; }
#wm-view .badge.off { background: var(--color-surface); color: var(--color-muted-foreground); }
#wm-view .badge.bad { background: var(--color-surface); color: var(--color-destructive); border: 1px solid var(--color-destructive); }
#wm-view .badge.warn { background: var(--color-surface); color: var(--color-foreground); border: 1px solid var(--color-warning); }
#wm-view .badge.st-neu { background: var(--color-primary-soft); color: var(--color-primary-ink); }
#wm-view .badge.prio { background: var(--color-surface); border: 1px solid currentColor; }
#wm-view .badge.prio-p0 { color: var(--color-destructive); }
#wm-view .badge.prio-p1 { color: var(--color-warning); }
#wm-view .badge.prio-p2 { color: var(--color-info); }
#wm-view .badge.prio-p3 { color: var(--color-muted-foreground); }
#wm-view .tag { display: inline-block; padding: 0 8px; border-radius: 6px; background: var(--color-surface); color: var(--color-muted-foreground); font-size: 0.75rem; }
#wm-view .tag.doc { color: var(--color-primary-ink); font-weight: 700; }
#wm-view .chips-inline { display: inline-flex; gap: 4px; flex-wrap: wrap; }

/* ---------- Dashboard ---------- */
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 1200px) { .kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
#wm-view button.kpi { display: flex; flex-direction: column; align-items: stretch; gap: 2px; text-align: left; padding: 14px 16px 10px; min-height: 0; border-radius: 18px; background: var(--color-card); border: 1px solid var(--color-border); font-weight: 400; }
#wm-view button.kpi:hover:not(:disabled) { background: var(--color-card); border-color: var(--color-muted-foreground); }
#wm-view button.kpi.on { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); }
.kpi .k { font-size: 0.8125rem; color: var(--color-muted-foreground); }
.kpi .v { font-family: var(--font-display); font-size: 2rem; line-height: 1.15; font-weight: 800; }
#wm-view .d { font-size: 0.8125rem; font-weight: 700; }
#wm-view .d.up { color: var(--color-success); }
#wm-view .d.down { color: var(--color-destructive); }
#wm-view .d.flat { color: var(--color-muted-foreground); font-weight: 600; }
#wm-view .spark { width: 100%; height: 32px; margin-top: 6px; }
.spark-line { fill: none; stroke: var(--color-primary); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.spark-dot { fill: var(--color-primary); stroke: var(--color-card); stroke-width: 2; }
.chart-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px 24px; flex-wrap: wrap; }
.chart-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
#wm-view ul.legend { display: flex; gap: 6px 20px; flex-wrap: wrap; font-size: 0.8125rem; color: var(--color-muted-foreground); }
#wm-view ul.legend li { display: inline-flex; align-items: center; gap: 8px; }
.key { display: inline-block; width: 22px; height: 0; border-top: 2px solid var(--color-primary); }
.key-prev { border-top: 1.5px dashed var(--color-muted-foreground); }
.chart-host { position: relative; transition: opacity 120ms ease-out; }
.chart-host.busy { opacity: 0.55; }
#wm-view .plot { width: 100%; height: auto; overflow: visible; border-radius: 8px; touch-action: pan-y; }
.plot .grid { stroke: var(--color-border); stroke-width: 1; }
.plot .axis { stroke: var(--color-muted-foreground); stroke-width: 1; opacity: 0.45; }
.plot .tick { fill: var(--color-muted-foreground); font-size: 11px; font-family: var(--font-sans); }
.plot .line { fill: none; stroke: var(--color-primary); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.plot .area { fill: var(--color-primary); opacity: 0.1; stroke: none; }
.plot .prev { fill: none; stroke: var(--color-muted-foreground); stroke-width: 1.5; stroke-dasharray: 4 4; stroke-linejoin: round; }
.plot .bar { fill: var(--color-primary); }
.plot .enddot { fill: var(--color-primary); stroke: var(--color-card); stroke-width: 2; }
.plot .guide { stroke: var(--color-muted-foreground); stroke-width: 1; }
.plot .hit { fill: transparent; }
.plot:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 4px; }
.tip { position: absolute; z-index: 5; transform: translate(-50%, -100%); pointer-events: none; background: var(--color-brand-block); color: var(--color-on-brand-block); border-radius: 10px; padding: 6px 10px; font-size: 0.78rem; white-space: nowrap; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2); }
.tip-v { font-size: 1rem; font-weight: 800; }
.tip-l { opacity: 0.85; }
@media (prefers-reduced-motion: no-preference) { .plot .line, .plot .prev { animation: wm-fade 400ms ease-out both; } @keyframes wm-fade { from { opacity: 0; } to { opacity: 1; } } }
.alt { font-size: 0.85rem; }
.alt summary { min-height: 32px; display: flex; align-items: center; color: var(--color-primary-ink); font-weight: 600; }
.alt-wrap { max-height: 280px; overflow: auto; border: 1px solid var(--color-border); border-radius: 12px; margin-top: 8px; }
.totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px 24px; }
.tot dt { font-size: 0.8125rem; color: var(--color-muted-foreground); }
.tot dd { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; line-height: 1.2; }
.meter { display: block; height: 8px; border-radius: 4px; background: var(--color-surface); margin-top: 6px; overflow: hidden; }
.meter-fill { display: block; height: 100%; border-radius: 4px; background: var(--color-primary); }

/* Tabellen */
#wm-view .table-wrap { overflow-x: auto; background: var(--color-card); border: 1px solid var(--color-border); border-radius: 16px; }
#wm-view table { width: 100%; border-collapse: collapse; }
#wm-view th, #wm-view td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--color-border); vertical-align: middle; }
#wm-view th { font-size: 0.78rem; color: var(--color-muted-foreground); font-weight: 600; white-space: nowrap; }
#wm-view tr:last-child > td, #wm-view tr:last-child > th[scope="row"] { border-bottom: 0; }
#wm-view td.num, #wm-view th.num { text-align: right; font-variant-numeric: tabular-nums; }
#wm-view th[scope="row"] { font-size: inherit; color: var(--color-foreground); font-weight: 500; white-space: normal; }
#wm-view .alt table { font-size: 0.8125rem; }
#wm-view .alt th, #wm-view .alt td { padding: 5px 10px; }
#wm-view tr.failed td { background: var(--color-surface); }

/* ---------- Feature-Wuensche ---------- */
.wish-top { display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; flex-wrap: wrap; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
#wm-view button.chip { min-height: 32px; padding: 0 12px; font-size: 0.8125rem; font-weight: 600; background: var(--color-card); }
#wm-view button.chip[aria-pressed="true"] { background: var(--color-primary-soft); color: var(--color-primary-ink); border-color: var(--color-primary); }
.filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; align-items: end; }
.filters.main { grid-template-columns: minmax(220px, 2fr) repeat(3, minmax(120px, 1fr)); }
#wm-view .filters-form > * + * { margin-top: 10px; }
#wm-view details.more-filters > summary { color: var(--color-primary-ink); font-weight: 600; min-height: 32px; display: flex; align-items: center; }
#wm-view details.more-filters[open] > summary { margin-bottom: 10px; }
@media (max-width: 720px) { .filters.main { grid-template-columns: 1fr 1fr; } .filters.main label.grow { grid-column: 1 / -1; } }
.views-row { display: flex; gap: 8px 12px; align-items: flex-end; flex-wrap: wrap; }
.views-row select { min-width: 180px; }
.bulkbar { position: sticky; top: 8px; z-index: 6; display: flex; gap: 8px 12px; align-items: flex-end; flex-wrap: wrap; background: var(--color-card); border: 1px solid var(--color-primary); border-radius: 16px; padding: 12px 16px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); }
.bulkbar label.inline { font-size: 0.8125rem; }
#wm-view .wish-table { min-width: 860px; }
#wm-view .wish-table td.sel, #wm-view .wish-table th.sel { width: 36px; padding-right: 0; }
#wm-view .wish-table tr.deleted { opacity: 0.65; }
#wm-view .wish-table td.wide { min-width: 260px; max-width: 420px; }
.title-cell { display: grid; gap: 2px; }
.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 8px; align-items: start; }
.board.three { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
.wcol { background: var(--color-surface); border-radius: 18px; padding: 12px; min-width: 0; border: 2px solid transparent; }
.wcol.over { border-color: var(--color-primary); }
#wm-view .wcol h3 { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 1rem; }
#wm-view .wcol .count { font-family: var(--font-sans); font-size: 0.78rem; font-weight: 700; padding: 1px 9px; border-radius: 999px; background: var(--color-card); color: var(--color-muted-foreground); }
.wcol-list { display: grid; gap: 8px; }
.wcol-list.wide { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.wcard { background: var(--color-card); border: 1px solid var(--color-border); border-radius: 14px; padding: 12px; display: grid; gap: 6px; cursor: grab; }
.wcard.drag { opacity: 0.5; }
.wcard.deleted { opacity: 0.65; border-style: dashed; }
.wc-top { display: flex; gap: 8px; align-items: flex-start; }
#wm-view .wc-title { flex: 1; min-width: 0; overflow-wrap: anywhere; }
#wm-view label.mv { font-size: 0.75rem; grid-template-columns: auto 1fr; align-items: center; }
#wm-view label.mv select { min-height: 32px; padding: 2px 8px; font-size: 0.8125rem; }
#wm-view .backlog { margin-top: 20px; }

/* Detail, Anlegen, Zusammenfuehren */
.sheet { position: fixed; inset: 0; z-index: 50; display: flex; justify-content: flex-end; }
.sheet-back, .modal-back { position: absolute; inset: 0; background: rgba(20, 12, 28, 0.5); }
.sheet-panel { position: relative; width: min(680px, 100%); max-width: 100vw; height: 100%; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; background: var(--color-background); border-left: 1px solid var(--color-border); padding: 20px 24px 40px; display: grid; gap: 14px; align-content: start; box-shadow: -12px 0 40px rgba(0, 0, 0, 0.2); }
.sheet-panel > * { min-width: 0; }
.sheet-panel:focus, .modal-box:focus { outline: none; }
.sheet-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; position: sticky; top: -20px; z-index: 2; margin: -20px -24px 0; padding: 16px 24px 10px; background: var(--color-background); border-bottom: 1px solid var(--color-border); }
.sheet-head button { flex: none; }

/* Zentrierter Dialog (Zusammenfuehren, Neuer Wunsch); auf dem Handy volle Breite und Hoehe. Hoehere Ebene als die Seitenleiste, damit er darueber liegt. */
.modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; }
.modal-box { position: relative; width: min(560px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; background: var(--color-background); border: 1px solid var(--color-border); border-radius: 22px; padding: 20px 22px 22px; display: grid; gap: 12px; align-content: start; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35); }
.modal-box > * { min-width: 0; }
.modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; position: sticky; top: -20px; z-index: 2; margin: -20px -22px 0; padding: 16px 22px 10px; background: var(--color-background); }
.modal-head button { flex: none; }
#wm-view .modal-head h3 { font-size: 1.2rem; overflow-wrap: anywhere; }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; position: sticky; bottom: -22px; z-index: 2; margin: 0 -22px -22px; padding: 12px 22px 16px; background: var(--color-background); border-top: 1px solid var(--color-border); }
@media (prefers-reduced-motion: no-preference) { .modal-box { animation: wm-pop 160ms cubic-bezier(0.16, 1, 0.3, 1) backwards; } @keyframes wm-pop { from { opacity: 0; transform: translateY(8px) scale(0.985); } } }
@media (max-width: 600px) {
  .modal { padding: 0; place-items: stretch; }
  .modal-box { width: 100%; max-height: none; height: 100%; border-radius: 0; border: 0; padding: 16px 16px 20px; box-shadow: none; }
  .modal-head { top: -16px; margin: -16px -16px 0; padding: 14px 16px 10px; }
  .modal-actions { bottom: -20px; margin: 0 -16px -20px; padding: 12px 16px 16px; }
}
#wm-view label.pick-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 14px; border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-card); color: var(--color-foreground); font-size: 0.9rem; font-weight: 500; cursor: pointer; min-height: 52px; }
#wm-view label.pick-row:hover { border-color: var(--color-muted-foreground); }
#wm-view label.pick-row.on { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); background: var(--color-primary-soft); }
#wm-view label.pick-row:has(input:focus-visible) { outline: 2px solid var(--color-ring); outline-offset: 2px; }
.pick-main { display: grid; gap: 2px; min-width: 0; }
#wm-view .merge-preview { background: var(--color-primary-soft); color: var(--color-primary-ink); border-radius: 12px; padding: 10px 14px; font-weight: 600; overflow-wrap: anywhere; }

/* Personen im Push: gewaehlte Empfaenger als Chips */
#wm-view ul.chip-list { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 6px 0 0; }
#wm-view ul.chip-list:empty { display: none; }
.chip-item { display: inline-flex; align-items: center; gap: 8px; padding: 3px 3px 3px 14px; border-radius: 999px; background: var(--color-primary-soft); color: var(--color-primary-ink); max-width: 100%; }
.chip-name { font-weight: 700; overflow-wrap: anywhere; }
#wm-view .chip-item .muted { color: inherit; opacity: 0.85; }
#wm-view button.chip-x { min-height: 32px; width: 32px; padding: 0; border-radius: 50%; line-height: 1; font-size: 1.15rem; background: var(--color-card); }
#wm-view .sheet-head h3 { font-size: 1.25rem; overflow-wrap: anywhere; }
.sheet-form { display: grid; gap: 14px; }
.sheet-form > *, .sheet-sec > * { min-width: 0; }
.sheet-sec { display: grid; gap: 10px; border-top: 1px solid var(--color-border); padding-top: 14px; }
.comment-form { display: flex; gap: 8px; align-items: flex-end; }
.comment-form label { flex: 1; }
#wm-view ol.history { display: grid; gap: 10px; }
#wm-view ol.history li { border-bottom: 1px solid var(--color-border); padding-bottom: 8px; }
#wm-view ol.history li.comment .h-text { background: var(--color-surface); border-radius: 10px; padding: 8px 10px; margin-top: 4px; white-space: pre-wrap; overflow-wrap: anywhere; }
.h-text { overflow-wrap: anywhere; }
#wm-view ul.pick { display: grid; gap: 6px; }
.pick-t { font-weight: 700; overflow-wrap: anywhere; }
#wm-view ul.plain { display: grid; gap: 4px; }

.gdpr-out { white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--font-mono); font-size: 0.8rem; background: var(--color-background); border: 1px solid var(--color-border); border-radius: 10px; padding: 10px; max-height: 360px; overflow: auto; }

/* ---------- Push ---------- */
#wm-view .panel-form { display: grid; gap: 14px; max-width: 720px; }
#wm-view .panel-form:has(.price-cards) { max-width: none; }
#wm-view .field { display: grid; gap: 4px; }
#wm-view input.narrow { max-width: 6rem; text-transform: uppercase; }
.combo { position: relative; }
.combo ul[role="listbox"] { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px; list-style: none; background: var(--color-card); border: 1px solid var(--color-border); border-radius: 12px; max-height: 280px; overflow: auto; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); }
.combo ul[role="listbox"][hidden] { display: none; }
.combo li[role="option"] { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 8px; cursor: pointer; min-height: 44px; justify-content: center; }
.combo li[role="option"]:hover { background: var(--color-surface); }
.combo li[role="option"][aria-selected="true"] { background: var(--color-primary); color: var(--color-primary-foreground); }
.combo li[role="option"][aria-selected="true"] .o-detail { color: inherit; opacity: 0.85; }
#wm-view .chosen { margin-top: 4px; padding: 8px 12px; border-radius: 10px; background: var(--color-primary-soft); color: var(--color-primary-ink); font-weight: 600; }
#wm-view .combo-hint { margin-top: 4px; }

/* ---------- Feature-Flags ---------- */
.flag-group { margin: 0 0 16px; }
#wm-view .flag-group > summary { font-weight: 700; padding: 8px 0; min-height: 44px; display: flex; align-items: center; }
#wm-view .flag { background: var(--color-card); border: 1px solid var(--color-border); border-radius: 16px; padding: 14px 16px; margin: 0 0 10px; display: grid; gap: 8px; }
#wm-view .flag.dead { border-style: dashed; }
.flag-head { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.flag-title { flex: 1 1 200px; min-width: 0; }
#wm-view .flag-title h4 { font-size: 1rem; }
.flag-title code { color: var(--color-muted-foreground); }
.badges { display: flex; gap: 6px; flex-wrap: wrap; }
.flag-desc { margin: 0; }
.flag-dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; font-size: 0.875rem; }
.flag-dl dt { color: var(--color-muted-foreground); }
.flag-dl dd { overflow-wrap: anywhere; }
#wm-view button.switch { position: relative; width: 52px; min-width: 52px; height: 32px; min-height: 32px; padding: 0; border-radius: 999px; background: var(--color-surface); border: 2px solid var(--color-border); flex: none; }
#wm-view button.switch .knob { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--color-muted-foreground); }
#wm-view button.switch[aria-checked="true"] { background: var(--color-primary); border-color: var(--color-primary); }
#wm-view button.switch[aria-checked="true"] .knob { left: 23px; background: var(--color-primary-foreground); }
@media (prefers-reduced-motion: no-preference) { #wm-view button.switch .knob { transition: left 120ms ease-out; } }
.ai-switch { background: var(--color-card); border: 2px solid var(--color-primary); border-radius: 20px; padding: 18px 20px; display: grid; gap: 10px; }
.ai-switch.off { border-color: var(--color-destructive); }
.ai-switch .flag-head { align-items: flex-start; }
#wm-view .ai-switch h3 { font-size: 1.15rem; }

/* ---------- Preise ---------- */
.price-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
#wm-view .price-card { background: var(--color-card); display: grid; gap: 8px; align-content: start; padding: 14px 16px; }
#wm-view .price-card legend { font-weight: 700; color: var(--color-foreground); font-size: 1rem; }
.price-card .preview { font-weight: 700; }
.price-card .preview.bad, #wm-view .bad { color: var(--color-destructive); }

/* ---------- Audit ---------- */
#wm-view .audit-top { padding: 10px 18px; }
#wm-view .audit-top h3 { margin: 4px 0; font-size: 1rem; }
#wm-view .audit-top ol { margin: 0 0 8px; padding-left: 20px; list-style: decimal; }
#wm-view td details summary { cursor: pointer; }
#wm-view td pre.gdpr-out { max-height: 220px; }

/* ---------- Experimente ---------- */
#wm-view .exp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
#wm-view .exp { display: grid; gap: 10px; align-content: start; }
.exp-head { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; flex-wrap: wrap; }
.exp-bar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--color-surface); gap: 2px; }
.exp-bar > span { display: block; height: 100%; }
.exp-a { background: var(--color-muted-foreground); }
.exp-b { background: var(--color-primary); }
.exp-legend { display: flex; gap: 6px 18px; flex-wrap: wrap; font-size: 0.8125rem; }
.exp-legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; background: var(--color-muted-foreground); }
.exp-legend span.b::before { background: var(--color-primary); }
.exp-form { display: grid; gap: 12px; }

/* ---------- Eingesetzt in "Crews" (ausserhalb von #wm-view) ---------- */
.wm-passfilter { display: grid; gap: 4px; margin-top: 10px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em; color: var(--color-muted-foreground); }
.wm-passmsg { font-weight: 500; letter-spacing: 0; }
.wm-passbadge { display: inline-block; margin-top: 4px; padding: 1px 9px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; background: var(--color-surface); color: var(--color-muted-foreground); }
.wm-passbadge.admin { background: var(--color-primary-soft); color: var(--color-primary-ink); }
.wm-passbadge.paid { background: var(--color-surface); color: var(--color-success); border: 1px solid var(--color-success); }
.wm-passbadge.expired { background: var(--color-surface); color: var(--color-warning); border: 1px solid var(--color-warning); }
.wm-passbadge[hidden] { display: none; }
.wm-crewpass { background: var(--color-card); border: 1px solid var(--color-border); border-radius: 1.5rem; padding: 1.25rem 1.5rem; display: grid; gap: 0.75rem; font-size: 0.9rem; }
.wm-crewpass h4 { font-family: var(--font-display); font-size: 1.1rem; font-weight: 800; }
.wm-cp-head { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.wm-cp-head .wm-passbadge { margin-top: 0; }
.wm-cp-form { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.wm-cp-form label { display: grid; gap: 4px; font-size: 0.78rem; font-weight: 600; color: var(--color-muted-foreground); }
.wm-cp-form label input { width: auto; min-width: 160px; }
.wm-cp-msg { min-height: 1.2em; color: var(--color-destructive); }
.wm-cp-msg.ok { color: var(--color-success); }
.wm-cp-hist summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; color: var(--color-primary-ink); font-weight: 600; }
.wm-cp-list { list-style: none; padding: 0; display: grid; gap: 6px; margin-top: 6px; }
.wm-crewpass .wm-cp-line { color: var(--color-muted-foreground); }

/* ---------- Schmale Bildschirme ---------- */
@media (max-width: 900px) { .board.three { grid-template-columns: 1fr; } }
@media (max-width: 720px) {
  #wm-view h2 { font-size: 1.45rem; }
  #wm-view .grid2 { grid-template-columns: 1fr; }
  #wm-view label.grow { grid-column: auto; }
  .sheet-panel { padding: 16px 16px 40px; border-left: 0; }
  .sheet-head { top: -16px; margin: -16px -16px 0; padding: 14px 16px 10px; }
  .comment-form { flex-direction: column; align-items: stretch; }
  #wm-view .wish-table { min-width: 0; }
  #wm-view .wish-table thead { display: none; }
  #wm-view .wish-table, #wm-view .wish-table tbody, #wm-view .wish-table tr, #wm-view .wish-table td { display: block; }
  #wm-view .wish-table tr { padding: 12px 14px; border-bottom: 1px solid var(--color-border); }
  #wm-view .wish-table td { border: 0; padding: 2px 0; }
  #wm-view .wish-table td.wide { max-width: none; min-width: 0; }
  #wm-view .wish-table td[data-label]:not(.wide)::before { content: attr(data-label) ": "; color: var(--color-muted-foreground); font-size: 0.75rem; }
  #wm-view .wish-table td.sel { width: auto; padding-bottom: 4px; }
  .flag-dl { grid-template-columns: 1fr; }
  .flag-dl dd { margin-bottom: 6px; }
  .chart-tools { width: 100%; }
}
@media (max-width: 560px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kpi .v { font-size: 1.6rem; } }
@media (forced-colors: active) { .plot .line, .plot .bar, .meter-fill { forced-color-adjust: none; } }

/* ---------- Dokumentation ---------- */
.docs-layout { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 28px; align-items: start; }
.docs-side { position: sticky; top: 12px; display: grid; gap: 12px; max-height: calc(100dvh - 24px); overflow-y: auto; padding-right: 4px; }
.docs-main { min-width: 0; }
#wm-view .docs-toggle { display: none; justify-content: center; }
#wm-view .docs-nav details > summary { font-weight: 700; min-height: 36px; display: flex; align-items: center; }
#wm-view .docs-links { list-style: none; padding: 0; display: grid; gap: 1px; margin-bottom: 8px; }
#wm-view .docs-links a { display: block; padding: 6px 10px; border-radius: 10px; text-decoration: none; color: var(--color-foreground); overflow-wrap: anywhere; font-size: 0.9rem; }
#wm-view .docs-links a:hover { background: var(--color-surface); }
#wm-view .docs-links a[aria-current="page"] { background: var(--color-primary-soft); color: var(--color-primary-ink); font-weight: 700; }
#wm-view .docs-page-head { display: grid; gap: 4px; margin-bottom: 14px; }
#wm-view .docs-page-head h3 { font-size: 1.7rem; line-height: 1.2; font-weight: 800; overflow-wrap: anywhere; }
#wm-view .docs-page-head h3:focus { outline: none; }
#wm-view .docs-toc { background: var(--color-card); border: 1px solid var(--color-border); border-radius: 16px; padding: 12px 16px; margin-bottom: 18px; max-width: 78ch; }
#wm-view .docs-toc-t { font-weight: 700; margin-bottom: 4px; }
#wm-view .docs-toc-list { list-style: none; padding: 0; display: grid; gap: 2px; }
#wm-view .docs-toc-list li.lvl3 { padding-left: 16px; }
#wm-view .docs-toc-list a { text-decoration: none; display: inline-block; padding: 3px 0; overflow-wrap: anywhere; }
#wm-view .docs-toc-list a:hover { text-decoration: underline; }
#wm-view .docs-results { list-style: none; padding: 0; display: grid; gap: 10px; max-width: 78ch; }
#wm-view .docs-result { background: var(--color-card); border: 1px solid var(--color-border); border-radius: 16px; padding: 12px 16px; display: grid; gap: 6px; justify-items: start; }
#wm-view .docs-result-t { font-weight: 700; overflow-wrap: anywhere; }
#wm-view .docs-snippet { overflow-wrap: anywhere; color: var(--color-muted-foreground); font-size: 0.875rem; }
#wm-view mark { background: var(--color-primary-soft); color: var(--color-primary-ink); font-weight: 700; padding: 0 3px; border-radius: 4px; }
#wm-view .docs-hist { margin-top: 28px; border-top: 1px solid var(--color-border); padding-top: 12px; max-width: 78ch; }
#wm-view .docs-hist > summary { font-weight: 700; min-height: 36px; display: flex; align-items: center; }
#wm-view .docs-hist ul.plain { margin-top: 6px; }
#wm-view .docs-diff { white-space: pre; overflow: auto; max-height: 420px; font-family: var(--font-mono); font-size: 0.8rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; padding: 10px 12px; }
#wm-view .docs-diff .dl { display: block; }
#wm-view .docs-diff .dl.add { background: color-mix(in srgb, var(--color-success) 16%, transparent); }
#wm-view .docs-diff .dl.del { background: color-mix(in srgb, var(--color-destructive) 14%, transparent); }
#wm-view .docs-diff .dl.gap, #wm-view .docs-diff .dl.ctx { color: var(--color-muted-foreground); }

/* Gerenderter Markdown-Text */
#wm-view .md { max-width: 78ch; overflow-wrap: anywhere; font-size: 0.97rem; line-height: 1.65; }
#wm-view .md > * + * { margin-top: 0.9em; }
#wm-view .md h4, #wm-view .md h5, #wm-view .md h6, #wm-view .md h3 { font-family: var(--font-display); font-weight: 800; line-height: 1.25; margin-top: 1.6em; scroll-margin-top: 16px; }
#wm-view .md h3 { font-size: 1.45rem; }
#wm-view .md h4 { font-size: 1.2rem; }
#wm-view .md h5 { font-size: 1.05rem; }
#wm-view .md h6 { font-size: 0.95rem; color: var(--color-muted-foreground); }
#wm-view .md h3:focus, #wm-view .md h4:focus, #wm-view .md h5:focus, #wm-view .md h6:focus { outline: none; }
#wm-view .md a.md-anchor { margin-left: 8px; text-decoration: none; color: var(--color-muted-foreground); font-weight: 600; opacity: 0; }
#wm-view .md .md-h:hover a.md-anchor, #wm-view .md a.md-anchor:focus-visible { opacity: 1; }
#wm-view .md ul.md-list { list-style: disc; padding-left: 1.5em; }
#wm-view .md ol.md-list { list-style: decimal; padding-left: 1.6em; }
#wm-view .md ul.md-list ul.md-list { list-style: circle; }
#wm-view .md li + li { margin-top: 0.3em; }
#wm-view .md li.task { list-style: none; display: flex; gap: 8px; align-items: flex-start; margin-left: -1.5em; }
#wm-view .md li.task input { margin-top: 0.35em; }
#wm-view .md li > .md-li > * + * { margin-top: 0.5em; }
#wm-view .md code { background: var(--color-surface); border-radius: 6px; padding: 1px 6px; font-size: 0.86em; }
#wm-view .md .md-code { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; overflow-x: auto; }
#wm-view .md .md-code pre { white-space: pre; padding: 12px 16px; font-size: 0.84rem; line-height: 1.5; }
#wm-view .md .md-code code { background: none; padding: 0; border-radius: 0; font-size: inherit; }
#wm-view .md blockquote { background: var(--color-surface); border-radius: 12px; padding: 8px 16px; color: var(--color-muted-foreground); }
#wm-view .md blockquote > * + * { margin-top: 0.5em; }
#wm-view .md hr { border: 0; border-top: 1px solid var(--color-border); margin: 1.6em 0; }
#wm-view .md .md-table { overflow-x: auto; border: 1px solid var(--color-border); border-radius: 14px; max-width: 100%; }
#wm-view .md .md-table table { border-collapse: collapse; min-width: 100%; font-size: 0.9rem; line-height: 1.45; }
#wm-view .md th, #wm-view .md td { padding: 8px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-border); min-width: 90px; }
#wm-view .md th { background: var(--color-surface); font-weight: 700; white-space: nowrap; }
#wm-view .md tr:last-child td { border-bottom: 0; }
#wm-view .md .al-r { text-align: right; }
#wm-view .md .al-c { text-align: center; }
#wm-view .md a.md-ext::after { content: " \2197"; font-size: 0.85em; }
#wm-view .md .md-blocked, #wm-view .md .md-nolink { text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }
#wm-view .md .md-img { color: var(--color-muted-foreground); font-style: italic; }
#wm-view .md :is(.md-code, .md-table):focus-visible { outline: 2px solid var(--color-ring); outline-offset: 2px; }
@media (max-width: 900px) {
  .docs-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .docs-side { position: static; max-height: none; overflow: visible; }
  #wm-view .docs-toggle { display: inline-flex; }
  .docs-nav { display: none; }
  #wm-view .docs-toggle[aria-expanded="true"] ~ .docs-nav { display: block; }
  #wm-view .docs-page-head h3 { font-size: 1.4rem; }
}

/* ---------- Dokumentation: Bereiche, Editor (Migration 62) ---------- */
#wm-view .docs-group + .docs-group { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--color-border); }
#wm-view .docs-group-t { font-family: var(--font-display); font-size: 1rem; font-weight: 800; letter-spacing: 0.01em; }
#wm-view .docs-group-hint { margin: 2px 0 6px; }
#wm-view .docs-web-dot { color: var(--color-primary-ink); font-size: 0.8rem; }
#wm-view .docs-search { display: grid; gap: 6px; }
#wm-view .docs-actions { margin-top: 6px; }
#wm-view .callout.warn { background: var(--color-surface); color: var(--color-foreground); border-color: var(--color-warning); border-left-width: 4px; }
#wm-view .callout > * + * { margin-top: 8px; }
#wm-view .docs-editor { display: grid; gap: 12px; max-width: 1200px; }
#wm-view .docs-editor > * { min-width: 0; margin-top: 0; }
#wm-view .docs-ed-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
#wm-view .docs-ed-split[data-tab="write"] { grid-template-columns: minmax(0, 1fr); }
#wm-view .docs-ed-split[data-tab="write"] .docs-ed-prev, #wm-view .docs-ed-split[data-tab="preview"] .docs-ed-write { display: none; }
#wm-view .docs-ed-split[data-tab="preview"] { grid-template-columns: minmax(0, 1fr); }
#wm-view .docs-ed-write textarea { font-family: var(--font-mono); font-size: 0.86rem; line-height: 1.55; min-height: 420px; tab-size: 2; }
#wm-view .docs-ed-prev { border: 1px solid var(--color-border); border-radius: 14px; padding: 12px 16px; background: var(--color-card); max-height: 70vh; overflow: auto; }
#wm-view .docs-ed-prev .md { max-width: none; }
#wm-view .docs-ed-help > summary { font-weight: 600; min-height: 32px; display: flex; align-items: center; }
#wm-view .docs-trash-list { display: grid; gap: 10px; max-width: 78ch; }
#wm-view .docs-trash-item { background: var(--color-card); border: 1px solid var(--color-border); border-radius: 16px; padding: 12px 16px; display: grid; gap: 8px; }
#wm-view .legal-publish { display: grid; gap: 10px; }
#wm-view .legal-publish > * { margin-top: 0; }
#wm-view .legal-ph-list { display: flex; flex-wrap: wrap; gap: 6px; }
#wm-view .legal-ph-list li, #wm-view .md .gap-mark { background: color-mix(in srgb, var(--color-warning) 24%, transparent); color: var(--color-foreground); border: 1px solid var(--color-warning); padding: 0 6px; border-radius: 6px; font-weight: 600; }
#wm-view .legal-rev { display: grid; gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--color-border); }
@media (max-width: 900px) {
  #wm-view .docs-ed-split { grid-template-columns: minmax(0, 1fr); }
  #wm-view .docs-ed-write textarea { min-height: 300px; }
}

/* ---------- Sicherheit (Migration 66): Ansicht und Zweitfaktor-Schranke ---------- */
#wm-view .sec-dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 20px; margin-top: 10px; }
#wm-view .sec-dl dt { color: var(--color-muted-foreground); font-size: 0.875rem; }
#wm-view .sec-dl dd { margin: 0; font-weight: 600; }
#wm-view .sec-qr { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin: 12px 0; }
#wm-view .sec-qr img, .wm-sec-dialog .sec-qr img { background: #fff; padding: 8px; border-radius: 12px; border: 1px solid var(--color-border); }
#wm-view .sec-secret, .wm-sec-dialog .sec-secret { font-family: ui-monospace, monospace; letter-spacing: 0.08em; word-break: break-all; }
#wm-view .sec-code, .wm-sec-dialog .sec-code { display: grid; gap: 10px; max-width: 320px; margin-top: 10px; }
.wm-sec-overlay { position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: center; justify-content: center; padding: 16px; background: color-mix(in srgb, var(--brand-shadow, #000) 70%, transparent); }
.wm-sec-dialog { width: min(440px, 100%); max-height: 100%; overflow: auto; background: var(--color-card); color: var(--color-foreground); border: 1px solid var(--color-border); border-radius: 20px; padding: 24px; display: grid; gap: 12px; }
.wm-sec-dialog h2 { font-size: 1.25rem; font-weight: 700; }
.wm-sec-dialog label { display: grid; gap: 4px; font-size: 0.875rem; }
.wm-sec-dialog input { padding: 10px 12px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-background); color: inherit; font-size: 1.1rem; letter-spacing: 0.2em; }
.wm-sec-dialog .msg { min-height: 1.3em; color: var(--color-destructive); font-size: 0.875rem; }
.wm-sec-dialog button { padding: 10px 16px; border-radius: 12px; border: 1px solid var(--color-border); background: var(--color-surface); color: inherit; cursor: pointer; font-weight: 600; }
.wm-sec-dialog button.primary { background: var(--color-primary); color: var(--color-primary-foreground); border-color: transparent; }
.wm-sec-dialog button:disabled { opacity: 0.6; cursor: not-allowed; }
.wm-sec-dialog :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }