:root{font:13px Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:#2a363d;background:#f6f5f2}*{box-sizing:border-box}body{margin:0;min-height:100dvh}button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #bf9870;outline-offset:2px}
/* Login mirrors the main Oaklife two-column authentication layout. */
.client-login-screen{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(440px,.85fr);min-height:100dvh}.login-showcase{background:#222d34;color:#fff;padding:clamp(26px,4vw,62px);position:relative;display:flex;flex-direction:column}.brand{display:flex;gap:12px;align-items:center;letter-spacing:.1em}.brand strong{display:block;font-size:19px}.brand span{display:block;font-size:9px;letter-spacing:.16em;color:#c2b8ae;margin-top:5px}.showcase-center{max-width:680px;margin:auto 0}.eyebrow,.kicker{font-size:10px;letter-spacing:.16em;color:#c2a47f;font-weight:750}.login-drawing svg{width:min(100%,540px);height:auto;margin:25px 0}.showcase-center h1{font-size:clamp(34px,4vw,58px);letter-spacing:-.045em;line-height:1.13;margin:0 0 18px}.showcase-center em{font-style:normal;color:#d0aa80}.showcase-center p{color:#c5cdd0;max-width:430px;line-height:1.7;font-size:13px}.showcase-foot{font-size:10px;letter-spacing:.14em;color:#92a4a8;margin-top:auto}.login-panel{background:#fbfbf9;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:50px;position:relative}.login-inner{width:min(100%,410px)}.login-inner h2{font-size:36px;letter-spacing:-.05em;margin:15px 0 8px}.intro{line-height:1.7;color:#7d898b;font-size:13px;margin-bottom:36px}.field{margin-bottom:20px}.field label{display:block;color:#455259;font-size:12px;font-weight:650;margin-bottom:9px}.field input{width:100%;height:48px;border:1px solid #d9d9d4;color:#29343a;border-radius:8px;padding:0 14px;background:white}.field input:focus{outline:2px solid #d9b58f;outline-offset:1px}.pin-wrap{position:relative}.pin-wrap input{padding-right:80px}.pin-wrap button{position:absolute;right:7px;top:7px;border:0;background:transparent;color:#806e5e;padding:8px 10px}.submit{height:49px;border:0;border-radius:8px;background:#28363e;color:white;width:100%;font-weight:650;margin-top:12px;display:flex;justify-content:center;align-items:center;gap:12px}.submit:hover{background:#40505a}.security-note{color:#899497;font-size:11px;margin-top:28px;line-height:1.65}.login-footer{position:absolute;bottom:24px;font-size:10px;color:#a1a7a6}.error{border:1px solid #e2b9b2;border-radius:9px;background:#fff0ed;color:#913b32;padding:12px;margin-bottom:16px}
/* Read-only drawing studio: same visual hierarchy as the main app. */
.client-shell{display:flex;min-height:100dvh;height:100dvh;overflow:hidden}.client-sidebar{width:244px;flex:0 0 244px;background:#222a30;color:#edf0ee;padding:24px 17px;display:flex;flex-direction:column;gap:18px}.side-brand{display:flex;align-items:center;gap:10px;font-size:18px;letter-spacing:.075em;font-weight:750}.side-brand small{display:block;color:#bbaea0;font-size:8px;margin-top:6px;letter-spacing:.12em}.side-meta{border:1px solid #42505a;border-radius:8px;padding:15px;display:flex;flex-direction:column;gap:6px;overflow-wrap:anywhere}.side-meta small,.section-name{font-size:9px;color:#94a4ab;letter-spacing:.17em}.side-meta strong{font-size:16px}.side-meta span{font-size:10px;color:#c2a47f}.section-name{margin-top:13px}#roomList{overflow:auto;min-height:0;flex:1}#roomList button{width:100%;border:0;background:none;color:#d3dcde;text-align:left;border-radius:8px;padding:12px;margin-bottom:4px}#roomList button.active{background:#384954;color:#fff}#roomList button:hover{background:#35434b}.side-foot{border-top:1px solid #465058;padding-top:17px;font-size:11px;color:#acb8b9;line-height:1.7}.side-foot b{color:#e6e2da}.client-main{min-width:0;flex:1;display:flex;flex-direction:column}.client-header{background:white;border-bottom:1px solid #e5e5e1;padding:16px 25px;display:flex;align-items:center;justify-content:space-between}.client-header small,.client-inspector>small{font-size:9px;letter-spacing:.15em;color:#9b8c7a}.client-header h2{font-size:22px;margin:5px 0 0}.client-logout{padding:9px 15px;border:1px solid #d5d9d7;border-radius:7px;background:white}.client-tabs{display:flex;gap:20px;background:#fff;padding:0 23px;border-bottom:1px solid #e6e8e5;align-items:center}.client-tabs button{border:0;border-bottom:3px solid transparent;background:none;color:#79878b;font-weight:650;padding:13px 0}.client-tabs button.active{color:#35434d;border-bottom-color:#b08d66}.read-only{margin-left:auto;color:#8f826c;font-size:11px}.client-toolbar{display:flex;flex-wrap:wrap;align-items:end;gap:10px;padding:10px 16px;background:#fbfbfa;border-bottom:1px solid #e0e6e5}.client-toolbar label{font-size:10px;display:grid;gap:4px;color:#607077}.client-toolbar select{min-width:160px;max-width:220px;border:1px solid #dae1e1;border-radius:7px;padding:7px;background:#fff}.client-toolbar .spacer{flex:1}.client-toolbar button{background:#fff;border:1px solid #d7dcdb;border-radius:7px;padding:8px 12px;min-width:38px}.client-work{flex:1;display:flex;min-height:0}.client-canvas{flex:1;min-width:0;position:relative;background:#f8f9f7}#stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:none;user-select:none;cursor:grab}#stage svg{display:block;width:100%;height:100%;max-width:100%;max-height:100%;transform-origin:center}#stage:active{cursor:grabbing}#viewHint{position:absolute;bottom:6px;left:16px;font-size:11px;color:#738188;pointer-events:none}.client-inspector{width:259px;flex:0 0 259px;background:white;border-left:1px solid #dfe4dd;padding:22px 17px;overflow:auto}.client-inspector h3{font-size:18px;margin:10px 0}.inspector-subtitle{font-size:11px;color:#808e93;line-height:1.7}.element-count{color:#9c8b73;font-size:11px;margin:20px 0 10px;border-bottom:1px solid #e7eae9;padding-bottom:10px}.client-element{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid #eef0ef}.client-element strong{font-size:12px;font-weight:630}.client-element small{display:block;color:#919da0;font-size:10px;margin-top:4px;line-height:1.5}.element-dot{width:10px;height:10px;border-radius:3px;flex:0 0 10px;margin-top:3px}.hint-empty,.inspector-foot{font-size:11px;color:#91a0a5;line-height:1.6}.inspector-foot{margin-top:22px}.client-footer{display:flex;justify-content:space-between;background:white;border-top:1px solid #e5e6e4;padding:10px 18px;color:#899698;font-size:10px}
@media(max-width:1080px){.client-sidebar{width:182px;flex-basis:182px;padding:15px 9px}.client-inspector{width:215px;flex-basis:215px;padding:15px}.client-tabs{gap:10px}.read-only{display:none}}@media(max-width:780px){.client-login-screen{display:flex;flex-direction:column}.login-showcase{min-height:190px;padding:22px}.showcase-center{margin:35px 0 0}.login-drawing,.showcase-foot,.showcase-center p{display:none}.showcase-center h1{font-size:30px}.login-panel{padding:35px 24px 80px;flex:1}.client-shell{height:100dvh}.client-sidebar{display:none}.client-inspector{display:none}.client-tabs{overflow:auto;white-space:nowrap}.client-header{padding:12px}.client-toolbar{gap:6px}.client-toolbar select{min-width:130px}.client-footer span:first-child{display:none}}
/* Full GPU render in read-only client workspace */
#stage>.olm-webgl-layout{width:100%;height:100%;min-height:0;display:flex}
#stage .olm-webgl-canvas{flex:1;touch-action:none;width:100%;height:100%;min-height:0}
#stage .olm-webgl-title{font-size:10px;padding:9px 14px}
#stage .olm-webgl-stage{min-height:0}
#stage .olm-webgl-panel{display:none}
#stage .olm-webgl-status{padding:2px 10px}

/* Client-only WebGL visibility controls; never modify admin/project materials. */
.client-webgl-controls{display:flex;gap:12px;align-items:center;flex-wrap:wrap;min-width:0}
.client-webgl-controls[hidden]{display:none!important}
.client-webgl-controls label{display:flex;flex-direction:row;align-items:center;gap:5px;white-space:nowrap;background:#fff;border:1px solid #dce1df;border-radius:7px;padding:8px 10px;font-size:12px;color:#30434a;cursor:pointer}
.client-webgl-controls input{margin:0;accent-color:#85715a;width:16px;height:16px}
/* The above controls replace the embedded visibility switches in client mode. */
#stage .olm-webgl-actions [data-act=fronts],#stage .olm-webgl-actions [data-act=walls],#stage .olm-webgl-actions [data-act=guides]{display:none!important}
#stage .olm-webgl-title{display:flex;align-items:center;justify-content:space-between;background:#fff;padding:10px 14px;color:#33464b}
#stage .olm-render-modebar{display:flex;gap:9px;align-items:center;padding:7px 14px;background:#fff}
#stage .olm-webgl-actions{display:flex;flex-wrap:wrap;gap:8px;background:#fff;padding:8px 12px}
#stage .olm-webgl-actions button,#stage .olm-render-modebar button{padding:8px 10px;border:1px solid #d4d9d7;border-radius:6px;background:#fff;color:#33464b}
#stage .olm-render-modebar button.active{background:#33464b;color:#fff}
#stage .olm-webgl-stage{display:flex;flex-direction:column;width:100%;height:100%}
#stage .olm-webgl-canvas{display:block;flex:1;min-height:0}
@media(max-width:780px){.client-webgl-controls{order:3;width:100%;justify-content:center;gap:7px}.client-webgl-controls label{padding:6px 8px;font-size:11px}}
#stage.ruler-active,#stage.ruler-active:active{cursor:crosshair}
#rulerControls{display:flex;align-items:center;flex-wrap:wrap;gap:7px}
#rulerResult{font-size:11px;color:#8d442d;max-width:360px}
#rulerToggle[aria-pressed=true]{background:#33464b;color:white;border-color:#33464b}
#client3DControls{display:flex;align-items:center;gap:6px}
[hidden]{display:none!important}