/* canvas-edit.css — полотно «Сравнение и правка». Современный тёмный UI (Figma-grade).
 * Все классы префиксованы odc-. CSS-переменная --odc-scale ставится камерой.
 */
.odc-overlay {
  position: fixed;
  inset: 0;
  z-index: 99000;
  --odc-scale: 0.5;
  --odc-accent: #4c8dff;
  --odc-sel: #0d99ff;
  background: #17181c;
  color: #eceef2;
  display: flex;
  flex-direction: column;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none;
  user-select: none;
}
.odc-overlay[hidden] {
  display: none;
}
.odc-overlay * {
  box-sizing: border-box;
}
.odc-ic {
  display: block;
}

/* ── top bar ── */
.odc-bar {
  flex: 0 0 auto;
  height: 54px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  background: rgba(30, 32, 37, 0.98);
  border-bottom: 1px solid #2e3037;
  position: relative;
  z-index: 20;
}
.odc-titlewrap {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.odc-title {
  font-size: 13.5px;
  font-weight: 600;
  color: #f4f5f7;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.odc-chip {
  font-size: 11px;
  font-weight: 500;
  color: #b9bec7;
  background: #2e3037;
  padding: 3px 9px;
  border-radius: 7px;
  white-space: nowrap;
}
.odc-spacer {
  flex: 1 1 auto;
}

.odc-iconbtn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: #aeb4be;
  border-radius: 9px;
  cursor: pointer;
  transition:
    background 0.13s ease,
    color 0.13s ease,
    transform 0.08s ease;
}
.odc-iconbtn:hover {
  background: #2c2f36;
  color: #fff;
}
.odc-iconbtn:active {
  transform: scale(0.94);
}
.odc-iconbtn.active {
  background: rgba(76, 141, 255, 0.16);
  color: #6aa3ff;
}

.odc-seg {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: #2a2c32;
  border: 1px solid #34373f;
  border-radius: 11px;
  padding: 3px;
}
.odc-seg button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  background: transparent;
  color: #aeb4be;
  font-size: 12.5px;
  font-weight: 500;
  padding: 7px 15px;
  border-radius: 8px;
  cursor: pointer;
  transition:
    background 0.14s ease,
    color 0.14s ease,
    box-shadow 0.14s ease;
}
.odc-seg button:hover {
  color: #fff;
}
.odc-seg button.active {
  background: var(--odc-accent);
  color: #fff;
  box-shadow: 0 2px 9px rgba(76, 141, 255, 0.4);
}
.odc-seg button .odc-ic {
  width: 16px;
  height: 16px;
}

/* ── viewport / world ── */
.odc-viewport {
  flex: 1 1 auto;
  position: relative;
  overflow: hidden;
  cursor: default;
  background-color: #17181c;
  background-image: radial-gradient(#26282e 1.2px, transparent 1.3px);
  background-size: 24px 24px;
}
.odc-viewport.odc-panning {
  cursor: grabbing;
}
.odc-viewport.odc-space {
  cursor: grab;
}
.odc-viewport.odc-space.odc-panning {
  cursor: grabbing;
}
.odc-world {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  will-change: transform;
}
.odc-viewport.odc-moving iframe,
.odc-viewport.odc-moving .odc-ref-media {
  pointer-events: none !important;
}

/* ── zoom cluster (bottom-right, как в Figma) ── */
.odc-zoomcluster {
  position: absolute;
  right: 18px;
  bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: rgba(30, 32, 37, 0.98);
  border: 1px solid #34373f;
  border-radius: 11px;
  padding: 4px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  z-index: 15;
}
.odc-zb {
  min-width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: #c2c7d0;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  transition:
    background 0.12s ease,
    color 0.12s ease,
    transform 0.08s ease;
}
.odc-zb:hover {
  background: #2c2f36;
  color: #fff;
}
.odc-zb:active {
  transform: scale(0.94);
}
.odc-zoomlabel {
  min-width: 54px;
  font-variant-numeric: tabular-nums;
}
.odc-zsep {
  width: 1px;
  height: 20px;
  background: #34373f;
  margin: 0 3px;
}

/* ── hint / loading ── */
.odc-hint {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  background: rgba(30, 32, 37, 0.98);
  border: 1px solid #2e3037;
  color: #b9bec7;
  font-size: 12px;
  padding: 8px 16px;
  border-radius: 10px;
  pointer-events: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  opacity: 1;
  animation: odcHintFade 0.7s ease 6s forwards;
}
.odc-hint b {
  color: #eceef2;
  font-weight: 600;
}
@keyframes odcHintFade {
  to {
    opacity: 0;
    visibility: hidden;
  }
}
.odc-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  color: #b9bec7;
  font-size: 14px;
  background: #17181c;
}
.odc-spin {
  width: 16px;
  height: 16px;
  border: 2px solid #34373f;
  border-top-color: var(--odc-accent);
  border-radius: 50%;
  animation: odcSpin 0.8s linear infinite;
}
@keyframes odcSpin {
  to {
    transform: rotate(360deg);
  }
}

/* ── column (экран воронки) ── */
.odc-col {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  contain: layout;
}
.odc-col-head {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 32px;
  padding: 0 13px;
  background: #25272d;
  border: 1px solid #31343c;
  border-radius: 9px;
  color: #e3e6ea;
  font-size: 12.5px;
  font-weight: 600;
  cursor: grab;
  transition:
    background 0.14s ease,
    color 0.14s ease,
    border-color 0.14s ease;
}
.odc-col-head:active {
  cursor: grabbing;
}
.odc-col-head:hover {
  background: #2c2f36;
}
.odc-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--odc-accent);
  flex: 0 0 auto;
}
.odc-head-sub {
  color: #767b85;
  font-weight: 500;
  font-size: 11.5px;
}
.odc-col.odc-col-selected > .odc-col-head {
  background: var(--odc-accent);
  color: #fff;
  border-color: var(--odc-accent);
}
.odc-col.odc-col-selected > .odc-col-head .odc-dot {
  background: #fff;
}

.odc-zone-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6c7079;
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: 2px;
}

.odc-ref {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.odc-ref-media {
  border: 1px solid #31343c;
  border-radius: 12px;
  overflow: hidden;
  background: #0e0f12;
  position: relative;
}
.odc-ref-media img,
.odc-ref-media video {
  display: block;
  width: 100%;
  height: auto;
}
.odc-clip-badge {
  position: absolute;
  left: 8px;
  bottom: 8px;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  font-size: 11px;
  border-radius: 7px;
  padding: 4px 9px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.odc-frames {
  display: flex;
  flex-direction: column; /* iPad ПОД iPhone (а не сбоку) */
  gap: 16px;
  align-items: flex-start;
}
.odc-frame {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.odc-frame-box {
  border: 1px solid #31343c;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.4);
  contain: layout;
}
.odc-frame-box iframe {
  display: block;
  border: 0;
  background: #fff;
}
.odc-preview-img {
  display: block;
  width: 100%;
  height: auto;
}
.odc-frame-tag {
  font-size: 11px;
  color: #767b85;
  text-align: center;
  font-weight: 500;
}
.odc-col.odc-col-selected .odc-frame-box {
  box-shadow:
    0 0 0 calc(2px / var(--odc-scale)) var(--odc-accent),
    0 10px 34px rgba(0, 0, 0, 0.4);
}

/* ── overlay-слой выделения (в world) ── */
.odc-overlay-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 6;
}
.odc-ovl-box {
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  pointer-events: none;
  border: calc(1.5px / var(--odc-scale)) solid var(--odc-sel);
  border-radius: calc(2px / var(--odc-scale));
}
.odc-ovl-hover {
  border-color: var(--odc-sel);
  opacity: 0.65;
  background: rgba(13, 153, 255, 0.06);
}
.odc-ovl-sel {
  border-color: var(--odc-sel);
  box-shadow: 0 0 0 calc(1px / var(--odc-scale)) rgba(13, 153, 255, 0.3);
}

/* ── inspector (viewport-space) ── */
.odc-inspector {
  position: absolute;
  left: 16px;
  bottom: 16px;
  min-width: 222px;
  background: rgba(30, 32, 37, 0.98);
  border: 1px solid #34373f;
  border-radius: 13px;
  padding: 13px 15px;
  color: #eceef2;
  z-index: 16;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.5);
}
.odc-inspector[hidden] {
  display: none;
}
.odc-insp-title {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 11px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.odc-insp-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: #aeb4be;
}
.odc-insp-row span:last-child {
  font-variant-numeric: tabular-nums;
  min-width: 34px;
  text-align: right;
  color: #eceef2;
}
.odc-insp-row input[type="range"] {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: #3a3d45;
  border-radius: 3px;
  outline: none;
}
.odc-insp-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--odc-accent);
  border: 2px solid #1b1d22;
  cursor: pointer;
}
.odc-insp-row input[type="range"]::-moz-range-thumb {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--odc-accent);
  border: 2px solid #1b1d22;
  cursor: pointer;
}
.odc-insp-el {
  margin-top: 11px;
  padding-top: 11px;
  border-top: 1px solid #2e3037;
  font-size: 11.5px;
  color: #969ba6;
  font-family: ui-monospace, Menlo, monospace;
  word-break: break-all;
}
.odc-insp-el[hidden] {
  display: none;
}

/* ── toast ── */
.odc-toast {
  position: absolute;
  left: 50%;
  bottom: 72px;
  transform: translateX(-50%);
  background: #2a2c32;
  border: 1px solid #3a3d45;
  color: #eceef2;
  font-size: 13px;
  padding: 10px 18px;
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.odc-toast.show {
  opacity: 1;
}

/* проектная кнопка-входа в полотно (в #detail-toolbar) */
.odc-launch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ── Фаза 3: edit-панель, ручки, слои ── */
.odc-editbar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.odc-editbar[hidden] {
  display: none;
}
.odc-apply {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  background: var(--odc-accent);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  padding: 8px 15px;
  border-radius: 9px;
  cursor: pointer;
  transition:
    background 0.13s ease,
    opacity 0.13s ease,
    transform 0.08s ease;
}
.odc-apply:hover {
  background: #5d9aff;
}
.odc-apply:active {
  transform: scale(0.97);
}
.odc-apply:disabled {
  opacity: 0.4;
  cursor: default;
  background: #3a3d45;
}
.odc-apply .odc-ic {
  width: 15px;
  height: 15px;
}

/* ручки ресайза на рамке выделения */
.odc-ovl-handle {
  position: absolute;
  width: calc(9px / var(--odc-scale, 1));
  height: calc(9px / var(--odc-scale, 1));
  background: #fff;
  border: calc(1.5px / var(--odc-scale, 1)) solid var(--odc-sel);
  border-radius: calc(2px / var(--odc-scale, 1));
  transform: translate(-50%, -50%);
  pointer-events: none;
  display: none;
}
.odc-h-nw {
  top: 0;
  left: 0;
}
.odc-h-n {
  top: 0;
  left: 50%;
}
.odc-h-ne {
  top: 0;
  left: 100%;
}
.odc-h-e {
  top: 50%;
  left: 100%;
}
.odc-h-se {
  top: 100%;
  left: 100%;
}
.odc-h-s {
  top: 100%;
  left: 50%;
}
.odc-h-sw {
  top: 100%;
  left: 0;
}
.odc-h-w {
  top: 50%;
  left: 0;
}
.odc-mode-edit .odc-ovl-sel {
  pointer-events: auto;
  cursor: move;
}
.odc-mode-edit .odc-ovl-handle {
  display: block;
  pointer-events: auto;
}
.odc-h-nw,
.odc-h-se {
  cursor: nwse-resize;
}
.odc-h-ne,
.odc-h-sw {
  cursor: nesw-resize;
}
.odc-h-n,
.odc-h-s {
  cursor: ns-resize;
}
.odc-h-e,
.odc-h-w {
  cursor: ew-resize;
}

/* панель слоёв */
.odc-layers {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 248px;
  background: rgba(28, 30, 35, 0.99);
  border-left: 1px solid #2e3037;
  z-index: 14;
  display: flex;
  flex-direction: column;
  box-shadow: -8px 0 30px rgba(0, 0, 0, 0.35);
}
.odc-layers[hidden] {
  display: none;
}
.odc-layers-head {
  flex: 0 0 auto;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px 0 14px;
  border-bottom: 1px solid #2e3037;
  font-size: 13px;
  font-weight: 600;
  color: #eceef2;
}
.odc-layers-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 6px 0;
}
.odc-lrow {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 0 10px 0 8px;
  font-size: 12px;
  color: #c2c7d0;
  cursor: pointer;
  white-space: nowrap;
}
.odc-lrow:hover {
  background: #2c2f36;
}
.odc-lrow.sel {
  background: rgba(76, 141, 255, 0.18);
  color: #fff;
}
.odc-lrow-screen {
  font-weight: 600;
  color: #eceef2;
}
.odc-lcaret {
  width: 12px;
  flex: 0 0 auto;
  color: #767b85;
  font-size: 10px;
  text-align: center;
}
.odc-llabel {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: ui-monospace, Menlo, monospace;
}
.odc-lrow-screen .odc-llabel {
  font-family: inherit;
}
.odc-llock {
  flex: 0 0 auto;
  color: #767b85;
  opacity: 0;
  display: inline-flex;
}
.odc-lrow:hover .odc-llock {
  opacity: 0.7;
}
.odc-llock.on {
  opacity: 1;
  color: var(--odc-accent);
}
.odc-llock:hover {
  opacity: 1 !important;
  color: #fff;
}
.odc-lhint {
  font-size: 11px;
  color: #767b85;
  padding: 4px 14px 8px 30px;
  font-style: italic;
}

/* ── Фаза 4: инструменты — линейка, сетка, измеритель, exploded ── */
.odc-tools {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.odc-tsep {
  width: 1px;
  height: 22px;
  background: #2e3037;
}
.odc-tool-measure-on,
.odc-viewport.odc-tool-measure {
  cursor: crosshair;
}

/* fx-слой (сетка/snap/измеритель) поверх контента, под панелями */
.odc-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 7;
}

/* линейки */
.odc-ruler {
  position: absolute;
  z-index: 12;
  pointer-events: none;
  display: none;
}
.odc-ruler-top {
  top: 0;
  left: 22px;
}
.odc-ruler-left {
  top: 22px;
  left: 0;
}
.odc-ruler-corner {
  position: absolute;
  top: 0;
  left: 0;
  width: 22px;
  height: 22px;
  z-index: 13;
  background: #202227;
  border-right: 1px solid #2e3037;
  border-bottom: 1px solid #2e3037;
  display: none;
}
.odc-viewport.odc-has-ruler .odc-zoomcluster {
  bottom: 18px;
}

/* exploded-панель (как слои, но широкая, карточки) */
.odc-exploded {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 230px;
  background: rgba(28, 30, 35, 0.99);
  border-left: 1px solid #2e3037;
  z-index: 14;
  display: flex;
  flex-direction: column;
  box-shadow: -8px 0 30px rgba(0, 0, 0, 0.35);
}
.odc-exploded[hidden] {
  display: none;
}
.odc-exp-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.odc-exp-card {
  background: #1f2229;
  border: 1px solid #2e3037;
  border-radius: 10px;
  padding: 9px 11px;
  cursor: pointer;
  transition:
    border-color 0.12s ease,
    background 0.12s ease;
}
.odc-exp-card:hover {
  border-color: var(--odc-accent);
  background: #23262d;
}
.odc-exp-tag {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  color: #eceef2;
  font-family: ui-monospace, Menlo, monospace;
}
.odc-exp-cls {
  color: #6aa3ff;
  font-weight: 400;
}
.odc-exp-dot {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: #5f6470;
  flex: 0 0 auto;
}
.odc-d-h1,
.odc-d-h2,
.odc-d-h3,
.odc-d-p,
.odc-d-span,
.odc-d-a {
  background: #4c8dff;
}
.odc-d-img,
.odc-d-svg,
.odc-d-video {
  background: #1d9e75;
}
.odc-d-button {
  background: #ef9f27;
}
.odc-exp-txt {
  margin-top: 5px;
  font-size: 11.5px;
  color: #b9bec7;
  line-height: 1.4;
  max-height: 32px;
  overflow: hidden;
}
.odc-exp-meta {
  margin-top: 5px;
  font-size: 11px;
  color: #767b85;
  font-variant-numeric: tabular-nums;
}

/* ── Фаза 5: командные комментарии (realtime) ── */
.odc-online {
  display: inline-flex;
  align-items: center;
  gap: -6px;
}
.odc-ava {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--odc-accent);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #202227;
  margin-left: -8px;
}
.odc-ava.sm {
  width: 20px;
  height: 20px;
  font-size: 10px;
  border: 0;
  margin: 0;
}
.odc-online .odc-ava:first-child {
  margin-left: 0;
}

.odc-viewport.odc-comment-mode {
  cursor: crosshair;
}
.odc-cpins {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
}
.odc-cpin {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(26px / var(--odc-scale, 1));
  height: calc(26px / var(--odc-scale, 1));
  margin: calc(-26px / var(--odc-scale, 1)) 0 0 0;
  border-radius: 50% 50% 50% 2px;
  background: #ffb020;
  color: #1a1a1a;
  font-size: calc(12px / var(--odc-scale, 1));
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: calc(2px / var(--odc-scale, 1)) solid #fff;
  pointer-events: auto;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.odc-cpin-edit {
  background: #4c8dff;
  color: #fff;
}
.odc-cpin-spec {
  background: #1d9e75;
  color: #fff;
}

/* живой маркер зоны (экранные координаты вьюпорта, пока тянем) */
.odc-czone-live {
  position: absolute;
  z-index: 19;
  pointer-events: none;
  border: 1.5px dashed #ffb020;
  border-radius: 6px;
  background: rgba(255, 176, 32, 0.12);
  box-shadow: 0 0 0 9999px rgba(10, 11, 14, 0.04);
}
/* сохранённая зона выделения (мировые координаты, масштабируется с холстом).
   pointer-events:none, чтобы НЕ перехватывать ресайз/мув в режиме правки;
   фокус по зоне — через её пин, подсветка — через наведение на пин/карточку. */
.odc-czone {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  cursor: pointer;
  border: calc(1.5px / var(--odc-scale, 1)) solid rgba(255, 176, 32, 0.55);
  border-radius: calc(6px / var(--odc-scale, 1));
  background: rgba(255, 176, 32, 0.07);
  transition:
    background 0.12s ease,
    border-color 0.12s ease;
}
/* в режиме комментариев зона снова кликабельна (там она не мешает правке) */
.odc-viewport.odc-comment-mode .odc-czone {
  pointer-events: auto;
}
.odc-czone-edit {
  border-color: rgba(76, 141, 255, 0.6);
  background: rgba(76, 141, 255, 0.07);
}
.odc-czone-spec {
  border-color: rgba(29, 158, 117, 0.6);
  background: rgba(29, 158, 117, 0.08);
}
.odc-czone-hot {
  background: rgba(255, 176, 32, 0.2);
  border-color: #ffb020;
  box-shadow: 0 0 0 calc(2px / var(--odc-scale, 1)) rgba(255, 176, 32, 0.45);
}
.odc-czone-edit.odc-czone-hot {
  background: rgba(76, 141, 255, 0.2);
  border-color: #4c8dff;
  box-shadow: 0 0 0 calc(2px / var(--odc-scale, 1)) rgba(76, 141, 255, 0.45);
}
.odc-czone-spec.odc-czone-hot {
  background: rgba(29, 158, 117, 0.2);
  border-color: #1d9e75;
  box-shadow: 0 0 0 calc(2px / var(--odc-scale, 1)) rgba(29, 158, 117, 0.45);
}

.odc-composer {
  position: absolute;
  z-index: 20;
  width: 270px;
  background: #1f2229;
  border: 1px solid #3a3d45;
  border-radius: 12px;
  padding: 11px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.odc-composer select,
.odc-composer textarea {
  width: 100%;
  background: #15171b;
  border: 1px solid #34373f;
  color: #eceef2;
  border-radius: 8px;
  padding: 7px 9px;
  font-size: 12.5px;
  font-family: inherit;
  resize: vertical;
}
.odc-comp-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.odc-btn-ghost2 {
  background: transparent;
  border: 1px solid #34373f;
  color: #aeb4be;
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 12.5px;
  cursor: pointer;
}
.odc-btn-ghost2:hover {
  background: #2c2f36;
  color: #fff;
}

.odc-cpanel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 270px;
  background: rgba(28, 30, 35, 0.97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-left: 1px solid #2e3037;
  z-index: 14;
  display: flex;
  flex-direction: column;
  box-shadow: -8px 0 30px rgba(0, 0, 0, 0.35);
}
.odc-cpanel[hidden] {
  display: none;
}
.odc-cpanel-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.odc-ccard {
  background: #1f2229;
  border: 1px solid #2e3037;
  border-radius: 11px;
  padding: 10px 11px;
}
.odc-ccard.hl {
  border-color: var(--odc-accent);
}
.odc-cmeta {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: #eceef2;
  margin-bottom: 6px;
}
.odc-cbadge {
  margin-left: auto;
  font-size: 10px;
  background: #34373f;
  color: #c2c7d0;
  padding: 2px 7px;
  border-radius: 6px;
}
.odc-cbadge.od {
  background: rgba(29, 158, 117, 0.22);
  color: #5dcaa5;
}
.odc-cbody {
  font-size: 12.5px;
  color: #c2c7d0;
  line-height: 1.45;
}
.odc-cscr {
  color: #767b85;
  font-size: 11px;
}
.odc-cactions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
}
.odc-clink {
  background: transparent;
  border: 1px solid #34373f;
  color: #aeb4be;
  border-radius: 7px;
  padding: 5px 10px;
  font-size: 11.5px;
  cursor: pointer;
}
.odc-clink:hover {
  background: #2c2f36;
  color: #fff;
}
.odc-clink-go {
  border-color: var(--odc-accent);
  color: #6aa3ff;
}
.odc-clink-go:hover {
  background: var(--odc-accent);
  color: #fff;
}

/* drag-reorder слоёв */
.odc-lrow[draggable="true"] {
  cursor: grab;
}
.odc-lrow.odc-ldrop {
  box-shadow: inset 0 2px 0 var(--odc-accent);
  background: rgba(76, 141, 255, 0.12);
}
.odc-lrow.odc-ldrop-after {
  box-shadow: inset 0 -2px 0 var(--odc-accent);
  background: rgba(76, 141, 255, 0.12);
}
.odc-lrow.odc-ldrop-in {
  box-shadow: inset 0 0 0 2px var(--odc-accent);
  background: rgba(76, 141, 255, 0.2);
  border-radius: 6px;
}
.odc-layers.odc-ldragging .odc-lrow {
  cursor: grabbing;
}

/* exploded: картинки-кропы элементов */
.odc-exp-thumb {
  background-repeat: no-repeat;
  background-color: #fff;
  border-radius: 6px;
  margin: 0 auto 7px;
  border: 1px solid #2e3037;
}
.odc-exp-cap {
  font-size: 11px;
  color: #969ba6;
  font-family: ui-monospace, Menlo, monospace;
  text-align: center;
  word-break: break-all;
}

/* инспектор: действия с элементом */
.odc-insp-elname {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11.5px;
  color: #969ba6;
  margin-bottom: 8px;
  word-break: break-all;
}
.odc-insp-elact {
  display: flex;
  gap: 6px;
}
.odc-insp-elact .odc-clink {
  flex: 1;
  text-align: center;
}

/* ── Diff-наложение наш↔референс ── */
.odc-diff {
  position: absolute;
  inset: 0;
  z-index: 30;
  background: rgba(15, 16, 19, 0.96);
  display: flex;
  flex-direction: column;
}
.odc-diff[hidden] {
  display: none;
}
.odc-diff-bar {
  flex: 0 0 auto;
  height: 50px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 14px;
  background: #1f2229;
  border-bottom: 1px solid #2e3037;
}
.odc-diff-title {
  font-size: 13px;
  font-weight: 600;
  color: #f4f5f7;
}
.odc-diff-ctl {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #aeb4be;
}
.odc-diff-ctl input[type="range"] {
  width: 120px;
}
.odc-diff-ctl select {
  background: #15171b;
  border: 1px solid #34373f;
  color: #eceef2;
  border-radius: 7px;
  padding: 5px 8px;
  font-size: 12px;
}
.odc-diff-stage {
  flex: 1 1 auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.odc-diff-ref,
.odc-diff-our {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.odc-diff-ref img {
  display: block;
  height: 100%;
  width: auto;
  border-radius: 8px;
}
.odc-diff-our {
  overflow: hidden;
}
.odc-diff-our iframe {
  display: block;
  border: 0;
  background: transparent;
}
.odc-diff-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #ff3b9a;
  pointer-events: none;
  display: none;
  box-shadow: 0 0 8px rgba(255, 59, 154, 0.6);
}

/* design-QA в инспекторе */
.odc-insp-qa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11.5px;
  color: #aeb4be;
  margin-bottom: 6px;
}
.odc-qa-badge {
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 6px;
  font-variant-numeric: tabular-nums;
}
.odc-qa-badge.ok {
  background: rgba(29, 158, 117, 0.2);
  color: #5dcaa5;
}
.odc-qa-badge.bad {
  background: rgba(226, 75, 74, 0.2);
  color: #f09595;
}

/* live-курсоры коллег + реакции */
.odc-cursor {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9;
  transform-origin: 0 0;
  transition: transform 0.08s linear;
}
.odc-cursor svg {
  display: block;
  width: calc(18px / var(--odc-scale, 1));
  height: calc(18px / var(--odc-scale, 1));
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}
.odc-cursor-name {
  position: absolute;
  left: calc(16px / var(--odc-scale, 1));
  top: calc(14px / var(--odc-scale, 1));
  font-size: calc(11px / var(--odc-scale, 1));
  white-space: nowrap;
  color: #fff;
  background: var(--odc-accent);
  padding: calc(2px / var(--odc-scale, 1)) calc(6px / var(--odc-scale, 1));
  border-radius: calc(6px / var(--odc-scale, 1));
}
.odc-reaction {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 11;
  font-size: calc(26px / var(--odc-scale, 1));
  animation: odcFloat 1.8s ease-out forwards;
}
@keyframes odcFloat {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.6);
  }
  15% {
    opacity: 1;
    transform: translateY(calc(-8px / var(--odc-scale, 1))) scale(1.1);
  }
  100% {
    opacity: 0;
    transform: translateY(calc(-60px / var(--odc-scale, 1))) scale(1);
  }
}
.odc-reactbar {
  display: inline-flex;
  align-items: center;
  gap: 1px;
}
.odc-reactbar button {
  background: transparent;
  border: 0;
  font-size: 17px;
  cursor: pointer;
  padding: 4px 5px;
  border-radius: 7px;
}
.odc-reactbar button:hover {
  background: #2c2f36;
}
.odc-ava.foll {
  box-shadow: 0 0 0 2px #ffb020;
  cursor: pointer;
}
.odc-ava {
  cursor: pointer;
}

/* cursor-chat input */
.odc-cchat {
  position: absolute;
  z-index: 21;
  transform: translate(8px, 8px);
  background: #1f2229;
  border: 1px solid var(--odc-accent);
  color: #eceef2;
  font-size: 13px;
  padding: 7px 11px;
  border-radius: 9px;
  width: 220px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  outline: none;
}
.odc-curs {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 9;
}
.odc-ava.me {
  outline: 2px solid #fff;
  outline-offset: -2px;
}
/* в режиме комментариев рамка/ручки не перехватывают клики (чтобы ставить пины) */
.odc-comment-mode .odc-ovl-sel,
.odc-comment-mode .odc-ovl-handle {
  pointer-events: none !important;
}

/* панель «История изменений» */
.odc-hpanel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 270px;
  background: rgba(28, 30, 35, 0.99);
  border-left: 1px solid #2e3037;
  z-index: 14;
  display: flex;
  flex-direction: column;
  box-shadow: -8px 0 30px rgba(0, 0, 0, 0.35);
}
.odc-hpanel[hidden] {
  display: none;
}
.odc-hpanel-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 6px 0;
}
.odc-hrow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 12px;
  color: #c2c7d0;
  cursor: pointer;
  border-left: 2px solid transparent;
}
.odc-hrow:hover {
  background: #2c2f36;
}
.odc-hrow .odc-hlabel {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.odc-hrow.odc-h-undone {
  opacity: 0.5;
}
.odc-hrow.odc-h-undone .odc-hlabel {
  text-decoration: line-through;
}
.odc-hrow.odc-h-applied {
  border-left-color: #1d9e75;
}
.odc-hrow.odc-h-done {
  border-left-color: var(--odc-accent);
}
.odc-hbase {
  color: #767b85;
  font-style: italic;
  cursor: default;
}
.odc-hbase:hover {
  background: transparent;
}

/* ── Minimap (обзор + навигация) ── */
.odc-minimap {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 40;
  width: 184px;
  height: 248px;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(20, 21, 25, 0.96);
  border: 1px solid #3a3d45;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  touch-action: none;
}
.odc-minimap #odc-mm-canvas {
  display: block;
  width: 184px;
  height: 248px;
}
.odc-mm-view {
  position: absolute;
  border: 1.5px solid #4c8dff;
  background: rgba(76, 141, 255, 0.16);
  border-radius: 3px;
  pointer-events: none;
  min-width: 6px;
  min-height: 6px;
}

/* ── Align-кнопки в инспекторе ── */
.odc-insp-align {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
}
.odc-alignbtn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  border-radius: 7px;
  cursor: pointer;
  background: #2a2d34;
  border: 1px solid #3a3d45;
  color: #cfd3dc;
  transition:
    background 0.12s ease,
    border-color 0.12s ease;
}
.odc-alignbtn:hover {
  background: #343843;
  border-color: #4c8dff;
  color: #fff;
}
.odc-alignbtn .odc-ic {
  width: 15px;
  height: 15px;
}
.odc-al-div {
  width: 1px;
  height: 18px;
  background: #3a3d45;
  margin: 0 2px;
}

/* ── Прозрачность элемента ── */
.odc-insp-elop {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 9px;
  font-size: 12px;
  color: #aab0bb;
}
.odc-insp-elop input[type="range"] {
  flex: 1;
  accent-color: #4c8dff;
}
.odc-insp-elop #odc-el-opv {
  min-width: 34px;
  text-align: right;
  color: #e6e8ee;
}

/* ── Режим растягивания границ (свободно / пропорционально) ── */
.odc-insp-resize {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 9px;
  font-size: 12px;
  color: #aab0bb;
}
.odc-seg {
  margin-left: auto;
  display: inline-flex;
  background: #2a2d34;
  border: 1px solid #3a3d45;
  border-radius: 7px;
  padding: 2px;
  gap: 2px;
}
.odc-segbtn {
  cursor: pointer;
  border: 0;
  background: transparent;
  color: #aab0bb;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 5px;
  line-height: 1;
  white-space: nowrap;
  transition:
    background 0.13s,
    color 0.13s;
}
.odc-segbtn:hover {
  color: #e6e8ee;
}
.odc-segbtn.on {
  background: #4c8dff;
  color: #fff;
  box-shadow: 0 1px 4px rgba(76, 141, 255, 0.4);
}

/* ── Слои odc70: типы/иконки/док/скрытие экрана/перетаскивание панели ── */
.odc-layers {
  max-height: 100%;
}
.odc-ldraghandle {
  flex: 0 0 auto;
  cursor: grab;
  color: #6b7280;
  font-size: 13px;
}
.odc-layers-head > span:not(.odc-ldraghandle) {
  flex: 1 1 auto;
}
.odc-layers-left {
  left: 12px;
  right: auto;
  border-left: 0;
  border-right: 1px solid #2e3037;
  box-shadow: 8px 0 30px rgba(0, 0, 0, 0.35);
}
.odc-licon {
  flex: 0 0 auto;
  width: 14px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.odc-lt-text .odc-licon {
  color: #4f9bff;
}
.odc-lt-media .odc-licon {
  color: #34d399;
}
.odc-lt-btn .odc-licon {
  color: #fbbf24;
}
.odc-lt-box .odc-licon {
  color: #8b93a3;
}
.odc-lt-text .odc-llabel,
.odc-lt-media .odc-llabel,
.odc-lt-btn .odc-llabel {
  font-family: inherit;
}
.odc-lt-text .odc-llabel {
  color: #cfe0ff;
}
.odc-lt-media .odc-llabel {
  color: #c6f3e0;
}
.odc-lt-btn .odc-llabel {
  color: #ffe9bd;
}
.odc-leye-screen {
  flex: 0 0 auto;
  margin-left: 4px;
}
.odc-col-hidden {
  opacity: 0.1 !important;
  pointer-events: none !important;
  filter: grayscale(1);
  transition: opacity 0.15s;
}
/* #7: перекрытие соседей — жёлтая подсветка строки + пульс рамки на канвасе */
.odc-lrow-overlap {
  box-shadow: inset 2px 0 0 #fbbf24;
}
.odc-lrow-overlap .odc-licon {
  color: #fbbf24 !important;
}
.odc-lrow-overlap::after {
  content: "⧉";
  margin-left: 2px;
  color: #fbbf24;
  font-size: 11px;
  flex: 0 0 auto;
}
@keyframes odc-ovl-flash-kf {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(251, 191, 36, 0);
  }
  35% {
    box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.85);
  }
}
.odc-ovl-flash {
  animation: odc-ovl-flash-kf 0.75s ease-out;
}
/* #10: библиотека шрифтов — select в инспекторе */
.odc-fontsel {
  flex: 1 1 auto;
  margin-left: auto;
  max-width: 150px;
  background: #2a2d34;
  color: #e6e8ee;
  border: 1px solid #3a3d45;
  border-radius: 6px;
  padding: 3px 6px;
  font-size: 12px;
  cursor: pointer;
}
.odc-fontsel:hover {
  border-color: #4c8dff;
}
.odc-fontbtn {
  flex: 1 1 auto;
  margin-left: auto;
  max-width: 160px;
  text-align: left;
  background: #2a2d34;
  color: #e6e8ee;
  border: 1px solid #3a3d45;
  border-radius: 6px;
  padding: 4px 9px;
  font-size: 13px;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.odc-fontbtn:hover {
  border-color: #4c8dff;
}
.odc-fontpop {
  position: absolute;
  z-index: 60;
  background: rgba(22, 24, 29, 0.98);
  border: 1px solid #34373f;
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.5);
}
.odc-fontpop-list {
  max-height: 320px;
  overflow-y: auto;
  width: 230px;
}
.odc-fontpop-it {
  padding: 8px 12px;
  border-radius: 7px;
  color: #e6e8ee;
  font-size: 17px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.odc-fontpop-it:hover {
  background: #2c3038;
}
.odc-fontpop-it.on {
  background: rgba(76, 141, 255, 0.22);
}
/* подсветка целевого экрана при переносе объекта между экранами (#5) */
.odc-col-droptarget {
  outline: 3px dashed #4f9bff;
  outline-offset: 4px;
  position: relative;
}
.odc-col-droptarget::after {
  content: "Перенести сюда";
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  background: #4f9bff;
  color: #fff;
  font:
    600 12px/1 "Space Grotesk",
    sans-serif;
  padding: 6px 11px;
  border-radius: 8px;
  z-index: 20;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}
/* #2: призрак-клон перетаскиваемого элемента (следует за курсором) */
.odc-elghost {
  position: fixed;
  z-index: 99998;
  pointer-events: none;
  opacity: 0.85;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.55);
  outline: 2px solid #4f9bff;
  border-radius: 4px;
  overflow: hidden;
  background-color: rgba(40, 44, 52, 0.6);
}
/* на время перетаскивания элемента iframe экранов click-through — чтобы рамка
   не теряла захват указателя над чужим экраном (перенос между экранами #5) */
.odc-viewport.odc-dragging-el iframe {
  pointer-events: none !important;
}
/* #1: число-скраб + ввод значения руками */
.odc-scrubby {
  user-select: none;
  cursor: ew-resize;
}
.odc-numediting {
  user-select: text;
  cursor: text;
  background: #11141a;
  outline: 1px solid #4c8dff;
  border-radius: 4px;
  padding: 0 4px;
  min-width: 26px;
}
/* #6: направляющие (двигаемые линии, как в Premiere) */
.odc-guides {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 13;
  overflow: hidden;
  user-select: none;
}
.odc-guides[hidden] {
  display: none;
}
.odc-guides.odc-guides-off .odc-guide {
  display: none;
}
.odc-guidesbar {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
  background: rgba(20, 22, 27, 0.92);
  border: 1px solid #34373f;
  border-radius: 8px;
  padding: 4px;
  pointer-events: auto;
  backdrop-filter: blur(6px);
}
.odc-guidesbar button {
  background: #2a2d34;
  color: #e6e8ee;
  border: 1px solid #3a3d45;
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 12px;
  cursor: pointer;
}
.odc-guidesbar button:hover {
  border-color: #22d3ee;
}
.odc-guide {
  position: absolute;
  background: #22d3ee;
  pointer-events: auto;
  z-index: 2;
}
.odc-guide-x {
  top: 0;
  bottom: 0;
  width: 1px;
  cursor: ew-resize;
}
.odc-guide-x::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -4px;
  width: 9px;
}
.odc-guide-y {
  left: 0;
  right: 0;
  height: 1px;
  cursor: ns-resize;
}
.odc-guide-y::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -4px;
  height: 9px;
}
.odc-guidesbtn {
  font-size: 15px;
  line-height: 1;
}
.odc-guide-color {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid #3a3d45;
  border-radius: 5px;
  background: transparent;
  cursor: pointer;
  flex: 0 0 auto;
}
.odc-guide-w {
  min-width: 16px;
  text-align: center;
  color: #e6e8ee;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
/* #8: «Вынести UI» — доска дублей справа на полотне (в мире) */
.odc-extracted {
  position: absolute;
  width: 560px;
  background: rgba(22, 24, 29, 0.96);
  border: 1px solid #34373f;
  border-radius: 14px;
  padding: 14px 16px 18px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
}
.odc-extracted-head {
  font:
    700 15px/1.2 "Space Grotesk",
    sans-serif;
  color: #eceef2;
  margin-bottom: 12px;
  letter-spacing: 0.01em;
}
.odc-extracted-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.odc-ext-card {
  background: #20232a;
  border: 1px solid #2f323a;
  border-radius: 9px;
  overflow: hidden;
  cursor: pointer;
  transition:
    border-color 0.13s,
    transform 0.13s;
}
.odc-ext-card:hover {
  border-color: #4f9bff;
  transform: translateY(-2px);
}
.odc-ext-thumb {
  background-repeat: no-repeat;
  background-color: #15171c;
}
.odc-ext-card-txt {
  min-width: 150px;
  display: flex;
  align-items: center;
  padding: 14px 10px;
}
.odc-ext-cap {
  font:
    600 11px/1.3 ui-monospace,
    Menlo,
    monospace;
  color: #aab0bb;
  padding: 5px 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.odc-extractbtn {
  font-size: 16px;
  line-height: 1;
}
/* #8 доработка: голова доски (перетаскивание + закрытие) + запись в слоях */
.odc-extracted-head {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: grab;
}
.odc-ext-grip {
  color: #6b7280;
  cursor: grab;
}
.odc-extracted-head > span:nth-of-type(2) {
  flex: 1;
}
.odc-ext-close {
  background: transparent;
  border: 0;
  color: #aab0bb;
  font-size: 15px;
  cursor: pointer;
  padding: 2px 7px;
  border-radius: 6px;
}
.odc-ext-close:hover {
  background: rgba(255, 80, 80, 0.18);
  color: #ff6b6b;
}
.odc-lrow-extract {
  color: #cdb4ff;
  border-bottom: 1px solid #2e3037;
}
.odc-lrow-extract .odc-licon {
  font-size: 13px;
}
/* #1b: плавающий призрак слоя при перетаскивании */
.odc-ldragghost {
  position: fixed;
  z-index: 100000;
  pointer-events: none;
  background: #4f9bff;
  color: #fff;
  font:
    600 12px/1 "Space Grotesk",
    sans-serif;
  padding: 6px 10px;
  border-radius: 7px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  white-space: nowrap;
}

/* ── Курсор инструмента «Текст» ── */
.odc-viewport.odc-tool-addtext,
.odc-viewport.odc-tool-addtext iframe {
  cursor: text !important;
}

/* ── Кнопка удаления экрана (в шапке колонки) ── */
.odc-col-head .odc-coldel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-left: 4px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  background: transparent;
  color: inherit;
  opacity: 0;
  transition:
    opacity 0.12s ease,
    background 0.12s ease,
    color 0.12s ease;
}
.odc-col:hover .odc-col-head .odc-coldel {
  opacity: 0.65;
}
.odc-col-head .odc-coldel:hover {
  opacity: 1;
  background: #e5484d;
  color: #fff;
}
.odc-col-head .odc-coldel .odc-ic {
  width: 13px;
  height: 13px;
}

/* подсветка холста при перетаскивании файла-картинки */
.odc-viewport.odc-dropping::after {
  content: "Отпустите — добавить картинку";
  position: absolute;
  inset: 10px;
  z-index: 30;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 600;
  color: #6aa3ff;
  border: 2.5px dashed #4c8dff;
  border-radius: 16px;
  background: rgba(76, 141, 255, 0.08);
}

/* ── Размер шрифта + цвет выбранного элемента ── */
.odc-insp-txt {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 9px;
  font-size: 12px;
  color: #aab0bb;
}
.odc-fsbtn {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  cursor: pointer;
  background: #2a2d34;
  border: 1px solid #3a3d45;
  color: #e6e8ee;
  font-size: 15px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.odc-fsbtn:hover {
  background: #343843;
  border-color: #4c8dff;
}
.odc-insp-txt #odc-fs-v {
  min-width: 26px;
  text-align: center;
  color: #e6e8ee;
  font-variant-numeric: tabular-nums;
}
.odc-insp-txt #odc-el-colorpick {
  margin-left: auto;
  width: 30px;
  height: 24px;
  padding: 0;
  border: 1px solid #3a3d45;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
}

/* ── AI-панель (нано-бана) ── */
.odc-aipanel {
  position: absolute;
  right: 16px;
  top: 70px;
  z-index: 22;
  width: 300px;
  background: rgba(28, 30, 35, 0.99);
  border: 1px solid #3a3d45;
  border-radius: 14px;
  padding: 13px;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.55);
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.odc-ai-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.odc-ai-head b {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: #eef0f4;
}
.odc-ai-head b .odc-ic {
  color: #c08bff;
}
.odc-ai-head .odc-iconbtn {
  width: 28px;
  height: 28px;
}
.odc-ai-sel {
  font-size: 11.5px;
  color: #9aa0ab;
}
.odc-aipanel textarea {
  width: 100%;
  resize: vertical;
  min-height: 60px;
  border-radius: 9px;
  background: #1f2229;
  border: 1px solid #3a3d45;
  color: #eceef2;
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
}
.odc-aipanel textarea:focus {
  outline: none;
  border-color: #4c8dff;
}
.odc-ai-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #aab0bb;
}
.odc-ai-row select {
  flex: 1;
  background: #1f2229;
  border: 1px solid #3a3d45;
  color: #eceef2;
  border-radius: 7px;
  padding: 5px 8px;
}
.odc-ai-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.odc-ai-actions .odc-apply {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.odc-ai-actions .odc-clink:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.odc-ai-status {
  font-size: 12px;
  color: #6aa3ff;
  display: flex;
  align-items: center;
  gap: 7px;
}
.odc-ai-note {
  font-size: 10.5px;
  color: #6c7079;
  line-height: 1.35;
}
.odc-tool-addtext,
.odc-iconbtn#odc-tool-ai.active {
  color: #c08bff;
}

/* ── Шапка колонки как явная ручка перетаскивания экрана (BUG C) ── */
.odc-col-head .odc-grip {
  font-size: 13px;
  line-height: 1;
  color: #6c7079;
  margin-right: 2px;
  letter-spacing: -1px;
  cursor: grab;
  flex: 0 0 auto;
}
.odc-col-head {
  cursor: grab;
}
.odc-col-head:hover {
  background: #2f323a;
  box-shadow: 0 0 0 1px var(--odc-accent) inset;
}
.odc-col-head:hover .odc-grip {
  color: #9aa0ab;
}
.odc-col-head:active,
.odc-col-head:active .odc-grip {
  cursor: grabbing;
}

/* ── AI-панель: drag-ручка + батч-очередь ── */
.odc-ai-head {
  cursor: default;
}
.odc-ai-drag {
  margin-left: auto;
  margin-right: 4px;
  color: #6c7079;
  cursor: grab;
  font-size: 14px;
  letter-spacing: -1px;
}
.odc-ai-head:active .odc-ai-drag {
  cursor: grabbing;
}
.odc-ai-batch {
  display: flex;
  gap: 7px;
  margin-top: 8px;
}
.odc-ai-batch .odc-clink {
  flex: 1;
}
.odc-ai-queue {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
  max-height: 160px;
  overflow-y: auto;
}
.odc-ai-qrow {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: #cfd3dc;
  background: #23262d;
  border: 1px solid #34373f;
  border-radius: 7px;
  padding: 5px 8px;
}
.odc-ai-qrow span {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.odc-ai-qdel {
  border: 0;
  background: transparent;
  color: #8b909a;
  cursor: pointer;
  font-size: 13px;
  padding: 0 2px;
}
.odc-ai-qdel:hover {
  color: #e5484d;
}

/* ── C1 призрак конкурента поверх экрана ── */
.odc-ghost {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  z-index: 6;
}
/* ── C2 навигация по экранам в diff ── */
.odc-diff-count {
  font-size: 12px;
  color: #cfd3dc;
  min-width: 40px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.odc-diff-bar #odc-diff-prev,
.odc-diff-bar #odc-diff-next {
  width: 30px;
  height: 30px;
  font-size: 18px;
}

/* ── D: панель поиска по описанию/картинке ── */
.odc-search {
  position: absolute;
  left: 50%;
  top: 64px;
  transform: translateX(-50%);
  z-index: 24;
  width: 440px;
  max-width: 92vw;
  background: rgba(28, 30, 35, 0.99);
  border: 1px solid #3a3d45;
  border-radius: 14px;
  padding: 13px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.odc-search-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.odc-search-head b {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: #eef0f4;
}
.odc-search-head b .odc-ic {
  color: #6aa3ff;
}
.odc-search-head .odc-iconbtn {
  width: 28px;
  height: 28px;
}
.odc-search input[type="text"] {
  width: 100%;
  border-radius: 9px;
  background: #1f2229;
  border: 1px solid #3a3d45;
  color: #eceef2;
  padding: 9px 11px;
  font-size: 13px;
  font-family: inherit;
}
.odc-search input[type="text"]:focus {
  outline: none;
  border-color: #4c8dff;
}
.odc-search-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}
.odc-search-actions .odc-apply {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.odc-srch-imgname {
  font-size: 11px;
  color: #6aa3ff;
}
.odc-search-status {
  font-size: 12px;
  color: #6aa3ff;
  display: flex;
  align-items: center;
  gap: 7px;
}
.odc-search-results {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-height: 320px;
  overflow-y: auto;
}
.odc-srch-row {
  padding: 8px 10px;
  border-radius: 8px;
  background: #23262d;
  border: 1px solid #34373f;
  cursor: pointer;
  font-size: 12px;
}
.odc-srch-row:hover {
  background: #2c3038;
  border-color: #4c8dff;
}
.odc-srch-row b {
  color: #eef0f4;
}
.odc-srch-row span {
  color: #aab0bb;
}

/* ── слои: глазик скрытия + drag-ручка инспектора ── */
.odc-leye {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  cursor: pointer;
  color: #8b909a;
  flex: 0 0 auto;
  opacity: 0.75;
}
.odc-leye:hover {
  color: #fff;
  opacity: 1;
}
.odc-leye.off {
  color: #6c7079;
}
.odc-leye .odc-ic {
  width: 13px;
  height: 13px;
}
.odc-lrow-hidden .odc-llabel {
  opacity: 0.45;
  text-decoration: line-through;
}
.odc-insp-title {
  display: flex;
  align-items: center;
  gap: 7px;
}
.odc-insp-drag {
  color: #6c7079;
  cursor: grab;
  font-size: 13px;
  letter-spacing: -1px;
}
.odc-insp-title:active .odc-insp-drag {
  cursor: grabbing;
}

/* ── #3 понятные подписи к иконкам тулбара (hover) ── */
.odc-bar [data-tip] {
  position: relative;
}
.odc-bar [data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 7px;
  background: #0c0d10;
  color: #eceef2;
  border: 1px solid #3a3d45;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  max-width: 280px;
  white-space: normal;
  width: max-content;
  max-width: 240px;
  z-index: 60;
  pointer-events: none;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55);
}
.odc-unit {
  font-size: 11px;
  color: #8b909a;
  margin-left: 2px;
}

/* ════════ DESIGN TOOLKIT — стиль новых панелей (порт tools.html) ════════ */
.odc-tk {
  --bg: #0a0b10;
  --pan: #12141c;
  --pan2: #171a24;
  --bd: rgba(255, 255, 255, 0.08);
  --bd2: rgba(255, 255, 255, 0.16);
  --txt: #e8eeff;
  --mut: rgba(200, 215, 255, 0.5);
  --ac: #4f9bff;
  --ac2: #c46bff;
  font-family:
    "Space Grotesk",
    -apple-system,
    system-ui,
    sans-serif;
  color: var(--txt);
}
.odc-pop {
  position: absolute;
  z-index: 130;
  width: 232px;
  padding: 13px;
  background: rgba(18, 20, 28, 0.97);
  border: 1px solid var(--bd2);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.odc-pop[hidden] {
  display: none;
}
.odc-pop .odc-tk-h {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mut);
  margin: 0 0 9px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* color picker */
.odc-cp {
  display: flex;
  gap: 10px;
}
.odc-cp-sv {
  position: relative;
  flex: 1;
  height: 138px;
  border-radius: 8px;
  cursor: crosshair;
  background:
    linear-gradient(to top, #000, transparent),
    linear-gradient(to right, #fff, #4f9bff);
}
.odc-cp-hue {
  position: relative;
  width: 16px;
  height: 138px;
  border-radius: 8px;
  cursor: crosshair;
  background: linear-gradient(
    to bottom,
    #f00,
    #ff0,
    #0f0,
    #0ff,
    #00f,
    #f0f,
    #f00
  );
}
.odc-cp-pt {
  position: absolute;
  width: 12px;
  height: 12px;
  border: 2px solid #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
}
.odc-cp-hpt {
  position: absolute;
  left: 50%;
  width: 20px;
  height: 6px;
  border: 2px solid #fff;
  border-radius: 3px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
}
.odc-cp-out {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 11px;
}
.odc-cp-sw {
  width: 30px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid var(--bd2);
  flex: none;
}
.odc-cp-hex {
  flex: 1;
  min-width: 0;
  background: var(--pan2);
  border: 1px solid var(--bd);
  color: var(--txt);
  border-radius: 6px;
  padding: 6px 8px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  outline: none;
}
.odc-cp-hex:focus {
  border-color: var(--ac);
}
/* swatch button в инспекторе (замена нативного color input) */
.odc-tksw {
  width: 26px;
  height: 20px;
  border-radius: 5px;
  border: 1px solid #3a3d45;
  cursor: pointer;
  padding: 0;
  flex: none;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}
.odc-tksw:hover {
  border-color: var(--odc-accent, #4c8dff);
}
/* scrubby — числа, которые можно тянуть ↔ */
.odc-scrubby {
  cursor: ew-resize;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.28);
}
.odc-scrubby:hover {
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, 0.5);
}

/* ── A2: строка-кнопки в инспекторе + попапы градиент/тень/easing ── */
.odc-insp-tkrow {
  display: flex;
  gap: 6px;
  padding: 9px 11px 11px;
  flex-wrap: wrap;
}
.odc-tkbtn {
  flex: 1;
  min-width: 72px;
  cursor: pointer;
  padding: 7px 8px;
  background: var(--pan2);
  color: var(--txt);
  border: 1px solid var(--bd2);
  border-radius: 8px;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
}
.odc-tkbtn:hover {
  border-color: var(--ac);
  color: #fff;
}
.odc-tkbtn-go {
  background: linear-gradient(90deg, #2b6fe0, #6d3fe0);
  border-color: transparent;
}
.odc-gradpop,
.odc-shadowpop,
.odc-easepop {
  width: 270px;
}
.odc-tk-h {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mut);
  margin: 0 0 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.odc-tk-x {
  cursor: pointer;
  color: var(--mut);
  font-size: 12px;
  padding: 0 2px;
}
.odc-tk-x:hover {
  color: #fff;
}
/* gradient */
.odc-grad-prev {
  height: 46px;
  border-radius: 8px;
  border: 1px solid var(--bd);
}
.odc-grad-bar {
  position: relative;
  height: 22px;
  border-radius: 6px;
  margin: 9px 0;
  cursor: copy;
}
.odc-grad-stop {
  position: absolute;
  top: -3px;
  width: 12px;
  height: calc(100% + 6px);
  transform: translateX(-50%);
  border: 2px solid #fff;
  border-radius: 4px;
  cursor: grab;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.55);
}
.odc-grad-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--mut);
}
.odc-grad-row input[type="range"] {
  flex: 1;
}
.odc-grad-css,
.odc-ease-str {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  color: var(--ac);
  margin: 9px 0 4px;
  word-break: break-all;
  line-height: 1.35;
}
.odc-grad-hint {
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  color: rgba(200, 215, 255, 0.34);
}
/* shadow */
.odc-sh-stage {
  position: relative;
  height: 96px;
  background: var(--pan2);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 9px;
}
.odc-sh-box {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: #e8eeff;
}
.odc-sh-handle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ac);
  border: 2px solid #fff;
  transform: translate(-50%, -50%);
  cursor: grab;
}
.odc-sh-sl {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--mut);
  margin: 5px 0;
}
.odc-sh-sl span {
  width: 44px;
  flex: none;
}
.odc-sh-sl input[type="range"] {
  flex: 1;
}
.odc-sh-crow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 11px;
  color: var(--mut);
}
/* easing */
.odc-ease-wrap {
  display: flex;
  gap: 12px;
  align-items: center;
}
.odc-ease-wrap svg {
  width: 110px;
  height: 110px;
  flex: none;
  background: var(--bg);
  border-radius: 10px;
}
.odc-ease-side {
  flex: 1;
  min-width: 0;
}
.odc-ease-track {
  position: relative;
  height: 16px;
  background: var(--pan2);
  border-radius: 8px;
}
.odc-ease-ball {
  position: absolute;
  top: 1px;
  left: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7fd4ff, #c69bff);
  animation: odc-ease-run 1.4s var(--ease, linear) infinite alternate;
}
@keyframes odc-ease-run {
  from {
    left: 0;
  }
  to {
    left: calc(100% - 14px);
  }
}
.odc-ease-presets {
  display: flex;
  gap: 5px;
  margin-top: 8px;
}
.odc-ease-pr {
  padding: 5px 6px;
  font-size: 10.5px;
}
.odc-ease-acts {
  display: flex;
  gap: 6px;
  margin-top: 11px;
}

/* ── A3: knob (поворот) + радиус по каждому углу ── */
.odc-tkknob {
  position: relative;
  display: inline-block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  vertical-align: middle;
  margin-left: 8px;
  cursor: grab;
  background: radial-gradient(circle at 50% 32%, #2b3142, #12141c);
  border: 1px solid #3a3d45;
  flex: none;
}
.odc-tkknob:active {
  cursor: grabbing;
}
.odc-tkknob i {
  position: absolute;
  inset: 0;
  transform: rotate(var(--a, 0deg));
}
.odc-tkknob i::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 2px;
  width: 2px;
  height: 7px;
  background: #4f9bff;
  border-radius: 1px;
  transform: translateX(-50%);
}
.odc-tkmini {
  margin-left: 4px;
}
.odc-cornerpop {
  width: 216px;
}
.odc-cn-prev {
  height: 58px;
  margin-bottom: 11px;
  border: 1px solid var(--bd);
  background: linear-gradient(135deg, #4f9bff, #c46bff);
}
.odc-cn-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px 10px;
}
.odc-cn-grid label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  color: var(--mut);
  font-family: "JetBrains Mono", monospace;
}
.odc-cn-f {
  color: var(--txt);
  min-width: 24px;
  text-align: center;
}

/* ── P2: ручка поворота + бейдж размеров/угла + marching-ants ── */
.odc-h-rot {
  top: 0;
  left: 50%;
  margin-top: calc(-22px / var(--odc-scale, 1));
  width: calc(11px / var(--odc-scale, 1));
  height: calc(11px / var(--odc-scale, 1));
  border-radius: 50%;
  cursor: grab;
  background: #fff;
}
.odc-h-rot::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: calc(1.5px / var(--odc-scale, 1));
  height: calc(13px / var(--odc-scale, 1));
  background: var(--odc-sel);
  transform: translateX(-50%);
}
.odc-ovl-dim {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, calc(7px / var(--odc-scale, 1)));
  background: var(--odc-sel);
  color: #fff;
  font-family: "JetBrains Mono", monospace;
  font-size: calc(10px / var(--odc-scale, 1));
  line-height: 1;
  padding: calc(3px / var(--odc-scale, 1)) calc(6px / var(--odc-scale, 1));
  border-radius: calc(4px / var(--odc-scale, 1));
  white-space: nowrap;
  pointer-events: none;
  z-index: 3;
}
/* marching-ants — анимированный пунктир выделения (донор #10) */
.odc-mode-edit .odc-ovl-sel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, #fff 0 6px, transparent 6px 12px) top /
      100% calc(1px / var(--odc-scale, 1)) no-repeat,
    repeating-linear-gradient(90deg, #fff 0 6px, transparent 6px 12px) bottom /
      100% calc(1px / var(--odc-scale, 1)) no-repeat,
    repeating-linear-gradient(0deg, #fff 0 6px, transparent 6px 12px) left /
      calc(1px / var(--odc-scale, 1)) 100% no-repeat,
    repeating-linear-gradient(0deg, #fff 0 6px, transparent 6px 12px) right /
      calc(1px / var(--odc-scale, 1)) 100% no-repeat;
  opacity: 0.5;
  animation: odc-ants 0.5s linear infinite;
}
@keyframes odc-ants {
  to {
    background-position:
      top 0 left 12px,
      bottom 0 right 12px,
      left 0 top 12px,
      right 0 bottom 12px;
  }
}

/* ── P2c: мультивыбор + панель align/distribute ── */
.odc-ovl-multi {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}
.odc-ovl-mbox {
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  border: calc(1.5px / var(--odc-scale, 1)) solid #c46bff;
  background: rgba(196, 107, 255, 0.1);
}
.odc-multibar {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 6px 10px;
  background: rgba(18, 20, 28, 0.97);
  border: 1px solid var(--bd2);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
  z-index: 140;
}
.odc-multibar[hidden] {
  display: none;
}
.odc-mb-count {
  font-size: 11px;
  color: var(--mut);
  font-family: "JetBrains Mono", monospace;
  padding: 0 4px;
  white-space: nowrap;
}
.odc-mb-sep {
  width: 1px;
  height: 18px;
  background: var(--bd2);
  margin: 0 3px;
}
.odc-mb-btn {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  color: var(--txt);
  border-radius: 7px;
  cursor: pointer;
}
.odc-mb-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* ── P3: контекст-меню (правый клик) + ⌘K палитра команд ── */
.odc-ctxmenu {
  position: absolute;
  z-index: 150;
  min-width: 196px;
  padding: 6px;
  background: rgba(18, 20, 28, 0.98);
  border: 1px solid var(--bd2);
  border-radius: 12px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.odc-ctxmenu[hidden] {
  display: none;
}
.odc-ctx-it {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--txt);
  cursor: pointer;
}
.odc-ctx-it:hover {
  background: rgba(79, 155, 255, 0.16);
}
.odc-ctx-del {
  color: #ff6b6b;
}
.odc-ctx-del:hover {
  background: rgba(255, 77, 77, 0.16);
}
.odc-ctx-k {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--mut);
}
.odc-ctx-sep {
  height: 1px;
  background: var(--bd);
  margin: 5px 4px;
}
.odc-cmdk {
  position: fixed;
  inset: 0;
  z-index: 99500;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 14vh;
  background: rgba(6, 7, 12, 0.5);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.odc-cmdk[hidden] {
  display: none;
}
.odc-cmdk-box {
  width: min(540px, 92vw);
  height: max-content;
  background: rgba(18, 20, 28, 0.99);
  border: 1px solid var(--bd2);
  border-radius: 16px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}
.odc-cmdk-in {
  width: 100%;
  padding: 16px 18px;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--txt);
  font-family: "Space Grotesk", sans-serif;
  font-size: 16px;
  border-bottom: 1px solid var(--bd);
}
.odc-cmdk-list {
  max-height: 360px;
  overflow-y: auto;
  padding: 6px;
}
.odc-cmdk-it {
  padding: 10px 12px;
  border-radius: 9px;
  font-size: 14px;
  color: var(--txt);
  cursor: pointer;
}
.odc-cmdk-it.sel,
.odc-cmdk-it:hover {
  background: rgba(79, 155, 255, 0.18);
}

/* ── P4: разметка (перо / кисть) ── */
.odc-annot-capture {
  position: absolute;
  inset: 0;
  z-index: 24;
  cursor: crosshair;
  background: transparent;
}
.odc-annot-capture[hidden] {
  display: none;
}
.odc-annotbar {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 11px;
  background: rgba(18, 20, 28, 0.97);
  border: 1px solid var(--bd2);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
  z-index: 145;
}
.odc-annotbar[hidden] {
  display: none;
}
.odc-annot-t.on {
  background: linear-gradient(90deg, #2b6fe0, #6d3fe0);
  border-color: transparent;
  color: #fff;
}

/* ── слои: явная «ручка» перетаскивания (drag by hand) ── */
.odc-lrow {
  cursor: grab;
}
.odc-layers.odc-ldragging .odc-lrow {
  cursor: grabbing;
}
.odc-lgrip {
  flex: 0 0 auto;
  width: 11px;
  text-align: center;
  color: #4a4e58;
  font-size: 11px;
  letter-spacing: -1px;
  line-height: 1;
  cursor: grab;
}
.odc-lrow:hover .odc-lgrip {
  color: #9aa0ab;
}

/* ── Studio: панель инструментов (toolkit.html) + акцентная кнопка ── */
.odc-studio-btn {
  background: linear-gradient(
    135deg,
    rgba(79, 155, 255, 0.22),
    rgba(196, 107, 255, 0.22)
  ) !important;
  border: 1px solid rgba(127, 212, 255, 0.5) !important;
  color: #cfe4ff !important;
}
.odc-studio {
  position: absolute;
  top: 54px;
  right: 0;
  bottom: 0;
  width: 430px;
  max-width: 92vw;
  z-index: 60;
  display: flex;
  flex-direction: column;
  background: rgba(10, 11, 16, 0.97);
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: -20px 0 60px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  animation: odc-sd-slide 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes odc-sd-slide {
  from {
    transform: translateX(34px);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
.odc-studio[hidden] {
  display: none;
}
.odc-studio-head {
  flex: 0 0 auto;
  height: 50px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 12px 0 18px;
  background: rgba(18, 20, 28, 0.9);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.odc-studio-title {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 600;
  font-size: 16px;
  flex: 0 0 auto;
  background: linear-gradient(90deg, #7fd4ff, #c69bff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.odc-studio-sel {
  flex: 1;
  min-width: 0;
  font-size: 11.5px;
  color: rgba(200, 215, 255, 0.55);
  font-family: "JetBrains Mono", monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.odc-studio-sel b {
  color: #9fd0ff;
}
.odc-sd-grid {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.odc-sd-card {
  flex: 0 0 auto;
  background: #12141c;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  overflow: hidden;
}
.odc-sd-card.odc-sd-dim {
  opacity: 0.5;
  pointer-events: none;
}
.odc-sd-ch {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(200, 215, 255, 0.5);
}
.odc-sd-n {
  color: rgba(255, 255, 255, 0.22);
}
.odc-sd-cb {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.odc-sd-hint {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  color: rgba(200, 215, 255, 0.34);
  text-align: center;
}
.odc-sd-cprow {
  display: flex;
  gap: 12px;
}
.odc-sd-sv {
  position: relative;
  flex: 1;
  height: 180px;
  border-radius: 10px;
  cursor: crosshair;
  background:
    linear-gradient(to top, #000, transparent),
    linear-gradient(to right, #fff, #4f9bff);
}
.odc-sd-hue {
  position: relative;
  width: 22px;
  height: 180px;
  border-radius: 10px;
  cursor: crosshair;
  background: linear-gradient(
    to bottom,
    #f00,
    #ff0,
    #0f0,
    #0ff,
    #00f,
    #f0f,
    #f00
  );
}
.odc-sd-cpout {
  display: flex;
  align-items: center;
  gap: 10px;
}
.odc-sd-sw {
  width: 44px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  flex: none;
}
.odc-sd-cpout .odc-cp-hex {
  flex: 1;
  min-width: 0;
  height: 36px;
}
.odc-sd-seg {
  display: flex;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 9px;
  padding: 3px;
  flex: none;
}
.odc-sd-seg button {
  border: 0;
  background: transparent;
  color: rgba(200, 215, 255, 0.6);
  font-family: "Space Grotesk", sans-serif;
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 7px;
  cursor: pointer;
}
.odc-sd-seg button.on {
  background: linear-gradient(135deg, #2b6fe0, #6d3fe0);
  color: #fff;
}
.odc-sd-knobwrap {
  display: flex;
  align-items: center;
  gap: 22px;
  justify-content: center;
  padding: 6px 0;
}
.odc-sd-knob {
  position: relative;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  cursor: grab;
  flex: none;
  background: radial-gradient(circle at 50% 32%, #2b3142, #12141c);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.5);
}
.odc-sd-knob:active {
  cursor: grabbing;
}
.odc-sd-knob i {
  position: absolute;
  inset: 0;
  transform: rotate(var(--a, 0deg));
}
.odc-sd-knob i::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 10px;
  width: 4px;
  height: 32px;
  background: #4f9bff;
  border-radius: 2px;
  transform: translateX(-50%);
  box-shadow: 0 0 8px rgba(79, 155, 255, 0.6);
}
.odc-sd-knobval {
  font-family: "Space Grotesk", sans-serif;
  font-size: 34px;
  font-weight: 600;
  color: #e8eeff;
}

/* тулбар: кнопки не сжимаются в 0 при нехватке места, бар скроллится */
.odc-bar {
  overflow: visible; /* было overflow-x:auto/overflow-y:hidden — срезало подписи кнопок тулбара */
}
.odc-bar::-webkit-scrollbar {
  height: 5px;
}
.odc-bar::-webkit-scrollbar-thumb {
  background: #3a3d45;
  border-radius: 3px;
}
.odc-iconbtn,
.odc-seg {
  flex: 0 0 auto;
}

/* ════════ RESKIN РЕДАКТОРА ПОД ВИЗУАЛ ТУЛКИТА (tools.html) ════════ */
.odc-overlay {
  --odc-accent: #4f9bff;
  --odc-sel: #4f9bff;
  background:
    radial-gradient(
      70vw 50vh at 12% -8%,
      rgba(79, 155, 255, 0.1),
      transparent 60%
    ),
    radial-gradient(
      60vw 50vh at 100% 0,
      rgba(196, 107, 255, 0.09),
      transparent 60%
    ),
    #0a0b10 !important;
  font-family:
    "Space Grotesk",
    -apple-system,
    system-ui,
    sans-serif !important;
}
/* топбар — стекло */
.odc-bar {
  background: rgba(14, 16, 24, 0.82) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.odc-iconbtn {
  color: rgba(200, 215, 255, 0.6);
  border-radius: 10px;
}
.odc-iconbtn:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #e8eeff;
}
.odc-iconbtn.active {
  background: rgba(79, 155, 255, 0.18);
  color: #9fd0ff;
}
.odc-seg {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 11px;
}
.odc-seg button.active {
  background: linear-gradient(135deg, #2b6fe0, #6d3fe0);
  color: #fff;
}
/* CTA «Применить» — градиент */
.odc-apply {
  background: linear-gradient(135deg, #2f74e8, #7b40e8) !important;
  border: 0 !important;
  border-radius: 11px !important;
  box-shadow: 0 6px 20px rgba(79, 90, 224, 0.4) !important;
  font-family: "Space Grotesk", sans-serif !important;
}
.odc-apply:disabled {
  opacity: 0.4;
  box-shadow: none !important;
}
/* панели — стеклянные карточки */
.odc-inspector,
.odc-layers,
.odc-aipanel,
.odc-search,
.odc-hpanel,
.odc-cpanel,
.odc-exploded {
  background: rgba(17, 19, 27, 0.94) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 16px !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.55) !important;
  font-family: "Space Grotesk", sans-serif;
}
/* зум-кластер — стекло-пилюля */
.odc-zoomcluster {
  background: rgba(14, 16, 24, 0.8) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 13px !important;
}
.odc-hint {
  font-family: "JetBrains Mono", monospace;
}
/* ползунки — акцент тулкита */
.odc-overlay input[type="range"] {
  accent-color: #4f9bff;
}

/* ════════ ПРИКОЛЫ: анимации + микро-взаимодействия (как в tools.html) ════════ */
@keyframes odc-pop-in {
  from {
    opacity: 0;
    transform: translateY(9px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes odc-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* появление панелей (left/top-позиционируемые — можно transform) */
.odc-inspector:not([hidden]),
.odc-layers:not([hidden]),
.odc-aipanel:not([hidden]),
.odc-search:not([hidden]),
.odc-hpanel:not([hidden]),
.odc-pop:not([hidden]),
.odc-ctxmenu:not([hidden]),
.odc-cmdk-box {
  animation: odc-pop-in 0.24s cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* мультибар/аннотбар центрируются через transform → только fade */
.odc-multibar:not([hidden]),
.odc-annotbar:not([hidden]) {
  animation: odc-fade-in 0.2s ease both;
}
/* hover/press микро у кнопок */
.odc-iconbtn {
  transition:
    background 0.14s,
    color 0.14s,
    transform 0.1s,
    box-shadow 0.16s;
}
.odc-iconbtn:hover {
  transform: translateY(-1px);
}
.odc-iconbtn:active {
  transform: scale(0.94);
}
.odc-iconbtn.active {
  box-shadow:
    0 0 0 1px rgba(79, 155, 255, 0.45),
    0 5px 16px rgba(79, 155, 255, 0.28);
}
.odc-tkbtn,
.odc-mb-btn,
.odc-alignbtn,
.odc-fsbtn,
.odc-clink {
  transition: all 0.14s ease;
}
.odc-tkbtn:hover,
.odc-mb-btn:hover,
.odc-alignbtn:hover,
.odc-fsbtn:hover {
  transform: translateY(-1px);
}
/* «Применить» — мягкое сияние, пока есть правки */
.odc-apply:not(:disabled) {
  animation: odc-apply-glow 2.6s ease-in-out infinite;
}
@keyframes odc-apply-glow {
  0%,
  100% {
    box-shadow: 0 6px 20px rgba(79, 90, 224, 0.4);
  }
  50% {
    box-shadow: 0 8px 28px rgba(123, 64, 232, 0.65);
  }
}
/* marching-ants заметнее; свотчи/стопы — мягкий hover */
.odc-mode-edit .odc-ovl-sel::before {
  opacity: 0.85 !important;
}
.odc-lrow {
  transition: background 0.12s;
}
.odc-tksw,
.odc-grad-stop {
  transition:
    transform 0.12s,
    box-shadow 0.12s;
}
.odc-tksw:hover {
  transform: scale(1.1);
}
/* флориш «Сохранено в OD» — само-рисующаяся галочка (как анимир. обводка тулкита) */
.odc-flourish {
  position: absolute;
  left: 50%;
  top: 22%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px 14px 16px;
  background: rgba(18, 20, 28, 0.96);
  border: 1px solid rgba(61, 220, 132, 0.4);
  border-radius: 16px;
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(12px);
  z-index: 99600;
  font-family: "Space Grotesk", sans-serif;
  color: #e8eeff;
  font-weight: 600;
  font-size: 15px;
  animation: odc-fl-in 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.odc-flourish.out {
  opacity: 0;
  transform: translateX(-50%) translateY(-8px);
  transition:
    opacity 0.4s,
    transform 0.4s;
}
@keyframes odc-fl-in {
  from {
    opacity: 0;
    transform: translateX(-50%) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
}
.odc-flourish svg {
  width: 40px;
  height: 40px;
  flex: none;
}
.odc-fl-c {
  fill: none;
  stroke: #3ddc84;
  stroke-width: 2.5;
  stroke-dasharray: 150;
  stroke-dashoffset: 150;
  animation: odc-fl-draw 0.6s ease forwards;
}
.odc-fl-ch {
  fill: none;
  stroke: #3ddc84;
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: odc-fl-draw 0.35s 0.45s ease forwards;
}
@keyframes odc-fl-draw {
  to {
    stroke-dashoffset: 0;
  }
}

/* ── Studio-док: карточки градиент / тень / easing / радиус ── */
.odc-sd-gprev {
  height: 64px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.odc-sd-gbar {
  position: relative;
  height: 26px;
  border-radius: 8px;
  cursor: copy;
}
.odc-sd-stop {
  position: absolute;
  top: -3px;
  width: 14px;
  height: calc(100% + 6px);
  transform: translateX(-50%);
  border: 2px solid #fff;
  border-radius: 5px;
  cursor: grab;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}
.odc-sd-grow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: rgba(200, 215, 255, 0.55);
  font-family: "JetBrains Mono", monospace;
}
.odc-sd-grow input[type="range"] {
  flex: 1;
}
.odc-sd-shstage {
  position: relative;
  height: 130px;
  background: #171a24;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.odc-sd-shbox {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  background: #e8eeff;
}
.odc-sd-shhandle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #4f9bff;
  border: 2px solid #fff;
  transform: translate(-50%, -50%);
  cursor: grab;
}
.odc-sd-sl {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: rgba(200, 215, 255, 0.55);
  font-family: "JetBrains Mono", monospace;
}
.odc-sd-sl span {
  width: 52px;
  flex: none;
}
.odc-sd-sl input[type="range"] {
  flex: 1;
}
.odc-sd-easewrap {
  display: flex;
  gap: 14px;
  align-items: center;
}
.odc-sd-easewrap svg {
  width: 130px;
  height: 130px;
  flex: none;
  background: #0a0b10;
  border-radius: 12px;
}
.odc-sd-easeside {
  flex: 1;
  min-width: 0;
}
.odc-sd-easetrack {
  position: relative;
  height: 18px;
  background: #171a24;
  border-radius: 9px;
}
.odc-sd-easeball {
  position: absolute;
  top: 2px;
  left: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7fd4ff, #c69bff);
  animation: odc-ease-run 1.4s var(--ease, linear) infinite alternate;
}
.odc-sd-easestr {
  margin: 10px 0 0;
}
.odc-sd-easepr {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}
.odc-sd-crstage {
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.odc-sd-crbox {
  width: 130px;
  height: 130px;
  border-radius: 24px;
  background: linear-gradient(135deg, #4f9bff, #c46bff);
}
.odc-sd-crrow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px 12px;
}
.odc-sd-crrow label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: rgba(200, 215, 255, 0.55);
  font-family: "JetBrains Mono", monospace;
}
.odc-sd-crrow .odc-scrubby {
  color: #e8eeff;
  min-width: 26px;
  text-align: center;
}
.odc-sd-ctprev {
  padding: 18px 14px;
  border-radius: 10px;
  text-align: center;
  font-size: 17px;
  font-weight: 500;
}
.odc-sd-ctrow {
  display: flex;
  align-items: baseline;
  gap: 4px;
  justify-content: center;
}
.odc-sd-ctrow b {
  font-size: 30px;
  font-weight: 600;
  color: #e8eeff;
  font-family: "Space Grotesk", sans-serif;
}
.odc-sd-ctrow span {
  color: rgba(200, 215, 255, 0.5);
  font-family: "JetBrains Mono", monospace;
}
.odc-sd-ctbadges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}
.odc-sd-ctbadge {
  font-size: 11px;
  padding: 4px 9px;
  border-radius: 7px;
  font-family: "JetBrains Mono", monospace;
}
.odc-sd-ctbadge.ok {
  background: rgba(61, 220, 132, 0.16);
  color: #6ff0a8;
}
.odc-sd-ctbadge.bad {
  background: rgba(255, 77, 77, 0.16);
  color: #ff8a8a;
}
/* Studio-док: карточки Layers + Live Cursors */
.odc-sd-layers {
  max-height: 240px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.odc-sd-lrow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
  color: rgba(200, 215, 255, 0.75);
}
.odc-sd-lrow:hover {
  background: rgba(255, 255, 255, 0.05);
}
.odc-sd-lrow.sel {
  background: rgba(79, 155, 255, 0.18);
  color: #fff;
}
.odc-sd-lic {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  flex: none;
}
.odc-sd-lname {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: "JetBrains Mono", monospace;
}
.odc-sd-leye,
.odc-sd-llock {
  color: rgba(200, 215, 255, 0.5);
  cursor: pointer;
  display: flex;
}
.odc-sd-leye:hover,
.odc-sd-llock:hover {
  color: #fff;
}
.odc-sd-leye.off {
  color: #6c7079;
}
.odc-sd-llock.on {
  color: #ffd25a;
}
.odc-sd-leye .odc-ic,
.odc-sd-llock .odc-ic {
  width: 14px;
  height: 14px;
}
.odc-sd-live {
  position: relative;
  height: 150px;
  background: #0a0b10;
  border-radius: 12px;
  overflow: hidden;
}
.odc-sd-live::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    rgba(255, 255, 255, 0.08) 1px,
    transparent 1px
  );
  background-size: 18px 18px;
}
.odc-sd-lc {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: flex-start;
  gap: 2px;
  pointer-events: none;
}
.odc-sd-lc svg {
  width: 20px;
  height: 20px;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
}
.odc-sd-lc span {
  font-size: 11px;
  font-weight: 600;
  color: #04101e;
  padding: 2px 8px;
  border-radius: 9px;
  white-space: nowrap;
  align-self: center;
  font-family: "Space Grotesk", sans-serif;
}
/* Studio-док: Align & Distribute + Eyedropper */
.odc-sd-albar {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: stretch;
}
.odc-sd-albar button {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 9px;
  color: rgba(200, 215, 255, 0.7);
  cursor: pointer;
  transition: all 0.14s;
}
.odc-sd-albar button:hover {
  background: rgba(79, 155, 255, 0.18);
  color: #fff;
  transform: translateY(-1px);
}
.odc-sd-aldiv {
  width: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 0 3px;
}
.odc-sd-eyesw {
  height: 56px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #4f9bff, #c46bff);
  color: #fff;
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  font-weight: 600;
}
.odc-sd-eyerow {
  display: flex;
  gap: 10px;
  align-items: center;
}
.odc-sd-eyerow .odc-tkbtn {
  flex: 1;
}
/* Studio-док: Canvas Tools */
.odc-sd-tools {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.odc-sd-tools button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 11px;
  color: rgba(200, 215, 255, 0.7);
  cursor: pointer;
  font-family: "Space Grotesk", sans-serif;
  font-size: 11.5px;
  transition: all 0.14s;
}
.odc-sd-tools button:hover {
  background: rgba(79, 155, 255, 0.14);
  color: #fff;
  transform: translateY(-1px);
}
.odc-sd-tools button.on {
  background: linear-gradient(
    135deg,
    rgba(43, 111, 224, 0.4),
    rgba(109, 63, 224, 0.4)
  );
  border-color: rgba(127, 212, 255, 0.5);
  color: #fff;
}
.odc-sd-tools button .odc-ic {
  width: 18px;
  height: 18px;
}

/* ════════ FIX шапки (odc129): чип проекта не налезает на presence/тогл ════════ */
/* Длинный issue·name·N экр. с white-space:nowrap переполнялся и наслаивался на
   аватары присутствия и переключатель режима. Обрезаем эллипсисом, фиксируем
   соседей, чтобы они не сжимались в кашу. */
.odc-titlewrap {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
}
.odc-titlewrap .odc-title {
  flex: 0 0 auto;
}
.odc-titlewrap .odc-chip,
#odc-sub {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 26vw;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.odc-bar .odc-online,
.odc-bar #odc-mode,
.odc-bar .odc-tools,
.odc-bar .odc-editbar {
  flex: 0 0 auto;
}

/* ════════ Фон полотна: белый / прозрачный (тёмный = по умолчанию) ════════ */
.odc-overlay.odc-bg-white .odc-viewport {
  background-color: #f4f5f7;
  background-image: radial-gradient(#d3d7de 1.2px, transparent 1.3px);
}
.odc-overlay.odc-bg-transparent .odc-viewport {
  background-color: #ffffff;
  background-image:
    linear-gradient(45deg, #e3e5ea 25%, transparent 25%),
    linear-gradient(-45deg, #e3e5ea 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e3e5ea 75%),
    linear-gradient(-45deg, transparent 75%, #e3e5ea 75%);
  background-size: 22px 22px;
  background-position: 0 0, 0 11px, 11px -11px, -11px 0;
}

/* ════════ FreeLayer — вынесенные за пределы экранов элементы ════════ */
.odc-freelayer {
  position: absolute;
  inset: 0;
  pointer-events: none; /* пустой слой не блокирует пан холста */
  z-index: 6;
}
.odc-free {
  position: absolute;
  pointer-events: auto;
  cursor: grab;
  border-radius: 6px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.4);
  transition: box-shadow 0.12s ease;
}
.odc-free:active {
  cursor: grabbing;
}
.odc-free-inner {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
}
.odc-free.sel {
  outline: 2px solid var(--odc-sel, #4f9bff);
  outline-offset: 2px;
  box-shadow: 0 8px 28px rgba(79, 155, 255, 0.45);
}
.odc-free-del {
  position: absolute;
  top: -11px;
  right: -11px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #14161c;
  background: #e0436b;
  color: #fff;
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
  padding: 0;
  display: none;
}
.odc-free:hover .odc-free-del,
.odc-free.sel .odc-free-del {
  display: block;
}

/* ════════ FreeLayer v2 — БЕЗОПАСНЫЙ вынос (тело сквозное, ручка-полоска) ════════ */
.odc-freelayer { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
/* тело объекта НЕ перехватывает клики — холст/экраны под ним работают всегда */
.odc-free { position: absolute; pointer-events: none !important; }
.odc-free-inner {
  width: 100%; height: 100%; overflow: hidden; border-radius: 6px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  background: rgba(20, 22, 30, 0.4);
}
.odc-free.sel .odc-free-inner { outline: 2px solid #7c3aed; outline-offset: 1px; }
/* ручка-полоска сверху — единственное интерактивное место */
.odc-free-bar {
  position: absolute; top: -23px; left: 0; height: 21px;
  display: flex; align-items: center; gap: 6px; padding: 0 6px;
  background: rgba(20, 22, 30, 0.94);
  border: 1px solid rgba(124, 58, 237, 0.55); border-radius: 6px;
  color: #cbd5e1; font-size: 11px; white-space: nowrap;
  pointer-events: auto; cursor: grab; user-select: none;
}
.odc-free-bar:active { cursor: grabbing; }
.odc-free-grip { opacity: 0.7; }
.odc-free-del {
  width: 16px; height: 16px; border-radius: 50%; border: 0;
  background: #e0436b; color: #fff; cursor: pointer; font-size: 10px;
  line-height: 16px; padding: 0; pointer-events: auto; margin-left: 2px;
}

/* ════════ FreeLayer v3 — тело объекта перетаскиваемо (но изолированно) ════════ */
.odc-free { pointer-events: auto !important; cursor: grab; }
.odc-free:active { cursor: grabbing; }
.odc-free-inner { pointer-events: none; }

/* ════════ FreeLayer v4 — ручки ресайза вынесенного объекта ════════ */
.odc-free-rz {
  position: absolute; width: 13px; height: 13px;
  background: #fff; border: 2px solid #7c3aed; border-radius: 50%;
  pointer-events: auto; display: none; z-index: 3;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.odc-free.sel .odc-free-rz { display: block; }
.odc-free-rz-nw { left: -7px; top: -7px; cursor: nwse-resize; }
.odc-free-rz-ne { right: -7px; top: -7px; cursor: nesw-resize; }
.odc-free-rz-sw { left: -7px; bottom: -7px; cursor: nesw-resize; }
.odc-free-rz-se { right: -7px; bottom: -7px; cursor: nwse-resize; }