:root{--black:#111;--deep:#202020;--charcoal:#292929;--white:#fff;--paper:#f3f3f0;--line:#d5d5cf;--muted:#666660;--orange:#f36c21;--orange-dark:#d8530d;--panel:300px;--details:340px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#dadad5;color:var(--black);font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.45}
button,input,textarea{font:inherit}
button,a{touch-action:manipulation}
a{color:inherit;text-decoration:none}
button{cursor:pointer}
.skip-link{position:fixed;z-index:100;top:.5rem;left:.5rem;padding:.7rem 1rem;background:var(--orange);font-weight:900;transform:translateY(-150%)}
.skip-link:focus{transform:none}
:focus-visible{outline:3px solid var(--orange);outline-offset:2px}

.planner-header{position:relative;z-index:20;display:grid;grid-template-columns:190px 1fr auto;min-height:92px;background:var(--white);border-bottom:1px solid var(--line);align-items:stretch}
.planner-brand{display:grid;padding:.35rem .9rem;background:#252525;place-items:center;border-right:1px solid #3b3b3b;transition:background .2s}
.planner-brand:hover{background:#1a1a1a}
.planner-brand img{width:auto;height:54px;max-height:54px;object-fit:contain}
.planner-title{display:flex;padding:.8rem 1.5rem;flex-direction:column;justify-content:center}
.planner-title span{color:var(--orange-dark);font-size:.7rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.planner-title h1{margin:.12rem 0 0;font-size:clamp(1.45rem,2vw,2.2rem);letter-spacing:-.04em;line-height:1}
.planner-title h1 em{display:inline-block;margin-left:.45rem;padding:.25rem .42rem;background:var(--orange);color:var(--black);font-size:.58rem;font-style:normal;letter-spacing:.08em;line-height:1;text-transform:uppercase;vertical-align:.35em}
.header-links{display:flex;align-items:stretch}
.header-links a{display:grid;padding:0 1.4rem;border-left:1px solid var(--line);place-items:center;font-size:.78rem;font-weight:900;text-transform:uppercase;transition:all .18s ease}
.header-links a:hover{background:var(--black);color:var(--white)}
.header-links .header-home-btn{background:#1a1a1a;color:var(--white);border-color:#333}
.header-links .header-home-btn:hover{background:var(--orange);color:var(--black)}
.header-links .header-cta{background:var(--orange);color:var(--black)}
.header-links .header-cta:hover{background:var(--black);color:var(--white)}

.process-strip{display:grid;grid-template-columns:repeat(3,minmax(190px,1fr)) minmax(260px,.9fr);min-height:72px;background:var(--black);color:var(--white)}
.process-strip>div{display:flex;padding:.85rem 1.2rem;border-right:1px solid #3b3b3b;align-items:center;gap:.8rem}
.process-strip b{display:grid;width:32px;height:32px;border:1px solid #666;border-radius:50%;place-items:center;color:#aaa;font-size:.76rem}
.process-strip .is-active b{border-color:var(--orange);background:var(--orange);color:var(--black)}
.process-strip span{display:flex;flex-direction:column;color:#aaa;font-size:.7rem}
.process-strip strong{color:var(--white);font-size:.78rem;text-transform:uppercase;letter-spacing:.05em}
.process-strip p{align-self:center;margin:0;padding:0 1.5rem;color:#aaa;font-size:.75rem}
.trial-notice{display:flex;min-height:54px;padding:.7rem 1.25rem;border-bottom:1px solid #c75417;background:#ffe6d8;align-items:center;gap:1rem}
.trial-notice strong{flex:0 0 auto;color:#8c3407;font-size:.75rem;letter-spacing:.07em;text-transform:uppercase}
.trial-notice span{color:#4f2b18;font-size:.76rem;font-weight:700}

.planner-app{display:grid;grid-template-columns:var(--panel) minmax(520px,1fr) var(--details);height:calc(100vh - 218px);min-height:700px;background:#dcdcd7}
.side-panel{background:var(--white);overflow-y:auto;overscroll-behavior:contain}
.tools-panel{border-right:1px solid var(--line)}
.details-panel{border-left:1px solid var(--line)}
.side-panel section{padding:1.35rem;border-bottom:1px solid var(--line)}
.panel-heading{display:flex;align-items:center;gap:.65rem;margin-bottom:1.1rem}
.panel-heading>span{color:var(--orange-dark);font-size:.68rem;font-weight:900;letter-spacing:.12em}
.panel-heading h2{margin:0;font-size:1rem;letter-spacing:-.02em;text-transform:uppercase}
.panel-note,.privacy-note{margin:.85rem 0 0;color:var(--muted);font-size:.72rem;line-height:1.45}

.room-form,.item-form,.client-form{display:grid;gap:.75rem}
.room-form label,.item-form label,.client-form label{display:grid;color:#3f3f3b;font-size:.72rem;font-weight:800;gap:.35rem}
.room-form label{grid-template-columns:1fr auto;align-items:center}
.room-form label>span,.item-form label>span{display:flex;align-items:center;gap:.35rem;color:#777;font-weight:700}
input,textarea{width:100%;border:1px solid var(--line);border-radius:0;background:var(--white);color:var(--black)}
input{height:40px;padding:.45rem .55rem}
textarea{padding:.6rem;resize:vertical}
.room-form input{width:82px;text-align:right}
.primary-action,.handoff-action{min-height:46px;border:0;background:var(--orange);color:var(--black);font-size:.76rem;font-weight:900;text-transform:uppercase;cursor:pointer;transition:all .18s ease}
.primary-action:hover,.handoff-action:hover{background:var(--black);color:var(--white)}

.tool-grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.tool-grid button{display:flex;min-height:104px;padding:.8rem .55rem;border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--white);align-items:center;justify-content:center;flex-direction:column;cursor:pointer;transition:all .18s ease}
.tool-grid button:hover,.tool-grid button:focus-visible{position:relative;z-index:1;background:var(--black);color:var(--white)}
.tool-grid button span{margin-top:.45rem;font-size:.72rem;font-weight:900}
.tool-grid button small{color:#777;font-size:.62rem}
.tool-grid button:hover small{color:#bbb}
.tool-icon{position:relative;display:block;width:34px;height:27px;border:2px solid currentColor;color:var(--orange-dark)}
.door-icon{border-width:0 0 2px 2px;border-radius:0 0 0 100%}
.window-icon:after{position:absolute;top:50%;right:3px;left:3px;border-top:2px solid currentColor;content:""}
.wall-icon{height:10px;background:currentColor}
.shaft-icon{background:repeating-linear-gradient(45deg,transparent 0 4px,currentColor 4px 6px)}
.shower-icon:before,.shower-icon:after{position:absolute;top:50%;left:50%;width:38px;border-top:1px solid currentColor;content:"";transform:translate(-50%,-50%) rotate(38deg)}
.shower-icon:after{transform:translate(-50%,-50%) rotate(-38deg)}
.bath-icon{border-radius:13px}
.bath-icon:after{position:absolute;inset:4px;border:1px solid currentColor;border-radius:9px;content:""}
.toilet-icon{width:24px;border-radius:45% 45% 40% 40%}
.sink-icon{border-radius:50%}
.sink-icon:after{position:absolute;top:5px;left:50%;width:4px;height:4px;border-radius:50%;background:currentColor;content:"";transform:translateX(-50%)}
.cabinet-icon{background:linear-gradient(90deg,transparent 49%,currentColor 49% 53%,transparent 53%)}
.heater-icon{background:repeating-linear-gradient(90deg,transparent 0 4px,currentColor 4px 6px)}

.drawing-area{display:grid;min-width:0;grid-template-rows:auto minmax(0,1fr) auto;background:#dcdcd7}
.canvas-toolbar{display:flex;min-height:50px;padding:0 .75rem;border-bottom:1px solid #bdbdb7;background:var(--white);align-items:center;justify-content:space-between}
.history-actions,.view-actions{display:flex;align-items:center;gap:.4rem}
.canvas-toolbar button{min-width:38px;height:34px;padding:0 .7rem;border:1px solid var(--line);background:var(--white);font-weight:900;cursor:pointer}
.canvas-toolbar button:hover{background:var(--orange);border-color:var(--orange)}
.canvas-toolbar button:disabled{opacity:.35;cursor:not-allowed}
.toolbar-file-btn{display:inline-flex;align-items:center;justify-content:center;height:34px;padding:0 .75rem;border:1px solid #111;background:var(--black);color:var(--white);font-size:.7rem;font-weight:900;cursor:pointer;transition:all .18s ease}
.toolbar-file-btn:hover{background:var(--orange);color:var(--black);border-color:var(--orange)}
.toolbar-tool-btn{display:inline-flex;align-items:center;justify-content:center;height:34px;padding:0 .75rem;border:1px solid var(--line);background:#fff;color:var(--black);font-size:.7rem;font-weight:900;cursor:pointer;transition:all .18s ease}
.toolbar-tool-btn:hover,.toolbar-tool-btn.is-active{background:var(--orange);color:var(--black);border-color:var(--orange)}
.pan-hint{display:inline-flex;align-items:center;gap:.3rem;padding:0 .5rem;color:#777;font-size:.68rem;font-weight:700}
.snap-control{display:flex;margin-right:.5rem;align-items:center;gap:.4rem;color:#555;font-size:.72rem;font-weight:800;cursor:pointer}
.snap-control input{width:16px;height:16px;accent-color:var(--orange)}
#zoom-value{min-width:50px;text-align:center;font-size:.72rem;font-weight:900}
.canvas-shell{position:relative;min-height:0;margin:1rem;background:#e7e7e2;box-shadow:0 5px 22px rgba(0,0,0,.11);overflow:hidden}
#planner-canvas{display:block;width:100%;height:100%;background:#ededE8;cursor:default;touch-action:none}
#planner-canvas.is-dragging{cursor:grabbing}
.canvas-tip{position:absolute;top:1rem;left:50%;display:flex;padding:.65rem .9rem;background:rgba(17,17,17,.9);color:var(--white);align-items:center;gap:.65rem;pointer-events:none;transform:translateX(-50%);transition:opacity .2s}
.canvas-tip strong{font-size:.74rem}.canvas-tip span{color:#bbb;font-size:.7rem}
.canvas-tip.is-hidden{opacity:0}
.canvas-drop-hint{position:absolute;inset:0;background:rgba(243,108,33,.92);color:var(--white);display:none;place-items:center;z-index:30;pointer-events:none;font-weight:900;font-size:1.15rem;letter-spacing:.05em;text-transform:uppercase;backdrop-filter:blur(3px)}
.canvas-shell.is-drag-over .canvas-drop-hint{display:grid}
.canvas-status{display:flex;min-height:36px;padding:0 1rem;border-top:1px solid #c4c4be;background:var(--white);align-items:center;justify-content:space-between;color:#666;font-size:.68rem;font-weight:700}
#save-status{color:#34713f}

.empty-selection{padding:1rem;background:var(--paper);color:var(--muted);font-size:.75rem}
.field-pair{display:grid;grid-template-columns:1fr 1fr;gap:.65rem}
.item-form input{height:38px}
.item-form label>span input{min-width:0;text-align:right}
.item-actions{display:grid;grid-template-columns:1fr 1fr;gap:.45rem;margin-top:.3rem}
.item-actions button,.project-actions button,.file-button{display:grid;min-height:40px;padding:.55rem .65rem;border:1px solid var(--line);background:var(--white);place-items:center;font-size:.68rem;font-weight:900;text-align:center;cursor:pointer}
.item-actions button:hover,.project-actions button:hover,.file-button:hover{background:var(--black);color:var(--white)}
.item-actions .danger-action{grid-column:1/3;border-color:#d6a59f;color:#9a2d20}

.collaboration-section>p:not(.privacy-note){margin:-.3rem 0 1rem;color:var(--muted);font-size:.76rem}
.client-form{gap:.65rem}
.client-form .is-invalid{border-color:#b52b1d;box-shadow:0 0 0 1px #b52b1d}
.captcha-box{margin-top:.35rem;padding:.75rem .85rem;background:#f5f3ec;border:1px solid #ddd7c9;border-left:3px solid var(--orange)}
.captcha-box label{display:grid;gap:.45rem;color:#2b2b28;font-size:.72rem;font-weight:800}
.captcha-label-text{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap}
.captcha-icon{color:var(--orange-dark);flex-shrink:0}
.captcha-label-text strong{padding:.15rem .45rem;border:1px solid #d0c8b8;background:#fff;color:#111;font-family:monospace;font-size:.84rem;letter-spacing:.03em}
.captcha-input-row{display:grid;grid-template-columns:1fr 40px;gap:.4rem}
.captcha-refresh-btn{display:flex;height:40px;border:1px solid var(--line);background:#fff;color:#222;align-items:center;justify-content:center;font-size:1.15rem;font-weight:900;cursor:pointer;transition:all .15s ease}
.captcha-refresh-btn:hover{background:var(--black);color:var(--orange);border-color:var(--black)}
.project-actions{display:grid;grid-template-columns:1fr 1fr;gap:.45rem;margin-top:1rem}
.handoff-action{display:flex;width:100%;margin-top:1rem;padding:.8rem 1rem;align-items:center;justify-content:space-between;text-align:left}
.handoff-action span{font-size:1.2rem}

.planner-footer{display:grid;grid-template-columns:1.2fr .8fr;gap:2rem;padding:1.3rem max(1.3rem,calc((100vw - 1500px)/2));background:var(--black);color:#bbb;font-size:.75rem}
.planner-footer p{max-width:820px;margin:0}.planner-footer strong{color:var(--orange)}
.planner-footer>div{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.4rem 1.2rem}
.planner-footer a{color:var(--white);font-weight:800}

.handoff-dialog{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:min(590px,calc(100% - 2rem));padding:clamp(1.5rem,5vw,3rem);border:1px solid #333;background:var(--white);color:var(--black);box-shadow:0 20px 60px rgba(0,0,0,.6);z-index:9999}
.handoff-dialog::backdrop{background:rgba(0,0,0,.8);backdrop-filter:blur(4px)}
.dialog-close{position:absolute;top:.7rem;right:.7rem;width:42px;height:42px;border:0;background:var(--black);color:var(--white);font-size:1.5rem;cursor:pointer}
.dialog-close:hover{background:var(--orange);color:var(--black)}
.dialog-kicker{margin:0;color:var(--orange-dark);font-size:.7rem;font-weight:900;letter-spacing:.13em;text-transform:uppercase}
.handoff-dialog h2{margin:.6rem 0 1.2rem;font-size:clamp(1.8rem,4vw,2.6rem);letter-spacing:-.05em;line-height:1}
.handoff-dialog ol{padding-left:1.3rem;color:#444;font-size:.84rem;line-height:1.5}.handoff-dialog li{padding:.35rem 0}
.dialog-actions{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:1.5rem}
.dialog-actions a,.dialog-actions button{display:grid;min-height:48px;padding:.7rem 1.2rem;border:1px solid var(--black);background:var(--white);place-items:center;font-size:.75rem;font-weight:900;text-transform:uppercase;cursor:pointer}
.dialog-actions .dialog-primary{border-color:var(--orange);background:var(--orange);color:var(--black)}
.dialog-actions .dialog-primary:hover{background:var(--black);color:var(--white);border-color:var(--black)}
#dialog-status{min-height:1.4rem;color:#1e7e34;font-size:.82rem;font-weight:bold;margin-top:.6rem}

@media(max-width:1180px){
  :root{--panel:270px;--details:310px}
  .planner-app{grid-template-columns:var(--panel) minmax(460px,1fr) var(--details)}
  .process-strip{grid-template-columns:repeat(3,1fr)}
  .process-strip>p{display:none}
}
@media(max-width:980px){
  .planner-header{grid-template-columns:150px 1fr}.planner-brand{grid-row:1}.planner-title{grid-row:1}.header-links{grid-column:1/3;border-top:1px solid var(--line)}
  .header-links a{min-height:48px;flex:1}
  .process-strip{overflow-x:auto}.process-strip>div{min-width:210px}
  .planner-app{display:flex;height:auto;min-height:0;flex-direction:column}
  .side-panel{overflow:visible}.tools-panel{order:1;border-right:0}.drawing-area{order:2;height:680px}.details-panel{order:3;border-left:0}
  .side-panel section{padding:1.3rem}.tool-grid{grid-template-columns:repeat(4,1fr)}
  .collaboration-section{max-width:none}
  .planner-footer{grid-template-columns:1fr}.planner-footer>div{justify-content:flex-start}
}
@media(max-width:640px){
  .planner-header{grid-template-columns:118px 1fr;min-height:78px}.planner-brand{padding:.3rem}.planner-brand img{width:auto;height:42px}.planner-title{padding:.6rem .8rem}.planner-title span{font-size:.57rem}.planner-title h1{font-size:1.18rem}
  .header-links a{padding:0 .7rem;font-size:.66rem}
  .process-strip{min-height:60px}.process-strip>div{min-width:180px;padding:.65rem .8rem}
  .trial-notice{align-items:flex-start;gap:.3rem;flex-direction:column}
  .tool-grid{grid-template-columns:repeat(2,1fr)}
  .drawing-area{height:590px}.canvas-shell{margin:.5rem}.canvas-toolbar{align-items:flex-start;gap:.5rem;padding:.45rem;flex-direction:column}.history-actions,.view-actions{width:100%}.view-actions{flex-wrap:wrap}.snap-control{margin-right:auto}
  .canvas-tip{top:.6rem;width:calc(100% - 1.2rem);justify-content:center;text-align:center}.canvas-tip span{display:none}
  .canvas-status{padding:.35rem .6rem;align-items:flex-start;gap:.25rem;flex-direction:column}
  .project-actions{grid-template-columns:1fr}
}

@media print{
  body{background:#fff}.planner-header,.process-strip,.tools-panel,.details-panel,.canvas-toolbar,.canvas-status,.planner-footer{display:none!important}
  .planner-app{display:block;height:auto;min-height:0}.drawing-area{height:auto}.canvas-shell{width:100%;height:720px;margin:0;box-shadow:none}.canvas-tip{display:none}
}