*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --space:    #03050d;
  --deep:     #070b18;
  --panel:    #0c1220;
  --border:   #1a2540;
  --border2:  #243050;
  --text:     #dde4f0;
  --muted:    #7a8aaa;
  --dim:      #3a4560;
  --sun:      #ffd166;
  --moon:     #c8d8f0;
  --earth:    #4a9eff;
  --shadow:   #0a0f1e;
  --accent:   #e8c87a;
  --new:      #1a2035;
  --crescent: #c8d8f0;
  --full:     #ffffff;
  --waning:   #a0b8d8;
}
html, body { width:100%; height:100%; overflow:hidden; background:var(--space); }
body { font-family:'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color:var(--text); display:flex; flex-direction:column; }

/* ─ TOPBAR ─ */
.top {
  height:48px; background:var(--panel); border-bottom:1px solid var(--border);
  display:flex; align-items:center; padding:0 1.2rem; gap:1rem; flex-shrink:0;
  position:relative; z-index:20;
}
.title-logo {
  font-family:'Space Grotesk', sans-serif; font-size:1.15rem; letter-spacing:.12em;
  color:var(--accent); white-space:nowrap;
}
.title-logo span { color:var(--muted); font-size:.7rem; font-family:'IBM Plex Mono', monospace; letter-spacing:.05em; margin-left:.5rem; }
.sep { width:1px; height:22px; background:var(--border2); }
.chip {
  font-family:'IBM Plex Mono', monospace; font-size:.55rem; letter-spacing:.18em;
  text-transform:uppercase; padding:.25rem .65rem; border-radius:1px; border:1px solid;
}
.chip-gold  { color:var(--accent);  border-color:rgba(232,200,122,.35); background:rgba(232,200,122,.07); }
.chip-blue  { color:var(--earth);   border-color:rgba(74,158,255,.35);  background:rgba(74,158,255,.07); }
.chip-moon  { color:var(--moon);    border-color:rgba(200,216,240,.25); background:rgba(200,216,240,.05); }
.top-right { margin-left:auto; display:flex; align-items:center; gap:.8rem; }
.sim-time { font-family:'IBM Plex Mono', monospace; font-size:.62rem; color:var(--muted); }

/* ─ LAYOUT ─ */
.body { flex:1; display:grid; grid-template-columns:230px 1fr 230px; overflow:hidden; }

/* ─ SIDE PANELS ─ */
.side {
  background:var(--panel); display:flex; flex-direction:column;
  overflow-y:auto; overflow-x:hidden;
}
.side-l { border-right:1px solid var(--border); }
.side-r { border-left:1px solid var(--border); }

.sec { border-bottom:1px solid var(--border); padding:.75rem; }
.sec-hd {
  font-family:'IBM Plex Mono', monospace; font-size:.52rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--dim); margin-bottom:.65rem;
  display:flex; align-items:center; gap:.5rem;
}
.sec-hd::after { content:''; flex:1; height:1px; background:var(--border); }

/* ─ SLIDERS ─ */
.cr { display:flex; flex-direction:column; gap:.2rem; margin-bottom:.65rem; }
.cr:last-child { margin-bottom:0; }
.cl { display:flex; justify-content:space-between; font-size:.72rem; color:var(--muted); }
.cl strong { font-family:'IBM Plex Mono', monospace; font-size:.75rem; color:var(--text); }
input[type=range] {
  width:100%; -webkit-appearance:none; height:3px; background:var(--border2);
  border-radius:2px; outline:none; cursor:pointer;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none; width:11px; height:11px; border-radius:50%;
  cursor:pointer; transition:transform .1s;
}
input[type=range]::-webkit-slider-thumb:hover { transform:scale(1.4); }
.s-gold::-webkit-slider-thumb  { background:var(--sun);   box-shadow:0 0 6px rgba(255,209,102,.6); }
.s-blue::-webkit-slider-thumb  { background:var(--earth); box-shadow:0 0 6px rgba(74,158,255,.6); }
.s-moon::-webkit-slider-thumb  { background:var(--moon);  box-shadow:0 0 6px rgba(200,216,240,.5); }

/* ─ BUTTONS ─ */
.btn-row { display:flex; gap:.4rem; margin-bottom:.4rem; }
.btn {
  flex:1; padding:.4rem .4rem; font-family:'IBM Plex Mono', monospace; font-size:.65rem;
  font-weight:700; border:1px solid var(--border2); border-radius:2px;
  cursor:pointer; background:var(--deep); color:var(--text); transition:all .15s;
  letter-spacing:.04em;
}
.btn:hover { border-color:var(--accent); color:var(--accent); }
.btn.on { background:var(--accent); color:var(--space); border-color:var(--accent); }
.btn.moon-on { background:rgba(200,216,240,.15); color:var(--moon); border-color:var(--moon); }

/* ─ VIEW TABS ─ */
.vtabs {
  position:absolute; top:.8rem; left:50%; transform:translateX(-50%);
  display:flex; gap:.3rem; background:rgba(7,11,24,.9); border:1px solid var(--border2);
  border-radius:3px; padding:.3rem; backdrop-filter:blur(10px); z-index:10;
  pointer-events:all;
  flex-wrap:wrap; justify-content:center;
  max-width:90%;
}
.vtab {
  padding:.28rem .75rem; font-family:'IBM Plex Mono', monospace; font-size:.6rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--muted); border-radius:2px;
  cursor:pointer; transition:all .15s;
}
.vtab:hover { color:var(--text); }
.vtab.on { background:var(--accent); color:var(--space); }

/* ─ READOUT ─ */
.ro {
  background:var(--deep); border:1px solid var(--border); border-radius:2px;
  padding:.55rem; margin-bottom:.4rem;
}
.ro-lbl { font-family:'IBM Plex Mono', monospace; font-size:.5rem; letter-spacing:.18em; text-transform:uppercase; color:var(--dim); margin-bottom:.2rem; }
.ro-val { font-family:'IBM Plex Mono', monospace; font-size:1.05rem; font-weight:700; line-height:1; }
.ro-unit { font-size:.62rem; color:var(--muted); margin-top:.1rem; font-family:'IBM Plex Mono', monospace; }
.c-gold   { color:var(--accent); }
.c-blue   { color:var(--earth); }
.c-moon   { color:var(--moon); }
.c-red    { color:#ff6b6b; }
.c-green  { color:#56d364; }
.c-purple { color:#bc8cff; }

/* ─ PHASE STRIP ─ */
.phase-strip {
  display:grid; grid-template-columns:repeat(8,1fr); gap:.3rem;
  margin-bottom:.4rem;
}
.ph-cell {
  background:var(--deep); border:1px solid var(--border); border-radius:2px;
  padding:.4rem .2rem; text-align:center; cursor:pointer; transition:all .15s;
}
.ph-cell:hover { border-color:var(--moon); }
.ph-cell.active { border-color:var(--accent); background:rgba(232,200,122,.08); }
.ph-icon { font-size:1rem; display:block; margin-bottom:.15rem; }
.ph-name { font-size:.45rem; font-family:'IBM Plex Mono', monospace; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; line-height:1.3; }

/* ─ BNCC BOX ─ */
.bncc-box {
  background:rgba(74,158,255,.05); border:1px solid rgba(74,158,255,.2);
  border-radius:2px; padding:.7rem; font-size:.7rem; color:var(--muted); line-height:1.7;
}
.bncc-box strong { color:var(--earth); display:block; margin-bottom:.3rem; font-family:'IBM Plex Mono', monospace; font-size:.58rem; letter-spacing:.1em; }

/* ─ CANVAS ─ */
.canvas-wrap {
  position:relative; background:#000; display:flex; align-items:center; justify-content:center; overflow:hidden;
}
canvas { display:block; cursor:grab; }
canvas:active { cursor:grabbing; }
.info-bar {
  position:absolute; bottom:.8rem; left:50%; transform:translateX(-50%);
  font-family:'IBM Plex Mono', monospace; font-size:.58rem; color:rgba(122,138,170,.6);
  white-space:nowrap; pointer-events:none;
}

/* ─ FORMULA ─ */
.fml {
  background:rgba(232,200,122,.04); border:1px solid rgba(232,200,122,.12);
  border-radius:2px; padding:.65rem; margin-bottom:.4rem;
  font-family:'IBM Plex Mono', monospace; font-size:.65rem; color:var(--muted); line-height:2;
}
.fml .ft { font-size:.5rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(232,200,122,.5); display:block; margin-bottom:.3rem; }
.hl { color:var(--accent); }
.hl-b { color:var(--earth); }
.hl-m { color:var(--moon); }

/* scrollbar */
::-webkit-scrollbar { width:3px; }
::-webkit-scrollbar-thumb { background:var(--border2); }

/* ─ METRIC CELLS ─ */
.metric-cell {
  background:#070b18; border:1px solid #1a2540; border-radius:3px; padding:.6rem;
}
.mc-lbl {
  font-family:'IBM Plex Mono', monospace; font-size:.5rem; letter-spacing:.15em;
  text-transform:uppercase; color:#3a4560; margin-bottom:.25rem;
}
.mc-val {
  font-family:'IBM Plex Mono', monospace; font-size:.88rem; font-weight:700; color:#dde4f0;
}
.mc-val.good  { color:#56d364; }
.mc-val.warn  { color:#e3b341; }
.mc-val.bad   { color:#ff6b6b; }

/* LUNALAB visual refresh */
:root {
  --space:    #020714;
  --deep:     #050b18;
  --panel:    #07101f;
  --panel2:   #0a1528;
  --border:   #17263d;
  --border2:  #29405f;
  --text:     #e7edf7;
  --muted:    #93a2ba;
  --dim:      #53627a;
  --accent:   #f2c75c;
  --earth:    #45a8ff;
}
body {
  background:
    radial-gradient(circle at 42% 48%, rgba(30,78,130,.14), transparent 38%),
    radial-gradient(circle at 76% 20%, rgba(25,82,120,.10), transparent 30%),
    #020714;
}
.top {
  height:64px;
  padding:0 1.1rem;
  gap:.9rem;
  background:linear-gradient(180deg, rgba(7,15,30,.98), rgba(4,10,21,.96));
  border-bottom:1px solid rgba(64,92,135,.38);
  box-shadow:0 10px 34px rgba(0,0,0,.34);
}
.title-logo {
  position:relative;
  display:flex;
  align-items:center;
  gap:.72rem;
  min-height:46px;
  padding-left:0;
  font-family:'Space Grotesk', sans-serif;
  font-size:1.18rem;
  font-weight:700;
  letter-spacing:.18em;
  line-height:1;
  color:#f6d36f;
  text-shadow:0 0 18px rgba(242,199,92,.18);
}
.brand-mark {
  width:46px;
  height:46px;
  flex:0 0 46px;
  display:block;
  border:1px solid rgba(242,199,92,.36);
  border-radius:50%;
  background:
    radial-gradient(circle at 46% 44%, rgba(242,199,92,.18), transparent 35%),
    linear-gradient(135deg, rgba(242,199,92,.08), rgba(4,10,21,.92));
  box-shadow:0 0 26px rgba(242,199,92,.16), inset 0 0 16px rgba(0,0,0,.7);
}
.brand-text {
  display:flex;
  align-items:baseline;
  gap:.75rem;
  white-space:nowrap;
}
.title-logo span {
  margin-left:0;
  font-family:'Inter', sans-serif;
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.05em;
  color:#a8b3c8;
}
.chip {
  padding:.52rem .86rem;
  border-radius:5px;
  background:rgba(7,14,28,.82);
  box-shadow:inset 0 0 18px rgba(255,255,255,.025);
}
.chip-blue { color:#44aaff; border-color:rgba(68,170,255,.48); background:rgba(22,91,160,.14); }
.chip-gold { color:var(--accent); border-color:rgba(242,199,92,.52); background:rgba(242,199,92,.11); }
.chip-moon { color:#e7edf7; border-color:rgba(147,162,186,.35); background:rgba(147,162,186,.07); }
.top-right { gap:.7rem; }
.sim-time {
  display:flex;
  align-items:center;
  gap:.35rem;
  color:#a8b3c8;
}
.sim-time::before {
  content:'';
  width:9px;
  height:9px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #db98ff, #6937a7 72%);
  box-shadow:0 0 12px rgba(188,94,255,.5);
}
.settings-btn {
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border:1px solid rgba(147,162,186,.26);
  border-radius:5px;
  background:rgba(8,15,29,.86);
  color:#dbe6f7;
  font-size:1rem;
  cursor:pointer;
}

.top-action {
  height:32px;
  padding:0 .72rem;
  border:1px solid rgba(83,112,160,.45);
  border-radius:6px;
  background:rgba(7,14,28,.78);
  color:#c8d8f0;
  font:700 .58rem 'IBM Plex Mono', monospace;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
}
.top-action:hover {
  border-color:rgba(242,199,92,.72);
  color:#f2c75c;
}
.control-label {
  display:block;
  margin:.72rem 0 .32rem;
  color:#667894;
  font:700 .52rem 'IBM Plex Mono', monospace;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.control-select {
  width:100%;
  min-height:34px;
  padding:0 .6rem;
  border:1px solid rgba(67,101,152,.72);
  border-radius:6px;
  background:#07101f;
  color:#dbe4f3;
  font:700 .62rem 'IBM Plex Mono', monospace;
}
.photo-adjust {
  margin-top:.65rem;
  padding:.7rem;
  border:1px solid rgba(50,78,120,.78);
  border-radius:7px;
  background:linear-gradient(180deg,#081324,#050b16);
}
.photo-adjust label {
  display:flex;
  justify-content:space-between;
  color:#c8d8f0;
  font:700 .6rem 'IBM Plex Mono', monospace;
  letter-spacing:.05em;
}
.photo-adjust input { margin-top:.5rem; }
.photo-adjust-note {
  margin-top:.35rem;
  color:#667894;
  font:.58rem 'IBM Plex Mono', monospace;
  line-height:1.45;
}
.report-btn {
  width:100%;
  margin-top:.8rem;
  min-height:36px;
  border:1px solid rgba(86,211,100,.42);
  border-radius:6px;
  background:rgba(86,211,100,.10);
  color:#56d364;
  font:700 .62rem 'IBM Plex Mono', monospace;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
}
.modal-backdrop {
  position:fixed;
  inset:0;
  z-index:80;
  display:none;
  align-items:center;
  justify-content:center;
  padding:1.25rem;
  background:rgba(0,0,0,.68);
  backdrop-filter:blur(10px);
}
.modal-backdrop.open { display:flex; }
.modal-card {
  width:min(560px,100%);
  border:1px solid rgba(83,112,160,.55);
  border-radius:12px;
  background:linear-gradient(180deg,#0a1528,#040913);
  box-shadow:0 24px 70px rgba(0,0,0,.55);
  padding:1.25rem;
  color:#c8d8f0;
  line-height:1.6;
  position:relative;
}
.modal-card h2 {
  margin:0 2.2rem .75rem 0;
  color:#f2c75c;
  font:700 1.25rem 'Space Grotesk', sans-serif;
  letter-spacing:.04em;
}
.modal-card p,
.modal-card li { margin:.45rem 0; }
.modal-card ol { padding-left:1.2rem; }
.modal-close {
  position:absolute;
  top:.75rem;
  right:.75rem;
  width:30px;
  height:30px;
  border:1px solid rgba(83,112,160,.45);
  border-radius:6px;
  background:#07101f;
  color:#c8d8f0;
  cursor:pointer;
}
body.presentation .side,
body.presentation .top,
body.presentation .photo-fab,
body.presentation .info-bar { display:none !important; }
body.presentation .body { grid-template-columns:1fr !important; }
body.presentation .canvas-wrap { height:100vh; }
body.presentation .vtabs { top:1rem; }
.settings-btn:hover { border-color:rgba(242,199,92,.65); color:var(--accent); }
.body {
  grid-template-columns:clamp(292px,18vw,320px) minmax(0,1fr) clamp(290px,20vw,330px);
  min-height:0;
}
.side {
  background:
    linear-gradient(180deg, rgba(8,17,33,.98), rgba(4,10,21,.98)),
    var(--panel);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
  min-height:0;
  max-height:calc(100vh - 48px);
  padding-bottom:.65rem;
  scrollbar-width:thin;
  scrollbar-color:rgba(111,151,205,.55) rgba(7,14,27,.8);
}
.side::-webkit-scrollbar { width:9px; }
.side::-webkit-scrollbar-track { background:rgba(7,14,27,.86); }
.side::-webkit-scrollbar-thumb {
  background:linear-gradient(180deg, rgba(117,165,226,.72), rgba(51,78,116,.72));
  border:2px solid rgba(7,14,27,.86);
  border-radius:8px;
}
.side-l { border-right:1px solid rgba(53,83,125,.5); }
.side-r { border-left:1px solid rgba(53,83,125,.5); }
.sec {
  padding:.78rem .9rem;
  border-bottom:0;
}
.sec-hd {
  color:#64738b;
  margin-bottom:.55rem;
}
.sec-hd::after { background:linear-gradient(90deg, rgba(64,92,135,.72), transparent); }
.cr { gap:.36rem; margin-bottom:.68rem; }
.cl { font-size:.86rem; color:#c3cad7; }
.cl strong { color:#f5f7fb; font-size:.86rem; }
input[type=range] {
  height:2px;
  background:linear-gradient(90deg, #9fcfff 0%, #28425f 62%, #1c2a42 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.03);
}
input[type=range]::-webkit-slider-thumb {
  width:13px;
  height:13px;
  border:2px solid rgba(255,255,255,.75);
}
.btn-row { gap:.45rem; margin-bottom:.42rem; }
.btn {
  min-height:34px;
  padding:.48rem .42rem;
  border-radius:4px;
  background:linear-gradient(180deg, rgba(11,21,39,.95), rgba(5,10,20,.95));
  border-color:rgba(77,101,139,.55);
  color:#e3eaf5;
  box-shadow:inset 0 0 18px rgba(255,255,255,.025);
}
.btn:hover { background:rgba(15,28,51,.96); }
.btn.on {
  background:linear-gradient(180deg, #f5d77a, #d9a83f);
  color:#08101d;
  border-color:#f7d66e;
  box-shadow:0 0 18px rgba(242,199,92,.18);
}
.btn.moon-on:not(.on) {
  background:linear-gradient(180deg, rgba(20,29,45,.98), rgba(8,13,25,.98));
  color:#e8edf7;
  border-color:rgba(180,195,220,.45);
}
.vtabs {
  top:1rem;
  left:.75rem;
  right:.75rem;
  transform:none;
  gap:.35rem;
  padding:.45rem;
  flex-wrap:nowrap;
  max-width:none;
  overflow-x:auto;
  justify-content:flex-start;
  scrollbar-width:none;
  border-radius:7px;
  background:rgba(5,11,22,.88);
  border-color:rgba(50,78,118,.7);
  box-shadow:0 12px 30px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.04);
}
.vtabs::-webkit-scrollbar { display:none; }
.vtab {
  min-width:62px;
  text-align:center;
  padding:.52rem .45rem;
  border:1px solid rgba(52,72,105,.54);
  border-radius:4px;
  background:rgba(8,15,29,.62);
  color:#c9d1df;
  font-size:.58rem;
  white-space:nowrap;
}
.vtab:hover { border-color:rgba(242,199,92,.45); }
.vtab.on {
  background:linear-gradient(180deg, rgba(242,199,92,.18), rgba(242,199,92,.07));
  color:#ffd86a;
  border-color:rgba(242,199,92,.55);
  box-shadow:0 0 20px rgba(242,199,92,.14), inset 0 0 18px rgba(242,199,92,.08);
}
#tab-photo {
  min-width:88px;
  white-space:nowrap;
  color:#55df79 !important;
  border-color:rgba(85,223,121,.35) !important;
}
.ro, .fml, .metric-cell, .bncc-box {
  border-radius:6px;
  background:
    radial-gradient(circle at 12% 0%, rgba(69,168,255,.08), transparent 56%),
    linear-gradient(180deg, rgba(9,19,36,.96), rgba(5,10,20,.96));
  border-color:rgba(56,83,124,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
.ro { padding:.82rem .9rem; margin-bottom:.5rem; min-height:76px; }
.ro-lbl, .mc-lbl { color:#687891; }
.ro-val { font-size:1.28rem; margin-top:.1rem; }
.ro-unit { color:#98a7bd; }
.fml { padding:.85rem; line-height:1.9; }
.phase-strip {
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:.35rem;
  overflow:visible;
  padding-bottom:0;
}
.phase-strip::-webkit-scrollbar { display:none; }
.ph-cell {
  min-width:0;
  min-height:62px;
  border-radius:4px;
  padding:.38rem .16rem;
  background:linear-gradient(180deg, rgba(11,21,39,.94), rgba(5,10,20,.94));
  border-color:rgba(56,83,124,.6);
}
.ph-cell.active {
  border-color:rgba(242,199,92,.9);
  box-shadow:0 0 18px rgba(242,199,92,.16), inset 0 0 18px rgba(242,199,92,.06);
}
.ph-icon { font-size:1.02rem; margin-bottom:.12rem; }
.ph-name { font-size:.42rem; color:#b7c1d2; line-height:1.2; }
.bncc-box {
  position:relative;
  padding:.72rem 1.65rem .72rem .72rem;
  font-size:.74rem;
  line-height:1.45;
}
.bncc-box::after {
  content:'›';
  position:absolute;
  right:.8rem;
  top:50%;
  transform:translateY(-50%);
  color:#8fa0b8;
  font-size:1.6rem;
}
.top {
  background:linear-gradient(180deg, rgba(5,9,17,.98), rgba(3,7,14,.98));
  border-bottom-color:rgba(52,78,118,.58);
  box-shadow:0 10px 28px rgba(0,0,0,.34);
}
.side {
  background:
    linear-gradient(90deg, rgba(12,24,43,.96), rgba(5,11,22,.99)),
    repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 18px);
}
.side-r {
  background:
    linear-gradient(270deg, rgba(12,24,43,.96), rgba(5,11,22,.99)),
    repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 18px);
}
.side-l .cr {
  position:relative;
  padding-left:1.3rem;
}
.side-l .cr::before {
  content:'';
  position:absolute;
  left:.1rem;
  top:.2rem;
  width:.62rem;
  height:.62rem;
  border:1px solid rgba(142,167,205,.45);
  border-radius:50%;
  background:
    radial-gradient(circle at 35% 32%, rgba(190,215,255,.8), transparent 18%),
    radial-gradient(circle, rgba(74,158,255,.18), transparent 68%);
}
.side-r .ro {
  position:relative;
  overflow:hidden;
  padding-right:4.15rem;
}
.side-r .ro::before {
  content:'';
  position:absolute;
  right:.9rem;
  top:50%;
  width:2rem;
  height:2rem;
  transform:translateY(-50%);
  border-radius:50%;
  border:4px solid rgba(85,100,145,.30);
  border-top-color:rgba(158,112,232,.82);
  border-right-color:rgba(85,223,121,.55);
  opacity:.85;
}
.side-r .ro::after {
  content:'';
  position:absolute;
  right:.72rem;
  bottom:.75rem;
  width:3.1rem;
  height:1.1rem;
  opacity:.65;
  background:
    radial-gradient(circle at 18% 72%, rgba(85,223,121,.9) 0 2px, transparent 2.5px),
    radial-gradient(circle at 52% 34%, rgba(158,112,232,.9) 0 2px, transparent 2.5px),
    radial-gradient(circle at 84% 62%, rgba(74,158,255,.9) 0 2px, transparent 2.5px);
  clip-path:polygon(0 70%, 16% 52%, 32% 58%, 52% 18%, 70% 55%, 88% 32%, 100% 48%, 100% 100%, 0 100%);
}
.side-r .ro:nth-child(2)::before {
  background:
    radial-gradient(circle at 32% 30%, #e7edf7 0 16%, #aeb7c6 17% 44%, #3f4658 45% 100%);
  border:0;
  box-shadow:inset -8px -4px 12px rgba(0,0,0,.55), 0 0 16px rgba(210,225,255,.18);
}
.side-r .ro:nth-child(3)::after,
.side-r .ro:nth-child(5)::after,
.side-r .ro:nth-child(7)::after { display:block; }
.side-r .ro:nth-child(4)::before { border-top-color:rgba(158,112,232,.35); border-right-color:rgba(158,112,232,.9); }
.side-r .ro:nth-child(6)::before {
  border-color:rgba(64,82,115,.45);
  border-top-color:rgba(86,211,100,.75);
  transform:translateY(-50%) rotate(35deg);
}
.phase-strip {
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:.42rem;
  padding:.15rem 0 .25rem;
}
.ph-cell {
  min-height:64px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.22rem;
  padding:.42rem .2rem .38rem;
  border-radius:6px;
  border-color:rgba(62,91,134,.72);
  background:
    radial-gradient(circle at 50% 32%, rgba(150,175,215,.12), transparent 34%),
    linear-gradient(180deg, rgba(10,19,34,.98), rgba(4,9,19,.98));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
.ph-cell:hover {
  transform:translateY(-1px);
  border-color:rgba(150,176,220,.78);
  background:
    radial-gradient(circle at 50% 32%, rgba(175,200,240,.16), transparent 36%),
    linear-gradient(180deg, rgba(13,24,43,.98), rgba(5,11,22,.98));
}
.ph-cell.active {
  background:
    radial-gradient(circle at 50% 34%, rgba(242,199,92,.24), transparent 38%),
    linear-gradient(180deg, rgba(30,23,8,.98), rgba(8,10,17,.98));
  border-color:rgba(242,199,92,.98);
  box-shadow:
    0 0 0 1px rgba(242,199,92,.28),
    0 0 16px rgba(242,199,92,.12),
    inset 0 1px 0 rgba(255,235,160,.08);
}
.ph-icon {
  width:1.82rem;
  height:1.82rem;
  display:block;
  position:relative;
  overflow:hidden;
  margin:0 auto;
  border-radius:50%;
  background:#060913;
  box-shadow:0 0 12px rgba(190,205,238,.08);
  font-size:0;
  color:transparent;
  text-shadow:none;
}
.ph-icon::before,
.ph-icon::after {
  content:'';
  position:absolute;
  inset:0;
  border-radius:50%;
}
.ph-icon::before {
  background:
    radial-gradient(circle at 66% 24%, rgba(255,255,255,.55) 0 4%, transparent 5%),
    radial-gradient(circle at 42% 42%, rgba(24,30,45,.45) 0 13%, transparent 14%),
    radial-gradient(circle at 61% 57%, rgba(30,36,52,.46) 0 10%, transparent 11%),
    radial-gradient(circle at 37% 66%, rgba(38,45,62,.38) 0 8%, transparent 9%),
    radial-gradient(circle at 36% 30%, #eef4ff 0 16%, #c7d0df 42%, #778195 100%);
  box-shadow:
    inset -5px -3px 8px rgba(0,0,0,.38),
    inset 3px 2px 7px rgba(255,255,255,.18);
}
.ph-icon::after {
  pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(185,205,238,.32), inset -7px -4px 10px rgba(0,0,0,.28);
}
.ph-cell:nth-child(1) .ph-icon::before {
  background:
    radial-gradient(circle at 62% 28%, rgba(115,125,150,.20) 0 5%, transparent 6%),
    radial-gradient(circle at 40% 50%, rgba(95,105,130,.18) 0 14%, transparent 15%),
    radial-gradient(circle at 38% 32%, #283147 0 8%, #101725 48%, #030711 100%);
  box-shadow:inset -7px -4px 10px rgba(0,0,0,.7), inset 5px 0 8px rgba(166,190,255,.08);
}
.ph-cell:nth-child(2) .ph-icon::before {
  background:
    radial-gradient(ellipse 36% 76% at 78% 50%, #f2f6ff 0 38%, #aab5c8 55%, transparent 57%),
    radial-gradient(circle at 42% 42%, rgba(42,51,75,.48) 0 13%, transparent 14%),
    radial-gradient(circle at 42% 48%, #111827 0 40%, #030711 100%);
  box-shadow:inset -4px 0 8px rgba(255,255,255,.08), inset 6px 0 10px rgba(0,0,0,.58);
}
.ph-cell:nth-child(3) .ph-icon::before {
  background:
    radial-gradient(circle at 72% 25%, rgba(255,255,255,.5) 0 4%, transparent 5%),
    radial-gradient(circle at 68% 56%, rgba(38,45,62,.32) 0 10%, transparent 11%),
    linear-gradient(90deg, #030711 0 49%, #e6edf9 50% 57%, #aeb9ca 100%);
  box-shadow:inset -4px -3px 8px rgba(0,0,0,.32), inset 4px 0 10px rgba(0,0,0,.58);
}
.ph-cell:nth-child(4) .ph-icon::before {
  background:
    radial-gradient(ellipse 46% 86% at 27% 50%, #030711 0 35%, transparent 37%),
    radial-gradient(circle at 64% 25%, rgba(255,255,255,.48) 0 4%, transparent 5%),
    radial-gradient(circle at 58% 55%, rgba(37,43,58,.34) 0 12%, transparent 13%),
    radial-gradient(circle at 42% 32%, #eff4ff 0 16%, #c8d1df 42%, #7a8498 100%);
}
.ph-cell:nth-child(5) .ph-icon::before {
  background:
    radial-gradient(circle at 66% 24%, rgba(255,255,255,.58) 0 4%, transparent 5%),
    radial-gradient(circle at 42% 42%, rgba(24,30,45,.42) 0 13%, transparent 14%),
    radial-gradient(circle at 61% 57%, rgba(30,36,52,.43) 0 10%, transparent 11%),
    radial-gradient(circle at 37% 66%, rgba(38,45,62,.34) 0 8%, transparent 9%),
    radial-gradient(circle at 36% 30%, #f5f8ff 0 18%, #d2d9e6 44%, #828b9d 100%);
  box-shadow:inset -5px -3px 8px rgba(0,0,0,.24), inset 4px 2px 9px rgba(255,255,255,.20);
}
.ph-cell:nth-child(6) .ph-icon::before {
  background:
    radial-gradient(ellipse 46% 86% at 73% 50%, #030711 0 35%, transparent 37%),
    radial-gradient(circle at 35% 25%, rgba(255,255,255,.48) 0 4%, transparent 5%),
    radial-gradient(circle at 42% 55%, rgba(37,43,58,.34) 0 12%, transparent 13%),
    radial-gradient(circle at 36% 30%, #eff4ff 0 16%, #c8d1df 42%, #7a8498 100%);
}
.ph-cell:nth-child(7) .ph-icon::before {
  background:
    radial-gradient(circle at 31% 25%, rgba(255,255,255,.5) 0 4%, transparent 5%),
    radial-gradient(circle at 32% 56%, rgba(38,45,62,.32) 0 10%, transparent 11%),
    linear-gradient(90deg, #dce6f6 0 50%, #050916 51% 100%);
  box-shadow:inset -5px 0 10px rgba(0,0,0,.58), inset 3px -3px 8px rgba(0,0,0,.22);
}
.ph-cell:nth-child(8) .ph-icon::before {
  background:
    radial-gradient(ellipse 36% 76% at 22% 50%, #f2f6ff 0 38%, #aab5c8 55%, transparent 57%),
    radial-gradient(circle at 58% 42%, rgba(42,51,75,.48) 0 13%, transparent 14%),
    radial-gradient(circle at 58% 48%, #111827 0 40%, #030711 100%);
  box-shadow:inset 4px 0 8px rgba(255,255,255,.08), inset -6px 0 10px rgba(0,0,0,.58);
}
.ph-cell.active .ph-icon {
  box-shadow:0 0 18px rgba(242,199,92,.24), 0 0 0 1px rgba(242,199,92,.46);
}
.ph-name {
  display:block;
  max-width:100%;
  min-height:1.7em;
  overflow:visible;
  text-overflow:clip;
  white-space:normal;
  text-align:center;
  color:#b9c6dc;
  font-size:.43rem;
  line-height:1.05;
  letter-spacing:.035em;
}
.ph-cell.active .ph-name {
  color:#f2c75c;
}
.canvas-wrap {
  background:#000;
}
.canvas-wrap::after {
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  box-shadow:inset 0 0 90px rgba(0,0,0,.65);
}
.info-bar {
  left:1.6rem;
  bottom:1.45rem;
  transform:none;
  padding:.75rem 1rem;
  border:1px solid rgba(56,83,124,.56);
  border-radius:5px;
  background:rgba(7,14,27,.78);
  color:#b5c0d0;
  box-shadow:0 10px 24px rgba(0,0,0,.25);
}
.photo-fab {
  position:absolute !important;
  bottom:1.45rem !important;
  right:1.45rem !important;
  z-index:20 !important;
  min-width:142px !important;
  min-height:42px !important;
  padding:.65rem 1rem !important;
  font-family:'IBM Plex Mono', monospace !important;
  font-size:.78rem !important;
  font-weight:700 !important;
  background:rgba(7,31,18,.82) !important;
  border:1px solid rgba(85,223,121,.68) !important;
  color:#57df79 !important;
  border-radius:5px !important;
  box-shadow:0 0 18px rgba(85,223,121,.12), inset 0 0 18px rgba(85,223,121,.04) !important;
}


/* Photo workflow and left panel cleanup */
.body { grid-template-columns:260px minmax(0,1fr) 250px; }
.side-l .sec { padding:.62rem .7rem; }
.side-l .sec-hd { margin-bottom:.5rem; }
.side-l .cr { margin-bottom:.52rem; }
.side-l .cl { align-items:center; gap:.45rem; font-size:.68rem; line-height:1.15; }
.side-l .cl strong { flex:0 0 auto; min-width:46px; text-align:right; }
.side-l .btn-row { gap:.45rem; margin-bottom:.45rem; }
.side-l .btn { min-height:34px; padding:.38rem .35rem; }
.side-l .phase-strip { grid-template-columns:repeat(4,minmax(0,1fr)); gap:.38rem; }
.side-l .ph-cell { min-height:58px; padding:.32rem .15rem; }
.side-l .ph-icon { width:1.55rem; height:1.55rem; }
.side-l .ph-name { font-size:.39rem; line-height:1.05; }
.side-l .bncc-box { padding:.62rem; line-height:1.55; }
#photoPanel {
  padding:4.6rem 1.15rem 1.25rem !important;
  background:
    radial-gradient(circle at 46% 10%, rgba(74,158,255,.12), transparent 30%),
    linear-gradient(180deg, #050a15 0%, #02050d 100%) !important;
}
#photoPanel > div { max-width:1120px !important; }
#photoPanel > div > div:first-child { margin-bottom:1rem !important; }
#photoPanel > div > div:first-child > div:first-child { font-size:1.05rem !important; }
#photoPanel > div > div:nth-child(2) {
  grid-template-columns:minmax(320px,.9fr) minmax(380px,1.1fr) !important;
  gap:1rem !important;
  align-items:start !important;
  margin-bottom:1rem !important;
}
#dropZone {
  min-height:230px !important;
  border-radius:8px !important;
  background:
    radial-gradient(circle at 50% 35%, rgba(86,211,100,.08), transparent 34%),
    linear-gradient(180deg, rgba(9,17,31,.96), rgba(5,9,18,.98)) !important;
  border-color:rgba(67,101,152,.72) !important;
}
#dropZone:hover { border-color:rgba(86,211,100,.85) !important; transform:translateY(-1px); }
#photoPreviewWrap { margin-top:0 !important; }
#photoPreview {
  max-height:360px !important;
  object-fit:contain !important;
  background:#02050d !important;
  border-radius:8px !important;
  border-color:rgba(67,101,152,.72) !important;
}
#btnAnalyze { min-height:38px !important; border-radius:5px !important; }
#scoreBox {
  min-height:132px !important;
  border-radius:8px !important;
  background:linear-gradient(180deg, rgba(10,20,36,.98), rgba(5,10,20,.98)) !important;
  border-color:rgba(67,101,152,.7) !important;
}
#metricsGrid { grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:.55rem !important; }
.metric-cell { border-radius:7px; padding:.68rem; background:linear-gradient(180deg,#081324,#050b16); border-color:rgba(50,78,120,.78); }
.mc-lbl { color:#667894; }
.mc-val { font-size:.8rem; line-height:1.2; word-break:break-word; }
#feedbackBox { border-radius:8px !important; border-color:rgba(67,101,152,.7) !important; }
#comparisonRow { background:rgba(7,14,27,.58); border:1px solid rgba(38,61,96,.72); border-radius:8px; padding:.85rem; }
#historyList { display:grid !important; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:.55rem !important; }
@media(max-width:1150px) {
  .body { grid-template-columns:240px minmax(0,1fr); }
  .side-r { display:none; }
  #photoPanel > div > div:nth-child(2), #metricsGrid { grid-template-columns:1fr !important; }
}
@media(max-width:850px) { .body { grid-template-columns:1fr; } .side { display:none; } html,body { overflow:auto; } }

/* Final sidebar polish */
.body { grid-template-columns:282px minmax(0,1fr) 250px; }
.side-l {
  background:linear-gradient(180deg, #071120 0%, #050b16 100%);
  scrollbar-width:thin;
}
.side-l .sec {
  padding:.72rem .8rem;
  border-bottom:1px solid rgba(48,76,116,.58);
}
.side-l .sec-hd {
  margin-bottom:.7rem;
  font-size:.54rem;
  letter-spacing:.2em;
  color:#6f819d;
}
.panel-note {
  margin:-.35rem 0 .72rem;
  color:#8292ad;
  font-size:.68rem;
  line-height:1.45;
}
.panel-hidden {
  display:none !important;
}
.side-l [data-panel-control].panel-hidden + [data-panel-control] {
  margin-top:0;
}
.side-l .btn.panel-hidden {
  display:none !important;
}
.side-l .btn-row:has(.btn.panel-hidden + .btn.panel-hidden),
.side-l .btn-row:has(.btn.panel-hidden):not(:has(.btn:not(.panel-hidden))) {
  display:none;
}
.side-l[data-context="solar"] #leftParams,
.side-l[data-context="routes"] #leftParams,
.side-l[data-context="space3d"] #leftParams {
  background:linear-gradient(180deg, rgba(12,28,48,.72), rgba(5,11,22,.92));
}
.side-l[data-context="solar"] #leftPhaseSection,
.side-l[data-context="routes"] #leftPhaseSection,
.side-l[data-context="space3d"] #leftPhaseSection,
.side-l[data-context="photo"] #leftPhaseSection,
.side-l[data-context="fieldcam"] #leftPhaseSection {
  display:none;
}
.side-l .cr {
  position:relative;
  margin-bottom:.72rem;
  padding-left:0;
}
.side-l .cr::before { display:none; }
.side-l .cl {
  align-items:flex-end;
  gap:.55rem;
  min-height:18px;
  color:#d7e1f2;
  font-size:.69rem;
  line-height:1.15;
}
.side-l .cl strong {
  min-width:58px;
  color:#ffffff;
  font-size:.82rem;
  text-shadow:0 1px 0 rgba(0,0,0,.55);
}
.side-l input[type=range] {
  height:4px;
  margin-top:.38rem;
  background:#2c4566;
}
.side-l input[type=range]::-webkit-slider-thumb {
  width:14px;
  height:14px;
  border:2px solid rgba(255,255,255,.7);
}
.side-l .btn-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.5rem;
  margin-bottom:.5rem;
}
.side-l .btn {
  min-width:0;
  min-height:38px;
  border-radius:5px;
  padding:.45rem .3rem;
  font-size:.63rem;
  letter-spacing:.03em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.side-l .control-label {
  margin:.85rem 0 .38rem;
  color:#6f819d;
}
.side-l .control-select {
  height:38px;
  border-radius:7px;
  background:#081326;
  color:#f1f6ff;
  border-color:rgba(79,115,169,.85);
  outline:none;
}
.side-l .phase-strip {
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:.48rem;
  overflow:visible;
  padding:0;
}
.side-l .ph-cell {
  min-width:0;
  min-height:72px;
  border-radius:7px;
  padding:.42rem .18rem .36rem;
  gap:.24rem;
  background:
    radial-gradient(circle at 50% 28%, rgba(185,205,238,.12), transparent 38%),
    linear-gradient(180deg, #081324, #040914);
}
.side-l .ph-icon {
  width:2.05rem;
  height:2.05rem;
  margin:0 auto .18rem;
  flex:0 0 auto;
}
.side-l .ph-name {
  min-height:2.15em;
  display:block;
  width:100%;
  padding:0 .05rem;
  font-size:.45rem;
  line-height:1.08;
  letter-spacing:.025em;
  white-space:normal;
  overflow:visible;
  color:#d0d9ea;
}
.side-l .ph-cell.active {
  background:
    radial-gradient(circle at 50% 30%, rgba(242,199,92,.24), transparent 42%),
    linear-gradient(180deg, #181509, #070913);
}
@media(max-width:1150px) {
  .body { grid-template-columns:282px minmax(0,1fr); }
}