:root{
  /* Charte alignée sur PhotoStyle "darkroom-mono" : slate froid + accent cyan */
  --bg:#10141b; --bg2:#151a22; --panel:#1a212b; --panel-hover:#202836; --border:#28313f;
  --text:#dee2e9; --muted:#9aa3b2;
  --accent:#00bcff; --accent-2:#8ae0ff; --accent-soft:rgba(0,188,255,.14);
  --ok:#5fae80; --warn:#d2a45a; --alert:#d77b72; --neutral:#7e8898;
  --radius:12px;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:14px;
}
.hidden{display:none !important}

/* Topbar */
.topbar{
  display:flex; align-items:center; gap:18px; padding:10px 18px;
  background:var(--bg2); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:10;
}
/* Logo / lockup — harmonisé avec PhotoStyle : icône + mot, élément d'accent cyan.
   Le corps de l'icône suit currentColor (blanc) ; l'œillet du tag passe en cyan
   exactement comme l'objectif de l'appareil photo côté PhotoStyle. */
.gmc-lockup{display:inline-flex; align-items:center; gap:.5em}
.gmc-tag{flex:none; width:1.25em; height:1.25em; color:var(--text)}
.gmc-tag__hole{color:var(--accent)}            /* stroke=currentColor hérité -> cyan */
.gmc-word .ac{color:var(--accent)}

.brand{font-weight:700; font-size:16px; letter-spacing:.5px; display:inline-flex; align-items:center; gap:.5em}
.brand .ac{color:var(--accent)}
.tabs{display:flex; gap:6px; flex:1}
.tab{
  background:transparent; color:var(--muted); border:1px solid transparent;
  padding:7px 12px; border-radius:8px; cursor:pointer; font:inherit;
}
.tab:hover{color:var(--text)}
.tab.active{color:var(--text); background:var(--panel); border-color:var(--border)}
.nas-state{font-size:12px; color:var(--muted)}
.nas-state .dot{display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:6px}

/* Layout */
main{padding:18px; max-width:1280px; margin:0 auto}
h2{margin:0 0 14px; font-size:18px}
.muted{color:var(--muted)}

/* Tableau de bord : largeur ~2/3 de la page, tout aligné au même bloc que les KPI */
#dash{width:66vw; max-width:1120px; min-width:0}
@media(max-width:900px){ #dash{width:100%} }

/* Cartes stats — toujours 5 colonnes, alignées au bloc #dash */
.cards{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; margin-bottom:18px}
@media(max-width:760px){ .cards{grid-template-columns:repeat(2,minmax(0,1fr))} }
.card{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:14px}
.card .n{font-size:26px; font-weight:700}
.card .l{color:var(--muted); font-size:12px; margin-top:4px}

/* Boutons */
.btn{font:inherit; border-radius:8px; padding:8px 14px; cursor:pointer; border:1px solid var(--border);
  background:var(--panel); color:var(--text); transition:transform .08s ease, box-shadow .2s ease, filter .2s ease, border-color .2s ease}
.btn:hover{border-color:var(--accent)}
/* Bouton principal : étiquette teintée façon PhotoStyle (pas de bleu plein) */
.btn.primary{font-weight:600; color:var(--accent-2);
  background:var(--accent-soft);
  border:1px solid color-mix(in srgb, var(--accent) 45%, transparent)}
.btn.primary:hover{color:var(--accent-2); border-color:var(--accent);
  background:color-mix(in srgb, var(--accent) 22%, transparent)}
.btn.primary:active{transform:scale(.98)}
.btn.ghost{background:transparent}
.btn.danger{background:color-mix(in srgb, var(--alert) 16%, transparent);
  border:1px solid color-mix(in srgb, var(--alert) 55%, transparent); color:var(--alert)}
.btn.small{padding:4px 8px; font-size:12px}

/* Formulaires */
input[type=text], input[type=password], input[type=email], input[type=search], select, textarea{
  font:inherit; background:var(--bg); color:var(--text);
  border:1px solid var(--border); border-radius:8px; padding:8px 10px;
}
input[type=text]:focus, input[type=password]:focus, input[type=email]:focus,
input[type=search]:focus, select:focus, textarea:focus{outline:none; border-color:var(--accent)}
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:14px}
label.check{display:flex; align-items:center; gap:6px; color:var(--muted)}

/* Tables / listes */
table{width:100%; border-collapse:collapse}
th,td{text-align:left; padding:8px 10px; border-bottom:1px solid var(--border)}
th{color:var(--muted); font-weight:600}
tr.clickable{cursor:pointer}
tr.clickable:hover td{background:var(--bg2)}
tr.selected td{background:var(--accent-soft)}

/* Galerie */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px}
.thumb{
  background:var(--panel); border:1px solid var(--border); border-radius:10px;
  overflow:hidden; cursor:pointer; position:relative;
}
.thumb.selected{border-color:var(--accent); box-shadow:0 0 0 2px var(--accent) inset}
.thumb img{width:100%; height:140px; object-fit:cover; display:block; background:var(--bg2)}
.thumb .meta{padding:6px 8px}
.thumb .fn{font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.thumb .kw{display:flex; flex-wrap:wrap; gap:3px; margin-top:4px}
.badge{font-size:10px; background:var(--accent-soft);
  border:1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  padding:1px 7px; border-radius:999px; color:var(--accent-2)}
.thumb .check{position:absolute; top:6px; left:6px; width:18px; height:18px}
.no-kw{position:absolute; top:6px; right:6px; font-size:9px; background:var(--warn); color:#000; padding:1px 5px; border-radius:8px}

/* Barre de scan : modes à gauche, actions (case + bouton) à droite */
.scan-head{display:flex; justify-content:space-between; align-items:center; gap:14px;
  flex-wrap:wrap; margin:6px 0 12px}
.scan-actions{display:flex; align-items:center; gap:16px; margin-left:auto}

/* Segmented control (Chemin / Dossiers NAS) — pilule façon PhotoStyle */
.scan-modes{display:inline-flex; gap:3px; padding:3px; background:var(--bg2);
  border:1px solid var(--border); border-radius:999px}
.seg{display:flex; align-items:center; gap:7px; padding:6px 16px; border-radius:999px;
  color:var(--muted); cursor:pointer; user-select:none; font-size:13px;
  transition:background .15s ease, color .15s ease, box-shadow .15s ease}
.seg:hover{color:var(--text)}
.seg.active{color:var(--accent-2); background:var(--accent-soft);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent)}
.seg input{display:none}
.path-input{align-items:stretch; gap:0}
.path-input .prefix{display:flex; align-items:center; padding:0 10px; color:var(--muted);
  background:var(--bg2); border:1px solid var(--border); border-right:none;
  border-radius:8px 0 0 8px; white-space:nowrap; font-size:13px}
.path-input input{flex:1; min-width:200px; border-radius:0 8px 8px 0}
.nas-browser select{background:var(--bg); color:var(--text); border:1px solid var(--border);
  border-radius:8px; padding:6px}
.nas-browser option{padding:3px 4px}
.nas-browser #nasCur{font-size:12px; word-break:break-all}

/* Pagination */
.pager{display:flex; gap:10px; align-items:center; justify-content:center; margin:18px 0}

/* Barre de sélection — inline, en tête de galerie (sous la ligne de filtres) */
.action-bar{
  display:flex; gap:10px; align-items:center; background:var(--bg2);
  border:1px solid var(--border); border-radius:12px; padding:10px 14px; margin:0 0 14px;
}
.action-bar input{flex:1; min-width:240px}

/* Modal */
.modal{position:fixed; inset:0; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; z-index:30}
.modal-box{background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:20px; width:min(520px,92vw)}
.modal-box h3{margin:0 0 12px}
.modal-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:18px}
.summary{background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:12px; line-height:1.6}

/* Auto-complétion des mots-clés */
.ac-list{
  position:fixed; z-index:50; max-height:260px; overflow-y:auto;
  background:var(--panel); border:1px solid var(--accent);
  border-radius:8px; padding:4px; box-shadow:0 8px 24px rgba(0,0,0,.45);
}
.ac-item{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:6px 10px; border-radius:6px; cursor:pointer; white-space:nowrap;
}
.ac-item:hover, .ac-item.active{background:var(--accent-soft); color:var(--accent-2)}
.ac-item .ac-count{
  font-size:11px; color:var(--muted);
  background:var(--bg2); border:1px solid var(--border);
  border-radius:999px; padding:0 7px;
}

/* Toast */
.toast{
  position:fixed; bottom:80px; left:50%; transform:translateX(-50%);
  background:var(--panel); border:1px solid var(--accent); color:var(--text);
  padding:10px 16px; border-radius:10px; z-index:40;
}

/* Détail photo */
.detail{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.detail img{width:100%; border-radius:10px; border:1px solid var(--border)}
.kw-line{display:flex; flex-wrap:wrap; gap:6px; margin:10px 0}
.kw-chip{display:inline-flex; align-items:center; gap:6px; background:var(--bg2); border:1px solid var(--border); border-radius:14px; padding:3px 10px}
.kw-chip button{background:none; border:none; color:var(--alert); cursor:pointer; font-size:14px; padding:0}
@media(max-width:760px){.detail{grid-template-columns:1fr}}