/* Small additions on top of dashboard.css for server-rendered pages. */

/* Categorical chart colors (Statistiken page, platform donut) - a validated colorblind-safe 4-slot
   palette, fixed order (never reassigned by rank), see dataviz skill for the CVD/contrast checks
   this order clears. Each platform keeps its slot regardless of date range or revenue rank. */
:root {
  --db-series-1: light-dark(#2a78d6, #3987e5);
  --db-series-2: light-dark(#eb6834, #d95926);
  --db-series-3: light-dark(#1baf7a, #199e70);
  --db-series-4: light-dark(#eda100, #c98500);
}

/* Chrome's UA stylesheet gives <form> a 1em bottom margin by default; dashboard.css
   doesn't reset it, so every plain <form> (e.g. the topbar logout button) sits lower
   than its siblings. Spacing is handled by the db- layout classes, not by form margins. */
form { margin: 0; }

.db-note.is-ok { border-left-color: var(--db-ok); }

/* Muted/small text for a table cell that has no primary line above it (a bare date or
   note column, say). db-table-sub is display:block and meant to sit under a sibling
   line inside a cell - putting it on the <td> itself breaks the cell's table layout
   and shifts the text down relative to the row. Use this instead for a whole-cell case. */
.db-table td.is-muted { color: var(--db-ink-3); font-size: 12.5px; }

/* A db-card-icon normally sits inside db-card-head, which already carries a bottom
   margin. Used as the leading element of a stat card (db-kpi) instead, it has no
   sibling spacing of its own - add it here so the label below doesn't sit flush against it. */
.db-kpi > .db-card-icon { margin-bottom: 14px; }

/* dashboard.css defines db-section-head as a baseline flex row, so a heading with a
   description right after it (h3 + p) renders as one line: "Title Description". Every
   use of it here is a heading stacked above its description, so lay it out as a column. */
.db-section-head { flex-direction: column; align-items: flex-start; gap: 3px; }

/* .db-inline's dashed hover underline is meant for inline-editable text, not for forms that
   just wrap an action button (Entfernen, Jetzt synchronisieren, Alle löschen, ...) - suppress it here. */
form.db-inline { display: inline; border-bottom: 0; }
form.db-inline:hover { border-bottom-color: transparent; }
form.db-inline + form.db-inline { margin-left: 6px; }

/* Hand-built history charts (see ChartRenderer.java) - each SVG carries its own <style> with the
   hc-* classes, this only sizes the wrapper, the hover tooltip and the two chart subsections. */
.hc-section + .hc-section { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--db-line); }
.hc-subhead { margin: 0 0 12px; font-size: 13px; font-weight: 600; color: var(--db-ink-2); }
.hc-wrap { width: 100%; position: relative; }
.hc-wrap svg { display: block; width: 100%; height: auto; }

/* Legend entries double as toggles - a plain button reset styled like the earlier static legend,
   with a dimmed .is-off state once its series is hidden from the chart above. */
.hc-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--db-line); }
.hc-legend-item { display: inline-flex; align-items: center; gap: 7px; border: 0; background: none; padding: 0; margin: 0;
    font: inherit; font-size: 13px; color: var(--db-ink-2); cursor: pointer; transition: opacity 160ms var(--db-ease); }
.hc-legend-item:hover { color: var(--db-ink); }
.hc-legend-item.is-off { opacity: 0.4; }
.hc-legend-item i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; flex: none; }

.hc-tooltip { position: absolute; top: 8px; z-index: 5; min-width: 200px; padding: 11px 14px; border: 1px solid var(--db-line); border-radius: 10px;
    background: var(--db-surface); box-shadow: var(--db-shadow-2); font-size: 12.5px; color: var(--db-ink-2); pointer-events: none; }
.hc-tooltip[hidden] { display: none; }
.hc-tooltip b { display: block; font-size: 13px; color: var(--db-ink); margin-bottom: 7px; font-family: var(--font-sofia), Arial, sans-serif; font-weight: 600; }
.hc-tooltip .row { display: flex; align-items: center; gap: 7px; padding: 2.5px 0; white-space: nowrap; }
.hc-tooltip .row i { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.hc-tooltip .row .val { margin-left: auto; padding-left: 14px; font-weight: 600; color: var(--db-ink); font-variant-numeric: tabular-nums; }

/* dashboard.css's .db-seg is a non-wrapping inline-flex of buttons - the chart picker has five quick
   options plus the custom-range toggle, so let it wrap onto a second line on narrow cards instead of
   overflowing. Buttons themselves already get their look (incl. .is-active) from dashboard.css. */
.db-seg { flex-wrap: wrap; }

/* Custom date-range popover, reusing dashboard.css's .db-pop (the notification/inbox dropdown chrome)
   for the floating panel and .db-btn-ghost for the trigger, so it stays 1:1 with the app's existing
   dropdown pattern instead of a one-off look. */
.hc-custom { position: relative; }
.hc-custom-pop { top: calc(100% + 8px); left: 0; right: auto; width: min(320px, calc(100vw - 32px)); }
.hc-custom-body { display: flex; flex-direction: column; gap: 12px; padding: 14px 15px 15px; }
.hc-custom-row { display: flex; gap: 10px; }
.hc-custom-field { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.hc-custom-field input { width: 100%; padding: 7px 10px; border: 1px solid var(--db-line); border-radius: 8px; background: var(--db-surface); color: var(--db-ink); font: inherit; font-size: 13px; }
.hc-custom-field input:focus { outline: none; border-color: var(--db-accent); box-shadow: 0 0 0 3px var(--db-accent-soft); }
.hc-custom-error { margin: 0; font-size: 12px; color: var(--db-bad); }
.hc-custom-submit { align-self: flex-start; }

.db-cell-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.db-cell-actions input,
.db-cell-actions select { padding: 6px 10px; border: 1px solid var(--db-line); border-radius: 8px; background: var(--db-surface); color: var(--db-ink); font: inherit; font-size: 13px; }
.db-cell-actions .db-btn-ghost { padding: 6px 12px; font-size: 12.5px; }

.db-btn.is-small,
.db-btn-ghost.is-small { padding: 6px 12px; font-size: 12.5px; }
.db-btn.is-danger { background: var(--db-bad-solid); color: #fff; }
.db-btn.is-danger:hover { background: var(--db-bad-hover); color: #fff; }
.db-btn.is-ok { background: var(--db-ok); color: #fff; }
.db-btn:disabled,
.db-btn-ghost:disabled { opacity: 0.45; cursor: not-allowed; }

.db-form { display: flex; flex-direction: column; gap: 16px; }
.db-form .db-field-row { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.db-form .db-actions { margin-top: 4px; }

.db-thumb { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; background: var(--db-sunken); border: 1px solid var(--db-line); }
.db-thumb.is-large { width: 72px; height: 72px; }

.db-avatar { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 999px; background: var(--db-accent-soft); color: var(--db-accent-text); font-size: 13px; font-weight: 700; }

.db-bank { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.db-bank div { padding: 12px 14px; border: 1px solid var(--db-line); border-radius: 12px; background: var(--db-sunken); }
.db-bank span { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--db-ink-3); }
.db-bank b { display: block; margin-top: 4px; font-family: var(--font-sofia), Arial, sans-serif; font-size: 15px; font-weight: 600; word-break: break-all; }
.db-bank b.is-accent { color: var(--db-accent-text); font-size: 18px; }
/* click-to-copy (cm.js): payment details and invoice numbers copy themselves on click */
[data-copy] { cursor: copy; }
[data-copy]:hover { text-decoration: underline dotted; text-decoration-color: var(--db-accent); }

.db-code { display: inline-block; padding: 6px 14px; border-radius: 10px; background: var(--db-dark); color: var(--db-on-dark); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 20px; letter-spacing: 0.2em; }

.db-msg .db-msg-img { max-width: 220px; border-radius: 12px; display: block; margin-bottom: 6px; }
.db-msg.is-us .db-msg-img { margin-left: auto; }
.db-chat-log.is-page { max-height: 62vh; }

/* Floating date pill between a day's worth of messages in a chat log (WhatsApp-style grouping) -
   .db-chat-log is already a flex column, so align-self centers it the same way .db-msg.is-us aligns right. */
.db-daydivider { align-self: center; margin: 4px 0 2px; padding: 4px 12px; border-radius: 999px; background: var(--db-sunken); color: var(--db-ink-3); font-size: 11.5px; font-weight: 600; }

/* db-thread (chat list row) ships without an avatar in the source design - this app's fans have no
   photo, so a small initials db-avatar (already used elsewhere) fits the WhatsApp-style row layout. */
.db-thread-top { gap: 9px; }
.db-thread-top .db-avatar { flex: none; }
.db-thread-top b { flex: none; }
.db-thread-top .db-thread-sub { margin-left: auto; }

/* Fans from the platform inbox mirror (fan_profiles): avatar image with an online/offline ring, static rows without a chat yet */
.db-fan-avatar { position: relative; overflow: visible; }
.db-fan-avatar img { width: 100%; height: 100%; border-radius: 999px; object-fit: cover; display: block; }
.db-fan-avatar.is-online::after, .db-fan-avatar.is-offline::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 999px; border: 2px solid var(--db-card, #fff); background: #13b07a; }
.db-fan-avatar.is-offline::after { background: #ab0000; }
/* Breathing room between the Alle/Ungelesen tabs (orange underline) and the first thread */
.db-chatgrid .db-threads { padding-top: 12px; }
.db-thread.is-static { cursor: default; }
.db-thread.is-static:hover { background: transparent; }
.db-thread-divider { padding: 10px 12px 4px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--db-ink-3); }
/* Moderator shell: brand + horizontal navigation in the top bar, no sidebar (dashboard.css provides body.is-top + .db-topnav) */
.db-topbar--nav .db-brand-top { display: flex; align-items: center; margin-right: 6px; }
.db-topbar--nav .db-brand-top .cm-logo { font-size: 19px; }
.db-topbar--nav .db-topnav { overflow-x: auto; scrollbar-width: none; }
.db-topbar--nav .db-topnav::-webkit-scrollbar { display: none; }
.db-topbar--nav .db-topnav .db-nav-item wa-icon { font-size: 16px; }
.db-topbar--nav .db-topnav .db-nav-count { margin-left: 4px; background: var(--db-accent); color: #fff; }
.db-topbar-user { display: inline-flex; align-items: center; gap: 9px; padding-right: 6px; }
.db-topbar-user .db-user-avatar { width: 28px; height: 28px; font-size: 12px; }
.db-topbar-user-name { font-size: 13.5px; font-weight: 600; color: var(--db-ink); white-space: nowrap; }
.db-preview { display: block; max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 720px) {
  .db-topbar--nav .db-topnav .db-nav-item span:not(.db-nav-count) { display: none; }
  .db-topbar-user-name { display: none; }
}

/* Moderator chat, laid out like the reference mask: fan | conversation | persona. Both side columns share one
   structure (head, five image tiles, "Profil Informationen", "Globale Informationen") and scroll on their own;
   the middle column pins the fan's latest message and the composer to the bottom. Colours are ours. */
.mc-page { height: 100%; min-height: 0; position: relative; }
.mc-panel { height: 100%; min-height: 0; }
/* Loading overlay: shown while the conversation is fetched and until the account's browser has opened the chat */
.mc-loading { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; background: var(--db-page); }
.mc-loading-box { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 28px 32px; border: 1px solid var(--db-line); border-radius: 16px; background: var(--db-surface); text-align: center; max-width: 360px; }
.mc-loading-box p { margin: 0; font-size: 14px; color: var(--db-ink-2); }
.mc-loading-box small { font-size: 12px; color: var(--db-ink-3); }
.mc-spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--db-line); border-top-color: var(--db-accent); animation: mc-spin 0.9s linear infinite; }
@keyframes mc-spin { to { transform: rotate(360deg); } }
.mc-empty { display: grid; place-items: center; height: 100%; }
.mc-empty .db-card { text-align: center; max-width: 420px; }
.mc-empty .db-card h3 { margin: 12px 0 6px; }
.mc-empty wa-icon, .mc-empty .ic { font-size: 30px; color: var(--db-accent); }
.mc-grid { display: grid; grid-template-columns: minmax(270px, 330px) minmax(0, 1fr) minmax(270px, 330px); gap: 14px; height: 100%; min-height: 0; }
.mc-side { display: flex; flex-direction: column; min-height: 0; }
.mc-side-scroll { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; display: flex; flex-direction: column; gap: 12px; }
.mc-side-scroll::-webkit-scrollbar, .mc-log::-webkit-scrollbar { display: none; }
.mc-head { display: flex; align-items: center; gap: 12px; padding: 4px 2px 0; }
.mc-head-photo { flex: none; width: 54px; height: 54px; border-radius: 10px; overflow: hidden; background: var(--db-sunken); border: 1px solid var(--db-line); display: grid; place-items: center; font-weight: 700; font-size: 15px; color: var(--db-ink-3); text-decoration: none; }
.mc-head-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mc-head-text { min-width: 0; }
.mc-head-text h3 { margin: 0; font-size: 16px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mc-head-text h3 .mc-age { font-weight: 500; color: var(--db-ink-2); }
.mc-head-text h3 wa-icon, .mc-head-text h3 .ic { font-size: 13px; color: var(--db-ink-3); }
.mc-head-text p { margin: 3px 0 0; font-size: 12.5px; color: var(--db-ink-2); display: flex; align-items: center; gap: 6px; }
.mc-head-text p wa-icon, .mc-head-text p .ic { font-size: 11px; color: var(--db-ink-3); }
.mc-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--db-ink-3); flex: none; }
.mc-dot.is-online { background: #13b07a; }
.mc-dot.is-offline { background: #ab0000; }
.mc-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; position: relative; }
.mc-tile { display: block; aspect-ratio: 1; border-radius: 9px; overflow: hidden; border: 1px solid var(--db-line); background: var(--db-sunken); }
.mc-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mc-tile.is-empty { border-style: dashed; background: transparent; }
.mc-strip-more { position: absolute; right: 4px; bottom: 4px; padding: 1px 6px; border-radius: 999px; background: rgba(0, 0, 0, 0.65); color: #fff; font-size: 11px; font-weight: 700; pointer-events: none; }
.db-card.mc-info { padding: 14px 16px; }
.mc-info-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.mc-info-head h4 { margin: 0; font-size: 14.5px; font-weight: 700; }
.mc-info-head .mc-info-ic { margin-left: auto; font-size: 13px; color: var(--db-ink-3); }
.mc-info-head .mc-info-ic.is-ok { color: var(--db-accent); }
.mc-kv { margin: 0; }
.mc-kv > div { display: flex; align-items: baseline; gap: 12px; padding: 6px 0; font-size: 13.5px; }
.mc-kv > div.is-gap { margin-top: 12px; }
.mc-kv dt { flex: 0 0 108px; color: var(--db-ink-3); }
.mc-kv dd { margin: 0; flex: 1; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.mc-kv.is-facts dd { text-align: right; }
.mc-kv dd.is-empty { color: var(--db-ink-3); font-weight: 500; }
.mc-fact-value { display: inline-block; max-width: 100%; padding: 2px 6px; margin: -2px -6px; border: 0; border-radius: 7px; background: none; color: inherit; font: inherit; font-weight: 600; text-align: right; cursor: text; overflow-wrap: anywhere; }
.mc-fact-value:hover { background: var(--db-sunken); }
.mc-fact-value.is-empty { color: var(--db-ink-3); font-weight: 500; }
.mc-fact-input { width: 100%; padding: 3px 8px; border: 1px solid var(--db-accent); border-radius: 7px; background: var(--db-surface); color: var(--db-ink); font: inherit; font-size: 13.5px; text-align: right; }
.mc-info-text { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--db-ink-2); }
.mc-taboos { margin-top: 10px; }
.mc-notes { display: block; margin-top: 12px; }
.mc-notes span { display: block; font-size: 12px; color: var(--db-ink-3); margin-bottom: 6px; }
.mc-notes textarea { width: 100%; resize: vertical; padding: 8px 10px; border: 1px solid var(--db-line); border-radius: 10px; background: var(--db-surface); color: var(--db-ink); font: inherit; font-size: 13px; }
.mc-counters { flex: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding-top: 10px; }
.mc-counters span { display: flex; justify-content: center; align-items: center; gap: 8px; padding: 10px 6px; border: 1px solid var(--db-line); border-radius: 10px; background: var(--db-surface); font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--db-ink-2); }
.mc-counters b { font-size: 14px; color: var(--db-ink); }
.mc-details { margin-top: 10px; border-top: 1px solid var(--db-line); padding-top: 8px; }
.mc-details summary { cursor: pointer; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--db-ink-3); }
.mc-details[open] summary { margin-bottom: 6px; }
.mc-details .db-pairs { margin: 0; }
.mc-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; margin-top: 8px; }
.mc-thumb { position: relative; display: block; aspect-ratio: 1; border-radius: 9px; overflow: hidden; background: var(--db-sunken); border: 1px solid var(--db-line); }
.mc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mc-thumb-tag { position: absolute; left: 5px; bottom: 5px; padding: 1px 6px; border-radius: 999px; background: rgba(0, 0, 0, 0.62); color: #fff; font-size: 10px; font-weight: 600; }
.mc-fsk { margin-top: 12px; }
.mc-fsk-head { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; }
.mc-fsk-head .db-table-sub { white-space: normal; }

/* middle column */
.db-card.mc-chat { display: flex; flex-direction: column; min-height: 0; height: 100%; padding: 0; overflow: hidden; }
.mc-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--db-line); font-size: 13.5px; color: var(--db-ink-2); }
.mc-bar b, .mc-bar-right { font-weight: 700; color: var(--db-ink); }
.mc-clock { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--db-ink); }
.mc-meta { display: flex; align-items: center; gap: 18px; padding: 8px 16px; border-bottom: 1px solid var(--db-line); font-size: 12.5px; color: var(--db-ink-2); flex-wrap: wrap; }
.mc-meta > span { display: inline-flex; align-items: center; gap: 6px; }
.mc-meta wa-icon, .mc-meta .ic { font-size: 12px; color: var(--db-ink-3); }
.mc-meta .mc-meta-right { margin-left: auto; }
.mc-meta .mc-meta-right b { color: var(--db-ink); }
.mc-iconbtn { display: inline-grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--db-line); border-radius: 7px; background: var(--db-surface); color: var(--db-ink-2); cursor: pointer; }
.mc-iconbtn:hover { color: var(--db-accent); border-color: var(--db-accent); }
.mc-lock { margin: 12px 16px 0; }
.mc-proactive { margin: 12px 16px 0; border-left-color: var(--db-accent); }
.mc-log { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; scrollbar-width: none; }
.mc-msg { max-width: 70%; border: 1px solid var(--db-line); border-radius: 12px; background: var(--db-sunken); padding: 10px 12px; }
.mc-msg.is-us { align-self: flex-end; }
.mc-msg.is-fan { align-self: flex-start; }
.mc-msg.is-external { border-style: dashed; }
.mc-msg.is-failed { border-color: var(--db-bad); }
.mc-msg header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; margin-bottom: 8px; }
.mc-msg header b { font-size: 13px; color: var(--db-ink); }
.mc-msg header time { margin-left: auto; color: var(--db-ink-3); font-variant-numeric: tabular-nums; }
.mc-tag { padding: 1px 7px; border-radius: 999px; background: var(--db-surface); border: 1px solid var(--db-line); font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--db-ink-2); }
.mc-tag.is-warn { color: var(--db-accent); border-color: var(--db-accent); }
.mc-tag.is-bad { color: var(--db-bad); border-color: var(--db-bad); }
.mc-msg-img { display: block; max-width: 240px; max-height: 260px; border-radius: 8px; margin-bottom: 8px; }
.mc-msg p { margin: 0; font-size: 14px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.mc-msg footer { margin-top: 6px; font-size: 11.5px; color: var(--db-ink-3); }
/* Report button in the card header: quiet until hovered */
.mc-report { border: 0; background: none; padding: 2px 4px; margin-left: 4px; line-height: 0; color: var(--db-ink-3); cursor: pointer; opacity: 0; transition: opacity 120ms var(--db-ease), color 120ms var(--db-ease); }
.mc-msg:hover .mc-report, .mc-report:focus-visible { opacity: 1; }
.mc-report:hover { color: var(--db-bad); }
.mc-report wa-icon, .mc-report .ic { font-size: 12px; }
.mc-report-quote, .rp-quote { margin: 10px 0 14px; padding: 8px 12px; border-left: 3px solid var(--db-accent); background: var(--db-sunken); border-radius: 8px; font-size: 13px; color: var(--db-ink-2); white-space: pre-wrap; }
/* Admin review of a report: the moderator's chat 1:1 inside the drawer; reported message + moderator name in red */
.mc-review { height: 76vh; min-height: 480px; }
.mc-review .mc-panel { height: 100%; }
.mc-mod { font-size: 12px; color: var(--db-ink-3); }
.mc-mod.is-bad { color: var(--db-bad); font-weight: 700; }
.mc-msg.is-flagged { border-color: var(--db-bad); border-style: solid; box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18); }
.mc-msg.is-flagged header b { color: var(--db-bad); }
.mc-msg.is-flagged .mc-tag.is-warn { color: var(--db-bad); border-color: var(--db-bad); }
/* Admin chat: a reported message is marked, the one opened from a report is highlighted */
.db-msg.is-reported .db-msg-text { box-shadow: 0 0 0 2px var(--db-bad); }
.db-msg.is-flagged .db-msg-text { box-shadow: 0 0 0 3px var(--db-bad), 0 0 0 7px var(--db-accent-soft); }
.rp-message { max-width: 320px; }
.rp-reason { max-width: 260px; white-space: pre-wrap; }
.db-table tr.is-muted td { opacity: 0.6; }
.mc-pinned { flex: none; margin: 0 16px 12px; }
.mc-pinned .mc-msg { max-width: none; background: var(--db-surface); border-color: var(--db-accent); box-shadow: 0 0 0 3px var(--db-accent-soft); }
.mc-composer { flex: none; position: relative; border-top: 1px solid var(--db-line); padding: 12px 16px 14px; }
.mc-composer textarea { width: 100%; min-height: 60px; resize: vertical; padding: 10px 12px; border: 1px solid var(--db-line); border-radius: 12px; background: var(--db-surface); color: var(--db-ink); font: inherit; font-size: 14px; }
.mc-composer textarea:focus { outline: none; border-color: var(--db-accent); box-shadow: 0 0 0 3px var(--db-accent-soft); }
.mc-composer textarea:disabled { opacity: 0.6; cursor: not-allowed; }
.mc-composer-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; position: relative; }
.mc-tools.db-seg button { display: inline-flex; align-items: center; gap: 6px; }
.mc-tools.db-seg button wa-icon, .mc-tools.db-seg button .ic { font-size: 13px; }
.mc-attach { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 8px; padding: 4px 8px 4px 4px; border: 1px solid var(--db-accent); border-radius: 999px; background: var(--db-accent-soft); font-size: 12.5px; color: var(--db-ink); }
.mc-attach img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; background: var(--db-sunken); }
.mc-attach button { border: 0; background: none; color: var(--db-ink-3); cursor: pointer; line-height: 0; padding: 2px; }
.mc-attach button:hover { color: var(--db-bad); }
.mc-emoji { position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 6; display: grid; grid-template-columns: repeat(8, 34px); gap: 2px; padding: 8px; border: 1px solid var(--db-line); border-radius: 12px; background: var(--db-surface); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25); }
.mc-emoji button { width: 34px; height: 34px; border: 0; border-radius: 8px; background: none; font-size: 20px; line-height: 1; cursor: pointer; }
.mc-emoji button:hover { background: var(--db-sunken); }
.mc-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; margin-top: 8px; }
.mc-pick { position: relative; display: block; aspect-ratio: 1; padding: 0; border: 1px solid var(--db-line); border-radius: 10px; overflow: hidden; background: var(--db-sunken); cursor: pointer; }
.mc-pick img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mc-pick:hover { border-color: var(--db-accent); box-shadow: 0 0 0 3px var(--db-accent-soft); }
.mc-pick.is-sent { cursor: not-allowed; }
.mc-pick.is-sent:hover { border-color: var(--db-line); box-shadow: none; }
.mc-pick.is-sent img { filter: grayscale(1); opacity: 0.4; }
.mc-pick-sent { position: absolute; left: 0; right: 0; bottom: 0; padding: 5px 4px; background: rgba(0, 0, 0, 0.72); color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; text-align: center; }
.mc-text + .mc-text { margin-top: 12px; border-top: 1px solid var(--db-line); padding-top: 10px; }
.mc-text h4 { margin: 0 0 4px; font-size: 13.5px; font-weight: 700; }
.mc-text p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--db-ink-2); white-space: pre-wrap; }
@media (max-width: 1100px) {
  /* Phones and tablets: the chat comes first, the two info columns stack below it and the page scrolls normally */
  body.is-chat .db-shell { height: auto; }
  body.is-chat .db-main { min-height: 0; }
  body.is-chat .db-content { overflow: visible; }
  .mc-page, .mc-panel { height: auto; }
  .mc-loading { position: fixed; }
  .mc-grid { grid-template-columns: minmax(0, 1fr); height: auto; }
  .mc-side { min-height: 0; }
  .mc-side-scroll { overflow: visible; padding-right: 0; }
  .db-card.mc-chat { order: -1; height: 78vh; min-height: 480px; }
  .mc-msg { max-width: 88%; }
  .mc-bar { flex-wrap: wrap; row-gap: 4px; }
  .mc-meta { gap: 12px; }
}
@media (max-width: 640px) {
  .mc-grid { gap: 10px; }
  .mc-composer-row { flex-wrap: wrap; }
  .mc-composer-row .db-btn { margin-left: auto; }
  .mc-emoji { grid-template-columns: repeat(6, 34px); }
  .mc-counters { grid-template-columns: repeat(3, 1fr); }
  .mc-counters span { padding: 8px 4px; font-size: 10.5px; }
  .mc-kv dt { flex-basis: 96px; }
}

.db-seg .db-seg-link { display: inline-block; padding: 6px 14px; border-radius: 999px; color: var(--db-ink-2); text-decoration: none; font-size: 13.5px; }
.db-seg .db-seg-link.is-active { background: var(--db-dark); color: var(--db-on-dark); }
.st-statement-text { max-width: 420px; white-space: normal; }
.is-nowrap { white-space: nowrap; }
/* Leaderboard of the billing cycle (moderator overview, admin dashboard) */
.mr-board tr.is-current td { background: var(--db-accent-soft); font-weight: 600; }
.mr-board td { white-space: nowrap; }

/* Moderator statistics: score card, criteria bars, section headings, team comparison notes */
.st-score-row { display: flex; align-items: center; gap: 22px; }
.st-score-text { flex: 1; min-width: 0; }
.st-score-text .db-metric-note { margin-top: 4px; }
.st-score-info { flex: none; }
.st-score { display: flex; align-items: baseline; gap: 6px; }
.st-buckets svg { max-height: 340px; }
.st-score-value { font-size: 56px; font-weight: 800; line-height: 1; letter-spacing: -1.5px; }
.st-score.is-ok .st-score-value { color: var(--db-ok); }
.st-score.is-warn .st-score-value { color: var(--db-warn-line, #c27c0e); }
.st-score.is-bad .st-score-value { color: var(--db-bad); }
.st-score.is-empty .st-score-value { color: var(--db-ink-3); }
.st-score-max { font-size: 15px; color: var(--db-ink-3); font-weight: 600; }
.st-section { margin: 26px 0 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--db-ink-3); }
.st-team { color: var(--db-ink-3); opacity: 0.85; }
.st-bar { display: inline-block; vertical-align: middle; width: calc(100% - 44px); height: 8px; border-radius: 999px; background: var(--db-sunken); overflow: hidden; }
.st-bar i { display: block; height: 100%; border-radius: 999px; background: var(--db-accent); }
.st-bar.is-ok i { background: var(--db-ok); }
.st-bar.is-warn i { background: var(--db-warn-line, #c27c0e); }
.st-bar.is-bad i { background: var(--db-bad); }
.st-bar-val { display: inline-block; width: 36px; margin-left: 8px; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.st-crit .db-table-sub { white-space: normal; max-width: 420px; }

/* Image lightbox for chat attachments (opened via [data-lightbox], see cm.js) */
.db-lightbox { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(10, 10, 10, 0.82); }
.db-lightbox img { max-width: min(96vw, 1400px); max-height: 92vh; border-radius: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); object-fit: contain; }
.db-lightbox-close { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.14); color: #fff; font-size: 22px; cursor: pointer; }
.db-lightbox-close:hover { background: rgba(255, 255, 255, 0.26); }
.db-lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 64px; padding: 0; border: 0; border-radius: 14px; background: rgba(255, 255, 255, 0.14); color: #fff; cursor: pointer; display: grid; place-items: center; }
.db-lightbox-nav svg { width: 26px; height: 26px; display: block; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.db-lightbox-nav.is-prev { left: 18px; }
.db-lightbox-nav.is-next { right: 18px; }
.db-lightbox-nav:hover { background: rgba(255, 255, 255, 0.26); }
.db-lightbox-count { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); padding: 4px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); color: #fff; font-size: 13px; font-variant-numeric: tabular-nums; }
.db-lightbox-count:empty { display: none; }

/* Messages that are "ours" on the platform but were not sent through ChatMate (imported history) */
/* The dashed marker sits on the rounded bubble (and image), not on the rectangular row container */
.db-msg.is-external .db-msg-text { box-shadow: inset 0 0 0 1px transparent; border: 1px dashed #d9a441; }
.db-msg.is-external .db-msg-img { border: 1px dashed #d9a441; }
.db-msg.is-external .db-msg-meta { color: #b8860b; font-weight: 600; letter-spacing: 0.02em; }
.db-fanline { display: inline-flex; align-items: center; gap: 10px; }
.db-fanline .db-avatar { width: 32px; height: 32px; font-size: 12px; }

/* "Gespräche" runs in the app shell's full-height chat mode (body.is-chat, see layout.html) instead
   of the usual bounded-height dashboard cards, so the thread list and chat log fill the window like
   a real chat app rather than sitting in a short card with empty space below it. */
.db-view.is-full { display: flex; flex-direction: column; min-height: 0; }
.db-view.is-full > .db-page-head { flex: none; }
.db-view.is-full .db-chatgrid { flex: 1; min-height: 0; }
.db-view.is-full .db-chatgrid > section { height: 100%; min-height: 0; display: flex; flex-direction: column; }
.db-view.is-full .db-threads { flex: 1; max-height: none; }
.db-view.is-full .db-talkcard #chat-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.db-view.is-full .db-talkcard .db-talk-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.db-view.is-full .db-talkcard .db-empty { flex: 1; }
.db-view.is-full .db-talkcard .db-chat-log { flex: 1; min-height: 0; max-height: none; }

/* When there are no conversations at all, the page is just a plain empty-state box, not the
   two-pane chat view above - fall back to the normal page padding so the gap under the header
   matches Bilder/Plattformen instead of the chat view's tighter padding. */
body.is-chat .db-content:has(> .db-view.is-full > .db-empty) {
  padding: clamp(22px, 3vw, 38px);
  overflow: visible;
}

.db-composer { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1px solid var(--db-line); }
.db-composer textarea { width: 100%; min-height: 84px; padding: 12px 14px; border: 1px solid var(--db-line); border-radius: 14px; background: var(--db-surface); color: var(--db-ink); font: inherit; font-size: 14px; resize: vertical; }
.db-composer textarea:focus { outline: none; border-color: var(--db-accent); box-shadow: 0 0 0 3px var(--db-accent-soft); }
.db-composer-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.db-composer-row .db-btn { margin-left: auto; }

.db-pickgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; max-height: 280px; overflow-y: auto; padding: 2px; }
.db-pickgrid label { position: relative; display: block; border: 2px solid transparent; border-radius: 12px; overflow: hidden; cursor: pointer; }
.db-pickgrid label:has(input:checked) { border-color: var(--db-accent); }
.db-pickgrid input { position: absolute; opacity: 0; }
.db-pickgrid img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.db-pickgrid em { position: absolute; left: 4px; right: 4px; bottom: 4px; padding: 2px 6px; border-radius: 6px; background: var(--db-overlay); color: #fff; font-style: normal; font-size: 10.5px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.db-kpi .db-metric-value.is-warn { color: var(--db-warn); }
.db-kpi .db-metric-value.is-bad { color: var(--db-bad); }
.db-kpi .db-metric-value.is-ok { color: var(--db-ok); }

.db-timeline { display: flex; flex-direction: column; }
.db-timeline-item { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; padding: 10px 0; border-top: 1px solid var(--db-line); font-size: 13.5px; }
.db-timeline-item:first-child { border-top: 0; }
.db-timeline-item time { color: var(--db-ink-3); font-variant-numeric: tabular-nums; }
.db-timeline-item b { font-weight: 600; }
.db-timeline-item span { display: block; color: var(--db-ink-2); }

.db-progress { height: 8px; border-radius: 999px; background: var(--db-sunken); border: 1px solid var(--db-line); overflow: hidden; }
.db-progress > i { display: block; height: 100%; border-radius: 999px; background: var(--db-accent); }

.db-auth { min-height: 100vh; display: grid; place-items: center; padding: clamp(18px, 4vw, 40px); }
.db-auth-card { width: min(1040px, 100%); }
.db-auth-card .db-brand { justify-content: flex-start; margin-bottom: 18px; }
.db-auth-foot { margin-top: 18px; text-align: center; font-size: 13px; color: var(--db-ink-3); }

@media (max-width: 700px) {
  .db-timeline-item { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .db-cell-actions { flex-direction: column; align-items: stretch; }
}

/* Gallery upload wizard (see gallery.js) - the drawer/steps/select chrome around it all comes from
   dashboard.css already; only the drag & drop zone, file rows and spinner are new, built from the
   same tokens (accent, sunken, line, radius, ease) since nothing like them exists in the source design. */
.gw-steps { margin-bottom: 20px; }

.gw-drop {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    padding: clamp(26px, 4vw, 42px) 20px;
    border: 2px dashed var(--db-line-2);
    border-radius: var(--db-radius);
    background: var(--db-sunken);
    color: var(--db-ink-3);
    text-align: center;
    cursor: pointer;
    transition: border-color 160ms var(--db-ease), background-color 160ms var(--db-ease), transform 160ms var(--db-ease);
}
.gw-drop:hover { border-color: var(--db-accent); color: var(--db-ink-2); }
.gw-drop.is-drag { border-color: var(--db-accent); background: var(--db-accent-soft); color: var(--db-accent-text); transform: scale(1.01); }
.gw-drop.is-bad { border-color: var(--db-bad); }
.gw-drop wa-icon { font-size: 28px; color: var(--db-accent); }
.gw-drop b { color: var(--db-ink); font-size: 14.5px; font-weight: 600; }
.gw-drop span { font-size: 12.5px; }
.gw-drop input[type="file"] { display: none; }

.gw-files { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.gw-file { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border: 1px solid var(--db-line); border-radius: 12px; background: var(--db-surface); animation: db-fade 200ms var(--db-ease); }
.gw-file-thumb { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; flex: none; background: var(--db-sunken); }
.gw-file-thumb.is-icon { display: grid; place-items: center; color: var(--db-accent); background: var(--db-accent-soft); }
.gw-file-thumb.is-icon wa-icon { font-size: 18px; }
.gw-file-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.gw-file-name { font-size: 13px; color: var(--db-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gw-file-size { font-size: 11.5px; color: var(--db-ink-3); }
.gw-file .db-progress { height: 5px; }
.gw-file-status { flex: none; width: 22px; height: 22px; display: grid; place-items: center; }
.gw-file-status wa-icon { font-size: 16px; }
.gw-file-remove { flex: none; border: 0; background: none; color: var(--db-ink-3); cursor: pointer; padding: 4px; line-height: 0; }
.gw-file-remove:hover { color: var(--db-bad); }
.gw-file.is-done .db-progress { display: none; }
.gw-file.is-error { box-shadow: inset 0 0 0 1px var(--db-bad); }
.gw-file.is-error .gw-file-name { color: var(--db-bad); }

@keyframes gw-spin { to { transform: rotate(360deg); } }
.gw-spinner { width: 16px; height: 16px; border: 2px solid var(--db-line); border-top-color: var(--db-accent); border-radius: 50%; animation: gw-spin 700ms linear infinite; }
@media (prefers-reduced-motion: reduce) { .gw-spinner { animation-duration: 1400ms; } }

@keyframes gw-pop { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.gw-file-status wa-icon.is-ok { color: var(--db-ok); animation: gw-pop 220ms var(--db-ease); }
.gw-file-status wa-icon.is-bad { color: var(--db-bad); animation: gw-pop 220ms var(--db-ease); }

.gw-summary { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 20px 0 6px; text-align: center; }
.gw-summary-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 999px; background: var(--db-ok-soft); color: var(--db-ok); animation: gw-pop 260ms var(--db-ease); }
.gw-summary-icon wa-icon { font-size: 26px; }
.gw-summary h4 { font-size: 16px; }
.gw-summary p { font-size: 13.5px; color: var(--db-ink-3); }

.gw-body { animation: db-fade 180ms var(--db-ease); }

/* Plattform-Konto → "Aktionen"-Drawer: eine Zeile je Aktion (Titel + Erklärung links, Button rechts) */
.pa-actions { margin-top: 14px; border-top: 1px solid var(--db-line); }
.pa-action { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--db-line); }
.pa-action-text b { display: block; font-size: 14px; font-weight: 600; color: var(--db-ink); }
.pa-action-text span { display: block; font-size: 13px; color: var(--db-ink-3); margin-top: 2px; line-height: 1.45; }
.pa-action form { flex: none; }
@media (max-width: 560px) { .pa-action { flex-direction: column; align-items: stretch; } }

/* Konto-Karte: Hinweis "Anmeldung nötig" / "Zugangsdaten abgelehnt" - Titel, Text und Button untereinander */
.pa-login-note { margin-top: 14px; align-items: flex-start; }
.pa-login-note-body { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.pa-login-note-body b { font-size: 14px; }
.pa-login-note-body em { font-style: italic; color: var(--db-ink-2); }
.pa-login-note-body span { line-height: 1.5; }
.pa-login-note-body form { margin-top: 4px; }

/* Zugangsdaten-Dialog: Passwortfeld mit Auge-Button zum Anzeigen */
.pa-pw { position: relative; display: block; }
.pa-pw input { width: 100%; padding-right: 44px; box-sizing: border-box; }
.pa-pw-eye {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  border: 0; background: transparent; color: var(--db-ink-3); cursor: pointer; padding: 6px 8px; border-radius: 8px; font-size: 15px; line-height: 1;
}
.pa-pw-eye:hover { color: var(--db-ink); background: var(--db-sunken); }

/* Legitimation wizard (customer/verification_wizard.html, see verification_wizard.js) - Video-Ident and
   Ausweis/Reisepass are handled by Stripe Identity's own hosted flow; only the Steuernachweis is still
   captured here through getUserMedia/canvas instead of a file picker. */
.apply-form-inner > [data-wizard-root] { margin-top: 22px; }

/* Animated checklist (intro "what we need" list and the final "Übersicht" review list share this) -
   each row fades/slides in with a short stagger so the list reads as a guided sequence, not a wall of
   text; the leading circle carries the step number and turns into a checkmark once uploaded. */
.vw-checklist { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 20px; }
.vw-check-item {
    display: flex; align-items: center; gap: 14px; padding: 13px 14px; border: 1px solid var(--db-line);
    border-radius: 14px; background: var(--db-surface); opacity: 0; animation: vw-item-in 380ms var(--db-ease) forwards;
}
@keyframes vw-item-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .vw-check-item { animation: none; opacity: 1; } }

.vw-check-circle {
    flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
    border: 2px solid var(--db-line-2); color: var(--db-ink-3); font-size: 13px; font-weight: 700;
    transition: background-color 200ms var(--db-ease), border-color 200ms var(--db-ease), color 200ms var(--db-ease);
}
.vw-check-circle wa-icon { font-size: 14px; }
.vw-check-circle .gw-spinner { width: 15px; height: 15px; }
.vw-check-item.is-done .vw-check-circle { background: var(--db-ok); border-color: var(--db-ok); color: #fff; animation: gw-pop 260ms var(--db-ease); }
.vw-check-item.is-bad .vw-check-circle { background: var(--db-bad); border-color: var(--db-bad); color: #fff; }

.vw-check-text { flex: 1; min-width: 0; }
.vw-check-text b { display: flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--db-ink); }
.vw-check-text b wa-icon { font-size: 13px; color: var(--db-accent); }
.vw-check-text span { display: block; font-size: 11.5px; color: var(--db-ink-3); margin-top: 3px; }
.vw-check-item .db-btn-ghost { flex: none; }

.vw-review-status.is-ok { color: var(--db-ok); font-weight: 600; }
.vw-review-status.is-bad { color: var(--db-bad); font-weight: 600; }
.vw-review-status.is-warn { color: var(--db-warn); font-weight: 600; }

.vw-stage {
    position: relative; width: 100%; max-width: 560px; margin: 0 auto; aspect-ratio: 4 / 3; border-radius: var(--db-radius);
    overflow: hidden; background: var(--db-dark); display: grid; place-items: center;
}
/* p/maske.css (moderator mask) has its own .vw-stage and loads after this file on /apply and the wizard page - the
   wizard's stage (data-stage) keeps its centred grid */
.vw-stage[data-stage] { display: grid; place-items: center; gap: 0; padding: 0; }
.vw-stage video, .vw-stage img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vw-placeholder { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--db-on-dark); opacity: 0.7; text-align: center; padding: 0 20px; }
.vw-placeholder wa-icon { font-size: 26px; }
.vw-placeholder span { font-size: 12.5px; }
.vw-stage.is-bad .vw-placeholder { color: var(--db-bad); opacity: 1; }

.vw-guide {
    position: absolute; inset: 12%; border: 2px dashed rgba(255, 255, 255, 0.55); border-radius: 14px; pointer-events: none;
    transition: border-color 220ms var(--db-ease), box-shadow 220ms var(--db-ease);
}
.vw-guide.is-align { border-color: var(--db-warn-line); box-shadow: 0 0 0 4px var(--db-warn-soft); }
.vw-guide.is-good { border-style: solid; border-color: var(--db-ok); box-shadow: 0 0 0 4px rgba(78, 201, 138, 0.18); }
.vw-guide.is-bad-light { border-color: var(--db-bad); }

.vw-face-status { margin: 12px 0 0; text-align: center; font-size: 13px; font-weight: 600; color: var(--db-ink-2); min-height: 1.4em; }

/* QR-code screen for continuing on mobile, reached via a small link on the intro screen - see
   openMobileHandoff in verification_wizard.js. */
.vw-qr-box {
    width: 216px; height: 216px; margin: 4px auto 16px; padding: 10px; border-radius: 16px;
    background: #fff; border: 1px solid var(--db-line); display: grid; place-items: center;
}
.vw-qr-box img, .vw-qr-box canvas { display: block; width: 100%; height: 100%; }

.vw-hint { font-size: 12.5px; color: var(--db-ink-3); margin: 10px 0 0; text-align: center; }
.vw-actions { display: flex; justify-content: center; gap: 10px; margin-top: 16px; }
/* proof step footer: "Zurück" on the left, the step's own actions on the right, one row */
.vw-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.vw-foot > .vw-actions { flex-wrap: wrap; justify-content: flex-end; margin: 0 0 0 auto; }
.vw-foot > .vw-actions:empty { display: none; }
/* proof step: choose a file (a PDF or a photo) or the camera - the camera only starts on request */
.vw-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.vw-choice[hidden] { display: none; }
.vw-choice-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 18px; border: 1px solid var(--db-line); border-radius: var(--db-radius);
    background: var(--db-surface, transparent); color: var(--db-ink); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, background-color .15s; }
.vw-choice-opt:hover { border-color: var(--db-accent); }
.vw-choice-opt:focus-visible, .vw-choice-opt:has(input:focus-visible) { outline: 2px solid var(--db-accent); outline-offset: 2px; }
.vw-choice-opt b { font-size: 14.5px; font-weight: 600; }
.vw-choice-opt small { font-size: 12.5px; color: var(--db-ink-3); }
.vw-choice-icon { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 6px; border-radius: 10px; background: var(--db-accent-soft, rgba(243,115,56,.12)); color: var(--db-accent); font-size: 17px; }
.vw-stage[hidden] { display: none; }
.vw-stage.is-file { aspect-ratio: auto; min-height: 150px; }
.vw-stage.is-file { background: var(--db-surface); border: 1px solid var(--db-line); }
.vw-stage.is-file .vw-guide { display: none; }
.vw-stage.is-file .vw-placeholder { opacity: 1; color: var(--db-ink); font-weight: 600; overflow-wrap: anywhere; }
.vw-stage.is-file .vw-placeholder wa-icon { font-size: 30px; color: var(--db-accent); }
.vw-stage.is-loading .vw-placeholder { font-weight: 500; color: var(--db-ink-3); }
/* uploaded proof (PDF page or picture): readable at the full width, like a sheet of paper, never cropped; a tall page
   scrolls inside the frame so the buttons below stay in view */
.vw-stage.is-doc[data-stage] { display: block; aspect-ratio: auto; max-width: 720px; height: min(560px, 68vh); overflow-y: auto; padding: 14px;
    background: var(--db-surface); border: 1px solid var(--db-line); }
.vw-stage.is-doc img { width: 100%; height: auto; max-width: 100%; max-height: none; object-fit: contain; border-radius: 4px;
    background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 4px 14px rgba(0, 0, 0, 0.10); }
.vw-stage.is-doc .vw-guide { display: none; }
.vw-file-name a { color: var(--db-accent); font-weight: 600; }
.vw-file-name { margin: 8px auto 0; max-width: 720px; text-align: center; font-size: 12.5px; color: var(--db-ink-3); overflow-wrap: anywhere; }
.vw-file-name[hidden] { display: none; }
@media (max-width: 560px) { .vw-choice { grid-template-columns: 1fr; } }

/* Admin Kundenakte-Modal (admin/customers.html, see customers.js) - the full customer_detail.html page
   is fetched and its #content injected into a drawer, with its own local tab wiring (same reasoning as
   the verifications modal below) and click-to-edit for the Stammdaten facts. */
[data-editable-facts] .db-fact dd { display: flex; align-items: center; gap: 8px; }
.db-fact-edit { flex: none; border: 0; background: none; padding: 3px; line-height: 0; color: var(--db-ink-3); cursor: pointer; opacity: 0; transition: opacity 120ms var(--db-ease), color 120ms var(--db-ease); }
.db-fact:hover .db-fact-edit, .db-fact-edit:focus-visible { opacity: 1; }
.db-fact-edit:hover { color: var(--db-accent); }
.db-fact-edit wa-icon { font-size: 13px; }
.db-fact-input { font: inherit; font-size: 14px; padding: 4px 8px; border: 1px solid var(--db-accent); border-radius: 8px; background: var(--db-surface); color: var(--db-ink); min-width: 140px; }

/* Admin Legitimation-Prüfung modal (admin/verifications.html, see verifications.js) - a 3-step wizard
   (Angaben & Nachweis / VIES & Stripe / Entscheidung) reusing the same db-steps/gw-steps stepper as the
   Legitimation review (verifications.js) and gallery upload wizard. */

.vfr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
@media (max-width: 720px) { .vfr-grid { grid-template-columns: 1fr; } }
.vfr-col h4 { margin: 0 0 12px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--db-ink-3); }
.vfr-image-link { display: block; border-radius: 12px; overflow: hidden; border: 1px solid var(--db-line); background: var(--db-sunken); }
.vfr-image { display: block; width: 100%; max-height: 420px; object-fit: contain; background: var(--db-sunken); }
.vfr-file { display: flex; align-items: center; gap: 10px; padding: 16px; border: 1px solid var(--db-line); border-radius: 12px; background: var(--db-surface); }
.vfr-file wa-icon { font-size: 22px; color: var(--db-accent); }
.vfr-meta { margin: 10px 0 0; font-size: 12px; color: var(--db-ink-3); }

/* Gallery cards on the Bilder overview. */
.db-gallery-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.db-gallery-head .db-chat-tools { display: flex; gap: 6px; }

/* .db-med-pic is a <button> now (opens the lightbox) instead of an <a> - same box model either way,
   just needs the native button chrome reset that an <a> never had. */
.db-med-pic { border: 0; background: none; padding: 0; cursor: zoom-in; font: inherit; }

/* Same idea for a table's name cell when it opens something in place (a drawer) instead of navigating -
   button chrome reset so it reads exactly like the plain <a> it replaces (see admin Kundenliste). */
.db-cell-btn { border: 0; background: none; padding: 0; margin: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }

/* PDF variant of the lightbox (see CM.openLightbox) - .db-lightbox img in dashboard.css sizes itself via
   max-width/max-height + object-fit, which doesn't apply to a plugin-rendered <embed>, so this needs
   explicit dimensions instead. */
.db-lightbox-pdf { width: min(900px, 90vw); height: 88vh; border: 0; border-radius: 12px; box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6); }

/* Video variant (e.g. a Video-Ident upload) - same sizing rule as .db-lightbox img, just spelled out
   since object-fit alone doesn't cap a <video>'s natural size the way it does for <img>. */
.db-lightbox-video { max-width: min(1400px, 94vw); max-height: 88vh; border-radius: 12px; box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6); }

/* "Konto verknüpfen" wizard's Vorlieben step (see platforms.js) - checkbox groups don't exist as a
   component in the source design, built here from the same tokens as everything else. */
.pw-checkgroup { margin-top: 20px; }
.pw-checkgroup:first-child { margin-top: 0; }
.pw-checkgroup b { display: block; margin-bottom: 10px; font-size: 13.5px; }
.pw-checkgroup.is-bad b { color: var(--db-bad); }
.pw-checkgroup.is-bad .pw-checkgrid { outline: 1px dashed var(--db-bad); outline-offset: 8px; border-radius: 10px; }
.pw-checkgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 9px 16px; }
.pw-check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--db-ink-2); cursor: pointer; }
.pw-check input { accent-color: var(--db-accent); width: 16px; height: 16px; flex: none; }
.pw-photo-preview { display: block; max-width: 220px; max-height: 220px; margin: 0 auto; border-radius: 12px; object-fit: cover; }

/* The linked-account card leads with the model's actual profile photo (shared across all platforms)
   instead of a generic icon box, with a small badge in the corner as a stand-in "connected" marker
   since platforms have no logo assets here. */
.db-acct-photo { position: relative; flex: none; width: 52px; height: 52px; }
.db-acct-photo img,
.db-acct-photo .db-card-icon { width: 52px; height: 52px; border-radius: 999px; }
.db-acct-photo img { object-fit: cover; border: 1px solid var(--db-line); display: block; }
.db-acct-photo-badge {
  position: absolute; right: -3px; bottom: -3px;
  display: grid; place-items: center;
  width: 22px; height: 22px;
  border-radius: 999px;
  background: var(--db-accent-soft);
  color: var(--db-accent-text);
  border: 2px solid var(--db-surface);
}
.db-acct-photo-badge wa-icon { font-size: 11px; }
.db-acct-acts { justify-content: flex-end; }

/* LiveStream page: account picker sidebar + WebRTC viewer stage (see livestream.js). */
.db-livegrid { display: grid; grid-template-columns: 280px 1fr; gap: var(--db-gap-tight); align-items: start; }
@media (max-width: 900px) { .db-livegrid { grid-template-columns: 1fr; } }

.db-live-picker h3 { font-size: 14px; margin: 0 0 12px; }
/* Konto-Karte im Picker: Icon links, Name/Benutzer rechts, Status-Chip in einer eigenen Zeile darunter -
   so überlappt bei schmaler Spalte nichts. */
.db-live-pick {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "icon text" "icon chip";
  align-items: center; column-gap: 12px; row-gap: 6px;
  width: 100%; padding: 12px 14px;
  border: 1px solid var(--db-line); border-radius: 12px;
  background: var(--db-surface); color: inherit; text-align: left;
  font: inherit; cursor: pointer;
  transition: border-color 160ms var(--db-ease), background-color 160ms var(--db-ease);
}
.db-live-pick + .db-live-pick { margin-top: 8px; }
.db-live-pick:hover { border-color: var(--db-line-2); background: var(--db-sunken); }
.db-live-pick.is-active { border-color: var(--db-accent); background: var(--db-accent-soft); }
.db-live-pick > .db-card-icon { grid-area: icon; align-self: start; }
.db-live-pick > span:nth-child(2) { grid-area: text; display: flex; flex-direction: column; min-width: 0; }
.db-live-pick b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-live-pick em { font-style: normal; font-size: 12px; color: var(--db-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-live-pick .db-chip { grid-area: chip; justify-self: start; }

.db-live-stage { min-height: 460px; display: flex; }
.db-live-stage .db-empty { flex: 1; }

.db-live-player { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.db-live-head { display: flex; align-items: center; gap: 10px; }
.db-live-target { font-size: 13px; color: var(--db-ink-2); }
.db-live-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.02em;
  background: var(--db-sunken); color: var(--db-ink-3);
}
.db-live-badge::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: currentColor; flex: none; }
.db-live-badge.is-live { background: var(--db-bad-soft); color: var(--db-bad); }
.db-live-badge.is-live::before { animation: db-live-pulse 1.4s ease-in-out infinite; }
.db-live-badge.is-off { background: var(--db-bad-soft); color: var(--db-bad); }
@keyframes db-live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

.db-live-video-wrap { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--db-radius); overflow: hidden; background: #000; }
.db-live-video-wrap video { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }
.db-live-retry {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: rgba(0, 0, 0, 0.55); color: #fff; text-align: center;
}

/* Statistiken page: platform donut (see ChartRenderer.renderDonut) + its legend, and the two
   leaderboard tables (Top-Kunden, Top-Moderatoren). Text always carries the platform name too -
   the donut's light-mode aqua/yellow slots are a contrast WARN against pure white, color is never
   the only identifier (see dataviz skill's "relief rule"). */
.hc-donut-value { font-size: 26px; font-weight: 700; fill: var(--db-ink); font-family: var(--font-outfit), Helvetica, Arial, sans-serif; }
.hc-donut-sub { font-size: 12.5px; fill: var(--db-ink-3); font-family: var(--font-outfit), Helvetica, Arial, sans-serif; }

.db-donut-layout { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; }
.db-donut-layout svg { width: 200px; height: 200px; flex: none; }
.db-donut-legend { flex: 1; min-width: 220px; display: flex; flex-direction: column; }
.db-donut-legend .db-fact dt { display: flex; align-items: center; gap: 8px; }
.db-legend-dot { width: 10px; height: 10px; border-radius: 999px; flex: none; }

/* Stays a table cell (a flex td breaks row lines); the rank badge gets its own spacing */
.db-rank-table .db-table td.is-name { white-space: nowrap; }
.db-rank-table .db-table td.is-name > span { vertical-align: middle; }
.db-rank-table .db-table td.is-name .db-rank-pos { display: inline-grid; margin-right: 10px; }
.db-rank-pos {
  display: grid; place-items: center; flex: none;
  width: 24px; height: 24px; border-radius: 999px;
  background: var(--db-sunken); color: var(--db-ink-3);
  font-size: 12px; font-weight: 700;
}

/* Compact KPI tiles: Statistiken has ten of these on screen at once, so the normal db-kpi size
   (built for 3-5 tiles on the Übersicht) reads as oversized here - same component, smaller
   footprint, all the same content (nothing shortened, just denser). */
.db-grid.is-compact { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.db-grid.is-compact .db-card { padding: 14px 16px; }
.db-grid.is-compact .db-card-icon { width: 28px; height: 28px; border-radius: 9px; margin-bottom: 8px; }
.db-grid.is-compact .db-card-icon wa-icon { font-size: 13px; }
.db-grid.is-compact .db-metric-label { font-size: 10.5px; }
.db-grid.is-compact .db-metric-value { font-size: 1.5rem; margin-top: 6px; }
.db-grid.is-compact .db-metric-note { font-size: 11px; margin-top: 4px; }

/* Legitimation's document-type cards reuse the compact db-kpi tile, but as a checklist (icon + label +
   status chip) rather than a number - a confirmed document gets the same success tint db-docbox already
   uses for "is-there", so the icon itself signals "done" before you even read the chip. */
.db-card-icon.is-ok { background: var(--db-ok-soft); border-color: transparent; color: var(--db-ok); }

/* /apply registration and the standalone legitimation page (/customer/verification/wizard): a form
   column on the page background and an inset dark journey panel on the right - the same split as
   /login, so all entry pages read as one family. */
.apply-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 30vw); background: var(--db-page); }

.apply-form-col { display: flex; justify-content: center; padding: clamp(20px, 3.5vw, 44px) clamp(18px, 4vw, 56px) clamp(36px, 6vw, 72px); }
.apply-form-inner { width: 100%; max-width: 620px; display: flex; flex-direction: column; }

.apply-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: clamp(32px, 7vh, 64px); }
.apply-top .db-brand { padding: 0; justify-content: flex-start; }
.apply-top-aside { margin: 0; font-size: 14px; color: var(--db-ink-3); text-align: right; }
.apply-top-aside .db-linkish { font-weight: 600; }

/* Step counter + bar. The data-mobile-steps-* hooks are shared with verification_wizard.js. */
.apply-progress { margin-bottom: 20px; }
.apply-progress-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 9px; font-size: 13px; }
.apply-progress-meta [data-mobile-steps-label] { font-weight: 600; color: var(--db-ink); }
.apply-progress-meta [data-step-phase] { color: var(--db-ink-3); }
.apply-progress-bar { height: 4px; border-radius: 999px; background: var(--db-line); overflow: hidden; }
.apply-progress-bar i { display: block; height: 100%; width: 10%; border-radius: inherit; background: var(--db-accent); transition: width 320ms var(--db-ease); }

.apply-head { margin-bottom: 24px; }
.apply-head h1 {
  margin: 0;
  font-family: var(--font-sofia), "Outfit", Arial, sans-serif;
  font-size: clamp(2rem, 3.3vw, 2.6rem); font-weight: 600; line-height: 1.06; letter-spacing: -0.035em;
  color: var(--db-ink);
}
.apply-head p { margin: 12px 0 0; max-width: 56ch; font-size: 15.5px; line-height: 1.55; color: var(--db-ink-2); }

.apply-wizard { display: flex; flex-direction: column; gap: 18px; }
.apply-wizard > .db-note { margin: 0; }

/* One white sheet per step - the only surface on the page, everything else sits on the background. */
.apply-sheet {
  display: flex; flex-direction: column; gap: 18px;
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid var(--db-line); border-radius: 22px;
  background: var(--db-surface);
  box-shadow: 0 1px 2px rgba(20, 20, 19, 0.03), 0 12px 32px -18px rgba(20, 20, 19, 0.12);
}
.apply-wizard [data-step] { animation: db-fade 220ms var(--db-ease); }
.apply-sheet .db-field input, .apply-sheet .db-field select, .apply-sheet .db-select-btn { min-height: 44px; font-size: 15px; }
.apply-hint { margin: -4px 0 0; font-size: 13px; line-height: 1.5; color: var(--db-ink-3); }
.apply-birth { max-width: 240px; }
/* Date field: a quiet calendar button instead of the browser's black icon (same as in the portal) */
.apply-birth input::-webkit-calendar-picker-indicator { padding: 4px; border-radius: 6px; opacity: .55; cursor: pointer; transition: opacity 160ms, background-color 160ms; }
.apply-birth input::-webkit-calendar-picker-indicator:hover { opacity: 1; background-color: var(--db-sunken); }
/* The wrappers around the password and address inputs are spans directly in .db-field: keep the label
   styling of ".db-field > span" (12.5px, semibold, flex) off them, or the typed text turns semibold. */
.db-field > .apply-pwd-wrap, .db-field > .apply-addr-search-wrap { display: block; min-height: 0; font-size: inherit; font-weight: 400; color: var(--db-ink); }

.apply-pwd-wrap { position: relative; display: block; }
.apply-pwd-wrap input { width: 100%; padding-right: 44px; }
.apply-pwd-toggle {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  border: 0; background: none; padding: 8px; line-height: 0; border-radius: 8px;
  color: var(--db-ink-3); cursor: pointer;
}
.apply-pwd-toggle:hover { color: var(--db-ink); background: var(--db-sunken); }

/* Address: one search field first, manual fields after a pick or on request. */
.apply-address { display: flex; flex-direction: column; gap: 14px; }
.apply-address-fields { display: flex; flex-direction: column; gap: 14px; }
.apply-address-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 22px; font-size: 12.5px; font-weight: 600; color: var(--db-ink-2); }
.apply-addr-switch { align-self: flex-start; font-size: 13px; font-weight: 500; }
.apply-addr-search-wrap { position: relative; display: block; }
.apply-addr-search-wrap > wa-icon { position: absolute; left: 14px; top: 22px; transform: translateY(-50%); color: var(--db-ink-3); font-size: 14px; pointer-events: none; }
.apply-addr-search-wrap input { padding-left: 40px; }
.apply-addr-suggest { left: 0; right: auto; width: 100%; max-width: none; }
.apply-addr-suggest button > span { white-space: normal; }
.apply-addr-suggest { padding: 6px; max-height: min(360px, 60vh); overflow-y: auto; }
.apply-addr-suggest .apply-addr-option { flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; border-radius: 10px; }
.apply-addr-option b { font-size: 14.5px; font-weight: 600; color: var(--db-ink); }
.apply-addr-option small { font-size: 12.5px; line-height: 1.4; color: var(--db-ink-3); }
.apply-addr-suggest .apply-addr-option.is-on { background: var(--db-sunken); font-weight: inherit; }
.apply-addr-suggest .apply-addr-manual { margin-top: 4px; padding: 10px 12px; border-top: 1px solid var(--db-line); border-radius: 0 0 10px 10px; font-size: 13px; font-weight: 500; color: var(--db-accent-text); }
.apply-addr-status { margin: 0; padding: 10px 12px; font-size: 13px; line-height: 1.45; color: var(--db-ink-3); }
.apply-street-row { grid-template-columns: minmax(0, 1fr) 120px; }
.apply-city-row { grid-template-columns: 120px minmax(0, 1fr); }

/* Billing toggle as a switch row. */
.apply-switch { display: flex; align-items: flex-start; gap: 14px; cursor: pointer; }
.apply-switch input {
  flex: none; appearance: none; -webkit-appearance: none; margin: 2px 0 0;
  width: 40px; height: 24px; border-radius: 999px; background: var(--db-line-2);
  position: relative; cursor: pointer; transition: background-color 160ms var(--db-ease);
}
.apply-switch input::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); transition: transform 160ms var(--db-ease);
}
.apply-switch input:checked { background: var(--db-accent); }
.apply-switch input:checked::after { transform: translateX(16px); }
.apply-switch input:focus-visible { outline: 2px solid var(--db-accent); outline-offset: 2px; }
.apply-switch b { display: block; font-size: 15px; font-weight: 600; color: var(--db-ink); }
.apply-switch em { display: block; margin-top: 3px; font-style: normal; font-size: 13px; line-height: 1.45; color: var(--db-ink-3); }

/* Platforms as selectable tiles. */
.apply-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; border: 0; min-width: 0; }
.apply-tiles legend { grid-column: 1 / -1; padding: 0; margin-bottom: 10px; font-size: 12.5px; font-weight: 600; color: var(--db-ink-2); }
.apply-tile {
  position: relative; display: flex; flex-direction: column; justify-content: center; gap: 2px;
  min-height: 60px; padding: 12px 14px 12px 44px;
  border: 1px solid var(--db-line-2); border-radius: 14px; background: var(--db-surface);
  cursor: pointer; transition: border-color 160ms var(--db-ease), background-color 160ms var(--db-ease);
}
.apply-tile input { position: absolute; left: 15px; top: 50%; margin: -8px 0 0; width: 16px; height: 16px; accent-color: var(--db-accent); }
.apply-tile b { font-size: 14.5px; font-weight: 600; color: var(--db-ink); }
.apply-tile em { font-style: normal; font-size: 12.5px; color: var(--db-ink-3); }
.apply-tile:hover { border-color: var(--db-ink-3); }
.apply-tile:has(input:checked) { border-color: var(--db-accent); background: var(--db-accent-soft); }
.apply-tile:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--db-accent-ring); }

.apply-consent {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px; border-radius: 14px; background: var(--db-sunken);
  font-size: 14px; line-height: 1.55; color: var(--db-ink-2); cursor: pointer;
}
/* Consent box drawn like the rest of the form, not the browser's checkbox */
.apply-consent input {
  -webkit-appearance: none; appearance: none; display: grid; place-content: center; flex: none; width: 18px; height: 18px; margin: 2px 0 0;
  border: 1.5px solid var(--db-line-2); border-radius: 5px; background: var(--db-surface); cursor: pointer;
  transition: background-color 160ms var(--db-ease), border-color 160ms var(--db-ease);
}
.apply-consent input::after {
  content: ""; width: 8px; height: 4px; margin-top: -2px; border: solid #fff; border-width: 0 0 2px 2px;
  transform: rotate(-45deg) scale(0); transition: transform 120ms var(--db-ease);
}
.apply-consent input:checked { border-color: var(--db-accent); background: var(--db-accent); }
.apply-consent input:checked::after { transform: rotate(-45deg) scale(1); }
.apply-consent input:focus-visible { outline: 2px solid var(--db-accent); outline-offset: 2px; }
.apply-consent:hover input:not(:checked) { border-color: var(--db-ink-3); }

.apply-wizard-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.apply-back {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 6px; border: 0; background: none;
  font: inherit; font-size: 14.5px; font-weight: 500; color: var(--db-ink-2); cursor: pointer;
}
.apply-back:hover { color: var(--db-ink); }
.apply-back wa-icon { font-size: 13px; }
.apply-next { margin-left: auto; justify-content: center; padding: 13px 28px; font-size: 15px; font-weight: 600; }
.apply-next[disabled], .apply-back[disabled] { opacity: 0.6; cursor: progress; }

.apply-legit .gw-body { padding: clamp(20px, 3vw, 30px); border: 1px solid var(--db-line); border-radius: 22px; background: var(--db-surface); }
.apply-help { margin: 28px 0 0; font-size: 13.5px; color: var(--db-ink-3); }

.apply-shell a:focus-visible, .apply-shell button:focus-visible { outline: 2px solid var(--db-accent); outline-offset: 2px; }

/* Eigenes Bild-Captcha im Legitimations-Wizard (Schritt "Sicherheit") */
.vw-captcha { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--db-line); }
.vw-captcha-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.vw-captcha-img { display: block; width: 260px; max-width: 100%; height: auto; border: 1px solid var(--db-line); border-radius: 10px; background: #f9f7f2; }
.vw-captcha-field { max-width: 260px; }
.vw-captcha-field input { letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; }
.vw-face-status.is-bad { color: var(--db-bad); }
.gw-summary-icon.is-bad { color: var(--db-bad); background: var(--db-bad-soft); }

/* Journey panel: fixed brand surface (same warm dark as the landing's stage), independent of the
   light/dark toggle, sticky while the form column scrolls. */
.apply-visual-col { position: sticky; top: 0; align-self: start; height: 100vh; padding: 12px 12px 12px 0; }
.apply-panel {
  position: relative; height: 100%; overflow-y: auto;
  display: flex; flex-direction: column; gap: 30px;
  padding: clamp(28px, 5vh, 48px) clamp(24px, 2.6vw, 40px);
  border-radius: 28px; color: #f5f5f4;
  background:
    radial-gradient(80% 50% at 15% 0%, rgba(243, 115, 56, 0.28) 0%, transparent 62%),
    radial-gradient(70% 45% at 100% 100%, rgba(251, 146, 60, 0.14) 0%, transparent 68%),
    linear-gradient(160deg, #241408 0%, #17150f 48%, #101010 100%);
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}
.apply-panel-head h2 {
  margin: 0 0 10px;
  font-family: var(--font-sofia), "Outfit", Arial, sans-serif;
  font-size: clamp(1.6rem, 2vw, 2rem); font-weight: 600; line-height: 1.1; letter-spacing: -0.03em; color: #fff;
}
.apply-panel-head p { margin: 0; max-width: 36ch; font-size: 14px; line-height: 1.55; color: rgba(245, 245, 244, 0.64); }

/* Vertical track with one node per step; phase names sit on the track between groups. */
.apply-journey { position: relative; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.apply-journey::before { content: ""; position: absolute; left: 11px; top: 14px; bottom: 14px; width: 2px; border-radius: 2px; background: rgba(245, 245, 244, 0.1); }
.apply-phase {
  position: relative; margin: 20px 0 6px; padding-left: 38px;
  font-family: var(--font-sofia), "Outfit", Arial, sans-serif;
  font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: rgba(245, 245, 244, 0.92);
}
.apply-phase:first-child { margin-top: 0; }
.apply-step { position: relative; padding: 6px 0 6px 38px; }
.apply-step::before {
  content: attr(data-step-dot);
  position: absolute; left: 0; top: 6px; z-index: 1;
  width: 24px; height: 24px; border-radius: 50%; box-sizing: border-box;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700; color: rgba(245, 245, 244, 0.5);
  border: 1.5px solid rgba(245, 245, 244, 0.2); background: #17150f;
  transition: background-color 200ms var(--db-ease), box-shadow 200ms var(--db-ease), color 200ms var(--db-ease);
}
.apply-step b { display: block; font-size: 14px; font-weight: 500; line-height: 24px; color: rgba(245, 245, 244, 0.58); }
.apply-step em { display: none; font-style: normal; font-size: 12.5px; line-height: 1.4; color: #ffb37a; }
.apply-step.is-done::before { content: "\2713"; font-size: 12px; color: #1a120b; background: rgba(245, 245, 244, 0.86); border-color: transparent; }
.apply-step.is-done b { color: rgba(245, 245, 244, 0.82); }
.apply-step.is-active::before {
  color: #2a1206; background: #f37338; border-color: #f37338;
  box-shadow: 0 0 0 5px rgba(243, 115, 56, 0.2), 0 0 24px rgba(243, 115, 56, 0.55);
}
.apply-step.is-active b { color: #fff; font-weight: 600; }
.apply-step.is-active em { display: block; }

.apply-panel-trust {
  display: flex; align-items: flex-start; gap: 12px; margin: auto 0 0; padding-top: 22px;
  border-top: 1px solid rgba(245, 245, 244, 0.1);
  font-size: 13px; line-height: 1.5; color: rgba(245, 245, 244, 0.62);
}
.apply-panel-trust wa-icon { flex: none; margin-top: 2px; font-size: 14px; color: #ffb37a; }

@media (max-height: 780px) {
  .apply-panel { gap: 22px; }
  .apply-panel-head p { display: none; }
  .apply-step { padding-block: 4px; }
  .apply-step::before { top: 4px; }
  .apply-phase { margin: 14px 0 4px; }
}

@media (max-width: 1023px) {
  .apply-shell { grid-template-columns: 1fr; }
  .apply-visual-col { display: none; }
}

@media (max-width: 560px) {
  .apply-top { margin-bottom: 28px; }
  .apply-top-aside { font-size: 13px; }
  .apply-sheet { border-radius: 18px; gap: 16px; }
  .apply-tiles { grid-template-columns: 1fr; }
  .apply-street-row { grid-template-columns: minmax(0, 1fr) 96px; }
  .apply-city-row { grid-template-columns: 96px minmax(0, 1fr); }
  .apply-birth { max-width: none; }
  .apply-next { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .apply-wizard [data-step] { animation: none; }
  .apply-progress-bar i, .apply-step::before, .apply-switch input, .apply-switch input::after { transition: none; }
}

/* Country picker (see apply.js wireCountrySelect) - built on the db-select/db-select-search/
   db-select-flag classes the design already ships for a searchable flagged select; db-select-flag's
   fixed 20x15 img sizing in dashboard.css already fits flagcdn.com's flag images almost to the pixel. */
.db-select-flag { background: var(--db-sunken); }

/* ---- Rules for moderators (/mod/rules): readable text, declarations, signature pad, stored signature ---- */
/* Full page width: the numbered rules sit side by side on wide screens (reading order 1, 2 / 3, 4), the intro spans all */
.mr-rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 22px 40px; padding: 26px 28px; }
.mr-sec:first-child { grid-column: 1 / -1; padding-bottom: 20px; border-bottom: 1px solid var(--db-line); }
.mr-sec h3 { margin: 0 0 8px; font-size: 16px; color: var(--db-ink); }
.mr-sec p { margin: 0 0 8px; font-size: 14.5px; line-height: 1.6; color: var(--db-ink-2); }
.mr-sec ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.mr-sec li { font-size: 14.5px; line-height: 1.55; color: var(--db-ink-2); }
.mr-sec li::marker { color: var(--db-accent); }
.mr-signcard .db-checks { margin: 0 -12px; }
.mr-form { display: flex; flex-direction: column; gap: 18px; }
.mr-fields { display: grid; grid-template-columns: 2fr 1.4fr 1fr; gap: 14px; }
.mr-pad-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px;
  font-size: 13px; font-weight: 600; color: var(--db-ink-2); }
/* The pad stays paper-white in both themes: the signature is dark ink, exported as such */
.mr-pad-box { position: relative; border: 1.5px dashed var(--db-line-2); border-radius: 12px; background: #fff; }
.mr-pad-box canvas { display: block; width: 100%; height: 200px; border-radius: 12px; touch-action: none; cursor: crosshair; }
.mr-pad-box::after { content: ""; position: absolute; left: 28px; right: 28px; bottom: 46px; border-bottom: 1px solid #d9d5ce; pointer-events: none; }
.mr-pad-hint { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; font-size: 12.5px; color: #9a968f; pointer-events: none; }
.mr-error { margin: 0; padding: 10px 14px; border-radius: 10px; background: var(--db-bad-soft); color: var(--db-bad); font-size: 14px; }
.mr-actions { display: flex; justify-content: flex-end; }
.mr-legal { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--db-ink-3); }
.mr-signed-body { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px; }
.mr-sigimg { width: 340px; max-width: 100%; padding: 8px; border: 1px solid var(--db-line); border-radius: 12px; background: #fff; }
.mr-facts { flex: 1; min-width: 240px; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px 22px; }
.mr-facts dt { font-size: 12px; color: var(--db-ink-3); }
.mr-facts dd { margin: 2px 0 0; font-size: 14px; color: var(--db-ink); overflow-wrap: anywhere; }
.mr-proof-text { margin: 0; max-height: 420px; overflow: auto; padding: 16px 18px; border-radius: 12px; background: var(--db-sunken);
  font-family: inherit; font-size: 13px; line-height: 1.6; color: var(--db-ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 720px) {
  .mr-fields { grid-template-columns: 1fr; }
  .mr-rules { grid-template-columns: 1fr; padding: 20px 18px; }
}

/* ---- Partner portal: team roster, people in tables, ranking, manage dialog, create wizard ---- */
.pt-roster { display: flex; flex-wrap: wrap; gap: 8px; }
.pt-chip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 5px 13px 5px 5px;
  border: 1px solid var(--db-line); border-radius: 999px;
  background: var(--db-surface); font-size: 13px;
}
.pt-chip-name { font-weight: 600; color: var(--db-ink); }
.pt-chip-state { color: var(--db-ink-3); }
.pt-chip.is-online .pt-chip-state { color: var(--db-ok); }
.pt-chip.is-rules .pt-chip-state { color: var(--db-warn); }
.pt-chip.is-blocked { border-color: var(--db-bad-soft); }
.pt-chip.is-blocked .pt-chip-state { color: var(--db-bad); }
.pt-avatar {
  position: relative; flex: none;
  display: inline-grid; place-items: center;
  width: 30px; height: 30px; border-radius: 999px;
  background: var(--db-sunken); color: var(--db-ink-2);
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em;
}
.pt-avatar.is-large { width: 44px; height: 44px; font-size: 15px; }
.pt-dot {
  position: absolute; right: -1px; bottom: -1px;
  width: 10px; height: 10px; border: 2px solid var(--db-surface); border-radius: 999px;
  background: var(--db-line-2);
}
.pt-chip.is-online .pt-avatar, .pt-avatar.is-online { background: var(--db-ok-soft); color: var(--db-ok); }
.pt-chip.is-online .pt-dot, .pt-avatar.is-online .pt-dot { background: var(--db-ok); }
.pt-chip.is-blocked .pt-dot { background: var(--db-bad); }

.pt-person { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
.pt-person-text { display: flex; flex-direction: column; min-width: 0; }
.pt-person-text b { font-weight: 600; color: var(--db-ink); }
.pt-table td { vertical-align: middle; }

.pt-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--db-gap-tight); }
.pt-rank { display: flex; flex-direction: column; margin: 4px 0 0; padding: 0; list-style: none; }
.pt-rank li {
  display: grid; grid-template-columns: 22px minmax(0, 1.3fr) minmax(60px, 1fr) auto;
  align-items: center; gap: 14px;
  padding: 11px 0; border-top: 1px solid var(--db-line);
}
.pt-rank li:first-child { border-top: 0; }
.pt-rank-no { font-size: 12.5px; font-weight: 700; color: var(--db-ink-3); }
.pt-rank-who { display: flex; flex-direction: column; min-width: 0; }
.pt-rank-who b { overflow: hidden; font-size: 14px; color: var(--db-ink); text-overflow: ellipsis; white-space: nowrap; }
.pt-rank-who small { font-size: 12.5px; color: var(--db-ink-3); }
.pt-rank-bar { height: 8px; overflow: hidden; border-radius: 999px; background: var(--db-sunken); }
.pt-rank-bar i { display: block; height: 100%; border-radius: inherit; background: var(--db-accent); }
.pt-rank-val { font-size: 14px; font-variant-numeric: tabular-nums; color: var(--db-ink); }

.pt-manage { display: flex; flex-direction: column; gap: 18px; }
.pt-manage-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; }
.pt-manage-links { display: flex; gap: 8px; margin-left: auto; }
.pt-tabs { align-self: flex-start; }
.pt-tabs button { display: inline-flex; align-items: center; gap: 7px; }
.pt-alert { width: 7px; height: 7px; border-radius: 999px; background: var(--db-bad); }
.pt-tabs button.is-active .pt-alert { box-shadow: 0 0 0 2px var(--db-dark); }
.pt-panel { display: flex; flex-direction: column; gap: 16px; }
.pt-sep { padding-top: 18px; border-top: 1px solid var(--db-line); }
.pt-docs { display: flex; flex-wrap: wrap; gap: 10px; }
.pt-doc {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 14px; border: 1px solid var(--db-line); border-radius: 12px;
  background: var(--db-surface); color: var(--db-ink); text-decoration: none;
}
.pt-doc:hover { border-color: var(--db-accent); }
.pt-doc span { display: flex; flex-direction: column; }
.pt-doc small { font-size: 12px; color: var(--db-ink-3); }

.wz { display: flex; flex-direction: column; gap: 18px; }
.wz-steps { margin: 0; }
.wz-steps li b { font-weight: 600; }
.wz-steps li.is-done { cursor: pointer; }
.wz-step { display: flex; flex-direction: column; gap: 14px; }
.wz-lead { margin: 0; font-size: 14px; line-height: 1.55; color: var(--db-ink-2); }
.db-field-row.wz-row-street, .db-form .db-field-row.wz-row-street { grid-template-columns: minmax(0, 3fr) minmax(90px, 1fr); }
.db-field-row.wz-row-city, .db-form .db-field-row.wz-row-city { grid-template-columns: minmax(90px, 1fr) minmax(0, 3fr); }
.wz-drops { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
/* ID-1 card proportions (85.6 x 54 mm) for the preview - what the partner is about to upload */
.wz-drop {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 20px 16px; border: 1.5px dashed var(--db-line-2); border-radius: 14px;
  background: var(--db-surface); text-align: center; cursor: pointer;
  transition: border-color 160ms var(--db-ease), background-color 160ms var(--db-ease);
}
.wz-drop:hover, .wz-drop.is-over { border-color: var(--db-accent); background: var(--db-accent-soft); }
.wz-drop:focus-within { box-shadow: 0 0 0 3px var(--db-accent-ring); }
.wz-drop.has-file { border-style: solid; border-color: var(--db-ok); }
.wz-drop input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.wz-drop-preview {
  display: grid; place-items: center;
  width: 100%; max-width: 220px; aspect-ratio: 1.586;
  margin-bottom: 4px; overflow: hidden; border-radius: 10px;
  background: var(--db-sunken); color: var(--db-ink-3); font-size: 28px;
}
.wz-drop-preview img { width: 100%; height: 100%; object-fit: cover; }
.wz-drop b { font-size: 14px; color: var(--db-ink); }
.wz-drop small { font-size: 12.5px; color: var(--db-ink-3); overflow-wrap: anywhere; }
.wz-summary {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px;
  margin: 0; padding: 18px 20px; border-radius: 14px; background: var(--db-sunken);
}
.wz-summary dt { font-size: 12px; color: var(--db-ink-3); }
.wz-summary dd { margin: 2px 0 0; font-size: 14px; color: var(--db-ink); overflow-wrap: anywhere; }
.wz-spacer { flex: 1; }

@media (max-width: 1000px) {
  .pt-two { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .wz-drops, .wz-summary { grid-template-columns: minmax(0, 1fr); }
  .wz-steps li:not(.is-active) b { display: none; }
  .pt-manage-links { width: 100%; margin-left: 0; }
  .pt-rank li { grid-template-columns: 18px minmax(0, 1fr) auto; }
  .pt-rank-bar { display: none; }
}
/* name in a table that opens the person's details (drawer) */
.pt-link { padding: 0; border: 0; background: none; color: var(--db-ink); font: inherit; font-weight: 600; text-align: left; cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--db-line-2); text-underline-offset: 3px; }
.pt-link:hover { text-decoration-color: var(--db-accent); }
.pt-link:focus-visible { outline: 2px solid var(--db-accent); outline-offset: 2px; border-radius: 4px; }
/* action button in the last table column - a real table cell, so the row lines run through */
.pt-cell-actions { width: 1%; text-align: right; white-space: nowrap; }
.wz-summary .is-wide { grid-column: 1 / -1; }
.wz-summary dd { white-space: pre-line; }
/* wizard footer: "Abbrechen" left, back/next right */
.db-drawer-foot > div:has(> .wz-spacer) { flex: 1; }
@media (max-width: 560px) {
  .wz .db-field-row, .pt-panel .db-form .db-field-row,
  .db-field-row.wz-row-street, .db-field-row.wz-row-city,
  .db-form .db-field-row.wz-row-street, .db-form .db-field-row.wz-row-city { grid-template-columns: minmax(0, 1fr); }
}
/* ID drop zones: saving, saved (check badge), refused - the state is the feedback, no extra button */
.wz-drop-preview { position: relative; }
.wz-drop.has-file .wz-drop-preview::after {
  content: "\2713";
  position: absolute; top: 8px; right: 8px;
  display: grid; place-items: center;
  width: 24px; height: 24px; border-radius: 999px;
  background: var(--db-ok); color: #fff; font-size: 13px; font-weight: 700;
  box-shadow: 0 2px 8px var(--db-shadow-c);
}
.wz-drop.is-busy { pointer-events: none; opacity: 0.7; }
.wz-drop.is-busy small { color: var(--db-ink-2); }
.wz-drop.is-error { border-style: solid; border-color: var(--db-bad); }
.wz-drop.is-error small { color: var(--db-bad); }
.wz-drop-hint { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--db-ink-3); }
.wz-drop-hint a { margin-left: 10px; color: var(--db-ink-2); }
@media (prefers-reduced-motion: no-preference) {
  .wz-drop.is-busy .wz-drop-preview { animation: wz-pulse 1.1s ease-in-out infinite; }
}
@keyframes wz-pulse { 50% { opacity: 0.55; } }
/* ID kind: two cards with a big icon - the choice decides which sides the partner has to upload */
.wz-types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; border-radius: 16px; }
.wz-type {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px; border: 1.5px solid var(--db-line-2); border-radius: 14px;
  background: var(--db-surface); cursor: pointer;
  transition: border-color 160ms var(--db-ease), background-color 160ms var(--db-ease);
}
.wz-type input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.wz-type:hover { border-color: var(--db-accent); }
.wz-type:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--db-accent-ring); }
.wz-type:has(input:checked) { border-color: var(--db-accent); background: var(--db-accent-soft); }
.wz-type:has(input:disabled) { opacity: 0.55; cursor: not-allowed; }
.wz-type:has(input:disabled) input { cursor: not-allowed; }
.wz-type-icon {
  display: grid; place-items: center; flex: none;
  width: 52px; height: 52px; border-radius: 12px;
  background: var(--db-sunken); color: var(--db-ink-2); font-size: 24px;
  transition: background-color 160ms var(--db-ease), color 160ms var(--db-ease);
}
.wz-type:has(input:checked) .wz-type-icon { background: var(--db-accent); color: #fff; }
.wz-type-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wz-type-text b { font-size: 15px; color: var(--db-ink); }
.wz-type-text small { font-size: 12.5px; color: var(--db-ink-3); }
.wz-types.is-error .wz-type { border-color: var(--db-bad); }
.wz-id-detail { display: flex; flex-direction: column; gap: 14px; }
/* passport: one page, full width, ID-3 proportions (125 x 88 mm) */
.wz-drop[data-for="PASSPORT"] { grid-column: 1 / -1; }
.wz-drop[data-for="PASSPORT"] .wz-drop-preview { max-width: 260px; aspect-ratio: 1.42; }

/* login e-mail preview under the name - it follows what the partner types */
.wz-login {
  display: flex; align-items: flex-start; gap: 10px; margin: 0;
  padding: 12px 14px; border-radius: 12px; background: var(--db-sunken);
  font-size: 13px; line-height: 1.55; color: var(--db-ink-2);
}
.wz-login .wa-ic { margin-top: 3px; color: var(--db-ink-3); }
.wz-login b { color: var(--db-ink); font-weight: 600; overflow-wrap: anywhere; }

/* after creating: the ready message with login data, copied with one click */
.wz-done { display: flex; flex-direction: column; gap: 16px; }
.wz-done-head { display: flex; align-items: flex-start; gap: 14px; }
.wz-done-head h3 { margin: 0; font-size: 1.15rem; }
.wz-done-head p { margin: 4px 0 0; font-size: 14px; line-height: 1.55; color: var(--db-ink-2); }
.wz-done-icon {
  display: grid; place-items: center; flex: none;
  width: 44px; height: 44px; border-radius: 999px;
  background: var(--db-ok-soft); color: var(--db-ok); font-size: 22px;
}
.wz-message {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  padding: 16px 18px; border: 1px solid var(--db-line); border-radius: 14px; background: var(--db-sunken);
}
.wz-message pre {
  width: 100%; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere;
  font: inherit; font-size: 14px; line-height: 1.6; color: var(--db-ink);
  user-select: all;
}
.wz-message .db-btn { align-self: stretch; justify-content: center; }
/* new password in the manage dialog */
.pt-reset { display: flex; flex-direction: column; gap: 12px; }
.pt-reset-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
@media (max-width: 640px) {
  .wz-types { grid-template-columns: minmax(0, 1fr); }
}

/* Referral programme card (customer dashboard): link/code click to copy, three figures, ledger in a dialog */
.rf-card { display: flex; flex-direction: column; gap: 14px; }
.rf-head-btn { margin-left: auto; }
.rf-lead { margin: 0; max-width: 78ch; font-size: 14px; line-height: 1.55; color: var(--db-ink-2); }
.rf-share { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: 12px; }
.rf-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rf-copy {
  display: block; padding: 10px 12px; border: 1px dashed var(--db-line-2); border-radius: 10px;
  background: var(--db-sunken); color: var(--db-ink); font-family: inherit; font-size: 13.5px;
  overflow-wrap: anywhere; cursor: copy; transition: border-color 160ms var(--db-ease);
}
.rf-copy:hover, .rf-copy:focus-visible { border-color: var(--db-accent); outline: none; }
.rf-field-code .rf-copy { font-weight: 700; letter-spacing: 0.08em; }
.rf-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.rf-stats > div { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 12px; background: var(--db-sunken); }
.rf-fine { margin: 0; font-size: 12.5px; color: var(--db-ink-3); }
/* history cards sit in the page flow like every other card (same spacing) */
.rf-history { display: contents; }
@media (max-width: 760px) {
  .rf-share, .rf-stats { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Discord card (fragments/discord.html): connect steps, one-time code, topic switches in the dialog ---- */
.dc-steps { margin: 12px 0 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14px; color: var(--db-ink-2); }
.dc-steps code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; padding: 1px 6px; border-radius: 6px; background: var(--db-surface-2, rgba(127,127,127,.12)); color: var(--db-ink); }
.dc-warn { margin-top: 10px; color: var(--db-bad); }
.dc-topic { align-items: flex-start; padding: 8px 0; }
.dc-topic span { display: grid; gap: 2px; }
.dc-topic small { color: var(--db-ink-3); font-size: 12.5px; line-height: 1.4; }
.dc-steps a { color: var(--db-accent); font-weight: 600; }

/* Bilder je Plattform-Konto: Reiter je Konto, Konten-Auswahl im Upload/Bearbeiten, Konten unter jedem Bild */
.db-img-accounts { margin-top: var(--db-gap-tight); }
.gw-accounts { border: 0; padding: 0; margin: 16px 0 0; min-width: 0; display: grid; gap: 10px; }
.gw-accounts > span { font-size: 13px; font-weight: 600; color: var(--db-ink-2); }
.gw-accounts .db-switch span { overflow-wrap: anywhere; }
.gw-accounts.is-bad > span { color: var(--db-bad); }
.db-med figcaption > .db-med-accounts { color: var(--db-ink-2); }

/* Sidebar: one entry per linked platform account (platform + account name) */
.db-nav-acct { display: grid; line-height: 1.15; min-width: 0; }
.db-nav-acct small { font-size: 11.5px; opacity: .72; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Platform account page: tabs, posts, guestbook, settings */
.db-acct-tabs { margin-top: var(--db-gap-tight); }
.db-empty.is-compact { padding: 22px 16px; }
.db-post-cell { display: flex; gap: 12px; align-items: flex-start; min-width: 220px; }
.db-post-cell > span { display: grid; gap: 2px; min-width: 0; }
.db-post-thumb { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; flex: none; }
.db-post-target { display: grid; gap: 2px; margin-bottom: 6px; }
.db-quote { margin: 0 0 14px; padding: 10px 14px; border-left: 3px solid var(--db-accent); background: var(--db-surface-2, rgba(0,0,0,.03)); border-radius: 6px; white-space: pre-wrap; }
.db-setting-value { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Moderator chat: top customer and reactions */
.mc-vip { display: flex; gap: 6px; align-items: center; color: var(--db-accent); font-weight: 600; font-size: .85rem; margin: 2px 0 0; }
.mc-tag.is-heart { color: #d6336c; }

/* Platform profile: multi-select checkboxes */
.db-check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px 14px; border: 0; padding: 0; margin: 0; }
.db-check-grid > span { grid-column: 1 / -1; font-weight: 600; }
.db-check { display: flex; gap: 8px; align-items: center; font-size: .92rem; }

/* =====================================================================================================================
   Design pass 2026-10-10: motion tokens, page rhythm, dialogs, tables, segments, referral programme.
   Loaded after dashboard.css, so these rules refine the base components in place. Motion only animates transform and
   opacity (dialogs, page entrance, indicators); everything is disabled under prefers-reduced-motion at the end.
   ===================================================================================================================== */
:root {
  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --t-fast: 150ms;
  --t-base: 240ms;
  --t-slow: 400ms;
  interpolate-size: allow-keywords;
}

@keyframes cm-rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes cm-fade { from { opacity: 0; } }
@keyframes cm-fade-out { to { opacity: 0; } }
@keyframes cm-pop-in { from { opacity: 0; transform: translateY(-4px) scale(0.98); } }
@keyframes cm-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* ---- Press and focus feedback on every control ---------------------------------------------------------------- */
.db a.db-btn, .db button.db-btn, .db .db-btn, .db .db-btn-ghost, .db .db-icon-btn, .db .db-seg button, .db .db-seg .db-seg-link,
.db .db-action > button, .db a.db-action {
  transition: background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-spring);
}
.db .db-btn:active, .db .db-btn-ghost:active, .db .db-icon-btn:active,
.db .db-seg button:active, .db .db-seg .db-seg-link:active { transform: scale(0.97); }
.db .db-action > button:active, .db a.db-action:active { transform: scale(0.99); }
.db .db-btn:focus-visible, .db .db-btn-ghost:focus-visible, .db .db-icon-btn:focus-visible,
.db .db-seg button:focus-visible, .db .db-seg .db-seg-link:focus-visible {
  outline: 2px solid var(--db-accent); outline-offset: 2px;
}
.db .db-btn-ghost { gap: 8px; }

/* ---- Page entrance: the blocks of a page rise in once, with a short stagger --------------------------------------- */
body:not(.is-chat) .db-content > .db-view > *,
body:not(.is-chat) .db-content > .db-note { animation: cm-rise var(--t-slow) var(--ease-out) both; }
body:not(.is-chat) .db-content > .db-view > :nth-child(2) { animation-delay: 40ms; }
body:not(.is-chat) .db-content > .db-view > :nth-child(3) { animation-delay: 80ms; }
body:not(.is-chat) .db-content > .db-view > :nth-child(4) { animation-delay: 120ms; }
body:not(.is-chat) .db-content > .db-view > :nth-child(5) { animation-delay: 160ms; }
body:not(.is-chat) .db-content > .db-view > :nth-child(n+6) { animation-delay: 200ms; }
body:not(.is-chat) .db-grid > .db-card { animation: cm-rise var(--t-slow) var(--ease-out) both; }
body:not(.is-chat) .db-grid > .db-card:nth-child(2) { animation-delay: 50ms; }
body:not(.is-chat) .db-grid > .db-card:nth-child(3) { animation-delay: 100ms; }
body:not(.is-chat) .db-grid > .db-card:nth-child(4) { animation-delay: 150ms; }
body:not(.is-chat) .db-grid > .db-card:nth-child(n+5) { animation-delay: 200ms; }
/* tab panes fade in when switched (they come back from display:none) */
[data-tabpane]:not([hidden]) { animation: cm-fade var(--t-base) var(--ease-out); }

/* ---- Page head: title and actions share one row while there is room ------------------------------------------- */
.db-page-head { align-items: flex-end; column-gap: 28px; row-gap: 14px; }
.db-page-head > div:first-child { flex: 1 1 440px; min-width: 0; }
.db-page-head h2 { letter-spacing: -0.02em; }
.db-page-head p { max-width: 80ch; line-height: 1.55; }
.db-page-head p + p { margin-top: 4px; }
.db-page-actions { align-items: center; }

/* ---- KPI grids: five cards in one row on wide screens, 3 + 2 below - never one card alone ------------------------ */
.db-kpi .db-metric-label { display: block; min-height: 2.6em; line-height: 1.3; }
@media (min-width: 1240px) {
  .db-grid:has(> .db-kpi:nth-child(5):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (min-width: 700px) and (max-width: 1239px) {
  .db-grid:has(> .db-kpi:nth-child(5):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .db-grid:has(> .db-kpi:nth-child(5):last-child) > :nth-child(-n+3) { grid-column: span 2; }
  .db-grid:has(> .db-kpi:nth-child(5):last-child) > :nth-child(n+4) { grid-column: span 3; }
}

/* ---- Segmented controls with a sliding indicator (cm.js adds .db-seg-ind) ------------------------------------- */
.db-seg { position: relative; isolation: isolate; max-width: 100%; }
.db-seg-ind {
  position: absolute; z-index: -1; top: 3px; left: 0; height: calc(100% - 6px); width: 0;
  border-radius: 999px; background: var(--db-dark);
  box-shadow: 0 1px 2px var(--db-shadow-c), 0 4px 12px -4px var(--db-shadow-c2);
  pointer-events: none;
  transition: transform var(--t-base) var(--ease-spring), width var(--t-base) var(--ease-spring), opacity var(--t-fast) var(--ease-out);
}
.db-seg.has-ind button.is-active,
.db-seg.has-ind .db-seg-link.is-active { background: transparent; }
.db-seg.is-still .db-seg-ind { transition: none; }
/* a segment row used as page navigation sits at its natural width and scrolls sideways on small screens */
.db-view > .db-seg, nav.db-seg { align-self: flex-start; overflow-x: auto; scrollbar-width: none; }
.db-view > .db-seg::-webkit-scrollbar, nav.db-seg::-webkit-scrollbar { display: none; }
.db-seg .db-seg-link { white-space: nowrap; }
.db-card .db-seg + .db-table-wrap, .db-card .db-seg + .db-empty { margin-top: 14px; }

/* ---- Cards: description lines under a card head get room before the content ------------------------------------ */
.db-card-head + .db-metric-note { margin: -6px 0 16px; max-width: 80ch; line-height: 1.5; }
.db-card-head h3 { letter-spacing: -0.01em; }

/* ---- Dialogs (shared modal host and drawer) -------------------------------------------------------------------- */
.db-drawer-back, .db-confirm-back {
  background: var(--db-scrim);
  -webkit-backdrop-filter: blur(8px) saturate(1.15);
  backdrop-filter: blur(8px) saturate(1.15);
  animation: cm-fade var(--t-base) var(--ease-out);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .db-drawer-back, .db-confirm-back { background: var(--db-overlay); }
}
.db-drawer-panel {
  width: min(600px, calc(100% - 32px));
  border: 1px solid var(--db-line);
  border-radius: 22px;
  background: var(--db-surface);
  box-shadow: 0 30px 80px -12px var(--db-shadow-c2), 0 10px 28px -10px var(--db-shadow-c2);
  animation: cm-dialog-in var(--t-base) var(--ease-spring);
}
.db-drawer-panel.is-wide { width: min(1100px, calc(100% - 32px)); }
.db-drawer-panel.is-xwide { width: min(1400px, calc(100% - 32px)); }
@keyframes cm-dialog-in {
  from { opacity: 0; transform: translate(-50%, -48%) scale(0.96); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes cm-dialog-out {
  from { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  to   { opacity: 0; transform: translate(-50%, -49%) scale(0.97); }
}
.is-closing .db-drawer-panel { animation: cm-dialog-out var(--t-fast) var(--ease-out) forwards; }
.is-closing .db-drawer-back, .is-closing .db-confirm-back { animation: cm-fade-out var(--t-fast) var(--ease-out) forwards; }
.db-drawer-head {
  gap: 12px;
  padding: 20px 22px 12px 26px;
  border-bottom: 0;
  background: transparent;
}
.db-drawer-head h3 {
  font-family: var(--font-sofia), Arial, sans-serif;
  font-size: 1.22rem; font-weight: 600; letter-spacing: -0.015em; line-height: 1.3;
}
.db-drawer-head .db-icon-btn {
  width: 34px; height: 34px; border: 0; background: var(--db-sunken); color: var(--db-ink-2);
}
.db-drawer-head .db-icon-btn:hover { background: var(--db-line); color: var(--db-ink); }
.db-drawer-body { padding: 6px 26px 24px; }
.db-drawer-foot {
  gap: 10px;
  padding: 14px 22px 14px 26px;
  border-top: 1px solid var(--db-line);
  background: color-mix(in srgb, var(--db-sunken) 55%, var(--db-surface));
}
.db-drawer-foot:empty { display: none; }
/* modal body: one column with even spacing between form, quote, action list and notes */
[data-modal-body] > div { display: flex; flex-direction: column; gap: 18px; }
[data-modal-body] > div > * { margin-top: 0; margin-bottom: 0; }
[data-modal-body] .db-modal-text { margin: 0; line-height: 1.55; }
.db-confirm { animation: none; }
.db-confirm-panel { border: 1px solid var(--db-line); border-radius: 22px; animation: cm-confirm-in var(--t-base) var(--ease-spring); }
@keyframes cm-confirm-in { from { opacity: 0; transform: scale(0.96); } }
.db-confirm.is-closing .db-confirm-panel { animation: cm-fade-out var(--t-fast) var(--ease-out) forwards; }
@media (max-width: 560px) {
  .db-drawer-panel { border-radius: 22px 22px 0 0; border-bottom: 0; animation: cm-sheet-in var(--t-slow) var(--ease-spring); }
  .db-drawer-panel::before {
    content: ""; position: absolute; top: 7px; left: 50%; width: 38px; height: 4px; margin-left: -19px;
    border-radius: 999px; background: var(--db-line-2);
  }
  .db-drawer-head { padding: 22px 18px 10px 20px; }
  .db-drawer-body { padding: 6px 20px 20px; }
  .db-drawer-foot { padding: 12px 18px calc(12px + env(safe-area-inset-bottom)) 20px; }
  .db-drawer-foot > div { width: 100%; }
  .db-drawer-foot .db-btn, .db-drawer-foot .db-btn-ghost { flex: 1 1 0; justify-content: center; }
  .is-closing .db-drawer-panel { animation: cm-sheet-out var(--t-base) var(--ease-out) forwards; }
  @keyframes cm-sheet-in { from { transform: translateY(100%); } }
  @keyframes cm-sheet-out { to { transform: translateY(100%); } }
}

/* form fields everywhere (dialogs, cards) */
.db-field > span { font-size: 13px; color: var(--db-ink-2); }
.db-field input, .db-field select, .db-field textarea { border-radius: 12px; padding: 11px 14px; }
.db-field textarea { min-height: 96px; line-height: 1.5; resize: vertical; }
.db-field input:hover, .db-field select:hover, .db-field textarea:hover { border-color: var(--db-line-2); }
.db-field input:focus, .db-field select:focus, .db-field textarea:focus { border-color: var(--db-accent); box-shadow: 0 0 0 4px var(--db-accent-soft); }
em.db-field-hint, .db-field-hint { font-style: normal; font-weight: 400; color: var(--db-ink-3); }
.db-field > span .db-field-hint::before { content: "·"; margin-right: 6px; color: var(--db-line-2); }

/* choices inside a dialog: calm list of options with an icon tile */
.db-action > button, a.db-action { gap: 14px; padding: 13px 16px; border-radius: 14px; }
.db-action .wa-ic {
  width: 34px; height: 34px; padding: 8px; box-sizing: border-box; border-radius: 10px;
  background: var(--db-accent-soft); color: var(--db-accent-text);
}
.db-action.is-danger .wa-ic { background: var(--db-bad-soft); color: var(--db-bad); }
.db-action b { font-size: 14px; }
.db-action small { line-height: 1.4; }
/* quoted fan text in a reply dialog */
.db-quote {
  margin: 0; padding: 14px 16px; border: 0; border-radius: 14px;
  background: var(--db-sunken); color: var(--db-ink); font-size: 14.5px; line-height: 1.55; white-space: pre-wrap;
  position: relative;
}
.db-quote::before {
  content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--db-accent);
}

/* ---- Tables ---------------------------------------------------------------------------------------------------- */
.db-table { border-collapse: separate; border-spacing: 0; }
.db-table thead th {
  padding: 10px 14px;
  background: var(--db-sunken);
  font-size: 11px; letter-spacing: 0.06em;
  color: var(--db-ink-3);
  vertical-align: middle;
}
.db-table thead th:first-child { border-radius: 10px 0 0 10px; }
.db-table thead th:last-child { border-radius: 0 10px 10px 0; }
.db-table thead th:only-child { border-radius: 10px; }
.db-table th.is-num { text-align: right; }
.db-table td { padding: 14px; border-top: 0; border-bottom: 1px solid var(--db-line); line-height: 1.45; }
.db-table tbody tr:last-child td { border-bottom: 0; }
.db-table tbody td { transition: background-color var(--t-fast) var(--ease-out); }
.db-table tbody tr:hover td { background: color-mix(in srgb, var(--db-sunken) 65%, transparent); }
.db-table tbody tr:hover td:first-child { border-radius: 10px 0 0 10px; }
.db-table tbody tr:hover td:last-child { border-radius: 0 10px 10px 0; }
.db-table.is-zebra tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--db-sunken) 40%, transparent); }
.db-table-sub { margin-top: 2px; line-height: 1.4; }
.db-table td.is-num, .db-table td .is-num { font-variant-numeric: tabular-nums; }
.db-table tfoot td { border-bottom: 0; }
/* a table without a header row (e.g. settings lists) starts flush below the card head */
.db-table:not(:has(thead)) tbody tr:first-child td { border-top: 0; }
/* sticky header row while the page scrolls past a long table (cm.js marks wrappers that do not scroll sideways) */
.db-table-wrap.is-fit { overflow: visible; }
.db-table-wrap.is-fit .db-table thead th { position: sticky; top: var(--db-topbar); z-index: 2; }
/* row actions: stays a real table cell (display:flex broke the row borders), buttons side by side on the right */
td.db-row-actions { display: table-cell; width: 1%; text-align: right; white-space: nowrap; }
td.db-row-actions > * { vertical-align: middle; }
td.db-row-actions > * + * { margin-left: 6px; }
.db-chip { line-height: 1.35; }

/* cards: every row becomes a small card on phones (and on tablets when the table does not fit) - cm.js sets .is-cards
   and copies the header labels into data-label */
.db-table-wrap:has(> .db-table.is-cards) { overflow: visible; margin: 0; padding: 0; }
.db-table.is-cards, .db-table.is-cards tbody, .db-table.is-cards tfoot,
.db-table.is-cards tr, .db-table.is-cards td { display: block; width: auto; }
.db-table.is-cards thead { display: none; }
.db-table.is-cards tbody { display: flex; flex-direction: column; gap: 10px; }
.db-table.is-cards tr {
  padding: 12px 14px; border: 1px solid var(--db-line); border-radius: 16px; background: var(--db-surface);
}
.db-table.is-cards td {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 5px 0; border: 0; text-align: right; background: none !important;
}
.db-table.is-cards td::before {
  content: attr(data-label); flex: none; max-width: 46%;
  font-size: 12px; font-weight: 600; color: var(--db-ink-3); text-align: left;
}
.db-table.is-cards td:not([data-label])::before, .db-table.is-cards td[data-label=""]::before { content: none; }
.db-table.is-cards td:first-child {
  display: block; padding: 0 0 9px; margin-bottom: 4px; border-bottom: 1px solid var(--db-line);
  text-align: left; font-weight: 600;
}
.db-table.is-cards td:first-child::before { content: none; }
.db-table.is-cards td.db-row-actions { display: flex; justify-content: flex-end; width: auto; padding-top: 10px; }
.db-table.is-cards td.db-row-actions:empty { display: none; }
.db-table.is-cards td > .db-table-sub { display: block; }
.db-table.is-cards tfoot tr { border-style: dashed; }

/* ---- Loading: shimmer over a block that is being refreshed (stats panels, chat panels) -------------------------- */
.is-loading, [aria-busy="true"] { position: relative; }
.is-loading::after, [aria-busy="true"]::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--db-surface) 70%, transparent) 50%, transparent 100%);
  animation: cm-shimmer 1.2s var(--ease-out) infinite;
}
.db-skel {
  position: relative; overflow: hidden; display: block; min-height: 14px; border-radius: 8px; background: var(--db-sunken);
}
.db-skel::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--db-surface) 75%, transparent), transparent);
  animation: cm-shimmer 1.2s var(--ease-out) infinite;
}

/* ---- Popovers, selects, toasts -------------------------------------------------------------------------------- */
.db-select-list:not([hidden]), .db-pop:not([hidden]) { animation: cm-pop-in var(--t-fast) var(--ease-spring); transform-origin: top right; }
.db-toast { animation: cm-toast-in var(--t-slow) var(--ease-spring); transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out); }
@keyframes cm-toast-in { from { opacity: 0; transform: translateY(14px) scale(0.96); } }

/* ---- Sidebar groups open and close with height (interpolate-size) ----------------------------------------------- */
.db-nav-items { overflow: hidden; height: auto; transition: height var(--t-base) var(--ease-spring), opacity var(--t-base) var(--ease-out); }
.db-nav-label[aria-expanded="false"] + .db-nav-items { display: flex; height: 0; opacity: 0; visibility: hidden;
  transition: height var(--t-base) var(--ease-spring), opacity var(--t-fast) var(--ease-out), visibility 0s linear var(--t-base); }
.db-nav-caret { transition: transform var(--t-base) var(--ease-spring); }
details { interpolate-size: allow-keywords; }
details::details-content { height: 0; overflow: clip; transition: height var(--t-base) var(--ease-spring), content-visibility var(--t-base) allow-discrete; }
details[open]::details-content { height: auto; }

/* ---- Platform account page --------------------------------------------------------------------------------- */
.db-acct-tabs { margin-top: 0; }
.db-acct-head { display: flex; align-items: center; gap: 14px; }
.db-acct-head .db-card-icon { width: 46px; height: 46px; border-radius: 14px; }
.db-post-cell { min-width: 240px; }
.db-post-thumb { width: 56px; height: 56px; border-radius: 12px; }
.db-setting-value { display: block; max-width: 62ch; line-height: 1.5; }
.db-setting-label b { display: block; }
.db-check-grid { gap: 8px 16px; }
.db-check {
  gap: 10px; padding: 8px 10px; border: 1px solid var(--db-line); border-radius: 10px; background: var(--db-surface);
  cursor: pointer; transition: border-color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}
.db-check:hover { border-color: var(--db-line-2); }
.db-check:has(input:checked) { border-color: var(--db-accent); background: var(--db-accent-soft); }
.db-check:has(input:disabled) { opacity: 0.5; cursor: not-allowed; }
.db-check input { accent-color: var(--db-accent); }
.db-check-grid > span { font-size: 13px; color: var(--db-ink-2); }

/* ---- Platform cards (customer/platforms) and billing price list -------------------------------------------- */
.db-acct-card .db-acct-head { flex-wrap: wrap; row-gap: 8px; }
.db-acct-card .db-acct-head .db-chip { margin-left: auto; }
.db-price-list .is-num, .db-price-list b, .db-price-list strong { white-space: nowrap; }

/* ---- Referral programme ("Empfehlen & sparen") ------------------------------------------------------------- */
.rf-card { gap: 18px; overflow: hidden; }
.rf-card.is-page { padding: clamp(22px, 3vw, 34px); }
.rf-hero { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 26px; align-items: center; }
.rf-hero h3 {
  margin: 10px 0 8px; max-width: 26ch;
  font-family: var(--font-sofia), Arial, sans-serif; font-size: clamp(1.35rem, 2.1vw, 1.75rem); font-weight: 600;
  letter-spacing: -0.02em; line-height: 1.2;
}
.rf-hero p { margin: 0; max-width: 60ch; font-size: 14.5px; line-height: 1.6; color: var(--db-ink-2); }
.rf-kicker {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 6px; border-radius: 999px;
  background: var(--db-accent-soft); color: var(--db-accent-text); font-size: 13px; font-weight: 600;
}
.rf-kicker .wa-ic { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 999px; background: var(--db-accent); color: var(--db-on-accent); font-size: 12px; }
.rf-perks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.rf-perk {
  display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: 18px;
  background: var(--db-sunken); border: 1px solid var(--db-line);
}
.rf-perk:first-child { background: var(--db-dark); border-color: var(--db-dark); color: var(--db-on-dark); }
.rf-perk:first-child .rf-perk-text { color: var(--db-on-dark-dim); }
.rf-perk-value {
  font-family: var(--font-sofia), Arial, sans-serif; font-size: 1.9rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1;
}
.rf-perk:first-child .rf-perk-value { color: var(--db-accent); }
.rf-perk-text { font-size: 13px; line-height: 1.4; color: var(--db-ink-3); }
.rf-share { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 260px); gap: 12px; }
.rf-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.rf-field > span { font-size: 13px; font-weight: 600; color: var(--db-ink-2); }
.rf-input {
  display: flex; align-items: center; gap: 8px; min-width: 0; padding: 5px 5px 5px 14px;
  border: 1px solid var(--db-line); border-radius: 14px; background: var(--db-page);
}
.rf-input code {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: inherit; font-size: 14px; color: var(--db-ink); cursor: copy;
}
.rf-field-code .rf-input code { font-weight: 700; letter-spacing: 0.1em; }
.rf-input .db-btn, .rf-input .db-btn-ghost { flex: none; }
.rf-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.rf-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.rf-stats > div {
  display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: 16px;
  background: var(--db-sunken); border: 1px solid transparent;
}
.rf-stats .db-metric-value { font-size: 1.75rem; }
.rf-stats .db-metric-value.is-ok { color: var(--db-ok); }
.rf-fine { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--db-ink-3); }
.rf-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: rf; }
.rf-steps li {
  counter-increment: rf; position: relative; padding: 18px 18px 18px 60px; border-radius: 16px; border: 1px solid var(--db-line);
  font-size: 13.5px; line-height: 1.5; color: var(--db-ink-2);
}
.rf-steps li::before {
  content: counter(rf); position: absolute; left: 18px; top: 18px; width: 28px; height: 28px; border-radius: 999px;
  display: grid; place-items: center; background: var(--db-accent-soft); color: var(--db-accent-text); font-weight: 700; font-size: 13px;
}
.rf-steps b { display: block; margin-bottom: 2px; color: var(--db-ink); font-size: 14px; }
.rf-calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 24px; align-items: center; }
.rf-calc-inputs { display: grid; gap: 18px; }
.rf-range { display: grid; gap: 8px; }
.rf-range > span { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; color: var(--db-ink-2); }
.rf-range > span b { color: var(--db-ink); font-variant-numeric: tabular-nums; }
.rf-range input[type="range"] { width: 100%; accent-color: var(--db-accent); }
.rf-calc-out {
  display: grid; gap: 6px; padding: 22px; border-radius: 18px; background: var(--db-dark); color: var(--db-on-dark); text-align: left;
}
.rf-calc-out small { font-size: 12.5px; color: var(--db-on-dark-dim); }
.rf-calc-out strong {
  font-family: var(--font-sofia), Arial, sans-serif; font-size: 2.3rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1.05;
  color: var(--db-accent); font-variant-numeric: tabular-nums;
}
.rf-calc-out span { font-size: 13px; color: var(--db-on-dark-dim); }
/* compact card on the dashboard */
.rf-card.is-compact .rf-lead { margin: -6px 0 0; max-width: 80ch; font-size: 14px; line-height: 1.55; color: var(--db-ink-2); }
@media (max-width: 900px) {
  .rf-hero, .rf-calc { grid-template-columns: minmax(0, 1fr); }
  .rf-steps { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .rf-share, .rf-stats, .rf-perks { grid-template-columns: minmax(0, 1fr); }
  .rf-actions > * { flex: 1 1 auto; justify-content: center; }
}

/* ---- Moderator chat: heart reaction on fan messages, fan typing indicator --------------------------------------- */
.mc-react {
  display: inline-grid; place-items: center; width: 28px; height: 28px; margin-left: 2px; padding: 0;
  border: 1px solid var(--db-line); border-radius: 999px; background: var(--db-surface); color: var(--db-ink-3);
  font-size: 14px; line-height: 1; cursor: pointer;
  transition: transform var(--t-fast) var(--ease-spring), color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}
.mc-react:hover { color: #d6336c; border-color: rgba(214, 51, 108, 0.45); }
.mc-react:active { transform: scale(0.88); }
.mc-react.is-on { color: #fff; background: #d6336c; border-color: #d6336c; animation: cm-heart var(--t-slow) var(--ease-spring); }
.mc-react.is-pending { opacity: 0.6; cursor: progress; }
.mc-react.is-pending .mc-react-icon { animation: cm-heartbeat 900ms var(--ease-out) infinite; }
.mc-react.is-failed { color: var(--db-bad); border-color: var(--db-bad); border-style: dashed; }
@keyframes cm-heart { 0% { transform: scale(0.7); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
@keyframes cm-heartbeat { 50% { transform: scale(1.2); } }
.mc-typing {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 8px; padding: 6px 12px; border-radius: 999px;
  background: var(--db-sunken); color: var(--db-ink-2); font-size: 12.5px;
  animation: cm-rise var(--t-base) var(--ease-spring);
}
.mc-typing[hidden] { display: none; }
.mc-typing-dots { display: inline-flex; gap: 3px; }
.mc-typing-dots i { width: 5px; height: 5px; border-radius: 999px; background: var(--db-ink-3); animation: cm-dot 1.1s var(--ease-out) infinite; }
.mc-typing-dots i:nth-child(2) { animation-delay: 150ms; }
.mc-typing-dots i:nth-child(3) { animation-delay: 300ms; }
@keyframes cm-dot { 0%, 60%, 100% { opacity: 0.35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

/* ---- Reduced motion: no entrance, no springs, no shimmer ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important;
    transition-duration: 1ms !important; scroll-behavior: auto !important;
  }
  .is-loading::after, [aria-busy="true"]::after, .db-skel::after { display: none; }
}
.mc-react img.mc-react-icon { width: 20px; height: 20px; object-fit: contain; }
.mc-react.is-on:has(img) { background: var(--db-surface); border-color: var(--db-line-2); }
.mc-react.is-fixed { cursor: default; }
.mc-tag-icon { width: 16px; height: 16px; object-fit: contain; vertical-align: -3px; }
.mc-react-pop {
  position: fixed; z-index: 85; width: min(332px, calc(100vw - 24px)); padding: 12px;
  border: 1px solid var(--db-line); border-radius: 18px; background: var(--db-surface);
  box-shadow: 0 24px 60px -12px var(--db-shadow-c2), 0 6px 18px -6px var(--db-shadow-c2);
  animation: cm-pop-in var(--t-fast) var(--ease-spring);
}
.mc-react-pop p { margin: 2px 4px 8px; font-size: 12px; font-weight: 600; color: var(--db-ink-3); }
.mc-react-pop p:not(:first-child) { margin-top: 12px; }
.mc-react-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.mc-react-grid button {
  display: grid; place-items: center; aspect-ratio: 1; padding: 4px; border: 0; border-radius: 10px; background: transparent;
  cursor: pointer; transition: transform var(--t-fast) var(--ease-spring), background-color var(--t-fast) var(--ease-out);
}
.mc-react-grid button:hover { background: var(--db-sunken); transform: scale(1.12); }
.mc-react-grid button:active { transform: scale(0.94); }
.mc-react-grid img { width: 30px; height: 30px; object-fit: contain; }
.mc-fav {
  flex: none; align-self: flex-start; margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border: 1px solid var(--db-line-2); border-radius: 999px; background: var(--db-surface);
  color: var(--db-ink-2); font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer;
  transition: transform var(--t-fast) var(--ease-spring), background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.mc-fav:hover { border-color: var(--db-ink-3); color: var(--db-ink); }
.mc-fav:active { transform: scale(0.95); }
.mc-fav .mc-fav-star { font-size: 14px; line-height: 1; }
.mc-fav.is-on { border-color: #e0a93c; background: rgba(224, 169, 60, 0.14); color: var(--db-warn); }
.mc-fav.is-on .mc-fav-star { animation: cm-heart var(--t-slow) var(--ease-spring); }
.mc-fav.is-pending { opacity: 0.65; }
.mc-fav.is-unknown { border-style: dashed; }
/* cards inside display:contents wrappers (referral page) rise in like direct children of the view */
body:not(.is-chat) .db-view > .rf-history > .db-card { animation: cm-rise var(--t-slow) var(--ease-out) both; animation-delay: 120ms; }
/* rank badge in top lists, settings rows, cells that must not wrap */
.db-table .db-rank-col { width: 1%; white-space: nowrap; }
.db-rank {
  display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 6px; border-radius: 999px;
  background: var(--db-sunken); color: var(--db-ink-2); font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.db-table tr:nth-child(-n+3) .db-rank { background: var(--db-accent-soft); color: var(--db-accent-text); }
.db-nowrap { white-space: nowrap; }
.db-settings-table td.db-setting-label { width: 34%; }
.db-settings-table td.db-setting-label .db-table-sub { max-width: 46ch; }
.db-settings-table.is-cards td { justify-content: flex-start; text-align: left; }
.db-settings-table.is-cards td.db-setting-label { width: auto; }
.db-settings-table.is-cards td.db-row-actions { justify-content: flex-end; }
/* platform cards: long account names truncate instead of pushing the status out, three compact actions in one row */
.db-acct-name { flex: 1 1 auto; min-width: 0; }
.db-acct-name .db-table-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-acct-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.db-acct-acts .db-btn-ghost { padding: 7px 13px; }
.db-acct-acts .db-acct-more { padding: 7px 10px; }
/* fact lists (prices, open items): amounts never break between number and currency */
.db-facts.is-money dd { white-space: nowrap; font-variant-numeric: tabular-nums; }
/* segment rows never wrap: they scroll sideways (the indicator needs one line) */
.db-seg { flex-wrap: nowrap; }
.db-seg > * { flex: none; }
/* stacked cells: label column + value column; everything a cell contains stays together in the value column */
.db-table.is-cards td:not(:first-child):not(.db-row-actions) {
  display: grid; grid-template-columns: minmax(0, 34%) minmax(0, 1fr); column-gap: 14px; row-gap: 2px; align-items: start;
  text-align: left;
}
.db-table.is-cards td:not(:first-child):not(.db-row-actions)::before { grid-column: 1; grid-row: 1; max-width: none; }
.db-table.is-cards td:not(:first-child):not(.db-row-actions) > * { grid-column: 2; justify-self: start; }
.db-table.is-cards td:not([data-label]):not(:first-child):not(.db-row-actions),
.db-table.is-cards td[data-label=""]:not(:first-child):not(.db-row-actions) { grid-template-columns: minmax(0, 1fr); }
.db-table.is-cards td:not([data-label]):not(:first-child):not(.db-row-actions) > *,
.db-table.is-cards td[data-label=""]:not(:first-child):not(.db-row-actions) > * { grid-column: 1; }
.db-table.is-cards td.is-num { text-align: left; }
.db-seg { overflow-x: auto; scrollbar-width: none; }
.db-seg::-webkit-scrollbar { display: none; }
.db-table.is-cards td { overflow-wrap: anywhere; min-width: 0; }
.db-table.is-cards tr { min-width: 0; }
.db-table.is-cards td.is-num, .db-table.is-cards td .db-nowrap { white-space: normal; }
.db-nav.is-still .db-nav-items, .db-nav.is-still .db-nav-caret { transition: none !important; }
/* interactive tiles lift slightly under the pointer */
@media (hover: hover) {
  .db-acct, .db-med { transition: transform var(--t-base) var(--ease-spring), box-shadow var(--t-base) var(--ease-out), border-color var(--t-fast) var(--ease-out); }
  .db-acct:hover, .db-med:hover { transform: translateY(-2px); box-shadow: 0 18px 44px -18px var(--db-shadow-c2); }
}
/* the indicator uses the pill tone so it stays visible in dark mode */
.db-seg-ind { background: var(--db-pill); }
.db-seg.has-ind button.is-active, .db-seg.has-ind .db-seg-link.is-active { color: var(--db-pill-ink); }
.db-seg.has-ind > .is-active { color: var(--db-pill-ink); background: transparent; }
.db-seg > a { color: var(--db-ink-2); text-decoration: none; transition: color var(--t-fast) var(--ease-out); }
.db-seg > a:hover { color: var(--db-ink); }
.db-seg.has-ind > a.is-active:hover { color: var(--db-pill-ink); }
/* referral calculator sliders: filled part in the accent, light track, round thumb */
.rf-range input[type="range"] {
  -webkit-appearance: none; appearance: none; height: 6px; margin: 8px 0; border-radius: 999px; outline: none;
  background: linear-gradient(to right, var(--db-accent) var(--p, 50%), var(--db-line) var(--p, 50%));
}
.rf-range input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--db-accent);
  background: var(--db-surface); box-shadow: 0 2px 8px var(--db-shadow-c2); cursor: grab;
  transition: transform var(--t-fast) var(--ease-spring);
}
.rf-range input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.15); cursor: grabbing; }
.rf-range input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--db-accent); background: var(--db-surface); cursor: grab;
}
.rf-range input[type="range"]:focus-visible { box-shadow: 0 0 0 4px var(--db-accent-soft); }
.db-table.is-cards td:first-child .db-table-sub { font-weight: 400; margin-top: 3px; }
.db-table.is-cards td.db-row-actions > * + * { margin-left: 0; }
.db-table.is-cards td.db-row-actions { gap: 8px; }
/* settings/profile groups: same column grid in every card, so values and status chips line up across groups */
.db-settings-table:not(.is-cards) { table-layout: fixed; }
.db-settings-table:not(.is-cards) td.db-setting-label { width: 30%; }
.db-settings-table:not(.is-cards) td:nth-child(3) { width: 150px; }
.db-settings-table:not(.is-cards) td.db-row-actions { width: 104px; }

/* Moderator chat: the model's profile on the platform (read-only) */
.mc-platform-profile .mc-profile-group { margin: 14px 0 6px; font-size: .78rem; font-weight: 600; color: var(--db-muted, #6b6b6b); }
.mc-platform-profile .mc-profile-group:first-of-type { margin-top: 4px; }
.mc-platform-profile .mc-profile-text { margin: 6px 0; }
.mc-platform-profile .mc-profile-text summary { cursor: pointer; font-weight: 600; font-size: .86rem; }
.mc-platform-profile .mc-profile-text p { margin: 6px 0 0; white-space: pre-wrap; }

/* ==========================================================================================================
   Moderator chat v2 (2026-10-10): calmer columns, readable values, message bubbles like a messenger.
   Overrides the first mc-* block above; tokens from dashboard.css (light/dark).
   ========================================================================================================== */

/* Side columns: head, status, top customer */
.mc-head { align-items: flex-start; gap: 12px; padding: 2px 2px 0; }
.mc-head-photo { width: 56px; height: 56px; border-radius: 14px; }
.mc-head-text { flex: 1; min-width: 0; padding-top: 2px; }
.mc-head-text h3 { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; flex-wrap: nowrap; }
.mc-head-text h3 .mc-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-head-text h3 .mc-age { flex: none; }
.mc-status { flex-wrap: wrap; row-gap: 2px; line-height: 1.35; }
.mc-status .mc-status-what { color: var(--db-ink-3); white-space: nowrap; }
.mc-status .mc-status-what::before { content: "·"; margin-right: 6px; color: var(--db-ink-3); }
.mc-fav { width: 36px; height: 36px; padding: 0; justify-content: center; gap: 0; border-radius: 12px; }
.mc-fav .mc-fav-star { font-size: 17px; }
.mc-vip { display: flex; align-items: center; gap: 8px; margin: 0; padding: 9px 12px; border-radius: 12px;
  background: color-mix(in srgb, #e0a93c 13%, var(--db-surface)); border: 1px solid color-mix(in srgb, #e0a93c 35%, var(--db-line));
  color: var(--db-ink); font-size: 13px; font-weight: 500; }
.mc-vip wa-icon, .mc-vip .ic { color: #c98a12; font-size: 14px; }
.mc-vip b { font-weight: 700; }
.mc-vip span { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Info cards: label left, value left-aligned next to it - long values wrap under themselves, not ragged right */
.db-card.mc-info { padding: 14px 16px 12px; border-radius: 16px; }
.mc-info-head { margin-bottom: 4px; }
.mc-info-head h4 { font-size: 14px; letter-spacing: -0.005em; }
.mc-kv > div { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: baseline; gap: 12px; padding: 7px 0;
  border-top: 1px solid var(--db-line); font-size: 13.5px; }
.mc-kv > div:first-child { border-top: 0; }
.mc-kv > div.is-gap { margin-top: 0; }
.mc-kv dt { color: var(--db-ink-3); font-size: 12.5px; line-height: 1.4; }
.mc-kv dd, .mc-kv.is-facts dd { text-align: left; font-weight: 550; color: var(--db-ink); line-height: 1.45; }
.mc-kv.is-facts > div.is-empty-row { display: none; }
.mc-kv.is-facts.is-all > div.is-empty-row { display: grid; }
.mc-fact-value { display: block; width: calc(100% + 12px); text-align: left; margin: -3px -6px; padding: 3px 6px; font-weight: 550; }
.mc-fact-value.is-empty { font-weight: 400; }
.mc-more { display: inline-flex; align-items: center; gap: 6px; margin: 6px 0 2px; padding: 4px 0; border: 0; background: none;
  color: var(--db-accent); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.mc-more:hover { text-decoration: underline; text-underline-offset: 3px; }
.mc-notes { margin-top: 10px; }
.mc-notes textarea { border-radius: 12px; min-height: 64px; }
.mc-platform-profile .mc-profile-group { margin: 12px 0 2px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em; color: var(--db-ink-3); }
.mc-platform-profile .mc-profile-text { padding: 7px 0; border-top: 1px solid var(--db-line); }
.mc-platform-profile .mc-profile-text summary { list-style: none; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--db-ink-2); }
.mc-platform-profile .mc-profile-text summary::-webkit-details-marker { display: none; }
.mc-platform-profile .mc-profile-text summary::after { content: ""; margin-left: auto; width: 7px; height: 7px; border-right: 1.5px solid var(--db-ink-3);
  border-bottom: 1.5px solid var(--db-ink-3); transform: rotate(45deg); transition: transform var(--t-fast, 150ms) var(--ease-out, ease-out); }
.mc-platform-profile .mc-profile-text[open] summary::after { transform: rotate(-135deg); }
.mc-platform-profile .mc-profile-text p { font-size: 13px; line-height: 1.55; color: var(--db-ink); }
.mc-text p { line-height: 1.55; }

/* Conversation: sunken log, white fan bubbles left, tinted own bubbles right */
.mc-log { background: var(--db-sunken); gap: 10px; padding: 16px 18px; }
.mc-msg { max-width: min(76%, 600px); padding: 9px 13px 8px; border-radius: 16px; background: var(--db-surface);
  border: 1px solid var(--db-line); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.03); }
.mc-msg.is-fan { border-bottom-left-radius: 6px; }
.mc-msg.is-us { border-bottom-right-radius: 6px; background: color-mix(in srgb, var(--db-accent) 9%, var(--db-surface));
  border-color: color-mix(in srgb, var(--db-accent) 24%, var(--db-line)); }
.mc-msg.is-external { border-style: dashed; background: var(--db-surface); }
.mc-msg header { gap: 6px; margin-bottom: 3px; font-size: 11.5px; }
.mc-msg header b { font-size: 12.5px; font-weight: 700; }
.mc-msg header time { font-size: 11.5px; }
.mc-tag { padding: 0 7px; font-size: 10px; line-height: 17px; }
.mc-msg p { font-size: 14.5px; line-height: 1.5; color: var(--db-ink); }
.mc-msg-img { border-radius: 10px; margin: 4px 0 6px; }
.mc-msg footer { padding: 0; margin-top: 5px; }
.mc-msg-meta { display: flex; align-items: center; justify-content: flex-end; gap: 10px; font-size: 11px; color: var(--db-ink-3); }
.mc-msg-meta .mc-ticks { font-weight: 600; letter-spacing: -0.01em; }
.mc-msg-meta .mc-ticks.is-read { color: #2b8be6; }
.mc-msg-meta .mc-ticks.is-bad { color: var(--db-bad); }
.mc-msg-meta .mc-pay { margin-right: auto; font-variant-numeric: tabular-nums; }
.mc-pinned { margin: 0; padding: 12px 18px; background: var(--db-surface); border-top: 1px solid var(--db-line); }
.mc-pinned .mc-msg { max-width: none; box-shadow: 0 0 0 3px var(--db-accent-soft); }

/* Hints above the log: one quiet line each */
.mc-proactive, .mc-lock { margin: 10px 16px 0; padding: 9px 12px; font-size: 12.5px; line-height: 1.45; border-radius: 12px; }

/* Composer */
.mc-composer { padding: 12px 16px 14px; background: var(--db-surface); }
.mc-composer textarea { border-radius: 14px; font-size: 14.5px; line-height: 1.5; min-height: 64px; }

/* Bottom counters of the fan column */
.mc-counters span { border-radius: 12px; font-size: 11px; letter-spacing: 0.04em; color: var(--db-ink-3); }

@media (max-width: 720px) {
  .mc-msg { max-width: 88%; }
  .mc-log { padding: 12px; }
  .mc-kv > div { grid-template-columns: 88px minmax(0, 1fr); }
}

/* Values in the side columns: medium weight - long lists (preferences, no-gos) stay readable */
.mc-kv dd, .mc-kv.is-facts dd, .mc-fact-value { font-weight: 500; }
.mc-kv dt { font-weight: 400; }
.mc-facts-empty { margin: 2px 0 4px; font-size: 12.5px; line-height: 1.45; color: var(--db-ink-3); }

/* Top navigation on phones: icons with counters only (labels stay for screen readers) - one-letter labels looked broken */
@media (max-width: 640px) {
  body.db.is-top .db-topnav .db-nav-item span:not(.db-nav-count) {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  body.db.is-top .db-topnav .db-nav-item { padding: 9px 4px; gap: 4px; }
  body.db.is-top .db-topnav .db-nav-item wa-icon { font-size: 18px; }
}

/* KPI values never break ("1.265,56 €" put the € on its own line): size follows the card width */
.db-kpi { container-type: inline-size; }
.db-kpi .db-metric-value { white-space: nowrap; font-size: clamp(1.35rem, 12.5cqi, 2.25rem); }

/* Stammdaten: short grouped cards, two columns from tablet width */
.pf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: var(--db-gap, 20px); align-items: start; }
.pf-grid > .db-card { margin: 0; }

/* Short forms inside a full-width card (password change etc.): fields stay at a readable width */
form.db-card.db-form > .db-field { max-width: 520px; }

/* Pricing: cent input and unit always on one line next to the rule; descriptions start upper-case */
.pr-cents { display: flex; align-items: center; gap: 8px; flex: none; margin: 0; }
.pr-cents input { width: 84px; text-align: right; font-variant-numeric: tabular-nums; }
.pr-cents span { font-size: 12.5px; color: var(--db-ink-3); width: 1.4em; }
form[action="/admin/pricing"] .db-fact dt::first-letter { text-transform: uppercase; }
.pr-cents input { padding: 7px 10px; border: 1px solid var(--db-line); border-radius: 10px; background: var(--db-surface); color: var(--db-ink); font: inherit; font-size: 13.5px; transition: border-color .2s, box-shadow .2s; }
.pr-cents input:focus { outline: none; border-color: var(--db-accent); box-shadow: 0 0 0 3px var(--db-accent-soft); }

/* Server-rendered series legend (not clickable) */
.hc-legend.is-static { margin-top: 10px; padding-top: 10px; }
.hc-legend.is-static .hc-legend-item { cursor: default; }
.hc-legend-item i.is-line { width: 14px; height: 3px; border-radius: 2px; }

/* Underline tabs (admin customer file etc.): scroll inside the bar on narrow screens instead of widening the page */
.db-tabs { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.db-tabs::-webkit-scrollbar { display: none; }
.db-tabs button { flex: none; white-space: nowrap; transition: color .2s var(--db-ease), border-color .25s var(--db-ease); }

/* Images: an empty FSK level is a slim row instead of a full card */
.fsk-group.is-empty { padding-block: 14px; }
.fsk-group.is-empty .db-card-head { margin-bottom: 2px; }
.fsk-group.is-empty .db-card-icon { width: 30px; height: 30px; border-radius: 9px; opacity: .7; }
.fsk-group.is-empty > .db-metric-note { margin: 0 0 0 calc(30px + 12px); }
@media (max-width: 640px) { .fsk-group.is-empty > .db-metric-note { margin-left: 0; } }

/* Billing: two independent columns (open items + payment left, prices right) */
.bl-split { align-items: start; }
.bl-col { display: flex; flex-direction: column; gap: var(--db-gap, 20px); min-width: 0; }
.bl-col > .db-card { margin: 0; }
.db-bank b small { display: block; margin-top: 2px; font-weight: 400; color: var(--db-ink-3); font-size: 12px; white-space: normal; }
.db-facts.is-money dt::first-letter { text-transform: uppercase; }

/* "Individuell" sits next to the preset segment control at the same height and type, not as a smaller bold pill */
.hc-custom > [data-custom-toggle] { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border: 1px solid var(--db-line);
    border-radius: 999px; background: var(--db-surface); color: var(--db-ink-2); font-size: 13.5px; font-weight: 400; line-height: 1.45; }
.hc-custom > [data-custom-toggle] wa-icon { font-size: 13px; }
.hc-custom > [data-custom-toggle]:hover { color: var(--db-ink); border-color: var(--db-line-2, var(--db-line)); }
.hc-custom > [data-custom-toggle].is-active { background: var(--db-dark); border-color: var(--db-dark); color: var(--db-on-dark); }

/* Moderator statement: one heading row per day */
.st-statement tr.st-day td { padding: 18px 12px 8px; background: transparent; border-bottom: 1px solid var(--db-line-2, var(--db-line)); }
.st-statement tr.st-day:first-child td { padding-top: 6px; }
.st-statement tr.st-day b { font-weight: 600; color: var(--db-ink); margin-right: 10px; }
.st-statement tr.st-day span { font-size: 12.5px; color: var(--db-ink-3); font-variant-numeric: tabular-nums; }
.st-statement tr.st-day:hover td { background: transparent; }

/* Inputs with an icon inside: keep room for the icon - the general ".db-field input { padding: 11px 14px }" above wins otherwise */
.db-field .apply-addr-search-wrap input { padding-left: 40px; }
.db-field .apply-pwd-wrap input, .db-field .pa-pw input { padding-right: 44px; }

/* Native selects get the same thin chevron as the custom pickers (drawn with gradients, so it follows the theme colours) */
.db-field select:not([multiple]), .db-cell-actions select, .pr-cents select {
  -webkit-appearance: none; appearance: none; padding-right: 38px;
  background-image: linear-gradient(45deg, transparent calc(50% - .8px), var(--db-ink-3) calc(50% - .8px) calc(50% + .8px), transparent calc(50% + .8px)),
    linear-gradient(-45deg, transparent calc(50% - .8px), var(--db-ink-3) calc(50% - .8px) calc(50% + .8px), transparent calc(50% + .8px));
  background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}
.db-field select:not([multiple]):hover { border-color: var(--db-line-2, var(--db-line)); }

/* Dashboard to-dos: a visible action at the end of the row */
.db-status-tasks .db-note.is-link { align-items: center; }
.db-note-action { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px;
  background: var(--db-dark); color: var(--db-on-dark); font-size: 12.5px; font-weight: 600; white-space: nowrap;
  transition: transform .2s var(--db-ease), background-color .2s var(--db-ease); }
.db-note-action wa-icon { font-size: 11px; transition: transform .2s var(--db-ease); }
.db-note.is-link:hover .db-note-action wa-icon { transform: translateX(3px); }
@media (max-width: 640px) { .db-status-tasks .db-note.is-link { flex-wrap: wrap; } .db-note-action { margin-left: 0; } }

/* ==== Professional finish (2026-10-11): calm like a banking app - sentence-case labels, figures on one width,
   KPI icon next to its label instead of a big tile above it, links that look like links ==== */
.db-metric-label { font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--db-ink-2); }
.db-table th { font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--db-ink-3); }
.db-nav-label { font-size: 12px; font-weight: 600; letter-spacing: 0.01em; text-transform: none; }
.db-bank span, .db-thread-divider, .mc-details summary, .st-section, .vfr-col h4, .db-pop-head, .db-sheet-group h4,
.db-tip-head, .db-demo, .db-need, .db-diff-key em, .db-emoji-name { letter-spacing: 0; text-transform: none; }
.db-bank span { font-size: 12.5px; font-weight: 500; }
.db-thread-divider, .st-section, .vfr-col h4, .mc-details summary { font-size: 13px; }
.mc-counters span { letter-spacing: 0; text-transform: none; font-size: 12.5px; font-weight: 600; }
.mc-tag { letter-spacing: 0; text-transform: none; font-size: 11px; font-weight: 600; }

/* Figures line up in columns and do not jump while they update */
.db-metric-value, .db-table td, .db-facts dd, .db-rate b, .db-chip, .db-bank b, .pr-cents input { font-variant-numeric: tabular-nums; }

/* KPI tile: small icon beside the label, value below - one layout for every role */
.db-kpi { display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: start; column-gap: 10px; }
.db-kpi > * { grid-column: 1 / -1; min-width: 0; }
.db-kpi > .db-card-icon { grid-column: 1; grid-row: 1; width: 28px; height: 28px; border-radius: 8px; margin: 0; }
.db-kpi > .db-card-icon wa-icon { font-size: 13px; }
.db-kpi > .db-card-icon + .db-metric-label { grid-column: 2; grid-row: 1; align-self: center; }
.db-kpi .db-metric-value { margin-top: 14px; }
.db-grid.is-compact .db-kpi > .db-card-icon { margin: 0; }

/* Links inside status tiles: readable, underlined - not tiny orange text */
.db-status .db-rate small a, .db-rate small a { color: var(--db-ink); font-weight: 600; text-decoration: underline;
  text-decoration-color: var(--db-line-2, var(--db-line)); text-underline-offset: 3px; transition: text-decoration-color .2s var(--db-ease); }
.db-status .db-rate small a:hover, .db-rate small a:hover { text-decoration-color: var(--db-accent); }
.db-grid.is-compact .db-metric-label { font-size: 12.5px; }
/* Section headings sit close to the tiles they introduce (proximity), with more room to the section above */
.st-section { margin: 18px 0 0; font-weight: 600; color: var(--db-ink-2); }
.st-section + .db-grid { margin-top: calc(12px - var(--db-gap, 24px)); }
/* Server-drawn charts scale their text with the card width; the moderator shell is ~25 % wider (no sidebar),
   so its axis labels came out larger than everywhere else. --hc-text scales them back to the same size. */
body.is-top { --hc-text: .82; }
@media (max-width: 900px) { body.is-top { --hc-text: 1; } }
/* Short sentence-case titles no longer need two reserved lines - the value follows right below */
.db-kpi .db-metric-label { min-height: 0; }
/* .db-switch holds a plain checkbox: sized like one, flush with the text above, normal gap to its label */
.db-switch { gap: 10px; align-items: flex-start; }
.db-switch input[type="checkbox"] { width: 18px; height: 18px; margin: 2px 0 0; flex: none; }
/* Fan photo strip: one quiet line instead of five empty dashed boxes when the fan never sent a picture */
.mc-strip-empty { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 14px; border: 1px dashed var(--db-line);
  border-radius: 12px; font-size: 12.5px; color: var(--db-ink-3); }
.mc-strip-empty wa-icon, .mc-strip-empty .ic { font-size: 13px; }

/* ==========================================================================================================
   Moderator chat v3 (2026-10-11): one raised work surface. Only the conversation is a card; fan and persona sit on
   the page divided by hairlines. Taboos stay in view, the header is one line, the log has day dividers.
   ========================================================================================================== */
@media (min-width: 1101px) {
  .mc-grid { grid-template-columns: minmax(250px, 300px) minmax(0, 1fr) minmax(260px, 320px); gap: 24px; }
}
.mc-side-scroll { gap: 14px; padding-bottom: 14px; }

/* Side sections: flat, separated by a hairline - no stacked card boxes */
.mc-sec { padding: 14px 0 0; border-top: 1px solid var(--db-line); }
.mc-sec .mc-info-head { margin-bottom: 6px; }
.mc-sec .mc-info-head h4, .mc-sec .mc-text h4 { font-size: 13px; font-weight: 600; color: var(--db-ink); letter-spacing: 0; }
.mc-sec .mc-text + .mc-text { margin-top: 12px; }
.mc-sec .mc-text p { margin: 4px 0 0; font-size: 13px; color: var(--db-ink-2); }
.mc-sec .mc-kv > div { padding: 6px 0; }
.mc-sec .mc-notes textarea { background: var(--db-surface); }

/* Head: name with ellipsis, status line, favourite star */
.mc-head { align-items: center; padding: 0; }
.mc-head-photo { width: 52px; height: 52px; border-radius: 14px; }
.mc-head-text h3 { font-size: 16.5px; }
.mc-head-text h3 .mc-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* What the chat brought so far - three numbers in one quiet strip */
.mc-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border: 1px solid var(--db-line);
  border-radius: 12px; background: var(--db-surface); }
.mc-stats > div { padding: 8px 6px 9px; text-align: center; }
.mc-stats > div + div { border-left: 1px solid var(--db-line); }
.mc-stats dt { font-size: 11.5px; color: var(--db-ink-3); }
.mc-stats dd { margin: 1px 0 0; font-family: var(--font-sofia), Arial, sans-serif; font-size: 17px; font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--db-ink); }

/* Taboos of the model: red, short, always visible */
.mc-taboos-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; margin: 0; padding: 11px 13px;
  border-radius: 12px; background: var(--db-bad-soft); border: 1px solid color-mix(in srgb, var(--db-bad) 22%, transparent); }
.mc-taboos-card > wa-icon, .mc-taboos-card > .ic { color: var(--db-bad); font-size: 14px; margin-top: 2px; }
.mc-taboos-card h4 { margin: 0 0 2px; font-size: 13px; font-weight: 600; color: var(--db-bad); }
.mc-taboos-card p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--db-ink); }

/* Conversation header: platform, state, queue and clock in one line */
.mc-bar { justify-content: flex-start; gap: 12px; padding: 12px 18px; font-size: 13px; color: var(--db-ink-2); }
.mc-bar b { font-weight: 700; color: var(--db-ink); }
.mc-platform { flex: none; padding: 3px 10px; border-radius: 999px; background: var(--db-dark); color: var(--db-on-dark);
  font-size: 12px; font-weight: 600; letter-spacing: 0.01em; }
.mc-bar-state { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: var(--db-ink); }
.mc-bar-lock { display: inline-flex; align-items: center; gap: 6px; color: var(--db-bad); font-weight: 600; }
.mc-bar-lock wa-icon, .mc-bar-lock .ic { font-size: 11px; }
.mc-bar-right { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 14px; font-weight: 400; color: var(--db-ink-3); }
.mc-clock { font-weight: 600; color: var(--db-ink-2); font-variant-numeric: tabular-nums; }

/* Log: day dividers between the messages */
.mc-day { align-self: center; margin: 4px 0 0; }
.mc-day span { display: inline-block; padding: 3px 11px; border: 1px solid var(--db-line); border-radius: 999px;
  background: var(--db-surface); font-size: 11.5px; font-weight: 500; color: var(--db-ink-3); }

/* The message to answer */
.mc-pinned-label { display: flex; align-items: baseline; gap: 7px; margin: 0 0 8px; font-size: 12.5px; font-weight: 600; color: var(--db-accent-text); }
.mc-pinned-label wa-icon, .mc-pinned-label .ic { font-size: 11px; align-self: center; }
.mc-pinned-label span { font-weight: 400; color: var(--db-ink-3); }

/* Composer: length counter and the shortcut next to Senden */
.mc-count { font-size: 12px; color: var(--db-ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mc-count.is-near { color: var(--db-warn); }
.mc-count.is-max { color: var(--db-bad); font-weight: 600; }
.mc-kbd { display: inline-flex; gap: 3px; }
.mc-kbd kbd { padding: 1px 6px; border: 1px solid var(--db-line); border-bottom-width: 2px; border-radius: 6px; background: var(--db-surface);
  font: inherit; font-size: 11px; color: var(--db-ink-3); }
@media (max-width: 720px) { .mc-kbd { display: none; } }
/* Phones: one header line, tools as icons, Senden stays on the tools row */
@media (max-width: 720px) {
  .mc-bar { padding: 10px 14px; gap: 10px; }
  .mc-clock { display: none; }
  .mc-bar-right { gap: 8px; }
  .mc-composer-row { flex-wrap: nowrap; gap: 8px; }
  .mc-tools.db-seg button { font-size: 0; gap: 0; padding: 8px 12px; }
  .mc-tools.db-seg button wa-icon { font-size: 15px; }
}
@media (max-width: 420px) { .mc-queue { font-size: 0; } .mc-queue b { font-size: 13px; } .mc-queue b::after { content: " wartend"; font-weight: 400; color: var(--db-ink-3); } }

/* ==========================================================================================================
   Ledger (2026-10-11): the money of a role as a statement - the result big, how it comes about in right-aligned
   amount lines. Used by model, partner and owner overview, next to a credit/meter card.
   ========================================================================================================== */
.db-ledger-row { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--db-gap-tight); align-items: stretch; }
@media (max-width: 900px) { .db-ledger-row { grid-template-columns: minmax(0, 1fr); } }
.db-ledger, .db-credit { display: flex; flex-direction: column; margin: 0; }
.db-ledger-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.db-ledger-head h3 { margin: 0; font-size: 15px; font-weight: 600; color: var(--db-ink); }
.db-ledger-total { margin: 18px 0 6px; font-family: var(--font-sofia), Arial, sans-serif; font-size: clamp(2.1rem, 3.4vw, 2.9rem);
  font-weight: 600; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--db-ink); }
.db-ledger-total.is-ok { color: var(--db-ok); }
.db-ledger-total.is-bad { color: var(--db-bad); }
.db-ledger-lines { margin: 14px 0 0; }
.db-ledger-lines > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 9px 0;
  border-top: 1px solid var(--db-line); font-size: 14px; }
.db-ledger-lines dt { color: var(--db-ink-2); }
.db-ledger-lines dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--db-ink); white-space: nowrap; }
.db-ledger-lines.is-small > div { padding: 7px 0; font-size: 13px; }
.db-ledger-foot { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: auto 0 0; padding-top: 14px; font-size: 12.5px; color: var(--db-ink-3); }
.db-credit-free { margin: 18px 0 12px; font-size: 14px; color: var(--db-ink-2); }
.db-credit-free b { margin-right: 4px; font-family: var(--font-sofia), Arial, sans-serif; font-size: 1.9rem; font-weight: 600;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--db-ink); }
.db-credit-free b.is-warn { color: var(--db-warn); }
.db-meter { height: 8px; border-radius: 999px; background: var(--db-sunken); overflow: hidden; }
.db-meter > span { display: block; height: 100%; border-radius: inherit; background: var(--db-ink); transition: width .6s var(--db-ease); }
.db-meter.is-warn > span { background: var(--db-warn-line); }
@media (prefers-reduced-motion: reduce) { .db-meter > span { transition: none; } }

/* Portal sprite icons in templates shared with the portal */
svg.ic { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.125em; }

/* Owner review dialog: a PDF proof inline (verifications.js) */
.vfr-pdf { display: block; width: 100%; height: min(62vh, 640px); border: 1px solid var(--db-line); border-radius: var(--db-radius); background: var(--db-surface); }