:root {
    --brand-sky: #0ea5e9;
    --glass-panel: rgba(15, 23, 42, 0.75);
}

html { color-scheme: dark; }
body {
    font-family: 'Inter', sans-serif;
    background-color: #020617;
    background-image: radial-gradient(circle at 50% -20%, #1e293b 0%, #020617 80%);
    color: #f8fafc;
    min-height: 100vh;
}
h1, h2, h3 { font-family: 'Plus Jakarta Sans', sans-serif; }
#starfield { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; opacity: .55; }
.glass { background: var(--glass-panel); backdrop-filter: blur(24px); border: 1px solid rgba(255,255,255,.08); box-shadow: 0 25px 50px -12px rgba(0,0,0,.5); }
.track-card { transition: all .4s cubic-bezier(.4,0,.2,1); }
.track-card:hover:not(.track-disabled) { border-color: var(--brand-sky); background: rgba(14,165,233,.05); transform: translateY(-4px); }
.track-disabled { opacity: .55; cursor: not-allowed; }
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.85); backdrop-filter: blur(12px); display: flex; align-items: center; justify-content: center; z-index: 100; opacity: 0; visibility: hidden; transition: .4s ease; }
.modal-overlay.active { opacity: 1; visibility: visible; }
#minimized-player { position: fixed; bottom: 2rem; right: 2rem; z-index: 90; transition: .6s cubic-bezier(.16,1,.3,1); transform: translateY(200%); opacity: 0; }
#minimized-player.active { transform: translateY(0); opacity: 1; }
.progress-ring-circle { transition: stroke-dashoffset .3s linear; transform: rotate(-90deg); transform-origin: 50% 50%; }
.playing-pulse { position: absolute; top: 1.5rem; right: 1.5rem; width: 10px; height: 10px; background: var(--brand-sky); border-radius: 50%; box-shadow: 0 0 12px var(--brand-sky); animation: pulse 2s infinite; }
.status-message { min-height: 1.25rem; }
@keyframes pulse { 0% { transform: scale(.9); opacity: .6; } 50% { transform: scale(1.3); opacity: 1; } 100% { transform: scale(.9); opacity: .6; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

.card-audio-info {
    padding: .8rem .9rem;
    border: 1px solid rgba(148,163,184,.12);
    border-radius: .9rem;
    background: rgba(15,23,42,.45);
}
.card-audio-primary {
    font-size: .73rem;
    font-weight: 700;
    color: #e2e8f0;
    letter-spacing: .02em;
}
.card-audio-secondary {
    margin-top: .32rem;
    font-size: .67rem;
    color: #64748b;
}
.audio-panel {
    border: 1px solid rgba(148,163,184,.12);
    border-radius: 1.2rem;
    padding: 1.1rem;
    background: rgba(15,23,42,.48);
}
.audio-panel-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}
.audio-panel-kicker {
    color: #e2e8f0;
    font-size: .74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .14em;
}
.audio-panel-help {
    color: #64748b;
    font-size: .68rem;
    margin-top: .35rem;
    max-width: 28rem;
    line-height: 1.45;
}
.quality-select-wrap {
    min-width: 14rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    color: #64748b;
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
}
.quality-select {
    appearance: auto;
    width: 100%;
    border: 1px solid rgba(14,165,233,.24);
    border-radius: .75rem;
    background: #0f172a;
    color: #e2e8f0;
    padding: .65rem .75rem;
    font-size: .75rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
    outline: none;
}
.quality-select:focus {
    border-color: rgba(14,165,233,.8);
    box-shadow: 0 0 0 3px rgba(14,165,233,.12);
}
.audio-facts-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
}
.audio-fact {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    padding: .62rem .7rem;
    border-radius: .7rem;
    background: rgba(2,6,23,.5);
}
.audio-fact-label {
    color: #64748b;
    font-size: .64rem;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.audio-fact-value {
    color: #cbd5e1;
    font-size: .68rem;
    font-weight: 600;
    text-align: right;
}
@media (max-width: 640px) {
    .audio-panel-head { align-items: stretch; flex-direction: column; }
    .quality-select-wrap { min-width: 0; width: 100%; }
    .audio-facts-grid { grid-template-columns: 1fr; }
}
.modal-overlay { padding: 1rem; overflow-y: auto; }
.modal-overlay > .glass { margin: auto; }