/* ═══════════════════════════════════════════════════════════════
   SketchCAD v3 — 123D Design / early Fusion 360 inspired
   Palette: blue-grey neutrals + Fusion-teal accent + amber highlight
   ═══════════════════════════════════════════════════════════════ */
:root{
  --bg0:#1a1d21;         /* viewport */
  --bg1:#22262b;         /* panels */
  --bg2:#2b3037;         /* buttons default */
  --bg3:#353a42;         /* button hover */
  --bg4:#3f4650;         /* button pressed */
  --bd:#2f343a;          /* thin border */
  --bd2:#40474f;         /* stronger border */

  --t0:#eaecef;          /* primary text */
  --t1:#b0b6bd;          /* secondary text */
  --t2:#7d848c;          /* tertiary text */
  --t3:#565c63;          /* disabled */

  --teal:#4fbfb5;        /* accent — action */
  --teal-d:#3a9990;
  --teal-l:#6dd8ce;
  --amber:#e0a95c;       /* highlighted / pinned */
  --red:#d6644a;         /* destructive */
  --blue:#5e9de8;        /* selection / info */
  --green:#68c26f;       /* success */

  --shadow-sm:0 2px 6px rgba(0,0,0,.35);
  --shadow-md:0 4px 14px rgba(0,0,0,.45);
  --shadow-lg:0 10px 32px rgba(0,0,0,.55);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%;overflow:hidden;background:var(--bg0);color:var(--t0);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",sans-serif;
  font-size:13px;-webkit-font-smoothing:antialiased;user-select:none}
button{font-family:inherit;font-size:inherit;color:inherit;cursor:pointer;user-select:none}

/* ═══════════════════════════════════════════════════════════════
   APP GRID
   ═══════════════════════════════════════════════════════════════ */
.app{
  display:grid;
  grid-template-rows:36px 46px 1fr 90px 22px;
  grid-template-areas:
    "titlebar"
    "maintoolbar"
    "content"
    "timeline"
    "statusbar";
  height:100vh;
}

/* ─── Title bar ─────────────────────────────────────────────── */
.titlebar{
  grid-area:titlebar;
  background:linear-gradient(180deg,#252a30 0%,#1e2226 100%);
  border-bottom:1px solid var(--bd);
  display:flex;align-items:center;padding:0 12px;gap:12px;
}
.logo-mark{font-weight:600;letter-spacing:.5px;color:var(--t0);font-size:14px}
.logo-mark b{color:var(--teal);font-weight:600}
.filemenu{display:flex;gap:2px}
.filemenu .fm{background:transparent;border:none;color:var(--t1);padding:5px 10px;border-radius:3px;font-size:12px}
.filemenu .fm:hover{background:var(--bg3);color:var(--t0)}
.titlebar-sp{flex:1}
.titlebar-actions{display:flex;gap:2px;align-items:center}
.titlebar-actions .tb-icon{
  background:transparent;border:none;color:var(--t1);
  width:28px;height:26px;border-radius:3px;
  display:grid;place-items:center;font-size:15px;
}
.titlebar-actions .tb-icon:hover:not(:disabled){background:var(--bg3);color:var(--t0)}
.titlebar-actions .tb-icon:disabled{opacity:.4;cursor:not-allowed}
.titlebar-sep{width:1px;height:18px;background:var(--bd2);margin:0 4px}

.engine-badge{
  display:flex;align-items:center;gap:6px;
  padding:4px 10px;background:var(--bg2);border:1px solid var(--bd2);border-radius:12px;
  font-size:11px;font-family:ui-monospace,Menlo,Consolas,monospace;color:var(--t1);
}
.engine-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--red)}
.engine-badge.loading .dot{background:var(--amber);animation:pulse 1.2s ease-in-out infinite}
.engine-badge.ready .dot{background:var(--green)}
@keyframes pulse{0%,100%{opacity:.4}50%{opacity:1}}

/* ═══════════════════════════════════════════════════════════════
   MAIN TOOLBAR (horizontal, categorised — 123D style)
   ═══════════════════════════════════════════════════════════════ */
.maintoolbar{
  grid-area:maintoolbar;
  background:linear-gradient(180deg,#252a30 0%,#1e2226 100%);
  border-bottom:1px solid var(--bd);
  display:flex;align-items:stretch;padding:0 8px;gap:2px;
  position:relative;
  z-index:100;
}

.tbcat{position:relative;display:flex;align-items:center}
.tbcat-head{
  display:flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:4px;
  color:var(--t1);cursor:pointer;
  transition:background .1s,color .1s;
  height:34px;
}
.tbcat-head:hover{background:var(--bg3);color:var(--t0)}
.tbcat.open .tbcat-head{background:var(--bg3);color:var(--teal)}
.tbcat-icon{font-size:14px;opacity:.85}
.tbcat-label{font-size:12.5px;font-weight:500}
.tbcat-chev{font-size:9px;opacity:.7}
.tbcat.open .tbcat-chev{color:var(--teal)}

/* Dropdown */
.tbcat-menu{
  display:none;
  position:absolute;top:100%;left:0;
  min-width:200px;background:var(--bg1);border:1px solid var(--bd2);border-radius:4px;
  box-shadow:var(--shadow-lg);
  padding:4px;flex-direction:column;gap:1px;
  z-index:200;
  margin-top:2px;
}
.tbcat.open .tbcat-menu{display:flex}
.tbi{
  display:flex;align-items:center;gap:10px;
  padding:7px 12px;border:none;background:transparent;color:var(--t0);
  border-radius:3px;text-align:left;font-size:12.5px;
  transition:background .08s;
}
.tbi:hover:not(:disabled){background:var(--bg3)}
.tbi:disabled{opacity:.35;cursor:not-allowed}
.tbi span{
  display:inline-grid;place-items:center;
  width:20px;height:20px;
  color:var(--teal);font-size:14px;flex-shrink:0;
}
.tbi-sep{height:1px;background:var(--bd);margin:3px 6px}

.mtb-sp{flex:1}

/* Contextual sketch bar (right side of maintoolbar in sketch mode) */
.sketchbar{
  display:flex;align-items:center;gap:8px;
  padding:0 8px;background:rgba(224,169,92,.1);border:1px solid rgba(224,169,92,.3);
  border-radius:4px;margin:4px 0;
}
.sb-label{color:var(--amber);font-weight:600;font-size:12px}
.sb-plane{color:var(--t1);font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;
  padding:2px 8px;background:rgba(0,0,0,.2);border-radius:2px}
.sb-btn{
  background:var(--bg2);border:1px solid var(--bd2);color:var(--t0);
  padding:5px 12px;border-radius:3px;font-size:12px;
}
.sb-btn:hover{background:var(--bg3)}
.sb-btn.primary{background:var(--teal-d);border-color:var(--teal);color:#fff;font-weight:500}
.sb-btn.primary:hover{background:var(--teal)}

/* ═══════════════════════════════════════════════════════════════
   VIEWPORT + parts bin
   ═══════════════════════════════════════════════════════════════ */
.viewport-wrap{
  grid-area:content;
  position:relative;overflow:hidden;background:var(--bg0);
  display:grid;grid-template-columns:1fr auto;
}
#vp3d{width:100%;height:100%;display:block;grid-column:1}

.hud-topleft{
  position:absolute;top:12px;left:12px;display:flex;flex-direction:column;gap:4px;
  pointer-events:none;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;
}
.hud-chip{
  background:rgba(26,29,33,.75);color:var(--t1);
  padding:4px 10px;border-radius:3px;border:1px solid var(--bd);
  pointer-events:auto;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.hud-chip b{color:var(--t0);font-weight:500}
.hud-chip span{color:var(--t3);margin-left:2px}

/* ═══════════════════════════════════════════════════════════════
   VIEWCUBE — clickable faces, top-right of viewport
   ═══════════════════════════════════════════════════════════════ */
.viewcube-wrap{
  position:absolute;top:12px;right:12px;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  pointer-events:none;
}
.viewcube{
  width:96px;height:96px;
  display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);
  gap:2px;padding:4px;
  background:rgba(26,29,33,.8);border:1px solid var(--bd2);border-radius:4px;
  pointer-events:auto;
}
.vc-face{
  display:grid;place-items:center;
  background:linear-gradient(135deg,#2e343b 0%,#252a31 100%);
  border:1px solid var(--bd2);border-radius:2px;
  font-size:9px;font-weight:600;color:var(--t1);cursor:pointer;
  font-family:ui-monospace,Menlo,Consolas,monospace;letter-spacing:.05em;
  transition:all .1s;
}
.vc-face:hover{background:var(--bg4);color:var(--teal);border-color:var(--teal)}
/* Position in 3x3 grid — a "T" cross of faces */
.vc-top    {grid-column:2;grid-row:1}
.vc-left   {grid-column:1;grid-row:2}
.vc-front  {grid-column:2;grid-row:2;background:linear-gradient(135deg,#353b43 0%,#2b3138 100%)}
.vc-right  {grid-column:3;grid-row:2}
.vc-bottom {grid-column:2;grid-row:3}
.vc-back   {grid-column:1;grid-row:3;font-size:8px}
.viewcube-home{
  padding:4px 10px;background:rgba(26,29,33,.8);border:1px solid var(--bd2);
  border-radius:3px;font-size:11px;color:var(--t1);cursor:pointer;pointer-events:auto;
}
.viewcube-home:hover{background:var(--bg4);color:var(--teal);border-color:var(--teal)}

/* ═══════════════════════════════════════════════════════════════
   PARTS BIN (right)
   ═══════════════════════════════════════════════════════════════ */
.partsbin{
  grid-column:2;width:220px;
  background:var(--bg1);border-left:1px solid var(--bd);
  display:flex;flex-direction:column;
  transition:width .2s;
}
.partsbin.collapsed{width:32px}
.pb-hdr{
  height:28px;padding:0 10px;
  background:#1e2226;border-bottom:1px solid var(--bd);
  display:flex;align-items:center;justify-content:space-between;
  color:var(--t1);font-size:11px;text-transform:uppercase;letter-spacing:.08em;
}
.pb-toggle{
  background:transparent;border:none;color:var(--t2);font-size:11px;padding:2px 4px;
}
.pb-toggle:hover{color:var(--t0)}
.partsbin.collapsed .pb-toggle{transform:rotate(180deg)}
.partsbin.collapsed .pb-hdr span:first-child,
.partsbin.collapsed .pb-body{display:none}
.pb-body{flex:1;overflow-y:auto;padding:8px}
.pb-empty{
  padding:30px 12px;text-align:center;color:var(--t3);font-size:11px;
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.pb-empty-icon{font-size:32px;opacity:.4}
.pb-empty-hint{font-size:10px;color:var(--t3);font-style:italic}

/* ═══════════════════════════════════════════════════════════════
   TIMELINE (bottom) — parametric history cards
   ═══════════════════════════════════════════════════════════════ */
.timeline{
  grid-area:timeline;
  background:linear-gradient(180deg,#1e2226 0%,#22262b 100%);
  border-top:1px solid var(--bd);
  display:flex;align-items:center;padding:0 12px;gap:10px;
  overflow:hidden;
}
.tl-label{
  color:var(--t2);font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;
  flex-shrink:0;padding-right:8px;border-right:1px solid var(--bd);
}
.tl-track{
  flex:1;height:100%;
  display:flex;align-items:center;gap:6px;
  overflow-x:auto;overflow-y:hidden;
  padding:6px 0;
}
.tl-track::-webkit-scrollbar{height:6px}
.tl-track::-webkit-scrollbar-thumb{background:var(--bd2);border-radius:3px}
.tl-empty{
  color:var(--t3);font-style:italic;font-size:11px;padding:0 12px;
}
.tl-card{
  min-width:120px;max-width:180px;height:64px;
  background:var(--bg2);border:1px solid var(--bd2);border-radius:4px;
  padding:6px 10px;
  display:flex;flex-direction:column;justify-content:space-between;
  cursor:pointer;transition:all .1s;
  position:relative;
  flex-shrink:0;
}
.tl-card:hover{background:var(--bg3);border-color:var(--teal)}
.tl-card.current{background:var(--bg3);border-color:var(--teal);box-shadow:0 0 0 1px var(--teal)}
.tl-card.reverted{opacity:.4}
.tl-card .tl-icon{font-size:14px;color:var(--teal);position:absolute;top:6px;right:8px}
.tl-card .tl-op{font-size:11px;color:var(--t0);font-weight:500}
.tl-card .tl-detail{font-size:10px;color:var(--t2);font-family:ui-monospace,Menlo,Consolas,monospace;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-card .tl-num{font-size:9px;color:var(--t3);font-family:ui-monospace,Menlo,Consolas,monospace}
.tl-actions{display:flex;gap:4px}
.tl-btn{
  background:transparent;border:1px solid var(--bd2);color:var(--t2);
  width:28px;height:28px;border-radius:3px;
  display:grid;place-items:center;
}
.tl-btn:hover{background:var(--bg3);color:var(--red);border-color:var(--red)}

/* ═══════════════════════════════════════════════════════════════
   STATUS BAR
   ═══════════════════════════════════════════════════════════════ */
.statusbar{
  grid-area:statusbar;
  background:#161819;border-top:1px solid var(--bd);
  display:flex;align-items:center;padding:0 12px;gap:16px;
  font-size:10.5px;color:var(--t2);font-family:ui-monospace,Menlo,Consolas,monospace;
}
.sb-item b{color:var(--t0);font-weight:500;margin-left:4px}
.sb-sp{flex:1}

/* ═══════════════════════════════════════════════════════════════
   DIALOG (modal)
   ═══════════════════════════════════════════════════════════════ */
.dialog{
  position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:800;
  display:none;align-items:center;justify-content:center;
}
.dialog.active{display:flex}
.dialog-box{
  background:var(--bg1);border:1px solid var(--bd2);border-radius:6px;padding:18px 20px;
  box-shadow:var(--shadow-lg);min-width:340px;max-width:500px;
}
.dialog-box h3{margin:0 0 14px;font-size:14px;font-weight:500;color:var(--t0)}
.dialog-box .row{display:flex;gap:10px;align-items:center;margin:10px 0}
.dialog-box .row label{flex:0 0 100px;color:var(--t1);font-size:12px}
.dialog-box .row input{
  background:var(--bg0);border:1px solid var(--bd2);color:var(--t0);
  padding:6px 10px;border-radius:3px;font-size:13px;flex:1;font-family:inherit;
}
.dialog-box .row input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 2px rgba(79,191,181,.15)}
.dialog-box .actions{display:flex;gap:8px;justify-content:flex-end;margin-top:18px}
.dialog-box .actions button{
  background:var(--bg2);border:1px solid var(--bd2);color:var(--t0);
  padding:6px 16px;border-radius:3px;font-size:12.5px;
}
.dialog-box .actions button:hover{background:var(--bg3)}
.dialog-box .actions button.primary{background:var(--teal-d);border-color:var(--teal);color:#fff;font-weight:500}
.dialog-box .actions button.primary:hover{background:var(--teal)}

/* ═══════════════════════════════════════════════════════════════
   TOASTS
   ═══════════════════════════════════════════════════════════════ */
.toasts{
  position:fixed;bottom:120px;left:50%;transform:translateX(-50%);z-index:900;
  display:flex;flex-direction:column-reverse;gap:6px;pointer-events:none;
}
.toast{
  background:var(--bg2);border:1px solid var(--bd2);color:var(--t0);
  padding:8px 16px;border-radius:4px;font-size:12.5px;
  box-shadow:var(--shadow-md);animation:slideUp .25s ease-out;
  max-width:480px;
}
.toast.ok{border-color:var(--teal)}
.toast.warn{border-color:var(--amber)}
.toast.err{border-color:var(--red)}
@keyframes slideUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ═══════════════════════════════════════════════════════════════
   LOADING SCREEN
   ═══════════════════════════════════════════════════════════════ */
.loading{
  position:fixed;inset:0;background:var(--bg0);z-index:1000;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
}
.loading.hidden{display:none}
.loading .logo{font-size:22px;font-weight:600;letter-spacing:.5px;color:var(--t0)}
.loading .logo span{color:var(--teal)}
.loading .spinner{
  width:40px;height:40px;border:3px solid var(--bg3);
  border-top-color:var(--teal);border-radius:50%;
  animation:spin .9s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.loading .msg{color:var(--t1);font-size:12px;font-family:ui-monospace,Menlo,Consolas,monospace}
.loading .err{
  color:var(--red);font-size:11.5px;max-width:560px;text-align:center;padding:12px 16px;
  background:rgba(214,100,74,.08);border:1px solid rgba(214,100,74,.3);border-radius:4px;
  font-family:ui-monospace,Menlo,Consolas,monospace;white-space:pre-wrap;word-break:break-word;
}
.loading .skip{
  margin-top:8px;background:var(--bg2);border:1px solid var(--bd2);color:var(--t1);
  padding:7px 16px;border-radius:3px;font-size:11.5px;
}
.loading .skip:hover{background:var(--bg3);color:var(--t0)}