/* ============================================================================
   WINDOWS XP — LUNA (BLUE) THEME
   ============================================================================
   Authentic Luna blue visual language: glossy blue title-bar gradients with
   rounded top corners and white caption text, the silver/beige "Luna" window
   body (#ECE9D8) over white client areas, rounded blue-glass buttons with a
   soft highlight + hover glow, white sunken inputs with a blue focus glow, and
   the blue taskbar gradient / green Start button accents.

   Reference Luna hex values:
     Title-bar gradient   #0054E3 → #2F8EF4 → #1C6FE8  (glass highlight #4DA7FF)
     Active window border #0831D9 / #003EC8
     Luna body grey/beige #ECE9D8   (raised face #F1EFE2, shadow #ACA899)
     Client/white area    #FFFFFF
     Selection blue       #316AC5
     Taskbar gradient     #245EDC → #3F8CF3
     Start green          #3CB371 / #2C9E2C
     Link blue            #0033CC / #0054E3
   ============================================================================ */

:root[data-theme="winxp"] {
    /* ── Luna raw palette ─────────────────────────────────────────────── */
    --xp-luna-blue: #0054e3;
    --xp-luna-blue-light: #3d95ff;
    --xp-luna-blue-glass: #4da7ff;
    --xp-luna-blue-mid: #2f8ef4;
    --xp-luna-blue-deep: #003ec8;
    --xp-title-grad: linear-gradient(180deg, #1c6fe8 0%, #2f8ef4 8%, #0054e3 45%, #003fcf 92%, #0831d9 100%);
    --xp-title-gloss: linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.10) 45%, rgba(255,255,255,0) 55%);

    --xp-face: #ece9d8;            /* Luna beige-grey window body */
    --xp-face-light: #f4f2e9;      /* raised highlight face */
    --xp-face-dark: #aca899;       /* sunken shadow */
    --xp-face-darker: #716f64;
    --xp-white: #ffffff;
    --xp-black: #000000;

    --xp-btn-grad: linear-gradient(180deg, #fdfdfd 0%, #f1f0ea 45%, #dcd8c6 96%);
    --xp-btn-grad-hover: linear-gradient(180deg, #ffffff 0%, #f6f4e8 45%, #ffd98a 100%);
    --xp-btn-primary-grad: linear-gradient(180deg, #59a9ff 0%, #2f8ef4 45%, #0054e3 96%);
    --xp-btn-primary-grad-hover: linear-gradient(180deg, #79bcff 0%, #3d95ff 45%, #1264ef 100%);
    --xp-start-grad: linear-gradient(180deg, #5fbf5f 0%, #3cb371 40%, #2c9e2c 100%);

    --xp-select: #316ac5;
    --xp-link: #0033cc;
    --xp-link-hover: #0054e3;
    --xp-link-visited: #551a8b;

    /* ── canonical --tl-* contract ────────────────────────────────────── */
    /* ACCENT — Luna blue */
    --tl-accent-primary: #0054e3;
    --tl-accent-primary-light: #3d95ff;
    --tl-accent-primary-dark: #003ec8;
    --tl-accent-primary-darker: #002a9e;

    /* BACKGROUNDS — Luna "Bliss"-ish desktop blue base, beige/white surfaces */
    --tl-bg-base: #5a7edc;          /* Luna desktop blue (sits behind the windows) */
    --tl-bg-elevated: #ece9d8;      /* window body */
    --tl-bg-elevated-1: #f1efe2;
    --tl-bg-elevated-2: #ffffff;    /* white client area / insets */
    --tl-bg-elevated-3: #dcd8c6;    /* raised-most (secondary btn) */
    --tl-bg-hover: #e8effb;         /* pale blue hover */
    --tl-bg-input: #ffffff;

    /* BORDERS */
    --tl-border-subtle: #d4d0c0;
    --tl-border-default: #aca899;
    --tl-border-strong: #7f7d70;
    --tl-border-focus: var(--xp-luna-blue);

    /* TEXT */
    --tl-text-primary: #000000;
    --tl-text-secondary: #3b3b34;
    --tl-text-muted: #5a5852;
    --tl-text-subtle: #80806f;
    --tl-text-inverse: #ffffff;     /* caption text on blue title bars */

    /* STATE */
    --tl-success: #167a16;
    --tl-error: #cc0000;
    --tl-error-bg: #fdecea;
    --tl-error-border: #e0a0a0;
    --tl-warning: #b8860b;
    --tl-info: #0054e3;

    /* CARDS */
    --tl-card-bg: #ece9d8;
    --tl-card-border: #aca899;
    --tl-card-header-bg: var(--xp-title-grad);

    /* BUTTONS */
    --tl-button-primary-bg: var(--xp-btn-primary-grad);
    --tl-button-primary-hover: var(--xp-btn-primary-grad-hover);
    --tl-button-primary-text: #ffffff;
    --tl-button-secondary-bg: #ece9d8;
    --tl-button-secondary-hover: #f4f2e9;
    --tl-button-secondary-text: #000000;

    /* RATING */
    --tl-rating-fill: var(--xp-luna-blue);
    --tl-rating-empty: #d4d0c0;
    --tl-rating-hover: var(--xp-luna-blue-light);

    /* SHADOWS — soft XP drop shadows */
    --tl-shadow-sm: 0 1px 2px rgba(0, 24, 80, 0.25);
    --tl-shadow-md: 0 3px 8px rgba(0, 24, 80, 0.30);
    --tl-shadow-lg: 0 8px 20px rgba(0, 24, 80, 0.35);

    /* ── backwards-compat mappings ────────────────────────────────────── */
    --primary-color: var(--tl-accent-primary);
    --primary-hover: var(--tl-accent-primary-light);
    --bg-secondary: var(--tl-bg-elevated-2);
    --bg-card: var(--tl-bg-elevated);
    --bg-hover: var(--tl-bg-hover);
    --border-color: var(--tl-border-default);
    --text-primary: var(--tl-text-primary);
    --text-secondary: var(--tl-text-secondary);
    --text-muted: var(--tl-text-muted);
    --ux-bg: var(--tl-bg-base);
    --ux-text: var(--tl-text-primary);
}

/* ============================================================================
   PAGE / BODY — Luna desktop blue with soft "Bliss" gradient wash
   ============================================================================ */
:root[data-theme="winxp"] body {
    background:
        radial-gradient(ellipse 120% 80% at 50% 120%, #7da4ef 0%, transparent 60%),
        linear-gradient(180deg, #5a7edc 0%, #4f74d4 45%, #3a5ec0 100%);
    background-attachment: fixed;
    font-family: 'Tahoma', 'Segoe UI', 'Franklin Gothic Medium', sans-serif;
    color: #000000;
}

:root[data-theme="winxp"] h1,
:root[data-theme="winxp"] h2,
:root[data-theme="winxp"] h3,
:root[data-theme="winxp"] h4,
:root[data-theme="winxp"] h5,
:root[data-theme="winxp"] h6 {
    font-family: 'Tahoma', 'Segoe UI', sans-serif;
    color: #002c74;
}

/* Links — classic XP blue, underline on hover */
:root[data-theme="winxp"] a:not(.btn):not(.nav-link) {
    color: var(--xp-link);
    text-decoration: none;
}
:root[data-theme="winxp"] a:not(.btn):not(.nav-link):hover {
    color: var(--xp-link-hover);
    text-decoration: underline;
}
:root[data-theme="winxp"] a:visited:not(.btn):not(.nav-link) {
    color: var(--xp-link-visited);
}

/* Selection — Luna highlight blue */
:root[data-theme="winxp"] ::selection {
    background: var(--xp-select);
    color: #ffffff;
}

/* ============================================================================
   TOP-ROW / NAV BAND — Luna blue taskbar-style gradient
   ============================================================================ */
:root[data-theme="winxp"] .top-row {
    background: linear-gradient(180deg, #3f8cf3 0%, #2c6fe0 50%, #245edc 100%);
    border-bottom: 1px solid #103a9e;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 2px 6px rgba(0, 20, 70, 0.35);
    color: #ffffff;
}

:root[data-theme="winxp"] .top-row .tlv-brand {
    color: #ffffff;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 18, 60, 0.6);
    letter-spacing: 0.02em;
}

/* Nav links — glassy pill tabs on the blue band */
:root[data-theme="winxp"] .nav-link {
    color: #eaf2ff;
    border-radius: var(--tl-radius-sm);
    padding: 0.35rem 0.8rem;
    font-weight: 600;
    text-shadow: 0 1px 1px rgba(0, 18, 60, 0.45);
    transition: background var(--tl-transition-fast);
}
:root[data-theme="winxp"] .nav-link:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}
:root[data-theme="winxp"] .nav-link.active {
    background: linear-gradient(180deg, rgba(255,255,255,0.40) 0%, rgba(255,255,255,0.12) 100%);
    color: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

/* Sidebar nav links sit on the beige sidebar, not the blue band — tint them */
:root[data-theme="winxp"] .sidebar .nav-link {
    color: #0033aa;
    text-shadow: none;
}
:root[data-theme="winxp"] .sidebar .nav-link:hover {
    background: var(--xp-luna-blue);
    color: #ffffff;
}
:root[data-theme="winxp"] .sidebar .nav-link.active {
    background: var(--xp-luna-blue);
    color: #ffffff;
    box-shadow: none;
}

/* Footer nav links */
:root[data-theme="winxp"] .tlv-footer .nav-link {
    color: #0033aa;
    text-shadow: none;
}
:root[data-theme="winxp"] .tlv-footer .nav-link:hover {
    text-decoration: underline;
    color: var(--xp-luna-blue);
}

/* ============================================================================
   SIDEBAR — Luna beige panel
   ============================================================================ */
:root[data-theme="winxp"] .sidebar {
    background: linear-gradient(180deg, #f4f2e9 0%, #ece9d8 100%);
    border: 1px solid #aca899;
    border-radius: var(--tl-radius-md);
    box-shadow: var(--tl-shadow-sm);
}

/* ============================================================================
   CARDS / PANELS — silver Luna panels with thin rounded borders
   ============================================================================ */
:root[data-theme="winxp"] .card,
:root[data-theme="winxp"] .content-card,
:root[data-theme="winxp"] .stat-card,
:root[data-theme="winxp"] .infobox,
:root[data-theme="winxp"] .entity-card {
    background: linear-gradient(180deg, #f4f2e9 0%, #ece9d8 100%);
    border: 1px solid #aca899;
    border-radius: var(--tl-radius-md);
    box-shadow: 0 1px 0 #ffffff inset, var(--tl-shadow-sm);
    color: #000000;
}

:root[data-theme="winxp"] .content-card:hover,
:root[data-theme="winxp"] .stat-card:hover {
    border-color: var(--xp-luna-blue);
    box-shadow: 0 1px 0 #ffffff inset, 0 0 0 1px rgba(0, 84, 227, 0.35), var(--tl-shadow-md);
}

/* Content card image area — white sunken client panel */
:root[data-theme="winxp"] .content-hero {
    background: #ffffff;
    border: 1px solid #aca899;
    border-radius: var(--tl-radius-sm);
    box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.18);
    height: 110px;
}

:root[data-theme="winxp"] .content-type {
    color: var(--xp-luna-blue-deep);
    font-weight: 700;
    text-transform: uppercase;
    font-size: var(--tl-font-size-xs);
    letter-spacing: 0.04em;
}
:root[data-theme="winxp"] .content-title { color: #002c74; }

/* Stat tiles */
:root[data-theme="winxp"] .stat-value {
    color: var(--xp-luna-blue-deep);
    font-weight: 700;
}
:root[data-theme="winxp"] .stat-label {
    color: #5a5852;
    text-transform: uppercase;
    font-size: var(--tl-font-size-xs);
    letter-spacing: 0.03em;
}

/* ============================================================================
   CONTENT SECTIONS — XP window: blue glossy title bar w/ rounded top corners
   ============================================================================ */
:root[data-theme="winxp"] .content-section {
    background: #ece9d8;
    border: 1px solid #0831d9;
    border-radius: var(--tl-radius-md) var(--tl-radius-md) var(--tl-radius-sm) var(--tl-radius-sm);
    box-shadow: var(--tl-shadow-md);
    overflow: hidden;
    padding: 0;
    margin-bottom: var(--tl-spacing-lg);
}

/* The glossy blue title bar */
:root[data-theme="winxp"] .content-section .section-header,
:root[data-theme="winxp"] .section-header {
    position: relative;
    background: var(--xp-title-grad);
    color: #ffffff;
    padding: 6px 10px;
    margin: 0;
    border: none;
    border-radius: 7px 7px 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 26px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* Top gloss highlight band on the caption bar */
:root[data-theme="winxp"] .content-section .section-header::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 48%;
    background: var(--xp-title-gloss);
    border-radius: 7px 7px 0 0;
    pointer-events: none;
}

/* Faux window controls on the right of the caption bar */
:root[data-theme="winxp"] .content-section .section-header::after {
    content: '_ ☐ ✕';
    position: relative;
    z-index: 1;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 6px;
    color: #ffffff;
    opacity: 0.92;
    text-shadow: 0 1px 1px rgba(0, 20, 70, 0.6);
    margin-left: auto;
}

:root[data-theme="winxp"] .section-header .section-title,
:root[data-theme="winxp"] .section-title {
    position: relative;
    z-index: 1;
    color: #ffffff;
    font-size: var(--tl-font-size-base);
    font-weight: 700;
    margin: 0;
    text-shadow: 0 1px 2px rgba(0, 18, 60, 0.55);
}

/* Section body padding (the window client area) */
:root[data-theme="winxp"] .content-section > *:not(.section-header) {
    padding: var(--tl-spacing-md);
}
:root[data-theme="winxp"] .content-section .tlv-card-grid,
:root[data-theme="winxp"] .content-section .tlv-price-grid {
    padding: var(--tl-spacing-md);
}

/* Badge inside the blue header should stay readable */
:root[data-theme="winxp"] .section-header .badge {
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

/* ============================================================================
   HERO — XP window with a "Welcome" caption bar
   ============================================================================ */
:root[data-theme="winxp"] .hero {
    position: relative;
    background: linear-gradient(180deg, #f6f4ea 0%, #ece9d8 100%);
    border: 1px solid #0831d9;
    border-radius: var(--tl-radius-md);
    box-shadow: var(--tl-shadow-md);
    overflow: hidden;
    padding: 0;
    margin-bottom: var(--tl-spacing-lg);
}
:root[data-theme="winxp"] .hero::before {
    content: 'Welcome';
    position: relative;
    display: block;
    background: var(--xp-title-grad);
    color: #ffffff;
    padding: 6px 10px;
    font-family: 'Tahoma', 'Segoe UI', sans-serif;
    font-size: var(--tl-font-size-sm);
    font-weight: 700;
    border-radius: 7px 7px 0 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
    text-shadow: 0 1px 2px rgba(0, 18, 60, 0.55);
}
:root[data-theme="winxp"] .hero > *:not(::before) {
    padding-left: var(--tl-spacing-lg);
    padding-right: var(--tl-spacing-lg);
}
:root[data-theme="winxp"] .hero h1 {
    color: #002c74;
    margin: var(--tl-spacing-md) 0 var(--tl-spacing-sm);
    padding: 0 var(--tl-spacing-lg);
}
:root[data-theme="winxp"] .hero .hero-subtitle {
    color: #2b2b24;
    padding: 0 var(--tl-spacing-lg);
}
:root[data-theme="winxp"] .hero .tlv-row-wrap {
    padding: var(--tl-spacing-md) var(--tl-spacing-lg) var(--tl-spacing-lg);
}

/* ============================================================================
   BUTTONS — rounded XP glass buttons
   ============================================================================ */
:root[data-theme="winxp"] .btn {
    background: var(--xp-btn-grad);
    border: 1px solid #8a8675;
    border-radius: var(--tl-radius-sm);
    color: #000000;
    font-family: 'Tahoma', 'Segoe UI', sans-serif;
    font-weight: 600;
    box-shadow: inset 0 1px 0 #ffffff, inset 0 -1px 0 rgba(0, 0, 0, 0.08), 0 1px 1px rgba(0, 0, 0, 0.12);
    transition: filter var(--tl-transition-fast), box-shadow var(--tl-transition-fast);
}
:root[data-theme="winxp"] .btn:hover {
    background: var(--xp-btn-grad-hover);
    border-color: #e8a200;
    box-shadow: inset 0 1px 0 #ffffff, 0 0 4px rgba(255, 180, 0, 0.55), 0 1px 1px rgba(0, 0, 0, 0.12);
    filter: none;
}
:root[data-theme="winxp"] .btn:active {
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.30);
    background: linear-gradient(180deg, #e6e3d5 0%, #f1f0ea 100%);
}

/* Primary — blue glass */
:root[data-theme="winxp"] .btn-primary {
    background: var(--xp-btn-primary-grad);
    border: 1px solid #00379f;
    color: #ffffff;
    text-shadow: 0 1px 1px rgba(0, 18, 60, 0.5);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -2px 4px rgba(0, 30, 110, 0.4), 0 1px 2px rgba(0, 20, 70, 0.3);
}
:root[data-theme="winxp"] .btn-primary:hover {
    background: var(--xp-btn-primary-grad-hover);
    border-color: #0a52d8;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 0 6px rgba(77, 167, 255, 0.6), 0 1px 2px rgba(0, 20, 70, 0.3);
}
:root[data-theme="winxp"] .btn-primary:active {
    background: linear-gradient(180deg, #0054e3 0%, #2f8ef4 100%);
    box-shadow: inset 0 2px 4px rgba(0, 20, 70, 0.55);
}

/* Secondary — beige glass */
:root[data-theme="winxp"] .btn-secondary {
    background: var(--xp-btn-grad);
    border: 1px solid #8a8675;
    color: #000000;
}

/* Ghost — flat blue text link */
:root[data-theme="winxp"] .btn-ghost {
    background: transparent;
    border: 1px solid transparent;
    color: var(--xp-luna-blue);
    box-shadow: none;
    text-shadow: none;
}
:root[data-theme="winxp"] .btn-ghost:hover {
    background: var(--tl-bg-hover);
    border-color: #9fc2f5;
    box-shadow: none;
}

/* ============================================================================
   FORM CONTROLS — white sunken field with blue focus glow
   ============================================================================ */
:root[data-theme="winxp"] .form-control,
:root[data-theme="winxp"] input,
:root[data-theme="winxp"] textarea,
:root[data-theme="winxp"] select {
    background: #ffffff;
    border: 1px solid #7f9db9;
    border-radius: var(--tl-radius-sm);
    color: #000000;
    font-family: 'Tahoma', 'Segoe UI', sans-serif;
    box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.16);
}
:root[data-theme="winxp"] .form-control::placeholder,
:root[data-theme="winxp"] input::placeholder,
:root[data-theme="winxp"] textarea::placeholder {
    color: #80806f;
}
:root[data-theme="winxp"] .form-control:focus,
:root[data-theme="winxp"] input:focus,
:root[data-theme="winxp"] textarea:focus,
:root[data-theme="winxp"] select:focus {
    border-color: var(--xp-luna-blue);
    box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.10), 0 0 0 3px rgba(0, 84, 227, 0.22);
    outline: none;
}

/* The nav search input sits on the blue band — keep it crisp white */
:root[data-theme="winxp"] .top-row .tlv-nav-search {
    border-color: #0e3a9c;
}

/* ============================================================================
   BADGES — rounded blue glass pills
   ============================================================================ */
:root[data-theme="winxp"] .badge {
    background: linear-gradient(180deg, #4d9bff 0%, #0054e3 100%);
    color: #ffffff;
    border-radius: var(--tl-radius-full);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
    text-shadow: 0 1px 1px rgba(0, 18, 60, 0.4);
}
:root[data-theme="winxp"] .badge-success {
    background: var(--xp-start-grad);
    color: #ffffff;
}
:root[data-theme="winxp"] .badge-warning {
    background: linear-gradient(180deg, #ffd24d 0%, #e8a200 100%);
    color: #3a2a00;
    text-shadow: none;
}
:root[data-theme="winxp"] .badge-error {
    background: linear-gradient(180deg, #ff6a5a 0%, #cc0000 100%);
    color: #ffffff;
}

/* ============================================================================
   TABLE — Luna list view: blue gradient header, blue row selection
   ============================================================================ */
:root[data-theme="winxp"] .table {
    background: #ffffff;
    border: 1px solid #aca899;
    border-radius: var(--tl-radius-sm);
    overflow: hidden;
}
:root[data-theme="winxp"] .table th {
    background: linear-gradient(180deg, #fbfbfb 0%, #e6e6d9 100%);
    color: #002c74;
    border-bottom: 1px solid #aca899;
    border-right: 1px solid #d4d0c0;
    font-weight: 700;
    text-align: left;
}
:root[data-theme="winxp"] .table td {
    background: transparent;
    color: #000000;
    border-bottom: 1px solid #ece9d8;
}
:root[data-theme="winxp"] .table tbody tr:nth-child(even) td {
    background: #f6f5ee;
}
:root[data-theme="winxp"] .table tbody tr:hover td {
    background: var(--tl-bg-hover);
}

/* ============================================================================
   COLLAPSIBLE / FAQ — XP group box with blue header summary
   ============================================================================ */
:root[data-theme="winxp"] .collapsible-section {
    background: #ffffff;
    border: 1px solid #aca899;
    border-radius: var(--tl-radius-sm);
    margin-bottom: var(--tl-spacing-sm);
    overflow: hidden;
}
:root[data-theme="winxp"] .collapsible-header {
    background: linear-gradient(180deg, #f4f2e9 0%, #e3e0cf 100%);
    color: #002c74;
    padding: 8px 12px;
    cursor: pointer;
    font-weight: 600;
    border-bottom: 1px solid #d4d0c0;
    list-style: none;
}
:root[data-theme="winxp"] .collapsible-header:hover {
    background: var(--tl-bg-hover);
    color: var(--xp-luna-blue-deep);
}
:root[data-theme="winxp"] .collapsible-title { color: inherit; }
:root[data-theme="winxp"] .collapsible-count {
    background: var(--xp-luna-blue);
    color: #ffffff;
    border-radius: var(--tl-radius-full);
    padding: 0 0.5rem;
    font-size: var(--tl-font-size-xs);
    font-weight: 700;
}
:root[data-theme="winxp"] .collapsible-chevron { color: var(--xp-luna-blue); }
:root[data-theme="winxp"] .collapsible-content { padding: var(--tl-spacing-md); }

/* ============================================================================
   ALERTS / TOASTS — XP balloon styling
   ============================================================================ */
:root[data-theme="winxp"] .alert {
    border-radius: var(--tl-radius-md);
    border: 1px solid #aca899;
    box-shadow: var(--tl-shadow-sm);
}
:root[data-theme="winxp"] .tlv-alert-success { background: #eef8ee; border-color: #9cc79c; color: #15571a; }
:root[data-theme="winxp"] .tlv-alert-error   { background: #fdecea; border-color: #e0a0a0; color: #a30000; }
:root[data-theme="winxp"] .tlv-alert-warning { background: #fff7e0; border-color: #e6c870; color: #7a5800; }
:root[data-theme="winxp"] .tlv-alert-info    { background: #e9f1ff; border-color: #9fc2f5; color: #003ec8; }

:root[data-theme="winxp"] .toast {
    background: linear-gradient(180deg, #fbfbf6 0%, #ece9d8 100%);
    border: 1px solid #0831d9;
    border-radius: var(--tl-radius-md);
    color: #000000;
    box-shadow: var(--tl-shadow-lg);
}

/* ============================================================================
   FOOTER + PROSE
   ============================================================================ */
:root[data-theme="winxp"] .tlv-footer {
    background: linear-gradient(180deg, #f4f2e9 0%, #ece9d8 100%);
    border-top: 2px solid #0831d9;
    color: #2b2b24;
}
:root[data-theme="winxp"] .tlv-eyebrow {
    color: var(--xp-luna-blue-deep);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
}

:root[data-theme="winxp"] .tlv-prose,
:root[data-theme="winxp"] .tlv-prose p { color: #1c1c16; }
:root[data-theme="winxp"] code,
:root[data-theme="winxp"] pre {
    background: #fbfbf3;
    border: 1px solid #d4d0c0;
    color: #002c74;
}

/* Pricing tile emphasis for the popular plan */
:root[data-theme="winxp"] .tlv-price { color: #002c74; }
:root[data-theme="winxp"] .tlv-price-per { color: #5a5852; }

/* ============================================================================
   SCROLLBAR — XP blue-ish chunky scrollbar
   ============================================================================ */
:root[data-theme="winxp"] ::-webkit-scrollbar {
    width: 16px;
    height: 16px;
}
:root[data-theme="winxp"] ::-webkit-scrollbar-track {
    background: #d6e3f7;
    border-left: 1px solid #aab8d0;
}
:root[data-theme="winxp"] ::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, #6fa3ef 0%, #3f7fe0 50%, #2f6fd8 100%);
    border: 1px solid #1e57c0;
    border-radius: var(--tl-radius-sm);
}
:root[data-theme="winxp"] ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(90deg, #84b4f6 0%, #4d8eea 100%);
}

/* Focus ring — XP-style dotted + blue glow */
:root[data-theme="winxp"] *:focus-visible {
    outline: 1px dotted #002c74;
    outline-offset: 2px;
}

/* ============================================================================
   WINXP "LUNA" TASKBAR  (chrome: WinXpTaskbar)
   ============================================================================
   The XP analog of the Win95 taskbar. A fixed blue Luna gradient bar across the
   bottom with a green glass "start" orb, an active-window slot, a spacer, and a
   system tray holding a theme-switcher icon + live clock. The Start menu and
   theme menu panels mirror the win95 structure but in Luna chrome.

   z-index sits at 9000 — high enough to float over page content, but BELOW the
   app's own overlays (win95 uses 9988–9999 for CRT/effect layers), so the
   taskbar never covers a host app's modal/effect surfaces. The pop-up menus
   layer just above the bar (9001–9003) so they sit over it yet still under any
   app overlay.
   ============================================================================ */

/* Reserve space so fixed taskbar doesn't sit on top of the last bit of content
   (mirrors win95's .ww-layout margin-bottom: 48px for the taskbar). */
:root[data-theme="winxp"] body {
    padding-bottom: 34px;
}

.wxp-taskbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 30px;
    background: linear-gradient(180deg, #3f8cf3 0%, #2c6fe0 50%, #245edc 100%);
    /* top highlight line */
    border-top: 1px solid #4a9bff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 -1px 4px rgba(0, 20, 70, 0.35);
    display: flex;
    align-items: center;
    padding: 0 6px 0 0;
    gap: 6px;
    z-index: 9000;
    color: #ffffff;
    font-family: 'Tahoma', 'Segoe UI', sans-serif;
    font-size: 12px;
}

/* ── Green glass Start orb/pill ───────────────────────────────────────────── */
.wxp-start-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 30px;
    padding: 0 18px 0 12px;
    background: linear-gradient(180deg, #5fbf5f 0%, #3cb371 40%, #2c9e2c 100%);
    border: none;
    border-radius: 0 14px 14px 0;   /* rounded right side, XP orb shape */
    color: #ffffff;
    font-family: 'Tahoma', 'Segoe UI', sans-serif;
    font-size: 15px;
    font-weight: 700;
    font-style: italic;
    cursor: pointer;
    /* glossy highlight + soft drop so it reads as a glass orb */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75),
                inset 0 -6px 10px rgba(0, 60, 0, 0.35),
                2px 0 4px rgba(0, 30, 0, 0.35);
    text-shadow: 0 1px 2px rgba(0, 50, 0, 0.65);
}
.wxp-start-btn:hover {
    background: linear-gradient(180deg, #74cf74 0%, #49c47f 40%, #34b034 100%);
}
.wxp-start-btn:active {
    box-shadow: inset 0 2px 6px rgba(0, 50, 0, 0.5);
}
.wxp-start-icon { font-size: 15px; font-style: normal; }
.wxp-start-text { color: #ffffff; }

/* ── Active-window slot ───────────────────────────────────────────────────── */
.wxp-active-window {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 22px;
    min-width: 150px;
    max-width: 260px;
    padding: 0 10px;
    background: linear-gradient(180deg, #3471d8 0%, #1f55c4 100%);
    border: 1px solid #103a9e;
    border-radius: 3px;
    color: #ffffff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 2px rgba(0, 20, 70, 0.4);
    text-shadow: 0 1px 1px rgba(0, 18, 60, 0.5);
    overflow: hidden;
    white-space: nowrap;
}
.wxp-window-icon { font-size: 13px; flex-shrink: 0; }
.wxp-window-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Spacer ───────────────────────────────────────────────────────────────── */
.wxp-taskbar-spacer { flex: 1; }

/* ── System tray ──────────────────────────────────────────────────────────── */
.wxp-system-tray {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 22px;
    padding: 0 10px;
    /* recessed blue notification-area look */
    background: linear-gradient(180deg, #1c54c2 0%, #1349b3 100%);
    border: 1px solid #0e3a9c;
    border-radius: 3px;
    color: #ffffff;
    box-shadow: inset 1px 1px 2px rgba(0, 18, 60, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    text-shadow: 0 1px 1px rgba(0, 18, 60, 0.5);
}
.wxp-tray-icon { font-size: 14px; }
.wxp-tray-clickable { cursor: pointer; }
.wxp-tray-time {
    font-family: 'Tahoma', 'Segoe UI', sans-serif;
    font-size: 11px;
    color: #ffffff;        /* white on Luna blue ≈ 8.5:1 contrast */
}

/* ── Theme menu (pops up from the tray) ───────────────────────────────────── */
.wxp-theme-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9001;
}
.wxp-theme-menu {
    position: absolute;
    bottom: 30px;
    right: 0;
    min-width: 150px;
    background: #ffffff;
    border: 1px solid #0831d9;
    border-radius: 0 0 6px 6px;
    box-shadow: 3px 4px 10px rgba(0, 24, 80, 0.4);
    padding: 3px 0;
    z-index: 9002;
}
.wxp-theme-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 5px 16px;
    background: transparent;
    border: none;
    font-family: 'Tahoma', 'Segoe UI', sans-serif;
    font-size: 12px;
    color: #002c74;
    cursor: pointer;
    text-align: left;
}
.wxp-theme-item:hover {
    background: #316ac5;     /* Luna selection blue */
    color: #ffffff;
}
.wxp-theme-item.active { font-weight: 700; }

/* ── Start menu ───────────────────────────────────────────────────────────── */
.wxp-start-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9001;
}
.wxp-start-menu {
    position: fixed;
    bottom: 30px;
    left: 0;
    width: 220px;
    background: #ffffff;
    border: 1px solid #0831d9;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    box-shadow: 3px 0 12px rgba(0, 24, 80, 0.4);
    overflow: hidden;
    z-index: 9003;
    font-family: 'Tahoma', 'Segoe UI', sans-serif;
}
/* Blue Luna header band */
.wxp-start-menu-header {
    background: var(--xp-title-grad);
    color: #ffffff;
    padding: 8px 12px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 1px 3px rgba(0, 20, 70, 0.4);
}
.wxp-start-menu-header-text {
    font-size: 14px;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 18, 60, 0.6);
}
.wxp-start-menu-content {
    padding: 4px 0;
    background: linear-gradient(180deg, #ffffff 0%, #f4f6fb 100%);
}
.wxp-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 14px;
    background: transparent;
    border: none;
    color: #002c74;
    text-decoration: none;
    font-family: 'Tahoma', 'Segoe UI', sans-serif;
    font-size: 12px;
    cursor: pointer;
    text-align: left;
}
.wxp-menu-item:hover {
    background: #316ac5;     /* Luna selection blue, white text */
    color: #ffffff;
}
.wxp-menu-icon {
    font-size: 16px;
    width: 20px;
    text-align: center;
}