*{box-sizing:border-box}body{margin:0;font-family:Arial;background:#111;color:#eee;overflow:hidden}header{height:58px;padding:9px 14px;display:flex;gap:12px;align-items:center;background:#191919;border-bottom:1px solid #555}header span{font-size:11px;color:#aaa}header input{flex:1;padding:9px;background:#222;color:#fff;border:1px solid #555}button{padding:9px;background:#292929;color:#eee;border:1px solid #555;border-radius:5px}button:disabled{opacity:.35}button.active{outline:2px solid #ddd;background:#444}main{display:flex;height:calc(100vh - 94px)}aside{width:205px;padding:10px;overflow:auto;background:#171717}aside button{width:100%;margin-bottom:5px;text-align:left}aside h3{margin:8px 0;font-size:13px}#bgStatus{font-size:10px;color:#aaa;word-break:break-word;padding:4px 2px 8px}section{flex:1;overflow:auto;padding:20px;background:#222}#canvas{position:relative;width:1200px;height:760px;background-color:#f2f0e9;background-image:linear-gradient(#ddd 1px,transparent 1px),linear-gradient(90deg,#ddd 1px,transparent 1px);background-size:40px 40px;color:#777;touch-action:none;overflow:hidden}#background{position:absolute;inset:0;background-repeat:no-repeat;background-position:center;background-size:contain;pointer-events:none;z-index:0}#hint{position:relative;z-index:1;margin:16px;display:inline-block;padding:5px 8px;background:rgba(242,240,233,.85);border-radius:4px}#hint.with-bg{opacity:.55}.obj{z-index:2;position:absolute;padding:9px;min-width:58px;background:white;color:#222;border:2px solid #222;border-radius:7px;text-align:center;font-weight:bold;box-shadow:0 2px 5px #999;touch-action:none;user-select:none}.obj small{display:block;font-size:9px;font-weight:normal}.MF{border-width:4px}.SENSOR{border-radius:50%}.LOAD{border-style:dashed}footer{height:36px;padding:9px 14px;background:#191919;border-top:1px solid #555}@media(max-width:700px){aside{width:145px}aside button{font-size:10px}section{padding:6px}header span{display:none}}
.site-row{display:flex;gap:4px;margin-bottom:4px}.site-row .site-select{flex:1;margin:0;text-align:left}.site-row .site-rename{width:34px;margin:0;text-align:center}.site-row.active .site-select{outline:2px solid #ddd;background:#444}.scope{display:block;font-size:10px;color:#aaa;margin:8px 0}.scope select{width:100%;margin-top:4px;padding:7px;background:#222;color:#fff;border:1px solid #555}.site-footprint{position:absolute;border:3px solid #555;background:rgba(255,255,255,.08);z-index:1;pointer-events:none}.site-footprint.active{border:4px solid #222;background:rgba(255,255,255,.18)}.site-label{position:absolute;z-index:3;width:auto!important;padding:5px 9px;font-size:10px}.obj.inactive{opacity:.45}.site-row+button{margin-top:3px}
#viewport{position:relative;width:100%;height:100%;overflow:hidden;touch-action:none;background:#222;cursor:grab}#viewport:active{cursor:grabbing}#canvas{transform-origin:0 0;will-change:transform}#viewControls{position:absolute;right:16px;bottom:16px;z-index:20;display:flex;align-items:center;gap:5px;padding:6px;background:rgba(20,20,20,.88);border:1px solid #555;border-radius:7px}#viewControls button{width:auto;margin:0;padding:8px 11px}#zoomLabel{min-width:48px;text-align:center;font-size:11px;color:#ddd}section{position:relative;overflow:hidden;padding:0}@media(max-width:700px){#viewControls{right:8px;bottom:8px}#viewControls button{padding:7px 9px;font-size:10px}}
/* v0.1.4 touch-first object editor */
.editor-backdrop{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.68);display:flex;align-items:center;justify-content:center;padding:18px}.editor-backdrop.hidden{display:none}.editor-panel{width:min(720px,100%);max-height:92vh;display:flex;flex-direction:column;background:#181818;border:1px solid #666;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.55);overflow:hidden}.editor-head{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid #444}.editor-head small{color:#999;font-size:10px;letter-spacing:.12em}.editor-head h2{margin:3px 0 0;font-size:20px}.editor-x{width:44px;height:44px;font-size:24px;padding:0;text-align:center}.editor-body{padding:18px;overflow:auto}.editor-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.editor-field{display:flex;flex-direction:column;gap:6px}.editor-field.full{grid-column:1/-1}.editor-field span{font-size:10px;color:#aaa;font-weight:bold;letter-spacing:.05em}.editor-field input,.editor-field select,.editor-field textarea{width:100%;min-height:46px;padding:11px 12px;border:1px solid #555;border-radius:7px;background:#242424;color:#fff;font:inherit}.editor-field textarea{resize:vertical}.editor-actions{display:grid;grid-template-columns:auto 1fr auto auto;gap:8px;padding:14px 18px;border-top:1px solid #444}.editor-actions button{min-height:44px}.editor-actions .primary{background:#eee;color:#111;border-color:#eee;font-weight:bold}.editor-actions .danger{border-color:#8a5555}.obj{cursor:pointer}@media(max-width:700px){.editor-backdrop{padding:0;align-items:flex-end}.editor-panel{max-height:94vh;border-radius:14px 14px 0 0}.editor-grid{grid-template-columns:1fr}.editor-field.full{grid-column:auto}.editor-body{padding:14px}.editor-head,.editor-actions{padding:12px 14px}.editor-actions{grid-template-columns:auto 1fr auto auto}.editor-field input,.editor-field select,.editor-field textarea{min-height:50px}}

/* v0.1.5 site-aware physical location clustering */
.cluster-zone{position:absolute;z-index:1;border:2px dashed rgba(30,30,30,.48);border-radius:18px;background:rgba(255,255,255,.09);pointer-events:none}.cluster-zone.load{border-style:dotted}.cluster-zone:not(.active){opacity:.28}.cluster-label{position:absolute;z-index:4;pointer-events:none;padding:3px 6px;border-radius:4px;background:rgba(20,20,20,.78);color:#fff;font-size:9px;font-weight:bold;letter-spacing:.03em}.cluster-label.load{font-style:italic}
/* v0.1.6 automatic SN/PN recommendation preview */
.recommendation{position:absolute;z-index:5;transform:translate(-50%,-50%);min-width:78px;padding:8px 10px;border:2px dashed #222;border-radius:8px;background:rgba(242,240,233,.94);color:#111;text-align:center;font-size:11px;font-weight:bold;pointer-events:auto;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.18)}.recommendation small{display:block;margin-top:2px;font-size:8px;font-weight:normal}.recommendation.load{border-style:dotted}.recommendation:not(.active){opacity:.38}
/* v0.1.6 automatic SN/PN recommendation preview */
.recommendation{position:absolute;z-index:5;transform:translate(-50%,-50%);min-width:78px;padding:8px 10px;border:2px dashed #222;border-radius:8px;background:rgba(242,240,233,.94);color:#111;text-align:center;font-size:11px;font-weight:bold;pointer-events:auto;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.18)}.recommendation small{display:block;margin-top:2px;font-size:8px;font-weight:normal}.recommendation.load{border-style:dotted}.recommendation:not(.active){opacity:.38}

/* v0.1.7 recommendation approval / override */
.rec-panel{width:min(680px,100%)}.rec-actions{grid-template-columns:auto 1fr auto auto}.rec-info>div{padding:12px;border:1px solid #444;border-radius:7px;background:#222;line-height:1.6;color:#ddd}.recommendation:hover{outline:2px solid #777}.recommendation:active{transform:translate(-50%,-50%) scale(.97)}

/* v0.1.8 structured Control LAN */
#lanStatus{font-size:9px;color:#aaa;line-height:1.35;padding:2px 2px 8px}.lan-layer{position:absolute;left:0;top:0;z-index:2;pointer-events:none;overflow:visible}.lan-line{stroke:#202020;stroke-width:4;stroke-linecap:round;stroke-dasharray:9 6}.lan-line.inactive{opacity:.22}.obj{z-index:4}.obj.lan-selected{outline:4px solid #777;outline-offset:3px}.site-label{z-index:6}.cluster-label{z-index:6}.recommendation{z-index:7}
\n/* v0.1.10 per-node I/O map + cross-site LAN */\n.io-map-list{display:grid;gap:6px;margin-top:6px}.io-row{display:grid;grid-template-columns:90px 1fr;gap:4px 10px;padding:8px 10px;border:1px solid #3d4650;border-radius:8px;background:#171c21}.io-row small{grid-column:2;color:#9ca8b3}.io-row.free{opacity:.65}.lan-line.cross-site{stroke-dasharray:8 5}\n.custom-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:8px 0}.custom-grid label{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px;border:1px solid #39424d;border-radius:7px}.custom-grid input{width:72px}.custom-builder small{display:block;opacity:.7;margin:6px 0}.custom-builder b{display:block;margin-top:8px}
@media(max-width:650px){.custom-grid{grid-template-columns:1fr}}

/* v0.1.12 environment classification */
.env-profile>div{padding:10px 12px;border:1px solid #444;border-radius:8px;background:#202020}.env-profile b{display:block;margin-bottom:5px}.env-profile small{display:block;line-height:1.5;color:#aaa}.env-profile strong{display:block;margin-top:8px;font-size:10px;letter-spacing:.05em}.recommendation small:nth-of-type(2){font-weight:bold}

/* v0.1.13 scale + cable estimate */
.scale-box{display:grid;gap:6px;margin:8px 0}.scale-box label{font-size:11px;color:#9fb0bf}.scale-box input{width:100%;box-sizing:border-box;margin-top:4px;background:#111a22;color:#e9f0f5;border:1px solid #334452;border-radius:6px;padding:8px}.scale-box button{font-size:11px}#scaleStatus,#cableStatus{font-size:11px;color:#93a5b5;line-height:1.35;margin:4px 0 8px}

/* v0.1.15 survey draft / recall / lifecycle */
header #customer{max-width:180px}.status-pill{padding:6px 9px;border:1px solid #555;border-radius:999px;font-size:9px;white-space:nowrap}.status-pill[data-status="READY_FOR_CUSTOMER"]{border-style:dashed}.status-pill[data-status="APPROVED_FINAL"]{background:#eee;color:#111;font-weight:bold}.survey-panel{width:min(760px,100%)}.survey-list{display:grid;gap:8px}.survey-memory-row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:12px;border:1px solid #444;border-radius:8px;background:#202020}.survey-memory-row small{display:block;color:#aaa;margin-top:4px}.survey-memory-row button{min-width:80px}@media(max-width:850px){header #customer{max-width:120px}header{gap:5px}header button{padding:8px 6px;font-size:9px}.status-pill{display:none}}
/* v0.1.17 preliminary BOM / versioned Site Designer Price Book */
.price-grid{display:grid;grid-template-columns:1fr 120px;gap:7px;align-items:center}.price-grid label{font-size:11px}.price-grid input{width:100%}.bom-site{border:1px solid #444;border-radius:8px;padding:10px;margin:8px 0}.bom-site h3{margin:0 0 8px}.bom-table{width:100%;border-collapse:collapse;font-size:11px}.bom-table th,.bom-table td{padding:5px;border-bottom:1px solid #444;text-align:left}.bom-table td:last-child,.bom-table th:last-child{text-align:right}.bom-total{font-size:18px;font-weight:bold;text-align:right;margin-top:10px}.warning{padding:8px;border:1px dashed #777;border-radius:6px;margin:8px 0;font-size:11px}
#userBadge{max-width:170px;overflow:hidden;text-overflow:ellipsis}.owner-tools{display:flex;gap:8px;align-items:center;margin-top:8px}.owner-tools select{min-width:150px}.muted{opacity:.7;font-size:12px}
.queue-badge{display:inline-block;padding:3px 7px;border:1px solid #777;border-radius:999px;margin-left:6px;font-size:11px}.execution-tools{margin-top:8px;padding-top:8px;border-top:1px solid #444}.execution-users{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0}.execution-users label{font-size:12px}.queue-section{margin:10px 0 18px}.queue-section h3{margin:8px 0}


/* v0.1.21 locked SummonTech center-canvas workspace */
:root{--st-bg:#0b1117;--st-panel:#111a22;--st-panel2:#16212b;--st-line:#2d3b47;--st-text:#edf3f7;--st-muted:#8fa0ad;--st-accent:#d77724;--st-ok:#7fae91}
body{background:var(--st-bg);color:var(--st-text)}
header{height:64px;background:#0e151c;border-bottom:1px solid var(--st-line);gap:7px;padding:8px 12px}header b{letter-spacing:.08em}header input{background:#111c25;border-color:#31414e;border-radius:6px;min-width:110px}header button{background:#17232d;border-color:#344653;font-size:10px}header #save{border-color:var(--st-accent);color:#ffd4ad}header #finish{background:var(--st-accent);border-color:var(--st-accent);color:#111;font-weight:800}
main{height:calc(100vh - 144px);display:grid;grid-template-columns:220px minmax(0,1fr) 260px;background:#0b1117}.tool-rail,.inspector{width:auto;background:#101820;border-right:1px solid var(--st-line);padding:11px;overflow:auto}.inspector{border-right:0;border-left:1px solid var(--st-line);background:#0f171e}.tool-rail h3,.inspector h3{font-size:10px;letter-spacing:.12em;color:#aebcc6}.tool-rail button{background:#16212b;border-color:#33424e}.tool-rail #buttons{display:grid;grid-template-columns:1fr 1fr;gap:5px}.tool-rail #buttons button{margin:0;font-size:9px;padding:8px 5px}.tool-rail #design,.tool-rail #lanAuto{border-color:var(--st-accent)}
section{background:#0a1015;position:relative;min-width:0}#viewport{background:#0a1015}#canvas{box-shadow:0 0 0 1px #34424c,0 18px 45px rgba(0,0,0,.35);background-color:#e9e8e1}.obj{border-color:#253541;box-shadow:0 2px 8px rgba(0,0,0,.3)}.MF{border-color:var(--st-accent)}.lan-line{stroke:#c66c25}.site-footprint.active{border-color:#263947}.recommendation{border-color:var(--st-accent)}
.inspector-title{padding:4px 2px 10px}.inspector-title small{color:var(--st-accent);font-size:9px;letter-spacing:.14em}.inspector-title h3{font-size:17px;color:#fff;margin:4px 0}.inspector-body{font-size:11px;line-height:1.55;color:#b7c4cc}.inspect-grid{display:grid;grid-template-columns:90px 1fr;gap:7px;border-top:1px solid #263641;padding-top:9px}.inspect-grid span{color:#82939f}.inspect-grid b{color:#eef3f6;word-break:break-word}.status-stack{display:grid;gap:7px}.status-stack>div{display:flex;justify-content:space-between;padding:9px;border:1px solid #293944;border-radius:6px;background:#131e27;font-size:10px}.status-stack b{color:#d8e3e9}
footer#summary{height:80px;background:#0e151c;border-top:1px solid var(--st-line);padding:8px 12px;display:grid;grid-template-columns:repeat(6,minmax(90px,1fr));gap:7px}.sum-card{border:1px solid #293944;border-radius:7px;background:#131e27;padding:8px 10px;min-width:0}.sum-card small{display:block;color:#7f919e;font-size:8px;letter-spacing:.1em}.sum-card b{display:block;margin-top:4px;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sum-card.accent{border-color:#8a5429}
#viewControls{background:rgba(12,18,23,.94);border-color:#394b58}
@media(max-width:1050px){main{grid-template-columns:190px minmax(0,1fr)}.inspector{position:absolute;right:0;top:64px;bottom:80px;width:250px;z-index:30;box-shadow:-12px 0 30px rgba(0,0,0,.35);transform:translateX(100%)}footer#summary{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){main{grid-template-columns:145px minmax(0,1fr)}footer#summary{height:76px;grid-template-columns:repeat(3,1fr);padding:5px}.sum-card{padding:5px}.sum-card:nth-child(n+4){display:none}}


/* v0.1.22 tablet-first workspace controls */
#tabletDock{position:absolute;left:12px;top:12px;right:12px;z-index:35;display:none;align-items:center;gap:7px;pointer-events:none}
#tabletDock button{pointer-events:auto;min-height:46px;padding:9px 12px;background:rgba(14,21,28,.94);border:1px solid #405360;box-shadow:0 4px 16px rgba(0,0,0,.28);font-size:10px;font-weight:800;letter-spacing:.04em}
#tabletDock .accent{border-color:var(--st-accent);color:#ffd4ad}
body.tablet-tools-closed .tool-rail{transform:translateX(-105%)}
body.tablet-details-open .inspector{transform:translateX(0)}
body.tablet-tools-open .tool-rail{transform:translateX(0)}
body.tablet-tools-open:before,body.tablet-details-open:after{content:"";position:fixed;inset:64px 0 80px 0;background:rgba(0,0,0,.28);z-index:24;pointer-events:none}
body.tablet-canvas-focus footer#summary{transform:translateY(100%)}
.tool-rail,.inspector,footer#summary{transition:transform .18s ease}

@media(max-width:1100px){
  #tabletDock{display:flex}
  main{display:block;position:relative;height:calc(100vh - 144px)}
  #canvasSection{position:absolute;inset:0}
  .tool-rail{position:absolute;left:0;top:0;bottom:0;width:min(290px,82vw);z-index:30;box-shadow:12px 0 30px rgba(0,0,0,.38);transform:translateX(-105%);padding-top:68px}
  .inspector{position:absolute;right:0;top:0;bottom:0;width:min(300px,82vw);z-index:31;box-shadow:-12px 0 30px rgba(0,0,0,.38);transform:translateX(105%);padding-top:68px}
  body.tablet-tools-open .tool-rail{transform:translateX(0)}
  body.tablet-details-open .inspector{transform:translateX(0)}
  #viewControls{bottom:18px}
  footer#summary{position:fixed;left:0;right:0;bottom:0;z-index:26}
}
@media(max-width:760px){
  header{height:58px;padding:6px 8px;overflow-x:auto;white-space:nowrap}
  header b{flex:0 0 auto} header input{flex:0 0 128px;min-width:128px} header #customer{max-width:none}
  header button{flex:0 0 auto;min-height:42px}
  main{height:calc(100vh - 126px)}
  #tabletDock{left:7px;right:7px;top:7px;gap:5px;overflow-x:auto;padding-bottom:3px}
  #tabletDock button{flex:0 0 auto;min-height:48px;padding:9px 10px}
  #canvas{width:1200px;height:760px}
  footer#summary{height:68px;grid-template-columns:repeat(3,minmax(85px,1fr));overflow-x:auto;display:flex;gap:5px;padding:5px 7px}
  .sum-card{flex:0 0 130px;display:block!important}
  .tool-rail,.inspector{top:0;bottom:0;padding-top:64px}
  #viewControls{right:8px;bottom:10px}
}