/* ===== Mein Konto (/me) ===== */

.me-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.me-panel-head .panel-heading { margin: 0; }

.me-profile-grid {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(160px, 1fr) minmax(220px, 1.5fr);
    gap: var(--space-4);
    align-items: stretch;
    padding-top: var(--space-1);
}

.me-profile-identity,
.me-profile-field {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    padding: var(--space-4) var(--space-4);
}

.me-profile-identity { display: flex; align-items: center; gap: var(--space-4); }
.me-profile-field { display: flex; flex-direction: column; gap: var(--space-2); justify-content: center; }

.me-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: var(--text-lg);
    letter-spacing: 0.04em;
    flex: 0 0 auto;
}

.me-profile-name { font-weight: 600; color: var(--text); }
.me-profile-email-inline { color: var(--text-muted); font-size: var(--text-sm); }

.me-profile-label { font-size: var(--text-xs); color: var(--text-muted); }
.me-profile-value { color: var(--text); font-size: var(--text-base); word-break: break-all; }

.me-inline-form {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border);
}

.me-divider { border: none; border-top: 1px solid var(--border); margin: var(--space-5) 0; }
.me-subhead { margin: 0 0 var(--space-2); font-size: var(--text-base); font-weight: 600; }

/* Authentication */
.me-auth-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--space-4);
    align-items: center;
    padding: var(--space-1) 0 var(--space-4);
}

.me-auth-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: var(--accent-tint);
    color: var(--accent-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.me-auth-title {
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.me-auth-sub { color: var(--text-muted); font-size: var(--text-sm); }

.me-auth-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
    border-top: 1px solid var(--border);
    padding-top: var(--space-4);
}

/* Security cards */
.me-security-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-4);
}

.me-security-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--space-4);
    align-items: center;
    padding: var(--space-4) var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
    text-align: left;
    font: inherit;
}

.me-security-card--button {
    /* Reset native <button> chrome so it visually matches the <a> siblings. */
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
}

.me-security-card:hover {
    border-color: var(--accent-text);
    background: var(--accent-tint);
}

.me-security-card__icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: var(--accent-tint);
    color: var(--accent-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.me-security-card__title { font-weight: 600; }
.me-security-card__sub { color: var(--text-muted); font-size: var(--text-sm); }
.me-security-card__chevron { color: var(--text-muted); font-size: var(--text-2xl); line-height: 1; }

/* Danger zone */
.me-danger-panel {
    border-color: var(--danger);
    background: rgba(220, 38, 38, 0.04);
}

[data-theme="dark"] .me-danger-panel {
    background: rgba(248, 113, 113, 0.08);
}

.me-danger-panel .panel-body { padding: var(--space-4) var(--space-5); }
.me-danger-panel .panel-heading { margin-bottom: var(--space-3); font-size: var(--text-lg); }

.me-danger-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--space-4);
    align-items: center;
}

.me-danger-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: var(--danger-tint);
    color: var(--danger);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.me-danger-title { font-weight: 600; color: var(--text); }
.me-danger-sub { color: var(--text-muted); font-size: var(--text-sm); }

.me-danger-form {
    border-color: var(--danger);
}

/* Smaller screens — collapse the dense grids to a single column. */
@media (max-width: 900px) {
    .me-profile-grid,
    .me-auth-stats,
    .me-danger-row,
    .me-auth-row {
        grid-template-columns: 1fr;
    }
}

/* Knowledge connector picker + type badges (#132) — monochrome, no icons. */
.connector-tiles {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: .25rem 0 .5rem;
}
.connector-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-1);
    min-width: 7rem;
    padding: var(--space-2) var(--space-4);
    border: 1px solid #d0d5dd;
    border-radius: .5rem;
    background: #fff;
    font: inherit;
    color: inherit;
    cursor: pointer;
}
.connector-tile input {
    position: absolute;
    opacity: 0;
}
.connector-tile__icon svg {
    display: block;
    width: 22px;
    height: 22px;
    color: #344054;
}
.connector-tile__label {
    font-weight: 600;
}
.connector-tile__hint {
    font-size: var(--text-2xs);
    color: #667085;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.connector-tile--active {
    border-color: #111827;
    box-shadow: 0 0 0 1px #111827 inset;
    cursor: pointer;
}
.connector-tile--disabled {
    opacity: .5;
    cursor: not-allowed;
}
.connector-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: .12rem .55rem;
    border: 1px solid #d0d5dd;
    border-radius: 1rem;
    font-size: var(--text-sm);
    white-space: nowrap;
}
.connector-badge svg {
    width: 14px;
    height: 14px;
    color: #344054;
}

/* Source picker: two radio cards side by side (Webseite / Dokumente hochladen). */
.source-picker {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: var(--space-4);
    margin: .75rem 0 0;
}
.source-card {
    position: relative;
    display: grid;
    grid-template-columns: auto auto 1fr;
    grid-template-areas: "select icon head" "body body body";
    gap: .25rem 1rem;
    padding: var(--space-5);
    border: 1px solid var(--border);
    border-radius: .75rem;
    background: var(--surface);
    cursor: pointer;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.source-card--active {
    border-color: var(--accent-text);
    box-shadow: 0 0 0 1px var(--accent) inset;
}
.source-card__select { grid-area: select; padding-top: .35rem; }
.source-card__select input {
    width: 1.05rem;
    height: 1.05rem;
    accent-color: var(--accent-text);
    cursor: pointer;
}
.source-card__icon {
    grid-area: icon;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: .6rem;
    background: var(--accent-tint);
}
.source-card__icon svg { width: 22px; height: 22px; color: var(--accent-text); }
.source-card__head { grid-area: head; display: flex; flex-direction: column; gap: .2rem; }
.source-card__name { font-weight: 600; display: flex; align-items: center; gap: var(--space-2); }
.source-card__badge {
    padding: .1rem .5rem;
    border-radius: 1rem;
    background: var(--accent-tint);
    color: var(--accent-text);
    font-size: var(--text-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.source-card__desc { color: var(--text-muted); font-size: var(--text-md); }
.source-card__body {
    grid-area: body;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-4);
}
.source-card .field { display: flex; flex-direction: column; gap: .35rem; font-size: var(--text-md); font-weight: 500; }
.source-card .field input { width: 100%; }
.field-input { position: relative; display: block; }
.field-input__icon {
    position: absolute;
    left: .7rem;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    pointer-events: none;
    color: var(--text-muted);
}
.field-input__icon svg { width: 16px; height: 16px; }
.field-input input { padding-left: 2.1rem; }

/* PDF dropzone inside the upload card. */
.dropzone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 1.5rem 1rem;
    border: 1.5px dashed var(--border);
    border-radius: .6rem;
    text-align: center;
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}
.dropzone--over { border-color: var(--accent-text); background: var(--accent-tint); }
.dropzone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dropzone__icon svg { width: 30px; height: 30px; color: var(--accent-text); }
.dropzone__text { font-size: var(--text-base); color: var(--text); }
.dropzone__hint { font-size: var(--text-sm); color: var(--text-muted); }

/* Ingest status dot in the sources table. */
.status-line { display: inline-flex; align-items: center; gap: .4rem; }
.status-dot { width: .55rem; height: .55rem; border-radius: 50%; flex: none; }
.status-dot--ok { background: var(--success); }
.status-dot--idle { background: #9ca3af; }
.status-dot--error { background: var(--danger); }
.status-dot--warning { background: var(--warning); }

/* Material-style pager under a data table. */
.table-pager {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--space-6);
    padding: .75rem .25rem 0;
    margin-top: var(--space-2);
    border-top: 1px solid var(--border);
    font-size: var(--text-md);
    color: var(--text-muted);
}
.table-pager__size { display: inline-flex; align-items: center; gap: var(--space-2); }
.table-pager__size select { padding: .25rem 1.5rem .25rem .5rem; }
.table-pager__nav { display: inline-flex; align-items: center; gap: var(--space-1); }
.table-pager__btn {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text);
    font-size: var(--text-lg);
    cursor: pointer;
}
.table-pager__btn:hover:not(:disabled) { background: var(--surface-2); }
.table-pager__btn:disabled { color: var(--text-muted); opacity: .4; cursor: default; }
.table-pager__page {
    display: grid;
    place-items: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 var(--space-2);
    border-radius: .4rem;
    background: var(--accent-tint);
    color: var(--accent-text);
    font-weight: 600;
}
.table-pager__count { margin-right: auto; }

/* Uploads detail page: header with icon, large dropzone, files table. */
.upload-head { display: flex; align-items: flex-start; gap: var(--space-4); margin-bottom: var(--space-4); }
.upload-head .panel-heading { margin: 0; }
.dropzone--lg { padding: 2.5rem 1rem; }
.dropzone--lg .dropzone__text { font-size: var(--text-lg); font-weight: 600; }
.upload-actions { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-4); }
.upload-actions .btn { display: inline-flex; align-items: center; gap: var(--space-2); }

.file-name { display: inline-flex; align-items: center; gap: var(--space-3); }
.file-badge {
    position: relative;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    flex: none;
    border-radius: .4rem;
    background: rgba(220, 38, 38, .08);
    color: var(--danger);
}
.file-badge__ext {
    position: absolute;
    bottom: .15rem;
    font-size: .5rem;
    font-weight: 800;
    letter-spacing: .02em;
}

.file-actions { display: inline-flex; align-items: center; gap: .35rem; justify-content: flex-end; }
.file-actions__btn {
    display: inline-flex;
    align-items: center;
    height: 2.25rem;
    padding: 0 var(--space-3);
    border: 1px solid var(--border);
    border-radius: .5rem;
    background: var(--surface);
    color: var(--text);
    font-size: var(--text-md);
    line-height: 1;
}
.file-actions__btn:hover { background: var(--surface-2); }
.file-actions form { display: inline-flex; margin: 0; }
.col-actions { text-align: right; }
.icon-btn {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid var(--border);
    border-radius: .5rem;
    background: var(--surface);
    color: var(--text);
    font-size: var(--text-xl);
    cursor: pointer;
}
.icon-btn:hover { background: var(--surface-2); }
.icon-btn--danger { border-color: rgba(220, 38, 38, .3); color: var(--danger); background: rgba(220, 38, 38, .06); }
.icon-btn--danger:hover { background: var(--danger-tint); }

/* Discovered-knowledge list: filter/page-size toolbar + pager. */
.discovery-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-3);
}
.discovery-selectall {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}
.discovery-search {
    flex: 1 1 14rem;
    min-width: 12rem;
}
.discovery-pagesize {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    white-space: nowrap;
}
.discovery-pagesize select {
    width: auto;
}
.discovery-pager {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-3);
}

/* Live ingest progress (sources list + entries page). */
.ingest-progress {
    display: inline-flex;
    flex-direction: column;
    gap: var(--space-1);
}
.ingest-progress progress {
    width: 12rem;
    height: .5rem;
}
/* Shown when ingest-status polling fails repeatedly, so a stalled progress
   bar is never mistaken for a frozen page. Cleared on the next good poll. */
.ingest-poll-error {
    margin: var(--space-2) 0 0;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--warning);
    border-radius: var(--radius);
    background: var(--warning-tint);
    color: var(--warning-text);
    font-size: var(--text-sm);
}

/* Ingested passage content on the entry-detail page. */
.knowledge-passage-text {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    line-height: 1.55;
    color: #344054;
}

/* Rendered Markdown content (entry-detail "Inhalt" card). Overrides the
   plain-text pre-wrap above so block elements lay out normally. */
.markdown-body {
    white-space: normal;
}

.markdown-body > :first-child {
    margin-top: 0;
}

.markdown-body > :last-child {
    margin-bottom: 0;
}

.markdown-body p {
    margin: 0 0 0.75rem;
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
    margin: 1.25rem 0 0.5rem;
    line-height: 1.25;
}

.markdown-body ul,
.markdown-body ol {
    margin: 0 0 0.75rem;
    padding-left: var(--space-6);
}

.markdown-body li {
    margin: 0.15rem 0;
}

.markdown-body a {
    color: var(--accent-text);
}

.markdown-body code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.85em;
    background: #f2f4f7;
    padding: 0.1rem 0.3rem;
    border-radius: var(--radius);
}

.markdown-body pre {
    margin: 0 0 0.75rem;
    padding: var(--space-3);
    background: #f9fafb;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow-x: auto;
}

.markdown-body pre code {
    background: none;
    padding: 0;
}

.markdown-body blockquote {
    margin: 0 0 0.75rem;
    padding-left: var(--space-4);
    border-left: 3px solid var(--border);
    color: var(--text-muted);
}

.markdown-body table {
    border-collapse: collapse;
    width: 100%;
    margin: 0 0 0.75rem;
    font-size: var(--text-base);
}

.markdown-body th,
.markdown-body td {
    border: 1px solid var(--border);
    padding: var(--space-2) var(--space-2);
    text-align: left;
    vertical-align: top;
}

.markdown-body thead th {
    background: #f9fafb;
}

.markdown-body img {
    max-width: 100%;
    height: auto;
}

/* ── Knowledge entry-detail redesign (card layout) ───────────────────────── */

/* Stat-tile strip under the header. */
.detail-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-4);
}

.detail-tile {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: var(--space-4) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.detail-tile__label {
    font-size: var(--text-2xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--text-muted);
}

.detail-tile__value {
    font-size: var(--text-2xl);
    font-weight: 700;
    line-height: 1.15;
}

/* Two-column card rows; collapse to one column on narrow screens. */
.detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

@media (max-width: 900px) {
    .detail-grid {
        grid-template-columns: 1fr;
    }
}

/* Key/value table in the Übersicht card. */
.detail-kv th {
    width: 40%;
    text-align: left;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
}

/* Card-grid + side panel for the knowledge image gallery (entry-detail Bilder). */

/* Outer wrapper: stacks to side-by-side when the panel is open. */
.knowledge-gallery {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.knowledge-gallery.is-open {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: var(--space-5);
    align-items: start;
}

@media (max-width: 900px) {
    .knowledge-gallery.is-open {
        grid-template-columns: 1fr;
    }
}

/* Scrollable card grid. */
.knowledge-gallery__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--space-3);
}

/* Individual image card button. */
.knowledge-image-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    cursor: pointer;
    text-align: left;
    transition: border-color var(--transition-fast) ease, box-shadow var(--transition-fast) ease;
}

.knowledge-image-card:hover,
.knowledge-image-card:focus-visible {
    border-color: var(--accent-text);
    box-shadow: 0 0 0 2px var(--accent-tint, #dbeafe);
    outline: none;
}

.knowledge-image-card.is-active {
    border-color: var(--accent-text);
    box-shadow: 0 0 0 2px var(--accent-tint, #dbeafe);
}

/* Asset box (Bilder/Dokumente) header toolbar + multi-select. */
.asset-box-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-3);
}

.asset-bulk {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}

.knowledge-asset-cell {
    position: relative;
    display: flex;
}

.knowledge-asset-cell > .knowledge-image-card {
    flex: 1 1 auto;
    width: 100%;
}

.knowledge-asset-select {
    position: absolute;
    z-index: 2;
    top: 0.4rem;
    left: 0.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.knowledge-asset-select input {
    cursor: pointer;
    margin: 0;
    width: 1rem;
    height: 1rem;
}

.knowledge-asset-cell.is-selected > .knowledge-image-card {
    border-color: var(--accent-text);
    box-shadow: 0 0 0 2px var(--accent);
}

.knowledge-image-card__check {
    position: absolute;
    z-index: 1;
    top: 0.35rem;
    right: 0.4rem;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: var(--text-2xs);
    line-height: 1.25rem;
    text-align: center;
    display: none;
}

.knowledge-image-card.is-active .knowledge-image-card__check {
    display: block;
}

.knowledge-image-card__thumb {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius);
    background: var(--bg-muted, #f3f4f6);
}

.knowledge-image-card__title {
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1.3;
    color: var(--text);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.knowledge-image-card__meta {
    font-size: var(--text-2xs);
    color: var(--text-muted);
}

/* Keyword chips on cards (first two + "+N" overflow). */
.knowledge-image-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.knowledge-image-tags__tag {
    font-size: var(--text-2xs);
    line-height: 1;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-pill);
    background: #eef2f6;
    border: 1px solid var(--border);
    color: #344054;
    white-space: nowrap;
}

.knowledge-image-tags__more {
    font-size: var(--text-2xs);
    line-height: 1;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-pill);
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    white-space: nowrap;
}

/* Detail panel (appears beside the grid when a card is activated). */
.knowledge-gallery__panel {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.knowledge-gallery__panel[hidden] {
    display: none;
}

.knowledge-gallery__panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border);
    background: var(--bg-subtle, #f9fafb);
}

.knowledge-gallery__counter {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.knowledge-gallery__close {
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: none;
    font-size: var(--text-2xl);
    line-height: 1;
    color: var(--text-muted);
    cursor: pointer;
}

.knowledge-gallery__close:hover {
    background: var(--border);
    color: var(--text);
}

.knowledge-gallery__stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-muted, #f3f4f6);
    min-height: 200px;
}

.knowledge-gallery__image {
    display: block;
    max-width: 100%;
    max-height: 280px;
    object-fit: contain;
}

.knowledge-gallery__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--surface);
    color: var(--text);
    font-size: var(--text-xl);
    line-height: 1;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.1s ease;
}

.knowledge-gallery__nav--prev {
    left: 0.5rem;
}

.knowledge-gallery__nav--next {
    right: 0.5rem;
}

.knowledge-gallery__nav:hover {
    opacity: 1;
}

.knowledge-gallery__detail {
    padding: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.knowledge-gallery__title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-2);
}

/* Document panel: title spans the full width (wrapping freely) with the
   action links stacked beneath it, so long titles don't squeeze the links
   off the right edge. */
.knowledge-gallery__title-row--stacked {
    flex-direction: column;
    align-items: stretch;
}

.knowledge-gallery__title {
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--text);
    line-height: 1.4;
}

.knowledge-gallery__download {
    flex: 0 0 auto;
    font-size: var(--text-xs);
    color: var(--accent-text);
    text-decoration: none;
    white-space: nowrap;
}

.knowledge-gallery__panel-meta {
    font-size: var(--text-2xs);
    color: var(--text-muted);
    margin: 0;
}

.knowledge-gallery__subhead {
    font-size: var(--text-2xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin: 0 0 var(--space-1);
}

.knowledge-gallery__description p {
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--text);
    margin: 0;
}

.knowledge-gallery__description-wrap[hidden],
.knowledge-gallery__keywords-wrap[hidden] {
    display: none;
}

/* Document tile: icon placeholder inside the card grid (no thumbnail). */
.knowledge-doc-tile__icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius);
    background: #eef2ff;
    color: var(--accent-text);
}

.knowledge-doc-tile__ext {
    position: absolute;
    bottom: 0.5rem;
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Document icon tile in the detail panel stage. */
.knowledge-gallery__doc-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 200px;
    background: #eef2ff;
    color: var(--accent-text);
}

.knowledge-gallery__doc-icon[hidden] {
    display: none;
}

.knowledge-gallery__image[hidden] {
    display: none;
}

/* Action row in the document panel (open in tab + download). */
.knowledge-gallery__doc-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    flex: 0 0 auto;
}

.knowledge-gallery__open {
    font-size: var(--text-xs);
    color: var(--accent-text);
    text-decoration: none;
    white-space: nowrap;
}

.knowledge-gallery__open[hidden] {
    display: none;
}

/* Knowledge discovery: full-screen "analysing…" state. Discovery renders the
   page headlessly (~30 s), so the click on „Analysieren" needs a loading cue. */
.knowledge-loading {
    position: fixed; inset: 0; z-index: var(--z-modal);
    display: flex; align-items: center; justify-content: center;
    background: rgba(15, 23, 42, 0.85); padding: var(--space-6);
}
.knowledge-loading[hidden] { display: none; }
.knowledge-loading__card {
    background: var(--surface); color: var(--text);
    border-radius: var(--radius-lg); padding: var(--space-6);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
    display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
    text-align: center; max-width: 26rem;
}
.knowledge-spinner {
    width: 2.5rem; height: 2.5rem; border-radius: 50%;
    border: 3px solid var(--accent-tint); border-top-color: var(--accent);
    animation: knowledge-spin 0.8s linear infinite;
}
@keyframes knowledge-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .knowledge-spinner { animation-duration: 2.4s; }
}

/* Knowledge discovery: entries-picker modal. Reuses the overlay backdrop but is
   wider (holds the entries table) with a header intro and a sticky-feel footer. */
.discovery-modal { max-width: 880px; display: flex; flex-direction: column; }
.discovery-modal__intro { margin: var(--space-1) 0 var(--space-4); }
.discovery-modal__table { max-height: 48vh; overflow: auto; }
.discovery-modal__footer {
    display: flex; justify-content: flex-end; gap: var(--space-3);
    margin-top: var(--space-4); padding-top: var(--space-4);
    border-top: 1px solid var(--border);
}
.link-button {
    padding: 0; border: 0; background: none; color: var(--accent-text);
    font: inherit; font-weight: 600; cursor: pointer;
}
.link-button:hover { text-decoration: underline; }

/* Per-PDF embedding info overlay (entry-detail Dokumente + KnowledgeUploads). */
.pdf-embedding-overlay {
    position: fixed; inset: 0; z-index: var(--z-modal);
    display: flex; align-items: center; justify-content: center;
    background: rgba(15, 23, 42, 0.85); padding: var(--space-6);
}
.pdf-embedding-overlay[hidden] { display: none; }
.pdf-embedding-overlay__card {
    position: relative; background: var(--surface); color: var(--text);
    border-radius: var(--radius-lg); padding: 1.25rem 1.5rem; max-width: 720px; width: 100%;
    max-height: 85vh; overflow: auto; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
}
.pdf-embedding-overlay__close {
    position: absolute; top: 0.5rem; right: 0.6rem; background: none; border: 0;
    font-size: var(--text-3xl); line-height: 1; cursor: pointer; color: var(--text-muted);
}
.pdf-embedding-summary {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 0.5rem 1rem; margin: 0 0 1rem;
}
.pdf-embedding-summary dt { font-size: var(--text-2xs); text-transform: uppercase; color: var(--text-muted); letter-spacing: 0.04em; }
.pdf-embedding-summary dd { margin: 0; font-weight: 600; }
.pdf-embedding-chunks td { vertical-align: top; }
/* Chunk preview cell: full chunk text, clamped to a few lines with a toggle.
   pre-wrap keeps the source newlines so the text stays readable. */
.pdf-chunk-preview {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    margin: 0;
}
.pdf-chunk-preview--clamped {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pdf-chunk-toggle {
    margin-top: var(--space-1);
    padding: 0;
    border: none;
    background: none;
    color: var(--accent-text);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
}
.pdf-chunk-toggle:hover {
    text-decoration: underline;
}
.pdf-embedding-badge { padding: 0.1rem 0.45rem; border-radius: var(--radius-pill); font-size: var(--text-xs); border: 1px solid var(--border); }
.pdf-embedding-badge--embedded { background: var(--accent-tint); color: var(--accent-text); }
.pdf-embedding-badge--stale { color: var(--danger); border-color: var(--danger); }

/* Uploads Details overlay: a large modal (preview + info + chunks table). */
.upload-details {
    max-width: 1100px;
    max-height: 90vh;
    padding: 1.5rem 1.75rem;
}
.upload-details__top {
    display: grid;
    grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
    gap: var(--space-6);
    align-items: start;
}
.upload-details__preview {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.upload-details__preview-card {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 3 / 4;
    border-radius: var(--radius-md);
    background: #f1f5f9;
    border: 1px solid var(--border);
    color: var(--accent-text);
}
.upload-details__download {
    align-self: stretch;
    justify-content: center;
    gap: var(--space-2);
}
.upload-details__info {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
}
.upload-details__title-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.upload-details__title-row .panel-heading { margin: 0; }
.upload-details__badge {
    padding: 0.15rem 0.55rem;
    border-radius: var(--radius-pill);
    font-size: var(--text-2xs);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: #eef2ff;
    color: var(--accent-text);
}

/* Vektoren: a responsive row of four stat cards. */
.vektoren-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-3);
}
.vektoren-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-3) var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
}
.vektoren-card__icon {
    position: absolute;
    top: 0.6rem;
    right: 0.65rem;
    color: var(--text-muted);
}
.vektoren-card--embedded .vektoren-card__icon { color: var(--success); }
.vektoren-card--missing .vektoren-card__icon { color: var(--warning); }
.vektoren-card--stale .vektoren-card__icon { color: var(--danger); }
.vektoren-card__label {
    font-size: var(--text-2xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}
.vektoren-card__value {
    font-size: var(--text-3xl);
    font-weight: 700;
    line-height: 1;
}
.vektoren-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    margin-top: var(--space-3);
}
.vektoren-meta__value {
    display: block;
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* Bottom full-width chunks / passages region. */
.upload-details__chunks {
    margin-top: var(--space-6);
    border-top: 1px solid var(--border);
    padding-top: var(--space-5);
}
.upload-details__chunks-heading {
    font-size: var(--text-base);
    font-weight: 600;
    margin: 0 0 0.75rem;
}

@media (max-width: 720px) {
    .upload-details__top { grid-template-columns: minmax(0, 1fr); }
    .vektoren-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Collapsible original-text content. */
.detail-content.detail-collapsed {
    max-height: 18rem;
    overflow: hidden;
    position: relative;
}

.detail-content.detail-collapsed::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    /* Soft enough to signal "more below" at the cut edge without dimming a
       full line of readable text (the JS drops the clamp when content fits, so
       this only ever overlays the genuinely truncated bottom edge). */
    height: 1.5rem;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--surface));
    pointer-events: none;
}

.detail-content-toggle {
    margin-top: var(--space-3);
}

/* Tenant-Setup-Wizard stepper */
.setup-stepper {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    list-style: none;
    margin: 0;
    padding: 0;
}

.setup-stepper-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 1 1 auto;
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text-muted);
    font-size: var(--text-base);
    white-space: nowrap;
}

.setup-stepper-item.active {
    border-color: var(--accent-text);
    color: var(--accent-text);
    background: var(--accent-tint);
}

/* Visited (done) steps are clickable to navigate backward. */
.setup-stepper-item.done {
    color: var(--text);
    cursor: pointer;
}

.setup-stepper-item.done:hover {
    border-color: var(--accent-text);
}

.setup-stepper-no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--surface-2);
    color: inherit;
    font-weight: 600;
    font-size: var(--text-sm);
}

.setup-stepper-item.active .setup-stepper-no,
.setup-stepper-item.done .setup-stepper-no {
    background: var(--accent);
    color: #fff;
}

/* Tenant-Setup-Wizard — AI step selectable provider cards */
/* Step 5: Abschluss — Zusammenfassung summary card + info banner */
.setup-summary-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    overflow: hidden;
    margin-bottom: var(--space-4);
}

.setup-summary-card__header {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
    font-weight: 600;
    color: var(--text);
}

.setup-summary-card__body {
    margin: 0;
    padding: 0 var(--space-4);
}

.setup-summary-card__row {
    display: grid;
    grid-template-columns: minmax(140px, 220px) 1fr;
    align-items: baseline;
    gap: var(--space-4);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--border);
}

.setup-summary-card__row:last-child {
    border-bottom: none;
}

.setup-summary-card__label {
    margin: 0;
    color: var(--text-muted);
    flex-shrink: 0;
}

.setup-summary-card__value {
    margin: 0;
    color: var(--text);
    font-weight: 500;
    text-align: left;
    word-break: break-word;
}

.setup-summary-info {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
    color: var(--text);
    margin-bottom: var(--space-4);
}

.setup-summary-info__icon {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--accent-text);
    margin-top: 0.1rem;
}

.setup-summary-info__text {
    margin: 0;
    font-size: var(--text-base);
}

.setup-ai-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

@media (max-width: 720px) {
    .setup-ai-cards {
        grid-template-columns: 1fr;
    }
}

/* Step 1 — product capability picker (Salesman / Mindrigg). */
.setup-product-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}
@media (max-width: 720px) {
    .setup-product-cards { grid-template-columns: 1fr; }
}
.setup-product-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    cursor: pointer;
    transition: border-color var(--transition-fast) ease, box-shadow var(--transition-fast) ease, background var(--transition-fast) ease;
}
.setup-product-card:hover { border-color: var(--accent-text); }
.setup-product-card.selected {
    border-color: var(--accent-text);
    background: var(--accent-tint);
    box-shadow: inset 0 0 0 1px var(--accent);
}
.setup-product-card input[type="checkbox"] {
    margin-top: var(--space-1);
    flex-shrink: 0;
}
.setup-product-card__body { display: flex; flex-direction: column; gap: 0.2rem; }
.setup-product-card__title { font-weight: 600; color: var(--text); }
.setup-product-card__desc { font-size: var(--text-md); color: var(--text-muted); }

.setup-ai-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-4) var(--space-4) var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    cursor: pointer;
    transition: border-color var(--transition-fast) ease, background var(--transition-fast) ease, box-shadow var(--transition-fast) ease;
}

.setup-ai-card:hover {
    border-color: var(--accent-text);
}

.setup-ai-card.selected {
    border-color: var(--accent-text);
    background: var(--accent-tint);
    box-shadow: var(--shadow-sm);
}

/* The native radio is visually replaced by the custom check indicator. */
.setup-ai-card__radio {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    pointer-events: none;
}

.setup-ai-card__check {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 1.15rem;
    height: 1.15rem;
    border: 2px solid var(--border);
    border-radius: 50%;
    background: var(--surface);
    transition: border-color var(--transition-fast) ease, background var(--transition-fast) ease;
}

.setup-ai-card.selected .setup-ai-card__check {
    border-color: var(--accent-text);
    background: var(--accent);
    box-shadow: inset 0 0 0 3px var(--surface);
}

.setup-ai-card__radio:focus-visible ~ .setup-ai-card__check {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.setup-ai-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: var(--radius);
    background: var(--surface-2);
    color: var(--text-muted);
}

.setup-ai-card.selected .setup-ai-card__icon {
    background: var(--accent);
    color: #fff;
}

.setup-ai-card__title {
    font-weight: 600;
    color: var(--text);
    padding-right: var(--space-7);
}

.setup-ai-card__desc {
    font-size: var(--text-md);
    color: var(--text-muted);
}

.setup-ai-card__body {
    display: block;
    margin-top: var(--space-1);
}

.setup-ai-bullets {
    list-style: none;
    margin: 0 0 0.75rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.setup-ai-bullets li {
    position: relative;
    padding-left: var(--space-6);
    font-size: var(--text-md);
    color: var(--text-muted);
}

.setup-ai-bullets li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    background: var(--accent-tint);
    color: var(--accent-text);
    font-size: var(--text-2xs);
    font-weight: 700;
    line-height: 1;
}

/* Scraper step — category checkbox allowlist */
.setup-category-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    max-height: 16rem;
    overflow-y: auto;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.setup-category-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-base);
    color: var(--text);
    cursor: pointer;
}

.setup-category-item input {
    margin: 0;
}

/* ---------------------------------------------------------------------------
   Tenant-Setup — Step 4 "Widget": two-column layout + live preview
   --------------------------------------------------------------------------- */

.setup-widget-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-7);
    align-items: start;
}

@media (max-width: 900px) {
    .setup-widget-layout {
        grid-template-columns: 1fr;
    }
}

.setup-widget-config {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.setup-widget-config__intro {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

/* --- Numbered sub-sections --- */
.setup-widget-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* Per-tenant embed snippet (wizard success + tenant detail). */
.widget-snippet {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-3) var(--space-4);
    margin: 0.5rem 0;
    overflow-x: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: var(--text-sm);
    line-height: 1.5;
    white-space: pre;
    color: var(--text);
}

.setup-widget-section__title {
    margin: 0;
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--text);
}

.setup-widget-section__help {
    margin: 0 0 0.25rem;
    font-size: var(--text-md);
    color: var(--text-muted);
}

/* --- 1. Anzeige-Modus: compact horizontal mode cards --- */
.setup-mode-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}

@media (max-width: 520px) {
    .setup-mode-cards {
        grid-template-columns: 1fr;
    }
}

.setup-mode-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3);
    padding-right: var(--space-8);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.setup-mode-card:hover {
    border-color: var(--accent-text);
}

.setup-mode-card.selected {
    border-color: var(--accent-text);
    background: var(--accent-tint);
}

.setup-mode-card__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius);
    background: var(--surface-2);
    color: var(--text-muted);
    transition: background 0.15s ease, color 0.15s ease;
}

.setup-mode-card.selected .setup-mode-card__icon {
    background: var(--accent);
    color: #fff;
}

.setup-mode-card__text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.setup-mode-card__title {
    font-weight: 600;
    color: var(--text);
}

.setup-mode-card__desc {
    font-size: var(--text-sm);
    line-height: 1.3;
    color: var(--text-muted);
}

/* Hide the native radio; the label renders the visual control top-right. */
.setup-mode-card__radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.setup-mode-card__check {
    position: absolute;
    top: 0.7rem;
    right: 0.7rem;
    width: 16px;
    height: 16px;
    border: 2px solid var(--border);
    border-radius: 50%;
    background: var(--surface);
    cursor: pointer;
}

.setup-mode-card.selected .setup-mode-card__check {
    border-color: var(--accent-text);
    background: var(--accent);
    box-shadow: inset 0 0 0 3px var(--surface);
}

.setup-mode-card__radio:focus-visible ~ .setup-mode-card__check {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* --- 2. Sample-question rows (drag-handle glyph + input + delete) --- */
.setup-question-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.setup-question-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.setup-q-handle {
    flex: 0 0 auto;
    color: var(--text-muted);
    font-size: var(--text-xl);
    line-height: 1;
    cursor: grab;
    user-select: none;
}

.setup-question-input {
    flex: 1 1 auto;
    min-width: 0;
}

.setup-q-remove {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    font-size: var(--text-xl);
    line-height: 1;
    color: var(--text-muted);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.setup-q-remove:hover {
    border-color: var(--accent-text);
    color: var(--accent-text);
}

.setup-add-question {
    width: 100%;
    margin-top: var(--space-1);
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--accent-text);
    background: transparent;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.setup-add-question:hover {
    border-color: var(--accent-text);
    background: var(--accent-tint);
}

/* --- 3. Theme row: button + inline status box --- */
.setup-theme-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.setup-theme-status {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-2);
    font-size: var(--text-md);
    color: var(--text);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.setup-theme-status__icon {
    flex: 0 0 auto;
    display: inline-flex;
    color: var(--text-muted);
}

/* --- Info banner --- */
.setup-widget-info {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--accent-tint);
    border-radius: var(--radius);
}

.setup-widget-info__icon {
    flex: 0 0 auto;
    display: inline-flex;
    color: var(--accent-text);
}

.setup-widget-info__text {
    margin: 0;
    font-size: var(--text-md);
    line-height: 1.4;
    color: var(--text);
}

/* --- Preview column --- */
.setup-widget-preview-col {
    min-width: 0;
}

.setup-widget-preview-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-3);
}

/* Stage hosts the real widget iframe (preview mode). */
.setup-preview-stage {
    display: flex;
    /* Widget hugs the right edge, like on a real storefront. */
    justify-content: flex-end;
    align-items: stretch;
    min-height: 600px;
    padding: var(--space-6);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
}

.setup-preview-stage .setup-widget-mock {
    max-width: 440px;
}

/* Real widget loaded as {widgetUrl}/?preview=1. The frame size mimics how the
   loader renders each display mode on a real page: popup = compact floating
   panel (bottom-right), drawer = full-height panel flush to the edge. */
.setup-widget-frame {
    border: 0;
    background: var(--surface);
}

.setup-widget-frame[data-display-mode="popup"] {
    width: 380px;
    height: 560px;
    align-self: flex-end;
    border-radius: var(--radius-lg);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.22);
}

.setup-widget-frame[data-display-mode="drawer"] {
    width: 400px;
    align-self: stretch;
    border-radius: 0;
    box-shadow: -12px 0 32px rgba(15, 23, 42, 0.14);
}

.setup-preview-caption {
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    color: var(--text-muted);
    text-align: center;
}

/* --- The mock chat widget — themed via --preview-* custom properties so
       Phase 2 can recolor it live without touching app chrome. --- */
.setup-widget-mock {
    --preview-accent: #4f46e5;
    --preview-accent-contrast: #ffffff;
    --preview-bg: #f5f5fb;
    --preview-surface: #ffffff;
    --preview-text: #1f2333;
    --preview-text-muted: #6b7280;
    --preview-user-bubble: #4f46e5;
    --preview-border: #e6e6ef;

    width: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--preview-border);
    border-radius: var(--radius-lg);
    background: var(--preview-bg);
    box-shadow: 0 12px 32px rgba(17, 24, 39, 0.16);
    overflow: hidden;
    color: var(--preview-text);
}

.setup-widget-mock__header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--preview-accent);
    color: var(--preview-accent-contrast);
}

.setup-widget-mock__logo {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.2);
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.02em;
}

.setup-widget-mock__heading {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.setup-widget-mock__title {
    font-weight: 600;
    font-size: var(--text-base);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.setup-widget-mock__status {
    font-size: var(--text-2xs);
    opacity: 0.85;
}

.setup-widget-mock__minimize {
    flex: 0 0 auto;
    font-size: var(--text-xl);
    opacity: 0.8;
    line-height: 1;
}

.setup-widget-mock__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--preview-bg);
}

.setup-widget-mock__greeting {
    align-self: flex-start;
    max-width: 90%;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) var(--radius);
    background: var(--preview-surface);
    border: 1px solid var(--preview-border);
}

.setup-widget-mock__greeting-hi {
    margin: 0 0 var(--space-1);
    font-weight: 600;
    font-size: var(--text-base);
    color: var(--preview-text);
}

.setup-widget-mock__greeting-text {
    margin: 0;
    font-size: var(--text-md);
    color: var(--preview-text-muted);
}

.setup-widget-mock__chips {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.setup-widget-mock__chip {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--preview-surface);
    border: 1px solid var(--preview-border);
    font-size: var(--text-md);
    color: var(--preview-text);
    cursor: default;
}

.setup-widget-mock__chip-icon {
    flex: 0 0 auto;
    font-size: var(--text-base);
}

.setup-widget-mock__chip-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.setup-widget-mock__chip-arrow {
    flex: 0 0 auto;
    color: var(--preview-accent);
    font-weight: 600;
}

.setup-widget-mock__input {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-3);
    background: var(--preview-surface);
    border-top: 1px solid var(--preview-border);
}

.setup-widget-mock__input input {
    flex: 1 1 auto;
    min-width: 0;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--preview-border);
    border-radius: var(--radius-pill);
    background: var(--preview-bg);
    color: var(--preview-text-muted);
    font-size: var(--text-md);
}

.setup-widget-mock__send {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--preview-accent);
    color: var(--preview-accent-contrast);
}

/* ---------------------------------------------------------------------------
   Tenant-Setup — Step 2 "AI-Provider pro Task": single table layout
   --------------------------------------------------------------------------- */

/* ---- New-provider modal dialog ---- */
.setup-new-provider-modal {
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    max-width: 520px;
    width: calc(100% - 2rem);
    box-shadow: 0 16px 40px rgba(17, 24, 39, 0.18);
}

.setup-new-provider-modal::backdrop {
    background: rgba(17, 24, 39, 0.45);
}

.setup-new-provider-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-4);
    border-bottom: 1px solid var(--border);
    gap: var(--space-4);
}

.setup-new-provider-modal__title {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--text);
}

.setup-new-provider-modal__close {
    appearance: none;
    background: none;
    border: none;
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-xl);
    line-height: 1;
    cursor: pointer;
    color: var(--text-muted);
    border-radius: var(--radius);
    transition: background var(--transition-fast) ease;
}

.setup-new-provider-modal__close:hover {
    background: var(--surface-2);
    color: var(--text);
}

.setup-new-provider-modal__body {
    padding: var(--space-4) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.setup-new-provider-modal__body .field {
    gap: var(--space-1);
}

.setup-new-provider-modal__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--border);
    background: var(--surface-2);
}

/* Provider card list — kept for backward compat (legacy markup no longer emitted). */

/* Info banner below the task table. */
.setup-ai-info-banner {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
    color: var(--text);
    font-size: var(--text-md);
}

.setup-ai-info-banner__icon {
    flex: 0 0 auto;
    display: inline-flex;
    color: var(--accent-text);
    margin-top: 0.1rem;
}

/* ---- Wizard Step 2: per-task AI table ---- */
.setup-task-table-wrapper {
    overflow-x: auto;
    margin-top: var(--space-4);
}

.setup-task-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.setup-task-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-2xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.setup-task-table thead th:first-child {
    border-radius: var(--radius) 0 0 0;
}

.setup-task-table thead th:last-child {
    border-radius: 0 var(--radius) 0 0;
}

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

.setup-task-table tbody tr:last-child td:first-child {
    border-radius: 0 0 0 var(--radius);
}

.setup-task-table tbody tr:last-child td:last-child {
    border-radius: 0 0 var(--radius) 0;
}

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

/* Disabled row (Embedding) */
.setup-task-table tbody tr.setup-task-row--disabled td {
    opacity: 0.55;
    pointer-events: none;
}

/* Task icon cell */
.setup-task-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: var(--radius);
    background: var(--surface-2);
    color: var(--text-muted);
    border: 1px solid var(--border);
}

.setup-task-name-cell {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 10rem;
}

.setup-task-label {
    font-weight: 600;
    color: var(--text);
    font-size: var(--text-base);
}

.setup-task-desc {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin-top: 0.1rem;
}

/* AI Provider & Model cell */
.setup-task-provider-cell {
    min-width: 16rem;
}

.setup-task-provider-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.setup-task-provider-group select {
    width: 100%;
    min-width: 13rem;
    font-size: var(--text-md);
}

/* Status pill */
.setup-task-status-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: 600;
    white-space: nowrap;
}

.setup-task-status-pill--standard {
    background: var(--accent-tint);
    color: var(--accent-text);
}

.setup-task-status-pill--override {
    background: var(--warning-tint);
    color: var(--warning-text);
}

.setup-task-status-pill--disabled {
    background: var(--surface-2);
    color: var(--text-muted);
}

.setup-task-status-pill--error {
    background: var(--danger-tint);
    color: var(--danger);
}

.setup-task-status-pill--error .setup-task-status-dot {
    background: var(--danger);
}

.setup-task-status-dot {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    flex: 0 0 auto;
}

.setup-task-status-pill--standard .setup-task-status-dot {
    background: var(--accent);
}

.setup-task-status-pill--override .setup-task-status-dot {
    background: var(--warning);
}

/* --- Named replacements for ad-hoc inline styles on the tenant Detail/Setup
       pages (#272). Each mirrors the exact value of the inline style it
       replaces — purely a maintainability move, zero visual change. Defined
       here (after the base rules) so the modifiers win by source order. */
.setup-task-status-dot--muted {
    background: var(--text-muted);
}
.panel-heading--tight {
    margin-bottom: 0.2rem;
}
.page-subtitle--italic {
    font-style: italic;
}
.notice-error--sm {
    font-size: 0.82em;
}
.info-card__value--mono {
    font-family: ui-monospace, monospace;
    font-size: 0.78rem;
}
.ai-config-provider {
    font-size: 0.85rem;
    font-weight: 600;
}
.ai-config-model {
    font-size: 0.8rem;
    color: var(--text-muted);
}
/* JS-toggled inline error messages (visibility is driven by the `hidden`
   attribute + JS; these rules only carry the former inline sizing). */
.ai-task-error,
.embedding-error {
    font-size: 0.8rem;
    margin-top: 0.25rem;
}
.api-key-cleartext {
    display: block;
    margin: 0.5em 0;
    font-family: ui-monospace, monospace;
    word-break: break-all;
}
.form-flush {
    margin: 0;
}
.progress-wide {
    width: 100%;
    max-width: 32rem;
}
/* Top-spacing utilities replacing ad-hoc inline margin-top on the Setup wizard
   (#272). Token-valued; defined after the base rules so they win by source
   order on elements that already carry a margin (e.g. .form-actions). */
.mt-space-2 {
    margin-top: var(--space-2);
}
.mt-space-4 {
    margin-top: var(--space-4);
}
.mt-space-5 {
    margin-top: var(--space-5);
}
/* Read-only widget-key field: grows to fill its form-actions row, monospace. */
.setup-key-input {
    flex: 1;
    min-width: 0;
    font-family: monospace;
}

/* Kebab / actions cell */
.setup-task-actions-cell {
    text-align: right;
    white-space: nowrap;
}

/* Inline action buttons (AI Assistant row — shown directly, no popover). */
.setup-task-inline-actions {
    display: flex;
    gap: var(--space-2);
    justify-content: flex-end;
    flex-wrap: wrap;
}
.setup-task-inline-action {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
}

.setup-task-kebab {
    appearance: none;
    background: none;
    border: none;
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-xl);
    cursor: pointer;
    color: var(--text-muted);
    border-radius: var(--radius);
    transition: background var(--transition);
    line-height: 1;
}

.setup-task-kebab:hover:not(:disabled) {
    background: var(--surface-2);
    color: var(--text);
}

.setup-task-kebab:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Advanced params popover (kebab menu content) */
.setup-task-advanced-popover {
    position: relative;
    display: inline-block;
}

.setup-task-advanced-panel {
    position: absolute;
    right: 0;
    top: 100%;
    z-index: var(--z-popover);
    min-width: 220px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 6px 20px rgba(17, 24, 39, 0.12);
    padding: var(--space-3) var(--space-4);
    display: none;
    flex-direction: column;
    gap: var(--space-2);
}

.setup-task-advanced-panel.open {
    display: flex;
}

.setup-task-advanced-panel .field {
    gap: var(--space-1);
}

.setup-task-advanced-panel .field label {
    font-size: var(--text-sm);
    color: var(--text-muted);
}

/* Step-2 header bar (title + action buttons) */
.setup-step2-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.setup-step2-header__text h3 {
    margin: 0 0 0.25rem;
}

.setup-step2-header__actions {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    flex-shrink: 0;
}

/* ---- Embeddings configuration page ---- */
.embeddings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
    align-items: start;
    margin-bottom: var(--space-5);
}
@media (max-width: 900px) {
    .embeddings-grid { grid-template-columns: 1fr; }
}

.embeddings-pane {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.embeddings-toggle-block {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.embeddings-toggle-block .toggle__label {
    font-weight: 600;
}
.embeddings-toggle-desc {
    margin: 0;
    font-size: var(--text-md);
}

/* Bordered sub-card grouping the FTS threshold inputs. */
.embeddings-fts-box {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
}
.embeddings-fts-box .field {
    margin: 0;
}

/* ---- Callout — icon + text info box (accent-tinted) ---- */
.callout {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--accent-tint);
    color: var(--text);
    font-size: var(--text-md);
    line-height: 1.5;
}
.callout[hidden] {
    display: none;
}
.callout__icon {
    flex-shrink: 0;
    display: inline-flex;
    margin-top: 0.05rem;
    color: var(--accent-text);
}

/* Success variant of the callout — used for the detected-shop banner in
 * the Verkaufs-Chat Storefront card. Semi-transparent green works in both
 * light and dark themes without a dedicated token. */
.callout--success {
    background: rgba(22, 163, 74, 0.10);
    border-color: rgba(22, 163, 74, 0.35);
}
.callout--success .callout__icon {
    color: var(--success);
}

/* ============================================================== */
/* Verkaufs-Chat section (Tenant Detail) — icon-headed cards      */
/* ============================================================== */
.sales-chat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
    align-items: start;
}
@media (max-width: 1024px) {
    .sales-chat-grid {
        grid-template-columns: 1fr;
    }
}

.sales-chat-card {
    display: flex;
    flex-direction: column;
    padding: var(--space-4) var(--space-5) var(--space-5);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.sales-chat-card__head {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    margin-bottom: var(--space-4);
}
.sales-chat-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: var(--accent-tint);
    color: var(--accent-text);
    flex-shrink: 0;
}
.sales-chat-card__heading {
    min-width: 0;
}
.sales-chat-card__title {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--text);
}
.sales-chat-card__subtitle {
    margin: var(--space-1) 0 0;
    font-size: var(--text-sm);
    line-height: 1.45;
    color: var(--text-muted);
}

/* Body is a flex column whether it's the <form> itself (cards 1/2) or a
 * <div> wrapping a <form> (cards 3/4). The inner form inherits the same
 * vertical rhythm. */
.sales-chat-card__body,
.sales-chat-card__body > form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
/* Hide the empty validation summary so it doesn't add a phantom gap. */
.sales-chat-card__body > .validation-summary-valid {
    display: none;
}

.sales-chat-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.sales-chat-subheading {
    margin: 0;
    font-size: var(--text-md);
    font-weight: 700;
    color: var(--text);
}
.sales-chat-subheading__hint {
    font-weight: 400;
    color: var(--text-muted);
}

.sales-chat-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}
@media (max-width: 540px) {
    .sales-chat-fields {
        grid-template-columns: 1fr;
    }
}

/* --- Produktdarstellung preview (decorative skeletons) ----------- */
.sales-chat-preview {
    padding: var(--space-4) var(--space-4) var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-2);
}
.sales-chat-preview__label {
    display: block;
    margin-bottom: var(--space-3);
    font-size: var(--text-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}
/* Only the pane matching the selected layout is shown. */
.sales-chat-preview .sc-preview {
    display: none;
}
.sales-chat-preview[data-sales-chat-preview="carousel"] .sc-preview--carousel {
    display: flex;
}
.sales-chat-preview[data-sales-chat-preview="list"] .sc-preview--list {
    display: flex;
}

.sc-preview--carousel {
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.sc-preview__nav {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: var(--text-lg);
    line-height: 1;
}
.sc-preview__track {
    flex: 1;
    display: flex;
    gap: var(--space-2);
    min-width: 0;
    overflow: hidden;
}
.sc-preview__dots {
    flex-basis: 100%;
    display: flex;
    justify-content: center;
    gap: var(--space-1);
    margin-top: var(--space-2);
}
.sc-preview__dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--border);
}
.sc-preview__dots span.is-active {
    background: var(--accent);
}

.sc-card {
    flex: 0 0 auto;
    width: 92px;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
}
.sc-card__img {
    height: 56px;
    border-radius: var(--radius);
    background: var(--surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    opacity: 0.6;
}
.sc-card__price {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--text);
}
.sc-card__stars {
    font-size: var(--text-2xs);
    letter-spacing: 0.1em;
    color: var(--border);
}

.sc-preview--list {
    flex-direction: column;
    gap: var(--space-2);
}
.sc-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
}
.sc-row__img {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: var(--radius);
    background: var(--surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    opacity: 0.6;
}
.sc-row__lines {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}
.sc-row__lines span {
    height: 7px;
    border-radius: var(--radius);
    background: var(--border);
}
.sc-row__lines span:first-child {
    width: 70%;
}
.sc-row__lines span:last-child {
    width: 45%;
}
.sc-row__price {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--text);
}