@import url('https://fonts.googleapis.com/css2?family=Lalezar&family=Vazirmatn:wght@300;400;500;600;700;800&display=swap');

/* ============================================================
   نواگاه — ظاهر تازه
   شب لاجوردی + فیروزه + زعفران، الهام از کاشی‌کاری ایرانی.
   رنگِ درخشش (--glow) با هر ساز عوض می‌شود و کل صفحه را هم‌رنگ می‌کند.
   ============================================================ */

@property --glow { syntax: '<color>'; inherits: true; initial-value: #2ee6d0; }

:root{
  --night:   #0d0b24;
  --lapis:   #1c1a52;
  --lapis-2: #2a2775;
  --turq:    #2ee6d0;
  --violet:  #9b7bff;
  --saffron: #ffb93b;
  --rose:    #ff4f7b;
  --ivory:   #f6efe0;
  --mist:    rgba(246,239,224,.66);
  --faint:   rgba(246,239,224,.14);
  --glow:    var(--turq);

  --display: 'Lalezar', 'Vazirmatn', Tahoma, sans-serif;
  --text:    'Vazirmatn', Tahoma, sans-serif;
  --spring:  cubic-bezier(.3,1.5,.5,1);
  --out:     cubic-bezier(.16,1,.3,1);
}

/* درخشش هر ساز */
html{ transition: --glow .9s ease; }
html:has(#i-piano:checked){ --glow: var(--turq); }
html:has(#i-kb:checked)   { --glow: var(--violet); }
html:has(#i-hp:checked)   { --glow: var(--saffron); }
html:has(#i-st:checked)   { --glow: #ff8a4c; }
html:has(#i-gt:checked)   { --glow: #ffd166; }

*{ box-sizing: border-box; }
[hidden]{ display: none !important; }
html{ background: var(--night); color-scheme: dark; }
body{
  margin: 0; min-height: 100vh; position: relative; overflow-x: hidden;
  color: var(--ivory); font-family: var(--text); direction: rtl;
  -webkit-tap-highlight-color: transparent;
}
.vh{ position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; pointer-events:none; }

/* شفق پس‌زمینه */
body::before{
  content:''; position: fixed; inset: -25%; z-index: -2; pointer-events: none;
  background:
    radial-gradient(38% 34% at 18% 14%, color-mix(in srgb, var(--glow) 42%, transparent), transparent 70%),
    radial-gradient(34% 30% at 88% 72%, rgba(255,79,123,.26), transparent 70%),
    radial-gradient(40% 34% at 55% 48%, rgba(42,39,117,.9), transparent 75%),
    radial-gradient(30% 26% at 8% 90%, rgba(255,185,59,.16), transparent 70%);
  animation: drift 28s ease-in-out infinite alternate;
}
/* الگوی ستاره‌ی خاتم، بسیار کمرنگ، فقط دور صحنه دیده می‌شود */
body::after{
  content:''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .55;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='88' height='88' viewBox='0 0 88 88'><g fill='none' stroke='%23ffffff' stroke-opacity='.09' stroke-width='1'><rect x='24' y='24' width='40' height='40'/><rect x='24' y='24' width='40' height='40' transform='rotate(45 44 44)'/><circle cx='44' cy='44' r='9'/></g></svg>");
  background-size: 88px 88px;
  -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 30%, #000 0%, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 55% at 50% 30%, #000 0%, transparent 75%);
}
@keyframes drift{
  from{ transform: translate3d(-2%,-1%,0) rotate(-2deg) scale(1); }
  to  { transform: translate3d(2%,2%,0) rotate(3deg) scale(1.08); }
}

:focus-visible{ outline: 2px solid var(--glow); outline-offset: 3px; }
button{ font-family: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }

/* ============================================================
   دکمه‌های عمومی
   ============================================================ */
.btn-primary, .btn-ghost{
  position: relative; overflow: hidden; cursor: pointer; border: 0; border-radius: 999px;
  font-family: inherit; font-weight: 700; text-decoration: none; text-align: center;
  transition: transform .2s var(--spring), box-shadow .3s, background .3s;
}
.btn-primary{
  width: 100%; padding: 15px 22px; font-size: 16px; color: var(--night);
  background: linear-gradient(135deg, var(--turq), #7ab8ff 55%, var(--violet));
  box-shadow: 0 14px 34px -10px color-mix(in srgb, var(--turq) 70%, transparent);
}
.btn-primary::after{
  content:''; position:absolute; inset:0; transform: translateX(110%);
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  transition: transform .7s var(--out);
}
.btn-primary:hover::after{ transform: translateX(-110%); }
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 20px 40px -10px color-mix(in srgb, var(--turq) 80%, transparent); }
.btn-primary:active, .btn-ghost:active{ transform: scale(.95); }
.btn-ghost{
  display: inline-block; padding: 9px 18px; font-size: 13px; font-weight: 600;
  background: rgba(255,255,255,.09); color: var(--ivory);
}
.btn-ghost:hover{ background: rgba(255,255,255,.16); transform: translateY(-1px); }

/* ============================================================
   صفحه‌های ورود / ثبت‌نام / ادمین
   ============================================================ */
.auth-body{
  min-height: 100vh; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 30px; padding: 36px 22px;
}
.hero-icons{ display: flex; gap: 16px; }
.hi{
  width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 16px 30px -8px rgba(0,0,0,.6); opacity: 0;
  animation: hiIn .7s var(--spring) both, hiFloat 4s ease-in-out infinite 1.2s;
}
.hi-piano{ background: linear-gradient(155deg, var(--turq), var(--lapis-2)); animation-delay: .05s, 1.05s; }
.hi-kb   { background: linear-gradient(155deg, var(--violet), var(--rose)); animation-delay: .18s, 1.18s; }
.hi-hp   { background: linear-gradient(155deg, var(--saffron), #d2542a); animation-delay: .31s, 1.31s; }
.hi-st   { background: linear-gradient(155deg, #ff8a4c, #6b3313); animation-delay: .44s, 1.44s; }
@keyframes hiIn{ from{ opacity:0; transform: translateY(-30px) scale(.5) rotate(-14deg); } to{ opacity:1; transform: none; } }
@keyframes hiFloat{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-9px); } }

.auth-card{ width: 100%; max-width: 380px; animation: cardIn .8s var(--out) both; }
@keyframes cardIn{ from{ opacity:0; transform: translateY(26px); filter: blur(6px); } to{ opacity:1; transform: none; filter: none; } }
.brand{ text-align: center; margin-bottom: 30px; }
.brand-logo{ display: inline-flex; }
.brand-logo svg{ filter: drop-shadow(0 0 22px color-mix(in srgb, var(--glow) 70%, transparent)); animation: logoPop .8s var(--spring) both .1s; }
@keyframes logoPop{ from{ opacity:0; transform: scale(.4) rotate(-10deg); } to{ opacity:1; transform: none; } }
.brand-logo.ok{
  width: 56px; height: 56px; border-radius: 50%; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--turq), var(--violet)); color: var(--night);
  font-size: 26px; font-weight: 800; box-shadow: 0 0 40px -4px var(--turq);
  animation: logoPop .8s var(--spring) both;
}
.brand h1{
  margin: 8px 0 6px; font-family: var(--display); font-weight: 400; font-size: 54px; line-height: 1.1;
  text-shadow: 0 0 40px color-mix(in srgb, var(--glow) 60%, transparent);
}
.brand .tag{ margin: 0; color: var(--mist); font-size: 14px; }

.field{ display: block; margin-bottom: 22px; }
.field span{ display: block; font-size: 13px; color: var(--mist); margin-bottom: 4px; }
.field input{
  width: 100%; padding: 12px 2px; font-family: inherit; font-size: 17px; color: var(--ivory);
  background: transparent; border: 0; border-bottom: 2px solid var(--faint); border-radius: 0;
  transition: border-color .3s, box-shadow .3s;
}
.field input::placeholder{ color: rgba(246,239,224,.32); }
.field input:focus{ outline: none; border-bottom-color: var(--glow); box-shadow: 0 14px 22px -16px var(--glow); }

.err{ color: var(--rose); font-size: 13px; margin: -8px 0 16px; animation: shake .4s; }
@keyframes shake{ 20%{ transform: translateX(6px); } 40%{ transform: translateX(-6px); } 60%{ transform: translateX(4px); } 80%{ transform: translateX(-3px); } }
.alt{ text-align: center; margin: 22px 0 0; font-size: 14px; color: var(--mist); }
.alt a{ color: var(--glow); font-weight: 700; text-decoration: none; }
.alt a:hover{ text-decoration: underline; text-underline-offset: 4px; }

.done-msg{ text-align: center; color: var(--mist); font-size: 14px; margin: 6px 0 0; }
.pw-reveal{
  text-align: center; direction: ltr; margin: 6px 0 14px; font-family: var(--display); font-size: 48px;
  letter-spacing: 3px; color: var(--saffron); text-shadow: 0 0 34px rgba(255,185,59,.55);
}
.auth-card .tag{ text-align: center; color: var(--mist); font-size: 13.5px; margin: 0 0 18px; }

/* پنل ادمین */
.admin-wrap{ width: 100%; max-width: 760px; margin: 0 auto; animation: cardIn .7s var(--out) both; }
.admin-top{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.admin-top h1{ font-family: var(--display); font-weight: 400; font-size: 34px; margin: 0; }
.admin-wrap .tag{ color: var(--mist); font-size: 14px; margin: 4px 0 18px; }
.admin-table-wrap{ overflow-x: auto; }
.admin-table{ width: 100%; border-collapse: collapse; font-size: 14px; min-width: 480px; }
.admin-table th{ text-align: right; color: var(--mist); font-weight: 500; padding: 10px 12px; border-bottom: 2px solid var(--faint); }
.admin-table td{ padding: 13px 12px; border-bottom: 1px solid rgba(246,239,224,.08); }
.admin-table tbody tr{ transition: background .2s; }
.admin-table tbody tr:hover{ background: rgba(255,255,255,.05); }
.admin-table .empty{ text-align: center; color: var(--mist); padding: 26px; }

/* ============================================================
   برنامه‌ی اصلی
   ============================================================ */
#toast{
  position: fixed; left: 50%; bottom: calc(112px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 20px); z-index: 99; pointer-events: none; opacity: 0;
  padding: 11px 22px; border-radius: 999px; font-size: 14px; font-weight: 500;
  background: rgba(13,11,36,.85); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 14px 40px -8px rgba(0,0,0,.6), 0 0 34px -10px var(--glow);
  transition: opacity .25s, transform .4s var(--spring);
}
#toast.show{ opacity: 1; transform: translate(-50%, 0); }

.app{
  max-width: 980px; margin: 0 auto; overflow-x: clip;
  padding: 14px 18px calc(150px + env(safe-area-inset-bottom, 0px));
  padding-top: calc(14px + env(safe-area-inset-top, 0px));
}

.topbar{ display: flex; align-items: center; justify-content: space-between; padding: 8px 0; }
.brand-mini{ display: flex; align-items: center; gap: 10px; }
.brand-mini svg{ filter: drop-shadow(0 0 14px color-mix(in srgb, var(--glow) 65%, transparent)); }
.brand-mini h1{ margin: 0; font-family: var(--display); font-weight: 400; font-size: 30px; line-height: 1; }
.icon-btn{
  width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.09); color: var(--ivory);
  transition: transform .25s var(--spring), background .25s;
}
.icon-btn:hover{ background: rgba(255,255,255,.17); transform: scale(1.08); }
.icon-btn:active{ transform: scale(.92); }

.account-panel{
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px;
  padding: 10px 2px 0; font-size: 14px; color: var(--mist); animation: panelIn .45s var(--out) both;
}
.account-panel p{ margin: 0; }
.account-panel b{ color: var(--ivory); font-weight: 700; }
.account-actions{ display: flex; gap: 8px; margin-inline-start: auto; }

/* ---------- عنوان صحنه ---------- */
.stage-head{ display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 6px 24px; margin: 26px 0 0; }
.stage-title{ margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(46px, 11vw, 84px); line-height: 1; text-shadow: 0 0 60px color-mix(in srgb, var(--glow) 55%, transparent); }
.stage-title span, .stage-hint span{ display: none; }
.app:has(#i-piano:checked) .t-piano,
.app:has(#i-kb:checked)    .t-kb,
.app:has(#i-hp:checked)    .t-hp,
.app:has(#i-st:checked)    .t-st,
.app:has(#i-gt:checked)    .t-gt{ display: inline-block; animation: titleIn .7s var(--out) both; }
.app:has(#i-piano:checked) .h-keys,
.app:has(#i-kb:checked)    .h-keys,
.app:has(#i-hp:checked)    .h-hp,
.app:has(#i-st:checked)    .h-st,
.app:has(#i-gt:checked)    .h-gt{ display: inline; animation: panelIn .6s var(--out) both .15s; }
.stage-hint{ margin: 0; max-width: 34ch; color: var(--mist); font-size: 13.5px; line-height: 1.8; }
@keyframes titleIn{ from{ opacity:0; transform: translateY(22px) scale(.94); filter: blur(10px); } to{ opacity:1; transform: none; filter: none; } }
@keyframes panelIn{ from{ opacity:0; transform: translateY(12px); } to{ opacity:1; transform: none; } }

/* ---------- دَرَک پایین: انتخاب ساز ---------- */
.sidebar{
  --i: 0;
  position: fixed; z-index: 50; left: 50%; transform: translateX(-50%);
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  width: min(92vw, 430px); padding: 6px; border-radius: 32px;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: rgba(16,14,48,.62);
  -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4);
  box-shadow: 0 24px 60px -12px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.07), 0 0 70px -22px var(--glow);
}
.sidebar::before{
  content:''; position: absolute; inset-block: 6px; inset-inline-start: 6px;
  width: calc((100% - 12px) / 5); border-radius: 26px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--glow) 55%, transparent), color-mix(in srgb, var(--glow) 16%, transparent));
  box-shadow: 0 0 34px -4px var(--glow);
  transform: translateX(calc(var(--i) * -100%));
  transition: transform .55s var(--spring), background .9s, box-shadow .9s;
}
.layout:has(#i-kb:checked) .sidebar{ --i: 1; }
.layout:has(#i-hp:checked) .sidebar{ --i: 2; }
.layout:has(#i-st:checked) .sidebar{ --i: 3; }
.layout:has(#i-gt:checked) .sidebar{ --i: 4; }
.side-ic{
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 11px 0 9px; cursor: pointer; color: var(--mist); font-size: 11px; font-weight: 600;
  transition: color .3s; -webkit-user-select: none; user-select: none;
}
.side-ic .ic-circle{ display: flex; transition: transform .4s var(--spring); }
.side-ic:active .ic-circle{ transform: scale(.85); }
.layout:has(#i-piano:checked) label[for=i-piano],
.layout:has(#i-kb:checked)    label[for=i-kb],
.layout:has(#i-hp:checked)    label[for=i-hp],
.layout:has(#i-st:checked)    label[for=i-st],
.layout:has(#i-gt:checked)    label[for=i-gt]{ color: #fff; }
.layout:has(#i-piano:checked) label[for=i-piano] .ic-circle,
.layout:has(#i-kb:checked)    label[for=i-kb] .ic-circle,
.layout:has(#i-hp:checked)    label[for=i-hp] .ic-circle,
.layout:has(#i-st:checked)    label[for=i-st] .ic-circle,
.layout:has(#i-gt:checked)    label[for=i-gt] .ic-circle{ transform: translateY(-3px) scale(1.12); }
.layout:has(#i-piano:focus-visible) label[for=i-piano],
.layout:has(#i-kb:focus-visible)    label[for=i-kb],
.layout:has(#i-hp:focus-visible)    label[for=i-hp],
.layout:has(#i-st:focus-visible)    label[for=i-st],
.layout:has(#i-gt:focus-visible)    label[for=i-gt]{ outline: 2px solid var(--glow); outline-offset: -3px; border-radius: 26px; }

.content{ min-width: 0; }

/* ---------- صحنه ---------- */
.panes{
  position: relative; isolation: isolate; margin: 18px 0 6px; touch-action: none;
  display: flex; justify-content: center;
  animation: stageRise 1.1s var(--out) both .1s;
}
.panes::before{
  content:''; position: absolute; left: 50%; bottom: -34px; width: 92%; height: 130px; z-index: -1;
  transform: translateX(-50%); pointer-events: none; filter: blur(22px);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--glow) 55%, transparent), transparent);
}
@keyframes stageRise{ from{ opacity:0; transform: translateY(44px) scale(.96); filter: blur(12px); } to{ opacity:1; transform: none; filter: none; } }
.panes > section{ display: none; width: 100%; animation: paneIn .6s var(--out) both; }
.app:has(#i-piano:checked) .pane-piano,
.app:has(#i-kb:checked)    .pane-kb,
.app:has(#i-hp:checked)    .pane-hp,
.app:has(#i-st:checked)    .pane-st,
.app:has(#i-gt:checked)    .pane-gt{ display: block; }
@keyframes paneIn{ from{ opacity:0; transform: translateY(26px) scale(.97); filter: blur(8px); } to{ opacity:1; transform: none; filter: none; } }

/* ---------- کلیدها ---------- */
.keys-single{ display: block; }
.keys-double{ display: none; flex-direction: column; gap: 10px; }
.keys-scroll{
  border-radius: 22px; overflow: hidden; padding: 9px 9px 12px; background: #07061a;
  box-shadow: 0 0 0 1px rgba(255,255,255,.07), 0 46px 80px -34px color-mix(in srgb, var(--glow) 70%, transparent);
}
/* اگر همه‌ی کلیدها در عرض صفحه جا نشوند، همان ردیف افقی می‌لغزد */
.keys-scroll.scrollable{ overflow-x: auto; touch-action: pan-x; scrollbar-width: thin; }
.keys-scroll.scrollable::-webkit-scrollbar{ height: 5px; }
.keys-scroll.scrollable::-webkit-scrollbar-thumb{ border-radius: 4px; background: color-mix(in srgb, var(--glow) 45%, transparent); }
.keys{
  direction: ltr; position: relative; display: flex; height: 200px; width: 100%;
  min-width: calc(var(--wc) * var(--kmin, 15px));
  -webkit-user-select: none; user-select: none;
}
.keys-single .keys{ height: min(200px, 26vw); }
@media (max-width: 700px){
  .keys-single{ display: none; }
  .keys-double{ display: flex; }
  .keys-double .keys{ height: 138px; --kmin: 30px; }
}
.key{ position: relative; }
.key .klabel{ display: none; position: absolute; bottom: 7px; left: 50%; transform: translateX(-50%); font-size: clamp(7px, .9vw, 11px); font-weight: 600; pointer-events: none; white-space: nowrap; }
.app.names .key .klabel{ display: block; }
.key.white{
  flex: 0 0 calc(100% / var(--wc)); width: calc(100% / var(--wc));
  background: linear-gradient(180deg, #fffaf0 0%, #f2e7d0 90%, #dccca8 100%);
  border-left: 1px solid rgba(20,16,50,.3); border-radius: 0 0 10px 10px;
  box-shadow: inset 0 -10px 14px rgba(120,90,30,.16);
  transform-origin: top; transition: background .15s, box-shadow .25s, transform .09s;
}
.key.white .klabel{ color: #5a4b8a; }
.key.white.on{
  background: linear-gradient(180deg, color-mix(in srgb, var(--glow) 45%, #fff), var(--glow));
  box-shadow: inset 0 3px 10px rgba(0,0,0,.25), 0 0 30px color-mix(in srgb, var(--glow) 75%, transparent);
  transform: scaleY(.985);
}
.key.white.on .klabel{ color: var(--night); }
.key.black{
  position: absolute; top: 0; left: calc(var(--wb) * (100% / var(--wc))); width: calc(100% / var(--wc) * .62); height: 61%;
  transform: translateX(-50%); z-index: 2; border-radius: 0 0 8px 8px;
  background: linear-gradient(180deg, #2c2a6b 0%, #14123d 55%, #07061a 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.16), 0 9px 14px rgba(0,0,0,.6);
  transition: background .15s, box-shadow .25s;
}
.key.black .klabel{ color: #d9d4ff; bottom: 7px; }
.key.black.on{
  background: linear-gradient(180deg, color-mix(in srgb, var(--glow) 85%, #000), color-mix(in srgb, var(--glow) 40%, #0b0a26));
  box-shadow: inset 0 2px 8px rgba(0,0,0,.4), 0 0 26px color-mix(in srgb, var(--glow) 70%, transparent);
}
.key.on::after{
  content:''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(circle at 50% 72%, rgba(255,255,255,.9), transparent 62%);
  animation: keyFlash .5s ease-out both;
}
@keyframes keyFlash{ from{ opacity: 1; transform: scale(.5); } to{ opacity: 0; transform: scale(1.35); } }
.key.target{ outline: 3px solid var(--saffron); outline-offset: -3px; animation: pulse 1s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ filter: brightness(1); } 50%{ filter: brightness(1.45); } }

.kb-kind{ display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.kb-kind label{
  padding: 8px 18px; border-radius: 999px; font-size: 13.5px; font-weight: 600; cursor: pointer;
  background: rgba(255,255,255,.08); color: var(--mist);
  transition: background .3s, color .3s, transform .25s var(--spring);
}
.kb-kind label:active{ transform: scale(.94); }
#s1:checked ~ .kb-kind label[for=s1], #s2:checked ~ .kb-kind label[for=s2],
#s3:checked ~ .kb-kind label[for=s3], #s4:checked ~ .kb-kind label[for=s4]{
  background: var(--glow); color: var(--night); box-shadow: 0 8px 24px -8px var(--glow);
}
#s1:focus-visible ~ .kb-kind label[for=s1], #s2:focus-visible ~ .kb-kind label[for=s2],
#s3:focus-visible ~ .kb-kind label[for=s3], #s4:focus-visible ~ .kb-kind label[for=s4]{ outline: 2px solid var(--ivory); outline-offset: 2px; }

/* ---------- هنگ‌درام ---------- */
@property --hp-hue{ syntax: '<number>'; inherits: true; initial-value: 30; }
.app:has(#i-hp:checked) .pane-hp{ display: flex; }
.pane-hp{ flex-direction: column; align-items: center; gap: 18px; padding: 6px 0 2px; }
.hp-color-btn{
  order: 2; padding: 10px 22px; border-radius: 999px; border: 0; cursor: pointer;
  background: rgba(255,255,255,.09); font-size: 14px; font-weight: 600;
  transition: transform .25s var(--spring), background .25s;
}
.hp-color-btn:hover{ background: rgba(255,255,255,.17); }
.hp-color-btn:active{ transform: scale(.92) rotate(-4deg); }
.handpan{
  --hp-hue: 30; position: relative; width: min(80vw, 400px); aspect-ratio: 1; border-radius: 50%;
  background:
    radial-gradient(circle at 38% 32%, hsla(0,0%,100%,.35), transparent 42%),
    radial-gradient(circle at 62% 70%, rgba(0,0,0,.5), transparent 55%),
    conic-gradient(from 220deg,
      hsl(var(--hp-hue) 55% 34%), hsl(calc(var(--hp-hue) + 35) 45% 16%),
      hsl(var(--hp-hue) 55% 34%), hsl(calc(var(--hp-hue) + 35) 45% 16%),
      hsl(var(--hp-hue) 55% 34%));
  box-shadow: 0 30px 50px -14px rgba(0,0,0,.7), 0 0 90px -14px color-mix(in srgb, var(--glow) 55%, transparent),
              inset 0 0 0 6px rgba(0,0,0,.3), inset 0 0 40px rgba(0,0,0,.45);
  touch-action: none; transition: background .5s ease;
}
.handpan::after{
  content:''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; opacity: .16; mix-blend-mode: color-dodge;
  background: conic-gradient(from 0deg, #ff5f6d, #ffc371, #f9f871, #6dffb8, #6de1ff, #a06dff, #ff6df0, #ff5f6d);
  animation: holo 16s linear infinite;
}
@keyframes holo{ to{ transform: rotate(360deg); } }
.hp-body{ position: absolute; inset: 0; border-radius: 50%; transition: background .3s; }
.hp-body.on{ background: radial-gradient(circle, rgba(255,255,255,.16), transparent 62%); }
.hp-note{
  position: absolute; width: 19%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); z-index: 2;
  background: radial-gradient(circle at 35% 30%, #d9d2b0, #5a5236 70%, #22200f);
  box-shadow: inset 0 4px 8px rgba(0,0,0,.55), inset 0 -2px 4px rgba(255,255,255,.15), 0 2px 3px rgba(0,0,0,.4);
  display: flex; align-items: center; justify-content: center;
  transition: transform .07s ease, filter .12s ease;
}
.hp-note .klabel{ display: none; font-size: 12px; font-weight: 600; color: #fff; pointer-events: none; }
.app.names .hp-note .klabel{ display: block; }
.hp-note.on{ filter: brightness(1.7); transform: translate(-50%, -50%) scale(.94); }
.hp-note.on::after{
  content:''; position: absolute; inset: -3px; border-radius: 50%; pointer-events: none;
  border: 2px solid var(--glow); animation: ringOut .55s ease-out both;
}
@keyframes ringOut{ from{ opacity: 1; transform: scale(1); } to{ opacity: 0; transform: scale(1.9); } }
.hp-note.target{ outline: 3px solid var(--saffron); outline-offset: 2px; animation: pulse 1s ease-in-out infinite; }
.hp-ding{ width: 27%; z-index: 3; }
.hp-ding.on{ transform: translate(-50%, -50%) scale(.95); }

/* ---------- سنتور ---------- */
.pane-st{ display: flex; justify-content: center; }
.santur-svg{
  width: 100%; max-width: 720px; height: auto; touch-action: none; overflow: visible;
  filter: drop-shadow(0 34px 44px rgba(0,0,0,.65)) drop-shadow(0 0 60px color-mix(in srgb, var(--glow) 26%, transparent));
}
.st-frame{ fill: url(#woodBody); stroke: #24160a; stroke-width: 2.5; }
.st-board{ fill: url(#woodBoard); stroke: rgba(0,0,0,.45); stroke-width: 1; }
.st-inlay{ fill: none; stroke: rgba(255,215,150,.35); stroke-width: 1.2; }
.st-rose{ fill: #1b0f06; stroke: rgba(255,215,150,.4); stroke-width: 1; }
.st-rose-in{ fill: none; stroke: rgba(255,215,150,.3); stroke-width: .8; }
.st-pinblock{ fill: url(#woodDark); stroke: rgba(0,0,0,.5); stroke-width: 1; }
.st-pin{ fill: #cbb98f; stroke: #3a2a14; stroke-width: .7; }

/* خرک‌ها */
.st-bridge{ fill: url(#woodDark); stroke: #150c05; stroke-width: 1; }
.st-bridge-top{ fill: #e8ddc2; stroke: #3a2a14; stroke-width: .6; }
.st-bridge-top.brass{ fill: #d9b25a; }

/* سیم‌ها: هر نت چهار سیم */
.st-course{ --wire: #efe9da; cursor: pointer; }
.st-course.brass{ --wire: #d8b264; }
.st-string{ stroke: var(--wire); stroke-width: 1; stroke-linecap: round; transition: stroke .12s, stroke-width .12s; }
.st-hit{ stroke: transparent; stroke-width: 15; cursor: pointer; }
.st-course.on .st-string{ stroke: var(--glow); stroke-width: 1.8; filter: drop-shadow(0 0 5px var(--glow)); }
.st-course.on .st-strings{ animation: stStrum .26s ease-out; }
@keyframes stStrum{ 0%{ transform: translateY(-1.4px); } 45%{ transform: translateY(1.4px); } 100%{ transform: translateY(0); } }
.st-course.target .st-string{ stroke: var(--saffron); stroke-width: 1.8; animation: pulse 1s ease-in-out infinite; }
.st-label{ display: none; fill: #f4ecd9; font-size: 9px; text-anchor: middle; font-family: var(--text); }
.app.names .st-label{ display: block; }
.st-mizrab{ fill: #e8ddc2; stroke: #3a2a14; stroke-width: .8; opacity: .9; }


/* ---------- گیتار ---------- */
.pane-gt{ display: flex; justify-content: center; }
.guitar-svg{
  width: 100%; max-width: 900px; height: auto; touch-action: none; overflow: visible;
  filter: drop-shadow(0 34px 44px rgba(0,0,0,.65)) drop-shadow(0 0 60px color-mix(in srgb, var(--glow) 24%, transparent));
}
.gt-body{ fill: url(#gtTop); stroke: #2a1608; stroke-width: 3; }
.gt-binding{ fill: none; stroke: #f0dcae; stroke-width: 2.4; opacity: .85; }
.gt-hole{ fill: #10080b; }
.gt-hole-in{ fill: url(#gtHole); }
.gt-rosette{ fill: none; stroke: #e6c98a; stroke-width: 2.2; opacity: .8; }
.gt-rosette-2{ fill: none; stroke: #b98c4a; stroke-width: 1.2; opacity: .7; }
.gt-pickguard{ fill: #1d0f08; opacity: .85; stroke: #000; stroke-width: 1; }
.gt-bridge{ fill: url(#gtDark); stroke: #150b04; stroke-width: 1; }
.gt-saddle{ fill: #efe3c4; }
.gt-pin{ fill: #e8ddc2; stroke: #3a2a14; stroke-width: .6; }
.gt-neck{ fill: url(#gtNeck); stroke: #221307; stroke-width: 1.5; }
.gt-fretboard{ fill: url(#gtBoard); stroke: #120a04; stroke-width: 1.5; }
.gt-fret{ stroke: #cfc9bd; stroke-width: 2.4; stroke-linecap: round; }
.gt-nut{ fill: #f2e9d2; }
.gt-inlay{ fill: #efe6cf; opacity: .85; }
.gt-head{ fill: url(#gtNeck); stroke: #221307; stroke-width: 1.5; }
.gt-tuner-post{ fill: #cbb98f; stroke: #3a2a14; stroke-width: .6; }
.gt-tuner-key{ fill: #e9e2d0; stroke: #3a2a14; stroke-width: .6; }

.gt-string{ stroke: #e7e3d6; stroke-linecap: round; transition: stroke .1s, stroke-width .1s; }
.gt-string.wound{ stroke: #cfa25e; }
.gt-string.on{ stroke: var(--glow); filter: drop-shadow(0 0 6px var(--glow)); animation: gtVibe .3s ease-out; }
@keyframes gtVibe{ 0%{ transform: translateY(-1.6px); } 40%{ transform: translateY(1.6px); } 70%{ transform: translateY(-.8px); } 100%{ transform: translateY(0); } }

.gt-hit{ fill: transparent; cursor: pointer; }
.gt-hit.on{ fill: color-mix(in srgb, var(--glow) 34%, transparent); }
.gt-hit.target{ fill: color-mix(in srgb, var(--saffron) 35%, transparent); stroke: var(--saffron); stroke-width: 1.6; animation: pulse 1s ease-in-out infinite; }
.gt-open-zone{ fill: transparent; cursor: pointer; }
.gt-open-zone.target{ fill: color-mix(in srgb, var(--saffron) 22%, transparent); }
.gt-label{ display: none; fill: #f4ecd9; font-size: 9px; text-anchor: middle; font-family: var(--text); pointer-events: none; }
.app.names .gt-label{ display: block; }
.gt-fretnum{ fill: rgba(246,239,224,.5); font-size: 10px; text-anchor: middle; font-family: var(--text); }

/* ---------- گزینه‌ها: دکمه‌های روشن/خاموش ---------- */
.options{ display: flex; justify-content: center; margin: 34px 0 6px; }
.options-inner{ display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.options label, .metro .play-pill{
  position: relative; display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  -webkit-user-select: none; user-select: none;
}
.options label{
  padding: 10px 18px; border-radius: 999px; font-size: 13.5px; font-weight: 500;
  background: rgba(255,255,255,.07); color: var(--mist);
  transition: background .3s, color .3s, transform .25s var(--spring);
}
.options label input{ position: absolute; opacity: 0; pointer-events: none; }
.options label::before{
  content:''; width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.28);
  transition: background .3s, box-shadow .3s, transform .3s var(--spring);
}
.options label:active{ transform: scale(.93); }
.options label:has(input:checked){ background: color-mix(in srgb, var(--glow) 24%, transparent); color: var(--ivory); }
.options label:has(input:checked)::before{ background: var(--glow); box-shadow: 0 0 12px var(--glow); transform: scale(1.3); }
.options label:has(input:focus-visible){ outline: 2px solid var(--glow); outline-offset: 2px; }

/* ---------- تب پایین ---------- */
.lower-tabs{ display: flex; justify-content: center; gap: 6px; margin: 44px 0 26px; }
.lower-tabs label{
  padding: 11px 26px; border-radius: 999px; cursor: pointer; font-size: 15px; font-weight: 600; color: var(--mist);
  transition: background .3s, color .3s, transform .25s var(--spring);
}
.lower-tabs label:active{ transform: scale(.94); }
.content:has(#tab-met:checked)  label[for=tab-met],
.content:has(#tab-prac:checked) label[for=tab-prac]{ background: rgba(255,255,255,.12); color: var(--ivory); }
.content:has(#tab-met:focus-visible)  label[for=tab-met],
.content:has(#tab-prac:focus-visible) label[for=tab-prac]{ outline: 2px solid var(--glow); outline-offset: 2px; }

.panel-met, .panel-prac{ display: none; }
.content:has(#tab-met:checked)  .panel-met { display: grid; animation: panelIn .55s var(--out) both; }
.content:has(#tab-prac:checked) .panel-prac{ display: block; animation: panelIn .55s var(--out) both; }

.card{ position: relative; margin-bottom: 44px; }
.card-title{ margin: 0 0 18px; font-family: var(--display); font-weight: 400; font-size: 27px; }

/* ---------- مترونوم ---------- */
.panel-met{ grid-template-columns: 1fr; gap: 6px 40px; align-items: center; justify-items: center; }
.panel-met .card-title{ justify-self: start; }
@media (min-width: 720px){
  .panel-met{ grid-template-columns: auto 1fr; justify-items: stretch; }
  .panel-met .card-title{ grid-column: 1 / -1; }
  .panel-met .metro-visual{ justify-self: center; }
}
.metro-visual{ display: flex; justify-content: center; margin-bottom: 6px; filter: drop-shadow(0 18px 24px rgba(0,0,0,.5)) drop-shadow(0 0 26px color-mix(in srgb, var(--glow) 40%, transparent)); }
.metro-body{
  position: relative; width: 140px; height: 136px;
  clip-path: polygon(38% 0%, 62% 0%, 100% 100%, 0% 100%);
  background: linear-gradient(180deg, var(--glow), var(--lapis-2) 85%);
  transition: background .9s;
}
.metro-body::before{ content:''; position: absolute; inset: 6px 6px 4px; clip-path: polygon(40% 0%, 60% 0%, 96% 100%, 4% 100%); border: 1px solid rgba(255,255,255,.28); }
.metro-visual .rod{
  display: block; position: absolute; z-index: 2; bottom: 6px; left: 50%; margin-left: -2px;
  width: 4px; height: 112px; border-radius: 4px; background: linear-gradient(#fff, #e7dcc4);
  transform-origin: bottom center; transform: rotate(0deg);
}
.metro-visual .rod::after{ content:''; position: absolute; top: 32px; left: 50%; transform: translateX(-50%); width: 18px; height: 11px; border-radius: 3px; background: var(--saffron); box-shadow: 0 0 14px rgba(255,185,59,.8); }
.metro-visual .rod::before{ content:''; position: absolute; top: -5px; left: 50%; transform: translateX(-50%); width: 10px; height: 10px; border-radius: 50%; background: #fff; }
.metro-visual .rod.playing{ animation: swing linear infinite alternate; }
@keyframes swing{ from{ transform: rotate(-22deg); } to{ transform: rotate(22deg); } }

.metro{ width: 100%; display: flex; align-items: center; justify-content: center; gap: 14px 16px; flex-wrap: wrap; }
.metro .rnd{
  order: 1; width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer; font-size: 24px; line-height: 1;
  background: rgba(255,255,255,.1); color: var(--ivory);
  transition: transform .25s var(--spring), background .25s;
}
.metro .rnd:hover{ background: rgba(255,255,255,.18); }
.metro .rnd:active{ transform: scale(.85); }
.metro .rnd:last-of-type{ order: 3; }
.metro output{ order: 2; display: flex; flex-direction: column; align-items: center; min-width: 120px; }
.metro output span{ font-family: var(--display); font-size: 64px; line-height: 1; font-variant-numeric: tabular-nums; text-shadow: 0 0 30px color-mix(in srgb, var(--glow) 60%, transparent); }
.metro output small{ color: var(--mist); font-size: 12.5px; }
.metro input[type=range]{
  order: 4; flex: 1 1 100%; width: 100%; height: 30px; margin: 4px 0; background: transparent;
  -webkit-appearance: none; appearance: none; cursor: pointer;
}
.metro input[type=range]::-webkit-slider-runnable-track{ height: 4px; border-radius: 4px; background: rgba(255,255,255,.16); }
.metro input[type=range]::-moz-range-track{ height: 4px; border-radius: 4px; background: rgba(255,255,255,.16); }
.metro input[type=range]::-webkit-slider-thumb{
  -webkit-appearance: none; width: 24px; height: 24px; margin-top: -10px; border-radius: 50%; border: 0; background: var(--glow);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--glow) 25%, transparent), 0 0 22px var(--glow); transition: transform .2s var(--spring);
}
.metro input[type=range]::-moz-range-thumb{
  width: 24px; height: 24px; border-radius: 50%; border: 0; background: var(--glow);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--glow) 25%, transparent), 0 0 22px var(--glow);
}
.metro input[type=range]:active::-webkit-slider-thumb{ transform: scale(1.25); }
.metro select{
  order: 5; padding: 12px 22px; border: 0; border-radius: 999px; cursor: pointer; font-family: inherit; font-size: 15px; font-weight: 600;
  background: rgba(255,255,255,.1); color: var(--ivory); -webkit-appearance: none; appearance: none; text-align: center;
}
.metro select option{ background: #1c1a52; color: var(--ivory); }
.metro .play-pill{
  order: 6; padding: 13px 30px; border-radius: 999px; font-size: 15px; font-weight: 700; color: var(--night);
  background: linear-gradient(135deg, var(--glow), color-mix(in srgb, var(--glow) 45%, #6a5cff));
  box-shadow: 0 14px 34px -10px var(--glow);
  transition: transform .25s var(--spring), box-shadow .3s, background .3s;
}
.metro .play-pill input{ position: absolute; opacity: 0; pointer-events: none; }
.metro .play-pill:hover{ transform: translateY(-2px); }
.metro .play-pill:active{ transform: scale(.94); }
.metro .play-pill .on-txt{ display: none; }
.metro .play-pill:has(input:checked){ background: linear-gradient(135deg, var(--rose), #ff8a4c); color: #fff; box-shadow: 0 14px 34px -10px var(--rose); }
.metro .play-pill:has(input:checked) .on-txt{ display: inline; }
.metro .play-pill:has(input:checked) .off-txt{ display: none; }
.metro .play-pill:has(input:focus-visible){ outline: 2px solid var(--ivory); outline-offset: 3px; }

/* ---------- تمرین ---------- */
.practice .now{ font-size: 15px; color: var(--mist); }
.practice .now b{ color: var(--ivory); font-weight: 700; }
.practice .pt{ margin-inline-start: 6px; font-size: 13px; font-variant-numeric: tabular-nums; }
.practice .bar{ height: 4px; border-radius: 4px; margin: 14px 0 20px; background: rgba(255,255,255,.12); overflow: hidden; }
.practice .bar i{ display: block; height: 100%; width: 0%; border-radius: 4px; background: linear-gradient(90deg, var(--glow), var(--saffron)); box-shadow: 0 0 14px var(--glow); transition: width .3s; }
.book-btn{
  display: inline-block; padding: 11px 22px; border-radius: 999px; cursor: pointer; font-size: 14px; font-weight: 600;
  background: rgba(255,255,255,.1); transition: background .3s, transform .25s var(--spring);
}
.book-btn:hover{ background: rgba(255,255,255,.18); }
.book-btn:active{ transform: scale(.94); }
.content:has(#book-toggle:checked) .book-btn{ background: var(--glow); color: var(--night); }
.book{ display: none; margin-top: 14px; }
.content:has(#book-toggle:checked) .book{ display: block; animation: panelIn .45s var(--out) both; }
.plist{ list-style: none; margin: 0; padding: 0; display: none; }
.layout:has(#i-piano:checked) .plist.list-piano,
.layout:has(#i-kb:checked)    .plist.list-keyboard,
.layout:has(#i-hp:checked)    .plist.list-handpan,
.layout:has(#i-st:checked)    .plist.list-santur,
.layout:has(#i-gt:checked)    .plist.list-guitar{ display: block; }
.plist li button{
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: right;
  padding: 15px 4px; border: 0; border-bottom: 1px solid rgba(246,239,224,.09); background: transparent; cursor: pointer;
  color: var(--ivory); font-size: 15px; transition: padding .3s var(--out), color .3s, background .3s;
}
.plist li button:hover{ padding-inline-start: 18px; color: var(--glow); background: linear-gradient(90deg, transparent, rgba(255,255,255,.04)); }
.plist .pn{ font-weight: 600; }
.plist .pc{ color: var(--mist); font-size: 12.5px; }

/* ---------- ضبط ---------- */
.rec{ display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap; }
.rec .card-title{ flex-basis: 100%; margin-bottom: 4px; }
.rec .rbtn{
  width: 88px; height: 88px; border-radius: 50%; border: 0; cursor: pointer; color: #fff; font-size: 14.5px; font-weight: 700;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: radial-gradient(circle at 35% 28%, #ff9db3, var(--rose) 58%, #b81d47);
  box-shadow: 0 16px 34px -8px rgba(255,79,123,.65);
  transition: transform .25s var(--spring);
}
.rec .rbtn::before{ content:''; width: 12px; height: 12px; border-radius: 50%; background: #fff; transition: border-radius .3s, transform .3s var(--spring); }
.rec .rbtn:active{ transform: scale(.9); }
.rec .rbtn.on{ animation: recPulse 1.4s ease-out infinite; }
.rec .rbtn.on::before{ border-radius: 3px; transform: scale(.9); }
@keyframes recPulse{
  0%  { box-shadow: 0 0 0 0 rgba(255,79,123,.6), 0 16px 34px -8px rgba(255,79,123,.65); }
  100%{ box-shadow: 0 0 0 30px rgba(255,79,123,0), 0 16px 34px -8px rgba(255,79,123,.65); }
}
.rec .tm{ min-width: 110px; font-family: var(--display); font-size: 42px; line-height: 1; font-variant-numeric: tabular-nums; }
.rec .rb2{
  padding: 12px 22px; border: 0; border-radius: 999px; cursor: pointer; font-size: 14px; font-weight: 600;
  background: rgba(255,255,255,.1); transition: background .3s, transform .25s var(--spring);
}
.rec .rb2:hover{ background: rgba(255,255,255,.18); }
.rec .rb2:active{ transform: scale(.93); }

.takes{ margin-top: 30px; }
.takes h3{ margin: 0 0 6px; font-size: 14px; font-weight: 600; color: var(--mist); }
.takes ul{ list-style: none; margin: 0; padding: 0; }
.takes li{ display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 13px 2px; border-bottom: 1px solid rgba(246,239,224,.09); font-size: 14px; animation: panelIn .4s var(--out) both; }
.takes li button{
  border: 0; border-radius: 999px; padding: 7px 15px; cursor: pointer; font-size: 12.5px; font-weight: 600;
  background: rgba(255,255,255,.1); margin-inline-start: 6px; transition: background .3s, transform .25s var(--spring);
}
.takes li button:hover{ background: rgba(255,255,255,.2); }
.takes li button:active{ transform: scale(.9); }
.takes .empty{ color: var(--mist); font-size: 14px; margin: 10px 0 0; }

/* ---------- افکت لمس (fx.js) ---------- */
.fx-layer{ position: fixed; inset: 0; z-index: 60; pointer-events: none; overflow: hidden; color: var(--glow); }
.fx-ring{
  position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border: 2px solid currentColor; border-radius: 50%;
  animation: fxRing .75s ease-out forwards;
}
.fx-note{
  position: absolute; font-size: 22px; line-height: 1; margin: -11px 0 0 -11px; text-shadow: 0 0 14px currentColor;
  animation: fxNote 1.1s ease-out forwards;
}
@keyframes fxRing{ from{ transform: scale(.3); opacity: .95; } to{ transform: scale(5); opacity: 0; } }
@keyframes fxNote{
  0%  { transform: translate(0,0) rotate(0) scale(.6); opacity: 0; }
  15% { opacity: 1; }
  100%{ transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(1.1); opacity: 0; }
}

/* ---------- موبایل ---------- */
@media (max-width: 640px){
  .app{ padding-inline: 14px; }
  .stage-head{ margin-top: 18px; }
  .stage-hint{ max-width: none; }
  .keys{ height: 190px; }
  .metro-body{ width: 120px; height: 118px; }
  .metro-visual .rod{ height: 96px; }
}

/* ---------- کاهش حرکت ---------- */
@media (prefers-reduced-motion: reduce){
  *:not(.rod), *:not(.rod)::before, *:not(.rod)::after{
    animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important;
  }
  .fx-layer{ display: none; }
}