/* ============ "calm" skin ============
   a full re-skin that only works when <html data-skin="calm">. nothing here is
   needed by the app: delete the attribute (accessibility → עיצוב קודם) and every
   screen goes back to exactly what it was.
   idea: flat, quiet surfaces, one soft accent, no neon, no gradients, no glow.
   dark is a cool charcoal (not blue-black), light is warm paper. */
:root[data-skin="calm"]{
  --bg:#12161B; --bg-2:#161B21;
  --panel:#1A2027; --panel-2:#20272F; --panel-3:#29313B;
  --line:#2A323C; --line-2:#3A4452;
  --tx:#E8ECF0; --tx-2:#C5CCD6; --mut:#97A2B1; --fnt:#76818F;
  --acc:#7CCDB4; --acc-2:#9BDCC8; --acc-dim:#1C3029; --acc-line:#2F5A4C;
  --ok:#7CCDB4; --no:#F08A8F;
  --cc:#7CCDB4; --cc-glow:0;
  --r:14px; --r-s:10px;
  --sh-1:none; --sh-2:0 20px 50px -24px rgba(0,0,0,.7);
}
:root[data-skin="calm"][data-theme="light"]{
  --bg:#F5F3EE; --bg-2:#FFFFFF;
  --panel:#FFFFFF; --panel-2:#F3F1EB; --panel-3:#E9E6DE;
  --line:#E4E0D6; --line-2:#CFCABD;
  --tx:#1C2125; --tx-2:#39424A; --mut:#5F6A74; --fnt:#8A929A;
  --acc:#0F766E; --acc-2:#0B5C56; --acc-dim:#DFF1ED; --acc-line:#A9D6CD;
  --ok:#0F766E; --no:#B3333E;
  --cc:#0F766E;
  --sh-2:0 18px 44px -24px rgba(40,34,20,.35);
}
@media (prefers-color-scheme:light){
  :root[data-skin="calm"]:not([data-theme="dark"]){
    --bg:#F5F3EE; --bg-2:#FFFFFF; --panel:#FFFFFF; --panel-2:#F3F1EB; --panel-3:#E9E6DE;
    --line:#E4E0D6; --line-2:#CFCABD; --tx:#1C2125; --tx-2:#39424A; --mut:#5F6A74; --fnt:#8A929A;
    --acc:#0F766E; --acc-2:#0B5C56; --acc-dim:#DFF1ED; --acc-line:#A9D6CD; --ok:#0F766E; --no:#B3333E; --cc:#0F766E;
  }
}
/* the per-song category colour stays as a small signal, but is muted */
:root[data-skin="calm"] body{background-image:none}
:root[data-skin="calm"] .topbar{backdrop-filter:none;background:var(--bg)}
:root[data-skin="calm"] .logo{background:var(--acc);box-shadow:none;border-radius:11px}
:root[data-skin="calm"] .logo span{background:var(--acc);color:var(--bg);font-weight:900}
:root[data-skin="calm"] .brand h1{letter-spacing:0}
:root[data-skin="calm"] .gigbtn{background:var(--acc);color:var(--bg);box-shadow:none;border:0}
:root[data-skin="calm"] .tabs{background:transparent;border-color:var(--line)}
:root[data-skin="calm"] .tab[aria-selected="true"]{background:var(--panel-3);color:var(--tx);box-shadow:inset 0 -2px 0 var(--acc)}
:root[data-skin="calm"] .iconbtn{border-radius:10px;background:transparent}
:root[data-skin="calm"] #q{background:var(--panel);border-color:var(--line)}
:root[data-skin="calm"] #q:focus{border-color:var(--acc);box-shadow:none}

/* tiles: flat tinted blocks, one line of text, no gradient, no glow */
:root[data-skin="calm"] .plchip-art,
:root[data-skin="calm"] .plchip-art.plus{
  background:color-mix(in srgb,var(--cc) 22%,var(--panel))!important;
  border:1px solid color-mix(in srgb,var(--cc) 38%,var(--line));box-shadow:none!important;
  border-radius:14px;height:84px}
:root[data-skin="calm"] .plchip.active .plchip-art{background:color-mix(in srgb,var(--cc) 34%,var(--panel))!important;
  border-color:var(--cc);box-shadow:none!important}
:root[data-skin="calm"] .plchip,
:root[data-skin="calm"] .plchip:hover,
:root[data-skin="calm"] .plchip.active{box-shadow:none;transform:none}
:root[data-skin="calm"] .pl-ico{font-size:17px;opacity:.9;filter:grayscale(.35)}
:root[data-skin="calm"] .pl-cnt{font-size:22px;font-weight:800;color:var(--tx)}
:root[data-skin="calm"] .plchip-t .n1{color:var(--tx);text-shadow:none;font-size:14.5px;font-weight:800}
:root[data-skin="calm"] .plchip.active .plchip-t .n1{text-decoration:none;color:var(--tx)}
:root[data-skin="calm"] .plchip-art.plus{background:transparent!important;border:1.5px dashed var(--line-2)}
:root[data-skin="calm"] .plpill{background:var(--panel);border-color:var(--line-2)}
:root[data-skin="calm"] .plpill.active{background:var(--acc-dim);border-color:var(--acc)}
:root[data-skin="calm"] .tile-edit{background:var(--panel-2);color:var(--mut)}

/* rows: flat list, hairline dividers, no card chrome */
:root[data-skin="calm"] .row{border-radius:10px}
:root[data-skin="calm"] .row[aria-current="true"]{background:var(--panel-2);border-color:var(--acc-line);box-shadow:none}
:root[data-skin="calm"] .cover{background:color-mix(in srgb,var(--cc) 30%,var(--panel-2))!important;
  color:var(--tx)!important;box-shadow:none;border:1px solid color-mix(in srgb,var(--cc) 30%,var(--line))}
:root[data-skin="calm"] .keytag{border-color:var(--line-2);background:transparent;color:var(--tx-2);font-weight:800}
:root[data-skin="calm"] .grouphead{color:var(--tx-2)}
:root[data-skin="calm"] .grouphead .gdot{border-radius:50%;opacity:.8}

/* chips and buttons */
:root[data-skin="calm"] .chip{background:var(--panel);border-color:var(--line);color:var(--tx-2)}
:root[data-skin="calm"] .chip[aria-pressed="true"]{background:var(--acc-dim);border-color:var(--acc);color:var(--tx)}
:root[data-skin="calm"] .act,:root[data-skin="calm"] .minibtn{background:var(--panel);border-color:var(--line-2)}
:root[data-skin="calm"] .act.primary{background:var(--acc);border-color:var(--acc);color:var(--bg)}
:root[data-skin="calm"] .stat::before{background:var(--acc)}
:root[data-skin="calm"] .stat .bar i{background:var(--acc)}

/* song page */
:root[data-skin="calm"] .songcard{box-shadow:none;border-color:var(--line)}
:root[data-skin="calm"] .hero .wash{opacity:.0}
:root[data-skin="calm"] .hero .art{background:color-mix(in srgb,var(--cc) 30%,var(--panel-2))!important;box-shadow:none;color:var(--tx)}
:root[data-skin="calm"] .bigplay{background:var(--acc)!important;box-shadow:none;color:var(--bg)}
:root[data-skin="calm"] .bigplay .bp-1,:root[data-skin="calm"] .bigplay .bp-2,:root[data-skin="calm"] .bigplay .bp-ic{color:var(--bg)}
:root[data-skin="calm"] .lblock.chorus{border-color:var(--acc-line);background:var(--acc-dim)}

/* bottom navigation and AI button */
:root[data-skin="calm"] #bottomnav{background:var(--bg-2);border-top:1px solid var(--line);backdrop-filter:none}
:root[data-skin="calm"] #bottomnav button[aria-current="true"]{color:var(--acc);background:var(--acc-dim)}
:root[data-skin="calm"] #aifab{background:var(--panel-3);color:var(--tx);box-shadow:none;border:1px solid var(--line-2)}

/* stage keeps its own near-black; only the badge accent follows the skin */
:root[data-skin="calm"] #stagekey{background:var(--acc-dim)!important;color:var(--acc-2)!important;border-color:var(--acc-line)}
:root[data-skin="calm"] #versedots i.on{background:var(--acc)}
/* evening mode still wins over the skin */
:root[data-skin="calm"][data-evening]{--bg:#0D0C0E;--bg-2:#111013;--panel:#161518;--panel-2:#1B1A1E;--panel-3:#232126;
  --line:#2A272D;--line-2:#3A363E;--tx:#E4DCCB;--tx-2:#C2B9A5;--mut:#8D8576;--fnt:#6C665A;
  --acc:#D9A441;--acc-2:#E6B964;--acc-dim:#2C2412;--acc-line:#52401B;--cc:#D9A441}
/* the page-level accent no longer follows each song's category colour */
:root[data-skin="calm"]{--cc:#7CCDB4!important}
:root[data-skin="calm"][data-theme="light"]{--cc:#0F766E!important}
@media (prefers-color-scheme:light){:root[data-skin="calm"]:not([data-theme="dark"]){--cc:#0F766E!important}}
:root[data-skin="calm"][data-evening]{--cc:#D9A441!important}
:root[data-skin="calm"] .seg button[aria-pressed="true"],
:root[data-skin="calm"] .seg .on,
:root[data-skin="calm"] .viewseg .on{background:var(--acc)!important;color:var(--bg)!important}
:root[data-skin="calm"] .grouphead{color:var(--tx-2)!important}
:root[data-skin="calm"] .sortseg button[aria-pressed="true"]{background:var(--acc)!important;color:var(--bg)!important}
:root[data-skin="calm"] .songcard,:root[data-skin="calm"] .detail{--cc:var(--acc)!important}