:root{
  --bg: #ffffff;
  --bg2:#f6f8ff;
  --text:#0B1B3A;
  --muted: rgba(11,27,58,0.68);
  --stroke: rgba(11,27,58,0.10);
  --card: rgba(255,255,255,0.78);
  --shadow: 0 28px 70px rgba(2,6,23,0.10);
  --brandA: rgba(56,189,248,0.95);
  --brandB: rgba(167,139,250,0.88);
  --r: 18px;
  --max: 1120px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color:var(--text);
  background: linear-gradient(180deg, var(--bg), var(--bg2));
}

a{color:inherit; text-decoration:none}

.wrap{min-height:100%; display:flex; flex-direction:column}

.topbar{
  position:sticky; top:0; z-index:30;
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--stroke);
}
.topbar-inner{
  max-width: var(--max);
  margin:0 auto;
  padding: 8px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.brand{display:flex; align-items:center; gap:10px}
.logo{
  width:26px; height:26px; border-radius: 10px;
  display:grid; place-items:center;
  background: linear-gradient(135deg, var(--brandA), var(--brandB));
  color:#06203A;
  font-weight: 1000;
  font-size: 12px;
  box-shadow: 0 8px 18px rgba(2,6,23,0.10);
}
.brand b{letter-spacing:0.2px}

.actions{display:flex; gap:10px; align-items:center; flex-wrap:wrap}

.export-menu{position:absolute; right:0; top:36px; min-width: 180px; padding:10px; display:grid; gap:8px; background: rgba(255,255,255,0.92); border:1px solid rgba(148,163,184,0.35); border-radius:14px; box-shadow: 0 10px 24px rgba(2,6,23,0.10); backdrop-filter: blur(8px);}
.export-menu[hidden]{display:none !important;}

/* Analysis KDS modals (Wind/Seismic/Combinations) */
#modalHost{position:fixed; inset:0; z-index:9999; pointer-events:none;}
#modalHost:empty{display:none;}
.kds-modal-backdrop{position:absolute; inset:0; background: rgba(2,6,23,0.35); backdrop-filter: blur(6px); display:flex; align-items:center; justify-content:center; padding:16px; pointer-events:auto;}
.kds-modal{width:100%; border-radius: 16px; border: 1px solid rgba(148,163,184,0.45); background: rgba(255,255,255,0.96); box-shadow: 0 24px 80px rgba(2,6,23,0.20); overflow:hidden;}
.kds-modal-h{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border-bottom: 1px solid rgba(148,163,184,0.35); background: rgba(255,255,255,0.92);}
.kds-modal-b{padding:12px; max-height: min(70vh, 720px); overflow:auto;}
.kds-modal-f{padding:10px 12px; border-top: 1px solid rgba(148,163,184,0.35); background: rgba(255,255,255,0.92);}

/* ensure 3D containers have height */
#view3dWrap{position:relative; width:100%; height:100%;}
#view3d{width:100%; height:100%;}
.pill{
  padding:7px 10px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,0.62);
  font-weight: 900;
  font-size: 12px;
}
/* subtle button differentiation for readability */
.actions .pill{background: rgba(255,255,255,0.66)}
.actions .pill:hover{background: rgba(255,255,255,0.82)}

/* Global hover/press affordance */
.pill{transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease, transform 60ms ease;}
.pill:hover{box-shadow: 0 6px 14px rgba(2,6,23,0.10); transform: translateY(-1px);}
.pill:active{transform: translateY(0); box-shadow: 0 2px 8px rgba(2,6,23,0.10);}
.acc-btn{transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease, transform 60ms ease;}
.acc-btn:hover{box-shadow: 0 6px 14px rgba(2,6,23,0.08); transform: translateY(-1px);}
.acc-btn:active{transform: translateY(0);}

/* Analysis mode (non-intrusive): keep only 3D loading overlay */
.analysis-overlay{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,0.55); backdrop-filter: blur(4px); z-index:30;}
.analysis-overlay[hidden]{display:none !important;}
.analysis-overlay-card{display:flex; flex-direction:column; align-items:center; gap:10px; padding:14px 16px; border-radius:14px; border:1px solid rgba(148,163,184,0.35); background: rgba(255,255,255,0.92); box-shadow: 0 10px 24px rgba(2,6,23,0.08);}
.spinner{width:22px; height:22px; border-radius:999px; border:3px solid rgba(148,163,184,0.6); border-top-color: rgba(34,211,238,0.95); animation: spin 0.8s linear infinite;}
@keyframes spin{to{transform: rotate(360deg);}}

#btnToggleQty{background: rgba(56,189,248,0.14); border-color: rgba(56,189,248,0.24)}
#btnExportStaad{background: rgba(34,211,238,0.12); border-color: rgba(34,211,238,0.22)}
#btnExportIfc{background: rgba(167,139,250,0.14); border-color: rgba(167,139,250,0.24)}
#btnExportData{background: rgba(96,165,250,0.14); border-color: rgba(96,165,250,0.24)}
#btnExportDxf{background: rgba(250,204,21,0.10); border-color: rgba(250,204,21,0.18)}
#btnManual{background: rgba(148,163,184,0.14); border-color: rgba(148,163,184,0.26)}
#btnSave{background: linear-gradient(135deg, rgba(56,189,248,0.22), rgba(167,139,250,0.18)); border-color: rgba(11,27,58,0.14)}

/* 3D header buttons */
#btn3dGuides{background: rgba(148,163,184,0.12); border-color: rgba(148,163,184,0.22)}
#btn3dSection{background: rgba(96,165,250,0.12); border-color: rgba(96,165,250,0.22)}
#btnPopBr{background: rgba(34,211,238,0.10); border-color: rgba(34,211,238,0.18)}
#btnPopOv{background: rgba(167,139,250,0.12); border-color: rgba(167,139,250,0.20)}

/* Tools accordion buttons */
.tools .acc-btn{background: rgba(255,255,255,0.70)}
.tools .acc-btn:hover{background: rgba(255,255,255,0.86)}
.tools .acc-btn[data-acc="grid"]{background: rgba(96,165,250,0.10); border-color: rgba(96,165,250,0.16)}
.tools .acc-btn[data-acc="levels"]{background: rgba(167,139,250,0.10); border-color: rgba(167,139,250,0.16)}
.tools .acc-btn[data-acc="sub"]{background: rgba(34,211,238,0.10); border-color: rgba(34,211,238,0.16)}
.tools .acc-btn[data-acc="profile"]{background: rgba(148,163,184,0.10); border-color: rgba(148,163,184,0.16)}

.pill.active{
  border: 1px solid rgba(11,27,58,0.16);
  background: linear-gradient(135deg, rgba(56,189,248,0.26), rgba(167,139,250,0.22));
}
.cta{
  padding:7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(11,27,58,0.12);
  background: linear-gradient(135deg, rgba(56,189,248,0.90), rgba(167,139,250,0.84));
  color:#06203A;
  font-weight: 1000;
  font-size: 12px;
}

main{
  max-width: var(--max);
  width: 100%;
  margin: 0 auto;
  padding: 28px 18px 44px;
  display:block;
}

/* Fullscreen editor mode */
body.mode-editor .topbar-inner{
  max-width:none;
}
body.mode-editor{
  overflow:hidden;
}
body.mode-editor main{
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
  height: calc(100vh - 44px);
  flex: 1;
  display:flex;
}
body.mode-editor .wrap{height:100vh;}
#app{flex:1; min-height:0;}
body.mode-editor #app{display:flex; min-height:0;}
body.mode-editor .editor{flex:1; min-height:0;}

.card{
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: var(--r);
  box-shadow: var(--shadow);
}

.panel{padding: 18px}

h1{
  margin:0;
  font-size: 34px;
  letter-spacing: -0.02em;
  line-height: 1.10;
}

.sub{
  margin-top: 10px;
  color: var(--muted);
  line-height: 1.65;
  font-size: 15px;
  max-width: 68ch;
}

.grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 980px){
  .grid{grid-template-columns:1fr;}
}

.row{display:flex; gap:8px; flex-wrap:wrap; margin-top: 10px; align-items:center}

.input{
  width: 100%;
  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,0.64);
  color: var(--text);
  font-weight: 700;
  font-size: 12px;
}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,0.62);
  font-weight: 900;
  color: var(--text);
  cursor:pointer;
  font-size: 12px;
}
.btn.primary{
  border: 1px solid rgba(11,27,58,0.12);
  background: linear-gradient(135deg, rgba(56,189,248,0.90), rgba(167,139,250,0.84));
  color:#06203A;
}
.btn.danger{
  border: 1px solid rgba(185,28,28,0.20);
  background: rgba(254,226,226,0.70);
  color: #7f1d1d;
}

.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,0.60);
  color: rgba(11,27,58,0.72);
  font-weight: 900;
  font-size: 12px;
}
.dot{width:8px; height:8px; border-radius:99px; background: linear-gradient(135deg, var(--brandA), var(--brandB));}

.list{margin-top: 12px; display:grid; gap:10px}
.item{
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,0.62);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 12px;
}
.item b{display:block}
.item small{display:block; color: rgba(11,27,58,0.60); margin-top: 4px}

.footer{
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--stroke);
  color: rgba(11,27,58,0.55);
  font-size: 12px;
  display:flex;
  justify-content: space-between;
  gap:10px;
  flex-wrap:wrap;
}

.note{
  margin-top: 8px;
  font-size: 11px;
  color: rgba(11,27,58,0.60);
  line-height: 1.55;
}

/* Editor layout (matches your sketch): left tools, center 3D, right split, far-right notes */
.editor{
  height: 100%;
  display:grid;
  grid-template-columns: var(--w-tools,240px) 8px 1fr 8px var(--w-right,420px);
  grid-template-rows: 1fr 8px var(--h-qty,260px);
  gap: 10px;
  padding: 10px;
}

/* Hide Plan/Section pane (keep feature available for later) */
body.ps-hidden .editor{
  grid-template-columns: var(--w-tools,240px) 8px 1fr;
}
body.ps-hidden #splitterV{display:none;}
body.ps-hidden .pane.plan{display:none;}

/* Quantities collapsed by default */
body.qty-collapsed .editor{grid-template-rows: 1fr;}
body.qty-collapsed #splitterH{display:none;}
body.qty-collapsed .qty-bottom{display:none;}
.splitter{
  border-radius: 10px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,0.58);
  cursor: col-resize;
  user-select:none;
}
.splitterH{
  border-radius: 10px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,0.58);
  cursor: row-resize;
  user-select:none;
  grid-column: 1 / -1;
}
.splitterH:hover{background: rgba(56,189,248,0.18)}
.splitter:hover{background: rgba(56,189,248,0.18)}

.qty-bottom{grid-column: 1 / -1;}
@media (max-width: 1180px){
  .editor{
    grid-template-columns: var(--w-tools,220px) 8px 1fr 8px var(--w-right,380px);
  }
}
@media (max-width: 920px){
  body.mode-editor{overflow:auto;}
  body.mode-editor main{height:auto;}
  .editor{grid-template-columns:1fr; height:auto;}
  .splitter{display:none;}
}

/* Analysis layout: left notes/tools, center 3D, right settings */
.analysis-layout{
  height: 100%;
  width: 100%;
  display:grid;
  /* ensure 3D column expands and right pane stays flush */
  grid-template-columns:
    minmax(200px, var(--w-tools,240px))
    8px
    minmax(0, 1fr)
    8px
    minmax(240px, var(--w-right,320px));
  grid-template-rows: 1fr;
  gap: 10px;
  padding: 10px;
}
.analysis-layout .splitter{height:100%;}

body.mode-editor #app{width:100%;}
@media (max-width: 1180px){
  .analysis-layout{grid-template-columns: var(--w-tools,220px) 8px 1fr 8px var(--w-right,300px);}
}
@media (max-width: 920px){
  .analysis-layout{grid-template-columns:1fr; height:auto;}
}

.pane{
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,0.66);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height:0;
}
.pane-h{
  padding: 6px 8px;
  border-bottom: 1px solid var(--stroke);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  background: rgba(255,255,255,0.72);
}
.pane-h b{font-size: 12px; letter-spacing:0.02em}

/* Popover panels over 3D */
.view3d{position:relative;}
.popwrap{position:absolute; top:40px; right:10px; width: 340px; max-width: calc(100% - 20px); max-height: calc(100% - 50px); overflow:auto; display:none; z-index:80;}
.popwrap.open{display:block;}
.popcard{background: rgba(255,255,255,0.90); border:1px solid var(--stroke); border-radius: 14px; box-shadow: var(--shadow); padding:10px;}
.pane-b{padding: 8px; flex:1; min-height: 0; overflow:auto;}

/* tighter tool panel */
.tools .pane-b{padding: 6px;}
.tools .label{margin-top:7px; margin-bottom:4px; font-size:11px;}
.tools .note{font-size:11px;}

/* Accordion inside tools */
.acc{display:grid; gap:6px}
.acc-btn{
  width:100%;
  text-align:left;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,0.62);
  font-weight: 1000;
  font-size: 12px;
  cursor:pointer;
}
.acc-btn .chev{font-weight: 1000; color: rgba(11,27,58,0.55)}
.acc-panel{
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,0.62);
  padding: 8px;
  display:none;
}
.acc-panel.open{display:block;}

.label{display:block; font-size:12px; font-weight:900; color: rgba(11,27,58,0.70); margin: 10px 0 6px}
.grid2{display:grid; grid-template-columns: 1fr 1fr; gap:10px}
@media (max-width: 920px){
  .grid2{grid-template-columns:1fr;}
}
.smallbtn{padding:7px 10px; font-size:12px}

/* right-split removed: quantities now spans bottom */

.placeholder{
  width:100%; height:100%;
  border: 1px dashed rgba(11,27,58,0.22);
  border-radius: 12px;
  display:grid; place-items:center;
  color: rgba(11,27,58,0.62);
  background:
    radial-gradient(520px 300px at 20% 10%, rgba(56,189,248,0.12), transparent 60%),
    radial-gradient(560px 340px at 80% 30%, rgba(167,139,250,0.10), transparent 60%);
}

svg.prebim2d{width:100%; height:100%; display:block; border-radius:10px; border:1px solid var(--stroke); background: rgba(255,255,255,0.58); touch-action:none;}
svg.prebim2d .grid{stroke: rgba(11,27,58,0.10); stroke-width:0.02;}
svg.prebim2d .level{stroke: rgba(11,27,58,0.16); stroke-width:0.03; stroke-dasharray:0.10 0.08;}
svg.prebim2d .mem{stroke: rgba(11,27,58,0.72); stroke-linecap:round; stroke-linejoin:round; fill:none;}
svg.prebim2d .mem.sel{stroke: rgba(56,189,248,0.95);}
svg.prebim2d .col{fill: rgba(148,163,184,0.85); stroke: rgba(11,27,58,0.35); stroke-width:0.02;}
svg.prebim2d text{font-family: ui-sans-serif, system-ui; fill: rgba(11,27,58,0.60); font-size:0.35px;}

/* Qty table */
.qty-title{font-weight:1000; font-size:13px; margin:0 0 8px}
.qty-table{width:100%; border-collapse:collapse; font-size:12px}
.qty-table th, .qty-table td{padding:7px 6px; border-bottom:1px solid var(--stroke); text-align:left; vertical-align:top}
.qty-table th{font-size:11px; color: rgba(11,27,58,0.62)}
.qty-table td.num, .qty-table th.num{text-align:right}
.qty-table tfoot td{font-weight:1000}
.qty-subtotal td{font-weight:1000; color: rgba(11,27,58,0.72); background: rgba(11,27,58,0.03)}
.qty-subtotal td:first-child{border-left: 3px solid rgba(56,189,248,0.35)}

/* Analysis results table */
.table tr.analysis-mem:hover{background: rgba(56,189,248,0.10);}
.table tr.analysis-mem.sel{background: rgba(255,242,0,0.35) !important;}
.table tr.analysis-mem.sel:hover{background: rgba(255,242,0,0.45) !important;}
.table tr.analysis-mem.sel td{border-left: 6px solid rgba(255,242,0,1.0) !important;}
.table tr.analysis-mem.fail{background: rgba(255,0,0,0.22);}
.table tr.analysis-mem.fail:hover{background: rgba(255,0,0,0.30);}
.table tr.analysis-mem.fail td{border-left: 6px solid rgba(255,0,0,0.95);}

/* allow toggling FAIL highlight */
body.failhl-off .table tr.analysis-mem.fail{background: transparent;}
body.failhl-off .table tr.analysis-mem.fail td{border-left: none;}