:root{
  --bg:#0b1220;
  --panel:#0f1a2e;
  --panel2:#0c1527;
  --text:#e7eefc;
  --muted:#9fb2d6;
  --border:rgba(255,255,255,.08);
  --accent:#3b82f6;
  --accent2:#2563eb;
}

html,body{height:100%;}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background: radial-gradient(1200px 600px at 30% 0%, #122243 0%, var(--bg) 55%);
  color:var(--text);
}

/* ---------- Toolbar ---------- */
.toolbar{
  height:58px;
  display:grid;
  grid-template-columns:auto 1fr auto; /* brand | spacer | actions */
  align-items:center;
  gap:12px;
  padding:0 14px;
  border-bottom:1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  position:sticky;
  top:0;
  z-index:10;
}

.brand{display:flex; gap:10px; align-items:center;}
.logo{
  width:34px; height:34px;
  border-radius:10px;
  display:grid; place-items:center;
  background:rgba(59,130,246,.18);
  border:1px solid rgba(59,130,246,.35);
}

.app-title{font-weight:700; letter-spacing:.2px;}
.app-subtitle{font-size:12px; color:var(--muted); margin-top:2px;}

.toolbar-spacer{min-width:0;} /* just occupies the middle grid column */

.toolbar-actions{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:10px;                 /* spacing between buttons */
}

.status{
  font-size:12px;
  color:var(--muted);
  padding:6px 10px;
  border:1px solid var(--border);
  border-radius:999px;
  background:rgba(0,0,0,.15);
  white-space:nowrap;
}

/* ---------- Layout ---------- */
.workspace{
  display:grid;
  grid-template-columns:320px minmax(0,1fr) 380px;
  gap:14px;
  height:calc(100vh - 58px);
  padding:12px;
  box-sizing:border-box;
}

.panel{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px;
  overflow:auto;
}

.main.center{
  min-width:0;
  display:flex;
  flex-direction:column;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px;
  overflow:hidden;
}

/* ---------- Sectioning (Left panel cleanup) ---------- */
.section{
  padding:10px 0;
  border-top:1px solid var(--border);
}
.section:first-of-type{
  border-top:none;
  padding-top:0;
}
.panel.left h2{margin:0 0 6px;}
.panel.left h3{
  margin:10px 0 8px;
  font-size:13px;
  color:var(--text);
  opacity:.9;
}

.grid2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px 10px;
}
.grid2 label{margin:0;}

/* ---------- Panel header ---------- */
.panel-header{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
  margin:0 0 10px 0;
}
.panel-title{font-weight:700;}
.panel-meta{font-size:12px; color:var(--muted);}

/* ---------- Controls / Inputs ---------- */
label{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin:8px 0;
  font-size:13px;
  color:var(--muted);
}

input,select{
  width:120px;
  background:rgba(0,0,0,.25);
  border:1px solid var(--border);
  border-radius:10px;
  padding:6px 8px;
  color:var(--text);
}

.row{
  display:flex;
  align-items:center;
  gap:8px;
  margin:8px 0;
}

.small{font-size:12px; color:var(--muted);}

.btn{
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
  color:var(--text);
  padding:8px 12px;
  border-radius:10px;
  cursor:pointer;
  white-space:nowrap;
}
.btn:hover{background:rgba(255,255,255,.07);}
.btn-primary{
  background:linear-gradient(180deg,var(--accent),var(--accent2));
  border-color:rgba(255,255,255,.12);
}

/* Tight checkbox */
label.checkbox{
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  width:auto;
  margin:8px 0;
  padding:0;
  color:var(--text);
}
label.checkbox input{
  width:auto;
  margin:0;
}

.slip-sheet-row{
  margin-top:6px;
}

/* ---------- Stats ---------- */
.stats{
  margin-top:10px;
  font-size:12px;
  color:var(--muted);
  line-height:1.35;
}

/* ---------- 2D ---------- */
#topdown{
  width:100%;
  height:auto;
  aspect-ratio:1 / 1;
  display:block;
  border-radius:10px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.02);
}

/* ---------- 3D ---------- */
.viewport{
  flex:1;
  min-height:420px;
  position:relative;
}

#three.viewport{
  width:100%;
  height:100%;
  border-radius:10px;
  overflow:hidden;
  border:1px solid var(--border);
}
.viewport canvas{
  display:block;
  width:100% !important;
  height:100% !important;
}

/* ---------- Options ---------- */
.options{display:grid; gap:10px; margin:10px 0;}

.option-card{
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.06);
  border-radius:12px;
  padding:10px;
  cursor:pointer;
}

.option-card:hover{background:rgba(255,255,255,.05);}

.option-card.active{
  border-color: rgba(59,130,246,0.6);
  box-shadow: 0 0 0 1px rgba(59,130,246,0.35);
}

.option-title{font-weight:700;}
.option-meta{font-size:12px; color:var(--muted); margin:6px 0 8px;}

.option-canvas{
  width:100%;
  height:auto;
  display:block;
  border-radius:10px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
}

/* Wrap-safe indicator support */
.option-card.not-wrap-safe{opacity:0.45;}

.option-title-row{
  display:flex;
  align-items:center;
  gap:8px;
}

.wrap-dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background:rgba(255,255,255,0.25);
}
.wrap-dot.ok{background:rgba(34,197,94,0.85);}
.wrap-dot.bad{background:rgba(245,158,11,0.85);}

/* ---------- Overlays ---------- */
.dim-overlay{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.dim-label{
  position:absolute;
  transform:translate(-50%,-50%);
  font-size:12px;
  color:rgba(255,255,255,.92);
  background:rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  padding:4px 8px;
  line-height:1;
  white-space:nowrap;
  backdrop-filter:blur(6px);
}

/* View toggles */
.toggles{display:flex; gap:10px; flex-wrap:wrap;}
.toggle{font-size:12px; color:var(--muted); display:flex; gap:6px; align-items:center;}
.toggle input{width:auto;}

/* Paste into pallet.css (append near your other left-panel styles) */

.left-head { margin-bottom: 8px; }
.left-title { font-weight: 800; font-size: 18px; margin-bottom: 6px; }

.unit-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.unit-hint{ font-size:12px; color:var(--muted); }
.unit-toggle{ display:flex; align-items:center; gap:8px; }
#units_select{ width:84px; }

.acc{
  border:1px solid var(--border);
  border-radius:12px;
  background:rgba(0,0,0,.12);
  margin:10px 0;
  overflow:hidden;
}
.acc > summary{
  cursor:pointer;
  user-select:none;
  padding:10px 12px;
  font-weight:700;
  color:var(--text);
  list-style:none;
}
.acc > summary::-webkit-details-marker{ display:none; }
.acc > summary::after{
  content:"▾";
  float:right;
  opacity:.7;
}
.acc[open] > summary::after{ content:"▴"; }
.acc-body{ padding:10px 12px; border-top:1px solid var(--border); }

.inline-check{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.inline-field{
  display:flex;
  align-items:center;
  gap:8px;
}
.inline-field input{ width:96px; }

.stats-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-top:8px;
}
.wrap-badge{
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
  color:var(--text);
  padding:6px 10px;
  border-radius:999px;
  cursor:pointer;
  white-space:nowrap;
  font-size:12px;
  line-height:1;
}
.wrap-badge.ok{
  border-color:rgba(34,197,94,.35);
  background:rgba(34,197,94,.12);
}
.wrap-badge.bad{
  border-color:rgba(245,158,11,.40);
  background:rgba(245,158,11,.12);
}
.wrap-badge.na{
  opacity:.6;
}