/* =====================================================================
   Quick's Cabinets — 3D Cabinet Studio + Project Estimator
   Dark studio theme · scoped under #qc-tool (embed-safe)
   ===================================================================== */
#qc-tool{
  --bg:#0b1020; --panel:#121a2e; --panel-2:#172138; --raise:#1d2945;
  --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.06);
  --text:#c7cee3; --muted:#828bab; --white:#ffffff;
  --blue:#2f7bff; --blue-d:#1f63db; --blue-l:#7fb0ff; --ok:#46c08a; --gold:#d8b257;
  --r:14px; --r-sm:10px; --ease:cubic-bezier(.22,.61,.36,1);
  --shadow:0 24px 60px -28px rgba(0,0,0,.8);
  color:var(--text); font-family:'Inter',system-ui,-apple-system,Segoe UI,sans-serif;
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
  max-width:1180px; margin:0 auto;
  background:linear-gradient(180deg,#0c1224,#0a0e1c);
  border:1px solid var(--line); border-radius:20px; overflow:hidden; box-shadow:var(--shadow);
}
#qc-tool *{box-sizing:border-box;margin:0;padding:0}
#qc-tool h1,#qc-tool h2,#qc-tool h3{font-family:'Fraunces',Georgia,serif;color:#fff;font-weight:600;line-height:1.12}
#qc-tool button{font:inherit;cursor:pointer}
#qc-tool a{color:inherit;text-decoration:none}
#qc-tool :focus-visible{outline:2px solid var(--blue-l);outline-offset:2px}
#qc-tool .lbl{display:block;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:.5rem}

/* header */
#qc-tool .bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 1.1rem;background:#0a0f1e;border-bottom:1px solid var(--line)}
#qc-tool .brand{display:flex;align-items:center;gap:.55rem;font-family:'Fraunces',serif;font-weight:700;font-size:1.05rem;color:#fff}
#qc-tool .brand .mk{width:30px;height:21px;color:var(--blue-l)}
#qc-tool .brand .studio{color:var(--muted);font-family:'Inter',sans-serif;font-weight:600;font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;border-left:1px solid var(--line);padding-left:.55rem;margin-left:.25rem}
#qc-tool .bvs{display:inline-flex;align-items:center;gap:.4rem;font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--blue-l);background:rgba(47,123,255,.12);border:1px solid rgba(47,123,255,.35);padding:.35rem .65rem;border-radius:999px}
#qc-tool .bvs:hover{background:rgba(47,123,255,.22)}
#qc-tool .bvs .spark{animation:qcsp 1.8s infinite}
@keyframes qcsp{0%,100%{opacity:1}50%{opacity:.45}}

/* areas chips */
#qc-tool .areas{display:flex;gap:.4rem;overflow-x:auto;padding:.7rem 1.1rem;background:#0c1326;border-bottom:1px solid var(--line);scrollbar-width:thin}
#qc-tool .area{flex:none;display:flex;align-items:center;gap:.4rem;background:var(--panel);border:1px solid var(--line);color:var(--text);border-radius:999px;padding:.45rem .8rem;font-size:.82rem;font-weight:600;white-space:nowrap}
#qc-tool .area .ic{font-size:1rem}
#qc-tool .area:hover{border-color:var(--blue)}
#qc-tool .area.on{background:var(--blue);border-color:var(--blue);color:#fff}

/* main grid */
#qc-tool .app{display:grid;grid-template-columns:1fr 340px;gap:0}
@media(max-width:900px){#qc-tool .app{grid-template-columns:1fr}}

/* stage */
#qc-tool .stage{border-right:1px solid var(--line);min-width:0;display:flex;flex-direction:column}
#qc-tool .canvas-wrap{position:relative;aspect-ratio:16/10;min-height:300px;max-height:420px;background:radial-gradient(120% 90% at 50% 16%,#243355,#0c1122 70%);overflow:hidden}
#qc-tool .canvas-wrap canvas{display:block;width:100%!important;height:100%!important;touch-action:none}
#qc-tool .vhint{position:absolute;left:12px;bottom:10px;font-size:.72rem;color:rgba(255,255,255,.5);background:rgba(0,0,0,.25);padding:.25rem .55rem;border-radius:999px;pointer-events:none}
#qc-tool .vbtn{position:absolute;right:12px;top:12px;background:rgba(10,15,30,.7);border:1px solid var(--line);color:#fff;border-radius:8px;padding:.35rem .6rem;font-size:.74rem;backdrop-filter:blur(6px)}
#qc-tool .vbtn:hover{border-color:var(--blue)}
#qc-tool .boardtag{position:absolute;left:12px;top:12px;font-size:.72rem;color:var(--muted);background:rgba(10,15,30,.6);padding:.25rem .55rem;border-radius:999px}
#qc-tool .glfallback{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;text-align:center;padding:1.4rem}
#qc-tool .glfallback .chip{width:120px;height:84px;border-radius:12px;box-shadow:0 14px 30px rgba(0,0,0,.5)}

/* presets strip */
#qc-tool .presets{display:flex;gap:.5rem;overflow-x:auto;padding:.7rem .8rem;background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
#qc-tool .preset{flex:none;width:120px;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:.6rem;text-align:left}
#qc-tool .preset:hover{border-color:var(--blue);transform:translateY(-1px)}
#qc-tool .preset .pic{font-size:1.2rem;margin-bottom:.25rem}
#qc-tool .preset b{display:block;color:#fff;font-size:.8rem;font-weight:600;line-height:1.15}
#qc-tool .preset span{color:var(--muted);font-size:.7rem}

/* configurator */
#qc-tool .config{padding:.9rem;display:flex;flex-direction:column;gap:.9rem}
#qc-tool .seg{display:grid;grid-template-columns:repeat(6,1fr);gap:.3rem}
@media(max-width:520px){#qc-tool .seg{grid-template-columns:repeat(3,1fr)}}
#qc-tool .seg button{background:var(--panel);border:1px solid var(--line);color:var(--text);border-radius:9px;padding:.45rem .2rem;font-size:.74rem;font-weight:600}
#qc-tool .seg button:hover{border-color:var(--blue)}
#qc-tool .seg button.on{background:var(--blue);border-color:var(--blue);color:#fff}
#qc-tool .sliders{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.7rem}
@media(max-width:520px){#qc-tool .sliders{grid-template-columns:1fr}}
#qc-tool .slider .top{display:flex;justify-content:space-between;font-size:.76rem;margin-bottom:.25rem}
#qc-tool .slider .top b{color:#fff;font-weight:600}
#qc-tool input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:5px;border-radius:999px;background:linear-gradient(90deg,var(--blue) var(--f,30%),rgba(255,255,255,.14) var(--f,30%))}
#qc-tool input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:17px;height:17px;border-radius:50%;background:#fff;border:3px solid var(--blue);cursor:pointer}
#qc-tool input[type=range]::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:#fff;border:3px solid var(--blue);cursor:pointer}
#qc-tool .cats{display:flex;flex-wrap:wrap;gap:.3rem;margin-bottom:.55rem}
#qc-tool .cats button{background:transparent;border:1px solid var(--line);color:var(--muted);border-radius:999px;padding:.28rem .6rem;font-size:.73rem;font-weight:600}
#qc-tool .cats button:hover{color:#fff;border-color:var(--blue)}
#qc-tool .cats button.on{background:var(--blue);border-color:var(--blue);color:#fff}
#qc-tool .swatches{display:grid;grid-template-columns:repeat(8,1fr);gap:.35rem}
@media(max-width:520px){#qc-tool .swatches{grid-template-columns:repeat(6,1fr)}}
#qc-tool .sw{position:relative;aspect-ratio:1;border-radius:8px;border:2px solid transparent;overflow:hidden;background-color:var(--b);box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
#qc-tool .sw:hover{transform:translateY(-1px)}
#qc-tool .sw.on{border-color:var(--blue);box-shadow:0 0 0 2px rgba(47,123,255,.4)}
#qc-tool .sw.tex-wood,#qc-tool .sw.tex-veneer,#qc-tool .sw.tex-solid{background-image:repeating-linear-gradient(96deg,color-mix(in srgb,var(--s) 55%,transparent) 0 1px,transparent 1px 4px)}
#qc-tool .sw.tex-ply{background-image:repeating-linear-gradient(0deg,color-mix(in srgb,var(--s) 55%,transparent) 0 1px,transparent 1px 5px)}
@supports not (background:color-mix(in srgb,#000 50%,transparent)){#qc-tool .sw{background-image:none!important}}
#qc-tool .finish-meta{margin-top:.5rem;display:flex;align-items:center;justify-content:space-between;gap:.5rem;font-size:.82rem}
#qc-tool .finish-meta b{color:#fff;font-weight:600}
#qc-tool .tier{font-weight:800;font-size:.76rem;color:#0b1020;background:var(--blue-l);padding:.16rem .5rem;border-radius:999px}
#qc-tool .row2{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
#qc-tool select{width:100%;background:var(--panel);border:1px solid var(--line);color:#fff;border-radius:9px;padding:.5rem .6rem;font:inherit;font-size:.82rem}
#qc-tool select option{background:#16203a}
#qc-tool .toggle{display:flex;align-items:center;gap:.5rem;background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:.5rem .6rem;font-size:.82rem;cursor:pointer}
#qc-tool .toggle input{accent-color:var(--blue);width:16px;height:16px}

#qc-tool .btn{border:0;border-radius:10px;padding:.62rem 1rem;font-weight:700;font-family:'Inter',sans-serif;font-size:.86rem;transition:.18s var(--ease)}
#qc-tool .btn.primary{background:var(--blue);color:#fff;box-shadow:0 10px 22px -10px rgba(47,123,255,.7)}
#qc-tool .btn.primary:hover{background:var(--blue-d);transform:translateY(-1px)}
#qc-tool .btn.gold{background:linear-gradient(135deg,#e6c065,#c79a3b);color:#231a06}
#qc-tool .btn.gold:hover{filter:brightness(1.05);transform:translateY(-1px)}
#qc-tool .btn.ghost{background:transparent;color:#fff;border:1px solid var(--line)}
#qc-tool .btn.ghost:hover{border-color:var(--blue)}
#qc-tool .btn.block{width:100%}
#qc-tool .btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
#qc-tool .addbtn{display:flex;gap:.6rem}
#qc-tool .addbtn .btn{flex:1}

/* PROJECT panel */
#qc-tool .project{background:#0a0f1e;display:flex;flex-direction:column}
#qc-tool .proj-head{padding:.8rem .9rem .2rem}
#qc-tool .proj-head h3{font-size:1.05rem}
#qc-tool .proj-head .sub{font-size:.76rem;color:var(--muted)}
#qc-tool .proj-list{padding:.6rem .9rem;display:flex;flex-direction:column;gap:.4rem;max-height:230px;overflow:auto}
#qc-tool .proj-empty{color:var(--muted);font-size:.8rem;text-align:center;padding:1rem .5rem;line-height:1.5}
#qc-tool .prow{display:flex;align-items:center;gap:.55rem;background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:.4rem .5rem}
#qc-tool .psw{width:30px;height:30px;border-radius:6px;flex:none;background-color:var(--b);box-shadow:inset 0 0 0 1px rgba(0,0,0,.3)}
#qc-tool .pinfo{flex:1;min-width:0;font-size:.78rem}
#qc-tool .pinfo b{color:#fff;font-weight:600;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#qc-tool .pinfo .sub{color:var(--muted);font-size:.71rem}
#qc-tool .qty{display:flex;align-items:center;gap:.25rem}
#qc-tool .qty button{width:21px;height:21px;border-radius:6px;background:var(--raise);border:1px solid var(--line);color:#fff;font-size:.85rem;line-height:1}
#qc-tool .qty span{min-width:16px;text-align:center;font-size:.78rem;color:#fff;font-weight:600}
#qc-tool .prm{width:22px;height:22px;border-radius:6px;background:transparent;border:1px solid var(--line);color:#ff8a7a;font-size:1rem;line-height:1}
#qc-tool .prm:hover{background:rgba(255,90,70,.12)}

#qc-tool .proj-form{padding:.4rem .9rem .6rem;display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
#qc-tool .proj-form .full{grid-column:1/-1}
#qc-tool .proj-form input{width:100%;background:var(--panel);border:1px solid var(--line);color:#fff;border-radius:8px;padding:.5rem .6rem;font:inherit;font-size:.8rem}
#qc-tool .proj-form input::placeholder{color:#6b748f}
#qc-tool .proj-form input:focus,#qc-tool .proj-form select:focus{outline:none;border-color:var(--blue)}

/* estimate */
#qc-tool .estimate{margin:.2rem .9rem .9rem;background:linear-gradient(160deg,#15203a,#101a2e);border:1px solid var(--line);border-radius:14px;padding:.9rem}
#qc-tool .est-lock{color:var(--muted);font-size:.82rem;text-align:center;padding:.6rem}
#qc-tool .est-row{display:flex;justify-content:space-between;font-size:.82rem;padding:.28rem 0;color:var(--text)}
#qc-tool .est-row b{color:#fff;font-weight:600}
#qc-tool .est-total{margin-top:.5rem;padding-top:.6rem;border-top:1px solid var(--line);text-align:center}
#qc-tool .est-total .lbl2{font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;color:var(--gold);font-weight:700}
#qc-tool .est-total .big{font-family:'Fraunces',serif;font-size:1.9rem;color:#fff;line-height:1.1;margin:.15rem 0}
#qc-tool .est-total .rng{font-size:.78rem;color:var(--muted)}
#qc-tool .est-note{font-size:.7rem;color:var(--muted);line-height:1.4;margin-top:.5rem}
#qc-tool .proj-actions{padding:0 .9rem .9rem}

/* toast */
#qc-tool .toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,140%);background:#16203a;border:1px solid var(--blue);color:#fff;padding:.65rem 1.1rem;border-radius:10px;font-weight:600;font-size:.84rem;box-shadow:var(--shadow);transition:.25s var(--ease);z-index:10000}
#qc-tool .toast.show{transform:translate(-50%,0)}
@media(prefers-reduced-motion:reduce){#qc-tool *{animation:none!important;transition:none!important}}