/* VVellness — макеты сайта для компьютера (VVELL-1349).
   Палитра — palette_sand.css + светлое стекло неба (sky_light.css) днём и тёмное стекло ночью (premium.css).
   Тема: html[data-sky="day"|"night"], ставит assets/sky.js. */

:root {
  --font-head: 'Unbounded', system-ui, sans-serif;
  --font: 'Manrope', system-ui, sans-serif;

  /* песок (palette_sand.css) */
  --green: #177652; --green-deep: #12694A; --green-fill: #1A855C; --green-tint: #E4EFE5; --green-soft: #4FBF8C;
  --clay: #9C562C; --clay-tint: #F6E9DD; --berry: #B0463B; --yellow: #F2C94C; --yellow-ink: #8A6200; --blue: #3C6E8F;

  /* светлое стекло над дневным небом (sky_light.css) */
  --glass: rgba(255,255,255,.76); --glass-2: rgba(255,255,255,.55); --glass-3: rgba(255,255,255,.38);
  --line: rgba(35,48,42,.13); --line-soft: rgba(35,48,42,.08);
  --ink: #1F2B25; --ink-2: #3F4B44; --ink-3: #4F5B54; --ink-4: #5B665F;
  --chip: rgba(35,48,42,.06);
  --ring-track: rgba(35,48,42,.10);
  --accent: #177652; --accent-2: #12694A;
  --btn-bg: linear-gradient(180deg, #1A855C 0%, #12694A 100%); --btn-ink: #FFFFFF; --btn-shadow: 0 6px 18px rgba(18,105,74,.28), inset 0 1px 0 rgba(255,255,255,.22);
  --streak: linear-gradient(160deg, #B24C04 0%, #A44305 55%, #933818 100%);
  --ai: linear-gradient(115deg, #5E54C8 0%, #7B4FBF 50%, #A8449A 100%);
  --sh: inset 0 1px 0 rgba(255,255,255,.9), 0 10px 30px rgba(40,70,100,.10);
  --sky: linear-gradient(175deg, #A5D0F3 0%, #C9E3F8 45%, #EAF4FC 100%);
  --b1: #8EC3F0; --b2: #BFE0FB; --b3: #CBE6FC; --b4: #FFFFFF;
  --q1: #B0463B; --q2: #C08A1E; --q3: #4FBF8C; --q4: #177652;
  --photo-bg: #FFFFFF;
}
html[data-sky="night"] {
  --green: #5FE0A6; --green-deep: #34D48A; --green-fill: #1D855D; --green-tint: rgba(95,224,166,.16); --green-soft: #5FD3A2;
  --clay: #E09055; --clay-tint: rgba(224,144,85,.14); --berry: #E5766A; --yellow: #E3B85C; --yellow-ink: #E3B85C; --blue: #7FB4D4;
  --glass: rgba(10,16,24,.66); --glass-2: rgba(16,24,34,.55); --glass-3: rgba(255,255,255,.06);
  --line: rgba(255,255,255,.12); --line-soft: rgba(255,255,255,.07);
  --ink: #F2F5F0; --ink-2: #D7DED8; --ink-3: #B9C3BC; --ink-4: #9AA69E;
  --chip: rgba(255,255,255,.07);
  --ring-track: rgba(255,255,255,.12);
  --accent: #5FE0A6; --accent-2: #34D48A;
  --btn-bg: linear-gradient(135deg, #8DF3C4, #5FE0A6); --btn-ink: #06281C; --btn-shadow: 0 6px 22px rgba(95,224,166,.30);
  --streak: linear-gradient(160deg, #B9541C 0%, #A84616 55%, #8E3A14 100%);
  --sh: inset 0 1px 0 rgba(255,255,255,.08), 0 14px 38px rgba(0,0,0,.30);
  --sky: linear-gradient(175deg, #060A1E 0%, #0F1B3D 45%, #17324A 100%);
  --b1: #1B2E6E; --b2: #0F6C7A; --b3: #2A2F7A; --b4: #0B3B4A;
  --q1: #E5766A; --q2: #E3B85C; --q3: #7FD9AE; --q4: #5FE0A6;
  --photo-bg: #FFFFFF;
}

* { box-sizing: border-box; }
html { background: var(--sky) fixed; background-color: #C9E3F8; min-height: 100%; }
html[data-sky="night"] { background-color: #0F1B3D; }
body { margin: 0; font-family: var(--font); color: var(--ink); font-size: 15px; line-height: 1.4; background: transparent; min-width: 1200px; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
img { display: block; }
.num, .h-num { font-family: var(--font-head); font-feature-settings: "tnum"; letter-spacing: -.01em; }

/* ── живое небо: пятна + холст ── */
#sky-blobs { position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; }
#sky-blobs i { position: absolute; display: block; border-radius: 50%; filter: blur(150px); opacity: .55; animation: blob 22s ease-in-out infinite alternate; }
#sky-blobs .b1 { width: 80vw; height: 45vh; left: -18vw; top: -10vh; background: var(--b1); }
#sky-blobs .b2 { width: 70vw; height: 40vh; left: 48vw; top: 6vh; background: var(--b2); animation-duration: 27s; }
#sky-blobs .b3 { width: 95vw; height: 38vh; left: -8vw; top: 46vh; background: var(--b3); animation-duration: 31s; }
#sky-blobs .b4 { width: 65vw; height: 34vh; left: 36vw; top: 72vh; background: var(--b4); animation-duration: 25s; }
html[data-sky="night"] #sky-blobs i { opacity: .5; }
@keyframes blob { from { transform: translate(0,0) scale(1); } to { transform: translate(6vw,4vh) scale(1.08); } }
#sky-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; }

/* ── стекло ── */
.glass { background: var(--glass); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--sh);
  backdrop-filter: blur(20px) saturate(1.15); -webkit-backdrop-filter: blur(20px) saturate(1.15); }
html[data-sky="night"] .glass { backdrop-filter: blur(20px) saturate(.6); -webkit-backdrop-filter: blur(20px) saturate(.6); }
.card { padding: 20px 22px; }
.card-h { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 14px; }
.card-h svg { width: 16px; height: 16px; color: var(--accent); }
.card-h .sp { flex: 1; }
.card-h .more { font-size: 18px; font-weight: 500; color: var(--ink-3); letter-spacing: 0; }
.mut { color: var(--ink-3); }
.mut2 { color: var(--ink-4); }
.ex { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4); opacity: .85; }

/* ── кнопки ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 24px; border-radius: 999px; font-weight: 700; font-size: 15px; white-space: nowrap; }
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: var(--btn-bg); color: var(--btn-ink); box-shadow: var(--btn-shadow); }
.btn-ghost { background: var(--glass); color: var(--ink); border: 1px solid var(--line); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.btn-lg { height: 58px; padding: 0 32px; font-size: 17px; }
.btn-ai { background: var(--ai); color: #fff; box-shadow: 0 8px 24px rgba(123,79,191,.35); }
.icon-btn { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--glass); border: 1px solid var(--line); color: var(--ink); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.icon-btn svg { width: 20px; height: 20px; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 999px; background: var(--chip); border: 1px solid var(--line-soft); font-size: 13.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.chip.on { background: var(--btn-bg); color: var(--btn-ink); border-color: transparent; box-shadow: var(--btn-shadow); }
.chip svg { width: 15px; height: 15px; }
.seg { display: inline-flex; padding: 4px; gap: 4px; border-radius: 999px; background: var(--chip); border: 1px solid var(--line-soft); }
.seg button { height: 38px; padding: 0 20px; border-radius: 999px; font-weight: 700; font-size: 14px; color: var(--ink-3); }
.seg button.on { background: var(--glass); color: var(--ink); box-shadow: 0 0 0 1.5px var(--accent); }

/* ── логотип ── */
.logo { display: flex; align-items: center; gap: 12px; }
.logo-badge { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #5FE0A6, #1A855C 70%); box-shadow: 0 0 0 4px rgba(26,133,92,.18), 0 6px 16px rgba(18,105,74,.3); color: #fff; font-family: var(--font-head); font-weight: 700; font-size: 15px; letter-spacing: -.04em; }
.logo-word { font-family: var(--font-head); font-weight: 700; font-size: 23px; letter-spacing: -.03em; color: var(--ink); }
.logo-word i { font-style: italic; color: var(--accent); font-weight: 700; }

/* ── кольца ── */
.ring { position: relative; display: grid; place-items: center; }
.ring svg { transform: rotate(-90deg); display: block; }
.ring .trk { fill: none; stroke: var(--ring-track); }
.ring .val { fill: none; stroke-linecap: round; filter: drop-shadow(0 2px 4px rgba(18,105,74,.25)); }
.ring .in { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.ring .big { font-family: var(--font-head); font-weight: 600; color: var(--ink); line-height: 1; }
.ring .sub { font-size: 12px; color: var(--ink-3); margin-top: 6px; font-weight: 600; }
.ring-lbl { margin-top: 12px; font-size: 12px; font-weight: 800; letter-spacing: .08em; color: var(--ink); text-align: center; }

/* ── фото товара ── */
.ph { background: var(--photo-bg); border-radius: 14px; overflow: hidden; flex: 0 0 auto; display: grid; place-items: center; }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.ph.contain img { object-fit: contain; }

/* ── оболочка приложения ── */
.app { display: grid; grid-template-columns: 236px minmax(0,1fr); min-height: 100vh; }
.side { position: sticky; top: 0; height: 100vh; padding: 22px 16px 20px; display: flex; flex-direction: column; gap: 6px; border-right: 1px solid var(--line-soft); background: var(--glass-3); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.side .logo { padding: 0 8px 22px; }
.nav a { display: flex; align-items: center; gap: 14px; height: 50px; padding: 0 16px; border-radius: 16px; font-weight: 700; font-size: 15.5px; color: var(--ink-2); }
.nav a svg { width: 22px; height: 22px; }
.nav a.on { background: var(--glass); color: var(--accent-2); box-shadow: var(--sh); border: 1px solid var(--line); }
html[data-sky="night"] .nav a.on { color: var(--accent); }
.nav a .badge { margin-left: auto; min-width: 24px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--chip); font-size: 12px; display: grid; place-items: center; color: var(--ink-2); }
.side .ask { margin: 14px 4px 0; height: 52px; border-radius: 18px; font-size: 15.5px; }
.side .sp { flex: 1; }
.me { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 16px; }
.ava { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #F2C94C, #E09055); display: grid; place-items: center; color: #2A1703; font-weight: 800; font-size: 16px; }
.me b { display: block; font-size: 14.5px; }
.me div span { font-size: 12.5px; color: var(--ink-3); }

.main { padding: 22px 36px 48px; min-width: 0; }
.wrap { max-width: 1180px; margin: 0 auto; }
.top { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.top h1 { font-family: var(--font-head); font-weight: 600; font-size: 30px; letter-spacing: -.02em; margin: 0; }
.top .date { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.top .date button { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-2); }
.top .date svg { width: 18px; height: 18px; }
.top .sp { flex: 1; }
.wx { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 999px; font-weight: 700; }
.wx svg { width: 22px; height: 22px; color: #E8A317; }
html[data-sky="day"] .wx svg { color: #8A5200; }
html[data-sky="night"] .wx svg { color: #E3B85C; }

.grid { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: 20px; }
.s3 { grid-column: span 3; } .s4 { grid-column: span 4; } .s5 { grid-column: span 5; } .s6 { grid-column: span 6; } .s7 { grid-column: span 7; } .s8 { grid-column: span 8; } .s12 { grid-column: span 12; }

/* полосы прогресса */
.bar { height: 8px; border-radius: 99px; background: var(--ring-track); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 99px; background: var(--accent); }

/* качество: 4 ступени */
.q-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.q1 { background: var(--q1); } .q2 { background: var(--q2); } .q3 { background: var(--q3); } .q4 { background: var(--q4); }
.qbadge { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: var(--green-tint); color: var(--accent-2); }
html[data-sky="night"] .qbadge { color: var(--accent); }

/* переключатель темы — для показа */
.theme-btn svg { width: 20px; height: 20px; }

/* подсказка ширины для 1280 */
@media (max-width: 1340px) {
  .main { padding: 20px 24px 40px; }
  .app { grid-template-columns: 212px minmax(0,1fr); }
  .side { padding-left: 12px; padding-right: 12px; }
  .side .logo { padding-left: 4px; gap: 10px; }
  .side .logo-word { font-size: 20px; }
  .side .logo-badge { width: 40px; height: 40px; }
  .grid { gap: 16px; }
}