/* ============================================================
   Caracal — Feuille de style partagée (portée telle quelle depuis
   les maquettes /home/fboland/Bureau/maquettes/style.css)
   ============================================================ */

:root{
  --bg:#0d1116; --bg-2:#141a20; --surface:#1a2028; --surface-2:#212832; --border:#2a323d;
  --text:#f2f4f5; --text-dim:#9aa5ac; --text-faint:#69737b;
  --accent:#3fc1c9; --accent-dim:#2a9aa1; --accent-bg:rgba(63,193,201,.14);
  --accent2:#4caf6e; --accent2-dim:#3a8f57;
  --admin:#c9705c; --admin-bg:rgba(201,112,92,.14);
  --ok:#4caf6e;
  --now-playing-h:92px; --sidebar-w:236px;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --mono:"SF Mono","JetBrains Mono",ui-monospace,Consolas,monospace;
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#eef2f3; --bg-2:#e4eaeb; --surface:#ffffff; --surface-2:#eef2f3; --border:#d9e0e2;
    --text:#111a1f; --text-dim:#4d5960; --text-faint:#7c8a91;
    --accent:#1a8f96; --accent-dim:#0f6d73; --accent-bg:rgba(26,143,150,.10);
    --accent2:#2f8a52; --accent2-dim:#256e42;
    --admin:#a24b3a; --admin-bg:rgba(162,75,58,.10);
    --ok:#2f8a52;
  }
}
:root[data-theme="dark"]{
  --bg:#0d1116; --bg-2:#141a20; --surface:#1a2028; --surface-2:#212832; --border:#2a323d;
  --text:#f2f4f5; --text-dim:#9aa5ac; --text-faint:#69737b;
  --accent:#3fc1c9; --accent-dim:#2a9aa1; --accent-bg:rgba(63,193,201,.14);
  --accent2:#4caf6e; --accent2-dim:#3a8f57;
  --admin:#c9705c; --admin-bg:rgba(201,112,92,.14); --ok:#4caf6e;
}
:root[data-theme="light"]{
  --bg:#eef2f3; --bg-2:#e4eaeb; --surface:#ffffff; --surface-2:#eef2f3; --border:#d9e0e2;
  --text:#111a1f; --text-dim:#4d5960; --text-faint:#7c8a91;
  --accent:#1a8f96; --accent-dim:#0f6d73; --accent-bg:rgba(26,143,150,.10);
  --accent2:#2f8a52; --accent2-dim:#256e42;
  --admin:#a24b3a; --admin-bg:rgba(162,75,58,.10); --ok:#2f8a52;
}

*{box-sizing:border-box;}
html,body{margin:0; padding:0; height:100%;}
body{
  color:var(--text); font-family:var(--sans); font-size:14.5px; -webkit-font-smoothing:antialiased;
  background-color:var(--bg);
  background-image:
    radial-gradient(ellipse 900px 600px at 15% 100%, rgba(63,193,201,.16), transparent 60%),
    radial-gradient(ellipse 700px 500px at 90% 15%, rgba(76,175,110,.10), transparent 55%),
    radial-gradient(ellipse 1200px 800px at 50% 120%, rgba(20,50,60,.5), transparent 60%);
  background-attachment:fixed;
  background-size:cover;
}
a{color:inherit;}
button{font-family:inherit; cursor:pointer;}
::selection{background:var(--accent-bg);}
.tabular{font-variant-numeric:tabular-nums; font-family:var(--mono);}

.app{display:grid; grid-template-columns:var(--sidebar-w) 1fr; grid-template-rows:1fr var(--now-playing-h); height:100vh;}
.sidebar{grid-row:1/2; grid-column:1/2; background:transparent; display:flex; flex-direction:column; padding:1.4rem 0;}
.main{grid-row:1/2; grid-column:2/3; overflow-y:auto; padding:2.2rem 2.6rem;}
/* Quand la page contient une .track-scroll (Musiques/Lives), c'est CETTE zone qui
   défile, pas .main : .main devient une colonne flex de hauteur fixe. */
.main:has(.track-scroll){display:flex; flex-direction:column; overflow:hidden;}
.now-playing{grid-row:2/3; grid-column:1/3; background:linear-gradient(to top, var(--bg) 40%, transparent); border-top:1px solid var(--border); display:flex; align-items:center; padding:0 1.6rem; gap:1.4rem;}

.brand{font-weight:700; font-size:1.05rem; padding:0 1.4rem 1.6rem; letter-spacing:-.02em; display:flex; align-items:center; gap:.7rem;}
.caracal-mark{
  width:34px; height:34px; flex:none;
  background-image:url('Caracal.webp');
  background-size:contain;
  background-position:center center;
  background-repeat:no-repeat;
  mix-blend-mode:multiply; filter:contrast(115%);
}
.caracal-mark.lg{width:150px; height:150px;}
@media (prefers-color-scheme: dark){
  .caracal-mark{mix-blend-mode:screen; filter:invert(1) contrast(115%);}
}
:root[data-theme="dark"] .caracal-mark{mix-blend-mode:screen; filter:invert(1) contrast(115%);}
:root[data-theme="light"] .caracal-mark{mix-blend-mode:multiply; filter:contrast(115%);}

.nav-group{margin-bottom:1.7rem;}
.nav-label{font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-faint); padding:0 1.4rem; margin-bottom:.6rem;}
.nav-link{display:flex; align-items:center; gap:.8rem; padding:.5rem 1.4rem; color:var(--text-dim); text-decoration:none; font-size:.88rem; border-left:2px solid transparent;}
.nav-link:hover{color:var(--text);}
.nav-link.active{color:var(--text); border-left-color:var(--accent); font-weight:600;}
.nav-link .ic{width:16px; text-align:center; opacity:.8;}

.sidebar-foot{margin-top:auto; padding:0 1.4rem;}
.user-chip{display:flex; align-items:center; gap:.6rem; padding:.5rem .6rem; border-radius:8px; font-size:.85rem;}
.avatar{width:28px; height:28px; border-radius:50%; background:var(--accent); color:#04191a; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.75rem; flex:none;}

.gestion-link{display:flex; align-items:center; gap:.6rem; padding:.5rem .6rem; margin-top:.4rem; color:var(--text-faint); text-decoration:none; font-size:.78rem;}
.gestion-link:hover{color:var(--text-dim);}
.gestion-link svg{opacity:.7;}

.page-head{display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:1.8rem; gap:1rem; flex-wrap:wrap;}
.page-title{font-size:2.6rem; font-weight:800; margin:0 0 .3rem; letter-spacing:-.02em; line-height:1.05;}
.page-meta{color:var(--text-faint); font-size:.85rem;}

/* En-tête façon Koel : pochette/mosaïque à gauche, titre+méta+boutons empilés à droite */
.page-head-koel{display:flex; align-items:flex-end; gap:1.4rem; margin-bottom:1.8rem;}
.page-head-info{display:flex; flex-direction:column; gap:.35rem;}
.page-head-actions{display:flex; gap:.6rem; align-items:center; margin-top:.5rem;}
.search-box{display:flex; align-items:center; gap:.5rem; background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:.5rem .8rem; min-width:260px;}
.search-box input{background:none; border:none; outline:none; color:var(--text); font-size:.88rem; width:100%;}
.search-scope{display:flex; gap:.3rem; margin-bottom:1.2rem;}
.scope-btn{padding:.35rem .8rem; border-radius:20px; border:1px solid var(--border); background:var(--surface); color:var(--text-dim); font-size:.78rem;}
.scope-btn.active{background:var(--accent-bg); border-color:var(--accent-dim); color:var(--accent);}

/* table-layout:fixed + largeurs de colonnes identiques entre la table d'en-tête (fixe,
   hors zone de scroll) et la table du corps (dans .track-scroll) : deux <table> séparées
   qui doivent rester visuellement alignées colonne par colonne — voir .track-table-head
   ci-dessous. Sans ça, la scrollbar défilerait sur toute la hauteur y compris l'en-tête. */
.track-table{width:100%; border-collapse:collapse; table-layout:fixed; user-select:none;}
.track-table th:nth-child(1), .track-table td:nth-child(1){width:2.6rem;}
.track-table th:nth-child(2), .track-table td:nth-child(2){width:auto;}
.track-table th:nth-child(3), .track-table td:nth-child(3){width:18%;}
.track-table th:nth-child(4), .track-table td:nth-child(4){width:70px;}
.track-table th:nth-child(5), .track-table td:nth-child(5){width:110px;}
.track-table th:nth-child(6), .track-table td:nth-child(6){width:80px;}
.track-table th:nth-child(7), .track-table td:nth-child(7){width:2.6rem;}
.track-table th{text-align:left; font-size:.68rem; text-transform:uppercase; letter-spacing:.07em; color:var(--text-faint); font-weight:600; padding:.6rem .7rem; border-bottom:1px solid var(--border);}
.track-table td{padding:.6rem .7rem; border-bottom:1px solid rgba(255,255,255,.03); font-size:.87rem; color:var(--text-dim); vertical-align:middle; overflow:hidden;}
/* Table d'en-tête seule, hors de .track-scroll : ne défile jamais, la scrollbar ne
   court donc que sur la hauteur du corps de la liste, en dessous. */
.track-table-head{margin-bottom:0;}

/* Tableau générique (listes de tags inconnus, logs...) : mêmes couleurs que .track-table
   mais sans son système de largeurs de colonnes fixes pensé pour les listes de titres —
   une table à 3 colonnes de contenu différent n'a rien à faire avec ces largeurs-là. */
.plain-table{width:100%; border-collapse:collapse;}
.plain-table th{text-align:left; font-size:.68rem; text-transform:uppercase; letter-spacing:.07em; color:var(--text-faint); font-weight:600; padding:.5rem .7rem; border-bottom:1px solid var(--border);}
.plain-table td{padding:.5rem .7rem; border-bottom:1px solid rgba(255,255,255,.03); font-size:.85rem; color:var(--text-dim); vertical-align:top;}
.track-row{transition:background .1s; cursor:default;}
.track-row:hover{background:rgba(255,255,255,.03);}
.track-row.playing .t-title{color:var(--accent); font-weight:600;}
.track-row.selected{background:var(--accent-bg);}
.track-row.selected td{color:var(--text);}
.t-title{color:var(--text); font-weight:500;}
.t-cover{position:relative; overflow:hidden; width:48px; height:48px; border-radius:5px; background:var(--surface-2); display:inline-flex; align-items:center; justify-content:center; font-size:.85rem; color:var(--text-faint); margin-right:.6rem; vertical-align:middle;}
.t-title-block{display:inline-flex; flex-direction:column; vertical-align:middle; gap:.1rem;}
.t-artist-sub{font-size:.76rem; color:var(--text-faint); font-weight:400;}
.track-row.playing .t-artist-sub{color:var(--accent-dim);}
.t-num{color:var(--text-faint); width:1.6rem;}
.t-num[draggable="true"]{cursor:grab;}
.t-num[draggable="true"]:active{cursor:grabbing;}

/* Icône équaliseur animée : remplace le numéro de ligne sur le morceau en cours */
.eq-icon{display:inline-flex; align-items:flex-end; gap:2px; height:13px; width:14px;}
.eq-icon span{width:3px; background:var(--accent); border-radius:1px; animation:eq-bounce .9s ease-in-out infinite;}
.eq-icon span:nth-child(1){animation-delay:-0.7s;}
.eq-icon span:nth-child(2){animation-delay:-0.35s;}
.eq-icon span:nth-child(3){animation-delay:0s;}
/* Lecture en pause : barres figées (pas remises à zéro, juste immobiles) plutôt que
   de continuer à s'animer comme si la lecture continuait. */
.eq-icon.paused span{animation-play-state:paused;}
@keyframes eq-bounce{0%,100%{height:25%;} 50%{height:100%;}}
@media (prefers-reduced-motion: reduce){.eq-icon span{animation:none; height:70%;}}
/* Pochette : glyphe visible par défaut, image en superposition si elle charge (voir cover.php) */
.cover-glyph{position:relative; z-index:0; pointer-events:none;}
.cover-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:none;}
.pill-badge{display:inline-block; padding:.15rem .5rem; border-radius:20px; font-size:.7rem; background:var(--surface-2); color:var(--text-dim);}
.icon-btn{background:none; border:none; color:var(--text-faint); font-size:1rem; padding:.3rem; border-radius:5px;}
.icon-btn:hover{color:var(--text);}

.np-track{display:flex; align-items:center; gap:.7rem; min-width:220px;}
.np-cover{position:relative; overflow:hidden; width:48px; height:48px; border-radius:6px; background:var(--surface-2); flex:none; display:flex; align-items:center; justify-content:center; color:var(--text-faint); font-size:.7rem;}
.np-title{font-size:.86rem; font-weight:600;}
.np-artist{font-size:.78rem; color:var(--text-faint);}
.np-transport{display:flex; flex-direction:column; align-items:center; gap:.5rem; flex:1;}
.np-buttons{display:flex; align-items:center; gap:1.3rem;}
.np-buttons button{background:none; border:none; color:var(--text-dim); font-size:1.05rem;}
.np-buttons button:hover{color:var(--text);}
.np-buttons .play{width:32px; height:32px; border-radius:50%; border:1.5px solid var(--text-dim); display:flex; align-items:center; justify-content:center; font-size:.9rem; color:var(--text);}
.np-buttons .play:hover{border-color:var(--text);}
.np-buttons .toggled{color:var(--accent);}
.np-seek{display:flex; align-items:center; gap:.6rem; width:100%; max-width:760px;}
.np-seek .tabular{font-size:.72rem; color:var(--text-faint); width:2.6rem;}
.np-seek .tabular.right{text-align:right;}
/* Surface de clic agrandie sans changer l'apparence visuelle de la barre fine */
.hit-area{flex:1; position:relative; padding:9px 0; cursor:pointer;}
.seek-track{height:3px; background:var(--border); border-radius:2px; position:relative;}
.seek-fill{position:absolute; left:0; top:0; height:100%; background:var(--text-dim); border-radius:2px;}
.np-right{display:flex; align-items:center; gap:1.1rem; min-width:220px; justify-content:flex-end;}
.vol-wrap{position:relative;}
.vol-hit-area{width:130px; position:relative; padding:9px 0; cursor:pointer;}
.vol-track{height:3px; background:var(--border); border-radius:2px; position:relative;}
.vol-fill{position:absolute; left:0; top:0; height:100%; width:70%; background:var(--text-dim); border-radius:2px;}

/* Toast discret affichant le volume en % pendant 2s (façon VLC) — collé juste au-dessus
   du curseur de volume plutôt qu'ancré à un coin de l'écran. */
.volume-osd{position:absolute; bottom:100%; left:50%; transform:translateX(-50%); margin-bottom:8px; background:var(--surface); border:1px solid var(--border); border-radius:7px; padding:.4rem .7rem; font-family:var(--mono); font-size:.78rem; color:var(--text); opacity:0; pointer-events:none; transition:opacity .15s; z-index:80; white-space:nowrap;}
.volume-osd.shown{opacity:1;}

.rail{position:fixed; right:1.2rem; top:1.2rem; display:flex; flex-direction:column; gap:.7rem; z-index:40;}
.rail a, .rail button{width:38px; height:38px; border-radius:50%; background:var(--surface); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--text-dim);}
.rail a:hover, .rail button:hover{color:var(--text); border-color:var(--accent-dim);}

.graphic-view{display:none; text-align:center; padding:3rem 0 1rem;}
.graphic-view.shown{display:block;}
.art-large{width:280px; height:280px; border-radius:12px; background:linear-gradient(145deg,var(--surface-2),var(--surface)); margin:0 auto 1.4rem; display:flex; align-items:center; justify-content:center; color:var(--text-faint); font-size:.85rem; box-shadow:0 20px 50px -20px rgba(0,0,0,.5);}
.art-large.video{width:520px; height:293px; border-radius:10px; background:#000; color:#666;}
.graphic-title{font-size:1.3rem; font-weight:700; margin-bottom:.2rem;}
.graphic-artist{color:var(--text-dim); font-size:.95rem;}

.grid-cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:1.2rem;}
.pl-card{background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:1rem; text-decoration:none; color:inherit; cursor:pointer;}
.pl-card:hover{border-color:var(--accent-dim);}
.pl-cover{position:relative; overflow:hidden; width:100%; aspect-ratio:1; border-radius:7px; background:var(--surface-2); margin-bottom:.8rem; display:flex; align-items:center; justify-content:center; color:var(--text-faint); font-size:1.4rem;}
.pl-name{font-weight:600; font-size:.92rem; margin-bottom:.2rem;}
.pl-meta{font-size:.76rem; color:var(--text-faint);}
.pl-shared{display:inline-flex; align-items:center; gap:.3rem; font-size:.68rem; color:var(--accent); margin-top:.4rem;}

.btn{display:inline-flex; align-items:center; gap:.5rem; padding:.55rem 1.1rem; border-radius:6px; border:1px solid var(--border); background:var(--surface); color:var(--text); font-size:.82rem; font-weight:600; text-decoration:none;}
.btn:hover{border-color:var(--accent-dim);}
.btn-primary{background:var(--accent); border-color:var(--accent); color:#04191a;}
.btn-primary:hover{filter:brightness(1.08);}
.btn-add{background:var(--accent2); border-color:var(--accent2); color:#06210f;}
.btn-add:hover{filter:brightness(1.08);}
.btn-admin{background:var(--admin); border-color:var(--admin); color:#1c0d09;}
.btn-danger{color:var(--admin); border-color:var(--admin); background:none;}
.btn-sm{padding:.35rem .7rem; font-size:.76rem;}
.btn[disabled]{opacity:.4; pointer-events:none;}
.hidden{display:none;}

.field{margin-bottom:1.1rem;}
.field label{display:block; font-size:.75rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint); margin-bottom:.4rem;}
.field input, .field select, .field textarea{width:100%; background:var(--surface); border:1px solid var(--border); border-radius:7px; padding:.6rem .8rem; color:var(--text); font-size:.9rem; font-family:inherit;}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--accent-dim);}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:1rem;}
.field-help{font-size:.75rem; color:var(--text-faint); margin-top:.3rem;}

.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center;}
.login-card{width:340px; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:2.2rem;}
.login-brand{text-align:center; margin-bottom:1.6rem;}
.login-brand h1{font-size:1.15rem; margin:0;}
.remember{display:flex; align-items:center; gap:.5rem; font-size:.82rem; color:var(--text-dim); margin:.6rem 0 1.2rem;}

.admin-banner{display:flex; align-items:center; gap:.6rem; padding:.6rem 1rem; background:var(--admin-bg); border:1px solid var(--admin); border-radius:8px; color:var(--admin); font-size:.8rem; margin-bottom:1.4rem;}
.admin-tabs{display:flex; gap:.4rem; border-bottom:1px solid var(--border); margin-bottom:1.4rem; flex-wrap:wrap;}
.admin-tab{padding:.7rem 1.1rem; font-size:.86rem; color:var(--text-dim); border-bottom:2px solid transparent; text-decoration:none; cursor:pointer;}
.admin-tab.active{color:var(--text); border-bottom-color:var(--admin); font-weight:600;}
.admin-toolbar{display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; gap:1rem; flex-wrap:wrap;}
.bulk-actions{display:flex; gap:.5rem; align-items:center; font-size:.82rem; color:var(--text-dim);}
.status-tag{font-size:.68rem; padding:.15rem .5rem; border-radius:20px; font-weight:600;}
.status-ok{background:var(--ok); color:#0c1a10;}
.status-warn{background:var(--accent); color:#04191a;}
.status-pending{background:var(--surface-2); color:var(--text-faint);}
.log-box{background:var(--bg); border:1px solid var(--border); border-radius:7px; padding:.8rem 1rem; font-family:var(--mono); font-size:.76rem; color:var(--text-dim); max-height:160px; overflow-y:auto; white-space:pre-wrap; line-height:1.6;}
.collision-notice{display:flex; gap:.6rem; align-items:flex-start; background:var(--admin-bg); border:1px solid var(--admin); border-radius:8px; padding:.8rem 1rem; font-size:.82rem; color:var(--admin); margin-bottom:1rem;}

.tag-layout{display:grid; grid-template-columns:220px 1fr; gap:2rem;}
.tag-art{text-align:center;}
.tag-art .cover{width:100%; aspect-ratio:1; border-radius:10px; background:var(--surface-2); margin-bottom:.8rem; display:flex; align-items:center; justify-content:center; color:var(--text-faint);}

.modal-overlay{position:fixed; inset:0; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; z-index:50;}
.modal-overlay.hidden{display:none;}
.modal{width:420px; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:1.6rem;}
.modal h3{margin:0 0 .6rem; font-size:1.05rem;}
.modal p{color:var(--text-dim); font-size:.87rem;}
.modal-files{background:var(--bg); border:1px solid var(--border); border-radius:7px; padding:.6rem .8rem; font-size:.8rem; color:var(--text-dim); max-height:120px; overflow-y:auto; margin:.8rem 0;}
.modal-actions{display:flex; justify-content:flex-end; gap:.6rem; margin-top:1.2rem;}

.breadcrumb{font-size:.78rem; color:var(--text-faint); margin-bottom:1rem;}
.breadcrumb a{color:var(--text-dim); text-decoration:none;}

.pagination{display:flex; align-items:center; justify-content:center; gap:1rem; margin-top:1.6rem;}
.page-indicator{font-size:.82rem; color:var(--text-faint); font-variant-numeric:tabular-nums;}
.track-table th a:hover{color:var(--text);}

/* Zone de défilement indépendante pour la liste de titres : seule cette zone
   défile (pas toute la page, pas l'en-tête — voir .track-table-head), avec une
   scrollbar assortie au thème plutôt que celle du navigateur par défaut. Épaisseur
   doublée (9px -> 18px) : trop fine pour être attrapée facilement à la souris. */
.track-scroll{
  flex:1; min-height:0; overflow-y:auto; overflow-x:hidden;
  scrollbar-width:auto; scrollbar-color:var(--border) transparent;
}
.track-scroll::-webkit-scrollbar{width:18px;}
.track-scroll::-webkit-scrollbar-track{background:transparent;}
.track-scroll::-webkit-scrollbar-thumb{background:var(--border); border-radius:9px;}
.track-scroll::-webkit-scrollbar-thumb:hover{background:var(--text-faint);}

.load-more{display:flex; align-items:center; justify-content:center; padding:1.4rem 0;}
.spinner{width:22px; height:22px; border-radius:50%; border:2.5px solid var(--border); border-top-color:var(--accent); animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* Barre "lecture en cours" grisée et non cliquable quand la file est vide */
.now-playing.is-empty{opacity:.45; pointer-events:none;}

/* Bloc "hero" en haut de page (façon Koel) : image d'artiste seule, ou mosaïque de
   4 (vue d'ensemble multi-artistes) */
.page-hero-art{width:140px; height:140px; border-radius:10px; overflow:hidden; flex:none; display:grid; grid-template-columns:1fr; grid-template-rows:1fr;}
.page-hero-art.quad{grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr;}
.page-hero-art .hero-tile{position:relative; overflow:hidden; background:var(--surface-2); display:flex; align-items:center; justify-content:center; color:var(--text-faint);}
.page-hero-art .hero-tile img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:none;}

/* Bouton de filtre qui se transforme en champ de recherche intégré (façon Koel) */
.koel-filter{display:inline-flex; align-items:center; height:34px; background:var(--surface); border:1px solid var(--border); border-radius:7px; overflow:hidden; transition:border-color .15s;}
.koel-filter.open{border-color:var(--accent-dim);}
.koel-filter-icon{background:none; border:none; color:var(--text-dim); height:100%; padding:0 .55rem; display:flex; align-items:center; flex:none;}
.koel-filter-icon:hover{color:var(--text);}
.koel-filter input{background:none; border:none; outline:none; color:var(--text); font-size:.85rem; width:0; min-width:0; padding:0; transition:width .15s;}
.koel-filter.open input{width:180px; padding:0 .3rem 0 0;}
.koel-filter-clear{display:none; background:none; border:none; color:var(--text-faint); height:100%; padding:0 .55rem; align-items:center; font-size:1.1rem; line-height:1; flex:none;}
.koel-filter.open.has-value .koel-filter-clear{display:flex;}
.koel-filter-clear:hover{color:var(--text);}

.icon{width:18px; height:18px; stroke:currentColor; stroke-width:1.6; fill:none; stroke-linecap:round; stroke-linejoin:round; vertical-align:middle;}
.icon-lg{width:26px; height:26px;}

.topbar{display:flex; align-items:center; gap:.8rem; padding:0 1.3rem 1.1rem;}
.search-trigger{flex:1; display:flex; align-items:center; justify-content:space-between; gap:.5rem; background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:20px; padding:.5rem .5rem .5rem 1rem; color:var(--text-faint); font-size:.8rem;}
.search-trigger svg{order:2;}
.kbd{font-family:var(--mono); font-size:.68rem; background:var(--surface); border:1px solid var(--border); border-radius:4px; padding:.05rem .35rem; margin-left:auto;}

.global-search-overlay{position:fixed; inset:0; background:rgba(0,0,0,.55); display:flex; align-items:flex-start; justify-content:center; padding-top:12vh; z-index:60;}
.global-search-overlay.hidden{display:none;}
.global-search-box{width:520px; background:var(--surface); border:1px solid var(--border); border-radius:12px; overflow:hidden;}
.global-search-input{display:flex; align-items:center; gap:.7rem; padding:1rem 1.1rem; border-bottom:1px solid var(--border);}
.global-search-input input{flex:1; background:none; border:none; outline:none; color:var(--text); font-size:1rem;}
.gs-result-group{padding:.6rem 0;}
.gs-result-label{font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:var(--text-faint); padding:.3rem 1.1rem;}
.gs-result{display:flex; align-items:center; gap:.7rem; padding:.5rem 1.1rem; font-size:.87rem; cursor:pointer;}
.gs-result:hover{background:var(--surface-2);}

.filter-btn{background:none; border:1px solid var(--border); border-radius:7px; padding:.4rem .6rem; color:var(--text-dim);}
.filter-btn:hover{color:var(--text); border-color:var(--accent-dim);}

.ctx-menu{position:absolute; background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:.4rem; box-shadow:0 12px 30px -10px rgba(0,0,0,.5); min-width:200px; z-index:70;}
.ctx-menu.hidden{display:none;}
.ctx-item{display:flex; align-items:center; gap:.6rem; padding:.5rem .7rem; border-radius:5px; font-size:.85rem; color:var(--text-dim); cursor:pointer;}
.ctx-item:hover{background:var(--surface-2); color:var(--text);}
.ctx-sep{height:1px; background:var(--border); margin:.3rem 0;}

.gestion-layout{display:grid; grid-template-columns:1fr 460px; gap:0; align-items:stretch; min-height:calc(100vh - 220px);}
.gestion-layout.no-panel{grid-template-columns:1fr;}
.gestion-layout .table-col{padding-right:1.6rem; overflow-y:auto;}
.side-panel{border-left:1px solid var(--border); padding:0 0 0 1.8rem; align-self:stretch;}
.side-panel-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:1.1rem;}
.side-panel-empty{color:var(--text-faint); font-size:.85rem; text-align:center; padding:3rem 1rem;}
.side-panel .field{margin-bottom:.8rem;}
.side-panel .field label{font-size:.68rem; margin-bottom:.25rem;}
.side-panel .field input, .side-panel .field select, .side-panel .field textarea{padding:.4rem .55rem; font-size:.82rem; border-width:1px; border-radius:5px;}
.icon-btn-refresh{background:none; border:1px solid var(--border); border-radius:6px; padding:.4rem; color:var(--text-dim);}
.icon-btn-refresh:hover{color:var(--accent); border-color:var(--accent-dim);}

.explorer-row{user-select:none; cursor:pointer;}
.explorer-row.selected{background:var(--accent-bg);}
.explorer-row.selected .t-title{color:var(--accent);}
.explorer-row .fname-input{background:none; border:1px solid transparent; color:var(--text); font-size:.87rem; width:100%; border-radius:4px; padding:.15rem .3rem;}
.explorer-row .fname-input:focus{border-color:var(--accent-dim); background:var(--bg); outline:none;}

.nav-playlist{display:flex; align-items:center; gap:.6rem; padding:.42rem 1.3rem; font-size:.85rem; color:var(--text-dim); text-decoration:none;}
.nav-playlist:hover{color:var(--text); background:var(--surface-2);}
.nav-playlist .dot-sm{width:5px; height:5px; border-radius:50%; background:var(--text-faint); flex:none;}

.dl-line{margin-bottom:.9rem;}
.dl-line-head{display:flex; align-items:center; gap:.7rem; margin-bottom:.35rem; font-size:.84rem;}
.dl-line-url{font-family:var(--mono); font-size:.76rem; color:var(--text-faint);}
.dl-line-result{color:var(--text-dim); margin-left:auto;}
.dl-bar{height:4px; background:var(--surface-2); border-radius:2px; overflow:hidden;}
.dl-bar-fill{height:100%; background:var(--ok);}

/* Overlay CSS pur (pas l'API Fullscreen navigateur) : recouvre tout ce qui est visible
   du site, quel que soit l'état plein écran réel de la fenêtre/l'appareil. */
#fullscreen-view{display:none;}
#fullscreen-view.shown{
  display:flex; flex-direction:column; justify-content:flex-end;
  position:fixed; inset:0; z-index:100;
  width:100vw; height:100vh; background:#0a0a0c;
  background-size:cover; background-position:center;
}
.fs-close{position:absolute; top:1.4rem; right:1.6rem; z-index:1; background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.2); color:#fff; width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;}
.fs-close:hover{background:rgba(0,0,0,.55);}
.fs-cover-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:none;}
.fs-scrim{position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,.2) 60%);}
.fs-info{position:relative; padding:0 3rem 1.4rem; color:#fff;}
.fs-info .title{font-size:2rem; font-weight:700; margin-bottom:.3rem;}
.fs-artist-row{display:flex; align-items:center; gap:.7rem;}
.fs-info .artist{font-size:1.1rem; color:rgba(255,255,255,.7);}
/* Bouton paroles : toujours visible, s'allume en accent quand le morceau en a
   (sert aussi de témoin), reste cliquable même sans paroles pour fixer la préférence
   d'affichage utilisée sur les morceaux suivants. */
.fs-lyrics-btn{background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); color:rgba(255,255,255,.55); width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex:none;}
.fs-lyrics-btn:hover{color:#fff; border-color:rgba(255,255,255,.4);}
.fs-lyrics-btn.has-lyrics{color:var(--accent); border-color:var(--accent-dim); background:rgba(255,255,255,.12);}
.fs-lyrics-btn.toggled{background:var(--accent); color:#04191a; border-color:var(--accent);}
.fs-video-frame{position:relative; width:100%; height:100%; background:#000; display:flex; align-items:center; justify-content:center; color:#555;}
.fs-transport{position:relative; padding:0 3rem 2.2rem; display:flex; flex-direction:column; gap:.6rem;}

/* Panneau paroles : carte centrée par-dessus la pochette/vidéo, scrollable, respecte
   les retours à la ligne du tag (white-space:pre-line). */
.fs-lyrics{display:none; position:absolute; inset:0; z-index:1; align-items:center; justify-content:center; padding:6rem 2rem; background:rgba(6,8,10,.72); backdrop-filter:blur(6px);}
.fs-lyrics.shown{display:flex;}
.fs-lyrics-inner{max-width:640px; max-height:100%; overflow-y:auto; color:#f4f6f6; font-size:1.15rem; line-height:1.9; white-space:pre-line; text-align:center; padding:1rem; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.3) transparent;}
.fs-lyrics-inner.empty{color:rgba(255,255,255,.5); font-size:.95rem; font-style:italic;}

/* Vignette au survol de la barre de progression (plein écran vidéo uniquement) —
   positionnée en JS (voir onScrubMove dans player.js), masquée par défaut. */
.fs-scrub-preview{position:absolute; bottom:100%; left:0; margin-bottom:.7rem; display:none; flex-direction:column; align-items:center; gap:.35rem; pointer-events:none; transform:translateX(-50%);}
.fs-scrub-preview.shown{display:flex;}
.fs-scrub-canvas{width:160px; height:90px; border-radius:6px; background:#000; border:1px solid rgba(255,255,255,.25); box-shadow:0 8px 22px rgba(0,0,0,.55); display:block;}
.fs-scrub-time{font-size:.72rem; font-weight:600; color:#fff; background:rgba(0,0,0,.65); padding:.15rem .55rem; border-radius:4px;}

/* Panneau liste de lecture façon Haruna : glisse depuis le bord droit au survol d'une
   fine zone invisible, se rétracte dès que la souris quitte la zone ET le panneau (le
   panneau est un descendant DOM de la zone, donc :hover reste actif tant que la souris
   est sur l'un ou l'autre, même si le panneau déborde visuellement de la zone). */
/* Démarre sous le bouton de fermeture (évite tout chevauchement avec sa zone de clic) */
.fs-queue-hover-wrap{position:absolute; top:4.5rem; right:0; width:28px; height:calc(100% - 4.5rem); z-index:5;}
.fs-queue-panel{
  position:absolute; top:0; right:0; width:320px; height:100%;
  background:rgba(10,12,15,.94); backdrop-filter:blur(10px);
  border-left:1px solid rgba(255,255,255,.1);
  display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .25s ease;
}
.fs-queue-hover-wrap:hover .fs-queue-panel{transform:translateX(0);}
.fs-queue-header{padding:1.6rem 1.2rem 1rem; border-bottom:1px solid rgba(255,255,255,.08); flex:none;}
.fs-queue-now-title{font-size:1rem; font-weight:700; color:#fff; margin-bottom:.2rem;}
.fs-queue-now-artist{font-size:.8rem; color:rgba(255,255,255,.55);}
.fs-queue-list{flex:1; overflow-y:auto; padding:.5rem 0; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.3) transparent;}
.fs-queue-row{display:flex; align-items:center; gap:.7rem; padding:.5rem 1.2rem; cursor:pointer;}
.fs-queue-row:hover{background:rgba(255,255,255,.06);}
.fs-queue-row.playing{background:rgba(255,255,255,.08);}
.fs-queue-row .t-num{width:1.4rem; flex:none; color:rgba(255,255,255,.4); font-size:.78rem;}
.fs-queue-row-text{display:flex; flex-direction:column; gap:.1rem; min-width:0;}
.fs-queue-row-title{font-size:.84rem; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.fs-queue-row.playing .fs-queue-row-title{color:var(--accent);}
.fs-queue-row-artist{font-size:.72rem; color:rgba(255,255,255,.45); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}