/* FAB Button — hidden, replaced by inline add button */
#fab-estimates { display: none; }

/* Full-width add presentation button */
.est-add-presentation-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px 16px;
  margin-bottom: 8px;
  border: 1.5px dashed rgba(78,205,196,0.4);
  border-radius: 10px;
  background: rgba(78,205,196,0.06);
  color: #4ecdc4;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.est-add-presentation-btn:hover {
  background: rgba(78,205,196,0.12);
  border-color: rgba(78,205,196,0.6);
}
.est-add-presentation-btn:active { transform: scale(0.98); }
.est-add-presentation-btn svg { flex-shrink: 0; }
.est-add-btn-dragover {
  background: rgba(78,205,196,0.18) !important;
  border-color: #4ecdc4 !important;
  border-style: solid !important;
}
.est-list-dragover {
  outline: 2px dashed rgba(78,205,196,0.55);
  outline-offset: -6px;
  background: rgba(78,205,196,0.04);
}
#estListCurrent.est-list-dragover {
  outline-color: rgba(251,191,36,0.55);
  background: rgba(251,191,36,0.04);
  border-radius: 12px;
  transition: background 0.15s;
}
.est-add-btn-loading {
  pointer-events: none;
  opacity: 0.7;
  animation: est-add-pulse 1s ease-in-out infinite;
}
@keyframes est-add-pulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}
.est-add-btn-success {
  border-color: #22c55e !important;
  background: rgba(34,197,94,0.12) !important;
  color: #4ade80 !important;
}
.est-add-btn-error {
  border-color: #ef4444 !important;
  background: rgba(239,68,68,0.1) !important;
  color: #f87171 !important;
}

/* Modal Overlay (Upload Equipment) */
.est-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.est-modal-overlay.show {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

/* Modal for Upload (Small) — legacy fallback */
.est-modal-window-small {
  width: 90%; max-width: 340px;
  background: #16161b; border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7);
  display: flex; flex-direction: column; overflow: hidden;
  pointer-events: none;
  transform: translateY(15px) scale(0.98);
  transition: transform 0.25s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
.est-modal-overlay.show .est-modal-window-small {
  transform: translateY(0) scale(1); pointer-events: auto;
}

/* ---- Upload Estimate Card (redesign) ---- */
.est-upload-card {
  position: relative;
  width: 90%; max-width: 320px;
  background: linear-gradient(170deg, #151518 0%, #111114 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 22px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(255, 255, 255, 0.05);
  padding: 28px 24px 22px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  pointer-events: none;
  transform: translateY(14px) scale(0.97);
  transition: transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28), opacity 0.25s;
  opacity: 0;
}
.est-modal-overlay.show .est-upload-card {
  transform: translateY(0) scale(1);
  pointer-events: auto; opacity: 1;
}

.est-upload-close {
  position: absolute; top: 12px; right: 12px;
  width: 30px; height: 30px; border-radius: 8px;
  border: 1px solid rgba(231, 76, 60, 0.2);
  background: rgba(231, 76, 60, 0.08); color: #e74c3c;
  font-size: 16px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.2s;
}
.est-upload-close:hover { background: #e74c3c; color: #fff; border-color: #e74c3c; }

.est-upload-icon-area { display: flex; justify-content: center; }
.est-upload-circle {
  width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(135deg, rgba(78,205,196,0.15), rgba(69,183,209,0.1));
  border: 1.5px solid rgba(78,205,196,0.25);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 24px rgba(78,205,196,0.1);
}
.est-upload-circle-icon { font-size: 28px; line-height: 1; }

.est-upload-title {
  font-size: 17px; font-weight: 700; color: #fff;
  text-align: center; letter-spacing: 0.2px;
}
.est-upload-hint {
  font-size: 12px; color: rgba(255,255,255,0.4);
  text-align: center; margin-top: -6px;
}

.est-upload-form { display: flex; flex-direction: column; gap: 12px; width: 100%; }

.est-upload-dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  width: 100%; padding: 22px 16px; box-sizing: border-box;
  border: 2px dashed rgba(167,119,227,0.3);
  border-radius: 14px;
  background: rgba(167,119,227,0.06);
  cursor: pointer; transition: all 0.25s;
}
.est-upload-dropzone:hover {
  border-color: rgba(167,119,227,0.55);
  background: rgba(167,119,227,0.12);
}
.est-upload-dropzone:active { transform: scale(0.98); }
.est-upload-dropzone input { display: none; }
.est-upload-dropzone-icon {
  font-size: 26px; color: #C9A0FF; line-height: 1; font-weight: 300;
}
.est-upload-dropzone-text {
  font-size: 13px; color: #C9A0FF; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
/* When file selected */
.est-upload-dropzone.has-file {
  border-color: rgba(78,205,196,0.4);
  background: rgba(78,205,196,0.08);
}
.est-upload-dropzone.has-file .est-upload-dropzone-icon { color: #4ECDC4; }
.est-upload-dropzone.has-file .est-upload-dropzone-text { color: #4ECDC4; }

.est-upload-submit {
  width: 100%; padding: 13px; border: none; border-radius: 14px;
  background: linear-gradient(135deg, #4ECDC4 0%, #45B7AA 50%, #3CA89D 100%);
  color: #0e0e12; font-size: 14px; font-weight: 700; cursor: pointer;
  box-shadow: 0 6px 18px rgba(78, 205, 196, 0.15);
  transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
}
.est-upload-submit:hover { filter: brightness(1.06); box-shadow: 0 8px 24px rgba(78, 205, 196, 0.2); }
.est-upload-submit:active { transform: translateY(1px); }
.est-upload-submit:disabled { opacity: 0.6; cursor: wait; }
.est-upload-submit.btn-processing { background: linear-gradient(135deg, #f1c40f, #f39c12) !important; }
.est-upload-submit.btn-success { background: linear-gradient(135deg, #2ecc71, #27ae60) !important; }
.est-upload-submit.btn-error { background: linear-gradient(135deg, #e74c3c, #c0392b) !important; color: #fff; }

/* Modal for Edit (Large - fills parent overlay-card) */
.est-modal-window-large {
  position: absolute;
  inset: 0;
  background: #111114; 
  border: 1px solid rgba(96, 165, 250, 0.1);
  border-radius: 18px; 
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  display: flex; 
  flex-direction: column; 
  overflow: hidden; 
  pointer-events: none;
  transition: transform 0.25s ease, opacity 0.25s ease;
  opacity: 0;
  transform: translateY(20px);
}

.est-modal-overlay.show .est-modal-window-large {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Common Header Styles for both */
.est-modal-header {
  height: 52px; 
  flex-shrink: 0; 
  display: flex; 
  align-items: center; 
  justify-content: center;
  position: relative;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%);
  border-bottom: 1px solid rgba(96, 165, 250, 0.12); 
  padding: 0 48px;
}

.est-modal-title {
  font-weight: 700; 
  font-size: 16px; 
  color: #93bbfc; 
  letter-spacing: normal;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.est-modal-close {
  position: absolute; 
  right: 12px; 
  top: 50%; 
  transform: translateY(-50%);
  width: 32px; 
  height: 32px; 
  border-radius: 8px; 
  border: 1px solid rgba(231, 76, 60, 0.2);
  background: rgba(231, 76, 60, 0.1); 
  color: #e74c3c; 
  font-size: 18px;
  display: flex; 
  align-items: center; 
  justify-content: center; 
  cursor: pointer; 
  z-index: 10;
  opacity: 1;
  transition: all 0.2s;
}

.est-modal-close:hover {
  background: #e74c3c;
  color: #fff;
}

/* Content Styles */
.est-modal-content {
  padding: 24px;
  color: #eee;
  text-align: center;
  font-size: 14px;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow-y: auto;
}
/* Edit overlay inherits same content style */
.est-edit-card .est-modal-content {
  padding: 16px;
  overflow-x: hidden;
  overflow-y: auto;
  align-items: stretch;
  min-height: 0;
}

/* ============================================ */
/* INDEPENDENT EDIT OVERLAY (inside overlay-card) */
/* ============================================ */
.est-edit-overlay {
  position: absolute; inset: 0; z-index: 1600;
  display: none; pointer-events: none;
  border-radius: inherit;
}
.est-edit-overlay.show { display: block; }

.est-edit-card {
  position: absolute; inset: 0;
  background: #16161b;
  border: 1px solid rgba(96,165,250,0.15);
  border-radius: inherit;
  box-shadow: 0 20px 50px rgba(0,0,0,0.55), 0 0 0 1px rgba(96,165,250,0.05);
  display: flex; flex-direction: column; overflow: hidden;
  pointer-events: auto;
  transition: max-width 0.35s cubic-bezier(0.4,0,0.2,1),
              left 0.35s cubic-bezier(0.4,0,0.2,1),
              right 0.35s cubic-bezier(0.4,0,0.2,1),
              transform 0.35s cubic-bezier(0.4,0,0.2,1);
}

/* Edit overlay header */
.est-edit-header {
  height: 52px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  background: linear-gradient(180deg, rgba(96,165,250,0.06) 0%, rgba(96,165,250,0.01) 100%);
  border-bottom: 1px solid rgba(96,165,250,0.15);
  border-radius: inherit;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  padding: 0 86px;
}

/* Title — no marquee, ellipsis instead */
.est-edit-header .est-modal-title {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 0 8px;
}

/* --- EDIT MODAL LAYOUT --- */
.est-edit-layout {
  display: flex;
  width: 100%;
  height: 100%;
  gap: 12px;
  overflow: hidden;
  transition: gap 0.3s;
}
.est-section-content.hidden,
.est-category-content.hidden,
.est-eq-items.hidden,
.est-zone-items.hidden { display: none; }
.est-category-content, .est-section-content { display: block; }
.est-category-content { padding: 4px 0 2px 0; }

.est-edit-left {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(96,165,250,0.04) 0%, rgba(96,165,250,0.01) 100%);
  border-radius: 12px;
  border: 1px solid rgba(96, 165, 250, 0.1);
  overflow: hidden;
}

/* Preview Column */
.est-edit-right {
    flex: 2 1 0;
    min-width: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(0,0,0,0.15) 100%);
    border-radius: 12px;
    border: 1px solid rgba(96,165,250,0.08);
    display: flex;
    flex-direction: column;
    overflow: hidden; 
    position: relative;
    padding: 0;
}

.est-preview-container {
    flex: 1;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    box-sizing: border-box; 
    background: rgba(0,0,0,0.2);
}
.est-preview-container::-webkit-scrollbar { width: 4px; }
.est-preview-container::-webkit-scrollbar-track { background: transparent; }
.est-preview-container::-webkit-scrollbar-thumb { background: rgba(96,165,250,0.2); border-radius: 4px; }

.est-slide-wrapper {
    width: 100%;
    max-width: 800px;
    aspect-ratio: 16 / 9;
    position: relative;
    background: #0a0a0f;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.06);
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
    flex-shrink: 0;
    cursor: zoom-in;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    overflow: hidden;
}

.est-slide-wrapper:hover {
    transform: scale(1.015);
    z-index: 10;
    border-color: rgba(96,165,250,0.2);
    box-shadow: 0 8px 24px rgba(0,0,0,0.5), 0 0 0 1px rgba(96,165,250,0.08);
}

/* Single-date soprovod slide: hide empty right half of dual-layout JPG */
.est-slide-wrapper.est-slide-single-zone .est-slide-content {
    overflow: hidden;
}
.est-slide-wrapper.est-slide-single-zone .est-slide-content img {
    width: 200%;
    max-width: none;
    object-fit: contain;
    object-position: left center;
}
.est-fsi-preview.est-slide-single-zone .est-slide-wrapper {
    overflow: hidden;
}
.est-fsi-preview.est-slide-single-zone .est-slide-wrapper img {
    width: 200%;
    max-width: none;
    object-fit: contain;
    object-position: left center;
}

/* Fullscreen Overlay for Slide Zoom */
/* ========= SLIDE ZOOM OVERLAY (inside .est-edit-card) ========= */
.est-slide-zoom-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10,10,14,0.97);
    z-index: 200;
    display: flex;
    flex-direction: column;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    border-radius: 18px;
    overflow: hidden;
}
.est-slide-zoom-overlay.show {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}

/* -- Single slide zoom (dblclick) -- */
.est-slide-zoom-wrapper {
    width: 100%;
    height: auto;
    max-width: 95%;
    max-height: 95%;
    aspect-ratio: 16 / 9;
    position: relative;
    cursor: zoom-out;
}
.est-slide-zoom-wrapper .est-slide-content {
    transform-origin: center center;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}
.est-slide-zoom-wrapper .est-slide-content.est-slide-img-mode {
    width: 100%;
    height: 100%;
    top: 0; left: 0;
    transform-origin: 0 0;
}

/* -- Multi-view (openItemZoom) -- */
.est-slide-zoom-wrapper.est-zoom-multi {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    flex: 1;
    min-height: 0;
    width: 100%;
    max-width: none;
    max-height: none;
    aspect-ratio: auto;
    cursor: default;
    position: relative;
}
.est-slide-zoom-wrapper.est-zoom-multi .est-zoom-slide-frame .est-slide-content {
    position: absolute;
    top: 0; left: 0;
    transform: none;
    transform-origin: 0 0;
}
.est-slide-zoom-wrapper.est-zoom-multi .est-zoom-slide-frame .est-slide-content.est-slide-img-mode {
    width: 100%;
    height: 100%;
}

/* Sticky header bar inside zoom */
.est-zoom-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: linear-gradient(180deg, rgba(96,165,250,0.07) 0%, rgba(10,10,14,0.95) 100%);
    border-bottom: 1px solid rgba(96,165,250,0.12);
    flex-shrink: 0;
    z-index: 10;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.est-zoom-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid rgba(96,165,250,0.2);
    background: rgba(96,165,250,0.06);
    color: #93c5fd;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}
.est-zoom-back-btn:hover {
    background: rgba(96,165,250,0.15);
    border-color: rgba(96,165,250,0.35);
    transform: translateX(-2px);
}
.est-zoom-title-area {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; align-items: center; gap: 1px;
}
.est-zoom-item-title {
    font-size: 12px; font-weight: 700; color: #dde;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.est-zoom-slide-count {
    font-size: 10px; color: #556; font-weight: 500;
}
.est-zoom-close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px; height: 30px;
    border-radius: 8px;
    border: 1px solid rgba(231,76,60,0.2);
    background: rgba(231,76,60,0.06);
    color: #e57373;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}
.est-zoom-close-btn:hover {
    background: rgba(231,76,60,0.15);
    border-color: rgba(231,76,60,0.4);
    color: #ef5350;
}

/* Scrollable area */
.est-zoom-scroll-container {
    flex: 1;
    min-height: 0;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px 12px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    box-sizing: border-box;
    background: rgba(0,0,0,0.15);
}
.est-zoom-scroll-container::-webkit-scrollbar { width: 4px; }
.est-zoom-scroll-container::-webkit-scrollbar-track { background: transparent; }
.est-zoom-scroll-container::-webkit-scrollbar-thumb { background: rgba(96,165,250,0.15); border-radius: 4px; }

/* Slide card */
.est-zoom-item-block {
    width: 100%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    overflow: hidden;
    box-sizing: border-box;
    transition: border-color 0.25s, box-shadow 0.25s;
    animation: est-card-in 0.3s ease both;
}
.est-zoom-item-block:hover {
    border-color: rgba(96,165,250,0.18);
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

/* Top actions row */
.est-zoom-controls {
    display: flex;
    gap: 8px;
    align-items: center;
    width: 100%;
    padding: 8px 10px;
    box-sizing: border-box;
}
.est-zoom-controls-top {
    order: -1;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.est-zoom-controls-bottom {
    border-top: 1px solid rgba(255,255,255,0.04);
    position: relative;
    flex-wrap: wrap;
    justify-content: center;
}

/* Slide frame */
.est-zoom-slide-frame {
    width: 100%;
    position: relative;
    background: #050508;
    transition: height 0.2s;
    max-height: calc(100vh - 340px);
    overflow: hidden;
}

/* ===== Zoom Island (iPhone Dynamic Island style) ===== */
.est-zoom-island {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    z-index: 210;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    background: rgba(18, 18, 24, 0.88);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-radius: 100px;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 4px 24px rgba(0,0,0,0.5), 0 0 0 0.5px rgba(255,255,255,0.04) inset;
    padding: 3px;
    pointer-events: auto;
    transition: opacity 0.3s;
    opacity: 0.55;
    user-select: none;
}
.est-zoom-island:hover {
    opacity: 1;
    box-shadow: 0 6px 30px rgba(0,0,0,0.6), 0 0 0 0.5px rgba(96,165,250,0.12) inset;
}
.est-zoom-island-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: rgba(255,255,255,0.6);
    font-size: 18px;
    font-weight: 300;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s, transform 0.1s;
    padding: 0;
    line-height: 1;
}
.est-zoom-island-btn:hover {
    background: rgba(96,165,250,0.18);
    color: #60a5fa;
}
.est-zoom-island-btn:active {
    transform: scale(0.82);
    background: rgba(96,165,250,0.28);
}
.est-zoom-island-btn:disabled {
    color: rgba(255,255,255,0.18);
    cursor: default;
    pointer-events: none;
}
.est-zoom-island-btn[data-z="undo"],
.est-zoom-island-btn[data-z="redo"] {
    font-size: 17px;
}
.est-zoom-island-sep {
    width: 18px;
    height: 1px;
    background: rgba(255,255,255,0.1);
    margin: 2px 0;
    flex: 0 0 auto;
}
.est-zoom-island-level {
    min-width: 40px;
    height: 32px;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,0.4);
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1px;
    border-radius: 16px;
    transition: color 0.15s, background 0.15s;
    letter-spacing: 0.3px;
}
.est-zoom-island-level:hover {
    color: rgba(255,255,255,0.7);
    background: rgba(255,255,255,0.05);
}
.est-zoom-island-level.zoom-active {
    color: rgba(96,165,250,0.9);
}
.est-zoom-scroll-container.est-zoom-scaled {
    overflow: auto;
}
.est-zoom-slide-frame .est-slide-content {
    position: absolute;
    top: 0; left: 0;
    transform-origin: 0 0;
}
.est-zoom-slide-frame:has(.est-slide-img-mode) {
    aspect-ratio: 16 / 9;
}
.est-zoom-slide-frame .est-slide-content.est-slide-img-mode {
    width: 100%;
    height: 100%;
    transform-origin: 0 0;
}

/* Action buttons */
.est-btn-action {
    height: 30px;
    padding: 0 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
    color: #aab;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
    box-sizing: border-box;
}
.est-btn-action:hover {
    transform: translateY(-1px);
}
.est-btn-action .icon { font-size: 13px; }

.btn-add-photo {
    border-color: rgba(46,204,113,0.2);
    color: #6ee7b7;
}
.btn-add-photo:hover { background: rgba(46,204,113,0.1); border-color: rgba(46,204,113,0.35); }

.btn-del-photo {
    border-color: rgba(239,68,68,0.2);
    color: #f87171;
}
.btn-del-photo:hover { background: rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.35); }

.btn-dup-slide {
    border-color: rgba(96,165,250,0.2);
    color: #93c5fd;
}
.btn-dup-slide:hover { background: rgba(96,165,250,0.1); border-color: rgba(96,165,250,0.35); }

.btn-del-slide {
    border-color: rgba(239,68,68,0.2);
    color: #f87171;
}
.btn-del-slide:hover { background: rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.35); }

.btn-close-zoom {
    border-color: rgba(255,255,255,0.1);
    color: #999;
}
.btn-close-zoom:hover { background: rgba(255,255,255,0.08); color: #fff; }

/* Controls flex sizing */
.est-zoom-controls-top .est-btn-action { flex: 0 0 auto; }
.est-zoom-controls-bottom .est-btn-action { flex: 0 0 auto; }

/* Badge in zoom controls */
.est-zoom-badge {
    font-size: 10px;
    font-weight: 700;
    color: #60a5fa;
    background: rgba(96,165,250,0.1);
    border: 1px solid rgba(96,165,250,0.15);
    padding: 2px 8px;
    border-radius: 6px;
    white-space: nowrap;
}

/* ── Delete photo zone menu ── */
.est-del-photo-menu {
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 100%;
    padding: 6px 0 2px;
    animation: est-fade-in 0.15s ease;
}
.est-del-zone-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 12px;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 7px;
    background: rgba(255,255,255,0.025);
    color: #ccd;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.est-del-zone-btn:hover:not(:disabled) {
    background: rgba(239,68,68,0.08);
    border-color: rgba(239,68,68,0.25);
    color: #f87171;
}
.est-del-zone-btn:disabled {
    opacity: 0.4;
    cursor: default;
}
.est-del-zone-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.est-del-zone-dot-empty {
    background: transparent !important;
    border: 2px solid;
    width: 6px;
    height: 6px;
}
.est-del-zone-hint {
    margin-left: auto;
    font-size: 10px;
    font-weight: 400;
    color: #666;
    font-style: italic;
}
.est-del-zone-all {
    margin-top: 3px;
    border-color: rgba(239,68,68,0.15);
    color: #f87171;
    justify-content: center;
    font-weight: 700;
    gap: 6px;
}
.est-del-zone-all:hover {
    background: rgba(239,68,68,0.12) !important;
    border-color: rgba(239,68,68,0.35) !important;
}
.est-del-zone-empty { opacity: 0.45; }

/* ── Custom Confirm Dialog ── */
.est-confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0);
    backdrop-filter: blur(0);
    opacity: 0;
    pointer-events: none;
    transition: all 0.2s ease;
}
.est-confirm-overlay.show {
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(6px);
    opacity: 1;
    pointer-events: auto;
}
.est-confirm-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 340px;
    max-width: 90%;
    padding: 28px 24px 20px;
    background: linear-gradient(165deg, #1e1e2e 0%, #16161f 100%);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 18px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04) inset;
    transform: scale(0.9) translateY(12px);
    transition: transform 0.25s cubic-bezier(.34,1.56,.64,1);
}
.est-confirm-overlay.show .est-confirm-card {
    transform: scale(1) translateY(0);
}

/* ── Upload conflict dialog (duplicate estimate name) ── */
.est-upload-conflict-overlay {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0);
    backdrop-filter: blur(0);
    opacity: 0;
    pointer-events: none;
    transition: all 0.2s ease;
}
.est-upload-conflict-overlay.show {
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(6px);
    opacity: 1;
    pointer-events: auto;
}
.est-upload-conflict-card {
    position: relative;
    width: min(380px, 92vw);
    padding: 26px 22px 20px;
    background: linear-gradient(165deg, #1e1e2e 0%, #16161f 100%);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 18px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.65);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transform: scale(0.92) translateY(10px);
    transition: transform 0.25s cubic-bezier(.34,1.56,.64,1);
}
.est-upload-conflict-overlay.show .est-upload-conflict-card {
    transform: scale(1) translateY(0);
}
.est-upload-conflict-icon { font-size: 32px; line-height: 1; margin-bottom: 2px; }
.est-upload-conflict-title {
    font-size: 16px; font-weight: 700; color: #fff; text-align: center; margin: 0;
}
.est-upload-conflict-event {
    font-size: 14px; font-weight: 600; color: #c9d1d9; text-align: center; margin: 0;
}
.est-upload-conflict-date {
    font-size: 12px; color: rgba(255,255,255,0.45); text-align: center; margin: 0;
}
.est-upload-conflict-stat {
    font-size: 12px; color: rgba(255,255,255,0.55); text-align: center; margin: 0;
}
.est-upload-conflict-stat--warn { color: #fbbf24; font-weight: 600; }
.est-upload-conflict-msg {
    font-size: 12px; color: rgba(255,255,255,0.5); text-align: center; line-height: 1.45;
    margin: 4px 0 8px; max-width: 320px;
}
.est-upload-conflict-actions {
    display: flex; flex-direction: column; gap: 8px; width: 100%; margin-top: 4px;
}
.est-upload-conflict-btn {
    width: 100%; padding: 11px 14px; border-radius: 12px; border: 1px solid transparent;
    font-size: 13px; font-weight: 700; cursor: pointer; transition: filter 0.15s, transform 0.12s;
}
.est-upload-conflict-btn:active { transform: scale(0.98); }
.est-upload-conflict-btn.primary {
    background: linear-gradient(135deg, #4ECDC4, #3CA89D);
    color: #0e0e12; border-color: rgba(78,205,196,0.3);
}
.est-upload-conflict-btn.danger {
    background: rgba(239,68,68,0.12);
    color: #fca5a5;
    border-color: rgba(239,68,68,0.35);
}
.est-upload-conflict-btn.ghost {
    background: transparent;
    color: rgba(255,255,255,0.55);
    border-color: rgba(255,255,255,0.12);
}
.est-upload-conflict-btn:hover { filter: brightness(1.08); }

.est-confirm-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(245,158,11,0.1);
    border: 1px solid rgba(245,158,11,0.15);
    margin-bottom: 4px;
}
.est-confirm-title {
    font-size: 15px;
    font-weight: 700;
    color: #eee;
    text-align: center;
}
.est-confirm-msg {
    font-size: 12.5px;
    color: #999;
    text-align: center;
    line-height: 1.5;
    margin-bottom: 8px;
}
.est-confirm-actions {
    display: flex;
    gap: 10px;
    width: 100%;
}
.est-confirm-btn {
    flex: 1;
    height: 38px;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.15s;
}
.est-confirm-cancel {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.1);
    color: #aaa;
}
.est-confirm-cancel:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.18);
    color: #ddd;
}
.est-confirm-ok {
    background: linear-gradient(135deg, rgba(239,68,68,0.2) 0%, rgba(239,68,68,0.3) 100%);
    border-color: rgba(239,68,68,0.3);
    color: #f87171;
}
.est-confirm-ok:hover {
    background: linear-gradient(135deg, rgba(239,68,68,0.3) 0%, rgba(239,68,68,0.45) 100%);
    border-color: rgba(239,68,68,0.5);
    color: #fca5a5;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(239,68,68,0.2);
}
.est-confirm-icon-info {
    background: rgba(96,165,250,0.1);
    border-color: rgba(96,165,250,0.15);
}
.est-confirm-ok-info {
    background: linear-gradient(135deg, rgba(96,165,250,0.2) 0%, rgba(96,165,250,0.3) 100%);
    border-color: rgba(96,165,250,0.3);
    color: #93c5fd;
}
.est-confirm-ok-info:hover {
    background: linear-gradient(135deg, rgba(96,165,250,0.3) 0%, rgba(96,165,250,0.45) 100%) !important;
    border-color: rgba(96,165,250,0.5) !important;
    color: #bfdbfe !important;
    box-shadow: 0 4px 12px rgba(96,165,250,0.2) !important;
}

.est-num-input {
    min-width: 50px;
    width: auto;
    flex-grow: 1;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: #fff;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    outline: none;
    margin: 0 10px !important; /* Force margin overrides */
    padding: 0 10px;
    box-sizing: border-box; /* Ensure border is included in height */
    appearance: none;
    -webkit-appearance: none;
}

.est-zone-indicator {
    position: absolute;
    border: 2px dashed rgba(255, 255, 255, 0.2);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.3);
    font-size: 14px;
    pointer-events: none;
}

.est-placed-photo {
    position: absolute;
    object-fit: contain;
    background: black; /* To hide background if transparent */
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}


.est-num-input:focus {
    border-color: #4ECDC4;
    background: rgba(255, 255, 255, 0.15);
}

/* Photo Upload Modal specific styles */
.est-photo-overlay {
    z-index: 3100;
}

.est-photo-window {
    background: linear-gradient(180deg, #111118 0%, #0c0c12 100%);
    border: 1px solid rgba(96, 165, 250, 0.12);
    /* Tight clamp for any viewport: never overflow vertically/horizontally,
       picks the smallest of: hard cap, content width budget, screen budget. */
    width: min(820px, 96vw);
    max-width: min(820px, 96vw);
    max-height: min(92vh, 92dvh);
    border-radius: 18px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04) inset;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/* New header */
.est-pm-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}
.est-pm-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,0.7);
    flex-shrink: 0;
}
.est-pm-title {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.2px;
}
.est-pm-zone-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    overflow-x: auto;
    scrollbar-width: none;
    flex-shrink: 1;
    min-width: 0;
}
.est-pm-zone-tabs::-webkit-scrollbar { display: none; }
.est-pm-zone-tab {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.55);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    flex-shrink: 0;
}
.est-pm-zone-tab:hover {
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.85);
}
.est-pm-zone-tab.active {
    background: rgba(30, 136, 229, 0.15);
    border-color: rgba(30, 136, 229, 0.35);
    color: #fff;
    box-shadow: inset 0 0 0 0.5px rgba(255,255,255,0.06);
}
.est-pm-tab-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.est-pm-tab-check {
    color: #4caf50;
    font-size: 10px;
    font-weight: 700;
    margin-left: 2px;
}
.est-pm-close {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
    margin-left: 8px;
}
.est-pm-close:hover {
    background: rgba(255,82,82,0.15);
    border-color: rgba(255,82,82,0.3);
    color: #ff8a80;
}

.est-photo-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 16px 12px;
    /* Fill remaining vertical space inside the window, but never overflow */
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.est-photo-preview-area {
    width: 100%;
    /* Keep 16:9 by default but never push the modal off-screen */
    aspect-ratio: 16 / 9;
    /* Reserve room for header (~56px) + controls (~56px) + paddings/gaps */
    max-height: calc(min(92vh, 92dvh) - 170px);
    margin: 0 auto;
    background: rgba(0, 0, 0, 0.35);
    border: 2px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    touch-action: none;
    -webkit-user-select: none; user-select: none;
    overflow: hidden;
    position: relative;
    transition: border-color 0.2s, background 0.2s;
    z-index: 1;
    flex: 1 1 auto;
    min-height: 0;
}

.est-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.55);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1000;
    transition: all 0.15s;
    font-size: 18px;
    user-select: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.est-nav-btn:hover {
    background: rgba(30, 136, 229, 0.5);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-50%) scale(1.05);
}

.est-nav-btn:active {
    transform: translateY(-50%) scale(0.95);
}

.est-nav-btn.prev { left: 10px; }
.est-nav-btn.next { right: 10px; }

.est-photo-badge {
    display: none;
}

/* Photo modal loading spinner overlay */
.est-photo-loading-overlay {
    position: absolute;
    inset: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(4px);
    border-radius: inherit;
    animation: est-fade-in 0.15s ease;
}
.est-photo-loading-overlay span {
    color: rgba(255,255,255,0.6);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.3px;
}
.est-photo-loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(255,255,255,0.12);
    border-top-color: rgba(96,165,250,0.85);
    border-radius: 50%;
    animation: est-spin 0.7s linear infinite;
}

.est-photo-preview-area:focus {
    outline: none;
    border-color: rgba(30, 136, 229, 0.35);
}

.est-transform-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    transform-origin: 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    will-change: transform;
    z-index: 2; /* Lower than nav buttons but managed properly */
}

#estPreviewImg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

#estDrawingLayer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: auto; /* Catch all events to manage them reliably */
    z-index: 50; /* Ensure on top */
}

#estDrawingLayer line {
    pointer-events: auto; /* Ensure lines are clickable */
    stroke-linecap: round;
    cursor: pointer;
    transition: stroke-width 0.1s;
}

#estDrawingLayer line:hover {
    stroke-width: 3; /* Hover effect */
}

#estDrawingLayer line.selected {
    filter: drop-shadow(0 0 2px rgba(255,255,255,0.8));
}

.est-arrow-handle {
    pointer-events: auto !important;
    cursor: grab;
    fill: white;
    stroke: #ff0000;
    stroke-width: 1;
    transition: r 0.1s;
}
.est-arrow-handle:hover {
    r: 6;
}
.est-arrow-handle:active {
    cursor: grabbing;
}

.est-upload-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: rgba(255,255,255,0.3);
    font-size: 13px;
    position: absolute;
    z-index: 10;
    pointer-events: auto;
    cursor: pointer;
    transition: color 0.2s;
}
.est-upload-placeholder:hover { color: rgba(255,255,255,0.5); }

.est-photo-preview-area:hover {
    border-color: rgba(30, 136, 229, 0.3);
    background: rgba(255, 255, 255, 0.02);
}

.est-photo-controls {
    display: flex;
    gap: 6px;
    width: 100%;
    align-items: center;
    flex-wrap: nowrap;
    padding: 8px 10px;
    background: rgba(255,255,255,0.02);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.04);
    /* If the row is too narrow, allow horizontal scroll instead of pushing
       buttons off-screen or breaking the modal layout. */
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: thin;
    flex-shrink: 0;
}
.est-photo-controls::-webkit-scrollbar { height: 6px; }
.est-photo-controls::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.12);
    border-radius: 3px;
}
.est-photo-controls > * { flex-shrink: 0; }

/* Compact mode for narrow viewports (<= 1080px) — keeps the toolbar usable
   without forcing horizontal scroll on every action. */
@media (max-width: 1080px) {
    .est-photo-controls { gap: 4px; padding: 6px 8px; }
    .est-photo-controls .est-btn-icon { width: 30px; height: 30px; }
    .est-photo-controls .est-pm-done { padding: 0 10px; height: 30px; font-size: 12px; }
    .est-control-separator { margin: 0 2px; height: 18px; }
    .est-pm-header { padding: 10px 12px; gap: 6px; }
    .est-pm-zone-tabs { gap: 4px; }
    .est-pm-zone-tab { padding: 4px 8px; font-size: 11px; }
}
@media (max-width: 720px) {
    .est-photo-controls { padding: 5px 6px; }
    .est-photo-controls .est-btn-icon { width: 28px; height: 28px; }
    .est-photo-window { width: 100vw; max-width: 100vw; max-height: 100dvh; border-radius: 0; }
}

.est-control-separator {
    width: 1px;
    height: 22px;
    background: rgba(255, 255, 255, 0.1);
    margin: 0 3px;
    flex-shrink: 0;
}

.est-btn-icon {
    width: 38px;
    height: 36px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255,255,255,0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
    box-sizing: border-box;
    padding: 0;
}

.est-btn-icon:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.est-btn-icon.active {
    background: rgba(30, 136, 229, 0.2);
    border-color: rgba(30, 136, 229, 0.35);
    color: #fff;
    box-shadow: 0 0 8px rgba(30, 136, 229, 0.15);
}

.btn-arrow-num {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

/* Numbered rectangle button — same icon language as "arrow with number":
   yellow fill, red border, black digit — visually matches what the tool draws. */
.btn-num-box {
    position: relative;
}
.btn-num-box .num-box-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 16px;
    border-radius: 3px;
    background: #ffeb3b;
    border: 1.5px solid #ff3b30;
    color: #000;
    font-weight: 800;
    font-size: 11px;
    line-height: 1;
    box-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

/* SVG numbered rectangle (the actual annotation drawn on the photo) */
.est-numbox-rect {
    fill: #ffeb3b;
    stroke: #ff3b30;
    stroke-width: 1.5;
    cursor: grab;
    transition: filter 0.1s, stroke-width 0.1s;
}
.est-numbox-rect:hover { filter: drop-shadow(0 0 4px rgba(255,59,48,0.55)); }
.est-numbox-text {
    fill: #000;
    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    font-weight: 800;
    font-size: 12px;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}
.est-numbox-group.selected .est-numbox-rect {
    stroke-width: 2.25;
    filter: drop-shadow(0 0 3px rgba(255,255,255,0.7));
}

/* Multi-select highlight (Shift+click / Ctrl+A in photo modal) */
line.est-arrow-multi {
    stroke: #38bdf8 !important;
    stroke-dasharray: 4 3;
    filter: drop-shadow(0 0 3px rgba(56,189,248,0.8));
}
.est-numbox-group.est-arrow-multi .est-numbox-rect {
    stroke: #38bdf8 !important;
    stroke-dasharray: 3 2;
    filter: drop-shadow(0 0 3px rgba(56,189,248,0.7));
}

.btn-success {
    background: rgba(46, 204, 113, 0.15);
    color: #66bb6a;
    border: 1px solid rgba(46, 204, 113, 0.3);
}
.btn-success:hover {
    background: rgba(46, 204, 113, 0.25);
    color: #81c784;
}

.est-pm-done {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: auto !important;
    padding: 0 16px;
    height: 36px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    background: rgba(76, 175, 80, 0.15);
    border: 1px solid rgba(76, 175, 80, 0.35);
    color: #81c784;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.est-pm-done:hover {
    background: rgba(76, 175, 80, 0.25);
    color: #a5d6a7;
}
.est-slide-content {
    width: 1280px;
    height: 720px;
    background: white;
    color: black;
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
    overflow: hidden;
    /* Match the PPTX slide typography (all slide text is Times New Roman). */
    font-family: "Times New Roman", Times, serif;
}
.est-slide-content.est-slide-img-mode {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0; left: 0;
    transform-origin: 0 0;
    background: #0a0a0f;
    font-family: "Times New Roman", Times, serif;
    color: black;
}

.est-soprovod-slide-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    appearance: none;
    display: block;
}

.est-role-group {
    padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    margin-bottom: 10px;
}

.est-role-title {
    font-weight: 700;
    color: #c0c0c6;
    font-size: 13px;
    margin-bottom: 6px;
}

.est-role-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
}

.est-role-item {
    padding: 4px 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
    color: #ddd;
    font-size: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    cursor: pointer;
    transition: background 0.2s;
}

.est-role-item:hover {
    background: rgba(255, 255, 255, 0.15);
}

.est-photo-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.est-photo-layer img {
    position: absolute;
    object-fit: contain;
    background: transparent;
}

.est-photo-layer svg {
    position: absolute;
    inset: 0;
    overflow: visible;
}

/* --- Slide photo comment button & popup --- */
.est-photo-cmt-trigger {
    position: absolute; transform: translate(-50%, -100%);
    width: 22px; height: 22px; border-radius: 50%;
    background: rgba(167,139,250,0.35); backdrop-filter: blur(8px);
    border: 1.5px solid rgba(167,139,250,0.5);
    color: #ddd6fe; cursor: default; padding: 0; z-index: 5;
    display: flex; align-items: center; justify-content: center;
    pointer-events: auto; transition: all 0.2s;
    box-shadow: 0 2px 10px rgba(167,139,250,0.2), 0 0 6px rgba(167,139,250,0.15);
    animation: estCmtPulse 2.5s ease-in-out infinite;
}
@keyframes estCmtPulse {
    0%, 100% { box-shadow: 0 2px 10px rgba(167,139,250,0.2), 0 0 6px rgba(167,139,250,0.15); }
    50% { box-shadow: 0 2px 14px rgba(167,139,250,0.35), 0 0 10px rgba(167,139,250,0.25); }
}
.est-photo-cmt-trigger:hover {
    background: rgba(167,139,250,0.55); color: #fff;
    border-color: rgba(167,139,250,0.8);
    transform: translate(-50%, -100%) scale(1.15);
    animation: none;
}
.est-photo-cmt-popup {
    position: fixed; z-index: 99999;
    background: linear-gradient(135deg, #1e1e2a 0%, #1a1a26 100%);
    border: 1px solid rgba(167,139,250,0.3);
    border-radius: 12px; padding: 10px 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.55), 0 0 0 1px rgba(167,139,250,0.08), 0 0 20px rgba(167,139,250,0.06);
    white-space: nowrap;
    animation: estCmtPopIn 0.15s ease;
    pointer-events: none;
}
@keyframes estCmtPopIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}
.est-photo-cmt-popup::after {
    content: ''; position: absolute;
    bottom: -6px; left: 50%;
    width: 10px; height: 10px; background: #1c1c24;
    border-right: 1px solid rgba(167,139,250,0.25);
    border-bottom: 1px solid rgba(167,139,250,0.25);
    transform: translateX(-50%) rotate(45deg);
}
.est-photo-cmt-popup.below::after {
    bottom: auto; top: -6px;
    border-right: none; border-bottom: none;
    border-left: 1px solid rgba(167,139,250,0.25);
    border-top: 1px solid rgba(167,139,250,0.25);
}
.est-photo-cmt-text {
    font-size: 12px; line-height: 1.4; color: rgba(232,232,240,0.95);
    white-space: nowrap; letter-spacing: 0.2px;
}

/* ========= Slide Viewer (inside .est-edit-card) ========= */
.est-slide-viewer {
    position: absolute; inset: 0; z-index: 250;
    background: rgba(10,10,16,0.96);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity 0.2s ease;
}
.est-slide-viewer.show { opacity: 1; pointer-events: auto; }
.est-slide-viewer-window {
    display: flex; flex-direction: column;
    width: 92%; max-height: 92%;
    max-width: 960px;
    position: relative;
}
.est-slide-viewer-header {
    display: flex; align-items: center; height: 38px;
    padding: 0 6px 0 14px;
    background: #1a1a22; border: 1px solid rgba(255,255,255,0.08);
    border-bottom: none;
    border-radius: 10px 10px 0 0;
}
.est-slide-viewer-title {
    flex: 1; text-align: center;
    font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.8);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    padding: 0 8px;
}
.est-slide-viewer-close {
    width: 26px; height: 26px; border-radius: 6px; flex-shrink: 0;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.5); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.18s;
}
.est-slide-viewer-close:hover {
    background: rgba(248,113,113,0.15); border-color: rgba(248,113,113,0.3);
    color: #f87171;
}
.est-slide-viewer-body {
    width: 100%; aspect-ratio: 16/9;
    position: relative; border-radius: 0 0 10px 10px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08); border-top: none;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.est-slide-viewer-body .est-slide-content {
    position: absolute; top: 0; left: 0;
    width: 1280px; height: 720px;
    transform-origin: 0 0;
    background: white; color: black;
    overflow: hidden;
}
.est-slide-viewer-body .est-slide-content.est-slide-img-mode {
    position: relative;
    width: 100%; height: 100%;
    background: transparent;
}
.est-slide-viewer-body .est-slide-content.est-slide-img-mode img {
    width: 100%; height: 100%;
    object-fit: contain;
}

/* Common Text Box Style */
.est-ppt-textbox {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.2;
    white-space: pre-wrap;
}

/* Specific Styles matching Python logic */
.est-ppt-title-main {
    text-align: center;
    justify-content: center;
}

.est-ppt-title-footer {
    text-align: left;
    justify-content: flex-start;
}

.est-ppt-item-left {
    text-align: left;
    justify-content: flex-start;
}

.est-ppt-item-right {
    text-align: right;
    justify-content: flex-start;
}

/* ---- Panel Headers ---- */
.est-edit-header-row {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 3px;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(96,165,250,0.1);
    background: linear-gradient(180deg, rgba(96,165,250,0.06) 0%, transparent 100%);
    flex-shrink: 0;
}

.est-section-title {
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    background: linear-gradient(135deg, #93bbfc, #60a5fa);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}

.est-header-legend {
    display: flex; align-items: center; gap: 10px;
    font-size: 10px; color: #666;
}
.est-header-legend .leg-dot {
    display: inline-flex; align-items: center; gap: 3px;
}
.est-header-legend .leg-dot::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
}
.est-header-legend .leg-count::before { background: #fde047; }
.est-header-legend .leg-coef::before  { background: #a78bfa; }
.est-header-legend .leg-list::before  { background: #ffd700; }

.est-add-btn {
    background: rgba(46,204,113,0.15);
    color: #34d399;
    border: 1px solid rgba(46,204,113,0.3);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}
.est-add-btn:hover { background: rgba(46,204,113,0.25); }

/* ---- Items List Scroll ---- */
.est-items-list {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
}
.est-items-list::-webkit-scrollbar { width: 4px; }
.est-items-list::-webkit-scrollbar-track { background: transparent; }
.est-items-list::-webkit-scrollbar-thumb { background: rgba(96,165,250,0.15); border-radius: 4px; }

/* ---- Category Groups (Personnel / Transport / Equipment) ---- */
.est-category-group {
    margin-bottom: 14px;
}

/* ══════ LEVEL 1: Category headers (Персонал / Транспорт / Оборудование) ══════ */
.est-category-group {
    margin-bottom: 10px;
}
.est-cat-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: linear-gradient(135deg, color-mix(in srgb, var(--cat-color) 12%, #1a1f2e), color-mix(in srgb, var(--cat-color) 4%, #1a1f2e));
    border: 1px solid color-mix(in srgb, var(--cat-color) 18%, transparent);
    margin-bottom: 4px;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--cat-color) 6%, transparent);
    user-select: none;
}
.est-cat-header:hover {
    background: linear-gradient(135deg, color-mix(in srgb, var(--cat-color) 18%, #1a1f2e), color-mix(in srgb, var(--cat-color) 8%, #1a1f2e));
    border-color: color-mix(in srgb, var(--cat-color) 30%, transparent);
    box-shadow: 0 3px 12px color-mix(in srgb, var(--cat-color) 10%, transparent);
}
.est-cat-header:active {
    transform: scale(0.995);
}
.est-cat-icon {
    font-size: 17px;
    flex-shrink: 0;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}
.est-cat-label {
    flex: 1;
    font-size: 12.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--cat-color);
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.est-cat-badge {
    font-size: 10px;
    font-weight: 700;
    color: var(--cat-color);
    background: color-mix(in srgb, var(--cat-color) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--cat-color) 25%, transparent);
    border-radius: 10px;
    padding: 2px 9px;
    min-width: 22px;
    text-align: center;
    line-height: 1.4;
}
.est-cat-arrow {
    flex-shrink: 0;
    color: var(--cat-color);
    opacity: 0.6;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: rotate(-90deg);
}
.est-cat-header:not(.collapsed) .est-cat-arrow {
    transform: rotate(0deg);
}

/* Keep old class for backward compat */
.est-category-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #60a5fa;
    font-weight: 800;
    margin-bottom: 8px;
    padding: 7px 10px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(96,165,250,0.08), rgba(96,165,250,0.03));
    border: 1px solid rgba(96,165,250,0.1);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    transition: all 0.2s;
}
.est-category-title:hover {
    background: linear-gradient(135deg, rgba(96,165,250,0.14), rgba(96,165,250,0.06));
    border-color: rgba(96,165,250,0.2);
}
.est-category-title::after {
    content: "";
    width: 0; height: 0;
    border-left: 4px solid transparent; border-right: 4px solid transparent;
    border-top: 5px solid #60a5fa;
    position: absolute; right: 10px;
    transition: transform 0.25s;
}
.est-category-title.collapsed::after {
    transform: rotate(-90deg);
}

/* ══════ LEVEL 2: Equipment-type groups (Свет / Звук / Видео ...) ══════ */
.est-eq-group {
    margin: 0 0 6px 0;
    border-radius: 10px;
    background: color-mix(in srgb, var(--eq-color, #94a3b8) 3%, rgba(255,255,255,0.01));
    border: 1px solid color-mix(in srgb, var(--eq-color, #94a3b8) 8%, transparent);
    overflow: hidden;
    transition: border-color 0.2s;
}
.est-eq-group:hover {
    border-color: color-mix(in srgb, var(--eq-color, #94a3b8) 14%, transparent);
}
.est-eq-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    background: linear-gradient(135deg, color-mix(in srgb, var(--eq-color) 8%, transparent), color-mix(in srgb, var(--eq-color) 2%, transparent));
    border-bottom: 1px solid color-mix(in srgb, var(--eq-color) 6%, transparent);
    transition: all 0.2s ease;
    user-select: none;
}
.est-eq-header:hover {
    background: linear-gradient(135deg, color-mix(in srgb, var(--eq-color) 15%, transparent), color-mix(in srgb, var(--eq-color) 5%, transparent));
}
.est-eq-header:active {
    transform: scale(0.998);
}
.est-eq-header.collapsed {
    border-bottom-color: transparent;
}
.est-eq-icon {
    font-size: 13px;
    flex-shrink: 0;
    opacity: 0.9;
}
.est-eq-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: color-mix(in srgb, var(--eq-color) 85%, #e2e8f0);
    flex: 1;
    line-height: 1.3;
}
.est-eq-count {
    font-size: 9.5px;
    font-weight: 700;
    color: var(--eq-color);
    background: color-mix(in srgb, var(--eq-color) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--eq-color) 22%, transparent);
    border-radius: 9px;
    padding: 1px 7px;
    min-width: 18px;
    text-align: center;
    line-height: 1.4;
}
.est-eq-arrow {
    flex-shrink: 0;
    color: var(--eq-color);
    opacity: 0.45;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: rotate(-90deg);
}
.est-eq-header:not(.collapsed) .est-eq-arrow {
    transform: rotate(0deg);
}
.est-eq-items {
    padding: 3px 0 2px;
}

/* ══════ LEVEL 3: Zone subgroups (БКЗ / КЗ-1 / Конгресс-зал ...) ══════ */
.est-zone-group {
    margin: 2px 4px 2px 12px;
    border-left: 2px solid color-mix(in srgb, var(--eq-color, #94a3b8) 22%, transparent);
    border-radius: 0 8px 8px 0;
    overflow: hidden;
    background: color-mix(in srgb, var(--eq-color, #94a3b8) 2%, transparent);
    transition: border-color 0.2s;
}
.est-zone-group:hover {
    border-left-color: color-mix(in srgb, var(--eq-color, #94a3b8) 35%, transparent);
}
.est-zone-header {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 10px 5px 10px;
    cursor: pointer;
    background: color-mix(in srgb, var(--eq-color, #94a3b8) 4%, transparent);
    border-bottom: 1px solid rgba(255,255,255,0.025);
    transition: all 0.15s ease;
    user-select: none;
}
.est-zone-header:hover {
    background: color-mix(in srgb, var(--eq-color, #94a3b8) 10%, transparent);
}
.est-zone-header:active {
    transform: scale(0.998);
}
.est-zone-header.collapsed {
    border-bottom-color: transparent;
}
.est-zone-icon {
    font-size: 10px;
    flex-shrink: 0;
    opacity: 0.75;
}
.est-zone-label {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.15px;
    color: color-mix(in srgb, var(--eq-color, #94a3b8) 65%, #cbd5e1);
    flex: 1;
    line-height: 1.3;
}
.est-zone-count {
    font-size: 9px;
    font-weight: 700;
    color: color-mix(in srgb, var(--eq-color, #94a3b8) 55%, #94a3b8);
    background: color-mix(in srgb, var(--eq-color, #94a3b8) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--eq-color, #94a3b8) 15%, transparent);
    padding: 1px 6px;
    border-radius: 8px;
    min-width: 16px;
    text-align: center;
    line-height: 1.4;
}
.est-zone-arrow {
    flex-shrink: 0;
    color: color-mix(in srgb, var(--eq-color, #94a3b8) 45%, #64748b);
    opacity: 0.5;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: rotate(-90deg);
}
.est-zone-header:not(.collapsed) .est-zone-arrow {
    transform: rotate(0deg);
}
.est-zone-items {
    padding: 2px 0;
}

/* ---- Sections inside categories (old compat) ---- */
.est-edit-section {
    margin-bottom: 10px;
}

.est-section-name {
    font-size: 11px;
    color: #8899aa;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
    padding: 5px 8px 5px 10px;
    border-left: 3px solid rgba(96,165,250,0.4);
    border-radius: 0 6px 6px 0;
    background: rgba(255,255,255,0.02);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s;
}
.est-section-name:hover {
    background: rgba(96,165,250,0.06);
    color: #aabbcc;
}
.est-section-name::after {
    content: "";
    width: 0; height: 0;
    border-left: 3px solid transparent; border-right: 3px solid transparent;
    border-top: 4px solid #667788;
    transition: transform 0.25s;
}
.est-section-name.collapsed::after {
    transform: rotate(-90deg);
}

/* ---- Position item card ---- */
.est-pos-item {
    position: relative;
    margin: 3px 4px;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.05);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.est-pos-item:hover {
    border-color: rgba(255,255,255,0.1);
    box-shadow: 0 2px 12px rgba(0,0,0,0.2);
}
.est-pos-item::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--pos-status);
    z-index: 1;
    transition: width 0.2s, box-shadow 0.2s;
}
.est-pos-item:hover::before {
    width: 5px;
    box-shadow: 0 0 8px var(--pos-status);
}
.est-status-green  { --pos-status: #34d399; }
.est-status-orange { --pos-status: #f59e0b; }
.est-status-red    { --pos-status: #ef4444; }

/* ---- Bottom-up fill marker (soprovod position rows) ----
   The left rail becomes a vertical progress bar: a faint full-height track
   (::before) with a coloured fill (::after) that rises from the bottom to
   `--fill-h` and whose colour (`--fill-color`) shifts red→amber→green with the
   number of photos inserted. */
.est-pos-item--fill::before {
    background: rgba(148,163,184,0.16);
    box-shadow: none;
}
.est-pos-item--fill::after {
    content: '';
    position: absolute;
    left: 0; right: auto; bottom: 0; top: auto;
    width: 4px;
    height: var(--fill-h, 0%);
    background: var(--fill-color, #f59e0b);
    border-radius: 0 3px 3px 0;
    z-index: 2;
    transition: height 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.4s, width 0.2s, box-shadow 0.2s;
}
.est-pos-item--fill:hover::before { width: 5px; box-shadow: none; }
.est-pos-item--fill:hover::after {
    width: 5px;
    box-shadow: 0 0 9px var(--fill-color, #f59e0b);
}

/* ---- Position row inside card ---- */
.est-pos-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px 9px 16px;
    cursor: pointer;
    transition: background 0.18s;
    min-height: 36px;
    position: relative;
}
.est-pos-row:hover {
    background: rgba(255,255,255,0.03);
}
.est-pos-row:active {
    background: rgba(255,255,255,0.05);
}
.est-pos-info {
    flex: 1;
    min-width: 0;
    text-align: left;
}
.est-pos-name {
    font-size: 12.5px;
    font-weight: 500;
    color: #cbd5e1;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}
.est-pos-row:hover .est-pos-name { color: #f1f5f9; }
.est-pos-values {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}
.est-val-label {
    font-size: 8px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    opacity: 0.55;
    margin-right: 3px;
}
.est-pos-count {
    font-size: 12px;
    font-weight: 700;
    color: #fde047;
    background: rgba(253,224,71,0.08);
    border: 1px solid rgba(253,224,71,0.15);
    padding: 2px 8px;
    border-radius: 7px;
    white-space: nowrap;
    display: inline-flex;
    align-items: baseline;
    gap: 0;
}
.est-pos-count--personnel {
    color: #4ade80;
    background: rgba(74,222,128,0.08);
    border-color: rgba(74,222,128,0.18);
}
.est-pos-count--transport {
    color: #fb923c;
    background: rgba(251,146,60,0.08);
    border-color: rgba(251,146,60,0.18);
}
.est-pos-shifts {
    font-size: 12px;
    font-weight: 700;
    color: #60a5fa;
    background: rgba(96,165,250,0.08);
    border: 1px solid rgba(96,165,250,0.15);
    padding: 2px 8px;
    border-radius: 7px;
    white-space: nowrap;
    display: inline-flex;
    align-items: baseline;
    gap: 0;
}
.est-pos-coef {
    font-size: 12px;
    font-weight: 700;
    color: #a78bfa;
    background: rgba(167,139,250,0.08);
    border: 1px solid rgba(167,139,250,0.15);
    padding: 2px 8px;
    border-radius: 7px;
    white-space: nowrap;
    display: inline-flex;
    align-items: baseline;
    gap: 0;
}
.est-pos-arrow {
    font-size: 16px;
    color: rgba(255,255,255,0.08);
    flex-shrink: 0;
    transition: all 0.18s;
}
.est-pos-row:hover .est-pos-arrow {
    color: rgba(255,255,255,0.25);
    transform: translateX(2px);
}

/* ---- Comment bar (bottom of card) ---- */
.est-pos-cmt-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px 5px 16px;
    font-size: 10.5px;
    font-weight: 600;
    color: rgba(245,158,11,0.55);
    background: rgba(245,158,11,0.04);
    border-top: 1px solid rgba(245,158,11,0.08);
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
}
.est-pos-cmt-bar:hover {
    color: rgba(245,158,11,0.85);
    background: rgba(245,158,11,0.08);
}
.est-pos-cmt-bar.active {
    color: #fbbf24;
    background: rgba(245,158,11,0.1);
}
.est-pos-cmt-bar svg {
    flex-shrink: 0;
    opacity: 0.7;
}
.est-pos-cmt-bar.active svg { opacity: 1; }

/* ---- Comment body (expandable) ---- */
.est-pos-comment-body {
    padding: 8px 14px 10px 16px;
    background: rgba(245,158,11,0.04);
    border-top: 1px solid rgba(245,158,11,0.06);
    font-size: 11.5px;
    color: rgba(255,255,255,0.6);
    line-height: 1.5;
    word-break: break-word;
    animation: estCommentIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes estCommentIn {
    from { opacity: 0; max-height: 0; }
    to { opacity: 1; max-height: 200px; }
}

/* ---- Approve button ---- */
.est-pos-approve-btn {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    border: 1.5px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.025);
    color: rgba(255,255,255,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.15, 1);
}
.est-pos-approve-btn:hover {
    border-color: rgba(52,211,153,0.35);
    color: rgba(52,211,153,0.5);
    background: rgba(52,211,153,0.06);
    transform: scale(1.08);
}
.est-pos-approve-btn.approved {
    border-color: transparent;
    color: #fff;
    background: linear-gradient(135deg, #34d399, #10b981);
    box-shadow: 0 2px 10px rgba(52,211,153,0.35);
}
.est-pos-approve-btn.approved:hover {
    box-shadow: 0 4px 14px rgba(52,211,153,0.45);
    transform: scale(1.08);
}

/* ---- Approved row state ---- */
.est-pos-row.est-pos-approved {
    background: rgba(52,211,153,0.04);
}
.est-pos-row.est-pos-approved .est-pos-name {
    color: #6ee7b7;
}

/* ---- Legacy (unused, kept for compat) ---- */
.est-pos-badges { display: none; }
.est-pos-dot { display: none; }

/* Transport slide highlight */
.est-slide-highlight {
    box-shadow: 0 0 20px rgba(249,115,22,0.4) !important;
    border-color: rgba(249,115,22,0.5) !important;
    transition: box-shadow 0.3s, border-color 0.3s;
}

/* ---- Individual Items old (backward compat) ---- */
.est-edit-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.04);
    padding: 8px 10px;
    margin-bottom: 3px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
}
.est-edit-item:hover {
    background: rgba(96,165,250,0.08);
    border-color: rgba(96,165,250,0.15);
    transform: translateX(2px);
}
.est-edit-item:active {
    transform: translateX(2px) scale(0.99);
}

.est-item-name {
    font-size: 12px;
    color: #dde;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 8px;
    font-weight: 500;
}

.est-item-values {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.est-item-coef {
    font-size: 11px;
    color: #a78bfa;
    font-weight: 700;
    background: rgba(167,139,250,0.1);
    border: 1px solid rgba(167,139,250,0.15);
    padding: 2px 6px;
    border-radius: 5px;
}

.est-item-count {
    font-size: 12px;
    font-weight: 700;
    color: #fde047;
    background: rgba(253,224,71,0.08);
    border: 1px solid rgba(253,224,71,0.15);
    padding: 2px 8px;
    border-radius: 5px;
    min-width: 22px;
    text-align: center;
}

/* ---- Contractor Groups (Soprovod) ---- */
.est-contr-group {
    margin-bottom: 16px;
    text-align: center;
}
.est-contr-name {
    font-size: 11px;
    font-weight: 800;
    color: #4ECDC4;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(78,205,196,0.15);
    background: linear-gradient(135deg, #4ECDC4, #45B7D1);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
.est-roles-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
}
.est-role-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 500;
    color: #dde;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}
.est-role-chip:hover {
    background: rgba(96,165,250,0.1);
    border-color: rgba(96,165,250,0.25);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.est-role-chip:active {
    transform: translateY(0) scale(0.97);
}
.est-role-icon {
    opacity: 0.4;
    flex-shrink: 0;
    transition: opacity 0.2s;
}
.est-role-chip:hover .est-role-icon { opacity: 0.8; }

/* ---- Panel Footer ---- */
.est-panel-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 14px;
    border-top: 1px solid rgba(255,255,255,0.05);
    font-size: 10px;
    color: #556;
    font-weight: 500;
    flex-shrink: 0;
}
.est-footer-sep { color: #334; }

/* =========================================
   ESTIMATES LIST STYLES (Inside A1 Overlay)
   ========================================= */

/* --- STATS BAR --- */
.est-stats-bar {
    display: flex; align-items: center; justify-content: center; gap: 0;
    padding: 10px 16px; flex-shrink: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.est-stat {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    flex: 1; padding: 4px 0; cursor: default;
}
.est-stat-num {
    font-size: 20px; font-weight: 800; line-height: 1;
    background: linear-gradient(135deg, #4ECDC4, #45B7D1);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
.est-stat[data-type="current"] .est-stat-num {
    background: linear-gradient(135deg, #fde047, #facc15);
    -webkit-background-clip: text; background-clip: text;
}
.est-stat[data-type="edits"] .est-stat-num {
    background: linear-gradient(135deg, #22d3ee, #06b6d4);
    -webkit-background-clip: text; background-clip: text;
}
.est-stat[data-type="ready"] .est-stat-num {
    background: linear-gradient(135deg, #34d399, #10b981);
    -webkit-background-clip: text; background-clip: text;
}
.est-stat-label { font-size: 10px; color: rgba(255,255,255,0.4); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; }
.est-stat-divider { width: 1px; height: 28px; background: rgba(255,255,255,0.08); flex-shrink: 0; }

/* --- ARCHIVE BUTTON inside the "Текущие" header chelka --- */
.est-archive-btn {
    margin-left: auto; margin-right: 8px;
    border: 1px solid rgba(253,224,71,0.40);
    background: rgba(253,224,71,0.10);
    color: #fde047;
    height: 22px; padding: 0 9px 0 7px; border-radius: 7px; cursor: pointer;
    display: inline-flex; align-items: center; gap: 5px;
    flex-shrink: 0; font-size: 10.5px; font-weight: 700; line-height: 1;
    letter-spacing: 0.3px; text-transform: uppercase;
    transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.12s;
}
.est-archive-btn svg { opacity: 0.85; }
.est-archive-btn:hover { background: rgba(253,224,71,0.22); color: #fef3c7; border-color: rgba(253,224,71,0.65); }
.est-archive-btn:hover svg { opacity: 1; }
.est-archive-btn:active { transform: scale(0.96); }
.est-archive-btn-label { white-space: nowrap; }
@media (max-width: 720px) {
    .est-archive-btn-label { display: none; }
    .est-archive-btn { padding: 0; width: 24px; justify-content: center; }
}

/* --- HIDDEN ESTIMATES ARCHIVE — mounted INSIDE the estimates overlay-card --- */
.est-archive-overlay {
    position: absolute; inset: 0; z-index: 50;
    background: rgba(0,0,0,0.55);
    display: none; align-items: center; justify-content: center;
    border-radius: inherit;
}
.est-archive-overlay.show { display: flex; }
.est-archive-card {
    width: min(540px, 94%); max-height: 80%;
    background: #16161b; border: 1px solid rgba(148,163,184,0.25);
    border-radius: 14px; overflow: hidden; display: flex; flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}
.est-archive-header {
    padding: 14px 16px;
    background: linear-gradient(180deg, rgba(148,163,184,0.10) 0%, rgba(148,163,184,0.02) 100%);
    border-bottom: 1px solid rgba(148,163,184,0.15);
    display: flex; align-items: center; gap: 10px;
}
.est-archive-title { font-size: 14px; font-weight: 700; color: #fff; }
.est-archive-close { margin-left: auto; cursor: pointer; background: none; border: none; color: rgba(255,255,255,0.55); font-size: 22px; line-height: 1; padding: 0 4px; }
.est-archive-close:hover { color: #fff; }
.est-archive-list { padding: 10px 12px; overflow-y: auto; flex: 1; }
.est-archive-empty { padding: 24px; text-align: center; color: rgba(255,255,255,0.45); font-size: 13px; }

/* === Skeleton loaders === */
@keyframes estSkelShimmer {
    0%   { background-position: -200px 0; }
    100% { background-position: calc(200px + 100%) 0; }
}
.est-skel-list { padding: 6px 2px; display: flex; flex-direction: column; gap: 8px; }
.est-skel-row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: 8px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.05);
}
.est-skel-line {
    height: 10px; border-radius: 5px; flex-shrink: 0;
    background: linear-gradient(90deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0.04) 100%);
    background-size: 200px 100%;
    animation: estSkelShimmer 1.4s ease-in-out infinite;
}
.est-skel-line-sm { width: 48px; }
.est-skel-line-md { width: 110px; }
.est-skel-line-lg { flex: 1; min-width: 0; }
.est-skel-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px; padding: 10px;
}
.est-skel-tile {
    aspect-ratio: 4 / 3; border-radius: 8px;
    background: linear-gradient(90deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0.04) 100%);
    background-size: 200px 100%;
    animation: estSkelShimmer 1.4s ease-in-out infinite;
    border: 1px solid rgba(255,255,255,0.05);
}
.est-archive-row {
    display: flex; align-items: center; gap: 8px; padding: 8px 10px;
    border-radius: 8px; margin-bottom: 6px;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
}
.est-archive-row .ev { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #e8e8ec; font-size: 13px; }
.est-archive-row .dt { font-size: 11px; color: rgba(255,255,255,0.45); flex-shrink: 0; padding: 2px 6px; border-radius: 5px; background: rgba(255,255,255,0.05); }
.est-archive-row .btns { display: flex; gap: 4px; flex-shrink: 0; }
.est-archive-row .b {
    height: 26px; padding: 0 10px; border-radius: 6px; cursor: pointer;
    border: 1px solid transparent; font-size: 11px; font-weight: 600;
}
.est-archive-row .b.restore { background: rgba(34,197,94,0.10); color: #22c55e; border-color: rgba(34,197,94,0.25); }
.est-archive-row .b.restore:hover { background: rgba(34,197,94,0.22); }
.est-archive-row .b.delete { background: rgba(239,68,68,0.10); color: #ef4444; border-color: rgba(239,68,68,0.25); }
.est-archive-row .b.delete:hover { background: rgba(239,68,68,0.22); }

/* Archive button is visible to admins/super only */
.est-archive-btn { display: none; }
body[data-app-admin="1"] .est-archive-btn,
body[data-app-super="1"] .est-archive-btn { display: inline-flex; }

/* Audit button — same visual lane as archive but a sky-blue tint */
.est-audit-btn {
    margin-right: 6px; margin-left: 0;
    border-color: rgba(56,189,248,0.40);
    background: rgba(56,189,248,0.10);
    color: #38bdf8;
}
.est-audit-btn:hover { background: rgba(56,189,248,0.22); color: #e0f2fe; border-color: rgba(56,189,248,0.65); }
.est-audit-btn + .est-archive-btn { margin-left: 0; }
.est-archive-btn.est-audit-btn { } /* same selector strength */

/* Wider modal card for history / audit / backups */
.est-archive-card-wide {
    width: min(720px, 96%);
    max-height: 86%;
}

/* Activity (audit) modal — room for filter bar */
#estAuditOverlay .est-archive-card-wide,
.est-audit-overlay-host .est-archive-card-wide {
    width: min(840px, 97%);
    max-height: 88%;
}

/* === Audit toolbar (filters + sort) === */
.est-audit-toolbar {
    flex-shrink: 0;
    padding: 12px 14px 10px;
    background: linear-gradient(180deg, rgba(56,189,248,0.06) 0%, rgba(15,23,42,0.4) 100%);
    border-bottom: 1px solid rgba(148,163,184,0.12);
}
.est-audit-toolbar-row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 10px 12px;
}
.est-audit-field {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
    flex: 1 1 160px;
}
.est-audit-field-sort {
    flex: 1 1 160px;
    max-width: 220px;
}

/* Same control look as schedule filters (sch-filter-btn in modules.css + filters.css) */
#estAuditOverlay .est-audit-toolbar .est-audit-dd.sch-filter-btn , .est-audit-overlay-host .est-audit-toolbar .est-audit-dd.sch-filter-btn {
    flex: 1 1 0;
    min-width: 0;
    width: 100%;
}
#estAuditOverlay .est-audit-toolbar .sch-filter-btn .filter-display , .est-audit-overlay-host .est-audit-toolbar .sch-filter-btn .filter-display {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    overflow: hidden;
    padding: 0 8px;
    box-sizing: border-box;
}
#estAuditOverlay .est-audit-toolbar .sch-filter-btn .filter-display span , .est-audit-overlay-host .est-audit-toolbar .sch-filter-btn .filter-display span {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}
/* Menus open DOWN (toolbar is under the header — like #ws-events) */
#estAuditOverlay .est-audit-toolbar .filter-menu , .est-audit-overlay-host .est-audit-toolbar .filter-menu {
    top: calc(100% + 8px);
    bottom: auto;
    left: 0;
    right: 0;
    transform: none;
    width: 100%;
    min-width: 100%;
    max-width: none;
    max-height: min(360px, 52vh);
    z-index: 12000 !important;
    text-align: center;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.65);
}
/* Long event names: wrap inside menu; button uses ellipsis + title tooltip */
#estAuditOverlay .est-audit-menu-events .filter-option,
#estAuditOverlay, .est-audit-overlay-host .est-audit-menu-users .filter-option , .est-audit-overlay-host .est-audit-menu-events .filter-option,
#estAuditOverlay, .est-audit-overlay-host .est-audit-menu-users .filter-option {
    white-space: normal;
    justify-content: flex-start;
    text-align: left;
    align-items: flex-start;
}
#estAuditOverlay .est-audit-menu-events .est-audit-opt-event , .est-audit-overlay-host .est-audit-menu-events .est-audit-opt-event {
    padding: 10px 12px;
}
#estAuditOverlay .est-audit-ev-cell , .est-audit-overlay-host .est-audit-ev-cell {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    width: 100%;
    min-width: 0;
    text-align: left;
}
#estAuditOverlay .est-audit-ev-d , .est-audit-overlay-host .est-audit-ev-d {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.35px;
    text-transform: uppercase;
    color: rgba(167, 139, 250, 0.95);
}
#estAuditOverlay .est-audit-ev-n , .est-audit-overlay-host .est-audit-ev-n {
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.35;
    color: #f1f5f9;
    word-break: break-word;
    overflow-wrap: anywhere;
}
#estAuditOverlay .est-audit-menu-users .est-audit-opt-user span , .est-audit-overlay-host .est-audit-menu-users .est-audit-opt-user span {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    text-align: left;
    line-height: 1.35;
}
/* «Все мероприятия» / «Все пользователи» — одна подсвеченная фраза + тихая подсказка */
#estAuditOverlay .est-audit-opt-all , .est-audit-overlay-host .est-audit-opt-all {
    padding: 10px 12px !important;
    margin-bottom: 6px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    background: rgba(15, 23, 42, 0.45) !important;
}
#estAuditOverlay .est-audit-opt-all:hover , .est-audit-overlay-host .est-audit-opt-all:hover {
    border-color: rgba(255, 255, 255, 0.16) !important;
    background: rgba(15, 23, 42, 0.65) !important;
}
#estAuditOverlay .est-audit-opt-all.active-opt , .est-audit-overlay-host .est-audit-opt-all.active-opt {
    border-color: rgba(78, 205, 196, 0.4) !important;
    background: rgba(15, 23, 42, 0.75) !important;
    box-shadow: 0 0 0 1px rgba(78, 205, 196, 0.15) inset;
}
#estAuditOverlay .est-audit-opt-all-events.active-opt , .est-audit-overlay-host .est-audit-opt-all-events.active-opt {
    border-color: rgba(167, 139, 250, 0.5) !important;
    box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.2) inset, 0 0 24px rgba(167, 139, 250, 0.12);
}
#estAuditOverlay .est-audit-opt-all-users.active-opt , .est-audit-overlay-host .est-audit-opt-all-users.active-opt {
    border-color: rgba(96, 165, 250, 0.5) !important;
    box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.2) inset, 0 0 24px rgba(96, 165, 250, 0.1);
}
#estAuditOverlay .est-audit-opt-all-inner , .est-audit-overlay-host .est-audit-opt-all-inner {
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
}
#estAuditOverlay .est-audit-opt-all-phrase , .est-audit-overlay-host .est-audit-opt-all-phrase {
    display: inline-block;
    width: fit-content;
    max-width: 100%;
    padding: 7px 14px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.25;
    border: 1px solid transparent;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}
#estAuditOverlay .est-audit-opt-all-events .est-audit-opt-all-phrase , .est-audit-overlay-host .est-audit-opt-all-events .est-audit-opt-all-phrase {
    color: #f5f3ff;
    background: linear-gradient(145deg, rgba(167, 139, 250, 0.42) 0%, rgba(139, 92, 246, 0.32) 55%, rgba(99, 102, 241, 0.22) 100%);
    border-color: rgba(196, 181, 253, 0.45);
    text-shadow: 0 1px 10px rgba(88, 28, 135, 0.35);
}
#estAuditOverlay .est-audit-opt-all-events:hover .est-audit-opt-all-phrase , .est-audit-overlay-host .est-audit-opt-all-events:hover .est-audit-opt-all-phrase {
    background: linear-gradient(145deg, rgba(167, 139, 250, 0.52) 0%, rgba(139, 92, 246, 0.4) 55%, rgba(99, 102, 241, 0.28) 100%);
    border-color: rgba(196, 181, 253, 0.6);
}
#estAuditOverlay .est-audit-opt-all-events.active-opt .est-audit-opt-all-phrase , .est-audit-overlay-host .est-audit-opt-all-events.active-opt .est-audit-opt-all-phrase {
    background: linear-gradient(145deg, rgba(167, 139, 250, 0.58) 0%, rgba(139, 92, 246, 0.46) 50%, rgba(99, 102, 241, 0.34) 100%);
    border-color: rgba(221, 214, 254, 0.65);
    box-shadow: 0 0 20px rgba(167, 139, 250, 0.25);
}
#estAuditOverlay .est-audit-opt-all-users .est-audit-opt-all-phrase , .est-audit-overlay-host .est-audit-opt-all-users .est-audit-opt-all-phrase {
    color: #eff6ff;
    background: linear-gradient(145deg, rgba(96, 165, 250, 0.42) 0%, rgba(59, 130, 246, 0.32) 55%, rgba(37, 99, 235, 0.22) 100%);
    border-color: rgba(147, 197, 253, 0.45);
    text-shadow: 0 1px 10px rgba(30, 58, 138, 0.35);
}
#estAuditOverlay .est-audit-opt-all-users:hover .est-audit-opt-all-phrase , .est-audit-overlay-host .est-audit-opt-all-users:hover .est-audit-opt-all-phrase {
    background: linear-gradient(145deg, rgba(96, 165, 250, 0.52) 0%, rgba(59, 130, 246, 0.4) 55%, rgba(37, 99, 235, 0.28) 100%);
    border-color: rgba(147, 197, 253, 0.6);
}
#estAuditOverlay .est-audit-opt-all-users.active-opt .est-audit-opt-all-phrase , .est-audit-overlay-host .est-audit-opt-all-users.active-opt .est-audit-opt-all-phrase {
    background: linear-gradient(145deg, rgba(96, 165, 250, 0.58) 0%, rgba(59, 130, 246, 0.46) 50%, rgba(37, 99, 235, 0.34) 100%);
    border-color: rgba(191, 219, 254, 0.65);
    box-shadow: 0 0 20px rgba(96, 165, 250, 0.22);
}
/* Colored dots on .filter-display (not inside span) so ellipsis on label works */
#estAuditEventWrap .filter-display::before {
    content: "";
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #a78bfa;
    box-shadow: 0 0 8px rgba(167, 139, 250, 0.35);
}
#estAuditUserWrap .filter-display::before {
    content: "";
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #60a5fa;
    box-shadow: 0 0 8px rgba(96, 165, 250, 0.35);
}
#estAuditSortWrap .filter-display::before {
    content: "";
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4ECDC4;
    box-shadow: 0 0 8px rgba(78, 205, 196, 0.35);
}
.est-audit-toolbar-meta {
    margin-top: 8px;
    font-size: 11px;
    font-weight: 500;
    color: rgba(148,163,184,0.85);
    font-variant-numeric: tabular-nums;
    line-height: 1.35;
}
@media (max-width: 560px) {
    .est-audit-field-sort { flex: 1 1 140px; max-width: none; }
}

/* History rows */
.est-history-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    margin-bottom: 6px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
}
.est-history-meta { display: flex; align-items: center; gap: 8px; min-width: 0; }
.est-history-meta .dt {
    font-size: 11px; color: rgba(255,255,255,0.5);
    flex-shrink: 0; padding: 2px 6px; border-radius: 5px;
    background: rgba(255,255,255,0.05); font-variant-numeric: tabular-nums;
}
.est-history-meta .ev {
    color: #e8e8ec; font-size: 12.5px; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.est-history-chip {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    padding: 2px 6px; border-radius: 4px; letter-spacing: 0.3px;
    background: rgba(148,163,184,0.15); color: #cbd5e1;
}
.est-history-chip-auto { background: rgba(34,197,94,0.12); color: #4ade80; }
.est-history-chip-pre-restore { background: rgba(245,158,11,0.15); color: #fbbf24; }
.est-history-stats {
    display: flex; gap: 10px;
    color: rgba(255,255,255,0.7); font-size: 11.5px;
    font-variant-numeric: tabular-nums;
}
.est-history-hint { font-size: 11px; color: rgba(255,255,255,0.45); }

/* Audit rows */
.est-audit-row {
    display: grid;
    grid-template-columns: 130px 130px 1fr 2fr;
    gap: 10px; align-items: baseline;
    padding: 6px 10px;
    border-radius: 6px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    font-size: 12px;
}
.est-audit-row .dt { color: rgba(255,255,255,0.5); font-variant-numeric: tabular-nums; }
.est-audit-row .who { color: #93c5fd; font-weight: 600; }
.est-audit-row .act { color: #e8e8ec; }
.est-audit-row .tgt { color: rgba(255,255,255,0.55); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.est-audit-row:hover { background: rgba(255,255,255,0.03); }

/* === Audit cards (expanded view) === */
.est-audit-card {
    padding: 10px 12px; margin: 8px 0;
    border-radius: 10px;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.06);
    border-left: 3px solid rgba(167,139,250,0.55);
    font-size: 12px; color: #e8e8ec;
    transition: background 0.15s;
}
.est-audit-card:hover { background: rgba(255,255,255,0.045); }
.est-audit-card.a-photo { border-left-color: #38bdf8; }
.est-audit-card.a-up    { border-left-color: #a78bfa; }
.est-audit-card.a-ok    { border-left-color: #22c55e; }
.est-audit-card.a-hide  { border-left-color: #6b7280; }
.est-audit-card.a-restore { border-left-color: #fbbf24; }
.est-audit-card.a-del   { border-left-color: #ef4444; }
.est-audit-card.a-pres  { border-left-color: #f472b6; }

.est-audit-card-head {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 4px;
}
.est-audit-ic { font-size: 14px; line-height: 1; }
.est-audit-act { font-weight: 700; color: #fff; font-size: 12.5px; }
.est-audit-spacer { flex: 1; }
.est-audit-who {
    color: #93c5fd; font-weight: 600;
    background: rgba(96,165,250,0.10);
    padding: 2px 7px; border-radius: 4px;
    font-size: 11px;
}
.est-audit-dt {
    color: rgba(255,255,255,0.45);
    font-variant-numeric: tabular-nums;
    font-size: 11px;
}
.est-audit-card-target {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 4px; flex-wrap: wrap;
}
.est-audit-target-title {
    color: #e8e8ec; font-weight: 600;
}
.est-audit-id {
    color: rgba(255,255,255,0.35);
    font-size: 10.5px;
    font-family: 'SF Mono', 'Consolas', monospace;
    background: rgba(255,255,255,0.04);
    padding: 1px 5px; border-radius: 3px;
    cursor: help;
}
.est-audit-chips {
    display: flex; flex-wrap: wrap; gap: 5px;
    margin-top: 5px;
}
.est-audit-chip {
    display: inline-flex; align-items: center;
    height: 20px; padding: 0 8px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.78);
    border-radius: 5px;
    font-size: 10.5px; font-weight: 500;
}
.est-audit-chip-pos {
    background: rgba(167,139,250,0.10);
    border-color: rgba(167,139,250,0.30);
    color: #c4b5fd;
}
.est-audit-chip-slide {
    background: rgba(56,189,248,0.10);
    border-color: rgba(56,189,248,0.30);
    color: #7dd3fc;
}
.est-audit-chip-personal {
    background: rgba(251,191,36,0.10);
    border-color: rgba(251,191,36,0.30);
    color: #fcd34d;
}
.est-audit-changes {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed rgba(255,255,255,0.08);
}
.est-audit-change {
    display: inline-flex; align-items: center; gap: 5px;
    height: 20px; padding: 0 7px;
    border-radius: 5px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    font-size: 10.5px;
    max-width: 100%;
}
.est-audit-change-slot {
    color: rgba(255,255,255,0.55);
    font-weight: 600;
}
.est-audit-change-tag {
    font-weight: 700;
    text-transform: lowercase;
}
.est-audit-change-cmt {
    color: rgba(255,255,255,0.55);
    font-style: italic;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 200px;
}
.est-audit-change.chg-add { background: rgba(34,197,94,0.10); border-color: rgba(34,197,94,0.28); color: #86efac; }
.est-audit-change.chg-rm  { background: rgba(239,68,68,0.10); border-color: rgba(239,68,68,0.28); color: #fca5a5; }
.est-audit-change.chg-rep { background: rgba(56,189,248,0.10); border-color: rgba(56,189,248,0.28); color: #7dd3fc; }
.est-audit-change.chg-ann { background: rgba(167,139,250,0.10); border-color: rgba(167,139,250,0.28); color: #c4b5fd; }

/* Per-card presence chip group sits in the card header */
.est-presence-group-card {
    display: inline-flex !important;
    margin-left: auto !important;
    align-items: center;
    gap: 0;
    position: static !important;
}
.est-presence-group-card .est-presence-avatar {
    width: 18px; height: 18px;
    font-size: 10px;
    border-width: 1.5px;
}
.est-presence-more {
    background: rgba(148,163,184,0.25) !important;
    color: #cbd5e1 !important;
    font-size: 9px !important;
}

/* Photo modal — colored Undo/Redo + new clipboard/history buttons inherit
   the existing .est-btn-icon styles. Just give the history button an icon
   tint so it's discoverable. */
#btnHistoryEst { color: #c4b5fd; }
#btnHistoryEst:hover { background: rgba(196,181,253,0.10); }
#btnCopyAnnot:hover { background: rgba(56,189,248,0.10); }
#btnPasteAnnot:not(:disabled):hover { background: rgba(34,197,94,0.10); }
#btnPasteAnnot:disabled { opacity: 0.4; cursor: not-allowed; }

/* Zone-preset toolbar (within the presets modal) */
.est-zp-toolbar {
    display: flex; gap: 8px; align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(148,163,184,0.12);
    background: rgba(167,139,250,0.05);
}
.est-zp-toolbar input {
    flex: 1; min-width: 0;
    height: 30px; padding: 0 10px;
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(148,163,184,0.2);
    color: #fff; font-size: 12px;
    border-radius: 6px;
    transition: border-color 0.15s;
}
.est-zp-toolbar input:focus {
    outline: none;
    border-color: rgba(167,139,250,0.5);
}
.est-zp-save-btn {
    height: 30px; padding: 0 12px;
    background: rgba(167,139,250,0.18);
    border: 1px solid rgba(167,139,250,0.4);
    color: #ddd6fe;
    font-size: 11.5px; font-weight: 700;
    border-radius: 6px; cursor: pointer;
    transition: all 0.15s;
}
.est-zp-save-btn:hover {
    background: rgba(167,139,250,0.3);
    border-color: rgba(167,139,250,0.7);
    color: #fff;
}
.est-ze-bar-presets-btn {
    background: rgba(167,139,250,0.10) !important;
    border-color: rgba(167,139,250,0.30) !important;
    color: #ddd6fe !important;
}
.est-ze-bar-presets-btn:hover {
    background: rgba(167,139,250,0.22) !important;
}

/* Empty-zone outline + dot on slide previews */
.est-zone-rect-empty {
    border-style: dashed !important;
    box-shadow: inset 0 0 0 1px rgba(239,68,68,0.35);
    animation: estZonePulseEmpty 2.4s ease-in-out infinite;
}
.est-zone-empty-dot {
    position: absolute; top: 4px; right: 4px;
    width: 16px; height: 16px;
    background: #ef4444; color: #fff;
    border-radius: 50%;
    font-size: 11px; font-weight: 800; line-height: 16px;
    text-align: center; pointer-events: none;
    box-shadow: 0 1px 4px rgba(0,0,0,0.45);
}
@keyframes estZonePulseEmpty {
    0%, 100% { box-shadow: inset 0 0 0 1px rgba(239,68,68,0.35); }
    50%      { box-shadow: inset 0 0 0 2px rgba(239,68,68,0.65); }
}

/* --- SCROLL --- */
.est-scroll-container {
    flex: 1; overflow-y: auto; padding: 12px; padding-bottom: 100px;
}

/* --- SECTION GROUP --- */
.est-group { margin-bottom: 12px; border-radius: 14px; overflow: hidden; }
.est-group.collapsed .est-list { display: none; }
.est-group.collapsed .est-header-arrow { transform: rotate(-90deg); }

/* --- SECTION HEADERS --- */
.est-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px; cursor: pointer; user-select: none;
    transition: background 0.2s;
    border-radius: 14px;
}
.est-group:not(.collapsed) .est-header { border-radius: 14px 14px 0 0; }
.est-header:hover { filter: brightness(1.15); }
.est-header-left { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.est-header-icon { font-size: 15px; line-height: 1; }
.est-header-title { font-size: 13px; font-weight: 700; letter-spacing: 0.3px; }
.est-header-badge {
    font-size: 11px; font-weight: 700; min-width: 20px; text-align: center;
    padding: 1px 7px; border-radius: 10px; line-height: 1.5;
}
.est-header-arrow { font-size: 11px; transition: transform 0.25s ease; opacity: 0.6; }
.header-current {
    background: linear-gradient(135deg, rgba(253,224,71,0.18), rgba(250,204,21,0.1));
    border: 1px solid rgba(253,224,71,0.3);
}
.header-current .est-header-title { color: #fde047; }
.header-current .est-header-badge { background: rgba(253,224,71,0.2); color: #fde047; border: 1px solid rgba(253,224,71,0.35); }
.header-current .est-header-arrow { color: #fde047; }

.header-edits {
    background: linear-gradient(135deg, rgba(34,211,238,0.12), rgba(6,182,212,0.08));
    border: 1px solid rgba(34,211,238,0.25);
}
.header-edits .est-header-title { color: #22d3ee; }
.header-edits .est-header-badge { background: rgba(34,211,238,0.15); color: #22d3ee; border: 1px solid rgba(34,211,238,0.3); }
.header-edits .est-header-arrow { color: #22d3ee; }

.header-ready {
    background: linear-gradient(135deg, rgba(52,211,153,0.12), rgba(16,185,129,0.06));
    border: 1px solid rgba(52,211,153,0.2);
}
.header-ready .est-header-title { color: #34d399; }
.header-ready .est-header-badge { background: rgba(52,211,153,0.15); color: #34d399; border: 1px solid rgba(52,211,153,0.25); }
.header-ready .est-header-arrow { color: #34d399; }

/* --- LIST --- */
.est-list {
    min-height: 20px; padding: 8px;
    background: rgba(255,255,255,0.015);
    border: 1px solid rgba(255,255,255,0.05);
    border-top: none; border-radius: 0 0 14px 14px;
}

/* --- EMPTY STATE --- */
.est-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; padding: 20px 12px; color: rgba(255,255,255,0.25); font-size: 12px;
}
.est-empty::before {
    content: "📭"; font-size: 22px; opacity: 0.5;
}

/* --- ESTIMATE CARD --- */
.est-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-left: 3px solid rgba(253,224,71,0.6);
    border-radius: 10px; margin-bottom: 8px; padding: 10px 12px;
    display: flex; flex-direction: column; gap: 8px;
    overflow: hidden; box-sizing: border-box; width: 100%;
    transition: border-color 0.2s, background 0.2s;
    animation: est-card-in 0.3s ease-out both;
}
.est-card:hover {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.12);
}
.est-card.est-card-clickable {
    cursor: pointer;
    position: relative;
    transition: border-color 0.2s, background 0.2s, transform 0.15s, box-shadow 0.2s;
}
.est-card.est-card-clickable:hover {
    background: rgba(96,165,250,0.08);
    border-color: rgba(96,165,250,0.3);
    box-shadow: 0 2px 12px rgba(96,165,250,0.1);
    transform: translateY(-1px);
}
.est-card.est-card-clickable:active {
    transform: translateY(0);
    background: rgba(96,165,250,0.12);
}
.est-card-clickable .est-card-camera-hint {
    display: flex; align-items: center; gap: 6px;
    color: rgba(255,255,255,0.35);
    font-size: 12px; margin-left: auto; white-space: nowrap;
    transition: color 0.2s;
}
.est-card-clickable:hover .est-card-camera-hint {
    color: rgba(96,165,250,0.8);
}
.est-card-clickable .est-card-camera-hint svg {
    opacity: 0.5; transition: opacity 0.2s;
}
.est-card-clickable:hover .est-card-camera-hint svg {
    opacity: 1;
}
@keyframes est-card-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.est-card-header {
    display: flex; align-items: center; gap: 8px;
    min-width: 0; overflow: hidden;
}

.est-date {
    color: rgba(255,255,255,0.45); font-size: 11px; font-weight: 600;
    flex-shrink: 0; padding: 2px 8px; border-radius: 6px;
    background: rgba(255,255,255,0.06); letter-spacing: 0.3px;
}
.est-divider { color: rgba(255,255,255,0.15); flex-shrink: 0; font-size: 10px; }
.est-event {
    color: rgba(255,255,255,0.85); font-size: 13px; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    min-width: 0; flex: 1;
}

/* --- FILES ROW --- */
.est-files-row {
    display: flex; gap: 6px; align-items: center; justify-content: space-between; flex-wrap: wrap;
}
.est-files-left { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; flex: 1; min-width: 0; }

.est-file-link {
    display: inline-flex; align-items: center; gap: 5px;
    background: rgba(0,0,0,0.25); padding: 5px 10px; border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.08);
    text-decoration: none; color: rgba(255,255,255,0.7); font-size: 11px; font-weight: 500;
    transition: all 0.2s; white-space: nowrap;
}
.est-file-link:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.15); color: #fff; }

.est-icon-pptx {
    font-size: 10px; font-weight: 800; color: #0e0e12; padding: 2px 5px;
    border-radius: 4px; background: linear-gradient(135deg, #4ECDC4, #38A89D);
}
.est-icon-xlsx {
    font-size: 10px; font-weight: 800; color: #0e0e12; padding: 2px 5px;
    border-radius: 4px; background: linear-gradient(135deg, #2ecc71, #27ae60);
}

/* --- ACTION BUTTONS --- */
.est-actions { display: flex; gap: 5px; flex-shrink: 0; margin-left: auto; }

.est-act-btn {
    width: 30px; height: 30px; min-width: 30px; border-radius: 8px; border: none;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    font-size: 14px; transition: all 0.2s; flex-shrink: 0; box-sizing: border-box;
}
.est-act-btn:active { transform: scale(0.9); }

.btn-hide { background: rgba(148,163,184,0.10); color: rgba(148,163,184,0.85); border: 1px solid rgba(148,163,184,0.20); }
.btn-hide:hover { background: rgba(148,163,184,0.22); color: #94a3b8; border-color: rgba(148,163,184,0.40); }
.btn-delete { background: rgba(239,68,68,0.08); color: rgba(239,68,68,0.7); border: 1px solid rgba(239,68,68,0.15); }
.btn-delete:hover { background: rgba(239,68,68,0.22); color: #ef4444; border-color: rgba(239,68,68,0.4); }
.btn-delete:active { background: rgba(239,68,68,0.32); }
.btn-approve { background: rgba(34,197,94,0.08); color: rgba(34,197,94,0.7); border: 1px solid rgba(34,197,94,0.15); }
.btn-approve:hover { background: rgba(34,197,94,0.2); color: #22c55e; border-color: rgba(34,197,94,0.3); }
.btn-edit { background: rgba(59,130,246,0.08); color: rgba(59,130,246,0.7); border: 1px solid rgba(59,130,246,0.15); }
.btn-edit:hover { background: rgba(59,130,246,0.2); color: #3b82f6; border-color: rgba(59,130,246,0.3); }
.btn-camera { background: rgba(251,191,36,0.08); color: rgba(251,191,36,0.7); border: 1px solid rgba(251,191,36,0.15); }
.btn-camera:hover { background: rgba(251,191,36,0.2); color: #fbbf24; border-color: rgba(251,191,36,0.3); }

/* --- SOPROVOD GROUPS --- */
.est-sop-group { margin-bottom: 8px; }
.est-sop-group-title {
    display: flex; align-items: center; gap: 8px; padding: 8px 12px;
    border-radius: 10px; cursor: pointer; user-select: none;
    background: rgba(34,211,238,0.06); border: 1px solid rgba(34,211,238,0.15);
    transition: background 0.2s;
}
.est-sop-group-title:hover { background: rgba(34,211,238,0.1); }
.est-sop-group-title.collapsed .est-sop-arrow { transform: rotate(-90deg); }
.est-sop-pav-name { font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.75); flex: 1; }
.est-sop-pav-count {
    font-size: 10px; font-weight: 700; min-width: 18px; text-align: center;
    padding: 1px 6px; border-radius: 8px; line-height: 1.5;
    background: rgba(34,211,238,0.12); color: #22d3ee; border: 1px solid rgba(34,211,238,0.25);
}
.est-sop-arrow { font-size: 10px; color: #22d3ee; opacity: 0.6; transition: transform 0.25s ease; }
.est-sop-group-content { padding: 6px 0 0 6px; }
.est-sop-group-content.hidden { display: none; }

.est-card-sop { border-left-color: rgba(34,211,238,0.5); }

/* --- SOPROVOD DASHBOARD (tab: Сопровод) --- */
.est-sop-dashboard {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}
.est-sop-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(167,139,250,0.14), rgba(139,92,246,0.06));
    border: 1px solid rgba(167,139,250,0.22);
    flex-shrink: 0;
}
.est-sop-toolbar-main {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 0;
    flex-wrap: wrap;
}
.est-sop-toolbar-period {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex-shrink: 0;
}
.est-sop-toolbar-month {
    font-size: 15px;
    font-weight: 800;
    color: #e9d5ff;
    letter-spacing: 0.2px;
    line-height: 1.2;
}
.est-sop-toolbar-sub {
    font-size: 11px;
    font-weight: 600;
    color: rgba(233,213,255,0.55);
    letter-spacing: 0.3px;
}
.est-sop-toolbar-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 140px;
    max-width: 420px;
    margin-left: auto;
}
.est-sop-toolbar-bar {
    flex: 1;
    min-width: 80px;
    height: 8px;
    border-radius: 999px;
    background: rgba(167,139,250,0.18);
    box-shadow: inset 0 0 0 1px rgba(167,139,250,0.14);
    overflow: hidden;
}
.est-sop-toolbar-fill {
    display: block;
    height: 100%;
    min-width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, #7c3aed, #a78bfa);
    transition: width 0.6s ease, background 0.25s ease;
}
.est-sop-toolbar-progress--high .est-sop-toolbar-fill { background: linear-gradient(90deg, #16a34a, #4ade80); }
.est-sop-toolbar-progress--mid  .est-sop-toolbar-fill { background: linear-gradient(90deg, #ca8a04, #facc15); }
.est-sop-toolbar-progress--low  .est-sop-toolbar-fill { background: linear-gradient(90deg, #dc2626, #f87171); }
.est-sop-toolbar-pct {
    font-size: 12px;
    font-weight: 800;
    color: #c4b5fd;
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: 0.15px;
}
.est-sop-progress-ring {
    position: relative;
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    --ring-color: #a78bfa;
}
.est-sop-progress-ring--card {
    width: 76px;
    height: 76px;
}
.est-sop-progress-ring--toolbar {
    width: 54px;
    height: 54px;
}
.est-sop-progress-ring--high { --ring-color: #4ade80; }
.est-sop-progress-ring--mid  { --ring-color: #facc15; }
.est-sop-progress-ring--low  { --ring-color: #f87171; }
.est-sop-ring-svg {
    width: 100%;
    height: 100%;
    display: block;
}
.est-sop-ring-track {
    stroke: rgba(255,255,255,0.1);
    stroke-width: 3.5;
}
.est-sop-ring-arc {
    stroke: var(--ring-color);
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-dasharray: 125.66;
    stroke-dashoffset: calc(125.66 * (1 - var(--ring-pct, 0) / 100));
    transition: stroke-dashoffset 0.6s ease, stroke 0.25s ease;
}
.est-sop-ring-inner {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.2px;
    pointer-events: none;
    text-align: center;
}
.est-sop-progress-ring--card .est-sop-ring-inner {
    font-size: 15px;
    letter-spacing: -0.25px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    padding: 0 4px;
}
.est-sop-ring-inner--wide {
    font-size: 11.5px;
    letter-spacing: -0.55px;
    padding: 0 2px;
}
.est-sop-ring-inner--zero .est-sop-ring-done {
    color: rgba(255,255,255,0.42);
    font-weight: 700;
}
.est-sop-ring-inner--zero .est-sop-ring-total {
    color: rgba(255,255,255,0.78);
}
.est-sop-progress-ring--toolbar .est-sop-ring-inner {
    font-size: 11px;
}
.est-sop-ring-done { color: rgba(255,255,255,0.95); }
.est-sop-ring-total { color: rgba(255,255,255,0.55); }
.est-sop-ring-sep {
    color: rgba(255,255,255,0.35);
    font-size: 0.78em;
    margin: 0 1px;
    font-weight: 700;
}
.est-sop-progress-ring--card .est-sop-ring-done { color: #fff; }
.est-sop-progress-ring--card .est-sop-ring-total { color: rgba(255,255,255,0.62); }
.est-sop-toolbar .est-sop-toolbar-audit {
    margin: 0;
    flex-shrink: 0;
    height: 36px;
    padding: 0 14px 0 12px;
    border-radius: 10px;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.2px;
    text-transform: none;
    border: 1px solid rgba(56,189,248,0.32);
    background: linear-gradient(135deg, rgba(56,189,248,0.18), rgba(14,165,233,0.08));
    color: #7dd3fc;
    box-shadow: 0 2px 10px rgba(56,189,248,0.1), inset 0 1px 0 rgba(255,255,255,0.06);
    transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.12s, box-shadow 0.2s;
}
.est-sop-toolbar .est-sop-toolbar-audit:hover {
    background: linear-gradient(135deg, rgba(56,189,248,0.28), rgba(14,165,233,0.14));
    border-color: rgba(56,189,248,0.55);
    color: #e0f2fe;
    box-shadow: 0 4px 14px rgba(56,189,248,0.18), inset 0 1px 0 rgba(255,255,255,0.1);
    transform: translateY(-1px);
}
.est-sop-toolbar .est-sop-toolbar-audit:active {
    transform: translateY(0) scale(0.98);
}
.est-sop-audit-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background: rgba(56,189,248,0.14);
    border: 1px solid rgba(56,189,248,0.22);
    flex-shrink: 0;
}
.est-sop-audit-icon svg { opacity: 0.95; }
.est-sop-toolbar .est-sop-toolbar-audit:hover .est-sop-audit-icon {
    background: rgba(56,189,248,0.24);
    border-color: rgba(56,189,248,0.38);
}
.est-sop-audit-label { white-space: nowrap; line-height: 1; }

.est-sop-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 12px;
    min-width: 0;
    align-items: stretch;
}
.est-sop-grid > .est-sop-zone-card {
    grid-column: span 3;
    min-width: 0;
    min-height: 124px;
}
/* 7 зон: 4 в первом ряду, 3 по центру во втором */
.est-sop-grid--7 > .est-sop-zone-card:nth-child(5) { grid-column: 2 / span 3; }
.est-sop-grid--7 > .est-sop-zone-card:nth-child(6) { grid-column: 5 / span 3; }
.est-sop-grid--7 > .est-sop-zone-card:nth-child(7) { grid-column: 8 / span 3; }
/* 6 зон: 3 + 3 */
.est-sop-grid--6 > .est-sop-zone-card { grid-column: span 4; }
/* прочее количество — адаптивные колонки */
.est-sop-grid:not(.est-sop-grid--6):not(.est-sop-grid--7) {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.est-sop-grid:not(.est-sop-grid--6):not(.est-sop-grid--7) > .est-sop-zone-card {
    grid-column: auto;
}
.est-sop-zone-card {
    position: relative;
    display: flex;
    min-width: 0;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
    overflow: hidden;
    animation: est-card-in 0.35s ease-out both;
    transition: border-color 0.2s, background 0.2s, transform 0.18s, box-shadow 0.2s;
}
.est-sop-zone-card:hover {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.14);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.22);
}
.est-sop-zone-card[role="button"] {
    cursor: pointer;
}
.est-sop-zone-card[role="button"]:active {
    transform: translateY(0);
}
.est-sop-zone-accent {
    width: 4px;
    flex-shrink: 0;
    background: var(--sop-accent, #a78bfa);
    opacity: 0.85;
}
.est-sop-zone-body {
    flex: 1;
    min-width: 0;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px 12px 12px;
}
.est-sop-zone-top {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.est-sop-zone-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.4px;
    color: #fff;
    background: color-mix(in srgb, var(--sop-accent, #a78bfa) 22%, transparent);
    border: 1px solid color-mix(in srgb, var(--sop-accent, #a78bfa) 45%, transparent);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.est-sop-zone-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.est-sop-zone-name {
    font-size: 14px;
    font-weight: 700;
    color: rgba(255,255,255,0.92);
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.est-sop-zone-stat {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 76px;
}
.est-sop-progress-ring--card .est-sop-ring-track,
.est-sop-progress-ring--card .est-sop-ring-arc {
    stroke-width: 4;
}
.est-sop-zone-actions {
    display: flex;
    gap: 8px;
    margin-top: auto;
}
.est-sop-zone-actions--single .est-sop-act {
    flex: 1;
    justify-content: center;
}
.est-sop-act {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    border-radius: 9px;
    border: 1px solid transparent;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.12s;
    flex: 1;
    justify-content: center;
    min-width: 0;
    background: transparent;
    color: inherit;
    font-family: inherit;
}
.est-sop-act svg { flex-shrink: 0; opacity: 0.85; }
.est-sop-act--photo {
    background: rgba(251,191,36,0.1);
    border-color: rgba(251,191,36,0.22);
    color: #fcd34d;
}
.est-sop-act--photo:hover {
    background: rgba(251,191,36,0.2);
    border-color: rgba(251,191,36,0.38);
    color: #fde68a;
}
.est-sop-act--edit {
    background: rgba(96,165,250,0.1);
    border-color: rgba(96,165,250,0.22);
    color: #93c5fd;
}
.est-sop-act--edit:hover {
    background: rgba(96,165,250,0.2);
    border-color: rgba(96,165,250,0.38);
    color: #bfdbfe;
}
.est-sop-act:active { transform: scale(0.97); }
.est-sop-zone-card[role="button"]:hover .est-sop-act--photo {
    background: rgba(251,191,36,0.22);
    border-color: rgba(251,191,36,0.4);
}

.est-sop-dl-panel {
    padding: 14px 16px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(167,139,250,0.08), rgba(255,255,255,0.02));
    border: 1px solid rgba(167,139,250,0.18);
}
.est-sop-dl-panel--compact {
    margin-top: 10px;
    padding: 12px 14px;
}
.est-sop-dl-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.est-sop-dl-head-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    flex-shrink: 0;
    color: #c4b5fd;
    background: rgba(167,139,250,0.14);
    border: 1px solid rgba(167,139,250,0.22);
}
.est-sop-dl-head-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.est-sop-dl-head-title {
    font-size: 13px;
    font-weight: 800;
    color: rgba(255,255,255,0.88);
    letter-spacing: 0.15px;
}
.est-sop-dl-head-sub {
    font-size: 11px;
    font-weight: 500;
    color: rgba(255,255,255,0.42);
}
.est-sop-dl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 10px;
}
.est-sop-dl-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 12px 14px 12px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(0,0,0,0.22);
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition: background 0.18s, border-color 0.18s, transform 0.15s, box-shadow 0.18s;
}
.est-sop-dl-card:hover {
    background: rgba(255,255,255,0.05);
    border-color: color-mix(in srgb, var(--dl-accent, #a78bfa) 45%, transparent);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}
.est-sop-dl-card:active { transform: translateY(0); }
.est-sop-dl-card-accent {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--dl-accent, #a78bfa);
    opacity: 0.9;
}
.est-sop-dl-card-badge {
    flex-shrink: 0;
    margin-left: 2px;
}
.est-sop-dl-card-badge .est-icon-pptx {
    font-size: 9px;
    padding: 3px 6px;
    border-radius: 5px;
}
.est-sop-dl-card-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    justify-content: center;
}
.est-sop-dl-card-body--solo {
    gap: 0;
}
.est-sop-dl-card-title {
    font-size: 13px;
    font-weight: 800;
    color: rgba(255,255,255,0.92);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.est-sop-dl-card-zone {
    font-size: 11px;
    font-weight: 600;
    color: color-mix(in srgb, var(--dl-accent, #a78bfa) 72%, #fff);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.est-sop-dl-card-action {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    color: rgba(255,255,255,0.55);
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.est-sop-dl-card-action svg { opacity: 0.75; }
.est-sop-dl-card:hover .est-sop-dl-card-action {
    color: #fff;
    background: color-mix(in srgb, var(--dl-accent, #a78bfa) 22%, transparent);
    border-color: color-mix(in srgb, var(--dl-accent, #a78bfa) 38%, transparent);
}
.est-sop-dl-card:hover .est-sop-dl-card-action svg { opacity: 1; }
.est-sop-dl-panel--compact .est-sop-dl-head-icon {
    width: 30px;
    height: 30px;
}
.est-sop-dl-panel--compact .est-sop-dl-head-title { font-size: 12px; }
.est-sop-dl-panel--compact .est-sop-dl-card { padding: 10px 12px 10px 10px; }
.est-sop-dl-panel--compact .est-sop-dl-card-action span { display: none; }
.est-empty--sop {
    padding: 36px 16px;
    border-radius: 14px;
    border: 1px dashed rgba(167,139,250,0.25);
    background: rgba(167,139,250,0.04);
}

@media (max-width: 1024px) {
    .est-sop-grid--7,
    .est-sop-grid--6 {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
    .est-sop-grid--7 > .est-sop-zone-card,
    .est-sop-grid--6 > .est-sop-zone-card {
        grid-column: span 2;
    }
    .est-sop-grid--7 > .est-sop-zone-card:nth-child(5),
    .est-sop-grid--7 > .est-sop-zone-card:nth-child(6) {
        grid-column: span 2;
    }
    .est-sop-grid--7 > .est-sop-zone-card:nth-child(7) {
        grid-column: 3 / span 2;
    }
}
@media (max-width: 720px) {
    .est-sop-grid--7,
    .est-sop-grid--6 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .est-sop-grid--7 > .est-sop-zone-card,
    .est-sop-grid--6 > .est-sop-zone-card {
        grid-column: auto;
    }
    .est-sop-grid--7 > .est-sop-zone-card:nth-child(7) {
        grid-column: 1 / -1;
        max-width: 360px;
        justify-self: center;
        width: 100%;
    }
}
@media (max-width: 640px) {
    .est-sop-grid,
    .est-sop-grid--7,
    .est-sop-grid--6 {
        grid-template-columns: 1fr;
    }
    .est-sop-grid > .est-sop-zone-card,
    .est-sop-grid--7 > .est-sop-zone-card,
    .est-sop-grid--6 > .est-sop-zone-card {
        grid-column: 1 / -1;
        max-width: none;
        justify-self: stretch;
    }
    .est-sop-toolbar { flex-wrap: wrap; }
    .est-sop-toolbar-progress { margin-left: 0; max-width: none; min-width: 100%; order: 3; }
    .est-sop-toolbar .est-sop-audit-label { display: none; }
    .est-sop-toolbar .est-sop-toolbar-audit { padding: 0 10px; width: 40px; justify-content: center; }
}

/* --- CURRENT DASHBOARD (tab: Текущие) --- */
.est-group:has(.est-cur-dashboard) > .header-current > .est-archive-btn {
    display: none;
}
.est-cur-dashboard {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}
.est-cur-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(251,191,36,0.16), rgba(245,158,11,0.06));
    border: 1px solid rgba(251,191,36,0.24);
    flex-shrink: 0;
}
.est-cur-toolbar-main {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
    flex-wrap: wrap;
}
.est-cur-toolbar-period {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex-shrink: 0;
}
.est-cur-toolbar-title {
    font-size: 15px;
    font-weight: 800;
    color: #fde68a;
    letter-spacing: 0.2px;
    line-height: 1.2;
}
.est-cur-toolbar-sub {
    font-size: 11px;
    font-weight: 600;
    color: rgba(253,230,138,0.55);
    letter-spacing: 0.3px;
}
.est-cur-toolbar-flags {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.est-cur-toolbar-flag {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.2px;
    white-space: nowrap;
}
.est-cur-toolbar-flag--overdue {
    background: rgba(239,68,68,0.16);
    border: 1px solid rgba(239,68,68,0.28);
    color: #fca5a5;
}
.est-cur-toolbar-flag--warn {
    background: rgba(234,179,8,0.14);
    border: 1px solid rgba(234,179,8,0.28);
    color: #fde047;
}
.est-cur-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.est-cur-toolbar .est-cur-toolbar-audit,
.est-cur-toolbar .est-cur-toolbar-archive {
    margin: 0;
    flex-shrink: 0;
    height: 36px;
    padding: 0 14px 0 12px;
    border-radius: 10px;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.2px;
    text-transform: none;
    box-shadow: 0 2px 10px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.06);
    transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.12s, box-shadow 0.2s;
}
.est-cur-toolbar .est-cur-toolbar-audit {
    border: 1px solid rgba(56,189,248,0.32);
    background: linear-gradient(135deg, rgba(56,189,248,0.18), rgba(14,165,233,0.08));
    color: #7dd3fc;
    box-shadow: 0 2px 10px rgba(56,189,248,0.1), inset 0 1px 0 rgba(255,255,255,0.06);
}
.est-cur-toolbar .est-cur-toolbar-audit:hover {
    background: linear-gradient(135deg, rgba(56,189,248,0.28), rgba(14,165,233,0.14));
    border-color: rgba(56,189,248,0.55);
    color: #e0f2fe;
    transform: translateY(-1px);
}
.est-cur-toolbar .est-cur-toolbar-archive {
    border: 1px solid rgba(251,191,36,0.32);
    background: linear-gradient(135deg, rgba(251,191,36,0.16), rgba(245,158,11,0.08));
    color: #fcd34d;
}
.est-cur-toolbar .est-cur-toolbar-archive:hover {
    background: linear-gradient(135deg, rgba(251,191,36,0.26), rgba(245,158,11,0.14));
    border-color: rgba(251,191,36,0.5);
    color: #fef3c7;
    transform: translateY(-1px);
}
.est-cur-audit-icon,
.est-cur-archive-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    flex-shrink: 0;
}
.est-cur-audit-icon {
    background: rgba(56,189,248,0.14);
    border: 1px solid rgba(56,189,248,0.22);
}
.est-cur-archive-icon {
    background: rgba(251,191,36,0.14);
    border: 1px solid rgba(251,191,36,0.22);
}
.est-cur-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px;
    min-width: 0;
}
.est-cur-grid--empty {
    grid-template-columns: 1fr;
}
.est-cur-card {
    position: relative;
    display: flex;
    min-width: 0;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
    overflow: hidden;
    animation: est-card-in 0.35s ease-out both;
    transition: border-color 0.2s, background 0.2s, transform 0.18s, box-shadow 0.2s;
}
.est-cur-card:hover {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.14);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.22);
}
.est-cur-card[role="button"] { cursor: pointer; }
.est-cur-card[role="button"]:active { transform: translateY(0); }
.est-cur-card.est-card-overdue {
    border-color: rgba(239,68,68,0.35);
    box-shadow: inset 0 0 0 1px rgba(239,68,68,0.12);
}
.est-cur-card.est-card-warning {
    border-color: rgba(234,179,8,0.32);
    box-shadow: inset 0 0 0 1px rgba(234,179,8,0.1);
}
.est-cur-card-accent {
    width: 4px;
    flex-shrink: 0;
    background: var(--cur-accent, #fbbf24);
    opacity: 0.85;
}
.est-cur-card-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px 12px 12px;
}
.est-cur-card-top {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}
.est-cur-date-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 6px;
    border-radius: 10px;
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.2px;
    color: #fff;
    background: color-mix(in srgb, var(--cur-accent, #fbbf24) 22%, transparent);
    border: 1px solid color-mix(in srgb, var(--cur-accent, #fbbf24) 45%, transparent);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
    font-variant-numeric: tabular-nums;
}
.est-cur-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.est-cur-name {
    font-size: 14px;
    font-weight: 700;
    color: rgba(255,255,255,0.92);
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.est-cur-date-full {
    font-size: 10px;
    font-weight: 600;
    color: rgba(255,255,255,0.38);
    letter-spacing: 0.2px;
}
.est-cur-last-touch {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 2px;
    min-width: 0;
}
.est-cur-last-touch-avatar {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    display: grid;
    place-items: center;
    font-size: 10px;
    font-weight: 800;
    color: #4ecdc4;
    background: rgba(78, 205, 196, 0.12);
    border: 1px solid rgba(78, 205, 196, 0.22);
}
.est-cur-last-touch-meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.2;
}
.est-cur-last-touch-user {
    font-size: 10px;
    font-weight: 700;
    color: rgba(255,255,255,0.62);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.est-cur-last-touch-when {
    font-size: 9px;
    font-weight: 600;
    color: rgba(255,255,255,0.32);
    letter-spacing: 0.15px;
}
.est-cur-deadline {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
}
.est-cur-deadline .est-days-badge {
    margin-left: 0;
    margin-top: 2px;
}
.est-cur-dl-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    /* Pin the download + action button cluster to the bottom of the card so the
       chips sit right above "Фотоотчёт/Редактор" instead of floating up top. */
    margin-top: auto;
}
.est-cur-dl-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 1;
    min-width: 0;
    height: 34px;
    padding: 0 10px;
    border-radius: 9px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.82);
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.12s;
}
.est-cur-dl-chip:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.18);
    color: #fff;
    transform: translateY(-1px);
}
.est-cur-dl-chip--pptx:hover { border-color: rgba(249,115,22,0.4); }
.est-cur-dl-chip--xlsx:hover { border-color: rgba(34,197,94,0.4); }
.est-cur-dl-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.est-cur-prog {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 2px 0 2px;
}
.est-cur-prog-bar {
    flex: 1;
    height: 6px;
    border-radius: 999px;
    background: rgba(255,255,255,0.10);
    overflow: hidden;
}
.est-cur-prog-bar > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--cur-accent, #a78bfa);
    transition: width 0.35s ease;
}
.est-cur-prog-label {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255,255,255,0.62);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.est-cur-prog--full .est-cur-prog-bar > span { background: #22c55e; }
.est-cur-prog--full .est-cur-prog-label { color: #4ade80; }
.est-cur-prog--empty .est-cur-prog-label { color: rgba(255,255,255,0.4); }
.est-cur-photo-flag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    align-self: flex-start;
    padding: 3px 9px 3px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1px;
    border: 1px solid transparent;
}
.est-cur-photo-flag-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.est-cur-photo-flag--yes {
    color: #4ade80;
    background: rgba(34,197,94,0.10);
    border-color: rgba(34,197,94,0.24);
}
.est-cur-photo-flag--yes .est-cur-photo-flag-dot {
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34,197,94,0.18);
}
.est-cur-photo-flag--no {
    color: rgba(255,255,255,0.42);
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.10);
}
.est-cur-photo-flag--no .est-cur-photo-flag-dot {
    background: rgba(255,255,255,0.28);
}
.est-cur-actions {
    display: flex;
    gap: 8px;
}
.est-cur-actions--single {
    /* Contractor card has no download row, so pin its single action to the bottom. */
    margin-top: auto;
}
.est-cur-actions--single .est-cur-act {
    flex: 1;
    justify-content: center;
}
.est-cur-act {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    border-radius: 9px;
    border: 1px solid transparent;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.12s;
    flex: 1;
    justify-content: center;
    min-width: 0;
    background: transparent;
    color: inherit;
    font-family: inherit;
}
.est-cur-act svg { flex-shrink: 0; opacity: 0.85; }
.est-cur-act--photo {
    background: rgba(251,191,36,0.1);
    border-color: rgba(251,191,36,0.22);
    color: #fcd34d;
}
.est-cur-act--photo:hover {
    background: rgba(251,191,36,0.2);
    border-color: rgba(251,191,36,0.38);
    color: #fde68a;
}
.est-cur-act--edit {
    background: rgba(96,165,250,0.1);
    border-color: rgba(96,165,250,0.22);
    color: #93c5fd;
}
.est-cur-act--edit:hover {
    background: rgba(96,165,250,0.2);
    border-color: rgba(96,165,250,0.38);
    color: #bfdbfe;
}
.est-cur-act:active { transform: scale(0.97); }
.est-cur-card[role="button"]:hover .est-cur-act--photo {
    background: rgba(251,191,36,0.22);
    border-color: rgba(251,191,36,0.4);
}
.est-cur-mini-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 2px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.est-cur-mini {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.55);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.12s;
    font-family: inherit;
    padding: 0;
}
.est-cur-mini:hover {
    background: rgba(255,255,255,0.09);
    color: rgba(255,255,255,0.9);
}
.est-cur-mini--hide:hover { border-color: rgba(148,163,184,0.45); color: #cbd5e1; }
.est-cur-mini--delete:hover { border-color: rgba(239,68,68,0.45); color: #fca5a5; background: rgba(239,68,68,0.1); }
.est-cur-mini--ready:hover { border-color: rgba(34,197,94,0.45); color: #86efac; background: rgba(34,197,94,0.1); }
.est-cur-mini:active { transform: scale(0.95); }
.est-cur-add-card {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    min-height: 88px;
    padding: 16px 18px;
    margin-bottom: 0;
    border: 1.5px dashed rgba(251,191,36,0.38);
    border-radius: 14px;
    background: rgba(251,191,36,0.05);
    color: #fcd34d;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, transform 0.12s;
}
.est-cur-add-card:hover {
    background: rgba(251,191,36,0.1);
    border-color: rgba(251,191,36,0.55);
}
.est-cur-add-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: flex-start;
    min-width: 0;
}
.est-cur-add-card .est-add-btn-text {
    font-size: 13px;
    font-weight: 700;
    color: #fde68a;
}
.est-cur-add-hint {
    font-size: 10px;
    font-weight: 600;
    color: rgba(253,230,138,0.48);
    letter-spacing: 0.2px;
}
.est-empty--cur {
    text-align: center;
    padding: 8px 0 4px;
    color: rgba(255,255,255,0.42);
    font-size: 12px;
}
@media (max-width: 640px) {
    .est-cur-toolbar { flex-wrap: wrap; }
    .est-cur-toolbar-actions { width: 100%; justify-content: flex-end; }
    .est-cur-audit-label,
    .est-cur-archive-label { display: none; }
    .est-cur-toolbar .est-cur-toolbar-audit,
    .est-cur-toolbar .est-cur-toolbar-archive { padding: 0 10px; min-width: 40px; justify-content: center; }
    .est-cur-grid { grid-template-columns: 1fr; }
}

/* ── Estimate deadline badge (top-right in header) ── */
.est-days-badge {
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
    margin-left: auto;
    flex-shrink: 0;
}
.est-days-ok       { background: rgba(34,197,94,0.15);  color: #4ade80; }
.est-days-warning  { background: rgba(234,179,8,0.15);  color: #facc15; }
.est-days-overdue  { background: rgba(239,68,68,0.18);  color: #f87171; }

.est-card-overdue { border-left-color: #ef4444 !important; }
.est-card-warning { border-left-color: #eab308 !important; }

/* ── Soprovod header overall progress ── */
.est-sop-header-progress {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 8px;
    margin-right: 8px;
    flex: 1;
    min-width: 0;
}
.est-sop-hdr-bar {
    flex: 1;
    min-width: 30px;
    height: 5px;
    border-radius: 3px;
    background: rgba(255,255,255,0.08);
    overflow: hidden;
}
/* Header progress inside «Сопровод» — cyan family, slightly deeper than #22d3ee title */
.header-edits .est-sop-hdr-bar {
    background: rgba(34, 211, 238, 0.14);
    box-shadow: inset 0 0 0 1px rgba(34, 211, 238, 0.10);
}
.header-edits .est-sop-hdr-fill {
    display: block;
    height: 100%;
    min-width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, #0891b2, #06b6d4);
    transition: width 0.6s ease;
}
.header-edits .est-sop-hdr-bar .est-sop-hdr-fill[style*="width:"]:not([style*="width:0"]):not([style*="width:0%"]) {
    min-width: 2px;
}
.header-edits .est-sop-hdr-text {
    color: #67e8f9;
}
.est-sop-hdr-text {
    font-size: 10px;
    font-weight: 600;
    color: #94a3b8;
    white-space: nowrap;
}

/* ── Soprovod zone inline progress (per card) ── */
.est-sop-inline-progress {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
}
.est-sop-bar {
    flex: 1;
    min-width: 40px;
    height: 5px;
    border-radius: 3px;
    background: rgba(255,255,255,0.08);
    overflow: hidden;
}
.est-sop-fill {
    display: block;
    height: 100%;
    min-width: 0;
    border-radius: inherit;
    transition: width 0.6s ease;
}
.est-sop-hdr-bar .est-sop-fill {
    min-width: 0;
}
.est-sop-hdr-bar .est-sop-fill[style*="width:"]:not([style*="width:0"]):not([style*="width:0%"]) {
    min-width: 2px;
}
.est-sop-fill-low  { background: #ef4444; }
.est-sop-fill-mid  { background: #eab308; }
.est-sop-fill-high { background: #22c55e; }
.est-sop-inline-pct {
    font-size: 10px;
    color: #64748b;
    white-space: nowrap;
}

/* --- READY DASHBOARD (tab: Готовые) --- */
.est-rdy-dashboard {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}
.est-rdy-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(96,165,250,0.16), rgba(59,130,246,0.06));
    border: 1px solid rgba(96,165,250,0.24);
    flex-shrink: 0;
}
.est-rdy-toolbar-main {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 0;
    flex-wrap: wrap;
}
.est-rdy-toolbar-period {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex-shrink: 0;
}
.est-rdy-toolbar-title {
    font-size: 15px;
    font-weight: 800;
    color: #bfdbfe;
    letter-spacing: 0.2px;
    line-height: 1.2;
}
.est-rdy-toolbar-sub {
    font-size: 11px;
    font-weight: 600;
    color: rgba(191,219,254,0.55);
    letter-spacing: 0.3px;
}
.est-rdy-toolbar-hint {
    margin-left: auto;
    font-size: 10px;
    font-weight: 600;
    color: rgba(191,219,254,0.42);
    letter-spacing: 0.15px;
    white-space: nowrap;
}
.est-rdy-sections {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}
.est-rdy-section {
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.02);
    overflow: hidden;
}
.est-rdy-section--equip { --rdy-section-accent: #60a5fa; }
.est-rdy-section--sop   { --rdy-section-accent: #22d3ee; }
.est-rdy-section-head,
.est-rdy-year-head,
.est-rdy-month-head {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
}
.est-rdy-section-head {
    padding: 12px 14px;
    background: color-mix(in srgb, var(--rdy-section-accent, #60a5fa) 10%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--rdy-section-accent, #60a5fa) 18%, transparent);
}
.est-rdy-section-head:hover {
    background: color-mix(in srgb, var(--rdy-section-accent, #60a5fa) 16%, transparent);
}
.est-rdy-section-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    flex-shrink: 0;
    font-size: 16px;
    background: color-mix(in srgb, var(--rdy-section-accent, #60a5fa) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--rdy-section-accent, #60a5fa) 30%, transparent);
}
.est-rdy-section-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}
.est-rdy-section-title {
    font-size: 14px;
    font-weight: 800;
    color: rgba(255,255,255,0.9);
    letter-spacing: 0.15px;
}
.est-rdy-section-sub {
    font-size: 11px;
    font-weight: 600;
    color: color-mix(in srgb, var(--rdy-section-accent, #60a5fa) 70%, rgba(255,255,255,0.45));
}
.est-rdy-fold-meta {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
    color: color-mix(in srgb, var(--rdy-section-accent, #60a5fa) 85%, #fff);
    background: color-mix(in srgb, var(--rdy-section-accent, #60a5fa) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--rdy-section-accent, #60a5fa) 28%, transparent);
    white-space: nowrap;
}
.est-rdy-chevron {
    font-size: 11px;
    color: color-mix(in srgb, var(--rdy-section-accent, #60a5fa) 80%, rgba(255,255,255,0.5));
    opacity: 0.75;
    transition: transform 0.25s ease;
    flex-shrink: 0;
}
.est-rdy-section-head.collapsed .est-rdy-chevron,
.est-rdy-year-head.collapsed .est-rdy-chevron,
.est-rdy-month-head.collapsed .est-rdy-chevron {
    transform: rotate(-90deg);
}
.est-rdy-section-body.hidden,
.est-rdy-year-body.hidden,
.est-rdy-month-body.hidden {
    display: none;
}
.est-rdy-section-body {
    padding: 8px 10px 10px;
}
.est-rdy-years {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.est-rdy-year {
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.02);
    overflow: hidden;
}
.est-rdy-year-head {
    padding: 10px 12px;
    background: rgba(255,255,255,0.03);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.est-rdy-year-head:hover { background: rgba(255,255,255,0.05); }
.est-rdy-year-label {
    font-size: 13px;
    font-weight: 800;
    color: rgba(255,255,255,0.78);
    letter-spacing: 0.2px;
}
.est-rdy-year-meta {
    margin-left: auto;
    font-size: 10px;
    font-weight: 700;
    color: rgba(255,255,255,0.38);
    white-space: nowrap;
}
.est-rdy-year-body {
    padding: 8px 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.est-rdy-month {
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.05);
    background: rgba(0,0,0,0.12);
    overflow: hidden;
}
.est-rdy-month-head {
    padding: 8px 10px;
    background: rgba(255,255,255,0.02);
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.est-rdy-month-head:hover { background: rgba(255,255,255,0.04); }
.est-rdy-month-label {
    font-size: 12px;
    font-weight: 700;
    color: rgba(255,255,255,0.68);
}
.est-rdy-month-count {
    margin-left: auto;
    min-width: 22px;
    height: 20px;
    padding: 0 7px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
    color: #93c5fd;
    background: rgba(96,165,250,0.12);
    border: 1px solid rgba(96,165,250,0.22);
}
.est-rdy-month-body {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 10px;
    padding: 10px;
}
.est-rdy-month-body > .est-virt-sentinel {
    grid-column: 1 / -1;
}
.est-rdy-card {
    position: relative;
    display: flex;
    min-width: 0;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
    overflow: hidden;
    animation: est-card-in 0.35s ease-out both;
    transition: border-color 0.2s, background 0.2s, transform 0.18s, box-shadow 0.2s;
}
.est-rdy-card:hover {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.14);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}
.est-rdy-card-accent {
    width: 4px;
    flex-shrink: 0;
    background: var(--rdy-accent, #60a5fa);
    opacity: 0.85;
}
.est-rdy-card-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 11px 12px 11px 10px;
}
.est-rdy-card-top {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}
.est-rdy-date-badge,
.est-rdy-archive-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 6px;
    border-radius: 9px;
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.2px;
    color: #fff;
    background: color-mix(in srgb, var(--rdy-accent, #60a5fa) 22%, transparent);
    border: 1px solid color-mix(in srgb, var(--rdy-accent, #60a5fa) 45%, transparent);
    font-variant-numeric: tabular-nums;
}
.est-rdy-archive-badge {
    font-size: 9px;
    letter-spacing: 0.35px;
}
.est-rdy-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.est-rdy-name {
    font-size: 13px;
    font-weight: 700;
    color: rgba(255,255,255,0.9);
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.est-rdy-date-full {
    font-size: 10px;
    font-weight: 600;
    color: rgba(255,255,255,0.36);
}
.est-rdy-dl-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.est-rdy-dl-row--solo .est-rdy-dl-chip { flex: 1; }
.est-rdy-dl-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 1;
    min-width: 0;
    height: 32px;
    padding: 0 10px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.8);
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.est-rdy-dl-chip:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.18);
    color: #fff;
}
.est-rdy-dl-chip--pptx:hover { border-color: rgba(249,115,22,0.4); }
.est-rdy-dl-chip--xlsx:hover { border-color: rgba(34,197,94,0.4); }
.est-rdy-dl-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.est-empty--rdy,
.est-empty--rdy-section {
    text-align: center;
    padding: 20px 12px;
    color: rgba(255,255,255,0.42);
    font-size: 12px;
}
.est-empty--rdy-section {
    padding: 14px 10px;
    border-radius: 10px;
    border: 1px dashed rgba(96,165,250,0.22);
    background: rgba(96,165,250,0.04);
}
@media (max-width: 720px) {
    .est-rdy-toolbar-hint { display: none; }
    .est-rdy-month-body { grid-template-columns: 1fr; }
    .est-rdy-fold-meta { display: none; }
}

/* Ready tree top-level group titles */
.est-ready-top-title {
    background: rgba(52,211,153,0.06); border-color: rgba(52,211,153,0.15);
}
.est-ready-top-title:hover { background: rgba(52,211,153,0.1); }

.est-ready-year-title {
    background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.08);
}
.est-ready-year-title .est-sop-pav-name { color: rgba(255,255,255,0.6); }
.est-ready-year-title .est-sop-arrow { color: rgba(255,255,255,0.35); }

.est-ready-month-title {
    background: rgba(255,255,255,0.02); border-color: rgba(255,255,255,0.06);
}
.est-ready-month-title .est-sop-pav-name { color: rgba(255,255,255,0.5); font-size: 11px; }
.est-ready-month-title .est-sop-arrow { color: rgba(255,255,255,0.3); }
.est-ready-month-title .est-sop-pav-count {
    background: rgba(52,211,153,0.1); color: #34d399; border-color: rgba(52,211,153,0.2);
}

/* --- READY TREE VIEW --- */
.est-ready-group {
    margin-bottom: 16px;
    width: 100%;
}

.est-ready-title {
    font-size: 14px;
    font-weight: 700;
    color: #d0d0d6;
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    cursor: pointer;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(20, 20, 26, 0.95));
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.est-ready-title::after {
    content: "▾";
    font-size: 12px;
    transition: transform 0.2s;
}

.est-ready-title.collapsed::after {
    transform: rotate(-90deg);
}

.est-ready-content {
    display: block;
    padding: 10px 8px 0 10px;
}

.est-ready-content.hidden {
    display: none;
}

.est-tree-year {
    margin-bottom: 12px;
}
.est-year-title {
    font-size: 16px;
    font-weight: bold;
    color: #aaa;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 4px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.est-year-title:hover {
    background: rgba(255, 255, 255, 0.1);
}
.est-year-title::after {
    content: "▼";
    font-size: 10px;
    transition: transform 0.2s;
}
.est-year-title.collapsed::after {
    transform: rotate(-90deg);
}

.est-year-content {
    display: block;
    padding-left: 10px;
}
.est-year-content.hidden {
    display: none;
}

.est-tree-month {
    margin-top: 6px;
    margin-bottom: 6px;
    border-left: 2px solid rgba(255, 255, 255, 0.1);
    padding-left: 12px;
}

.est-month-title {
    font-size: 14px;
    color: #ccc;
    font-weight: 600;
    margin-bottom: 6px;
    text-transform: uppercase;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.est-month-title:hover {
    background: rgba(255, 255, 255, 0.05);
}
.est-month-title::after {
    content: "▼";
    font-size: 9px;
    transition: transform 0.2s;
}
.est-month-title.collapsed::after {
    transform: rotate(-90deg);
}

.est-month-content {
    display: block;
    margin-top: 6px;
}
.est-month-content.hidden {
    display: none;
}

.est-empty {
    text-align: center;
    color: #666;
    font-size: 13px;
    padding: 15px;
    font-style: italic;
}

/* Number Control in Photo Modal */
.est-num-wrapper {
    display: none;
    align-items: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    height: 36px;
    overflow: hidden;
    position: relative;
    width: 72px;
    min-width: 72px;
    flex-shrink: 0;
}

.est-num-btn {
    width: 22px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: #ffd700;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.15s;
    position: absolute;
    top: 0;
    z-index: 2;
}

.est-num-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

#estNumDec {
    left: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

#estNumInc {
    right: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.est-num-input-field {
    width: 100%;
    height: 36px;
    line-height: 36px;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    color: #fff;
    text-align: center;
    font-size: 13px;
    font-weight: bold;
    outline: none;
    padding: 0 22px;
    margin: 0;
    appearance: textfield;
    -moz-appearance: textfield;
    box-sizing: border-box;
    vertical-align: middle;
}

/* Keep "Готово" pinned to right in photo controls */
.est-photo-controls .btn-success {
    margin-left: auto;
}
.est-num-input-field::-webkit-outer-spin-button,
.est-num-input-field::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Name Input in Photo Modal */
.est-photo-name-panel {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
}

.est-photo-name-title {
    font-size: 11px;
    color: rgba(255,255,255,0.45);
    text-align: center;
    margin-bottom: 6px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    font-weight: 600;
}

.est-photo-name-row {
    margin-top: 0;
    width: 100%;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

.est-name-input {
    width: 100%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    color: #fff;
    padding: 10px 14px;
    font-size: 14px;
    outline: none;
    text-align: center;
    transition: all 0.2s;
}

.est-name-input:focus {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(78, 205, 196, 0.4);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.06);
}

.est-name-input::placeholder {
    color: #888;
}

.est-name-hints {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    max-height: 180px;
    overflow-y: auto;
    background: #161619;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
    z-index: 40;
    display: none;
}

.est-name-hints.up {
    top: auto;
    bottom: calc(100% + 6px);
}

.est-name-hints.show {
    display: block;
}

.est-name-hint-item {
    width: 100%;
    height: 34px;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: transparent;
    color: #eee;
    font-size: 13px;
    text-align: left;
    padding: 0 10px;
    cursor: pointer;
}

.est-name-hint-item:last-child {
    border-bottom: none;
}

.est-name-hint-item:hover {
    background: rgba(255, 255, 255, 0.05);
}


/* ===== Inline Slides View (replaces positions+preview) ===== */
.est-slides-inline {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    width: 100%;
    position: relative;
    animation: est-fade-in 0.25s ease;
}
@keyframes est-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---- Sticky toolbar (header) ---- */
.est-slides-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: linear-gradient(180deg, rgba(96,165,250,0.07) 0%, rgba(16,16,22,0.95) 100%);
    border-bottom: 1px solid rgba(96,165,250,0.12);
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 20;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.est-slides-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid rgba(96,165,250,0.2);
    background: rgba(96,165,250,0.06);
    color: #93c5fd;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}
.est-slides-back-btn:hover {
    background: rgba(96,165,250,0.15);
    border-color: rgba(96,165,250,0.35);
    transform: translateX(-2px);
}
.est-slides-back-btn svg { flex-shrink: 0; }

.est-slides-title-bar {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}
.est-slides-role-name {
    font-size: 12px;
    font-weight: 700;
    color: #dde;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.est-slides-count {
    font-size: 10px;
    color: #556;
    font-weight: 500;
}

.est-slides-close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid rgba(231,76,60,0.2);
    background: rgba(231,76,60,0.06);
    color: #e57373;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}
.est-slides-close-btn:hover {
    background: rgba(231,76,60,0.15);
    border-color: rgba(231,76,60,0.4);
    color: #ef5350;
}

/* ---- Slides scrollable grid ---- */
.est-slides-grid {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    background: rgba(0,0,0,0.15);
}
.est-slides-grid::-webkit-scrollbar { width: 4px; }
.est-slides-grid::-webkit-scrollbar-track { background: transparent; }
.est-slides-grid::-webkit-scrollbar-thumb { background: rgba(96,165,250,0.15); border-radius: 4px; }

/* ---- Individual slide card ---- */
.est-fsi {
    width: 100%;
    background: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    overflow: hidden;
    flex-shrink: 0;
    transition: border-color 0.25s, box-shadow 0.25s;
}
.est-fsi:not(.est-fsi-seen) {
    animation: est-card-in 0.3s ease both;
}
.est-fsi:hover {
    border-color: rgba(96,165,250,0.18);
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}
.est-fsi-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.est-fsi-badge {
    font-size: 10px;
    font-weight: 700;
    color: #60a5fa;
    background: rgba(96,165,250,0.1);
    border: 1px solid rgba(96,165,250,0.15);
    padding: 2px 8px;
    border-radius: 6px;
    white-space: nowrap;
}
.est-fsi-label {
    flex: 1;
    font-size: 11px;
    color: #667;
    font-weight: 500;
}
.est-fsi-hide {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.06);
    background: transparent;
    color: #556;
    cursor: pointer;
    transition: all 0.2s;
}
.est-fsi-hide:hover {
    background: rgba(231,76,60,0.1);
    border-color: rgba(231,76,60,0.25);
    color: #e57373;
}

/* Slide preview area */
.est-fsi-preview {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #050508;
    position: relative;
    overflow: hidden;
}
.est-fsi-preview .est-slide-wrapper {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    position: relative;
    border-radius: 0;
    border: none;
    box-shadow: none;
    cursor: default;
    margin: 0;
    background: #0a0a0f;
}
.est-fsi-preview .est-slide-wrapper:hover {
    transform: none;
    border-color: transparent;
    box-shadow: none;
    z-index: auto;
}
.est-fsi-preview > .soprovod-photo-overlay,
.est-fsi-preview .est-slide-wrapper .soprovod-photo-overlay {
    z-index: 20 !important;
}

/* Actions row */
.est-fsi-actions {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 8px 10px;
    border-top: 1px solid rgba(255,255,255,0.04);
}
.est-fsi-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 30px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
    color: #aab;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.est-fsi-btn:hover {
    transform: translateY(-1px);
}
.est-fsi-btn svg { flex-shrink: 0; }

.est-fsi-photo {
    border-color: rgba(46,204,113,0.2);
    color: #6ee7b7;
}
.est-fsi-photo:hover {
    background: rgba(46,204,113,0.1);
    border-color: rgba(46,204,113,0.35);
}
.est-fsi-delete {
    border-color: rgba(239,68,68,0.2);
    color: #f87171;
}
.est-fsi-delete:hover {
    background: rgba(239,68,68,0.1);
    border-color: rgba(239,68,68,0.35);
}

/* ===== Slide Collapse / Expand System ===== */

/* Panel wrapper */
.est-collapse-panel {
    flex-shrink: 0;
    background: linear-gradient(180deg, rgba(15,15,25,0.95) 0%, rgba(10,10,18,0.9) 100%);
    border-bottom: 1px solid rgba(96,165,250,0.06);
}

/* Small tab shown when panel is hidden */
.est-collapse-panel-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    height: 28px;
    border: none;
    border-bottom: 1px solid rgba(96,165,250,0.06);
    background: linear-gradient(180deg, rgba(96,165,250,0.04) 0%, transparent 100%);
    color: rgba(96,165,250,0.45);
    font-size: 9px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s;
    flex-shrink: 0;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.est-collapse-panel-tab:hover {
    background: linear-gradient(180deg, rgba(96,165,250,0.1) 0%, rgba(96,165,250,0.02) 100%);
    color: #60a5fa;
    border-bottom-color: rgba(96,165,250,0.15);
}
.est-panel-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: linear-gradient(135deg, rgba(96,165,250,0.2), rgba(96,165,250,0.1));
    color: #7cb3f7;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0;
}
.est-panel-tab-count:empty { display: none; }

/* Toggle button inside actions row */
.est-collapse-panel-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    border: 1px solid rgba(255,255,255,0.05);
    background: rgba(255,255,255,0.02);
    color: rgba(255,255,255,0.2);
    cursor: pointer;
    transition: all 0.2s;
    margin-left: 4px;
    flex-shrink: 0;
}
.est-collapse-panel-toggle:hover {
    background: rgba(96,165,250,0.1);
    border-color: rgba(96,165,250,0.25);
    color: #60a5fa;
    transform: translateY(-1px);
}

/* Collapse actions row */
.est-collapse-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 14px;
    gap: 8px;
    flex-shrink: 0;
}

/* Left group: buttons side by side */
.est-collapse-left {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Right group: counter + toggle */
.est-collapse-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.est-collapse-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 28px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid rgba(96,165,250,0.12);
    background: linear-gradient(135deg, rgba(96,165,250,0.06), rgba(96,165,250,0.02));
    color: rgba(96,165,250,0.6);
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s;
    letter-spacing: 0.3px;
}
.est-collapse-btn:hover {
    background: linear-gradient(135deg, rgba(96,165,250,0.15), rgba(96,165,250,0.06));
    border-color: rgba(96,165,250,0.35);
    color: #60a5fa;
    transform: translateY(-1px);
    box-shadow: 0 2px 10px rgba(96,165,250,0.1);
}
.est-collapse-btn svg { flex-shrink: 0; }
.est-collapse-btn[disabled] {
    opacity: 0.2;
    pointer-events: none;
}

/* Counter on the right */
.est-collapse-counter {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    color: rgba(255,255,255,0.25);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.est-cc-num {
    color: #60a5fa;
    font-weight: 800;
    font-size: 12px;
}
.est-cc-sep {
    color: rgba(255,255,255,0.12);
    font-weight: 400;
}
.est-cc-total {
    color: rgba(255,255,255,0.35);
    font-weight: 700;
}
.est-cc-label {
    color: rgba(255,255,255,0.18);
    font-weight: 600;
    font-size: 10px;
    margin-left: 1px;
}

/* Collapsed chip strip */
.est-fsi-collapsed-strip {
    display: none;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 14px 10px;
    flex-shrink: 0;
}
.est-fsi-collapsed-strip.has-chips {
    display: flex;
}

.est-fsi-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 36px;
    padding: 0 5px;
    border-radius: 10px;
    border: 1px solid rgba(96,165,250,0.1);
    background: linear-gradient(135deg, rgba(96,165,250,0.07), rgba(96,165,250,0.02));
    cursor: pointer;
    transition: all 0.2s ease;
    animation: est-chip-in 0.3s cubic-bezier(0.34,1.56,0.64,1) both;
    overflow: hidden;
    box-sizing: border-box;
}
.est-slides-inline .est-fsi-chip {
    width: calc((100% - 18px) / 4);
    justify-content: center;
}
.est-fsi-chip:hover {
    border-color: rgba(96,165,250,0.3);
    background: linear-gradient(135deg, rgba(96,165,250,0.14), rgba(96,165,250,0.06));
    box-shadow: 0 3px 16px rgba(96,165,250,0.12), inset 0 1px 0 rgba(96,165,250,0.08);
    transform: translateY(-2px);
}
.est-fsi-chip:active {
    transform: translateY(0) scale(0.97);
}
.est-fsi-chip-thumb {
    width: 44px;
    height: 28px;
    border-radius: 6px;
    overflow: hidden;
    background: #080810;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,0.04);
}
.est-fsi-chip-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.est-fsi-chip-label {
    font-size: 11px;
    font-weight: 800;
    color: rgba(96,165,250,0.7);
    white-space: nowrap;
    padding: 0 2px;
}
.est-fsi-chip-expand {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: rgba(96,165,250,0.08);
    color: rgba(96,165,250,0.5);
    flex-shrink: 0;
    transition: all 0.2s;
}
.est-fsi-chip:hover .est-fsi-chip-expand {
    background: rgba(96,165,250,0.18);
    color: #60a5fa;
}

/* Soprovod collapsed chips — numbers instead of photo thumbs */
.est-fsi-chip.est-fsi-chip-num-only {
    gap: 4px;
    padding: 0 4px 0 8px;
    min-height: 36px;
}
.est-fsi-chip-numbox {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    flex: 1;
    line-height: 1.05;
    gap: 1px;
    padding: 4px 0;
    text-align: center;
}
.est-fsi-chip-num-main {
    font-size: 16px;
    font-weight: 800;
    color: #bfdbfe;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 8px rgba(96,165,250,0.25);
}
.est-fsi-chip-num-sub {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.est-fsi-chip-num-of {
    color: rgba(147,197,253,0.55);
}
.est-fsi-chip-num-sep {
    color: rgba(148,163,184,0.35);
    font-weight: 400;
}
.est-fsi-chip-num-ppt {
    color: rgba(148,163,184,0.9);
}
.est-fsi-chip-num-only .est-fsi-chip-expand {
    margin-left: auto;
}
.est-fsi-chip-num-only:hover .est-fsi-chip-num-main {
    color: #dbeafe;
}
.est-fsi-chip-thumb .est-fsi-chip-numbox {
    width: 100%;
    height: 100%;
    align-items: center;
    padding: 0;
}
.est-fsi-chip-thumb .est-fsi-chip-num-main {
    font-size: 11px;
}
.est-fsi-chip-thumb .est-fsi-chip-num-sub {
    font-size: 7px;
}

/* Collapsed card state */
.est-fsi.est-fsi-collapsed,
.est-zoom-item-block.est-fsi-collapsed {
    display: none !important;
}

/* Minimize button */
.est-fsi-minimize {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    border: 1px solid rgba(96,165,250,0.1);
    background: rgba(96,165,250,0.04);
    color: rgba(96,165,250,0.4);
    cursor: pointer;
    transition: all 0.2s;
}
.est-fsi-minimize:hover {
    background: rgba(96,165,250,0.12);
    border-color: rgba(96,165,250,0.3);
    color: #60a5fa;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(96,165,250,0.1);
}

@keyframes est-chip-in {
    from { opacity: 0; transform: scale(0.8) translateY(-6px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes est-card-expand {
    from { opacity: 0.88; }
    to   { opacity: 1; }
}
.est-fsi.est-fsi-expanding,
.est-zoom-item-block.est-fsi-expanding {
    animation: est-card-expand 0.18s ease both;
}

/* Slide rendering spinner overlay */
.est-slide-rendering {
    position: absolute;
    inset: 0;
    z-index: 15;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(2px);
    border-radius: inherit;
    pointer-events: none;
    animation: est-fade-in 0.2s ease;
}
@keyframes est-fade-in { from { opacity: 0 } to { opacity: 1 } }
.est-slide-rendering::after {
    content: '';
    width: 28px;
    height: 28px;
    border: 3px solid rgba(255,255,255,0.15);
    border-top-color: rgba(96,165,250,0.85);
    border-radius: 50%;
    animation: est-spin 0.7s linear infinite;
}
@keyframes est-spin { to { transform: rotate(360deg) } }

/* Legacy slide number (keep for preview) */
.est-slide-number {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0,0,0,0.65);
    color: #fff;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    pointer-events: none;
    z-index: 20;
    backdrop-filter: blur(4px);
}

/* ═══════════════════════════════════════════════════════
   Zone Overlay — colored rects on slide previews (read-only)
   ═══════════════════════════════════════════════════════ */

.est-zone-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* Above soprovod-photo-overlay (20) so borders + labels stay visible on filled zones */
    z-index: 25;
}
.est-zone-rect {
    position: absolute;
    border: 2px solid;
    border-radius: 3px;
    box-sizing: border-box;
    pointer-events: auto;
    cursor: grab;
    transition: outline 0.15s, outline-offset 0.15s, box-shadow 0.15s;
}
.est-zone-rect.est-zone-drop-ready {
    outline: 2px dashed rgba(78,205,196,0.6);
    outline-offset: -2px;
    box-shadow: inset 0 0 0 9999px rgba(78,205,196,0.08);
    animation: est-zone-pulse 1.2s ease-in-out infinite;
}
@keyframes est-zone-pulse {
    0%, 100% { outline-color: rgba(78,205,196,0.6); }
    50% { outline-color: rgba(78,205,196,0.25); }
}
.est-zone-rect.est-zone-drop-hover {
    outline: 3px solid rgba(96,165,250,0.8);
    outline-offset: -3px;
    box-shadow: inset 0 0 0 9999px rgba(96,165,250,0.15);
    animation: none;
}
.est-zone-rect.est-zone-dragging {
    opacity: 0.5;
    cursor: grabbing;
}
.est-zone-rect .est-zone-label {
    position: absolute;
    top: 2px;
    left: 2px;
    z-index: 3;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.4px;
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
    padding: 1px 5px;
    border-radius: 3px;
    line-height: 1.3;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}
.est-zone-rect .est-zone-saving {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.45);
    border-radius: 2px;
    pointer-events: none;
    z-index: 2;
}
.est-zone-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ececec;
    color: #9e9e9e;
    pointer-events: none;
    z-index: 0;
}
/* Soprovod empty-zone stub — vertical "employee at work" plate (not embedded in PPTX) */
.est-zone-placeholder-soprovod {
    background: #000;
    padding: 0;
    overflow: hidden;
}
.est-zone-placeholder-soprovod img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
}
.est-zone-rect-empty {
    background: transparent !important;
}
/* Filled zone — solid border; photo sits under this layer via overlay z-index 20 */
.est-zone-rect-filled {
    border-style: solid !important;
    background: transparent !important;
}
/* Filled soprovod zones: hide edit chrome — photo/JPG is the UI */
.est-zone-rect-no-chrome {
    border-color: transparent !important;
    background: transparent !important;
    pointer-events: none;
}
/* While a drag is active every zone gets .est-zone-drop-ready (see app.js).
   Re-enable pointer events on filled soprovod zones during the drag ONLY so a
   photo can be dropped to replace the existing one; click-through is preserved
   the rest of the time. */
.est-zone-rect-no-chrome.est-zone-drop-ready {
    pointer-events: auto;
}
.est-zone-rect-no-chrome .est-zone-label {
    display: none !important;
}
.est-zone-saving-spinner {
    width: 22px; height: 22px;
    border: 3px solid rgba(255,255,255,0.25);
    border-top-color: #fff;
    border-radius: 50%;
    animation: zone-spin 0.7s linear infinite;
}
@keyframes zone-spin { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════════════════════
   Zone Editor — per-slide button style
   ═══════════════════════════════════════════════════════ */

.btn-zone-edit,
.est-fsi-btn.est-fsi-zone {
    color: rgba(0, 200, 255, 0.85) !important;
    border-color: rgba(0, 200, 255, 0.2) !important;
}
.btn-zone-edit:hover,
.est-fsi-btn.est-fsi-zone:hover {
    color: #00e5ff !important;
    background: rgba(0, 200, 255, 0.12) !important;
    border-color: rgba(0, 200, 255, 0.4) !important;
}

/* ═══════════════════════════════════════════════════════
   Zone Editor — direct-on-slide overlay
   ═══════════════════════════════════════════════════════ */

.est-ze-overlay {
    position: absolute;
    inset: 0;
    z-index: 50;
    cursor: crosshair;
    user-select: none;
    background: rgba(0,0,0,0.08);
}

.est-ze-bar {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 7px 10px;
    background: linear-gradient(180deg, rgba(18,20,35,0.97) 0%, rgba(12,14,25,0.95) 100%);
    border-radius: 10px;
    margin: 6px 0 2px;
    flex-wrap: wrap;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,0.06);
}

.est-ze-bar-btn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.75);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.est-ze-bar-btn:hover {
    background: rgba(255,255,255,0.16);
    color: #fff;
}
.est-ze-bar-cancel {
    border-color: rgba(255,82,82,0.3);
    color: rgba(255,120,120,0.85);
}
.est-ze-bar-cancel:hover {
    background: rgba(255,82,82,0.15);
    color: #ff8a80;
}
.est-ze-bar-save {
    border-color: rgba(76,175,80,0.4) !important;
    background: rgba(76,175,80,0.12) !important;
    color: #81c784 !important;
}
.est-ze-bar-save:hover {
    background: rgba(76,175,80,0.25) !important;
    color: #a5d6a7 !important;
}
.est-ze-bar-reset {
    border-color: rgba(255,193,7,0.25);
    color: rgba(255,193,7,0.8);
}
.est-ze-bar-reset:hover {
    background: rgba(255,193,7,0.12);
    color: #ffd54f;
}

.est-ze-bar-count {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255,255,255,0.55);
    margin-left: auto;
    letter-spacing: 0.3px;
}

.est-ze-bar-presets {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 4px;
    border-radius: 8px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
}
.est-ze-bar-preset {
    padding: 3px 9px;
    font-size: 10.5px;
    border-color: rgba(96,165,250,0.25);
    color: rgba(147,197,253,0.85);
}
.est-ze-bar-preset:hover {
    background: rgba(96,165,250,0.18);
    color: #bfdbfe;
    border-color: rgba(96,165,250,0.55);
}
.est-ze-bar-preset-active {
    background: rgba(96,165,250,0.28) !important;
    border-color: rgba(96,165,250,0.7) !important;
    color: #e0ecff !important;
    box-shadow: 0 0 0 1px rgba(96,165,250,0.35) inset;
}

/* Zones inside editor overlay */
.est-ze-zone {
    position: absolute;
    border: 2.5px dashed;
    border-radius: 3px;
    box-sizing: border-box;
    cursor: move;
    transition: box-shadow 0.12s;
    z-index: 5;
    overflow: hidden;
}
.est-ze-zone:hover { filter: brightness(1.1); }
.est-ze-zone.est-ze-selected { z-index: 6; }

.est-ze-zone .est-ze-zone-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    opacity: 0.75;
    border-radius: 1px;
    background: rgba(0,0,0,0.15);
}
.est-ze-zone.est-ze-selected .est-ze-zone-photo { opacity: 0.9; }

.est-ze-zone .est-ze-zone-label {
    position: absolute;
    top: 3px;
    left: 3px;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
    user-select: none;
    cursor: text;
    padding: 1px 6px;
    border-radius: 3px;
    color: #fff;
    line-height: 1.3;
    z-index: 2;
}

/* Resize handles */
.est-ze-handle {
    position: absolute;
    width: 10px;
    height: 10px;
    border: 2px solid #fff;
    border-radius: 2px;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.12s;
    box-shadow: 0 0 3px rgba(0,0,0,0.5);
}
.est-ze-zone.est-ze-selected .est-ze-handle,
.est-ze-zone:hover .est-ze-handle { opacity: 1; }
.est-ze-handle.est-ze-nw { top: -5px; left: -5px; cursor: nw-resize; }
.est-ze-handle.est-ze-ne { top: -5px; right: -5px; cursor: ne-resize; }
.est-ze-handle.est-ze-sw { bottom: -5px; left: -5px; cursor: sw-resize; }
.est-ze-handle.est-ze-se { bottom: -5px; right: -5px; cursor: se-resize; }
.est-ze-handle.est-ze-n  { top: -5px; left: 50%; transform: translateX(-50%); cursor: n-resize; }
.est-ze-handle.est-ze-s  { bottom: -5px; left: 50%; transform: translateX(-50%); cursor: s-resize; }
.est-ze-handle.est-ze-e  { top: 50%; right: -5px; transform: translateY(-50%); cursor: e-resize; }
.est-ze-handle.est-ze-w  { top: 50%; left: -5px; transform: translateY(-50%); cursor: w-resize; }

/* Drawing preview rect */
.est-ze-draw-rect {
    position: absolute;
    border: 2px dashed #00e676;
    background: rgba(0,230,118,0.08);
    border-radius: 3px;
    pointer-events: none;
    z-index: 20;
}

/* Label inline edit */
.est-ze-label-input {
    position: absolute;
    background: #fff;
    color: #222;
    border: 2px solid #1e88e5;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 6px;
    outline: none;
    z-index: 30;
    min-width: 50px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* ===== SOPROVOD ZONES ===== */
.est-slide-count {
    margin-left: auto;
    font-size: 11px;
    color: #64748b;
    font-weight: 400;
}
/* ===== Zone Role Rows ===== */
.sop-place-section {
    margin-bottom: 16px;
}
.sop-place-section:last-child { margin-bottom: 0; }
.sop-place-label {
    font-size: 11px;
    font-weight: 700;
    color: #60a5fa;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 10px;
    padding: 8px 12px;
    background: linear-gradient(135deg, rgba(96,165,250,0.1), rgba(96,165,250,0.04));
    border-left: 3px solid #60a5fa;
    border-radius: 0 8px 8px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}
.sop-place-label::before {
    content: '📍';
    font-size: 12px;
}

/* Equipment category group */
.sop-equip-group {
    margin-bottom: 10px;
    border-radius: 10px;
    background: rgba(255,255,255,0.015);
    border: 1px solid rgba(255,255,255,0.04);
    overflow: hidden;
}
.sop-equip-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--eq-color) 8%, transparent), transparent);
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.sop-equip-icon {
    font-size: 14px;
    flex-shrink: 0;
}
.sop-equip-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--eq-color);
    flex: 1;
}
.sop-equip-count {
    font-size: 10px;
    font-weight: 700;
    color: var(--eq-color);
    background: color-mix(in srgb, var(--eq-color) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--eq-color) 25%, transparent);
    border-radius: 8px;
    padding: 1px 7px;
    min-width: 18px;
    text-align: center;
}
.sop-equip-items {
    padding: 2px 0;
}

.sop-contr-block {
    margin-bottom: 4px;
    margin-left: 4px;
}
.sop-contr-label {
    font-size: 10px;
    font-weight: 700;
    color: #4ECDC4;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 8px 2px;
    opacity: 0.7;
}
.sop-role-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px 9px 16px;
    cursor: pointer;
    transition: background 0.18s;
    position: relative;
    min-height: 38px;
}
.sop-role-row:hover {
    background: rgba(255,255,255,0.03);
}
.sop-role-row:active {
    background: rgba(255,255,255,0.05);
}
.sop-role-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    flex-shrink: 0;
    opacity: 0.5;
    transition: opacity 0.15s;
}
.sop-role-row:hover .sop-role-dot { opacity: 1; }
.sop-role-ico {
    opacity: 0.4;
    flex-shrink: 0;
    transition: opacity 0.15s;
}
.sop-role-row:hover .sop-role-ico { opacity: 0.85; }
.sop-role-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    text-align: left;
}
.sop-role-name {
    font-size: 12px;
    font-weight: 500;
    color: #cbd5e1;
    text-align: left;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}
.sop-role-contractor {
    font-size: 10px;
    font-weight: 600;
    color: #64748b;
    letter-spacing: 0.3px;
}
.sop-role-row:hover .sop-role-name { color: #f1f5f9; }
.sop-role-row:hover .sop-role-contractor { color: #94a3b8; }
.sop-role-cnt {
    flex-shrink: 0;
    min-width: 22px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    border-radius: 10px;
    padding: 0 6px;
    border: 1px solid;
}
.sop-role-arrow {
    font-size: 16px;
    color: rgba(255,255,255,0.08);
    flex-shrink: 0;
    transition: all 0.18s;
}
.sop-role-row:hover .sop-role-arrow {
    color: rgba(255,255,255,0.25);
    transform: translateX(2px);
}

.sop-role-row.est-pos-approved {
    background: rgba(52,211,153,0.04);
}
.sop-role-row.est-pos-approved .sop-role-name {
    color: #6ee7b7;
}
.sop-role-row.est-pos-approved .sop-role-dot {
    background: #34d399 !important;
    opacity: 1;
}
.sop-role-row.est-pos-approved .sop-role-ico {
    opacity: 0.8;
}

.sop-downloads {
    padding: 10px 4px 4px;
    border-top: 1px solid rgba(255,255,255,0.06);
    margin-top: 10px;
}
.sop-dl-title {
    font-size: 10px;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
    padding: 0 4px;
}
.sop-dl-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    color: #94a3b8;
    text-decoration: none;
    font-size: 12px;
    border-radius: 6px;
    transition: background 0.15s;
}
.sop-dl-link:hover { background: rgba(255,255,255,0.05); color: #e2e8f0; }

/* === Previous month soprovod section (1st-5th of each month) === */
.est-prev-month-section {
    margin-top: 16px;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    background: rgba(255,255,255,0.015);
    overflow: hidden;
}
.est-prev-month-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}
.est-prev-month-header:hover { background: rgba(255,255,255,0.03); }
.est-prev-month-arrow {
    font-size: 14px;
    color: rgba(255,255,255,0.3);
    transition: transform 0.25s;
    flex-shrink: 0;
    width: 14px;
    text-align: center;
}
.est-prev-month-section.expanded .est-prev-month-arrow { transform: rotate(90deg); }
.est-prev-month-title {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,0.5);
    flex: 1;
}
.est-prev-month-badge {
    font-size: 10px;
    font-weight: 700;
    color: #fbbf24;
    background: rgba(251,191,36,0.1);
    border: 1px solid rgba(251,191,36,0.15);
    padding: 2px 8px;
    border-radius: 6px;
    letter-spacing: 0.3px;
    white-space: nowrap;
}
.est-prev-month-body {
    display: none;
    padding: 2px 10px 10px;
}
.est-prev-month-section.expanded .est-prev-month-body { display: block; }
.est-prev-month-body .est-sop-zone-card { opacity: 0.78; }
.est-prev-month-body .est-sop-zone-card:hover { opacity: 1; }

/* === Role-based report restrictions (pro_contractor / contractor) === */
body[data-app-reports-restricted="1"] .est-add-presentation-btn,
body[data-app-reports-restricted="1"] .est-cur-add-card { display: none !important; }
body[data-app-reports-restricted="1"] .est-act-btn.btn-edit,
body[data-app-reports-restricted="1"] .est-cur-act.btn-edit,
body[data-app-reports-restricted="1"] .est-cur-act--edit { display: none !important; }
body[data-app-reports-restricted="1"] .est-act-btn.btn-hide,
body[data-app-reports-restricted="1"] .est-cur-mini.btn-hide,
body[data-app-reports-restricted="1"] .est-cur-mini--hide { display: none !important; }
body[data-app-reports-restricted="1"] .est-act-btn.btn-delete,
body[data-app-reports-restricted="1"] .est-cur-mini.btn-delete,
body[data-app-reports-restricted="1"] .est-cur-mini--delete { display: none !important; }
body[data-app-reports-restricted="1"] .est-act-btn.btn-approve,
body[data-app-reports-restricted="1"] .est-cur-mini.btn-approve,
body[data-app-reports-restricted="1"] .est-cur-mini--ready { display: none !important; }
body[data-app-reports-restricted="1"] .est-file-link,
body[data-app-reports-restricted="1"] .est-cur-dl-chip { display: none !important; }
body[data-app-reports-restricted="1"] .sop-dl-link,
body[data-app-reports-restricted="1"] .est-sop-dl-card { display: none !important; }
body[data-app-reports-restricted="1"] .sop-downloads,
body[data-app-reports-restricted="1"] .est-sop-dl-panel { display: none !important; }
body[data-app-reports-restricted="1"] .est-sop-act--edit { display: none !important; }
body[data-app-reports-restricted="1"] .est-group:has(.header-ready) { display: none !important; }
body[data-app-reports-restricted="1"] .est-stat[data-type="ready"] { display: none !important; }
body[data-app-reports-restricted="1"] .est-stat-divider:has(+ .est-stat[data-type="ready"]) { display: none !important; }

/* ===== Slide Presence Avatars ===== */
.est-presence-group {
  position: absolute;
  bottom: 4px;
  right: 4px;
  display: flex;
  align-items: center;
  z-index: 5;
  pointer-events: none;
}
.est-slide-wrapper .est-presence-group {
  bottom: auto;
  top: 3px;
  right: 3px;
}
.est-presence-avatar {
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #60a5fa, #a78bfa);
  border: 2px solid rgba(20,20,28,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  overflow: hidden;
  flex-shrink: 0;
  animation: est-presence-in 0.3s ease both;
}
.est-presence-avatar + .est-presence-avatar {
  margin-left: -10px;
}
.est-slide-wrapper .est-presence-avatar {
  width: 20px;
  height: 20px;
  font-size: 9px;
  border-width: 1.5px;
}
.est-slide-wrapper .est-presence-avatar + .est-presence-avatar {
  margin-left: -7px;
}
.est-presence-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
@keyframes est-presence-in {
  from { transform: scale(0); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* ── Touch drag (mobile) ────────────────────────────── */
img[draggable="true"],
.est-zone-rect[draggable="true"],
.pr-picker-thumb,
.pr-drawer-thumb,
.pr-inline-photo {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.touch-drag-ghost {
  position: fixed;
  z-index: 999999;
  pointer-events: none;
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
  opacity: 0.92;
  overflow: hidden;
  transition: transform 0.12s ease;
}
.touch-drag-ghost img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.touch-drag-source {
  opacity: 0.3 !important;
  transition: opacity 0.15s;
}