/* Set Builder: floating toolbars over a full-screen work area, in the same visual language as Snapfit3D. */
:root {
  color-scheme: light;
  --bg:#e9ecf1; --surface:rgba(250,251,253,.9); --surface-solid:#fbfcfd; --line:rgba(20,30,50,.13);
  --fg:#16191f; --dim:#5d6877; --accent:#0a6cff; --accent-fg:#fff; --danger:#c62828; --warn:#a85d00; --ok:#1c8a37; --info:#3a5f96;
  --hover:rgba(20,30,50,.08); --field:rgba(20,30,50,.06); --accent-soft:rgba(10,108,255,.14); --warn-soft:rgba(224,138,0,.16);
  --shadow:0 6px 22px rgba(30,40,60,.16); --r:14px; --hdr:74px;
  --canvas:#eef1f5;
}
:root[data-theme=dark] {
  color-scheme: dark;
  --bg:#16181c; --surface:rgba(34,37,43,.9); --surface-solid:#22252b; --line:rgba(255,255,255,.11);
  --fg:#eef0f3; --dim:#9aa3b0; --accent:#3d8bff; --accent-fg:#fff; --danger:#ff7b7b; --warn:#ffb454; --ok:#3ecf55; --info:#8fb5ee;
  --hover:rgba(255,255,255,.1); --field:rgba(255,255,255,.07); --accent-soft:rgba(61,139,255,.24); --warn-soft:rgba(255,180,84,.16);
  --shadow:0 6px 24px rgba(0,0,0,.4); --canvas:#1c1f25;
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { margin:0; height:100%; background:var(--bg); color:var(--fg);
  font:15px/1.4 -apple-system, system-ui, "SF Pro Text", "Segoe UI", Roboto, sans-serif; overflow:hidden; overscroll-behavior:none; }
.hidden, [hidden] { display:none !important; }
button, input, select, textarea { font:inherit; color:inherit; }
button { background:transparent; border:0; border-radius:10px; min-height:44px; padding:0 14px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:7px; }
button:active { background:var(--hover); }
@media (hover:hover) { button:hover:not(.primary):not(.on):not(:disabled) { background:var(--hover); } }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
button:disabled { opacity:.38; pointer-events:none; }
button.primary { background:var(--accent); color:var(--accent-fg); font-weight:600; }
button.primary:active { filter:brightness(.9); }
button.danger { color:var(--danger); }
button.ghost { border:1px solid var(--line); }
button.small { min-height:34px; padding:0 10px; font-size:13px; border-radius:8px; }
.ico { width:22px; height:22px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.card, .panel, .pill, .menu { background:var(--surface); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); }
.pill { display:flex; align-items:center; gap:4px; padding:4px; }
button.icon { width:44px; padding:0; }
.muted { color:var(--dim); } .small { font-size:12.5px; }
.chip { display:inline-block; background:var(--hover); border-radius:999px; padding:1px 9px; font-size:12px; font-weight:600; }
.chip.warn { background:var(--warn-soft); color:var(--warn); } .chip.stop { background:rgba(198,40,40,.16); color:var(--danger); }

/* work area */
#work { position:fixed; inset:0; background:var(--canvas); }
.view, .canvaswrap { position:absolute; inset:0; }
.canvaswrap canvas { position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none; }

/* top bar: file / tools / view+share */
#top { position:fixed; left:12px; right:12px; top:10px; display:flex; justify-content:space-between; align-items:flex-start; gap:8px; pointer-events:none; z-index:20; flex-wrap:wrap; }
#top > * { pointer-events:auto; }
.savedot { width:9px; height:9px; border-radius:50%; background:var(--ok); margin:0 4px; flex:none; }
.savedot.dirty { background:var(--warn); }
button.title { color:var(--dim); font-weight:600; max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; justify-content:flex-start; padding:0 10px 0 4px; display:block; line-height:44px; }
.pill.tools { padding:3px; }
.toolrow { display:flex; align-items:stretch; gap:2px; }
.tbtn { flex-direction:column; gap:2px; min-width:56px; min-height:56px; padding:4px 6px; font-size:11.5px; line-height:1.15; color:var(--fg); }
.tbtn .ico { width:24px; height:24px; }
.tbtn.on { background:var(--accent); color:var(--accent-fg); }
.tbtn.on:active { filter:brightness(.9); background:var(--accent); }
.tsep { width:1px; background:var(--line); margin:6px 4px; flex:none; }
#pillRight .tbtn { flex-direction:row; min-height:44px; min-width:0; gap:7px; font-size:14px; padding:0 12px; }
#pillRight .primary { gap:7px; }
.seg { display:inline-flex; background:var(--field); border-radius:11px; padding:2px; gap:2px; }
.seg button { min-height:40px; padding:0 12px; border-radius:9px; font-size:13.5px; }
.seg button.on { background:var(--accent); color:var(--accent-fg); font-weight:600; }
.seg.small button { min-height:34px; padding:0 10px; font-size:13px; }

/* message strip */
.msg { position:fixed; left:50%; transform:translateX(-50%); top:calc(var(--hdr) + 14px); z-index:19; max-width:min(720px, calc(100vw - 24px)); display:flex; align-items:center; gap:9px;
  padding:9px 16px; border-radius:999px; font-size:14px; box-shadow:var(--shadow); border:1px solid var(--line); background:var(--surface-solid); }
.msg.tip { color:var(--fg); border-color:color-mix(in srgb, var(--warn) 55%, var(--line)); background:color-mix(in srgb, var(--warn) 12%, var(--surface-solid)); }
.msg.tip .ico { color:var(--warn); }
.msg.warn { border-color:var(--warn); background:color-mix(in srgb, var(--warn) 18%, var(--surface-solid)); }
.msg.ok { border-color:var(--ok); background:color-mix(in srgb, var(--ok) 15%, var(--surface-solid)); }
.msg .ico { width:20px; height:20px; }

/* properties card and the palette */
.panel { position:fixed; z-index:15; overflow-y:auto; padding:14px; }
#props { right:12px; top:calc(var(--hdr) + 14px); width:332px; max-height:calc(100vh - var(--hdr) - 100px); }
#palette { left:12px; top:calc(var(--hdr) + 14px); width:260px; max-height:calc(100vh - var(--hdr) - 100px); padding:12px; }
.proptab { position:fixed; right:12px; top:calc(var(--hdr) + 14px); z-index:15; padding:0 14px 0 8px; min-height:44px; cursor:pointer; font-weight:600; }
.ph { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.ph .dot { width:12px; height:12px; border-radius:4px; flex:none; }
.ph input.name { font-size:17px; font-weight:700; border:1px solid transparent; background:transparent; padding:4px 6px; border-radius:8px; min-width:0; flex:1; }
.ph input.name:hover { background:var(--field); } .ph input.name:focus { background:var(--field); }
.ph h2 { margin:0; font-size:17px; flex:1; }
.sub { color:var(--dim); font-size:13px; margin:0 6px 10px; }
.sec { border-top:1px solid var(--line); padding:12px 2px 4px; margin-top:8px; }
.sec h3 { margin:0 0 8px; font-size:11.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--dim); font-weight:700; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.fields { display:grid; gap:8px; grid-template-columns:repeat(3, 1fr); margin-bottom:8px; }
.fields.two { grid-template-columns:repeat(2, 1fr); } .fields.one { grid-template-columns:1fr; }
.f { display:block; font-size:12px; color:var(--dim); min-width:0; }
.f > input, .f > select, .f > textarea { display:block; margin-top:3px; color:var(--fg); }
input, select, textarea { width:100%; min-width:0; min-height:42px; padding:0 10px; background:var(--field); border:1px solid transparent; border-radius:10px; font-size:16px; }
textarea { padding:8px 10px; resize:vertical; min-height:70px; }
input:hover, select:hover, textarea:hover { border-color:var(--line); }
input[type=checkbox] { width:20px; min-height:20px; height:20px; accent-color:var(--accent); }
input[type=range] { padding:0; background:transparent; accent-color:var(--accent); min-height:30px; }
label.chk { display:flex; gap:10px; align-items:center; font-size:14px; margin:6px 0; color:var(--fg); }
.btnrow { display:flex; gap:6px; flex-wrap:wrap; margin:6px 0; } .btnrow > button { flex:1; }
.fieldline { display:flex; gap:8px; align-items:center; margin:6px 0; } .fieldline > span { flex:none; font-size:13px; color:var(--dim); min-width:70px; }
.list { display:flex; flex-direction:column; gap:4px; }
.list .item { display:flex; align-items:center; gap:9px; padding:0 10px; min-height:44px; border-radius:10px; cursor:pointer; }
.list .item:hover { background:var(--hover); } .list .item.sel { background:var(--accent-soft); }
.list .item .dot { width:11px; height:11px; border-radius:3px; flex:none; }
.list .item .grow { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.badge { font-size:11px; font-weight:700; color:#fff; padding:1px 8px; border-radius:999px; background:var(--warn); } .badge.stop { background:var(--danger); }
.empty { text-align:center; padding:18px 8px 8px; color:var(--dim); }
.empty .ico { width:34px; height:34px; opacity:.6; margin-bottom:6px; }
.bigbtns { display:grid; gap:8px; margin-top:10px; }
.bigbtns button { justify-content:flex-start; min-height:52px; border:1px solid var(--line); background:var(--surface-solid); font-weight:600; padding:0 14px; }
.bigbtns button small { display:block; font-weight:400; color:var(--dim); font-size:12px; }
.bigbtns button span { text-align:left; }

/* checks (the old "hints") */
.hint { border:1px solid var(--line); border-left:4px solid var(--info); border-radius:10px; padding:8px 11px; margin:7px 0; font-size:13.5px; cursor:pointer; background:var(--surface-solid); }
.hint.warn { border-left-color:var(--warn); } .hint.stop { border-left-color:var(--danger); } .hint.info { border-left-color:var(--info); }
.hint .sev { font-weight:700; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; margin-right:6px; }
.hint.warn .sev { color:var(--warn); } .hint.stop .sev { color:var(--danger); } .hint.info .sev { color:var(--info); }
.hint.on { outline:2px solid var(--accent); }
.hint .fixbtn { margin-top:6px; }
.disclaimer { font-size:12px; color:var(--dim); margin:10px 2px 2px; }
.note { background:var(--warn-soft); border:1px solid color-mix(in srgb, var(--warn) 50%, var(--line)); border-radius:10px; padding:9px 12px; font-size:13.5px; margin:8px 0; }
details > summary { cursor:pointer; list-style:none; min-height:36px; display:flex; align-items:center; gap:6px; font-weight:600; font-size:13.5px; }
details > summary::-webkit-details-marker { display:none; }
details > summary::before { content:'›'; display:inline-block; width:14px; transition:transform .15s; color:var(--dim); font-size:18px; line-height:1; }
details[open] > summary::before { transform:rotate(90deg); }

/* contextual bottom bar */
#bottom { position:fixed; left:50%; transform:translateX(-50%); bottom:calc(12px + env(safe-area-inset-bottom)); z-index:18; max-width:calc(100vw - 24px); overflow-x:auto; gap:2px; }
#bottom .abtn { min-height:46px; padding:0 14px; white-space:nowrap; font-size:14px; }
#bottom .abtn.on { background:var(--accent-soft); }
#bottom .sep { width:1px; align-self:stretch; background:var(--line); margin:6px 4px; flex:none; }
#bottom label.inl { display:flex; align-items:center; gap:6px; font-size:13px; color:var(--dim); padding:0 6px; white-space:nowrap; }
#bottom input.len { width:120px; min-height:38px; } #bottom select { width:auto; min-height:38px; }

/* menu */
.menu { position:fixed; left:12px; top:calc(var(--hdr) + 8px); z-index:40; width:268px; padding:6px; }
.menu button { width:100%; justify-content:flex-start; min-height:44px; font-size:14.5px; }
.menu hr { border:0; border-top:1px solid var(--line); margin:5px 4px; }

/* full-screen sheets: shopping list, settings, help */
.sheet { position:fixed; inset:0; z-index:30; background:var(--bg); display:flex; flex-direction:column; }
.sheethead { display:flex; align-items:center; justify-content:space-between; padding:calc(10px + env(safe-area-inset-top)) 16px 8px; max-width:1100px; width:100%; margin:0 auto; }
.sheethead h1 { margin:0; font-size:22px; }
.sheetbody { flex:1; overflow-y:auto; padding:6px 16px 60px; max-width:1100px; width:100%; margin:0 auto; }
.sheetbody h2 { font-size:16px; margin:22px 0 8px; } .sheetbody h3 { font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--dim); margin:16px 0 6px; }
.cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:12px; }
.card { padding:13px 15px; } .big { font-size:28px; font-weight:700; }
table.t { width:100%; border-collapse:collapse; font-size:14px; background:var(--surface-solid); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
table.t th, table.t td { text-align:left; padding:9px 11px; border-bottom:1px solid var(--line); }
table.t th { background:var(--field); font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--dim); }
table.t td.n, table.t th.n { text-align:right; font-variant-numeric:tabular-nums; }
table.t tr.clk { cursor:pointer; } table.t tr.sel td { background:var(--accent-soft); }
table.t input { min-height:34px; padding:0 8px; }
.bars { display:flex; flex-direction:column; gap:5px; margin:8px 0 14px; }
.bar { display:flex; align-items:center; gap:8px; font-size:11px; color:var(--dim); }
.bar .b { position:relative; height:24px; border:1px solid #8a7a5c; background:#f3ead8; border-radius:3px; display:flex; overflow:hidden; flex:none; }
.bar .b i { display:block; height:100%; font-style:normal; font-size:10px; text-align:center; line-height:24px; color:#3a2e18; overflow:hidden; border-right:1px solid #8a7a5c; }
.sheets { display:flex; flex-wrap:wrap; gap:12px; margin:8px 0 14px; }
.sheets svg { background:#fcfaf4; border:1px solid #8a7a5c; border-radius:3px; }
.tag { font-size:10.5px; padding:1px 8px; border-radius:999px; font-weight:700; }
.tag.sourced { background:#d6f0df; color:#14673a; } .tag.general { background:#dfe9fb; color:#234a9a; } .tag.assumption { background:#fde6c6; color:#8a4b00; }
.howto { padding:0; overflow:hidden; } .howto summary { padding:12px 15px; font-size:15px; } .howto .body { padding:0 15px 14px 33px; color:var(--dim); font-size:14px; } .howto .body ol { margin:6px 0 0; padding-left:18px; } .howto .body li { margin:4px 0; color:var(--fg); }

/* welcome */
.welcome { position:fixed; inset:0; z-index:60; background:linear-gradient(160deg, color-mix(in srgb, var(--accent) 16%, var(--bg)), var(--bg) 55%); overflow-y:auto; }
.winner { max-width:1000px; margin:0 auto; padding:calc(26px + env(safe-area-inset-top)) 22px 40px; }
.winner .brand { display:flex; align-items:center; gap:10px; font-weight:700; font-size:18px; }
.winner h1 { font-size:38px; margin:34px 0 4px; letter-spacing:-.02em; } .winner .lead { font-size:17px; color:var(--dim); margin:0 0 22px; }
.wbig { display:grid; grid-template-columns:1.4fr 1fr; gap:14px; }
.wcard { text-align:left; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:6px; min-height:118px; padding:18px 20px; border-radius:var(--r); border:1px solid var(--line); background:var(--surface-solid); box-shadow:var(--shadow); }
.wcard.main { background:var(--accent); color:var(--accent-fg); border-color:var(--accent); } .wcard b { font-size:19px; } .wcard span { font-size:14px; opacity:.85; font-weight:400; }
.winner h3 { margin:26px 0 10px; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); }
.wtiles { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:10px; }
.wtile { text-align:left; flex-direction:column; align-items:flex-start; justify-content:flex-start; min-height:96px; padding:13px 15px; border-radius:12px; border:1px solid var(--line); background:var(--surface-solid); gap:3px; }
.wtile b { font-size:15px; } .wtile span { font-size:13px; color:var(--dim); font-weight:400; }
.wtour { margin-top:22px; padding:20px 22px; border-radius:var(--r); background:linear-gradient(120deg, #0b4fd1, #0a6cff 60%, #4a9bff); color:#fff; display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.wtour b { font-size:20px; display:block; } .wtour p { margin:4px 0 0; opacity:.9; } .wtour button { background:#fff; color:#0a4fd0; font-weight:700; }
.wfoot { margin-top:18px; display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; color:var(--dim); font-size:13px; }

/* tour */
#tour { position:fixed; inset:0; z-index:80; }
.tour-spot { position:fixed; border-radius:12px; box-shadow:0 0 0 9999px rgba(8,12,20,.62); transition:all .2s; pointer-events:none; outline:2px solid var(--accent); }
.tour-card { position:fixed; width:min(340px, calc(100vw - 24px)); background:var(--surface-solid); border:1px solid var(--line); border-radius:14px; padding:16px; box-shadow:var(--shadow); }
.tour-card b { font-size:16px; } .tour-card p { margin:6px 0 12px; color:var(--dim); font-size:14px; }
.tour-dots { display:flex; gap:5px; margin-bottom:10px; } .tour-dots i { width:7px; height:7px; border-radius:50%; background:var(--line); } .tour-dots i.on { background:var(--accent); }
.tour-actions { display:flex; gap:6px; justify-content:space-between; }

/* dialogs */
dialog { border:1px solid var(--line); border-radius:16px; padding:0; background:var(--surface-solid); color:var(--fg); max-width:min(600px, 94vw); width:100%; box-shadow:0 24px 70px rgba(0,0,0,.35); }
dialog::backdrop { background:rgba(10,15,25,.55); }
.dlgform { padding:18px 20px 16px; display:flex; flex-direction:column; gap:10px; }
.dlgform h2 { margin:0 0 2px; font-size:19px; }
.dlgbody { display:flex; flex-direction:column; gap:8px; max-height:68vh; overflow-y:auto; padding:2px; }
.dlgbtns { display:flex; flex-direction:row-reverse; gap:8px; margin-top:6px; }
.dlgbtns button { min-width:110px; } .dlgbtns button[value=cancel] { border:1px solid var(--line); }
.dlgnote { font-size:13.5px; background:var(--field); border-radius:10px; padding:9px 12px; } .dlgnote.warn { background:var(--warn-soft); }
.dlgsec { font-size:11.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--dim); font-weight:700; margin:10px 0 0; border-top:1px solid var(--line); padding-top:12px; }
.dlgbody .row { display:flex; gap:8px; align-items:flex-end; } .dlgbody .row > * { flex:1; min-width:0; }
.polyrow { display:flex; align-items:center; gap:6px; padding:0 8px; }

.busy { position:fixed; inset:0; background:rgba(10,15,25,.5); display:flex; align-items:center; justify-content:center; z-index:90; }
.busybox { padding:20px 26px; display:flex; gap:14px; align-items:center; background:var(--surface-solid); }
.spin { width:22px; height:22px; border:3px solid var(--line); border-top-color:var(--accent); border-radius:50%; animation:sp .9s linear infinite; }
@keyframes sp { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { * { transition:none !important; animation-duration:.01ms !important; } }

/* narrower screens: the tools drop under the file bar, the properties become a bottom sheet */
@media (max-width: 1500px) { #btnShop .lbl { display:none; } #btnShop { padding:0 12px; } }
@media (max-width: 1260px) { #pillTools { order:3; margin:0 auto; } }
@media (max-width: 1180px) { #pillRight .lbl { display:none; } #pillRight .tbtn { padding:0; width:44px; } #pillRight #btnBook { width:44px; padding:0; } .chip#shopTotal { position:absolute; transform:translate(14px,-14px); } #btnShop { position:relative; } }
@media (max-width: 920px) {
  :root { --hdr:128px; }
  #pillTools { order:3; width:100%; overflow-x:auto; }
  #props { left:12px; right:12px; top:auto; bottom:calc(76px + env(safe-area-inset-bottom)); width:auto; max-height:42vh; }
  #palette { width:calc(100vw - 24px); max-height:40vh; top:auto; bottom:calc(76px + env(safe-area-inset-bottom)); }
  .wbig { grid-template-columns:1fr; } .winner h1 { font-size:30px; }
  button.title { max-width:110px; }
  .fields { grid-template-columns:repeat(3, 1fr); }
}
@media (max-width: 520px) { .fields { grid-template-columns:repeat(2, 1fr); } .tbtn { min-width:52px; } }

/* generic bits used by the properties card and the 3D editor's inspector */
.row { display:flex; gap:8px; align-items:flex-end; margin-bottom:8px; } .row > * { flex:1; min-width:0; } .row > .fix { flex:none; }
label.f { display:block; font-size:12px; color:var(--dim); } label.f > input, label.f > select, label.f > textarea { display:block; margin-top:3px; color:var(--fg); }
#props h2, #palette h2 { font-size:17px; margin:0 0 4px; } #props h3, #palette h3 { margin:12px 0 6px; font-size:11.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--dim); font-weight:700; }
#props > h2:first-child { margin-top:2px; }
.pal-item { display:flex; align-items:center; gap:9px; padding:0 10px; min-height:44px; border:1px solid var(--line); border-radius:10px; margin-bottom:6px; cursor:grab; background:var(--surface-solid); user-select:none; }
.pal-item:hover { border-color:var(--accent); } .pal-item small { color:var(--dim); margin-left:auto; font-size:12px; }
.pal-item .sw { width:22px; height:14px; border-radius:3px; border:1px solid #0003; flex:none; }
.panel .small.muted, .muted.small { color:var(--dim); }

#viewPill { position:fixed; left:12px; bottom:calc(12px + env(safe-area-inset-bottom)); z-index:18; padding:3px; }
@media (max-width: 920px) { #viewPill { bottom:auto; top:calc(var(--hdr) + 6px); left:12px; } }

@media (max-width: 520px) { button.title, #btnHelp, #btnSettings { display:none; } .tbtn { min-width:50px; } #top { gap:6px; } }

.howto { box-shadow:none; }

#viewPill { gap:6px; }
#zoomSeg button { min-height:40px; padding:0 9px; gap:4px; } #zoomSeg button small { font-size:11.5px; }
#zoomSeg button.on { background:var(--accent-soft); color:var(--fg); font-weight:600; }
@media (max-width: 920px) { #viewPill { max-width:calc(100vw - 24px); overflow-x:auto; } }
.keypad { position:fixed; left:50%; bottom:10px; transform:translateX(-50%); z-index:60; display:flex; gap:8px; padding:10px; background:var(--card, #fff); border:1px solid var(--line, #ccc); border-radius:16px; box-shadow:0 8px 30px rgba(0,0,0,.25); }
.keypad.hidden { display:none; }
.kp-grid { display:grid; grid-template-columns:repeat(4, 64px); gap:6px; } .kp-side { display:flex; flex-direction:column; gap:6px; }
.keypad button { min-height:56px; font-size:20px; border-radius:10px; border:1px solid var(--line, #ccc); background:var(--bg2, #f3f3f3); color:inherit; }
.kp-side button { min-width:84px; flex:1; font-size:16px; } .keypad button.primary { background:var(--accent, #2a7); color:#fff; border-color:transparent; }
body.has-keypad { padding-bottom:0; }

#roBanner { position:fixed; left:50%; top:14px; transform:translateX(-50%); z-index:50; max-width:min(720px,94vw); display:flex; gap:10px; align-items:center; flex-wrap:wrap; padding:10px 14px; border-radius:14px; background:var(--card,#fff); border:1px solid var(--line,#ccc); box-shadow:0 8px 30px rgba(0,0,0,.2); font-size:14px; }
#roBanner.hidden { display:none; }
body.readonly #toolsStage, body.readonly #bottom, body.readonly #props, body.readonly #btnUndo, body.readonly #btnRedo, body.readonly #btnName, body.readonly #btnBook, body.readonly #pillTools, body.readonly #saveDot { display:none !important; }
body.readonly #pillFile { padding-right:6px; }

.vertag { position:fixed; right:8px; bottom:4px; z-index:5; background:none; border:0; padding:2px 6px; font-size:11px; color:var(--dim, #7a828e); opacity:.8; cursor:pointer; min-height:0; }
.vertag:hover { opacity:1; text-decoration:underline; }
body[data-sheet] .vertag, body.readonly .vertag { display:none; }
body.readonly #btnAccount { display:none !important; }
#btnAccount .lbl { max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }