/* ===== Hybrid 2D + 3D · MacBook · build 606 =====
   Một lớp CSS gỡ được: xoá khối <style id="coc-hybrid"> là về đúng như cũ.
   Ba tầng, để mắt biết ngay cái gì để đọc, cái gì để bấm, cái gì đang kêu:
   1. Đọc (2D): thẻ, chữ, tiêu đề, logo giữ phẳng như bản gốc. Không đụng tới.
   2. Bấm (3D nhẹ): nút, chip, tab, thanh trượt nổi 1 lớp; đang chọn thì lún xuống như phím đã khoá.
   3. Đèn (3D rõ): phím piano đang sáng lún xuống và phát sáng; chấm guitar thành hạt tròn bóng.
   Chỉ dùng màu sẵn có của app (cùng độ trong suốt). Không đổi kích thước, lề hay vị trí.
   Chỉ áp cho MacBook (body không có .coc-compact). iPad và iPhone làm ở bước sau. */
body:not(.coc-compact){
  --hy-hi:rgba(255,248,227,.75);
  --hy-edge:rgba(32,56,62,.18);
  --hy-press:rgba(32,56,62,.24);
  --hy-lift:0 1px 1px rgba(79,51,29,.12),0 2px 4px rgba(79,51,29,.1);
  --hy-lift-hover:0 2px 3px rgba(79,51,29,.12),0 5px 10px rgba(79,51,29,.12);
}
body.dark:not(.coc-compact){
  --hy-lift:0 1px 1px rgba(0,0,0,.18),0 2px 4px rgba(0,0,0,.14);
  --hy-lift-hover:0 2px 3px rgba(0,0,0,.18),0 5px 10px rgba(0,0,0,.18);
}

/* ===== Tầng 2 · Bấm: phím nổi một lớp ===== */
body:not(.coc-compact) :is(button.action,button.chip):not(:disabled):not(.sub-tab){
  box-shadow:inset 0 1px 0 var(--hy-hi),inset 0 -2px 0 var(--hy-edge),var(--hy-lift);
}
body:not(.coc-compact) :is(button.action,button.chip):not(:disabled):not(.sub-tab):hover{
  box-shadow:inset 0 1px 0 var(--hy-hi),inset 0 -2px 0 var(--hy-edge),var(--hy-lift-hover);
}
body:not(.coc-compact) :is(button.action.primary,button.chip.lang.active):not(:disabled){
  box-shadow:inset 0 1px 0 rgba(255,248,227,.35),inset 0 -2px 0 var(--peach-deep),var(--hy-lift);
}
/* trên khung NOW nền xanh đêm: viền sáng dịu hơn */
body:not(.coc-compact) .current-chord :is(button.action,button.chip):not(:disabled):not(.active):not([aria-pressed="true"]){
  box-shadow:inset 0 1px 0 rgba(255,248,227,.16),inset 0 -2px 0 rgba(0,0,0,.3),0 2px 4px rgba(0,0,0,.22);
}
body:not(.coc-compact) .current-chord button.action.primary:not(:disabled){
  box-shadow:inset 0 1px 0 rgba(255,248,227,.3),inset 0 -2px 0 var(--peach-deep),0 2px 4px rgba(0,0,0,.22);
}
/* bấm xuống */
body:not(.coc-compact) :is(button.action,button.chip):not(:disabled):not(.sub-tab):active{
  transform:translateY(1px);
  box-shadow:inset 0 2px 3px var(--hy-press);
}
/* đang chọn: lún xuống */
body:not(.coc-compact) :is(button.chip.active,button.chip[aria-pressed="true"],button.action[aria-pressed="true"]):not(.sub-tab):not(.lang){
  transform:none;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.3),inset 0 -1px 0 rgba(255,248,227,.12);
}
body:not(.coc-compact) :is(button.action,button.chip):disabled{box-shadow:none}

/* Piano / Guitar: nút đang chọn nổi trong rãnh */
body:not(.coc-compact) .main-tabs{box-shadow:inset 0 2px 5px rgba(32,56,62,.18)}
body.dark:not(.coc-compact) .main-tabs{box-shadow:inset 0 2px 5px rgba(0,0,0,.28)}
body:not(.coc-compact) .main-tab.active{box-shadow:inset 0 1px 0 rgba(255,248,227,.35),inset 0 -2px 0 var(--peach-deep),0 3px 8px rgba(0,0,0,.2),0 6px 18px rgba(216,90,67,.3)}

/* Ô nhập, ô chọn: lõm rất nhẹ để biết là chỗ gõ / chọn */
body:not(.coc-compact) :is(.quick-finder-input,input[type=text],input[type=search],select){box-shadow:inset 0 2px 3px rgba(32,56,62,.12)}
body:not(.coc-compact) .quick-finder-input:focus{box-shadow:inset 4px 0 0 var(--peach),inset 0 2px 3px rgba(32,56,62,.12)}

/* Thanh trượt: rãnh lõm + núm ngà nổi, giống nhau trên Safari, Chrome, Firefox */
body:not(.coc-compact) input[type=range]{-webkit-appearance:none;appearance:none;height:20px;background:transparent;cursor:pointer}
body:not(.coc-compact) input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:var(--panel-2);box-shadow:inset 0 1px 2px rgba(32,56,62,.35),0 1px 0 rgba(255,248,227,.7)}
body:not(.coc-compact) input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;margin-top:-6px;border-radius:50%;border:1px solid var(--blue-deep);background:radial-gradient(circle at 35% 30%,var(--ivory) 0 30%,var(--panel) 75%);box-shadow:inset 0 -2px 0 rgba(32,56,62,.18),0 2px 4px rgba(0,0,0,.28)}
body:not(.coc-compact) input[type=range]::-moz-range-track{height:6px;border-radius:3px;background:var(--panel-2);box-shadow:inset 0 1px 2px rgba(32,56,62,.35)}
body:not(.coc-compact) input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;border:1px solid var(--blue-deep);background:radial-gradient(circle at 35% 30%,var(--ivory) 0 30%,var(--panel) 75%);box-shadow:inset 0 -2px 0 rgba(32,56,62,.18),0 2px 4px rgba(0,0,0,.28)}
body:not(.coc-compact) input[type=range]:focus-visible{outline:2px solid var(--peach);outline-offset:2px}

/* Ô đã gán trong lưới nổi một lớp; ô trống giữ phẳng như cũ */
body:not(.coc-compact) .pad.filled{box-shadow:inset 0 1px 0 var(--hy-hi),inset 0 -2px 0 var(--hy-edge),var(--hy-lift)}

/* ===== Tầng 3 · Đèn piano: phím sáng lún xuống, đèn hắt từ trong phím ===== */
/* Phím trắng đang sáng (thế bấm / nốt đang phát): mép trên chìm dưới nắp đàn, thân phím sáng dần xuống dưới */
body:not(.coc-compact) :is(#keyboard,#scaleKeyboard) .key.white:is(.active-lh,.active-rh,.playing-lh,.playing-rh){
  background:
    linear-gradient(180deg,rgba(0,0,0,.32) 0,rgba(0,0,0,0) 16px),
    linear-gradient(90deg,rgba(0,0,0,.16) 0,rgba(0,0,0,0) 3px,rgba(0,0,0,0) calc(100% - 3px),rgba(0,0,0,.16) 100%),
    linear-gradient(180deg,var(--sky-deep) 0%,var(--sky) 45%,var(--sky) 82%,rgba(255,248,227,.22) 100%),
    var(--sky);
  box-shadow:inset 0 -5px 0 rgba(0,0,0,.18),0 0 10px var(--sky-soft);
}
body:not(.coc-compact) :is(#keyboard,#scaleKeyboard) .key.black:is(.active-lh,.active-rh,.playing-lh,.playing-rh){
  background:
    linear-gradient(90deg,rgba(255,248,227,.18) 0,rgba(255,248,227,0) 40%),
    linear-gradient(180deg,var(--sky-deep) 0%,var(--sky) 70%,var(--sky-deep) 100%);
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.35),0 0 10px var(--sky-soft);
}
/* Nốt đang phát sáng hơn thế bấm một bậc */
body:not(.coc-compact) :is(#keyboard,#scaleKeyboard) .key:is(.playing-lh,.playing-rh){box-shadow:inset 0 -5px 0 rgba(0,0,0,.18),0 0 16px var(--sky),0 0 4px var(--sky)}
/* Gam (vàng) và nốt gam đang chạy (đỏ): cùng cách đổ khối */
body:not(.coc-compact) :is(#keyboard,#scaleKeyboard) .key.white.active-sc{
  background:linear-gradient(180deg,rgba(0,0,0,.28) 0,rgba(0,0,0,0) 16px),linear-gradient(180deg,var(--teal-deep) 0%,var(--teal) 45%,var(--teal) 85%,rgba(255,248,227,.25) 100%);
  box-shadow:inset 0 -5px 0 rgba(0,0,0,.15),0 0 10px var(--teal-soft);
}
body:not(.coc-compact) :is(#keyboard,#scaleKeyboard) .key.black.active-sc{background:linear-gradient(90deg,rgba(255,248,227,.18) 0,rgba(255,248,227,0) 40%),linear-gradient(180deg,var(--teal-deep),var(--teal) 70%,var(--teal-deep));box-shadow:inset 0 -4px 0 rgba(0,0,0,.35),0 0 10px var(--teal-soft)}
body:not(.coc-compact) :is(#keyboard,#scaleKeyboard) .key.white.playing-sc{
  background:linear-gradient(180deg,rgba(0,0,0,.28) 0,rgba(0,0,0,0) 16px),linear-gradient(180deg,var(--peach-deep) 0%,var(--coral) 45%,var(--coral) 85%,rgba(255,248,227,.25) 100%);
  box-shadow:inset 0 -5px 0 rgba(0,0,0,.15),0 0 14px rgba(232,80,63,.55);
}
body:not(.coc-compact) :is(#keyboard,#scaleKeyboard) .key.black.playing-sc{background:linear-gradient(90deg,rgba(255,248,227,.18) 0,rgba(255,248,227,0) 40%),linear-gradient(180deg,var(--peach-deep),var(--coral) 70%,var(--peach-deep));box-shadow:inset 0 -4px 0 rgba(0,0,0,.35),0 0 14px rgba(232,80,63,.55)}
/* Nốt gốc: hạt kim cương đỏ có mặt sáng, nổi trên phím */
body:not(.coc-compact) :is(#keyboard,#scaleKeyboard) .key.root::after{
  background:linear-gradient(135deg,rgba(255,248,227,.75) 0,rgba(255,248,227,0) 45%),var(--coral);
  box-shadow:1px 1px 0 var(--peach-deep),0 0 6px rgba(232,80,63,.7),2px 2px 3px rgba(0,0,0,.3);
}

/* ===== Tầng 3 · Đèn guitar: chấm thành hạt tròn bóng ===== */
body:not(.coc-compact) :is(#fretboard,#jazzFretboard,#guitarScaleFretboard,.fretboard) .fb-dot:is(.root,.tone){
  background-image:radial-gradient(circle at 34% 28%,rgba(255,248,227,.7) 0,rgba(255,248,227,.18) 28%,rgba(255,248,227,0) 52%),radial-gradient(circle at 50% 120%,rgba(0,0,0,.35) 0,rgba(0,0,0,0) 60%);
  box-shadow:inset 0 -2px 2px rgba(0,0,0,.28),0 2px 3px rgba(0,0,0,.35),0 0 0 1px rgba(0,0,0,.12);
}
body:not(.coc-compact) :is(#fretboard,#jazzFretboard,#guitarScaleFretboard,.fretboard) .fb-dot.guitar-note-playing{
  background-image:radial-gradient(circle at 34% 28%,rgba(255,248,227,.8) 0,rgba(255,248,227,.2) 28%,rgba(255,248,227,0) 52%);
  box-shadow:0 0 0 3px #fff4d3,0 0 16px #b5321b,0 2px 3px rgba(0,0,0,.35);
}
body:not(.coc-compact) .guitar-solo-playing :is(#fretboard,#jazzFretboard,#guitarScaleFretboard,.fretboard) .fb-dot{box-shadow:0 0 0 3px #fff4d3,inset 0 -2px 2px rgba(0,0,0,.28),0 2px 3px rgba(0,0,0,.35)}
body:not(.coc-compact) .fb-barre{background-image:linear-gradient(90deg,rgba(255,248,227,.35),rgba(255,248,227,0) 60%);box-shadow:inset 0 -2px 2px rgba(0,0,0,.25),0 2px 3px rgba(0,0,0,.3)}

@media (prefers-reduced-motion:reduce){
  body:not(.coc-compact) :is(button.action,button.chip):is(:hover,:active){transform:none}
}
@media print{
  body:not(.coc-compact) :is(.pad,button.action,button.chip,.key,.fb-dot){box-shadow:none}
}