*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#080d17;--panel:#0d1525;--panel2:#101c30;--border:#1a2a3a;
  --blue:#1e4a80;--blue2:#2060a8;--green:#1a5c28;--green2:#27ae60;
  --red:#8b1a1a;--orange:#c07010;--gold:#d4a017;--teal:#1a6060;
  --text:#c8d8e8;--text2:#7a9ab8;--text3:#4a6a8a;
  --inp:#060c18;--inp-border:#1a3050;--inp-focus:#2060a8;
  --hdr:#0a1828;--row-alt:#0b1422;
}
body{font-family:'Courier New',monospace;background:var(--bg);color:var(--text);font-size:12px;overflow:hidden;height:100vh;display:flex;flex-direction:column}
/* ── HEADER ── */
#hdr{background:var(--hdr);border-bottom:2px solid var(--blue2);padding:6px 12px;display:flex;align-items:center;gap:12px;flex-shrink:0}
#hdr h1{font-size:15px;color:#90c8ff;letter-spacing:1px;white-space:nowrap}
#hdr h1 span{color:var(--gold);font-size:11px;margin-left:6px}
.hdr-spacer{flex:1}
.hdr-grp{display:flex;align-items:center;gap:6px;font-size:11px}
.hdr-lbl{color:var(--text3);white-space:nowrap}
select,input[type=text],input[type=number]{background:var(--inp);border:1px solid var(--inp-border);color:var(--text);padding:3px 6px;border-radius:3px;font-family:inherit;font-size:11px}
select:focus,input:focus{outline:none;border-color:var(--inp-focus)}
.btn{background:var(--blue);color:#90c8ff;border:1px solid var(--blue2);padding:4px 10px;cursor:pointer;border-radius:3px;font-family:inherit;font-size:11px;white-space:nowrap;transition:background .15s}
.btn:hover{background:var(--blue2)}
.btn.grn{background:var(--green);color:#90ff90;border-color:var(--green2)}
.btn.grn:hover{background:var(--green2);color:#fff}
.btn.red{background:#3a0808;color:#ff8080;border-color:#8b1a1a}
.btn.red:hover{background:#8b1a1a;color:#fff}
.btn.gold{background:#3a2808;color:var(--gold);border-color:#c07010}
.btn.gold:hover{background:var(--gold);color:#000}
/* ── TABS ── */
#tabs{display:flex;background:var(--panel);border-bottom:2px solid var(--border);flex-shrink:0}
.tab-btn{padding:8px 18px;cursor:pointer;color:var(--text3);border-right:1px solid var(--border);font-size:12px;letter-spacing:.5px;transition:all .15s;border-bottom:2px solid transparent;margin-bottom:-2px}
.tab-btn:hover{color:var(--text);background:#0a1520}
.tab-btn.on{color:#90c8ff;border-bottom-color:#2060a8;background:#0a1520}
/* ── MAIN AREA ── */
#main{flex:1;overflow:hidden;display:flex;position:relative}
.tab-panel{display:none!important}
.tab-panel.on{display:flex!important;flex-direction:column;width:100%;height:100%;overflow:hidden}
/* ── SURVEY TAB ── */
#survey-top{display:flex;gap:8px;padding:8px;background:var(--panel);border-bottom:1px solid var(--border);flex-shrink:0;flex-wrap:wrap}
.well-info-box{background:var(--panel2);border:1px solid var(--border);border-radius:4px;padding:8px;min-width:220px}
.well-info-box h3{color:var(--gold);font-size:11px;margin-bottom:6px;letter-spacing:.5px}
.fi{display:flex;align-items:center;margin-bottom:4px;gap:4px}
.fi label{color:var(--text2);min-width:90px;font-size:10px}
.fi input,.fi select{width:120px}
.fi .fu{color:var(--text3);font-size:10px;margin-left:2px}
.calc-info-box{background:var(--panel2);border:1px solid var(--border);border-radius:4px;padding:8px;display:flex;flex-direction:column;gap:4px;min-width:200px}
.calc-info-box h3{color:var(--gold);font-size:11px;margin-bottom:4px}
.cir{display:flex;align-items:center;gap:6px;font-size:10px}
.cir label{color:var(--text2);min-width:80px}
.civ{color:#90c8ff;font-weight:700;min-width:70px;text-align:right}
.ci-unit{color:var(--text3)}
.status-box{background:var(--panel2);border:1px solid var(--border);border-radius:4px;padding:8px;min-width:180px}
.status-box h3{color:var(--gold);font-size:11px;margin-bottom:6px}
.sb{display:flex;align-items:center;gap:6px;margin-bottom:3px;font-size:10px}
.sb-dot{width:8px;height:8px;border-radius:50%;background:#888;flex-shrink:0}
.sb-dot.ok{background:#27ae60}
.sb-dot.warn{background:#f39c12}
.sb-dot.err{background:#e74c3c}
/* ── SURVEY TABLE ── */
#survey-table-wrap{flex:1;overflow:auto;padding:6px}
table.sv{border-collapse:collapse;width:100%;min-width:1400px}
table.sv th{background:var(--hdr);color:var(--text2);padding:4px 6px;border:1px solid var(--border);font-size:10px;white-space:nowrap;position:sticky;top:0;z-index:10;text-align:center;letter-spacing:.3px}
table.sv th.grp{background:#080e1a;color:var(--gold);border-bottom:2px solid var(--gold);font-size:9px;letter-spacing:.5px}
table.sv td{border:1px solid #0f1c2a;padding:2px 3px;vertical-align:middle}
table.sv tr:nth-child(even) td{background:var(--row-alt)}
table.sv tr:hover td{background:#0e1f30}
table.sv td input{background:transparent;border:none;color:var(--text);width:100%;text-align:right;padding:1px 2px;font-size:11px;font-family:inherit}
table.sv td input:focus{background:#0a1828;outline:1px solid var(--blue2);border-radius:2px}
table.sv td input.inp-md,table.sv td input.inp-inc,table.sv td input.inp-az{color:#b0d8ff}
.calc-cell{color:#7adbc8;text-align:right;padding:2px 5px;font-size:10px;white-space:nowrap}
.calc-cell.warn{color:#f39c12}
.calc-cell.danger{color:#e74c3c}
.calc-cell.ok{color:#27ae60}
.row-num{color:var(--text3);text-align:center;font-size:10px;padding:2px 5px}
.del-btn{background:transparent;border:none;color:#8b1a1a;cursor:pointer;font-size:12px;padding:0 3px}
.del-btn:hover{color:#e74c3c}
#tbl-ctrl{display:flex;gap:6px;padding:6px;flex-shrink:0;background:var(--panel);border-top:1px solid var(--border);align-items:center}
#tbl-ctrl .info{color:var(--text3);font-size:10px;margin-left:auto}
/* ── GRAPHICS TAB ── */
#gfx-panel{display:flex;height:100%;gap:0}
.gfx-view{flex:1;display:flex;flex-direction:column;border-right:1px solid var(--border)}
.gfx-view:last-child{border-right:none}
.gfx-hdr{background:var(--panel);border-bottom:1px solid var(--border);padding:5px 10px;display:flex;align-items:center;gap:8px;flex-shrink:0}
.gfx-hdr h3{color:#90c8ff;font-size:11px}
.gfx-hdr .gfx-opts{display:flex;gap:6px;align-items:center;margin-left:auto}
.gfx-wrap{flex:1;position:relative;overflow:hidden;background:#050c15}
.gfx-wrap canvas{position:absolute;top:0;left:0;display:block}
/* ── PLANNING TAB ── */
#plan-layout{display:flex;height:100%;gap:0}
#plan-left{width:340px;background:var(--panel);border-right:1px solid var(--border);overflow-y:auto;flex-shrink:0}
#plan-right{flex:1;overflow:auto}
.plan-section{padding:8px 10px;border-bottom:1px solid var(--border)}
.plan-section h3{color:var(--gold);font-size:11px;margin-bottom:6px;letter-spacing:.5px}
.plan-row{display:flex;align-items:center;gap:4px;margin-bottom:4px}
.plan-row label{color:var(--text2);min-width:105px;font-size:10px}
/* ── SECTION TABLE ── */
.sec-tbl{width:100%;border-collapse:collapse;font-size:10px;margin-bottom:4px}
.sec-tbl th{background:var(--hdr);color:var(--text2);padding:3px 3px;border:1px solid var(--border);text-align:center;font-size:9px;white-space:nowrap}
.sec-tbl td{border:1px solid #0f1c2a;padding:1px 2px;vertical-align:middle}
.sec-tbl td input,.sec-tbl td select{background:var(--inp);border:none;color:var(--text);width:100%;font-family:inherit;font-size:10px;padding:2px 3px}
.sec-tbl td select{color:var(--text)}
.sec-tbl tr.sec-vertical{border-left:3px solid #2a5aba}
.sec-tbl tr.sec-build{border-left:3px solid #1a9a4a}
.sec-tbl tr.sec-hold{border-left:3px solid #9a8a1a}
.sec-tbl tr.sec-drop{border-left:3px solid #9a3a2a}
.sec-tbl tr.sec-lateral{border-left:3px solid #1a8a9a}
.preset-btn{padding:3px 7px;font-size:10px;margin:2px 2px 2px 0;cursor:pointer;background:#0d1a2a;border:1px solid var(--border);color:var(--text2);border-radius:3px;transition:all .15s}
.preset-btn:hover{background:var(--blue);color:#90c8ff;border-color:var(--blue2)}
.sec-add-btn{padding:2px 7px;font-size:10px;margin:2px 2px 2px 0;cursor:pointer;background:#0a1828;border:1px solid var(--border);color:var(--text3);border-radius:3px;transition:all .15s}
.sec-add-btn:hover{background:#1a3050;color:var(--text)}
.sec-tip{font-size:9px;color:var(--text3);margin:2px 0 4px;line-height:1.4}
.plan-row input,.plan-row select{width:100px}
.plan-row .pu{color:var(--text3);font-size:10px}
.plan-output{background:var(--panel2);border:1px solid var(--border);border-radius:4px;padding:8px;margin:8px}
.plan-output h3{color:#90c8ff;font-size:11px;margin-bottom:6px}
table.plan-tbl{border-collapse:collapse;width:100%;font-size:10px}
table.plan-tbl th{background:var(--hdr);color:var(--text2);padding:3px 6px;border:1px solid var(--border);text-align:center}
table.plan-tbl td{border:1px solid #0f1c2a;padding:2px 5px;color:#7adbc8;text-align:right}
table.plan-tbl td:first-child{color:var(--text2);text-align:left}
/* ── SUMMARY TAB ── */
#sum-layout{display:flex;flex-wrap:wrap;gap:8px;padding:10px;overflow-y:auto;align-content:flex-start}
.sum-card{background:var(--panel2);border:1px solid var(--border);border-radius:4px;padding:10px;min-width:250px}
.sum-card h3{color:var(--gold);font-size:11px;margin-bottom:8px;border-bottom:1px solid var(--border);padding-bottom:4px}
.sum-row{display:flex;justify-content:space-between;margin-bottom:4px;font-size:10px}
.sum-lbl{color:var(--text2)}
.sum-val{color:#90c8ff;font-weight:700}
.sum-unit{color:var(--text3);margin-left:3px;font-weight:normal}
/* DLS color thresholds */
.dls-ok{color:#27ae60}
.dls-warn{color:#f39c12}
.dls-danger{color:#e74c3c}
/* ── SCROLLBARS ── */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:#050c15}
::-webkit-scrollbar-thumb{background:#1a3050;border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:#2060a8}
/* ── TOOLTIP ── */
.tip{position:relative;cursor:help}
.tip::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);background:#0a1828;border:1px solid var(--blue2);color:var(--text);padding:4px 8px;border-radius:3px;white-space:nowrap;font-size:10px;pointer-events:none;opacity:0;transition:opacity .2s;z-index:100}
.tip:hover::after{opacity:1}
/* ── MODAL ── */
#modal-overlay{position:fixed;inset:0;background:#000a;display:none;z-index:200;justify-content:center;align-items:center}
#modal-overlay.on{display:flex}
#modal-box{background:var(--panel2);border:2px solid var(--blue2);border-radius:6px;padding:20px;min-width:320px;max-width:480px}
#modal-box h3{color:#90c8ff;margin-bottom:12px}
#modal-box .modal-btns{display:flex;gap:8px;margin-top:16px;justify-content:flex-end}
/* ── WARN BOX ── */
.warn-strip{background:#3a1800;border:1px solid #8b3a00;color:#ffaa55;padding:4px 10px;font-size:10px;text-align:center;display:none}
.warn-strip.on{display:block}