/* SAM — palette violet/vert (segmentation vivante) */
:root{
  --bg-deep:#02040a; --bg-elev:#08111e; --bg-card:rgba(10,18,36,0.6);
  --border:rgba(168,121,255,0.16); --border-strong:rgba(168,121,255,0.32);
  --text:#e8edf5; --text-muted:#a3b0c5; --text-soft:#7d8aa1;
  --accent:#a879ff; --accent-deep:#7b4bd6; --accent-soft:rgba(168,121,255,0.10);
  --accent-glow:rgba(168,121,255,0.35);
  --secondary:#39ff14;
  --danger:#ff2a1a; --danger-soft:rgba(255,42,26,0.14);
  --ok:#39ff14; --ok-soft:rgba(57,255,20,0.10);
  --radius:14px; --radius-sm:8px;
  --tween:200ms cubic-bezier(.2,.8,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg-deep)}
body{
  margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:16px;line-height:1.55;color:var(--text);background:transparent;
  min-height:100dvh;-webkit-font-smoothing:antialiased;
}
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{position:fixed;left:1rem;top:1rem;width:auto;height:auto;background:var(--accent);color:var(--bg-deep);padding:.6rem 1rem;border-radius:8px;font-weight:700;z-index:100}

.neural-bg{position:fixed;inset:0;width:100vw;height:100dvh;z-index:-2;pointer-events:none;display:block}
.neural-overlay{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,0.10) 0 1px,transparent 1px 3px),
             radial-gradient(ellipse at center,transparent 25%,rgba(0,0,0,0.55) 90%);
  mix-blend-mode:multiply}

.back-to-menu{
  position:fixed;top:12px;left:12px;z-index:10;
  padding:.55rem .85rem;border-radius:999px;background:var(--bg-card);
  border:1px solid var(--border);color:var(--text-muted);text-decoration:none;
  font-weight:600;font-size:.85rem;backdrop-filter:blur(10px);
  transition:background var(--tween),color var(--tween),border-color var(--tween);
}
.back-to-menu:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}

.topbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.85rem;padding:1.5rem 1rem .8rem;text-align:center}
.topbar .brand{
  font-size:2rem;font-weight:900;letter-spacing:.15em;
  background:linear-gradient(135deg,var(--accent),var(--secondary));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.topbar .tag{
  font-size:.7rem;font-family:ui-monospace,SFMono-Regular,monospace;color:var(--text-soft);
  letter-spacing:.14em;text-transform:uppercase;padding:.35rem .8rem;
  border:1px solid var(--border);border-radius:999px;background:var(--bg-card);
}

.layout{max-width:960px;margin:0 auto;padding:1rem 1.25rem 4rem;display:grid;gap:1rem}
.panel{
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);
  padding:1.4rem 1.6rem;backdrop-filter:blur(10px);
  animation:panelIn .35s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes panelIn{from{opacity:0;transform:translateY(6px)}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.panel{animation:none}}

.p-title{font-size:1.2rem;margin:0 0 .75rem;display:flex;align-items:center;gap:.7rem;line-height:1.3}
.p-num{
  display:inline-grid;place-items:center;width:1.9rem;height:1.9rem;
  background:var(--accent-soft);color:var(--accent);
  border:1px solid var(--border-strong);border-radius:8px;
  font-family:ui-monospace,SFMono-Regular,monospace;font-weight:800;font-size:.95rem;
}
.p-hint{margin:.4rem 0;color:var(--text-muted);font-size:.92rem;line-height:1.55}
.p-hint strong{color:var(--accent);font-weight:700}
.p-hint em{color:var(--secondary);font-style:normal;font-weight:600}
.p-hint code{padding:.1rem .35rem;background:var(--accent-soft);color:var(--accent);border-radius:4px;font-size:.85em;font-family:ui-monospace,monospace}
.p-hint a{color:var(--secondary);text-decoration:underline}

.btn{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.6rem 1rem;border-radius:var(--radius-sm);
  background:var(--bg-elev);color:var(--text);
  border:1px solid var(--border-strong);
  font-weight:600;font-size:.9rem;cursor:pointer;text-decoration:none;
  transition:background var(--tween),border-color var(--tween),transform var(--tween);
}
.btn:hover:not(:disabled){background:var(--accent-soft);border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.btn-primary{
  background:linear-gradient(135deg,var(--accent),var(--accent-deep));
  color:#fff;border-color:transparent;
}
.btn-primary:hover:not(:disabled){background:linear-gradient(135deg,var(--accent),var(--accent));color:#fff;transform:translateY(-1px)}

.progress-row{display:flex;flex-wrap:wrap;gap:.6rem;margin:.5rem 0}
.prog-item{
  display:flex;align-items:center;gap:.55rem;padding:.5rem .85rem;
  border:1px solid var(--border);border-radius:999px;background:var(--bg-elev);font-size:.85rem;
}
.prog-item.is-active{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.prog-item.is-done{border-color:var(--ok);color:var(--ok);background:var(--ok-soft)}
.prog-item.is-error{border-color:var(--danger);color:var(--danger);background:var(--danger-soft)}
.pi-name{font-weight:600}
.pi-status{color:var(--text-soft);font-family:ui-monospace,monospace;font-size:.78rem}
.prog-item.is-active .pi-status,.prog-item.is-done .pi-status,.prog-item.is-error .pi-status{color:inherit}
.pi-icon{
  display:inline-grid;place-items:center;width:18px;height:18px;flex-shrink:0;
  border-radius:50%;border:2px solid var(--text-soft);background:transparent;position:relative;
  transition:border-color var(--tween),background var(--tween);
}
.prog-item.is-active .pi-icon{border-color:var(--accent);border-top-color:transparent;animation:spinIcon .8s linear infinite}
@keyframes spinIcon{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.prog-item.is-active .pi-icon{animation:none}}
.prog-item.is-done .pi-icon{border-color:var(--ok);background:var(--ok)}
.prog-item.is-done .pi-icon::before{content:"";position:absolute;width:5px;height:9px;border:solid #001100;border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-2px)}
.prog-item.is-error .pi-icon{border-color:var(--danger);background:var(--danger)}
.prog-item.is-error .pi-icon::before,.prog-item.is-error .pi-icon::after{content:"";position:absolute;width:10px;height:2px;background:#1a0000}
.prog-item.is-error .pi-icon::before{transform:rotate(45deg)}
.prog-item.is-error .pi-icon::after{transform:rotate(-45deg)}

.progress-bar{width:100%;height:6px;background:var(--bg-elev);border-radius:999px;overflow:hidden;margin:.5rem 0}
.progress-bar-fill{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--secondary));transition:width .3s}

.controls-row{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;margin-top:.75rem}
.topk-inline{
  display:flex;align-items:center;gap:.5rem;padding:.35rem .6rem;
  border:1px solid var(--border);border-radius:999px;background:var(--bg-elev);
  font-size:.82rem;color:var(--text-muted);
}
.topk-inline span{font-weight:600}
.mode-select{background:transparent;color:var(--text);border:none;font-family:inherit;font-size:.85rem;padding:.15rem .3rem;cursor:pointer}
.mode-select option{background:var(--bg-elev);color:var(--text)}

/* Samples row */
.samples-row{
  display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.75rem;align-items:center;
}
.samples-label{
  font-size:.7rem;color:var(--text-soft);font-family:ui-monospace,monospace;
  text-transform:uppercase;letter-spacing:.1em;font-weight:700;
}
.sample-btn{
  padding:.45rem .8rem;border-radius:8px;
  background:var(--bg-elev);color:var(--text);border:1px solid var(--border);
  font-size:.82rem;cursor:pointer;
  transition:border-color var(--tween),background var(--tween),transform var(--tween);
}
.sample-btn:hover{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);transform:translateY(-1px)}

/* Dropzone */
.dropzone{
  padding:1.5rem;border:2px dashed var(--border-strong);border-radius:var(--radius);
  text-align:center;background:var(--bg-elev);
  display:flex;flex-direction:column;align-items:center;gap:.75rem;
  transition:border-color var(--tween),background var(--tween);
}
.dropzone.is-drag{border-color:var(--accent);background:var(--accent-soft)}
.dz-hint{margin:0;color:var(--text-muted);font-size:.95rem}
.dz-small{margin:0;color:var(--text-soft);font-size:.75rem}

/* Seg canvas + toolbar */
.seg-toolbar{
  display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;
  padding:.55rem .75rem;background:var(--bg-elev);border:1px solid var(--border);
  border-radius:8px;margin-bottom:.75rem;
}
.prompt-mode-label{font-size:.72rem;color:var(--text-soft);text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.prompt-mode{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.4rem .7rem;border-radius:6px;
  background:transparent;color:var(--text-muted);
  border:1px solid var(--border);cursor:pointer;font-size:.78rem;
  transition:border-color var(--tween),background var(--tween),color var(--tween);
}
.prompt-mode:hover{border-color:var(--accent-soft);color:var(--text)}
.prompt-mode.is-active{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block}
.dot-fg{background:var(--secondary);box-shadow:0 0 8px var(--secondary)}
.dot-bg{background:var(--danger);box-shadow:0 0 8px var(--danger)}
.kbd{
  padding:.1rem .35rem;background:var(--bg-deep);border:1px solid var(--border);
  border-radius:4px;font-size:.65rem;font-family:ui-monospace,monospace;color:var(--text-soft);
}
.seg-status{
  margin-left:auto;font-size:.78rem;color:var(--text-muted);
  font-family:ui-monospace,monospace;
}

.canvas-wrap{
  position:relative;background:#000;
  border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;
  min-height:200px;display:flex;align-items:center;justify-content:center;
}
#seg-canvas{
  display:block;max-width:100%;height:auto;
  cursor:crosshair;image-rendering:optimizeQuality;
}
.seg-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem}

/* Nouveaux boutons toolbar (undo/redo/auto-seg/mask-only) */
.tool-sep{
  display:inline-block;width:1px;height:20px;
  background:var(--border);margin:0 .1rem;
}
.tool-btn{
  padding:.4rem .7rem;border-radius:6px;
  background:var(--bg-elev);border:1px solid var(--border);color:var(--text-muted);
  font-size:.78rem;font-weight:600;cursor:pointer;
  transition:border-color var(--tween),color var(--tween),background var(--tween);
  white-space:nowrap;
}
.tool-btn:not(:disabled):hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.tool-btn:disabled{opacity:.4;cursor:not-allowed}
.tool-btn.is-active{background:var(--accent);color:#fff;border-color:var(--accent)}
.tool-btn-primary{
  background:linear-gradient(135deg,var(--accent),var(--secondary));
  color:#0a1a02;border-color:transparent;font-weight:700;
}
.tool-btn-primary:not(:disabled):hover{filter:brightness(1.1);color:#0a1a02}

/* Journal d'exécution */
.log-details{
  margin-top:.75rem;
  border:1px solid var(--border);border-radius:8px;
  background:var(--bg-elev);
  transition:border-color var(--tween);
}
.log-details[open]{border-color:var(--accent-soft)}
.log-details > summary{
  cursor:pointer;padding:.55rem .85rem;
  font-size:.75rem;color:var(--text-soft);font-family:ui-monospace,monospace;
  letter-spacing:.05em;text-transform:uppercase;font-weight:700;
  list-style:none;
  transition:color var(--tween);
}
.log-details > summary::-webkit-details-marker{display:none}
.log-details > summary:hover{color:var(--accent)}
.log-panel{
  max-height:240px;overflow-y:auto;padding:.4rem .55rem;
  border-top:1px solid var(--border);
  font-family:ui-monospace,SFMono-Regular,monospace;
  font-size:.72rem;line-height:1.55;
}
.log-entry{
  padding:.15rem .3rem;margin-bottom:.1rem;border-radius:3px;
  color:var(--text-muted);
  display:flex;gap:.5rem;
}
.log-entry .log-time{color:var(--text-soft);font-size:.68rem;flex-shrink:0}
.log-entry.log-ok{color:var(--secondary)}
.log-entry.log-warn{color:#ffb37c}
.log-entry.log-error{color:var(--danger);background:var(--danger-soft)}
.log-entry.log-info{color:var(--text-muted)}

.stats{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.75rem;justify-content:center}
.chip{
  padding:.3rem .7rem;border-radius:999px;font-size:.7rem;font-weight:700;
  font-family:ui-monospace,SFMono-Regular,monospace;letter-spacing:.05em;
  border:1px solid var(--border-strong);background:var(--bg-elev);color:var(--secondary);
}

@media (max-width:640px){
  .layout{padding:.75rem .75rem 3rem}
  .panel{padding:1rem 1.1rem}
  .topbar .brand{font-size:1.5rem}
  .seg-status{width:100%;margin-left:0;text-align:center}
}