/* ============================================================
   Canvas editor for «Текущие» estimates
   Scoped under .est-canvas-editor — dark, calm, focused.
   ============================================================ */

.est-canvas-editor {
  /* Palette matches the site shell: graphite base + teal accent */
  --ce-bg: #101114;
  --ce-canvas: #0a0b0e;
  --ce-panel: #16171c;
  --ce-panel-2: #1c1d23;
  --ce-panel-3: #24252c;
  --ce-border: rgba(255, 255, 255, 0.06);
  --ce-border-2: rgba(255, 255, 255, 0.12);
  --ce-text: rgba(255, 255, 255, 0.88);
  --ce-muted: rgba(255, 255, 255, 0.55);
  --ce-faint: rgba(255, 255, 255, 0.32);
  --ce-accent: #4ecdc4;
  --ce-accent-dim: rgba(78, 205, 196, 0.13);
  --ce-accent-line: rgba(78, 205, 196, 0.45);
  --ce-gold: #fbbf24;
  --ce-green: #4ade80;
  --ce-red: #f87171;
  --ce-radius: 10px;
  --ce-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: var(--ce-bg);
  color: var(--ce-text);
  font-size: 14px;
  user-select: none;
}

.est-canvas-editor *,
.est-canvas-editor *::before,
.est-canvas-editor *::after { box-sizing: border-box; }

.est-canvas-editor button {
  font-family: inherit;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.est-canvas-editor svg {
  width: 16px;
  height: 16px;
  display: block;
  flex-shrink: 0;
}

/* The annotation layer svg is a full-slide overlay, not an icon —
   undo the global icon sizing above. */
.est-canvas-editor .est-photo-layer svg {
  width: 100%;
  height: 100%;
}

.est-canvas-editor ::-webkit-scrollbar { width: 8px; height: 8px; }
.est-canvas-editor ::-webkit-scrollbar-track { background: transparent; }
.est-canvas-editor ::-webkit-scrollbar-thumb {
  background: var(--ce-panel-3);
  border-radius: 8px;
}
.est-canvas-editor ::-webkit-scrollbar-thumb:hover { background: var(--ce-border-2); }

.est-canvas-editor .est-ce-body {
  flex: 1;
  display: flex;
  min-height: 0;
}

/* ============ LEFT RAIL: positions ============ */

.est-canvas-editor .est-ce-left {
  width: 252px;
  flex: 0 0 252px;
  background:
    linear-gradient(180deg, rgba(78, 205, 196, 0.045) 0%, transparent 140px),
    var(--ce-panel);
  border-right: 1px solid var(--ce-border);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.est-canvas-editor .est-ce-rail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 14px 10px;
  color: var(--ce-text);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}
.est-canvas-editor .est-ce-rail-head > span:first-child {
  position: relative;
  padding-left: 11px;
}
.est-canvas-editor .est-ce-rail-head > span:first-child::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 11px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--ce-accent), rgba(78, 205, 196, 0.35));
}

/* summary pill with progress ring */
.est-canvas-editor .est-ce-left-summary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px 3px 5px;
  border-radius: 20px;
  border: 1px solid var(--ce-border);
  background: rgba(255, 255, 255, 0.03);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--ce-muted);
  white-space: nowrap;
}
.est-canvas-editor .est-ce-left-summary .ring {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}
.est-canvas-editor .est-ce-left-summary .txt b {
  color: var(--ce-text);
  font-weight: 700;
}
.est-canvas-editor .est-ce-left-summary.all-done {
  border-color: rgba(74, 222, 128, 0.3);
  background: rgba(74, 222, 128, 0.08);
  color: var(--ce-green);
}
.est-canvas-editor .est-ce-left-summary.all-done .txt b { color: var(--ce-green); }

/* ============ CUSTOM SEARCH FIELD ============ */

.est-canvas-editor .est-ce-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0 10px 10px;
  height: 36px;
  border-radius: 11px;
  border: 1px solid var(--ce-border);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 55%),
    var(--ce-bg);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  overflow: hidden;
}
/* animated accent hairline along the bottom, grows on focus */
.est-canvas-editor .est-ce-search::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 90%;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--ce-accent), transparent);
  opacity: 0;
  transition: left 0.25s ease, right 0.25s ease, opacity 0.25s ease;
  pointer-events: none;
}
.est-canvas-editor .est-ce-search.focused {
  border-color: var(--ce-accent-line);
  background:
    linear-gradient(180deg, rgba(78, 205, 196, 0.05), transparent 60%),
    var(--ce-bg);
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.25),
    0 0 0 3px rgba(78, 205, 196, 0.08);
}
.est-canvas-editor .est-ce-search.focused::after {
  left: 4%;
  right: 4%;
  opacity: 1;
}

/* "Только без фото" filter chip */
.est-canvas-editor .est-ce-posfilter {
  margin: -2px 10px 8px;
}
.est-canvas-editor .est-ce-posfilter-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid var(--ce-border);
  background: var(--ce-bg);
  color: var(--ce-muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.est-canvas-editor .est-ce-posfilter-btn .ico {
  display: inline-flex;
  width: 14px;
  height: 14px;
  opacity: 0.7;
}
.est-canvas-editor .est-ce-posfilter-btn .ico svg { width: 14px; height: 14px; }
.est-canvas-editor .est-ce-posfilter-btn .lbl { flex: 1 1 auto; text-align: left; }
.est-canvas-editor .est-ce-posfilter-btn .cnt {
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--ce-muted);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}
.est-canvas-editor .est-ce-posfilter-btn:hover {
  border-color: var(--ce-accent-line);
  color: var(--ce-text);
}
.est-canvas-editor .est-ce-posfilter-btn.on {
  border-color: var(--ce-accent-line);
  background: linear-gradient(180deg, rgba(78, 205, 196, 0.12), rgba(78, 205, 196, 0.04));
  color: var(--ce-accent);
}
.est-canvas-editor .est-ce-posfilter-btn.on .cnt {
  background: rgba(78, 205, 196, 0.22);
  color: #d7fbf6;
}
.est-canvas-editor .est-ce-posfilter-btn.all-done .cnt {
  background: rgba(74, 222, 128, 0.2);
  color: #bbf7d0;
}
.est-canvas-editor .est-ce-search .ico {
  display: flex;
  padding-left: 11px;
  color: var(--ce-faint);
  pointer-events: none;
  transition: color 0.2s ease, transform 0.2s ease;
}
.est-canvas-editor .est-ce-search.focused .ico {
  color: var(--ce-accent);
  transform: scale(1.08);
}
.est-canvas-editor .est-ce-search .ico svg { width: 14px; height: 14px; }

/* the input itself — fully neutralized from global site styles */
.est-canvas-editor .est-ce-search input,
.est-canvas-editor .est-ce-search input:focus,
.est-canvas-editor .est-ce-search input:hover {
  flex: 1 !important;
  min-width: 0 !important;
  width: auto !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 8px !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--ce-text) !important;
  font-size: 12.5px !important;
  font-family: inherit !important;
  line-height: 1 !important;
  box-shadow: none !important;
  outline: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  caret-color: var(--ce-accent);
}
.est-canvas-editor .est-ce-search input::placeholder {
  color: var(--ce-faint);
  transition: color 0.2s ease;
}
.est-canvas-editor .est-ce-search.focused input::placeholder { color: var(--ce-muted); }
.est-canvas-editor .est-ce-search input::selection {
  background: rgba(78, 205, 196, 0.30);
}
.est-canvas-editor .est-ce-search input::-webkit-search-cancel-button,
.est-canvas-editor .est-ce-search input::-webkit-search-decoration {
  display: none;
  -webkit-appearance: none;
}

/* live match counter */
.est-canvas-editor .est-ce-search .count {
  flex-shrink: 0;
  font-size: 9.5px;
  font-weight: 600;
  color: var(--ce-accent);
  background: rgba(78, 205, 196, 0.10);
  border-radius: 20px;
  padding: 2px 7px;
  margin-right: 2px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  animation: est-ce-count-in 0.15s ease;
}
.est-canvas-editor .est-ce-search .count.none {
  color: var(--ce-red);
  background: rgba(248, 113, 113, 0.10);
}
@keyframes est-ce-count-in {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: none; }
}

/* clear button */
.est-canvas-editor .est-ce-search .clear {
  display: none;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-right: 4px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--ce-faint);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.13s ease, color 0.13s ease;
}
.est-canvas-editor .est-ce-search .clear svg { width: 11px; height: 11px; }
.est-canvas-editor .est-ce-search .clear:hover {
  background: rgba(248, 113, 113, 0.14);
  color: var(--ce-red);
}
.est-canvas-editor .est-ce-search.has-value .clear { display: flex; }
.est-canvas-editor .est-ce-search.has-value .hotkey { display: none; }

/* "/" hotkey hint */
.est-canvas-editor .est-ce-search .hotkey {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-right: 8px;
  border-radius: 5px;
  border: 1px solid var(--ce-border-2);
  background: var(--ce-panel-2);
  color: var(--ce-faint);
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
  flex-shrink: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
.est-canvas-editor .est-ce-search.focused .hotkey { opacity: 0; }

.est-canvas-editor .est-ce-pos-list {
  overflow-y: auto;
  padding: 2px 10px 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* group headers — each group carries its own accent color via --g */
.est-canvas-editor .est-ce-group {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  margin-top: 8px;
  cursor: pointer;
  color: var(--ce-muted);
  border-radius: 9px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--g) 9%, transparent), transparent 70%),
    var(--ce-panel);
  border: 1px solid transparent;
  transition: color 0.13s ease, border-color 0.13s ease;
}
.est-canvas-editor .est-ce-group:first-child { margin-top: 0; }
.est-canvas-editor .est-ce-group:hover {
  color: var(--ce-text);
  border-color: color-mix(in srgb, var(--g) 30%, transparent);
}
.est-canvas-editor .est-ce-group .gico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  flex-shrink: 0;
  color: var(--g);
  background: color-mix(in srgb, var(--g) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--g) 22%, transparent);
}
.est-canvas-editor .est-ce-group .gico svg { width: 13px; height: 13px; }
.est-canvas-editor .est-ce-group .gtitle {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ce-text);
}
.est-canvas-editor .est-ce-group .gline {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--g) 25%, transparent), transparent);
}
.est-canvas-editor .est-ce-group .gcount {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 20px;
  color: color-mix(in srgb, var(--g) 80%, #fff);
  background: color-mix(in srgb, var(--g) 13%, transparent);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.est-canvas-editor .est-ce-group .gcount.full {
  color: var(--ce-green);
  background: rgba(74, 222, 128, 0.13);
}
.est-canvas-editor .est-ce-group .chev {
  font-size: 13px;
  line-height: 1;
  width: 14px;
  text-align: center;
  transform: rotate(90deg);
  transition: transform 0.18s ease;
  color: var(--ce-faint);
}
.est-canvas-editor .est-ce-group.collapsed .chev { transform: rotate(0deg); }
.est-canvas-editor .est-ce-group.done .gtitle { color: var(--ce-muted); }

/* items of a group — connected by a soft guide line */
.est-canvas-editor .est-ce-group-items {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 0 2px 10px;
  animation: est-ce-group-in 0.18s ease;
}
@keyframes est-ce-group-in {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 1; transform: none; }
}
.est-canvas-editor .est-ce-group-items::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--g) 30%, transparent),
    color-mix(in srgb, var(--g) 8%, transparent));
}

/* position rows */
.est-canvas-editor .est-ce-pos {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 9px;
  border-radius: var(--ce-radius);
  border: 1px solid transparent;
  cursor: pointer;
  position: relative;
  text-align: left;
  transition: background 0.13s ease, border-color 0.13s ease, transform 0.13s ease;
}
.est-canvas-editor .est-ce-pos:hover {
  background: var(--ce-panel-2);
  transform: translateX(2px);
}
.est-canvas-editor .est-ce-pos.active {
  background:
    linear-gradient(90deg, rgba(78, 205, 196, 0.10), transparent 65%),
    var(--ce-panel-2);
  border-color: rgba(78, 205, 196, 0.28);
  transform: none;
}
.est-canvas-editor .est-ce-pos.active::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 3px;
  background: var(--ce-accent);
  box-shadow: 0 0 8px rgba(78, 205, 196, 0.55);
}

/* status dot with soft glow */
.est-canvas-editor .est-ce-pos .status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.16);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.04);
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.est-canvas-editor .est-ce-pos .status-dot.part {
  background: var(--ce-gold);
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.12);
}
.est-canvas-editor .est-ce-pos .status-dot.full {
  background: var(--ce-green);
  box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.12);
}

.est-canvas-editor .est-ce-pos .pos-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.est-canvas-editor .est-ce-pos .name {
  font-size: 12.5px;
  line-height: 1.32;
  overflow-wrap: break-word;
  transition: color 0.13s ease;
}
.est-canvas-editor .est-ce-pos .zone {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--ce-faint);
  line-height: 1.2;
}
.est-canvas-editor .est-ce-pos .zone::before {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--g, #94a3b8) 60%, transparent);
}
.est-canvas-editor .est-ce-pos .pos-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}
.est-canvas-editor .est-ce-pos .pos-dept {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 999px;
  color: var(--d, #94a3b8);
  background: color-mix(in srgb, var(--d, #94a3b8) 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--d, #94a3b8) 32%, transparent);
}
.est-canvas-editor .est-ce-pos .pos-dept::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--d, #94a3b8);
}
.est-canvas-editor .est-ce-pos.full .name { color: var(--ce-muted); }
.est-canvas-editor .est-ce-pos.active .name { color: var(--ce-text); font-weight: 600; }

.est-canvas-editor .est-ce-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  color: var(--ce-muted);
  flex-shrink: 0;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  transition: background 0.15s ease, color 0.15s ease;
}
.est-canvas-editor .est-ce-badge.full {
  background: rgba(74, 222, 128, 0.13);
  box-shadow: inset 0 0 0 1px rgba(74, 222, 128, 0.2);
  color: var(--ce-green);
}
.est-canvas-editor .est-ce-badge.part {
  background: rgba(251, 191, 36, 0.12);
  box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.18);
  color: var(--ce-gold);
}
.est-canvas-editor .est-ce-badge.lg { font-size: 11px; padding: 3px 10px; }

.est-canvas-editor .est-ce-empty-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 32px 10px;
  text-align: center;
  color: var(--ce-muted);
  font-size: 12.5px;
}
.est-canvas-editor .est-ce-empty-list .ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--ce-faint);
  margin-bottom: 2px;
}
.est-canvas-editor .est-ce-empty-list .ico svg { width: 16px; height: 16px; }
.est-canvas-editor .est-ce-empty-list .sub {
  font-size: 11px;
  color: var(--ce-faint);
}

/* ============ CENTER: topbar + canvas ============ */

.est-canvas-editor .est-ce-center {
  flex: 1 1 0;
  min-width: 420px;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.est-canvas-editor .est-ce-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  flex-shrink: 0;
  padding: 0 16px;
  background: var(--ce-panel);
  border-bottom: 1px solid var(--ce-border);
}
.est-canvas-editor .est-ce-topbar-name {
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.est-canvas-editor .est-ce-topbar-meta {
  font-size: 11px;
  color: var(--ce-faint);
  white-space: nowrap;
}
.est-canvas-editor .est-ce-topbar-spacer { flex: 1; }
.est-canvas-editor .est-ce-topbar-count {
  font-size: 11px;
  color: var(--ce-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.est-canvas-editor .est-ce-topbar-nav {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid var(--ce-border);
  background: var(--ce-panel-2);
  color: var(--ce-text);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0 0 2px;
}
.est-canvas-editor .est-ce-topbar-nav:hover:not(:disabled) { border-color: var(--ce-accent-line); }
.est-canvas-editor .est-ce-topbar-nav:disabled { opacity: 0.3; cursor: default; }

.est-canvas-editor .est-ce-topbar-sep {
  width: 1px;
  height: 22px;
  background: var(--ce-border);
  margin: 0 2px;
}
.est-canvas-editor .est-ce-topbar-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--ce-border);
  background: var(--ce-panel-2);
  color: var(--ce-muted);
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.est-canvas-editor .est-ce-topbar-btn svg { width: 14px; height: 14px; }
.est-canvas-editor .est-ce-topbar-btn:hover { border-color: var(--ce-accent-line); color: var(--ce-text); }
.est-canvas-editor .est-ce-topbar-btn.on {
  background: var(--ce-accent-dim);
  border-color: var(--ce-accent-line);
  color: var(--ce-accent);
}

.est-canvas-editor .est-ce-viewport {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: var(--ce-canvas);
  cursor: grab;
  /* We drive pan/zoom ourselves via pointer events (incl. touch pinch on
     tablets), so suppress the browser's native touch gestures inside the
     canvas. The side panels live outside the viewport and keep native scroll. */
  touch-action: none;
}
.est-canvas-editor .est-ce-viewport.panning { cursor: grabbing; }
/* Crop overlay is rendered at document root (outside the viewport), so it needs
   its own touch-action to keep pinch/scroll from hijacking the drag. */
.est-ce-crop-layer,
.est-ce-crop-layer .est-ce-crop-rect { touch-action: none; }

/* "Сохранено" confirmation chip (overlay, top-right of the center column). */
.est-canvas-editor .est-ce-saved {
  position: absolute;
  top: 54px;
  right: 16px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 8px;
  background: rgba(34, 197, 94, 0.14);
  border: 1px solid rgba(34, 197, 94, 0.30);
  color: #4ade80;
  font-size: 12px;
  font-weight: 700;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.est-canvas-editor .est-ce-saved svg { width: 14px; height: 14px; }
.est-canvas-editor .est-ce-saved.show { opacity: 1; transform: translateY(0); }
.est-canvas-editor .est-ce-viewport::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
}
.est-canvas-editor .est-ce-viewport::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 90% 70% at 50% 40%, transparent 55%, rgba(0, 0, 0, 0.35) 100%);
  pointer-events: none;
}

.est-canvas-editor .est-ce-stage {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  will-change: transform;
}

.est-canvas-editor .est-ce-slides-stack {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.est-canvas-editor .est-ce-slide-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--ce-muted);
  margin-bottom: 8px;
  padding-left: 2px;
}
.est-canvas-editor .est-ce-slide-label .num {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11px;
}
.est-canvas-editor .est-ce-slide-label .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ce-faint);
}
.est-canvas-editor .est-ce-slide-label .dot.part { background: var(--ce-gold); }
.est-canvas-editor .est-ce-slide-label .dot.full { background: var(--ce-green); }
.est-canvas-editor .est-ce-slide-label .cnt {
  font-size: 11px;
  color: var(--ce-faint);
  font-variant-numeric: tabular-nums;
}

.est-canvas-editor .est-ce-slide-wrap {
  position: relative;
  /* Fixed slide box so each block reserves real space in the flex column.
     Without this the shared .est-slide-content (position:absolute) would
     collapse the wrapper to 0px, making slides overlap and breaking "Вписать"
     and drag measurements across browsers (notably Chrome). */
  width: 1280px;
  height: 720px;
  flex: 0 0 auto;
  background: #fff;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.10),
    0 24px 70px rgba(0, 0, 0, 0.55);
  border-radius: 6px;
  overflow: visible;
}
/* Put the slide content back into normal flow at a fixed 1280×720 (the shared
   estimates.css makes .est-slide-content absolute + transform for the classic
   zoom view; the canvas scales via the stage transform instead). */
.est-canvas-editor .est-ce-slide-wrap .est-slide-content {
  position: static;
  top: auto;
  left: auto;
  width: 1280px;
  height: 720px;
  transform: none;
  border-radius: 6px;
}

/* ============ FLOATING ISLAND: zoom / undo ============ */

.est-canvas-editor .est-ce-island {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 5px;
  border-radius: 14px;
  background: rgba(22, 23, 28, 0.92);
  border: 1px solid var(--ce-border-2);
  box-shadow: var(--ce-shadow);
  backdrop-filter: blur(10px);
  z-index: 10;
}
.est-canvas-editor .est-ce-island button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ce-text);
  cursor: pointer;
}
.est-canvas-editor .est-ce-island button:hover:not(:disabled) { background: var(--ce-panel-3); }
.est-canvas-editor .est-ce-island button:disabled { opacity: 0.3; cursor: default; }
.est-canvas-editor .est-ce-island .lvl {
  min-width: 48px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--ce-muted);
}
.est-canvas-editor .est-ce-island .fit {
  width: auto;
  padding: 0 12px;
  font-size: 12px;
  color: var(--ce-muted);
}
.est-canvas-editor .est-ce-island .fit:hover { color: var(--ce-text); }
.est-canvas-editor .est-ce-island .fit svg { width: 14px; height: 14px; }
.est-canvas-editor .est-ce-island .sep {
  width: 1px;
  height: 20px;
  background: var(--ce-border-2);
  margin: 0 3px;
}

/* ============ ANNOTATION TOOLBAR (floating) ============ */

.est-ce-ann-toolbar {
  position: fixed;
  z-index: 1600;
  display: none;
  flex-direction: column;
  gap: 0;
  padding: 5px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 45%), rgba(20, 21, 26, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.13);
  box-shadow:
    0 16px 50px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
}
.est-ce-ann-toolbar.show {
  display: flex;
  animation: est-ce-ann-in 0.16s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
@keyframes est-ce-ann-in {
  from { opacity: 0; transform: translateY(5px) scale(0.96); }
  to { opacity: 1; transform: none; }
}
.est-ce-ann-toolbar .row {
  display: flex;
  align-items: stretch;
  gap: 6px;
}

/* labelled sections: arrows vs photo management */
.est-ce-ann-toolbar .sec {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 2px 2px 0;
}
.est-ce-ann-toolbar .sec-title {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(255, 255, 255, 0.32);
  line-height: 1;
  user-select: none;
}
.est-ce-ann-toolbar .sec-body {
  display: flex;
  align-items: stretch;
  gap: 6px;
}
/* contextual hint line under the buttons */
.est-ce-ann-toolbar .hint {
  margin-top: 5px;
  padding: 4px 8px 3px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 10.5px;
  line-height: 1.3;
  text-align: center;
  color: rgba(255, 255, 255, 0.42);
  letter-spacing: 0.01em;
  transition: color 0.15s ease;
}
.est-ce-ann-toolbar .hint.draw { color: #4ecdc4; }
.est-ce-ann-toolbar .hint.sel { color: #fbbf24; }
/* caret pointing to the photo */
.est-ce-ann-toolbar::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 9px;
  height: 9px;
  transform: translateX(-50%) rotate(45deg);
  background: rgba(20, 21, 26, 0.96);
  border-right: 1px solid rgba(255, 255, 255, 0.13);
  border-bottom: 1px solid rgba(255, 255, 255, 0.13);
}
/* toolbar rendered below the photo — flip the caret to the top edge */
.est-ce-ann-toolbar.below::after {
  bottom: auto;
  top: -5px;
  transform: translateX(-50%) rotate(225deg);
  background: rgba(23, 24, 29, 0.99);
}

.est-ce-ann-toolbar .grp {
  display: flex;
  align-items: stretch;
  gap: 2px;
  transition: opacity 0.15s ease;
}
.est-ce-ann-toolbar .grp.disabled { opacity: 0.35; }
.est-ce-ann-toolbar .grp.disabled button,
.est-ce-ann-toolbar .grp.disabled .stepper button { cursor: not-allowed; }

.est-ce-ann-toolbar svg { width: 15px; height: 15px; display: block; }

/* icon + tiny label buttons */
.est-ce-ann-toolbar button {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 46px;
  padding: 5px 7px 4px;
  border-radius: 9px;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(255, 255, 255, 0.88);
  cursor: pointer;
  transition: background 0.13s ease, border-color 0.13s ease, color 0.13s ease;
}
.est-ce-ann-toolbar button .bico {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 16px;
}
.est-ce-ann-toolbar button .lbl {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1;
  transition: color 0.13s ease;
}
.est-ce-ann-toolbar button:hover { background: #24252c; }
.est-ce-ann-toolbar button:hover .lbl { color: rgba(255, 255, 255, 0.75); }
.est-ce-ann-toolbar button.on {
  background: rgba(78, 205, 196, 0.14);
  border-color: rgba(78, 205, 196, 0.45);
  color: #4ecdc4;
}
.est-ce-ann-toolbar button.on .lbl { color: #4ecdc4; }
.est-ce-ann-toolbar button.on .arrow-ico { color: #4ecdc4; }

.est-ce-ann-toolbar .arrow-ico { color: #f87171; }
.est-ce-ann-toolbar .numbox-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  width: auto;
  height: 14px;
  padding: 0 3px;
  border: 1.5px solid #f87171;
  border-radius: 3px;
  color: #f87171;
  font-size: 9px;
  font-weight: 700;
  font-style: normal;
  line-height: 1;
}
.est-ce-ann-toolbar button.on .numbox-ico {
  color: #4ecdc4;
  border-color: #4ecdc4;
}
.est-ce-ann-toolbar .arrow-ico.num i {
  position: absolute;
  right: -5px;
  bottom: -3px;
  font-style: normal;
  font-size: 8px;
  font-weight: 700;
  background: #f87171;
  color: #101114;
  border-radius: 50%;
  width: 11px;
  height: 11px;
  line-height: 11px;
  text-align: center;
}

.est-ce-ann-toolbar .grp:not(.disabled) button.danger:hover {
  background: rgba(248, 113, 113, 0.13);
  border-color: rgba(248, 113, 113, 0.35);
  color: #f87171;
}
.est-ce-ann-toolbar .grp:not(.disabled) button.danger:hover .lbl { color: #f87171; }
.est-ce-ann-toolbar button.danger-soft:hover {
  background: rgba(248, 113, 113, 0.10);
  color: #f87171;
}
.est-ce-ann-toolbar button.danger-soft:hover .lbl { color: #f87171; }

/* number stepper */
.est-ce-ann-toolbar .stepper {
  display: flex;
  align-items: center;
  gap: 1px;
  padding: 0 2px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.04);
}
.est-ce-ann-toolbar .stepper button {
  min-width: 24px;
  width: 24px;
  padding: 0;
  height: 100%;
  flex-direction: row;
  border-radius: 7px;
}
.est-ce-ann-toolbar .stepper button svg { width: 12px; height: 12px; }
.est-ce-ann-toolbar .stepper .val {
  min-width: 26px;
  text-align: center;
  font-weight: 700;
  font-size: 14px;
  color: #fbbf24;
  font-variant-numeric: tabular-nums;
}

.est-ce-ann-toolbar .sep {
  width: 1px;
  align-self: stretch;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.14), transparent);
  margin: 2px 2px 0;
  flex-shrink: 0;
}

/* ---- selectable arrows on the slide (canvas mode only) ---- */
/* Lift the annotation SVG above the zone-rect overlay (z-index 25) so arrow
   hit-lines are actually clickable; the svg itself stays click-through. */
.est-canvas-slide-content .est-photo-layer svg {
  z-index: 27;
  pointer-events: none;
}
.est-canvas-slide-content .est-photo-layer line.est-arrow-hit {
  pointer-events: stroke;
  cursor: move; /* arrows are draggable once drawn */
}
/* drawing mode: crosshair everywhere over the slide */
.est-canvas-slide-content.arrow-mode,
.est-canvas-slide-content.arrow-mode .est-zone-rect {
  cursor: crosshair !important;
}
.est-canvas-slide-content .est-photo-layer g.est-arrow-num {
  pointer-events: all;
  cursor: move;
}
/* numbox is a free-floating stamp — draggable anywhere on the photo */
.est-canvas-slide-content .est-photo-layer g.est-numbox { cursor: move; }
.est-canvas-slide-content .est-photo-layer line.est-arrow-line.selected {
  stroke: #4ecdc4;
  stroke-width: 2.5;
  filter: drop-shadow(0 0 3px rgba(78, 205, 196, 0.9));
}
.est-canvas-slide-content .est-photo-layer g.est-arrow-num.selected rect {
  stroke: #4ecdc4;
  stroke-width: 1.5;
  filter: drop-shadow(0 0 3px rgba(78, 205, 196, 0.8));
}
/* hover feedback before selecting */
.est-canvas-slide-content .est-photo-layer line.est-arrow-hit:hover + line.est-arrow-line {
  stroke-width: 2.5;
  filter: drop-shadow(0 0 2px rgba(255, 0, 0, 0.7));
}

/* ============ RIGHT RAIL: sources + tools ============ */

.est-canvas-editor .est-ce-right {
  width: 264px;
  flex: 0 0 264px;
  background: var(--ce-panel);
  border-left: 1px solid var(--ce-border);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.est-canvas-editor .est-ce-src-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 12px 8px;
  flex-shrink: 0;
}
.est-canvas-editor .est-ce-src-title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ce-text);
}
.est-canvas-editor .est-ce-src-title .ico { display: inline-flex; color: var(--ce-accent); }
.est-canvas-editor .est-ce-src-title .ico svg { width: 15px; height: 15px; }
.est-canvas-editor .est-ce-src-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid var(--ce-border-2);
  background: var(--ce-bg);
  color: var(--ce-muted);
  cursor: pointer;
  transition: background 0.13s ease, color 0.13s ease, border-color 0.13s ease;
}
.est-canvas-editor .est-ce-src-add:hover {
  color: var(--ce-accent);
  border-color: var(--ce-accent-line);
  background: var(--ce-accent-dim);
}
.est-canvas-editor .est-ce-src-add svg { width: 15px; height: 15px; }

/* Highlight the exchanger panel while dragging files over it. */
.est-canvas-editor .est-ce-src-grid.drop-hot {
  outline: 2px dashed var(--ce-accent);
  outline-offset: -6px;
  background: var(--ce-accent-dim);
  border-radius: 10px;
}

.est-canvas-editor .est-ce-src-grid {
  overflow-y: auto;
  padding: 2px 12px 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-content: start;
  flex: 1;
  min-height: 0;
}

.est-canvas-editor .est-ce-thumb {
  aspect-ratio: 4 / 3;
  border-radius: 9px;
  overflow: hidden;
  border: 1px solid var(--ce-border-2);
  cursor: grab;
  position: relative;
  background: var(--ce-bg);
  transition: border-color 0.13s ease, transform 0.13s ease;
}

/* Exchanger tab: one photo per row, shown in full (no crop) so every photo
   is completely visible. Photos keep their natural size regardless of how many
   there are — the panel simply scrolls up/down. A flex column with
   flex-shrink:0 prevents rows from being squeezed to fit the panel height. */
.est-canvas-editor .est-ce-src-grid.is-exchanger {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.est-canvas-editor .est-ce-src-grid.is-exchanger .est-ce-thumb {
  flex: 0 0 auto;
  aspect-ratio: auto;
  height: auto;
}
.est-canvas-editor .est-ce-src-grid.is-exchanger .est-ce-thumb img {
  height: auto;
  object-fit: contain;
}
.est-canvas-editor .est-ce-thumb:hover {
  border-color: var(--ce-accent-line);
  transform: translateY(-1px);
}
.est-canvas-editor .est-ce-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.est-canvas-editor .est-ce-thumb .cm {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 7px 5px;
  font-size: 10px;
  line-height: 1.25;
  color: #fff;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.75));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
.est-canvas-editor .est-ce-thumb .armed-mark {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  color: var(--ce-accent);
  background: rgba(7, 10, 20, 0.65);
  pointer-events: none;
}
.est-canvas-editor .est-ce-thumb.armed {
  border-color: var(--ce-accent);
  box-shadow: 0 0 0 2px var(--ce-accent-dim);
}
.est-canvas-editor .est-ce-thumb.armed .armed-mark { display: flex; }

/* Magnifier button on a thumbnail → opens the fit-to-window viewer */
.est-canvas-editor .est-ce-thumb-zoom {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 26px;
  height: 26px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 7px;
  background: rgba(7, 10, 20, 0.6);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 0.13s ease, transform 0.13s ease, background 0.13s ease;
  z-index: 2;
}
.est-canvas-editor .est-ce-thumb-zoom svg { width: 15px; height: 15px; }
.est-canvas-editor .est-ce-thumb:hover .est-ce-thumb-zoom { opacity: 1; transform: translateY(0); }
.est-canvas-editor .est-ce-thumb-zoom:hover { background: var(--ce-accent); color: #071018; }

/* Delete button on a thumbnail → removes the photo from the exchanger */
.est-canvas-editor .est-ce-thumb-del {
  position: absolute;
  top: 5px;
  left: 5px;
  width: 26px;
  height: 26px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 7px;
  background: rgba(7, 10, 20, 0.6);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 0.13s ease, transform 0.13s ease, background 0.13s ease;
  z-index: 2;
}
.est-canvas-editor .est-ce-thumb-del svg { width: 15px; height: 15px; }
.est-canvas-editor .est-ce-thumb:hover .est-ce-thumb-del { opacity: 1; transform: translateY(0); }
.est-canvas-editor .est-ce-thumb-del:hover { background: #ef4444; color: #fff; }

/* ---- Fullscreen exchanger photo viewer (fit-to-window lightbox) ---- */
.est-ce-viewer {
  position: fixed;
  inset: 0;
  z-index: 100050;
  display: none;
  align-items: center;
  justify-content: center;
}
.est-ce-viewer.show { display: flex; }
.est-ce-viewer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 6, 12, 0.92);
  backdrop-filter: blur(4px);
}
.est-ce-viewer-stage {
  position: relative;
  margin: 0;
  z-index: 1;
  max-width: 92vw;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.est-ce-viewer-stage img {
  max-width: 92vw;
  max-height: 80vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
  background: #0b0e16;
}
.est-ce-viewer-stage figcaption {
  color: #e2e8f0;
  font-size: 13px;
  text-align: center;
  max-width: 80vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.est-ce-viewer-counter {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: #cbd5e1;
  font-size: 13px;
  font-weight: 600;
  background: rgba(7, 10, 20, 0.6);
  padding: 5px 12px;
  border-radius: 999px;
}
.est-ce-viewer-close,
.est-ce-viewer-nav {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(20, 26, 40, 0.8);
  color: #fff;
  cursor: pointer;
  transition: background 0.13s ease, transform 0.13s ease;
}
.est-ce-viewer-close { top: 16px; right: 18px; width: 42px; height: 42px; }
.est-ce-viewer-nav { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; }
.est-ce-viewer-nav.prev { left: 20px; }
.est-ce-viewer-nav.next { right: 20px; }
.est-ce-viewer-close svg { width: 20px; height: 20px; }
.est-ce-viewer-nav svg { width: 24px; height: 24px; }
.est-ce-viewer-close:hover,
.est-ce-viewer-nav:hover { background: var(--ce-accent); color: #071018; }
.est-ce-viewer-nav.prev:hover { transform: translateY(-50%) scale(1.06); }
.est-ce-viewer-nav.next:hover { transform: translateY(-50%) scale(1.06); }
.est-ce-viewer-insert {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 20px;
  border: none;
  border-radius: 10px;
  background: var(--ce-accent);
  color: #071018;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4);
}
.est-ce-viewer-insert svg { width: 17px; height: 17px; }
.est-ce-viewer-insert:hover { filter: brightness(1.06); }

.est-canvas-editor .est-ce-upload {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px dashed var(--ce-border-2);
  border-radius: 9px;
  padding: 12px;
  color: var(--ce-muted);
  font-size: 12px;
  background: transparent;
  cursor: pointer;
  transition: border-color 0.13s ease, color 0.13s ease;
}
.est-canvas-editor .est-ce-upload:hover {
  border-color: var(--ce-accent-line);
  color: var(--ce-accent);
}
.est-canvas-editor .est-ce-upload .ico svg { width: 14px; height: 14px; }

.est-canvas-editor .est-ce-empty-state {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 28px 14px;
  color: var(--ce-muted);
}
.est-canvas-editor .est-ce-empty-state .ico { color: var(--ce-faint); }
.est-canvas-editor .est-ce-empty-state .ico svg { width: 28px; height: 28px; }
.est-canvas-editor .est-ce-empty-state .t { font-size: 13px; font-weight: 600; color: var(--ce-text); }
.est-canvas-editor .est-ce-empty-state .d { font-size: 11.5px; line-height: 1.5; color: var(--ce-muted); }

/* Empty exchanger: friendly, numbered "how to add photos" instructions. */
.est-canvas-editor .est-ce-ex-empty { padding: 26px 16px; gap: 10px; }
.est-canvas-editor .est-ce-ex-empty .ico svg { width: 34px; height: 34px; }
.est-canvas-editor .est-ce-ex-empty .d { margin-top: 2px; }
.est-canvas-editor .est-ce-ex-steps {
  list-style: none;
  margin: 2px 0 0;
  padding: 0;
  width: 100%;
  max-width: 240px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  text-align: left;
}
.est-canvas-editor .est-ce-ex-steps li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--ce-text);
}
.est-canvas-editor .est-ce-ex-steps li .n {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ce-accent-dim);
  color: var(--ce-accent);
  border: 1px solid var(--ce-accent-line);
  font-size: 10.5px;
  font-weight: 700;
}
.est-canvas-editor .est-ce-ex-steps li kbd {
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 5px;
  background: var(--ce-bg);
  border: 1px solid var(--ce-border-2);
  color: var(--ce-text);
}
.est-canvas-editor .est-ce-ex-upload {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 4px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: var(--ce-accent);
  border: none;
  border-radius: 9px;
  cursor: pointer;
  transition: filter 0.13s ease;
}
.est-canvas-editor .est-ce-ex-upload:hover { filter: brightness(1.08); }
.est-canvas-editor .est-ce-ex-upload svg { width: 15px; height: 15px; }
.est-canvas-editor .est-ce-ex-note {
  font-size: 10.5px;
  line-height: 1.45;
  color: var(--ce-faint);
  max-width: 240px;
}

.est-canvas-editor .est-ce-src-loading {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px 0;
  color: var(--ce-faint);
  font-size: 12px;
}
.est-canvas-editor .est-ce-src-loading .spinner {
  width: 14px;
  height: 14px;
  border: 2px solid var(--ce-border-2);
  border-top-color: var(--ce-accent);
  border-radius: 50%;
  animation: est-ce-spin 0.7s linear infinite;
}
@keyframes est-ce-spin { to { transform: rotate(360deg); } }

/* tools block */
.est-canvas-editor .est-ce-tools {
  border-top: 1px solid var(--ce-border);
  padding: 12px;
  flex-shrink: 0;
}
.est-canvas-editor .est-ce-tools h4 {
  margin: 0 0 8px;
  color: var(--ce-muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.est-canvas-editor .est-ce-tbtn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  margin-bottom: 6px;
  border-radius: 9px;
  border: 1px solid var(--ce-border);
  background: var(--ce-panel-2);
  color: var(--ce-text);
  font-size: 12.5px;
  cursor: pointer;
}
.est-canvas-editor .est-ce-tbtn .ico { color: var(--ce-muted); display: flex; }
.est-canvas-editor .est-ce-tbtn .ico svg { width: 15px; height: 15px; }
.est-canvas-editor .est-ce-tbtn:hover:not(:disabled) { border-color: var(--ce-accent-line); }
.est-canvas-editor .est-ce-tbtn:hover:not(:disabled) .ico { color: var(--ce-accent); }
.est-canvas-editor .est-ce-tbtn:disabled { opacity: 0.35; cursor: default; }
.est-canvas-editor .est-ce-tbtn.danger:hover:not(:disabled) { border-color: rgba(239, 68, 68, 0.5); }
.est-canvas-editor .est-ce-tbtn.danger:hover:not(:disabled) .ico { color: #ef4444; }

/* Slide operations (duplicate / delete) grouped with an active-slide readout */
.est-canvas-editor .est-ce-slidebar {
  margin: 8px 0 6px;
  padding: 9px;
  border-radius: 11px;
  border: 1px solid var(--ce-border);
  background: var(--ce-panel);
}
.est-canvas-editor .est-ce-slidebar-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--ce-muted);
}
.est-canvas-editor .est-ce-slidebar-head .ico { display: flex; color: var(--ce-muted); }
.est-canvas-editor .est-ce-slidebar-head .ico svg { width: 14px; height: 14px; }
.est-canvas-editor .est-ce-slidebar-head .lbl { flex: 1; }
.est-canvas-editor .est-ce-slidebar-head .num {
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ce-accent);
  background: var(--ce-accent-dim);
  font-variant-numeric: tabular-nums;
}
.est-canvas-editor .est-ce-slidebar-btns {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.est-canvas-editor .est-ce-slidebar-btns .est-ce-tbtn {
  width: 100%;
  margin-bottom: 0;
  justify-content: flex-start;
  gap: 9px;
  padding: 10px 12px;
  border-radius: 10px;
  font-weight: 600;
  white-space: nowrap;
  background: var(--ce-panel-2);
  transition: background 0.13s ease, border-color 0.13s ease, color 0.13s ease, transform 0.05s ease;
}
.est-canvas-editor .est-ce-slidebar-btns .est-ce-tbtn .ico svg { width: 16px; height: 16px; }
.est-canvas-editor .est-ce-slidebar-btns .est-ce-tbtn:active:not(:disabled) { transform: translateY(1px); }

/* Duplicate — accent identity */
.est-canvas-editor #estCeBtnDup .ico { color: var(--ce-accent); }
.est-canvas-editor #estCeBtnDup:hover:not(:disabled) {
  border-color: var(--ce-accent-line);
  background: var(--ce-accent-dim);
  color: var(--ce-accent);
}
.est-canvas-editor #estCeBtnDup:hover:not(:disabled) .ico { color: var(--ce-accent); }

/* Delete — danger identity */
.est-canvas-editor #estCeBtnDel .ico { color: #f87171; }
.est-canvas-editor #estCeBtnDel:hover:not(:disabled) {
  border-color: rgba(239, 68, 68, 0.5);
  background: rgba(239, 68, 68, 0.12);
  color: #f87171;
}
.est-canvas-editor #estCeBtnDel:hover:not(:disabled) .ico { color: #f87171; }
.est-canvas-editor #estCeBtnDel:disabled .ico { color: var(--ce-muted); }

.est-canvas-editor .est-ce-slidebar-hint {
  margin-top: 8px;
  font-size: 10.5px;
  line-height: 1.4;
  color: var(--ce-faint, rgba(255, 255, 255, 0.4));
}

/* Highlight the slide the operations will act on */
.est-canvas-editor .est-ce-slide-block.active .est-ce-slide-wrap {
  box-shadow: 0 0 0 2px var(--ce-accent), 0 0 0 6px var(--ce-accent-dim);
  border-radius: 8px;
}
.est-canvas-editor .est-ce-slide-block.active .est-ce-slide-label { color: var(--ce-accent); }
.est-canvas-editor .est-ce-slide-block.active .est-ce-slide-label .num { color: var(--ce-accent); }

/* Confirm dialog for deleting a slide */
.est-cz-confirm {
  position: fixed;
  inset: 0;
  z-index: 100070;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 8, 14, 0.6);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.18s ease;
}
.est-cz-confirm.show { opacity: 1; }
.est-cz-confirm-card {
  width: min(420px, calc(100vw - 40px));
  padding: 20px;
  border-radius: 16px;
  background: var(--ce-panel);
  border: 1px solid var(--ce-border-2);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  transform: translateY(8px) scale(0.98);
  transition: transform 0.18s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}
.est-cz-confirm.show .est-cz-confirm-card { transform: none; }
.est-cz-confirm-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--ce-text);
  margin-bottom: 8px;
}
.est-cz-confirm-text {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ce-muted);
  margin-bottom: 18px;
}
.est-cz-confirm-btns {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.est-cz-confirm-btn {
  padding: 9px 15px;
  border-radius: 10px;
  border: 1px solid var(--ce-border-2);
  background: var(--ce-panel-3);
  color: var(--ce-text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, filter 0.12s ease;
}
.est-cz-confirm-btn:hover { background: var(--ce-panel-2); }
.est-cz-confirm-btn.danger {
  border: none;
  background: #ef4444;
  color: #fff;
}
.est-cz-confirm-btn.danger:hover { filter: brightness(1.08); }
.est-cz-confirm-btn.primary {
  border: none;
  background: var(--ce-accent, #4ecdc4);
  color: #04231f;
}
.est-cz-confirm-btn.primary:hover { filter: brightness(1.06); }

/* ============ HEADER BUTTONS (est-edit-header) ============ */

.est-canvas-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 8px;
  padding: 5px 12px;
  border-radius: 8px;
  border: 1px solid rgba(78, 205, 196, 0.35);
  background: rgba(78, 205, 196, 0.10);
  color: #4ecdc4;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.est-canvas-toggle:hover { background: rgba(78, 205, 196, 0.18); }
.est-canvas-toggle.off {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.55);
}
.est-canvas-toggle.off:hover { color: rgba(255, 255, 255, 0.88); }

#estRailToggle { margin-left: auto; }

/* ============ MODAL LAYOUT OVERRIDES ============ */

#modal-estimate-edit.est-canvas-mode .est-modal-content {
  padding: 0;
  height: calc(100% - 52px);
  min-height: 0;
  overflow: hidden;
}
#modal-estimate-edit.est-canvas-mode .est-edit-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 100vh;
}

/* ============ SITE CHROME HIDING (editor focus mode) ============ */

body.site-est-editor-focus.site-desktop-on:not(.site-est-editor-rail-open) .site-rail-col {
  flex: 0 0 0 !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  border: none;
  margin: 0;
  padding: 0;
}
body.site-est-editor-focus.site-desktop-on:not(.site-est-editor-rail-open) .site-grip--col {
  display: none !important;
}
body.site-est-editor-focus #siteMainPex,
body.site-est-editor-focus .site-main-pex {
  display: none !important;
  visibility: hidden !important;
}
body.site-est-editor-focus #siteMain {
  --site-pex-h: 0px;
}

/* ============ INLINE CROP ============
   The crop UI is positioned (in JS) directly over the photo in its zone, so
   there is no separate dialog window. */

.est-ce-crop-layer {
  position: fixed;
  z-index: 1580;
  overflow: hidden;          /* clips the darkening shadow to the photo */
  pointer-events: none;      /* only intercepts while cropping (.show) */
  opacity: 0;
  transition: opacity 0.15s ease;
}
.est-ce-crop-layer.show { opacity: 1; pointer-events: auto; }

.est-ce-crop-rect {
  position: absolute;
  box-sizing: border-box;
  border: 1.5px solid rgba(255, 255, 255, 0.96);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55);
  cursor: move;
}
.est-ce-crop-rect.dragging { cursor: grabbing; }

/* rule-of-thirds grid */
.est-ce-crop-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4)),
    linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4)),
    linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4)),
    linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4));
  background-repeat: no-repeat;
  background-size: 100% 1px, 100% 1px, 1px 100%, 1px 100%;
  background-position: 0 33.33%, 0 66.66%, 33.33% 0, 66.66% 0;
}
.est-ce-crop-rect:hover .est-ce-crop-grid,
.est-ce-crop-rect.dragging .est-ce-crop-grid { opacity: 1; }

.est-ce-crop-size {
  position: absolute;
  top: 6px;
  left: 6px;
  padding: 3px 7px;
  border-radius: 6px;
  background: rgba(6, 7, 9, 0.78);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  white-space: nowrap;
}

/* handles */
.est-ce-crop-h { position: absolute; z-index: 2; }
.est-ce-crop-h.nw, .est-ce-crop-h.ne, .est-ce-crop-h.sw, .est-ce-crop-h.se {
  width: 18px;
  height: 18px;
  border: 3px solid #fff;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.7));
}
.est-ce-crop-h.nw { top: -3px; left: -3px; border-right: none; border-bottom: none; cursor: nwse-resize; }
.est-ce-crop-h.ne { top: -3px; right: -3px; border-left: none; border-bottom: none; cursor: nesw-resize; }
.est-ce-crop-h.sw { bottom: -3px; left: -3px; border-right: none; border-top: none; cursor: nesw-resize; }
.est-ce-crop-h.se { bottom: -3px; right: -3px; border-left: none; border-top: none; cursor: nwse-resize; }
.est-ce-crop-h.n, .est-ce-crop-h.s { left: 50%; width: 40px; height: 16px; transform: translateX(-50%); cursor: ns-resize; }
.est-ce-crop-h.e, .est-ce-crop-h.w { top: 50%; width: 16px; height: 40px; transform: translateY(-50%); cursor: ew-resize; }
.est-ce-crop-h.n { top: -8px; }
.est-ce-crop-h.s { bottom: -8px; }
.est-ce-crop-h.e { right: -8px; }
.est-ce-crop-h.w { left: -8px; }
.est-ce-crop-h.n::after, .est-ce-crop-h.s::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 26px; height: 3px; border-radius: 3px;
  background: #fff; box-shadow: 0 0 2px rgba(0, 0, 0, 0.7);
}
.est-ce-crop-h.e::after, .est-ce-crop-h.w::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 3px; height: 26px; border-radius: 3px;
  background: #fff; box-shadow: 0 0 2px rgba(0, 0, 0, 0.7);
}

/* floating crop action bar (positioned under the photo) */
.est-ce-crop-bar {
  position: fixed;
  z-index: 1610;
  display: none;
  align-items: center;
  gap: 8px;
  padding: 6px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 45%), rgba(20, 21, 26, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.13);
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
}
.est-ce-crop-bar.show {
  display: flex;
  animation: est-ce-ann-in 0.16s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.est-ce-crop-ratios {
  display: flex;
  gap: 3px;
  padding: 3px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
}
.est-ce-crop-ratios button {
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: rgba(255, 255, 255, 0.55);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.13s ease, color 0.13s ease, border-color 0.13s ease;
}
.est-ce-crop-ratios button:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.est-ce-crop-ratios button.on {
  color: var(--ce-accent, #4ecdc4);
  background: var(--ce-accent-dim, rgba(78, 205, 196, 0.13));
  border-color: var(--ce-accent-line, rgba(78, 205, 196, 0.45));
}
.est-ce-crop-sep {
  width: 1px;
  align-self: stretch;
  margin: 2px 0;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.14), transparent);
}
.est-ce-crop-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 13px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: transparent;
  color: rgba(255, 255, 255, 0.88);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.13s ease, border-color 0.13s ease, color 0.13s ease, transform 0.1s ease, filter 0.13s ease;
}
.est-ce-crop-btn svg { width: 15px; height: 15px; }
.est-ce-crop-btn.ghost:hover { background: rgba(255, 255, 255, 0.07); }
.est-ce-crop-btn.primary {
  border-color: transparent;
  background: linear-gradient(180deg, var(--ce-accent, #4ecdc4), #38b2a8);
  color: #06231f;
}
.est-ce-crop-btn.primary:hover { filter: brightness(1.07); }
.est-ce-crop-btn:active { transform: translateY(1px); }

/* hide the annotation toolbar while cropping */
body.est-ce-cropping .est-ce-ann-toolbar { display: none !important; }

/* ============================================================
   Slide-zone editor (canvas)
   ============================================================ */
.est-canvas-editor #estCeBtnZones.active {
  border-color: var(--ce-accent-line);
  background: var(--ce-accent-dim);
  color: var(--ce-accent);
}
/* While editing zones, hide the annotation toolbar and soften the tool list */
.est-canvas-editor.cz-editing .est-ce-ann-toolbar { display: none !important; }

/* Interactive overlay that sits on top of the active slide */
.est-cz-layer {
  position: absolute;
  inset: 0;
  z-index: 40;
  cursor: crosshair;
}
.est-cz-zone {
  position: absolute;
  box-sizing: border-box;
  border: 2px dashed var(--cz, #4ecdc4);
  border-radius: 4px;
  background: color-mix(in srgb, var(--cz, #4ecdc4) 10%, transparent);
  cursor: move;
  transition: background 0.1s ease, box-shadow 0.1s ease;
}
.est-cz-zone:hover { background: color-mix(in srgb, var(--cz, #4ecdc4) 16%, transparent); }
.est-cz-zone.selected {
  border-style: solid;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cz, #4ecdc4) 35%, transparent);
  background: color-mix(in srgb, var(--cz, #4ecdc4) 18%, transparent);
}
.est-cz-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
  border-radius: 2px;
  pointer-events: none;
}
.est-cz-label {
  position: absolute;
  top: 4px;
  left: 4px;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  color: #fff;
  background: var(--cz, #4ecdc4);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  white-space: nowrap;
  cursor: text;
  user-select: none;
}
.est-cz-label-input {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 60%;
  padding: 2px 6px;
  border: 2px solid var(--cz, #4ecdc4);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  color: #0b0e16;
  background: #fff;
  outline: none;
  z-index: 3;
}
.est-cz-handle {
  position: absolute;
  width: 12px;
  height: 12px;
  background: #fff;
  border: 2px solid var(--cz, #4ecdc4);
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  z-index: 2;
}
.est-cz-handle.h-nw { top: -6px; left: -6px; cursor: nwse-resize; }
.est-cz-handle.h-ne { top: -6px; right: -6px; cursor: nesw-resize; }
.est-cz-handle.h-sw { bottom: -6px; left: -6px; cursor: nesw-resize; }
.est-cz-handle.h-se { bottom: -6px; right: -6px; cursor: nwse-resize; }
.est-cz-handle.h-n { top: -6px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.est-cz-handle.h-s { bottom: -6px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.est-cz-handle.h-w { top: 50%; left: -6px; transform: translateY(-50%); cursor: ew-resize; }
.est-cz-handle.h-e { top: 50%; right: -6px; transform: translateY(-50%); cursor: ew-resize; }
.est-cz-draw {
  position: absolute;
  box-sizing: border-box;
  border: 2px dashed #4ecdc4;
  border-radius: 4px;
  background: rgba(78, 205, 196, 0.14);
  pointer-events: none;
}

/* Floating zone-editor toolbar (top-center of the canvas viewport) */
.est-cz-bar {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1600;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 9px 11px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--ce-panel-2) 92%, transparent);
  border: 1px solid var(--ce-border-2);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  animation: est-ce-ann-in 0.16s cubic-bezier(0.2, 0.9, 0.3, 1.2);
  max-width: calc(100% - 24px);
}
.est-cz-bar-main {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  justify-content: center;
}
.est-cz-bar-title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ce-text);
  padding-right: 2px;
}
.est-cz-bar-title svg { width: 16px; height: 16px; color: var(--ce-accent); }
.est-cz-count {
  min-width: 20px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 12px;
  text-align: center;
  color: var(--ce-accent);
  background: var(--ce-accent-dim);
}
.est-cz-sep {
  width: 1px;
  align-self: stretch;
  margin: 1px 2px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.16), transparent);
}
.est-cz-presets {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
}
.est-cz-chip {
  padding: 6px 11px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--ce-muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.est-cz-chip:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.est-cz-chip.active {
  color: var(--ce-accent);
  background: var(--ce-accent-dim);
  border-color: var(--ce-accent-line);
}
.est-cz-chip .std {
  margin-left: 5px;
  padding: 1px 5px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fbbf24;
  background: color-mix(in srgb, #fbbf24 16%, transparent);
  vertical-align: middle;
}
.est-cz-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 10px;
  border: 1px solid var(--ce-border-2);
  background: var(--ce-panel-3);
  color: var(--ce-text);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, filter 0.12s ease, transform 0.05s ease;
}
.est-cz-btn svg { width: 15px; height: 15px; }
.est-cz-btn .star { color: #fbbf24; font-size: 14px; line-height: 1; }
.est-cz-btn:hover { background: var(--ce-panel-2); border-color: var(--ce-accent-line); }
.est-cz-btn:active { transform: translateY(1px); }
.est-cz-btn.ghost { background: transparent; }
.est-cz-btn.primary {
  border: none;
  color: #06231f;
  background: linear-gradient(180deg, var(--ce-accent), rgba(78, 205, 196, 0.72));
  font-weight: 700;
}
.est-cz-btn.primary:hover { filter: brightness(1.07); }
.est-cz-hint {
  text-align: center;
  font-size: 11px;
  color: var(--ce-muted);
}
.est-cz-hint kbd {
  padding: 1px 5px;
  border-radius: 4px;
  border: 1px solid var(--ce-border-2);
  background: rgba(255, 255, 255, 0.05);
  font-family: inherit;
  font-size: 10px;
}

/* Saved-presets modal */
.est-cz-presets-modal {
  /* Self-contained palette: the modal is appended to <body>, OUTSIDE the
     .est-canvas-editor scope, so it must NOT rely on inherited --ce-* vars
     (that made the card transparent with unreadable white text). */
  --ce-bg: #101114;
  --ce-panel: #16171c;
  --ce-panel-2: #1c1d23;
  --ce-panel-3: #24252c;
  --ce-border: rgba(255, 255, 255, 0.08);
  --ce-border-2: rgba(255, 255, 255, 0.14);
  --ce-text: rgba(255, 255, 255, 0.9);
  --ce-muted: rgba(255, 255, 255, 0.55);
  --ce-accent: #4ecdc4;
  --ce-accent-dim: rgba(78, 205, 196, 0.14);
  --ce-accent-line: rgba(78, 205, 196, 0.45);
  position: fixed;
  inset: 0;
  z-index: 100060;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 8, 14, 0.66);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.2s ease;
  color: var(--ce-text);
  font-size: 14px;
}
.est-cz-presets-modal *, 
.est-cz-presets-modal *::before,
.est-cz-presets-modal *::after { box-sizing: border-box; }
.est-cz-presets-modal.show { opacity: 1; }
.est-cz-presets-card {
  width: min(680px, calc(100vw - 40px));
  max-height: min(84vh, 780px);
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  background: var(--ce-panel);
  border: 1px solid var(--ce-border-2);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  transform: translateY(8px) scale(0.98);
  transition: transform 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.1);
  overflow: hidden;
}
.est-cz-presets-modal.show .est-cz-presets-card { transform: none; }
.est-cz-presets-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ce-text);
  border-bottom: 1px solid var(--ce-border);
}
.est-cz-presets-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.est-cz-presets-title .star { color: #fbbf24; font-size: 15px; }
.est-cz-presets-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--ce-muted);
  cursor: pointer;
}
.est-cz-presets-close svg { width: 16px; height: 16px; }
.est-cz-presets-close:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
/* ── Built-in layout picker ──────────────────────────────────── */
.est-cz-presets-note {
  padding: 12px 18px 4px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ce-muted);
}
.est-cz-presets-body {
  overflow-y: auto;
  padding: 8px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.est-cz-group {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.est-cz-group-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ce-accent);
}
.est-cz-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}
.est-cz-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid var(--ce-border-2);
  background: var(--ce-panel-2);
  color: var(--ce-text);
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease, transform 0.06s ease;
}
.est-cz-tile:hover {
  border-color: var(--ce-accent-line);
  background: var(--ce-panel-3);
}
.est-cz-tile:active { transform: translateY(1px); }
.est-cz-tile .est-cz-prev { width: 100%; }
.est-cz-tile-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ce-muted);
  text-align: center;
  line-height: 1.25;
}
.est-cz-tile:hover .est-cz-tile-label { color: var(--ce-text); }

/* ── Zone-layout mini preview thumbnail ──────────────────────── */
.est-cz-prev {
  position: relative;
  width: 88px;
  aspect-ratio: 16 / 9;
  flex-shrink: 0;
  border-radius: 7px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.02)),
    var(--ce-panel-3, #1a1f2b);
  border: 1px solid var(--ce-border-2);
  overflow: hidden;
}
.est-cz-prev-zone {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  background: color-mix(in srgb, var(--ce-accent, #4ecdc4) 26%, transparent);
  border: 1px solid color-mix(in srgb, var(--ce-accent, #4ecdc4) 60%, transparent);
  box-sizing: border-box;
}
.est-cz-prev-zone i {
  font-size: 9px;
  font-weight: 700;
  font-style: normal;
  color: #eafff9;
  line-height: 1;
}
.est-cz-prev-none {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--ce-muted);
}