/* Конфигуратор холста v5 — fotonaholst.ru
   Фирменные цвета: #AC2583 #00AFA4 #E9E9E9 */
* { box-sizing: border-box; }
:root {
  --magenta: #AC2583; --magenta-dark: #8e1c6c; --magenta-light: #c93b9e;
  --magenta-bg: #fdf3f9; --magenta-bg-hover: #fbe7f3;
  --teal: #00AFA4; --teal-dark: #008c83; --teal-light: #2bc4b9;
  --teal-bg: #e6f8f6; --teal-bg-hover: #c2f0eb;
  --grey: #E9E9E9; --bg: #ffffff; --bg-soft: #E9E9E9; --bg-card: #ffffff;
  --text: #1a1a1a; --text-muted: #6b6b6b; --text-light: #9a9a9a;
  --border: #d8d8d8; --border-soft: #e9e9e9;
  --warn-bg: #fff7e6; --warn-border: #ffd596; --warn-text: #ad6800;
  --danger-bg: #fff1f0; --danger-border: #ffa39e; --danger-text: #cf1322;
  --success-bg: #f6ffed; --success-border: #b7eb8f; --success-text: #389e0d;
  --shadow-sm: 0 2px 4px rgba(20,20,20,0.05);
  --shadow-md: 0 4px 12px rgba(20,20,20,0.1);
  --shadow-lg: 0 8px 24px rgba(172,37,131,0.25);
  --shadow-teal: 0 8px 24px rgba(0,175,164,0.25);
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-pill: 999px;
  --bezier: cubic-bezier(0.34, 1.56, 0.64, 1);
}
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PT Sans", Roboto, sans-serif; background: var(--bg-soft); color: var(--text); line-height: 1.55; font-size: 16px; }
@keyframes fnhFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fnhPop { 0% { transform: scale(1); } 50% { transform: scale(1.06); } 100% { transform: scale(1.03); } }
@keyframes fnhSlideDown { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fnhBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes fnhFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* Топбар: НЕ липкий */
.fnh-topbar { background: var(--bg); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.fnh-topbar-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 8px 16px; gap: 12px; }
.fnh-topbar-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); flex-shrink: 0; transition: opacity 0.2s; }
.fnh-topbar-logo:hover { opacity: 0.8; }
.fnh-topbar-logo img { height: 32px; width: auto; display: block; }
.fnh-topbar-actions { display: flex; align-items: center; gap: 8px; }
.fnh-topbar-phone { text-decoration: none; color: var(--magenta); font-weight: 700; font-size: 14px; white-space: nowrap; transition: color 0.2s; display: inline-flex; align-items: center; gap: 4px; }
.fnh-topbar-phone:hover { color: var(--magenta-dark); }
.fnh-topbar-phone svg { width: 14px; height: 14px; }
.fnh-topbar-toggle { background: var(--bg-soft); border: none; width: 40px; height: 40px; border-radius: var(--radius-pill); cursor: pointer; display: flex; align-items: center; justify-content: center; font-family: inherit; color: var(--text); flex-shrink: 0; transition: all 0.25s var(--bezier); }
.fnh-topbar-toggle:hover { background: var(--magenta); color: #fff; transform: scale(1.05); }
.fnh-topbar-toggle.active { background: var(--magenta); color: #fff; transform: rotate(90deg); }

/* Раскрывающаяся шапка */
.fnh-header { background: var(--bg); border-bottom: 1px solid var(--border); max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
.fnh-header.open { max-height: 600px; }
.fnh-header-inner { max-width: 1200px; margin: 0 auto; padding: 18px 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; animation: fnhFadeIn 0.4s ease 0.1s both; }
.fnh-header-info { font-size: 14px; color: var(--text-muted); line-height: 1.5; }
.fnh-header-info strong { color: var(--text); display: block; margin-bottom: 4px; }
.fnh-header-contacts { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.fnh-header-phone-big { text-decoration: none; color: var(--text); font-weight: 700; font-size: 17px; display: inline-flex; align-items: center; gap: 6px; transition: color 0.2s; }
.fnh-header-phone-big:hover { color: var(--magenta); }
.fnh-header-phone-big svg { width: 16px; height: 16px; }
.fnh-header-soc { display: flex; gap: 6px; }
.fnh-header-soc a { width: 38px; height: 38px; border-radius: var(--radius-pill); background: var(--bg-soft); display: flex; align-items: center; justify-content: center; text-decoration: none; color: var(--text); transition: all 0.25s var(--bezier); }
.fnh-header-soc a:hover { background: var(--magenta); color: #fff; transform: translateY(-2px); }
.fnh-header-soc svg { width: 18px; height: 18px; }
.fnh-header-menu { display: flex; gap: 16px; flex-wrap: wrap; width: 100%; padding-top: 14px; margin-top: 14px; border-top: 1px solid var(--border); }
.fnh-header-menu a { text-decoration: none; color: var(--text); font-size: 14px; font-weight: 600; padding: 4px 0; position: relative; transition: color 0.2s; }
.fnh-header-menu a:hover { color: var(--magenta); }

/* Hero */
.fnh-hero { background: linear-gradient(135deg, var(--magenta) 0%, var(--magenta-light) 100%); color: #fff; padding: 28px 16px 22px; position: relative; overflow: hidden; }
.fnh-hero::before { content: ""; position: absolute; top: -50%; right: -10%; width: 400px; height: 400px; background: radial-gradient(circle, rgba(0,175,164,0.25) 0%, transparent 70%); border-radius: 50%; pointer-events: none; }
.fnh-hero-inner { max-width: 1200px; margin: 0 auto; position: relative; }
.fnh-h1 { font-size: clamp(22px, 3.8vw, 34px); line-height: 1.15; font-weight: 800; margin: 0 0 8px; letter-spacing: -0.02em; color: #fff; animation: fnhFadeIn 0.5s ease; }
.fnh-lead { font-size: clamp(14px, 1.8vw, 16px); max-width: 760px; margin: 0 0 16px; opacity: 0.95; animation: fnhFadeIn 0.5s ease 0.1s both; }
.fnh-hero-stats { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; font-weight: 600; animation: fnhFadeIn 0.5s ease 0.2s both; }
.fnh-hero-stat { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.15); padding: 5px 12px 5px 8px; border-radius: var(--radius-pill); }
.fnh-hero-stat svg { width: 16px; height: 16px; flex-shrink: 0; }

.fnh-wrap { max-width: 1200px; margin: 0 auto; padding: 20px 16px; }

/* Help banner: ЛИПКИЙ */
.fnh-help-banner { background: linear-gradient(135deg, var(--teal) 0%, var(--teal-light) 100%); color: #fff; padding: 14px 18px; border-radius: var(--radius-md); margin: 0 0 16px; display: none; align-items: center; gap: 14px; font-size: 14px; box-shadow: var(--shadow-teal); position: sticky; top: 8px; z-index: 50; animation: fnhSlideDown 0.4s ease-out; }
.fnh-help-banner.show { display: flex; flex-wrap: wrap; }
.fnh-help-icon { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.25); display: flex; align-items: center; justify-content: center; flex-shrink: 0; animation: fnhBounce 1.5s ease infinite; }
.fnh-help-icon svg { width: 22px; height: 22px; }
.fnh-help-text { flex: 1; line-height: 1.4; min-width: 200px; }
.fnh-help-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.fnh-help-btn { background: #fff; color: var(--teal-dark); border: none; padding: 9px 16px; border-radius: var(--radius-pill); font-size: 13px; cursor: pointer; font-family: inherit; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: all 0.25s var(--bezier); }
.fnh-help-btn:hover { transform: translateY(-2px) scale(1.02); color: var(--teal-dark); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.fnh-help-btn svg { width: 14px; height: 14px; }
.fnh-help-close { background: transparent; border: none; color: #fff; cursor: pointer; font-size: 24px; padding: 0 6px; line-height: 1; opacity: 0.8; transition: all 0.2s; }
.fnh-help-close:hover { opacity: 1; transform: scale(1.2); }

/* Сетка */
.fnh-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 920px) { .fnh-grid { grid-template-columns: 1fr; gap: 14px; } }

/* Sticky-обёртка для левой колонки */
.fnh-sticky-wrap { position: sticky; top: 80px; }
@media (max-width: 920px) { .fnh-sticky-wrap { position: static; } }

/* Карточки */
.fnh-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px; margin-bottom: 12px; box-shadow: var(--shadow-sm); transition: all 0.25s ease; animation: fnhFadeIn 0.4s ease; }
.fnh-card:hover { box-shadow: var(--shadow-md); }
.fnh-step-num { display: inline-flex; width: 28px; height: 28px; background: linear-gradient(135deg, var(--magenta), var(--magenta-light)); color: #fff; border-radius: 50%; font-weight: 800; font-size: 13px; align-items: center; justify-content: center; margin-right: 10px; flex-shrink: 0; box-shadow: 0 2px 8px rgba(172,37,131,0.3); }
.fnh-step-head { display: flex; align-items: center; margin-bottom: 12px; font-weight: 700; font-size: 15px; color: var(--text); }
.fnh-step-head svg { width: 18px; height: 18px; color: var(--magenta); margin-right: 4px; }
.fnh-h-block { font-size: 16px; font-weight: 800; margin: 0 0 12px; color: var(--text); display: flex; align-items: center; gap: 8px; }
.fnh-h-block svg { width: 20px; height: 20px; color: var(--magenta); }
.fnh-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; font-size: 14px; }
.fnh-row.total { font-size: 22px; font-weight: 800; padding-top: 12px; margin-top: 8px; border-top: 2px solid var(--border); color: var(--magenta); animation: fnhFadeIn 0.4s ease; }
.fnh-row .muted { color: var(--text-muted); display: inline-flex; align-items: center; gap: 6px; }
.fnh-row .muted svg { width: 14px; height: 14px; opacity: 0.6; }
.fnh-hint { font-size: 12px; color: var(--text-muted); text-align: center; margin-top: 8px; }

/* Темы интерьеров */
.fnh-theme-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 8px; }
.fnh-theme-tab { padding: 8px 4px; border: 2px solid var(--border); border-radius: var(--radius-pill); background: #fff; cursor: pointer; font-size: 12px; font-family: inherit; font-weight: 600; color: var(--text-muted); text-align: center; transition: all 0.25s var(--bezier); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.fnh-theme-tab .swatch { width: 28px; height: 14px; border-radius: 4px; border: 1px solid rgba(0,0,0,0.1); }
.fnh-theme-tab.active { background: var(--magenta); color: #fff; border-color: var(--magenta); box-shadow: var(--shadow-lg); }
.fnh-theme-tab.active .swatch { border-color: rgba(255,255,255,0.4); }

/* Комнаты + загрузка своего интерьера */
.fnh-rooms-row { display: flex; gap: 6px; margin-bottom: 10px; align-items: stretch; }
.fnh-rooms { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; flex: 1; }
.fnh-room-tab { padding: 10px 4px; border: 2px solid var(--border); border-radius: var(--radius-md); background: #fff; cursor: pointer; font-size: 12px; font-family: inherit; font-weight: 600; color: var(--text-muted); text-align: center; transition: all 0.25s var(--bezier); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.fnh-room-tab svg { width: 22px; height: 22px; transition: transform 0.3s ease; }
.fnh-room-tab:hover { border-color: var(--teal); color: var(--teal-dark); transform: translateY(-2px); }
.fnh-room-tab.active { background: var(--teal); color: #fff; border-color: var(--teal); box-shadow: var(--shadow-teal); }
.fnh-bg-upload-btn { padding: 8px 12px; border: 2px dashed var(--magenta-light); border-radius: var(--radius-md); background: var(--magenta-bg); cursor: pointer; font-size: 11px; font-family: inherit; font-weight: 700; color: var(--magenta); white-space: nowrap; transition: all 0.2s; display: inline-flex; align-items: center; gap: 6px; }
.fnh-bg-upload-btn:hover { background: var(--magenta-bg-hover); border-color: var(--magenta); }
.fnh-bg-upload-btn svg { width: 16px; height: 16px; }
.fnh-bg-upload-btn.has-bg { border-style: solid; background: var(--magenta); color: #fff; }

/* Сцена */
.fnh-stage { background: var(--bg-soft); border-radius: var(--radius-lg); aspect-ratio: 4/3; position: relative; overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.fnh-stage svg.room-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
.fnh-stage svg.room-svg.active { display: block; animation: fnhFadeIn 0.4s ease; }
.fnh-stage img.custom-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
.fnh-stage.has-custom-bg img.custom-bg { display: block; }
.fnh-stage.has-custom-bg svg.room-svg { display: none !important; }
.fnh-stage-overlay { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Ориентация и форма */
.fnh-orient { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 10px; background: var(--bg-soft); padding: 4px; border-radius: var(--radius-md); }
.fnh-orient-btn { padding: 8px 6px; border: none; border-radius: var(--radius-sm); background: transparent; cursor: pointer; font-size: 12px; font-family: inherit; font-weight: 600; color: var(--text-muted); transition: all 0.25s var(--bezier); display: inline-flex; align-items: center; justify-content: center; gap: 4px; white-space: nowrap; }
.fnh-orient-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.fnh-orient-btn.active { background: #fff; color: var(--magenta); font-weight: 700; box-shadow: var(--shadow-sm); }

/* Модульные */
.fnh-modular-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; }
.fnh-mod-btn { padding: 9px 4px; border: 2px solid var(--border); border-radius: var(--radius-md); background: #fff; cursor: pointer; font-size: 12px; font-family: inherit; font-weight: 700; color: var(--text); text-align: center; transition: all 0.25s var(--bezier); display: flex; flex-direction: column; align-items: center; gap: 4px; line-height: 1.2; }
.fnh-mod-btn svg { width: 32px; height: 18px; color: var(--magenta); }
.fnh-mod-btn .sub { font-size: 10px; color: var(--text-muted); font-weight: 500; }
.fnh-mod-btn:hover { border-color: var(--magenta-light); background: var(--magenta-bg); }
.fnh-mod-btn.active { border-color: var(--magenta); background: var(--magenta); color: #fff; }
.fnh-mod-btn.active svg { color: #fff; }
.fnh-mod-btn.active .sub { color: rgba(255,255,255,0.85); }

.fnh-schemes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; }
.fnh-scheme-btn { padding: 8px 4px; border: 2px solid var(--border); border-radius: var(--radius-sm); background: #fff; cursor: pointer; font-size: 11px; font-family: inherit; font-weight: 600; color: var(--text-muted); text-align: center; transition: all 0.2s; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.fnh-scheme-btn svg { width: 40px; height: 24px; color: var(--text-muted); }
.fnh-scheme-btn:hover { border-color: var(--teal); color: var(--teal-dark); }
.fnh-scheme-btn:hover svg { color: var(--teal); }
.fnh-scheme-btn.active { border-color: var(--teal); background: var(--teal-bg); color: var(--teal-dark); }
.fnh-scheme-btn.active svg { color: var(--teal-dark); }

.fnh-sizes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fnh-size-btn { background: #fff; border: 2px solid var(--border); border-radius: var(--radius-md); padding: 12px 6px; cursor: pointer; font-size: 14px; text-align: center; font-family: inherit; color: var(--text); line-height: 1.3; font-weight: 700; transition: all 0.25s var(--bezier); min-height: 60px; }
.fnh-size-btn:hover { border-color: var(--magenta-light); background: var(--magenta-bg); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.fnh-size-btn.active { border-color: var(--magenta); background: linear-gradient(135deg, var(--magenta), var(--magenta-light)); color: #fff; box-shadow: var(--shadow-lg); transform: scale(1.04); animation: fnhPop 0.4s ease; }
.fnh-size-btn .price { font-size: 12px; display: block; margin-top: 3px; font-weight: 500; opacity: 0.85; }

/* Опции */
.fnh-opts { display: grid; gap: 8px; }
.fnh-opts.c2 { grid-template-columns: 1fr 1fr; }
.fnh-opts.c3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 460px) { .fnh-opts.c3 { grid-template-columns: 1fr; } }
.fnh-opt { padding: 12px 14px; border: 2px solid var(--border); border-radius: var(--radius-md); background: #fff; cursor: pointer; font-size: 14px; text-align: left; font-family: inherit; color: var(--text); line-height: 1.4; font-weight: 700; transition: all 0.25s var(--bezier); min-height: 64px; display: flex; flex-direction: column; gap: 3px; }
.fnh-opt-icon { width: 22px; height: 22px; color: var(--teal); margin-bottom: 4px; transition: transform 0.3s ease; }
.fnh-opt:hover { border-color: var(--teal); background: var(--teal-bg); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.fnh-opt:hover .fnh-opt-icon { transform: scale(1.15) rotate(-5deg); }
.fnh-opt.active { border-color: var(--teal); background: linear-gradient(135deg, var(--teal), var(--teal-light)); color: #fff; box-shadow: var(--shadow-teal); }
.fnh-opt.active .fnh-opt-icon { color: #fff; }
.fnh-opt .sub { font-size: 12px; color: var(--text-muted); display: block; font-weight: 400; }
.fnh-opt.active .sub { color: rgba(255,255,255,0.9); }

/* Загрузка фото */
.fnh-upload { border: 2px dashed var(--magenta-light); border-radius: var(--radius-md); padding: 24px 14px; text-align: center; cursor: pointer; background: var(--magenta-bg); transition: all 0.3s ease; display: block; font-size: 14px; color: var(--text); }
.fnh-upload:hover { background: var(--magenta-bg-hover); border-color: var(--magenta); }
.fnh-upload-icon { width: 42px; height: 42px; margin: 0 auto 8px; color: var(--magenta); animation: fnhFloat 2.5s ease-in-out infinite; }
.fnh-upload strong { font-weight: 700; }
.fnh-upload.has-image { padding: 10px; border-style: solid; border-color: var(--border); background: #fff; animation: fnhFadeIn 0.4s ease; }
.fnh-preview-img { max-width: 100%; max-height: 100px; border-radius: var(--radius-sm); display: block; margin: 0 auto; box-shadow: var(--shadow-sm); }

/* Качество */
.fnh-quality { padding: 14px 16px; border-radius: var(--radius-md); font-size: 13px; margin-top: 12px; line-height: 1.5; border: 1px solid; animation: fnhFadeIn 0.4s ease; display: flex; align-items: flex-start; gap: 10px; }
.fnh-quality svg.quality-icon { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; }
.fnh-quality-content { flex: 1; }
.fnh-quality.ok { background: var(--success-bg); color: var(--success-text); border-color: var(--success-border); }
.fnh-quality.warn { background: var(--warn-bg); color: var(--warn-text); border-color: var(--warn-border); }
.fnh-quality.danger { background: var(--danger-bg); color: var(--danger-text); border-color: var(--danger-border); }
.fnh-quality button { margin-top: 10px; background: var(--magenta); color: #fff; border: none; padding: 10px 18px; border-radius: var(--radius-pill); font-size: 13px; cursor: pointer; font-family: inherit; font-weight: 700; transition: all 0.25s var(--bezier); display: inline-flex; align-items: center; gap: 6px; }
.fnh-quality button svg { width: 14px; height: 14px; }
.fnh-quality button:hover:not(:disabled) { background: var(--magenta-dark); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.fnh-quality button:disabled { background: var(--text-light); cursor: not-allowed; }

/* Селект */
.fnh-select { width: 100%; padding: 12px 14px; border: 2px solid var(--border); border-radius: var(--radius-md); font-family: inherit; font-size: 14px; background: #fff; color: var(--text); cursor: pointer; font-weight: 600; appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23AC2583' d='M6 8L0 0h12z'/></svg>"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; transition: all 0.2s; }
.fnh-select:focus, .fnh-select:hover { outline: none; border-color: var(--magenta); box-shadow: 0 0 0 4px rgba(172,37,131,0.1); }

/* Доп услуги */
.fnh-extras { display: grid; gap: 4px; }
.fnh-extra { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-sm); cursor: pointer; font-size: 14px; font-weight: 600; transition: all 0.2s; border: 1px solid transparent; }
.fnh-extra:hover { background: var(--magenta-bg); border-color: var(--magenta-light); }
.fnh-extra input { margin: 0; cursor: pointer; width: 18px; height: 18px; accent-color: var(--magenta); }
.fnh-extra-icon { width: 20px; height: 20px; color: var(--magenta); flex-shrink: 0; }
.fnh-extra-name { flex: 1; }
.fnh-extra-price { color: var(--magenta); font-size: 13px; font-weight: 700; }

/* Срочность */
.fnh-rush { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--warn-bg); border: 1px solid var(--warn-border); border-radius: var(--radius-md); margin: 0 0 12px; font-size: 14px; cursor: pointer; font-weight: 600; transition: all 0.2s; }
.fnh-rush:hover { background: #fff3d6; }
.fnh-rush input { margin: 0; cursor: pointer; width: 18px; height: 18px; accent-color: var(--magenta); }
.fnh-rush-icon { width: 22px; height: 22px; color: var(--warn-text); }
.fnh-rush-text { color: var(--warn-text); flex: 1; }

/* Кнопки */
.fnh-buttons { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; margin-top: 14px; }
.fnh-btn-primary { background: linear-gradient(135deg, var(--magenta), var(--magenta-light)); color: #fff; border: none; padding: 16px; border-radius: var(--radius-pill); cursor: pointer; font-size: 15px; font-weight: 800; font-family: inherit; transition: all 0.25s var(--bezier); letter-spacing: 0.01em; box-shadow: var(--shadow-md); position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.fnh-btn-primary svg { width: 16px; height: 16px; }
.fnh-btn-primary:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.fnh-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.fnh-btn-ghost { background: linear-gradient(135deg, var(--teal), var(--teal-light)); color: #fff; border: none; padding: 16px; border-radius: var(--radius-pill); cursor: pointer; font-size: 15px; font-family: inherit; font-weight: 700; text-align: center; text-decoration: none; display: flex; align-items: center; justify-content: center; gap: 6px; transition: all 0.25s var(--bezier); box-shadow: var(--shadow-sm); }
.fnh-btn-ghost:hover { transform: translateY(-2px); box-shadow: var(--shadow-teal); color: #fff; }
.fnh-btn-ghost svg { width: 16px; height: 16px; }

/* Форма */
.fnh-form { display: none; padding-top: 16px; border-top: 2px solid var(--border); margin-top: 16px; position: relative; }
.fnh-form.show { display: block; animation: fnhSlideDown 0.4s ease; }
.fnh-form input { width: 100%; padding: 13px 14px; border: 2px solid var(--border); border-radius: var(--radius-md); font-family: inherit; font-size: 15px; margin-bottom: 10px; font-weight: 500; transition: all 0.2s; }
.fnh-form input:focus { outline: none; border-color: var(--magenta); box-shadow: 0 0 0 4px rgba(172,37,131,0.12); }
.fnh-form-note { font-size: 12px; color: var(--text-muted); margin-top: 10px; line-height: 1.5; }

/* Уведомления */
.fnh-success { display: none; padding: 18px 20px; background: var(--success-bg); border: 1px solid var(--success-border); border-radius: var(--radius-md); color: var(--success-text); margin-top: 12px; font-size: 14px; line-height: 1.5; }
.fnh-success.show { display: block; animation: fnhFadeIn 0.4s ease; }
.fnh-success strong { font-size: 15px; display: block; margin-bottom: 6px; font-weight: 800; }
.fnh-error { display: none; padding: 12px 14px; background: var(--danger-bg); border: 1px solid var(--danger-border); border-radius: var(--radius-md); color: var(--danger-text); margin-top: 10px; font-size: 13px; font-weight: 600; }
.fnh-error.show { display: block; animation: fnhFadeIn 0.3s ease; }

/* Mobile sticky bar */
.fnh-mobile-bar { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid var(--border); padding: 10px 14px; box-shadow: 0 -4px 16px rgba(0,0,0,0.08); z-index: 90; align-items: center; gap: 12px; }
.fnh-mobile-bar-info { flex: 1; }
.fnh-mobile-bar-info .label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.fnh-mobile-bar-info .price { font-size: 18px; font-weight: 800; color: var(--magenta); }
.fnh-mobile-bar-btn { background: linear-gradient(135deg, var(--magenta), var(--magenta-light)); color: #fff; border: none; padding: 12px 20px; border-radius: var(--radius-pill); font-weight: 700; font-size: 14px; cursor: pointer; font-family: inherit; box-shadow: var(--shadow-md); transition: transform 0.2s; }
.fnh-mobile-bar-btn:hover { transform: scale(1.05); }
@media (max-width: 920px) { .fnh-mobile-bar { display: flex; } .fnh-wrap { padding-bottom: 90px; } }

/* SEO-блоки */
.fnh-section { background: var(--bg); padding: 40px 16px; }
.fnh-section.alt { background: var(--bg-soft); }
.fnh-section-inner { max-width: 1200px; margin: 0 auto; }
.fnh-h2 { font-size: clamp(22px, 3.5vw, 30px); font-weight: 800; margin: 0 0 8px; letter-spacing: -0.02em; color: var(--text); }
.fnh-h2-sub { font-size: 16px; color: var(--text-muted); margin: 0 0 24px; max-width: 720px; }
.fnh-h3 { font-size: 18px; font-weight: 800; margin: 0 0 8px; color: var(--text); }
.fnh-features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 800px) { .fnh-features { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .fnh-features { grid-template-columns: 1fr; } }
.fnh-feature { background: #fff; padding: 22px; border-radius: var(--radius-lg); border: 1px solid var(--border); transition: all 0.3s ease; }
.fnh-feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--magenta-light); }
.fnh-feature-icon { width: 52px; height: 52px; background: linear-gradient(135deg, var(--magenta), var(--magenta-light)); color: #fff; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; transition: transform 0.3s var(--bezier); }
.fnh-feature:hover .fnh-feature-icon { transform: rotate(-8deg) scale(1.1); }
.fnh-feature-icon svg { width: 26px; height: 26px; }
.fnh-feature p { margin: 0; font-size: 14px; color: var(--text-muted); line-height: 1.5; }
.fnh-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 800px) { .fnh-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .fnh-steps { grid-template-columns: 1fr; } }
.fnh-step-card { background: linear-gradient(135deg, var(--magenta), var(--magenta-light)); color: #fff; padding: 22px; border-radius: var(--radius-lg); transition: all 0.3s ease; }
.fnh-step-card:nth-child(2n) { background: linear-gradient(135deg, var(--teal), var(--teal-light)); }
.fnh-step-card:hover { transform: translateY(-4px) scale(1.02); }
.fnh-step-number { font-size: 32px; font-weight: 800; opacity: 0.5; line-height: 1; margin-bottom: 8px; }
.fnh-step-card h3 { font-size: 17px; margin: 0 0 8px; color: #fff; font-weight: 800; }
.fnh-step-card p { margin: 0; font-size: 14px; opacity: 0.95; line-height: 1.5; }
.fnh-faq { display: grid; gap: 10px; }
.fnh-faq details { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; transition: all 0.2s; }
.fnh-faq details:hover { border-color: var(--magenta-light); box-shadow: var(--shadow-sm); }
.fnh-faq summary { cursor: pointer; padding: 16px 20px; font-weight: 700; list-style: none; position: relative; padding-right: 50px; color: var(--text); display: flex; align-items: center; gap: 10px; }
.fnh-faq summary::-webkit-details-marker { display: none; }
.fnh-faq summary svg.faq-q { width: 18px; height: 18px; color: var(--magenta); flex-shrink: 0; }
.fnh-faq summary::after { content: "+"; position: absolute; right: 18px; top: 14px; width: 26px; height: 26px; background: var(--magenta-bg); border-radius: 50%; font-size: 18px; display: flex; align-items: center; justify-content: center; color: var(--magenta); font-weight: 700; transition: all 0.3s var(--bezier); }
.fnh-faq details[open] summary::after { content: "−"; background: var(--magenta); color: #fff; transform: rotate(180deg); }
.fnh-faq details[open] summary { color: var(--magenta); }
.fnh-faq p { padding: 0 20px 18px 48px; margin: 0; color: var(--text-muted); font-size: 14px; line-height: 1.6; animation: fnhFadeIn 0.3s ease; }
.fnh-reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 800px) { .fnh-reviews { grid-template-columns: 1fr; } }
.fnh-review { background: #fff; padding: 22px; border-radius: var(--radius-lg); border: 1px solid var(--border); transition: all 0.3s ease; }
.fnh-review:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.fnh-review-stars { color: #faad14; font-size: 16px; letter-spacing: 2px; margin-bottom: 10px; }
.fnh-review-text { font-size: 14px; line-height: 1.6; color: var(--text); margin: 0 0 14px; }
.fnh-review-author { font-size: 13px; color: var(--text-muted); font-weight: 600; }

/* Футер */
.fnh-footer-toggle-bar { background: var(--text); color: #fff; text-align: center; padding: 14px; cursor: pointer; font-size: 14px; font-weight: 600; border: none; width: 100%; font-family: inherit; display: flex; align-items: center; justify-content: center; gap: 8px; transition: background 0.2s; }
.fnh-footer-toggle-bar:hover { background: #2a2a2a; }
.fnh-footer-toggle-bar svg { width: 16px; height: 16px; transition: transform 0.3s; }
.fnh-footer-toggle-bar.open svg { transform: rotate(180deg); }
.fnh-footer { background: var(--text); color: rgba(255,255,255,0.85); max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
.fnh-footer.open { max-height: 1000px; padding: 30px 16px; }
.fnh-footer-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 30px; }
@media (max-width: 720px) { .fnh-footer-inner { grid-template-columns: 1fr; gap: 20px; } }
.fnh-footer-col h4 { margin: 0 0 12px; color: #fff; font-size: 15px; font-weight: 700; }
.fnh-footer-col p { margin: 0 0 8px; font-size: 13px; line-height: 1.5; }
.fnh-footer-col a { color: rgba(255,255,255,0.85); text-decoration: none; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; transition: color 0.2s; }
.fnh-footer-col a:hover { color: var(--magenta-light); }
.fnh-footer-col a svg { width: 14px; height: 14px; }
.fnh-footer-bottom { max-width: 1200px; margin: 24px auto 0; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.15); font-size: 12px; color: rgba(255,255,255,0.6); text-align: center; }

@media (max-width: 600px) {
  .fnh-hero { padding: 22px 14px 18px; }
  .fnh-wrap { padding: 14px 12px 90px; }
  .fnh-card { padding: 14px; border-radius: 12px; }
  .fnh-section { padding: 30px 14px; }
  .fnh-rooms { gap: 4px; grid-template-columns: repeat(5, 1fr); }
  .fnh-room-tab { padding: 8px 2px; font-size: 11px; }
  .fnh-room-tab svg { width: 18px; height: 18px; }
  .fnh-rooms-row { flex-wrap: wrap; }
  .fnh-bg-upload-btn { width: 100%; justify-content: center; padding: 8px; font-size: 11px; }
  .fnh-sizes { grid-template-columns: 1fr 1fr; }
  .fnh-buttons { grid-template-columns: 1fr; }
  .fnh-topbar-inner { padding: 8px 12px; }
  .fnh-topbar-phone { font-size: 13px; }
  .fnh-help-banner { padding: 12px 14px; position: relative; top: 0; }
  .fnh-help-actions { width: 100%; }
  .fnh-help-btn { flex: 1; text-align: center; justify-content: center; }
  .fnh-orient { grid-template-columns: 1fr 1fr; }
  .fnh-modular-types { grid-template-columns: 1fr 1fr 1fr; }
  .fnh-schemes { grid-template-columns: 1fr 1fr; }
  .fnh-theme-row { grid-template-columns: 1fr 1fr; }
}

/* ============== Темы интерьеров ============== */
/* Светлая (default) */
[data-theme="light"] .wall { fill: #fdf3f9; }
[data-theme="light"] .floor { fill: #d4b89a; }
[data-theme="light"] .line-edge { stroke: #a08760; }
[data-theme="light"] .cabinet { fill: #1a1a1a; }
[data-theme="light"] .cabinet-up { fill: #ffffff; }
[data-theme="light"] .cabinet-line { stroke: #d8d8d8; }

/* Бежевая */
[data-theme="beige"] .wall { fill: #f0e6d4; }
[data-theme="beige"] .floor { fill: #a89478; }
[data-theme="beige"] .line-edge { stroke: #8a7558; }
[data-theme="beige"] .cabinet { fill: #6b5a42; }
[data-theme="beige"] .cabinet-up { fill: #ede0c4; }
[data-theme="beige"] .cabinet-line { stroke: #c0b095; }

/* Серая */
[data-theme="grey"] .wall { fill: #e9e9e9; }
[data-theme="grey"] .floor { fill: #7a7a7a; }
[data-theme="grey"] .line-edge { stroke: #5a5a5a; }
[data-theme="grey"] .cabinet { fill: #2f2f2f; }
[data-theme="grey"] .cabinet-up { fill: #f5f5f5; }
[data-theme="grey"] .cabinet-line { stroke: #c0c0c0; }

/* Тёмная */
[data-theme="dark"] .wall { fill: #2a2a2a; }
[data-theme="dark"] .floor { fill: #1a1a1a; }
[data-theme="dark"] .line-edge { stroke: #0d0d0d; }
[data-theme="dark"] .cabinet { fill: #4a4a4a; }
[data-theme="dark"] .cabinet-up { fill: #3a3a3a; }
[data-theme="dark"] .cabinet-line { stroke: #5a5a5a; }

/* ============== v6: Прогресс-бар вовлечённости ============== */
.fnh-progress {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 600;
}
.fnh-progress-bar {
  flex: 1;
  height: 6px;
  background: var(--bg-soft);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}
.fnh-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--magenta), var(--teal));
  width: 0%;
  transition: width 0.5s var(--bezier);
  border-radius: 3px;
}
.fnh-progress-percent {
  font-weight: 800;
  color: var(--magenta);
  min-width: 38px;
  text-align: right;
}
.fnh-progress-label { color: var(--text-muted); flex: 0 0 auto; }
@media (max-width: 460px) {
  .fnh-progress-label { display: none; }
}

/* ============== v6: Микро-уведомления (тосты) ============== */
.fnh-toast-stack {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.fnh-toast {
  background: linear-gradient(135deg, var(--teal), var(--teal-light));
  color: #fff;
  padding: 12px 18px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-teal);
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 200px;
  max-width: 320px;
  animation: fnhToastIn 0.4s var(--bezier);
  pointer-events: auto;
}
.fnh-toast.bye { animation: fnhToastOut 0.3s ease forwards; }
.fnh-toast svg { width: 20px; height: 20px; flex-shrink: 0; }
@keyframes fnhToastIn {
  from { opacity: 0; transform: translateX(40px) scale(0.95); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes fnhToastOut {
  to { opacity: 0; transform: translateX(40px); }
}
@media (max-width: 600px) {
  .fnh-toast-stack { left: 16px; right: 16px; top: auto; bottom: 100px; }
  .fnh-toast { max-width: none; }
}

/* ============== v6: Тикер соцдоказа ============== */
.fnh-social-proof {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  margin-bottom: 10px;
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  overflow: hidden;
}
.fnh-social-proof-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--magenta-bg);
  color: var(--magenta);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-weight: 800;
  font-size: 11px;
}
.fnh-social-proof-text {
  flex: 1;
  animation: fnhFadeIn 0.5s ease;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fnh-social-proof-text strong { color: var(--text); font-weight: 700; }
.fnh-social-proof .pulse-dot {
  width: 8px; height: 8px;
  background: var(--teal);
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
}
.fnh-social-proof .pulse-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--teal);
  border-radius: 50%;
  animation: fnhPulseDot 2s ease infinite;
}
@keyframes fnhPulseDot {
  0% { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* ============== v6: Дата доставки (срок) ============== */
.fnh-deadline {
  background: linear-gradient(135deg, #fff7e6, #ffeec2);
  border: 1px solid #ffc53d;
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin: 10px 0;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: var(--warn-text);
}
.fnh-deadline svg { width: 22px; height: 22px; flex-shrink: 0; }
.fnh-deadline strong { font-weight: 800; }

/* ============== v6: Блок "Это подарок" ============== */
.fnh-gift-block {
  background: linear-gradient(135deg, var(--magenta-bg), #fff);
  border: 1px solid var(--magenta-light);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin-bottom: 12px;
}
.fnh-gift-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
  color: var(--magenta);
}
.fnh-gift-toggle input { width: 18px; height: 18px; accent-color: var(--magenta); cursor: pointer; }
.fnh-gift-toggle svg { width: 22px; height: 22px; }
.fnh-gift-content {
  display: none;
  padding-top: 12px;
  margin-top: 12px;
  border-top: 1px dashed var(--magenta-light);
  animation: fnhFadeIn 0.4s ease;
}
.fnh-gift-block.open .fnh-gift-content { display: block; }
.fnh-gift-occasions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 10px;
}
@media (max-width: 460px) { .fnh-gift-occasions { grid-template-columns: 1fr 1fr; } }
.fnh-gift-occ {
  padding: 8px 4px;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
  font-weight: 600;
  color: var(--text);
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.fnh-gift-occ svg { width: 18px; height: 18px; color: var(--magenta); }
.fnh-gift-occ:hover { border-color: var(--magenta-light); background: var(--magenta-bg); }
.fnh-gift-occ.active { border-color: var(--magenta); background: var(--magenta); color: #fff; }
.fnh-gift-occ.active svg { color: #fff; }
.fnh-gift-date { width: 100%; padding: 10px 12px; border: 2px solid var(--border); border-radius: var(--radius-sm); font-family: inherit; font-size: 14px; font-weight: 600; }
.fnh-gift-date:focus { outline: none; border-color: var(--magenta); }
.fnh-gift-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-top: 10px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}
.fnh-gift-wrap input { width: 16px; height: 16px; accent-color: var(--magenta); }
.fnh-gift-wrap svg { width: 18px; height: 18px; color: var(--magenta); }
.fnh-gift-wrap-name { flex: 1; }
.fnh-gift-wrap-price { color: var(--magenta); font-weight: 700; }

/* ============== v6: Подсказки текста ============== */
.fnh-text-suggestions {
  margin-top: 10px;
  padding: 12px;
  background: var(--teal-bg);
  border-radius: var(--radius-md);
  font-size: 13px;
  display: none;
}
.fnh-text-suggestions.show { display: block; animation: fnhFadeIn 0.4s ease; }
.fnh-text-suggestions h4 {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--teal-dark);
  display: flex;
  align-items: center;
  gap: 6px;
}
.fnh-text-suggestions h4 svg { width: 16px; height: 16px; }
.fnh-text-suggestion-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fnh-text-suggestion {
  background: #fff;
  border: 1px solid var(--teal-light);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
  text-align: left;
  font-family: inherit;
  color: var(--text);
  transition: all 0.15s;
  line-height: 1.4;
}
.fnh-text-suggestion:hover { background: var(--teal); color: #fff; transform: translateX(2px); }
.fnh-text-helper-btn {
  background: transparent;
  border: 1px dashed var(--teal);
  color: var(--teal-dark);
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  transition: all 0.2s;
}
.fnh-text-helper-btn:hover { background: var(--teal); color: #fff; border-style: solid; }
.fnh-text-helper-btn svg { width: 14px; height: 14px; }

/* ============== v6: Финальный экран проверки (модалка) ============== */
.fnh-modal {
  position: fixed;
  inset: 0;
  background: rgba(20,20,20,0.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 16px;
  animation: fnhFadeIn 0.3s ease;
}
.fnh-modal.open { display: flex; }
.fnh-modal-content {
  background: #fff;
  border-radius: var(--radius-lg);
  max-width: 540px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 24px;
  animation: fnhSlideDown 0.4s var(--bezier);
}
.fnh-modal h3 {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 10px;
}
.fnh-modal h3 svg { width: 28px; height: 28px; color: var(--magenta); }
.fnh-modal p.lead {
  margin: 0 0 18px;
  color: var(--text-muted);
  font-size: 14px;
}
.fnh-modal-preview {
  background: var(--bg-soft);
  border-radius: var(--radius-md);
  padding: 14px;
  margin-bottom: 14px;
  display: flex;
  gap: 14px;
  align-items: center;
}
.fnh-modal-preview-img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  border: 1px solid var(--border);
}
.fnh-modal-preview-info { flex: 1; min-width: 0; }
.fnh-modal-preview-info strong { display: block; font-size: 15px; margin-bottom: 4px; }
.fnh-modal-preview-info span { color: var(--text-muted); font-size: 13px; }
.fnh-modal-checklist {
  background: var(--bg-soft);
  border-radius: var(--radius-md);
  padding: 14px;
  margin-bottom: 14px;
}
.fnh-modal-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 13px;
}
.fnh-modal-row:not(:last-child) { border-bottom: 1px solid var(--border); }
.fnh-modal-row .label { color: var(--text-muted); }
.fnh-modal-row .value { font-weight: 700; text-align: right; }
.fnh-modal-warning {
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  color: var(--warn-text);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 13px;
  margin-bottom: 14px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-weight: 600;
}
.fnh-modal-warning svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.fnh-modal-actions {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 10px;
}
@media (max-width: 460px) {
  .fnh-modal-actions { grid-template-columns: 1fr; }
}
.fnh-modal-back {
  background: var(--bg-soft);
  color: var(--text);
  border: none;
  padding: 14px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s;
}
.fnh-modal-back:hover { background: var(--border); }
.fnh-modal-confirm {
  background: linear-gradient(135deg, var(--magenta), var(--magenta-light));
  color: #fff;
  border: none;
  padding: 14px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: var(--shadow-md);
  transition: all 0.2s;
}
.fnh-modal-confirm:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.fnh-modal-confirm svg { width: 16px; height: 16px; }

/* ============== v6: Undo-баннер ============== */
.fnh-undo-bar {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--text);
  color: #fff;
  padding: 12px 18px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  z-index: 95;
  display: flex;
  align-items: center;
  gap: 14px;
  opacity: 0;
  pointer-events: none;
  transition: all 0.4s var(--bezier);
}
.fnh-undo-bar.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.fnh-undo-bar button {
  background: var(--magenta);
  color: #fff;
  border: none;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
}
.fnh-undo-bar button:hover { background: var(--magenta-light); }
@media (max-width: 600px) {
  .fnh-undo-bar { bottom: 80px; }
}

/* ============== v7: Компактный выбор темы в углу сцены ============== */
.fnh-theme-corner {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
}
.fnh-theme-trigger {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: linear-gradient(135deg, #f5f0e8 0%, #d4c5a0 33%, #9a9a9a 66%, #2a2a2a 100%);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s var(--bezier);
  position: relative;
}
.fnh-theme-trigger::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.1) inset;
}
.fnh-theme-trigger svg {
  position: relative;
  z-index: 1;
  width: 18px;
  height: 18px;
  color: var(--magenta);
}
.fnh-theme-trigger:hover { transform: scale(1.1); box-shadow: 0 4px 12px rgba(0,0,0,0.35); }
.fnh-theme-tooltip {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  padding: 12px;
  min-width: 200px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: all 0.25s var(--bezier);
  z-index: 11;
}
.fnh-theme-corner:hover .fnh-theme-tooltip,
.fnh-theme-corner.open .fnh-theme-tooltip {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.fnh-theme-tooltip-title {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 8px;
  font-weight: 600;
}
.fnh-theme-tooltip-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}
.fnh-theme-tooltip-btn {
  padding: 8px 10px;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
  font-weight: 600;
  color: var(--text);
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 8px;
}
.fnh-theme-tooltip-btn .swatch {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1px solid rgba(0,0,0,0.1);
  flex-shrink: 0;
}
.fnh-theme-tooltip-btn:hover { border-color: var(--magenta); background: var(--magenta-bg); }
.fnh-theme-tooltip-btn.active {
  border-color: var(--magenta);
  background: var(--magenta);
  color: #fff;
}
.fnh-theme-tooltip-btn.active .swatch { border-color: rgba(255,255,255,0.4); }

@media (max-width: 460px) {
  .fnh-theme-tooltip {
    right: -4px;
    min-width: 180px;
  }
}

/* ============== v7: Поле комментария в форме ============== */
.fnh-form textarea {
  width: 100%;
  padding: 13px 14px;
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 14px;
  margin-bottom: 10px;
  font-weight: 500;
  resize: vertical;
  min-height: 70px;
  transition: all 0.2s;
}
.fnh-form textarea:focus {
  outline: none;
  border-color: var(--magenta);
  box-shadow: 0 0 0 4px rgba(172,37,131,0.12);
}

/* ============== v7: Подсказки ошибок имени/телефона ============== */
.fnh-field-hint {
  font-size: 11px;
  color: var(--text-muted);
  margin: -6px 0 8px;
  padding-left: 4px;
}
.fnh-field-hint.warn { color: var(--warn-text); }


/* ============== v8 (финальная версия): Галерея стилей с реальными картинками ============== */
.fnh-styles-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-bottom: 10px;
  background: var(--bg-soft);
  padding: 4px;
  border-radius: var(--radius-md);
}
.fnh-styles-tab {
  padding: 8px 6px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
  font-weight: 600;
  color: var(--text-muted);
  transition: all 0.2s;
}
.fnh-styles-tab.active {
  background: #fff;
  color: var(--magenta);
  font-weight: 700;
  box-shadow: var(--shadow-sm);
}
.fnh-styles-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  max-height: 360px;
  overflow-y: auto;
  padding: 2px;
}
@media (max-width: 460px) { .fnh-styles-grid { grid-template-columns: repeat(3, 1fr); } }
.fnh-style-tile {
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
  overflow: hidden;
  transition: all 0.2s var(--bezier);
  display: flex;
  flex-direction: column;
  text-align: center;
}
.fnh-style-tile:hover {
  border-color: var(--magenta-light);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.fnh-style-tile.active {
  border-color: var(--magenta);
  box-shadow: var(--shadow-lg);
  transform: scale(1.03);
}
.fnh-style-tile-preview {
  aspect-ratio: 1 / 1;
  width: 100%;
  position: relative;
  overflow: hidden;
  background: var(--bg-soft);
}
.fnh-style-tile-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.fnh-style-tile-preview-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: linear-gradient(135deg, var(--magenta-bg), var(--teal-bg));
  color: var(--magenta);
  font-size: 24px;
  font-weight: 800;
}
.fnh-style-tile-name {
  padding: 6px 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
  background: #fff;
}
.fnh-style-tile.active .fnh-style-tile-name { background: var(--magenta); color: #fff; }

/* ============== v8: Иконка-вопросик с подсказкой ============== */
.fnh-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--bg-soft);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 800;
  cursor: help;
  margin-left: 6px;
  position: relative;
  transition: all 0.2s;
  border: none;
  font-family: inherit;
  flex-shrink: 0;
}
.fnh-info:hover { background: var(--magenta); color: #fff; }
.fnh-info-tip {
  position: absolute;
  bottom: calc(100% + 8px);
  right: -8px;
  background: var(--text);
  color: #fff;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  width: 240px;
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: all 0.2s;
  z-index: 50;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.fnh-info-tip::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 12px;
  border: 6px solid transparent;
  border-top-color: var(--text);
}
.fnh-info:hover .fnh-info-tip,
.fnh-info:focus .fnh-info-tip,
.fnh-info.active .fnh-info-tip {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.fnh-info-tip strong { color: #fff; }
@media (max-width: 460px) {
  .fnh-info-tip { width: 200px; right: -4px; }
}

/* ============== v8: Прогресс-бар кликабельный ============== */
.fnh-progress { cursor: pointer; user-select: none; position: relative; }
.fnh-progress:hover .fnh-progress-fill { filter: brightness(1.1); }
.fnh-progress-steps {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 8px;
  z-index: 60;
  flex-direction: column;
  gap: 4px;
}
.fnh-progress.open .fnh-progress-steps { display: flex; }
.fnh-progress-step {
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--text);
  transition: background 0.15s;
}
.fnh-progress-step:hover { background: var(--magenta-bg); color: var(--magenta); }
.fnh-progress-step-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bg-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
}

/* ============== v8: Метка качества на плитках размеров ============== */
.fnh-size-btn { position: relative; }
.fnh-size-btn .quality-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  z-index: 1;
}
.fnh-size-btn .quality-badge.warn { background: #faad14; }
.fnh-size-btn .quality-badge.danger { background: #cf1322; }
.fnh-size-btn.active .quality-badge { box-shadow: 0 0 0 2px #fff; }

/* ============== v8: Tooltip с торцом при смене натяжки ============== */
.fnh-stretch-preview {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%) translateX(20px);
  background: rgba(20,20,20,0.92);
  color: #fff;
  border-radius: var(--radius-md);
  padding: 12px 14px;
  width: 180px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  opacity: 0;
  pointer-events: none;
  transition: all 0.4s var(--bezier);
  z-index: 12;
  font-size: 12px;
}
.fnh-stretch-preview.show {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
.fnh-stretch-preview-title {
  font-weight: 800;
  margin-bottom: 8px;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.fnh-stretch-preview-title svg { width: 14px; height: 14px; color: var(--teal-light); }
.fnh-stretch-preview-canvas {
  width: 100%;
  aspect-ratio: 16/10;
  background: #fff;
  border-radius: 4px;
  margin-bottom: 8px;
  position: relative;
  overflow: hidden;
}
.fnh-stretch-preview-canvas .face {
  position: absolute;
  inset: 6px 6px 6px 50%;
  background: linear-gradient(135deg, #c93b9e, #00AFA4);
  border-radius: 2px;
}
.fnh-stretch-preview-canvas .side-gallery {
  position: absolute;
  left: 6px; top: 6px; bottom: 6px;
  width: calc(50% - 6px);
  background: linear-gradient(135deg, #c93b9e88, #00AFA488);
  border-right: 1px dashed rgba(255,255,255,0.5);
}
.fnh-stretch-preview-canvas .side-studio-white { background: #fff; border-right: 1px solid var(--border); }
.fnh-stretch-preview-desc { font-size: 11px; line-height: 1.4; color: rgba(255,255,255,0.85); }
@media (max-width: 600px) {
  .fnh-stretch-preview { right: 8px; width: 150px; padding: 10px; }
}

/* ============== v10: Вертикальный сайдбар-шапка слева ============== */
:root {
  --sidebar-w-collapsed: 64px;
  --sidebar-w-expanded: 240px;
  --sidebar-w: var(--sidebar-w-collapsed);
}

/* Когда сайдбар развёрнут — body получает класс */
body.fnh-sidebar-open { --sidebar-w: var(--sidebar-w-expanded); }

/* Сам сайдбар */
.fnh-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--sidebar-w-collapsed);
  background: #fff;
  border-right: 1px solid var(--border);
  z-index: 99;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 8px 0;
  transition: width 0.3s var(--bezier);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.02);
}
body.fnh-sidebar-open .fnh-sidebar {
  width: var(--sidebar-w-expanded);
}

/* Контент страницы смещаем */
body { padding-left: var(--sidebar-w-collapsed); transition: padding-left 0.3s var(--bezier); }
body.fnh-sidebar-open { padding-left: var(--sidebar-w-expanded); }

/* Топбар (текущий горизонтальный) — отключаем, но оставляем в DOM */
.fnh-topbar { display: none !important; }
.fnh-header { display: none !important; }

/* Кнопка-toggle (сверху сайдбара) */
.fnh-sb-toggle {
  width: 40px;
  height: 40px;
  margin: 0 12px 4px;
  border: none;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: all 0.2s;
  position: relative;
  flex-shrink: 0;
}
.fnh-sb-toggle:hover { background: var(--bg-soft); color: var(--magenta); }
.fnh-sb-toggle svg { width: 20px; height: 20px; }

/* Логотип */
.fnh-sb-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  margin-bottom: 8px;
  text-decoration: none;
  color: var(--text);
  border-radius: 8px;
  transition: background 0.2s;
  overflow: hidden;
  height: 48px;
}
.fnh-sb-logo:hover { background: var(--bg-soft); }
.fnh-sb-logo img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  flex-shrink: 0;
}
.fnh-sb-logo-text {
  font-weight: 800;
  font-size: 15px;
  line-height: 1.15;
  white-space: nowrap;
  color: var(--text);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
body.fnh-sidebar-open .fnh-sb-logo-text {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}
.fnh-sb-logo-text small {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Разделитель */
.fnh-sb-divider {
  height: 1px;
  background: var(--border);
  margin: 6px 16px;
  flex-shrink: 0;
}

/* Группа иконок */
.fnh-sb-group { padding: 0; flex-shrink: 0; }

/* Пункт меню (универсальный — для контактов, для меню сайта) */
.fnh-sb-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  margin: 2px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  background: transparent;
  font-family: inherit;
  width: calc(100% - 24px);
  text-align: left;
  transition: all 0.2s;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
}
.fnh-sb-item:hover { background: var(--bg-soft); color: var(--magenta); }
.fnh-sb-item .ico {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--text-muted);
  transition: color 0.2s;
}
.fnh-sb-item:hover .ico { color: var(--magenta); }
.fnh-sb-item .label {
  opacity: 0;
  transform: translateX(-4px);
  transition: all 0.2s;
  pointer-events: none;
}
body.fnh-sidebar-open .fnh-sb-item .label {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

/* Tooltip справа (только в свёрнутом виде) */
.fnh-sb-item .tip {
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
  background: var(--text);
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: all 0.15s;
  z-index: 100;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.fnh-sb-item .tip::before {
  content: "";
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-right-color: var(--text);
}
.fnh-sb-item:hover .tip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
body.fnh-sidebar-open .fnh-sb-item .tip { display: none; }

/* Контактные иконки (фирменный цвет) */
.fnh-sb-item.contact-phone .ico { color: var(--magenta); }
.fnh-sb-item.contact-vk .ico { color: #0077FF; }
.fnh-sb-item.contact-tg .ico { color: #29B6F6; }

/* Подзаголовок группы (виден только в развёрнутом) */
.fnh-sb-group-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-light);
  font-weight: 700;
  padding: 8px 24px 4px;
  white-space: nowrap;
  opacity: 0;
  height: 0;
  overflow: hidden;
  transition: opacity 0.2s, height 0.2s;
}
body.fnh-sidebar-open .fnh-sb-group-title {
  opacity: 1;
  height: auto;
}

/* Spacer чтобы прижать карточку менеджера к низу */
.fnh-sb-spacer { flex: 1; }

/* Карточка менеджера */
.fnh-sb-manager {
  margin: 0 12px;
  padding: 8px;
  border-radius: 12px;
  background: var(--magenta-bg);
  border: 1px solid transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.25s var(--bezier);
  font-family: inherit;
  text-align: left;
  width: calc(100% - 24px);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.fnh-sb-manager:hover {
  background: linear-gradient(135deg, var(--magenta-bg), var(--magenta-bg-hover));
  border-color: var(--magenta-light);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.fnh-sb-manager-photo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}
.fnh-sb-manager-photo-wrap {
  position: relative;
  flex-shrink: 0;
}
.fnh-sb-manager-photo-wrap::after {
  content: "";
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #4caf50;
  border: 2px solid #fff;
}
.fnh-sb-manager-info {
  opacity: 0;
  transform: translateX(-4px);
  transition: all 0.2s;
  pointer-events: none;
  flex: 1;
  min-width: 0;
}
body.fnh-sidebar-open .fnh-sb-manager-info {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}
.fnh-sb-manager-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fnh-sb-manager-role {
  font-size: 11px;
  color: var(--text-muted);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Tooltip для свёрнутого менеджера */
.fnh-sb-manager .tip {
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
  background: var(--text);
  color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: all 0.15s;
  z-index: 100;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.fnh-sb-manager .tip::before {
  content: "";
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-right-color: var(--text);
}
.fnh-sb-manager .tip strong { display: block; margin-bottom: 2px; }
.fnh-sb-manager:hover .tip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
body.fnh-sidebar-open .fnh-sb-manager .tip { display: none; }

/* Режим работы */
.fnh-sb-hours {
  margin: 8px 12px 4px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--bg-soft);
  font-size: 11px;
  color: var(--text-muted);
  display: none;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.4;
}
body.fnh-sidebar-open .fnh-sb-hours { display: flex; }
.fnh-sb-hours svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px; color: var(--teal); }
.fnh-sb-hours strong { color: var(--text); display: block; }

/* Мобильная версия — сайдбар скрыт, выезжает поверх */
@media (max-width: 920px) {
  body { padding-left: 0; }
  body.fnh-sidebar-open { padding-left: 0; }

  .fnh-sidebar {
    transform: translateX(-100%);
    width: var(--sidebar-w-expanded);
    box-shadow: 0 0 24px rgba(0,0,0,0.15);
  }
  body.fnh-sidebar-open .fnh-sidebar {
    transform: translateX(0);
  }

  /* В мобильном развёрнутый вид виден всегда (когда открыт) */
  .fnh-sb-logo-text,
  .fnh-sb-item .label,
  .fnh-sb-manager-info {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
  }
  .fnh-sb-group-title { opacity: 1; height: auto; }
  .fnh-sb-hours { display: flex; }
  .fnh-sb-item .tip,
  .fnh-sb-manager .tip { display: none !important; }

  /* Mobile-only кнопка-гамбургер сверху-слева */
  .fnh-mobile-burger {
    display: flex;
    position: fixed;
    top: 12px;
    left: 12px;
    width: 44px;
    height: 44px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    align-items: center;
    justify-content: center;
    z-index: 95;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
  }
  .fnh-mobile-burger svg { width: 22px; height: 22px; color: var(--text); }

  /* Затемнение фона при открытом сайдбаре */
  .fnh-sb-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 98;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
  }
  body.fnh-sidebar-open .fnh-sb-overlay {
    opacity: 1;
    pointer-events: auto;
  }
}

@media (min-width: 921px) {
  .fnh-mobile-burger { display: none !important; }
  .fnh-sb-overlay { display: none !important; }
}

/* На очень узких экранах кнопка-гамбургер сдвигается чтобы не перекрывать hero */
@media (max-width: 920px) {
  .fnh-hero { padding-top: 60px; }
  .fnh-wrap { padding-top: 16px; }
}