/* Hoxha brand: black, white and the logo's brown (#8a5e3c). Square corners and 1px
   grid lines everywhere, like tiles laid edge to edge. Planner sidebar beside a full-bleed 3D stage. */
:root{
  --bg:#ffffff; --panel:#ffffff; --soft:#f5f4f2; --fg:#111111; --muted:#6f6a66; --line:#e4e1de; --line-strong:#111111;
  --head:#000000; --head-fg:#ffffff; --head-muted:#a8a29d;
  --accent:#8a5e3c; --accent-hover:#77502f; --accent-light:#b88a64; --accent-ink:#ffffff; --accent-soft:#f4ede7;
  --stage:#e9e7e3; --warn:#b4412f; --warn-soft:#f8e4e0;
  --font-display:"Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body:"Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-mono:"Archivo", "Helvetica Neue", Arial, sans-serif;
  color-scheme:light;
}
*{border-radius:0}
[hidden]{display:none !important}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--fg);font-family:var(--font-body);font-size:14px;line-height:1.45;-webkit-tap-highlight-color:transparent}
.app{height:100%;display:grid;grid-template-columns:330px minmax(0,1fr)}

/* ---- Sidebar ---- */
.side{overflow:auto;background:var(--panel);border-right:1px solid var(--line-strong);display:flex;flex-direction:column}
.side > *{padding-left:max(20px, env(safe-area-inset-left, 0px));padding-right:20px}
.topbar{display:flex;align-items:center;gap:12px;height:64px;flex:none;background:var(--head);color:var(--head-fg)}
.brand-logo{width:36px;height:36px;display:block;flex:none}
.brand-name{font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:.82rem;line-height:1.2}
.brand{padding-top:28px;padding-bottom:24px;border-bottom:1px solid var(--line-strong)}
h1{font-family:var(--font-display);font-size:1.9rem;line-height:1.02;font-weight:700;margin:0;letter-spacing:-.02em;text-wrap:balance}
.brand p{margin:12px 0 0;color:var(--muted);font-size:.92rem;line-height:1.5}
.side section{padding-top:18px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.side section.end{margin-top:auto;border-top:1px solid var(--line-strong);border-bottom:0}
h2{display:flex;gap:12px;align-items:baseline;font-size:.75rem;text-transform:uppercase;letter-spacing:.12em;color:var(--fg);margin:0 0 14px;font-weight:700}
h2 span{color:var(--accent)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.f{display:flex;flex-direction:column;gap:6px;font-size:.78rem;font-weight:600;color:var(--fg)}
/* Material picker: a dropdown whose rows show picture, name and dimensions */
.pick{position:relative}
.pick-btn{all:unset;box-sizing:border-box;display:block;width:100%;cursor:pointer;border:1px solid var(--line-strong);background:var(--panel)}
.pick-btn:hover{background:var(--soft)}
.pick-btn[aria-expanded=true]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.pick-opt{all:unset;box-sizing:border-box;width:100%;cursor:pointer;border-bottom:1px solid var(--line)}
.pick-cur,.pick-opt{display:flex;align-items:center;gap:12px;padding:8px 10px;min-width:0}
.pick-cur{position:relative;padding-right:34px}
.pick-cur::after{content:"";position:absolute;right:14px;top:50%;width:8px;height:8px;margin-top:-6px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.pick-btn[aria-expanded=true] .pick-cur::after{transform:rotate(225deg);margin-top:-2px}
.pick-img{width:44px;height:44px;flex:none;object-fit:cover;display:block;background:var(--soft)}
.pick-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.pick-txt b{font-weight:700;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pick-txt small{font-size:.74rem;font-weight:500;color:var(--muted)}
.pick-list{position:absolute;left:0;right:0;top:100%;z-index:20;max-height:340px;overflow-y:auto;background:var(--panel);border:1px solid var(--line-strong);border-top:0;box-shadow:0 12px 30px rgb(0 0 0 / .3)}
.pick-opt:last-child{border-bottom:0}
.pick-opt:hover{background:var(--soft)}
.pick-opt[aria-selected=true]{background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent)}
.pick-opt:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
input[type=number],select{font:inherit;font-size:.9rem;font-weight:500;color:var(--fg);background:var(--panel);border:1px solid var(--line-strong);padding:10px 12px;width:100%;box-sizing:border-box;border-radius:0}
input[type=number]{font-variant-numeric:tabular-nums}
.stack{display:flex;flex-direction:column;gap:12px}
.stack h2{margin-bottom:2px}
.area{font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums;padding:10px 12px;background:var(--soft);border-left:3px solid var(--accent)}
.catalog{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line-strong);border:1px solid var(--line-strong)}
.cat{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:4px;padding:16px 14px 14px;background:var(--panel);min-width:0;transition:background .15s, color .15s}
.cat:last-child:nth-child(odd){grid-column:1/-1}
.cat:hover{background:var(--soft)}
.cat:active{background:var(--head);color:var(--head-fg)}
.cat:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
/* Fixture icons: 24px grid, 1.5px rounded outline strokes, no fills.
   Drawn as CSS masks painted with currentColor so they follow the theme and hover colour. */
.cat .ic-img{display:block;height:44px;width:auto;margin-bottom:6px}
.cat[data-icon]::before{content:"";display:block;width:32px;height:32px;margin-bottom:8px;background:currentColor;
  -webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat;transition:background .15s}
.cat[data-icon]:hover::before{background:var(--accent)}
.cat[data-icon]:active::before{background:var(--accent-light)}
.cat[data-icon="toilet"]{--icon:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M8 3h8a1 1 0 0 1 1 1v7H7V4a1 1 0 0 1 1-1z%22/%3E%3Cpath d=%22M5 11h14v1a7 7 0 0 1-14 0v-1z%22/%3E%3Cpath d=%22M9 18.5 8 21h8l-1-2.5%22/%3E%3C/svg%3E")}
.cat[data-icon="vanity"]{--icon:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 11h18%22/%3E%3Cpath d=%22M8 11a4 3.5 0 0 0 8 0%22/%3E%3Cpath d=%22M12 11V7M10 7h4%22/%3E%3Cpath d=%22M4 11v9h16v-9%22/%3E%3Cpath d=%22M11 16h2%22/%3E%3C/svg%3E")}
.cat[data-icon="shower"]{--icon:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 3h3a5 5 0 0 1 5 5v3%22/%3E%3Cpath d=%22M6 11h12l-1.5-2.5h-9z%22/%3E%3Cpath d=%22M8 15v2M12 15v3M16 15v2%22/%3E%3C/svg%3E")}
.cat[data-icon="washer"]{--icon:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%224%22 y=%223%22 width=%2216%22 height=%2218%22 rx=%222%22/%3E%3Ccircle cx=%2212%22 cy=%2213%22 r=%224.5%22/%3E%3Cpath d=%22M9 14a3 3 0 0 0 6 0%22/%3E%3Cpath d=%22M7.5 6.5h1M11 6.5h5.5%22/%3E%3C/svg%3E")}
.cat[data-icon="cabinet"]{--icon:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%226%22 y=%222%22 width=%2212%22 height=%2220%22 rx=%221%22/%3E%3Cpath d=%22M6 11h12%22/%3E%3Cpath d=%22M11 6v2M11 15v2%22/%3E%3C/svg%3E")}
.cat[data-icon="plant"]{--icon:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M8 14h8l-1 7H9z%22/%3E%3Cpath d=%22M12 14V9%22/%3E%3Cpath d=%22M12 9C11 5 8 4 5 4c0 4 2 6 7 5z%22/%3E%3Cpath d=%22M12 9c1-4 4-5 7-5 0 4-2 6-7 5z%22/%3E%3C/svg%3E")}
.cat[data-icon="mat"]{--icon:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%225%22 y=%227%22 width=%2214%22 height=%2210%22 rx=%221%22/%3E%3Cpath d=%22M3 9h2M3 12h2M3 15h2M19 9h2M19 12h2M19 15h2%22/%3E%3C/svg%3E")}
.cat[data-icon="mirror"]{--icon:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%226%22 y=%223%22 width=%2212%22 height=%2218%22 rx=%226%22/%3E%3Cpath d=%22M9 9l3-3M9 13l6-6%22/%3E%3C/svg%3E")}
.cat[data-icon="rail"]{--icon:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 6h18%22/%3E%3Cpath d=%22M8 6v12a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V6%22/%3E%3Cpath d=%22M8 10h8%22/%3E%3C/svg%3E")}
.cat[data-icon="art"]{--icon:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%223%22 y=%224%22 width=%2218%22 height=%2216%22 rx=%221%22/%3E%3Cpath d=%22M3 16l5-5 4 4 3-3 6 6%22/%3E%3Ccircle cx=%2216%22 cy=%229%22 r=%221.5%22/%3E%3C/svg%3E")}
.cat b{font-weight:700;font-size:.9rem}
.cat small{font-size:.74rem;color:var(--muted);font-variant-numeric:tabular-nums}
.check{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:.88rem;font-weight:500;padding-top:4px;cursor:pointer}
.check input{-webkit-appearance:none;appearance:none;order:2;width:40px;height:22px;margin:0;background:var(--line);position:relative;cursor:pointer;flex:none;transition:background .15s}
.check input::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;background:#fff;transition:transform .15s}
.check input:checked{background:var(--accent)}
.check input:checked::after{transform:translateX(18px)}
.btn{font:inherit;font-weight:600;font-size:.85rem;cursor:pointer;padding:10px 14px;border:1px solid var(--line-strong);background:var(--panel);color:var(--fg);border-radius:0}
.btn:hover:not(:disabled){background:var(--soft)}
.btn.danger{color:var(--warn)}
.btn:disabled{opacity:.4;cursor:default}
.side .btn.block{width:100%}

/* ---- Stage ---- */
.stage{position:relative;min-width:0;background:var(--stage);overflow:hidden}
.stage canvas{display:block;width:100%;height:100%;touch-action:none}
.toolbar{position:absolute;top:16px;right:max(16px, env(safe-area-inset-right, 0px));display:flex;background:var(--head);border:1px solid #2a2a2a}
.toolbar button{font:inherit;font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border:0;background:none;color:var(--head-muted);padding:12px 18px;cursor:pointer;border-radius:0}
.toolbar button + button{border-left:1px solid #2a2a2a}
.toolbar button:hover{background:#1c1c1c;color:#fff}
.toolbar button[aria-pressed=true]{background:#8a5e3c;color:#fff}
.notice{position:absolute;left:max(16px, env(safe-area-inset-left, 0px));top:16px;right:170px;margin:0;padding:12px 14px;background:var(--accent);color:var(--accent-ink);font-size:.85rem;line-height:1.45;z-index:5}
.notice code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8rem;background:rgb(0 0 0 / .2);padding:1px 5px}
.hint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;padding:16px}
.hint p{background:#000;color:#a8a29d;border:1px solid #2a2a2a;padding:18px 22px;max-width:36ch;text-align:center;margin:0;line-height:1.5}
.hint strong{display:block;color:#fff;font-family:var(--font-display);font-size:1.1rem;font-weight:700;margin-bottom:6px}
.card{position:absolute;left:max(16px, env(safe-area-inset-left, 0px));bottom:16px;width:min(350px, calc(100% - 32px));background:var(--panel);border:1px solid var(--line-strong);padding:0 0 16px;display:flex;flex-direction:column;gap:12px;box-shadow:0 10px 30px rgb(0 0 0 / .15)}
.card > *:not(header){margin-inline:16px}
.card header{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:14px 16px;background:var(--head);color:var(--head-fg)}
.card header .mono{color:#b88a64}
.card h3{margin:0;font-family:var(--font-display);font-size:1.15rem;font-weight:700}
.mono{font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums}
.gaps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-strong);border:1px solid var(--line-strong)}
.gaps div{display:flex;flex-direction:column;background:var(--panel);padding:8px 10px}
.gaps span{font-size:.64rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.gaps b{font-size:1rem;font-weight:700;font-variant-numeric:tabular-nums}
.chip{align-self:flex-start;font-size:.8rem;font-weight:600;color:var(--warn);background:var(--warn-soft);border-left:3px solid var(--warn);padding:6px 10px}
.actions{display:grid;grid-template-columns:repeat(3,1fr)}
.actions .btn{padding:10px 6px}
.actions .btn + .btn{border-left:0}
.mount{display:flex;align-items:center;gap:12px;font-size:.78rem;font-weight:600}
.mount input{flex:1;accent-color:var(--accent)}
.keys{color:var(--muted);font-size:.75rem}
kbd{font-family:var(--font-body);font-size:.7rem;font-weight:600;border:1px solid var(--line-strong);padding:0 5px}
@media (max-width:760px){
  .app{grid-template-columns:minmax(0,1fr);grid-template-rows:58vh auto;height:auto}
  .stage{order:-1}
  .side{border-right:0;border-top:1px solid var(--line-strong);overflow:visible}
  .side > *{padding-left:16px;padding-right:16px}
  .gaps{grid-template-columns:repeat(2,1fr)}
  .keys{display:none}
}