.page-stack {
    display: grid;
    /* minmax(0, 1fr) instead of the implicit auto track: grid items default to
       min-width:auto, so a wide child (e.g. a product table) would stretch the
       column past the viewport and trigger a horizontal page scrollbar instead
       of letting the child's own overflow-x:auto scroll. */
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
}

.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
}

.page-heading {
    margin: 0;
    font-size: var(--text-3xl);
    font-weight: 700;
}

.page-subtitle {
    margin: var(--space-1) 0 0;
    color: var(--text-muted);
}

.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.panel-body {
    padding: var(--space-5);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition:
        background var(--transition),
        border-color var(--transition),
        color var(--transition);
}

/* .btn sets display, which would otherwise override the UA [hidden] rule and
   keep JS-toggled buttons (e.g. the Chats reset) visible. */
.btn[hidden] {
    display: none;
}

.btn-primary {
    background: var(--accent);
    border-color: var(--accent-text);
    color: #ffffff;
}

.btn-primary:hover:not(:disabled) {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: #ffffff;
}

.btn-secondary {
    background: transparent;
    border-color: var(--border);
    color: var(--text);
}

.btn-secondary:hover:not(:disabled) {
    background: var(--surface-2);
    color: var(--text);
}

/* Destructive action: tinted fill (not a solid/outline). This is the single
   canonical definition — a second, conflicting .btn-danger block used to live
   further down and silently win the cascade; it has been removed. */
.btn-danger {
    background: rgba(220, 38, 38, 0.08);
    color: var(--danger);
    border: 1px solid rgba(220, 38, 38, 0.25);
}

.btn-danger:hover:not(:disabled) {
    background: rgba(220, 38, 38, 0.15);
}

.btn-danger:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn:disabled,
.btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Compact button — for inline/table save actions. Replaces ad-hoc
   `style="font-size:0.82rem"` overrides. */
.btn--sm {
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-sm);
}

/* Action button clusters (table rows, forms). Without this the wrapping
   <form> elements are block-level and the buttons stack/overlap. */
.btn-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.btn-row form {
    margin: 0;
}

.segment-control {
    display: inline-flex;
    padding: var(--space-1);
    gap: var(--space-1);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.segment-link {
    display: inline-flex;
    align-items: center;
    padding: var(--space-2) var(--space-3);
    border-radius: calc(var(--radius) - 1px);
    color: var(--text-muted);
    transition:
        background var(--transition),
        color var(--transition);
}

.segment-link:hover {
    background: var(--surface-2);
    color: var(--text);
}

.segment-link.active {
    background: var(--accent-tint);
    color: var(--accent-text);
    font-weight: 600;
}

.table-wrapper {
    overflow-x: auto;
    /* Let the wrapper shrink inside flex/grid parents so overflow-x:auto can
       actually scroll a wide table instead of the page widening around it. */
    min-width: 0;
}

.data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-top: var(--space-5);
}

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
    /* Bottom-align so label-less controls (the Filter/Reset buttons, toggles)
       sit on the same line as the labelled inputs/selects, whose control sits at
       the bottom of its label column — not floating up against the label text. */
    align-items: flex-end;
    margin-bottom: var(--space-2);
}

/* The search box grows to fill the toolbar row — consistent across every
   filter bar (was previously only applied under .filter-bar--products). */
.filter-bar__search {
    flex: 1 1 22rem;
}

/* Status-tab filter rows pair a segment control with a reset link. */
.filter-bar--segment {
    align-items: center;
    justify-content: space-between;
}

.filter-bar label {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    font-size: var(--text-base);
    color: var(--text-muted);
}

.filter-bar .checkbox-inline {
    flex-direction: row;
    align-items: center;
    gap: var(--space-2);
    color: var(--text);
}

/* Filter-bar text/select controls share one box model with .btn so input,
   select and button line up at the same height across a toolbar row (#271).
   Bare controls otherwise fall back to native chrome, which renders a different
   height than the buttons beside them. Selectors stay at class+element
   specificity so the .search-input padding-left override below still wins. */
.filter-bar input,
.filter-bar select {
    padding: var(--space-2) var(--space-3);
    line-height: 1.5;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    outline: none;
    transition:
        border-color var(--transition),
        box-shadow var(--transition),
        background var(--transition);
}

.filter-bar input:focus,
.filter-bar select:focus {
    border-color: var(--accent);
}

/* Custom caret so filter-bar selects carry the same chrome as .field selects
   (appearance:none also makes height/background honour our box model rather
   than the native control). */
.filter-bar select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.6rem center;
    background-size: 1rem;
    padding-right: var(--space-8);
    cursor: pointer;
}

[data-theme="dark"] .filter-bar select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238b90a7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* Checkboxes/radios keep their native box — the box model above is for the
   text/select controls only. */
.filter-bar input[type="checkbox"],
.filter-bar input[type="radio"] {
    padding: 0;
    line-height: normal;
    background: transparent;
    border: 0;
    border-radius: 0;
}

.data-table thead th {
    padding: var(--space-3) var(--space-4);
    background: var(--surface-2);
    color: var(--text-muted);
    text-align: left;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Sortable column header (shared _SortableHeader partial). Rendered as an <a>
   on server-paginated tables and as a <button> on JS-driven ones (Chats), so
   the button variant resets its native chrome to match the anchor. */
.th-sort {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: inherit;
    text-decoration: none;
    text-transform: inherit;
    letter-spacing: inherit;
    cursor: pointer;
}

button.th-sort {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
}

.th-sort:hover {
    color: var(--text);
}

.th-sort__caret {
    font-size: var(--text-2xs);
    opacity: 0.5;
}

.th-sort--active {
    color: var(--text);
}

.th-sort--active .th-sort__caret {
    opacity: 1;
    color: var(--accent-text);
}

.data-table tbody td {
    padding: var(--space-4) var(--space-4);
    border-top: 1px solid var(--border);
    vertical-align: middle;
}

.data-table tbody tr:hover td {
    background: var(--surface-2);
}

.table-actions {
    display: flex;
    gap: var(--space-3);
    align-items: center;
}

.table-actions form {
    margin: 0;
    display: inline;
}

.btn-link {
    padding: 0;
    border: none;
    background: none;
    color: var(--accent-text);
    font: inherit;
    cursor: pointer;
}

.btn-link:hover {
    text-decoration: underline;
}

.badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: 600;
}

.badge-active {
    background: var(--accent-tint);
    color: var(--accent-text);
}

.badge-archived {
    background: var(--surface-2);
    color: var(--text-muted);
}

.badge-suspended {
    background: var(--warning-tint);
    color: var(--warning-text);
}

.badge-cancelled {
    background: var(--danger-tint);
    color: var(--danger);
}

/* Canonical status pill (shared _StatusBadge): tone-coloured tint + border +
   a leading status dot, so a status reads the same on every page (tenants,
   plans, scrape runs, …) and a failed/critical state stands out. */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1.4;
}
.status-badge::before {
    content: "";
    width: 0.5em;
    height: 0.5em;
    border-radius: 50%;
    background: currentColor;
}
.status-badge--ok {
    background: var(--success-bg);
    border-color: var(--success-border);
    color: var(--success-text);
}
.status-badge--info {
    background: var(--accent-tint);
    border-color: var(--accent);
    color: var(--accent-text);
}
.status-badge--warn {
    background: var(--warning-tint);
    border-color: var(--warning);
    color: var(--warning-text);
}
.status-badge--danger {
    background: var(--danger-bg);
    border-color: var(--danger-border);
    color: var(--danger-text);
}
.status-badge--neutral {
    background: var(--surface-2);
    border-color: var(--border);
    color: var(--text-muted);
}

/* Inline count meter: a tabular number plus a subtle proportional bar, for
   counts that benefit from at-a-glance comparison (e.g. keyword product counts).
   The fill width is set inline per row. */
.count-meter {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
}
.count-meter__value {
    font-variant-numeric: tabular-nums;
}
.count-meter__track {
    width: 4rem;
    height: 0.4rem;
    background: var(--accent-tint);
    border-radius: var(--radius-pill);
    overflow: hidden;
}
.count-meter__fill {
    display: block;
    height: 100%;
    min-width: 2px;
    background: var(--accent);
    border-radius: inherit;
}

/* External link in a table cell (e.g. product title linking out to the shop
   URL): the trailing arrow signals it opens in a new tab. */
.ext-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}
.ext-link__icon {
    flex: none;
    color: var(--text-muted);
}

/* A table cell stacking two related dates (last-seen primary, first-seen
   secondary) — keep each date on its own line rather than mid-date wrapping. */
.seen-cell {
    white-space: nowrap;
}

/* Secondary line under a primary table-cell value (e.g. "zuerst gesehen" below
   the last-seen date), so two related facts share one column. */
.cell-sub {
    margin-top: 0.1rem;
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* Shared inline state for async (JS-rendered) lists: loading / empty / error,
   so a list never sits silently blank. Rendered either as a centred block or,
   inside a table body, wrapped in a full-width row. The error variant may carry
   a retry button (.list-state__retry). Server-rendered lists use the
   _EmptyState partial instead. */
.list-state {
    text-align: center;
    padding: var(--space-8) var(--space-5);
    color: var(--text-muted);
    font-size: var(--text-base);
}
.list-state--loading {
    opacity: 0.7;
}
.list-state--error {
    color: var(--danger);
}
.list-state__retry {
    margin-left: var(--space-3);
    padding: var(--space-1) var(--space-3);
    font: inherit;
    font-size: var(--text-sm);
    line-height: 1.4;
    color: var(--accent-text);
    background: transparent;
    border: 1px solid currentColor;
    border-radius: var(--radius);
    cursor: pointer;
}
.list-state__retry:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #ffffff;
}

.empty-state {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--text-muted);
}

/* Message inside the shared _EmptyState block. The bottom margin spaces it
   from an optional CTA button; collapses when the message stands alone. */
.empty-state__message {
    margin: 0 0 0.75rem;
}

.empty-state__message:last-child {
    margin-bottom: 0;
}

.form-card {
    max-width: 44rem;
}

.form-grid {
    display: grid;
    gap: var(--space-4);
}

.field {
    display: grid;
    gap: var(--space-2);
}

.field label {
    font-weight: 600;
}

.field input,
.field select,
.field textarea {
    width: 100%;
    padding: var(--space-3) var(--space-3);
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    outline: none;
    transition:
        border-color var(--transition),
        box-shadow var(--transition),
        background var(--transition);
}

/* Native checkbox/radio: don't stretch to full width, don't get the
 * input-style padding / background / border — they need to stay
 * inline with the label text inside <label class="check">. */
.field input[type="checkbox"],
.field input[type="radio"] {
    width: auto;
    padding: 0;
    background: transparent;
    border: 0;
    margin-right: var(--space-2);
    vertical-align: middle;
}
.field label.check {
    display: inline-flex;
    align-items: center;
    gap: 0.1rem;
}

.field select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1rem;
    padding-right: var(--space-10);
    cursor: pointer;
}

[data-theme="dark"] .field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238b90a7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

.field textarea {
    min-height: 8rem;
    resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    border-color: var(--accent-text);
    box-shadow: 0 0 0 3px var(--accent-tint);
}

/* Missing/invalid required field — flagged by the wizard's per-step
   validation when "Weiter" is clicked. Covers both .field-wrapped controls
   and the bare provider/model selects in the AI step. The mark clears as soon
   as the field is edited. */
.field-invalid,
.field input.field-invalid,
.field select.field-invalid,
.field textarea.field-invalid {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px var(--danger-tint);
}

.field-invalid:focus,
.field input.field-invalid:focus,
.field select.field-invalid:focus,
.field textarea.field-invalid:focus {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px var(--danger-tint);
}

/* Subtle required-field asterisk on a label (established convention). */
.required-mark {
    color: var(--danger);
    margin-left: 0.15rem;
    font-weight: 600;
}

/* Inline "Pflichtfeld" hint shown under a flagged field by the wizard's
   per-step validation; created + removed together with the red border. */
.field-required-hint {
    display: block;
    margin-top: var(--space-1);
    color: var(--danger);
    font-size: var(--text-sm);
}

.field-validation-error,
.validation-summary-errors {
    color: var(--danger);
}

.validation-summary-errors ul {
    margin: 0;
    padding-left: var(--space-5);
}

.form-actions {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    margin-top: var(--space-2);
}

/* Left-aligned, wrapping action row (e.g. generate-prompt / widget actions).
   Replaces repeated inline `justify-content:flex-start;gap:.5rem;flex-wrap:wrap`. */
.form-actions--start {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* Wizard step navigation: "Zurück" pinned left, "Weiter"/"Anlegen" right. */
.setup-step-nav {
    justify-content: flex-end;
}

.setup-step-nav [data-step-back] {
    margin-right: auto;
}

.notice {
    padding: var(--space-4) var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
}

.notice-muted {
    color: var(--text-muted);
}

.notice-info {
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
    color: var(--text);
    margin: 0 0 1rem;
}

/* Success / error flash notices. Used across many pages (Members, Knowledge*,
   Setup, Detail, Scraper, ProductKeywords) but previously undefined, so they
   rendered as bare paragraphs; styled here on the tinted notice palettes. */
.notice-success {
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--success-border);
    border-radius: var(--radius);
    background: var(--success-bg);
    color: var(--success-text);
    margin: 0 0 1rem;
}

.notice-error {
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--danger-border);
    border-radius: var(--radius);
    background: var(--danger-bg);
    color: var(--danger-text);
    margin: 0 0 1rem;
}

/* ASP.NET inline validation messages reuse .notice-error but stay in the DOM
   while the field is valid (empty span / .field-validation-valid, or a
   .validation-summary-valid wrapper). Without this they render as empty red
   boxes. Only show once they actually carry an error. */
.notice-error:empty,
.notice-error.field-validation-valid,
.notice-error.validation-summary-valid,
.notice-success:empty {
    display: none;
}

.bulk-action-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
    margin: 1rem 0 0.5rem;
}

.bulk-action-info {
    color: var(--text-muted);
    font-size: var(--text-base);
    margin-right: var(--space-2);
}

.danger-zone {
    border-top: 1px solid var(--border);
    margin-top: var(--space-6);
    padding-top: var(--space-6);
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--space-4);
    margin: 0;
}

.detail-item {
    display: grid;
    gap: var(--space-1);
    padding: var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
}

.detail-item dt {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.detail-item dd {
    margin: 0;
    color: var(--text);
}

/* Compact inline state toggle inside a detail-grid cell — pairs the
 * current-state badge with the flip action beside the value, so share
 * and default read as one-click switches rather than heavyweight forms. */
.detail-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.detail-toggle .btn-toggle {
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-xs);
}

.detail-hint {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.status-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
    align-items: center;
    justify-content: space-between;
    margin-top: var(--space-5);
}

.action-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
}

.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
    margin-top: var(--space-5);
}

.pagination-info {
    color: var(--text-muted);
}

/* --- Products page header ----------------------------------------- */
.products-page-header__title {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.badge-soft {
    background: var(--accent-tint, rgba(99, 102, 241, 0.12));
    color: var(--accent-text);
}

/* --- Search input with leading icon ------------------------------- */
.search-input {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-width: 18rem;
}

.search-input__icon {
    position: absolute;
    left: 0.7rem;
    color: var(--text-muted);
    pointer-events: none;
}

.search-input input {
    width: 100%;
    padding-left: var(--space-8);
}

/* --- Toggle switch (replaces the bare checkbox for "Geloeschte
       einblenden" etc.) -------------------------------------------- */
.toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    cursor: pointer;
    user-select: none;
    color: var(--text);
    font-size: var(--text-base);
}

.toggle input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.toggle__track {
    position: relative;
    width: 2.2rem;
    height: 1.2rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    transition: background 160ms ease, border-color 160ms ease;
}

.toggle__thumb {
    position: absolute;
    top: 50%;
    left: 0.15rem;
    width: 0.9rem;
    height: 0.9rem;
    background: var(--surface, #fff);
    border-radius: 50%;
    transform: translateY(-50%);
    transition: left 160ms ease, background 160ms ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

.toggle input[type="checkbox"]:checked + .toggle__track {
    background: var(--accent);
    border-color: var(--accent-text);
}

.toggle input[type="checkbox"]:checked + .toggle__track .toggle__thumb {
    left: calc(100% - 0.9rem - 0.15rem);
}

.toggle input[type="checkbox"]:focus-visible + .toggle__track {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.toggle--disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.toggle--disabled .toggle__track {
    cursor: not-allowed;
}

/* --- Button variants: icon-leading button + star toggle ----------- */
.btn-icon-leading {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.btn-star {
    appearance: none;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius);
    padding: var(--space-1);
    cursor: pointer;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-fast) ease, color var(--transition-fast) ease, border-color var(--transition-fast) ease;
}

.btn-star:hover {
    background: var(--surface-2);
    color: var(--text);
}

.btn-star--on {
    color: #f5a623;
}

.btn-star--on:hover {
    color: #d18a17;
    background: rgba(245, 166, 35, 0.12);
}

/* --- Bulk-action bar with leading "Aktionen" label ---------------- */
.bulk-action-bar--labeled .bulk-action-label {
    color: var(--text-muted);
    font-size: var(--text-base);
    margin-right: var(--space-1);
}

/* --- Numbered pagination strip ------------------------------------ */
.pagination--products {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--space-4);
    align-items: center;
    margin-top: var(--space-5);
}

.pagination__page-size {
    display: inline-flex;
}

.pagination__page-size-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-muted);
    font-size: var(--text-md);
}

.pagination__page-size-label select {
    padding: var(--space-1) var(--space-6) var(--space-1) var(--space-2);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface, #fff);
    color: var(--text);
    font-size: var(--text-md);
    cursor: pointer;
}

.pagination__nav {
    display: inline-flex;
    gap: var(--space-1);
    align-items: center;
    justify-self: center;
}

.pagination__page,
.pagination__step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.5rem;
    border-radius: var(--radius);
    border: 1px solid transparent;
    background: transparent;
    color: var(--text);
    /* inherit family so the <button> variant (JS-rendered chats pager) matches
       the <a> variant (server _Pagination partial) instead of the UA font. */
    font-family: inherit;
    font-size: var(--text-md);
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition-fast) ease, border-color var(--transition-fast) ease, color var(--transition-fast) ease;
}

.pagination__page:hover,
.pagination__step:hover {
    background: var(--surface-2);
}

.pagination__page--current {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent-text);
}

.pagination__page--current:hover {
    background: var(--accent);
}

.pagination__step--disabled {
    color: var(--text-muted);
    opacity: 0.5;
    pointer-events: none;
}

.pagination__ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    color: var(--text-muted);
    user-select: none;
}

.pagination__range {
    color: var(--text-muted);
    font-size: var(--text-md);
    justify-self: end;
    white-space: nowrap;
}

/* --- Tenant product detail page ----------------------------------- */
.product-detail__header {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.product-detail__head-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: center;
    justify-content: space-between;
}

.product-detail__head-title {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.product-detail__head-actions {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.product-detail__grid {
    display: grid;
    gap: var(--space-4);
}

.product-detail__grid--top {
    grid-template-columns: 2fr 1fr;
}

.product-detail__grid--middle,
.product-detail__grid--bottom {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 960px) {
    .product-detail__grid--top,
    .product-detail__grid--middle,
    .product-detail__grid--bottom {
        grid-template-columns: 1fr;
    }
}

.panel-head {
    padding: var(--space-3) var(--space-4) var(--space-2);
    border-bottom: 1px solid var(--border);
}

.panel-title {
    margin: 0;
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--text);
}

.panel-title-icon {
    color: #f5a623;
    margin-right: var(--space-1);
}

.panel-footer {
    margin-top: var(--space-4);
    display: flex;
    justify-content: flex-end;
}

/* --- Key/value display lists -------------------------------------- */
.kv-list {
    display: grid;
    gap: var(--space-3);
    margin: 0;
}

.kv-list--compact {
    gap: var(--space-2);
    font-size: var(--text-md);
}

.kv-row {
    display: grid;
    grid-template-columns: minmax(8rem, 13rem) minmax(0, 1fr);
    gap: var(--space-4);
    align-items: baseline;
}

/* `display: grid` above overrides the browser's [hidden] rule on a
   .kv-row (same specificity, declared later) — restore the hide
   behaviour explicitly so the "Alle Felder anzeigen" toggle has
   something to toggle. */
.kv-row[hidden] {
    display: none;
}

.kv-row dt {
    color: var(--text-muted);
    font-size: var(--text-md);
}

.kv-row dd {
    margin: 0;
    color: var(--text);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    word-break: break-word;
}

.kv-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: var(--text-sm);
}

.kv-mono--ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.kv-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--accent-text);
    text-decoration: none;
    word-break: break-all;
}

.kv-link--break {
    word-break: break-all;
}

.kv-link:hover {
    text-decoration: underline;
}

/* --- Inline copy button ------------------------------------------- */
.btn-copy {
    appearance: none;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius);
    padding: var(--space-1);
    cursor: pointer;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-fast) ease, color var(--transition-fast) ease;
}

.btn-copy:hover {
    color: var(--text);
    background: var(--surface-2);
}

.btn-copy--flash {
    color: var(--accent-text);
}

/* --- Vorschaubild-Galerie ---------------------------------------- */
.product-detail__preview {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.product-detail__gallery {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.product-detail__gallery:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.product-detail__gallery-main {
    position: relative;
    background: var(--surface-2);
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 1 / 1;
}

.product-detail__gallery-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity var(--transition);
}

.product-detail__gallery-slide.is-active {
    opacity: 1;
}

.product-detail__gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    transition: background var(--transition);
}

.product-detail__gallery-nav:hover {
    background: var(--surface-2);
}

.product-detail__gallery-nav--prev {
    left: var(--space-2);
}

.product-detail__gallery-nav--next {
    right: var(--space-2);
}

.product-detail__gallery-dots {
    display: flex;
    justify-content: center;
    gap: var(--space-2);
}

.product-detail__gallery-dot {
    width: 0.5rem;
    height: 0.5rem;
    padding: 0;
    border: none;
    border-radius: var(--radius-pill);
    background: var(--border);
    cursor: pointer;
    transition: background var(--transition);
}

.product-detail__gallery-dot.is-active {
    background: var(--accent);
}

.product-detail__gallery-thumbs {
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: var(--space-1);
}

.product-detail__gallery-thumb {
    flex: 0 0 auto;
    width: 3.5rem;
    height: 3.5rem;
    padding: 0;
    border: 2px solid transparent;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface-2);
    cursor: pointer;
    scroll-snap-align: start;
    transition: border-color var(--transition);
}

.product-detail__gallery-thumb.is-active {
    border-color: var(--accent);
}

.product-detail__gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- Description collapsible ------------------------------------- */
.product-detail__description {
    color: var(--text);
    line-height: 1.55;
    max-height: 16rem;
    overflow: hidden;
    position: relative;
    transition: max-height 220ms ease;
}

.product-detail__description.is-expanded {
    max-height: 80rem;
}

.product-detail__description p {
    margin: 0 0 var(--space-3);
}

.product-detail__description:not(.is-expanded)::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 2.5rem;
    background: linear-gradient(180deg, transparent, var(--surface, #fff));
    pointer-events: none;
}

.product-detail__more-desc,
.product-detail__more-fields {
    margin-top: var(--space-3);
}

/* --- JSON code block ---------------------------------------------- */
.product-detail__json {
    background: var(--surface-2);
    border-radius: var(--radius);
    padding: var(--space-3) var(--space-4);
    margin: 0 0 0.75rem;
    max-height: 18rem;
    overflow: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: var(--text-sm);
    line-height: 1.45;
    color: var(--text);
}

.product-detail__json code {
    background: transparent;
    padding: 0;
}

/* --- Keyword chip strip ------------------------------------------ */
.keyword-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.keyword-chip {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--surface-2);
    color: var(--text);
    font-size: var(--text-sm);
    font-weight: 500;
}

/* --- Action stack (right column of the bottom row) ---------------- */
.action-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.action-stack__item {
    width: 100%;
    justify-content: center;
}

.btn-icon-trailing {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-4);
}

.tile {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
}

.tile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 0.5rem;
}

.tile-label {
    margin: 0;
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tile-state-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #888;
    display: inline-block;
}

.tile[data-state="ok"] .tile-state-dot { background: var(--success); }
.tile[data-state="degraded"] .tile-state-dot { background: var(--warning); }
.tile[data-state="down"] .tile-state-dot { background: var(--danger); }

.tile-primary {
    margin: 0.25rem 0;
    font-size: var(--text-3xl);
    font-weight: 600;
}

.tile-secondary {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--text-base);
}

.tile-updated {
    margin: 0.75rem 0 0;
    color: var(--text-muted);
    font-size: var(--text-xs);
}

/* ---- Product detail dialog ---- */

.product-detail-dialog {
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--text);
    max-width: 720px;
    width: calc(100% - 2rem);
    box-shadow: 0 16px 40px rgba(17, 24, 39, 0.18);
}

.product-detail-dialog::backdrop {
    background: rgba(17, 24, 39, 0.45);
}

.product-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
    gap: var(--space-4);
}

.product-detail-header h3 {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: 600;
}

.product-detail-close {
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: var(--text-3xl);
    line-height: 1;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
}

.product-detail-close:hover {
    color: var(--text);
}

.product-detail-body {
    padding: 1rem 1.25rem;
    max-height: 70vh;
    overflow: auto;
}

.product-detail-section {
    margin-bottom: var(--space-5);
}

.product-detail-section:last-child {
    margin-bottom: 0;
}

.product-detail-section h4 {
    margin: 0 0 0.5rem;
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.product-detail-grid {
    display: grid;
    grid-template-columns: max-content 1fr;
    row-gap: var(--space-2);
    column-gap: var(--space-4);
    font-size: var(--text-base);
}

.product-detail-grid dt {
    color: var(--text-muted);
    font-weight: 500;
}

.product-detail-grid dd {
    margin: 0;
    word-break: break-word;
}

.product-detail-grid dd a {
    color: var(--accent-text);
}

.product-detail-raw {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-3);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--text-sm);
    white-space: pre;
    overflow: auto;
    max-height: 22rem;
    margin: 0;
}

.product-detail-actions {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.product-detail-error {
    color: var(--danger);
    padding: 0.5rem 0;
}

.row-trigger {
    background: transparent;
    border: none;
    padding: 0;
    color: var(--accent-text);
    text-align: left;
    cursor: pointer;
    font: inherit;
}

.row-trigger:hover {
    text-decoration: underline;
}

.theme-swatches {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-2);
    margin-top: var(--space-3);
}
.theme-swatch {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
}
.theme-swatch__chip {
    width: 18px;
    height: 18px;
    border-radius: var(--radius);
    border: 1px solid var(--border, #e5e7eb);
    display: inline-block;
    flex: 0 0 auto;
}
.theme-swatch__value {
    color: var(--text-muted, #6b7280);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.field-list-toolbar {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}
.field-list {
    list-style: none;
    margin: 0 0 var(--space-4) 0;
    padding: 0;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: var(--radius);
    max-height: 480px;
    overflow-y: auto;
}
.field-list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border, #e5e7eb);
}
.field-list-row:last-child {
    border-bottom: none;
}
.field-list-row:nth-child(even) {
    background: var(--surface, #f9fafb);
}
.field-list-label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 1 1 auto;
    cursor: pointer;
}
.field-list-key {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: var(--text-sm);
}
.field-list-meta {
    color: var(--text-muted, #6b7280);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
/* Stacks a shop's name over its owner identity so same-named shops are
   distinguishable in operator pickers (e.g. AI-provider assignment). */
.field-list-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.field-list-owner {
    color: var(--text-muted, #6b7280);
    font-size: var(--text-xs);
    margin: 0;
}

/* The .field grid forces width:100% on every input — that breaks the
   compact in-list checkboxes and radios, pushing each row off-screen.
   Reset the inputs that live inside a field-list row back to native
   sizing. */
.field-list input[type="checkbox"],
.field-list input[type="radio"] {
    width: auto;
    padding: 0;
    margin: 0;
    flex: 0 0 auto;
}

.panel-heading {
    margin: 0 0 1rem;
    font-size: var(--text-lg);
}

.category-section {
    margin: var(--space-4) 0 var(--space-2);
}
.category-tree {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}
.category-group {
    border: 1px solid var(--border, #e5e7eb);
    border-radius: var(--radius);
    background: var(--surface, #f9fafb);
}
.category-group[open] {
    background: var(--surface-elevated, #ffffff);
}
.category-group-summary {
    list-style: none;
    cursor: pointer;
    padding: var(--space-3) var(--space-3);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    user-select: none;
    border-radius: var(--radius);
}
.category-group-summary::-webkit-details-marker { display: none; }
.category-group-summary::before {
    content: "▸";
    color: var(--text-muted, #6b7280);
    transition: transform 0.15s ease;
    display: inline-block;
}
.category-group[open] > .category-group-summary::before {
    transform: rotate(90deg);
}
.category-group-summary .field-list-key {
    flex: 1 1 auto;
    font-size: var(--text-sm);
}
.category-list {
    margin: 0;
    border: none;
    border-top: 1px solid var(--border, #e5e7eb);
    border-radius: 0 0 var(--radius) var(--radius);
    max-height: 320px;
}
.category-row[data-depth="1"] { padding-left: var(--space-7); }
.category-row[data-depth="2"] { padding-left: 2.75rem; }
.category-row[data-depth="3"] { padding-left: 3.75rem; }

.inline-tags {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.inline-tags > li {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.tenant-state-options {
    display: inline-flex;
    gap: var(--space-4);
    align-items: center;
    flex: 0 0 auto;
}
.tenant-state-options > label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-sm);
    cursor: pointer;
    white-space: nowrap;
}

.spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid var(--border, #e5e7eb);
    border-top-color: var(--brand);
    border-radius: 50%;
    vertical-align: -2px;
    margin-right: var(--space-2);
    animation: spinner-rotate 0.8s linear infinite;
}
@keyframes spinner-rotate {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .spinner { animation-duration: 2.4s; }
}

/* Promoted-products keyword editor (issue #23) */
.chip-list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-4) 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
    background: #f1f5f9;
    color: #1e293b;
    border: 1px solid #cbd5e1;
}
.chip-llm {
    background: #f1f5f9;
    color: #475569;
}
.chip-manual {
    background: #dbeafe;
    color: #1d4ed8;
    border-color: #93c5fd;
}
.chip-image {
    background: #ecfdf5;
    color: #047857;
    border-color: #6ee7b7;
}
.chip-remove {
    background: none;
    border: 0;
    color: inherit;
    font-size: var(--text-lg);
    line-height: 1;
    cursor: pointer;
    padding: 0 0 0 2px;
}
.inline-form {
    display: inline;
    margin: 0;
    padding: 0;
}

/* Stacked keyword-regenerate actions (LLM / image), each a button + hint. */
.regenerate-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.regenerate-actions form {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin: 0;
}

/* Tenant detail — page header */
.tenant-page-header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
}
.tenant-page-header__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-2);
}
.tenant-page-header__crumb {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    font-size: var(--text-sm);
    color: var(--text-muted);
}
.tenant-page-header__crumb a {
    color: var(--text-muted);
    text-decoration: none;
}
.tenant-page-header__crumb a:hover {
    color: var(--text);
}
.tenant-page-header__crumb .crumb-sep {
    color: var(--text-muted);
}
.tenant-page-header__row {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    flex-wrap: wrap;
}
.tenant-page-header__title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 1;
    min-width: 0;
}
.tenant-page-header__title .page-heading {
    margin: 0;
}

.topbar-breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-md);
    color: var(--text-muted);
}
.topbar-breadcrumb a {
    color: var(--text-muted);
    text-decoration: none;
}
.topbar-breadcrumb a:hover {
    color: var(--text);
}
.topbar-breadcrumb .crumb-sep {
    color: var(--text-muted);
}
.tenant-page-header__meta {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    align-items: flex-end;
    margin-left: auto;
    font-size: var(--text-sm);
}
.tenant-page-header__meta > div {
    display: flex;
    gap: var(--space-2);
}
.tenant-page-header__meta .meta-label {
    color: var(--text-muted);
}
.tenant-page-header__meta .meta-value {
    color: var(--text);
}
.tenant-page-header__actions {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-muted);
    cursor: pointer;
}
.btn-icon:hover:not([disabled]) {
    color: var(--text);
    background: var(--surface-2);
}
.btn-icon[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Tenant detail — sticky section nav (scroll-stepper) */
.tenant-section-nav {
    position: sticky;
    top: var(--topbar-height);
    z-index: var(--z-sticky);
    display: flex;
    align-items: stretch;
    gap: var(--space-3);
    padding: 0 0.25rem;
    margin: 0 -0.25rem;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    scrollbar-width: thin;
}
.tenant-section-nav a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3) var(--space-3);
    font-size: var(--text-md);
    color: var(--text-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: color var(--transition-fast) ease, border-color var(--transition-fast) ease;
}
.tenant-section-nav a:hover {
    color: var(--text);
}
.tenant-section-nav a.active {
    color: var(--accent-text);
    border-bottom-color: var(--accent-text);
}
.tenant-section-nav .nav-icon {
    display: inline-flex;
    align-items: center;
}

.tenant-section {
    scroll-margin-top: calc(var(--topbar-height) + 84px);
}

/* Section-nav product groups — each group stacks its label above its tabs
   so it's clear at a glance which sections belong to which AI product
   (Allgemein / Salesman / Mindrigg). */
.tenant-section-nav__group-block {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding-left: var(--space-3);
    border-left: 1px solid var(--border);
}
.tenant-section-nav__group-block:first-child {
    border-left: none;
    padding-left: var(--space-1);
}
.tenant-section-nav__links {
    display: flex;
    gap: 0.1rem;
}
.tenant-section-nav__group {
    padding: var(--space-2) var(--space-3) 0;
    font-size: var(--text-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    white-space: nowrap;
}
.tenant-section-nav__group--shop { color: var(--accent-text); }
.tenant-section-nav__group--knowledge { color: #7c5cff; }

/* Product group header — a labeled banner that brackets the sections of
   one AI product (Salesman / Mindrigg). Built from the same
   tokens as info-card so it reads as part of the existing design. */
/* Product group — a collapsible block bracketing one product's sections.
   Header (the bar) toggles the body open/closed. */
.product-group {
    display: grid;
    gap: var(--space-6);
    scroll-margin-top: calc(var(--topbar-height) + 84px);
}
.product-group__body {
    display: grid;
    gap: var(--space-6);
}
.product-group.is-collapsed .product-group__body { display: none; }

.product-group-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border);
    border-left-width: 4px;
    border-radius: var(--radius-md);
    background: var(--surface);
    cursor: pointer;
    user-select: none;
    transition: background var(--transition-fast) ease, box-shadow var(--transition-fast) ease;
}
.product-group-header:hover { background: var(--accent-tint); }
.product-group-header:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.product-group-header--general { border-left-color: var(--text-muted); }
.product-group-header--shop { border-left-color: var(--accent-text); }
.product-group-header--knowledge { border-left-color: #7c5cff; }
.product-group-header--general .product-group-header__icon {
    background: var(--border);
    color: var(--text-muted);
}
.product-group-header__chevron {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--text-muted);
    transition: transform 160ms ease;
}
.product-group.is-collapsed .product-group-header__chevron { transform: rotate(-90deg); }
.product-group-header__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-md);
    background: var(--accent-tint);
    color: var(--accent-text);
    flex-shrink: 0;
}
.product-group-header--knowledge .product-group-header__icon {
    background: rgba(124, 92, 255, 0.12);
    color: #7c5cff;
}
.product-group-header__text { flex: 1; min-width: 0; }
.product-group-header__title {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--text);
}
.product-group-header__subtitle {
    margin: 0.1rem 0 0;
    font-size: var(--text-md);
    color: var(--text-muted);
}

/* ---- Info card — reusable icon + label + value tile ---- */
.info-card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
}
.info-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background: var(--accent-tint);
    color: var(--accent-text);
    flex-shrink: 0;
}
.info-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}
.info-card__label {
    font-size: var(--text-2xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.info-card__value {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--text);
    word-break: break-word;
}
.info-card__value a {
    color: var(--accent-text);
}

/* Row of info-cards (Scraper, AI Provider, Embeddings) */
.info-card-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

/* Übersicht two-column layout: main grid + quick actions sidebar */
.overview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: var(--space-5);
    align-items: start;
}
.overview-grid__main .info-card-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1100px) {
    .overview-grid { grid-template-columns: 1fr; }
    .overview-grid__main .info-card-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
    .overview-grid__main .info-card-row { grid-template-columns: 1fr; }
}

/* Quick-actions sidebar */
.quick-actions {
    display: flex;
    flex-direction: column;
}
.quick-actions .panel-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.quick-actions .panel-heading {
    margin: 0 0 var(--space-1);
}
.quick-actions .btn,
.quick-actions form > .btn,
.quick-actions form {
    width: 100%;
    justify-content: center;
}
.quick-actions form {
    display: flex;
    flex-direction: column;
}
.quick-actions__sep {
    border: 0;
    border-top: 1px solid var(--border);
    margin: var(--space-2) 0 var(--space-1);
}

/* Subsection inside a panel (e.g. Scraper + Embeddings grouped
 * under a single "Produkte" panel). Smaller than panel-heading,
 * spaced like a section break. */
.subsection-heading {
    margin: 1.25rem 0 0.75rem;
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--text);
}
.panel-heading + .subsection-heading {
    /* First subsection sits flush with the panel heading. */
    margin-top: var(--space-2);
}
.subsection-divider {
    border: 0;
    border-top: 1px solid var(--border);
    margin: 1.5rem 0 0;
}

/* Side-by-side subsections inside one panel. Use when two short
 * subsections fit comfortably next to each other. Stacks on narrow
 * viewports. */
.subsection-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem 2rem;
    align-items: start;
}
.subsection-row__col {
    /* Each column is its own flex column so children stack predictably
     * and the natural .subsection-heading top margin determines the
     * baseline. We intentionally do NOT zero out the heading's margin
     * here — both columns share the same heading rule and align by
     * default; removing the margin caused visual drift in practice. */
    min-width: 0;
    display: flex;
    flex-direction: column;
}
@media (max-width: 900px) {
    .subsection-row { grid-template-columns: 1fr; gap: 1.5rem 0; }
}

/* Compact panel variant — for short single-input form panels in the
 * Chat section (Standortabfrage, Produktdarstellung, etc.) so they
 * don't take up as much vertical space as the richer Chat Theme or
 * Promoted-Products panels. */
.panel--compact .panel-body {
    padding: var(--space-4) var(--space-4);
}
.panel--compact .panel-heading {
    font-size: var(--text-base);
    margin: 0 0 var(--space-2);
}
.panel--compact .form-grid {
    gap: var(--space-2);
}
.panel--compact .field {
    margin: 0;
}

/* Login page (no sidebar, no user chip) */
.login-body {
    margin: 0;
    min-height: 100vh;
    background: var(--background, #f6f7fb);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
    color: var(--text, #1f2233);
}

.login-shell {
    width: 100%;
    max-width: 420px;
    padding: var(--space-8) var(--space-6);
}

.login-card {
    background: var(--surface, #ffffff);
    border: 1px solid var(--border, #e3e5ee);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.04);
}

.login-brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
    color: var(--primary);
}

.login-brand .sidebar-brand {
    margin: 0;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: var(--text-base);
    color: var(--text, #1f2233);
}

.login-page h1 {
    margin: 0 0 var(--space-5);
    font-size: var(--text-4xl);
    font-weight: 700;
}

.login-page form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.login-error {
    background: var(--danger-bg, #fff1f2);
    border: 1px solid var(--danger-border, #fecdd3);
    color: var(--danger-text, #9f1239);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    margin: 0;
    font-size: var(--text-base);
    line-height: 1.5;
}

.login-error code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    background: rgba(0, 0, 0, 0.05);
    padding: 1px var(--space-1);
    border-radius: var(--radius);
    font-size: var(--text-sm);
}

.user-block-form {
    margin: 0;
    width: 100%;
}

.user-block-form .user-block {
    width: 100%;
    cursor: pointer;
}

.user-account-link {
    display: block;
    margin-bottom: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius);
    color: var(--muted, #6b7280);
    font-size: var(--text-sm);
    text-decoration: none;
    text-align: center;
}

.user-account-link:hover {
    background: var(--hover-bg, rgba(0, 0, 0, 0.04));
    color: inherit;
}

/* Keyword job status indicator — shown below regenerate actions on
   ProductKeywords and tenant detail pages; toggled by keyword-job.js */
.kw-job-status {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-muted);
}
.kw-job-status.is-running::before {
    content: "";
    display: inline-block;
    width: 0.8em;
    height: 0.8em;
    margin-right: 0.4em;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    vertical-align: -0.1em;
    animation: kw-spin 0.7s linear infinite;
}
.kw-job-status.is-error {
    color: var(--danger);
}
@keyframes kw-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .kw-job-status.is-running::before { animation-duration: 2.1s; }
}