:root {
  --ink: #13335B;
  --ink-soft: #4F6B8C;
  --bg: #E7F7FC;
  --panel: #FFFFFF;
  --line: #CFE9F3;
  --water: #2BB3F0;
  --deep: #1E7FD8;
  --lagoon-1: #36C2EE;
  --lagoon-2: #1767C9;
  --sun: #FFC83D;
  --sun-ink: #7A5200;
  --deep-dark: #0F4F94;  /* «тень» объёмных кнопок */
  --pool-a: #DDF6FF;     /* фон карточки с фигуркой */
  --pool-b: #BDEBFB;
  --pool-c: #9FDDF6;
  --pattern: none;       /* праздничный узор фона */
  --pattern-size: auto;
  --mint: #2FCF97;
  --mint-ink: #0B6B4A;
  --berry: #F2547D;
  --berry-ink: #8F1739;
  --skin: #FFF6EC;
  --radius-xl: 36px;
  --radius-l: 24px;
  --radius-m: 16px;
  --shadow: 0 18px 40px -22px rgba(19, 51, 91, .45);
  --font-display: "Unbounded", "Trebuchet MS", sans-serif;
  --font-body: "Nunito", "Segoe UI", system-ui, sans-serif;
}

/* ---------- Праздничные темы (выбирает администратор) ---------- */
/* Новый год: зимняя ночь, снег, красные акценты */
:root[data-theme="new_year"] {
  --bg: #E8F0FF; --deep: #2A55C9; --deep-dark: #183784;
  --lagoon-1: #4C86F0; --lagoon-2: #1B3A8F;
  --sun: #FFD15C; --berry: #E23D4B;
  --pool-a: #F4F8FF; --pool-b: #DCE8FF; --pool-c: #C3D6FF;
  --pattern:
    radial-gradient(circle, #fff 0 2.5px, transparent 3px),
    radial-gradient(circle, rgba(255, 255, 255, .85) 0 1.5px, transparent 2px);
  --pattern-size: 70px 70px, 41px 41px;
}
/* День всех влюблённых: розовый, сердечки */
:root[data-theme="valentine"] {
  --bg: #FFEFF4; --deep: #D6336C; --deep-dark: #9C1F4D;
  --lagoon-1: #FF8FB1; --lagoon-2: #C92A62;
  --pool-a: #FFF5F8; --pool-b: #FFE0EA; --pool-c: #FFC9DA;
  --line: #F8D3E0;
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M32 44C20 36 23 27 28 27.5C30 27.7 32 29.5 32 31C32 29.5 34 27.7 36 27.5C41 27 44 36 32 44Z' fill='%23FFC2D5'/%3E%3C/svg%3E");
  --pattern-size: 64px 64px;
}
/* 23 Февраля: хаки, звёзды */
:root[data-theme="feb23"] {
  --bg: #EEF2EA; --deep: #3F6236; --deep-dark: #273F21; --ink: #1F3324; --ink-soft: #52665A;
  --lagoon-1: #6F8F5C; --lagoon-2: #2E4A2A;
  --sun: #E3B341; --line: #D6E0D0;
  --pool-a: #F4F7F1; --pool-b: #E1E9DA; --pool-c: #CBD8C1;
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cpath d='M36 24L39 32.5H48L41 37.5L43.5 46L36 41L28.5 46L31 37.5L24 32.5H33Z' fill='%23D9E2D2'/%3E%3C/svg%3E");
  --pattern-size: 72px 72px;
}
/* 8 Марта: мимоза и тюльпаны */
:root[data-theme="march8"] {
  --bg: #FFF7E6; --deep: #D2477F; --deep-dark: #962E59;
  --lagoon-1: #FFB0C7; --lagoon-2: #D9467F;
  --sun: #FFD43B; --line: #F6E2C8;
  --pool-a: #FFFBF2; --pool-b: #FFEFD0; --pool-c: #FFE2B0;
  --pattern:
    radial-gradient(circle, #FFE07A 0 4px, transparent 4.5px),
    radial-gradient(circle, #FFD0DE 0 3px, transparent 3.5px);
  --pattern-size: 56px 56px, 34px 34px;
}
/* Хэллоуин: тыквенный и фиолетовый, тыквы и летучие мыши на фоне */
:root[data-theme="halloween"] {
  --bg: #FFF1E2; --deep: #6E35A8; --deep-dark: #4A1F7A;
  --lagoon-1: #FF9A3C; --lagoon-2: #6E35A8;
  --sun: #FF9A3C; --sun-ink: #6B3500; --berry: #D9367A;
  --line: #F2D8BF;
  --pool-a: #FFF8EF; --pool-b: #FFE6CC; --pool-c: #FFD2A6;
  --pattern:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cellipse cx='30' cy='34' rx='11' ry='9' fill='%23FFD9B3'/%3E%3Crect x='28.5' y='22' width='3' height='5' rx='1' fill='%23E9C9A6'/%3E%3Cpath d='M58 68q5-6 10-1q5-6 10 0q-4 0-5 4q-5-2-10 0q-1-4-5-3z' fill='%23E9D6F2'/%3E%3C/svg%3E");
  --pattern-size: 90px 90px;
}
/* Выходные: бирюзовая вода, солнце, отдых */
:root[data-theme="weekend"] {
  --bg: #E6FAF4; --deep: #0E8F7A; --deep-dark: #08604F;
  --lagoon-1: #3FD6B5; --lagoon-2: #0B7F6C;
  --sun: #FFC83D; --line: #C8EDE2;
  --pool-a: #F2FFFB; --pool-b: #D3F6EC; --pool-c: #B2EBDC;
  --pattern:
    radial-gradient(circle, #FFE8A3 0 5px, transparent 5.5px),
    radial-gradient(circle, rgba(255, 255, 255, .9) 0 2px, transparent 2.5px);
  --pattern-size: 96px 96px, 38px 38px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
  background:
    var(--pattern),
    radial-gradient(circle at 12% 18%, rgba(255, 255, 255, .9) 0 18px, transparent 19px),
    radial-gradient(circle at 86% 9%, rgba(255, 255, 255, .7) 0 10px, transparent 11px),
    radial-gradient(circle at 78% 62%, rgba(255, 255, 255, .6) 0 26px, transparent 27px),
    radial-gradient(circle at 6% 84%, rgba(255, 255, 255, .7) 0 14px, transparent 15px),
    var(--bg);
  background-attachment: fixed;
  background-size: var(--pattern-size), auto, auto, auto, auto, auto;
}
h1, h2, h3 { font-family: var(--font-display); line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: clamp(28px, 5vw, 40px); font-weight: 800; }
h2 { font-size: 22px; font-weight: 700; }
h3 { font-size: 17px; font-weight: 700; }
p { margin: 0 0 1em; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; border-radius: 10px; }
.muted { color: var(--ink-soft); }
.hidden { display: none !important; }

/* ---------- Кнопки и поля ---------- */
.btn {
  appearance: none; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 26px;
  border-radius: 999px;
  font-weight: 800; font-size: 17px;
  background: var(--deep); color: #fff;
  box-shadow: 0 6px 0 var(--deep-dark);
  transition: transform .12s, box-shadow .12s, background .2s, filter .2s;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--deep-dark); }
.btn:disabled { opacity: .55; cursor: progress; }
.btn-sun { background: var(--sun); color: var(--ink); box-shadow: 0 6px 0 #D9A01E; }
.btn-sun:hover { background: #FFD25F; }
.btn-sun:active { box-shadow: 0 2px 0 #D9A01E; }
.btn-ghost { background: transparent; color: var(--ink-soft); box-shadow: none; padding: 0 14px; min-height: 40px; }
.btn-ghost:hover { background: rgba(30, 127, 216, .08); color: var(--ink); }
.btn-ghost:active { transform: none; box-shadow: none; }
.btn-block { width: 100%; }

.field { display: grid; gap: 6px; margin-bottom: 16px; align-content: start; }
.field .chips { margin: 2px 0 0; }
.field label { font-weight: 700; font-size: 15px; }
.input {
  width: 100%; min-height: 52px; padding: 0 18px;
  border: 2px solid var(--line); border-radius: var(--radius-m);
  background: #F7FCFE;
  transition: border-color .2s, background .2s;
}
.input:focus { outline: none; border-color: var(--water); background: #fff; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.error { color: var(--berry-ink); background: #FFE6EC; border-radius: 12px; padding: 10px 14px; font-weight: 700; font-size: 15px; }
.hint { font-size: 14px; color: var(--ink-soft); }

/* ---------- Экран входа ---------- */
.auth {
  min-height: 100vh; display: grid; place-items: center; padding: 24px 16px;
}
.auth-card {
  width: min(920px, 100%);
  display: grid; grid-template-columns: 1.05fr 1fr;
  background: var(--panel); border-radius: var(--radius-xl); overflow: hidden;
  box-shadow: var(--shadow);
}
.auth-hero {
  position: relative; padding: 40px 36px 0; color: #fff;
  background: linear-gradient(170deg, var(--lagoon-1), var(--lagoon-2));
  display: flex; flex-direction: column;
}
.auth-hero h1 { color: #fff; }
.auth-hero p { color: #E4F6FF; max-width: 30ch; font-size: 18px; }
.auth-hero .auth-brand { margin: 0 0 6px; font-family: var(--font-display); font-weight: 800; font-size: 16px; color: #fff; opacity: .85; }
.auth-features { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 8px; color: #fff; font-weight: 700; }
.auth-features li { display: flex; gap: 10px; align-items: center; }
.auth-features span { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 12px; background: rgba(255, 255, 255, .22); font-size: 18px; }
.auth-figures { display: flex; justify-content: center; gap: 4px; margin-top: auto; padding-top: 12px; }
.auth-figures .figure-box { width: 150px; }
.auth-form { padding: 40px 36px; }
.tabs { display: flex; gap: 6px; background: var(--bg); padding: 6px; border-radius: 999px; margin-bottom: 26px; }
.tab {
  flex: 1; border: 0; background: transparent; cursor: pointer;
  min-height: 44px; border-radius: 999px; font-weight: 800; color: var(--ink-soft);
}
.tab[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: 0 4px 12px -6px rgba(19,51,91,.35); }

/* ---------- Каркас приложения ---------- */
.shell { max-width: 1080px; margin: 0 auto; padding: 18px 16px 110px; }
.topbar { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 800; font-size: 20px; }
.brand-drop { width: 34px; height: 34px; }
.level-chip {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px;
  background: var(--sun); color: var(--ink); font-weight: 800; font-size: 15px;
  padding: 6px 14px 6px 8px; border-radius: 999px; border: 0; cursor: pointer;
}
.level-chip b {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: #fff; font-family: var(--font-display); font-size: 13px;
}
.nav {
  display: flex; gap: 6px; background: #fff; padding: 6px; border-radius: 999px;
  box-shadow: var(--shadow); margin-bottom: 22px;
}
.nav button {
  flex: 1; border: 0; background: transparent; cursor: pointer;
  min-height: 46px; border-radius: 999px; font-weight: 800; color: var(--ink-soft);
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.nav button[aria-current="page"] { background: var(--deep-dark); color: #fff; }
.nav .ico { font-size: 18px; }
/* На широком экране пунктов до девяти (у админа): значок над подписью, ширина по длине подписи — всё в одну строку */
@media (min-width: 641px) {
  .nav { gap: 2px; border-radius: 26px; }
  .nav button {
    flex: 1 1 auto; min-width: 0; flex-direction: column; gap: 2px; padding: 0 6px;
    min-height: 58px; border-radius: 20px; font-size: 13px; white-space: nowrap;
  }
  .nav .ico { font-size: 20px; }
}
@media (min-width: 641px) and (max-width: 860px) {
  .nav button { font-size: 11px; padding: 0 3px; }
}

.panel { background: var(--panel); border-radius: var(--radius-l); padding: 24px; box-shadow: var(--shadow); }
.stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-content: start; }

/* ---------- Сегодня ---------- */
.today { display: grid; grid-template-columns: minmax(300px, 420px) 1fr; gap: 22px; align-items: start; }
.lagoon {
  position: relative; overflow: hidden;
  border-radius: var(--radius-xl);
  background: linear-gradient(175deg, var(--pool-a) 0%, var(--pool-b) 55%, var(--pool-c) 100%);
  padding: 22px 22px 30px;
  box-shadow: var(--shadow);
  text-align: center;
}
/* Волна у дна — ниже целей дня, чтобы не просвечивала сквозь последнюю кнопку */
.lagoon::after {
  content: ""; position: absolute; left: -10%; right: -10%; bottom: -34px; height: 60px;
  background: rgba(255, 255, 255, .55); border-radius: 50%;
}
.lagoon .figure-box { position: relative; z-index: 1; width: min(260px, 70%); margin: 0 auto; }
/* Цели дня под фигуркой: сделанное — зелёное с галочкой, остальное — спокойное голубое */
.day-goals { position: relative; z-index: 1; list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 6px; }
.goal-chip {
  width: 100%; display: flex; align-items: center; gap: 8px; text-align: left; cursor: pointer;
  border: 0; border-radius: 14px; padding: 8px 12px; font-weight: 700; font-size: 14px;
  background: rgba(255, 255, 255, .85); color: var(--ink);
}
.goal-chip span { font-size: 18px; }
.tilt-btn {
  position: relative; z-index: 1; margin-top: 10px; border: 2px dashed rgba(30, 127, 216, .45); cursor: pointer;
  background: transparent; color: var(--deep); font-weight: 800; font-size: 14px; padding: 8px 14px; border-radius: 999px;
}
.goal-chip.done { background: #D9F8EC; color: var(--mint-ink); }
.goal-chip.done::after { content: "✓"; margin-left: auto; font-weight: 800; }
.amount {
  position: relative; z-index: 1;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(34px, 7vw, 52px); line-height: 1; margin-top: 4px;
}
.amount small { font-size: .42em; font-weight: 500; color: var(--ink-soft); }
.percent-pill {
  position: relative; z-index: 1;
  display: inline-block; margin-top: 10px; padding: 4px 14px; border-radius: 999px;
  background: #fff; font-weight: 800; color: var(--deep);
}
.percent-pill.done { background: var(--mint); color: #fff; }

.risk-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.risk-badge { font-weight: 800; padding: 4px 12px; border-radius: 999px; font-size: 15px; white-space: nowrap; }
.risk-done { background: #D9F8EC; color: var(--mint-ink); }
.risk-low { background: #DDF3FF; color: #0E5A9C; }
.risk-medium { background: #FFF1CC; color: var(--sun-ink); }
.risk-high { background: #FFE0E8; color: var(--berry-ink); }
/* Полоса дня: фон теплеет к вечеру — отставать перед сном опаснее, чем утром. */
.dayline { position: relative; margin: 18px 0 0; padding-top: 30px; }
.dayline-track {
  position: relative; height: 18px; border-radius: 999px; overflow: hidden;
  background: linear-gradient(90deg, #DDF3FF 0%, #E4F8EE 35%, #FFF1CC 70%, #FFE0E8 100%);
  box-shadow: inset 0 0 0 2px var(--line);
}
.dayline-water, .dayline-gap { position: absolute; top: 0; bottom: 0; left: 0;
  transition: width .8s cubic-bezier(.3, 1.2, .5, 1), left .8s cubic-bezier(.3, 1.2, .5, 1); }
.dayline-water { background: linear-gradient(90deg, #6FDCF7, var(--deep)); border-radius: 999px; }
.dayline-gap { background: repeating-linear-gradient(135deg, var(--gap) 0 6px, transparent 6px 11px); --gap: rgba(255, 200, 61, .9); }
.dayline-gap.gap-high { --gap: rgba(242, 84, 125, .75); }
.dayline-now {
  position: absolute; top: 0; bottom: 18px; width: 0; z-index: 1;
  transition: left .8s cubic-bezier(.3, 1.2, .5, 1);
}
.dayline-now::after {  /* штрих «сейчас» поверх полосы */
  content: ""; position: absolute; left: -2px; top: 24px; width: 4px; height: 30px;
  border-radius: 2px; background: var(--ink);
}
.dayline-now span {
  position: absolute; top: 0; left: 0; transform: translateX(-50%); white-space: nowrap;
  font-size: 13px; font-weight: 800; color: #fff; background: var(--ink);
  padding: 2px 9px; border-radius: 999px;
}
.dayline-now[data-edge="start"] span { transform: translateX(-6px); }
.dayline-now[data-edge="end"] span { transform: translateX(calc(-100% + 6px)); }
.dayline-ticks { position: relative; height: 22px; margin-top: 6px; font-size: 13px; color: var(--ink-soft); }
.dayline-ticks .tick { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.dayline-ticks .tick.edge { transform: none; font-weight: 700; color: var(--ink); }
.dayline-ticks .tick.end { transform: translateX(-100%); }
.dayline-note { margin: 6px 0 0; font-size: 14px; color: var(--ink-soft); }
.risk-text { margin: 14px 0 0; font-size: 17px; }

.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.fact { background: var(--bg); border-radius: var(--radius-m); padding: 12px 14px; }
.fact b { display: block; font-family: var(--font-display); font-size: 20px; font-weight: 700; }
.fact span { font-size: 14px; color: var(--ink-soft); }

.glasses { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 6px 0 16px; }
.glass {
  border: 2px solid var(--line); background: #F7FCFE; cursor: pointer;
  border-radius: 18px 18px 26px 26px; padding: 10px 4px 8px;
  display: grid; justify-items: center; gap: 2px; font-weight: 800;
  transition: border-color .15s, background .15s, transform .12s;
}
.glass:hover { border-color: var(--water); background: #fff; }
.glass:active { transform: scale(.95); }
.glass svg { width: 26px; height: 32px; }
.glass small { font-size: 12px; color: var(--ink-soft); font-weight: 700; }
.custom { display: flex; gap: 10px; }
.custom .input { flex: 1; min-width: 0; }

.log { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.log li { display: flex; align-items: center; gap: 12px; padding: 10px 6px 10px 14px; background: var(--bg); border-radius: 14px; }
.log .t { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink-soft); width: 48px; }
.log .v { font-weight: 800; flex: 1; }
.icon-btn { border: 0; background: transparent; cursor: pointer; width: 38px; height: 38px; border-radius: 50%; color: var(--ink-soft); font-size: 20px; }
.icon-btn:hover { background: #FFE0E8; color: var(--berry-ink); }
.empty { text-align: center; color: var(--ink-soft); padding: 8px 0; }

/* ---------- История ---------- */
.chart { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: end; gap: 4px; height: 220px; margin: 12px 0 8px; position: relative; }
.bar-wrap { position: relative; height: 100%; display: flex; align-items: flex-end; }
.bar { width: 100%; border-radius: 8px 8px 4px 4px; background: #9FDDF6; min-height: 3px; transition: height .6s; }
.bar.met { background: linear-gradient(180deg, #5BE3B3, var(--mint)); }
.bar.today { background: linear-gradient(180deg, #6FDCF7, var(--deep)); }
.goal-tick { position: absolute; left: -2px; right: -2px; height: 3px; background: var(--ink); border-radius: 2px; opacity: .35; }
.chart-labels { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; font-size: 11px; color: var(--ink-soft); text-align: center; }
.legend { display: flex; flex-wrap: wrap; gap: 16px; font-size: 14px; color: var(--ink-soft); }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 4px; margin-right: 6px; vertical-align: -1px; }
.days { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.days li { display: grid; grid-template-columns: 1fr auto 26px; gap: 12px; align-items: center; padding: 10px 14px; border-radius: 14px; background: var(--bg); }
.days .ok { color: var(--mint-ink); font-weight: 800; }

/* ---------- Достижения ---------- */
.level-card {
  border-radius: var(--radius-xl); padding: 28px; color: var(--ink);
  background: linear-gradient(160deg, #FFE27A, var(--sun));
  box-shadow: var(--shadow);
  display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center;
}
.level-num {
  width: 96px; height: 96px; border-radius: 50%; background: #fff;
  display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 40px;
  box-shadow: inset 0 -6px 0 rgba(217, 160, 30, .35);
}
.level-card h2 { font-size: 26px; margin-bottom: 4px; }
.xp { height: 14px; border-radius: 999px; background: rgba(255, 255, 255, .6); overflow: hidden; margin: 10px 0 6px; }
.xp div { height: 100%; background: var(--ink); border-radius: 999px; transition: width .8s; }
.streaks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.badge { background: #fff; border-radius: var(--radius-l); padding: 18px 14px; text-align: center; box-shadow: var(--shadow); }
.badge .em { font-size: 38px; display: block; margin-bottom: 6px; }
.badge h3 { font-size: 14px; margin-bottom: 4px; }
.badge p { font-size: 13px; color: var(--ink-soft); margin: 0; }
.badge.locked { background: rgba(255, 255, 255, .55); box-shadow: none; border: 2px dashed var(--line); }
.badge.locked .em { filter: grayscale(1); opacity: .35; }

/* ---------- Профиль ---------- */
.profile-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 22px; align-items: start; }
.sex-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
.sex-opt { position: relative; cursor: pointer; }
.sex-opt input { position: absolute; opacity: 0; inset: 0; }
.sex-opt span {
  display: grid; justify-items: center; gap: 4px; padding: 12px 8px 14px;
  border-radius: var(--radius-l); border: 3px solid var(--line); background: #F7FCFE; font-weight: 800;
  transition: border-color .15s, background .15s;
}
.sex-opt .figure-box { width: 74px; }
.sex-opt input:checked + span { border-color: var(--deep); background: #E3F3FF; }
.sex-opt input:focus-visible + span { outline: 3px solid var(--sun); outline-offset: 3px; }
.goal-preview { border-radius: var(--radius-l); padding: 20px; background: linear-gradient(170deg, var(--lagoon-1), var(--lagoon-2)); color: #fff; }
.goal-preview b { display: block; font-family: var(--font-display); font-size: 40px; line-height: 1.1; margin: 4px 0; }
.goal-preview p { color: #E4F6FF; margin: 0; font-size: 15px; }
.onboard { max-width: 760px; margin: 0 auto; padding: 28px 16px 60px; }

/* ---------- Фигурка ---------- */
.figure { display: block; width: 100%; height: auto; overflow: visible; }
.figure .outline > * { fill: var(--ink); stroke: var(--ink); stroke-width: 12; stroke-linejoin: round; }
.figure .body > * { fill: var(--skin); }
.figure .water { transition: transform 1.4s cubic-bezier(.35, 1.2, .5, 1); }
.figure .wave path { fill: #6FDCF7; }
.figure .wave-back path { fill: #A9EBFB; }
.figure .wave-front { animation: wave 3.2s linear infinite; }
.figure .wave-back { animation: wave 5s linear infinite reverse; }
.figure .drop { fill: #4FC3EE; stroke: rgba(255, 255, 255, .55); stroke-width: .8; }
.figure.sloshing .wave-front { animation-duration: .9s; }
.figure.sloshing .wave-back { animation-duration: 1.4s; }
.figure .bubbles circle { fill: rgba(255, 255, 255, .7); animation: bubble 4.5s ease-in infinite; opacity: 0; }
.figure .hair { fill: #7A4428; stroke: var(--ink); stroke-width: 5; stroke-linejoin: round; }
.figure .tie { fill: var(--berry); stroke: var(--ink); stroke-width: 3; }
.figure .bow { fill: var(--berry); stroke: var(--ink); stroke-width: 4; stroke-linejoin: round; }
.figure .eye { fill: var(--ink); }
.figure .glint { fill: #fff; }
.figure .cheek { fill: #FF8FAB; opacity: .55; }
.figure .lash { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; fill: none; }
.figure .mouth { fill: none; stroke: var(--ink); stroke-width: 5; stroke-linecap: round; }
/* Эмоции */
.figure .eye-arc, .figure .brow { fill: none; stroke: var(--ink); stroke-width: 5; stroke-linecap: round; }
.figure .brow { stroke-width: 4; }
.figure .mouth-open { fill: var(--ink); stroke: var(--ink); stroke-width: 4; stroke-linejoin: round; }
.figure .tongue { fill: #FF8FAB; }
.figure .mouth-o { fill: var(--ink); }
.figure .sweat { fill: #A9EBFB; stroke: var(--ink); stroke-width: 2.5; animation: sweat 2.4s ease-in-out infinite; }
.figure[data-mood="joy"] .cheek { opacity: .9; }
@keyframes sweat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
/* Награды на фигурке */
.figure .ribbon { fill: none; stroke: var(--berry); stroke-width: 6; stroke-linecap: round; }
.figure .medal { fill: var(--sun); stroke: var(--ink); stroke-width: 3; }
.figure .medal-drop { fill: var(--water); stroke: var(--ink); stroke-width: 1.5; }
.figure .pill-a { fill: var(--mint); }
.figure .pill-b { fill: #fff; }
.figure .pill-line { fill: none; stroke: var(--ink); stroke-width: 3; }
.figure .star { fill: var(--sun); stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; animation: twinkle 3s ease-in-out infinite; transform-origin: 180px 36px; }
.figure .badge-new { animation: badge-in .7s cubic-bezier(.3, 1.6, .5, 1); transform-box: fill-box; transform-origin: center; }
@keyframes badge-in { from { transform: scale(0); opacity: 0; } }
@keyframes twinkle { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.12) rotate(8deg); } }
/* Сияние, когда норма выполнена */
.figure .sparkles { display: none; fill: #FFE36E; stroke: #E0A800; stroke-width: 1.5; }
.figure.celebrate { animation: glow 1.5s ease-in-out 3, hop .55s ease-out 2; }
.figure.celebrate .sparkles { display: inline; animation: sparkle 1.5s ease-in-out 3; transform-origin: 110px 190px; }
@keyframes glow {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(255, 220, 90, 0)); }
  50% { filter: drop-shadow(0 0 14px rgba(255, 220, 90, .95)) drop-shadow(0 0 32px rgba(255, 240, 170, .8)); }
}
@keyframes hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-14px); } }
@keyframes sparkle { 0%, 100% { opacity: 0; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.05); } }
.figure .accessory > * { stroke: var(--ink); stroke-width: 4; stroke-linejoin: round; }
.figure .acc-red { fill: #E23D4B; }
.figure .acc-white { fill: #fff; }
.figure .acc-heart { fill: #FF4F86; }
.figure .acc-heart.small { stroke-width: 2.5; }
.figure .acc-cap { fill: #5C7A44; }
.figure .acc-star { fill: #E23D4B; stroke-width: 2; }
.figure .acc-stem { fill: none; stroke: #3E8A3A; stroke-width: 5; stroke-linecap: round; }
.figure .acc-leaf { fill: #4FB04A; stroke-width: 3; }
.figure .acc-tulip { fill: #FF5C8A; }
.figure .acc-mimosa { fill: #FFD43B; stroke-width: 2.5; }
.figure .acc-witch { fill: #5B2A86; }
.figure .acc-orange { fill: #FF8A1F; stroke-width: 3; }
.figure .acc-rib { fill: none; stroke-width: 2.5; }
.figure .acc-green { fill: #3E8A3A; stroke-width: 2.5; }
.figure .acc-bat { fill: #3B2352; stroke-width: 2; }
.figure .acc-straw { fill: #F2D28B; }
.figure .acc-straw2 { fill: #E6BE62; }
.figure .acc-band { fill: #FF6B6B; stroke-width: 3; }
.figure .acc-sun { fill: #FFC83D; stroke-width: 3; }
.figure .acc-ray { fill: none; stroke: #FFB020; stroke-width: 4; stroke-linecap: round; }
@keyframes wave { from { transform: translateX(0); } to { transform: translateX(-220px); } }
@keyframes bubble {
  0% { transform: translateY(0); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translateY(var(--rise)); opacity: 0; }
}

/* ---------- Telegram-канал ---------- */
.tg-card {
  display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center;
  padding: 20px 22px; border-radius: var(--radius-l);
  background: linear-gradient(135deg, #2AABEE, #1B7FC0); color: #fff; text-decoration: none;
  box-shadow: var(--shadow);
  transition: transform .15s;
}
.tg-card:hover { transform: translateY(-2px); }
.tg-ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #fff; color: #2AABEE; }
.tg-ico svg { width: 28px; height: 28px; margin-left: -2px; }
.tg-body b { display: block; font-family: var(--font-display); font-size: 17px; margin-bottom: 2px; }
.tg-body span { font-size: 15px; color: #E3F4FF; }
.tg-go { background: #fff; color: #1B7FC0; font-weight: 800; padding: 10px 16px; border-radius: 999px; white-space: nowrap; }
.tg-pill {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin-top: 4px;
  padding: 8px 16px 8px 10px; border-radius: 999px; background: rgba(255, 255, 255, .2);
  color: #fff; font-weight: 800; font-size: 15px; text-decoration: none;
}
.tg-pill:hover { background: rgba(255, 255, 255, .32); }
.tg-pill svg, .tg-link svg { width: 20px; height: 20px; flex: none; }
.tg-link {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
  color: #1B7FC0; font-weight: 800; text-decoration: none;
}
.tg-link:hover { text-decoration: underline; }

/* ---------- Установка на главный экран ---------- */
.install-slot[data-place="profile"]:not(:empty) { margin-top: 22px; }
.install-head { display: flex; gap: 14px; align-items: flex-start; }
.install-head img { flex: none; border-radius: 14px; box-shadow: 0 4px 12px -6px rgba(19, 51, 91, .5); }
.install-head h2 { margin: 0 0 4px; }
.install-head p { margin: 0; }
.install-steps { margin: 14px 0 0; padding-left: 22px; display: grid; gap: 6px; }
.share-ico { display: inline-block; padding: 0 6px; border-radius: 6px; background: var(--bg); color: var(--deep); font-weight: 800; }
.install-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.install-actions:empty { display: none; }

.tg-panel { margin-top: 22px; display: grid; gap: 14px; justify-items: start; }
.tg-panel .tg-ico { background: #E3F3FF; }
.tg-row { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; }
.tg-row h2 { margin-bottom: 2px; }
.tg-row p { margin: 0; }
.tg-panel .field { margin: 0; min-width: 160px; }
.tg-user { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; width: 100%; }
.tg-user .field { flex: 1 1 220px; }
.tg-user .error { flex-basis: 100%; margin: 0; }
.tg-steps { margin: 0; padding-left: 22px; line-height: 1.6; }

/* ---------- Переключатель, звук ---------- */
.switch { display: flex; align-items: center; gap: 12px; cursor: pointer; font-weight: 700; margin-bottom: 14px; }
.tg-panel .switch { margin-bottom: 0; }
.switch input {
  appearance: none; width: 48px; height: 28px; border-radius: 999px; background: var(--line);
  position: relative; cursor: pointer; transition: background .2s; margin: 0; flex: none;
}
.switch input::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 4px rgba(19, 51, 91, .25); transition: transform .2s;
}
.switch input:checked { background: var(--mint); }
.switch input:checked::after { transform: translateX(20px); }
.sound-btn { font-size: 20px; }
.listen { margin-top: 6px; padding-left: 8px; min-height: 36px; font-size: 15px; color: var(--deep); }
.modal .listen { margin: -6px 0 10px; }

/* ---------- Админка ---------- */
.admin-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }
.btn-small { min-height: 38px; padding: 0 14px; font-size: 14px; box-shadow: none; }
.btn-small:active { transform: none; box-shadow: none; }
.btn-danger { background: #FFE0E8; color: var(--berry-ink); }
.btn-danger:hover { background: #FFCBD8; }
.textarea { font-family: inherit; min-height: 110px; padding: 14px 18px; resize: vertical; line-height: 1.4; }
.admin-users-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.admin-users-head h2 { margin: 0; }
.admin-users-head .input { max-width: 340px; min-height: 44px; }
.table-wrap { overflow-x: auto; margin: 0 -6px; }
.users { width: 100%; border-collapse: collapse; font-size: 15px; }
.users th { text-align: left; font-size: 13px; color: var(--ink-soft); font-weight: 700; padding: 8px 10px; border-bottom: 2px solid var(--line); white-space: nowrap; }
.users td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.users td .muted { font-size: 13px; }
.users tr.blocked td { opacity: .55; }
.users tr.blocked td:last-child { opacity: 1; }
.fv-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .6fr) minmax(0, 2fr) auto; gap: 8px; margin-bottom: 8px; align-items: center; }
.fv-row .input { min-height: 46px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; }
.chip {
  border: 2px solid var(--line); background: #fff; cursor: pointer; border-radius: 999px;
  padding: 4px 12px; font-weight: 800; font-size: 14px; color: var(--deep);
}
.chip:hover { border-color: var(--deep); }
.chip.op { min-width: 38px; color: var(--ink); font-family: var(--font-display); }
.formula-input { font-size: 18px; font-weight: 700; letter-spacing: .01em; }
.fx-table { max-width: 520px; }
.fx-history { margin-top: 16px; font-size: 14px; color: var(--ink-soft); }
.fx-history summary { cursor: pointer; font-weight: 700; }
.wh-more { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; }
.wh-more summary { cursor: pointer; font-weight: 800; color: var(--deep); padding: 4px 0; }
.wh-more .days { margin-top: 8px; }
.fx-history code { background: var(--bg); padding: 1px 6px; border-radius: 6px; }
.formula-vars { margin: 0 0 8px; padding-left: 18px; }
#formula-explain p { margin: 0 0 6px; }
.input-small { min-height: 38px; padding: 0 10px; font-size: 14px; border-radius: 12px; min-width: 150px; }
.tag { display: inline-block; font-size: 12px; font-weight: 800; padding: 1px 8px; border-radius: 999px; background: var(--sun); }

/* ---------- Окна и уведомления ---------- */
.modal-back {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px;
  background: rgba(19, 51, 91, .45); animation: fade .25s;
}
.modal {
  width: min(460px, 100%); background: #fff; border-radius: var(--radius-xl); padding: 30px 28px 26px;
  text-align: center; box-shadow: var(--shadow); animation: pop .4s cubic-bezier(.3, 1.5, .5, 1);
}
.modal .figure-box { width: 120px; margin: -8px auto 8px; }
.modal p { font-size: 18px; white-space: pre-line; }
#toast-root { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 60; display: grid; gap: 8px; width: min(420px, calc(100% - 32px)); }
.toast { background: var(--ink); color: #fff; padding: 14px 18px; border-radius: 18px; font-weight: 700; box-shadow: var(--shadow); animation: pop .35s cubic-bezier(.3, 1.5, .5, 1); }
.toast.prize { background: var(--sun); color: var(--ink); }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { transform: scale(.85); opacity: 0; } }

/* ---------- Адаптивность ---------- */
@media (max-width: 860px) {
  .today, .profile-grid { grid-template-columns: minmax(0, 1fr); }
  .auth-card { grid-template-columns: 1fr; }
  .auth-hero { padding: 28px 24px 0; }
  .auth-figures .figure-box { width: 110px; }
  .auth-form { padding: 28px 24px; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .nav {
    position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 40; margin: 0;
    padding: 6px; border-radius: 26px;
  }
  .nav button { flex-direction: column; gap: 0; font-size: 12px; min-height: 56px; border-radius: 20px; }
  .nav .ico { font-size: 20px; }
  .panel { padding: 18px; }
  .glasses { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .glass { padding: 8px 2px 6px; font-size: 14px; }
  .facts, .streaks { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .fact { padding: 10px; }
  .fact b { font-size: 16px; }
  .level-card { grid-template-columns: 1fr; text-align: center; justify-items: center; padding: 22px; }
  .level-card .xp { width: 100%; }
  .row-2 { grid-template-columns: 1fr; gap: 0; }
  .chart { height: 170px; gap: 2px; }
  .brand span { display: none; }
  .tg-card { grid-template-columns: auto 1fr; }
  .admin-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fv-row { grid-template-columns: minmax(0, 1fr) minmax(0, .7fr) auto; }
  .fv-row .fv-desc { grid-column: 1 / 3; grid-row: 2; }
  .nav button { font-size: 11px; }
  .tg-go { grid-column: 1 / -1; text-align: center; }
}
/* ---------- Меню: счётчик и «Ещё» ---------- */
.nav .ico { position: relative; }
.nav-count {
  position: absolute; top: -8px; right: -14px; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px; background: var(--berry); color: #fff; font-size: 12px; font-weight: 800;
  display: grid; place-items: center; line-height: 1; box-shadow: 0 0 0 2px #fff;
  animation: pop .4s cubic-bezier(.3, 1.5, .5, 1);
}
.nav-count-dot { min-width: 12px; width: 12px; height: 12px; padding: 0; top: -4px; right: -8px; }
.nav .more-btn, .nav .more-menu { display: none; }
.subnav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.subnav button {
  border: 2px solid var(--line); background: #fff; color: var(--ink); font-weight: 800; font-size: 15px;
  padding: 8px 16px; border-radius: 999px; cursor: pointer;
}
.subnav button[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }

.narrow { max-width: 760px; margin: 0 auto; }
.section-title { margin: 6px 0 -6px; }
.tag-new { background: var(--berry); color: #fff; }
.tag-active { background: var(--mint); color: #fff; }
.tag-upcoming { background: var(--sun); }
.tag-finished { background: var(--line); }
.tag-bad { background: #FFE0E8; color: var(--berry-ink); }
.error-text { color: var(--berry-ink); }
.btn.armed { background: var(--berry); color: #fff; }

/* ---------- Новости и сообщения ---------- */
.news.unread, .msg.unread { box-shadow: var(--shadow), inset 4px 0 0 var(--berry); }
.news-date { margin: 0 0 6px; font-size: 14px; }
.msg-head { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.msg-head img { border-radius: 12px; }
.msg-head .msg-del { margin-left: auto; align-self: flex-start; flex: none; }
.msg-head .msg-del.armed { width: auto; padding: 0 10px; border-radius: 999px; font-size: 14px; background: var(--berry); color: #fff; }
.tag-good { background: #D9F8EC; color: #0E6B4A; }
.tag-muted { background: var(--bg); color: var(--ink-soft); }
.nowrap { white-space: nowrap; }
.msg-table .msg-snippet { min-width: 180px; max-width: 340px; color: var(--ink-soft); overflow-wrap: anywhere; }
.msg-table .btn-row { flex-wrap: nowrap; gap: 4px; }
.msg-table .tag { white-space: nowrap; }
.msg-preview { box-shadow: none; border: 2px solid var(--line); margin: 0; }
.sent-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rb { font-size: 17px; line-height: 1.55; }
.rb-h { margin: 18px 0 6px; }
.rb-p { margin: 0 0 12px; overflow-wrap: anywhere; }
.rb-p a, .rb-list a, .rb-quote a, .rb-note a, .rb-media a, .task a { color: var(--deep); font-weight: 700; }
.rb-list { margin: 0 0 12px; padding-left: 24px; display: grid; gap: 4px; }
.rb-quote { margin: 0 0 14px; padding: 12px 18px; border-left: 5px solid var(--water); background: var(--bg); border-radius: 0 14px 14px 0; font-style: italic; }
.rb-note { margin: 0 0 12px; font-size: 14px; color: var(--ink-soft); }
.rb-media { margin: 4px 0 16px; }
.rb-media img, .rb-media video { display: block; width: 100%; max-height: 520px; object-fit: contain; border-radius: var(--radius-m); background: var(--bg); }
.rb-media figcaption { font-size: 14px; color: var(--ink-soft); margin-top: 6px; text-align: center; }
.rb-btn { margin: 4px 0 16px; }
.rb-btn .btn { text-decoration: none; }
.rb-hr { border: 0; height: 2px; background: var(--line); margin: 18px 0; }

/* ---------- Конструктор новости ---------- */
.news-editor { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 18px; align-items: start; }
.news-editor .preview { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow: auto; }
.rb-blocks { display: grid; gap: 12px; margin-bottom: 12px; }
.rb-edit { border: 2px solid var(--line); border-radius: var(--radius-m); padding: 10px 12px 12px; background: #fff; }
.rb-edit-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font-size: 14px; color: var(--ink-soft); }
.rb-edit-head .icon-btn { width: 32px; height: 32px; font-size: 17px; }
.rb-edit .textarea { min-height: 0; }
.rb-edit .input + .input, .rb-edit .rb-picker + .input { margin-top: 8px; }
.rb-add { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rt-bar { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.rt-bar > button {
  border: 0; background: var(--bg); color: var(--ink); border-radius: 10px; padding: 6px 10px;
  font-size: 14px; font-weight: 700; cursor: pointer; min-width: 36px;
}
.rt-bar > button:hover { background: var(--line); }
.rt-form { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; margin-top: 4px; }
.rt-form .input { flex: 1 1 160px; }
.mp-preview img, .mp-preview video { display: block; max-width: 100%; max-height: 220px; border-radius: 12px; margin-bottom: 6px; }
.btn-row label.btn { cursor: pointer; }

/* ---------- Окно с содержимым ---------- */
.modal-wide { width: min(680px, 100%); text-align: left; max-height: calc(100vh - 32px); overflow: auto; }
.modal-head { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.modal-wide p { font-size: 16px; }
.sent-list { list-style: none; padding: 0; display: grid; gap: 10px; }
.sent-list li { background: var(--bg); border-radius: 14px; padding: 10px 14px; overflow-wrap: anywhere; }
.sent-list img { max-width: 160px; border-radius: 10px; margin-top: 6px; }

/* ---------- Лекарства ---------- */
.doses { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.dose {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 4px 12px; align-items: center;
  padding: 12px 14px; border-radius: 16px; background: var(--bg);
}
.dose-time { font-family: var(--font-display); font-weight: 700; font-size: 15px; }
.dose-time small { display: block; font-family: var(--font-body); font-size: 12px; color: var(--ink-soft); }
.overdue { margin-top: 14px; }
.overdue summary { cursor: pointer; font-weight: 800; color: var(--berry-ink); }
.dose-status { font-size: 14px; font-weight: 700; color: var(--ink-soft); }
.dose-actions { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; }
.dose-due { background: #FFF1CC; }
.dose-missed { background: #FFE0E8; }
.dose-taken { background: #D9F8EC; }
.dose-taken .dose-status { color: var(--mint-ink); }
.med-list { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 8px; }
.med-list li { display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; padding: 12px 14px; border-radius: 16px; background: var(--bg); }
.med-form { border: 2px dashed var(--line); border-radius: var(--radius-m); padding: 16px; margin: 14px 0; }
.chip.chip-on { background: var(--deep-dark); border-color: var(--deep-dark); color: #fff; }
.med-grid { border-collapse: collapse; font-size: 13px; width: 100%; }
.med-grid th { font-weight: 700; color: var(--ink-soft); padding: 4px; text-align: center; white-space: nowrap; }
.med-grid tbody th { text-align: left; color: var(--ink); max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.med-grid td { text-align: center; padding: 6px 2px; }
.dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin: 1px; vertical-align: middle; background: var(--line); }
.dot-taken { background: var(--mint); }
.dot-skipped { background: var(--sun); }
.dot-missed { background: var(--berry); }
.dot-due { background: var(--water); }
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.score { font-family: var(--font-display); font-weight: 700; padding: 2px 10px; border-radius: 999px; background: var(--bg); white-space: nowrap; }
.score.good { background: #D9F8EC; color: var(--mint-ink); }
.score.mid { background: #FFF1CC; color: var(--sun-ink); }
.score.bad { background: #FFE0E8; color: var(--berry-ink); }

/* ---------- Марафоны ---------- */
.marathon-cover { display: block; width: calc(100% + 48px); max-width: none; margin: -24px -24px 16px; max-height: 260px; object-fit: cover; border-radius: var(--radius-l) var(--radius-l) 0 0; }
.task { background: var(--bg); padding: 12px 16px; border-radius: 14px; }
.m-desc summary, .m-history summary { cursor: pointer; font-weight: 700; color: var(--deep); margin: 8px 0; }
.m-progress .xp { background: var(--bg); margin: 14px 0 12px; }
.m-progress .xp i { display: block; height: 100%; background: linear-gradient(90deg, var(--mint), var(--water)); border-radius: 999px; }
.checkin { margin-top: 14px; }
.done-line { font-weight: 800; color: var(--mint-ink); }
.leaders-title { margin-top: 18px; }
.leaders { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.leaders li {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) minmax(60px, 120px) auto; gap: 10px; align-items: center;
  padding: 8px 12px; border-radius: 14px; background: var(--bg);
}
.leaders li.me { background: #FFF1CC; box-shadow: inset 0 0 0 2px var(--sun); }
.leaders .place { font-size: 20px; text-align: center; font-weight: 800; }
.leaders .who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.leaders .bar { height: 8px; border-radius: 999px; background: #fff; overflow: hidden; }
.leaders .bar i { display: block; height: 100%; background: var(--mint); }
.leader-photos-btn {
  font: inherit; font-size: 13px; font-weight: 800; color: inherit; background: #fff;
  border: 0; border-radius: 999px; padding: 2px 9px; margin-left: 6px; cursor: pointer; vertical-align: 1px;
}
.leader-photos-btn:focus-visible { outline: 3px solid var(--water); outline-offset: 2px; }
.leaders li.leader-gallery {
  display: flex; gap: 8px; overflow-x: auto; padding: 8px 12px 10px; margin-top: -4px; background: var(--bg);
  scroll-snap-type: x proximity;
}
.leader-gallery a { flex: 0 0 auto; display: grid; gap: 2px; text-decoration: none; color: inherit; scroll-snap-align: start; }
.leader-gallery img { width: 96px; height: 96px; object-fit: cover; border-radius: 12px; display: block; }
.leader-gallery span { font-size: 12px; text-align: center; opacity: .75; }
.checkins { list-style: none; padding: 0; display: grid; gap: 10px; }
.checkins li { background: var(--bg); border-radius: 14px; padding: 10px 14px; overflow-wrap: anywhere; }
.checkins img { display: block; max-width: 240px; max-height: 240px; border-radius: 12px; margin-top: 6px; }
.admin-list { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; }
.admin-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-radius: 16px; background: var(--bg); }
.mgrid { display: flex; flex-wrap: wrap; gap: 2px; max-width: 260px; }
.mgrid i { width: 10px; height: 10px; border-radius: 3px; background: #FFD3DE; }
.mgrid i.on { background: var(--mint); }
.mgrid i.future { background: var(--line); }

/* ---------- Давление ---------- */
.bp-inputs { display: grid; grid-template-columns: 1fr auto 1fr 1fr; gap: 10px; align-items: end; }
.bp-num { font-family: var(--font-display); font-size: 24px; font-weight: 700; text-align: center; }
.bp-slash { font-family: var(--font-display); font-size: 30px; font-weight: 700; color: var(--ink-soft); padding-bottom: 26px; }
.bp-avg { border-radius: var(--radius-m); padding: 14px 16px; margin-bottom: 12px; background: var(--bg); }
.bp-avg b { font-family: var(--font-display); font-size: 40px; line-height: 1; margin-right: 10px; }
.bp-avg span { color: var(--ink-soft); font-weight: 700; }
.bp-avg p { margin: 8px 0 0; }
.bp-tag { display: inline-block; padding: 2px 10px; border-radius: 999px; font-weight: 800; background: #fff; color: var(--ink) !important; }
.bp-optimal, .bp-normal { background: #D9F8EC; }
.bp-elevated, .bp-low { background: #FFF1CC; }
.bp-high { background: #FFE0E8; }
.bp-chart { margin-top: 14px; }
.pchart { width: 100%; height: auto; display: block; }
.pc-grid { stroke: var(--line); stroke-width: 1; }
.pc-ax { font-size: 12px; fill: var(--ink-soft); }
.pc-band { fill: #D9F8EC; opacity: .7; }
.pc-sys, .pc-dia, .pc-pulse { fill: none; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.pc-sys { stroke: var(--berry); }
.pc-dia { stroke: var(--deep); }
.pc-pulse { stroke: #A06CD5; stroke-dasharray: 6 5; stroke-width: 2.5; }
.pc-sys-dot { fill: var(--berry); }
.pc-dia-dot { fill: var(--deep); }
.pc-pulse-dot { fill: #A06CD5; }
.dot.pc-key-sys { background: var(--berry); }
.dot.pc-key-dia { background: var(--deep); }
.dot.pc-key-pulse { background: #A06CD5; }
.dot.pc-key-band { background: #D9F8EC; border-radius: 3px; }
.pc-wrap { position: relative; }
.pc-temp { fill: none; stroke: #E27028; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.pc-temp-dot { fill: #E27028; }
.dot.pc-key-temp { background: #E27028; }
.pc-t-temp { color: #C25A14; }
.t-num { max-width: 160px; }
.pchart { touch-action: pan-y; cursor: crosshair; }
.pc-cursor { stroke: var(--ink-soft); stroke-width: 1.5; stroke-dasharray: 3 3; }
.pc-tip {
  position: absolute; top: 0; padding: 6px 10px; border-radius: 12px; pointer-events: none;
  background: #fff; box-shadow: 0 6px 18px -6px rgba(20, 50, 90, .35); white-space: nowrap;
  display: grid; line-height: 1.25;
}
.pc-tip small { color: var(--ink-soft); font-weight: 700; }
.pc-tip b { font-family: var(--font-display); font-size: 20px; }
.pc-t-sys { color: var(--berry); }
.pc-t-dia { color: var(--deep); }
.pc-t-pulse { color: #8550C0; font-weight: 700; font-size: 14px; }
.bp-export { margin: 4px 0 14px; }
.bp-export summary { list-style: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px;
  border-radius: 999px; border: 2px solid var(--line); font-weight: 800; color: var(--deep); cursor: pointer; }
.bp-export summary::-webkit-details-marker { display: none; }
.bp-export summary::before { content: "⬇"; margin-right: 8px; }
.bp-export[open] summary { background: var(--bg); }
.bp-export form { margin-top: 10px; padding: 14px; border-radius: var(--radius-m); background: var(--bg); }
.bp-export .hint { margin-top: 0; }
.bp-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.bp-list li { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 12px; border-radius: 14px; background: var(--bg); }
.bp-when { font-weight: 700; font-size: 14px; }
.bp-when small { color: var(--ink-soft); }
.bp-val { font-family: var(--font-display); font-size: 18px; padding: 1px 8px; border-radius: 8px; }
.bp-list .icon-btn.armed { width: auto; padding: 0 10px; border-radius: 999px; font-size: 14px; background: var(--berry); color: #fff; }

@media (max-width: 860px) {
  .news-editor { grid-template-columns: minmax(0, 1fr); }
  .news-editor .preview { position: static; max-height: none; }
}
@media (max-width: 640px) {
  .nav button.secondary { display: none; }
  .nav .more-btn {
    display: flex; flex: 1; border: 0; background: transparent; cursor: pointer; flex-direction: column; gap: 0;
    min-height: 56px; border-radius: 20px; font-weight: 800; color: var(--ink-soft); font-size: 11px;
    align-items: center; justify-content: center;
  }
  .nav .more-btn.current { background: var(--deep-dark); color: #fff; }
  .more-menu:not(.hidden) {
    display: grid; position: absolute; right: 0; bottom: calc(100% + 8px); min-width: 210px; padding: 8px; gap: 4px;
    background: #fff; border-radius: 20px; box-shadow: var(--shadow);
  }
  .more-menu button {
    display: flex; align-items: center; gap: 10px; border: 0; background: transparent; padding: 12px 14px;
    border-radius: 14px; font-weight: 800; color: var(--ink); font-size: 16px; cursor: pointer; text-align: left;
  }
  .more-menu button[aria-current="page"] { background: var(--bg); color: var(--deep-dark); }
  .marathon-cover { width: calc(100% + 36px); margin: -18px -18px 14px; }
  .leaders li { grid-template-columns: 30px minmax(0, 1fr) auto; }
  .leaders .bar { display: none; }
  .dose { grid-template-columns: 50px minmax(0, 1fr); }
  .dose-status { grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Уведомления в профиле (ipush) ---------- */
.notify-panel { margin-top: 22px; display: grid; gap: 14px; }
.notify-panel h2, .notify-panel p { margin: 0; }
.notify-panel .switch { margin-bottom: 0; }
.notify-panel .field { margin: 0; max-width: 220px; }
.notify-ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.notify-way { background: var(--bg); border-radius: var(--radius-m); padding: 14px; display: grid; gap: 8px; align-content: start; }
.notify-way h3 { margin: 0; }
.notify-way summary { cursor: pointer; }
.kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; font-size: 14px; }
.kv code { overflow-wrap: anywhere; background: #fff; border-radius: 8px; padding: 2px 6px; }

/* Админка марафонов: убранные участники и удаление отчётов */
.users tr.removed td { opacity: .55; }
.users tr.removed td:last-child { opacity: 1; }
.btn-danger-text { color: var(--berry-ink); }
.checkins .ci-del { float: right; margin: -4px -6px 0 8px; }

/* ---------- Сейф для данных о здоровье: PIN-код, соглашение ---------- */
.auth-privacy { margin: 0 0 18px; padding: 14px 16px; border-radius: var(--radius-m); background: rgba(255, 255, 255, .16);
  color: #fff; font-size: 15px; line-height: 1.45; max-width: 46ch; }
.auth-hero .auth-privacy p { color: #fff; font-size: 15px; max-width: none; margin: 0 0 8px; }
.auth-hero .auth-privacy p:last-child { margin-bottom: 0; }
.auth-legal { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.auth-legal a { color: #fff; font-weight: 700; }
.pin-box { margin: 4px 0 14px; padding: 14px; border-radius: var(--radius-m); background: var(--bg); }
.pin-box .pin-title { margin: 0 0 4px; font-weight: 800; }
.pin-box .hint { margin: 0 0 10px; }
.pin-box .field:last-child { margin-bottom: 0; }
.check { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 14px; font-size: 15px; cursor: pointer; }
.check input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--deep); }
.check a { color: var(--deep); font-weight: 700; }
.vault-page { max-width: 560px; margin: 0 auto; }
.vault-page h1 { font-size: 26px; }
.vault-way { margin: 10px 0; }
.vault-way summary { cursor: pointer; padding: 6px 0; }
.vault-way form, .vault-way > .hint { margin-top: 8px; }

/* ---------- Отчёт для врача (выгрузка в PDF, см. .pdf-stage) ---------- */
.report { max-width: 900px; margin: 0 auto; font-family: var(--font-body); }
.rep-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; border-bottom: 2px solid var(--line); padding-bottom: 10px; margin-bottom: 14px; }
.rep-head h1 { font-size: 24px; margin: 0 0 4px; }
.rep-head p { margin: 0; }
.rep-head .muted { text-align: right; font-size: 13px; }
.rep-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-bottom: 14px; }
.rep-facts div { border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; }
.rep-facts b { display: block; font-size: 19px; }
.rep-facts span { font-size: 13px; color: var(--ink-soft); }
.rep-chart { margin-bottom: 14px; }
.rep-chart .pc-tip, .rep-chart .pc-cursor { display: none; }
.rep-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.rep-table th { text-align: left; color: var(--ink-soft); font-weight: 700; border-bottom: 2px solid var(--line); padding: 6px; }
.rep-table td { border-bottom: 1px solid var(--line); padding: 5px 6px; vertical-align: top; }
.rep-table .rep-note { color: var(--ink-soft); }


/* PIN-код: 6 крупных ячеек по цифре */
/* Ширина ячейки — от ширины поля (контейнер, 100cqi), а не от содержимого: иначе Safari на iPhone
   внутри панелей и <details> сжимал ячейки, а на десктопе они вылезали из узкой формы.
   --n — число ячеек (PIN — 6, код из письма — 4). Старые браузеры — от ширины экрана. */
.pin-field { container-type: inline-size; }
.pin-cells {
  --n: 6; --gap: 8px; position: relative; display: grid; gap: var(--gap); width: fit-content;
  grid-template-columns: repeat(var(--n), clamp(28px, calc((100vw - 120px) / 6), 56px));
}
@supports (width: 1cqi) {
  .pin-cells { grid-template-columns: repeat(var(--n), min(56px, calc((100cqi - (var(--n) - 1) * var(--gap)) / var(--n)))); }
}
.pin-cell {
  display: grid; place-items: center; height: 62px; min-width: 0;
  border: 2px solid var(--line); border-radius: var(--radius-m); background: #F7FCFE; color: var(--ink);
  font-family: var(--font-display); font-size: 28px; font-weight: 700;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.pin-cell.on { border-color: var(--water); background: #fff; box-shadow: 0 0 0 3px rgba(43, 179, 240, .2); }
/* Настоящее поле — прозрачное поверх ячеек: принимает цифры, вставку и код из письма.
   16px — иначе iPhone увеличивает страницу при фокусе */
.pin-input {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; outline: none;
  background: transparent; color: transparent; -webkit-text-fill-color: transparent; caret-color: transparent;
  font-size: 16px; letter-spacing: 0; -webkit-appearance: none; appearance: none; cursor: text; z-index: 1;
}
.pin-input::selection { background: transparent; }
.pin-field { grid-template-columns: minmax(0, 1fr); width: 100%; }
.vault-page form + .hint { margin-top: 14px; }
@media (max-width: 640px) {
  .auth-form { padding: 24px 16px; }
  .pin-box { padding: 12px 8px; }
  .pin-cells { --gap: 6px; }
  .pin-cell { height: 54px; font-size: 24px; }
}


/* Шапка: подпись «уровень» у значка уровня, колокольчик уведомлений */
.level-chip span { display: grid; line-height: 1.05; text-align: left; }
.level-chip small { font-size: 10px; font-weight: 700; opacity: .7; }
.level-chip i { font-style: normal; }
.bell-btn { position: relative; font-size: 20px; }
.bell-btn .nav-count-dot { top: 4px; right: 4px; }
.notify-link { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.notify-link h2 { margin-bottom: 4px; }
.notify-link p { margin: 0; }
.intro-bell { font-size: 52px; text-align: center; line-height: 1; margin-bottom: 6px; }
.intro-steps { text-align: left; }
#intro-on + .btn { margin-top: 8px; }

/* Подсказка под кнопкой «Сохранить» не наезжает на её объёмную тень */
form > .btn + .hint { margin-top: 16px; }

/* Выгрузка в PDF: отчёт рисуется вне экрана шириной печатной области A4 */
.pdf-stage { position: fixed; left: -10000px; top: 0; }
.pdf-report { width: 718px; max-width: none; margin: 0; background: #fff; color: #13335B; }
.pdf-report .chart-tip-hint, .pdf-report .pc-tip, .pdf-report .pc-cursor { display: none; }
.pdf-report .rep-facts { grid-template-columns: repeat(3, 1fr); }

/* Шапка на телефоне: уровень, колокольчик, звук и «Выйти» помещаются в строку */
@media (max-width: 640px) {
  .topbar { gap: 6px; }
  .topbar #logout { padding: 0 8px; }
  .level-chip { padding: 4px 10px 4px 5px; gap: 6px; }
}
@media (max-width: 370px) {
  .level-chip span { display: none; }
  .level-chip { padding: 4px; }
}

/* «За неделю 0%» не прижимается к первой добавке */
.risk-head + .doses { margin-top: 12px; }

/* ---------- Чат с администрацией (static/chat.js) ---------- */
.chat-list h2 { margin-bottom: 14px; }
.chat-list #chat-q { margin-bottom: 10px; }
.chat-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%;
  padding: 12px 10px; border: 0; border-radius: var(--radius-m); background: transparent; color: inherit;
  font: inherit; text-align: left; cursor: pointer;
}
.chat-row + .chat-row { border-top: 1px solid var(--line); border-radius: 0; }
.chat-row:hover, .chat-row:focus-visible { background: var(--bg); border-radius: var(--radius-m); }
.chat-row-main { display: grid; gap: 2px; min-width: 0; }
.chat-row-main b, .chat-row-main .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-row-main .tag { font-size: 11px; vertical-align: 1px; }
.chat-row-side { display: grid; justify-items: end; gap: 4px; }
.chat-ava {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--water); color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 18px;
}
.chat-ava-admin { background: var(--bg); font-size: 22px; box-shadow: inset 0 0 0 2px var(--line); }
.chat-badge {
  min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--berry); color: #fff;
  font-size: 12px; font-weight: 800; display: grid; place-items: center;
}

.chat-thread { display: flex; flex-direction: column; padding: 0; overflow: hidden; max-width: 860px; margin: 0 auto; height: 70vh; }
.chat-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.chat-head .chat-ava { width: 40px; height: 40px; font-size: 16px; }
.chat-head-title { display: grid; min-width: 0; flex: 1; }
.chat-head-title b, .chat-head-title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-head-title span { font-size: 13px; }
.chat-back { font-size: 22px; }
.chat-flag { margin: 0; font-size: 14px; }
.chat-scroll { flex: 1; overflow-y: auto; padding: 12px 16px 16px; background: var(--bg); overscroll-behavior: contain; }
.chat-older { display: block; margin: 0 auto 8px; }
.chat-empty { text-align: center; margin-top: 30px; }
.cm-day { text-align: center; margin: 14px 0 8px; }
.cm-day span { display: inline-block; padding: 3px 12px; border-radius: 999px; background: var(--panel); color: var(--ink-soft); font-size: 13px; font-weight: 700; }
.cm { display: flex; align-items: center; gap: 6px; margin: 4px 0; }
.cm-mine { flex-direction: row-reverse; }
.cm-bubble {
  position: relative; max-width: min(78%, 520px); padding: 8px 12px 6px; border-radius: 18px;
  background: var(--panel); box-shadow: 0 1px 2px rgba(19, 51, 91, .08); overflow-wrap: anywhere;
}
.cm-their .cm-bubble { border-bottom-left-radius: 6px; }
.cm-mine .cm-bubble { background: var(--deep); color: #fff; border-bottom-right-radius: 6px; }
.cm-mine .cm-bubble a { color: #fff; }
.cm-text { line-height: 1.4; }
.cm-meta { display: block; text-align: right; font-size: 11px; margin-top: 2px; opacity: .7; }
.cm-ticks { margin-left: 4px; letter-spacing: -3px; }
.cm-ticks.read { color: var(--sun); opacity: 1; }
.cm-media { display: block; margin: -2px -6px 6px; }
.cm-media img, video.cm-media { display: block; max-width: 100%; max-height: 360px; border-radius: 12px; background: #000; }
.cm-media img { background: transparent; }
video.cm-media { width: 100%; margin: -2px 0 6px; }
.cm-bare { padding: 4px 4px 6px; }
.cm-bare .cm-media { margin: 0 0 4px; }
.cm-bare .cm-meta { padding-right: 8px; }
.cm-audio { display: block; width: 260px; max-width: 100%; height: 40px; margin: 2px 0 4px; }
.cm-file { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; padding: 4px 2px; }
.cm-file b { display: block; word-break: break-word; }
.cm-file small { opacity: .75; }
.cm-file-ico { font-size: 28px; }
.cm-del {
  flex: none; border: 0; background: transparent; color: var(--ink-soft); cursor: pointer; font-size: 18px;
  padding: 4px 8px; border-radius: 999px; opacity: 0; transition: opacity .15s;
}
.cm:hover .cm-del, .cm-del:focus-visible { opacity: 1; }
.cm-menu-row { display: flex; margin: 2px 0 8px; }
.cm-menu-row.cm-mine { justify-content: flex-end; }
.cm-menu {
  display: grid; gap: 8px; max-width: min(100%, 360px); padding: 12px 14px; border-radius: var(--radius-m);
  background: var(--panel); box-shadow: var(--shadow);
}
.cm-menu-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.cm-menu small { font-size: 12px; line-height: 1.35; }
/* Удалённое пользователем — у администрации бледнее и с пометкой */
.cm-gone { flex-wrap: wrap; }
.cm-gone .cm-bubble { opacity: .55; }
.cm-gone-tag { flex-basis: 100%; margin: 2px 6px 0; font-size: 12px; font-style: italic; color: var(--berry-ink); }
.cm-mine .cm-gone-tag { text-align: right; }
@media (hover: none) { .cm-del { opacity: .5; } }

.chat-compose { border-top: 1px solid var(--line); padding: 10px 12px; background: var(--panel); }
.cc-row { display: flex; align-items: flex-end; gap: 8px; }
.cc-text { flex: 1; min-height: 44px; max-height: 160px; resize: none; padding: 10px 14px; line-height: 1.4; border-radius: 22px; }
.cc-clip, .cc-mic { font-size: 22px; width: 44px; height: 44px; flex: none; display: grid; place-items: center; cursor: pointer; }
.cc-send {
  width: 44px; height: 44px; flex: none; border: 0; border-radius: 50%; background: var(--deep); color: #fff;
  font-size: 20px; cursor: pointer; display: grid; place-items: center;
}
.cc-send.cc-wait { background: var(--ink-soft); }
.cc-send:disabled { opacity: .6; }
.cc-warn { margin: 8px 4px 0; font-size: 13px; }
.cc-attach { margin-bottom: 8px; }
.cc-file { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-m); background: var(--bg); }
.cc-file.cc-error { box-shadow: inset 0 0 0 2px var(--berry); }
.cc-thumb { width: 44px; height: 44px; border-radius: 10px; overflow: hidden; display: grid; place-items: center; font-size: 24px; flex: none; background: var(--panel); }
.cc-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cc-file-main { display: grid; gap: 2px; min-width: 0; flex: 1; }
.cc-file-main b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-bar { display: block; height: 4px; border-radius: 999px; background: var(--line); overflow: hidden; margin-top: 4px; }
.cc-bar i { display: block; height: 100%; background: var(--water); transition: width .3s; }
.cc-rec { display: flex; align-items: center; gap: 10px; min-height: 44px; flex-wrap: wrap; }
.cc-rec .muted { flex: 1; }
.cc-rec-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--berry); animation: cc-blink 1s infinite; }
@keyframes cc-blink { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .cc-rec-dot { animation: none; } }
.chat-off { padding: 14px 16px; border-top: 1px solid var(--line); background: var(--panel); }
.chat-off p { margin: 0; }
.switch-cell { margin: 0; gap: 8px; font-size: 13px; }

@media (max-width: 640px) {
  .chat-thread { border-radius: var(--radius-m); }
  .chat-head { padding: 10px 12px; gap: 10px; }
  .chat-scroll { padding: 10px 10px 14px; }
  .cm-bubble { max-width: 84%; }
  .chat-compose { padding: 8px; }
  .cc-row { gap: 4px; }
  .chat-flag span { display: none; }
}

/* Регистрация, шаг 2: код из письма вместо полей формы (поля остаются в форме скрытыми) */
.code-step > .field, .code-step > .pin-box, .code-step > .check { display: none; }
.code-box { margin: 4px 0 14px; padding: 14px; border-radius: var(--radius-m); background: var(--bg); }
.code-box .pin-title { margin: 0 0 4px; font-weight: 800; }
.code-box > .hint { margin: 0 0 10px; }
.code-box .field { margin-bottom: 8px; }
.code-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.code-links .link-btn {
  padding: 0; border: 0; background: none; color: var(--deep); font: inherit; font-size: 14px; font-weight: 700;
  cursor: pointer; text-decoration: underline;
}
.code-links .link-btn:disabled { color: var(--ink-soft); text-decoration: none; cursor: default; }

/* Просмотр фото из чата поверх приложения */
.lb-open, .lb-open body { overflow: hidden; }
.lb {
  position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center;
  background: rgba(8, 18, 32, .92); animation: lb-in .15s ease-out; touch-action: pan-y;
}
@keyframes lb-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .lb { animation: none; } }
.lb-img { max-width: calc(100vw - 32px); max-height: calc(100dvh - 120px); object-fit: contain; border-radius: 8px; user-select: none; }
.lb-bar {
  position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 8px;
  padding: max(10px, env(safe-area-inset-top)) 12px 10px; color: #fff;
}
.lb-count { flex: 1; font-weight: 700; font-size: 14px; opacity: .85; }
.lb-btn, .lb-nav {
  display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .14); color: #fff; font-size: 24px; text-decoration: none; cursor: pointer;
}
.lb-btn:hover, .lb-nav:hover { background: rgba(255, 255, 255, .26); }
.lb-btn:focus-visible, .lb-nav:focus-visible { outline: 3px solid var(--water); outline-offset: 2px; }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); font-size: 32px; }
.lb-nav:disabled { opacity: .25; cursor: default; }
.lb-prev { left: 12px; }
.lb-next { right: 12px; }
@media (max-width: 640px) { .lb-nav { display: none; } .lb-img { max-width: 100vw; border-radius: 0; } }

/* Список чатов: «Новый чат», поиск собеседника, вкладки у админа */
.chat-list-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.chat-list-head h2 { margin: 0; }
.chat-find { margin-bottom: 12px; padding: 10px; border-radius: var(--radius-m); background: var(--bg); }
.chat-find .hint { margin: 8px 4px 0; }
.chat-tabs { margin-bottom: 12px; }
.chat-tabs .chat-badge { display: inline-grid; margin-left: 4px; vertical-align: 1px; min-width: 20px; height: 20px; font-size: 11px; }
.chat-tabs .chat-badge.hidden { display: none; }

/* ---------- Ведение по программе: активность, питание, отчёт (static/care.js) ---------- */
.row-3 { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 14px; }
@media (max-width: 520px) { .row-3 { grid-template-columns: 1fr 1fr; gap: 0 12px; } .row-3 > :first-child { grid-column: 1 / -1; } }
.care-day + .care-day { margin-top: 14px; }
.care-day h3 { margin: 0 0 8px; font-size: 15px; }
.care-day h3::first-letter, .rep-item b::first-letter { text-transform: uppercase; }
.care-day .bp-list li { grid-template-columns: 28px minmax(0, 1fr) auto; }
.care-day .bp-when { font-size: 18px; text-align: center; }
.notice { margin: 10px 0; padding: 10px 14px; border-radius: var(--radius-m); background: #FFF4D6; color: var(--sun-ink); font-weight: 700; }
.back-btn { justify-self: start; }
.rep-pick { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.rep-pick .field { margin: 0; flex: 1 1 180px; }
.rep-pick .error { flex-basis: 100%; }
.rep-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rep-item { width: 100%; display: grid; gap: 2px; text-align: left; padding: 10px 14px; border-radius: 14px; background: var(--bg);
  border: 0; font: inherit; color: inherit; cursor: pointer; }
.rep-item:hover, .rep-item:focus-visible { background: var(--pool-a); }

.rep-item.unread { box-shadow: inset 4px 0 0 var(--deep); }
.rep-item.unread b { color: var(--deep); }
.rep-state { font-size: 13px; color: var(--ink-soft); }
.rep-state.sent { color: var(--mint-ink); font-weight: 700; }
.rep-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 12px; }
.rep-form .field { grid-column: 1 / -1; }
.rep-form .field.rep-short { grid-column: span 2; }
.rep-form .textarea { resize: vertical; min-height: 48px; }
.care-rep { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; padding: 14px 16px; border-radius: var(--radius-m);
  background: var(--bg); margin-bottom: 12px; }
.pdf-report .care-rep { background: #fff; padding: 0; font-size: 15px; }
.rep-send { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; padding: 12px 14px;
  border-radius: var(--radius-m); border: 2px solid var(--line); }
.consent { flex: 1 1 260px; display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-size: 15px; line-height: 1.35; }
.consent input { width: 22px; height: 22px; flex: none; margin: 0; accent-color: var(--deep); }
.rep-send .btn { flex: 0 0 auto; }
@media (max-width: 520px) { .rep-send .btn { flex: 1 1 100%; } }

/* Выбор нормы воды */
.norm-pick { display: grid; gap: 8px; margin-bottom: 12px; }
.norm-opt { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--bg); cursor: pointer; }
.norm-opt input[type=radio] { width: 20px; height: 20px; flex: none; margin: 0; accent-color: var(--deep); }
.norm-opt > span { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.norm-num { min-width: 0; width: 76px; text-align: center; }

/* «Сегодня»: коэффициент и подсказка по столбику истории */
.coef-big { font-family: var(--font-display); font-size: 30px; color: var(--deep); }
.coef-big.done { color: var(--mint-ink); }
.coef-formula { margin: 4px 0; font-size: 18px; }
.chart-tip { margin: 6px 0 0; min-height: 22px; font-size: 14px; color: var(--ink-soft); }
.chart-tip b { color: var(--ink); }
.bar-wrap { cursor: pointer; }
.bar-wrap.picked { outline: 2px solid var(--deep); outline-offset: 2px; border-radius: 6px; }

/* Админка: справочник программ и ведение */
.prog-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.prog-list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 12px; align-items: center; padding: 10px 14px;
  border-radius: 14px; background: var(--bg); }
.prog-list li.archived { opacity: .6; }
.prog-list .hint { margin: 4px 0 0; }
.cr-start { margin: 6px 0 0; }
.cr-start label { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.cr-assign { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-bottom: 8px; }
.cr-assign .btn { margin-bottom: 6px; }  /* «объёмная» тень кнопки не заходит на следующий блок */
.cr-assign .field { margin: 0; flex: 1 1 180px; }
.cr-assign .error { flex-basis: 100%; }
.care-cell { display: grid; gap: 6px; justify-items: start; }
.care-cell .switch { margin: 0; }

/* Приглашение на программу */
.join-panel, .join-done { text-align: center; }
.join-panel .muted { max-width: 52ch; margin-inline: auto; }
.join-ico { font-size: 56px; line-height: 1; margin-bottom: 6px; }
.join-done .join-ico { animation: join-pop .5s cubic-bezier(.2, 1.6, .4, 1) both; }
.join-done .btn + .btn { margin-top: 8px; }
@keyframes join-pop { from { transform: scale(.3); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .join-done .join-ico { animation: none; } }

/* ---------- Меню «Ещё» на телефоне: две колонки и прокрутка, чтобы помещалось на экран ---------- */
@media (max-width: 640px) {
  .more-menu:not(.hidden) {
    left: 0; right: 0; min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: calc(100dvh - 120px); overflow-y: auto; overscroll-behavior: contain;
  }
  .more-menu button { padding: 10px; gap: 8px; font-size: 14px; line-height: 1.2; min-height: 48px; }
  .more-menu button .ico { font-size: 20px; flex: none; }
}

/* ---------- Поле времени: цифрами или на часах ---------- */
.tf { position: relative; display: block; }
.tf .tf-text { width: 100%; padding-right: 48px; font-variant-numeric: tabular-nums; }
.tf .tf-text[aria-invalid] { border-color: var(--berry); }
.tf-pick {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px;
  display: grid; place-items: center; border-radius: 12px; font-size: 20px; overflow: hidden;
}
.tf-pick:hover, .tf-pick:focus-within { background: var(--bg); }
.tf-native { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.tf-native::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
@media (max-width: 640px) { .row-2.row-2-keep { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 0 10px; } }

/* ---------- История по неделям ---------- */
.wk-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.wk-head h2 { margin: 0; }
.wk-q { flex: 1 1 200px; max-width: 300px; min-height: 44px; }
.wk-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; padding: 6px; border-radius: var(--radius-m); background: var(--bg); }
.wk-nav .icon-btn { font-size: 22px; background: var(--panel); }
.wk-label { flex: 1; text-align: center; font-size: 16px; }
.wk-nav .wk-now { flex-basis: 100%; }
.wk-sum { margin: 0 0 12px; font-weight: 700; color: var(--ink-soft); }
.wk-body mark { background: #FFE89A; color: inherit; border-radius: 3px; padding: 0 1px; }
@media (max-width: 520px) { .wk-q { max-width: none; flex-basis: 100%; } }
.care-day .bp-list.meal-list li { grid-template-columns: 50px minmax(0, 1fr) auto; align-items: start; }
.care-day .meal-list .bp-when { font-size: 14px; text-align: left; padding-top: 1px; font-variant-numeric: tabular-nums; }
.meal-what { display: grid; gap: 2px; min-width: 0; }
.meal-what span { white-space: pre-line; overflow-wrap: anywhere; }

/* ---------- Отчёт: печать ---------- */
.rep-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.rep-top .btn-row { margin: 0; }
.print-stage { display: none; }
@media print {
  html.printing body > *:not(.print-stage) { display: none !important; }
  html.printing body { background: #fff !important; }
  html.printing .print-stage { display: block; }
  html.printing .pdf-report { width: auto; }
}

/* ---------- Фото профиля ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ava {
  width: 40px; height: 40px; border-radius: 50%; overflow: hidden; display: inline-grid; place-items: center; flex: none;
  background: var(--water); color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 16px;
}
.ava img, .chat-ava-img img, .ava-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ava-l { width: 52px; height: 52px; font-size: 20px; }
.chat-ava-img { overflow: hidden; background: var(--line); }
.ava-btn { border: 0; padding: 0; background: none; border-radius: 50%; cursor: zoom-in; flex: none; line-height: 0; }
.ava-btn:focus-visible, .ava-thumb:focus-visible { outline: 3px solid var(--deep); outline-offset: 2px; }
.ava-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 16px; margin: 14px 0 6px; }
.ava-cell { margin: 0; display: grid; gap: 8px; justify-items: center; align-content: start; }
.ava-thumb { border: 0; padding: 0; width: 116px; height: 116px; border-radius: 50%; overflow: hidden; cursor: zoom-in; box-shadow: 0 0 0 3px var(--line); background: var(--bg); }
.ava-cell:first-child .ava-thumb { box-shadow: 0 0 0 3px var(--deep); }
.ava-cell figcaption { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.ava-add {
  width: 116px; height: 116px; border-radius: 50%; border: 2px dashed var(--line); display: grid; place-content: center;
  justify-self: center; text-align: center; cursor: pointer; color: var(--ink-soft); gap: 2px;
}
.ava-add span { font-size: 30px; line-height: 1; }
.ava-add b { font-size: 13px; }
.ava-add:hover, .ava-add:focus-within { border-color: var(--deep); color: var(--deep); }
.ava-add.busy { opacity: .5; pointer-events: none; }
.cr-photos { display: flex; gap: 10px; margin-bottom: 12px; }
.cr-photos .ava-thumb { width: 64px; height: 64px; }
.rep-item-who { display: flex; align-items: center; gap: 12px; }
.rep-item-who > span:last-child { display: grid; gap: 2px; min-width: 0; }
.rep-who { gap: 12px; }
.rep-who h2 { flex: 1; }

/* ---------- Админка: пользователи карточками ---------- */
.user-filters { margin: 4px 0 12px; }
.ulist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ucard {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.4fr) minmax(0, 1fr) 150px; gap: 12px 20px;
  align-items: center; padding: 14px 16px; border-radius: var(--radius-m); background: var(--bg);
}
.ucard.blocked { box-shadow: inset 4px 0 0 var(--berry); }
.ucard.blocked .uc-who, .ucard.blocked .uc-facts { opacity: .6; }
.uc-who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.uc-who > div { display: grid; gap: 2px; min-width: 0; }
.uc-mail { font-size: 14px; overflow-wrap: anywhere; }
.uc-facts { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; }
.uc-facts dt { font-size: 12px; color: var(--ink-soft); }
.uc-facts dd { margin: 0; font-weight: 700; font-size: 14px; }
.uc-flags { display: grid; gap: 6px; justify-items: start; }
.uc-theme { display: grid; gap: 2px; font-size: 12px; }
.uc-actions { display: grid; gap: 6px; }
.uc-actions:empty { display: none; }
.tag-berry { background: var(--berry); color: #fff; }
@media (max-width: 1100px) {
  .ucard { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .uc-actions { display: flex; flex-wrap: wrap; grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .ucard { grid-template-columns: minmax(0, 1fr); padding: 14px; }
  .uc-flags { grid-auto-flow: row; }
}
@media (max-width: 520px) {
  .ava-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .ava-thumb, .ava-add { width: 84px; height: 84px; }
  .ava-add span { font-size: 24px; }
  .ava-add b { font-size: 11px; }
  .ava-cell figcaption .btn { font-size: 12px; padding: 4px 8px; }
}

/* ---------- Список недель (нажатие на название недели в истории) ---------- */
.wk-nav { position: relative; }
.wk-nav .wk-label {
  flex: 1; border: 0; background: transparent; font: inherit; font-weight: 800; font-size: 16px; color: var(--ink);
  padding: 8px 6px; border-radius: 12px; cursor: pointer; text-align: center;
}
.wk-nav .wk-label:hover, .wk-nav .wk-label[aria-expanded="true"] { background: var(--panel); }
.wk-label span { color: var(--deep); font-size: 13px; }
.wk-pick {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px); max-height: min(360px, 60vh); overflow-y: auto;
  overscroll-behavior: contain; padding: 6px; background: var(--panel); border-radius: var(--radius-m); box-shadow: var(--shadow);
  border: 1px solid var(--line);
}
.wk-month { padding: 10px 10px 4px; font-size: 12px; font-weight: 800; color: var(--ink-soft); }
.wk-month::first-letter { text-transform: uppercase; }
.wk-opt {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 0; background: transparent;
  font: inherit; color: var(--ink); text-align: left; padding: 9px 10px; border-radius: 10px; cursor: pointer;
}
.wk-opt:hover, .wk-opt:focus-visible { background: var(--bg); }
.wk-opt small { color: var(--ink-soft); white-space: nowrap; }
.wk-opt.has small { color: var(--deep); font-weight: 700; }
.wk-opt.on { background: var(--deep-dark); color: #fff; }
.wk-opt.on small { color: #fff; }
.wk-opt .tag { font-size: 11px; }

/* Мои отчёты: статус и «Отозвать» рядом */
.rep-about { margin: -4px 0 12px; }
.rep-about summary { cursor: pointer; color: var(--deep); font-weight: 700; padding: 4px 0; }
.rep-about p { margin: 6px 0 0; }
/* Нижнее меню на узком экране (или с крупным шрифтом в телефоне): кнопки сжимаются, а не вылезают
   за край плашки; длинная подпись обрезается многоточием */
@media (max-width: 640px) {
  .nav { gap: 3px; }
  .nav > button { min-width: 0; padding-left: 2px; padding-right: 2px; overflow: hidden; }
  .nav > button { white-space: nowrap; text-overflow: ellipsis; }
  .nav > button .ico { overflow: visible; }
}
/* Мои отчёты: вся строка — голубая плашка; статус всегда под датой одной строкой (метка и время или «черновик»), «Отозвать» — справа вверху плашки */
.rep-row { position: relative; border-radius: 14px; background: var(--bg); }
.rep-row:hover, .rep-row:focus-within { background: var(--pool-a); }
.rep-row .rep-item { background: transparent; }
.rep-row .rep-item:hover, .rep-row .rep-item:focus-visible { background: transparent; }
.rep-status { display: flex; align-items: center; gap: 6px; min-height: 30px; white-space: nowrap; }
.rep-row.has-wd .rep-item > span:first-child { padding-right: 104px; }
.rep-wd { position: absolute; right: 10px; top: 8px; background: var(--panel); }
.cr-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.cr-head h2 { margin: 0; }
.cr-head > div { display: grid; gap: 2px; min-width: 0; }
.cr-head .muted { overflow-wrap: anywhere; }
/* Программы в карточке пользователя: метки с «×», «＋ программа» ведёт в «Ведение» */
.uc-progs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.uc-prog {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 10px; border-radius: 999px;
  background: var(--panel); border: 1px solid var(--line); font-size: 13px; font-weight: 700;
}
.uc-prog.paused { color: var(--ink-soft); border-style: dashed; }
.uc-prog-x {
  border: 0; background: transparent; color: var(--ink-soft); cursor: pointer; font: inherit; font-size: 16px;
  line-height: 1; padding: 2px 6px; border-radius: 999px;
}
.uc-prog-x:hover, .uc-prog-x:focus-visible { background: var(--bg); color: var(--berry-ink); }
.uc-prog-x.armed { background: var(--berry); color: #fff; font-size: 12px; }
.uc-prog-add {
  border: 1px dashed var(--line); background: transparent; color: var(--deep); cursor: pointer; font: inherit;
  font-size: 13px; font-weight: 700; padding: 2px 10px; border-radius: 999px;
}