:root {
  --purple: #6c2ff2;
  --purple-dark: #4217b8;
  --bg: #f6f3ff;
  --panel: #ffffff;
  --ink: #161417;
  --muted: rgba(22,20,23,.62);
  --line: rgba(22,20,23,.12);
  --warn: #ff6a1a;
  --green: #1b9e62;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
*{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans)} button{font:inherit;cursor:pointer}
.app-shell{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
.sidebar{background:#130b29;color:white;padding:22px;border-right:1px solid rgba(255,255,255,.1)} .logo{width:150px;margin-bottom:22px}.new-button{width:100%;border:0;border-radius:10px;background:var(--purple);color:white;padding:12px;font-weight:850}.sidebar nav{display:grid;gap:8px;margin-top:20px}.sidebar nav button{border:0;border-radius:10px;background:transparent;color:rgba(255,255,255,.62);padding:12px;text-align:left;font-weight:750}.sidebar nav .is-active{background:rgba(255,255,255,.12);color:white}
.workspace{padding:24px}.topbar{display:flex;justify-content:space-between;align-items:end;gap:18px;margin-bottom:18px}.topbar span,.panel-head span,.status-card span{color:var(--purple);font-family:var(--mono);font-size:.72rem;font-weight:950;text-transform:uppercase}.topbar h1{margin:4px 0 0;font-size:clamp(2rem,4vw,4.8rem);font-family:var(--mono);line-height:.9}.topbar button{border:0;border-radius:12px;background:var(--purple);color:white;padding:13px 18px;font-weight:850}
.tabs{display:flex;gap:8px;overflow:auto;margin-bottom:16px}.tabs button{border:1px solid var(--line);border-radius:999px;background:white;color:var(--muted);padding:10px 14px;font-weight:800}.tabs .is-active{background:var(--purple);color:white}
.layout{display:grid;grid-template-columns:1fr 310px;gap:16px}.main-panel,.right-panel{min-width:0}.screen{display:none;border:1px solid var(--line);border-radius:18px;background:white;padding:16px}.screen.is-active{display:block}.panel-head{display:flex;justify-content:space-between;gap:12px;margin-bottom:14px}.panel-head b{font-family:var(--mono)}
.image-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.image-grid button{overflow:hidden;border:1px solid var(--line);border-radius:14px;background:#fafafa;padding:0;text-align:left}.image-grid img{width:100%;height:130px;object-fit:cover}.image-grid span{display:block;padding:9px;font-size:.75rem;font-weight:800;color:var(--muted)}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px}.metrics div,.status-card,.slice-list,.train-card,.advisor,.deploy-grid button{border:1px solid var(--line);border-radius:14px;background:white;padding:14px}.metrics span{display:block;color:var(--muted);font-size:.72rem;font-weight:800}.metrics b{display:block;margin-top:6px;color:var(--purple);font-family:var(--mono);font-size:1.5rem}
.annotator{display:grid;grid-template-columns:1fr 230px;gap:14px}.canvas{position:relative;overflow:hidden;border-radius:16px;background:#ede8ff}.canvas img{width:100%;height:430px;object-fit:cover}.box{position:absolute;border:3px solid var(--purple);background:rgba(108,47,242,.1);color:white;padding:4px 6px;font-size:.7rem;font-style:normal;font-weight:850}.person{left:38%;top:32%;width:18%;height:32%}.forklift{left:55%;top:38%;width:28%;height:27%}.helmet{left:44%;top:25%;width:13%;height:12%;border-color:var(--warn)}
.annotator aside{border:1px solid var(--line);border-radius:16px;padding:14px}.annotator aside p,.status-card p,.advisor p{color:var(--muted);font-weight:750;line-height:1.4}.annotator aside button{border:0;border-radius:10px;background:var(--purple);color:white;padding:11px;font-weight:850}
.advisor{display:grid;grid-template-columns:150px 1fr;gap:14px;border-color:rgba(255,106,26,.35);background:linear-gradient(135deg,rgba(255,106,26,.08),white)}.advisor strong{color:var(--warn);font-family:var(--mono);font-size:3rem}.checks{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:12px}.checks div{border:1px solid var(--line);border-radius:12px;padding:12px;font-weight:850}.checks .pass{background:#ecfff6}.checks .warn{background:#fff3e8}
.bar{height:12px;border-radius:999px;background:#eee;overflow:hidden;margin:14px 0}.bar i{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--purple),var(--warn));transition:width .5s}.deploy-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.deploy-grid button{text-align:left}.deploy-grid .is-selected{border-color:var(--purple);box-shadow:0 0 0 3px rgba(108,47,242,.12)}.deploy-grid span{display:block;margin-top:6px;color:var(--muted);font-size:.78rem;font-weight:750}pre{overflow:auto;border-radius:14px;background:#15111f;color:#e7ddff;padding:14px}
.right-panel{display:grid;gap:14px;align-self:start}.status-card strong{display:block;margin:6px 0;color:var(--warn);font-family:var(--mono);font-size:4rem;line-height:.9}.slice-list{display:grid;gap:8px}.slice-list b{font-family:var(--mono)}.slice-list button{border:1px solid var(--line);border-radius:10px;background:#fafafa;padding:10px;text-align:left;font-weight:850}.slice-list span{float:right;color:var(--warn);font-size:.72rem}
@media(max-width:1050px){.app-shell{grid-template-columns:1fr}.sidebar{display:none}.layout{grid-template-columns:1fr}.image-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.workspace{padding:14px}.topbar{display:grid}.metrics,.checks,.deploy-grid,.annotator{grid-template-columns:1fr}.image-grid{grid-template-columns:1fr}}