:root {
  --bg: #f3f4f6; --panel: #ffffff; --line: #dfe3e8; --text: #1e232a; --muted: #6b7480;
  --accent: #1f6feb; --accent2: #e8f0fe; --accent-ink: #1c3d7a;
  --arm: #44546b; --skin: #ecc9a6; --skin-shade: #d6a983; --skin2: #4b6a8a; --hair: #9a8f86;
  --ruler-bg: #d8ab68; --ruler-fg: #4a3011; --stage: #ffffff; --figure: #5d6f88; --top: #13233f; --top2: #1c3157; --side-bg: #eceff3;
  --sidebar-w: 470px; --side-zoom: 1; --top-zoom: 1; --ruler: 28px;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--text); background: var(--bg); display: flex; flex-direction: column; }
kbd { font: 600 11.5px ui-monospace, Menlo, Consolas, monospace; background: #f3f4f6; border: 1px solid #cfd5dd; border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; }
code { font: 12.5px ui-monospace, Menlo, Consolas, monospace; background: #f1f3f6; padding: 1px 4px; border-radius: 4px; }

/* ------------------------------------------------------------------ top bar */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 14px; min-height: 52px; position: relative; z-index: 5;
  background: linear-gradient(180deg, var(--top2), var(--top)); border-bottom: 1px solid #0b1528; color: #fff; zoom: var(--top-zoom); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; flex: none; }
.brand img { display: block; width: 30px; height: 30px; }
.brandName { font-size: 18px; font-weight: 750; letter-spacing: -.01em; white-space: nowrap; }
.brandTld { font-size: 13px; font-weight: 600; color: #6aa8ff; letter-spacing: 0; margin-left: 1px; }
.topctl { display: flex; align-items: center; gap: 10px; justify-content: flex-end; min-width: 170px; }
.topctl [hidden] { display: none !important; }
.topBtn { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 13px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel);
  color: var(--text); font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s, color .15s; }
.topbar .topBtn { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.28); color: #fff; }
.topbar .topBtn:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.5); }
.topBtn .ico { font-size: 11px; color: #8fc0ff; width: 12px; text-align: center; }
.topbar .chk { color: #dbe5f5; }
.topbar .topBtn.playing { background: var(--accent); border-color: #8fc0ff; color: #fff; box-shadow: 0 0 0 3px rgba(143,192,255,.35); }
.topBtn.playing .ico { color: #fff; }
.topBtn.iconOnly { width: 32px; padding: 0; justify-content: center; }
.helpGlyph { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 800; font-size: 13px; }
.chk { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
button.ghost { border: 1px solid var(--line); background: var(--panel); border-radius: 6px; padding: 3px 9px; cursor: pointer; font: inherit; }
.linkBtn { border: none; background: none; padding: 0; color: var(--accent); font: inherit; cursor: pointer; text-decoration: underline; }

/* small "?" help buttons */
.helpDot { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border-radius: 50%;
  border: 1.5px solid #b9c6d8; background: #fff; color: var(--accent); font: 800 12px/1 system-ui, sans-serif; cursor: pointer; }
.helpDot:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.helpDot.inline { display: inline-flex; vertical-align: -3px; cursor: default; }

.seg { display: inline-flex; align-items: center; }
.seg button { border: 1px solid var(--line); background: var(--panel); padding: 3px 10px; cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; color: var(--muted); }
.seg button:first-of-type { border-radius: 6px 0 0 6px; } .seg button:last-of-type { border-radius: 0 6px 6px 0; margin-left: -1px; }
.seg button.on { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ------------------------------------------------------------------ layout */
.page { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.page[hidden] { display: none; }
.layout { flex: 1; display: flex; min-height: 0; position: relative; }
.sidebar { width: calc(var(--sidebar-w) * var(--side-zoom)); flex: none; overflow: hidden; background: var(--side-bg); border-right: 1px solid var(--line); transition: width .28s ease, border-color .28s; }
.sidebarInner { width: var(--sidebar-w); height: calc(100% / var(--side-zoom)); overflow-y: auto; padding: 0 14px 20px; transition: transform .28s ease; zoom: var(--side-zoom); }
.layout.collapsed .sidebar { width: 0; border-right-color: transparent; }
.layout.collapsed .sidebarInner { transform: translateX(-100%); }
.sideToggle { position: absolute; z-index: 4; top: 50%; left: calc(var(--sidebar-w) * var(--side-zoom)); transform: translate(-1px, -50%); width: 30px; height: 84px; padding: 0;
  border: 1px solid #c9d2dd; border-left: none; border-radius: 0 12px 12px 0; background: var(--panel); color: #3d5a80; cursor: pointer; line-height: 0;
  display: flex; align-items: center; justify-content: center; transition: left .28s ease, background .15s, color .15s; box-shadow: 3px 0 10px rgba(0,0,0,.10); }
.sideToggle:hover { color: #fff; background: var(--accent); border-color: var(--accent); }
.sideToggle span { display: inline-flex; transition: transform .28s; }
.layout.collapsed .sideToggle { left: 0; }
.layout.collapsed .sideToggle span { transform: rotate(180deg); }

.tabs { position: sticky; top: 0; z-index: 2; display: flex; gap: 2px; background: var(--side-bg); padding: 10px 14px 0; border-bottom: 2px solid #d5dbe3; margin: 0 -14px 12px; }
.tabs button { flex: 1; border: none; background: none; padding: 8px 4px 9px; font: inherit; font-weight: 650; color: var(--muted); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; white-space: nowrap; }
.tabs button.on { color: var(--accent); border-bottom-color: var(--accent); }
.tabs button:hover { color: var(--text); }
.tab { display: none; } .tab.on { display: block; }

/* sidebar section cards: each one a distinct, labelled block */
.card { --c: var(--accent); --cbg: #eef4ff; background: var(--panel); border: 1px solid #dde2e9; border-radius: 12px; margin: 0 0 14px; padding: 0 14px 14px;
  box-shadow: 0 1px 2px rgba(16,24,40,.05), 0 2px 8px rgba(16,24,40,.04); border-top: 3px solid var(--c); }
.sec-distance { --c: #0f9488; --cbg: #e6f6f4; }
.sec-eyesight { --c: #1f6feb; --cbg: #eaf1fe; }
.sec-readout  { --c: #7c4dce; --cbg: #f1ebfb; }
.sec-models   { --c: #d9730d; --cbg: #fdf1e4; }
.sec-config   { --c: #5b6b7f; --cbg: #eef1f5; }
.cardHead { display: flex; align-items: center; gap: 9px; margin: 0 -14px 10px; padding: 9px 12px 9px 14px; background: var(--cbg); border-radius: 9px 9px 0 0; }
.cardHead h3 { flex: 1; margin: 0; font-size: 13px; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; color: var(--text); }
.cardIco { flex: none; width: 24px; height: 24px; border-radius: 7px; background: var(--c); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; }
.cardHead .helpDot { border-color: color-mix(in srgb, var(--c) 45%, white); color: var(--c); }
.cardHead .helpDot:hover { background: var(--c); border-color: var(--c); color: #fff; }

.status { font-size: 13px; padding: 8px 10px; border-radius: 8px; background: var(--accent2); color: var(--accent-ink); margin: 2px 0 8px; line-height: 1.4; }
.status.blur { background: #fdf1e3; color: #7a3e00; }
.row { display: flex; flex-direction: column; gap: 3px; margin: 7px 0; }
.row label { font-size: 12.5px; color: var(--muted); display: flex; justify-content: space-between; }
.row output { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.row select, .row input[type=number], .row input[type=text], .row input[type=url], .row input[type=file] { padding: 5px 6px; border: 1px solid var(--line); border-radius: 6px; font: inherit; background: #fff; }
.row label.chk { justify-content: flex-start; color: var(--text); }
input[type=range] { width: 100%; accent-color: var(--accent); }
.presets { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0 0; }
.presets button { font-size: 12px; padding: 3px 9px; border: 1px solid #cbe7e3; background: #eef8f6; color: #0b5f57; border-radius: 12px; cursor: pointer; }
.presets button:hover { background: #dcf1ed; }
.presets button.on { background: #0f9488; border-color: #0f9488; color: #fff; }
.note { font-size: 12px; color: var(--muted); margin: 4px 0; }
.note.mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px; white-space: pre-wrap; margin-top: 8px; }
.note.mono:empty { display: none; }
.filterList label { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; margin: 5px 0; cursor: pointer; transition: border-color .15s, background .15s; }
.filterList label:hover { border-color: #e9c39b; }
.filterList label.on { border-color: #d9730d; background: #fdf4ea; box-shadow: inset 0 0 0 1px #d9730d; }
.filterList input { accent-color: #d9730d; margin: 0; }
.filterList .fname { font-weight: 600; flex: 1; }
.filterList .ftag { font-size: 10.5px; color: var(--muted); border: 1px solid var(--line); border-radius: 10px; padding: 0 6px; background: #fff; }
.filterParams .row { margin: 6px 0; }
.filterParams:empty::after { content: "This model has no settings."; color: var(--muted); font-size: 12px; }
.readout { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.readout td { padding: 3px 4px; border-bottom: 1px dotted var(--line); vertical-align: top; }
.readout td:last-child { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.readout tr.hl td { color: #6a3fb8; }
.footer { font-size: 12px; color: var(--muted); margin: 4px 2px 0; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.armPanel { height: 170px; background: #fafbfc; border: 1px solid var(--line); border-radius: 8px; margin: 2px 0 4px; }
.armPanel svg { display: block; }
.subtabs { display: inline-flex; margin: 0 0 8px; }
.subtabs button { border: 1px solid var(--line); background: var(--panel); padding: 4px 14px; cursor: pointer; font: inherit; font-size: 13px; }
.subtabs button:first-child { border-radius: 6px 0 0 6px; } .subtabs button:last-child { border-radius: 0 6px 6px 0; margin-left: -1px; }
.subtabs button.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.subtab { display: none; } .subtab.on { display: block; }
.eyeList { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.eyeList button { text-align: left; border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 7px 9px; cursor: pointer; font: inherit; display: flex; flex-direction: column; gap: 1px; transition: background .2s, border-color .2s, box-shadow .2s; }
.eyeList button b { font-size: 13px; }
.eyeList button span { font-size: 11.5px; color: var(--muted); }
.eyeList button:hover { border-color: #b9c6d8; }
.eyeList button.on { border-color: var(--accent); background: var(--accent2); box-shadow: inset 0 0 0 1px var(--accent); }
.eyeList button.pulse { animation: pulse 1.1s ease-out; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(31,111,235,.55); } 100% { box-shadow: 0 0 0 12px rgba(31,111,235,0); } }

/* ------------------------------------------------------------------ product view: rulers bottom + right */
.viewPanel { flex: 1; min-height: 0; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) var(--ruler); grid-template-rows: minmax(0, 1fr) var(--ruler); background: var(--stage); }
.viewScroll { grid-column: 1; grid-row: 1; overflow: auto; position: relative; }
.ruler { display: block; }
.ruler.bottom { grid-column: 1; grid-row: 2; }
.ruler.right { grid-column: 2; grid-row: 1; }
.corner { grid-column: 2; grid-row: 2; font-size: 10px; font-weight: 700; color: #4a3011; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #e6c48c, #c9954f); border-left: 1px solid rgba(80,45,10,.5); border-top: 1px solid rgba(80,45,10,.5); text-transform: uppercase; }

.stage { display: inline-flex; align-items: stretch; padding: 24px 30px 40px; min-width: 100%; min-height: 100%; }
.prodCard { flex: none; display: flex; flex-direction: column; align-items: center; padding: 0 34px; }
.prodCard:first-child { padding-left: 0; }
.prodCard + .prodCard { border-left: 1.5px solid #dde2e8; }
.prodHead { width: 100%; min-width: 190px; display: grid; grid-template-rows: 28px 22px 28px; align-items: center; margin-bottom: 10px; }
.prodHead .tools { display: flex; justify-content: flex-end; gap: 6px; }
.prodHead .tools button { border: 1px solid var(--line); background: var(--panel); border-radius: 6px; padding: 2px 10px; cursor: pointer; font: inherit; font-size: 12px; }
.prodHead .sel { color: var(--accent); font-weight: 650; }
.prodHead .sel:hover { border-color: var(--accent); }
.prodHead .x { padding: 2px 8px !important; color: var(--muted); }
.prodHead .x:hover { color: #b3261e; border-color: #e6b8b4; }
.prodHead .pname { font-weight: 750; font-size: 14px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; justify-self: center; }
.prodHead .psize { color: var(--muted); font-size: 12.5px; text-align: center; font-variant-numeric: tabular-nums; }
.prodHead .phoneSel { justify-self: center; max-width: 100%; padding: 3px 6px; border: 1px solid var(--line); border-radius: 6px; font: inherit; font-size: 12.5px; background: #fff; font-variant-numeric: tabular-nums; }
.prodBody { display: flex; gap: 24px; align-items: flex-start; }
.addProd { flex: none; align-self: flex-start; margin: 60px 30px 0 8px; width: 44px; height: 44px; border-radius: 50%; border: 2px dashed #9fb0c6; background: rgba(255,255,255,.6); color: var(--accent); font-size: 26px; line-height: 1; cursor: pointer; }
.prodCard + .addProd { margin-left: 0; }
.addProd:hover { background: #fff; border-color: var(--accent); }
.simWrap, .origWrap { position: relative; flex: none; background: #fff; }
.simWrap.ui, .origWrap.ui { background: transparent; box-shadow: none; }
.simWrap canvas.out { display: block; }
.domHost { display: block; line-height: 0; }
.domHost img, .domHost svg { display: block; }
.origWrap img { display: block; }
.origWrap img[hidden] { display: none; }
/* while Ctrl+Shift is held, wheel events must reach this page, not the phone iframes */
body.zoomKeys iframe { pointer-events: none; }
.tag { position: absolute; left: 0; bottom: -18px; white-space: nowrap; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }

/* phone frame: body, screen (iframe) and decorations are stacked layers sized in px from mm */
.frameRoot { position: relative; }
.bodyL, .decoL { position: absolute; left: 0; top: 0; pointer-events: none; }
.phone { position: relative; background: #1b1d22; border: 1px solid #33363d; box-shadow: 0 6px 22px rgba(0,0,0,.22), inset 0 0 0 1.5px #3a3e46; }
.frameRoot .scr { position: absolute; overflow: hidden; background: #fff; }
.frameRoot iframe { position: absolute; left: 0; top: 0; border: 0; transform-origin: 0 0; background: #fff; display: block; }
.decoL .island, .decoL .notch, .decoL .punch, .decoL .speaker, .decoL .homeBtn { position: absolute; }
.decoL .island { background: #0c0d10; border-radius: 999px; }
.decoL .notch { background: #1b1d22; border-radius: 0 0 14px 14px; }
.decoL .punch { background: #0c0d10; border-radius: 50%; }
.decoL .speaker { background: #3a3d44; border-radius: 4px; }
.decoL .homeBtn { border: 2px solid #3a3d44; border-radius: 50%; }
.blockHint { position: absolute; left: 50%; top: calc(100% + 26px); transform: translateX(-50%); width: max(240px, 100%); z-index: 2;
  background: #fff8e6; border: 1px solid #f0d58f; color: #5c4300; border-radius: 8px; padding: 8px 28px 8px 10px; font-size: 12px; line-height: 1.4; box-shadow: 0 3px 10px rgba(0,0,0,.08); }
.blockHint[hidden] { display: none; }
.blockHint .bhX { position: absolute; right: 4px; top: 3px; border: none; background: none; font-size: 16px; color: #8a6d1a; cursor: pointer; padding: 0 4px; }
.uiHost { line-height: 0; }

/* fixed scale control, inside the view, clear of the rulers */
.scaleBox { position: absolute; right: calc(var(--ruler) + 14px); bottom: calc(var(--ruler) + 14px); z-index: 6; display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.96); border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; box-shadow: 0 4px 16px rgba(0,0,0,.12); font-size: 12px; }
.scaleBox label { font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-size: 11px; }
.scaleBox input { width: 140px; }
.scaleBox output { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 42px; }
.scaleBox .sep { width: 1px; align-self: stretch; background: var(--line); margin: 0 2px; }
.scaleBox[hidden] { display: none; }

dialog { max-width: 640px; border: 1px solid var(--line); border-radius: 12px; padding: 20px 24px; line-height: 1.5; }
dialog::backdrop { background: rgba(15,23,42,.42); }
dialog h2 { margin-top: 0; }
dialog button { padding: 6px 14px; border-radius: 6px; border: 1px solid var(--line); background: var(--accent); color: #fff; cursor: pointer; font: inherit; }
dialog button:disabled { opacity: .45; cursor: default; }
.pickerHead { display: flex; justify-content: space-between; align-items: center; }
.pickerHead h2 { margin: 0; font-size: 19px; display: flex; align-items: center; gap: 8px; }
.closeX { background: var(--panel) !important; color: var(--text) !important; font-size: 20px !important; padding: 0 10px !important; line-height: 1.4; }

/* ------------------------------------------------------------------ product picker */
.picker { max-width: 1000px; width: 94vw; padding-bottom: 16px; }
.pickerTabs { display: flex; gap: 4px; margin: 14px -24px 0; padding: 0 24px; border-bottom: 2px solid var(--line); }
.pickerTabs button { background: none; color: var(--muted); border: none; border-bottom: 3px solid transparent; margin-bottom: -2px; border-radius: 0; padding: 9px 16px; font-weight: 650; font-size: 14px; }
.pickerTabs button:hover { color: var(--text); }
.pickerTabs button.on { color: var(--accent); border-bottom-color: var(--accent); }
.pickerBody { max-height: 66vh; overflow: auto; padding: 4px 2px 6px; margin: 0 -2px; }
.pickSec h4 { margin: 16px 0 2px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); display: flex; align-items: baseline; gap: 8px; }
.pickSec h4 .count { font-weight: 500; opacity: .7; }
.pickSec .note { margin: 0 0 4px; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 8px 0 4px; }
.gallery .tile { position: relative; border: 2px solid var(--line); border-radius: 8px; background: #fff; padding: 6px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 168px; color: var(--text); }
.gallery .tile:hover { border-color: #b9c6d8; }
.gallery .tile.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.gallery .tile img { height: 104px; width: auto; max-width: 100%; object-fit: contain; }
.gallery .tn { font-size: 11.5px; color: var(--text); font-weight: 600; line-height: 1.15; text-align: center; }
.gallery .ts { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.gallery .addTile { border-style: dashed; color: var(--accent); justify-content: center; gap: 8px; }
.gallery .addTile .plus { font-size: 34px; line-height: 1; }
.gallery .addTile .tn { color: var(--accent); }
.tileTools { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 4px; justify-content: center; padding: 4px; background: linear-gradient(transparent, rgba(255,255,255,.95) 40%); }
.tileTools button { border: 1px solid var(--line); background: #fff; color: var(--muted); border-radius: 5px; padding: 1px 8px; font-size: 11px; }
.tileTools .rm:hover { color: #b3261e; border-color: #e6b8b4; }
.tileTools .ed:hover { color: var(--accent); border-color: var(--accent); }
.gallery .empty { color: var(--muted); padding: 20px 4px; grid-column: 1 / -1; }

/* Mobile UI tab: two columns */
.mobCols { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 22px; margin-top: 6px; }
.mobCol > h4 { margin: 12px 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.shot { border: 2px solid var(--line); border-radius: 8px; background: #fff; padding: 5px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; align-items: center; color: var(--text) !important; }
.shot:hover { border-color: #b9c6d8; }
.shot.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.shot .thumb { width: 100%; height: 132px; overflow: hidden; border-radius: 4px; background: #f3f4f6; border: 1px solid #eceff3; }
.shot .thumb img { width: 100%; display: block; }
.shot span { font-size: 11px; font-weight: 600; text-align: center; line-height: 1.15; }
.urlBox { margin-top: 14px; border: 2px solid var(--line); border-radius: 10px; padding: 10px 12px; background: #fafbfc; cursor: pointer; }
.urlBox.on { border-color: var(--accent); background: #f5f8ff; }
.urlBox .chk { font-weight: 650; }
.urlBox .urlRow { display: flex; gap: 6px; margin: 8px 0 4px; }
.urlBox input[type=url] { flex: 1; min-width: 0; padding: 6px 8px; border: 1px solid #c9d1db; border-radius: 6px; font: inherit; }
.urlBox input.bad { border-color: #d0453b; background: #fff6f5; }
.urlMsg { font-size: 12px; min-height: 1.2em; }
.urlMsg.err { color: #b3261e; } .urlMsg.ok { color: #1d7a3a; }
.warnList { margin: 6px 0 0; padding: 0; list-style: none; font-size: 12px; color: #6b4a00; }
.warnList li { position: relative; padding: 4px 8px 4px 26px; background: #fff8e6; border: 1px solid #f3dfa8; border-radius: 6px; margin-top: 5px; line-height: 1.35; }
.warnList li::before { content: "!"; position: absolute; left: 7px; top: 5px; width: 14px; height: 14px; border-radius: 50%; background: #d99a00; color: #fff; font: 800 10px/14px system-ui; text-align: center; }
.phones { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; align-items: end; }
.phoneTile { border: 2px solid transparent; border-radius: 10px; background: none; padding: 6px 4px 4px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--text) !important; }
.phoneTile:hover { background: #f3f6fa; }
.phoneTile.on { border-color: var(--accent); background: var(--accent2); }
.fakePhone { position: relative; background: #1f2229; border-radius: 12px; padding: 4px; box-shadow: 0 2px 6px rgba(0,0,0,.18); }
.fakePhone .fs { width: 100%; height: 100%; background: linear-gradient(160deg, #ffffff, #e9eef6); border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.fakePhone .fd { font-size: 20px; font-weight: 800; letter-spacing: -.02em; line-height: 1; color: var(--text); }
.fakePhone .fwh { font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; text-align: center; line-height: 1.2; }
.phoneTile .pn { font-size: 11px; font-weight: 600; text-align: center; line-height: 1.15; }
.pickFoot[hidden] { display: none; }
.pickFoot { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.pickFoot .sum { flex: 1; font-size: 13px; color: var(--muted); }
.pickFoot .sum b { color: var(--text); }
.pickFoot .primary { padding: 8px 18px; font-weight: 650; }

/* crop + real-size dialog */
.cropDlg { max-width: 940px; width: 94vw; }
.cropBody { display: flex; gap: 22px; align-items: flex-start; margin-top: 12px; }
.cropCanvasWrap { flex: none; background: #2a2f37; border-radius: 8px; padding: 8px; line-height: 0; }
#cropCanvas { display: block; touch-action: none; cursor: crosshair; border-radius: 4px; }
.cropSide { flex: 1; min-width: 260px; display: flex; flex-direction: column; gap: 4px; }
.cropSide .row.two { display: flex; flex-direction: row; gap: 10px; }
.cropSide .row.two > div { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.cropSide input[type=text], .cropSide input[type=number] { width: 100%; }
.cropBtns { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.cropBtns .spacer { flex: 1; }
.cropBtns .ghost { background: var(--panel); color: var(--text); }
#cropNote { color: #b3261e; }

/* ------------------------------------------------------------------ help pop-up */
.helpDlg { max-width: 980px; width: 94vw; height: min(780px, 88vh); padding: 18px 0 0; display: none; flex-direction: column; }
.helpDlg[open] { display: flex; }
.helpDlg .pickerHead { padding: 0 20px 12px; border-bottom: 1px solid var(--line); }
.helpBody { flex: 1; min-height: 0; display: grid; grid-template-columns: 220px 1fr; }
.helpNav { border-right: 1px solid var(--line); background: #f7f8fa; padding: 10px 8px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.helpNav button { text-align: left; background: none; color: var(--text); border: none; border-radius: 7px; padding: 7px 10px; font-weight: 550; }
.helpNav button:hover { background: #eceff3; }
.helpNav button.on { background: var(--accent); color: #fff; }
.helpContent { overflow-y: auto; padding: 6px 26px 28px; font-size: 14.5px; line-height: 1.6; }
.helpContent h3 { font-size: 21px; margin: 14px 0 8px; }
.helpContent h4 { font-size: 15px; margin: 18px 0 4px; }
.helpContent p { margin: 0 0 10px; }
.helpContent ul, .helpContent ol { padding-left: 22px; margin: 0 0 10px; }
.helpContent li { margin: 3px 0; }
.helpContent dl { margin: 6px 0 10px; }
.helpContent dt { font-weight: 650; margin-top: 8px; }
.helpContent dd { margin: 1px 0 0 0; color: #3d4652; }
.helpContent .helpModel { border: 1px solid var(--line); border-left: 4px solid #d9730d; border-radius: 8px; padding: 2px 14px 6px; margin: 10px 0; background: #fffdfa; }
.helpContent .helpModel h4 { margin-top: 10px; }
.helpContent .helpModel dt { font-size: 13.5px; } .helpContent .helpModel dd { font-size: 13.5px; }
.md h3, .md h4, .md h5, .md h6 { margin: 18px 0 6px; } .md h3 { font-size: 19px; }
.md pre { background: #f4f6f9; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; overflow-x: auto; font-size: 12.5px; line-height: 1.45; }
.md pre code { background: none; padding: 0; }
.md table.md { border-collapse: collapse; font-size: 13px; width: 100%; }
.md table.md th, .md table.md td { border: 1px solid var(--line); padding: 5px 8px; vertical-align: top; text-align: left; }
.md table.md th { background: #eef2f8; }
.md .tableWrap { overflow-x: auto; margin: 8px 0 14px; }

/* ------------------------------------------------------------------ intro tour */
.introBanner { position: fixed; left: 50%; bottom: 9vh; transform: translateX(-50%); z-index: 20; width: min(640px, 92vw);
  background: linear-gradient(160deg, #1f4fa8, #16346f); color: #fff; padding: 20px 30px 16px; border-radius: 18px; text-align: center;
  box-shadow: 0 18px 50px rgba(10,25,60,.38), 0 0 0 1px rgba(255,255,255,.08) inset; animation: introIn .35s ease-out; }
@keyframes introIn { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } }
.introX { position: absolute; right: 10px; top: 8px; width: 32px; height: 32px; border-radius: 50%; border: none; background: rgba(255,255,255,.12); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; }
.introX:hover { background: rgba(255,255,255,.25); }
.introKicker { text-transform: uppercase; letter-spacing: .16em; font-size: 12px; font-weight: 700; opacity: .7; }
.introTitle { font-size: 20px; font-weight: 700; margin: 4px 0 10px; }
.introStep { font-size: 34px; font-weight: 800; letter-spacing: -.01em; line-height: 1.12; min-height: 2.6em; }
.introStep small { display: block; font-size: 16px; font-weight: 500; opacity: .88; margin-top: 6px; letter-spacing: 0; line-height: 1.4; }
.introStep small b { font-weight: 700; }
.introDots { display: flex; justify-content: center; gap: 8px; margin: 12px 0 8px; }
.introDots button { width: 118px; height: 34px; border-radius: 8px; border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.85); cursor: pointer; font: 700 13px system-ui, sans-serif; white-space: nowrap; transition: background .15s, color .15s, border-color .15s; }
.introDots button:hover { background: rgba(255,255,255,.28); border-color: rgba(255,255,255,.6); color: #fff; }
.introDots button.done { background: rgba(255,255,255,.32); color: #fff; }
.introDots button.on { background: #fff; border-color: #fff; color: #16346f; }
.introGo { margin: 4px 0 8px; padding: 9px 26px; border-radius: 999px; border: none; background: #fff; color: #16346f; font: 700 15px system-ui, sans-serif; cursor: pointer; }
.introGo[hidden] { display: none; }
.introHint { font-size: 12.5px; opacity: .7; }
.introHint kbd { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.3); color: #fff; }
.introBanner[hidden] { display: none; }
/* what the current tour step is about */
.tourHi { outline: 3px solid #1f4fa8 !important; outline-offset: 3px; animation: tourPulse 1s ease-in-out infinite; }
canvas.tourHi { outline-offset: -4px; animation-name: tourPulseIn; }
@keyframes tourPulse {
  0%, 100% { outline-color: rgba(31,79,168,1); outline-width: 3px; outline-offset: 3px; box-shadow: 0 0 0 0 rgba(31,79,168,.55); }
  50%      { outline-color: rgba(31,79,168,.35); outline-width: 5px; outline-offset: 7px; box-shadow: 0 0 0 14px rgba(31,79,168,0); } }
@keyframes tourPulseIn {
  0%, 100% { outline-color: rgba(31,79,168,1); outline-width: 4px; }
  50%      { outline-color: rgba(31,79,168,.3); outline-width: 7px; } }
.ccScale { display: flex; align-items: center; gap: 10px; margin: 6px 0 4px; max-width: 520px; font-size: 13px; }
.ccScale label { font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-size: 11px; }
.ccScale input { flex: 1; }
.ccScale output { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 46px; }
.ccScale button { background: var(--panel); color: var(--text); padding: 3px 10px; }

/* phones: ask for a computer */
.smallScreen { position: fixed; inset: 0; z-index: 50; background: rgba(19,35,63,.94); display: flex; align-items: center; justify-content: center; padding: 20px; }
.smallScreen[hidden] { display: none; }
.ssCard { background: #fff; border-radius: 16px; padding: 26px 22px; max-width: 420px; text-align: center; box-shadow: 0 20px 50px rgba(0,0,0,.3); }
.ssCard h2 { margin: 12px 0 8px; font-size: 22px; }
.ssCard p { margin: 0 0 10px; font-size: 15px; line-height: 1.5; color: #3d4652; }
.ssBtns { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.ssBtns button, .ssLink { display: block; padding: 11px; border-radius: 10px; font: 600 15px system-ui, sans-serif; text-decoration: none; }
.ssLink { background: var(--accent); color: #fff; }
.ssBtns button { background: #fff; border: 1px solid var(--line); color: var(--muted); cursor: pointer; }

/* bank card in Help → Scale */
.ccWrap { padding: 10px 0 6px; overflow-x: auto; }
.cc { position: relative; background: linear-gradient(135deg, #2f6fe0, #1a3d84 60%, #142f66); box-shadow: 0 4px 14px rgba(0,0,0,.2); color: #fff; }
.ccChip { position: absolute; left: 12%; top: 34%; width: 13%; height: 19%; border-radius: 12%; background: linear-gradient(135deg, #f3d98b, #c9a34a); }
.ccStripe { position: absolute; left: 12%; right: 12%; bottom: 22%; height: 7%; border-radius: 4px; background: rgba(255,255,255,.25); }
.ccLbl { position: absolute; right: 7%; top: 9%; font: 700 13px system-ui, sans-serif; opacity: .95; }

@media (max-width: 900px) {
  .layout { flex-direction: column; }
  .sidebar { width: auto; max-height: 45vh; border-right: none; border-bottom: 1px solid var(--line); }
  .sidebarInner { width: auto; height: auto; max-height: 45vh; }
  .layout.collapsed .sidebar { max-height: 0; width: auto; }
  .sideToggle { display: none; }
  .armPanel { height: 140px; }
  .scaleBox { right: calc(var(--ruler) + 6px); bottom: calc(var(--ruler) + 6px); flex-wrap: wrap; max-width: calc(100% - 50px); }
  .scaleBox input { width: 90px; }
  .mobCols { grid-template-columns: 1fr; }
  .helpBody { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .helpNav { flex-direction: row; overflow-x: auto; border-right: none; border-bottom: 1px solid var(--line); }
  .helpNav button { white-space: nowrap; }
  .introStep { font-size: 30px; }
}
.modelWarn { background: #fff4e5; border: 1px solid #f3c98b; color: #6b3d00; border-radius: 8px; padding: 8px 10px; font-size: 12.5px; margin: 0 0 10px; line-height: 1.4; }
.modelWarn[hidden] { display: none; }
.modelWarn button { margin-top: 6px; display: block; border: 1px solid #d9730d; background: #d9730d; color: #fff; border-radius: 6px; padding: 3px 10px; font: inherit; font-weight: 600; cursor: pointer; }
.distPreset { width: 100%; }

/* draft-models notice: full width under the top bar, shown on every load, pushes the page down */
.disclaimer { flex: none; display: flex; align-items: center; gap: 12px; padding: 9px 14px 9px 16px; background: #fff3c4; border-bottom: 1px solid #ecd27a; color: #4d3b00; font-size: 13.5px; line-height: 1.4; position: relative; z-index: 4; }
.disclaimer[hidden] { display: none; }
.disclaimer p { margin: 0; flex: 1; }
.disclaimer a { color: #6b4e00; font-weight: 600; white-space: nowrap; }
.discIco { flex: none; width: 22px; height: 22px; border-radius: 50%; background: #d99a00; color: #fff; font: 800 13px/22px system-ui, sans-serif; text-align: center; }
.discX { flex: none; width: 30px; height: 30px; border-radius: 50%; border: none; background: transparent; color: #6b5200; font-size: 22px; line-height: 1; cursor: pointer; }
.discX:hover { background: rgba(0,0,0,.08); }