@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
    --bg-main: #f3f2ed;
    --bg-accent: linear-gradient(180deg, #f8f7f3 0%, #efeee8 100%);
    --surface: rgba(255, 255, 255, 0.7);
    --surface-elevated: #faf9f4;
    --surface-glass: rgba(20, 20, 18, 0.04);
    --text-primary: #161615;
    --text-secondary: #5f5d57;
    --border-color: rgba(22, 22, 21, 0.12);
    --accent-1: #181818;
    --accent-2: #55524c;
    --accent-3: #8a877f;
    --accent-gradient: linear-gradient(135deg, #181818 0%, #44433f 100%);
    --danger-gradient: linear-gradient(135deg, #865258 0%, #694146 100%);
    --on-accent: #ffffff;
    --input-bg: #ffffff;
    --shadow-soft: 0 10px 24px rgba(18, 18, 16, 0.05);
    --shadow-pop: none;
    --hint-text: color-mix(in srgb, var(--text-secondary) 86%, var(--text-primary));
    --hero-eyebrow: #d8e3ff;
    --hero-subtitle: rgba(248, 250, 255, 0.84);
    --notice-neutral-bg: color-mix(in srgb, var(--surface-elevated) 82%, rgba(255, 255, 255, 0.22));
    --notice-neutral-border: color-mix(in srgb, var(--border-color) 92%, rgba(255, 255, 255, 0.22));
    --notice-neutral-text: var(--text-primary);
    --notice-info-bg: color-mix(in srgb, var(--accent-2) 12%, var(--surface-elevated));
    --notice-info-border: color-mix(in srgb, var(--accent-2) 30%, var(--border-color));
    --notice-info-text: color-mix(in srgb, var(--text-primary) 90%, #0f5575 10%);
    --notice-success-bg: color-mix(in srgb, #78cfa0 12%, var(--surface-elevated));
    --notice-success-border: color-mix(in srgb, #78cfa0 30%, var(--border-color));
    --notice-success-text: color-mix(in srgb, var(--text-primary) 88%, #13612a 12%);
    --notice-warning-bg: color-mix(in srgb, #f2c57f 14%, var(--surface-elevated));
    --notice-warning-border: color-mix(in srgb, #d79c3b 32%, var(--border-color));
    --notice-warning-text: color-mix(in srgb, var(--text-primary) 86%, #7a4b00 14%);
    --notice-danger-bg: color-mix(in srgb, #ff8ba9 12%, var(--surface-elevated));
    --notice-danger-border: color-mix(in srgb, #ff8ba9 30%, var(--border-color));
    --notice-danger-text: color-mix(in srgb, var(--text-primary) 84%, #8b1d45 16%);
    --pill-info-bg: color-mix(in srgb, var(--accent-2) 14%, transparent);
    --pill-info-border: color-mix(in srgb, var(--accent-2) 26%, transparent);
    --pill-info-text: color-mix(in srgb, var(--text-primary) 92%, #0f5575 8%);
    --pill-success-bg: color-mix(in srgb, #78cfa0 14%, transparent);
    --pill-success-border: color-mix(in srgb, #78cfa0 26%, transparent);
    --pill-success-text: color-mix(in srgb, var(--text-primary) 92%, #13612a 8%);
    --pill-warning-bg: color-mix(in srgb, #f2c57f 16%, transparent);
    --pill-warning-border: color-mix(in srgb, #d79c3b 28%, transparent);
    --pill-warning-text: color-mix(in srgb, var(--text-primary) 90%, #7a4b00 10%);
    --color-background-100: 21,31,46;
    --color-shadow-blue: 0, 5, 15;
}

    :root[data-theme="anime"] {
        --bg-main: #090914;
        --bg-accent: radial-gradient(circle at top, #2a2261 0%, #130f2d 38%, #090914 100%);
        --surface: rgba(14, 17, 42, 0.72);
        --surface-elevated: #121632;
        --surface-glass: rgba(171, 195, 255, 0.14);
        --text-primary: #f6f8ff;
        --text-secondary: #c2caef;
        --border-color: rgba(201, 213, 255, 0.18);
        --accent-1: #f6f8ff;
        --accent-2: #8ec5ff;
        --accent-3: #b08dff;
        --accent-gradient: linear-gradient(135deg, #5c49d8 0%, #6ba9ff 100%);
        --danger-gradient: linear-gradient(135deg, #b14f89 0%, #743a63 100%);
        --on-accent: #fdfcff;
        --input-bg: rgba(9, 12, 30, 0.58);
        --shadow-soft: 0 14px 30px rgba(4, 6, 18, 0.34);
        --shadow-pop: none;
        --hint-text: rgba(214, 223, 255, 0.84);
        --hero-eyebrow: #d8e6ff;
        --hero-subtitle: rgba(238, 244, 255, 0.86);
        --notice-neutral-bg: color-mix(in srgb, rgba(17, 20, 44, 0.84) 88%, transparent);
        --notice-neutral-border: rgba(194, 207, 255, 0.2);
        --notice-neutral-text: var(--text-primary);
        --notice-info-bg: color-mix(in srgb, #67b7ff 18%, rgba(18, 22, 48, 0.92));
        --notice-info-border: color-mix(in srgb, #67b7ff 34%, var(--border-color));
        --notice-info-text: #eef7ff;
        --notice-success-bg: color-mix(in srgb, #73d7cb 18%, rgba(18, 22, 48, 0.92));
        --notice-success-border: color-mix(in srgb, #73d7cb 34%, var(--border-color));
        --notice-success-text: #f0fffd;
        --notice-warning-bg: color-mix(in srgb, #f7ce7a 20%, rgba(18, 22, 48, 0.92));
        --notice-warning-border: color-mix(in srgb, #f7ce7a 34%, var(--border-color));
        --notice-warning-text: #fff6de;
        --notice-danger-bg: color-mix(in srgb, #ff8ebd 18%, rgba(18, 22, 48, 0.92));
        --notice-danger-border: color-mix(in srgb, #ff8ebd 34%, var(--border-color));
        --notice-danger-text: #fff1f6;
        --pill-info-bg: color-mix(in srgb, #7cbfff 22%, transparent);
        --pill-info-border: color-mix(in srgb, #7cbfff 34%, transparent);
        --pill-info-text: #eef7ff;
        --pill-success-bg: color-mix(in srgb, #7edcc6 22%, transparent);
        --pill-success-border: color-mix(in srgb, #7edcc6 34%, transparent);
        --pill-success-text: #effffb;
        --pill-warning-bg: color-mix(in srgb, #ffd27e 24%, transparent);
        --pill-warning-border: color-mix(in srgb, #ffd27e 34%, transparent);
        --pill-warning-text: #fff7e2;
        --color-background-100: 16,22,46;
        --color-shadow-blue: 6, 12, 32;
    }

    :root[data-theme="dark"] {
        --bg-main: #10100f;
        --bg-accent: linear-gradient(180deg, #171715 0%, #0f0f0e 100%);
        --surface: rgba(26, 26, 24, 0.8);
        --surface-elevated: #171715;
        --surface-glass: rgba(255, 255, 255, 0.04);
        --text-primary: #f0eee8;
        --text-secondary: #aaa69c;
        --border-color: rgba(240, 238, 232, 0.12);
        --accent-1: #f0eee8;
        --accent-2: #a8a396;
        --accent-3: #706d66;
        --accent-gradient: linear-gradient(135deg, #f0eee8 0%, #b8b3a7 100%);
        --danger-gradient: linear-gradient(135deg, #c98991 0%, #8b5a61 100%);
        --on-accent: #111111;
        --input-bg: rgba(255, 255, 255, 0.03);
        --shadow-soft: 0 10px 24px rgba(0, 0, 0, 0.22);
        --shadow-pop: none;
        --hint-text: color-mix(in srgb, var(--text-secondary) 90%, white 10%);
        --hero-eyebrow: #c8d8ff;
        --hero-subtitle: rgba(232, 238, 255, 0.82);
        --notice-neutral-bg: color-mix(in srgb, var(--surface-elevated) 78%, rgba(255, 255, 255, 0.03));
        --notice-neutral-border: color-mix(in srgb, var(--border-color) 92%, rgba(255, 255, 255, 0.05));
        --notice-neutral-text: var(--text-primary);
        --notice-info-bg: color-mix(in srgb, var(--accent-2) 16%, var(--surface-elevated));
        --notice-info-border: color-mix(in srgb, var(--accent-2) 34%, var(--border-color));
        --notice-info-text: color-mix(in srgb, var(--text-primary) 94%, #78d4ff 6%);
        --notice-success-bg: color-mix(in srgb, #78cfa0 16%, var(--surface-elevated));
        --notice-success-border: color-mix(in srgb, #78cfa0 34%, var(--border-color));
        --notice-success-text: color-mix(in srgb, var(--text-primary) 94%, #78cfa0 6%);
        --notice-warning-bg: color-mix(in srgb, #f2c57f 18%, var(--surface-elevated));
        --notice-warning-border: color-mix(in srgb, #f2c57f 36%, var(--border-color));
        --notice-warning-text: color-mix(in srgb, var(--text-primary) 94%, #ffd58a 6%);
        --notice-danger-bg: color-mix(in srgb, #ff8ba9 16%, var(--surface-elevated));
        --notice-danger-border: color-mix(in srgb, #ff8ba9 34%, var(--border-color));
        --notice-danger-text: color-mix(in srgb, var(--text-primary) 94%, #ffb5c8 6%);
        --pill-info-bg: color-mix(in srgb, var(--accent-2) 18%, transparent);
        --pill-info-border: color-mix(in srgb, var(--accent-2) 30%, transparent);
        --pill-info-text: color-mix(in srgb, var(--text-primary) 96%, #78d4ff 4%);
        --pill-success-bg: color-mix(in srgb, #78cfa0 18%, transparent);
        --pill-success-border: color-mix(in srgb, #78cfa0 30%, transparent);
        --pill-success-text: color-mix(in srgb, var(--text-primary) 96%, #78cfa0 4%);
        --pill-warning-bg: color-mix(in srgb, #f2c57f 20%, transparent);
        --pill-warning-border: color-mix(in srgb, #f2c57f 32%, transparent);
        --pill-warning-text: color-mix(in srgb, var(--text-primary) 96%, #ffd58a 4%);
        --color-background-100: 21,31,46;
        --color-shadow-blue: 0, 5, 15;
    }

* { box-sizing: border-box; }

body {
    font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    background: var(--bg-accent), var(--bg-main);
    color: var(--text-primary);
    margin: 0;
    min-height: 100vh;
}

:root[data-theme="anime"] .library-import-page-shell {
    isolation: isolate;
}

:root[data-theme="anime"] .library-import-background {
    position: absolute;
    inset: 0;
    display: block;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg,
            rgba(8, 8, 20, 0.86) 0%,
            rgba(17, 13, 34, 0.74) 14%,
            rgba(15, 14, 34, 0.62) 36%,
            rgba(15, 14, 34, 0.58) 64%,
            rgba(10, 10, 22, 0.72) 84%,
            rgba(8, 8, 18, 0.88) 100%),
        radial-gradient(circle at 76% 20%, rgba(201, 228, 255, 0.3), transparent 20%),
        radial-gradient(circle at 58% 38%, rgba(111, 94, 255, 0.18), transparent 28%),
        url('/images/import-page-background.jpg') center center / cover no-repeat;
    filter: saturate(1.05) brightness(0.92);
    transform: scale(1.01);
}

:root[data-theme="anime"] .library-import-actions,
:root[data-theme="anime"] .import-overview-card,
:root[data-theme="anime"] .library-import-bulk-metadata,
:root[data-theme="anime"] .library-import-selection-count {
    backdrop-filter: blur(10px);
}

:root[data-theme="anime"] .library-import-actions,
:root[data-theme="anime"] .import-overview-card {
    border-color: color-mix(in srgb, rgba(215, 228, 255, 0.34) 68%, var(--border-color));
    background: color-mix(in srgb, rgba(15, 18, 44, 0.72) 88%, transparent);
}

:root[data-theme="anime"] .import-overview-card.selected {
    border-color: color-mix(in srgb, #c8f1ff 48%, #8e7cff 52%);
    box-shadow: 0 0 0 1px rgba(157, 192, 255, 0.2);
}

:root[data-theme="anime"] .import-overview-content,
:root[data-theme="anime"] .import-overview-content h3,
:root[data-theme="anime"] .import-overview-content p,
:root[data-theme="anime"] .library-import-selection-count {
    color: #f5f8ff;
}

:root[data-theme="anime"] .import-overview-library-summary,
:root[data-theme="anime"] .quick-filter-label {
    color: rgba(226, 233, 255, 0.82);
}

main {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 1.75rem 2rem;
}

a,
a:hover,
a:focus,
a:visited {
    color: inherit;
    text-decoration: none;
}

h1, h2, h3 { color: var(--text-primary); }

button {
    border: 1px solid var(--text-primary);
    background: var(--accent-gradient);
    color: var(--on-accent);
    font-weight: 600;
    border-radius: 0;
    box-shadow: none;
    transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}

button:hover:not(:disabled) {
    border-color: var(--accent-2);
}

button:active:not(:disabled) {
    opacity: 0.9;
}

button:disabled {
    opacity: 0.56;
    box-shadow: none;
    cursor: not-allowed;
}

button.danger,
.library-delete,
.media-tabs .danger {
    background: var(--danger-gradient);
}

input, select, textarea {
    background: var(--input-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 0;
}

.ui-skeleton {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 0;
    background: color-mix(in srgb, var(--surface) 92%, var(--border-color) 8%);
}

.ui-skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
    animation: ui-skeleton-shimmer 1.5s ease-in-out infinite;
}

.ui-fade-in {
    animation: ui-fade-in 220ms ease;
}

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

@keyframes ui-fade-in {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

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

.auth-page-shell {
    display: grid;
    place-items: center;
    min-height: calc(100svh - 12rem);
    padding: 1rem 0 2rem;
}

.auth-card-shell {
    width: min(100%, 520px);
    display: grid;
    gap: 1.2rem;
    padding: 1.35rem 0;
    border-radius: 0;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    background: transparent;
    box-shadow: none;
}

.legal-page-shell {
    align-items: start;
}

.legal-card-shell {
    width: min(100%, 860px);
}

.legal-warning-card {
    display: grid;
    gap: 0.4rem;
    padding: 1rem 1.1rem;
    border-radius: 0;
    border: 1px solid var(--notice-warning-border);
    background: var(--notice-warning-bg);
    color: var(--notice-warning-text);
}

.legal-warning-card p {
    margin: 0;
}

.legal-section {
    display: grid;
    gap: 0.45rem;
}

.legal-section h2,
.legal-section p {
    margin: 0;
}

.legal-section a {
    color: var(--accent-2);
}

.auth-legal-links {
    display: flex;
    gap: 0.9rem;
    flex-wrap: wrap;
    justify-content: center;
}

.auth-legal-links a,
.auth-redirect-message {
    color: var(--text-secondary);
}

.auth-mode-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
}

.auth-mode-link {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 44px;
    padding: 0.7rem 0.9rem;
    border-radius: 0;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 700;
    box-shadow: none;
    cursor: pointer;
    transition: border-color 180ms ease, color 180ms ease, background 180ms ease;
}

.auth-mode-link:hover {
    border-color: var(--text-primary);
    color: var(--text-primary);
}

.auth-mode-link.active {
    border-color: var(--text-primary);
    background: transparent;
    color: var(--text-primary);
}

.auth-card-head {
    display: grid;
    gap: 0.45rem;
}

.auth-card-head h1,
.auth-card-head p {
    margin: 0;
}

.auth-error-banner {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.9rem 1rem;
    border-radius: 0;
    border: 1px solid var(--notice-danger-border);
    background: var(--notice-danger-bg);
    color: var(--notice-danger-text);
    font-weight: 700;
}

.auth-error-banner span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.auth-form {
    display: grid;
    gap: 0.95rem;
}

.auth-form label {
    display: grid;
    gap: 0.35rem;
    color: var(--text-secondary);
    font-weight: 600;
}

.auth-form input {
    width: 100%;
    padding: 0.82rem 0.95rem;
    font: inherit;
}

.auth-check-row {
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.65rem;
}

.auth-check-row input {
    width: 1rem;
    height: 1rem;
    margin: 0;
}

.auth-submit {
    min-height: 46px;
    padding: 0.8rem 1rem;
    font: inherit;
}

.auth-switch-copy {
    margin: 0;
    color: var(--text-secondary);
}

.auth-switch-copy a {
    color: var(--text-primary);
    font-weight: 700;
    text-decoration: none;
}

.auth-switch-copy a:hover {
    text-decoration: underline;
}

.auth-inline-switch {
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    color: var(--text-primary);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.auth-inline-switch:hover {
    text-decoration: underline;
    transform: none;
    filter: none;
}

.ui-hint {
    color: var(--hint-text);
}

.ui-notice {
    margin: 0;
    padding: 0.78rem 0.95rem;
    border-radius: 14px;
    border: 1px solid var(--notice-neutral-border);
    background: var(--notice-neutral-bg);
    color: var(--notice-neutral-text);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.ui-notice.info {
    border-color: var(--notice-info-border);
    background: var(--notice-info-bg);
    color: var(--notice-info-text);
}

.ui-notice.success,
.catalog-request-notice {
    border-color: var(--notice-success-border);
    background: var(--notice-success-bg);
    color: var(--notice-success-text);
}

.ui-notice.warning {
    border-color: var(--notice-warning-border);
    background: var(--notice-warning-bg);
    color: var(--notice-warning-text);
}

.ui-notice.error,
.error {
    border-color: var(--notice-danger-border);
    background: var(--notice-danger-bg);
    color: var(--notice-danger-text);
}

.ui-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border-radius: 999px;
    padding: 0.24rem 0.68rem;
    border: 1px solid transparent;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.2;
}

.ui-pill.info {
    border-color: var(--pill-info-border);
    background: var(--pill-info-bg);
    color: var(--pill-info-text);
}

.ui-pill.success {
    border-color: var(--pill-success-border);
    background: var(--pill-success-bg);
    color: var(--pill-success-text);
}

.ui-pill.warning {
    border-color: var(--pill-warning-border);
    background: var(--pill-warning-bg);
    color: var(--pill-warning-text);
}

.media-frame {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: color-mix(in srgb, var(--surface-elevated) 82%, transparent);
}

.media-frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 160ms ease;
}

.media-frame.has-image:not(.image-error) .media-fallback {
    opacity: 0;
    pointer-events: none;
}

.media-frame.image-error img {
    opacity: 0;
}

.media-fallback {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 1rem;
    text-align: center;
    color: var(--hint-text);
    font-weight: 700;
    background: linear-gradient(180deg, color-mix(in srgb, var(--surface-elevated) 90%, transparent), color-mix(in srgb, var(--surface) 88%, transparent));
    transition: opacity 160ms ease;
}

.media-fallback::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url('/images/placeholder-cover.svg') center/cover no-repeat;
    opacity: 0.92;
}

.media-fallback span {
    position: relative;
    z-index: 1;
    padding: 0.55rem 0.8rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--border-color) 94%, rgba(255, 255, 255, 0.12));
    background: color-mix(in srgb, var(--surface-elevated) 86%, rgba(255, 255, 255, 0.18));
    box-shadow: 0 8px 18px rgba(86, 60, 149, 0.12);
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

h1:focus { outline: none; }
.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
.invalid { outline: 1px solid #e50000; }
.validation-message { color: #e50000; }
.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}
.blazor-error-boundary::after { content: "An error has occurred." }

/* Shared catalog styles used by /media and /titles */
.catalog-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
    margin-bottom: 1.5rem;
    padding: 1rem;
}

.catalog-controls,
.catalog-card,
.catalog-request-modal,
.catalog-request-results li {
    background: var(--surface-elevated);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-soft);
}

.catalog-controls label,
.catalog-filters label,
.catalog-request-header h2,
.catalog-card strong,
.catalog-result-title {
    color: var(--text-primary);
}

.catalog-controls select,
.catalog-controls input,
.catalog-filters select,
.catalog-filters input {
    border: 1px solid var(--border-color);
    background: var(--input-bg);
    color: var(--text-primary);
}

.catalog-controls label,
.catalog-filters label {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-weight: 600;
}

.catalog-controls select,
.catalog-controls input { min-width: 140px; padding: 0.5rem 0.75rem; border-radius: 10px; font-size: 0.95rem; }

.catalog-controls button {
    padding: 0.6rem 1.2rem;
    border-radius: 999px;
}

.catalog-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-end;
    margin-bottom: 1.5rem;
}

.catalog-filters select,
.catalog-filters input { min-width: 170px; padding: 0.45rem 0.7rem; border-radius: 10px; font-size: 0.92rem; }

.catalog-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.8rem; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); }
.catalog-card { padding: 0.9rem; border-radius: 20px; color: var(--text-primary); display: grid; grid-template-columns: 140px 1fr; gap: 0.8rem; align-items: stretch; text-align: left; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.catalog-card:hover { transform: translateY(-3px); }
.catalog-cover { width: 100%; height: 100%; min-height: 220px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 16px; box-shadow: 0 12px 22px rgba(77, 58, 125, 0.25); }
.catalog-info { display: flex; flex-direction: column; gap: 0.45rem; width: 100%; }
.catalog-meta { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 0.5rem; font-size: 0.8rem; }
.catalog-type,
.catalog-popularity,
.catalog-chip { border-radius: 999px; font-weight: 600; }
.catalog-type { padding: 0.2rem 0.6rem; background: color-mix(in srgb, var(--accent-1) 45%, transparent); color: var(--text-primary); }
.catalog-popularity { padding: 0.2rem 0.6rem; background: color-mix(in srgb, var(--accent-2) 42%, transparent); color: var(--text-primary); }
.catalog-taxonomy { display: flex; flex-wrap: wrap; gap: 0.35rem; justify-content: flex-start; }
.catalog-actions { display: flex; gap: 0.6rem; margin-top: auto; }
.catalog-detail-link { display: inline-flex; align-items: center; justify-content: center; padding: 0.45rem 1rem; border-radius: 999px; border: 1px solid var(--border-color); color: var(--text-primary); text-decoration: none; font-weight: 700; background: color-mix(in srgb, var(--surface) 80%, transparent); }
.catalog-request { padding: 0.45rem 1rem; border-radius: 999px; border: none; background: linear-gradient(135deg, #9ed9ff 0%, #cdb8ff 100%); color: #1f4d6d; font-weight: 600; cursor: pointer; box-shadow: 0 10px 18px rgba(77, 156, 204, 0.35); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.catalog-request:hover { transform: translateY(-1px); box-shadow: 0 14px 22px rgba(77, 156, 204, 0.4); }
.catalog-id { margin-top: 0.3rem; font-size: 0.72rem; font-weight: 700; color: #d4af37; text-transform: uppercase; letter-spacing: 0.1em; align-self: flex-end; }
.catalog-chip { padding: 0.18rem 0.5rem; font-size: 0.72rem; }
.catalog-chip.genre { background: #ffe6c7; color: #7a4a00; }
.catalog-chip.tag { background: #d9f3ff; color: #0f5575; }

.catalog-request-overlay { position: fixed; inset: 0; background: rgba(18, 10, 36, 0.55); display: flex; align-items: center; justify-content: center; padding: 1.5rem; z-index: 1000; }
.catalog-request-modal { width: min(720px, 100%); max-height: 80vh; overflow: auto; border-radius: 20px; padding: 1.5rem; }
.catalog-request-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.catalog-request-header h2 { margin: 0; font-size: 1.3rem; }
.catalog-request-close { border: none; background: #f3e7ff; color: #4a2d83; padding: 0.4rem 0.8rem; border-radius: 999px; cursor: pointer; font-weight: 600; }
.catalog-request-bulk-actions { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; margin-bottom: 0.85rem; }
.catalog-request-bulk-actions label { display: inline-flex; align-items: center; gap: 0.4rem; color: #4a2d83; font-weight: 600; }
.catalog-result-select { display: inline-flex; align-items: center; gap: 0.35rem; color: #5a3d93; font-size: 0.8rem; }
.catalog-request-results { padding: 0; margin: 0; }
.catalog-request-result-item { padding: 0.85rem 1rem; border-radius: 14px; display: grid; gap: 0.4rem; margin-bottom: 0.9rem; }
.catalog-result-title { font-weight: 600; }
.catalog-result-meta { font-size: 0.85rem; color: var(--text-secondary); }
.catalog-result-action { justify-self: start; border: none; background: linear-gradient(135deg, #d8c0ff 0%, #9ed9ff 100%); color: #2a2250; padding: 0.4rem 0.8rem; border-radius: 999px; cursor: pointer; font-weight: 600; }
.catalog-request-notice { font-weight: 600; }

@media (max-width: 640px) {
    .catalog-grid { grid-template-columns: 1fr; }
    .catalog-card { grid-template-columns: 1fr; }
    .catalog-cover { max-width: 220px; }
}