:root{
  --bg:#050712;
  --panel:#090d1a;
  --panel2:#0d1322;
  --panel3:#11192b;
  --line:rgba(91,141,239,.18);
  --line2:rgba(0,229,255,.24);
  --cyan:#00e5ff;
  --blue:#5b8def;
  --green:#4ade80;
  --gold:#fbbf24;
  --red:#fb7185;
  --text:#edf6ff;
  --muted:rgba(237,246,255,.58);
  --soft:rgba(237,246,255,.08);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(circle at 78% 12%,rgba(0,229,255,.12),transparent 30%),
    radial-gradient(circle at 12% 20%,rgba(91,141,239,.13),transparent 32%),
    linear-gradient(180deg,#060817 0%,#03050d 100%);
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
}
button,input,select{font:inherit}
button,select{cursor:pointer}
.app-shell{height:100%;display:grid;grid-template-rows:64px 1fr}
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:0 18px;
  border-bottom:1px solid var(--line);
  background:rgba(5,7,18,.9);
  backdrop-filter:blur(14px);
}
.brand{display:flex;align-items:center;gap:14px;min-width:0}
.mark{
  width:36px;
  height:36px;
  border:1px solid rgba(0,229,255,.55);
  border-radius:9px;
  display:grid;
  place-items:center;
  color:var(--cyan);
  font-weight:900;
  box-shadow:0 0 24px rgba(0,229,255,.14);
}
.brand strong{
  display:block;
  font-size:.9rem;
  letter-spacing:.16em;
}
.brand span{
  display:block;
  color:var(--muted);
  font-size:.66rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  margin-top:2px;
}
.top-actions{display:flex;gap:8px;align-items:center}
.btn{
  border:1px solid rgba(237,246,255,.12);
  background:rgba(237,246,255,.045);
  color:var(--text);
  border-radius:9px;
  padding:10px 13px;
  font-size:.78rem;
  font-weight:800;
  text-decoration:none;
  transition:.18s ease;
}
.btn:hover{border-color:rgba(0,229,255,.42);background:rgba(0,229,255,.08)}
.btn.primary{
  color:#001018;
  border:0;
  background:linear-gradient(135deg,var(--cyan),#7b6cff);
}
.btn.ghost{color:var(--muted)}
.btn.full{width:100%}
.workspace{
  min-height:0;
  display:grid;
  grid-template-columns:300px 1fr 340px;
}
.panel{
  overflow:auto;
  background:rgba(7,10,22,.82);
  backdrop-filter:blur(16px);
}
.left-panel{border-right:1px solid var(--line)}
.right-panel{border-left:1px solid var(--line)}
.block{
  padding:18px;
  border-bottom:1px solid var(--line);
}
.block-title{
  color:#78b8ff;
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:.62rem;
  font-weight:900;
  margin-bottom:13px;
}
.field{display:block;margin-bottom:12px}
.field span{
  display:block;
  color:var(--muted);
  font-size:.72rem;
  font-weight:800;
  margin-bottom:7px;
}
select,input{
  width:100%;
  border:1px solid rgba(237,246,255,.12);
  border-radius:9px;
  background:rgba(237,246,255,.05);
  color:var(--text);
  padding:11px 12px;
  outline:none;
}
select:focus,input:focus{border-color:rgba(0,229,255,.55)}
option{background:#0b1020;color:var(--text)}
.measure-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.sector-note{
  color:var(--muted);
  font-size:.78rem;
  line-height:1.55;
  border:1px solid rgba(0,229,255,.17);
  background:rgba(0,229,255,.045);
  border-radius:10px;
  padding:12px;
}
.ai-block{
  background:
    radial-gradient(circle at 92% 8%,rgba(0,229,255,.12),transparent 35%),
    rgba(7,10,22,.82);
}
.ai-note{
  color:#bdefff;
  font-size:.78rem;
  line-height:1.55;
  border:1px solid rgba(0,229,255,.22);
  background:rgba(0,229,255,.06);
  border-radius:10px;
  padding:12px;
}
.ai-meter{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  margin-top:10px;
  border:1px solid rgba(74,222,128,.22);
  background:rgba(74,222,128,.07);
  border-radius:10px;
  padding:10px 12px;
}
.ai-meter span{
  color:var(--muted);
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:900;
}
.ai-meter strong{
  color:#b8ffd0;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.doctrine-list{
  display:grid;
  gap:9px;
}
.doctrine-list div{
  border:1px solid rgba(237,246,255,.1);
  background:rgba(237,246,255,.04);
  border-radius:10px;
  padding:11px;
}
.doctrine-list b{
  display:block;
  color:var(--cyan);
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  margin-bottom:5px;
}
.doctrine-list span{
  display:block;
  color:var(--muted);
  font-size:.72rem;
  line-height:1.48;
}
.dropzone{
  min-height:142px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:8px;
  border:1px dashed rgba(0,229,255,.36);
  background:rgba(0,229,255,.04);
  border-radius:10px;
  padding:16px;
}
.dropzone input{display:none}
.dropzone strong{font-size:.86rem}
.dropzone span{color:var(--muted);font-size:.75rem;line-height:1.45}
.mini-actions{margin-top:10px}
.quality-list{display:grid;gap:8px}
.quality{
  border:1px solid rgba(237,246,255,.1);
  background:rgba(237,246,255,.04);
  border-radius:10px;
  padding:10px;
}
.quality.active{
  border-color:rgba(0,229,255,.42);
  background:rgba(0,229,255,.075);
}
.quality b{display:flex;justify-content:space-between;font-size:.8rem}
.quality span{display:block;color:var(--muted);font-size:.68rem;margin-top:4px}
.stage{
  position:relative;
  min-width:0;
  min-height:0;
  display:grid;
  grid-template-rows:auto minmax(340px,1fr) auto;
  padding:20px 22px;
  overflow:auto;
}
.stage-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:18px;
}
.kicker{
  color:var(--cyan);
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:.64rem;
  font-weight:900;
}
h1{
  margin:5px 0 0;
  font-size:clamp(1.65rem,3.5vw,3.7rem);
  line-height:1;
  letter-spacing:-.03em;
}
.status-pill{
  border:1px solid rgba(74,222,128,.28);
  background:rgba(74,222,128,.08);
  color:#b8ffd0;
  padding:9px 12px;
  border-radius:999px;
  font-size:.75rem;
  font-weight:900;
  white-space:nowrap;
}
.viewport-card{
  position:relative;
  min-height:430px;
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 30%,rgba(91,141,239,.12),transparent 31%),
    linear-gradient(180deg,rgba(13,19,34,.72),rgba(5,7,18,.78));
}
.scene-toolbar{
  position:absolute;
  top:14px;
  left:14px;
  z-index:4;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.tool{
  border:1px solid rgba(237,246,255,.12);
  background:rgba(5,7,18,.72);
  color:var(--muted);
  border-radius:8px;
  padding:8px 10px;
  font-size:.72rem;
  font-weight:900;
}
.tool.active{
  color:#001018;
  border-color:transparent;
  background:linear-gradient(135deg,var(--cyan),#7b6cff);
}
.viewport{
  position:absolute;
  inset:0;
  perspective:900px;
  overflow:hidden;
}
.grid-floor{
  position:absolute;
  left:50%;
  bottom:-90px;
  width:1100px;
  height:620px;
  transform:translateX(-50%) rotateX(68deg);
  background-image:
    linear-gradient(rgba(0,229,255,.18) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,229,255,.18) 1px,transparent 1px);
  background-size:42px 42px;
  opacity:.5;
}
.scene-object{
  position:absolute;
  left:50%;
  top:52%;
  width:min(58vw,680px);
  height:min(46vh,420px);
  transform:translate(-50%,-50%);
}
.object-part{
  position:absolute;
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  background:linear-gradient(145deg,var(--part-color),rgba(255,255,255,.08));
  box-shadow:
    inset -12px -18px 30px rgba(0,0,0,.35),
    inset 10px 12px 22px rgba(255,255,255,.08),
    0 22px 50px rgba(0,0,0,.28);
  transition:.25s ease;
}
.viewport.wire .object-part{
  background:repeating-linear-gradient(45deg,transparent 0 9px,rgba(0,229,255,.22) 10px 11px);
  border-color:rgba(0,229,255,.75);
  box-shadow:0 0 22px rgba(0,229,255,.12);
}
.viewport.pricing .object-part::after{
  content:attr(data-price);
  position:absolute;
  right:8px;
  top:8px;
  color:#001018;
  background:var(--gold);
  border-radius:999px;
  padding:4px 7px;
  font-size:.62rem;
  font-weight:900;
}
.viewport.nexus .object-part{
  background:linear-gradient(145deg,rgba(0,229,255,.28),rgba(91,141,239,.14));
  border-color:rgba(0,229,255,.58);
}
.cards-row{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin-top:14px;
}
.info-card{
  border:1px solid var(--line);
  background:rgba(9,13,26,.78);
  border-radius:12px;
  padding:15px;
}
.info-card b{display:block;color:var(--cyan);font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;margin-bottom:8px}
.info-card p{margin:0;color:var(--muted);font-size:.82rem;line-height:1.5}
.ai-card{
  border-color:rgba(0,229,255,.28);
  background:linear-gradient(135deg,rgba(0,229,255,.075),rgba(91,141,239,.075));
}
.variant-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
.swatch{
  min-height:64px;
  border:1px solid rgba(237,246,255,.12);
  border-radius:10px;
  background:rgba(237,246,255,.045);
  color:var(--text);
  padding:9px;
  text-align:left;
}
.swatch.active{border-color:rgba(0,229,255,.55);box-shadow:0 0 0 2px rgba(0,229,255,.08)}
.swatch i{
  display:block;
  width:100%;
  height:16px;
  border-radius:999px;
  background:var(--swatch);
  margin-bottom:8px;
}
.swatch b{display:block;font-size:.74rem}
.swatch span{display:block;color:var(--muted);font-size:.66rem;margin-top:2px}
.parts-list{display:grid;gap:9px;margin-bottom:12px}
.part-row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  align-items:center;
  border:1px solid rgba(237,246,255,.1);
  background:rgba(237,246,255,.04);
  border-radius:10px;
  padding:10px;
}
.part-row b{display:block;font-size:.78rem}
.part-row span{display:block;color:var(--muted);font-size:.66rem;margin-top:3px}
.pipeline-list{display:grid;gap:9px}
.pipeline-step{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:10px;
  align-items:start;
  border:1px solid rgba(237,246,255,.1);
  background:rgba(237,246,255,.04);
  border-radius:10px;
  padding:10px;
}
.pipeline-step i{
  width:26px;
  height:26px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:rgba(0,229,255,.12);
  color:var(--cyan);
  font-style:normal;
  font-weight:900;
  font-size:.72rem;
}
.pipeline-step b{display:block;font-size:.76rem;color:var(--text)}
.pipeline-step span{display:block;color:var(--muted);font-size:.66rem;line-height:1.45;margin-top:3px}
.algo-report{
  display:grid;
  gap:9px;
}
.algo-main{
  border:1px solid rgba(74,222,128,.24);
  background:rgba(74,222,128,.07);
  border-radius:10px;
  padding:11px;
}
.algo-main b{
  display:block;
  color:#b8ffd0;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.1em;
}
.algo-main span{
  display:block;
  color:var(--muted);
  font-size:.68rem;
  line-height:1.45;
  margin-top:5px;
}
.algo-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.algo-stat{
  border:1px solid rgba(237,246,255,.1);
  background:rgba(237,246,255,.04);
  border-radius:10px;
  padding:9px;
}
.algo-stat span{
  display:block;
  color:var(--muted);
  font-size:.62rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:900;
  margin-bottom:4px;
}
.algo-stat b{
  color:#9ec8ff;
  font-size:.82rem;
}
.toggle{
  width:42px;
  height:24px;
  border:1px solid rgba(237,246,255,.16);
  border-radius:999px;
  background:rgba(237,246,255,.08);
  padding:2px;
}
.toggle::before{
  content:"";
  display:block;
  width:18px;
  height:18px;
  border-radius:50%;
  background:rgba(237,246,255,.72);
  transition:.18s ease;
}
.toggle.active{background:rgba(0,229,255,.22);border-color:rgba(0,229,255,.55)}
.toggle.active::before{transform:translateX(17px);background:var(--cyan)}
.quote-line,.quote-total{
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:10px 0;
  border-bottom:1px solid rgba(237,246,255,.08);
  color:var(--muted);
  font-size:.82rem;
}
.quote-line strong{color:#9ec8ff}
.quote-total{
  margin:7px 0 14px;
  border:0;
  color:var(--text);
}
.quote-total strong{color:var(--green);font-size:1.28rem}
dialog{
  width:min(720px,calc(100vw - 32px));
  border:1px solid rgba(0,229,255,.25);
  border-radius:16px;
  background:#090d1a;
  color:var(--text);
  padding:0;
  box-shadow:0 30px 100px rgba(0,0,0,.6);
}
dialog::backdrop{background:rgba(0,0,0,.64);backdrop-filter:blur(5px)}
.modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  padding:16px 18px;
}
.icon-btn{
  width:32px;
  height:32px;
  border:1px solid rgba(237,246,255,.14);
  border-radius:8px;
  background:rgba(237,246,255,.05);
  color:var(--text);
  font-size:1.2rem;
}
pre{
  margin:0;
  padding:18px;
  white-space:pre-wrap;
  color:var(--muted);
  font-family:"JetBrains Mono",Consolas,monospace;
  font-size:.82rem;
  line-height:1.55;
}
@media(max-width:1100px){
  .workspace{grid-template-columns:280px 1fr}
  .right-panel{grid-column:1 / -1;border-left:0;border-top:1px solid var(--line)}
  .cards-row{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .app-shell{height:auto;min-height:100%}
  .topbar{align-items:flex-start;flex-direction:column;height:auto;padding:14px}
  .top-actions{width:100%;flex-wrap:wrap}
  .workspace{display:block}
  .panel{max-height:none}
  .stage{min-height:640px}
  .variant-grid,.measure-grid{grid-template-columns:1fr}
  .cards-row{grid-template-columns:1fr}
}