/* ═══════════════════════════════════════════════
   Гусь Знает — main.css v4
   ═══════════════════════════════════════════════ */

:root {
  --ink:     #1A1714;
  --coral:   #E8685A;
  --coral-d: #C44A3C;
  --coral-l: #FDECEA;
  --sage:    #3D9E72;
  --sage-l:  #D4F0E4;
  --amber:   #F0A832;
  --amber-l: #FEF3D8;
  --blue:    #4A7EC8;
  --blue-l:  #D8E8FA;
  --sand:    #F2F0EB;
  --white:   #FFFFFF;
  --border:  #E5E2DE;
  --muted:   #6B6661;
  --shadow:  0 4px 20px rgba(0,0,0,.07);
  --radius:  16px;
  --ease:    all .18s ease;
  --font-h:  'Unbounded', sans-serif;
  --font-b:  'Onest', Arial, sans-serif;
  /* Высота хедера — единый источник правды для всех height:calc() */
  --header-h: 62px;
  --header-total-h: calc(62px + env(safe-area-inset-top, 0px));
  /* RGB-компоненты акцентных цветов — для rgba(var(--coral-rgb), .1) и т.п.
     Обновляются вместе с --coral / --ink через applyColorVar() в AdminPanel.js */
  --coral-rgb: 232, 104, 90;
  --ink-rgb:   26,  23,  20;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth;
       /* Предотвращает горизонтальный скролл страницы — частая причина
          «обрезанного» sticky-хедера: при overflow body sticky-элемент
          не покрывает вышедшую за viewport область. clip ≠ hidden:
          не создаёт новый stacking context, sticky продолжает работать. */
       overflow-x: clip;
}
body { font-family: var(--font-b); background: var(--sand); color: var(--ink); line-height: 1.5; min-height: 100vh; }
a { text-decoration: none; color: inherit; }
h1 { font-family: var(--font-h); font-size: clamp(1.4rem,4vw,2.2rem); font-weight: 900; letter-spacing: -.03em; }
h2 { font-family: var(--font-h); font-size: clamp(1rem,2.5vw,1.35rem); font-weight: 700; }
h3 { font-family: var(--font-h); font-size: .9rem; font-weight: 700; }

/* ── Container ── */
.container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }

/* ── Header ── */
/* position:sticky без GPU-слоя даёт 1px субпиксельный зазор при скролле.
   transform:translateZ(0) переводит элемент на собственный compositor layer → зазор исчезает. */
.header {
  background: var(--ink);
  position: sticky; top: 0; z-index: 100;
  /* transform убран — он отключает overflow:hidden у sticky в Safari,
     из-за чего видео/GIF фон не клипается внутри хедера.
     Вместо translateZ(0) используем will-change: transform — даёт GPU-слой без побочных эффектов */
  will-change: transform;
  /* PWA iPhone: extend header into notch / Dynamic Island area */
  padding-top: env(safe-area-inset-top, 0px);
  margin-top: 0;
  margin-bottom: -1px;
  /* Нужно для clip анимированного фона */
  overflow: hidden;
}
.header-container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; height: 62px; display: flex; align-items: center; gap: 1.5rem;
  /* Поверх anim-bg-el */
  position: relative; z-index: 2;
}
.logo { display: flex; align-items: center; gap: 12px; }
.logo-icon { font-size: 2.4rem; line-height: 1; display: flex; align-items: center; }
/* Nav icon/text — десктоп: текст виден, иконка скрыта */
.nav-ico { display: none; }
.nav-txt { display: inline; }
.logo-text { font-family: var(--font-h); font-size: .88rem; font-weight: 900; color: #fff; letter-spacing: -.02em; }
.nav { display: flex; gap: 2px; flex: 1; }
.nav a { color: rgba(255,255,255,.6); padding: 8px 14px; border-radius: 9px; font-size: .9rem; font-weight: 500; transition: var(--ease); }
.nav a:hover { background: rgba(255,255,255,.08); color: #fff; }
.header-actions { display: flex; align-items: center; gap: .75rem; }
.btn-login { color: rgba(255,255,255,.7); font-size: .9rem; padding: 8px 14px; border-radius: 9px; transition: var(--ease); }
.btn-login:hover { background: rgba(255,255,255,.08); color: #fff; }
.user-menu { display: flex; align-items: center; gap: .75rem; }
.user-menu a { color: rgba(255,255,255,.8); }
.user-menu a:hover { color: #fff; }
/* profile-name — имя пользователя в шапке */
.profile-name { display: inline !important; font-size: .9rem; font-weight: 500; white-space: nowrap; max-width: 110px; overflow: hidden; text-overflow: ellipsis; color: rgba(255,255,255,.8); }
.user-name { color: rgba(255,255,255,.65); font-size: .85rem; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-logout { background: rgba(255,255,255,.08); border: none; color: rgba(255,255,255,.6); padding: 7px 14px; border-radius: 9px; cursor: pointer; font-size: .85rem; font-family: var(--font-b); transition: var(--ease); }
.btn-logout:hover { background: rgba(255,255,255,.14); color: #fff; }
.admin-badge { background: var(--amber); color: var(--ink); padding: 4px 10px; border-radius: 7px; font-size: .75rem; font-weight: 700; }
.admin-badge .badge-text { display: inline; }

/* ── Buttons ── */
.btn-primary { display: inline-flex; align-items: center; gap: 5px; background: var(--coral); color: #fff; padding: 10px 20px; border-radius: 11px; border: none; font-family: var(--font-h); font-size: .75rem; font-weight: 700; cursor: pointer; transition: var(--ease); white-space: nowrap; text-decoration: none; }
.btn-primary:hover { background: var(--coral-d); transform: translateY(-1px); }
.btn-secondary { display: inline-flex; align-items: center; gap: 5px; background: var(--white); color: var(--ink); padding: 9px 18px; border-radius: 11px; border: 1.5px solid var(--border); font-family: var(--font-b); font-size: .85rem; font-weight: 500; cursor: pointer; transition: var(--ease); text-decoration: none; }
.btn-secondary:hover { background: var(--sand); border-color: rgba(0,0,0,.2); }
.btn-full { width: 100%; justify-content: center; }
.btn-sm { padding: 5px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--white); cursor: pointer; font-size: .78rem; font-family: var(--font-b); transition: var(--ease); }
.btn-sm:hover { background: var(--sand); }
.btn-sm.btn-danger, .btn-danger { background: #fee; border-color: #fcc; color: #b00; }
.btn-sm.btn-danger:hover { background: #fdd; }

/* ── Forms ── */
input, select, textarea { border: 1.5px solid var(--border); border-radius: 10px; padding: 9px 12px; font-size: .88rem; font-family: var(--font-b); transition: var(--ease); background: var(--white); color: var(--ink); width: 100%; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--coral); box-shadow: 0 0 0 3px rgba(232,104,90,.1); }
.form-group { display: flex; flex-direction: column; gap: 4px; }
.form-group label { font-size: .78rem; color: var(--muted); font-weight: 600; }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.checkbox-label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: .85rem; }
.checkbox-label input { width: auto; }
.optional { color: var(--muted); font-weight: 400; }

/* ── Alerts ── */
.alert { padding: 12px 16px; border-radius: 10px; font-size: .85rem; margin-bottom: 1rem; }
.alert-error { background: #FFEBEE; color: #B71C1C; border-left: 3px solid #C62828; }

/* ── Loader ── */
.loader { display: flex; justify-content: center; align-items: center; min-height: 180px; }
.loader-spinner { width: 36px; height: 36px; border: 3px solid var(--border); border-top-color: var(--coral); border-radius: 50%; animation: spin .65s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Toast ── */
.toast { position: fixed; bottom: 24px; right: 24px; background: var(--ink); color: #fff; padding: 11px 18px; border-radius: 11px; font-size: .82rem; font-weight: 500; transform: translateY(60px); opacity: 0; transition: var(--ease); z-index: 9999; max-width: 300px; }
.toast.show { transform: translateY(0); opacity: 1; }
.toast.error { background: #b00; }

/* ── Empty state ── */
.empty-state { text-align: center; padding: 4rem 1.5rem; }
.empty-icon { font-size: 3rem; display: block; margin-bottom: .75rem; }
.empty-state p { color: var(--muted); margin-bottom: 1.5rem; }

/* ── Error page ── */
.error-page { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 60vh; text-align: center; gap: 1rem; padding: 2rem; }
.error-page .error-icon { font-size: 3.5rem; }

/* ── Misc ── */
.muted { color: var(--muted); font-size: .82rem; }
.muted-sm { color: var(--muted); font-size: .75rem; }
.hint { font-size: .78rem; color: var(--muted); }
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; gap: 1rem; }

/* ══════════════════════════════════════
   HOME
   ══════════════════════════════════════ */
.hero { background: var(--ink); padding: 4rem 1.5rem 3.5rem; text-align: center; }
.hero-content { max-width: 680px; margin: 0 auto; }
.hero h1 { color: #fff; margin-bottom: .75rem; }
.hero p { color: rgba(255,255,255,.45); font-size: 1rem; margin-bottom: 2rem; }
.hero-search { display: flex; gap: .75rem; max-width: 540px; margin: 0 auto; }
.hero-search input { flex: 1; background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.18); color: #fff; border-radius: 13px; }
.hero-search input::placeholder { color: rgba(255,255,255,.3); }
.hero-search input:focus { border-color: var(--coral); background: rgba(255,255,255,.14); box-shadow: none; }
.hero-search button { background: var(--coral); color: #fff; border: none; padding: 10px 22px; border-radius: 13px; font-family: var(--font-h); font-size: .72rem; font-weight: 700; cursor: pointer; white-space: nowrap; transition: var(--ease); }
.hero-search button:hover { background: var(--coral-d); }

.categories { padding: 3rem 1.5rem; }
.categories h2 { text-align: center; margin-bottom: 1.5rem; }
.category-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; }
.category-card { background: var(--white); border-radius: var(--radius); padding: 1.25rem; border: 1.5px solid var(--border); text-align: center; transition: var(--ease); cursor: pointer; }
.category-card:hover { border-color: var(--coral); transform: translateY(-2px); box-shadow: var(--shadow); }
.category-icon { font-size: 1.75rem; margin-bottom: .6rem; }
.category-card h3 { font-size: .85rem; margin-bottom: .35rem; }
.category-card p { font-size: .75rem; color: var(--muted); }

/* ══════════════════════════════════════
   GUIDES
   ══════════════════════════════════════ */
.guides-filters { display: flex; gap: .75rem; margin-bottom: 1.5rem; }
.guides-filters input { flex: 1; }
.guides-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 1.1rem; }
.guide-card { background: var(--white); border-radius: var(--radius); padding: 1.25rem; border: 1.5px solid var(--border); transition: var(--ease); cursor: pointer; display: flex; flex-direction: column; }
.guide-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: rgba(232,104,90,.25); }
.guide-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem; }
.guide-icon { font-size: 1.75rem; }
.guide-type-badge { display: inline-block; padding: 3px 8px; border-radius: 6px; font-size: .7rem; font-weight: 700; }
.type-simple        { background: #E3F2FD; color: #1565C0; }
.type-guide_doc     { background: #E8F5E9; color: #2E7D32; }
.type-guide_quiz_doc{ background: #FFF3E0; color: #E65100; }
.guide-card h3 { font-size: .88rem; margin-bottom: .5rem; line-height: 1.4; }
.guide-card p { font-size: .8rem; color: var(--muted); flex: 1; margin-bottom: .75rem; line-height: 1.5; }
.guide-stats { display: flex; gap: 1rem; font-size: .72rem; color: var(--muted); margin-top: auto; }

/* ── Guide Detail ── */
.guide-header { text-align: center; margin-bottom: 2.5rem; }
.guide-icon-xl { font-size: 3.5rem; display: block; margin-bottom: .75rem; }
.guide-header h1 { margin-bottom: .6rem; }
.guide-header .muted { font-size: .95rem; margin-bottom: 1.5rem; display: block; }
.guide-actions { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }
.steps-list { display: flex; flex-direction: column; gap: .9rem; }
.step-card { background: var(--white); border-radius: var(--radius); padding: 1.25rem; border: 1.5px solid var(--border); display: flex; gap: 1rem; }
.step-num { width: 34px; height: 34px; min-width: 34px; background: var(--coral); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-h); font-size: .72rem; font-weight: 700; }
.step-body { flex: 1; }
.step-body h3 { margin-bottom: .4rem; font-size: .88rem; }
.step-content { color: var(--muted); font-size: .82rem; line-height: 1.6; white-space: pre-line; }
.step-deadline { display: inline-block; margin-top: .5rem; font-size: .75rem; color: var(--coral); font-weight: 700; }
.step-tip { margin-top: .6rem; padding: 7px 11px; border-radius: 8px; font-size: .8rem; }
.tip-warning { background: var(--amber-l); border-left: 3px solid var(--amber); }
.tip-info    { background: var(--blue-l);  border-left: 3px solid var(--blue);  }

/* ══════════════════════════════════════
   QUIZ PLAYER
   ══════════════════════════════════════ */
.quiz-page { max-width: 680px; margin: 2rem auto; padding: 0 1.5rem 4rem; }
.quiz-container { background: var(--white); border-radius: 22px; overflow: hidden; box-shadow: 0 8px 40px rgba(0,0,0,.1); }
.quiz-header { background: var(--ink); padding: 1.1rem 1.4rem; display: flex; align-items: center; gap: 1rem; }
.quiz-guide-icon { font-size: 1.8rem; flex-shrink: 0; }
.quiz-guide-title { font-family: var(--font-h); font-size: .82rem; font-weight: 700; color: #fff; }
.quiz-subtitle { font-size: .72rem; color: rgba(255,255,255,.4); margin-top: 2px; }
.quiz-progress-wrap { height: 4px; background: var(--sand); }
.quiz-progress-bar { height: 100%; background: linear-gradient(90deg, var(--coral), var(--amber)); transition: width .45s ease; }
.quiz-step-wrap { padding: 1.75rem 1.5rem; }
.quiz-step-num { font-size: .75rem; color: var(--muted); font-family: var(--font-h); margin-bottom: .9rem; }
.quiz-question { font-family: var(--font-h); font-size: 1rem; font-weight: 700; line-height: 1.4; margin-bottom: .9rem; }
.quiz-hint { background: var(--amber-l); padding: 9px 13px; border-radius: 9px; font-size: .8rem; color: #5a4000; margin-bottom: 1.1rem; border-left: 3px solid var(--amber); }
.quiz-opts { display: flex; flex-wrap: wrap; gap: .65rem; }
.quiz-opt { padding: 10px 16px; background: var(--white); border: 1.5px solid var(--border); border-radius: 22px; cursor: pointer; font-family: var(--font-b); font-size: .85rem; font-weight: 500; transition: var(--ease); min-height: 42px; text-align: left; }
.quiz-opt:hover { background: var(--coral-l); border-color: var(--coral); color: var(--coral-d); }
.quiz-input-field { margin-bottom: 1rem; }
.quiz-btn-row { display: flex; gap: .75rem; margin-top: 1.1rem; }

.quiz-result-wrap { padding: 1.75rem 1.5rem; }
.quiz-result-header { text-align: center; margin-bottom: 1.5rem; }
.quiz-result-icon { font-size: 3rem; margin-bottom: .5rem; }
.quiz-result-header h3 { font-size: 1.1rem; margin-bottom: .4rem; }
.quiz-result-header p { color: var(--muted); font-size: .85rem; }
.quiz-form { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; margin-bottom: 1.5rem; }
.quiz-form-field label { display: block; font-size: .75rem; color: var(--muted); font-weight: 600; margin-bottom: 3px; }
.quiz-doc-preview { background: var(--sand); border-radius: 11px; padding: .9rem; margin-bottom: 1.25rem; }
.quiz-doc-preview-label { font-size: .72rem; color: var(--muted); font-family: var(--font-h); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .6rem; }
.quiz-doc-text { font-family: 'Courier New', monospace; font-size: .76rem; line-height: 1.65; white-space: pre-wrap; color: var(--ink); max-height: 280px; overflow-y: auto; background: none; border: none; outline: none; width: 100%; }
.quiz-result-actions { display: flex; gap: .75rem; flex-wrap: wrap; }

/* ══════════════════════════════════════
   DOCUMENTS
   ══════════════════════════════════════ */
.docs-list { display: flex; flex-direction: column; gap: .7rem; }
.doc-card { background: var(--white); border-radius: var(--radius); padding: 1.1rem 1.25rem; border: 1.5px solid var(--border); display: flex; align-items: center; gap: 1rem; }
.doc-card-icon { font-size: 1.75rem; flex-shrink: 0; }
.doc-card-info { flex: 1; min-width: 0; }
.doc-card-title { font-weight: 600; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-card-meta { font-size: .75rem; color: var(--muted); margin-top: 2px; }
.doc-status-draft      { color: #E65100; font-weight: 600; }
.doc-status-ready      { color: var(--sage); font-weight: 600; }
.doc-status-downloaded { color: var(--blue); font-weight: 600; }
.doc-status-error      { color: #b00; font-weight: 600; }
.doc-card-actions { display: flex; gap: .4rem; align-items: center; flex-shrink: 0; flex-wrap: wrap; }
.doc-card-actions .btn-sm { padding: 5px 9px; font-size: .75rem; }

/* ══════════════════════════════════════
   CALENDAR
   ══════════════════════════════════════ */
.cal-groups { display: flex; flex-direction: column; gap: 2rem; }
.cal-group-title { font-size: .82rem; font-family: var(--font-h); font-weight: 700; margin-bottom: .9rem; padding-bottom: .4rem; border-bottom: 2px solid var(--border); display: flex; align-items: center; gap: .5rem; }
.cal-count { background: var(--border); padding: 1px 7px; border-radius: 10px; font-size: .68rem; }
.grp-overdue .cal-group-title { color: #b00; border-color: #fcc; }
.grp-today .cal-group-title   { color: #774400; border-color: var(--amber); }
.grp-done { opacity: .6; }
.ev-card { background: var(--white); border-radius: var(--radius); padding: 1rem 1.1rem; border: 1.5px solid var(--border); display: flex; align-items: center; gap: .9rem; margin-bottom: .6rem; transition: var(--ease); }
.ev-date { text-align: center; min-width: 42px; }
.ev-day { font-family: var(--font-h); font-size: 1.3rem; font-weight: 900; line-height: 1; }
.ev-mon { font-size: .65rem; color: var(--muted); text-transform: uppercase; }
.ev-info { flex: 1; }
.ev-title { font-weight: 600; font-size: .88rem; }
.ev-meta  { font-size: .75rem; color: var(--muted); margin-top: 1px; }
.ev-deadline { font-size: .7rem; color: var(--coral); font-weight: 700; display: block; margin-top: 2px; }
.ev-done-btn { background: var(--sand); border: 1.5px solid var(--border); border-radius: 50%; width: 34px; height: 34px; cursor: pointer; font-size: .9rem; transition: var(--ease); flex-shrink: 0; }
.ev-done-btn:hover { background: var(--sage-l); border-color: var(--sage); }
.ev-done-label { color: var(--sage); font-size: .78rem; font-weight: 700; }

/* ══════════════════════════════════════
   AUTH
   ══════════════════════════════════════ */
.auth-page { display: flex; align-items: center; justify-content: center; min-height: calc(100vh - 260px); padding: 2rem 1.5rem; }
.auth-card { background: var(--white); border-radius: 22px; padding: 2.25rem; width: 100%; max-width: 420px; box-shadow: 0 8px 40px rgba(0,0,0,.08); }
.auth-logo { font-size: 2.75rem; text-align: center; display: block; margin-bottom: .9rem; }
.auth-card h1 { font-size: 1.2rem; text-align: center; margin-bottom: 1.4rem; }
.auth-card form { display: flex; flex-direction: column; gap: .9rem; }
.auth-link { text-align: center; font-size: .82rem; color: var(--muted); margin-top: .9rem; }
.auth-link a { color: var(--coral); font-weight: 600; }

/* ══════════════════════════════════════
   MODAL
   ══════════════════════════════════════ */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 1rem; backdrop-filter: blur(3px); }
.modal-box { background: var(--white); border-radius: 22px; max-height: 90vh; overflow-y: auto; width: 100%; max-width: 540px; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.modal-wide { max-width: 800px; }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.4rem 0; position: sticky; top: 0; background: var(--white); border-radius: 22px 22px 0 0; z-index: 2; }
.modal-close { background: var(--sand); border: none; border-radius: 50%; width: 30px; height: 30px; cursor: pointer; font-size: .9rem; display: flex; align-items: center; justify-content: center; transition: var(--ease); }
.modal-close:hover { background: var(--border); }
.modal-body { padding: .9rem 1.4rem; }
.modal-footer { padding: .9rem 1.4rem 1.4rem; display: flex; justify-content: flex-end; gap: .65rem; border-top: 1px solid var(--border); margin-top: .5rem; }
.modal-section-title { font-weight: 700; font-size: .82rem; margin: 1rem 0 .6rem; display: flex; align-items: center; justify-content: space-between; gap: .65rem; }

/* ══════════════════════════════════════
   FOOTER
   ══════════════════════════════════════ */
.footer { background: var(--ink); color: rgba(255,255,255,.45); padding: 2.5rem 1.5rem 1.75rem; margin-top: 4rem;
  /* Для clip анимированного фона */
  position: relative; overflow: hidden;
}
.footer-container { max-width: 1200px; margin: 0 auto;
  /* Поверх anim-bg-el */
  position: relative; z-index: 2;
}
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2rem; margin-bottom: 2rem; }
.footer-logo { display: flex; align-items: center; gap: .5rem; font-family: var(--font-h); font-size: .78rem; color: #fff; margin-bottom: .65rem; }
.footer-col h4 { color: #fff; font-size: .78rem; margin-bottom: .65rem; font-family: var(--font-h); }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: .35rem; }
.footer-col ul a { font-size: .78rem; transition: var(--ease); }
.footer-col ul a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.07); padding-top: 1.25rem; display: flex; justify-content: space-between; font-size: .74rem; }

/* ══════════════════════════════════════
   ADMIN
   ══════════════════════════════════════ */
.admin-layout { display: grid; grid-template-columns: 215px 1fr; }
.admin-sidebar { background: var(--ink); padding: 1.25rem .9rem; display: flex; flex-direction: column; gap: 4px; }
.admin-logo { color: #fff; font-family: var(--font-h); font-size: .78rem; font-weight: 700; padding: 0 8px .9rem; border-bottom: 1px solid rgba(255,255,255,.1); margin-bottom: .5rem; }
.admin-nav { display: flex; flex-direction: column; gap: 3px; }
.admin-nav-btn { background: transparent; border: none; color: rgba(255,255,255,.5); text-align: left; padding: 9px 11px; border-radius: 9px; cursor: pointer; font-size: .82rem; font-family: var(--font-b); font-weight: 500; transition: var(--ease); }
.admin-nav-btn:hover  { background: rgba(255,255,255,.07); color: #fff; }
.admin-nav-btn.active { background: var(--coral); color: #fff; }
.admin-main { padding: 1.75rem 2rem; background: var(--sand); overflow-y: auto; }
.admin-section { max-width: 960px; }
.admin-section-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1.25rem; gap: 1rem; }
.admin-section-header h2 { font-size: 1.1rem; }
.admin-subsection { margin-top: 2rem; }
.admin-subsection h3 { font-size: .88rem; margin-bottom: 1rem; }

/* Builder type cards */
.builder-type-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; }
.builder-type-card { background: var(--white); border-radius: var(--radius); padding: 1.25rem; border: 2px solid var(--border); cursor: pointer; transition: var(--ease); text-align: center; }
.builder-type-card:hover { border-color: var(--coral); transform: translateY(-2px); box-shadow: var(--shadow); }
.btc-icon { font-size: 2.25rem; margin-bottom: .6rem; }
.builder-type-card h3 { font-size: .82rem; margin-bottom: .4rem; }
.builder-type-card p { font-size: .75rem; color: var(--muted); line-height: 1.5; margin-bottom: .75rem; }
.btc-cta { font-family: var(--font-h); font-size: .68rem; color: var(--coral); font-weight: 700; }

/* Admin guide cards */
.admin-guides-list { display: flex; flex-direction: column; gap: .65rem; }
.admin-guide-card { background: var(--white); border-radius: 13px; padding: .9rem 1.1rem; display: flex; align-items: center; justify-content: space-between; gap: .9rem; box-shadow: var(--shadow); border: 1.5px solid var(--border); }
.agc-left { display: flex; align-items: center; gap: .9rem; }
.agc-icon { font-size: 1.6rem; }
.agc-title { font-weight: 600; font-size: .85rem; }
.agc-meta  { font-size: .72rem; color: var(--muted); margin-top: 2px; }
.agc-right { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }
.publish-toggle { display: flex; align-items: center; gap: 5px; cursor: pointer; font-size: .75rem; white-space: nowrap; }
.publish-toggle input { width: auto; }
.type-badge { display: inline-block; padding: 2px 6px; border-radius: 5px; font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.type-badge.type-simple        { background: #E3F2FD; color: #1565C0; }
.type-badge.type-guide_doc     { background: #E8F5E9; color: #2E7D32; }
.type-badge.type-guide_quiz_doc{ background: #FFF3E0; color: #E65100; }

/* Step / Quiz editors */
.step-editor { border: 1.5px solid var(--border); border-radius: 11px; padding: .9rem; margin-bottom: .65rem; background: var(--sand); }
.step-editor-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .65rem; }
.step-num-badge { background: var(--coral); color: #fff; border-radius: 50%; width: 24px; height: 24px; min-width: 24px; display: flex; align-items: center; justify-content: center; font-size: .68rem; font-weight: 700; flex-shrink: 0; }
.step-content-input { width: 100%; border: 1.5px solid var(--border); border-radius: 8px; padding: 7px 10px; font-family: var(--font-b); font-size: .82rem; background: var(--white); resize: vertical; }
.quiz-editor { border: 1.5px solid var(--border); border-radius: 11px; padding: .9rem; margin-bottom: .65rem; background: #f9f7ff; }
.quiz-editor-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .65rem; }
.quiz-opts-editor { margin-top: .5rem; }
.quiz-opt-row { display: flex; align-items: center; gap: .4rem; margin-bottom: .4rem; }

/* Users table */
.admin-table-wrap { overflow-x: auto; border-radius: 13px; box-shadow: var(--shadow); }
.admin-table { width: 100%; border-collapse: collapse; background: var(--white); }
.admin-table th { background: var(--sand); padding: 9px 13px; text-align: left; font-size: .72rem; color: var(--muted); font-weight: 700; font-family: var(--font-h); }
.admin-table td { padding: 9px 13px; border-top: 1px solid var(--border); font-size: .82rem; }
.badge { display: inline-block; padding: 2px 7px; border-radius: 5px; font-size: .68rem; font-weight: 700; }
.badge-green { background: #E8F5E9; color: #2E7D32; }
.badge-red   { background: #FFEBEE; color: #B71C1C; }

/* Stats */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(145px,1fr)); gap: .9rem; }
.stat-card { background: var(--white); border-radius: var(--radius); padding: 1.25rem; text-align: center; box-shadow: var(--shadow); }
.stat-num  { font-family: var(--font-h); font-size: 1.9rem; font-weight: 900; color: var(--coral); }
.stat-label { font-size: .72rem; color: var(--muted); margin-top: 3px; }
.admin-card { background: var(--white); border-radius: var(--radius); padding: 1.25rem; box-shadow: var(--shadow); }
.admin-card h3 { margin-bottom: .9rem; font-size: .88rem; }
.top-guide-row { display: flex; align-items: center; gap: .65rem; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: .82rem; }
.top-num { font-weight: 900; color: var(--coral); width: 18px; font-family: var(--font-h); font-size: .78rem; }
.top-views { margin-left: auto; font-size: .72rem; color: var(--muted); }
.email-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.email-panels .admin-card { display: flex; flex-direction: column; gap: .75rem; }
.email-panels .btn-full { margin-top: auto; }

/* ── Responsive ── */
@media (max-width: 900px) {
  .admin-layout { grid-template-columns: 1fr; }
  .admin-sidebar { flex-direction: row; flex-wrap: wrap; padding: .65rem; }
  .admin-logo { display: none; }
  .admin-nav { flex-direction: row; flex-wrap: wrap; }
  .admin-nav-btn { padding: 6px 10px; border-radius: 18px; font-size: .75rem; }
  .admin-main { padding: 1rem; }
  .builder-type-cards { grid-template-columns: 1fr; }
  .email-panels { grid-template-columns: 1fr; }
  .form-grid-2 { grid-template-columns: 1fr; }
/* ══ Footer compact mobile ≤900px ════════════════════════════════════ */
@media (max-width: 900px) {
  /* Сетка: 2 колонки. Бренд — на всю ширину, Сервис|Юридическое рядом. */
  .footer         { padding: 1.5rem 1rem 1rem; margin-top: 1.75rem; }
  .footer-grid    { grid-template-columns: 1fr 1fr; gap: .9rem 1.5rem;
                    margin-bottom: .9rem; }
  .footer-grid .footer-col:first-child { grid-column: 1 / -1; margin-bottom: .15rem; }
  .footer-logo    { font-size: .82rem; margin-bottom: .45rem; }
  .footer-col p   { font-size: .74rem; line-height: 1.45; }
  .footer-col h4  { font-size: .74rem; margin-bottom: .4rem; }
  .footer-col ul  { gap: .25rem; }
  .footer-col ul a{ font-size: .72rem; }
  .footer-bottom  { padding-top: .7rem; font-size: .7rem; }
}
  .quiz-form { grid-template-columns: 1fr; }
  .modal-wide { max-width: 100%; }
}
@media (max-width: 600px) {
  .hero-search { flex-direction: column; }
  .category-grid { grid-template-columns: 1fr 1fr; }
  .guides-grid { grid-template-columns: 1fr; }
  .page-header { flex-direction: column; align-items: flex-start; }
}

/* ══════════════════════════════════════
   HERO VIDEO / GIF
   ══════════════════════════════════════ */
.hero-media { position: relative; overflow: hidden; min-height: 420px; padding: 5rem 1.5rem 4rem; }
.hero-media .hero-content { position: relative; z-index: 2; }
.hero-media-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero-overlay { position: absolute; inset: 0; z-index: 1; }

/* Guide icon image */
.guide-icon-img    { width: 40px; height: 40px; object-fit: cover; border-radius: 10px; }
.guide-icon-img-xl { width: 80px; height: 80px; object-fit: cover; border-radius: 16px; display: block; margin-bottom: .75rem; }
.guide-icon-xl     { font-size: 3.5rem; display: block; margin-bottom: .75rem; }

/* ══════════════════════════════════════
   ASSETS GRID
   ══════════════════════════════════════ */
.assets-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; }
.asset-card  { background: var(--white); border-radius: 12px; border: 1.5px solid var(--border); overflow: hidden; transition: var(--ease); }
.asset-card:hover { box-shadow: var(--shadow); }
.asset-preview { height: 110px; background: var(--sand); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.asset-thumb       { width: 100%; height: 100%; object-fit: cover; }
.asset-thumb-video { width: 100%; height: 100%; object-fit: cover; }
.asset-info    { padding: 8px 10px 4px; }
.asset-name    { font-size: .76rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asset-meta    { font-size: .68rem; color: var(--muted); margin-top: 2px; }
.asset-actions { padding: 4px 8px 8px; display: flex; gap: 4px; }
.asset-actions .btn-sm { flex: 1; text-align: center; font-size: .7rem; padding: 4px 6px; }

/* ══════════════════════════════════════
   SETTINGS PAGE
   ══════════════════════════════════════ */
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.settings-card { background: var(--white); border-radius: var(--radius); padding: 1.25rem; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: .75rem; }
.settings-card h3 { font-size: .88rem; margin-bottom: .25rem; }
.hero-preview-wrap { margin-top: .75rem; }
.hero-preview { height: 80px; border-radius: 10px; background: var(--ink); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.4); font-size: .78rem; overflow: hidden; position: relative; }

@media (max-width: 768px) {
  .settings-grid { grid-template-columns: 1fr; }
  .settings-card[style*="span 2"] { grid-column: span 1; }
  .assets-grid { grid-template-columns: repeat(auto-fill, minmax(130px,1fr)); }
}

/* ══════════════════════════════════════════════
   HERO MEDIA FIX v6
   (overrides previous rules with full-cover fix)
   ══════════════════════════════════════════════ */
.hero.hero-media {
  position: relative !important;
  min-height: 520px;
  display: flex !important;
  flex-direction: column;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: var(--ink);
}
/* Видео / изображение — абсолютно позиционированы, покрывают всю секцию */
.hero.hero-media .hero-media-bg {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  z-index: 0 !important;
}
/* Затемняющий оверлей */
.hero.hero-media .hero-overlay {
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  right: 0 !important; bottom: 0 !important;
  z-index: 1 !important;
  pointer-events: none;
}
/* Контент поверх медиа — по центру */
.hero.hero-media .hero-content {
  position: relative !important;
  z-index: 2 !important;
  padding: 5rem 1.5rem !important;
  width: 100%;
  max-width: 700px;
  text-align: center;
}
/* Тексты читаемы на любом фоне */
.hero.hero-media h1 { color: #fff !important; text-shadow: 0 2px 8px rgba(0,0,0,.4); }
.hero.hero-media p  { color: rgba(255,255,255,.75) !important; }

/* ══════════════════════════════════════════════
   ICONS TABLE (Кастомизация)
   ══════════════════════════════════════════════ */
.icons-table { width: 100%; border-collapse: collapse; }
.icons-table th {
  background: var(--sand); padding: 8px 12px; text-align: left;
  font-size: .72rem; color: var(--muted); font-weight: 700;
  font-family: var(--font-h);
}
.icons-table td { padding: 10px 12px; border-top: 1px solid var(--border); vertical-align: middle; }
.icon-cell { width: 56px; text-align: center; }
.icon-preview-img   { width: 40px; height: 40px; object-fit: contain; border-radius: 8px; border: 1px solid var(--border); }
.icon-preview-emoji { font-size: 1.75rem; line-height: 1; }
.icon-label  { font-size: .85rem; font-weight: 600; }
.icon-hint   { font-size: .72rem; color: var(--muted); margin-top: 2px; }
.icon-set    { font-size: .75rem; color: var(--sage); font-weight: 700; }
.icon-default { font-size: .75rem; color: var(--muted); }
.icon-upload-btn { display: inline-flex; align-items: center; gap: 4px; }
.icons-table tr:hover td { background: var(--sand); }

/* ── Logo image in header — 2× размер, выровнен по центру с текстом ── */
.logo-img { width: 56px; height: 56px; object-fit: contain; border-radius: 8px; display: block; }

/* ── Category icon image ── */
.cat-icon-img { width: 36px; height: 36px; object-fit: contain; }

/* ── Icon sizes ── */
.icon-sm { width: 20px; height: 20px; object-fit: contain; vertical-align: middle; }

/* ══════════════════════════════════════════════════════
   CATALOG v7 — Production Quality
   ══════════════════════════════════════════════════════ */

/* ── Page layout ── */
.catalog-page { min-height: 80vh; }

/* ── Header ── */
.catalog-header { background: var(--ink); padding: 3rem 0 2.5rem; }
.catalog-header-inner { max-width: 900px; margin: 0 auto; padding: 0 1.5rem; text-align: center; }
.catalog-title    { color: #fff; font-size: clamp(1.6rem,4vw,2.4rem); margin-bottom: .5rem; }
.catalog-subtitle { color: rgba(255,255,255,.45); font-size: 1rem; margin-bottom: 2rem; }

.search-icon {
  position: absolute; left: 16px;
  width: 18px; height: 18px;
  color: rgba(255,255,255,.4);
  pointer-events: none;
}
.search-clear {
  background: rgba(255,255,255,.15); border: none; color: rgba(255,255,255,.6);
  width: 28px; height: 28px; border-radius: 50%; cursor: pointer;
  margin-right: 10px; font-size: .8rem; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: var(--ease);
}
.search-clear:hover { background: rgba(255,255,255,.25); color: #fff; }

/* ── Body & Filters ── */
.catalog-body { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem 4rem; }
.catalog-filters {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1.25rem 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

/* Category tabs */
.cat-tabs { display: flex; gap: .4rem; flex-wrap: wrap; }
.cat-tab {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 14px; border-radius: 50px;
  border: 1.5px solid var(--border); background: var(--white);
  cursor: pointer; font-size: .8rem; font-weight: 500;
  font-family: var(--font-b); color: var(--muted);
  transition: var(--ease); white-space: nowrap;
}
.cat-tab:hover { border-color: var(--coral); color: var(--coral); }
.cat-tab.active {
  background: var(--ink); border-color: var(--ink);
  color: #fff; font-weight: 600;
}
.cat-tab-icon { width: 16px; height: 16px; object-fit: contain; }

/* Type filter */
.type-filter-wrap { flex-shrink: 0; }
.type-filter {
  padding: 7px 14px; border-radius: 50px;
  border: 1.5px solid var(--border); background: var(--white);
  font-size: .8rem; color: var(--ink); cursor: pointer;
  appearance: none; padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B6661' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  width: auto;
}

/* ── Guide Cards v2 ── */
.guides-grid-v2 {
  display: grid;
  /* 240px: при 537px эффективной ширины (scale=0.8) → 2 колонки гидов */
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.25rem;
}

.guide-card-v2 {
  background: var(--white);
  border-radius: 20px;
  border: 1.5px solid var(--border);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  cursor: pointer; text-decoration: none; color: inherit;
  position: relative;
}
.guide-card-v2:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,.1);
  border-color: rgba(232,104,90,.3);
}
.guide-card-featured {
  border-color: var(--amber);
  background: linear-gradient(135deg, var(--white) 0%, #FFFBF0 100%);
}
.guide-card-featured:hover { border-color: var(--amber); }

/* Card top */
.guide-card-v2-top {
  padding: 1.25rem 1.25rem .75rem;
  display: flex; align-items: flex-start; justify-content: space-between;
  position: relative;
}
.guide-featured-badge {
  position: absolute; top: 12px; right: 12px;
  background: var(--amber); color: var(--ink);
  font-size: .62rem; font-weight: 700; padding: 3px 8px;
  border-radius: 50px; font-family: var(--font-h);
  text-transform: uppercase; letter-spacing: .04em;
}
.guide-card-icon-wrap { margin-bottom: 0; }
.guide-card-icon-emoji { font-size: 2.25rem; line-height: 1; display: block; }
.guide-card-icon-img { width: 48px; height: 48px; object-fit: contain; border-radius: 10px; }

/* Type pills */
.guide-type-pill {
  display: inline-block; padding: 4px 10px; border-radius: 50px;
  font-size: .68rem; font-weight: 700;
  font-family: var(--font-h); text-transform: uppercase; letter-spacing: .04em;
  flex-shrink: 0; margin-top: 4px;
}
.badge-quiz   { background: #FEF3D8; color: #92600A; }
.badge-doc    { background: #E8F5E9; color: #2E7D32; }
.badge-simple { background: #E3F2FD; color: #1565C0; }

/* Card body */
.guide-card-v2-body { padding: 0 1.25rem .75rem; flex: 1; }
.guide-card-v2-title {
  font-size: .95rem; font-weight: 700; line-height: 1.35;
  margin-bottom: .5rem; color: var(--ink);
}
.guide-card-v2-desc { font-size: .8rem; color: var(--muted); line-height: 1.55; }

/* Card footer */
.guide-card-v2-footer {
  padding: .75rem 1.25rem;
  border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.guide-card-meta { display: flex; gap: .75rem; }
.meta-item { font-size: .72rem; color: var(--muted); }
.guide-card-cta { font-size: .75rem; font-weight: 700; color: var(--coral); font-family: var(--font-h); }
.guide-card-v2:hover .guide-card-cta { color: var(--coral-d); }

/* ── Skeleton ── */
@keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
.skeleton-card { pointer-events: none; }
.sk-icon, .sk-line, .sk-footer {
  background: linear-gradient(90deg, #f0ede8 25%, #e8e5e0 50%, #f0ede8 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: 8px;
}
.sk-icon   { width: 48px; height: 48px; border-radius: 10px; margin-bottom: 1rem; }
.sk-line   { height: 14px; margin-bottom: 8px; }
.sk-title  { width: 75%; height: 16px; }
.sk-desc   { width: 100%; }
.sk-desc.short { width: 55%; }
.sk-footer { width: 40%; height: 12px; margin-top: .75rem; }
.skeleton-card .guide-card-v2-top { padding-bottom: 1.25rem; }
.skeleton-card .guide-card-v2-body { padding-bottom: 1.25rem; }

/* ── Empty / Error states ── */
.catalog-empty, .catalog-error {
  grid-column: 1/-1;
  text-align: center; padding: 5rem 2rem;
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
}
.catalog-empty-icon, .catalog-error-icon { font-size: 3rem; }
.catalog-empty h3, .catalog-error h3 { font-size: 1.1rem; }
.catalog-empty p, .catalog-error p { color: var(--muted); font-size: .9rem; }

/* ── Responsive ── */
@media (max-width: 768px) {
  .catalog-filters { flex-direction: column; align-items: flex-start; }
  .cat-tabs { gap: .3rem; }
  .cat-tab  { font-size: .74rem; padding: 5px 10px; }
  .guides-grid-v2 { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════
   КАСТОМИЗИРУЕМЫЕ CSS-ПЕРЕМЕННЫЕ
   (переопределяются из Кастомизации → сохраняются в настройках)
   ══════════════════════════════════════════════════════ */
:root {
  --card-border-color:  #E5E2DE;
  --card-border-hover:  rgba(232,104,90,0.35);
  --card-radius:        20px;
  --shadow-on:          1;
}

/* ── Guide Card v2 — border with CSS vars ──────────────── */
.guide-card-v2 {
  background:    var(--white);
  border-radius: var(--card-radius);
  border:        2px solid var(--card-border-color);
  overflow:      hidden;
  display:       flex;
  flex-direction: column;
  transition:    transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  cursor:        pointer;
  text-decoration: none;
  color:         inherit;
}
.guide-card-v2:hover {
  transform:     translateY(-4px);
  box-shadow:    calc(var(--shadow-on) * 0px) calc(var(--shadow-on) * 12px) calc(var(--shadow-on) * 40px) rgba(0,0,0,.1);
  border-color:  var(--card-border-hover);
}
.guide-card-featured {
  border-color:  var(--amber);
  background:    linear-gradient(135deg, var(--white) 0%, #FFFBF0 100%);
}

/* ── Settings layout ───────────────────────────────────── */
.settings-sections {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
.settings-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: .7rem;
}
.settings-card[style*="span 2"] { grid-column: span 2; }

/* ── Color picker row ──────────────────────────────────── */
.color-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .4rem 0;
  border-bottom: 1px solid var(--border);
}
.color-label   { flex: 1; font-size: .82rem; color: var(--muted); }
.color-swatch-wrap { display: flex; align-items: center; gap: .4rem; }
.color-swatch  { width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--border); cursor: pointer; padding: 2px; }
.color-text    { width: 90px; font-size: .78rem; font-family: monospace; padding: 5px 8px; border-radius: 8px; border: 1px solid var(--border); }
.color-range   { flex: 1; max-width: 150px; }
.color-val     { font-size: .75rem; color: var(--muted); min-width: 28px; text-align: right; }

/* ── Icons table ───────────────────────────────────────── */
.icons-table { width: 100%; border-collapse: collapse; }
.icons-table th { background: var(--sand); padding: 7px 10px; text-align: left; font-size: .72rem; color: var(--muted); font-weight: 700; }
.icons-table td { padding: 9px 10px; border-top: 1px solid var(--border); vertical-align: middle; }
.icon-cell { width: 52px; text-align: center; }
.icon-preview-img   { width: 36px; height: 36px; object-fit: contain; border-radius: 7px; border: 1px solid var(--border); }
.icon-preview-emoji { font-size: 1.6rem; }
.icon-label  { font-size: .82rem; font-weight: 600; }
.icon-set    { color: var(--sage); font-size: .72rem; font-weight: 700; }
.icon-default{ color: var(--muted); font-size: .72rem; }

/* ── Assets grid ───────────────────────────────────────── */
.assets-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: .9rem; }
.asset-card  { background: var(--white); border-radius: 12px; border: 1.5px solid var(--border); overflow: hidden; }
.asset-preview { height: 100px; background: var(--sand); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.asset-thumb { width: 100%; height: 100%; object-fit: cover; }
.asset-info  { padding: 7px 9px 3px; }
.asset-name  { font-size: .72rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asset-meta  { font-size: .65rem; color: var(--muted); }
.asset-actions { padding: 4px 7px 7px; display: flex; gap: 3px; }
.asset-actions .btn-sm { flex: 1; text-align: center; font-size: .68rem; padding: 4px; }

@media (max-width: 900px) {
  .settings-sections { grid-template-columns: 1fr; }
  .settings-card[style*="span 2"] { grid-column: span 1; }
  .assets-grid { grid-template-columns: repeat(auto-fill, minmax(120px,1fr)); }
}

/* ══════════════════════════════════════════════════════
   CALENDAR v2 — grid + analog clock + events
   ══════════════════════════════════════════════════════ */

.calendar-page-v2 { max-width: 1100px; margin: 0 auto; padding: 1.5rem; }

/* Top bar */
.cal-top-bar {
  display: flex; align-items: center; gap: 1.5rem;
  background: var(--white); border-radius: var(--radius);
  padding: 1.25rem 1.5rem; margin-bottom: 1.5rem;
  box-shadow: var(--shadow); border: 1.5px solid var(--border);
}
.cal-top-info { flex: 1; }
.cal-top-info h1 { font-size: 1.3rem; margin-bottom: .2rem; }

/* Analog clock */
.analog-clock-wrap { text-align: center; flex-shrink: 0; }
.analog-clock {
  display: block; border-radius: 50%;
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  background: var(--sand);
}
.clock-date-label {
  font-size: .72rem; color: var(--muted);
  margin-top: .4rem; text-transform: capitalize;
}

/* Layout */
.cal-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 1.25rem;
  align-items: start;
}

/* Grid wrapper */
.cal-grid-wrap {
  background: var(--white); border-radius: var(--radius);
  padding: 1.25rem; box-shadow: var(--shadow);
  border: 1.5px solid var(--border);
}
.cal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.cal-month-label { font-family: var(--font-h); font-size: .95rem; font-weight: 700; text-transform: capitalize; }
.cal-legend { display: flex; gap: .75rem; font-size: .72rem; }
.leg { display: flex; align-items: center; gap: 4px; color: var(--muted); }
.leg-holiday { color: #C62828; }
.leg-event   { color: var(--coral); }

/* Week headers */
.cal-week-headers {
  display: grid; grid-template-columns: repeat(7,1fr);
  margin-bottom: .4rem;
}
.cal-wh {
  text-align: center; font-size: .72rem; font-weight: 700;
  color: var(--muted); padding: .3rem 0;
  font-family: var(--font-h);
}
.cal-wh-we { color: #C62828; }

/* Day cells */
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}
.cal-day {
  min-height: 68px; border-radius: 10px;
  padding: 4px 5px; position: relative;
  border: 1.5px solid transparent;
  transition: var(--ease); cursor: default;
  background: var(--white);
}
.cal-day:hover { background: var(--sand); border-color: var(--border); }
.cal-day-empty { background: transparent; border: none; }

.cal-day-num {
  font-size: .78rem; font-weight: 600; color: var(--ink);
  display: block; margin-bottom: 2px;
}
.cal-today {
  background: var(--coral-l) !important;
  border-color: var(--coral) !important;
}
.cal-today .cal-day-num { color: var(--coral); font-weight: 900; }
.cal-holiday  { background: #FFEBEE; }
.cal-holiday  .cal-day-num { color: #C62828; }
.cal-weekend  .cal-day-num { color: #C62828; }
.cal-has-events { border-color: rgba(232,104,90,.3); }

.cal-holiday-dot {
  position: absolute; top: 4px; right: 5px;
  width: 6px; height: 6px; border-radius: 50%;
  background: #C62828; display: block;
}
.cal-event-chip {
  font-size: .6rem; border-radius: 4px; padding: 1px 4px;
  margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}
.chip-active { background: var(--coral-l); color: var(--coral-d); }
.chip-done   { background: var(--sage-l);  color: var(--sage);   opacity: .7; }
.cal-more    { font-size: .58rem; color: var(--muted); margin-top: 1px; }

/* Sidebar events */
.cal-sidebar {
  background: var(--white); border-radius: var(--radius);
  padding: 1.25rem; box-shadow: var(--shadow);
  border: 1.5px solid var(--border);
  position: sticky;
  top: calc(var(--header-h) + 1rem); /* было захардкожено: 80px */
}
.ev-item {
  display: flex; align-items: center; gap: .75rem;
  padding: .75rem; border-radius: 10px; margin-bottom: .5rem;
  border-left: 3px solid var(--border);
  background: var(--sand); transition: var(--ease);
}
.ev-item:hover { background: var(--sand); }
.ev-overdue { border-left-color: #C62828; background: #FFEBEE; }
.ev-today   { border-left-color: var(--amber); background: var(--amber-l); }
.ev-soon    { border-left-color: var(--coral); background: var(--coral-l); }
.ev-future  { border-left-color: var(--blue); }
.ev-item-date { text-align: center; min-width: 36px; flex-shrink: 0; }
.ev-day-num   { font-family: var(--font-h); font-size: 1.2rem; font-weight: 900; line-height: 1; }
.ev-mon-name  { font-size: .62rem; color: var(--muted); text-transform: uppercase; }
.ev-item-info { flex: 1; min-width: 0; }
.ev-item-title { font-size: .82rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-item-meta  { font-size: .72rem; color: var(--muted); margin-top: 1px; }
.ev-check-btn {
  background: rgba(255,255,255,.8); border: 1.5px solid var(--border);
  border-radius: 50%; width: 30px; height: 30px; cursor: pointer;
  font-size: .82rem; flex-shrink: 0; transition: var(--ease);
}
.ev-check-btn:hover { background: var(--sage-l); border-color: var(--sage); }

/* ══════════════════════════════════════════════════════
   ADMIN GUIDE ROW — restore boxed look
   ══════════════════════════════════════════════════════ */
.admin-guides-list { display: flex; flex-direction: column; gap: .5rem; }
.admin-guide-row {
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
  background: #fff !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 14px !important;
  padding: .9rem 1.1rem !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.05) !important;
  transition: box-shadow .2s ease !important;
}
.admin-guide-row:hover { box-shadow: 0 4px 16px rgba(0,0,0,.1) !important; }
.agr-icon { font-size: 1.6rem; flex-shrink: 0; width: 40px; text-align: center; }
.agr-icon-img { width: 36px; height: 36px; object-fit: contain; border-radius: 8px; }
.agr-body { flex: 1; min-width: 0; }
.agr-title { font-weight: 600; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agr-meta  { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 3px; font-size: .72rem; color: var(--muted); align-items: center; }
.agr-actions { display: flex; align-items: center; gap: .4rem; flex-shrink: 0; flex-wrap: wrap; }

@media (max-width: 900px) {
  .cal-layout { grid-template-columns: 1fr; }
  .calendar-page-v2 { padding: .75rem; }
  .cal-top-bar { flex-direction: column; gap: .75rem; padding: 1rem; }
  .analog-clock-wrap { display: block; }
  .analog-clock { width: 80px !important; height: 80px !important; }
  .cal-day { min-height: 44px; border-radius: 7px; font-size: .75rem; }
  .cal-event-dot { width: 4px; height: 4px; }
  .cal-events-list { padding: .75rem; }
  .ev-item { padding: .6rem .75rem; }
  .cal-day { min-height: 52px; }
  .cal-sidebar { position: static; }
  .cal-top-bar { flex-wrap: wrap; }
}

/* ── Мобильный календарь (≤600px): чипы скрываем, точки оставляем ── */
@media (max-width: 600px) {
  /* На 390px 7 колонок = ~52px/ячейка — чипы с текстом не вмещаются */
  .cal-event-chip { display: none; }
  .cal-more       { display: none; }

  /* Компактные ячейки */
  .cal-day {
    min-height: 44px;
    padding: 3px 3px;
  }
  .cal-day-num { font-size: .7rem; }
  .cal-grid    { gap: 2px; }

  /* Дни с событиями получают цветную точку снизу вместо чипа */
  .cal-has-events::after {
    content: '';
    position: absolute;
    bottom: 3px; left: 50%;
    transform: translateX(-50%);
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--coral);
    display: block;
  }

  /* Заголовки недели — короче */
  .cal-wh { font-size: .62rem; padding: .2rem 0; }

  /* Навигация месяца — компактнее */
  .cal-nav { margin-bottom: .6rem; }
  .cal-month-label { font-size: .82rem; }
  .cal-legend { gap: .4rem; font-size: .65rem; flex-wrap: wrap; }
}

/* ══════════════════════════════════════════════════════
   PRODUCTION FIXES
   ══════════════════════════════════════════════════════ */

/* Featured star next to guide icon */
.guide-card-icon-wrap { position: relative; display: inline-flex; align-items: flex-start; }
.guide-star { font-size: .9rem; line-height: 1; margin-left: 2px; }

/* Icon picker modal */
.icon-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px,1fr)); gap: .75rem; max-height: 400px; overflow-y: auto; padding: .5rem; }
.icon-picker-item { border: 2px solid var(--border); border-radius: 10px; padding: .5rem; cursor: pointer; text-align: center; transition: var(--ease); }
.icon-picker-item:hover { border-color: var(--coral); background: var(--coral-l); }
.icon-picker-thumb { width: 52px; height: 52px; object-fit: contain; border-radius: 6px; display: block; margin: 0 auto .3rem; }
.icon-picker-name { font-size: .65rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Visibility toggles */
.vis-row { display: flex; align-items: center; justify-content: space-between; padding: .5rem 0; border-bottom: 1px solid var(--border); }
.vis-label { font-size: .85rem; }
.toggle-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider { position: absolute; cursor: pointer; inset: 0; background: #ccc; border-radius: 24px; transition: .3s; }
.toggle-slider:before { content:''; position: absolute; height: 18px; width: 18px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: .3s; }
.toggle-switch input:checked + .toggle-slider { background: var(--coral); }
.toggle-switch input:checked + .toggle-slider:before { transform: translateX(20px); }

/* PDF field editor */
#pdfFieldsList input { font-size: .78rem; padding: 6px 8px; }
code { background: var(--sand); padding: 1px 5px; border-radius: 4px; font-size: .82rem; }
/* PDF preview in constructor */
.pdf-preview-frame { width:100%; height:400px; border:1.5px solid var(--border); border-radius:10px; }
.pdf-preview-placeholder { background:var(--sand); border:1.5px solid var(--border); border-radius:10px; padding:2rem; text-align:center; color:var(--muted); font-size:.85rem; }

/* ══ PDF editor in constructor ══════════════════════════════════════════════ */
.pdf-editor-instruction {
  background: var(--blue-l); border-left: 3px solid var(--blue);
  border-radius: 10px; padding: .75rem 1rem;
  font-size: .8rem; line-height: 1.6; color: var(--ink);
  margin-bottom: .75rem;
}
.pdf-editor-instruction em { color: var(--muted); font-size: .76rem; }
.doc-upload-info {
  display: flex; align-items: center; gap: .75rem;
  background: var(--sand); border-radius: 9px; padding: .6rem .9rem;
  margin-bottom: .75rem; font-size: .85rem; font-weight: 600;
}
.doc-upload-info span { flex: 1; }

/* ══ Improved guide card — no overlapping badge ═══════════════════════════ */
.guide-card-v2-top {
  padding: 1.1rem 1.1rem .65rem;
  display: flex; align-items: flex-start;
  justify-content: space-between;
}
.guide-card-icon-wrap { display: flex; align-items: flex-start; gap: 4px; }
.guide-star { font-size: 1rem; margin-top: -2px; }

/* ══ Layout: footer at bottom, full-height sidebars ═══════════════════════ */

/* Ensure body fills full viewport height */
html, body { height: 100%; }
body { display: flex; flex-direction: column; min-height: 100vh; }
#app { flex: 1 0 auto; }
.footer { flex-shrink: 0; margin-top: auto; }

/* Admin layout: sidebar reaches bottom of viewport */
.admin-layout {
  /* height (не min-height) — layout не вырастает за пределы viewport.
     body не скроллится → sticky-хедер не «отрывается» от layout-а.
     Скроллится только .admin-main через собственный scroll-context. */
  height: calc(100vh - var(--header-h));
  display: grid;
  grid-template-columns: 215px 1fr;
  overflow: hidden;
}
.admin-sidebar {
  height: 100%;
  overflow-y: auto;
}
.admin-main {
  height: 100%;
  overflow-y: auto;
}

/* Document cards — show txt download */
.doc-card { background: var(--white); border-radius: var(--radius); padding: 1.1rem 1.25rem;
  border: 1.5px solid var(--border); display: flex; align-items: center; gap: 1rem;
  margin-bottom: .65rem; }
.doc-card-icon { font-size: 1.75rem; flex-shrink: 0; }
.doc-card-info { flex: 1; min-width: 0; }
.doc-card-title { font-weight: 600; font-size: .88rem; }
.doc-card-meta { font-size: .75rem; color: var(--muted); margin-top: 2px; }
.doc-card-actions { display: flex; gap: .4rem; align-items: center; flex-shrink: 0; }

/* ══ Animated backgrounds ═══════════════════════════════════════════════════ */

/* has-anim-bg: CSS class добавляемый _applyAnimatedBg вместо inline z-index */
.has-anim-bg > *:not(.anim-bg-el) {
  position: relative;
  z-index: 2;
}

/* ══ Animated-bg: все псевдоэлементы УДАЛЕНЫ — фон управляется только через JS (.anim-bg-el) ══
   ::before / ::after на .header / .footer создавали второй слой поверх JS-видео → наслоение.
   Единственный источник правды — _applyAnimatedBg() в init.js.                              */

/* Legacy классы — оставлены для совместимости, но не несут фона */
.site-header { position: relative; overflow: hidden; z-index: 100; }
.site-header > * { position: relative; z-index: 2; }

/* Catalog header animated bg — рендерится в _buildCatalogHeader через .hero-media-bg */
.catalog-header-inner { position: relative; z-index: 2; }

/* For video backgrounds (GIF works via ::before, video needs different approach) */
.header-video-bg, .footer-video-bg, .catalog-video-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
  opacity: .35;
  pointer-events: none;
}

/* Animated bg preview in admin */
.anim-bg-row { padding: .75rem 0; border-bottom: 1px solid var(--border); }
.anim-bg-label { font-size: .82rem; font-weight: 600; display: block; margin-bottom: .4rem; }
.anim-bg-controls { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.anim-bg-input { flex: 1; min-width: 200px; font-size: .8rem; }
.anim-bg-preview { margin-top: .5rem; }
.anim-bg-thumb { width: 160px; height: 60px; object-fit: cover; border-radius: 8px; border: 1.5px solid var(--border); }


/* ══ Categories grid v2 — 3 columns, production quality ══════════════════ */
.categories-section { background: var(--white); }
.section-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.25rem;
}
.view-all-link {
  font-size: .82rem; color: var(--coral); font-weight: 700;
  font-family: var(--font-h); text-decoration: none;
}
.view-all-link:hover { opacity: .8; }

.categories-grid-v2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.category-card-v2 {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--sand);
  border: 1.5px solid var(--card-border-color, #E5E2DE);
  border-radius: 16px;
  padding: 1.1rem 1.25rem;
  text-decoration: none;
  color: var(--ink);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  cursor: pointer;
}
.category-card-v2:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(0,0,0,.09);
  border-color: var(--coral);
  background: var(--white);
}
.category-card-icon {
  font-size: 2rem; line-height: 1; flex-shrink: 0;
  width: 52px; height: 52px;
  background: var(--white);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.07);
}
.cat-icon-img-main { width: 32px; height: 32px; object-fit: contain; }
.category-card-info { flex: 1; min-width: 0; }
.category-card-info h3 { font-size: .88rem; font-weight: 700; margin-bottom: 2px; }
.category-card-info p  { font-size: .74rem; color: var(--muted); line-height: 1.4; }
.category-card-arrow { color: var(--muted); font-size: .85rem; flex-shrink: 0; transition: .18s; }
.category-card-v2:hover .category-card-arrow { color: var(--coral); transform: translateX(3px); }

@media (max-width: 900px) {
  .categories-grid-v2 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .categories-grid-v2 { grid-template-columns: 1fr; }
}

/* ══ Admin categories editor ══════════════════════════════════════════════ */
.cats-admin-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr));
  gap: .75rem; margin-top: 1rem;
}
.cat-admin-card {
  background: var(--white); border-radius: 12px; border: 1.5px solid var(--border);
  padding: .9rem 1rem; display: flex; align-items: center; gap: .75rem;
}
.cat-admin-drag { cursor: grab; color: var(--muted); font-size: 1.1rem; }
.cat-admin-icon { font-size: 1.5rem; min-width: 2rem; text-align: center; }
.cat-admin-info { flex: 1; min-width: 0; }
.cat-admin-title { font-size: .85rem; font-weight: 600; }
.cat-admin-slug  { font-size: .7rem; color: var(--muted); }
.cat-admin-actions { display: flex; gap: .3rem; }

/* ══ Main page — Big category cards ════════════════════════════════════════ */
.cats-main-title {
  font-size: clamp(1.4rem, 3vw, 2rem);
  text-align: center; margin-bottom: .5rem;
}
.cats-main-sub {
  text-align: center; color: var(--muted); font-size: .95rem;
  margin-bottom: 2.5rem;
}
.categories-grid-main {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.cat-main-card {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; text-decoration: none; color: var(--ink);
  background: var(--white);
  border: 2px solid var(--card-border-color, #E5E2DE);
  border-radius: 20px;
  padding: 2rem 1.5rem 1.5rem;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  cursor: pointer;
}
.cat-main-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 48px rgba(0,0,0,.1);
  border-color: var(--coral);
}
.cat-main-icon-wrap {
  width: 100%; height: 80px;
  background: var(--sand); border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1rem;
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
  overflow: hidden;
}
.cat-main-icon-emoji { font-size: 2.6rem; line-height: 1; }
.cat-main-icon-img   { width: 100%; height: 80px; object-fit: cover; border-radius: 14px; }
.cat-main-title { font-size: 1rem; font-weight: 700; margin-bottom: .4rem; }
.cat-main-desc  { font-size: .8rem; color: var(--muted); line-height: 1.5; margin-bottom: 1rem; flex: 1; }
.cat-main-cta   { font-size: .78rem; font-weight: 700; color: var(--coral); font-family: var(--font-h); }
.cat-main-card:hover .cat-main-cta { opacity: .8; }

@media (max-width: 900px) { .categories-grid-main { grid-template-columns: repeat(2, 1fr); } }
/* 560px: 2-col сохраняем — карточки уже адаптированы в 768px-блоке */

/* Admin section divider */
.admin-section-divider {
  border: none; border-top: 1.5px solid var(--border); margin: 1.5rem 0;
}

/* ══ Ensure header never collapses ════════════════════════════════════════ */
.header { min-height: 62px; }

/* ══ Catalog page — bg fills entire page body ════════════════════════════ */
.catalog-page { position: relative; isolation: isolate; }

/* ══ Remove title/subtitle from main categories section ══════════════════ */
.cats-main-title, .cats-main-sub { display: none; }



/* ══ Main page — sand background everywhere, no white gaps ═══════════════ */
body { background: var(--sand); }
.categories-section { background: var(--sand) !important; }
.catalog-page { background: var(--sand); }

/* ══ Category cards — spacing from hero and footer ══════════════════════ */
.categories-section { padding: 3rem 0 3.5rem !important; }
.section.categories-section:first-of-type { padding-top: 3.5rem !important; }

/* ══ Admin categories grid ═══════════════════════════════════════════════ */
.cats-admin-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr));
  gap: .75rem;
}
.cat-admin-card {
  background: var(--white); border-radius: 12px;
  border: 1.5px solid var(--border); padding: .85rem 1rem;
  display: flex; align-items: center; gap: .75rem;
  transition: var(--ease);
}
.cat-admin-card:hover { box-shadow: var(--shadow); }
.cat-admin-icon { font-size: 1.5rem; min-width: 40px; text-align: center; flex-shrink: 0; }
.cat-admin-info { flex: 1; min-width: 0; }
.cat-admin-title { font-size: .85rem; font-weight: 600; }
.cat-admin-slug  { font-size: .7rem; color: var(--muted); }
.cat-admin-actions { display: flex; gap: .3rem; flex-shrink: 0; }






/* ═══════════════════════════════════════════════════════════
   SEARCH FIELD — единый стиль для hero и каталога
   ═══════════════════════════════════════════════════════════ */
.catalog-search-wrap {
  width: 100%; max-width: 600px; margin: 1.5rem auto 0;
}
.catalog-search {
  display: flex;
  align-items: stretch;
  height: 52px;
  border-radius: 52px;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.12);
  transition: border-color .2s, background .2s;
}
.catalog-search:focus-within {
  border-color: var(--coral);
  background: rgba(255,255,255,.18);
}
.catalog-search input {
  flex: 1;
  border: none; outline: none; box-shadow: none;
  background: transparent;
  color: #fff;
  padding: 0 18px;
  font-size: .95rem;
  min-width: 0;
  height: 100%;
}
.catalog-search input::placeholder { color: rgba(255,255,255,.38); }
.catalog-search .search-clear {
  flex-shrink: 0;
  background: transparent; border: none;
  color: rgba(255,255,255,.5); cursor: pointer;
  padding: 0 10px; font-size: .9rem;
  display: flex; align-items: center;
}
.catalog-search .search-clear:hover { color: #fff; }
.catalog-search-btn {
  flex-shrink: 0;
  background: var(--coral); color: #fff;
  border: none; cursor: pointer;
  padding: 0 26px;
  font-family: var(--font-h); font-weight: 700; font-size: .9rem;
  display: flex; align-items: center; justify-content: center;
  height: 100%;
  transition: background .2s;
  white-space: nowrap;
}
.catalog-search-btn:hover { background: #d4574a; }

/* ══ Guide detail page — bottom breathing room ══════════════════════════ */
.guide-detail-page, .guide-page { padding-bottom: 4rem; }
.guide-steps { padding-bottom: 2rem; }
.guide-step:last-child { margin-bottom: 2rem; }


/* ══ Guide detail — FORCED bottom padding away from footer ══════════════ */
.steps-list {
  padding-bottom: 3rem !important;
}
.steps-list .step-card:last-child {
  margin-bottom: 3rem !important;
}
/* Ensure the container never touches footer */
#app > .container,
#app > div > .container {
  min-height: calc(100vh - 200px);
  padding-bottom: 4rem;
}


/* ══ Admin header — stays sticky on scroll ══════════════════════════════ */
.header,
#header {
  position: sticky !important;
  top: 0 !important;
  z-index: 200 !important;
  width: 100%;
}

/* ══ Admin layout — fixed viewport height, only admin-main scrolls ══════ */
.admin-layout {
  display: grid;
  grid-template-columns: 215px 1fr;
  height: calc(100vh - var(--header-h));   /* точная высота = viewport – хедер */
  overflow: hidden;                          /* layout не вырастает, body не скроллится */
}
.admin-sidebar {
  height: 100%;
  overflow-y: auto;
  background: var(--ink);
}
.admin-main {
  height: 100%;
  overflow-y: auto;
  padding: 1.5rem;
}

/* На планшете (≤900px) и мобиле (≤768px) layout переходит в 1 колонку.
   При 1-col grid height:100% делает каждый грид-ряд высотой viewport →
   overflow:hidden обрезает .admin-main полностью. Сбрасываем: body скроллит.
   align-content:start — ряды сайзятся по контенту, не делятся 50/50 по высоте. */
@media (max-width: 900px) {
  .admin-layout  { height: auto !important; overflow: visible !important;
                   align-content: start !important; }
  .admin-sidebar { height: auto !important; overflow-y: visible !important; }
  .admin-main    { height: auto !important; overflow-y: visible !important; }
}

/* ══ Customization — clean section spacing ══════════════════════════════ */
.settings-sections {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}
.settings-card {
  background: var(--white);
  border-radius: 16px;
  padding: 1.25rem 1.4rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
  border: 1.5px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: .65rem;
}
.settings-card h3 {
  font-size: .95rem;
  font-weight: 700;
  margin: 0 0 .25rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--border);
}
.settings-card[style*="span 2"] { grid-column: span 2; }

/* Compact form-group inside settings */
.settings-card .form-group {
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.settings-card .form-group label {
  font-size: .78rem;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.settings-card .form-group input,
.settings-card .form-group textarea,
.settings-card .form-group select {
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: .85rem;
  background: var(--white);
  width: 100%;
  box-sizing: border-box;
}
.settings-card .form-group textarea { resize: vertical; min-height: 60px; }

/* animated bg row compact */
.anim-bg-row { padding: .5rem 0; border-bottom: 1px solid var(--border); }
.anim-bg-row:last-child { border-bottom: none; }
.anim-bg-label { font-size: .8rem; font-weight: 600; display: block; margin-bottom: .3rem; }
.anim-bg-controls { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.anim-bg-input { flex: 1; min-width: 140px; font-size: .78rem; padding: 6px 9px;
  border: 1.5px solid var(--border); border-radius: 8px; }
.anim-bg-preview { margin-top: .4rem; }
.anim-bg-thumb { width: 120px; height: 50px; object-fit: cover; border-radius: 8px;
  border: 1.5px solid var(--border); display: block; }

@media (max-width: 900px) {
  .settings-sections { grid-template-columns: 1fr; }
  .settings-card[style*="span 2"] { grid-column: 1; }
}

/* ══ Animated bg — full-size fill for all animated-bg targets ═══════════ */

/*
 * АРХИТЕКТУРА (единый источник правды):
 *  - .anim-bg-media  — медиа-элемент (<video> / <img>), z-index: 0, opacity управляется через JS
 *  - .anim-bg-overlay — затемняющий div,                z-index: 1
 *  Оба вставляются в начало родителя. Контент получает z-index: 2 через специфичные правила.
 *  Класс .anim-bg-el используется только для поиска/удаления при ре-рендере.
 */

/* Базовый маркер — нужен только для querySelectorAll при ре-рендере */
.anim-bg-el { display: block !important; }

/* Медиа-элемент фона: абсолютно заполняет родителя */
.anim-bg-media {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  margin: 0 !important; padding: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* Затемняющий оверлей: выше медиа, ниже контента */
.anim-bg-overlay {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* ── Хедер: sticky + видео внутри ────────────────────────────────────────── */
.header {
  position: sticky !important;
  overflow: hidden !important;
  isolation: isolate;
}
/* Контент хедера всегда поверх фона */
.header-container { position: relative; z-index: 2; }

/* ── Футер ────────────────────────────────────────────────────────────────── */
.footer {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate;
}
/* Контент футера поверх фона */
.footer-container { position: relative; z-index: 2; }

/* ── Главная — секция категорий ──────────────────────────────────────────── */
.categories-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* Контент категорий поверх фона */
.categories-section .container { position: relative; z-index: 2; }

/* ── Хедер каталога гидов ────────────────────────────────────────────────── */
.catalog-header {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate;
}
.catalog-header-inner { position: relative; z-index: 2; }

/* Медиа-вариант хедера каталога */
.catalog-header-media {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.catalog-header-media .catalog-header-inner {
  position: relative;
  z-index: 2;
}

/* ── Тело каталога ───────────────────────────────────────────────────────── */
.catalog-body { position: relative; overflow: hidden; }
.catalog-body-bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

/* ══ MOBILE — Burger menu & responsive nav ═════════════════════════════════ */
.burger {
  display: none;
  flex-direction: column; justify-content: center; align-items: center;
  gap: 5px; background: none; border: none; cursor: pointer;
  padding: 8px; border-radius: 8px;
  width: 40px; height: 40px;
}
.burger span {
  display: block; width: 22px; height: 2px;
  background: #fff; border-radius: 2px;
  transition: transform .25s ease, opacity .25s ease;
}
.burger-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger-open span:nth-child(2) { opacity: 0; }
.burger-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.5); z-index: 150;
}
.nav-overlay-open { display: block; }

@media (max-width: 768px) {
  /* Хедер на мобиле — ОДНА строка: лого | nav-текст | auth.
     --header-h: 52px (компактнее чем 78px двустрочный вариант).          */
  /* --header-h for mobile set inside container block below */

  .header-container {
    padding: 0 .875rem;
    height: 56px;           /* высота контента ниже челки */
    flex-wrap: nowrap;
    gap: .3rem;
    align-items: center;    /* центрируем по вертикали в 56px зоне */
  }
  /* Общая высота хедера = челка + контент = учитываем в layout */
  :root { --header-h: 56px; }

  /* ── Хедер: clamp()+vw гарантирует одинаковый вид на ВСЕХ телефонах ──
     CSS viewport при scale=0.8:
       iPhone SE/mini 375px → 469px CSS   Android 360px → 450px CSS
       iPhone 13/14   390px → 487px CSS   Android XL 412px → 515px CSS
       iPhone 11 PM   414px → 518px CSS   iPhone 13/14 PM 430px → 537px CSS
     clamp(min, Nvw, max) масштабируется пропорционально в диапазоне 450-540px. */
  .logo           { flex-shrink: 0; min-width: 0; order: 1; }
  .logo-icon      { font-size: clamp(1.8rem, 5.2vw, 2.4rem); }
  /* Скрываем текст «ГУСЬ ЗНАЕТ» на мобиле — иконка достаточно информативна,
     освобождаем место для кнопок навигации */
  .logo-text      { display: none; }

  /* Убираем бургер */
  .burger         { display: none !important; }

  /* Nav — min-width:0 на контейнере И ссылках: fix обрезания на iPhone 13 */
  .nav {
    order: 2;
    flex: 1;
    min-width: 0;             /* ← без этого flex: 1 контейнер не сжимается */
    position: static;
    display: flex;
    flex-direction: row;
    gap: .1rem;
    padding: 0;
    background: transparent;
    overflow: hidden;
    transition: none;
    top: auto; right: auto; bottom: auto; left: auto;
    box-shadow: none;
  }
  .nav a {
    flex: 1;
    min-width: 0;             /* ← flex item не выходит за viewport */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: .28rem clamp(.15rem, 1vw, .45rem);
    font-size: clamp(0.82rem, 3.2vw, 1.05rem);
    font-weight: 500;
    border-radius: 6px;
    background: transparent;
    border: none;
    color: rgba(255,255,255,.65);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .14s, background .14s;
  }
  .nav a:hover   { color: #fff; background: rgba(255,255,255,.08); }
  .nav a.nav-active {
    color: #fff; font-weight: 600;
    background: rgba(var(--coral-rgb), .2);
    border-radius: 6px;
  }
  /* Иконки в хедере: если иконка загружена — показываем её, текст скрываем */
  .nav a.has-nav-ico .nav-ico {
    display: block;
    width: clamp(20px, 4.5vw, 28px);
    height: clamp(20px, 4.5vw, 28px);
    object-fit: contain;
    opacity: .75;
    transition: opacity .14s;
    flex-shrink: 0;
  }
  .nav a.has-nav-ico:hover .nav-ico,
  .nav a.has-nav-ico.nav-active .nav-ico { opacity: 1; }
  .nav a.has-nav-ico .nav-txt { display: none; }
  .nav a:not(.has-nav-ico) .nav-txt { display: block; }

  /* Оверлей не нужен */
  .nav-overlay { display: none !important; }

  /* Auth — пропорциональные размеры */
  .header-actions { flex-shrink: 0; order: 3; gap: clamp(.2rem, 1vw, .4rem); }
  .header-actions .btn-primary { display: none; }
  .header-actions .btn-login {
    padding: 5px clamp(8px, 2.5vw, 13px);
    font-size: clamp(0.78rem, 2.8vw, 1.0rem);
  }
  .user-name   { display: none; }
  .user-menu   { gap: clamp(.2rem, 1vw, .35rem); }
  .admin-badge { padding: 4px clamp(7px, 2vw, 10px); font-size: clamp(0.75rem, 2.5vw, .95rem); }
  .admin-badge .badge-text { display: none; }  /* mobile: show only emoji */
  .btn-logout  { padding: 5px clamp(8px, 2.3vw, 12px); font-size: clamp(0.78rem, 2.7vw, .95rem); }

  /* Hero */
  .hero { padding: 3rem 1rem; }
  .hero h1 { font-size: 1.6rem; }
  .hero p  { font-size: .9rem; }

  /* Categories — 2 колонки на мобиле вместо 1 */
  .categories-grid-main { grid-template-columns: repeat(2, 1fr); gap: .75rem; }
  /* Карточка категории — компактнее для 2-col на 390px */
  .cat-main-card    { padding: 1.1rem .875rem .875rem; border-radius: 16px; }
  .cat-main-icon-wrap  { width: 100%; height: 62px; border-radius: 12px; margin-bottom: .5rem; }
  .cat-main-icon-emoji { font-size: 2rem; }
  .cat-main-icon-img   { width: 100%; height: 62px; object-fit: cover; border-radius: 12px; }
  .cat-main-title      { font-size: .82rem; margin-bottom: .25rem; }
  .cat-main-desc       { font-size: .72rem; margin-bottom: .55rem; }
  .cat-main-cta        { font-size: .7rem; }
  /* Фикс: на мобиле icon-outer должен быть block + overflow:visible
     чтобы badge не обрезался и позиционировался правильно */
  .cat-main-card .cat-icon-outer {
    display: block; width: 100%; overflow: visible;
  }

  /* Guides catalog */
  .catalog-header { padding: 2rem 1rem; }
  .catalog-title  { font-size: 1.4rem; }
  .catalog-search-wrap { max-width: 100%; }
  .catalog-filters { flex-wrap: wrap; gap: .4rem; padding: .75rem 1rem; }
  .cat-tab { font-size: .75rem; padding: .35rem .7rem; }

  /* Guide detail */
  .step-card { flex-direction: column; gap: .5rem; }
  .guide-header { text-align: center; }

  /* Touch targets */
  .modal-close  { width: 44px; height: 44px; font-size: 1rem; border-radius: 50%; }
  .ev-done-btn  { width: 44px; height: 44px; }
  .ev-check-btn { width: 44px; height: 44px; }

  /* Document page */
  .quiz-page { padding: 1rem; }
  .quiz-doc-preview { margin-top: .75rem; }
  /* Превью документа — растянуто сильнее, больше текста без скролла */
  .quiz-doc-text { max-height: 360px; font-size: .72rem; }

  /* ── iOS: предотвращаем авто-zoom при фокусе на input ─────────────────
     Safari зумит когда font-size < 16px. Устанавливаем 16px на элементах.
     Визуальный размер регулируется padding/line-height, не font-size.     */
  input[type="text"],  input[type="email"],   input[type="password"],
  input[type="number"],input[type="tel"],      input[type="search"],
  input[type="date"],  input[type="datetime-local"],
  textarea,            select { font-size: 16px !important; }
}

/* PWA standalone + всегда для iOS Safari: font-size 16px = no auto-zoom */
@media screen and (display-mode: standalone) {
  input, input[type="text"],  input[type="email"],   input[type="password"],
  input[type="number"],input[type="tel"],      input[type="search"],
  input[type="date"],  input[type="datetime-local"],
  textarea, select { font-size: 16px !important; }
}

@media (max-width: 480px) {
  .hero h1 { font-size: 1.35rem; }
  .catalog-title { font-size: 1.2rem; }
  /* Гиды — 1 колонка (2-col слишком тесно с насыщенными карточками) */
  .guides-grid-v2 { grid-template-columns: 1fr !important; }
  .guide-card-v2  { padding: 1rem; border-radius: 20px; }

  /* Footer bottom — две строки вместо flex-row */
  .footer-bottom { flex-direction: column; gap: .35rem; text-align: center; }

  /* Quiz result: кнопки в колонку, каждая на всю ширину */
  .quiz-form { grid-template-columns: 1fr !important; }
  .quiz-result-actions { flex-direction: column; gap: .6rem; }
  .quiz-result-actions .btn-primary,
  .quiz-result-actions .btn-secondary { width: 100%; justify-content: center; }

  /* Guide-actions (кнопки «Скачать PDF», «Начать» и т.п.) — в колонку */
  .guide-actions { flex-direction: column; align-items: stretch; }
  .guide-actions .btn-primary,
  .guide-actions .btn-secondary { width: 100%; justify-content: center; }

  /* btn-sm в карточках документов — минимальная зона тапа */
  .doc-card-actions .btn-sm { min-height: 38px; padding: 8px 12px; }

  /* Doc form grid: 2-col → 1-col */
  .doc-form-grid { grid-template-columns: 1fr !important; }

  /* Modal на весь экран по ширине */
  .modal { padding: .5rem; }
  .modal-box { border-radius: 16px; }
}

/* ══ Admin mobile layout ≤960px ═══════════════════════════════════════
   При initial-scale=0.5 в админке эффективная ширина = 860px.
   Чтобы горизонтальный стрип сайдбара работал при 860px нужен breakpoint
   960px, а не 768px. Десктопный 215px sidebar не применяется.            */
@media (max-width: 960px) {
  .admin-layout  { grid-template-columns: 1fr; }
  .admin-sidebar { position: static; height: auto; }
  .admin-logo    { display: none; }
  /* Горизонтальная полоса с одной строкой и скроллом */
  .admin-nav {
    flex-direction: row;
    flex-wrap: nowrap;
    padding: .3rem 0;
    gap: .25rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .admin-nav::-webkit-scrollbar { display: none; }
  .admin-nav-btn {
    flex-shrink: 0;
    white-space: nowrap;
    font-size: .82rem;        /* крупнее — читается при scale=0.5 */
    padding: .42rem .75rem;
    border-radius: 20px;
  }
  /* Section header */
  .admin-section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: .65rem;
  }
  .admin-section-header > div:last-child {
    display: flex; flex-wrap: wrap; gap: .35rem; width: 100%;
  }
  .admin-section-header .btn-sm { font-size: .82rem; }
  .settings-sections { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {

  /* ── Admin main — padding уменьшаем ────────────────────── */
  .admin-main { padding: .875rem !important; }

  /* ── Guide row: actions переносятся под title ─────────────
     Было: [icon][title+meta][toggle|edit|del] — actions уходили за экран
     Стало: [icon][title+meta] / [toggle|edit|del] вторая строка           */
  .admin-guide-row {
    flex-wrap: wrap !important;
    gap: .5rem !important;
  }
  .agr-icon { align-self: flex-start; }
  .agr-body { flex: 1; min-width: 0; }
  .agr-actions {
    width: 100%;
    justify-content: flex-end;
    padding-top: .35rem;
    border-top: 1px solid var(--border);
    gap: .35rem !important;
  }
  /* Кнопки действий в guide-row чуть крупнее — удобнее тапать */
  .agr-actions .btn-sm { padding: 6px 10px; font-size: .75rem; }

  /* ── Builder section header: кнопки-утилиты в 2 ряда ───── */
  .admin-section > .admin-section-header > div[style*="display:flex"] {
    flex-wrap: wrap !important;
    gap: .3rem !important;
  }
  .admin-section-header .btn-sm { padding: 5px 9px; font-size: .71rem; }

  /* ── «Создать гид» кнопка — на всю ширину ───────────────── */
  .admin-section > div > .btn-primary { width: 100%; justify-content: center; }

  /* ── Users table: горизонтальный скролл с fade-индикатором ─ */
  .admin-table-wrap {
    position: relative;
    -webkit-overflow-scrolling: touch;
  }
  .admin-table { min-width: 560px; }   /* таблица не схлопывается */
  .admin-table td,
  .admin-table th { padding: 7px 9px; font-size: .76rem; }

  /* ── Email panels: стекируем (900px уже делает 1fr,
     но form-group textareas были слишком высокими) ─────────── */
  #eBody, #bBody { height: auto; min-height: 80px; }

  /* ── Stats grid: минимум 2 карточки в ряд ───────────────── */
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: .65rem; }
  .stat-num { font-size: 1.5rem; }

  /* ── Assets grid: 2 колонки на узком экране ─────────────── */
  .assets-grid { grid-template-columns: repeat(2, 1fr) !important; gap: .5rem; }

  /* ── Settings / Customization ────────────────────────────── */
  .settings-card { padding: .875rem; }
  .settings-grid { grid-template-columns: 1fr; gap: .75rem; }

  /* ── GuideBuilder wrapper padding ───────────────────────── */
  .gb-wrapper { padding: .75rem !important; }

  /* ── Form modal (старая форма гидов) ─────────────────────── */
  .modal-body  { padding: .75rem 1rem; }
  .modal-header { padding: .875rem 1rem 0; }
  .modal-footer { padding: .75rem 1rem 1rem; }
  .form-grid-2 { grid-template-columns: 1fr !important; }
  .form-grid-2 [style*="grid-column:span 2"],
  .form-grid-2 [style*="grid-column: span 2"] { grid-column: span 1 !important; }
}

/* ══ Guide Builder v2 ════════════════════════════════════════════════════ */
.gb-wrapper { max-width: 900px; margin: 0 auto; padding: 1.5rem; }

/* Header */
.gb-header {
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: 1.5rem; padding-bottom: 1rem;
  border-bottom: 1.5px solid var(--border);
}
.gb-back {
  background: none; border: 1.5px solid var(--border); border-radius: 8px;
  padding: .4rem .9rem; font-size: .82rem; cursor: pointer; color: var(--ink);
  transition: var(--ease);
}
.gb-back:hover { border-color: var(--coral); color: var(--coral); }
.gb-header-title { font-weight: 700; font-size: 1.05rem; flex: 1; }
.gb-type-badge {
  background: var(--sand); padding: .3rem .75rem;
  border-radius: 50px; font-size: .8rem; font-weight: 600;
}

/* Progress */
.gb-progress {
  display: flex; align-items: center;
  margin-bottom: 2rem;
}
.gb-progress-step {
  display: flex; flex-direction: column; align-items: center;
  gap: .25rem; color: var(--muted); font-size: .72rem; font-weight: 600;
  min-width: 60px;
}
.gb-progress-step.active { color: var(--coral); }
.gb-progress-step.done   { color: var(--ink); }
.gb-progress-num {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--border); display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .85rem; transition: var(--ease);
}
.gb-progress-step.active .gb-progress-num { background: var(--coral); color: #fff; }
.gb-progress-step.done .gb-progress-num   { background: var(--ink); color: #fff; }
.gb-progress-line {
  flex: 1; height: 2px; background: var(--border); margin: 0 .25rem;
  margin-bottom: 1.2rem;
}
.gb-progress-line.done { background: var(--ink); }

/* Steps */
.gb-step { animation: gbFadeIn .2s ease; }
@keyframes gbFadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
.gb-step-title {
  font-size: 1.25rem; font-weight: 800; margin-bottom: .35rem;
  display: flex; align-items: center; gap: .75rem;
}
.gb-step-hint { color: var(--muted); font-size: .85rem; margin-bottom: 1.5rem; }

/* Type grid */
.gb-type-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1rem; margin-bottom: 1.5rem;
}
.gb-type-card {
  border: 2px solid var(--border); border-radius: 16px; padding: 1.25rem;
  cursor: pointer; position: relative; transition: all .18s ease;
  background: var(--white);
}
.gb-type-card:hover { border-color: var(--tc, var(--coral)); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.08); }
.gb-type-card.selected { border-color: var(--tc, var(--coral)); background: color-mix(in srgb, var(--tc, var(--coral)) 5%, white); }
.gb-type-icon { font-size: 2.4rem; margin-bottom: .5rem; }
.gb-type-label { font-weight: 800; font-size: 1rem; margin-bottom: .35rem; }
.gb-type-desc  { font-size: .8rem; color: var(--muted); line-height: 1.5; margin-bottom: .5rem; }
.gb-type-ex    { font-size: .72rem; color: var(--muted); font-style: italic; }
.gb-type-check {
  position: absolute; top: .75rem; right: .75rem;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--tc, var(--coral)); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: .85rem;
}
.gb-type-new {
  position: absolute; top: -.5rem; right: 1rem;
  background: var(--amber); color: #fff; font-size: .65rem; font-weight: 700;
  padding: 2px 8px; border-radius: 50px;
}

/* Fields */
.gb-fields { display: flex; flex-direction: column; gap: .85rem; margin-bottom: 1.5rem; }
.gb-field { display: flex; flex-direction: column; gap: .3rem; }
.gb-field label { font-size: .78rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.gb-field input, .gb-field select, .gb-field textarea {
  border: 1.5px solid var(--border); border-radius: 10px;
  padding: .6rem .9rem; font-size: .9rem; background: var(--white); width: 100%;
  box-sizing: border-box; font-family: var(--font-b); transition: var(--ease);
}
.gb-field input:focus, .gb-field textarea:focus, .gb-field select:focus {
  outline: none; border-color: var(--coral); box-shadow: 0 0 0 3px rgba(var(--coral-rgb),.1);
}
.gb-field-row { flex-direction: row; gap: 1rem; }
.gb-field-row .gb-field { flex: 1; }
.gb-icon-picker { display: flex; align-items: center; gap: .5rem; }
.gb-icon-preview { font-size: 2.2rem; width: 52px; height: 52px; background: var(--sand); border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.gb-slug-row { display: flex; align-items: center; border: 1.5px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--white); }
.gb-slug-prefix { padding: .6rem .75rem; background: var(--sand); color: var(--muted); font-size: .78rem; white-space: nowrap; border-right: 1.5px solid var(--border); }
.gb-slug-row input { border: none; border-radius: 0; flex: 1; }
.gb-slug-row input:focus { box-shadow: none; }
.gb-toggles { display: flex; gap: 1rem; }
.gb-toggle { display: flex; align-items: center; gap: .4rem; cursor: pointer; font-size: .85rem; }
.req { color: var(--coral); }

/* Step cards */
.gb-step-card {
  display: flex; gap: .75rem; align-items: flex-start;
  background: var(--white); border: 1.5px solid var(--border);
  border-radius: 14px; padding: 1rem; margin-bottom: .75rem;
  transition: var(--ease);
}
.gb-step-card:hover { border-color: var(--coral); box-shadow: var(--shadow); }
.gb-sc-num { font-size: .72rem; font-weight: 800; color: var(--muted); min-width: 42px; padding-top: .3rem; }
.gb-sc-body { flex: 1; display: flex; flex-direction: column; gap: .4rem; }
.gb-sc-body input, .gb-sc-body textarea {
  border: 1.5px solid var(--border); border-radius: 8px;
  padding: .5rem .75rem; font-size: .85rem; width: 100%; box-sizing: border-box;
}
.gb-sc-body input:focus, .gb-sc-body textarea:focus { outline: none; border-color: var(--coral); }
.gb-sc-meta { display: flex; gap: .75rem; flex-wrap: wrap; }
.gb-meta-field { display: flex; align-items: center; gap: .35rem; font-size: .78rem; color: var(--muted); }
.gb-meta-field input { border: 1.5px solid var(--border); border-radius: 6px; padding: .3rem .6rem; font-size: .8rem; }
.gb-sc-actions { display: flex; flex-direction: column; gap: .3rem; }
.gb-sc-actions button { background: var(--sand); border: none; border-radius: 6px; width: 28px; height: 28px; cursor: pointer; font-size: .9rem; }
.gb-sc-actions button:hover { background: var(--border); }
.gb-btn-danger { background: #fee2e2 !important; color: #dc2626 !important; }
.gb-empty-steps { text-align: center; color: var(--muted); padding: 2rem; background: var(--sand); border-radius: 12px; margin: .75rem 0; }
.gb-add-row { text-align: center; margin: .75rem 0 1.5rem; }
.gb-btn-add { background: none; border: 1.5px dashed var(--coral); color: var(--coral); border-radius: 8px; padding: .35rem .9rem; font-size: .8rem; cursor: pointer; font-weight: 700; }
.gb-btn-add-lg { background: var(--sand); border: 1.5px dashed var(--border); border-radius: 10px; padding: .65rem 1.5rem; font-size: .85rem; cursor: pointer; color: var(--muted); font-weight: 600; transition: var(--ease); }
.gb-btn-add-lg:hover { border-color: var(--coral); color: var(--coral); }

/* Document editor */
.gb-doc-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-bottom: 1.5rem; }
.gb-doc-toolbar { display: flex; gap: .4rem; margin-bottom: .5rem; flex-wrap: wrap; }
.gb-doc-toolbar button { font-size: .75rem; padding: .3rem .7rem; background: var(--sand); border: 1.5px solid var(--border); border-radius: 6px; cursor: pointer; transition: var(--ease); }
.gb-doc-toolbar button:hover { border-color: var(--coral); color: var(--coral); }
.gb-doc-textarea { font-family: monospace; font-size: .82rem; line-height: 1.6; resize: vertical; background: var(--sand); border: 1.5px solid var(--border); border-radius: 10px; padding: .75rem 1rem; width: 100%; box-sizing: border-box; }
.gb-doc-fields { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; align-items: center; }
.gb-doc-fields-label { font-size: .72rem; color: var(--muted); font-weight: 600; }
.gb-field-pill { background: var(--coral); color: #fff; font-size: .72rem; padding: .15rem .5rem; border-radius: 50px; font-family: monospace; }
.gb-doc-preview-label { font-size: .78rem; color: var(--muted); font-weight: 600; margin-bottom: .5rem; }
.gb-doc-preview { background: var(--white); border: 1.5px solid var(--border); border-radius: 10px; padding: 1rem; font-size: .82rem; line-height: 1.7; min-height: 300px; max-height: 500px; overflow-y: auto; font-family: 'Georgia', serif; white-space: pre-wrap; }
.tpl-field { background: rgba(var(--coral-rgb),.12); color: var(--coral); border-radius: 4px; padding: 0 3px; font-style: italic; }
.gb-doc-right .gb-doc-preview-label { display: block; }

/* Quiz builder */
.gb-quiz-card {
  background: var(--white); border: 1.5px solid var(--border);
  border-radius: 14px; padding: 1.1rem; margin-bottom: .85rem;
}
.gb-qc-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem; }
.gb-qc-num { font-size: .78rem; font-weight: 800; color: var(--muted); }
.gb-qc-actions { display: flex; gap: .3rem; }
.gb-qc-actions button { font-size: .75rem; padding: .25rem .6rem; border-radius: 6px; border: 1.5px solid var(--border); background: var(--sand); cursor: pointer; }
.gb-qc-question { width: 100%; font-size: .92rem; font-weight: 600; border: 1.5px solid var(--border); border-radius: 8px; padding: .6rem .9rem; margin-bottom: .6rem; box-sizing: border-box; }
.gb-qc-store { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .8rem; color: var(--muted); margin-bottom: .6rem; }
.gb-qc-store input { border: 1.5px solid var(--border); border-radius: 6px; padding: .3rem .6rem; font-size: .8rem; }
.gb-opts { display: flex; flex-direction: column; gap: .35rem; margin-bottom: .6rem; }
.gb-opt-row { display: flex; gap: .4rem; align-items: center; }
.gb-opt-label { flex: 1; }
.gb-opt-key   { width: 100px; font-size: .78rem; }
.gb-opt-row input { border: 1.5px solid var(--border); border-radius: 6px; padding: .4rem .6rem; font-size: .82rem; }
.gb-btn-danger-sm { background: #fee2e2; color: #dc2626; border: none; border-radius: 6px; width: 26px; height: 26px; cursor: pointer; font-size: .8rem; }
.gb-btn-add-sm { font-size: .75rem; padding: .25rem .7rem; background: none; border: 1.5px dashed var(--border); border-radius: 6px; cursor: pointer; color: var(--muted); margin-top: .2rem; }
.gb-btn-add-sm:hover { border-color: var(--coral); color: var(--coral); }
.gb-showif { background: var(--sand); border-radius: 8px; padding: .5rem .75rem; font-size: .78rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.gb-showif select, .gb-showif input { border: 1.5px solid var(--border); border-radius: 6px; padding: .25rem .5rem; font-size: .78rem; }

/* Summary */
.gb-summary { background: var(--sand); border-radius: 12px; padding: 1rem 1.25rem; margin-bottom: 1.25rem; }
.gb-summary-row { display: flex; gap: 1rem; padding: .4rem 0; border-bottom: 1px solid var(--border); }
.gb-summary-row:last-child { border: none; }
.gb-summary-k { color: var(--muted); font-size: .82rem; min-width: 160px; }
.gb-summary-v { font-size: .82rem; font-weight: 600; }
.gb-pub-row { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.gb-pub-toggle { display: flex; align-items: center; gap: .5rem; cursor: pointer; font-weight: 700; }

/* Footer / nav buttons */
.gb-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 1.25rem; border-top: 1.5px solid var(--border); margin-top: 1rem; }
.gb-btn-primary { background: var(--coral); color: #fff; border: none; border-radius: 10px; padding: .7rem 1.6rem; font-size: .9rem; font-weight: 700; cursor: pointer; transition: var(--ease); }
.gb-btn-primary:hover { background: #d4574a; }
.gb-btn-primary:disabled { opacity: .5; cursor: default; }
.gb-btn-secondary { background: var(--white); border: 1.5px solid var(--border); border-radius: 10px; padding: .7rem 1.4rem; font-size: .88rem; cursor: pointer; transition: var(--ease); }
.gb-btn-secondary:hover { border-color: var(--coral); }
.gb-btn-save { min-width: 200px; }

@media (max-width: 768px) {
  .gb-type-grid { grid-template-columns: 1fr; }
  .gb-doc-layout { grid-template-columns: 1fr; }
  .gb-doc-right { display: none; }
  .gb-field-row { flex-direction: column; }
}

/* ══ Guide Builder — File upload fields ═══════════════════════════════════ */
.gb-file-field { min-width: 200px; }
.gb-file-has {
  display: flex; align-items: center; gap: .5rem;
  background: var(--sand); border-radius: 8px; padding: .5rem .75rem;
  border: 1.5px solid var(--border);
}
.gb-file-link {
  font-size: .82rem; color: var(--ink); text-decoration: none;
  font-weight: 600; flex: 1;
}
.gb-file-link:hover { color: var(--coral); }
.gb-btn-file-label {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--white); border: 1.5px dashed var(--border);
  border-radius: 8px; padding: .5rem 1rem; font-size: .82rem;
  cursor: pointer; font-weight: 600; transition: var(--ease);
}
.gb-btn-file-label:hover { border-color: var(--coral); color: var(--coral); }
.gb-btn-file-clear {
  font-size: .72rem; padding: .2rem .5rem;
  background: #fee2e2 !important; color: #dc2626 !important;
  border: none; border-radius: 6px; cursor: pointer;
}

/* ══ PDF Field Editor Modal ═════════════════════════════════════════════ */
#gb-pdf-modal canvas { display: block; }
.pdf-field-marker {
  position: absolute;
  border: 2px solid var(--coral);
  background: rgba(var(--coral-rgb),.1);
  border-radius: 4px;
  font-size: 11px;
  color: var(--coral);
  font-weight: 700;
  padding: 2px 5px;
  cursor: pointer;
  z-index: 10;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  white-space: nowrap;
  transition: background .15s;
}
.pdf-field-marker:hover { background: rgba(var(--coral-rgb),.25); }

/* Test-fill form in doc editor */
.gb-doc-testform {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  max-height: 300px;
  overflow-y: auto;
}
.gb-test-field {
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.gb-test-field label {
  font-size: .7rem;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
}
.gb-test-field input {
  border: 1.5px solid var(--border);
  border-radius: 6px;
  padding: .3rem .6rem;
  font-size: .8rem;
}
.gb-test-field input:focus { outline: none; border-color: var(--coral); }

/* File upload area */
.gb-file-upload-area {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: .5rem;
}
.gb-file-col { display: flex; flex-direction: column; gap: .4rem; min-width: 200px; }
.gb-file-has {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: var(--sand);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: .45rem .75rem;
}
.gb-file-link {
  font-size: .82rem;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  flex: 1;
}
.gb-file-link:hover { color: var(--coral); }
.gb-btn-file-label {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--white);
  border: 1.5px dashed var(--border);
  border-radius: 8px;
  padding: .5rem 1rem;
  font-size: .82rem;
  cursor: pointer;
  font-weight: 600;
  transition: var(--ease);
}
.gb-btn-file-label:hover { border-color: var(--coral); color: var(--coral); }
.gb-btn-file-clear {
  background: #fee2e2;
  color: #dc2626;
  border: none;
  border-radius: 6px;
  padding: .2rem .5rem;
  font-size: .72rem;
  cursor: pointer;
}

/* ══ PDF Field Editor v2 — drag-to-select, field config modal ═══════════ */
#pdf-drag-sel {
  position: fixed;
  border: 2px dashed var(--coral);
  background: rgba(var(--coral-rgb),.1);
  z-index: 99998;
  pointer-events: none;
  border-radius: 3px;
}

.pdf-field-marker {
  position: absolute;
  border: 2px solid var(--coral);
  background: rgba(var(--coral-rgb),.15);
  border-radius: 3px;
  color: var(--coral);
  font-weight: 700;
  padding: 2px 5px;
  cursor: pointer;
  z-index: 10;
  white-space: nowrap;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  transition: background .15s;
}
.pdf-field-marker:hover { background: rgba(var(--coral-rgb),.3); }

/* Guide download section */
.guide-download-section {
  background: var(--sand);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin-top: 1.5rem;
}
.guide-download-section h3 { margin: 0 0 .6rem; }

/* PDF download page */
@media (max-width: 600px) {
  .pdf-field-cfg-modal-inner { width: 95vw !important; }
}

/* ══ Document Preview Page ═══════════════════════════════════════════════ */
.doc-preview-page {}
.doc-preview-layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 1.25rem;
  margin-top: 1.5rem;
  align-items: start;
}
.doc-preview-left  { position: sticky; top: 1rem; }
.doc-preview-right { min-height: 500px; }
.doc-preview-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 1.25rem;
}
.doc-preview-section-title { font-weight: 700; font-size: .9rem; }
.doc-preview-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .75rem;
}
.doc-preview-badge {
  font-size: .68rem;
  color: var(--muted);
  background: var(--sand);
  padding: 2px 8px;
  border-radius: 50px;
}
.doc-preview-field { display: flex; flex-direction: column; gap: .25rem; margin-bottom: .75rem; }
.doc-field-label { font-size: .75rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.doc-field-input {
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: .5rem .75rem;
  font-size: .88rem;
  transition: var(--ease);
}
.doc-field-input:focus { outline: none; border-color: var(--coral); box-shadow: 0 0 0 3px rgba(var(--coral-rgb),.1); }
.doc-preview-actions { margin-top: 1rem; }
.doc-preview-hint { font-size: .72rem; color: var(--muted); margin-top: .5rem; }
.doc-live-preview {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: .88rem;
  line-height: 1.8;
  background: var(--sand);
  border-radius: 10px;
  padding: 1.25rem;
  min-height: 400px;
  white-space: pre-wrap;
  word-break: break-word;
}
.doc-filled-field { background: rgba(46,204,113,.15); color: #27ae60; border-radius: 3px; padding: 0 3px; font-weight: 600; }
.doc-empty-field  { background: rgba(var(--coral-rgb),.1); color: var(--coral); border-radius: 3px; padding: 0 3px; font-style: italic; }

/* Fields config in constructor step 3 */
.gb-field-config-row {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: .6rem .75rem;
  margin-bottom: .5rem;
  transition: var(--ease);
}
.gb-field-config-row:hover { border-color: var(--coral); }
.gb-field-config-key { font-family: monospace; font-size: .82rem; font-weight: 700; color: var(--coral); margin-bottom: .35rem; }
.gb-fc-btn {
  border: 1.5px solid var(--border);
  border-radius: 6px;
  padding: .25rem .6rem;
  font-size: .75rem;
  cursor: pointer;
  font-weight: 600;
  transition: var(--ease);
}
.gb-fc-btn.active { background: var(--coral) !important; color: #fff !important; border-color: var(--coral); }
.gb-fc-select, .gb-fc-input {
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  padding: .3rem .5rem;
  font-size: .78rem;
  box-sizing: border-box;
  margin-top: .25rem;
}
.gb-fc-add-quiz {
  font-size: .72rem;
  background: none;
  border: 1.5px dashed var(--coral);
  color: var(--coral);
  border-radius: 6px;
  padding: .2rem .6rem;
  cursor: pointer;
  margin-top: .25rem;
  width: 100%;
}
.gb-fields-config-empty { padding: .5rem; }

/* PDF field sidebar pending config */
.gb-pdf-field-pending {
  background: #fff8f0;
  border: 1.5px solid #f4a62a;
  border-radius: 10px;
  padding: .75rem;
  margin-bottom: .75rem;
}
.gb-pdf-fill-btn {
  border: none;
  border-radius: 6px;
  padding: .3rem .6rem;
  font-size: .75rem;
  cursor: pointer;
  font-weight: 700;
  flex: 1;
}

@media (max-width: 768px) {
  .doc-preview-layout {
    grid-template-columns: 1fr;
  }
  /* На мобиле: предпросмотр документа — сверху (видно пока заполняешь форму),
     форма — снизу. Предпросмотр ограничен по высоте и прокручивается независимо. */
  .doc-preview-left {
    position: static;
    order: 2;
  }
  .doc-preview-right {
    order: 1;
    max-height: 260px;
    overflow-y: auto;
    border-radius: 12px;
    border: 1.5px solid var(--border);
    background: var(--white);
    margin-bottom: .75rem;
    /* Sticky: предпросмотр остаётся видимым при скролле формы */
    position: sticky;
    top: calc(var(--header-h, 64px) + 8px);
    z-index: 10;
    box-shadow: 0 4px 16px rgba(0,0,0,.08);
  }
}

/* ══ Unified document section in constructor ════════════════════════════ */
.gb-doc-section { margin-top: .5rem; }
.gb-doc-section .gb-doc-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 1rem;
  align-items: start;
}
.gb-doc-section .gb-doc-left  { display: flex; flex-direction: column; gap: .5rem; }
.gb-doc-section .gb-doc-right { position: sticky; top: 1rem; }

.gb-fields-config-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.5rem 1rem;
  background: var(--sand);
  border-radius: 12px;
  gap: .35rem;
}

@media (max-width: 900px) {
  .gb-doc-section .gb-doc-layout { grid-template-columns: 1fr; }
  .gb-doc-section .gb-doc-right  { position: static; }
}

/* ══ Step 3 Doc — field-first layout ══════════════════════════════════════ */
.gb-step3-doc-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  align-items: start;
  margin-bottom: .75rem;
}
.gb-step3-doc-left, .gb-step3-doc-right { display: flex; flex-direction: column; gap: .5rem; }
.gb-step3-doc-right { position: sticky; top: 1rem; }

.gb-step3-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .4rem;
}
.gb-step3-section-title { font-weight: 700; font-size: .82rem; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }

/* Form field rows — redesigned for clarity */
.gb-form-field-row {
  display: flex;
  gap: .5rem;
  align-items: flex-start;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: .6rem;
  transition: var(--ease);
}
.gb-form-field-row:hover { border-color: var(--coral); box-shadow: var(--shadow); }
.gb-form-field-num {
  font-size: .72rem; font-weight: 800; color: var(--muted);
  min-width: 22px; padding-top: .4rem;
}
.gb-form-field-body { flex: 1; display: flex; flex-direction: column; gap: .25rem; }
.gb-form-field-group { display: flex; flex-direction: column; gap: .2rem; }

/* Label above inputs */
.gb-ff-label {
  font-size: .72rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .03em;
}
/* Main "question/label" input — large and readable */
.gb-ff-input-main {
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: .6rem .85rem;
  font-size: .92rem;
  width: 100%;
  box-sizing: border-box;
  transition: var(--ease);
}
.gb-ff-input-main:focus { outline: none; border-color: var(--coral); box-shadow: 0 0 0 3px rgba(var(--coral-rgb),.1); }
.gb-ff-input-main::placeholder { color: #bbb; }

/* Key input — monospace, coral colored */
.gb-ff-input-key {
  border: 1.5px solid var(--border);
  border-radius: 0 8px 8px 0;
  padding: .5rem .75rem;
  font-size: .88rem;
  font-family: monospace;
  color: var(--coral);
  flex: 1;
  transition: var(--ease);
}
.gb-ff-input-key:focus { outline: none; border-color: var(--coral); }

/* Type selector */
.gb-ff-select {
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: .5rem .6rem;
  font-size: .82rem;
  background: var(--white);
  transition: var(--ease);
  white-space: nowrap;
}

/* Old classes kept for compat */
.gb-form-field-top  { display: flex; gap: .4rem; }
.gb-form-field-hint { font-size: .72rem; color: var(--muted); display: flex; align-items: center; gap: .35rem; }
.gb-fc-insert-key {
  background: rgba(var(--coral-rgb),.08);
  color: var(--coral);
  border: 1px solid rgba(var(--coral-rgb),.2);
  border-radius: 4px;
  padding: 1px 6px;
  font-family: monospace;
  font-size: .72rem;
  cursor: pointer;
  transition: var(--ease);
}
.gb-fc-insert-key:hover { background: rgba(var(--coral-rgb),.2); }

/* Template insert buttons toolbar */
.gb-tpl-insert-btn {
  background: rgba(var(--coral-rgb),.08);
  color: var(--coral);
  border: 1px solid rgba(var(--coral-rgb),.2);
  border-radius: 5px;
  padding: 3px 8px;
  font-size: .72rem;
  font-family: monospace;
  cursor: pointer;
  margin: 1px;
  transition: var(--ease);
}
.gb-tpl-insert-btn:hover { background: var(--coral); color: #fff; }

@media (max-width: 900px) {
  .gb-step3-doc-layout { grid-template-columns: 1fr; }
  .gb-step3-doc-right  { position: static; }
}

/* ══ PDF embed in guide page ════════════════════════════════════════════ */
.doc-pdf-embed-wrap {
  margin: 1rem 0 1.5rem;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}
.doc-pdf-embed-label {
  padding: .6rem 1rem;
  font-weight: 600;
  font-size: .85rem;
  background: var(--sand);
  border-bottom: 1px solid var(--border);
}
.doc-pdf-iframe {
  width: 100%;
  height: 600px;
  border: none;
  display: block;
}
@media (max-width: 768px) {
  .doc-pdf-iframe { height: 400px; }
}

/* ══ Premium Form Fields — guide document page ══════════════════════════ */
.pf-field {
  margin-bottom: 1.1rem;
}
.pf-label {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  color: #555;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: .4rem;
}
.pf-input {
  width: 100%;
  border: 2px solid #e8e8e4;
  border-radius: 10px;
  padding: .7rem 1rem;
  font-size: .95rem;
  font-family: 'Onest', Arial, sans-serif;
  background: #fafaf8;
  color: var(--ink);
  box-sizing: border-box;
  transition: border-color .18s, box-shadow .18s, background .18s;
  outline: none;
}
.pf-input::placeholder { color: #bbb; font-size: .88rem; }
.pf-input:focus {
  border-color: var(--coral);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(var(--coral-rgb),.1);
}
.pf-input:not(:placeholder-shown) {
  border-color: #b8e0c8;
  background: #f6fff9;
}
.pf-input[type="date"], .pf-input[type="number"] {
  font-family: monospace;
}

/* Doc preview card upgrades */
.doc-preview-card {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 2px 12px rgba(0,0,0,.04);
}
.doc-preview-actions {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.doc-preview-actions .btn-primary {
  width: 100%;
  padding: .8rem;
  font-size: .95rem;
  border-radius: 10px;
}
.doc-preview-hint {
  text-align: center;
  font-size: .75rem;
  color: var(--muted);
  margin-top: .6rem;
}

/* Live preview styling */
.doc-live-preview {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: .88rem;
  line-height: 1.9;
  background: #fafaf8;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  min-height: 200px;
  max-height: 500px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--ink);
}
.doc-filled-field {
  background: rgba(46,204,113,.15);
  color: #27ae60;
  border-radius: 4px;
  padding: 1px 5px;
  font-weight: 600;
  font-family: 'Onest', Arial, sans-serif;
  font-size: .85rem;
}
.doc-empty-field {
  background: rgba(var(--coral-rgb),.1);
  color: var(--coral);
  border-radius: 4px;
  padding: 1px 5px;
  font-style: italic;
  font-size: .85rem;
}
.doc-preview-badge {
  font-size: .68rem;
  color: var(--muted);
  background: var(--sand);
  padding: 2px 8px;
  border-radius: 50px;
}

/* ══ Doc guide page — new layout ════════════════════════════════════════ */
.doc-form-section {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 2px 12px rgba(0,0,0,.04);
}
.doc-form-title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
  color: var(--ink);
}
.doc-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem 1.25rem;
}
@media (max-width: 600px) { .doc-form-grid { grid-template-columns: 1fr; } }

.doc-preview-section {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
}
.doc-preview-label {
  font-weight: 700;
  font-size: .85rem;
  margin-bottom: .75rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}

.doc-pdf-section {
  border: 1.5px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 1.5rem;
}
.doc-pdf-label {
  padding: .65rem 1rem;
  font-weight: 600;
  font-size: .85rem;
  background: var(--sand);
  border-bottom: 1px solid var(--border);
}
.doc-pdf-iframe {
  width: 100%;
  height: 680px;
  border: none;
  display: block;
}
@media (max-width: 768px) { .doc-pdf-iframe { height: 420px; } }

.btn-wide { width: 100%; padding: .85rem; font-size: .95rem; border-radius: 12px; }

/* ══ GuideBuilder Step3Doc — field cards (quiz-style) ═══════════════════ */
.gbf-card {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  margin-bottom: .75rem;
  overflow: hidden;
  transition: border-color .15s;
}
.gbf-card:hover { border-color: var(--coral); }
.gbf-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--sand);
  padding: .4rem .75rem;
  border-bottom: 1px solid var(--border);
}
.gbf-card-num {
  font-size: .72rem;
  font-weight: 800;
  color: var(--coral);
  background: rgba(var(--coral-rgb),.1);
  padding: 2px 8px;
  border-radius: 50px;
}
.gbf-card-actions { display: flex; gap: .3rem; }
.gbf-card-body { padding: .85rem 1rem 1rem; }
.gbf-row { display: flex; gap: .75rem; align-items: flex-start; }
.gbf-field { display: flex; flex-direction: column; gap: .2rem; }
.gbf-field-wide { flex: 2; }
.gbf-label {
  font-size: .7rem;
  font-weight: 700;
  color: #888;
  text-transform: uppercase;
  letter-spacing: .04em;
}
/* Main question/label input */
.gbf-input {
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: .6rem .85rem;
  font-size: .92rem;
  font-family: 'Onest', Arial, sans-serif;
  background: #fafaf8;
  transition: border-color .15s, background .15s;
  outline: none;
  width: 100%;
  box-sizing: border-box;
}
.gbf-input:focus { border-color: var(--coral); background: #fff; box-shadow: 0 0 0 3px rgba(var(--coral-rgb),.09); }
.gbf-input::placeholder { color: #bbb; font-size: .85rem; }
/* Type selector */
.gbf-select {
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: .55rem .6rem;
  font-size: .85rem;
  background: #fafaf8;
  min-width: 110px;
}
/* Key row */
.gbf-field-key-wrap { flex: 1; }
.gbf-key-row { display: flex; align-items: center; gap: 0; }
.gbf-key-brace {
  color: var(--coral);
  font-family: monospace;
  font-size: 1rem;
  font-weight: 700;
  background: rgba(var(--coral-rgb),.07);
  padding: .5rem .35rem;
  border: 1.5px solid rgba(var(--coral-rgb),.2);
}
.gbf-key-brace:first-child { border-radius: 8px 0 0 8px; border-right: none; }
.gbf-key-brace:last-child  { border-radius: 0 8px 8px 0; border-left:  none; }
.gbf-key-input {
  border: 1.5px solid rgba(var(--coral-rgb),.2);
  border-left: none; border-right: none;
  padding: .5rem .5rem;
  font-size: .88rem;
  font-family: monospace;
  color: var(--coral);
  background: rgba(var(--coral-rgb),.04);
  outline: none;
  flex: 1;
  min-width: 80px;
}
.gbf-key-input:focus { background: rgba(var(--coral-rgb),.08); }
/* Insert button */
.gbf-insert-btn {
  background: rgba(var(--coral-rgb),.08);
  color: var(--coral);
  border: 1.5px solid rgba(var(--coral-rgb),.25);
  border-radius: 8px;
  padding: .5rem .9rem;
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s;
}
.gbf-insert-btn:hover { background: var(--coral); color: #fff; }
/* Empty state */
.gbf-empty {
  text-align: center;
  padding: 2.5rem 1rem;
  background: var(--sand);
  border-radius: 12px;
  color: var(--ink);
}

/* ══ gbStep3Doc new layout ══════════════════════════════════════════════ */
.gbf-fields-section {
  margin-bottom: 1rem;
}
.gbf-template-row {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
@media (max-width: 900px) {
  .gbf-template-row { flex-direction: column; }
}

/* ══ Fix Step3Doc: align template + preview to same top level ═══════════ */
.gbf-template-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: start;
  margin-top: 1rem;
}
.gbf-template-row > div {
  display: flex;
  flex-direction: column;
}
.gbf-template-row .gb-doc-textarea,
.gbf-template-row .gb-doc-preview {
  flex: 1;
  min-height: 280px;
}
@media (max-width: 900px) {
  .gbf-template-row { grid-template-columns: 1fr; }
}

/* ══ 380px — очень маленькие экраны (iPhone SE 1-2 gen) ══════════════ */
@media (max-width: 380px) {
  .header-actions .btn-primary { display: none; }
  .logo-text { font-size: .75rem; }
  /* Guide card в 2 колонках на SE (≈190px/col): прячем описание, компактнее */
  .guide-card-v2       { padding: .7rem .65rem; }
  .guide-card-v2 .guide-desc { display: none; }
  .guide-card-meta     { font-size: .68rem !important; }
}

/* ══ Admin mode: footer скрыт, рабочая область на весь экран ═══════════
   html.is-admin + body.is-admin устанавливаются роутером при /admin
   ДО рендера страницы — гарантирует правильный CSS с первого пикселя.  */

html.is-admin { overflow-x: clip; }
body.is-admin .footer { display: none !important; }
body.is-admin #app          { display: flex; flex-direction: column; }
body.is-admin .admin-layout { flex: 1; min-height: 0; }

/* ── ГЛАВНЫЙ ФИК: settings-sections всегда 1 колонка в admin ──────────
   Два селектора (html + body) + !important: срабатывает при ЛЮБОМ
   viewport и независимо от порядка каскада CSS-файла.
   Решает проблему overflow на iPhone 13 PM когда viewport=535px.       */
html.is-admin .settings-sections,
body.is-admin .settings-sections {
  grid-template-columns: 1fr !important;
}
/* Защита от overflow внутри карточек настроек */
body.is-admin .settings-card  { max-width: 100%; overflow-x: hidden; }
body.is-admin .admin-section  { overflow-x: hidden; }
/* admin-main: clip (не hidden!) чтобы не сломать горизонтальный скролл таблиц */
body.is-admin .admin-main     { overflow-x: clip; }


/* Предотвращаем двойной клик / масштабирование на интерактивных элементах iOS */
@media (max-width: 900px) {
  button, a, input, select, textarea, [onclick], .step-card {
    touch-action: manipulation;
  }
}
/* ── iPhone notch / Dynamic Island: Универсальный фикс ───────────────────────── */
/* 1. Для обычного Safari и мобильных браузеров (env() работает корректно, обычно = 0) */
@media screen and (max-device-width: 500px) {
  :root   { --header-h: calc(56px + env(safe-area-inset-top, 0px)) !important; }
  .header { 
    min-height: var(--header-h) !important;
    padding-top: env(safe-area-inset-top, 0px) !important; 
  }
  .header-container { height: 56px !important; }
}

/* 2. ТОЛЬКО для PWA (приложение на домашнем экране). 
   Страхуем iOS хардкодом в 47px, если система не успела отдать env() */
@media screen and (max-device-width: 500px) and (display-mode: standalone) {
  :root { 
    --header-h: calc(56px + max(47px, env(safe-area-inset-top))) !important; 
  }
  .header {
    padding-top: max(47px, env(safe-area-inset-top)) !important;
    min-height: var(--header-h) !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   Фикс для iOS (iPhone): защита от автозума полей ввода и двойного таба
══════════════════════════════════════════════════════════════════════════════ */
@media screen and (max-width: 850px) {
  
  /* 1. Жестко задаем 16px, чтобы iOS Safari перестал приближать экран при клике.
     Важно перечислить селекторы атрибутов, чтобы перебить специфичность других стилей */
  input, 
  select, 
  textarea, 
  .gk-num,
  input[type="text"], 
  input[type="email"], 
  input[type="password"], 
  input[type="number"], 
  input[type="tel"], 
  input[type="search"] {
    font-size: 16px !important;
  }

  /* 2. Отключаем зум по двойному быстрому тапу (Double-tap Zoom).
     Это делает интерфейс более отзывчивым, как у нативных приложений. */
  button, a, input, select, textarea, [onclick], .step-card {
    touch-action: manipulation !important;
  }
}
/* ── Category access restrictions ─────────────────────────────────────────── */
.cat-main-card--locked { opacity: .72; filter: grayscale(.25); }
.cat-main-card--locked:hover { opacity: .9; filter: grayscale(.1); }
.cat-main-card--locked .cat-main-cta { color: var(--coral); font-size: .78rem; }

/* Обёртка иконки: overflow:visible чтобы бейдж выступал за границу */
.cat-main-card .cat-icon-outer {
  position: relative; display: inline-block;
  /* overflow:visible — замок не обрезается */
}

.cat-lock-badge {
  position: absolute;
  top:  -12px;
  right: -12px;
  font-size: 1.5rem; line-height: 1;
  background: var(--white);
  border-radius: 50%;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.22);
  z-index: 2;
}
/* PNG-иконка замка: картинка заполняет тот же круглый контейнер */
.cat-lock-badge--img img {
  width: 22px; height: 22px; object-fit: contain; display: block;
}

/* ── Upsell Modal ──────────────────────────────────────────────────────────── */
#upgradeModal { display:none; }
#upgradeModal.upsell-open { display:block; }

.upsell-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.55);
  z-index: 1000; backdrop-filter: blur(3px);
  animation: fadeIn .2s ease;
}
.upsell-modal {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(.96);
  z-index: 1001; background: var(--white,#fff);
  border-radius: 20px; padding: 2rem 1.75rem 1.75rem;
  width: min(460px, calc(100vw - 2rem));
  max-height: 90vh; overflow-y: auto;
  box-shadow: 0 24px 60px rgba(0,0,0,.25);
  animation: slideUp .22s ease forwards;
}
@keyframes slideUp {
  from { transform: translate(-50%,-46%) scale(.96); opacity:.6; }
  to   { transform: translate(-50%,-50%) scale(1);   opacity:1; }
}
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.upsell-close {
  position: absolute; top: .9rem; right: .9rem;
  background: var(--sand,#f2f0eb); border: none; border-radius: 50%;
  width: 28px; height: 28px; font-size: .85rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.upsell-icon  { font-size: 2.5rem; text-align: center; margin-bottom: .75rem; }
.upsell-title { font-size: 1.15rem; font-weight: 700; text-align: center; margin-bottom: .4rem; }
.upsell-subtitle {
  font-size: .84rem; color: var(--muted,#888); text-align: center;
  margin-bottom: 1.5rem; line-height: 1.55;
}
.upsell-plans { display: flex; gap: .75rem; flex-wrap: wrap; justify-content: center; }
.upsell-plan-card {
  flex: 1; min-width: 150px; max-width: 200px;
  border: 2px solid var(--border,#e0ddd7); border-radius: 14px;
  padding: 1rem .9rem; text-align: center; cursor: pointer;
  transition: border-color .15s, transform .15s;
}
.upsell-plan-card:hover { border-color: var(--coral,#e8685a); transform: translateY(-2px); }
.upsell-plan-name  { font-weight: 700; font-size: .88rem; margin-bottom: .3rem; }
.upsell-plan-price { font-size: 1.5rem; font-weight: 800; color: var(--coral,#e8685a); }
.upsell-plan-price span { font-size: .75rem; font-weight: 400; color: var(--muted,#888); }
.upsell-feat  { font-size: .74rem; color: var(--muted,#888); margin-top: .25rem; text-align: left; }
.upsell-link  {
  display: block; width: 100%; margin-top: 1rem; padding: .6rem;
  background: none; border: none; color: var(--coral,#e8685a);
  font-size: .82rem; cursor: pointer; text-align: center;
  text-decoration: underline; font-family: inherit;
}

/* ── Cat icon outer wrapper (lock badge outside overflow:hidden) ──────────── */
.cat-icon-outer {
  position: relative; display: inline-flex;
  align-items: center; justify-content: center;
  /* overflow:visible — замок не обрезается границей иконки */
}