/* STAAD Viewer (/staad-viewer): a full-screen engineering application, not a web page.
   Toolbar, page tabs, model, side panel, status bar. Accents: PEB Optimization teal and amber. */
:root {
  --bar: #F0F2F3; --bar-line: #C9CFD3; --ink: #1F2328; --ink-2: #56626A; --ink-3: #8B969D;
  --teal: #0F4C5C; --teal-2: #1A6B7D; --teal-bg: #E4EFF1; --teal-line: #9CC3CB;
  --amber: #F59E0B; --amber-2: #D97706; --amber-bg: #FFF4DE;
  --font: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --mono: Consolas, "Cascadia Mono", "SF Mono", Menlo, monospace;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) 28px; height: 100vh; height: 100dvh; overflow: hidden; background: var(--bar); color: var(--ink); font: 13px/1.35 var(--font); }

/* ---- toolbar */
.sv-bar { display: flex; align-items: center; gap: 6px; min-width: 0; min-height: 40px; padding: 4px 8px; background: var(--bar); }
.sv-brand { display: flex; align-items: center; gap: 7px; padding-right: 10px; margin-right: 2px; border-right: 1px solid var(--bar-line); color: var(--teal); text-decoration: none; white-space: nowrap; }
.sv-brand b { font-size: 13px; font-weight: 700; }
.sv-tools { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.sv-tools::-webkit-scrollbar { display: none; }
.sv-tb { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 8px; border: 1px solid transparent; border-radius: 3px; background: none; color: var(--ink); font: inherit; white-space: nowrap; cursor: pointer; }
.sv-tb svg { width: 16px; height: 16px; flex: none; color: var(--teal); }
.sv-tb:hover { background: var(--teal-bg); border-color: var(--teal-line); }
.sv-tb.is-on { background: var(--teal); border-color: var(--teal); color: #FFFFFF; }
.sv-tb.is-on svg { color: #FFFFFF; }
.sv-tb:disabled { opacity: 0.4; cursor: default; background: none; border-color: transparent; }
.sv-div { width: 1px; height: 22px; margin: 0 5px; background: var(--bar-line); flex: none; }
.sv-chk { display: inline-flex; align-items: center; gap: 4px; padding: 0 6px; white-space: nowrap; cursor: pointer; }
.sv-chk input { margin: 0; accent-color: var(--teal); }
.sv-panel-btn { margin-left: auto; height: 26px; margin-bottom: 3px; }

/* ---- page tabs, with the open file on the right */
.sv-tabs { display: flex; align-items: flex-end; gap: 2px; min-width: 0; padding: 0 8px; border-bottom: 2px solid var(--teal); background: var(--bar); }
.sv-tab { height: 27px; padding: 0 16px; border: 1px solid var(--bar-line); border-bottom: 0; border-radius: 4px 4px 0 0; background: #E3E7EA; color: var(--ink-2); font: 600 12px var(--font); cursor: pointer; }
.sv-tab:hover { background: #EDF1F3; color: var(--ink); }
.sv-tab.is-on { background: var(--teal); border-color: var(--teal); color: #FFFFFF; }
.sv-doc { display: inline-flex; align-items: center; gap: 6px; flex: 0 1 auto; min-width: 90px; margin-left: 4px; max-width: 34%; height: 24px; padding: 0 4px 0 10px; border: 1px solid var(--bar-line); border-radius: 3px; background: #FFFFFF; font: 12px var(--mono); color: var(--ink); }
.sv-doc[hidden] { display: none; }
.sv-doc span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-doc-x { width: 20px; height: 18px; border: 0; border-radius: 2px; background: none; color: var(--ink-2); font-size: 15px; line-height: 1; cursor: pointer; }
.sv-doc-x:hover { background: #C42B1C; color: #FFFFFF; }

/* ---- main area */
.sv-main { display: grid; grid-template-columns: minmax(0, 1fr) 272px; min-height: 0; }
body.sv-no-panel .sv-main { grid-template-columns: minmax(0, 1fr) 0; }
body.sv-no-panel .sv-panel { display: none; }
.sv-stage { position: relative; min-height: 0; overflow: hidden; background: #FFFFFF; }
body[data-sv-theme="dark"] .sv-stage { background: #000000; }
.sv-stage canvas { display: block; position: absolute; inset: 0; }
.sv-stage.is-measuring canvas { cursor: crosshair; }
.sv-stage.is-hover canvas { cursor: pointer; }
.sv-labels { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.sv-tag { display: inline-block; font: 600 12px var(--mono); white-space: nowrap; transform: translateY(-11px); text-shadow: 0 0 2px #FFF, 0 0 2px #FFF, 0 0 3px #FFF; }
body[data-sv-theme="dark"] .sv-tag { text-shadow: 0 0 2px #000, 0 0 2px #000, 0 0 3px #000; }
.sv-tag.is-joint { color: #0050B3; transform: translate(10px, -12px); }
.sv-tag.is-member { color: #A0410D; transform: translate(6px, -12px); }
.sv-tag.is-prop { color: var(--teal); transform: translate(6px, -12px); }
.sv-tag.is-load { color: #B45309; font-size: 11px; transform: translate(4px, -4px); }
.sv-tag.is-measure { padding: 1px 6px; border: 1px solid var(--amber-2); background: var(--amber-bg); color: #7C2D12; font-weight: 600; }
body[data-sv-theme="dark"] .sv-tag.is-joint { color: #7DD3FC; }
body[data-sv-theme="dark"] .sv-tag.is-member { color: #FDE68A; }
body[data-sv-theme="dark"] .sv-tag.is-prop { color: #5EEAD4; }
body[data-sv-theme="dark"] .sv-tag.is-load { color: #FBBF24; }
.sv-error { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); z-index: 6; max-width: 90%; margin: 0; padding: 8px 12px; border: 1px solid #F1AEB5; background: #FDF0F1; color: #8A1C25; }
.sv-legend { position: absolute; left: 98px; bottom: 8px; z-index: 2; padding: 4px 8px; border: 1px solid var(--amber); border-left: 4px solid var(--amber); background: rgba(255, 255, 255, 0.94); font-size: 12px; font-weight: 600; color: #7C4A03; pointer-events: none; }

.sv-empty { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; padding: 20px; background:
    linear-gradient(#EDF2F3 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, #EDF2F3 1px, transparent 1px) 0 0 / 24px 24px, #FFFFFF; }
body.sv-has-model .sv-empty { display: none; }
.sv-drop { max-width: 460px; padding: 26px 30px; border: 1px solid var(--bar-line); border-top: 3px solid var(--teal); background: #FFFFFF; text-align: center; box-shadow: 0 8px 28px -18px rgba(0, 0, 0, 0.4); }
.sv-drop h1 { margin: 0 0 6px; font-size: 20px; font-weight: 700; color: var(--teal); }
.sv-drop p { margin: 0 0 14px; color: var(--ink-2); }
.sv-drop code { font-family: var(--mono); }
.sv-drop-actions { display: flex; justify-content: center; gap: 8px; margin-bottom: 8px; }
.sv-btn { height: 32px; padding: 0 16px; border: 1px solid #A9B1BA; border-radius: 3px; background: #F6F8FA; color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
.sv-btn:hover { background: #EAEEF2; }
.sv-btn-main { background: var(--teal); border-color: var(--teal); color: #FFFFFF; }
.sv-btn-main:hover { background: #0B3B48; }
.sv-drop-hint { font-size: 12px; color: var(--ink-3) !important; }
.sv-private { display: inline-flex; align-items: center; gap: 6px; color: #1A7F37 !important; font-size: 12px; }
.sv-legal { margin: 10px 0 0 !important; font-size: 11px; color: var(--ink-3) !important; }
.sv-dropmask { position: absolute; inset: 0; z-index: 8; display: none; place-items: center; background: rgba(15, 76, 92, 0.1); border: 2px dashed var(--teal); }
.sv-dropmask span { padding: 8px 16px; background: var(--teal); color: #FFFFFF; font-weight: 600; }
body.sv-drag .sv-dropmask { display: grid; }

/* ---- side panel */
/* Fixed areas: the panel is split between its panes; each pane's list scrolls inside it. */
.sv-panel { display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--bar-line); background: #FFFFFF; overflow: hidden; }
.sv-page { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.sv-page[hidden] { display: none; }
.sv-pane { display: flex; flex-direction: column; flex: var(--grow, 1) 1 0; min-height: 64px; }
.sv-pane + .sv-pane { border-top: 1px solid var(--bar-line); }
.sv-pane-b { flex: 1; min-height: 0; overflow: auto; }
.sv-pane-h { flex: none; display: flex; align-items: center; justify-content: space-between; margin: 0; padding: 4px 8px; background: var(--teal-bg); border-bottom: 1px solid var(--teal-line); color: var(--teal); font-size: 12px; font-weight: 700; }
.sv-pane-act { padding: 0 6px; border: 1px solid var(--teal-line); border-radius: 2px; background: #FFFFFF; color: var(--teal); font: 11px var(--font); cursor: pointer; }
.sv-none { margin: 0; padding: 10px 8px; color: var(--ink-3); }
.sv-grid { width: 100%; border-collapse: collapse; font-size: 12px; }
.sv-grid th { position: sticky; top: 0; z-index: 1; padding: 3px 6px; background: #F6F8F9; border-bottom: 1px solid var(--bar-line); border-right: 1px solid #E3E7EA; text-align: left; font-weight: 600; color: var(--ink-2); }
.sv-grid td { padding: 3px 6px; border-bottom: 1px solid #ECEFF1; border-right: 1px solid #F0F2F4; white-space: nowrap; }
.sv-grid td.wrap { white-space: normal; }
.sv-grid td.n { font-family: var(--mono); text-align: right; }
.sv-grid tbody tr[data-k] { cursor: pointer; }
.sv-grid tbody tr[data-k]:hover td { background: #F1F7F8; }
.sv-grid tbody tr.is-on td { background: var(--amber-bg); }
.sv-grid .ref { font-family: var(--mono); font-weight: 700; color: var(--teal); }
.sv-group-list { display: grid; padding: 4px 8px 6px; }
.sv-group-list .sv-grp { display: flex; align-items: center; gap: 6px; margin: 0 -8px; padding: 2px 8px; cursor: pointer; }
.sv-group-list .sv-grp:hover { background: var(--teal-bg); }
.sv-group-list .sv-grp.is-on { background: var(--amber-bg); }
.sv-group-list .sv-grp input { cursor: pointer; }
.sv-group-list input { accent-color: var(--teal); }
.sv-group-list small { margin-left: auto; color: var(--ink-3); font-family: var(--mono); }

/* ---- floating windows (property, beam, node, support), like a desktop dialog */
.sv-win[hidden], .sv-error[hidden], .sv-pane[hidden] { display: none !important; }
.sv-win { position: absolute; top: 112px; right: 10px; z-index: 10; width: 170px; max-height: calc(100% - 122px); display: flex; flex-direction: column; border: 1px solid var(--teal); background: #FFFFFF; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.45); }
.sv-win-bar { display: flex; align-items: center; justify-content: space-between; height: 26px; padding: 0 2px 0 8px; background: var(--teal); color: #FFFFFF; cursor: move; user-select: none; touch-action: none; }
.sv-win-title { font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-win-x { width: 26px; height: 22px; border: 0; background: none; color: #FFFFFF; font-size: 16px; line-height: 1; cursor: pointer; }
.sv-win-x:hover { background: #C42B1C; }
.sv-win-body { overflow: auto; }
.sv-win-body h3 { margin: 0; padding: 3px 8px; background: #F6F8F9; border-top: 1px solid #E3E7EA; border-bottom: 1px solid #E3E7EA; font-size: 11px; font-weight: 700; color: var(--teal); text-transform: uppercase; letter-spacing: 0.03em; }
.sv-kv { width: 100%; border-collapse: collapse; font-size: 12px; }
.sv-kv th { width: 44%; padding: 3px 8px; border-bottom: 1px solid #F0F2F4; text-align: left; font-weight: 400; color: var(--ink-2); }
.sv-kv td { padding: 3px 8px; border-bottom: 1px solid #F0F2F4; font-family: var(--mono); text-align: right; }
.sv-win-acts { display: flex; gap: 6px; padding: 8px; border-top: 1px solid #E3E7EA; }
.sv-win-btn { height: 26px; padding: 0 10px; border: 1px solid var(--teal); border-radius: 3px; background: #FFFFFF; color: var(--teal); font: 600 12px var(--font); cursor: pointer; }
.sv-win-btn:hover, .sv-win-btn.is-on { background: var(--teal); color: #FFFFFF; }
.sv-ref { padding: 0 5px; border: 1px solid var(--teal-line); border-radius: 2px; background: var(--teal-bg); font: 700 11px var(--mono); color: var(--teal); cursor: pointer; }
.sv-ids { margin: 0; padding: 6px 8px; max-height: 90px; overflow: auto; font: 11px var(--mono); color: var(--ink-2); word-break: break-word; }
.sv-drawing { padding: 8px; border-top: 1px solid #E3E7EA; background: #FBFCFC; }
.sv-drawing svg { display: block; width: 100%; height: auto; }
.sv-drawing-cap { margin: 4px 0 0; font-size: 11px; color: var(--ink-3); text-align: center; }

/* ---- status bar, with the PEB Optimizer link highlighted on the right */
.sv-status { display: flex; align-items: center; gap: 16px; padding: 0 0 0 8px; border-top: 1px solid var(--bar-line); background: var(--bar); color: var(--ink-2); font-size: 12px; white-space: nowrap; overflow: hidden; }
#sv-st-model { overflow: hidden; text-overflow: ellipsis; }
#sv-st-hover { font-family: var(--mono); color: var(--ink); overflow: hidden; text-overflow: ellipsis; }
#sv-st-mode { color: var(--amber-2); }
.sv-ad { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 100%; margin-left: auto; padding: 0 14px 0 12px; overflow: hidden; flex: none;
  background: linear-gradient(110deg, var(--teal) 0%, var(--teal-2) 45%, #2A8C9E 50%, var(--teal-2) 55%, var(--teal) 100%); background-size: 250% 100%;
  color: #E6F4F6; text-decoration: none; animation: sv-ad-sheen 3.2s linear infinite; }
.sv-ad b { color: #FFFFFF; font-weight: 700; }
.sv-ad::before { content: ""; position: absolute; inset: 0; border: 2px solid transparent; border-image: linear-gradient(90deg, var(--amber), #FCD34D, var(--amber)) 1; animation: sv-ad-glow 1.6s ease-in-out infinite; pointer-events: none; }
.sv-ad-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.8); animation: sv-ad-ping 1.6s ease-out infinite; flex: none; }
.sv-ad-arrow { color: var(--amber); font-weight: 700; animation: sv-ad-nudge 1.6s ease-in-out infinite; }
.sv-ad:hover { filter: brightness(1.12); }
@keyframes sv-ad-sheen { from { background-position: 100% 0; } to { background-position: -150% 0; } }
@keyframes sv-ad-glow { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
@keyframes sv-ad-ping { 0% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.8); } 70% { box-shadow: 0 0 0 7px rgba(245, 158, 11, 0); } 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); } }
@keyframes sv-ad-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }

@media (max-width: 760px) {
  .sv-brand b { display: none; }
  .sv-main { grid-template-columns: minmax(0, 1fr) 0; }
  .sv-panel { position: absolute; right: 0; top: 72px; bottom: 28px; width: min(280px, 77vw); z-index: 12; box-shadow: -8px 0 24px -12px rgba(0, 0, 0, 0.4); }
  body:not(.sv-panel-open) .sv-panel { display: none; }
  .sv-win { left: 8px; right: 8px; width: auto; top: auto; bottom: 8px; max-height: 60%; }
  #sv-st-mode, #sv-st-model, #sv-st-hover { display: none; }
  .sv-ad { margin-left: 0; width: 100%; justify-content: center; font-size: 11px; }
  .sv-ad .sv-ad-long { display: none; }
  .sv-ad .sv-ad-short { display: inline; }
  .sv-doc { max-width: 30%; }
}

/* Primary Loads as a tree: load case, then its load items. */
.sv-tree { list-style: none; margin: 0; padding: 2px 0; font-size: 12px; }
.sv-tree ul { list-style: none; margin: 0; padding: 0; }
.sv-tree li[hidden] { display: none; }
.sv-node { display: flex; align-items: center; gap: 4px; padding: 2px 6px; white-space: nowrap; cursor: pointer; }
.sv-node:hover { background: #F1F7F8; }
.sv-node.is-on { background: var(--amber-bg); }
.sv-twisty { width: 14px; flex: none; color: var(--teal); text-align: center; font-size: 10px; }
.sv-node .ref { min-width: 26px; font-family: var(--mono); font-weight: 700; color: var(--teal); }
.sv-node .ty { margin-left: auto; padding-left: 8px; color: var(--ink-3); font-size: 11px; }
.sv-leaf { padding-left: 34px; font-family: var(--mono); font-size: 11.5px; color: var(--ink); position: relative; }
.sv-leaf::before { content: ""; position: absolute; left: 16px; top: 0; bottom: 50%; width: 10px; border-left: 1px solid var(--teal-line); border-bottom: 1px solid var(--teal-line); }
.sv-leaf .on { margin-left: 8px; color: var(--ink-3); font-family: var(--font); font-size: 11px; }
.sv-def-lines { margin: 0; padding: 6px 8px; max-height: 50vh; overflow: auto; font: 11px/1.45 var(--mono); color: var(--ink); white-space: pre; }
.sv-dim { color: var(--ink-3); }

/* Design page: a sub-heading row per parameter block. */
.sv-grid tr.sv-sub td { padding: 3px 6px; background: var(--teal-bg); color: var(--teal); font-weight: 700; font-size: 11px; }

/* The beam's design parameters: a narrow window. */
.sv-win.is-narrow { width: 170px; }
.sv-win.is-narrow .sv-kv th { width: auto; padding-right: 4px; }
.sv-win.is-narrow .sv-kv td { padding-left: 4px; white-space: nowrap; }

.sv-ico { padding: 0 6px; }

/* Wide screens: the tools keep their width and the file name shortens first. */
@media (min-width: 1100px) { .sv-tools-wrap { flex: 1 0 auto; } }
/* Every window is as narrow as the beam design window. */
.sv-win .sv-kv th { width: auto; padding-right: 4px; white-space: nowrap; }
.sv-win .sv-kv td { padding-left: 4px; overflow-wrap: anywhere; }
.sv-win svg { max-width: 100%; height: auto; }

/* Toolbar arrows: when the tools do not fit (phones), an arrow at the edge shows more are a swipe away. */
.sv-tools-wrap { position: relative; display: flex; flex: 1; min-width: 0; }
.sv-tools-wrap .sv-tools { flex: 1; }
.sv-more { position: absolute; top: 0; bottom: 0; right: 0; z-index: 2; width: 28px; border: 0; padding: 0; background: linear-gradient(to right, rgba(240, 242, 243, 0), var(--bar) 45%); color: var(--teal); font-size: 24px; font-weight: 700; line-height: 1; text-align: right; padding-right: 4px; cursor: pointer; animation: sv-nudge 1.4s ease-in-out infinite; }
.sv-more.is-left { right: auto; left: 0; background: linear-gradient(to left, rgba(240, 242, 243, 0), var(--bar) 45%); text-align: left; padding: 0 0 0 4px; animation-direction: reverse; }
.sv-more[hidden] { display: none; }
@keyframes sv-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) { .sv-more { animation: none; } }

/* Enlarged section drawing. */
.sv-drawing svg { cursor: zoom-in; }
.sv-zoom { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(15, 30, 36, 0.55); }
.sv-zoom[hidden] { display: none; }
.sv-zoom-card { display: flex; flex-direction: column; width: min(900px, 100%); max-height: 100%; border: 1px solid var(--teal); background: #FFFFFF; box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.6); }
.sv-zoom-card .sv-win-bar { cursor: default; }
.sv-zoom-body { flex: 1; min-height: 0; overflow: hidden; padding: 12px; touch-action: none; cursor: grab; }
.sv-zoom-body:active { cursor: grabbing; }
.sv-zoom-body svg { display: block; width: 100%; height: auto; max-height: calc(100dvh - 120px); transform-origin: center; }
.sv-zoom-hint { margin: 0; padding: 4px 8px 6px; border-top: 1px solid #E3E7EA; font-size: 11px; color: var(--ink-3); text-align: center; }

/* The status-bar link after a minute: a line about the open model. */
#sv-ad-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sv-ad-short { display: none; }
.sv-ad.is-personal { flex: 0 1 auto; min-width: 0; animation: sv-ad-sheen 3.2s linear infinite, sv-ad-in 0.6s ease-out; }
@keyframes sv-ad-in { from { opacity: 0.2; } to { opacity: 1; } }