html{overflow-anchor:none}button:disabled{opacity:.35;cursor:not-allowed}.saved-frame,.module-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 0;border-bottom:1px solid var(--line)}.frame-actions{display:flex;flex-wrap:wrap;gap:8px}.frame-editor{margin:22px 0;padding:22px;border:1px solid var(--line);border-radius:16px;background:#faf8f4}.frame-layout{display:grid;grid-template-columns:minmax(230px,1fr) minmax(230px,1fr);gap:24px}.module-row label{display:block;font-size:14px}.module-row select{width:100%;max-width:310px;margin-top:8px;font-size:14px}.module-row>div{flex:1;min-width:0}.module-row .usb-choice{display:flex;gap:8px;align-items:center;margin-top:8px}.usb-choice input{width:auto}.module-row small{display:block;margin-top:6px}.preview-panel{position:sticky;top:20px;align-self:start;min-width:0}.frame-preview{display:flex;gap:5px;padding:10px;background:#e7e2d8;border:1px solid #bcb5a6;border-radius:10px;max-width:100%;align-items:center}.frame-preview.vertical{flex-direction:column;width:142px;margin:auto}.install-box{display:flex;align-items:center;justify-content:center;padding:4px;aspect-ratio:1;flex:1;min-width:0;background:white;border:2px solid transparent;border-radius:4px;overflow:hidden}.vertical .install-box{width:100%;flex:auto}.install-box.chosen{border-color:#666b40;box-shadow:0 0 0 2px #666b4033}.install-box span{font-size:12px;color:#555}.install-box small{display:block;font-size:12px}.install-box img{object-fit:fill;display:block;height:100%;min-width:0}.install-box img.full{width:100%}.install-box img.half{width:50%}.frame-error{color:#9b2929}.saved-room{margin:24px 0;padding:16px;border:1px solid var(--line)}.saved-room .frame-preview{max-width:500px}.saved-room .vertical{max-width:140px}.frame-editor h3{margin-top:8px}.frame-editor .note{margin-top:20px}.frame-editor .note p{font-size:16px}@media(max-width:760px){.frame-layout{display:flex;flex-direction:column}.preview-panel{order:-1;position:sticky;top:0;background:#faf8f4;z-index:2;padding:8px 0}.preview-panel .vertical{width:65px}.frame-editor{padding:12px}.saved-frame{align-items:flex-start;flex-direction:column}.install-box span,.install-box small{font-size:12px}.frame-actions .btn{padding:9px 12px}}
.allocation-panel{margin:16px 0;padding:14px;background:#f0eee5;border:1px solid var(--line);border-radius:10px;font-size:14px}.allocation-row{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--line)}.allocation-panel small{display:block;margin-top:10px}.allocation-error{color:#9b2929}.quota-hint{color:#4d5830;font-weight:650}.allocation-notice{padding:12px 16px;border-left:3px solid #777c4e;font-size:14px;background:#f0eee5}@media(max-width:760px){.preview-panel .allocation-panel{max-height:165px;overflow:auto}.allocation-row{font-size:14px}}
.slot-resolution p{margin:8px 0 12px}.slot-resolution-actions{display:flex;flex-wrap:wrap;gap:8px}.slot-resolution-actions .btn{white-space:normal;text-align:center}.slot-resolution small{display:block;margin-top:12px}.design-fix-notice p{margin:0 0 12px}.design-fix-link{display:inline-flex;align-items:center;justify-content:center;white-space:normal;text-align:left}
.summary-slot-repairs{margin:26px 0}.summary-slot-repairs>p{margin:14px 0 8px}
/* TRAJKOT: cobalt, clean white, warm terracotta and golden accents. */
:root{--cream:#f7f8fc;--paper:#fff;--ink:#191c27;--olive:#2045bd;--olive2:#365bd2;--line:#dce1ec;--red:#bd512b;--muted:#5b6475;--shadow:0 18px 55px #17295712}
body{background:#f7f8fc;font-size:16px}.sidebar{background:#fff;border-right:1px solid #dce1ec;overflow-y:auto;padding:28px 18px}.sidebar .logo{margin-left:10px}.brandline{font-size:12px;color:#2045bd;letter-spacing:.12em}.stepnav{width:100%;border:0;background:none;text-align:left;font:inherit;font-size:14px;border-radius:7px;padding:9px 10px;color:#47516a;cursor:pointer}.stepnav:hover:not(:disabled){background:#edf1ff}.stepnav:disabled{opacity:.48}.stepnav.active{background:#2045bd;color:#fff}.stepnav.active .stepnum{background:#f2c75c;color:#191c27;border-color:#f2c75c}.stepnum{font-size:12px;border-color:#b5bed3}.main{background:#f7f8fc}.panel{max-width:1100px}.topbar{border-bottom:1px solid #dce1ec;padding-bottom:20px;margin-bottom:32px}.kicker{font-size:12px;color:#2045bd}.draft{font-size:14px}.lead{color:#576175}.screen.active{animation:none}h1{font-size:clamp(36px,4vw,54px);color:#191c27}h2{font-size:23px;margin:32px 0 14px;letter-spacing:-.025em}.dot{color:#c5572c}.card,.field,.room,.summarybox{background:#fff;border-color:#dce1ec;border-radius:10px;box-shadow:0 3px 14px #1d305205}.card:hover{border-color:#2045bd}.card.selected{background:#edf2ff;border-color:#2045bd;box-shadow:0 0 0 3px #2045bd12}.card strong{font-size:16px}.card small,.help,.note,.field label,.summaryline{font-size:14px}.field input,.field select,select,textarea{border:1px solid #bcc6db;border-radius:7px;background:#fff;padding:10px 12px;color:#191c27}.field input[type=text],.field input:not([type]),textarea{width:100%;font:inherit}.field textarea{resize:vertical;min-height:85px}.field label:not(:first-child){margin-top:14px}.counter button,.mini-counter button{border-color:#bdc8e1;background:#f0f4ff;color:#2045bd;cursor:pointer}.counter button:hover,.mini-counter button:hover{background:#2045bd;color:white}.btn{border-radius:7px;font-size:14px}.btn.primary,.btn.olive{background:#2045bd;color:#fff}.btn.primary:hover,.btn.olive:hover{background:#17358f}.btn.secondary{border-color:#b5c0d6;background:#fff;color:#24365c}.btn.secondary:hover{border-color:#2045bd;background:#edf2ff}.rec{background:#edf2ff;border-color:#2045bd}.pill{background:#e8efff;color:#2045bd}.section-title{color:#2045bd;font-size:14px}.progressline{background:#e0e6f5}.frame-editor{background:#fff;border:1px solid #b7c5e6;border-top:4px solid #2045bd;border-radius:10px;box-shadow:0 10px 32px #17325c08}.preview-panel{background:#fff}.frame-preview{background:#edf1fa;border-color:#bdc9e2;border-radius:9px}.install-box.chosen{border-color:#2045bd;box-shadow:0 0 0 2px #2045bd24}.allocation-panel{background:#eef3ff;border-color:#cdd9f3}.allocation-notice{background:#fff3d3;border-color:#d79918;color:#594517}.quota-hint{color:#2045bd}.allocation-error,.frame-error{color:#ab3420}.saved-frame{background:white;padding:18px;margin:12px 0;border:1px solid #dce1ec;border-left:4px solid #2045bd;border-radius:8px}.saved-room{background:white;border-radius:10px}.frame-description{white-space:pre-wrap;overflow-wrap:anywhere;color:#5b6475;font-size:14px}.frame-editor .note{background:#fff3d3;padding:16px;border-radius:8px;color:#55451e}.frame-editor .note strong{color:#191c27}.frame-preview.vertical{width:calc(100% / var(--boxes));min-width:65px;max-width:100%}.vertical .install-box{flex:none}.saved-room .frame-preview.vertical{width:calc(300px / var(--boxes));max-width:100%}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #2045bd;outline-offset:3px}@media(max-width:900px){.sidebar{height:auto;overflow:visible;padding:16px}.sidebar .steps{display:flex;flex-direction:row;overflow-x:auto;max-width:100%;padding:5px 0}.sidebar .stepnav{width:auto;flex:none;font-size:14px}.sidebar .logo{margin-left:0}.main{padding:24px 16px 60px}.brandline{margin-bottom:8px}}@media(max-width:760px){.preview-panel{background:white;position:static}.preview-panel .frame-preview.vertical{width:calc(100% / var(--boxes));min-width:65px;max-width:100%}.preview-panel .allocation-panel{max-height:none;overflow:visible}.frame-editor{padding:14px}.frame-layout{gap:16px}.saved-frame{padding:14px}.topbar{gap:12px;align-items:flex-start}.draft{max-width:160px}.frame-actions{gap:8px}}
/* Framed layout and scene-inspired navigation. */
body{background:#f4f1ec}.app{width:calc(100% - 96px);max-width:1320px;margin:32px auto;min-height:calc(100vh - 64px);grid-template-columns:250px minmax(0,1fr);background:#fff;box-shadow:0 14px 55px #2822370b}.sidebar{background:radial-gradient(ellipse at 95% 12%,#8d3d2280,transparent 52%),linear-gradient(150deg,#28212a,#171d2c 65%,#152c47);border:0;color:#fff;top:24px;height:calc(100vh - 48px);padding:30px 18px}.sidebar .logo{filter:none}.sidebar .brandline{color:#f3cc6a;line-height:1.6}.steps{gap:8px}.stepnav{border:1px solid #ffffff42;border-radius:0;background:#14192450;color:#fff;padding:11px 10px}.stepnav:hover:not(:disabled){border-color:#f3cc6a;background:#ffffff12}.stepnav.active{background:#f3ca61;color:#191c27;border-color:#ffe497}.stepnav.active .stepnum{background:transparent;border-color:#746035;color:#191c27}.stepnum{border-radius:0;color:inherit;border-color:#ffffff60}.stepnav:disabled{opacity:.45}.main{background:#fff;padding:32px 36px 64px;min-width:0}.topbar{margin-bottom:35px}.panel{width:100%;max-width:980px}.kicker{color:#2344b4}.card,.field,.room,.summarybox,.frame-editor,.saved-frame,.saved-room,.btn,.counter button,.mini-counter button,.field input,.field select,select,textarea,.rec,.pill,.allocation-panel,.allocation-notice,.frame-editor .note,.socket-cell,.control-point,.cp-fn{border-radius:0}.card{box-shadow:none;border-color:#d9d8d6;padding:20px;text-align:left}.card.selected{background:#f4f6ff;border-color:#2344b4;box-shadow:inset 0 -3px #2344b4}.card:hover{transform:none;background:#f7f8fc}.function-card{min-height:175px}.function-icon{color:#2344b4;margin-bottom:20px}.function-icon svg{display:block;width:34px;height:34px}.function-card .tick{border-radius:0}.function-card.selected .function-icon{color:#2344b4}.btn.primary,.btn.olive{background:#2344b4}.btn.secondary{border-color:#aeb3bf;background:transparent}.btn.secondary:hover{background:#f3ca6133;border-color:#c29128}.field{box-shadow:none;background:#fafafa}.frame-editor{border-top:4px solid #c45d32;box-shadow:none}.saved-frame{border-left-color:#c45d32}.allocation-panel{background:#f5f7ff}.allocation-notice,.frame-editor .note{background:#fff4d3;border-color:#daa42d}.lead{color:#555c68}.frame-preview{border-radius:0;background:#f1f1f1}.install-box{border-radius:0}.module-art{display:block;position:relative;height:100%;min-width:0}.module-art.full{width:100%}.module-art.half{width:50%}.install-box .module-art img{height:100%;width:100%;object-fit:fill}.install-box .ip44-label{position:absolute;bottom:7%;left:50%;transform:translateX(-50%);font:700 clamp(8px,1vw,12px)/1.2 system-ui;background:#fff;padding:1px 3px;color:#20232b;white-space:nowrap}.blank-cover{display:block;width:88%;height:88%;margin:6%;border:1.5px solid #444;background:#fff}.frame-actions{align-items:center}@media(min-width:901px) and (max-width:1150px){.app{width:calc(100% - 48px);grid-template-columns:220px minmax(0,1fr)}.main{padding:28px 22px}.rooms,.function-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.frame-layout{grid-template-columns:1fr}.preview-panel{position:static}}@media(max-width:900px){.app{width:calc(100% - 32px);margin:16px auto;display:block}.sidebar{height:auto;position:relative;top:0;padding:20px}.sidebar .steps{display:flex}.stepnav{padding:9px 12px}.main{padding:26px 22px}.function-card{min-height:140px}}@media(max-width:520px){.app{width:calc(100% - 20px);margin:10px auto}.main{padding:24px 14px}.sidebar{padding:18px 14px}.frame-editor{padding:12px}.topbar{flex-wrap:wrap}.function-grid{grid-template-columns:1fr}.card{padding:18px}.module-row{gap:8px}}
/* Picture catalogue and direct placement. */
.visual-workbench{display:grid;grid-template-columns:minmax(160px,1fr) minmax(220px,1.4fr) minmax(160px,1fr);gap:18px;align-items:start;margin:22px 0}.visual-workbench h4{margin:0 0 14px;font-size:18px}.sketch-catalog{min-width:0}.sketch-group{border-top:1px solid #dce1ec;padding:16px 0}.sketch-heading{display:grid;gap:6px;margin-bottom:12px;font-size:14px}.sketch-heading small{font-size:14px}.sketch-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.sketch-card{display:flex;flex-direction:column;align-items:center;gap:7px;background:white;border:1px solid #cbd1dc;padding:8px 5px;cursor:grab;min-width:0;color:#191c27;font:inherit}.sketch-card:hover:not(:disabled),.sketch-card.picked{border-color:#2344b4;box-shadow:inset 0 -3px #2344b4;background:#f4f6ff}.sketch-card:active{cursor:grabbing}.sketch-card:disabled{opacity:.45}.sketch-art{height:82px;width:82px;max-width:100%;display:flex;align-items:center;justify-content:center;pointer-events:none}.sketch-art img{width:100%;height:100%;object-fit:contain}.sketch-art.half{width:41px}.sketch-label{font-size:14px;line-height:1.35;overflow-wrap:anywhere}.sketch-card small{font-size:12px;color:#606777}.assembly-stage{position:sticky;top:16px;min-width:0;background:#f5f7fc;border:1px solid #dce1ec;padding:14px}.assembly-stage .frame-preview{padding:5px;gap:3px}.assembly-stage .frame-preview.vertical{width:calc(100% / var(--boxes));min-width:60px}.assembly-stage .install-box{position:relative;overflow:visible;cursor:pointer}.assembly-stage .install-box.drop-ready{border-color:#2344b4;background:#e5edff;box-shadow:0 0 0 3px #2344b444}.assembly-stage .install-box.drop-blocked{border-color:#ab3420;background:#fff0eb}.assembly-stage .module-art{align-self:stretch;height:auto;display:flex;align-items:center;cursor:grab}.assembly-stage .module-art img{width:100%;height:100%;object-fit:fill;pointer-events:none}.remove-art{position:absolute;top:-4px;right:-3px;border:1px solid #b9bfcd;background:white;color:#9b2929;width:24px;height:24px;line-height:20px;padding:0;z-index:1;cursor:pointer;font-size:20px}.picked-status{font-size:14px;color:#2344b4;min-height:38px}.box-legend{border-top:1px solid #dce1ec;padding:10px 0;display:grid;gap:5px;font-size:14px;line-height:1.5}.visual-workbench .install-box>span:not(.module-art){font-size:12px}.visual-workbench .install-box small{font-size:12px}.visual-workbench .blank-cover{aspect-ratio:1;height:auto}.frame-editor:has(.visual-workbench){padding:18px}.visual-workbench .module-art.half .blank-cover{height:88%}@media(max-width:1200px){.visual-workbench{grid-template-columns:minmax(130px,1fr) minmax(170px,1.2fr) minmax(130px,1fr);gap:10px}.sketch-grid{grid-template-columns:1fr}.assembly-stage{padding:10px}}@media(max-width:640px){.visual-workbench{grid-template-columns:1fr 1fr;gap:12px}.assembly-stage{grid-column:1/-1;grid-row:1;position:static}.sketch-grid{grid-template-columns:1fr}.sketch-catalog{grid-row:2}.assembly-stage .frame-preview{max-width:100%}.sketch-label{font-size:14px}.frame-editor:has(.visual-workbench){padding:10px}.remove-art{width:28px;height:28px}}
