/* ============================================================
   QWorks Roof Truss Design — model 3D (roof3d.js). Panel kaca terang di atas kanvas WebGL,
   aksen biru keluarga desain. Prefiks kelas: v3- (sama dengan Frame Design).
   ============================================================ */
.v3-host { position: relative; height: 420px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line, #E3E6E8); background: #EEF2F6; }
.v3-host.compact { height: 320px; }
.v3-root { position: absolute; inset: 0; overflow: hidden; font-size: 12px; line-height: 1.35; color: #1F2937; -webkit-user-select: none; user-select: none; }
.v3-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; touch-action: none; cursor: grab; }
.v3-canvas:active { cursor: grabbing; }
.v3-canvas:focus-visible { box-shadow: inset 0 0 0 2px var(--qw-family, #2F6FDB); }
.v3-panel { background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgba(17, 24, 39, .12); border-radius: 8px; box-shadow: 0 4px 14px rgba(16, 38, 43, .10); }
.v3-root button { font: inherit; color: inherit; cursor: pointer; }
.v3-tl { position: absolute; top: 8px; left: 8px; display: flex; flex-direction: column; gap: 6px; z-index: 2; max-width: calc(100% - 16px); }
.v3-seg { display: inline-flex; padding: 3px; gap: 2px; width: max-content; }
.v3-seg button { border: 0; background: transparent; padding: 5px 10px; border-radius: 5px; font-weight: 600; white-space: nowrap; }
.v3-seg button:hover { background: rgba(47, 111, 219, .08); }
.v3-seg button.on { background: var(--qw-family, #2F6FDB); color: #fff; }
.v3-ctx { padding: 4px; } .v3-ctx[hidden] { display: none; }
.v3-sel { font: inherit; font-size: 12px; padding: 4px 6px; max-width: 280px; border-radius: 5px; border: 1px solid #D5D9DD; background: #fff; }
.v3-tr { position: absolute; top: 8px; right: 8px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; z-index: 2; }
.v3-trow { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.v3-tog { padding: 5px 10px; font-weight: 600; white-space: nowrap; }
.v3-tog.on { color: var(--qw-family, #2F6FDB); box-shadow: inset 0 0 0 1.5px var(--qw-family, #2F6FDB); }
.v3-fsb { display: inline-grid; place-items: center; padding: 5px 7px; } .v3-fsb svg { width: 15px; height: 15px; display: block; }
.v3-fs-only { display: none; } .v3-isfs .v3-fs-only { display: inline; }
/* layar penuh: Fullscreen API, atau cadangan tetap selebar layar (Safari iPhone) */
.v3-host:fullscreen { width: 100vw; height: 100vh; border-radius: 0; border: 0; }
.v3-host:-webkit-full-screen { width: 100vw; height: 100vh; border-radius: 0; border: 0; }
.v3-host.v3-fs { position: fixed; inset: 0; z-index: 2000; width: 100vw; height: 100vh; height: 100dvh; border-radius: 0; border: 0; }
html.v3-fs-lock, html.v3-fs-lock body { overflow: hidden; }
.v3-root button:focus-visible, .v3-sel:focus-visible { outline: 2px solid var(--qw-family, #2F6FDB); outline-offset: 1px; }
.v3-card { width: 240px; padding: 8px 10px; } .v3-card[hidden] { display: none; }
.v3-card-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.v3-x { border: 0; background: transparent; font-size: 16px; line-height: 1; padding: 0 2px; }
.v3-card dl { margin: 0; } .v3-card dl > div { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; border-top: 1px solid #EEF0F2; }
.v3-card dt { color: #6B7280; } .v3-card dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.v3-legend { position: absolute; left: 8px; bottom: 26px; padding: 6px 10px; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; max-width: calc(100% - 16px); z-index: 2; }
.v3-legend b { font-weight: 600; margin-right: 2px; }
.v3-legend span { display: inline-flex; align-items: center; gap: 5px; } .v3-legend i { display: inline-block; width: 12px; height: 9px; border-radius: 2px; }
.v3-ramp { position: relative; width: 170px; height: 9px; } .v3-ramp span { position: absolute; inset: 0; border-radius: 2px; } .v3-ramp em { position: absolute; top: -3px; bottom: -3px; width: 2px; background: #111827; }
.v3-scale { position: relative; width: 170px; height: 13px; font-size: 10.5px; color: #6B7280; flex-basis: 100%; margin-left: 70px; }
.v3-scale span { position: absolute; top: 0; transform: translateX(-50%); } .v3-scale span:nth-child(1) { left: 0; transform: none; }
.v3-scale span:nth-child(2) { left: 75%; transform: translateX(-100%); } .v3-scale span:nth-child(3) { left: 83.33%; transform: none; padding-left: 3px; } .v3-scale span:nth-child(4) { display: none; }
.v3-hint { position: absolute; right: 8px; bottom: 6px; font-size: 10.5px; color: #6B7280; z-index: 1; }
.v3-empty, .v3-note { padding: 12px; color: #6B7280; font-size: 12.5px; }
.v3-fallback { background: #F8FAFC; } .v3-fallback svg { display: block; width: 100%; height: auto; }
.v3-host .v3-fallback { height: 100%; overflow: auto; }
@media (max-width: 640px) {
  .v3-host { height: 340px; } .v3-hint { display: none; } .v3-tr { top: auto; bottom: 8px; } .v3-legend { bottom: 50px; }
  .v3-card { width: 200px; }
}
html[data-theme="dark"] .v3-host { border-color: #334155; }