:root{
  --edge-y: clamp(56px, 10vh, 120px); /* верхний отступ UI */
 --gap-row: clamp(14px, 1.6vw, 22px);
 --fs-ttl: clamp(1.0rem, 2.5vw, 2.6rem);
 --fs-yr: clamp(1.3rem, 2vw, 2rem);
 --fs-meta: clamp(1.0rem, 1.5vw, 1.5rem);
 }

 /* Основная область с маркой и UI - правильная разбивка в процентах */
 #uiOverlay.ui-grid{
 position: absolute;
 top: 0; left: 0; right: 0; bottom: 0;
 height: 100vh;
 z-index: 5;
 display: none; /* скрыт по умолчанию */
 grid-template-rows: 5vh 70vh 25vh; /* верхнее меню 10%, основная область 70%, нижняя навигация 20% */
 grid-template-columns: 25vw 50vw 25vw; /* горизонтальная сетка для основного контента */
 align-content: start;
 pointer-events: none; /* не блокируем канвас */
 
 /* Анимация появления */
 opacity: 0;
 transition: opacity 0.5s ease-in-out;
 }

 /* Класс для показа UI с анимацией */
 #uiOverlay.ui-grid.show {
 opacity: 1;
 }
 
 /* Верхнее меню внутри uiOverlay */
 #topBarMenu.ui-top {
 grid-row: 1;
 grid-column: 1 / span 3; /* растягиваем на всю ширину */
 background: transparent; /* прозрачный фон */
 border-bottom: none; /* убираем границу */
 display: none;
 align-items: center;
 justify-content: center;
 padding: 1rem;
 pointer-events: auto;
 }
 
 /* Стили для кнопок меню */
 .menu-nav {
 display: flex;
 align-items: center;
 background: #e5e5e5;
 border-radius: clamp(15px, 4vw, 20px); /* адаптивный border-radius */
 padding: 0;
 width: 95%;
 height: clamp(25px, 8vh, 45px); /* адаптивная высота */
 box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
 }
 
 .menu-btn {
 padding: clamp(0.3rem, 1vh, 0.5rem) clamp(1rem, 3vw, 2rem); /* адаптивный padding */
 border: none;
 border-radius: clamp(15px, 4vw, 20px); /* адаптивный border-radius */
 font-size: clamp(0.7rem, 1.5vw, 0.85rem); /* адаптивный размер шрифта */
 font-weight: 400;
 cursor: pointer;
 transition: all 0.2s ease;
 white-space: nowrap;
 background: #e5e3d6;
 color: #666;
 margin: 0;
 flex: 1;
 text-align: center;
 height: 100%;
 display: none;
 align-items: center;
 justify-content: center;
 }
 
 .menu-btn:hover {
 color: #555;
 }
 
 .menu-btn.active {
 background: #6b7b8c !important;
 color: white !important;
 }
 
 .menu-btn.active:hover {
 background: #5d6d7e !important;
 color: white !important;
 }
 
 /* Основная область с маркой (средний ряд) */
 .ui-left, .ui-right{
 grid-row: 2;
 pointer-events: auto;
 box-sizing: border-box;
 }
 
 .ui-left { 
 grid-column: 1;
 padding-left: clamp(24px,5vw,64px);
 padding-right: clamp(10px,.8vw,18px);
 padding-top: clamp(16px,2vh,32px);
 overflow: hidden; 
 }

/* Небольшой общий отступ для всех элементов слева (только в stamp browser) */
.stamp-browser-active #uiOverlay .ui-left > * {
  margin-left: clamp(8px, 1vw, 16px);
}
 
 .ui-center{ 
 grid-column: 2; 
 grid-row: 2; 
 }
 
 .ui-right { 
 grid-column: 3;
 padding-right: clamp(24px,5vw,64px);
 padding-top: clamp(16px,2vh,32px);
 overflow: hidden; 
 }

/* В режиме stamp browser скрываем правую колонку */
.stamp-browser-active #uiOverlay .ui-right {
  display: none;
}
 
 /* Нижняя навигация внутри uiOverlay */
#bottomBarMenu.ui-bottom {
 grid-row: 3;
 grid-column: 1 / span 3;
 background: transparent;
 border-top: 1px solid rgba(0, 0, 0, 0.1);
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: flex-start;
 padding: 1rem;
 padding-top: 0.5rem;
 margin-top: 1vh;
 pointer-events: auto;
 }
 
 /* ========== ТИПОГРАФИКА ========== */
 .ttl { 
 font: 700 var(--fs-ttl) 'Josefin Sans',sans-serif; 
 line-height: 1; 
 white-space: nowrap; 
 }
 
 .year { 
 font: 100 var(--fs-yr) 'Inter',sans-serif; 
 font-style: italic; 
 color: rgba(0,0,0,.6); 
 line-height: 1; 
 white-space: nowrap; 
 margin-top: .35em; 
 }
 
 .author { 
 display: inline-flex; 
 align-items: baseline; 
 gap: var(--gap-row); 
 line-height: 1; 
 white-space: nowrap; 
 margin-top: .3em !important; /* попробуем маленькое значение */
 font-size: var(--fs-meta); 
 }
 
 .by { 
 font-family: 'Josefin Sans',sans-serif; 
 font-style: italic; 
 color: #6b5b5b; 
 }
 
 .ed { 
 font-family: 'Josefin Sans',sans-serif; 
 }
 
 .ed .num { 
 font-variant-numeric: lining-nums tabular-nums; 
 font-feature-settings: "lnum","tnum"; 
 }
 
 .sep-v { 
 width: 0; 
 border-left: 1px solid rgba(0,0,0,.35); 
 height: 1em; 
 align-self: center; 
 transform: translateY(.02em); 
 }
 
 #rightDesc { 
 line-height: clamp(1.2, 1.35, 1.5); 
 font-size: clamp(16px,1.4vw,22px); 
 color: #666464;
 white-space: normal !important;
  text-align: left;
 }
 
 /* ========== ПРЕВЬЮ МАРОК В НИЖНЕЙ ПАНЕЛИ ========== */
.stamp-selector-text {
  font-family: 'Josefin Sans', sans-serif;
  font-size: clamp(0.2rem, 1.5vw, 1rem);
  font-weight: 400;
  color: #888;
  text-align: center;
  margin-bottom: clamp(8px, 1.5vh, 16px);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.stamp-previews-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 1.2vw, 12px);
  width: 100%;
  flex-wrap: wrap;
}

.stamp-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: clamp(4px, 0.8vh, 8px);
  border-radius: clamp(4px, 0.8vw, 6px);
  background: rgba(255, 255, 255, 0.05);
  border: none;
  min-width: 0;
  position: relative;
}

.stamp-preview:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-1px);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.4), 
              0 0 40px rgba(255, 255, 255, 0.2);
}

.stamp-preview.active {
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 
              0 0 60px rgba(255, 255, 255, 0.3),
              0 0 90px rgba(255, 255, 255, 0.1);
}

.preview-canvas {
  width: clamp(40px, 6vw, 60px);
  height: clamp(40px, 6vw, 60px);
  background: transparent;
  border: none;
  margin-bottom: clamp(3px, 0.5vh, 6px);
  object-fit: cover;
  

}

.preview-label {
  font-family: 'Josefin Sans', sans-serif;
  font-size: clamp(0.5rem, 0.9vw, 0.65rem);
  font-weight: 500;
  color: #666;
  text-align: center;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  line-height: 1;
}

.stamp-preview:hover .preview-label {
  color: #333;
}

.stamp-preview.active .preview-label {
  color: #6b7b8c;
  font-weight: 600;
}

/* Отладочные контуры скрыты в проде */

/* ========== КНОПКИ STAMP BROWSER ========== */
.stamp-save-btn {
  display: none;
  width: 100%;
  margin-top: auto;
  align-self: stretch;
  text-align: center;
}

/* Ховер-стили берутся из address.css через #stampSaveBtn:hover */

/* Временно скрыто даже в режиме браузера марок */
.stamp-browser-active #uiOverlay .stamp-save-btn {
  display: none;
}

/* Описание слева внизу для stamp browser */
#leftDesc {
  display: none;
  margin-top: auto; /* прижать вниз */
  color: #666464;
  line-height: 1.35;
  font-weight: 300; /* тоньше */
  font-size: clamp(12px, 1.2vw, 16px); /* b) и тоньше */
  white-space: pre-line; /* отображать \n как переносы */
}

.stamp-browser-active #uiOverlay #leftDesc {
  display: block;
}

/* Простое решение - фиксированное позиционирование левого блока */
.ui-left {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  height: 100% !important;
  padding-top: clamp(16px,2vh,32px);
  padding-bottom: clamp(16px,2vh,32px);
}

/* ========== МОБИЛЬНАЯ ВЕРСИЯ STAMP BROWSER ========== */
/* На мобильных устройствах показываем текст в правой колонке вместо левой */
@media (max-width: 1024px) {
  /* В режиме stamp browser на мобильных показываем правую колонку */
  body.stamp-browser-active #uiOverlay .ui-right {
    display: block !important;
  }
  
  /* Показываем описание в правой колонке на мобильных */
  body.stamp-browser-active #uiOverlay #rightDesc {
    display: block !important;
    font-size: clamp(8px, 0.7vw, 11px) !important; /* Уменьшаем в два раза */
  }
  
  /* Скрываем левое описание на мобильных */
  body.stamp-browser-active #uiOverlay #leftDesc {
    display: none !important;
  }
  
  /* Делаем левый блок относительным для позиционирования превью внутри него */
  body.stamp-browser-active #uiOverlay .ui-left {
    position: relative !important;
    overflow: visible !important; /* Разрешаем видимость абсолютно позиционированных элементов */
  }
  
  /* Перемещаем нижний блок выбора марок внутрь левого блока на мобильных */
  /* Используем grid positioning для размещения в левой колонке по центру */
  body.stamp-browser-active #uiOverlay #bottomBarMenu {
    grid-row: 2 !important; /* Та же строка, что и ui-left */
    grid-column: 1 !important; /* Левая колонка */
    align-self: center !important; /* По центру строки по вертикали */
    justify-self: center !important; /* По центру колонки по горизонтали */
    width: 100% !important;
    height: auto !important;
    border-top: none !important;
    border-left: none !important;
    padding: 0.5rem clamp(8px, 1vw, 16px) clamp(16px, 2vh, 32px) clamp(8px, 1vw, 16px) !important;
    margin: 0 !important;
    align-items: center !important; /* Центрируем содержимое по вертикали */
    justify-content: center !important; /* Центрируем содержимое по горизонтали */
    background: transparent !important;
    z-index: 10 !important;
    display: flex !important; /* Убеждаемся, что элемент виден */
  }
  
  /* Настраиваем превью марок внутри левого блока на мобильных - горизонтально, по центру */
  body.stamp-browser-active #uiOverlay .stamp-previews-container {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(4px, 1vw, 8px) !important;
    flex-wrap: wrap !important;
    width: 100% !important;
  }
  
  body.stamp-browser-active #uiOverlay .stamp-preview {
    width: auto !important;
    min-width: auto !important;
  }
}