/* Shared optical layers. Blur is limited to navigation and a few overlays,
   never repeated across the full catalog. Opaque fallbacks remain readable. */
body {
    --surface-card: rgba(166, 202, 231, .065);
    --surface-card-hover: rgba(177, 218, 244, .12);
    --surface-elevated: rgba(155, 192, 222, .11);
    --surface-input: rgba(190, 219, 245, .06);
    --surface-modal: #182c3e;
    --surface-player: rgba(16, 31, 47, .86);
    --border-subtle: rgba(205, 229, 250, .10);
    --border-medium: rgba(205, 229, 250, .19);
    --border-strong: rgba(205, 229, 250, .32);
    --on-surface-medium: #c3d0df;
    --on-surface-muted: #a2b3c7;
    --on-surface-faint: #91a4ba;
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 22px;
    --glass-blur: 22px;
    --optical-border: rgba(202, 225, 255, .19);
    --optical-light: inset 0 1px 0 rgba(255,255,255,.13);
    --optical-panel: linear-gradient(125deg, rgba(156, 198, 229, .105), rgba(135, 196, 207, .025));
    --lib-card-bg: var(--surface-card);
    --lib-card-border: 1px solid var(--border-medium);
    --lib-focus-shadow: 0 10px 30px #0006, 0 0 0 1px rgba(var(--md-accent-rgb), .45);
}
.glass-shell {
    --optical-border: rgba(202, 225, 255, .19);
    --optical-light: inset 0 1px 0 rgba(255,255,255,.13);
    background: radial-gradient(ellipse at 18% 0%, #253957 0, transparent 52%),
                radial-gradient(ellipse at 95% 60%, #163b43 0, transparent 55%), #090f1d;
}
.glass-shell .sidebar {
    background: linear-gradient(155deg, rgba(70,94,126,.28), rgba(10,19,34,.82));
    backdrop-filter: blur(28px) saturate(140%);
    border-right: 1px solid var(--optical-border);
    box-shadow: var(--optical-light), 12px 0 40px #00000024;
}
.glass-shell .uni-bar,
.glass-shell .uni-bar.uni-bar-transparent {
    background: linear-gradient(100deg, #152337a8, #26394c54);
    backdrop-filter: blur(24px) saturate(150%);
    border-bottom: 1px solid #d9edff12;
}
.glass-shell .uni-bar .uni-bar-input {
    background: linear-gradient(120deg, #d5e7ff19, #a8d4ff08);
    border: 1px solid #dae9ff30;
    box-shadow: var(--optical-light), 0 5px 24px #00000025;
    color: #f3f7ff;
}
.glass-shell .sidebar .nav-link.active {
    background: linear-gradient(110deg, #98cfff30, #89e6d912);
    box-shadow: var(--optical-light), inset 3px 0 #a9e8ea, 0 6px 22px #00000020;
    border-radius: 10px;
}
.glass-shell .lib-layout,
.glass-shell .lib-hero-region { background: transparent; }
.glass-shell .billboard {
    border: 1px solid #e0efff32;
    box-shadow: var(--optical-light), 0 20px 55px #00000050;
    isolation: isolate;
}
.glass-shell .billboard-gradient {
    background: linear-gradient(90deg, #060d1970, #080f1910 65%),
                linear-gradient(0deg, #060b19c9, transparent 65%);
}
.glass-shell .billboard-content { padding: 22px 30px 86px; gap: 32px; }
.glass-shell .billboard-info {
    flex: 0 1 620px;
    padding: 16px 24px;
    gap: 8px;
    border: 1px solid #ebf5ff38;
    border-radius: 20px;
    background: linear-gradient(125deg, #263b4dbc, #14213091);
    backdrop-filter: blur(22px) saturate(145%);
    box-shadow: var(--optical-light), 0 16px 44px #00000036;
}
.glass-shell .billboard-eyebrow { color: #c6eeef; letter-spacing: .18em; }
.glass-shell .billboard-title { font-size: clamp(1.85rem, 3vw, 2.9rem); }
.glass-shell .billboard-overview { color: #edf3fc; -webkit-line-clamp: 2; }
.glass-shell .billboard-btn-secondary {
    background: linear-gradient(110deg, #e5f6ff25, #e5f6ff0a);
    border: 1px solid #e1f0ff40; box-shadow: var(--optical-light);
}
.glass-shell .billboard-dots { scrollbar-width: thin; scrollbar-color: #d9eeff45 transparent; }
.glass-shell .billboard-poster {
    border: 1px solid #eaf6ff80;
    box-shadow: 0 22px 50px #0009, 0 0 30px #c0e9ff20;
    transform: rotate(2deg);
}
.glass-shell .billboard-nav {
    left: 30px; right: 30px; bottom: 14px;
    padding: 7px; border-radius: 16px;
    background: linear-gradient(110deg, #b8d8f525, #10203191);
    backdrop-filter: blur(22px) saturate(150%);
    border: 1px solid #d8ebff32;
    box-shadow: var(--optical-light), 0 8px 30px #0004;
}
.glass-shell .billboard-dot { background: #ffffff0b; border-color: #ffffff12; border-radius: 10px; }
.glass-shell .billboard-dot.active {
    background: linear-gradient(120deg, #d6f5ff39, #92d7e81f);
    border-color: #bdeffb9c; box-shadow: inset 0 1px #fff4, 0 0 18px #a1e9ef20;
}
.glass-shell .billboard-motion { background: #dcefff19; border-color: #e2f6ff40; }
.glass-shell .showcase-section {
    background: linear-gradient(120deg, #a8c9e909, #84c7cb04);
    border: 1px solid #d4e6ff12; border-radius: 18px;
    padding: 16px 18px; margin-bottom: 18px;
    box-shadow: inset 0 1px #ffffff05;
}
.glass-shell .showcase-browse {
    padding: 6px 12px; border: 1px solid #d4ecff26;
    border-radius: 20px; background: #cceaff0d; color: #d8f3ff;
}
.glass-shell .showcase-card-active .showcase-expand {
    background: linear-gradient(120deg, #20384bd9, #102332d1);
    backdrop-filter: blur(14px); border-top: 1px solid #e1f6ff40;
}
.glass-shell .lsc-card { background: #cce5ff0b; border-color: #d8eaff26; box-shadow: var(--optical-light); }
.glass-shell .lsc-info { background: linear-gradient(115deg, #b4daef12, #8ad3d505); }
.glass-shell .md-hero-info {
    padding: 24px; border-radius: 22px; border: 1px solid #def0ff2b;
    background: linear-gradient(125deg, #243a4dba, #101c2dba);
    backdrop-filter: blur(22px); box-shadow: var(--optical-light), 0 18px 50px #0004;
}
.glass-shell .mdm-overlay { background: #0409139c; backdrop-filter: blur(12px) saturate(75%); }
.glass-shell .mdm-modal {
    max-width: 740px; border-radius: 24px; border: 1px solid #d8edff45;
    background: linear-gradient(140deg, #324555ee, #132330ee);
    box-shadow: var(--optical-light), 0 32px 100px #0009;
    scrollbar-width: thin; scrollbar-color: #c7e6ff50 transparent;
}
.glass-shell .mdm-backdrop { max-height: 260px; }
.glass-shell .mdm-backdrop + .mdm-poster {
    border: 1px solid #eefaff70; box-shadow: 0 12px 30px #0006;
}
.glass-shell .mdm-title { font-size: 1.7rem; letter-spacing: -.025em; }
.glass-shell .mdm-overview { color: #dce7f1; font-size: .9rem; line-height: 1.65; }
.glass-shell :is(.mdm-tag, .mdm-trailer-link, .mdm-btn, .mdm-link) {
    border-radius: 9px; border: 1px solid #cceaff2b;
    background: #dcefff0c; box-shadow: var(--optical-light);
}
.glass-shell .mdm-section-label, .glass-shell .mdm-group-label { color: #aebfd0; }
.glass-shell .mdm-cast-name { color: #d8eaf5; }
.glass-shell .mdm-cast-role { color: #acbfd0; }
.glass-shell .mdm-close { border: 1px solid #e9f6ff50; box-shadow: 0 4px 16px #0006; }
.glass-shell :is(button, a, input):focus-visible { outline: 2px solid #bcecff; outline-offset: 3px; }
/* All operational pages share the same material as the viewing surfaces.
   No blur on repeated cards: keep large lists inexpensive and stable. */
.glass-shell :is(.glass-card, .host-card, .ctr-card, .stat-card, .issue-row,
    .plugins-stat-card, .plugins-surface-block, .stg-card, .stg-svc-card,
    .stg-expand-panel, .bw-card, .bw-hero, .log-console, .ast-playback-card) {
    background: var(--optical-panel);
    border: 1px solid var(--border-medium);
    border-radius: 16px;
    box-shadow: var(--optical-light), 0 8px 24px #0000001f;
}
.glass-shell .glass-card { position: relative; backdrop-filter: none; }
.glass-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 38px;
    padding: .45rem .85rem;
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-sm);
    background: var(--optical-panel);
    box-shadow: var(--optical-light);
    color: var(--on-surface);
    font: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.glass-button:hover:not(:disabled) { background: var(--surface-card-hover); border-color: var(--border-strong); color: var(--on-surface); }
.glass-button:disabled { opacity: .45; cursor: default; }
.glass-button:focus-visible { outline: 2px solid var(--interactive-accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .glass-button { transition: none; } }
.glass-shell :is(.glass-card, .host-card, .ctr-card, .stg-card):hover {
    border-color: var(--border-strong);
}
.glass-shell :is(.lib-filter-bar, .view-switcher, .lc-tabs, .stg-sidebar,
    .setup-sidebar, .ast-input-bar, .logs-toolbar, .cal-controls) {
    background: linear-gradient(120deg, #c7e4ff12, #9ccee509);
    border: 1px solid var(--border-medium);
    border-radius: 14px;
    box-shadow: var(--optical-light);
}
.glass-shell :is(.view-switcher, .lc-tabs, .cal-controls) { padding: 5px; }
.glass-shell .ast-input-bar { padding: 12px; }
.glass-shell :is(.form-control, .form-select, .filter-input, .filter-select, .ast-input-wrap textarea) {
    color: #e4edf8; background-color: #1020328c;
    border-color: var(--border-medium); border-radius: 10px;
    box-shadow: inset 0 1px 4px #0002;
}
.glass-shell select option { background: #172638; color: #eef6ff; }
.glass-shell :is(.view-btn, .lc-tab, .stg-nav-item).active {
    background: linear-gradient(120deg, rgba(var(--md-accent-rgb), .28), #b1e5ef14);
    box-shadow: var(--optical-light); border-radius: 10px;
}
.glass-shell :is(.mc-info, .hub-card-info, .music-album-info) {
    background: linear-gradient(120deg, #bddff314, #91bdce06);
}
.glass-shell :is(.mc-card, .hub-card, .music-album-card, .music-artist-card, .spotlight-tile, .stage-poster-card) {
    border-radius: 14px; border: 1px solid var(--border-medium);
    box-shadow: var(--optical-light), 0 8px 22px #0003;
}
.glass-shell :is(.stage-hero, .spotlight-hero, .library-hero) {
    border: 1px solid var(--border-medium); box-shadow: 0 16px 45px #0004;
    border-radius: 22px; overflow: hidden;
}
.glass-shell :is(.stage-hero-info, .spotlight-hero-info) {
    padding: 20px; border-radius: 18px; border: 1px solid #e1f1ff33;
    background: linear-gradient(120deg, #24394bbb, #10202dbb);
    backdrop-filter: blur(18px); box-shadow: var(--optical-light);
}
.glass-shell :is(.mc-hover-btn, .hub-card-play, .lsc-play) {
    background: #e2f5ff26; border: 1px solid #e8faff70;
    backdrop-filter: blur(12px); box-shadow: 0 6px 24px #0004;
}
.glass-shell .ast-msg.assistant .ast-msg-bubble {
    background: var(--optical-panel); border: 1px solid var(--border-medium);
    box-shadow: var(--optical-light); border-radius: 16px 16px 16px 5px;
}
.glass-shell .ast-msg.user .ast-msg-bubble {
    background: linear-gradient(120deg, rgba(var(--md-primary-rgb), .75), rgba(var(--md-accent-rgb), .24));
    border: 1px solid var(--border-strong); box-shadow: var(--optical-light);
}
body :is(.player-bar, .dropdown-menu, .user-menu, .modal-content, .login-card) {
    background: linear-gradient(120deg, #30475be8, #102133eb);
    backdrop-filter: blur(24px) saturate(140%);
    border: 1px solid var(--optical-border);
    box-shadow: var(--optical-light), 0 16px 48px #0006;
    color: #eaf2fb;
}
.glass-shell .table { --bs-table-bg: transparent; --bs-table-color: #dce7f3; --bs-table-border-color: var(--border-subtle); }
.glass-shell :is(.cal-date-label, .lc-date-label) { color: #bad4e5; letter-spacing: .09em; }
/* Animate user interactions, not row arrival or live polling updates. */
@media (prefers-reduced-motion: no-preference) {
    .glass-shell :is(button, .nav-link, .mc-card, .hub-card, .music-album-card, .music-artist-card) {
        transition-property: background-color, border-color, box-shadow, transform;
        transition-duration: 180ms; transition-timing-function: cubic-bezier(.2,.7,.3,1);
    }
    .glass-shell .mdm-modal, .glass-shell .dropdown-menu { animation: glass-reveal 180ms ease-out; }
    @media (hover: hover) {
        .glass-shell :is(.mc-compact, .hub-card, .music-album-card, .music-artist-card):hover { transform: translateY(-2px); }
        .glass-shell button:not(:disabled):active { transform: translateY(1px); }
    }
}
@keyframes glass-reveal { from { opacity: 0; transform: translateY(8px) scale(.99); } to { opacity: 1; transform: none; } }
@media (max-width: 768px) {
    .glass-shell .billboard-content { padding: 14px 14px 86px; }
    .glass-shell .billboard-info { padding: 14px 16px; border-radius: 16px; }
    .glass-shell .billboard-title { font-size: 1.65rem; }
    .glass-shell .billboard-overview { -webkit-line-clamp: 2; }
    .glass-shell .billboard-nav { left: 12px; right: 12px; bottom: 12px; }
    .glass-shell .showcase-section { padding: 12px; }
    .glass-shell .md-hero-info { padding: 16px; }
}
@media (prefers-reduced-transparency: reduce) {
    .glass-shell :is(.sidebar, .uni-bar, .billboard-info, .billboard-nav, .md-hero-info, .showcase-expand, .mdm-modal, .stage-hero-info, .spotlight-hero-info),
    body :is(.player-bar, .dropdown-menu, .user-menu, .modal-content, .login-card) {
        backdrop-filter: none; background: #172638;
    }
}
@media (prefers-reduced-motion: reduce) {
    /* Cover shared and isolated components, including loading shimmer and overlays. */
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .glass-shell .billboard-poster { transform: none; }
}