/* ══════════════════════════════════════════════════════
   🎄 THÈME NOËL v2 — base commune (dashboard + lounge)
   ══════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Mountains+of+Christmas:wght@400;700&display=swap');

:root{
  --bg:#08130e; --bg2:#0f1f17; --bg3:#162b20;
  --border:#22402e; --border2:#2f5640;
  --text:#f3ede0; --muted:#7fa28b;
  --accent:#c8102e; --accent2:#f2c14e;
  --green:#2fa862; --red:#e0414f; --yellow:#f2c14e; --spotify:#1db954;
  --mono:'IBM Plex Mono',monospace; --sans:'IBM Plex Sans',sans-serif;
  --xmas:'Mountains of Christmas','IBM Plex Sans',cursive;
  --theme-a:200,16,46; --theme-b:8,19,14;
  --radius:14px;
  --shadow:0 8px 28px rgba(0,0,0,.30);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scrollbar-color:var(--border2) transparent}
body{
  background:
    radial-gradient(60% 45% at 0% 0%,rgba(200,16,46,.17),transparent 70%),
    radial-gradient(55% 45% at 100% 100%,rgba(47,168,98,.15),transparent 70%),
    var(--bg);
  background-attachment:fixed;
  color:var(--text);font-family:var(--sans);font-size:14px;min-height:100vh
}
body.page-dashboard{display:flex}
::selection{background:rgba(200,16,46,.5);color:#fff}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:10px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--accent2)}

/* ══ ✨ Guirlande lumineuse (haut de page) ══ */
body::before{
  content:"";position:fixed;top:0;left:0;right:0;height:18px;z-index:2000;pointer-events:none;
  background-image:
    radial-gradient(circle at 23px 9px,#ff4d63 0 3.5px,rgba(255,77,99,.35) 4.5px,transparent 9px),
    radial-gradient(circle at 69px 11px,#ffd466 0 3.5px,rgba(255,212,102,.35) 4.5px,transparent 9px),
    radial-gradient(circle at 115px 9px,#4be08a 0 3.5px,rgba(75,224,138,.35) 4.5px,transparent 9px),
    radial-gradient(circle at 161px 11px,#6ab7ff 0 3.5px,rgba(106,183,255,.35) 4.5px,transparent 9px),
    linear-gradient(#0e3a22,#0e3a22);
  background-size:184px 18px,184px 18px,184px 18px,184px 18px,100% 2px;
  background-repeat:repeat-x,repeat-x,repeat-x,repeat-x,no-repeat;
  background-position:0 0,0 0,0 0,0 0,0 0;
  animation:bulbs 2.4s ease-in-out infinite
}
@keyframes bulbs{0%,100%{filter:brightness(.9)}50%{filter:brightness(1.7) saturate(1.2)}}

/* ══ ❄️ Neige qui tombe ══ */
body::after{
  content:"";position:fixed;left:0;right:0;bottom:0;top:-400px;z-index:2001;pointer-events:none;opacity:.6;
  background-image:
    radial-gradient(2px 2px at 20px 30px,#fff,transparent),
    radial-gradient(2px 2px at 40px 70px,rgba(255,255,255,.8),transparent),
    radial-gradient(1.5px 1.5px at 130px 80px,#fff,transparent),
    radial-gradient(2px 2px at 160px 120px,rgba(255,255,255,.9),transparent),
    radial-gradient(3px 3px at 90px 40px,#fff,transparent),
    radial-gradient(3px 3px at 260px 220px,rgba(255,255,255,.85),transparent),
    radial-gradient(2.5px 2.5px at 340px 90px,#fff,transparent),
    radial-gradient(3.5px 3.5px at 120px 330px,rgba(255,255,255,.8),transparent);
  background-size:200px 200px,200px 200px,200px 200px,200px 200px,200px 200px,400px 400px,400px 400px,400px 400px;
  animation:snowFall 22s linear infinite
}
@keyframes snowFall{from{transform:translateY(0)}to{transform:translateY(400px)}}
@media(prefers-reduced-motion:reduce){body::before,body::after{animation:none}}

/* ── Login ── */
#loginOverlay{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:1000;
  background:radial-gradient(90% 60% at 50% 0%,rgba(200,16,46,.28),transparent 70%),
             radial-gradient(70% 50% at 50% 100%,rgba(47,168,98,.18),transparent 70%),var(--bg)
}
#loginOverlay.hidden{display:none}
#login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16px}
.login-box{
  position:relative;background:linear-gradient(180deg,#143122,var(--bg2));
  border:1px solid var(--border2);border-top:3px solid var(--accent2);border-radius:20px;
  padding:48px 36px 36px;width:340px;display:flex;flex-direction:column;gap:18px;
  box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 1px rgba(242,193,78,.12),0 0 60px rgba(200,16,46,.12)
}
.login-box::before{content:'🎅';position:absolute;top:-30px;left:50%;transform:translateX(-50%);font-size:46px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.5))}
.login-box::after{content:'🎁  ⭐  🔔  ⭐  🎁';position:absolute;bottom:-26px;left:0;right:0;text-align:center;font-size:14px;letter-spacing:4px;opacity:.85}
.page-lounge .login-box{text-align:center}
.login-box h2{font-family:var(--xmas);font-size:30px;font-weight:700;color:var(--accent2);text-shadow:0 2px 14px rgba(242,193,78,.35)}
.login-box p{font-size:13px;color:var(--muted);line-height:1.5}
.login-error{font-size:12px;color:var(--red);display:none}
.login-error.show{display:block}

/* ── Sidebar (dashboard) ── */
.sidebar{width:220px;background:linear-gradient(180deg,#143122 0%,#0d1c14 60%,#1c0b10 100%);border-right:1px solid var(--border2);display:flex;flex-direction:column;flex-shrink:0;box-shadow:6px 0 30px rgba(0,0,0,.35)}
.sidebar-logo{padding:30px 20px 16px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--border2);background:linear-gradient(180deg,rgba(200,16,46,.14),transparent)}
.sidebar-logo .dot{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px}
.sidebar-logo span:not(.status-pill){font-family:var(--xmas);font-weight:700;font-size:20px;color:var(--accent2);text-shadow:0 0 14px rgba(242,193,78,.3)}
.status-pill{font-size:11px;font-family:var(--mono);padding:2px 10px;border-radius:20px;background:rgba(47,168,98,.15);color:#6ee7a0;border:1px solid rgba(47,168,98,.35);margin-left:auto}
.status-pill.offline{background:rgba(224,65,79,.15);color:var(--red);border-color:rgba(224,65,79,.35)}
nav{padding:12px 0;flex:1;overflow-y:auto}
.nav-section{font-size:10px;font-weight:600;letter-spacing:.1em;color:var(--muted);padding:14px 20px 6px;text-transform:uppercase}
.nav-section::before{content:'❄ ';color:var(--accent2)}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 20px;margin-right:12px;cursor:pointer;color:var(--muted);transition:all .18s;border-left:3px solid transparent;border-radius:0 24px 24px 0}
.nav-item:hover{background:rgba(242,193,78,.07);color:var(--text);transform:translateX(3px)}
.nav-item.active{background:linear-gradient(90deg,rgba(200,16,46,.30),rgba(200,16,46,.04));color:var(--accent2);border-left-color:var(--accent2);font-weight:500}
.nav-item.active::after{content:'⭐';margin-left:auto;font-size:11px;animation:twinkle 2s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.5;transform:scale(.9)}50%{opacity:1;transform:scale(1.2)}}
.nav-item .icon{font-size:16px}
.sidebar-bot{padding:16px 20px;border-top:1px solid var(--border2);background:rgba(0,0,0,.18)}
.bot-card{display:flex;align-items:center;gap:10px}
.bot-avatar{position:relative;width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#d81b3a,#8f0a20);border:2px solid var(--accent2);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px;flex-shrink:0}
.bot-avatar::after{content:'🎀';position:absolute;top:-10px;right:-8px;font-size:13px}
.bot-name{font-size:13px;font-weight:500}
.bot-latency{font-size:11px;color:var(--muted);font-family:var(--mono)}

/* ── Topbar / Main ── */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden}
.topbar{background:linear-gradient(90deg,#143122,var(--bg2) 55%,#2a0f15);border-bottom:1px solid var(--border2);height:56px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-shrink:0;padding-top:6px;box-shadow:0 4px 20px rgba(0,0,0,.25)}
.page-dashboard .topbar{padding-left:28px;padding-right:28px}
.page-lounge   .topbar{padding-left:20px;padding-right:20px}
.page-title{font-family:var(--xmas);font-size:24px;font-weight:700;color:var(--text);letter-spacing:.3px}
.page-title::after{content:' 🎄'}
.topbar-left{display:flex;align-items:center;gap:10px}
.topbar-right{display:flex;align-items:center;gap:12px}
.content{padding:20px}
.page-dashboard .content{flex:1;overflow-y:auto;padding:24px 28px}
select.guild-select{background:var(--bg3);border:1px solid var(--border2);color:var(--text);padding:6px 12px;border-radius:8px;font-family:var(--sans);font-size:13px;cursor:pointer}
.dot{position:relative;width:32px;height:32px;background:linear-gradient(135deg,#d81b3a,#8f0a20);border:1px solid rgba(242,193,78,.5);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;box-shadow:0 4px 14px rgba(200,16,46,.4)}
.dot::after{content:'🎅';position:absolute;top:-11px;right:-10px;font-size:14px}
.brand{font-family:var(--xmas);font-weight:700;font-size:20px;color:var(--accent2)}
#av{width:28px;height:28px;border-radius:50%;vertical-align:middle;border:2px solid var(--accent2)}
#nm{font-size:13px;font-family:var(--mono);color:var(--muted)}

/* ── Stats (dashboard) ── */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
.stat-card,.sum-tile{position:relative;overflow:hidden;background:linear-gradient(160deg,#173424,var(--bg2));border:1px solid var(--border2);border-top:2px solid rgba(242,193,78,.55);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s,border-color .2s}
.stat-card:hover{transform:translateY(-3px);border-color:var(--accent2);box-shadow:0 12px 34px rgba(0,0,0,.4),0 0 24px rgba(242,193,78,.12)}
.stat-card::after{content:'🎁';position:absolute;right:10px;bottom:2px;font-size:40px;opacity:.14;transform:rotate(-12deg);pointer-events:none}
.stat-card:nth-child(4n+2)::after{content:'⛄'}
.stat-card:nth-child(4n+3)::after{content:'🔔'}
.stat-card:nth-child(4n+4)::after{content:'🦌'}
.stat-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;margin-bottom:8px}
.stat-value{font-size:28px;font-weight:600;font-family:var(--mono);color:var(--text)}
.stat-value.accent{color:var(--accent2);text-shadow:0 0 18px rgba(242,193,78,.35)}
.stat-value.green{color:#4be08a;text-shadow:0 0 18px rgba(75,224,138,.3)}
.stat-value.yellow{color:var(--yellow)}

/* ── Panel ── */
.panel{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.03),transparent 140px),var(--bg2);border:1px solid var(--border2);border-radius:var(--radius);margin-bottom:20px;overflow:hidden;box-shadow:var(--shadow)}
.panel::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;z-index:1;pointer-events:none;background:repeating-linear-gradient(-45deg,#c8102e 0 8px,#f3ede0 8px 16px)}
.panel-header{padding:18px 20px 14px;border-bottom:1px solid var(--border2);display:flex;align-items:center;justify-content:space-between;gap:8px;background:linear-gradient(90deg,rgba(200,16,46,.12),transparent 65%)}
.panel-title{font-family:var(--xmas);font-weight:700;font-size:18px;color:var(--text)}
.panel-title::after{content:' ✦';color:var(--accent);font-size:.75em}
.panel-body{padding:20px}

/* ── Table ── */
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--accent2);opacity:.85;padding:0 0 10px;border-bottom:1px solid var(--border2)}
td{padding:10px 0;border-bottom:1px solid var(--border);vertical-align:middle;transition:background .15s}
tbody tr:hover td{background:rgba(242,193,78,.05)}
tr:last-child td{border-bottom:none}
.tag{display:inline-block;background:rgba(200,16,46,.18);color:var(--accent2);border:1px solid rgba(200,16,46,.35);padding:2px 10px;border-radius:999px;font-size:11px;margin:2px}
.tag.green{background:rgba(47,168,98,.16);color:#6ee7a0;border-color:rgba(47,168,98,.4)}

/* ── Buttons ── */
.btn{padding:7px 16px;border-radius:8px;border:none;cursor:pointer;font-family:var(--sans);font-size:13px;font-weight:500;transition:all .18s}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.4;cursor:default;transform:none}
.btn-primary{background:linear-gradient(135deg,#dc1c3c,#a30c24);color:#fff;box-shadow:0 4px 14px rgba(200,16,46,.35)}
.btn-primary:hover{background:linear-gradient(135deg,#f8d775,#e2a92f);color:#1a1200;transform:translateY(-1px);box-shadow:0 6px 18px rgba(242,193,78,.35)}
.btn-danger{background:rgba(237,66,69,.15);color:#ff7b82;border:1px solid rgba(237,66,69,.35)}
.btn-danger:hover{background:rgba(237,66,69,.28)}
.btn-warn{background:rgba(242,193,78,.14);color:var(--yellow);border:1px solid rgba(242,193,78,.4)}
.btn-warn:hover{background:rgba(242,193,78,.26)}
.btn-ghost{background:transparent;color:var(--muted);border:1px solid var(--border2)}
.btn-ghost:hover{background:var(--bg3);color:var(--text);border-color:var(--accent2)}
.btn-green{background:rgba(29,185,84,.15);color:var(--spotify);border:1px solid rgba(29,185,84,.4)}
.btn-green:hover{background:rgba(29,185,84,.28)}
.btn-sm{padding:4px 10px;font-size:12px}
.btn-row{display:flex;gap:8px;flex-wrap:wrap}

/* ── Form ── */
.form-row{display:grid;gap:12px;margin-bottom:14px}
.form-row.cols2{grid-template-columns:1fr 1fr}
.form-row.cols3{grid-template-columns:1fr 1fr 1fr}
label{display:block;font-size:11px;font-weight:500;color:var(--muted);margin-bottom:5px;letter-spacing:.06em;text-transform:uppercase}
input[type=text],input[type=number],input[type=password],select,textarea{width:100%;background:rgba(0,0,0,.25);border:1px solid var(--border2);color:var(--text);padding:9px 12px;border-radius:8px;font-family:var(--sans);font-size:13px;transition:border-color .15s,box-shadow .15s}
textarea{resize:vertical;min-height:80px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent2);box-shadow:0 0 0 3px rgba(242,193,78,.16)}
input[type=range]{width:100%;accent-color:var(--accent2)}
@media(max-width:560px){.form-row.cols2,.form-row.cols3{grid-template-columns:1fr}}

/* ── Logs ── */
.log-list{font-family:var(--mono);font-size:12px;max-height:280px;overflow-y:auto}
.log-row{display:flex;gap:12px;padding:6px 4px;border-bottom:1px solid var(--border);border-radius:4px}
.log-row:hover{background:rgba(242,193,78,.05)}
.log-time{color:var(--muted);width:56px;flex-shrink:0}
.log-action{width:70px;flex-shrink:0;font-weight:500;color:var(--accent2)}
.log-detail{color:var(--text);opacity:.8}
.empty{color:var(--muted);text-align:center;padding:28px;font-size:13px}
.empty::before{content:'⛄';display:block;font-size:34px;margin-bottom:8px;opacity:.9}
.hint{font-size:12px;color:var(--muted);margin-top:4px}

/* ── Toast ── */
.toast-container{position:fixed;bottom:24px;right:24px;left:24px;display:flex;flex-direction:column;align-items:flex-end;gap:8px;z-index:2100}
.toast{background:linear-gradient(135deg,#173424,var(--bg2));border:1px solid var(--border2);border-left:4px solid var(--accent2);padding:12px 18px;border-radius:10px;font-size:13px;animation:slideIn .25s ease;display:flex;align-items:center;gap:10px;box-shadow:0 10px 30px rgba(0,0,0,.45)}
.toast::before{content:'🔔'}
.toast.success{border-color:var(--green);border-left-color:var(--green)}
.toast.success::before{content:'🎁'}
.toast.error{border-color:var(--red);border-left-color:var(--red)}
.toast.error::before{content:'🧊'}
@keyframes slideIn{from{transform:translateX(24px);opacity:0}to{transform:translateX(0);opacity:1}}

/* ── Page visibility (dashboard) ── */
.page{display:none}
.page.active{display:block;animation:pageIn .3s ease}
@keyframes pageIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ── Musique (commun) ── */
.music-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.np{display:flex;gap:16px;align-items:center;margin-bottom:16px}
.np-cover{width:84px;height:84px;border-radius:12px;background:var(--bg3);border:2px solid var(--accent2);box-shadow:0 0 0 3px rgba(200,16,46,.5),0 8px 24px rgba(0,0,0,.4);object-fit:cover;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:28px}
#npCoverWrap{cursor:pointer}
.np-title{font-weight:600;font-size:15px}
.np-artist{color:var(--muted);font-size:13px;margin-top:2px}
.np-state{font-size:11px;font-family:var(--mono);margin-top:6px;color:var(--muted)}
.queue-item,.track{display:flex;align-items:center;gap:12px;padding:8px 6px;border-bottom:1px solid var(--border);border-radius:8px;transition:background .15s}
.queue-item:hover,.track:hover{background:rgba(242,193,78,.06)}
.queue-item:last-child,.track:last-child{border-bottom:none}
.track img,.track .ph,.queue-item img,.queue-item .ph{width:44px;height:44px;border-radius:8px;object-fit:cover;background:var(--bg3);flex-shrink:0}
.track-info{flex:1;min-width:0}
.track-title{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.track-sub{color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.queue-num{color:var(--accent2);font-family:var(--mono);font-size:12px;width:22px;flex-shrink:0}
.vol-row{display:flex;align-items:center;gap:10px;margin-top:14px}
.vol-row span{font-family:var(--mono);font-size:12px;color:var(--muted);width:40px;text-align:right}
@media(max-width:1100px){.music-grid{grid-template-columns:1fr}}

/* ── Paroles (lounge) ── */
.lyrics-box{max-height:260px;overflow-y:auto;scroll-behavior:smooth;padding-right:4px}
.lyrics-line{padding:5px 0;color:var(--muted);font-size:14px;line-height:1.5;transition:color .15s,transform .15s}
.lyrics-line.active{color:var(--text);font-weight:600;transform:translateX(2px);text-shadow:0 0 14px rgba(242,193,78,.35)}
.lyrics-line.active::before{content:'🎶 ';color:var(--accent2)}
.lyrics-plain{white-space:pre-line;color:var(--text);line-height:1.7;font-size:13px}

/* ── Lecteur plein écran (lounge) ── */
#fullPlayer{
  position:fixed;inset:0;z-index:1100;display:none;
  flex-direction:column;align-items:center;
  padding:28px 20px 48px;overflow-y:auto;
  background:
    radial-gradient(120% 60% at 50% -10%,rgb(var(--theme-a)) 0%,rgb(var(--theme-b)) 55%,transparent 100%),
    radial-gradient(80% 40% at 50% 110%,rgba(47,168,98,.35),transparent 70%),
    var(--bg)
}
#fullPlayer.open{display:flex}
.full-close{align-self:flex-end;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:var(--text);width:36px;height:36px;border-radius:50%;font-size:16px;cursor:pointer;flex-shrink:0;transition:all .15s}
.full-close:hover{background:rgba(200,16,46,.6);transform:rotate(90deg)}
.full-cover-wrap{position:relative;margin:18px 0 26px}
.full-cover-wrap::after{content:'🎀';position:absolute;top:-22px;left:50%;transform:translateX(-50%);font-size:38px;filter:drop-shadow(0 3px 6px rgba(0,0,0,.5));pointer-events:none}
.full-cover{width:min(280px,62vw);height:min(280px,62vw);border-radius:16px;object-fit:cover;box-shadow:0 0 0 4px rgba(242,193,78,.85),0 0 0 8px rgba(200,16,46,.65),0 24px 60px rgba(0,0,0,.55);background:var(--bg3);display:flex;align-items:center;justify-content:center;font-size:64px}
.full-title{font-family:var(--xmas);font-size:30px;font-weight:700;text-align:center;max-width:90vw;text-shadow:0 2px 16px rgba(0,0,0,.4)}
.full-artist{font-size:15px;color:rgba(255,255,255,.75);margin-top:4px;text-align:center;max-width:90vw}
.full-artist::before{content:'🎤 '}
.full-controls{display:flex;gap:10px;margin:22px 0 8px;flex-wrap:wrap;justify-content:center}
.full-vol{display:flex;align-items:center;gap:10px;width:min(320px,90vw);margin-bottom:28px}
.full-vol label{color:rgba(255,255,255,.6)}
.full-vol span{font-family:var(--mono);font-size:12px;color:rgba(255,255,255,.6);width:40px;text-align:right}
.full-lyrics{width:min(560px,92vw);text-align:center}
.full-lyrics .lyrics-line{font-size:18px;padding:9px 0;color:rgba(255,255,255,.45);font-weight:500}
.full-lyrics .lyrics-line.active{color:#fff;font-size:23px;font-weight:700;transform:none;text-shadow:0 0 22px rgba(242,193,78,.55)}
.full-lyrics .lyrics-line.active::before{content:none}
.full-lyrics .lyrics-plain{color:rgba(255,255,255,.85)}
.full-lyrics .empty{color:rgba(255,255,255,.5)}

/* ═══════════════════════════════════════════════════════════════════════════
   Lounge — Now Playing Bar · Skip Vote · Owner Panel · Playlist permanente
   ═══════════════════════════════════════════════════════════════════════════ */
#npBar{
  position:fixed;bottom:0;left:0;right:0;z-index:90;display:none;align-items:center;gap:14px;
  padding:12px 20px 10px;
  background:linear-gradient(180deg,rgba(18,44,30,.94),rgba(6,16,11,.97));
  backdrop-filter:blur(18px) saturate(1.6);-webkit-backdrop-filter:blur(18px) saturate(1.6);
  border-top:1px solid rgba(242,193,78,.35);
  box-shadow:0 -6px 40px rgba(0,0,0,.55),0 -1px 30px rgba(200,16,46,.12);
  transition:background 1.2s ease;user-select:none
}
#npBar.active{display:flex;animation:npBarIn .35s cubic-bezier(.22,1,.36,1) both}
#npBar .nb-progress{position:absolute;top:0;left:0;right:0;height:3px;background:rgba(255,255,255,.08)}
#npBar .nb-progress-fill{position:relative;height:100%;width:0%;border-radius:0 2px 2px 0;transition:width .8s linear;
  background:linear-gradient(90deg,rgba(var(--theme-a,200,16,46),1),#f2c14e)}
#npBar .nb-progress-fill::after{content:'🛷';position:absolute;right:-10px;top:-15px;font-size:15px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}
#npBar .nb-cover{width:44px;height:44px;border-radius:10px;overflow:hidden;flex-shrink:0;background:rgba(255,255,255,.06);border:2px solid var(--accent2);display:flex;align-items:center;justify-content:center;font-size:20px;cursor:pointer;transition:transform .15s,box-shadow .15s}
#npBar .nb-cover:hover{transform:scale(1.07) rotate(-2deg);box-shadow:0 4px 16px rgba(0,0,0,.4)}
#npBar .nb-cover img{width:100%;height:100%;object-fit:cover;display:block}
#npBar .nb-info{flex:1;min-width:0}
#npBar .nb-title{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff;line-height:1.3}
#npBar .nb-title::before{content:'🎵 '}
#npBar .nb-artist{font-size:11px;color:rgba(255,255,255,.5);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#npBar .nb-btns{display:flex;align-items:center;gap:7px;flex-shrink:0}
#npBar .nb-btn{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.88);border-radius:999px;padding:5px 14px;font-size:12px;font-weight:500;cursor:pointer;transition:background .15s,border-color .15s,transform .1s;white-space:nowrap;line-height:1.5}
#npBar .nb-btn:hover{background:rgba(242,193,78,.16);border-color:rgba(242,193,78,.45);transform:translateY(-1px)}
#npBar .nb-btn:active{transform:translateY(0)}
#npBar .nb-btn:disabled{opacity:.3;cursor:default;transform:none}
#npBar .nb-btn.warn{border-color:rgba(242,193,78,.4);color:#f2c14e}
#npBar .nb-btn.warn:hover{background:rgba(242,193,78,.14)}
#npBar .nb-btn.danger{border-color:rgba(237,66,69,.4);color:#ff6b72}
#npBar .nb-btn.danger:hover{background:rgba(237,66,69,.14)}
#skipVoteBtn{display:none}
#skipVoteBtn .vote-count{font-size:10px;background:rgba(242,193,78,.2);border-radius:999px;padding:1px 7px;margin-left:5px;color:#f2c14e;font-weight:600}
#skipVoteBtn.voted{opacity:.5;cursor:default}
body.has-npbar{padding-bottom:74px}

/* ── Owner panel ── */
#ownerPanel{display:none}
#ownerPanel .panel-header .tag{background:linear-gradient(135deg,#ffd700,#ffaa00);color:#1a1200;font-weight:700;border-color:transparent}
.owner-ctrl-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:16px}
@media(max-width:640px){.owner-ctrl-grid{grid-template-columns:repeat(2,1fr)}}
#volOwner{flex:1;accent-color:#ffd700}
#ownerQuery{font-family:var(--mono,monospace);font-size:12px}
#ownerVoteStatus{font-family:var(--mono,monospace);font-size:12px;color:rgba(255,255,255,.65)}

/* ── Playlist permanente ── */
.perm-track{display:flex;align-items:center;gap:12px;padding:10px 4px;border-bottom:1px solid rgba(255,255,255,.06);transition:background .12s;border-radius:8px}
.perm-track:hover{background:rgba(242,193,78,.06)}
.perm-track:last-child{border-bottom:none}
.perm-track img{width:38px;height:38px;border-radius:8px;object-fit:cover;flex-shrink:0}
.perm-track .ph{width:38px;height:38px;border-radius:8px;background:rgba(255,255,255,.06);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:18px}
.perm-track .pt-info{flex:1;min-width:0}
.perm-track .pt-title{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:rgba(255,255,255,.93)}
.perm-track .pt-sub{font-size:11px;color:rgba(255,255,255,.4);margin-top:2px}
#permAddQuery{font-size:12px}

@keyframes npBarIn{from{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes coverPulse{0%,100%{box-shadow:0 0 0 0 rgba(242,193,78,.45)}50%{box-shadow:0 0 0 7px rgba(242,193,78,0)}}
#npBar.active .nb-cover{animation:coverPulse 2.5s ease-in-out infinite}

@media(max-width:540px){
  #npBar{gap:10px;padding:10px 12px 8px}
  #npBar .nb-cover{width:38px;height:38px;font-size:17px}
  #npBar .nb-title{font-size:12px}
  #npBar .nb-btn{padding:4px 10px;font-size:11px}
  #skipVoteBtn .vote-count{display:none}
}

/* ── Recolore les stats violettes de lounge.html aux couleurs de Noël ── */
body .stats-tab.active{background:rgba(200,16,46,.38);color:#ffdde1}
body .stats-view-btn.active{background:rgba(200,16,46,.26);border-color:rgba(242,193,78,.5);color:#ffe9a8}
body .stats-bar-fill{background:linear-gradient(90deg,#c8102e,#f2c14e)}
body .stats-score{color:var(--accent2)}
body .stats-num.plays{color:#7ee2a8;background:rgba(126,226,168,.12)}

/* ══ 🎅 Dashboard : recolore les éléments « bleu Discord » du <style> de index.html ══ */
body .np-big .state-badge{background:rgba(242,193,78,.12);border:1px solid rgba(242,193,78,.3)}
body .np-big{border:1px solid var(--border2);background:linear-gradient(135deg,#173424,var(--bg3))}
body .mbs-card{border-radius:var(--radius);box-shadow:var(--shadow);background:linear-gradient(160deg,#173424,var(--bg2))}
body .mbs-card.is-active{border-color:rgba(242,193,78,.65);box-shadow:0 0 28px rgba(242,193,78,.10),var(--shadow)}
body .mbs-avatar{background:rgba(200,16,46,.22);border:1px solid rgba(242,193,78,.4)}
body .mbs-pill.vocal{background:rgba(200,16,46,.14);border-color:rgba(200,16,46,.45);color:#ff8a98}
body .mbs-pill.active-tag{background:rgba(242,193,78,.16);border-color:rgba(242,193,78,.55);color:var(--accent2)}
body .mbs-bar-fill,body .progress-fill{background:linear-gradient(90deg,#c8102e,#f2c14e)}
body .dual-bot-card,body .bots-main-card{border-radius:var(--radius)}
body .music-status-bar,body .dual-bot-card{border:1px solid var(--border2)}