/* ============================================================
   STYLE REFRESH — Visual harmonization layer
   Loaded after all component CSS — cascade position means
   these rules win without needing !important.
   ============================================================ */

:root {
    color-scheme: light;
}
html[data-theme="dark"] {
    color-scheme: dark;
}

/* ── Unified surface + border treatment ── */
.content-panel,
.sidebar-panel,
.card,
.shopfront-panel,
.detail-panel,
.mod-panel,
.field-card,
.info-item,
.ap-section,
.dev-phase,
.ana-kpi,
.cs-card,
.stat-card,
.status-card,
.appeal-card,
.shipping-option-card,
.sm-card,
.sm-panel,
.summary-panel,
.kpi-card,
.srch-filter-bar,
.srch-cat-hero,
.cl-toc,
.cl-body h2 {
    border-radius: var(--radius-md);
    border-color: var(--line);
    background: var(--surface);
    box-shadow: 0 1px 2px rgba(17, 24, 39, .05);
}

/* ── Card-like elements that just need consistent radius ── */
.shopfront-hero,
.product-detail-hero,
.shop-product-card,
.srch-product-card,
.srch-shop-card,
.srch-stream-card,
.schedule-page .stream-card,
.stream-row,
.sm-topbar,
.sm-source-panel,
.sm-source-option,
.sm-thumb-block,
.sm-thumb-preview,
.sm-video-wrap,
.sm-obs-box,
.sm-sale-row,
.sm-chat-line,
.sm-product-row,
.sm-product-modal-head img,
.sm-dropzone,
.sm-media-tile,
.sm-media-empty,
.orders-card,
.checkout-card {
    border-radius: var(--radius-md);
}

/* ── Card hover shadows ── */
.shop-product-card,
.srch-product-card,
.srch-shop-card,
.srch-stream-card,
.schedule-page .stream-card {
    box-shadow: 0 1px 2px rgba(17, 24, 39, .05);
}

.shop-product-card:hover,
.srch-product-card:hover,
.srch-shop-card:hover,
.srch-stream-card:hover,
.schedule-page .stream-card:hover {
    box-shadow: 0 14px 30px rgba(17, 24, 39, .12);
}

/* ── Stat cards ── */
.adm-stat,
.mod-stat,
.ana-kpi {
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: 0 1px 2px rgba(17, 24, 39, .05);
}

/* ── Typography — remove tracking on numeric/display text ── */
.adm-stat-val,
.mod-stat-val,
.ana-kpi-val,
.shopfront-hero-copy h1,
.shop-product-price-badge strong,
.product-detail-price strong,
.review-score {
    letter-spacing: 0;
}

/* ── Shop filter / search bar elements ── */
.shopfront-category-link,
.shopfront-filter-field input,
.shopfront-filter-field select,
.shopfront-filter-check,
.shopfront-filter-bar .btn,
.filter-bar input[type=search],
.srch-bar-input input,
.srch-bar button,
.shop-alert,
.detail-alert,
.product-meta-item,
.product-media-box {
    border-radius: var(--radius-md);
}

/* ── Filter/search inputs — respect theme ── */
.shopfront-filter-field input,
.shopfront-filter-field select,
.shopfront-filter-check {
    background: var(--input-bg);
    color: var(--text);
}

/* ── Search bar input refinement ── */
.srch-bar-input input {
    border-width: 1px;
    box-shadow: 0 1px 2px rgba(17, 24, 39, .04);
}

/* ── Search button uses primary brand color ── */
.srch-bar button {
    background: var(--accent-warm);
    color: #111827;
}

/* ── Price badge consistent radius ── */
.shop-product-price-badge {
    border-radius: var(--radius-md);
    background: rgba(17, 24, 39, .84);
}

/* ── Pill letter-spacing cleanup ── */
.detail-pill,
.status-pill,
.od-pill,
.adm-pill,
.spill,
.fpill,
.appeal-badge,
.srch-cat-pill,
.srch-cat-hero-count,
.srch-count,
.live-pill {
    letter-spacing: .03em;
}

/* ── Stream manage source option ── */
.sm-source-option {
    box-shadow: 0 1px 2px rgba(17, 24, 39, .05);
}
.sm-source-option:hover {
    box-shadow: 0 10px 24px rgba(17, 24, 39, .10);
}
.sm-source-option.is-active {
    background: var(--accent-soft);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}

/* ── Code / log boxes ── */
.dev-logbox,
.sm-code,
.sm-code-copy code {
    border-radius: var(--radius-md);
}

/* ── Dev hero card cleanup ── */
.dev-hero::after {
    display: none;
}

/* ── Mobile font-size scaling ── */
@media (max-width: 640px) {
    body {
        font-size: 14px;
    }
    .page-shell,
    .hp-shell {
        padding-left: 12px;
        padding-right: 12px;
    }
}