:root {
    color-scheme: light;
    --ink: #17241e;
    --muted: #64736a;
    --line: #dce5df;
    --paper: #f4f7f4;
    --white: #fff;
    --green: #103d31;
    --green-bright: #185e48;
    --lime: #d8f56a;
    --coral: #ed7456;
}

* { box-sizing: border-box; }
body { background: var(--paper); color: var(--ink); font-family: "Aptos", "Segoe UI", sans-serif; margin: 0; min-height: 100vh; }
button { font: inherit; }
.app-shell { animation: arrive .35s ease-out both; margin: 0 auto; max-width: 1160px; min-height: 100vh; padding: 0 42px; }
.topbar { align-items: center; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; min-height: 78px; }
.brand { align-items: center; color: var(--ink); display: flex; gap: 11px; text-decoration: none; }
.brand-disc { align-items: center; background: radial-gradient(circle, var(--lime) 0 10%, var(--green) 11% 100%); border: 1px solid #244c3c; border-radius: 50%; color: var(--white); display: inline-flex; font-size: 19px; height: 38px; justify-content: center; width: 38px; }
.brand strong { font-size: 15px; font-weight: 800; }
.brand small { color: var(--green-bright); font-size: 10px; font-weight: 900; letter-spacing: 1px; }
.top-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 9px; justify-content: flex-end; }
.web-audio-form { display: flex; }
.web-audio-form input { background: var(--white); border: 1px solid #cbd8cf; border-radius: 5px 0 0 5px; color: var(--ink); font: inherit; font-size: 12px; min-height: 40px; min-width: 210px; padding: 0 11px; }
.web-audio-form button { background: #e5efdf; border: 1px solid #cbd8cf; border-left: 0; border-radius: 0 5px 5px 0; color: var(--green); cursor: pointer; font-size: 12px; font-weight: 800; padding: 0 12px; }
.web-audio-form button:hover { background: #d7e8cd; }
.visually-hidden { clip: rect(0, 0, 0, 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }
.add-button { align-items: center; background: var(--green); border: 0; border-radius: 5px; color: var(--white); cursor: pointer; display: inline-flex; font-size: 13px; font-weight: 750; gap: 8px; min-height: 40px; padding: 0 15px; }
.add-button:hover { background: var(--green-bright); }
.add-button span { color: var(--lime); font-size: 20px; line-height: 1; }
.windows-setup-link { align-items: center; background: #e5efdf; border: 1px solid #cbd8cf; border-radius: 5px; color: var(--green); display: inline-flex; font-size: 12px; font-weight: 800; justify-content: center; min-height: 40px; padding: 0 12px; text-decoration: none; white-space: nowrap; }
.windows-setup-link:hover { background: #d7e8cd; }
main { padding: 30px 0 24px; }
.library-heading { align-items: end; display: flex; justify-content: space-between; margin-bottom: 20px; }
.eyebrow { color: var(--green-bright); font-size: 10px; font-weight: 900; letter-spacing: 1px; margin: 0 0 5px; }
h1 { font-family: Georgia, "Times New Roman", serif; font-size: 36px; font-weight: 500; margin: 0; }
.device-label { align-items: center; color: var(--muted); display: flex; font-size: 10px; font-weight: 800; gap: 7px; margin: 0 0 5px; }
.device-dot { background: #54a879; border-radius: 50%; height: 7px; width: 7px; }
.player { background: linear-gradient(115deg, #103d31, #185744); border-radius: 7px; color: var(--white); display: grid; gap: 13px 22px; grid-template-columns: minmax(0, 1fr) auto; padding: 22px; }
.now-playing { align-items: center; display: flex; gap: 15px; min-width: 0; }
.album-art { align-items: center; background: radial-gradient(circle, var(--lime) 0 8%, var(--coral) 9% 15%, #202c27 16% 100%); border: 1px solid rgba(255,255,255,.32); border-radius: 5px; color: var(--white); display: flex; flex: 0 0 64px; font-size: 24px; height: 64px; justify-content: center; }
.track-copy { min-width: 0; }
.track-copy .eyebrow { color: var(--lime); }
.track-copy h2 { font-size: 18px; margin: 0; overflow-wrap: anywhere; }
.track-copy > p:last-child { color: #c1d5ca; font-size: 12px; margin: 5px 0 0; }
.transport { align-items: center; display: flex; gap: 8px; }
.transport-button { align-items: center; background: transparent; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; color: var(--white); cursor: pointer; display: inline-flex; font-size: 13px; height: 38px; justify-content: center; width: 38px; }
.transport-button:hover, .shuffle-button[aria-pressed="true"] { background: rgba(255,255,255,.16); }
.play-button { background: var(--lime); border-color: var(--lime); color: var(--green); height: 44px; width: 44px; }
.play-button:hover { background: #e7ffa0; }
.player audio { grid-column: 1 / -1; height: 40px; width: 100%; }
.player video { background: #09120e; border-radius: 4px; grid-column: 1 / -1; max-height: min(65vh, 560px); width: 100%; }
.player audio[hidden], .player video[hidden] { display: none; }
.status { color: #dcf4b0; font-size: 12px; grid-column: 1 / -1; margin: 0; min-height: 15px; }
.library { margin-top: 30px; }
.list-heading { align-items: baseline; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; padding: 0 4px 11px; }
.list-heading h2 { font-size: 16px; margin: 0; }
.list-heading span { color: var(--muted); font-size: 11px; }
.track-row { align-items: center; border-bottom: 1px solid var(--line); display: grid; gap: 12px; grid-template-columns: 38px minmax(0, 1fr) auto 34px; min-height: 66px; padding: 8px 4px; }
.track-row.current { background: #e8f3eb; }
.track-play, .track-remove { align-items: center; background: transparent; border: 0; border-radius: 50%; color: var(--green-bright); cursor: pointer; display: inline-flex; height: 34px; justify-content: center; width: 34px; }
.track-play:hover { background: #d6e8db; }
.track-name { background: transparent; border: 0; color: var(--ink); cursor: pointer; display: grid; font: inherit; gap: 3px; min-width: 0; text-align: left; }
.track-name strong { font-size: 13px; overflow-wrap: anywhere; }
.track-name span, .track-size { color: var(--muted); font-size: 11px; }
.track-remove { color: var(--muted); font-size: 19px; }
.track-remove:hover { background: #fbe4dc; color: #9c3d2c; }
.empty-state { color: var(--muted); font-size: 13px; padding: 25px 4px; }
footer { border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; padding: 15px 0 24px; }

@keyframes arrive { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 700px) {
    .app-shell { padding: 0 18px; }
    .topbar { align-items: flex-start; flex-direction: column; gap: 12px; padding: 14px 0; }
    .top-actions { align-items: stretch; flex-direction: column; width: 100%; }
    .web-audio-form input { flex: 1; min-width: 0; }
    .add-button { justify-content: center; }
    .windows-setup-link { width: 100%; }
    .player { grid-template-columns: 1fr; padding: 18px; }
    .transport { justify-content: center; }
    .player audio, .player video, .status { grid-column: 1; }
    .track-row { grid-template-columns: 34px minmax(0, 1fr) 30px; }
    .track-size { display: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; scroll-behavior: auto !important; } }