:root{--blue:#245ddd;--border:#dce4ef;--muted:#546783;font-family:system-ui,"Segoe UI",Tahoma,sans-serif;background:#eef2f7;color:#172b47;line-height:1.5;scroll-behavior:smooth;scroll-padding-top:70px}body{background:#eef2f7}.topbar{height:78px;background:#10233f;padding:0 30px}.brand svg{stroke:#86c7ff}.workspace-nav{display:flex;align-items:center;gap:8px;padding:10px 24px;background:#fff;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:5;overflow-x:auto}.workspace-nav a{font-size:14px;color:#405575;text-decoration:none;white-space:nowrap;padding:9px 14px;min-height:44px;border-radius:6px}.workspace-nav a:hover{background:#eaf1ff;color:#245ddd}.workspace{grid-template-columns:340px minmax(0,1fr);max-width:1640px}.sidebar{padding:26px;background:#fbfcfe}.results{padding:30px;max-width:1300px}.input-section{border-bottom:1px solid #dce4ef}.input-section h2{font-size:17px}.section-number{display:inline-flex;width:28px;height:28px;align-items:center;justify-content:center;border-radius:6px;background:#e5edfa;color:#3462a9}.sidebar label{color:#324969;font-size:14px}.input-hint{color:#61718a;font-size:13px}.sidebar input,.sidebar select{height:46px;border-color:#c6d2e3}.panel{border-radius:12px;box-shadow:0 3px 12px #112c5110}.panel-header h2{font-size:18px}.panel-header{padding:22px 24px}.panel-header .case-badge{font-size:12px}.rebar-panel{border-top:4px solid #245ddd}.rebar-value{font-size:34px;font-weight:750}.rebar-recommendation p{font-size:14px;color:#596e8b}.design-basis,.design-limit,.design-calculations,.design-calculations p{font-size:14px;color:#546783}.design-checks>div{font-size:14px}.design-checks span{color:#61718a}.design-checks strong{color:#243f63}.check-message{font-size:14px!important}.alternative-bars label{font-size:14px;color:#546783}.bar-option{font-size:14px;min-height:44px}.metric{border-radius:10px;border-top:3px solid #c7d8ef}.metric.emphasis{border-top-color:#245ddd}.metric-label,.metric-label span,.metric-note{color:#576b87}.metric-value{font-weight:750;font-size:30px}.chart-label h3{font-size:16px}.chart-label h3 small,.chart-label strong,.diagram-note{font-size:13px;color:#5f7290}.engineering-panel{margin-top:24px;overflow:hidden}.engineering-panel>.panel-header{background:#f7faff;border-bottom:1px solid var(--border)}.engineering-panel h3{font-size:17px;margin:0 0 16px;font-weight:650}.engineering-block{padding:24px;border-bottom:1px solid var(--border);margin:0}.engineering-block:last-child{border:0}.engineering-block summary{font-size:17px;color:#243f63;font-weight:650;min-height:44px;padding:9px 0;cursor:pointer}.engineering-block[open] summary{margin-bottom:12px}.engineering-note{font-size:14px;line-height:1.7;color:#5c708c;margin:14px 0 0}.utilizations{display:grid;grid-template-columns:1fr 1fr;gap:18px}.util-card{background:#f3f7fd;border:1px solid #d9e5f5;padding:18px 20px;border-radius:9px}.util-title{font-size:14px;color:#405779}.util-card strong{font-size:32px;display:block;color:#245ddd;margin:5px 0}.util-card p{font-size:14px;color:#546783;margin:7px 0 0}.util-card meter{width:100%;height:14px;accent-color:#245ddd}.engineering-table{width:100%;overflow-x:auto}.engineering-table table{border-collapse:collapse;width:100%;font-size:14px;font-variant-numeric:tabular-nums}.engineering-table th{background:#ecf2fb;color:#415a7d;text-align:left;font-size:13px;padding:12px 14px;border-bottom:1px solid #d2dff0;white-space:nowrap}.engineering-table td{padding:12px 14px;border-bottom:1px solid #e6edf6;color:#314a6c}.engineering-table td:first-child{font-weight:650}.engineering-table tr:nth-child(even){background:#f8faff}.engineering-table details p{max-width:360px;font-size:13px;font-weight:400;line-height:1.6}.engineering-table summary{font-size:13px;font-weight:500;white-space:nowrap;padding:8px 0;margin:0!important}.choose-layout{background:#245ddd;color:#fff;min-height:44px;padding:10px 16px;border-radius:7px;font-size:14px;font-weight:600;white-space:nowrap}.choose-layout:disabled{opacity:.45;cursor:default}.block-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}.block-header h3{margin:0}.block-header>div{display:flex;align-items:center;gap:12px}.block-header label{font-size:14px;white-space:nowrap}.block-header select{min-width:110px;font-size:16px}.method-card p,.method-card details,dl div{font-size:14px;color:#526986}.model-bottom,.legend{font-size:14px}.design-error{border-left:4px solid #bd5667}button,a,input,select,summary{touch-action:manipulation}section[id]{scroll-margin-top:75px}
@media(max-width:1200px){.workspace{grid-template-columns:300px minmax(0,1fr)}.sidebar{padding:22px}.results{padding:24px}.engineering-table th,.engineering-table td{padding:11px 9px}}
@media(max-width:760px){.topbar{height:74px;padding:0 16px}.workspace-nav{padding:7px 10px;gap:2px}.workspace-nav a{font-size:13px;padding:9px 10px}.workspace{display:flex}.sidebar{padding:20px;margin:0 12px 16px}.sidebar.collapsed{padding:10px}.results{display:contents}.results-header{padding:22px 16px 4px}.results-header h1{font-size:27px}.unit-control select{font-size:16px}.panel-header{padding:18px 16px}.panel-header h2{font-size:17px}.rebar-layout{padding:18px 16px;grid-template-columns:100px minmax(0,1fr)}.rebar-value{font-size:30px}.rebar-recommendation p{font-size:14px}.design-checks>div{font-size:14px}.metrics{gap:10px}.metric{padding:15px 12px}.metric-value{font-size:26px}.engineering-block{padding:20px 16px}.engineering-panel>.panel-header{align-items:flex-start}.engineering-panel #export-csv{width:100%}.utilizations{gap:10px}.util-card{padding:14px 12px}.util-title{font-size:13px}.util-card strong{font-size:29px}.util-card p{font-size:13px}.block-header{display:block}.block-header>div{margin-top:14px}.engineering-table table{min-width:530px}.engineering-note{font-size:14px}.engineering-table{border:1px solid #e2eaf5;border-radius:7px}.model-bottom{font-size:13px}.design-limit{font-size:13px}.unit-control{min-width:0}}
@media(max-width:380px){.results-header{display:block}.unit-control{display:flex;margin-top:14px}.rebar-layout{grid-template-columns:85px minmax(0,1fr);gap:10px}.rebar-value{font-size:27px}.utilizations{grid-template-columns:1fr}.topbar{padding:0 12px}.metric-value{font-size:24px}.metric-value small{display:block;margin:0}.workspace-nav a{font-size:12px;padding:9px 8px}}
@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}}
/* Desktop inputs and analysis use separate scroll containers. */
.side-actions{display:flex;align-items:center;gap:12px;flex-shrink:0}.guide-link{display:inline-flex;align-items:center;min-height:44px}.side-title{gap:10px}
@media screen and (min-width:761px){
  :root{scroll-padding-top:0}
  body{height:100vh;height:100dvh;display:grid;grid-template-rows:auto auto minmax(0,1fr);overflow:hidden}
  .workspace-nav{position:relative;top:auto;min-width:0}
  .workspace{width:100%;height:100%;min-height:0;overflow:hidden}
  .sidebar,.results{min-height:0;overflow-y:auto;overscroll-behavior-y:contain;scrollbar-gutter:stable;scroll-padding-top:24px}
  .results{scroll-behavior:smooth}
  .results section[id]{scroll-margin-top:0}
  .sidebar:focus-visible,.results:focus-visible{outline:2px solid #558cf1;outline-offset:-2px}
}
@media screen and (min-width:761px) and (prefers-reduced-motion:reduce){.results{scroll-behavior:auto}}
@media print{.workspace-nav,#export-csv,.choose-layout{display:none!important}.engineering-panel{box-shadow:none;overflow:visible;break-inside:auto}.engineering-block{padding:14px;break-inside:avoid}.engineering-table{overflow:visible}.engineering-table table{min-width:0;font-size:10px}.engineering-table th,.engineering-table td{padding:7px;font-size:10px}.engineering-note{font-size:10px}.util-card strong{font-size:24px}.engineering-block summary{font-size:14px}.topbar{background:white}.results{max-width:none}.sidebar{background:white}}

@media(max-width:760px){.engineering-table::before{content:"Scroll table horizontally / เลื่อนตาราง";display:block;font-size:12px;color:#5c708c;padding:8px 12px;background:#f7faff}.workspace-nav{overflow:visible}.workspace-nav a{flex:1;min-width:0;text-align:center;white-space:normal;padding:8px 5px;line-height:1.5;font-size:12px}}