/* =========================================================
   TOPPIO EDITOR — REDESIGN 2026
   Только визуальный слой.
   JS и логика редактора не изменяются.
   ========================================================= */

/* ---------- БАЗА ---------- */

:root{
  --tp-bg:#f7f3ef;
  --tp-card:#ffffff;
  --tp-card-soft:#fffaf7;
  --tp-brown:#4a241b;
  --tp-brown-dark:#351912;
  --tp-text:#30221e;
  --tp-muted:#8a7d77;
  --tp-border:#eadfd8;
  --tp-pink:#e58aa5;
  --tp-pink-light:#f8e5eb;
  --tp-shadow:0 12px 35px rgba(74,36,27,.08);
  --tp-shadow-soft:0 5px 20px rgba(74,36,27,.06);
  --tp-radius:20px;
  --tp-radius-small:13px;
}

/* редактор */

body{
  background:
    radial-gradient(circle at 50% -20%,#fff 0,transparent 45%),
    var(--tp-bg);
  color:var(--tp-text);
}

main{
  max-width:1700px;
  padding:22px 24px 40px;
}

/* ---------- ВЕРХНЯЯ ПАНЕЛЬ ---------- */

.toolbar{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px;
  margin-bottom:18px;

  background:rgba(255,255,255,.88);
  border:1px solid rgba(234,223,216,.9);
  border-radius:18px;
  box-shadow:var(--tp-shadow-soft);

  backdrop-filter:blur(10px);
}

.toolbar button,
.toolbar .upload{
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  border:1px solid var(--tp-border);
  border-radius:12px;

  padding:0 16px;

  background:#fff;
  color:var(--tp-text);

  font-size:14px;
  font-weight:650;

  box-shadow:0 2px 7px rgba(74,36,27,.035);

  transition:
    transform .15s ease,
    box-shadow .15s ease,
    background .15s ease,
    border-color .15s ease;
}

.toolbar button:hover,
.toolbar .upload:hover{
  transform:translateY(-1px);
  border-color:#ddcbc1;
  box-shadow:0 7px 18px rgba(74,36,27,.09);
}

.toolbar .upload{
  background:var(--tp-brown);
  color:#fff;
  border-color:var(--tp-brown);
}

.toolbar .upload:hover{
  background:var(--tp-brown-dark);
}

.toolbar #packBtn{
  background:var(--tp-pink-light);
  border-color:#f0cbd6;
  color:#7c394f;
}

.toolbar #packBtn:hover{
  background:#f5d7e0;
}

.toolbar button:disabled{
  opacity:.42;
  transform:none;
  box-shadow:none;
}

/* ---------- ОСНОВНОЙ РЕДАКТОР ---------- */

.workspace{
  display:grid;
  grid-template-columns:285px minmax(500px,1fr) 345px;
  gap:18px;
  align-items:start;
}

/* ---------- КАРТОЧКИ ---------- */

.workspace > aside,
.sheetWrap{
  background:var(--tp-card);
  border:1px solid var(--tp-border);
  border-radius:var(--tp-radius);
  box-shadow:var(--tp-shadow);
}

/* ---------- ЛЕВАЯ КОЛОНКА ---------- */

.workspace > aside:first-child{
  padding:18px;
  min-height:650px;
  overflow:hidden;
}

.workspace > aside:first-child h3{
  margin:2px 2px 15px;
  font-size:17px;
  line-height:1.2;
  color:var(--tp-text);
}

.workspace > aside:first-child h3::after{
  content:"";
  display:block;
  width:34px;
  height:3px;
  margin-top:9px;
  border-radius:99px;
  background:var(--tp-pink);
}

/* элементы */

#elements{
  display:flex;
  flex-direction:column;
  gap:9px;
}

#elements .el{
  padding:10px;
  border:1px solid #eee4df;
  border-radius:14px;
  background:#fff;

  transition:
    border-color .15s ease,
    background .15s ease,
    box-shadow .15s ease,
    transform .15s ease;
}

#elements .el:hover{
  transform:translateY(-1px);
  border-color:#e4cfc5;
  box-shadow:0 7px 18px rgba(74,36,27,.07);
}

#elements .thumb{
  height:125px;
  border-radius:10px;
  border:1px solid #eee7e3;
  background-color:#faf8f6;
}

#elements .row{
  margin-top:8px;
}

#elements .row strong,
#elements .row b{
  color:var(--tp-text);
  font-size:13px;
}

#elements .editBtn{
  border:1px solid var(--tp-border);
  border-radius:9px;
  background:#fff;
  color:var(--tp-brown);
  cursor:pointer;
}

#elements .editBtn:hover{
  background:var(--tp-pink-light);
  border-color:#efc9d5;
}

/* ---------- ЦЕНТРАЛЬНЫЙ ЛИСТ ---------- */

.sheetWrap{
  padding:18px;
  min-height:650px;
  background:
    linear-gradient(180deg,#fff 0,#fffdfa 100%);
}

.sheetTitle{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  margin:0 0 15px;

  color:var(--tp-muted);
  font-size:12px;
  font-weight:650;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.sheetTitle::before,
.sheetTitle::after{
  content:"";
  width:28px;
  height:1px;
  background:#e8ddd7;
}

.sheet{
  width:min(100%,940px);
  aspect-ratio:297/210;

  background:#fff;

  border:1px solid #ded5d0;
  border-radius:4px;

  box-shadow:
    0 3px 5px rgba(74,36,27,.05),
    0 18px 45px rgba(74,36,27,.13);

  overflow:hidden;
}

/* пустой лист */

.sheet .empty{
  color:#b2a6a0;
  font-size:14px;
}

.sheet .empty::before{
  content:"✦";
  display:block;
  margin-bottom:8px;
  color:#e7b2c1;
  font-size:24px;
}

/* элементы на листе */

.sheetItem{
  transition:filter .15s ease;
}

.sheetItem:hover{
  filter:drop-shadow(0 4px 8px rgba(74,36,27,.13));
}

.sheetNumber{
  background:var(--tp-brown) !important;
  color:#fff !important;
  box-shadow:0 3px 8px rgba(74,36,27,.2);
}

/* выбранный элемент */

.sheetItem.selected{
  outline:2px solid var(--tp-pink);
  outline-offset:4px;
}

/* ---------- ПРАВАЯ КОЛОНКА ---------- */

.workspace > .editor{
  min-height:650px;
  padding:18px;

  background:var(--tp-card);
  border:1px solid var(--tp-border);
  border-radius:var(--tp-radius);
  box-shadow:var(--tp-shadow);
}

/* ---------- КОНТРОЛЫ МАКЕТА ---------- */

.layoutControls{
  color:var(--tp-text);
}

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

  padding:5px;
  margin-bottom:17px;

  background:#f8f4f1;
  border:1px solid #eee3dd;
  border-radius:13px;
}

.layoutMode span{
  grid-column:1/-1;
  padding:3px 5px 5px;

  color:var(--tp-muted);
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.layoutMode button{
  min-height:38px;
  border:0;
  border-radius:9px;

  background:transparent;
  color:#82736c;

  font-weight:650;
  cursor:pointer;

  transition:.15s ease;
}

.layoutMode button:hover{
  color:var(--tp-brown);
}

.layoutMode button.active{
  background:#fff;
  color:var(--tp-brown);
  box-shadow:0 3px 10px rgba(74,36,27,.08);
  outline:none;
}

/* заголовок выбранного элемента */

.layoutControlsTitle{
  padding:13px 14px;
  margin-bottom:14px;

  border-radius:13px;
  background:var(--tp-pink-light);

  color:#805064;
  font-size:12px;
}

.layoutControlsTitle b{
  display:block;
  margin-top:3px;
  color:var(--tp-brown);
  font-size:15px;
}

/* поля */

.layoutControlRow{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
  margin-bottom:10px;
}

.layoutControlRow label,
.proportionsControl{
  color:var(--tp-muted);
  font-size:11px;
  font-weight:650;
}

.layoutControls input{
  width:100%;
  height:40px;
  margin-top:5px;

  padding:0 10px;

  border:1px solid var(--tp-border);
  border-radius:10px;

  background:#fff;
  color:var(--tp-text);

  font-size:14px;
  outline:none;

  transition:
    border-color .15s ease,
    box-shadow .15s ease;
}

.layoutControls input:focus{
  border-color:#dda2b4;
  box-shadow:0 0 0 3px rgba(229,138,165,.13);
}

/* пропорции */

.proportionsControl{
  display:flex;
  align-items:center;
  gap:8px;

  margin:5px 0 13px;
  padding:10px 11px;

  border-radius:10px;
  background:#faf7f5;
}

.proportionsControl input{
  width:16px;
  height:16px;
  margin:0;
  accent-color:var(--tp-pink);
}

/* кнопки управления */

.layoutControlButtons{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:13px;
}

.layoutControlButtons button{
  min-height:40px;

  border:1px solid var(--tp-border);
  border-radius:10px;

  background:#fff;
  color:var(--tp-brown);

  font-size:12px;
  font-weight:700;

  cursor:pointer;

  transition:.15s ease;
}

.layoutControlButtons button:hover{
  transform:translateY(-1px);
  background:#fff9f7;
  border-color:#d9c3b9;
  box-shadow:0 5px 14px rgba(74,36,27,.08);
}

.layoutControlButtons #applySelected{
  background:var(--tp-brown);
  border-color:var(--tp-brown);
  color:#fff;
}

.layoutControlButtons #applySelected:hover{
  background:var(--tp-brown-dark);
}

.layoutControlButtons .danger{
  color:#a34545;
  border-color:#ecd3d3;
  background:#fffafa;
}

.layoutHint{
  margin:12px 0 20px;
  padding:11px 12px;

  border-radius:11px;

  background:#f8f4f1;
  color:#8b7d76;

  font-size:11px;
  line-height:1.45;
}

.layoutHint::before{
  content:"💡";
  margin-right:5px;
}

/* ---------- РЕДАКТОР ВЫРЕЗКИ ---------- */

.workspace > .editor > h3{
  margin:20px 0 10px;
  padding-top:16px;

  border-top:1px solid #eee5e0;

  font-size:14px;
  color:var(--tp-text);
}

#editEmpty{
  padding:13px;
  border-radius:11px;
  background:#faf7f5;
  color:#968983;
  font-size:11px;
  line-height:1.45;
}

.mode{
  display:flex;
  gap:6px;
  margin-bottom:9px;
}

.mode button{
  flex:1;
  min-height:36px;

  border:1px solid var(--tp-border);
  border-radius:9px;
  background:#fff;
  cursor:pointer;
}

.mode button.active{
  outline:none;
  background:var(--tp-pink-light);
  border-color:#efc4d0;
}

.editor canvas{
  border-radius:11px;
  border:1px solid #e7ddd8;
}

/* ---------- НИЖНЯЯ ПАНЕЛЬ ---------- */

.bottom{
  display:flex;
  align-items:center;
  gap:10px;

  margin-top:18px;
  padding:12px;

  background:#fff;
  border:1px solid var(--tp-border);
  border-radius:18px;

  box-shadow:var(--tp-shadow-soft);
}

.bottom button{
  min-height:44px;
  padding:0 17px;

  border:1px solid var(--tp-border);
  border-radius:12px;

  background:#fff;
  color:var(--tp-brown);

  font-weight:700;
}

.bottom #finalBtn{
  background:var(--tp-brown);
  border-color:var(--tp-brown);
  color:#fff;
}

.bottom #finalBtn:hover{
  background:var(--tp-brown-dark);
}

.bottom #status{
  margin-left:auto;
  color:var(--tp-muted);
  font-size:12px;
}

/* ---------- МОБИЛЬНЫЙ ---------- */

@media(max-width:1250px){
  .workspace{
    grid-template-columns:250px minmax(400px,1fr) 300px;
    gap:12px;
  }

  .workspace > aside,
  .sheetWrap{
    border-radius:16px;
  }
}

@media(max-width:1000px){
  .workspace{
    grid-template-columns:240px 1fr;
  }

  .workspace > .editor{
    grid-column:1/-1;
    min-height:auto;
  }

  .sheetWrap{
    min-height:500px;
  }
}

@media(max-width:700px){

  main{
    padding:12px 10px 25px;
  }

  .toolbar{
    padding:9px;
    border-radius:15px;
    gap:7px;
  }

  .toolbar button,
  .toolbar .upload{
    min-height:42px;
    padding:0 12px;
    font-size:12px;
  }

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

  .workspace > aside:first-child{
    width:100%;
    min-height:auto;
    order:2;
  }

  .sheetWrap{
    width:100%;
    min-height:auto;
    padding:10px;
    order:1;
  }

  .workspace > .editor{
    width:100%;
    min-height:auto;
    order:3;
    padding:14px;
  }

  #elements{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }

  #elements .thumb{
    height:105px;
  }

  .bottom{
    position:sticky;
    bottom:8px;
    z-index:50;

    padding:8px;
    border-radius:14px;

    box-shadow:0 8px 30px rgba(0,0,0,.14);
  }

  .bottom button{
    flex:1;
    min-height:44px;
    padding:0 9px;
    font-size:12px;
  }

  .bottom #status{
    display:none;
  }
}

@media(max-width:430px){

  .toolbar{
    display:grid;
    grid-template-columns:1fr 1fr;
  }

  .toolbar #newBtn{
    grid-column:1/-1;
  }

  .toolbar .upload,
  .toolbar #packBtn{
    width:100%;
  }

  #elements{
    grid-template-columns:1fr 1fr;
  }

  .layoutControlButtons{
    grid-template-columns:1fr 1fr;
  }
}

/* ---------- МЯГКИЕ АНИМАЦИИ ---------- */

@media(prefers-reduced-motion:no-preference){
  .workspace > aside,
  .sheetWrap,
  .workspace > .editor{
    animation:tpCardIn .35s ease both;
  }

  .sheetWrap{
    animation-delay:.04s;
  }

  .workspace > .editor{
    animation-delay:.08s;
  }

  @keyframes tpCardIn{
    from{
      opacity:0;
      transform:translateY(5px);
    }
    to{
      opacity:1;
      transform:none;
    }
  }
}


/* =========================================================
   TOPPIO REDESIGN — PASS 2
   Компактные элементы + секции редактора + подсказки
   ========================================================= */


/* =========================================================
   ЛЕВАЯ КОЛОНКА — КОМПАКТНЫЕ КАРТОЧКИ
   ========================================================= */

.workspace > aside:first-child{
  padding:16px;
}

.workspace > aside:first-child h3{
  margin-bottom:12px;
}

#elements{
  gap:8px;
}

#elements .el{
  padding:8px;
  border-radius:13px;
}

/* миниатюра становится компактнее */

#elements .thumb{
  height:92px;
  border-radius:9px;
}

/* строка с номером / кнопками */

#elements .el > .row:first-child{
  min-height:27px;
  margin-bottom:5px;
}

#elements .el > .row:first-child b,
#elements .el > .row:first-child strong{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-width:23px;
  height:23px;
  padding:0 6px;

  border-radius:7px;

  background:#f3ebe6;
  color:var(--tp-brown);

  font-size:11px;
  font-weight:800;
}

#elements .el .editBtn{
  width:27px;
  height:27px;
  padding:0;

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

  border-radius:8px;
  font-size:12px;
}

/* поля размеров внутри карточек */

#elements .el .sizes{
  margin-top:6px;
  padding-top:6px;
}

#elements .el .sizes input{
  height:27px;
  margin:2px 0 0;
  padding:0 5px;

  border-radius:7px;

  font-size:11px;
}

#elements .el .sizes label{
  font-size:9px;
}

#elements .el .sizes p{
  display:none;
}

/* пропорции компактнее */

#elements .el .sizes input[type="checkbox"]{
  width:13px;
  height:13px;
  margin:0 4px 0 0;
}

#elements .el .sizes label,
#elements .el .sizes .row{
  gap:4px;
}


/* =========================================================
   ПРАВАЯ ПАНЕЛЬ — БОЛЕЕ ЧЁТКАЯ СТРУКТУРА
   ========================================================= */

.workspace > .editor{
  padding:16px;
}

.layoutControlsTitle{
  position:relative;
  padding:12px 13px 11px;
}

.layoutControlsTitle::before{
  content:"ВЫБРАННЫЙ ОБЪЕКТ";

  display:block;
  margin-bottom:4px;

  color:#a27584;
  font-size:9px;
  font-weight:800;
  letter-spacing:.08em;
}

.layoutControlsTitle b{
  margin-top:0;
}


/* маленькие заголовки секций */

.selectedDimensions{
  position:relative;
  padding-top:19px;
}

.selectedDimensions::before{
  content:"РАЗМЕР";

  position:absolute;
  left:0;
  top:0;

  color:#9a8981;
  font-size:9px;
  font-weight:800;
  letter-spacing:.08em;
}


/* поворот */

.layoutControlRow:has(#selectedRotation){
  position:relative;
  padding-top:19px;
  margin-top:3px;
}

.layoutControlRow:has(#selectedRotation)::before{
  content:"ПОВОРОТ";

  position:absolute;
  left:0;
  top:0;

  color:#9a8981;
  font-size:9px;
  font-weight:800;
  letter-spacing:.08em;
}


/* позиция */

.layoutControlRow:has(#selectedX){
  position:relative;
  padding-top:19px;
  margin-top:4px;
}

.layoutControlRow:has(#selectedX)::before{
  content:"ПОЗИЦИЯ НА ЛИСТЕ";

  position:absolute;
  left:0;
  top:0;

  color:#9a8981;
  font-size:9px;
  font-weight:800;
  letter-spacing:.08em;
}


/* немного уменьшаем поля */

.layoutControls input{
  height:38px;
}


/* кнопки управления */

.layoutControlButtons{
  margin-top:12px;
}

.layoutControlButtons #applySelected{
  min-height:39px;
  grid-column:1/-1;
}

.layoutControlButtons #cropSelected,
.layoutControlButtons #deleteSelected{
  min-height:36px;
}


/* =========================================================
   ПОДСКАЗКА — БОЛЕЕ ЗАМЕТНАЯ КАРТОЧКА
   ========================================================= */

.layoutHint{
  position:relative;

  margin:14px 0 18px;
  padding:13px 13px 13px 42px;

  border:1px solid #f0ddd5;
  border-radius:13px;

  background:
    linear-gradient(135deg,#fffaf7,#fff5f7);

  color:#806f68;

  font-size:11px;
  line-height:1.5;

  box-shadow:0 4px 14px rgba(74,36,27,.035);
}

.layoutHint::before{
  content:"💡";

  position:absolute;
  left:13px;
  top:12px;

  width:21px;
  height:21px;

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

  border-radius:7px;

  background:#f8dce5;

  font-size:12px;
}


/* =========================================================
   РЕДАКТОР ВЫРЕЗКИ
   ========================================================= */

.workspace > .editor > h3{
  position:relative;

  margin-top:17px;
  padding-top:17px;

  font-size:14px;
  font-weight:750;
}

.workspace > .editor > h3::before{
  content:"ИНСТРУМЕНТ";

  display:block;
  margin-bottom:5px;

  color:#a18e86;
  font-size:9px;
  font-weight:800;
  letter-spacing:.08em;
}

#editEmpty{
  border:1px dashed #e7dcd6;
  background:#fcfaf9;
}


/* =========================================================
   ЦЕНТР — ЛИСТ ЧУТЬ БОЛЕЕ «ПРОДУКТОВЫЙ»
   ========================================================= */

.sheetWrap{
  padding:17px;
}

.sheetTitle{
  height:20px;
  margin-bottom:12px;
}

.sheet{
  box-shadow:
    0 2px 5px rgba(74,36,27,.04),
    0 16px 40px rgba(74,36,27,.11);
}


/* =========================================================
   КНОПКИ НИЖНЕЙ ПАНЕЛИ
   ========================================================= */

.bottom{
  padding:10px;
}

.bottom button{
  min-height:42px;
}

.bottom #previewBtn{
  background:#fff8f5;
}

.bottom #previewBtn:hover{
  background:#fceee9;
}


/* =========================================================
   МОБИЛЬНЫЙ — НЕ ДАЁМ КАРТОЧКАМ СТАНОВИТЬСЯ ОГРОМНЫМИ
   ========================================================= */

@media(max-width:700px){

  #elements .thumb{
    height:85px;
  }

  #elements .el{
    padding:7px;
  }

  #elements .el .sizes{
    display:block;
  }

  .workspace > .editor{
    padding:14px;
  }

}


/* =========================================================
   МАЛЕНЬКИЕ ЭКРАНЫ
   ========================================================= */

@media(max-width:430px){

  #elements .thumb{
    height:78px;
  }

  #elements .el .sizes input{
    height:25px;
    font-size:10px;
  }

}


/* =========================================================
   FIX — КАРТОЧКИ ЭЛЕМЕНТОВ
   Исправляем наложение кнопок «Редактировать» / удалить
   ========================================================= */

#elements .el > .row:first-child{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:6px !important;
  width:100% !important;
  min-width:0 !important;
}

#elements .el > .row:first-child > *{
  flex-shrink:0 !important;
}

#elements .el > .row:first-child > div,
#elements .el > .row:first-child > span{
  min-width:0 !important;
}

/* группа кнопок, если она используется */

#elements .el .editBtn{
  min-width:29px !important;
  width:auto !important;
  height:28px !important;

  padding:0 7px !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  white-space:nowrap !important;
  overflow:hidden !important;

  font-size:0 !important;
}

/* оставляем только иконку ✏️ */

#elements .el .editBtn::first-letter{
  font-size:13px;
}

/* если внутри кнопки есть текст */

#elements .el .editBtn{
  line-height:1 !important;
}

/* кнопка удаления */

#elements .el button[id*="delete"],
#elements .el button.delete,
#elements .el .deleteBtn{
  flex:0 0 29px !important;

  width:29px !important;
  min-width:29px !important;
  height:28px !important;

  padding:0 !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  border-radius:8px !important;
}

/* Если кнопки находятся непосредственно рядом */

#elements .el > .row:first-child button{
  flex:0 0 auto !important;
}

/* Номер элемента */

#elements .el > .row:first-child b,
#elements .el > .row:first-child strong{
  flex:0 0 auto !important;
  margin-right:auto !important;
}

/* Не позволяем длинному тексту распирать карточку */

#elements .el button{
  white-space:nowrap !important;
}

/* на всякий случай убираем горизонтальный выход */

#elements .el{
  overflow:hidden !important;
}


/* =========================================================
   TOPPIO REDESIGN — SMART HINT
   ========================================================= */

.layoutHint{
  display:flex;
  align-items:flex-start;
  gap:12px;
  position:relative;
  overflow:hidden;

  transition:
    background .25s ease,
    border-color .25s ease,
    box-shadow .25s ease,
    transform .2s ease;

  animation: toppioHintIn .28s ease both;
}

.layoutHint .hintIcon{
  flex:0 0 34px;
  width:34px;
  height:34px;

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

  border-radius:11px;
  background:#f8e5eb;

  font-size:17px;
  line-height:1;

  transition:
    background .25s ease,
    transform .25s ease;
}

.layoutHint > div{
  min-width:0;
  line-height:1.45;
}

.layoutHint strong{
  color:var(--tp-brown-dark);
  font-weight:800;
}

.layoutHint .hintSub{
  color:var(--tp-muted);
  font-size:12px;
}

.layoutHint.hintAuto{
  border-color:#ead8df;
  background:linear-gradient(135deg,#fffafc 0%,#fff 100%);
}

.layoutHint.hintAuto .hintIcon{
  background:#f8e5eb;
}

.layoutHint.hintManual{
  border-color:#e8ddd7;
  background:linear-gradient(135deg,#fffdfb 0%,#fff 100%);
}

.layoutHint.hintManual .hintIcon{
  background:#f1e7e1;
}

.layoutHint.hintSelected{
  box-shadow:
    0 8px 24px rgba(74,36,27,.07);
}

.layoutHint.hintSelected .hintIcon{
  transform:scale(1.04);
}

@keyframes toppioHintIn{
  from{
    opacity:.55;
    transform:translateY(4px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}


/* =========================================================
   TOPPIO REDESIGN — RIGHT EDITOR PANEL
   ========================================================= */

/* Основная карточка управления */
#layoutControls{
  position:relative;
  background:#fff;
  border:1px solid var(--tp-border);
  border-radius:22px;
  padding:18px;
  box-shadow:var(--tp-shadow-soft);
}

/* Режим размещения */
#layoutControls .layoutMode{
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;

  padding:5px;
  margin-bottom:18px;

  background:#f8f4f1;
  border:1px solid #eee3dd;
  border-radius:14px;
}

#layoutControls .layoutMode > span{
  width:100%;
  padding:4px 8px 2px;

  color:var(--tp-muted);
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
}

#layoutControls .layoutMode button{
  flex:1;
  min-height:38px;

  border:0;
  border-radius:10px;

  background:transparent;
  color:#796b65;

  font-weight:700;
  cursor:pointer;

  transition:
    background .2s ease,
    color .2s ease,
    box-shadow .2s ease,
    transform .15s ease;
}

#layoutControls .layoutMode button:hover{
  color:var(--tp-brown);
}

#layoutControls .layoutMode button.active{
  background:#fff;
  color:var(--tp-brown-dark);
  box-shadow:0 3px 10px rgba(74,36,27,.09);
}

/* Заголовок выбранного элемента */
#layoutControls .layoutControlsTitle{
  display:flex;
  align-items:center;
  justify-content:space-between;

  margin:0 0 14px;
  padding:13px 14px;

  background:#fff8fa;
  border:1px solid #f1dfe5;
  border-radius:14px;

  color:#776862;
  font-size:13px;
  font-weight:700;
}

#layoutControls .layoutControlsTitle b{
  display:flex;
  align-items:center;
  justify-content:center;

  min-width:38px;
  height:28px;
  padding:0 9px;

  border-radius:9px;
  background:var(--tp-pink);
  color:#fff;

  font-size:12px;
  font-weight:800;

  box-shadow:0 4px 10px rgba(229,138,165,.22);
}

/* Названия секций */
#layoutControls .layoutControlRow{
  position:relative;
}

#layoutControls .layoutControlRow label{
  color:#665953;
  font-size:12px;
  font-weight:700;
}

/* Поля ввода */
#layoutControls input[type="number"]{
  width:100%;
  box-sizing:border-box;

  height:42px;
  margin-top:6px;
  padding:0 12px;

  border:1px solid #e5dad4;
  border-radius:11px;

  background:#fcfaf8;
  color:var(--tp-brown-dark);

  font-size:14px;
  font-weight:700;

  outline:none;

  transition:
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease;
}

#layoutControls input[type="number"]:hover{
  border-color:#d9c8c0;
}

#layoutControls input[type="number"]:focus{
  background:#fff;
  border-color:var(--tp-pink);
  box-shadow:0 0 0 3px rgba(229,138,165,.12);
}

/* Размеры */
#layoutControls .selectedDimensions{
  padding-top:4px;
  margin-bottom:15px;
}

#layoutControls .selectedDimensions::before{
  content:"РАЗМЕР";

  display:block;
  margin-bottom:9px;

  color:#a0928b;
  font-size:10px;
  font-weight:900;
  letter-spacing:.08em;
}

/* Пропорции */
#layoutControls .proportionsControl{
  display:flex;
  align-items:center;
  gap:9px;

  margin:0 0 17px;
  padding:11px 12px;

  border:1px solid #eee3dd;
  border-radius:11px;

  background:#faf7f5;

  color:#695c56;
  font-size:12px;
  font-weight:600;

  cursor:pointer;
}

#layoutControls .proportionsControl input{
  width:17px;
  height:17px;
  margin:0;

  accent-color:var(--tp-pink);
  cursor:pointer;
}

/* Поворот */
#layoutControls .layoutControlRow:has(#selectedRotation){
  padding-top:3px;
  margin-bottom:17px;
}

#layoutControls .layoutControlRow:has(#selectedRotation)::before{
  content:"ПОВОРОТ";

  display:block;
  margin-bottom:9px;

  color:#a0928b;
  font-size:10px;
  font-weight:900;
  letter-spacing:.08em;
}

/* Позиция */
#layoutControls .layoutControlRow:has(#selectedX){
  padding-top:3px;
  margin-bottom:17px;
}

#layoutControls .layoutControlRow:has(#selectedX)::before{
  content:"ПОЗИЦИЯ НА ЛИСТЕ";

  display:block;
  margin-bottom:9px;

  color:#a0928b;
  font-size:10px;
  font-weight:900;
  letter-spacing:.08em;
}

/* Кнопки действий */
#layoutControls .layoutControlButtons{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;

  margin-top:5px;
}

#layoutControls .layoutControlButtons button{
  min-height:42px;

  border:0;
  border-radius:11px;

  font-size:12px;
  font-weight:800;

  cursor:pointer;

  transition:
    transform .15s ease,
    box-shadow .18s ease,
    background .18s ease;
}

#layoutControls .layoutControlButtons button:hover{
  transform:translateY(-1px);
}

#layoutControls .layoutControlButtons button:active{
  transform:translateY(0);
}

/* Применить */
#layoutControls #applySelected{
  grid-column:1 / -1;

  background:var(--tp-brown);
  color:#fff;

  box-shadow:0 7px 16px rgba(74,36,27,.16);
}

#layoutControls #applySelected:hover{
  background:var(--tp-brown-dark);
  box-shadow:0 9px 20px rgba(74,36,27,.21);
}

/* Кадрировать */
#layoutControls #cropSelected{
  background:#f7ecef;
  color:#8d5063;
}

#layoutControls #cropSelected:hover{
  background:#f2dfe5;
}

/* Удалить */
#layoutControls #deleteSelected{
  background:#faf5f3;
  color:#a35d57;
}

#layoutControls #deleteSelected:hover{
  background:#f6e8e5;
}

/* Подсказка — отделяем от инструментов */
#layoutControls .layoutHint{
  margin-top:15px;
}

/* На мобильном */
@media (max-width:700px){
  #layoutControls{
    padding:14px;
    border-radius:18px;
  }

  #layoutControls .layoutControlButtons{
    gap:7px;
  }

  #layoutControls input[type="number"]{
    height:44px;
  }
}


/* =========================================================
   FIX — подписи секций не должны перекрывать поля
   ========================================================= */

#layoutControls .selectedDimensions::before,
#layoutControls .layoutControlRow:has(#selectedRotation)::before,
#layoutControls .layoutControlRow:has(#selectedX)::before{
  display:none !important;
}

#layoutControls .selectedDimensions{
  padding-top:0;
  margin-top:0;
  margin-bottom:16px;
}

#layoutControls .layoutControlRow:has(#selectedRotation){
  padding-top:0;
  margin-top:0;
  margin-bottom:16px;
}

#layoutControls .layoutControlRow:has(#selectedX){
  padding-top:0;
  margin-top:0;
  margin-bottom:17px;
}

/* Нормальный интервал между подписью и полем */
#layoutControls .layoutControlRow label{
  display:flex;
  flex-direction:column;
  gap:0;
}

/* Чтобы две колонки размеров и координат не слипались */
#layoutControls .selectedDimensions,
#layoutControls .layoutControlRow:has(#selectedX){
  gap:8px;
}


/* Чистый профессиональный значок подсказки */
.layoutHint .hintIcon{
  font-family:Arial,sans-serif;
  font-size:13px;
  font-weight:800;
  color:var(--tp-brown);
}


/* Убираем старую декоративную лампочку у подсказки */
.layoutHint::before,
.layoutHint::after{
  display:none !important;
  content:none !important;
}

/* Только один спокойный значок i */
.layoutHint .hintIcon{
  display:flex !important;
  align-items:center;
  justify-content:center;

  width:28px;
  height:28px;
  flex:0 0 28px;

  border-radius:50%;
  background:#f7e8ed;
  color:#7b4a59;

  font-family:Arial,sans-serif;
  font-size:13px;
  font-weight:800;
}