/* =====================================================================
   MUSICIZER — brand theme (MuStudio)
   Concept: "Every track starts on the grid." The step-sequencer grid is the
   mark, the pattern and the layout system. Flat colour, rounded tiles,
   cropped supergraphics, quiet meta text, loud short headlines.
   Palette: street orange + ink + cream/sand, neon green only for "live".
   Loaded last on every page, so it wins over older page styles.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Baloo+Bhaijaan+2:wght@500;700;800&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap');

:root {
  --ink: #121110; --ink2: #1A1816; --ink3: #24211D; --line: #2F2B26;
  --cream: #F4EAD9; --sand: #D8C8AE; --sand2: #C9B694;
  --orange: #FF5A1F; --orange-d: #E04812; --green: #5CF05C;
  --muted: #A1978A; --text: #F4EAD9;
  --c1: #FF5A1F; --c2: #D8C8AE;
  --display: 'Baloo Bhaijaan 2', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --ui: 'IBM Plex Sans Arabic', 'IBM Plex Sans', system-ui, sans-serif;
  --r: 20px;
}

/* ---------- Base: ink page, the step-dot pattern from the mark ---------- */
html, body { background: var(--ink) !important; }
body, body.studio-page {
  color: var(--cream); font-family: var(--ui) !important;
  background-image: radial-gradient(rgba(244, 234, 217, .07) 1.2px, transparent 1.4px) !important;
  background-size: 24px 24px !important;
}
.glow { display: none !important; }
h1, h2, h3, .logo, .song-name, .chapter-title, .eg-top h3, .bp-head h2, .tool b, .lib-title { font-family: var(--display) !important; letter-spacing: -.01em; }
p, li, small, span, input, select, button, label { font-family: var(--ui); }
.ar, [lang='ar'] { font-family: var(--display) !important; }
::selection { background: var(--orange); color: var(--ink); }
:where(a, button, input, select, [tabindex]):focus-visible { outline: 2px solid var(--green) !important; outline-offset: 2px; }

/* ---------- Header ---------- */
.top { background: rgba(18, 17, 16, .94) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-bottom: 1px solid var(--line) !important; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--cream); text-decoration: none; }
.brand svg { width: 34px; height: 34px; flex: none; }
.brand .wm { font: 800 1.45rem/1 var(--display); letter-spacing: -.02em; }
.brand .wm-ar { font: 700 .8rem/1 var(--display); color: var(--muted); padding-left: 10px; border-left: 1px solid var(--line); }
.logo-link .logo { display: none; }
.nav a.navlink { color: var(--muted) !important; font-weight: 600; font-size: .88rem; }
.nav a.navlink .ni { display: none; }
.nav a.navlink:hover { color: var(--cream) !important; background: var(--ink3) !important; }
.nav a.navlink.active { color: var(--ink) !important; background: var(--cream) !important; box-shadow: none !important; }
.nbadge { background: var(--orange) !important; color: var(--ink) !important; border-radius: 6px !important; }
.nav a.navlink.active .nbadge { background: var(--ink) !important; color: var(--cream) !important; }

/* phone tab bar: ink, line icons, orange pill for the current page */
.tabbar { background: var(--ink) !important; border-top: 1px solid var(--line) !important; backdrop-filter: none !important; }
.tab { color: var(--muted) !important; }
.tab .ni { display: grid; place-items: center; width: 40px; height: 30px; border-radius: 10px; transition: background .2s; }
.tab .ni svg { width: 22px; height: 22px; }
.tab.active { background: transparent !important; color: var(--cream) !important; }
.tab.active .ni { background: var(--orange); color: var(--ink); transform: none !important; }
.tab .nbadge { font-size: .48rem !important; }

/* ---------- Meta line + vertical bookmark tab ---------- */
.meta-line {
  position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; padding: 14px clamp(14px, 3vw, 28px) 0;
  display: flex; justify-content: space-between; gap: 12px; font: 600 .68rem/1.4 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.bookmark {
  position: fixed; left: 0; bottom: 70px; z-index: 20; writing-mode: vertical-rl; transform: rotate(180deg);
  background: var(--cream); color: var(--ink); font: 800 .85rem/1 var(--display); letter-spacing: .04em;
  padding: 16px 8px; border-radius: 0 10px 10px 0;
}
@media (max-width: 1360px) { .bookmark { display: none; } }
@media (max-width: 760px) { .meta-line span:last-child { display: none; } }

/* ---------- Hero: short loud headline, giant cropped word behind ---------- */
.hero {
  position: relative; overflow: hidden; text-align: left !important; max-width: 1240px !important;
  padding: clamp(26px, 5vw, 56px) clamp(14px, 3vw, 28px) clamp(26px, 4vw, 44px) !important;
}
.hero-mega {
  position: absolute; right: -2vw; top: 50%; transform: translateY(-50%); z-index: 0; pointer-events: none; user-select: none;
  font: 800 clamp(7rem, 22vw, 19rem)/.8 var(--display); color: var(--ink3); white-space: nowrap; letter-spacing: -.04em;
}
.hero > *:not(.hero-mega) { position: relative; z-index: 1; }
.hero h1 { font-size: clamp(2.3rem, 7vw, 5rem) !important; line-height: .98 !important; max-width: 14ch; color: var(--cream); }
.hero h1 .ar-title { font-family: var(--display) !important; color: var(--sand) !important; font-size: .45em !important; margin-top: 10px; }
.grad, .hero .grad {
  background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; animation: none !important;
  color: var(--orange) !important; -webkit-text-fill-color: var(--orange) !important;
  padding-bottom: .08em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9 C 40 3, 80 12, 120 6 S 180 4, 197 8' fill='none' stroke='%23F4EAD9' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: 0 100% !important; background-size: 100% .22em !important;
}
.hero p { margin-left: 0 !important; max-width: 560px !important; color: var(--sand) !important; border-left: 2px solid var(--orange); padding-left: 14px; text-align: left; }
.hero .sub { border: 0; padding-left: 0; color: var(--muted) !important; font-size: .8rem !important; letter-spacing: .04em; }
.hero > svg.hand-arrow { position: absolute !important; width: 70px; height: 54px; color: var(--orange); pointer-events: none; transform: rotate(8deg); }
@media (max-width: 480px) { .hero > svg.hand-arrow { display: none; } }
.quick-len { justify-content: flex-start !important; }

/* ---------- Buttons: flat pills ---------- */
.btn {
  border-radius: 999px !important; background: var(--ink3) !important; border: 1px solid var(--line) !important; color: var(--cream) !important;
  box-shadow: none !important; filter: none !important; font-weight: 600 !important;
}
.btn:hover { background: #2E2A25 !important; }
.btn.primary { background: var(--orange) !important; border-color: var(--orange) !important; color: var(--ink) !important; }
.btn.primary:hover { background: #FF6E39 !important; }
.surprise {
  background: var(--cream) !important; color: var(--ink) !important; box-shadow: none !important; border-radius: 999px !important;
  font: 800 1.15rem/1 var(--display) !important; padding: 0 34px !important;
}
.surprise::after { display: none !important; }
.surprise:hover { background: var(--orange) !important; transform: translateY(-2px) !important; }
select, .search, input[type=text] { background: var(--ink2) !important; border: 1px solid var(--line) !important; color: var(--cream) !important; border-radius: 12px !important; }
input[type=range] { accent-color: var(--orange) !important; }

/* ---------- Surfaces: flat ink cards, no glass ---------- */
.picker, .stage, .studio-page .library, .library, .box, .panel, .group, .eg, .crosslink, .studio, .beat, .track, .item, .eg-card, .drawer-panel {
  background: var(--ink2) !important; border: 1px solid var(--line) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  box-shadow: none !important; border-radius: var(--r) !important;
}
.drawer-panel { border-radius: 0 !important; }
.tweaks, .gear-rack, .audit-wrap, .flash, .var, .moves div, .mine, .shot, .row-s, .inst, .concept { background: var(--ink3) !important; border-color: var(--line) !important; }
.picker-head h2, .panel h2, .box h2, .group-head h2, .launch h2, .library h2 { color: var(--cream) !important; }
.step { background: var(--orange) !important; color: var(--ink) !important; }
.panel-title small, .lede, .progress, .meta, .time, .hint-s, .count { color: var(--muted) !important; }
.eyebrow, .chapter-no, .bp-sec h4 { color: var(--orange) !important; }

/* halftone grain on the player: the "live" surface */
.stage, .eg-card .eg-map, .guide-tl {
  background-image: radial-gradient(rgba(244, 234, 217, .09) 1px, transparent 1.2px) !important; background-size: 6px 6px !important;
}

/* ---------- Tiles: flat colour, rotating through the palette, cropped mega word ---------- */
.vibe, .preset, .dir, .tool, .beat-top, .track-top, .eg-top, .item-top, .bp-head {
  background: var(--t, var(--orange)) !important; color: var(--tt, var(--ink)) !important;
  filter: none !important; box-shadow: none !important; overflow: hidden !important;
}
.vibe::before, .preset::before, .dir::before, .tool::before, .beat-top::before, .track-top::before, .eg-top::before, .item-top::before { display: none !important; }
.vibe *, .preset *, .dir *, .tool *, .beat-top *, .track-top *, .eg-top *, .item-top *, .bp-head h2, .bp-head p { color: var(--tt, var(--ink)) !important; opacity: 1 !important; }
.vibe small, .preset small, .dir small, .tool span, .beat-top p, .track-top p { opacity: .8 !important; }
.vibe .icon, .dir .dir-icon, .tool .t-ic, .preset .icon, .track-top .big, .item-icon, .vibe.selected::after { display: none !important; }
.mega {
  position: absolute; right: -8px; bottom: -.32em; z-index: 0; pointer-events: none; white-space: nowrap;
  font: 800 4.6rem/1 var(--display) !important; color: var(--tm, rgba(0, 0, 0, .12)) !important; letter-spacing: -.03em; opacity: 1 !important;
}
.vibe .mega, .preset .mega, .dir .mega { font-size: 3.8rem !important; }
.tool .mega { font-size: 5.6rem !important; }
/* quieter tone-on-tone so the small text always reads first */
.vibe, .preset, .dir, .tool, .item-top, .beat-top { --tm-soft: 1; }
:is(.vibe-grid, .presets, .dirs, .launch-grid) > :nth-child(4n+1) .mega, .list > .item:nth-child(4n+1) .mega { color: #F4521A !important; }
:is(.vibe-grid, .presets, .dirs, .launch-grid) > :nth-child(4n+2) .mega, .list > .item:nth-child(4n+2) .mega { color: #EADCC4 !important; }
:is(.vibe-grid, .presets, .dirs, .launch-grid) > :nth-child(4n+3) .mega, .list > .item:nth-child(4n+3) .mega { color: #CFBE9F !important; }
:is(.vibe-grid, .presets, .dirs, .launch-grid) > :nth-child(4n+4) .mega, .list > .item:nth-child(4n+4) .mega { color: #302C27 !important; }
.eg-top .mega, .bp-head .mega { font-size: 8rem !important; bottom: -.3em; }
.vibe > *:not(.mega), .preset > *:not(.mega), .dir > *:not(.mega), .tool > *:not(.mega), .eg-top > *:not(.mega), .item-top > *:not(.mega) { position: relative; z-index: 1; }
/* the four tile colours: orange, cream, sand, raised ink */
.t1 { --t: var(--orange); --tt: var(--ink); --tm: var(--orange-d); }
.t2 { --t: var(--cream); --tt: var(--ink); --tm: #E6D6BC; }
.t3 { --t: var(--sand); --tt: var(--ink); --tm: var(--sand2); }
.t4 { --t: #2A2622; --tt: var(--cream); --tm: #34302B; }
:is(.vibe-grid, .presets, .dirs, .launch-grid) > :nth-child(4n+1), .grid > .beat:nth-child(4n+1) .beat-top, .list > .item:nth-child(4n+1) .item-top { --t: var(--orange); --tt: var(--ink); --tm: var(--orange-d); }
:is(.vibe-grid, .presets, .dirs, .launch-grid) > :nth-child(4n+2), .grid > .beat:nth-child(4n+2) .beat-top, .list > .item:nth-child(4n+2) .item-top { --t: var(--cream); --tt: var(--ink); --tm: #E6D6BC; }
:is(.vibe-grid, .presets, .dirs, .launch-grid) > :nth-child(4n+3), .grid > .beat:nth-child(4n+3) .beat-top, .list > .item:nth-child(4n+3) .item-top { --t: var(--sand); --tt: var(--ink); --tm: var(--sand2); }
:is(.vibe-grid, .presets, .dirs, .launch-grid) > :nth-child(4n+4), .grid > .beat:nth-child(4n+4) .beat-top, .list > .item:nth-child(4n+4) .item-top { --t: #2A2622; --tt: var(--cream); --tm: #34302B; }
.track-top, .eg-top, .bp-head { --t: var(--orange); --tt: var(--ink); --tm: var(--orange-d); }
/* selected / playing = the single neon accent */
.vibe.selected, .preset.selected, .dir.active, .beat.playing, .track.selected, .inst.playing { outline: 3px solid var(--green) !important; outline-offset: 3px; transform: none !important; }
.vibe:hover, .preset:hover, .dir:hover, .tool:hover { transform: translateY(-3px) rotate(-.4deg) !important; }
.world-tag, .eg-dir, .track-top .score, .facts span, .item-icon { background: rgba(18, 17, 16, .12) !important; color: inherit !important; }
.t4 .facts span, :is(.vibe-grid, .presets, .dirs, .launch-grid) > :nth-child(4n+4) .facts span { background: rgba(244, 234, 217, .1) !important; }
.num { color: var(--tt, var(--ink)) !important; opacity: .9 !important; font: 800 3.4rem/1 var(--display) !important; right: 12px !important; top: 2px !important; }
.nbadge, .tool .nbadge { background: var(--ink) !important; color: var(--cream) !important; }

/* filters / chips */
.filter, .tab:not(.tab), .chip, .layer-btn, .concept, .tabs .tab {
  background: transparent !important; border: 1px solid var(--line) !important; color: var(--sand) !important; border-radius: 999px !important;
}
.filter.active, .chip.active, .tabs .tab.active, .concept.active { background: var(--cream) !important; color: var(--ink) !important; border-color: var(--cream) !important; }
.chip.active small { color: var(--ink) !important; opacity: .7; }
.layer-btn.off { text-decoration: line-through; opacity: .5; }

/* ---------- Timeline + scores in the palette ---------- */
.sec { border-radius: 8px !important; color: var(--ink) !important; opacity: .5; }
.sec.current { opacity: 1 !important; }
.sec.intro, .sec.outro, .sec.tail { background: #3A352F !important; color: var(--cream) !important; }
.sec.verse { background: var(--sand) !important; }
.sec.build { background: var(--sand2) !important; }
.sec.chorus, .sec.post { background: var(--orange) !important; }
.sec.break { background: #4A443C !important; color: var(--cream) !important; }
.sec.solo { background: var(--cream) !important; }
.playhead { background: var(--green) !important; box-shadow: 0 0 0 1px var(--ink) !important; }
.score-bar { background: var(--ink) !important; }
.score-bar i { background: var(--orange) !important; }
.score-bar i.low { background: #E85D4A !important; }
.seg { background: #3A352F !important; color: var(--cream) !important; }
.seg.chorus { background: var(--orange) !important; color: var(--ink) !important; }
.seg.build { background: var(--sand2) !important; color: var(--ink) !important; }
.seg.special { background: var(--green) !important; color: var(--ink) !important; }
.grid16 { background: var(--ink) !important; color: var(--sand) !important; border: 1px solid var(--line); }
.grid16 .hit { color: var(--orange) !important; }
.weak { background: rgba(255, 90, 31, .08) !important; border-left-color: var(--orange) !important; }
.kv b { color: var(--muted) !important; }
.flash .cut.on { background: var(--orange) !important; color: var(--ink) !important; }
.flash .cut.drop { background: var(--green) !important; color: var(--ink) !important; }
.play-s, .inst .play-dot { background: var(--orange) !important; color: var(--ink) !important; }
.mine .del, .item .del { color: var(--muted) !important; }

/* ---------- Beat Lab grid in brand colours ---------- */
.cell { background: var(--ink3) !important; }
.cell.on.drum { background: var(--orange) !important; }
.cell.on.melody { background: var(--cream) !important; }
.cell.now { outline: 2px solid var(--green) !important; box-shadow: none !important; }
.top h1 { font-family: var(--display) !important; }

.eg-top h3, .song-name, .chapter-title, .bp-head h2, .beat-top h3, .track-top h3 { line-height: 1.05 !important; }

/* ---------- Launcher ---------- */
.launch h2 { font-family: var(--display) !important; font-size: 1.5rem !important; }
.tool { min-height: 150px !important; justify-content: flex-end !important; }
.tool b { font-size: 1.3rem !important; }

/* ---------- Theory engine controls: layer rework, rules check, maqam/mode pickers ---------- */
.rework-row { display: flex; flex-wrap: wrap; gap: 8px; }
.rework-row .btn:disabled, .eg-rework .btn:disabled { opacity: .4; cursor: not-allowed; }
.rework-note { margin: 10px 0 0; font-size: .82rem; color: var(--muted); }
.eg-opts { display: flex; flex-wrap: wrap; gap: 12px; margin: 14px 0 4px; }
.eg-opts .opt { min-width: 220px; flex: 1 1 220px; }
.eg-opts .opt .ar { text-transform: none; letter-spacing: 0; }
.eg-rework { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px; border-top: 1px solid var(--line); }
.eg-rework .lbl { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-right: 4px; }
.eg-rework small { flex-basis: 100%; color: var(--muted); }
.eg-rules { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 14px; }
.eg-rules span { font-size: .75rem; padding: 4px 10px; border-radius: 999px; background: var(--ink); border: 1px solid var(--line); color: var(--sand); }
.eg-rules span b { color: var(--cream); margin-left: 4px; }
.eg-rules span.low b { color: #E85D4A; }
@media (max-width: 520px) { .rework-row .btn, .eg-rework .btn { flex: 1 1 40%; } }