/* Furniture Fabric / Studio UI v0.7
   References: Mobbin Rive canvas, Programa project workspace, Airtable tables.
   Purely presentational: existing parametric engine remains unchanged. */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--ff-canvas:#f5f5f2;--ff-white:#fff;--ff-line:#e9e9e5;--ff-ink:#1d2423;--ff-mute:#818883;--ff-accent:#aa6747;--ff-dark:#171c1c;--ff-radius:14px;font-family:'DM Sans',-apple-system,BlinkMacSystemFont,Arial,sans-serif;-webkit-font-smoothing:antialiased}
*{scrollbar-color:#cacfc9 transparent;scrollbar-width:thin}
body{background:var(--ff-canvas);color:var(--ff-ink)}button{transition:background-color .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--ff-accent);outline-offset:2px}
/* ===== Workspace shell ===== */
.layout{background:var(--ff-canvas)}
.layout .rail{background:var(--ff-dark);color:#f4f5f1;width:228px;flex:0 0 228px;padding:26px 13px 18px;gap:0;border-right:1px solid #3b403e;position:sticky;top:0;height:100vh;min-height:0;overflow-y:auto}
.layout .logo{padding:0 11px 34px;gap:10px}
.layout .logo-symbol{border:0;background:#f2e9de;color:#322d28;height:37px;width:37px;min-width:37px;font-size:24px;font-family:Manrope,sans-serif;border-radius:10px;position:relative;letter-spacing:-3px}
.layout .logo-notch{color:var(--ff-accent)}
.layout .logo div{line-height:1.25;letter-spacing:1.4px;font-size:10px}
.layout .logo strong{font-size:15px;letter-spacing:.6px;font-weight:800}
.layout .back{color:#999f9d;margin:0 12px 28px;font-size:11px;display:flex;gap:6px;text-decoration:none}
.layout .back:hover{color:#fff}
.layout .side-label{font-size:9px;color:#6e7773;letter-spacing:1.65px;margin:0 12px 12px}
.layout .current{background:#272e2c;border-color:#353d39;margin-bottom:34px;padding:9px 10px;border-radius:10px}
.layout .project-thumbnail{height:35px;width:35px;flex:0 0 35px;display:grid;place-items:center;background:#99735e;border-radius:8px;color:#fff;font:700 17px Manrope,sans-serif}
.layout .current strong{font-size:12px;color:#f1f2ef}
.layout .current small{color:#969e99;font-size:10px}
.layout .current .arrow{float:right;margin-left:7px}
.layout .rail nav{gap:3px}
.layout .rail .tab{display:flex;align-items:center;gap:11px;color:#a1aaa6;white-space:nowrap;padding:11px 11px;min-height:44px;border-radius:9px;font-size:12px;line-height:1.35}
.layout .rail .tab:hover{background:#262d2a;color:#fff}
.layout .rail .tab.active{background:#f4f3ed;color:#222a26;font-weight:700}
.layout .nav-glyph{font:700 10px Manrope,Arial;display:grid;place-items:center;border:1px solid #444b46;border-radius:6px;width:28px;height:26px;color:#b6bdb9;flex:0 0 28px}
.layout .tab.active .nav-glyph{background:#dfc8b6;color:#67432f;border-color:#e3cfbe}
.layout .nav-copy{min-width:0;overflow:hidden;text-overflow:ellipsis}
.layout .nav-arrow{margin-left:auto;font-size:12px;opacity:0}
.layout .tab.active .nav-arrow{opacity:1;color:#8a7868}
.layout .side-footer{padding:20px 12px 0;border-top:1px solid #343d37;color:#adb3ae;font-size:11px;line-height:1.8}
.layout .side-footer small{color:#6f7a75}
.layout .online{background:#8dbb9e}
.layout .main{min-width:0;background:var(--ff-canvas)}
.layout .topbar{height:70px;background:#fff;border-color:#e9ebe8;padding:0 33px}
.layout .crumb{letter-spacing:1px;color:#9aa19e;font-size:10px}
.layout .crumb span{color:#d4d6d2}
.layout .crumb b{color:#535e58}
.layout .top-actions{gap:12px}
.layout .status{border:1px solid #e5e8e3;border-radius:30px;padding:8px 12px;font-size:10px;color:#677069;background:#fafbf9}
.layout .status-dot,.layout .live-dot{display:inline-block;width:7px;height:7px;background:#70a27f;border-radius:50%;margin-right:5px;vertical-align:middle;box-shadow:0 0 0 3px #70a27f1c}
.layout .white-button{background:#202928;color:white;border:1px solid #202928;padding:10px 16px;font-weight:700;font-size:11px;border-radius:8px}
.layout .white-button:hover{background:#383e38}
.layout .body{max-width:1850px;margin:0 auto;padding:31px 31px 25px}
.layout .heading{margin-bottom:26px;gap:16px;align-items:center}
.layout .eyebrow{font-size:10px;letter-spacing:1.5px;color:#a16d53;font-weight:700}
.layout .eyebrow-divider{color:#bcc0bb;margin:0 4px}
.layout .heading h1{font:800 clamp(28px,2.5vw,38px)/1.2 Manrope,Arial;margin:6px 0 5px;letter-spacing:-1.65px;color:#272b28}
.layout .heading h1 span{color:var(--ff-accent)}
.layout .heading p{font-size:12px;color:#8b928b;line-height:1.6}
.layout .heading-right{padding-left:17px;border-left:1px solid #d4d6d2}
.layout .heading-right span{font-size:9px;color:#888e86}
.layout .heading-right b{font:800 18px Manrope,Arial;color:#323a33;letter-spacing:-.6px}
.layout .heading-right small{font-size:11px;color:#9ea49e}
.layout .content{grid-template-columns:minmax(0,1fr) 322px;gap:16px}
.layout .work{gap:14px}
.layout .studio-card,.layout .panel,.layout .inspector,.layout .stat-row article,.layout .summary-card{border:1px solid #e6e8e3;border-radius:13px;box-shadow:0 1px 2px #1a251409}
.layout .studio-top{padding:19px 23px 16px}
.layout .studio-top h2{font:800 19px Manrope,Arial;color:#292f2a;letter-spacing:-.8px;margin-top:6px}
.layout .subtle-title{font-weight:500;color:#a6aba4}
.layout .small-badge{border-color:#e0e4df;background:#fafbf9;color:#7f8780;font-size:9px;letter-spacing:1px;border-radius:6px}
.layout .stage-toolbar{padding:0 22px 14px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.layout .dualview-toggle{max-width:415px;margin:0;background:#f1f2ef;border:1px solid #ebedea;padding:4px;flex:1;border-radius:9px}
.layout .dualview-toggle button{border-radius:7px;padding:9px 11px;font-size:11px;font-weight:700;color:#858d84}
.layout .dualview-toggle button.active{color:#313933;box-shadow:0 1px 4px #00000013}
.layout .stage-size{white-space:nowrap;font:700 10px 'DM Sans',Arial;letter-spacing:.4px;color:#a5aaa5}
.layout .canvas-shell{height:clamp(390px,49vw,625px);max-height:none;min-height:390px;background-color:#eceeeb;background-image:linear-gradient(#ffffff80 1px,transparent 1px),linear-gradient(90deg,#ffffff80 1px,transparent 1px),radial-gradient(ellipse at 55% 45%,#fcfcfa 2%,#e9eae5 90%);background-size:32px 32px,32px 32px,100% 100%;border-block:1px solid #ebece8}
.layout .view-chip{position:absolute;left:21px;top:20px;pointer-events:none;border:1px solid #e0e2df;border-radius:20px;padding:7px 11px;background:#fffefaed;color:#5c655d;letter-spacing:1px;font-size:9px;font-weight:700}
.layout .view-chip .live-dot{width:6px;height:6px}
.layout .canvas-tip{left:20px;bottom:18px;background:#ffffffbd;color:#727b73;padding:7px 10px;border:1px solid #e4e7e1;border-radius:7px;font-size:10px}
.layout .canvas-tip span{color:#babeb9;padding:0 4px}
.layout .canvas-actions{right:17px;top:17px;gap:6px}
.layout .canvas-actions button{border:1px solid #e5e7e2;background:#fffefaed;backdrop-filter:blur(8px);box-shadow:0 1px 3px #11111109;padding:8px 11px;color:#586159;font-size:10px;font-weight:700}
.layout .canvas-actions button:hover{background:#f6f3ee;color:#423a36}
.layout .canvas-corner{position:absolute;right:19px;bottom:19px;font:800 10px Manrope,Arial;color:#a1aaa2;letter-spacing:1px;pointer-events:none}
.layout .canvas-corner span{color:#c0c6be;margin-left:9px}
.layout .control-row{min-height:68px;background:#fff;padding:13px 22px;gap:12px}
.layout .control-title{font-size:9px;color:#969e96;font-weight:800;letter-spacing:1.2px;margin-right:auto}
.layout .control-row label{font-size:11px;color:#767d74}
.layout .control-row select{color:#3a443b;background:#f8f9f6;border-color:#e2e6df;border-radius:7px;padding:8px 9px;font-weight:700}
.layout .control-row input[type=range]{accent-color:var(--ff-accent);max-width:180px}
.layout .control-row strong{font-size:11px;color:#525c54}
.layout .stat-row{gap:9px}
.layout .stat-row article{padding:15px 18px}
.layout .stat-row span{font-size:9px;color:#9da49e;letter-spacing:1px}
.layout .stat-row strong{font:800 20px Manrope,Arial;letter-spacing:-.7px;color:#343c36}
.layout .summary-card{padding:20px 22px;background:#fff}
.layout .summary-card h3{font:800 15px Manrope,Arial;color:#2e352e;letter-spacing:-.3px;margin:5px 0}
.layout .summary-card p{font-size:11px;line-height:1.6;color:#8d968e}
.layout .action{background:#242d29;border-radius:8px;padding:11px 15px;font-size:11px}
.layout .action:hover{background:#424e43}
/* Inspector */
.layout .inspector{top:16px;max-height:calc(100vh - 32px);display:flex;flex-direction:column;overflow:hidden}
.layout .inspector>header{background:#fff;padding:21px 19px 15px;border-bottom:1px solid #ebeee8}
.layout .inspector h2{font:800 18px Manrope,Arial;letter-spacing:-.6px;margin:4px 0 0;display:flex;justify-content:space-between}
.layout .inspector h2 small{color:#a7aaa6;font-size:14px}
.layout .inspector header p{font-size:10px;line-height:1.6;color:#a1a79e;margin:7px 0 0}
.layout .settings{overflow:auto;max-height:none;min-height:0;padding:0;flex:1}
.layout .property-group{border-bottom:1px solid #eef0ed}
.layout .property-group summary{display:flex;align-items:center;gap:9px;cursor:pointer;list-style:none;padding:16px 18px;font-size:12px;font-weight:800;color:#343c35}
.layout .property-group summary::-webkit-details-marker{display:none}
.layout .property-group summary:after{content:'⌄';color:#888f87;font-size:15px;margin-left:2px;transition:transform .18s}
.layout .property-group[open] summary:after{transform:rotate(180deg)}
.layout .property-index{display:inline-grid;place-items:center;border-radius:6px;background:#f1f2ee;color:#9d7058;width:27px;height:25px;font-size:10px;font-weight:800}
.layout .property-group summary small{margin-left:auto;font-size:9px;color:#acb2ac;font-weight:500;white-space:nowrap}
.layout .property-content{padding:0 18px 19px}
.layout .fields{gap:12px 10px}
.layout .field>span{font-size:10px;color:#737b73;font-weight:700}
.layout .input-wrap{background:#fafbf8;border:1px solid #e1e5df;border-radius:7px;height:40px}
.layout .input-wrap:focus-within{border-color:#b17c5d;box-shadow:0 0 0 2px #b17c5d13}
.layout .input-wrap input{font-weight:800;color:#42463f;background:transparent;font-size:12px;font-variant-numeric:tabular-nums}
.layout .input-wrap small{color:#a6aaa5;font-size:10px}
.layout .tiny-note{font-size:10px;color:#909991;line-height:1.6;margin-top:14px}
.layout .swatches{margin:10px 0 17px;gap:7px}
.layout .swatch{padding:5px;border:1px solid #e6e8e3;border-radius:7px}
.layout .swatch.chosen{border-color:#a66f4f;box-shadow:0 0 0 1px #a66f4f}
.layout .swatch>span{height:27px}
.layout .swatch small{font-size:9px;color:#7e857b;margin-top:6px}
.layout .bottom-panel{background:#fff;border-top:1px solid #e9ede8;margin:0;padding:14px;gap:8px}
.layout .bottom-panel #reset-project{padding:10px 13px;flex:0 0 42px;font-size:19px;color:#676f68;border-color:#e2e5e0}
.layout .bottom-panel .action{flex:1;display:flex;align-items:center;justify-content:space-between;min-width:0;text-align:left;padding:11px 14px;gap:10px}
.layout .bottom-panel .action span{display:flex;flex-direction:column;gap:4px}
.layout .bottom-panel .action small{font-weight:500;color:#b6c4b8;font-size:9px}
.layout .bottom-panel .action b{font:800 16px Manrope,Arial;color:white}
/* Data sections */
.layout .panel{padding:22px 24px}
.layout .panel-head{margin-bottom:21px}
.layout .panel h2{font:800 21px Manrope,Arial;letter-spacing:-.6px;color:#323a34}
.layout .panel-head p{color:#929991;line-height:1.6}
.layout .four-stats{background:#f5f5f1;border:1px solid #edeee9;border-radius:9px;gap:18px}
.layout .four-stats span{color:#848b83}
.layout .four-stats b{color:#333a34}
.layout th{background:#f9faf8;color:#9da49d;font-size:10px;border-bottom:1px solid #e6e9e4}
.layout th,.layout td{padding:14px 11px;border-color:#f0f1ed}
.layout td{font-size:11px;color:#707970}
.layout td b{color:#3b433d}
.layout tr:hover td{background:#fdfbf9}
.layout .big-total{background:#242d29;border-radius:11px}
.layout .full-quote-grid article,.layout .cavity-kpis article{background:#f6f7f4;border:1px solid #eaede7}
.layout .full-quote-grid article b{color:#343a35}
.layout .total-final{background:#f7f1eb;border:1px solid #eee1d4}
.layout .total-final strong{color:#804d34}
.layout .alert{background:#fff9ee;border-left:3px solid #c49d70;color:#786d59}
.layout .provisional-tag{background:#fcf2e4;color:#a5753c}
.layout .cavity-height-banner{background:#f7f5ef;border-left-color:#b49068}
.layout .cv-head,.layout .cv-title,.layout .cv-big{fill:#644d3d}
.layout .cavity-note{background:#f7f7f4}
.layout .body footer{color:#abb1a9;font-size:9px}
/* ===== Original cajonera designer: visual parity ===== */
#app{background:var(--ff-canvas)}
#app .sidebar{background:var(--ff-dark);width:228px;padding:25px 13px}
#app .app-shell{grid-template-columns:228px minmax(0,1fr)}
#app .brand{padding:0 10px;margin-bottom:38px}
#app .brand-symbol{background:#f1e8dd;color:#433528;border-radius:10px}
#app .brand-dot{color:var(--ff-accent)}
#app .brand-type em{letter-spacing:.5px;font-size:16px}
#app .sidebar-caption{color:#7b857c}
#app .project-switch{background:#282f2b;border-color:#39433c;margin:0 5px 30px}
#app .nav-link{border-radius:9px;color:#a6afa7;min-height:44px}
#app .nav-link.active{background:#f5f3ec;color:#292e28}
#app a[href="./closet.html"].nav-link{background:#373b36!important;color:#ecece8!important;border:0!important}
#app .topbar{height:70px;background:#fff;border-bottom:1px solid var(--ff-line)}
#app .top-actions .btn-black,#app .btn-black{background:#262d29;border-radius:8px}
#app .btn-black:hover{background:#39453d}
#app .page-heading h1,#app .content-header h1{letter-spacing:-1.2px}
#app .stage{background-image:linear-gradient(#ffffff70 1px,transparent 1px),linear-gradient(90deg,#ffffff70 1px,transparent 1px),radial-gradient(ellipse at center,#fafaf8,#e7e9e4);background-size:32px 32px,32px 32px,100% 100%}
#app .white-panel,#app .inspector,#app .metric-row,#app .quote-pill,#app .hardware-card,#app .quote-result{border-radius:13px;border-color:#e7eae5}
#app .quote-mini,#app .quote-grand,#app .summary-strip{background:#252d29}
#app .btn-light{border-radius:8px}
/* Responsive */
@media(max-width:1350px){.layout .rail{width:204px;flex-basis:204px}.layout .content{grid-template-columns:minmax(0,1fr) 300px}.layout .body{padding:25px 19px}.layout .control-title{display:none}.layout .canvas-shell{height:clamp(350px,45vw,535px)}}
@media(max-width:1060px){.layout .rail{width:73px;flex-basis:73px;padding:22px 9px}.layout .logo{padding:0 8px 35px}.layout .logo div,.layout .back span,.layout .side-label,.layout .current div,.layout .nav-copy,.layout .nav-arrow,.layout .side-footer{display:none}.layout .back{justify-content:center;margin:0 0 25px}.layout .current{justify-content:center;padding:7px;margin:0 0 25px}.layout .rail .tab{justify-content:center;padding:10px 0}.layout .tab.active .nav-glyph{color:#7c523a}.layout .content{grid-template-columns:minmax(0,1fr) 285px}.layout .body{padding:22px 16px}.layout .stage-size{display:none}.layout .heading-right{display:none}}
@media(max-width:820px){.layout .rail{width:100%;height:auto;min-height:0;position:relative;flex-direction:row;padding:12px 13px;gap:12px;align-items:center}.layout .logo{padding:0}.layout .logo div{display:flex}.layout .back,.layout .side-label,.layout .current,.layout .side-spacer,.layout .side-footer{display:none}.layout .rail nav{display:flex;gap:6px;overflow:auto;flex:1}.layout .rail .tab{min-width:40px;width:auto;flex:0 0 auto;padding:8px}.layout .rail .tab .nav-copy{display:inline;white-space:nowrap;font-size:10px}.layout .rail .tab:not(.active) .nav-copy{display:none}.layout .nav-glyph{width:25px;height:24px;flex-basis:25px}.layout .content{grid-template-columns:1fr;display:flex;flex-direction:column}.layout .inspector{position:relative;top:0;max-height:none;width:100%}.layout .settings{max-height:none}.layout .property-group .fields{grid-template-columns:repeat(3,minmax(0,1fr))}.layout .heading-right{display:none}.layout .canvas-shell{height:clamp(360px,65vw,580px)}.layout .topbar{height:58px}.layout .body{padding:20px 14px}.layout .stage-size{display:inline}.layout .bottom-panel{justify-content:flex-end}#app .app-shell{display:block}#app .sidebar{width:246px}}
@media(max-width:530px){.layout .logo div{display:none}.layout .rail{gap:8px}.layout .topbar{padding:0 13px}.layout .crumb{font-size:9px;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.layout .status{display:none}.layout .white-button{padding:10px 11px;font-size:10px}.layout .heading{margin-bottom:19px}.layout .heading h1{font-size:31px}.layout .heading p{font-size:11px}.layout .studio-top{padding:16px}.layout .studio-top h2{font-size:16px}.layout .small-badge{display:none}.layout .stage-toolbar{padding:0 10px 10px}.layout .dualview-toggle{max-width:none}.layout .dualview-toggle button{font-size:10px;padding:8px}.layout .stage-size{display:none}.layout .canvas-shell{height:360px;min-height:360px}.layout .canvas-actions{top:55px;right:9px;gap:4px}.layout .canvas-actions button{padding:7px;font-size:9px}.layout .canvas-actions button span{display:none}.layout .view-chip{top:11px;left:12px}.layout .canvas-tip{bottom:9px;left:9px;font-size:9px}.layout .control-row{padding:13px 12px;gap:8px;flex-wrap:wrap}.layout .control-row input[type=range]{flex:1;min-width:90px}.layout .stat-row{grid-template-columns:repeat(2,minmax(0,1fr))}.layout .stat-row article{padding:12px}.layout .summary-card{flex-direction:column;align-items:flex-start}.layout .panel{padding:15px}.layout .property-group .fields{grid-template-columns:repeat(2,minmax(0,1fr))}.layout .big-total strong{font-size:30px}.layout .top-actions{gap:6px}}

/* Project library entrypoint in both design editors */
#app .ff-projects-entry{background:#313a33;color:#f4f4ec;border:1px solid #424b41;margin:0 5px 8px;padding:0 12px;font-size:11px}
#app .ff-projects-entry:hover{background:#455248}
#app .ff-projects-entry span{flex:1}