/* =====================================================================
   THE BAKERY · analog hardware finish (Raz, 2026-10-13)
   "the analog listening experience": the EQ, the menus and the
   Profile / Community windows wear the BKRY-MS black finish.
   Tokens are lifted from the BKRY-MS face (canvas: Device.dc.html):
   charcoal body with a fine dot grain, black end cheeks, dark caps with
   a hard drop, small LEDs (off #3a2c28, on = accent glow), a black
   screen with a green phosphor line, blue caps, red record cap.
   Loaded LAST on index.html, profile.html and community.html.
   ===================================================================== */
:root {
  --bk-grain: radial-gradient(rgba(255,255,255,.035) 1px, transparent 1.3px) 0 0 / 5px 5px;
  --bk-body: radial-gradient(130% 100% at 25% 0%, #2b2b2a 0%, #1b1b1a 50%, #121211 100%);
  --bk-cheek: linear-gradient(90deg, #0c0c0b 0%, #1f1f1e 50%, #0c0c0b 100%);
  --bk-ring: #2c2c2a;
  --bk-ink: #bdbab3;
  --bk-ink-hi: #ece8df;
  --bk-ink-lo: #8a877f;
  --bk-cheek-ink: #e9d6bd;
  --bk-glow: #86c79b;
  --bk-led-off: radial-gradient(circle at 40% 35%, #4a3833, #2a1f1c 75%);
  --bk-led-on: radial-gradient(circle at 40% 35%, #e9fff0, #86c79b 50%, #3f8a5c 100%);
  --bk-led-amber: radial-gradient(circle at 40% 35%, #fff2c8, #e0b84a 55%, #9a7420 100%);
  --bk-screen: #060807;
  --bk-cap: linear-gradient(180deg, #4b4b48 0%, #393937 48%, #2a2a28 100%);
  --bk-cap-hover: linear-gradient(180deg, #555552 0%, #424240 48%, #313130 100%);
  --bk-blue: linear-gradient(180deg, #7aa3ff 0%, #4579ee 46%, #1e4fd1 100%);
  --bk-green: linear-gradient(180deg, #4a9a68 0%, #2e6b45 52%, #23563a 100%);
  --bk-red: radial-gradient(circle at 40% 35%, #f0625a, #c9322a 70%, #9e2620);
  --bk-screw: radial-gradient(circle at 40% 35%, #cfcfcf 0 1px, #8d8d8d 2px, #4d4d4d 3.4px, #121212 4px, transparent 4.6px);
  --bk-mono: ui-monospace, "SF Mono", "Geist Mono", Menlo, Consolas, monospace;
}

/* ---------- shared pieces ---------- */
/* a dark key: rectangular cap with a hard drop */
.bk-key, .popup-bottom-close, .profile-logout-btn, .cm-tab {
  background: var(--bk-cap) !important; color: var(--bk-ink-hi) !important;
  border: 1px solid #000 !important; border-radius: 6px !important;
  box-shadow: 0 3px 0 #0a0a09, 0 4px 7px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.12) !important;
  font-weight: 800 !important; letter-spacing: 1.2px; text-transform: uppercase;
  transition: transform .05s, box-shadow .05s, background .12s; -webkit-tap-highlight-color: transparent;
}
.bk-key:hover, .popup-bottom-close:hover, .profile-logout-btn:hover, .cm-tab:hover { background: var(--bk-cap-hover) !important; }
.bk-key:active, .popup-bottom-close:active, .profile-logout-btn:active, .cm-tab:active {
  transform: translateY(2px); box-shadow: 0 1px 0 #0a0a09, 0 1px 2px rgba(0,0,0,.5), inset 0 1px 3px rgba(0,0,0,.4) !important; }
/* the green action key (sign in, save) */
.btn-accent {
  background: var(--bk-green) !important; color: #fff !important; border: 1px solid #0f2a1a !important; border-radius: 6px !important;
  box-shadow: 0 3px 0 #133322, 0 4px 7px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.22) !important;
  letter-spacing: .3px; max-width: 100%; box-sizing: border-box; white-space: normal; transition: transform .05s, box-shadow .05s;
}
.btn-accent:active { transform: translateY(2px); box-shadow: 0 1px 0 #133322, 0 1px 2px rgba(0,0,0,.5), inset 0 1px 3px rgba(0,0,0,.35) !important; }

/* ---------- the menus: a charcoal plate between two black cheeks ---------- */
.options-menu, .profile-menu, .eq-band-menu {
  background: var(--bk-grain) padding-box, var(--bk-body) padding-box, var(--bk-cheek) border-box !important;
  border: 1px solid #000 !important; border-left-width: 7px !important; border-right-width: 7px !important;
  border-radius: 10px !important; color: var(--bk-ink-hi);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px var(--bk-ring), 0 16px 38px rgba(0,0,0,.72), 0 4px 10px rgba(0,0,0,.55) !important;
}
.options-menu { padding: 5px !important; gap: 0 !important; }
.profile-menu { padding: 5px 0 !important; }
/* rows: an LED, an engraved label, a value in a little screen */
.options-menu .opt-menu-item, .profile-menu button {
  position: relative; align-items: center; gap: 10px;
  padding: 10px 12px 10px 28px !important; border-radius: 4px !important; background: transparent !important;
  color: var(--bk-ink-hi) !important; font-size: 11px !important; font-weight: 800 !important; letter-spacing: 1.4px; text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), inset 0 -1px 0 rgba(0,0,0,.45);
}
.options-menu .opt-menu-item:first-child, .profile-menu button:first-child { box-shadow: inset 0 -1px 0 rgba(0,0,0,.45); }
.options-menu .opt-menu-item:last-child, .profile-menu button:last-of-type { box-shadow: inset 0 1px 0 rgba(255,255,255,.035); }
.options-menu .opt-menu-item:hover:not(:disabled), .profile-menu button:hover { background: rgba(255,255,255,.055) !important; }
.options-menu .opt-menu-item:active:not(:disabled), .profile-menu button:active { background: rgba(0,0,0,.25) !important; }
.options-menu .opt-menu-item::before, .profile-menu button::before {
  content: ""; position: absolute; left: 11px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%;
  background: var(--bk-led-off); box-shadow: inset 0 1px 1px rgba(0,0,0,.7), 0 0 0 1px rgba(0,0,0,.5);
}
.options-menu .opt-menu-item:hover:not(:disabled)::before, .profile-menu button:hover::before { box-shadow: inset 0 1px 1px rgba(0,0,0,.7), 0 0 0 1px rgba(0,0,0,.5), 0 0 5px rgba(134,199,155,.35); }
.options-menu .opt-menu-item:has(.active)::before { background: var(--bk-led-on); box-shadow: 0 0 6px 1px rgba(134,199,155,.75), 0 0 0 1px rgba(0,0,0,.4); }
.options-menu .opt-menu-item:disabled { opacity: .5; }
/* values sit in a small screen */
.options-menu .opt-dim-status, .options-menu .opt-badge, .profile-menu .pm-count {
  margin-left: auto; padding: 3px 7px !important; border-radius: 3px !important; background: var(--bk-screen) !important;
  box-shadow: inset 0 0 0 1px #000, 0 0 0 1px #33332f !important; font: 700 10.5px/1 var(--bk-mono) !important;
  letter-spacing: .4px !important; text-transform: uppercase; color: var(--bk-glow) !important;
}
.options-menu .opt-badge { color: #e0b84a !important; }
.options-menu .opt-dim-status.active { color: #c9f5d6 !important; text-shadow: 0 0 6px rgba(134,199,155,.8); }
.options-menu .opt-eq-status { display: none !important; } /* the row LED shows EQ on/off now */
/* Join THE BAKERY: amber LED, amber label */
.profile-menu #profile-menu-join { color: #e9c768 !important; }
.profile-menu #profile-menu-join::before { background: var(--bk-led-amber); box-shadow: 0 0 6px 1px rgba(224,184,74,.6), 0 0 0 1px rgba(0,0,0,.4); }
/* the 3-dot and caret triggers read as small hardware too */
.player-bar .options-btn[aria-expanded="true"], .options-wrap.open .options-btn { color: var(--bk-glow) !important; }

/* ---------- EQ: the BKRY-EQ in black finish ---------- */
#eq-panel {
  --eq-curve: #86c79b;
  --eq-grid: rgba(120,170,135,.13);
  color: var(--bk-ink-hi);
  background:
    var(--bk-screw) 8px 8px / 10px 10px no-repeat padding-box,
    var(--bk-screw) calc(100% - 8px) 8px / 10px 10px no-repeat padding-box,
    var(--bk-screw) 8px calc(100% - 8px) / 10px 10px no-repeat padding-box,
    var(--bk-screw) calc(100% - 8px) calc(100% - 8px) / 10px 10px no-repeat padding-box,
    var(--bk-grain) padding-box,
    var(--bk-body) padding-box,
    linear-gradient(90deg, #0c0c0b 0%, #1f1f1e 50%, #0c0c0b 100%) left top / 12px 100% no-repeat border-box,
    linear-gradient(90deg, #0c0c0b 0%, #1f1f1e 50%, #0c0c0b 100%) right top / 12px 100% no-repeat border-box,
    linear-gradient(180deg, #121211 0%, #0b0b0a 100%) border-box !important;
  box-shadow: 0 24px 54px rgba(0,0,0,.8), 0 6px 14px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px var(--bk-ring), 0 0 0 1px #000 !important;
}
#eq-panel .eq-panel-title { color: var(--bk-ink-hi); }
/* header: tabs as a two-key switch, presets as a recessed screen */
#eq-panel .eq-panel-header-tabs { background: #0b0b0a !important; box-shadow: inset 0 1px 3px rgba(0,0,0,.8), 0 0 0 1px var(--bk-ring); border-radius: 8px; padding: 3px; gap: 3px; }
#eq-panel .eq-tab-btn { color: var(--bk-ink) !important; font-weight: 800; letter-spacing: .6px; border-radius: 5px; }
#eq-panel .eq-tab-btn.active { background: var(--bk-cap) !important; color: var(--bk-ink-hi) !important; box-shadow: 0 2px 0 #050505, inset 0 1px 0 rgba(255,255,255,.12), 0 0 0 1px #000; }
#eq-panel .eq-preset-select { background: var(--bk-screen) !important; color: var(--bk-glow) !important; border: 1px solid #000 !important;
  box-shadow: 0 0 0 1px #33332f, inset 0 0 10px rgba(0,0,0,.8); font-family: var(--bk-mono); font-weight: 700; }
#eq-panel .eq-preset-btn { background: var(--bk-cap) !important; color: var(--bk-ink-hi) !important; border: 1px solid #000 !important;
  box-shadow: 0 3px 0 #0a0a09, 0 4px 6px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.12) !important; font-weight: 800; letter-spacing: .4px; }
#eq-panel .eq-preset-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #0a0a09, inset 0 1px 3px rgba(0,0,0,.4) !important; }
#eq-panel .eq-preset-label { color: var(--bk-ink); }
#eq-panel .eq-presets-bar { border-color: rgba(0,0,0,.55) !important; box-shadow: 0 1px 0 rgba(255,255,255,.04); }
/* the curve window is the device's black screen */
#eq-panel .eq-curve-container { background: var(--bk-screen) !important; border: 0 !important; border-radius: 8px;
  box-shadow: inset 0 0 0 2px #000, 0 0 0 1px #33332f, inset 0 0 24px rgba(0,0,0,.85) !important; }
#eq-panel .eq-curve-labels { color: #6f7d73 !important; font-family: var(--bk-mono); }
/* the case: same charcoal body as the device, set off by a groove instead of a grey plate */
#eq-panel .eq-case { color: var(--bk-ink-hi);
  background: var(--bk-grain), radial-gradient(130% 100% at 25% 0%, #262625 0%, #191918 55%, #111110 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), inset 0 0 0 1px var(--bk-ring), 0 0 0 1px #000, 0 3px 0 rgba(0,0,0,.6) !important; }
#eq-panel .eq-case .eq-face { background: var(--bk-grain), var(--bk-body) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 0 0 1px #000 !important; }
#eq-panel.eq-open .eq-case .eq-face { box-shadow: inset 0 1px 0 rgba(255,255,255,.07), -10px 0 18px rgba(0,0,0,.6) !important; }
#eq-panel .eq-case-strip { border-bottom: 1px solid rgba(0,0,0,.6) !important; box-shadow: 0 1px 0 rgba(255,255,255,.05) !important; }
#eq-panel .eq-case-badge { color: var(--bk-cheek-ink) !important; letter-spacing: 1.2px; }
#eq-panel .eq-case-badge::after { color: #e5483f !important; }
/* buttons: dark caps, green LEDs (the device lights its keys green), blue Reset */
#eq-panel .eq-case .eq-hw-btn { background: var(--bk-cap) !important; color: var(--bk-ink-hi) !important; border: 1px solid #000 !important;
  box-shadow: 0 3px 0 #0a0a09, 0 4px 7px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.12) !important; }
#eq-panel .eq-case .eq-hw-btn:hover { background: var(--bk-cap-hover) !important; }
#eq-panel .eq-case .eq-hw-btn:active { box-shadow: 0 1px 0 #0a0a09, 0 1px 2px rgba(0,0,0,.5), inset 0 1px 3px rgba(0,0,0,.4) !important; }
#eq-panel .eq-case .eq-hw-btn--led::before { background: var(--bk-led-off) !important; box-shadow: inset 0 1px 1px rgba(0,0,0,.7), 0 0 0 1px rgba(0,0,0,.5) !important; }
#eq-panel .eq-case .eq-hw-btn--led.dim-active::before, #eq-panel .eq-case .eq-hw-btn--led[aria-pressed="true"]::before {
  background: var(--bk-led-on) !important; box-shadow: 0 0 7px 2px rgba(134,199,155,.75), 0 0 0 1px rgba(0,0,0,.4) !important; }
#eq-panel .eq-case .eq-hw-btn--blue { background: var(--bk-blue) !important; color: #fff !important; border-color: #0f2c7a !important;
  box-shadow: 0 3px 0 #10307f, 0 4px 7px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.4) !important; }
#eq-panel .eq-case .eq-hw-btn--blue:active { box-shadow: 0 1px 0 #10307f, 0 1px 2px rgba(0,0,0,.5), inset 0 1px 3px rgba(0,0,0,.35) !important; }
/* printed legends, light on black */
#eq-panel .eq-case .eq-knob-val { color: var(--bk-ink-hi) !important; }
#eq-panel .eq-case .eq-knob-freq { color: var(--bk-ink) !important; }
#eq-panel .eq-case .eq-knob-type, #eq-panel .eq-case .eq-face .eq-knob-col span:not(.eq-knob-val):not(.eq-knob-freq) { color: var(--bk-ink-lo) !important; }
#eq-panel .eq-case .eq-row-label { color: rgba(189,186,179,.6) !important; }
#eq-panel .eq-case .eq-face .eq-bank-master { border-left: 1px solid rgba(0,0,0,.6) !important; box-shadow: -1px 0 0 rgba(255,255,255,.05) !important; }
#eq-panel .eq-side-filters { border-top: 1px solid rgba(0,0,0,.6) !important; box-shadow: 0 -1px 0 rgba(255,255,255,.05) !important; }
#eq-panel .eq-case .eq-knob-track { stroke: rgba(255,255,255,.09) !important; }
#eq-panel .eq-case .eq-knob-arc { stroke: var(--bk-glow) !important; }
#eq-panel .eq-case .eq-knob--filter .eq-knob-arc { stroke: #d39561 !important; }
#eq-panel .eq-case .eq-knob--master .eq-knob-arc { stroke: #5fd08c !important; }
#eq-panel #eq-controls-10band .eq-knob-col.is-shelf .eq-knob-freq::after { color: #e0b84a !important; }
/* faders: the device's black slot */
#eq-panel .eq-case .eq-fader-slot { background: #000 !important; box-shadow: inset 0 1px 2px rgba(0,0,0,.9), 0 0 0 1px #34342f !important; }
#eq-panel .eq-case .eq-fader-zero { background: rgba(236,232,223,.28) !important; }
/* knobs-only mini view stays black too */
#eq-panel .eq-panel-mini { color: var(--bk-ink-hi); }

/* ---------- Profile / Community windows: the same black-finish frame ---------- */
.profile-modal-frame {
  border: 12px solid transparent !important; border-radius: 16px !important;
  background:
    var(--bk-screw) 1px 1px / 10px 10px no-repeat border-box,
    var(--bk-screw) calc(100% - 1px) 1px / 10px 10px no-repeat border-box,
    var(--bk-screw) 1px calc(100% - 1px) / 10px 10px no-repeat border-box,
    var(--bk-screw) calc(100% - 1px) calc(100% - 1px) / 10px 10px no-repeat border-box,
    #101010 padding-box,
    linear-gradient(90deg, #0c0c0b 0%, #1f1f1e 50%, #0c0c0b 100%) left top / 12px 100% no-repeat border-box,
    linear-gradient(90deg, #0c0c0b 0%, #1f1f1e 50%, #0c0c0b 100%) right top / 12px 100% no-repeat border-box,
    linear-gradient(180deg, #121211 0%, #0b0b0a 100%) border-box !important;
  box-shadow: 0 30px 90px rgba(0,0,0,.75), inset 0 0 0 1px var(--bk-ring), 0 0 0 1px #000 !important;
}
.profile-modal-frame iframe { border-radius: 4px; }
.profile-modal-close { background: var(--bk-red) !important; border: 1px solid #3a0d0a !important;
  box-shadow: 0 3px 0 #5a1612, 0 4px 8px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.25) !important; }
.profile-modal-close:active { transform: translateY(2px); box-shadow: 0 1px 0 #5a1612, inset 0 1px 3px rgba(0,0,0,.35) !important; }
@media (max-width: 760px) {
  .profile-modal-frame { border-width: 8px !important; border-radius: 0 !important;
    background-size: 7px 7px, 7px 7px, 7px 7px, 7px 7px, auto, 8px 100%, 8px 100%, auto !important; }
}

/* ---------- inside the Profile / Community pages: plates, keys, screens ---------- */
.signin-card, .profile-badges-card, .profile-form-card, .profile-favorites-card, .profile-emails-card, .profile-avatar-card,
.cm-member-card, .cm-block, .badge-popup-card, .modal-box {
  background: var(--bk-grain), var(--bk-body) !important; border: 1px solid #000 !important; border-radius: 12px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), inset 0 0 0 1px var(--bk-ring), 0 8px 22px rgba(0,0,0,.45) !important;
}
.signin-card h2, .profile-badges-card h2, .profile-badges-card h3, .profile-form-card h2, .profile-favorites-card h2,
.profile-emails-card h2, .cm-block-head, .favorites-header { letter-spacing: .6px; }
.profile-form-card input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .profile-form-card textarea, .profile-form-card select,
.modal-box input, .cm-search-trigger {
  background: var(--bk-screen) !important; color: var(--bk-ink-hi) !important; border: 1px solid #000 !important; border-radius: 6px !important;
  box-shadow: 0 0 0 1px #33332f, inset 0 0 10px rgba(0,0,0,.8) !important;
}
.profile-form-card input:focus, .profile-form-card textarea:focus, .modal-box input:focus { outline: none; box-shadow: 0 0 0 1px #33332f, 0 0 0 3px rgba(134,199,155,.35), inset 0 0 10px rgba(0,0,0,.8) !important; }
/* community tabs: a row of keys, the selected one lit */
.cm-tab { position: relative; padding-left: 24px !important; }
.cm-tab::before { content: ""; position: absolute; left: 9px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%;
  background: var(--bk-led-off); box-shadow: inset 0 1px 1px rgba(0,0,0,.7), 0 0 0 1px rgba(0,0,0,.5); }
.cm-tab.is-on::before { background: var(--bk-led-on); box-shadow: 0 0 6px 1px rgba(134,199,155,.75), 0 0 0 1px rgba(0,0,0,.4); }
.cm-tab.is-on { color: #fff !important; }
.cm-live-dot { background: var(--bk-led-on) !important; box-shadow: 0 0 6px 1px rgba(134,199,155,.75) !important; }