/* BMAXZ site header — started as the copy shared with Music (bmaxz.com) and Streaming; on Creator it follows the
   pop look (light/dark from data-theme), so its colours come from the --bx-* variables below. */
.bx-header {
  --bx-bg: #fffaf2; --bx-panel: #ffffff; --bx-panel-2: #fff1dc; --bx-line: #14051f; --bx-text: #14051f; --bx-muted: #4a3d5c; --bx-pop: 2px 2px 0 #14051f;
  position: sticky; top: 0; z-index: 50; height: 64px; flex: none; background: var(--bx-bg); border-bottom: 2.5px solid var(--bx-line); font-family: var(--font-body, "Noto Sans Thai"), "Noto Sans Thai", sans-serif;
}
:root[data-theme="dark"] .bx-header { --bx-bg: #17112a; --bx-panel: #241b3d; --bx-panel-2: #2e2450; --bx-line: #000; --bx-text: #fff6e8; --bx-muted: #d6cbe8; --bx-pop: 2px 2px 0 #9d4edd; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .bx-header { --bx-bg: #17112a; --bx-panel: #241b3d; --bx-panel-2: #2e2450; --bx-line: #000; --bx-text: #fff6e8; --bx-muted: #d6cbe8; --bx-pop: 2px 2px 0 #9d4edd; } }
.bx-inner { box-sizing: border-box; height: 100%; width: 100%; margin: 0 auto; padding: 0 clamp(14px, 3vw, 48px); display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: "logo links right"; align-items: center; gap: 16px; }
.bx-logo { grid-area: logo; display: inline-flex; align-items: center; justify-self: start; }
.bx-logo img { display: block; height: 36px; width: auto; }
.bx-links { grid-area: links; justify-self: center; display: flex; gap: 32px; }
.bx-links a { color: var(--bx-muted); font-size: 15px; line-height: 1; text-decoration: none; padding: 22px 0 20px; border-bottom: 2px solid transparent; white-space: nowrap; }
.bx-links a:hover { color: var(--bx-text); }
.bx-links a[aria-current="page"] { color: var(--bx-text); border-bottom-color: #ffd60a; }
.bx-right { grid-area: right; justify-self: end; display: flex; align-items: center; gap: 14px; }
.bx-contact { color: var(--bx-text); font-size: 14px; text-decoration: none; white-space: nowrap; }
.bx-contact:hover { color: #ffd60a; }
.bx-header a:focus-visible { outline: 2px solid #9d4edd; outline-offset: 3px; border-radius: 4px; }
/* Mobile: links fold into a ☰ menu at the top right (plain <details>, works without JavaScript). */
.bx-burger { grid-area: burger; display: none; position: relative; }
/* TH | EN language switch */
.bx-lang, .bx-theme { display: inline-flex; border: 2px solid var(--bx-line); border-radius: 999px; padding: 2px; background: var(--bx-panel); box-shadow: var(--bx-pop); }
.bx-lang button, .bx-theme button { font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .04em; line-height: 1; padding: 6px 10px; border: 0; border-radius: 999px; background: transparent; color: var(--bx-muted); cursor: pointer; }
.bx-theme button { font-size: 14px; padding: 4px 9px; }
.bx-lang button:hover, .bx-theme button:hover { color: var(--bx-text); }
.bx-lang button[aria-pressed="true"] { background: #ffd60a; color: #14051f; }
.bx-theme button[aria-pressed="true"] { background: #9d4edd; color: #fff; }
.bx-lang button:focus-visible, .bx-theme button:focus-visible { outline: 2px solid #9d4edd; outline-offset: 2px; }
.bx-burger summary { list-style: none; cursor: pointer; width: 42px; height: 42px; display: grid; place-items: center; border: 2px solid var(--bx-line); border-radius: 12px; color: var(--bx-text); background: var(--bx-panel); box-shadow: var(--bx-pop); }
.bx-burger summary::-webkit-details-marker { display: none; }
.bx-burger summary svg { display: block; }
.bx-burger[open] summary { background: #ffd60a; color: #14051f; }
.bx-panel { position: absolute; right: 0; top: calc(100% + 10px); min-width: 220px; display: flex; flex-direction: column; gap: 2px; padding: 8px; background: var(--bx-panel); border: 2.5px solid var(--bx-line); border-radius: 14px; box-shadow: 4px 4px 0 var(--bx-line); }
.bx-panel a { padding: 12px 14px; border-radius: 10px; color: var(--bx-text); font-size: 15px; text-decoration: none; }
.bx-panel a:hover { background: var(--bx-panel-2); }
.bx-panel a[aria-current="page"] { background: #ffd60a; color: #14051f; }
.bx-panel .bx-panel-contact { margin-top: 4px; border-top: 1.5px solid var(--bx-line); border-radius: 0 0 10px 10px; color: var(--bx-muted); }
@media (max-width: 900px) {
  .bx-inner { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "logo right burger"; padding: 0 14px; gap: 10px; }
  .bx-logo img { height: 30px; }
  .bx-links { display: none; }
  .bx-right { gap: 8px; }
  .bx-theme button { padding: 4px 7px; }
  .bx-burger { display: block; }
}
@media (max-width: 360px) {
  .bx-inner { padding: 0 10px; gap: 8px; }
  .bx-right { gap: 6px; }
  .bx-lang button { padding: 6px 8px; }
}
/* Section links land below the shared sticky bar. */
html { scroll-padding-top: 72px; }

/* Streaming layout under the header: the fixed sidebar starts below it. */
.bx-links, .bx-panel { margin: 0; overflow: visible; }

/* Free distribution promo */
.promo{display:flex;align-items:center;gap:14px 20px;flex-wrap:wrap;margin:28px 42px 0;padding:18px 22px;border-radius:14px;background:#ffd60a;color:#14051f;text-decoration:none;box-shadow:0 10px 30px rgba(255,214,10,.18);transition:transform .15s}
.promo:hover{transform:translateY(-2px)}
.promo strong{font-size:clamp(20px,2.4vw,26px);font-weight:800;line-height:1.2}
.promo span{font-size:15px;font-weight:500}
.promo em{margin-left:auto;font-style:normal;font-weight:700;font-size:14px;background:#14051f;color:#ffd60a;padding:9px 16px;border-radius:999px;white-space:nowrap}
@media(max-width:1000px){.promo{margin:22px 25px 0}}
@media(max-width:650px){.promo{margin:18px 18px 0;padding:16px}.promo em{margin-left:0}}

/* Artist cover + preview */
.artist-art{position:relative;width:62px;height:62px;flex-shrink:0}
.artist-art img{width:62px;height:62px;border-radius:14px;object-fit:cover;display:block;background:#2d044c}
.artist-art .preview{position:absolute;right:-6px;bottom:-6px;width:28px;height:28px;padding:0;border-radius:50%;border:0;background:#ffd60a;color:#14051f;font-size:11px;font-weight:700;display:grid;place-items:center;box-shadow:0 4px 12px rgba(0,0,0,.4)}
.artist-art .preview:hover,.artist-art .preview.on{background:#fff}

.metrics{grid-template-columns:repeat(3,1fr)}
@media(max-width:1000px){.metrics{grid-template-columns:repeat(3,1fr)}}
@media(max-width:650px){.metrics{grid-template-columns:1fr}}

/* Full-width layout: the sidebar is gone; navigation is a row of sampler pads at the top (same palette as the Creator pedals). */
main { margin-left: 0 !important; }
main > header { display: none; }
.pads { display: flex; justify-content: center; padding: 28px 18px 0; }
.pads-panel { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 16px 22px 20px; border-radius: 22px; background: linear-gradient(180deg, #1d0730, #120320); border: 1px solid #39234f; box-shadow: 0 18px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06); }
.pads-label { font-size: 10px; letter-spacing: .24em; color: #a492bc; }
.pads-label b { color: #ffd60a; font-weight: 700; }
.pads-row { display: flex; gap: 16px; }
.pads .pad { position: relative; width: 132px; height: 112px; padding: 14px 12px 12px; border: 0; border-radius: 14px; cursor: pointer; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 2px; text-align: left; color: #14051f;
  background: radial-gradient(120% 90% at 30% 20%, rgba(255,255,255,.28), transparent 55%), var(--pad);
  box-shadow: 0 6px 0 rgba(0,0,0,.45), inset 0 -5px 0 rgba(0,0,0,.2); transition: transform .1s ease, box-shadow .1s ease, filter .15s; filter: saturate(.55) brightness(.75); }
.pads .pad:hover { filter: saturate(.85) brightness(.95); transform: translateY(-2px); }
.pads .pad:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(0,0,0,.45), inset 0 -3px 0 rgba(0,0,0,.2); }
.pads .pad.selected { filter: none; box-shadow: 0 6px 0 rgba(0,0,0,.45), inset 0 -5px 0 rgba(0,0,0,.2), 0 0 0 3px #0a0312, 0 0 0 5px var(--pad), 0 0 28px 4px color-mix(in srgb, var(--pad) 55%, transparent); }
.pad-led { position: absolute; top: 12px; right: 12px; width: 10px; height: 10px; border-radius: 50%; background: #3a0d0d; border: 2px solid rgba(0,0,0,.35); }
.pads .pad.selected .pad-led, .pads .pad:hover .pad-led { background: #ff3b3b; box-shadow: 0 0 6px 2px rgba(255,59,59,.85); }
.pad-code { font-size: 10px; font-weight: 700; letter-spacing: .16em; opacity: .75; }
.pad-name { font-size: 18px; font-weight: 700; line-height: 1.2; }
.pads .pad[style*="#7b2cbf"] { color: #f5f0ff; }
.pads .pad:focus-visible { outline: 2px solid #ffd60a; outline-offset: 4px; }
@media (max-width: 650px) {
  .pads { padding-top: 18px; }
  .pads-panel { padding: 12px 12px 14px; width: 100%; }
  .pads-row { gap: 10px; width: 100%; }
  .pads .pad { flex: 1; width: auto; height: 88px; padding: 10px; }
  .pad-name { font-size: 15px; }
  .pad-code { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) { .pads .pad { transition: none; } }

/* English: the pad name already says it, so the small code above it is hidden. */
html[lang="en"] .pad-code { visibility: hidden; }