/* Plan to 3D Walkthrough. Loaded only on /plan-walkthrough/. */
#pw { color: #e2e8f0; }
#pw .pw-btn, #pw .pw-file, #pw .pw-stage, #pw .pw-field { scroll-margin-top: 8.5rem; }
#pw * { box-sizing: border-box; }
#pw .pw-steps { display: flex; gap: 0.4rem; overflow-x: auto; margin: 0 0 0.9rem; padding: 0; list-style: none; }
#pw .pw-steps li { flex: 0 0 auto; min-height: 2.4rem; display: flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.7rem; border-radius: 999px; border: 1px solid rgba(255,255,255,0.12); color: #cbd5e1; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; }
#pw .pw-steps li[aria-current="step"] { border-color: #4ade80; color: #fff; background: #14532d; }
#pw .pw-steps b { display: inline-flex; width: 1.25rem; height: 1.25rem; align-items: center; justify-content: center; border-radius: 999px; background: rgba(255,255,255,0.08); font-size: 0.68rem; }
#pw .pw-note { border: 1px solid rgba(251,191,36,0.45); background: rgba(120,53,15,0.35); color: #fde68a; border-radius: 0.75rem; padding: 0.75rem 0.9rem; font-size: 0.9rem; line-height: 1.45; margin: 0 0 0.9rem; }
#pw .pw-bar, #pw .pw-sub { display: flex; gap: 0.4rem; overflow-x: auto; padding-bottom: 0.35rem; margin-bottom: 0.45rem; align-items: center; }
#pw .pw-btn, #pw .pw-file { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem; min-height: 2.75rem; padding: 0.4rem 0.75rem; border-radius: 0.5rem; border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.04); color: #e2e8f0; font: inherit; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; }
#pw .pw-btn[aria-pressed="true"] { background: #166534; border-color: #4ade80; color: #fff; }
#pw .pw-btn:hover, #pw .pw-file:hover { border-color: #4ade80; color: #4ade80; }
#pw .pw-btn:disabled { opacity: 0.4; cursor: not-allowed; }
#pw .pw-btn.pw-go { background: #166534; border-color: #4ade80; color: #fff; }
#pw .pw-btn.pw-go:hover { background: #15803d; color: #fff; }
#pw .pw-file input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
#pw select, #pw input[type="number"], #pw input[type="text"], #pw input[type="range"] { background: #1a1a1a; color: #e2e8f0; border: 1px solid rgba(255,255,255,0.16); border-radius: 0.45rem; min-height: 2.75rem; padding: 0.35rem 0.55rem; font: inherit; font-size: 0.85rem; color-scheme: dark; }
#pw input[type="range"] { padding: 0; min-width: 8rem; }
#pw label.pw-field { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #94a3b8; flex: 0 0 auto; }
#pw .pw-stage { position: relative; height: min(72vh, 42rem); min-height: 22rem; border-radius: 1rem; overflow: hidden; border: 1px solid rgba(255,255,255,0.1); background: #f4f0e8; touch-action: none; }
#pw-plan, #pw-gl { display: block; width: 100%; height: 100%; touch-action: none; }
#pw-view3d { position: absolute; inset: 0; background: #e6e1d6; }
#pw-view3d[hidden], #pw-joy[hidden], #pw-scalebox[hidden], #pw-review[hidden], #pw-walkhint[hidden], #pw-3d-loading[hidden], #pw-3d-error[hidden], #pw-room-wrap[hidden], #pw-width-wrap[hidden], #pw-scale-note[hidden] { display: none !important; }
#pw-3dbar { position: absolute; top: 0.5rem; left: 0.5rem; right: 0.5rem; display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; z-index: 4; }
#pw-3dbar .pw-btn, #pw-3dbar select, #pw-3dbar input { background: rgba(15,23,42,0.82); }
#pw-walkhint { position: absolute; left: 50%; bottom: 0.6rem; transform: translateX(-50%); margin: 0; max-width: 22rem; text-align: center; color: #0f172a; background: rgba(255,255,255,0.82); border-radius: 999px; padding: 0.35rem 0.7rem; font-size: 0.75rem; font-weight: 700; pointer-events: none; z-index: 4; }
#pw-3d-loading, #pw-3d-error { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 1rem; text-align: center; color: #334155; font-weight: 700; z-index: 3; }
#pw-3d-error { color: #7f1d1d; }
#pw-joy { position: absolute; z-index: 5; left: 0.8rem; bottom: calc(0.8rem + env(safe-area-inset-bottom)); width: 7.5rem; height: 7.5rem; border-radius: 999px; background: rgba(15,23,42,0.28); border: 2px solid rgba(15,23,42,0.55); touch-action: none; }
#pw-joy-knob { position: absolute; width: 3.2rem; height: 3.2rem; border-radius: 999px; background: #0f172a; left: 50%; top: 50%; transform: translate(-50%, -50%); }
#pw-scalebox { position: absolute; z-index: 6; left: 0.6rem; right: 0.6rem; bottom: 0.6rem; background: #0f172a; color: #e2e8f0; border-radius: 0.8rem; padding: 0.75rem; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: end; }
#pw-scale-note { margin: 0.55rem 0 0; color: #fcd34d; font-size: 0.8rem; }
#pw-review { margin: 0.4rem 0 0.7rem; }
#pw-thumbs { display: flex; gap: 0.4rem; overflow-x: auto; padding-bottom: 0.3rem; }
#pw-thumbs button { flex: 0 0 auto; border: 2px solid transparent; background: #111; padding: 0.15rem; border-radius: 0.4rem; min-height: 2.75rem; }
#pw-thumbs button[aria-pressed="true"] { border-color: #4ade80; }
#pw-thumbs img { display: block; height: 4.5rem; width: auto; }
#pw-status { min-height: 1.5rem; margin: 0.7rem 0; color: #cbd5e1; font-size: 0.95rem; }
#pw .pw-help { color: #94a3b8; font-size: 0.8rem; line-height: 1.45; margin: 0.2rem 0 0.8rem; }
#pw :focus-visible { outline: 2px solid #4ade80; outline-offset: 2px; }
@media (max-width: 640px) {
  #pw .pw-stage { height: 68vh; min-height: 20rem; }
  #pw .pw-btn, #pw .pw-file, #pw .pw-stage, #pw .pw-field { scroll-margin-top: 5rem; }
  #pw-3dbar { font-size: 0.7rem; }
}