:root {
    --motion-fast: 140ms;
    --motion-standard: 240ms;
    --motion-expand: 320ms;
    --motion-ease: cubic-bezier(.2,.8,.2,1);
}
:root, .nav-links, .list-scroll, .lyrics-container { scrollbar-gutter: stable; }
.content-wrapper { animation: none; }
.sidebar { view-transition-name: epic-sidebar; }
.ui-notifications { view-transition-name: epic-notifications; }
::view-transition { pointer-events: none; }
::view-transition-group(root) { animation-duration: var(--motion-standard); animation-timing-function: var(--motion-ease); }
::view-transition-old(root) { animation: ui-page-out var(--motion-standard) ease both; }
::view-transition-new(root) { animation: ui-page-in var(--motion-standard) var(--motion-ease) both; }
::view-transition-group(epic-sidebar), ::view-transition-group(epic-notifications), ::view-transition-new(epic-sidebar), ::view-transition-new(epic-notifications) { animation: none; }
::view-transition-old(epic-sidebar), ::view-transition-old(epic-notifications) { animation: none; opacity: 0; }
.main-content.is-navigating { cursor: progress; }
.content-wrapper, details, .lyrics-panel { overflow-anchor: none; }
.ui-navigation-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1100; opacity: 0; pointer-events: none; overflow: hidden; transition: opacity var(--motion-fast); }
.ui-navigation-progress::after { content: ''; display: block; width: 42%; height: 100%; background: linear-gradient(90deg, transparent, var(--accent-color), var(--warm-color)); transform: translateX(-100%); }
.ui-navigation-progress.is-active { opacity: 1; transition-delay: 120ms; }
.ui-navigation-progress.is-active::after { animation: ui-loading 1.2s ease-in-out infinite; }
.ui-notifications { position: fixed; right: 22px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); width: min(390px, calc(100vw - 32px)); z-index: 1200; pointer-events: none; }
.ui-toast { display: flex; gap: 12px; align-items: center; padding: 14px 12px 14px 18px; margin-bottom: 10px; background: #312a3f; border: 1px solid var(--line-color); border-radius: 12px; box-shadow: 0 10px 40px #0005; color: var(--text-color); font-size: .82rem; overflow: hidden; overflow-wrap: anywhere; pointer-events: auto; }
.ui-toast > span { flex: 1; min-width: 0; }
.ui-toast > i { color: var(--accent-color); }
.ui-toast-success > i { color: var(--success); }
.ui-toast-error > i { color: var(--danger); }
.ui-toast > button { flex: 0 0 36px; width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; color: var(--text-muted); cursor: pointer; font-size: 1.4rem; transition: color var(--motion-fast), background var(--motion-fast); }
.ui-toast > button:hover { background: var(--accent-soft); color: var(--text-color); }
button[aria-busy="true"], .btn[aria-busy="true"] { position: relative; cursor: progress; }
button[aria-busy="true"]::after { content: ''; display: inline-block; width: 12px; height: 12px; margin-left: 8px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: ui-spin .7s linear infinite; vertical-align: middle; }
.player-btn[aria-busy="true"] > i { opacity: 0; }
.player-btn[aria-busy="true"]::after { position: absolute; margin: 0; }
details { box-sizing: border-box; }
summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary:focus-visible { outline: 2px solid var(--warm-color); outline-offset: 4px; border-radius: 6px; }
summary > .disclosure-chevron, .mp-disclosure summary > i:last-child { transition: transform var(--motion-standard) var(--motion-ease); }
summary[aria-expanded="true"] > .disclosure-chevron { transform: rotate(180deg); }
.mp-disclosure summary[aria-expanded="true"] > i:last-child { transform: rotate(45deg); }
.mp-disclosure summary[aria-expanded="false"] > i:last-child { transform: rotate(0); }
.mp-refresh[aria-busy="true"]::after { display: none; }
.lang-dropdown-menu { display: block; visibility: hidden; opacity: 0; transform: translateY(6px) scale(.98); transform-origin: bottom; pointer-events: none; transition: opacity var(--motion-fast), transform var(--motion-standard) var(--motion-ease), visibility var(--motion-standard); }
.lang-dropdown-menu.show { visibility: visible; opacity: 1; transform: none; pointer-events: auto; }
.lang-dropdown-btn > i:last-child { transition: transform var(--motion-standard) var(--motion-ease); }
.lang-dropdown-btn[aria-expanded="true"] > i:last-child { transform: rotate(180deg); }
.nav-links a { transition: background var(--motion-standard), border-color var(--motion-standard), color var(--motion-standard), transform var(--motion-standard) var(--motion-ease); }
.nav-links a:active { transform: scale(.98); }
.mp-track, .track-list-item, tbody tr { transition: background var(--motion-fast), border-color var(--motion-fast); }
.slider, .slider::before { transition-duration: var(--motion-standard) !important; transition-timing-function: var(--motion-ease) !important; }
.ui-editor { margin-top: 12px; }
.ui-editor > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line-color); border-radius: 8px; color: var(--text-muted); font-size: .82rem; }
.ui-editor > summary:hover { color: var(--text-color); background: var(--accent-soft); }
@keyframes ui-loading { to { transform: translateX(340%); } }
@keyframes ui-spin { to { transform: rotate(360deg); } }
@keyframes ui-page-out { to { opacity: 0; transform: translateY(-3px); } }
@keyframes ui-page-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 768px) { .ui-notifications { right: 16px; } }
@media (prefers-reduced-motion: reduce) {
    :root { --motion-fast: 0ms; --motion-standard: 0ms; --motion-expand: 0ms; }
    .ui-navigation-progress.is-active::after { width: 100%; transform: none; opacity: .6; }
    button[aria-busy="true"]::after { border-right-color: currentColor; opacity: .65; }
}