/* ═══════════════════════════════════════════════════════════════════════════
   live-canvas.css — B65 W10 · the Canvas editor, pro (065-117 … 121 · 123 · 127)
   Sample: samples/b65/canvas.html. Tokens only, so it reads in both themes.
   Icon rule (standing): nothing here styles bare element types near `.mi` — every
   font rule targets a class, so a Material Symbol keeps its own face.
   ═══════════════════════════════════════════════════════════════════════════ */
.lc-host{ flex:1; min-height:0; display:flex; flex-direction:column }
.lc{ --lc-blue:#2F7CF6; --lc-pink:#FF3D7F; flex:1; min-height:0; display:flex; flex-direction:column; background:var(--bg-1);
  border:1px solid var(--border); border-radius:16px; overflow:hidden; position:relative }
/* ── the bar: room to breathe (065-121), every square control 1:1 (065-118) ── */
.lc-bar{ display:flex; align-items:center; gap:8px; padding:12px 16px; border-bottom:1px solid var(--divider, var(--border)); background:var(--bg-1);
  overflow-x:auto; scrollbar-width:none; flex:0 0 auto }
.lc-bar::-webkit-scrollbar{ display:none }
.lc-bar-sp{ flex:1 1 8px; min-width:8px }
.lc-grp{ display:inline-flex; align-items:center; gap:4px; flex:0 0 auto }
.lc-sq{ width:36px; height:36px; flex:0 0 36px; display:inline-grid; place-items:center; padding:0; border-radius:10px; border:1px solid var(--border);
  background:var(--bg-1); color:var(--fg-2); cursor:pointer }
.lc-sq .mi{ font-size:19px }
.lc-sq:hover:not([disabled]){ background:var(--bg-2); color:var(--fg-1) }
.lc-sq.on{ background:var(--accent-soft); border-color:transparent; color:var(--accent-text) }
.lc-sq[disabled]{ opacity:.4; cursor:default }
.lc-zv{ min-width:56px; height:36px; padding:0 8px; border-radius:10px; border:1px solid var(--border); background:var(--bg-1); color:var(--fg-1);
  font:600 12.5px/1 var(--mk-font-ui); font-variant-numeric:tabular-nums; cursor:pointer }
.lc-zv:hover{ background:var(--bg-2) }
.lc-back{ display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 12px 0 8px; border-radius:10px; border:1px solid var(--border);
  background:var(--bg-1); color:var(--fg-1); font:600 13px/1 var(--mk-font-ui); cursor:pointer; flex:0 0 auto }
.lc-back .mi{ font-size:19px }
.lc-back:hover{ background:var(--bg-2) }
.lc-nm{ display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 10px; border-radius:10px; cursor:text; min-width:0; flex:0 1 auto;
  font:700 15px/1 var(--mk-font-ui); color:var(--fg-1) }
.lc-nm > .mi{ font-size:18px; color:var(--fg-3) }
.lc-nm-t{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:34vw }
.lc-nm:hover{ background:var(--bg-2) }
.lc-nm:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
.lc-nm-in{ font:700 15px/1 var(--mk-font-ui); color:var(--fg-1); background:var(--bg-input, var(--bg-1)); border:1px solid var(--accent); border-radius:8px; height:32px; padding:0 8px; min-width:180px }
.lc-livechip{ display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 10px; border-radius:999px; flex:0 0 auto;
  background:color-mix(in srgb, var(--mk-ok, #157F4C) 15%, transparent); color:var(--mk-ok, #157F4C); font:700 11.5px/1 var(--mk-font-ui) }
.lc-livechip i{ width:7px; height:7px; border-radius:50%; background:currentColor }
.lc-livechip.is-static{ background:var(--bg-2); color:var(--fg-3) }
.lc-stk{ display:inline-flex; flex:0 0 auto; margin-inline:4px }
.lc-av{ width:28px; height:28px; border-radius:50%; border:2px solid var(--bg-1); margin-inline-start:-8px; background-size:cover; background-position:center;
  display:grid; place-items:center; font:700 10px/1 var(--mk-font-ui); color:#1c2b33 }
.lc-av:first-child{ margin-inline-start:0 }
.lc-btn{ display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 12px; border-radius:10px; border:1px solid var(--border);
  background:var(--bg-1); color:var(--fg-1); font:600 13px/1 var(--mk-font-ui); cursor:pointer; flex:0 0 auto; white-space:nowrap }
.lc-btn .mi{ font-size:18px }
.lc-btn:hover:not([disabled]){ background:var(--bg-2) }
.lc-btn.pri{ background:var(--accent); border-color:transparent; color:var(--accent-fg, #fff) }
.lc-btn.pri:hover{ filter:brightness(1.05); background:var(--accent) }
.lc-btn[disabled]{ opacity:.45 }
.lc-g-panes{ display:none }

/* ── the work area ─────────────────────────────────────────────────────────── */
.lc-work{ flex:1; min-height:0; display:grid; grid-template-columns:252px minmax(0,1fr) 304px; position:relative }
.lc-lp, .lc-rp{ background:var(--bg-1); min-height:0; display:flex; flex-direction:column }
.lc-lp{ border-inline-end:1px solid var(--divider, var(--border)) }
.lc-rp{ border-inline-start:1px solid var(--divider, var(--border)) }
.lc-lp-b, .lc-rp-b{ flex:1; min-height:0; overflow:auto; overscroll-behavior:contain }
.lc-ptabs{ display:flex; gap:4px; padding:8px; border-bottom:1px solid var(--divider, var(--border)); flex:0 0 auto }
.lc-ptabs > button:not(.lc-sheet-x){ flex:1; height:32px; border-radius:9px; border:0; background:transparent; color:var(--fg-2); font:600 12.5px/1 var(--mk-font-ui); cursor:pointer }
.lc-ptabs > button.on{ background:var(--bg-2); color:var(--fg-1) }
.lc-sheet-x{ display:none; width:32px; height:32px; border-radius:9px; border:0; background:var(--bg-2); color:var(--fg-2); cursor:pointer; place-items:center; flex:0 0 32px }
.lc-sec{ padding:12px 14px; border-bottom:1px solid var(--divider, var(--border)); display:flex; flex-direction:column; gap:8px }
.lc-sec > h4{ margin:0; display:flex; align-items:center; gap:8px; justify-content:space-between; min-height:22px;
  font:700 11px/1.2 var(--mk-font-ui); letter-spacing:.07em; text-transform:uppercase; color:var(--fg-3) }
.lc-sec > h4 > span:first-child{ flex:1; min-width:0 }
.lc-sec.is-empty{ gap:0 }
.lc-sub{ font:500 11.5px/1.35 var(--mk-font-ui); color:var(--fg-3); text-transform:none; letter-spacing:0 }
.lc-chip{ display:inline-flex; align-items:center; height:20px; padding:0 8px; border-radius:999px; background:var(--bg-2); color:var(--fg-2);
  font:700 10.5px/1 var(--mk-font-ui); letter-spacing:0; text-transform:none }
.lc-chip.acc{ background:var(--accent-soft); color:var(--accent-text) }
/* Insert */
.lc-pal{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:6px }
.lc-tile{ height:64px; border:1px solid var(--border); background:var(--bg-1); border-radius:11px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  color:var(--fg-2); cursor:grab; padding:4px; min-width:0 }
.lc-tile > span:not(.mi){ font:600 11px/1.15 var(--mk-font-ui); text-align:center; overflow:hidden; text-overflow:ellipsis; max-width:100%; white-space:nowrap }
.lc-tile .mi{ font-size:21px }
.lc-tile:hover{ background:var(--bg-2); color:var(--fg-1) }
.lc-tile.on{ background:var(--accent-soft); color:var(--accent-text); border-color:transparent }
/* Layers */
.lc-lays{ padding:6px }
.lc-lay{ display:flex; align-items:center; gap:4px; height:32px; padding-inline:calc(6px + var(--d, 0) * 14px) 4px; border-radius:8px; cursor:pointer; color:var(--fg-1) }
.lc-lay:hover{ background:var(--bg-2) }
.lc-lay.on{ background:var(--accent-soft); color:var(--accent-text) }
.lc-lay.is-hid{ opacity:.5 }
.lc-lay.is-drag{ opacity:.4 }
.lc-lay.drop-in{ box-shadow:inset 0 0 0 2px var(--lc-blue) }
.lc-lay.drop-b{ box-shadow:inset 0 2px 0 var(--lc-blue) }
.lc-lay.drop-a{ box-shadow:inset 0 -2px 0 var(--lc-blue) }
.lc-lay-tw{ width:20px; height:20px; flex:0 0 20px; display:grid; place-items:center; border:0; background:none; color:var(--fg-3); padding:0; cursor:pointer }
.lc-lay-tw .mi{ font-size:17px }
.lc-lay-ic{ font-size:16px; color:var(--fg-3) }
.lc-lay.on .lc-lay-ic{ color:inherit }
.lc-lay-nm{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font:500 12.5px/1 var(--mk-font-ui) }
.lc-lay-live{ font-size:14px; color:var(--accent-text) }
.lc-lay-b{ width:26px; height:26px; border:0; background:none; border-radius:6px; color:var(--fg-3); display:grid; place-items:center; cursor:pointer; opacity:0; padding:0 }
.lc-lay-b .mi{ font-size:15px }
.lc-lay:hover .lc-lay-b, .lc-lay-b.on, .lc-lay:focus-within .lc-lay-b{ opacity:1 }
.lc-lay-b:hover{ background:var(--bg-3, var(--bg-2)); color:var(--fg-1) }

/* ── the stage ─────────────────────────────────────────────────────────────── */
.lc-stage{ position:relative; overflow:auto; min-height:0; display:flex; background-color:var(--bg-3, var(--bg-2)); outline:none; touch-action:none;
  overscroll-behavior:contain }
.lc-stage.is-grid{ background-image:radial-gradient(color-mix(in srgb, var(--fg-3) 32%, transparent) 1px, transparent 1px); background-size:20px 20px }
.lc-stage.is-pan{ cursor:grab }
.lc-stage.tool-pen{ cursor:crosshair }
.lc-stage.tool-conn .lc-el{ cursor:alias }
.lc-wrap{ position:relative; margin:auto; flex:0 0 auto }
.lc-sheet{ position:absolute; left:0; top:0; transform-origin:0 0; box-shadow:0 1px 2px rgba(0,0,0,.08), 0 20px 60px -30px rgba(0,0,0,.45); isolation:isolate }
.lc-sheet.has-lgrid::after{ content:''; position:absolute; inset:0 48px; pointer-events:none; z-index:40;
  background:repeating-linear-gradient(90deg, color-mix(in srgb, var(--lc-pink) 10%, transparent) 0 calc((100% - 11 * 24px) / 12), transparent calc((100% - 11 * 24px) / 12) calc((100% - 11 * 24px) / 12 + 24px)) }
.lc-hint{ position:absolute; top:12px; left:50%; transform:translateX(-50%); z-index:5; height:32px; display:flex; align-items:center; padding:0 14px; border-radius:999px;
  background:var(--fg-1); color:var(--bg-1); font:600 12.5px/1 var(--mk-font-ui); box-shadow:0 6px 20px -8px rgba(0,0,0,.4); white-space:nowrap; pointer-events:none }
.lc-hint[hidden]{ display:none }

/* elements — real HTML + CSS */
.lc-el{ box-sizing:border-box; user-select:none; -webkit-user-select:none }
.lc-sheet .lc-el{ cursor:default }
.lc-sheet .lc-el.is-locked{ cursor:not-allowed }
.lc-sheet .lc-el:hover:not(:has(.lc-el:hover)){ outline:calc(1.5px * var(--iz, 1)) solid color-mix(in srgb, var(--lc-blue) 70%, transparent); outline-offset:0 }
.lc-el.is-drag{ opacity:.85; z-index:20; box-shadow:0 12px 30px -10px rgba(0,0,0,.35) }
.lc-el.lc-drop{ outline:calc(2px * var(--iz, 1)) dashed var(--lc-blue) !important; outline-offset:calc(2px * var(--iz, 1)) }
.lc-t{ box-sizing:border-box; width:100%; height:100%; display:flex; flex-direction:column; padding:10px 12px; overflow:hidden; white-space:pre-wrap; overflow-wrap:anywhere; text-wrap:pretty }
.lc-k-text > .lc-t{ padding:2px 2px }
.lc-tx{ display:block; min-width:0 }
.lc-tx.is-editing{ outline:none; cursor:text; user-select:text; -webkit-user-select:text; background:color-mix(in srgb, var(--lc-blue) 6%, transparent) }
.lc-k-cond > .lc-t{ position:absolute; inset:0; padding:18% 20% }
.lc-k-step > .lc-t{ padding:8px 12px }
.lc-t.is-editing{ outline:none; cursor:text; user-select:text; -webkit-user-select:text; white-space:pre-wrap; background:color-mix(in srgb, var(--lc-blue) 6%, transparent) }
.lc-tok{ border-radius:3px }
.lc-sheet .lc-tok.is-live{ box-shadow:inset 0 -2px 0 color-mix(in srgb, var(--accent) 60%, transparent) }
.lc-sheet .lc-tok.is-err{ box-shadow:inset 0 -2px 0 color-mix(in srgb, var(--mk-danger, #C81E1E) 55%, transparent) }
.lc-empty{ font-style:italic; opacity:.55 }
.lc-img{ display:block; width:100%; height:100%; border-radius:inherit; pointer-events:none }
.lc-ph{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; text-align:center; padding:8px;
  font:600 11px/1.3 var(--mk-font-ui); color:var(--fg-2) }
.lc-ph .mi{ font-size:24px; color:var(--fg-3) }
.lc-svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none }
.lc-icn{ display:grid; place-items:center; width:100%; height:100%; line-height:1 }
.lc-live{ box-sizing:border-box; width:100%; height:100%; display:flex; flex-direction:column; justify-content:center; gap:3px; padding:10px 14px; overflow:hidden }
.lc-live > small{ font:600 11px/1.2 var(--mk-font-ui); opacity:.72 }
.lc-live > b{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.lc-src{ display:inline-flex; align-items:center; gap:4px; font:600 10.5px/1.2 var(--mk-font-ui); color:#4DDEDE; min-width:0 }
.lc-src .mi{ font-size:13px; flex:0 0 auto }
.lc-src > span:last-child{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.lc-chart{ font:600 10px/1 var(--mk-font-ui) }
.lc-chart text{ fill:currentColor; opacity:.7 }
.lc-tbl{ width:100%; border-collapse:collapse; table-layout:fixed }
.lc-tbl th, .lc-tbl td{ padding:7px 10px; text-align:start; border-bottom:1px solid var(--lc-tb); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.lc-tbl th{ font-weight:700; opacity:.75 }
.lc-tbl tr:last-child td{ border-bottom:0 }
.lc-k-table{ overflow:hidden }
/* Assets components, static props */
.lc-c{ display:flex; width:100%; height:100%; font-family:var(--lc-font); font-size:calc(14px * var(--lc-z, 1)) }
.lc-c-btn{ flex:1; display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:12px; padding:0 18px; font-weight:700; white-space:nowrap; box-sizing:border-box }
.lc-c-btn.v-primary{ background:var(--lc-acc); color:var(--lc-acc-fg) }
.lc-c-btn.v-secondary{ background:var(--bg-1); color:var(--fg-1); border:1px solid var(--border-strong, var(--border)) }
.lc-c-btn.v-ghost{ background:transparent; color:var(--lc-ink) }
.lc-c-btn.v-danger{ background:var(--mk-danger, #C81E1E); color:#fff }
.lc-c-btn .mi, .lc-c-chip .mi{ font-size:1.25em }
.lc-c-chip{ display:inline-flex; align-items:center; gap:6px; height:100%; padding:0 12px; border-radius:999px; font-weight:600; font-size:.9em; white-space:nowrap; box-sizing:border-box }
.lc-c-chip.v-tag{ background:#fff; color:#0D2530; border:1px solid #E5E7EB }
.lc-c-chip.v-badge{ background:var(--lc-soft); color:var(--lc-ink) }
.lc-c-chip.v-ok{ background:color-mix(in srgb, var(--mk-ok, #157F4C) 14%, transparent); color:var(--mk-ok, #157F4C) }
.lc-c-chip.v-warn{ background:color-mix(in srgb, #D9A400 18%, transparent); color:#8A6400 }
.lc-c-av{ width:100%; height:100%; border-radius:50%; background-size:cover; background-position:center }
.lc-c-av.is-ini{ display:grid; place-items:center; background:var(--lc-soft); color:var(--lc-ink); font-weight:800; font-size:calc(.36 * min(100%, 48px)) }
.lc-c-card{ flex:1; display:flex; gap:12px; align-items:center; padding:16px; border-radius:14px; box-sizing:border-box; min-width:0; color:var(--fg-1) }
.lc-c-card.v-card{ background:var(--bg-2); border:1px solid var(--border) }
.lc-c-card.v-raised{ background:var(--bg-1); border:1px solid var(--border); box-shadow:0 10px 24px -14px rgba(0,0,0,.35) }
.lc-c-card.v-sunken{ background:var(--bg-input, var(--bg-2)); border:1px solid var(--border) }
.lc-c-card.v-hairline{ border:1px solid var(--border) }
.lc-c-card-ic{ width:44px; height:44px; border-radius:12px; flex:0 0 44px; display:grid; place-items:center; background:var(--lc-soft); color:var(--lc-ink) }
.lc-c-card-ic .mi{ font-size:22px }
.lc-c-card-b{ display:flex; flex-direction:column; gap:3px; min-width:0 }
.lc-c-card-b > b{ font-weight:700; font-size:1.05em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.lc-c-card-b > small{ font-size:.85em; opacity:.7; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.lc-c-inp{ flex:1; display:flex; flex-direction:column; gap:6px; min-width:0 }
.lc-c-inp > small{ font-weight:600; font-size:.85em; color:var(--fg-2) }
.lc-c-well{ flex:1; display:flex; align-items:center; padding:0 12px; border-radius:9px; background:var(--bg-input, var(--bg-1)); border:1px solid var(--border); color:var(--fg-3); font-size:.95em; min-height:0 }
.lc-c-inp.v-focus .lc-c-well{ border-color:var(--lc-acc); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent) }
.lc-c-inp.v-invalid .lc-c-well{ border-color:var(--mk-danger, #C81E1E) }
.lc-c-tg{ display:flex; align-items:center; gap:10px; font-weight:600; color:var(--fg-1) }
.lc-c-tg > i{ width:40px; height:24px; border-radius:999px; background:var(--bg-3, #d4d4d8); position:relative; flex:0 0 40px }
.lc-c-tg > i::after{ content:''; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25) }
.lc-c-tg.v-on > i{ background:var(--lc-acc) }
.lc-c-tg.v-on > i::after{ left:19px }
/* connectors */
.lc-conns{ position:absolute; inset:0; pointer-events:none; z-index:30 }
.lc-conn-svg{ position:absolute; left:0; top:0; overflow:visible }
.lc-conn-hit{ fill:none; stroke:transparent; stroke-width:14; pointer-events:stroke; cursor:pointer }
.lc-conn.is-sel path:not(.lc-conn-hit){ filter:drop-shadow(0 0 2px var(--lc-blue)) }
.lc-conn-l{ position:absolute; transform:translate(-50%,-50%); padding:3px 8px; border-radius:999px; background:var(--bg-1); border:1px solid var(--border);
  font:700 11px/1.2 var(--mk-font-ui); color:var(--fg-1); white-space:nowrap; pointer-events:auto; cursor:pointer }
.lc-thumb-in .lc-conn-l, .lc-pr-sheet .lc-conn-l{ pointer-events:none }
/* selection, handles, guides */
.lc-ov{ position:absolute; inset:0; pointer-events:none; z-index:50 }
.lc-ftitle{ position:absolute; transform:translateY(calc(-100% - 6px * var(--iz, 1))); font:600 calc(11.5px * var(--iz, 1))/1 var(--mk-font-ui); color:var(--fg-3);
  white-space:nowrap; pointer-events:auto; cursor:default }
.lc-selb{ position:absolute; box-sizing:border-box; outline:calc(1.5px * var(--iz, 1)) solid var(--lc-blue); transform-origin:center }
.lc-selb.is-locked{ outline-style:dashed }
.lc-h{ position:absolute; width:calc(9px * var(--iz, 1)); height:calc(9px * var(--iz, 1)); background:#fff; border:calc(1.5px * var(--iz, 1)) solid var(--lc-blue);
  border-radius:calc(2px * var(--iz, 1)); box-sizing:border-box; pointer-events:auto; touch-action:none }
.lc-h::before{ content:''; position:absolute; inset:calc(-7px * var(--iz, 1)) }
.lc-h-nw{ left:0; top:0; transform:translate(-50%,-50%); cursor:nwse-resize } .lc-h-n{ left:50%; top:0; transform:translate(-50%,-50%); cursor:ns-resize }
.lc-h-ne{ right:0; top:0; transform:translate(50%,-50%); cursor:nesw-resize } .lc-h-e{ right:0; top:50%; transform:translate(50%,-50%); cursor:ew-resize }
.lc-h-se{ right:0; bottom:0; transform:translate(50%,50%); cursor:nwse-resize } .lc-h-s{ left:50%; bottom:0; transform:translate(-50%,50%); cursor:ns-resize }
.lc-h-sw{ left:0; bottom:0; transform:translate(-50%,50%); cursor:nesw-resize } .lc-h-w{ left:0; top:50%; transform:translate(-50%,-50%); cursor:ew-resize }
.lc-rot{ position:absolute; left:50%; top:calc(-26px * var(--iz, 1)); width:calc(12px * var(--iz, 1)); height:calc(12px * var(--iz, 1)); transform:translateX(-50%);
  border-radius:50%; background:#fff; border:calc(1.5px * var(--iz, 1)) solid var(--lc-blue); pointer-events:auto; cursor:grab; box-sizing:border-box; touch-action:none }
.lc-rot::after{ content:''; position:absolute; left:50%; top:100%; width:calc(1.5px * var(--iz, 1)); height:calc(14px * var(--iz, 1)); background:var(--lc-blue); transform:translateX(-50%) }
.lc-dim{ position:absolute; left:50%; top:100%; transform:translate(-50%, calc(8px * var(--iz, 1))); padding:calc(3px * var(--iz, 1)) calc(6px * var(--iz, 1)); border-radius:calc(5px * var(--iz, 1));
  background:var(--lc-blue); color:#fff; font:700 calc(10.5px * var(--iz, 1))/1 var(--mk-font-ui); white-space:nowrap; font-variant-numeric:tabular-nums }
@media (pointer:coarse){
  .lc-h{ width:calc(22px * var(--iz, 1)); height:calc(22px * var(--iz, 1)); border-radius:50% }
  .lc-h-n, .lc-h-s, .lc-h-e, .lc-h-w{ display:none }
  .lc-rot{ width:calc(22px * var(--iz, 1)); height:calc(22px * var(--iz, 1)); top:calc(-40px * var(--iz, 1)) }
}
.lc-guides{ position:absolute; inset:0; pointer-events:none; z-index:60 }
.lc-g{ position:absolute; background:var(--lc-pink) }
.lc-g.v{ width:calc(1px * var(--iz, 1)) } .lc-g.h{ height:calc(1px * var(--iz, 1)) }
.lc-gap{ position:absolute; background:var(--lc-pink); display:flex; align-items:center; justify-content:center }
.lc-gap.h{ height:calc(1px * var(--iz, 1)) } .lc-gap.v{ width:calc(1px * var(--iz, 1)) }
.lc-gap b{ background:var(--lc-pink); color:#fff; border-radius:calc(4px * var(--iz, 1)); padding:calc(2px * var(--iz, 1)) calc(5px * var(--iz, 1)); font:700 calc(10px * var(--iz, 1))/1 var(--mk-font-ui); white-space:nowrap }
.lc-gap.h b{ transform:translateY(calc(-11px * var(--iz, 1))) } .lc-gap.v b{ transform:translateX(calc(16px * var(--iz, 1))) }
.lc-mq{ position:absolute; border:calc(1px * var(--iz, 1)) solid var(--lc-blue); background:color-mix(in srgb, var(--lc-blue) 10%, transparent); pointer-events:none; z-index:70 }
.lc-ind{ position:absolute; background:var(--lc-blue); z-index:65; border-radius:2px; pointer-events:none }
.lc-ind.v{ width:calc(3px * var(--iz, 1)) } .lc-ind.h{ height:calc(3px * var(--iz, 1)) }
.lc-pen-live{ position:absolute; left:0; top:0; overflow:visible }

/* ── the inspector ────────────────────────────────────────────────────────── */
.lc-head{ display:flex; align-items:center; gap:8px; padding:12px 14px; border-bottom:1px solid var(--divider, var(--border)); flex-wrap:wrap }
.lc-head-ic{ width:32px; height:32px; border-radius:9px; background:var(--accent-soft); color:var(--accent-text); display:grid; place-items:center; font-size:18px; flex:0 0 32px }
.lc-head-in{ flex:1 1 120px; min-width:0; height:32px; border:1px solid transparent; border-radius:8px; background:transparent; padding:0 8px; font:700 13.5px/1 var(--mk-font-ui); color:var(--fg-1) }
.lc-head-in:hover{ border-color:var(--border) } .lc-head-in:focus{ border-color:var(--accent); outline:none; background:var(--bg-input, var(--bg-1)) }
.lc-head-t{ flex:1; font:700 13.5px/1.2 var(--mk-font-ui); color:var(--fg-1) }
.lc-head-k{ order:3; flex:1 0 100%; padding-inline-start:40px; font:500 11.5px/1.2 var(--mk-font-ui); color:var(--fg-3) }
.lc-head-a{ display:inline-flex; gap:4px }
.lc-head-a .lc-sq{ width:32px; height:32px; flex-basis:32px }
.lc-xy{ display:grid; grid-template-columns:1fr 1fr; gap:6px; align-items:center }
.lc-xy4{ grid-template-columns:repeat(4, minmax(0,1fr)) }
.lc-nf{ display:flex; align-items:center; gap:6px; height:32px; padding:0 8px; border-radius:8px; border:1px solid var(--border); background:var(--bg-input, var(--bg-1)); min-width:0 }
.lc-nf:focus-within{ border-color:var(--accent) }
.lc-nf > em{ font-style:normal; font:700 11px/1 var(--mk-font-ui); color:var(--fg-3); cursor:ew-resize; user-select:none; flex:0 0 auto; min-width:12px; display:inline-flex; align-items:center }
.lc-nf > em .mi{ font-size:14px }
.lc-nf > input{ flex:1; min-width:0; border:0; background:transparent; outline:none; color:var(--fg-1); font:600 12.5px/1 var(--mk-font-ui); font-variant-numeric:tabular-nums; padding:0 }
.lc-nf > i{ font-style:normal; font:600 11px/1 var(--mk-font-ui); color:var(--fg-3) }
.lc-nf-sel{ padding:0; border:0; background:none; height:auto }
.lc-full{ width:100% }
.lc-nf-sel .cs{ width:100% }
.lc-cs .cs-btn{ min-height:32px; height:32px; border-radius:8px; font-size:12.5px }
.lc-ratio{ width:32px; height:32px; border-radius:8px; border:1px solid var(--border); background:var(--bg-1); color:var(--fg-3); display:grid; place-items:center; cursor:pointer; justify-self:start; padding:0 }
.lc-ratio.on{ background:var(--accent-soft); color:var(--accent-text); border-color:transparent }
.lc-ratio .mi{ font-size:16px }
.lc-row{ display:flex; align-items:center; gap:8px; min-height:32px }
.lc-lbl{ flex:0 0 auto; min-width:64px; font:600 12px/1.2 var(--mk-font-ui); color:var(--fg-2) }
.lc-row-v{ flex:1; min-width:0; display:flex; justify-content:flex-end }
.lc-row-v > .lc-seg{ width:100% }
.lc-in{ width:100%; height:32px; border-radius:8px; border:1px solid var(--border); background:var(--bg-input, var(--bg-1)); color:var(--fg-1); padding:0 10px; font:500 12.5px/1 var(--mk-font-ui); box-sizing:border-box }
.lc-in:focus, .lc-ta:focus{ border-color:var(--accent); outline:none }
.lc-ta{ width:100%; box-sizing:border-box; border-radius:9px; border:1px solid var(--border); background:var(--bg-input, var(--bg-1)); color:var(--fg-1); padding:8px 10px; font:500 12.5px/1.45 var(--mk-font-ui); resize:vertical }
.lc-seg{ display:flex; gap:2px; padding:3px; border-radius:9px; background:var(--bg-3, var(--bg-2)) }
.lc-seg > button{ flex:1; min-width:0; height:28px; border:0; border-radius:7px; background:none; color:var(--fg-2); font:600 11.5px/1 var(--mk-font-ui); cursor:pointer; display:grid; place-items:center; padding:0 4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.lc-seg > button:hover{ color:var(--fg-1) }
.lc-seg > button.on{ background:var(--bg-1); color:var(--fg-1); box-shadow:0 1px 2px rgba(0,0,0,.08) }
.lc-seg.icons > button .mi{ font-size:17px }
.lc-algn{ display:flex; gap:2px; padding:3px; border-radius:9px; background:var(--bg-3, var(--bg-2)) }
.lc-algn > button{ flex:1; height:30px; border:0; background:none; border-radius:7px; display:grid; place-items:center; cursor:pointer; color:var(--fg-2); padding:0 }
.lc-algn > button:hover:not([disabled]){ background:var(--bg-1); color:var(--fg-1) }
.lc-algn > button.on{ background:var(--bg-1); color:var(--accent-text) }
.lc-algn > button[disabled]{ opacity:.35; cursor:default }
.lc-auto{ display:flex; gap:10px; align-items:flex-start }
.lc-al9{ display:grid; grid-template-columns:repeat(3, 22px); gap:4px; padding:6px; border-radius:9px; background:var(--bg-3, var(--bg-2)); flex:0 0 auto }
.lc-al9 > button{ width:22px; height:22px; border-radius:5px; display:grid; place-items:center; cursor:pointer; border:0; background:none; padding:0 }
.lc-al9 > button::after{ content:''; width:5px; height:5px; border-radius:50%; background:var(--fg-3) }
.lc-al9 > button:hover{ background:var(--bg-1) }
.lc-al9 > button.on{ background:var(--bg-1) } .lc-al9 > button.on::after{ width:12px; height:4px; border-radius:2px; background:var(--lc-blue) }
.lc-auto-f{ flex:1; display:flex; flex-direction:column; gap:6px; min-width:0 }
.lc-tg{ display:flex; align-items:center; gap:10px; min-height:30px; border:0; background:none; padding:0; cursor:pointer; color:var(--fg-1); font:500 12.5px/1.3 var(--mk-font-ui); text-align:start }
.lc-tg > i{ width:32px; height:18px; border-radius:999px; background:var(--bg-3, #d4d4d8); position:relative; flex:0 0 32px; transition:background .15s }
.lc-tg > i::after{ content:''; position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.25); transition:left .15s }
.lc-tg.on > i{ background:var(--accent) } .lc-tg.on > i::after{ left:16px }
[dir="rtl"] .lc-tg > i::after{ left:auto; right:2px } [dir="rtl"] .lc-tg.on > i::after{ right:16px }
.lc-mini{ width:26px; height:26px; border-radius:7px; border:0; background:none; color:var(--fg-2); display:grid; place-items:center; cursor:pointer; padding:0; flex:0 0 26px }
.lc-mini:hover{ background:var(--bg-2); color:var(--fg-1) }
.lc-mini .mi{ font-size:17px }
.lc-sws{ display:flex; flex-wrap:wrap; gap:5px }
.lc-sw{ width:24px; height:24px; border-radius:7px; border:1px solid var(--border); padding:2px; background:var(--bg-1); cursor:pointer }
.lc-sw > i{ display:block; width:100%; height:100%; border-radius:4px }
.lc-sw.is-none > i{ background:linear-gradient(135deg, transparent 45%, var(--mk-danger, #C81E1E) 45% 55%, transparent 55%) !important }
.lc-sw.on{ border-color:var(--accent); box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent) }
.lc-cf{ display:flex; min-width:0; flex:1; justify-content:flex-end }
.lc-cf .mci{ max-width:100% }
.lc-sides{ display:flex; gap:2px; padding:3px; border-radius:9px; background:var(--bg-3, var(--bg-2)) }
.lc-sides > button{ width:30px; height:26px; border:0; border-radius:6px; background:none; color:var(--fg-3); display:grid; place-items:center; cursor:pointer; padding:0 }
.lc-sides > button.on{ background:var(--bg-1); color:var(--accent-text) }
.lc-sides .mi{ font-size:17px }
.lc-fx{ display:flex; flex-direction:column; gap:6px; padding:8px; border-radius:10px; background:var(--bg-2) }
.lc-fx.is-off{ opacity:.55 }
.lc-fx-h{ display:flex; align-items:center; gap:4px }
.lc-fx-h > .lc-nf-sel{ flex:1 }
.lc-det > summary{ cursor:pointer; font:600 12px/1.2 var(--mk-font-ui); color:var(--fg-2); padding:4px 0; list-style-position:inside }
.lc-det > .lc-xy{ margin-top:6px }
.lc-acts{ display:flex; flex-wrap:wrap; gap:6px }
.lc-act{ display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 12px; border-radius:9px; border:1px solid var(--border); background:var(--bg-1); color:var(--fg-1); font:600 12.5px/1 var(--mk-font-ui); cursor:pointer }
.lc-act:hover{ background:var(--bg-2) }
.lc-act.is-danger{ color:var(--mk-danger, #C81E1E) }
.lc-act .mi{ font-size:16px }
.lc-rp-b > .lc-act{ margin:10px 14px }
.lc-note{ display:flex; align-items:flex-start; gap:8px; padding:12px 14px; font:500 12px/1.45 var(--mk-font-ui); color:var(--fg-2) }
.lc-note .mi{ font-size:16px; color:var(--fg-3); flex:0 0 auto; margin-top:1px }
.lc-note.sm{ padding:0; font-size:11.5px; color:var(--fg-3) }
.lc-srcbox{ display:flex; flex-direction:column; gap:6px; padding:8px; border-radius:10px; border:1px solid var(--border); background:var(--bg-2) }
.lc-srcbox > b{ font:800 18px/1.1 var(--mk-font-ui); color:var(--fg-1) }
.lc-path{ display:flex; align-items:center; flex-wrap:wrap; gap:2px; font:600 12px/1.2 var(--mk-font-ui); color:var(--fg-1) }
.lc-path > span:not(.mi){ padding:3px 7px; border-radius:6px; background:var(--bg-1); border:1px solid var(--border) }
.lc-path > .mi{ font-size:14px; color:var(--fg-3) }
.lc-warn{ display:inline-flex; align-items:center; gap:5px; font:600 11.5px/1.2 var(--mk-font-ui); color:var(--mk-danger, #C81E1E) }
.lc-warn .mi{ font-size:14px }
.lc-presets{ display:flex; flex-wrap:wrap; gap:5px }
.lc-chipb{ display:inline-flex; flex-direction:column; align-items:flex-start; gap:2px; padding:6px 9px; border-radius:9px; border:1px solid var(--border); background:var(--bg-1); color:var(--fg-1); font:600 12px/1.1 var(--mk-font-ui); cursor:pointer }
.lc-chipb > small{ font:500 10.5px/1 var(--mk-font-ui); color:var(--fg-3); font-variant-numeric:tabular-nums }
.lc-chipb.on{ border-color:var(--accent); background:var(--accent-soft); color:var(--accent-text) }
.lc-icgrid{ display:grid; grid-template-columns:repeat(8, minmax(0,1fr)); gap:3px }
.lc-icgrid > button{ aspect-ratio:1; border:0; border-radius:7px; background:none; color:var(--fg-2); display:grid; place-items:center; cursor:pointer; padding:0 }
.lc-icgrid > button:hover{ background:var(--bg-2); color:var(--fg-1) }
.lc-icgrid > button.on{ background:var(--accent-soft); color:var(--accent-text) }
.lc-icgrid .mi{ font-size:19px }
.lc-var{ margin:10px 14px; padding:10px; border-radius:12px; border:1px solid var(--border); display:flex; flex-direction:column; gap:7px }
.lc-var.is-live{ border-color:color-mix(in srgb, var(--accent) 45%, var(--border)) }
.lc-var-h{ display:flex; align-items:center; gap:8px }
.lc-var-h > b{ font:800 14px/1 var(--mk-font-ui); color:var(--fg-1); white-space:nowrap; max-width:45%; overflow:hidden; text-overflow:ellipsis }
.lc-var-nm{ font-weight:700 }
.lc-var-r{ display:flex; align-items:center; gap:8px }
.lc-var-r > .lc-lbl{ min-width:58px }
.lc-var-f{ display:flex; align-items:center; justify-content:space-between }
.lc-var-f .lc-sq{ width:30px; height:30px; flex-basis:30px }
.lc-src-row{ display:flex; align-items:center; gap:10px; width:100%; padding:8px; border-radius:10px; border:1px solid var(--border); background:var(--bg-1); color:var(--fg-1); cursor:pointer; text-align:start }
.lc-src-row:hover{ background:var(--bg-2) }
.lc-src-row > .mi:first-child{ font-size:18px; color:var(--fg-3) }
.lc-src-m{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px }
.lc-src-m > b{ font:700 12.5px/1.2 var(--mk-font-ui) }
.lc-src-m > small{ font:500 11px/1.3 var(--mk-font-ui); color:var(--fg-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }

/* ── the slide strip (decks, 065-127) ────────────────────────────────────── */
.lc-strip{ flex:0 0 auto; display:flex; align-items:center; gap:10px; padding:10px 14px; border-top:1px solid var(--divider, var(--border)); background:var(--bg-1); overflow-x:auto; scrollbar-width:thin }
.lc-strip-h{ font:700 11px/1 var(--mk-font-ui); letter-spacing:.07em; text-transform:uppercase; color:var(--fg-3); flex:0 0 auto }
.lc-th{ position:relative; flex:0 0 auto; width:148px; height:84px; border-radius:9px; border:2px solid var(--border); background:#fff; padding:0; overflow:hidden; cursor:pointer }
.lc-th.on{ border-color:var(--lc-blue) }
.lc-th .lc-thumb{ position:absolute; inset:0; border-radius:0 }
.lc-th-n{ position:absolute; left:5px; top:4px; z-index:2; font:800 10px/1 var(--mk-font-ui); color:#fff; background:rgba(13,37,48,.72); border-radius:5px; padding:2px 5px }
.lc-th.add{ display:grid; place-items:center; border-style:dashed; background:var(--bg-1); color:var(--fg-3) }
.lc-th.add .mi{ font-size:22px }
/* thumbnails — one painter, scaled */
.lc-thumb{ position:relative; display:block; overflow:hidden; width:100%; height:100% }
.lc-thumb-in{ position:absolute; left:0; top:0; transform-origin:0 0; pointer-events:none; overflow:hidden }

/* ── present ─────────────────────────────────────────────────────────────── */
.lc-present{ position:fixed; inset:0; z-index:900; background:#05080b; display:flex; flex-direction:column }
.lc-pr-st{ flex:1; min-height:0; display:flex; align-items:center; justify-content:center; overflow:hidden }
.lc-pr-sheet{ position:relative; flex:0 0 auto; transform-origin:center; overflow:hidden }
.lc-pr-bar{ height:64px; display:flex; align-items:center; justify-content:center; gap:12px; padding-bottom:env(safe-area-inset-bottom) }
.lc-pr-bar .lc-btn{ background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.14) }
.lc-pr-n{ font:700 13px/1 var(--mk-font-ui); color:rgba(255,255,255,.8); font-variant-numeric:tabular-nums }

/* ── menus + toast ──────────────────────────────────────────────────────── */
.lc-menu{ position:fixed; z-index:960; min-width:220px; max-width:320px; max-height:calc(100vh - 16px); overflow:auto; padding:6px; border-radius:12px; background:var(--bg-1);
  border:1px solid var(--border); box-shadow:0 16px 40px -12px rgba(0,0,0,.35) }
.lc-menu > button{ width:100%; display:flex; align-items:center; gap:10px; height:34px; padding:0 10px; border:0; border-radius:8px; background:none; color:var(--fg-1); font:500 13px/1 var(--mk-font-ui); cursor:pointer; text-align:start }
.lc-menu > button:hover:not([disabled]), .lc-menu > button:focus-visible{ background:var(--bg-2); outline:none }
.lc-menu > button[disabled]{ color:var(--fg-3); cursor:default; height:auto; min-height:34px; padding-block:6px; line-height:1.35; white-space:normal }
.lc-menu > button.is-danger{ color:var(--mk-danger, #C81E1E) }
.lc-menu > button .mi{ font-size:17px; color:var(--fg-3); flex:0 0 auto }
.lc-menu > button > span:not(.mi){ flex:1 }
.lc-menu kbd{ font:600 11px/1 var(--mk-font-ui); color:var(--fg-3); background:none; border:0 }
.lc-menu hr{ border:0; border-top:1px solid var(--divider, var(--border)); margin:5px 2px }
.lc-toast{ position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:980; background:var(--fg-1); color:var(--bg-1); padding:10px 16px; border-radius:12px; font:600 13px/1.2 var(--mk-font-ui) }

/* ── print: a static PDF of the live file ──────────────────────────────────── */
.lc-print{ display:none }
@media print{
  body.lc-printing > *:not(.lc-print){ display:none !important }
  body.lc-printing .lc-print{ display:block }
  .lc-print-pg{ position:relative; overflow:hidden; page-break-after:always; break-after:page; -webkit-print-color-adjust:exact; print-color-adjust:exact }
}

/* ── every size (R2): tablet = side sheets from the bar · phone = full canvas + bottom toolbar ── */
.lc-tb{ display:none }
.lc-m-tablet .lc-work, .lc-m-phone .lc-work{ grid-template-columns:minmax(0,1fr) }
.lc-m-tablet .lc-lp, .lc-m-tablet .lc-rp{ position:absolute; top:0; bottom:0; z-index:20; width:min(320px, 86%); box-shadow:0 16px 40px -12px rgba(0,0,0,.3); display:none }
.lc-m-tablet .lc-lp{ left:0 } .lc-m-tablet .lc-rp{ right:0 }
.lc-m-tablet.sheet-insert .lc-lp, .lc-m-tablet.sheet-layers .lc-lp, .lc-m-tablet.sheet-design .lc-rp, .lc-m-tablet.sheet-values .lc-rp{ display:flex }
.lc-m-tablet .lc-g-panes{ display:inline-flex }
.lc-m-tablet .lc-sheet-x, .lc-m-phone .lc-sheet-x{ display:grid }
.lc-m-tablet .lc-stk{ display:none }
.lc-m-phone .lc-bar{ padding:10px 12px; gap:6px }
.lc-m-phone .lc-back-l, .lc-m-phone .lc-btn-l, .lc-m-phone .lc-stk, .lc-m-phone .lc-livechip, .lc-m-phone .lc-g-grid{ display:none }
.lc-m-phone .lc-btn{ width:36px; padding:0; justify-content:center }
.lc-m-phone .lc-back{ width:36px; padding:0; justify-content:center }
.lc-m-phone .lc-nm-t{ max-width:40vw }
/* B67 R23 (R67-095) — editing the name (a new canvas starts there) its 180 px box overflowed the squeezed name slot and lay over
   undo / redo; while editing, the slot keeps the box's width and the bar (already sideways-scrolling on a phone) scrolls */
.lc-m-phone .lc-nm:has(.lc-nm-in){ flex:0 0 auto }
.lc-m-phone .lc-lp, .lc-m-phone .lc-rp{ position:absolute; left:0; right:0; bottom:0; z-index:20; max-height:62%; border:0; border-top:1px solid var(--border);
  border-radius:18px 18px 0 0; box-shadow:0 -16px 40px -12px rgba(0,0,0,.3); display:none }
.lc-m-phone.sheet-insert .lc-lp, .lc-m-phone.sheet-layers .lc-lp, .lc-m-phone.sheet-design .lc-rp, .lc-m-phone.sheet-values .lc-rp{ display:flex }
.lc-m-phone .lc-ptabs{ padding-top:14px; position:relative }
.lc-m-phone .lc-ptabs::before{ content:''; position:absolute; top:5px; left:50%; width:36px; height:4px; border-radius:2px; background:var(--border); transform:translateX(-50%) }
.lc-m-phone .lc-tb{ display:flex; flex:0 0 auto; border-top:1px solid var(--divider, var(--border)); background:var(--bg-1); padding-bottom:env(safe-area-inset-bottom) }
.lc-tb > button{ flex:1; height:54px; border:0; background:none; color:var(--fg-2); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; font:600 10.5px/1 var(--mk-font-ui); cursor:pointer }
.lc-tb > button .mi{ font-size:21px }
.lc-m-phone.sheet-insert .lc-tb [data-lc-sheet="insert"], .lc-m-phone.sheet-layers .lc-tb [data-lc-sheet="layers"],
.lc-m-phone.sheet-design .lc-tb [data-lc-sheet="design"], .lc-m-phone.sheet-values .lc-tb [data-lc-sheet="values"]{ color:var(--accent-text) }
.lc-m-phone .lc-pal{ grid-template-columns:repeat(4, minmax(0,1fr)) }
.lc-m-phone .lc-strip{ padding:8px 10px }
.lc-m-phone .lc-th{ width:112px; height:63px }
.lc-m-phone .lc-hint{ max-width:calc(100% - 24px); white-space:normal; height:auto; min-height:32px; padding:6px 12px; text-align:center }
@media (max-height:500px) and (orientation:landscape){
  .lc-m-phone .lc-lp, .lc-m-phone .lc-rp{ left:auto; top:0; width:min(340px, 60%); max-height:none; border-radius:0; border-inline-start:1px solid var(--border) }
  .lc-m-phone .lc-tb > button{ height:44px; flex-direction:row; gap:6px }
}
@media (pointer:coarse){
  .lc-sq, .lc-btn, .lc-back, .lc-zv{ height:40px } .lc-sq{ width:40px; flex-basis:40px }
  .lc-lay{ height:40px } .lc-lay-b{ opacity:1 }
  .lc-nf{ height:36px } .lc-seg > button{ height:32px }
}

/* ══ Drive hosts the Live editors (065-116) ════════════════════════════════
   A Live file opens as a full-width slide of Drive's main content: the header, the
   family bar and the grid step aside; the editor's own bar carries the way back. */
.dr-live-host{ display:none }
.page-view[data-view="drive"].dr-editing > .page > .page-h,
.page-view[data-view="drive"].dr-editing [data-dr-switch],
.page-view[data-view="drive"].dr-editing [data-dr-pane]{ display:none !important }
.page-view[data-view="drive"].dr-editing .dr-live-host{ display:flex; flex-direction:column; flex:1; min-height:0 }
.dr-live-host > div:empty{ display:none }
.page-view[data-view="drive"].dr-edit-fill > .page{ display:flex; flex-direction:column; min-height:0; overflow:hidden; padding-block-end:12px }
.page-view[data-view="drive"].dr-edit-fill .dr-live-host > div:not(:empty){ flex:1; min-height:0; display:flex; flex-direction:column }
@media (max-width:600px), (max-height:500px) and (orientation:landscape){
  .page-view[data-view="drive"].dr-edit-fill > .page{ padding:var(--mk-nav-clear, 60px) 0 0 !important }
  .page-view[data-view="drive"].dr-edit-fill .dr-live-host{ padding:0 !important }
  .page-view[data-view="drive"].dr-edit-fill .lc{ border-radius:0; border-inline:0 }
}
/* the bar's file actions on Flowcharts, Docs and Sheets (the canvas has its own) */
.dr-fb .mi{ font-size:17px }
.dr-fb.is-pri{ background:var(--accent); color:var(--accent-fg, #fff); border-color:transparent }
@media (max-width:760px){ .dr-fb-l{ display:none } }
/* Live cards in the grid */
.dr-grid.is-masonry{ grid-auto-rows:4px; row-gap:0; align-items:start }
.dr-grid.is-masonry > .dr-card{ align-self:start }
.dr-pv-live{ background:var(--bg-3, var(--bg-2)) }
.dr-pv-live > .lc-thumb{ position:absolute; inset:0 }
.dr-pv-flow{ overflow:hidden; background:var(--bg-1) }
.dr-flow-in{ position:absolute; left:0; top:0; transform-origin:0 0; pointer-events:none }
.dr-nm-ic{ font-size:16px; color:var(--accent-text); flex:0 0 auto }
.dr-chip-at{ color:var(--fg-3); font-weight:600 }
.lc-m-phone .lc-nm{ min-width:96px; flex:1 1 auto } .lc-m-phone .lc-nm-t{ max-width:none }
.lc-m-phone .lc-g-zoom .lc-sq{ display:none }
.lc-m-tablet .lc-nm{ min-width:140px; flex:0 1 auto }

/* B67 R21 (R67-079) — directional icons follow the reading direction in Arabic, as the rest of the app already does (Audit A:
   "forward points to the reading direction"; .ent-open · .pe-card-chev · .cal-period .gantt-step · .fp-back-btn …). Each was
   the only one of its kind still pointing the LTR way: "go" chevrons, forward/back arrows, prev/next steppers, crumbs, twists. */
html[dir="rtl"] .lc-back .mi{ transform:scaleX(-1); }