:root { --ink: #11121b; --paper: #f4f1e8; --panel: #fffdf7; --acid: #d7ff4f; --signal: #f04b39; --muted: #64646d; --line: #d5d1c5; --wa-color-brand-500: #b8e83b; --wa-color-brand-600: #9bce19; --wa-font-family-body: 'Courier New', monospace; --wa-font-family-heading: Georgia, 'Times New Roman', serif; }
* { box-sizing: border-box; } body { background: var(--paper); color: var(--ink); margin: 0; }.app-header { align-items: center; background: var(--panel); border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; padding: 1rem clamp(1.25rem, 5vw, 5rem); }.brand { color: var(--ink); font-family: var(--wa-font-family-heading); font-size: 1.4rem; font-weight: 700; text-decoration: none; }.brand span { color: var(--signal); }.queue-count { color: var(--muted); font-size: .8rem; font-weight: 700; text-transform: uppercase; } wa-button[variant="brand"]::part(base) { color: var(--ink); }
.app-shell { margin: 0 auto; max-width: 90rem; padding: clamp(2rem, 5vw, 5rem); }.kicker { font-size: .72rem; font-weight: 700; letter-spacing: .08em; margin: 0 0 .75rem; text-transform: uppercase; }.dashboard-header { align-items: stretch; display: grid; gap: 2rem; grid-template-columns: 1fr minmax(17rem, .65fr); margin-bottom: clamp(3rem, 6vw, 5rem); }.dashboard-header h1 { font-family: var(--wa-font-family-heading); font-size: clamp(3.5rem, 8vw, 7rem); line-height: .85; margin: 0; max-width: 8ch; }.dashboard-header > div > p:last-child { color: var(--muted); line-height: 1.6; max-width: 32rem; }.now-playing::part(base), .release-card::part(base) { background: var(--panel); border-color: var(--line); height: 100%; }.now-playing h2 { font-family: var(--wa-font-family-heading); font-size: 2rem; margin: 0; }.now-playing p:not(.kicker) { color: var(--muted); }.now-playing p span { float: right; }
.workspace { display: grid; gap: clamp(2rem, 5vw, 5rem); grid-template-columns: minmax(0, 1fr) minmax(17rem, .34fr); }.catalog-header { align-items: end; display: flex; gap: 1.5rem; justify-content: space-between; margin-bottom: 1.5rem; }.catalog-header h2, .queue-heading h2 { font-family: var(--wa-font-family-heading); font-size: 2.5rem; line-height: .95; margin: 0; }.filters { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: end; }.release-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }.release-card::part(media) { aspect-ratio: 1.2; }.release-card img[slot="media"] { height: 100%; object-fit: cover; width: 100%; }.release-top { align-items: center; display: flex; font-size: .8rem; justify-content: space-between; }.release-card h3 { font-family: var(--wa-font-family-heading); font-size: 1.7rem; margin: 1rem 0 .2rem; }.release-card p { color: var(--muted); margin: 0 0 1rem; }.card-actions { display: flex; justify-content: space-between; }
.queue-panel { align-self: start; background: var(--ink); color: var(--paper); padding: 1.5rem; position: sticky; top: 1rem; }.queue-heading { align-items: start; display: flex; gap: 1rem; justify-content: space-between; }.queue-heading h2 { font-size: 1.7rem; }.queue-summary, .queue-note { color: #bbbcc7; line-height: 1.6; }.queue-summary { min-height: 5rem; }.queue-panel wa-progress-bar { --track-color: #363740; --indicator-color: var(--acid); }.queue-note { display: block; margin-top: .75rem; }
@media (max-width: 760px) { .app-shell { padding: 1.25rem; }.dashboard-header, .workspace, .release-grid { grid-template-columns: 1fr; }.catalog-header { align-items: start; flex-direction: column; }.filters { justify-content: start; }.queue-panel { position: static; } }