/* Theme switch */
#skinSwitch{
  display:inline-flex;align-items:center;justify-content:center;
  gap:8px;padding:6px 10px;border:1px solid #416473;
  border-radius:6px;background:linear-gradient(135deg,#172c39,#070e17);
  color:#b9e3ed;font:700 9px/1.3 monospace;letter-spacing:.1em;
}
#skinSwitch input{
  appearance:none!important;-webkit-appearance:none!important;
  position:relative;width:44px!important;min-width:44px;
  height:22px!important;margin:0;padding:0!important;
  border:1px solid #5a8998!important;border-radius:12px!important;
  background:#07131e!important;cursor:pointer;touch-action:manipulation;
}
#skinSwitch input::before{
  content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;
  border-radius:50%;background:#81e5f4;box-shadow:0 0 8px #66ddec88;
  transition:transform .2s,background .2s;
}
#skinSwitch input:checked::before{
  transform:translateX(22px);background:#fff5ce;
  box-shadow:0 0 9px #cfad5b88;
}
#skinSwitch input:focus-visible{outline:2px solid #19899a;outline-offset:3px}

/* Important layer overrides previously accumulated theme rules. */
@layer neurodeckSkin {
  html[data-skin="white"]{
    color-scheme:light!important;
    --bg:#edf2f0;--panel:#fffef8;--panel-2:#edf6f5;
    --text:#233c46;--muted:#526b72;
    --cyan:#12788a;--cyan-dim:#427f89;--accent:#12788a;
    --line:#c5d6d5;--line-2:#9bbdbf;--danger:#bf294b;
    --nd-ice:#233c46;--nd-cyan:#12788a;--nd-muted:#526b72;
    --shadow:0 12px 30px #38585d18;
  }
  html[data-skin="white"] body{
    color:#233c46!important;
    background:
      radial-gradient(ellipse at 10% 0%,#fff9df,transparent 55%),
      radial-gradient(ellipse at 95% 50%,#d8f5f1,transparent 60%),
      #edf2f0!important;
  }
  html[data-skin="white"] :is(
    .panel,.toolbar,#status,.trackhead,.devicebar,.popup,dialog,
    #ctxMenu,#ctxSub,#genProgressWrapper,#speedControl,#skinSwitch
  ){
    color:#294954!important;
    background:linear-gradient(135deg,#fffef8,#e6f1f0)!important;
    border-color:#b5caca!important;
    box-shadow:inset 0 1px 0 #fff,0 8px 24px #44626815!important;
    text-shadow:none!important;
  }
  html[data-skin="white"] :is(button,.button,.tile-btn,.tile-ctrl){
    color:#254652!important;
    background:linear-gradient(180deg,#fffffc,#deeceb)!important;
    border-color:#9cbabe!important;
    box-shadow:inset 0 1px 0 #fff,0 2px 8px #34596318!important;
    text-shadow:none!important;
  }
  html[data-skin="white"] :is(button,.button,.tile-btn):hover{
    color:#155c6b!important;
    background:linear-gradient(180deg,#fffdf0,#d6efeb)!important;
    border-color:#ad9254!important;
    box-shadow:inset 0 0 12px #fff9d3,0 0 12px #bca45c33!important;
  }
  html[data-skin="white"] :is(
    input:not([type="range"]):not([type="checkbox"]),select
  ){
    background:#f9fcfa!important;color:#254652!important;
    border-color:#9ebdbf!important;box-shadow:inset 0 1px 4px #34596312!important;
  }
  html[data-skin="white"] :is(h2,h2 span,th,#genPhaseLabel,#genPercentLabel){
    color:#406b76!important;text-shadow:none!important;border-color:#c2d3cd!important;
  }
  html[data-skin="white"] :is(td,td span,.panel label,.tick,.clipbar){
    color:#345965!important;text-shadow:none!important;
  }
  html[data-skin="white"] :is(td,th,tr){border-color:#c6d9d6!important}
  html[data-skin="white"] :is(.scroll,.device){
    background:#edf4f1!important;border-color:#acc7c8!important;
    box-shadow:0 10px 28px #3459631c!important;
  }
  html[data-skin="white"] .lane{
    background:
      repeating-linear-gradient(90deg,#56898e18 0 1px,transparent 1px 64px),
      linear-gradient(#f8fcf9,#e8f1ed)!important;
  }
  html[data-skin="white"] .ruler{
    background:linear-gradient(#fffffa,#e0eeeb)!important;
    border-color:#b6ceca!important;
  }
  html[data-skin="white"] .clip{
    background:linear-gradient(#d9eeea,#c0ddd8)!important;
    border-color:#548e94!important;
  }
  html[data-skin="white"] .clipbar{background:#f8fff9b8!important}
  html[data-skin="white"] :is(.clip:hover,.clip.clip-selected){
    border-color:#98732e!important;
    box-shadow:0 0 14px #c6a65388,inset 0 0 12px #fffae399!important;
  }
  html[data-skin="white"] .selection{
    background:#16a4aa22!important;border-color:#13858f!important;
  }
  html[data-skin="white"] .cursor{
    background:#956d20!important;box-shadow:0 0 7px #b79b50!important;
  }
  html[data-skin="white"] #activeUsersCount{
    background:#fff9e7!important;color:#745c29!important;border-color:#c7b67d!important;
  }
  html[data-skin="white"] #speedKnob{
    background:repeating-conic-gradient(#aec4c9 0deg 10deg,#edf5f3 10deg 20deg)!important;
    border-color:#839fa8!important;box-shadow:inset 0 0 0 5px #dae9e7!important;
  }
  html[data-skin="white"] #speedKnob::after{
    background:#176d7b!important;box-shadow:0 0 5px #218d9955!important;
  }
  html[data-skin="white"] .rec-btn.recording{
    color:#9e1e3d!important;border-color:#c12b4e!important;
    box-shadow:0 0 15px #d13b5b55!important;
  }
  html[data-skin="white"] *{scrollbar-color:#91b5b7 #edf4ef!important}
}

@layer neurodeckSkin {
  html[data-skin="white"]{
    --bg:#cec9bd;--panel:#ded9cd;--panel-2:#c9c5b9;
    --text:#343d3c;--muted:#626b66;
    --cyan:#406d70;--accent:#406d70;
    --line:#aaa99b;--line-2:#929e98;
  }
  html[data-skin="white"] body{
    background:linear-gradient(135deg,#dad5c9,#c4c2b7)!important;
    color:#343d3c!important;
  }
  html[data-skin="white"] :is(
    .panel,.toolbar,#status,.trackhead,.devicebar,.popup,dialog,
    #ctxMenu,#ctxSub,#genProgressWrapper,#speedControl,#skinSwitch
  ){
    background:linear-gradient(145deg,#e0dbcf,#c8c5b9)!important;
    border-color:#a5aa9e!important;
    box-shadow:inset 0 1px 0 #eee7d966,inset 0 -2px 5px #595c4920,
      0 10px 24px #303c3430!important;
    color:#364943!important;text-shadow:none!important;
  }
  html[data-skin="white"] :is(button,.button,.tile-btn,.tile-ctrl){
    background:linear-gradient(180deg,#e1dccf,#babfb2)!important;
    border-color:#909e95!important;color:#344b46!important;
    box-shadow:inset 0 1px 0 #ece4d480,inset 0 -2px 4px #48594a26,
      0 3px 7px #303e3433!important;
  }
  html[data-skin="white"] :is(button,.button,.tile-btn):hover{
    background:linear-gradient(180deg,#e8dfcd,#c4cebf)!important;
    border-color:#738f86!important;color:#244c49!important;
    box-shadow:inset 0 1px 0 #ede5d477,0 4px 10px #344a3f33!important;
  }
  html[data-skin="white"] :is(
    input:not([type="range"]):not([type="checkbox"]),select
  ){
    background:#d2cfc2!important;color:#344840!important;
    border-color:#98a297!important;
    box-shadow:inset 0 2px 5px #4c59422b!important;
  }
  html[data-skin="white"] :is(.scroll,.device){
    background:#bfc4b8!important;border-color:#929f96!important;
    box-shadow:inset 0 2px 8px #35493622,0 9px 22px #303e3433!important;
  }
  html[data-skin="white"] .lane{
    background:
      repeating-linear-gradient(90deg,#536c6218 0 1px,transparent 1px 64px),
      linear-gradient(#d1d0c2,#bfc5b7)!important;
  }
  html[data-skin="white"] :is(.ruler,.clipbar){
    background:linear-gradient(#d9d5c7,#bdc6b6)!important;
    border-color:#97a395!important;
  }
  html[data-skin="white"] .clip{
    background:linear-gradient(#b7cbbd,#93afa3)!important;
    border-color:#678b80!important;
  }
  html[data-skin="white"] :is(h2,h2 span,th,#genPhaseLabel,#genPercentLabel){
    color:#47685f!important;text-shadow:none!important;
  }
  html[data-skin="white"] :is(td,td span,.panel label,.tick,.clipbar){
    color:#40584e!important;text-shadow:none!important;
  }
  html[data-skin="white"] #activeUsersCount{
    background:#d3cebc!important;color:#615b3d!important;
    border-color:#aaa587!important;
  }
  html[data-skin="white"] *{
    scrollbar-color:#8caa9d #c7c9bc!important;
  }
}

/* Retro hardware — warm grey / graphite / muted cyan */
@layer neurodeckSkin {
  html[data-skin="white"] body{
    background:linear-gradient(135deg,#cccac2,#a8ada9)!important;
  }
  html[data-skin="white"] :is(
    .panel,.toolbar,#status,.trackhead,.devicebar,.popup,dialog,
    #ctxMenu,#ctxSub,#genProgressWrapper,#speedControl,#skinSwitch
  ){
    background:linear-gradient(145deg,#d5d2c8,#b1b5af)!important;
    border-color:#848e8a!important;
    box-shadow:
      inset 0 1px 0 #eeeae1,
      inset 1px 0 0 #e0ddd4,
      inset 0 -3px 5px #515b5840,
      0 3px 0 #7b8580,
      0 9px 17px #29363255!important;
  }
  html[data-skin="white"] :is(button,.button,.tile-btn,.tile-ctrl){
    color:#233e3e!important;
    background:linear-gradient(160deg,#e0dcd0 0%,#c5c9bf 48%,#9faea8 100%)!important;
    border-color:#657b77!important;
    box-shadow:
      inset 0 2px 0 #f0eade,
      inset 2px 0 0 #e4e2d5,
      inset 0 -3px 0 #758783,
      inset -2px 0 0 #889a93,
      0 3px 0 #4e615e,
      0 6px 9px #263d384d!important;
    text-shadow:0 1px 0 #eeeade!important;
  }
  html[data-skin="white"] :is(button,.button,.tile-btn):hover{
    color:#123f44!important;
    border-color:#397c81!important;
    background:linear-gradient(150deg,#dce4dc,#aec9c1)!important;
    box-shadow:inset 0 2px 0 #edf0e6,inset 0 -3px 0 #648b86,
      0 3px 0 #405f5c,0 5px 12px #255b514d!important;
  }
  html[data-skin="white"] :is(button,.button,.tile-btn):active{
    background:linear-gradient(#9eafa7,#bbc8be)!important;
    box-shadow:inset 0 3px 6px #253e3b66,inset 0 -1px 0 #e0e4d6!important;
  }

  /* Distinct hardware modules */
  html[data-skin="white"] .nav-device-btn.dj-btn{
    color:#163f43!important;
    background:linear-gradient(150deg,#c9dad2,#84aaa4)!important;
    border-color:#416e70!important;
  }
  html[data-skin="white"] .nav-device-btn.mpc-btn{
    color:#28394a!important;
    background:linear-gradient(150deg,#d0d6d6,#8c9eac)!important;
    border-color:#5b6f82!important;
  }
  html[data-skin="white"] .rec-btn{
    color:#712d3d!important;
    background:linear-gradient(150deg,#e0d4cd,#bca9aa)!important;
    border-color:#976673!important;
  }
  html[data-skin="white"] :is(
    input:not([type="range"]):not([type="checkbox"]),select
  ){
    background:#bfc6bd!important;
    border-color:#7e9088!important;
    box-shadow:inset 0 3px 6px #334b4255,inset 0 -1px 0 #e5e3d6!important;
    color:#233f38!important;
  }
  html[data-skin="white"] :is(.scroll,.ruler){
    box-shadow:inset 0 3px 9px #273e3540,0 1px 0 #e4e1d5!important;
  }
  html[data-skin="white"] :is(h2,h2 span,th,.clipbar){
    color:#284e4e!important;
    text-shadow:0 1px 0 #e4e6db!important;
  }
}

/* WHITE — copper / burnt orange accents */
@layer neurodeckSkin {
  html[data-skin="white"]{
    --cyan:#a34412;--cyan-dim:#85401d;--accent:#a34412;
    --nd-cyan:#a34412;--nd-cyan-glow:#ad541d33;
    --line-2:#aa8769;--nd-line-bright:#a56539;
  }

  html[data-skin="white"] body :is(
    h2,h2 span,th,.tick,.clipbar,.device-title-text,
    #status,#status::before,#genPhaseLabel,#genPercentLabel,
    #activeUsersCount,#speedControl output,.tile-ctrl span
  ){
    color:#85360f!important;
    text-shadow:none!important;
  }
  html[data-skin="white"] body :is(td,td span,.panel label){
    color:#593b28!important;
    text-shadow:none!important;
  }
  html[data-skin="white"] body :is(
    button,.button,.tile-btn,.tile-ctrl
  ){
    color:#633717!important;
    border-color:#9c795c!important;
    text-shadow:none!important;
  }
  html[data-skin="white"] body :is(button,.button,.tile-btn):hover{
    color:#762c08!important;
    background:linear-gradient(#e6d8c4,#c9b292)!important;
    border-color:#a9511a!important;
    box-shadow:inset 0 1px 0 #f1e4d3,0 3px 9px #62432c44!important;
  }
  html[data-skin="white"] body :is(
    .nav-device-btn.dj-btn,.nav-device-btn.mpc-btn
  ){
    color:#653312!important;
    background:linear-gradient(145deg,#ddceba,#bda58b)!important;
    border-color:#9d6943!important;
  }
  html[data-skin="white"] body :is(.btn-led,h2::before){
    background:#b75a20!important;
    color:#9d4617!important;
    box-shadow:0 0 5px #a9542022!important;
  }
  html[data-skin="white"] body .clip{
    background:linear-gradient(#d8c3a7,#baa180)!important;
    border-color:#95663e!important;
  }
  html[data-skin="white"] body :is(.clip:hover,.clip.clip-selected){
    border-color:#9b3e0e!important;
    box-shadow:0 0 10px #a74d2744,inset 0 0 8px #f5dcc044!important;
  }
  html[data-skin="white"] body .selection{
    background:#ba581e26!important;
    border-color:#a04412!important;
  }
  html[data-skin="white"] body .cursor{
    background:#a33f0a!important;
    box-shadow:0 0 5px #b8592133!important;
  }
  html[data-skin="white"] body #genProgressBarFill{
    background:linear-gradient(90deg,#8d451f,#ca772c)!important;
    box-shadow:none!important;
  }
  html[data-skin="white"] body #speedKnob::after{
    background:#a34512!important;
    box-shadow:none!important;
  }
  html[data-skin="white"] body #skinSwitch input:checked::before{
    background:#c27435!important;
    box-shadow:inset 0 1px 0 #f1c594!important;
  }
  html[data-skin="white"] body input[type="range"]{
    accent-color:#a94d19!important;
  }
  html[data-skin="white"] body input[type="range"]::-webkit-slider-thumb{
    background:linear-gradient(#d39a60,#a35120)!important;
    border-color:#85401a!important;
    box-shadow:0 2px 4px #50352144!important;
  }
  html[data-skin="white"] body input[type="range"]::-moz-range-thumb{
    background:linear-gradient(#d39a60,#a35120)!important;
    border-color:#85401a!important;
    box-shadow:0 2px 4px #50352144!important;
  }
  html[data-skin="white"] *{
    scrollbar-color:#a5744e #c7c3b7!important;
  }
}