/* Furniture Configurator — frontend styles */
:root {
  --bg: #f6f5f2;
  --panel: #ffffff;
  --ink: #23201c;
  --muted: #7c756b;
  --line: #e4e0d8;
  --accent: #9a6b3f;
  --accent-ink: #ffffff;
  --accent-soft: #f0e7dd;
  --ok: #2f7d4f;
  --err: #b4472e;
  --shadow: 0 2px 14px rgba(40,30,15,.08);
  --radius: 12px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#1c1a17; --panel:#252220; --ink:#ece7df; --muted:#a69d90;
    --line:#38332e; --accent:#c88b52; --accent-soft:#332a22; --shadow:0 2px 16px rgba(0,0,0,.4);
  }
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html,body { margin:0; height:100%; }
body {
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background: var(--bg); color: var(--ink); line-height:1.5;
}
.topbar {
  display:flex; align-items:center; gap:24px; flex-wrap:wrap;
  padding:14px 20px; background:var(--panel); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:5;
}
.brand { font-weight:700; font-size:1.15rem; letter-spacing:.2px; }
.cats { display:flex; gap:6px; flex-wrap:wrap; }
.cats button {
  border:1px solid var(--line); background:transparent; color:var(--muted);
  padding:7px 14px; border-radius:999px; cursor:pointer; font-size:.9rem;
  transition:.15s;
}
.cats button:hover { color:var(--ink); border-color:var(--accent); }
.cats button[aria-selected="true"] { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }

.layout { display:grid; grid-template-columns:1fr 380px; gap:0; height:calc(100vh - 61px); }
.viewport { position:relative; background:
  radial-gradient(circle at 50% 30%, rgba(255,255,255,.5), transparent 60%), var(--bg); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .viewport{ background:var(--bg);} }
.canvas-wrap { width:100%; height:100%; }
.canvas-wrap canvas { display:block; width:100% !important; height:100% !important; }
.viewport-hint { position:absolute; bottom:12px; left:50%; transform:translateX(-50%);
  font-size:.78rem; color:var(--muted); background:var(--panel); padding:4px 12px;
  border-radius:999px; border:1px solid var(--line); opacity:.9; }
.loading { position:absolute; top:12px; right:12px; background:var(--accent); color:#fff;
  padding:5px 12px; border-radius:999px; font-size:.8rem; }

.controls { background:var(--panel); border-left:1px solid var(--line); padding:20px;
  overflow-y:auto; }
.intro { color:var(--muted); font-size:.9rem; margin:0 0 14px; }
.cat-title { margin:0 0 2px; font-size:1.3rem; }
.cat-desc { margin:0 0 16px; color:var(--muted); font-size:.88rem; }

.group { border-top:1px solid var(--line); padding:14px 0; }
.group:first-of-type { border-top:none; }
.group h4 { margin:0 0 10px; font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
.field { margin-bottom:12px; }
.field label { display:flex; justify-content:space-between; font-size:.86rem; margin-bottom:4px; }
.field .val { color:var(--accent); font-weight:600; }
input[type=range]{ width:100%; accent-color:var(--accent); }
.field-row { display:flex; align-items:center; gap:10px; }
.field-row input[type=number]{ width:72px; padding:6px; border:1px solid var(--line);
  border-radius:8px; background:var(--bg); color:var(--ink); }
select, .swatches { width:100%; }
select { padding:8px; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--ink); }
.swatches { display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; }
.swatch { width:42px; height:42px; border-radius:8px; border:2px solid var(--line); cursor:pointer;
  background-size:cover; background-position:center; position:relative; }
.swatch[aria-selected="true"]{ border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft); }
.swatch-label { font-size:.75rem; color:var(--muted); }
.opt-toggle { display:flex; align-items:center; gap:8px; margin-bottom:8px; font-size:.9rem; }

.price-card { border-top:2px solid var(--line); margin-top:8px; padding-top:16px; }
.price-total { display:flex; justify-content:space-between; align-items:baseline; }
.price-total strong { font-size:1.6rem; color:var(--accent); }
.link-btn { background:none; border:none; color:var(--accent); cursor:pointer; padding:6px 0; font-size:.85rem; }
.breakdown { font-size:.82rem; margin:8px 0; }
.breakdown table { width:100%; border-collapse:collapse; }
.breakdown td { padding:3px 0; border-bottom:1px dashed var(--line); }
.breakdown .grp { color:var(--muted); font-size:.72rem; text-transform:uppercase; padding-top:8px; }
.breakdown .tot td { font-weight:700; border-bottom:none; padding-top:6px; }
.order-btn { width:100%; background:var(--accent); color:var(--accent-ink); border:none;
  padding:13px; border-radius:10px; font-size:1rem; font-weight:600; cursor:pointer; margin-top:12px; }
.order-btn:hover { filter:brightness(1.05); }
.disclaimer { font-size:.74rem; color:var(--muted); margin-top:10px; }

.modal { position:fixed; inset:0; background:rgba(20,15,8,.55); display:flex;
  align-items:center; justify-content:center; padding:16px; z-index:20; }
.modal-box { background:var(--panel); border-radius:var(--radius); padding:24px;
  width:100%; max-width:440px; box-shadow:var(--shadow); }
.modal-box h3 { margin:0 0 6px; }
.muted { color:var(--muted); font-size:.86rem; }
#orderForm label { display:block; margin:12px 0 0; font-size:.86rem; }
#orderForm input, #orderForm textarea { width:100%; padding:9px; margin-top:4px;
  border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--ink); font:inherit; }
.modal-actions { display:flex; justify-content:flex-end; gap:12px; align-items:center; margin-top:18px; }
.form-error { color:var(--err); font-size:.85rem; margin-top:10px; }
.order-success { color:var(--ok); font-size:.95rem; text-align:center; padding:12px; }

@media (max-width: 860px) {
  .layout { grid-template-columns:1fr; height:auto; }
  .viewport { height:48vh; }
  .controls { border-left:none; border-top:1px solid var(--line); }
}

/* v2 — contact buttons, offline, send modal */
.contact-top{display:flex;gap:9px;margin-left:auto}
.cbtn{display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border-radius:999px;font-size:.85rem;
  text-decoration:none;color:#fff;font-weight:600;line-height:1;box-shadow:0 1px 2px rgba(0,0,0,.12);transition:transform .08s,filter .08s}
.cbtn svg{display:block}
.cbtn.wa{background:#25d366}
.cbtn.tg{background:#2aabee}
.cbtn:hover{filter:brightness(1.06);transform:translateY(-1px)}
.cbtn:active{transform:translateY(0)}
.offline{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--panel);border:1px solid var(--line);
  color:var(--err);padding:14px 20px;border-radius:12px;max-width:80%;text-align:center;font-size:.9rem}
.send-success{text-align:center;padding:8px 0}
.send-success p{color:var(--ok)}
.send-links{display:flex;gap:10px;justify-content:center;margin:14px 0}

/* v4 Wave C — redesigned send modal + contacts */
.modal-box{position:relative}
.modal-x{position:absolute;top:12px;right:12px;width:30px;height:30px;border:none;background:none;
  font-size:24px;line-height:1;color:var(--muted);cursor:pointer;border-radius:8px}
.modal-x:hover{background:var(--bg);color:var(--ink)}
.send-recap{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:13px 15px;margin:14px 0 4px}
.recap-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.recap-cat{font-weight:600}
.recap-price{color:var(--accent);font-size:1.15rem}
.recap-dims{color:var(--muted);font-size:.84rem;margin-top:2px}
.recap-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.recap-chip{font-size:.72rem;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:3px 9px;color:var(--muted)}
#sendForm{margin-top:12px}
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fld{display:block;font-size:.8rem;color:var(--muted);margin-top:10px}
.fld span{display:block;margin-bottom:4px;font-weight:600;color:var(--ink)}
.fld em{font-weight:400;color:var(--muted)}
.fld input,.fld textarea{width:100%;padding:10px;border:1px solid var(--line);border-radius:9px;
  background:var(--bg);color:var(--ink);font:inherit}
.fld input:focus,.fld textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(154,107,63,.15)}
.success-check{width:54px;height:54px;border-radius:50%;background:rgba(60,160,90,.14);color:var(--ok);
  display:flex;align-items:center;justify-content:center;margin:4px auto 10px}
.send-links .cbtn{padding:11px 18px;font-size:.92rem}
@media (max-width:460px){.field-grid{grid-template-columns:1fr}}

/* v3 — collapsible sections + 3D toolbar */
.controls .group { border-top: none; padding: 0; }
.sec-head { width:100%; text-align:left; background:none; border:none; border-top:1px solid var(--line);
  padding:12px 0 9px; font:inherit; font-size:.73rem; text-transform:uppercase; letter-spacing:.09em;
  color:var(--muted); cursor:pointer; display:flex; justify-content:space-between; align-items:center; }
.sec-head::after { content:'\2212'; color:var(--accent); font-size:.95rem; }
.sec-head.closed::after { content:'+'; }
.sec-head:hover { color:var(--ink); }
.sec-body { padding-bottom:6px; }
.vtools { position:absolute; bottom:52px; left:12px; display:flex; gap:8px; z-index:2; }
.vtool { background:var(--panel); border:1px solid var(--line); color:var(--ink); padding:6px 12px;
  border-radius:999px; font-size:.8rem; cursor:pointer; font-family:inherit; }
.vtool:hover { border-color:var(--accent); }
.vtool.on { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }

/* v4 — preset chips */
.preset-bar{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.preset-chip{border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:999px;
  padding:6px 13px;font-size:.82rem;cursor:pointer;font-family:inherit}
.preset-chip:hover{border-color:var(--accent);color:var(--accent)}
.shelf-heights{margin-top:10px}
.shelf-heights .sh-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:6px;margin-top:6px}
.shelf-heights .sh-cell{display:flex;flex-direction:column;gap:3px}
.shelf-heights .sh-lab{font-size:11px;color:var(--muted)}
.shelf-heights input{padding:6px;border:1px solid var(--line);border-radius:7px;background:var(--bg);color:var(--ink);font:inherit;width:100%}

/* v5 — languages, live editing, material families */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.top-right{display:flex;align-items:center;gap:12px;margin-left:auto}
.contact-top{margin-left:0}
.lang-pick{display:inline-flex;align-items:center;gap:6px;color:var(--muted);border:1px solid var(--line);
  border-radius:999px;padding:3px 6px 3px 10px;background:var(--bg)}
.lang-pick select{border:none;background:transparent;padding:4px 2px;font:inherit;font-size:.85rem;color:var(--ink);width:auto;cursor:pointer}
.lang-pick:focus-within{border-color:var(--accent)}

.htools{position:absolute;top:12px;left:12px;display:flex;gap:6px;z-index:2}
.vtool.icon{display:inline-flex;align-items:center;justify-content:center;width:34px;height:32px;padding:0}
.vtool:disabled{opacity:.4;cursor:default}
.vtool:focus-visible,.seg button:focus-visible,.swatch:focus-visible,.thick:focus-visible,.stepper button:focus-visible,
.preset-chip:focus-visible,.sec-head:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.toast{position:absolute;top:56px;left:50%;transform:translate(-50%,-6px);opacity:0;transition:.2s;background:var(--ink);
  color:var(--panel);padding:6px 14px;border-radius:999px;font-size:.82rem;z-index:3}
.toast.show{opacity:.95;transform:translate(-50%,0)}

.field .hint{font-size:.72rem;color:var(--muted);margin:-2px 0 4px}
.field-row input[type=number]{width:84px}
input[type=range]{height:26px;cursor:grab}
input[type=range]:active{cursor:grabbing}

.seg{display:flex;flex-wrap:wrap;gap:4px;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:3px;margin-top:6px}
.seg button{flex:1 1 auto;border:none;background:transparent;color:var(--muted);padding:7px 10px;border-radius:8px;
  font:inherit;font-size:.82rem;cursor:pointer;transition:.15s;min-height:34px}
.seg button:hover{color:var(--ink)}
.seg button[aria-checked="true"],.seg button[aria-pressed="true"]{background:var(--panel);color:var(--ink);font-weight:600;
  box-shadow:0 1px 3px rgba(0,0,0,.12)}

.stepper-field{display:flex;align-items:center;justify-content:space-between;gap:10px}
.stepper-label{font-size:.88rem}
.stepper{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--bg)}
.stepper button{width:36px;height:34px;border:none;background:transparent;color:var(--ink);font-size:1.1rem;cursor:pointer}
.stepper button:hover:not(:disabled){background:var(--accent-soft);color:var(--accent)}
.stepper button:disabled{opacity:.35;cursor:default}
.stepper output{min-width:30px;text-align:center;font-weight:600;font-variant-numeric:tabular-nums}

.opt-toggle{cursor:pointer;user-select:none;position:relative;min-height:30px}
.opt-toggle input{position:absolute;opacity:0;width:1px;height:1px}
.opt-toggle .switch{width:38px;height:22px;border-radius:999px;background:var(--line);position:relative;flex:none;transition:.15s}
.opt-toggle .switch::after{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.25);transition:.15s}
.opt-toggle input:checked + .switch{background:var(--accent)}
.opt-toggle input:checked + .switch::after{left:19px}
.opt-toggle input:focus-visible + .switch{outline:2px solid var(--accent);outline-offset:2px}

.mat-field{padding-bottom:4px}
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(82px,1fr));gap:8px;margin-top:8px}
.swatch{width:auto;height:auto;display:flex;flex-direction:column;align-items:center;gap:5px;padding:6px 4px 7px;border-radius:10px;
  border:1.5px solid var(--line);background:var(--panel);cursor:pointer;font:inherit;color:var(--ink);transition:.15s}
.swatch:hover{border-color:var(--accent)}
.swatch .chip{width:100%;height:34px;border-radius:7px;background-size:cover;background-position:center;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.swatch-name{font-size:.76rem;line-height:1.2;text-align:center}
.swatch[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.thick-row{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:8px}
.thick-lab{font-size:.75rem;color:var(--muted);margin-right:2px}
.thick{border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:999px;padding:4px 11px;font:inherit;
  font-size:.8rem;cursor:pointer;font-variant-numeric:tabular-nums}
.thick[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.mat-sel{font-size:.75rem;color:var(--muted);margin-top:6px}

.notices{display:flex;flex-direction:column;gap:6px;margin:0 0 6px}
.notice{display:flex;gap:8px;align-items:flex-start;background:#fff7e8;border:1px solid #f0d9a8;color:#6b4a12;
  border-radius:10px;padding:8px 10px;font-size:.8rem;line-height:1.4;animation:pop .2s ease}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .notice{background:#3a2f1c;border-color:#5c4823;color:#f1d9a8}}
.notice span{flex:1}
.notice-x{border:none;background:none;color:inherit;opacity:.6;cursor:pointer;font-size:1rem;line-height:1;padding:0 2px}
@keyframes pop{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}

.inside-list{margin:4px 0 6px;padding-left:18px;font-size:.82rem;color:var(--muted)}
.inside-list li{margin:2px 0}

.price-wrap{display:inline-flex;align-items:baseline;gap:8px}
.price-total strong{font-variant-numeric:tabular-nums}
.price-delta{font-size:.78rem;font-weight:600;padding:2px 7px;border-radius:999px;animation:pop .2s ease}
.price-delta.up{background:rgba(180,71,46,.12);color:var(--err)}
.price-delta.down{background:rgba(47,125,79,.12);color:var(--ok)}
.breakdown td.qty{color:var(--muted);white-space:nowrap;padding:3px 8px}
.breakdown td.amt{text-align:right;white-space:nowrap}

.preset-bar{display:block;margin:0 0 12px}
.preset-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:6px}
.preset-row{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scroll-snap-type:x mandatory}
.preset-chip{flex:0 0 96px;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px;border-radius:12px;
  scroll-snap-align:start}
.preset-img{width:84px;height:62px;border-radius:8px;background:var(--bg) center/contain no-repeat}
.preset-name{font-size:.75rem;line-height:1.2;text-align:center}
.shelf-heights summary{font-size:.78rem;color:var(--accent);cursor:pointer;margin:4px 0}

@media (max-width: 860px) {
  .topbar{gap:10px;padding:10px 14px}
  .cats{order:3;width:100%;flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px}
  .cats button{flex:none}
  .layout{display:block;height:auto}
  .viewport{position:sticky;top:0;height:44vh;z-index:1;border-bottom:1px solid var(--line)}
  .controls{border-left:none;padding:16px}
  .viewport-hint{display:none}
  input[type=range]{height:34px}
  .price-card{position:sticky;bottom:0;background:var(--panel);padding-bottom:10px;box-shadow:0 -8px 16px -12px rgba(0,0,0,.25)}
  .contact-top .cbtn span{display:none}
  .contact-top .cbtn{padding:8px}
}
@media (max-width: 860px){
  .brand{flex:1;min-width:0;font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .top-right{gap:8px}
  .lang-pick{padding:2px 4px 2px 8px}
  .vtools{bottom:12px}
}

/* v6 — presets as a tidy grid (no scrollbar) */
.preset-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px;overflow:visible;padding:0;scroll-snap-type:none}
.preset-chip{flex:none;width:auto;scroll-snap-align:none}
.preset-img{width:100%;height:58px}