/* =================================================================
   home.css — Home view chrome.
   Welcome hero, drop-overlay, stats grid, home sections; also the
   legacy .hero/.cd-* and .track-item/.trending-section demo styles
   (kept verbatim even if not currently instantiated in index.html —
   removing them would be a behavior change).
   ================================================================= */

.hero {
    padding: 30px;
    margin: 20px;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    border-radius: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    overflow: hidden;
}

/* =================================================================
   Home global-search results — shown when the user types in the
   search bar while on Home. One horizontal row per category; cards
   inside wrap to fill the full width of the main column.
   ================================================================= */

.home-search-results {
    padding: 10px 24px 40px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.home-search-empty {
    padding: 40px 24px;
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
}

.home-search-row .hsr-label {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 10px;
}

.home-search-row .hsr-label h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.02em;
    margin: 0;
}

.home-search-row .hsr-count {
    font-size: 11px;
    color: var(--text-muted);
    background: var(--bg-card);
    padding: 2px 8px;
    border-radius: 999px;
}

.home-search-row .hsr-items {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.hsc {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--bg-card);
    border: 1px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.12s;
    flex: 1 1 calc(33.333% - 10px);
    min-width: 260px;
}

.hsc:hover {
    background: var(--bg-card-hover);
    border-color: var(--accent-primary);
    transform: translateY(-1px);
}

.hsc-cover,
.hsc-avatar {
    width: 54px;
    height: 54px;
    border-radius: 10px;
    flex: 0 0 auto;
    background-color: var(--bg-sidebar);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-on-accent);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.02em;
}

.hsc-body {
    min-width: 0;
    flex: 1 1 auto;
}

.hsc-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hsc-sub {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(var(--accent-purple-rgb), 0.2), transparent);
    pointer-events: none;
}

.hero-content {
    z-index: 1;
}

.hero-content h1 {
    font-size: 42px;
    margin-bottom: 10px;
    background: linear-gradient(90deg, var(--text-primary), var(--text-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-content p {
    color: var(--text-secondary);
    font-size: 18px;
    margin-bottom: 25px;
}

.play-btn {
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--accent-primary) 100%, white 18%),
        var(--accent-primary));
    border: none;
    padding: 15px 35px;
    border-radius: 30px;
    color: white;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.play-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(var(--accent-primary-rgb), 0.3);
}

.hero-cd {
    position: relative;
    z-index: 1;
}

.cd-case {
    position: relative;
    width: 180px;
    height: 180px;
}

.cd-cover {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    /* Decorative spinning CD on the welcome card. Built from the user's
       accent so it matches the rest of the chrome instead of staying
       hardcoded orange/yellow/purple. */
    background: var(--accent-gradient);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    animation: spin 8s linear infinite;
}

.cd-cover::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: var(--bg-dark);
    border-radius: 50%;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
}

.cd-cover::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 15px;
    height: 15px;
    background: var(--accent-primary);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--accent-primary);
}

.cd-spine {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translateX(60px);
    width: 40px;
    height: 180px;
    background: linear-gradient(90deg, #333, #222);
    border-radius: 0 5px 5px 0;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.featured-section {
    padding: 20px 30px;
}

.featured-section h2 {
    font-size: 24px;
    margin-bottom: 20px;
}

.trending-section {
    padding: 20px 30px;
}

.trending-section h2 {
    font-size: 24px;
    margin-bottom: 20px;
}

.tracks-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.track-item {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    background: var(--bg-card);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.track-item:hover {
    background: var(--bg-card-hover);
}

.track-number {
    width: 30px;
    color: var(--text-secondary);
    font-size: 14px;
}

.track-cover {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    margin-right: 15px;
}

.sand-dunes {
    background: linear-gradient(135deg, #e67e22, #f39c12);
}

.ocean-deep {
    background: linear-gradient(135deg, #3498db, #00f5d4);
}

.neon-pink {
    background: linear-gradient(135deg, #ff006e, #ff69b4);
}

.forest-mist {
    background: linear-gradient(135deg, #27ae60, #2ecc71);
}

.crimson-sky {
    background: linear-gradient(135deg, #e74c3c, #ff7675);
}

.track-details {
    flex: 1;
}

.track-details h4 {
    font-size: 14px;
    margin-bottom: 3px;
}

.track-details p {
    font-size: 12px;
    color: var(--text-secondary);
}

.track-duration {
    color: var(--text-secondary);
    font-size: 13px;
    margin-right: 15px;
}

.track-play {
    width: 35px;
    height: 35px;
    background: var(--accent-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
}

.track-item:hover .track-play {
    opacity: 1;
}

.home-hero {
    /* Hero tint follows the user's accent (Settings → Appearance →
       Accent colour). Layered as: dark base → soft accent wash, so the
       hue tracks the chosen accent at low saturation without nuking
       contrast against the welcome text. Updated via the same
       --accent-primary-rgb token applyAccentColor() rewrites. */
    background:
        linear-gradient(135deg,
            rgba(var(--accent-primary-rgb), 0.28) 0%,
            rgba(var(--accent-primary-rgb), 0.14) 50%,
            rgba(var(--accent-primary-rgb), 0.06) 100%),
        var(--surface-app);
    border-radius: 20px;
    padding: 50px;
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
    /* Give the coverflow strip a fixed height to live in. The welcome
       text floats on top via z-index, so this just controls the visual
       envelope of the hero. */
    min-height: 260px;
}

/* Old purple radial-glow on the top-right corner removed — the hero
   already gets its tint from the accent-driven linear-gradient on the
   element itself, and overlaying a hardcoded purple radial produced a
   visible "dark purple → light purple" band where the gradient stops
   met the surrounding accent fill, especially on non-purple themes. */

/* ---- Animated cover-art strip ---------------------------------------
   Sits behind the welcome text, scrolls slowly left → right (in CSS
   we translate the track LEFT, which appears to push covers to the
   left, so new ones enter from the right). The track holds the album
   list TWICE so a clean -50% wrap looks seamless.
   ---------------------------------------------------------------------- */
.home-hero-coverflow {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    /* The wrapper itself shouldn't catch clicks — only the covers do.
       Letting clicks pass through means dragging from this area still
       triggers the surrounding drop-zone's drag-and-drop handlers. */
    pointer-events: none;
    /* Soft fade on both edges so covers materialise / dissolve at the
       hero's borders instead of hard-clipping. The :after layer holds
       a gradient that obscures the leftmost ~45% so the welcome text
       reads cleanly over the covers — wider on small windows so the
       title never collides with album art. */
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.home-hero-coverflow[hidden] { display: none; }

.home-hero-coverflow-track {
    display: flex;
    align-items: center;
    height: 100%;
    width: max-content;
    gap: 16px;
    padding: 0 30px;
    /* Slow drift — one full cycle every ~8 minutes. Linear keeps the
       speed even; easing would feel weird on an infinite loop. Hover
       pauses (rule below) so picking out a specific cover stays easy. */
    animation: home-coverflow-pan 480s linear infinite;
}
.home-hero-coverflow:hover .home-hero-coverflow-track {
    /* Pausing on hover makes individual covers easier to click without
       the strip dragging the target out from under the cursor. */
    animation-play-state: paused;
}

.home-hero-cover {
    flex: 0 0 auto;
    width: 170px;
    height: 170px;
    border-radius: 10px;
    background-size: cover;
    background-position: center;
    background-color: var(--surface-card);
    cursor: pointer;
    pointer-events: auto;
    opacity: 0.55;
    transition: transform 0.18s ease, opacity 0.18s ease, box-shadow 0.18s ease;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
.home-hero-cover:hover {
    transform: scale(1.06);
    opacity: 1;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
}

/* Hold the drift while the boot splash is up: nothing is visible yet, and a
   running animation makes the browser produce frames (and re-evaluate every
   IntersectionObserver target) continuously while the startup work --
   library render + cover preloading -- needs the main thread. */
body.booting .home-hero-coverflow-track {
    animation-play-state: paused;
}

@keyframes home-coverflow-pan {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

html.platform-linux .home-hero-coverflow {
    -webkit-mask-image: none;
    mask-image: none;
}
html.platform-linux .home-hero-coverflow-track {
    will-change: transform;
}
html.platform-linux .home-hero-cover {
    box-shadow: none;
    transition: none;
}
html.platform-linux .home-hero-cover:hover {
    transform: none;
    box-shadow: none;
}

/* Left-side scrim so the welcome text is readable over the covers.
   Stops at ~55% width so the right portion stays a clean strip.
   Rebased on --surface-app-rgb so theme switches carry through. */
.home-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        rgba(var(--surface-app-rgb), 0.92) 0%,
        rgba(var(--surface-app-rgb), 0.65) 25%,
        rgba(var(--surface-app-rgb), 0.0)  55%);
    z-index: 1;
    pointer-events: none;
    border-radius: inherit;
}

/* Welcome text floats above both the coverflow strip (z:0) and the
   left-side scrim (z:1). Position-relative gives it a stacking context
   so the z-index actually applies.
   `pointer-events: none` lets clicks pass through the text down to the
   cover cells underneath — without this, the entire left half of the
   hero became a click-shield and only the rightmost ~3 covers were
   reachable. The covers themselves are explicitly `pointer-events: auto`
   so they still capture the click. */
.home-hero-content {
    position: relative;
    z-index: 2;
    max-width: 60%;
    pointer-events: none;
}

.home-hero-content h1 {
    font-size: 48px;
    margin-bottom: 10px;
}

.home-hero-content p {
    color: var(--text-secondary);
    font-size: 18px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    margin-bottom: 40px;
}

.stat-card {
    background: var(--bg-card);
    border-radius: 15px;
    padding: 25px 20px;
    text-align: center;
    transition: all 0.3s;
}

.stat-card:hover {
    background: var(--bg-card-hover);
    transform: translateY(-3px);
}

.stat-icon {
    font-size: 28px;
    margin-bottom: 10px;
}

.stat-value {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 5px;
    /* White-to-accent text gradient. Previously fixed at white→yellow
       (--accent-secondary), which clashed once the user picked a non-
       orange accent. Now follows --accent-primary so the value reads as
       part of the same accent family as the icon above it. */
    background: linear-gradient(90deg, var(--text-primary), var(--accent-primary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-label {
    color: var(--text-secondary);
    font-size: 13px;
}

.home-section {
    margin-bottom: 40px;
}

.home-section h2 {
    font-size: 22px;
    margin-bottom: 20px;
}

.drop-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(var(--surface-app-rgb), 0.9);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 100;
    border-radius: 20px;
}

.drop-overlay.drag-over {
    display: flex;
}

.drop-content {
    text-align: center;
}

.drop-icon {
    font-size: 64px;
    display: block;
    margin-bottom: 20px;
}

.drop-hint {
    font-size: 14px;
    color: var(--text-muted);
    margin-top: 10px;
}

.home-hero {
    position: relative;
}

/* =====================================================================
   Currently-playing hero card on Home. Sits BELOW the stats grid,
   coexists with the welcome hero. Includes waveform, volume, and the
   full transport set (shuffle / prev / play / next / repeat).
   ===================================================================== */
/* Active row: now-playing on the left, Surprise Me card on the right.
   Both cells are 1fr so they stretch to the same width (~3.5 stat
   tiles each at typical widths). align-items: stretch makes them the
   same height, which gives the cover image plenty of vertical room. */
.home-active-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 30px;
    align-items: stretch;
}
.home-active-row[hidden] { display: none; }
@media (max-width: 1100px) {
    .home-active-row { grid-template-columns: 1fr; }
}

.home-now-playing {
    display: grid;
    grid-template-columns: minmax(220px, auto) 1fr;
    gap: 22px;
    align-items: stretch;
    padding: 22px;
    border-radius: 20px;
    background:
        linear-gradient(135deg,
            rgba(var(--accent-primary-rgb), 0.28) 0%,
            rgba(var(--accent-primary-rgb), 0.10) 60%,
            rgba(var(--accent-primary-rgb), 0.04) 100%),
        var(--surface-card);
    border: 1px solid rgba(var(--accent-primary-rgb), 0.18);
    /* min-height drives the Y axis. Cover uses aspect-ratio:1 + height:100%
       so it expands to match. ~360 lands a generous 320×320 cover. */
    min-height: 360px;
}
.home-now-playing[hidden] { display: none; }

/* Cover fills the card height — square aspect-ratio means it sizes off
   the height the rest of the card produces. The grid track auto-sizes
   to match the cover's resulting width. */
.hnp-cover {
    aspect-ratio: 1 / 1;
    height: 100%;
    width: auto;
    border-radius: 14px;
    background-color: var(--surface-app);
    background-size: cover;
    background-position: center;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.hnp-cover:hover {
    transform: scale(1.015);
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.6);
}
.hnp-cover.hnp-cover-empty {
    background-image: linear-gradient(135deg,
        rgba(var(--accent-primary-rgb), 0.4),
        rgba(var(--accent-primary-rgb), 0.1));
}

.hnp-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.hnp-info-top {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 0 0 auto;
}
.hnp-eyebrow {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--accent-primary);
    text-transform: uppercase;
    margin-bottom: 2px;
}
.hnp-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.18;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hnp-artist {
    font-size: 15px;
    color: var(--text-primary);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hnp-album {
    font-size: 12.5px;
    color: var(--text-muted);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Waveform: dual-canvas pattern lifted from the queue's now-playing
   hero. Grey canvas always visible; accent canvas overlaid + clipped
   via clip-path so only the played portion shows. --hnp-progress is
   updated by the timeupdate handler. */
.hnp-progress-track {
    position: relative;
    width: 100%;
    height: 64px;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    --hnp-progress: 0%;
    background: transparent;
    margin-top: auto;
}
.hnp-wave {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
}
.hnp-wave-grey   { opacity: 0.45; }
.hnp-wave-accent {
    clip-path: inset(0 calc(100% - var(--hnp-progress, 0%)) 0 0);
    transition: clip-path 0.1s linear;
}

.hnp-progress-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
    margin-top: -2px;
}

.hnp-controls {
    display: flex;
    align-items: center;
    /* Centre the transport buttons under the waveform. The volume
       slider is positioned absolutely on the right edge so the centre
       group stays balanced on its own. */
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    position: relative;
}
.hnp-volume {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 0;
}
.hnp-ctrl {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(var(--accent-primary-rgb), 0.10);
    color: var(--text-primary);
    border: 1px solid rgba(var(--accent-primary-rgb), 0.26);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, transform 0.1s, color 0.15s, border-color 0.15s;
    flex-shrink: 0;
    padding: 0;
}
.hnp-ctrl:hover {
    background: rgba(var(--accent-primary-rgb), 0.22);
    color: var(--accent-primary);
    transform: translateY(-1px);
}
.hnp-ctrl-primary {
    width: 46px;
    height: 46px;
    background: var(--accent-primary);
    color: var(--text-on-accent);
    border-color: var(--accent-primary);
}
.hnp-ctrl-primary:hover {
    background: var(--accent-primary);
    color: var(--text-on-accent);
    filter: brightness(1.10);
}
/* Active state for shuffle / repeat toggles — same paint as the player-bar
   buttons get when on. */
.hnp-ctrl-on {
    color: var(--accent-primary);
    background: rgba(var(--accent-primary-rgb), 0.22);
    border-color: rgba(var(--accent-primary-rgb), 0.55);
}

.hnp-volume {
    /* Layout (position: absolute right:0) is set above next to .hnp-controls
       so the transport group stays centred. This rule just keeps the
       icon + slider stacking. */
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-left: 8px;
}
.hnp-volume-icon {
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
}
.hnp-volume-slider {
    -webkit-appearance: none;
            appearance: none;
    width: 110px;
    height: 4px;
    border-radius: 2px;
    background: rgba(var(--accent-primary-rgb), 0.18);
    outline: none;
    cursor: pointer;
}
.hnp-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
            appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--accent-primary);
    border: none;
    cursor: pointer;
    transition: transform 0.1s;
}
.hnp-volume-slider::-webkit-slider-thumb:hover {
    transform: scale(1.18);
}

/* Surprise Me sibling card — header on top, 2x2 grid of inline picks
   below. Same min-height as the now-playing card so the two read as a
   matched pair. */
.home-surprise-card {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 22px;
    border-radius: 20px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent-primary) 100%, white 14%) 0%,
        var(--accent-primary) 100%);
    color: var(--text-on-accent);
    border: none;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
    min-height: 360px;
    overflow: hidden;
    position: relative;
}
.home-surprise-card::after {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 240px;
    height: 240px;
    background-image: radial-gradient(
        circle at center,
        rgba(255, 255, 255, 0.16),
        rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
}

.hsc-head {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 0 0 auto;
}
.hsc-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.18);
    color: var(--text-on-accent);
    flex-shrink: 0;
}
.hsc-text { min-width: 0; }
.hsc-title {
    margin: 0 0 2px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--text-on-accent);
}
.hsc-sub {
    margin: 0;
    font-size: 13px;
    opacity: 0.85;
}

/* 2x2 grid of inline picks. Stacks to a single column when the row
   collapses on narrow screens (the active-row already does that). */
.hsc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    flex: 1 1 auto;
    align-content: stretch;
}
.hsc-pick {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    color: var(--text-on-accent);
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: background 0.12s, border-color 0.12s, transform 0.1s;
    backdrop-filter: blur(2px);
}
.hsc-pick:hover {
    background: rgba(255, 255, 255, 0.20);
    border-color: rgba(255, 255, 255, 0.45);
    transform: translateY(-1px);
}
.hsc-pick [data-icon]:first-child {
    color: var(--text-on-accent);
    margin-bottom: 2px;
    display: inline-flex;
    align-items: center;
}
.hsc-pick strong {
    font-size: 15px;
    font-weight: 700;
}
.hsc-pick-sub {
    font-size: 11.5px;
    opacity: 0.78;
}

/* When the active-row stacks, the grid stretches across the full width;
   keep the picks readable. */
@media (max-width: 1100px) {
    .hsc-grid { grid-template-columns: 1fr 1fr; }
}

/* =====================================================================
   Surprise Me — full-width horizontal banner.
   ===================================================================== */
.home-surprise-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 18px 24px;
    margin-bottom: 30px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent-primary) 100%, white 14%) 0%,
        var(--accent-primary) 100%);
    color: var(--text-on-accent);
    border: none;
    border-radius: 14px;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: transform 0.12s, filter 0.12s, box-shadow 0.18s;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.30);
}
.home-surprise-bar:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.40);
}
.home-surprise-bar-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.home-surprise-bar-title {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}
.home-surprise-bar-sub {
    font-size: 12.5px;
    opacity: 0.85;
    flex: 1;
    min-width: 0;
}
.home-surprise-bar-chev {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    opacity: 0.85;
}

/* =====================================================================
   Surprise modal — reuses the .settings-modal backdrop pattern.
   ===================================================================== */
.surprise-content { width: min(540px, 92vw); }
.surprise-body { padding: 22px 26px; }
.surprise-sub  { color: var(--text-secondary); margin: 0 0 16px 0; }
.surprise-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.surprise-pick {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 16px 18px;
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    color: var(--text-primary);
    cursor: pointer;
    text-align: left;
    transition: background 0.12s, border-color 0.12s, transform 0.12s;
    font-family: inherit;
}
.surprise-pick:hover {
    background: var(--surface-card-hover);
    border-color: var(--accent-primary);
    transform: translateY(-1px);
}
.surprise-pick strong {
    font-size: 15px;
    color: var(--text-primary);
}
.surprise-pick span:last-child {
    font-size: 12px;
    color: var(--text-muted);
}
.surprise-pick [data-icon] {
    color: var(--accent-primary);
}