/* The approved blue theme. Keep artwork and print QR contrast independent of the UI. */
html { background: var(--panel-deep); }
body {
  background: radial-gradient(ellipse at 75% 8%, #06417e80, transparent 52%), linear-gradient(115deg, #03182f, var(--bg) 45%, #042451);
  background-attachment: fixed;
  color: var(--ink);
}
::selection { background: var(--brand-blue); color: white; }
:where(button, a, input, select, textarea, summary):focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
/* Official, unmodified PNG. Resize proportionally; never filter or crop it. */
.logo { display: block; width: 166px; max-width: 100%; line-height: 0; }
.logo img { display: block; width: 100%; height: auto; max-width: 100%; }
.mobile-brand .logo { width: 116px; }
.sidebar { background: linear-gradient(180deg, #00132b, #001a38); border-right-color: var(--line); }
.brand-caption, .eyebrow, .pilot, .art-caption { color: var(--muted); }
.pilot b { background: var(--accent); }
nav a { color: var(--ink); }
nav a.active { background: var(--brand-blue); color: white; box-shadow: 0 5px 20px #0064ff26; }
nav a:hover { background: var(--panel-raised); color: white; }
nav a.active:hover { background: var(--brand-blue-hover); }
.account { border-color: var(--line); background: #08295170; color: var(--ink); }
.account:hover { border-color: var(--accent); }
.hero:before { background: radial-gradient(ellipse, #0075ff35, transparent 68%); }
h1 em { color: #36aaff; }
.hero p, .album-meta, .form label, footer, .now-info span, .timeline span,
.track .number, .tabs button, .drag-track, .section-heading p { color: var(--muted); }
.step, .section-heading > span, .sidebar-playlists h2 { color: var(--accent); }
.primary, #card-takeover, .card-register summary, .skip-link {
  background: var(--brand-blue); color: white; border-color: var(--brand-blue);
  box-shadow: 0 4px 16px #0064ff22;
}
.primary:hover, #card-takeover:hover, .card-register summary:hover { background: var(--brand-blue-hover); color: white; }
.secondary, [data-play-ref].text-link {
  background: linear-gradient(135deg, #073461, #032044); border-color: #3599db; color: var(--ink);
  box-shadow: 0 3px 10px #0002;
}
.secondary:hover, [data-play-ref].text-link:hover { background: #0b4176; border-color: var(--focus); }
.text-link, .link, .credits-grid dt { color: var(--accent); }
.badge { color: var(--accent); border-color: var(--line); background: #0064ff10; }
.note, .empty, .list-panel, .publisher-banner { border-color: var(--line); }
.note { color: var(--muted); background: #07264d66; }
.list-panel { background: #05234980; }
.publisher-banner { background: radial-gradient(ellipse at right, #086adc2e, transparent 70%), #05234966; }
.tabs button { border-color: var(--line); }
input, textarea, select { background: var(--field-bg); border-color: var(--field-border); color: var(--field-ink); accent-color: var(--brand-blue); color-scheme: light; }
input::placeholder, textarea::placeholder { color: var(--field-placeholder); opacity: 1; }
input[type=search], #music-search { background: var(--field-search); color: var(--field-ink); }
.music-search, label[for=music-search] { color: white; }
input:focus, textarea:focus, select:focus { border-color: var(--accent); }
input:-webkit-autofill { -webkit-text-fill-color: var(--field-ink); -webkit-box-shadow: 0 0 0 1000px var(--field-bg) inset; caret-color: var(--field-ink); }
.disc { background: repeating-radial-gradient(circle, #031326 0 2px, #193b5c 3px, #061b31 4px); }
.disc:before { background: #1256a3; }
.disc:after { background: var(--panel-deep); }
.cover { background-color: var(--panel); }
.placeholder-cover { background: linear-gradient(135deg, #124c89, var(--panel-deep)); }
.showcase-cover { border: 1px solid #3776ac; box-shadow: 0 7px 24px #0004; }
.cover-play { background: var(--brand-blue); color: white; border-color: #71b8ff; }
.track:hover { background: #2179cc12; }
.track button { color: var(--ink); }
.track button[data-play-ref], .track button[data-play-queue] { color: var(--accent); }
.sidebar-list { background: linear-gradient(120deg, #063264, #04234b); color: var(--ink); }
.sidebar-list.drop-ready { background: #0053c4; color: white; border-color: var(--focus); }
.dragging-track .sidebar-list { border-color: var(--accent); }
#listening-room { border-color: var(--line); background: radial-gradient(ellipse at 12% 0%, #0064ff26, transparent 65%), #05234a; }
.listening-art img { border-color: #00132b; }
.listening-info [data-now-toggle], .listening-info [data-queue-jump] {
  background: var(--brand-blue); color: white; border-color: #3599ff; box-shadow: 0 4px 20px #0064ff25;
}
.listening-info [data-now-toggle]:hover, .listening-info [data-queue-jump]:hover { background: var(--brand-blue-hover); }
.sound-waves i { background: linear-gradient(var(--accent), #0074ff); }
.track-actions [data-queue-add] { background: linear-gradient(135deg, #07569a, #073561); border-color: #329edf; }
.track-actions [data-playlist-add], #player-list-actions [data-playlist-add] { background: linear-gradient(135deg, #073b70, #02254b); border-color: #328bc8; }
.track-actions [data-credits] { border-color: var(--line); }
#track-search-results { background: var(--panel); }
.player {
  background: linear-gradient(105deg, #001932fa, #052957fa, #001b3ffa);
  border-top-color: #237ac1; box-shadow: 0 -8px 30px #00132940;
}
.now-cover { background: var(--panel); color: var(--accent); }
.controls button { background: linear-gradient(140deg, #09325e, #001a39); color: white; border-color: #2873ad; }
.controls .play-toggle {
  background: var(--brand-green); border-color: var(--brand-green); color: #001b35;
  box-shadow: 0 0 22px #00f58a20;
}
.controls .play-toggle:hover { background: var(--brand-green-hover); filter: none; }
.timeline input { accent-color: #168aff; background: transparent; }
.timeline input::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: #1d4f8e; }
.timeline input::-webkit-slider-thumb { margin-top: -5px; }
.timeline input::-moz-range-track { height: 4px; border-radius: 4px; background: #1d4f8e; }
.timeline input::-moz-range-progress { background: #168aff; }
.queue-button { color: var(--ink); }
.story-controls button { background: #03274d; border-color: #337eae; color: var(--ink); }
.story-switch { background: #426282; }
.story-switch:after { background: white; }
.story-controls [aria-checked=true] { border-color: #26baff; background: #063c73; }
.story-controls [aria-checked=true] .story-switch { background: #008cff; }
.story-controls #intro-skip { border-color: #337eae; }
dialog { background: #05254c; border-color: #2b7ab9; color: var(--ink); }
dialog::backdrop { background: #000d24b3; }
#toast { background: #0961c9; color: white; border: 1px solid #4bbfff; }
.sim-grid button { background: var(--panel); border-color: var(--line); color: var(--ink); }
.tiny-card { background: radial-gradient(ellipse at 100% 0%, #168aff40, transparent 65%), linear-gradient(135deg, #0a376b, #00142f); border-color: #399bdb80; }
.tiny-card:before { background: repeating-radial-gradient(ellipse at 95% 70%, transparent 0 10px, #26baff20 11px, transparent 12px 21px); }
.card-rule { background: var(--accent); }
.card-caption, .card-detail { color: var(--muted); }
/* Card opening, optional registration and ownership controls. */
.card-gateway { background: linear-gradient(135deg, #073568, #031d3f); border-color: #2c75ad; }
.card-gateway input, .card-register input, .card-transfer-result textarea { background: var(--field-bg); color: var(--field-ink); border-color: var(--field-border); }
.card-unlocked { border-color: var(--line); }
#card-status, .owned-card summary { color: var(--accent); }
.card-join { background: linear-gradient(110deg, #083361, #032146); border-color: #286ca6; color: var(--ink); }
.card-join strong { color: var(--accent); }
.card-join .muted { color: var(--muted); }
/* Account and commerce UI, including password and form feedback. */
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea { background: var(--field-bg); color: var(--field-ink); border-color: var(--field-border); }
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit,
.woocommerce button.button.alt, .woocommerce a.button.alt { background: var(--brand-blue); color: white; }
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce button.button.alt:hover, .woocommerce a.button.alt:hover { background: var(--brand-blue-hover); color: white; }
.woocommerce-info, .woocommerce-message, .woocommerce-error { background: var(--panel); color: var(--ink); border-top-color: var(--accent); }
.woocommerce-info::before, .woocommerce-message::before { color: var(--accent); }
.woocommerce-error, .woocommerce-error::before { border-top-color: var(--danger); color: var(--danger); }
.woocommerce #payment div.payment_box { background: var(--panel-raised); color: var(--ink); }
.woocommerce #payment div.payment_box:before { border-bottom-color: var(--panel-raised); }
.woocommerce table.shop_table, .woocommerce table.shop_table td { border-color: var(--line); }
@media (forced-colors: active) {
  .controls .play-toggle { border: 2px solid ButtonText; }
}