:root{
  --bg:#0c0c0e; --bg2:#131316; --panel:#1a1a1e; --panel2:#222227; --line:#2e2e35;
  --gold:#e0b95f; --gold2:#f3d58f; --goldd:#8f7232; --text:#ece8df; --mut:#9a968b; --red:#e2503f; --ok:#6fcf8f;
  --nav:62px; --top:56px;
  --radius:14px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Naskh Arabic","Noto Sans Arabic",Tahoma,sans-serif;font-size:15px;overscroll-behavior:none;touch-action:manipulation;-webkit-user-select:none;user-select:none}
body{display:flex;flex-direction:column;height:100dvh;overflow:hidden;
  background:radial-gradient(120% 60% at 50% -10%,#24211a 0%,transparent 60%),var(--bg)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;touch-action:manipulation}
button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* splash */
#splash{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:radial-gradient(80% 50% at 50% 30%,#2a2417,#0b0b0d);text-align:center;padding:24px}
#splash h1{margin:0;font-size:30px;letter-spacing:.5px;color:var(--gold2);font-weight:700}
#splash p{margin:0;color:var(--mut)}
#splash.hide{opacity:0;pointer-events:none;transition:opacity .5s}
.logo-ring{width:112px;height:112px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--goldd);box-shadow:0 0 60px #e0b95f33 inset,0 0 40px #e0b95f22;animation:pulse 3.2s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 80px #e0b95f55 inset,0 0 60px #e0b95f33}}
.gold{background:linear-gradient(#f0d28a,#c59a3d);color:#1a1405;font-weight:700;padding:15px 30px;border-radius:30px;font-size:17px;box-shadow:0 6px 24px #e0b95f44;margin-top:14px;min-height:52px}
.gold:active{transform:scale(.97)}
#splash small{color:var(--mut);max-width:320px}

/* header */
#top{height:var(--top);flex:none;display:flex;align-items:center;gap:10px;padding:0 12px;padding-top:env(safe-area-inset-top);border-bottom:1px solid var(--line);background:linear-gradient(#18181c,#121215);z-index:5}
.brand{font-weight:800;color:var(--gold);letter-spacing:1px;font-size:15px}
.chip{display:flex;flex-direction:column;align-items:flex-start;padding:5px 12px;border-radius:12px;background:var(--panel2);border:1px solid var(--line);min-width:0;flex:1;max-width:210px;line-height:1.2}
.chip span{font-weight:700;color:var(--gold2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.chip small{color:var(--mut);font-size:12px;white-space:nowrap}
#meter{width:130px;height:34px;flex:none;margin-inline-start:auto}
.recdot{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--panel2);color:var(--red);font-size:18px}
.recdot.on{background:var(--red);color:#fff;animation:blink 1s infinite}
@keyframes blink{50%{opacity:.55}}
#loadbar{height:0;overflow:hidden;position:relative;background:#111;transition:height .2s;flex:none;font-size:12px;color:var(--mut)}
#loadbar.on{height:20px}
#loadbar i{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,#6b551f,var(--gold))}
#loadbar span{position:relative;display:block;text-align:center;line-height:20px;color:#fff}

main{flex:1;min-height:0;position:relative}
.tab{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;padding:12px;display:none;-webkit-overflow-scrolling:touch}
.tab.on{display:block}
#tab-play.on{display:flex;flex-direction:column;gap:8px;padding:8px;overflow:auto}

nav{height:calc(var(--nav) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);flex:none;display:flex;background:#101013;border-top:1px solid var(--line);z-index:5}
nav button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--mut);font-size:12px}
nav svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
nav button.on{color:var(--gold2)}
nav button.on svg{filter:drop-shadow(0 0 6px #e0b95f88)}

h2{font-size:17px;margin:4px 0 10px;color:var(--gold2)}
h3{font-size:15px;margin:0 0 8px;color:var(--gold)}
.card{background:linear-gradient(#1c1c20,#17171a);border:1px solid var(--line);border-radius:var(--radius);padding:12px;margin-bottom:12px}
.muted{color:var(--mut);font-size:13px}
.row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.btn{min-height:44px;min-width:44px;padding:8px 14px;border-radius:12px;background:var(--panel2);border:1px solid var(--line);color:var(--text);display:inline-flex;align-items:center;justify-content:center;gap:6px}
.btn:active{background:#2c2c33}
.btn.on{background:linear-gradient(#3a3017,#2a2310);border-color:var(--goldd);color:var(--gold2)}
.btn.sm{min-height:36px;padding:4px 10px;font-size:13px}
.btn.danger{color:#ff8b7c}
select,input[type=text]{min-height:44px;background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:12px;padding:6px 10px;font:inherit}

/* sliders */
.sl{display:grid;grid-template-columns:96px 1fr 70px;align-items:center;gap:8px;min-height:44px}
.sl label{font-size:13px;color:var(--mut)}
.sl output{font-size:12px;color:var(--gold);text-align:left;direction:ltr;font-variant-numeric:tabular-nums}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:44px;background:transparent;direction:ltr;margin:0}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--gold) var(--p,50%),#2f2f36 var(--p,50%))}
input[type=range]::-moz-range-track{height:6px;border-radius:3px;background:#2f2f36}
input[type=range]::-moz-range-progress{height:6px;border-radius:3px;background:var(--gold)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;margin-top:-10px;background:radial-gradient(circle at 35% 30%,#f7e2aa,#b88d33);border:2px solid #1a1405;box-shadow:0 2px 8px #000a}
input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#d6ad4f;border:2px solid #1a1405}
.sw{position:relative;width:52px;height:30px;border-radius:15px;background:#303037;border:1px solid var(--line);flex:none;transition:.2s}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#8b8b92;transition:.2s}
.sw.on{background:#4a3a14;border-color:var(--goldd)}
.sw.on::after{left:25px;background:var(--gold2);box-shadow:0 0 10px #e0b95f}
.fxh{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.fxh h3{margin:0}
.fxcard.off .sl{opacity:.45}

/* instruments */
.fam{margin:14px 2px 8px;color:var(--mut);font-size:13px;letter-spacing:.5px}
.igrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.icard{position:relative;text-align:right;padding:12px;border-radius:var(--radius);background:linear-gradient(160deg,#202026,#16161a);border:1px solid var(--line);min-height:92px;overflow:hidden}
.icard b{display:block;color:var(--text);font-size:15px}
.icard small{display:block;color:var(--mut);direction:ltr;text-align:right;font-size:12px}
.icard .tag{display:inline-block;margin-top:8px;font-size:11px;padding:2px 8px;border-radius:9px;background:#2a2a31;color:var(--mut)}
.icard.on{border-color:var(--gold);box-shadow:0 0 0 1px var(--goldd) inset,0 0 24px #e0b95f26}
.icard.on b{color:var(--gold2)}
.icard::after{content:"";position:absolute;inset:auto -20px -30px auto;width:90px;height:90px;border-radius:50%;background:radial-gradient(#e0b95f22,transparent 70%)}

/* play toolbar */
.tools{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.tools .btn{min-height:40px;padding:4px 11px;font-size:13px}
.oct{display:flex;align-items:center;gap:4px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:2px}
.oct b{min-width:78px;text-align:center;font-size:12px;color:var(--gold);direction:ltr}
.scrub{height:34px}
details.more{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:4px 10px}
details.more summary{min-height:36px;display:flex;align-items:center;color:var(--mut);font-size:13px}

/* keyboard */
#kbd-wrap{flex:1;min-height:160px;position:relative}
#kbd{position:absolute;inset:0;direction:ltr;touch-action:none;background:#050506;border-radius:12px;padding:6px 4px 4px;border:1px solid #000;box-shadow:0 0 0 1px var(--line),0 12px 30px #000a}
.key{position:absolute;top:0;touch-action:none;transition:filter .08s}
.key.w{height:100%;background:linear-gradient(#f6f1e5 0%,#ece4d2 70%,#d8cdb4 100%);border-radius:0 0 7px 7px;border:1px solid #14110a;box-shadow:inset 0 -6px 8px #0002}
.key.b{height:62%;z-index:2;background:linear-gradient(#35353b,#0a0a0c 80%,#18181b);border-radius:0 0 6px 6px;border:1px solid #000;box-shadow:inset 0 -4px 6px #fff2,0 5px 8px #0009}
.key span{position:absolute;bottom:8px;left:0;right:0;text-align:center;font-size:11px;font-weight:600;color:#6a6252;pointer-events:none;direction:ltr}
.key.b span{color:#c9bfa6;bottom:10px;font-size:10px}
.key.c-root span{color:#a8791b}
.key .mk{position:absolute;top:6px;left:0;right:0;text-align:center;font-size:9px;color:#b4572f;pointer-events:none}
.key.b .mk{color:#f09b7a}
.key.dis{filter:brightness(.55) saturate(.4);background-image:repeating-linear-gradient(45deg,#0003 0 4px,transparent 4px 8px)}
.key.w.down{background:linear-gradient(#f5d67e,#e0b95f 70%,#c79a3a);box-shadow:inset 0 -3px 10px #0003,0 0 22px #e0b95f99;transform:translateY(1px)}
.key.b.down{background:linear-gradient(#a37d2c,#5d4614 80%,#7c5f1d);box-shadow:0 0 18px #e0b95fb0}
.key.w.down span{color:#4a3406}

/* strings */
#sb-wrap{position:relative;height:clamp(190px,32vh,280px);flex:none;background:#0a0a0c;border-radius:12px;border:1px solid var(--line);overflow:hidden;touch-action:none}
#sb{position:absolute;inset:0;width:100%;height:100%;touch-action:none;direction:ltr}
.chords{display:flex;gap:6px;overflow-x:auto;padding:2px;direction:ltr}
.chords .btn{flex:none;min-width:54px;font-weight:700}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.seg button{padding:8px 12px;min-height:40px;background:var(--panel2);color:var(--mut);font-size:13px}
.seg button.on{background:#3a3017;color:var(--gold2)}

/* takes */
.take{display:grid;grid-template-columns:auto 1fr;gap:8px 10px;align-items:center;padding:10px;border:1px solid var(--line);border-radius:12px;margin-bottom:8px;background:var(--panel)}
.take .nm{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.take .acts{grid-column:1/-1;display:flex;gap:6px;flex-wrap:wrap}
.chk{width:28px;height:28px;border-radius:8px;border:1px solid var(--line);background:#222;display:grid;place-items:center;color:transparent;font-size:16px}
.chk.on{background:#4a3a14;border-color:var(--gold);color:var(--gold2)}
.timer{font-variant-numeric:tabular-nums;direction:ltr;font-size:28px;color:var(--gold2);letter-spacing:1px;font-weight:300}
.tr{width:56px;height:56px;border-radius:50%;font-size:22px}
.tr.rec{color:var(--red)}
.beatdots{display:flex;gap:6px}
.beatdots i{width:12px;height:12px;border-radius:50%;background:#333}
.beatdots i.on{background:var(--gold);box-shadow:0 0 10px var(--gold)}
.beatdots i.on.f{background:var(--red);box-shadow:0 0 10px var(--red)}

#toast{position:fixed;left:50%;bottom:calc(var(--nav) + 18px + env(safe-area-inset-bottom));transform:translate(-50%,20px);background:#2b2b31;border:1px solid var(--goldd);padding:10px 16px;border-radius:12px;opacity:0;pointer-events:none;transition:.25s;z-index:60;max-width:90vw;text-align:center}
#toast.on{opacity:1;transform:translate(-50%,0)}

.help ol,.help ul{padding-inline-start:20px;line-height:1.9;margin:6px 0}
.help b{color:var(--gold2)}
.pill{display:inline-block;padding:1px 8px;border-radius:8px;font-size:12px;background:#2c2c33;margin:1px}

/* landscape / short screens: playing mode */
@media (max-height:520px){
  :root{--nav:46px;--top:44px}
  nav button span{display:none}
  .brand{display:none}
  #meter{height:26px}
  .recdot{width:34px;height:34px}
  #tab-play.on{padding:5px;gap:5px}
  #sb-wrap{height:clamp(120px,40vh,200px)}
  .tools .btn{min-height:34px}
  .oct b{min-width:64px}
}
@media (min-width:760px){
  .igrid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
  .tab:not(#tab-play){padding:18px max(18px,calc((100% - 880px)/2))}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}