/* Meu Ambiente · soft modern, "side drawer": a slim labelled rail, one drawer for
   the task at hand, and the room as the hero. Pictures for every choice. */
:root {
  /* light (the default): warm paper and ink */
  color-scheme: light;
  --ink: #1f2430; --mute: #6b7282; --faint: #8b919e; --tint: 31 36 48; --line: rgb(var(--tint) / .09); --paper: #fbfaf8; --card: #fff; --page: #e9e4dd;
  --on-ink: #fff; --ink-hover: #2b3446; --pic: #f2eee8; --pic-glow: radial-gradient(120% 90% at 50% 30%, #fbf9f6, #ece7e0);
  --mint: #1fa98a; --mint-hover: #189a7d; --mint-deep: #13755f; --mint-soft: #e3f4ee; --mint-ring: rgba(31, 169, 138, .45); --danger: #c4473b; --danger-soft: rgba(196, 71, 59, .1);
  --glass: rgba(255, 255, 255, .8); --glass-strong: rgba(255, 255, 255, .92); --edge: rgba(255, 255, 255, .85); --hi: rgba(255, 255, 255, .9);
  --shadow: 0 22px 54px -28px rgba(25, 30, 45, .45), inset 0 1px 0 var(--hi); --lift: var(--lift);
  --plan-fill: #f3efe9; --tip-bg: #1f2430; --tip-ink: #fff; --tip-sub: #c3c9d4; --backdrop: rgba(20, 28, 40, .35); --check-a: #eef1f5; --check-b: #fff; --warn-ink: #9b2c2c;
  --rail: 92px; --drawer: 360px; --r: 22px; --ctl: 36px; --ease: cubic-bezier(.2, .8, .2, 1);
  --serif: 'Fraunces', Georgia, serif;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 14px; line-height: 1.45; color: var(--ink);
}
/* dark: our own soft warm charcoal, the same frosted glass and green */
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #f1ebe3; --mute: #b0a89e; --faint: #8f877e; --tint: 240 230 216; --paper: #211f1d; --card: #2c2926; --page: #1a1817;
  --on-ink: #1f1d1b; --ink-hover: #ddd5ca; --pic: #353130; --pic-glow: radial-gradient(120% 90% at 50% 30%, #3b3734, #2e2b28);
  --mint: #2fb894; --mint-hover: #36c7a1; --mint-deep: #6fd9bd; --mint-soft: rgba(47, 184, 148, .16); --mint-ring: rgba(111, 217, 189, .5); --danger: #f08a7c; --danger-soft: rgba(240, 138, 124, .14);
  --glass: rgba(36, 33, 31, .74); --glass-strong: rgba(40, 37, 34, .92); --edge: rgba(255, 240, 220, .08); --hi: rgba(255, 240, 220, .07);
  --shadow: 0 22px 54px -26px rgba(0, 0, 0, .7), inset 0 1px 0 var(--hi); --lift: rgba(0, 0, 0, .75);
  --plan-fill: #3a3633; --tip-bg: #f1ebe3; --tip-ink: #1f1d1b; --tip-sub: #5d5650; --backdrop: rgba(8, 7, 6, .55); --check-a: #34302d; --check-b: #2a2725; --warn-ink: #f4b0a6;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; overflow: hidden; background: var(--page); }
body.dragging { cursor: grabbing; user-select: none; }
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { opacity: .38; cursor: default; }
button:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
svg.logo { stroke: none; }
h3 { font-size: 16px; font-weight: 800; margin: 0 0 12px; }
.muted { color: var(--mute); font-size: 12px; font-weight: 500; margin: 0; }
.glass { background: var(--glass); backdrop-filter: blur(22px) saturate(1.3); -webkit-backdrop-filter: blur(22px) saturate(1.3); border: 1px solid var(--edge); border-radius: var(--r); box-shadow: var(--shadow); }

#viewport { position: fixed; inset: 0; }
#viewport canvas { display: block; width: 100%; height: 100%; touch-action: none; }
#loading { position: fixed; inset: 0; display: grid; place-items: center; background: var(--paper); color: var(--mute); font-weight: 600; z-index: 40; transition: opacity .5s var(--ease); }
#loading div { display: flex; flex-direction: column; align-items: center; gap: 14px; }
#loading svg.logo { width: 56px; height: 56px; animation: breathe 1.6s var(--ease) infinite alternate; }
@keyframes breathe { to { transform: scale(1.06); } }
#loading.gone { opacity: 0; pointer-events: none; }
#loading.error { color: var(--danger); }

/* ---- rail ---- */
.rail { position: fixed; left: 0; top: 0; bottom: 0; width: var(--rail); z-index: 12; transition: transform .42s var(--ease); background: var(--paper); border-right: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 0 14px; }
.rail-logo svg { width: 42px; height: 42px; margin-bottom: 16px; display: block; }
.rail-btn { width: 76px; display: flex; flex-direction: column; align-items: center; gap: 5px; border: 0; background: none; padding: 11px 0 9px; border-radius: 16px; font-size: 11.5px; font-weight: 700; color: var(--mute); transition: background .2s var(--ease), color .2s; }
.rail-btn svg { width: 23px; height: 23px; }
.rail-btn:hover { background: rgb(var(--tint) / .05); color: var(--ink); }
.rail-btn.on { background: var(--mint-soft); color: var(--mint-deep); }
.rail-gap { flex: 1; }

/* ---- drawer ---- */
.drawer { position: fixed; left: var(--rail); top: 0; bottom: 0; width: var(--drawer); z-index: 11; background: var(--paper); border-right: 1px solid var(--line); box-shadow: 18px 0 40px -34px rgba(0, 0, 0, .4);
  transform: translateX(calc(-100% - var(--rail))); visibility: hidden; transition: transform .38s var(--ease), visibility 0s .38s; }
body.drawer-open .drawer { transform: none; visibility: visible; transition: transform .38s var(--ease); }
.drawer-body { height: 100%; overflow-y: auto; padding: 26px 26px 28px; scrollbar-width: thin; }
.drawer-close { position: absolute; top: 18px; right: 16px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgb(var(--tint) / .05); display: grid; place-items: center; color: var(--mute); z-index: 1; }
.drawer-close:hover { background: rgb(var(--tint) / .1); color: var(--ink); }
.drawer-close svg { width: 17px; height: 17px; }
.eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.d-title { font-family: var(--serif); font-weight: 600; font-size: 29px; letter-spacing: -.01em; line-height: 1.15; margin: 4px 40px 3px 0; }
.d-title button { border: 0; background: none; padding: 0; font: inherit; color: inherit; text-align: left; cursor: text; }
.d-title input { font: inherit; width: 100%; border: 0; border-bottom: 2px solid var(--mint); background: transparent; color: inherit; padding: 0; }
.d-sub { font-size: 13px; color: var(--mute); font-weight: 600; margin-bottom: 6px; }
.d-h { font-family: var(--serif); font-weight: 500; font-size: 17.5px; margin: 24px 0 11px; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.d-h .link { font-family: 'Plus Jakarta Sans', sans-serif; }
.link { border: 0; background: none; padding: 0; font-size: 12px; font-weight: 700; color: var(--mint-deep); white-space: nowrap; }
.link:hover { text-decoration: underline; }
.hint { font-size: 12.5px; color: var(--mute); line-height: 1.5; margin: 6px 0 0; }

/* picture choices */
.grid2, .grid3, .grid4 { display: grid; gap: 10px; }
.grid2 { grid-template-columns: 1fr 1fr; } .grid3 { grid-template-columns: repeat(3, 1fr); gap: 9px; } .grid4 { grid-template-columns: repeat(4, 1fr); gap: 7px; }
.pick { position: relative; border: 0; background: var(--card); border-radius: 16px; padding: 6px 6px 9px; text-align: left; display: flex; flex-direction: column; gap: 1px; box-shadow: 0 8px 18px -16px var(--lift); transition: transform .22s var(--ease), box-shadow .22s var(--ease); color: var(--ink); }
.pick:hover { transform: translateY(-2px); box-shadow: 0 14px 24px -16px var(--lift); }
.pick.on { box-shadow: 0 0 0 2px var(--mint), 0 10px 20px -16px var(--lift); }
.pick .pic { width: 100%; aspect-ratio: 4 / 3; border-radius: 11px; display: block; object-fit: cover; background: var(--pic-glow); }
.pick .pic.contain { object-fit: contain; padding: 4px; }
.pick b { display: block; font-size: 12.5px; font-weight: 700; margin: 7px 3px 0; line-height: 1.25; }
.pick small { display: block; font-size: 11px; color: var(--mute); font-weight: 600; margin: 1px 3px 0; line-height: 1.35; }
.pick.mini { padding: 0; background: none; box-shadow: none; text-align: center; }
.pick.mini .pic { aspect-ratio: 1; border-radius: 12px; background: var(--pic); }
.pick.mini b { font-size: 11px; font-weight: 700; color: var(--mute); margin: 5px 0 0; }
.pick.mini.on { box-shadow: none; } .pick.mini.on .pic { box-shadow: 0 0 0 2px var(--mint); } .pick.mini.on b { color: var(--ink); }
.pick.mini:hover { box-shadow: none; }
.pick.tall .pic { aspect-ratio: 3 / 2; }
.pick .badge { position: absolute; top: 12px; right: 12px; font-size: 10.5px; font-weight: 800; padding: 3px 8px; border-radius: 999px; background: var(--ink); color: var(--on-ink); }
.pick .x { position: absolute; top: 10px; right: 10px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: var(--glass-strong); color: var(--ink); font-weight: 800; box-shadow: 0 3px 8px -4px rgba(0, 0, 0, .5); opacity: 0; transition: opacity .2s; display: grid; place-items: center; }
.pick:hover .x, .pick:focus-within .x { opacity: 1; }
.pick .x svg { width: 13px; height: 13px; }
.drag-card { cursor: grab; user-select: none; touch-action: none; }
.plan { width: 100%; height: 56px; display: block; margin-top: 4px; }
.type-card .plan { height: 64px; margin: 0 0 6px; }
.custom-color { position: relative; overflow: hidden; }
.pick.mini.custom-color .pic { background: conic-gradient(from 90deg, #f2b8a2, #f3d58c, #b8d8a8, #a8c8e0, #c8b4e0, #f2b8a2); }
.custom-color input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }

/* rows of chips, search */
.chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 10px 0 14px; }
.chip { border: 0; background: rgb(var(--tint) / .055); padding: 7px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--mute); transition: background .2s, color .2s; }
.chip:hover { color: var(--ink); background: rgb(var(--tint) / .09); }
.chip.on { background: var(--ink); color: var(--on-ink); }
.search { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 14px; background: rgb(var(--tint) / .05); margin-top: 14px; }
.search svg { width: 17px; height: 17px; color: var(--mute); }
.search input { flex: 1; border: 0; background: none; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink); outline: none; min-width: 0; }
.search input::placeholder { color: var(--faint); }
.wide-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; border: 1.5px dashed rgb(var(--tint) / .18); background: transparent; border-radius: 16px; padding: 12px; font-weight: 700; font-size: 13px; color: var(--ink); margin-top: 12px; }
.wide-btn:hover { border-color: var(--mint); color: var(--mint-deep); }
.wide-btn svg { width: 18px; height: 18px; }
.target { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 16px; background: var(--card); box-shadow: 0 8px 18px -16px var(--lift); margin-top: 14px; }
.target img { width: 52px; height: 52px; border-radius: 11px; object-fit: cover; background: var(--pic); }
.target b { display: block; font-size: 14px; } .target small { font-size: 12px; color: var(--mute); font-weight: 600; }
.rooms-row { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0 2px; }
.room-chip { border: 0; background: rgb(var(--tint) / .055); border-radius: 999px; padding: 7px 13px; font-size: 12.5px; font-weight: 700; color: var(--mute); }
.room-chip.on { background: var(--ink); color: var(--on-ink); }
.room-chip.add { background: transparent; color: var(--mint-deep); box-shadow: inset 0 0 0 1.5px var(--mint-ring); display: inline-flex; align-items: center; gap: 4px; }
.room-chip.add svg { width: 14px; height: 14px; }

/* sliders */
.slider-row { margin-top: 6px; }
.slider-row .lbl { display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; font-weight: 700; margin-bottom: 4px; }
.slider-row .lbl em { font-style: normal; color: var(--mute); font-weight: 600; }
.slider-row input[type=range] { width: 100%; accent-color: var(--mint); }
.slider-row.lamps input[type=range] { accent-color: #e7a95c; }
.slider-ends { display: flex; justify-content: space-between; font-size: 11px; color: var(--faint); font-weight: 600; }

/* advanced: folded until needed */
details.adv { margin-top: 24px; border-top: 1px solid var(--line); padding-top: 14px; }
details.adv summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 700; color: var(--mute); }
details.adv summary::-webkit-details-marker { display: none; }
details.adv summary svg { width: 16px; height: 16px; transition: transform .25s var(--ease); }
details.adv[open] summary svg { transform: rotate(90deg); }
details.adv h4 { font-size: 12px; font-weight: 800; color: var(--mute); margin: 16px 0 6px; text-transform: uppercase; letter-spacing: .05em; }
.opening-tiles { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.opening-tiles .pick { align-items: center; text-align: center; }
.opening-icon { width: 34px; height: 46px; margin: 6px auto 2px; border-radius: 5px; background: linear-gradient(#c89a6a, #a97d50); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .5); position: relative; }
.opening-icon.door::after { content: ''; position: absolute; right: 5px; top: 50%; width: 4px; height: 4px; border-radius: 50%; background: #333; }
.opening-icon.window { background: linear-gradient(#bfe0f3, #8fc4e2); height: 38px; margin-top: 12px; box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 4px #cfd6dd; }
.field { display: flex; flex-direction: column; gap: 4px; font-size: 11px; line-height: 16px; font-weight: 600; color: var(--mute); }
.field input, .field select, .opening select { font: inherit; font-size: 13px; font-weight: 600; color: var(--ink); border: 0; border-radius: 10px; padding: 8px 10px; background: rgb(var(--tint) / .06); width: 100%; }
/* text, number and choice controls share one height, so rows of them and the buttons beside them line up */
.field input:not([type=range]):not([type=checkbox]), .field select, .opening select { height: var(--ctl); padding-top: 0; padding-bottom: 0; }
.field select { cursor: pointer; }
.field input:not([type=range]):not([type=checkbox]):hover, .field select:hover { background: rgb(var(--tint) / .09); }
.field input:not([type=range]):not([type=checkbox]):focus-visible, .field select:focus-visible { outline-offset: 0; }
.row.ctl-row { align-items: flex-end; }
.row2, .row3, .row4 { display: grid; gap: 8px; margin-top: 8px; }
.row2 { grid-template-columns: 1fr 1fr; } .row3 { grid-template-columns: 1fr 1fr 1fr; } .row4 { grid-template-columns: repeat(4, 1fr); }
.row { display: flex; gap: 8px; } .row.right { justify-content: flex-end; margin-top: 14px; }
.opening { background: rgb(var(--tint) / .04); border-radius: 12px; padding: 8px; margin-bottom: 8px; }
.opening-head { display: flex; align-items: center; gap: 6px; } .opening-head select { flex: 1; }
.tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--mute); }
.icon-btn { border: 0; background: rgb(var(--tint) / .06); width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); }
.btn { border: 0; background: rgb(var(--tint) / .06); color: var(--ink); min-height: var(--ctl); padding: 0 14px; border-radius: 999px; font-weight: 700; font-size: 13px; line-height: 1.2; display: inline-flex; gap: 6px; align-items: center; justify-content: center; transition: background .2s, transform .2s var(--ease); }
.btn:hover { background: rgb(var(--tint) / .11); }
.btn:active { transform: scale(.97); }
.btn.small { min-height: 30px; padding: 0 12px; font-size: 12px; }
.btn.primary { background: var(--mint); color: #fff; } .btn.primary:hover { background: var(--mint-hover); }
.btn.dark { background: var(--ink); color: var(--on-ink); } .btn.dark:hover { background: var(--ink-hover); }
.btn.danger { color: var(--danger); }
.btn svg { width: 16px; height: 16px; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.sub { font-size: 12px; font-weight: 700; color: var(--mute); margin-top: 8px; }
.row-between { display: flex; justify-content: space-between; align-items: center; }
.field.slider span { display: flex; justify-content: space-between; }
.field.slider input { accent-color: var(--mint); width: 100%; margin: 2px 0 6px; }
.quality .pick b { margin-top: 2px; }
.about { font-size: 12.5px; color: var(--mute); line-height: 1.55; }
.credit-h { font-size: 12.5px; font-weight: 700; margin: 14px 0 4px; }
.credits { list-style: none; padding: 0; margin: 0; font-size: 12px; color: var(--mute); line-height: 1.5; }
.credits a { color: var(--ink); text-decoration: none; font-weight: 600; }
.credits a:hover { text-decoration: underline; }
.credits-more summary { font-size: 12px; color: var(--mute); cursor: pointer; margin-bottom: 4px; }

/* ---- theme: the quick toggle, the appearance choice in Settings ---- */
.act.icon-only { padding: 9px 11px; }
.act.lang-btn { padding: 9px 11px; gap: 5px; font-size: 12px; letter-spacing: .04em; }
.lang-pick { flex-direction: row !important; align-items: center; gap: 10px !important; padding: 10px 12px !important; }
.lang-pick b { margin: 0 !important; }
.lang-badge { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; font-size: 12px; letter-spacing: .04em; background: rgb(var(--tint) / .07); color: var(--ink); }
.lang-pick.on .lang-badge { background: var(--mint); color: #fff; }
:root[data-theme="dark"] .when-light, :root:not([data-theme="dark"]) .when-dark { display: none; }
.theme-pic { display: flex; gap: 3px; padding: 6px; height: 64px; border-radius: 11px; overflow: hidden; }
.theme-pic i { display: block; border-radius: 5px; }
.theme-pic .r { width: 12px; } .theme-pic .d { width: 34px; } .theme-pic .v { flex: 1; border-radius: 6px; background: linear-gradient(160deg, #e6c3a2, #c99577); }
.theme-pic.light { background: #ede8e1; } .theme-pic.light .r, .theme-pic.light .d { background: #fbfaf8; box-shadow: inset 0 0 0 1px rgba(31,36,48,.08); }
.theme-pic.dark { background: #1a1817; } .theme-pic.dark .r, .theme-pic.dark .d { background: #2c2926; box-shadow: inset 0 0 0 1px rgba(255,240,220,.06); }
.theme-pic.auto { background: linear-gradient(115deg, #ede8e1 0 50%, #1a1817 50%); }
.theme-pic.auto .r { background: linear-gradient(115deg, #fbfaf8 0 60%, #2c2926 60%); } .theme-pic.auto .d { background: linear-gradient(115deg, #fbfaf8 0 40%, #2c2926 40%); }
.theme-pic i.dot { width: 6px; height: 6px; border-radius: 50%; background: #1fa98a; margin: 3px 3px 0; }
/* the logo keeps its mint tile in both themes; a soft ring lifts it off charcoal */
:root[data-theme="dark"] svg.logo { filter: drop-shadow(0 0 0.5px rgba(255, 240, 220, .35)); }

/* ---- full view: only the room ---- */
body.ui-hidden .rail { transform: translateX(-100%); }
body.ui-hidden .drawer, body.ui-hidden.drawer-open .drawer { transform: translateX(calc(-100% - var(--rail))); visibility: hidden; transition: transform .42s var(--ease), visibility 0s .42s; }
.actions, .recentre, #tour { transition: opacity .3s var(--ease), transform .35s var(--ease); }
body.ui-hidden .actions, body.ui-hidden .recentre, body.ui-hidden #tour, body.ui-hidden .ctx { opacity: 0; transform: translateY(-10px); pointer-events: none; }
.show-ui { position: fixed; left: 16px; top: 16px; z-index: 14; border: 0; display: inline-flex; align-items: center; gap: 7px; padding: 10px 14px; border-radius: 999px; font-weight: 700; font-size: 12.5px; color: var(--ink);
  background: var(--glass); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); box-shadow: var(--shadow); opacity: 0; transform: translateX(-12px); pointer-events: none; transition: opacity .3s var(--ease) .1s, transform .35s var(--ease) .1s; }
.show-ui svg { width: 17px; height: 17px; }
body.ui-hidden .show-ui { opacity: 1; transform: none; pointer-events: auto; }

/* ---- actions, recentre ---- */
.actions { position: fixed; top: 18px; right: 20px; z-index: 10; display: flex; align-items: center; gap: 2px; padding: 6px; border-radius: 999px; background: var(--glass); backdrop-filter: blur(22px) saturate(1.3); -webkit-backdrop-filter: blur(22px) saturate(1.3); box-shadow: var(--shadow); }
.act { border: 0; background: none; display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 999px; font-weight: 700; font-size: 13px; color: var(--ink); transition: background .2s; }
.act:hover:not(:disabled) { background: rgb(var(--tint) / .06); }
.act svg { width: 17px; height: 17px; }
.act.primary { background: var(--ink); color: var(--on-ink); } .act.primary:hover { background: var(--ink-hover); }
.act-sep { width: 1px; height: 22px; background: var(--line); margin: 0 4px; }
.recentre { position: fixed; right: 20px; bottom: 20px; z-index: 10; border: 0; display: inline-flex; align-items: center; gap: 7px; padding: 10px 15px; border-radius: 999px; font-weight: 700; font-size: 12.5px; color: var(--ink); background: var(--glass); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); box-shadow: var(--shadow); }
.recentre svg { width: 17px; height: 17px; }
/* "made by" link: the same pill as Recentre, always on screen, just right of the side
   panel; it glides with the panel as it opens, folds or hides (same widths, same timing) */
.made-by { position: fixed; left: calc(var(--rail) + 20px); bottom: 20px; z-index: 10; display: inline-flex; align-items: center; gap: 8px; padding: 10px 15px; border-radius: 999px; font-weight: 700; font-size: 12.5px; color: var(--ink); text-decoration: none; background: var(--glass); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); box-shadow: var(--shadow); transition: left .38s var(--ease), background .2s; }
.made-by:hover { background: var(--paper); }
.made-by:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
.made-by .x-logo { width: 14px; height: 14px; fill: currentColor; stroke: none; }
.made-by-label { font-weight: 600; color: var(--mute); }
body.drawer-open .made-by { left: calc(var(--rail) + var(--drawer) + 20px); }
body.ui-hidden .made-by, body.ui-hidden.drawer-open .made-by { left: 20px; transition: left .42s var(--ease), background .2s; }

/* ---- the selected piece: a small toolbar beside it ---- */
.ctx, .measure { position: fixed; left: 0; top: 0; z-index: 13; opacity: 0; pointer-events: none; transition: opacity .2s var(--ease); will-change: transform; }
.ctx.on, .measure.on { opacity: 1; pointer-events: auto; }
.ctx { display: flex; align-items: center; gap: 1px; padding: 5px; border-radius: 17px; background: var(--glass-strong); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); box-shadow: var(--shadow); }
.ctx-name { font-size: 12.5px; font-weight: 800; padding: 0 9px 0 9px; max-width: 170px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctx-sep { width: 1px; height: 30px; background: var(--line); margin: 0 3px; }
.ctx button { border: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 9px; border-radius: 12px; font-size: 10.5px; font-weight: 700; color: var(--ink); }
.ctx button:hover { background: rgb(var(--tint) / .06); }
.ctx button.on { background: var(--mint-soft); color: var(--mint-deep); }
.ctx button.danger { color: var(--danger); } .ctx button.danger:hover { background: var(--danger-soft); }
.ctx button[hidden] { display: none; }
.measure { padding: 6px 12px; border-radius: 999px; font-weight: 700; font-size: 13px; background: var(--glass-strong); box-shadow: var(--shadow); white-space: nowrap; }
.measure::after { content: ''; position: absolute; left: 50%; bottom: -6px; width: 10px; height: 10px; background: inherit; transform: translateX(-50%) rotate(45deg); border-radius: 2px; }

/* ---- short descriptions on hover or long-press ---- */
.tip { position: fixed; left: 0; top: 0; z-index: 30; max-width: 250px; padding: 9px 12px; border-radius: 12px; background: var(--tip-bg); color: var(--tip-ink); font-size: 12px; font-weight: 700; line-height: 1.4; pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s var(--ease); box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .6); }
.tip.on { opacity: 1; transform: none; }
.tip small { display: block; color: var(--tip-sub); font-weight: 500; margin-top: 2px; }

/* ---- narrow windows: the drawer covers the room while open ---- */
@media (max-width: 760px) {
  :root { --rail: 72px; --drawer: calc(100vw - 72px); }
  .rail-btn { width: 62px; font-size: 10.5px; }
  .act span { display: none; } .act.primary span { display: inline; }
  .actions { top: 12px; right: 12px; }
  .recentre span { display: none; }
  /* the open panel fills a phone's width: the link waits beside the icons, under the panel */
  .made-by, body.drawer-open .made-by { left: calc(var(--rail) + 12px); bottom: 12px; padding: 9px 13px; }
  body.ui-hidden .made-by, body.ui-hidden.drawer-open .made-by { left: 12px; }
}

/* ---- templates: gallery, confirm bar, save dialog ---- */
#tpl-modal [hidden] { display: none !important; }
.pop-label { margin: 10px 2px 4px; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--mute); }
.tpl-actions { display: flex; gap: 6px; margin: 8px 0 4px; flex-wrap: wrap; }
.modal.gallery { width: min(980px, 94vw); max-height: 90vh; overflow: auto; }
.gallery-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.gallery-head h3 { margin: 0; }
.gallery-head .seg { min-width: 300px; } .gallery-head .seg button { white-space: nowrap; }
#tpl-sub { margin: 8px 0 14px; font-size: 13px; }
.tpl-gallery h4 { margin: 18px 2px 8px; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--mute); }
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.tpl-card { position: relative; border: 0; background: var(--card); color: var(--ink); border-radius: 20px; padding: 8px 8px 12px; text-align: left; display: flex; flex-direction: column; gap: 4px; box-shadow: 0 10px 22px -16px var(--lift); transition: transform .2s var(--ease), box-shadow .2s; }
.tpl-card:hover, .tpl-card:focus-visible { transform: translateY(-2px); box-shadow: 0 16px 28px -16px var(--lift); }
.tpl-card.picked { box-shadow: 0 0 0 2px var(--mint), 0 16px 28px -16px var(--lift); }
.tpl-card img, .tpl-card .noimg { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 14px; background: var(--pic-glow); display: block; }
.tpl-card strong { font-size: 14px; margin: 6px 6px 0; }
.tpl-card .meta { display: flex; align-items: center; gap: 6px; margin: 0 6px; font-size: 12px; font-weight: 700; color: var(--mute); }
.tpl-card .dots { display: inline-flex; gap: 3px; margin-left: auto; }
.tpl-card .dots i { width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.tpl-card p { margin: 0 6px; font-size: 12px; line-height: 1.4; color: var(--mute); }
.tpl-card .del { position: absolute; top: 14px; right: 14px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: var(--glass-strong); color: var(--ink); font-weight: 800; box-shadow: 0 4px 10px -6px rgba(0, 0, 0, .5); }
.tpl-empty-note { font-size: 13px; color: var(--mute); margin: 4px 2px; }
.confirm-bar { position: sticky; bottom: 0; display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 10px 12px; border-radius: 16px; background: var(--card); box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .5); }
.confirm-bar span { flex: 1; font-size: 13px; font-weight: 600; }
.modal.save-tpl { width: min(460px, 92vw); }
.modal.size { width: min(520px, 92vw); }
.modal.size .row3 { margin: 12px 0 8px; }
.modal.size .check { margin-bottom: 14px; }
.modal.save-tpl img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 14px; margin: 4px 0 10px; background: var(--pic); }
.modal.save-tpl .field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; font-size: 12px; font-weight: 700; color: var(--mute); }
.modal.save-tpl input { font: inherit; font-size: 14px; color: var(--ink); border: 0; border-radius: 12px; padding: 10px 12px; background: rgb(var(--tint) / .06); }
@media (max-width: 560px) { .gallery-head .seg { min-width: 0; width: 100%; } .tpl-grid { grid-template-columns: 1fr; } }

/* ---- tour, dialogs, toast ---- */
.tour { position: fixed; right: 22px; top: 84px; width: 290px; padding: 16px 18px; z-index: 12; color: var(--ink); background: var(--glass-strong); backdrop-filter: blur(22px) saturate(1.3); -webkit-backdrop-filter: blur(22px) saturate(1.3); border: 1px solid var(--edge); border-radius: var(--r); box-shadow: var(--shadow); opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity .35s var(--ease), transform .35s var(--ease); }
.tour.on { opacity: 1; transform: none; pointer-events: auto; }
.tour small { font-weight: 700; color: var(--mint-deep); font-size: 11px; display: block; }
.tour strong { display: block; font-size: 15px; margin: 4px 0 4px; }
.tour p { margin: 0 0 12px; font-size: 13px; }
.tour .row { justify-content: flex-end; }
.modal { border: 0; padding: 22px 24px 24px; width: min(680px, 92vw); background: var(--glass-strong); color: var(--ink); }
.modal::backdrop { background: var(--backdrop); backdrop-filter: blur(4px); }
.modal[open] { animation: pop .3s var(--ease); }
@keyframes pop { from { opacity: 0; transform: scale(.96) translateY(8px); } }
.type-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.type-card { border: 0; background: var(--card); color: var(--ink); border-radius: 18px; padding: 14px 14px 12px; text-align: left; display: flex; flex-direction: column; gap: 3px; transition: transform .2s var(--ease), box-shadow .2s; box-shadow: 0 8px 18px -14px rgba(0, 0, 0, .5); }
.type-card:hover { transform: translateY(-2px); box-shadow: 0 14px 24px -14px rgba(0, 0, 0, .5); }
.type-card strong { font-size: 14px; } .type-card span, .type-card small { font-size: 12px; color: var(--mute); font-weight: 500; }
.drop { position: relative; width: 300px; height: 300px; border-radius: 18px; background: repeating-conic-gradient(var(--check-a) 0 25%, var(--check-b) 0 50%) 0 0 / 20px 20px; cursor: pointer; overflow: hidden; display: grid; place-items: center; }
.drop canvas { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.drop-hint { position: relative; text-align: center; font-weight: 700; color: var(--mute); background: var(--glass-strong); padding: 12px 16px; border-radius: 14px; }
.drop-hint small { font-weight: 500; }
.modal.has-photo .drop-hint { display: none; }
.check { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--mute); cursor: pointer; }
.check input { width: 16px; height: 16px; margin: 0; accent-color: var(--mint); flex: none; }
.toast { position: fixed; left: 50%; top: 86px; transform: translateX(-50%) translateY(-8px); padding: 9px 16px; border-radius: 999px; font-weight: 600; font-size: 13px; opacity: 0; pointer-events: none; transition: .25s var(--ease); z-index: 20; background: var(--glass-strong); }
.toast.on { opacity: 1; transform: translateX(-50%); }
body.busy .drawer, body.busy .tour { opacity: .55; }
@media (prefers-reduced-motion: reduce) { * { transition-duration: .01ms !important; animation-duration: .01ms !important; } }

/* ---- photo dialog, round five ---- */
.modal.photo { width: min(900px, 94vw); max-height: 92vh; overflow: auto; overscroll-behavior: contain; }
.steps { display: flex; gap: 6px; margin-bottom: 14px; }
.steps b { font-size: 11px; font-weight: 700; color: var(--mute); padding: 4px 10px; border-radius: 999px; background: rgb(var(--tint) / .05); }
.steps b.on { background: var(--mint); color: #fff; }
.ph-grid { display: grid; grid-template-columns: 300px 1fr; gap: 22px; }
.ph-grid.wide { grid-template-columns: 1fr 280px; }
.ph-grid input[type=range] { width: 100%; accent-color: var(--mint); margin: 6px 0 2px; }
.ph-side { display: flex; flex-direction: column; }
.ph-side > * + * { margin-top: 10px; }
.ph-side h4, .ph-grid h4 { margin: 0 0 4px; font-size: 11px; line-height: 16px; font-weight: 600; color: var(--mute); }
.ph-side > h4:not(:first-child) { margin-top: 18px; }
.ph-side > h4 + * { margin-top: 0; }
.modal.photo .muted { line-height: 1.5; }
.modal.photo .row + .muted, .modal.photo .ph-grid > div > .muted + .muted { margin-top: 6px; }
.modal.photo .ph-grid > div > .muted + .muted { margin-top: 2px; }
#ph-dims { margin-top: 6px; }
#ph-dims .row2 { margin-top: 0; }
#ph-dims .check { margin-top: 12px; }
.tips { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.6; }
.tips + .muted { margin-top: 10px; }
.drop { width: 240px; height: 240px; }
.warn, .notes .warn { background: var(--danger-soft); color: var(--warn-ink); border-radius: 12px; padding: 8px 12px; font-size: 12px; font-weight: 600; margin-top: 8px; }
.notes .ok { color: var(--mute); font-size: 12px; font-weight: 600; margin-top: 8px; }
.cut-canvas { width: 100%; height: auto; border-radius: 16px; background: repeating-conic-gradient(var(--check-a) 0 25%, var(--check-b) 0 50%) 0 0 / 20px 20px; touch-action: none; }
.cut-canvas.brushing { cursor: crosshair; } .cut-canvas.cropping { cursor: cell; }
.seg { display: flex; gap: 4px; background: rgb(var(--tint) / .06); border-radius: 999px; padding: 3px; }
.seg button { flex: 1; border: 0; background: transparent; height: 30px; padding: 0 10px; border-radius: 999px; font-weight: 700; font-size: 12px; line-height: 1; color: var(--mute); transition: all .2s var(--ease); }
.seg button.on { background: var(--card); color: var(--ink); box-shadow: 0 4px 10px -6px rgba(0,0,0,.4); }
.field em { font-style: normal; color: var(--ink); float: right; }
.field.grow { flex: 1; }
.scale-canvas { width: 100%; height: auto; margin-top: 14px; border-radius: 16px; background: rgb(var(--tint) / .04); color: var(--ink); }
.variants { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.variants button { border: 0; background: var(--card); border-radius: 16px; padding: 6px 6px 10px; display: flex; flex-direction: column; align-items: center; gap: 7px; font-weight: 700; font-size: 12px; line-height: 1.25; color: var(--mute); box-shadow: 0 8px 18px -16px var(--lift); transition: transform .22s var(--ease), box-shadow .22s var(--ease), color .2s; }
.variants button:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 14px 24px -16px var(--lift); }
.variants button.on { color: var(--ink); box-shadow: 0 0 0 2px var(--mint), 0 10px 20px -16px var(--lift); }
.variants button.on:hover { box-shadow: 0 0 0 2px var(--mint), 0 14px 24px -16px var(--lift); }
.variants button:disabled { opacity: .45; }
.variants img { width: 100%; height: 78px; object-fit: contain; background: var(--pic-glow); border-radius: 11px; }
#ph-model-note.bad { color: var(--danger); }
/* the third card is the control for the full model: idle (a cube), working (a ring
   that fills over the expected minute), done (the picture) */
.variants .make .face { position: relative; width: 100%; height: 78px; border-radius: 11px; background: var(--pic-glow); display: grid; place-items: center; overflow: hidden; }
.variants .make .face > * { grid-area: 1 / 1; }
.variants .make img { display: none; }
.variants .make .cube { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .75; }
.variants .make .ring { display: none; width: 52px; height: 52px; transform: rotate(-90deg); }
.variants .make .ring circle { fill: none; stroke-width: 4; }
.variants .make .ring .track { stroke: rgb(var(--tint) / .14); }
.variants .make .ring .bar { stroke: var(--mint); stroke-linecap: round; stroke-dasharray: 125.7; stroke-dashoffset: 125.7; transition: stroke-dashoffset .6s linear; }
.variants .make .pct { display: none; font-size: 12px; font-weight: 800; color: var(--ink); letter-spacing: .01em; }
.variants .make[data-state="idle"] { border: 1.5px dashed rgb(var(--tint) / .28); background: transparent; }
.variants .make[data-state="idle"]:hover { border-color: var(--mint); color: var(--ink); }
.variants .make[data-state="working"] { cursor: progress; }
.variants .make[data-state="working"] .cube { display: none; }
.variants .make[data-state="working"] .ring, .variants .make[data-state="working"] .pct { display: block; }
.variants .make[data-state="done"] .cube, .variants .make[data-state="done"] .face { background: transparent; }
.variants .make[data-state="done"] .cube { display: none; }
.variants .make[data-state="done"] img { display: block; width: 100%; height: 78px; object-fit: contain; }
#ph-dims.dim { opacity: .45; pointer-events: none; }

/* narrow windows (a phone, a side pane): the dialog's columns stack; on the
   size step the preview cards slide in between the measurements and the scale */
@media (max-width: 760px) {
  .modal.photo { padding: 18px 18px 20px; }
  .ph-grid, .ph-grid.wide { grid-template-columns: 1fr; gap: 14px; }
  .ph-grid .drop { width: 100%; max-width: 320px; height: auto; aspect-ratio: 1; }
  .modal.photo section[data-step="3"] .ph-grid { gap: 10px; }
  .modal.photo section[data-step="3"] .ph-grid > div { display: contents; }
  .modal.photo section[data-step="3"] .ctl-row { order: 1; }
  .modal.photo section[data-step="3"] #ph-detect-note { order: 2; margin-top: -2px; }
  .modal.photo section[data-step="3"] #ph-typical { order: 3; margin-top: -8px; }
  .modal.photo section[data-step="3"] #ph-dims { order: 4; margin-top: 0; }
  .modal.photo section[data-step="3"] .ph-side > h4 { order: 5; margin: 6px 0 -6px; }
  .modal.photo section[data-step="3"] #ph-variant { order: 6; max-width: 340px; }
  .modal.photo section[data-step="3"] #ph-depth-note, .modal.photo section[data-step="3"] #ph-match-note { order: 7; margin-top: -2px; }
  .modal.photo section[data-step="3"] #ph-scale { order: 8; margin-top: 4px; }
  .modal.photo .row2, .modal.photo .row3 { gap: 8px; }
}

/* a small on/off switch */
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 10px 2px 2px; font-size: 12px; font-weight: 700; color: var(--mute); cursor: pointer; }
.switch-row input { position: absolute; opacity: 0; pointer-events: none; }
.switch-row i { position: relative; width: 34px; height: 20px; flex: none; border-radius: 999px; background: rgb(var(--tint) / .14); transition: background .2s var(--ease); }
.switch-row i::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px -2px rgba(0,0,0,.45); transition: transform .2s var(--ease); }
.switch-row input:checked + i { background: var(--mint); }
.switch-row input:checked + i::after { transform: translateX(14px); }
.switch-row input:focus-visible + i { outline: 2px solid var(--mint); outline-offset: 2px; }