/**
 * Consolidated Component Styles
 * Modern UI components for OK Rock Band Website
 *
 * Combines:
 * - Button Components (buttons.css)
 * - Card Components (cards.css)
 * - Form Components (forms.css)
 * - State Components (states.css)
 *
 * @version 1.0.0
 * @date November 17, 2025
 */

/* ============================================================
   SITE HEADER - Auto-hide on scroll
   ============================================================ */

.site-header {
    transition: transform 0.3s ease;
}

.site-header.header-hidden {
    transform: translateY(-100%);
}

/* ============================================================
   DESKTOP NAV - Visible link bar for >=1024px screens
   ============================================================ */

.desktop-nav {
    display: none;
    align-items: center;
    gap: 1.5rem;
}

.desktop-nav__link {
    font-size: 0.9rem;
    font-weight: 500;
    color: oklch(70% 0.01 260);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    position: relative;
    transition: color 0.2s ease;

    &::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 0;
        height: 1px;
        background: var(--accent-red, #dc2626);
        transition: width 0.2s ease;
    }

    &:hover {
        color: oklch(85% 0.01 260);

        &::after {
            width: 100%;
        }
    }

    &.active,
    &[aria-current="page"] {
        color: var(--accent-red, #dc2626);

        &::after {
            width: 100%;
        }
    }

    &:focus-visible {
        outline: 2px solid var(--accent-red, #dc2626);
        outline-offset: 4px;
        border-radius: 2px;
    }
}

@media (min-width: 1024px) {
    .desktop-nav {
        display: flex;
    }

    /* Hide hamburger menu and its links when desktop nav is visible */
    .nav-menu {
        display: none;
    }

    .nav-toggle {
        display: none;
    }
}

/* ============================================================
   SVG ICON SPRITES
   ============================================================ */

.icon {
    width: 1em;
    height: 1em;
    fill: currentColor;
    vertical-align: -0.125em;
    display: inline-block;
    flex-shrink: 0;
}

.icon-lg { width: 1.33em; height: 1.33em; }
.icon-2x { width: 2em; height: 2em; }
.icon-3x { width: 3em; height: 3em; }

/* ============================================================
   BUTTON COMPONENTS
   ============================================================ */

/* ========================================
   BASE BUTTON STYLES
   ======================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    border: 2px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;

    /* Prevent text selection */
    user-select: none;
    -webkit-user-select: none;

    /* Touch optimization */
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;

    &:disabled {
        opacity: 0.5;
        cursor: not-allowed;
        pointer-events: none;
    }

    &:focus-visible {
        outline: 3px solid var(--accent-red);
        outline-offset: 3px;
    }

    /* Ripple effect */
    &::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
        transform: scale(0);
        opacity: 0;
        pointer-events: none;
    }

    &:active::after {
        transform: scale(1);
        opacity: 1;
        transition: transform 0.3s, opacity 0.5s;
    }
}

/* ========================================
   BUTTON VARIANTS
   ======================================== */

/* Primary Button */
.btn-primary {
    background: var(--gradient-primary);
    color: white;
    border-color: transparent;

    &:hover {
        transform: translateY(-1px);
        filter: brightness(1.1);
    }

    &:active {
        transform: translateY(0);
    }
}

/* Secondary Button */
.btn-secondary {
    background: transparent;
    color: var(--text-primary);
    border-color: rgba(220, 38, 38, 0.4);
    position: relative;
    z-index: 1;

    &::before {
        content: '';
        position: absolute;
        inset: 0;
        background: var(--gradient-primary);
        border-radius: inherit;
        opacity: 0;
        transition: opacity 0.3s ease;
        z-index: -1;
    }

    &:hover {
        color: white;
        border-color: var(--accent-red);
        transform: translateY(-1px);

        &::before {
            opacity: 1;
        }
    }

    &:active {
        transform: translateY(0);
    }
}

/* Outline Button */
.btn-outline {
    background: transparent;
    color: var(--accent-red);
    border-color: var(--accent-red);

    &:hover {
        background: var(--accent-red);
        color: white;
        transform: translateY(-1px);
    }

    &:active {
        transform: translateY(0);
    }
}

/* Ghost Button */
.btn-ghost {
    background: transparent;
    color: var(--text-secondary);
    border-color: transparent;

    &:hover {
        background: rgba(220, 38, 38, 0.1);
        color: var(--accent-red);
        border-color: rgba(220, 38, 38, 0.2);
    }
}

/* Icon Button */
.btn-icon {
    padding: var(--space-3);
    border-radius: 10px;
    aspect-ratio: 1 / 1;
    min-width: 44px;
    min-height: 44px;
}

.btn-icon svg,
.btn-icon span {
    font-size: 1.25rem;
}

/* ========================================
   BUTTON SIZES
   ======================================== */

.btn-sm {
    padding: var(--space-2) var(--space-4);
    font-size: 0.875rem;
    border-radius: 8px;
}

.btn-lg {
    padding: var(--space-4) var(--space-8);
    font-size: 1.125rem;
    border-radius: 12px;
}

.btn-xl {
    padding: var(--space-6) var(--space-12);
    font-size: 1.25rem;
    border-radius: 14px;
}

/* ========================================
   BUTTON STATES
   ======================================== */

.btn[aria-busy="true"] {
    position: relative;
    color: transparent;
    pointer-events: none;
}

.btn[aria-busy="true"]::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: button-spin 0.6s linear infinite;
}

@keyframes button-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ========================================
   BUTTON GROUPS
   ======================================== */

.btn-group {
    display: inline-flex;
    gap: var(--space-2);
    align-items: center;
}

.btn-group .btn {
    flex: 1;
}

.btn-group .btn:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.btn-group .btn:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-left: -1px;
}

/* ========================================
   SPECIAL BUTTONS
   ======================================== */

/* Play button */
.btn-play {
    position: relative;
    background: var(--gradient-primary);
    color: white;
    border-radius: 50%;
    padding: 0;
    width: 60px;
    height: 60px;
    box-shadow:
        0 8px 16px -4px rgba(220, 38, 38, 0.4),
        0 0 0 0 rgba(220, 38, 38, 0.4);
    animation: pulse 2s infinite;

    &:hover {
        animation: none;
        transform: scale(1.1);
        box-shadow:
            0 12px 20px -6px rgba(220, 38, 38, 0.5),
            0 0 30px rgba(220, 38, 38, 0.3);
    }

    &::before {
        content: '▶';
        font-size: 1.5rem;
        margin-left: 4px;
    }
}

@keyframes pulse {
    0% {
        box-shadow:
            0 8px 16px -4px rgba(220, 38, 38, 0.4),
            0 0 0 0 rgba(220, 38, 38, 0.4);
    }

    50% {
        box-shadow:
            0 8px 16px -4px rgba(220, 38, 38, 0.4),
            0 0 0 15px rgba(220, 38, 38, 0);
    }

    100% {
        box-shadow:
            0 8px 16px -4px rgba(220, 38, 38, 0.4),
            0 0 0 0 rgba(220, 38, 38, 0);
    }
}

/* Social buttons */
.btn-social {
    padding: var(--space-3);
    border-radius: 10px;
    min-width: 44px;
    min-height: 44px;
}

.btn-social-vk {
    background: #4680C2;
    color: white;
}

.btn-social-telegram {
    background: #0088cc;
    color: white;
}

.btn-social:hover {
    transform: translateY(-1px);
}

/* ============================================================
   CARD COMPONENTS
   ============================================================ */

/* ========================================
   BASE CARD STYLES
   ======================================== */

.card {
    position: relative;
    background: var(--bg-secondary);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    overflow: hidden;
    transition: transform 0.3s ease, opacity 0.3s ease;
    cursor: pointer;

    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--gradient-primary);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.3s ease;
    }

    &:hover {
        transform: translateY(-2px);
        border-color: rgba(255, 255, 255, 0.1);

        &::before {
            transform: scaleX(1);
        }
    }

    &:focus-visible {
        outline: 3px solid var(--accent-red);
        outline-offset: 4px;
    }
}

/* ========================================
   NEWS CARD
   ======================================== */

.news-card {
    position: relative;
    background: rgba(15, 15, 15, 0.8);
    border-radius: 16px;
    padding: var(--space-6);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: transform 0.3s ease, opacity 0.3s ease;
    cursor: pointer;
    overflow: hidden;

    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
        background: var(--gradient-primary);
        transform: scaleY(0);
        transform-origin: top;
        transition: transform 0.3s ease;
    }

    &:hover {
        transform: translateY(-2px);
        border-color: rgba(255, 255, 255, 0.1);

        &::before {
            transform: scaleY(1);
        }

        & .news-title {
            color: var(--accent-red);
            background: var(--gradient-primary);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
    }

    &:focus-visible {
        outline: 3px solid var(--accent-red);
        outline-offset: 4px;
    }
}

.news-meta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
}

.news-meta time {
    font-size: 0.875rem;
    color: var(--text-muted);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.news-meta time::before {
    content: '📅';
    font-size: 1rem;
}

.news-category {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    background: rgba(220, 38, 38, 0.15);
    color: var(--accent-red);
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid rgba(220, 38, 38, 0.3);
}

.news-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 var(--space-3) 0;
    line-height: 1.4;
    transition: color 0.2s ease;
}

.news-excerpt {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ========================================
   ALBUM CARD
   ======================================== */

.album-card {
    position: relative;
    background: var(--bg-secondary);
    border-radius: 16px;
    overflow: hidden;
    transition: transform 0.3s ease, opacity 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.05);

    &::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 16px;
        pointer-events: none;
    }

    &:hover {
        transform: translateY(-2px);
        border-color: rgba(255, 255, 255, 0.1);

        & .album-cover img {
            transform: scale(1.05);
        }

        & .album-info h3 {
            background: var(--gradient-primary);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        & .album-overlay {
            opacity: 1;
        }

        & .album-actions {
            transform: translateY(0);
        }
    }
}

.album-cover {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%);
}

.album-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.album-info {
    padding: var(--space-6);
    cursor: pointer;
}

.album-info h3 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 var(--space-2) 0;
    transition: color 0.2s ease;
}

.album-year {
    font-size: 0.875rem;
    color: var(--text-muted);
    font-weight: 500;
}

.album-tracks {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin-top: var(--space-1);
}


/* Album Overlay & Actions */
.album-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(2px);
    z-index: 2;
    /* above image */
}

.album-actions {
    display: flex;
    gap: var(--space-3);
    transform: translateY(10px);
    transition: transform 0.3s ease;
}

.play-album-btn,
.add-album-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
    color: white;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(4px);
}

.play-album-btn:hover,
.add-album-btn:hover {
    transform: scale(1.1);
    background: var(--accent-red);
}

.play-album-btn {
    background: var(--gradient-primary);
    box-shadow: 0 4px 10px rgba(220, 38, 38, 0.4);
}

/* ========================================
   CARD GRID LAYOUTS
   ======================================== */

.cards-grid {
    display: grid;
    gap: var(--space-8);
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

.cards-grid-2 {
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
}

.cards-grid-3 {
    display: grid;
    gap: var(--space-8, 2rem);
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* ========================================
   LOADING STATE
   ======================================== */

.card-skeleton {
    position: relative;
    background: var(--bg-secondary);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(220, 38, 38, 0.1);
}

.card-skeleton::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(220, 38, 38, 0.1) 50%,
            transparent 100%);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

/* ============================================================
   FORM COMPONENTS
   ============================================================ */

/* ========================================
   FORM STRUCTURE
   ======================================== */

.form-group {
    margin-bottom: var(--space-6);
    position: relative;
}

.form-group label {
    display: block;
    margin-bottom: var(--space-2);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    transition: color 0.2s ease;
}

.form-group label .required {
    color: var(--accent-red);
    margin-left: 2px;
}

.form-help-text {
    display: block;
    margin-top: var(--space-2);
    font-size: 0.875rem;
    color: var(--text-muted);
    line-height: 1.4;
}

/* ========================================
   TEXT INPUTS
   ======================================== */

.form-control {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font-size: 1rem;
    font-family: inherit;
    line-height: 1.5;
    color: var(--text-primary);
    background: rgba(26, 26, 26, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    transition: border-color 0.2s ease, background 0.2s ease;
    outline: none;

    &::placeholder {
        color: var(--text-muted);
        opacity: 0.6;
    }

    &:hover {
        border-color: rgba(220, 38, 38, 0.3);
        background: rgba(26, 26, 26, 0.8);
    }

    &:focus {
        border-color: var(--accent-red);
        background: var(--bg-secondary);
        box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.08);
    }

    &:disabled {
        opacity: 0.5;
        cursor: not-allowed;
        background: var(--bg-tertiary);
    }
}

/* Input sizes */
.form-control-sm {
    padding: var(--space-2) var(--space-3);
    font-size: 0.875rem;
    border-radius: 8px;
}

.form-control-lg {
    padding: var(--space-4) var(--space-6);
    font-size: 1.125rem;
    border-radius: 12px;
}

/* ========================================
   TEXTAREA
   ======================================== */

textarea.form-control {
    resize: vertical;
    min-height: 120px;
    line-height: 1.6;
}

textarea.form-control:focus {
    min-height: 150px;
}

/* ========================================
   SELECT
   ======================================== */

.form-select {
    appearance: none;
    width: 100%;
    padding: var(--space-3) var(--space-12) var(--space-3) var(--space-4);
    font-size: 1rem;
    font-family: inherit;
    color: var(--text-primary);
    background: rgba(26, 26, 26, 0.6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23dc2626' d='M6 9L1 4h10z'/%3E%3C/svg%3E") no-repeat right var(--space-4) center;
    background-size: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;

    &:hover {
        border-color: rgba(220, 38, 38, 0.3);
        background-color: rgba(26, 26, 26, 0.8);
    }

    &:focus {
        border-color: var(--accent-red);
        background-color: var(--bg-secondary);
        box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.08);
        outline: none;
    }
}

/* ========================================
   CHECKBOX & RADIO
   ======================================== */

.form-check {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    cursor: pointer;
    position: relative;
}

.form-check-input {
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(220, 38, 38, 0.3);
    border-radius: 4px;
    background: rgba(26, 26, 26, 0.6);
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    position: relative;

    &[type="radio"] {
        border-radius: 50%;
    }

    &:hover {
        border-color: var(--accent-red);
        background: rgba(26, 26, 26, 0.8);
    }

    &:focus {
        outline: 3px solid rgba(220, 38, 38, 0.2);
        outline-offset: 2px;
    }

    &:checked {
        background: var(--gradient-primary);
        border-color: var(--accent-red);

        &::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    }

    /* Checkbox checkmark */
    &[type="checkbox"]:checked::after {
        width: 5px;
        height: 10px;
        border: solid white;
        border-width: 0 2px 2px 0;
        transform: translate(-50%, -60%) rotate(45deg);
    }

    /* Radio dot */
    &[type="radio"]:checked::after {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: white;
    }
}

.form-check-label {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
}

.form-check:hover .form-check-label {
    color: var(--text-primary);
}

/* ========================================
   INPUT GROUPS
   ======================================== */

.input-group {
    display: flex;
    align-items: stretch;
    width: 100%;
}

.input-group .form-control {
    border-radius: 0;
}

.input-group .form-control:first-child {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.input-group .form-control:last-child {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.input-group-text {
    display: flex;
    align-items: center;
    padding: var(--space-3) var(--space-4);
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-secondary);
    background: rgba(220, 38, 38, 0.1);
    border: 2px solid rgba(220, 38, 38, 0.2);
    white-space: nowrap;
}

.input-group-text:first-child {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    border-right: none;
}

.input-group-text:last-child {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border-left: none;
}

/* ========================================
   VALIDATION STATES
   ======================================== */

/* Success */
.form-control.is-valid {
    border-color: #10b981;
    padding-right: 3rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2310b981'%3E%3Cpath fill-rule='evenodd' d='M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    background-size: 20px;
}

.form-control.is-valid:focus {
    border-color: #10b981;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.08);
}

.valid-feedback {
    display: none;
    margin-top: var(--space-2);
    font-size: 0.875rem;
    color: #10b981;
}

.form-control.is-valid~.valid-feedback {
    display: block;
}

/* Error */
.form-control.is-invalid {
    border-color: var(--accent-red);
    padding-right: 3rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23dc2626'%3E%3Cpath fill-rule='evenodd' d='M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    background-size: 20px;
    animation: shake 0.3s ease-in-out;
}

.form-control.is-invalid:focus {
    border-color: var(--accent-red);
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.1);
}

.invalid-feedback {
    display: none;
    margin-top: var(--space-2);
    font-size: 0.875rem;
    color: var(--accent-red);
    animation: slideDown 0.2s ease;
}

.form-control.is-invalid~.invalid-feedback {
    display: block;
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px);
    }

    75% {
        transform: translateX(5px);
    }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   FILE INPUT
   ======================================== */

.form-file {
    position: relative;
}

.form-file-input {
    opacity: 0;
    position: absolute;
    z-index: -1;
}

.form-file-label {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    font-size: 1rem;
    color: var(--text-primary);
    background: rgba(26, 26, 26, 0.6);
    border: 2px dashed rgba(220, 38, 38, 0.3);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.form-file-label::before {
    content: '📎';
    font-size: 1.5rem;
}

.form-file-label:hover {
    border-color: var(--accent-red);
    background: rgba(26, 26, 26, 0.8);
    border-style: solid;
}

.form-file-input:focus~.form-file-label {
    border-color: var(--accent-red);
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.08);
}

/* ========================================
   SEARCH INPUT
   ======================================== */

.search-input-wrapper {
    position: relative;
}

.search-input-wrapper::before {
    content: '';
    position: absolute;
    left: var(--space-4);
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.125rem;
    opacity: 0.6;
    pointer-events: none;
}

.search-input-wrapper .form-control {
    padding-left: 3rem;
}

/* ========================================
   FLOATING LABELS
   ======================================== */

.form-floating {
    position: relative;
}

.form-floating .form-control {
    padding: var(--space-6) var(--space-4) var(--space-2);
}

.form-floating label {
    position: absolute;
    top: var(--space-3);
    left: var(--space-4);
    padding: 0 var(--space-1);
    font-size: 1rem;
    color: var(--text-muted);
    pointer-events: none;
    transition: all 0.2s ease;
}

.form-floating .form-control:focus~label,
.form-floating .form-control:not(:placeholder-shown)~label {
    top: -8px;
    left: var(--space-3);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent-red);
    background: var(--bg-secondary);
}

/* ============================================================
   STATE COMPONENTS
   ============================================================ */

/* ========================================
   LOADING STATES
   ======================================== */

.loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-16) var(--space-8);
    min-height: 400px;
}

.loading-spinner {
    position: relative;
    width: 60px;
    height: 60px;
}

.loading-spinner::before,
.loading-spinner::after {
    content: '';
    position: absolute;
    border-radius: 50%;
}

.loading-spinner::before {
    inset: 0;
    border: 4px solid rgba(220, 38, 38, 0.1);
}

.loading-spinner::after {
    inset: 0;
    border: 4px solid transparent;
    border-top-color: var(--accent-red);
    border-right-color: var(--accent-red);
    animation: spin 0.8s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

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

.loading-text {
    margin-top: var(--space-6);
    font-size: 1.125rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.loading-dots::after {
    content: '';
    animation: dots 1.5s steps(4, end) infinite;
}

@keyframes dots {

    0%,
    20% {
        content: '';
    }

    40% {
        content: '.';
    }

    60% {
        content: '..';
    }

    80%,
    100% {
        content: '...';
    }
}

/* Modern skeleton loader */
.skeleton-loader {
    position: relative;
    background: var(--bg-secondary);
    border-radius: 8px;
    overflow: hidden;
}

.skeleton-loader::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(220, 38, 38, 0.08) 50%,
            transparent 100%);
    animation: shimmer 2s ease-in-out infinite;
}

.skeleton-text {
    height: 1em;
    margin-bottom: var(--space-2);
    border-radius: 4px;
}

.skeleton-text:last-child {
    width: 60%;
}

.skeleton-heading {
    height: 2em;
    margin-bottom: var(--space-4);
    border-radius: 6px;
}

.skeleton-image {
    aspect-ratio: 16 / 9;
    border-radius: 12px;
}

.skeleton-circle {
    aspect-ratio: 1 / 1;
    border-radius: 50%;
}

/* ========================================
   EMPTY STATES
   ======================================== */

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-16) var(--space-8);
    min-height: 400px;
}

.empty-state-icon {
    font-size: 5rem;
    margin-bottom: var(--space-6);
    opacity: 0.8;
    animation: float 3s ease-in-out infinite;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.empty-state-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 var(--space-3) 0;
}

.empty-state-description {
    font-size: 1.0625rem;
    color: var(--text-secondary);
    max-width: 500px;
    line-height: 1.6;
    margin: 0 0 var(--space-8) 0;
}

.empty-state-action {
    margin-top: var(--space-4);
}

/* Specific empty states */
.empty-state-no-content::before {
    content: '📭';
    display: block;
    font-size: 5rem;
    margin-bottom: var(--space-6);
    animation: float 3s ease-in-out infinite;
}

.empty-state-no-results::before {
    content: '';
    display: block;
    font-size: 5rem;
    margin-bottom: var(--space-6);
    animation: float 3s ease-in-out infinite;
}

.empty-state-no-favorites::before {
    content: '⭐';
    display: block;
    font-size: 5rem;
    margin-bottom: var(--space-6);
    animation: float 3s ease-in-out infinite;
}

.empty-state-no-music::before {
    content: '🎵';
    display: block;
    font-size: 5rem;
    margin-bottom: var(--space-6);
    animation: float 3s ease-in-out infinite;
}

/* ========================================
   ERROR STATES
   ======================================== */

.error-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-16) var(--space-8);
    min-height: 400px;
}

.error-state-icon {
    font-size: 5rem;
    margin-bottom: var(--space-6);
    animation: shake 0.5s ease-in-out;
}

.error-state-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--accent-red);
    margin: 0 0 var(--space-3) 0;
}

.error-state-description {
    font-size: 1.0625rem;
    color: var(--text-secondary);
    max-width: 500px;
    line-height: 1.6;
    margin: 0 0 var(--space-8) 0;
}

.error-state-details {
    background: rgba(220, 38, 38, 0.1);
    border: 1px solid rgba(220, 38, 38, 0.3);
    border-radius: 8px;
    padding: var(--space-4);
    margin-top: var(--space-4);
    max-width: 600px;
}

.error-state-details summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--accent-red);
    user-select: none;
}

.error-state-details pre {
    margin-top: var(--space-3);
    padding: var(--space-3);
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    overflow-x: auto;
    font-size: 0.875rem;
    color: var(--text-muted);
}

.error-state-actions {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-6);
    flex-wrap: wrap;
    justify-content: center;
}

/* ========================================
   SUCCESS STATES
   ======================================== */

.success-message {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-left: 4px solid #10b981;
    border-radius: 8px;
    color: #10b981;
    animation: slideIn 0.3s ease;
}

.success-message::before {
    content: '✓';
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: #10b981;
    color: white;
    border-radius: 50%;
    font-weight: 700;
    flex-shrink: 0;
}

@keyframes slideIn {
    from {
        transform: translateY(-10px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* ========================================
   PROGRESS INDICATORS
   ======================================== */

.progress-bar {
    width: 100%;
    height: 8px;
    background: rgba(220, 38, 38, 0.1);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.progress-bar-fill {
    height: 100%;
    background: var(--gradient-primary);
    border-radius: 4px;
    transition: width 0.3s ease;
    position: relative;
    overflow: hidden;
}

.progress-bar-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.3) 50%,
            transparent 100%);
    animation: progressShine 2s ease-in-out infinite;
}

@keyframes progressShine {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

.progress-text {
    margin-top: var(--space-2);
    font-size: 0.875rem;
    color: var(--text-secondary);
    text-align: center;
}

/* Indeterminate progress */
.progress-bar-indeterminate .progress-bar-fill {
    width: 40%;
    animation: indeterminate 1.5s ease-in-out infinite;
}

@keyframes indeterminate {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(350%);
    }
}

/* ========================================
   INLINE STATES
   ======================================== */

.inline-loading {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-secondary);
}

.inline-loading::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(220, 38, 38, 0.2);
    border-top-color: var(--accent-red);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

/* ============================================================
   MOBILE RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {

    /* Buttons */
    .btn {
        padding: var(--space-3) var(--space-4);
        font-size: 0.9375rem;
    }

    .btn-sm {
        padding: var(--space-2) var(--space-3);
        font-size: 0.8125rem;
    }

    .btn-lg {
        padding: var(--space-4) var(--space-6);
        font-size: 1rem;
    }

    .btn-group {
        flex-direction: column;
        width: 100%;
    }

    .btn-group .btn {
        width: 100%;
    }

    .btn-group .btn:not(:last-child) {
        border-radius: 10px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .btn-group .btn:not(:first-child) {
        border-radius: 10px;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        margin-left: 0;
        margin-top: -1px;
    }

    /* Cards */
    .cards-grid,
    .cards-grid-2,
    .cards-grid-3 {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }

    .card,
    .news-card,
    .album-card {
        border-radius: 12px;
    }

    .news-card {
        padding: var(--space-4);
    }

    .album-info {
        padding: var(--space-4);
    }

    .news-title {
        font-size: 1.125rem;
    }

    /* Forms */
    .form-control,
    .form-select {
        font-size: 16px;
        /* Prevents zoom on iOS */
    }

    .input-group {
        flex-direction: column;
    }

    .input-group .form-control,
    .input-group-text {
        border-radius: 10px !important;
    }

    .input-group .form-control:not(:last-child) {
        margin-bottom: var(--space-2);
    }

    /* States */
    .loading-container,
    .empty-state,
    .error-state {
        padding: var(--space-12) var(--space-4);
        min-height: 300px;
    }

    .empty-state-icon,
    .error-state-icon,
    .empty-state-no-content::before,
    .empty-state-no-results::before {
        font-size: 4rem;
    }

    .empty-state-title,
    .error-state-title {
        font-size: 1.5rem;
    }

    .empty-state-description,
    .error-state-description {
        font-size: 1rem;
    }

    .error-state-actions {
        flex-direction: column;
        width: 100%;
    }

    .error-state-actions .btn {
        width: 100%;
    }
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */

/* High contrast mode */
@media (prefers-contrast: high) {
    .btn {
        border-width: 3px;
    }

    .btn-primary {
        border-color: white;
    }

    .form-control,
    .form-select {
        border-width: 3px;
    }

    .form-check-input {
        border-width: 3px;
    }

    .empty-state,
    .error-state {
        border: 2px solid var(--text-primary);
        border-radius: 8px;
    }

    .success-message {
        border-width: 2px;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }

    .btn:hover,
    .btn:active,
    .card:hover,
    .news-card:hover,
    .album-card:hover {
        transform: none !important;
    }

    .btn-play {
        animation: none !important;
    }

    .form-control.is-invalid {
        animation: none !important;
    }

    .empty-state-no-content::before,
    .empty-state-no-results::before,
    .empty-state-no-favorites::before,
    .empty-state-no-music::before {
        animation: none !important;
    }
}

/* Dark mode optimization */
@media (prefers-color-scheme: dark) {
    .btn-secondary {
        border-color: rgba(220, 38, 38, 0.5);
    }

    .btn-ghost:hover {
        background: rgba(220, 38, 38, 0.15);
    }

    .card,
    .news-card,
    .album-card {
        border-color: rgba(255, 255, 255, 0.06);
    }
}

/* Timeline Component Styles */
.timeline-view {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    padding: clamp(2rem, 4vw, 4rem) var(--space-4, 1rem);
}

/* Central vertical line */
.timeline-view::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 4px;
    height: 100%;
    background: linear-gradient(to bottom,
            transparent,
            rgba(255, 107, 107, 0.5) 10%,
            rgba(255, 107, 107, 0.5) 90%,
            transparent);
    transform: translateX(-50%);
    border-radius: 2px;
}

/* Timeline Items */
.timeline-item,
.timeline-event {
    position: relative;
    width: 50%;
    padding: 20px 40px;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-end;
    /* Default for left side items */
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.timeline-item.visible,
.timeline-event.visible,
.timeline-event.animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* Alternating Sides */
.timeline-item:nth-child(even),
.timeline-event:nth-child(even) {
    left: 50%;
    justify-content: flex-start;
}

.timeline-item:nth-child(odd),
.timeline-event:nth-child(odd) {
    left: 0;
    justify-content: flex-end;
}

/* Markers on the line */
.timeline-marker {
    position: absolute;
    top: 40px;
    /* Align with top of content roughly */
    width: 20px;
    height: 20px;
    background: #0f0f23;
    border: 3px solid #ff6b6b;
    border-radius: 50%;
    z-index: 2;
    box-shadow: 0 0 10px rgba(255, 107, 107, 0.6);
    transition: transform 0.3s ease, background 0.3s ease;
}

.timeline-item:hover .timeline-marker,
.timeline-event:hover .timeline-marker {
    background: #ff6b6b;
    transform: scale(1.3);
    box-shadow: 0 0 20px rgba(255, 107, 107, 0.9);
}

/* Marker positioning */
.timeline-item:nth-child(odd) .timeline-marker,
.timeline-event:nth-child(odd) .timeline-marker {
    right: -12px;
    /* Half of line width (2px) + Half of marker width (10px) = 12px? No. line is center. left: 50%.
                   * Item width is 50%. So right edge of odd item IS the center line.
                   * We want marker centered on the line.
                   * right: -12px puts it 12px outside the 50% box. 
                   */
    right: -12px;
}

.timeline-item:nth-child(even) .timeline-marker,
.timeline-event:nth-child(even) .timeline-marker {
    left: -12px;
}

/* Content Container (The Card) */
.timeline-content {
    background: rgba(15, 15, 15, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: clamp(1.25rem, 2vw, 1.5rem);
    border-radius: 16px;
    width: 100%;
    max-width: 400px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.timeline-item:hover .timeline-content,
.timeline-event:hover .timeline-content {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    border-color: rgba(255, 107, 107, 0.4);
}

/* Year Headers - Special Items */
.timeline-year-marker {
    position: relative;
    width: 100%;
    text-align: center;
    margin: 40px 0;
    z-index: 3;
    left: 0 !important;
    /* Override nth-child positioning */
    display: flex;
    justify-content: center;
}

.timeline-year-pill {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
    color: white;
    padding: 8px 24px;
    border-radius: 30px;
    font-weight: 800;
    font-size: 1.2rem;
    box-shadow: 0 4px 15px rgba(238, 90, 36, 0.4);
    border: 2px solid rgba(255, 255, 255, 0.1);
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .timeline-view::before {
        left: 30px;
    }

    .timeline-item,
    .timeline-event {
        width: 100%;
        padding-left: 70px;
        /* Space for line */
        padding-right: 20px;
        left: 0 !important;
        justify-content: flex-start !important;
        margin-bottom: 20px;
    }

    .timeline-item:nth-child(odd) .timeline-marker,
    .timeline-item:nth-child(even) .timeline-marker,
    .timeline-event:nth-child(odd) .timeline-marker,
    .timeline-event:nth-child(even) .timeline-marker {
        left: 18px;
        /* Center on line (30px) -> 30 - 10(half size) - 2(border?) approx */
        right: auto;
    }

    .timeline-marker {
        width: 16px;
        height: 16px;
        left: 22px !important;
        /* 30px center line. 16px width -> 8px half. 30-8 = 22px */
    }

    .timeline-content {
        max-width: 100%;
    }
}

/* ============================================================
   PREMIUM MICRO-INTERACTIONS
   ============================================================ */

/* Magnetic hover tilt for cards */
.album-card,
.news-card,
.gallery-item,
.stat-card,
.card {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}

.album-card:hover,
.news-card:hover,
.gallery-item:hover,
.card:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.4);
}

/* Smooth button press with spring */
.btn {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                background 0.2s ease,
                box-shadow 0.3s ease;
}

.btn:active {
    transform: scale(0.97);
}

/* Link underline slide-in from left */
.footer-nav a,
.view-all,
.nav-link {
    position: relative;
    text-decoration: none;
}

.footer-nav a::after,
.view-all::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: currentColor;
    transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.footer-nav a:hover::after,
.view-all:hover::after {
    width: 100%;
}

/* Image reveal on load */
.album-cover img,
.gallery-item img {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}

.album-cover:hover img {
    transform: scale(1.05);
}

/* Skeleton shimmer improvement */
@keyframes shimmer-modern {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.skeleton-loader {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.03) 0%,
        rgba(255, 255, 255, 0.08) 50%,
        rgba(255, 255, 255, 0.03) 100%
    );
    background-size: 200% 100%;
    animation: shimmer-modern 1.8s ease-in-out infinite;
}

/* Focus ring with offset animation */
:focus-visible {
    outline: 2px solid var(--accent, #dc2626);
    outline-offset: 3px;
    transition: outline-offset 0.2s ease;
}

:focus-visible:active {
    outline-offset: 1px;
}

/* Stat number count animation */
.stat-number {
    font-variant-numeric: tabular-nums;
    transition: transform 0.3s ease;
}

.stat-card:hover .stat-number {
    transform: scale(1.05);
}

/* Content block fade boundary */
.content-block + .content-block {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 3rem;
    margin-top: 3rem;
}

@media (prefers-reduced-motion: reduce) {
    .album-card,
    .news-card,
    .gallery-item,
    .stat-card,
    .card,
    .btn,
    .album-cover img,
    .gallery-item img,
    .skeleton-loader {
        transition: none !important;
        animation: none !important;
    }
}

/* ================================================
   FOOTER - Moved from inline styles (footer.ejs)
   ================================================ */
.footer-modern {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: clamp(3rem, 5vw, 5rem) 1.5rem 2rem;
    background: #0a0a0d;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 3rem;
    max-width: 1200px;
    margin: 0 auto;
}

.footer-brand h3,
.footer-brand .footer-brand-name {
    font-family: var(--font-display, 'Bebas Neue', sans-serif);
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 0.5rem;
    text-wrap: balance;
}

.footer-brand p {
    font-size: 0.875rem;
    color: #a1a1aa;
    opacity: 1;
    line-height: 1.6;
}

.footer-nav {
    & h4 {
        font-family: var(--font-display, 'Bebas Neue', sans-serif);
        font-size: 0.9375rem;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: #a1a1aa;
        opacity: 1;
        margin: 0 0 1rem;
    }

    & ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    & li {
        margin-bottom: 0.5rem;
    }

    & a {
        font-size: 0.875rem;
        color: #9ca3af;
        opacity: 1;
        transition: color 0.2s;
        text-decoration: none;

        &:hover {
            color: #ffffff;
        }
    }
}

.footer-bottom {
    max-width: 1200px;
    margin: 3rem auto 0;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    color: #71717a;
    opacity: 1;
}

@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .footer-bottom {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }
}

/* ============================================================
   PWA INSTALL BUTTON
   ============================================================ */

.pwa-install-btn {
    position: fixed;
    bottom: 100px;
    right: 20px;
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    z-index: calc(var(--z-header, 1000) + 1);
    box-shadow: 0 4px 20px rgba(255, 107, 107, 0.3);
    transform: translateY(100px);
    opacity: 0;
    transition: all 0.3s ease;
    display: none;

    &.visible {
        display: block;
        transform: translateY(0);
        opacity: 1;
    }

    &.hiding {
        transform: translateY(100px);
        opacity: 0;
    }
}

/* ============================================================
   UPDATE NOTIFICATION
   ============================================================ */

.update-notification-container {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-secondary, #1a1a2e);
    border: 1px solid var(--border-color, rgba(255,255,255,0.1));
    border-radius: 12px;
    padding: 1rem 1.5rem;
    z-index: var(--z-notification, 10000);
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    animation: slide-up 0.3s ease-out;
}

.update-notification-title {
    color: var(--text-primary, #fff);
    margin-bottom: 0.5rem;
}

.update-notification-message {
    color: var(--text-light, #ccc);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.update-notification-actions {
    display: flex;
    gap: 0.5rem;
}

.update-notification-btn-primary {
    background: var(--accent-red, #ff6b6b);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
}

.update-notification-btn-secondary {
    background: transparent;
    color: var(--text-light, #ccc);
    border: 1px solid var(--border-color, rgba(255,255,255,0.1));
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
}

@keyframes slide-up {
    from { transform: translateX(-50%) translateY(20px); opacity: 0; }
    to { transform: translateX(-50%) translateY(0); opacity: 1; }
}

/* ============================================================
   LYRICS PANEL
   ============================================================ */

.lyrics-panel {
    position: fixed;
    right: -400px;
    top: 0;
    bottom: 80px;
    width: 400px;
    background: rgba(15, 15, 15, 0.95);
    backdrop-filter: blur(20px);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 999;
    overflow-y: auto;
    padding: 2rem;

    &.visible {
        right: 0;
    }
}

.lyrics-panel-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    color: var(--text-muted, rgba(255, 255, 255, 0.5));
    font-size: 1.5rem;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s ease, color 0.2s ease;

    &:hover {
        background: rgba(255, 255, 255, 0.1);
        color: var(--text-primary, #fff);
    }
}

.lyrics-panel-title {
    font-family: var(--font-display, 'Bebas Neue', sans-serif);
    font-size: 1.25rem;
    margin-bottom: 1rem;
    color: var(--text-primary, #fff);
    padding-right: 2rem;
}

.lyrics-text {
    white-space: pre-line;
    line-height: 1.8;
    color: var(--text-secondary, rgba(255, 255, 255, 0.7));
}

.lyrics-translation {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-muted, rgba(255, 255, 255, 0.5));
    font-style: italic;
    white-space: pre-line;
    line-height: 1.8;
}

@media (max-width: 768px) {
    .lyrics-panel {
        right: auto;
        left: 0;
        bottom: 80px;
        top: auto;
        width: 100%;
        height: 60vh;
        transform: translateY(100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .lyrics-panel.visible {
        transform: translateY(0);
    }
}

/* ============================================
   NATIVE DIALOG ELEMENTS
   ============================================ */

/* Reset browser defaults for dialog */
dialog {
    border: none;
    padding: 0;
    color: var(--text-primary, #fff);
}

/* Smooth entrance animation via @starting-style (Chrome 117+, Safari 17.5+) */
dialog[open] {
    opacity: 1;
    transform: scale(1) translateY(0);
    transition: opacity 0.3s ease, transform 0.3s ease,
                overlay 0.3s ease allow-discrete,
                display 0.3s ease allow-discrete;
}

@starting-style {
    dialog[open] {
        opacity: 0;
        transform: scale(0.95) translateY(-10px);
    }
}

/* Shared backdrop defaults for all site dialogs */
dialog::backdrop {
    background: oklch(0 0 0 / 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 1;
    transition: opacity 0.3s ease,
                overlay 0.3s ease allow-discrete,
                display 0.3s ease allow-discrete;
}

@starting-style {
    dialog::backdrop {
        opacity: 0;
    }
}

/* ============================================
   2026 Modern Component Enhancements
   ============================================ */

/* Card hover with :has() - highlight entire card when link is focused */
.card:has(a:focus-visible),
.album-card:has(a:focus-visible),
.news-card:has(a:focus-visible) {
  outline: 2px solid var(--accent, #f59e0b);
  outline-offset: 4px;
  border-radius: var(--radius-lg, 12px);
}

/* Form validation with :has() */
.form-group:has(input:user-valid) {
  --field-accent: var(--success, #22c55e);
}

.form-group:has(input:user-invalid) {
  --field-accent: var(--error, #ef4444);
}

/* Nav item active state with :has() */
.nav-item:has(.active),
.nav-tab:has([aria-selected="true"]) {
  --tab-color: var(--accent, #f59e0b);
}

/* Empty state detection */
.grid:has(> :only-child) {
  place-items: center;
}

.comments-list:has(> .no-comments) {
  min-height: 200px;
  display: grid;
  place-items: center;
}

/* Modern focus-visible ring */
:focus-visible {
  outline: 2px solid var(--accent, #f59e0b);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Smooth anchor scroll with offset for fixed header */
html {
  scroll-padding-top: 5rem;
}

/* Modern scrollbar styling */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--text-muted, #6b7280) transparent;
}

*::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: var(--text-muted, #6b7280);
  border-radius: 3px;
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--text-secondary, #9ca3af);
}

/* Modern selection color */
::selection {
  background: oklch(0.78 0.15 85 / 0.3);
  color: var(--text-primary);
}

/* Content visibility for off-screen sections - performance */
/* Phase 97: Disabled the overly broad section:not(:first-child) rule.
   It was applying content-visibility:auto to ALL non-first sections across
   the entire site, making homepage sections invisible (dark boxes) because
   the browser skips rendering of off-screen content-visibility:auto elements.
   The contain-intrinsic-size:500px cap also prevented sections from expanding
   to their actual height. Only apply to footer-grid which is always below fold. */
.footer-grid {
  content-visibility: auto;
  contain-intrinsic-size: auto 400px;
}

/* Modern transition defaults */
@media (prefers-reduced-motion: no-preference) {
  a, button, input, textarea, select {
    transition:
      color 200ms ease,
      background-color 200ms ease,
      border-color 200ms ease,
      box-shadow 200ms ease,
      outline-color 200ms ease;
  }
}
/* ============================================================
   BREADCRUMB NAVIGATION (consolidated from breadcrumb.css)
   ============================================================ */

/**
 * Breadcrumb Navigation Styles
 * Modern dark-theme breadcrumbs with Schema.org microdata support
 * Enhanced: › separator, 200px truncation, print-friendly, oklch colors
 *
 * @version 4.0.0
 */

/* ========================================
   BREADCRUMB CONTAINER
   ======================================== */

.breadcrumb {
  --_bc-bg: oklch(0.15 0.005 260 / 0.7);
  --_bc-text: oklch(0.65 0.015 260);
  --_bc-text-current: oklch(0.5 0.01 260);
  --_bc-accent: oklch(0.55 0.22 25);
  --_bc-separator: oklch(0.4 0.01 260);
  --_bc-radius: 9999px;
  --_bc-gap: 0.125rem;

  margin: 0;
  padding-block-start: clamp(4.5rem, 8vw, 5.5rem);
  padding-block-end: 0;
  animation: breadcrumb-fade-in var(--duration-standard, 300ms) var(--ease-standard, ease) both;

  & .breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--_bc-gap);
    list-style: none;
    margin: 0;
    padding: 0.375rem 0.75rem;
    background: var(--_bc-bg);
    border-radius: var(--_bc-radius);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    width: max-content;
    max-width: 100%;
  }
}

@keyframes breadcrumb-fade-in {
  from {
    opacity: 0;
    translate: 0 -6px;
  }
}

/* ========================================
   BREADCRUMB ITEM
   ======================================== */

.breadcrumb-item {
  display: flex;
  align-items: center;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--_bc-text);

  /* Separator via ::after pseudo-element (no extra DOM nodes) */
  &:not(:last-child)::after {
    content: '\203A';  /* › right single angle quotation mark */
    display: inline-block;
    margin-inline: 0.375rem;
    color: var(--_bc-separator);
    font-size: 0.875rem;
    user-select: none;
    pointer-events: none;
  }

  &.breadcrumb-item--current {
    color: var(--_bc-text-current);
  }
}

/* ========================================
   BREADCRUMB LINK
   ======================================== */

.breadcrumb-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--_bc-text);
  text-decoration: none;
  padding: 0.125rem 0.375rem;
  border-radius: 4px;
  transition:
    color 150ms ease,
    background-color 150ms ease;
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  &:hover {
    color: var(--_bc-accent);
    background: oklch(0.55 0.22 25 / 0.08);
  }

  &:active {
    background: oklch(0.55 0.22 25 / 0.14);
  }

  &:focus-visible {
    outline: 2px solid var(--_bc-accent);
    outline-offset: 2px;
  }

  &:focus:not(:focus-visible) {
    outline: none;
  }

  /* Truncate text inside link */
  & > span {
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ========================================
   CURRENT PAGE (last item, no link)
   ======================================== */

.breadcrumb-current {
  display: inline-flex;
  align-items: center;
  color: var(--_bc-text-current);
  font-weight: 500;
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: default;

  & > span {
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ========================================
   SEPARATOR (legacy class, kept for compat)
   ======================================== */

.breadcrumb-separator {
  color: var(--_bc-separator);
  font-size: 0.75rem;
  user-select: none;
  opacity: 0.6;
  list-style: none;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

@media (max-width: 768px) {
  .breadcrumb {
    --_bc-gap: 0;

    & .breadcrumb-list {
      padding: 0.25rem 0.5rem;
    }
  }

  .breadcrumb-item {
    font-size: 0.75rem;

    &:not(:last-child)::after {
      margin-inline: 0.25rem;
    }
  }

  .breadcrumb-link {
    max-width: 140px;
    padding: 0.125rem 0.25rem;
  }

  .breadcrumb-current {
    max-width: 160px;
  }
}

/* Compact collapse: on very small screens show first + last only */
@media (max-width: 480px) {
  .breadcrumb-list {
    flex-wrap: nowrap;
    overflow: hidden;
  }

  /* Hide middle items, show only first and last */
  .breadcrumb-item:not(:first-child):not(:last-child) {
    display: none;
  }

  /* Show collapsed indicator when items are hidden */
  .breadcrumb-item:first-child:not(:last-child)::after {
    content: '...';
    letter-spacing: 0.1em;
    margin-inline: 0.25rem;
  }

  .breadcrumb-link {
    max-width: 120px;
  }

  .breadcrumb-current {
    max-width: 140px;
  }
}

/* ========================================
   ACCESSIBILITY
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  .breadcrumb {
    animation: none;
  }

  .breadcrumb-link {
    transition: none;
  }
}

@media (prefers-contrast: high) {
  .breadcrumb {
    --_bc-bg: oklch(0.1 0 0 / 0.9);
    --_bc-text: oklch(0.85 0 0);
    --_bc-text-current: oklch(0.7 0 0);
    --_bc-separator: oklch(0.6 0 0);
  }

  .breadcrumb-link:focus-visible {
    outline-width: 3px;
  }
}

/* ========================================
   LIGHT THEME OVERRIDE
   ======================================== */

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .breadcrumb {
    --_bc-bg: oklch(0.95 0.005 260 / 0.8);
    --_bc-text: oklch(0.4 0.015 260);
    --_bc-text-current: oklch(0.55 0.01 260);
    --_bc-separator: oklch(0.7 0.01 260);
  }
}

:root[data-theme="light"] .breadcrumb {
  --_bc-bg: oklch(0.95 0.005 260 / 0.8);
  --_bc-text: oklch(0.4 0.015 260);
  --_bc-text-current: oklch(0.55 0.01 260);
  --_bc-separator: oklch(0.7 0.01 260);
}

/* ========================================
   PRINT STYLES
   Show full breadcrumb text without truncation
   ======================================== */

@media print {
  .breadcrumb {
    animation: none;
    padding-block-start: 0;
    padding-block-end: 0.5rem;

    & .breadcrumb-list {
      background: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      padding: 0;
      border-radius: 0;
    }
  }

  .breadcrumb-item {
    color: #333;

    &:not(:last-child)::after {
      color: #666;
    }
  }

  .breadcrumb-link,
  .breadcrumb-current {
    max-width: none;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    color: #333;
  }

  .breadcrumb-link {
    text-decoration: underline;
  }

  /* Show all items on print, even on mobile */
  .breadcrumb-item:not(:first-child):not(:last-child) {
    display: flex;
  }
}

/* ========================================
   LAYOUT INTEGRATION
   ======================================== */

header .breadcrumb {
  margin: 0;
}

article .breadcrumb {
  margin-block-end: 1.5rem;
}

aside .breadcrumb {
  font-size: 0.75rem;
}

/* ============================================================
   BOTTOM NAV MOBILE (consolidated from bottom-nav-mobile.css)
   ============================================================ */

/**
 * Bottom Navigation Mobile Styles
 * Fixed bottom navigation for mobile devices
 * @version 2.1.0
 */

/* ========================================
   NAVIGATION CONTAINER
   ======================================== */

.bottom-nav-mobile {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-primary);
    border-top: 2px solid var(--border-primary);
    z-index: var(--z-bottom-nav, 1000);
    transform: translateY(0);
    transition: transform var(--transition-normal);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(12px);
}

/* Hidden state */
.bottom-nav-mobile.hidden {
    transform: translateY(100%);
}

/* Container */
.bottom-nav-container {
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    max-width: 100%;
    height: 64px;
    padding: 0;
    margin: 0 auto;
}

/* ========================================
   NAVIGATION ITEM
   ======================================== */

.bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    text-decoration: none;
    color: var(--text-muted);
    transition: all var(--transition-fast);
    position: relative;
    overflow: hidden;
    padding: var(--space-2);
    border-radius: 0;
    max-width: 120px;
}

/* Hover state */
.bottom-nav-item:hover {
    background: rgba(var(--accent-red-rgb, 220, 38, 38), 0.05);
    color: var(--text-secondary);
}

/* Active state */
.bottom-nav-item.active {
    color: var(--accent-red);
}

.bottom-nav-item.active .bottom-nav-icon {
    transform: scale(1.1);
}

/* Touch feedback */
.bottom-nav-item:active {
    background: rgba(var(--accent-red-rgb, 220, 38, 38), 0.1);
}

/* ========================================
   ICON
   ======================================== */

.bottom-nav-icon {
    font-size: 1.5rem;
    line-height: 1;
    transition: transform var(--transition-fast);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

/* ========================================
   LABEL
   ======================================== */

.bottom-nav-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-align: center;
    line-height: 1;
    white-space: nowrap;
}

/* ========================================
   ACTIVE INDICATOR
   ======================================== */

.bottom-nav-indicator {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 3px;
    background: var(--accent-red);
    border-radius: 0 0 3px 3px;
    animation: indicator-slide-in 0.3s ease;
}

@keyframes indicator-slide-in {
    from {
        width: 0;
        opacity: 0;
    }
    to {
        width: 40px;
        opacity: 1;
    }
}

/* ========================================
   RIPPLE EFFECT
   ======================================== */

.bottom-nav-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(var(--accent-red-rgb, 220, 38, 38), 0.3);
    transform: scale(0);
    animation: ripple-animation 0.6s ease-out;
    pointer-events: none;
}

@keyframes ripple-animation {
    to {
        transform: scale(2);
        opacity: 0;
    }
}

/* ========================================
   BODY ADJUSTMENTS
   ======================================== */

/* Add bottom padding to body when nav is present */
body.has-bottom-nav {
    padding-bottom: 64px;
}

/* Adjust music player when bottom nav is present */
body.has-bottom-nav .smp-player {
    bottom: 64px;
}

/* ========================================
   THEME ADJUSTMENTS
   ======================================== */

:root[data-theme="dark"] .bottom-nav-mobile {
    background: rgba(15, 15, 25, 0.95);
    border-top-color: rgba(255, 255, 255, 0.1);
}

:root[data-theme="light"] .bottom-nav-mobile {
    background: rgba(255, 255, 255, 0.95);
    border-top-color: rgba(0, 0, 0, 0.1);
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

/* Hide on desktop */
@media (min-width: 769px) {
    .bottom-nav-mobile {
        display: none;
    }

    body.has-bottom-nav {
        padding-bottom: 0;
    }
}

/* Smaller screens */
@media (max-width: 480px) {
    .bottom-nav-container {
        height: 60px;
    }

    .bottom-nav-icon {
        font-size: 1.25rem;
    }

    .bottom-nav-label {
        font-size: 0.7rem;
    }

    body.has-bottom-nav {
        padding-bottom: 60px;
    }

    body.has-bottom-nav .smp-player {
        bottom: 60px;
    }
}

/* Very small screens - hide labels */
@media (max-width: 360px) {
    .bottom-nav-label {
        display: none;
    }

    .bottom-nav-item {
        gap: 0;
    }

    .bottom-nav-container {
        height: 56px;
    }

    body.has-bottom-nav {
        padding-bottom: 56px;
    }

    body.has-bottom-nav .smp-player {
        bottom: 56px;
    }
}

/* Landscape orientation on mobile */
@media (max-height: 500px) and (orientation: landscape) {
    .bottom-nav-container {
        height: 56px;
    }

    .bottom-nav-icon {
        font-size: 1.25rem;
    }

    .bottom-nav-label {
        font-size: 0.65rem;
    }

    body.has-bottom-nav {
        padding-bottom: 56px;
    }
}

/* ========================================
   ACCESSIBILITY
   ======================================== */

/* Focus states */
.bottom-nav-item:focus {
    outline: 3px solid var(--accent-red);
    outline-offset: -3px;
    z-index: 1;
}

.bottom-nav-item:focus:not(:focus-visible) {
    outline: none;
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .bottom-nav-mobile {
        border-top-width: 3px;
    }

    .bottom-nav-item {
        border: 2px solid transparent;
    }

    .bottom-nav-item.active {
        border-color: var(--accent-red);
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .bottom-nav-mobile,
    .bottom-nav-item,
    .bottom-nav-icon,
    .bottom-nav-indicator {
        transition: none;
        animation: none;
    }

    .bottom-nav-ripple {
        display: none;
    }
}

/* ========================================
   SAFE AREA INSETS
   (for devices with notches/home indicators)
   ======================================== */

@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .bottom-nav-mobile {
        padding-bottom: env(safe-area-inset-bottom);
    }

    .bottom-nav-container {
        height: calc(64px + env(safe-area-inset-bottom));
    }

    body.has-bottom-nav {
        padding-bottom: calc(64px + env(safe-area-inset-bottom));
    }

    body.has-bottom-nav .smp-player {
        bottom: calc(64px + env(safe-area-inset-bottom));
    }

    @media (max-width: 480px) {
        .bottom-nav-container {
            height: calc(60px + env(safe-area-inset-bottom));
        }

        body.has-bottom-nav {
            padding-bottom: calc(60px + env(safe-area-inset-bottom));
        }

        body.has-bottom-nav .smp-player {
            bottom: calc(60px + env(safe-area-inset-bottom));
        }
    }

    @media (max-width: 360px) {
        .bottom-nav-container {
            height: calc(56px + env(safe-area-inset-bottom));
        }

        body.has-bottom-nav {
            padding-bottom: calc(56px + env(safe-area-inset-bottom));
        }

        body.has-bottom-nav .smp-player {
            bottom: calc(56px + env(safe-area-inset-bottom));
        }
    }
}

/* ========================================
   BADGE NOTIFICATIONS
   (for future use - unread messages, etc.)
   ======================================== */

.bottom-nav-item[data-badge]::before {
    content: attr(data-badge);
    position: absolute;
    top: 6px;
    right: calc(50% - 20px);
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    background: var(--accent-red);
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    border-radius: 9px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    z-index: 1;
}

/* ========================================
   ANIMATIONS
   ======================================== */

/* Slide in on page load */
.bottom-nav-mobile {
    animation: bottom-nav-slide-in 0.3s ease backwards;
}

@keyframes bottom-nav-slide-in {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

/* Icon bounce on activation */
.bottom-nav-item.active .bottom-nav-icon {
    animation: icon-bounce 0.5s ease;
}

@keyframes icon-bounce {
    0%, 100% {
        transform: scale(1.1);
    }
    50% {
        transform: scale(1.3);
    }
}

/* Disable animations after initial load */
.bottom-nav-mobile.loaded {
    animation: none;
}

.bottom-nav-mobile.loaded .bottom-nav-item.active .bottom-nav-icon {
    animation: none;
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
    .bottom-nav-mobile {
        display: none !important;
    }

    body.has-bottom-nav {
        padding-bottom: 0 !important;
    }
}

/* ========================================
   PWA STANDALONE MODE
   ======================================== */

@media all and (display-mode: standalone) {
    .bottom-nav-mobile {
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
    }

    .bottom-nav-container {
        height: calc(64px + 8px);
    }
}

/* ============================================================
   POPOVER TOOLTIPS (consolidated from popover.css)
   ============================================================ */

/**
 * Popover API Tooltips
 * Native browser popover for accessible, lightweight tooltips
 * Replaces custom tooltip implementations
 * @version 1.0.0
 */

/* ========================================
   BASE POPOVER STYLES
   ======================================== */

[popover].popover-tooltip {
    background: oklch(0.15 0.01 260);
    color: oklch(0.9 0 0);
    border: 1px solid oklch(0.3 0.01 260);
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    max-width: 280px;
    box-shadow: 0 4px 12px oklch(0 0 0 / 0.4);
    margin: 0;
    inset: unset;
    overflow: visible;
    pointer-events: none;
}

/* ========================================
   POPOVER OPEN STATE & ANIMATION
   ======================================== */

[popover].popover-tooltip:popover-open {
    opacity: 1;
    transform: scale(1);
}

@starting-style {
    [popover].popover-tooltip:popover-open {
        opacity: 0;
        transform: scale(0.95);
    }
}

[popover].popover-tooltip {
    transition: opacity 0.2s ease, transform 0.2s ease,
                overlay 0.2s ease allow-discrete,
                display 0.2s ease allow-discrete;
}

/* ========================================
   LIGHT THEME
   ======================================== */

[data-theme="light"] [popover].popover-tooltip {
    background: oklch(0.98 0 0);
    color: oklch(0.2 0 0);
    border-color: oklch(0.8 0 0);
    box-shadow: 0 4px 12px oklch(0 0 0 / 0.12);
}

/* ========================================
   REDUCED MOTION
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    [popover].popover-tooltip {
        transition: none;
    }
}

/* ========================================
   CSS ANCHOR POSITIONING
   Progressive enhancement - only applies
   when the browser supports anchor-name.
   JS positioning is skipped automatically.
   ======================================== */

@supports (anchor-name: --x) {
    /* Popover receives its anchor dynamically via
       style="position-anchor: --popover-anchor-<id>" set by JS.
       The trigger element gets a matching
       style="anchor-name: --popover-anchor-<id>".                */

    [popover].popover-tooltip {
        /* Use the anchor assigned by JS */
        position: fixed;

        /* Remove any inline positioning JS may have written before
           the support check ran; the anchor properties take over.  */
        inset: unset;
        margin: 0;

        /* Default placement: centered above the anchor */
        position-area: top;
        position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;

        /* Small gap between anchor and tooltip */
        margin-bottom: 8px;
    }

    /* When the tooltip flips below the anchor the gap
       needs to sit on the top side instead.                       */
    [popover].popover-tooltip:popover-open {
        /* Ensures position-area animation does not fight transform */
        translate: none;
    }
}

/* ============================================================
   LANGUAGE SWITCHER (consolidated from language-switcher.css)
   ============================================================ */

.language-switcher {
    position: relative;
    display: inline-block;
}

.lang-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 8px 12px;
    color: var(--text-primary, #ffffff);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    min-width: 60px;
}

.lang-toggle:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
}

.lang-code {
    font-weight: 600;
    font-size: 0.85em;
    letter-spacing: 0.5px;
}

.lang-chevron {
    opacity: 0.7;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.language-switcher.active .lang-chevron {
    transform: rotate(180deg);
}

.lang-label {
    font-weight: 600;
    font-size: 0.85em;
    letter-spacing: 0.5px;
    min-width: 1.5em;
}

.lang-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background: rgba(30, 30, 30, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    min-width: 140px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: var(--z-header, 1000);
}

.language-switcher.active .lang-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lang-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    color: var(--text-primary, #ffffff);
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

.lang-option:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--accent-color, #ff6b6b);
}

.lang-option.active {
    background: rgba(255, 107, 107, 0.1);
    color: var(--accent-color, #ff6b6b);
    position: relative;
}

.lang-option.active::before {
    content: '\2713';
    position: absolute;
    right: 16px;
    font-size: 0.8em;
    opacity: 0.8;
}

.lang-name {
    font-weight: 500;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .lang-toggle {
        padding: 6px 10px;
        font-size: 0.8rem;
        min-width: 70px;
    }

    .lang-dropdown {
        right: 0;
        min-width: 120px;
    }

    .lang-option {
        padding: 10px 14px;
        font-size: 0.85rem;
    }
}

/* Light theme support */
[data-theme="light"] .lang-toggle {
    background: rgba(0, 0, 0, 0.1);
    border-color: rgba(0, 0, 0, 0.2);
    color: var(--text-primary, #1a1a1a);
}

[data-theme="light"] .lang-toggle:hover {
    background: rgba(0, 0, 0, 0.2);
    border-color: rgba(0, 0, 0, 0.3);
}

[data-theme="light"] .lang-dropdown {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .lang-option {
    color: var(--text-primary, #1a1a1a);
}

[data-theme="light"] .lang-option:hover {
    background: rgba(0, 0, 0, 0.05);
}

/* ============================================================
   BOOKMARKS (consolidated from bookmarks.css)
   ============================================================ */

/* ============================================
   Bookmarks Component
   Client-side bookmark button + bookmarks page
   ============================================ */

/* ----------------------------------
   Bookmark Button (all sizes)
   ---------------------------------- */
.bookmark-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-secondary, rgba(255,255,255,0.1));
    border-radius: var(--radius-md, 8px);
    background: var(--bg-elevated, #27272a);
    color: var(--text-secondary, #d1d5db);
    cursor: pointer;
    font-family: var(--font-primary, inherit);
    font-size: 0.875rem;
    line-height: 1;
    transition: all var(--transition-fast, 150ms) ease;
    white-space: nowrap;
    user-select: none;
    -webkit-user-select: none;
}

.bookmark-btn:hover {
    border-color: var(--accent-red, #dc2626);
    color: var(--accent-red, #dc2626);
    background: rgba(220, 38, 38, 0.08);
}

.bookmark-btn:focus-visible {
    outline: 2px solid var(--accent-red, #dc2626);
    outline-offset: 2px;
}

.bookmark-btn--active {
    border-color: var(--accent-red, #dc2626);
    color: var(--accent-red, #dc2626);
    background: rgba(220, 38, 38, 0.12);
}

.bookmark-btn--active:hover {
    background: rgba(220, 38, 38, 0.18);
}

.bookmark-icon {
    flex-shrink: 0;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bookmark-btn--active .bookmark-icon {
    filter: drop-shadow(0 0 4px rgba(220, 38, 38, 0.5));
}

/* Pulse animation on toggle */
@keyframes bookmarkPulse {
    0% { transform: scale(1); }
    30% { transform: scale(1.3); }
    60% { transform: scale(0.9); }
    100% { transform: scale(1); }
}

.bookmark-btn--pulse .bookmark-icon {
    animation: bookmarkPulse 0.6s ease;
}

.bookmark-btn__label {
    font-weight: 500;
}

/* ----------------------------------
   Small variant (album grid cards)
   ---------------------------------- */
.bookmark-btn--small {
    padding: 0.35rem;
    border: none;
    border-radius: var(--radius-sm, 4px);
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    font-size: 0;
}

.bookmark-btn--small:hover {
    background: rgba(220, 38, 38, 0.3);
}

.bookmark-btn--small.bookmark-btn--active {
    background: rgba(220, 38, 38, 0.25);
}

/* Card overlay position (for album grid cards) */
.bookmark-btn--card-overlay {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 5;
    opacity: 0;
    transition: opacity var(--transition-fast, 150ms) ease;
}

.bookmark-btn--card-overlay.bookmark-btn--active {
    opacity: 1;
}

.album-card:hover .bookmark-btn--card-overlay,
.bento-card:hover .bookmark-btn--card-overlay,
.bookmark-btn--card-overlay:focus-visible {
    opacity: 1;
}

/* Inline variant (for sidebar etc.) */
.bookmark-btn--inline {
    padding: 0.25rem;
    border: none;
    background: transparent;
    font-size: 0;
}

/* Wrapper for positioning */
.bookmark-btn-wrapper {
    display: inline-flex;
    margin: 0.75rem 0;
}

.bookmark-btn-wrapper--article {
    margin-top: 1rem;
}

/* ----------------------------------
   Nav Badge (header)
   ---------------------------------- */
.bookmarks-nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md, 8px);
    color: var(--text-secondary, #d1d5db);
    text-decoration: none;
    transition: color var(--transition-fast, 150ms) ease, background var(--transition-fast, 150ms) ease;
}

.bookmarks-nav-link:hover {
    color: var(--accent-red, #dc2626);
    background: rgba(220, 38, 38, 0.08);
}

.bookmarks-nav-badge {
    position: absolute;
    top: 2px;
    right: 0;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--accent-red, #dc2626);
    color: #fff;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    pointer-events: none;
    animation: badgeIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes badgeIn {
    0% { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* ----------------------------------
   Toast Notification
   ---------------------------------- */
.bookmark-toast {
    position: fixed;
    bottom: 5rem;
    left: 50%;
    transform: translateX(-50%) translateY(1rem);
    padding: 0.625rem 1.25rem;
    border-radius: var(--radius-md, 8px);
    background: var(--bg-elevated, #27272a);
    border: 1px solid var(--border-secondary, rgba(255,255,255,0.1));
    color: var(--text-primary, #fff);
    font-size: 0.875rem;
    font-weight: 500;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    z-index: var(--z-notification, 10000);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.bookmark-toast--visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ----------------------------------
   Bookmarks Page
   ---------------------------------- */
.bookmarks-page {
    min-height: 60vh;
    padding-top: 2rem;
    padding-bottom: 4rem;
}

.bookmarks-page__title {
    font-size: var(--font-size-h2, clamp(1.75rem, 4vw, 3rem));
    margin-bottom: 0.5rem;
}

.bookmarks-page__subtitle {
    color: var(--text-muted, #9ca3af);
    margin-bottom: 2rem;
}

/* Toolbar (count + clear) */
.bookmarks-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-secondary, rgba(255,255,255,0.1));
}

.bookmarks-toolbar__count {
    color: var(--text-muted, #9ca3af);
    font-size: 0.875rem;
}

.bookmarks-clear-all-btn {
    padding: 0.375rem 0.75rem;
    border: 1px solid rgba(220, 38, 38, 0.3);
    border-radius: var(--radius-sm, 4px);
    background: transparent;
    color: var(--accent-red, #dc2626);
    font-size: 0.8125rem;
    cursor: pointer;
    transition: all var(--transition-fast, 150ms) ease;
}

.bookmarks-clear-all-btn:hover {
    background: rgba(220, 38, 38, 0.1);
    border-color: var(--accent-red, #dc2626);
}

/* Sections */
.bookmarks-section {
    margin-bottom: 2.5rem;
}

.bookmarks-section__title {
    font-size: var(--font-size-h3, 1.5rem);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-secondary, rgba(255,255,255,0.1));
}

/* Card Grid */
.bookmarks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

/* Individual Bookmark Card */
.bookmarks-card {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--border-secondary, rgba(255,255,255,0.1));
    border-radius: var(--radius-lg, 12px);
    background: var(--bg-tertiary, #18181b);
    color: inherit;
    text-decoration: none;
    transition: border-color var(--transition-fast, 150ms) ease, background var(--transition-fast, 150ms) ease, transform var(--transition-fast, 150ms) ease;
    overflow: hidden;
}

.bookmarks-card:hover {
    border-color: var(--accent-red, #dc2626);
    background: var(--bg-elevated, #27272a);
    transform: translateY(-2px);
}

.bookmarks-card__image {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: var(--radius-sm, 4px);
    overflow: hidden;
    background: var(--bg-secondary, #0f0f0f);
    display: flex;
    align-items: center;
    justify-content: center;
}

.bookmarks-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bookmarks-card__image--fallback {
    color: var(--text-muted, #9ca3af);
}

.bookmarks-card__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.25rem;
}

.bookmarks-card__type {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent-red, #dc2626);
}

.bookmarks-card__title {
    font-family: var(--font-primary, inherit);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-primary, #fff);
    text-transform: none;
    letter-spacing: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.bookmarks-card__date {
    font-size: 0.75rem;
    color: var(--text-muted, #9ca3af);
}

.bookmarks-card__remove {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted, #9ca3af);
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--transition-fast, 150ms) ease, color var(--transition-fast, 150ms) ease, background var(--transition-fast, 150ms) ease;
}

.bookmarks-card:hover .bookmarks-card__remove {
    opacity: 1;
}

.bookmarks-card__remove:hover {
    background: rgba(220, 38, 38, 0.15);
    color: var(--accent-red, #dc2626);
}

/* ----------------------------------
   Empty State
   ---------------------------------- */
.bookmarks-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4rem 1rem;
    min-height: 40vh;
}

.bookmarks-empty__icon {
    color: var(--text-muted, #9ca3af);
    opacity: 0.4;
    margin-bottom: 1.5rem;
}

.bookmarks-empty__title {
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
    color: var(--text-primary, #fff);
}

.bookmarks-empty__hint {
    color: var(--text-muted, #9ca3af);
    max-width: 400px;
    margin-bottom: 0.5rem;
    font-size: 0.9375rem;
    line-height: 1.6;
}

.bookmarks-empty__actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
    justify-content: center;
}

.bookmarks-empty__actions .btn {
    display: inline-flex;
    align-items: center;
    padding: 0.625rem 1.5rem;
    border-radius: var(--radius-md, 8px);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transition-fast, 150ms) ease;
}

.bookmarks-empty__actions .btn-primary {
    background: var(--accent-red, #dc2626);
    color: #fff;
    border: none;
}

.bookmarks-empty__actions .btn-primary:hover {
    background: var(--accent-hover, #b91c1c);
}

.bookmarks-empty__actions .btn-secondary {
    background: transparent;
    color: var(--text-secondary, #d1d5db);
    border: 1px solid var(--border-secondary, rgba(255,255,255,0.1));
}

.bookmarks-empty__actions .btn-secondary:hover {
    border-color: var(--text-secondary, #d1d5db);
    background: rgba(255, 255, 255, 0.05);
}

/* ----------------------------------
   Light Theme Overrides
   ---------------------------------- */
:root[data-theme="light"] .bookmark-btn {
    background: var(--bg-tertiary, #f3f4f6);
    border-color: var(--border-secondary, rgba(0,0,0,0.1));
    color: var(--text-secondary, #374151);
}

:root[data-theme="light"] .bookmark-btn:hover {
    background: rgba(220, 38, 38, 0.06);
}

:root[data-theme="light"] .bookmark-btn--small {
    background: rgba(255, 255, 255, 0.8);
}

:root[data-theme="light"] .bookmarks-card {
    background: var(--bg-secondary, #f9fafb);
    border-color: var(--border-secondary, rgba(0,0,0,0.1));
}

:root[data-theme="light"] .bookmarks-card:hover {
    background: var(--bg-elevated, #ffffff);
}

:root[data-theme="light"] .bookmark-toast {
    background: #fff;
    border-color: rgba(0, 0, 0, 0.1);
    color: var(--text-primary, #111827);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

/* ----------------------------------
   Responsive
   ---------------------------------- */
@media (max-width: 768px) {
    .bookmark-btn--normal {
        padding: 0.4rem 0.75rem;
        font-size: 0.8125rem;
    }

    .bookmarks-grid {
        grid-template-columns: 1fr;
    }

    .bookmarks-card__remove {
        opacity: 1;
    }

    .bookmark-btn--card-overlay {
        opacity: 1;
    }

    .bookmark-toast {
        bottom: 7rem; /* above mobile nav */
    }
}

@media (max-width: 480px) {
    .bookmarks-toolbar {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .bookmarks-empty {
        padding: 2rem 1rem;
    }
}

/* ============================================================
   SEARCH SUGGEST (consolidated from search-suggest.css)
   ============================================================ */

/**
 * Search Suggest / Typeahead Dropdown Styles
 * Positioned below the search modal input.
 * Dark theme with oklch accent colors, native CSS nesting.
 * @version 1.0.0
 */

/* ============================================================
   DROPDOWN CONTAINER
   ============================================================ */

.search-suggest {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 100;
    margin-top: 0.25rem;
    max-height: 22rem;
    overflow-y: auto;
    overflow-x: hidden;
    background: oklch(0.15 0.01 260);
    border: 1px solid oklch(0.3 0.01 260);
    border-radius: var(--radius-lg, 12px);
    box-shadow: 0 12px 40px oklch(0 0 0 / 0.6);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition:
        opacity 0.15s ease,
        visibility 0.15s ease,
        transform 0.15s ease;
    scrollbar-width: thin;
    scrollbar-color: oklch(0.4 0.01 260) transparent;

    /* Open state */
    &.search-suggest--open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    /* Webkit scrollbar */
    &::-webkit-scrollbar {
        width: 6px;
    }

    &::-webkit-scrollbar-track {
        background: transparent;
    }

    &::-webkit-scrollbar-thumb {
        background: oklch(0.4 0.01 260);
        border-radius: 3px;
    }

    &::-webkit-scrollbar-thumb:hover {
        background: oklch(0.5 0.01 260);
    }
}

/* ============================================================
   GROUP HEADER
   ============================================================ */

.search-suggest__group {
    &:not(:first-child) {
        border-top: 1px solid oklch(0.25 0.01 260);
    }
}

.search-suggest__group-header {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem 0.25rem;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: oklch(0.55 0.01 260);
    user-select: none;
}

.search-suggest__group-icon {
    font-size: 0.75rem;
    line-height: 1;
}

.search-suggest__group-label {
    line-height: 1;
}

/* ============================================================
   SUGGESTION ITEM
   ============================================================ */

.search-suggest__item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    transition:
        background 0.1s ease,
        color 0.1s ease;
    color: oklch(0.85 0.01 260);
    font-size: 0.875rem;
    line-height: 1.4;
    border-radius: 0;

    /* Hover / active */
    &:hover,
    &.search-suggest__item--active {
        background: oklch(0.22 0.04 20);
        color: oklch(0.95 0 0);
    }

    /* Keyboard focus visible ring */
    &:focus-visible {
        outline: 2px solid oklch(0.65 0.2 25);
        outline-offset: -2px;
        border-radius: var(--radius-sm, 4px);
    }

    /* Last item in a group */
    &:last-child {
        margin-bottom: 0.25rem;
    }
}

.search-suggest__item-icon {
    flex-shrink: 0;
    font-size: 0.875rem;
    line-height: 1;
    width: 1.25rem;
    text-align: center;
}

.search-suggest__item-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    /* Highlighted matching text */
    & strong {
        font-weight: 700;
        color: oklch(0.65 0.2 25);
    }
}

/* Active item highlight text stays white */
.search-suggest__item--active .search-suggest__item-text strong,
.search-suggest__item:hover .search-suggest__item-text strong {
    color: oklch(0.75 0.22 25);
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    .search-suggest {
        transition: none;
    }

    .search-suggest__item {
        transition: none;
    }
}

/* ============================================================
   HIGH CONTRAST
   ============================================================ */

@media (prefers-contrast: high) {
    .search-suggest {
        border-width: 2px;
    }

    .search-suggest__item--active,
    .search-suggest__item:hover {
        outline: 2px solid currentColor;
    }
}

/* ============================================================
   LIGHT THEME
   ============================================================ */

:root[data-theme="light"] {
    & .search-suggest {
        background: oklch(0.98 0 0);
        border-color: oklch(0.85 0 0);
        box-shadow: 0 12px 40px oklch(0 0 0 / 0.15);
    }

    & .search-suggest__group-header {
        color: oklch(0.5 0 0);
    }

    & .search-suggest__group:not(:first-child) {
        border-top-color: oklch(0.9 0 0);
    }

    & .search-suggest__item {
        color: oklch(0.25 0 0);
    }

    & .search-suggest__item:hover,
    & .search-suggest__item.search-suggest__item--active {
        background: oklch(0.95 0.04 20);
        color: oklch(0.15 0 0);
    }

    & .search-suggest__item-text strong {
        color: oklch(0.45 0.2 25);
    }

    & .search-suggest__item--active .search-suggest__item-text strong,
    & .search-suggest__item:hover .search-suggest__item-text strong {
        color: oklch(0.4 0.22 25);
    }

    & .search-suggest::-webkit-scrollbar-thumb {
        background: oklch(0.75 0 0);
    }

    & .search-suggest::-webkit-scrollbar-thumb:hover {
        background: oklch(0.65 0 0);
    }
}

/* ============================================================
   MOBILE RESPONSIVE
   ============================================================ */

@media (max-width: 640px) {
    .search-suggest {
        max-height: 16rem;
        border-radius: var(--radius-md, 8px);
    }

    .search-suggest__item {
        padding: 0.625rem 0.75rem;
        font-size: 0.9375rem;
    }

    .search-suggest__group-header {
        padding: 0.5rem 0.75rem 0.375rem;
    }
}

/* ============================================================
   PRINT
   ============================================================ */

@media print {
    .search-suggest {
        display: none !important;
    }
}

/* ============================================================
   DATE COUNTER (consolidated from date-counter.css)
   ============================================================ */

/**
 * Date Counter Component
 * Horizontal boxes showing Years / Months / Days with digit flip animation
 * Dark theme, oklch colors, native CSS nesting
 * @version 1.0.0
 */

/* ========================================
   CONTAINER
   ======================================== */

.date-counter {
    padding: var(--space-6, 1.5rem) 0;
}

/* ========================================
   BOXES LAYOUT: 3 columns with separators
   ======================================== */

.date-counter__boxes {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4, 1rem);
}

/* ========================================
   INDIVIDUAL BOX
   ======================================== */

.date-counter__box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 6rem;
    padding: var(--space-5, 1.25rem) var(--space-6, 1.5rem);
    background: oklch(10% 0.005 260);
    border: 1px solid oklch(22% 0.01 260);
    border-radius: 0.75rem;
    text-align: center;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;

    &:hover {
        border-color: oklch(35% 0.01 260);
        box-shadow: 0 0 20px oklch(20% 0.005 260 / 0.4);
    }
}

/* ========================================
   SEPARATOR (centered dot between boxes)
   ======================================== */

.date-counter__separator {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 0.35rem;
    height: 0.35rem;
    border-radius: 50%;
    background: oklch(40% 0.01 260);
    flex-shrink: 0;
}

/* ========================================
   DIGITS: large accent number
   ======================================== */

.date-counter__digits {
    font-size: clamp(2rem, 5vw, 3.25rem);
    font-weight: 800;
    line-height: 1.1;
    color: oklch(82% 0.14 85);
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
    letter-spacing: -0.02em;
    margin-bottom: var(--space-1, 0.25rem);
    display: inline-block;
    transform-origin: center bottom;
}

/* ========================================
   DIGIT FLIP ANIMATION
   ======================================== */

@keyframes digit-flip {
    0% {
        transform: rotateX(0deg) scale(1);
        opacity: 1;
    }
    30% {
        transform: rotateX(-90deg) scale(0.9);
        opacity: 0;
    }
    50% {
        transform: rotateX(90deg) scale(0.9);
        opacity: 0;
    }
    100% {
        transform: rotateX(0deg) scale(1);
        opacity: 1;
    }
}

.date-counter__digits--flipping {
    animation: digit-flip 0.4s ease-in-out;
}

/* ========================================
   LABEL: muted text below number
   ======================================== */

.date-counter__label {
    font-size: clamp(0.7rem, 1.4vw, 0.85rem);
    color: oklch(55% 0.01 260);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: lowercase;
}

/* ========================================
   HEADER TEXT (placed by template above component)
   ======================================== */

.date-counter-header {
    text-align: center;
    font-size: clamp(0.9rem, 2vw, 1.1rem);
    color: oklch(60% 0.01 260);
    font-weight: 400;
    letter-spacing: 0.03em;
    margin-bottom: var(--space-2, 0.5rem);
}

/* ========================================
   MEMORIAL PAGE VARIANT
   Uses memorial warm amber tones
   ======================================== */

.memorial-page .date-counter__box {
    background: oklch(10% 0.015 60);
    border-color: oklch(22% 0.02 60);

    &:hover {
        border-color: oklch(35% 0.03 60);
        box-shadow: 0 0 20px oklch(20% 0.015 60 / 0.4);
    }
}

.memorial-page .date-counter__digits {
    color: var(--memorial-gold, oklch(82% 0.14 85));
}

.memorial-page .date-counter__label {
    color: var(--memorial-text-muted, oklch(55% 0.01 60));
}

.memorial-page .date-counter__separator {
    background: var(--memorial-text-muted, oklch(40% 0.01 60));
}

.memorial-page .date-counter-header {
    color: var(--memorial-text-muted, oklch(60% 0.01 60));
}

/* ========================================
   HOMEPAGE VARIANT: subtle, compact
   ======================================== */

.memorial-section .date-counter {
    padding: var(--space-4, 1rem) 0 0;
}

.memorial-section .date-counter__box {
    min-width: 4.5rem;
    padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
    background: oklch(8% 0.005 260 / 0.6);
    border-color: oklch(20% 0.01 260 / 0.5);
}

.memorial-section .date-counter__digits {
    font-size: clamp(1.5rem, 3.5vw, 2.25rem);
    color: oklch(75% 0.12 85);
}

.memorial-section .date-counter__label {
    font-size: clamp(0.65rem, 1.2vw, 0.75rem);
}

.memorial-section .date-counter-header {
    font-size: clamp(0.8rem, 1.5vw, 0.95rem);
    color: oklch(55% 0.01 260);
    margin-bottom: var(--space-1, 0.25rem);
}

/* ========================================
   RESPONSIVE: tighter on mobile
   ======================================== */

@media (max-width: 640px) {
    .date-counter__boxes {
        gap: var(--space-2, 0.5rem);
    }

    .date-counter__box {
        min-width: 4.5rem;
        padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
    }

    .date-counter__digits {
        font-size: clamp(1.5rem, 8vw, 2.25rem);
    }

    .date-counter__label {
        font-size: 0.7rem;
    }

    .date-counter__separator {
        width: 0.25rem;
        height: 0.25rem;
    }

    /* Homepage variant even more compact on mobile */
    .memorial-section .date-counter__box {
        min-width: 3.5rem;
        padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
    }

    .memorial-section .date-counter__digits {
        font-size: clamp(1.25rem, 6vw, 1.75rem);
    }
}

/* ========================================
   ACCESSIBILITY
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    .date-counter__digits--flipping {
        animation: none;
    }

    .date-counter__box {
        transition: none;
    }
}

@media (prefers-contrast: high) {
    .date-counter__box {
        border-width: 2px;
        border-color: oklch(50% 0 0);
    }

    .date-counter__digits {
        color: oklch(90% 0.14 85);
    }

    .date-counter__label {
        color: oklch(75% 0 0);
    }
}

/* ========================================
   PRINT
   ======================================== */

@media print {
    .date-counter__box {
        background: none;
        border: 1px solid #000;
    }

    .date-counter__digits {
        color: #000;
    }

    .date-counter__label {
        color: #333;
    }

    .date-counter__separator {
        background: #666;
    }
}

/* ============================================================
   COOKIE CONSENT (consolidated from cookie-consent.css)
   ============================================================ */

/* ==============================================
   Cookie Consent Banner
   GDPR-compliant bottom bar
   ============================================== */

.cookie-consent {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--z-cookie-consent, 10000);
    background: var(--color-bg-elevated, #1a1a1f);
    border-top: 1px solid var(--color-neutral-subtle, #4b4d53);
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.5);
    padding: 0;
    transform: translateY(100%);
    opacity: 0;
    transition: transform var(--duration-standard, 300ms) var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1)),
                opacity var(--duration-standard, 300ms) var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1));
    will-change: transform, opacity;
}

.cookie-consent--visible {
    transform: translateY(0);
    opacity: 1;
}

.cookie-consent--hiding {
    transform: translateY(100%);
    opacity: 0;
}

/* Inner wrapper */
.cookie-consent__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    max-width: 1280px;
    margin: 0 auto;
    padding: 1rem 1.5rem;
}

/* Text */
.cookie-consent__text {
    flex: 1 1 auto;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--color-neutral, #b0b3bc);
    margin: 0;
}

/* Privacy link */
.cookie-consent__link {
    color: var(--color-primary-light, #ef4444);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--duration-standard, 300ms);
}

.cookie-consent__link:hover,
.cookie-consent__link:focus-visible {
    color: var(--color-primary, #dc2626);
}

/* Button group */
.cookie-consent__actions {
    display: flex;
    flex-shrink: 0;
    gap: 0.75rem;
}

/* Shared button base */
.cookie-consent__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 1.25rem;
    border: none;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--duration-standard, 300ms),
                color var(--duration-standard, 300ms),
                box-shadow var(--duration-standard, 300ms);
}

.cookie-consent__btn:focus-visible {
    outline: 2px solid var(--color-primary-light, #ef4444);
    outline-offset: 2px;
}

/* Accept All button - primary style */
.cookie-consent__btn--accept {
    background: var(--color-primary, #dc2626);
    color: #fff;
}

.cookie-consent__btn--accept:hover {
    background: var(--color-primary-hover, #b91c1c);
    box-shadow: 0 0 12px var(--color-primary-glow, rgba(220, 38, 38, 0.3));
}

/* Necessary Only button - ghost / secondary style */
.cookie-consent__btn--necessary {
    background: transparent;
    color: var(--color-neutral, #b0b3bc);
    border: 1px solid var(--color-neutral-subtle, #4b4d53);
}

.cookie-consent__btn--necessary:hover {
    background: var(--color-bg-surface, #27272a);
    color: #fff;
    border-color: var(--color-neutral-dim, #7f828a);
}

/* ==============================================
   Responsive: stack on small screens
   ============================================== */

@media (max-width: 640px) {
    .cookie-consent__inner {
        flex-direction: column;
        text-align: center;
        padding: 1rem;
        gap: 1rem;
    }

    .cookie-consent__actions {
        width: 100%;
        flex-direction: column;
        gap: 0.5rem;
    }

    .cookie-consent__btn {
        width: 100%;
    }
}

/* ==============================================
   Reduced motion support
   ============================================== */

@media (prefers-reduced-motion: reduce) {
    .cookie-consent {
        transition: none;
    }

    .cookie-consent--visible {
        transform: translateY(0);
        opacity: 1;
    }

    .cookie-consent--hiding {
        transform: translateY(100%);
        opacity: 0;
    }
}

/* ============================================
   CONSOLIDATED FROM INDIVIDUAL COMPONENT FILES
   Phase 64 - CSS Consolidation
   ============================================ */

/* --- breadcrumb.css --- */
/**
 * Breadcrumb Navigation Styles
 * Modern dark-theme breadcrumbs with Schema.org microdata support
 * Enhanced: › separator, 200px truncation, print-friendly, oklch colors
 *
 * @version 4.0.0
 */

/* ========================================
   BREADCRUMB CONTAINER
   ======================================== */

.breadcrumb {
  --_bc-bg: oklch(0.15 0.005 260 / 0.7);
  --_bc-text: oklch(0.65 0.015 260);
  --_bc-text-current: oklch(0.5 0.01 260);
  --_bc-accent: oklch(0.55 0.22 25);
  --_bc-separator: oklch(0.4 0.01 260);
  --_bc-radius: 9999px;
  --_bc-gap: 0.125rem;

  margin: 0;
  padding-block-start: clamp(4.5rem, 8vw, 5.5rem);
  padding-block-end: 0;
  animation: breadcrumb-fade-in var(--duration-standard, 300ms) var(--ease-standard, ease) both;

  & .breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--_bc-gap);
    list-style: none;
    margin: 0;
    padding: 0.375rem 0.75rem;
    background: var(--_bc-bg);
    border-radius: var(--_bc-radius);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    width: max-content;
    max-width: 100%;
  }
}

@keyframes breadcrumb-fade-in {
  from {
    opacity: 0;
    translate: 0 -6px;
  }
}

/* ========================================
   BREADCRUMB ITEM
   ======================================== */

.breadcrumb-item {
  display: flex;
  align-items: center;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--_bc-text);

  /* Separator via ::after pseudo-element (no extra DOM nodes) */
  &:not(:last-child)::after {
    content: '\203A';  /* › right single angle quotation mark */
    display: inline-block;
    margin-inline: 0.375rem;
    color: var(--_bc-separator);
    font-size: 0.875rem;
    user-select: none;
    pointer-events: none;
  }

  &.breadcrumb-item--current {
    color: var(--_bc-text-current);
  }
}

/* ========================================
   BREADCRUMB LINK
   ======================================== */

.breadcrumb-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--_bc-text);
  text-decoration: none;
  padding: 0.125rem 0.375rem;
  border-radius: 4px;
  transition:
    color 150ms ease,
    background-color 150ms ease;
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  &:hover {
    color: var(--_bc-accent);
    background: oklch(0.55 0.22 25 / 0.08);
  }

  &:active {
    background: oklch(0.55 0.22 25 / 0.14);
  }

  &:focus-visible {
    outline: 2px solid var(--_bc-accent);
    outline-offset: 2px;
  }

  &:focus:not(:focus-visible) {
    outline: none;
  }

  /* Truncate text inside link */
  & > span {
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ========================================
   CURRENT PAGE (last item, no link)
   ======================================== */

.breadcrumb-current {
  display: inline-flex;
  align-items: center;
  color: var(--_bc-text-current);
  font-weight: 500;
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: default;

  & > span {
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ========================================
   SEPARATOR (legacy class, kept for compat)
   ======================================== */

.breadcrumb-separator {
  color: var(--_bc-separator);
  font-size: 0.75rem;
  user-select: none;
  opacity: 0.6;
  list-style: none;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

@media (max-width: 768px) {
  .breadcrumb {
    --_bc-gap: 0;

    & .breadcrumb-list {
      padding: 0.25rem 0.5rem;
    }
  }

  .breadcrumb-item {
    font-size: 0.75rem;

    &:not(:last-child)::after {
      margin-inline: 0.25rem;
    }
  }

  .breadcrumb-link {
    max-width: 140px;
    padding: 0.125rem 0.25rem;
  }

  .breadcrumb-current {
    max-width: 160px;
  }
}

/* Compact collapse: on very small screens show first + last only */
@media (max-width: 480px) {
  .breadcrumb-list {
    flex-wrap: nowrap;
    overflow: hidden;
  }

  /* Hide middle items, show only first and last */
  .breadcrumb-item:not(:first-child):not(:last-child) {
    display: none;
  }

  /* Show collapsed indicator when items are hidden */
  .breadcrumb-item:first-child:not(:last-child)::after {
    content: '...';
    letter-spacing: 0.1em;
    margin-inline: 0.25rem;
  }

  .breadcrumb-link {
    max-width: 120px;
  }

  .breadcrumb-current {
    max-width: 140px;
  }
}

/* ========================================
   ACCESSIBILITY
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  .breadcrumb {
    animation: none;
  }

  .breadcrumb-link {
    transition: none;
  }
}

@media (prefers-contrast: high) {
  .breadcrumb {
    --_bc-bg: oklch(0.1 0 0 / 0.9);
    --_bc-text: oklch(0.85 0 0);
    --_bc-text-current: oklch(0.7 0 0);
    --_bc-separator: oklch(0.6 0 0);
  }

  .breadcrumb-link:focus-visible {
    outline-width: 3px;
  }
}

/* ========================================
   LIGHT THEME OVERRIDE
   ======================================== */

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .breadcrumb {
    --_bc-bg: oklch(0.95 0.005 260 / 0.8);
    --_bc-text: oklch(0.4 0.015 260);
    --_bc-text-current: oklch(0.55 0.01 260);
    --_bc-separator: oklch(0.7 0.01 260);
  }
}

:root[data-theme="light"] .breadcrumb {
  --_bc-bg: oklch(0.95 0.005 260 / 0.8);
  --_bc-text: oklch(0.4 0.015 260);
  --_bc-text-current: oklch(0.55 0.01 260);
  --_bc-separator: oklch(0.7 0.01 260);
}

/* ========================================
   PRINT STYLES
   Show full breadcrumb text without truncation
   ======================================== */

@media print {
  .breadcrumb {
    animation: none;
    padding-block-start: 0;
    padding-block-end: 0.5rem;

    & .breadcrumb-list {
      background: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      padding: 0;
      border-radius: 0;
    }
  }

  .breadcrumb-item {
    color: #333;

    &:not(:last-child)::after {
      color: #666;
    }
  }

  .breadcrumb-link,
  .breadcrumb-current {
    max-width: none;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    color: #333;
  }

  .breadcrumb-link {
    text-decoration: underline;
  }

  /* Show all items on print, even on mobile */
  .breadcrumb-item:not(:first-child):not(:last-child) {
    display: flex;
  }
}

/* ========================================
   LAYOUT INTEGRATION
   ======================================== */

header .breadcrumb {
  margin: 0;
}

article .breadcrumb {
  margin-block-end: 1.5rem;
}

aside .breadcrumb {
  font-size: 0.75rem;
}


/* --- bottom-nav-mobile.css --- */
/**
 * Bottom Navigation Mobile Styles
 * Fixed bottom navigation for mobile devices
 * @version 2.1.0
 */

/* ========================================
   NAVIGATION CONTAINER
   ======================================== */

.bottom-nav-mobile {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-primary);
    border-top: 2px solid var(--border-primary);
    z-index: var(--z-bottom-nav, 1000);
    transform: translateY(0);
    transition: transform var(--transition-normal);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(12px);
}

/* Hidden state */
.bottom-nav-mobile.hidden {
    transform: translateY(100%);
}

/* Container */
.bottom-nav-container {
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    max-width: 100%;
    height: 64px;
    padding: 0;
    margin: 0 auto;
}

/* ========================================
   NAVIGATION ITEM
   ======================================== */

.bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    text-decoration: none;
    color: var(--text-muted);
    transition: all var(--transition-fast);
    position: relative;
    overflow: hidden;
    padding: var(--space-2);
    border-radius: 0;
    max-width: 120px;
}

/* Hover state */
.bottom-nav-item:hover {
    background: rgba(var(--accent-red-rgb, 220, 38, 38), 0.05);
    color: var(--text-secondary);
}

/* Active state */
.bottom-nav-item.active {
    color: var(--accent-red);
}

.bottom-nav-item.active .bottom-nav-icon {
    transform: scale(1.1);
}

/* Touch feedback */
.bottom-nav-item:active {
    background: rgba(var(--accent-red-rgb, 220, 38, 38), 0.1);
}

/* ========================================
   ICON
   ======================================== */

.bottom-nav-icon {
    font-size: 1.5rem;
    line-height: 1;
    transition: transform var(--transition-fast);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

/* ========================================
   LABEL
   ======================================== */

.bottom-nav-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-align: center;
    line-height: 1;
    white-space: nowrap;
}

/* ========================================
   ACTIVE INDICATOR
   ======================================== */

.bottom-nav-indicator {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 3px;
    background: var(--accent-red);
    border-radius: 0 0 3px 3px;
    animation: indicator-slide-in 0.3s ease;
}

@keyframes indicator-slide-in {
    from {
        width: 0;
        opacity: 0;
    }
    to {
        width: 40px;
        opacity: 1;
    }
}

/* ========================================
   RIPPLE EFFECT
   ======================================== */

.bottom-nav-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(var(--accent-red-rgb, 220, 38, 38), 0.3);
    transform: scale(0);
    animation: ripple-animation 0.6s ease-out;
    pointer-events: none;
}

@keyframes ripple-animation {
    to {
        transform: scale(2);
        opacity: 0;
    }
}

/* ========================================
   BODY ADJUSTMENTS
   ======================================== */

/* Add bottom padding to body when nav is present */
body.has-bottom-nav {
    padding-bottom: 64px;
}

/* Adjust music player when bottom nav is present */
body.has-bottom-nav .smp-player {
    bottom: 64px;
}

/* ========================================
   THEME ADJUSTMENTS
   ======================================== */

:root[data-theme="dark"] .bottom-nav-mobile {
    background: rgba(15, 15, 25, 0.95);
    border-top-color: rgba(255, 255, 255, 0.1);
}

:root[data-theme="light"] .bottom-nav-mobile {
    background: rgba(255, 255, 255, 0.95);
    border-top-color: rgba(0, 0, 0, 0.1);
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

/* Hide on desktop */
@media (min-width: 769px) {
    .bottom-nav-mobile {
        display: none;
    }

    body.has-bottom-nav {
        padding-bottom: 0;
    }
}

/* Smaller screens */
@media (max-width: 480px) {
    .bottom-nav-container {
        height: 60px;
    }

    .bottom-nav-icon {
        font-size: 1.25rem;
    }

    .bottom-nav-label {
        font-size: 0.7rem;
    }

    body.has-bottom-nav {
        padding-bottom: 60px;
    }

    body.has-bottom-nav .smp-player {
        bottom: 60px;
    }
}

/* Very small screens - hide labels */
@media (max-width: 360px) {
    .bottom-nav-label {
        display: none;
    }

    .bottom-nav-item {
        gap: 0;
    }

    .bottom-nav-container {
        height: 56px;
    }

    body.has-bottom-nav {
        padding-bottom: 56px;
    }

    body.has-bottom-nav .smp-player {
        bottom: 56px;
    }
}

/* Landscape orientation on mobile */
@media (max-height: 500px) and (orientation: landscape) {
    .bottom-nav-container {
        height: 56px;
    }

    .bottom-nav-icon {
        font-size: 1.25rem;
    }

    .bottom-nav-label {
        font-size: 0.65rem;
    }

    body.has-bottom-nav {
        padding-bottom: 56px;
    }
}

/* ========================================
   ACCESSIBILITY
   ======================================== */

/* Focus states */
.bottom-nav-item:focus {
    outline: 3px solid var(--accent-red);
    outline-offset: -3px;
    z-index: 1;
}

.bottom-nav-item:focus:not(:focus-visible) {
    outline: none;
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .bottom-nav-mobile {
        border-top-width: 3px;
    }

    .bottom-nav-item {
        border: 2px solid transparent;
    }

    .bottom-nav-item.active {
        border-color: var(--accent-red);
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .bottom-nav-mobile,
    .bottom-nav-item,
    .bottom-nav-icon,
    .bottom-nav-indicator {
        transition: none;
        animation: none;
    }

    .bottom-nav-ripple {
        display: none;
    }
}

/* ========================================
   SAFE AREA INSETS
   (for devices with notches/home indicators)
   ======================================== */

@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .bottom-nav-mobile {
        padding-bottom: env(safe-area-inset-bottom);
    }

    .bottom-nav-container {
        height: calc(64px + env(safe-area-inset-bottom));
    }

    body.has-bottom-nav {
        padding-bottom: calc(64px + env(safe-area-inset-bottom));
    }

    body.has-bottom-nav .smp-player {
        bottom: calc(64px + env(safe-area-inset-bottom));
    }

    @media (max-width: 480px) {
        .bottom-nav-container {
            height: calc(60px + env(safe-area-inset-bottom));
        }

        body.has-bottom-nav {
            padding-bottom: calc(60px + env(safe-area-inset-bottom));
        }

        body.has-bottom-nav .smp-player {
            bottom: calc(60px + env(safe-area-inset-bottom));
        }
    }

    @media (max-width: 360px) {
        .bottom-nav-container {
            height: calc(56px + env(safe-area-inset-bottom));
        }

        body.has-bottom-nav {
            padding-bottom: calc(56px + env(safe-area-inset-bottom));
        }

        body.has-bottom-nav .smp-player {
            bottom: calc(56px + env(safe-area-inset-bottom));
        }
    }
}

/* ========================================
   BADGE NOTIFICATIONS
   (for future use - unread messages, etc.)
   ======================================== */

.bottom-nav-item[data-badge]::before {
    content: attr(data-badge);
    position: absolute;
    top: 6px;
    right: calc(50% - 20px);
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    background: var(--accent-red);
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    border-radius: 9px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    z-index: 1;
}

/* ========================================
   ANIMATIONS
   ======================================== */

/* Slide in on page load */
.bottom-nav-mobile {
    animation: bottom-nav-slide-in 0.3s ease backwards;
}

@keyframes bottom-nav-slide-in {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

/* Icon bounce on activation */
.bottom-nav-item.active .bottom-nav-icon {
    animation: icon-bounce 0.5s ease;
}

@keyframes icon-bounce {
    0%, 100% {
        transform: scale(1.1);
    }
    50% {
        transform: scale(1.3);
    }
}

/* Disable animations after initial load */
.bottom-nav-mobile.loaded {
    animation: none;
}

.bottom-nav-mobile.loaded .bottom-nav-item.active .bottom-nav-icon {
    animation: none;
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
    .bottom-nav-mobile {
        display: none !important;
    }

    body.has-bottom-nav {
        padding-bottom: 0 !important;
    }
}

/* ========================================
   PWA STANDALONE MODE
   ======================================== */

@media all and (display-mode: standalone) {
    .bottom-nav-mobile {
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
    }

    .bottom-nav-container {
        height: calc(64px + 8px);
    }
}


/* --- popover.css --- */
/**
 * Popover API Tooltips
 * Native browser popover for accessible, lightweight tooltips
 * Replaces custom tooltip implementations
 * @version 1.0.0
 */

/* ========================================
   BASE POPOVER STYLES
   ======================================== */

[popover].popover-tooltip {
    background: oklch(0.15 0.01 260);
    color: oklch(0.9 0 0);
    border: 1px solid oklch(0.3 0.01 260);
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    max-width: 280px;
    box-shadow: 0 4px 12px oklch(0 0 0 / 0.4);
    margin: 0;
    inset: unset;
    overflow: visible;
    pointer-events: none;
}

/* ========================================
   POPOVER OPEN STATE & ANIMATION
   ======================================== */

[popover].popover-tooltip:popover-open {
    opacity: 1;
    transform: scale(1);
}

@starting-style {
    [popover].popover-tooltip:popover-open {
        opacity: 0;
        transform: scale(0.95);
    }
}

[popover].popover-tooltip {
    transition: opacity 0.2s ease, transform 0.2s ease,
                overlay 0.2s ease allow-discrete,
                display 0.2s ease allow-discrete;
}

/* ========================================
   LIGHT THEME
   ======================================== */

[data-theme="light"] [popover].popover-tooltip {
    background: oklch(0.98 0 0);
    color: oklch(0.2 0 0);
    border-color: oklch(0.8 0 0);
    box-shadow: 0 4px 12px oklch(0 0 0 / 0.12);
}

/* ========================================
   REDUCED MOTION
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    [popover].popover-tooltip {
        transition: none;
    }
}

/* ========================================
   CSS ANCHOR POSITIONING
   Progressive enhancement - only applies
   when the browser supports anchor-name.
   JS positioning is skipped automatically.
   ======================================== */

@supports (anchor-name: --x) {
    /* Popover receives its anchor dynamically via
       style="position-anchor: --popover-anchor-<id>" set by JS.
       The trigger element gets a matching
       style="anchor-name: --popover-anchor-<id>".                */

    [popover].popover-tooltip {
        /* Use the anchor assigned by JS */
        position: fixed;

        /* Remove any inline positioning JS may have written before
           the support check ran; the anchor properties take over.  */
        inset: unset;
        margin: 0;

        /* Default placement: centered above the anchor */
        position-area: top;
        position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;

        /* Small gap between anchor and tooltip */
        margin-bottom: 8px;
    }

    /* When the tooltip flips below the anchor the gap
       needs to sit on the top side instead.                       */
    [popover].popover-tooltip:popover-open {
        /* Ensures position-area animation does not fight transform */
        translate: none;
    }
}


/* --- era-filters.css --- */
/* Era-appropriate photo filters for gallery and album images */
/* Subtle 10-20% effects to hint at era without washing out photos */

/* 1978-1981: Subtle sepia hint (Soviet underground era) */
.era-filter-1978 {
    filter: sepia(0.15) contrast(0.95) saturate(0.9) brightness(0.95);
}

/* 1982-1983: Very light sepia (early recordings) */
.era-filter-1982 {
    filter: sepia(0.1) contrast(0.97) saturate(0.92);
}

/* 1984-1985: Barely-there warmth (peak underground) */
.era-filter-1984 {
    filter: sepia(0.05) contrast(0.98) saturate(0.95);
}

/* 1987: Minimal desaturation (festival era) */
.era-filter-1987 {
    filter: saturate(0.95) contrast(0.98);
}

/* 1990-1991: Very slight fade (perestroika) */
.era-filter-1990 {
    filter: saturate(0.95) brightness(0.98) contrast(0.97);
}

/* 1995-2004: Subtle warmth only (later period) */
.era-filter-1995 {
    filter: sepia(0.05) saturate(0.97);
}

/* 2011: Clean, no filter (modern era) */
.era-filter-2011 {
    filter: none;
}

/* Smooth transition for all era-filtered elements */
[class*="era-filter-"] {
    transition: filter 0.5s ease;
}

/* Hover removes filter to show original */
[class*="era-filter-"]:hover,
[class*="era-filter-"]:focus-within {
    filter: none;
}

/* Grain overlay pseudo-element for early eras (pre-1985) */
.era-grain {
    position: relative;
}

.era-grain::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
    opacity: 0.04;
    pointer-events: none;
    mix-blend-mode: overlay;
    border-radius: inherit;
    transition: opacity 0.5s ease;
}

.era-grain:hover::after {
    opacity: 0;
}


/* --- typewriter.css --- */
/* Typewriter reveal animation */
.typewriter {
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid oklch(0.82 0.14 85); /* warm amber cursor */
  animation:
    typewriter-reveal 3s steps(40, end) forwards,
    typewriter-cursor 0.75s step-end infinite;
  width: 0;
}

.typewriter.typewriter-done {
  width: 100%;
  border-right-color: transparent;
  animation: none;
}

@keyframes typewriter-reveal {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes typewriter-cursor {
  from, to { border-color: transparent; }
  50% { border-color: oklch(0.82 0.14 85); }
}

/* Multi-line text reveal (paragraph by paragraph) */
.text-reveal {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.text-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children */
.text-reveal-group > * {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.text-reveal-group.revealed > *:nth-child(1) { transition-delay: 0s; }
.text-reveal-group.revealed > *:nth-child(2) { transition-delay: 0.15s; }
.text-reveal-group.revealed > *:nth-child(3) { transition-delay: 0.3s; }
.text-reveal-group.revealed > *:nth-child(4) { transition-delay: 0.45s; }
.text-reveal-group.revealed > *:nth-child(5) { transition-delay: 0.6s; }
.text-reveal-group.revealed > * { opacity: 1; transform: translateY(0); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .typewriter { animation: none; width: 100%; border-right: none; }
  .text-reveal, .text-reveal-group > * {
    opacity: 1; transform: none; transition: none;
  }
}


/* --- cookie-consent.css --- */
/* ==============================================
   Cookie Consent Banner
   GDPR-compliant bottom bar
   ============================================== */

.cookie-consent {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--z-cookie-consent, 10000);
    background: var(--color-bg-elevated, #1a1a1f);
    border-top: 1px solid var(--color-neutral-subtle, #4b4d53);
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.5);
    padding: 0;
    transform: translateY(100%);
    opacity: 0;
    transition: transform var(--duration-standard, 300ms) var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1)),
                opacity var(--duration-standard, 300ms) var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1));
    will-change: transform, opacity;
}

.cookie-consent--visible {
    transform: translateY(0);
    opacity: 1;
}

.cookie-consent--hiding {
    transform: translateY(100%);
    opacity: 0;
}

/* Inner wrapper */
.cookie-consent__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    max-width: 1280px;
    margin: 0 auto;
    padding: 1rem 1.5rem;
}

/* Text */
.cookie-consent__text {
    flex: 1 1 auto;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--color-neutral, #b0b3bc);
    margin: 0;
}

/* Privacy link */
.cookie-consent__link {
    color: var(--color-primary-light, #ef4444);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--duration-standard, 300ms);
}

.cookie-consent__link:hover,
.cookie-consent__link:focus-visible {
    color: var(--color-primary, #dc2626);
}

/* Button group */
.cookie-consent__actions {
    display: flex;
    flex-shrink: 0;
    gap: 0.75rem;
}

/* Shared button base */
.cookie-consent__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 1.25rem;
    border: none;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--duration-standard, 300ms),
                color var(--duration-standard, 300ms),
                box-shadow var(--duration-standard, 300ms);
}

.cookie-consent__btn:focus-visible {
    outline: 2px solid var(--color-primary-light, #ef4444);
    outline-offset: 2px;
}

/* Accept All button - primary style */
.cookie-consent__btn--accept {
    background: var(--color-primary, #dc2626);
    color: #fff;
}

.cookie-consent__btn--accept:hover {
    background: var(--color-primary-hover, #b91c1c);
    box-shadow: 0 0 12px var(--color-primary-glow, rgba(220, 38, 38, 0.3));
}

/* Necessary Only button - ghost / secondary style */
.cookie-consent__btn--necessary {
    background: transparent;
    color: var(--color-neutral, #b0b3bc);
    border: 1px solid var(--color-neutral-subtle, #4b4d53);
}

.cookie-consent__btn--necessary:hover {
    background: var(--color-bg-surface, #27272a);
    color: #fff;
    border-color: var(--color-neutral-dim, #7f828a);
}

/* ==============================================
   Responsive: stack on small screens
   ============================================== */

@media (max-width: 640px) {
    .cookie-consent__inner {
        flex-direction: column;
        text-align: center;
        padding: 1rem;
        gap: 1rem;
    }

    .cookie-consent__actions {
        width: 100%;
        flex-direction: column;
        gap: 0.5rem;
    }

    .cookie-consent__btn {
        width: 100%;
    }
}

/* ==============================================
   Reduced motion support
   ============================================== */

@media (prefers-reduced-motion: reduce) {
    .cookie-consent {
        transition: none;
    }

    .cookie-consent--visible {
        transform: translateY(0);
        opacity: 1;
    }

    .cookie-consent--hiding {
        transform: translateY(100%);
        opacity: 0;
    }
}


/* --- language-switcher.css --- */
.language-switcher {
    position: relative;
    display: inline-block;
}

.lang-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 8px 12px;
    color: var(--text-primary, #ffffff);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    min-width: 60px;
}

.lang-toggle:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
}

.lang-code {
    font-weight: 600;
    font-size: 0.85em;
    letter-spacing: 0.5px;
}

.lang-chevron {
    opacity: 0.7;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.language-switcher.active .lang-chevron {
    transform: rotate(180deg);
}

.lang-label {
    font-weight: 600;
    font-size: 0.85em;
    letter-spacing: 0.5px;
    min-width: 1.5em;
}

.lang-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background: rgba(30, 30, 30, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    min-width: 140px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: var(--z-header, 1000);
}

.language-switcher.active .lang-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lang-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    color: var(--text-primary, #ffffff);
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

.lang-option:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--accent-color, #ff6b6b);
}

.lang-option.active {
    background: rgba(255, 107, 107, 0.1);
    color: var(--accent-color, #ff6b6b);
    position: relative;
}

.lang-option.active::before {
    content: '\2713';
    position: absolute;
    right: 16px;
    font-size: 0.8em;
    opacity: 0.8;
}

.lang-name {
    font-weight: 500;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .lang-toggle {
        padding: 6px 10px;
        font-size: 0.8rem;
        min-width: 70px;
    }

    .lang-dropdown {
        right: 0;
        min-width: 120px;
    }

    .lang-option {
        padding: 10px 14px;
        font-size: 0.85rem;
    }
}

/* Light theme support */
[data-theme="light"] .lang-toggle {
    background: rgba(0, 0, 0, 0.1);
    border-color: rgba(0, 0, 0, 0.2);
    color: var(--text-primary, #1a1a1a);
}

[data-theme="light"] .lang-toggle:hover {
    background: rgba(0, 0, 0, 0.2);
    border-color: rgba(0, 0, 0, 0.3);
}

[data-theme="light"] .lang-dropdown {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .lang-option {
    color: var(--text-primary, #1a1a1a);
}

[data-theme="light"] .lang-option:hover {
    background: rgba(0, 0, 0, 0.05);
}


/* --- bookmarks.css --- */
/* ============================================
   Bookmarks Component
   Client-side bookmark button + bookmarks page
   ============================================ */

/* ----------------------------------
   Bookmark Button (all sizes)
   ---------------------------------- */
.bookmark-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-secondary, rgba(255,255,255,0.1));
    border-radius: var(--radius-md, 8px);
    background: var(--bg-elevated, #27272a);
    color: var(--text-secondary, #d1d5db);
    cursor: pointer;
    font-family: var(--font-primary, inherit);
    font-size: 0.875rem;
    line-height: 1;
    transition: all var(--transition-fast, 150ms) ease;
    white-space: nowrap;
    user-select: none;
    -webkit-user-select: none;
}

.bookmark-btn:hover {
    border-color: var(--accent-red, #dc2626);
    color: var(--accent-red, #dc2626);
    background: rgba(220, 38, 38, 0.08);
}

.bookmark-btn:focus-visible {
    outline: 2px solid var(--accent-red, #dc2626);
    outline-offset: 2px;
}

.bookmark-btn--active {
    border-color: var(--accent-red, #dc2626);
    color: var(--accent-red, #dc2626);
    background: rgba(220, 38, 38, 0.12);
}

.bookmark-btn--active:hover {
    background: rgba(220, 38, 38, 0.18);
}

.bookmark-icon {
    flex-shrink: 0;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bookmark-btn--active .bookmark-icon {
    filter: drop-shadow(0 0 4px rgba(220, 38, 38, 0.5));
}

/* Pulse animation on toggle */
@keyframes bookmarkPulse {
    0% { transform: scale(1); }
    30% { transform: scale(1.3); }
    60% { transform: scale(0.9); }
    100% { transform: scale(1); }
}

.bookmark-btn--pulse .bookmark-icon {
    animation: bookmarkPulse 0.6s ease;
}

.bookmark-btn__label {
    font-weight: 500;
}

/* ----------------------------------
   Small variant (album grid cards)
   ---------------------------------- */
.bookmark-btn--small {
    padding: 0.35rem;
    border: none;
    border-radius: var(--radius-sm, 4px);
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    font-size: 0;
}

.bookmark-btn--small:hover {
    background: rgba(220, 38, 38, 0.3);
}

.bookmark-btn--small.bookmark-btn--active {
    background: rgba(220, 38, 38, 0.25);
}

/* Card overlay position (for album grid cards) */
.bookmark-btn--card-overlay {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 5;
    opacity: 0;
    transition: opacity var(--transition-fast, 150ms) ease;
}

.bookmark-btn--card-overlay.bookmark-btn--active {
    opacity: 1;
}

.album-card:hover .bookmark-btn--card-overlay,
.bento-card:hover .bookmark-btn--card-overlay,
.bookmark-btn--card-overlay:focus-visible {
    opacity: 1;
}

/* Inline variant (for sidebar etc.) */
.bookmark-btn--inline {
    padding: 0.25rem;
    border: none;
    background: transparent;
    font-size: 0;
}

/* Wrapper for positioning */
.bookmark-btn-wrapper {
    display: inline-flex;
    margin: 0.75rem 0;
}

.bookmark-btn-wrapper--article {
    margin-top: 1rem;
}

/* ----------------------------------
   Nav Badge (header)
   ---------------------------------- */
.bookmarks-nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md, 8px);
    color: var(--text-secondary, #d1d5db);
    text-decoration: none;
    transition: color var(--transition-fast, 150ms) ease, background var(--transition-fast, 150ms) ease;
}

.bookmarks-nav-link:hover {
    color: var(--accent-red, #dc2626);
    background: rgba(220, 38, 38, 0.08);
}

.bookmarks-nav-badge {
    position: absolute;
    top: 2px;
    right: 0;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--accent-red, #dc2626);
    color: #fff;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    pointer-events: none;
    animation: badgeIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes badgeIn {
    0% { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* ----------------------------------
   Toast Notification
   ---------------------------------- */
.bookmark-toast {
    position: fixed;
    bottom: 5rem;
    left: 50%;
    transform: translateX(-50%) translateY(1rem);
    padding: 0.625rem 1.25rem;
    border-radius: var(--radius-md, 8px);
    background: var(--bg-elevated, #27272a);
    border: 1px solid var(--border-secondary, rgba(255,255,255,0.1));
    color: var(--text-primary, #fff);
    font-size: 0.875rem;
    font-weight: 500;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    z-index: var(--z-notification, 10000);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.bookmark-toast--visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ----------------------------------
   Bookmarks Page
   ---------------------------------- */
.bookmarks-page {
    min-height: 60vh;
    padding-top: 2rem;
    padding-bottom: 4rem;
}

.bookmarks-page__title {
    font-size: var(--font-size-h2, clamp(1.75rem, 4vw, 3rem));
    margin-bottom: 0.5rem;
}

.bookmarks-page__subtitle {
    color: var(--text-muted, #9ca3af);
    margin-bottom: 2rem;
}

/* Toolbar (count + clear) */
.bookmarks-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-secondary, rgba(255,255,255,0.1));
}

.bookmarks-toolbar__count {
    color: var(--text-muted, #9ca3af);
    font-size: 0.875rem;
}

.bookmarks-clear-all-btn {
    padding: 0.375rem 0.75rem;
    border: 1px solid rgba(220, 38, 38, 0.3);
    border-radius: var(--radius-sm, 4px);
    background: transparent;
    color: var(--accent-red, #dc2626);
    font-size: 0.8125rem;
    cursor: pointer;
    transition: all var(--transition-fast, 150ms) ease;
}

.bookmarks-clear-all-btn:hover {
    background: rgba(220, 38, 38, 0.1);
    border-color: var(--accent-red, #dc2626);
}

/* Sections */
.bookmarks-section {
    margin-bottom: 2.5rem;
}

.bookmarks-section__title {
    font-size: var(--font-size-h3, 1.5rem);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-secondary, rgba(255,255,255,0.1));
}

/* Card Grid */
.bookmarks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

/* Individual Bookmark Card */
.bookmarks-card {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--border-secondary, rgba(255,255,255,0.1));
    border-radius: var(--radius-lg, 12px);
    background: var(--bg-tertiary, #18181b);
    color: inherit;
    text-decoration: none;
    transition: border-color var(--transition-fast, 150ms) ease, background var(--transition-fast, 150ms) ease, transform var(--transition-fast, 150ms) ease;
    overflow: hidden;
}

.bookmarks-card:hover {
    border-color: var(--accent-red, #dc2626);
    background: var(--bg-elevated, #27272a);
    transform: translateY(-2px);
}

.bookmarks-card__image {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: var(--radius-sm, 4px);
    overflow: hidden;
    background: var(--bg-secondary, #0f0f0f);
    display: flex;
    align-items: center;
    justify-content: center;
}

.bookmarks-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bookmarks-card__image--fallback {
    color: var(--text-muted, #9ca3af);
}

.bookmarks-card__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.25rem;
}

.bookmarks-card__type {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent-red, #dc2626);
}

.bookmarks-card__title {
    font-family: var(--font-primary, inherit);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-primary, #fff);
    text-transform: none;
    letter-spacing: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.bookmarks-card__date {
    font-size: 0.75rem;
    color: var(--text-muted, #9ca3af);
}

.bookmarks-card__remove {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted, #9ca3af);
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--transition-fast, 150ms) ease, color var(--transition-fast, 150ms) ease, background var(--transition-fast, 150ms) ease;
}

.bookmarks-card:hover .bookmarks-card__remove {
    opacity: 1;
}

.bookmarks-card__remove:hover {
    background: rgba(220, 38, 38, 0.15);
    color: var(--accent-red, #dc2626);
}

/* ----------------------------------
   Empty State
   ---------------------------------- */
.bookmarks-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4rem 1rem;
    min-height: 40vh;
}

.bookmarks-empty__icon {
    color: var(--text-muted, #9ca3af);
    opacity: 0.4;
    margin-bottom: 1.5rem;
}

.bookmarks-empty__title {
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
    color: var(--text-primary, #fff);
}

.bookmarks-empty__hint {
    color: var(--text-muted, #9ca3af);
    max-width: 400px;
    margin-bottom: 0.5rem;
    font-size: 0.9375rem;
    line-height: 1.6;
}

.bookmarks-empty__actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
    justify-content: center;
}

.bookmarks-empty__actions .btn {
    display: inline-flex;
    align-items: center;
    padding: 0.625rem 1.5rem;
    border-radius: var(--radius-md, 8px);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transition-fast, 150ms) ease;
}

.bookmarks-empty__actions .btn-primary {
    background: var(--accent-red, #dc2626);
    color: #fff;
    border: none;
}

.bookmarks-empty__actions .btn-primary:hover {
    background: var(--accent-hover, #b91c1c);
}

.bookmarks-empty__actions .btn-secondary {
    background: transparent;
    color: var(--text-secondary, #d1d5db);
    border: 1px solid var(--border-secondary, rgba(255,255,255,0.1));
}

.bookmarks-empty__actions .btn-secondary:hover {
    border-color: var(--text-secondary, #d1d5db);
    background: rgba(255, 255, 255, 0.05);
}

/* ----------------------------------
   Light Theme Overrides
   ---------------------------------- */
:root[data-theme="light"] .bookmark-btn {
    background: var(--bg-tertiary, #f3f4f6);
    border-color: var(--border-secondary, rgba(0,0,0,0.1));
    color: var(--text-secondary, #374151);
}

:root[data-theme="light"] .bookmark-btn:hover {
    background: rgba(220, 38, 38, 0.06);
}

:root[data-theme="light"] .bookmark-btn--small {
    background: rgba(255, 255, 255, 0.8);
}

:root[data-theme="light"] .bookmarks-card {
    background: var(--bg-secondary, #f9fafb);
    border-color: var(--border-secondary, rgba(0,0,0,0.1));
}

:root[data-theme="light"] .bookmarks-card:hover {
    background: var(--bg-elevated, #ffffff);
}

:root[data-theme="light"] .bookmark-toast {
    background: #fff;
    border-color: rgba(0, 0, 0, 0.1);
    color: var(--text-primary, #111827);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

/* ----------------------------------
   Responsive
   ---------------------------------- */
@media (max-width: 768px) {
    .bookmark-btn--normal {
        padding: 0.4rem 0.75rem;
        font-size: 0.8125rem;
    }

    .bookmarks-grid {
        grid-template-columns: 1fr;
    }

    .bookmarks-card__remove {
        opacity: 1;
    }

    .bookmark-btn--card-overlay {
        opacity: 1;
    }

    .bookmark-toast {
        bottom: 7rem; /* above mobile nav */
    }
}

@media (max-width: 480px) {
    .bookmarks-toolbar {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .bookmarks-empty {
        padding: 2rem 1rem;
    }
}

/* ============================================================
   BOOKMARKED SECTION (inline strip at top of listing pages)
   ============================================================ */

.bookmarked-section {
    margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
    padding: 1rem clamp(1rem, 2vw, 1.5rem);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    animation: bookmarkedSectionReveal 0.4s ease-out;
}

@keyframes bookmarkedSectionReveal {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.bookmarked-section__title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-secondary, #a0a0b0);
    margin: 0 0 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.bookmarked-section__title .bookmark-icon {
    width: 16px;
    height: 16px;
    color: var(--accent, #ff6b35);
    flex-shrink: 0;
}

.bookmarked-section__count {
    font-weight: 400;
    opacity: 0.7;
}

.bookmarked-section__strip {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
    padding-bottom: 0.25rem;
    -webkit-overflow-scrolling: touch;
}

.bookmarked-section__strip::-webkit-scrollbar {
    height: 4px;
}

.bookmarked-section__strip::-webkit-scrollbar-track {
    background: transparent;
}

.bookmarked-section__strip::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
}

.bookmarked-strip__item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    text-decoration: none;
    color: inherit;
    flex-shrink: 0;
    width: 80px;
    transition: transform 0.2s ease;
}

.bookmarked-strip__item:hover {
    transform: translateY(-2px);
}

.bookmarked-strip__cover {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid var(--accent, #ff6b35);
    box-shadow: 0 2px 8px rgba(255, 107, 53, 0.15);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.bookmarked-strip__item:hover .bookmarked-strip__cover {
    border-color: var(--accent-hover, #ff8a5c);
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.25);
}

.bookmarked-strip__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bookmarked-strip__cover--fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.25);
}

.bookmarked-strip__label {
    font-size: 0.7rem;
    line-height: 1.2;
    text-align: center;
    color: var(--text-secondary, #a0a0b0);
    max-width: 80px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s ease;
}

.bookmarked-strip__item:hover .bookmarked-strip__label {
    color: var(--text-primary, #e0e0f0);
}

.bookmarked-strip__remove {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: none;
    background: rgba(220, 38, 38, 0.85);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease;
    z-index: 2;
}

.bookmarked-strip__item:hover .bookmarked-strip__remove,
.bookmarked-strip__remove:focus-visible {
    opacity: 1;
    transform: scale(1);
}

.bookmarked-strip__remove:hover {
    background: rgba(239, 68, 68, 1);
}

/* Member card overlay: offset to not clash with deceased badge */
.member-card .bookmark-btn--card-overlay {
    top: auto;
    bottom: 0.5rem;
    right: 0.5rem;
}

/* Light theme */
:root[data-theme="light"] .bookmarked-section {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.08);
}

:root[data-theme="light"] .bookmarked-strip__cover {
    background: rgba(0, 0, 0, 0.04);
}

:root[data-theme="light"] .bookmarked-strip__remove {
    background: rgba(220, 38, 38, 0.9);
}

/* Mobile */
@media (max-width: 600px) {
    .bookmarked-section {
        padding: 0.75rem;
        margin-bottom: 1rem;
    }

    .bookmarked-strip__item {
        width: 64px;
    }

    .bookmarked-strip__cover {
        width: 64px;
        height: 64px;
    }

    .bookmarked-strip__label {
        max-width: 64px;
        font-size: 0.65rem;
    }
}


/* --- search-suggest.css --- */
/**
 * Search Suggest / Typeahead Dropdown Styles
 * Positioned below the search modal input.
 * Dark theme with oklch accent colors, native CSS nesting.
 * @version 1.0.0
 */

/* ============================================================
   DROPDOWN CONTAINER
   ============================================================ */

.search-suggest {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 100;
    margin-top: 0.25rem;
    max-height: 22rem;
    overflow-y: auto;
    overflow-x: hidden;
    background: oklch(0.15 0.01 260);
    border: 1px solid oklch(0.3 0.01 260);
    border-radius: var(--radius-lg, 12px);
    box-shadow: 0 12px 40px oklch(0 0 0 / 0.6);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition:
        opacity 0.15s ease,
        visibility 0.15s ease,
        transform 0.15s ease;
    scrollbar-width: thin;
    scrollbar-color: oklch(0.4 0.01 260) transparent;

    /* Open state */
    &.search-suggest--open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    /* Webkit scrollbar */
    &::-webkit-scrollbar {
        width: 6px;
    }

    &::-webkit-scrollbar-track {
        background: transparent;
    }

    &::-webkit-scrollbar-thumb {
        background: oklch(0.4 0.01 260);
        border-radius: 3px;
    }

    &::-webkit-scrollbar-thumb:hover {
        background: oklch(0.5 0.01 260);
    }
}

/* ============================================================
   GROUP HEADER
   ============================================================ */

.search-suggest__group {
    &:not(:first-child) {
        border-top: 1px solid oklch(0.25 0.01 260);
    }
}

.search-suggest__group-header {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem 0.25rem;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: oklch(0.55 0.01 260);
    user-select: none;
}

.search-suggest__group-icon {
    font-size: 0.75rem;
    line-height: 1;
}

.search-suggest__group-label {
    line-height: 1;
}

/* ============================================================
   SUGGESTION ITEM
   ============================================================ */

.search-suggest__item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    transition:
        background 0.1s ease,
        color 0.1s ease;
    color: oklch(0.85 0.01 260);
    font-size: 0.875rem;
    line-height: 1.4;
    border-radius: 0;

    /* Hover / active */
    &:hover,
    &.search-suggest__item--active {
        background: oklch(0.22 0.04 20);
        color: oklch(0.95 0 0);
    }

    /* Keyboard focus visible ring */
    &:focus-visible {
        outline: 2px solid oklch(0.65 0.2 25);
        outline-offset: -2px;
        border-radius: var(--radius-sm, 4px);
    }

    /* Last item in a group */
    &:last-child {
        margin-bottom: 0.25rem;
    }
}

.search-suggest__item-icon {
    flex-shrink: 0;
    font-size: 0.875rem;
    line-height: 1;
    width: 1.25rem;
    text-align: center;
}

.search-suggest__item-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    /* Highlighted matching text */
    & strong {
        font-weight: 700;
        color: oklch(0.65 0.2 25);
    }
}

/* Active item highlight text stays white */
.search-suggest__item--active .search-suggest__item-text strong,
.search-suggest__item:hover .search-suggest__item-text strong {
    color: oklch(0.75 0.22 25);
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    .search-suggest {
        transition: none;
    }

    .search-suggest__item {
        transition: none;
    }
}

/* ============================================================
   HIGH CONTRAST
   ============================================================ */

@media (prefers-contrast: high) {
    .search-suggest {
        border-width: 2px;
    }

    .search-suggest__item--active,
    .search-suggest__item:hover {
        outline: 2px solid currentColor;
    }
}

/* ============================================================
   LIGHT THEME
   ============================================================ */

:root[data-theme="light"] {
    & .search-suggest {
        background: oklch(0.98 0 0);
        border-color: oklch(0.85 0 0);
        box-shadow: 0 12px 40px oklch(0 0 0 / 0.15);
    }

    & .search-suggest__group-header {
        color: oklch(0.5 0 0);
    }

    & .search-suggest__group:not(:first-child) {
        border-top-color: oklch(0.9 0 0);
    }

    & .search-suggest__item {
        color: oklch(0.25 0 0);
    }

    & .search-suggest__item:hover,
    & .search-suggest__item.search-suggest__item--active {
        background: oklch(0.95 0.04 20);
        color: oklch(0.15 0 0);
    }

    & .search-suggest__item-text strong {
        color: oklch(0.45 0.2 25);
    }

    & .search-suggest__item--active .search-suggest__item-text strong,
    & .search-suggest__item:hover .search-suggest__item-text strong {
        color: oklch(0.4 0.22 25);
    }

    & .search-suggest::-webkit-scrollbar-thumb {
        background: oklch(0.75 0 0);
    }

    & .search-suggest::-webkit-scrollbar-thumb:hover {
        background: oklch(0.65 0 0);
    }
}

/* ============================================================
   MOBILE RESPONSIVE
   ============================================================ */

@media (max-width: 640px) {
    .search-suggest {
        max-height: 16rem;
        border-radius: var(--radius-md, 8px);
    }

    .search-suggest__item {
        padding: 0.625rem 0.75rem;
        font-size: 0.9375rem;
    }

    .search-suggest__group-header {
        padding: 0.5rem 0.75rem 0.375rem;
    }
}

/* ============================================================
   PRINT
   ============================================================ */

@media print {
    .search-suggest {
        display: none !important;
    }
}


/* --- date-counter.css --- */
/**
 * Date Counter Component
 * Horizontal boxes showing Years / Months / Days with digit flip animation
 * Dark theme, oklch colors, native CSS nesting
 * @version 1.0.0
 */

/* ========================================
   CONTAINER
   ======================================== */

.date-counter {
    padding: var(--space-6, 1.5rem) 0;
}

/* ========================================
   BOXES LAYOUT: 3 columns with separators
   ======================================== */

.date-counter__boxes {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4, 1rem);
}

/* ========================================
   INDIVIDUAL BOX
   ======================================== */

.date-counter__box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 6rem;
    padding: var(--space-5, 1.25rem) var(--space-6, 1.5rem);
    background: oklch(10% 0.005 260);
    border: 1px solid oklch(22% 0.01 260);
    border-radius: 0.75rem;
    text-align: center;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;

    &:hover {
        border-color: oklch(35% 0.01 260);
        box-shadow: 0 0 20px oklch(20% 0.005 260 / 0.4);
    }
}

/* ========================================
   SEPARATOR (centered dot between boxes)
   ======================================== */

.date-counter__separator {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 0.35rem;
    height: 0.35rem;
    border-radius: 50%;
    background: oklch(40% 0.01 260);
    flex-shrink: 0;
}

/* ========================================
   DIGITS: large accent number
   ======================================== */

.date-counter__digits {
    font-size: clamp(2rem, 5vw, 3.25rem);
    font-weight: 800;
    line-height: 1.1;
    color: oklch(82% 0.14 85);
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
    letter-spacing: -0.02em;
    margin-bottom: var(--space-1, 0.25rem);
    display: inline-block;
    transform-origin: center bottom;
}

/* ========================================
   DIGIT FLIP ANIMATION
   ======================================== */

@keyframes digit-flip {
    0% {
        transform: rotateX(0deg) scale(1);
        opacity: 1;
    }
    30% {
        transform: rotateX(-90deg) scale(0.9);
        opacity: 0;
    }
    50% {
        transform: rotateX(90deg) scale(0.9);
        opacity: 0;
    }
    100% {
        transform: rotateX(0deg) scale(1);
        opacity: 1;
    }
}

.date-counter__digits--flipping {
    animation: digit-flip 0.4s ease-in-out;
}

/* ========================================
   LABEL: muted text below number
   ======================================== */

.date-counter__label {
    font-size: clamp(0.7rem, 1.4vw, 0.85rem);
    color: oklch(55% 0.01 260);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: lowercase;
}

/* ========================================
   HEADER TEXT (placed by template above component)
   ======================================== */

.date-counter-header {
    text-align: center;
    font-size: clamp(0.9rem, 2vw, 1.1rem);
    color: oklch(60% 0.01 260);
    font-weight: 400;
    letter-spacing: 0.03em;
    margin-bottom: var(--space-2, 0.5rem);
}

/* ========================================
   MEMORIAL PAGE VARIANT
   Uses memorial warm amber tones
   ======================================== */

.memorial-page .date-counter__box {
    background: oklch(10% 0.015 60);
    border-color: oklch(22% 0.02 60);

    &:hover {
        border-color: oklch(35% 0.03 60);
        box-shadow: 0 0 20px oklch(20% 0.015 60 / 0.4);
    }
}

.memorial-page .date-counter__digits {
    color: var(--memorial-gold, oklch(82% 0.14 85));
}

.memorial-page .date-counter__label {
    color: var(--memorial-text-muted, oklch(55% 0.01 60));
}

.memorial-page .date-counter__separator {
    background: var(--memorial-text-muted, oklch(40% 0.01 60));
}

.memorial-page .date-counter-header {
    color: var(--memorial-text-muted, oklch(60% 0.01 60));
}

/* ========================================
   HOMEPAGE VARIANT: subtle, compact
   ======================================== */

.memorial-section .date-counter {
    padding: var(--space-4, 1rem) 0 0;
}

.memorial-section .date-counter__box {
    min-width: 4.5rem;
    padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
    background: oklch(8% 0.005 260 / 0.6);
    border-color: oklch(20% 0.01 260 / 0.5);
}

.memorial-section .date-counter__digits {
    font-size: clamp(1.5rem, 3.5vw, 2.25rem);
    color: oklch(75% 0.12 85);
}

.memorial-section .date-counter__label {
    font-size: clamp(0.65rem, 1.2vw, 0.75rem);
}

.memorial-section .date-counter-header {
    font-size: clamp(0.8rem, 1.5vw, 0.95rem);
    color: oklch(55% 0.01 260);
    margin-bottom: var(--space-1, 0.25rem);
}

/* ========================================
   RESPONSIVE: tighter on mobile
   ======================================== */

@media (max-width: 640px) {
    .date-counter__boxes {
        gap: var(--space-2, 0.5rem);
    }

    .date-counter__box {
        min-width: 4.5rem;
        padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
    }

    .date-counter__digits {
        font-size: clamp(1.5rem, 8vw, 2.25rem);
    }

    .date-counter__label {
        font-size: 0.7rem;
    }

    .date-counter__separator {
        width: 0.25rem;
        height: 0.25rem;
    }

    /* Homepage variant even more compact on mobile */
    .memorial-section .date-counter__box {
        min-width: 3.5rem;
        padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
    }

    .memorial-section .date-counter__digits {
        font-size: clamp(1.25rem, 6vw, 1.75rem);
    }
}

/* ========================================
   ACCESSIBILITY
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    .date-counter__digits--flipping {
        animation: none;
    }

    .date-counter__box {
        transition: none;
    }
}

@media (prefers-contrast: high) {
    .date-counter__box {
        border-width: 2px;
        border-color: oklch(50% 0 0);
    }

    .date-counter__digits {
        color: oklch(90% 0.14 85);
    }

    .date-counter__label {
        color: oklch(75% 0 0);
    }
}

/* ========================================
   PRINT
   ======================================== */

@media print {
    .date-counter__box {
        background: none;
        border: 1px solid #000;
    }

    .date-counter__digits {
        color: #000;
    }

    .date-counter__label {
        color: #333;
    }

    .date-counter__separator {
        background: #666;
    }
}


/* --- player-scoped.css --- */
/* =============================================================================
   Player Scoped Styles - CSS @scope isolation
   Prevents player-specific visual styles from leaking into the rest of the page.
   Progressive enhancement: Chrome 118+, Edge 118+, Safari 17.4+.
   ============================================================================= */

@scope (.smp-player) {

  /* Vinyl thumbnail */
  .smp-vinyl {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .smp-vinyl-center {
    width: 8px;
    height: 8px;
    background: #ff6b6b;
    border-radius: 50%;
  }

  /* Player controls layout */
  .smp-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
  }

  .smp-btn {
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, color 0.2s ease;
    font-size: 18px;
    position: relative;
    overflow: hidden;
  }

  /* Mobile fix: explicit SVG size matches features.css base rule */
  .smp-btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    pointer-events: none;
  }

  .smp-btn:hover {
    background: rgba(255, 255, 255, 0.14);
  }

  .smp-btn:active {
    background: rgba(255, 255, 255, 0.1);
  }

  .smp-btn-play {
    background: var(--accent, #dc2626);
    width: 52px;
    height: 52px;
    font-size: 20px;
    border-radius: 50%;
  }

  /* Crossfade button */
  .smp-btn-crossfade {
    font-size: 10px;
    letter-spacing: -1px;
    line-height: 28px;
  }

  .smp-btn-crossfade.active {
    background: linear-gradient(135deg, #ff6b6b, #ee5a24);
    color: white;
    box-shadow: 0 0 8px rgba(255, 107, 107, 0.4);
  }

  /* Progress bar */
  .smp-progress-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: var(--accent, #dc2626);
    border-radius: 4px;
    transition: width 0.1s linear;
  }

  .smp-progress-fill::after {
    content: '';
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    opacity: 0;
    transition: opacity 0.2s ease;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
  }

  .smp-progress-bar:hover .smp-progress-fill::after,
  .smp-progress-bar.dragging .smp-progress-fill::after {
    opacity: 1;
  }

} /* end @scope (.smp-player) */

/* Lyrics panel scoped to its own container */
@scope (.lyrics-panel) {

  :scope {
    position: fixed;
    z-index: 999;
    overflow-y: auto;
    padding: 2rem;
  }

  .lyrics-panel-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    color: var(--text-muted, rgba(255, 255, 255, 0.5));
    font-size: 1.5rem;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s ease, color 0.2s ease;
  }

  .lyrics-panel-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary, #fff);
  }

  .lyrics-panel-title {
    font-family: var(--font-display, 'Bebas Neue', sans-serif);
    font-size: 1.25rem;
    margin-bottom: 1rem;
    color: var(--text-primary, #fff);
    padding-right: 2rem;
  }

  .lyrics-text {
    white-space: pre-line;
    line-height: 1.8;
    color: var(--text-secondary, rgba(255, 255, 255, 0.7));
  }

  .lyrics-translation {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-muted, rgba(255, 255, 255, 0.5));
    font-style: italic;
    white-space: pre-line;
    line-height: 1.8;
  }

}


/* --- on-this-day.css --- */
/**
 * On This Day Widget Styles
 * Vintage/nostalgic card for historical band events
 * @version 1.0.0
 */

/* ========================================
   ON THIS DAY SECTION
   ======================================== */

.on-this-day-section {
    padding: var(--space-6) 0;
    background: rgba(255, 255, 255, 0.02);
}

.on-this-day-card {
    position: relative;
    max-width: 720px;
    margin: 0 auto;
    padding: var(--space-6);
    background:
        linear-gradient(135deg,
            rgba(45, 35, 25, 0.95),
            rgba(35, 28, 20, 0.9),
            rgba(50, 40, 28, 0.95));
    border: 1px solid rgba(180, 150, 100, 0.25);
    border-radius: 12px;
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(180, 150, 100, 0.1);
    overflow: hidden;
}

.on-this-day-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 28px,
            rgba(180, 150, 100, 0.03) 28px,
            rgba(180, 150, 100, 0.03) 29px
        );
    pointer-events: none;
}

/* ----------------------------------------
   HEADER
   ---------------------------------------- */

.on-this-day-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid rgba(180, 150, 100, 0.2);
    position: relative;
}

.on-this-day-icon {
    font-size: 1.5rem;
    line-height: 1;
    flex-shrink: 0;
    filter: sepia(0.5);
}

.on-this-day-label {
    font-family: 'Bebas Neue', var(--font-primary, sans-serif);
    font-size: 1.5rem;
    letter-spacing: 0.05em;
    color: rgba(220, 190, 140, 0.9);
    text-transform: uppercase;
}

.on-this-day-date {
    margin-left: auto;
    font-size: 0.875rem;
    color: rgba(180, 150, 100, 0.6);
    font-style: italic;
    white-space: nowrap;
}

/* ----------------------------------------
   EVENT LIST
   ---------------------------------------- */

.on-this-day-events {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    max-height: 320px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(180, 150, 100, 0.3) transparent;
}

.on-this-day-events::-webkit-scrollbar {
    width: 4px;
}

.on-this-day-events::-webkit-scrollbar-thumb {
    background: rgba(180, 150, 100, 0.3);
    border-radius: 4px;
}

/* ----------------------------------------
   SINGLE EVENT
   ---------------------------------------- */

.on-this-day-event {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    position: relative;
}

.on-this-day-year {
    flex-shrink: 0;
    font-family: 'Bebas Neue', var(--font-primary, sans-serif);
    font-size: 2.25rem;
    line-height: 1;
    color: var(--accent-red, #dc2626);
    text-shadow: 0 2px 8px rgba(220, 38, 38, 0.25);
    min-width: 72px;
    text-align: center;
    padding-top: 2px;
}

.on-this-day-event-body {
    flex: 1;
    min-width: 0;
}

.on-this-day-event-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: rgba(240, 230, 210, 0.95);
    margin-bottom: var(--space-1);
    line-height: 1.4;
}

.on-this-day-event-description {
    font-size: 0.9375rem;
    color: rgba(200, 180, 150, 0.7);
    line-height: 1.6;
}

.on-this-day-event-type {
    display: inline-block;
    margin-top: var(--space-2);
    padding: 2px 8px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 4px;
    background: rgba(180, 150, 100, 0.15);
    color: rgba(180, 150, 100, 0.7);
    border: 1px solid rgba(180, 150, 100, 0.2);
}

.on-this-day-event-type[data-type="album"] {
    background: rgba(59, 130, 246, 0.15);
    color: rgba(100, 160, 240, 0.9);
    border-color: rgba(59, 130, 246, 0.25);
}

.on-this-day-event-type[data-type="concert"] {
    background: rgba(16, 185, 129, 0.15);
    color: rgba(80, 200, 160, 0.9);
    border-color: rgba(16, 185, 129, 0.25);
}

.on-this-day-event-type[data-type="member"],
.on-this-day-event-type[data-type="memorial"] {
    background: rgba(220, 38, 38, 0.15);
    color: rgba(240, 100, 100, 0.9);
    border-color: rgba(220, 38, 38, 0.25);
}

.on-this-day-event-type[data-type="milestone"] {
    background: rgba(245, 158, 11, 0.15);
    color: rgba(240, 180, 60, 0.9);
    border-color: rgba(245, 158, 11, 0.25);
}

/* Separator between events */
.on-this-day-event + .on-this-day-event {
    padding-top: var(--space-4);
    border-top: 1px solid rgba(180, 150, 100, 0.1);
}

/* ----------------------------------------
   EMPTY / NEAREST STATE
   ---------------------------------------- */

.on-this-day-empty {
    text-align: center;
    padding: var(--space-4) 0;
}

.on-this-day-empty-text {
    font-size: 1rem;
    color: rgba(200, 180, 150, 0.5);
    margin-bottom: var(--space-3);
}

/* "Did you know?" fact block */
.on-this-day-fact {
    padding: var(--space-3) var(--space-4);
    background: rgba(220, 38, 38, 0.06);
    border: 1px solid rgba(220, 38, 38, 0.12);
    border-radius: 8px;
    text-align: left;
    margin-bottom: var(--space-3);
}

.on-this-day-fact-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent-red, #dc2626);
    margin-bottom: var(--space-2);
}

.on-this-day-fact-text {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: rgba(240, 230, 210, 0.85);
}

.on-this-day-nearest {
    padding: var(--space-3);
    background: rgba(180, 150, 100, 0.08);
    border: 1px solid rgba(180, 150, 100, 0.12);
    border-radius: 8px;
    text-align: left;
}

.on-this-day-nearest-label {
    font-size: 0.8125rem;
    color: rgba(180, 150, 100, 0.5);
    margin-bottom: var(--space-2);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.on-this-day-nearest-title {
    font-size: 1rem;
    font-weight: 600;
    color: rgba(240, 230, 210, 0.8);
}

/* ----------------------------------------
   LOADING STATE
   ---------------------------------------- */

.on-this-day-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-6) 0;
    color: rgba(180, 150, 100, 0.5);
    font-size: 0.9375rem;
}

.on-this-day-loading-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    background: rgba(180, 150, 100, 0.4);
    border-radius: 50%;
    animation: otd-pulse 1.4s ease-in-out infinite;
}

.on-this-day-loading-dot:nth-child(2) { animation-delay: 0.2s; }
.on-this-day-loading-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes otd-pulse {
    0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
    40% { opacity: 1; transform: scale(1); }
}

/* ----------------------------------------
   RESPONSIVE
   ---------------------------------------- */

@media (max-width: 640px) {
    .on-this-day-card {
        padding: var(--space-4);
        border-radius: 8px;
    }

    .on-this-day-header {
        flex-wrap: wrap;
    }

    .on-this-day-date {
        margin-left: 0;
        flex-basis: 100%;
        margin-top: var(--space-1);
    }

    .on-this-day-event {
        flex-direction: column;
        gap: var(--space-2);
    }

    .on-this-day-year {
        font-size: 1.75rem;
        min-width: auto;
        text-align: left;
    }

    .on-this-day-label {
        font-size: 1.25rem;
    }
}

/* ----------------------------------------
   LIGHT THEME
   ---------------------------------------- */

:root[data-theme="light"] .on-this-day-card {
    background:
        linear-gradient(135deg,
            rgba(245, 235, 220, 0.98),
            rgba(240, 228, 210, 0.95),
            rgba(248, 238, 225, 0.98));
    border-color: rgba(160, 130, 80, 0.3);
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

:root[data-theme="light"] .on-this-day-card::before {
    background:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 28px,
            rgba(140, 110, 60, 0.04) 28px,
            rgba(140, 110, 60, 0.04) 29px
        );
}

:root[data-theme="light"] .on-this-day-label {
    color: rgba(120, 90, 40, 0.9);
}

:root[data-theme="light"] .on-this-day-date {
    color: rgba(120, 90, 40, 0.5);
}

:root[data-theme="light"] .on-this-day-header {
    border-bottom-color: rgba(140, 110, 60, 0.2);
}

:root[data-theme="light"] .on-this-day-event-title {
    color: rgba(40, 30, 15, 0.95);
}

:root[data-theme="light"] .on-this-day-event-description {
    color: rgba(80, 60, 30, 0.7);
}

:root[data-theme="light"] .on-this-day-empty-text {
    color: rgba(100, 80, 40, 0.5);
}

:root[data-theme="light"] .on-this-day-fact {
    background: rgba(220, 38, 38, 0.05);
    border-color: rgba(220, 38, 38, 0.12);
}

:root[data-theme="light"] .on-this-day-fact-text {
    color: rgba(40, 30, 15, 0.85);
}

:root[data-theme="light"] .on-this-day-nearest {
    background: rgba(140, 110, 60, 0.08);
    border-color: rgba(140, 110, 60, 0.15);
}

:root[data-theme="light"] .on-this-day-nearest-title {
    color: rgba(40, 30, 15, 0.85);
}

:root[data-theme="light"] .on-this-day-event + .on-this-day-event {
    border-top-color: rgba(140, 110, 60, 0.12);
}

/* ----------------------------------------
   ACCESSIBILITY
   ---------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .on-this-day-loading-dot {
        animation: none;
        opacity: 0.6;
    }
}

@media (prefers-contrast: high) {
    .on-this-day-card {
        border-width: 2px;
    }

    .on-this-day-event-title {
        color: white;
    }
}

/* ----------------------------------------
   PRINT
   ---------------------------------------- */

@media print {
    .on-this-day-section {
        break-inside: avoid;
    }

    .on-this-day-card {
        box-shadow: none;
        border: 1px solid #ccc;
    }
}

/* === Member Initials Avatar === */
.member-initials-avatar {
    --avatar-hue: 0;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: linear-gradient(
        135deg,
        hsl(var(--avatar-hue), 45%, 25%) 0%,
        hsl(var(--avatar-hue), 55%, 18%) 100%
    );
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid hsl(var(--avatar-hue), 50%, 35%);
    position: relative;
    overflow: hidden;
}

.member-initials-avatar::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.08) 0%, transparent 60%);
    pointer-events: none;
}

.member-initials-avatar__text {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    font-weight: 700;
    color: hsl(var(--avatar-hue), 60%, 75%);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1;
    user-select: none;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* Large variant for member detail page */
.member-initials-avatar--large {
    width: 260px;
    height: 260px;
    border-width: 3px;
}

.member-initials-avatar--large .member-initials-avatar__text {
    font-size: 4.5rem;
}

/* Small variant for "other members" grid */
.member-initials-avatar--small {
    width: 120px;
    height: 120px;
}

.member-initials-avatar--small .member-initials-avatar__text {
    font-size: 2rem;
}

/* Hover glow */
.member-card:hover .member-initials-avatar,
.other-member-card:hover .member-initials-avatar {
    border-color: hsl(var(--avatar-hue), 60%, 50%);
    box-shadow: 0 0 20px hsl(var(--avatar-hue), 50%, 30%);
}

/* Light theme */
[data-theme="light"] .member-initials-avatar {
    background: linear-gradient(
        135deg,
        hsl(var(--avatar-hue), 40%, 85%) 0%,
        hsl(var(--avatar-hue), 50%, 75%) 100%
    );
    border-color: hsl(var(--avatar-hue), 45%, 65%);
}

[data-theme="light"] .member-initials-avatar__text {
    color: hsl(var(--avatar-hue), 50%, 30%);
    text-shadow: none;
}

@media (max-width: 768px) {
    .member-initials-avatar--large {
        width: 180px;
        height: 180px;
    }
    .member-initials-avatar--large .member-initials-avatar__text {
        font-size: 3.5rem;
    }
}

/* ============================================================
   SEARCH MODAL ENHANCEMENTS — Phase 93 (2026)
   Skeleton loading, type badges, empty-state tips, browse links,
   improved result count display
   ============================================================ */

/* --- Skeleton loading cards --- */
.sme-skeleton-wrap {
    padding: 8px;
}

.sme-skeleton-progress {
    height: 2px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 1px;
    overflow: hidden;
    margin: 0 4px 12px;
}

.sme-skeleton-progress-bar {
    height: 100%;
    width: 40%;
    background: linear-gradient(90deg, var(--accent-red, #dc2626), oklch(65% 0.2 25));
    border-radius: 1px;
    animation: sme-skeleton-progress 1.2s ease-in-out infinite;
}

@keyframes sme-skeleton-progress {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(350%); }
}

.sme-skeleton-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 10px;
}

.sme-skeleton-card + .sme-skeleton-card {
    margin-top: 4px;
}

.sme-skeleton-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 8px;
}

.sme-skeleton-body {
    flex: 1;
    min-width: 0;
}

.sme-skeleton-title {
    height: 14px;
    width: 65%;
    border-radius: 4px;
    margin-bottom: 8px;
}

.sme-skeleton-desc {
    height: 10px;
    width: 45%;
    border-radius: 4px;
}

.sme-skeleton-pulse {
    background: rgba(255, 255, 255, 0.06);
    background-image: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.06) 0%,
        rgba(255, 255, 255, 0.12) 40%,
        rgba(255, 255, 255, 0.06) 80%
    );
    background-size: 200% 100%;
    animation: sme-skeleton-shimmer 1.5s ease-in-out infinite;
}

@keyframes sme-skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Stagger the shimmer for each card */
.sme-skeleton-card:nth-child(2) .sme-skeleton-pulse { animation-delay: 0.1s; }
.sme-skeleton-card:nth-child(3) .sme-skeleton-pulse { animation-delay: 0.2s; }
.sme-skeleton-card:nth-child(4) .sme-skeleton-pulse { animation-delay: 0.3s; }
.sme-skeleton-card:nth-child(5) .sme-skeleton-pulse { animation-delay: 0.4s; }

/* --- Result type badge (small corner pill) --- */
.sme-result-type-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.25);
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
}

.sme-result {
    position: relative;
}

.sme-result:hover .sme-result-type-badge,
.sme-result.selected .sme-result-type-badge {
    opacity: 1;
}

.sme-result-type-badge--album { color: oklch(70% 0.18 25); }
.sme-result-type-badge--track { color: oklch(70% 0.15 150); }
.sme-result-type-badge--article { color: oklch(70% 0.12 260); }
.sme-result-type-badge--member { color: oklch(70% 0.15 50); }
.sme-result-type-badge--event { color: oklch(70% 0.15 310); }
.sme-result-type-badge--photo { color: oklch(70% 0.12 180); }

/* --- Result count with search icon --- */
.sme-results-count svg {
    display: inline-block;
    vertical-align: -2px;
    opacity: 0.5;
    margin-right: 4px;
}

/* --- Empty state: helpful tips list --- */
.sme-empty-tips {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: left;
    max-width: 300px;
}

.sme-empty-tips li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.4);
    line-height: 1.4;
}

.sme-empty-tips li svg {
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.2);
}

/* --- Browse links in empty state --- */
.sme-browse {
    margin-top: 20px;
    text-align: center;
    width: 100%;
    max-width: 340px;
}

.sme-browse-label {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.35);
    margin-bottom: 10px;
}

.sme-browse-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.sme-browse-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.82rem;
    text-decoration: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.sme-browse-link:hover,
.sme-browse-link:focus-visible {
    background: rgba(220, 38, 38, 0.12);
    border-color: var(--accent-red, #dc2626);
    color: #fff;
}

.sme-browse-link:focus-visible {
    outline: 2px solid var(--accent-red, #dc2626);
    outline-offset: 2px;
}

.sme-browse-link-icon {
    display: flex;
    color: rgba(255, 255, 255, 0.35);
}

.sme-browse-link:hover .sme-browse-link-icon {
    color: var(--accent-red, #dc2626);
}

.sme-browse-link-arrow {
    display: flex;
    opacity: 0.4;
    transition: opacity 0.15s;
}

.sme-browse-link:hover .sme-browse-link-arrow {
    opacity: 0.8;
}

/* --- Light theme overrides (Phase 93) --- */
[data-theme="light"] .sme-skeleton-progress {
    background: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .sme-skeleton-pulse {
    background: rgba(0, 0, 0, 0.06);
    background-image: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.06) 0%,
        rgba(0, 0, 0, 0.1) 40%,
        rgba(0, 0, 0, 0.06) 80%
    );
    background-size: 200% 100%;
}

[data-theme="light"] .sme-result-type-badge {
    background: rgba(0, 0, 0, 0.03);
    color: rgba(0, 0, 0, 0.3);
}

[data-theme="light"] .sme-empty-tips li {
    color: rgba(0, 0, 0, 0.45);
}

[data-theme="light"] .sme-empty-tips li svg {
    color: rgba(0, 0, 0, 0.25);
}

[data-theme="light"] .sme-browse-label {
    color: rgba(0, 0, 0, 0.4);
}

[data-theme="light"] .sme-browse-link {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.1);
    color: rgba(0, 0, 0, 0.6);
}

[data-theme="light"] .sme-browse-link:hover,
[data-theme="light"] .sme-browse-link:focus-visible {
    background: rgba(220, 38, 38, 0.08);
    border-color: var(--accent-red, #dc2626);
    color: #1a1a1a;
}

[data-theme="light"] .sme-browse-link-icon {
    color: rgba(0, 0, 0, 0.4);
}

[data-theme="light"] .sme-browse-link:hover .sme-browse-link-icon {
    color: var(--accent-red, #dc2626);
}

/* --- Responsive (mobile) --- */
@media (max-width: 640px) {
    .sme-skeleton-card {
        padding: 10px 8px;
    }

    .sme-empty-tips {
        max-width: 100%;
        padding: 0 8px;
    }

    .sme-browse-links {
        gap: 6px;
    }

    .sme-browse-link {
        font-size: 0.78rem;
        padding: 5px 10px;
    }

    .sme-result-type-badge {
        display: none;
    }
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
    .sme-skeleton-pulse {
        animation: none;
        background: rgba(255, 255, 255, 0.08);
    }

    .sme-skeleton-progress-bar {
        animation: none;
        width: 100%;
        opacity: 0.5;
    }

    .sme-browse-link,
    .sme-result-type-badge {
        transition: none;
    }
}

/* --- High contrast mode --- */
@media (forced-colors: active) {
    .sme-skeleton-pulse {
        background: Canvas;
        border: 1px solid CanvasText;
    }

    .sme-browse-link {
        border: 1px solid CanvasText;
    }

    .sme-result-type-badge {
        border: 1px solid CanvasText;
    }
}

/* === Phase 96: Newsletter Component === */

/* Honeypot hidden field — invisible to humans */
.newsletter-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
    tab-size: 0;
}

.newsletter-section {
    max-width: 520px;
    margin: 0 auto;
    padding: 1.5rem 1rem 1rem;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.newsletter-heading {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: oklch(85% 0.01 260);
    margin: 0 0 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.newsletter-heading .icon {
    color: oklch(65% 0.22 25);
}

.newsletter-form__row {
    display: flex;
    gap: 0;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    transition: box-shadow 0.3s ease;
}

.newsletter-form__row:focus-within {
    box-shadow: 0 0 0 2px oklch(65% 0.22 25), 0 2px 12px rgba(0, 0, 0, 0.35);
}

.newsletter-form__input {
    flex: 1;
    min-width: 0;
    padding: 0.65rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-right: none;
    border-radius: 6px 0 0 6px;
    background: rgba(255, 255, 255, 0.06);
    color: oklch(90% 0.01 260);
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.newsletter-form__input::placeholder {
    color: oklch(55% 0.01 260);
}

.newsletter-form__input:focus {
    border-color: oklch(65% 0.22 25);
    background: rgba(255, 255, 255, 0.09);
}

.newsletter-form__input[aria-invalid="true"] {
    border-color: oklch(60% 0.25 25);
    animation: newsletter-shake 0.4s ease;
}

.newsletter-form__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.65rem 1.25rem;
    border: none;
    border-radius: 0 6px 6px 0;
    background: oklch(50% 0.22 25);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s ease, transform 0.15s ease;
}

.newsletter-form__btn:hover:not(:disabled) {
    background: oklch(55% 0.24 25);
    transform: translateY(-1px);
}

.newsletter-form__btn:active:not(:disabled) {
    transform: translateY(0);
}

.newsletter-form__btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.newsletter-form__btn--loading {
    position: relative;
    color: transparent;
}

.newsletter-form__btn--loading::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: newsletter-spin 0.6s linear infinite;
}

.newsletter-feedback {
    min-height: 1.4em;
    margin-top: 0.5rem;
    font-size: 0.82rem;
    line-height: 1.4;
    transition: opacity 0.3s ease, color 0.3s ease;
}

.newsletter-feedback:empty {
    opacity: 0;
}

.newsletter-feedback--success {
    color: oklch(72% 0.18 145);
}

.newsletter-feedback--error {
    color: oklch(68% 0.22 25);
}

.newsletter-feedback--warning {
    color: oklch(75% 0.15 80);
}

/* Success glow on the entire form row */
.newsletter-form--success .newsletter-form__row {
    box-shadow: 0 0 12px 2px oklch(72% 0.18 145 / 0.35);
    transition: box-shadow 0.5s ease;
}

/* Shake animation for validation error */
@keyframes newsletter-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(5px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(3px); }
}

/* Spinner for loading state */
@keyframes newsletter-spin {
    to { transform: rotate(360deg); }
}

/* Light theme overrides */
[data-theme="light"] .newsletter-section {
    border-top-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .newsletter-heading {
    color: oklch(30% 0.01 260);
}

[data-theme="light"] .newsletter-form__input {
    border-color: rgba(0, 0, 0, 0.15);
    background: rgba(255, 255, 255, 0.85);
    color: oklch(20% 0.01 260);
}

[data-theme="light"] .newsletter-form__input::placeholder {
    color: oklch(50% 0.01 260);
}

[data-theme="light"] .newsletter-form__input:focus {
    border-color: oklch(50% 0.22 25);
    background: #fff;
}

[data-theme="light"] .newsletter-form__row {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .newsletter-form__row:focus-within {
    box-shadow: 0 0 0 2px oklch(55% 0.22 25), 0 2px 12px rgba(0, 0, 0, 0.12);
}

/* Responsive — stack on small screens */
@media (max-width: 480px) {
    .newsletter-section {
        padding: 1.25rem 0.5rem 0.75rem;
    }

    .newsletter-form__row {
        flex-direction: column;
        border-radius: 6px;
    }

    .newsletter-form__input {
        border-right: 1px solid rgba(255, 255, 255, 0.12);
        border-bottom: none;
        border-radius: 6px 6px 0 0;
    }

    .newsletter-form__btn {
        border-radius: 0 0 6px 6px;
        justify-content: center;
        padding: 0.75rem 1rem;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .newsletter-form__input[aria-invalid="true"] {
        animation: none;
    }

    .newsletter-form__btn--loading::after {
        animation: none;
        opacity: 0.5;
    }

    .newsletter-feedback,
    .newsletter-form__row,
    .newsletter-form__btn,
    .newsletter-form__input {
        transition: none;
    }
}

/* High contrast mode */
@media (forced-colors: active) {
    .newsletter-form__input {
        border: 1px solid CanvasText;
    }

    .newsletter-form__btn {
        border: 1px solid CanvasText;
        forced-color-adjust: none;
    }

    .newsletter-feedback--success {
        color: LinkText;
    }

    .newsletter-feedback--error {
        color: LinkText;
    }
}

/* === Phase 97: Contacts/Lyrics/Guestbook Visibility === */

/* ---- CONTACTS PAGE FIXES ---- */

/* FAQ answer: ensure it stays visible after slide-in animation */
.contacts-faq__answer {
    animation-fill-mode: forwards;
}

/* FAQ answer text: boost contrast from 0.7 to 0.85 */
.contacts-faq__answer p {
    opacity: 0.85;
}

/* Hero subtitle: boost from 0.6 opacity to more readable */
.contacts-hero__subtitle {
    opacity: 0.75;
}

/* Form hint: boost from 0.55 to readable contrast */
.contacts-page-v2 .contact-form-hint {
    opacity: 0.7;
}

/* Char count: boost from 0.4 to visible */
.contacts-page-v2 .form-group__char-count {
    opacity: 0.55;
}

/* Copy button: boost default opacity from 0.7 */
.contacts-page-v2 .contact-card__copy-btn {
    opacity: 0.85;
}

/* Archive inline links: boost from 0.7 */
.contacts-page-v2 .contact-card__inline-link {
    opacity: 0.85;
}

/* Contact card text: boost from 0.75 */
.contacts-page-v2 .contact-card__text {
    opacity: 0.85;
}

/* Form labels: boost from 0.75 to WCAG compliant */
.contacts-page-v2 .contact-form .form-group label {
    opacity: 0.85;
}

/* Ensure contacts-right-col and its children are always visible
   (override any data-reveal or scroll-animation that may hide them) */
.contacts-page-v2 .contacts-right-col,
.contacts-page-v2 .contact-form-section,
.contacts-page-v2 .contacts-faq {
    opacity: 1 !important;
    transform: none !important;
}

/* Toast: ensure it renders above the music player */
.contacts-toast {
    z-index: 10000;
}

/* ---- LYRICS PAGE FIXES ---- */

/* Coverage bar label: boost readability */
.lyrics-coverage-bar__label {
    opacity: 0.85;
    font-weight: 500;
}

/* Search hint: boost from 0.7 opacity */
.lyrics-search-hint {
    opacity: 0.85;
}

/* Search results count badge: style for visibility */
.lyrics-search-results-count {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    background: rgba(220, 38, 38, 0.12);
    border: 1px solid rgba(220, 38, 38, 0.2);
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--accent-red, #dc2626);
}

/* Track preview text: slightly more readable */
.lyrics-track__preview {
    opacity: 0.55;
}

/* Quickjump buttons: better base visibility */
.lyrics-quickjump__btn {
    opacity: 0.7;
}

.lyrics-quickjump__btn:hover {
    opacity: 1;
}

/* Quickjump label: ensure readable */
.lyrics-quickjump__label {
    opacity: 0.65;
}

/* Album year and count meta: slightly brighter */
.lyrics-album__meta {
    opacity: 0.7;
}

/* Track number: improve visibility */
.lyrics-track__number {
    opacity: 0.6;
}

/* Lyrics text highlight mark: ensure good contrast */
.lyrics-highlight {
    background: rgba(220, 38, 38, 0.25);
    color: #fff;
    padding: 0 2px;
    border-radius: 2px;
}

/* Verse chorus styling: subtle distinction */
.lyrics-verse--chorus {
    opacity: 0.85;
    font-style: italic;
}

/* Print button: match action button style */
.print-lyrics-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--border-secondary, rgba(255,255,255,0.1));
    border-radius: var(--radius-sm, 6px);
    background: transparent;
    color: var(--text-muted, #9ca3af);
    font-size: 0.8rem;
    font-family: var(--font-primary, sans-serif);
    cursor: pointer;
    transition: color 0.2s, background 0.2s, border-color 0.2s;
    white-space: nowrap;
}

.print-lyrics-btn:hover {
    color: var(--text-primary, #fff);
    background: rgba(255,255,255,0.1);
    border-color: var(--border-primary, rgba(220,38,38,0.2));
}

/* Lyrics empty state: better visibility */
.lyrics-empty p {
    opacity: 0.7;
}

/* ---- GUESTBOOK PAGE FIXES ---- */

/* Override data-reveal on guestbook sections to prevent scroll-animation
   from hiding them (they should be immediately visible) */
.guestbook-form-section[data-reveal],
.guestbook-entries-section[data-reveal] {
    animation: none !important;
    animation-timeline: initial !important;
    opacity: 1 !important;
    transform: none !important;
}

/* Guestbook: ensure community-nav tab is visible and styled */
.guestbook-page ~ .community-nav,
.community-nav {
    opacity: 1;
}

/* Guestbook entry author website link: ensure clickable appearance */
.guestbook-entry .author-details a {
    color: var(--accent-red, #dc2626);
    opacity: 0.9;
}

.guestbook-entry .author-details a:hover {
    opacity: 1;
    text-decoration: underline;
}

/* Empty CTA button: proper styling */
.guestbook-page .empty-cta-btn,
.community-empty-state .empty-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.65rem 1.25rem;
    background: var(--accent-red, #dc2626);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.2s;
    margin-top: 1rem;
}

.guestbook-page .empty-cta-btn:hover,
.community-empty-state .empty-cta-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

/* Guestbook form: ensure field-error messages are visible */
.guestbook-page .field-error {
    display: block;
    color: #f87171;
    font-size: 0.78rem;
    margin-top: 0.3rem;
}

.guestbook-page .form-group--error input,
.guestbook-page .form-group--error textarea {
    border-color: rgba(239, 68, 68, 0.5);
}

/* Guestbook entry message: boost from 0.8 to more readable */
.guestbook-entry .entry-message {
    opacity: 0.88;
}

/* Guestbook date: slightly more readable */
.guestbook-entry .entry-date-relative {
    opacity: 0.6;
}

.guestbook-entry .entry-date-full {
    opacity: 0.5;
}

/* Loading state: better visibility */
.guestbook-page .loading {
    opacity: 0.7;
}

/* Submit button success animation */
.guestbook-page .submit-btn--success {
    background: #16a34a;
    animation: gb-success-pulse 0.4s ease-out;
}

@keyframes gb-success-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.03); }
}

/* Preview toggle button: ensure visible text */
.guestbook-page .preview-toggle-btn {
    opacity: 0.8;
}

.guestbook-page .preview-toggle-btn:hover {
    opacity: 1;
}

/* ---- SHARED: data-reveal safety for all three pages ---- */

/* On pages where content should be immediately visible,
   prevent CSS scroll-driven animations from hiding content */
.contacts-page-v2 [data-reveal],
.lyrics-page [data-reveal],
.guestbook-page [data-reveal] {
    animation-name: none !important;
    animation-timeline: initial !important;
    opacity: 1 !important;
    transform: none !important;
}

/* Ensure all form inputs on these pages have visible text */
.contacts-page-v2 input,
.contacts-page-v2 textarea,
.guestbook-page input,
.guestbook-page textarea,
.guestbook-page select {
    color: inherit;
}

/* Ensure all form placeholders are visible on dark backgrounds */
.contacts-page-v2 input::placeholder,
.contacts-page-v2 textarea::placeholder,
.guestbook-page input::placeholder,
.guestbook-page textarea::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

[data-theme="light"] .contacts-page-v2 input::placeholder,
[data-theme="light"] .contacts-page-v2 textarea::placeholder,
[data-theme="light"] .guestbook-page input::placeholder,
[data-theme="light"] .guestbook-page textarea::placeholder {
    color: rgba(0, 0, 0, 0.4);
}

/* ============================================================
   NAVIGATION & HEADER POLISH (Phase 95)
   Fixes breakpoint conflicts, adds missing base styles,
   hamburger animation, scrolled header state, and
   mobile menu active link highlighting.
   ============================================================ */

/* --- 1. Fix desktop-nav / nav-toggle breakpoint conflict ---
   modern-fixes.css shows .nav-toggle at max-width:1200px,
   but components.css shows .desktop-nav at min-width:1024px.
   Between 1024-1200px both were visible. Fix: ensure desktop-nav
   wins at 1024px+ and nav-toggle stays hidden.
   ----------------------------------------------------------- */

@media (min-width: 1024px) and (max-width: 1200px) {
    .desktop-nav {
        display: flex !important;
    }

    .nav-toggle {
        display: none !important;
    }

    .nav-menu {
        display: none !important;
    }
}

/* --- 2. Header action button base styles ---
   Ensure search-btn and theme-toggle-btn render correctly
   even before features.css (async) loads.
   --------------------------------------------- */

.search-btn,
.theme-toggle-btn {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    border: none;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted, #b0b5bd);
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease, transform 0.15s ease;
    font-size: 1.1rem;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

.search-btn:hover,
.theme-toggle-btn:hover {
    color: var(--text-primary, #ffffff);
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
}

.search-btn:active,
.theme-toggle-btn:active {
    transform: translateY(0) scale(0.95);
}

[data-theme="light"] .search-btn,
[data-theme="light"] .theme-toggle-btn {
    color: var(--text-muted, #6b7280);
    background: rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .search-btn:hover,
[data-theme="light"] .theme-toggle-btn:hover {
    color: var(--text-primary, #111827);
    background: rgba(0, 0, 0, 0.08);
}

/* --- 3. Hamburger-to-X animation ---
   When the nav-toggle has .active class, animate
   the three lines into an X shape.
   ---------------------------------------- */

.nav-toggle .toggle-line {
    transition: transform 0.3s ease, opacity 0.2s ease;
    transform-origin: center;
}

.nav-toggle.active .toggle-line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.nav-toggle.active .toggle-line:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.nav-toggle.active .toggle-line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* --- 4. Scrolled header state ---
   Tighter padding and stronger backdrop blur when scrolled past hero.
   ----------------------------------------------------------------- */

.site-header.scrolled {
    background: rgba(10, 10, 10, 0.98);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
}

.site-header.scrolled .site-navbar {
    padding-block: 0.5rem;
}

[data-theme="light"] .site-header.scrolled {
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
}

/* Smooth padding transition for header shrink/grow */
.site-navbar {
    transition: padding 0.25s ease;
}

/* --- 5. Mobile menu active link highlighting ---
   In the hamburger dropdown, highlight the current page link
   with accent color and a left border indicator.
   ---------------------------------------------------------- */

@media (max-width: 1023px) {
    .nav-menu .nav-link.active,
    .nav-menu .nav-link[aria-current="page"] {
        color: var(--accent-red, #dc2626) !important;
        opacity: 1 !important;
        background: rgba(220, 38, 38, 0.08);
        border-left: 3px solid var(--accent-red, #dc2626);
        padding-left: calc(1rem - 3px);
        font-weight: 600;
    }
}

/* --- 6. Mobile menu slide-in animation ---
   Smoother entrance for the dropdown.
   ----------------------------------------- */

@media (max-width: 1200px) {
    .nav-menu {
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                    opacity 0.25s ease,
                    visibility 0.3s ease;
    }

    .nav-menu.active {
        animation: nav-slide-down 0.3s ease both;
    }
}

@keyframes nav-slide-down {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- 7. Breadcrumb integration with sticky header ---
   Ensure breadcrumbs clear the fixed header properly
   on all pages, not just on pages that set padding-top.
   ----------------------------------------------------- */

.breadcrumb + .container,
.breadcrumb + main,
.breadcrumb + .page-content {
    margin-top: 0.5rem;
}

/* --- 8. Desktop nav responsive refinements ---
   Ensure nav links don't overflow at smaller desktop widths.
   Extra specificity to beat modern-fixes Phase 78 rules.
   --------------------------------------------------------- */

@media (min-width: 1024px) and (max-width: 1100px) {
    .desktop-nav {
        gap: 0.125rem;
    }

    .desktop-nav__link {
        font-size: 0.625rem;
        letter-spacing: 0.02em;
    }
}

/* --- 9. Bottom nav "More" button active state ---
   When the hamburger menu is open via the bottom nav
   More button, show it as actively selected.
   ------------------------------------------------- */

.bottom-nav-item#bottom-nav-more[aria-expanded="true"] {
    color: var(--accent-red, #dc2626);
}

.bottom-nav-item#bottom-nav-more[aria-expanded="true"] .bottom-nav-icon {
    transform: scale(1.1);
}

/* --- 10. Language switcher polish ---
   Ensure dropdown arrow rotates on open.
   --------------------------------------- */

.language-switcher.active .lang-toggle {
    background: rgba(255, 255, 255, 0.1);
}

/* --- 11. Header hide/show transition smoothing ---
   Ensure the hide-on-scroll-down uses a smooth curve.
   --------------------------------------------------- */

.site-header {
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                background-color 0.3s ease,
                box-shadow 0.3s ease;
}

/* --- 12. Print: hide all navigation chrome --- */

@media print {
    .site-header,
    .bottom-nav-mobile,
    .nav-toggle,
    .search-btn,
    .theme-toggle-btn {
        display: none !important;
    }

    .breadcrumb {
        padding-block-start: 0;
    }
}

/* ============================================================
   Phase 98: Contacts + Lyrics + Guestbook — cascade-safe
   contrast overrides.

   modern-fixes.css loads last and re-declares lower opacities
   for several elements (hero subtitle 0.6, FAQ answer 0.7,
   guestbook subtitle 0.7). These !important rules guarantee
   the higher contrast values win regardless of load order.
   ============================================================ */

/* --- CONTACTS --- */

/* Hero subtitle: modern-fixes.css sets 0.6 — boost to 0.75 for WCAG */
.contacts-hero__subtitle {
    opacity: 0.75 !important;
}

/* FAQ answer paragraph: modern-fixes.css sets 0.7 — boost to 0.85 */
.contacts-faq__answer p {
    opacity: 0.85 !important;
}

/* FAQ question chevron: default 0.4 is hard to see — boost to 0.55 */
.contacts-faq__question::after {
    opacity: 0.55 !important;
}

/* FAQ question chevron when open: stays readable */
.contacts-faq__item[open] > .contacts-faq__question::after {
    opacity: 0.8 !important;
}

/* Contact card description text: modern-fixes.css leaves at 0.75 */
.contact-card__text {
    opacity: 0.85 !important;
}

/* Contact form hint below heading */
.contacts-page-v2 .contact-form-hint {
    opacity: 0.7 !important;
}

/* --- LYRICS --- */

/* Coverage bar label: features.css uses --text-muted which can be low contrast */
.lyrics-coverage-bar__label {
    opacity: 0.85 !important;
    font-weight: 500;
}

/* Album metadata (year, track count): boost from default 0.6 */
.lyrics-album__meta {
    opacity: 0.7 !important;
}

/* Track number in accordion row */
.lyrics-track__number {
    opacity: 0.6 !important;
}

/* Quick-jump sidebar label */
.lyrics-quickjump__label {
    opacity: 0.65 !important;
}

/* Search hint text below search bar */
.lyrics-search-hint {
    opacity: 0.75 !important;
}

/* Lyrics hero stat values: ensure they are never hidden by animations */
.lyrics-hero__stat-value,
.lyrics-hero__stat-label,
.lyrics-hero__stat-divider {
    opacity: 1 !important;
}

/* --- GUESTBOOK --- */

/* Guestbook subtitle: inline <style> sets 0.7 — boost to 0.8 */
.guestbook-page-header p {
    opacity: 0.8 !important;
}

/* Entry animation: ensure entries are never stuck at opacity 0
   if gb-fadeIn keyframe gets interrupted or delayed */
.guestbook-entry {
    opacity: 1;
}

/* Entry message text: inline style 0.8 is borderline — keep at 0.88 */
.guestbook-entry .entry-message {
    opacity: 0.88 !important;
}

/* Relative date and full date on entries */
.guestbook-entry .entry-date-relative {
    opacity: 0.6 !important;
}

.guestbook-entry .entry-date-full {
    opacity: 0.55 !important;
}

/* Character counter remaining: inline style sets 0.6 — keep readable */
.guestbook-page .char-counter {
    opacity: 0.7 !important;
}

/* Preview toggle button */
.guestbook-page .preview-toggle-btn {
    opacity: 0.8 !important;
}

/* Loading state in entries */
.guestbook-page .loading {
    opacity: 0.7 !important;
}

/* --- SHARED: form placeholders on all three pages --- */

/* Ensure placeholders are visible on dark backgrounds */
.contacts-page-v2 input::placeholder,
.contacts-page-v2 textarea::placeholder,
.guestbook-page input::placeholder,
.guestbook-page textarea::placeholder,
.lyrics-search-input::placeholder {
    opacity: 1 !important;
    color: rgba(255, 255, 255, 0.35);
}

[data-theme="light"] .contacts-page-v2 input::placeholder,
[data-theme="light"] .contacts-page-v2 textarea::placeholder,
[data-theme="light"] .guestbook-page input::placeholder,
[data-theme="light"] .guestbook-page textarea::placeholder,
[data-theme="light"] .lyrics-search-input::placeholder {
    color: rgba(0, 0, 0, 0.4);
}

/* --- Articles: collapse empty card excerpts (no margin/height when text is absent) --- */
.card-excerpt:empty {
    display: none;
}