/* A single static background, rather than a blur layer per recycled catalog tile. */
.app-container { isolation: isolate; }
.interface-language-settings h2 { margin-bottom: .5rem; }
.interface-language-settings p { margin-bottom: 1rem; color: var(--text-secondary); }
.interface-language-settings form { display: flex; align-items: center; flex-wrap: wrap; gap: .8rem; }
.interface-language-settings select { width: auto; min-width: 160px; }
.app-container::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(120deg, rgb(18 20 26 / 18%), rgb(18 20 26 / 40%)), url('../images/audio-ambient.svg') center / cover no-repeat;
    opacity: .68;
}
.app-container > .sidebar {
    background: color-mix(in srgb, var(--bg-secondary) 83%, transparent);
    backdrop-filter: blur(16px);
    border-right-color: color-mix(in srgb, var(--text-secondary) 20%, transparent);
    box-shadow: 8px 0 40px rgb(0 0 0 / 8%);
}
.app-container .brand { letter-spacing: -.025em; }
.brand-symbols { display:inline-flex; align-items:center; gap:4px; flex-shrink:0; color:inherit; }
.brand-symbols svg { display:block; width:20px; height:20px; }
.server-build-version { overflow-wrap:anywhere; }
.personal-settings-actions { display:flex; flex-wrap:wrap; align-items:center; gap:.75rem; margin-top:1rem; }
.app-password-manager { display:grid; gap:1.25rem; }
.app-password-form { display:flex; flex-wrap:wrap; align-items:flex-end; gap:1rem; }
.app-password-name { display:flex; flex-direction:column; gap:.5rem; flex:1 1 240px; max-width:520px; }
.app-password-duration { display:flex; flex-direction:column; gap:.5rem; flex:0 1 180px; }
.app-password-form .btn { min-height:44px; }
.app-password-list { display:grid; gap:1rem; }
.app-password-row { display:flex; flex-wrap:wrap; align-items:center; gap:1rem; margin-bottom:0; }
.app-password-summary { display:grid; gap:.4rem; flex:1 1 200px; min-width:0; }
.app-password-actions { display:flex; flex-wrap:wrap; gap:.65rem; }
.app-password-value { overflow-wrap:anywhere; white-space:normal; user-select:all; }
.app-container .nav-link { border-radius: 10px; }
.app-container .nav-link.active {
    background: linear-gradient(110deg, color-mix(in srgb, var(--accent) 36%, transparent), color-mix(in srgb, var(--accent) 16%, transparent));
    color: var(--text-primary);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-hover) 30%, transparent);
}
.app-container :where(.card) {
    background: color-mix(in srgb, var(--bg-secondary) 88%, transparent);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgb(0 0 0 / 10%);
}
.app-container .dashboard-section {
    background: linear-gradient(135deg, color-mix(in srgb, var(--bg-secondary) 88%, transparent), color-mix(in srgb, var(--bg-secondary) 76%, transparent));
    border-color: color-mix(in srgb, var(--text-secondary) 21%, transparent);
    box-shadow: 0 12px 40px rgb(0 0 0 / 10%), inset 0 1px rgb(255 255 255 / 3%);
}
.dashboard-heading {
    position: relative;
    margin-bottom: 1rem;
    padding: clamp(1.25rem, 2vw, 2rem);
    border: 1px solid color-mix(in srgb, var(--accent-hover) 24%, transparent);
    border-radius: 20px;
    background: linear-gradient(115deg, color-mix(in srgb, var(--accent) 20%, transparent), color-mix(in srgb, var(--bg-secondary) 35%, transparent) 60%, rgb(43 129 143 / 16%));
    box-shadow: inset 0 1px rgb(255 255 255 / 4%);
}
.dashboard-heading h1 { letter-spacing: -.035em; line-height: 1.18; margin-block: .5rem .65rem; }
.dashboard-heading p { max-width: 46rem; }
.dashboard-switches .btn { border-radius: 9px; }
.dashboard-albums article, .dashboard-list article, .dashboard-radio article {
    background: color-mix(in srgb, var(--bg-card) 90%, transparent);
}
/* Blazor focuses headings to announce navigation. Keep that focus for screen
   readers, without drawing a control-like rectangle around non-interactive text. */
.app-container :is(h1, h2)[tabindex='-1']:focus,
.auth-shell :is(h1, h2)[tabindex='-1']:focus { outline: none; box-shadow: none; }
[data-theme='light'] .app-container::before { opacity: .13; }
@media (max-width: 768px) {
    .app-container > .sidebar { backdrop-filter: none; }
    .dashboard-heading { padding: 1.2rem; border-radius: 16px; }
}
@media (prefers-reduced-transparency: reduce) {
    .app-container::before { display: none; }
    .app-container > .sidebar { background: var(--bg-secondary); backdrop-filter: none; }
    .app-container :where(.card), .app-container .dashboard-section { background: var(--bg-secondary); }
    .dashboard-heading { background: var(--bg-secondary); }
    .dashboard-albums article, .dashboard-list article, .dashboard-radio article { background: var(--bg-card); }
}
@media (forced-colors: active) {
    .app-container::before { display: none; }
    .app-container > .sidebar { background: Canvas; backdrop-filter: none; }
    .app-container .dashboard-section, .dashboard-heading { border: 1px solid CanvasText; background: Canvas; box-shadow: none; }
    .app-container .nav-link.active { outline: 1px solid Highlight; }
}

.user-key-fields { display:flex; align-items:end; flex-wrap:wrap; gap:1rem; margin:1.2rem 0; }
.user-key-fields > label { display:flex; flex-direction:column; gap:.5rem; }
.user-key-fields .user-key-toggle { flex-direction:row; align-items:center; min-height:42px; }
.user-key-fields input[type=checkbox] { width:18px; height:18px; accent-color:var(--accent); }
.user-key-row { display:flex; justify-content:space-between; gap:1rem; align-items:center; padding:1rem 0; border-top:1px solid var(--border-color); }
.user-key-row > div { min-width:0; flex:1; }
.user-key-row small, .user-key-secret code, .user-key-value { display:block; margin-top:.4rem; }
.user-key-secret { padding:1rem; border:1px solid var(--accent); border-radius:10px; margin-bottom:1rem; }
.user-key-value, .user-key-secret code { overflow-wrap:anywhere; user-select:all; }
@media (max-width:600px) { .user-key-row { flex-wrap:wrap; } }

.user-editor-fields { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:1.25rem; align-items:end; }
.user-editor-fields > .form-group { display:flex; flex-direction:column; min-width:0; margin:0; }
.user-editor-fields .form-label { line-height:1.5; margin-bottom:.5rem; }
.user-editor-fields .form-control { width:100%; height:50px; min-height:50px; box-sizing:border-box; }
.user-editor-active { display:flex; align-items:center; gap:.75rem; min-height:50px; }
.user-editor-active input { flex:0 0 auto; accent-color:var(--accent); }