:root{--ink:#20252b;--muted:#75808b;--line:#e4e8ec;--bg:#f4f6f8;--card:#fff;--purple:#7448d8;--purple-dark:#5d36bd;--purple-pale:#f0ebff;--green:#188a64;--shadow:0 10px 35px rgba(30,40,55,.06)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.45 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button,input,select,textarea{font:inherit}button{cursor:pointer}.topbar{height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}.brand{display:flex;gap:12px;align-items:center;text-decoration:none;color:inherit}.brand-icon{width:42px;height:42px;border-radius:13px;background:linear-gradient(145deg,#8b65ed,#6235c3);display:grid;place-items:center;color:#fff;font-weight:850;letter-spacing:-1px;box-shadow:0 5px 12px #7448d833}.brand b{display:block;font-size:16px;letter-spacing:-.3px}.brand small{display:block;color:var(--muted);font-size:11px;margin-top:2px}.top-actions,.stage-actions,.view-controls{display:flex;align-items:center;gap:9px}.live-dot{font-size:11px;color:var(--green);font-weight:700;margin-right:10px}.live-dot:before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#21ae7b;margin-right:7px}.btn{border:1px solid transparent;border-radius:9px;padding:10px 14px;font-weight:700;font-size:12px;transition:.18s ease;white-space:nowrap}.btn:hover{transform:translateY(-1px)}.btn-primary{background:var(--purple);color:#fff;box-shadow:0 4px 10px #7448d82a}.btn-primary:hover{background:var(--purple-dark)}.btn-ghost{background:#fff;border-color:var(--line);color:#424952}.btn-outline{background:#fff;border-color:#dce1e6;color:#424952}.app-shell{display:grid;grid-template-columns:360px minmax(0,1fr);align-items:start;gap:24px;max-width:1700px;margin:0 auto;padding:24px}.sidebar{background:#fff;border:1px solid var(--line);border-radius:15px;box-shadow:var(--shadow);overflow:hidden}.sidebar-title{display:flex;justify-content:space-between;align-items:center;padding:22px 22px 18px;border-bottom:1px solid var(--line)}.sidebar-title h1{font-size:20px;margin:5px 0 0;letter-spacing:-.6px}.eyebrow{display:block;font-size:9px;letter-spacing:1.5px;color:var(--purple);font-weight:850}.step-count{font-size:10px;font-weight:800;color:#9a8ac8;background:var(--purple-pale);padding:6px 8px;border-radius:6px}.form-section{padding:20px 22px;border-bottom:1px solid var(--line)}.form-section:last-child{border-bottom:0}.section-title{display:flex;gap:11px;align-items:flex-start;margin-bottom:17px}.section-number{display:grid;place-items:center;width:29px;height:29px;flex:0 0 29px;background:#f0ebff;color:var(--purple);font-weight:850;border-radius:9px;font-size:11px}.section-title h2{margin:0;font-size:14px;letter-spacing:-.2px}.section-title p{margin:3px 0 0;color:var(--muted);font-size:11px}.sidebar label{display:block;font-size:11px;font-weight:750;color:#4e5760;margin:0 0 12px;min-width:0}.sidebar input,.sidebar select,.sidebar textarea,.modal input{width:100%;margin-top:6px;min-width:0;border:1px solid #dfe4e8;background:#fbfcfd;border-radius:8px;padding:10px 10px;color:#293039;outline:none;font-size:12px;transition:border .15s,box-shadow .15s}.sidebar input:focus,.sidebar select:focus,.sidebar textarea:focus,.modal input:focus{border-color:#a48be9;box-shadow:0 0 0 3px #7448d812;background:#fff}.sidebar textarea{resize:vertical}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:0 11px}.field-unit{float:right;font-size:10px;color:#8a929b;font-weight:600}.help{display:block;color:#858e98;font-weight:450;font-size:10px;line-height:1.5;margin-top:6px}.color-row{display:flex;gap:7px;align-items:center}.color-row select{flex:1}.color-row input[type=color]{width:42px;height:38px;padding:3px;cursor:pointer}.mini-note{display:flex;gap:9px;align-items:flex-start;background:#f8f6ff;border:1px solid #eee8ff;border-radius:9px;padding:11px;margin-bottom:14px}.mini-note span{color:var(--purple);font-weight:900}.mini-note p{font-size:10px;color:#6e687d;margin:0;line-height:1.6}.full-width{width:100%}.main-stage{min-width:0}.stage-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:4px 0 18px}.stage-heading h2{font-size:24px;letter-spacing:-.9px;margin:5px 0 4px}.stage-heading p{color:var(--muted);font-size:12px;margin:0}.hero-preview{background:#fff;border:1px solid var(--line);border-radius:15px;overflow:hidden;box-shadow:var(--shadow)}.preview-top{height:59px;padding:0 19px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #edf0f2}.preview-kicker{display:inline-block;font-size:9px;letter-spacing:1.1px;color:#8b929b;margin-right:10px;font-weight:800}.preview-top b{font-size:12px}.view-controls{background:#f4f5f7;padding:4px;border-radius:9px;gap:2px}.view-btn{border:0;background:transparent;color:#727b85;padding:6px 11px;border-radius:6px;font-size:10px;font-weight:800}.view-btn.active{background:#fff;color:var(--purple);box-shadow:0 1px 4px #0000000c}.three-area{height:440px;position:relative;background:radial-gradient(ellipse at 50% 42%,#fff 0,#f7f8fa 60%,#eef1f4 100%);overflow:hidden}.three-area canvas{display:block;width:100%;height:100%;outline:none}.three-fallback{height:100%;display:grid;place-items:center;color:#7b8490;text-align:center;padding:20px;font-size:12px}.preview-bottom{height:38px;padding:0 18px;display:flex;align-items:center;gap:17px;border-top:1px solid #edf0f2;color:#818a94;font-size:10px}.drag-icon{font-size:15px;font-style:normal;color:var(--purple);margin-right:5px}.model-status{margin-left:auto;color:var(--green);font-weight:700}.metrics-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:14px 0}.metric-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:15px 16px;min-width:0}.metric-card span,.metric-card small{display:block;color:var(--muted);font-size:10px}.metric-card b{display:block;font-size:18px;letter-spacing:-.5px;margin:5px 0 3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.metric-card small{font-size:9px}.drawing-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.white-card{background:#fff;border:1px solid var(--line);border-radius:13px;padding:17px;min-width:0;box-shadow:var(--shadow)}.card-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}.card-heading h3{font-size:14px;margin:4px 0 0}.drawing-chip{background:#f4f0ff;color:var(--purple);font-size:9px;font-weight:850;padding:5px 8px;border-radius:6px}.drawing-area{margin-top:12px;min-height:220px}.drawing-area svg{width:100%;height:auto;display:block}.summary-card{margin-top:14px}.summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 25px;margin-top:14px}.summary-item{padding:11px 0;border-bottom:1px solid #edf0f2;min-width:0}.summary-item span{display:block;font-size:10px;color:var(--muted);margin-bottom:4px}.summary-item strong{display:block;font-size:12px;overflow-wrap:anywhere}.summary-notes{grid-column:1/-1;padding:13px 0 0;color:#626b75;font-size:11px;line-height:1.8;overflow-wrap:anywhere}.status-bar{display:flex;align-items:center;gap:8px;margin:14px 2px 0;color:#7e8791;font-size:10px}.status-dot{width:7px;height:7px;border-radius:50%;background:#27a879}.status-right{margin-left:auto}.modal-backdrop{position:fixed;inset:0;background:#171a22a6;z-index:30;display:grid;place-items:center;padding:20px}.modal-backdrop[hidden]{display:none}.modal{width:min(680px,100%);max-height:85vh;overflow:auto;background:#fff;border-radius:16px;padding:22px;box-shadow:0 25px 90px #0003}.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.modal-head h2{font-size:21px;margin:4px 0}.icon-btn{width:36px;height:36px;border:1px solid var(--line);border-radius:9px;background:#fff;font-size:25px;color:#7a838c}.saved-list{margin-top:14px;display:grid;gap:8px}.saved-row{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--line);padding:12px;border-radius:10px}.saved-row strong,.saved-row small{display:block}.saved-row strong{font-size:12px}.saved-row small{font-size:10px;color:var(--muted);margin-top:4px}.muted{color:var(--muted)}
@media(max-width:1150px){.app-shell{grid-template-columns:320px minmax(0,1fr);gap:16px;padding:16px}.form-section{padding:17px}.three-area{height:390px}.metrics-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:850px){.topbar{padding:0 15px;height:65px}.live-dot{display:none}.app-shell{display:flex;flex-direction:column;padding:12px;gap:15px}.sidebar,.main-stage{width:100%}.sidebar{order:2}.main-stage{order:1}.stage-heading{align-items:flex-start}.stage-heading h2{font-size:21px}.three-area{height:360px}.drawing-grid{grid-template-columns:1fr 1fr}.summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:560px){.topbar{padding:0 10px}.brand-icon{width:36px;height:36px}.brand b{font-size:13px}.brand small{font-size:9px}.top-actions{gap:5px}.top-actions .btn{padding:9px 8px;font-size:10px}.app-shell{padding:9px}.stage-heading{display:block}.stage-actions{margin-top:12px}.stage-heading h2{font-size:20px}.preview-top{padding:0 10px}.preview-kicker{display:none}.preview-top b{font-size:11px}.view-btn{padding:6px 8px}.three-area{height:300px}.preview-bottom{padding:0 10px;gap:9px;font-size:9px}.metrics-grid{gap:8px}.metric-card{padding:12px}.metric-card b{font-size:16px}.drawing-grid{grid-template-columns:1fr}.white-card{padding:13px}.drawing-area{min-height:150px}.summary-grid{grid-template-columns:1fr 1fr;gap:0 13px}.sidebar-title{padding:18px}.form-section{padding:16px 18px}.two-col{gap:0 9px}.saved-row{align-items:flex-start}.saved-row .btn{padding:8px}.status-right{display:none}}
@media print{body{background:#fff}.topbar,.sidebar,.stage-actions,.view-controls,.preview-bottom,.status-bar,.modal-backdrop{display:none!important}.app-shell{display:block;padding:0}.stage-heading{margin:0 0 10px}.hero-preview,.white-card,.metric-card{box-shadow:none;break-inside:avoid}.three-area{height:320px}.metrics-grid{grid-template-columns:repeat(4,1fr)}.drawing-grid{grid-template-columns:1fr 1fr}.summary-grid{grid-template-columns:repeat(3,1fr)}.main-stage{width:100%}}

/* Responsive refinements — presentation only; configurator logic is unchanged. */
@media (min-width:851px) and (max-width:1180px){
  .app-shell{grid-template-columns:minmax(285px,320px) minmax(0,1fr);gap:16px;padding:16px}
  .form-section{padding:16px}
  .sidebar-title{padding:18px 16px}
  .stage-heading h2{font-size:21px}
  .stage-heading{align-items:flex-start}
  .three-area{height:clamp(320px,43vw,440px)}
  .preview-top{padding:0 12px}
  .view-btn{padding:7px 9px}
  .metrics-grid{gap:8px}
  .metric-card{padding:12px}
  .metric-card b{font-size:16px}
}
@media (max-width:850px){
  html,body{max-width:100%;overflow-x:hidden}
  .topbar{position:sticky;padding:10px 14px;height:auto;min-height:64px;gap:10px;flex-wrap:wrap}
  .brand{min-width:0;flex:1 1 210px}
  .top-actions{flex:1 1 100%;justify-content:flex-end;gap:8px}
  .live-dot{display:inline-block;margin-right:auto}
  .app-shell{width:100%;padding:12px;gap:14px}
  .main-stage,.sidebar{width:100%;min-width:0}
  .stage-heading{gap:12px}
  .stage-heading>div:first-child{min-width:0}
  .stage-heading h2{font-size:clamp(19px,3.4vw,23px);line-height:1.2}
  .stage-heading p{max-width:62ch}
  .stage-actions{flex-wrap:wrap}
  .three-area{height:clamp(300px,52vw,430px);min-height:280px}
  .drawing-area{min-height:0}
  .drawing-area svg{max-height:300px}
  .sidebar{order:2}
  .main-stage{order:1}
  .form-section,.sidebar-title{padding-left:clamp(14px,3vw,22px);padding-right:clamp(14px,3vw,22px)}
}
@media (min-width:561px) and (max-width:850px){
  .app-shell{padding:16px}
  .topbar{padding:10px 18px}
  .top-actions{flex:0 1 auto}
  .stage-heading{display:flex}
  .three-area{height:clamp(360px,55vw,470px)}
  .drawing-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .summary-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .form-section{padding:20px}
}
@media (max-width:560px){
  .topbar{padding:10px;gap:9px}
  .brand{flex:1 1 100%;gap:9px}
  .brand-icon{width:34px;height:34px;border-radius:10px}
  .brand b{font-size:14px}
  .brand small{font-size:10px}
  .top-actions{width:100%;flex-wrap:wrap;justify-content:stretch;gap:7px}
  .top-actions .live-dot{flex:1 0 100%;font-size:10px;margin:0}
  .top-actions .btn{flex:1 1 auto;padding:10px 8px;font-size:11px}
  .app-shell{padding:8px;gap:12px}
  .stage-heading{display:block;margin:2px 0 12px}
  .stage-heading h2{font-size:20px;margin-top:6px}
  .stage-heading p{font-size:11px;line-height:1.55}
  .stage-actions{display:grid;grid-template-columns:1fr 1fr;margin-top:11px;gap:7px}
  .stage-actions .btn{width:100%;padding:10px 7px;font-size:11px}
  .hero-preview{border-radius:12px}
  .preview-top{height:auto;min-height:54px;padding:8px;gap:7px;align-items:center}
  .preview-top>div:first-child{min-width:0;flex:1}
  .preview-top b{font-size:10px;display:inline-block;overflow-wrap:anywhere}
  .view-controls{flex-shrink:0;max-width:58%;overflow-x:auto;white-space:nowrap}
  .view-btn{padding:7px 8px;font-size:10px}
  .three-area{height:300px;min-height:260px}
  .preview-bottom{min-height:36px;height:auto;padding:8px;gap:8px;flex-wrap:wrap;font-size:9px}
  .model-status{flex:1 0 100%;text-align:right;margin-left:0}
  .metrics-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:10px 0}
  .metric-card{padding:11px 10px;border-radius:10px}
  .metric-card span{font-size:10px}
  .metric-card b{font-size:15px;margin:4px 0}
  .metric-card small{font-size:9px;line-height:1.4}
  .drawing-grid{grid-template-columns:minmax(0,1fr);gap:10px}
  .white-card{padding:12px;border-radius:11px}
  .drawing-area{margin-top:8px;min-height:0}
  .drawing-area svg{width:100%;max-height:none}
  .summary-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px}
  .summary-item{padding:10px 0}
  .summary-item span{font-size:10px}
  .summary-item strong{font-size:11px}
  .summary-notes{font-size:10px;line-height:1.65}
  .sidebar{border-radius:12px}
  .sidebar-title{padding:16px}
  .sidebar-title h1{font-size:18px}
  .form-section{padding:15px 14px}
  .section-title{gap:9px;margin-bottom:14px}
  .section-title h2{font-size:13px}
  .section-title p{font-size:10px}
  .two-col{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 9px}
  .sidebar label{font-size:10px}
  .sidebar input,.sidebar select,.sidebar textarea{font-size:12px;padding:10px 8px}
  .color-row{gap:5px}
  .color-row input[type=color]{width:36px;flex:0 0 36px}
  .status-bar{flex-wrap:wrap;line-height:1.5}
  .status-right{display:none}
  .modal-backdrop{padding:10px;align-items:center}
  .modal{padding:16px;border-radius:13px;max-height:90dvh;width:100%}
  .modal-head h2{font-size:18px}
  .saved-row{flex-wrap:wrap}
}
@media (max-width:360px){
  .three-area{height:250px;min-height:230px}
  .preview-top{align-items:flex-start;flex-direction:column}
  .view-controls{max-width:100%;width:100%;justify-content:space-between}
  .view-btn{flex:1}
  .two-col{grid-template-columns:minmax(0,1fr)}
  .summary-grid{grid-template-columns:minmax(0,1fr)}
  .top-actions .btn{font-size:10px}
}
@media (orientation:landscape) and (max-height:520px) and (max-width:950px){
  .topbar{position:relative}
  .three-area{height:68vh;min-height:230px;max-height:390px}
  .modal{max-height:92dvh}
}