:root {
  --color-bg: #FAFAF6;
  --color-surface: #FFFFFF;
  --color-surface-muted: #F1F6F2;
  --color-primary: #2E5E4E;
  --color-primary-dark: #1E3A30;
  --color-accent: #DD7A3E;
  --color-accent-soft: #FBEEE2;
  --color-badge-text: #A0521F;
  --color-hero-gradient-top: #FBF3EA;
  --color-text: #1C2521;
  --color-text-muted: #5B6B64;
  --color-border: #E7EDE9;
  --color-danger: #B3261E;
  --color-danger-soft: #FBEAE9;
  --color-success-soft: #E7F4EC;
  --color-success: #1E6B45;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --shadow-card: 0 1px 2px rgba(20, 40, 30, .04), 0 10px 28px rgba(20, 40, 30, .06);
  --font-sans: "Manrope", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "PT Serif", Georgia, "Times New Roman", serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #14211B;
    --color-surface: #1D2B24;
    --color-surface-muted: #24352C;
    --color-primary: #7FC7A4;
    --color-primary-dark: #EAF3EC;
    --color-accent: #E89A63;
    --color-accent-soft: #3A2A1D;
    --color-badge-text: #E89A63;
    --color-hero-gradient-top: #14211B;
    --color-text: #EDF2EE;
    --color-text-muted: #A9BDB1;
    --color-border: #30443A;
    --color-danger: #E5766D;
    --color-danger-soft: #3A2323;
    --color-success-soft: #1E3A2C;
    --color-success: #7FD9A8;
  }
}
:root[data-theme="dark"] {
  --color-bg: #14211B;
  --color-surface: #1D2B24;
  --color-surface-muted: #24352C;
  --color-primary: #7FC7A4;
  --color-primary-dark: #EAF3EC;
  --color-accent: #E89A63;
  --color-accent-soft: #3A2A1D;
  --color-badge-text: #E89A63;
  --color-hero-gradient-top: #14211B;
  --color-text: #EDF2EE;
  --color-text-muted: #A9BDB1;
  --color-border: #30443A;
  --color-danger: #E5766D;
  --color-danger-soft: #3A2323;
  --color-success-soft: #1E3A2C;
  --color-success: #7FD9A8;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body { font-family: var(--font-sans); color: var(--color-text); background: var(--color-bg); line-height: 1.55; overflow-x: hidden; width: 100%; }
.container { max-width: 1040px; margin: 0 auto; padding: 0 20px; width: 100%; }
h1, h2, h3, h4 { color: var(--color-primary-dark); line-height: 1.2; letter-spacing: -0.01em; }
h1, h2 { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.01em; }
a { color: var(--color-primary); }
img, svg { max-width: 100%; height: auto; }
table { max-width: 100%; }

/* ---------- header / footer ---------- */
.site-header { border-bottom: 1px solid var(--color-border); padding: 18px 0; background: var(--color-surface); }
.header-inner { display: flex; flex-direction: column; gap: 14px; }
.header-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 20px; }
.logo { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 21px; color: var(--color-primary-dark); text-decoration: none; letter-spacing: -0.02em; }
.logo-icon { width: 30px; height: 30px; display: block; }
.header-buttons { display: flex; flex: 1 1 auto; flex-wrap: wrap; gap: 14px; }
.header-buttons .btn { flex: 1 1 0; min-width: 150px; width: auto; white-space: nowrap; }
.site-header nav { display: flex; flex-wrap: wrap; align-items: center; }
.site-header nav a { margin-right: 20px; color: var(--color-text-muted); text-decoration: none; font-weight: 500; font-size: 15px; }
.site-header nav a:hover { color: var(--color-primary); }
/* Иконки соцсетей + переключатель темы — единый ряд из 4 круглых значков под кнопкой
   «Личный кабинет» (по просьбе Игоря — фирменные иконки вместо текстовых ссылок Telegram/VK/MAX). */
.header-social { display: flex; align-items: center; gap: 10px; }
.social-icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-muted); cursor: pointer; text-decoration: none; transition: color .12s ease, border-color .12s ease; }
.social-icon svg { width: 18px; height: 18px; }
.social-icon-telegram svg, .social-icon-vk svg { fill: currentColor; }
.social-icon-telegram:hover { color: #26A5E4; border-color: #26A5E4; }
.social-icon-vk:hover { color: #0077FF; border-color: #0077FF; }
/* MAX — контур настоящего логотипа (SVG с Wikimedia Commons), но в едином монохромном стиле
   кнопки с Telegram/VK/переключателем темы (по правке Игоря — не выбивался цветным фоном). */
.social-icon-max svg { fill: currentColor; }
.social-icon-max:hover { color: #6C4CE0; border-color: #6C4CE0; }
.theme-toggle { color: var(--color-text-muted); }
.theme-toggle:hover { color: var(--color-primary); border-color: var(--color-primary); }
.theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: block; }
}

@media (max-width: 640px) {
  .container { padding: 0 16px; }
  .header-row { justify-content: center; text-align: center; }
  .header-row-top { flex-direction: column; }
  .header-buttons { flex-direction: column; width: 100%; }
  .header-buttons .btn { width: 100%; }
  .header-row-bottom { flex-direction: column; }
  .site-header nav { justify-content: center; }
  .site-header nav a { margin-right: 14px; font-size: 14px; }
  .logo { font-size: 18px; }
  .hero h1 { font-size: 29px; }
  .hero .lead { font-size: 16px; }
  .kabinet-hero h1 { font-size: 24px; }
}


.site-footer { border-top: 1px solid var(--color-border); padding: 44px 0 24px; margin-top: 60px; color: var(--color-text-muted); font-size: 14px; }
.footer-channels { padding-bottom: 28px; margin-bottom: 28px; border-bottom: 1px solid var(--color-border); }
.footer-channels-text { color: var(--color-text-muted); font-size: 14px; margin-bottom: 14px; max-width: 520px; }
.footer-channels-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.footer-inner { display: flex; gap: 48px; flex-wrap: wrap; margin-bottom: 24px; }
.footer-inner a { color: var(--color-text-muted); text-decoration: none; }
.footer-inner a:hover { color: var(--color-primary); }
.footer-inner strong { color: var(--color-primary-dark); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 11px 22px; border-radius: var(--radius-sm); text-decoration: none;
  font-weight: 600; font-size: 15px; cursor: pointer;
  /* Рамка объявлена прозрачной у ВСЕХ кнопок (не только у .btn-outline) — иначе кнопка с реальной
     рамкой (border: 1.5px solid) физически на 3px больше кнопки без рамки (border: none), т.к.
     ширина/высота считается по контенту, box-sizing тут не спасает. Так все .btn одного размера. */
  border: 1.5px solid transparent;
  background: var(--color-surface-muted); color: var(--color-primary-dark);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:hover { background: #E6EFE9; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-dark); }
.btn-accent { background: var(--color-accent); color: #fff; }
.btn-accent:hover { background: #C6672E; }
.btn-secondary { background: var(--color-surface-muted); color: var(--color-text); }
.btn-outline { background: transparent; border-color: var(--color-primary); color: var(--color-primary); }
.btn-outline:hover { background: var(--color-primary); color: #fff; }
.btn-outline-accent { background: transparent; border-color: var(--color-accent); color: var(--color-accent); }
.btn-outline-accent:hover { background: var(--color-accent); color: #fff; }
.btn-unread-reply {
  background: var(--color-accent); color: #fff; font-weight: 800;
  animation: btn-unread-pulse 1.8s ease-in-out infinite;
}
.btn-unread-reply:hover { background: #C6672E; }
@keyframes btn-unread-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(216, 111, 46, .45); }
  50% { box-shadow: 0 0 0 6px rgba(216, 111, 46, 0); }
}
.btn-lg { padding: 15px 30px; font-size: 17px; border-radius: var(--radius-md); }

/* ---------- badges / pills ---------- */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 13px; border-radius: 999px; font-size: 13px; font-weight: 700; }
.badge-trial { background: var(--color-accent-soft); color: var(--color-badge-text); }
.badge-active { background: var(--color-success-soft); color: var(--color-success); }
.badge-expired { background: var(--color-danger-soft); color: var(--color-danger); }
.badge-reviewed { background: var(--color-success-soft); color: var(--color-success); font-size: 12px; padding: 3px 10px; margin-top: 4px; }
.badge-vegan { background: var(--color-surface-muted); color: var(--color-primary); font-size: 12px; padding: 3px 10px; margin-top: 4px; }
.badge-lenten { background: var(--color-accent-soft); color: var(--color-badge-text); font-size: 12px; padding: 3px 10px; margin-top: 4px; }

.progress-track { height: 8px; border-radius: 999px; background: var(--color-border); overflow: hidden; margin: 12px 0; }
.progress-fill { height: 100%; background: var(--color-accent); border-radius: 999px; }

/* ---------- hero ---------- */
.hero { padding: 0; background: linear-gradient(180deg, var(--color-hero-gradient-top) 0%, var(--color-bg) 78%); overflow: hidden; }
.hero-inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: center; padding: 72px 0 68px; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; background: var(--color-accent-soft); color: var(--color-badge-text); padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; margin-bottom: 20px; }
.hero h1 { font-size: 44px; margin-bottom: 18px; color: var(--color-primary-dark); max-width: 560px; text-align: left; }
.hero .lead { font-size: 18px; color: var(--color-text-muted); margin-bottom: 30px; max-width: 480px; text-align: left; }
.hero-cta-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.hero-cta-row .btn-lg { border-radius: 999px; }
.hero-trustline { margin-top: 22px; font-size: 14px; color: var(--color-text-muted); }
.hero-media { position: relative; }
.hero-media img { width: 100%; border-radius: 28px; box-shadow: 0 24px 60px rgba(30, 58, 48, .18); display: block; }
.hero-media::after { content: ""; position: absolute; inset: -14px; border: 1px solid var(--color-border); border-radius: 36px; z-index: -1; }

@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; padding: 48px 0 40px; text-align: center; }
  .hero h1, .hero .lead { text-align: center; margin-left: auto; margin-right: auto; }
  .hero-eyebrow, .hero-cta-row, .hero-trustline { justify-content: center; display: flex; }
  .hero-media { order: -1; max-width: 340px; margin: 0 auto 6px; }
}

/* ---------- phone mockup (личный кабинет — концепт) ---------- */
.phone-mockup-section { padding: 66px 0 74px; background: var(--color-surface-muted); }
.phone-mockup-section .container { display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: center; }
.phone-mockup-copy h2 { font-size: 30px; margin-bottom: 16px; text-align: left; }
.phone-mockup-copy p { color: var(--color-text-muted); font-size: 16px; margin-bottom: 22px; max-width: 440px; }
.phone-mockup-list { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.phone-mockup-list li { padding-left: 28px; position: relative; font-size: 15px; }
.phone-mockup-list li::before {
  content: "✓"; position: absolute; left: 0; top: 1px; width: 18px; height: 18px; line-height: 18px; text-align: center;
  color: #fff; background: var(--color-primary); border-radius: 50%; font-size: 11px; font-weight: 700;
}
.phone-frame { width: 290px; margin: 0 auto; background: #0B140F; border-radius: 46px; padding: 8px; box-shadow: 0 30px 60px rgba(20, 40, 30, .25), 0 0 0 1.5px rgba(255,255,255,.06) inset; position: relative; }
.phone-frame::before { content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 68px; height: 16px; background: #0B140F; border-radius: 10px; z-index: 2; }
.phone-screen { background: var(--color-bg); border-radius: 38px; overflow: hidden; padding: 30px 16px 20px; min-height: 540px; }
.phone-screen .ps-greeting { font-size: 13px; color: var(--color-text-muted); margin-bottom: 2px; }
.phone-screen .ps-name { font-family: var(--font-display); font-size: 19px; color: var(--color-primary-dark); margin-bottom: 16px; }
.phone-screen .ps-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; padding: 14px 16px; margin-bottom: 12px; box-shadow: var(--shadow-card); }
.phone-screen .ps-card h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-muted); margin-bottom: 6px; }
.phone-screen .ps-card p { font-size: 14px; color: var(--color-text); margin: 0; }
.phone-screen .ps-progress { height: 6px; border-radius: 999px; background: var(--color-border); overflow: hidden; margin-top: 8px; }
.phone-screen .ps-progress span { display: block; height: 100%; background: var(--color-accent); border-radius: 999px; }
.phone-screen .ps-meal-photo { width: 100%; height: 84px; object-fit: cover; border-radius: 10px; margin-bottom: 8px; }

@media (max-width: 900px) {
  .phone-mockup-section .container { grid-template-columns: 1fr; text-align: center; }
  .phone-mockup-copy h2 { text-align: center; }
  .phone-mockup-copy p { margin-left: auto; margin-right: auto; }
  .phone-mockup-list { align-items: flex-start; display: inline-flex; text-align: left; }
}

/* ---------- bento sections (landing) ---------- */
.how-it-works, .paid-features, .trust, .home-blog { padding: 60px 0; }
.how-it-works h2, .paid-features h2, .trust h2, .home-blog h2 { text-align: center; margin-bottom: 36px; font-size: 30px; }
.home-blog .post-list { max-width: 720px; margin: 0 auto; }
.home-blog { text-align: center; }
.home-blog .post-card { text-align: left; }

.steps, .features { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; }
.step, .feature-card {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: 26px 24px; box-shadow: var(--shadow-card);
}
.onboarding-icon { font-size: 26px; display: block; margin-bottom: 12px; }
.step-num {
  display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  background: var(--color-primary); color: #fff; border-radius: 50%; margin-bottom: 14px; font-weight: 700;
}
.step h3, .feature-card h3 { font-size: 17px; margin-bottom: 8px; }
.step p, .feature-card p { color: var(--color-text-muted); font-size: 15px; }

.trust ul { list-style: none; max-width: 640px; margin: 0 auto; }
.trust li { padding: 10px 0 10px 30px; position: relative; }
.trust li::before {
  content: "✓"; position: absolute; left: 0; top: 9px; width: 20px; height: 20px; line-height: 20px; text-align: center;
  color: #fff; background: var(--color-primary); border-radius: 50%; font-size: 12px; font-weight: 700;
}

/* ---------- blog ---------- */
.blog-list { padding: 60px 0; }
.post-list { list-style: none; display: flex; flex-direction: column; gap: 14px; margin-top: 20px; }
.post-card { display: flex; align-items: center; gap: 18px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 16px 20px; text-decoration: none; color: inherit; transition: box-shadow .15s ease, border-color .15s ease; }
.post-card:hover { box-shadow: var(--shadow-card); border-color: var(--color-primary); }
.post-card-photo { width: 88px; height: 88px; border-radius: 12px; object-fit: cover; flex-shrink: 0; background: var(--color-surface-muted); }
.post-card-text { display: flex; flex-direction: column; }
.post-card-title { font-weight: 700; font-size: 17px; color: var(--color-text); }
.post-card-excerpt { color: var(--color-text-muted); margin-top: 6px; font-size: 14px; }
.post-detail-photo { width: 100%; max-height: 360px; object-fit: cover; border-radius: var(--radius-md); margin-bottom: 20px; }

.product-list { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.product-card { display: flex; align-items: center; gap: 14px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 10px 16px; text-decoration: none; color: inherit; transition: box-shadow .15s ease, border-color .15s ease; }
.product-card:hover { box-shadow: var(--shadow-card); border-color: var(--color-primary); }
.product-card-photo { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; flex-shrink: 0; background: var(--color-surface-muted); }
.product-card-text { display: flex; flex-direction: column; }
.product-card-name { font-weight: 700; font-size: 16px; color: var(--color-text); }
.product-card-kcal { color: var(--color-text-muted); font-size: 13px; margin-top: 2px; }

.product-search { margin-top: 18px; }
.product-search input {
  width: 100%; box-sizing: border-box; padding: 10px 14px; border-radius: var(--radius-md);
  border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text);
  font-size: 15px; font-family: inherit;
}
.product-search input:focus { outline: none; border-color: var(--color-primary); }

.category-filters { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; margin: 14px 0 22px; }
.category-btn {
  display: flex; align-items: center; justify-content: center; text-align: center; gap: 6px;
  padding: 8px 10px; height: 52px; border-radius: 999px; white-space: normal; line-height: 1.2;
  border: 1.5px solid var(--cat-color, var(--color-border)); background: var(--color-surface);
  color: var(--cat-color, var(--color-text)); font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.category-btn-icon { font-size: 14px; line-height: 1; }
.category-btn:hover { opacity: .85; }
.category-btn.active { background: var(--cat-color, var(--color-primary)); color: #fff; border-color: var(--cat-color, var(--color-primary)); }
.category-btn-all { --cat-color: var(--color-primary); }

.product-list-compact { list-style: none; display: flex; flex-direction: column; margin-top: 8px; border-top: 1px solid var(--color-border); }
.product-row { border-bottom: 1px solid var(--color-border); }
.product-row a { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 7px 4px; text-decoration: none; color: inherit; font-size: 14px; }
.product-row a:hover .product-row-name { color: var(--color-primary); text-decoration: underline; }
.product-row-name { font-weight: 600; color: var(--color-text); }
.product-row-kcal { color: var(--color-text-muted); font-size: 12px; white-space: nowrap; }

.drink-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.drink-card summary.product-card { border: none; background: transparent; cursor: pointer; list-style: none; }
.drink-card summary::-webkit-details-marker { display: none; }
.drink-card .drink-recipe { padding: 0 16px 16px 86px; }
.drink-card[open] summary.product-card { border-bottom: 1px solid var(--color-border); border-radius: var(--radius-md) var(--radius-md) 0 0; }

.post-detail { padding: 60px 0; max-width: 720px; }
.post-detail h1 { font-size: 32px; margin-bottom: 24px; }
.post-content { font-size: 17px; }
.post-content p { margin-bottom: 16px; }
.post-content h2, .post-content h3 { margin: 28px 0 12px; }
.post-content img { max-width: 100%; border-radius: var(--radius-md); margin: 16px 0; }
.post-content ul, .post-content ol { margin: 0 0 16px 22px; }

.product-nutrition-table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 15px; }
.product-nutrition-table th, .product-nutrition-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--color-border); }
.product-nutrition-table th { font-weight: 700; color: var(--color-text-muted); font-size: 13px; }
.product-sources { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--color-border); font-size: 14px; color: var(--color-text-muted); }
.product-sources h3 { font-size: 16px; margin-bottom: 10px; }

/* ---------- login / forms ---------- */
.login-page { padding: 70px 0; max-width: 460px; }
.login-page .auth-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 32px; box-sizing: border-box; max-width: 100%; }
.login-page form { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; width: 100%; box-sizing: border-box; }
.login-page input[type="text"] { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: 18px; letter-spacing: 3px; }
.login-page form button { width: 100%; }
.error { color: var(--color-danger); font-size: 14px; }
.hint { color: var(--color-text-muted); font-size: 14px; }

.kabinet-page { padding: 50px 0; max-width: 520px; }
.kabinet-page.kabinet-dashboard { max-width: 1100px; }

.kabinet-list { list-style: none; margin: 16px 0 30px; }
.kabinet-list li { padding: 7px 0; border-bottom: 1px solid var(--color-border); }

.anketa-form { display: flex; flex-direction: column; gap: 14px; margin-top: 20px; max-width: 420px; }
.anketa-form label { display: flex; flex-direction: column; gap: 5px; font-size: 14px; color: var(--color-text); font-weight: 500; }
.anketa-form input, .anketa-form select { padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: 16px; background: var(--color-surface); }
.anketa-form .checkbox-label { flex-direction: row; align-items: center; gap: 8px; }
.anketa-form .checkbox-label input { width: auto; }

.kabinet-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 0; }
.kabinet-actions .btn { margin: 0; }
.kabinet-subscribe { margin: 16px 0 0; }
.kabinet-logout { margin-top: 36px; }

/* ---------- bento dashboard (личный кабинет) ---------- */
.kabinet-hero { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.kabinet-hero h1 { font-size: 32px; }
.kabinet-hero-text { padding-left: 26px; }
.kabinet-hero-eyebrow { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-muted); margin-bottom: 6px; }
.kabinet-greeting-big { max-width: 480px; }

@media (max-width: 900px) {
  .kabinet-hero { flex-direction: column; align-items: center; text-align: center; }
  .kabinet-hero-text { padding-left: 0; width: 100%; }
  .kabinet-hero-eyebrow { text-align: center; }
  .kabinet-greeting-big { max-width: 100%; }
}

.onboarding-choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin: 24px 0 40px; }
.onboarding-card {
  display: block; text-decoration: none; background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); transition: transform .12s ease, box-shadow .12s ease;
}
.onboarding-card:hover { transform: translateY(-2px); box-shadow: 0 4px 6px rgba(20,40,30,.06), 0 16px 32px rgba(20,40,30,.10); }
.onboarding-card-img { width: 100%; height: 128px; object-fit: cover; display: block; }
.onboarding-card-body { padding: 20px 22px 24px; }
.onboarding-card h3 { font-size: 17px; color: var(--color-primary-dark); margin-bottom: 6px; }
.onboarding-card p { color: var(--color-text-muted); font-size: 14px; }

.bento-grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-flow: row dense; gap: 20px; margin: 0 0 40px; align-items: stretch; }
.bento-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 26px; box-shadow: var(--shadow-card); display: flex; flex-direction: column; }
.bento-card h2 { font-size: 19px; margin-bottom: 6px; }
.bento-card .bento-eyebrow { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-muted); margin-bottom: 6px; }
.bento-wide { grid-column: span 2; }
.bento-card > .hint { margin-bottom: 14px; }
.bento-card-unread { background: rgba(216, 111, 46, .06); border-color: rgba(216, 111, 46, .35); }
.bento-card .kabinet-actions:last-child { margin-top: auto; padding-top: 14px; }

.bento-card.bento-tint-low { background: var(--color-success-soft); transition: background .3s ease; }
.bento-card.bento-tint-medium { background: #FDF3DF; transition: background .3s ease; }
.bento-card.bento-tint-high { background: var(--color-danger-soft); transition: background .3s ease; }

@media (max-width: 760px) {
  .bento-grid { grid-template-columns: 1fr; }
  .bento-wide { grid-column: span 1; }
}

.subscribe-feature-list { list-style: none; margin: 14px 0 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.subscribe-feature-list li { padding-left: 26px; position: relative; font-size: 14px; color: var(--color-text); }
.subscribe-feature-list li::before {
  content: "✓"; position: absolute; left: 0; top: 0; width: 18px; height: 18px; line-height: 18px; text-align: center;
  color: #fff; background: var(--color-success); border-radius: 50%; font-size: 11px; font-weight: 700;
}
.subscribe-price { font-size: 26px; font-weight: 800; color: var(--color-primary-dark); margin: 4px 0 14px; }
.subscribe-price span { font-size: 15px; font-weight: 500; color: var(--color-text-muted); }

.message-card { max-width: 560px; margin: 40px auto; }

/* ---------- analysis ---------- */
.analysis-form {
  display: flex; flex-direction: column; gap: 14px; align-items: flex-start; margin: 20px 0;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: 22px 24px; box-shadow: var(--shadow-card);
}
.file-drop { display: block; width: 100%; padding: 18px; border: 1.5px dashed var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-muted); font-size: 14px; color: var(--color-text-muted); cursor: pointer; }
.analysis-result {
  margin-top: 24px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: 24px 26px; box-shadow: var(--shadow-card);
}
.analysis-result .result-header { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.analysis-result .result-icon { font-size: 22px; }
.analysis-result .result-body p { margin-bottom: 12px; white-space: pre-wrap; }
.analysis-disclaimer { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--color-border); font-size: 13px; color: var(--color-text-muted); }

/* ---------- consultation chat ---------- */
.chat-history { display: flex; flex-direction: column; gap: 14px; margin: 20px 0; }
.chat-msg { display: flex; gap: 10px; align-items: flex-end; max-width: 82%; }
.chat-msg-user { align-self: flex-end; flex-direction: row-reverse; }
.chat-msg-assistant { align-self: flex-start; }
.chat-avatar {
  width: 30px; height: 30px; min-width: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 15px; background: var(--color-surface-muted);
}
.chat-msg-user .chat-avatar { background: var(--color-primary); color: #fff; }
.chat-bubble { border-radius: var(--radius-md); padding: 12px 16px; }
.chat-msg-user .chat-bubble { background: var(--color-primary); color: #fff; border-bottom-right-radius: 4px; }
.chat-msg-assistant .chat-bubble { background: var(--color-surface); border: 1px solid var(--color-border); border-bottom-left-radius: 4px; }
.chat-msg-author { display: none; }
.chat-form {
  display: flex; flex-direction: column; gap: 10px; align-items: flex-start; margin: 20px 0;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: 16px 18px; box-shadow: var(--shadow-card);
}

/* ---------- consultation-nutritionist chat (09.09.2026) — отдельные имена классов, не .chat-msg,
   иначе конфликтует с психологическим чатом выше (там .chat-msg-user задаёт flex-direction:
   row-reverse, из-за этого на мобильном фото "выезжало" сбоку от текста). */
.nutc-msg { display: flex; flex-direction: column; max-width: 85%; padding: 10px 14px; border-radius: 12px; }
.nutc-msg-user { align-self: flex-end; background: var(--color-accent-soft, #E3F0EA); }
.nutc-msg-nutritionist { align-self: flex-start; background: var(--color-surface-alt, #F4F4F0); }
.nutc-msg-meta { font-size: 11px; color: var(--color-text-muted); margin-bottom: 4px; }
.nutc-msg-text { white-space: pre-line; word-break: break-word; }
.nutc-msg-photo { max-width: 220px; width: 100%; border-radius: 8px; margin-top: 8px; display: block; cursor: zoom-in; }
@media (max-width: 480px) {
  .nutc-msg { max-width: 92%; }
  .nutc-msg-photo { max-width: 100%; }
}

.nutc-lightbox {
  position: fixed; inset: 0; background: rgba(0,0,0,.85); z-index: 1000;
  display: flex; align-items: center; justify-content: center; padding: 20px; cursor: zoom-out;
}
.nutc-lightbox img { max-width: 100%; max-height: 100%; border-radius: 6px; }
.chat-form textarea { width: 100%; padding: 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font: inherit; resize: vertical; background: var(--color-bg); }

.tone-note { background: var(--color-surface-muted); border-radius: var(--radius-sm); padding: 12px 16px; margin: 12px 0; font-size: 14px; color: var(--color-text); }

/* ---------- analysis trends ---------- */
.trend-list { display: flex; flex-direction: column; gap: 16px; margin: 16px 0 30px; }
.trend-card { padding: 20px 22px; }
.trend-card-header { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.trend-card-header h3 { font-size: 16px; }
.trend-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.trend-table td { padding: 5px 8px 5px 0; border-bottom: 1px solid var(--color-border); }
.trend-table tr:last-child td { border-bottom: none; }

/* ---------- weight chart ---------- */
.weight-chart-wrap { margin: 10px 0 4px; }
.weight-chart-wrap svg { width: 100%; height: auto; display: block; }
.bento-wide .weight-chart-wrap svg { height: 220px; }
.weight-chart-meta { display: flex; justify-content: space-between; font-size: 13px; color: var(--color-text-muted); margin-top: 6px; }

/* ---------- referral ---------- */
.referral-progress-row { display: flex; align-items: center; gap: 10px; margin: 10px 0 14px; }
.referral-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--color-border); }
.referral-dot.filled { background: var(--color-accent); }
.referral-link-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.referral-link-input { flex: 1; min-width: 200px; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface-muted); font-size: 13px; color: var(--color-text-muted); }

/* ---------- day / week menu ---------- */
.day-menu { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 0 0 6px; }
.meal-card { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 16px 18px; overflow: hidden; background: var(--color-surface); }
.meal-card h3 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-muted); }
.meal-dish-photo { width: 100%; height: 140px; object-fit: cover; border-radius: var(--radius-sm); margin-bottom: 10px; display: block; }
.meal-dish-name { font-weight: 700; margin: 0 0 8px; color: var(--color-primary-dark); }
.meal-ingredients { list-style: none; margin: 0 0 8px; padding: 0; color: var(--color-text-muted); font-size: 14px; }
.meal-ingredients li { padding: 2px 0; }
.meal-kcal { color: var(--color-text-muted); font-size: 14px; margin: 0; }
.meal-total { font-weight: 700; margin: 14px 0 0; }
.day-quality { margin-top: 10px; }
.day-quality-title { margin-bottom: 4px; }
.day-quality-list { list-style: none; margin: 0; padding: 0; color: var(--color-text-muted); font-size: 13px; }
.day-quality-list li { padding: 2px 0; }
.quality-warn { color: var(--color-accent); font-weight: 700; }
.day-quality-details { margin-top: 6px; }
.day-quality-details summary { cursor: pointer; font-size: 13px; }
.day-quality-details .day-quality-list { margin-top: 6px; }
.meal-component { padding: 10px 0; border-top: 1px dashed var(--color-border); }
.meal-component:first-child { padding-top: 0; border-top: none; }
.component-role { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--color-accent); font-weight: 700; margin-bottom: 4px; }
.meal-kcal-total { font-weight: 700; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--color-border); color: var(--color-text); }

.meal-steps { margin: 8px 0; font-size: 14px; color: var(--color-text); }
.meal-steps summary { cursor: pointer; color: var(--color-primary); font-weight: 600; }
.meal-steps ol { margin: 8px 0 0 20px; padding: 0; }
.meal-steps li { padding: 2px 0; }
.meal-swap-form { margin-top: 10px; }
.btn-swap { background: var(--color-surface-muted); color: var(--color-primary); border: 1px solid var(--color-primary); border-radius: var(--radius-sm); padding: 8px 14px; font-size: 14px; cursor: pointer; font-weight: 600; }
.btn-swap:hover { background: #E6EFE9; }
.btn-swap-component { background: transparent; color: var(--color-text-muted); border: 1px dashed var(--color-border); border-radius: var(--radius-sm); padding: 5px 10px; font-size: 12px; cursor: pointer; margin-top: 4px; }
.btn-swap-component:hover { color: var(--color-primary); border-color: var(--color-primary); }

.week-nav { display: flex; gap: 10px; align-items: center; margin: 10px 0 20px; flex-wrap: wrap; }
.week-day { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 16px 18px; margin-bottom: 20px; background: var(--color-surface); }
.week-day h3 { margin: 0 0 4px; }
.week-day .week-day-total { color: var(--color-text-muted); font-size: 14px; margin-bottom: 12px; }
.week-meals { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.week-meal-card { border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 12px 14px; }
.week-meal-card h4 { margin: 0 0 6px; font-size: 13px; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .04em; }
.week-meal-card .meal-dish-photo { height: 110px; }

.shopping-list h2 { margin-top: 24px; }
.shopping-category { margin-bottom: 18px; }
.shopping-category h3 { font-size: 15px; color: var(--color-primary); margin-bottom: 8px; text-transform: capitalize; }
.shopping-items { list-style: none; }
.shopping-items li { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--color-border); }
.shopping-items li span.grams { color: var(--color-text-muted); }

/* ---------- legal pages ---------- */
.legal-page { padding: 48px 0 60px; max-width: 780px; }
.legal-page h1 { font-size: 30px; margin-bottom: 6px; }
.legal-page > p.hint { color: var(--color-text-muted); margin-bottom: 32px; font-size: 15px; }
.legal-page h2 { font-size: 19px; margin: 34px 0 12px; }
.legal-page p { margin-bottom: 12px; font-size: 15px; }
.legal-page ul { margin: 0 0 14px 22px; }
.legal-page li { margin-bottom: 8px; font-size: 15px; }
.legal-page .legal-pending { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 32px; }
.legal-page .legal-pending .badge-pending { display: inline-block; background: var(--color-accent-soft); color: var(--color-accent); border-radius: 100px; padding: 4px 12px; font-size: 13px; font-weight: 600; margin-bottom: 16px; }

/* ---------- products (restrictions / preferences) ---------- */
.kabinet-page .bento-card { margin-bottom: 20px; }
.product-tag-list { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0; }
.product-tag-list li { display: flex; align-items: center; gap: 8px; background: var(--color-surface-muted); border: 1px solid var(--color-border); border-radius: 100px; padding: 8px 8px 8px 16px; font-size: 14px; }
.product-tag-list li form { margin: 0; }
.tag-remove { background: none; border: none; color: var(--color-text-muted); cursor: pointer; font-size: 14px; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.tag-remove:hover { background: var(--color-danger-soft); color: var(--color-danger); }
.product-add-form { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.product-add-form select, .product-add-form input[type="text"] { padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-family: var(--font-sans); font-size: 14px; flex: 1 1 200px; }
.product-add-form .btn { flex: 0 0 auto; }

.meal-fav-form { margin-top: 6px; }
.btn-fav { background: #DCEAE1; color: var(--color-primary); border: 1px solid var(--color-primary); border-radius: var(--radius-sm); padding: 8px 14px; font-size: 14px; cursor: pointer; font-weight: 600; }
.btn-fav:hover { background: #C7DBCE; }

/* ---------- calculator (/calculator, 09.09.2026) — все классы с префиксом calc-, чтобы не
   пересекаться с другими блоками сайта (см. урок с .chat-msg в тот же день). ---------- */
.calc-page { max-width: 760px; }
.calc-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 20px; margin-top: 16px; }
.calc-label { display: block; font-weight: 700; font-size: 14px; color: var(--color-text); margin-bottom: 8px; }
.calc-hint-small { font-size: 12px; color: var(--color-text-muted); font-weight: 400; }

.calc-search-wrap { position: relative; }
#calcSearchInput {
  width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: var(--radius-md);
  border: 1px solid var(--color-border); font-size: 16px; font-family: inherit; background: var(--color-surface); color: var(--color-text);
}
#calcSearchInput:focus { outline: none; border-color: var(--color-primary); }
.calc-search-results {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-card); max-height: 320px; overflow-y: auto;
}
.calc-search-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; border-bottom: 1px solid var(--color-border); }
.calc-search-item:last-child { border-bottom: none; }
.calc-search-item:hover { background: var(--color-surface-muted); }
.calc-search-icon { font-size: 16px; flex-shrink: 0; }
.calc-search-name { flex: 1; font-size: 14px; color: var(--color-text); }
.calc-search-kcal { font-size: 12px; color: var(--color-text-muted); white-space: nowrap; }

#calcIngredientsList { display: flex; flex-direction: column; gap: 10px; }
.calc-ing-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--color-border); }
.calc-ing-row:last-child { border-bottom: none; }
.calc-ing-info { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 160px; }
.calc-ing-icon { font-size: 16px; flex-shrink: 0; }
.calc-ing-name { font-size: 14px; font-weight: 600; color: var(--color-text); overflow-wrap: anywhere; }
.calc-ing-source { font-size: 12px; color: var(--color-text-muted); cursor: help; flex-shrink: 0; }
.calc-ing-controls { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.calc-ing-grams { width: 72px; padding: 7px 8px; border-radius: var(--radius-sm); border: 1px solid var(--color-border); font-size: 14px; font-family: inherit; text-align: right; background: var(--color-surface); color: var(--color-text); }
.calc-ing-unit { min-width: 12px; }
.calc-ing-unit-hint { min-width: 70px; }
.calc-ing-remove { background: none; border: none; color: var(--color-text-muted); font-size: 20px; line-height: 1; cursor: pointer; width: 26px; height: 26px; border-radius: 50%; }
.calc-ing-remove:hover { background: var(--color-danger-soft, #FBEAEA); color: var(--color-danger, #A32F2F); }
.calc-ing-method-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1 0 100%; padding-left: 24px; }
.calc-ing-method { padding: 5px 8px; border-radius: var(--radius-sm); border: 1px solid var(--color-border); font-size: 13px; font-family: inherit; background: var(--color-surface); color: var(--color-text); }
.calc-ing-cooked-hint { color: var(--color-text-muted); }

.calc-options-row { display: flex; flex-wrap: wrap; gap: 20px; }
.calc-options-field { flex: 1 1 220px; }
.calc-options-field input { width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--color-border); font-size: 14px; font-family: inherit; background: var(--color-surface); color: var(--color-text); }

.calc-tabs { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.calc-mode-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.calc-unmatched-list { font-size: 13px; color: var(--color-text); }
.calc-tab { padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--color-border); background: var(--color-surface); color: var(--color-text); font-size: 13px; font-weight: 600; cursor: pointer; }
.calc-tab.active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.calc-results-section { margin-bottom: 14px; }
.calc-results-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-muted); margin-bottom: 8px; }
.calc-results-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 20px; }
.calc-result-row { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--color-border); font-size: 14px; }
.calc-result-label { color: var(--color-text-muted); }
.calc-result-value { font-weight: 600; color: var(--color-text); text-align: right; }
.calc-result-nodata { font-weight: 400; color: var(--color-text-muted); font-style: italic; }
.calc-result-warn { font-size: 11px; font-weight: 400; color: var(--color-accent); cursor: help; }

.calc-hs-row { display: flex; align-items: center; gap: 14px; }
.calc-hs-badge { flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; }
.calc-hs-text { flex: 1; min-width: 0; }
.calc-hs-label { font-size: 15px; font-weight: 700; color: var(--color-text); }
.calc-hs-hint { font-size: 13px; color: var(--color-text-muted); margin-top: 2px; }
.calc-hs-footnote { margin-top: 10px; margin-bottom: 0; }

@media (max-width: 480px) {
  .calc-ing-row { flex-direction: column; align-items: stretch; }
  .calc-ing-controls { justify-content: space-between; }
  .calc-ing-method-row { padding-left: 0; }
  .calc-results-grid { grid-template-columns: 1fr; }
}