/* Every page that loads this stylesheet also links vazirmatn.css directly from <head>,
   so an @import here would only add a chained render-blocking request on top of it. */

/* ============================================================
   Design tokens
   The previous version saturated every surface: gradient buttons, glass cards,
   mint-washed sections and hover-lifts on everything. That reads as decorative,
   not professional. The new language is flat surfaces, hairline borders, one
   reserved gradient (the brand mark) and motion limited to color/opacity.
   ============================================================ */
:root {
    /* Brand: medical blue. #2563eb is blue-600 — white on it is 5.2:1, and
       #1d4ed8 (blue-700) is 6.7:1, so both fill and text uses clear AA.
       Lighter #3b82f6 is reserved for fills/icon tints, never body text.  */
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --primary-light: #3b82f6;
    --primary-soft: #eff6ff;   /* wash for hovers and active fills */

    /* Neutrals: slate, not green-grey. Text sits at slate-700/500. */
    --ink: #1e293b;            /* slate-800 — headings */
    --body: #334155;           /* slate-700 — body text */
    --secondary: #64748b;      /* slate-500 — muted text (4.76:1 on white) */

    --success: #047857;
    --danger: #b91c1c;
    --warning: #b45309;
    --info: #0e7490;

    --canvas: #f6f8f8;         /* page background, off-white */
    --surface: #ffffff;
    --surface-2: #f1f5f4;      /* recessed fill (table head, wells) */
    --border: #e2e8f0;         /* hairline */
    --border-strong: #cbd5e1;

    /* A neutral slate-navy for the rail and the dark marketing bands. It is the
       shadow colour too, so it has to sit beside blue without greening. */
    --sidebar-ink: #0f172a;    /* slate-950 */
    --sidebar-ink-2: #020617;

    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 16px;
    --radius-pill: 999px;

    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 4px 12px -4px rgba(15, 23, 42, 0.10);
    --shadow-lg: 0 2px 6px rgba(15, 23, 42, 0.08), 0 16px 40px -12px rgba(15, 23, 42, 0.20);

    --grad-brand: linear-gradient(135deg, #3b82f6, #2563eb);

    --sidebar-width: 248px;
    --nav-height: 62px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* overflow: hidden on <body> is propagated up to the viewport, so it never clips
   body's own decorations (the 200%-wide auth-page pattern). The page then overflows,
   Chrome expands the mobile layout viewport to fit it, and the whole auth page renders
   tiny and horizontally scrollable on phones. clip is the right tool: it clips without
   creating a scroll container, so position:sticky keeps working. */
html, body { overflow-x: clip; }

body {
    font-family: 'Vazirmatn', 'Tahoma', sans-serif;
    background: var(--canvas);
    color: var(--body);
    direction: rtl;
    min-height: 100vh;
    line-height: 1.7;
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { color: var(--ink); }

/* ============================================================
   Auth pages: split-screen brand panel + form card.
   The old full-bleed gradient with an animated SVG pattern was loud and slow
   to settle. The replacement is a quiet two-column composition: a deep solid
   brand panel carrying the value proposition, and a plain white card for the
   actual form. On small screens the brand panel folds away and only the card
   remains, so a phone never renders a decorative full-height column.
   ============================================================ */
.auth-page {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    background: var(--canvas);
}

.auth-brand-panel {
    background: var(--sidebar-ink);
    color: #e2e8f0;
    padding: clamp(2rem, 4vw, 3.5rem);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}
/* Flat panel — no glow, no pattern. The single brand gradient in the logo mark
   is the only decorative gradient allowed in the app. */
.auth-brand-panel > * { position: relative; z-index: 1; }

.auth-brand-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.15rem;
    font-weight: 800;
    color: #fff;
}
.auth-brand-logo .brand-mark {
    width: 42px; height: 42px;
    background: var(--grad-brand);
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem; color: #fff;
}

.auth-brand-headline {
    font-size: clamp(1.4rem, 2.2vw, 1.9rem);
    font-weight: 800;
    color: #fff;
    line-height: 1.45;
    margin-bottom: 0.75rem;
}
.auth-brand-sub {
    color: #94a3b8;
    line-height: 1.8;
    font-size: 0.95rem;
    max-width: 34ch;
}
.auth-brand-message {
    /* auto margins absorb all leftover space, so logo pins to the top, the
       copyright to the bottom, and this group sits dead-centre. Keeping
       headline + sub + points in one node is what stops space-between from
       opening a void between a headline and the sentence that explains it. */
    margin: auto 0;
    max-width: 32rem;
}
.auth-brand-points {
    list-style: none;
    margin-top: 2rem;
    display: grid;
    gap: 0.9rem;
}
.auth-brand-points li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    color: #cbd5e1;
    font-size: 0.9rem;
}
.auth-brand-points i {
    color: var(--primary-light);
    font-size: 1rem;
    margin-top: 0.25rem;
}
.auth-brand-foot { color: #94a3b8; font-size: 0.8rem; }

.auth-form-side {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.25rem;
}

.auth-card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
    padding: clamp(1.5rem, 3vw, 2.5rem);
    width: 100%;
    max-width: 460px;
    position: relative;
}
/* The registration form is a two-column grid of fields, so it needs more room than
   the single-column login card. */
.auth-card.auth-card-wide { max-width: 660px; }

.auth-logo {
    width: 52px;
    height: 52px;
    background: var(--grad-brand);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.1rem;
    font-size: 1.35rem;
    color: white;
}

.auth-title {
    text-align: center;
    font-size: 1.35rem;
    font-weight: 800;
    margin-bottom: 0.4rem;
    color: var(--ink);
}

.auth-subtitle {
    text-align: center;
    color: var(--secondary);
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}

/* Helper line under a field. Bootstrap floating labels are white-space:nowrap,
   so a requirement wedged into the label itself gets ellipsized once the column
   narrows — the requirement belongs underneath, where it always fits. */
.form-hint {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.78rem;
    color: var(--secondary);
}

/* Payment-method picker on the shop checkout. Each option is a large touch target
   (well past the 44px minimum) with its own visible label and icon, so the choice is
   obvious without relying on the radio circle alone. */
.payment-options { display: grid; gap: 0.65rem; }
.payment-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
    margin: 0;
}
.payment-option:hover { border-color: var(--primary-light); }
.payment-option input { width: 1.15rem; height: 1.15rem; accent-color: var(--primary); flex: 0 0 auto; margin: 0; }
.payment-option:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.payment-option-body { display: flex; flex-direction: column; line-height: 1.4; }
.payment-option-body i { color: var(--primary); font-size: 1.05rem; }
.payment-option-name { font-weight: 700; color: var(--ink); }
.payment-option-body small { color: var(--secondary); font-size: 0.75rem; }

.form-control, .form-select {
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-strong);
    padding: 0.7rem 0.9rem;
    font-size: 0.95rem;
    color: var(--body);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control:focus, .form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(13, 107, 95, 0.14);
}

.btn-primary-custom {
    background: var(--primary);
    border: none;
    border-radius: var(--radius-sm);
    padding: 0.8rem 1rem;
    font-weight: 700;
    font-size: 1rem;
    color: white;
    width: 100%;
    transition: background 0.15s ease, box-shadow 0.15s ease;
    cursor: pointer;
}
.btn-primary-custom:hover {
    background: var(--primary-dark);
    box-shadow: 0 4px 14px -4px rgba(13, 107, 95, 0.5);
}

/* ============================================================
   App shell: sidebar rail + main content
   ============================================================ */
.dashboard { display: flex; min-height: 100vh; }

.sidebar {
    width: var(--sidebar-width);
    background: var(--sidebar-ink);
    color: white;
    position: fixed;
    right: 0;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    z-index: 1000;
    transition: transform 0.25s ease;
}

.mobile-menu-toggle, .mobile-menu-backdrop { display: none; }

.sidebar-header {
    padding: 1.25rem 1.25rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar-brand {
    font-size: 1.1rem;
    font-weight: 800;
    color: white;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.sidebar-brand-icon {
    width: 38px;
    height: 38px;
    background: var(--grad-brand);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
}

.sidebar-user {
    margin-top: 1rem;
    padding: 0.65rem 0.8rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.sidebar-user-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex: 0 0 auto;
}
.sidebar-user > div:last-child { min-width: 0; }
.sidebar-user .fw-bold { font-size: 0.9rem; }
.sidebar-user small { color: #94a3b8; font-size: 0.75rem; }

.sidebar-menu {
    padding: 0.75rem 0.6rem 1.25rem;
    list-style: none;
}

.sidebar-menu li { margin: 0.15rem 0; }

.sidebar-menu a {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 0.75rem;
    color: rgba(255, 255, 255, 0.66);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: background 0.15s ease, color 0.15s ease;
    font-weight: 500;
    font-size: 0.92rem;
    position: relative;
}

.sidebar-menu a:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

/* Active item: flat primary fill plus a 3px indicator bar on the trailing edge
   (the reading start, in RTL). No glow, no lift. */
.sidebar-menu a.active {
    background: rgba(59, 130, 246, 0.24);
    color: #fff;
    font-weight: 700;
}
.sidebar-menu a.active::before {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 22px;
    background: var(--primary-light);
    border-radius: 0 3px 3px 0;
}

.sidebar-menu i { width: 20px; text-align: center; font-size: 0.95rem; }

.main-content {
    margin-right: var(--sidebar-width);
    flex: 1;
    padding: clamp(1rem, 2vw, 1.5rem);
    min-height: 100vh;
}

.topbar {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 0.9rem 1.25rem;
    margin-bottom: 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.page-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.page-title i {
    width: 34px;
    height: 34px;
    background: var(--primary-soft);
    color: var(--primary);
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
}

.stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.15rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.stat-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow); }

.stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    margin-bottom: 0.7rem;
}

/* Flat tinted squares instead of the old 10%-opacity washes; the fill is now
   readable as a deliberate color, not a stain. */
.stat-icon.primary { background: #dbeafe; color: var(--primary); }
.stat-icon.success { background: #d1fae5; color: var(--success); }
.stat-icon.warning { background: #faecd6; color: var(--warning); }
.stat-icon.danger  { background: #fadcd9; color: var(--danger); }
.stat-icon.info    { background: #d8edf3; color: var(--info); }

.stat-value { font-size: 1.5rem; font-weight: 800; color: var(--ink); margin-bottom: 0.2rem; font-variant-numeric: tabular-nums; }
.stat-label { color: var(--secondary); font-size: 0.85rem; font-weight: 600; }
/* Small qualifying line under a stat card's headline figure, e.g. the gross/refund
   breakdown the net-income number is computed from. */
.stat-sub { margin-top: 0.35rem; font-size: 0.72rem; line-height: 1.5; color: var(--secondary); }

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    margin-bottom: 1.25rem;
}

.card-header {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 0.9rem 1.15rem;
    font-weight: 700;
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.table { margin-bottom: 0; }
.table thead th {
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    font-weight: 700;
    color: var(--secondary);
    font-size: 0.78rem;
    padding: 0.7rem 1.15rem;
    white-space: nowrap;
}
.table tbody td { padding: 0.75rem 1.15rem; vertical-align: middle; border-bottom: 1px solid #eef2f1; color: var(--body); }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: #f8faf9; }

.badge { padding: 0.45em 0.8em; border-radius: var(--radius-sm); font-weight: 700; font-size: 0.72rem; }

.btn { border-radius: var(--radius-sm); padding: 0.5rem 1.1rem; font-weight: 600; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; border: none; }
.btn:hover { transform: none; }
.btn-sm { padding: 0.35rem 0.75rem; font-size: 0.85rem; }

.form-label { font-weight: 600; color: var(--ink); margin-bottom: 0.45rem; font-size: 0.9rem; }

/* The landing page's own time-slot-v2 styles live inline in index.php; the .time-slot
   rules below are unused leftovers from an earlier version of the booking form. */

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
/* Entrance motion for the auth cards and panel content. The vertical travel is
   small enough to stay calm but large enough to read as movement, and the
   reduced-motion block in ui-ux-pro-max.css collapses it to nothing. */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}
.animate-fadeIn { animation: fadeInUp 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards; }

/* The landing page ships its own design system inline in index.php, so the
   .landing-hero / .feature-card rules that used to live here are unused. */

.product-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.product-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow); }
/* No product photography exists in this install, so the card carries a compact
   category chip rather than a large empty tinted square — a 168px blank panel
   per card gave the grid no hierarchy and made every item look the same. */
.product-image {
    height: 108px;
    background: var(--surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.85rem;
    border-bottom: 1px solid var(--border);
}
.product-image i { color: var(--primary-dark); }
.product-body { padding: 1.1rem; }
.product-price { font-size: 1.05rem; font-weight: 800; color: var(--primary); font-variant-numeric: tabular-nums; }

@media (max-width: 991px) {
    .auth-page { grid-template-columns: 1fr; }
    .auth-brand-panel { display: none; }
    .sidebar { transform: translateX(100%); z-index: 1050; }
    .sidebar.active { transform: translateX(0); }
    .main-content { margin-right: 0; }
    /* The fixed hamburger sits over the topbar; reserve room for it. */
    .topbar { padding: 0.85rem 4.25rem 0.85rem 1rem; }
    .mobile-menu-toggle { display: grid; place-items: center; position: fixed; top: 0.75rem; right: 0.75rem; z-index: 1060; width: 44px; height: 44px; border: 0; border-radius: var(--radius-sm); background: var(--primary); color: white; box-shadow: var(--shadow); cursor: pointer; }
    .mobile-menu-backdrop { display: block; position: fixed; inset: 0; z-index: 1045; background: rgba(15, 31, 29, 0.45); opacity: 0; pointer-events: none; transition: opacity 0.2s ease; }
    body.menu-open { overflow: hidden; }
    body.menu-open .mobile-menu-backdrop { opacity: 1; pointer-events: auto; }
    body.menu-open .mobile-menu-toggle { background: var(--sidebar-ink); }
}

/* Explicit close button inside the open mobile sidebar (the fixed hamburger is
   the only other control and it sits *under* the open sidebar). */
.sidebar-close { display: none; }

@media (max-width: 991px) {
    .sidebar-close {
        display: grid; place-items: center; position: absolute; top: 0.75rem; left: 0.75rem;
        width: 40px; height: 40px; border: 0; border-radius: 10px;
        background: rgba(255,255,255,0.08); color: white; cursor: pointer; z-index: 2;
    }
    .sidebar-close:hover { background: rgba(255,255,255,0.16); }
}

@media (max-width: 767px) {
    body { font-size: 14px; }
    .auth-form-side { padding: 1.25rem 0.9rem; }
    .auth-card { padding: 1.4rem 1.1rem; border-radius: var(--radius); }
    .auth-logo { width: 46px; height: 46px; font-size: 1.2rem; margin-bottom: 0.9rem; }
    .auth-title { font-size: 1.2rem; }
    .main-content { padding: 0.75rem; }
    .topbar { border-radius: var(--radius); margin-bottom: 0.85rem; flex-wrap: wrap; gap: 0.5rem; }
    .sidebar { width: min(86vw, 290px); }
    .sidebar-header { padding: 1rem 1rem 0.85rem; }
    .sidebar-menu { padding: 0.5rem 0.5rem 1rem; }
    .sidebar-menu a { padding: 0.6rem 0.7rem; font-size: 0.9rem; }
    .page-title { font-size: 1.05rem; }
    .stat-card { padding: 1rem; border-radius: var(--radius); }
    .stat-value { font-size: 1.3rem; }
    .card { border-radius: var(--radius); margin-bottom: 1rem; }
    .card-header { padding: 0.8rem 1rem; }
    .table-responsive { border-radius: 0 0 var(--radius) var(--radius); }
    .table thead th, .table tbody td { white-space: nowrap; padding: 0.6rem 0.75rem; }
}

.captcha-img {
    height: 48px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-strong);
    cursor: pointer;
    background: var(--surface-2);
    flex: 0 0 auto;
    user-select: none;
    -webkit-user-drag: none;
}
.captcha-img:hover { border-color: var(--primary); }
.captcha-input { letter-spacing: 0.35em; text-align: center; font-weight: 700; }

/* Pagination + patient picker: shared by every list page. */
.pagination { gap: 0.3rem; }
.pagination .page-link {
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-strong);
    color: var(--secondary);
    padding: 0.42rem 0.8rem;
    font-weight: 700;
    background: var(--surface);
}
.pagination .page-item.disabled .page-link { opacity: 0.5; pointer-events: none; }
.pagination .page-item.active .page-link {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

/* Type-ahead patient picker (replaces loading every patient into a <select>). */
.patient-picker { position: relative; }
.patient-picker-results {
    position: absolute;
    top: 100%;
    inset-inline: 0;
    z-index: 1080;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    margin-top: 0.35rem;
    max-height: 240px;
    overflow-y: auto;
    display: none;
}
.patient-picker-results.show { display: block; }
.patient-picker-results .picker-item {
    padding: 0.6rem 1rem;
    cursor: pointer;
    border-bottom: 1px solid #eef2f1;
    font-weight: 600;
}
.patient-picker-results .picker-item:last-child { border-bottom: none; }
.patient-picker-results .picker-item:hover,
.patient-picker-results .picker-item.active {
    background: var(--primary-soft);
    color: var(--primary-dark);
}
.patient-picker-results .picker-empty { padding: 0.85rem 1rem; color: var(--secondary); font-size: 0.9rem; }


@media (max-width: 380px) {
    .topbar { align-items: flex-start; }
    .btn { padding: 0.42rem 0.8rem; }
}

/* Bootstrap ships every .btn-primary and .text-primary in its default blue (#0d6efd),
   which fights the teal identity — together they appear on 36 pages. Retuning the
   utility classes here beats chasing each file; style.css loads after bootstrap.min.css
   so equal-specificity rules win. Flat fills, no gradients. */
.btn-primary {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    color: #fff;
}
.btn-outline-primary {
    color: var(--primary);
    border-color: var(--border-strong);
    background: var(--surface);
}
.btn-outline-primary:hover, .btn-outline-primary:focus {
    background: var(--primary-soft);
    border-color: var(--primary);
    color: var(--primary-dark);
}
.text-primary { color: var(--primary) !important; }
.bg-primary { background: var(--primary) !important; }
.link-primary { color: var(--primary) !important; }
.link-primary:hover { color: var(--primary-dark) !important; }
.list-group-item.active { background: var(--primary); border-color: var(--primary); }

/* Theme picker (admin/settings.php): the palettes are radios dressed as pills, so
   the admin sees each option as its actual gradient before committing to it. */
.theme-picker { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.theme-swatch {
    position: relative;
    display: inline-flex; align-items: center; gap: 0.55rem;
    padding: 0.55rem 0.95rem; border: 1px solid var(--border); border-radius: var(--radius-pill);
    background: var(--surface); cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.theme-swatch:hover { border-color: var(--primary-light); }
/* The radio itself is collapsed, so the label has to paint the keyboard focus ring. */
.theme-swatch:focus-within { outline: 3px solid var(--primary); outline-offset: 2px; }
.theme-swatch.selected {
    border-color: var(--primary); background: var(--primary-soft);
    box-shadow: 0 0 0 1px var(--primary) inset;
}
.theme-swatch input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.theme-dot {
    width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto;
    box-shadow: 0 0 0 1px rgba(15,23,42,0.12);
}
.theme-name { font-weight: 700; font-size: 0.88rem; color: var(--ink); white-space: nowrap; }