/* Application shell (owner: ui). Calm warm-neutral palette, one deep-green accent, 4/8 px spacing,
   system UI font. Text colours are chosen for >= 4.5:1 contrast on their backgrounds. */
:root {
  --bg: #f3f2ef; --surface: #ffffff; --surface-2: #f7f6f3; --surface-3: #efede8;
  --line: #e4e1db; --line-2: #d3cec5;
  --ink: #1d2125; --ink-2: #4c545d; --ink-3: #626a73;
  --accent: #2c6a59; --accent-2: #235647; --accent-soft: #e5efeb; --accent-ink: #ffffff;
  --danger: #b42318; --danger-soft: #fdecea; --warn: #9a5b00; --warn-soft: #fdf3e2;
  --shadow-1: 0 1px 2px rgba(29, 33, 37, .06), 0 1px 1px rgba(29, 33, 37, .04);
  --shadow-2: 0 8px 28px rgba(29, 33, 37, .14), 0 2px 6px rgba(29, 33, 37, .06);
  --r: 8px; --r-lg: 12px;
  --bar-h: 56px; --rail-w: 68px; --side-w: 328px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  font: 14px/1.43 var(--font); color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); }
button, input, select, textarea { font: inherit; color: inherit; }
/* touch: taps on the chrome never double-tap-zoom the page (the canvases take every gesture: touch-action none) */
html, body, button, input, select, textarea, label, [role="radio"], [role="tab"], [role^="menuitem"] { touch-action: manipulation; }
button { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled, button[aria-disabled] { cursor: default; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* every slider in the app (panel, walk minimap, import wizard) takes the accent, not the browser's blue */
input[type="range"] { accent-color: var(--accent); }
input[type="range"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
kbd { display: inline-block; min-width: 20px; padding: 1px 5px; border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 5px; background: var(--surface); font: 600 11px/16px var(--font); color: var(--ink-2); text-align: center; }
.muted { color: var(--ink-3); }
.small { font-size: 12.5px; }

/* ---------------- layout ---------------- */
#app {
  position: absolute; inset: 0; display: grid;
  grid-template-rows: var(--bar-h) minmax(0, 1fr);
  grid-template-columns: var(--rail-w) minmax(0, 1fr) var(--side-w);
  grid-template-areas: "bar bar bar" "rail stage side";
}
#topbar { grid-area: bar; }
/* chrome text is not selectable (Ctrl+A or a drag never paints the toolbar blue); fields and dialogs' text are */
#topbar, #rail, #side .tabs, .hud, #toasts, .seg, .p-kind, .p-sec h4, .tile, .room-list, .iss-go { -webkit-user-select: none; user-select: none; }
input, textarea, select { -webkit-user-select: text; user-select: text; }
#rail { grid-area: rail; }
#stage { grid-area: stage; position: relative; overflow: hidden; background: #f7f6f3; }
#side { grid-area: side; }
#app[data-mode="3d"] { grid-template-columns: 0 minmax(0, 1fr) 0; }
#app[data-mode="3d"] #rail, #app[data-mode="3d"] #side { display: none; }
#app[data-mode="2d"] .only3d, #app[data-mode="3d"] .only2d { display: none !important; }
#stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; }
#stage canvas:focus-visible { outline: 2px solid rgba(44, 106, 89, .55); outline-offset: -2px; }
#stage.pointer canvas:focus-visible { outline: none; }
body[data-mode="2d"] #view3d { visibility: hidden; }
body[data-mode="3d"] #view2d { visibility: hidden; }
/* the walk's touch joystick belongs to the 3D view (it stays in #stage after a touch walk) */
body[data-mode="2d"] .walk-joystick { display: none !important; }
/* 2D -> 3D: the plan is held over the 3D canvas while it builds, then fades out; 3D -> 2D: it fades in */
body.hold2d #view2d, body.fade2d #view2d { visibility: visible; z-index: 2; pointer-events: none; }
body.fade2d #view2d { animation: fade-out .4s ease forwards; }
body.fadein2d #view2d { animation: fade-in .25s ease; }
@keyframes fade-out { to { opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { body.fade2d #view2d, body.fadein2d #view2d { animation-duration: .01s; } }
#loading { position: fixed; inset: 0; display: grid; place-items: center; background: var(--bg); color: var(--ink-2); z-index: 50; font-size: 15px; }
/* the start-up card (once the shell has loaded): name, a moving bar, megabytes received */
.boot-card { display: flex; flex-direction: column; align-items: center; gap: 14px; width: min(320px, calc(100vw - 48px)); }
.boot-brand { display: flex; align-items: center; gap: 10px; color: var(--ink); font-size: 16px; letter-spacing: -.01em; }
.boot-brand .logo { width: 32px; height: 32px; padding: 5px; border-radius: 9px; background: var(--accent); color: #fff; stroke-width: 2; }
.boot-bar { position: relative; width: 100%; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.boot-bar span { position: absolute; top: 0; bottom: 0; width: 34%; border-radius: 2px; background: var(--accent); animation: boot-slide 1.3s cubic-bezier(.45, 0, .55, 1) infinite; }
@keyframes boot-slide { from { left: -34%; } to { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .boot-bar span { animation: none; left: 0; width: 100%; opacity: .35; } }
.boot-now { font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; min-height: 19px; }

/* ---------------- top bar ---------------- */
#topbar {
  position: relative; z-index: 9; display: flex; align-items: center; gap: 12px; padding: 0 12px 0 10px;
  background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-1);
}
.tb-left, .tb-right, .tb-center { display: flex; align-items: center; gap: 4px; min-width: 0; }
.tb-right { margin-left: auto; gap: 8px; flex: none; }   /* never squeezed: the left group's plan switch gives way */
.tb-center { position: absolute; left: 50%; transform: translateX(-50%); gap: 8px; }
/* 3D: the view switch is centred in the space between the two button groups, so a long plan name
   shortens (ellipsis) instead of running under it */
#app[data-mode="3d"] .tb-center { position: static; transform: none; margin: 0 auto; flex: none; }
#app[data-mode="3d"] .tb-right { margin-left: 0; flex: none; }
#app[data-mode="3d"] .plan-btn { max-width: 320px; }
/* 3D: the owner's plans keep "Your apartment · As drawn" where it fits; other plans show their short name */
#app[data-mode="3d"] .plan-btn:not(.has-pre) .plan-name { display: none; }
#app[data-mode="3d"] .plan-btn:not(.has-pre) .plan-short { display: block; }
/* the plan button gives way first when the bar runs short (its name ends in an ellipsis; the full name is in its title) */
.tb-left .plans-wrap { min-width: 0; display: flex; flex: 0 1 auto; }
.tb-left .plans-wrap .plan-btn { flex: 0 1 auto; min-width: 0; }
.brand { display: flex; align-items: center; gap: 8px; padding: 0 8px 0 4px; font-weight: 650; letter-spacing: -.01em; white-space: nowrap; }
.brand .logo { width: 28px; height: 28px; padding: 4px; border-radius: 8px; background: var(--accent); color: #fff; stroke-width: 2; }
.sep { width: 1px; height: 24px; background: var(--line); margin: 0 6px; flex: none; }
.tb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 36px; height: 36px; padding: 0 8px;
  border: 1px solid transparent; border-radius: var(--r); background: transparent; color: var(--ink-2); font-weight: 500;
}
.tb-btn.text { color: var(--ink); }
.tb-btn:hover:not(:disabled) { background: var(--surface-3); color: var(--ink); }
.tb-btn:disabled { color: #a5a9ad; }
.tb-btn[aria-expanded="true"] { background: var(--surface-3); }
.chev { width: 14px; height: 14px; color: var(--ink-3); }
.tb-btn .mico { display: none; }
/* Tutorial and Language: in the bar at every width, in 2D and 3D (the help button's neighbours); the right group
   never squeezes its buttons (the plan switch on the left gives way, see the tiers below) */
.tb-right > * { flex: none; }
.tut-btn { gap: 6px; }
.tut-btn .ico { color: var(--accent); }
.lang-btn { gap: 5px; }
.lang-btn .lang-code { font-size: 12.5px; font-weight: 650; letter-spacing: .04em; min-width: 18px; }
.sheet-handle { display: none; }
.plan-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; max-width: 440px; min-width: 0; padding: 0 10px 0 10px; margin-right: 4px;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); font-weight: 550;
}
.plan-btn .ico:first-child { color: var(--ink-3); }
.plan-btn:hover { border-color: var(--line-2); background: var(--surface-3); }
.plan-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.plan-pre { color: var(--ink-3); font-weight: 500; white-space: nowrap; }
.plan-pre:empty { display: none; }
.plan-pre::after { content: "·"; margin-left: 8px; }
.plan-short { display: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 14px;
  border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); color: var(--ink);
  font-weight: 600; white-space: nowrap; box-shadow: var(--shadow-1); transition: background .12s, border-color .12s;
}
.btn:hover:not(:disabled) { background: var(--surface-2); border-color: #bfb9ae; }
.btn.accent { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.accent:hover:not(:disabled) { background: var(--accent-2); border-color: var(--accent-2); }
.btn.ghost { box-shadow: none; border-color: transparent; background: transparent; color: var(--ink-2); }
.btn.ghost:hover:not(:disabled) { background: var(--surface-3); border-color: transparent; }
.btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn[aria-disabled] { opacity: .55; }
.btn[aria-busy="true"] { opacity: .7; cursor: progress; }
/* the 3D view controls while the 3D view builds */
.tb-center [aria-disabled="true"] { opacity: .45; cursor: progress; }

/* Auto-furnish with its layout stepper */
.furnish-group { display: flex; align-items: center; }
.furnish-group [data-action="furnish"] .ico { color: var(--accent); }
.layout-step {
  display: flex; align-items: center; height: 36px; margin-left: -1px; border: 1px solid var(--line-2); border-left: 0;
  border-radius: 0 var(--r) var(--r) 0; background: var(--surface-2); box-shadow: var(--shadow-1);
}
.layout-step:not([hidden]) ~ * { margin-left: 0; }
.furnish-group:has(.layout-step:not([hidden])) [data-action="furnish"] { border-radius: var(--r) 0 0 var(--r); }
.layout-step button { width: 28px; height: 34px; display: grid; place-items: center; border: 0; background: none; color: var(--ink-2); border-radius: 6px; }
.layout-step button:hover:not(:disabled) { background: var(--surface-3); color: var(--ink); }
.layout-step button:disabled { color: #b7bbbf; }
.layout-step .ico { width: 16px; height: 16px; }
.layout-n { font-size: 12.5px; font-weight: 600; color: var(--ink-2); min-width: 58px; text-align: center; font-variant-numeric: tabular-nums; }
.furnish-group.busy [data-action="furnish"] .ico { animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* 3D view switch */
.seg { display: flex; padding: 3px; gap: 2px; border-radius: 10px; background: var(--surface-3); border: 1px solid var(--line); }
.seg button { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 0; border-radius: 7px; background: transparent; color: var(--ink-2); font-weight: 550; }
.seg button:hover { color: var(--ink); }
.seg button[aria-checked="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
.seg .ico { width: 16px; height: 16px; }

.fin-lbl { font-size: 13px; font-weight: 550; color: var(--ink-3); margin-right: -2px; }
.seg-fin button { padding: 0 12px; }

/* the auto tour's play / stop (3D bar) */
.tour-ico { display: grid; flex: none; }
.tour-ico .ico { grid-area: 1 / 1; width: 16px; height: 16px; }
.tour-btn .i-play { color: var(--accent); fill: currentColor; stroke-width: 1.25; }
.tour-btn .i-stop { display: none; fill: currentColor; stroke-width: 1.25; }
.tour-btn.on { background: var(--accent-soft); color: var(--accent-2); border-color: rgba(44, 106, 89, .25); }
.tour-btn.on:hover:not(:disabled) { background: #d6e7e0; color: var(--accent-2); }
.tour-btn.on .i-play { display: none; }
.tour-btn.on .i-stop { display: block; }
.tour-lbl { display: inline-grid; }
.tour-lbl > span { grid-area: 1 / 1; text-align: left; }
.tour-btn .l-stop, .tour-btn.on .l-play { visibility: hidden; }
.tour-btn.on .l-stop { visibility: visible; }
.hud-walk .i-play { width: 13px; height: 13px; margin: 0 6px -1px 0; vertical-align: -1px; fill: currentColor; color: #86d3b4; }
.hud-walk b { font-weight: 600; }

/* menus */
.menu-wrap { position: relative; }
/* an open menu or popover comes above the toasts (40; the bar's own layer is 9), under the tutorial (55) and dialogs */
#topbar:has([aria-expanded="true"]) { z-index: 45; }
.menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 250px; padding: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-2);
}
.menu.plans { min-width: 300px; max-height: calc(100vh - var(--bar-h) - 24px); overflow: auto; overscroll-behavior: contain; }
/* the plan menu's random apartment: room count, balconies and extra bathrooms, Generate */
.menu .rnd { display: flex; flex-direction: column; gap: 2px; padding: 0 4px 2px; }
.menu .rnd-rooms { display: flex; align-items: center; gap: 10px; padding: 4px 6px 6px; }
.menu .rnd-l { flex: none; font-size: 13px; color: var(--ink-2); cursor: help; }
.menu .rnd-rooms .seg-sm { flex: 1; min-width: 0; grid-auto-flow: unset; grid-template-columns: max-content repeat(6, minmax(26px, 1fr)); }
.menu .rnd-rooms .rnd-l { flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.menu .rnd-rooms .seg-sm button { padding: 0 6px; min-width: 26px; white-space: nowrap; }
.menu .rnd-rooms .seg-sm .rnd-any { padding: 0 9px; min-width: max-content; }
.menu .rnd [role="menuitemradio"][aria-checked="true"] { background: var(--surface); }
.menu .rnd-note { margin-left: auto; font-size: 12px; color: var(--ink-3); }
.menu .rnd [aria-disabled="true"] { cursor: default; }
.menu .rnd [aria-disabled="true"] > span:not(.rnd-note) { opacity: .55; }
.menu .rnd-note { flex: none; }
.menu .rnd [aria-disabled="true"] .rnd-box { background: var(--surface-3); border-color: var(--line-2); }
.menu .rnd [role="menuitemcheckbox"][aria-checked] { background: none; min-height: 34px; }
@media (pointer: coarse) {
  .menu .rnd [role="menuitemcheckbox"][aria-checked] { min-height: 44px; }
  .menu .rnd-rooms .seg-sm button { height: 44px; min-width: 36px; }
}
.menu .rnd [role="menuitemcheckbox"]:hover, .menu .rnd [role="menuitemcheckbox"]:focus-visible { background: var(--surface-2); }
.menu .rnd [role^="menuitem"] > span.rnd-box { flex: none; }
.menu .rnd-box { display: inline-grid; place-items: center; flex: none; width: 18px; height: 18px; border: 1.5px solid var(--line-2); border-radius: 5px; background: var(--surface); }
.menu .rnd [role^="menuitem"] .rnd-box .ico { width: 14px; height: 14px; visibility: hidden; color: #fff; stroke-width: 2.5; }
.menu .rnd [aria-checked="true"] .rnd-box { background: var(--accent); border-color: var(--accent); }
.menu .rnd [aria-checked="true"] .rnd-box .ico { visibility: visible; }
.menu .rnd-hint { margin: -2px 10px 6px; font-size: 12px; line-height: 1.4; color: var(--ink-3); max-width: 300px; }
.menu .rnd-go { justify-content: center; font-weight: 600; color: var(--accent) !important; border: 1px solid var(--accent) !important; margin-top: 2px; }
.menu .rnd-go .ico { color: var(--accent) !important; }
.menu.jump { min-width: 300px; max-height: calc(100vh - var(--bar-h) - 24px); overflow: auto; }
.menu.jump [role^="menuitem"] > span { white-space: nowrap; }
.menu.jump [role^="menuitem"] > span.mi-num { flex: none; font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.menu [role^="menuitem"] {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 6px 10px; border: 0; border-radius: 7px;
  background: none; text-align: left; color: var(--ink);
}
.menu [role^="menuitem"]:hover, .menu [role^="menuitem"]:focus-visible { background: var(--surface-2); outline: none; }
.menu [role^="menuitem"]:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.menu [role^="menuitem"] > span:not(.mi-main) { flex: 1; }
.menu [role^="menuitem"] .ico { color: var(--ink-3); }
.menu kbd { margin-left: auto; }
.menu-sep { height: 1px; margin: 6px 4px; background: var(--line); }
.menu-group { padding: 8px 10px 4px; font-size: 11.5px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
/* the File menu grows to its longest item (translations run longer), never past the window */
.menu.file { width: max-content; max-width: calc(100vw - 16px); }
/* the language switch (File menu and help sheet) */
.menu-lang { padding: 0 6px 4px; }
.menu-lang-l { display: block; padding: 6px 4px; font-size: 11.5px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.menu-lang .lang-switch { width: 100%; }
.menu-lang .lang-switch [role="radio"] { flex: 1; }
.m-head .lang-switch { flex: none; }
/* Russian runs about a quarter longer: on a narrow window the top bar's text buttons keep their icons (their
   title still says it in words) */
@media (max-width: 1000px) { html[lang="ru"] .tb-right .btn > span { display: none; } }
/* the language menu: English / Русский, the current one checked, under its button at the bar's right end */
.menu.lang { left: auto; right: 0; min-width: 200px; }
.menu.lang [role^="menuitem"] > .lang-id { flex: none; font-size: 11.5px; font-weight: 650; letter-spacing: .04em; color: var(--ink-3); }
.menu.lang [aria-checked="false"] .mi-check { visibility: hidden; }
/* More's first rows (the plan switch, Go to, Scene, Save image) only when their buttons have left a narrow bar */
.menu.file .m-narrow { display: none; }
.menu.file .m-plans .mi-main { min-width: 0; }
.menu.file .m-plan-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu.file .m-go { margin-left: auto; }
.mi-main { display: flex; flex-direction: column; flex: 1; }
.mi-main b { font-weight: 600; }
.mi-main span { font-size: 12.5px; color: var(--ink-3); }
.menu [aria-checked="true"] { background: var(--accent-soft); }
.menu .mi-check { color: var(--accent) !important; }
/* 3D scene popover: time of day, lamps, people */
.menu.pop { width: 340px; padding: 12px 14px 10px; display: flex; flex-direction: column; gap: 4px; }
.menu.pop.scene { left: 50%; transform: translateX(-50%); max-height: calc(100vh - var(--bar-h) - 16px); overflow: auto; overscroll-behavior: contain; }
.pop-h { font-size: 11.5px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); padding-bottom: 2px; }
.menu.pop .field { grid-template-columns: 92px 1fr; }
.menu.pop .seg-sm button[aria-checked="true"] { background: var(--surface); }
.menu.pop .sc-sun { min-height: 18px; margin: -4px 0 4px 100px; }
.menu.pop .sc-note { margin: 6px 0 0; padding-top: 8px; border-top: 1px solid var(--line); }
.menu.pop .switch { min-height: 32px; }
/* Graphics: Lite / High (docs/ARCHITECTURE.md §17), with its one-line hint under the switch */
.menu.pop .q-field { margin-top: 2px; }
.menu.pop .q-hint { margin: 0 0 2px; }                /* full width: one line in en and ru */
/* Save image: a short shutter flash over the 3D view */
.shutter { position: absolute; inset: 0; z-index: 8; background: #fff; pointer-events: none; animation: shutter .4s ease-out forwards; }
@keyframes shutter { from { opacity: .9; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .shutter { animation-duration: .01s; } }
/* The 3D bar makes room for its names (measured in English and in Russian, about a quarter longer, with the
   Tutorial and Language buttons): below 1900 px Finishes move into the Scene popover, Open / Save (also in the File
   menu) and Undo / Redo (their keys still work) leave the bar and Save image drops to its icon; the Tutorial's name
   goes below 1366 px (1440 px in Russian), then Scene's (1366 px in Russian, 1280 px), Go to's (1280 px), and the plan
   switch below 1180 px. Names that drop stay in the tooltip and for screen readers. */
#app[data-mode="3d"] .brand .name, #app[data-mode="3d"] .lang-btn .chev { display: none; }
@media (max-width: 1900px) {
  #app[data-mode="3d"] [data-action="snapshot"] .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  #app[data-mode="3d"] .seg-fin, #app[data-mode="3d"] .fin-lbl,
  #app[data-mode="3d"] .tb-left [data-action="open"], #app[data-mode="3d"] .tb-left [data-action="save"], #app[data-mode="3d"] .tb-left .sep:last-of-type,
  #app[data-mode="3d"] .tb-left [data-action="undo"], #app[data-mode="3d"] .tb-left [data-action="redo"] { display: none !important; }
}
@media (max-width: 1440px) { html[lang="ru"] #app[data-mode="3d"] .tut-btn .lbl { display: none; } }
@media (max-width: 1366px) {
  #app[data-mode="3d"] .tb-center { gap: 6px; }
  #app[data-mode="3d"] .tut-btn .lbl { display: none; }
  html[lang="ru"] #app[data-mode="3d"] [data-menu="scene"] .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  html[lang="ru"] #app[data-mode="3d"] [data-menu="scene"] .chev { display: none; }
}
@media (max-width: 1279px) {
  #app[data-mode="3d"] [data-menu="scene"] .lbl, #app[data-mode="3d"] [data-menu="jump"] .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  #app[data-mode="3d"] [data-menu="scene"] .chev, #app[data-mode="3d"] [data-menu="jump"] .chev { display: none; }
}
@media (max-width: 1180px) {
  #app[data-mode="3d"] .tb-left .plans-wrap, #app[data-mode="3d"] .tb-left .sep { display: none !important; }
}
/* The 2D bar: below 1366 px the language button drops its arrow; Open / Save (also in the File menu) leave the bar
   below 1180 px (1366 px in Russian, where the Tutorial's name goes below 1280 px) */
@media (max-width: 1366px) {
  .lang-btn .chev { display: none; }
  html[lang="ru"] .tb-left [data-action="open"], html[lang="ru"] .tb-left [data-action="save"], html[lang="ru"] .tb-left .sep:last-of-type { display: none; }
}
@media (max-width: 1279px) { html[lang="ru"] .tut-btn .lbl { display: none; } }
@media (max-width: 1180px) {
  .tb-left [data-action="open"], .tb-left [data-action="save"], .tb-left .sep:last-of-type { display: none; }
}
/* tablets and below (<= 1100 px): File becomes More (⋮) at the right end of the bar (src/ui/index.js moves it), with
   Help in it; the Tutorial keeps its icon below 960 px; the bar keeps the main actions' names while they fit */
@media (max-width: 1100px) {
  .tb-btn .mico { display: block; }
  [data-menu="file"] > span, [data-menu="file"] .chev { display: none; }
  .tb-left .sep, .tb-right .sep, .tb-right > [data-cmd="help"], [data-action="open"], [data-action="save"] { display: none !important; }
  .menu.file, .menu.lang { position: fixed; top: calc(var(--bar-h) + 4px); right: 8px; left: auto; }
  .menu.file { width: max-content; min-width: 280px; max-width: calc(100vw - 16px); max-height: calc(100vh - var(--bar-h) - 16px); overflow: auto; overscroll-behavior: contain; }
}
@media (max-width: 960px) { .tut-btn .lbl { display: none; } }
@media (max-width: 900px) { .brand { display: none; } }

/* ---------------- tool rail ---------------- */
#rail {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 0; z-index: 4;
  background: var(--surface); border-right: 1px solid var(--line);
}
#rail { overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
#rail .tools { display: flex; flex-direction: column; gap: 2px; }
#rail .rail-foot { margin-top: auto; padding-top: 6px; border-top: 1px solid var(--line); }
/* a tool: its icon with its name under it (two lines at most; the card beside it says more) */
.tool {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  width: 60px; min-height: 50px; padding: 6px 2px 5px; border: 1px solid transparent; border-radius: 10px;
  background: none; color: var(--ink-2);
}
.tool .ico { width: 20px; height: 20px; }
.tool .tl { max-width: 100%; font-size: 10.5px; line-height: 12px; font-weight: 550; letter-spacing: -.005em; text-align: center; color: var(--ink-2); overflow-wrap: normal; hyphens: manual; }
.tool:hover { background: var(--surface-3); color: var(--ink); }
.tool:hover .tl { color: var(--ink); }
.tool[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-2); border-color: #c9ddd5; }
.tool[aria-pressed="true"] .tl { color: var(--accent-2); font-weight: 650; }
/* the card beside a rail tool on hover or keyboard focus */
.rail-tip {
  position: fixed; z-index: 45; display: grid; grid-template-columns: max-content 1fr; align-items: center; gap: 4px 8px;
  max-width: 280px; padding: 8px 10px 9px; border-radius: 8px; background: #1f2326; color: #fff; box-shadow: var(--shadow-2);
  pointer-events: none; animation: tipin .1s ease;
}
.rail-tip b { font-size: 13px; font-weight: 650; }
.rail-tip kbd { justify-self: start; background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .28); color: #fff; }
.rail-tip span { grid-column: 1 / -1; font-size: 12.5px; line-height: 1.35; color: rgba(255, 255, 255, .82); }
.rail-tip span:empty { display: none; }
@keyframes tipin { from { opacity: 0; transform: translateX(-3px); } }

/* ---------------- side panel ---------------- */
#side { display: flex; flex-direction: column; min-height: 0; background: var(--surface); border-left: 1px solid var(--line); z-index: 4; }
#side .tabs { display: flex; gap: 0; padding: 0 8px; border-bottom: 1px solid var(--line); flex: none; }
#side .tabs button {
  position: relative; display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 7px; border: 0; background: none;
  color: var(--ink-3); font-weight: 600; white-space: nowrap;
}
#side .tabs button:hover { color: var(--ink); }
#side .tabs button[aria-selected="true"] { color: var(--ink); }
#side .tabs button[aria-selected="true"]::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--accent); }
#side .count:empty { display: none; }
#side .count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; font-size: 11px; line-height: 18px; text-align: center; font-weight: 700; background: var(--surface-3); color: var(--ink-2); }
#side .count.bad { background: var(--danger); color: #fff; }
#side [role="tabpanel"] { flex: 1; min-height: 0; overflow: auto; }
#side .empty { color: var(--ink-3); padding: 16px; margin: 0; }

/* properties */
.p-head { padding: 16px 16px 14px; border-bottom: 1px solid var(--line); }
.p-kind { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.p-kind .ico { width: 15px; height: 15px; }
.p-head h3 { margin: 4px 0 0; font-size: 17px; font-weight: 650; letter-spacing: -.01em; line-height: 1.3; }
/* the plan name: a heading that is also a text field (rename in place) */
.p-title {
  display: block; width: calc(100% + 12px); margin: 2px -6px 0; padding: 3px 6px; border: 1px solid transparent; border-radius: 6px;
  background: transparent; font-size: 17px; font-weight: 650; letter-spacing: -.01em; line-height: 1.3; color: var(--ink);
  resize: none; overflow: hidden; font-family: inherit;
}
.p-title:hover { border-color: var(--line-2); background: var(--surface); }
.p-title:focus { outline: none; border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px rgba(44, 106, 89, .18); }
.p-title::placeholder { color: var(--ink-3); font-weight: 550; }
.p-stats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.p-stats span { padding: 3px 9px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.p-stats b { color: var(--ink); font-weight: 650; }
.p-stats .p-out { background: none; border-style: dashed; }
.p-head p { margin: 8px 0 0; }
.item-head { display: flex; gap: 12px; align-items: center; }
.p-sec { padding: 12px 16px 14px; border-bottom: 1px solid var(--line); }
.p-sec h4 { margin: 0 0 8px; font-size: 12px; font-weight: 650; color: var(--ink-3); letter-spacing: .04em; text-transform: uppercase; }
.p-sec > p { margin: 6px 0 0; }
.field { display: grid; grid-template-columns: minmax(90px, 1fr) minmax(132px, 1.25fr); align-items: center; gap: 8px; min-height: 36px; }
.f-label { color: var(--ink-2); }
.f-input { position: relative; display: flex; align-items: center; }
.f-input input, .f-input select {
  width: 100%; height: 32px; padding: 0 8px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--surface);
  font-variant-numeric: tabular-nums;
}
.f-input input[type="number"] { padding-right: 34px; text-align: right; -moz-appearance: textfield; }
.f-input input::-webkit-outer-spin-button, .f-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.f-input input:hover:not(:disabled), .f-input select:hover:not(:disabled) { border-color: #b9b3a8; }
.f-input input:focus, .f-input select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(44, 106, 89, .18); }
.f-input input:disabled, .f-input select:disabled { background: var(--surface-2); color: var(--ink-3); }
.f-input .unit { position: absolute; right: 9px; font-size: 12px; color: var(--ink-3); pointer-events: none; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.f-value { color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; padding-right: 9px; }
/* small segmented choice inside a field (finish preset) */
.seg-sm { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 2px; gap: 2px; border: 1px solid var(--line-2); border-radius: 7px; background: var(--surface-3); }
.seg-sm button { height: 28px; padding: 0 8px; border: 0; border-radius: 5px; background: transparent; color: var(--ink-2); font-weight: 600; font-size: 13px; }
.seg-sm button:hover { color: var(--ink); }
.seg-sm button[aria-checked="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
.seg-sm button:focus-visible { outline-offset: 0; }
.fin-note { margin: 2px 0 6px !important; }
/* range slider with its value */
.field.range .f-input { gap: 10px; }
.field.range input[type="range"] { flex: 1; min-width: 0; height: 32px; padding: 0; border: 0; background: none; accent-color: var(--accent); box-shadow: none; }
.field.range input[type="range"]:focus { box-shadow: none; }
.field.range input[type="range"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.f-hint { margin: -2px 0 6px !important; line-height: 1.35; }
.r-val { min-width: 40px; text-align: right; font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.row2 .field { grid-template-columns: auto 1fr; }
/* a refused value: the field's range or the plan's reason, right under the field */
.f-input input[aria-invalid="true"], .f-input input[aria-invalid="true"]:focus { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(180, 35, 24, .22); }
.f-err { display: flex; align-items: flex-start; gap: 6px; margin: 2px 0 6px !important; padding: 6px 8px; border-radius: 6px;
  background: var(--danger-soft); color: #8a1c12; font-size: 12.5px; line-height: 1.35; }
.f-err .ico { flex: none; width: 15px; height: 15px; margin-top: 1px; color: var(--danger); }
.p-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.p-sec.p-actions { padding-top: 14px; }
.p-sec .p-actions { margin-top: 10px; }
.pbtn {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 7px;
  background: var(--surface); color: var(--ink); font-weight: 550; font-size: 13px;
}
.pbtn .ico { width: 16px; height: 16px; color: var(--ink-2); }
.pbtn:hover:not(:disabled) { background: var(--surface-2); }
.pbtn:disabled { opacity: .5; }
.pbtn.danger { color: var(--danger); border-color: #efc7c2; }
.pbtn.danger .ico { color: var(--danger); }
.pbtn.danger:hover:not(:disabled) { background: var(--danger-soft); }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 7px; font-size: 12.5px; font-weight: 550; }
.badge .ico { width: 15px; height: 15px; }
.badge.lock { background: var(--warn-soft); color: var(--warn); }
.badge.open { background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); }
.switch { display: flex; align-items: center; gap: 10px; min-height: 36px; cursor: pointer; color: var(--ink-2); }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch .track { position: relative; flex: none; width: 34px; height: 20px; border-radius: 10px; background: #c9c4bb; transition: background .15s; }
.switch .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .15s; }
.switch input:checked + .track { background: var(--accent); }
.switch input:checked + .track::after { transform: translateX(14px); }
.switch input:focus-visible + .track { outline: 2px solid var(--accent); outline-offset: 2px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip { height: 28px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); color: var(--ink-2); font-size: 12.5px; font-weight: 550; }
.chip:hover { border-color: #b9b3a8; }
.chip[aria-pressed="true"] { background: var(--accent-soft); border-color: #b6d2c7; color: var(--accent-2); }
.room-list, .mini-list { list-style: none; margin: 0; padding: 0; }
.room-list button, .mini-list button {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 34px; padding: 4px 8px; margin: 0 -8px; width: calc(100% + 16px);
  border: 0; border-radius: 7px; background: none; text-align: left;
}
.room-list button:hover, .mini-list button:hover { background: var(--surface-2); }
.rl-dot { width: 10px; height: 10px; border-radius: 3px; flex: none; background: #c0bbb3; }
.rl-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rl-note { margin-left: 2px; font-size: 11.5px; color: var(--ink-3); }
.rl-area { color: var(--ink-3); font-variant-numeric: tabular-nums; font-size: 13px; }
.mini-list .ico { color: var(--ink-3); width: 16px; height: 16px; }
.mini-list span:nth-child(2) { flex: 1; }
.t-living { background: #c9a66b; } .t-kitchen { background: #d08a5c; } .t-dining { background: #d4a373; } .t-bedroom { background: #7d9cc0; }
.t-study { background: #a58fc0; } .t-bathroom, .t-wc { background: #6aaeb6; } .t-utility { background: #8a9aa8; } .t-hall, .t-corridor { background: #b3aca1; }
.t-storage, .t-closet { background: #a39b8e; } .t-balcony { background: #8fb08a; }

/* thumbnails of catalogue symbols (same primitives as the plan drawing) */
.thumb { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 8px; background: var(--surface-2); }
.thumb.big { width: 64px; height: 64px; flex: none; border: 1px solid var(--line); }
.sym { width: 44px; height: 44px; overflow: visible; }
.thumb.big .sym { width: 52px; height: 52px; }
.sym * { vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.sym .s-outline { fill: #ffffff; stroke: #34322f; stroke-width: 1.1px; }
.sym .s-detail { fill: none; stroke: #7d796f; stroke-width: .8px; }
.sym .s-fill-soft { fill: rgba(176, 150, 112, .18); stroke: rgba(120, 100, 80, .55); stroke-width: .9px; }
.sym .s-overhead { fill: none; stroke: #7d796f; stroke-width: .8px; stroke-dasharray: 3 2; }
.sym .s-light { fill: none; stroke: #b08a3e; stroke-width: 1px; }
.sym line.s-outline, .sym polyline { fill: none; }

/* catalogue */
.cat-search { position: sticky; top: 0; z-index: 1; padding: 12px 16px 10px; background: var(--surface); border-bottom: 1px solid transparent; }
/* the search stays on top; once the list scrolls under it, a hairline and a soft shadow separate them */
.cat-search.stuck { border-bottom-color: var(--line); box-shadow: 0 4px 10px -6px rgba(29, 33, 37, .18); }
.search { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface-2); }
.search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(44, 106, 89, .18); background: var(--surface); }
.search .ico { color: var(--ink-3); width: 16px; height: 16px; }
.search input { flex: 1; min-width: 0; height: 32px; border: 0; background: none; outline: none; }
/* every category in view: the chips wrap rather than run off the panel's edge (they scroll away with the list) */
.cat-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 12px; border-bottom: 1px solid var(--line); }
.cat-chips .chip { flex: none; height: 26px; padding: 0 10px; font-size: 12.5px; }
.cat-chips .chip[aria-current="true"] { border-color: var(--accent); color: var(--accent-2); background: var(--accent-soft); }
.cat-body { padding: 4px 16px 8px; }
.cat-group h4 { margin: 14px 0 8px; font-size: 12px; font-weight: 650; color: var(--ink-3); letter-spacing: .04em; text-transform: uppercase; }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tile {
  display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 108px; padding: 8px 6px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); text-align: center; color: var(--ink);
}
.tile:hover { border-color: #b9b3a8; box-shadow: var(--shadow-1); }
.tile .thumb { width: 100%; height: 72px; background: var(--surface-2); }
.tile .sym { width: 66px; height: 66px; }
.tile.armed { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(44, 106, 89, .25); }
.t-name { font-size: 12.5px; font-weight: 600; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.t-size { font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cat-hint { margin: 0; padding: 8px 16px 16px; font-size: 12.5px; color: var(--ink-3); }

/* issues */
.iss-group { padding: 4px 16px 8px; }
.iss-group h4 { margin: 14px 0 8px; font-size: 12px; font-weight: 650; color: var(--ink-3); letter-spacing: .04em; text-transform: uppercase; }
.iss-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.iss { display: flex; align-items: flex-start; gap: 10px; padding: 9px 8px 9px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
.iss > .ico { margin-top: 1px; }
.iss.error > .ico { color: var(--danger); }
.iss.warn > .ico { color: var(--warn); }
.iss.note > .ico { color: var(--ink-3); }
.iss.furnish > .ico { color: var(--accent); }
.iss-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.iss-body b { font-size: 13px; font-weight: 650; }
.iss-n { margin-left: 4px; padding: 0 6px; border-radius: 999px; background: var(--surface-3); color: var(--ink-2); font-size: 11.5px; font-weight: 650; }
.iss-body span { font-size: 13px; color: var(--ink-2); }
.iss-go { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid transparent; border-radius: 7px; background: none; color: var(--ink-2); }
.iss-go:hover { background: var(--surface-2); border-color: var(--line); color: var(--accent); }
.empty-ok { display: flex; gap: 12px; align-items: flex-start; margin: 16px; padding: 14px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-2); }
.empty-ok p { margin: 0; color: var(--ink-2); }
.empty-ok b { color: var(--accent-2); }
.empty-ok .ico { width: 22px; height: 22px; }

/* ---------------- stage overlays ---------------- */
.hud { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.hud > * { pointer-events: auto; }
.hud-zoom { position: absolute; right: 16px; bottom: 16px; display: flex; padding: 3px; gap: 2px; border-radius: 10px; background: rgba(255, 255, 255, .95); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.hud-zoom button { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 7px; background: none; color: var(--ink-2); }
.hud-zoom button:hover { background: var(--surface-3); color: var(--ink); }
.hud-hint {
  position: absolute; top: 48px; left: 50%; transform: translateX(-50%); max-width: 80%; padding: 8px 14px; border-radius: 999px;
  background: rgba(29, 33, 37, .9); color: #fff; font-size: 13px; font-weight: 500; box-shadow: var(--shadow-2); pointer-events: none;
}
.hud-walk {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); padding: 7px 14px; border-radius: 999px; pointer-events: none;
  background: rgba(20, 22, 25, .68); color: rgba(255, 255, 255, .94); font-size: 12.5px; width: max-content; max-width: calc(100% - 32px);
  text-align: center; line-height: 1.7; opacity: 0; transition: opacity .3s ease;
}
.hud-walk.show { opacity: 1; }
.hud-walk kbd { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .25); color: #fff; min-width: 18px; padding: 0 4px; margin-right: 2px; }

/* empty plan */
.empty-state {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; width: min(520px, 90%); padding: 28px 32px 30px;
  text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-2);
  pointer-events: none;                 /* a hint, not a modal: plan clicks pass through, only the buttons take them */
}
.empty-state button { pointer-events: auto; }
.empty-state img { width: 300px; max-width: 100%; height: auto; display: block; margin: -4px auto 8px; }
.empty-state h2 { margin: 0 0 6px; font-size: 20px; letter-spacing: -.01em; }
.empty-state p { margin: 0 auto 18px; max-width: 400px; color: var(--ink-2); }
.es-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

/* files dragged over the stage */
.drop-veil { position: absolute; inset: 12px; z-index: 7; display: grid; place-items: center; pointer-events: none;
  border: 2px dashed var(--accent); border-radius: 16px; background: rgba(229, 239, 235, .82); }
.drop-veil > div { display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 360px; text-align: center; color: var(--ink-2); }
.drop-veil .ico { width: 40px; height: 40px; padding: 8px; border-radius: 12px; background: var(--accent); color: #fff; }
.drop-veil b { font-size: 17px; color: var(--ink); }

/* Build 3D progress */
#progress { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; background: rgba(243, 242, 239, .72); backdrop-filter: blur(3px); }
#progress[hidden] { display: none; }
/* a rebuild in 3D (graphics, scene, finishes, undo): the scene being rebuilt stays a soft blur behind the card */
#app[data-mode="3d"] #progress:not(.boot) { background: rgba(243, 242, 239, .9); backdrop-filter: blur(14px) saturate(.8); }
#progress.boot { position: fixed; z-index: 60; background: var(--bg); backdrop-filter: none; }   /* over the start-up veil */
.pg-card { width: 420px; max-width: 90%; padding: 20px 22px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-2); }
.pg-head { display: flex; gap: 12px; align-items: center; }
.pg-head > .ico { width: 36px; height: 36px; padding: 7px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); }
.pg-head div { display: flex; flex-direction: column; }
.pg-head b { font-size: 15px; }
.pg-now { color: var(--ink-2); font-size: 13px; font-variant-numeric: tabular-nums; }
.pg-bar { height: 4px; margin: 16px 0 12px; border-radius: 2px; background: var(--surface-3); overflow: hidden; }
.pg-bar span { display: block; height: 100%; width: 100%; border-radius: 2px; background: var(--accent); transform-origin: 0 50%; transform: scaleX(.03); will-change: transform; }
.pg-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
.pg-steps li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-3); min-height: 22px; }
.pg-steps li .ico { width: 15px; height: 15px; opacity: .25; }
.pg-steps li.done { color: var(--ink-2); }
.pg-steps li.done .ico { opacity: 1; color: var(--accent); }
.pg-steps li.now { color: var(--ink); font-weight: 600; }
.pg-steps li.now .ico { opacity: 0; }
.pg-steps li.now::before { content: ""; position: absolute; width: 11px; height: 11px; margin-left: 2px; border: 2px solid var(--accent-soft); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
.pg-steps li { position: relative; }
/* a stage still to come: a small hollow dot (a check reads as done at a glance) */
.pg-steps li:not(.done):not(.now) .ico { opacity: 0; }
.pg-steps li:not(.done):not(.now)::before { content: ""; position: absolute; left: 4px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; box-sizing: border-box; border: 1.5px solid #9aa0a6; border-radius: 50%; }

/* toasts */
/* centred on the stage, level with the zoom group, clear of it; above the walk hint in 3D */
#toasts {
  position: fixed; left: calc(var(--rail-w) + (100vw - var(--rail-w) - var(--side-w)) / 2); bottom: 16px; transform: translateX(-50%);
  z-index: 40; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none;
}
body[data-ui="3d"] #toasts { left: 50%; bottom: 64px; }
body[data-ui="3d"] .toast { max-width: min(560px, 90vw); }
.toast {
  display: flex; align-items: center; gap: 10px; max-width: min(520px, calc(100vw - var(--rail-w) - var(--side-w) - 280px)); min-width: 0;
  padding: 8px 8px 8px 12px; border-radius: 10px;
  background: #1f2326; color: #fff; box-shadow: var(--shadow-2); pointer-events: auto; animation: toastin .18s ease;
}
.toast .ico { width: 18px; height: 18px; }
.toast.info > .ico { color: #a9c7f0; }
.toast.success > .ico { color: #86d3b4; }
.toast.error { background: #3a1714; }
.toast.error > .ico { color: #ff9b8f; }
.toast.warn > .ico { color: #f5c46b; }
.t-msg { flex: 1; font-size: 13.5px; }
.t-act { height: 28px; padding: 0 10px; border: 0; border-radius: 6px; background: rgba(255, 255, 255, .12); color: #fff; font-weight: 600; font-size: 13px; }
.t-act:hover { background: rgba(255, 255, 255, .2); }
.t-close { display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 6px; background: none; color: rgba(255, 255, 255, .75); }
.t-close:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.t-close .ico { width: 15px; height: 15px; }
.toast.out { opacity: 0; transform: translateY(6px); transition: opacity .18s, transform .18s; }
@keyframes toastin { from { opacity: 0; transform: translateY(8px); } }

/* dialogs */
.modal-back { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 24px; background: rgba(24, 26, 29, .4); backdrop-filter: blur(2px); animation: fadein .15s ease; }
.modal-back.out { opacity: 0; transition: opacity .15s; }
/* the first-run tour: the page stays usable around it; a press outside closes it and still lands */
.modal-back.pass { pointer-events: none; background: rgba(24, 26, 29, .22); backdrop-filter: none; }
.modal-back.pass .modal { pointer-events: auto; }
@keyframes fadein { from { opacity: 0; } }
.modal { width: 480px; max-width: calc(100vw - 16px); max-height: calc(100vh - 48px); overflow: auto; padding: 20px 22px; background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-2); outline: none; }
.modal.wide { width: 1000px; }
.modal.help { max-height: min(800px, calc(100vh - 48px)); }
.m-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.m-head h2 { margin: 0; font-size: 18px; letter-spacing: -.01em; }
.m-text { margin: 0 0 18px; color: var(--ink-2); }
.m-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.icon-btn { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 8px; background: none; color: var(--ink-2); }
.icon-btn:hover { background: var(--surface-3); color: var(--ink); }
.help-grid { display: grid; grid-template-columns: 300px 1fr; gap: 28px; }
.help-side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.help-steps { display: flex; flex-direction: column; gap: 14px; }
.help-set { display: grid; gap: 6px; padding: 10px 12px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.help-set .field { grid-template-columns: auto minmax(0, 1fr); gap: 12px; min-height: 32px; }
.help-set .q-hint { margin: 0; }
.step { margin: 0; }
.step img { display: block; width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); }
.step figcaption { display: grid; grid-template-columns: 24px 1fr; gap: 2px 8px; margin-top: 8px; font-size: 13px; color: var(--ink-2); }
.step figcaption b { color: var(--ink); font-size: 14px; }
.step figcaption span:last-child { grid-column: 2; }
.step-n { grid-row: span 2; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 12px; font-weight: 700; }
.help-keys h3 { margin: 4px 0 6px; font-size: 12px; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); }
.help-keys dl { margin: 0 0 14px; }
.help-keys dl > div { display: grid; grid-template-columns: 200px 1fr; align-items: center; gap: 12px; padding: 5px 0; border-bottom: 1px solid var(--line); }
.help-keys dt { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; }
.help-keys dd { margin: 0; color: var(--ink-2); }
.kb-or { font-size: 12px; color: var(--ink-3); margin: 0 3px; }
.kb-word { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.m-head .grow { flex: 1; }
.m-head .btn { height: 34px; }

/* the interactive tutorial and its first-visit offer: styles/tutorial.css (linked by src/ui/tutorial.js) */

/* ---------------- responsive ---------------- */
@media (max-width: 1500px) {
  :root { --side-w: 304px; }
  .brand .name, .fin-lbl { display: none; }
  /* the plan button shows the plan's short name ("Your apartment", "Three bedrooms") */
  .plan-btn .plan-pre, .plan-btn .plan-name { display: none !important; }
  .plan-btn .plan-short { display: block; }
  .plan-btn { max-width: 300px; }
  /* compact tiles: three across, symbol and name (the size is in the tooltip) */
  .tiles { gap: 6px; }
  .tile { min-height: 0; padding: 6px 4px 7px; gap: 3px; }
  .tile .thumb { height: 54px; }
  .tile .sym { width: 50px; height: 50px; }
  .tile .t-size { display: none; }
  .t-name { font-size: 11.5px; }
}
@media (max-width: 1100px) {
  .seg button:not([aria-checked="true"]) span { display: none; }
  .seg button { padding: 0 10px; }
}
@media (max-width: 920px) {
  #app[data-mode="3d"] .seg button span, #app[data-mode="3d"] [data-menu="jump"] .lbl,
  #app[data-mode="3d"] [data-menu="jump"] .chev { display: none; }
  #app[data-mode="3d"] .seg button { padding: 0 9px; }
}
@media (max-width: 1360px) {
  :root { --side-w: 292px; }
  /* the three tabs keep their names in Russian too (Свойства · Мебель · Замечания) */
  #side .tabs { padding: 0 4px; gap: 0; }
  #side .tabs button { padding: 0 7px; font-size: 13.5px; }
  .plan-btn { max-width: 240px; }
  #app[data-mode="3d"] .plan-btn { max-width: 190px; }     /* clear of the centred 3D view switch */
  .help-grid { grid-template-columns: 240px 1fr; }
}
@media (max-height: 760px) {
  .help-steps img { display: none; }
}

/* ---------------- after an import: what next ---------------- */
/* docked at the bottom left of the plan, just above the north arrow and scale bar band (the editor's HUD.bottom);
   the zoom group and the toasts keep that band */
.coach { position: absolute; left: 16px; bottom: 72px; z-index: 5; max-width: calc(100% - 32px); max-height: calc(100% - 88px); display: flex; }
.coach[hidden] { display: none; }
.coach-card {
  position: relative; width: 308px; max-width: 100%; overflow: auto; padding: 16px 18px 14px; outline: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-2); animation: coachin .2s ease;
}
.coach[data-state="pill"] .coach-card, .coach[data-state="card"] .coach-pill { display: none; }
@keyframes coachin { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .coach-card, .coach-pill { animation: none; } }
.coach-x { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; }
.coach-kicker { margin: 0 0 2px; padding-right: 26px; font-size: 11.5px; font-weight: 650; letter-spacing: .035em; text-transform: uppercase; color: var(--accent-2); }
.coach h2 { margin: 0 0 10px; padding-right: 24px; font-size: 17px; letter-spacing: -.01em; }
.coach-list { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.coach-list li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: start; font-size: 13.5px; line-height: 1.4; color: var(--ink); }
.coach-list .ico { width: 18px; height: 18px; margin-top: 1px; color: var(--accent); }
.coach-next { margin: 0 0 12px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--ink-2); }
.coach-foot { display: flex; flex-wrap: wrap; gap: 8px; }
.coach-foot .btn { height: 34px; padding: 0 12px; }
.coach-foot .btn .ico { width: 16px; height: 16px; }
.coach-foot .btn.accent .ico { color: #fff; }
.coach-foot .btn.ghost { margin-left: auto; }
/* folded: the next step as one button, the tips behind the chevron */
.coach-pill {
  display: flex; align-items: center; gap: 2px; min-width: 0; padding: 4px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-2); animation: coachin .2s ease;
}
.coach-go {
  display: flex; align-items: center; gap: 8px; min-width: 0; height: 34px; padding: 0 14px 0 11px; border: 0; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink); font-size: 13.5px; font-weight: 600; white-space: nowrap;
}
.coach-go:hover { background: var(--accent-2); }
.coach-go > span { overflow: hidden; text-overflow: ellipsis; }
.coach-go .ico { flex: none; width: 17px; height: 17px; }
.coach-pill .icon-btn { flex: none; width: 32px; height: 32px; border-radius: 999px; }
.coach-pill .icon-btn .ico { width: 17px; height: 17px; }
.coach-more .ico { transform: rotate(180deg); }

/* ---------------- phone (390 x 844 and similar) ---------------- */
/* The plan gets the width: a narrow labelled rail on the left, the panel as a bottom sheet (its tabs stay in
   view; a tab opens it), the top bar's actions as icons (their names are in the tooltips). */
@media (max-width: 760px) {
  :root { --rail-w: 62px; --sheet-h: 46px; }
  #app {
    grid-template-rows: var(--bar-h) minmax(0, 1fr) var(--sheet-h);
    grid-template-columns: var(--rail-w) minmax(0, 1fr);
    grid-template-areas: "bar bar" "rail stage" "side side";
  }
  #app[data-mode="3d"] { grid-template-rows: var(--bar-h) minmax(0, 1fr) 0; grid-template-columns: 0 minmax(0, 1fr); }
  .hud-walk { bottom: auto; top: 12px; }                /* clear of the minimap in the bottom-left corner */
  /* the zoom group stands upright in the corner (+ on top), clear of the scale bar along the bottom */
  .hud-zoom { flex-direction: column-reverse; right: 12px; bottom: 12px; }
  .tool { width: 58px; min-height: 48px; padding: 5px 1px 4px; }
  .tool .tl { font-size: 10px; line-height: 11.5px; }
  #rail { padding: 6px 0; }
  /* the sheet */
  #side { position: relative; border-left: 0; border-top: 1px solid var(--line); box-shadow: 0 -4px 18px rgba(29, 33, 37, .08); z-index: 20; }
  #side .tabs { padding: 0 8px; justify-content: space-around; }
  #side .tabs button { flex: 1; justify-content: center; }
  #side:not(.open) [role="tabpanel"] { display: none !important; }
  #side:not(.open) .tabs button[aria-selected="true"]::after { display: none; }
  #side.open { position: fixed; left: 0; right: 0; bottom: 0; height: min(64vh, 560px); border-radius: 14px 14px 0 0; box-shadow: 0 -10px 32px rgba(29, 33, 37, .18); }
  .sheet-handle { display: block; position: absolute; top: -14px; left: 50%; width: 56px; height: 18px; margin-left: -28px; padding: 0; border: 0; background: none; }
  .sheet-handle span { display: block; width: 40px; height: 5px; margin: 6px auto 0; border-radius: 3px; background: var(--line-2); }
  #side.open .sheet-handle { top: 2px; }
  #side.open .tabs { padding-top: 10px; }
  /* the top bar */
  #topbar { gap: 6px; padding: 0 8px; }
  .brand, .tb-left .sep, .tb-right .sep, [data-action="open"], [data-action="save"], .tb-right > [data-cmd="help"], .layout-step { display: none !important; }
  .plan-btn { max-width: 100%; padding: 0 8px; margin-right: 0; gap: 4px; }
  .plan-btn > .ico:first-child { display: none; }
  .tb-left { flex: 1 1 auto; min-width: 0; gap: 2px; }
  .tb-left .plans-wrap { flex: 0 1 auto; }
  /* More (⋮) and Tutorial as icons (the 1100 px tier); Language as its globe and code, finger-sized */
  .lang-btn { gap: 3px; }
  .lang-btn .ico { width: 17px; height: 17px; }
  .lang-btn .lang-code { min-width: 0; font-size: 12px; }
  .tb-btn { min-width: 34px; padding: 0 6px; }
  .tb-right { gap: 4px; flex: none; }
  .tb-right .btn { width: 44px; padding: 0; gap: 0; }        /* finger-sized; the plan button gives way */
  .tb-right .btn > span { display: none; }
  .furnish-group:has(.layout-step:not([hidden])) [data-action="furnish"] { border-radius: var(--r); }
  /* 3D: the view switches as icons, no plan menu */
  #app[data-mode="3d"] .tb-left { display: none; }
  #app[data-mode="3d"] .tb-center { margin: 0; flex: 1 1 auto; justify-content: flex-start; gap: 4px; }
  #app[data-mode="3d"] .seg button { padding: 0 9px; }
  #app[data-mode="3d"] .seg button span, #app[data-mode="3d"] .tb-center .lbl, #app[data-mode="3d"] .tb-center .chev { display: none; }
  /* 3D on a phone: finger-sized (44 px) targets; Save image moves to the foot of the Scene popover */
  #app[data-mode="3d"] #topbar { gap: 4px; padding: 0 6px; }
  #app[data-mode="3d"] .tb-center .tb-btn, #app[data-mode="3d"] .tb-right .btn { width: 44px; min-width: 44px; height: 44px; padding: 0; gap: 0; }
  #app[data-mode="3d"] .tb-right .tb-btn { width: 44px; min-width: 44px; height: 44px; padding: 0; }
  #app[data-mode="3d"] .tb-right .tb-btn:not(.lang-btn) .ico { width: 20px; height: 20px; }
  #app[data-mode="3d"] .seg { padding: 2px; gap: 2px; }
  #app[data-mode="3d"] .seg button { width: 44px; height: 44px; padding: 0; justify-content: center; }
  #app[data-mode="3d"] .seg .ico, #app[data-mode="3d"] .tb-center .tb-btn .ico, #app[data-mode="3d"] .tb-right .btn .ico { width: 20px; height: 20px; }
  #app[data-mode="3d"] .tour-ico .ico { width: 18px; height: 18px; }
  #app[data-mode="3d"] .tb-center [data-action="snapshot"] { display: none; }
  .menu.pop .field { grid-template-columns: 84px 1fr; }
  .menu.pop .sc-sun { margin-left: 92px; }
  .menu.pop .seg-sm button { height: 44px; }
  .menu.pop .switch { min-height: 44px; }
  .menu.pop input[type="range"] { height: 44px; }
  .menu.jump [role^="menuitem"] { min-height: 44px; }
  .sc-snap { width: 100%; height: 44px; margin-top: 8px; }
  .sc-snap .ico { width: 18px; height: 18px; }
  /* phones: help and the interface language at the foot of the Scene popover (the 3D bar has no File menu) */
  .sc-foot { display: flex; gap: 8px; margin-top: 8px; }
  .sc-foot .sc-help { flex: 1; height: 44px; }
  .sc-foot .sc-help .ico { width: 18px; height: 18px; }
  .sc-foot .lang-switch { flex: 1; }
  .sc-foot .lang-switch [role="radio"] { flex: 1; height: 44px; }
  .menu.plans { position: fixed; top: calc(var(--bar-h) + 4px); left: 8px; right: 8px; min-width: 0; max-height: calc(100vh - var(--bar-h) - 24px); overflow: auto; }
  .menu.pop.scene, .menu.jump { position: fixed; top: calc(var(--bar-h) + 4px); left: 8px; right: 8px; width: auto; min-width: 0; transform: none; }
  /* toasts above the sheet, across the width */
  #toasts { left: 50%; bottom: calc(var(--sheet-h) + 10px); width: calc(100vw - 16px); }
  .toast { max-width: 100%; }
  /* 3D: toasts under the controls hint at the top, clear of the joystick and the minimap at the bottom */
  body[data-ui="3d"] #toasts { top: calc(var(--bar-h) + 80px); bottom: auto; }
  /* dialogs: one column, smaller margins */
  .modal-back { padding: 8px; }
  .modal { padding: 16px; max-height: calc(100vh - 16px); }
  .m-head { flex-wrap: wrap; position: relative; padding-right: 44px; }
  /* the close button keeps the title's row, top right, when the header wraps */
  .m-head > [data-close] { position: absolute; top: -6px; right: -6px; width: 44px; height: 44px; }
  .help-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .help-steps { display: none; }
  .help-keys dl > div { grid-template-columns: minmax(0, 44%) minmax(0, 1fr); gap: 8px; }
  .coach { left: 8px; right: 8px; max-width: none; }
  .coach-card { width: 100%; }
  .coach-go { gap: 6px; padding: 0 12px 0 10px; }
  .coach-pill .icon-btn { width: 28px; height: 28px; }
}

/* ---------------- touch screens (any size) ---------------- */
/* finger-sized targets: 44 px controls in the bars, menus, popovers and the zoom group */
@media (pointer: coarse) {
  .tb-btn { min-width: 44px; height: 44px; }
  .btn, .plan-btn { height: 44px; }
  .seg button { height: 40px; }
  .layout-step { height: 44px; }
  .layout-step button { width: 40px; height: 42px; }
  .menu [role^="menuitem"] { min-height: 44px; }
  .seg-sm button { height: 40px; }
  .menu.pop .switch, .switch { min-height: 44px; }
  .menu.pop input[type="range"] { height: 44px; }
  .hud-zoom button { width: 44px; height: 44px; }
  .t-act, .t-close { min-height: 40px; min-width: 40px; }
  /* a tablet in 3D: toasts at the top, clear of the joystick in the bottom-left corner */
  body[data-ui="3d"] #toasts { top: calc(var(--bar-h) + 80px); bottom: auto; }
  .hud-walk { bottom: auto; top: 12px; }
}

/* captures without ui=1: the 3D or 2D canvas fills the window, no chrome */
html.capture .chrome, html.capture #topbar, html.capture #side, html.capture #rail { display: none !important; }
html.capture #app { grid-template-rows: 0 minmax(0, 1fr); grid-template-columns: 0 minmax(0, 1fr) 0; }
/* Graphics in the File menu, under Language; its hint wraps to the menu's width instead of widening it */
.menu-q .q-hint { width: 0; min-width: calc(100% - 8px); margin: 6px 4px 2px; }
/* a switch that waits while a build runs (still focusable: a pick then applies when the build ends) */
.seg-sm button[aria-disabled="true"] { opacity: .7; }

/* ---------------- narrow phones: what leaves the bar is in More (⋮) ---------------- */
/* 2D, <= 540 px: the plan switch moves to More's first row (its menu opens from there); undo and redo close up */
@media (max-width: 540px) {
  #app[data-mode="2d"] #topbar { gap: 4px; padding: 0 6px; }
  #app[data-mode="2d"] .tb-left .plans-wrap { display: contents; }
  #app[data-mode="2d"] .plan-btn { display: none; }
  #app[data-mode="2d"] .tb-left .tb-btn { min-width: 40px; width: 40px; padding: 0; }
  #app[data-mode="2d"] .menu.file .m-2d { display: flex; }
  #app[data-mode="2d"] .menu.file .menu-sep.m-narrow { display: block; }
}
/* 3D, <= 540 px: Go to and Scene (and Save image, already off the bar) are More's first rows */
@media (max-width: 540px) {
  #app[data-mode="3d"] [data-menu="jump"], #app[data-mode="3d"] [data-menu="scene"] { display: none; }
  #app[data-mode="3d"] .tb-center .menu-wrap { display: contents; }
  #app[data-mode="3d"] .seg button { width: 40px; }
  #app[data-mode="3d"] .menu.file .m-3d { display: flex; }
  #app[data-mode="3d"] .menu.file .menu-sep.m-narrow { display: block; }
}
/* the smallest phones (360-380 px): 40 px targets across the bar */
@media (max-width: 380px) {
  #topbar .tb-btn, #topbar .tb-right .btn, #app[data-mode="3d"] #topbar .tb-center .tb-btn, #app[data-mode="3d"] #topbar .tb-right .btn,
  #app[data-mode="3d"] #topbar .tb-right .tb-btn { min-width: 40px; width: 40px; padding: 0; }
  #app[data-mode="3d"] .seg button { width: 38px; }
  #topbar .tb-right { gap: 3px; }
}

/* room properties: wall colour swatches */
.swatches { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 12px; }
.swatch { width: 28px; height: 28px; padding: 0; border: 1px solid var(--line-2); border-radius: 50%; background: var(--sw); cursor: pointer; }
.swatch:hover { border-color: #b9b3a8; }
.swatch[aria-pressed="true"] { outline: 2px solid var(--accent); outline-offset: 2px; }

/* wall properties: one colour control per side (accent wall) */
.side-colour { margin: 12px 0 14px; }
.side-colour h5 { margin: 0 0 6px; font-size: 13px; font-weight: 600; }

/* the Colours tab: wheel, base colour, harmony buttons, the five colours */
.col-panel { padding: 12px 16px 18px; }
.col-hint { margin: 0 0 10px; }
.col-ready { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 12px; }
.col-pal { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 5px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); color: var(--ink-2); font: inherit; text-align: left; }
.col-pal:hover { background: var(--surface-2); color: var(--ink); }
.col-pal[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-2); }
.col-pal .strip { display: flex; height: 16px; border-radius: 4px; overflow: hidden; box-shadow: 0 0 0 1px var(--line-2); }
.col-pal .strip i { flex: 1; background: var(--sw); }
.col-pal .nm { font-size: 11.5px; font-weight: 550; line-height: 1.2; overflow-wrap: anywhere; hyphens: manual; }
.col-wheel { position: relative; width: min(100%, 232px); aspect-ratio: 1; margin: 0 auto 12px; touch-action: none; cursor: crosshair; border-radius: 50%; box-shadow: 0 0 0 1px var(--line-2); -webkit-user-select: none; user-select: none; }
.col-wheel canvas, .col-wheel svg { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; }
.col-wheel .marker { fill: none; stroke: #fff; stroke-width: 2.5; filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, .75)); }
.col-wheel .dot { fill: var(--sw); stroke: #fff; stroke-width: 1.6; filter: drop-shadow(0 0 1px rgba(0, 0, 0, .7)); }
.col-base { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 6px 10px; }
.col-base input { min-width: 0; height: 34px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--surface); color: var(--ink); font: inherit; font-variant-numeric: tabular-nums; }
.col-base input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(44, 106, 89, .18); }
.col-base input[aria-invalid] { border-color: var(--danger); }
.col-msg { grid-column: 1 / -1; }
.col-msg .f-err { margin: 0 !important; overflow-wrap: anywhere; }
.col-h { margin: 14px 0 6px; font-size: 12px; font-weight: 650; color: var(--ink-3); letter-spacing: .04em; text-transform: uppercase; }
.col-harm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.col-harm button { min-height: 36px; padding: 4px 6px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); color: var(--ink-2); font: inherit; font-size: 13px; font-weight: 550; line-height: 1.25; text-align: center; hyphens: manual; }
.col-harm button:hover { background: var(--surface-2); color: var(--ink); }
.col-harm button[aria-checked="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-2); }
.col-chips { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.col-chip { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.col-chip .sw { width: 100%; height: 44px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--sw); }
.col-chip.base .sw { outline: 2px solid var(--accent); outline-offset: 1px; }
.col-chip code { font: 600 11px/1.2 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; color: var(--ink); letter-spacing: -.02em; }
.col-chip .tag { font-size: 10.5px; color: var(--ink-3); line-height: 1.1; text-align: center; overflow-wrap: anywhere; }
.col-apply-note { margin: 0 0 8px; }
.col-sel { margin: 0 0 8px; color: var(--ink-2); overflow-wrap: anywhere; }
.col-sel[data-state="room"] { color: var(--ink); font-weight: 600; }
.col-apply { display: grid; grid-template-columns: 1fr; gap: 6px; }
.col-apply .pbtn { justify-content: center; text-align: center; height: auto; min-height: 34px; padding: 6px 10px; line-height: 1.25; }
.col-done { margin: 8px 0 0; min-height: 1.3em; color: var(--accent-2); overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .col-apply .pbtn { min-height: 44px; }
  .col-wheel { width: min(100%, 200px); }
  .col-base input { height: 44px; }
  .col-harm button { min-height: 44px; }
  .col-pal { min-height: 44px; }
}