:root {
    --font-base: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-display: "Space Grotesk", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --radius-lg: 20px;
    --radius-md: 14px;
    --radius-sm: 8px;
    --radius-pill: 999px;
    --transition: 180ms ease;
    color-scheme: dark light;
}

body[data-theme="dark"] {
    --bg-body: #060606;
    --bg-panel: #0f0f0f;
    --bg-elevated: #131313;
    --bg-muted: #1e1e1e;
    --bg-strong: #1b1b1b;
    --border-strong: #ffffff;
    --border-subtle: rgba(255, 255, 255, 0.2);
    --border-muted: rgba(255, 255, 255, 0.12);
    --text-primary: #f5f5f5;
    --text-secondary: rgba(240, 240, 240, 0.76);
    --text-muted: rgba(240, 240, 240, 0.54);
    --accent: #f7ff4a;
    --accent-strong: #ff5c8a;
    --shadow-hard: drop-shadow(6px 8px 0 rgba(255, 255, 255, 0.08));
    /* make sure small control icons are visible in dark mode */
    /* SVGs using currentColor will pick this up */
    --control-icon-color: var(--text-primary);
}

/* Ensure history/search buttons are visible in dark mode */
body[data-theme="dark"] .history-button,
body[data-theme="dark"] .history-popup__close,
body[data-theme="dark"] .history-popup__clear {
    color: var(--text-primary) !important;
}

body[data-theme="dark"] .history-button svg {
    fill: var(--text-primary) !important;
}

body[data-theme="light"] {
    --bg-body: #fff8e7;
    --bg-panel: #ffffff;
    --bg-elevated: #f2f0eb;
    --bg-muted: #f0ede8;
    --bg-strong: #fefefe;
    --border-strong: #111111;
    --border-subtle: rgba(0, 0, 0, 0.24);
    --border-muted: rgba(0, 0, 0, 0.12);
    --text-primary: #111111;
    --text-secondary: rgba(17, 17, 17, 0.75);
    --text-muted: rgba(17, 17, 17, 0.5);
    --accent: #72bcd4;
    --accent-strong: #ff2d55;
    --shadow-hard: drop-shadow(6px 8px 0 rgba(0, 0, 0, 0.12));
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-base);
    background: var(--bg-body);
    color: var(--text-primary);
    transition: background-color var(--transition), color var(--transition);
    /* Prevent horizontal scrolling on mobile */
    overflow-x: hidden;
    width: 100%;
    /* Better text rendering on mobile */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Improve touch scrolling on iOS */
    -webkit-overflow-scrolling: touch;
}

a {
    color: inherit;
}

.page-shell {
    min-height: 100vh;
    width: 100%;
    max-width: 100vw;
    margin: 0;
    padding: clamp(0.75rem, 4vw, 3rem) clamp(0.5rem, 4vw, 3rem) clamp(1rem, 4vw, 2.6rem);
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 3vw, 2.2rem);
    border-radius: clamp(8px, 6vw, 44px);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.12));
    box-shadow:
        clamp(6px, 3vw, 22px) clamp(6px, 3vw, 22px) clamp(12px, 6vw, 48px) rgba(0, 0, 0, 0.28),
        clamp(-5px, -2vw, -18px) clamp(-5px, -2vw, -18px) clamp(10px, 5vw, 40px) rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    box-sizing: border-box;
}

/* Mobile-first responsive adjustments */
@media (max-width: 480px) {
    .page-shell {
        padding: 0.5rem 0.5rem 1rem;
        border-radius: 8px;
        gap: 1rem;
    }
}

.hero {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    text-align: left;
    margin-bottom: 0.6rem;
}

/* Mobile hero adjustments */
@media (max-width: 640px) {
    .hero {
        gap: 0.8rem;
        margin-bottom: 0.4rem;
    }
}

.hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.9rem;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: var(--bg-muted);
    border: 2px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    font-weight: 600;
}

.hero__title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 8vw, 4.2rem);
    margin: 0;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    word-break: break-word;
    hyphens: auto;
}

/* Better mobile title sizing */
@media (max-width: 480px) {
    .hero__title {
        font-size: clamp(1.8rem, 10vw, 2.5rem);
        line-height: 1.2;
    }
}

.hero__subtitle {
    max-width: 640px;
    margin: 0;
    color: var(--text-secondary);
    font-size: 1.05rem;
    line-height: 1.6;
}

.theme-toggle {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    border: 2px solid var(--border-strong);
    background: linear-gradient(145deg, var(--bg-panel), var(--bg-elevated));
    color: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition), transform var(--transition);
    filter: var(--shadow-hard);
}

.theme-toggle:hover {
    transform: translate(-2px, -2px);
}

.theme-toggle__icon {
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 2px var(--border-strong) inset;
}

.theme-toggle__label {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.content {
    display: flex;
    flex-direction: column;
    gap: 1.8rem;
}

.controls {
    display: grid;
    gap: clamp(1rem, 2vw, 1.5rem);
    padding: clamp(0.8rem, 3vw, 1.8rem);
    border-radius: var(--radius-lg);
    border: 2px solid var(--border-strong);
    background: var(--bg-panel);
    filter: var(--shadow-hard);
    grid-template-columns: 1fr;
    align-items: start;
}

/* Responsive grid for larger screens */
@media (min-width: 768px) {
    .controls {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        align-items: center;
    }
}

/* Mobile controls adjustments */
@media (max-width: 480px) {
    .controls {
        padding: 0.8rem;
        gap: 1rem;
        border-radius: var(--radius-md);
    }
}

/* Sort group placed under the search field, left-aligned */
.control-group--sort {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
}

/* Desktop layout adjustments */
@media (min-width: 768px) {
    .control-group--sort {
        transform: translateY(2rem);
        will-change: transform;
    }
    
    .controls > .control-group:first-child {
        margin-top: -4.3rem;
    }
}

/* Mobile layout - no transforms needed */
@media (max-width: 767px) {
    .control-group--sort {
        width: 100%;
        transform: none;
    }
    
    .controls > .control-group:first-child {
        margin-top: 0;
    }
}

.control-group {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    align-items: flex-start;
    width: 100%;
}

/* Mobile control group adjustments */
@media (max-width: 767px) {
    .controls {
        align-items: start;
    }
    .control-group {
        align-items: stretch;
    }
}

.control-label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    font-weight: 600;
}

.control-field {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 0.85rem;
    border: 2px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
    width: 100%;
    min-height: 44px; /* Ensure good touch target on mobile */
}

/* Mobile control field adjustments */
@media (max-width: 480px) {
    .control-field {
        padding: 0.6rem 0.7rem;
        gap: 0.5rem;
    }
}

.control-field svg {
    width: 1.1rem;
    height: 1.1rem;
    fill: var(--text-muted);
}

.control-field input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-size: 1rem;
    color: inherit;
}

.control-field input::placeholder {
    color: var(--text-muted);
}

.history-button {
    appearance: none;
    border: none;
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(2.25rem, 6vw, 2.75rem);
    height: clamp(2.25rem, 6vw, 2.75rem);
    border-radius: var(--radius-sm);
    color: inherit;
    transition: transform var(--transition);
    /* Better touch target for mobile */
    min-width: 44px;
    min-height: 44px;
}

.history-button svg {
    width: 1.1rem;
    height: 1.1rem;
    fill: currentColor;
}

.history-button:hover {
    transform: translateY(-2px);
}

.pill-toggle {
    display: inline-flex;
    background: var(--bg-elevated);
    border: 2px solid var(--border-strong);
    border-radius: var(--radius-md);
    overflow: hidden;
    /* shrink to fit content and don't stretch the grid cell */
    align-self: start;
    width: max-content;
    max-width: 100%;
}

.pill-toggle__option {
    appearance: none;
    border: none;
    background: transparent;
    padding: 0.7rem 1.1rem;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
    color: var(--text-secondary);
}

.pill-toggle__option.is-active {
    background: var(--accent);
    color: #111;
}

.control-group--actions {
    justify-self: stretch;
}

.preset-feeds {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    width: 100%;
    margin-bottom: 1rem;
}

/* Mobile preset feeds - stack vertically for better touch targets */
@media (max-width: 480px) {
    .preset-feeds {
        flex-direction: column;
        gap: 0.6rem;
    }
}

.preset-feed-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.45rem 0.9rem;
    border-radius: var(--radius-pill);
    border: 2px solid var(--border-strong);
    background: var(--bg-elevated);
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.75rem;
    transition: all var(--transition);
    flex: 0 0 auto;
    min-height: 44px; /* Better touch target */
}

/* Mobile preset feed buttons */
@media (max-width: 480px) {
    .preset-feed-button {
        width: 100%;
        justify-content: flex-start;
        padding: 0.8rem 1rem;
        font-size: 0.8rem;
        border-radius: var(--radius-md);
    }
}

.preset-feed-button:hover {
    transform: translate(-2px, -2px);
    border-color: var(--accent);
}

.preset-feed-button.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: #111;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.add-feed {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    width: 100%; /* ensure Add feed content aligns with other controls */
}

.add-feed__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    border: 2px solid var(--border-strong);
    background: var(--bg-elevated);
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: transform var(--transition);
}

.add-feed__toggle svg {
    width: 1.1rem;
    height: 1.1rem;
    fill: currentColor;
}

.add-feed__toggle:hover {
    transform: translate(-2px, -2px);
}

.add-feed__form {
    display: grid;
    gap: 0.8rem;
    padding: 1rem;
    border-radius: var(--radius-md);
    border: 2px solid var(--border-strong);
    background: var(--bg-elevated);
    opacity: 0;
    transform: translateY(-10px) scale(0.96);
    pointer-events: none;
    transition:
        opacity 200ms cubic-bezier(0.3, 0.8, 0.3, 1),
        transform 220ms cubic-bezier(0.3, 0.8, 0.3, 1);
    will-change: transform, opacity;
}

.add-feed__form.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.add-feed__form input {
    padding: 0.7rem 0.8rem;
    border-radius: var(--radius-sm);
    border: 2px solid var(--border-strong);
    background: var(--bg-panel);
    color: inherit;
    font-size: 0.95rem;
}

.add-feed__form input:focus {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.add-feed__actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.add-feed__submit,
.add-feed__cancel {
    padding: 0.65rem 1rem;
    border-radius: var(--radius-sm);
    border: 2px solid var(--border-strong);
    background: transparent;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-primary);
}

.add-feed__submit {
    background: var(--accent);
    border-color: var(--border-strong);
    color: #111;
}

.add-feed__cancel {
    color: var(--text-muted);
}

.add-feed__hint {
    margin: 0;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    text-transform: uppercase;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.layout {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.feed-panel {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    padding: 1.1rem 1.2rem;
    border-radius: var(--radius-md);
    border: 2px solid var(--border-strong);
    background: var(--bg-panel);
}

/* Mobile meta section */
@media (max-width: 640px) {
    .meta {
        padding: 0.8rem 1rem;
        gap: 0.8rem;
        flex-direction: column;
        align-items: flex-start;
    }
}

.meta__status {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
}

.meta__sources {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.source-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.7rem;
    border-radius: var(--radius-sm);
    border: 2px solid var(--border-strong);
    background: var(--bg-elevated);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition:
        color var(--transition),
        background var(--transition),
        transform var(--transition);
}

.source-pill:hover {
    transform: translateY(-1px);
    color: var(--accent);
    border-color: var(--accent);
}

.source-pill.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: #111;
}

body[data-theme="light"] .source-pill {
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--bg-panel) 85%, transparent);
}

body[data-theme="light"] .source-pill.is-active {
    color: #111111;
}

.meta__timestamp {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.refresh-button {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1rem;
    border-radius: var(--radius-sm);
    border: 2px solid var(--border-strong);
    background: var(--accent-strong);
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: transform var(--transition);
    min-height: 44px; /* Better touch target */
}

/* Mobile refresh button */
@media (max-width: 640px) {
    .refresh-button {
        margin-left: 0;
        width: 100%;
        justify-content: center;
    }
}

.refresh-button svg {
    width: 1rem;
    height: 1rem;
    fill: currentColor;
}

.refresh-button:hover {
    transform: translateY(-2px);
}

.panels {
    display: block;
    position: relative;
    padding-top: 0;
}

.panel {
    --panel-progress: 0;
    --panel-grid-progress: 0;
    position: relative;
    min-height: 0;
    border-radius: calc(var(--radius-lg) + 10px);
    border: 2px solid #000;
    background: linear-gradient(145deg, var(--bg-panel), var(--bg-elevated));
    padding: clamp(1rem, 5vw, 4rem);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
    box-shadow:
        clamp(12px, 3vw, 24px) clamp(12px, 3vw, 24px) clamp(30px, 6vw, 60px) rgba(0, 0, 0, 0.32),
        clamp(-9px, -2vw, -18px) clamp(-9px, -2vw, -18px) clamp(27px, 5vw, 55px) rgba(255, 255, 255, 0.06);
    overflow: visible;
}

/* Mobile panel adjustments */
@media (max-width: 640px) {
    .panel {
        padding: 1rem;
        gap: 1rem;
        margin-bottom: 1.5rem;
        border-radius: var(--radius-lg);
    }
}

.panel::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), transparent 60%);
    opacity: 0;
    transition: opacity 300ms ease;
    pointer-events: none;
}

.panel.is-active {
    border-color: var(--accent);
    box-shadow: 0 60px 180px rgba(0, 0, 0, 0.26);
}

.panel.is-active::after {
    opacity: 1;
}

.panel__header {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem;
    position: sticky;
    top: clamp(0.8rem, 4vh, 2rem);
    z-index: 2;
    pointer-events: auto;
    padding-bottom: 0.6rem;
    margin-bottom: 0.6rem;
    background: transparent;
}

/* Mobile panel header */
@media (max-width: 640px) {
    .panel__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        position: static; /* Remove sticky on mobile for better UX */
    }
}

.panel__header-text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    flex: 1 1 auto;
}

.panel__header-actions {
    display: flex;
    flex-direction: row;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.4rem;
    align-self: flex-end;
}

.panel__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-sm);
    border: 2px solid var(--border-strong);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.7rem;
    color: color-mix(in srgb, var(--text-muted) 60%, var(--accent) 40%);
    background: linear-gradient(
        145deg,
        color-mix(in srgb, var(--bg-panel) 82%, transparent),
        color-mix(in srgb, var(--accent) 10%, transparent)
    );
    transform: translateY(calc(-6px * (1 - var(--panel-progress))));
    opacity: clamp(0.2, 0.85 - var(--panel-progress), 0.9);
}

.panel__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 6vw, 4.3rem);
    letter-spacing: -0.01em;
    line-height: 1.1;
    transform-origin: top left;
    transform: scale(var(--panel-title-scale, calc(1 + (1 - var(--panel-progress)) * 1.2))) translateZ(0);
    transition:
        transform 220ms cubic-bezier(0.24, 0.9, 0.22, 1),
        letter-spacing 200ms ease,
        max-height 200ms ease;
    letter-spacing: calc(-0.016em - (1 - var(--panel-progress)) * 0.04em);
    max-height: clamp(3rem, calc(3.4rem + 7vh), 10.6rem);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    word-break: break-word;
    hyphens: auto;
    text-wrap: balance;
    background-image: linear-gradient(
        120deg,
        color-mix(in srgb, var(--bg-panel) 10%, var(--accent)) 0%,
        color-mix(in srgb, var(--bg-panel) 55%, var(--text-primary)) 45%,
        color-mix(in srgb, var(--bg-panel) 15%, var(--accent-strong)) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    mix-blend-mode: screen;
    position: relative;
    isolation: isolate;
    opacity: clamp(0.25, 1.05 - var(--panel-progress), 0.9);
}

/* Mobile panel title */
@media (max-width: 640px) {
    .panel__title {
        font-size: clamp(1.3rem, 8vw, 2.5rem);
        line-height: 1.2;
        -webkit-line-clamp: 5;
        max-height: clamp(2.5rem, calc(2rem + 5vh), 6rem);
    }
}

.panel__title::after {
    content: "";
    position: absolute;
    inset: 0 0 -0.15rem;
    background: rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(6px);
    mix-blend-mode: soft-light;
    opacity: clamp(0, var(--panel-progress), 0.78);
    pointer-events: none;
    z-index: -1;
    transition: opacity 180ms ease;
}

body[data-theme="light"] .panel__title {
    background-image: none;
    color: var(--text-primary);
    mix-blend-mode: normal;
    opacity: clamp(0.3, 1 - (var(--panel-progress) * 0.6), 0.92);
}

body[data-theme="light"] .panel__title::after {
    background: rgba(255, 255, 255, 0.28);
    mix-blend-mode: multiply;
}

body[data-theme="light"] .panel__eyebrow {
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--bg-panel) 60%, transparent);
}

.panel__audio-button {
    border-radius: var(--radius-md);
    border: 1.6px solid color-mix(in srgb, var(--border-strong) 60%, var(--accent) 40%);
    padding: 0.35rem 1.2rem;
    font-family: var(--font-display);
    font-size: clamp(1rem, 2.4vw, 2rem);
    font-weight: 550;
    letter-spacing: -0.01em;
    background: color-mix(in srgb, var(--accent) 18%, var(--bg-panel) 82%);
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
    line-height: 1.08;
    transition:
        background 160ms ease,
        color 160ms ease,
        border-color 160ms ease,
        transform 160ms ease,
        box-shadow 160ms ease;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
    min-height: 44px; /* Better touch target */
}

/* Mobile audio button */
@media (max-width: 640px) {
    .panel__audio-button {
        width: 100%;
        justify-content: center;
        padding: 0.8rem 1rem;
        font-size: 1rem;
    }
}

.panel__audio-button:is(:hover, :focus-visible) {
    background: color-mix(in srgb, var(--accent) 58%, var(--bg-panel) 42%);
    color: var(--bg-body);
    transform: translateY(-2px);
}

.panel__audio-button:disabled {
    cursor: wait;
    opacity: 0.45;
    background: color-mix(in srgb, var(--bg-panel) 94%, var(--accent) 6%);
    color: var(--text-muted);
    transform: none;
    box-shadow: none;
}

.panel__audio-button.is-ready {
    border-color: var(--accent);
}

.panel__audio-button.is-playing {
    background: var(--accent);
    color: var(--bg-page);
    box-shadow: 0 22px 36px rgba(0, 0, 0, 0.28);
}

.panel__audio-button.is-error {
    border-color: color-mix(in srgb, #ff7a7a 55%, var(--accent-strong) 45%);
    color: color-mix(in srgb, var(--text-primary) 70%, #ff7a7a 30%);
}

.has-active-audio-player .panel__audio-button {
    display: none !important;
}

.panel--loading {
    opacity: 0.7;
    transform: translateY(0);
}

.panel--loading .card {
    opacity: 1 !important;
    transform: none !important;
    clip-path: inset(0 round var(--radius-md)) !important;
}

.panel__grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(220px, auto);
    grid-auto-flow: row;
    align-content: stretch;
    align-items: stretch;
    flex: 1 1 auto;
    min-height: 0;
    opacity: var(--panel-grid-progress);
    transform: translateY(calc(36px * (1 - var(--panel-grid-progress))));
    transition:
        opacity 220ms ease,
        transform 260ms cubic-bezier(0.2, 0.9, 0.2, 1);
    pointer-events: none;
}

.panel__grid .card {
    height: 100%;
    grid-column: auto;
    grid-row: auto;
}

.panel__grid--single {
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(260px, auto);
}

.card {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-md);
    border: 2px solid var(--border-strong);
    background: var(--bg-elevated);
    overflow: hidden;
    will-change: transform, opacity;
    transition:
        transform 240ms cubic-bezier(0.2, 0.9, 0.2, 1),
        opacity 240ms ease,
        border-color 160ms ease,
        clip-path 260ms cubic-bezier(0.2, 0.9, 0.2, 1);
    height: 100%;
    clip-path: inset(0 round var(--radius-md));
}

.panel .card {
    transition-delay: calc(var(--card-order-index, 0) * 35ms);
}

.panel.panel--grid-ready .panel__grid,
.panel.panel--grid-ready .card {
    pointer-events: auto;
}

.floating-heading {
    position: fixed;
    top: clamp(0.6rem, 2vh, 1.6rem);
    right: clamp(0.8rem, 3vw, 2.8rem);
    padding: 0.55rem 0.8rem;
    border-radius: var(--radius-sm);
    border: 2px solid var(--border-strong);
    background: color-mix(in srgb, var(--bg-body) 65%, transparent);
    box-shadow: 12px 12px 30px rgba(0, 0, 0, 0.28);
    font-family: var(--font-display);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-6px);
    transition:
        opacity 160ms ease,
        transform 180ms ease;
}

.floating-heading:not([hidden]) {
    opacity: 0.92;
    transform: translateY(0);
}

body[data-theme="light"] .floating-heading {
    background: color-mix(in srgb, var(--bg-body) 85%, transparent);
    color: var(--text-primary);
    mix-blend-mode: normal;
}

.card:not(.skeleton) {
    opacity: 0;
    transform: translateY(40px) scale(0.95);
    border-radius: calc(var(--radius-lg) + 8px);
    clip-path: inset(6% round calc(var(--radius-lg) + 8px));
}

.card.is-visible:not(.skeleton) {
    opacity: 1;
    transform: translateY(0) scale(1);
    border-radius: var(--radius-md);
    clip-path: inset(0 round var(--radius-md));
    animation: cardMorphIn 520ms cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

@keyframes cardMorphIn {
    0% {
        clip-path: inset(12% round calc(var(--radius-lg) + 12px));
    }
    60% {
        clip-path: inset(0% round calc(var(--radius-lg) + 4px));
    }
    100% {
        clip-path: inset(0 round var(--radius-md));
    }
}

.card:hover {
    transform: translate(-3px, -3px);
    border-color: var(--accent);
}

.card--feature .card__media {
    aspect-ratio: 16 / 9;
}

.card--feature .card__title {
    font-size: clamp(1.4rem, 2vw, 1.8rem);
}

.card--spotlight .card__media {
    aspect-ratio: 4 / 3;
}

.card--spotlight .card__title {
    font-size: clamp(1.15rem, 1.6vw, 1.4rem);
}

@media (min-width: 640px) {
    .panel__grid {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        grid-auto-rows: minmax(190px, auto);
        grid-auto-flow: dense;
    }

    .panel__grid--single {
        grid-template-columns: minmax(0, 1fr);
        grid-auto-rows: minmax(300px, auto);
    }

    .panel__grid--single .card {
        grid-column: auto;
        grid-row: auto;
    }

    .panel__header {
        top: clamp(1rem, 3.8vh, 2.6rem);
    }
}

@media (min-width: 960px) {
    .panel__grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        grid-auto-rows: minmax(200px, auto);
    }

    .panel__grid .card {
        grid-column: span var(--card-col-span, 2);
        grid-row: span var(--card-row-span, 1);
    }

    .panel__grid--single {
        grid-template-columns: minmax(0, 1fr);
        grid-auto-rows: minmax(320px, auto);
    }

    .panel__grid--single .card {
        grid-column: auto;
        grid-row: auto;
    }
}

.card__media {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-bottom: 2px solid var(--border-strong);
    overflow: hidden;
    background: var(--bg-muted);
}

.card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.card__media--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--bg-muted), var(--bg-panel));
    color: var(--text-muted);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.card__body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.1rem 1.2rem 1.4rem;
    min-height: 180px;
}

/* Mobile card body */
@media (max-width: 640px) {
    .card__body {
        padding: 0.8rem 1rem 1.2rem;
        min-height: 160px;
        gap: 0.6rem;
    }
}

.card__source {
    align-self: flex-start;
    padding: 0.3rem 0.6rem;
    border-radius: var(--radius-sm);
    border: 2px solid var(--border-strong);
    background: var(--bg-panel);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.card__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.card__chip {
    padding: 0.2rem 0.55rem;
    border-radius: var(--radius-sm);
    border: 2px solid var(--border-strong);
    background: transparent;
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.card__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.15rem;
    line-height: 1.25;
    text-transform: uppercase;
    word-break: break-word;
    hyphens: auto;
}

/* Mobile card title */
@media (max-width: 640px) {
    .card__title {
        font-size: 1rem;
        line-height: 1.3;
    }
}

.card__excerpt {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.92rem;
    line-height: 1.45;
}

.card__meta {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.card__link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.6rem;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
}

.card__link svg {
    width: 0.9rem;
    height: 0.9rem;
}

#panelAudioPlayer {
    display: none;
}

.skeleton {
    position: relative;
    border: 2px dashed var(--border-strong);
    background: var(--bg-muted);
    animation: pulse 1.6s ease-in-out infinite;
}

.skeleton__block,
.skeleton__line {
    background: rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-sm);
}

.skeleton__block {
    width: 100%;
    height: 100%;
}

.skeleton__line {
    height: 0.75rem;
    margin: 0.6rem 0;
}

.skeleton__line.short {
    width: 60%;
}

.skeleton__line.tiny {
    width: 35%;
}

@keyframes pulse {
    0%,
    100% {
        opacity: 0.7;
    }
    50% {
        opacity: 1;
    }
}

.empty-state,
.error-state {
    border: 2px solid var(--border-strong);
    border-radius: var(--radius-md);
    padding: 2.4rem;
    text-align: center;
    background: var(--bg-panel);
}

.empty-state__chip {
    display: inline-block;
    padding: 0.35rem 0.8rem;
    border: 2px solid var(--border-strong);
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.75rem;
    margin-bottom: 1rem;
}

.error-state__content {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.1rem;
    text-align: left;
    align-items: center;
}

.error-state__content svg {
    width: 2.1rem;
    height: 2.1rem;
    fill: var(--accent-strong);
}

.history-popup {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    z-index: 10;
}

.history-popup[hidden] {
    display: none;
}

.history-popup__surface {
    width: min(400px, 100%);
    border: 2px solid var(--border-strong);
    border-radius: var(--radius-lg);
    background: var(--bg-panel);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Mobile history popup */
@media (max-width: 480px) {
    .history-popup {
        padding: 1rem 0.5rem;
    }
    
    .history-popup__surface {
        width: 100%;
        padding: 1rem;
        border-radius: var(--radius-md);
    }
}

.history-popup__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.history-popup__header h2 {
    margin: 0;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.history-popup__close {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    border: 2px solid var(--border-strong);
    background: transparent;
    cursor: pointer;
    position: relative;
    /* use theme text color so it is visible in dark mode */
    color: var(--text-primary);
}

.history-popup__close::before,
.history-popup__close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 2px;
    background: currentColor;
    transform: translate(-50%, -50%) rotate(45deg);
}

.history-popup__close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.history-popup__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    max-height: 260px;
    overflow-y: auto;
}

.history-popup__item {
    border: 2px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--bg-elevated);
    padding: 0.6rem 0.75rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.9rem;
}

.history-popup__item button {
    border: 2px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: transparent;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.7rem;
    padding: 0.3rem 0.5rem;
    cursor: pointer;
}

.history-popup__footer {
    display: flex;
    justify-content: flex-end;
}

.history-popup__clear {
    padding: 0.6rem 1rem;
    border-radius: var(--radius-sm);
    border: 2px solid var(--border-strong);
    background: transparent;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    cursor: pointer;
    color: var(--text-primary);
}

.footer {
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-muted);
    padding-top: 2rem;
    border-top: 2px solid var(--border-strong);
}

/* Mobile First - Extra Small Devices */
@media (max-width: 480px) {
    .page-shell {
        padding: 1.5rem 0.8rem 2rem;
        border-radius: 16px;
        gap: 1.5rem;
    }

    .hero__title {
        font-size: 2.2rem;
        line-height: 1.1;
    }

    .hero__badge {
        font-size: 0.7rem;
        padding: 0.35rem 0.7rem;
    }

    .theme-toggle {
        padding: 0.6rem 0.8rem;
        font-size: 0.8rem;
    }

    .controls {
        padding: 1.2rem;
        gap: 1.2rem;
        grid-template-columns: 1fr;
    }

    .control-field {
        padding: 0.6rem 0.7rem;
    }

    .control-field input {
        font-size: 0.9rem;
    }

    .pill-toggle__option {
        padding: 0.6rem 0.9rem;
        font-size: 0.85rem;
    }

    .add-feed__toggle {
        padding: 0.6rem 0.8rem;
        font-size: 0.8rem;
    }

    .panel {
        padding: 1.2rem;
        margin-bottom: 1.5rem;
        border-radius: 16px;
    }

    .panel__title {
        font-size: 1.8rem;
        line-height: 1.1;
    }

    .panel__eyebrow {
        font-size: 0.65rem;
        padding: 0.15rem 0.4rem;
    }

    .panel__grid {
        grid-template-columns: 1fr;
        gap: 1rem;
        grid-auto-rows: minmax(180px, auto);
    }

    .card__body {
        padding: 0.9rem 1rem 1.1rem;
        min-height: 140px;
    }

    .card__title {
        font-size: 1rem;
        line-height: 1.2;
    }

    .card__excerpt {
        font-size: 0.85rem;
        line-height: 1.4;
    }

    .meta {
        padding: 0.9rem 1rem;
        flex-direction: column;
        align-items: stretch;
        gap: 0.8rem;
    }

    .meta__sources {
        flex-wrap: wrap;
        gap: 0.4rem;
    }

    .source-pill {
        font-size: 0.65rem;
        padding: 0.25rem 0.5rem;
    }

    .refresh-button {
        width: 100%;
        justify-content: center;
        margin-left: 0;
        padding: 0.7rem 1rem;
    }

    .audio-player {
        right: 0.5rem;
        left: 0.5rem;
        bottom: 0.5rem;
        max-width: none;
        padding: 1rem 1.1rem 1.1rem;
        border-radius: 20px;
    }

    .audio-player__title {
        font-size: 0.9rem;
    }

    .audio-player__controls {
        gap: 0.8rem;
    }

    .audio-player__button {
        padding: 0.6rem 0.8rem;
        font-size: 0.8rem;
    }
}

/* Mobile Audio Player - Full width at bottom */
@media (max-width: 640px) {
    .audio-player {
        right: 0;
        left: 0;
        bottom: 0;
        max-width: none;
        width: 100%;
        padding: 1.2rem 1rem 1.5rem;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        border-bottom: none;
        gap: 1rem;
    }
    
    .audio-player__title {
        font-size: clamp(1.2rem, 4vw, 1.6rem);
    }
    
    .audio-player__controls {
        gap: 0.6rem;
    }
    
    .audio-player__button {
        padding: 0.7rem 1rem;
        font-size: 0.85rem;
    }
    
    .audio-player__button--skip {
        padding: 0.7rem;
        min-width: 2.5rem;
    }
}

/* Small Mobile Devices */
@media (min-width: 481px) and (max-width: 640px) {
    .page-shell {
        padding: 2rem 1rem 2.5rem;
        border-radius: 20px;
    }

    .controls {
        grid-template-columns: 1fr;
        padding: 1.4rem;
    }

    .panel {
        padding: 1.4rem;
        margin-bottom: 2rem;
    }

    .panel__grid {
        grid-template-columns: 1fr;
        gap: 1.2rem;
    }

    .meta {
        flex-direction: column;
        align-items: flex-start;
    }

    .refresh-button {
        width: 100%;
        justify-content: center;
        margin-left: 0;
    }
}

/* Tablet Portrait */
@media (min-width: 641px) and (max-width: 768px) {
    .page-shell {
        padding: 2.5rem 1.5rem 2.5rem;
    }

    .controls {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }

    .panel__grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1.3rem;
    }
}

/* Tablet Landscape */
@media (min-width: 769px) and (max-width: 1024px) {
    .page-shell {
        padding: 3rem 2rem 2.5rem;
    }

    .controls {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }

    .panel__grid {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }
}

/* Legacy mobile styles for compatibility */
@media (max-width: 640px) {
    .panel .card:not(.skeleton) {
        opacity: 1;
        transform: none;
        transition-delay: 0ms;
    }

    .panel__header {
        flex-direction: column;
        align-items: flex-start;
    }

    .panel__header-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .panel__audio-button {
        width: 100%;
        justify-content: center;
        font-size: clamp(1.1rem, 5vw, 1.6rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .panel,
    .panel::after,
    .panel .card,
    .panel.is-active .card,
    .card:hover,
    .refresh-button,
    .audio-player,
    .audio-player::before,
    .audio-player::after,
    .audio-progress-visualizer,
    .audio-progress-visualizer__fill,
    .audio-progress-visualizer__line,
    .audio-progress-visualizer__line::after {
        transition: none !important;
        animation: none !important;
    }
}
.audio-player {
    position: fixed;
    right: clamp(0.5rem, 4vw, 3rem);
    bottom: clamp(0.5rem, 5vw, 3rem);
    display: flex;
    flex-direction: column;
    gap: 1.35rem;
    padding: clamp(1.5rem, 4vw, 3.4rem) clamp(1.2rem, 4vw, 2.8rem) clamp(1.2rem, 4vw, 3rem);
    border: 1.8px solid color-mix(in srgb, var(--border-strong) 40%, var(--accent) 60%);
    border-radius: clamp(16px, 4vw, 44px);
    box-shadow: 0 48px 120px rgba(0, 0, 0, 0.38);
    max-width: min(880px, 94vw);
    z-index: 60;
    backdrop-filter: blur(26px);
    overflow: hidden;
    isolation: isolate;
    --audio-surface-stop-1: color-mix(in srgb, var(--bg-elevated) 60%, var(--accent) 40%);
    --audio-surface-stop-2: color-mix(in srgb, var(--bg-panel) 62%, var(--bg-body) 38%);
    --audio-surface-stop-3: color-mix(in srgb, #1a2436 65%, var(--accent) 35%);
    background: radial-gradient(
            at 12% 18%,
            color-mix(in srgb, var(--audio-surface-stop-1) 68%, transparent) 0%,
            transparent 55%
        ),
        radial-gradient(
            at 82% 12%,
            color-mix(in srgb, var(--audio-surface-stop-2) 80%, transparent) 0%,
            transparent 50%
        ),
        linear-gradient(
            135deg,
            var(--audio-surface-stop-1) 0%,
            var(--audio-surface-stop-2) 38%,
            var(--audio-surface-stop-3) 100%
        );
    background-size: 200% 200%;
    animation: audioPlayerSurfaceIdle 24s ease infinite;
    transition:
        background 320ms ease,
        border-color 240ms ease,
        box-shadow 240ms ease;
}

.audio-player::before,
.audio-player::after {
    content: "";
    position: absolute;
    inset: -35%;
    z-index: -1;
    opacity: 0.65;
    pointer-events: none;
    background: conic-gradient(
        from 180deg,
        color-mix(in srgb, var(--accent) 70%, #101622 30%) 0deg,
        color-mix(in srgb, var(--accent) 40%, #080808 60%) 110deg,
        color-mix(in srgb, var(--accent) 65%, #1d2333 35%) 220deg,
        color-mix(in srgb, var(--accent) 58%, #0b1b33 42%) 360deg
    );
    filter: blur(190px);
    transition: opacity 280ms ease;
    animation: audioPlayerGradient 18s linear infinite;
    animation-play-state: paused;
}

.audio-player::after {
    inset: -50%;
    opacity: 0.4;
    filter: blur(210px);
    animation-duration: 26s;
    animation-direction: reverse;
}

.audio-player--active::before,
.audio-player--active::after {
    animation-play-state: running;
}

.audio-player[hidden] {
    display: none;
}

.audio-player__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    cursor: grab;
    user-select: none;
    touch-action: none;
}

.audio-player.is-dragging .audio-player__header {
    cursor: grabbing;
}

.audio-player__badge {
    font-size: 0.92rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-weight: 700;
    color: color-mix(in srgb, var(--text-secondary) 60%, var(--accent) 40%);
}

.audio-player__close {
    display: inline-flex;
    align-items: center;
    background: color-mix(in srgb, var(--bg-panel) 75%, transparent);
    border: 1.4px solid color-mix(in srgb, var(--border-subtle) 55%, transparent);
    color: var(--text-primary);
    cursor: pointer;
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    transition:
        color 150ms ease,
        background 150ms ease,
        border-color 150ms ease,
        transform 120ms ease;
}

.audio-player__close:is(:hover, :focus-visible) {
    color: var(--bg-body);
    background: color-mix(in srgb, var(--accent) 60%, transparent);
    border-color: color-mix(in srgb, var(--accent) 70%, var(--border-subtle) 30%);
    transform: translateY(-1px);
}

.audio-player__close-icon {
    font-size: 1.15em;
    line-height: 1;
}

.audio-player__title {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 2.8vw, 2.4rem);
    margin: 0;
    line-height: 1.2;
}

.audio-player__status {
    font-size: 1rem;
    color: var(--text-secondary);
}

.audio-player__progress {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.audio-player__progress-track {
    position: relative;
    width: 100%;
    height: 0.5rem;
    border-radius: 999px;
}

.audio-progress-visualizer {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    border-radius: inherit;
    pointer-events: none;
    overflow: hidden;
    background: transparent;
    box-shadow: none;
    transition: opacity 220ms ease;
    --visualizer-progress: 0;
}

.audio-progress-visualizer__fill {
    width: calc(var(--visualizer-progress, 0) * 100%);
    max-width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    gap: clamp(0.06rem, 0.28vw, 0.16rem);
    border-radius: inherit;
    padding: 0;
    overflow: hidden;
    mix-blend-mode: normal;
    transition:
        width 180ms ease-out,
        opacity 160ms ease-out;
    opacity: 0;
}

.audio-progress-visualizer__line {
    position: relative;
    flex: 1 1 0;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    min-width: clamp(0.08rem, 0.32vw, 0.18rem);
    height: 100%;
    opacity: 0.25;
    transition: opacity 180ms ease;
}

.audio-progress-visualizer__line::after {
    content: "";
    width: clamp(1.5px, 0.22vw, 3px);
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--accent) 85%, #ffffff 15%),
        color-mix(in srgb, #9ad7ff 72%, var(--accent) 28%)
    );
    transform: translateY(0) scaleY(0.12);
    transform-origin: 50% 100%;
    box-shadow: none;
    transition:
        transform 200ms ease,
        box-shadow 200ms ease,
        opacity 180ms ease;
    animation: none;
}

.audio-progress-visualizer__line.is-active {
    opacity: 0.92;
}

.audio-progress-visualizer__line.is-active::after {
    transform: translateY(0) scaleY(0.64);
    box-shadow: 0 8px 18px rgba(78, 162, 255, 0.26);
    animation: audioEqualizerPulse 1.45s ease-in-out infinite alternate;
    animation-play-state: paused;
}

.audio-player[data-state="ready"] .audio-progress-visualizer__fill,
.audio-player[data-state="playing"] .audio-progress-visualizer__fill {
    opacity: 1;
}

.audio-player--playing .audio-progress-visualizer__line.is-active::after {
    animation-play-state: running;
}

.audio-progress-visualizer__line:nth-child(2n).is-active::after {
    animation-direction: alternate-reverse;
}

body[data-theme="light"] .audio-progress-visualizer__line::after {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--accent) 70%, #ffffff 30%),
        color-mix(in srgb, #6abfff 68%, var(--accent) 32%)
    );
}

.audio-player[data-state="idle"] .audio-progress-visualizer__line.is-active::after {
    transform: translateY(0) scaleY(0.32);
}

.audio-player[data-state="ready"] .audio-progress-visualizer__line.is-active::after {
    transform: translateY(0) scaleY(0.5);
}

.audio-player[data-state="playing"] .audio-progress-visualizer__line.is-active::after {
    transform: translateY(0) scaleY(0.76);
}

.audio-progress-visualizer__line:nth-child(12n + 1).is-active::after {
    animation-delay: 0s;
    animation-duration: 1.28s;
}

.audio-progress-visualizer__line:nth-child(12n + 2).is-active::after {
    animation-delay: 0.04s;
    animation-duration: 1.34s;
}

.audio-progress-visualizer__line:nth-child(12n + 3).is-active::after {
    animation-delay: 0.08s;
    animation-duration: 1.26s;
}

.audio-progress-visualizer__line:nth-child(12n + 4).is-active::after {
    animation-delay: 0.12s;
    animation-duration: 1.38s;
}

.audio-progress-visualizer__line:nth-child(12n + 5).is-active::after {
    animation-delay: 0.16s;
    animation-duration: 1.3s;
}

.audio-progress-visualizer__line:nth-child(12n + 6).is-active::after {
    animation-delay: 0.2s;
    animation-duration: 1.42s;
}

.audio-progress-visualizer__line:nth-child(12n + 7).is-active::after {
    animation-delay: 0.24s;
    animation-duration: 1.32s;
}

.audio-progress-visualizer__line:nth-child(12n + 8).is-active::after {
    animation-delay: 0.28s;
    animation-duration: 1.4s;
}

.audio-progress-visualizer__line:nth-child(12n + 9).is-active::after {
    animation-delay: 0.32s;
    animation-duration: 1.3s;
}

.audio-progress-visualizer__line:nth-child(12n + 10).is-active::after {
    animation-delay: 0.36s;
    animation-duration: 1.38s;
}

.audio-progress-visualizer__line:nth-child(12n + 11).is-active::after {
    animation-delay: 0.4s;
    animation-duration: 1.29s;
}

.audio-progress-visualizer__line:nth-child(12n).is-active::after {
    animation-delay: 0.44s;
    animation-duration: 1.36s;
}

.audio-player__progress-bar {
    width: 100%;
    height: 0.5rem;
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
    appearance: none;
    -webkit-appearance: none;
    border: none;
    cursor: pointer;
    padding: 0;
    will-change: transform;
    transition: opacity 140ms ease;
    position: relative;
    z-index: 2;
}

.audio-player__progress-bar:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--accent) 72%, transparent),
        0 0 0 6px rgba(255, 255, 255, 0.16);
}

.audio-player__progress-bar:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.audio-player__progress-bar::-webkit-slider-runnable-track {
    height: 0.5rem;
    border-radius: 999px;
    background: transparent !important;
    border: none;
}

.audio-player__progress-bar::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 1.05rem;
    width: 1.05rem;
    border-radius: 50%;
    background: color-mix(in srgb, #ffffff 85%, var(--accent) 15%);
    border: 2px solid color-mix(in srgb, var(--accent) 70%, #9ad7ff 30%);
    box-shadow: 0 6px 18px rgba(8, 11, 22, 0.45);
    margin-top: calc((0.5rem - 1.05rem) / 2 - 0.15rem);
    transform: translateY(-0.15rem);
    transition:
        transform 140ms ease,
        box-shadow 140ms ease,
        border-color 160ms ease;
}

.audio-player__progress-bar:disabled::-webkit-slider-thumb {
    border-color: color-mix(in srgb, var(--border-subtle) 70%, transparent);
    box-shadow: none;
    background: color-mix(in srgb, var(--bg-panel) 80%, rgba(255, 255, 255, 0.15));
}

.audio-player__progress-bar::-webkit-slider-thumb:active {
    transform: translateY(-0.15rem) scale(1.08);
    box-shadow: 0 10px 24px rgba(24, 137, 255, 0.42);
    border-color: color-mix(in srgb, var(--accent) 85%, #ffffff 15%);
}

.audio-player__progress-bar::-moz-range-track {
    height: 0.5rem;
    border-radius: 999px;
    background: transparent;
    border: none;
}

.audio-player__progress-bar::-moz-range-thumb {
    height: 1.05rem;
    width: 1.05rem;
    border-radius: 50%;
    background: color-mix(in srgb, #ffffff 85%, var(--accent) 15%);
    border: 2px solid color-mix(in srgb, var(--accent) 70%, #9ad7ff 30%);
    box-shadow: 0 6px 18px rgba(8, 11, 22, 0.45);
    transform: translateY(-0.15rem);
    transition:
        transform 140ms ease,
        box-shadow 140ms ease,
        border-color 160ms ease;
}

.audio-player__progress-bar:disabled::-moz-range-thumb {
    border-color: color-mix(in srgb, var(--border-subtle) 70%, transparent);
    box-shadow: none;
    background: color-mix(in srgb, var(--bg-panel) 80%, rgba(255, 255, 255, 0.15));
}

.audio-player__progress-bar::-moz-range-thumb:active {
    transform: translateY(-0.15rem) scale(1.08);
    box-shadow: 0 10px 24px rgba(24, 137, 255, 0.42);
    border-color: color-mix(in srgb, var(--accent) 85%, #ffffff 15%);
}

.audio-player__progress-times {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
    color: color-mix(in srgb, var(--text-secondary) 85%, rgba(255, 255, 255, 0.65));
}

.audio-player[data-state="ready"] {
    --audio-surface-stop-1: color-mix(in srgb, var(--accent) 55%, #1b2a3a 45%);
    --audio-surface-stop-2: color-mix(in srgb, var(--bg-panel) 55%, var(--accent) 45%);
    --audio-surface-stop-3: color-mix(in srgb, #22324a 55%, var(--accent) 45%);
}

.audio-player[data-state="playing"] {
    --audio-surface-stop-1: color-mix(in srgb, var(--accent) 80%, #0b1f3a 20%);
    --audio-surface-stop-2: color-mix(in srgb, #58c2ff 55%, var(--accent) 45%);
    --audio-surface-stop-3: color-mix(in srgb, #9ad7ff 70%, var(--accent) 30%);
    animation: audioPlayerSurfaceActive 8s ease-in-out infinite alternate;
    box-shadow: 0 60px 160px rgba(24, 137, 255, 0.34);
    border-color: color-mix(in srgb, var(--accent) 78%, var(--border-strong) 22%);
}

.audio-player--active::before,
.audio-player--active::after {
    animation-play-state: running;
    opacity: 0.75;
}

.audio-player::before,
.audio-player::after {
    opacity: 0.55;
}

.audio-player[data-state="playing"]::before,
.audio-player[data-state="playing"]::after {
    opacity: 0.9;
    filter: blur(180px);
}

@keyframes audioPlayerSurfaceIdle {
    0% {
        background-position: 0% 45%;
    }
    50% {
        background-position: 100% 55%;
    }
    100% {
        background-position: 0% 45%;
    }
}

@keyframes audioPlayerSurfaceActive {
    0% {
        background-position: 5% 35%;
    }
    50% {
        background-position: 95% 65%;
    }
    100% {
        background-position: 5% 35%;
    }
}

@keyframes audioEqualizerPulse {
    0% {
        transform: translateY(0) scaleY(0.3);
    }
    18% {
        transform: translateY(-28%) scaleY(0.92);
    }
    38% {
        transform: translateY(18%) scaleY(0.46);
    }
    58% {
        transform: translateY(-24%) scaleY(0.88);
    }
    78% {
        transform: translateY(14%) scaleY(0.54);
    }
    100% {
        transform: translateY(0) scaleY(0.3);
    }
}

.audio-player__controls {
    display: flex;
    gap: 1.15rem;
}

.audio-player__button {
    flex: 1 1 auto;
    border-radius: var(--radius-pill);
    border: 1.6px solid color-mix(in srgb, var(--border-subtle) 60%, var(--accent) 40%);
    padding: 0.9rem 1.6rem;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: color-mix(in srgb, var(--bg-panel) 90%, var(--accent) 10%);
    color: var(--text-primary);
    cursor: pointer;
    transition:
        transform 150ms ease,
        background 150ms ease,
        border-color 150ms ease;
}

.audio-player__button:is(:hover, :focus-visible) {
    transform: translateY(-1px);
    background: color-mix(in srgb, var(--accent) 65%, var(--bg-panel) 35%);
    color: var(--bg-body);
}

.audio-player__button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
    transform: none;
}

.audio-player__button--primary {
    background: var(--accent);
    color: var(--bg-body);
    border-color: color-mix(in srgb, var(--accent) 70%, var(--border-subtle) 30%);
}

.audio-player__button--primary:is(:hover, :focus-visible) {
    background: color-mix(in srgb, var(--accent), var(--bg-body) 15%);
    color: var(--bg-body);
}

.audio-player__button--skip {
    flex: 0 0 auto;
    padding: 0.9rem;
    min-width: 3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.audio-player__button--skip svg {
    width: 1.1rem;
    height: 1.1rem;
    fill: currentColor;
}

.audio-player__button--skip:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.audio-player__button--skip:disabled svg {
    opacity: 0.5;
}

.panel--audio-active {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent) !important;
}

.panel--audio-active .panel__eyebrow {
    background: color-mix(in srgb, var(--accent) 25%, var(--bg-panel) 75%);
    color: var(--accent);
    border-color: var(--accent);
}

@keyframes audioPlayerGradient {
    from {
        transform: rotate(0deg) scale(1.1);
    }
    to {
        transform: rotate(360deg) scale(1.1);
    }
}

/* Additional Mobile Optimizations */
@media (max-width: 480px) {
    /* Improve touch targets */
    button, .preset-feed-button, .pill-toggle__option {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Better text sizing for readability */
    .card__excerpt {
        font-size: 0.9rem;
        line-height: 1.5;
    }
    
    .card__meta {
        font-size: 0.8rem;
    }
    
    /* Optimize spacing for small screens */
    .panel__grid {
        gap: 1rem;
    }
    
    .card__body {
        gap: 0.5rem;
    }
    
    /* Ensure content doesn't get cut off */
    .panel__title {
        -webkit-line-clamp: 6;
        max-height: none;
    }
    
    /* Better form controls */
    .add-feed__form input {
        font-size: 16px; /* Prevents zoom on iOS */
        padding: 0.8rem;
    }
    
    /* Improve floating heading on mobile */
    .floating-heading {
        right: 0.5rem;
        top: 0.5rem;
        font-size: 0.7rem;
        padding: 0.4rem 0.6rem;
    }
}

/* Landscape mobile optimization */
@media (max-width: 896px) and (orientation: landscape) and (max-height: 500px) {
    .page-shell {
        padding: 0.5rem;
        gap: 0.8rem;
    }
    
    .hero {
        gap: 0.5rem;
        margin-bottom: 0.2rem;
    }
    
    .hero__title {
        font-size: clamp(1.5rem, 6vw, 2.2rem);
    }
    
    .panel {
        padding: 0.8rem;
        gap: 0.8rem;
    }
    
    .panel__header {
        position: static;
    }
    
    .audio-player {
        padding: 0.8rem;
        gap: 0.8rem;
    }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .page-shell {
        backdrop-filter: blur(16px);
    }
    
    .audio-player {
        backdrop-filter: blur(32px);
    }
}

/* Dark mode specific mobile optimizations */
@media (max-width: 640px) {
    body[data-theme="dark"] .card {
        border-color: rgba(255, 255, 255, 0.15);
    }
    
    body[data-theme="dark"] .control-field {
        border-color: rgba(255, 255, 255, 0.2);
    }
}

/* Accessibility improvements for mobile */
@media (max-width: 640px) and (prefers-reduced-motion: no-preference) {
    .card:hover {
        transform: translateY(-2px); /* Reduced hover effect for touch */
    }
}

/* Safe area insets for devices with notches */
@supports (padding: max(0px)) {
    .page-shell {
        padding-left: max(clamp(0.5rem, 4vw, 3rem), env(safe-area-inset-left));
        padding-right: max(clamp(0.5rem, 4vw, 3rem), env(safe-area-inset-right));
        padding-top: max(clamp(0.75rem, 4vw, 3rem), env(safe-area-inset-top));
        padding-bottom: max(clamp(1rem, 4vw, 2.6rem), env(safe-area-inset-bottom));
    }
    
    .audio-player {
        bottom: max(clamp(0.5rem, 5vw, 3rem), env(safe-area-inset-bottom));
        right: max(clamp(0.5rem, 4vw, 3rem), env(safe-area-inset-right));
    }
    
    @media (max-width: 640px) {
        .audio-player {
            bottom: env(safe-area-inset-bottom);
            left: env(safe-area-inset-left);
            right: env(safe-area-inset-right);
        }
    }
}