:root {
  --bg: #0e1420;
  --panel: #161e2e;
  --panel-2: #1c2739;
  --border: #273349;
  --text: #e8edf6;
  --muted: #93a1b8;
  --accent: #f59e0b;
  --accent-2: #fbbf24;
  --success: #22c55e;
  --danger: #ef4444;
  --radius: 14px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: radial-gradient(1200px 600px at 80% -10%, #1a2740 0%, var(--bg) 55%);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, sans-serif;
  min-height: 100vh;
  display: flex; flex-direction: column;
}
header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 22px; border-bottom: 1px solid var(--border);
  background: rgba(14, 20, 32, .8); position: sticky; top: 0; backdrop-filter: blur(8px);
  z-index: 5;
}
.brand { font-size: 18px; display: flex; align-items: center; gap: 8px; }
.brand .logo { font-size: 22px; }
.tag { color: var(--muted); font-size: 12px; border: 1px solid var(--border); border-radius: 999px; padding: 2px 8px; }
.badge {
  color: var(--muted); font-size: 13px; border: 1px solid var(--border);
  background: var(--panel); border-radius: 999px; padding: 6px 12px;
}
main { display: grid; grid-template-columns: 280px 1fr; gap: 20px; padding: 22px; flex: 1; align-items: start; }
@media (max-width: 920px) { main { grid-template-columns: 1fr; } }
.panel, .workspace {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px;
}
.panel h2 { margin: 0 0 12px; font-size: 15px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.bg-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
@media (max-width: 920px) { .bg-list { grid-template-columns: repeat(4, 1fr); } }
.bg-item {
  position: relative; border: 2px solid var(--border); border-radius: 10px; overflow: hidden;
  cursor: pointer; background: var(--panel-2); aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center;
  transition: border-color .15s, transform .1s;
}
.bg-item:hover { transform: translateY(-1px); }
.bg-item.selected { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(245, 158, 11, .15); }
.bg-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bg-item .bg-icon { font-size: 26px; }
.bg-name {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 6px; font-size: 11px;
  background: linear-gradient(transparent, rgba(0,0,0,.85)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bg-del {
  position: absolute; top: 4px; right: 4px; border: none; background: rgba(0,0,0,.6); color: #fff;
  border-radius: 6px; width: 20px; height: 20px; font-size: 11px; cursor: pointer; display: none; line-height: 1;
}
.bg-item:hover .bg-del, .bg-item:focus-within .bg-del { display: block; }
.bg-del:hover { background: var(--danger); }
#dropzone {
  border: 2px dashed var(--border); border-radius: var(--radius); background: var(--panel-2);
  cursor: pointer; transition: border-color .15s, background .15s;
}
#dropzone:hover, #dropzone.drag { border-color: var(--accent); background: #20293d; }
.dz-inner { text-align: center; padding: 44px 20px; }
.dz-icon { font-size: 42px; margin-bottom: 8px; }
.dz-inner p { margin: 4px 0; }
.hint { color: var(--muted); font-size: 12.5px; }
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; margin-top: 14px; }
.thumb { position: relative; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--panel-2); }
.thumb img { width: 100%; height: 78px; object-fit: cover; display: block; }
.thumb .t-name { font-size: 10.5px; color: var(--muted); padding: 4px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thumb .t-del {
  position: absolute; top: 4px; right: 4px; border: none; background: rgba(0,0,0,.65); color: #fff;
  border-radius: 6px; width: 20px; height: 20px; font-size: 11px; cursor: pointer; opacity: 0; transition: opacity .15s;
}
.thumb:hover .t-del, .thumb:focus-within .t-del { opacity: 1; }
.thumb .t-del:hover { background: var(--danger); }
.options { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-top: 16px; padding: 12px 14px; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius); }
.opt { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.opt input[type="range"] { accent-color: var(--accent); width: 130px; }
.opt .val { min-width: 18px; text-align: center; font-weight: 700; color: var(--accent-2); }
.opt select { background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px; }
.opt.strength.disabled { opacity: .45; pointer-events: none; }
.actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.btn {
  border: 1px solid var(--border); background: var(--panel-2); color: var(--text);
  border-radius: 10px; padding: 10px 18px; font-size: 14.5px; cursor: pointer; transition: filter .15s, transform .1s;
  display: inline-flex; align-items: center; gap: 6px;
}
.btn:hover:not(:disabled) { filter: brightness(1.15); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #161004; font-weight: 700; }
.btn.success { background: var(--success); border-color: var(--success); color: #04170a; font-weight: 700; }
.btn.small { padding: 8px 12px; font-size: 13px; width: 100%; justify-content: center; }
.progress { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.progress .bar { flex: 1; height: 10px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
#bar-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .3s; }
#progress-text { color: var(--muted); font-size: 13px; min-width: 60px; text-align: right; }
.results { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; margin-top: 18px; }
.result { min-width: 0; display: flex; gap: 10px; align-items: center; background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px; padding: 10px; }
.result.done { border-color: rgba(34, 197, 94, .4); }
.result.error { border-color: rgba(239, 68, 68, .5); }
.r-thumb { width: 74px; height: 56px; object-fit: cover; border-radius: 8px; flex-shrink: 0; background: #0a0f18; }
.r-ph { width: 74px; height: 56px; border-radius: 8px; flex-shrink: 0; background: #0a0f18; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.r-info { min-width: 0; flex: 1; }
.r-name { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r-meta { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.r-meta .plates { color: var(--accent-2); }
.r-meta .err { color: #fca5a5; }
.r-dl {
  border: none; background: var(--success); color: #04170a; font-weight: 700; border-radius: 8px;
  padding: 7px 10px; cursor: pointer; font-size: 12px; flex-shrink: 0;
}
footer {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 22px; border-top: 1px solid var(--border); color: var(--muted); font-size: 12.5px;
}
footer a { color: var(--accent-2); text-decoration: none; }
#rt-overlay, #view-overlay {
  position: fixed; inset: 0; background: rgba(5, 8, 14, .88);
  display: flex; align-items: center; justify-content: center; z-index: 50; padding: 18px;
}
.rt-box { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 14px; max-width: 94vw; max-height: 94vh; display: flex; flex-direction: column; gap: 10px; }
.rt-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; }
.rt-head button { border: none; background: var(--panel-2); color: var(--text); border-radius: 8px; width: 26px; height: 26px; cursor: pointer; }
#rt-stage { position: relative; display: inline-block; overflow: auto; max-width: 100%; }
#rt-img { display: block; max-width: 100%; max-height: 70vh; }
#rt-canvas { position: absolute; inset: 0; cursor: crosshair; }
.rt-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.r-rt { border: none; background: var(--accent); color: #161004; font-weight: 700; border-radius: 8px; padding: 7px 9px; cursor: pointer; font-size: 12px; flex-shrink: 0; }
.r-rt:hover { filter: brightness(1.12); }
.r-view { border: none; background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 6px 9px; cursor: pointer; font-size: 12px; flex-shrink: 0; }
.r-view:hover { filter: brightness(1.2); }
/* Trois boutons de même taille : la carte ne déborde plus quand le texte est long */
.r-view, .r-dl, .r-rt { box-sizing: border-box; width: 36px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
#view-img { display: block; max-width: 100%; max-height: 82vh; object-fit: contain; border-radius: 8px; }
.view-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.head-right { display: flex; align-items: center; gap: 10px; }
.btn.small-inline { padding: 6px 12px; font-size: 13px; }
.open-banner { background: #7f1d1d; color: #fee2e2; text-align: center; padding: 8px 14px; font-size: 13px; }
.login-overlay { position: fixed; inset: 0; background: rgba(5, 8, 14, .94); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 18px; }
.login-box { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; width: min(360px, 100%); display: flex; flex-direction: column; gap: 12px; }
.login-box h2 { margin: 0; font-size: 18px; }
.login-box input { background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 10px; font-size: 15px; }
.login-box input:focus-visible, .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.login-error { color: #fca5a5; font-size: 13px; min-height: 18px; }
/* Un display explicite (flex, inline-flex) écrase l'attribut hidden : on le rétablit partout */
[hidden] { display: none !important; }
.bg-item:focus-visible, #dropzone:focus-visible, .thumb .t-del:focus-visible, .bg-del:focus-visible,
.r-dl:focus-visible, .r-rt:focus-visible, .r-view:focus-visible, #rt-close:focus-visible, #view-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }