/* @file src/css/app.css ------------------------------------------------------------------------------------------
   Contains:   all styles of the app (theme variables, top bar, panels, dialogs, console, print).
   Inlined into draftcad.html as <style>; a separate hashed file in dist/hosted. */
  :root {
    --bg:#15181d; --panel:#1d2127; --panel-2:#262b33; --panel-3:#2f343d;
    --border:#343a44; --text:#e7ebf0; --text-dim:#8b94a1; --text-faint:#5b636e;
    --accent:#5b8cff; --accent-soft:#22325a; --danger:#e0584f;
    --canvas-bg:#1a1d23; --grid-minor:#23272f; --grid-major:#323844; --axis:#454d59;
    --ink:#e7ebf0; --selected:#ff9d3d; --snap:#2ed47a; --dimov:#c28bff;
    --sel-window:#2ed47a; --sel-cross:#5b8cff;
    --shadow:0 8px 30px rgba(0,0,0,.45);
    --radius:10px;
  }
  [data-theme="light"] {
    --bg:#eef0f3; --panel:#ffffff; --panel-2:#f2f4f7; --panel-3:#e7eaef;
    --border:#d6dae0; --text:#1c2127; --text-dim:#646c77; --text-faint:#9aa2ad;
    --accent:#2f6df0; --accent-soft:#dde7ff; --danger:#d8453b;
    --canvas-bg:#ffffff; --grid-minor:#eaedf1; --grid-major:#d3d8df; --axis:#b4bcc6;
    --ink:#1c2127; --selected:#ef7a12; --snap:#15a35a; --dimov:#8a3ffc;
    --sel-window:#15a35a; --sel-cross:#2f6df0;
    --shadow:0 8px 30px rgba(0,0,0,.14);
  }
  * { box-sizing:border-box; }
  html,body { margin:0; height:100%; overflow:hidden; overflow:clip;   /* clip: closed drawers sit off-screen; focusing a field in one must never scroll the page sideways */
    font-family:ui-sans-serif,system-ui,"Segoe UI",Roboto,sans-serif;
    background:var(--bg); color:var(--text); font-size:13px; }
  #app { display:flex; flex-direction:column; height:100vh; }
  button { font-family:inherit; }

  /* ---------- Top bar ---------- */
  #topbar { display:flex; align-items:center; gap:8px; padding:8px 12px;
    background:var(--panel); border-bottom:1px solid var(--border); flex-wrap:wrap; }
  .brand { font-weight:700; letter-spacing:.4px; font-size:14px; margin-right:4px;
    display:flex; align-items:center; gap:7px; }
  .brand .dot { width:9px; height:9px; border-radius:50%; background:var(--accent); }
  .brand .logo { width:26px; height:26px; flex:none; margin:-5px 0; }
  .brand { gap:6px; }
  .brand .bname { display:flex; flex-direction:column; line-height:1.02; font-size:11.5px; letter-spacing:.2px; white-space:nowrap; }
  .brand .bname span:last-child { color:var(--accent); letter-spacing:1.4px; }
  .sgBrand .logo{ width:24px; height:24px; flex:none; }
  .seg { display:flex; background:var(--panel-2); border:1px solid var(--border);
    border-radius:9px; padding:2px; gap:2px; }
  .seg button { border:none; background:transparent; color:var(--text-dim);
    padding:5px 13px; cursor:pointer; border-radius:7px; font-size:12.5px; }
  .seg button.active { background:var(--accent); color:#fff; }
  .vsep { width:1px; height:24px; background:var(--border); }
  .spacer { flex:1; }
  .tbtn { border:1px solid var(--border); background:var(--panel-2); color:var(--text);
    padding:6px 11px; border-radius:8px; cursor:pointer; font-size:12.5px;
    display:inline-flex; align-items:center; gap:6px; transition:.12s; }
  .tbtn:hover { border-color:var(--accent); }
  .tbtn.icon { padding:6px 9px; }

  /* style picker in top bar */
  #styleBar { display:flex; align-items:center; gap:8px; }
  #styleSelect { position:relative; }
  #styleCurrent { display:flex; align-items:center; gap:8px; cursor:pointer;
    border:1px solid var(--border); background:var(--panel-2); border-radius:8px;
    padding:5px 10px; min-width:140px; }
  #styleCurrent .sw { width:14px; height:14px; border-radius:4px; border:1px solid rgba(255,255,255,.25); }
  #styleCurrent .nm { flex:1; }
  #styleCurrent .ar { color:var(--text-dim); font-size:10px; }
  .pop { position:absolute; top:calc(100% + 6px); left:0; z-index:60;
    background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
    box-shadow:var(--shadow); padding:8px; display:none; min-width:230px; }
  .pop.open { display:block; }
  /* File menu (top bar, next to the app name) */
  #fileMenuWrap { position:relative; }
  #fileBtn .ar { color:var(--text-dim); font-size:10px; }
  #filePop { min-width:300px; padding:5px; max-height:calc(100vh - 70px); overflow-y:auto; }   /* 16b: the menu scrolls on short screens */
  #filePop .fmi { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:6px 10px;
    border-radius:6px; cursor:pointer; color:var(--text); white-space:nowrap; }
  #filePop .fmi:hover { background:var(--panel-2); }
  #filePop .fmi[hidden] { display:none; }   /* 17b: e.g. "Save as company template…" for non-admins was shown anyway */
  #filePop .fmi .k { color:var(--text-dim); font-size:11.5px; }
  #filePop .fsep { height:1px; background:var(--border); margin:4px 2px; }
  #filePop .fhead { color:var(--text-faint); font-size:10px; text-transform:uppercase; letter-spacing:.6px; padding:5px 10px 2px; }
  #filePop .recent .nm { overflow:hidden; text-overflow:ellipsis; max-width:190px; }
  #filePop .recent.off { color:var(--text-faint); cursor:default; }
  #filePop .recent.off:hover { background:none; }
  #filePop .recentNote, #filePop .recentEmpty { color:var(--text-faint); font-size:11px; padding:2px 10px 4px; white-space:normal; }
  #docName { color:var(--text-dim); font-size:12.5px; max-width:240px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  #docName .dirty { color:var(--accent); margin-left:4px; font-weight:700; }
  #fileDlg .modal { width:430px; }
  #frDlg{ background:transparent; pointer-events:none; align-items:flex-start; justify-content:flex-end; padding:70px 18px 0 0; box-sizing:border-box; }
  #frDlg .modal{ width:440px; pointer-events:auto; box-shadow:0 10px 30px rgba(0,0,0,.35); }
  #frDlg .modalBody{ display:grid; grid-template-columns:96px 1fr; gap:8px 10px; align-items:center; }
  #frDlg .modalBody > label{ color:var(--text-dim); font-size:12px; }
  #frDlg input[type=text]{ width:100%; box-sizing:border-box; padding:6px 8px; font-size:13px; }
  #frDlg .fr-opts{ grid-column:1 / span 2; display:flex; gap:14px; font-size:12px; color:var(--text-dim); align-items:center; }
  #frDlg .fr-opts label{ display:flex; align-items:center; gap:4px; }
  #frDlg .fr-list{ grid-column:1 / span 2; max-height:230px; overflow-y:auto; border:1px solid var(--border); border-radius:8px; background:var(--panel-2); min-height:40px; }
  #frDlg .fr-row{ display:grid; grid-template-columns:96px 1fr auto; gap:8px; align-items:center; padding:5px 8px; font-size:12px; cursor:pointer; border-bottom:1px solid var(--border); }
  #frDlg .fr-row.on{ background:color-mix(in srgb, var(--accent) 22%, transparent); } #frDlg .fr-row.on .fr-what{ color:var(--text-dim); }
  #frDlg .fr-what{ color:var(--text-faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  #frDlg .fr-ctx{ color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  #frDlg mark{ background:var(--accent); color:#000; border-radius:2px; padding:0 1px; }
  #frDlg .fr-z{ padding:1px 6px; font-size:11px; }
  #frDlg .fr-foot{ grid-column:1 / span 2; display:flex; gap:8px; align-items:center; font-size:12px; color:var(--text-dim); }
  #frDlg .fr-hint{ grid-column:1 / span 2; font-size:11px; color:var(--text-faint); }
  #dimDlg .modal { width:400px; }
  #dimDlg .modalBody { display:grid; grid-template-columns:118px 1fr; gap:8px 10px; align-items:center; }
  #dimDlg .modalBody label { color:var(--text-dim); font-size:12px; }
  #dimDlg .modalBody input { width:100%; box-sizing:border-box; padding:6px 8px; font-size:13px; }
  #dimDlg .modalBody input.bad { outline:1.5px solid var(--danger); }
  #dimDlg .dd-hint { grid-column:2; font-size:11px; color:var(--text-faint); margin-top:-4px; line-height:1.35; }
  #dimDlg .dd-prev { grid-column:1 / span 2; margin-top:4px; padding:8px 10px; background:var(--panel-2); border-radius:8px; font-size:12px; color:var(--text-dim); }
  #dimDlg .dd-prev b { color:var(--text); font-weight:600; }
  #dimDlg .foot { display:flex; justify-content:flex-end; gap:8px; padding:12px 18px; border-top:1px solid var(--border); }
  #fileDlg .msg { line-height:1.45; }
  #fileDlg input[type=text] { width:100%; box-sizing:border-box; margin-top:10px; padding:7px 9px; font-size:13px; }
  #roomDlg .foot, #roomStyleDlg .foot { display:flex; justify-content:flex-end; gap:8px; padding:12px 18px; border-top:1px solid var(--border); }
  #roomTbl th, #roomTbl td { padding:3px 6px; } #roomTbl tbody tr:hover { background:var(--panel-2); }
  #fileDlg .foot { display:flex; justify-content:flex-end; gap:8px; padding:12px 18px; border-top:1px solid var(--border); }
  .tbtn.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
  .styleRow { display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:7px; cursor:pointer; }
  .styleRow:hover { background:var(--panel-2); }
  .styleRow.active { background:var(--accent-soft); }
  .styleRow .sw { width:14px; height:14px; border-radius:4px; border:1px solid rgba(255,255,255,.25); }
  .styleRow .nm { flex:1; }
  .styleRow .ed { opacity:.6; background:none; border:none; color:var(--text); cursor:pointer; }
  .styleRow .ed:hover { opacity:1; }

  .field { display:flex; align-items:center; gap:6px; }
  .field label { color:var(--text-dim); font-size:11.5px; }
  select,input[type=number],input[type=text] { background:var(--panel-2);
    border:1px solid var(--border); color:var(--text); border-radius:7px; padding:5px 7px; }
  input[type=color]{ width:32px; height:28px; border:1px solid var(--border);
    border-radius:7px; background:none; padding:2px; cursor:pointer; }

  /* ---------- Main ---------- */
  #main { flex:1; display:flex; min-height:0; position:relative; }

  /* Left tool rail — minimal */
  #rail { width:108px; background:var(--panel); border-right:1px solid var(--border);
    display:flex; flex-flow:row wrap; align-content:flex-start; justify-content:center;
    gap:5px; padding:10px 6px; overflow-y:auto; overflow-x:hidden; }
  #rail::-webkit-scrollbar{ width:0; }
  .railsep { flex-basis:100%; width:100%; height:1px; background:var(--border); margin:3px 0; }
  .railgrp { flex-basis:100%; width:100%; font-size:8.5px; letter-spacing:.6px; text-transform:uppercase; color:var(--text-dim); text-align:center; margin:-2px 0 -3px; opacity:.8; }
  .tool { width:44px; height:44px; border:1px solid transparent; background:transparent;
    color:var(--text-dim); border-radius:10px; cursor:pointer; display:flex; flex:none;
    flex-direction:column; align-items:center; justify-content:center; gap:2px; transition:.12s; }
  .tool svg { width:20px; height:20px; }
  .tool span { font-size:8.5px; letter-spacing:.2px; }
  /* compact rail (short screens, see railFit in ui/tablet.js) */
  #rail.railMeasure, #rail.railMeasure * { transition:none !important; }
  /* rail groups (see railFit in ui/tablet.js): flat (display:contents) unless the desktop flow layout is on */
  .railGroup { display:contents; }
  #rail.railFlow { flex-flow:column wrap; align-content:flex-start; justify-content:flex-start; column-gap:14px; row-gap:0; overflow:hidden; }
  #rail.railFlow .railGroup { display:flex; flex-flow:row wrap; justify-content:center; align-content:flex-start; gap:5px; width:var(--rgw,93px); padding-bottom:5px; }
  #rail.railFlow .railGroup:empty, #rail.railFlow .railGroup:not(:has(.tool:not([hidden]))):not(:has(#macroBar)) { display:none; }
  .tool:hover { background:var(--panel-2); color:var(--text); }
  .tool.active { background:var(--accent); color:#fff; }
  /* "More dims" flyout next to the rail */
  #dimFly, #drawFly, #modFly, #symFly, #blkFly { position:absolute; z-index:55; display:none; padding:5px; min-width:228px; background:var(--panel);
    border:1px solid var(--border); border-radius:10px; box-shadow:var(--shadow); }
  #dimFly.show, #drawFly.show, #modFly.show, #symFly.show, #blkFly.show { display:block; }
  #dimFly .tool, #drawFly .tool, #modFly .tool, #symFly .tool, #blkFly .tool { width:100%; height:auto; flex-direction:row; justify-content:flex-start; gap:10px; padding:6px 9px; border-radius:7px; }
  #dimFly .tool span, #drawFly .tool span, #modFly .tool span, #symFly .tool span, #blkFly .tool span { font-size:12px; letter-spacing:0; }
  #dimFly .tool kbd, #drawFly .tool kbd, #modFly .tool kbd, #symFly .tool kbd, #blkFly .tool kbd { margin-left:auto; font-size:10.5px; color:var(--text-faint); font-family:inherit; }
  #dimFly .tool.active kbd, #drawFly .tool.active kbd, #modFly .tool.active kbd, #symFly .tool.active kbd, #blkFly .tool.active kbd { color:#fff; }
  #dimFly .flysep, #drawFly .flysep, #modFly .flysep, #symFly .flysep, #blkFly .flysep { height:1px; background:var(--border); margin:4px 6px; }
  /* point style dialog */
  #ptDlg .modal { width:380px; }
  #mpDlg .modal { width:360px; }
  .mpRow { display:flex; align-items:center; gap:8px; padding:4px 0; font-size:13px; color:var(--text); cursor:pointer; }
  #ptDlgGrid { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-bottom:12px; }
  .ptOpt { display:flex; flex-direction:column; align-items:center; gap:2px; padding:6px 4px; border:1px solid var(--border); border-radius:8px;
    background:var(--panel-2); color:var(--text-dim); cursor:pointer; font-size:11px; }
  .ptOpt canvas { width:40px; height:40px; }
  .ptOpt.on { border-color:var(--accent); color:var(--text); box-shadow:0 0 0 1px var(--accent) inset; }
  #ptDlgSizeRow { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text-dim); }
  #ptDlgSize { width:80px; padding:5px 7px; }
  #ptDlgSize.bad { outline:1.5px solid var(--danger); }

  /* Canvas */
  #stage { flex:1; position:relative; min-width:0; background:var(--canvas-bg); }
  canvas{ display:block; width:100%; height:100%; touch-action:none; }
  body{ touch-action:manipulation; }   /* 17a: no double-tap zoom / click delay on buttons and menus */

  /* bottom-left active layer chip */
  #layerChip { position:absolute; bottom:14px; left:14px; z-index:30; display:flex; gap:8px; align-items:stretch; }
  #layerChipBtn { display:flex; align-items:center; gap:8px; background:var(--panel);
    border:1px solid var(--border); border-radius:10px; padding:7px 11px;
    box-shadow:var(--shadow); cursor:default; }
  #layerChipBtn .sw{ width:12px;height:12px;border-radius:3px;}
  #layerChipBtn .lbl{ color:var(--text-dim); font-size:11px;}

  /* ---------- Command console ---------- */
  #console{ position:absolute; bottom:14px; left:50%; transform:translateX(-50%); z-index:35;
    width:min(640px, calc(100% - 320px)); background:var(--panel); border:1px solid var(--border);
    border-radius:12px; box-shadow:var(--shadow); overflow:hidden; }
  #consoleLog{ max-height:108px; overflow-y:auto; padding:6px 12px; font-size:11.5px;
    color:var(--text-dim); font-variant-numeric:tabular-nums; display:none; border-bottom:1px solid var(--border);
    font-family:ui-monospace, "SF Mono", Menlo, monospace; line-height:1.5; }
  #consoleLog.show{ display:block; }
  #consoleLog .cmd{ color:var(--text); }
  #consoleLog .err{ color:var(--danger); }
  #consoleLog .warn{ color:#d9932b; }
  #consoleLog .caret{ white-space:pre; }
  /* 16a: command reference */
  #cmdRefDlg .modalBody{ display:flex; flex-direction:column; gap:8px; max-height:72vh; }
  #cmdRefDlg .crefIntro{ font-size:12px; color:var(--text-dim); line-height:1.5; }
  #cmdRefDlg .crefIntro p{ margin:0 0 4px; }
  #cmdRefDlg code{ font-family:ui-monospace, "SF Mono", Menlo, monospace; font-size:11.5px; color:var(--text); }
  #crefFilter{ width:100%; box-sizing:border-box; padding:6px 8px; background:var(--panel-2); color:var(--text); border:1px solid var(--border); border-radius:6px; }
  #cmdRefDlg .crefWrap{ overflow:auto; min-height:120px; flex:1; border:1px solid var(--border); border-radius:6px; }
  .crefTable{ width:100%; border-collapse:collapse; font-size:12px; }
  .crefTable th, .crefTable td{ text-align:left; padding:4px 8px; vertical-align:top; border-bottom:1px solid var(--border); }
  .crefTable thead th{ position:sticky; top:0; background:var(--panel); z-index:1; }
  .crefTable .crefCat th{ background:var(--panel-2); color:var(--accent); font-weight:600; }
  .crefTable .crefN{ font-weight:600; white-space:nowrap; color:var(--text); }
  .crefTable .crefA{ color:var(--text-dim); }
  .crefTable .crefD{ color:var(--text-dim); }
  #cmdRefDlg .foot{ display:flex; justify-content:flex-end; align-items:center; gap:8px; padding:12px 18px; border-top:1px solid var(--border); }
  #cmdRefDlg .crefCount{ margin-right:auto; font-size:12px; color:var(--text-dim); }
  #consoleLog .errRep .errBtn{ font:inherit; font-size:11px; padding:0 6px; margin-left:2px; border:1px solid currentColor; border-radius:4px; background:transparent; color:inherit; cursor:pointer; opacity:.85; }
  #consoleLog .errRep .errBtn:hover{ opacity:1; }
  #consoleLog:has(.errStack:not([hidden])){ max-height:300px; }
  #consoleLog .errRep pre{ margin:4px 0 6px; padding:6px 8px; white-space:pre-wrap; word-break:break-word; font-size:11px; color:var(--text); background:rgba(127,127,127,.12); border-radius:4px; max-height:200px; overflow:auto; }
  .prop-grid .ro.archWarn{ color:#d9932b; font-weight:600; }
  #consoleRow{ display:flex; align-items:center; gap:8px; padding:8px 12px; min-width:0; }
  /* a long prompt is cut with "…" (the whole text is in its tooltip) — the row never scrolls sideways */
  #consolePrompt{ color:var(--accent); font-size:12px; white-space:nowrap; font-weight:600; flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; }
  #consoleFields{ display:flex; gap:6px; flex:none; }
  .cfield{ display:flex; align-items:center; gap:4px; background:var(--panel-2);
    border:1px solid var(--border); border-radius:6px; padding:2px 6px; font-size:11.5px; color:var(--text-dim); }
  .cfield.active{ border-color:var(--accent); color:var(--text); }
  .cfield b{ color:var(--text); font-variant-numeric:tabular-nums; }
  #consoleInput{ flex:1; background:transparent; border:none; outline:none; color:var(--text);
    font-size:13px; font-family:ui-monospace, "SF Mono", Menlo, monospace; min-width:60px; }
  #consoleInput::placeholder{ color:var(--text-faint); }

  /* HUD */
  #hud{ position:absolute; top:14px; left:14px; z-index:20; background:var(--panel);
    border:1px solid var(--border); border-radius:10px; padding:6px 11px;
    font-variant-numeric:tabular-nums; color:var(--text-dim); display:flex; gap:14px;
    box-shadow:var(--shadow); pointer-events:none;}
  #hud b{ color:var(--text); font-weight:600; }
  /* drawing-aid status chips (top bar) */
  #statusChips{ display:flex; gap:3px; flex:none; margin-right:10px; }
  .schip{ font:600 10px/1 ui-sans-serif,system-ui,sans-serif; letter-spacing:.4px; padding:6px 7px; border-radius:6px; cursor:pointer;
    background:var(--panel-2); color:var(--text-faint); border:1px solid var(--border); }
  .schip.on{ color:var(--accent); border-color:var(--accent); }
  .schip:hover{ color:var(--text); }
  #annoWrap{ position:relative; flex:none; }
  #annoBtn{ display:block; text-align:left; background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:7px 11px;
    box-shadow:var(--shadow); cursor:pointer; color:var(--text); font:inherit; height:100%; }
  #annoBtn:hover{ border-color:var(--accent); }
  #annoBtn .lbl{ color:var(--text-dim); font-size:11px; }
  #annoChip{ font-variant-numeric:tabular-nums; }
  #annoPop{ top:auto; bottom:calc(100% + 6px); min-width:170px; max-height:70vh; overflow:auto; padding:5px; }
  #annoPop .ap-i{ padding:5px 10px; border-radius:6px; cursor:pointer; font-variant-numeric:tabular-nums; }
  #annoPop .ap-i:hover{ background:var(--panel-2); }
  #annoPop .ap-i.on{ background:var(--accent-soft); color:var(--accent); }
  #annoPop .ap-h{ font-size:11px; color:var(--text-faint); padding:3px 10px 5px; }
  #annoPop .ap-sep{ height:1px; background:var(--border); margin:4px 6px; }
  /* dynamic input: a view of the console fields beside the cursor */
  #dynInput{ position:absolute; z-index:25; display:none; gap:3px; pointer-events:none; font-variant-numeric:tabular-nums; }
  #dynInput.show{ display:flex; }
  .dynbox{ display:flex; align-items:baseline; gap:4px; background:var(--panel); border:1px solid var(--border); border-radius:4px;
    padding:2px 6px; font-size:11px; color:var(--text-dim); box-shadow:var(--shadow); min-width:46px; }
  .dynbox i{ font-style:normal; font-size:9.5px; color:var(--text-faint); }
  .dynbox b{ font-weight:600; color:var(--text); }
  .dynbox.live b{ color:var(--text-dim); font-weight:500; }
  .dynbox.active{ border-color:var(--accent); }
  .dynbox.active b::after{ content:''; display:inline-block; width:1px; height:11px; margin-left:1px; background:var(--accent); vertical-align:-1px; }

  /* right-side toggle buttons + drawers */
  #rightToggles{ position:absolute; top:14px; right:14px; z-index:30; display:flex; flex-direction:column; gap:8px; }
  .rdrawer{ position:absolute; top:0; right:0; height:100%; width:280px; z-index:50;
    background:var(--panel); border-left:1px solid var(--border); box-shadow:var(--shadow);
    transform:translateX(100%); transition:transform .22s ease; display:flex; flex-direction:column;}
  .rdrawer.open{ transform:translateX(0); }
  .drawerHead{ display:flex; align-items:center; justify-content:space-between;
    padding:14px 16px; border-bottom:1px solid var(--border); }
  .drawerHead h3{ margin:0; font-size:13px; }
  .drawerBody{ padding:12px; overflow-y:auto; flex:1; }

  /* properties drawer */
  #propsDrawer .drawerBody{ padding:10px 12px 16px; }
  .prop-empty{ color:var(--text-dim); line-height:1.55; font-size:12.5px; padding:4px 2px; }
  .prop-sec{ margin:4px 0 12px; }
  .prop-sec h4{ margin:10px 0 7px; font-size:10.5px; text-transform:uppercase; letter-spacing:.7px; color:var(--text-faint); font-weight:600; }
  .prop-grid{ display:grid; grid-template-columns:92px 1fr; gap:6px 8px; align-items:center; }
  .prop-grid label{ color:var(--text-dim); font-size:12px; }
  .prop-grid input[type=text], .prop-grid select, .prop-grid textarea{ width:100%; box-sizing:border-box; min-width:0;
    font-variant-numeric:tabular-nums; }
  .prop-grid textarea{ background:var(--panel-2); border:1px solid var(--border); color:var(--text); border-radius:7px;
    padding:5px 7px; font:inherit; resize:vertical; min-height:44px; }
  .prop-grid .ro{ color:var(--text); font-variant-numeric:tabular-nums; padding:5px 0; }
  .prop-grid input.bad{ border-color:var(--danger); }
  .prop-xy{ display:grid; grid-template-columns:1fr 1fr; gap:6px; min-width:0; }
  .prop-type{ display:inline-block; font-size:11px; padding:2px 8px; border-radius:20px; background:var(--panel-3); color:var(--text); }
  .prop-verts{ display:grid; grid-template-columns:26px 1fr 1fr; gap:5px 6px; align-items:center; }
  .prop-verts span{ color:var(--text-faint); font-size:11px; text-align:right; }
  .prop-btns{ display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; }
  /* 11a blocks */
  .blkGrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:8px; max-height:360px; overflow:auto; padding:2px; }
  .blkTile{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:5px; border:1px solid var(--border); border-radius:8px; background:var(--panel); color:var(--text); cursor:pointer; font:inherit; font-size:12px; }
  .blkTile canvas{ border-radius:4px; display:block; }
  .blkTile span{ max-width:104px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .blkTile.on{ border-color:var(--accent); box-shadow:0 0 0 2px var(--accent); }
  #libDrawer{ width:316px; }
  .libBar{ padding:10px 12px 4px; } .libBar input{ width:100%; box-sizing:border-box; }
  .libTabs{ display:flex; flex-wrap:wrap; gap:4px; padding:6px 12px 8px; border-bottom:1px solid var(--border); }
  .libTab{ font:inherit; font-size:11.5px; padding:3px 8px; border-radius:12px; border:1px solid var(--border); background:transparent; color:var(--text); cursor:pointer; }
  .libTab.on{ background:var(--accent); border-color:var(--accent); color:#fff; }
  .libGrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
  .libTile{ position:relative; display:flex; flex-direction:column; align-items:center; gap:4px; padding:5px; border:1px solid var(--border); border-radius:8px; background:var(--panel); color:var(--text); cursor:grab; font:inherit; font-size:11.5px; }
  .libTile canvas{ border-radius:4px; display:block; pointer-events:none; } .libTile span{ max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .libTile:hover{ border-color:var(--accent); } .libTile.on{ border-color:var(--accent); box-shadow:0 0 0 2px var(--accent); }
  .libDel{ position:absolute; top:3px; right:5px; font-size:11px; opacity:.6; cursor:pointer; } .libDel:hover{ opacity:1; color:var(--danger,#e0584f); }
  .libUserBar{ display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; } .libHint{ padding:8px 12px 10px; border-top:1px solid var(--border); line-height:1.45; }
  .bmList{ display:flex; flex-direction:column; gap:6px; max-height:420px; overflow:auto; }
  .bmRow{ display:flex; align-items:center; gap:10px; padding:5px; border:1px solid var(--border); border-radius:8px; }
  .bmRow canvas{ border-radius:4px; flex:0 0 auto; }
  .bmMid{ display:flex; flex-direction:column; gap:4px; flex:1 1 auto; min-width:0; }
  .bmMid input{ width:100%; box-sizing:border-box; }
  .bmName{ font-weight:600; } .bmName.bad{ outline:1px solid #e0584f; }
  .bmRefs{ flex:0 0 96px; font-size:12px; color:var(--text-faint); text-align:right; }
  .bmBtns{ display:flex; gap:4px; flex:0 0 auto; }
  #beditBar{ position:absolute; top:10px; left:50%; transform:translateX(-50%); z-index:40; display:none; align-items:center; gap:8px; padding:6px 10px;
    background:var(--panel); border:1px solid var(--accent); border-radius:10px; box-shadow:0 4px 16px rgba(0,0,0,.35); font-size:13px; color:var(--text); }
  #beditBar .be-t{ color:var(--accent); font-weight:600; }
  .prop-hint{ color:var(--text-faint); font-size:11px; line-height:1.5; margin-top:10px; }

  .panel-pop{ background:var(--panel); border:1px solid var(--border);
    border-radius:var(--radius); box-shadow:var(--shadow); padding:12px; }
  .fkey{ margin-left:auto; font-size:9.5px; color:var(--text-dim); border:1px solid var(--border);
    border-radius:4px; padding:1px 5px; font-family:ui-monospace,monospace; }
  .pop-row{ display:flex; align-items:center; gap:10px; margin-bottom:9px; }
  .pop-row:last-child{ margin-bottom:0; }
  .pop-row label{ flex:1; color:var(--text-dim); }
  .switch{ display:flex; align-items:center; gap:8px; cursor:pointer; padding:5px 0; }
  .switch input{ width:16px; height:16px; accent-color:var(--accent); }
  .osnap-grid{ display:grid; grid-template-columns:1fr; column-gap:10px; }
  .osnap-grid .switch{ padding:3px 0; font-size:12.5px; }
  .osnap-grid .osg{ display:inline-block; width:14px; height:14px; text-align:center; color:var(--snap); font-size:12px; vertical-align:-2px; }
  .osnap-grid + .pop-row{ margin-top:8px; }
  h4.pop-title{ margin:0 0 10px; font-size:11px; text-transform:uppercase;
    letter-spacing:.7px; color:var(--text-faint); }

  /* layer item */
  .layer{ display:flex; align-items:center; gap:8px; padding:8px 9px; border-radius:9px;
    border:1px solid var(--border); background:var(--panel-2); margin-bottom:7px; }
  .layer.active{ border-color:var(--accent); }
  .layer .eye{ background:none; border:none; cursor:pointer; color:var(--text); opacity:.75; font-size:14px;}
  .layer .eye:hover{ opacity:1; }
  .layer .nm{ flex:1; cursor:text; }
  .layer .del{ background:none; border:none; color:var(--text-dim); cursor:pointer; }
  .layer .del:hover{ color:var(--danger); }
  /* 9a: layer manager rows */
  #layersDrawer{ width:430px; }
  /* 9b: layer states / standards / templates / quick select dialogs */
  #lasList,#tplList{ max-height:220px; overflow:auto; border:1px solid var(--border); border-radius:6px; margin-bottom:8px; }
  .lasRow{ display:flex; flex-direction:column; gap:1px; padding:6px 9px; cursor:pointer; border-bottom:1px solid var(--border); font-size:13px; color:var(--text); }
  .lasRow:last-child{ border-bottom:0; } .lasRow:hover{ background:var(--panel-2,rgba(127,127,127,.08)); }
  .lasRow.sel{ background:rgba(91,140,255,.18); } .lasRow .nm{ font-weight:600; }
  .tplDef{ font:600 10px/1 ui-sans-serif,system-ui,sans-serif; color:var(--accent); border:1px solid var(--accent); border-radius:4px; padding:1px 4px; margin-left:4px; }
  .s9sec{ border-top:1px solid var(--border); padding-top:8px; margin-top:6px; }
  .slT,.pstT{ border-collapse:collapse; width:100%; font-size:12px; } .slT th,.pstT th{ text-align:left; font-weight:600; color:var(--text-dim); padding:3px 4px; border-bottom:1px solid var(--border); }
  .slT td,.pstT td{ padding:2px 4px; border-bottom:1px solid var(--border); white-space:nowrap; } .slT input[type=text]{ width:100%; min-width:50px; } .slT input.slNum{ width:76px; } .slT td:nth-child(4){ width:40%; }
  .slT tr.cur td{ background:rgba(91,140,255,.10); } .slT tr.over td{ border-top:2px solid var(--accent); } .slT tr.drag{ opacity:.5; } .slDrag{ cursor:grab; color:var(--text-dim); user-select:none; }
  .slBtns .tbtn{ padding:2px 7px; } .pstWrap{ display:flex; gap:14px; } .pstList{ width:190px; flex:none; } .pstEd{ flex:1; min-width:0; overflow-x:auto; }
  .pstItem{ padding:5px 8px; border-radius:6px; cursor:pointer; font-size:12.5px; } .pstItem.on{ background:var(--accent); color:#fff; } .pstItem.on .mini{ color:#eef; }
  .pstT input[type=number]{ width:58px; } .pstSw{ display:inline-block; width:14px; height:14px; border:1px solid var(--border); border-radius:3px; vertical-align:middle; margin-right:4px; }
  .pstRow{ display:flex; align-items:center; gap:6px; font-size:11.5px; } .pstRow select{ flex:1; min-width:0; }
  .s9row{ display:flex; gap:8px; align-items:center; margin-bottom:6px; flex-wrap:wrap; } .s9row input[type=text]{ flex:1; min-width:0; }
  .s9row label{ display:inline-flex; gap:4px; align-items:center; }
  .s9info{ line-height:1.5; margin:6px 0; padding:7px 9px; border:1px solid var(--border); border-radius:6px; }
  .lstdList{ max-height:190px; overflow:auto; border:1px solid var(--border); border-radius:6px; font-size:12px; margin-bottom:6px; }
  .lstdList > div{ display:grid; grid-template-columns:12px 96px 1fr auto; gap:7px; align-items:center; padding:3px 8px; color:var(--text); }
  .lstdList > div.off{ opacity:.45; } .lstdList .sw{ width:10px; height:10px; border-radius:2px; }
  .qsGrid{ display:grid; grid-template-columns:96px 1fr; gap:8px 10px; align-items:center; font-size:13px; color:var(--text); }
  .qsGrid select, .qsGrid input[type=text]{ width:100%; } .qsModes{ display:grid; grid-template-columns:1fr 1fr; gap:4px 8px; font-size:12px; }
  .qsModes label{ display:flex; gap:5px; align-items:center; } .qsCount{ margin-top:10px; font-size:13px; font-weight:600; color:var(--accent); min-height:16px; }
  #lasDlg .foot, #lstdDlg .foot, #tplSaveDlg .foot, #tplNewDlg .foot, #qsDlg .foot { display:flex; justify-content:flex-end; align-items:center; flex-wrap:wrap; gap:6px; padding:12px 18px; border-top:1px solid var(--border); }
  #tplNewDlg .fhead{ font-size:11px; color:var(--text-dim); margin:4px 0; text-transform:uppercase; letter-spacing:.4px; }
  #layersDrawer .drawerBody{ padding:6px 10px 12px; }
  .layBar{ display:flex; gap:6px; padding:10px 10px 6px; align-items:center; }
  .layBar input{ flex:1; min-width:0; }
  .layBar select{ font-size:12px; max-width:120px; }
  .layRow{ display:grid; grid-template-columns:24px 24px 24px 24px 24px 74px 64px minmax(0,1fr) 24px; gap:3px; align-items:center;
    padding:4px 6px; border-radius:7px; border:1px solid transparent; }
  .layRow.layer{ margin-bottom:2px; background:var(--panel-2); border-color:var(--border); }
  .layRow.layer.active{ border-color:var(--accent); }
  .layRow.layer.isOff .nm, .layRow.layer.isFrz .nm{ opacity:.55; }
  .layHdr{ font-size:9px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.3px; padding:0 17px 4px; }
  .layHdr span:nth-child(-n+5){ text-align:center; }
  .layRow .lt{ background:none; border:none; cursor:pointer; font-size:13px; padding:0; width:24px; height:22px; line-height:22px; color:var(--text); border-radius:5px; }
  .layRow .lt:hover{ background:var(--panel-3); }
  .layRow .lt.offst{ opacity:.33; }
  .layRow input[type=color]{ width:22px; height:20px; padding:0; border:1px solid var(--border); border-radius:4px; background:none; }
  .layRow select{ font-size:11px; padding:1px 2px; min-width:0; width:100%; }
  .layRow .nm{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:text; font-size:12.5px; }
  .layRow .act{ width:24px; padding:0; font-size:13px; text-align:center; appearance:none; -webkit-appearance:none; background:none; border:none; color:var(--text-dim); cursor:pointer; }
  .lgroup{ display:flex; align-items:center; gap:6px; padding:6px 4px 4px; font-size:11px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.5px; cursor:pointer; user-select:none; }
  .lgroup .gc{ font-size:10px; color:var(--text-faint); }
  .lgroup .gb{ margin-left:auto; background:none; border:none; color:var(--text-faint); cursor:pointer; font-size:12px; }
  .lgroup .gb:hover{ color:var(--text); }
  .layEmpty{ color:var(--text-dim); font-size:12px; padding:8px 4px; }
  #lcName .lcf{ color:var(--text-faint); font-size:10.5px; margin-left:6px; }
  .styleEdit .bl{ display:flex; align-items:center; gap:3px; font-size:9.5px; color:var(--text-faint); margin-top:2px; cursor:pointer; }
  .styleEdit .bl input{ width:12px; height:12px; margin:0; }

  /* selection rubber band drawn on canvas (no DOM) */

  /* on-canvas text editor */
  #teWrap{ position:absolute; z-index:40; display:none; left:0; top:0; }
  #textEditor{ display:block; box-sizing:content-box; background:rgba(127,127,127,.06); margin:0;
    border:1px dashed var(--accent); color:var(--ink); outline:none; resize:none;
    overflow:hidden; padding:0; line-height:1.25; white-space:pre; overflow-wrap:normal; word-break:normal; tab-size:4; }
  #teWidthH{ position:absolute; width:8px; height:16px; border-radius:3px; background:var(--accent); cursor:ew-resize; opacity:.85; touch-action:none; }
  #textBar{ position:absolute; z-index:41; display:none; align-items:center; gap:8px; background:var(--panel); border:1px solid var(--border); border-radius:9px;
    padding:4px 8px; box-shadow:0 6px 20px rgba(0,0,0,.22); font-size:11px; color:var(--text-dim); white-space:nowrap; }
  #textBar input[type=text]{ width:42px; background:var(--panel-2); border:1px solid var(--border); color:var(--text); border-radius:5px; padding:2px 4px; font-size:11px; }
  #textBar input.bad{ outline:1.5px solid var(--danger); }
  #textBar .tbtn{ padding:2px 7px; font-size:12px; }
  #textBar.ldr .tb-t, #textBar.ldr .tb-just{ display:none; }
  #textBar .tb-hint{ color:var(--text-faint); }
  #textBar .tb-chk{ display:flex; align-items:center; gap:3px; }
  .tb-just{ display:grid; grid-template-columns:repeat(3,9px); gap:2px; }
  .tb-j{ width:9px; height:9px; padding:0; border:1px solid var(--border); background:var(--panel-2); border-radius:2px; cursor:pointer; }
  .tb-j.on{ background:var(--accent); border-color:var(--accent); }
  #tbSymMenu{ position:absolute; z-index:42; display:none; background:var(--panel); border:1px solid var(--border); border-radius:9px; padding:4px; box-shadow:0 6px 20px rgba(0,0,0,.25); font-size:12px; min-width:220px; }
  #tbSymMenu.open{ display:block; }
  #tbSymMenu .sm-i{ display:grid; grid-template-columns:34px 1fr auto; gap:8px; align-items:center; padding:4px 8px; border-radius:6px; cursor:pointer; color:var(--text); }
  #tbSymMenu .sm-i:hover{ background:var(--panel-2); }
  #tbSymMenu .sm-i b{ font-size:15px; } #tbSymMenu code{ color:var(--text-faint); font-size:11px; }
  #tbSymMenu .sm-note{ padding:4px 8px 2px; color:var(--text-faint); font-size:10.5px; border-top:1px solid var(--border); margin-top:3px; }

  /* hatch tool bar + pattern picker */
  #hatchBar{ position:absolute; top:12px; left:50%; transform:translateX(-50%); z-index:35; display:none; align-items:center; gap:10px;
    background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:6px 10px; box-shadow:0 6px 20px rgba(0,0,0,.22); font-size:12px; color:var(--text-dim); white-space:nowrap; }
  #hatchBar.show{ display:flex; }
  #hatchBar .hb-t{ color:var(--text); font-weight:600; }
  #hatchBar input[type=text]{ width:54px; background:var(--panel-2); border:1px solid var(--border); color:var(--text); border-radius:6px; padding:4px 6px; font-size:12px; }
  #hatchBar input[type=color]{ width:34px; height:24px; padding:0 2px; background:var(--panel-2); border:1px solid var(--border); border-radius:6px; }
  #hatchBar label{ display:inline-flex; align-items:center; gap:5px; }
  .hb-pat{ display:inline-flex; align-items:center; gap:7px; padding:3px 8px 3px 4px; }
  .hb-pat canvas{ width:36px; height:22px; border-radius:4px; background:var(--panel-2); border:1px solid var(--border); }
  .hb-pat .nm{ color:var(--text); }
  #hatchPicker{ position:absolute; top:60px; left:40px; z-index:70; width:330px; padding:8px; display:none; grid-template-columns:repeat(4,1fr); gap:6px; max-height:70vh; overflow:auto; }
  #hatchPicker.open{ display:grid; }
  .hp-item{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:5px 3px; border:1px solid transparent; border-radius:8px; background:none; color:var(--text-dim); cursor:pointer; font-size:10.5px; line-height:1.2; text-align:center; }
  .hp-item canvas{ width:66px; height:40px; border-radius:5px; background:var(--panel-2); border:1px solid var(--border); }
  .hp-item:hover{ background:var(--panel-2); color:var(--text); }
  .hp-item.on{ border-color:var(--accent); color:var(--text); }

  /* right-click menu on the drawing */
  #ctxMenu{ position:absolute; z-index:60; display:none; min-width:210px; padding:5px;
    background:var(--panel); border:1px solid var(--border); border-radius:9px;
    box-shadow:0 8px 28px rgba(0,0,0,.28); font-size:12.5px; user-select:none; }
  #ctxMenu.show{ display:block; }
  /* 17a: touch — long-press ring and loupe */
  #tpRing{ position:absolute; z-index:55; width:58px; height:58px; margin:-29px 0 0 -29px; border-radius:50%; pointer-events:none;
    border:3px solid var(--accent); opacity:0; transform:scale(.35); }
  #tpRing.on{ animation:tpRingGrow 500ms linear forwards; }
  @keyframes tpRingGrow{ 0%{ opacity:0; transform:scale(.35); } 25%{ opacity:.35; } 100%{ opacity:.95; transform:scale(1); } }
  #tpLoupeC{ position:absolute; z-index:54; display:none; border-radius:50%; pointer-events:none; border:2px solid var(--accent);
    box-shadow:0 4px 16px rgba(0,0,0,.35); background:var(--canvas-bg); }
  #tpLoupeC.on{ display:block; }
  #ctxMenu .mi{ display:flex; justify-content:space-between; gap:18px; padding:6px 10px;
    border-radius:6px; cursor:pointer; color:var(--text); }
  #ctxMenu .mi:hover{ background:var(--panel-2); }
  #ctxMenu .mi.off{ color:var(--text-faint); cursor:default; background:none; }
  #ctxMenu .mi .k{ color:var(--text-dim); font-size:11.5px; }
  #ctxMenu .sep{ height:1px; background:var(--border); margin:4px 2px; }

  /* ---------- Paper view ---------- */
  #paper{ flex:1; display:none; min-height:0; }
  #paper.show{ display:flex; }
  #sheetsRail{ width:190px; background:var(--panel); border-right:1px solid var(--border);
    display:flex; flex-direction:column; }
  #sheetsRail .head{ padding:12px; border-bottom:1px solid var(--border);
    display:flex; align-items:center; justify-content:space-between; }
  #sheetsRail .head h3{ margin:0; font-size:12px; }
  #sheetList{ overflow-y:auto; flex:1; padding:8px; }
  .sheetItem{ border:1px solid var(--border); background:var(--panel-2); border-radius:9px;
    padding:9px; margin-bottom:8px; cursor:pointer; }
  .sheetItem.active{ border-color:var(--accent); }
  .sheetItem .t{ display:flex; align-items:center; gap:7px; }
  .sheetItem .t input[type=checkbox]{ accent-color:var(--accent); }
  .sheetItem .t .nm{ flex:1; font-size:12px; }
  .sheetItem .meta{ color:var(--text-dim); font-size:10.5px; margin-top:4px; margin-left:23px;}
  .sheetItem .del{ background:none;border:none;color:var(--text-dim);cursor:pointer;}
  .sheetItem .del:hover{ color:var(--danger); }

  #paperMain{ flex:1; display:flex; flex-direction:column; min-width:0; }
  #paperToolbar{ display:flex; align-items:center; gap:12px; padding:10px 14px;
    background:var(--panel); border-bottom:1px solid var(--border); flex-wrap:wrap; }
  #paperStage{ flex:1; position:relative; overflow:hidden; background:var(--bg); }
  /* 10b paper space tools, sheet properties, revisions */
  #paperTools{ display:flex; align-items:center; gap:6px; padding:6px 14px; background:var(--panel); border-bottom:1px solid var(--border); flex-wrap:wrap; }
  #paperTools .tbtn.on, #paperTools .tbtn.on:hover{ background:var(--accent); border-color:var(--accent); color:#fff; }
  #paperCmd{ width:250px; }
  #psTbBadge{ color:var(--accent); font-weight:600; }
  #vpPanel .rvRow{ display:grid; grid-template-columns:34px 1fr 38px 38px 26px; gap:3px; margin:0 0 6px; padding-bottom:6px; border-bottom:1px solid var(--border); }
  #vpPanel .rvRow input{ min-width:0; }
  #vpPanel .rvRow .rvDesc{ grid-column:1 / -1; }
  #vpPanel .rvRow .rvDel{ padding:0 4px; }
  #paperCanvas{ position:absolute; inset:0; width:100%; height:100%; touch-action:none; }
  #paperHint{ position:absolute; bottom:12px; left:12px; color:var(--text-dim);
    background:var(--panel); border:1px solid var(--border); border-radius:8px; padding:5px 9px; max-width:calc(100% - 300px);}
  /* 10a viewport properties */
  #vpPanel{ position:absolute; top:12px; right:12px; width:262px; max-height:calc(100% - 24px); overflow-y:auto; display:none;
    background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:10px 12px; font-size:12px; box-shadow:0 6px 22px rgba(0,0,0,.25); }
  #vpPanel.show{ display:block; }
  #vpPanel .vh{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; }
  #vpPanel .vr{ display:flex; align-items:center; gap:6px; margin:4px 0; }
  #vpPanel .vr label{ width:74px; color:var(--text-dim); }
  #vpPanel .vr input, #vpPanel .vr select{ flex:1; min-width:0; }
  #vpPanel .vr .u{ width:18px; color:var(--text-dim); }
  #vpPanel .vc{ display:flex; align-items:center; gap:6px; margin:5px 0; }
  #vpPanel .vb{ display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }
  #vpPanel table.vl{ width:100%; border-collapse:collapse; }
  #vpPanel table.vl th{ text-align:left; font-weight:500; color:var(--text-dim); padding:2px; }
  #vpPanel table.vl td{ padding:2px; border-top:1px solid var(--border); }
  #vpPanel table.vl td.ln{ max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  #vpPanel table.vl .g{ color:var(--text-dim); }
  @media (max-width:700px){ #vpPanel{ width:auto; left:12px; max-height:45%; top:auto; bottom:52px; } #paperHint{ max-width:calc(100% - 24px); } }

  /* ---------- Style settings modal ---------- */
  .modalTabs{ display:flex; gap:4px; padding:0 18px; border-bottom:1px solid var(--border); }
  .mtab{ border:none; background:none; color:var(--text-dim); padding:10px 14px; cursor:pointer;
    border-bottom:2px solid transparent; font-size:12.5px; }
  .mtab.active{ color:var(--text); border-bottom-color:var(--accent); }
  .modalBg{ position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:100;
    display:none; align-items:center; justify-content:center; }
  .modalBg.open{ display:flex; }
  .modal{ background:var(--panel); border:1px solid var(--border); border-radius:14px;
    box-shadow:var(--shadow); width:560px; max-width:92vw; max-height:86vh; display:flex; flex-direction:column; }
  .modalHead{ display:flex; align-items:center; justify-content:space-between;
    padding:14px 18px; border-bottom:1px solid var(--border); }
  .modalHead h3{ margin:0; font-size:14px; }
  .modalBody{ padding:16px 18px; overflow-y:auto; }
  .styleEditList{ display:flex; flex-direction:column; gap:8px; }
  .dsTop{ display:flex; gap:12px; align-items:stretch; flex-wrap:wrap; }
  #dsList{ flex:1 1 180px; min-width:160px; background:var(--panel-2); color:var(--text); border:1px solid var(--border); border-radius:8px; padding:4px; font-size:13px; }
  .dsBtns{ display:flex; flex-direction:column; gap:6px; }
  #mlsPreview{ width:100%; height:120px; margin:12px 0 4px; background:#fff; border:1px solid var(--border); border-radius:8px; display:block; }
  #dsPreview{ width:100%; height:160px; margin:12px 0 4px; background:#fff; border:1px solid var(--border); border-radius:8px; display:block; }
  .dsForm{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px 12px; margin-top:10px; }
  .dsForm{ align-items:end; }   /* fields line up even when a label wraps onto two lines */
  .dsForm .f{ display:flex; flex-direction:column; gap:2px; min-width:0; }
  .dsForm .f span{ font-size:9.5px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.5px; }
  .dsForm input[type=text], .dsForm input[type=number], .dsForm select{ width:100%; box-sizing:border-box; min-width:0; }
  .dsForm h5{ grid-column:1/-1; margin:8px 0 0; font-size:11px; color:var(--text-dim); border-bottom:1px solid var(--border); padding-bottom:3px; }

  .styleEdit{ display:flex; align-items:center; gap:10px; padding:10px;
    border:1px solid var(--border); border-radius:10px; background:var(--panel-2); }
  .styleEdit input[type=text]{ width:120px; }
  .styleEdit input[type=color]{ width:34px; height:30px; }
  .styleEdit select{ font-size:12px; }
  .styleEdit .lbl{ font-size:9.5px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.5px; display:block; margin-bottom:2px;}
  .styleEdit .col{ display:flex; flex-direction:column; }
  #textStyleEditList .styleEdit{ gap:6px; }
  #textStyleEditList .styleEdit input[type=text]{ width:88px; }
  #textStyleEditList .styleEdit select{ max-width:112px; }
  #textStyleEditList .styleEdit .col.cb{ align-items:center; }
  #textStyleEditList .styleEdit input[type=checkbox]{ margin:7px 0 0; }
  .styleEdit .delS{ margin-left:auto; background:none; border:none; color:var(--text-dim); cursor:pointer; font-size:16px; }
  /* Style settings: wide enough for a whole row; the layer column takes the spare width, delete sits at the far right */
  #styleModalBg .modal{ width:820px; }
  #lineStylePane .styleEdit{ display:grid; grid-template-columns:minmax(120px,1.2fr) 104px 112px 64px minmax(130px,1fr) 28px; align-items:start; gap:10px; }
  #lineStylePane .styleEdit input[type=text], #lineStylePane .styleEdit select{ width:100%; box-sizing:border-box; min-width:0; }
  #lineStylePane .styleEdit .delS, #textStyleEditList .styleEdit .delS{ margin:18px 0 0; width:28px; height:28px; display:flex; align-items:center; justify-content:center; padding:0; }
  #textStyleEditList .styleEdit{ display:grid; grid-template-columns:minmax(110px,1.2fr) minmax(130px,1fr) 104px 52px 64px minmax(120px,1fr) 28px; align-items:start; gap:10px; }
  #textStyleEditList .styleEdit input[type=text], #textStyleEditList .styleEdit select{ width:100%; max-width:none; box-sizing:border-box; min-width:0; }
  .styleEdit .delS:hover{ color:var(--danger); }

  @media print {
    body{ background:#fff; }
    #topbar,#rail,#sheetsRail,#paperToolbar,#paperHint,#rightToggles,#layerChip,#console,#hud,#statusChips,#annoWrap,#dynInput{ display:none !important; }
    #printArea img{ page-break-after:always; display:block; max-width:100%; }
  }
  #printArea{ display:none; }
  .mini{ font-size:11px; color:var(--text-dim); }

  /* ---------- 14a: DraftCAD Cloud ---------- */
  #cloudStatus{ font-size:11.5px; color:var(--text-faint); white-space:nowrap; margin-left:2px; }
  #cloudStatus.cs-ok{ color:var(--text-dim); } #cloudStatus.cs-busy{ color:var(--accent); } #cloudStatus.cs-err{ color:var(--danger); }
  #cloudChip{ display:inline-flex; align-items:center; gap:6px; margin-left:6px; font-size:12px; color:var(--text-dim); white-space:nowrap; }
  #cloudChip[hidden]{ display:none; }
  #cloudChip .cc-who{ max-width:260px; overflow:hidden; text-overflow:ellipsis; }
  #cloudChip .tbtn{ padding:3px 8px; font-size:11.5px; }
  #filePop .fmi.off{ color:var(--text-faint); }
  #cloudAuthDlg .modal{ width:400px; }
  #cloudAuthDlg .seg{ margin-bottom:12px; } #cloudAuthDlg .seg button{ flex:1; }
  #caForm{ display:flex; flex-direction:column; gap:9px; }
  #caForm label{ display:flex; flex-direction:column; gap:3px; font-size:12px; color:var(--text-dim); }
  #caForm input{ background:var(--panel-2); border:1px solid var(--border); color:var(--text); border-radius:7px; padding:7px 9px; font-size:13px; }
  .caHint{ font-size:11px; color:var(--text-faint); line-height:1.4; }
  .caNote{ font-size:12px; color:var(--text-dim); margin-bottom:8px; } .caNote:empty{ display:none; }
  .caErr{ font-size:12px; color:var(--danger); min-height:1em; margin-top:6px; }
  #cloudAuthDlg .foot, #cloudOpenDlg .foot{ display:flex; justify-content:flex-end; gap:8px; padding:12px 18px; border-top:1px solid var(--border); }
  #cloudOpenDlg .modal{ width:680px; }
  .coTop{ display:flex; align-items:center; gap:8px; margin-bottom:10px; } .coTop select{ flex:1; }
  .coT{ width:100%; border-collapse:collapse; font-size:12.5px; }
  .coT th{ text-align:left; font-weight:600; color:var(--text-dim); font-size:11px; padding:4px 6px; border-bottom:1px solid var(--border); }
  .coT td{ padding:5px 6px; border-bottom:1px solid var(--border); white-space:nowrap; }
  .coT td.coNm{ white-space:normal; color:var(--text); }
  .coT tbody tr{ cursor:pointer; } .coT tbody tr:hover{ background:var(--panel-2); } .coT tbody tr.on{ background:var(--accent-soft); }
  .coT .coDel{ padding:2px 7px; font-size:11px; } .coT .coEmpty{ color:var(--text-faint); padding:14px 6px; cursor:default; }

  /* ---------- 14b: Cloud — roles, projects, company, invitations ---------- */
  #cloudChip .cc-role{ font-size:10.5px; padding:1px 6px; border-radius:9px; background:var(--panel-3); color:var(--text-dim); text-transform:uppercase; letter-spacing:.4px; }
  #cloudChip .cc-role[hidden], #cloudChip .tbtn[hidden]{ display:none; }
  .tbtn.danger{ color:var(--danger); } .tbtn.danger:hover{ border-color:var(--danger); }
  .tbtn:disabled{ opacity:.5; cursor:default; } .tbtn:disabled:hover{ border-color:var(--border); }
  .flex1{ flex:1; }
  #cloudRoBanner{ position:fixed; top:58px; left:50%; transform:translateX(-50%); z-index:60; display:flex; align-items:center; gap:10px;
    background:#fff4d6; color:#5c4300; border:1px solid #e9c66a; border-radius:9px; padding:6px 8px 6px 12px; font-size:12.5px; box-shadow:var(--shadow); max-width:calc(100vw - 32px); }
  #cloudRoBanner[hidden]{ display:none; }
  #cloudRoBanner .tbtn{ padding:3px 9px; font-size:11.5px; background:#fff; color:#5c4300; border-color:#e9c66a; }
  #cloudRoBanner .tbtn[hidden]{ display:none; }
  .cloudDlg .foot, #cloudProjDlg .foot, #cloudCoDlg .foot, #cloudInvDlg .foot{ display:flex; justify-content:flex-end; align-items:center; gap:8px; padding:12px 18px; border-top:1px solid var(--border); }
  #cloudProjDlg .modal{ width:960px; height:640px; }
  .cpBody{ display:flex; gap:16px; flex:1; min-height:0; overflow:hidden; }
  .cpLeft{ width:270px; flex:none; display:flex; flex-direction:column; gap:8px; min-height:0; }
  .cpSearch input, .cpGrid input, .ccRow input, .ccRow select, #ciForm input{ width:100%; box-sizing:border-box; background:var(--panel-2); border:1px solid var(--border); color:var(--text); border-radius:7px; padding:6px 9px; font-size:13px; }
  .ccRow select{ width:auto; }
  .cpGrid input:read-only:not(#ciEmail), #ciForm input:read-only{ color:var(--text-dim); }
  .cpTools{ display:flex; align-items:center; justify-content:space-between; gap:6px; }
  .cpTools label{ display:flex; align-items:center; gap:5px; cursor:pointer; }
  #cpList{ flex:1; overflow-y:auto; border:1px solid var(--border); border-radius:9px; background:var(--panel-2); padding:4px; }
  .cpItem{ padding:7px 9px; border-radius:7px; cursor:pointer; display:flex; flex-direction:column; gap:1px; }
  .cpItem:hover{ background:var(--panel-3); } .cpItem.on{ background:var(--accent-soft); }
  .cpItem .t{ font-size:13px; color:var(--text); display:flex; gap:6px; align-items:center; }
  .cpItem .t .n{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .cpItem .s{ font-size:11px; color:var(--text-faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .cpItem.arch .t .n{ color:var(--text-dim); }
  .cpBadge{ font-size:10px; padding:1px 6px; border-radius:8px; background:var(--panel-3); color:var(--text-dim); text-transform:uppercase; letter-spacing:.4px; flex:none; }
  .cpBadge[hidden]{ display:none; }
  .cpEmptyL{ color:var(--text-faint); font-size:12px; padding:12px 8px; }
  .cpRight{ flex:1; min-width:0; display:flex; flex-direction:column; min-height:0; }
  .cpHead{ display:flex; align-items:center; gap:8px; margin-bottom:8px; } .cpHead h4{ margin:0; font-size:15px; }
  .cpGrid{ display:grid; grid-template-columns:2fr 1fr 2fr; gap:8px 10px; }
  .cpGrid label{ display:flex; flex-direction:column; gap:3px; font-size:11.5px; color:var(--text-dim); } .cpGrid label.wide{ grid-column:1/-1; }
  .cpActs{ display:flex; align-items:center; gap:8px; margin-top:10px; flex-wrap:wrap; }
  .cpActs .tbtn[hidden], .ccDanger .tbtn[hidden], .cpTools .tbtn[hidden]{ display:none; }
  .cpNote{ margin-top:6px; min-height:1em; }
  .cpListHead{ font-size:11px; font-weight:600; color:var(--text-dim); text-transform:uppercase; letter-spacing:.5px; margin:12px 0 4px; }
  .cpTableWrap{ flex:1; overflow-y:auto; min-height:0; border-top:1px solid var(--border); }
  .cpT td.cpA{ text-align:right; } .cpT .cpA .tbtn{ padding:2px 7px; font-size:11px; margin-left:3px; }
  .cpT td.ro{ color:var(--text-faint); font-size:11px; }
  .cpErr{ padding:0 18px; margin:0 0 6px; }
  #cloudCoDlg .modal{ width:760px; }
  .ccOrg{ display:flex; gap:14px; align-items:center; margin-bottom:6px; }
  .ccLogo{ width:92px; height:62px; flex:none; border:1px dashed var(--border); border-radius:9px; display:flex; align-items:center; justify-content:center; background:#fff; overflow:hidden; }
  .ccLogo img{ max-width:86px; max-height:56px; object-fit:contain; } .ccLogo img[hidden]{ display:none; }
  #ccLogoNone{ font-size:11px; color:#9aa2ad; } #ccLogoNone[hidden]{ display:none; }
  .ccOrgMain{ flex:1; display:flex; flex-direction:column; gap:5px; }
  .ccRow{ display:flex; gap:8px; align-items:center; } .ccRow input{ flex:1; } .ccRow .tbtn[hidden], .ccRow .mini[hidden]{ display:none; }
  .ccLogoBtns .tbtn{ padding:3px 9px; font-size:11.5px; } .ccLogoBtns .tbtn[hidden]{ display:none; }
  .ccH{ margin:16px 0 6px; font-size:12px; font-weight:600; color:var(--text-dim); text-transform:uppercase; letter-spacing:.5px; }
  .ccT td{ vertical-align:middle; } .ccT td.ccEm{ color:var(--text-dim); max-width:200px; overflow:hidden; text-overflow:ellipsis; }
  .ccT select{ background:var(--panel-2); border:1px solid var(--border); color:var(--text); border-radius:6px; padding:2px 4px; font-size:12px; }
  .ccT td.ccA{ text-align:right; } .ccT .ccA .tbtn{ padding:2px 7px; font-size:11px; margin-left:3px; }
  .ccT tbody tr{ cursor:default; } .ccT .you{ color:var(--text-faint); font-size:11px; margin-left:4px; }
  .ccT .exp{ color:var(--danger); }
  #ccLinkBox{ margin-top:8px; padding:9px 10px; border:1px solid var(--accent); border-radius:9px; background:var(--accent-soft); display:flex; flex-direction:column; gap:6px; }
  #ccLinkBox[hidden]{ display:none; } #ccLinkBox #ccLinkMsg{ color:var(--text); }
  #ccLink{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:11.5px !important; }
  #ccInviteBox[hidden], #ccPendH[hidden]{ display:none; }

  /* ---------- 14c: Cloud — locks, presence, version history, activity ---------- */
  #cloudPresence{ display:inline-flex; align-items:center; margin-left:8px; }
  #cloudPresence[hidden]{ display:none; }
  .cpAv{ width:24px; height:24px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:10.5px; font-weight:600;
    color:#fff; border:2px solid var(--panel); margin-left:-5px; position:relative; cursor:default; letter-spacing:.2px; flex:none; }
  .cpAv:first-child{ margin-left:0; }
  .cpAv.ed{ box-shadow:0 0 0 2px var(--accent); }
  .cpAv.ed::after{ content:'✎'; position:absolute; right:-6px; bottom:-5px; font-size:9px; background:var(--accent); color:#fff; border-radius:50%; width:12px; height:12px;
    display:flex; align-items:center; justify-content:center; line-height:1; }
  .cpAvMore{ font-size:11px; color:var(--text-dim); margin-left:4px; }
  /* ---------- 15c: live collaboration ---------- */
  #rtBadge{ font-size:11px; font-weight:600; white-space:nowrap; margin-left:6px; padding:1px 8px; border-radius:9px; cursor:default; }
  #rtBadge[hidden], #rtViewers[hidden]{ display:none; }
  #rtBadge.rt-on{ color:#178a4a; background:rgba(34,165,101,.14); }
  #rtBadge.rt-conn{ color:var(--accent); background:rgba(91,140,255,.12); }
  #rtBadge.rt-off{ color:var(--danger); background:rgba(220,70,60,.12); }
  #rtViewers{ font-size:11px; color:var(--text-dim); margin-left:6px; white-space:nowrap; }
  .cpAv.rtAv{ cursor:pointer; } .cpAv.rtAv:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
  .cpAv.fol{ outline:2px dashed var(--accent); outline-offset:2px; z-index:1; }
  #rtCursors{ position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:6; }
  .rtCur{ position:absolute; left:0; top:0; transition:transform 80ms linear; will-change:transform; }
  .rtCur[hidden]{ display:none; }
  .rtCur svg{ display:block; filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.35)); }
  .rtCur .rtNm{ position:absolute; left:13px; top:15px; color:#fff; font-size:11px; font-weight:600; line-height:1.35; padding:1px 7px; border-radius:8px;
    white-space:nowrap; box-shadow:0 1px 3px rgba(0,0,0,.28); }
  #cloudReqBanner, #cloudVerBanner{ position:fixed; top:58px; left:50%; transform:translateX(-50%); z-index:61; display:flex; align-items:center; gap:10px;
    border-radius:9px; padding:6px 8px 6px 12px; font-size:12.5px; box-shadow:var(--shadow); max-width:calc(100vw - 32px); }
  #cloudReqBanner{ background:#e8f1ff; color:#173a6b; border:1px solid #9cbcf0; }
  #cloudVerBanner{ background:#eef0ff; color:#2b2f6b; border:1px solid #aab0f0; }
  #cloudReqBanner[hidden], #cloudVerBanner[hidden]{ display:none; }
  #cloudReqBanner .tbtn, #cloudVerBanner .tbtn{ padding:3px 9px; font-size:11.5px; }
  #cloudReqBanner .tbtn, #cloudVerBanner .tbtn, #cloudRoBanner .tbtn{ white-space:nowrap; flex:none; }
  #cloudReqBanner .tbtn:not(.primary), #cloudVerBanner .tbtn:not(.primary){ background:#fff; color:inherit; }
  #cloudVerBanner .tbtn[hidden]{ display:none; }
  #cloudHistDlg .modal{ width:820px; height:620px; }
  #cloudActDlg .modal{ width:860px; height:640px; }
  .chBody{ display:flex; flex-direction:column; gap:8px; flex:1; min-height:0; overflow:hidden; }
  .chTop{ display:flex; align-items:center; gap:12px; } .chTop .seg button{ padding:5px 14px; }
  .chList{ flex:1; overflow-y:auto; min-height:0; border:1px solid var(--border); border-radius:9px; background:var(--panel-2); padding:2px 0; }
  .chDay{ position:sticky; top:0; background:var(--panel-2); font-size:11px; font-weight:600; color:var(--text-dim); text-transform:uppercase; letter-spacing:.5px;
    padding:8px 12px 4px; border-bottom:1px solid var(--border); z-index:1; }
  .chRow{ display:flex; align-items:center; gap:10px; padding:6px 12px; border-bottom:1px solid var(--border); font-size:12.5px; }
  .chRow:last-child{ border-bottom:none; }
  .chRow:hover{ background:var(--panel-3); } .chRow.cur{ background:var(--accent-soft); }
  .chT{ width:42px; flex:none; color:var(--text-dim); font-variant-numeric:tabular-nums; }
  .chV{ width:34px; flex:none; color:var(--text-faint); font-variant-numeric:tabular-nums; }
  .chMain{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
  .chMain .l1{ display:flex; align-items:center; gap:6px; color:var(--text); overflow:hidden; white-space:nowrap; }
  .chMain .l1 .who{ overflow:hidden; text-overflow:ellipsis; }
  .chMain .l2{ font-size:11px; color:var(--text-faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .chKind{ font-size:10px; padding:1px 6px; border-radius:8px; text-transform:uppercase; letter-spacing:.4px; flex:none; background:var(--panel-3); color:var(--text-dim); }
  .chKind.manual{ background:#dcefe2; color:#1f5a33; } .chKind.restore{ background:#efe3ff; color:#4d2a7a; } .chKind.create{ background:#e2ecf8; color:#244a72; }
  .chKind.cur{ background:var(--accent); color:#fff; }
  .chLabel{ font-size:11px; padding:1px 7px; border-radius:8px; background:#fff1c2; color:#5c4300; border:1px solid #e9c66a; flex:none; max-width:240px; overflow:hidden; text-overflow:ellipsis; }
  .chObj{ width:120px; flex:none; text-align:right; color:var(--text-dim); font-size:11.5px; font-variant-numeric:tabular-nums; }
  .chObj .up{ color:#1f7a3d; } .chObj .dn{ color:var(--danger); }
  .chA{ flex:none; display:flex; gap:4px; } .chA .tbtn{ padding:2px 7px; font-size:11px; }
  .chEmpty{ color:var(--text-faint); padding:16px 12px; font-size:12px; }
  .chIco{ width:20px; flex:none; text-align:center; color:var(--text-faint); }
  .alFilters{ display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; }
  .alFilters label{ display:flex; flex-direction:column; gap:3px; font-size:11.5px; color:var(--text-dim); }
  .alFilters select, .alFilters input{ background:var(--panel-2); border:1px solid var(--border); color:var(--text); border-radius:7px; padding:5px 8px; font-size:12.5px; }
  .alFilters select{ max-width:220px; }
  .alMore{ display:flex; justify-content:center; } .alMore .tbtn[hidden]{ display:none; }
  .alProj{ width:150px; flex:none; color:var(--text-dim); font-size:11.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .alWhen{ width:118px; flex:none; color:var(--text-dim); font-size:11.5px; font-variant-numeric:tabular-nums; }
  #ccActivity[hidden]{ display:none; }
  .ccDanger{ display:flex; gap:8px; margin-top:18px; padding-top:12px; border-top:1px solid var(--border); }
  .ccRoles{ margin-right:auto; color:var(--text-faint); }
  #cloudInvDlg .modal{ width:420px; }
  .ciMsg{ font-size:13px; line-height:1.45; margin-bottom:12px; }
  #ciForm{ display:flex; flex-direction:column; gap:9px; } #ciForm label{ display:flex; flex-direction:column; gap:3px; font-size:12px; color:var(--text-dim); }
  #ciForm label[hidden], #ciForm[hidden]{ display:none; }
  #fileDlg{ z-index:110; } #cloudAuthDlg{ z-index:120; }   /* 14b: confirmations / login open on top of the Projects and Company dialogs */

  /* 14d: company resources */
  .crNote{ color:var(--text-faint); padding:6px 2px; line-height:1.45; }
  .libCatHead{ grid-column:1/-1; font-size:10.5px; text-transform:uppercase; letter-spacing:.5px; color:var(--text-dim); padding:6px 2px 0; border-bottom:1px solid var(--border); }
  .crKindBody{ max-height:min(56vh,520px); overflow:auto; }
  .crList{ display:flex; flex-direction:column; gap:6px; }
  .crRow{ display:flex; align-items:center; gap:10px; padding:6px 8px; border:1px solid var(--border); border-radius:8px; }
  .crRow .crMain{ flex:1; min-width:0; } .crRow .crMain .mini{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .crThumb{ width:60px; height:42px; object-fit:contain; background:#fff; border-radius:4px; flex:0 0 auto; }
  .crCat{ font-size:10.5px; color:var(--text-dim); border:1px solid var(--border); border-radius:4px; padding:0 4px; margin-left:4px; }
  .crSeg{ flex-wrap:wrap; } .crSeg button .mini{ opacity:.7; }
  .crPageBody{ max-height:min(60vh,560px); overflow:auto; }
  .crT td.crTh img{ width:48px; height:34px; object-fit:contain; background:#fff; border-radius:3px; display:block; }
  .crT tbody tr{ cursor:default; } .crT td.ccA{ text-align:right; } .crT td.ccA .tbtn{ padding:2px 7px; font-size:11px; margin-left:3px; }
  .crHist td{ white-space:normal; background:var(--panel-2); } .crHistRow{ padding:2px 0; } .crHistRow .t{ color:var(--text-faint); margin-right:4px; }
  .tplRef{ padding:0 6px; font-size:11px; margin-left:6px; vertical-align:middle; } .tplCo{ color:#2ea86b; border-color:#2ea86b; }
  .lstdCoHead{ font-size:11px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.4px; margin:8px 0 2px; }
  .bmUpd{ border-color:var(--accent); color:var(--accent); }
  #crPageDlg .foot, #crKindDlg .foot, #crPubDlg .foot{ display:flex; justify-content:flex-end; align-items:center; flex-wrap:wrap; gap:6px; padding:12px 18px; border-top:1px solid var(--border); }
  #cloudCoDlg .foot .tbtn{ white-space:nowrap; flex:0 0 auto; } #cloudCoDlg .foot .ccRoles{ flex:1 1 auto; min-width:0; }
  .bmBtns{ flex-wrap:wrap; justify-content:flex-end; max-width:330px; } .bmMid{ min-width:150px; }
  #bmDlg .foot{ display:flex; justify-content:flex-end; align-items:center; gap:6px; padding:12px 18px; border-top:1px solid var(--border); }

  /* ---------- 14e: Cloud — password reset, sign-in links, SSO, plan, my account ---------- */
  .caLinks{ display:flex; gap:6px; font-size:12px; color:var(--text-faint); } .caLinks[hidden]{ display:none; }
  .caLinks a{ color:var(--accent); text-decoration:none; } .caLinks a:hover{ text-decoration:underline; }
  .caNote.caAsk{ background:#fff4d6; color:#5c4300; border:1px solid #e9c66a; border-radius:7px; padding:8px 10px; line-height:1.45; }
  .caSso{ display:flex; flex-direction:column; gap:7px; margin-top:4px; } .caSso[hidden]{ display:none; }
  .caOr{ display:flex; align-items:center; gap:8px; font-size:11px; color:var(--text-faint); }
  .caOr::before, .caOr::after{ content:''; flex:1; border-top:1px solid var(--border); }
  #caSsoBtns, #ciSsoBtns{ display:flex; flex-direction:column; gap:6px; }
  .tbtn.ssoBtn{ justify-content:center; padding:7px 10px; font-size:13px; font-weight:600; }
  .tbtn.ssoBtn-microsoft::before{ content:''; width:14px; height:14px; margin-right:8px; display:inline-block; vertical-align:-2px;
    background:linear-gradient(90deg,#f25022 0 46%,transparent 46% 54%,#7fba00 54%) top/100% 46% no-repeat, linear-gradient(90deg,#00a4ef 0 46%,transparent 46% 54%,#ffb900 54%) bottom/100% 46% no-repeat; }
  .tbtn.ssoBtn-google::before{ content:'G'; margin-right:8px; font-weight:700; color:#4285f4; }
  #cloudResetDlg .modal{ width:420px; }
  .caFormLike{ display:flex; flex-direction:column; gap:9px; margin-top:10px; } .caFormLike[hidden]{ display:none; }
  .caFormLike label{ display:flex; flex-direction:column; gap:3px; font-size:12px; color:var(--text-dim); }
  .caFormLike input{ background:var(--panel-2); border:1px solid var(--border); color:var(--text); border-radius:7px; padding:7px 9px; font-size:13px; }
  #cloudVerifyBar{ position:fixed; top:58px; right:16px; z-index:59; display:flex; align-items:center; gap:8px; max-width:calc(100vw - 32px);
    background:#e8f1ff; color:#1d3d6e; border:1px solid #9cc0f5; border-radius:9px; padding:6px 8px 6px 12px; font-size:12.5px; box-shadow:var(--shadow); }
  #cloudVerifyBar[hidden]{ display:none; }
  #cloudVerifyBar .tbtn{ padding:3px 9px; font-size:11.5px; background:#fff; color:#1d3d6e; border-color:#9cc0f5; white-space:nowrap; }
  #cloudCoDlg .foot{ flex-wrap:wrap; } #cloudCoDlg .foot .ccRoles{ flex:1 1 220px; }
  .plCur{ font-size:13px; margin-bottom:10px; }
  .plRow{ display:grid; grid-template-columns:120px 1fr; gap:2px 10px; align-items:center; margin:8px 0; font-size:12.5px; }
  .plL{ color:var(--text-dim); } .plBar{ grid-column:2; height:7px; border-radius:4px; background:var(--panel-3); overflow:hidden; }
  .plBar i{ display:block; height:100%; background:var(--accent); } .plBar.warn i{ background:#e0a100; } .plBar.full i{ background:var(--danger); }
  .plT{ margin-top:12px; } .plT tbody tr{ cursor:default; } .plT tr.on td{ font-weight:600; }
  .plNote{ margin-top:10px; line-height:1.45; }
  .ssoList{ display:flex; flex-direction:column; gap:10px; margin-top:10px; max-height:58vh; overflow:auto; padding-right:4px; }
  .ssoP{ border:1px solid var(--border); border-radius:9px; padding:10px 12px; display:flex; flex-direction:column; gap:8px; }
  .ssoH{ display:flex; justify-content:space-between; align-items:center; font-size:13px; }
  .ssoGrid{ display:grid; grid-template-columns:1fr 1fr; gap:8px 12px; }
  .ssoF{ display:flex; flex-direction:column; gap:3px; font-size:12px; color:var(--text-dim); }
  .ssoF input{ background:var(--panel-2); border:1px solid var(--border); color:var(--text); border-radius:7px; padding:6px 8px; font-size:12.5px; }
  .ssoOpts{ display:flex; flex-direction:column; gap:4px; } .ssoChk{ font-size:12.5px; } .ssoChk input{ margin:0 6px 0 0; vertical-align:-1px; }
  .ssoSecret code, .ssoUri code{ font-size:11px; background:var(--panel-2); padding:1px 4px; border-radius:4px; }
  .acOk{ color:#1b8a3a; } .acBad{ color:var(--danger); }
  .ssoBtns{ display:flex; gap:8px; align-items:center; } .ssoUri{ margin-top:6px; }
  .acGrid{ display:grid; grid-template-columns:110px 1fr; gap:6px 10px; font-size:13px; align-items:baseline; }
  .acDel{ display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }
  .acDel input{ flex:1 1 160px; background:var(--panel-2); border:1px solid var(--border); color:var(--text); border-radius:7px; padding:6px 9px; font-size:13px; }

  /* ---------- 15a: comments, notifications, markup ---------- */
  #cmBellWrap{ position:relative; display:inline-flex; }
  #cmBell[hidden]{ display:none; }
  #cmBell{ position:relative; }
  .cmBadge{ position:absolute; top:-4px; right:-5px; min-width:15px; height:15px; padding:0 4px; border-radius:8px; background:var(--danger); color:#fff; font-size:10px; line-height:15px; text-align:center; font-weight:700; }
  .cmBadge[hidden]{ display:none; }
  #cmNotifPop{ left:0; right:auto; top:calc(100% + 6px); width:340px; max-height:420px; overflow:auto; padding:6px; }
  .cmNHd{ display:flex; align-items:center; gap:6px; padding:4px 6px 8px; }
  .cmNHd a, .cmMsg a{ color:var(--accent); cursor:pointer; font-size:11.5px; margin-left:8px; }
  .cmNi{ padding:7px 8px; border-radius:7px; cursor:pointer; color:var(--text-dim); }
  .cmNi:hover{ background:var(--panel-2); }
  .cmNi.unread{ color:var(--text); background:var(--accent-soft); }
  .cmNi.unread:hover{ filter:brightness(1.08); }
  #cmBtn{ position:relative; }
  #cmBtn .cmCount{ position:absolute; top:3px; right:8px; display:inline-block; min-width:16px; padding:0 5px; border-radius:8px; background:#f5a524; color:#1c1500; font-size:10.5px; font-weight:700; line-height:16px; }
  #cmBtn .cmCount[hidden]{ display:none; }
    #mkBtn.mkOn{ background:#e0262b; border-color:#e0262b; color:#fff; }
  .mkOnBtn{ background:#e0262b !important; border-color:#e0262b !important; color:#fff !important; }
  #cmPins{ position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:5; }
  .cmPin{ position:absolute; left:0; top:0; margin:-26px 0 0 -2px; min-width:22px; height:22px; padding:0 6px; border-radius:11px 11px 11px 2px; background:#f5a524; color:#1c1500;
    font:700 11.5px/22px ui-sans-serif,system-ui,sans-serif; text-align:center; box-shadow:0 2px 6px rgba(0,0,0,.35); cursor:pointer; pointer-events:auto; user-select:none; border:1.5px solid rgba(0,0,0,.25); }
  .cmPin.area{ margin:-11px 0 0 -11px; border-radius:11px; }
  .cmPin.res{ background:#8b94a1; color:#fff; opacity:.75; }
  .cmPin.sel{ outline:2.5px solid var(--accent); outline-offset:1px; z-index:2; }
  .cmPin.loc{ border-style:dashed; }
  .cmPin.mk{ background:#e0262b; color:#fff; border-radius:4px; }
  .cmPin.mk.res{ background:#8b94a1; }
  #cmPanel{ position:absolute; top:8px; right:62px; bottom:8px; width:340px; max-width:calc(100% - 70px); z-index:7; display:flex; flex-direction:column; background:var(--panel);
    border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); }
  #cmPanel[hidden]{ display:none; }
  .cmPHead{ display:flex; align-items:center; gap:6px; padding:8px 8px 4px; }
  .cmWhere{ padding:0 10px 6px; color:var(--text-faint); }
  .cmBody{ flex:1; overflow:auto; padding:0 10px 10px; }
  #cmErr{ padding:0 10px 8px; }
  .cmTools{ display:flex; gap:5px; align-items:center; flex-wrap:wrap; margin:4px 0 8px; }
  .cmTools .tbtn{ padding:4px 8px; font-size:12px; }
  .cmShow{ margin-left:auto; display:inline-flex; align-items:center; gap:3px; }
  .cmFilter{ margin-bottom:8px; } .cmFilter button{ padding:4px 10px; font-size:12px; }
  .cmEmpty{ color:var(--text-faint); padding:16px 6px; text-align:center; line-height:1.5; }
  .cmItem{ display:flex; gap:8px; padding:8px 6px; border-radius:8px; cursor:pointer; border:1px solid transparent; }
  .cmItem:hover{ background:var(--panel-2); border-color:var(--border); }
  .cmItem.res{ opacity:.7; }
  .cmNo{ flex:none; min-width:22px; height:22px; border-radius:11px; background:#f5a524; color:#1c1500; font-weight:700; font-size:11.5px; line-height:22px; text-align:center; }
  .cmItem.res .cmNo{ background:#8b94a1; color:#fff; }
  .cmIt{ min-width:0; flex:1; }
  .cmHd{ display:flex; align-items:baseline; gap:5px; flex-wrap:wrap; }
  .cmSt{ margin-left:auto; font-size:10.5px; padding:1px 6px; border-radius:8px; background:var(--panel-3); color:var(--text-dim); }
  .cmEx{ color:var(--text-dim); margin-top:2px; overflow-wrap:anywhere; }
  .cmThreadHd{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin:4px 0 8px; }
  .cmThreadHd .tbtn{ padding:3px 8px; font-size:12px; }
  .cmMsg{ padding:8px; border-radius:8px; background:var(--panel-2); margin-bottom:6px; }
  .cmMsg.main{ border-left:3px solid #f5a524; }
  .cmTxt{ margin-top:4px; line-height:1.45; overflow-wrap:anywhere; }
  .cmAt{ color:var(--accent); font-weight:600; }
  .cmTa{ width:100%; resize:vertical; background:var(--panel-2); color:var(--text); border:1px solid var(--border); border-radius:7px; padding:7px; font:inherit; margin-top:4px; }
  .cmTa:focus{ outline:none; border-color:var(--accent); }
  .cmRow{ display:flex; gap:6px; align-items:center; margin-top:6px; }
  .cmRow .tbtn{ padding:4px 9px; font-size:12px; }
  .flex1{ flex:1; }
  #cmMention{ position:fixed; z-index:1000; background:var(--panel); border:1px solid var(--border); border-radius:8px; box-shadow:var(--shadow); padding:3px; max-height:200px; overflow:auto; }
  #cmMention[hidden]{ display:none; }
  .cmMi{ padding:5px 8px; border-radius:6px; cursor:pointer; } .cmMi.on, .cmMi:hover{ background:var(--accent-soft); }
  .mkHelp{ margin-bottom:8px; line-height:1.4; }
  .mkItem{ padding:8px; border-radius:8px; background:var(--panel-2); margin-bottom:6px; border-left:3px solid #e0262b; }
  .mkItem.res{ opacity:.65; border-left-color:#8b94a1; } .mkItem.sel{ outline:1.5px solid var(--accent); }
  .mkDot{ width:8px; height:8px; border-radius:50%; background:#e0262b; display:inline-block; }
  .mkForm{ margin-top:6px; display:flex; flex-direction:column; gap:5px; }
  .mkForm label{ display:flex; align-items:center; gap:6px; font-size:12px; }
  .mkForm select, .mkForm input{ flex:1; background:var(--panel); color:var(--text); border:1px solid var(--border); border-radius:6px; padding:4px 6px; font:inherit; }
  #cmBtn.cmOpen{ background:var(--accent-soft); color:var(--accent); }
  /* ---- 15b: compare revisions ---- */
  #cmpPanel{ position:absolute; top:44px; left:8px; bottom:70px; width:330px; min-height:260px; max-width:calc(100% - 70px); z-index:8; display:flex; flex-direction:column; background:var(--panel);
    border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); font-size:12.5px; }
  #cmpPanel[hidden]{ display:none; }
  .cmpTitle{ font-size:13px; }
  .cmpAB{ padding:0 10px 6px; line-height:1.6; color:var(--text-dim); }
  .cmpA, .cmpB{ display:inline-block; min-width:16px; padding:0 4px; border-radius:4px; background:var(--panel-3); color:var(--text); font-weight:700; text-align:center; font-size:11px; }
  .cmpChips{ display:flex; flex-wrap:wrap; gap:5px; padding:0 10px 6px; }
  .cmpChip{ display:inline-flex; align-items:center; gap:5px; padding:3px 8px; border-radius:12px; border:1px solid var(--border); background:var(--panel-2); color:var(--text-dim); font:inherit; font-size:12px; cursor:pointer; opacity:.55; }
  .cmpChip.on{ opacity:1; color:var(--text); border-color:var(--c); }
  .cmpChip i, .cmpItem > i{ width:10px; height:10px; border-radius:3px; background:var(--c); flex:none; display:inline-block; }
  .cmpBar{ display:flex; align-items:center; gap:8px; padding:0 10px 6px; flex-wrap:wrap; }
  .cmpBar select{ background:var(--panel-2); color:var(--text); border:1px solid var(--border); border-radius:6px; padding:2px 4px; font:inherit; max-width:150px; }
  .cmpUn{ margin-left:auto; color:var(--text-faint); }
  .cmpItem{ display:flex; gap:8px; align-items:flex-start; padding:6px; border-radius:8px; cursor:pointer; border:1px solid transparent; border-left:3px solid var(--c); margin-bottom:3px; }
  .cmpItem > i{ margin-top:3px; }
  .cmpItem:hover{ background:var(--panel-2); } .cmpItem.sel{ background:var(--accent-soft); border-color:var(--accent); border-left-color:var(--c); }
  .cmpDefHd{ margin:10px 0 4px; font-weight:600; color:var(--text-dim); }
  .cmpDef{ padding:3px 2px; line-height:1.4; }
  .cmpDk{ font-size:10.5px; padding:0 5px; border-radius:6px; background:var(--panel-3); text-transform:capitalize; }
  .cmpDk.added{ color:#22b14c; } .cmpDk.removed{ color:#e5383b; } .cmpDk.changed{ color:#f08c00; }
  .cmpFoot{ display:flex; flex-wrap:wrap; gap:5px; padding:8px 10px; border-top:1px solid var(--border); }
  .cmpFoot .tbtn{ padding:4px 8px; font-size:12px; } .cmpFoot .primary{ margin-left:auto; }
  .chCmp{ display:flex; align-items:center; gap:6px; padding:6px 12px; border-bottom:1px solid var(--border); flex-wrap:wrap; }
  .chCmp[hidden]{ display:none; }
  .chCmp select{ background:var(--panel-2); color:var(--text); border:1px solid var(--border); border-radius:6px; padding:3px 4px; font:inherit; font-size:12px; max-width:230px; }
  /* ---- 15b: share links ---- */
  .shBody{ display:flex; flex-direction:column; }
  .shForm{ padding:8px 12px; display:flex; flex-direction:column; gap:8px; border-bottom:1px solid var(--border); }
  .shLine{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:12.5px; }
  .shLine label{ display:inline-flex; align-items:center; gap:5px; } .shLine label.off{ opacity:.5; }
  .shLine.off{ opacity:.5; pointer-events:none; }
  .shK{ min-width:70px; color:var(--text-dim); }
  .shLine input[type=text], .shLine input[type=password], .shLine select{ background:var(--panel-2); color:var(--text); border:1px solid var(--border); border-radius:6px; padding:4px 7px; font:inherit; }
  #shLabel{ flex:1; min-width:160px; } #shPw{ width:150px; }
  .shCreated{ padding:8px 12px; background:var(--accent-soft); border-bottom:1px solid var(--border); }
  .shCreated[hidden]{ display:none; }
  #shLink{ flex:1; min-width:240px; font-family:ui-monospace,monospace; font-size:12px; }
  .shRow{ display:flex; align-items:center; gap:10px; padding:6px 12px; border-bottom:1px solid var(--border); font-size:12.5px; }
  .shRow .chKind{ margin-left:5px; }
  /* the shared viewer: no editing UI */
  #shareBar{ display:flex; align-items:center; gap:6px; flex:1; min-width:0; flex-wrap:nowrap; overflow:hidden; }
  #shareBar .tbtn{ flex:none; }
  #shareBar[hidden]{ display:none; }
  .sbInfo{ display:flex; flex-direction:column; min-width:0; margin-right:8px; line-height:1.25; }
  .sbInfo b, .sbInfo .mini{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:340px; }
  .sbInfo{ flex:0 1 340px; min-width:140px; }
  #shareBar [hidden]{ display:none !important; }
  #sbDrawing{ background:var(--panel-2); color:var(--text); border:1px solid var(--border); border-radius:6px; padding:3px 6px; font:inherit; }
  #sbNoDl{ padding:2px 8px; border-radius:10px; background:var(--panel-3); }
  body.dcShare #fileMenuWrap, body.dcShare #docName, body.dcShare #cloudStatus, body.dcShare #cloudPresence, body.dcShare #cmBellWrap, body.dcShare #cloudChip,
  body.dcShare #styleBar, body.dcShare #statusChips, body.dcShare #rail, body.dcShare #layerChip, body.dcShare #propsToggle, body.dcShare #libDrawer, body.dcShare #propsDrawer,
  body.dcShare #paperTools, body.dcShare #paperToolbar .field, body.dcShare #vpAdd, body.dcShare #centerSheet, body.dcShare #addSheet, body.dcShare #sheetsRail .pstRow,
  body.dcShare #publishBtn, body.dcShare #printSelected, body.dcShare #printAll, body.dcShare #pdfSelected, body.dcShare #svgSheet, body.dcShare #sheetListBtn,
  body.dcShare #cloudRoBanner, body.dcShare #cloudVerBanner, body.dcShare #cloudReqBanner, body.dcShare #consoleRow, body.dcShare .vsep, body.dcShare #topbar .spacer, body.dcShare #undoBtn, body.dcShare #redoBtn{ display:none !important; }
  #shareGate{ position:fixed; inset:0; z-index:3000; background:var(--bg); display:flex; align-items:center; justify-content:center; padding:16px; }
  #shareGate[hidden]{ display:none; }
  .sgCard{ width:420px; max-width:100%; background:var(--panel); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow); padding:26px 26px 18px; }
  .sgBrand{ display:flex; align-items:center; gap:8px; font-weight:700; letter-spacing:.4px; margin-bottom:14px; }
  .sgBrand .dot{ width:10px; height:10px; border-radius:50%; background:var(--accent); }
  .sgCard h2{ margin:0 0 8px; font-size:18px; } .sgCard p{ color:var(--text-dim); line-height:1.5; margin:0 0 14px; }
  #shareGate[data-kind=expired] h2, #shareGate[data-kind=revoked] h2, #shareGate[data-kind=notfound] h2{ color:#e5383b; }
  #sgPwRow{ display:flex; gap:8px; margin-bottom:6px; } #sgPwRow[hidden]{ display:none; }
  #sgPw{ flex:1; background:var(--panel-2); color:var(--text); border:1px solid var(--border); border-radius:7px; padding:7px 9px; font:inherit; }
  .sgHome{ display:block; margin-top:16px; color:var(--text-faint); text-decoration:none; }

  /* ---------- 18b: licenses (seats mode) ---------- */
  #lcGate{ position:fixed; inset:0; z-index:98; background:var(--bg); display:flex; align-items:center; justify-content:center; padding:16px; overflow:auto; }
  #lcGate[hidden]{ display:none; }
  .lgCard{ width:460px; }
  #lcGate[data-kind=trial_ended] h2, #lcGate[data-kind=license_expired] h2, #lcGate[data-kind=license_closed] h2, #lcGate[data-kind=no_license] h2, #lcGate[data-kind=released] h2{ color:var(--danger); }
  #lgHolders{ list-style:none; margin:0 0 12px; padding:0; border:1px solid var(--border); border-radius:9px; overflow:hidden; }
  #lgHolders[hidden]{ display:none; }
  #lgHolders li{ display:flex; align-items:center; gap:9px; padding:7px 10px; font-size:13px; } #lgHolders li+li{ border-top:1px solid var(--border); }
  #lgHolders .cpAv{ flex:none; } #lgHolders .lgSince{ margin-left:auto; color:var(--text-faint); font-size:12px; white-space:nowrap; }
  #lgRetry{ margin:-4px 0 12px; color:var(--text-faint); } #lgRetry[hidden]{ display:none; }
  #lgBtns{ display:flex; flex-wrap:wrap; gap:8px; } #lgBtns:empty{ display:none; }
  #lgBtns .tbtn{ padding:7px 14px; font-size:13px; } #lgBtns a.tbtn{ text-decoration:none; display:inline-flex; align-items:center; }
  .lgLinks{ display:flex; flex-wrap:wrap; gap:14px; margin-top:12px; font-size:12.5px; } .lgLinks:empty{ display:none; }
  .lgLinks a{ color:var(--accent); text-decoration:none; cursor:pointer; } .lgLinks a:hover{ text-decoration:underline; }
  .lgFoot{ margin-top:18px; padding-top:12px; border-top:1px solid var(--border); color:var(--text-faint); display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
  .lgFoot:empty{ display:none; } .lgFoot a{ color:var(--text-dim); cursor:pointer; text-decoration:underline; }
  body.lcGated #tourOffer, body.lcGated #pwaUpdate, body.lcGated #cloudVerifyBar{ display:none !important; }
  /* dialogs of the app (projects, company, history …) wait hidden under the state screen; log-in, trial, invitation, help, contact, messages stay usable */
  body.lcGated .modalBg.open:not(#cloudAuthDlg):not(#lcTrialDlg):not(#cloudInvDlg):not(#cloudResetDlg):not(#fileDlg):not(#helpDlg):not(#contactDlg):not(#cloudAcctDlg){ display:none; }
  body.lcGated #haPanel{ display:none !important; }
  /* the account / license chip: in seats mode it replaces the name, role and Projects / Company / Log out buttons of the cloud chip */
  #lcWrap[hidden]{ display:none; }
  #lcChip{ display:inline-flex; align-items:center; gap:6px; padding:2px 9px 2px 2px; border-radius:14px; font-size:11.5px; white-space:nowrap; }
  #lcChip .lcAv{ width:22px; height:22px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; color:#fff; background:var(--accent); flex:none; }
  #lcChip.trial .lcTx{ color:#b7791f; } body[data-theme="light"] #lcChip.trial .lcTx{ color:#8a5a00; }
  #lcChip.warn .lcTx{ color:var(--danger); }
  body.lcFit2 #styleBar > label.mini, body.lcFit2 #topbar .tbLbl{ display:none; }
  body.lcFit3 #cloudStatus.cs-ok{ display:none; }
  body.lcFit4 #lcChip{ padding:2px; } body.lcFit4 #lcChip .lcTx{ display:none; }
  body.lcFit4 #lcChip.trial .lcAv{ box-shadow:0 0 0 2px #e0a23a; }
  body.lcSeats #cloudChip .cc-who, body.lcSeats #cloudChip .cc-role, body.lcSeats #cloudChip #cloudProjectsBtn, body.lcSeats #cloudChip #cloudCompanyBtn, body.lcSeats #cloudChip #cloudLogoutBtn{ display:none; }
  #lcAcctPop{ left:auto; right:0; width:300px; padding:12px; font-size:12.5px; white-space:normal; color:var(--text); }
  #lcAcctPop .laWho{ font-weight:600; } #lcAcctPop .laSub{ color:var(--text-dim); margin-top:2px; }
  #lcAcctPop .laLic{ margin:10px 0; padding:9px 10px; border-radius:8px; background:var(--panel-2); line-height:1.45; }
  #lcAcctPop .laLic b{ display:block; margin-bottom:2px; }
  #lcAcctPop .laBtns{ display:flex; flex-wrap:wrap; gap:6px; } #lcAcctPop .laBtns .tbtn{ padding:4px 9px; font-size:12px; }
  #lcAcctPop .laLinks{ display:flex; flex-wrap:wrap; gap:12px; margin-top:10px; } #lcAcctPop .laLinks a{ color:var(--accent); cursor:pointer; text-decoration:none; }
  .caHp{ position:absolute !important; left:-10000px; width:1px; height:1px; overflow:hidden; }
  #caSeg button[hidden]{ display:none; } #caForm[hidden]{ display:none; }
  #lcTrialDlg .modal{ width:440px; }
  #lcTrialDlg .foot{ display:flex; justify-content:flex-end; align-items:center; gap:8px; padding:12px 18px; border-top:1px solid var(--border); }
  #lcTrialDlg .foot .tbtn[hidden]{ display:none; }
  #ltForm{ display:flex; flex-direction:column; gap:9px; } #ltForm label{ display:flex; flex-direction:column; gap:3px; font-size:12px; color:var(--text-dim); }
  #ltForm label[hidden], #ltForm[hidden]{ display:none; }
  #ltForm input{ width:100%; box-sizing:border-box; background:var(--panel-2); border:1px solid var(--border); color:var(--text); border-radius:7px; padding:6px 9px; font-size:13px; }
  #ltForm input:read-only{ color:var(--text-dim); }

  /* ---------- 16b: Script editor, macros ---------- */
  #macroBar{ display:contents; }
  #mcRecBtn.rec{ background:#e0262b; color:#fff; animation:mcBlink 1.2s ease-in-out infinite; }
  @keyframes mcBlink{ 50%{ opacity:.65; } }
  .tool.mcBtn .mcIco{ width:22px; height:18px; border-radius:5px; border:1.5px solid currentColor; font:700 9.5px/15px ui-monospace,Menlo,Consolas,monospace; letter-spacing:0; text-align:center; }
  #scrPanel{ position:absolute; top:8px; right:62px; bottom:178px; width:470px; max-width:calc(100% - 70px); z-index:8; display:flex; flex-direction:column; background:var(--panel);
    border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); min-height:260px; }
  #scrPanel[hidden], .scrTabBody[hidden]{ display:none !important; }
  .scrHead{ display:flex; align-items:center; gap:8px; padding:8px 8px 4px; }
  .scrTitle{ color:var(--text-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:180px; }
  .scrTabBody{ flex:1; min-height:0; display:flex; flex-direction:column; padding:0 10px 10px; gap:6px; }
  .scrRow{ display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
  .scrRow .tbtn{ padding:4px 9px; font-size:12px; }
  .scrRow select{ flex:1; min-width:120px; background:var(--panel-2); color:var(--text); border:1px solid var(--border); border-radius:7px; padding:4px 6px; font:inherit; font-size:12px; }
  .scrRow label{ display:inline-flex; align-items:center; gap:4px; color:var(--text-dim); }
  #scrMax{ width:66px; } #scrMax, .mcPlayOpts input, .mcKey{ background:var(--panel-2); color:var(--text); border:1px solid var(--border); border-radius:6px; padding:3px 6px; font:inherit; font-size:12px; }
  .scrEd{ flex:1; min-height:140px; display:flex; border:1px solid var(--border); border-radius:8px; background:var(--bg); overflow:hidden; font:12.5px/18px ui-monospace,Menlo,Consolas,monospace; }
  .scrGut{ flex:none; width:38px; padding:6px 6px 6px 0; overflow:hidden; text-align:right; color:var(--text-faint); background:var(--panel-2); border-right:1px solid var(--border); user-select:none; }
  .scrGut div{ height:18px; padding-right:2px; }
  .scrGut div.err{ background:var(--danger); color:#fff; border-radius:0 4px 4px 0; }
  .scrGut div.cur{ background:var(--accent); color:#fff; border-radius:0 4px 4px 0; }
  .scrTaWrap{ flex:1; position:relative; min-width:0; }
  .scrHl{ position:absolute; left:0; right:0; height:18px; pointer-events:none; }
  .scrHl.err{ background:color-mix(in srgb, var(--danger) 28%, transparent); }
  .scrHl.cur{ background:color-mix(in srgb, var(--accent) 24%, transparent); }
  #scrText{ position:absolute; inset:0; width:100%; height:100%; resize:none; border:0; outline:0; background:transparent; color:var(--text); font:inherit; padding:6px 8px; tab-size:2; white-space:pre; overflow:auto; box-sizing:border-box; }
  .scrStatus{ min-height:16px; font-size:12px; color:var(--text-dim); } .scrStatus.err{ color:var(--danger); }
  .scrOut{ flex:0 0 110px; overflow:auto; border:1px solid var(--border); border-radius:8px; padding:5px 8px; background:var(--panel-2); font:11.5px/16px ui-monospace,Menlo,Consolas,monospace; color:var(--text-dim); }
  .scrOut .err{ color:var(--danger); } .scrOut .ok{ color:#3fb27f; } .scrOut .scrEcho{ color:var(--text); } .scrOut .caret{ white-space:pre; }
  #consoleLog .scrEcho{ color:var(--text); }
  .mcRecState{ color:#e0262b; min-height:14px; }
  .mcPlayOpts{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:12px; color:var(--text-dim); }
  .mcPlayOpts label{ display:inline-flex; gap:4px; align-items:center; } #mcBase{ width:96px; } #mcCount{ width:36px; } #mcStep{ width:80px; }
  .mcPlayOpts .tbtn{ padding:3px 8px; font-size:12px; }
  #mcList{ flex:1; min-height:0; overflow:auto; display:flex; flex-direction:column; gap:6px; }
  .mcEmpty{ color:var(--text-faint); padding:14px 6px; text-align:center; line-height:1.5; }
  .mcRow{ border:1px solid var(--border); border-radius:8px; padding:6px 8px; background:var(--panel-2); display:grid; grid-template-columns:1fr auto; gap:4px 8px; align-items:center; }
  .mcName{ font-weight:600; overflow:hidden; text-overflow:ellipsis; } .mcName .mini{ font-weight:400; color:var(--text-dim); margin-left:6px; }
  .mcBtns{ display:flex; gap:4px; } .mcBtns .tbtn{ padding:3px 8px; font-size:12px; }
  .mcOpts{ grid-column:1 / -1; display:flex; gap:10px; align-items:center; flex-wrap:wrap; font-size:12px; color:var(--text-dim); }
  .mcOpts label{ display:inline-flex; gap:4px; align-items:center; } .mcKey{ width:96px; }
  .mcKeyMsg.err{ color:var(--danger); } .mcKeyMsg.ok{ color:#3fb27f; }
  .mcHelp{ color:var(--text-faint); line-height:1.45; }

  /* ---------- 16c: JavaScript API, plugins ---------- */
  .menuWrap{ position:relative; }
  .menuWrap .tbtn .ar{ color:var(--text-dim); font-size:10px; }
  #helpPop{ min-width:280px; padding:5px; max-height:calc(100vh - 70px); overflow-y:auto; }
  #helpPop .fmi{ display:flex; align-items:center; justify-content:space-between; gap:18px; padding:6px 10px; border-radius:6px; cursor:pointer; color:var(--text); white-space:nowrap; }
  #helpPop .fmi:hover{ background:var(--panel-2); }
  #helpPop .fmi .k{ color:var(--text-dim); font-size:11.5px; }
  body.dcShare #helpMenuWrap{ display:none !important; }
  #plgBar{ display:contents; } #plgSep[hidden], #plgGrp[hidden]{ display:none; }
  .tool.plgBtn .mcIco{ width:22px; height:18px; border-radius:5px; border:1.5px dashed currentColor; font:700 9.5px/15px ui-monospace,Menlo,Consolas,monospace; letter-spacing:0; text-align:center; }
  #plgHost{ position:absolute; width:0; height:0; overflow:hidden; left:-9999px; top:0; }
  #plgHost iframe{ width:0; height:0; border:0; }
  .plgPanel{ position:absolute; z-index:9; display:flex; flex-direction:column; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; min-width:200px; }
  .plgPanel[hidden]{ display:none !important; }
  .plgPHead{ display:flex; align-items:center; gap:8px; padding:6px 6px 6px 10px; cursor:move; user-select:none; border-bottom:1px solid var(--border); background:var(--panel-2); }
  .plgPTitle{ font-weight:600; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .plgPHead .mini{ color:var(--text-faint); }
  .plgPBody{ flex:1; min-height:0; } .plgPanelFrame{ width:100%; height:100%; border:0; display:block; background:#1b1f27; }
  #helpBtn{ font-weight:700; }
  .jsPanel{ right:62px; bottom:130px; width:480px; height:380px; max-width:calc(100% - 70px); max-height:calc(100% - 140px); resize:both; }
  .jsBody{ flex:1; min-height:0; display:flex; flex-direction:column; gap:6px; padding:8px 10px 10px; }
  #jsCode{ flex:0 0 150px; resize:vertical; background:var(--bg); color:var(--text); border:1px solid var(--border); border-radius:8px; padding:6px 8px; font:12.5px/18px ui-monospace,Menlo,Consolas,monospace; tab-size:2; white-space:pre; }
  .jsOut{ flex:1; min-height:60px; overflow:auto; border:1px solid var(--border); border-radius:8px; padding:5px 8px; background:var(--panel-2); font:11.5px/16px ui-monospace,Menlo,Consolas,monospace; color:var(--text-dim); }
  .jsL{ white-space:pre-wrap; word-break:break-word; } .jsL.cmd{ color:var(--text-faint); } .jsL.ret{ color:var(--text); } .jsL.ok{ color:#3fb27f; } .jsL.error{ color:var(--danger); } .jsL.warn{ color:#d9932b; }
  #plgDlg .modalBody{ max-height:70vh; overflow:auto; display:flex; flex-direction:column; gap:8px; }
  #plgDlg .foot, #plgInstDlg .foot, #apiRefDlg .foot{ display:flex; align-items:center; gap:8px; padding:12px 18px; border-top:1px solid var(--border); }
  .plgNote{ color:var(--text-dim); line-height:1.5; margin:0; } .plgNote a, .jsBody a{ color:var(--accent); }
  .plgTop{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
  #plgUrl{ flex:1; min-width:160px; background:var(--panel-2); color:var(--text); border:1px solid var(--border); border-radius:6px; padding:5px 8px; font:inherit; font-size:12px; }
  #plgList{ display:flex; flex-direction:column; gap:8px; } .plgEmpty{ color:var(--text-faint); padding:18px 6px; text-align:center; }
  .plgCard{ border:1px solid var(--border); border-radius:8px; padding:8px 10px; background:var(--panel-2); display:flex; flex-direction:column; gap:5px; }
  .plgCard.off{ opacity:.75; }
  .plgHd, .plgBtns{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .plgHd .mini{ color:var(--text-dim); }
  .plgDesc{ color:var(--text-dim); font-size:12px; line-height:1.45; }
  .plgBtns .tbtn{ padding:3px 8px; font-size:12px; } .plgOrigin{ color:var(--text-faint); max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .plgSt{ font-size:11px; padding:1px 8px; border-radius:10px; background:var(--panel-3); color:var(--text-dim); }
  .plgSt-running{ background:#1f4d38; color:#7be0ad; } .plgSt-error{ background:#5a2424; color:#ffb0aa; } .plgSt-starting{ background:var(--accent-soft); color:var(--text); }
  .plgPerm{ display:inline-block; font:600 10.5px/16px ui-monospace,Menlo,Consolas,monospace; padding:0 6px; border-radius:4px; background:var(--panel-3); color:var(--text); border:1px solid var(--border); }
  .plgPerm-write, .plgPerm-commands{ border-color:#c58b2a; color:#e0b341; } .plgPerm-network{ border-color:var(--danger); color:var(--danger); }
  .plgLog summary{ cursor:pointer; color:var(--text-dim); font-size:12px; }
  .plgLog pre{ margin:4px 0 0; max-height:140px; overflow:auto; background:var(--bg); border:1px solid var(--border); border-radius:6px; padding:5px 7px; font-size:11px; white-space:pre-wrap; }
  .plgInst p{ line-height:1.5; } .plgInst h4{ margin:12px 0 4px; } .plgPermList{ margin:0; padding-left:18px; line-height:1.9; } .plgNew{ color:#e0b341; font-size:11px; }
  #apiRefDlg .modalBody{ display:flex; flex-direction:column; gap:8px; max-height:74vh; overflow:auto; }
  #apiRefDlg .apiIntro{ font-size:12.5px; color:var(--text-dim); line-height:1.55; } #apiRefDlg .apiIntro p{ margin:0 0 6px; }
  #apiRefDlg h4{ margin:10px 0 4px; color:var(--text); }
  #apiRefDlg code, .apiPre{ font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:11.5px; color:var(--text); }
  .apiPre{ background:var(--bg); border:1px solid var(--border); border-radius:6px; padding:8px 10px; overflow:auto; white-space:pre; margin:0 0 6px; }
  #apiFilter{ width:100%; box-sizing:border-box; padding:6px 8px; background:var(--panel-2); color:var(--text); border:1px solid var(--border); border-radius:6px; }
  #apiRefDlg .crefWrap{ overflow:auto; max-height:46vh; border:1px solid var(--border); border-radius:6px; flex:none; }
  .apiSmall{ margin-bottom:4px; } #apiRefDlg .crefCount{ margin-left:auto; font-size:12px; color:var(--text-dim); } #apiRefDlg .crefS code{ white-space:normal; }

  /* ---------- Help Center, tour, Help assistant, Contact us (help/help-center.js) ---------- */
  .hcModal{ width:1040px; max-width:96vw; height:min(720px,90vh); max-height:90vh; }
  .hcHeadBtns{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
  .hcBody{ display:flex; min-height:0; flex:1; }
  .hcNav{ width:290px; flex:none; border-right:1px solid var(--border); display:flex; flex-direction:column; min-height:0; }
  #hcSearch{ margin:12px; padding:9px 11px; border-radius:9px; border:1px solid var(--border); background:var(--panel-2); color:var(--text); font-size:13px; }
  #hcSearch:focus{ outline:2px solid var(--accent); outline-offset:-1px; }
  .hcList{ overflow-y:auto; padding:0 8px 12px; flex:1; }
  .hcList .hcGrp{ font-size:10px; letter-spacing:.7px; text-transform:uppercase; color:var(--text-faint); margin:12px 6px 4px; }
  .hcList a{ display:block; padding:5px 8px; border-radius:7px; color:var(--text); text-decoration:none; font-size:13px; line-height:1.3; }
  .hcList a span{ display:block; font-size:11.5px; color:var(--text-dim); margin-top:1px; }
  .hcList a.gen{ color:var(--text-dim); }
  .hcList a:hover, .hcList a:focus{ background:var(--panel-2); outline:none; }
  .hcList a.on{ background:var(--accent-soft); }
  .hcNone{ padding:14px 8px; color:var(--text-dim); font-size:13px; line-height:1.5; }
  .hcNone a{ color:var(--accent); }
  .hcArt{ flex:1; overflow-y:auto; padding:18px 28px 28px; font-size:13.5px; line-height:1.6; color:var(--text); }
  .hcArt h2{ margin:2px 0 6px; font-size:21px; }
  .hcArt h4{ margin:18px 0 6px; font-size:12px; letter-spacing:.6px; text-transform:uppercase; color:var(--text-dim); }
  .hcArt ol, .hcArt ul{ margin:0; padding-left:22px; } .hcArt li{ margin:3px 0; }
  .hcArt code{ background:var(--panel-2); border:1px solid var(--border); border-radius:5px; padding:0 4px; font-size:12px; }
  .hcArt kbd, .haMsg kbd{ display:inline-block; min-width:16px; text-align:center; padding:0 5px; border:1px solid var(--border); border-bottom-width:2px; border-radius:5px; background:var(--panel-2); font-weight:600; font-size:11.5px; line-height:1.5; }
  .hcGroupTag{ display:inline-block; font-size:10.5px; letter-spacing:.6px; text-transform:uppercase; color:var(--accent); }
  .hcSum{ font-size:15px; color:var(--text); margin:0 0 10px; }
  .hcMeta{ display:flex; flex-wrap:wrap; gap:8px 22px; font-size:12.5px; color:var(--text-dim); padding:8px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
  .hcMeta b{ color:var(--text-faint); font-weight:600; margin-right:4px; text-transform:uppercase; font-size:10.5px; letter-spacing:.5px; }
  .hcDim{ color:var(--text-dim); } .hcSyn{ white-space:pre-wrap; }
  .hcOpts td{ padding:3px 12px 3px 0; vertical-align:top; } .hcOpts td:first-child{ white-space:nowrap; }
  .hcSee{ display:flex; flex-wrap:wrap; gap:6px; }
  .hcSee a{ padding:4px 10px; border-radius:999px; border:1px solid var(--border); color:var(--text); text-decoration:none; font-size:12.5px; }
  .hcSee a:hover{ border-color:var(--accent); color:var(--accent); }
  .hcTry{ margin-top:6px; }
  @media (max-width:760px){ .hcBody{ flex-direction:column; } .hcNav{ width:auto; max-height:40%; border-right:none; border-bottom:1px solid var(--border); } .hcArt{ padding:14px 16px; } }

  #tourOv{ position:fixed; inset:0; z-index:300; display:none; }
  #tourOv.open{ display:block; }
  #tourOv.dim{ background:rgba(0,0,0,.55); }
  #tourHole{ position:fixed; border-radius:12px; box-shadow:0 0 0 9999px rgba(0,0,0,.55), 0 0 0 2px var(--accent); transition:all .18s ease; pointer-events:none; }
  #tourCard{ position:fixed; background:var(--panel); color:var(--text); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow); padding:14px 16px 12px; font-size:13.5px; line-height:1.55; }
  #tourCard h4{ margin:2px 0 6px; font-size:16px; }
  #tourCard code{ background:var(--panel-2); border-radius:4px; padding:0 4px; font-size:12px; }
  .tourStep{ font-size:11px; color:var(--text-faint); letter-spacing:.5px; }
  .tourBtns{ display:flex; gap:6px; align-items:center; margin-top:12px; } .tourBtns .spacer{ flex:1; }
  #tourOffer{ position:fixed; left:50%; top:60px; transform:translateX(-50%); z-index:150; display:flex; align-items:center; gap:10px;
    background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:8px 8px 8px 14px; box-shadow:var(--shadow); font-size:13px; }

  #haPanel{ position:fixed; right:18px; bottom:18px; z-index:140; width:380px; max-width:calc(100vw - 24px); height:min(560px,calc(100vh - 90px));
    display:none; flex-direction:column; background:var(--panel); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow); overflow:hidden; }
  #haPanel.open{ display:flex; }
  .haHead{ display:flex; align-items:center; gap:8px; padding:10px 10px 10px 14px; border-bottom:1px solid var(--border); font-size:14px; }
  .haHead .spacer{ flex:1; } .haDog{ font-size:18px; }
  .haMsgs{ flex:1; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:10px; font-size:13px; line-height:1.5; }
  .haMsg{ max-width:92%; padding:8px 11px; border-radius:12px; }
  .haMsg.me{ align-self:flex-end; background:var(--accent); color:#fff; border-bottom-right-radius:4px; }
  .haMsg.bot{ align-self:flex-start; background:var(--panel-2); border-bottom-left-radius:4px; }
  .haMsg a{ color:var(--accent); }
  .haMsg code{ background:var(--panel); border-radius:4px; padding:0 4px; font-size:12px; }
  .haChips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
  .haChip{ border:1px solid var(--border); background:var(--panel); color:var(--text); border-radius:999px; padding:4px 10px; font-size:12px; cursor:pointer; }
  .haChip:hover{ border-color:var(--accent); color:var(--accent); }
  .haCard{ margin-top:8px; padding:8px 10px; border:1px solid var(--border); border-radius:10px; background:var(--panel); }
  .haCard a b{ color:var(--text); } .haStep{ color:var(--text-dim); font-size:12px; margin-top:3px; }
  .haCardBtns{ display:flex; gap:6px; margin-top:7px; flex-wrap:wrap; } .haCardBtns .tbtn{ font-size:12px; padding:4px 9px; }
  .haMore{ margin-top:8px; color:var(--text-dim); font-size:12px; }
  .haForm{ display:flex; gap:6px; padding:10px; border-top:1px solid var(--border); }
  #haIn{ flex:1; min-width:0; padding:8px 10px; border-radius:9px; border:1px solid var(--border); background:var(--panel-2); color:var(--text); font-size:13px; }
  .haFoot{ padding:0 12px 9px; font-size:11.5px; color:var(--text-faint); } .haFoot a{ color:var(--text-dim); }

  .modal > .foot{ display:flex; justify-content:flex-end; align-items:center; gap:8px; padding:12px 18px; border-top:1px solid var(--border); }   /* default footer of s9Modal dialogs */
  .ctGrid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:10px 0; }
  #contactDlg label{ display:flex; flex-direction:column; gap:3px; font-size:11px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.5px; }
  #contactDlg label.ctChk{ flex-direction:row; align-items:center; gap:7px; text-transform:none; letter-spacing:0; font-size:12.5px; color:var(--text-dim); margin-top:8px; }
  #contactDlg input[type=text], #contactDlg input[type=email], #contactDlg textarea{ font:inherit; font-size:13px; text-transform:none; letter-spacing:0; padding:7px 9px; border-radius:8px;
    border:1px solid var(--border); background:var(--panel-2); color:var(--text); width:100%; box-sizing:border-box; }
  #contactDlg textarea{ resize:vertical; min-height:110px; }
  .ctNote{ background:var(--accent-soft); border-radius:8px; padding:8px 10px; font-size:12.5px; margin:8px 0; }
  .ctStatus{ min-height:18px; margin-top:8px; font-size:12.5px; } .ctStatus.ok{ color:#2ea866; } .ctStatus.err{ color:var(--danger); }
  /* 19a: Help → "I like it — join the waitlist" (io/cloud-license.js lcWaitlistOpen) */
  #lcWlDlg label{ display:flex; flex-direction:column; gap:3px; font-size:11px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.5px; }
  #lcWlDlg label .mini{ text-transform:none; letter-spacing:0; }
  #lcWlDlg label.ctChk{ flex-direction:row; align-items:flex-start; gap:7px; text-transform:none; letter-spacing:0; font-size:12.5px; color:var(--text-dim); margin-top:8px; }
  #lcWlDlg input[type=text], #lcWlDlg input[type=email], #lcWlDlg input[type=tel], #lcWlDlg textarea{ font:inherit; font-size:13px; text-transform:none; letter-spacing:0; padding:7px 9px; border-radius:8px;
    border:1px solid var(--border); background:var(--panel-2); color:var(--text); width:100%; box-sizing:border-box; }
  #lcWlDlg textarea{ resize:vertical; min-height:90px; }
  .wlErr{ color:var(--danger); font-size:11.5px; text-transform:none; letter-spacing:0; } .wlErr:empty{ display:none; }

  /* ---------- 17b: Tablet UI (body.tabletUI — set by ui/tablet.js for touch screens under 1366 px or the "Tablet UI" setting).
     Nothing here applies without that class: the desktop layout stays exactly as it was. ---------- */
  #tbMoreWrap{ display:none; }
  #tbMore{ display:none; }
  #pwaUpdate{ position:fixed; z-index:140; left:50%; transform:translateX(-50%); bottom:calc(84px + env(safe-area-inset-bottom)); display:flex; align-items:center; gap:10px;
    background:var(--panel); color:var(--text); border:1px solid var(--accent); border-radius:12px; box-shadow:var(--shadow); padding:8px 10px 8px 14px; font-size:13px; }
  #pwaUpdate[hidden]{ display:none; }
  #cloudChip .cc-off{ font-size:10.5px; padding:1px 7px; border-radius:9px; background:#5a3d14; color:#ffd28a; letter-spacing:.3px; }
  body[data-theme="light"] #cloudChip .cc-off{ background:#ffe9c2; color:#7a4a00; }
  #cloudChip .cc-off[hidden]{ display:none; }
  body.tabletUI #app{ height:100vh; height:100dvh; }
  body.tabletUI #topbar{ flex-wrap:nowrap; overflow:visible; overflow-x:clip; gap:6px; padding:max(6px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) 6px max(10px,env(safe-area-inset-left)); }
  body.tabletUI #topbar > *{ flex-shrink:0; }
  body.tabletUI #topbar .spacer{ flex:1 1 0; min-width:0; }
  body.tabletUI #docName{ flex:0 1 auto; min-width:40px; max-width:240px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
  body.tabletUI #docName .nm{ overflow:hidden; text-overflow:ellipsis; }
  body.tabletUI #cloudStatus{ flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; max-width:170px; }
  body.tabletUI #cloudChip{ flex:0 1 auto; min-width:0; margin-left:0; }
  body.tabletUI #cloudChip .cc-who{ max-width:150px; }
  body.tabletUI #cloudChip .cc-role{ display:none; }
  body.tabletUI #tbMoreWrap{ display:block; position:relative; }
  body.tabletUI #topbar .vsep{ display:none; }
  @media (max-width:900px){   /* narrow (portrait): the brand keeps its dot, the account chip its ☁ (name in its tooltip) — room for the drawing name */
    body.tabletUI .brand{ font-size:0; gap:0; margin-right:0; }
    body.tabletUI #cloudChip .cc-who{ max-width:20px; text-overflow:clip; }
    body.tabletUI #docName{ max-width:200px; }
    body.tabletUI #cloudStatus{ max-width:120px; } }
  body.tabletUI .tbtn{ min-height:40px; padding:8px 12px; font-size:13.5px; }
  body.tabletUI .tbtn.icon{ min-width:44px; justify-content:center; padding:8px 10px; }
  body.tabletUI .seg button{ min-height:36px; padding:8px 14px; font-size:13.5px; }
  body.tabletUI .schip{ min-height:40px; padding:8px 11px; font-size:11px; }
  body.tabletUI input[type=text], body.tabletUI input[type=number], body.tabletUI input[type=email], body.tabletUI input[type=password], body.tabletUI select, body.tabletUI textarea{ font-size:16px; }   /* no zoom-on-focus in Safari */
  body.tabletUI select, body.tabletUI input[type=text], body.tabletUI input[type=number]{ min-height:36px; }
  body.tabletUI .switch{ min-height:36px; display:flex; align-items:center; }
  body.tabletUI #filePop .fmi, body.tabletUI #helpPop .fmi{ padding:11px 12px; font-size:14px; }
  body.tabletUI #filePop{ max-height:calc(100dvh - 80px); -webkit-overflow-scrolling:touch; }
  body.tabletUI #ctxMenu .mi{ padding:11px 12px; font-size:14px; }
  body.tabletUI #stylePop .sitem, body.tabletUI .pop .fmi{ min-height:40px; }
  /* the ⋯ sheet: the moved top-bar controls (style picker, drawing aids, zoom, theme, help, cloud buttons) */
  body.tabletUI #tbMore.open{ display:flex; flex-direction:column; gap:12px; position:fixed; z-index:90; top:calc(var(--tbh,56px) + 6px); right:max(8px,env(safe-area-inset-right));
    width:min(380px, calc(100vw - 16px)); max-height:calc(100dvh - var(--tbh,56px) - 20px); overflow:visible; background:var(--panel); border:1px solid var(--border);
    border-radius:14px; box-shadow:var(--shadow); padding:12px 14px 16px; }
  #tbMore .tbmHead{ display:flex; align-items:center; justify-content:space-between; }
  #tbMore .tbmLbl{ font-size:10.5px; text-transform:uppercase; letter-spacing:.6px; color:var(--text-faint); margin-bottom:6px; }
  #tbMore .tbmRow{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
  #tbMore #styleBar{ flex-wrap:wrap; }
  #tbMore #styleCurrent{ min-height:40px; min-width:170px; }
  #tbMore #statusChips{ margin:0; flex-wrap:wrap; gap:6px; }
  #tbMore #helpMenuWrap{ position:relative; }
  #tbMore .pop{ z-index:95; }
  #tbMore #tbmCloudSec:not(:has(.tbtn:not([hidden]))){ display:none; }
  #tbMore .tbmSec:empty, #tbMore [hidden]{ display:none !important; }
  /* left rail: bigger tools; one column in portrait, two in landscape */
  body.tabletUI #rail{ width:132px; gap:6px; padding:10px 8px max(10px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left)); }
  body.tabletUI .tool{ width:52px; height:52px; }
  body.tabletUI .tool svg{ width:22px; height:22px; }
  body.tabletUI .tool span{ font-size:9px; }
  body.tabletUI #dimFly .tool, body.tabletUI #drawFly .tool, body.tabletUI #modFly .tool, body.tabletUI #symFly .tool, body.tabletUI #blkFly .tool{ min-height:44px; }
  body.tabletUI #dimFly, body.tabletUI #drawFly, body.tabletUI #modFly, body.tabletUI #symFly, body.tabletUI #blkFly{ max-height:calc(100% - 16px); overflow-y:auto; }
  @media (orientation:portrait){ body.tabletUI #rail{ width:72px; padding-left:max(6px,env(safe-area-inset-left)); padding-right:6px; } }
  /* canvas overlays: layer chip under the HUD, console wide at the bottom and above the on-screen keyboard (--kb, from visualViewport) */
  body.tabletUI #layerChip{ bottom:auto; top:56px; left:max(14px,env(safe-area-inset-left)); }
  body.tabletUI #annoPop{ top:calc(100% + 6px); bottom:auto; }
  body.tabletUI #console{ left:12px; right:12px; width:auto; max-width:760px; margin:0 auto; transform:none;
    bottom:calc(12px + max(var(--kb,0px), env(safe-area-inset-bottom))); }
  body.tabletUI #consoleRow{ padding:6px 8px 6px 12px; min-height:48px; }
  body.tabletUI #consoleInput{ font-size:16px; min-height:34px; }
  body.tabletUI #consoleLog{ max-height:120px; font-size:12.5px; }
  body.tabletUI.kbOpen #consoleLog{ max-height:72px; }
  body.tabletUI #rightToggles{ right:max(14px,env(safe-area-inset-right)); gap:10px; }
  body.tabletUI #hud{ left:max(14px,env(safe-area-inset-left)); }
  /* drawers: wider side sheets in landscape, bottom sheets in portrait */
  body.tabletUI .rdrawer{ width:min(360px, 100%); padding-bottom:env(safe-area-inset-bottom); }
  body.tabletUI #libDrawer{ width:min(400px, 100%); }
  body.tabletUI #layersDrawer{ width:min(460px, 100%); }
  body.tabletUI .drawerHead{ padding:10px 12px 10px 16px; }
  body.tabletUI .drawerBody{ -webkit-overflow-scrolling:touch; }
  @media (orientation:portrait){
    body.tabletUI #stage .rdrawer{ top:auto; bottom:0; left:0; right:0; width:auto; height:min(64%, 620px); transform:translateY(105%);
      border-left:none; border-top:1px solid var(--border); border-radius:16px 16px 0 0; }
    body.tabletUI #stage .rdrawer.open{ transform:translateY(0); }
    body.tabletUI .rdrawer .drawerHead{ position:relative; padding-top:16px; }
    body.tabletUI .rdrawer .drawerHead::before{ content:''; position:absolute; top:6px; left:50%; width:40px; height:4px; margin-left:-20px; border-radius:2px; background:var(--border); }
    body.tabletUI #cmPanel, body.tabletUI #scrPanel{ left:8px; right:62px; width:auto; }
    body.tabletUI #cmpPanel{ right:62px; width:auto; }
  }
  /* dialogs fit the screen and the space above the keyboard */
  body.tabletUI .modal{ max-width:calc(100vw - 20px); max-height:calc(100dvh - 20px - var(--kb,0px)); }
  body.tabletUI .modalBg{ padding:env(safe-area-inset-top) env(safe-area-inset-right) calc(env(safe-area-inset-bottom) + var(--kb,0px)) env(safe-area-inset-left); }
  body.tabletUI .modalHead{ padding:10px 12px 10px 18px; }
  /* paper view */
  body.tabletUI #sheetsRail{ width:170px; }
  body.tabletUI #paperToolbar, body.tabletUI #paperTools{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  body.tabletUI #paperToolbar > *, body.tabletUI #paperTools > *{ flex-shrink:0; }
  body.tabletUI #paperHint{ max-width:calc(100% - 24px); }
  @media (orientation:portrait){ body.tabletUI #sheetsRail{ width:150px; } }
  body.tabletUI #shareBar{ min-width:0; overflow-x:auto; flex:0 1 auto; }
  body.tabletUI #pwaUpdate{ padding:6px 8px 6px 16px; }