:root{
  --bg:#0f1110;--panel:#121512;--card:#171a17;--line:#2a2f2a;--text:#eef1ed;
  --muted:#818a82;--accent:#d6bc83;--accent2:#f0dfba;--input:#262b26;
  --panel-w:340px;
}
*{box-sizing:border-box}
html,body{
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  overflow:hidden;
  background:var(--bg);
  font-family:Inter,Arial,sans-serif;
  color:var(--text)
}
button,input,textarea{font:inherit}
button{cursor:pointer;color:inherit}

/*
  Clean fixed-pane shell:
  panel and viewport are independently attached to the browser viewport.
  Neither element can alter the size or position of the other.
*/
#app{
  position:static;
  width:0;
  height:0;
}

#panel{
  position:fixed;
  z-index:10;
  left:0;
  top:0;
  bottom:0;
  width:var(--panel-w);
  min-width:0;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  padding:16px;
  background:linear-gradient(180deg,#111411,#0e100f);
  border-right:1px solid #252925;
}

#viewport{
  position:fixed;
  z-index:1;
  left:var(--panel-w);
  right:0;
  top:0;
  bottom:0;
  min-width:0;
  min-height:0;
  overflow:hidden;
  background:#aebfc4;
}

#viewport canvas{
  position:absolute;
  inset:0;
  width:100%!important;
  height:100%!important;
  display:block;
}
.brand{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.brand span,.modal-head span{font-size:8px;letter-spacing:.17em;font-weight:800;color:#a58d64}
.brand h1{font-size:17px;line-height:1.1;margin:4px 0 0}
.live{font-size:9px;color:#aab1aa;border:1px solid #2f352f;padding:6px 8px;border-radius:999px;font-weight:650}
.live i,.product-pill i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#89aa75;margin-right:5px}
.intro{font-size:9px;line-height:1.5;color:#767f77;margin:9px 0 14px}
.card,.summary,.price-card{border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.018);padding:13px;margin:0 0 10px}
.card-head,.subhead,.price-head,.screen-head,.switch-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.card-head h2{font-size:10px;letter-spacing:.08em;text-transform:uppercase;margin:0}
.card-head em,.subhead b{font-size:8px;color:#9da59d;font-style:normal;font-weight:650}
.range-row{display:block;margin-top:11px}
.range-row>span{display:flex;justify-content:space-between;font-size:9px;color:#8f978f;margin-bottom:6px}
.range-row b{color:#e6eae5}
input[type=range]{width:100%;height:4px;accent-color:var(--accent)}
.segmented{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:5px;margin-top:10px}
.segmented button,.actions button,.presentation button,.viewport-top button,.modal-actions button{
  border:1px solid #343a34;background:#1d211d;border-radius:8px;padding:8px 9px;font-size:9px;font-weight:650
}
.segmented button.active,.viewport-top button.active{background:#eee9df;color:#131513;border-color:#eee9df}
.finish-block+.finish-block{margin-top:16px;padding-top:14px;border-top:1px solid #242924}
.subhead span{font-size:9px;color:#8d958e}
.swatches{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;margin-top:8px}
.swatch{border:1px solid #303630;background:#1a1e1a;border-radius:8px;padding:6px 3px;min-width:0}
.swatch.active{border-color:#bca16d;box-shadow:inset 0 0 0 1px rgba(188,161,109,.25)}
.swatch i{display:block;width:18px;height:18px;border-radius:50%;background:var(--c);border:1px solid rgba(255,255,255,.17);margin:0 auto 4px}
.swatch span{display:block;font-size:7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.color-row,.file-row,.check-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:9px;font-size:8px;color:#7f887f}
.color-row input{width:34px;height:24px;border:0;background:transparent}
.hint{font-size:8px;line-height:1.5;color:#6f786f;margin:7px 0 10px}
.screen-rows{display:grid;gap:6px}
.screen-row{border:1px solid #2a302a;border-radius:9px;padding:9px;background:#141714}
.screen-row.disabled{opacity:.45}
.screen-head label{display:flex;align-items:center;gap:6px;font-size:9px}
.screen-head b{font-size:8px;color:#ccd1cc}
.top-gap{margin-top:13px;padding-top:11px;border-top:1px solid #242924}
.screen-swatches{grid-template-columns:repeat(4,minmax(0,1fr))}
.switch-row{padding:12px 0 8px;margin-top:10px;border-top:1px solid #252a25}
.switch-row>div b{display:block;font-size:9px}
.switch-row>div span{display:block;font-size:7px;color:#707870;margin-top:3px}
.switch input{position:absolute;opacity:0}
.switch>span{display:block;position:relative;width:40px;height:22px;border-radius:999px;background:#292e29;border:1px solid #414841}
.switch i{position:absolute;left:3px;top:3px;width:14px;height:14px;border-radius:50%;background:#a7ada7;transition:.18s}
.switch input:checked+span{background:#5b4d32;border-color:#9e8456}
.switch input:checked+span i{transform:translateX(18px);background:#ffe0a5;box-shadow:0 0 10px rgba(255,207,119,.45)}
.led-controls.disabled{opacity:.35;pointer-events:none}
.summary-grid,.price-lines{display:grid;gap:7px;margin-top:10px}
.summary-grid>div,.price-lines>div{display:flex;justify-content:space-between;gap:12px;font-size:8px}
.summary-grid span,.price-lines span{color:#717a72}
.summary-grid b,.price-lines b{color:#d8ddd8;text-align:right}
.price-card{background:linear-gradient(135deg,rgba(214,188,131,.08),rgba(255,255,255,.015));border-color:#4b422f}
.price-head span{display:block;font-size:7px;letter-spacing:.16em;color:#a18a61;font-weight:800}
.price-head strong{display:block;font-size:24px;margin-top:4px;color:#f2e7d0}
.price-head em{font-size:8px;color:#8b948c;font-style:normal}
.price-card p{font-size:7px;line-height:1.5;color:#697169;margin:10px 0 0}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.actions .primary,.modal-actions .primary{background:#e8dfcd;color:#151715;border-color:#e8dfcd}
.actions .text{grid-column:1/-1;background:transparent;border-color:transparent;color:#747d74}
.presentation{margin:12px 0;border-top:1px solid #242924;padding-top:10px}
.presentation summary{font-size:8px;color:#7d867e;cursor:pointer}
.presentation>div{padding-top:8px}
.status{font-size:8px;color:#768077;margin:10px 0 3px}
.viewport-top{position:absolute;z-index:5;left:14px;right:14px;top:14px;display:flex;justify-content:space-between;gap:10px;pointer-events:none}
.viewport-top>*{pointer-events:auto}
.product-pill{font-size:8px;background:rgba(15,17,16,.78);padding:7px 9px;border:1px solid rgba(255,255,255,.1);border-radius:999px}
.viewport-top>div{display:flex;gap:5px}
.viewport-top button{padding:7px 8px;background:rgba(17,19,18,.78)}
.orbit-help{position:absolute;left:14px;bottom:14px;z-index:5;font-size:7px;color:#8c958d;background:rgba(15,17,16,.75);border:1px solid rgba(255,255,255,.08);padding:7px 9px;border-radius:999px}
.modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:rgba(0,0,0,.65);padding:20px}
.modal[hidden]{display:none}
.modal-card{width:min(620px,100%);max-height:88vh;overflow:auto;background:#151815;border:1px solid #353b35;border-radius:14px;padding:18px}
.modal-head h2{margin:4px 0 0;font-size:18px}
.modal-head button{border:0;background:transparent;font-size:22px}
.modal-card>p{font-size:9px;color:#7b847c}
.quote-preview{border:1px solid #2c322c;border-radius:10px;padding:10px;margin:10px 0;font-size:8px}
.quote-preview>div{display:flex;justify-content:space-between;gap:12px;padding:4px 0}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.form-grid label,.message{display:grid;gap:5px;font-size:8px;color:#8a938b}
.form-grid input,.message textarea{border:1px solid #343a34;background:#0f120f;color:#e8ece8;border-radius:7px;padding:9px}
.message{margin-top:9px}
.modal-actions{display:flex;justify-content:flex-end;gap:7px;margin-top:12px}
.toast{position:fixed;left:50%;bottom:20px;z-index:80;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#ece7dd;color:#151715;padding:9px 12px;border-radius:999px;font-size:8px;transition:.2s}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:900px) and (min-width:721px){
  :root{--panel-w:310px}
}
@media(max-width:720px){
  :root{--panel-w:100vw}

  #viewport{
    left:0;
    right:0;
    top:0;
    bottom:47dvh;
  }

  #panel{
    left:0;
    right:0;
    top:53dvh;
    bottom:0;
    width:auto;
    padding:12px;
    border-right:0;
    border-top:1px solid #252925;
  }

  .viewport-top{left:8px;right:8px;top:8px}
  .viewport-top button{font-size:7px}
}

.runtime-debug{
  position:fixed;
  z-index:9999;
  right:8px;
  bottom:8px;
  width:280px;
  padding:9px 10px;
  border:1px solid #d6bc83;
  border-radius:8px;
  background:rgba(0,0,0,.88);
  color:#fff0cf;
  font:11px/1.45 Consolas,monospace;
  white-space:pre-wrap;
  pointer-events:none;
}


/* Clean Core v4 — sales polish */
.config-reference,
.quote-reference{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:9px;
  padding:8px 9px;
  border:1px solid rgba(214,188,131,.16);
  border-radius:8px;
  background:rgba(214,188,131,.035);
}
.config-reference span,
.quote-reference span{
  color:#777f78;
  font-size:7px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.config-reference b,
.quote-reference b{
  color:#d8c69f;
  font:700 9px/1 Consolas,monospace;
  letter-spacing:.08em;
}

.detailed-price-lines{
  gap:0;
}
.price-line{
  padding:9px 0;
  border-bottom:1px solid rgba(255,255,255,.055);
}
.price-line:last-child{
  border-bottom:0;
}
.price-line>span{
  display:grid;
  gap:3px;
}
.price-line>span>b{
  color:#cbd0cb;
  font-size:8px;
  font-weight:650;
}
.price-line small{
  color:#697169;
  font-size:7px;
  line-height:1.35;
}
.price-line>strong{
  color:#e8ece8;
  font-size:9px;
  font-weight:700;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.price-total-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:8px;
  padding-top:10px;
  border-top:1px solid rgba(214,188,131,.22);
}
.price-total-row span{
  color:#a39578;
  font-size:8px;
  font-weight:650;
}
.price-total-row b{
  color:#f3e5c7;
  font-size:13px;
  font-variant-numeric:tabular-nums;
}

.included-card{
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(255,255,255,.018);
  padding:13px;
  margin:0 0 10px;
}
.package-chips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:10px;
}
.package-chip{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:6px 7px;
  border:1px solid #303630;
  border-radius:999px;
  background:#171b17;
  color:#9da69e;
  font-size:7px;
  line-height:1;
}
.package-chip::before{
  content:'✓';
  color:#d6bc83;
  font-weight:800;
}
.package-chip.muted::before{
  content:'–';
  color:#626b63;
}
.package-chip.muted{
  color:#626b63;
}

.sales-actions .quote-cta{
  grid-column:1/-1;
  padding:10px 11px;
  font-size:10px;
}
.sales-actions{
  margin-bottom:3px;
}

.quote-reference{
  margin:12px 0 9px;
}
.quote-preview{
  display:grid;
  gap:0;
}
.quote-preview>div{
  padding:6px 0;
  border-bottom:1px solid rgba(255,255,255,.055);
}
.quote-preview>div:last-child{
  border-bottom:0;
}
.quote-preview .quote-total{
  margin-top:5px;
  padding-top:10px;
  border-top:1px solid rgba(214,188,131,.22);
}
.quote-preview .quote-total span,
.quote-preview .quote-total b{
  color:#ead9b5;
  font-weight:750;
}
.wide-field{
  grid-column:1/-1;
}
.quote-note{
  display:grid;
  gap:4px;
  margin-top:11px;
  padding:10px;
  border:1px solid rgba(214,188,131,.15);
  border-radius:9px;
  background:rgba(214,188,131,.035);
}
.quote-note b{
  color:#bda878;
  font-size:8px;
}
.quote-note span{
  color:#747d75;
  font-size:8px;
  line-height:1.45;
}

@media(max-width:720px){
  #viewport{
    bottom:52dvh;
  }

  #panel{
    top:48dvh;
  }

  .card,.summary,.price-card,.included-card{
    border-radius:10px;
  }

  .actions{
    grid-template-columns:1fr 1fr;
  }

  .modal{
    padding:8px;
    align-items:end;
  }

  .modal-card{
    width:100%;
    max-height:92dvh;
    border-radius:14px 14px 0 0;
    padding:15px;
  }

  .form-grid{
    grid-template-columns:1fr;
  }

  .wide-field{
    grid-column:auto;
  }

  .modal-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
  }

  .modal-actions .primary{
    grid-column:1/-1;
  }
}


/* Clean Core v5 — public finalization */
.boot-overlay{
  position:fixed;
  inset:0;
  z-index:10000;
  display:grid;
  place-items:center;
  padding:20px;
  background:
    radial-gradient(circle at 50% 35%,rgba(214,188,131,.08),transparent 34%),
    #0d0f0e;
  opacity:1;
  visibility:visible;
  transition:opacity .32s ease,visibility .32s ease;
}
.boot-overlay.done{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.boot-overlay.error .boot-progress,
.boot-overlay.error #bootPercent{
  display:none;
}
.boot-card{
  width:min(360px,100%);
  text-align:center;
}
.boot-brand{
  display:block;
  color:#b79c6a;
  font-size:9px;
  font-weight:800;
  letter-spacing:.2em;
}
.boot-card h1{
  margin:7px 0 6px;
  font-size:22px;
  letter-spacing:-.025em;
}
.boot-card p{
  min-height:20px;
  margin:0 0 14px;
  color:#7f8880;
  font-size:9px;
  line-height:1.5;
}
.boot-progress{
  height:3px;
  overflow:hidden;
  border-radius:999px;
  background:#242824;
}
.boot-progress i{
  display:block;
  width:0%;
  height:100%;
  border-radius:inherit;
  background:#d6bc83;
  transition:width .14s ease;
}
#bootPercent{
  display:block;
  margin-top:8px;
  color:#8f988f;
  font-size:8px;
  font-variant-numeric:tabular-nums;
}
#bootRetry{
  margin-top:10px;
  border:1px solid #3a413a;
  border-radius:8px;
  padding:9px 16px;
  background:#e8dfcd;
  color:#151715;
  font-size:9px;
  font-weight:700;
}

.quote-submit-status{
  margin-top:11px;
  padding:9px 10px;
  border:1px solid #343a34;
  border-radius:8px;
  background:#101310;
  color:#8e978f;
  font-size:8px;
  line-height:1.5;
}
.quote-submit-status.success{
  border-color:rgba(125,170,105,.36);
  color:#a9c79a;
}
.quote-submit-status.error{
  border-color:rgba(190,113,98,.4);
  color:#d2a094;
}
.modal-actions button.busy{
  opacity:.65;
  pointer-events:none;
}

#viewport{
  touch-action:none;
  overscroll-behavior:none;
}
#panel{
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
}
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible{
  outline:2px solid rgba(214,188,131,.72);
  outline-offset:2px;
}

.presentation[hidden]{
  display:none !important;
}

@media(max-width:720px){
  .viewport-top{
    flex-wrap:wrap;
    gap:6px;
  }
  .product-pill{
    max-width:48%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .viewport-top>div{
    max-width:100%;
    flex-wrap:wrap;
    justify-content:flex-end;
  }
  .viewport-top button{
    min-height:30px;
  }
  .orbit-help{
    max-width:calc(100% - 28px);
    white-space:normal;
  }
}