:root{--bg:#0a0d12;--panel:rgba(255,255,255,.045);--line:rgba(255,255,255,.09);--text:#eef3f6;--muted:#8d9bab;--accent:#2dd4bf;--accent2:#14b8a6;--danger:#ff5d73;--ok:#34d399;--r:16px;color-scheme:dark}
*{box-sizing:border-box}html,body{margin:0}
body{background:radial-gradient(900px 500px at 8% -5%,rgba(45,212,191,.13),transparent 60%),radial-gradient(700px 500px at 100% 0,rgba(94,129,244,.08),transparent 60%),var(--bg);background-attachment:fixed;color:var(--text);font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;min-height:100vh}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
h1,h2,h3{margin:0 0 .6rem;letter-spacing:-.02em}h1{font-size:1.5rem}h2{font-size:1.1rem}h3{font-size:1rem}
small{display:block;color:var(--muted);font-size:.8rem}.muted{color:var(--muted)}code{background:rgba(255,255,255,.08);padding:1px 6px;border-radius:6px}hr{border:0;border-top:1px solid var(--line);margin:18px 0}
.grow{flex:1;min-width:0}.right{text-align:right;white-space:nowrap}
.layout{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
.sidebar{position:sticky;top:0;height:100vh;overflow:auto;padding:18px 12px;border-right:1px solid var(--line);background:rgba(10,13,18,.7);backdrop-filter:blur(18px)}
.brand{display:block;font-weight:800;font-size:1.25rem;letter-spacing:-.04em;color:var(--text);padding:4px 10px 14px}.brand span{color:var(--accent)}.brand:hover{text-decoration:none}
.side-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);padding:14px 10px 6px}
.side-link{display:flex;gap:10px;align-items:center;padding:9px 10px;border-radius:11px;color:#cfd8e0}.side-link i{font-style:normal;width:20px;text-align:center;opacity:.8}
.side-link:hover{background:rgba(255,255,255,.06);text-decoration:none}.side-link.active{background:rgba(45,212,191,.14);color:var(--accent);box-shadow:inset 0 0 0 1px rgba(45,212,191,.25)}
.main{padding:22px clamp(14px,3vw,34px) 60px;min-width:0;max-width:1280px;width:100%}
.topbar{display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}.topbar h1{margin:0;flex:1;min-width:0}.topbar-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.topbar-actions form{margin:0}
.menu-btn{display:none;background:var(--panel);border:1px solid var(--line);color:var(--text);border-radius:10px;font-size:1.2rem;padding:6px 11px}.scrim{display:none}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px;margin-bottom:16px;backdrop-filter:blur(14px);box-shadow:0 10px 40px rgba(0,0,0,.18)}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px;flex-wrap:wrap}.panel-head h2{margin:0}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}.grid-2.side-left{grid-template-columns:minmax(260px,380px) 1fr}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px}.stats.small{grid-template-columns:repeat(3,1fr)}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;color:var(--text);backdrop-filter:blur(14px)}a.stat:hover{text-decoration:none;border-color:rgba(45,212,191,.4)}
.stat small{text-transform:uppercase;letter-spacing:.06em;font-size:.7rem}.stat strong{font-size:1.5rem;letter-spacing:-.03em}
.flash{padding:11px 14px;border-radius:12px;margin-bottom:14px;border:1px solid var(--line)}.flash-ok{background:rgba(52,211,153,.1);border-color:rgba(52,211,153,.35)}.flash-err{background:rgba(255,93,115,.1);border-color:rgba(255,93,115,.4)}
.empty{color:var(--muted);text-align:center;padding:18px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:11px;padding:9px 16px;font:inherit;font-weight:650;cursor:pointer;color:#042622;background:linear-gradient(180deg,var(--accent),var(--accent2));box-shadow:0 4px 16px rgba(45,212,191,.25)}
.btn:hover{text-decoration:none;filter:brightness(1.07)}.btn.ghost{background:rgba(255,255,255,.07);color:var(--text);box-shadow:inset 0 0 0 1px var(--line)}.btn.danger{background:rgba(255,93,115,.14);color:#ff98a6;box-shadow:inset 0 0 0 1px rgba(255,93,115,.35)}
.btn.sm{padding:5px 11px;font-size:.84rem;border-radius:9px}.btn[disabled]{opacity:.5;cursor:default}
input,select,textarea{width:100%;background:rgba(0,0,0,.28);color:var(--text);border:1px solid var(--line);border-radius:11px;padding:9px 12px;font:inherit}
input:focus,select:focus,textarea:focus{outline:2px solid rgba(45,212,191,.45);border-color:transparent}input[type=checkbox],input[type=radio]{width:auto}input[type=file]{padding:7px}
label,.lbl{display:block;font-size:.85rem;color:#c3cdd6;font-weight:600}label>input,label>select,label>textarea{margin-top:5px;font-weight:400}.lbl{margin-bottom:5px}
.form{display:grid;gap:12px}.form>h2{margin:0}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.form-grid .full,.full{grid-column:1/-1}
.inline-form{display:flex;gap:12px;align-items:end;flex-wrap:wrap}.inline-form label{min-width:200px}.inline-form .grow{flex:1}
.inline{display:inline;margin:0}.search-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px}.search-bar input[type=search],.search-bar input[type=text]{flex:1;min-width:180px}.search-bar select{width:auto}
.chk{display:flex;gap:8px;align-items:center;font-weight:500}.radios{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:8px}.radios label{display:flex;gap:6px;align-items:center;font-weight:500}.mode-group{display:none}.mode-group.on{display:block}
.picker{display:grid;gap:8px}.picker-list{max-height:170px;overflow:auto;border:1px solid var(--line);border-radius:11px;padding:6px 10px;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:2px 12px;background:rgba(0,0,0,.2)}
.file-row{display:flex;gap:12px;align-items:center}.cover-big{width:96px;height:96px;border-radius:12px;object-fit:cover;background:rgba(255,255,255,.06);flex:none}.song-head{display:flex;gap:16px;align-items:center}.song-head audio{width:100%;margin-bottom:4px}
.actions-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.danger-zone{margin-top:6px}details.more{border:1px solid var(--line);border-radius:12px;padding:10px 14px;margin:10px 0;background:rgba(0,0,0,.15)}details.more>summary{cursor:pointer}details.more[open]>summary{margin-bottom:12px}
.table-wrap{overflow-x:auto}.tbl{width:100%;border-collapse:collapse}.tbl th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);padding:8px 10px;border-bottom:1px solid var(--line)}
.tbl td{padding:9px 10px;border-bottom:1px solid rgba(255,255,255,.05);vertical-align:middle}.tbl tr:hover td{background:rgba(255,255,255,.025)}.tbl td:first-child{width:56px}
.thumb{width:44px;height:44px;border-radius:9px;object-fit:cover;background:rgba(255,255,255,.07);flex:none;display:inline-grid;place-items:center;color:var(--muted)}.ph{background:linear-gradient(135deg,rgba(45,212,191,.18),rgba(94,129,244,.14))}
.row-link{display:flex;gap:12px;align-items:center;padding:9px 6px;border-bottom:1px solid rgba(255,255,255,.05);color:var(--text)}.row-link:hover{text-decoration:none;background:rgba(255,255,255,.035);border-radius:10px}.row-link.static:hover{background:none}
.row-link strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.badge{display:inline-flex;gap:4px;align-items:center;font-size:.68rem;font-weight:800;letter-spacing:.05em;padding:2px 8px;border-radius:99px;background:rgba(255,255,255,.08)}.badge.lossless{background:rgba(45,212,191,.16);color:#2dd4bf}.badge.hq{background:rgba(255,77,106,.16);color:#ff5d73}.badge.live{background:rgba(167,139,250,.18);color:#b9a2ff}
.dot{display:inline-block;padding:1px 9px;border-radius:99px;font-size:.8rem;background:rgba(255,255,255,.08)}.dot.ok{background:rgba(52,211,153,.15);color:var(--ok)}.dot.err{background:rgba(255,93,115,.15);color:#ff98a6}
.pill{font-size:.7rem;padding:1px 8px;border-radius:99px;background:rgba(45,212,191,.15);color:var(--accent);font-weight:700}.pill.off{background:rgba(255,255,255,.1);color:var(--muted)}
.pager{display:flex;gap:6px;justify-content:center;margin-top:16px}.pager a{padding:6px 12px;border-radius:9px;background:var(--panel);border:1px solid var(--line);color:var(--text)}.pager a.on{background:var(--accent);color:#042622;border-color:transparent}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}.card{display:grid;gap:3px;color:var(--text)}.card:hover{text-decoration:none}.card:hover .card-img{outline:2px solid var(--accent)}
.card-img{width:100%;aspect-ratio:1;border-radius:12px;object-fit:cover;display:grid;place-items:center;font-size:2rem;color:var(--muted);background:rgba(255,255,255,.06)}.card-img.round{border-radius:50%}.card strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inline-upload{display:flex;gap:6px;align-items:center}.inline-upload input{max-width:240px}
/* Éditeur de playlist */
.pl-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}.pl-cols .panel{margin-bottom:0}
.results,.tracks{display:grid;gap:6px;margin-top:8px}.res,.track{display:flex;gap:10px;align-items:center;padding:7px 9px;border-radius:12px;border:1px solid transparent;background:rgba(255,255,255,.035)}
.res .meta,.track .meta{flex:1;min-width:0}.res .meta strong,.track .meta strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.res.in{opacity:.55}
.track{cursor:grab}.track.dragging{opacity:.35}.track.over{border-color:var(--accent);background:rgba(45,212,191,.1)}.track .num{width:26px;text-align:center;color:var(--muted);font-variant-numeric:tabular-nums}.track .grip{color:var(--muted);cursor:grab;padding:0 2px}
.track .mv{display:flex;flex-direction:column}.track .mv button{background:none;border:0;color:var(--muted);cursor:pointer;line-height:1;padding:2px 6px}.track .mv button:hover{color:var(--accent)}
.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:#16202a;border:1px solid var(--line);padding:9px 16px;border-radius:12px;z-index:50;box-shadow:0 10px 40px rgba(0,0,0,.4)}.toast.err{border-color:var(--danger);color:#ff98a6}
/* Connexion */
body.login{display:grid;place-items:center;padding:20px}.login-card{width:min(420px,100%);display:grid;gap:12px}.login-card form{display:grid;gap:12px}.login-card h1{margin:0}.login-card .brand{padding:0}
@media(max-width:980px){.layout{grid-template-columns:1fr}.sidebar{position:fixed;z-index:30;left:0;top:0;width:260px;transform:translateX(-100%);transition:transform .2s;background:#0c1117}body.nav-open .sidebar{transform:none}body.nav-open .scrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:20}.menu-btn{display:block}
.grid-2,.grid-2.side-left,.pl-cols{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.stats.small{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:560px){.tbl th:nth-child(n+4),.tbl td:nth-child(n+4):not(:last-child){display:none}.inline-upload input{max-width:140px}}