:root{--bg:#f5f7fb;--panel:#fff;--border:#d8dfeb;--text:#233044;--muted:#5a6b82;--blue:#1e63d6;--warn:#a14700;--ok:#1c6a33}*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--text)}.topbar{padding:18px 24px;background:#0f1723;color:#fff}.topbar h1{margin:0;font-size:28px}.topbar p{margin:6px 0 0;color:#cbd7ea}.grid{display:grid;grid-template-columns:360px 390px 1fr;gap:16px;padding:16px;align-items:start}.card{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:16px;box-shadow:0 1px 4px rgba(20,40,70,.05)}label{display:block;font-size:14px;margin-bottom:12px}input,select,textarea,button{width:100%;margin-top:6px;padding:8px 10px;border-radius:8px;border:1px solid #bcc7d8;font-size:14px}button{cursor:pointer;background:var(--blue);color:#fff;border:none;font-weight:700}.cols{display:grid;grid-template-columns:1fr 1fr;gap:10px}.buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0}.hint,.note{font-size:12px;color:var(--muted)}#segmentsContainer{display:grid;gap:8px;max-height:440px;overflow:auto}.seg{border:1px solid var(--border);border-radius:8px;background:#fafcff;padding:10px}.seggrid{display:grid;grid-template-columns:70px 1fr 1fr 1fr;gap:8px;align-items:end}.summary{display:grid;grid-template-columns:1fr 1fr;gap:8px}.sum{border:1px solid var(--border);background:#fafcff;border-radius:8px;padding:10px}.sum .k{font-size:12px;color:var(--muted)}.sum .v{font-size:18px;font-weight:700}.warning{background:#fff4e8;border:1px solid #ffd1a6;color:var(--warn);border-radius:8px;padding:10px;margin-top:8px;font-size:13px}.warning.ok{background:#eefaf1;border-color:#b7e1c1;color:var(--ok)}.bomrow{border-bottom:1px solid var(--border);padding:7px 0;font-size:13px}.drawings canvas{width:100%;height:auto;border:1px solid var(--border);border-radius:8px;background:white}.draw-head{display:flex;justify-content:space-between;align-items:center}.draw-head button{width:90px}.sliders{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}textarea{font-family:Consolas,monospace}@media(max-width:1500px){.grid{grid-template-columns:1fr}}

.topnav{margin-top:10px;display:flex;gap:12px}.topnav a{color:#cbd7ea;text-decoration:none;border:1px solid #50607a;padding:6px 10px;border-radius:8px}.topnav a:hover{background:#1d2a3c}code{background:#eef3fb;padding:2px 4px;border-radius:4px}

/* Three.js viewer + Terrain layout */
.layout{display:grid;grid-template-columns:340px 1fr 320px;gap:16px;padding:16px;align-items:start}
.panel{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:16px;box-shadow:0 1px 4px rgba(20,40,70,.05)}
.panel h2{font-size:16px;margin:14px 0 8px}
.panel h2:first-child{margin-top:0}
.row.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.button-row.two{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0}
.layer-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 10px}
.layer-grid label{display:flex;align-items:center;gap:6px;margin:0;font-size:13px}
.layer-grid label input{width:auto;margin:0}
.summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.summary-item{border:1px solid var(--border);background:#fafcff;border-radius:8px;padding:10px}
.summary-item .k{font-size:12px;color:var(--muted)}
.summary-item .v{font-size:16px;font-weight:700}
.warnings .warning{margin-top:6px}
.view-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.view-header h2{margin:0}
.legend{font-size:12px;color:var(--muted)}
.disclaimer{font-size:12px;color:var(--muted);margin-top:8px;font-style:italic}
.workflow{font-size:13px;padding-left:18px;color:var(--text)}

/* Three.js wrap with overlay legend */
.three-wrap{position:relative;height:720px;border:1px solid var(--border);border-radius:8px;overflow:hidden;background:#f8fafc}
.three-container{position:absolute;inset:0}
.legend-panel{position:absolute;top:10px;right:10px;background:rgba(255,255,255,.92);border:1px solid var(--border);border-radius:8px;padding:10px 12px;font-size:12px;line-height:1.55;box-shadow:0 1px 3px rgba(0,0,0,.08);max-width:210px;pointer-events:none}
.legend-title{font-weight:700;margin-bottom:4px;font-size:12px;color:var(--text)}
.legend-item{display:flex;align-items:center;gap:8px}
.legend-item .sw{display:inline-block;width:14px;height:8px;border-radius:2px;border:1px solid rgba(0,0,0,.15)}

.dtm-views canvas{width:100%;height:auto;border:1px solid var(--border);border-radius:8px;background:#fff;display:block;margin-bottom:8px}
.dtm-table-wrap{max-height:280px;overflow:auto;border:1px solid var(--border);border-radius:8px;background:#fafcff}
.dtm-table{width:100%;border-collapse:collapse;font-size:12px}
.dtm-table th,.dtm-table td{padding:5px 7px;border-bottom:1px solid var(--border);text-align:right;white-space:nowrap}
.dtm-table th{background:#eef3fb;color:var(--muted);font-weight:600;position:sticky;top:0}
.dtm-table td:nth-child(2),.dtm-table td:nth-child(3){text-align:left}
.info-box{background:#fafcff;border:1px solid var(--border);border-radius:8px;padding:8px 10px;font-size:12px;color:var(--text);line-height:1.45;margin-bottom:8px}

@media(max-width:1300px){.layout{grid-template-columns:1fr}}