:root{
  --bg:#f3f5f9;
  --panel:#ffffff;
  --text:#121826;
  --muted:#5b667a;
  --border:#e6e9f2;

  --brand:#111827;
  --brand2:#0b1220;

  --primary:#4f6df5;
  --danger:#e24b4b;

  --shadow:0 8px 24px rgba(10,20,40,0.08);
  --radius:14px;

  --previewW: 320px; /* управляется ползунком */
}

body.auth-gated{
  overflow:hidden;
  background:
    radial-gradient(circle at top left, rgba(79,109,245,0.18), transparent 32%),
    linear-gradient(135deg, #111827, #0f172a);
}
body.template-editor-open{
  position:fixed;
  left:0;
  right:0;
  width:100%;
  overflow:hidden;
  overscroll-behavior:none;
}

.app-shell{
  min-height:100vh;
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.auth-gated .app-shell{
  display:none;
}

/* ===== Admin Panel ===== */
.modal.admin-panel-modal{
  width:min(1640px, calc(100vw - 24px)) !important;
  max-width:min(1640px, calc(100vw - 24px)) !important;
  height:min(calc(100vh - 24px), 960px) !important;
  max-height:calc(100vh - 24px) !important;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.admin-panel-create-grid{
  flex:0 0 auto;
  display:grid;
  grid-template-columns:minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap:16px;
  padding:16px 16px 0;
  background:#f5f7fb;
}

.admin-panel-body{
  flex:1 1 auto;
  min-height:0;
  display:grid;
  grid-template-columns:minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap:16px;
  padding:16px;
  background:#f5f7fb;
  overflow:hidden;
  align-items:stretch;
}

.admin-panel-column{
  min-width:0;
  min-height:0;
  height:100%;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.admin-panel-section{
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:12px;
  background:#fff;
  border:1px solid #e5eaf4;
  border-radius:18px;
  padding:14px;
  box-shadow:0 10px 30px rgba(17,24,39,0.06);
  position:relative;
  isolation:isolate;
  overflow:hidden;
}

.admin-panel-create-section{
  overflow:hidden;
  z-index:2;
}

.admin-panel-list-section{
  flex:1 1 auto;
  min-height:0;
  height:100%;
  z-index:1;
  overflow:hidden;
}

.admin-panel-section-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  position:relative;
  z-index:20;
}

.admin-panel-section-head-main{
  min-width:0;
}

.admin-panel-section-head-side{
  display:flex;
  align-items:flex-end;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.admin-panel-section-title{
  font-size:16px;
  font-weight:900;
  color:#111827;
}

.admin-panel-section-sub{
  margin-top:4px;
  color:#5b667a;
  font-size:12px;
  line-height:1.45;
}

.admin-panel-summary{
  padding:7px 10px;
  border-radius:999px;
  background:#eef2ff;
  color:#3558ff;
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
}

.admin-workspace-filter{
  min-width:220px;
}

.admin-inline-form{
  display:grid;
  grid-template-columns:1.15fr 1.35fr 1.05fr 1fr 0.9fr auto;
  gap:10px;
  align-items:end;
  background:#fff;
  padding:2px 0 4px;
}

.admin-inline-form-workspace{
  grid-template-columns:minmax(0, 1fr) auto;
}

.admin-inline-form .btn{
  white-space:nowrap;
}

#adminCreateUserForm input,
#adminCreateUserForm select,
#adminCreateWorkspaceForm input,
#adminCreateWorkspaceForm select{
  pointer-events:auto !important;
  user-select:text !important;
  -webkit-user-select:text !important;
}

.admin-users-list,
.admin-workspace-list{
  flex:1 1 auto;
  min-height:0;
  height:100%;
  overflow-y:auto;
  overflow-x:hidden;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:stretch;
  gap:10px;
  padding-right:6px;
  position:relative;
  z-index:1;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
}

.admin-user-card,
.admin-workspace-card{
  flex:0 0 auto;
  height:auto !important;
  min-height:max-content;
  border:1px solid #e5eaf4;
  border-radius:16px;
  background:#fbfcff;
  padding:12px;
  overflow:hidden;
  position:relative;
  z-index:0;
}

.admin-user-card{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.admin-user-card-head,
.admin-workspace-card-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
}

.admin-user-title-row,
.admin-workspace-name-row,
.admin-member-name-row{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
}

.admin-user-title,
.admin-workspace-name,
.admin-member-name{
  font-size:15px;
  font-weight:900;
  color:#111827;
}

.admin-user-meta,
.admin-workspace-slug,
.admin-member-email{
  margin-top:4px;
  color:#5b667a;
  font-size:12px;
}

.admin-user-grid{
  display:grid;
  grid-template-columns:1.15fr 0.75fr 1.25fr auto;
  gap:10px;
  align-items:end;
}

.admin-user-workspaces{
  display:grid;
  grid-template-columns:minmax(240px, 0.92fr) minmax(0, 1.08fr);
  gap:12px;
  align-items:start;
}

.admin-user-memberships{
  border:1px solid #e5eaf4;
  border-radius:14px;
  background:#fff;
  padding:10px;
}

.admin-user-memberships-title{
  font-size:12px;
  font-weight:800;
  color:#4b5563;
  margin-bottom:8px;
}

.admin-user-memberships-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.admin-membership-chip{
  display:inline-flex;
  align-items:center;
  flex-wrap:nowrap;
  gap:6px;
  padding:8px 10px;
  border-radius:999px;
  background:#eef2ff;
  color:#26346a;
  font-size:12px;
  font-weight:800;
  line-height:1;
}

.admin-membership-chip-text{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.admin-membership-chip-text span{
  color:#5b667a;
  font-weight:700;
}

.admin-membership-remove{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  border:0;
  border-radius:999px;
  background:#dbe5ff;
  color:#243b7c;
  cursor:pointer;
  font-size:12px;
  font-weight:900;
  line-height:1;
  padding:0;
  flex:0 0 auto;
}

.admin-membership-remove:hover{
  background:rgba(226,75,75,0.16);
  color:#a01f1f;
}

.admin-membership-remove:disabled{
  opacity:0.45;
  cursor:default;
}

.admin-empty-chip{
  display:inline-flex;
  align-items:center;
  padding:8px 10px;
  border:1px dashed #ccd6e8;
  border-radius:999px;
  color:#6b7280;
  font-size:12px;
  font-weight:700;
  background:#fff;
}

.admin-user-workspace-add{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(150px, 180px);
  gap:10px;
  align-items:end;
}

.admin-user-workspace-add .field.small{
  min-width:0;
  width:100%;
}

.admin-user-workspace-add .field.small span{
  display:block;
  min-height:auto;
  line-height:1.25;
}

.admin-user-workspace-add .field.small select{
  min-width:0;
  width:100%;
}

.admin-user-workspace-add .admin-user-actions{
  grid-column:1 / -1;
  justify-content:flex-start;
}

.admin-user-workspace-add .btn{
  white-space:nowrap;
  align-self:end;
  min-width:180px;
}

.admin-user-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.admin-user-actions .btn{
  white-space:nowrap;
}

.admin-panel-modal .field.small input,
.admin-panel-modal .field.small select{
  width:100%;
  height:38px;
  border-radius:12px;
  border:1px solid #d9dfeb !important;
  background:#fff !important;
  color:#111827 !important;
  padding:8px 10px;
  outline:none;
}

.admin-panel-modal .field.small input:focus,
.admin-panel-modal .field.small select:focus{
  border-color:rgba(79,109,245,0.75) !important;
  box-shadow:0 0 0 3px rgba(79,109,245,0.12);
}

.admin-tag{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:3px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  line-height:1;
}

.admin-tag-status{
  background:#eef2ff;
  color:#3558ff;
}

.admin-tag-status.is-active{
  background:#e8f8ee;
  color:#0f8a4b;
}

.admin-tag-status.is-disabled{
  background:#fdecec;
  color:#c52b2b;
}

.admin-tag-current{
  background:#fff5db;
  color:#9a6400;
}

.admin-tag-self{
  background:#edf4ff;
  color:#1f4acc;
}

.admin-member-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.admin-member-row{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 150px;
  gap:10px;
  align-items:start;
  border:1px solid #e5eaf4;
  border-radius:14px;
  background:#fff;
  padding:10px;
}

.admin-member-meta{
  min-width:0;
}

.admin-member-actions{
  display:flex;
  gap:8px;
  justify-content:flex-end;
  grid-column:1 / -1;
  flex-wrap:wrap;
}

.admin-workspace-head-main{
  min-width:0;
}

.admin-workspace-head-actions{
  display:grid;
  grid-template-columns:minmax(260px, 320px) auto;
  gap:10px;
  align-items:end;
}

.admin-workspace-name-field{
  min-width:260px;
}

.admin-add-member-form{
  margin-top:10px;
  border-top:1px solid #e5eaf4;
  padding-top:10px;
}

.admin-add-member-grid{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 150px auto;
  gap:10px;
  align-items:end;
}

.admin-empty{
  padding:18px;
  border:1px dashed #ccd6e8;
  border-radius:14px;
  background:#fff;
  color:#5b667a;
  font-size:13px;
  text-align:center;
}

#adminDialogModal{
  z-index:1002;
}

.admin-dialog-modal{
  max-width:min(540px, calc(100vw - 32px));
}

.admin-dialog-message{
  color:#243041;
  font-size:14px;
  line-height:1.5;
  white-space:pre-wrap;
}

@media (max-width: 1180px){
  .admin-panel-body{
    grid-template-columns:1fr;
  }

  .admin-panel-create-grid{
    grid-template-columns:1fr;
  }

  .admin-user-grid,
  .admin-user-workspaces,
  .admin-user-workspace-add,
  .admin-member-row,
  .admin-add-member-grid,
  .admin-inline-form{
    grid-template-columns:1fr;
  }

  .admin-panel-section-head-side{
    width:100%;
    justify-content:flex-start;
  }

  .admin-workspace-filter{
    min-width:0;
    width:100%;
  }

  .admin-workspace-head-actions{
    grid-template-columns:1fr;
    align-items:stretch;
  }

  .admin-workspace-name-field{
    min-width:0;
  }
}

*{ box-sizing:border-box; }

[hidden]{
  display:none !important;
}

body{
  margin:0;
  font-family: "Segoe UI", Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
  height:100vh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

/* ===== Topbar ===== */
.topbar{
  height:48px;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  color:#fff;
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 12px;
  flex:0 0 auto;
}

.app-title{
  font-weight:900;
  font-size:16px;
  letter-spacing:0.2px;
}

.topbar-actions{
  margin-left:auto;
  display:flex;
  gap:8px;
  align-items:center;
}

.topbar-left{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.auth-session-badge{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.16);
  color:#fff;
  font-size:12px;
  min-width:0;
}

.auth-session-user{
  font-weight:800;
  max-width:220px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.auth-session-role{
  padding:3px 8px;
  border-radius:999px;
  background:rgba(255,255,255,0.14);
  font-weight:700;
  text-transform:uppercase;
  font-size:11px;
  letter-spacing:0.04em;
}

.auth-workspace-wrap{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:12px;
  background:rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.16);
  color:#fff;
  font-size:12px;
  font-weight:800;
}

.auth-workspace-wrap select{
  height:30px;
  min-width:170px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.18);
  background:rgba(255,255,255,0.08);
  color:#fff;
  padding:4px 8px;
  outline:none;
}

/* Range */
.range-wrap{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:12px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.16);
}
.range-label{
  font-size:12px;
  font-weight:800;
  opacity:0.95;
}
.range-wrap input[type="range"]{
  width:160px;
  height:18px;
}

/* ===== Compact topbar controls ===== */
.topbar{
  display:grid;
  grid-template-columns:auto minmax(0, 1fr);
  min-height:46px;
  height:auto;
  gap:8px;
  padding:6px 10px;
  align-items:center;
  overflow:hidden;
}

.topbar-left{
  gap:10px;
  min-width:0;
  flex-wrap:nowrap;
}

.app-title{
  font-size:15px;
  line-height:1.05;
  white-space:nowrap;
  flex:0 0 auto;
}

.topbar-actions{
  flex:1 1 auto;
  min-width:0;
  width:100%;
  justify-content:flex-end;
  gap:6px;
  flex-wrap:nowrap;
  white-space:nowrap;
  overflow:hidden;
}

.topbar-actions > *{
  flex:0 0 auto;
  min-width:0;
}

.auth-session-badge{
  gap:6px;
  padding:5px 8px;
  font-size:11px;
  flex-wrap:nowrap;
  white-space:nowrap;
}

.auth-session-user{
  max-width:150px;
}

.auth-session-role{
  padding:2px 6px;
  font-size:10px;
}

.auth-workspace-wrap{
  gap:6px;
  padding:4px 8px;
  border-radius:10px;
  font-size:11px;
  flex-wrap:nowrap;
  white-space:nowrap;
}

.auth-workspace-wrap select{
  height:28px;
  min-width:120px;
  max-width:160px;
  border-radius:9px;
  padding:3px 8px;
  font-size:12px;
}

.topbar-actions > select,
.topbar-actions > .auth-workspace-wrap select{
  height:34px;
}

#viewMode{
  min-width:240px;
  max-width:280px;
  height:34px;
  border-radius:10px;
  padding:5px 10px;
  font-size:12px;
}

.range-wrap{
  gap:6px;
  padding:4px 8px;
  border-radius:10px;
}

.range-label{
  font-size:11px;
}

.range-wrap input[type="range"]{
  width:128px;
  height:16px;
}

.topbar-actions > .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:6px 11px;
  border-radius:10px;
  font-size:12px;
  line-height:1.05;
  white-space:nowrap;
  box-shadow:none;
}

#btnLeonardoSettings.is-configured{
  box-shadow:0 6px 14px rgba(21,128,61,0.18);
}

#btnLeonardoSettings,
#btnTryOnModel,
#btnPrint,
#btnClearSelection,
#btnAdminPanel,
#btnLogout{
  flex-shrink:0;
}

#btnTogglePreview{
  padding-inline:10px;
  font-size:11.5px;
  flex-shrink:1;
  min-width:0;
}

@media (max-width: 1560px){
  .topbar{
    gap:8px;
    padding:5px 8px;
  }

  .topbar-actions{
    gap:5px;
  }

  #viewMode{
    min-width:210px;
    max-width:250px;
  }

  .range-wrap input[type="range"]{
    width:112px;
  }

  .topbar-actions > .btn{
    padding:6px 10px;
    font-size:11.5px;
  }

  .auth-session-user{
    max-width:120px;
  }
}


/* ===== Upload bar ===== */
.upload-bar{
  flex:0 0 auto;
  width:100%;
  background: linear-gradient(135deg, #1f2937, #0f172a);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding:8px 12px;
}

.upload-title{
  color:#fff;
  font-weight:900;
  margin-bottom:6px;
  font-size:13px;
}

.upload-inline{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}

.upload-inline input,
.upload-inline select{
  height:32px;
  border-radius:10px;
  padding:5px 10px;
  border:1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.08);
  color:#fff;
  outline:none;
  min-width:150px;
  font-size:13px;
}

.upload-inline input[type="file"]{
  min-width:240px;
  padding:5px 10px;
}

.upload-inline input::placeholder{
  color: rgba(255,255,255,0.60);
}

/* ===== Buttons ===== */
.btn{
  border:0;
  border-radius:12px;
  padding:8px 12px;
  cursor:pointer;
  font-weight:800;
  user-select:none;
  background: rgba(255,255,255,0.15);
  color:#fff;
  font-size:13px;
  line-height:1;
}

.btn.primary{ background: var(--primary); }
.btn.danger{ background: var(--danger); }
.btn:hover{ filter:brightness(1.04); }
.btn:active{ transform: translateY(1px); }
.btn:disabled{ opacity:0.55; cursor:not-allowed; transform:none; }

/* ===== Layout ===== */
.layout{
  flex:1 1 auto;
  min-height:0;
  overflow:hidden;
}

.workspace-area{
  height:100%;
  display:flex;
  gap:10px;
  padding:10px;
  overflow:hidden;
}

/* ===== Workspace ===== */
.workspace{
  flex:1 1 auto;
  min-width:0;

  display:flex;
  flex-direction:column;
  gap:10px;
  overflow-y:auto;
  overflow-x:hidden;

  padding-bottom:10px;
}

/* layer */
.layer{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:0;
  display:flex;
  flex-direction:column;
}

.layer-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 14px;
  margin:0;
  min-height:44px;
}

.layer-title{ font-weight:900; font-size:15px; line-height:1.2; margin:0; }
.layer-sub{ font-size:12px; color:var(--muted); margin-top:2px; }

/* row */
.layer-cards{
  display:flex;
  gap:10px;
  overflow-x:auto;
  overflow-y:hidden;
  padding:0 14px 10px;
}

/* ===== Cards ===== */
.card{
  flex:0 0 250px;
  border:1px solid var(--border);
  border-radius: 14px;
  padding:10px;
  background:#fff;
  cursor:pointer;
}

.card.selected{ border-color: rgba(79,109,245,0.55); box-shadow: inset 0 0 0 2px rgba(79,109,245,0.32), 0 0 0 1px rgba(79,109,245,0.14), 0 8px 20px rgba(79,109,245,0.10); }

.topline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.name{ font-weight:900; font-size:13px; }
.meta{ font-size:12px; color:var(--muted); margin-top:4px; }

.media{
  position:relative;
  margin-top:8px;
}

.card img{
  width:100%;
  border-radius:12px;
  border:1px solid var(--border);
  display:block;

  height: 210px;
  object-fit: contain;
  background:transparent;

  -webkit-user-drag: none;
  user-drag: none;
  user-select: none;
}

/* trash */
.trashbtn{
  position:absolute;
  top:6px;
  right:6px;
  width:30px;
  height:30px;
  border:0;
  border-radius:10px;
  background: rgba(255,255,255,0.92);
  box-shadow: 0 6px 14px rgba(0,0,0,0.10);
  cursor:pointer;
  font-size:16px;
  line-height:30px;
}
.trashbtn:hover{ filter:brightness(0.98); }

/* ======================================================
   ✅ Цвета: БЕЗ подложки.
   Кружки и "+" почти не мешают фото, подсветка только при hover/focus.
   ====================================================== */
.variants-bar{
  position:absolute;
  left:6px;
  bottom:4px;
  display:flex;
  align-items:center;
  gap:6px;
  padding:0;                 /* нет подложки */
  background: transparent;   /* нет подложки */
  border-radius:0;
}

/* сами кружки */
.variant-dots{
  display:flex;
  gap:5px;
  align-items:center;
  flex-wrap:wrap;
  max-width: 150px;
}

.variant-dot{
  width:12px;
  height:12px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,0.85);
  cursor:pointer;
  padding:0;

  /* читаемость на фото без подложки */
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}

.variant-dot.on{
  border-color:#ffffff;
  box-shadow:
    0 2px 6px rgba(0,0,0,0.18),
    0 0 0 2px rgba(79,109,245,0.28);
}

/* "+" как маленький кружок */
.add-variant{
  width:20px;
  height:20px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.85);
  background: rgba(0,0,0,0.16);  /* слегка, чтобы читался на светлом фото */
  color:#fff;
  font-weight:900;
  cursor:pointer;
  line-height:18px;
  padding:0;

  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}

/* ✅ подсветка только при наведении на карточку/фокусе */
.card .variant-dot,
.card .add-variant{
  opacity: 0.70;
  transform: translateY(2px);
  transition: opacity .14s ease, transform .14s ease, box-shadow .14s ease, background .14s ease;
}

.card:hover .variant-dot,
.card:focus-within .variant-dot,
.card:hover .add-variant,
.card:focus-within .add-variant{
  opacity: 1;
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(0,0,0,0.22);
}

.add-variant:hover{ filter:brightness(1.06); }

/* ===== Preview ===== */
.preview-panel{
  flex:0 0 var(--previewW);
  max-width:var(--previewW);
  background:var(--panel);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:10px;
  overflow:auto;
}

.preview-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}

.preview-title{ font-weight:900; }

.preview-controls{
  display:flex;
  gap:10px;
  align-items:center;
}

.pc-label{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:12px;
  color: var(--muted);
  min-width:150px;
}

.preview-controls select{
  height:32px;
  border-radius:10px;
  padding:5px 10px;
  border:1px solid var(--border);
  background:#fff;
  color:#111827;
  outline:none;
}

.preview-box{
  border:1px solid var(--border);
  border-radius:12px;
  background:#fbfcff;
  padding:8px;
}

.preview-box img{
  width:100%;
  border-radius:10px;
  display:block;
  background:transparent;
}

.preview-actions{
  margin-top:10px;
  display:flex;
  gap:10px;
}

/* ===== Statusbar ===== */
.statusbar{
  height:30px;
  background:var(--panel);
  border-top:1px solid var(--border);
  display:flex;
  align-items:center;
  padding:0 10px;
  font-size:12px;
  color:#26346a;
  flex:0 0 auto;
}

/* ===== selects (Windows/Electron) ===== */
select{
  color:#ffffff !important;
  background:#1f2937 !important;
  border:1px solid #2d3748 !important;
}
select option{
  background:#ffffff !important;
  color:#111827 !important;
}
select option:checked{
  background:#4f6df5 !important;
  color:#ffffff !important;
}
.preview-controls select{
  color:#111827 !important;
  background:#ffffff !important;
  border:1px solid var(--border) !important;
}

/* ===== view modes ===== */
body.ultra .card{ flex-basis: 210px; }
body.ultra .card img{ height: 150px; }

body.ultra .variants-bar{
  left:5px;
  bottom:3px;
}
body.ultra .variant-dot{
  width:11px;
  height:11px;
}
body.ultra .add-variant{
  width:18px;
  height:18px;
  line-height:16px;
}

body.photo-only .meta,
body.photo-only .name{ display:none; }
body.photo-only .card{ padding:8px; }
body.photo-only .card img{ height: 190px; }

/* ✅ супер компакт: максимум плотности (кружки остаются) */
body.super .workspace{ gap: 4px; }
body.super .layer{ padding: 6px; }
body.super .layer-header{ margin-bottom: 4px; }
body.super .layer-sub{ display:none; }
body.super .layer-cards{ gap: 6px; padding-bottom: 2px; }

body.super .card{
  flex-basis: 190px;
  padding: 6px;
  border-radius: 10px;
}

body.super .card img{
  height: 130px;
  border-radius: 8px;
}

body.super .meta{ display:none; }
body.super .name{ display:none; }
body.super .topline{ display:none; }

body.super .variants-bar{
  left:5px;
  bottom:3px;
}
body.super .variant-dot{
  width:10px;
  height:10px;
  border-width:2px;
}
body.super .add-variant{
  width:17px;
  height:17px;
  line-height:15px;
}

/* ===== preview collapsed ===== */
body.preview-collapsed .preview-panel{ display:none; }
body.preview-collapsed .workspace-area{ gap:8px; }

/* ===== Modal ===== */
.modal-overlay{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,0.45);
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  z-index:999;
}
.modal-overlay.open{ display:flex; }

.modal{
  width: 420px;
  max-width: 92vw;
  background:#fff;
  border-radius:16px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.22);
  border:1px solid rgba(0,0,0,0.08);
  overflow:hidden;
}

.modal-head{
  padding:12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background: #f7f8fb;
  border-bottom: 1px solid #e7eaf3;
}

.modal-title{
  font-weight:900;
  color:#111827;
}

.modal-x{
  border:0;
  background: transparent;
  cursor:pointer;
  font-size:18px;
  line-height:18px;
  padding:6px;
  border-radius:10px;
}
.modal-x:hover{ background: rgba(0,0,0,0.05); }

.modal-body{
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.field{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:12px;
  color:#374151;
}
.field input{
  height:36px;
  border-radius:12px;
  border:1px solid #e5e7eb;
  padding:8px 10px;
  outline:none;
}
.field input:focus{
  border-color: rgba(79,109,245,0.75);
  box-shadow: 0 0 0 3px rgba(79,109,245,0.15);
}

.modal-actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  margin-top:6px;
}
.modal-actions .btn{
  color:#fff;
}
.modal-actions .btn:not(.primary){
  background:#111827;
}

.auth-overlay{
  position:fixed;
  inset:0;
  z-index:1200;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:
    radial-gradient(circle at top left, rgba(79,109,245,0.14), transparent 32%),
    linear-gradient(135deg, rgba(17,24,39,0.98), rgba(15,23,42,0.995));
}

.auth-gated .auth-overlay,
.auth-overlay.open{
  display:flex;
}

.auth-card{
  width:min(92vw, 420px);
  padding:28px;
  border-radius:24px;
  background:rgba(255,255,255,0.96);
  border:1px solid rgba(255,255,255,0.7);
  box-shadow:0 24px 80px rgba(0,0,0,0.28);
}

.auth-card-brand{
  font-size:28px;
  font-weight:900;
  color:#111827;
}

.auth-card-sub{
  margin-top:8px;
  color:#5b667a;
  font-size:14px;
}

.auth-form{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:18px;
}

.auth-submit{
  width:100%;
  height:40px;
  margin-top:4px;
}

.auth-workspace-stage{
  margin-top:18px;
}

.auth-workspace-title{
  font-size:14px;
  font-weight:800;
  color:#111827;
  margin-bottom:12px;
}

.auth-workspace-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.auth-workspace-btn{
  width:100%;
  text-align:left;
  border:1px solid #dbe3f3;
  background:#fff;
  color:#111827;
  border-radius:16px;
  padding:14px 16px;
  cursor:pointer;
  transition:.16s ease;
}

.auth-workspace-btn:hover{
  border-color:#4f6df5;
  box-shadow:0 0 0 3px rgba(79,109,245,0.12);
}

.auth-workspace-name{
  display:block;
  font-size:15px;
  font-weight:900;
}

.auth-workspace-meta{
  display:block;
  margin-top:4px;
  color:#5b667a;
  font-size:12px;
}
/* ===== Template controls / preview right panel ===== */
.preview-head{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:12px;
  margin-bottom:12px;
}

.preview-toprow{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.preview-head-left{ min-width:0; }

.preview-title{
  font-size:22px;
  font-weight:900;
  line-height:1.1;
  color:#111827;
  margin:0;
}

.preview-meta{
  margin-top:6px;
  font-size:13px;
  line-height:1.35;
  color:#6b7280;
  word-break:break-word;
}

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

.preview-controls-row{
  display:grid;
  grid-template-columns: 1fr;
  gap:10px;
}

.pc-label{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:12px;
  font-weight:700;
  color:#6b7280;
  min-width:0;
}

.pc-label span{ line-height:1.1; }

.template-controls select{
  width:100%;
  height:40px;
  border-radius:14px;
  padding:8px 12px;
  border:1px solid #d6dbe7 !important;
  background:#ffffff !important;
  color:#111827 !important;
  outline:none;
  font-size:14px;
  box-shadow:none;
}

.template-controls select:focus{
  border-color:rgba(79,109,245,0.55) !important;
  box-shadow:0 0 0 3px rgba(79,109,245,0.12);
}

.template-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.template-actions .btn{
  appearance:none;
  min-height:38px;
  padding:9px 14px;
  border-radius:14px;
  font-size:14px;
  font-weight:800;
  cursor:pointer;
  transition:transform .14s ease, box-shadow .14s ease, opacity .14s ease;
}

.template-actions .btn:hover{ transform:translateY(-1px); }
.template-actions .btn.primary{
  background:#4f6df5 !important;
  color:#fff !important;
  box-shadow:0 8px 18px rgba(79,109,245,0.18);
}
.template-actions .btn.ghost{
  background:#f3f4f6 !important;
  color:#111827 !important;
  border:1px solid #e5e7eb !important;
}
.template-actions .btn.danger{
  background:#fee2e2 !important;
  color:#991b1b !important;
  border:1px solid #fecaca !important;
}
.template-actions .btn:disabled{
  opacity:.55;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}

.preview .template-actions .btn,
.preview-panel .template-actions .btn,
.template-actions .btn{
  visibility:visible !important;
}

@media (max-width: 1280px){
  .template-actions{ display:grid; grid-template-columns:1fr; }
}


/* ===== Compact template controls ===== */
.preview-head{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:10px;
}
.preview-toprow{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}
.preview-head-left{min-width:0;}
.preview-meta{margin-top:4px;font-size:12px;color:var(--muted);}
.template-controls{display:flex;flex-direction:column;gap:8px;}
.preview-controls-row-3{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:8px;align-items:end;}
.pc-label.compact{min-width:0;}
.pc-label.compact span{white-space:nowrap;}
.pc-label.compact select{height:36px;padding:6px 10px;}
.compact-actions{display:flex;gap:6px;flex-wrap:nowrap;}
.compact-actions .btn{padding:7px 10px;border-radius:12px;font-size:12px;line-height:1;height:34px;}
.compact-actions .btn.ghost{background:#eef2f7;color:#111827;border:1px solid #dce3ef;}
.compact-actions .btn.danger{background:#fbe9e9;color:#b03a3a;border:1px solid #f2d2d2;}

/* ===== Template editor ===== */
.template-editor-modal{width:min(1180px,96vw);max-width:96vw;}
.template-editor-body{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:14px;padding:14px;}
.template-editor-left{display:flex;flex-direction:column;gap:10px;min-width:0;}
.template-editor-toolbar{display:flex;gap:8px;align-items:end;flex-wrap:wrap;}
.field.small{font-size:11px;color:#4b5563;}
.field.small input,.field.small select{height:34px;border-radius:10px;border:1px solid #d9dfeb;padding:7px 10px;outline:none;background:#fff;color:#111827;}
.field.small input:focus,.field.small select:focus{border-color:rgba(79,109,245,0.75);box-shadow:0 0 0 3px rgba(79,109,245,0.12);}
.btn-sm{padding:7px 10px !important;height:34px;font-size:12px !important;}
.template-canvas-wrap{border:1px solid var(--border);border-radius:14px;background:#f8fafc;padding:10px;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;}
.template-canvas-wrap.is-dragging{touch-action:none;overscroll-behavior:none;}
.template-canvas{position:relative;width:720px;height:900px;margin:0 auto;background:#fff;border:1px dashed #d7deeb;border-radius:12px;overflow:hidden;}
.template-slot{position:absolute;border:2px dashed #7c93ff;background:rgba(79,109,245,0.08);border-radius:10px;cursor:move;overflow:hidden;display:flex;align-items:flex-start;justify-content:flex-start;touch-action:none;user-select:none;-webkit-user-select:none;}
.template-slot.active{border-color:#3558ff;background:rgba(79,109,245,0.16);box-shadow:0 0 0 2px rgba(79,109,245,0.14);}

.template-slot-preview{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none;-webkit-user-drag:none;}
.template-slot-label{position:relative;z-index:2;font-size:12px;font-weight:800;color:#26346a;background:rgba(255,255,255,0.92);padding:4px 7px;border-radius:8px;margin:6px;pointer-events:none;}
.template-slot-handle{position:absolute;z-index:3;width:14px;height:14px;border-radius:999px;background:#fff;border:2px solid #3558ff;box-shadow:0 1px 4px rgba(37,99,235,0.2);opacity:0;pointer-events:auto;touch-action:none;transition:opacity .14s ease, transform .14s ease;}
.template-slot.active .template-slot-handle,
.template-slot:hover .template-slot-handle{opacity:1;}
.template-slot-handle.tl{left:-8px;top:-8px;cursor:nwse-resize;}
.template-slot-handle.tr{right:-8px;top:-8px;cursor:nesw-resize;}
.template-slot-handle.bl{left:-8px;bottom:-8px;cursor:nesw-resize;}
.template-slot-handle.br{right:-8px;bottom:-8px;cursor:nwse-resize;}
.template-editor-side{display:flex;flex-direction:column;gap:10px;min-width:0;}
@media (pointer: coarse), (max-width: 900px){
  .template-slot-handle{
    width:22px;
    height:22px;
    opacity:1;
  }
  .template-slot-handle.tl{left:-12px;top:-12px;}
  .template-slot-handle.tr{right:-12px;top:-12px;}
  .template-slot-handle.bl{left:-12px;bottom:-12px;}
  .template-slot-handle.br{right:-12px;bottom:-12px;}
}
.tpl-slots-list{border:1px solid var(--border);border-radius:14px;padding:8px;max-height:300px;overflow:auto;background:#fbfcff;display:flex;flex-direction:column;gap:6px;}
.tpl-slot-item{border:1px solid #e5eaf3;border-radius:10px;padding:8px 10px;background:#fff;cursor:pointer;font-size:12px;}
.tpl-slot-item.active{border-color:#6d86ff;background:#eef3ff;}
.tpl-slot-item b{display:block;font-size:12px;color:#111827;}
.tpl-slot-item span{color:#6b7280;}
.template-slot-form{border:1px solid var(--border);border-radius:14px;padding:10px;background:#fff;display:flex;flex-direction:column;gap:8px;}
.template-slot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.template-editor-actions{display:flex;justify-content:space-between;gap:8px;margin-top:4px;}
@media (max-width: 1100px){.preview-controls-row-3{grid-template-columns:1fr;}.compact-actions{flex-wrap:wrap;}.template-editor-body{grid-template-columns:1fr;}.template-canvas{width:100%;max-width:720px;height:900px;}}


.preview-controls-inline{
  grid-template-columns: 1fr 1fr 0.9fr;
  gap:8px;
  align-items:end;
}
.pc-label.compact span{ font-size:11px; }
.pc-label.compact select{ height:38px; }
.template-actions-compact{
  display:flex;
  gap:8px;
  flex-wrap:nowrap;
}
.template-actions-compact .btn{
  padding:7px 10px;
  min-height:34px;
  font-size:12px;
  border-radius:12px;
}
.preview-box{ margin-top:8px; }

.template-editor-modal{
  width:min(1180px, calc(100vw - 40px));
  max-width:1180px;
}
.template-editor-body{
  display:grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap:16px;
  padding:16px;
}
.template-editor-topbar{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap:10px;
  margin-bottom:12px;
}
.field.small span{ font-size:12px; color:var(--muted); margin-bottom:4px; display:block; }
.field.small input, .field.small select{
  width:100%; height:36px; border:1px solid var(--border); border-radius:10px; padding:6px 10px;
}
.template-editor-stage{
  position:relative;
  width:100%;
  aspect-ratio: 5 / 6;
  border:1px solid var(--border);
  border-radius:14px;
  background: linear-gradient(180deg, #fff, #f8fafc);
  overflow:hidden;
}
.editor-stage-slot{
  position:absolute;
  border:2px dashed #94a3b8;
  background: rgba(79,109,245,0.08);
  color:#1f2937;
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  padding:8px;
  font-weight:800;
  font-size:12px;
  cursor:move;
  user-select:none;
}
.editor-stage-slot.on{
  border-color:#4f6df5;
  background: rgba(79,109,245,0.14);
  box-shadow: 0 0 0 2px rgba(79,109,245,0.12) inset;
}
.template-editor-side{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.template-editor-side-head{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.template-editor-side-actions{ display:flex; gap:8px; }
.editor-slot-list{
  display:flex;
  flex-direction:column;
  gap:6px;
  max-height:220px;
  overflow:auto;
  padding-right:4px;
}
.editor-slot-item{
  border:1px solid var(--border);
  background:#fff;
  border-radius:10px;
  padding:9px 10px;
  text-align:left;
  cursor:pointer;
  font-weight:700;
}
.editor-slot-item.on{ border-color:#4f6df5; background:#eef2ff; }
.editor-slot-fields{ display:flex; flex-direction:column; gap:10px; }
.editor-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
@media (max-width: 1280px){
  .preview-controls-inline{ grid-template-columns: 1fr; }
  .template-actions-compact{ flex-wrap:wrap; }
  .template-editor-body{ grid-template-columns: 1fr; }
}

/* ===== Fixed viewport template editor ===== */
.modal-overlay{
  align-items:center;
  justify-content:center;
  padding:12px;
  overflow:hidden;
}

.template-editor-modal{
  width:min(1280px, calc(100vw - 24px));
  max-width:min(1280px, calc(100vw - 24px));
  height:min(calc(100vh - 24px), 960px);
  max-height:calc(100vh - 24px);
  display:flex;
  flex-direction:column;
}

.template-editor-modal .modal-head{
  position:sticky;
  top:0;
  z-index:3;
  flex:0 0 auto;
}

.template-editor-body{
  flex:1 1 auto;
  min-height:0;
  display:grid;
  grid-template-columns:minmax(0, 1fr) 390px;
  gap:16px;
  padding:16px;
  overflow:hidden;
}

.template-editor-left,
.template-editor-side{
  min-height:0;
}

.template-editor-left{
  display:flex;
  flex-direction:column;
  gap:10px;
  overflow:auto;
  padding-right:4px;
}

.template-editor-toolbar{
  position:sticky;
  top:0;
  z-index:2;
  background:linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.92));
  padding-bottom:8px;
}

.template-canvas{
  width:min(860px, 100%);
  max-width:100%;
  margin:0 auto;
  flex:0 0 auto;
}

.template-editor-side{
  display:flex;
  flex-direction:column;
  gap:10px;
  overflow:hidden;
}

.tpl-slots-list{
  flex:0 0 auto;
  max-height:40%;
  min-height:160px;
}

.panel-card{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px;
  background:#fff;
}

.xy-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
}

.template-editor-actions{
  position:sticky;
  bottom:0;
  z-index:2;
  background:linear-gradient(180deg, rgba(255,255,255,0.92), #fff 20%);
  padding-top:10px;
  padding-bottom:2px;
}

.template-editor-side .modal-actions{
  flex:0 0 auto;
  position:sticky;
  bottom:0;
  background:linear-gradient(180deg, rgba(255,255,255,0.9), #fff 30%);
  padding-top:8px;
  margin-top:0;
}

@media (max-width: 1180px){
  .template-editor-modal{
    height:calc(100vh - 16px);
    max-height:calc(100vh - 16px);
  }
  .template-editor-body{
    grid-template-columns:1fr;
  }
  .template-editor-left{
    overflow:auto;
  }
  .template-editor-side{
    overflow:auto;
  }
  .tpl-slots-list{
    max-height:220px;
    min-height:140px;
  }
}


/* Fix: edit button must stay above preview content and receive clicks */
.preview-head,
.template-actions,
.compact-actions {
  position: relative;
  z-index: 5;
}

#btnTemplateEdit,
#btnTemplateDelete {
  position: relative;
  z-index: 6;
  pointer-events: auto;
}

.preview-box {
  position: relative;
  z-index: 1;
}


/* ===== Compact template editor fit ===== */
.template-editor-modal{
  width:min(1240px, calc(100vw - 16px));
  max-width:min(1240px, calc(100vw - 16px));
  height:min(calc(100vh - 16px), 920px);
  max-height:calc(100vh - 16px);
}

.template-editor-body{
  grid-template-columns:minmax(0, 1fr) 300px;
  gap:12px;
  padding:12px;
}

.template-editor-left{
  overflow:hidden;
}

.template-editor-toolbar{
  padding-bottom:6px;
  margin-bottom:4px;
}

.template-canvas{
  width:auto;
  max-width:100%;
  max-height:100%;
}

.tpl-slots-list{
  max-height:180px;
  min-height:120px;
}

.panel-card{
  padding:10px;
}

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

.template-editor-actions{
  flex-wrap:wrap;
}

.template-editor-actions .btn{
  flex:1 1 140px;
}

@media (max-width: 1180px){
  .template-editor-body{
    grid-template-columns:1fr;
  }
  .template-editor-left,
  .template-editor-side{
    overflow:auto;
  }
}

.text-blocks-panel{
  margin-top:12px;
  border:1px solid var(--border);
  border-radius:16px;
  background:#fff;
  padding:12px;
  box-shadow: var(--shadow);
}
.text-blocks-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.text-blocks-title{
  font-size:15px;
  font-weight:900;
  color:#111827;
}
.text-blocks-sub{
  font-size:12px;
  color:var(--muted);
}
.text-blocks-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.text-block-card{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:8px 10px;
  border:1px solid #e7ebf4;
  border-radius:14px;
  background:#fbfcff;
}
.text-block-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.text-block-card-title{
  font-size:13px;
  font-weight:800;
  color:#1f2937;
}
.text-block-card-meta{
  font-size:11px;
  color:#6b7280;
}
.text-block-input{
  width:100%;
  min-height:44px;
  height:44px;
  max-height:320px;
  resize:vertical;
  overflow:auto;
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 12px;
  font:600 14px/1.4 "Segoe UI", Arial, sans-serif;
  color:#111827;
  background:#fff;
  outline:none;
}
.text-block-input:focus{
  border-color:rgba(79,109,245,0.8);
  box-shadow:0 0 0 3px rgba(79,109,245,0.12);
}
.template-slot-text{
  position:absolute;
  inset:0;
  z-index:1;
  padding:30px 10px 10px;
  color:#1f2937;
  font:700 16px/1.1 "Segoe UI", Arial, sans-serif;
  white-space:pre-wrap;
  word-break:break-word;
  overflow:hidden;
  pointer-events:none;
}

.panel-subcard{
  margin: 6px 0 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(99,102,241,0.04);
}
.segmented-control{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.segmented-btn{
  border:1px solid var(--line);
  background:#fff;
  color:var(--ink);
  border-radius:12px;
  padding:10px 12px;
  font: inherit;
  font-weight:700;
  cursor:pointer;
  transition:.16s ease;
}
.segmented-btn:hover{ border-color: var(--accent); }
.segmented-btn.active{
  background:#fff;
  border-color: var(--accent);
  color:var(--ink);
  box-shadow: 0 0 0 2px rgba(79,107,233,0.14);
}
.template-slot-text.bold{ font-weight: 700; }
.template-slot-text.italic{ font-style: italic; font-weight: 500; }
.template-slot-text.normal{ font-weight: 500; }


.password-modal{max-width:420px;width:min(92vw,420px)}
.password-card{margin-top:8px}
.password-error{margin-top:8px;color:#b42318;font-weight:700}
#btnTemplateAccess.is-open{opacity:.9}

/* Пароль к шаблонам: заметная кнопка и гарантированный клик */
#btnTemplateAccess{
  position: relative;
  z-index: 7;
  pointer-events: auto;
  background: linear-gradient(180deg,#4f6df5 0%,#3558ff 100%);
  color:#fff;
  border:1px solid rgba(53,88,255,.35);
  box-shadow:0 8px 20px rgba(53,88,255,.18);
}
#btnTemplateAccess:hover{ transform:translateY(-1px); filter:brightness(1.02); }
#btnTemplateAccess.is-open{
  background: linear-gradient(180deg,#1f9d55 0%,#198754 100%);
  border-color: rgba(25,135,84,.35);
  color:#fff;
  opacity:1;
}
#templateAccessModal[aria-hidden="false"]{ display:flex; }
#templateAccessModal .field input,
#templateAccessInput{
  pointer-events:auto !important;
  user-select:text !important;
  -webkit-user-select:text !important;
  position:relative;
  z-index:1001;
}
#templateAccessModal .modal,
#templateAccessModal .panel-card{
  position:relative;
  z-index:1000;
}


.xy-grid-zonly{
  display:grid;
  grid-template-columns:1fr;
}
.xy-grid-zonly .compact-field{
  max-width:170px;
}


#btnTemplateAccess,
#btnTemplateEdit,
#btnTemplateDelete{
  pointer-events:auto !important;
  position:relative;
  z-index:20;
}
#btnTemplateEdit.is-locked,
#btnTemplateDelete.is-locked{
  opacity:1;
}


.template-editor-actions .btn.ghost{
  background:#f3f4f6 !important;
  color:#111827 !important;
  border:1px solid #e5e7eb !important;
}









.template-editor-toolbar{
  display:grid !important;
  grid-template-columns: 300px 300px 240px 190px;
  gap:14px;
  align-items:end;
  flex-wrap:nowrap !important;
}

.template-editor-toolbar > *{
  min-width:0;
}

.template-editor-toolbar .field.compact-field,
.template-editor-toolbar .direction-field{
  width:100%;
  min-width:0;
  margin:0;
}

.template-editor-toolbar .field.compact-field input,
.template-editor-toolbar .direction-field input{
  width:100%;
  height:52px;
  box-sizing:border-box;
}

#tplSaveCategory,
#tplAddSlot{
  width:100%;
  height:52px;
  min-width:0;
  padding:0 18px !important;
  border-radius:16px;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  box-sizing:border-box;
  align-self:end;
}

#tplSaveCategory{
  border:1px solid #d7def0 !important;
  background:#eef2ff !important;
  color:#1f2a44 !important;
  font-weight:800 !important;
  box-shadow:0 1px 2px rgba(15,23,42,.06);
  visibility:visible !important;
  opacity:1 !important;
}

#tplSaveCategory:hover{
  filter:brightness(1.02);
}

#tplAddSlot{
  font-weight:800;
}

@media (max-width: 1180px){
  .template-editor-toolbar{
    grid-template-columns: 1fr 1fr 220px 180px;
  }
}




/* Компактная верхняя строка редактора шаблона */
.template-editor-toolbar{
  display:grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 220px 170px;
  gap:10px;
  align-items:end;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}

.template-editor-toolbar > *{
  min-width:0;
  max-width:100%;
}

.template-editor-toolbar .field.compact-field,
.template-editor-toolbar .direction-field{
  width:100%;
  min-width:0;
  margin:0;
}

.template-editor-toolbar .field.compact-field span,
.template-editor-toolbar .direction-field span{
  margin-bottom:6px;
  font-size:13px;
}

.template-editor-toolbar .field.compact-field input,
.template-editor-toolbar .direction-field input{
  width:100%;
  height:40px;
  box-sizing:border-box;
  padding:0 14px;
  border-radius:14px;
}

#tplSaveCategory,
#tplAddSlot{
  width:100%;
  min-width:0;
  height:40px;
  padding:0 14px !important;
  border-radius:14px;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  box-sizing:border-box;
  align-self:end;
  font-size:14px;
  line-height:1;
}

#tplSaveCategory{
  border:1px solid #d7def0 !important;
  background:#eef2ff !important;
  color:#1f2a44 !important;
  font-weight:800 !important;
  box-shadow:0 1px 2px rgba(15,23,42,.06);
  visibility:visible !important;
  opacity:1 !important;
}

#tplSaveCategory:hover{
  filter:brightness(1.02);
}

#tplAddSlot{
  font-weight:800;
}

@media (max-width: 1400px){
  .template-editor-toolbar{
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 205px 155px;
  }
}

@media (max-width: 1260px){
  .template-editor-toolbar{
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 190px 145px;
  }
  #tplSaveCategory,
  #tplAddSlot{
    font-size:13px;
    padding:0 10px !important;
  }
}



/* Надёжная кликабельность полей в шапке редактора */
.template-editor-toolbar{
  position:sticky;
  top:0;
  z-index:40 !important;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.94));
  padding-bottom:8px;
}

.template-editor-toolbar .field,
.template-editor-toolbar input,
.template-editor-toolbar button,
#tplName,
#tplCategoryName,
#tplSaveCategory,
#tplAddSlot{
  position:relative;
  z-index:41;
  pointer-events:auto !important;
}

.template-editor-left{
  position:relative;
  z-index:2;
}

.template-canvas-wrap,
.template-canvas,
#templateCanvas{
  position:relative;
  z-index:1;
}


/* Убрали список слотов справа сверху — форма поднимается наверх */
#tplSlotsList{
  display:none !important;
}

.template-editor-side{
  justify-content:flex-start;
  align-content:start;
}

/* Final template editor layout: toolbar is isolated from the scrollable canvas area */
.template-editor-left{
  position:relative;
  z-index:2;
  display:grid !important;
  grid-template-rows:auto minmax(0, 1fr);
  overflow:hidden !important;
}

.template-editor-toolbar{
  position:relative !important;
  top:auto !important;
  z-index:6 !important;
  flex:0 0 auto;
}

.template-editor-toolbar .field,
.template-editor-toolbar input,
.template-editor-toolbar button,
#tplName,
#tplCategoryName,
#tplSaveCategory,
#tplAddSlot{
  position:relative;
  z-index:7;
  pointer-events:auto !important;
}

.template-canvas-wrap{
  position:relative;
  z-index:1;
  min-height:0;
  overflow:auto !important;
  border:1px solid var(--border);
  border-radius:14px;
  background:#f8fafc;
  padding:10px;
}

.template-canvas,
#templateCanvas{
  position:relative;
  z-index:1;
  margin:0 auto;
}

.template-editor-side .panel-card{
  margin-top:0 !important;
}

.template-editor-side .panel-card:first-of-type{
  position:sticky;
  top:0;
}


.layer-header-main{
  min-width:0;
}
.layer-actions-row{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}
.layer-move-btn{
  min-width:0;
  width:18px;
  height:18px;
  padding:0 !important;
  border-radius:6px;
  background:transparent;
  color:#ff2b2b;
  font-size:17px;
  font-weight:900;
  line-height:1;
  box-shadow:none;
}
.layer-move-btn:hover{
  background:rgba(255,43,43,0.08);
}
.layer-move-btn:disabled{
  opacity:0.3;
  background:transparent;
}
.layer-delete-btn{
  min-width:58px;
  height:17px !important;
  padding:2px 6px !important;
  border-radius:8px;
  font-size:7px !important;
  line-height:1;
  box-shadow:none;
  opacity:0.82;
}
.layer-delete-btn:hover{
  opacity:1;
}
.layer-manager{
  background:var(--panel);
  border:1px dashed var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:14px;
}
.layer-manager-title{
  font-weight:900;
  font-size:15px;
}
.layer-manager-sub{
  margin-top:4px;
  color:var(--muted);
  font-size:12px;
}
.layer-manager-row{
  display:flex;
  gap:10px;
  margin-top:12px;
  align-items:center;
}
.layer-manager-input{
  flex:1 1 auto;
  min-width:0;
  height:44px;
  border:1px solid var(--border);
  border-radius:14px;
  padding:0 14px;
  background:#fff;
  color:var(--text);
}
.layer-manager-add{
  flex:0 0 auto;
}
@media (max-width: 900px){
  .layer-manager-row{
    flex-direction:column;
    align-items:stretch;
  }
  .layer-delete-btn{
    min-width:0;
  }
}


/* Надёжная кликабельность управления слоями */
.layer-manager{
  position:relative;
  z-index:8;
}
.layer-manager-row,
.layer-manager-input,
.layer-manager-add{
  position:relative;
  z-index:9;
}
.layer-manager-input,
.layer-manager-add{
  pointer-events:auto !important;
}


.workspace-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}
#layerManager{
  flex:0 0 auto;
}
#layerManager .layer-manager-input{
  user-select:text;
  -webkit-user-select:text;
}


.layer-delete-message{
  display:flex;
  flex-direction:column;
  gap:6px;
  color:var(--text);
  line-height:1.45;
  margin-bottom:8px;
}
.layer-delete-message div:first-child{
  font-weight:800;
  margin-bottom:4px;
}

.preview-box{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.preview-items-summary{
  border-top:1px solid #e7ebf4;
  padding-top:14px;
}

.preview-items-summary-list{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  text-align:center;
}

.preview-caption-line{
  max-width:100%;
  font-size:16px;
  line-height:1.52;
  font-weight:600;
  font-family:"Bodoni MT", Didot, "Baskerville Old Face", "Times New Roman", serif;
  letter-spacing:0.03em;
  color:#111827;
  word-break:break-word;
}

.preview-caption-index{
  display:inline-block;
  min-width:24px;
  margin-right:4px;
  color:#374151;
  font-weight:700;
}

.preview-caption-text{
  color:#111827;
  font-weight:600;
}

.preview-caption-link{
  color:#2563eb;
  font-weight:600;
  text-decoration:underline;
  text-decoration-thickness:from-font;
  text-underline-offset:3px;
}

.preview-caption-link:hover{
  color:#1d4ed8;
}

.product-links-panel{
  margin-top:12px;
  border:1px solid var(--border);
  border-radius:16px;
  background:#fff;
  padding:12px;
  box-shadow:var(--shadow);
  position:relative;
  z-index:8;
}

.product-links-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.product-links-title{
  font-size:15px;
  font-weight:900;
  color:#111827;
}

.product-links-sub{
  font-size:12px;
  color:var(--muted);
  text-align:right;
}

.product-links-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.product-link-card{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:10px;
  border:1px solid #e7ebf4;
  border-radius:14px;
  background:#fbfcff;
}

.product-link-card.is-hidden{
  background:#fff7f7;
  border-color:#f5c7c7;
}

.product-link-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.product-link-card-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

.product-link-card-title{
  font-size:13px;
  font-weight:800;
  color:#1f2937;
}

.product-link-card-meta{
  font-size:11px;
  color:#6b7280;
}

.product-link-remove{
  width:26px;
  height:26px;
  border:0;
  border-radius:999px;
  background:#ef4444;
  color:#fff;
  font-size:18px;
  font-weight:900;
  line-height:1;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 12px rgba(239,68,68,0.2);
}

.product-link-remove:hover{
  background:#dc2626;
}

.product-link-hidden-note{
  font-size:12px;
  color:#b42318;
  font-weight:700;
  line-height:1.4;
}

.product-link-active-note{
  font-size:12px;
  color:#15803d;
  font-weight:700;
  line-height:1.4;
}

.product-link-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
}

.product-link-field{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:12px;
  color:#4b5563;
  position:relative;
  z-index:9;
}

.product-link-field input{
  width:100%;
  height:40px;
  border:1px solid var(--border);
  border-radius:12px;
  padding:0 12px;
  font:500 14px/1.2 "Segoe UI", Arial, sans-serif;
  color:#111827;
  background:#fff;
  outline:none;
  position:relative;
  z-index:10;
  pointer-events:auto !important;
  user-select:text;
  -webkit-user-select:text;
}

.product-link-field input:focus{
  border-color:rgba(79,109,245,0.8);
  box-shadow:0 0 0 3px rgba(79,109,245,0.12);
}

@media (max-width: 900px){
  .product-links-head,
  .product-link-card-head{
    flex-direction:column;
    align-items:flex-start;
  }

  .product-links-sub{
    text-align:left;
  }
}

.btn.ghost-dark{
  background:#111827;
  color:#fff;
}

#btnLeonardoSettings{
  position:relative;
}

#btnLeonardoSettings.is-configured{
  background:linear-gradient(180deg,#16a34a 0%, #15803d 100%);
  color:#fff;
  box-shadow:0 8px 18px rgba(21,128,61,0.2);
}

.cutoutbtn{
  position:absolute;
  top:42px;
  right:6px;
  width:30px;
  height:30px;
  min-width:30px;
  padding:0 !important;
  border-radius:999px;
  border:0;
  background:rgba(255,255,255,0.96);
  color:transparent;
  font-size:0;
  font-weight:900;
  line-height:1;
  box-shadow:0 6px 14px rgba(0,0,0,0.12);
  overflow:hidden;
}

.cutoutbtn::before{
  content:"\2702";
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#9ca3af;
  font-size:15px;
  line-height:1;
  transform:translateY(-0.5px);
}

.cutoutbtn:hover{
  filter:brightness(1.04);
}

.cutout-modal{
  width:min(1180px, calc(100vw - 20px));
  max-width:min(1180px, calc(100vw - 20px));
  height:min(calc(100vh - 20px), 940px);
  max-height:calc(100vh - 20px);
  display:flex;
  flex-direction:column;
}

.cutout-body{
  display:grid;
  grid-template-columns:minmax(0, 1.05fr) minmax(320px, 0.95fr);
  gap:16px;
  padding:16px;
  min-height:0;
  overflow:auto;
  align-items:start;
}

.cutout-pane{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:0;
  min-height:0;
}

.cutout-pane-head{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.cutout-tool-switch{
  display:inline-flex;
  align-items:center;
  gap:6px;
  width:max-content;
  padding:4px;
  border-radius:14px;
  background:#eef2ff;
  border:1px solid #dbe4ff;
}

.cutout-tool-btn{
  min-height:34px;
  padding:8px 12px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:#42526b;
  font:800 12px/1 "Segoe UI", Arial, sans-serif;
  cursor:pointer;
  transition:background .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.cutout-tool-btn:hover{
  color:#1f2937;
}

.cutout-tool-btn.is-active{
  background:#4f6df5;
  color:#fff;
  box-shadow:0 8px 18px rgba(79,109,245,0.2);
}

.cutout-tool-btn:disabled{
  opacity:0.55;
  cursor:not-allowed;
  box-shadow:none;
}

.cutout-pane-title{
  font-size:16px;
  font-weight:900;
  color:#111827;
}

.cutout-pane-sub{
  font-size:12px;
  line-height:1.45;
  color:#6b7280;
}

.cutout-stage-outer,
.cutout-result-frame{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:420px;
  padding:14px;
  border:1px solid var(--border);
  border-radius:18px;
  background:
    linear-gradient(45deg, rgba(148,163,184,0.06) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(148,163,184,0.06) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(148,163,184,0.06) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(148,163,184,0.06) 75%),
    #f8fafc;
  background-size:28px 28px;
  background-position:0 0, 0 14px, 14px -14px, -14px 0;
  overflow:auto;
}

.cutout-stage{
  position:relative;
  display:inline-block;
  max-width:100%;
  cursor:crosshair;
  user-select:none;
  touch-action:none;
  overscroll-behavior:contain;
  -webkit-touch-callout:none;
}

.cutout-stage.is-lasso{
  cursor:crosshair;
}

.cutout-stage img,
.cutout-result-frame img{
  display:block;
  max-width:100%;
  max-height:520px;
  border-radius:16px;
  object-fit:contain;
  -webkit-user-drag:none;
  user-drag:none;
}

.cutout-selection{
  position:absolute;
  border:2px solid #4f6df5;
  border-radius:14px;
  background:rgba(79,109,245,0.12);
  box-shadow:0 0 0 9999px rgba(15,23,42,0.18);
  pointer-events:none;
}

.cutout-selection-svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  overflow:visible;
}

.cutout-selection-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:4;
}

.cutout-selection-mask{
  fill:rgba(15,23,42,0.18);
}

.cutout-selection-fill{
  fill:rgba(79,109,245,0.12);
}

.cutout-selection-stroke-bg{
  fill:none;
  stroke:rgba(255,255,255,0.98);
  stroke-width:6;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(0 0 8px rgba(15,23,42,0.18));
}

.cutout-selection-stroke{
  fill:none;
  stroke:#4f6df5;
  stroke-width:2.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(0 0 10px rgba(79,109,245,0.28));
}

.cutout-selection-handle{
  fill:#4f6df5;
  stroke:#ffffff;
  stroke-width:2;
  filter:drop-shadow(0 0 10px rgba(79,109,245,0.35));
}

.cutout-stage-footer{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.cutout-selection-info,
.cutout-result-meta,
.leonardo-settings-sub,
.leonardo-settings-state{
  font-size:12px;
  line-height:1.45;
  color:#6b7280;
}

.leonardo-settings-state{
  margin-bottom:10px;
  font-weight:800;
}

.leonardo-settings-state.is-configured{
  color:#15803d;
}

.cutout-result-frame{
  position:relative;
}

.cutout-result-empty{
  max-width:300px;
  text-align:center;
  font-size:13px;
  line-height:1.5;
  color:#64748b;
  font-weight:700;
}

.cutout-toolbar{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  margin-top:auto;
  padding-top:4px;
}

.cutout-toolbar .btn{
  min-height:38px;
}

.cutout-toolbar .btn:not(.primary):not(.ghost-dark),
.tryon-base-actions .btn:not(.primary):not(.ghost-dark),
.tryon-toolbar .btn:not(.primary):not(.ghost-dark){
  background:#eef2ff;
  color:#2b3b73;
  border:1px solid #d7e0ff;
}

.cutout-toolbar .btn:not(.primary):not(.ghost-dark):hover,
.tryon-base-actions .btn:not(.primary):not(.ghost-dark):hover,
.tryon-toolbar .btn:not(.primary):not(.ghost-dark):hover{
  background:#e2eaff;
  color:#1f2f63;
}

.tryon-modal{
  width:min(1220px, calc(100vw - 20px));
  max-width:min(1220px, calc(100vw - 20px));
  height:min(calc(100vh - 20px), 940px);
  max-height:calc(100vh - 20px);
  display:flex;
  flex-direction:column;
}

.tryon-body{
  display:grid;
  grid-template-columns:minmax(320px, 0.92fr) minmax(360px, 1.08fr);
  gap:16px;
  padding:16px;
  min-height:0;
  overflow:auto;
  align-items:start;
}

.tryon-pane{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:0;
  min-height:0;
}

.tryon-pane-head{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.tryon-pane-title{
  font-size:16px;
  font-weight:900;
  color:#111827;
}

.tryon-pane-sub,
.tryon-result-meta{
  font-size:12px;
  line-height:1.45;
  color:#6b7280;
}

.tryon-base-actions,
.tryon-toolbar{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.tryon-base-actions .btn,
.tryon-toolbar .btn{
  min-height:38px;
}

.tryon-base-frame,
.tryon-result-frame{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:clamp(240px, 38vh, 420px);
  padding:14px;
  border:1px solid var(--border);
  border-radius:18px;
  background:
    linear-gradient(45deg, rgba(148,163,184,0.06) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(148,163,184,0.06) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(148,163,184,0.06) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(148,163,184,0.06) 75%),
    #f8fafc;
  background-size:28px 28px;
  background-position:0 0, 0 14px, 14px -14px, -14px 0;
  overflow:auto;
}

.tryon-base-frame{
  cursor:pointer;
  transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease, background-color .16s ease;
}

.tryon-base-frame:hover{
  border-color:#b9c7ff;
  box-shadow:0 0 0 4px rgba(79,109,245,0.08);
}

.tryon-base-frame:focus-visible{
  outline:none;
  border-color:#4f6df5;
  box-shadow:0 0 0 4px rgba(79,109,245,0.16);
}

.tryon-base-frame.is-empty{
  border-style:dashed;
}

.tryon-base-frame.is-empty::after{
  content:"Кликните здесь, чтобы выбрать фото";
  position:absolute;
  top:14px;
  right:14px;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(79,109,245,0.12);
  color:#2d4290;
  font:800 11px/1 "Segoe UI", Arial, sans-serif;
  letter-spacing:0.02em;
  pointer-events:none;
}

.tryon-base-frame.has-image::after{
  content:"Кликните, чтобы заменить фото";
  position:absolute;
  top:14px;
  right:14px;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(15,23,42,0.72);
  color:#fff;
  font:800 11px/1 "Segoe UI", Arial, sans-serif;
  letter-spacing:0.02em;
  pointer-events:none;
}

.tryon-base-frame img,
.tryon-result-frame img{
  display:block;
  max-width:100%;
  max-height:min(640px, 54vh);
  border-radius:16px;
  object-fit:contain;
  -webkit-user-drag:none;
  user-drag:none;
}

.tryon-base-hint{
  padding:12px 14px;
  border-radius:14px;
  border:1px solid #dbe4ff;
  background:#eef4ff;
  color:#364165;
  font-size:12px;
  line-height:1.5;
  font-weight:700;
}

.tryon-outfit-head{
  margin-top:2px;
}

.tryon-outfit-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:2px 0;
}

.tryon-outfit-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid #dbe4ff;
  background:#eef2ff;
  color:#26346a;
  font-size:12px;
  font-weight:800;
  line-height:1;
}

.tryon-outfit-chip span{
  color:#6b7280;
  font-weight:700;
}

.tryon-outfit-empty{
  padding:12px 14px;
  border-radius:14px;
  border:1px dashed #dbe4ff;
  background:#f8fafc;
  color:#64748b;
  font-size:12px;
  line-height:1.45;
  font-weight:700;
}

@media (max-width: 1080px){
  .cutout-body{
    grid-template-columns:1fr;
  }

  .tryon-body{
    grid-template-columns:1fr;
  }

  .cutout-stage-footer{
    flex-direction:column;
  }

  .cutout-stage-outer,
  .cutout-result-frame,
  .tryon-base-frame,
  .tryon-result-frame{
    min-height:280px;
  }
}

@media (max-height: 920px){
  .cutout-modal,
  .tryon-modal{
    height:calc(100vh - 12px);
    max-height:calc(100vh - 12px);
  }

  .cutout-body,
  .tryon-body{
    gap:12px;
    padding:12px;
  }

  .cutout-pane,
  .tryon-pane{
    gap:10px;
  }

  .cutout-stage-outer,
  .cutout-result-frame,
  .tryon-base-frame,
  .tryon-result-frame{
    min-height:220px;
  }

  .cutout-stage img,
  .cutout-result-frame img,
  .tryon-base-frame img,
  .tryon-result-frame img{
    max-height:min(520px, 44vh);
  }
}

/* ===== Mobile workspace layout ===== */
@media (max-width: 900px){
  body{
    height:auto;
    min-height:100svh;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior-y:auto;
    -webkit-overflow-scrolling:touch;
  }

  .app-shell{
    min-height:100svh;
    overflow:visible;
  }

  .topbar{
    grid-template-columns:1fr;
    gap:10px;
    padding:10px;
    overflow:visible;
  }

  .topbar-left{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }

  .auth-session-badge{
    flex-wrap:wrap;
    white-space:normal;
  }

  .auth-session-user{
    max-width:none;
  }

  .topbar-actions{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:8px;
    width:100%;
    overflow:visible;
    white-space:normal;
  }

  .topbar-actions > *{
    width:100%;
  }

  #authWorkspaceWrap,
  #viewMode,
  #btnTogglePreview{
    grid-column:1 / -1;
  }

  #viewMode{
    min-width:0;
    max-width:none;
    width:100%;
    height:40px;
    font-size:13px;
  }

  .range-wrap{
    display:none;
  }

  .auth-workspace-wrap{
    width:100%;
    justify-content:space-between;
    gap:10px;
    padding:8px 10px;
    font-size:12px;
  }

  .auth-workspace-wrap select{
    min-width:0;
    max-width:none;
    width:100%;
    height:34px;
  }

  .topbar-actions > .btn{
    width:100%;
    min-height:40px;
    padding:10px 12px;
    font-size:13px;
    white-space:normal;
  }

  .upload-bar{
    padding:10px;
  }

  .upload-title{
    font-size:14px;
    margin-bottom:8px;
  }

  .upload-inline{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
    align-items:stretch;
  }

  .upload-inline input,
  .upload-inline select,
  .upload-inline button{
    width:100%;
    min-width:0;
    height:40px;
  }

  .upload-inline input[type="file"]{
    min-width:0;
    height:auto;
  }

  .layout{
    flex:0 0 auto;
    min-height:auto;
    overflow:visible;
  }

  .workspace-area{
    flex-direction:column;
    height:auto;
    min-height:auto;
    gap:8px;
    padding:8px;
    overflow:visible;
  }

  .preview-panel{
    order:-1;
    width:100%;
    max-width:none;
    flex:0 0 auto;
    padding:12px;
    overflow:visible;
  }

  .workspace{
    overflow:visible;
    padding-bottom:8px;
    gap:8px;
  }

  .workspace-list{
    gap:8px;
  }

  .layer{
    border-radius:16px;
  }

  .layer-header{
    flex-wrap:wrap;
    align-items:flex-start;
    gap:10px;
    padding:12px 12px 10px;
  }

  .layer-header-main{
    width:100%;
  }

  .layer-actions-row{
    width:100%;
    justify-content:flex-start;
    gap:10px;
  }

  .layer-move-btn{
    width:34px;
    height:34px;
    border-radius:10px;
    font-size:22px;
    background:rgba(255,43,43,0.08);
  }

  .layer-delete-btn{
    min-width:92px;
    height:34px !important;
    padding:0 12px !important;
    border-radius:10px;
    font-size:12px !important;
    line-height:34px;
  }

  .layer-cards{
    gap:8px;
    padding:0 10px 10px;
    scroll-snap-type:x proximity;
  }

  .card,
  body.ultra .card,
  body.super .card,
  body.photo-only .card{
    flex:0 0 clamp(150px, 44vw, 188px);
    padding:8px;
    border-radius:16px;
    scroll-snap-align:start;
  }

  .card img,
  body.ultra .card img,
  body.super .card img,
  body.photo-only .card img{
    height:150px;
    border-radius:10px;
  }

  .name{
    font-size:12px;
  }

  .meta{
    font-size:11px;
  }

  .trashbtn,
  .cutoutbtn{
    width:32px;
    height:32px;
  }

  .cutoutbtn{
    top:44px;
  }

  .variants-bar{
    left:6px;
    bottom:6px;
  }

  .variant-dots{
    max-width:120px;
  }

  .preview-head{
    flex-direction:column;
    align-items:stretch;
    gap:12px;
  }

  .preview-toprow,
  .preview-controls,
  .preview-controls-row-2,
  .preview-controls-inline,
  .template-actions.compact-actions{
    display:grid !important;
    grid-template-columns:1fr;
    gap:8px;
    width:100%;
  }

  .pc-label{
    min-width:0;
  }

  .preview-controls select{
    width:100%;
    height:38px;
  }

  .preview-box{
    padding:10px;
    gap:12px;
  }

  .preview-items-summary{
    padding-top:12px;
  }

  .preview-items-summary-list{
    align-items:flex-start;
    text-align:left;
  }

  .preview-caption-line{
    font-size:15px;
  }

  .preview-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
  }

  .preview-actions .btn{
    width:100%;
    min-height:42px;
  }

  .product-links-panel,
  .text-blocks-panel{
    padding:10px;
  }

  .product-links-head{
    align-items:flex-start;
  }

  .statusbar{
    height:auto;
    min-height:34px;
    padding:8px 10px;
    line-height:1.35;
  }

  #cutoutModal,
  #tryOnModal{
    align-items:flex-start;
    padding:8px;
    overflow:auto;
  }

  .cutout-modal,
  .tryon-modal{
    width:calc(100vw - 16px);
    max-width:calc(100vw - 16px);
    height:auto;
    max-height:none;
    min-height:calc(100svh - 16px);
    margin:0 auto;
    border-radius:18px;
  }

  .cutout-modal .modal-head,
  .tryon-modal .modal-head{
    position:sticky;
    top:0;
    z-index:3;
    padding:12px;
  }

  .cutout-modal .modal-title,
  .tryon-modal .modal-title{
    font-size:16px;
    line-height:1.2;
  }

  .cutout-body,
  .tryon-body{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
    padding:12px;
    overflow:visible;
  }

  .cutout-pane,
  .tryon-pane{
    gap:10px;
  }

  .cutout-tool-switch{
    width:100%;
    display:grid;
    grid-template-columns:1fr 1fr;
  }

  .cutout-tool-btn{
    width:100%;
    min-height:38px;
  }

  .cutout-stage-outer,
  .cutout-result-frame,
  .tryon-base-frame,
  .tryon-result-frame{
    min-height:0;
    padding:10px;
    overflow:hidden;
  }

  .cutout-stage img,
  .cutout-result-frame img{
    width:100%;
    height:auto;
    max-width:100%;
    max-height:min(56svh, 420px);
  }

  .tryon-base-frame img,
  .tryon-result-frame img{
    width:100%;
    height:auto;
    max-width:100%;
    max-height:min(52svh, 400px);
  }

  .cutout-stage,
  .cutout-stage img,
  .cutout-selection,
  .cutout-selection-canvas,
  .cutout-selection-svg{
    touch-action:none;
  }

  .cutout-stage-footer{
    flex-direction:column;
    align-items:stretch;
    gap:8px;
  }

  .cutout-selection-info,
  .cutout-result-meta,
  .tryon-result-meta,
  .tryon-base-hint,
  .cutout-pane-sub,
  .tryon-pane-sub{
    font-size:12px;
    line-height:1.45;
  }

  .cutout-toolbar,
  .tryon-base-actions,
  .tryon-toolbar{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
    margin-top:0;
  }

  .cutout-toolbar .btn,
  .tryon-base-actions .btn,
  .tryon-toolbar .btn{
    width:100%;
    min-height:42px;
    white-space:normal;
    line-height:1.2;
    justify-content:center;
  }

  .tryon-base-frame.is-empty::after,
  .tryon-base-frame.has-image::after{
    top:10px;
    right:10px;
    left:10px;
    text-align:center;
    border-radius:12px;
    white-space:normal;
    line-height:1.25;
  }

  .tryon-outfit-list{
    gap:6px;
  }

  .tryon-outfit-chip{
    width:100%;
    justify-content:flex-start;
    border-radius:14px;
  }
}