/* Moogy Cut en ligne : mêmes couleurs et même page Morceaux que l’outil sur PC */
:root{
  --bg:#E8ECF1; --panel:#FFFFFF; --panel2:#F4F6F9; --ink:#18202B; --muted:#5A6576; --line:#D2D9E2;
  --accent:#2B45C9; --accent-ink:#FFFFFF; --accent-soft:#E4E8FB;
  --warn:#8A5300; --warn-bg:#FFF1D6; --err:#A8231C; --err-bg:#FCE3E1; --ok:#17693C; --ok-bg:#DDF3E5;
  --font:"Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#131821; --panel:#1B222D; --panel2:#222A36; --ink:#E7EBF1; --muted:#9AA5B5; --line:#2E3746;
    --accent:#8197FF; --accent-ink:#0D1220; --accent-soft:#252E4D;
    --warn:#F3B657; --warn-bg:#3A2D15; --err:#FF928A; --err-bg:#3D1E1C; --ok:#6FD39A; --ok-bg:#16301F;
    color-scheme: dark;
  }
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:15px/1.45 var(--font);min-height:100vh;-webkit-text-size-adjust:100%}
a{color:var(--accent)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:1px solid var(--line);background:var(--panel);border-radius:6px;padding:.45em .9em}
button:hover:not(:disabled){border-color:var(--muted)}
button:disabled{opacity:.45;cursor:not-allowed}
button.primary,.btn.primary{background:var(--accent);color:var(--accent-ink);border:1px solid var(--accent);font-weight:700}
.btn{display:inline-block;border-radius:6px;padding:.5em 1em;text-decoration:none}
button.linkish{border:none;background:none;padding:0;color:var(--accent);text-decoration:underline;text-underline-offset:2px}
button.icon{padding:.2em .5em;min-width:2em;line-height:1.4}
input,select,textarea{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:.45em .6em;min-width:0}
textarea{width:100%;min-height:4.5em;resize:vertical}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.chk{display:inline-flex;gap:.4em;align-items:center;cursor:pointer}
.meta{color:var(--muted);font-size:.85em}
.hint{color:var(--muted);font-size:.87em;margin:.3em 0 0}
.tag{display:inline-block;font-size:.8em;padding:.1em .5em;border-radius:4px;white-space:nowrap}
.tag.warn{background:var(--warn-bg);color:var(--warn)}
.tag.ok{background:var(--ok-bg);color:var(--ok)}
.tag.err{background:var(--err-bg);color:var(--err)}
.empty{padding:3em 1.5em;text-align:center;color:var(--muted)}
code{background:var(--panel2);padding:.05em .35em;border-radius:4px}

/* Connexion et installation */
body.center{display:flex;align-items:center;justify-content:center;padding:16px}
.login{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:1.6em 1.6em 1.8em;width:min(400px,100%);box-shadow:0 10px 30px rgba(0,0,0,.08)}
.login.wide{width:min(640px,100%)}
.login h1{display:flex;align-items:center;gap:.5em;margin:0 0 .2em;font-size:1.45em}
.login h2{font-size:1.05em;margin:1.4em 0 .5em}
.form{display:flex;flex-direction:column;gap:.9em;margin-top:1.2em}
.form label:not(.chk){display:flex;flex-direction:column;gap:.3em;font-weight:700}
.form label:not(.chk) input{font-weight:400;padding:.6em .7em}
.form button.primary{padding:.7em 1em;margin-top:.3em}
.errbox,.okbox{border-radius:8px;padding:.6em .8em}
.errbox{background:var(--err-bg);color:var(--err)}
.okbox{background:var(--ok-bg);color:var(--ok)}
.checks{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.3em}
.checks .ok{color:var(--ok)}.checks .bad{color:var(--err);font-weight:700}

/* En-tête */
.top{display:flex;align-items:center;gap:1em;padding:.6em 1.2em;background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.brand{display:flex;align-items:center;gap:.5em;font-weight:700;font-size:1.05em;margin-right:auto}
.topinfo{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Page Morceaux */
.sgpage{max-width:72rem;margin:0 auto;padding:1.2em}
body.sgon .sgpage{padding-bottom:7em}
.sgpage h2{margin:0 0 .2em}
.sghead{display:flex;align-items:center;justify-content:space-between;gap:1em}
.fbtn{display:inline-flex;align-items:center;gap:.4em;border-radius:99px;padding:.4em .9em;font-weight:700}
.fbtn .ic{width:1.05em;height:1.05em;margin:0}
.fbtn.open{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.fbtn.act:not(.open){border-color:var(--accent);color:var(--accent)}
.fbadge{background:var(--accent);color:var(--accent-ink);border-radius:99px;min-width:1.5em;padding:0 .4em;font-size:.8em;text-align:center}
.sgfilters{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:.3em .9em .6em;margin:.7em 0}
.sgbar{display:flex;flex-wrap:wrap;gap:.5em .8em;align-items:center;margin:.5em 0}
.sgmeta{display:flex;flex-wrap:wrap;gap:.3em .9em;align-items:center;margin:.6em 0}
.sgbar input[type=search]{min-width:14em}
.sglbls{display:flex;flex-wrap:wrap;gap:.35em;align-items:center;margin:.2em 0 .6em}
.sglbl{border:1px solid var(--lc);border-radius:99px;padding:.1em .7em;font-size:.88em;background:var(--panel);color:var(--ink)}
.sglbl.on{background:var(--lc);color:#fff;font-weight:700}
.sgsong{border:1px solid var(--line);border-radius:12px;background:var(--panel);margin:.5em 0;border-left:5px solid var(--sc,var(--line))}
.sgsong > summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1.2em 1.6em minmax(0,1fr) auto auto;gap:.6em;align-items:center;padding:.65em 1em}
.sgsong > summary::-webkit-details-marker{display:none}
.sgsong > summary::before{content:"▸";color:var(--accent);transition:transform .15s}
.sgsong[open] > summary::before{transform:rotate(90deg)}
.sgname{font-weight:700;font-size:1.05em;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sgname .meta{font-weight:400;margin-left:.4em}
.sgstat{font-size:.85em;color:var(--muted);white-space:nowrap}
.sgacts{display:flex;gap:.3em}
.sgfav{border:none;background:none;font-size:1.25em;padding:0 .1em;color:var(--muted);line-height:1}
.sgfav.on{color:#D99A00}
.sgvers{padding:.2em 1em .8em 2.6em}
.sgv{display:grid;grid-template-columns:2.2em 1.6em minmax(9em,15em) 9.5em 4.5em minmax(0,1fr);gap:.4em .7em;align-items:center;padding:.5em 0;border-top:1px dashed var(--line)}
.sgv .sgwhere{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sgv .sgwhere .vt{font-weight:700}
.sgv .sgtime,.sgv .sgdur{font-size:.85em;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.sgv .sgtags{display:flex;flex-wrap:wrap;gap:.3em .5em;align-items:center}
.sgv .sgnotes{grid-column:3/-1;display:flex;flex-direction:column;gap:.3em}
.sgv.off{opacity:.6}
.sgplay{width:32px;height:32px;border-radius:50%;padding:0}
.sgplay.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.sgplay:disabled{opacity:.35}
.sgempty{padding:.6em 0;color:var(--muted)}
.lchipd{display:inline-flex;align-items:center;gap:.3em;border-radius:99px;padding:.15em .3em .15em .65em;background:color-mix(in srgb,var(--lc) 18%,var(--panel));border:1px solid var(--lc);font-size:.88em}
.lchipd .dot{width:.6em;height:.6em;border-radius:50%;background:var(--lc)}
.lchipd button{border:none;background:none;padding:0 .3em;font-size:1em;line-height:1;color:var(--muted)}
.noter{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:.5em;align-items:start;padding:.3em .5em;border:1px solid var(--line);border-radius:8px;background:var(--panel2);font-size:.9em}
.noter .ntext{white-space:pre-wrap;overflow-wrap:anywhere}
.noter.editing{grid-template-columns:1fr}
.noter .nbtns{display:flex;gap:.5em;justify-content:flex-end}

/* Icônes du lecteur (dessinées : pas d’émoji sur Android) */
.ic{width:1.15em;height:1.15em;fill:currentColor;display:block;margin:auto}
.sgbb.main .ic{width:1.35em;height:1.35em}
.sgplay{display:inline-flex;align-items:center;justify-content:center}
/* Lecteur fixe en bas */
.sgplayer{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:center;gap:.6em;background:var(--panel);border-top:2px solid var(--accent);box-shadow:0 -6px 18px rgba(0,0,0,.12);padding:.55em 1.2em calc(.55em + env(safe-area-inset-bottom,0px))}
.sgbb{width:36px;height:36px;border-radius:50%;padding:0;display:inline-flex;align-items:center;justify-content:center;flex:none}
.sgbb.main{width:42px;height:42px;background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-size:1.1em}
.sgbinfo{display:flex;flex-direction:column;min-width:0;width:min(260px,26vw)}
.sgbinfo b,.sgbinfo .meta{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#sgbWave{flex:1;min-width:0;height:56px;cursor:pointer;touch-action:none}
#sgbTime{font-variant-numeric:tabular-nums;white-space:nowrap}

/* Fenêtres */
dialog{border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--ink);padding:1.2em 1.3em;width:min(520px,94vw);max-height:88vh;overflow:auto}
dialog::backdrop{background:rgba(10,15,25,.45)}
dialog h3{margin:0 0 .6em}
dialog .dbtns{display:flex;gap:.6em;justify-content:flex-end;margin-top:1em;flex-wrap:wrap}
dialog section{border-top:1px solid var(--line);padding-top:.8em;margin-top:.9em}
.lblpick{list-style:none;padding:0;margin:.4em 0;display:flex;flex-direction:column;gap:.2em;max-height:45vh;overflow:auto}
.lblpick label{display:flex;gap:.6em;align-items:center;padding:.35em .4em;border-radius:6px;cursor:pointer}
.lblpick label:hover{background:var(--panel2)}
.lblpick .dot{width:.8em;height:.8em;border-radius:50%;background:var(--lc);flex:none}
.newrow{display:flex;gap:.5em;align-items:center;margin-top:.5em}
.newrow input[type=text]{flex:1}
.newrow input[type=color]{width:2.4em;height:2.2em;padding:0;border:none;background:none}
.devs{list-style:none;padding:0;margin:.4em 0;display:flex;flex-direction:column;gap:.3em;font-size:.92em}
#toast{position:fixed;left:50%;bottom:1.2em;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:.6em 1em;border-radius:8px;z-index:60;max-width:min(92vw,560px);opacity:0;pointer-events:none;transition:opacity .2s}
#toast.on{opacity:1}
body.sgon #toast{bottom:6.5em}

/* Téléphone et petite tablette */
@media (max-width:760px){
  body{font-size:16px}
  .top{padding:.5em 16px;gap:.8em}
  .topinfo,.brand .meta,.sgpage > .hint{display:none}
  .top button{white-space:nowrap}
  .sgpage{padding:.8em 16px}
  .sgbar{gap:.5em}
  .sgfilters{padding:.3em .7em .6em}
  .sgbar input[type=search]{min-width:0;flex:1 1 100%}
  .sgbar select{flex:1 1 45%}
  .sgbar .chk{flex:1 1 45%}
  .sgsong > summary{grid-template-columns:1em 1.6em minmax(0,1fr);padding:.6em .7em;gap:.4em .5em}
  .sgsong > summary .sgstat{grid-column:3;white-space:normal}
  .sgsong > summary .sgacts{grid-column:3}
  .sgvers{padding:.2em .7em .7em}
  .sgv{grid-template-columns:36px 1.6em minmax(0,1fr) auto;gap:.3em .5em}
  .sgv .sgwhere{grid-column:3;white-space:normal}
  .sgv .sgdur{grid-column:4}
  .sgv .sgtime{display:none}
  .sgv .sgtags,.sgv .sgnotes{grid-column:1/-1;padding-left:calc(36px + 2.1em)}
  .sgplay{width:36px;height:36px}
  .sgplayer{flex-wrap:wrap;padding:.5em 16px calc(.5em + env(safe-area-inset-bottom,0px));gap:.4em .5em}
  .sgbinfo{order:-1;flex:1 1 100%;width:auto}
  #sgbWave{order:1;flex:1 1 100%;height:48px}
  #sgbTime{margin-left:auto}
  body.sgon .sgpage{padding-bottom:10em}
  body.sgon #toast{bottom:9.5em}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}