/* Topbar menu icons */
.tbMenuItem > i{ color: var(--muted); }
.tbMenuItem:hover > i{ color: var(--text); }
.tbMenuItem:disabled > i{ color: var(--muted); opacity: .7; }

:root{
  /* Linear / Notion-like tokens */
  --bg: #edf1f4;
  --panel: #f6f8fb;
  --panel2: #e9eef3;

  --text: #1b2430;
  --muted: #5f6f82;
  --border: #d7dee7;
  --shadow: 0 12px 30px rgba(15,23,42,.09);
  --ring: 0 0 0 3px rgba(59,110,197,.22);

  --accent: #2563eb;
  --accent-contrast: #ffffff;
  --accent2:#0ea5e9;
  --ruler-bg: #dde4ec;
  --ruler-border: rgba(27,36,48,.20);
  --ruler-tick: rgba(27,36,48,.42);
  --ruler-text: rgba(27,36,48,.72);
  --ruler-zero: rgba(239,68,68,.95);
  --ruler-work-bg: rgba(59,110,197,.14);
  --ruler-work-edge: rgba(59,110,197,.52);
  --guide-color: rgba(56,189,248,.85);
  --guide-color-draft: rgba(56,189,248,.95);

  --danger:#ef4444;
  --warn:#f59e0b;
  --good:#16a34a;

  --font-ui: 'Nunito Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  /* Layout (base = compact for 13" laptops) */
  --topbar-h: 52px;
  --panel-w: 260px;
  --panel-w-left: var(--panel-w);
  --panel-w-right: 260px;
  --radius: 12px;
  --gap: 10px;

  /* Controls */
  --btn-h: 36px;
  --btn-font: 13px;
  --title-font: 13px;
  --body-font: 13px;

  color-scheme: light;
}

/* Big UI (touch / accessibility) */
:root.ui-big,
body.ui-big{
  --topbar-h: 64px;
  --panel-w: 320px;
  --panel-w-right: 300px;
  --btn-h: 48px;
  --btn-font: 15px;
  --title-font: 15px;
  --body-font: 15px;
  --gap: 12px;
}


/* Themes: default follows system; user selection stored in localStorage and applied via [data-theme]. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme]){
    --bg: #161d26;
    --panel: #1b2430;
    --panel2: #24303d;
    --text: #e8edf5;
    --muted: #9eacbe;
    --border: rgba(174,190,208,.24);
    --shadow: 0 18px 40px rgba(6,10,16,.46);
    --ring: 0 0 0 4px rgba(123,163,224,.34);
    --accent: #6b95db;
    --accent-contrast: #ffffff;
    --accent2:#7dc5d7;
    --ruler-bg: rgba(21,29,39,.93);
    --ruler-border: rgba(171,188,206,.38);
    --ruler-tick: rgba(214,223,235,.67);
    --ruler-text: rgba(233,239,247,.88);
    --ruler-zero: rgba(250,129,129,.93);
    --ruler-work-bg: rgba(105,148,223,.25);
    --ruler-work-edge: rgba(160,205,242,.84);
    --guide-color: rgba(117,198,231,.90);
    --guide-color-draft: rgba(147,224,236,.97);

    color-scheme: dark;
  }
}

:root[data-theme="dark"]{
  --bg: #161d26;
  --panel: #1b2430;
  --panel2: #24303d;
  --text: #e8edf5;
  --muted: #9eacbe;
  --border: rgba(174,190,208,.24);
  --shadow: 0 18px 40px rgba(6,10,16,.46);
  --ring: 0 0 0 4px rgba(123,163,224,.34);
  --accent: #6b95db;
  --accent-contrast: #ffffff;
  --accent2:#7dc5d7;
  --ruler-bg: rgba(21,29,39,.93);
  --ruler-border: rgba(171,188,206,.38);
  --ruler-tick: rgba(214,223,235,.67);
  --ruler-text: rgba(233,239,247,.88);
  --ruler-zero: rgba(250,129,129,.93);
  --ruler-work-bg: rgba(105,148,223,.25);
  --ruler-work-edge: rgba(160,205,242,.84);
  --guide-color: rgba(117,198,231,.90);
  --guide-color-draft: rgba(147,224,236,.97);

  color-scheme: dark;
}

:root[data-theme="light"]{
  --bg: #edf1f4;
  --panel: #f6f8fb;
  --panel2: #e9eef3;
  --text: #1b2430;
  --muted: #5f6f82;
  --border: #d7dee7;
  --shadow: 0 12px 30px rgba(15,23,42,.09);
  --ring: 0 0 0 3px rgba(59,110,197,.22);
  --accent: #2563eb;
  --accent-contrast: #ffffff;
  --accent2:#0ea5e9;
  --ruler-bg: #dde4ec;
  --ruler-border: rgba(27,36,48,.20);
  --ruler-tick: rgba(27,36,48,.42);
  --ruler-text: rgba(27,36,48,.72);
  --ruler-zero: rgba(239,68,68,.95);
  --ruler-work-bg: rgba(59,110,197,.14);
  --ruler-work-edge: rgba(59,110,197,.52);
  --guide-color: rgba(56,189,248,.85);
  --guide-color-draft: rgba(14,165,233,.95);

  color-scheme: light;
}

*{ box-sizing:border-box; }
html, body { height:100%; }
body{
  margin:0;
  font-family: var(--font-ui);
  font-size: var(--body-font);
  color: var(--text);
  background: var(--bg);
  overflow:hidden;
}

.noscript{
  padding:16px;
  background:#fff3cd;
  border-bottom:1px solid #ffeeba;
}

.app{
  height:100%;
  display:flex;
  flex-direction:column;
}

.topbar{
  min-height: var(--topbar-h);
  height: var(--topbar-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap: nowrap;
  gap: 10px;
  padding: 8px 12px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}

.topbar__left{
  flex: 0 0 auto;
}

.brand{ display:flex; align-items:baseline; gap:8px; white-space: nowrap; }
.brand__title{ font-weight:900; letter-spacing:.2px; }
.brand__subtitle{ font-size:12px; color:var(--muted); }

@media (max-width: 980px){
  .brand__subtitle{ display:none; }
}

.status{
  padding: 10px 14px;
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 999px;
  min-width: 220px;
  text-align:center;
  font-weight:600;
}

.topbar__right{
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:flex-end;
  flex-wrap: nowrap;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.topbar__right > *{ max-width: 100%; }

.topbar__right::-webkit-scrollbar{ height: 8px; }
.topbar__right::-webkit-scrollbar-thumb{ background: rgba(100,116,139,.35); border-radius: 999px; }

.main{
  height: auto;
  flex: 1 1 auto;
  display:grid;
  grid-template-columns: var(--panel-w-left, var(--panel-w)) minmax(0, 1fr) var(--panel-w-right, var(--panel-w));
  gap: var(--gap);
  padding: var(--gap);
  min-height:0;
}

.statusBar{
  flex: 0 0 auto;
  padding: 8px 14px;
  background: var(--panel);
  border-top: 1px solid var(--border);
}

.statusBar__inner{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.status--footer{
  flex: 1 1 auto;
  min-width: 0;
  border-radius: 10px;
  padding: 8px 10px;
  display:flex;
  align-items:center;
  gap: 8px;
}

.statusFooter__main{
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.statusFooter__meta{
  flex: 0 0 auto;
  min-width: 0;
  margin-left: auto;
  display:flex;
  align-items:flex-end;
  gap: 8px;
}

.statusCoords{
  flex: 0 1 auto;
  min-width: 0;
  font-size: 10px;
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: color-mix(in oklab, var(--muted) 90%, var(--text) 10%);
  opacity: 0.72;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: none;
}

:root.ui-big .status--footer,
body.ui-big .status--footer{
  border-radius: 12px;
  padding: 10px 12px;
  gap: 10px;
}

:root.ui-big .statusFooter__meta,
body.ui-big .statusFooter__meta{
  gap: 10px;
}

:root.ui-big .statusCoords,
body.ui-big .statusCoords{
  font-size: 11px;
}

.statusBuildMeta{
  flex: 0 0 auto;
  min-width: 0;
  align-self: flex-end;
  font-size: 9px;
  line-height: 1;
  letter-spacing: 0.02em;
  font-weight: 600;
  color: color-mix(in oklab, var(--muted) 92%, var(--text) 8%);
  opacity: 0.5;
  user-select: none;
  text-transform: none;
  font-variant-numeric: tabular-nums;
  text-align: right;
  pointer-events: none;
}

.panel{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 12px;
  overflow:auto;
}

:root.ui-big .panel,
body.ui-big .panel{ padding: 14px; }

.panel__section{ margin-bottom: 14px; }
:root.ui-big .panel__section,
body.ui-big .panel__section{ margin-bottom: 18px; }
.panel__title{
  margin: 0 0 10px 0;
  font-size: var(--title-font);
  font-weight: 800;
}
.panel__actions{ display:flex; flex-direction:column; gap:10px; }
.panel--right .panel__actions{
  flex-direction: row;
  gap: 8px;
}
.panel--right .panel__actions .btn{
  flex: 1 1 0;
  min-width: 0;
}
@media (max-width: 980px){
  .panel--right .panel__actions{
    flex-wrap: wrap;
  }
  .panel--right .panel__actions .btn{
    flex: 1 1 100%;
  }
}

.hint{
  margin-top:10px;
  color: var(--muted);
  line-height:1.35;
  font-size: 13px;
}

.workspace{
  min-height:0;
  display:flex;
}

.canvasWrap{
  position:relative;
  width:100%;
  height:100%;
  --rulerSize: 24px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;

  touch-action: none;
  user-select: none;
}

.canvasWrap.isBgEdit{
  cursor: grab;
}

.canvasWrap.isBgEdit:active{
  cursor: grabbing;
}

/* Панорамирование вида (Space+drag) */
.canvasWrap.isPanReady{
  cursor: grab;
}

.canvasWrap.isPanning{
  cursor: grabbing;
}

body.isHandPanMode #topbar,
body.isHandPanMode #leftPanel,
body.isHandPanMode #rightPanel,
body.isHandPanMode #statusBar,
body.isHandPanMode .toolDock,
body.isHandPanMode .bgDock,
body.isHandPanMode .tbMenuPanel{
  pointer-events: none !important;
  opacity: .46;
  filter: saturate(.66) contrast(.96);
}


.bgDock{
  position:absolute;
  top: calc(var(--rulerSize) + 12px);
  left: calc(var(--rulerSize) + 12px);
  z-index:50;
  padding: 10px 12px;
  background: rgba(17,24,39,.78);
  border:1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  color:#fff;
  backdrop-filter: blur(6px);
  max-width: min(640px, calc(100% - var(--rulerSize) - 20px));
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
}

.bgDock__title{
  font-size:13px;
  font-weight:700;
  margin-bottom:8px;
}

.bgDock__row{
  display:grid;
  grid-template-columns: 110px 1fr 52px;
  align-items:center;
  gap:8px;
  margin:6px 0;
}

.bgDock__row--two{ grid-template-columns: repeat(auto-fit, minmax(min(248px, 100%), 1fr)); }
.bgDock__ctrl{ display:grid; grid-template-columns: 92px 1fr 52px; align-items:center; gap:8px; min-width:0; }

.bgDock__label{
  font-size:12px;
  color: rgba(255,255,255,.86);
}

.bgDock__range{
  width:100%;
  min-width:0;
  accent-color:#60a5fa;
}

.bgDock__val{
  text-align:right;
  font-size:12px;
  color: rgba(255,255,255,.9);
}

.bgDock__actions{
  display:flex;
  gap:8px;
  margin-top:10px;
}

.bgDock__actions .btn{
  padding:8px 10px;
  border-radius:10px;
}
.bgDock__meta{
  margin-top: 2px;
  font-size: 12px;
  color: rgba(255,255,255,.88);
}


/* Tool sessions dock (Line/Fill preview) */
.toolDock{
  position:absolute;
  top: calc(var(--rulerSize) + 12px);
  left: calc(var(--rulerSize) + 12px);
  z-index:60;
  padding: 10px 12px;
  background: rgba(17,24,39,.78);
  border:1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  color:#fff;
  backdrop-filter: blur(6px);
  max-width: 360px;
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
}

.toolDock--text{
  width: min(540px, calc(100vw - 24px));
  max-width: 540px;
}

.toolDock__title{
  font-size:13px;
  font-weight:800;
  margin-bottom:6px;
}

.toolDock__meta{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color: rgba(255,255,255,.88);
  margin-bottom:10px;
}

.toolDock__sw{
  width:14px;
  height:14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.35);
  display:inline-block;
}

.toolDock__row{
  display:grid;
  grid-template-columns: 84px 1fr;
  align-items:center;
  gap:10px;
  margin:8px 0;
}

.toolDock__row--gap{
  grid-template-columns: 84px 1fr 64px;
}

.toolDock__row--pt{
  grid-template-columns: 84px 1fr 64px;
}

.toolDock__row--underlayOpacity{
  grid-template-columns: 1fr 1fr 80px;
  margin:6px 0 0;
}

.toolDock__inlinePt{
  display:grid;
  grid-template-columns: 1fr 72px 72px;
  gap:8px;
  align-items:center;
}

.toolDock__ptCompact{
  display:grid;
  grid-template-columns: minmax(0, 1fr);
  gap:8px;
  align-items:center;
}

.toolDock__ptNums{
  display:grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap:8px;
  align-items:center;
}

.toolDock__input{
  width:100%;
  min-width:0;
  min-height:32px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.12);
  color:#fff;
  padding:0 10px;
  box-sizing:border-box;
}

textarea.toolDock__input{
  min-height:78px;
  padding:8px 10px;
  resize:vertical;
  line-height:1.35;
}

.toolDock__input--num{
  width:100%;
  min-width:0;
  height:30px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.12);
  color:#fff;
  padding:0 8px;
}

.toolDock__input--hex{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  text-transform: uppercase;
}

.toolDock__swatchBtn{
  width:100%;
  height:30px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.12);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.toolDock__swatchBtn:active{ transform: translateY(1px); }

.toolDock__swatchDot{
  width:18px;
  height:18px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.28);
  box-shadow: 0 0 0 2px rgba(0,0,0,.22) inset;
  background:#111111;
}


.fontCombo{
  position:relative;
}

.fontCombo__head{
  display:grid;
  grid-template-columns: 1fr 34px;
  gap:6px;
  align-items:center;
}

.fontCombo__input{
  height:32px;
  width:100%;
  min-width:0;
}

.fontCombo__toggle{
  height:32px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  color:#fff;
  cursor:pointer;
  font-size:12px;
}

.fontCombo__panel{
  position:absolute;
  z-index:75;
  top: calc(100% + 6px);
  left:0;
  right:0;
  border:1px solid rgba(148,163,184,.45);
  border-radius:10px;
  background: rgba(15,23,42,.98);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  overflow:hidden;
}

.fontCombo__status{
  font-size:11px;
  color: rgba(255,255,255,.72);
  padding:6px 10px;
  border-bottom:1px solid rgba(255,255,255,.10);
}

.fontCombo__viewport{
  max-height:220px;
  overflow:auto;
  overscroll-behavior: contain;
}

.fontCombo__item{
  width:100%;
  text-align:left;
  border:0;
  background:transparent;
  color:#e5e7eb;
  font:600 12px/1.2 system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  padding:6px 10px;
  cursor:pointer;
}

.fontCombo__item:hover,
.fontCombo__item.isActive{
  background: rgba(59,130,246,.22);
}

.fontCombo__item.isSelected{
  box-shadow: inset 3px 0 0 rgba(125,211,252,.95);
}

.fontCombo__item.isLoading{
  opacity:.78;
}

.fontCombo__item.isReady{
  color:#ffffff;
}

.fontCombo__item.isFallback{
  opacity:.9;
}

.fontCombo.isDisabled{
  opacity:.7;
}

.toolDock__label{
  font-size:12px;
  color: rgba(255,255,255,.86);
}

.toolDock__select{
  width:100%;
  height: 32px;
  border-radius: 10px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  color:#fff;
  padding: 0 10px;
}

.toolDock__range{
  width:100%;
}

.toolDock__val{
  text-align:right;
  font-size:12px;
  color: rgba(255,255,255,.92);
}

.toolDock__check{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color: rgba(255,255,255,.92);
  user-select:none;
}

.toolDock__check input{
  width:16px;
  height:16px;
}

.toolDock__hint{
  margin-top:4px;
  font-size:11px;
  color: rgba(255,255,255,.70);
  line-height:1.25;
}

.toolDock__sep{
  height:1px;
  background: rgba(255,255,255,.12);
  margin:10px 0;
}

.toolDock__inline2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:8px;
}

.toolDock__inline2--mt8{
  margin-top:8px;
}

.toolDock__chips--mt6{
  margin-top: 6px;
}

.toolDock__hint--mt8{
  margin-top:8px;
}

.toolDock__hint--mt6{
  margin-top:6px;
}

.toolDock__hint--tight{
  margin-top:0;
}

.toolDock__inline2--w{
  grid-template-columns: 1fr 86px auto;
  align-items:center;
}

.toolDock__stack{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:0;
}

.toolDock__mt6{
  margin-top:6px;
}

.toolDock__mt8{
  margin-top:8px;
}

.toolDock__inline2--alignCenter{
  align-items:center;
}

.toolDock__distSizeId{
  min-width:60px;
  font-variant-numeric: tabular-nums;
}

.toolDock__inlineButtons{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}

.toolDock__inlineButtons--underlay{
  margin-top: 8px;
}
.toolDock__inlineButtons--underlay .btn{
  min-height: 30px;
}

.toolDock__inlineButtons--mt6{
  margin-top:6px;
}

.toolDock__googleFiltersRow{
  margin-top:8px;
}

.toolDock__rowFlexEnd{
  display:flex;
  justify-content:flex-end;
  margin-top:8px;
}

.toolDock__fileInput{
  display:none;
}

.toolDock__warnWrap{
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:space-between;
}

.toolDock__rowsMax{
  font-size:11px;
  color: rgba(255,255,255,.72);
  white-space:nowrap;
}

.toolDock__select--mini{
  height:28px;
  border-radius: 10px;
  padding: 0 8px;
  font-size:12px;
}

.toolDock__row--gradStops{
  align-items:center;
}

.toolDock__fillGradientHost{
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
}

.toolDock__gradCta{
  margin-top: 6px;
}

.toolDock__hint--gradDnd{
  margin-top: 4px;
  color: color-mix(in oklab, var(--text) 86%, var(--muted) 14%);
}

.toolDock__row--tVal{
  grid-template-columns: minmax(160px, 1fr) 86px;
  margin-top: 6px;
}

.toolDock__rowHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-width:0;
  margin-bottom:6px;
}

.toolDock__rowHead .toolDock__label{
  margin:0;
}

.toolDock__rowHead .toolDock__muted{
  justify-content:flex-end;
  text-align:right;
  white-space:nowrap;
  overflow:visible;
  text-overflow:clip;
}

.toolDock__muted--rowsHint{
  flex:0 0 auto;
}

.toolDock__chip--lockHead{
  flex:0 0 auto;
}

.toolDock__gradTList{
  margin-top: 8px;
}

.toolDock__gradStops{
  display:flex;
  flex-wrap:nowrap;
  gap:8px;
  align-items:center;
  overflow-x:auto;
  overflow-y:hidden;
  padding-bottom:2px;
  -webkit-overflow-scrolling: touch;
}

.toolDock__gradDropMarker{
  width:2px;
  min-height:38px;
  border-radius:999px;
  background: rgba(255,255,255,.55);
  box-shadow: 0 0 0 1px rgba(0,0,0,.22);
  align-self:stretch;
}

.toolDock__gradStopItem.isDragSource{
  opacity:.64;
}

.toolDock__gradStopItem.isDropTarget .toolDock__gradStopHandle{
  box-shadow: 0 0 0 2px rgba(255,255,255,.38), 0 0 0 6px rgba(0,0,0,.22);
}

.toolDock__gradStopItem{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  cursor:grab;
}

.toolDock__gradStopItem:active{
  cursor:grabbing;
}

.toolDock__gradStop{
  width:34px;
  height:34px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,.22);
  position:relative;
  cursor:grab;
  padding:0;
  outline:none;
}

.toolDock__gradStop:active{
  cursor:grabbing;
}

.toolDock__gradStopItem.isNewStop .toolDock__gradStop{
  animation: gradStopPulse .78s ease-out 1;
}

@keyframes gradStopPulse{
  0%{
    transform: scale(.84);
    box-shadow: 0 0 0 0 rgba(255,255,255,.56);
  }
  55%{
    transform: scale(1.08);
    box-shadow: 0 0 0 5px rgba(255,255,255,.22);
  }
  100%{
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255,255,255,0);
  }
}

.toolDock__gradStopTools{
  display:flex;
  align-items:center;
  gap:4px;
}

.toolDock__gradShift{
  width:20px;
  height:18px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.92);
  font-size:12px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.toolDock__gradShift:disabled{
  opacity:.42;
  cursor:default;
}

.toolDock__gradStopHandle{
  width:22px;
  height:18px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.92);
  font-size:13px;
  line-height:1;
  cursor:grab;
  user-select:none;
  display:flex;
  align-items:center;
  justify-content:center;
}
.toolDock__gradStopHandle:active{
  cursor:grabbing;
}

.toolDock__gradStopHandle.isDrag{
  opacity:.62;
}

.toolDock__gradStopHandle.isOver{
  box-shadow: 0 0 0 2px rgba(255,255,255,.38), 0 0 0 6px rgba(0,0,0,.22);
}

.toolDock__gradStop.isDrag{
  opacity:.62;
}

.toolDock__gradStop.isOver{
  box-shadow: 0 0 0 2px rgba(255,255,255,.38), 0 0 0 6px rgba(0,0,0,.22);
}

.toolDock__gradStopItem.isDropTarget .toolDock__gradShift{
  box-shadow: 0 0 0 2px rgba(255,255,255,.30), 0 0 0 5px rgba(0,0,0,.20);
}

.toolDock__gradDel{
  position:absolute;
  top:-6px;
  right:-6px;
  width:18px;
  height:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background: rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.28);
  font-size:13px;
  line-height:1;
  color:#fff;
  pointer-events:auto;
}

.toolDock__gradAdd{
  width:34px;
  height:34px;
  border-radius:999px;
  border:2px dashed rgba(255,255,255,.28);
  background: rgba(255,255,255,.06);
  color:#fff;
  font-weight:950;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.toolDock__gradAdd:active{ transform: translateY(1px); }
.toolDock__gradAdd:disabled{ opacity:.4; cursor:default; transform:none; }



.toolDock__distList{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:6px;
}

.toolDock__distRow{
  display:grid;
  grid-template-columns: 16px minmax(140px,1fr) 88px minmax(34px,max-content);
  gap:8px;
  align-items:center;
  min-width:0;
}

.toolDock__rulerRow{
  display:grid;
  grid-template-columns: minmax(140px,1fr) 42px;
  gap:8px;
  align-items:center;
  min-width:0;
}

.toolDock__distRow--edge{
  grid-template-columns: 16px 16px minmax(132px,1fr) 88px minmax(34px,max-content);
}

.toolDock__distRow--edgeArrow{
  grid-template-columns: minmax(112px,1fr) minmax(132px,1fr) 88px minmax(34px,max-content);
  gap: 6px;
}

.toolDock__edgePair{
  display:grid;
  grid-template-columns: 12px 12px 12px minmax(52px,1fr);
  align-items:center;
  gap:6px;
  min-width:0;
}

.toolDock__edgeArrow{
  font-size:11px;
  line-height:1;
  text-align:center;
  color: rgba(255,255,255,.78);
}

.toolDock__edgeGrad{
  height:10px;
  min-width:52px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.24);
  box-shadow: 0 0 0 1px rgba(0,0,0,.12) inset;
}

.toolDock__distSw{
  width:12px;
  height:12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  box-shadow: 0 0 0 2px rgba(0,0,0,.15) inset;
}

.toolDock__distSwInput{
  width:14px;
  height:14px;
  padding:0;
  border:1px solid rgba(255,255,255,.24);
  border-radius:999px;
  background:transparent;
  pointer-events:none;
  appearance:none;
  -webkit-appearance:none;
  box-shadow: 0 0 0 2px rgba(0,0,0,.15) inset;
}

.toolDock__distSwInput::-webkit-color-swatch-wrapper{
  padding:0;
}

.toolDock__distSwInput::-webkit-color-swatch{
  border:0;
  border-radius:999px;
}

.toolDock__distSwInput::-moz-color-swatch{
  border:0;
  border-radius:999px;
}

.toolDock__distLbl{
  font-size:12px;
  color: rgba(255,255,255,.9);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.toolDock__distDel{
  height:28px;
  width:34px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color:#fff;
  cursor:pointer;
}
.toolDock__distDel:active{ transform: translateY(1px); }
.toolDock__muted{
  font-size:11px;
  color: rgba(255,255,255,.72);
  display:flex;
  align-items:center;
  justify-content:flex-end;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.toolDock__muted.isWarn{
  color: var(--danger);
  font-weight: 800;
}

.toolDock__num{
  width:100%;
  height: 32px;
  border-radius: 10px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  color:#fff;
  padding: 0 10px;
  box-sizing:border-box;
}

.toolDock__chips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.toolDock__chips--seg{
  gap:6px;
}

.toolDock__chips--tight{
  gap:4px;
}

.toolDock__chip{
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.86);
  padding:4px 10px;
  border-radius:999px;
  font-size:11px;
  cursor:pointer;
  user-select:none;
}

.toolDock__chip--seg{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:30px;
  padding:4px 9px;
}

.toolDock__chipIcon{
  width:14px;
  height:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  opacity:.9;
}

.toolDock__chipText{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.toolDock__chip.isOn{
  background: rgba(99,102,241,.35);
  border-color: rgba(99,102,241,.55);
  color:#fff;
}

.toolDock__chip:active{
  transform: translateY(1px);
}

.toolDock__chip.isDisabled{
  opacity:.45;
  pointer-events:none;
}

.toolDock__seg{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
}

.toolDock__seg--wrap{
  flex-wrap:wrap;
}

.toolDock__segBtn{
  flex:0 1 auto;
  min-width:0;
}

.toolDock__segBtn--compact{
  min-height:30px;
  padding:4px 8px;
}

.toolDock__segBtn--size{
  min-height:30px;
  padding:4px 8px;
  flex:0 0 auto;
}

.toolDock__row--gapCompact{
  grid-template-columns: 84px minmax(120px,1fr) 86px 56px;
}

.toolDock__num--gap{
  min-height:30px;
  height:30px;
  padding:0 8px;
  text-align:right;
  justify-self:end;
}

.toolDock__row--stack{
  grid-template-columns:minmax(0,1fr);
  align-items:stretch;
  gap:6px;
}

.toolDock__stackTop{
  display:grid;
  grid-template-columns: 84px minmax(0, 96px) auto;
  gap:8px;
  align-items:center;
  min-width:0;
}

.toolDock__stackTop--angle{
  grid-template-columns: 84px minmax(0, 90px) auto;
}

.toolDock__stackRange{
  min-width:0;
}

.toolDock__stackRange .toolDock__range{
  width:100%;
}

.toolDock__range--long{
  appearance:none;
  -webkit-appearance:none;
  border:0;
  background:transparent;
  box-shadow:none;
  width:100%;
  min-height:34px;
  padding:6px 0;
}

.toolDock__row--angle{
  grid-template-columns: 84px minmax(120px,1fr) 72px 56px;
  align-items:center;
}

.toolDock__num--angle{
  min-height:30px;
  height:30px;
  padding:0 8px;
  text-align:right;
  justify-self:end;
}

.toolDock__unit,
.toolDock__suffix{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  min-height:30px;
  height:30px;
  white-space:nowrap;
  box-sizing:border-box;
  font-size:12px;
  font-variant-numeric: tabular-nums;
}

.toolDock__unit{
  min-width:34px;
  justify-content:center;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.92);
}

.toolDock__suffix{
  color: rgba(255,255,255,.82);
  padding:0 2px;
}

.toolDock__suffix--plain{
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

.toolDock__suffix--rows{
  font-size:11px;
  overflow:visible;
  text-overflow:clip;
}

.toolDock__gradMini{
  margin-top:6px;
  height:18px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background: linear-gradient(90deg, #2d6cdf 0%, #4f8cff 100%);
  box-shadow: 0 0 0 1px rgba(0,0,0,.12) inset;
}

.toolDock__inline2--gradUnits{
  grid-template-columns: minmax(0, 1fr) auto;
  align-items:center;
}

.toolDock__hint--indent{
  margin-left:94px;
}

.toolDock__actions{
  display:flex;
  gap:8px;
  margin-top:10px;
  position:sticky;
  bottom: env(safe-area-inset-bottom, 0px);
  background: rgba(17,24,39,.92);
  padding-top:8px;
  padding-bottom:4px;
  border-top:1px solid rgba(255,255,255,.10);
  z-index:2;
}

.toolDock__actions .btn{
  padding:8px 12px;
  border-radius:12px;
  font-weight:800;
  box-shadow: 0 2px 8px rgba(2, 8, 23, .16);
}

.toolDock__actions .btn--primary{
  border-color: color-mix(in oklab, var(--accent) 60%, var(--border) 40%);
  background:
    linear-gradient(135deg,
      color-mix(in oklab, var(--accent) 74%, #ffffff 26%) 0%,
      color-mix(in oklab, var(--accent) 88%, #0f172a 12%) 100%);
  color:#fff;
  box-shadow: 0 7px 16px color-mix(in oklab, var(--accent) 34%, transparent), inset 0 1px 0 rgba(255,255,255,.25);
}

.toolDock__actions .btn--primary:hover{
  filter:none;
  transform: translateY(-1px);
}

.toolDock__actions .btn--primary:active{
  transform: translateY(0);
}

.toolDock__actions .btn--ghost{
  border-color: color-mix(in oklab, var(--text) 18%, var(--border) 82%);
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--panel2) 86%, transparent 14%) 0%,
    color-mix(in oklab, var(--panel) 86%, transparent 14%) 100%);
  color: var(--text);
  box-shadow: inset 0 1px 0 color-mix(in oklab, #ffffff 16%, transparent), 0 2px 8px rgba(2, 8, 23, .12);
}

.toolDock__actions .btn--ghost:hover{
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--panel2) 92%, transparent 8%) 0%,
    color-mix(in oklab, var(--panel) 92%, transparent 8%) 100%);
}

.toolDock__collapse{
  margin-top:8px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  overflow:hidden;
}

.toolDock__collapseSummary{
  cursor:pointer;
  list-style:none;
  padding:8px 10px;
  font-size:12px;
  font-weight:700;
  color: rgba(255,255,255,.9);
  background: rgba(255,255,255,.05);
}

.toolDock__collapseSummary::-webkit-details-marker{
  display:none;
}

.toolDock__collapseBody{
  padding:8px 10px;
}

.toolDock--text .toolDock__collapseBody{
  padding:10px 12px;
}

.canvasWrap.isToolSession{
  /* чтобы было понятно, что мы в режиме предпросмотра */
  outline: 2px solid rgba(99,102,241,.25);
  outline-offset: 2px;
}


/* --- Линейки измерения (как в Photoshop) --- */
.measureRulers{
  position:absolute;
  left:0;
  top:0;
  right:0;
  bottom:0;
  z-index:15;
  pointer-events:none;
}

.measureRulers__corner{
  position:absolute;
  left:0;
  top:0;
  width: var(--rulerSize);
  height: var(--rulerSize);
  background: var(--ruler-bg);
  border-right: 1px solid var(--ruler-border);
  border-bottom: 1px solid var(--ruler-border);
  cursor: crosshair;
  z-index: 2;
  touch-action: none;
  pointer-events: auto;
}
#rulerCorner{
  pointer-events: auto;
  touch-action: none;
  z-index: 2;
}

.measureRulers__top{
  position:absolute;
  left: var(--rulerSize);
  top:0;
  right:0;
  height: var(--rulerSize);
  background: var(--ruler-bg);
  border-bottom: 1px solid var(--ruler-border);
  pointer-events:auto;
}

.measureRulers__left{
  position:absolute;
  left:0;
  top: var(--rulerSize);
  bottom:0;
  width: var(--rulerSize);
  background: var(--ruler-bg);
  border-right: 1px solid var(--ruler-border);
  pointer-events:auto;
}

/* Основной холст смещаем, чтобы освободить место под линейки */
#canvas{
  position:absolute;
  left: var(--rulerSize);
  top: var(--rulerSize);
  width: calc(100% - var(--rulerSize));
  height: calc(100% - var(--rulerSize));
  display:block;
  z-index:10;
}

/* Холст для эффекта «блеска» поверх режима «Страз» */
#sparkleCanvas{
  position:absolute;
  left: var(--rulerSize);
  top: var(--rulerSize);
  width: calc(100% - var(--rulerSize));
  height: calc(100% - var(--rulerSize));
  display:block;
  z-index:12;
  pointer-events:none;
}

#uiCanvas{
  position:absolute;
  left: var(--rulerSize);
  top: var(--rulerSize);
  width: calc(100% - var(--rulerSize));
  height: calc(100% - var(--rulerSize));
  display:block;
  z-index:13;
  pointer-events:none;
}

.canvasHud{
  position:absolute;
  left: calc(var(--rulerSize) + 10px);
  right:10px;
  bottom:10px;
  display:flex;
  justify-content:flex-end;
  gap:10px;
  pointer-events:none;
  z-index:30;
}

.canvasHud > div{
  background: transparent;
  color: inherit;
  border-radius: 0;
  padding: 0;
  font-size: inherit;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.canvasHud__right{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  overflow: visible;
  text-overflow: clip;
}

.canvasHud__handBtn.btn.btn--ghost.btn--icon{
  width:44px;
  min-width:44px;
  height:44px;
  padding: 0;
  border-radius:12px;
  border:2px solid color-mix(in oklab, var(--border) 78%, var(--text) 22%);
  background: color-mix(in oklab, var(--panel) 84%, var(--panel2) 16%);
  color: var(--text);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  font-weight: 600;
  line-height:1;
  cursor:pointer;
  pointer-events:auto;
  flex:0 0 auto;
  box-shadow: 0 8px 20px rgba(15,23,42,.24);
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .05s ease, opacity .16s ease, box-shadow .2s ease;
}

.canvasHud__handBtn.btn.btn--ghost.btn--icon i{
  font-size: 24px;
  margin-right: 0 !important;
}

.canvasHud__handBtn.btn.btn--ghost.btn--icon:hover{
  background: color-mix(in oklab, var(--panel2) 74%, var(--panel) 26%);
  border-color: color-mix(in oklab, var(--accent) 42%, var(--border) 58%);
  color: var(--text);
  box-shadow: 0 10px 24px rgba(15,23,42,.28);
}

.canvasHud__handBtn.btn.btn--ghost.btn--icon:active{
  transform: translateY(1px);
  background: color-mix(in oklab, var(--panel2) 82%, var(--panel) 18%);
}

.canvasHud__handBtn.btn.btn--ghost.btn--icon[aria-pressed="true"]{
  background: color-mix(in oklab, var(--accent) 16%, var(--panel2) 84%);
  border-color: color-mix(in oklab, var(--accent) 62%, var(--border) 38%);
  color: color-mix(in oklab, var(--text) 76%, var(--accent) 24%);
  box-shadow: var(--ring), 0 10px 24px rgba(15,23,42,.30);
}

.canvasHud__handBtn.btn.btn--ghost.btn--icon:disabled{
  opacity:.48;
  cursor:not-allowed;
  transform:none;
  box-shadow: none;
}

:root.ui-big .canvasHud__handBtn.btn.btn--ghost.btn--icon,
body.ui-big .canvasHud__handBtn.btn.btn--ghost.btn--icon{
  width:52px;
  min-width:52px;
  height:52px;
  border-radius:14px;
}

:root.ui-big .canvasHud__handBtn.btn.btn--ghost.btn--icon i,
body.ui-big .canvasHud__handBtn.btn.btn--ghost.btn--icon i{
  font-size: 28px;
}

:root[data-theme="light"] .canvasHud__handBtn.btn.btn--ghost.btn--icon{
  background: color-mix(in oklab, var(--panel) 88%, var(--bg) 12%);
  border-color: color-mix(in oklab, var(--border) 84%, var(--text) 16%);
  box-shadow: 0 9px 20px rgba(15,23,42,.24);
}

:root[data-theme="dark"] .canvasHud__handBtn.btn.btn--ghost.btn--icon{
  background: color-mix(in oklab, var(--panel) 80%, var(--bg) 20%);
  border-color: color-mix(in oklab, var(--border) 74%, var(--text) 26%);
  box-shadow: 0 0 0 1px rgba(107,149,219,.22), 0 0 18px rgba(107,149,219,.24), 0 8px 18px rgba(2,6,23,.54);
}

:root[data-theme="dark"] .canvasHud__handBtn.btn.btn--ghost.btn--icon:hover{
  box-shadow: 0 0 0 1px rgba(107,149,219,.28), 0 0 24px rgba(107,149,219,.34), 0 10px 20px rgba(2,6,23,.6);
}

.perfHud{
  position: absolute;
  top: calc(var(--rulerSize) + 8px);
  right: 10px;
  z-index: 40;
  pointer-events: none;
  max-width: min(340px, calc(100% - var(--rulerSize) - 20px));
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(17,24,39,.8);
  color: #fff;
  font-size: 12px;
  line-height: 1.4;
  padding: 8px 10px;
  white-space: pre-line;
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
}

.btn{
  height: var(--btn-h);
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--accent);
  color: #fff;
  font-weight: 800;
  font-size: var(--btn-font);
  cursor:pointer;
}
.btn:hover{ filter: brightness(0.98); }
.btn:active{ transform: translateY(1px); }

.btn--ghost{
  background: transparent;
  color: var(--text);
  border:1px solid var(--border);
}
.btn--wide{ width:100%; }

.btn--icon{
  width: var(--btn-h);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
}


/* Font Awesome (optional) */
.fa-fw{ width: 1.25em; }

/* Normalize icon sizes inside our controls */
.btn--icon > i{ font-size: 18px; line-height: 1; margin-right: 0 !important; }
.toolBtn__icon > i{ font-size: 16px; line-height: 1; }
.layerItem__btn > i{ font-size: 14px; line-height: 1; }
.toolDock__gradStopHandle > i,
.toolDock__gradAdd > i,
.toolDock__gradDel > i{ font-size: 12px; line-height: 1; }

.btn--sm{
  height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  font-size: 13px;
}

.zoomRow{
  display: grid;
  grid-template-columns: var(--btn-h) 1fr var(--btn-h);
  gap: 10px;
  align-items: center;
}

#zoomRange{
  width: 100%;
}

.zoomMeta{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}

.zoomMeta__label{
  font-weight: 900;
}

.chipRow{ display:flex; gap:10px; flex-wrap:wrap; }
.chip{
  height: var(--btn-h);
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel);
  font-weight:800;
  cursor:pointer;
  transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.chip:hover{ background: var(--panel2); }
.chip:disabled{
  opacity: .62;
  cursor: not-allowed;
  box-shadow: none;
}
.chip--active{
  border-color: rgba(37,99,235,.45);
  box-shadow: var(--ring);
}
.chipRow--paletteSet{
  gap: 8px;
}
.chip--paletteSet{
  min-height: 30px;
  height: auto;
  padding: 7px 12px;
  font-size: 12px;
  line-height: 1.15;
}
.paletteSetHint{
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.35;
}
.paletteSetHint--warn{
  color: color-mix(in oklab, #ef4444 62%, var(--text) 38%);
}

.toolGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.toolBtn{
  height: var(--btn-h);
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--panel);
  font-weight:800;
  cursor:pointer;
  transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.toolBtn:hover{ background: var(--panel2); }
.toolBtn--active{
  border-color: rgba(14,165,233,.55);
  box-shadow: var(--ring);
}

.btn.isLocked,
.toolBtn.isLocked{
  position: relative;
  cursor: pointer;
  opacity: .82;
  border-style: dashed;
}
.btn.isLocked::after,
.toolBtn.isLocked::after{
  content: '🔒';
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 12px;
  line-height: 1;
  pointer-events: none;
  opacity: .9;
}
.btn.isLocked:hover,
.toolBtn.isLocked:hover{
  opacity: .95;
}
.btn.isDisabled,
.toolBtn.isDisabled{
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
}

.layerList{ display:flex; flex-direction:column; gap:10px; }
.layerItem{
  padding: 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--panel);
  position: relative;
  display:flex;
  flex-direction:column;
  gap: 6px;
  transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
}

:root.ui-big .layerItem,
body.ui-big .layerItem{ padding: 12px; }
.layerItem:hover{ background: var(--panel2); }
.layerItem--active{
  border-color: rgba(37,99,235,.55);
  box-shadow: var(--ring);
}
.layerItem__name{ font-weight:900; }
.layerItem__meta{ color: var(--muted); font-size: 13px; margin-top:4px; }

.layerItem__top{ display:flex; align-items:center; gap: 8px; }
.layerItem__title{
  flex:1;
  font-weight: 950;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.layerItem__btns{ display:flex; gap: 6px; flex-wrap: nowrap; }
.layerItem__btn{
  width: 30px;
  height: 30px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: transparent;
  font-weight: 950;
  cursor: pointer;
  line-height: 1;
}

:root.ui-big .layerItem__btn,
body.ui-big .layerItem__btn{
  width: 36px;
  height: 36px;
  border-radius: 12px;
}
.layerItem__btn:disabled{ opacity: .45; cursor: not-allowed; }
.layerItem__btn--drag{ cursor: grab; }
.layerItem__btn--drag:active{ cursor: grabbing; }

.layerItem--bg{
  background: var(--panel2);
}
.layerItem.isHidden{ opacity: .55; }

.layerItem.isDropBefore::before{
  content:'';
  position:absolute;
  left: 12px;
  right: 12px;
  top: 0;
  height: 4px;
  border-radius: 999px;
  background: rgba(37,99,235,.55);
}
.layerItem.isDropAfter::after{
  content:'';
  position:absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 4px;
  border-radius: 999px;
  background: rgba(37,99,235,.55);
}

/* =========================================================
   Phone Blocker — улучшенный внешний вид (светлый, контрастный)
   ========================================================= */

.phoneBlocker{
  position: fixed;
  inset: 0;

  /* Светлый градиентный фон — выглядит как “продукт”, а не “баг” */
  background:
    radial-gradient(900px circle at 12% 0%, rgba(37,99,235,.20), transparent 55%),
    radial-gradient(800px circle at 110% 18%, rgba(14,165,233,.18), transparent 55%),
    linear-gradient(180deg, #f8fafc 0%, #eef2ff 42%, #f6f7fb 100%);

  color: #111827;

  overflow: auto;
  -webkit-overflow-scrolling: touch;
    overflow-x: hidden;
  width: 100%;
  max-width: 100%;

  display:flex;
  align-items: flex-start;
  justify-content: center;

  padding:
    max(16px, env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right))
    max(16px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));

  z-index: 9999;

  min-height: 100vh;
  height: 100dvh;
    overflow-x: clip;
  /* fallback для старых */
  overflow-x: hidden;

}

.phoneCard{
  width: min(640px, 100%);
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(17,24,39,.10);
  border-radius: 20px;
  padding: 18px;
  box-shadow: 0 25px 80px rgba(17,24,39,.18);
    max-width: 100%;

  margin: 18px auto;
  backdrop-filter: blur(8px);
}

.phoneHero{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(37,99,235,.08);
  border: 1px solid rgba(37,99,235,.14);
  margin-bottom: 14px;
}

.phoneHero__icon{
  width: 44px;
  height: 44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 14px;
  background: rgba(37,99,235,.12);
  border: 1px solid rgba(37,99,235,.16);
  font-size: 22px;
}

.phoneHero__kicker{
  font-weight: 900;
  letter-spacing: .2px;
}
.phoneHero__sub{
  margin-top: 2px;
  color: #475569;
  font-size: 14px;
}

.phoneTitle{
  font-size: 20px;
  font-weight: 950;
  margin: 0 0 8px 0;
  letter-spacing: .2px;
}

.phoneText{
  margin: 0 0 12px 0;
  color: #334155;
  line-height: 1.5;
  font-size: 15px;
}

.phoneActions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top: 10px;
}

.phoneActions--primary{
  margin-top: 12px;
}

.phoneActions--primary .btn{
  width: 100%;
  justify-content: center;
}

.phoneDetails{
  margin-top: 12px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(2,6,23,.04);
  border: 1px solid rgba(17,24,39,.10);
  color: #0f172a;
  font-size: 14px;
  line-height: 1.5;
  display:none;
}

.phoneDetails.is-open{ display:block; }

.phoneDetails__title{
  font-weight: 950;
  margin-bottom: 8px;
}

.phoneDetails__text{
  margin-bottom: 10px;
  color: #0f172a;
}

.phoneDetails__list{
  margin: 0;
  padding-left: 18px;
}
.phoneDetails__list li{
  margin: 6px 0;
}

.phoneDetails__kv{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom: 10px;
}
.phoneDetails__k{
  color: #334155;
}
.phoneDetails__v{
  font-weight: 950;
}

.phoneDetails__pre{
      overflow-x: auto;     /* пусть скроллит ВНУТРИ, а не страницу */
  max-width: 100%;
  margin: 0;
  padding: 10px;
  border-radius: 12px;

  /* Диагностика должна быть читабельной */
  background: #0b1220;
  color: #e5e7eb;

  border: 1px solid rgba(15,23,42,.35);
  overflow:auto;
  max-height: 260px;

  white-space: pre-wrap;
  word-break: break-word;

  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
    overflow-wrap: anywhere;

}

.phoneDetails__row{
  margin-top: 10px;
  display:flex;
  gap:10px;
  justify-content:flex-end;
}

.phoneToast{
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: max(18px, env(safe-area-inset-bottom));
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(17,24,39,.92);
  color: #fff;
  font-weight: 950;
  border: 1px solid rgba(0,0,0,.12);
  opacity: 0;
  transition: opacity .18s ease;
  pointer-events:none;
  text-align: center;
}
.phoneToast.is-show{
  opacity: 1;
}



/* Responsive */
@media (max-width: 980px){
  :root{
    --panel-w: 260px;
    --panel-w-right: 244px;
  }
  body.ui-big{
    --panel-w: 280px;
    --panel-w-right: 276px;
  }
}
@media (max-width: 860px){
  :root{ --panel-w: 240px; }
}

/* На очень маленьких высотах не “центрируем”, даём больше воздуха */
@media (max-height: 640px){
  .phoneCard{ margin: 12px auto; }
}

/* Жёсткая блокировка viewport-скролла на телефоне (iOS Safari fix) */
html.phone-locked,
body.phone-locked{
  overflow: hidden !important;
  width: 100% !important;
  max-width: 100% !important;
}

body.phone-locked{
  position: fixed !important;
  inset: 0 !important;
}

/* Login page */
.loginWrap{
  height: 100vh;
  height: 100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 18px;
}

.loginCard{
  width: min(520px, 100%);
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(17,24,39,.10);
  border-radius: 20px;
  padding: 18px;
  box-shadow: 0 25px 80px rgba(17,24,39,.18);
}

/* Light theme anti-fatigue: soften bright white surfaces */
:root[data-theme="light"] .phoneBlocker{
  background:
    radial-gradient(900px circle at 12% 0%, rgba(59,110,197,.18), transparent 56%),
    radial-gradient(760px circle at 110% 16%, rgba(120,161,211,.16), transparent 54%),
    linear-gradient(
      180deg,
      color-mix(in oklab, var(--panel) 88%, var(--bg) 12%) 0%,
      color-mix(in oklab, var(--panel2) 84%, var(--bg) 16%) 46%,
      var(--bg) 100%
    );
  color: var(--text);
}

:root[data-theme="light"] .phoneCard,
:root[data-theme="light"] .loginCard{
  background: color-mix(in oklab, var(--panel) 94%, var(--bg) 6%);
  border-color: color-mix(in oklab, var(--border) 86%, var(--text) 14%);
  box-shadow: 0 24px 68px rgba(18,30,46,.14);
}

.loginTitle{
  font-size: 20px;
  font-weight: 950;
  letter-spacing: .2px;
  margin-bottom: 6px;
}

.loginSub{
  color: #475569;
  line-height: 1.4;
  margin-bottom: 14px;
}

.loginForm{
  display:flex;
  flex-direction:column;
  gap: 12px;
}

.loginLabel span{
  display:block;
  font-weight: 800;
  margin-bottom: 6px;
}

.loginInput{
  width:100%;
  height: var(--btn-h);
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  font-size: var(--body-font);
  outline: none;
}

.loginError{
  background: rgba(220,38,38,.08);
  border: 1px solid rgba(220,38,38,.20);
  color: #991b1b;
  padding: 10px 12px;
  border-radius: 14px;
  margin-bottom: 12px;
  font-weight: 800;
}

.btn--primary{
  background: #2563eb;
  color: #fff;
  border-color: transparent;
}



.btn--danger{
  background: #dc2626;
  color: #fff;
  border-color: transparent;
}
.btn--danger:hover{
  filter: brightness(.98);
}
.btn--danger:disabled{
  opacity: .55;
  cursor: not-allowed;
}
.loginHint{
  margin-top: 12px;
  color: #475569;
  font-size: 13px;
  line-height: 1.45;
}
#btnBigUi[aria-pressed="true"]{
  border-color: rgba(37,99,235,.55);
  box-shadow: 0 0 0 4px rgba(37,99,235,.12);
}

/* =========================
   Modal
   ========================= */
.modalOverlay{
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(12,18,28,.44);
  backdrop-filter: blur(2px);
  display:flex;
  align-items: flex-start;
  justify-content: center;
  padding: 16px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.modalCard{
  width: min(860px, 100%);
  max-height: calc(100vh - 32px);
  background: var(--panel);
  border: 1px solid color-mix(in oklab, var(--border) 84%, var(--text) 16%);
  border-radius: 16px;
  box-shadow: 0 22px 56px color-mix(in oklab, var(--bg) 56%, #020617 44%);
  padding: 12px;

  display:flex;
  flex-direction:column;
  min-height: 0;
}

.modalHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 8px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--border);
}

.modalTitle{
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .2px;
}

.modalClose{
  height: var(--btn-h);
  min-width: var(--btn-h);
  border-radius: 10px;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--panel2) 82%, var(--panel) 18%);
  font-weight: 950;
  cursor:pointer;
}

.modalBody{
  padding-top: 10px;
  display:flex;
  flex-direction: column;
  gap: 10px;

  overflow:auto;
  min-height: 0;
}

/* =========================
   Background modal
   ========================= */
.bgPreviewBox{
  background: var(--panel);
  border:1px dashed var(--border);
  border-radius: 14px;
  padding: 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  max-height: 240px;
  overflow:hidden;
}
.bgPreviewImg{
  max-width:100%;
  max-height:220px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(17,24,39,.08);
}
.bgEditHint{
  font-size: 13px;
  color:#334155;
  line-height:1.45;
}

.cardRow{
  background: rgba(2,6,23,.03);
  border: 1px solid rgba(17,24,39,.10);
  border-radius: 14px;
  padding: 12px;
}

.rowTitle{
  font-weight: 950;
  margin-bottom: 6px;
}

.rowSub{
  color: var(--muted);
  line-height: 1.45;
}

.projectGrid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.projectItem{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--panel);
  transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.projectItem:hover{ background: var(--panel2); }

.projectItem.is-active{
  border-color: rgba(37,99,235,.55);
  box-shadow: var(--ring);
}

.projectMeta{
  display:flex;
  flex-direction:column;
  gap: 3px;
  min-width: 0;
}

.projectName{
  font-weight: 950;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}

.projectDates{
  font-size: 13px;
  color: var(--muted);
}

.projectActions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

.inputRow{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items:center;
}

.inputRow input:not([type="range"]){
  flex: 1 1 240px;
  height: var(--btn-h);
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  font-size: var(--body-font);
  outline: none;
}

.inputRow input:not([type="range"]):focus{
  box-shadow: var(--ring);
  border-color: rgba(37,99,235,.55);
}

.inputRow input[type="range"]{
  flex: 1 1 240px;
  min-width: 160px;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  accent-color: #3b82f6;
  outline: none;
}

.badge{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel);
  font-weight: 900;
}

.badgeDot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #22c55e;
}
.badgeDot.is-warn{ background: #f59e0b; }
.badgeDot.is-bad{ background: #ef4444; }

.inputRow select{
  flex: 1 1 240px;
  height: var(--btn-h);
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  font-size: var(--body-font);
  outline: none;
}

.inputRow select:focus{
  box-shadow: var(--ring);
  border-color: rgba(37,99,235,.55);
}

.canvasSizeRow input{
  flex: 1 1 150px;
  min-width: 0;
}

.canvasSizeRow .canvasUnitSel{
  flex: 0 0 92px;
  max-width: 92px;
}

@media (max-width: 980px){
  .canvasSizeRow .canvasUnitSel{
    flex: 1 1 120px;
    max-width: none;
  }
}



/* Tool dock dropdowns: always theme-friendly */
#toolDock select,
.toolDock select,
.tool-dock select,
.toolSession select,
.tool-session select {
  color: var(--text) !important;
  background: var(--panel) !important;
  border: 1px solid var(--border) !important;
}

#toolDock select option,
.toolDock select option,
.tool-dock select option,
.toolSession select option,
.tool-session select option {
  color: var(--text) !important;
  background: var(--panel) !important;
}

/* Optional: make it look a bit nicer */
#toolDock select,
.toolDock select,
.tool-dock select,
.toolSession select,
.tool-session select {
  padding: 6px 10px !important;
  border-radius: 10px !important;
  line-height: 1.2 !important;
}

/* ------------------------------
   Revisions UI: graph + compare
------------------------------ */

.revGraphWrap{
  border:1px solid var(--border);
  border-radius:12px;
  background: var(--panel);
  overflow:auto;
  padding:10px;
}

.revGraphSvg{
  min-width:860px;
}

.revGraphEdge{
  stroke: var(--muted);
  stroke-width:3;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.revGraphNode{
  cursor:pointer;
}

.revGraphDot{
  fill: var(--panel);
  stroke: var(--text);
  stroke-width:3;
}

.revGraphNode:hover .revGraphDot{
  stroke-width:4;
}

.revGraphNode.is-foreign .revGraphDot{
  opacity:.55;
  stroke-dasharray:4 3;
}

.revGraphNode.is-current .revGraphDot{
  fill:rgba(37,99,235,.18);
  stroke:rgba(37,99,235,.9);
}

.revGraphNode.is-a .revGraphDot{
  stroke:rgba(16,185,129,.95);
}

.revGraphNode.is-b .revGraphDot{
  stroke:rgba(239,68,68,.95);
}

.revGraphMark{
  font-size:12px;
  font-weight:700;
  fill:rgba(17,24,39,.92);
  user-select:none;
  pointer-events:none;
}

.revGraphLabel{
  font-size:14px;
  fill:rgba(17,24,39,.92);
  user-select:none;
}

.revCompareVisual{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin:10px 0;
}

.revCompareCard{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.revCompareImg{
  width:100%;
  max-height:56vh;
  object-fit:contain;
  border-radius:14px;
  border:1px solid rgba(17,24,39,.12);
  background:rgba(2,6,23,.03);
  cursor:zoom-in;
}

.revCompareSliderFrame{
  position: relative;
  width: min(100%, 1700px);
  margin: 0 auto;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.14);
  background: rgba(2,6,23,.03);
  overflow: hidden;
  aspect-ratio: 2000 / 980;
  height: auto;
  max-height: 74vh;
}


.revCompareSliderImg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
}

.revCompareSliderImg--b{ z-index:1; }
.revCompareSliderImg--a{ z-index:2; }

.revCompareSliderClip{
  position:absolute;
  top:0;
  left:0;
  height:100%;
  overflow:hidden;
}

.revCompareSliderOverlay{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
  opacity:.70;

  z-index:3;
}


.revCompareDivider{
  z-index:4;
  position:absolute;
  top:0;
  bottom:0;
  width:2px;
  background: rgba(15,23,42,.65);
  left:50%;
  transform: translateX(-1px);
  pointer-events: auto;
  cursor: col-resize;
}

.revCompareHandle{
  z-index:5;
  position:absolute;
  top:50%;
  width:38px;
  height:38px;
  border-radius:999px;
  border:1px solid rgba(17,24,39,.18);
  background: rgba(255,255,255,.95);
  box-shadow: 0 10px 30px rgba(17,24,39,.22);
  transform: translate(-50%, -50%);
  left:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events: auto;
  cursor: col-resize;
}

.revCompareHandle:before{
  content:'';
  width:16px;
  height:16px;
  border-left:2px solid rgba(15,23,42,.55);
  border-right:2px solid rgba(15,23,42,.55);
}
.revCompareRange{
  width:100%;
  height:32px;
}


/* =========================
   Integrated Revision Mode
   ========================= */

.revModeSection{display:none;}

.is-rev-mode #leftPanel .panel__section:not(.revModeSection){display:none;}
.is-rev-mode #rightPanel .panel__section:not(.revModeSection){display:none;}
.is-rev-mode .revModeSection{display:block;}

.revLeftActions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px;}

.revTree{display:flex;flex-direction:column;gap:10px;}

.revBranch{border:1px solid var(--border);border-radius:12px;background:var(--panel2);overflow:hidden;}
.revBranchHeader{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 10px;cursor:pointer;background:var(--panel);}
.revBranchHeaderMain{min-width:0;}
.revBranchTitle{font-weight:900;font-size:14px;line-height:1.2;}
.revBranchSub{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.revBranchToggle{font-size:16px;opacity:.7;}
.revBranchBody{padding:10px;display:flex;flex-direction:column;gap:8px;}

.revNode{display:flex;align-items:center;gap:10px;padding:8px;border:1px solid var(--border);border-radius:12px;background:var(--panel);cursor:pointer;user-select:none;}
.revNode:hover{border-color:rgba(37,99,235,.35);}
.revNode.is-selected{outline:2px solid rgba(59,130,246,.35);}
.revNodeThumb{width:64px;height:44px;object-fit:cover;border-radius:12px;border:1px solid var(--border);background:var(--panel2);}
.revNodeMain{flex:1;min-width:0;}
.revNodeTitle{font-weight:900;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.revNodeSub{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.revNodeBadges{display:flex;flex-direction:column;align-items:flex-end;gap:4px;}
.revMiniBadge{font-size:11px;padding:2px 8px;border-radius:999px;border:1px solid var(--border);background:var(--panel2);}
.revMiniBadge--cur{background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.28);}
.revMiniBadge--head{background:rgba(99,102,241,.12);border-color:rgba(99,102,241,.28);}
.revMiniBadge--a{background:rgba(251,191,36,.16);border-color:rgba(251,191,36,.35);}
.revMiniBadge--b{background:rgba(59,130,246,.16);border-color:rgba(59,130,246,.35);}

.revOrphansTitle{font-weight:900;font-size:13px;margin:8px 4px 2px;opacity:.85;}

.revSelMeta{padding:8px;border:1px solid var(--border);border-radius:12px;background:var(--panel);margin-bottom:8px;}
.revBranchMeta{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:var(--panel);margin-bottom:8px;}
.revBranchMetaTitle{font-weight:900;font-size:13px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.revBranchMeta .btn{flex:0 0 auto;}
.revSelTitle{font-weight:900;margin-bottom:4px;}
.revSelSub{font-size:12px;color:var(--muted);margin-bottom:6px;}
.revSelBadges{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px;}
.revSelNote{font-size:12px;color:var(--muted);}

.revBadge{font-size:11px;padding:2px 8px;border-radius:999px;border:1px solid var(--border);background:var(--panel2);}
.revBadge--cur{background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.28);}
.revBadge--head{background:rgba(99,102,241,.12);border-color:rgba(99,102,241,.28);}

.revPicksMeta{display:flex;flex-direction:column;gap:6px;margin:8px 0 10px;}
.revPickRow{display:flex;align-items:center;gap:8px;}
.revPickLabel{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;border-radius:999px;font-weight:900;font-size:12px;border:1px solid var(--border);background:var(--panel2);}
.revPickLabel--a{background:rgba(251,191,36,.16);border-color:rgba(251,191,36,.35);}
.revPickLabel--b{background:rgba(59,130,246,.16);border-color:rgba(59,130,246,.35);}
.revPickText{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.revModeControls{display:flex;flex-direction:column;gap:8px;}
.revModeControlsRow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.revModeControls select{height:var(--btn-h);border-radius:10px;border:1px solid var(--border);padding:0 10px;background:var(--panel);color:var(--text);}
.revModeControls label{font-size:12px;color:var(--muted);}

/* Canvas stage overlay for compare */
.revStageOverlay{position:absolute;inset:0;z-index:30;background:rgba(15,23,42,.92);backdrop-filter:blur(4px);display:none;flex-direction:column;color:#fff;}
.revStageHeader{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.12);}
.revStageTitle{font-weight:900;}
.revStageBody{padding:12px;overflow:auto;}

.revCompareVisual{display:flex;flex-direction:column;gap:10px;}
.revCompareCard{border:1px solid var(--border);border-radius:12px;background:var(--panel);overflow:hidden;}
.revCompareCap{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid var(--border);background:var(--panel2);}

.revCompareCap--biglabels{
  flex-wrap:wrap;
  gap:10px;
}
.revCompareBigSide{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:34px;
  height:28px;
  padding:0 12px;
  border-radius:999px;
  font-weight:900;
  font-size:16px;
  border:1px solid rgba(15,23,42,.14);
}
.revCompareBigSide--a{ background: rgba(251,191,36,.22); border-color: rgba(251,191,36,.38);} 
.revCompareBigSide--b{ background: rgba(59,130,246,.22); border-color: rgba(59,130,246,.38);} 
.revCompareCapSpacer{ flex:1; }
.revCompareHintSub{ opacity:.82; }
.revCompareCapText{font-size:12px;color:rgba(15,23,42,.85);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.revCompareCapSpacer{flex:1;}
.revCompareImg{width:100%;height:auto;display:block;cursor:zoom-in;}

/* prominent exit button */
.revExitBtn{margin-left:8px;}

/* =========================
   Revision Mode – UX polish (beginner-first)
   ========================= */

.revModeHint{
  padding:10px 10px;
  border:1px dashed rgba(15,23,42,.22);
  border-radius:14px;
  background:rgba(248,250,252,.85);
  font-size:12px;
  color:rgba(15,23,42,.82);
}

.revPickHint{
  margin:8px 0 10px;
  padding:8px 10px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--panel);
  font-size:12px;
  color:var(--muted);
}

.revModeControls .select{width:100%;}

.revChk{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--panel);
  user-select:none;
}
.revChk input{width:18px;height:18px;}

.revCompareWrap{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.revAdvanced{
  border:1px solid rgba(15,23,42,.12);
  border-radius:14px;
  background:rgba(255,255,255,.9);
  padding:8px 10px;
  margin-top:10px;
}

.revAdvancedSummary{
  cursor:pointer;
  font-weight:900;
  list-style:none;
  outline:none;
}

.revAdvancedSummary::-webkit-details-marker{display:none;}

.revAdvancedBody{margin-top:8px;display:flex;flex-direction:column;gap:8px;}

.revAdvancedText{
  font-size:12px;
  color:rgba(15,23,42,.78);
  margin:2px 0 4px;
}

.revAdvancedRow{display:flex;gap:8px;flex-wrap:wrap;}

/* A tiny bump to node touch-target for beginners */
.revNode{padding:10px;}
.revNodeThumb{width:72px;height:50px;}
.revNodeTitle{font-size:14px;}
.revBranchTitle{font-size:15px;}


/* --- Revisions UX: hints, onboarding, and slider affordances --- */
.revSmallNote{
  font-size:12px;
  line-height:1.35;
  color: rgba(2,6,23,.72);
  margin: 6px 0 10px;
}
.revCompareSliderFrame.is-dragging{
  outline: 2px solid rgba(37,99,235,.25);
  outline-offset: 2px;
}
.revCompareCorner{
  position:absolute;
  top:10px;
  padding:8px 14px;
  border-radius: 999px;
  font-weight:900;
  font-size:16px;
  letter-spacing:.5px;
  color:#0f172a;
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(15,23,42,.12);
  pointer-events: none;
  z-index:6;
}
.revCompareCorner--a{ left:10px; background: rgba(251,191,36,.22); border-color: rgba(251,191,36,.38); }
.revCompareCorner--b{ right:10px; background: rgba(59,130,246,.22); border-color: rgba(59,130,246,.38); }

.revCompareHint{
  position:absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  padding: 12px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(15,23,42,.14);
  box-shadow: 0 10px 26px rgba(2,6,23,.18);
  color:#0f172a;
  font-size: 13px;
  line-height: 1.35;
  pointer-events: auto;
}
.revCompareHintSub{
  color: rgba(2,6,23,.72);
  font-size: 12px;
}
.revCompareHintBtn{
  margin-top: 10px;
  width: 100%;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(15,23,42,.18);
  background: rgba(15,23,42,.04);
  cursor: pointer;
}

:root[data-theme="light"] .revCompareHandle{
  background: color-mix(in oklab, var(--panel) 90%, var(--bg) 10%);
  border-color: color-mix(in oklab, var(--border) 84%, var(--text) 16%);
  box-shadow: 0 10px 24px rgba(18,30,46,.18);
}

:root[data-theme="light"] .revCompareHandle:before{
  border-left-color: rgba(27,36,48,.50);
  border-right-color: rgba(27,36,48,.50);
}

:root[data-theme="light"] .revAdvanced{
  background: color-mix(in oklab, var(--panel) 90%, var(--bg) 10%);
  border-color: color-mix(in oklab, var(--border) 84%, var(--text) 16%);
}

:root[data-theme="light"] .revCompareCorner{
  color: var(--text);
  background: color-mix(in oklab, var(--panel) 78%, var(--bg) 22%);
  border-color: color-mix(in oklab, var(--border) 84%, var(--text) 16%);
  box-shadow: 0 6px 16px rgba(18,30,46,.12);
}

:root[data-theme="light"] .revCompareHint{
  background: color-mix(in oklab, var(--panel) 86%, var(--bg) 14%);
  border-color: color-mix(in oklab, var(--border) 82%, var(--text) 18%);
  box-shadow: 0 10px 24px rgba(18,30,46,.16);
  color: var(--text);
}

:root[data-theme="light"] .revCompareHintSub{
  color: color-mix(in oklab, var(--muted) 86%, var(--text) 14%);
}

:root[data-theme="light"] .revCompareHintBtn{
  border-color: color-mix(in oklab, var(--border) 76%, var(--text) 24%);
  background: color-mix(in oklab, var(--panel2) 84%, var(--bg) 16%);
  color: var(--text);
}

.revToast{
  position: fixed;
  left: 16px;
  bottom: 16px;
  max-width: min(560px, calc(100vw - 32px));
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(2,6,23,.92);
  color: rgba(255,255,255,.96);
  font-size: 13px;
  line-height: 1.35;
  box-shadow: 0 12px 26px rgba(2,6,23,.35);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .2s ease, transform .2s ease;
  z-index: 999999;
}
.revToast.is-on{
  opacity: 1;
  transform: translateY(0);
}

.revFlash{
  animation: revFlash 1.1s ease-in-out 0s 2;
}
@keyframes revFlash{
  0%{ box-shadow: 0 0 0 0 rgba(37,99,235,.0); }
  40%{ box-shadow: 0 0 0 6px rgba(37,99,235,.28); }
  100%{ box-shadow: 0 0 0 0 rgba(37,99,235,.0); }
}

.revOnboardBody{
  padding: 16px 16px 12px;
}
.revOnboardSteps{
  display: grid;
  gap: 10px;
}
.revOnboardStep{
  padding: 12px 12px;
  border-radius: 14px;
  background: rgba(15,23,42,.04);
  border: 1px solid rgba(15,23,42,.08);
  font-size: 14px;
  line-height: 1.4;
}
.revOnboardFooter{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.revOnboardDont{
  display:flex;
  align-items:center;
  gap: 8px;
  font-size: 13px;
  color: rgba(2,6,23,.82);
  user-select:none;
}
.revOnboardBtns{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}



/* Bezier mode toggle (Simple / Pro) */
.bezierModeRow{
  margin-top: 8px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel2);
  color: var(--text);
}
.bezierModeLabel{
  color: var(--text);
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 6px;
}
.bezierModeButtons{display:flex;gap:8px}
.bezierModeHint{
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.2;
  opacity: 1;
  color: var(--muted);
}

/* Pencil mode row (tap / stroke) */
.pencilModeRow{
  margin-top: 8px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel2);
  color: var(--text);
}
.pencilModeLabel{
  color: var(--text);
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 6px;
}
.pencilModeButtons{display:flex;gap:8px}
.pencilModeHint{
  color: var(--muted);
  opacity: 1;
  font-size: 12px;
  margin-top: 6px;
}

/* Pencil snap row (normal / grid) */
.pencilSnapRow{
  margin-top: 8px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel2);
  color: var(--text);
}
.pencilSnapLabel{
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 6px;
  color: var(--text);
}
.pencilSnapButtons{display:flex;gap:8px}
.pencilSnapHint{font-size:12px;margin-top:6px;color:var(--muted)}
.toolSubmenuHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:6px;
}
.toolSubmenuHead .bezierModeLabel,
.toolSubmenuHead .pencilModeLabel,
.toolSubmenuHead .pencilSnapLabel,
.toolSubmenuHead .selectModeLabel,
.toolSubmenuHead .selectScopeLabel{
  margin-bottom:0;
}
.toolInfoBtn{
  width: 20px;
  min-width: 20px;
  height: 20px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel);
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  padding: 0;
  cursor: pointer;
}
.toolInfoBtn > span{ pointer-events:none; }
.toolInfoBtn:hover{
  background: var(--panel2);
  color: var(--text);
}
.toolDock__labelWrap{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
}
.toolDock__labelWrap .toolInfoBtn{
  margin-left:auto;
}
.toolDock__labelWrap .toolDock__label{
  margin:0;
}

.btn--seg{
  flex: 1;
  min-height: 32px;
  padding: 6px 8px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12px;
}
.btn--segActive{
  border-color: rgba(37,99,235,.5);
  box-shadow: 0 0 0 2px rgba(37,99,235,.14);
}
.btnSeg__icon{
  display: inline-flex;
  width: 14px;
  height: 14px;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  opacity: .9;
}
.btnSeg__icon > i{
  font-size: 12px;
  line-height: 1;
}
.btnSeg__text{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ================================
   HD TOPBAR GROUPS (HD-101..)
   ================================ */

.tbGroup{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap: nowrap;
  min-width: 0;
}

/* Zoom group: keep it compact */
#tbZoomRange{ width: 120px; }
:root.ui-big #tbZoomRange{ width: 160px; }

@media (max-width: 1100px){
  #tbZoomRange{ width: 90px; }
  #tbZoomLabel{ display:none; }
}

.tbSep{
  width:1px;
  height:28px;
  background: var(--border);
  margin: 0 6px;
  flex:0 0 auto;
}

/* Segmented control */
.tbSeg{
  display:flex;
  align-items:stretch;
  border:1px solid var(--border);
  border-radius:999px;
  overflow:hidden;
  background: var(--panel);
}

.tbSegBtn{
  height: var(--btn-h);
  padding: 0 12px;
  border:0;
  background:transparent;
  font-weight:800;
  font-size: var(--btn-font);
  cursor:pointer;
}

.tbSegBtn + .tbSegBtn{
  border-left:1px solid var(--border);
}

.tbSegBtn.isActive{
  background: var(--accent);
  color:#fff;
}

/* Toggle buttons in topbar */
.tbToggle{
  height: var(--btn-h);
  padding: 0 12px;
}

.tbToggle.isActive{
  background: var(--accent);
  color:#fff;
  border-color: var(--accent);
}

/* Dropdown menu */
.tbMenu{
  position:relative;
  display:flex;
  align-items:center;
}

.tbCaret{ opacity: .7; font-weight: 900; }

/* 13" laptop: keep topbar single-line by collapsing menu labels */
@media (max-width: 1280px){
  .topbar__right .tbMenu > .btn span:not(.tbCaret){
    display:none;
  }
}

.tbMenuPanel{
  position:absolute;
  right:0;
  top: calc(100% + 8px);
  min-width: 280px;
  background: var(--panel);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow: var(--shadow);
  padding:8px;
  z-index: 50;
}

.tbMenuPanel[hidden]{
  display:none !important;
}

.tbMenuCaption{
  padding: 8px 10px;
  color: var(--muted);
  font-size: 12px;
}

.tbMenuItem{
  width:100%;
  text-align:left;
  padding: 10px 10px;
  border-radius: 12px;
  background:transparent;
  border:0;
  font-weight:800;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:10px;
}
.tbMenuItem:hover{
  background: var(--panel2);
}

.tbMenuItem:disabled{
  opacity:.55;
  cursor:not-allowed;
}

/* Legacy topbar buttons we plan to hide */
.isLegacyHidden{
  display:none !important;
}

.formGrid{ display:flex; flex-direction:column; gap:12px; }

/* =========================================================
   BW Multi Modal (HD-210)
   ========================================================= */
.modalCard--bwMulti{
  width: min(1120px, 96vw);
  max-height: calc(100vh - 24px);
}

.modalCard--bwMulti .btn,
.modalCard--bwMulti .loginInput,
.modalCard--bwMulti select{
  font-weight: 500;
}

.modalCard--bwMulti .modalHeader{
  padding-bottom: 8px;
}

.modalCard--bwMulti .modalTitle{
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .1px;
}

.modalCard--bwMulti .modalBody{
  padding-top: 8px;
  gap: 7px;
  overflow: hidden;
}

.bwMultiModal{
  --bwMulti-actions-h: 64px;
  width: 100%;
  height: 100%;
  min-height: 0;
  display:flex;
  flex-direction:column;
}

.bwMultiModal .formGrid{
  gap: 4px;
}

.bwMultiModal .hint{
  margin-top: 0;
  font-size: 10.5px;
  line-height: 1.3;
}

.bwMultiModal .btn{
  min-height: 32px;
  font-size: 11.5px;
}

.bwMultiOverlay--fallbackFs{
  padding: 2vh 2vw;
  align-items: stretch;
}

.bwMultiModalCard--fallbackFs{
  width: auto !important;
  max-width: none !important;
  height: 96vh !important;
  max-height: 96vh !important;
  margin: 0 !important;
}

.bwMultiModalCard--fallbackFs .modalBody{
  height: calc(96vh - 60px) !important;
  max-height: calc(96vh - 60px) !important;
}

.bwMultiFsHost{
  position: fixed;
  inset: 0;
  z-index: 2147483600;
  background: color-mix(in oklab, var(--bg) 90%, #020617 10%);
  width: 100vw;
  height: 100dvh;
  padding: 0;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
}

.bwMultiFsHost.isFallback{
  position: fixed;
  height: 100dvh;
}

.bwMultiFsHost .bwMulti__section--preview{
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: 0 !important;
  border: 0;
  padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0px));
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bwMultiFsHost .bwMulti__section--preview .bwMulti__previewHint,
.bwMultiFsHost .bwMulti__section--preview .bwMulti__stats,
.bwMulti__section--preview.isFullscreen .bwMulti__previewHint,
.bwMulti__section--preview.isFullscreen .bwMulti__stats{
  display: none !important;
}

.bwMultiFsHost .bwMulti__previewCanvas{
  min-height: 0;
  height: auto;
  max-height: none;
  flex: 1 1 auto;
  border-radius: 8px;
  border: 1px solid color-mix(in oklab, var(--border) 84%, var(--text) 16%);
  background: color-mix(in oklab, var(--panel) 90%, var(--panel2) 10%);
}

.bwMulti__layout{
  display:grid;
  grid-template-columns: minmax(288px, 1.04fr) minmax(312px, .96fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 8px;
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  overflow: hidden;
}

.bwMulti__left,
.bwMulti__right{
  min-width: 0;
  min-height: 0;
}

.bwMulti__left{
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding-right: 3px;
  padding-bottom: calc(var(--bwMulti-actions-h) + 8px);
}

.bwMulti__right{
  display:flex;
  flex-direction:column;
  gap: 0;
  height: 100%;
  overflow: hidden;
  min-height: 0;
}

.bwMulti__rightBody{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding-right: 3px;
  padding-bottom: calc(var(--bwMulti-actions-h) + 8px);
}

.bwMulti__section{
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--panel) 84%, var(--panel2) 16%),
    color-mix(in oklab, var(--panel) 92%, var(--panel2) 8%)
  );
  border: 1px solid color-mix(in oklab, var(--border) 88%, var(--text) 12%);
  border-radius: 11px;
  padding: 5px;
  box-shadow: none;
}

.bwMulti__left .bwMulti__section{
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

.bwMulti__section--preview{
  display:flex;
  flex-direction:column;
  gap: 5px;
  min-height: 0;
}

.bwMulti__sectionTitle{
  font-weight: 600;
  font-size: 12px;
  margin-bottom: 3px;
  line-height: 1.28;
}

.bwMulti__sectionHead{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.bwMulti__sectionHead .bwMulti__sectionTitle{
  margin-bottom: 0;
}

.bwMulti__sectionHead--corr .bwMulti__sectionTitle{
  font-size: 13px;
}

.bwMulti__sectionHead--result{
  margin-bottom: 3px;
}

.bwMulti__badge{
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  margin: -1px 0 2px 0;
  padding: 0 6px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--border) 86%, var(--text) 14%);
  background: color-mix(in oklab, var(--panel2) 82%, var(--panel) 18%);
  font-size: 10px;
  color: color-mix(in oklab, var(--good) 76%, var(--muted) 24%);
}

.bwMulti__inline{
  display:flex;
  align-items:center;
  gap: 5px;
}

.bwMulti__inline--wrap{
  flex-wrap: wrap;
}

.bwMulti__grid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.bwMulti__cluster2{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  align-items: start;
}

.bwMulti__section--stoneSizes{
  grid-column: auto;
}

.bwMulti__dimStack{
  display: grid;
  gap: 5px;
}

.bwMulti__dimMatrix{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: stretch;
}

.bwMulti__dimLine{
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 78px;
  align-items: center;
  gap: 4px 7px;
}

.bwMulti__dimLine > .bwMulti__label{
  margin: 0;
}

.bwMulti__dimLine > .bwMulti__num{
  width: 78px;
  min-width: 78px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  padding: 0 6px;
}

.bwMulti__dimLine > .bwMulti__range{
  max-width: none;
  justify-self: stretch;
}

.bwMulti__dimSide{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 5px;
}

.bwMulti__label{
  font-weight: 500;
  color: var(--muted);
  font-size: 10px;
}

.bwMulti__num{
  width: 100%;
  height: 29px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  padding: 0 7px;
  font-size: 10.5px;
}

.bwMulti__dimOpts{
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 5px;
}

.bwMulti__seg{
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border-radius: 9px;
  border: 1px solid color-mix(in oklab, var(--border) 86%, var(--text) 14%);
  background: color-mix(in oklab, var(--panel2) 88%, var(--panel) 12%);
}

.bwMulti__resultHeadControls{
  margin-left: auto;
  gap: 6px;
}

.bwMulti__unitSwitch{
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 78px;
  overflow: hidden;
  --unit-thumb-x: 0%;
}

.bwMulti__unitSwitch::before{
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  bottom: 2px;
  width: calc(50% - 2px);
  border-radius: 7px;
  background: color-mix(in oklab, var(--accent) 16%, var(--panel) 84%);
  border: 1px solid color-mix(in oklab, var(--accent) 46%, var(--border) 54%);
  transform: translateX(var(--unit-thumb-x));
  transition: transform .22s cubic-bezier(.2,.8,.2,1), background-color .16s ease;
}

.bwMulti__unitSwitch .bwMulti__unitBtn{
  min-width: 0;
  width: auto;
  height: 30px;
  padding: 0 10px;
  border-color: transparent;
  background: transparent;
  position: relative;
  z-index: 1;
  font-size: 10px;
}

.bwMulti__unitSwitch .bwMulti__unitBtn[aria-pressed="true"]{
  background: transparent;
  color: var(--text);
}

.bwMulti__unitSwitch .bwMulti__unitBtn[aria-pressed="false"]{
  color: var(--muted);
}

.bwMulti__segBtn{
  min-width: 40px;
  min-height: 30px;
  height: 30px;
  padding: 0 10px;
  border-radius: 7px;
  font-size: 10.5px;
  line-height: 1;
}

.bwMulti__segBtn.isOn,
.bwMulti__segBtn[aria-pressed="true"]{
  background: color-mix(in oklab, var(--accent) 15%, var(--panel) 85%);
  border-color: color-mix(in oklab, var(--accent) 50%, var(--border) 50%);
  color: var(--text);
}

.bwMulti__algoSeg,
.bwMulti__toneSeg{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
}

.bwMulti__algoSeg .bwMulti__segBtn,
.bwMulti__toneSeg .bwMulti__segBtn{
  width: 100%;
  justify-content: center;
  text-align: center;
  min-width: 0;
  padding: 0 8px;
  white-space: nowrap;
}

.bwMulti__segIcon{
  width: 30px;
  min-width: 30px;
  padding: 0;
}

.bwMulti__segIcon > i{
  font-size: 12px;
}

.bwMulti__keepBtn{
  width: 30px;
  min-width: 30px;
  padding: 0;
}

.bwMulti__check{
  display:flex;
  align-items:center;
  gap: 5px;
  color: var(--muted);
  font-size: 10px;
}

.bwMulti__sizes{
  display:flex;
  flex-wrap: wrap;
  gap: 4px;
}

.bwMulti__sizeChip{
  border: 1px solid var(--border);
  background: var(--panel2);
  border-radius: 999px;
  padding: 2px 7px;
  display:inline-flex;
  align-items:center;
  gap: 5px;
  cursor: pointer;
  font: inherit;
  color: var(--text);
  font-size: 12px;
  line-height: 1.2;
  font-weight: 500;
}
.bwMulti__sizeChip:hover{ background: var(--panel); }
.bwMulti__sizeChip.isOn{
  background: color-mix(in oklab, var(--accent) 18%, var(--panel2) 82%);
  border-color: color-mix(in oklab, var(--accent) 58%, var(--border) 42%);
}

.bwMulti__sizeChip input{
  margin: 0;
}

.bwMulti__row{
  display:grid;
  gap: 3px;
}

.bwMulti__row--range{
  grid-template-columns: 72px minmax(0, 1fr) 40px;
  align-items:center;
  gap: 3px 5px;
}

.bwMulti__range{
  width: 100%;
  height: 18px;
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
}

.bwMulti__range::-webkit-slider-runnable-track{
  height: 3px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--border) 76%, var(--text) 24%);
}

.bwMulti__range::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  margin-top: -4.5px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--accent) 55%, var(--border) 45%);
  background: color-mix(in oklab, var(--accent) 76%, #fff 24%);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--bg) 74%, transparent 26%);
}

.bwMulti__range::-moz-range-track{
  height: 3px;
  border: 0;
  border-radius: 999px;
  background: color-mix(in oklab, var(--border) 76%, var(--text) 24%);
}

.bwMulti__range::-moz-range-thumb{
  width: 12px;
  height: 12px;
  border: 1px solid color-mix(in oklab, var(--accent) 55%, var(--border) 45%);
  border-radius: 999px;
  background: color-mix(in oklab, var(--accent) 76%, #fff 24%);
}

.bwMulti__val{
  text-align: right;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  font-size: 9px;
}

.bwMulti__corrGrid{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 5px;
}

.bwMulti__corrGrid .bwMulti__row--range{
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "label value"
    "range range";
  gap: 3px 10px;
  padding: 3px 0;
}

.bwMulti__corrGrid .bwMulti__row--range > .bwMulti__label{
  grid-area: label;
}

.bwMulti__corrGrid .bwMulti__row--range > .bwMulti__range{
  grid-area: range;
}

.bwMulti__corrGrid .bwMulti__row--range > .bwMulti__val{
  grid-area: value;
  font-size: 10.5px;
}

.bwMulti__corrGrid .bwMulti__label{
  font-size: 11px;
}

.bwMulti__thresholds{
  display:flex;
  flex-direction:column;
  gap: 4px;
}

.bwMulti__thrTrack{
  position: relative;
  height: 27px;
  border-radius: 9px;
  border: 1px solid rgba(37,99,235,.2);
  background: linear-gradient(90deg, #0f172a 0%, #475569 25%, #94a3b8 50%, #cbd5e1 75%, #f8fafc 100%);
  overflow: hidden;
}

.bwMulti__thrBg{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.15) 0, rgba(255,255,255,.15) 1px, transparent 1px, transparent 12.5%);
  background-size: 12.5% 100%;
}

.bwMulti__thrHandle{
  position:absolute;
  top: 0;
  transform: translateX(-50%);
  width: 15px;
  height: 100%;
  border: none;
  background: transparent;
  cursor: ew-resize;
}

.bwMulti__thrHandle::before{
  content:'';
  position:absolute;
  left:50%;
  top: 2px;
  bottom: 2px;
  width: 4px;
  transform: translateX(-50%);
  background: #2563eb;
  border-radius: 999px;
  box-shadow: 0 0 0 2px rgba(255,255,255,.9), 0 0 0 3px rgba(37,99,235,.35);
}

.bwMulti__thrLabels{
  position: relative;
  height: 17px;
  border-radius: 8px;
  background: var(--panel2);
  border: 1px solid var(--border);
  overflow:hidden;
}

.bwMulti__thrLabel{
  position:absolute;
  top:0;
  height: 100%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 9px;
  color: var(--muted);
  font-weight: 500;
  border-right: 1px solid var(--border);
  white-space: nowrap;
  overflow:hidden;
}

.bwMulti__radioList{
  display:flex;
  flex-direction:column;
  gap: 3px;
}

.bwMulti__radio{
  display:flex;
  align-items:center;
  gap: 5px;
  padding: 2px 0;
  font-size: 10px;
}

.bwMulti__colorBtn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  max-width: 100%;
  padding: 0 10px;
}

.bwMulti__colorText{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10.5px;
  font-weight: 500;
}

.bwMulti__imageRow{
  display:flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.bwMulti__section--crop{
  margin-top: 12px;
}

.bwMulti__imgMeta{
  display:flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
}

.bwMulti__imgInfo{
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bwMulti__imgInfo,
.bwMulti__cropInfo,
.bwMulti__cropHint{
  display: none !important;
}

.bwMulti__iconBtn{
  width: 30px;
  min-width: 30px;
  min-height: 30px;
  height: 30px;
  border-radius: 8px;
}
.bwMulti__iconBtn > i{
  font-size: 12px;
}

.bwMulti__imageActions{
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 4px;
}

.bwMulti__cropToolbar{
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 4px;
}

.bwMulti__cropToolbar .bwMulti__segIcon,
.bwMulti__cropToolbar .bwMulti__iconBtn{
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  border-radius: 9px;
}

.bwMulti__cropActions{
  margin-left: auto;
  gap: 4px;
}

.bwMulti__presets{
  margin-left: auto;
  gap: 4px;
}

.bwMulti__presets .bwMulti__iconBtn{
  width: 30px;
  min-width: 30px;
  height: 30px;
}

.bwMulti__switch{
  width: auto;
  min-height: 30px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel2);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  padding: 3px 6px;
  cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease;
}
.bwMulti__switch[aria-pressed="true"],
.bwMulti__switch.isOn{
  border-color: color-mix(in oklab, var(--accent) 56%, var(--border) 44%);
  background: color-mix(in oklab, var(--accent) 10%, var(--panel2) 90%);
}
.bwMulti__switchKnob{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--border) 78%, var(--text) 22%);
  background: var(--panel);
  position: relative;
  flex: 0 0 18px;
}
.bwMulti__switch[aria-pressed="true"] .bwMulti__switchKnob,
.bwMulti__switch.isOn .bwMulti__switchKnob{
  border-color: color-mix(in oklab, var(--accent) 55%, var(--border) 45%);
  box-shadow: inset 0 0 0 4px color-mix(in oklab, var(--accent) 68%, #fff 32%);
}
.bwMulti__switchLabel{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  color: var(--muted);
}
.bwMulti__switchLabel i{
  font-size: 12px;
}

.bwMulti__invertSeg{
  min-width: 188px;
  justify-content: flex-start;
  gap: 6px;
  padding: 0 10px;
}

.bwMulti__invertSeg > i{
  font-size: 12px;
}

.bwMulti__invertSeg > span{
  font-size: 10.5px;
}

.bwMulti__enhanceHud{
  display: grid;
  gap: 6px;
}

.bwMulti__enhanceRail{
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}

.bwMulti__enhanceRail::-webkit-scrollbar{
  height: 6px;
}

.bwMulti__enhanceBtn{
  flex: 0 0 auto;
}

.bwMulti__enhanceBtn.isOn{
  border-color: color-mix(in oklab, var(--accent) 55%, var(--border) 45%);
  background: color-mix(in oklab, var(--accent) 13%, var(--panel2) 87%);
}

.bwMulti__enhanceBtn--preset{
  border-color: color-mix(in oklab, var(--border) 80%, var(--text) 20%);
}

.bwMulti__enhanceActive{
  display: grid;
  gap: 4px;
  padding: 6px 8px;
  border: 1px solid color-mix(in oklab, var(--border) 88%, var(--text) 12%);
  border-radius: 10px;
  background: color-mix(in oklab, var(--panel2) 86%, var(--panel) 14%);
}

.bwMulti__enhanceActiveHead{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.bwMulti__enhanceActiveLabel{
  font-size: 10.5px;
  color: var(--muted);
}

.bwMulti__enhanceActiveValue{
  font-size: 10.5px;
  font-weight: 500;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.bwMulti__enhanceRange{
  width: 100%;
}

.bwMulti__algoCols{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.bwMulti__algoCol{
  display: grid;
  gap: 4px;
  min-width: 0;
}

.bwMulti__algoBottom{
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  margin-top: 3px;
}

.bwMulti__invertSwitch{
  min-width: 160px;
}

.bwMulti__colorRow{
  margin-left: auto;
  min-width: 0;
  justify-content: flex-end;
  gap: 6px;
}

.bwMulti__colorRow .bwMulti__label{
  white-space: nowrap;
}

.bwMulti__colorSw{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--activeColor, #cdcfd1);
}

.bwMulti__inline.isDisabled,
.bwMulti__check.isDisabled{
  opacity: .55;
}

.bwMulti__thumb{
  width: 82px;
  height: 58px;
  border-radius: 8px;
  border: 1px solid color-mix(in oklab, var(--border) 88%, var(--text) 12%);
  background: var(--panel);
  display:block;
  flex: 0 0 auto;
}

.bwMulti__cropCanvas{
  width: 100%;
  min-height: 250px;
  height: clamp(250px, 32vh, 320px);
  margin-top: 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #0f172a;
  display: block;
  touch-action: none;
  cursor: crosshair;
}

.bwMulti__tabs{
  display:flex;
  gap: 4px;
  flex-wrap: wrap;
}

.bwMulti__tabBtn{
  min-height: 32px;
  height: 32px;
  padding: 0 8px;
  border-radius: 8px;
  font-size: 10px;
}

.bwMulti__previewCanvas{
  width: 100%;
  min-height: 188px;
  height: clamp(188px, 26vh, 250px);
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel);
  display:block;
  flex: 1 1 auto;
}

.bwMulti__previewCanvas.isPanReady{
  cursor: grab;
}

.bwMulti__previewCanvas.isPanning{
  cursor: grabbing;
}

.bwMulti__zoomCtrl{
  display:inline-flex;
  align-items:center;
  gap: 3px;
  min-width: 0;
  flex-wrap: nowrap;
}

.bwMulti__zoomValue{
  min-width: 52px;
  text-align:center;
  font-variant-numeric: tabular-nums;
  font-size: 10px;
}

.bwMulti__zoomSlider{
  width: 86px;
  min-width: 86px;
}

.bwMulti__previewToolbar{
  display:flex;
  align-items:center;
  justify-content: flex-start;
  gap: 5px;
  flex-wrap: nowrap;
}

.bwMulti__previewModes .btn{
  height: 32px;
  padding: 0 10px;
  font-size: 10.5px;
}

.bwMulti__previewModes{
  flex: 1 1 auto;
  min-width: 0;
}

.bwMulti__fullscreenBtn{
  flex: 0 0 auto;
  margin-left: auto;
}

.bwMulti__fsNotice{
  margin-top: 0;
  padding: 4px 7px;
  border-radius: 8px;
  border: 1px solid color-mix(in oklab, #f59e0b 30%, var(--border) 70%);
  background: color-mix(in oklab, #f59e0b 10%, var(--panel2) 90%);
  color: color-mix(in oklab, #b45309 70%, var(--text) 30%);
  font-size: 10px;
}

.bwMulti__previewHint{
  margin-top: -2px;
  font-size: 9.5px;
}

.bwMulti__stats{
  border-top: 1px solid color-mix(in oklab, var(--border) 84%, var(--text) 16%);
  padding-top: 5px;
  display:grid;
  gap: 4px;
}

.bwMulti__statsSummary{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}

.bwMulti__statsBadge{
  border: 1px solid color-mix(in oklab, var(--border) 88%, var(--text) 12%);
  border-radius: 8px;
  background: color-mix(in oklab, var(--panel2) 86%, var(--panel) 14%);
  padding: 4px 6px;
  display:grid;
  gap: 2px;
  min-width: 0;
}

.bwMulti__statsBadge span{
  color: var(--muted);
  font-size: 9.5px;
}

.bwMulti__statsBadge b{
  color: var(--text);
  font-size: 10.5px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bwMulti__statsDetails{
  border: 1px solid color-mix(in oklab, var(--border) 88%, var(--text) 12%);
  border-radius: 8px;
  background: color-mix(in oklab, var(--panel2) 88%, var(--panel) 12%);
}

.bwMulti__statsDetailsTitle{
  cursor: pointer;
  list-style: none;
  padding: 5px 7px;
  font-size: 9.5px;
  font-weight: 500;
  color: var(--muted);
}
.bwMulti__statsDetailsTitle::-webkit-details-marker{
  display: none;
}

.bwMulti__statsBody{
  padding: 0 7px 5px 7px;
}

.bwMulti__statsList{
  display:grid;
  gap: 1px;
}

.bwMulti__statsRow{
  display:flex;
  justify-content:space-between;
  gap: 7px;
  color: var(--muted);
  font-size: 10px;
}

.bwMulti__statsRow--sum{
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--border);
  color: var(--text);
}

.bwMulti__warnBox{
  display:grid;
  gap: 4px;
}

.bwMulti__warn{
  padding: 4px 6px;
  border-radius: 8px;
  border: 0;
  background: rgba(239,68,68,.12);
  color: var(--danger);
  font-size: 9px;
}

.bwMulti__actions{
  position: sticky;
  bottom: 0;
  z-index: 8;
  display:flex;
  flex-direction: row;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 6px;
  margin-top: 0;
  padding: 8px 0 calc(10px + env(safe-area-inset-bottom, 0px));
  border: 0;
  border-top: 1px solid color-mix(in oklab, var(--border) 88%, var(--text) 12%);
  background: color-mix(in oklab, var(--bg) 97%, var(--panel) 3%);
  box-shadow: 0 -8px 18px rgba(2,6,23,.13);
  min-height: var(--bwMulti-actions-h);
}

.bwMulti__actions .btn{
  min-width: 112px;
  height: 36px;
}

.bwMulti__warnBox .hint{
  margin-top: 0;
}

@media (max-width: 980px){
  .modalCard--bwMulti{
    width: min(980px, 100%);
  }
  .bwMultiModal{
    height:100%;
    min-height: 0;
  }
  .bwMulti__layout{
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) minmax(0, 0.9fr);
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    overflow: hidden;
  }
  .bwMulti__left{
    height: 100%;
    overflow-y: auto;
    padding-right: 0;
  }
  .bwMulti__right{
    height: 100%;
    border-top: 1px solid color-mix(in oklab, var(--border) 88%, var(--text) 12%);
    padding-top: 4px;
  }
  .bwMulti__rightBody{
    padding-right: 0;
    padding-bottom: calc(var(--bwMulti-actions-h) + 8px);
  }
  .bwMulti__cropCanvas{
    min-height: 210px;
    height: clamp(210px, 30vh, 260px);
  }
  .bwMulti__previewCanvas{
    min-height: 160px;
    height: clamp(160px, 24vh, 210px);
  }
  .bwMulti__zoomSlider{
    width: 80px;
    min-width: 80px;
  }
  .bwMulti__statsSummary{
    grid-template-columns: 1fr;
  }
  .bwMulti__previewToolbar{
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
  }
  .bwMulti__imageRow{
    gap: 6px;
  }
  .bwMulti__thumb{
    width: 72px;
    height: 50px;
    max-height: 50px;
  }
  .bwMulti__previewModes{
    order: 1;
    width: 100%;
  }
  .bwMulti__corrGrid{
    grid-template-columns: 1fr;
  }
  .bwMulti__sectionHead--result{
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 5px;
  }
  .bwMulti__resultHeadControls{
    margin-left: 0;
    width: 100%;
    justify-content: flex-start;
  }
  .bwMulti__dimMatrix{
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .bwMulti__dimSide{
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
  }
  .bwMulti__cluster2{
    grid-template-columns: 1fr;
  }
  .bwMulti__dimLine{
    grid-template-columns: 52px minmax(0, 1fr) 72px;
  }
  .bwMulti__dimLine > .bwMulti__range{
    max-width: none;
    justify-self: stretch;
  }
  .bwMulti__cropToolbar{
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .bwMulti__cropActions{
    margin-left: 0;
    width: 100%;
    justify-content: flex-start;
  }
  .bwMulti__algoCols{
    grid-template-columns: 1fr;
    gap: 5px;
  }
  .bwMulti__algoBottom{
    flex-wrap: wrap;
  }
  .bwMulti__invertSwitch{
    min-width: 0;
  }
  .bwMulti__colorRow{
    width: 100%;
    margin-left: 0;
    justify-content: space-between;
  }
  .bwMulti__zoomCtrl{
    order: 2;
    width: auto;
  }
  .bwMulti__fullscreenBtn{
    order: 3;
    margin-left: auto;
  }
  .bwMulti__actions{
    padding: 8px 0 calc(10px + env(safe-area-inset-bottom, 0px));
  }
  .bwMulti__actions .btn{
    flex: 1 1 0;
    min-width: 0;
    height: 36px;
  }
}
.modalCard--export{
  width: min(1760px, 100%);
  max-width: calc(100vw - 16px);
  height: min(66vh, 760px);
  min-height: 520px;
}
.modalCard--export .modalBody{
  flex: 1 1 auto;
  min-height: 0;
  padding-top: 5px;
  gap: 6px;
  overflow-y: auto;
  overflow-x: hidden;
}
.exportModal__grid{
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 0;
  gap: 8px;
  padding: 0;
  overflow-x: hidden;
}
.exportModal__grid [hidden]{
  display: none !important;
}
.exportModal__layout{
  display: grid;
  grid-template-columns: minmax(0, 1.85fr) minmax(310px, 0.8fr);
  gap: 6px;
  align-items: stretch;
  height: 100%;
  min-width: 0;
  min-height: 0;
}
.exportModal__section{
  border: 1px solid color-mix(in oklab, var(--border) 90%, var(--text) 10%);
  border-radius: 12px;
  background: color-mix(in oklab, var(--panel2) 90%, var(--panel) 10%);
  padding: 7px;
  display: grid;
  gap: 4px;
  min-width: 0;
  min-height: 0;
}
.exportModal__section--controls{
  gap: 4px;
  align-content: start;
  overflow: auto;
}
.exportModal__row{
  display: grid;
  gap: 2px;
  min-width: 0;
}
.exportModal__row > label{
  font-size: 11px;
  line-height: 1.2;
  font-weight: 700;
  color: color-mix(in oklab, var(--muted) 86%, var(--text) 14%);
  letter-spacing: .01em;
}
.exportModal__seg{
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}
.exportModal__segBtn{
  height: 31px;
  min-height: 31px;
  border-radius: 9px;
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
}
.exportModal__segBtn > i{
  margin-right: 0 !important;
}
.exportModal__segIcon > i,
.exportModal__toggleIcon > i,
.exportModal__advancedChevron > i{
  margin-right: 0 !important;
  font-size: 12px;
  line-height: 1;
}
.exportModal__segText{
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}
.exportModal__seg--format .exportModal__segBtn{
  flex: 1 1 calc(33.33% - 4px);
}
.exportModal__seg--mirror .exportModal__segBtn{
  flex: 1 1 calc(50% - 4px);
}
.exportModal__seg--legendFill .exportModal__segBtn{
  flex: 1 1 calc(50% - 4px);
}
.exportModal__seg--legendLabelMode .exportModal__segBtn{
  flex: 1 1 calc(33.33% - 4px);
  padding: 0 9px;
}
.exportModal__seg--legendLabelMode .exportModal__segText{
  white-space: nowrap;
  line-height: 1;
  text-align: center;
  font-size: 11px;
}
.exportModal__seg--preset .exportModal__segBtn{
  flex: 1 1 calc(50% - 4px);
  padding: 0 7px;
}
.exportModal__hint{
  color: color-mix(in oklab, var(--muted) 86%, var(--text) 14%);
  font-size: 11px;
  line-height: 1.35;
}
.exportModal__hint--full{
  border: 0;
  border-radius: 10px;
  background: color-mix(in oklab, var(--accent) 7%, var(--panel2) 93%);
  padding: 6px 7px;
}
.exportModal__print{
  padding: 5px 6px;
  border-radius: 10px;
  background: color-mix(in oklab, var(--panel) 93%, var(--panel2) 7%);
  gap: 5px;
  min-width: 0;
}
.exportModal__printHead{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.exportModal__printTitle{
  font-size: 12px;
  font-weight: 800;
  color: color-mix(in oklab, var(--text) 88%, var(--accent) 12%);
}
.exportModal__printBadge{
  display: inline-flex;
  align-items: center;
  height: 21px;
  padding: 0 7px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--border) 84%, var(--text) 16%);
  background: color-mix(in oklab, var(--panel) 86%, var(--panel2) 14%);
  color: color-mix(in oklab, var(--muted) 82%, var(--text) 18%);
  font-size: 10.5px;
  white-space: nowrap;
}
.exportModal__printTopToggles{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}
.exportModal__toggleGrid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  min-width: 0;
}
.exportModal__toggleGrid--single{
  grid-template-columns: minmax(0, 1fr);
}
.exportModal__toggle{
  height: 30px;
  min-height: 30px;
  border-radius: 9px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  min-width: 0;
}
.exportModal__toggle .exportModal__toggleText{
  font-size: 11.5px;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.exportModal__toggle[aria-pressed="true"]{
  border-color: color-mix(in oklab, var(--accent) 50%, var(--border) 50%);
  background: color-mix(in oklab, var(--accent) 13%, var(--panel2) 87%);
  color: color-mix(in oklab, var(--text) 90%, var(--accent) 10%);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 20%, transparent 80%);
}
.exportModal__advancedToggle{
  height: 30px;
  min-height: 30px;
  border-radius: 9px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
}
.exportModal__advanced{
  border: 0;
  border-radius: 10px;
  background: color-mix(in oklab, var(--panel2) 95%, var(--panel) 5%);
  padding: 5px;
  display: grid;
  gap: 5px;
  min-width: 0;
}
.exportModal__tileGrid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  min-width: 0;
}
.exportModal__field{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px;
  gap: 6px;
  min-width: 0;
  align-items: center;
}
.exportModal__fieldLabel{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  font-size: 10.5px;
  color: var(--muted);
  line-height: 1.25;
  min-width: 0;
  white-space: nowrap;
}
.exportModal__inputWrap{
  position: relative;
  width: 100%;
  min-width: 0;
}
.exportModal__field > input,
.exportModal__inputWrap > input{
  width: 100%;
  height: 27px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--panel) 84%, var(--panel2) 16%);
  color: var(--text);
  padding: 0 7px;
  font-size: 12px;
}
.exportModal__inputWrap > input{
  padding-right: 30px;
}
.exportModal__toggleGrid--advanced{
  grid-template-columns: 1fr;
}
.exportModal__toggleRow{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
}
.exportModal__toggleGrid--split{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.exportModal__helpBtn{
  width: 26px;
  min-width: 26px;
  height: 26px;
  border-radius: 8px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in oklab, var(--muted) 78%, var(--text) 22%);
}
.exportModal__inputWrap .exportModal__helpBtn{
  position: absolute;
  top: 50%;
  right: 3px;
  transform: translateY(-50%);
  width: 20px;
  min-width: 20px;
  height: 20px;
  border-radius: 6px;
}
.exportModal__inputWrap .exportModal__helpBtn > i{
  font-size: 11px;
}
.exportModal__helpBtn > i{
  margin-right: 0 !important;
  font-size: 13px;
}
.exportModal__section--preview{
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  align-content: stretch;
  min-width: 0;
}
.exportModal__previewHead{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
}
.exportModal__previewTitle{
  font-size: 12px;
  font-weight: 800;
}
.exportModal__previewMeta{
  font-size: 10.5px;
  color: var(--muted);
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.exportModal__previewStage{
  min-height: 0;
  height: 100%;
  border: 1px solid color-mix(in oklab, var(--border) 90%, var(--text) 10%);
  border-radius: 9px;
  background:
    linear-gradient(45deg, color-mix(in oklab, var(--panel2) 82%, var(--panel) 18%) 25%, transparent 25%) -8px 0/16px 16px,
    linear-gradient(-45deg, color-mix(in oklab, var(--panel2) 82%, var(--panel) 18%) 25%, transparent 25%) -8px 0/16px 16px,
    linear-gradient(45deg, transparent 75%, color-mix(in oklab, var(--panel2) 82%, var(--panel) 18%) 75%) -8px 0/16px 16px,
    linear-gradient(-45deg, transparent 75%, color-mix(in oklab, var(--panel2) 82%, var(--panel) 18%) 75%) -8px 0/16px 16px,
    color-mix(in oklab, var(--panel) 95%, var(--panel2) 5%);
  overflow: hidden;
}
.exportModal__previewCanvas{
  width: 100%;
  height: 100%;
  display: block;
}
.exportModal__previewStage.isPanReady{
  cursor: grab;
}
.exportModal__previewStage.isPanning{
  cursor: grabbing;
}
.exportModal__previewToolbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
}
.exportModal__previewZoom,
.exportModal__previewPager{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.exportModal__previewBtn{
  width: 29px;
  min-width: 29px;
  height: 29px;
  border-radius: 8px;
}
.exportModal__previewBtn > i{
  margin-right: 0 !important;
  font-size: 12px;
}
.exportModal__previewFitBtn{
  height: 29px;
  min-height: 29px;
  border-radius: 8px;
  padding: 0 9px;
  font-size: 11px;
  font-weight: 700;
}
.exportModal__zoomVal,
.exportModal__pageVal{
  min-width: 52px;
  text-align: center;
  font-size: 11px;
  color: color-mix(in oklab, var(--muted) 78%, var(--text) 22%);
}
.exportModal__previewNote{
  font-size: 10.5px;
  color: color-mix(in oklab, var(--muted) 82%, var(--text) 18%);
  line-height: 1.3;
}
.exportModal__hint--mirror{
  border: 0;
  border-radius: 8px;
  background: color-mix(in oklab, var(--accent) 9%, var(--panel2) 91%);
  color: color-mix(in oklab, var(--text) 86%, var(--accent) 14%);
}
.uiTooltip{
  position: fixed;
  z-index: 14000;
  max-width: min(280px, calc(100vw - 18px));
  padding: 7px 9px;
  border-radius: 10px;
  border: 1px solid color-mix(in oklab, var(--border) 84%, var(--text) 16%);
  background: color-mix(in oklab, var(--panel) 96%, var(--panel2) 4%);
  color: color-mix(in oklab, var(--text) 92%, var(--muted) 8%);
  font-size: 11px;
  line-height: 1.35;
  box-shadow: 0 10px 28px color-mix(in oklab, var(--bg) 60%, #020617 40%);
  pointer-events: none;
}
.exportModal__error{
  border: 1px solid rgba(239,68,68,.34);
  background: rgba(239,68,68,.08);
  color: var(--danger);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.35;
}
.exportModal__actions{
  flex-direction: row;
  justify-content: flex-end;
  gap: 6px;
}
.exportModal__actions .btn{
  height: 31px;
  min-height: 31px;
  padding: 0 11px;
}
.exportModal__grid.isLoading{
  opacity: .86;
}
.exportModal__grid.isLoading .exportModal__section{
  position: relative;
}
.exportModal__grid.isLoading .exportModal__section::after{
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: repeating-linear-gradient(
    -45deg,
    color-mix(in oklab, var(--accent) 7%, transparent 93%) 0 10px,
    transparent 10px 20px
  );
  pointer-events: none;
}
.exportModal__grid.isError .exportModal__section{
  border-color: color-mix(in oklab, var(--danger) 42%, var(--border) 58%);
}
.exportModal__actions .btn.isLoading{
  cursor: progress;
}
@media (max-width: 980px){
  .modalCard--export{
    max-width: calc(100vw - 12px);
    height: min(74vh, 760px);
    min-height: 500px;
  }
  .exportModal__layout{
    grid-template-columns: minmax(0, 1.55fr) minmax(270px, 0.85fr);
  }
  .exportModal__section--preview{
    grid-template-rows: auto minmax(0, 1fr) auto auto;
  }
  .exportModal__previewStage{
    min-height: 280px;
  }
}
@media (max-width: 860px){
  .exportModal__layout{
    grid-template-columns: 1fr;
    height: auto;
  }
  .exportModal__section--preview{
    grid-template-rows: auto minmax(320px, 1fr) auto auto;
  }
  .exportModal__previewStage{
    min-height: 320px;
  }
}
@media (max-width: 640px){
  .exportModal__seg--format .exportModal__segBtn,
  .exportModal__seg--legendFill .exportModal__segBtn,
  .exportModal__seg--preset .exportModal__segBtn,
  .exportModal__seg--legendLabelMode .exportModal__segBtn{
    flex-basis: 100%;
  }
  .exportModal__toggleGrid,
  .exportModal__toggleGrid--split{
    grid-template-columns: 1fr;
  }
  .exportModal__printTopToggles{
    grid-template-columns: 1fr;
  }
  .exportModal__tileGrid{
    grid-template-columns: 1fr;
  }
  .exportModal__field{
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .exportModal__previewToolbar{
    flex-direction: column;
    align-items: stretch;
  }
  .exportModal__previewZoom,
  .exportModal__previewPager{
    justify-content: center;
  }
  .exportModal__actions{
    flex-direction: column;
  }
}

.ctxMenu{
  position: fixed;
  z-index: 2000;
  min-width: 280px;
  max-width: min(96vw, 420px);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 8px;
}

.ctxMenu__title{
  font-size: 16px;
  font-weight: 760;
  line-height: 1.25;
  padding: 4px 0 4px;
  letter-spacing: .01em;
}

.ctxMenu__line{
  padding: 0 8px 6px;
  color: var(--muted);
  font-size: 12px;
}

.ctxMenu__sep{
  height: 1px;
  background: var(--border);
  margin: 6px 0;
}

.ctxMenu__item{
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  border-radius: 12px;
  padding: 10px 10px;
  font-weight: 800;
  cursor: pointer;
}

.ctxMenu__item:hover{ background:var(--panel2); }
.ctxMenu__item:disabled{ opacity:.55; cursor:not-allowed; }

.ctxMenu__section{
  display: grid;
  gap: 5px;
}
.ctxMenu__section + .ctxMenu__section{
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed color-mix(in oklab, var(--border) 72%, transparent 28%);
}
.ctxMenu__sectionTitle{
  font-size: 12px;
  font-weight: 520;
  color: var(--text);
  text-transform: none;
  letter-spacing: 0;
  padding: 0;
}
.ctxMenu__sectionMeta{
  font-size: 11px;
  color: var(--muted);
  padding: 0;
}
.ctxMenu__section--actions-first .ctxMenu__actions{
  order: 1;
}
.ctxMenu__section--actions-first .ctxMenu__sectionMeta,
.ctxMenu__section--actions-first .ctxMenu__stats{
  order: 2;
}
.ctxMenu__section--stats-after .ctxMenu__stats{
  margin-top: 2px;
}
.ctxMenu__stats{
  display: grid;
  gap: 4px;
}
.ctxMenu__statsRow{
  border: 1px solid color-mix(in oklab, var(--border) 86%, var(--text) 14%);
  border-radius: 9px;
  background: color-mix(in oklab, var(--panel2) 84%, var(--panel) 16%);
  padding: 5px 6px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 6px;
  row-gap: 1px;
}
.ctxMenu__statsScope{
  font-size: 11px;
  font-weight: 640;
  color: var(--text);
}
.ctxMenu__statsCount,
.ctxMenu__statsPack,
.ctxMenu__statsLeft{
  font-size: 11px;
  color: color-mix(in oklab, var(--muted) 72%, var(--text) 28%);
}
.ctxMenu__statsCount{
  text-align: right;
  color: var(--text);
  font-weight: 620;
}
.ctxMenu__statsPack{
  grid-column: 1;
}
.ctxMenu__statsLeft{
  grid-column: 2;
  text-align: right;
}
.ctxMenu__actions{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}
.ctxMenu__action{
  min-height: 32px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--panel2) 58%, var(--panel) 42%);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  padding: 0 8px;
  font-weight: 500;
  cursor: pointer;
}
.ctxMenu__action:hover{
  background: color-mix(in oklab, var(--panel2) 74%, var(--panel) 26%);
}
.ctxMenu__action:disabled{
  opacity: .5;
  cursor: not-allowed;
}
.ctxMenu__actionIcon{
  width: 16px;
  text-align: center;
  color: color-mix(in oklab, var(--text) 80%, var(--muted) 20%);
}
.ctxMenu__actionLabel{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ctxMenu__action--primary{
  border-color: color-mix(in oklab, var(--accent) 28%, var(--border) 72%);
  background: color-mix(in oklab, var(--accent) 12%, var(--panel) 88%);
}
.ctxMenu__action--primary:hover{
  background: color-mix(in oklab, var(--accent) 18%, var(--panel2) 82%);
}
.ctxMenu__action--danger{
  border-color: color-mix(in oklab, #ef4444 30%, var(--border) 70%);
  color: color-mix(in oklab, #ef4444 70%, var(--text) 30%);
}
.ctxMenu__action--danger .ctxMenu__actionIcon{
  color: color-mix(in oklab, #ef4444 70%, var(--text) 30%);
}
.ctxMenu__action--danger:hover{
  background: color-mix(in oklab, #ef4444 12%, var(--panel2) 88%);
}
.ctxMenu__action.is-active{
  border-color: color-mix(in oklab, var(--accent) 42%, var(--border) 58%);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 22%, transparent 78%);
}
@media (max-width: 680px){
  .ctxMenu{
    min-width: min(92vw, 320px);
  }
  .ctxMenu__actions{
    grid-template-columns: 1fr;
  }
  .ctxMenu__statsRow{
    grid-template-columns: 1fr;
  }
  .ctxMenu__statsCount,
  .ctxMenu__statsLeft{
    text-align: left;
  }
  .ctxMenu__statsLeft{
    grid-column: 1;
  }
}

.selectModeRow{
  margin-top: 8px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel);
}

.selectModeLabel,
.selectScopeLabel{
  font-weight: 900;
  margin-bottom: 6px;
}

.selectModeButtons,
.selectScopeButtons{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom: 8px;
}

.selectModeHint{
  font-size: 12px;
  color: var(--muted);
}

.layerBtn--selectAll{
  width: 28px;
  height: 28px;
  border-radius: 10px;
  font-weight: 900;
}
.layerBtn--mergeDown,
.layerBtn--stats{
  width: 28px;
  height: 28px;
  border-radius: 10px;
  font-weight: 900;
}

.selMenu{
  position: fixed;
  z-index: 1800;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 10px;
  min-width: 220px;
}

.selMenu{
  display: none !important;
}

.selMenu__title{
  font-weight: 950;
  margin-bottom: 8px;
}

.selMenu__row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.selMenu__row + .selMenu__row{
  margin-top: 8px;
}
.selMenu__row--danger{
  padding-top: 6px;
  border-top: 1px dashed color-mix(in oklab, var(--border) 72%, transparent 28%);
}
.selMenu__btn{
  min-height: 32px;
  padding: 0 10px;
  border-radius: 10px;
}
.selMenu__btn--primary{
  border-color: color-mix(in oklab, var(--accent) 28%, var(--border) 72%);
  background: color-mix(in oklab, var(--accent) 10%, var(--panel) 90%);
}
.selMenu__btn--primary:hover{
  background: color-mix(in oklab, var(--accent) 16%, var(--panel2) 84%);
}
.selMenu__btn--danger{
  border-color: color-mix(in oklab, #ef4444 28%, var(--border) 72%);
  color: color-mix(in oklab, #ef4444 76%, var(--text) 24%);
}
.selMenu__btn--danger:hover{
  background: color-mix(in oklab, #ef4444 12%, var(--panel2) 88%);
}


/* ===========================
   Web‑SaaS polish (Notion/Linear vibe)
   =========================== */

.topbar{
  align-items:center;
  padding: 8px 12px;
}

.brand__title{ font-size: 14px; }
.brand__subtitle{ font-size: 12px; }

.btn, .toolBtn, .tbMenuItem, .ctxMenu__item{
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .05s ease;
}

.btn:focus-visible,
.toolBtn:focus-visible,
.tbMenuItem:focus-visible,
.ctxMenu__item:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline: none;
  box-shadow: var(--ring);
}

.btn--ghost{
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}
.btn--ghost:hover{ background: var(--panel2); }
.btn--ghost:active{ transform: translateY(1px); }

/* Tool buttons with icons */
.toolBtn{
  background: var(--panel);
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  padding: 0 12px;
  text-align:left;
}
.toolBtn__icon{ display:inline-flex; width:18px; height:18px; }
.toolBtn__icon svg{ display:block; }
.toolBtn__label{ flex:1; min-width: 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.toolBtn:hover{ background: var(--panel2); }
.toolBtn--active{
  border-color: rgba(37,99,235,.55);
  box-shadow: var(--ring);
}

/* Topbar segmented / menus */
.tbSeg{ background: var(--panel); }
.tbMenuPanel{ background: var(--panel); }
.tbMenuItem:hover{ background: var(--panel2); }

/* Canvas background button (replaces system <input type="color">) */
.tbColorBtn{
  height: var(--btn-h);
  display:flex;
  align-items:center;
  gap:8px;
  padding: 0 10px;
  border-radius: 12px;
  border:1px solid var(--border);
  background: var(--panel);
  cursor:pointer;
}
.tbColorBtn:hover{ background: var(--panel2); }
.tbColorBtn__sw{
  width:18px;
  height:18px;
  border-radius: 6px;
  border:1px solid rgba(15,23,42,.18);
  background:#ffffff;
}
:root[data-theme="dark"] .tbColorBtn__sw{ border-color: rgba(148,163,184,.25); }
.tbColorBtn__label{
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--muted);
  font-weight: 700;
  font-size: 12px;
}

/* Color picker modal */
.colorPicker{
  display:grid;
  grid-template-columns: auto minmax(250px, 1fr);
  gap: 12px;
  align-items: start;
}
@media (max-width: 720px){
  .colorPicker{ grid-template-columns: 1fr; }
  .colorPicker__svRow{ width: min(340px, 100%); }
  .colorPicker__sv{ width: 100%; height: auto; }
}
.colorPicker__svRow{
  display: grid;
  grid-template-columns: 220px 28px;
  gap: 10px;
  align-items: start;
}
.colorPicker__sv{
  border: 1px solid var(--border);
  border-radius: 12px;
  touch-action: none;
  width: 220px;
  height: 220px;
  display:block;
}
.colorPicker__hueBar{
  width: 28px;
  height: 220px;
  border: 1px solid var(--border);
  border-radius: 12px;
  touch-action: none;
  display: block;
}
.colorPicker__right{
  display:flex;
  flex-direction:column;
  gap: 8px;
  min-width: 220px;
}
.colorPicker__row{
  display:flex;
  gap: 8px;
  align-items:center;
}
.colorPicker__swatch{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border:1px solid var(--border);
  background:#fff;
}
:root[data-theme="dark"] .colorPicker__swatch{ background: rgba(255,255,255,.12); }
.colorPicker__hex{
  flex:1;
  height: 44px;
  border-radius: 12px;
  border:1px solid var(--border);
  padding: 0 12px;
  background: var(--panel);
  color: var(--text);
  font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
}
.colorPicker__actions{
  display:flex;
  gap: 10px;
  justify-content:flex-end;
  margin-top: 2px;
}
.colorPicker__presetsPinned{
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  background: color-mix(in oklab, var(--panel2) 84%, var(--panel) 16%);
}
.colorPicker__presets{
  max-height: min(34vh, 260px);
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 6px;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 6px;
  background: color-mix(in oklab, var(--panel2) 88%, var(--panel) 12%);
}
.colorPicker__preset{
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  cursor: pointer;
  text-align: left;
}
.colorPicker__preset--pin{
  padding: 3px 8px;
}
.colorPicker__preset:hover{
  background: var(--panel2);
}
.colorPicker__presetSw{
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  flex: 0 0 14px;
}
.colorPicker__presetText{
  font-size: 11px;
  line-height: 1.15;
  white-space: nowrap;
}
.modalOverlay--top{
  z-index: 1000001 !important;
}

/* Modals & floating menus in dark theme */
.modalCard{
  background: var(--panel);
  border: 1px solid color-mix(in oklab, var(--border) 84%, var(--text) 16%);
}
:root[data-theme="dark"] .modalOverlay{ background: rgba(9,13,20,.62); }
:root[data-theme="dark"] .modalCard{
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--panel) 92%, #0e151e 8%),
    color-mix(in oklab, var(--panel2) 68%, var(--panel) 32%)
  );
  border-color: rgba(186,202,221,.22);
  box-shadow: 0 28px 66px rgba(4,7,12,.62);
}

.ctxMenu{ background: var(--panel); }
.ctxMenu__item:hover{ background: var(--panel2); }
:root[data-theme="dark"] .ctxMenu{
  border-color: rgba(183,199,218,.22);
  box-shadow: 0 16px 36px rgba(4,7,12,.56);
}
:root[data-theme="dark"] .ctxMenu__action{
  border-color: rgba(148,163,184,.26);
}

.selMenu{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 14px 32px color-mix(in oklab, var(--bg) 62%, #020617 38%);
}
:root[data-theme="dark"] .selMenu{
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--panel) 90%, #111824 10%),
    color-mix(in oklab, var(--panel2) 72%, var(--panel) 28%)
  );
  border-color: rgba(183,199,218,.22);
}
:root[data-theme="dark"] .selMenu__title{ color: var(--text); }

.selectModeRow{
  background: var(--panel2);
  border: 1px solid var(--border);
}
.selectModeHint{ color: var(--muted); }


/* Dark‑mode friendliness for commonly white surfaces */
.canvasWrap{ background: var(--panel); }
.chip{ background: var(--panel); }
.chip:hover{ background: var(--panel2); }
.layerItem{ background: var(--panel); }
.layerItem:hover{ background: var(--panel2); }
.bgPreviewBox{ background: var(--panel); }

/* ==============================
   UI hotfix iteration 2
   ============================== */

/* Prevent horizontal scroll in side panels */
.panel{ overflow-x: hidden; }

/* Tool dock host (left panel) */
#leftPanel{ position: relative; }
#toolDockHost{
  position: absolute;
  inset: 8px;
  z-index: 48;
  pointer-events: none;
}
#toolDockHost:empty{ display:none; }
#leftPanel.isToolSession > .panel__section{ display:none; }
#leftPanel.isToolSession #toolDockHost{ display:block; }
#leftPanel.isToolSession #toolDockHost .toolDock{ pointer-events:auto; }

#toolDockHost .toolDock{
  transform: translateX(-12px);
  opacity: 0;
  transition: transform .16s ease, opacity .16s ease;
}
#toolDockHost .toolDock.is-enter,
#toolDockHost .toolDock.is-open{
  transform: translateX(0);
  opacity: 1;
}
#toolDockHost .toolDock.is-leave{
  transform: translateX(-12px);
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce){
  #toolDockHost .toolDock{
    transition: none;
    transform: none;
    opacity: 1;
  }
  #toolDockHost .toolDock.is-leave{
    opacity: 0;
  }
}

/* Tool dock – default style (works inside panels) */
.toolDock{
  position: relative;
  top: auto; left: auto;
  z-index: 20;
  padding: 10px 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  color: var(--text);
  box-shadow: 0 12px 30px rgba(2,6,23,.08);
  max-width: none;
  max-height: none;
  overflow: visible;
}
.toolDock [hidden]{
  display: none !important;
}
.toolDock__meta{ color: var(--muted); font-weight: 900; }
.toolDock__hint{ color: var(--muted); }
.toolDock__row{ gap: 8px; }
.toolDock__input,
.toolDock__input--num,
.toolDock__input--sel,
.toolDock__input--txt{
  border: 1px solid var(--border);
  background: var(--panel2);
  color: var(--text);
}
.toolDock__input:focus,
.toolDock__input--num:focus,
.toolDock__input--sel:focus,
.toolDock__input--txt:focus{
  outline: none;
  border-color: rgba(96,165,250,.65);
  box-shadow: 0 0 0 4px rgba(59,130,246,.18);
}
.toolDock__sw{ background: var(--panel2); }

/* If tool dock is still rendered on canvas, keep the "floating" look */
#canvasWrap .toolDock{
  position: absolute;
  top: calc(var(--rulerSize) + 12px);
  left: calc(var(--rulerSize) + 12px);
  z-index: 60;
  padding: 10px 12px;
  background: rgba(15,23,42,.78);
  border: 1px solid rgba(148,163,184,.22);
  color: #fff;
  backdrop-filter: blur(6px);
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
  max-width: 360px;
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  overflow-x: hidden;
}
#canvasWrap .toolDock__meta{ color: rgba(226,232,240,.85); }
#canvasWrap .toolDock__hint{ color: rgba(226,232,240,.78); }
#canvasWrap .toolDock__input,
#canvasWrap .toolDock__input--num,
#canvasWrap .toolDock__input--sel,
#canvasWrap .toolDock__input--txt{
  background: rgba(15,23,42,.88);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
}
#canvasWrap .toolDock__sw{ background: rgba(15,23,42,.88); }

/* Canvas size inputs (single row) */
.sizeGrid{
  display: grid;
  grid-template-columns: 1fr 1fr 92px;
  gap: 10px;
  align-items: end;
}
.field{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.fieldLabel{ font-size:12px; font-weight:900; color: var(--muted); }

/* Palette modal */
.palHead{
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: -12px -14px 0;
  padding: 12px 14px 10px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}
.palSearch{
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel2);
  color: var(--text);
}
.palSearch:focus{
  outline: none;
  border-color: rgba(96,165,250,.65);
  box-shadow: 0 0 0 4px rgba(59,130,246,.18);
}
.palList{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 560px){ .palList{ grid-template-columns: 1fr; } }
.palTile{
  display:flex; align-items:center; gap:10px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel2);
  cursor: pointer;
  user-select: none;
}
.palTile:hover{ border-color: rgba(96,165,250,.55); }
.palThumb{ width: 38px; height: 38px; border-radius: 12px; border: 1px solid rgba(0,0,0,.12); box-shadow: 0 8px 18px rgba(2,6,23,.08) inset, 0 2px 8px rgba(2,6,23,.08); }
.palText{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
/* main name */
.palTitle{
  font-weight: 900;
  line-height: 1.15;
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
/* code under name */
.palCode{
  font-size: 12px;
  color: var(--muted);
  font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Layer list – show titles (wrap to 2 lines) */
.layerItem__title{
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.layerItem__btns{ gap: 4px; }

/* Cards use theme tokens */
.cardRow{ background: var(--panel2); border-color: var(--border); }
.cardRow:hover{ border-color: rgba(96,165,250,.45); }
.bgEditHint{ background: var(--panel2); border: 1px solid var(--border); color: var(--muted); }

/* Project menu (portal) */
.tbMenuPanel--portal{ position: fixed; }

/* Topbar compact mode */
.topbar__right{ overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.topbar__right::-webkit-scrollbar{ display:none; }
@media (max-width: 1320px){
  .brand__sub{ display:none; }
  .topbar{ padding: 0 10px; gap: 8px; }
}
@media (max-width: 1280px){
  /* Hide labels, keep icons */
  #tbProjectGroup .btn > span:not(.tbCaret){ display:none; }
  #tbViewMode .tbSegBtn > span{ display:none; }
  #tbViewGroup .tbToggle > span{ display:none; }
  #tbMirrorGroup .tbToggle > span{ display:none; }
  #tbExportGroup .btn > span{ display:none; }
  #tbBwMultiGroup .btn > span{ display:none; }
  #tbCanvasBgGroup .btn > span{ display:none; }
  #tbHistoryGroup .btn > span{ display:none; }
  .tbColorBtn .tbColorBtn__hex{ display:none; }
}
@media (max-width: 1080px){
  .topbar__right{ overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .topbar__right::-webkit-scrollbar{ display:none; }
}

/* Better icon alignment in topbar buttons */
.tbSegBtn i, .tbToggle i, .tbMenuItem i, .btn:not(.btn--icon) > i{ margin-right: 8px; }
@media (max-width: 1280px){
  .tbSegBtn i, .tbToggle i, .tbMenuItem i, .btn:not(.btn--icon) > i{ margin-right: 0; }
}

/* Toasts */
.toastHost{
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 11000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.toast{
  pointer-events: auto;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 16px 40px rgba(2,6,23,.18);
  font-weight: 700;
  max-width: min(420px, calc(100vw - 36px));
  white-space: pre-wrap;
}
.toast--success{ border-color: rgba(34,197,94,.45); }
.toast--error{ border-color: rgba(248,113,113,.55); }
.toast--warn{ border-color: rgba(251,191,36,.55); }
.toast--out{ opacity: 0; transform: translateY(6px); transition: .18s ease; }

/* Alert modal */
.modalCard--alert .alertText{ white-space: pre-wrap; line-height: 1.45; font-weight: 700; }
.modalCard--alertError{ border-color: rgba(248,113,113,.55); }
.modalCard--alertWarn{ border-color: rgba(251,191,36,.55); }
.modalCard--alertGood{ border-color: rgba(34,197,94,.45); }


/* ==============================
   UI hotfix v5 — left panel & layers polish
   ============================== */

.panel__title--row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}

.sizeMeta{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel2);
  color: var(--muted);
  font-weight: 900;
  font-size: 12px;
  white-space: nowrap;
}
.sizeMeta__stone{
  width: 14px;
  height: 14px;
  border-radius: 8px;
  border: 1px solid rgba(15,23,42,.18);
  background: var(--activeColor, #2563eb);
  box-shadow: 0 8px 18px rgba(2,6,23,.12) inset;
}
:root[data-theme="dark"] .sizeMeta__stone{ border-color: rgba(148,163,184,.25); }

.chip{
  display:inline-flex;
  align-items:center;
  gap: 8px;
}

.chipStone{
  display:inline-flex;
  flex: 0 0 auto;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.18);
  background: var(--activeColor, #2563eb);
  box-shadow: 0 8px 18px rgba(2,6,23,.12) inset;
}
:root[data-theme="dark"] .chipStone{ border-color: rgba(148,163,184,.25); }

.chipLabel{ line-height: 1; }

.btn--color{
  display:flex;
  min-height: calc(var(--btn-h) + 6px);
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 0 12px;
}
.btn--color .btnColor__sw{
  width: 24px;
  height: 24px;
  border-radius: 10px;
  border: 1px solid rgba(15,23,42,.18);
  background: var(--activeColor, #2563eb);
  box-shadow: 0 10px 20px rgba(2,6,23,.10) inset;
  flex: 0 0 auto;
}
:root[data-theme="dark"] .btn--color .btnColor__sw{ border-color: rgba(148,163,184,.25); }

.btnColor__body{ display:flex; flex-direction:column; align-items:flex-start; gap: 2px; flex: 1; min-width:0; }
.btnColor__title{ font-weight: 950; }
.btnColor__meta{ white-space: nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.btnColor__caret{ opacity: .65; }

/* Tool grid safety: avoid horizontal overflow */
.toolGrid{ min-width: 0; }
.toolBtn{ min-width: 0; }
.toolBtn__label{ font-size: 12px; }

/* Layers: title row + actions row */
.layerItem__top{ display:flex; flex-direction:column; align-items:stretch; gap: 8px; }
.layerItem__row{ display:flex; align-items:center; gap: 8px; min-width:0; }
.layerItem__row--main{ justify-content:flex-start; }
.layerItem__row--actions{ justify-content:flex-end; }
.layerItem__btns{ width:100%; justify-content:flex-end; }

/* Make the zoom slider less wide in the topbar on smaller screens */
#tbZoomRange{ width: 140px; }
@media (max-width: 1280px){ #tbZoomRange{ width: 110px; } }
@media (max-width: 980px){ #tbZoomRange{ width: 90px; } }

/* =========================================================
   UI Stage 1 overrides: topbar, left panel, palettes, layers
   ========================================================= */

/* Two-row topbar for 13" laptops without horizontal scrolling */
.topbar{
  height: auto;
  min-height: var(--topbar-h);
  align-items: flex-start;
  padding: 8px 12px 10px;
}
.topbar__left{
  display: flex;
  align-items: center;
  padding-top: 2px;
}
.topbar__right{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  overflow: visible;
}
.topbar__serviceRow,
.topbar__groupsRow{
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.topbar__serviceRow{
  justify-content: flex-end;
  flex-wrap: wrap;
}
.topbar__groupsRow{
  justify-content: flex-end;
  flex-wrap: wrap;
}
.topbar__groupsRow .tbGroup{
  flex: 0 0 auto;
}

@media (max-width: 1280px){
  .topbar{
    padding: 8px 10px 10px;
    gap: 8px;
  }
  .topbar__groupsRow .tbGroup .btn > span:not(.tbCaret),
  .topbar__groupsRow .tbGroup .tbToggle > span,
  .topbar__groupsRow .tbGroup .tbSegBtn > span,
  .topbar__groupsRow .tbGroup .tbColorBtn__hex{
    display: none;
  }
  #tbViewMenuPanel #tbViewMode .tbSegBtn > span,
  #tbViewMenuPanel .tbToggle > span,
  #tbViewMenuPanel .tbColorBtn__hex{
    display: inline;
  }
  #tbViewMenuPanel .tbSegBtn i,
  #tbViewMenuPanel .tbToggle i,
  #tbViewMenuPanel .btn i{
    margin-right: 8px;
  }
}

@media (max-width: 1080px){
  .topbar__left{ display: none; }
  .topbar__serviceRow,
  .topbar__groupsRow{
    justify-content: flex-start;
  }
}

/* View dropdown menu */
.tbViewMenuPanel{
  min-width: min(420px, calc(100vw - 16px));
  max-width: min(560px, calc(100vw - 16px));
}
.tbViewMenuBody{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#tbViewMenuPanel .tbSep{
  width: 100%;
  height: 1px;
  margin: 2px 0;
}
.tbViewMenuSec{
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tbViewMode{
  width: 100%;
}
.tbViewMode .tbSegBtn{
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.tbViewToggleGrid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.tbViewToggleGrid .tbToggle,
.tbViewMenuSec--extra .tbToggle{
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}
.tbViewMenuSec--extra{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.tbViewMenuSec--theme .tbThemeToggle{
  width: 100%;
  justify-content: flex-start;
}
.tbViewCanvasBgRow{
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.tbViewCanvasBgRow .tbColorBtn{
  flex: 1 1 220px;
}
.tbViewCanvasBgRow .tbColorReset{
  flex: 0 0 auto;
}

@media (max-width: 760px){
  .tbViewMenuPanel{
    min-width: min(360px, calc(100vw - 16px));
  }
  .tbViewToggleGrid,
  .tbViewMenuSec--extra{
    grid-template-columns: 1fr;
  }
}

/* Legacy compact size selector container overrides removed in Stage 1.2 */

/* Canvas size apply spacing */
#btnApplyCanvasSize{
  margin-top: 8px;
}

/* Palette: remove gray frame around crystals */
.palThumb{
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Tool-mode cards cleanup */
.bezierModeRow,
.pencilModeRow,
.pencilSnapRow,
.fillShapeRow,
.selectModeRow{
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px;
}
.bezierModeButtons,
.pencilModeButtons,
.pencilSnapButtons,
.selectModeButtons,
.selectScopeButtons{
  gap: 6px;
}
.btn--seg{
  min-height: 32px;
  padding: 6px 8px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel);
  font-size: 12px;
}
.btn--segActive{
  border-color: rgba(37,99,235,.50);
  box-shadow: 0 0 0 2px rgba(37,99,235,.14);
}

/* Layer name modal */
.layerNameModal{
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: min(420px, 92vw);
}
.layerNameModal__input{
  height: 40px;
}
.layerNameModal__actions{
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.layerNameModal__actions .btn{
  min-width: 120px;
}

@media (max-width: 560px){
  .layerNameModal{
    min-width: 0;
  }
  .layerNameModal__actions{
    flex-direction: column;
  }
  .layerNameModal__actions .btn{
    width: 100%;
  }
}

/* Projects modal (scoped redesign) */
.modalCard--projects{
  width: min(748px, 100%);
}

.projectsModal{
  display: grid;
  gap: 10px;
  min-width: min(680px, 95vw);
}

.modalCard--projects .btn,
.modalCard--projects .loginInput,
.modalCard--projects select{
  font-weight: 500;
}

.modalCard--projects .modalHeader{
  padding-bottom: 8px;
}

.modalCard--projects .modalBody{
  padding-top: 9px;
  gap: 9px;
}

.projectsModal__top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 11px;
  border: 1px solid color-mix(in oklab, var(--border) 88%, var(--text) 12%);
  border-radius: 14px;
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--panel2) 80%, var(--panel) 20%),
    color-mix(in oklab, var(--panel2) 64%, var(--panel) 36%)
  );
}

.projectsModal__topStats{
  min-width: 0;
  flex: 0 1 auto;
}

.projectsModal__statsRow{
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.projectsModal__topActions{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 1 1 360px;
  min-width: 280px;
}

.projectsModal__techLine{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--border) 86%, var(--text) 14%);
  background: color-mix(in oklab, var(--panel) 82%, var(--panel2) 18%);
  color: color-mix(in oklab, var(--muted) 88%, var(--text) 12%);
  font-size: 10.5px;
  line-height: 1.2;
  white-space: nowrap;
}

.projectsModal__techLine > i{
  margin-right: 0 !important;
  font-size: 11px;
  line-height: 1;
}

.projectsModal__nameInput{
  flex: 1 1 220px;
  min-width: 170px;
  height: 34px;
  font-size: 12px;
}

.projectsModal__primaryBtn,
.projectsModal__importBtn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 11px;
  border-radius: 10px;
  white-space: nowrap;
}

.projectsModal__primaryBtn > i,
.projectsModal__importBtn > i{
  margin-right: 0 !important;
  font-size: 12px;
}

.projectsModal__list{
  display: grid;
  gap: 8px;
}

.projectsModal__state{
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 10px;
  background: var(--panel2);
  color: var(--muted);
  font-weight: 500;
}

.projectsModal__state--error{
  border-color: color-mix(in oklab, #ef4444 35%, var(--border) 65%);
  color: color-mix(in oklab, #ef4444 72%, var(--text) 28%);
}

.projectsModal__stateHint{
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
  margin-top: 2px;
}

.projectsModal__item{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 10px;
  align-items: start;
  padding: 10px;
  border-radius: 11px;
  border: 1px solid var(--border);
  background: var(--panel);
  transition: border-color .14s ease, background .14s ease, box-shadow .14s ease;
}

.projectsModal__item:hover{
  background: var(--panel2);
}

.projectsModal__item.is-active{
  border-color: color-mix(in oklab, var(--accent) 45%, var(--border) 55%);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 18%, transparent 82%);
}

.projectsModal__meta{
  grid-column: 1;
  min-width: 0;
  display: grid;
  gap: 4px;
}

.projectsModal__nameRow{
  display: flex;
  align-items: center;
  min-width: 0;
}

.projectsModal__name{
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.projectsModal__nameInlineEdit{
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  min-width: 0;
}

.projectsModal__nameInputInline{
  flex: 1 1 0;
  min-width: 0;
  height: 32px;
  font-size: 12px;
}

.projectsModal__nameActions{
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
}

.projectsModal__nameActionBtn{
  width: 30px;
  min-width: 30px;
  height: 30px;
  border-radius: 8px;
}

.projectsModal__nameActionBtn > i{
  margin-right: 0 !important;
  font-size: 12px;
  line-height: 1;
}

.projectsModal__controls{
  grid-column: 2;
  display: grid;
  gap: 7px;
  width: max-content;
  max-width: 100%;
  align-content: start;
  justify-items: stretch;
}

.projectsModal__metaRows{
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.projectsModal__actions{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
  width: max-content;
  max-width: 100%;
}

.projectsModal__action{
  width: 34px;
  min-width: 34px;
  height: 34px;
  border-radius: 9px;
}

.projectsModal__action > i{
  margin-right: 0 !important;
  font-size: 13px;
  line-height: 1;
}

.projectsModal__action.is-disabled,
.projectsModal__action:disabled{
  opacity: .48;
  cursor: not-allowed;
}

.projectsModal__action.is-danger{
  border-color: color-mix(in oklab, #ef4444 36%, var(--border) 64%);
  color: color-mix(in oklab, #ef4444 78%, var(--text) 22%);
}

.projectsModal__action.is-danger:hover{
  background: color-mix(in oklab, #ef4444 12%, var(--panel2) 88%);
}

.projectsModal__sizeInline{
  display: none;
  width: 100%;
}

.projectsModal__sizeInline.is-open{
  display: block;
}

.projectsModal__sizeInlineInner{
  display: grid;
  gap: 7px;
  margin-top: 1px;
  padding: 9px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: color-mix(in oklab, var(--panel2) 90%, var(--panel) 10%);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .16s ease, transform .16s ease;
}

.projectsModal__sizeInline.is-open .projectsModal__sizeInlineInner{
  opacity: 1;
  transform: translateY(0);
}

.projectsModal__sizeGrid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.projectsModal__sizeField--unit{
  grid-column: 1 / -1;
}

.projectsModal__sizeField{
  display: grid;
  gap: 4px;
}

.projectsModal__sizeFieldLabel{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  color: var(--muted);
  line-height: 1.25;
}

.projectsModal__sizeFieldLabel > i{
  margin-right: 0 !important;
  font-size: 12px;
  line-height: 1;
}

.projectsModal__sizeInput,
.projectsModal__sizeUnit{
  height: 32px;
  min-width: 0;
  font-size: 12px;
}

.projectsModal__sizeHint{
  font-size: 10.5px;
  color: var(--muted);
  line-height: 1.3;
}

.projectsModal__sizeActions{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

.projectsModal__sizeBtn{
  height: 32px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  justify-content: center;
}

.projectsModal__sizeBtn > i{
  margin-right: 0 !important;
  font-size: 12px;
  line-height: 1;
}

@media (max-width: 860px){
  .modalCard--projects{
    width: min(760px, 100%);
  }
  .projectsModal{
    min-width: 0;
  }
  .projectsModal__top{
    align-items: stretch;
    flex-direction: column;
  }
  .projectsModal__topActions{
    width: 100%;
    min-width: 0;
    justify-content: flex-start;
  }
  .projectsModal__item{
    grid-template-columns: 1fr;
    align-items: start;
  }
  .projectsModal__controls{
    grid-column: 1;
    width: 100%;
  }
  .projectsModal__actions{
    justify-content: flex-start;
    width: 100%;
  }
  .projectsModal__sizeInline{
    width: 100%;
  }
}

@media (max-width: 560px){
  .projectsModal__top{
    padding: 9px;
  }
  .projectsModal__topActions{
    flex-direction: column;
    align-items: stretch;
  }
  .projectsModal__nameInput{
    min-width: 0;
  }
  .projectsModal__primaryBtn,
  .projectsModal__importBtn{
    width: 100%;
    justify-content: center;
  }
  .projectsModal__sizeGrid{
    grid-template-columns: 1fr;
  }
  .projectsModal__sizeActions{
    grid-template-columns: 1fr;
  }
  .projectsModal__sizeBtn{
    width: 100%;
    justify-content: center;
  }
}

/* Contour outline modal (scoped redesign) */
.modalCard--contourOutline{
  width: min(1160px, 100%);
  max-height: calc(100vh - 24px);
  background: color-mix(in oklab, #ffffff 74%, var(--panel) 26%);
  border-color: color-mix(in oklab, var(--border) 82%, var(--text) 18%);
  box-shadow: 0 30px 72px rgba(18,30,46,.20);
}

.modalCard--contourOutline .modalHeader{
  padding-bottom: 10px;
  border-bottom-color: color-mix(in oklab, var(--border) 84%, var(--text) 16%);
}

.modalCard--contourOutline .modalBody{
  padding-top: 10px;
  gap: 8px;
}

.contourModal{
  display: grid;
  gap: 8px;
  min-width: 0;
}

.contourModal__top{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.contourModal__topActions{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.contourModal__pickBtn{
  height: 36px;
  padding: 0 12px;
  white-space: nowrap;
}

.contourModal__status{
  min-width: 0;
  font-size: 12px;
  line-height: 1.35;
  color: var(--muted);
  border: 1px solid color-mix(in oklab, var(--border) 86%, var(--text) 14%);
  border-radius: 10px;
  background: color-mix(in oklab, var(--panel) 84%, #ffffff 16%);
  padding: 8px 10px;
}

.contourModal__layout{
  display: grid;
  grid-template-columns: minmax(0, 1.56fr) minmax(0, 1fr);
  grid-template-areas:
    "preview detection"
    "preview params"
    "preview size";
  gap: 8px;
  min-width: 0;
}

[data-layout-slot="preview"]{ grid-area: preview; }
[data-layout-slot="detection"]{ grid-area: detection; }
[data-layout-slot="params"]{ grid-area: params; }
[data-layout-slot="size"]{ grid-area: size; }
.contourModal__previewHead{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.contourModal__layerMode{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.contourModal__layerMode .btn{
  min-height: 30px;
  border-radius: 999px;
  padding-inline: 10px;
}

.contourModal__layerMode .btn.isActive{
  background: color-mix(in oklab, var(--accent) 17%, #ffffff 83%);
  border-color: color-mix(in oklab, var(--accent) 45%, var(--border) 55%);
  color: color-mix(in oklab, var(--accent) 72%, var(--text) 28%);
}

.contourModal__card{
  border: 1px solid color-mix(in oklab, var(--border) 86%, var(--text) 14%);
  border-radius: 13px;
  background: linear-gradient(
    180deg,
    color-mix(in oklab, #ffffff 76%, var(--panel) 24%),
    color-mix(in oklab, #ffffff 56%, var(--panel2) 44%)
  );
  padding: 8px;
  min-width: 0;
  box-shadow: 0 8px 20px rgba(18,30,46,.08);
}

.contourModal__cardTitle{
  margin: 0 0 6px;
  font-size: 12px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--text);
}

.contourModal__previewCanvas{
  display: block;
  width: 100%;
  height: auto;
  min-height: 340px;
  max-height: 56vh;
  border-radius: 11px;
  border: 1px solid color-mix(in oklab, var(--border) 84%, var(--text) 16%);
  background:
    radial-gradient(600px circle at 6% 4%, color-mix(in oklab, var(--panel2) 70%, #ffffff 30%), transparent 66%),
    linear-gradient(180deg, color-mix(in oklab, #ffffff 86%, var(--panel) 14%), color-mix(in oklab, #ffffff 70%, var(--panel2) 30%));
}

.contourModal__previewCanvas.isPanReady{ cursor: grab; }
.contourModal__previewCanvas.isPanning{ cursor: grabbing; }

.contourModal__zoom{
  display: grid;
  grid-template-columns: auto auto auto minmax(120px, 1fr);
  gap: 6px;
  align-items: center;
  margin-top: 8px;
}

.contourModal__zoomVal{
  min-width: 66px;
  justify-content: center;
}

.contourModal__checks{
  display: grid;
  gap: 5px;
}

.contourModal__labelWrap{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.contourModal__infoBtn{
  width: 19px;
  height: 19px;
  min-width: 19px;
  min-height: 19px;
}

.contourModal__range{
  width: 100%;
  accent-color: var(--accent);
}

.contourModal__rangeRow{
  display: grid;
  grid-template-columns: minmax(126px, auto) minmax(0, 1fr) 40px;
  gap: 6px;
  align-items: center;
}

.contourModal__label{
  font-size: 12px;
  line-height: 1.3;
  font-weight: 500;
  color: var(--text);
}

.contourModal__value{
  text-align: right;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.contourModal__check{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 26px;
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
}

.contourModal__check input{
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}

.contourModal__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.contourModal__grid--sizeRow{
  grid-template-columns: 88px minmax(0, 1fr) minmax(0, 1fr) minmax(96px, 1fr);
  align-items: end;
}

.contourModal__field{
  display: grid;
  gap: 3px;
  min-width: 0;
}

.contourModal__field--full{
  grid-column: 1 / -1;
}

.contourModal__select,
.contourModal__input{
  width: 100%;
  min-height: 32px;
  padding: 0 9px;
  border-radius: 10px;
  border: 1px solid color-mix(in oklab, var(--border) 82%, var(--text) 18%);
  background: color-mix(in oklab, var(--panel) 82%, #ffffff 18%);
  color: var(--text);
  outline: none;
}

.contourModal__select--compact,
.contourModal__input--compact{
  min-height: 30px;
  height: 30px;
  padding: 0 8px;
}

.contourModal__advanced{
  margin-top: 2px;
  padding-top: 6px;
  border-top: 1px dashed color-mix(in oklab, var(--border) 84%, var(--text) 16%);
  display: grid;
  gap: 6px;
}

.contourModal__advanced.isHidden{
  display: none;
}

.contourModal__pillGroup{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.contourModal__pill{
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--border) 80%, var(--text) 20%);
  background: color-mix(in oklab, var(--panel) 76%, #ffffff 24%);
  color: color-mix(in oklab, var(--text) 88%, var(--muted) 12%);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.contourModal__pill:hover{
  background: color-mix(in oklab, var(--panel2) 82%, #ffffff 18%);
}

.contourModal__pill.isOn{
  border-color: color-mix(in oklab, var(--accent) 58%, var(--border) 42%);
  background: color-mix(in oklab, var(--accent) 20%, #ffffff 80%);
  color: color-mix(in oklab, var(--accent) 78%, var(--text) 22%);
}

:root[data-theme="dark"] .contourModal__pill{
  background: color-mix(in oklab, var(--panel2) 84%, #0b1220 16%);
  color: color-mix(in oklab, var(--text) 92%, var(--muted) 8%);
}

:root[data-theme="dark"] .contourModal__pill.isOn{
  background: color-mix(in oklab, var(--accent) 28%, var(--panel2) 72%);
  color: #ecf3ff;
}

.contourModal__pillGroup--sizes .contourModal__pill{
  min-width: 56px;
  justify-content: center;
}

.contourModal__select:focus,
.contourModal__input:focus{
  border-color: color-mix(in oklab, var(--accent) 56%, var(--border) 44%);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 16%, transparent);
}

.contourModal__colorBtn{
  width: 100%;
  min-height: 32px;
  justify-content: flex-start;
  gap: 8px;
  border-radius: 10px;
}

.contourModal__colorSw{
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--border) 80%, var(--text) 20%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.55);
}

.contourModal__sizeInput{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 5px;
}

.contourModal__hint{
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.contourModal__hint--auto{
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed color-mix(in oklab, var(--border) 80%, var(--text) 20%);
}

.contourModal__hint--threshold{
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed color-mix(in oklab, var(--border) 84%, var(--text) 16%);
}

.contourModal__hint--composite{
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed color-mix(in oklab, var(--border) 84%, var(--text) 16%);
}

.contourModal__cardActions{
  display: flex;
  justify-content: flex-start;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed color-mix(in oklab, var(--border) 80%, var(--text) 20%);
}

@media (max-width: 1140px){
  .modalCard--contourOutline{
    width: min(1060px, 100%);
  }
  .contourModal__layout{
    grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr);
  }
}

@media (max-width: 980px){
  .modalCard--contourOutline{
    width: min(980px, 100%);
  }
  .contourModal__layout{
    display: flex;
    flex-direction: column;
  }
  .contourModal__layout > [data-layout-slot="preview"]{ order: 1; }
  .contourModal__layout > [data-layout-slot="detection"]{ order: 2; }
  .contourModal__layout > [data-layout-slot="params"]{ order: 3; }
  .contourModal__layout > [data-layout-slot="size"]{ order: 4; }
  .contourModal__rangeRow{
    grid-template-columns: minmax(126px, auto) minmax(0, 1fr) 42px;
  }
  .contourModal__grid--sizeRow{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .contourModal__previewCanvas{
    min-height: 300px;
    max-height: 50vh;
  }
}

@media (max-width: 820px){
  .contourModal__zoom{
    grid-template-columns: repeat(3, minmax(0, auto)) minmax(0, 1fr);
  }
  .contourModal__layerMode{
    width: 100%;
  }
}

@media (max-width: 640px){
  .modalCard--contourOutline{
    width: min(100%, 100%);
  }
  .contourModal__top{
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .contourModal__topActions{
    width: 100%;
  }
  .contourModal__pickBtn{
    width: 100%;
    justify-content: center;
  }
  .contourModal__zoom{
    grid-template-columns: 1fr 1fr;
  }
  .contourModal__rangeRow{
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .contourModal__value{
    text-align: left;
  }
  .contourModal__grid{
    grid-template-columns: 1fr;
  }
  .contourModal__grid--sizeRow{
    grid-template-columns: 1fr;
  }
  .contourModal__cardActions{
    justify-content: stretch;
  }
  .contourModal__cardActions .btn{
    width: 100%;
    justify-content: center;
  }
  .contourModal__previewHead{
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Palette modal (catalog + custom colors) */
.modalCard--palette{
  width: min(968px, 100%);
}

.modalCard--palette .btn,
.modalCard--palette .loginInput,
.modalCard--palette select{
  font-weight: 500;
}

.modalCard--palette .modalHeader{
  padding-bottom: 8px;
}

.modalCard--palette .modalBody{
  padding-top: 9px;
  gap: 9px;
}

.paletteModal{
  display: grid;
  gap: 9px;
  min-width: min(812px, 94vw);
}

.paletteModal__head{
  display: grid;
  gap: 8px;
  padding: 10px 11px;
  border: 1px solid color-mix(in oklab, var(--border) 88%, var(--text) 12%);
  border-radius: 14px;
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--panel2) 80%, var(--panel) 20%),
    color-mix(in oklab, var(--panel2) 64%, var(--panel) 36%)
  );
}

.paletteModal__headRow{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  min-width: 0;
}

.paletteModal__search{
  flex: 1 1 260px;
  min-width: 190px;
  height: 34px;
  padding: 0 10px;
  border-radius: 12px;
  font-size: 12px;
}

.paletteModal__search:focus-visible{
  outline: none;
  border-color: color-mix(in oklab, var(--accent) 52%, var(--border) 48%);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 18%, transparent 82%);
}

.paletteModal__clearBtn,
.paletteModal__addBtn{
  height: 34px;
  border-radius: 10px;
  padding: 0 11px;
  white-space: nowrap;
  font-size: 12px;
}

.paletteModal__seg{
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--panel);
}

.paletteModal__segBtn{
  min-width: 78px;
  height: 32px;
  padding: 0 10px;
  border: 0;
  background: transparent;
  color: color-mix(in oklab, var(--muted) 80%, var(--text) 20%);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}

.paletteModal__segBtn + .paletteModal__segBtn{
  border-left: 1px solid var(--border);
}

.paletteModal__segBtn:hover{
  background: var(--panel2);
  color: var(--text);
}

.paletteModal__segBtn.is-active{
  background: color-mix(in oklab, var(--accent) 14%, var(--panel) 86%);
  color: color-mix(in oklab, var(--accent) 72%, var(--text) 28%);
}

.paletteModal__segBtn:focus-visible{
  outline: none;
  box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--accent) 24%, transparent 76%);
}

.paletteModal__subRow{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  flex-wrap: wrap;
}

.paletteModal__meta{
  color: var(--muted);
  font-size: 10.75px;
  line-height: 1.3;
}

.paletteModal__limits{
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--border) 86%, var(--text) 14%);
  background: color-mix(in oklab, var(--panel) 82%, var(--panel2) 18%);
  color: color-mix(in oklab, var(--muted) 74%, var(--text) 26%);
  font-size: 10.5px;
  line-height: 1.2;
}

.paletteModal__section{
  display: grid;
  gap: 7px;
}

.paletteModal__sectionHead{
  font-size: 10.75px;
  font-weight: 650;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--muted) 70%, var(--text) 30%);
  padding: 0 1px;
}

.paletteModal__grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
  gap: 7px;
}

.paletteModal__tile{
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 54px;
  width: 100%;
  padding: 9px 42px 9px 10px;
  border-radius: 11px;
  border: 1px solid var(--border);
  background: var(--panel);
  text-align: left;
  cursor: pointer;
  transition: border-color .14s ease, background .14s ease, box-shadow .14s ease;
}

.paletteModal__tile:hover{
  background: var(--panel2);
}

.paletteModal__tile.is-active{
  border-color: color-mix(in oklab, var(--accent) 45%, var(--border) 55%);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 18%, transparent 82%);
}

.paletteModal__tile.is-custom{
  border-color: color-mix(in oklab, var(--accent) 26%, var(--border) 74%);
}

.paletteModal__thumb{
  flex: 0 0 auto;
  position: relative;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--text) 14%, transparent 86%);
  background:
    radial-gradient(circle at 30% 24%, color-mix(in oklab, #fff 44%, transparent 56%) 0%, transparent 42%),
    color-mix(in oklab, var(--panel2) 88%, var(--panel) 12%);
  box-shadow: inset 0 1px 2px color-mix(in oklab, #000 12%, transparent 88%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
}

.paletteModal__thumb.is-custom{
  border-color: color-mix(in oklab, var(--accent) 18%, var(--border) 82%);
}

.paletteModal__thumbImg{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transform: scale(1.03);
}

.paletteModal__sw{
  width: 72%;
  height: 72%;
  min-width: 14px;
  min-height: 14px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--text) 22%, transparent 78%);
  box-shadow:
    inset 0 0 0 1px color-mix(in oklab, #fff 22%, transparent 78%),
    0 0 0 1px color-mix(in oklab, #000 8%, transparent 92%);
  display: inline-block;
}

.paletteModal__thumbTint{
  --gem-color: #cdcfd1;
  --tint-cx: .5;
  --tint-cy: .5;
  --tint-r: .42;
  position: absolute;
  left: calc((var(--tint-cx) - var(--tint-r)) * 100%);
  top: calc((var(--tint-cy) - var(--tint-r)) * 100%);
  width: calc(var(--tint-r) * 200%);
  height: calc(var(--tint-r) * 200%);
  border-radius: 999px;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(circle at 28% 20%, rgba(255,255,255,.44) 0%, rgba(255,255,255,0) 48%),
    radial-gradient(circle at 76% 82%, rgba(0,0,0,.30) 0%, rgba(0,0,0,0) 55%),
    linear-gradient(160deg,
      color-mix(in oklab, var(--gem-color) 76%, #fff 24%) 0%,
      var(--gem-color) 52%,
      color-mix(in oklab, var(--gem-color) 70%, #000 30%) 100%);
  background-blend-mode: screen, multiply, normal;
  mix-blend-mode: overlay;
  opacity: .72;
  filter: saturate(1.28) contrast(1.14);
}

.paletteModal__text{
  min-width: 0;
  display: grid;
  gap: 3px;
}

.paletteModal__confirm{
  display: grid;
  gap: 4px;
  align-items: start;
  margin-top: 3px;
}

.paletteModal__confirmActions{
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.paletteModal__confirmBtn{
  height: 20px;
  padding: 0 7px;
  border-radius: 7px;
  border: 1px solid color-mix(in oklab, var(--border) 85%, var(--text) 15%);
  background: color-mix(in oklab, var(--panel2) 80%, var(--panel) 20%);
  color: color-mix(in oklab, var(--muted) 70%, var(--text) 30%);
  cursor: pointer;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
}

.paletteModal__confirmBtn:hover{
  border-color: color-mix(in oklab, var(--border) 70%, var(--text) 30%);
  color: var(--text);
}

.paletteModal__confirmBtn:disabled{
  opacity: .6;
  cursor: wait;
}

.paletteModal__confirmOk{
  color: color-mix(in oklab, var(--danger) 80%, var(--text) 20%);
  border-color: color-mix(in oklab, var(--danger) 26%, var(--border) 74%);
  background: color-mix(in oklab, var(--danger) 10%, var(--panel) 90%);
}

.paletteModal__confirmOk:hover{
  color: color-mix(in oklab, var(--danger) 86%, var(--text) 14%);
  border-color: color-mix(in oklab, var(--danger) 40%, var(--border) 60%);
}

.paletteModal__confirmErr{
  display: block;
  max-width: 100%;
  padding: 4px 6px;
  border-radius: 7px;
  border: 1px solid color-mix(in oklab, #f59e0b 36%, var(--border) 64%);
  background: color-mix(in oklab, #f59e0b 14%, var(--panel) 86%);
  color: color-mix(in oklab, #7c2d12 64%, var(--text) 36%);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.25;
  word-break: break-word;
}

.paletteModal__title{
  font-size: 12px;
  font-weight: 560;
  line-height: 1.2;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.paletteModal__code{
  font-size: 10.75px;
  line-height: 1.2;
  color: var(--muted);
  font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.paletteModal__actions{
  position: absolute;
  top: 4px;
  right: 4px;
  bottom: 4px;
  width: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

.paletteModal__actionBtn{
  width: 24px;
  min-width: 24px;
  height: 24px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: color-mix(in oklab, var(--muted) 85%, var(--text) 15%);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color .14s ease, background .14s ease, border-color .14s ease;
}

.paletteModal__fav{
  color: color-mix(in oklab, var(--muted) 85%, var(--text) 15%);
}

.paletteModal__fav:hover{
  background: color-mix(in oklab, var(--panel2) 86%, var(--panel) 14%);
  border-color: color-mix(in oklab, var(--border) 86%, var(--text) 14%);
  color: color-mix(in oklab, var(--text) 82%, var(--accent) 18%);
}

.paletteModal__fav.is-on{
  color: #0ea5e9;
  border-color: color-mix(in oklab, #0ea5e9 30%, var(--border) 70%);
  background: color-mix(in oklab, #0ea5e9 10%, var(--panel) 90%);
}

.paletteModal__fav > i{
  margin-right: 0 !important;
  font-size: 12px;
  line-height: 1;
}

.paletteModal__del{
  color: color-mix(in oklab, var(--muted) 84%, var(--text) 16%);
}

.paletteModal__del:hover{
  background: color-mix(in oklab, var(--danger) 12%, transparent 88%);
  border-color: color-mix(in oklab, #ef4444 30%, var(--border) 70%);
  color: color-mix(in oklab, var(--danger) 82%, var(--text) 18%);
}

.paletteModal__del:disabled{
  opacity: .55;
  cursor: wait;
}

.paletteModal__del > i{
  margin-right: 0 !important;
  font-size: 12px;
  line-height: 1;
}

.paletteModal__empty{
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 10px;
  color: var(--muted);
  background: var(--panel2);
  font-size: 11px;
  line-height: 1.35;
}

.modalCard--paletteAdd{
  width: min(520px, 100%);
}

.modalCard--paletteAdd .btn,
.modalCard--paletteAdd .loginInput{
  font-weight: 500;
}

.modalCard--paletteAdd .modalHeader{
  padding-bottom: 8px;
}

.modalCard--paletteAdd .modalBody{
  padding-top: 9px;
  gap: 9px;
}

.paletteAddModal{
  display: grid;
  gap: 7px;
  min-width: min(426px, 92vw);
  padding: 3px 0 2px;
}

.paletteAddModal__limits{
  display: inline-flex;
  align-items: center;
  justify-self: start;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--border) 86%, var(--text) 14%);
  background: color-mix(in oklab, var(--panel) 82%, var(--panel2) 18%);
  color: color-mix(in oklab, var(--muted) 74%, var(--text) 26%);
  font-size: 10.5px;
  line-height: 1.2;
}

.paletteAddModal__label{
  font-size: 10.75px;
  font-weight: 620;
  color: var(--muted);
}

.paletteAddModal__input{
  height: 34px;
  font-size: 12px;
}

.paletteAddModal__colorRow{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 134px;
  gap: 8px;
}

.paletteAddModal__pickBtn{
  height: 34px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 0 9px;
}

.paletteAddModal__pickBtn > span:first-child{
  white-space: nowrap;
}

.paletteAddModal__swatch{
  width: 15px;
  height: 15px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--text) 20%, transparent 80%);
  display: inline-block;
}

.paletteAddModal__pickText{
  margin-left: auto;
  color: var(--muted);
  font-size: 10.75px;
  line-height: 1.2;
  font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
}

.paletteAddModal__hex,
.paletteAddModal__code{
  font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
}

.paletteAddModal__hint{
  font-size: 10.75px;
  color: var(--muted);
  line-height: 1.3;
  min-height: 16px;
}

.paletteAddModal__err{
  min-height: 16px;
  font-size: 10.75px;
  color: color-mix(in oklab, #ef4444 78%, var(--text) 22%);
  line-height: 1.3;
}

.paletteAddModal__actions{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 1px;
}

.paletteAddModal__actions .btn{
  height: 34px;
  min-width: 0;
  border-radius: 10px;
  font-size: 12px;
  width: 100%;
  justify-content: center;
}

@media (max-width: 980px){
  .paletteModal{
    min-width: 0;
  }
  .paletteModal__headRow{
    flex-wrap: wrap;
  }
  .paletteModal__search{
    flex-basis: 100%;
    min-width: 0;
  }
}

@media (max-width: 720px){
  .paletteModal__grid{
    grid-template-columns: repeat(auto-fill, minmax(156px, 1fr));
  }
  .paletteModal__subRow{
    flex-direction: column;
    align-items: flex-start;
  }
  .paletteAddModal{
    min-width: 0;
  }
}

@media (max-width: 560px){
  .paletteModal__head{
    padding: 9px;
  }
  .paletteModal__headRow{
    flex-direction: column;
    align-items: stretch;
  }
  .paletteModal__seg{
    width: 100%;
  }
  .paletteModal__segBtn{
    flex: 1 1 0;
    min-width: 0;
  }
  .paletteModal__clearBtn,
  .paletteModal__addBtn{
    width: 100%;
    justify-content: center;
  }
  .paletteModal__grid{
    grid-template-columns: 1fr;
  }
  .paletteAddModal__colorRow{
    grid-template-columns: 1fr;
  }
  .paletteAddModal__actions{
    grid-template-columns: 1fr;
  }
  .paletteAddModal__actions .btn{
    width: 100%;
  }
}

/* =========================================================
   UI Stage 1.1 overrides: single-row topbar, size grid, bg dock
   ========================================================= */

/* Keep topbar in one line (no second row wrapping as primary mode) */
.topbar{
  height: var(--topbar-h) !important;
  min-height: var(--topbar-h) !important;
  align-items: center !important;
  padding: 8px 12px !important;
}

.topbar__left{
  display: flex !important;
  align-items: center !important;
}

.topbar__right{
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  min-width: 0;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none;
}

.topbar__right::-webkit-scrollbar{
  display: none;
}

.topbar__serviceRow,
.topbar__groupsRow{
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  min-width: 0;
}

.topbar__serviceRow{
  flex: 0 0 auto;
  justify-content: flex-end;
}

.topbar__groupsRow{
  flex: 1 1 auto;
  justify-content: flex-end;
}

.topbar__groupsRow .tbGroup{
  flex: 0 0 auto;
}

@media (max-width: 1366px){
  .topbar{
    gap: 8px;
    padding: 8px 10px !important;
  }
  #tbProjectGroup .btn > span:not(.tbCaret),
  #tbExportGroup .btn > span,
  #tbBwMultiGroup .btn > span{
    display: none;
  }
  #tbZoomRange{
    width: 100px;
  }
  #tbZoomLabel{
    display: none;
  }
}

@media (max-width: 1140px){
  .topbar__left{
    display: none !important;
  }
}

/* Size chips: compact 3xN grid, no horizontal scroll */
#sizeChipRow{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-flow: row;
  grid-auto-columns: auto;
  grid-template-rows: none;
  gap: 5px;
  align-items: stretch;
  align-content: start;
  max-height: none !important;
  overflow: visible !important;
  padding-bottom: 2px;
}

#sizeChipRow .chip{
  width: 100%;
  min-width: 0;
  height: 30px;
  padding: 0 8px;
  gap: 6px;
  border-radius: 999px;
  justify-content: flex-start;
  font-size: 12px;
}

#sizeChipRow .chipLabel{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#sizeChipRow .chipStone{
  box-shadow: 0 6px 14px rgba(2,6,23,.10) inset;
}

:root.ui-big #sizeChipRow,
body.ui-big #sizeChipRow{
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-height: none !important;
}

/* Better hex/meta readability in both themes */
.tbColorBtn__hex{
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--panel2) 92%, var(--text) 8%);
  color: var(--text) !important;
  font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  font-weight: 800;
  letter-spacing: .01em;
  line-height: 1.25;
  opacity: .96;
}

.btnColor__meta{
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--panel2) 92%, var(--text) 8%);
  color: var(--text) !important;
  font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  opacity: .92;
  font-weight: 800;
  letter-spacing: .01em;
  line-height: 1.25;
}

/* Background dock in left panel */
#bgDockHost{
  margin-top: 10px;
}

#bgDockHost:empty{
  display: none;
}

#bgDockHost .bgDock{
  position: relative;
  top: auto;
  left: auto;
  z-index: 1;
  max-width: none;
  padding: 10px 12px;
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  backdrop-filter: none;
  box-shadow: none;
}

#bgDockHost .bgDock__title{
  color: var(--text);
}

#bgDockHost .bgDock__row--two{
  grid-template-columns: 1fr;
}

#bgDockHost .bgDock__ctrl{
  grid-template-columns: 92px 1fr 52px;
}

#bgDockHost .bgDock__label,
#bgDockHost .bgDock__val{
  color: var(--text);
  opacity: .82;
}
#bgDockHost .bgDock__meta{
  color: var(--muted);
}

#bgDockHost .bgDock__actions{
  margin-top: 10px;
}

#bgDockHost .bgDock__actions .btn{
  height: var(--btn-h);
  padding: 0 12px;
}

/* Tool dock readability in the left panel */
#leftPanel .toolDock .toolDock__label{
  color: var(--text);
  opacity: .9;
  font-size: 13px;
  font-weight: 800;
}

#leftPanel .toolDock .toolDock__hint{
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

#leftPanel .toolDock .toolDock__val{
  color: var(--text);
  font-weight: 800;
  font-size: 12px;
  min-width: 0;
  text-align: left;
  justify-content: flex-start;
}

#leftPanel .toolDock .toolDock__title{
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .01em;
}

#leftPanel .toolDock .toolDock__meta{
  color: var(--muted);
  opacity: .94;
}

#leftPanel .toolDock .toolDock__row,
#leftPanel .toolDock .toolDock__row--gap,
#leftPanel .toolDock .toolDock__row--pt,
#leftPanel .toolDock .toolDock__row--underlayOpacity,
#leftPanel .toolDock .toolDock__row--tVal,
#leftPanel .toolDock .toolDock__row--gradStops,
#leftPanel .toolDock .toolDock__inline2,
#leftPanel .toolDock .toolDock__inlinePt,
#leftPanel .toolDock .toolDock__ptCompact,
#leftPanel .toolDock .toolDock__inline2--w,
#leftPanel .toolDock .toolDock__distRow,
#leftPanel .toolDock .toolDock__distRow--edge,
#leftPanel .toolDock .toolDock__rulerRow{
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  align-items: stretch;
}

#leftPanel .toolDock .toolDock__ptNums{
  display:grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap:8px;
  align-items:center;
}

#leftPanel .toolDock .toolDock__hint--indent{
  margin-left: 0;
}

#leftPanel .toolDock .toolDock__muted{
  justify-content: flex-start;
  text-align: left;
  color: color-mix(in oklab, var(--text) 72%, var(--muted) 28%);
}
#leftPanel .toolDock .toolDock__muted.isWarn{
  color: color-mix(in oklab, var(--danger) 76%, var(--text) 24%);
}

#leftPanel .toolDock .toolDock__suffix{
  justify-content:flex-end;
  text-align:right;
  color: color-mix(in oklab, var(--text) 72%, var(--muted) 28%);
}

#leftPanel .toolDock .toolDock__distLbl{
  white-space: normal;
}

#leftPanel .toolDock .toolDock__select,
#leftPanel .toolDock .toolDock__num,
#leftPanel .toolDock .toolDock__input,
#leftPanel .toolDock .toolDock__input--num,
#leftPanel .toolDock .toolDock__input--sel,
#leftPanel .toolDock .toolDock__input--txt{
  background: var(--panel2);
  border: 1px solid var(--border);
  color: var(--text);
  min-height: 32px;
}

#leftPanel .toolDock .toolDock__chip{
  background: var(--panel2);
  border-color: var(--border);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
}

#leftPanel .toolDock .toolDock__check{
  color: var(--text);
}

#leftPanel .toolDock .toolDock__chip.isOn{
  border-color: color-mix(in oklab, var(--accent) 56%, var(--border) 44%);
  background: color-mix(in oklab, var(--accent) 18%, var(--panel2) 82%);
  color: var(--text);
}

#leftPanel .toolDock--fill .toolDock__seg{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  overflow:visible;
}

#leftPanel .toolDock--fill .toolDock__seg--preview{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#leftPanel .toolDock--fill .toolDock__seg--preview .toolDock__segBtn:last-child{
  grid-column: 1 / -1;
}

#leftPanel .toolDock--fill .toolDock__segBtn{
  min-height:30px;
  padding:4px 8px;
}

#leftPanel .toolDock--fill .toolDock__row--gapCompact{
  grid-template-columns: 66px minmax(0,1fr) 66px 44px;
  align-items:center;
  gap:6px;
}

#leftPanel .toolDock--fill .toolDock__row--angle{
  grid-template-columns: 66px minmax(0,1fr) 66px 44px;
  align-items:center;
  gap:6px;
}

#leftPanel .toolDock--fill .toolDock__stackTop,
#leftPanel .toolDock--fill .toolDock__stackTop--angle{
  grid-template-columns: 66px minmax(0,1fr) auto;
  gap:6px;
}

#leftPanel .toolDock--fill .toolDock__inline2--gradUnits{
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
}

#leftPanel .toolDock--fill .toolDock__row--tVal{
  grid-template-columns:minmax(0,1fr) 72px;
  gap:6px;
}

#leftPanel .toolDock--fill .toolDock__distRow{
  grid-template-columns: 12px minmax(88px,1fr) 72px minmax(34px,max-content);
  gap:6px;
  align-items:center;
}

#leftPanel .toolDock--fill .toolDock__distRow--edgeArrow{
  grid-template-columns: minmax(90px,1fr) minmax(88px,1fr) 72px minmax(34px,max-content);
}

#leftPanel .toolDock--fill .toolDock__edgePair{
  grid-template-columns: 10px 10px 10px minmax(42px,1fr);
  gap:5px;
}

#leftPanel .toolDock--fill .toolDock__collapseSummary{
  padding:9px 12px;
  font-size:13px;
}

#leftPanel .toolDock--fill .toolDock__collapseBody{
  padding:10px 12px;
}

#leftPanel .toolDock .toolDock__sw,
#leftPanel .toolDock .toolDock__distSw,
#leftPanel .toolDock .toolDock__distSwInput,
#leftPanel .toolDock .toolDock__gradStop,
#leftPanel .toolDock .toolDock__gradAdd{
  border-color: color-mix(in oklab, var(--text) 18%, var(--border) 82%);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--panel) 90%, transparent);
}

#leftPanel .toolDock .toolDock__gradStopHandle,
#leftPanel .toolDock .toolDock__distDel{
  border-color: color-mix(in oklab, var(--text) 16%, var(--border) 84%);
  background: color-mix(in oklab, var(--panel2) 88%, var(--text) 12%);
  color: var(--text);
}

#leftPanel .toolDock .toolDock__gradDel{
  background: color-mix(in oklab, var(--panel2) 75%, var(--text) 25%);
  border-color: color-mix(in oklab, var(--text) 22%, var(--border) 78%);
  color: var(--text);
}

#leftPanel .toolDock .toolDock__range{
  accent-color: var(--accent);
}

#leftPanel .toolDock .toolDock__actions{
  background: var(--panel);
  border-top: 1px solid var(--border);
  position: static;
  bottom: auto;
  padding-top: 10px;
  padding-bottom: 0;
}

#leftPanel .toolDock--text{
  --textDockBg: color-mix(in oklab, var(--panel2) 82%, var(--bg) 18%);
  --textDockSurface: color-mix(in oklab, var(--panel) 84%, var(--bg) 16%);
  --textDockBorder: color-mix(in oklab, var(--border) 82%, var(--text) 18%);
  --textDockMuted: color-mix(in oklab, var(--muted) 84%, var(--text) 16%);
  --textDockChipBg: color-mix(in oklab, var(--panel2) 88%, var(--bg) 12%);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 8px 10px 10px;
  background: var(--textDockBg);
  border-color: var(--textDockBorder);
  color: var(--text);
  box-shadow: 0 12px 28px color-mix(in oklab, var(--bg) 72%, transparent 28%);
}

#leftPanel .toolDock--text .toolDock__title{
  margin-bottom: 4px;
}

#leftPanel .toolDock--text .toolDock__meta{
  margin-bottom: 8px;
  color: var(--textDockMuted);
}

#leftPanel .toolDock--text .toolDock__sections{
  display: grid;
  gap: 8px;
}

#leftPanel .toolDock--text .toolDock__collapse--section{
  margin-top: 0;
  border-color: var(--textDockBorder);
  background: var(--textDockSurface);
}

#leftPanel .toolDock--text .toolDock__collapse--section > .toolDock__collapseSummary{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  font-size: 12px;
  color: var(--text);
  background: color-mix(in oklab, var(--textDockChipBg) 90%, transparent 10%);
}

#leftPanel .toolDock--text .toolDock__collapse--section > .toolDock__collapseSummary::after{
  content: '▾';
  font-size: 11px;
  opacity: .75;
  transform: rotate(-90deg);
  transition: transform .16s ease;
}

#leftPanel .toolDock--text .toolDock__collapse--section[open] > .toolDock__collapseSummary::after{
  transform: rotate(0deg);
}

#leftPanel .toolDock--text .toolDock__collapse--section > .toolDock__collapseBody{
  padding: 8px 10px;
  background: color-mix(in oklab, var(--textDockSurface) 92%, transparent 8%);
}

#leftPanel .toolDock--text .toolDock__row{
  margin: 6px 0;
  gap: 6px;
}

#leftPanel .toolDock--text .toolDock__row--ptMain{
  grid-template-columns: minmax(0, 1fr);
}

#leftPanel .toolDock--text .toolDock__row--ptMain .toolDock__val{
  text-align: left;
  justify-content: flex-start;
  color: var(--textDockMuted);
  font-size: 11px;
}

#leftPanel .toolDock--text textarea.toolDock__input{
  min-height: 66px;
  resize: none;
}

#leftPanel .toolDock--text .toolDock__select,
#leftPanel .toolDock--text .toolDock__input,
#leftPanel .toolDock--text .toolDock__input--num,
#leftPanel .toolDock--text .toolDock__swatchBtn{
  background: var(--textDockChipBg);
  border-color: var(--textDockBorder);
  color: var(--text);
}

#leftPanel .toolDock--text .toolDock__chip{
  background: var(--textDockChipBg);
  border-color: var(--textDockBorder);
  color: var(--text);
}

#leftPanel .toolDock--text .toolDock__chip:hover{
  background: color-mix(in oklab, var(--accent) 14%, var(--textDockChipBg) 86%);
}

#leftPanel .toolDock--text .toolDock__actions{
  margin-top: 8px;
  padding-top: 8px;
  border-top-color: var(--textDockBorder);
}

#leftPanel .toolDock--text .toolDock__actions .btn{
  min-height: 32px;
}

#leftPanel .toolDock .fontCombo__panel{
  border-color: var(--border);
  background: var(--panel);
  box-shadow: 0 8px 22px rgba(2,6,23,.14);
}

#leftPanel .toolDock .fontCombo__status{
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}

#leftPanel .toolDock .fontCombo__item{
  color: var(--text);
}

#leftPanel .toolDock .fontCombo__item.isReady,
#leftPanel .toolDock .fontCombo__item.isLoading,
#leftPanel .toolDock .fontCombo__item.isFallback{
  color: var(--text);
}

#leftPanel .toolDock .fontCombo__item:hover,
#leftPanel .toolDock .fontCombo__item.isActive{
  background: color-mix(in oklab, var(--accent) 20%, var(--panel) 80%);
}

#leftPanel .toolDock .fontCombo__item.isSelected{
  box-shadow: inset 3px 0 0 color-mix(in oklab, var(--accent) 72%, white 28%);
}

#leftPanel .toolDock .fontCombo__input{
  background: var(--panel2);
  color: var(--text);
  border: 1px solid var(--border);
}

#leftPanel .toolDock .fontCombo__toggle{
  border: 1px solid var(--border);
  background: var(--panel2);
  color: var(--text);
}

#leftPanel .toolDock .toolDock__input::placeholder,
#leftPanel .toolDock .fontCombo__input::placeholder{
  color: color-mix(in oklab, var(--muted) 86%, var(--text) 14%);
  opacity: 1;
}

#leftPanel .toolDock .toolDock__select option{
  color: var(--text);
  background: var(--panel);
}

#leftPanel .toolDock .toolDock__select:focus,
#leftPanel .toolDock .fontCombo__input:focus,
#leftPanel .toolDock .fontCombo__toggle:focus-visible{
  outline: none;
  border-color: rgba(59,130,246,.62);
  box-shadow: 0 0 0 3px rgba(59,130,246,.16);
}

/* =========================================================
   UI Stage 2: readability + project menu migration + brand
   ========================================================= */

.brand{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
}
.brand__logo{
  position: relative;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
}
.brand__logo::after{
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255,255,255,.9) 0%, rgba(255,255,255,.06) 35%, transparent 72%), conic-gradient(from 0deg, #ff4d6d 0deg, #ff9f1c 60deg, #ffe66d 120deg, #2ec4b6 180deg, #5aa9ff 240deg, #b185ff 300deg, #ff4d6d 360deg);
  filter: blur(6px);
  animation: brandGemGlowPulse 3.2s ease-in-out infinite, brandGemGlowHue 11s linear infinite;
  pointer-events: none;
  z-index: 0;
}
.brand__logo > i{
  position: relative;
  z-index: 1;
  font-size: 17px;
  line-height: 1;
  color: #ffffff;
  filter: drop-shadow(0 0 4px rgba(255,255,255,.8)) drop-shadow(0 0 10px rgba(96,165,250,.45));
  animation: brandGemIconHue 11s linear infinite;
}
.brand__title{
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .02em;
}
@keyframes brandGemGlowPulse{
  0%, 100%{
    opacity: .64;
    transform: translate(-50%, -50%) scale(.88);
  }
  50%{
    opacity: .96;
    transform: translate(-50%, -50%) scale(1.18);
  }
}
@keyframes brandGemGlowHue{
  0% { filter: blur(6px) hue-rotate(0deg); }
  100% { filter: blur(6px) hue-rotate(360deg); }
}
@keyframes brandGemIconHue{
  0% { color: hsl(0 100% 74%); text-shadow: 0 0 7px hsla(0,100%,72%,.45); }
  16% { color: hsl(42 100% 72%); text-shadow: 0 0 7px hsla(42,100%,72%,.45); }
  33% { color: hsl(92 100% 72%); text-shadow: 0 0 7px hsla(92,100%,72%,.45); }
  50% { color: hsl(180 100% 72%); text-shadow: 0 0 7px hsla(180,100%,72%,.45); }
  66% { color: hsl(230 100% 74%); text-shadow: 0 0 7px hsla(230,100%,74%,.45); }
  83% { color: hsl(286 100% 74%); text-shadow: 0 0 7px hsla(286,100%,74%,.45); }
  100% { color: hsl(360 100% 74%); text-shadow: 0 0 7px hsla(360,100%,74%,.45); }
}
@media (prefers-reduced-motion: reduce){
  .brand__logo::after,
  .brand__logo > i{ animation: none; }
}

.topbar__left{
  display: flex !important;
  align-items: center !important;
  gap: 12px;
  flex: 0 1 auto;
  min-width: 0;
}
.topbar__leftQuick{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.topbar__leftQuick .btn{
  white-space: nowrap;
}
.topbar__leftQuick .btn i{
  margin-right: 8px !important;
}
.topbar__leftQuick #tbProjectGroup .btn > span:not(.tbCaret){
  display: inline !important;
}

.topbar__serviceRow{
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  order: 2;
}
.topbar__groupsRow{
  order: 1;
}
.topbar__serviceRow #tbProjectGroup{
  flex: 0 0 auto;
}

/* Size chips: full labels, no truncation, text-only */
#sizeChipRow{
  display: flex !important;
  flex-wrap: wrap;
  gap: 6px;
}
#sizeChipRow .chip{
  min-width: 68px;
  width: auto;
  max-width: calc(100% - 2px);
  height: auto;
  min-height: 30px;
  padding: 6px 10px;
  line-height: 1.15;
  justify-content: center;
  text-align: center;
}
#sizeChipRow .chipStone{
  display: none !important;
}
#sizeChipRow .chipLabel{
  display: block;
  width: 100%;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  font-weight: 700;
}

.sizeMeta{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--panel2) 90%, var(--panel) 10%);
  color: var(--text);
  font-weight: 650;
  font-size: 12px;
}
.sizeMeta__ss{
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel);
  font-weight: 700;
}
.sizeMeta__mm{
  display: inline-flex;
  align-items: center;
}
.sizeMeta__color{
  width: var(--sizeMetaDotPx, 11px);
  height: var(--sizeMetaDotPx, 11px);
  flex: 0 0 var(--sizeMetaDotPx, 11px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--sizeMetaBorderColor, var(--sizeMetaColor, var(--activeColor, #2563eb))) 76%, #000 24%);
  background: var(--sizeMetaColor, var(--activeColor, #2563eb));
  color: var(--sizeMetaCodeColor, #f8fafc);
  font-weight: 800;
  font-size: clamp(8px, calc(var(--sizeMetaDotPx, 11px) * 0.36), 11px);
  line-height: 1;
  letter-spacing: .01em;
  text-transform: uppercase;
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--panel) 80%, transparent 20%) inset;
}

#btnPalette.btn--color{
  align-items: center;
  justify-content: flex-start;
  min-height: var(--btn-h);
  height: auto;
  gap: 9px;
  padding-top: 4px;
  padding-bottom: 4px;
  background: var(--panel);
  border-color: var(--border);
  color: var(--text);
}
#btnPalette.btn--color:hover{
  background: var(--panel2);
  border-color: color-mix(in oklab, var(--border) 82%, var(--text) 18%);
}
#btnPalette.btn--color:focus-visible{
  outline: none;
  border-color: color-mix(in oklab, var(--accent) 52%, var(--border) 48%);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 18%, transparent 82%);
}
#btnPalette.btn--color:active{
  background: color-mix(in oklab, var(--panel2) 84%, var(--panel) 16%);
}
#btnPalette .btnColor__sw{
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in oklab, var(--text) 22%, transparent 78%);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--panel) 75%, transparent 25%) inset;
  font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--btnPaletteCodeColor, #0f172a);
}
#btnPalette .btnColor__body{
  min-width: 0;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  text-align: left;
}
#btnPalette .btnColor__title{
  width: 100%;
  display: block;
  white-space: nowrap;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  font-weight: 780;
}
#btnPalette .btnColor__meta{
  display: none;
}
#btnPalette .btnColor__caret{
  margin-right: 0;
  opacity: .65;
}

.toolGrid{
  display: grid;
  grid-template-columns: 1fr !important;
  gap: 8px;
}
.toolGrid__sectionTitle{
  grid-column: 1 / -1;
  margin: 4px 0 0 0;
  padding-top: 8px;
  border-top: 1px solid color-mix(in oklab, var(--border) 84%, transparent 16%);
  font-size: 11px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: .04em;
  color: color-mix(in oklab, var(--muted) 88%, var(--text) 12%);
  user-select: none;
  pointer-events: none;
}
.toolBtn{
  height: auto;
  min-height: var(--btn-h);
  padding-top: 8px;
  padding-bottom: 8px;
  align-items: flex-start;
  font-weight: 650;
}
.toolBtn__label{
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.2;
}
.toolBtn.toolBtn--action{
  border-style: solid;
}
.toolGrid > .bezierModeRow,
.toolGrid > .pencilModeRow,
.toolGrid > .pencilSnapRow,
.toolGrid > .selectModeRow{
  grid-column: 1 / -1;
}
.toolGridHint{
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.3;
  color: var(--muted);
}
.toolGridHint.isWarn{
  color: color-mix(in oklab, #ef4444 62%, var(--text) 38%);
}

.layerItem__meta{
  display: none !important;
}
.layerItem__row--main{
  align-items: flex-start;
}
.layerItem__title{
  min-width: 0;
}
.layerItem__stat{
  flex: 0 0 auto;
  margin-left: auto;
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
  white-space: nowrap;
}
.layerItem.isDragging{
  opacity: .58;
  border-color: color-mix(in oklab, var(--accent2) 58%, var(--border) 42%);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent2) 20%, transparent 80%);
}
.layerItem.isDragging .layerItem__btn--drag{
  cursor: grabbing;
}
.layerItem.isDropBefore::before,
.layerItem.isDropAfter::after{
  height: 5px;
  background: color-mix(in oklab, var(--accent2) 82%, #ffffff 18%);
}
.layerDragGhost{
  pointer-events: none !important;
  opacity: .94;
  box-shadow: 0 12px 26px rgba(2,6,23,.24);
}

#leftPanel .panel__title{
  font-weight: 700;
}
#leftPanel .toolBtn,
#leftPanel .toolBtn__label,
#leftPanel .chip,
#leftPanel .chipLabel,
#leftPanel .sizeMeta,
#leftPanel .sizeMeta__ss,
#leftPanel .sizeMeta__mm,
#leftPanel .btnColor__title,
#leftPanel .btnColor__meta,
#leftPanel .bezierModeLabel,
#leftPanel .pencilModeLabel,
#leftPanel .pencilSnapLabel,
#leftPanel .selectModeLabel,
#leftPanel .selectScopeLabel,
#leftPanel .toolDock .toolDock__label,
#leftPanel .toolDock .toolDock__hint,
#leftPanel .toolDock .toolDock__val,
#leftPanel .toolDock .toolDock__meta,
#leftPanel .toolDock .toolDock__check,
#leftPanel .toolDock .toolDock__chip{
  font-weight: 400;
}
#leftPanel .bezierModeLabel,
#leftPanel .pencilModeLabel,
#leftPanel .pencilSnapLabel,
#leftPanel .selectModeLabel,
#leftPanel .selectScopeLabel{
  font-weight: 500;
}

.silFill{
  display: grid;
  gap: 10px;
}
.silFill__top{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}
.silFill__status{
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.3;
}
.silFill__layout{
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 10px;
}
.silFill__col{
  display: grid;
  gap: 10px;
  min-width: 0;
}
.silFill__card{
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
  background: var(--panel2);
  min-width: 0;
}
.silFill__cardTitle{
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}
.silFill__previewCanvas{
  display: block;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
}
.silFill__previewCanvas.isPanReady{ cursor: grab; }
.silFill__previewCanvas.isPanning{ cursor: grabbing; }
.silFill__previewHint{
  margin-top: 6px;
  font-size: 11px;
  color: var(--muted);
}
.silFill__zoom{
  display: grid;
  grid-template-columns: auto auto auto minmax(120px, 1fr);
  gap: 6px;
  margin-top: 8px;
  align-items: center;
}
.silFill__zoomVal{
  min-width: 64px;
  justify-content: center;
}
.silFill__range{
  width: 100%;
}
.silFill__rangeRow{
  display: grid;
  grid-template-columns: minmax(90px, auto) minmax(0, 1fr) 44px;
  gap: 8px;
  align-items: center;
}
.silFill__label{
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
}
.silFill__value{
  text-align: right;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.silFill__checks{
  display: grid;
  gap: 8px;
}
.silFill__check{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
}
.silFill__check input{
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}
.silFill__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.silFill__field{
  display: grid;
  gap: 4px;
  min-width: 0;
}
.silFill__field--full{
  grid-column: 1 / -1;
}
.silFill__select,
.silFill__input{
  width: 100%;
  min-height: 34px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
  color: var(--text);
  padding: 0 10px;
}
.silFill__sizeInput{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
}
.silFill__hint{
  font-size: 11px;
  color: var(--muted);
}
.silFill__actions{
  display: flex;
  justify-content: flex-end;
}
@media (max-width: 980px){
  .silFill__layout{
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px){
  .silFill__top{
    grid-template-columns: 1fr;
  }
  .silFill__zoom{
    grid-template-columns: 1fr 1fr;
  }
  .silFill__grid{
    grid-template-columns: 1fr;
  }
}

#tbProjectMenuPanel .tbProjCanvasBlock{
  margin: 8px 2px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--panel2);
}
#tbProjectMenuPanel .tbProjCanvasGrid{
  display: grid;
  grid-template-columns: 1fr 1fr 90px;
  gap: 8px;
}
#tbProjectMenuPanel .tbProjCanvasGrid .field{
  margin: 0;
}
#tbProjectMenuPanel .tbProjCanvasGrid .fieldLabel{
  margin-bottom: 4px;
}
#tbProjectMenuPanel .tbProjCanvasActions{
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 8px;
}
#tbProjectMenuPanel .tbProjCanvasHint{
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
}

@media (max-width: 1280px){
  .topbar__left{
    gap: 8px;
  }
}

@media (max-width: 1140px){
  .topbar__left{
    display: flex !important;
  }
}

@media (max-width: 980px){
  .topbar__leftQuick #btnProjects > span,
  .topbar__leftQuick #btnSaveServerTop > span{
    display: none;
  }
  #tbProjectMenuPanel .tbProjCanvasGrid{
    grid-template-columns: 1fr;
  }
}

/* ==============================
   PRAVKI.docx rollout
   ============================== */

.panel--right .panel__actions.layerActionsRow{
  flex-direction: column;
  flex-wrap: nowrap;
  margin-top: 14px;
  gap: 8px;
}
.panel--right .panel__actions.layerActionsRow .btn{
  flex: 0 0 auto;
  min-width: 0;
  font-weight: 600;
}
@media (max-width: 980px){
  .panel--right .panel__actions.layerActionsRow{
    flex-wrap: nowrap;
  }
  .panel--right .panel__actions.layerActionsRow .btn{
    flex: 0 0 auto;
  }
}

.selMenu{
  min-width: 250px;
  max-width: min(96vw, 420px);
}
.selMenu__title{
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: 11px;
  color: var(--muted);
}
.selMenu__row{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.selMenu__row--danger{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.selMenu__btn{
  width: 100%;
  justify-content: center;
  font-weight: 700;
}
@media (max-width: 760px){
  .selMenu__row{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.revExitBtn{
  margin-left: 8px;
  flex: 0 0 auto;
  white-space: nowrap;
}
@media (max-width: 1320px){
  .revExitBtn{
    padding: 0 10px;
    font-size: 12px;
  }
}
@media (max-width: 1240px){
  .revExitBtn{
    display: none !important;
  }
}

.layerStatsModal{
  display: grid;
  gap: 12px;
  min-width: min(92vw, 900px);
}
.layerStatsModal__summary{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.layerStatsModal__summaryItem{
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel2);
  color: var(--muted);
  padding: 6px 10px;
  font-size: 12px;
}
.layerStatsModal__body{
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 10px;
}
.layerStatsModal__side{
  display: grid;
  gap: 10px;
  min-width: 0;
}
.layerStatsModal__card{
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel2);
  padding: 10px;
  display: grid;
  gap: 6px;
  min-width: 0;
}
.layerStatsModal__cardTitle{
  font-weight: 800;
  color: var(--text);
}
.layerStatsModal__row{
  font-size: 13px;
  color: var(--text);
  overflow-wrap: anywhere;
}
.layerStatsModal__muted{
  font-size: 12px;
  color: var(--muted);
}
.layerStatsModal__footer{
  display: flex;
  justify-content: flex-end;
}
@media (max-width: 980px){
  .layerStatsModal{
    min-width: min(96vw, 720px);
  }
  .layerStatsModal__body{
    grid-template-columns: 1fr;
  }
}

/* Light theme balanced extension: explicit light + auto-light parity */
:root[data-theme="light"] .phoneBlocker{
  background:
    radial-gradient(900px circle at 12% 0%, rgba(59,110,197,.18), transparent 56%),
    radial-gradient(760px circle at 110% 16%, rgba(120,161,211,.16), transparent 54%),
    linear-gradient(
      180deg,
      color-mix(in oklab, var(--panel) 88%, var(--bg) 12%) 0%,
      color-mix(in oklab, var(--panel2) 84%, var(--bg) 16%) 46%,
      var(--bg) 100%
    );
  color: var(--text);
}

:root[data-theme="light"] .phoneCard,
:root[data-theme="light"] .loginCard{
  background: color-mix(in oklab, var(--panel) 94%, var(--bg) 6%);
  border-color: color-mix(in oklab, var(--border) 86%, var(--text) 14%);
  box-shadow: 0 24px 68px rgba(18,30,46,.14);
}

:root[data-theme="light"] .modalOverlay{
  background: rgba(26,35,48,.28);
  backdrop-filter: blur(3px);
}

:root[data-theme="light"] .revCompareHandle{
  background: color-mix(in oklab, var(--panel) 90%, var(--bg) 10%);
  border-color: color-mix(in oklab, var(--border) 84%, var(--text) 16%);
  box-shadow: 0 10px 24px rgba(18,30,46,.18);
}

:root[data-theme="light"] .revCompareHandle:before{
  border-left-color: rgba(27,36,48,.50);
  border-right-color: rgba(27,36,48,.50);
}

:root[data-theme="light"] .revAdvanced{
  background: color-mix(in oklab, var(--panel) 90%, var(--bg) 10%);
  border-color: color-mix(in oklab, var(--border) 84%, var(--text) 16%);
}

:root[data-theme="light"] .revCompareCorner{
  color: var(--text);
  background: color-mix(in oklab, var(--panel) 78%, var(--bg) 22%);
  border-color: color-mix(in oklab, var(--border) 84%, var(--text) 16%);
  box-shadow: 0 6px 16px rgba(18,30,46,.12);
}

:root[data-theme="light"] .revCompareHint{
  background: color-mix(in oklab, var(--panel) 86%, var(--bg) 14%);
  border-color: color-mix(in oklab, var(--border) 82%, var(--text) 18%);
  box-shadow: 0 10px 24px rgba(18,30,46,.16);
  color: var(--text);
}

:root[data-theme="light"] .revCompareHintSub{
  color: color-mix(in oklab, var(--muted) 86%, var(--text) 14%);
}

:root[data-theme="light"] .revCompareHintBtn{
  border-color: color-mix(in oklab, var(--border) 76%, var(--text) 24%);
  background: color-mix(in oklab, var(--panel2) 84%, var(--bg) 16%);
  color: var(--text);
}

:root[data-theme="light"] .revModeHint{
  border-color: color-mix(in oklab, var(--border) 80%, var(--text) 20%);
  background: color-mix(in oklab, var(--panel2) 86%, var(--bg) 14%);
  color: color-mix(in oklab, var(--muted) 86%, var(--text) 14%);
}

:root[data-theme="light"] .exportModal__row > select,
:root[data-theme="light"] .exportModal__row > input{
  border-color: color-mix(in oklab, var(--border) 84%, var(--text) 16%);
  background: color-mix(in oklab, var(--panel2) 82%, var(--panel) 18%);
  color: var(--text);
}

:root[data-theme="light"] #canvasWrap .toolDock{
  background: color-mix(in oklab, var(--panel2) 78%, var(--bg) 22%);
  border-color: color-mix(in oklab, var(--border) 82%, var(--text) 18%);
  color: var(--text);
  box-shadow: 0 14px 32px rgba(18,30,46,.18);
}

:root[data-theme="light"] #canvasWrap .toolDock__meta{
  color: color-mix(in oklab, var(--muted) 82%, var(--text) 18%);
}

:root[data-theme="light"] #canvasWrap .toolDock__hint{
  color: color-mix(in oklab, var(--muted) 88%, var(--text) 12%);
}

:root[data-theme="light"] #canvasWrap .toolDock__input,
:root[data-theme="light"] #canvasWrap .toolDock__input--num,
:root[data-theme="light"] #canvasWrap .toolDock__input--sel,
:root[data-theme="light"] #canvasWrap .toolDock__input--txt{
  background: color-mix(in oklab, var(--panel) 88%, var(--bg) 12%);
  border-color: color-mix(in oklab, var(--border) 82%, var(--text) 18%);
  color: var(--text);
}

:root[data-theme="light"] #canvasWrap .toolDock__sw{
  background: color-mix(in oklab, var(--panel) 88%, var(--bg) 12%);
}

:root[data-theme="light"] .bgDock{
  background: color-mix(in oklab, var(--panel2) 76%, var(--bg) 24%);
  border-color: color-mix(in oklab, var(--border) 82%, var(--text) 18%);
  color: var(--text);
  box-shadow: 0 12px 28px rgba(18,30,46,.14);
}

:root[data-theme="light"] .bgDock__label,
:root[data-theme="light"] .bgDock__val{
  color: color-mix(in oklab, var(--muted) 84%, var(--text) 16%);
}

:root[data-theme="light"] .bgDock__meta{
  color: color-mix(in oklab, var(--muted) 90%, var(--text) 10%);
}

:root[data-theme="light"] #canvasWrap .toolDock .fontCombo__panel{
  border-color: color-mix(in oklab, var(--border) 82%, var(--text) 18%);
  background: color-mix(in oklab, var(--panel) 92%, var(--bg) 8%);
  box-shadow: 0 8px 22px rgba(18,30,46,.14);
}

:root[data-theme="light"] #canvasWrap .toolDock .fontCombo__status{
  color: var(--muted);
  border-bottom-color: color-mix(in oklab, var(--border) 84%, var(--text) 16%);
}

:root[data-theme="light"] #canvasWrap .toolDock .fontCombo__item,
:root[data-theme="light"] #canvasWrap .toolDock .fontCombo__item.isReady,
:root[data-theme="light"] #canvasWrap .toolDock .fontCombo__item.isLoading,
:root[data-theme="light"] #canvasWrap .toolDock .fontCombo__item.isFallback{
  color: var(--text);
}

:root[data-theme="light"] #canvasWrap .toolDock .fontCombo__item:hover,
:root[data-theme="light"] #canvasWrap .toolDock .fontCombo__item.isActive{
  background: color-mix(in oklab, var(--accent) 14%, var(--panel2) 86%);
}

@media (prefers-color-scheme: light){
  :root:not([data-theme]) .phoneBlocker{
    background:
      radial-gradient(900px circle at 12% 0%, rgba(59,110,197,.18), transparent 56%),
      radial-gradient(760px circle at 110% 16%, rgba(120,161,211,.16), transparent 54%),
      linear-gradient(
        180deg,
        color-mix(in oklab, var(--panel) 88%, var(--bg) 12%) 0%,
        color-mix(in oklab, var(--panel2) 84%, var(--bg) 16%) 46%,
        var(--bg) 100%
      );
    color: var(--text);
  }

  :root:not([data-theme]) .phoneCard,
  :root:not([data-theme]) .loginCard{
    background: color-mix(in oklab, var(--panel) 94%, var(--bg) 6%);
    border-color: color-mix(in oklab, var(--border) 86%, var(--text) 14%);
    box-shadow: 0 24px 68px rgba(18,30,46,.14);
  }

  :root:not([data-theme]) .modalOverlay{
    background: rgba(26,35,48,.28);
    backdrop-filter: blur(3px);
  }

  :root:not([data-theme]) .revCompareHandle{
    background: color-mix(in oklab, var(--panel) 90%, var(--bg) 10%);
    border-color: color-mix(in oklab, var(--border) 84%, var(--text) 16%);
    box-shadow: 0 10px 24px rgba(18,30,46,.18);
  }

  :root:not([data-theme]) .revCompareHandle:before{
    border-left-color: rgba(27,36,48,.50);
    border-right-color: rgba(27,36,48,.50);
  }

  :root:not([data-theme]) .revAdvanced{
    background: color-mix(in oklab, var(--panel) 90%, var(--bg) 10%);
    border-color: color-mix(in oklab, var(--border) 84%, var(--text) 16%);
  }

  :root:not([data-theme]) .revCompareCorner{
    color: var(--text);
    background: color-mix(in oklab, var(--panel) 78%, var(--bg) 22%);
    border-color: color-mix(in oklab, var(--border) 84%, var(--text) 16%);
    box-shadow: 0 6px 16px rgba(18,30,46,.12);
  }

  :root:not([data-theme]) .revCompareHint{
    background: color-mix(in oklab, var(--panel) 86%, var(--bg) 14%);
    border-color: color-mix(in oklab, var(--border) 82%, var(--text) 18%);
    box-shadow: 0 10px 24px rgba(18,30,46,.16);
    color: var(--text);
  }

  :root:not([data-theme]) .revCompareHintSub{
    color: color-mix(in oklab, var(--muted) 86%, var(--text) 14%);
  }

  :root:not([data-theme]) .revCompareHintBtn{
    border-color: color-mix(in oklab, var(--border) 76%, var(--text) 24%);
    background: color-mix(in oklab, var(--panel2) 84%, var(--bg) 16%);
    color: var(--text);
  }

  :root:not([data-theme]) .revModeHint{
    border-color: color-mix(in oklab, var(--border) 80%, var(--text) 20%);
    background: color-mix(in oklab, var(--panel2) 86%, var(--bg) 14%);
    color: color-mix(in oklab, var(--muted) 86%, var(--text) 14%);
  }

  :root:not([data-theme]) .exportModal__row > select,
  :root:not([data-theme]) .exportModal__row > input{
    border-color: color-mix(in oklab, var(--border) 84%, var(--text) 16%);
    background: color-mix(in oklab, var(--panel2) 82%, var(--panel) 18%);
    color: var(--text);
  }

  :root:not([data-theme]) #canvasWrap .toolDock{
    background: color-mix(in oklab, var(--panel2) 78%, var(--bg) 22%);
    border-color: color-mix(in oklab, var(--border) 82%, var(--text) 18%);
    color: var(--text);
    box-shadow: 0 14px 32px rgba(18,30,46,.18);
  }

  :root:not([data-theme]) #canvasWrap .toolDock__meta{
    color: color-mix(in oklab, var(--muted) 82%, var(--text) 18%);
  }

  :root:not([data-theme]) #canvasWrap .toolDock__hint{
    color: color-mix(in oklab, var(--muted) 88%, var(--text) 12%);
  }

  :root:not([data-theme]) #canvasWrap .toolDock__input,
  :root:not([data-theme]) #canvasWrap .toolDock__input--num,
  :root:not([data-theme]) #canvasWrap .toolDock__input--sel,
  :root:not([data-theme]) #canvasWrap .toolDock__input--txt{
    background: color-mix(in oklab, var(--panel) 88%, var(--bg) 12%);
    border-color: color-mix(in oklab, var(--border) 82%, var(--text) 18%);
    color: var(--text);
  }

  :root:not([data-theme]) #canvasWrap .toolDock__sw{
    background: color-mix(in oklab, var(--panel) 88%, var(--bg) 12%);
  }

  :root:not([data-theme]) .bgDock{
    background: color-mix(in oklab, var(--panel2) 76%, var(--bg) 24%);
    border-color: color-mix(in oklab, var(--border) 82%, var(--text) 18%);
    color: var(--text);
    box-shadow: 0 12px 28px rgba(18,30,46,.14);
  }

  :root:not([data-theme]) .bgDock__label,
  :root:not([data-theme]) .bgDock__val{
    color: color-mix(in oklab, var(--muted) 84%, var(--text) 16%);
  }

  :root:not([data-theme]) .bgDock__meta{
    color: color-mix(in oklab, var(--muted) 90%, var(--text) 10%);
  }

  :root:not([data-theme]) #canvasWrap .toolDock .fontCombo__panel{
    border-color: color-mix(in oklab, var(--border) 82%, var(--text) 18%);
    background: color-mix(in oklab, var(--panel) 92%, var(--bg) 8%);
    box-shadow: 0 8px 22px rgba(18,30,46,.14);
  }

  :root:not([data-theme]) #canvasWrap .toolDock .fontCombo__status{
    color: var(--muted);
    border-bottom-color: color-mix(in oklab, var(--border) 84%, var(--text) 16%);
  }

  :root:not([data-theme]) #canvasWrap .toolDock .fontCombo__item,
  :root:not([data-theme]) #canvasWrap .toolDock .fontCombo__item.isReady,
  :root:not([data-theme]) #canvasWrap .toolDock .fontCombo__item.isLoading,
  :root:not([data-theme]) #canvasWrap .toolDock .fontCombo__item.isFallback{
    color: var(--text);
  }

  :root:not([data-theme]) #canvasWrap .toolDock .fontCombo__item:hover,
  :root:not([data-theme]) #canvasWrap .toolDock .fontCombo__item.isActive{
    background: color-mix(in oklab, var(--accent) 14%, var(--panel2) 86%);
  }
}

/* Fill dock: tokenized colors for light/dark parity */
.toolDock--fill .toolDock__title,
.toolDock--fill .toolDock__label,
.toolDock--fill .toolDock__val,
.toolDock--fill .toolDock__check,
.toolDock--fill .toolDock__distLbl{
  color: var(--text);
  font-weight:500;
}

.toolDock--fill .toolDock__meta,
.toolDock--fill .toolDock__hint,
.toolDock--fill .toolDock__rowsMax,
.toolDock--fill .toolDock__muted{
  color: var(--muted);
  font-weight:400;
}

.toolDock--fill .toolDock__suffix{
  color: var(--muted);
}

.toolDock--fill .toolDock__title,
.toolDock--fill .toolDock__collapseSummary{
  font-weight:700;
}

.toolDock--fill .toolDock__sep{
  background: color-mix(in oklab, var(--border) 78%, var(--text) 22%);
}

.toolDock--fill .toolDock__distLbl{
  color: var(--text);
}

.toolDock--fill .toolDock__range{
  accent-color: var(--accent);
}

.toolDock--fill .toolDock__select,
.toolDock--fill .toolDock__num,
.toolDock--fill .toolDock__unit,
.toolDock--fill .toolDock__input,
.toolDock--fill .toolDock__input--num,
.toolDock--fill .toolDock__input--sel,
.toolDock--fill .toolDock__input--txt{
  background: var(--panel2);
  border: 1px solid var(--border);
  color: var(--text);
}

.toolDock--fill .toolDock__chip{
  background: var(--panel2);
  border-color: var(--border);
  color: var(--text);
}

.toolDock--fill .toolDock__chip.isOn{
  border-color: color-mix(in oklab, var(--accent) 56%, var(--border) 44%);
  background: color-mix(in oklab, var(--accent) 18%, var(--panel2) 82%);
  color: var(--text);
}

.toolDock--fill .toolDock__seg{
  width:100%;
}

.toolDock--fill .toolDock__segBtn{
  border-color: var(--border);
  background: var(--panel2);
  color: var(--text);
  min-height:29px;
  padding:4px 8px;
  font-weight:500;
  line-height:1.2;
}

.toolDock--fill .toolDock__segBtn .btnSeg__text{
  white-space:normal;
  text-align:center;
}

.toolDock--fill .toolDock__segBtn--textOnly .btnSeg__icon{
  display:none;
}

.toolDock--fill .toolDock__segBtn.btn--segActive{
  border-color: color-mix(in oklab, var(--accent) 56%, var(--border) 44%);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 18%, transparent);
}

.toolDock--fill .toolDock__seg--preview .toolDock__segBtn{
  flex:1 1 0;
}

.toolDock--fill .toolDock__seg--preview{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.toolDock--fill .toolDock__seg--preview .toolDock__segBtn:last-child{
  grid-column: 1 / -1;
}

.toolDock--fill .toolDock__seg--size .toolDock__segBtn,
.toolDock--fill .toolDock__seg--mode .toolDock__segBtn{
  flex:1 1 auto;
  min-width:0;
}

.toolDock--fill .toolDock__seg--mode{
  row-gap:5px;
}

.toolDock--fill .toolDock__seg--mode .toolDock__segBtn{
  flex:1 1 calc(50% - 6px);
}

.toolDock--fill .toolDock__chip--seg{
  border-color: var(--border);
  background: var(--panel2);
}

.toolDock--fill .toolDock__row--gapCompact{
  grid-template-columns: 70px minmax(0,1fr) 66px 50px;
  align-items:center;
}

.toolDock--fill .toolDock__row--angle{
  grid-template-columns: 70px minmax(0,1fr) 66px 50px;
  align-items:center;
}

.toolDock--fill .toolDock__stackTop,
.toolDock--fill .toolDock__stackTop--angle{
  grid-template-columns: 70px minmax(0,1fr) auto;
}

.toolDock--fill .toolDock__inline2--gradUnits{
  grid-template-columns: minmax(0,1fr) auto;
}

.toolDock--fill .toolDock__range--long{
  appearance:none;
  -webkit-appearance:none;
  border:0;
  background:transparent;
  box-shadow:none;
  touch-action: pan-y;
}

.toolDock--fill .toolDock__range--long::-webkit-slider-runnable-track{
  height:7px;
  border-radius:999px;
  background: color-mix(in oklab, var(--accent) 34%, var(--panel2) 66%);
}

.toolDock--fill .toolDock__range--long::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:18px;
  height:18px;
  margin-top:-5.5px;
  border-radius:999px;
  border:1px solid color-mix(in oklab, var(--border) 68%, var(--text) 32%);
  background: color-mix(in oklab, var(--panel2) 22%, var(--text) 78%);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--panel) 84%, transparent);
}

.toolDock--fill .toolDock__range--long::-moz-range-track{
  height:7px;
  border-radius:999px;
  border:0;
  background: color-mix(in oklab, var(--accent) 34%, var(--panel2) 66%);
}

.toolDock--fill .toolDock__range--long::-moz-range-thumb{
  width:18px;
  height:18px;
  border-radius:999px;
  border:1px solid color-mix(in oklab, var(--border) 68%, var(--text) 32%);
  background: color-mix(in oklab, var(--panel2) 22%, var(--text) 78%);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--panel) 84%, transparent);
}

.toolDock--fill .toolDock__sw,
.toolDock--fill .toolDock__distSw,
.toolDock--fill .toolDock__distSwInput,
.toolDock--fill .toolDock__gradStop,
.toolDock--fill .toolDock__gradAdd{
  background: color-mix(in oklab, var(--panel2) 84%, var(--panel) 16%);
  border-color: color-mix(in oklab, var(--text) 18%, var(--border) 82%);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--panel) 90%, transparent);
}

.toolDock--fill .toolDock__gradAdd{
  border-style: dashed;
  color: var(--text);
}

.toolDock--fill .toolDock__gradStopHandle,
.toolDock--fill .toolDock__gradShift,
.toolDock--fill .toolDock__distDel{
  border-color: color-mix(in oklab, var(--text) 16%, var(--border) 84%);
  background: color-mix(in oklab, var(--panel2) 88%, var(--text) 12%);
  color: var(--text);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--panel) 84%, transparent);
}

.toolDock--fill .toolDock__hint--gradDnd{
  color: color-mix(in oklab, var(--text) 82%, var(--accent) 18%);
}

.toolDock--fill .toolDock__gradStopHandle.isOver{
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 45%, transparent), 0 0 0 7px color-mix(in oklab, var(--panel) 68%, transparent);
}

.toolDock--fill .toolDock__gradStop.isOver{
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 45%, transparent), 0 0 0 7px color-mix(in oklab, var(--panel) 68%, transparent);
}

.toolDock--fill .toolDock__gradStop.isDrag{
  opacity:.62;
}

.toolDock--fill .toolDock__gradStops{
  flex-wrap:wrap;
  overflow:visible;
  overflow-x:visible;
  overflow-y:visible;
  padding-bottom:0;
  row-gap:8px;
  column-gap:6px;
}

.toolDock--fill .toolDock__gradStopItem,
.toolDock--fill .toolDock__gradAdd{
  flex:0 0 auto;
}

.toolDock--fill .toolDock__gradDropMarker{
  width: 3px;
  background: color-mix(in oklab, var(--accent) 76%, var(--text) 24%);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--border) 58%, var(--accent) 42%), 0 0 8px color-mix(in oklab, var(--accent) 36%, transparent);
}

.toolDock--fill .toolDock__gradStopItem.isDragSource{
  opacity:.58;
  transform: scale(.94);
  filter: saturate(.82);
}

.toolDock--fill .toolDock__gradStopItem.isDropTarget{
  transform: translateY(-1px);
}

.toolDock--fill .toolDock__gradStopItem.isDropTarget .toolDock__gradStopHandle,
.toolDock--fill .toolDock__gradStopItem.isDropTarget .toolDock__gradStop,
.toolDock--fill .toolDock__gradStopItem.isDropTarget .toolDock__gradShift{
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 56%, transparent), 0 0 0 6px color-mix(in oklab, var(--panel) 72%, transparent);
}

.toolDock--fill .toolDock__gradShift:disabled{
  opacity:.40;
}

.toolDock--fill .toolDock__gradDel{
  background: color-mix(in oklab, var(--panel2) 75%, var(--text) 25%);
  border-color: color-mix(in oklab, var(--text) 22%, var(--border) 78%);
  color: var(--text);
}

.toolDock--fill .toolDock__actions{
  background: var(--panel);
  border-top: 1px solid var(--border);
}

.toolDock--fill .toolDock__collapse{
  border-color: color-mix(in oklab, var(--border) 82%, var(--text) 18%);
  background: color-mix(in oklab, var(--panel2) 86%, var(--panel) 14%);
}

.toolDock--fill .toolDock__collapseSummary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  color: var(--text);
  background: color-mix(in oklab, var(--panel2) 68%, var(--panel) 32%);
  border-bottom: 1px solid color-mix(in oklab, var(--border) 82%, var(--text) 18%);
}

.toolDock--fill .toolDock__collapseSummary::after{
  content: '▾';
  color: var(--muted);
  font-size: 11px;
  line-height: 1;
  transition: transform .14s ease;
}

.toolDock--fill .toolDock__collapse[open] > .toolDock__collapseSummary::after{
  transform: rotate(180deg);
}

.toolDock--fill .toolDock__collapseBody{
  background: color-mix(in oklab, var(--panel2) 90%, var(--panel) 10%);
}

.toolDock--fill .toolDock__edgeArrow{
  color: var(--muted);
}

.toolDock--fill .toolDock__edgeGrad{
  border-color: color-mix(in oklab, var(--text) 18%, var(--border) 82%);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--panel) 82%, transparent) inset;
}

.toolDock--fill .toolDock__gradMini{
  margin-top:5px;
  height:18px;
  border-color: color-mix(in oklab, var(--text) 18%, var(--border) 82%);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--panel) 82%, transparent) inset;
}

#canvasWrap .toolDock--fill{
  background: color-mix(in oklab, var(--panel2) 78%, var(--bg) 22%);
  border-color: color-mix(in oklab, var(--border) 82%, var(--text) 18%);
  color: var(--text);
  box-shadow: 0 14px 32px rgba(18,30,46,.18);
}

/* Unified gradient look for non-fill docks */
.toolDock__gradientControlsHost .toolDock__label,
.toolDock__gradientControlsHost .toolDock__val{
  color: var(--text);
  font-weight: 500;
}

.toolDock__gradientControlsHost .toolDock__hint,
.toolDock__gradientControlsHost .toolDock__muted,
.toolDock__gradientControlsHost .toolDock__suffix{
  color: var(--muted);
}

.toolDock__gradientControlsHost .toolDock__sep{
  background: color-mix(in oklab, var(--border) 78%, var(--text) 22%);
}

.toolDock__gradientControlsHost .toolDock__range{
  accent-color: var(--accent);
}

.toolDock__gradientControlsHost .toolDock__num{
  background: var(--panel2);
  border: 1px solid var(--border);
  color: var(--text);
}

.toolDock__gradientControlsHost [data-row="angleRow"].isPathMode{
  opacity:.62;
}

.toolDock__gradientControlsHost [data-row="angleRow"].isPathMode .toolDock__stackRange{
  pointer-events:none;
}

.toolDock__gradientControlsHost .toolDock__hint--pathAngle{
  margin-top:4px;
}

.toolDock__gradientControlsHost .toolDock__chip{
  background: var(--panel2);
  border-color: var(--border);
  color: var(--text);
}

.toolDock__gradientControlsHost .toolDock__chip.isOn{
  border-color: color-mix(in oklab, var(--accent) 56%, var(--border) 44%);
  background: color-mix(in oklab, var(--accent) 18%, var(--panel2) 82%);
  color: var(--text);
}

.toolDock__gradientControlsHost .toolDock__range--long{
  appearance:none;
  -webkit-appearance:none;
  border:0;
  background:transparent;
  box-shadow:none;
  touch-action: pan-y;
}

.toolDock__gradientControlsHost .toolDock__range--long::-webkit-slider-runnable-track{
  height:7px;
  border-radius:999px;
  background: color-mix(in oklab, var(--accent) 34%, var(--panel2) 66%);
}

.toolDock__gradientControlsHost .toolDock__range--long::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:18px;
  height:18px;
  margin-top:-5.5px;
  border-radius:999px;
  border:1px solid color-mix(in oklab, var(--border) 68%, var(--text) 32%);
  background: color-mix(in oklab, var(--panel2) 22%, var(--text) 78%);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--panel) 84%, transparent);
}

.toolDock__gradientControlsHost .toolDock__range--long::-moz-range-track{
  height:7px;
  border-radius:999px;
  border:0;
  background: color-mix(in oklab, var(--accent) 34%, var(--panel2) 66%);
}

.toolDock__gradientControlsHost .toolDock__range--long::-moz-range-thumb{
  width:18px;
  height:18px;
  border-radius:999px;
  border:1px solid color-mix(in oklab, var(--border) 68%, var(--text) 32%);
  background: color-mix(in oklab, var(--panel2) 22%, var(--text) 78%);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--panel) 84%, transparent);
}

.toolDock__gradientControlsHost .toolDock__distRow{
  grid-template-columns: 12px minmax(88px,1fr) 72px minmax(34px,max-content);
  gap:6px;
  align-items:center;
}

.toolDock__gradientControlsHost .toolDock__distRow--edgeArrow{
  grid-template-columns: minmax(90px,1fr) minmax(88px,1fr) 72px minmax(34px,max-content);
}

.toolDock__gradientControlsHost .toolDock__edgePair{
  grid-template-columns: 10px 10px 10px minmax(42px,1fr);
  gap:5px;
}

.toolDock__gradientControlsHost .toolDock__sw,
.toolDock__gradientControlsHost .toolDock__distSw,
.toolDock__gradientControlsHost .toolDock__distSwInput,
.toolDock__gradientControlsHost .toolDock__gradStop,
.toolDock__gradientControlsHost .toolDock__gradAdd{
  background: color-mix(in oklab, var(--panel2) 84%, var(--panel) 16%);
  border-color: color-mix(in oklab, var(--text) 18%, var(--border) 82%);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--panel) 90%, transparent);
}

.toolDock__gradientControlsHost .toolDock__gradAdd{
  border-style:dashed;
  color: var(--text);
}

.toolDock__gradientControlsHost .toolDock__gradStopHandle,
.toolDock__gradientControlsHost .toolDock__gradShift,
.toolDock__gradientControlsHost .toolDock__distDel{
  border-color: color-mix(in oklab, var(--text) 16%, var(--border) 84%);
  background: color-mix(in oklab, var(--panel2) 88%, var(--text) 12%);
  color: var(--text);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--panel) 84%, transparent);
}

.toolDock__gradientControlsHost .toolDock__hint--gradDnd{
  color: color-mix(in oklab, var(--text) 82%, var(--accent) 18%);
}

.toolDock__gradientControlsHost .toolDock__gradStopHandle.isOver,
.toolDock__gradientControlsHost .toolDock__gradStop.isOver{
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 45%, transparent), 0 0 0 7px color-mix(in oklab, var(--panel) 68%, transparent);
}

.toolDock__gradientControlsHost .toolDock__gradStop.isDrag{
  opacity:.62;
}

.toolDock__gradientControlsHost .toolDock__gradStops{
  flex-wrap:wrap;
  overflow:visible;
  overflow-x:visible;
  overflow-y:visible;
  padding-bottom:0;
  row-gap:8px;
  column-gap:6px;
}

.toolDock__gradientControlsHost .toolDock__gradStopItem,
.toolDock__gradientControlsHost .toolDock__gradAdd{
  flex:0 0 auto;
}

.toolDock__gradientControlsHost .toolDock__gradDropMarker{
  width: 3px;
  background: color-mix(in oklab, var(--accent) 76%, var(--text) 24%);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--border) 58%, var(--accent) 42%), 0 0 8px color-mix(in oklab, var(--accent) 36%, transparent);
}

.toolDock__gradientControlsHost .toolDock__gradStopItem.isDragSource{
  opacity:.58;
  transform: scale(.94);
  filter: saturate(.82);
}

.toolDock__gradientControlsHost .toolDock__gradStopItem.isDropTarget{
  transform: translateY(-1px);
}

.toolDock__gradientControlsHost .toolDock__gradStopItem.isDropTarget .toolDock__gradStopHandle,
.toolDock__gradientControlsHost .toolDock__gradStopItem.isDropTarget .toolDock__gradStop,
.toolDock__gradientControlsHost .toolDock__gradStopItem.isDropTarget .toolDock__gradShift{
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 56%, transparent), 0 0 0 6px color-mix(in oklab, var(--panel) 72%, transparent);
}

.toolDock__gradientControlsHost .toolDock__gradShift:disabled{
  opacity:.40;
}

.toolDock__gradientControlsHost .toolDock__gradDel{
  background: color-mix(in oklab, var(--panel2) 75%, var(--text) 25%);
  border-color: color-mix(in oklab, var(--text) 22%, var(--border) 78%);
  color: var(--text);
}

.toolDock__gradientControlsHost .toolDock__collapse{
  border-color: color-mix(in oklab, var(--border) 82%, var(--text) 18%);
  background: color-mix(in oklab, var(--panel2) 86%, var(--panel) 14%);
}

.toolDock__gradientControlsHost .toolDock__collapseSummary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  color: var(--text);
  background: color-mix(in oklab, var(--panel2) 68%, var(--panel) 32%);
  border-bottom: 1px solid color-mix(in oklab, var(--border) 82%, var(--text) 18%);
}

.toolDock__gradientControlsHost .toolDock__collapseSummary::after{
  content: '▾';
  color: var(--muted);
  font-size: 11px;
  line-height: 1;
  transition: transform .14s ease;
}

.toolDock__gradientControlsHost .toolDock__collapse[open] > .toolDock__collapseSummary::after{
  transform: rotate(180deg);
}

.toolDock__gradientControlsHost .toolDock__collapseBody{
  background: color-mix(in oklab, var(--panel2) 90%, var(--panel) 10%);
}

.toolDock__gradientControlsHost .toolDock__edgeArrow{
  color: var(--muted);
}

.toolDock__gradientControlsHost .toolDock__edgeGrad{
  border-color: color-mix(in oklab, var(--text) 18%, var(--border) 82%);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--panel) 82%, transparent) inset;
}

.toolDock__gradientControlsHost .toolDock__gradMini{
  margin-top:5px;
  height:18px;
  border-color: color-mix(in oklab, var(--text) 18%, var(--border) 82%);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--panel) 82%, transparent) inset;
}

#canvasWrap .toolDock--fill .toolDock__meta{
  color: color-mix(in oklab, var(--muted) 82%, var(--text) 18%);
}

#canvasWrap .toolDock--fill .toolDock__hint,
#canvasWrap .toolDock--fill .toolDock__muted,
#canvasWrap .toolDock--fill .toolDock__rowsMax{
  color: color-mix(in oklab, var(--muted) 88%, var(--text) 12%);
}

#canvasWrap .toolDock--fill .toolDock__select,
#canvasWrap .toolDock--fill .toolDock__num,
#canvasWrap .toolDock--fill .toolDock__input,
#canvasWrap .toolDock--fill .toolDock__input--num,
#canvasWrap .toolDock--fill .toolDock__input--sel,
#canvasWrap .toolDock--fill .toolDock__input--txt{
  background: color-mix(in oklab, var(--panel) 88%, var(--bg) 12%);
  border-color: color-mix(in oklab, var(--border) 82%, var(--text) 18%);
  color: var(--text);
}

#canvasWrap .toolDock--fill .toolDock__gradAdd{
  background: color-mix(in oklab, var(--panel) 88%, var(--bg) 12%);
  border-color: color-mix(in oklab, var(--border) 82%, var(--text) 18%);
  color: var(--text);
}

#canvasWrap .toolDock--fill .toolDock__actions{
  background: color-mix(in oklab, var(--panel) 92%, var(--bg) 8%);
  border-top-color: color-mix(in oklab, var(--border) 82%, var(--text) 18%);
}

/* Text editor modal v2 */
.modalCard--textEditorV2{
  width:min(1320px,98vw);
  height:min(90dvh,960px);
  max-height:min(90dvh,960px);
  animation:textEditorModalIn .2s ease;
}
.modalCard--textEditorV2 .modalBody{
  padding:0;
  overflow:hidden;
  min-height:0;
}
.textEditorModalV2{
  --te-bg: color-mix(in oklab, var(--panel) 84%, var(--bg) 16%);
  --te-surface: color-mix(in oklab, var(--panel) 76%, var(--bg) 24%);
  --te-surface-soft: color-mix(in oklab, var(--panel2) 74%, var(--bg) 26%);
  --te-border: color-mix(in oklab, var(--border) 84%, var(--text) 16%);
  --te-muted: color-mix(in oklab, var(--muted) 86%, var(--text) 14%);
  --te-accent-soft: color-mix(in oklab, var(--accent) 18%, var(--panel2) 82%);
  background:
    radial-gradient(1000px 420px at 88% -18%, color-mix(in oklab, var(--accent) 16%, transparent 84%), transparent 72%),
    radial-gradient(820px 360px at 0% 108%, color-mix(in oklab, var(--panel2) 50%, transparent 50%), transparent 75%),
    var(--te-bg);
  color: var(--text);
  height:100%;
  min-height:0;
}
.textEditorModalV2__layout{
  display:grid;
  grid-template-columns:minmax(280px,340px) minmax(0,1fr);
  height:100%;
  min-height:0;
}
.textEditorModalV2__left{
  border-right:1px solid var(--te-border);
  background:color-mix(in oklab, var(--te-surface) 88%, transparent 12%);
  display:flex;
  flex-direction:column;
  min-width:0;
}
.textEditorModalV2__upload{
  position:sticky;
  top:0;
  z-index:2;
  display:grid;
  gap:8px;
  padding:12px;
  background:color-mix(in oklab, var(--te-surface-soft) 90%, transparent 10%);
  border-bottom:1px solid var(--te-border);
}
.textEditorModalV2__leftScroll{
  min-height:0;
  overflow:auto;
}
.textEditorModalV2__controls{
  display:grid;
  gap:10px;
  padding:12px;
}
.textEditorModalV2__collapse{
  margin-top:4px;
}
.textEditorModalV2__categoryGrid{
  display:grid;
  gap:8px;
  margin-top:6px;
}
.textEditorModalV2__categoryItem{
  display:grid;
  gap:3px;
}
.textEditorModalV2__categoryItem .toolDock__chip{
  justify-content:flex-start;
}
.textEditorModalV2__categoryExample{
  min-height:14px;
  font-size:11px;
  color:var(--te-muted);
  padding:0 2px;
}
.textEditorModalV2__main{
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  gap:8px;
  padding:12px;
  min-width:0;
  min-height:0;
  overflow:hidden;
}
.textEditorModalV2__stack{
  display:grid;
  grid-template-rows:minmax(240px,1fr) minmax(220px,.9fr);
  gap:8px;
  min-height:0;
}
.textEditorModalV2__editorTop{
  min-height:0;
  display:grid;
}
.textEditorModalV2__editorToolbar{
  position:sticky;
  top:0;
  z-index:2;
  display:grid;
  gap:6px;
  padding:8px;
  border-bottom:1px solid color-mix(in oklab, var(--te-border) 88%, transparent 12%);
  background:color-mix(in oklab, var(--te-surface-soft) 88%, transparent 12%);
}
.textEditorModalV2__toolbarRow{
  display:grid;
  align-items:center;
  gap:6px;
  min-width:0;
}
.textEditorModalV2__toolbarRow--top{
  grid-template-columns:repeat(6, minmax(0, 26px)) minmax(0, 1fr);
}
.textEditorModalV2__toolbarRow--bottom{
  grid-template-columns:minmax(204px, 1.45fr) minmax(72px, .55fr) minmax(136px, .9fr) minmax(136px, .9fr);
}
.textEditorModalV2__editorToolbar .toolDock__chip,
.textEditorModalV2__editorToolbar .toolDock__select,
.textEditorModalV2__editorToolbar .toolDock__input,
.textEditorModalV2__editorToolbar .toolDock__swatchBtn{
  min-width:0;
  height:30px;
}
.textEditorModalV2__editorToolbar .toolDock__chip{
  width:100%;
  padding:0;
}
.textEditorModalV2__editorToolbar .toolDock__chip--seg{
  width:100%;
}
.textEditorModalV2__editorToolbar .toolDock__select{
  width:100%;
}
.textEditorModalV2__editorToolbar .toolDock__input--num{
  width:100%;
}
.textEditorModalV2__editorToolbar .toolDock__input--hex{
  width:100%;
}
.textEditorModalV2__sizeCtl{
  display:grid;
  grid-template-rows:auto auto;
  gap:6px;
  min-width:0;
  position:relative;
}
.textEditorModalV2__sizeInputs{
  display:grid;
  grid-template-columns:minmax(0,1fr) 66px;
  gap:6px;
  min-width:0;
}
.textEditorModalV2__ctlLabel{
  font-size:11px;
  line-height:1;
  color:var(--te-muted);
  white-space:nowrap;
}
.textEditorModalV2__colorCtl{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:6px;
  min-width:0;
  padding-top:2px;
}
.textEditorModalV2__metricCtl{
  min-width:0;
  position:relative;
  display:grid;
  grid-template-columns:30px minmax(0,1fr);
  gap:6px;
  align-items:center;
}
.textEditorModalV2__metricIconBtn{
  width:30px;
  min-width:30px;
  padding:0;
  justify-content:center;
}
.textEditorModalV2__metricCtl.isOpen .textEditorModalV2__metricIconBtn{
  background:color-mix(in oklab, var(--accent) 22%, var(--te-surface-soft) 78%);
  border-color:color-mix(in oklab, var(--accent) 55%, var(--te-border) 45%);
}
.textEditorModalV2__metricPopover{
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  z-index:8;
  width:min(220px, 56vw);
  display:grid;
  gap:6px;
  padding:8px;
  border:1px solid var(--te-border);
  border-radius:10px;
  background:color-mix(in oklab, var(--te-surface) 96%, transparent 4%);
  box-shadow:0 8px 24px rgba(2,6,23,.22);
}
.textEditorModalV2__metricPopover[hidden]{
  display:none !important;
}
.textEditorModalV2__bottomSplit{
  display:grid;
  grid-template-columns:minmax(0,3fr) minmax(0,2fr);
  gap:8px;
  min-height:0;
}
.textEditorModalV2__previewCol,
.textEditorModalV2__familiesCol{
  min-width:0;
  min-height:0;
  display:grid;
  gap:8px;
}
.textEditorModalV2__familiesCol{
  grid-template-rows:auto minmax(0,1fr) auto;
}
.textEditorModalV2__previewCol{
  grid-template-rows:minmax(0,1fr);
}
.textEditorModalV2__editorWrap{
  border:1px solid var(--te-border);
  border-radius:12px;
  background:color-mix(in oklab, var(--te-surface) 92%, transparent 8%);
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  min-height:0;
  overflow:hidden;
}
.textEditorModalV2__editor{
  min-height:0;
  height:100%;
  overflow:auto;
  padding:12px;
  white-space:pre-wrap;
  word-break:break-word;
  outline:none;
  caret-color:var(--text);
}
.textEditorModalV2__editor:focus-visible{
  box-shadow:inset 0 0 0 2px color-mix(in oklab, var(--accent) 38%, transparent 62%);
}
.textEditorModalV2__editor.isEmpty::before{
  content:'Введите текст';
  color:color-mix(in oklab, var(--te-muted) 86%, var(--text) 14%);
  pointer-events:none;
}
.textEditorModalV2__familyTop{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
}
.textEditorModalV2__familyList{
  border:1px solid var(--te-border);
  border-radius:12px;
  background:color-mix(in oklab, var(--te-surface) 94%, transparent 6%);
  overflow:auto;
  min-height:0;
  position:relative;
  outline:none;
}
.textEditorModalV2__familyList:focus-visible{
  box-shadow:0 0 0 2px color-mix(in oklab, var(--accent) 40%, transparent 60%);
}
.textEditorModalV2__familyScroller{
  position:relative;
}
.textEditorModalV2__familyRow{
  position:absolute;
  left:0;
  right:0;
  height:72px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-rows:auto auto;
  gap:4px 10px;
  align-content:center;
  padding:10px 12px;
  border:0;
  border-bottom:1px solid color-mix(in oklab, var(--te-border) 86%, transparent 14%);
  background:transparent;
  color:var(--text);
  text-align:left;
  cursor:pointer;
}
.textEditorModalV2__familyRow:hover,
.textEditorModalV2__familyRow.isActive{
  background:color-mix(in oklab, var(--te-accent-soft) 60%, transparent 40%);
}
.textEditorModalV2__familyRow.isSelected{
  box-shadow:inset 2px 0 0 color-mix(in oklab, var(--accent) 74%, var(--text) 26%);
  background:color-mix(in oklab, var(--te-accent-soft) 82%, transparent 18%);
}
.textEditorModalV2__familyRow.isFallback .textEditorModalV2__familySample{
  opacity:.72;
}
.textEditorModalV2__familyName{
  display:block;
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.textEditorModalV2__familyInfo{
  display:block;
  font-size:11px;
  color:var(--te-muted);
}
.textEditorModalV2__familySample{
  grid-column:1 / -1;
  display:block;
  font-size:20px;
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.textEditorModalV2__previewWrap{
  border:1px dashed color-mix(in oklab, var(--te-border) 86%, var(--text) 14%);
  background:color-mix(in oklab, var(--te-surface) 92%, transparent 8%);
  border-radius:12px;
  padding:8px;
  min-height:0;
  height:100%;
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
}
.textEditorModalV2__preview{
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.textEditorModalV2__previewCanvas{
  display:block;
  image-rendering:auto;
  max-width:100%;
  max-height:100%;
}

.textEditorModalV2 .toolDock__label,
.textEditorModalV2 .toolDock__title,
.textEditorModalV2 .toolDock__val{
  color:var(--text);
}
.textEditorModalV2 .toolDock__hint,
.textEditorModalV2 .toolDock__meta{
  color:var(--te-muted);
}
.textEditorModalV2 .toolDock__select,
.textEditorModalV2 .toolDock__input,
.textEditorModalV2 .toolDock__input--num,
.textEditorModalV2 .toolDock__input--sel,
.textEditorModalV2 .toolDock__input--txt{
  background:color-mix(in oklab, var(--te-surface) 92%, transparent 8%);
  border-color:var(--te-border);
  color:var(--text);
}
.textEditorModalV2 .toolDock__select option{
  color:var(--text);
  background:var(--te-surface);
}
.textEditorModalV2 .toolDock__collapseBody{
  background:color-mix(in oklab, var(--te-surface-soft) 88%, transparent 12%);
}
.textEditorModalV2 .toolDock__input::placeholder,
.textEditorModalV2 .fontCombo__input::placeholder{
  color:color-mix(in oklab, var(--te-muted) 88%, var(--text) 12%);
}
.textEditorModalV2 .toolDock__chip{
  color:var(--text);
  background:color-mix(in oklab, var(--te-surface-soft) 86%, transparent 14%);
  border-color:var(--te-border);
}
.textEditorModalV2 .toolDock__chip:hover{
  background:color-mix(in oklab, var(--te-accent-soft) 72%, transparent 28%);
}
.textEditorModalV2 .toolDock__chip.isOn{
  background:color-mix(in oklab, var(--accent) 22%, var(--te-surface-soft) 78%);
  border-color:color-mix(in oklab, var(--accent) 55%, var(--te-border) 45%);
  color:var(--text);
}
.textEditorModalV2 .toolDock__chip:disabled,
.textEditorModalV2 .toolDock__select:disabled,
.textEditorModalV2 .toolDock__input:disabled{
  opacity:.5;
  cursor:not-allowed;
}
.textEditorModalV2 .toolDock__swatchBtn{
  border-color:var(--te-border);
  background:color-mix(in oklab, var(--te-surface-soft) 92%, transparent 8%);
}
.textEditorModalV2 .toolDock__actions{
  border-top:1px solid var(--te-border);
  background:color-mix(in oklab, var(--te-surface-soft) 82%, transparent 18%);
  padding-top:8px;
  margin-top:2px;
}
.textEditorModalV2 .fontCombo__panel,
.textEditorModalV2 .fontCombo__item,
.textEditorModalV2 .fontCombo__status,
.textEditorModalV2 .fontCombo__input{
  color:var(--text);
  background:color-mix(in oklab, var(--te-surface) 92%, transparent 8%);
  border-color:var(--te-border);
}

@keyframes textEditorModalIn{
  from{ opacity:0; transform:translateY(10px) scale(.995); }
  to{ opacity:1; transform:none; }
}

@media (prefers-reduced-motion: reduce){
  .modalCard--textEditorV2{
    animation:none;
  }
}

@media (max-width: 1024px){
  .modalCard--textEditorV2{
    width:100vw;
    max-width:none;
    height:100dvh;
    max-height:100dvh;
    border-radius:0;
  }
  .modalCard--textEditorV2 .modalHeader{
    border-radius:0;
  }
  .modalCard--textEditorV2 .modalBody{
    height:calc(100dvh - 56px);
    overflow:hidden;
  }
  .textEditorModalV2__layout{
    grid-template-columns:1fr;
    height:100%;
  }
  .textEditorModalV2__left{
    border-right:0;
    border-bottom:1px solid var(--te-border);
    max-height:45%;
  }
  .textEditorModalV2__main{
    grid-template-rows:minmax(0,1fr) auto;
  }
  .textEditorModalV2__stack{
    grid-template-rows:minmax(220px,1fr) minmax(220px,.95fr);
  }
  .textEditorModalV2__bottomSplit{
    grid-template-columns:minmax(0,3fr) minmax(0,2fr);
  }
  .textEditorModalV2__toolbarRow--top{
    grid-template-columns:repeat(6, minmax(0, 24px)) minmax(0, 1fr);
  }
  .textEditorModalV2__toolbarRow--bottom{
    grid-template-columns:minmax(184px,1.35fr) minmax(68px,.52fr) minmax(122px,.9fr) minmax(122px,.9fr);
  }
}

@media (max-width: 720px){
  .textEditorModalV2__toolbarRow{
    gap:4px;
  }
  .textEditorModalV2__toolbarRow--top{
    grid-template-columns:repeat(6, minmax(0, 22px)) minmax(0, 1fr);
  }
  .textEditorModalV2__toolbarRow--bottom{
    grid-template-columns:1fr;
  }
  .textEditorModalV2__bottomSplit{
    grid-template-columns:1fr;
    grid-template-rows:minmax(180px,1fr) minmax(130px,.8fr);
  }
  .textEditorModalV2__sizeCtl{
    grid-template-rows:auto auto;
  }
  .textEditorModalV2__sizeInputs{
    grid-template-columns:minmax(0,1fr) 64px;
  }
  .textEditorModalV2__editorToolbar .toolDock__chip,
  .textEditorModalV2__editorToolbar .toolDock__select,
  .textEditorModalV2__editorToolbar .toolDock__input,
  .textEditorModalV2__editorToolbar .toolDock__swatchBtn{
    height:30px;
    font-size:12px;
  }
}

/* ==============================
   Panel collapse controls
   ============================== */
:root,
body{
  --panel-left-effective: var(--panel-w-left, var(--panel-w));
  --panel-right-effective: var(--panel-w-right, var(--panel-w));
  --panel-collapse-duration: 220ms;
  --panel-collapse-ease: cubic-bezier(.2,.8,.2,1);
  --panel-slide-offset: 22px;
  --panel-parallax-offset: 10px;
}

.main{
  grid-template-columns: var(--panel-left-effective) minmax(0, 1fr) var(--panel-right-effective);
  transition: grid-template-columns var(--panel-collapse-duration) var(--panel-collapse-ease);
}

.app[data-left-collapsed="1"]{
  --panel-left-effective: 0px;
}

.app[data-right-collapsed="1"]{
  --panel-right-effective: 0px;
}

#leftPanel,
#rightPanel{
  min-width: 0;
  transform: translateX(0);
  opacity: 1;
  transition:
    transform var(--panel-collapse-duration) var(--panel-collapse-ease),
    opacity var(--panel-collapse-duration) ease,
    padding var(--panel-collapse-duration) var(--panel-collapse-ease),
    border-color var(--panel-collapse-duration) ease,
    box-shadow var(--panel-collapse-duration) ease;
  will-change: transform, opacity;
}

#leftPanel > *,
#rightPanel > *{
  transform: translateX(0);
  opacity: 1;
  transition:
    transform var(--panel-collapse-duration) var(--panel-collapse-ease),
    opacity var(--panel-collapse-duration) ease;
}

.app[data-left-collapsed="1"] #leftPanel{
  transform: translateX(calc(-1 * var(--panel-slide-offset)));
}

.app[data-right-collapsed="1"] #rightPanel{
  transform: translateX(var(--panel-slide-offset));
}

.app[data-left-collapsed="1"] #leftPanel > *{
  transform: translateX(calc(-1 * var(--panel-parallax-offset)));
  opacity: .92;
}

.app[data-right-collapsed="1"] #rightPanel > *{
  transform: translateX(var(--panel-parallax-offset));
  opacity: .92;
}

.app[data-left-collapsed="1"] #leftPanel,
.app[data-right-collapsed="1"] #rightPanel{
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  padding: 0;
  border-color: transparent;
  box-shadow: none;
}

.workspace{
  position: relative;
}

.panelToggle{
  position: absolute;
  top: 50%;
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--panel) 90%, #ffffff 10%) 0%,
    color-mix(in oklab, var(--panel2) 76%, var(--panel) 24%) 100%
  );
  color: var(--muted);
  box-shadow: 0 6px 14px rgba(15,23,42,.16);
  cursor: pointer;
  z-index: 86;
  transition:
    color 160ms ease,
    background 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform var(--panel-collapse-duration) var(--panel-collapse-ease);
}

.panelToggle--left{
  left: 0;
  top: auto;
  bottom: 12px;
  transform: translate(-46%, 0);
}

.panelToggle--right{
  right: 0;
  transform: translate(46%, -50%);
}

.panelToggle__chevron{
  font-size: 14px;
  line-height: 1;
  pointer-events: none;
}

.panelToggle:hover{
  color: var(--text);
  border-color: color-mix(in oklab, var(--text) 18%, var(--border) 82%);
  background: color-mix(in oklab, var(--panel2) 92%, var(--panel) 8%);
  box-shadow: 0 8px 16px rgba(15,23,42,.18);
}

.panelToggle--left:active{
  transform: translate(-46%, 0) scale(.96);
}

.panelToggle--right:active{
  transform: translate(46%, -50%) scale(.96);
}

.panelToggle:focus-visible{
  outline: none;
  box-shadow: var(--ring), 0 8px 16px rgba(15,23,42,.18);
}

.app[data-left-collapsed="1"] #panelToggleLeft,
.app[data-right-collapsed="1"] #panelToggleRight{
  color: var(--text);
  border-color: color-mix(in oklab, var(--accent) 36%, var(--border) 64%);
  background: color-mix(in oklab, var(--accent) 12%, var(--panel) 88%);
  box-shadow: 0 8px 16px color-mix(in oklab, var(--accent) 24%, transparent);
}

@media (max-width: 980px){
  .panelToggle{
    width: 28px;
    height: 28px;
    border-radius: 9px;
  }
  .panelToggle--left{
    bottom: 8px;
  }
  .panelToggle__chevron{ font-size: 12px; }
}

@media (prefers-reduced-motion: reduce){
  .main,
  #leftPanel,
  #rightPanel,
  #leftPanel > *,
  #rightPanel > *,
  .panelToggle{
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
}

body.isHandPanMode .panelToggle{
  pointer-events: none !important;
  opacity: .46;
  filter: saturate(.66) contrast(.96);
}