:root {
  color-scheme: dark;
  --bg: #111512;
  --paper: #1a201b;
  --ink: #f1f3eb;
  --muted: #b4bdaf;
  --line: #303a30;
  --accent: #ff8b67;
  --lime: #d7e9ac;
  -webkit-font-smoothing: antialiased;
}
body { background: var(--bg); color: var(--ink); }
.sidebar { background: #151a16; }
.brand-icon { background: #f47b55; color: #162016; }
.sidebar-label { color: #a4b19d; font-size: 9px; letter-spacing: 1.1px; }
.nav-item { color: #b4c0ad; font-size: 14px; }
.nav-item.active { color: #eff5e3; background: #293326; }
.nav-item:hover { background: #222b22; }
.nav-count { color: #b2c29e; }
.collection-card { color: #e5ebdf; font-size: 11px; }
.collection-card small { color: #abb8a2; font-size: 9px; }
.collection-card > span:nth-child(2) { padding-right: 36px; }
.collection-card .plus-tag { color: #c8d4b8; border-color: #4b5843; font-size: 8px; }
.world-art { background: #354329; color: #d3e6a8; }
.night-art { background: #343951; color: #d3d5f1; }
.deep-art { background: #4c372d; color: #f6ba94; }
.plus-promo { background: #283522; border: 1px solid #405236; }
.plus-promo .eyebrow { font-size: 8px; color: #c4d3ad; }
.plus-promo h3 { color: #f2f4df; font-size: 19px; }
.plus-promo p { color: #b9c8a4; font-size: 11px; }
.dark-button { background: #d8e8b5; color: #1a2517; font-size: 12px; }
.privacy-link { color: #adbaa2; font-size: 10px; line-height: 1.7; }
.breadcrumb { color: #acb8a3; font-size: 10px; letter-spacing: 1px; }
.breadcrumb b { color: #d6dece; }
.breadcrumb span { color: #6e7e65; }
.demo-badge { color: #b6c6a7; font-size: 9px; letter-spacing: .7px; }
.avatar { color: #dfebd3; background: #293426; border-color: #46513e; }
.eyebrow { font-size: 10px; }
.page-heading .eyebrow { color: #bac8aa; font-size: 9px; letter-spacing: 1.3px; }
.page-heading p { color: #bac4b2; font-size: 13px; line-height: 1.6; }
.tune-button { color: #e1e9da; border-color: #46533d; background: #1d261c; font-size: 12px; }
.tune-button:hover { background: #293526; }
.tune-button span { display: inline; }
.moods { gap: 7px; }
.mood { color: #c3cfb7; border-color: #3e4b35; background: #191f19; font-size: 10px; }
.mood.active { color: #172015; background: #dcebbd; border-color: #dcebbd; font-weight: 650; }
.mood:hover { border-color: #9eb886; }
.cover-glow { background: radial-gradient(ellipse, #a9c1691c, transparent 70%); }
.album-cover { box-shadow: 0 20px 55px -15px #000b; border: 1px solid #ffffff0f; }
.preview-badge { background: #111a12c9; color: #f3f7eb; border-color: #ffffff33; font-size: 9px; letter-spacing: .8px; }
.cover-play-hint { color: #fff; background: #0b150c88; }
.cover-caption { color: #afbea1; font-size: 8px; letter-spacing: 1.5px; }
.track-label { color: #b4c5a1; font-size: 10px; letter-spacing: 1.2px; }
.explicit { color: #e7eddf; background: #3b4833; font-size: 8px; }
.track-heading p { color: #becbb1; font-size: 14px; }
.icon-button { color: #c2cfb6; }
.icon-button:hover { background: #2e3b29; color: #f2f5eb; }
.time-row { color: #bdc9b2; font-size: 10px; }
.time-row > span:nth-child(2) { font-size: 9px; letter-spacing: .1px; }
input[type=range]::-webkit-slider-runnable-track { background: linear-gradient(to right, var(--accent) var(--progress, 0%), #3b4834 var(--progress, 0%)); }
input[type=range]::-moz-range-track { background: #3b4834; }
.play-button { color: #172016; background: #e1eec7; box-shadow: 0 0 28px #cfec8b12; }
.transport-small { color: #d9e6cc; }
.transport-small:disabled { color: #87927e; opacity: .55; }
.reaction { color: #c2ceb7; font-size: 11px; }
.reaction[aria-pressed=true] { color: #ffad88; }
.reaction[aria-pressed=true] svg { fill: #ff8b6733; }
.reaction:hover { color: #f1f4ea; }
.reaction-divider { background: #3b4834; }
.recommendation-reason { color: #b7c5a8; font-size: 10px; line-height: 1.6; text-align: center; }
.recommendation-reason svg { color: #d6e99f; width: 14px; height: 14px; }
.service-panel { background: #1b231c; border-color: #354130; }
.section-kicker { color: #bac8ab; font-size: 8px; letter-spacing: 1px; line-height: 1.7; }
.service-panel h2 { color: #eef3e6; }
.service-panel > p { color: #b7c5a9; font-size: 11px; }
.service-link { background: #202a20; border-color: #394734; color: #e8efdf; font-size: 12px; padding: 10px; }
.service-link:hover { background: #2b3927; border-color: #738b5c; }
.service-link .service-detail { color: #afc49b; font-size: 9px; }
.service-icon.spotify { color: #082b13; }
.service-note { color: #b0c09f !important; font-size: 9px !important; line-height: 1.8 !important; }
.google-divider { background: #38452f; }
.google-button { color: #eaf1e0; font-size: 12px; }
.google-button small { color: #b6c5a8; font-size: 10px; }
.google-button > svg { color: #c3d5af; }
.google-g { background: none; color: #e9f2dd; }
.wave-note { background: #27341e; border-color: #455b31; }
.wave-note:after { color: #3b4d2b; }
.little-wave { color: #d2e6a5; }
.wave-note .eyebrow { color: #c9d8b4; font-size: 7px; letter-spacing: .7px; }
.wave-note h3 { color: #eff4df; }
.wave-note p { color: #becdaa; font-size: 11px; }
.wave-note-bottom { color: #c4d3b0; font-size: 9px; position: relative; z-index: 1; }
.tiny-dots i { background: #b6d18e; }
.daily-meter { color: #c1ceb4; font-size: 10px; }
.meter { background: #34412d; }
.meter > span { background: #bfdc91; }
.daily-meter button { color: #d1e5b1; font-size: 10px; }
.page-footer { color: #b0bea2; font-size: 9px; }
.page-footer > span:nth-child(2) { font-size: 9px; }
.volume-control { color: #c3d2b2; }
.sheet { background: #1b231c; color: #eff4e7; border-color: #47553d; }
.sheet::backdrop { background: #050b08b8; }
.sheet-heading .eyebrow { color: #bfd0ac; font-size: 9px; }
.field-help { color: #b4c4a4; font-size: 11px; }
.range-labels { color: #b4c6a2; font-size: 10px; }
select { color: #edf5e3; border-color: #4a5d3d; background: #242f22; }
.switch-row small { color: #b6c7a6; font-size: 10px; }
.primary-button { color: #15210f; background: #d4e7ac; font-weight: 650; }
.delete-button { color: #ffb99e; font-size: 11px; }
.library-row:hover { background: #2d3a26; }
.library-row strong { color: #edf3e6; font-size: 13px; }
.library-row small { color: #bdcdae; font-size: 11px; }
.library-cover { background: #38492b; }
.empty-state { color: #bcccad; }
.premium-sheet { background: #26351e; }
.premium-symbol { color: #d5eaa9; }
.premium-sheet > p { color: #c6d7b0; }
.premium-sheet .primary-button { color: #18230f; background: #dcecb8; }
.premium-features li:before { color: #d8e9b8; }
.plus-tag { color: #14210e; background: #d9ebad; }
.toast { color: #eff7e6; background: #33462a; border: 1px solid #68854e; }
.error-banner { color: #ffe6d8; background: #432a21; border-color: #8e5440; }
.service-skeleton { background: #293526; }
button:disabled { opacity: .5; }
@media(max-width:1150px) {
  .sidebar-label { font-size: 8px; }
  .collection-card small { font-size: 8px; }
  .reaction { font-size: 10px; }
}
@media(max-width:920px) and (min-width:701px) {
  .nav-item { font-size: 0; }
  .mood { font-size: 9px; }
  .reaction { font-size: 9px; }
}
@media(max-width:700px) {
  .page-heading { flex-wrap: wrap; gap: 15px; }
  .page-heading > div { flex-basis: 100%; }
  .tune-button { width: auto; height: auto; border-radius: 8px; padding: 9px 12px; font-size: 11px; }
  .mobile-nav { background: #151d16f5; border-color: #3c4933; }
  .mobile-nav button { color: #bfceb2; font-size: 10px; }
  .mobile-nav .active { color: #ffad87; }
  .breadcrumb { font-size: 9px; }
  .demo-badge { font-size: 7px; max-width: 105px; line-height: 1.5; text-align: right; }
  .page-heading .eyebrow { font-size: 8px; }
  .page-heading p { font-size: 12px; }
  .mood { font-size: 11px; padding: 10px 12px; }
  .track-label { font-size: 10px; }
  .track-heading p { font-size: 15px; }
  .reaction { font-size: 12px; }
  .reaction-bar { gap: 12px; }
  .taste-actions { gap: 20px; }
  .recommendation-reason { font-size: 11px; }
  .section-kicker { font-size: 9px; }
  .service-link { font-size: 12px; }
  .service-link .service-detail { font-size: 0; }
  .service-note { font-size: 10px !important; }
  .google-button { font-size: 14px; }
  .google-button small { font-size: 11px; }
  .wave-note .eyebrow { font-size: 8px; }
  .wave-note p { font-size: 12px; }
  .wave-note-bottom { font-size: 10px; }
  .daily-meter, .daily-meter button { font-size: 12px; }
  .page-footer { font-size: 10px; }
}