:root{
  --bg:#0b0e14; --panel:#131826cc; --panel-solid:#131826; --border:#2a3350;
  --text:#e7ecf7; --muted:#8b93a8; --accent:#4fa3ff; --accent2:#ffb84f;
  --ok:#4fd18b; --warn:#ff6b6b;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;width:100%;height:100%;background:var(--bg);color:var(--text);
  font-family:"Segoe UI",Roboto,Arial,sans-serif;overflow:hidden;}
#canvas-container{position:absolute;inset:0;}
#canvas-container canvas{display:block;cursor:grab;}
#canvas-container.panning canvas{cursor:grabbing;}

.panel{position:absolute;z-index:5;background:var(--panel);backdrop-filter:blur(6px);
  border:1px solid var(--border);border-radius:10px;padding:12px 14px;
  box-shadow:0 8px 24px rgba(0,0,0,.35);font-size:13px;max-width:calc(100vw - 24px);overflow-x:hidden;}
.panel.collapsed{padding-bottom:12px;}
.panel.collapsed > *:not(h1){display:none !important;}
.panel-collapse{flex:0 0 auto;background:#1c2438;border:1px solid var(--border);color:var(--muted);
  border-radius:4px;width:20px;height:20px;line-height:1;font-size:13px;cursor:pointer;padding:0;}
.panel-collapse:hover{background:#26304a;color:var(--text);}
#controls{top:12px;left:12px;width:300px;}
#controls h1{font-size:14px;margin:0 0 8px;color:var(--accent);letter-spacing:.3px;}
#controls .row{margin-bottom:10px;}
#controls label{display:flex;justify-content:space-between;color:var(--muted);margin-bottom:4px;}
#controls label b{color:var(--text);font-weight:600;}
#controls input[type=range]{width:100%;accent-color:var(--accent);}
#controls .btnrow{display:flex;gap:8px;margin-top:6px;}
#controls button{flex:1;background:#1c2438;border:1px solid var(--border);color:var(--text);
  padding:7px 8px;border-radius:6px;cursor:pointer;font-size:12px;}
#controls button:hover{background:#26304a;}
#controls button.active{border-color:var(--accent);color:var(--accent);}

#stats{top:12px;right:12px;width:230px;}
#stats h1{font-size:14px;margin:0 0 8px;color:var(--accent2);}
#stats .grid{display:grid;grid-template-columns:1fr auto;gap:3px 8px;}
#stats .grid span:nth-child(odd){color:var(--muted);}
#stats .grid span:nth-child(even){text-align:right;font-variant-numeric:tabular-nums;}

#inspector{bottom:12px;right:12px;width:280px;display:none;}
#inspector h1{font-size:14px;margin:0 0 8px;color:var(--ok);}
#inspector .grid{display:grid;grid-template-columns:1fr auto;gap:3px 8px;margin-bottom:8px;}
#inspector .grid span:nth-child(odd){color:var(--muted);}
#inspector .grid span:nth-child(even){text-align:right;font-variant-numeric:tabular-nums;}
#inspector .state-badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;
  background:#26304a;border:1px solid var(--border);}
#inspector button{width:100%;background:#1c2438;border:1px solid var(--border);color:var(--muted);
  padding:6px;border-radius:6px;cursor:pointer;font-size:12px;margin-top:4px;}

#legend{bottom:12px;left:12px;width:230px;font-size:12px;max-height:260px;overflow:auto;}
#legend h1{font-size:14px;margin:0 0 8px;color:var(--muted);}
#legend .item{display:flex;align-items:center;gap:7px;margin-bottom:4px;}
#legend .sw{width:11px;height:11px;border-radius:3px;flex:0 0 auto;}

#demo-panel{top:12px;left:50%;transform:translateX(-50%);width:340px;max-height:88vh;overflow:auto;}
#demo-panel h1{font-size:14px;margin:0 0 10px;color:#ff9d4f;}
.demo-section{border-top:1px solid var(--border);padding-top:10px;margin-top:10px;}
.demo-section:first-of-type{border-top:none;padding-top:0;margin-top:0;}
.demo-row{margin-bottom:6px;font-size:12.5px;color:var(--text);}
.demo-row label{display:flex;align-items:center;gap:7px;cursor:pointer;}
.demo-row.between{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.demo-row b{font-weight:600;color:var(--text);}
button.small{background:#1c2438;border:1px solid var(--border);color:var(--text);
  padding:5px 9px;border-radius:6px;cursor:pointer;font-size:11.5px;white-space:nowrap;}
button.small:hover{background:#26304a;}
.demo-readout{margin-top:6px;font-size:12px;color:var(--muted);}
.demo-metric{display:flex;justify-content:space-between;gap:8px;padding:2px 0;
  font-variant-numeric:tabular-nums;}
.demo-metric span:first-child{color:var(--muted);}

#brain-log-title{font-size:12px;color:var(--ok);margin:10px 0 6px;font-weight:600;}
#brain-log{max-height:180px;overflow-y:auto;font-size:11.5px;line-height:1.5;
  background:#0d1220;border:1px solid var(--border);border-radius:6px;padding:6px 8px;margin-bottom:8px;}
.brain-line{margin-bottom:5px;}
.brain-t{color:var(--muted);font-variant-numeric:tabular-nums;margin-right:6px;}

#loading{position:absolute;inset:0;background:#0b0e14;display:flex;flex-direction:column;
  align-items:center;justify-content:center;z-index:50;gap:14px;}
#loading .spinner{width:42px;height:42px;border:3px solid #26304a;border-top-color:var(--accent);
  border-radius:50%;animation:spin 0.9s linear infinite;}
#loading .label{color:var(--muted);font-size:13px;}
@keyframes spin{to{transform:rotate(360deg);}}

.badge{display:inline-block;background:#3a2f5a;color:var(--text);border-radius:9px;
  padding:0 6px;font-size:10.5px;line-height:16px;margin-left:4px;font-variant-numeric:tabular-nums;}

#toast-stack{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:60;
  display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:none;}
.toast{background:var(--panel-solid);border:1px solid var(--border);border-left:4px solid var(--accent);
  border-radius:8px;padding:8px 14px;font-size:12.5px;color:var(--text);box-shadow:0 8px 24px rgba(0,0,0,.4);
  opacity:1;transition:opacity .3s, transform .3s;white-space:nowrap;}
.toast-ok{border-left-color:var(--ok);}
.toast-warn{border-left-color:var(--accent2);}
.toast-out{opacity:0;transform:translateY(-6px);}

/* -------- Catalogue produits -------- */
#catalog-panel{bottom:12px;left:50%;transform:translateX(-50%);width:380px;max-height:60vh;overflow:auto;}
#catalog-panel h1{font-size:14px;margin:0 0 10px;color:#4fd1ff;}
.cat-search{width:100%;background:#0d1220;border:1px solid var(--border);color:var(--text);
  padding:7px 9px;border-radius:6px;font-size:12.5px;margin-bottom:8px;}
.cat-hint{color:var(--muted);font-size:12px;padding:4px 0;}
.cat-row{border-top:1px solid var(--border);padding:8px 0;font-size:12px;}
.cat-row:first-child{border-top:none;}
.cat-row-main{display:flex;justify-content:space-between;align-items:baseline;gap:8px;}
.cat-sku{color:var(--muted);font-size:10.5px;font-variant-numeric:tabular-nums;white-space:nowrap;}
.cat-row-meta{color:var(--muted);margin-top:2px;}
.cat-row-extra{color:var(--muted);margin-top:2px;font-style:italic;}
.cat-stock-out{color:var(--warn);}
.cat-stock-low{color:var(--accent2);}
.cat-row-actions{display:flex;gap:6px;margin-top:6px;}

#catalog-feed{max-height:140px;overflow-y:auto;font-size:11.5px;line-height:1.6;margin-top:6px;}
.feed-row{border-bottom:1px dashed var(--border);padding:2px 0;}
.feed-t{color:var(--muted);font-variant-numeric:tabular-nums;margin-right:6px;}

/* -------- Incidents -------- */
#incidents-panel{top:340px;left:12px;width:300px;max-height:260px;overflow:auto;}
#incidents-panel h1{font-size:14px;margin:0 0 10px;color:var(--warn);}
.sys-log{max-height:260px;overflow-y:auto;font-size:11.5px;line-height:1.6;
  background:#0d1220;border:1px solid var(--border);border-radius:6px;padding:6px 8px;margin-top:6px;}
.sys-line{border-bottom:1px solid #1a2136;padding:3px 0;}
.sys-line:last-child{border-bottom:none;}
.sys-error{color:var(--warn);}
.sys-ok{color:var(--ok);}
.sys-warn{color:var(--accent2);}

/* -------- Insights -------- */
#insights-panel{top:280px;right:12px;width:260px;max-height:260px;overflow:auto;}
#insights-panel h1{font-size:14px;margin:0 0 10px;color:#4fd18b;}
.insights-eff-good{color:var(--ok);font-weight:600;}
.insights-eff-mid{color:var(--accent2);font-weight:600;}
.insights-eff-bad{color:var(--warn);font-weight:600;}

/* -------- Prédiction -------- */
#predictive-panel{top:560px;right:12px;width:260px;max-height:200px;overflow:auto;}
#predictive-panel h1{font-size:14px;margin:0 0 10px;color:#c874ff;}

/* -------- Batterie & recharge -------- */
#battery-panel{bottom:300px;right:12px;width:280px;max-height:260px;overflow:auto;}
#battery-panel h1{font-size:14px;margin:0 0 10px;color:#35d0ba;}
#battery-panel .row{margin-bottom:10px;}
#battery-panel .row label{display:flex;justify-content:space-between;color:var(--muted);margin-bottom:4px;font-size:12.5px;}
#battery-panel .row label b{color:var(--text);font-weight:600;}
#battery-panel input[type=range]{width:100%;accent-color:#35d0ba;}