:root {
    color-scheme: dark;
    --bg: #090d14;
    --surface: rgba(20, 27, 39, 0.88);
    --surface-strong: #151d2a;
    --surface-hover: #1d2a3c;
    --border: rgba(255, 255, 255, 0.10);
    --border-strong: rgba(124, 210, 255, 0.42);
    --text: #f5f7fb;
    --muted: #aab5c6;
    --accent: #72d4ff;
    --accent-strong: #28b8f4;
    --danger: #ff7c8c;
    --header-height: 68px;
    --content-width: 2400px;
    --radius: 18px;
    --shadow: 0 16px 45px rgba(0, 0, 0, 0.28);
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--bg);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: clamp(15px, 0.35vw + 13px, 19px);
}

body {
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    margin: 0;
    color: var(--text);
    background:
        radial-gradient(circle at 15% -10%, rgba(40, 184, 244, 0.08), transparent 34rem),
        radial-gradient(circle at 92% 12%, rgba(112, 77, 255, 0.06), transparent 40rem),
        var(--bg);
}

/* Baggrundsbilledet bruges kun på login-siden. */
body.auth-page::before,
body.auth-page::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
}

body.auth-page::before {
    z-index: -3;
    /* Fallback, hvis den lokale public/data/background.webp mangler. */
    background-color: #090d14;
    background-image: radial-gradient(circle at 25% 15%, #17283a 0, #090d14 55%, #05070b 100%);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    transform: scale(1.015);
}

body.auth-page::after {
    z-index: -1;
    background: rgba(0, 0, 0, 0.80);
    -webkit-backdrop-filter: blur(2px) saturate(90%);
    backdrop-filter: blur(2px) saturate(90%);
}

.auth-background-image {
    position: fixed;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
    user-select: none;
}

body.no-scroll {
    overflow: hidden;
    background: #020509;
}

/*
 * Ydelsesoptimering under videoafspilning:
 * Baggrundsbillede, glaslag og biblioteket behøver ikke blive malet bag den
 * helt dækkende afspiller. Det reducerer GPU-komposition og tabte frames,
 * især ved 4K-video og på enheder med integreret grafik.
 */
body.no-scroll::before,
body.no-scroll::after {
    content: none;
}

/*
 * Under videoafspilning skjules biblioteket, men desktop-headeren bevares.
 * På mobil skjules headeren fortsat, så videoen bruger hele skærmen.
 */
body.no-scroll .container {
    visibility: hidden;
}

button,
a,
input {
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

a {
    color: inherit;
    text-decoration: none;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    min-height: var(--header-height);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(160px, 2fr) minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    padding: 10px max(14px, env(safe-area-inset-right)) 10px max(14px, env(safe-area-inset-left));
    background: rgba(9, 13, 20, 0.82);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.20);
    backdrop-filter: blur(18px) saturate(130%);
}

.brand {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    width: fit-content;
    border-radius: 12px;
}

.logo {
    width: 42px;
    height: 42px;
    object-fit: contain;
    filter: drop-shadow(0 5px 12px rgba(0, 0, 0, 0.3));
}

.brand-title {
    overflow: hidden;
    color: var(--text);
    font-size: 0.88rem;
    font-weight: 750;
    letter-spacing: 0.01em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.brand-version {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.035em;
    line-height: 1;
    opacity: 0.82;
    white-space: nowrap;
}

.path-centered {
    min-width: 0;
    overflow: hidden;
    color: #dce6f5;
    font-size: clamp(0.82rem, 1.1vw, 1rem);
    font-weight: 650;
    letter-spacing: 0.015em;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
}

.thumb-form {
    display: contents;
}

.icon-button {
    width: 44px;
    height: 44px;
    display: inline-grid;
    place-items: center;
    margin: 0;
    padding: 0;
    color: var(--text);
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid var(--border);
    border-radius: 13px;
    cursor: pointer;
    font-size: 1.15rem;
    line-height: 1;
    transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.container {
    width: min(100%, var(--content-width));
    min-height: calc(100vh - var(--header-height));
    margin: 0 auto;
    padding: clamp(18px, 2.2vw, 42px) clamp(12px, 3vw, 58px) max(34px, env(safe-area-inset-bottom));
}

.status-message {
    width: fit-content;
    max-width: 100%;
    margin: 0 auto clamp(16px, 2vw, 28px);
    padding: 11px 16px;
    color: #dff6ff;
    background: rgba(40, 184, 244, 0.12);
    border: 1px solid rgba(114, 212, 255, 0.28);
    border-radius: 999px;
    font-size: 0.88rem;
    text-align: center;
}

.file-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(clamp(140px, 12vw, 220px), 1fr));
    gap: clamp(12px, 1.4vw, 26px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.media-item {
    min-width: 0;
}

.media-card {
    position: relative;
    width: 100%;
    height: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 9px;
    margin: 0;
    padding: clamp(8px, 0.8vw, 13px);
    color: var(--text);
    text-align: left;
    background: linear-gradient(155deg, rgba(26, 36, 51, 0.94), rgba(14, 20, 30, 0.94));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
    cursor: pointer;
    appearance: none;
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.visual {
    position: relative;
    width: 100%;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    display: grid;
    place-items: center;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015)),
        var(--surface-strong);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: calc(var(--radius) - 6px);
}

.poster-visual {
    background: #080b10;
}

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

.visual img.square {
    width: clamp(64px, 50%, 112px);
    height: clamp(64px, 50%, 112px);
    object-fit: contain;
    filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.28));
}

.play-badge {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    padding-left: 2px;
    color: #071019;
    background: rgba(126, 219, 255, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 50%;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
    font-size: 0.78rem;
}

.item-label {
    width: 100%;
    min-width: 0;
    min-height: 2.7em;
    display: -webkit-box;
    overflow: hidden;
    color: var(--text);
    font-size: clamp(0.78rem, 0.5vw + 0.68rem, 0.94rem);
    font-weight: 680;
    line-height: 1.35;
    overflow-wrap: anywhere;
    text-align: center;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.item-meta {
    width: 100%;
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
}

.empty-state {
    min-height: 45vh;
    display: grid;
    place-content: center;
    gap: 12px;
    color: var(--muted);
    text-align: center;
}

.empty-state span {
    font-size: 3rem;
}

.empty-state p {
    margin: 0;
}

.lightbox[hidden] {
    display: none;
}

/* Minimal videoafspiller: desktop bruger native kontroller; mobil har kun luk, fuldskærm og trykfeedback. */
.lightbox {
    position: fixed;
    inset: var(--header-height) 0 0;
    z-index: 900;
    display: grid;
    place-items: center;
    padding: 0;
    background: #000;
    contain: strict;
}

#lightbox-video {
    width: 100vw;
    height: calc(100vh - var(--header-height));
    height: calc(100dvh - var(--header-height));
    max-width: 100%;
    max-height: 100%;
    display: block;
    object-fit: contain;
    background: #000;
    outline: 0;
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* Mobilafspilleren bruger et kontrol-overlay, som først bliver aktivt efter
 * et tryk på videofladen. Et tryk viser kontrollerne; kun de synlige knapper
 * må derefter ændre afspilning, fuldskærm eller lukke afspilleren. */
.video-close-button,
.video-playback-feedback {
    display: none;
}

@media (max-width: 640px), (pointer: coarse) {
    #lightbox-video {
        position: relative;
        z-index: 1;
        touch-action: manipulation;
    }

    .lightbox::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 3;
        pointer-events: none;
        opacity: 0;
        background:
            linear-gradient(to bottom, rgba(0, 0, 0, 0.56), transparent 24%),
            linear-gradient(to top, rgba(0, 0, 0, 0.48), transparent 24%);
        transition: opacity 170ms ease;
    }

    .lightbox.mobile-controls-visible::after {
        opacity: 1;
    }

    .video-close-button {
        position: absolute;
        top: max(12px, env(safe-area-inset-top));
        left: max(12px, env(safe-area-inset-left));
        z-index: 9;
        display: inline-flex;
        min-width: 76px;
        min-height: 48px;
        padding: 0 15px 0 12px;
        align-items: center;
        justify-content: center;
        gap: 7px;
        color: #fff;
        background: rgba(0, 0, 0, 0.72);
        border: 1px solid rgba(255, 255, 255, 0.42);
        border-radius: 999px;
        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
        font: inherit;
        font-size: 0.92rem;
        font-weight: 750;
        line-height: 1;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-7px) scale(0.96);
        transition: opacity 160ms ease, visibility 160ms ease, transform 160ms ease, background 120ms ease;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    .lightbox.mobile-controls-visible .video-close-button {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0) scale(1);
    }

    .video-close-button svg {
        width: 22px;
        height: 22px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2.25;
        stroke-linecap: round;
    }

    .video-close-button:active {
        transform: scale(0.96);
        background: rgba(18, 25, 35, 0.9);
    }

    .video-playback-feedback {
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 8;
        display: grid;
        width: clamp(88px, 24vw, 120px);
        aspect-ratio: 1;
        padding: 8px;
        place-items: center;
        color: #fff;
        background: transparent;
        border: 0;
        border-radius: 50%;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translate(-50%, -50%) scale(0.88);
        transition: opacity 150ms ease, visibility 150ms ease, transform 150ms ease;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    .lightbox.mobile-controls-visible .video-playback-feedback {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translate(-50%, -50%) scale(1);
    }

    .video-playback-feedback-disc {
        display: grid;
        width: 100%;
        aspect-ratio: 1;
        place-items: center;
        color: #fff;
        background: rgba(0, 0, 0, 0.68);
        border: 2px solid rgba(255, 255, 255, 0.72);
        border-radius: 50%;
        box-shadow: 0 12px 42px rgba(0, 0, 0, 0.58);
        transition: transform 120ms ease, background 120ms ease;
    }

    .video-playback-feedback:active .video-playback-feedback-disc {
        transform: scale(0.94);
        background: rgba(18, 25, 35, 0.9);
    }

    .video-playback-feedback svg {
        width: 46%;
        height: 46%;
        fill: currentColor;
    }

    .video-playback-feedback-play,
    .video-playback-feedback-pause {
        display: none;
    }

    .video-playback-feedback.is-play .video-playback-feedback-play,
    .video-playback-feedback.is-pause .video-playback-feedback-pause {
        display: block;
    }

    .video-playback-feedback.is-play .video-playback-feedback-play {
        transform: translateX(4%);
    }
}

/* Mobiladfærden bevares: headeren skjules, og videoen fylder hele viewporten. */
@media (max-width: 640px), (pointer: coarse) {
    body.no-scroll .site-header {
        visibility: hidden;
    }

    .lightbox {
        inset: 0;
        z-index: 10000;
    }

    #lightbox-video {
        height: 100vh;
        height: 100dvh;
    }
}

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

@media (hover: hover) and (pointer: fine) {
    .media-card:hover {
        z-index: 2;
        transform: translateY(-5px);
        background: linear-gradient(155deg, rgba(31, 46, 66, 0.98), rgba(16, 24, 36, 0.98));
        border-color: var(--border-strong);
        box-shadow: var(--shadow);
    }

    .icon-button:hover {
        transform: translateY(-2px);
        background: rgba(114, 212, 255, 0.13);
        border-color: var(--border-strong);
    }
}

@media (max-width: 900px) {
    .brand-title {
        display: none;
    }
}

@media (max-width: 640px) {
    :root {
        --header-height: auto;
        --radius: 15px;
    }

    .site-header {
        grid-template-columns: auto 1fr auto;
        grid-template-rows: auto auto;
        gap: 7px 10px;
        padding-top: max(7px, env(safe-area-inset-top));
    }

    .brand {
        grid-column: 1;
        grid-row: 1;
    }

    .logo {
        width: 36px;
        height: 36px;
    }

    .header-actions {
        grid-column: 3;
        grid-row: 1;
    }

    .icon-button {
        width: 39px;
        height: 39px;
        border-radius: 11px;
    }

    .path-centered {
        grid-column: 1 / -1;
        grid-row: 2;
        padding: 1px 6px 3px;
        font-size: 0.76rem;
    }

    .container {
        padding-top: 14px;
    }

    .file-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .media-card {
        gap: 7px;
        padding: 7px;
    }

    .play-badge {
        right: 8px;
        bottom: 8px;
        width: 34px;
        height: 34px;
    }
}

@media (max-width: 350px) {
    .file-list {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 2200px) {
    :root {
        --content-width: 3000px;
    }

    .container {
        padding-left: 72px;
        padding-right: 72px;
    }

    .file-list {
        gap: 28px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Login, konto og administration */
input,
select {
    width: 100%;
    min-height: 46px;
    padding: 10px 12px;
    color: var(--text);
    background: rgba(5, 9, 15, 0.72);
    border: 1px solid var(--border);
    border-radius: 12px;
    outline: none;
}

input:focus,
select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(114, 212, 255, 0.14);
}

label > span,
.form-grid label > span,
.stack-form label > span,
.inline-settings-form label > span,
.compact-form label > span {
    display: block;
    margin-bottom: 6px;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
}

button {
    font: inherit;
}

.primary-button,
.secondary-button,
.danger-button,
.text-button,
.user-button {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 15px;
    border: 1px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    font-weight: 750;
    line-height: 1.2;
}

.primary-button {
    color: #061018;
    background: linear-gradient(135deg, var(--accent), var(--accent-strong));
    border-color: transparent;
}

.secondary-button,
.text-button,
.user-button {
    color: var(--text);
    background: rgba(255, 255, 255, 0.065);
}

.danger-button {
    color: #fff;
    background: rgba(255, 71, 98, 0.18);
    border-color: rgba(255, 124, 140, 0.4);
}

.user-button {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.78rem;
}

.auth-page {
    min-height: 100vh;
}

.auth-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: max(24px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}

.auth-card,
.panel-card {
    width: min(100%, 520px);
    padding: clamp(22px, 4vw, 38px);
    background: linear-gradient(145deg, rgba(22, 31, 45, 0.95), rgba(10, 16, 25, 0.95));
    border: 1px solid var(--border);
    border-radius: clamp(18px, 3vw, 28px);
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.48);
    backdrop-filter: blur(18px) saturate(120%);
}

.auth-card.wide {
    width: min(100%, 640px);
}

.auth-brand {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 26px;
}

.auth-logo {
    width: 62px;
    height: 62px;
    object-fit: contain;
}

.auth-card h1,
.panel-card h1,
.panel-card h2 {
    margin: 0;
    line-height: 1.1;
}

.eyebrow {
    margin: 0 0 6px;
    color: var(--accent);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.auth-product-name {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 7px;
}

.auth-version {
    color: var(--muted);
    font-size: 0.72em;
    font-weight: 700;
    letter-spacing: 0.045em;
    text-transform: none;
}

.stack-form {
    display: grid;
    gap: 17px;
}

.remember-option {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--muted);
    cursor: pointer;
    user-select: none;
}

.remember-option input[type="checkbox"] {
    width: 19px;
    min-height: 19px;
    height: 19px;
    margin: 0;
    padding: 0;
    accent-color: var(--accent);
}

.stack-form .remember-option > span {
    display: inline;
    margin: 0;
    color: var(--text);
    font-size: 0.82rem;
    font-weight: 650;
}

.auth-note {
    margin: 22px 0 0;
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.55;
    text-align: center;
}

.auth-note a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.form-message {
    width: 100%;
    margin: 0 0 20px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 13px;
    font-size: 0.86rem;
    line-height: 1.45;
}

.form-message.error {
    color: #ffe7ea;
    background: rgba(255, 74, 101, 0.13);
    border-color: rgba(255, 124, 140, 0.35);
}

.form-message.success {
    color: #e5fff4;
    background: rgba(56, 204, 135, 0.13);
    border-color: rgba(100, 229, 166, 0.34);
}

.form-message.info {
    color: #e6f7ff;
    background: rgba(40, 184, 244, 0.12);
    border-color: rgba(114, 212, 255, 0.30);
}

.page-message {
    width: fit-content;
    max-width: 100%;
    margin: 0 auto clamp(16px, 2vw, 28px);
}

.settings-shell,
.admin-shell {
    width: min(100%, 1500px);
    margin: 0 auto;
    padding: clamp(22px, 3vw, 50px) clamp(14px, 3vw, 48px) 60px;
}

.settings-shell {
    min-height: calc(100vh - var(--header-height));
    display: grid;
    place-items: start center;
}

.panel-card {
    width: 100%;
    margin-bottom: 24px;
}

.panel-card.narrow {
    max-width: 650px;
}

.compact-header .header-actions {
    flex-wrap: wrap;
}

.section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 22px;
}

.media-library-summary-card {
    padding-block: 22px;
}

.media-library-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    margin: 0;
    line-height: 1.6;
}

.media-library-summary > strong {
    margin-right: 2px;
    color: var(--text);
    font-size: 1.05rem;
}

.media-library-summary > span {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    color: var(--muted);
}

.media-library-summary > span:not(:first-of-type)::before {
    content: "·";
    margin-right: 4px;
    color: var(--muted);
}

.media-library-summary b {
    color: var(--text);
    font-size: 1.05rem;
}

.count-badge,
.role-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--muted);
    background: rgba(255, 255, 255, 0.055);
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
}

.role-badge.admin {
    color: #dff7ff;
    background: rgba(40, 184, 244, 0.13);
    border-color: rgba(114, 212, 255, 0.3);
}

.create-user-panel,
.danger-details {
    margin-bottom: 22px;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.03);
}

.create-user-panel > summary,
.danger-details > summary {
    padding: 13px 15px;
    cursor: pointer;
    font-weight: 750;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding: 4px 15px 17px;
}

.form-grid .primary-button {
    align-self: end;
}

.user-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
    gap: 16px;
}

.user-card {
    padding: 0;
    overflow: hidden;
    background: rgba(7, 12, 19, 0.66);
    border: 1px solid var(--border);
    border-radius: 17px;
}

.user-card > summary::-webkit-details-marker {
    display: none;
}

.user-card-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 78px;
    padding: 16px 18px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.user-card-heading:hover {
    background: rgba(255, 255, 255, 0.035);
}

.user-card-heading:focus-visible {
    outline: 2px solid rgba(114, 212, 255, 0.75);
    outline-offset: -2px;
}

.user-card[open] .user-card-heading {
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.user-card-body {
    padding: 0 18px 18px;
}

.user-card-identity {
    min-width: 0;
}

.user-card-heading h2 {
    overflow: hidden;
    font-size: 1.05rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-card-heading p {
    overflow: hidden;
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 0.78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-card-summary-actions {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 9px;
}

.user-card-chevron {
    display: inline-grid;
    width: 28px;
    height: 28px;
    place-items: center;
    color: var(--muted);
    transition: transform 160ms ease;
}

.user-card-chevron svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.user-card[open] .user-card-chevron {
    transform: rotate(180deg);
}

.user-meta {
    display: grid;
    gap: 8px;
    margin: 17px 0;
}

.user-meta div {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 7px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}

.user-meta dt,
.user-meta dd {
    margin: 0;
    font-size: 0.75rem;
}

.user-meta dt {
    color: var(--muted);
}

.user-meta dd {
    text-align: right;
}

.inline-settings-form,
.compact-form {
    display: grid;
    gap: 11px;
}

.inline-settings-form {
    grid-template-columns: 1fr 1fr;
}

.inline-settings-form .secondary-button {
    grid-column: 1 / -1;
}

.danger-details {
    margin: 14px 0 0;
}

.danger-details > .compact-form,
.danger-details > .delete-form {
    padding: 0 13px 14px;
}

.delete-form {
    display: grid;
    gap: 10px;
    margin-top: 10px;
}

.confirm-delete {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--muted);
    font-size: 0.75rem;
}

.confirm-delete input {
    width: 18px;
    min-height: 18px;
    margin: 0;
}


@media (hover: hover) and (pointer: fine) {
    .primary-button:hover,
    .secondary-button:hover,
    .text-button:hover,
    .user-button:hover {
        transform: translateY(-1px);
        filter: brightness(1.08);
    }
}

@media (max-width: 800px) {
    .user-button {
        display: none;
    }

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

    .compact-header {
        grid-template-columns: auto 1fr;
    }

    .compact-header .path-centered {
        display: none;
    }
}

@media (max-width: 520px) {
    .auth-card,
    .panel-card {
        padding: 20px 16px;
        border-radius: 18px;
    }

    .auth-brand {
        align-items: flex-start;
    }

    .auth-logo {
        width: 50px;
        height: 50px;
    }

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

    .inline-settings-form {
        grid-template-columns: 1fr;
    }

    .compact-header .header-actions {
        gap: 6px;
    }

    .text-button {
        min-height: 38px;
        padding: 7px 10px;
        font-size: 0.72rem;
    }
}

/* Brugerens personlige visningshistorik */
.recent-section {
    margin: 0 0 clamp(28px, 4vw, 58px);
    padding: clamp(14px, 1.6vw, 24px);
    background: rgba(7, 12, 19, 0.62);
    border: 1px solid var(--border);
    border-radius: clamp(17px, 1.5vw, 24px);
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(15px) saturate(115%);
}

.library-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: clamp(13px, 1.4vw, 22px);
}

.library-heading h2 {
    margin: 2px 0 0;
    font-size: clamp(1.08rem, 1vw + 0.85rem, 1.55rem);
    line-height: 1.15;
}

.library-heading .eyebrow {
    margin: 0;
}

.main-library-heading {
    margin-top: 2px;
}

.recent-count {
    flex: 0 0 auto;
    padding: 7px 11px;
    color: var(--muted);
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 750;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.recent-list {
    display: grid;
    grid-template-columns: repeat(5, minmax(150px, 250px));
    justify-content: start;
    gap: clamp(10px, 1.2vw, 22px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.recent-video-card {
    background: linear-gradient(155deg, rgba(30, 43, 61, 0.96), rgba(13, 20, 30, 0.96));
}

.watch-status {
    width: 100%;
    min-width: 0;
    overflow: hidden;
    color: #c7d5e8;
    font-size: 0.7rem;
    font-weight: 650;
    line-height: 1.25;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.watch-progress {
    width: 100%;
    height: 6px;
    display: block;
    overflow: hidden;
    appearance: none;
    background: rgba(255, 255, 255, 0.09);
    border: 0;
    border-radius: 999px;
}

.watch-progress::-webkit-progress-bar {
    background: rgba(255, 255, 255, 0.09);
    border-radius: 999px;
}

.watch-progress::-webkit-progress-value {
    background: linear-gradient(90deg, var(--accent-strong), var(--accent));
    border-radius: 999px;
}

.watch-progress::-moz-progress-bar {
    background: linear-gradient(90deg, var(--accent-strong), var(--accent));
    border-radius: 999px;
}

@media (max-width: 1100px) {
    .recent-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .recent-section {
        margin-bottom: 26px;
        padding: 12px;
    }

    .recent-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .library-heading {
        align-items: flex-start;
    }

    .recent-count {
        padding: 6px 9px;
        font-size: 0.62rem;
    }
}

@media (max-width: 350px) {
    .recent-list {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 2200px) {
    .recent-list {
        gap: 28px;
    }
}

/* Kompakt visningshistorik og 80 %-markering */
.main-library-heading {
    margin: 0 0 clamp(10px, 1vw, 16px);
}

.watched-badge {
    position: absolute;
    top: 9px;
    left: 9px;
    z-index: 2;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    color: #05220f;
    background: #54e889;
    border: 2px solid rgba(235, 255, 242, 0.92);
    border-radius: 50%;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.38), 0 0 0 3px rgba(84, 232, 137, 0.15);
    font-size: 1rem;
    font-weight: 900;
    line-height: 1;
}

.watched-badge[hidden] {
    display: none !important;
}

.recent-section {
    margin-bottom: clamp(16px, 2vw, 28px);
    padding: clamp(9px, 0.9vw, 13px);
    border-radius: clamp(14px, 1.2vw, 19px);
}

.recent-section .library-heading {
    align-items: center;
    margin-bottom: clamp(8px, 0.8vw, 12px);
}

.recent-section .library-heading h2 {
    font-size: clamp(0.94rem, 0.7vw + 0.78rem, 1.2rem);
}

.recent-section .eyebrow {
    font-size: 0.58rem;
}

.recent-count {
    padding: 5px 8px;
    font-size: 0.58rem;
}

.recent-list {
    grid-template-columns: repeat(5, minmax(100px, 145px));
    gap: clamp(7px, 0.75vw, 12px);
}

.recent-video-card {
    gap: 5px;
    padding: 6px;
    border-radius: 13px;
}

.recent-video-card .visual {
    aspect-ratio: 16 / 9;
    border-radius: 9px;
}

.recent-video-card .play-badge {
    right: 6px;
    bottom: 6px;
    width: 27px;
    height: 27px;
    font-size: 0.58rem;
}

.recent-video-card .watched-badge {
    top: 6px;
    left: 6px;
    width: 24px;
    height: 24px;
    border-width: 1px;
    font-size: 0.78rem;
}

.recent-video-card .item-label {
    min-height: 1.25em;
    display: block;
    overflow: hidden;
    font-size: clamp(0.67rem, 0.35vw + 0.61rem, 0.78rem);
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.recent-video-card .watch-status {
    font-size: 0.58rem;
}

.recent-video-card .watch-progress {
    height: 4px;
}

@media (max-width: 1100px) {
    .recent-list {
        grid-template-columns: repeat(5, minmax(90px, 1fr));
    }
}

@media (max-width: 760px) {
    .recent-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .recent-section {
        padding: 9px;
    }

    .recent-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .watched-badge {
        top: 7px;
        left: 7px;
        width: 27px;
        height: 27px;
        font-size: 0.9rem;
    }
}

/* Selvstændig historikside */
.history-button.is-active,
.history-button[aria-current="page"] {
    color: #e8fff0;
    background: rgba(84, 232, 137, 0.16);
    border-color: rgba(111, 244, 157, 0.48);
    box-shadow: inset 0 0 0 1px rgba(84, 232, 137, 0.08);
}

.history-page {
    width: min(100%, 1900px);
}

.history-page-section {
    padding: clamp(14px, 1.7vw, 28px);
    background: rgba(7, 12, 19, 0.62);
    border: 1px solid var(--border);
    border-radius: clamp(17px, 1.5vw, 26px);
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(15px) saturate(115%);
}

.history-page-section .library-heading h1 {
    margin: 2px 0 0;
    font-size: clamp(1.25rem, 1.2vw + 0.95rem, 1.9rem);
    line-height: 1.15;
}

.history-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(clamp(160px, 13vw, 240px), 1fr));
    gap: clamp(12px, 1.35vw, 24px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.history-video-card {
    gap: 9px;
    padding: clamp(8px, 0.8vw, 13px);
    background: linear-gradient(155deg, rgba(30, 43, 61, 0.96), rgba(13, 20, 30, 0.96));
    border-radius: var(--radius);
}

.history-video-card .visual {
    aspect-ratio: 16 / 9;
}

.history-video-card .item-label {
    min-height: 2.5em;
    display: -webkit-box;
    overflow: hidden;
    font-size: clamp(0.78rem, 0.35vw + 0.72rem, 0.94rem);
    line-height: 1.25;
    text-align: center;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.history-video-card .watch-status {
    font-size: clamp(0.66rem, 0.2vw + 0.62rem, 0.76rem);
}

.history-video-card .watch-progress {
    height: 6px;
}

.history-empty-state {
    min-height: min(46vh, 420px);
}

@media (max-width: 640px) {
    .history-page-section {
        padding: 12px;
    }

    .history-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .history-page-section .library-heading {
        align-items: center;
    }
}

@media (max-width: 380px) {
    .site-header .header-actions {
        gap: 5px;
    }

    .site-header .icon-button {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }

    .history-list {
        gap: 8px;
    }
}

@media (min-width: 2200px) {
    .history-list {
        grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
        gap: 28px;
    }
}

/* Profilbilleder */
.logo.user-avatar {
    object-fit: cover;
    border: 2px solid rgba(114, 212, 255, 0.55);
    border-radius: 50%;
    background: #111925;
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.34);
    filter: none;
}

.account-grid {
    width: min(100%, 1120px);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: clamp(18px, 3vw, 30px);
}

.account-grid .panel-card {
    margin: 0;
}

.account-profile-card,
.account-password-card {
    min-height: 100%;
}

.avatar-settings {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    margin: 24px 0 20px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.035);
}

.account-avatar-preview {
    width: 96px;
    height: 96px;
    object-fit: contain;
    border: 2px solid var(--border-strong);
    border-radius: 50%;
    background: rgba(7, 11, 18, 0.8);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}

.account-avatar-preview.has-avatar {
    object-fit: cover;
}

.avatar-copy h2 {
    margin: 0 0 6px;
    font-size: 1.08rem;
}

.avatar-copy p,
.field-help {
    margin: 0;
    color: var(--muted);
    font-size: 0.8rem;
    line-height: 1.55;
}

.avatar-upload-form {
    margin-top: 4px;
}

.avatar-upload-form input[type="file"] {
    width: 100%;
    padding: 11px;
    color: var(--muted);
    background: rgba(7, 12, 20, 0.76);
    border: 1px solid var(--border);
    border-radius: 13px;
}

.avatar-upload-form input[type="file"]::file-selector-button {
    margin-right: 12px;
    padding: 8px 12px;
    color: var(--text);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 750;
    background: rgba(114, 212, 255, 0.12);
    border: 1px solid rgba(114, 212, 255, 0.28);
    border-radius: 9px;
    cursor: pointer;
}

.remove-avatar-form {
    margin-top: 12px;
}

.danger-button {
    color: #ffd9df;
    border-color: rgba(255, 112, 133, 0.3);
    background: rgba(255, 74, 101, 0.08);
}

.account-password-card h2 {
    margin-bottom: 22px;
}

@media (max-width: 860px) {
    .account-grid {
        grid-template-columns: 1fr;
        max-width: 650px;
    }
}

@media (max-width: 520px) {
    .avatar-settings {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .account-avatar-preview {
        width: 86px;
        height: 86px;
    }
}

/* ===== Dan-TV biblioteksindeks og nyt interface ===== */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.brand-cluster {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.profile-menu {
    position: relative;
    flex: 0 0 auto;
}

.profile-trigger {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    padding: 2px;
    list-style: none;
    cursor: pointer;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.055);
}

.profile-trigger::-webkit-details-marker {
    display: none;
}

.profile-trigger .logo {
    width: 38px;
    height: 38px;
    border-radius: 11px;
}

.profile-trigger .user-avatar {
    border-radius: 11px;
    object-fit: cover;
}

.profile-popover {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: 1500;
    width: min(280px, calc(100vw - 24px));
    display: grid;
    gap: 4px;
    padding: 12px;
    background: rgba(12, 18, 28, 0.99);
    border: 1px solid var(--border-strong);
    border-radius: 15px;
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.5);
}

.profile-popover strong {
    padding: 4px 8px 0;
}

.profile-popover > span {
    padding: 0 8px 8px;
    color: var(--muted);
    font-size: 0.75rem;
}

.profile-popover a {
    padding: 10px 9px;
    border-radius: 10px;
    font-size: 0.82rem;
    font-weight: 700;
}

.profile-popover a:hover {
    background: rgba(114, 212, 255, 0.1);
}

.profile-logout-form {
    margin: 4px 0 0;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}

.profile-logout-form button {
    width: 100%;
    padding: 10px 9px;
    color: #ffd9d9;
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
}

.profile-logout-form button:hover,
.profile-logout-form button:focus-visible {
    color: #fff;
    background: rgba(255, 104, 104, 0.12);
}

.header-search {
    min-width: 0;
    width: min(100%, 760px);
    justify-self: center;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    gap: 7px;
}

.header-search input {
    min-height: 44px;
    background: rgba(4, 8, 14, 0.76);
    border-radius: 13px;
}

.header-search button {
    min-height: 44px;
    color: var(--text);
    background: rgba(114, 212, 255, 0.1);
    border: 1px solid var(--border);
    border-radius: 13px;
    cursor: pointer;
    font-size: 1.3rem;
}

.mobile-menu-toggle {
    display: none;
    width: 44px;
    height: 44px;
    padding: 0;
    color: var(--text);
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid var(--border);
    border-radius: 13px;
    cursor: pointer;
}

.icon-button.is-active {
    color: #061018;
    background: var(--accent);
    border-color: transparent;
}

.library-section,
.continue-section {
    margin-bottom: clamp(26px, 4vw, 56px);
}

.continue-section {
    padding: clamp(14px, 2vw, 24px);
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid var(--border);
    border-radius: 22px;
}

.library-heading,
.library-toolbar,
.compact-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.library-heading h1,
.compact-heading h1 {
    margin: 0;
    font-size: clamp(1.2rem, 1.5vw, 1.8rem);
}

.text-link {
    color: var(--accent);
    font-size: 0.82rem;
    font-weight: 750;
}

.continue-list {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(10px, 1.4vw, 20px);
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.continue-list .visual {
    aspect-ratio: 16 / 9;
}

.continue-list .media-card {
    padding: 8px;
}

.library-toolbar {
    align-items: flex-end;
    margin-bottom: 18px;
}

.breadcrumb {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 0.82rem;
    overflow: hidden;
}

.breadcrumb a,
.breadcrumb strong {
    color: var(--text);
}

.breadcrumb span:last-child,
.breadcrumb strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.library-filters {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    flex-wrap: wrap;
}

.library-filters select {
    width: auto;
    min-width: 150px;
    min-height: 40px;
    padding: 7px 34px 7px 10px;
    font-size: 0.78rem;
}

.filter-chips,
.view-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid var(--border);
    border-radius: 13px;
}

.filter-chip,
.view-toggle button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 5px 10px;
    color: var(--muted);
    background: transparent;
    border: 0;
    border-radius: 9px;
    cursor: pointer;
    font-size: 0.73rem;
    font-weight: 750;
    text-align: center;
    line-height: 1.2;
}

.filter-chip.is-active,
.view-toggle button.is-active {
    color: #061018;
    background: var(--accent);
}

.media-card-wrap {
    position: relative;
    height: 100%;
    transition: transform 180ms ease;
}

.favorite-button {
    --favorite-heart-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78L12 21.23l8.84-8.84a5.5 5.5 0 0 0 0-7.78Z' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 5;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    padding: 0;
    color: rgba(255, 255, 255, 0.92);
    background: rgba(5, 9, 15, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(9px) saturate(130%);
    -webkit-backdrop-filter: blur(9px) saturate(130%);
    font-size: 0;
    line-height: 1;
    transition: transform 150ms ease, color 150ms ease, background 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

/* Ens hjerte i video, musik, fotos og lydbøger – omrids når inaktivt, fyldt når aktivt. */
.favorite-button::before {
    content: "";
    width: 19px;
    height: 19px;
    display: block;
    background: currentColor;
    -webkit-mask: var(--favorite-heart-mask) center / contain no-repeat;
    mask: var(--favorite-heart-mask) center / contain no-repeat;
}

.favorite-button:hover,
.favorite-button:focus-visible {
    transform: scale(1.07);
    color: #ffffff;
    background: rgba(9, 15, 24, 0.88);
    border-color: rgba(255, 255, 255, 0.48);
    box-shadow: 0 7px 18px rgba(0, 0, 0, 0.4), 0 0 0 3px rgba(255, 255, 255, 0.07);
}

.favorite-button:active {
    transform: scale(0.94);
}

.favorite-button.is-favorite {
    --favorite-heart-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.23 3.16 12.39a5.5 5.5 0 0 1 7.78-7.78L12 5.67l1.06-1.06a5.5 5.5 0 0 1 7.78 7.78L12 21.23Z' fill='black'/%3E%3C/svg%3E");
    color: #ff7895;
    background: rgba(63, 8, 25, 0.88);
    border-color: rgba(255, 120, 149, 0.68);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.38), 0 0 0 3px rgba(255, 120, 149, 0.1);
}

.favorite-button.is-favorite:hover,
.favorite-button.is-favorite:focus-visible {
    color: #ff9caf;
    background: rgba(82, 9, 31, 0.94);
    border-color: rgba(255, 156, 175, 0.86);
    box-shadow: 0 7px 18px rgba(0, 0, 0, 0.42), 0 0 0 4px rgba(255, 120, 149, 0.13);
}

.favorite-button.has-error {
    animation: favorite-error 260ms ease 2;
}

@keyframes favorite-error {
    50% { transform: translateX(4px); }
}

.new-badge {
    position: absolute;
    left: 9px;
    top: 9px;
    z-index: 3;
    padding: 5px 8px;
    color: #062115;
    background: #6ee7a9;
    border-radius: 999px;
    font-size: 0.63rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.28);
}

#library-list[data-view="compact"] {
    grid-template-columns: repeat(auto-fill, minmax(clamp(108px, 9vw, 160px), 1fr));
    gap: clamp(8px, 0.9vw, 15px);
}

#library-list[data-view="compact"] .media-card {
    gap: 6px;
    padding: 7px;
    border-radius: 13px;
}

#library-list[data-view="compact"] .visual {
    aspect-ratio: 4 / 5;
    border-radius: 9px;
}

#library-list[data-view="compact"] .item-label {
    min-height: 2.45em;
    font-size: 0.72rem;
}

#library-list[data-view="compact"] .item-meta {
    font-size: 0.63rem;
}

#library-list[data-view="compact"] .favorite-button {
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
}

.audiobook-library-list[data-view="compact"] .favorite-button {
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
}

#library-list[data-view="compact"] .favorite-button::before,
.music-list[data-view="compact"] .favorite-button::before,
.audiobook-library-list[data-view="compact"] .favorite-button::before,
.photo-list[data-view="compact"] .favorite-button::before {
    width: 17px;
    height: 17px;
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 28px;
    color: var(--muted);
    font-size: 0.8rem;
}

.pagination .is-disabled {
    pointer-events: none;
    opacity: 0.4;
}


.help-dialog {
    width: min(92vw, 460px);
    padding: 20px;
    color: var(--text);
    background: #111925;
    border: 1px solid var(--border-strong);
    border-radius: 20px;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.65);
}

.help-dialog::backdrop {
    background: rgba(0, 0, 0, 0.74);
}

.help-dialog-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.help-dialog-heading h2 {
    margin: 0;
}

.help-dialog-heading button {
    width: 38px;
    height: 38px;
    color: var(--text);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border);
    border-radius: 11px;
    cursor: pointer;
}

.help-dialog dl {
    display: grid;
    gap: 8px;
    margin: 18px 0 0;
}

.help-dialog dl div {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 14px;
    align-items: center;
    padding: 9px 0;
    border-bottom: 1px solid var(--border);
}

.help-dialog dt,
.help-dialog dd {
    margin: 0;
}

.help-dialog dt {
    color: var(--accent);
    font-weight: 850;
}

.help-dialog dd {
    color: var(--muted);
}



@media (max-width: 1050px) {
    .continue-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .library-toolbar {
        align-items: stretch;
        flex-direction: column;
    }
    .library-filters {
        justify-content: flex-start;
    }
}

@media (max-width: 640px) {
    .site-header {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto auto auto;
        gap: 8px 10px;
    }

    .brand-title {
        display: block;
        max-width: 52vw;
    }

    .profile-trigger {
        width: 40px;
        height: 40px;
        border-radius: 11px;
    }

    .profile-trigger .logo {
        width: 34px;
        height: 34px;
        border-radius: 9px;
    }

    .header-search,
    .path-centered {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
    }

    .header-search input,
    .header-search button {
        min-height: 40px;
    }

    .mobile-menu-toggle {
        grid-column: 2;
        grid-row: 1;
        display: block;
        width: 40px;
        height: 40px;
    }

    .header-actions {
        grid-column: 1 / -1;
        grid-row: 3;
        display: none;
        justify-content: stretch;
        grid-template-columns: repeat(auto-fit, minmax(42px, 1fr));
        gap: 7px;
        padding-top: 2px;
    }

    .header-actions.is-open {
        display: grid;
    }

    .header-actions .icon-button,
    .header-actions .thumb-form .icon-button {
        width: 100%;
    }

    .profile-popover {
        position: fixed;
        top: 60px;
        left: 12px;
    }

    .continue-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .library-filters {
        display: grid;
        grid-template-columns: 1fr;
    }

    .library-filters select {
        width: 100%;
        min-height: 48px;
        padding-left: 16px;
        padding-right: 44px;
        text-align: center;
        text-align-last: center;
    }

    .filter-chips,
    .view-toggle {
        justify-content: stretch;
        align-items: stretch;
    }

    .filter-chip,
    .view-toggle button {
        flex: 1;
        min-height: 48px;
        padding: 0 12px;
    }

    .pagination {
        gap: 8px;
        flex-wrap: wrap;
    }
}

@media (max-width: 390px) {
    .continue-list {
        grid-template-columns: 1fr;
    }
    .brand-title {
        max-width: 44vw;
        font-size: 0.78rem;
    }
}

.mobile-favorites-shortcut {
    display: none;
    width: 40px;
    height: 40px;
    place-items: center;
    color: var(--text);
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.mobile-favorites-shortcut.is-active {
    color: #061018;
    background: var(--accent);
    border-color: transparent;
}

@media (max-width: 640px) {
    .site-header {
        grid-template-columns: minmax(0, 1fr) auto auto;
    }

    .mobile-favorites-shortcut {
        grid-column: 2;
        grid-row: 1;
        display: grid;
    }

    .mobile-menu-toggle {
        grid-column: 3;
    }
}


/* Favorit-genvej og sikker admin-sletning */
.mobile-favorites-shortcut,
.header-actions .icon-button[aria-label="Favoritter"] {
    color: #ff6f91;
    font-size: 1.2rem;
}

.auth-links {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
    font-size: .92rem;
}

.account-email-card {
    grid-column: 1 / -1;
}


.mobile-favorites-shortcut.is-active,
.header-actions .icon-button[aria-label="Favoritter"].is-active {
    color: #081018;
}

/* Botfælde på login: visuelt skjult uden display:none, så simple bots stadig ser feltet. */
.login-honeypot {
    position: absolute !important;
    left: -10000px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.login-honeypot input {
    width: 1px !important;
    min-height: 1px !important;
    padding: 0 !important;
    border: 0 !important;
}

/* Invitationer */
.invite-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 14px;
    margin-bottom: 10px;
}

.invite-form label {
    min-width: 0;
}

.invite-recipient {
    margin: -4px 0 20px;
    padding: 11px 13px;
    color: var(--muted);
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid var(--border);
    border-radius: 12px;
    line-height: 1.45;
    word-break: break-word;
}

.invite-recipient strong {
    color: var(--text);
}

.invite-list {
    display: grid;
    gap: 10px;
    margin-top: 20px;
}

.invite-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 14px;
    background: rgba(7, 12, 19, 0.62);
    border: 1px solid var(--border);
    border-radius: 13px;
}

.invite-row > div {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.invite-row strong {
    overflow-wrap: anywhere;
}

.invite-row span {
    color: var(--muted);
    font-size: 0.75rem;
    line-height: 1.45;
}

.invite-row form {
    flex: 0 0 auto;
}

@media (max-width: 680px) {
    .invite-form {
        grid-template-columns: 1fr;
    }

    .invite-form .primary-button {
        width: 100%;
    }

    .invite-row {
        align-items: stretch;
        flex-direction: column;
    }

    .invite-row form,
    .invite-row .secondary-button {
        width: 100%;
    }
}

/* Børneprofiler og mappeadgang */
.role-badge.child {
    color: #fff3cf;
    background: rgba(255, 188, 66, 0.14);
    border-color: rgba(255, 205, 112, 0.34);
}

.child-folder-picker {
    grid-column: 1 / -1;
    min-width: 0;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 13px;
    background: rgba(0, 0, 0, 0.16);
}

.child-folder-picker .field-label {
    display: block;
    margin-bottom: 9px;
    color: var(--text);
    font-size: 0.78rem;
    font-weight: 750;
}

.folder-permission-list {
    max-height: 250px;
    overflow: auto;
    display: grid;
    gap: 3px;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: rgba(4, 8, 13, 0.65);
    scrollbar-gutter: stable;
}

.folder-permission-option {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    padding: 7px 8px;
    border-radius: 8px;
    color: var(--muted);
    font-size: 0.76rem;
    cursor: pointer;
}

.folder-permission-option:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.055);
}

.folder-permission-option input {
    width: 17px;
    min-width: 17px;
    min-height: 17px;
    height: 17px;
    margin: 0;
    accent-color: var(--accent);
}

.folder-permission-option span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.folder-permission-option.folder-depth-1 { padding-left: 20px; }
.folder-permission-option.folder-depth-2 { padding-left: 32px; }
.folder-permission-option.folder-depth-3 { padding-left: 44px; }
.folder-permission-option.folder-depth-4 { padding-left: 56px; }
.folder-permission-option.folder-depth-5 { padding-left: 68px; }
.folder-permission-option.folder-depth-6 { padding-left: 80px; }
.folder-permission-option.folder-depth-7 { padding-left: 92px; }
.folder-permission-option.folder-depth-8 { padding-left: 104px; }

.invite-form .child-folder-picker {
    width: 100%;
}
.invite-form .child-folder-picker,
.invite-form .primary-button {
    grid-column: 1 / -1;
}
.invite-form .primary-button {
    justify-self: end;
}
.child-folder-picker {
    padding: 0;
    overflow: hidden;
}
.child-folder-picker > summary {
    padding: 11px 12px;
    cursor: pointer;
    color: var(--text);
    font-size: 0.78rem;
    font-weight: 750;
}
.child-folder-picker-inner {
    padding: 0 12px 12px;
}

/* Flyt hele videokortet samlet på hover, så play, favorit og papirkurv følger thumbnailen. */
@media (hover: hover) and (pointer: fine) {
    .media-card-wrap:hover {
        z-index: 2;
        transform: translateY(-5px);
    }

    .media-card-wrap:hover .media-card {
        transform: none;
        background: linear-gradient(155deg, rgba(31, 46, 66, 0.98), rgba(16, 24, 36, 0.98));
        border-color: var(--border-strong);
        box-shadow: var(--shadow);
    }
}



/* Fjern kun den aktuelle brugers historikpost fra "Fortsæt med at se". */
.continue-remove-button {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 6;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    padding: 0 0 2px;
    color: rgba(255, 255, 255, 0.88);
    background: rgba(3, 7, 12, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 7px 16px rgba(0, 0, 0, 0.3);
    font: inherit;
    font-size: 1.25rem;
    line-height: 1;
    transition: background 150ms ease, color 150ms ease, transform 150ms ease;
}

.continue-remove-button:hover,
.continue-remove-button:focus-visible {
    color: #fff;
    background: rgba(166, 39, 52, 0.94);
    transform: scale(1.06);
}

.continue-remove-button:disabled {
    cursor: wait;
    opacity: 0.58;
}

.continue-remove-button.has-error {
    animation: favorite-error 260ms ease 2;
}

@media (max-width: 640px) {
    .continue-remove-button {
        top: 12px;
        right: 12px;
        width: 32px;
        height: 32px;
    }
}

/* Valgfrit musikbibliotek. */
.mobile-music-shortcut{display:none;width:42px;height:42px;place-items:center;border-radius:50%;color:var(--text);text-decoration:none;background:rgba(255,255,255,.06);border:1px solid var(--border);font-size:1.35rem}.mobile-music-shortcut.is-active{color:var(--accent);border-color:var(--accent)}
.music-search{display:flex;gap:8px;min-width:min(100%,420px)}.music-search input{flex:1;min-width:0}.music-search button{padding:10px 16px;border:0;border-radius:10px;background:var(--accent);color:#071018;font-weight:800;cursor:pointer}.music-track-card .item-meta{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.music-player{position:fixed;z-index:80;left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));display:grid;grid-template-columns:64px minmax(120px,1fr) auto minmax(240px,520px) auto auto;align-items:center;gap:12px;padding:10px 12px;background:rgba(7,12,20,.98);border:1px solid var(--border-strong);border-radius:18px;box-shadow:0 18px 50px rgba(0,0,0,.5)}.music-player[hidden]{display:none}.music-player img{width:64px;height:64px;object-fit:cover;border-radius:12px}.music-player-info{display:grid;min-width:0}.music-player-info strong,.music-player-info span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.music-player-info span{color:var(--muted);font-size:.84rem}.music-player audio{width:100%}.music-player button{width:42px;height:42px;border-radius:50%;border:1px solid var(--border);background:rgba(255,255,255,.07);color:var(--text);cursor:pointer}.music-player-open main{padding-bottom:110px}
@media(max-width:800px){.mobile-music-shortcut{display:grid}.music-player{grid-template-columns:48px 1fr auto auto;gap:8px}.music-player img{width:48px;height:48px}.music-player audio{grid-column:1/-1}.music-player #music-prev,.music-player #music-next{display:none}.music-search{width:100%;min-width:0}.library-toolbar{align-items:stretch}}

/* Musikmapper kan afspilles direkte som en samlet kø. */
.music-folder-card-wrap {
    position: relative;
}

.music-folder-play-button {
    position: absolute;
    right: 22px;
    bottom: 58px;
    z-index: 6;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    padding: 0 0 0 2px;
    color: #071019;
    background: rgba(126, 219, 255, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.58);
    border-radius: 50%;
    box-shadow: 0 9px 20px rgba(0, 0, 0, 0.42);
    cursor: pointer;
    font: inherit;
    font-size: 0.82rem;
    transition: transform 150ms ease, filter 150ms ease, opacity 150ms ease;
}

.music-folder-play-button:hover,
.music-folder-play-button:focus-visible {
    transform: scale(1.08);
    filter: brightness(1.08);
}

.music-folder-play-button:disabled {
    cursor: wait;
    opacity: 0.62;
}

.music-folder-play-button.is-loading {
    animation: music-folder-play-pulse 800ms ease-in-out infinite alternate;
}

@keyframes music-folder-play-pulse {
    from { transform: scale(0.94); }
    to { transform: scale(1.06); }
}

@media (max-width: 640px) {
    .music-folder-play-button {
        right: 18px;
        bottom: 54px;
        width: 38px;
        height: 38px;
    }
}


/* Favoritalbums og sporlisten i musikbiblioteket. */
.music-folder-card-wrap .music-album-favorite-button {
    top: 12px;
    right: 12px;
}

.music-track-table-wrap {
    margin-top: 18px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: rgba(8, 13, 21, 0.78);
    box-shadow: 0 16px 35px rgba(0, 0, 0, 0.22);
}

.music-track-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.music-track-table th,
.music-track-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.music-track-table th:first-child,
.music-track-table td:first-child {
    width: 68px;
    text-align: center;
}

.music-track-table th:nth-child(3),
.music-track-table td:nth-child(3) {
    width: 120px;
}

.music-track-table th:nth-child(4),
.music-track-table td:nth-child(4) {
    width: 130px;
}

.music-track-table tbody tr:last-child td {
    border-bottom: 0;
}

.music-track-table tbody tr:hover {
    background: rgba(126, 219, 255, 0.055);
}

.music-track-table td strong,
.music-track-table td span {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.music-track-table td > span:not(.music-filetype) {
    margin-top: 3px;
    color: var(--muted);
    font-size: 0.84rem;
}

.music-filetype {
    display: inline-flex !important;
    width: fit-content;
    padding: 4px 8px;
    color: var(--text);
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.music-track-list-play {
    width: 38px;
    height: 38px;
    padding: 0 0 0 2px;
    color: #071019;
    background: var(--accent);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    font: inherit;
    font-size: 0.78rem;
    transition: transform 150ms ease, filter 150ms ease;
}

.music-track-list-play:hover,
.music-track-list-play:focus-visible {
    transform: scale(1.08);
    filter: brightness(1.08);
}

@media (max-width: 680px) {
    .music-track-table-wrap {
        overflow: visible;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .music-track-table,
    .music-track-table tbody,
    .music-track-table tr,
    .music-track-table td {
        display: block;
        width: 100% !important;
    }

    .music-track-table thead {
        display: none;
    }

    .music-track-table tr {
        position: relative;
        margin-bottom: 10px;
        padding: 12px 12px 12px 62px;
        border: 1px solid var(--border);
        border-radius: 14px;
        background: rgba(8, 13, 21, 0.78);
    }

    .music-track-table td {
        padding: 3px 0;
        border: 0;
    }

    .music-track-table td:first-child {
        position: absolute;
        left: 12px;
        top: 50%;
        width: 38px !important;
        transform: translateY(-50%);
    }

    .music-track-table td[data-label]::before {
        content: attr(data-label) ': ';
        color: var(--muted);
        font-size: 0.75rem;
    }

    .music-track-table td[data-label="Navn"]::before {
        display: none;
    }

    .music-filetype {
        display: inline-flex !important;
    }
}


/* Video-lignende filtre og kortstørrelse i musikbiblioteket. */
.music-library-toolbar {
    align-items: center;
}

.music-library-toolbar .breadcrumb {
    flex: 1 1 auto;
}

.music-library-filters {
    flex: 0 1 auto;
    margin-left: auto;
}

.music-list[data-view="compact"] {
    grid-template-columns: repeat(auto-fill, minmax(clamp(108px, 9vw, 160px), 1fr));
    gap: clamp(8px, 0.9vw, 15px);
}

.music-list[data-view="compact"] .media-card {
    gap: 6px;
    padding: 7px;
    border-radius: 13px;
}

.music-list[data-view="compact"] .visual {
    aspect-ratio: 4 / 5;
    border-radius: 9px;
}

.music-list[data-view="compact"] .item-label {
    min-height: 2.45em;
    font-size: 0.72rem;
}

.music-list[data-view="compact"] .item-meta {
    font-size: 0.63rem;
}

.music-list[data-view="compact"] .favorite-button {
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
}

.music-list[data-view="compact"] .music-folder-play-button {
    right: 15px;
    bottom: 47px;
    width: 34px;
    height: 34px;
    font-size: 0.72rem;
}

@media (max-width: 1050px) {
    .music-library-toolbar {
        align-items: stretch;
    }

    .music-library-filters {
        width: 100%;
        margin-left: 0;
        justify-content: flex-start;
    }
}


/* Lydbøger genbruger musikkortenes layout og tilføjer gemt fremdrift. */
.audiobook-track-table th:nth-child(5),
.audiobook-track-table td:nth-child(5) {
    width: 210px;
}
.audiobook-progress-text {
    margin-bottom: 6px;
}
.audiobook-player-info span {
    color: var(--muted);
}
@media (max-width: 680px) {
    .audiobook-track-table td[data-label="Fremdrift"] .watch-progress {
        margin-top: 5px;
    }
}

/* Lydbøger: mapper er kun navigation; favoritter og play ligger på filerne. */
.audiobook-track-copy {
    min-width: 0;
    display: block;
}

.audiobook-track-copy .item-label,
.audiobook-track-copy .item-meta {
    display: block;
}

.audiobook-list-filetype,
.audiobook-list-bitrate,
.audiobook-list-progress {
    display: none;
}

.audiobook-track-card-wrap .audiobook-favorite-button {
    top: 12px;
    right: 12px;
}

.audiobook-library-list[data-view="list"] {
    display: block;
}

.audiobook-library-list[data-view="list"] .media-item {
    margin-bottom: 9px;
}

.audiobook-library-list[data-view="list"] .media-card-wrap {
    height: auto;
}

.audiobook-library-list[data-view="list"] .media-card {
    min-height: 72px;
    display: grid;
    grid-template-columns: 54px minmax(180px, 1fr) 78px 110px minmax(170px, 220px);
    align-items: center;
    gap: 14px;
    padding: 8px 62px 8px 8px;
    border-radius: 14px;
}

.audiobook-library-list[data-view="list"] .folder-item .media-card {
    grid-template-columns: 54px minmax(0, 1fr);
    padding-right: 12px;
}

.audiobook-library-list[data-view="list"] .visual {
    width: 54px;
    height: 54px;
    aspect-ratio: 1;
    border-radius: 10px;
}

.audiobook-library-list[data-view="list"] .visual img.square {
    width: 34px;
    height: 34px;
}

.audiobook-library-list[data-view="list"] .play-badge {
    right: 4px;
    bottom: 4px;
    width: 23px;
    height: 23px;
    font-size: 0.54rem;
}

.audiobook-library-list[data-view="list"] .audiobook-track-copy .item-label {
    min-height: 0;
    font-size: 0.88rem;
}

.audiobook-library-list[data-view="list"] .audiobook-track-copy .item-meta {
    margin-top: 3px;
    font-size: 0.72rem;
}

.audiobook-library-list[data-view="list"] .audiobook-list-filetype,
.audiobook-library-list[data-view="list"] .audiobook-list-bitrate,
.audiobook-library-list[data-view="list"] .audiobook-list-progress {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--text);
    font-size: 0.76rem;
}

.audiobook-list-label {
    color: var(--muted);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.audiobook-library-list[data-view="list"] .audiobook-card-progress {
    display: none;
}

.audiobook-library-list[data-view="list"] .audiobook-list-progress .watch-progress {
    width: 100%;
    margin-top: 2px;
}

.audiobook-library-list[data-view="list"] .favorite-button {
    top: 50%;
    right: 12px;
    width: 36px;
    height: 36px;
    transform: translateY(-50%);
}

.audiobook-library-list[data-view="list"] .favorite-button:hover,
.audiobook-library-list[data-view="list"] .favorite-button:focus-visible {
    transform: translateY(-50%) scale(1.08);
}

.audiobook-library-list[data-view="compact"] .audiobook-list-filetype,
.audiobook-library-list[data-view="compact"] .audiobook-list-bitrate,
.audiobook-library-list[data-view="compact"] .audiobook-list-progress,
.audiobook-library-list[data-view="large"] .audiobook-list-filetype,
.audiobook-library-list[data-view="large"] .audiobook-list-bitrate,
.audiobook-library-list[data-view="large"] .audiobook-list-progress {
    display: none;
}

@media (max-width: 900px) {
    .audiobook-library-list[data-view="list"] .media-card {
        grid-template-columns: 52px minmax(150px, 1fr) 70px 96px minmax(140px, 180px);
        gap: 10px;
    }
}

@media (max-width: 720px) {
    .audiobook-library-list[data-view="list"] .media-card,
    .audiobook-library-list[data-view="list"] .folder-item .media-card {
        grid-template-columns: 52px minmax(0, 1fr);
        align-items: start;
        padding: 9px 58px 9px 9px;
    }

    .audiobook-library-list[data-view="list"] .folder-item .media-card {
        align-items: center;
        padding-right: 10px;
    }

    .audiobook-library-list[data-view="list"] .audiobook-list-filetype,
    .audiobook-library-list[data-view="list"] .audiobook-list-bitrate,
    .audiobook-library-list[data-view="list"] .audiobook-list-progress {
        grid-column: 2;
        flex-direction: row;
        align-items: center;
        gap: 7px;
    }

    .audiobook-library-list[data-view="list"] .audiobook-list-progress {
        display: grid;
        grid-template-columns: auto 1fr;
    }

    .audiobook-library-list[data-view="list"] .audiobook-list-progress .watch-progress {
        grid-column: 1 / -1;
    }
}


/* Hold videobibliotekets titel og filtre på samme vandrette centerlinje. */
.library-section > .library-toolbar {
    align-items: center;
}
.library-section > .library-toolbar > .breadcrumb {
    min-height: 40px;
}


/* Fælles mobilnavigation: på små skærme bruges burger-menuen som eneste navigation. */
.desktop-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
}

.mobile-navigation {
    display: none;
}

@media (max-width: 640px) {
    .site-header {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        gap: 8px 10px;
    }

    .desktop-profile-menu,
    .desktop-header-actions,
    .mobile-music-shortcut,
    .mobile-favorites-shortcut {
        display: none !important;
    }

    .brand-cluster {
        grid-column: 1;
        grid-row: 1;
    }

    .brand-title {
        max-width: 68vw;
    }

    .mobile-menu-toggle {
        grid-column: 2;
        grid-row: 1;
        display: block;
    }

    .header-search,
    .path-centered {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .header-actions {
        position: absolute;
        top: calc(100% + 1px);
        left: max(10px, env(safe-area-inset-left));
        right: max(10px, env(safe-area-inset-right));
        grid-column: auto;
        grid-row: auto;
        display: none;
        max-height: calc(100vh - 92px);
        overflow-y: auto;
        padding: 10px;
        background: rgba(8, 13, 21, 0.98);
        border: 1px solid var(--border-strong);
        border-radius: 16px;
        box-shadow: 0 18px 48px rgba(0, 0, 0, 0.48);
        backdrop-filter: blur(18px);
    }

    .header-actions.is-open {
        display: block;
    }

    .mobile-navigation {
        display: grid;
        gap: 5px;
    }

    .mobile-navigation-link {
        width: 100%;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding: 10px 13px;
        color: var(--text);
        text-align: left;
        background: transparent;
        border: 0;
        border-radius: 11px;
        cursor: pointer;
        font: inherit;
        font-size: 0.92rem;
        font-weight: 720;
    }

    .mobile-navigation-link:hover,
    .mobile-navigation-link:focus-visible {
        background: rgba(255, 255, 255, 0.07);
    }

    .mobile-navigation-link.is-active {
        color: #061018;
        background: var(--accent);
    }

    .mobile-navigation-form {
        margin: 0;
    }

    .mobile-navigation-divider {
        height: 1px;
        margin: 5px 3px;
        background: var(--border);
    }

    .mobile-navigation-logout .mobile-navigation-link {
        color: #ff9b9b;
    }
}

/* Listevisning til videobiblioteket. */
#library-list[data-view="list"] {
    display: block;
}

#library-list[data-view="list"] .media-item {
    margin-bottom: 9px;
}

#library-list[data-view="list"] .media-card-wrap {
    height: auto;
}

#library-list[data-view="list"] .media-card {
    min-height: 74px;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    gap: 2px 12px;
    padding: 8px 62px 8px 8px;
    border-radius: 14px;
}

#library-list[data-view="list"] .folder-item .media-card {
    padding-right: 10px;
}

#library-list[data-view="list"] .visual {
    grid-column: 1;
    grid-row: 1 / 3;
    width: 58px;
    height: 58px;
    aspect-ratio: 1;
    border-radius: 10px;
}

#library-list[data-view="list"] .visual img.thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#library-list[data-view="list"] .visual img.square {
    width: 36px;
    height: 36px;
}

#library-list[data-view="list"] .item-label {
    grid-column: 2;
    grid-row: 1;
    min-height: 0;
    align-self: end;
    font-size: 0.9rem;
}

#library-list[data-view="list"] .folder-item .item-label {
    grid-row: 1 / 3;
    align-self: center;
}

#library-list[data-view="list"] .item-meta {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    font-size: 0.72rem;
}

#library-list[data-view="list"] .play-badge {
    right: 4px;
    bottom: 4px;
    width: 24px;
    height: 24px;
    font-size: 0.55rem;
}

#library-list[data-view="list"] .favorite-button {
    top: 50%;
    right: 12px;
    width: 36px;
    height: 36px;
    transform: translateY(-50%);
}

#library-list[data-view="list"] .favorite-button:hover,
#library-list[data-view="list"] .favorite-button:focus-visible {
    transform: translateY(-50%) scale(1.08);
}

/* Listevisning til musikmapper, favoritter, nye numre og søgeresultater. */
.music-list[data-view="list"] {
    display: block;
}

.music-list[data-view="list"] .media-item {
    margin-bottom: 9px;
}

.music-list[data-view="list"] .media-card-wrap {
    height: auto;
}

.music-list[data-view="list"] .media-card {
    min-height: 74px;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    gap: 2px 12px;
    padding: 8px;
    border-radius: 14px;
}

.music-list[data-view="list"] .music-folder-card-wrap .media-card {
    padding-right: 104px;
}

.music-list[data-view="list"] .visual {
    grid-column: 1;
    grid-row: 1 / 3;
    width: 58px;
    height: 58px;
    aspect-ratio: 1;
    border-radius: 10px;
}

.music-list[data-view="list"] .visual img.thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.music-list[data-view="list"] .visual img.square {
    width: 36px;
    height: 36px;
}

.music-list[data-view="list"] .item-label {
    grid-column: 2;
    grid-row: 1;
    min-height: 0;
    align-self: end;
    font-size: 0.9rem;
}

.music-list[data-view="list"] .folder-item .item-label {
    grid-row: 1 / 3;
    align-self: center;
}

.music-list[data-view="list"] .item-meta {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    font-size: 0.72rem;
}

.music-list[data-view="list"] .play-badge {
    right: 4px;
    bottom: 4px;
    width: 24px;
    height: 24px;
    font-size: 0.55rem;
}

.music-list[data-view="list"] .favorite-button {
    top: 50%;
    right: 12px;
    width: 36px;
    height: 36px;
    transform: translateY(-50%);
}

.music-list[data-view="list"] .favorite-button:hover,
.music-list[data-view="list"] .favorite-button:focus-visible {
    transform: translateY(-50%) scale(1.08);
}

.music-list[data-view="list"] .music-folder-play-button {
    top: 50%;
    right: 58px;
    bottom: auto;
    width: 38px;
    height: 38px;
    transform: translateY(-50%);
}

.music-list[data-view="list"] .music-folder-play-button:hover,
.music-list[data-view="list"] .music-folder-play-button:focus-visible {
    transform: translateY(-50%) scale(1.06);
}

@media (max-width: 640px) {
    #library-list[data-view="list"] .media-card,
    .music-list[data-view="list"] .media-card {
        min-height: 68px;
        grid-template-columns: 52px minmax(0, 1fr);
        padding-top: 7px;
        padding-bottom: 7px;
    }

    #library-list[data-view="list"] .visual,
    .music-list[data-view="list"] .visual {
        width: 52px;
        height: 52px;
    }

    #library-list[data-view="list"] .item-label,
    .music-list[data-view="list"] .item-label {
        font-size: 0.84rem;
    }
}

/* Mobilheader: burger, søgning og søgeknap på én linje. */
@media (max-width: 640px) {
    .site-header {
        grid-template-columns: 44px minmax(0, 1fr);
        grid-template-rows: auto;
        align-items: center;
        gap: 8px;
        min-height: 64px;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .brand-cluster {
        display: none !important;
    }

    .mobile-menu-toggle {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
        width: 44px;
        height: 44px;
    }

    .header-search,
    .path-centered {
        grid-column: 2;
        grid-row: 1;
        width: 100%;
        min-width: 0;
    }

    .header-search {
        grid-template-columns: minmax(0, 1fr) 44px;
        gap: 7px;
    }

    .header-search input,
    .header-search button {
        min-height: 44px;
    }

    .header-actions {
        top: calc(100% + 1px);
    }
}


/* Lydbogsmetadata: filnavn på kortene og fold-ud detaljer i afspilleren. */
.audiobook-folder-item .audiobook-track-copy {
    align-self: center;
}

.audiobook-player-info {
    position: relative;
}

.audiobook-player-details {
    width: max-content;
    max-width: min(420px, calc(100vw - 32px));
    margin-top: 3px;
    font-size: 0.74rem;
}

.audiobook-player-details summary {
    width: max-content;
    color: var(--accent);
    cursor: pointer;
    font-weight: 800;
    list-style: none;
}

.audiobook-player-details summary::-webkit-details-marker {
    display: none;
}

.audiobook-player-details summary::before {
    content: 'ⓘ ';
}

.audiobook-player-details dl {
    position: absolute;
    z-index: 5;
    left: 0;
    bottom: calc(100% + 14px);
    width: min(420px, calc(100vw - 32px));
    display: grid;
    gap: 7px;
    margin: 0;
    padding: 14px;
    background: rgba(7, 12, 20, 0.99);
    border: 1px solid var(--border-strong);
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
}

.audiobook-player-details dl > div {
    display: grid;
    grid-template-columns: minmax(105px, 0.45fr) minmax(0, 1fr);
    gap: 12px;
}

.audiobook-player-details dt {
    color: var(--muted);
    font-weight: 750;
}

.audiobook-player-details dd {
    min-width: 0;
    margin: 0;
    color: var(--text);
    overflow-wrap: anywhere;
}

@media (max-width: 800px) {
    .audiobook-player-details dl {
        position: fixed;
        left: max(12px, env(safe-area-inset-left));
        right: max(12px, env(safe-area-inset-right));
        bottom: calc(132px + env(safe-area-inset-bottom));
        width: auto;
    }
}

/* Fælles handlinger under kortene i Fortsæt-sektionerne. */
.continue-list .media-card-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.continue-list .media-card-wrap > .media-card {
    flex: 1 1 auto;
    height: auto;
}

.continue-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.continue-play-action,
.continue-card-actions .continue-remove-button {
    position: static;
    width: auto;
    height: 34px;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 11px;
    border-radius: 10px;
    box-shadow: none;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
    transform: none;
}

.continue-play-action {
    flex: 1 1 auto;
    color: #071018;
    background: var(--accent);
    border: 1px solid transparent;
    cursor: pointer;
}

.continue-play-action:hover,
.continue-play-action:focus-visible {
    background: var(--accent-strong);
    transform: translateY(-1px);
}

.continue-card-actions .continue-remove-button {
    flex: 0 0 auto;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(166, 39, 52, 0.2);
    border: 1px solid rgba(255, 105, 122, 0.3);
}

.continue-card-actions .continue-remove-button:hover,
.continue-card-actions .continue-remove-button:focus-visible {
    color: #fff;
    background: rgba(166, 39, 52, 0.94);
    transform: translateY(-1px);
}

/* Video bruger samme toolbar- og filterflow som musik og lydbøger på mobil. */
@media (max-width: 1050px) {
    .library-toolbar.music-library-toolbar {
        align-items: stretch;
    }

    .library-filters.music-library-filters {
        width: 100%;
        margin-left: 0;
        justify-content: flex-start;
    }
}

@media (max-width: 640px) {
    .library-toolbar.music-library-toolbar {
        gap: 12px;
    }

    .library-filters.music-library-filters {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }

    .library-filters.music-library-filters > label,
    .library-filters.music-library-filters select,
    .library-filters.music-library-filters .filter-chips,
    .library-filters.music-library-filters .view-toggle {
        width: 100%;
    }

    .continue-play-action,
    .continue-card-actions .continue-remove-button {
        height: 36px;
        padding-inline: 10px;
    }
}

/* Fortsæt-kort: afspil og fjern ligger som lige store overlays på billedet. */
.continue-list .media-card-wrap {
    gap: 0;
}

.continue-list .continue-play-overlay,
.continue-list .continue-remove-overlay {
    position: absolute;
    top: auto;
    bottom: 10px;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    margin: 0;
    padding: 0;
    border-radius: 50%;
    cursor: pointer;
    font: inherit;
    line-height: 1;
    z-index: 7;
}

.continue-list .continue-play-overlay {
    right: 10px;
    left: auto;
    padding-left: 2px;
}

.continue-list .continue-remove-overlay {
    right: auto;
    left: 10px;
    color: rgba(255, 255, 255, 0.92);
    background: rgba(3, 7, 12, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.24);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
    font-size: 1.25rem;
}

.continue-list .continue-remove-overlay:hover,
.continue-list .continue-remove-overlay:focus-visible {
    color: #fff;
    background: rgba(166, 39, 52, 0.94);
    transform: scale(1.06);
}

.continue-list .continue-play-overlay:hover,
.continue-list .continue-play-overlay:focus-visible {
    background: var(--accent-strong);
    transform: scale(1.06);
}

@media (max-width: 640px) {
    .continue-list .continue-play-overlay,
    .continue-list .continue-remove-overlay {
        top: auto;
        bottom: 8px;
        width: 34px;
        height: 34px;
    }

    .continue-list .continue-remove-overlay {
        right: auto;
        left: 8px;
    }
}

/* Indlejrede M4B/MP3-kapitler i lydbogsafspilleren. */
.audiobook-player-chapters {
    width: max-content;
    max-width: min(460px, calc(100vw - 32px));
    margin-top: 3px;
    font-size: 0.74rem;
}

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

.audiobook-player-chapters summary {
    width: min(100%, 420px);
    color: var(--accent);
    cursor: pointer;
    font-weight: 800;
    list-style: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.audiobook-player-chapters summary::-webkit-details-marker {
    display: none;
}

.audiobook-player-chapters summary::before {
    content: '☷ ';
}

.audiobook-chapter-popover {
    position: absolute;
    z-index: 6;
    left: 0;
    bottom: calc(100% + 14px);
    width: min(460px, calc(100vw - 32px));
    max-height: min(58vh, 480px);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 10px;
    padding: 12px;
    background: rgba(7, 12, 20, 0.99);
    border: 1px solid var(--border-strong);
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
}

.audiobook-chapter-navigation {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 36px;
    align-items: center;
    gap: 9px;
}

.audiobook-player .audiobook-chapter-navigation button {
    width: 36px;
    height: 36px;
    border-radius: 50%;
}

.audiobook-chapter-navigation span {
    color: var(--text);
    text-align: center;
    font-weight: 800;
}

.audiobook-chapter-list {
    min-height: 0;
    max-height: 350px;
    overflow-y: auto;
    display: grid;
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
    overscroll-behavior: contain;
}

.audiobook-player .audiobook-chapter-list button {
    width: 100%;
    height: auto;
    min-height: 40px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    color: var(--text);
    text-align: left;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid transparent;
    border-radius: 9px;
}

.audiobook-player .audiobook-chapter-list button:hover,
.audiobook-player .audiobook-chapter-list button:focus-visible {
    background: rgba(255, 255, 255, 0.09);
    border-color: var(--border);
}

.audiobook-player .audiobook-chapter-list button.is-active {
    color: var(--text);
    background: rgba(126, 219, 255, 0.13);
    border-color: var(--accent);
}

.audiobook-chapter-list button span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 750;
}

.audiobook-chapter-list button span:last-child {
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 800px) {
    .audiobook-chapter-popover {
        position: fixed;
        left: max(12px, env(safe-area-inset-left));
        right: max(12px, env(safe-area-inset-right));
        bottom: calc(132px + env(safe-area-inset-bottom));
        width: auto;
        max-height: min(58vh, 460px);
    }
}

/* Fototidslinje */
.photo-timeline-heading {
    grid-column: 1 / -1;
    min-width: 0;
    display: grid;
    grid-template-columns: auto auto minmax(32px, 1fr);
    align-items: center;
    gap: 10px;
    margin: clamp(14px, 2vw, 28px) 0 2px;
    padding: 0 2px;
    list-style: none;
}

.photo-timeline-heading:first-child {
    margin-top: 2px;
}

.photo-timeline-heading h2 {
    margin: 0;
    color: var(--text);
    font-size: clamp(0.92rem, 1.2vw, 1.08rem);
    font-weight: 800;
    letter-spacing: 0.015em;
    white-space: nowrap;
}

.photo-timeline-marker {
    width: 11px;
    height: 11px;
    border: 2px solid rgba(255, 255, 255, 0.94);
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 4px rgba(126, 219, 255, 0.12), 0 0 18px rgba(126, 219, 255, 0.3);
}

.photo-timeline-rule {
    height: 1px;
    min-width: 0;
    background: linear-gradient(90deg, rgba(126, 219, 255, 0.48), rgba(126, 219, 255, 0.03));
}

.photo-timeline-list[data-view="list"] .photo-timeline-heading {
    margin: 22px 0 9px;
}

.photo-timeline-list[data-view="list"] .photo-timeline-heading:first-child {
    margin-top: 2px;
}

@media (max-width: 640px) {
    .photo-timeline-heading {
        gap: 8px;
        margin-top: 18px;
        padding-inline: 1px;
    }

    .photo-timeline-marker {
        width: 9px;
        height: 9px;
        box-shadow: 0 0 0 3px rgba(126, 219, 255, 0.11);
    }
}

/* Fotoalbum */
.photo-list .visual {
    aspect-ratio: 4 / 3;
}

.photo-list .photo-thumb-visual img.thumb {
    object-fit: cover;
}

/* Opløsning, format og filstørrelse hører kun hjemme i listevisningen. */
.photo-list .item-meta {
    display: none;
}

.photo-list[data-view="compact"] {
    grid-template-columns: repeat(auto-fill, minmax(clamp(112px, 10vw, 170px), 1fr));
    gap: clamp(8px, 0.9vw, 15px);
}

.photo-list[data-view="compact"] .media-card {
    gap: 6px;
    padding: 7px;
    border-radius: 13px;
}

.photo-list[data-view="compact"] .visual {
    aspect-ratio: 1;
    border-radius: 9px;
}

.photo-list[data-view="compact"] .item-label {
    min-height: 2.45em;
    font-size: 0.72rem;
}

.photo-list[data-view="compact"] .item-meta {
    font-size: 0.63rem;
}

.photo-list[data-view="compact"] .favorite-button {
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
}

.photo-list-date {
    display: none;
    color: var(--muted);
    font-size: 0.72rem;
}

.photo-list[data-view="list"] {
    display: block;
}

.photo-list[data-view="list"] .media-item {
    margin-bottom: 9px;
}

.photo-list[data-view="list"] .media-card-wrap {
    height: auto;
}

.photo-list[data-view="list"] .media-card {
    min-height: 74px;
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 2px 12px;
    padding: 8px 62px 8px 8px;
    border-radius: 14px;
}

.photo-list[data-view="list"] .folder-item .media-card {
    grid-template-columns: 72px minmax(0, 1fr);
    padding-right: 10px;
}

.photo-list[data-view="list"] .visual {
    grid-column: 1;
    grid-row: 1 / 3;
    width: 72px;
    height: 58px;
    aspect-ratio: auto;
    border-radius: 10px;
}

.photo-list[data-view="list"] .visual img.square {
    width: 36px;
    height: 36px;
}

.photo-list[data-view="list"] .item-label {
    grid-column: 2;
    grid-row: 1;
    min-height: 0;
    align-self: end;
    font-size: 0.9rem;
}

.photo-list[data-view="list"] .folder-item .item-label {
    grid-row: 1 / 3;
    align-self: center;
}

.photo-list[data-view="list"] .item-meta {
    display: block;
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    font-size: 0.72rem;
}

.photo-list[data-view="list"] .photo-list-date {
    display: block;
    grid-column: 3;
    grid-row: 1 / 3;
    align-self: center;
    padding-right: 4px;
    white-space: nowrap;
}

.photo-list[data-view="list"] .photo-open-badge {
    right: 4px;
    bottom: 4px;
    width: 24px;
    height: 24px;
    padding: 0;
    font-size: 0.7rem;
}

.photo-list[data-view="list"] .favorite-button {
    top: 50%;
    right: 12px;
    width: 36px;
    height: 36px;
    transform: translateY(-50%);
}

.photo-list[data-view="list"] .favorite-button:hover,
.photo-list[data-view="list"] .favorite-button:focus-visible {
    transform: translateY(-50%) scale(1.08);
}

.photo-card:disabled {
    cursor: not-allowed;
    opacity: 0.7;
}

.photo-open-badge {
    padding: 0;
    font-size: 0.9rem;
}

.photo-viewer[hidden] {
    display: none;
}

.photo-viewer {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    background: rgba(2, 5, 9, 0.94);
    backdrop-filter: blur(16px);
}

.photo-viewer-shell {
    position: relative;
    width: min(96vw, 1500px);
    max-height: 96vh;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
    background: #080c12;
    border: 1px solid var(--border);
    border-radius: 18px;
}

.photo-viewer-shell:fullscreen {
    width: 100vw;
    max-height: 100vh;
    border: 0;
    border-radius: 0;
}

.photo-viewer-toolbar,
.photo-viewer-caption {
    min-height: 54px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(12, 18, 27, 0.96);
}

.photo-viewer-toolbar > div {
    min-width: 0;
    display: flex;
    flex: 1;
    align-items: baseline;
    gap: 10px;
}

.photo-viewer-toolbar strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.photo-viewer-toolbar span,
.photo-viewer-caption {
    color: var(--muted);
    font-size: 0.78rem;
}

.photo-viewer-toolbar button,
.photo-viewer-nav {
    border: 1px solid var(--border);
    color: var(--text);
    background: rgba(255, 255, 255, 0.07);
    cursor: pointer;
}

.photo-viewer-toolbar button {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    font-size: 1.05rem;
}

.photo-viewer-control-icon,
.photo-viewer-arrow-icon {
    display: block;
    width: 22px;
    height: 22px;
    margin: auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

.photo-viewer-mobile-close,
.photo-viewer-mobile-fullscreen,
.photo-viewer-mobile-slideshow {
    display: none;
}

.photo-viewer-slideshow-icon-pause {
    display: none;
}

#photo-viewer-slideshow.is-active .photo-viewer-slideshow-icon-play,
#photo-viewer-slideshow-mobile.is-active .photo-viewer-slideshow-icon-play {
    display: none;
}

#photo-viewer-slideshow.is-active .photo-viewer-slideshow-icon-pause,
#photo-viewer-slideshow-mobile.is-active .photo-viewer-slideshow-icon-pause {
    display: block;
}

#photo-viewer-slideshow[hidden],
#photo-viewer-slideshow-mobile[hidden] {
    display: none !important;
}

.photo-viewer-stage {
    position: relative;
    min-height: 260px;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: #020305;
}

.photo-viewer-stage img,
.photo-viewer-stage video {
    width: 100%;
    height: 100%;
    max-height: calc(96vh - 116px);
    object-fit: contain;
}

.photo-viewer-stage video {
    display: block;
    background: #000;
}

.photo-viewer-stage img[hidden],
.photo-viewer-stage video[hidden] {
    display: none;
}

.photo-video-open-badge {
    display: grid;
    place-items: center;
    padding: 0;
    line-height: 0;
}

.photo-video-open-badge .overlay-icon-play {
    width: 21px;
    height: 21px;
}

.photo-viewer-nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 48px;
    height: 64px;
    transform: translateY(-50%);
    border-radius: 14px;
    display: grid;
    place-items: center;
    padding: 0;
    background: rgba(3, 7, 12, 0.68);
}

.photo-viewer-nav:disabled {
    display: none;
}

.photo-viewer-prev { left: 12px; }
.photo-viewer-next { right: 12px; }

.photo-viewer-caption {
    justify-content: space-between;
    flex-wrap: wrap;
}

body.photo-viewer-open {
    overflow: hidden;
}

.photo-viewer.is-mobile-layout {
    padding: 0;
    background: #000;
    backdrop-filter: none;
}

.photo-viewer.is-mobile-layout .photo-viewer-shell {
    width: 100vw;
    width: 100dvw;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    display: block;
    border: 0;
    border-radius: 0;
    background: #000;
}

.photo-viewer.is-mobile-layout .photo-viewer-toolbar,
.photo-viewer.is-mobile-layout .photo-viewer-caption {
    display: none;
}

.photo-viewer.is-mobile-layout .photo-viewer-stage {
    width: 100%;
    height: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    background: #000;
    touch-action: pan-y pinch-zoom;
    overscroll-behavior: contain;
    -webkit-user-select: none;
    user-select: none;
}

.photo-viewer.is-mobile-layout .photo-viewer-stage img,
.photo-viewer.is-mobile-layout .photo-viewer-stage video {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: contain;
    -webkit-user-drag: none;
}

.photo-viewer.is-mobile-layout .photo-viewer-mobile-close,
.photo-viewer.is-mobile-layout .photo-viewer-mobile-fullscreen,
.photo-viewer.is-mobile-layout .photo-viewer-mobile-slideshow,
.photo-viewer.is-mobile-layout .photo-viewer-nav {
    color: #fff;
    background: rgba(0, 0, 0, 0.44);
    border: 1px solid rgba(255, 255, 255, 0.52);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.16) inset,
        0 4px 18px rgba(0, 0, 0, 0.52);
    -webkit-backdrop-filter: blur(9px);
    backdrop-filter: blur(9px);
}

.photo-viewer.is-mobile-layout .photo-viewer-mobile-close,
.photo-viewer.is-mobile-layout .photo-viewer-mobile-fullscreen,
.photo-viewer.is-mobile-layout .photo-viewer-mobile-slideshow {
    position: absolute;
    z-index: 5;
    top: max(12px, env(safe-area-inset-top));
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border-radius: 50%;
    cursor: pointer;
}

.photo-viewer.is-mobile-layout .photo-viewer-mobile-fullscreen {
    left: max(12px, env(safe-area-inset-left));
}

.photo-viewer.is-mobile-layout .photo-viewer-mobile-close {
    right: max(12px, env(safe-area-inset-right));
}

.photo-viewer.is-mobile-layout .photo-viewer-mobile-slideshow {
    left: 50%;
    bottom: max(16px, calc(env(safe-area-inset-bottom) + 10px));
    top: auto;
    transform: translateX(-50%);
}

.photo-viewer.is-mobile-layout .photo-viewer-mobile-close .photo-viewer-control-icon,
.photo-viewer.is-mobile-layout .photo-viewer-mobile-fullscreen .photo-viewer-control-icon,
.photo-viewer.is-mobile-layout .photo-viewer-mobile-slideshow .photo-viewer-control-icon {
    width: 20px;
    height: 20px;
    stroke-width: 2.35;
}

.photo-viewer.is-mobile-layout .photo-viewer-fullscreen-icon-exit {
    display: none;
}

.photo-viewer.is-mobile-layout .photo-viewer-mobile-fullscreen.is-active .photo-viewer-fullscreen-icon-enter {
    display: none;
}

.photo-viewer.is-mobile-layout .photo-viewer-mobile-fullscreen.is-active .photo-viewer-fullscreen-icon-exit {
    display: block;
}

.photo-viewer.is-mobile-layout .photo-viewer-nav {
    width: 42px;
    height: 48px;
    border-radius: 50%;
}

.photo-viewer.is-mobile-layout .photo-viewer-nav .photo-viewer-arrow-icon {
    width: 22px;
    height: 22px;
    stroke-width: 2.25;
}

.photo-viewer.is-mobile-layout .photo-viewer-prev { left: max(8px, env(safe-area-inset-left)); }
.photo-viewer.is-mobile-layout .photo-viewer-next { right: max(8px, env(safe-area-inset-right)); }

@media (max-width: 640px) {
    .photo-list[data-view="list"] .media-card {
        min-height: 68px;
        grid-template-columns: 62px minmax(0, 1fr);
        padding: 7px 56px 7px 7px;
    }

    .photo-list[data-view="list"] .folder-item .media-card {
        grid-template-columns: 62px minmax(0, 1fr);
        padding-right: 8px;
    }

    .photo-list[data-view="list"] .visual {
        width: 62px;
        height: 52px;
    }

    .photo-list[data-view="list"] .item-label {
        font-size: 0.84rem;
    }

    .photo-list[data-view="list"] .photo-list-date {
        display: none;
    }

    .photo-viewer {
        padding: 0;
        background: #000;
        backdrop-filter: none;
    }

    .photo-viewer-shell {
        width: 100vw;
        width: 100dvw;
        height: 100vh;
        height: 100dvh;
        max-height: none;
        display: block;
        border: 0;
        border-radius: 0;
        background: #000;
    }

    /* Mobilfremviseren er bevidst helt ren: kun mediet og tre diskrete
       navigationsknapper. Titel, tæller, metadata og fullscreen-UI skjules. */
    .photo-viewer-toolbar,
    .photo-viewer-caption {
        display: none;
    }

    .photo-viewer-stage {
        width: 100%;
        height: 100%;
        min-height: 100vh;
        min-height: 100dvh;
        background: #000;
        touch-action: pan-y pinch-zoom;
        overscroll-behavior: contain;
        -webkit-user-select: none;
        user-select: none;
    }

    .photo-viewer-stage img,
    .photo-viewer-stage video {
        width: 100%;
        height: 100%;
        max-height: none;
        object-fit: contain;
        -webkit-user-drag: none;
    }

    .photo-viewer-mobile-close,
    .photo-viewer-mobile-fullscreen,
    .photo-viewer-mobile-slideshow,
    .photo-viewer-nav {
        color: #fff;
        background: rgba(0, 0, 0, 0.44);
        border: 1px solid rgba(255, 255, 255, 0.52);
        box-shadow:
            0 1px 0 rgba(255, 255, 255, 0.16) inset,
            0 4px 18px rgba(0, 0, 0, 0.52);
        -webkit-backdrop-filter: blur(9px);
        backdrop-filter: blur(9px);
    }

    .photo-viewer-mobile-close,
    .photo-viewer-mobile-fullscreen,
    .photo-viewer-mobile-slideshow {
        position: absolute;
        z-index: 5;
        top: max(12px, env(safe-area-inset-top));
        display: grid;
        place-items: center;
        width: 42px;
        height: 42px;
        padding: 0;
        border-radius: 50%;
        cursor: pointer;
    }

    .photo-viewer-mobile-fullscreen {
        left: max(12px, env(safe-area-inset-left));
    }

    .photo-viewer-mobile-close {
        right: max(12px, env(safe-area-inset-right));
    }

    .photo-viewer-mobile-slideshow {
        left: 50%;
        bottom: max(16px, calc(env(safe-area-inset-bottom) + 10px));
        top: auto;
        transform: translateX(-50%);
    }

    .photo-viewer-mobile-close .photo-viewer-control-icon,
    .photo-viewer-mobile-fullscreen .photo-viewer-control-icon,
    .photo-viewer-mobile-slideshow .photo-viewer-control-icon {
        width: 20px;
        height: 20px;
        stroke-width: 2.35;
    }

    .photo-viewer-fullscreen-icon-exit {
        display: none;
    }

    .photo-viewer-mobile-fullscreen.is-active .photo-viewer-fullscreen-icon-enter {
        display: none;
    }

    .photo-viewer-mobile-fullscreen.is-active .photo-viewer-fullscreen-icon-exit {
        display: block;
    }

    .photo-viewer-nav {
        width: 42px;
        height: 48px;
        border-radius: 50%;
    }

    .photo-viewer-nav .photo-viewer-arrow-icon {
        width: 22px;
        height: 22px;
        stroke-width: 2.25;
    }

    .photo-viewer-prev { left: max(8px, env(safe-area-inset-left)); }
    .photo-viewer-next { right: max(8px, env(safe-area-inset-right)); }
}

/* E-mail OTP-login */
.otp-intro {
    margin: 0 0 20px;
    line-height: 1.6;
}
.otp-code-input {
    text-align: center;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: .55em;
    text-indent: .55em;
    font-variant-numeric: tabular-nums;
}
.otp-secondary-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 18px;
}
.otp-secondary-actions .text-button {
    border: 0;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    padding: 10px 8px;
}
.otp-secondary-actions .text-button:hover,
.otp-secondary-actions .text-button:focus-visible {
    color: var(--text);
}

/* Htop-inspirerede RAM- og diskbjælker */
.system-memory-card {
    grid-column: span 2;
}

.system-segment-bar {
    display: block;
    width: 100%;
    height: 12px;
    margin-top: 13px;
    overflow: visible;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 999px;
    background: rgba(255, 255, 255, .055);
}

.system-segment-user {
    fill: #43d68f;
}

.system-segment-kernel {
    fill: #ff6d7a;
}

.system-segment-cache {
    fill: #f1c75b;
}

.system-segment-disk {
    fill: var(--accent);
}

.system-segment-free {
    fill: rgba(255, 255, 255, .075);
}

.system-memory-legend {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px 12px;
    margin-top: 12px;
}

.system-memory-legend span {
    display: grid;
    grid-template-columns: 9px minmax(0, 1fr);
    align-items: center;
    gap: 0 7px;
    min-width: 0;
    color: var(--muted);
    font-size: .7rem;
    line-height: 1.3;
}

.system-memory-legend span strong {
    grid-column: 2;
    color: var(--text);
    font-size: .73rem;
    font-weight: 750;
}

.system-memory-legend i {
    grid-row: 1 / span 2;
    width: 9px;
    height: 9px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .075);
}

.system-memory-legend i.is-user { background: #43d68f; }
.system-memory-legend i.is-system { background: #ff6d7a; }
.system-memory-legend i.is-cache { background: #f1c75b; }
.system-memory-legend i.is-disk { background: var(--accent); }
.system-memory-legend i.is-free {
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .075);
}

.system-disk-legend {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 1080px) {
    .system-memory-card {
        grid-column: span 2;
    }
}

@media (max-width: 680px) {
    .system-memory-card {
        grid-column: span 1;
    }

    .system-memory-legend {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Installerbar PWA. */
.profile-popover .profile-menu-button {
    width: 100%;
    padding: 10px 9px;
    color: var(--text);
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
}

.profile-popover .profile-menu-button:hover,
.profile-popover .profile-menu-button:focus-visible {
    background: rgba(114, 212, 255, 0.1);
}

.pwa-install-dialog > p {
    margin: 18px 0 0;
    color: var(--muted);
    line-height: 1.55;
}

.pwa-install-dialog ol {
    display: grid;
    gap: 10px;
    margin: 18px 0 0;
    padding-left: 22px;
    color: var(--muted);
    line-height: 1.5;
}

@media (display-mode: standalone) {
    [data-pwa-install] {
        display: none !important;
    }
}

/* Brugerbaseret tjeneste- og mappeadgang */
.access-settings-fieldset {
    grid-column: 1 / -1;
    min-width: 0;
    display: grid;
    gap: 9px;
    margin: 0;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 13px;
    background: rgba(0, 0, 0, 0.16);
}

.access-settings-fieldset > legend {
    padding: 0 5px;
    color: var(--text);
    font-size: 0.78rem;
    font-weight: 750;
}

.service-permission-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.service-permission-option {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    color: var(--muted);
    font-size: 0.78rem;
    cursor: pointer;
}

.service-permission-option input {
    width: 17px;
    min-width: 17px;
    height: 17px;
    margin: 0;
    accent-color: var(--accent);
}

.service-permission-option span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.invite-form .access-settings-fieldset {
    grid-column: 1 / -1;
}

@media (max-width: 620px) {
    .service-permission-grid {
        grid-template-columns: 1fr;
    }
}

/* Videoelementet fylder hele skærmen i fullscreen. */
#lightbox-video:fullscreen,
#lightbox-video:-webkit-full-screen {
    width: 100vw;
    height: 100vh;
    max-height: none;
    object-fit: contain;
    background: #000;
}

/* --------------------------------------------------------------------------
 * Medieoverlays med rigtige inline-SVG-ikoner
 * -------------------------------------------------------------------------- */

/* De gamle teksttegn og CSS-masker bruges ikke længere. */
.favorite-button::before,
.video-item .play-badge::before,
.audiobook-track-card .play-badge::before,
.music-folder-play-button::before,
.continue-list .continue-play-overlay::before,
.continue-list .continue-remove-overlay::before {
    content: none;
    display: none;
}

.favorite-button,
.video-item .play-badge,
.audiobook-track-card .play-badge,
.music-folder-play-button,
.continue-list .continue-play-overlay,
.continue-list .continue-remove-overlay {
    display: grid;
    place-items: center;
    padding: 0;
    overflow: hidden;
    border-radius: 50%;
    line-height: 0;
}

.overlay-icon {
    display: block;
    width: 20px;
    height: 20px;
    pointer-events: none;
    overflow: visible;
}

/* En bredere, roligere play-trekant med optisk centrering. */
.overlay-icon-play {
    width: 22px;
    height: 22px;
    fill: currentColor;
    stroke: currentColor;
    stroke-width: 0.8;
    stroke-linejoin: round;
    transform: translateX(0.8px);
}

/* Krydset er et rigtigt SVG-stroke, ikke et fonttegn. */
.overlay-icon-close {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.25;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

/* Hjertets hidtidige synlige størrelse bevares. */
.overlay-icon-heart {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.favorite-button.is-favorite .overlay-icon-heart {
    fill: currentColor;
    stroke: currentColor;
}

/* Ens overflade og kant. */
.favorite-button,
.continue-list .continue-remove-overlay {
    background: rgba(7, 12, 20, 0.97);
    border: 1px solid rgba(255, 255, 255, 0.38);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.38);
}

.favorite-button.is-favorite {
    color: #ff86a0;
    background: rgba(66, 8, 28, 0.97);
    border-color: rgba(255, 134, 160, 0.78);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.38);
}

.favorite-button.is-favorite:hover,
.favorite-button.is-favorite:focus-visible {
    color: #ffa0b5;
    background: rgba(82, 10, 34, 0.99);
    border-color: rgba(255, 160, 181, 0.92);
}

.continue-list .continue-remove-overlay {
    color: rgba(255, 255, 255, 0.97);
}

.continue-list .continue-remove-overlay:hover,
.continue-list .continue-remove-overlay:focus-visible {
    color: #fff;
    background: rgba(133, 28, 43, 0.99);
    border-color: rgba(255, 132, 148, 0.82);
}

/* Standardkort: ens afstand til den synlige billedkant. */
#library-list:not([data-view="list"]) .video-item .favorite-button,
.audiobook-library-list:not([data-view="list"]) .audiobook-track-card-wrap .audiobook-favorite-button {
    top: calc(clamp(8px, 0.8vw, 13px) + 10px);
    right: calc(clamp(8px, 0.8vw, 13px) + 10px);
    width: 38px;
    height: 38px;
}

.continue-list .favorite-button {
    top: 18px;
    right: 18px;
    width: 38px;
    height: 38px;
}

.continue-list .continue-play-overlay,
.continue-list .continue-remove-overlay {
    bottom: 10px;
    width: 38px;
    height: 38px;
}

.continue-list .continue-play-overlay { right: 10px; }
.continue-list .continue-remove-overlay { left: 10px; }

.music-list:not([data-view="list"]) .music-folder-card-wrap .music-album-favorite-button {
    top: calc(clamp(8px, 0.8vw, 13px) + 10px);
    right: calc(clamp(8px, 0.8vw, 13px) + 10px);
    width: 42px;
    height: 42px;
}

.music-list:not([data-view="list"]) .music-folder-card-wrap .music-folder-play-button {
    right: calc(clamp(8px, 0.8vw, 13px) + 10px);
    width: 42px;
    height: 42px;
}

/* Kompakt visning. */
#library-list[data-view="compact"] .video-item .favorite-button,
#library-list[data-view="compact"] .video-item .play-badge,
.audiobook-library-list[data-view="compact"] .audiobook-track-card-wrap .audiobook-favorite-button,
.audiobook-library-list[data-view="compact"] .audiobook-track-card .play-badge,
.music-list[data-view="compact"] .music-album-favorite-button,
.music-list[data-view="compact"] .music-folder-play-button {
    width: 34px;
    height: 34px;
}

#library-list[data-view="compact"] .video-item .favorite-button,
.audiobook-library-list[data-view="compact"] .audiobook-track-card-wrap .audiobook-favorite-button,
.music-list[data-view="compact"] .music-album-favorite-button {
    top: 15px;
    right: 15px;
}

#library-list[data-view="compact"] .video-item .play-badge,
.audiobook-library-list[data-view="compact"] .audiobook-track-card .play-badge {
    right: 8px;
    bottom: 8px;
}

.music-list[data-view="compact"] .music-folder-play-button { right: 15px; }

@media (max-width: 640px) {
    #library-list:not([data-view="list"]) .video-item .favorite-button,
    .audiobook-library-list:not([data-view="list"]) .audiobook-track-card-wrap .audiobook-favorite-button,
    .continue-list .favorite-button {
        top: 15px;
        right: 15px;
        width: 34px;
        height: 34px;
    }

    .continue-list .continue-play-overlay,
    .continue-list .continue-remove-overlay {
        bottom: 8px;
        width: 34px;
        height: 34px;
    }

    .continue-list .continue-play-overlay { right: 8px; }
    .continue-list .continue-remove-overlay { left: 8px; }

    .overlay-icon-play {
        width: 20px;
        height: 20px;
    }

    .overlay-icon-close {
        width: 20px;
        height: 20px;
        stroke-width: 2.35;
    }

    .music-list:not([data-view="list"]) .music-folder-card-wrap .music-album-favorite-button,
    .music-list:not([data-view="list"]) .music-folder-card-wrap .music-folder-play-button {
        right: 15px;
        width: 38px;
        height: 38px;
    }

    .music-list:not([data-view="list"]) .music-folder-card-wrap .music-album-favorite-button {
        top: 15px;
    }
}


/* Automatisk næste videoklip: diskret Netflix-lignende nedtælling. */
.video-next-countdown {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: grid;
    place-items: center;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.12);
}
.video-next-countdown[hidden] { display: none; }
.video-next-countdown span {
    display: grid;
    place-items: center;
    width: clamp(88px, 12vw, 150px);
    aspect-ratio: 1;
    border: 3px solid rgba(255, 255, 255, 0.86);
    border-radius: 50%;
    color: #fff;
    background: rgba(0, 0, 0, 0.62);
    box-shadow: 0 18px 55px rgba(0, 0, 0, 0.65);
    font-size: clamp(3rem, 8vw, 6rem);
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 3px 18px rgba(0, 0, 0, 0.9);
    animation: video-next-countdown-pulse 1s ease-out both;
}
@keyframes video-next-countdown-pulse {
    from { transform: scale(0.82); opacity: 0.45; }
    to { transform: scale(1); opacity: 1; }
}


.lightbox:fullscreen,
.lightbox:-webkit-full-screen {
    inset: 0;
    width: 100vw;
    height: 100vh;
    padding: 0;
    background: #000;
}

.lightbox:fullscreen #lightbox-video,
.lightbox:-webkit-full-screen #lightbox-video {
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    object-fit: contain;
}

/* Versionsmærke ved applikationstitlen. */
@media (max-width: 640px) {
    .brand {
        gap: 7px;
    }

    .brand-version {
        font-size: 0.58rem;
    }
}

/* Tidslinjeminder og diskret årsskift */
.photo-memory-panel {
    margin: 12px 0 clamp(16px, 1.8vw, 26px);
    padding: clamp(9px, 1vw, 14px);
    background: linear-gradient(145deg, rgba(19, 29, 43, 0.92), rgba(10, 16, 25, 0.92));
    border: 1px solid var(--border);
    border-radius: clamp(15px, 1.4vw, 21px);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

/* Årsvælgeren overtager sorteringsmenuens plads i tidslinjevisningen. */
.photo-timeline-year-filter {
    flex: 0 0 auto;
}

.photo-timeline-year-filter select {
    min-width: 112px;
}

.photo-memory-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(6px, 0.75vw, 12px);
    min-width: 0;
}

.photo-memory-card {
    position: relative;
    min-width: 0;
    height: clamp(88px, 8.2vw, 128px);
    overflow: hidden;
    display: block;
    color: #fff;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: clamp(10px, 0.9vw, 14px);
    box-shadow: 0 7px 18px rgba(0, 0, 0, 0.22);
    isolation: isolate;
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.photo-memory-card:hover,
.photo-memory-card:focus-visible {
    color: #fff;
    border-color: rgba(126, 219, 255, 0.58);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3), 0 0 0 2px rgba(126, 219, 255, 0.08);
    transform: translateY(-2px);
}

.photo-memory-card > img {
    position: absolute;
    inset: 0;
    z-index: -3;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.01);
    transition: transform 260ms ease;
}

.photo-memory-card:hover > img,
.photo-memory-card:focus-visible > img {
    transform: scale(1.055);
}

.photo-memory-shade {
    position: absolute;
    inset: 0;
    z-index: -2;
    background: linear-gradient(180deg, rgba(2, 5, 9, 0.03) 10%, rgba(2, 5, 9, 0.18) 48%, rgba(2, 5, 9, 0.9) 100%);
}

.photo-memory-copy {
    position: absolute;
    right: 8px;
    bottom: 7px;
    left: 8px;
    display: grid;
    gap: 1px;
    min-width: 0;
    text-shadow: 0 2px 7px rgba(0, 0, 0, 0.9);
}

.photo-memory-copy strong {
    overflow: hidden;
    font-size: clamp(0.62rem, 0.35vw + 0.56rem, 0.76rem);
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.photo-memory-copy small {
    color: rgba(255, 255, 255, 0.74);
    font-size: clamp(0.52rem, 0.25vw + 0.48rem, 0.64rem);
    font-weight: 700;
}

.photo-memory-video {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    color: #fff;
    background: rgba(4, 8, 13, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 50%;
    box-shadow: 0 4px 11px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(7px);
}

.photo-memory-video svg {
    width: 11px;
    height: 11px;
}

.photo-memory-card.is-empty {
    cursor: default;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018));
}

.photo-memory-card.is-empty:hover {
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 7px 18px rgba(0, 0, 0, 0.22);
    transform: none;
}

.photo-memory-empty-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    color: rgba(255, 255, 255, 0.18);
    font-size: clamp(1.2rem, 2vw, 2rem);
    transform: translate(-50%, -58%);
}

.photo-memory-card.is-wide-only {
    display: none;
}

.photo-timeline-heading {
    scroll-margin-top: calc(var(--header-height) + 16px);
}

/* I tidslinjens kortvisninger er billederne selve indholdet. */
.photo-timeline-list .photo-item .item-label {
    display: none;
}

.photo-timeline-list[data-view="list"] .photo-item .item-label {
    display: block;
}

@media (min-width: 1600px) {
    .photo-memory-grid {
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }

    .photo-memory-card.is-wide-only {
        display: block;
    }
}

@media (max-width: 760px) {
    .photo-memory-panel {
        margin-top: 9px;
        padding: 8px;
    }

    .photo-memory-grid {
        display: flex;
        gap: 7px;
        overflow-x: auto;
        padding-bottom: 2px;
        scrollbar-width: thin;
    }

    .photo-memory-card {
        flex: 0 0 auto;
        width: auto;
        min-width: 116px;
        height: 38px;
        border-radius: 999px;
        box-shadow: none;
    }

    .photo-memory-card > img,
    .photo-memory-shade,
    .photo-memory-video,
    .photo-memory-empty-icon {
        display: none;
    }

    .photo-memory-copy {
        position: static;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 12px;
        text-shadow: none;
    }

    .photo-memory-copy strong {
        font-size: 0.66rem;
    }

    .photo-memory-copy small {
        display: none;
    }

    .photo-memory-card.is-wide-only {
        display: none;
    }
}


/* Tidslinjeminder: det præcise mål får plads under sticky headeren og et diskret fokus. */
.photo-timeline-list .photo-item {
    scroll-margin-top: 9rem;
}
.photo-timeline-list .photo-item:target .photo-card-wrap,
.photo-timeline-list .photo-item.is-memory-focus .photo-card-wrap {
    border-radius: 1rem;
    outline: 2px solid rgba(255, 73, 142, .78);
    outline-offset: .28rem;
    animation: photo-memory-target-pulse 1.6s ease-out 1;
}
@keyframes photo-memory-target-pulse {
    0% { filter: brightness(1.28); }
    100% { filter: none; }
}


/* 3.5.12: hold tidslinjens årsvælger synlig i filterlinjen på desktop. */
.photo-library-filters.is-timeline .photo-timeline-year-filter {
    display: inline-flex !important;
    align-items: center;
    flex: 0 0 auto;
    min-width: 112px;
    visibility: visible !important;
    opacity: 1 !important;
}

.photo-library-filters.is-timeline .photo-timeline-year-filter select {
    display: block !important;
    width: auto;
    min-width: 112px;
    visibility: visible !important;
    opacity: 1 !important;
}

@media (min-width: 1051px) {
    .photo-library-filters.is-timeline {
        display: grid;
        grid-template-columns: minmax(112px, auto) auto auto;
        grid-auto-flow: column;
        align-items: center;
        justify-content: end;
        gap: 9px;
        overflow: visible;
    }

    .photo-library-filters.is-timeline .photo-timeline-year-filter {
        grid-column: 1;
        grid-row: 1;
    }

    .photo-library-filters.is-timeline .filter-chips {
        grid-column: 2;
        grid-row: 1;
    }

    .photo-library-filters.is-timeline .view-toggle {
        grid-column: 3;
        grid-row: 1;
    }
}

@media (max-width: 1050px) {
    .photo-library-filters.is-timeline .photo-timeline-year-filter,
    .photo-library-filters.is-timeline .photo-timeline-year-filter select {
        width: 100%;
    }
}

/* Mobil afspiller til musik og lydbøger: fuldskærms app-layout. */
[data-mobile-audio-only] {
    display: none;
}

.audio-player-close svg,
.mobile-audio-control svg {
    width: 24px;
    height: 24px;
    display: block;
    overflow: visible;
    fill: currentColor;
    stroke: none;
}

.audio-player-close svg path {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.1;
    stroke-linecap: round;
}

.mobile-audio-player-album {
    display: none;
}

@media (max-width: 800px) {
    body.music-player-open,
    body.audiobook-player-open {
        overflow: hidden;
        overscroll-behavior: none;
    }

    .music-player {
        position: fixed;
        z-index: 160;
        inset: 0;
        width: auto;
        min-width: 0;
        height: 100dvh;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: clamp(12px, 2.3dvh, 22px);
        padding:
            calc(18px + env(safe-area-inset-top))
            max(20px, env(safe-area-inset-right))
            calc(22px + env(safe-area-inset-bottom))
            max(20px, env(safe-area-inset-left));
        overflow-x: hidden;
        overflow-y: auto;
        color: #f7fbff;
        background:
            radial-gradient(circle at 50% 20%, rgba(126, 219, 255, 0.14), transparent 38%),
            radial-gradient(circle at 20% 100%, rgba(122, 88, 255, 0.12), transparent 42%),
            linear-gradient(180deg, #101722 0%, #080d14 58%, #05080d 100%);
        border: 0;
        border-radius: 0;
        box-shadow: none;
        isolation: isolate;
    }

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

    .music-player::before {
        content: '';
        position: fixed;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 24%),
            repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.012) 0 1px, transparent 1px 8px);
    }

    .music-player > img {
        order: 1;
        flex: 0 0 auto;
        width: min(72vw, 38dvh, 360px);
        height: min(72vw, 38dvh, 360px);
        max-width: calc(100vw - 52px);
        max-height: calc(100dvh - 330px);
        object-fit: cover;
        border-radius: clamp(18px, 5vw, 28px);
        background: rgba(255, 255, 255, 0.055);
        border: 1px solid rgba(255, 255, 255, 0.14);
        box-shadow:
            0 28px 70px rgba(0, 0, 0, 0.5),
            0 8px 24px rgba(0, 0, 0, 0.34);
    }

    .music-player-info {
        order: 2;
        width: min(100%, 520px);
        display: grid;
        justify-items: center;
        gap: 4px;
        min-width: 0;
        text-align: center;
    }

    .music-player-info strong {
        width: 100%;
        color: #fff;
        font-size: clamp(1.18rem, 5vw, 1.55rem);
        line-height: 1.18;
        font-weight: 850;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .music-player-info > span {
        width: 100%;
        color: rgba(230, 238, 247, 0.76);
        font-size: clamp(0.9rem, 3.7vw, 1.02rem);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .music-player-info > .mobile-audio-player-album {
        display: block;
        color: rgba(199, 211, 225, 0.54);
        font-size: 0.78rem;
    }

    .music-player > audio,
    .music-player > #music-prev,
    .music-player > #music-next,
    .audiobook-player > #audiobook-prev,
    .audiobook-player > #audiobook-next {
        display: none;
    }

    .music-player > .audio-player-close {
        position: fixed;
        z-index: 4;
        top: calc(14px + env(safe-area-inset-top));
        right: calc(14px + env(safe-area-inset-right));
        width: 44px;
        height: 44px;
        display: grid;
        place-items: center;
        padding: 0;
        color: rgba(255, 255, 255, 0.92);
        background: rgba(4, 8, 13, 0.56);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.32);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }

    .music-player > .audio-player-close:active {
        transform: scale(0.94);
    }

    [data-mobile-audio-only] {
        display: grid;
    }

    .mobile-audio-progress {
        order: 3;
        width: min(100%, 560px);
        gap: 8px;
        margin-top: 2px;
    }

    .mobile-audio-seek {
        --audio-progress: 0%;
        width: 100%;
        height: 28px;
        margin: 0;
        padding: 0;
        appearance: none;
        -webkit-appearance: none;
        cursor: pointer;
        background: transparent;
        touch-action: pan-x;
    }

    .mobile-audio-seek::-webkit-slider-runnable-track {
        height: 5px;
        background:
            linear-gradient(
                90deg,
                var(--accent) 0,
                var(--accent) var(--audio-progress),
                rgba(255, 255, 255, 0.2) var(--audio-progress),
                rgba(255, 255, 255, 0.2) 100%
            );
        border-radius: 999px;
    }

    .mobile-audio-seek::-webkit-slider-thumb {
        width: 18px;
        height: 18px;
        margin-top: -6.5px;
        appearance: none;
        -webkit-appearance: none;
        background: #fff;
        border: 0;
        border-radius: 50%;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.42);
    }

    .mobile-audio-seek::-moz-range-track {
        height: 5px;
        background: rgba(255, 255, 255, 0.2);
        border: 0;
        border-radius: 999px;
    }

    .mobile-audio-seek::-moz-range-progress {
        height: 5px;
        background: var(--accent);
        border-radius: 999px;
    }

    .mobile-audio-seek::-moz-range-thumb {
        width: 18px;
        height: 18px;
        background: #fff;
        border: 0;
        border-radius: 50%;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.42);
    }

    .mobile-audio-seek:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 4px;
        border-radius: 999px;
    }

    .mobile-audio-seek:disabled {
        opacity: 0.45;
        cursor: default;
    }

    .mobile-audio-times {
        display: flex;
        justify-content: space-between;
        color: rgba(225, 234, 244, 0.62);
        font-size: 0.76rem;
        font-variant-numeric: tabular-nums;
        letter-spacing: 0.01em;
    }

    .mobile-audio-controls {
        order: 4;
        width: min(100%, 520px);
        grid-template-columns: 44px 52px 78px 52px 44px;
        justify-content: space-between;
        align-items: center;
        gap: clamp(4px, 2vw, 12px);
    }

    .music-player .mobile-audio-control {
        width: 44px;
        height: 44px;
        display: grid;
        place-items: center;
        padding: 0;
        color: rgba(245, 249, 255, 0.9);
        background: transparent;
        border: 0;
        border-radius: 50%;
        box-shadow: none;
        -webkit-tap-highlight-color: transparent;
    }

    .music-player .mobile-audio-control:active {
        transform: scale(0.91);
    }

    .music-player .mobile-audio-control:disabled {
        opacity: 0.24;
        cursor: default;
        transform: none;
    }

    .music-player .mobile-audio-control-secondary svg {
        width: 28px;
        height: 28px;
    }

    .music-player .mobile-audio-control-secondary svg path {
        fill: currentColor;
        stroke: currentColor;
        stroke-width: 1.4;
        stroke-linejoin: round;
    }

    .music-player .mobile-audio-control-skip {
        width: 52px;
        height: 52px;
        color: #fff;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.12);
        font-size: 0.82rem;
        font-weight: 850;
        font-variant-numeric: tabular-nums;
    }

    .music-player .mobile-audio-control-primary {
        width: 78px;
        height: 78px;
        color: #071018;
        background: var(--accent);
        border: 1px solid rgba(255, 255, 255, 0.66);
        box-shadow:
            0 14px 32px rgba(0, 0, 0, 0.38),
            0 0 0 5px rgba(126, 219, 255, 0.08);
    }

    .music-player .mobile-audio-control-primary svg {
        width: 34px;
        height: 34px;
    }

    .music-player .mobile-audio-control-primary .mobile-audio-icon-play {
        transform: translateX(2px);
    }

    .mobile-audio-icon-pause {
        display: none !important;
    }

    .mobile-audio-control-primary[data-playing='true'] .mobile-audio-icon-play {
        display: none;
    }

    .mobile-audio-control-primary[data-playing='true'] .mobile-audio-icon-pause {
        display: block !important;
    }

    .audiobook-player-info {
        gap: 3px;
    }

    .audiobook-player-secondary-actions {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 7px;
    }

    .audiobook-player-details,
    .audiobook-player-chapters {
        width: auto;
        max-width: min(100%, 460px);
        margin: 0;
        font-size: 0.75rem;
    }

    .audiobook-player-details summary,
    .audiobook-player-chapters summary {
        width: auto;
        max-width: min(58vw, 260px);
        min-height: 34px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 7px 12px;
        color: rgba(237, 245, 255, 0.84);
        background: rgba(255, 255, 255, 0.07);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 999px;
        font-size: 0.74rem;
        line-height: 1;
    }

    .audiobook-player-details summary::before,
    .audiobook-player-chapters summary::before {
        margin-right: 5px;
    }

    .audiobook-player-details dl,
    .audiobook-chapter-popover {
        position: fixed;
        z-index: 180;
        left: max(12px, env(safe-area-inset-left));
        right: max(12px, env(safe-area-inset-right));
        bottom: calc(12px + env(safe-area-inset-bottom));
        width: auto;
        max-height: min(72dvh, 620px);
        overflow: auto;
        margin: 0;
        background: rgba(8, 13, 21, 0.985);
        border: 1px solid rgba(255, 255, 255, 0.16);
        border-radius: 20px;
        box-shadow: 0 24px 80px rgba(0, 0, 0, 0.68);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
    }

    .audiobook-chapter-popover {
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
    }

    .audiobook-player .audiobook-chapter-list {
        max-height: min(56dvh, 470px);
    }
}

@media (max-width: 800px) and (max-height: 620px) {
    .music-player {
        justify-content: flex-start;
        gap: 9px;
        padding-top: calc(12px + env(safe-area-inset-top));
    }

    .music-player > img {
        width: min(54vw, 31dvh, 230px);
        height: min(54vw, 31dvh, 230px);
        border-radius: 18px;
    }

    .music-player-info strong {
        font-size: 1.06rem;
    }

    .mobile-audio-progress {
        margin-top: 0;
    }

    .music-player .mobile-audio-control-primary {
        width: 68px;
        height: 68px;
    }

    .mobile-audio-controls {
        grid-template-columns: 40px 48px 68px 48px 40px;
    }
}

@media (max-width: 800px) and (orientation: landscape) {
    .music-player {
        display: grid;
        grid-template-columns: minmax(180px, 36vw) minmax(0, 1fr);
        grid-template-rows: auto auto auto;
        align-content: center;
        justify-items: center;
        column-gap: clamp(22px, 5vw, 54px);
        row-gap: 14px;
        padding-left: max(28px, env(safe-area-inset-left));
        padding-right: max(28px, env(safe-area-inset-right));
    }

    .music-player > img {
        grid-column: 1;
        grid-row: 1 / 4;
        width: min(34vw, 66dvh, 320px);
        height: min(34vw, 66dvh, 320px);
        max-height: none;
    }

    .music-player-info {
        grid-column: 2;
        grid-row: 1;
        align-self: end;
    }

    .mobile-audio-progress {
        grid-column: 2;
        grid-row: 2;
    }

    .mobile-audio-controls {
        grid-column: 2;
        grid-row: 3;
        align-self: start;
    }
}

/* 3.5.15: mobil lydafspiller ligger over site-headeren; detaljer skjules på mobil. */
@media (max-width: 800px) {
    body.music-player-open .site-header,
    body.audiobook-player-open .site-header {
        visibility: hidden;
        pointer-events: none;
    }

    .music-player,
    .audiobook-player {
        z-index: 1600;
    }

    .audiobook-player-details {
        display: none !important;
    }

    .audiobook-player-secondary-actions {
        width: min(100%, 520px);
        margin-top: 5px;
    }

    .audiobook-player-chapters {
        max-width: 100%;
    }

    .audiobook-player-chapters summary {
        max-width: min(78vw, 320px);
    }
}


/* Android/PWA-installation */
.pwa-install-checks {
    display: grid;
    gap: 8px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
    color: var(--muted);
    line-height: 1.45;
}

.pwa-install-checks li {
    padding: 9px 11px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.18);
}

.pwa-install-checks li.is-ok {
    color: #a9e7c0;
    border-color: rgba(85, 210, 132, 0.24);
}

.pwa-install-checks li.is-error {
    color: #ffc1c1;
    border-color: rgba(255, 102, 102, 0.28);
}


/* --------------------------------------------------------------------------
 * Mobil musikliste: stabilt SVG-playikon og venstrestillet tilbage-navigation
 * -------------------------------------------------------------------------- */
.music-track-list-play {
    display: grid;
    place-items: center;
    padding: 0;
    overflow: hidden;
    line-height: 0;
    appearance: none;
    -webkit-appearance: none;
}

.music-track-list-play-icon {
    display: block;
    width: 24px;
    height: 24px;
    fill: currentColor;
    pointer-events: none;
    transform: translateX(1px);
}

.music-list[data-view="list"] .music-back-item .item-label,
.audiobook-library-list[data-view="list"] .audiobook-back-item .item-label {
    justify-self: start;
    width: auto;
    padding-left: 4px;
    text-align: left;
}

@media (max-width: 680px) {
    .music-track-table tr {
        padding-left: 68px;
    }

    .music-track-table td:first-child {
        width: 42px !important;
    }

    .music-track-list-play {
        width: 42px;
        height: 42px;
    }

    .music-track-list-play-icon {
        width: 25px;
        height: 25px;
    }

    .music-list[data-view="list"] .music-back-item .media-card,
    .audiobook-library-list[data-view="list"] .audiobook-back-item .media-card {
        grid-template-columns: 52px minmax(0, 1fr);
    }

    .music-list[data-view="list"] .music-back-item .item-label,
    .audiobook-library-list[data-view="list"] .audiobook-back-item .item-label {
        font-size: 0.92rem;
    }
}


/* --------------------------------------------------------------------------
 * 3.5.18: ensartet Tilbage-kort i video, musik og lydbøger
 * -------------------------------------------------------------------------- */
.library-back-copy {
    min-width: 0;
}

#library-list[data-view="list"] .library-back-item .media-card,
.music-list[data-view="list"] .library-back-item .media-card,
.audiobook-library-list[data-view="list"] .library-back-item .media-card {
    grid-template-columns: 54px minmax(0, 1fr);
    grid-template-rows: 1fr;
    align-items: center;
    gap: 14px;
    min-height: 72px;
    padding: 9px 12px 9px 9px;
}

#library-list[data-view="list"] .library-back-item .visual,
.music-list[data-view="list"] .library-back-item .visual,
.audiobook-library-list[data-view="list"] .library-back-item .visual {
    grid-column: 1;
    grid-row: 1;
    width: 54px;
    height: 54px;
    aspect-ratio: 1;
    border-radius: 12px;
}

#library-list[data-view="list"] .library-back-item .visual img.square,
.music-list[data-view="list"] .library-back-item .visual img.square,
.audiobook-library-list[data-view="list"] .library-back-item .visual img.square {
    width: 36px;
    height: 36px;
}

#library-list[data-view="list"] .library-back-copy,
.music-list[data-view="list"] .library-back-copy,
.audiobook-library-list[data-view="list"] .library-back-copy {
    grid-column: 2;
    grid-row: 1;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
}

#library-list[data-view="list"] .library-back-copy .item-label,
.music-list[data-view="list"] .library-back-copy .item-label,
.audiobook-library-list[data-view="list"] .library-back-copy .item-label {
    width: auto;
    min-height: 0;
    display: block;
    margin: 0;
    padding: 0;
    color: var(--text);
    font-size: 0.98rem;
    font-weight: 760;
    line-height: 1.2;
    text-align: left;
    -webkit-line-clamp: unset;
}

@media (max-width: 680px) {
    #library-list[data-view="list"] .library-back-item .media-card,
    .music-list[data-view="list"] .library-back-item .media-card,
    .audiobook-library-list[data-view="list"] .library-back-item .media-card {
        grid-template-columns: 52px minmax(0, 1fr);
        gap: 12px;
        min-height: 72px;
        padding: 9px 12px 9px 9px;
    }

    #library-list[data-view="list"] .library-back-item .visual,
    .music-list[data-view="list"] .library-back-item .visual,
    .audiobook-library-list[data-view="list"] .library-back-item .visual {
        width: 52px;
        height: 52px;
    }

    #library-list[data-view="list"] .library-back-copy .item-label,
    .music-list[data-view="list"] .library-back-copy .item-label,
    .audiobook-library-list[data-view="list"] .library-back-copy .item-label {
        font-size: 1rem;
    }
}

/* 3.5.19: kompakt desktop-footer til musik og lydbøger med egne SVG-kontroller. */
[data-desktop-audio-only] {
    display: flex;
}

.desktop-audio-icon-button svg,
.audiobook-action-icon,
.audiobook-chapter-navigation button svg {
    display: block;
    width: 22px;
    height: 22px;
    overflow: visible;
}

.desktop-audio-icon-button svg path {
    fill: currentColor;
    stroke: currentColor;
    stroke-width: 1.15;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.desktop-audio-mute svg path:first-child {
    fill: currentColor;
    stroke: currentColor;
    stroke-width: 1;
}

.desktop-audio-mute .desktop-audio-volume-waves,
.desktop-audio-mute .desktop-audio-icon-muted path:last-child {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.desktop-audio-icon-pause,
.desktop-audio-icon-muted {
    display: none !important;
}

.desktop-audio-toggle[data-playing='true'] .desktop-audio-icon-play,
.desktop-audio-mute[data-muted='true'] .desktop-audio-icon-volume {
    display: none !important;
}

.desktop-audio-toggle[data-playing='true'] .desktop-audio-icon-pause,
.desktop-audio-mute[data-muted='true'] .desktop-audio-icon-muted {
    display: block !important;
}

.audiobook-action-icon {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.audiobook-player-details summary::before,
.audiobook-player-chapters summary::before {
    content: none !important;
}

.audiobook-player-details summary,
.audiobook-player-chapters summary {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.audiobook-chapter-navigation button svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (min-width: 801px) {
    .music-player {
        position: fixed;
        z-index: 900;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        min-height: 74px;
        display: grid;
        grid-template-columns:
            52px
            minmax(150px, 270px)
            auto
            minmax(240px, 1fr)
            minmax(112px, 150px)
            40px;
        align-items: center;
        gap: 12px;
        padding:
            8px
            max(16px, env(safe-area-inset-right))
            calc(8px + env(safe-area-inset-bottom))
            max(16px, env(safe-area-inset-left));
        color: var(--text);
        background: rgba(7, 12, 20, 0.94);
        border: 0;
        border-top: 1px solid var(--border-strong);
        border-radius: 0;
        box-shadow: 0 -12px 36px rgba(0, 0, 0, 0.34);
        backdrop-filter: blur(18px) saturate(1.12);
        -webkit-backdrop-filter: blur(18px) saturate(1.12);
    }

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

    .music-player > img {
        width: 52px;
        height: 52px;
        object-fit: cover;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 10px;
        box-shadow: 0 5px 16px rgba(0, 0, 0, 0.28);
    }

    .music-player-info {
        display: grid;
        align-content: center;
        gap: 2px;
        min-width: 0;
    }

    .music-player-info strong {
        min-width: 0;
        color: var(--text);
        font-size: 0.94rem;
        line-height: 1.15;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .music-player-info > span {
        min-width: 0;
        color: var(--muted);
        font-size: 0.75rem;
        line-height: 1.15;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .music-player > audio {
        display: none;
    }

    .desktop-audio-transport {
        align-items: center;
        gap: 5px;
    }

    .music-player .desktop-audio-icon-button,
    .music-player > .audio-player-close {
        width: 36px;
        height: 36px;
        display: grid;
        place-items: center;
        flex: 0 0 auto;
        padding: 0;
        color: rgba(242, 247, 252, 0.88);
        background: transparent;
        border: 1px solid transparent;
        border-radius: 50%;
        box-shadow: none;
        cursor: pointer;
        transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
    }

    .music-player .desktop-audio-icon-button:hover,
    .music-player .desktop-audio-icon-button:focus-visible,
    .music-player > .audio-player-close:hover,
    .music-player > .audio-player-close:focus-visible {
        color: #fff;
        background: rgba(255, 255, 255, 0.09);
        border-color: rgba(255, 255, 255, 0.11);
    }

    .music-player .desktop-audio-icon-button:active,
    .music-player > .audio-player-close:active {
        transform: scale(0.93);
    }

    .music-player .desktop-audio-icon-button:disabled {
        opacity: 0.28;
        cursor: default;
        transform: none;
    }

    .music-player .desktop-audio-toggle {
        width: 42px;
        height: 42px;
        color: #061018;
        background: var(--accent);
        border-color: rgba(255, 255, 255, 0.5);
        box-shadow: 0 5px 14px rgba(0, 0, 0, 0.24);
    }

    .music-player .desktop-audio-toggle:hover,
    .music-player .desktop-audio-toggle:focus-visible {
        color: #061018;
        background: var(--accent);
        border-color: rgba(255, 255, 255, 0.72);
    }

    .music-player .desktop-audio-toggle .desktop-audio-icon-play {
        transform: translateX(1px);
    }

    .desktop-audio-progress {
        min-width: 0;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px;
    }

    .desktop-audio-seek,
    .desktop-audio-volume-range {
        --audio-progress: 0%;
        --audio-volume: 100%;
        width: 100%;
        height: 24px;
        margin: 0;
        padding: 0;
        appearance: none;
        -webkit-appearance: none;
        background: transparent;
        cursor: pointer;
    }

    .desktop-audio-seek::-webkit-slider-runnable-track,
    .desktop-audio-volume-range::-webkit-slider-runnable-track {
        height: 4px;
        border-radius: 999px;
    }

    .desktop-audio-seek::-webkit-slider-runnable-track {
        background: linear-gradient(90deg, var(--accent) 0, var(--accent) var(--audio-progress), rgba(255,255,255,.2) var(--audio-progress), rgba(255,255,255,.2) 100%);
    }

    .desktop-audio-volume-range::-webkit-slider-runnable-track {
        background: linear-gradient(90deg, rgba(242,247,252,.84) 0, rgba(242,247,252,.84) var(--audio-volume), rgba(255,255,255,.18) var(--audio-volume), rgba(255,255,255,.18) 100%);
    }

    .desktop-audio-seek::-webkit-slider-thumb,
    .desktop-audio-volume-range::-webkit-slider-thumb {
        width: 13px;
        height: 13px;
        margin-top: -4.5px;
        appearance: none;
        -webkit-appearance: none;
        background: #fff;
        border: 0;
        border-radius: 50%;
        box-shadow: 0 1px 5px rgba(0,0,0,.4);
    }

    .desktop-audio-seek::-moz-range-track,
    .desktop-audio-volume-range::-moz-range-track {
        height: 4px;
        background: rgba(255, 255, 255, 0.2);
        border: 0;
        border-radius: 999px;
    }

    .desktop-audio-seek::-moz-range-progress {
        height: 4px;
        background: var(--accent);
        border-radius: 999px;
    }

    .desktop-audio-volume-range::-moz-range-progress {
        height: 4px;
        background: rgba(242,247,252,.84);
        border-radius: 999px;
    }

    .desktop-audio-seek::-moz-range-thumb,
    .desktop-audio-volume-range::-moz-range-thumb {
        width: 13px;
        height: 13px;
        background: #fff;
        border: 0;
        border-radius: 50%;
        box-shadow: 0 1px 5px rgba(0,0,0,.4);
    }

    .desktop-audio-seek:focus-visible,
    .desktop-audio-volume-range:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 3px;
        border-radius: 999px;
    }

    .desktop-audio-seek:disabled {
        opacity: 0.42;
        cursor: default;
    }

    .desktop-audio-times {
        display: flex;
        align-items: center;
        gap: 5px;
        color: var(--muted);
        font-size: 0.74rem;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

    .desktop-audio-times span:first-child {
        color: var(--text);
    }

    .desktop-audio-times span:first-child::after {
        content: '/';
        margin-left: 5px;
        color: rgba(255,255,255,.32);
    }

    .desktop-audio-volume {
        min-width: 0;
        align-items: center;
        gap: 5px;
    }

    .desktop-audio-volume .desktop-audio-icon-button {
        width: 32px;
        height: 32px;
    }

    .desktop-audio-volume .desktop-audio-icon-button svg {
        width: 20px;
        height: 20px;
    }

    .music-player > .audio-player-close {
        width: 38px;
        height: 38px;
        justify-self: end;
    }

    .music-player > .audio-player-close svg {
        width: 22px;
        height: 22px;
    }

    .music-player-open main,
    .audiobook-player-open main {
        padding-bottom: calc(92px + env(safe-area-inset-bottom));
    }

    .audiobook-player-info {
        gap: 1px;
    }

    .audiobook-player-secondary-actions {
        min-width: 0;
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        gap: 8px;
        margin-top: 2px;
    }

    .audiobook-player-details,
    .audiobook-player-chapters {
        width: auto;
        min-width: 0;
        max-width: 100%;
        margin: 0;
        font-size: 0.68rem;
    }

    .audiobook-player-details summary,
    .audiobook-player-chapters summary {
        max-width: 150px;
        color: var(--accent);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .audiobook-player-details summary span,
    .audiobook-player-chapters summary span {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .audiobook-player-details dl,
    .audiobook-chapter-popover {
        bottom: calc(100% + 10px);
    }
}

@media (min-width: 801px) and (max-width: 1120px) {
    .music-player {
        grid-template-columns: 48px minmax(130px, 220px) auto minmax(180px, 1fr) 38px;
        gap: 9px;
        padding-left: 12px;
        padding-right: 12px;
    }

    .music-player > img {
        width: 48px;
        height: 48px;
    }

    .desktop-audio-volume {
        display: none;
    }
}

@media (max-width: 800px) {
    [data-desktop-audio-only] {
        display: none !important;
    }
}


/* 3.5.20: responsiv desktop-header uden overlap ved smalle browservinduer.
 * Yderkolonnerne måler nu deres faktiske indhold, mens søgefeltet tager den
 * resterende plads. Det forhindrer navigationsknapperne i at flyde ind over
 * søgeknappen ved browserzoom eller vinduer mellem mobil- og fuld desktopbredde.
 */
@media (min-width: 641px) {
    .site-header {
        grid-template-columns: max-content minmax(150px, 1fr) max-content;
        column-gap: clamp(8px, 1vw, 18px);
    }

    .site-header > *,
    .brand-cluster,
    .header-search,
    .header-actions,
    .desktop-header-actions {
        min-width: 0;
    }

    .header-search {
        width: 100%;
        max-width: 760px;
    }

    .header-actions,
    .desktop-header-actions {
        flex-wrap: nowrap;
    }
}

/* Kompakt desktop/mellemformat. Mobilheaderen starter fortsat først ved 640 px. */
@media (min-width: 641px) and (max-width: 1320px) {
    .site-header {
        gap: 8px;
        padding-right: max(10px, env(safe-area-inset-right));
        padding-left: max(10px, env(safe-area-inset-left));
    }

    .brand-cluster {
        gap: 7px;
    }

    .brand {
        gap: 7px;
    }

    .profile-trigger {
        width: 42px;
        height: 42px;
        border-radius: 12px;
    }

    .profile-trigger .logo,
    .profile-trigger .user-avatar {
        width: 34px;
        height: 34px;
        border-radius: 10px;
    }

    .header-search {
        grid-template-columns: minmax(0, 1fr) 40px;
        gap: 5px;
    }

    .header-search input,
    .header-search button {
        min-height: 40px;
    }

    .header-search input {
        min-width: 0;
        padding-right: 10px;
        padding-left: 12px;
    }

    .desktop-header-actions {
        gap: 6px;
    }

    .desktop-header-actions .icon-button,
    .desktop-header-actions .thumb-form .icon-button {
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
        border-radius: 12px;
        font-size: 1.05rem;
    }

    .desktop-header-actions .icon-button > img {
        width: 19px;
        height: 19px;
    }
}

/* Ved meget smalle desktopvinduer prioriteres handlingerne og søgningen. */
@media (min-width: 641px) and (max-width: 1080px) {
    .brand-version {
        display: none;
    }

    .site-header {
        grid-template-columns: max-content minmax(120px, 1fr) max-content;
    }

    .header-search input {
        font-size: 0.82rem;
    }
}

@media (min-width: 641px) and (max-width: 900px) {
    .desktop-header-actions {
        gap: 4px;
    }

    .desktop-header-actions .icon-button,
    .desktop-header-actions .thumb-form .icon-button {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
        border-radius: 11px;
    }

    .header-search {
        grid-template-columns: minmax(0, 1fr) 38px;
    }

    .header-search input,
    .header-search button {
        min-height: 38px;
    }
}



/* 3.6.5: Android-PWA video kan åbnes i rigtig immersive fullscreen. */
.video-fullscreen-toggle {
    display: none;
    position: absolute;
    right: max(14px, env(safe-area-inset-right));
    bottom: max(14px, env(safe-area-inset-bottom));
    z-index: 4;
    width: 48px;
    height: 48px;
    padding: 0;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(0, 0, 0, 0.64);
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 50%;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.video-fullscreen-toggle svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.video-fullscreen-icon-exit {
    display: none;
}

.video-fullscreen-toggle.is-active .video-fullscreen-icon-enter {
    display: none;
}

.video-fullscreen-toggle.is-active .video-fullscreen-icon-exit {
    display: block;
}

@media (max-width: 640px), (pointer: coarse) {
    .video-fullscreen-toggle {
        z-index: 9;
        display: inline-flex;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(7px) scale(0.94);
        transition: opacity 160ms ease, visibility 160ms ease, transform 160ms ease, background 120ms ease;
    }

    .lightbox.mobile-controls-visible .video-fullscreen-toggle {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0) scale(1);
    }

    .video-fullscreen-toggle:active {
        transform: scale(0.94);
        background: rgba(18, 25, 35, 0.9);
    }

    .lightbox:fullscreen,
    .lightbox:-webkit-full-screen,
    .lightbox:fullscreen #lightbox-video,
    .lightbox:-webkit-full-screen #lightbox-video {
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        max-width: none;
        max-height: none;
    }
}

/* 3.6.6: hurtig visuel polish af mobil-header, filterlinjer og knaphøjder. */
:root {
    --control-height: 44px;
    --control-height-compact: 40px;
    --control-height-mobile: 48px;
    --control-radius: 13px;
}

.primary-button,
.secondary-button,
.danger-button,
.text-button,
.user-button {
    min-height: var(--control-height);
    padding-top: 0;
    padding-bottom: 0;
    border-radius: 12px;
}

.icon-button,
.mobile-menu-toggle,
.profile-trigger,
.header-search button {
    width: var(--control-height);
    height: var(--control-height);
    min-height: var(--control-height);
    border-radius: var(--control-radius);
}

.header-search {
    grid-template-columns: minmax(0, 1fr) var(--control-height);
    gap: 8px;
}

.header-search input {
    min-height: var(--control-height);
    padding: 0 16px;
    border-radius: var(--control-radius);
}

.library-filters {
    gap: 10px;
    row-gap: 10px;
}

.library-filters select {
    min-height: var(--control-height);
    padding: 0 38px 0 14px;
    border-radius: var(--control-radius);
    line-height: 1.2;
}

.filter-chips,
.view-toggle {
    min-height: var(--control-height);
    gap: 5px;
    padding: 4px;
    border-radius: var(--control-radius);
}

.filter-chip,
.view-toggle button {
    min-height: var(--control-height-compact);
    padding: 0 14px;
    border-radius: 10px;
    text-align: center;
    line-height: 1.2;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .site-header {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 10px;
        min-height: 68px;
        padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 10px max(12px, env(safe-area-inset-left));
    }

    .mobile-menu-toggle,
    .header-search button {
        width: var(--control-height-mobile);
        height: var(--control-height-mobile);
        min-height: var(--control-height-mobile);
        border-radius: 14px;
    }

    .header-search {
        grid-template-columns: minmax(0, 1fr) var(--control-height-mobile);
        gap: 8px;
    }

    .header-search input,
    .header-search button {
        min-height: var(--control-height-mobile);
    }

    .header-search input {
        padding: 0 16px;
        border-radius: 14px;
    }

    .library-filters {
        gap: 12px;
    }

    .library-filters select,
    .photo-library-filters.is-timeline .photo-timeline-year-filter select {
        min-height: var(--control-height-mobile);
        padding-left: 16px;
        padding-right: 44px;
        border-radius: 16px;
        text-align: center;
        text-align-last: center;
    }

    .filter-chips,
    .view-toggle {
        min-height: var(--control-height-mobile);
        gap: 6px;
        padding: 5px;
        border-radius: 16px;
    }

    .filter-chip,
    .view-toggle button {
        min-height: calc(var(--control-height-mobile) - 10px);
        padding: 0 14px;
        border-radius: 13px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* 3.6.7: fotofremviser på mobil i landscape skal bruge ægte contain-layout. */
@media (max-width: 900px) and (orientation: landscape) {
    .photo-viewer-stage {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        min-height: 100vh;
        min-height: 100dvh;
        padding-left: max(56px, env(safe-area-inset-left));
        padding-right: max(56px, env(safe-area-inset-right));
        padding-top: max(12px, env(safe-area-inset-top));
        padding-bottom: max(12px, env(safe-area-inset-bottom));
        box-sizing: border-box;
    }

    .photo-viewer-stage img,
    .photo-viewer-stage video {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        margin: auto;
    }

    .photo-viewer-nav {
        width: 44px;
        height: 52px;
    }
}


/* 3.6.12: slideshow-overgange. */
.photo-viewer-stage img {
    opacity: 1;
    transition: opacity 280ms ease;
}

.photo-viewer-stage img.is-slideshow-fading {
    opacity: 0;
}

/* 3.8.3: generisk fold-ud-panel i administrationen. */
.admin-foldout-card {
    padding: 0;
    overflow: hidden;
}

.admin-foldout-summary {
    min-height: 82px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 20px clamp(20px, 3vw, 32px);
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.admin-foldout-summary::-webkit-details-marker {
    display: none;
}

.admin-foldout-summary-copy {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.admin-foldout-summary-copy .eyebrow {
    margin: 0;
}

.admin-foldout-title {
    color: var(--text);
    font-size: clamp(1.15rem, 1.4vw, 1.55rem);
    font-weight: 800;
    line-height: 1.2;
}

.admin-foldout-summary-side {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.admin-foldout-chevron {
    width: 12px;
    height: 12px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform 160ms ease;
}

.admin-foldout-card[open] .admin-foldout-chevron {
    transform: rotate(225deg) translate(-2px, -2px);
}

.admin-foldout-card[open] .admin-foldout-summary {
    border-bottom: 1px solid var(--border);
}

.admin-foldout-content {
    padding: 22px clamp(20px, 3vw, 32px) clamp(22px, 3vw, 32px);
}

@media (max-width: 640px) {
    .admin-foldout-summary {
        min-height: 72px;
        padding: 16px 18px;
    }

    .admin-foldout-summary .count-badge {
        display: none;
    }

    .admin-foldout-content {
        padding: 18px;
    }
}


/* 3.6.14: enkel kapitelvælger med luk-knap i stedet for navigationspile. */
.audiobook-chapter-navigation {
    position: relative;
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 48px;
}

.audiobook-chapter-navigation span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.audiobook-player .audiobook-chapter-navigation .audiobook-chapter-close {
    position: absolute;
    top: 50%;
    right: 0;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    padding: 0;
    transform: translateY(-50%);
    color: var(--text);
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid var(--border);
    border-radius: 50%;
    cursor: pointer;
}

.audiobook-player .audiobook-chapter-navigation .audiobook-chapter-close:hover,
.audiobook-player .audiobook-chapter-navigation .audiobook-chapter-close:focus-visible {
    background: rgba(255, 255, 255, 0.13);
    border-color: var(--border-strong);
}

.audiobook-chapter-navigation .audiobook-chapter-close svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 800px) {
    .audiobook-chapter-navigation {
        min-height: 48px;
        padding: 0 54px;
    }

    .audiobook-player .audiobook-chapter-navigation .audiobook-chapter-close {
        width: 44px;
        height: 44px;
    }
}


/* 3.6.16: store kapitelhop samles til ét seek; vis diskret ventetilstand. */
.audiobook-player[aria-busy="true"] .desktop-audio-progress,
.audiobook-player[aria-busy="true"] .mobile-audio-progress {
    opacity: 0.62;
}

.audiobook-player[aria-busy="true"] .desktop-audio-toggle,
.audiobook-player[aria-busy="true"] .mobile-audio-control-primary {
    cursor: progress;
}

/* 3.6.17: robust lydbogsafspilning, bufferingstatus og retry. */
.audiobook-player-status {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    z-index: 8;
    max-width: min(92vw, 520px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 38px;
    padding: 8px 12px;
    color: rgba(244, 249, 255, 0.94);
    background: rgba(8, 13, 21, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.34);
    font-size: 0.78rem;
    line-height: 1.25;
    text-align: center;
    transform: translateX(-50%);
}

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

.audiobook-player-retry {
    min-height: 30px;
    padding: 0 10px;
    color: #061018;
    background: var(--accent);
    border: 0;
    border-radius: 9px;
    cursor: pointer;
    font-size: 0.73rem;
    font-weight: 800;
    white-space: nowrap;
}

.audiobook-player.has-audio-error .audiobook-player-status {
    border-color: rgba(255, 112, 128, 0.48);
    background: rgba(42, 13, 19, 0.96);
}

.audiobook-player.is-audio-busy .desktop-audio-seek,
.audiobook-player.is-audio-busy .mobile-audio-seek {
    opacity: 0.62;
}

.audiobook-chapter-error {
    display: grid;
    gap: 9px;
    padding: 14px;
    color: var(--muted);
    text-align: center;
}

.audiobook-chapter-error button {
    min-height: 34px;
    justify-self: center;
    padding: 0 12px;
    color: #061018;
    background: var(--accent);
    border: 0;
    border-radius: 9px;
    cursor: pointer;
    font-weight: 800;
}

@media (max-width: 800px) {
    .audiobook-player-status {
        position: static;
        order: 3;
        width: min(100%, 520px);
        max-width: 100%;
        min-height: 36px;
        margin: -2px 0 0;
        padding: 7px 11px;
        border-radius: 12px;
        transform: none;
    }

    .audiobook-player .mobile-audio-progress {
        order: 4;
    }

    .audiobook-player .mobile-audio-controls {
        order: 5;
    }
}

/* 3.6.18: robust musikafspilning, bufferingstatus og samlet seek-controller. */
.music-player-status {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    z-index: 8;
    max-width: min(92vw, 520px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 38px;
    padding: 8px 12px;
    color: rgba(244, 249, 255, 0.94);
    background: rgba(8, 13, 21, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.34);
    font-size: 0.78rem;
    line-height: 1.25;
    text-align: center;
    transform: translateX(-50%);
}

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

.music-player .music-player-retry {
    width: auto;
    min-width: 0;
    height: auto;
    min-height: 30px;
    padding: 0 10px;
    color: #061018;
    background: var(--accent);
    border: 0;
    border-radius: 9px;
    cursor: pointer;
    font-size: 0.73rem;
    font-weight: 800;
    white-space: nowrap;
}

.music-player.has-audio-error .music-player-status {
    border-color: rgba(255, 112, 128, 0.48);
    background: rgba(42, 13, 19, 0.96);
}

.music-player.is-audio-busy .desktop-audio-seek,
.music-player.is-audio-busy .mobile-audio-seek {
    opacity: 0.62;
}

.music-player[aria-busy="true"] .desktop-audio-toggle,
.music-player[aria-busy="true"] .mobile-audio-control-primary {
    cursor: progress;
}

.music-track-card.is-loading,
.music-folder-play-button.is-loading {
    cursor: progress;
    opacity: 0.62;
}

@media (max-width: 800px) {
    .music-player-status {
        position: static;
        order: 3;
        width: min(100%, 520px);
        max-width: 100%;
        min-height: 36px;
        margin: -2px 0 0;
        padding: 7px 11px;
        border-radius: 12px;
        transform: none;
    }

    .music-player .mobile-audio-progress {
        order: 4;
    }

    .music-player .mobile-audio-controls {
        order: 5;
    }
}

/* 3.7.5: Z skifter robust mellem Tilpas og Fyld for den aktuelle video. */
#lightbox-video.video-fill-mode,
#lightbox-video.video-fill-mode:fullscreen,
#lightbox-video.video-fill-mode:-webkit-full-screen,
.lightbox.video-fill-mode #lightbox-video,
.lightbox.video-fill-mode:fullscreen #lightbox-video,
.lightbox.video-fill-mode:-webkit-full-screen #lightbox-video {
    object-fit: cover !important;
}
/* Mobil musikafspiller: vandret swipe på cover/titel skifter nummer, mens lodret swipe fortsat scroller. */
@media (pointer: coarse) {
    .music-player > #music-player-cover,
    .music-player-info {
        touch-action: pan-y;
    }
}


/* Musik- og fotokort: handlinger forankres til selve billedfladen.
 * Tidligere blev især musikknappen beregnet fra kortets nederste kant, så
 * forskellige titelhøjder og visningstyper flyttede ikonerne. */
.media-card-visual-actions {
    --visual-action-padding: calc(clamp(8px, 0.8vw, 13px) + 1px);
    --visual-action-inset: 10px;
    --visual-action-ratio: 2 / 3;
    position: absolute;
    top: var(--visual-action-padding);
    right: var(--visual-action-padding);
    left: var(--visual-action-padding);
    z-index: 6;
    aspect-ratio: var(--visual-action-ratio);
    pointer-events: none;
}

.media-card-visual-actions > button {
    pointer-events: auto;
}

.music-folder-card-wrap .media-card-visual-actions {
    --visual-action-ratio: 2 / 3;
}

.photo-card-wrap .media-card-visual-actions {
    --visual-action-ratio: 4 / 3;
}

.music-list:not([data-view="list"]) .music-folder-card-wrap .media-card-visual-actions .music-album-favorite-button,
.photo-list:not([data-view="list"]) .photo-card-wrap .media-card-visual-actions .photo-favorite-button {
    top: var(--visual-action-inset);
    right: var(--visual-action-inset);
}

.music-list:not([data-view="list"]) .music-folder-card-wrap .media-card-visual-actions .music-folder-play-button {
    right: var(--visual-action-inset);
    bottom: var(--visual-action-inset);
}

.music-list[data-view="compact"] .media-card-visual-actions,
.photo-list[data-view="compact"] .media-card-visual-actions {
    --visual-action-padding: 8px;
    --visual-action-inset: 8px;
}

.music-list[data-view="compact"] .media-card-visual-actions {
    --visual-action-ratio: 4 / 5;
}

.photo-list[data-view="compact"] .media-card-visual-actions {
    --visual-action-ratio: 1 / 1;
}

.music-list[data-view="compact"] .media-card-visual-actions .music-album-favorite-button,
.music-list[data-view="compact"] .media-card-visual-actions .music-folder-play-button {
    width: 34px;
    height: 34px;
}

.photo-list[data-view="compact"] .media-card-visual-actions .photo-favorite-button {
    width: 32px;
    height: 32px;
}

/* I listevisning ligger handlingerne fortsat på rækkens højre side. */
.music-list[data-view="list"] .media-card-visual-actions,
.photo-list[data-view="list"] .media-card-visual-actions {
    inset: 0;
    aspect-ratio: auto;
}

.music-list[data-view="list"] .media-card-visual-actions .music-album-favorite-button,
.photo-list[data-view="list"] .media-card-visual-actions .photo-favorite-button {
    top: 50%;
    right: 12px;
    width: 36px;
    height: 36px;
    transform: translateY(-50%);
}

.music-list[data-view="list"] .media-card-visual-actions .music-album-favorite-button:hover,
.music-list[data-view="list"] .media-card-visual-actions .music-album-favorite-button:focus-visible,
.photo-list[data-view="list"] .media-card-visual-actions .photo-favorite-button:hover,
.photo-list[data-view="list"] .media-card-visual-actions .photo-favorite-button:focus-visible {
    transform: translateY(-50%) scale(1.08);
}

.music-list[data-view="list"] .media-card-visual-actions .music-folder-play-button {
    top: 50%;
    right: 58px;
    bottom: auto;
    width: 38px;
    height: 38px;
    transform: translateY(-50%);
}

.music-list[data-view="list"] .media-card-visual-actions .music-folder-play-button:hover,
.music-list[data-view="list"] .media-card-visual-actions .music-folder-play-button:focus-visible {
    transform: translateY(-50%) scale(1.06);
}

@media (max-width: 640px) {
    .media-card-visual-actions {
        --visual-action-padding: 8px;
    }
}