/* ═══════════════════════════════════════════════════
   LAYOUT  v1.0.0
═══════════════════════════════════════════════════ */

*{ margin:0; padding:0; box-sizing:border-box; }

body{
  background:#0d0f14;
  color:#ddd;
  font-family:'Segoe UI', sans-serif;
  display:flex;
  flex-direction:column;
  height:100vh;
  overflow:hidden;
}

/* ── header ── */
header{
  background:#13161f;
  border-bottom:1px solid #1e2235;
  padding:8px 16px;
  display:flex;
  align-items:center;
  gap:12px;
  flex-shrink:0;
  height:42px;
}
header h1{
  font-size:.9rem;
  color:#7c9ef8;
  letter-spacing:2px;
  font-weight:700;
  white-space:nowrap;
}

/* ── tabs ── */
.tabs{ display:flex; gap:5px; }
.tab{
  padding:4px 11px;
  border-radius:4px;
  border:1px solid #2a2d3e;
  background:transparent;
  color:#666;
  cursor:pointer;
  font-size:.72rem;
  transition:all .2s;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  line-height:1;
  white-space:nowrap;
}
.tab.active{
  background:#7c9ef8;
  color:#0d0f14;
  border-color:#7c9ef8;
  font-weight:700;
}
.tab:hover:not(.active){ border-color:#7c9ef8; color:#7c9ef8; }
.combo-tab{ border-color:#2a4a2a; color:#7cf87c; }
.combo-tab:hover{ border-color:#7cf87c; color:#7cf87c; background:#0a140a; }

#statusBar{
  margin-left:auto;
  font-size:.68rem;
  color:#3a4a6a;
  white-space:nowrap;
}
.save-indicator{
  font-size:.62rem;
  padding:2px 7px;
  border-radius:8px;
  border:1px solid #2a2d3e;
  color:#3a4a6a;
  transition:all .4s;
  white-space:nowrap;
}
.save-indicator.saving{ border-color:#f8c87c; color:#f8c87c; }
.save-indicator.saved { border-color:#4caf50; color:#4caf50; }

/* ── body ── */
.body{
  display:flex;
  flex:1;
  overflow:hidden;
  min-height:0;
}

/* ── canvas wrap ── */
.cvwrap{
  flex:1;
  position:relative;
  overflow:hidden;
  background:#0d0f14;
  min-width:200px;
}
#cv{ display:block; cursor:crosshair; }

.hint{
  position:absolute;
  bottom:12px;
  left:50%;
  transform:translateX(-50%);
  background:#13161fdd;
  border:1px solid #1e2235;
  border-radius:14px;
  padding:4px 16px;
  font-size:.7rem;
  color:#444;
  pointer-events:none;
  white-space:nowrap;
  transition:color .3s, border-color .3s;
}
.hint.active{ color:#7c9ef8; border-color:#2a3a5e; }

/* ── draggable divider ── */
.divider{
  width:5px;
  background:#1e2235;
  cursor:col-resize;
  flex-shrink:0;
  position:relative;
  transition:background .15s;
  z-index:5;
}
.divider:hover,
.divider.dragging{ background:#4a6aaa; }
.divider::after{
  content:'';
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:3px;
  height:32px;
  border-left:1px solid #3a5a8a;
  border-right:1px solid #3a5a8a;
}

/* ── right panel ── */
.right{
  width:300px;
  min-width:180px;
  max-width:700px;
  background:#0d0f14;
  display:flex;
  flex-direction:column;
  flex-shrink:0;
  overflow:hidden;
}
.rpanel-title{
  font-size:.58rem;
  text-transform:uppercase;
  letter-spacing:2px;
  color:#2a3050;
  padding:6px 12px 5px;
  border-bottom:1px solid #1e2235;
  background:#13161f;
  flex-shrink:0;
}

/* ══════════════════════════════════════════════════
   ORTHOGRAPHIC GRID
   ┌───────────┬───────────┐
   │    TOP    │   RIGHT   │  ← RIGHT label rotated 90° CCW
   ├───────────┼───────────┤
   │   FRONT   │   INFO    │
   └───────────┴───────────┘
══════════════════════════════════════════════════ */
.ogrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows:    1fr 1fr;
  gap:1px;
  background:#1e2235;
  flex:1;
  min-height:0;
  overflow:hidden;
}

/* ── cell base ── */
.ocell{
  background:#0a0c12;
  position:relative;
  display:flex;
  align-items:stretch;
  justify-content:stretch;
  overflow:hidden;
  min-height:0;
  min-width:0;
}
.ocell canvas{
  width:100%  !important;
  height:100% !important;
  display:block;
}

/* ── grid positions ── */
.ocell-top   { grid-column:1; grid-row:1; }   /* TOP-LEFT     */
.ocell-right { grid-column:2; grid-row:1; }   /* TOP-RIGHT    */
.ocell-front { grid-column:1; grid-row:2; }   /* BOTTOM-LEFT  */
.ocell-empty { grid-column:2; grid-row:2; }   /* BOTTOM-RIGHT */

/* ── view label — bottom-left corner ── */
.olabel{
  position:absolute;
  bottom:4px;
  left:6px;
  font-size:.6rem;
  color:#2a3a5e;
  text-transform:uppercase;
  letter-spacing:1.5px;
  pointer-events:none;
  font-family:monospace;
  font-weight:700;
  z-index:2;
}

/* ── RIGHT label — rotated 90° CCW, sits on left edge of cell ── */
/* Imagine the right-side elevation drawing rotated to sit beside
   the front view — the label reads upward on the left edge        */
.olabel-right{
  position:absolute;
  left:0;
  top:50%;
  transform: translateX(-50%) translateY(-50%) rotate(-90deg);
  /* override with simpler approach */
  left:14px;
  top:50%;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: center center;
  font-size:.6rem;
  color:#2a3a5e;
  text-transform:uppercase;
  letter-spacing:1.5px;
  pointer-events:none;
  font-family:monospace;
  font-weight:700;
  white-space:nowrap;
  z-index:2;
}

/* ── info cell ── */
.ocell-empty{
  background:#080a0f;
}
.ocell-empty-inner{
  display:flex;
  flex-direction:column;
  width:100%;
  height:100%;
  padding:8px;
  gap:6px;
  overflow-y:auto;
}

.info-block{
  background:#0d1020;
  border:1px solid #1e2840;
  border-radius:4px;
  padding:6px 8px;
  flex-shrink:0;
}
.info-title{
  font-size:.50rem;
  text-transform:uppercase;
  letter-spacing:2px;
  color:#2a3a5e;
  margin-bottom:5px;
  font-family:monospace;
  font-weight:700;
}
.info-row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  padding:1px 0;
  border-bottom:1px solid #0f1220;
}
.info-row:last-child{ border-bottom:none; }
.info-lbl{
  font-size:.60rem;
  color:#3a4a6a;
  font-family:monospace;
}
.info-val{
  font-size:.70rem;
  color:#7c9ef8;
  font-family:monospace;
  font-weight:700;
}

/* ── projection badge — compact ── */
.proj-badge{
  display:flex;
  align-items:center;
  gap:5px;
  margin-bottom:5px;
}
.proj-angle{
  font-size:.65rem;
  font-weight:900;
  color:#7c9ef8;
  font-family:monospace;
  line-height:1;
  opacity:.4;
  flex-shrink:0;
}
.proj-text{
  font-size:.50rem;
  color:#1e2a40;
  line-height:1.4;
  font-family:monospace;
}

/* ── projection layout diagram ── */
.proj-layout{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:2px;
  height:32px;
}
.proj-cell{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.42rem;
  font-family:monospace;
  letter-spacing:.5px;
  border-radius:2px;
}
.proj-empty{
  background:#080a0f;
  border:1px dashed #111820;
  color:#111820;
}
.proj-active{
  background:#0a1018;
  border:1px solid #1e3050;
  color:#2a4a6a;
  font-weight:700;
}
.proj-right-cell{
  font-size:.38rem;
  letter-spacing:0;
}
.proj-cell{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.48rem;
  font-family:monospace;
  letter-spacing:.5px;
  border-radius:2px;
}
.proj-empty{
  background:#080a0f;
  border:1px dashed #1a2030;
  color:#1a2030;
}
.proj-active{
  background:#0d1828;
  border:1px solid #2a4060;
  color:#4a6a9a;
  font-weight:700;
}
/* RIGHT cell in diagram — show rotated indicator */
.proj-right-cell{
  font-size:.42rem;
  letter-spacing:0;
}
.proj-right-cell::after{
  content:' ↺';
  color:#3a5a8a;
}

/* ── cut list ── */
.cut-list{ margin-top:2px; }
.cut-item{
  font-size:.58rem;
  color:#2a3a5a;
  padding:3px 0;
  border-bottom:1px solid #0f1220;
  display:flex;
  align-items:center;
  gap:4px;
}
.cut-item:last-child{ border-bottom:none; }
.cut-item .cx{
  color:#f87c7c33;
  cursor:pointer;
  font-size:.75rem;
  line-height:1;
  flex-shrink:0;
  margin-left:auto;
  transition:color .15s;
}
.cut-item .cx:hover{ color:#f87c7c; }
.cut-dot{
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  flex-shrink:0;
}

/* ── notification ── */
.notif{
  position:fixed;
  bottom:20px;
  left:50%;
  transform:translateX(-50%) translateY(20px);
  background:#13161f;
  border:1px solid #2a3a5e;
  border-radius:20px;
  padding:6px 20px;
  font-size:.74rem;
  color:#7c9ef8;
  opacity:0;
  transition:all .3s;
  pointer-events:none;
  z-index:100;
  white-space:nowrap;
}
.notif.show{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

/* ── quiz overlay ── */
.qoverlay{
  position:absolute;
  inset:0;
  background:#0d0f14ee;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:20;
}
.qoverlay.show{ display:flex; }
.qbox{
  background:#13161f;
  border:1px solid #2a3a5e;
  border-radius:10px;
  padding:24px;
  max-width:520px;
  width:90%;
  max-height:90vh;
  overflow-y:auto;
}
.qbox h2{
  font-size:.9rem;
  color:#7c9ef8;
  margin-bottom:10px;
  letter-spacing:1px;
}
.qsub{ font-size:.68rem; color:#3a4a6a; margin-bottom:12px; }
.qimg{
  margin-bottom:12px;
  border:1px solid #1e2235;
  border-radius:6px;
  overflow:hidden;
  background:#0a0c12;
}
.qimg canvas{ display:block; width:100%; }
.qq{ font-size:.82rem; color:#ccc; margin-bottom:14px; line-height:1.6; }
.qopts{ display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.qopt{
  padding:8px 12px;
  border-radius:5px;
  border:1px solid #2a2d3e;
  background:#1a1d2a;
  color:#999;
  cursor:pointer;
  font-size:.76rem;
  text-align:left;
  transition:all .15s;
}
.qopt:hover:not(:disabled){ border-color:#7c9ef8; color:#7c9ef8; }
.qopt.correct{ border-color:#4caf50; background:#0a200a; color:#4caf50; }
.qopt.wrong  { border-color:#f87c7c; background:#200a0a; color:#f87c7c; }
.qfeedback{
  font-size:.72rem; color:#555; padding:8px 10px;
  border-radius:5px; margin-bottom:10px; display:none; line-height:1.6;
}
.qfeedback.show{ display:block; }
.qfeedback.ok { background:#0a200a; border:1px solid #2a5a2a; color:#7cf87c; }
.qfeedback.bad{ background:#200a0a; border:1px solid #5a2a2a; color:#f87c7c; }
.qnav{ display:flex; align-items:center; gap:8px; }
.qnav button{
  padding:5px 14px; border-radius:4px; border:1px solid #2a2d3e;
  background:transparent; color:#7c9ef8; cursor:pointer;
  font-size:.74rem; transition:all .2s;
}
.qnav button:hover{ border-color:#7c9ef8; background:#0a1020; }
.qscore{ margin-left:auto; font-size:.7rem; color:#3a4a6a; font-family:monospace; }




/* ── topbar ──────────────────────────────────────────────────────── */
.topbar {
  display:         flex;
  align-items:     center;
  height:          40px;
  min-height:      40px;
  background:      #080a12;
  border-bottom:   1px solid #1e2840;
  padding:         0 12px;
  gap:             12px;
  position:        relative;
  z-index:         200;
  overflow:        visible;   /* allow notif to show */
}

/* ── logo block ──────────────────────────────────────────────────── */
.topbar-logo {
  display:     flex;
  align-items: center;
  gap:         6px;
  flex-shrink: 0;
}
.topbar-cube-icon {
  display:     flex;
  align-items: center;
}
.topbar-name {
  font-family:    monospace;
  font-size:      12px;
  font-weight:    bold;
  color:          #4a9ef8;
  letter-spacing: 0.04em;
  white-space:    nowrap;
}
.topbar-ver {
  font-family: monospace;
  font-size:   9px;
  color:       #2a4a7a;
}

/* ── centre notification area ────────────────────────────────────── */
.topbar-notif-area {
  flex:            1;
  display:         flex;
  align-items:     center;
  justify-content: center;
  position:        relative;
  height:          100%;
  overflow:        visible;
  min-width:       0;
}

/* ── notification pill — lives inside topbar ─────────────────────── */
.notif {
  position:       absolute;
  top:            50%;
  left:           50%;
  transform:      translate(-50%, -50%) scale(0.85);
  background:     #1a2a4a;
  color:          #7c9ef8;
  border:         1px solid #2a4a7a;
  border-radius:  20px;
  padding:        4px 14px;
  font-family:    monospace;
  font-size:      11px;
  font-weight:    bold;
  white-space:    nowrap;
  pointer-events: none;
  opacity:        0;
  transition:     opacity 0.18s ease, transform 0.18s ease;
  z-index:        300;
}
.notif.show {
  opacity:   1;
  transform: translate(-50%, -50%) scale(1);
}

/* ── hint text ───────────────────────────────────────────────────── */
.hint {
  font-family: monospace;
  font-size:   10px;
  color:       #2a4a6a;
  white-space: nowrap;
  overflow:    hidden;
  text-overflow: ellipsis;
  max-width:   100%;
  transition:  color 0.2s;
}
.hint.active {
  color: #4a9ef8;
}

/* ── right block ─────────────────────────────────────────────────── */
.topbar-right {
  display:     flex;
  align-items: center;
  gap:         10px;
  flex-shrink: 0;
}

.status-bar {
  font-family: monospace;
  font-size:   9px;
  color:       #2a4a6a;
  white-space: nowrap;
}

.save-indicator {
  font-family: monospace;
  font-size:   9px;
  color:       #2a4a6a;
  white-space: nowrap;
  transition:  color 0.3s;
}
.save-indicator.saving { color:#f8a04a; }
.save-indicator.saved  { color:#4af8a0; }

/* ── body below topbar ───────────────────────────────────────────── */
.body {
  display:    flex;
  flex:       1;
  overflow:   hidden;
  min-height: 0;
}