/* ============================================================
   SELLER — Dashboard, analytics, products, orders, payouts
   ============================================================ */

/* ── Seller onboarding wizard ── */
.wizard-steps { display:flex; align-items:center; gap:0; padding:24px 28px 8px; }
.wizard-step-indicator { display:flex; align-items:center; gap:10px; flex-shrink:0; cursor:default; }
.wizard-step-num { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; background:var(--surface); border:2px solid var(--line); color:var(--muted); transition:.2s; }
.wizard-step-label { font-size:13px; font-weight:600; color:var(--muted); transition:.2s; white-space:nowrap; }
.wizard-step-indicator.active   .wizard-step-num   { background:var(--accent); border-color:var(--accent); color:#fff; }
.wizard-step-indicator.active   .wizard-step-label { color:var(--text); }
.wizard-step-indicator.completed .wizard-step-num  { background:rgba(16,185,129,.15); border-color:#10b981; color:#10b981; }
.wizard-step-indicator.completed .wizard-step-label{ color:#10b981; }
.wizard-step-connector { flex:1; height:2px; background:var(--line); margin:0 12px; min-width:20px; }
.wizard-panel { margin-top:16px; }
.wizard-nav { display:flex; gap:10px; align-items:center; }
.wizard-summary { background:var(--surface); border:1px solid var(--line-soft); border-radius:16px; padding:18px 20px; }
.wizard-summary h3 { font-size:14px; font-weight:700; margin:0 0 12px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
.wizard-summary-tbl { width:100%; border-collapse:collapse; font-size:14px; }
.wizard-summary-tbl th { width:140px; text-align:left; padding:7px 12px 7px 0; color:var(--muted); font-weight:600; font-size:13px; vertical-align:top; }
.wizard-summary-tbl td { padding:7px 0; border-bottom:1px solid var(--line-soft); }
.wizard-summary-tbl tr:last-child td { border-bottom:none; }
.field-hint { display:block; font-size:12px; color:var(--muted); margin-top:4px; }
@media(max-width:600px) {
    .wizard-step-label { display:none; }
    .wizard-step-connector { min-width:12px; margin:0 6px; }
}

/* ── Dashboard (fix hardcoded kleuren → CSS vars) ── */
.seller-cards { display:flex; gap:20px; margin-bottom:20px; flex-wrap:wrap; }
.seller-cards .card { padding:20px; }

/* Seller operations cockpit */
.seller-ops { display:grid; gap:18px; }
.seller-ops-hero,
.seller-list-head {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
    padding:4px 0 2px;
}
.seller-ops-hero h1,
.seller-list-head h1 { margin:8px 0 6px; font-size:28px; line-height:1.15; }
.seller-ops-actions,
.seller-empty-actions { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.ops-section-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:14px; }
.ops-section-head h2 { margin:6px 0 4px; font-size:20px; line-height:1.2; }
.ops-section-head p { margin:0; }
.ops-onboarding { padding:20px; }
.ops-progress { height:8px; border-radius:999px; background:var(--line-soft); overflow:hidden; margin:0 0 14px; }
.ops-progress span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--accent),var(--accent-2)); }
.ops-checklist { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:10px; }
.ops-check {
    display:flex;
    gap:10px;
    align-items:flex-start;
    min-height:74px;
    padding:12px;
    border:1px solid var(--line);
    border-radius:10px;
    text-decoration:none;
    color:var(--text);
    background:var(--surface-2);
}
.ops-check:hover { border-color:var(--accent); background:var(--accent-soft); }
.ops-check-mark {
    flex:0 0 auto;
    min-width:44px;
    height:24px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    border:1px solid var(--line);
    color:var(--muted);
    font-size:10px;
    font-weight:900;
    letter-spacing:.05em;
}
.ops-check.is-done .ops-check-mark { border-color:#16a34a; background:rgba(22,163,74,.12); color:#15803d; }
.ops-check strong { display:block; font-size:14px; line-height:1.25; }
.ops-check small { display:block; margin-top:3px; color:var(--muted); font-size:12px; line-height:1.35; }
.ops-alert {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:14px 16px;
    border:1px solid var(--line);
    border-radius:10px;
    background:var(--surface);
}
.ops-alert--danger { border-color:rgba(220,38,38,.28); background:rgba(220,38,38,.07); }
.ops-alert--warning { border-color:rgba(245,158,11,.3); background:rgba(245,158,11,.08); }
.ops-alert--success { border-color:rgba(22,163,74,.26); background:rgba(22,163,74,.08); }
.ops-kpi-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; }
.ops-kpi {
    display:grid;
    gap:6px;
    padding:16px;
    border:1px solid var(--line);
    border-radius:10px;
    background:var(--surface);
}
.ops-kpi span,
.ops-kpi small { color:var(--muted); font-size:12px; line-height:1.35; }
.ops-kpi > span { text-transform:uppercase; letter-spacing:.08em; font-weight:800; }
.ops-kpi strong { font-size:25px; line-height:1.1; }
.ops-delta { font-size:12px; font-weight:800; }
.ops-delta--flat { color:var(--muted); }
.ops-delta--up { color:#15803d; }
.ops-delta--down { color:#dc2626; }
.ops-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; align-items:start; }
.ops-list { display:grid; gap:8px; }
.ops-list-item {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:12px;
    border:1px solid var(--line-soft);
    border-radius:10px;
    background:var(--surface-2);
    color:var(--text);
    text-decoration:none;
}
.ops-list-item:hover { border-color:var(--accent); background:var(--accent-soft); }
.ops-list-item strong { display:block; font-size:14px; line-height:1.25; }
.ops-list-item small { display:block; margin-top:3px; color:var(--muted); font-size:12px; }
.ops-list-item > span:last-child { text-align:right; flex:0 0 auto; }
.ops-bars { display:grid; gap:12px; }
.ops-bar-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 12px; font-size:13px; }
.ops-bar-row strong { font-size:12px; color:var(--muted); }
.ops-bar-row div { grid-column:1 / -1; height:8px; border-radius:999px; background:var(--line-soft); overflow:hidden; }
.ops-bar-row div span { display:block; height:100%; border-radius:inherit; }
.ops-webhook-note { margin-top:12px; padding:10px 12px; border-radius:10px; border:1px solid var(--line-soft); color:var(--muted); font-size:13px; }
.ops-webhook-note a { color:var(--accent-2); font-weight:800; text-decoration:none; }
.ops-table .sc-status { font-size:12px; }
.sc-empty--compact { padding:20px 0; }
.seller-empty-state { padding:34px 20px; }
.seller-empty-kicker { color:var(--accent-2); font-size:12px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.seller-empty-state p { max-width:560px; }
.seller-icon-button { border-color:rgba(220,38,38,.35)!important; background:transparent!important; min-width:36px; justify-content:center; }
.seller-stream-list { display:grid; gap:10px; }
@media(max-width:900px) {
    .seller-ops-hero,
    .seller-list-head,
    .ops-alert,
    .ops-section-head { flex-direction:column; align-items:stretch; }
    .seller-ops-actions,
    .seller-empty-actions { width:100%; }
    .seller-ops-actions .btn,
    .seller-empty-actions .btn { flex:1 1 auto; justify-content:center; }
    .ops-grid { grid-template-columns:1fr; }
}
@media(max-width:620px) {
    .ops-checklist,
    .ops-kpi-grid { grid-template-columns:1fr; }
    .ops-list-item { align-items:flex-start; flex-direction:column; }
    .ops-list-item > span:last-child { text-align:left; }
    .seller-ops-hero h1,
    .seller-list-head h1 { font-size:24px; }
}

/* ── Analytics ── */
.ana-kpi-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:14px; margin-bottom:20px; }
.ana-kpi { padding:20px 22px; border-radius:20px; background:var(--surface); border:1px solid var(--line); display:flex; flex-direction:column; gap:4px; }
.ana-kpi-icon { font-size:26px; margin-bottom:2px; }
.ana-kpi-val { font-size:30px; font-weight:900; letter-spacing:-.03em; line-height:1; }
.ana-kpi-val.accent { color:var(--accent); }
.ana-kpi-val.up { color:#10b981; }
.ana-kpi-val.down { color:#ef4444; }
.ana-kpi-label { font-size:12px; color:var(--muted); font-weight:600; }
.ana-kpi-sub { font-size:11px; color:var(--muted); margin-top:2px; }

.ana-chart-wrap { overflow-x:auto; }
.ana-chart { display:flex; align-items:flex-end; gap:4px; height:120px; min-width:0; padding-bottom:4px; }
.ana-bar-col { flex:1 1 0; min-width:12px; display:flex; flex-direction:column; align-items:center; gap:3px; }
.ana-bar { width:100%; border-radius:4px 4px 0 0; background:linear-gradient(180deg,var(--accent),var(--accent-2)); min-height:3px; transition:.25s; }
.ana-bar-label { font-size:9px; color:var(--muted); white-space:nowrap; transform:rotate(-45deg); transform-origin:top left; margin-top:2px; }
.ana-bar-mini { height:6px; border-radius:999px; background:linear-gradient(90deg,var(--accent),var(--accent-2)); min-width:4px; }

.ana-tbl { width:100%; border-collapse:collapse; font-size:13px; }
.ana-tbl th { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); padding:8px 12px; border-bottom:2px solid var(--line); text-align:left; }
.ana-tbl th.r, .ana-tbl td.r { text-align:right; }
.ana-tbl td { padding:11px 12px; border-bottom:1px solid var(--line-soft); vertical-align:middle; }
.ana-tbl tr:last-child td { border-bottom:0; }
.ana-rank { display:inline-flex; width:20px; height:20px; align-items:center; justify-content:center; border-radius:50%; font-size:10px; font-weight:800; background:var(--accent-soft); color:var(--accent-2); }
.ana-rank.gold { background:#fef3c7; color:#d97706; }
.ana-rank.silver { background:#f1f5f9; color:#64748b; }
.ana-rank.bronze { background:#fef9ee; color:#b45309; }

.ana-period { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:16px; }
.ana-period-btn { padding:6px 14px; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--text); font-size:13px; font-weight:600; cursor:pointer; text-decoration:none; transition:.15s; }
.ana-period-btn:hover { border-color:var(--accent); color:var(--accent); }
.ana-period-btn.active { background:var(--accent); color:#fff; border-color:var(--accent); }
.ana-custom { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.ana-custom input[type=date] { padding:6px 10px; border-radius:10px; border:1px solid var(--line); background:var(--input-bg); color:var(--text); font-size:13px; min-height:36px; color-scheme:dark; }
html[data-theme="light"] .ana-custom input[type=date] { color-scheme:light; }
.ana-two { display:grid; grid-template-columns:1.5fr 1fr; gap:16px; margin-bottom:16px; }
@media(max-width:900px){ .ana-two { grid-template-columns:1fr; } }
.ana-growth { font-size:11px; font-weight:700; padding:2px 7px; border-radius:999px; display:inline-block; }
.ana-growth.up { background:#dcfce7; color:#15803d; }
.ana-growth.down { background:#fee2e2; color:#dc2626; }
.ana-growth.flat { background:var(--accent-soft); color:var(--muted); }

/* ── Analytics additions (0.21.0) ── */
.ana-header-card { margin-bottom:16px; }
.ana-header-top { display:flex; align-items:flex-start; gap:16px; margin-bottom:16px; }
.ana-header-top h1 { margin:4px 0 2px; }

/* SVG line chart */
.ana-chart-card { margin-bottom:16px; }
.ana-chart-head { margin-bottom:12px; }
.ana-chart-head h2 { margin:2px 0 0; }
.ana-svg-wrap { position:relative; width:100%; }
.ana-svg { display:block; width:100%; height:auto; min-height:120px; }
.ana-dot { cursor:crosshair; }
.ana-tooltip {
    position:absolute;
    z-index:10;
    pointer-events:none;
    padding:7px 11px;
    border-radius:10px;
    background:var(--surface);
    border:1px solid var(--line);
    box-shadow:0 4px 16px rgba(0,0,0,.18);
    font-size:12px;
    display:flex;
    flex-direction:column;
    gap:2px;
    white-space:nowrap;
}
.ana-tooltip strong { font-size:11px; color:var(--muted); }

/* Section labels inside cards */
.ana-section-label { font-size:13px; font-weight:700; margin:18px 0 10px; }

/* Funnel rows */
.ana-funnel { display:flex; flex-direction:column; gap:8px; margin-top:16px; }
.ana-funnel-row { display:flex; align-items:center; gap:10px; font-size:13px; }
.ana-funnel-icon { width:22px; text-align:center; flex-shrink:0; }
.ana-funnel-label { width:150px; flex-shrink:0; font-weight:600; }
.ana-funnel-bar-wrap { flex:1; background:rgba(148,163,184,.12); border-radius:4px; height:18px; overflow:hidden; }
.ana-funnel-bar { height:100%; background:linear-gradient(90deg,var(--accent),var(--accent-2)); border-radius:4px; transition:width .35s; }
.ana-funnel-count { width:48px; text-align:right; font-weight:700; flex-shrink:0; }
.ana-funnel-pct { width:44px; font-size:11px; color:var(--muted); flex-shrink:0; }

/* Conversion rate pills in top-products table */
.ana-conv { font-size:12px; font-weight:700; padding:1px 6px; border-radius:999px; }
.ana-conv--good { background:#dcfce7; color:#15803d; }
.ana-conv--mid  { background:#fef3c7; color:#92400e; }
.ana-conv--low  { background:#fee2e2; color:#dc2626; }

/* Returning buyers */
.ana-buyers-card { margin-bottom:16px; }
.ana-buyers-split { display:flex; flex-direction:column; gap:8px; margin-top:14px; }
.ana-buyers-row { display:flex; align-items:center; gap:10px; font-size:13px; }
.ana-buyers-icon { width:22px; text-align:center; flex-shrink:0; }
.ana-buyers-lbl { width:130px; flex-shrink:0; font-weight:600; }
.ana-buyers-bar-wrap { flex:1; background:rgba(148,163,184,.12); border-radius:4px; height:18px; overflow:hidden; }
.ana-buyers-bar { height:100%; border-radius:4px; transition:width .4s; }
.ana-buyers-bar--new { background:linear-gradient(90deg,#38bdf8,#0ea5e9); }
.ana-buyers-bar--ret { background:linear-gradient(90deg,var(--accent),var(--accent-2)); }
.ana-buyers-num { width:32px; text-align:right; font-weight:700; flex-shrink:0; }
.ana-buyers-pct { width:36px; font-size:11px; color:var(--muted); flex-shrink:0; }

/* Order/stream links in analytics tables */
.ana-order-link { font-weight:700; color:var(--accent); text-decoration:none; }
.ana-order-link:hover { text-decoration:underline; }

@media (max-width:640px) {
    .ana-funnel-label { width:100px; }
    .ana-buyers-lbl   { width:90px; }
    .ana-svg { min-height:80px; }
}

/* ── Product edit ── */
.product-edit-form .card { margin-bottom:16px; }
.product-edit-grid { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(320px,0.9fr); gap:16px; }
.product-media-box { display:flex; align-items:center; justify-content:center; min-height:260px; border:1px dashed var(--line); border-radius:22px; background:linear-gradient(135deg,rgba(56,189,248,.06),rgba(16,185,129,.05)); overflow:hidden; position:relative; }
.product-media-preview { width:100%; height:100%; max-height:320px; object-fit:cover; }
.product-media-empty { color:var(--muted); font-weight:700; }
.product-edit-form label { display:block; margin:0 0 8px; font-weight:700; }
.product-edit-form textarea { width:100%; }
.product-slug-preview-box { min-height:44px; display:flex; align-items:center; padding:0 14px; border:1px solid var(--line); border-radius:12px; background:rgba(148,163,184,.06); color:var(--muted); font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; font-size:13px; word-break:break-all; }
.product-slug-preview p { margin:6px 0 0; font-size:12px; line-height:1.45; }
@media(max-width:980px){ .product-edit-grid { grid-template-columns:1fr; } }

/* Media library */
.media-library-layout { display:grid; grid-template-columns:260px minmax(0,1fr); gap:18px; align-items:start; }
.media-library-sidebar { padding:20px; position:sticky; top:calc(var(--topbar-height) + 18px); }
.media-library-sidebar h2, .media-upload-card h2, .media-library-head h2 { margin:0; }
.media-folder-list { display:flex; flex-direction:column; gap:6px; margin:16px 0 18px; }
.media-folder-tree { display:flex; flex-direction:column; gap:4px; padding-top:8px; margin-top:4px; border-top:1px solid var(--line-soft); }
.media-folder-row { display:flex; align-items:center; gap:6px; }
.media-folder-link { flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:8px; min-height:36px; padding:7px 10px 7px calc(10px + (var(--folder-depth,0) * 18px)); border-radius:10px; color:var(--text); text-decoration:none; border:1px solid transparent; font-size:13px; font-weight:700; }
.media-folder-link:hover, .media-folder-link.is-active { border-color:var(--line); background:var(--accent-soft); color:var(--accent-2); }
.media-folder-link--system { font-size:14px; }
.media-folder-icon { width:14px; flex:0 0 14px; color:var(--muted); text-align:center; font-size:12px; }
.media-folder-link.has-children .media-folder-icon { color:var(--accent-2); }
.media-folder-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.media-folder-delete-form { flex:0 0 auto; margin:0; }
.media-folder-delete-btn { width:30px; height:30px; display:grid; place-items:center; border-radius:8px; border:1px solid rgba(220,38,38,.28); background:rgba(220,38,38,.07); color:#b91c1c; cursor:pointer; font-size:16px; line-height:1; font-weight:800; transition:background .15s ease,border-color .15s ease,color .15s ease; }
.media-folder-delete-btn:hover { background:#dc2626; border-color:#dc2626; color:#fff; }
.media-folder-empty { display:block; padding:10px 12px; color:var(--muted); font-size:13px; border:1px dashed var(--line); border-radius:10px; }
.media-folder-form { display:grid; gap:10px; padding-top:16px; border-top:1px solid var(--line-soft); }
.media-folder-form label { margin:0; font-size:13px; font-weight:800; }
.media-upload-card { padding:20px; display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:18px; }
.media-upload-card p { margin:6px 0 0; }
.media-upload-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.media-upload-profile { display:grid; gap:4px; margin:0; font-size:12px; font-weight:800; color:var(--muted); }
.media-upload-profile select { min-width:190px; min-height:40px; border:1px solid var(--line); border-radius:10px; padding:8px 10px; background:var(--surface); color:var(--text); font:inherit; font-weight:700; }
.media-library-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin:0 0 14px; padding:0 4px; }
.media-library-head p { margin:5px 0 0; }
.media-library-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:14px; }
.media-library-item { overflow:hidden; padding:0; }
.media-library-item figure { margin:0; aspect-ratio:1; background:rgba(148,163,184,.08); overflow:hidden; }
.media-library-item img { width:100%; height:100%; object-fit:cover; display:block; }
.media-library-copy { padding:12px 14px 10px; display:grid; gap:4px; }
.media-library-copy strong { font-size:14px; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.media-library-copy span { color:var(--muted); font-size:12px; }
.media-library-item form { padding:0 14px 14px; }
.media-rename-form { display:grid; gap:8px; padding-bottom:10px; }
.media-rename-form label { display:grid; gap:4px; margin:0; font-size:12px; font-weight:800; color:var(--muted); }
.media-rename-form input { min-width:0; width:100%; min-height:38px; border:1px solid var(--line); border-radius:10px; padding:8px 10px; background:var(--surface); color:var(--text); font:inherit; }
.media-rename-form .btn { justify-self:start; }
.media-empty-state { padding:28px; text-align:center; }
.media-empty-state h3 { margin:0 0 6px; }
.media-empty-state p { margin:0; }
@media(max-width:900px){ .media-library-layout { grid-template-columns:1fr; } .media-library-sidebar { position:static; } .media-upload-card { align-items:stretch; flex-direction:column; } }

/* ── Stream create form ── */
.cs-card { background:var(--surface); border:1px solid var(--line-soft); border-radius:16px; padding:20px; margin-bottom:16px; }
.cs-section-title { margin:0 0 14px; font-size:15px; font-weight:500; color:var(--muted); }
.cs-field { margin-bottom:14px; }
.cs-label { display:block; font-size:14px; font-weight:500; margin-bottom:6px; }
.cs-opt { font-weight:400; color:var(--muted); font-size:12px; }
.cs-input { width:100%; padding:9px 12px; background:var(--input-bg); border:1px solid var(--line); border-radius:10px; color:var(--text); font-size:14px; }
textarea.cs-input { resize:vertical; }
/* Datum- en tijdinputs: calendar/clock-icoon zichtbaar maken in donkere modus */
.cs-input[type="datetime-local"],
.cs-input[type="date"],
.cs-input[type="time"] { color-scheme: dark; }
html[data-theme="light"] .cs-input[type="datetime-local"],
html[data-theme="light"] .cs-input[type="date"],
html[data-theme="light"] .cs-input[type="time"] { color-scheme: light; }
.cs-help-text { margin:6px 0 0; color:var(--muted); font-size:13px; line-height:1.45; }
.cs-stream-image-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:14px; }
.cs-stream-image-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.cs-stream-image-picker { display:grid; grid-template-columns:minmax(220px,320px) minmax(0,1fr); gap:16px; align-items:center; }
.cs-stream-image-preview { aspect-ratio:16/9; border:1px dashed var(--line); border-radius:16px; overflow:hidden; display:flex; align-items:center; justify-content:center; background:rgba(148,163,184,.08); color:var(--muted); font-size:13px; font-weight:700; text-align:center; }
.cs-stream-image-preview img { width:100%; height:100%; object-fit:cover; display:block; }
.cs-stream-image-preview.has-image { border-style:solid; background:var(--surface); }
.cs-stream-image-meta { display:grid; gap:5px; min-width:0; }
.cs-stream-image-meta strong { font-size:14px; line-height:1.35; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cs-stream-image-meta span { color:var(--muted); font-size:13px; line-height:1.45; }
@media(max-width:720px){ .cs-stream-image-head { flex-direction:column; } .cs-stream-image-actions { width:100%; } .cs-stream-image-actions .btn { flex:1 1 auto; } .cs-stream-image-picker { grid-template-columns:1fr; } }
.cs-product-row { border:1px solid var(--line-soft); border-radius:10px; padding:12px; }
.cs-product-label { display:flex; align-items:center; gap:10px; cursor:pointer; }
.cs-product-info { display:flex; flex-direction:column; gap:2px; }
.cs-product-title { font-size:14px; font-weight:500; }
.cs-product-meta { font-size:12px; color:var(--muted); }
.cs-inline-label { font-size:13px; display:inline-flex; align-items:center; gap:6px; }
.cs-select { padding:4px 8px; border:1px solid var(--line); border-radius:6px; background:var(--input-bg); color:var(--text); font-size:13px; }
.cs-input-small { width:80px; padding:4px 8px; border:1px solid var(--line); border-radius:6px; background:var(--input-bg); color:var(--text); font-size:13px; }

/* ── Orders list ── */
.filter-bar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.filter-bar input[type=search] { flex:1 1 200px; min-width:0; min-height:48px; padding:12px 14px; border-radius:16px; border:1px solid var(--line); background:var(--input-bg); color:var(--text); }
.filter-bar input[type=search]::placeholder { color:var(--muted); }
.filter-bar select { flex:0 1 160px; min-width:0; }
.tbl-orders { width:100%; border-collapse:collapse; table-layout:fixed; }
.tbl-orders th, .tbl-orders td { padding:10px; vertical-align:middle; font-size:13px; }
.tbl-orders th { text-align:left; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); border-bottom:2px solid var(--line); }
.tbl-orders td { border-bottom:1px solid var(--line-soft); }
.tbl-orders tbody tr:last-child td { border-bottom:0; }
.tbl-orders tr.hidden-row { display:none; }
.col-order{width:18%;} .col-buyer{width:15%;} .col-status{width:12%;} .col-pay{width:11%;} .col-sub{width:9%;} .col-ship{width:10%;} .col-total{width:9%;} .col-act{width:16%;}
.btn-xs { display:inline-flex; align-items:center; padding:4px 10px; font-size:12px; font-weight:600; border-radius:8px; border:1px solid var(--line); background:var(--bg-soft); color:var(--text); text-decoration:none; cursor:pointer; white-space:nowrap; }
.btn-xs.primary { background:var(--accent); color:#fff; border-color:var(--accent); }
.act-group { display:flex; gap:5px; flex-wrap:nowrap; }
@media(max-width:700px){
    .filter-bar select { flex:1 1 calc(50% - 5px); }
    .tbl-orders { table-layout:auto; }
    .col-sub,.col-ship,.col-total { display:none; }
}

/* ── Order detail ── */
.od-grid { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr); gap:10px; align-items:start; }
.od-grid .card { margin-bottom:0; }
.od-pill { display:inline-flex; align-items:center; padding:5px 12px; border-radius:999px; font-size:12px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.od-address { display:flex; flex-direction:column; gap:3px; font-size:14px; }
.od-meta-row { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:8px 0; border-bottom:1px solid var(--line-soft); font-size:14px; }
.od-meta-row:last-child { border-bottom:0; }
.od-meta-row span { color:var(--muted); }
.od-total-row { display:flex; justify-content:space-between; gap:12px; padding:7px 0; }
.od-total-row.final { font-size:18px; font-weight:800; border-top:2px solid var(--line); padding-top:12px; margin-top:4px; }
.pick-table { width:100%; border-collapse:collapse; }
.pick-table th { text-align:left; padding:10px 12px; font-size:12px; font-weight:700; color:var(--muted); border-bottom:1px solid var(--line); text-transform:uppercase; letter-spacing:.05em; }
.pick-table td { padding:12px; border-bottom:1px solid var(--line-soft); vertical-align:middle; }
.pick-table tr:last-child td { border-bottom:0; }
.pick-check { width:20px; height:20px; accent-color:var(--accent); cursor:pointer; }
.pick-img { width:54px; height:54px; object-fit:cover; border-radius:12px; border:1px solid var(--line); }
.ship-form label { display:block; margin-bottom:6px; font-weight:700; font-size:14px; }
.ship-form input[type=text] { width:100%; }
.od-hero { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; flex-wrap:wrap; }
.od-hero-title { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.od-hero-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
@media(max-width:900px){ .od-grid { grid-template-columns:1fr; } .od-hero { align-items:stretch; } .od-hero-actions { justify-content:flex-start; } }

/* ── Payouts ── */
.dashboard-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; margin:18px 0 22px; }
.stat-card { border-radius:18px; padding:18px; border:1px solid var(--line); background:rgba(255,255,255,.04); box-shadow:0 8px 24px rgba(15,23,42,.05); }
.stat-label { display:block; font-size:13px; color:var(--muted); margin-bottom:8px; }
.stat-card strong { font-size:24px; line-height:1.2; display:block; }
.stat-total strong { color:#60a5fa; } .stat-pending strong { color:#f59e0b; } .stat-available strong { color:#34d399; } .stat-paid strong { color:#cbd5e1; } .stat-fee strong { color:#f87171; }
.section-title { margin-bottom:18px; }
.settings-inline-form { display:grid; gap:14px; max-width:760px; }
.switch-row { display:flex; justify-content:space-between; align-items:center; gap:18px; padding:16px 18px; border-radius:18px; border:1px solid var(--line); background:rgba(255,255,255,.03); font-weight:700; }
.switch { position:relative; display:inline-flex; align-items:center; }
.switch input { position:absolute; opacity:0; pointer-events:none; }
.switch-ui { width:62px; height:34px; border-radius:999px; background:#cbd5e1; position:relative; transition:.2s ease; }
.switch-ui:after { content:""; position:absolute; top:4px; left:4px; width:26px; height:26px; border-radius:999px; background:#fff; box-shadow:0 2px 10px rgba(15,23,42,.18); transition:.2s ease; }
.switch input:checked + .switch-ui { background:#22c55e; }
.switch input:checked + .switch-ui:after { transform:translateX(28px); }
.settings-status-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; margin-top:18px; }
.status-card { border:1px solid var(--line); border-radius:18px; padding:18px; background:rgba(255,255,255,.03); }
.status-card strong { display:block; margin-bottom:10px; }

/* ── Profile edit ── */
.two-up { grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.profile-grid { align-items:start; }
.profile-preview { display:flex; align-items:center; gap:18px; }
.profile-preview-image, .profile-preview-fallback { width:88px; height:88px; border-radius:24px; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); background:rgba(56,189,248,.14); object-fit:cover; font-size:28px; font-weight:700; }
.checkbox-row { display:flex; align-items:center; gap:10px; margin:18px 0; }
.checkbox-row input { width:auto; }

/* ── Dashboard quick-links ── */
.dash-quicklinks { display:flex; flex-wrap:wrap; gap:10px; margin:16px 0 4px; }
.dash-ql { display:flex; align-items:center; gap:7px; padding:10px 16px; border-radius:14px; border:1px solid var(--line); background:var(--surface-2); color:var(--text); text-decoration:none; font-size:13px; font-weight:700; transition:border-color .15s, background .15s; }
.dash-ql:hover { border-color:var(--accent); background:var(--accent-soft); color:var(--accent-2); }
.dash-ql span { white-space:nowrap; }
.dash-ql-badge { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; border-radius:999px; background:var(--accent); color:#fff; font-size:10px; font-weight:800; padding:0 4px; vertical-align:middle; margin-left:3px; }
@media(max-width:600px){ .dash-ql { flex:1 1 calc(33% - 10px); justify-content:center; } }

/* Community Loyalty */
.seller-community { display:grid; gap:18px; }
.community-beta-pill { display:inline-flex; align-items:center; min-height:36px; padding:0 12px; border:1px solid var(--line); border-radius:999px; background:var(--surface); color:var(--muted); font-size:12px; font-weight:900; text-transform:uppercase; letter-spacing:.06em; }
.community-beta-pill.is-on { border-color:rgba(16,185,129,.32); background:rgba(16,185,129,.1); color:#059669; }
.community-beta-pill.is-off { border-color:rgba(245,158,11,.36); background:rgba(245,158,11,.12); color:#b45309; }
.community-kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.community-kpi { display:grid; gap:6px; padding:16px; border:1px solid var(--line); border-radius:10px; background:var(--surface); }
.community-kpi span { color:var(--muted); font-size:12px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.community-kpi strong { font-size:26px; line-height:1.05; }
.community-kpi small { color:var(--muted); font-size:12px; }
.community-layout { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(280px,.6fr); gap:16px; align-items:start; }
.community-panel { margin:0; }
.community-section-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:16px; }
.community-section-head h2,.community-panel h2 { margin:6px 0 4px; font-size:20px; line-height:1.2; }
.community-section-head p { margin:0; }
.community-badge-list { display:grid; gap:10px; }
.community-badge-row { display:grid; grid-template-columns:82px minmax(160px,1fr) minmax(120px,.55fr) 84px 84px; align-items:center; gap:12px; padding:12px; border:1px solid var(--line-soft); border-radius:10px; background:var(--surface-2); }
.community-badge-preview { display:flex; align-items:center; justify-content:flex-start; }
.community-chat-badge { display:inline-flex; align-items:center; justify-content:center; min-width:34px; height:22px; padding:0 9px; border:1px solid color-mix(in srgb,var(--badge-color,#10b981) 42%,transparent); border-radius:999px; background:color-mix(in srgb,var(--badge-color,#10b981) 13%,transparent); color:var(--badge-color,#10b981); font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:0; }
.community-badge-copy strong { display:block; font-size:14px; }
.community-badge-copy span { display:block; margin-top:3px; color:var(--muted); font-size:12px; }
.community-inline-field,.community-color-field,.community-toggle,.community-emote-form label { display:grid; gap:5px; margin:0; color:var(--muted); font-size:12px; font-weight:800; }
.community-inline-field input,.community-emote-form input,.community-emote-form select { min-width:0; width:100%; min-height:40px; border:1px solid var(--line); border-radius:10px; padding:8px 10px; background:var(--surface); color:var(--text); font:inherit; }
.community-color-field input { width:58px; height:40px; min-height:40px; padding:4px; border:1px solid var(--line); border-radius:10px; background:var(--surface); }
.community-toggle { align-items:center; justify-items:start; grid-template-columns:auto; }
.community-toggle input { width:18px; height:18px; accent-color:var(--accent); }
.community-roadmap { display:grid; gap:10px; }
.community-roadmap div,.community-note { padding:12px; border:1px solid var(--line-soft); border-radius:10px; background:var(--surface-2); }
.community-roadmap strong { display:block; font-size:13px; }
.community-roadmap span,.community-note { color:var(--muted); font-size:13px; line-height:1.45; }
.community-beta-panel { display:grid; gap:12px; }
.community-beta-panel h2 { margin-bottom:0; }
.community-readiness-meter { position:relative; display:grid; gap:2px; padding:14px; border:1px solid var(--line-soft); border-radius:10px; background:linear-gradient(90deg, rgba(16,185,129,.13) var(--ready-percent), var(--surface-2) var(--ready-percent)); overflow:hidden; }
.community-readiness-meter strong { font-size:26px; line-height:1; }
.community-readiness-meter span { color:var(--muted); font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.community-readiness-list { display:grid; gap:8px; }
.community-readiness-list div { display:grid; grid-template-columns:72px minmax(0,1fr); align-items:center; gap:10px; padding:10px; border:1px solid var(--line-soft); border-radius:10px; background:var(--surface-2); }
.community-readiness-list span { display:inline-flex; align-items:center; justify-content:center; min-height:24px; border-radius:999px; background:rgba(245,158,11,.12); color:#b45309; font-size:10px; font-weight:900; text-transform:uppercase; }
.community-readiness-list strong { min-width:0; font-size:13px; line-height:1.25; }
.community-readiness-list .is-done span { background:rgba(16,185,129,.12); color:#059669; }
.community-emote-form { display:grid; grid-template-columns:minmax(110px,.4fr) minmax(140px,.6fr) minmax(220px,1fr) minmax(130px,.45fr) auto; align-items:end; gap:12px; margin-bottom:16px; }
.community-emote-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; }
.community-emote-card { display:grid; grid-template-columns:58px minmax(0,1fr); gap:12px; align-items:center; padding:12px; border:1px solid var(--line-soft); border-radius:10px; background:var(--surface-2); }
.community-emote-card.is-inactive { opacity:.62; }
.community-emote-card figure { margin:0; width:58px; height:58px; border-radius:10px; overflow:hidden; border:1px solid var(--line); background:rgba(148,163,184,.08); }
.community-emote-card img { width:100%; height:100%; object-fit:contain; display:block; }
.community-emote-card strong { display:block; font-size:14px; }
.community-emote-card span { display:block; margin-top:3px; color:var(--muted); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.community-emote-card em { display:inline-flex; width:max-content; margin-top:7px; margin-right:5px; padding:3px 8px; border-radius:999px; background:var(--accent-soft); color:var(--accent-2); font-size:10px; font-style:normal; font-weight:900; text-transform:uppercase; }
.community-emote-card .community-emote-access { background:rgba(245,158,11,.12); color:#b45309; }
.community-emote-card .community-emote-moderation { background:rgba(239,68,68,.12); color:#b91c1c; }
.community-emote-actions { grid-column:1 / -1; display:flex; gap:8px; flex-wrap:wrap; }
.community-emote-actions form { margin:0; }
.community-tier-form { display:grid; grid-template-columns:minmax(140px,.8fr) 120px 96px 80px minmax(220px,1.2fr) auto; align-items:end; gap:12px; margin-bottom:16px; }
.community-tier-form label { display:grid; gap:5px; margin:0; color:var(--muted); font-size:12px; font-weight:800; }
.community-tier-form input { width:100%; min-height:40px; border:1px solid var(--line); border-radius:10px; padding:8px 10px; background:var(--surface); color:var(--text); font:inherit; }
.community-tier-form input[type=color] { padding:4px; }
.community-tier-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:12px; }
.community-tier-card { display:grid; gap:9px; padding:14px; border:1px solid color-mix(in srgb,var(--tier-color,#10b981) 28%,var(--line)); border-radius:10px; background:linear-gradient(135deg,color-mix(in srgb,var(--tier-color,#10b981) 11%,var(--surface)),var(--surface)); }
.community-tier-card.is-inactive { opacity:.62; }
.community-tier-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.community-tier-head span { width:28px; height:28px; border-radius:9px; background:var(--tier-color,#10b981); box-shadow:0 8px 20px color-mix(in srgb,var(--tier-color,#10b981) 24%,transparent); }
.community-tier-head em,.community-support-row em { font-style:normal; font-size:10px; font-weight:900; text-transform:uppercase; color:var(--muted); }
.community-tier-card strong { font-size:16px; }
.community-tier-card p { min-height:38px; margin:0; color:var(--muted); font-size:13px; line-height:1.45; }
.community-tier-card b { font-size:22px; line-height:1; color:var(--tier-color,#10b981); }
.community-tier-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:4px; }
.community-tier-actions form { margin:0; }
.community-support-history { margin-top:18px; padding-top:16px; border-top:1px solid var(--line-soft); }
.community-support-history h3 { margin:0 0 10px; font-size:16px; }
.community-support-list { display:grid; gap:8px; }
.community-support-row { display:grid; grid-template-columns:minmax(120px,1fr) minmax(120px,1fr) auto auto; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--line-soft); border-radius:10px; background:var(--surface-2); font-size:13px; }
.community-support-row span,.community-support-row strong { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.community-support-row b { color:var(--accent); }
@media(max-width:1050px) {
    .community-layout { grid-template-columns:1fr; }
    .community-badge-row { grid-template-columns:74px minmax(0,1fr) minmax(120px,.5fr) 76px; }
    .community-toggle { grid-column:2 / -1; grid-template-columns:auto auto; }
    .community-emote-form,.community-tier-form { grid-template-columns:1fr 1fr; }
    .community-emote-form .btn { justify-content:center; }
}
@media(max-width:680px) {
    .community-kpis,.community-emote-form,.community-tier-form,.community-support-row { grid-template-columns:1fr; }
    .community-section-head { flex-direction:column; align-items:stretch; }
    .community-badge-row { grid-template-columns:1fr; align-items:start; }
    .community-toggle { grid-column:auto; display:flex; align-items:center; gap:8px; }
    .community-readiness-list div { grid-template-columns:1fr; }
}

/* ── Dashboard sections & status pills ── */
.section-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:18px; }
.section-actions { display:flex; gap:10px; flex-wrap:wrap; }
.stat-card { display:flex; flex-direction:column; gap:8px; padding:18px; border:1px solid var(--line); border-radius:18px; background:var(--surface-2); }
.stat-card strong { font-size:28px; line-height:1.1; }
.stat-label { color:var(--muted); font-size:13px; text-transform:uppercase; letter-spacing:.08em; }
.status-pill { display:inline-flex; align-items:center; justify-content:center; padding:6px 10px; border-radius:999px; font-size:12px; font-weight:700; text-transform:uppercase; }
.status-pending   { background:rgba(245,158,11,.14);  color:#f59e0b; }
.status-available { background:rgba(34,197,94,.14);   color:#22c55e; }
.status-paid_out  { background:rgba(56,189,248,.14);  color:#38bdf8; }
@media (max-width:900px){ .section-head { flex-direction:column; } }

/* ── Appeal / shop bezwaar ── */
.appeal-wrap { max-width:680px; margin:0 auto; }
.appeal-card { background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:24px; margin-bottom:16px; }
.sus-notice { padding:18px 20px; border-radius:16px; background:rgba(239,68,68,.08); border:1px solid rgba(239,68,68,.3); margin-bottom:20px; }
.sus-notice h3 { margin:0 0 6px; color:#ef4444; font-size:16px; }
.sus-notice p { margin:0; font-size:14px; line-height:1.6; }
.attach-toolbar { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.attach-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:10px; margin-bottom:6px; }
.attach-grid:empty::before { content:"Nog geen bijlagen toegevoegd."; color:var(--muted); font-size:13px; grid-column:1/-1; }
.attach-item { position:relative; border-radius:12px; overflow:hidden; border:1px solid var(--line); background:var(--bg,#0f172a); aspect-ratio:1; }
.attach-item img { width:100%; height:100%; object-fit:cover; display:block; }
.attach-item .attach-name { position:absolute; bottom:0; left:0; right:0; background:rgba(0,0,0,.6); padding:3px 6px; font-size:10px; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.attach-item .attach-remove { position:absolute; top:4px; right:4px; width:22px; height:22px; border-radius:50%; background:rgba(239,68,68,.9); border:none; color:#fff; cursor:pointer; font-size:12px; line-height:22px; text-align:center; padding:0; transition:.14s; }
.attach-item .attach-remove:hover { background:#ef4444; transform:scale(1.1); }
.attach-count { font-size:12px; color:var(--muted); }
.attach-upload-btn { display:none; }
.upload-progress { display:none; padding:8px 12px; border-radius:10px; background:rgba(16,185,129,.08); border:1px solid rgba(16,185,129,.2); font-size:13px; color:var(--accent); margin-top:8px; }
.upload-err { display:none; padding:8px 12px; border-radius:10px; background:rgba(239,68,68,.08); border:1px solid rgba(239,68,68,.2); font-size:13px; color:#ef4444; margin-top:8px; }

/* ── Suspended shop banner ── */
.shop-suspended-banner { background:rgba(239,68,68,.09); border:1px solid rgba(239,68,68,.35); border-radius:20px; padding:22px 24px; margin-bottom:20px; }

/* ── Appeal status cards ── */
.appeal-status-card            { border-radius:12px; padding:10px 14px; margin-bottom:12px; }
.appeal-status-card--pending   { background:rgba(245,158,11,.1); border:1px solid rgba(245,158,11,.3); }
.appeal-status-card--review    { background:rgba(56,189,248,.08); border:1px solid rgba(56,189,248,.25); }
.appeal-status-card--rejected  { background:rgba(239,68,68,.07); border:1px solid rgba(239,68,68,.2); }
.appeal-status-card--approved  { background:rgba(16,185,129,.08); border:1px solid rgba(16,185,129,.25); }

/* ── Shipping option card ── */
.shipping-option-card   { padding:18px; border:1px solid var(--line-soft); border-radius:16px; background:var(--surface); margin-bottom:14px; }
.shipping-option-header { display:flex; align-items:center; gap:10px; margin-bottom:10px; }

/* Seller Studio */
.studio-page{max-width:1280px;margin:0 auto;padding:24px}.studio-hero{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px}.studio-hero h1{margin:6px 0;font-size:28px;line-height:1.15}.studio-hero p{max-width:760px;margin:0}.studio-hero-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.studio-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}.studio-summary div{border:1px solid var(--line-soft);border-radius:8px;background:var(--surface);padding:14px}.studio-summary strong{display:block;font-size:24px;line-height:1}.studio-summary span{display:block;margin-top:5px;color:var(--muted);font-size:12px}.studio-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:16px;align-items:start}.studio-panel{border-radius:8px}.studio-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.studio-section-head h2,.studio-panel h2{margin:4px 0 0;font-size:20px}.studio-search{height:38px;min-width:190px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--text);padding:0 12px;font:inherit}.studio-hint{font-size:12px;color:var(--muted)}.studio-add-settings,.studio-settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:12px}.studio-settings-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.studio-add-settings label,.studio-settings-grid label,.studio-queue-item label{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--muted);font-weight:700}.studio-add-settings input,.studio-add-settings select,.studio-settings-grid input,.studio-settings-grid select,.studio-queue-item input[type=text],.studio-queue-item input[type=number],.studio-queue-item select{min-height:38px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--text);padding:0 10px;font:inherit}.studio-product-list{display:grid;gap:8px;max-height:560px;overflow:auto;padding-right:4px}.studio-product-option{display:grid;grid-template-columns:auto 48px minmax(0,1fr) auto;align-items:center;gap:10px;border:1px solid var(--line-soft);border-radius:8px;background:var(--surface);padding:9px;text-decoration:none}.studio-product-option img,.studio-queue-item img,.studio-thumb-placeholder{width:48px;height:48px;border-radius:7px;object-fit:cover;background:var(--surface-soft);display:grid;place-items:center;color:var(--muted);font-weight:900;font-size:12px}.studio-product-option strong,.studio-queue-copy strong{display:block;color:var(--text);line-height:1.25}.studio-product-option small,.studio-queue-copy small{display:block;color:var(--muted);font-size:12px;margin-top:3px}.studio-product-option em{font-style:normal;color:var(--muted);font-size:11px;font-weight:800}.studio-product-option.is-disabled{opacity:.55}.studio-queue{display:grid;gap:10px}.studio-queue-item{display:grid;grid-template-columns:24px 54px minmax(180px,1fr) minmax(96px,.42fr) minmax(96px,.42fr) auto;gap:10px;align-items:center;border:1px solid var(--line-soft);border-radius:8px;background:var(--surface);padding:10px}.studio-queue-item.is-dragging{opacity:.55;border-color:var(--accent)}.studio-drag{cursor:grab;color:var(--muted);font-weight:900;text-align:center}.studio-queue-copy{min-width:0}.studio-queue-copy input{width:100%;margin-top:7px}.studio-remove{align-items:center!important;color:#b91c1c!important}.studio-remove input{width:16px;height:16px}.studio-empty{border:1px dashed var(--line);border-radius:8px;padding:22px;display:flex;flex-direction:column;gap:4px;color:var(--muted)}.studio-overlay-preview{margin-top:12px;border:1px solid color-mix(in srgb,var(--studio-accent) 38%,var(--line));border-radius:8px;background:linear-gradient(135deg,color-mix(in srgb,var(--studio-accent) 18%,var(--surface)),var(--surface));padding:18px;display:flex;flex-direction:column;gap:6px}.studio-overlay-preview span{color:var(--studio-accent);font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.studio-overlay-preview strong{font-size:22px}.studio-overlay-preview em{font-style:normal;color:var(--muted);font-size:13px}.studio-checklist{display:grid;gap:8px}.studio-checklist label{display:flex;gap:10px;align-items:center;border:1px solid var(--line-soft);border-radius:8px;padding:10px;background:var(--surface)}.studio-checklist input{width:18px;height:18px;accent-color:var(--accent)}@media (max-width:1050px){.studio-grid{grid-template-columns:1fr}.studio-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.studio-queue-item{grid-template-columns:24px 48px minmax(0,1fr);align-items:start}.studio-queue-item label,.studio-remove{grid-column:3}}@media (max-width:640px){.studio-page{padding:16px}.studio-hero{flex-direction:column}.studio-hero-actions{justify-content:flex-start}.studio-summary,.studio-add-settings,.studio-settings-grid{grid-template-columns:1fr}.studio-product-option{grid-template-columns:auto 44px minmax(0,1fr)}.studio-product-option em{display:none}.studio-section-head{align-items:flex-start;flex-direction:column}.studio-search{width:100%}}
.studio-queue-item{grid-template-columns:24px 54px minmax(190px,1fr) repeat(5,minmax(92px,.38fr)) auto}
.studio-queue-item label select{min-width:0}
@media (max-width:1180px){.studio-queue-item{grid-template-columns:24px 48px minmax(0,1fr) repeat(2,minmax(120px,1fr))}.studio-remove{grid-column:auto}.studio-queue-item label:nth-of-type(n+3){grid-column:auto}}
@media (max-width:760px){.studio-queue-item{grid-template-columns:24px 48px minmax(0,1fr)}.studio-queue-item label,.studio-remove{grid-column:3}.studio-queue-copy{grid-column:3}}

/* ============================================================
   CLIPS — seller.css additions (0.11.35)
   ============================================================ */

/* Thumbnail preview in clips table */
.clip-thumb-preview { width:56px; height:36px; object-fit:cover; border-radius:6px; display:block; border:1px solid var(--line-soft,#e5e7eb); }

/* Rejected note in clips list */
.clip-rejected-note { color:#b91c1c; font-size:11px; line-height:1.4; }

/* 0.17.0 phase 5 - mobile usability polish */
@media(max-width:640px) {
    .media-library-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .media-library-head,
    .media-upload-actions,
    .filter-bar,
    .act-group {
        align-items: stretch;
    }

    .media-upload-actions,
    .filter-bar {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .media-upload-profile select,
    .media-upload-actions input[type=file],
    .media-upload-actions .btn,
    .filter-bar input[type=search],
    .filter-bar select,
    .filter-bar .btn {
        width: 100%;
        min-width: 0;
    }

    .media-rename-form .btn,
    .act-group .btn-xs,
    .section-actions .btn,
    .studio-hero-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .act-group,
    .section-actions,
    .studio-hero-actions {
        flex-wrap: wrap;
    }

    .tbl-orders th,
    .tbl-orders td {
        padding: 8px;
        font-size: 12px;
    }

    .od-meta-row,
    .od-total-row,
    .switch-row,
    .profile-preview {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media(max-width:420px) {
    .media-library-grid,
    .dashboard-grid,
    .attach-grid {
        grid-template-columns: 1fr;
    }

    .dash-ql {
        flex-basis: 100%;
    }
}

/* ══ Verkoper-prestatiepagina ═══════════════════════════════════════════ */

/* Niveau-hero */
.perf-hero { display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.perf-hero-badge { display:flex; align-items:center; gap:16px; }
.perf-hero-icon { width:60px; height:60px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
                  border-radius:16px; background:var(--surface-2); border:1px solid var(--line); color:var(--accent-2); }
.perf-hero-icon .sc-ico { width:30px; height:30px; }
.perf-hero-label { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.perf-hero-tier { font-size:28px; font-weight:900; line-height:1.1; letter-spacing:-.02em; }
.perf-hero-meta { flex:1 1 300px; min-width:260px; display:flex; flex-direction:column; gap:8px; }
.perf-hero-points { display:flex; align-items:baseline; gap:6px; }
.perf-hero-points-val { font-size:26px; font-weight:900; letter-spacing:-.02em; }
.perf-hero-points-max { font-size:13px; color:var(--muted); font-weight:600; }
.perf-hero-perk { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:var(--accent-2); }
.perf-hero-perk--muted { color:var(--muted); font-weight:600; }
.perf-progress { height:8px; border-radius:999px; background:var(--surface-2); border:1px solid var(--line); overflow:hidden; }
.perf-progress-bar { height:100%; border-radius:999px; background:linear-gradient(90deg,var(--accent),var(--accent-2)); transition:width .4s ease; }
.perf-progress-label { font-size:12px; color:var(--muted); }

/* Niveaukleuren op de hero-icon */
.perf-tier--zilver  .perf-hero-icon { color:#8a94a6; }
.perf-tier--goud    .perf-hero-icon { color:#c79a2e; }
.perf-tier--platina .perf-hero-icon { color:#3aa6a0; }

/* Prestatiecijfers — vier gelijke, uitgelijnde tegels */
.perf-metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:0 0 24px; }
@media(max-width:820px){ .perf-metrics { grid-template-columns:repeat(2,1fr); } }
@media(max-width:460px){ .perf-metrics { grid-template-columns:1fr; } }
.perf-metric { display:grid; grid-template-columns:44px 1fr; grid-template-rows:auto auto;
               align-items:center; column-gap:12px; row-gap:2px;
               padding:16px 18px; border-radius:16px; background:var(--surface); border:1px solid var(--line); }
.perf-metric-icon { grid-column:1; grid-row:1 / span 2; width:44px; height:44px;
                    display:flex; align-items:center; justify-content:center;
                    border-radius:12px; background:var(--surface-2); border:1px solid var(--line); color:var(--muted); }
.perf-metric-icon .sc-ico { width:22px; height:22px; }
.perf-metric-val { grid-column:2; grid-row:1; font-size:24px; font-weight:900; line-height:1; letter-spacing:-.02em; }
.perf-metric-label { grid-column:2; grid-row:2; font-size:12px; font-weight:600; line-height:1.3; }
.perf-metric--warn .perf-metric-icon { color:var(--danger); background:color-mix(in srgb, var(--danger) 10%, var(--surface-2)); border-color:color-mix(in srgb, var(--danger) 26%, var(--line)); }

/* Beloningen/merits */
.perf-badges { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; }
.perf-badge { display:flex; align-items:center; gap:12px; padding:14px 16px;
              border-radius:14px; background:var(--accent-soft); border:1px solid color-mix(in srgb, var(--accent) 24%, var(--line)); }
.perf-badge-icon { width:40px; height:40px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
                   border-radius:11px; background:var(--surface); color:var(--accent-2); }
.perf-badge-label { font-size:14px; font-weight:800; }
.perf-badge-desc { font-size:12px; color:var(--muted); line-height:1.4; }

/* Niveauladder */
.perf-tier-ladder { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; margin-top:10px; }
.perf-tier-step { display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto auto; column-gap:8px;
                  padding:12px 14px; border-radius:12px; border:1px solid var(--line); background:var(--surface); }
.perf-tier-step.is-current { border-color:var(--accent); background:var(--accent-soft); }
.perf-tier-step-icon { grid-column:1; grid-row:1; color:var(--muted); display:flex; }
.perf-tier-step-name { grid-column:2; grid-row:1; font-weight:800; font-size:14px; }
.perf-tier-step-perk { grid-column:1 / span 2; grid-row:2; font-size:12px; color:var(--accent-2); font-weight:700; margin-top:4px; }
.perf-tier-step-req  { grid-column:1 / span 2; grid-row:3; font-size:11px; color:var(--muted); }

/* Kopers-korting instellen op de prestatiepagina */
.perf-buyerdisc-form { display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; }
.perf-buyerdisc-form label { display:flex; flex-direction:column; gap:6px; font-size:13px; font-weight:600; }
.perf-buyerdisc-input { display:inline-flex; align-items:center; gap:6px; }
.perf-buyerdisc-input input { width:100px; }