*, *::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; }
.photo-image-frame {
  position:relative;
  display:block;
  width:100%;
  overflow:hidden;
  border-radius:8px;
  background:#02050d;
}
#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; }
.photo-adjust {
  margin-top:.55rem;
  padding:.72rem;
  border:1px solid rgba(50,78,120,.72);
  border-radius:7px;
  background:linear-gradient(180deg, rgba(8,19,36,.92), rgba(4,9,19,.96));
  color:#8292ad;
  font-family:'IBM Plex Mono', monospace;
  font-size:.62rem;
}
.photo-adjust label {
  display:flex;
  justify-content:space-between;
  gap:.75rem;
  margin-bottom:.42rem;
  color:#aab8cc;
}
.photo-adjust input { width:100%; }
.photo-adjust-note {
  margin-top:.38rem;
  color:#60728d;
  line-height:1.45;
}
.photo-auto-status {
  margin-top:.45rem;
  padding:.42rem .48rem;
  border:1px solid rgba(86,211,100,.18);
  border-radius:5px;
  background:rgba(86,211,100,.055);
  color:#56d364;
}
.photo-diagnostics {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:.5rem;
  margin:-.25rem 0 .8rem;
}
.diagnostic-card {
  min-height:58px;
  padding:.62rem;
  border:1px solid rgba(50,78,120,.72);
  border-radius:7px;
  background:linear-gradient(180deg, rgba(8,19,36,.86), rgba(4,9,19,.96));
}
.diagnostic-card span {
  display:block;
  margin-bottom:.3rem;
  color:#667894;
  font-family:'IBM Plex Mono', monospace;
  font-size:.52rem;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.diagnostic-card strong {
  display:block;
  color:#dde8fb;
  font-family:'IBM Plex Mono', monospace;
  font-size:.72rem;
  line-height:1.25;
}
.photo-time-control,
.field-timebox,
.field-guide {
  margin-top:.7rem;
  padding:.72rem;
  border:1px solid rgba(50,78,120,.78);
  border-radius:8px;
  background:linear-gradient(180deg, rgba(8,19,36,.88), rgba(4,9,19,.95));
}
.photo-time-control label,
.field-timebox label,
.field-guide strong {
  display:block;
  margin-bottom:.45rem;
  color:#aab8cc;
  font-family:'IBM Plex Mono', monospace;
  font-size:.58rem;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.photo-time-control > div,
.field-timebox > div {
  display:grid;
  grid-template-columns:1fr auto;
  gap:.45rem;
}
.photo-time-control input,
.photo-time-control select,
.field-timebox input {
  min-width:0;
  height:36px;
  padding:0 .55rem;
  border:1px solid rgba(74,158,255,.45);
  border-radius:5px;
  background:#030914;
  color:#dde8fb;
  font-family:'IBM Plex Mono', monospace;
  font-size:.68rem;
}
.photo-time-control button,
.field-timebox button {
  height:36px;
  padding:0 .7rem;
  border:1px solid rgba(232,200,122,.62);
  border-radius:5px;
  background:rgba(232,200,122,.10);
  color:#e8c87a;
  font-family:'IBM Plex Mono', monospace;
  font-size:.62rem;
  font-weight:700;
  cursor:pointer;
}
.photo-time-control small,
.field-timebox small,
.field-guide span {
  display:block;
  margin-top:.45rem;
  color:#7a8aaa;
  font-size:.72rem;
  line-height:1.45;
}
@media(max-width:1150px) {
  .body { grid-template-columns:240px minmax(0,1fr); }
  .side-r { display:none; }
  #photoPanel > div > div:nth-child(2), #metricsGrid, .photo-diagnostics { 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); }
}

/* Dashboard panel skin */
body {
  background:
    radial-gradient(circle at 72% 12%, rgba(75,126,197,.16), transparent 30%),
    radial-gradient(circle at 30% 28%, rgba(116,84,190,.10), transparent 34%),
    linear-gradient(180deg, #020816 0%, #030713 100%) !important;
}
.top {
  height:74px !important;
  margin:0 !important;
  padding:0 1.35rem !important;
  background:rgba(5,13,27,.86) !important;
  border-bottom:1px solid rgba(75,105,150,.34) !important;
  box-shadow:0 18px 45px rgba(0,0,0,.34), inset 0 -1px 0 rgba(255,255,255,.025) !important;
  backdrop-filter:blur(18px);
  overflow:hidden;
}
.brand-mark {
  width:52px !important;
  height:52px !important;
  border-color:rgba(242,199,92,.32) !important;
}
.brand-text {
  flex-direction:column !important;
  align-items:flex-start !important;
  gap:.18rem !important;
  letter-spacing:.14em !important;
  color:#f3f7ff !important;
}
.brand-text span {
  color:#8d9ab1 !important;
  font-size:.72rem !important;
  letter-spacing:.01em !important;
  font-weight:500 !important;
}
.top > .chip {
  min-height:42px !important;
  display:flex !important;
  align-items:center !important;
  gap:.5rem !important;
  padding:0 1rem !important;
  border-radius:9px !important;
  border-color:rgba(64,89,130,.54) !important;
  background:linear-gradient(180deg, rgba(13,25,43,.92), rgba(7,14,27,.92)) !important;
  color:#d8e2f1 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04) !important;
  white-space:nowrap !important;
}
.top > .chip::before {
  color:#9a7cff;
  font-size:.86rem;
}
.chip-gold::before { content:'⌂'; color:#f2c75c !important; }
.chip-blue:nth-of-type(2)::before { content:'☾'; }
.chip-blue:nth-of-type(3)::before { content:'✦'; }
.chip-moon::before { content:'ⓘ'; }
.chip-gold {
  color:#f2c75c !important;
  border-color:rgba(242,199,92,.42) !important;
  background:linear-gradient(180deg, rgba(54,43,19,.84), rgba(17,20,27,.94)) !important;
}
.top-right {
  gap:.6rem !important;
}
.sim-time {
  color:#c5d0e2 !important;
  font-family:'Inter', sans-serif !important;
  font-size:.74rem !important;
  font-weight:600 !important;
}
.top-action,
.settings-btn {
  min-height:38px !important;
  border-radius:9px !important;
  border:1px solid rgba(64,89,130,.54) !important;
  background:linear-gradient(180deg, rgba(13,25,43,.92), rgba(7,14,27,.92)) !important;
  color:#d8e2f1 !important;
}
.body {
  grid-template-columns:320px minmax(0,1fr) 320px !important;
  gap:0 !important;
  padding:0 !important;
  background:
    radial-gradient(circle at 50% 12%, rgba(77,130,200,.10), transparent 34%),
    #030713 !important;
}
.side {
  padding:1rem .95rem 1rem 1.15rem !important;
  gap:.85rem !important;
  background:rgba(4,11,23,.72) !important;
  border-color:rgba(75,105,150,.34) !important;
  scrollbar-width:thin;
}
.side .sec {
  border:1px solid rgba(47,72,110,.72) !important;
  border-radius:12px !important;
  padding:1rem !important;
  background:
    radial-gradient(circle at 90% 0%, rgba(70,130,210,.08), transparent 42%),
    linear-gradient(180deg, rgba(8,20,37,.94), rgba(5,12,24,.96)) !important;
  box-shadow:0 10px 34px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.035);
  width:100%;
}
.sec-hd {
  color:#a9c8f5 !important;
  font-size:.62rem !important;
  letter-spacing:.13em !important;
  margin-bottom:.8rem !important;
}
.sec-hd::after {
  background:linear-gradient(90deg, rgba(80,121,180,.48), transparent) !important;
}
.search-box {
  height:46px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:.7rem;
  padding:0 .8rem;
  border:1px solid rgba(54,82,124,.72);
  border-radius:10px;
  background:rgba(3,9,19,.72);
  color:#7d8ba2;
}
.search-box input {
  width:100%;
  border:0;
  outline:0;
  background:transparent;
  color:#dce7f7;
  font:500 .82rem 'Inter', sans-serif;
}
.search-box input::placeholder { color:#718096; }
.side-explore {
  gap:.35rem;
}
.nav-item {
  width:100%;
  min-height:38px;
  display:flex;
  align-items:center;
  gap:.7rem;
  margin:.18rem 0;
  padding:0 .75rem;
  border:1px solid transparent;
  border-radius:8px;
  background:transparent;
  color:#c6d1e2;
  font:700 .78rem 'Inter', sans-serif;
  text-align:left;
  cursor:pointer;
}
.nav-item span {
  width:18px;
  color:#c8d8f0;
  text-align:center;
}
.nav-item:hover,
.nav-item.active {
  border-color:rgba(87,150,220,.38);
  background:linear-gradient(90deg, rgba(74,158,255,.18), rgba(74,158,255,.05));
  color:#fff;
  box-shadow:inset 3px 0 0 #72b7ff;
}
.side-favorites p,
.side-favorites small,
.daily-tip-card p,
.curiosity-card p {
  color:#9aa8bd;
  font-size:.8rem;
  line-height:1.55;
}
.side-favorites small {
  display:block;
  margin-top:.8rem;
  color:#78879d;
}
.event-mini {
  display:flex;
  align-items:center;
  gap:.8rem;
}
.event-moon {
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:radial-gradient(circle, rgba(230,235,245,.25), rgba(120,135,160,.10));
  border:1px solid rgba(170,190,220,.25);
  font-size:1.9rem;
}
.event-mini strong,
.right-event strong {
  display:block;
  color:#f0f5ff;
  font-size:.88rem;
}
.event-mini small,
.right-event small {
  color:#8795ab;
  font-size:.74rem;
}
.countdown-mini {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:.35rem;
  margin-top:.8rem;
}
.countdown-mini span {
  min-height:44px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:rgba(7,15,29,.78);
  border:1px solid rgba(47,72,110,.56);
}
.countdown-mini b {
  color:#aa85ff;
  font:700 1.05rem 'Space Grotesk', sans-serif;
}
.countdown-mini small {
  color:#7d8ba2;
  font-size:.56rem;
  text-transform:uppercase;
}
.daily-tip-card {
  min-height:150px;
  background:
    linear-gradient(180deg, rgba(5,13,25,.58), rgba(5,12,24,.95)),
    radial-gradient(circle at 88% 20%, rgba(132,166,220,.20), transparent 26%) !important;
}
.daily-tip-card button,
.right-calendar-btn {
  margin-top:.8rem;
  min-height:36px;
  padding:0 .8rem;
  border:1px solid rgba(74,158,255,.36);
  border-radius:8px;
  background:rgba(8,18,34,.76);
  color:#dce7f7;
  font:700 .72rem 'Inter', sans-serif;
  cursor:pointer;
}
.canvas-wrap {
  margin:1rem 0 !important;
  border:1px solid rgba(47,72,110,.72) !important;
  border-radius:13px !important;
  background:
    radial-gradient(circle at 50% 30%, rgba(28,70,120,.16), transparent 38%),
    #01040b !important;
  box-shadow:0 12px 44px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.03);
  overflow:hidden !important;
}
.vtabs {
  top:1rem !important;
  left:1rem !important;
  right:1rem !important;
  transform:none !important;
  max-width:none !important;
  justify-content:flex-start !important;
  padding:.55rem !important;
  gap:.45rem !important;
  border-radius:10px !important;
  background:rgba(4,12,25,.78) !important;
  border-color:rgba(61,91,136,.72) !important;
}
.vtab {
  min-height:36px !important;
  display:flex !important;
  align-items:center !important;
  padding:0 .9rem !important;
  border:1px solid rgba(54,82,124,.72) !important;
  border-radius:7px !important;
  background:rgba(7,15,29,.78) !important;
  color:#c7d3e4 !important;
  font-size:.62rem !important;
  font-weight:700 !important;
}
.vtab.on {
  background:linear-gradient(180deg, rgba(54,43,19,.92), rgba(18,20,26,.95)) !important;
  border-color:rgba(242,199,92,.56) !important;
  color:#f2c75c !important;
  box-shadow:0 0 18px rgba(242,199,92,.10);
}
.side-r .ro {
  min-height:72px;
  position:relative;
  padding:.9rem 2.2rem .9rem 1rem !important;
  border-radius:11px !important;
  background:linear-gradient(180deg, rgba(8,20,37,.96), rgba(5,12,24,.98)) !important;
  border-color:rgba(47,72,110,.72) !important;
}
.side-r .ro::after {
  content:'›';
  position:absolute;
  right:1rem;
  top:50%;
  transform:translateY(-50%);
  color:#8fa1ba;
  font-size:1.5rem;
}
.ro-lbl {
  color:#7e8ca3 !important;
  font-size:.56rem !important;
}
.ro-val {
  color:#f2f6ff;
  font-family:'Space Grotesk', sans-serif !important;
  font-size:1.25rem !important;
}
.right-event {
  display:flex;
  align-items:center;
  gap:.75rem;
  min-height:56px;
  padding:.55rem;
  border:1px solid rgba(47,72,110,.46);
  border-radius:10px;
  background:rgba(7,15,29,.58);
  margin-bottom:.45rem;
}
.right-event span {
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(180,150,255,.10);
}
.curiosity-card {
  min-height:150px;
  background:
    radial-gradient(circle at 84% 20%, rgba(210,224,255,.20), transparent 16%),
    linear-gradient(180deg, rgba(8,20,37,.94), rgba(5,12,24,.96)) !important;
}
.side-l .btn,
.side-l .control-select,
.metric-cell {
  border-radius:8px !important;
}
@media(max-width:1280px) {
  .body { grid-template-columns:280px minmax(0,1fr) 280px !important; }
}
@media(max-width:1050px) {
  .body { grid-template-columns:260px minmax(0,1fr) !important; }
  .side-r { display:none !important; }
}
@media(max-width:760px) {
  .body { grid-template-columns:1fr !important; overflow:auto !important; }
  .side { display:none !important; }
  .top { overflow-x:auto; }
}

/* Reference-like overview dashboard */
body[data-view="orrery"] #c,
body[data-view="orrery"] .info-bar {
  display:none !important;
}
body[data-view="orrery"] .photo-fab {
  display:none !important;
}
body[data-view="orrery"] .vtabs {
  display:none !important;
}
body[data-view="orrery"] .top-action {
  display:none !important;
}
body[data-view="orrery"] .canvas-wrap {
  align-items:stretch !important;
  justify-content:stretch !important;
  padding:1.25rem !important;
  background:
    radial-gradient(circle at 38% 26%, rgba(93,140,210,.18), transparent 34%),
    radial-gradient(circle at 82% 8%, rgba(151,109,255,.10), transparent 28%),
    linear-gradient(180deg, rgba(4,12,25,.96), rgba(3,8,18,.98)) !important;
}
body:not([data-view="orrery"]) #dashboardHome {
  display:none !important;
}
body[data-view="orrery"] .side-l #leftParams,
body[data-view="orrery"] .side-l #leftViewControls,
body[data-view="orrery"] .side-l #leftPhaseSection,
body[data-view="orrery"] .side-l #leftBncc {
  display:none !important;
}
.top .chip {
  cursor:pointer;
}
.chip-blue:nth-of-type(3)::before { content:'⌁'; }
.chip-moon:nth-of-type(4)::before { content:'▥'; }
.chip-moon:nth-of-type(5)::before { content:'▧'; }
.chip-moon:nth-of-type(6)::before { content:'ⓘ'; }
.dashboard-home {
  width:100%;
  max-width:1280px;
  margin:0 auto;
  color:#e8eef8;
}
.dash-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:1rem;
}
.dash-head span,
.card-title {
  display:block;
  color:#a8bedf;
  font:800 .68rem 'IBM Plex Mono', monospace;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.dash-head h1 {
  margin:.4rem 0 .25rem;
  font:800 1.75rem/1.1 'Space Grotesk', sans-serif;
  color:#f4f7ff;
  letter-spacing:0;
}
.dash-head p {
  color:#9aa9bd;
  font-size:.92rem;
}
.dash-range {
  display:flex;
  border:1px solid rgba(55,83,124,.72);
  border-radius:10px;
  overflow:hidden;
  background:rgba(5,13,27,.72);
}
.dash-range button {
  position:relative;
  z-index:2;
  min-width:92px;
  height:42px;
  border:0;
  border-left:1px solid rgba(55,83,124,.48);
  background:transparent;
  color:#d9e3f2;
  font:800 .72rem 'Inter', sans-serif;
  cursor:pointer;
  pointer-events:auto;
}
.dash-range button:first-child { border-left:0; }
.dash-range button.on {
  background:rgba(74,158,255,.14);
  color:#7fc2ff;
  box-shadow:inset 0 -2px 0 #4a9eff;
}
.dash-grid {
  display:grid;
  grid-template-columns:minmax(430px,1.05fr) minmax(360px,.95fr);
  gap:1.1rem;
}
.moon-overview-card,
.today-summary-card,
.visibility-card,
.missions-card {
  border:1px solid rgba(57,86,130,.72);
  border-radius:13px;
  background:
    radial-gradient(circle at 72% 20%, rgba(82,137,210,.12), transparent 34%),
    linear-gradient(180deg, rgba(8,20,38,.92), rgba(4,10,21,.96));
  box-shadow:0 18px 44px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.035);
}
.moon-overview-card {
  min-height:480px;
  padding:1.4rem;
  overflow:hidden;
  background:
    radial-gradient(circle at 57% 40%, rgba(82,137,210,.18), transparent 38%),
    radial-gradient(circle at 62% 44%, rgba(255,255,255,.06), transparent 28%),
    linear-gradient(180deg, rgba(8,20,38,.92), rgba(4,10,21,.96));
}
.card-title {
  color:#d3dceb;
  margin-bottom:.8rem;
}
.card-title small {
  display:block;
  margin-top:.25rem;
  color:#92a3ba;
  font:600 .78rem 'Inter', sans-serif;
  letter-spacing:0;
  text-transform:none;
}
.moon-stage {
  min-height:360px;
  display:grid;
  grid-template-columns:145px minmax(230px,1fr);
  align-items:center;
  gap:1.25rem;
  padding-right:1.35rem;
  overflow:visible;
}
.moon-copy {
  display:grid;
  gap:2rem;
  padding-left:.25rem;
}
.moon-copy span,
.summary-grid span {
  display:block;
  margin-bottom:.35rem;
  color:#8393aa;
  font:800 .58rem 'IBM Plex Mono', monospace;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.moon-copy strong,
.summary-grid strong {
  color:#f3f7ff;
  font:800 1rem 'Space Grotesk', sans-serif;
}
.moon-copy small {
  display:block;
  margin-top:.2rem;
  color:#8f9db2;
}
.big-dashboard-moon {
  position:relative;
  width:clamp(180px, 16vw, 210px);
  aspect-ratio:1;
  margin:auto;
  border-radius:50%;
  background:
    radial-gradient(circle at 58% 34%, rgba(255,255,255,.22), transparent 18%),
    url('lunalab_assets/moon_lroc_color_2k.jpg') center/cover,
    #111827;
  box-shadow:
    0 0 0 1px rgba(160,190,230,.22),
    0 0 50px rgba(125,168,220,.24),
    inset -30px -8px 58px rgba(0,0,0,.42),
    inset 16px 8px 36px rgba(255,255,255,.10);
  overflow:visible;
  filter:contrast(1.08) saturate(.92) brightness(.95);
}
.big-dashboard-moon::before,
.small-moon::before {
  content:'';
  position:absolute;
  inset:0;
  border-radius:50%;
  background:
    radial-gradient(ellipse at 58% 34%, rgba(60,65,76,.38), transparent 13%),
    radial-gradient(ellipse at 42% 58%, rgba(48,52,62,.30), transparent 16%),
    radial-gradient(circle at 67% 62%, rgba(45,50,62,.22), transparent 8%),
    radial-gradient(circle at 36% 38%, rgba(35,42,54,.20), transparent 7%);
  mix-blend-mode:multiply;
}
.big-dashboard-moon::before {
  opacity:.28;
}
.moon-shadow {
  position:absolute;
  inset:-1px;
  border-radius:50%;
  background:
    radial-gradient(circle at var(--dash-light-x, 72%) 42%, rgba(255,255,255,.20), transparent 18%),
    linear-gradient(var(--dash-shadow-angle, 90deg),
      rgba(1,5,13,.98) 0%,
      rgba(1,5,13,.94) var(--dash-shadow-hard, 54%),
      rgba(1,5,13,.38) var(--dash-shadow-soft, 70%),
      rgba(1,5,13,0) 100%);
  mix-blend-mode:multiply;
  pointer-events:none;
}
.moon-shadow::after {
  content:'';
  position:absolute;
  inset:0;
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%, transparent 58%, rgba(1,5,13,.34) 82%, rgba(1,5,13,.72) 100%);
}
.moon-track {
  position:absolute;
  inset:-14px;
  border:2px dashed rgba(166,116,255,.75);
  border-left-color:transparent;
  border-bottom-color:transparent;
  border-radius:50%;
  transform:rotate(18deg);
}
.big-dashboard-moon b {
  position:absolute;
  right:10px;
  bottom:24px;
  color:#aa85ff;
  font:800 1.75rem 'Space Grotesk', sans-serif;
}
.big-dashboard-moon > small {
  position:absolute;
  right:10px;
  bottom:8px;
  color:#cbd7ea;
  text-transform:uppercase;
  font:800 .54rem 'IBM Plex Mono', monospace;
}
.phase-timeline {
  min-height:58px;
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  align-items:center;
  gap:.65rem;
  color:#8f9db2;
  font-size:.72rem;
}
.phase-timeline button {
  position:relative;
  height:42px;
  padding-top:20px;
  border:0;
  background:transparent;
  color:#8f9db2;
  font:700 .72rem 'Inter', sans-serif;
  cursor:pointer;
}
.phase-timeline button::before {
  content:'';
  position:absolute;
  left:8px;
  right:8px;
  top:11px;
  height:6px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(92,116,146,.48), rgba(165,180,205,.72));
}
.phase-timeline button::after {
  content:'';
  position:absolute;
  left:50%;
  top:4px;
  width:22px;
  height:22px;
  transform:translateX(-50%);
  border-radius:50%;
  background:#748198;
  box-shadow:0 0 12px rgba(180,200,230,.22);
}
.phase-timeline button.on {
  color:#f2f7ff;
}
.phase-timeline button.on::after {
  background:#e8edf4;
  box-shadow:0 0 0 3px rgba(122,166,230,.18), 0 0 18px rgba(210,226,255,.38);
}
.today-summary-card {
  padding:1.35rem;
}
.summary-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.7rem;
}
.summary-grid div {
  min-height:92px;
  padding:1rem;
  border:1px solid rgba(47,72,110,.58);
  border-radius:12px;
  background:rgba(7,16,31,.64);
}
.visibility-card {
  min-height:152px;
  grid-column:2;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:1.3rem;
}
.visibility-card strong {
  display:flex;
  align-items:center;
  gap:.45rem;
  color:#65e090;
  font:800 1rem 'Space Grotesk', sans-serif;
}
.visibility-card strong span {
  width:9px;
  height:9px;
  border-radius:50%;
  background:#65e090;
  box-shadow:0 0 14px rgba(101,224,144,.55);
}
.visibility-card p {
  margin-top:.45rem;
  color:#91a2bb;
}
.small-moon {
  position:relative;
  width:74px;
  height:74px;
  border-radius:50%;
  background:
    radial-gradient(circle at 62% 36%, rgba(255,255,255,.22), transparent 20%),
    url('lunalab_assets/moon_lroc_color_2k.jpg') center/cover,
    #293142;
  box-shadow:0 0 28px rgba(190,210,245,.18);
  filter:contrast(1.08) saturate(.9);
}
.missions-card {
  grid-column:1 / -1;
  padding:1.35rem;
}
.missions-card .card-title {
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.missions-card .card-title button {
  height:36px;
  padding:0 .85rem;
  border:1px solid rgba(57,86,130,.72);
  border-radius:8px;
  background:rgba(7,16,31,.64);
  color:#dce7f7;
  font-weight:700;
  cursor:pointer;
}
.mission-list {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:.85rem;
}
.mission-list div {
  min-height:112px;
  display:grid;
  grid-template-columns:58px 1fr;
  column-gap:.8rem;
  align-items:center;
  padding:.85rem;
  border:1px solid rgba(47,72,110,.58);
  border-radius:12px;
  background:rgba(7,16,31,.64);
}
.mission-list span {
  grid-row:1 / span 3;
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid rgba(220,230,245,.22);
  background:radial-gradient(circle, rgba(220,230,245,.14), rgba(10,18,32,.9));
  color:#eef4ff;
  font-size:1.5rem;
}
.mission-list strong {
  color:#f1f6ff;
  font-size:.95rem;
}
.mission-list small,
.mission-list p {
  color:#91a2bb;
  line-height:1.35;
}
@media(max-width:1350px) {
  .dash-grid { grid-template-columns:1fr; }
  .visibility-card { grid-column:auto; }
  .big-dashboard-moon { width:clamp(180px, 34vw, 210px); }
  .moon-stage { grid-template-columns:145px minmax(230px,1fr); }
}

/* Clean right live-data panel */
.side-r {
  padding:1rem !important;
  gap:1rem !important;
  background:linear-gradient(180deg, rgba(5,12,24,.92), rgba(3,8,17,.96)) !important;
}
.side-r .sec {
  padding:1rem !important;
  border-radius:13px !important;
  border:1px solid rgba(57,86,130,.72) !important;
  background:
    radial-gradient(circle at 92% 8%, rgba(74,158,255,.08), transparent 32%),
    linear-gradient(180deg, rgba(8,20,38,.95), rgba(5,12,24,.98)) !important;
}
.side-r .ro {
  min-height:76px !important;
  display:grid !important;
  grid-template-columns:42px minmax(0,1fr) 16px !important;
  grid-template-rows:auto auto auto !important;
  column-gap:.72rem !important;
  align-items:center !important;
  margin-bottom:.65rem !important;
  padding:.78rem .82rem !important;
  overflow:hidden !important;
  border:1px solid rgba(57,86,130,.72) !important;
  border-radius:12px !important;
  background:linear-gradient(180deg, rgba(7,17,32,.96), rgba(4,10,21,.98)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035), 0 8px 22px rgba(0,0,0,.16) !important;
}
.side-r .ro::before {
  content:'' !important;
  position:static !important;
  grid-row:1 / span 3 !important;
  grid-column:1 !important;
  width:38px !important;
  height:38px !important;
  transform:none !important;
  border:1px solid rgba(126,158,210,.24) !important;
  border-radius:50% !important;
  opacity:1 !important;
  background:
    radial-gradient(circle at 38% 34%, rgba(255,255,255,.36), transparent 18%),
    radial-gradient(circle at 50% 50%, rgba(157,112,232,.22), rgba(74,158,255,.08) 62%, rgba(7,15,29,.92) 100%) !important;
  box-shadow:0 0 18px rgba(126,158,210,.10), inset 0 0 12px rgba(0,0,0,.42) !important;
}
.side-r .ro:nth-child(2)::before {
  background:
    radial-gradient(circle at 36% 34%, rgba(255,255,255,.55), transparent 16%),
    url('lunalab_assets/moon_lroc_color_2k.jpg') center/cover !important;
  border-color:rgba(210,225,255,.28) !important;
}
.side-r .ro:nth-child(3)::before { background:radial-gradient(circle, rgba(158,112,232,.28), rgba(7,15,29,.95) 68%) !important; }
.side-r .ro:nth-child(4)::before { background:radial-gradient(circle, rgba(200,216,240,.30), rgba(7,15,29,.95) 68%) !important; }
.side-r .ro:nth-child(5)::before { background:radial-gradient(circle, rgba(74,158,255,.30), rgba(7,15,29,.95) 68%) !important; }
.side-r .ro:nth-child(6)::before { background:radial-gradient(circle, rgba(255,174,51,.32), rgba(7,15,29,.95) 68%) !important; }
.side-r .ro:nth-child(7)::before { background:radial-gradient(circle, rgba(86,211,100,.30), rgba(7,15,29,.95) 68%) !important; }
.side-r .ro::after {
  content:'›' !important;
  position:static !important;
  grid-row:1 / span 3 !important;
  grid-column:3 !important;
  width:auto !important;
  height:auto !important;
  transform:none !important;
  opacity:1 !important;
  clip-path:none !important;
  background:none !important;
  color:#93a8c5 !important;
  font-size:1.45rem !important;
  line-height:1 !important;
  align-self:center !important;
}
.side-r .ro-lbl {
  grid-column:2 !important;
  grid-row:1 !important;
  margin:0 0 .18rem !important;
  color:#7788a2 !important;
  font-size:.55rem !important;
  letter-spacing:.16em !important;
}
.side-r .ro-val {
  grid-column:2 !important;
  grid-row:2 !important;
  min-width:0 !important;
  color:#f4f7ff !important;
  font:800 1.16rem/1.08 'Space Grotesk', sans-serif !important;
  white-space:normal !important;
  word-break:break-word !important;
}
.side-r .ro-unit {
  grid-column:2 !important;
  grid-row:3 !important;
  margin-top:.16rem !important;
  color:#91a1b8 !important;
  font-size:.68rem !important;
  line-height:1.25 !important;
}
.side-r #rEclipse.c-red,
.side-r .c-red {
  color:#ff6b6b !important;
}
.side-r #rEclipse {
  color:#ffae33 !important;
}
.side-r .fml {
  border-radius:10px !important;
  background:rgba(5,13,27,.72) !important;
  border-color:rgba(57,86,130,.62) !important;
}

/* Live panel icon alignment by semantic row, not by row number */
.side-r .moon-map-panel {
  display:none !important;
}
body[data-view="moonmap"] .side-r .moon-map-panel {
  display:block !important;
}
body[data-view="moonmap"] .photo-fab {
  display:none !important;
}
body[data-view="moonmap"] .info-bar {
  max-width:calc(100% - 3rem) !important;
  white-space:normal !important;
  line-height:1.4 !important;
}
.side-r .ro-clock::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(173,211,255,.95) 0 4%, transparent 5%),
    conic-gradient(from -90deg, transparent 0 22%, rgba(74,158,255,.72) 23% 31%, transparent 32% 100%),
    radial-gradient(circle, rgba(74,158,255,.22), rgba(7,15,29,.95) 68%) !important;
}
.side-r .ro-phase::before {
  background:
    radial-gradient(circle at 28% 22%, rgba(255,255,255,.20), transparent 18%),
    radial-gradient(circle at 68% 48%, rgba(0,0,0,.40), transparent 44%),
    url('lunalab_assets/moon_lroc_color_2k.jpg') center/cover !important;
  border-color:rgba(210,225,255,.28) !important;
  box-shadow:
    inset -12px -6px 18px rgba(0,0,0,.66),
    inset 5px 3px 9px rgba(255,255,255,.12),
    0 0 18px rgba(190,156,255,.16) !important;
}
.side-r .ro-angle::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(158,112,232,.20) 0 34%, transparent 35%),
    conic-gradient(from 22deg, rgba(158,112,232,.08) 0 300deg, rgba(158,112,232,.95) 300deg 334deg, rgba(158,112,232,.08) 335deg 360deg),
    radial-gradient(circle, #081329 0 58%, #020714 100%) !important;
}
.side-r .ro-illum::before {
  background:
    linear-gradient(90deg, rgba(220,232,255,.96) 0 48%, rgba(24,33,50,.96) 49% 100%),
    radial-gradient(circle, #0b1425, #020714) !important;
  box-shadow:
    inset -8px -5px 14px rgba(0,0,0,.48),
    inset 5px 3px 10px rgba(255,255,255,.12),
    0 0 15px rgba(120,170,255,.14) !important;
}
.side-r .ro-day::before {
  background:
    conic-gradient(from -90deg, rgba(74,158,255,.95) 0 74%, rgba(74,158,255,.13) 74% 100%),
    radial-gradient(circle, #071629 0 56%, #020714 58% 100%) !important;
}
.side-r .ro-eclipse::before {
  background:
    radial-gradient(circle at 42% 50%, #ffbd45 0 21%, rgba(255,189,69,.28) 22% 45%, transparent 46%),
    radial-gradient(circle at 61% 50%, #050914 0 24%, transparent 25%),
    radial-gradient(circle, rgba(255,174,51,.20), rgba(7,15,29,.96) 70%) !important;
}
.side-r .ro-distance::before,
.side-r .ro-local::before {
  background:
    radial-gradient(circle at 30% 50%, #5edb7a 0 11%, transparent 12%),
    radial-gradient(circle at 72% 50%, #c6a6ff 0 10%, transparent 11%),
    linear-gradient(90deg, transparent 0 28%, rgba(86,211,100,.72) 29% 72%, transparent 73%),
    radial-gradient(circle, rgba(86,211,100,.18), rgba(7,15,29,.95) 70%) !important;
}
.side-r .ro-sublunar::before {
  background:
    radial-gradient(circle at 50% 37%, rgba(190,156,255,.95) 0 11%, transparent 12%),
    radial-gradient(circle at 50% 58%, rgba(190,156,255,.22) 0 31%, transparent 32%),
    radial-gradient(circle, rgba(190,156,255,.20), rgba(7,15,29,.95) 68%) !important;
}
.side-r .ro-look::before {
  background:
    linear-gradient(130deg, transparent 0 43%, rgba(215,230,255,.85) 44% 50%, transparent 51%),
    radial-gradient(circle at 68% 32%, rgba(74,158,255,.84) 0 9%, transparent 10%),
    radial-gradient(circle, rgba(74,158,255,.24), rgba(7,15,29,.95) 68%) !important;
}
body[data-view="moonmap"] .side-r .ro-val {
  font-size:1.02rem !important;
}

/* Projeto ViaLáctea — observatório planetário */
body[data-view="planets"] .body {
  grid-template-columns:300px minmax(0,1fr) !important;
}
body[data-view="planets"] .side-r,
body[data-view="planets"] .side-l .next-event-card,
body[data-view="planets"] .side-l .daily-tip-card {
  display:none !important;
}
body[data-view="planets"] #c,
body[data-view="planets"] .info-bar,
body[data-view="planets"] .photo-fab,
body:not([data-view="planets"]) #planetExplorer {
  display:none !important;
}
body[data-view="planets"] .canvas-wrap {
  align-items:stretch !important;
  justify-content:stretch !important;
  padding:0 !important;
  overflow:hidden !important;
}
.planet-explorer {
  width:100%;
  height:100%;
  overflow-y:auto;
  padding:1.35rem;
  color:#e9f1ff;
  background:
    radial-gradient(circle at 14% 5%, rgba(75,151,255,.13), transparent 26%),
    radial-gradient(circle at 86% 8%, rgba(170,111,255,.10), transparent 22%),
    linear-gradient(180deg,#020815,#01050d);
  scrollbar-width:thin;
}
.planet-explorer-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
  max-width:1440px;
  margin:0 auto 1rem;
}
.planet-eyebrow,
.planet-card-label {
  color:#80baff;
  font:800 .62rem 'IBM Plex Mono',monospace;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.planet-explorer-head h1 {
  margin:.35rem 0 .25rem;
  color:#f5f8ff;
  font:800 1.75rem/1.1 'Space Grotesk',sans-serif;
}
.planet-explorer-head p,
.planet-system-card p {
  color:#8d9db5;
  font-size:.82rem;
  line-height:1.5;
}
.planet-live-badge {
  min-width:190px;
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:.2rem .5rem;
  padding:.7rem .85rem;
  border:1px solid rgba(92,136,195,.48);
  border-radius:10px;
  background:rgba(5,15,30,.78);
}
.planet-live-badge i {
  width:9px;height:9px;border-radius:50%;background:#58df8b;
  box-shadow:0 0 14px rgba(88,223,139,.75);
}
.planet-live-badge span { color:#68e59a;font:800 .65rem 'IBM Plex Mono',monospace;text-transform:uppercase; }
.planet-live-badge strong { grid-column:1/-1;color:#dce8f8;font:600 .72rem 'IBM Plex Mono',monospace; }
.planet-tabs {
  max-width:1440px;
  display:grid;
  grid-template-columns:repeat(8,minmax(82px,1fr));
  gap:.45rem;
  margin:0 auto 1rem;
  padding:.5rem;
  border:1px solid rgba(55,86,130,.65);
  border-radius:12px;
  background:rgba(5,14,28,.82);
  position:sticky;
  top:-1px;
  z-index:6;
  backdrop-filter:blur(12px);
}
.planet-tabs button {
  min-height:42px;
  border:1px solid rgba(61,93,139,.55);
  border-radius:8px;
  background:rgba(8,19,36,.76);
  color:#aebcd1;
  font:800 .68rem 'Inter',sans-serif;
  cursor:pointer;
  transition:.18s ease;
}
.planet-tabs button:hover { border-color:rgba(102,176,255,.62);color:#fff;transform:translateY(-1px); }
.planet-tabs button.on {
  border-color:#68b3ff;
  color:#fff;
  background:linear-gradient(180deg,rgba(47,126,214,.40),rgba(15,48,88,.58));
  box-shadow:0 0 20px rgba(74,158,255,.15),inset 0 -2px 0 #68b3ff;
}
.planet-analysis-grid {
  max-width:1440px;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(280px,.75fr) minmax(480px,1.25fr);
  gap:1rem;
  align-items:stretch;
}
.planet-card,
.planet-overview {
  border:1px solid rgba(55,86,130,.66);
  border-radius:14px;
  background:
    radial-gradient(circle at 82% 8%,rgba(76,145,230,.10),transparent 30%),
    linear-gradient(180deg,rgba(8,20,38,.94),rgba(4,10,21,.97));
  box-shadow:0 16px 40px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.03);
}
.planet-phase-card {
  min-height:390px;
  display:grid;
  grid-template-areas:"label label" "visual identity" "badge identity";
  grid-template-columns:minmax(190px,.8fr) minmax(160px,1fr);
  grid-template-rows:auto 1fr auto;
  align-items:center;
  gap:.2rem;
  padding:1.15rem;
  overflow:hidden;
}
.planet-phase-card .planet-card-label { grid-area:label;align-self:start; }
#planetPhaseCanvas { grid-area:visual;width:100%;max-width:240px;height:auto;aspect-ratio:1 / 1;justify-self:center; }
.planet-texture-badge { grid-area:badge;justify-self:center;display:flex;align-items:center;gap:.35rem;color:#7f91a9;font:700 .55rem 'IBM Plex Mono',monospace;text-transform:uppercase; }
.planet-texture-badge span { width:7px;height:7px;border-radius:50%;background:#69b8ff;box-shadow:0 0 10px rgba(105,184,255,.72); }
.planet-identity { grid-area:identity;align-self:center; }
.planet-identity small { color:#75869f;font:700 .62rem 'IBM Plex Mono',monospace;text-transform:uppercase; }
.planet-identity h2 { margin:.35rem 0;color:#fff;font:800 2rem 'Space Grotesk',sans-serif; }
.planet-identity strong { display:block;color:#9eceff;font:800 .82rem 'IBM Plex Mono',monospace; }
.planet-identity p { margin-top:.8rem;color:#98a8bd;font-size:.8rem;line-height:1.6; }
.planet-data-card { min-height:390px;padding:1.15rem; }
.planet-metrics { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.55rem;margin-top:.8rem; }
.planet-metrics div {
  min-height:88px;
  padding:.75rem;
  border:1px solid rgba(56,86,128,.52);
  border-radius:10px;
  background:rgba(4,12,25,.68);
}
.planet-metrics span { display:block;color:#75869f;font:800 .52rem 'IBM Plex Mono',monospace;letter-spacing:.09em;text-transform:uppercase; }
.planet-metrics strong { display:block;margin:.4rem 0 .18rem;color:#f0f6ff;font:800 1.05rem 'Space Grotesk',sans-serif;white-space:nowrap; }
.planet-metrics small { color:#71829a;font-size:.62rem;line-height:1.3; }
.planet-observation { margin-top:.7rem;padding:.75rem .85rem;border-left:3px solid #68b3ff;border-radius:0 9px 9px 0;background:rgba(53,125,205,.10);color:#c7d6e9;font-size:.78rem;line-height:1.55; }
.planet-sky-card,.planet-system-card { min-height:425px;padding:1.15rem; }
.planet-card-title-row { display:flex;align-items:flex-start;justify-content:space-between;gap:1rem; }
.planet-card-title-row>span,.planet-visibility { color:#7fc8ff;font:700 .62rem 'IBM Plex Mono',monospace; }
#planetSkyCanvas,#planetSystemCanvas {
  display:block;
  width:100%;
  height:340px;
  margin-top:.7rem;
  border:1px solid rgba(72,120,177,.42);
  border-radius:12px;
  background:#01050d;
  box-shadow:inset 0 0 45px rgba(0,0,0,.52),0 10px 26px rgba(0,0,0,.18);
  cursor:default;
}
.planet-map-card { grid-column:1/-1;padding:1.15rem; }
.planet-map-head { display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:.8rem; }
.planet-map-head h2 { margin:.35rem 0 .2rem;color:#f3f7ff;font:800 1.5rem 'Space Grotesk',sans-serif; }
.planet-map-head p { color:#8d9db5;font-size:.78rem; }
.planet-map-live { display:flex;align-items:center;gap:.4rem;color:#69df96;font:800 .58rem 'IBM Plex Mono',monospace;text-transform:uppercase;white-space:nowrap; }
.planet-map-live i { width:8px;height:8px;border-radius:50%;background:#56d364;box-shadow:0 0 12px rgba(86,211,100,.75); }
#planetMapCanvas { display:block;width:100%;height:360px;border:1px solid rgba(91,129,180,.65);border-radius:11px;background:#03101e;cursor:default; }
.planet-map-legend { display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.1rem;margin:.55rem 0 .75rem;color:#91a1b8;font:700 .58rem 'IBM Plex Mono',monospace; }
.planet-map-legend span { display:flex;align-items:center;gap:.38rem; }
.planet-map-legend i { width:9px;height:9px;border-radius:50%; }
.legend-visible { background:#7769f2; }.legend-subpoint { background:#c6a6ff; }.legend-observer { background:#56d364; }.legend-texture { background:#92a3ba; }
.planet-map-metrics { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.65rem; }
.planet-map-metrics>div { min-height:108px;padding:.85rem;border:1px solid rgba(57,91,137,.68);border-radius:11px;background:rgba(5,15,29,.82); }
.planet-map-metrics span { display:block;color:#78aaff;font:800 .52rem 'IBM Plex Mono',monospace;letter-spacing:.08em;text-transform:uppercase; }
.planet-map-metrics strong { display:block;margin:.55rem 0 .45rem;color:#f2f6ff;font:800 .9rem 'Space Grotesk',sans-serif; }
.planet-map-metrics small { color:#7e8fa7;font-size:.63rem;line-height:1.45; }
.planet-map-status { display:inline-flex;margin-top:.8rem;padding:.55rem .75rem;border:1px solid rgba(72,107,153,.55);border-radius:6px;background:rgba(4,12,25,.72);color:#98a9bf;font:600 .6rem 'IBM Plex Mono',monospace; }
.observer-location { display:grid;grid-template-columns:1fr 1fr auto;gap:.5rem;margin-top:.65rem; }
.observer-location label { color:#7e90a9;font:700 .54rem 'IBM Plex Mono',monospace;text-transform:uppercase; }
.observer-location input { width:100%;height:36px;margin-top:.25rem;padding:0 .55rem;border:1px solid rgba(62,95,140,.65);border-radius:7px;background:#030b18;color:#e1ebf8;font:700 .68rem 'IBM Plex Mono',monospace; }
.observer-location button { align-self:end;height:36px;padding:0 .8rem;border:1px solid rgba(76,166,255,.56);border-radius:7px;background:rgba(37,106,180,.22);color:#9dd2ff;font:800 .64rem 'Inter',sans-serif;cursor:pointer;white-space:nowrap; }
.location-status { display:block;margin-top:.45rem;color:#71839c;font-size:.62rem; }
.planet-overview { max-width:1440px;margin:1rem auto 0;padding:1.1rem; }
.planet-overview-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.6rem;margin-top:.75rem; }
.planet-mini-card { min-height:94px;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:.15rem .65rem;padding:.7rem;border:1px solid rgba(55,86,130,.52);border-radius:10px;background:rgba(4,12,25,.68);color:#dce8f7;text-align:left;cursor:pointer; }
.planet-mini-card:hover,.planet-mini-card.on { border-color:rgba(103,181,255,.76);background:rgba(31,83,140,.24); }
.planet-mini-card i { grid-row:1/4;width:28px;height:28px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,var(--planet-color) 32%,#07101e 100%);box-shadow:0 0 14px color-mix(in srgb,var(--planet-color),transparent 55%); }
.planet-mini-card span { font:800 .78rem 'Space Grotesk',sans-serif; }
.planet-mini-card strong { color:#98cfff;font:700 .62rem 'IBM Plex Mono',monospace; }
.planet-mini-card small { color:#72849d;font-size:.6rem; }
.planet-model-note { max-width:1440px;margin:.85rem auto 0;color:#667991;font-size:.62rem;line-height:1.5;text-align:center; }
@media(max-width:1180px){
  body[data-view="planets"] .body{grid-template-columns:250px minmax(0,1fr)!important;}
  .planet-tabs{grid-template-columns:repeat(4,1fr);}
  .planet-analysis-grid{grid-template-columns:1fr;}
  .planet-phase-card{grid-template-columns:minmax(200px,.7fr) 1fr;}
  .planet-metrics{grid-template-columns:repeat(4,1fr);}
}
@media(max-width:760px){
  body[data-view="planets"] .body{grid-template-columns:minmax(0,1fr)!important;}
  .planet-explorer{padding:.8rem;}
  .planet-explorer-head{display:block;}
  .planet-live-badge{margin-top:.7rem;}
  .planet-tabs{grid-template-columns:repeat(2,1fr);position:relative;}
  .planet-phase-card{grid-template-columns:1fr;text-align:center;}
  .planet-phase-card{grid-template-areas:"label" "visual" "badge" "identity";grid-template-rows:auto auto auto auto;}
  .planet-metrics{grid-template-columns:repeat(2,1fr);}
  .observer-location{grid-template-columns:1fr 1fr;}
  .observer-location button{grid-column:1/-1;}
  .planet-overview-grid{grid-template-columns:1fr 1fr;}
  .planet-map-head{display:block;}
  .planet-map-live{margin-top:.6rem;}
  .planet-map-metrics{grid-template-columns:1fr 1fr;}
}

/* Single navigation source: all views live in the left panel. */
.top > .chip,
.canvas-wrap > .vtabs {
  display:none !important;
}
.side-explore .nav-item {
  min-height:36px;
}
.side-explore .nav-item span {
  font-size:.78rem;
}
.canvas-wrap {
  padding-top:0 !important;
}

/* Textured live data cards */
.side-r .ro {
  isolation:isolate !important;
  overflow:hidden !important;
  background:
    radial-gradient(circle at 86% 16%, rgba(115,170,255,.14), transparent 34%),
    linear-gradient(135deg, rgba(16,35,60,.94), rgba(5,12,24,.96) 54%, rgba(3,8,18,.98)) !important;
  border-color:rgba(80,121,178,.64) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    inset 0 -18px 34px rgba(0,0,0,.22),
    0 8px 26px rgba(0,0,0,.16) !important;
}
.side-r .ro > * {
  position:relative;
  z-index:2;
}
.side-r .ro .ro-lbl,
.side-r .ro .ro-val,
.side-r .ro .ro-unit {
  text-shadow:0 1px 10px rgba(0,0,0,.42) !important;
}
.side-r .ro-clock {
  background:
    radial-gradient(circle at 18% 50%, rgba(220,232,255,.16), transparent 22%),
    linear-gradient(135deg, rgba(25,45,68,.96), rgba(6,14,28,.96) 58%, rgba(2,7,16,.98)) !important;
}
.side-r .ro-phase {
  background:
    radial-gradient(circle at 22% 48%, rgba(190,156,255,.17), transparent 26%),
    linear-gradient(135deg, rgba(26,28,58,.96), rgba(6,14,29,.96) 58%, rgba(2,7,16,.98)) !important;
}
.side-r .ro-angle {
  background:
    repeating-conic-gradient(from 18deg at 15% 50%, rgba(158,112,232,.10) 0 7deg, transparent 8deg 24deg),
    linear-gradient(135deg, rgba(19,28,55,.96), rgba(5,13,27,.97) 56%, rgba(2,7,16,.98)) !important;
}
.side-r .ro-illum {
  background:
    linear-gradient(100deg, rgba(96,142,210,.15) 0 35%, transparent 36%),
    linear-gradient(135deg, rgba(14,33,58,.96), rgba(5,13,27,.97) 56%, rgba(2,7,16,.98)) !important;
}
.side-r .ro-day {
  background:
    radial-gradient(circle at 18% 52%, rgba(255,205,92,.14), transparent 25%),
    linear-gradient(135deg, rgba(39,31,21,.94), rgba(5,13,27,.97) 58%, rgba(2,7,16,.98)) !important;
}
.side-r .ro-eclipse {
  background:
    radial-gradient(circle at 20% 50%, rgba(255,91,91,.16), transparent 24%),
    linear-gradient(135deg, rgba(48,24,24,.94), rgba(6,13,27,.97) 58%, rgba(2,7,16,.98)) !important;
}
.side-r .ro-distance,
.side-r .ro-local {
  background:
    radial-gradient(circle at 18% 52%, rgba(86,211,100,.18), transparent 25%),
    linear-gradient(135deg, rgba(14,42,38,.95), rgba(5,13,27,.97) 58%, rgba(2,7,16,.98)) !important;
}
.side-r .ro-clock::before {
  background:
    radial-gradient(circle at 28% 22%, rgba(255,255,255,.18), transparent 18%),
    radial-gradient(circle at 60% 55%, rgba(0,0,0,.32), transparent 46%),
    url('lunalab_assets/moon_lroc_color_2k.jpg') center/cover !important;
  border-color:rgba(218,228,246,.34) !important;
  box-shadow:
    inset -10px -6px 16px rgba(0,0,0,.58),
    inset 5px 3px 9px rgba(255,255,255,.12),
    0 0 18px rgba(190,210,255,.14) !important;
}

/* Field-specific textures inside each live-data circle. */
.side-r .ro::before {
  background-color:#061124 !important;
  background-blend-mode:screen, normal, normal !important;
}
.side-r .ro-clock::before {
  background:
    radial-gradient(circle at 30% 24%, rgba(255,255,255,.25), transparent 18%),
    radial-gradient(circle at 65% 55%, rgba(0,0,0,.34), transparent 44%),
    url('lunalab_assets/moon_lroc_color_2k.jpg') center/cover !important;
}
.side-r .ro-phase::before {
  background:
    linear-gradient(90deg, rgba(6,10,22,.88) 0 47%, transparent 48%),
    radial-gradient(circle at 31% 28%, rgba(190,156,255,.28), transparent 18%),
    url('lunalab_assets/moon_lroc_color_2k.jpg') center/cover !important;
}
.side-r .ro-angle::before {
  background:
    radial-gradient(circle at 50% 50%, #050914 0 38%, transparent 39%),
    repeating-conic-gradient(from -20deg, rgba(158,112,232,.72) 0 5deg, rgba(158,112,232,.10) 6deg 15deg),
    radial-gradient(circle, rgba(26,18,46,.88), rgba(2,7,16,.98) 72%) !important;
}
.side-r .ro-illum::before {
  background:
    linear-gradient(90deg, rgba(215,229,255,.95) 0 31%, rgba(67,111,170,.44) 32% 49%, rgba(6,11,24,.98) 50% 100%),
    radial-gradient(circle at 36% 34%, rgba(255,255,255,.36), transparent 18%),
    radial-gradient(circle, rgba(46,109,178,.38), rgba(2,7,16,.98) 72%) !important;
}
.side-r .ro-day::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(5,10,20,.96) 0 45%, transparent 46%),
    conic-gradient(from -90deg, rgba(255,205,92,.96) 0 81%, rgba(255,205,92,.16) 81% 100%),
    radial-gradient(circle, rgba(88,61,18,.75), rgba(2,7,16,.98) 72%) !important;
}
.side-r .ro-eclipse::before {
  background:
    radial-gradient(circle at 40% 50%, rgba(255,190,64,.94) 0 23%, transparent 24%),
    radial-gradient(circle at 57% 50%, #050914 0 25%, transparent 26%),
    radial-gradient(circle, rgba(255,80,80,.24), rgba(2,7,16,.98) 72%) !important;
}
.side-r .ro-distance::before,
.side-r .ro-local::before {
  background:
    radial-gradient(circle at 30% 50%, #56d364 0 8%, transparent 9%),
    radial-gradient(circle at 72% 50%, #aa85ff 0 8%, transparent 9%),
    linear-gradient(90deg, transparent 0 29%, rgba(86,211,100,.72) 30% 70%, transparent 71%),
    radial-gradient(circle, rgba(32,130,80,.50), rgba(2,7,16,.98) 72%) !important;
}