/* BMAXZ pop look (shared with Creator and PR NEWS): black outlines, flat bright colours, hard shadows, confetti dots.
   Light or dark from data-theme on <html> (theme.js). Loaded after style.css and header.css so it restyles them. */
:root {
  --ink: #14051f; --muted: #4a3d5c; --green: #5c0899; --line: #14051f; --paper: #fffaf2;
  --surface: #ffffff; --surface-2: #fff1dc; --soft: #f3e6ff;
  --pop-sm: 2px 2px 0 #14051f; --pop: 4px 4px 0 #14051f; --pop-lg: 7px 7px 0 #14051f;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --ink: #fff6e8; --muted: #d6cbe8; --green: #ffd60a; --line: #000; --paper: #17112a;
  --surface: #241b3d; --surface-2: #2e2450; --soft: #3a2563;
  --pop-sm: 2px 2px 0 #9d4edd; --pop: 4px 4px 0 #9d4edd; --pop-lg: 7px 7px 0 #ff5fa2;
  color-scheme: dark;
}
body {
  background-color: var(--paper); color: var(--ink);
  background-image: none;
  background-size: 190px 170px, 230px 210px, 260px 240px, 150px 130px;
  background-position: 20px 30px, 120px 90px, 60px 160px, 170px 10px;
  background-attachment: fixed;
}
a { color: var(--green); }
p, .muted, td small, .work-by, .release small, .metric small { color: var(--muted); }
h1 { font-weight: 800; }

/* Buttons and fields */
button { border: 2px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 999px; box-shadow: var(--pop-sm); font-weight: 600; transition: transform .12s, box-shadow .12s; }
button:hover { border-color: var(--line); transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--line); }
:root[data-theme="dark"] button:hover { box-shadow: 3px 3px 0 #9d4edd; }
button:active { transform: translate(2px, 2px); box-shadow: none; }
.textbutton, .work-by { border: 0; box-shadow: none; border-radius: 0; background: transparent; }
.textbutton:hover, .work-by:hover { transform: none; box-shadow: none; }
.textbutton { color: var(--green); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.primary, .hero button { background: #ffd60a; color: #14051f; border-color: var(--line); }
input, select, textarea { border: 2px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 12px; }
input:focus, select:focus, textarea:focus { outline: none; box-shadow: 3px 3px 0 #ffd60a; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid #9d4edd; }

/* Cards, hero, notices */
.card, .date { background: var(--surface); border: 2.5px solid var(--line); border-radius: 18px; box-shadow: var(--pop); }
.metric strong { color: var(--green); font-weight: 800; }
.hero { background: #9d4edd; color: #fff; border: 3px solid #14051f; border-radius: 22px; box-shadow: var(--pop-lg); }
.hero h2 { color: #fff; -webkit-text-stroke: 1px #14051f; }
.hero p { color: #f3e6ff; }
.hero .eyebrow, .hero .wave { color: #ffd60a; }
.eyebrow { display: inline-block; background: #14051f; color: #ffd60a; padding: 4px 10px 3px; border-radius: 7px; transform: rotate(-1.5deg); letter-spacing: .08em; }
:root[data-theme="dark"] .eyebrow { background: #ffd60a; color: #14051f; }
.notice { background: #fff4c2; color: #14051f; border: 2px solid var(--line); box-shadow: var(--pop-sm); border-radius: 14px; }
.pill { border: 1.5px solid var(--line); background: var(--soft); color: var(--ink); border-radius: 999px; }
.pill.warn { background: #ffd60a; color: #14051f; }
.pill.stale, .pill.unknown { background: var(--surface-2); color: var(--muted); }
.bar { background: var(--surface); border: 2px solid var(--line); height: 12px; }
.bar span { background: #9d4edd; }
.release { border-top: 1.5px solid var(--line); }
.cover { border: 2px solid var(--line); background: #9d4edd; }
.release:nth-child(3n) .cover { background: #ff6b4a; }
table { border: 2.5px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface); }
th { background: var(--surface-2); color: var(--ink); font-weight: 700; border-bottom: 2px solid var(--line); }
td { border-bottom: 1.5px solid var(--line); }
dialog { background: var(--surface); color: var(--ink); border: 3px solid var(--line); box-shadow: var(--pop-lg); }
dialog::backdrop { background: rgba(20, 5, 31, .55); }
#toast { background: #ffd60a; color: #14051f; border: 2.5px solid #14051f; box-shadow: var(--pop); }
footer { color: var(--muted); }

/* Artists and songs */
.artist-avatar { background: #9d4edd; color: #fff; border: 2.5px solid var(--line); box-shadow: var(--pop-sm); }
.social-mini a { background: var(--surface); border: 1.5px solid var(--line); border-radius: 999px; color: var(--ink); }
.social-buttons a, .social-buttons span { border: 2.5px solid var(--line); box-shadow: var(--pop-sm); background: var(--surface); }
.social-buttons span { color: var(--muted); }
.work-art { border: 2.5px solid var(--line); border-radius: 12px; background: #9d4edd; box-shadow: var(--pop); }
.work:nth-child(4n+2) .work-art { background: #ff6b4a; }
.work:nth-child(4n+3) .work-art { background: #2ec4a6; }
.work:nth-child(4n+4) .work-art { background: #3a6df0; }
.work-art:hover { transform: translate(-2px, -3px) rotate(-1deg); box-shadow: var(--pop-lg); }
.work-initials { color: #fff; -webkit-text-stroke: 2px #14051f; paint-order: stroke fill; text-shadow: 2px 2px 0 #14051f; }
.work-art .preview, .artist-art .preview { background: #ffd60a; color: #14051f; border: 2px solid #14051f; box-shadow: 2px 2px 0 #14051f; }
.work-title { color: var(--ink); font-weight: 700; }
button.work-by:hover { color: var(--green); }
.artist-art img { border: 2px solid var(--line); background: #9d4edd; }

/* Free distribution promo */
.promo { border: 3px solid #14051f; box-shadow: var(--pop-lg); }
.promo em { border: 2px solid #14051f; }

/* Sampler pads: flat colours with black outlines */
.pads-panel { background: var(--surface); border: 3px solid var(--line); box-shadow: var(--pop-lg); }
.pads-label { color: var(--muted); font-weight: 700; }
.pads-label b { color: var(--green); }
.pads .pad { background: var(--pad); border: 3px solid #14051f; box-shadow: 4px 4px 0 #14051f; filter: saturate(.6) brightness(.92); }
.pads .pad:hover { filter: none; transform: translate(-2px, -2px); box-shadow: 6px 6px 0 #14051f; }
.pads .pad:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 #14051f; }
.pads .pad.selected { filter: none; transform: rotate(-1.5deg); box-shadow: 6px 6px 0 #14051f; }
.pad-led { border: 2px solid #14051f; }
.pad-name { color: #fff; -webkit-text-stroke: 1.5px #14051f; paint-order: stroke fill; text-shadow: 2px 2px 0 #14051f; }
.pad-code { color: #14051f; opacity: 1; }
.pads .pad[style*="#7b2cbf"] .pad-code { color: #fff; }

@media (prefers-reduced-motion: reduce) {
  button, .work-art, .pads .pad { transition: none; }
}

/* The header's own small switches keep the header styles. */
.bx-header button, .bx-header button:hover, .bx-header button:active { border: 0; box-shadow: none; transform: none; border-radius: 999px; }