@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
:root {
  --dk:#2C2C2C; --dk2:#1A1A1A; --gold:#C4982F; --gold-l:#D4AB4A; --gold-bg:#FBF6EC;
  --bg:#F7F7F5; --wh:#FFF; --tx:#1A1A1A; --tx2:#777; --tx3:#AAA; --bd:#E8E5E0;
  --sw:380px; --f:'Inter',-apple-system,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{font-family:var(--f);color:var(--tx);background:#C8D8E4;-webkit-font-smoothing:antialiased}

.app{display:flex;height:100vh;width:100vw}
.sidebar{width:var(--sw);min-width:var(--sw);height:100vh;display:flex;flex-direction:column;background:var(--wh);border-right:1px solid var(--bd);z-index:10}

/* BRANDED HEADER */
.brand-hdr{background:var(--dk);padding:10px 16px;display:flex;align-items:center;gap:12px}
.brand-logo{height:44px;width:auto;object-fit:contain;background:#FFF;border-radius:6px;padding:5px 10px}
.brand-hdr .divider{width:1px;height:42px;background:rgba(255,255,255,.15);flex-shrink:0}
.brand-hdr .tagline{display:flex;flex-direction:column}
.brand-hdr .tagline-top{font-size:11px;color:rgba(255,255,255,.55);font-weight:500;letter-spacing:.04em}
.brand-hdr .tagline-main{font-size:15px;color:var(--wh);font-weight:700;letter-spacing:.03em}

/* PRICE BAR */
.price-bar{background:var(--gold);padding:9px 20px;display:flex;justify-content:space-between;align-items:center}
.price-bar .lbl{color:rgba(255,255,255,.85);font-size:11px;font-weight:500}
.price-bar .val{color:var(--wh);font-size:22px;font-weight:700}

/* VIEW TOGGLE */
.view-toggle{display:flex;padding:12px 20px;gap:8px}
.view-btn{flex:1;padding:10px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;border:2px solid var(--bd);background:var(--wh);color:var(--tx);font-family:var(--f);transition:all .15s}
.view-btn.on{border-color:var(--dk);background:var(--dk);color:var(--wh)}

/* SCROLL */
.scroll{flex:1;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#DDD transparent}
.scroll::-webkit-scrollbar{width:5px}.scroll::-webkit-scrollbar-thumb{background:#DDD;border-radius:3px}

/* NAV ITEMS - Innoveet style */
.nav-item{display:flex;align-items:center;gap:14px;padding:15px 20px;cursor:pointer;border-bottom:1px solid var(--bd);background:var(--wh);transition:background .12s;border-left:3px solid transparent;user-select:none}
.nav-item:hover{background:#FAFAF8}
.nav-item.on{background:var(--gold-bg);border-left-color:var(--gold)}
.nav-icon{flex-shrink:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;color:var(--tx2)}
.nav-item.on .nav-icon{color:var(--gold)}
.nav-lbl{flex:1;font-size:14px;font-weight:500;color:var(--tx)}
.nav-item.on .nav-lbl{font-weight:600}
.nav-arr{color:var(--tx3);transition:transform .2s;display:flex;align-items:center}
.nav-item.on .nav-arr{transform:rotate(90deg);color:var(--gold)}

/* OPTION PANELS */
.opt-panel{padding:8px 20px 16px 56px;background:var(--bg);border-bottom:1px solid var(--bd)}
.section-lbl{font-size:11px;font-weight:600;color:var(--tx2);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px;margin-top:10px}
.section-lbl:first-child{margin-top:0}

/* OPTION LIST */
.ol{display:flex;flex-direction:column;gap:5px}
.oi{padding:10px 12px;border-radius:8px;border:2px solid var(--bd);background:var(--wh);cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-size:13px;transition:all .12s}
.oi:hover{border-color:#D0D0D0}.oi.on{border-color:var(--gold);background:var(--gold-bg)}
.oi.on .on-name{font-weight:600}
.oi-l{display:flex;align-items:center;gap:9px}
.oi-sw{width:22px;height:22px;border-radius:4px;border:1px solid rgba(0,0,0,.1);flex-shrink:0}
.oi-pr{color:var(--tx2);font-size:11px;flex-shrink:0}

/* CHECKBOX LIST */
.ci{padding:10px 12px;border-radius:8px;border:2px solid var(--bd);background:var(--wh);cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-size:13px;transition:all .12s}
.ci.on{border-color:var(--gold);background:var(--gold-bg)}
.ci-box{width:18px;height:18px;border-radius:3px;border:2px solid #CCC;display:flex;align-items:center;justify-content:center;color:#FFF;font-size:11px;font-weight:700;flex-shrink:0;transition:all .15s}
.ci.on .ci-box{background:var(--gold);border-color:var(--gold)}

/* PRESET BUTTONS */
.preset-row{display:flex;gap:6px;flex-wrap:wrap}
.preset-btn{padding:7px 14px;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer;font-family:var(--f);border:2px solid #DDD;background:var(--wh);color:#666;transition:all .12s}
.preset-btn.on{border-color:var(--gold);background:var(--gold-bg);color:var(--dk)}

/* STEPPER */
.stepper{display:flex;align-items:center;gap:8px}
.stepper-btn{width:32px;height:32px;border-radius:6px;border:1px solid var(--bd);background:var(--wh);cursor:pointer;font-size:18px;font-family:var(--f);color:var(--gold);display:flex;align-items:center;justify-content:center;transition:background .12s}
.stepper-btn:hover{background:var(--gold-bg)}
.stepper-val{padding:7px 16px;border-radius:6px;border:2px solid var(--gold);background:var(--gold-bg);font-size:14px;font-weight:700;min-width:100px;text-align:center}

/* COLOR SWATCHES */
.clr-row{display:flex;gap:8px;flex-wrap:wrap}
.clr-sw{width:36px;height:36px;border-radius:8px;border:3px solid #DDD;cursor:pointer;transition:all .12s}
.clr-sw.on{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold-bg)}

/* MATERIAL CARDS (Innoveet-style) */
.mat-cards{display:flex;flex-direction:column;gap:6px}
.mat-card{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:10px;border:2px solid var(--bd);background:var(--wh);cursor:pointer;transition:all .15s;overflow:hidden}
.mat-card:hover{border-color:#D0D0D0;background:#FDFCFA}
.mat-card.on{border-color:var(--gold);background:var(--gold-bg)}
.mat-thumb{width:70px;height:44px;border-radius:6px;flex-shrink:0;display:block;image-rendering:auto}
.mat-name{font-size:14px;font-weight:500;color:var(--tx)}
.mat-card.on .mat-name{font-weight:600;color:var(--dk)}

/* COLOR OPTIONS with thumbnails */
.clr-row-lg{display:flex;gap:10px;flex-wrap:wrap}
.clr-opt{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;padding:4px;border-radius:8px;border:2px solid transparent;transition:all .12s}
.clr-opt:hover{background:#F5F3EF}
.clr-opt.on{border-color:var(--gold);background:var(--gold-bg)}
.clr-thumb{width:48px;height:48px;border-radius:8px;display:block;border:1px solid rgba(0,0,0,.08)}
.clr-opt.on .clr-thumb{box-shadow:0 2px 6px rgba(196,152,47,.3)}
.clr-label{font-size:10px;color:var(--tx2);text-align:center;max-width:56px;line-height:1.2}
.clr-opt.on .clr-label{color:var(--dk);font-weight:600}

/* PRICE NOTE */
.price-note{margin-top:10px;padding:8px 12px;background:var(--gold-bg);border-radius:6px;font-size:12px;color:#8A7028;border:1px solid #E8D9B0}

/* PUI THUMBNAILS */
.pui-card{gap:12px!important}
.pui-card .oi-l{gap:12px}
.pui-thumb{width:70px;height:50px;border-radius:6px;flex-shrink:0;display:block;background:#F5F3F0;border:1px solid rgba(0,0,0,.06)}

/* ========================= */
/* BINNENZIJDE               */
/* ========================= */
.bi-card{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;cursor:pointer;transition:background .15s;border-bottom:1px solid var(--border)}
.bi-card:hover{background:#FAFAF8}
.bi-card.open{background:var(--gold-bg);border-left:3px solid var(--gold);padding-left:17px}
.bi-card.selected .bi-sub{color:var(--gold)}
.bi-card.selected .bi-sub strong{font-weight:700}

.bi-left{display:flex;align-items:center;gap:14px;flex:1;min-width:0}
.bi-thumb{width:64px;height:52px;border-radius:8px;flex-shrink:0;display:block;background:#F0EDE8;border:1px solid rgba(0,0,0,.06);box-shadow:0 1px 3px rgba(0,0,0,.06)}
.bi-card.open .bi-thumb{border-color:var(--gold);box-shadow:0 1px 4px rgba(196,152,47,.15)}

.bi-info{display:flex;flex-direction:column;gap:2px;min-width:0}
.bi-name{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bi-sub{font-size:11px;color:#999;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.bi-right{flex-shrink:0;padding-left:10px}
.bi-arrow{display:inline-block;transition:transform .2s;color:#AAA}
.bi-arrow.open{transform:rotate(90deg);color:var(--gold)}

/* Sub-options panel */
.bi-opts{background:#FAFAF8;border-bottom:1px solid var(--border);padding:6px 0 6px 20px}

.bi-opt{display:flex;align-items:center;gap:12px;padding:10px 20px 10px 0;cursor:pointer;transition:background .12s;border-radius:6px;margin:2px 14px 2px 0}
.bi-opt:hover{background:#F0EDE5}
.bi-opt.on{background:var(--gold-bg)}

/* Radio button */
.bi-opt-radio{width:18px;height:18px;border-radius:50%;border:2px solid #CCC;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:border-color .15s}
.bi-opt-radio.on{border-color:var(--gold)}
.bi-opt-dot{width:8px;height:8px;border-radius:50%;background:transparent;transition:background .15s}
.bi-opt-radio.on .bi-opt-dot{background:var(--gold)}

.bi-opt-name{flex:1;font-size:12.5px;color:var(--text)}
.bi-opt.on .bi-opt-name{font-weight:600}

.bi-opt-price{font-size:11.5px;color:var(--gold);font-weight:600;white-space:nowrap}
.bi-opt-price.bi-incl{color:#999;font-weight:400}

/* INFO ROW */
.info-row{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--wh);border-radius:8px;border:1px solid var(--bd);margin-top:8px}

/* BOTTOM ACTIONS */
.bot-actions{border-top:1px solid var(--bd);flex-shrink:0}
.bot-offerte{display:flex;align-items:center;gap:14px;padding:14px 20px;cursor:pointer;background:var(--gold);color:var(--wh);transition:background .15s}
.bot-offerte:hover{background:var(--gold-l)}
.bot-offerte .lbl{font-size:14px;font-weight:700}
.bot-help{display:flex;align-items:center;gap:14px;padding:12px 20px;cursor:pointer;border-top:1px solid var(--bd)}
.bot-help:hover{background:#FAFAF8}

/* 3D PREVIEW */
.prev{flex:1;height:100vh;position:relative;overflow:hidden;cursor:grab}.prev:active{cursor:grabbing}
.prev canvas{display:block;width:100%!important;height:100%!important}
.prev-badge{position:absolute;bottom:14px;left:14px;background:rgba(0,0,0,.5);color:#FFF;padding:5px 12px;border-radius:7px;font-size:11px;backdrop-filter:blur(4px);pointer-events:none}
.prev-dims{position:absolute;bottom:14px;right:14px;background:rgba(0,0,0,.5);color:#FFF;padding:7px 12px;border-radius:7px;font-size:12px;font-weight:600;backdrop-filter:blur(4px);pointer-events:none}

/* OVERLAYS */
.overlay{position:fixed;inset:0;z-index:999;background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center;padding:20px}
.overlay.show{display:flex}
.overlay-box{background:#FFF;border-radius:16px;padding:30px;max-width:440px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 8px 30px rgba(0,0,0,.2)}
.fi{width:100%;padding:10px 12px;border:1px solid var(--bd);border-radius:6px;font-size:13px;font-family:var(--f);outline:none;margin-bottom:8px;transition:border .15s}
.fi:focus{border-color:var(--gold)}
.btn-gold{width:100%;padding:14px;border:none;border-radius:8px;background:var(--gold);color:#FFF;font-size:15px;font-weight:700;cursor:pointer;font-family:var(--f)}
.btn-gold:hover{background:var(--gold-l)}

/* LOADER */
.loader{position:fixed;inset:0;z-index:9999;background:var(--dk);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;transition:opacity .4s}
.loader.hide{opacity:0;pointer-events:none}
.loader img{height:48px}
.spin{width:30px;height:30px;border:3px solid rgba(255,255,255,.15);border-top-color:var(--gold);border-radius:50%;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

@media(max-width:800px){.app{flex-direction:column-reverse}.sidebar{width:100%;min-width:100%;height:55vh}.prev{height:45vh}}
input[type=number]{-moz-appearance:textfield}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}