/* FraySecret Mini App v2.3 — Sport Tracker: тёмный терминал, Space Grotesk, градиентные акценты */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700;800&display=swap');

:root {
  --bg: var(--tg-theme-bg-color, #0a0a0a);
  --card: var(--tg-theme-secondary-bg-color, #141414);
  --text: var(--tg-theme-text-color, #f0f0f0);
  --hint: var(--tg-theme-hint-color, #666);
  --link: var(--tg-theme-link-color, #00e5a0);
  --accent: var(--tg-theme-button-color, #00e5a0);
  --accent-text: var(--tg-theme-button-text_color, #0a0a0a);
  --danger: #ff4d6d;
  --ok: #00e5a0;
  --gold: #ffd166;
  --grad: linear-gradient(90deg, #00e5a0, #00c4ff);
  --grad-danger: linear-gradient(90deg, #ff4d6d, #ff9a3c);
  --ring-track: rgba(255,255,255,.08);
  --hairline: rgba(255,255,255,.07);
  --grout: rgba(255,255,255,.13);
  --shadow: 0 2px 12px rgba(0,0,0,.4);
  --r: 14px;
  --r-sheet: 22px;
  --font: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-num: 'Space Grotesk', ui-monospace, monospace;
  --chart-blue: #00c4ff;
  --chart-green: #00e5a0;
  --candle-up: #00e5a0;
  --candle-down: #ff4d6d;
}

.ring-big, .ds-value, .verdict-num, .streak-num, .xp-count, .medal-days,
.entry-kcal, .meal-kcal, .lb-cell, .lb-streak, .macro-val, .invite-code,
.stat-tile .v, .plan-price, .wk-table td, .candle-info b, .gw-total, .gg-nums {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

html:not([data-theme]) .dark-scheme,
html:not([data-theme]) [data-dark="1"] {
  --hint: #777;
  --ok: #00e5a0;
  --danger: #ff4d6d;
  --gold: #ffd166;
  --chart-blue: #00c4ff;
  --chart-green: #00e5a0;
  --candle-up: #00e5a0;
  --candle-down: #ff4d6d;
  --grout: rgba(255,255,255,.16);
}

/* Светлая тема */
[data-theme="light"] {
  --bg: #f0f2f0; --card: #ffffff; --text: #111; --hint: #888;
  --link: #00a372; --accent: #00a372; --accent-text: #fff;
  --ok: #00a372; --danger: #e0284a; --gold: #d4a017;
  --grad: linear-gradient(90deg, #00a372, #0090c4);
  --grad-danger: linear-gradient(90deg, #e0284a, #f07030);
  --chart-blue: #0090c4; --chart-green: #00a372;
  --candle-up: #00a372; --candle-down: #e0284a;
  --ring-track: rgba(0,0,0,.08);
  --hairline: rgba(0,0,0,.08);
  --grout: rgba(0,0,0,.15);
  --shadow: 0 2px 10px rgba(0,0,0,.08);
}

/* Тёмная тема */
[data-theme="dark"] {
  --bg: #0a0a0a; --card: #141414; --text: #f0f0f0; --hint: #666;
  --link: #00e5a0; --accent: #00e5a0; --accent-text: #0a0a0a;
  --ok: #00e5a0; --danger: #ff4d6d; --gold: #ffd166;
  --grad: linear-gradient(90deg, #00e5a0, #00c4ff);
  --grad-danger: linear-gradient(90deg, #ff4d6d, #ff9a3c);
  --chart-blue: #00c4ff; --chart-green: #00e5a0;
  --candle-up: #00e5a0; --candle-down: #ff4d6d;
  --ring-track: rgba(255,255,255,.08);
  --hairline: rgba(255,255,255,.07);
  --grout: rgba(255,255,255,.13);
  --shadow: 0 2px 12px rgba(0,0,0,.4);
}

/* OKX — чёрный терминал, лаймовый акцент, острые углы, моношрифт */
[data-theme="crypto"] {
  --bg: #000; --card: #101010; --text: #f2f2f2; --hint: #555;
  --link: #b8ef3e; --accent: #f5f5f5; --accent-text: #0a0a0a;
  --ok: #b8ef3e; --danger: #f236a4; --gold: #c7f23a;
  --grad: linear-gradient(90deg, #b8ef3e, #c7f23a);
  --grad-danger: linear-gradient(90deg, #f236a4, #ff6ec7);
  --chart-blue: #c7f23a; --chart-green: #b8ef3e;
  --candle-up: #b8ef3e; --candle-down: #f236a4;
  --hairline: #1d1d1d; --grout: #2a2a2a;
  --shadow: none; --r: 4px;
  --font: "SF Mono","Cascadia Mono","Roboto Mono",ui-monospace,Consolas,monospace;
}
[data-theme="crypto"] .card { border: 1px solid #1d1d1d; }
[data-theme="crypto"] .tabbar { border-top-color: #1d1d1d; }
[data-theme="crypto"] .wd-ring.done,
[data-theme="crypto"] .habit.done .habit-box { color: #0a0a0a; }

/* Binance — угольный фон, фирменное золото #F0B90B, плотная вёрстка */
[data-theme="binance"] {
  --bg: #0b0e11; --card: #181a20; --text: #eaecef; --hint: #848e9c;
  --link: #f0b90b; --accent: #fcd535; --accent-text: #14151a;
  --ok: #0ecb81; --danger: #f6465d; --gold: #f0b90b;
  --grad: linear-gradient(90deg, #f0b90b, #fcd535);
  --grad-danger: linear-gradient(90deg, #f6465d, #ff8a4c);
  --chart-blue: #f0b90b; --chart-green: #0ecb81;
  --candle-up: #0ecb81; --candle-down: #f6465d;
  --ring-track: rgba(255,255,255,.07);
  --hairline: #2b3139; --grout: #3c434d;
  --shadow: none; --r: 8px; --r-sheet: 12px;
}
[data-theme="binance"] .card { border: 1px solid #2b3139; }
[data-theme="binance"] .tabbar { border-top-color: #2b3139; }
[data-theme="binance"] .btn,
[data-theme="binance"] .wd-ring.done,
[data-theme="binance"] .habit.done .habit-box { color: #14151a; }

/* TON Keeper — глубокий синий, воздушные скругления, акцент #45AEF5 */
[data-theme="ton"] {
  --bg: #10161f; --card: #1a2332; --text: #ffffff; --hint: #8994a3;
  --link: #45aef5; --accent: #45aef5; --accent-text: #06121f;
  --ok: #39cc83; --danger: #ff4766; --gold: #ffcf5c;
  --grad: linear-gradient(90deg, #0098ea, #45aef5);
  --grad-danger: linear-gradient(90deg, #ff4766, #ff9351);
  --chart-blue: #45aef5; --chart-green: #39cc83;
  --candle-up: #39cc83; --candle-down: #ff4766;
  --ring-track: rgba(255,255,255,.09);
  --hairline: rgba(255,255,255,.08);
  --grout: rgba(255,255,255,.14);
  --shadow: 0 6px 24px rgba(0,0,0,.35);
  --r: 20px; --r-sheet: 26px;
}
[data-theme="ton"] .btn { box-shadow: 0 6px 18px rgba(69,174,245,.28); }
[data-theme="ton"] .wd-ring.done,
[data-theme="ton"] .habit.done .habit-box { color: #06121f; }

/* ---------- Темы версии 3.1 ---------- */

/* Bybit — графит, фирменный оранжевый #F7A600, спокойные скругления */
[data-theme="bybit"] {
  --bg: #101014; --card: #1a1b21; --text: #f4f4f6; --hint: #7f8596;
  --link: #f7a600; --accent: #f7a600; --accent-text: #14151a;
  --ok: #20b26c; --danger: #ef454a; --gold: #f7a600;
  --grad: linear-gradient(90deg, #f7a600, #ffc95c);
  --grad-danger: linear-gradient(90deg, #ef454a, #ff8a4c);
  --chart-blue: #f7a600; --chart-green: #20b26c;
  --candle-up: #20b26c; --candle-down: #ef454a;
  --ring-track: rgba(255,255,255,.07);
  --hairline: #262832; --grout: #363945;
  --shadow: none; --r: 10px; --r-sheet: 14px;
}
[data-theme="bybit"] .card { border: 1px solid #262832; }
[data-theme="bybit"] .tabbar { border-top-color: #262832; }
[data-theme="bybit"] .btn,
[data-theme="bybit"] .wd-ring.done,
[data-theme="bybit"] .habit.done .habit-box { color: #14151a; }

/* Зал — угольный бетон, кислотный оранжевый, острые углы, широкий шрифт */
[data-theme="gym"] {
  --bg: #0e0e0e; --card: #1a1a1a; --text: #fafafa; --hint: #6e6e6e;
  --link: #ff6b00; --accent: #ff6b00; --accent-text: #0e0e0e;
  --ok: #c6ff00; --danger: #ff3b30; --gold: #ffb300;
  --grad: linear-gradient(90deg, #ff6b00, #ffb300);
  --grad-danger: linear-gradient(90deg, #ff3b30, #ff6b00);
  --chart-blue: #ffb300; --chart-green: #c6ff00;
  --candle-up: #c6ff00; --candle-down: #ff3b30;
  --ring-track: rgba(255,255,255,.08);
  --hairline: #262626; --grout: #383838;
  --shadow: none; --r: 6px; --r-sheet: 10px;
}
[data-theme="gym"] .card { border: 1px solid #262626; }
[data-theme="gym"] .tabbar { border-top-color: #262626; }
[data-theme="gym"] .card-title { letter-spacing: .2em; }
[data-theme="gym"] .btn { text-transform: uppercase; letter-spacing: .08em; }
[data-theme="gym"] .wd-ring.done,
[data-theme="gym"] .habit.done .habit-box { color: #0e0e0e; }

/* Матча — светлая тёплая, зелёный чай, мягкие скругления */
[data-theme="matcha"] {
  --bg: #f3f1e7; --card: #fffdf6; --text: #26301f; --hint: #8b917c;
  --link: #5f8b3a; --accent: #6b9c42; --accent-text: #fffdf6;
  --ok: #6b9c42; --danger: #c4553d; --gold: #c9a227;
  --grad: linear-gradient(90deg, #6b9c42, #a8c85a);
  --grad-danger: linear-gradient(90deg, #c4553d, #e08a3c);
  --chart-blue: #a8c85a; --chart-green: #6b9c42;
  --candle-up: #6b9c42; --candle-down: #c4553d;
  --ring-track: rgba(38,48,31,.09);
  --hairline: rgba(38,48,31,.10); --grout: rgba(38,48,31,.18);
  --shadow: 0 3px 14px rgba(70,80,50,.10);
  --r: 18px; --r-sheet: 24px;
}

/* Сакура — светлая розовая, воздушная, крупные скругления */
[data-theme="sakura"] {
  --bg: #fdf3f6; --card: #ffffff; --text: #3a2830; --hint: #a8909a;
  --link: #d9527a; --accent: #e8688f; --accent-text: #ffffff;
  --ok: #4bb98a; --danger: #e2455f; --gold: #e0a94f;
  --grad: linear-gradient(90deg, #e8688f, #f9a8c4);
  --grad-danger: linear-gradient(90deg, #e2455f, #f58a6a);
  --chart-blue: #f9a8c4; --chart-green: #4bb98a;
  --candle-up: #4bb98a; --candle-down: #e2455f;
  --ring-track: rgba(58,40,48,.08);
  --hairline: rgba(58,40,48,.09); --grout: rgba(58,40,48,.16);
  --shadow: 0 4px 18px rgba(200,120,150,.14);
  --r: 22px; --r-sheet: 28px;
}
[data-theme="sakura"] .btn { box-shadow: 0 6px 18px rgba(232,104,143,.26); }

/* Кофе — тёмная тёплая: эспрессо, карамель, без холодных цветов */
[data-theme="coffee"] {
  --bg: #171110; --card: #221917; --text: #f0e4da; --hint: #9a8579;
  --link: #d99b5e; --accent: #c9854a; --accent-text: #171110;
  --ok: #a6bf6a; --danger: #d9614a; --gold: #e0b168;
  --grad: linear-gradient(90deg, #c9854a, #e0b168);
  --grad-danger: linear-gradient(90deg, #d9614a, #e08a4a);
  --chart-blue: #e0b168; --chart-green: #a6bf6a;
  --candle-up: #a6bf6a; --candle-down: #d9614a;
  --ring-track: rgba(255,255,255,.07);
  --hairline: #322520; --grout: #45332c;
  --shadow: 0 3px 16px rgba(0,0,0,.45);
  --r: 16px; --r-sheet: 22px;
}
[data-theme="coffee"] .card { border: 1px solid #322520; }
[data-theme="coffee"] .tabbar { border-top-color: #322520; }
[data-theme="coffee"] .wd-ring.done,
[data-theme="coffee"] .habit.done .habit-box { color: #171110; }

/* Неон — чёрный с розово-голубым свечением */
[data-theme="neon"] {
  --bg: #06040d; --card: #120e1f; --text: #f1ebff; --hint: #6d6390;
  --link: #00f0ff; --accent: #ff2fd0; --accent-text: #06040d;
  --ok: #00f0ff; --danger: #ff3b6b; --gold: #ffd45c;
  --grad: linear-gradient(90deg, #ff2fd0, #00f0ff);
  --grad-danger: linear-gradient(90deg, #ff3b6b, #ff9a3c);
  --chart-blue: #00f0ff; --chart-green: #ff2fd0;
  --candle-up: #00f0ff; --candle-down: #ff3b6b;
  --ring-track: rgba(255,255,255,.08);
  --hairline: #241a3d; --grout: #3a2a5e;
  --shadow: 0 4px 22px rgba(160,60,255,.22);
  --r: 14px; --r-sheet: 20px;
}
[data-theme="neon"] .card { border: 1px solid #241a3d; }
[data-theme="neon"] .tabbar { border-top-color: #241a3d; }
[data-theme="neon"] .btn { box-shadow: 0 0 20px rgba(255,47,208,.45); }
[data-theme="neon"] .wd-ring.done,
[data-theme="neon"] .habit.done .habit-box { color: #06040d; }

/* Терминал — зелёный монохром на чёрном, моношрифт, острые углы */
[data-theme="terminal"] {
  --bg: #000000; --card: #050b06; --text: #33ff66; --hint: #1d7a3c;
  --link: #33ff66; --accent: #33ff66; --accent-text: #000000;
  --ok: #33ff66; --danger: #ff5555; --gold: #d4ff4d;
  --grad: linear-gradient(90deg, #1d7a3c, #33ff66);
  --grad-danger: linear-gradient(90deg, #ff5555, #ffaa33);
  --chart-blue: #d4ff4d; --chart-green: #33ff66;
  --candle-up: #33ff66; --candle-down: #ff5555;
  --ring-track: rgba(51,255,102,.12);
  --hairline: #10381c; --grout: #1d5e30;
  --shadow: none; --r: 2px; --r-sheet: 4px;
  --font: "SF Mono","Cascadia Mono","Roboto Mono",ui-monospace,Consolas,monospace;
}
[data-theme="terminal"] .card { border: 1px solid #10381c; }
[data-theme="terminal"] .tabbar { border-top-color: #10381c; }
[data-theme="terminal"] .wd-ring.done,
[data-theme="terminal"] .habit.done .habit-box { color: #000; }

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.4;
  overscroll-behavior-y: none;
}

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }

#app {
  max-width: 560px;
  margin: 0 auto;
  padding: 16px 14px calc(90px + env(safe-area-inset-bottom));
  min-height: 100vh;
}

/* ---------- Загрузка ---------- */
.boot { display: flex; flex-direction: column; align-items: center; gap: 14px; padding-top: 40vh; }
.boot-ring {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid var(--ring-track); border-top-color: var(--accent);
  animation: spin 0.9s linear infinite;
}
.boot-text { color: var(--hint); font-size: 14px; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .boot-ring { animation: none; }
  * { transition: none !important; }
}

/* ---------- Карточки ---------- */
.card {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 16px;
  margin-bottom: 12px;
}
.card-title {
  font-size: 10px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--hint);
  padding-bottom: 10px; margin-bottom: 14px;
  border-bottom: 1px solid var(--hairline);
}

.h1 { font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 4px; }
.sub { color: var(--hint); font-size: 14px; }

/* ---------- Серия (стрик) ---------- */
.streak-card { display: flex; align-items: center; gap: 14px; position: relative; cursor: pointer; }
.streak-medal {
  position: absolute; top: 10px; right: 12px;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  background: color-mix(in srgb, var(--gold) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent);
  border-radius: 12px; padding: 5px 9px;
}
.streak-medal-emoji { font-size: 20px; line-height: 1; }
.streak-medal-days { font-size: 9px; font-weight: 700; color: var(--gold); white-space: nowrap; }
.streak-num {
  font-size: 48px; font-weight: 800; line-height: 1;
  display: flex; align-items: baseline; gap: 4px;
  background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.streak-num .fire { font-size: 28px; -webkit-text-fill-color: initial; }
.streak-info { flex: 1; }
.streak-info .sub { font-size: 13px; }
.week-dots { display: flex; gap: 8px; margin-top: 10px; }
.wd { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 1; }
.wd-ring {
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid var(--ring-track);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: var(--accent-text);
}
.wd-ring.done { background: var(--ok); border-color: var(--ok); }
.wd-ring.today { border-color: var(--accent); }
.wd-label { font-size: 10px; color: var(--hint); }

/* ---------- Кольцо дня ---------- */
.day-hero { display: flex; align-items: center; gap: 18px; }
.ring-wrap { position: relative; width: 132px; height: 132px; flex-shrink: 0; }
.ring-wrap svg { transform: rotate(-90deg); }
.ring-center {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
}
.ring-big { font-size: 28px; font-weight: 800; line-height: 1.1; }
.ring-small { font-size: 11px; color: var(--hint); }
.day-stats { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.ds-row { display: flex; justify-content: space-between; align-items: baseline; }
.ds-label { font-size: 13px; color: var(--hint); }
.ds-value { font-size: 16px; font-weight: 700; }
.ds-value.neg { color: var(--danger); }
.ds-norm { width: 100%; text-align: left; border-radius: 8px; }
.ds-norm:active { opacity: .6; }

/* ---------- Крупный итог дня ---------- */
.verdict {
  text-align: center; padding: 14px 0 4px; margin-top: 14px;
  border-top: 1px solid var(--hairline);
}
.verdict-num {
  font-size: 52px; font-weight: 800; line-height: 1.1;
  letter-spacing: -.03em;
}
.verdict-num.good { background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.verdict-num.bad { background: var(--grad-danger); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.verdict-label { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.verdict-label.good { color: var(--ok); }
.verdict-label.bad { color: var(--danger); }
.verdict-label.mute { color: var(--hint); }

/* ---------- Цели дня (галочки) ---------- */
.section-label {
  font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--hint); margin: 18px 2px 8px;
}
.habits-card { border-left: 3px solid var(--accent); }
.habits-head { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
.habits-progress { display: flex; align-items: center; gap: 10px; flex: 1; }
.habits-progress .xp-bar { margin-top: 0; }
.habits-count { font-size: 20px; font-weight: 800; }
.habits-total { font-size: 13px; color: var(--hint); font-weight: 700; }
.habit {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 12px 0; border-bottom: 1px solid var(--hairline);
}
.habit:last-of-type { border-bottom: 0; }
.habit-box {
  width: 30px; height: 30px; border-radius: 10px; flex-shrink: 0;
  border: 2px solid var(--ring-track);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; color: var(--accent-text);
  transition: transform .12s, background .12s;
}
.habit.done .habit-box { background: var(--ok); border-color: var(--ok); }
.habit:active .habit-box { transform: scale(.88); }
.habit-emoji { font-size: 18px; }
.habit-title { flex: 1; font-size: 14px; font-weight: 600; }
.habit.done .habit-title { color: var(--hint); text-decoration: line-through; }
.habit-xp { font-size: 11px; font-weight: 800; color: var(--gold); white-space: nowrap; }
.habit-del { color: var(--hint); font-size: 14px; padding: 4px 6px; }

/* Цели: пометка разовой цели и кнопка «Изменить» (v2.6) */
.habit-once {
  display: block; font-style: normal; font-size: 10px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--hint); margin-top: 2px;
}
.habits-edit { margin-top: 12px; }

/* Шторка «Мои цели» */
.ge-list { margin-bottom: 10px; }
.ge-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--hairline);
}
.ge-row:last-child { border-bottom: 0; }
.ge-emoji { font-size: 18px; }
.ge-title { flex: 1; font-size: 14px; font-weight: 600; }
.ge-mode {
  font-size: 11px; font-weight: 700; white-space: nowrap;
  padding: 6px 10px; border-radius: 999px;
  background: var(--accent-soft, rgba(0, 229, 160, .14));
  color: var(--accent); border: 1px solid transparent;
}
.ge-mode.once { background: none; color: var(--hint); border-color: var(--hairline); }
.ge-del { color: var(--hint); font-size: 15px; padding: 4px 2px; }
.ge-count { font-size: 12px; text-align: center; padding-bottom: 4px; }

/* ---------- XP и уровень ---------- */
.xp-card { display: flex; align-items: center; gap: 14px; }
.xp-medal {
  width: 48px; height: 48px; border-radius: 14px; flex-shrink: 0;
  background: color-mix(in srgb, var(--gold) 16%, transparent);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 900; color: var(--gold);
}
.xp-info { flex: 1; min-width: 0; }
.xp-top { display: flex; justify-content: space-between; align-items: baseline; }
.xp-lvl { font-weight: 800; font-size: 14px; }
.xp-count { font-size: 11px; color: var(--hint); font-variant-numeric: tabular-nums; }
.xp-bar { height: 8px; border-radius: 4px; background: var(--ring-track); overflow: hidden; margin-top: 8px; }
.xp-bar i { display: block; height: 100%; border-radius: 4px; background: var(--grad); }

/* ---------- Медали за серию ---------- */
.medal-shelf { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.medal {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  width: 60px; padding: 10px 4px 8px; border-radius: var(--r);
  background: color-mix(in srgb, var(--gold) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold) 28%, transparent);
}
.medal-emoji { font-size: 26px; line-height: 1; }
.medal-days { font-size: 10px; font-weight: 700; color: var(--hint); font-variant-numeric: tabular-nums; }
.medal-next { display: flex; align-items: center; gap: 12px; }
.medal-next-emoji {
  font-size: 28px; width: 50px; height: 50px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 14px; background: var(--ring-track);
  filter: grayscale(1); opacity: .6;
}
.medal-next-info { flex: 1; min-width: 0; }
.medal-next-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; }

/* ---------- Свечной график ---------- */
.candle-info {
  display: flex; gap: 14px; font-size: 11px; color: var(--hint);
  margin-bottom: 8px; flex-wrap: wrap;
}
.candle-info b { font-variant-numeric: tabular-nums; }
.candle-info .up { color: var(--candle-up); }
.candle-info .down { color: var(--candle-down); }

/* ---------- Выбор темы ---------- */
/* auto-fill: на телефоне два столбца, на широком экране — три и больше */
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 8px; }
.theme-opt {
  border: 2px solid var(--hairline); border-radius: 14px; padding: 10px;
  text-align: center; font-size: 12.5px; font-weight: 700;
}
.theme-opt.on { border-color: var(--accent); }
.theme-chip {
  height: 34px; border-radius: 10px; margin-bottom: 7px;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  font-size: 12px; font-weight: 800; overflow: hidden; white-space: nowrap;
}

/* ---------- Макросы ---------- */
.macro-row { display: flex; gap: 6px; margin-top: 14px; }
.macro { flex: 1; text-align: center; }
.macro-name { font-size: 11px; color: var(--hint); margin-bottom: 4px; }
.macro-val { font-size: 13px; font-weight: 700; }
.macro-bar { height: 5px; border-radius: 3px; background: var(--ring-track); margin-top: 5px; overflow: hidden; }
.macro-bar i { display: block; height: 100%; border-radius: 3px; background: var(--accent); }

/* ---------- Приёмы пищи ---------- */
.meal-card { padding: 0; overflow: hidden; }
.meal-head { display: flex; align-items: center; gap: 10px; padding: 13px 16px; }
.meal-emoji { font-size: 18px; }
.meal-name {
  flex: 1; font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
}
.meal-kcal { color: var(--hint); font-size: 14px; font-weight: 700; }
.meal-add {
  width: 32px; height: 32px; border-radius: var(--r);
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  color: var(--accent); font-size: 20px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.meal-items { border-top: 1px solid var(--hairline); }
.entry {
  display: flex; align-items: baseline; gap: 8px;
  padding: 10px 15px; border-bottom: 1px solid var(--hairline);
}
.entry:last-child { border-bottom: 0; }
.entry-name { font-size: 14px; }
.entry-dots { flex: 1; min-width: 14px; height: 1px; align-self: center; border-bottom: 1px dotted var(--grout); }
.entry-kcal { font-size: 13px; font-weight: 700; white-space: nowrap; }
.entry-del { color: var(--hint); font-size: 16px; padding: 4px 6px; align-self: center; }

/* ---------- Кнопки ---------- */
.btn {
  display: block; width: 100%; text-align: center;
  background: var(--accent); color: var(--accent-text);
  border: 1px solid var(--accent);
  border-radius: var(--r); padding: 14px; font-weight: 700; font-size: 15px;
  letter-spacing: .01em;
  transition: opacity .15s;
}
.btn:active { opacity: .8; }
.btn.ghost {
  background: none; color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
.btn.small { width: auto; padding: 8px 16px; font-size: 13px; display: inline-block; }
.btn.danger {
  background: none; color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 40%, transparent);
}
.btn[disabled] { opacity: .4; pointer-events: none; }

/* ---------- Формы ---------- */
.field { margin-bottom: 14px; }
.field label {
  display: block; font-size: 10px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--hint); margin-bottom: 8px;
}
.field input, .field select {
  width: 100%; background: var(--bg); border: 1px solid var(--grout);
  border-radius: var(--r); padding: 13px; font-size: 16px; outline: none;
}
.field input[type="number"] { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.field input:focus, .field select:focus { border-color: var(--accent); }
.seg { display: flex; gap: 6px; }
.seg button {
  flex: 1; padding: 10px; border-radius: var(--r); font-size: 14px; font-weight: 600;
  background: none; border: 1px solid var(--hairline);
}
.seg button.on { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }

/* ---------- Шторка ---------- */
.sheet-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 40;
  animation: fade .18s;
}
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  max-width: 560px; margin: 0 auto;
  background: var(--card); border-radius: var(--r-sheet) var(--r-sheet) 0 0;
  padding: 10px 16px calc(24px + env(safe-area-inset-bottom));
  max-height: 86vh; overflow-y: auto;
  animation: rise .22s ease-out;
}
/* шторка с закреплённым низом (ручной ввод) — своё нижнее поле не нужно */
.sheet.sticky-foot { padding-bottom: 0; }
.sheet-grip { width: 40px; height: 4px; border-radius: 2px; background: var(--grout); margin: 0 auto 16px; }
.sheet h2 { font-size: 19px; font-weight: 800; margin-bottom: 16px; letter-spacing: -.01em; }
@keyframes rise { from { transform: translateY(40%); opacity: .4; } }
@keyframes fade { from { opacity: 0; } }

/* ---------- Поиск ---------- */
.search-box {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg); border-radius: 14px; padding: 10px 14px; margin-bottom: 10px;
}
.search-box input { flex: 1; background: none; border: 0; outline: none; font-size: 16px; }
.pick-item {
  display: flex; justify-content: space-between; align-items: center;
  width: 100%; text-align: left; padding: 12px 4px;
  border-bottom: 1px solid var(--hairline); font-size: 15px;
}
.pick-item span:last-child { color: var(--hint); font-size: 13px; white-space: nowrap; margin-left: 10px; }

/* Ручной ввод всегда виден внизу шторки — список продуктов скроллится над ним */
.s-results { padding-bottom: 4px; }
.man-box {
  position: sticky; bottom: 0; z-index: 2;
  background: var(--card);
  margin: 10px -16px 0; padding: 10px 16px calc(4px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--hairline);
  box-shadow: 0 -14px 20px -14px rgba(0, 0, 0, .55);
}
.man-title { font-size: 12px; color: var(--hint); margin-bottom: 8px; }
.man-box .field { margin-bottom: 8px; }
.man-box .field input { padding: 11px 13px; }

/* ---------- График недели ---------- */
.chart-wrap { margin-top: 4px; }
.chart-legend { display: flex; gap: 16px; margin-bottom: 10px; font-size: 12px; color: var(--hint); }
.chart-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.wk-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 12px; }
.wk-table th { text-align: right; color: var(--hint); font-weight: 500; padding: 6px 4px; border-bottom: 1px solid var(--hairline); }
.wk-table th:first-child, .wk-table td:first-child { text-align: left; }
.wk-table td { text-align: right; padding: 6px 4px; border-bottom: 1px solid var(--hairline); font-variant-numeric: tabular-nums; }

/* ---------- Группы ---------- */
.group-row {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 14px 16px; border-bottom: 1px solid var(--hairline);
}
.group-row:last-child { border-bottom: 0; }
.group-ava {
  width: 44px; height: 44px; border-radius: 14px; flex-shrink: 0;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent); font-weight: 800; font-size: 18px;
  display: flex; align-items: center; justify-content: center;
}
.group-meta { flex: 1; min-width: 0; }
.group-name { font-weight: 700; font-size: 15px; }
.group-sub { color: var(--hint); font-size: 13px; }
.chev { color: var(--hint); }

.lb-row { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--hairline); }
.lb-row:last-child { border-bottom: 0; }
.lb-place { width: 24px; text-align: center; font-weight: 800; color: var(--hint); font-size: 14px; }
.lb-name { flex: 1; font-size: 14px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-cell { text-align: right; font-size: 13px; font-variant-numeric: tabular-nums; }
.lb-cell .u { display: block; font-size: 10px; color: var(--hint); }
.lb-streak { min-width: 40px; text-align: right; font-weight: 700; font-size: 13px; }
.badge {
  display: inline-block; font-size: 11px; font-weight: 700;
  border-radius: 20px; padding: 3px 10px;
  background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok);
}
.badge.gray { background: var(--ring-track); color: var(--hint); }

.prog { height: 8px; border-radius: 4px; background: var(--ring-track); overflow: hidden; margin-top: 6px; }
.prog i { display: block; height: 100%; border-radius: 4px; background: var(--grad); }
.prog i.full { background: var(--ok); }

.invite-code {
  font-size: 26px; font-weight: 800; letter-spacing: .2em;
  text-align: center; padding: 14px; border-radius: 14px;
  background: var(--bg); margin: 8px 0;
  font-variant-numeric: tabular-nums;
}

/* ---------- Трекер жидкости ---------- */
.water-card { border-left: 3px solid #00c4ff; }
.water-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.water-title { font-size: 14px; font-weight: 800; }
.water-count { font-size: 13px; color: var(--hint); }
.water-count b { color: #00c4ff; font-size: 16px; }
.water-glasses { display: flex; gap: 6px; margin-bottom: 8px; }
.water-glass {
  flex: 1; text-align: center; font-size: 16px; line-height: 30px;
  background: var(--ring-track); border-radius: 8px; color: var(--hint);
}
.water-glass.full { background: color-mix(in srgb, #00c4ff 16%, transparent); }
.water-btns { display: flex; gap: 8px; margin-top: 12px; }
.water-btn {
  flex: 1; padding: 8px 4px; border-radius: 10px;
  background: var(--ring-track); font-size: 12px; font-weight: 700;
  color: var(--text); line-height: 1.4;
}
.water-btn span { font-size: 10px; color: var(--hint); font-weight: 600; }
.water-btn:active { opacity: .7; }
.water-btn.undo { flex: .6; }

/* ---------- Календарь ---------- */
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.cal-nav {
  width: 36px; height: 36px; border-radius: 10px; font-size: 20px; font-weight: 700;
  background: var(--ring-track); color: var(--text);
}
.cal-nav:disabled { opacity: .3; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-wd { text-align: center; font-size: 10px; font-weight: 700; color: var(--hint); padding: 4px 0; }
.cal-cell {
  aspect-ratio: 1; border-radius: 10px; background: var(--ring-track);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
}
.cal-cell.empty { background: transparent; }
.cal-cell.future { opacity: .35; }
.cal-cell.good { background: color-mix(in srgb, var(--ok) 18%, transparent); }
.cal-cell.bad { background: color-mix(in srgb, var(--danger) 16%, transparent); }
.cal-cell.today { outline: 2px solid var(--accent); outline-offset: -2px; }
.cal-num { font-size: 13px; font-weight: 700; }
.cal-cell.good .cal-num { color: var(--ok); }
.cal-cell.bad .cal-num { color: var(--danger); }
.cal-kcal { font-size: 8px; color: var(--hint); font-weight: 600; }
.cal-legend { display: flex; gap: 14px; margin-top: 12px; font-size: 11px; color: var(--hint); }
.cal-legend span { display: flex; align-items: center; gap: 5px; }
.cal-dot { width: 10px; height: 10px; border-radius: 3px; background: var(--ring-track); display: inline-block; }
.cal-dot.good { background: var(--ok); }
.cal-dot.bad { background: var(--danger); }

/* ---------- Paywall ---------- */
.pay-hero { text-align: center; padding: 26px 16px 18px; }
.pay-hero .big { font-size: 48px; }
.plan {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  border: 2px solid var(--hairline); border-radius: 16px; padding: 14px; margin-bottom: 10px;
}
.plan.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, transparent); }
.plan-title { font-weight: 700; flex: 1; }
.plan-price { font-weight: 800; font-size: 17px; }
.plan-per { display: block; font-size: 11px; color: var(--hint); font-weight: 500; }

/* ---------- Админка ---------- */
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stat-tile { background: var(--bg); border-radius: 14px; padding: 14px; }
.stat-tile .v { font-size: 24px; font-weight: 800; }
.stat-tile .l { font-size: 11px; color: var(--hint); margin-top: 2px; }
.admin-user { padding: 12px 0; border-bottom: 1px solid var(--hairline); }
.admin-user:last-child { border-bottom: 0; }
.au-top { display: flex; align-items: center; gap: 8px; }
.au-name { font-weight: 700; flex: 1; font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.au-id { color: var(--hint); font-size: 12px; }
.au-sub { color: var(--hint); font-size: 12px; margin-top: 2px; }
.au-actions { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }

/* ---------- ИИ-консультант ---------- */
.ai-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px; margin: 6px 0 12px;
}
.ai-clear {
  flex: none; font-size: 12px; font-weight: 700; color: var(--hint);
  background: var(--card); border: 1px solid var(--hairline);
  border-radius: 20px; padding: 6px 12px;
}
/* лента сообщений: снизу оставляем место под поле ввода и таббар */
.ai-feed { display: flex; flex-direction: column; gap: 8px; padding-bottom: 76px; }

.ai-msg {
  max-width: 86%; padding: 10px 13px; font-size: 14.5px; line-height: 1.45;
  border-radius: 16px; word-wrap: break-word; animation: fade .18s;
}
.ai-msg.me {
  align-self: flex-end; background: var(--accent); color: var(--accent-text);
  border-bottom-right-radius: 6px; font-weight: 500;
}
.ai-msg.bot {
  align-self: flex-start; background: var(--card);
  border: 1px solid var(--hairline); border-bottom-left-radius: 6px;
}
.ai-msg.err {
  align-self: flex-start; font-size: 13.5px;
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger) 26%, transparent);
  color: var(--danger);
}
.ai-msg.typing { display: flex; gap: 4px; align-items: center; padding: 14px 15px; }
.ai-msg.typing i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--hint);
  animation: aidot 1s infinite;
}
.ai-msg.typing i:nth-child(2) { animation-delay: .15s; }
.ai-msg.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes aidot { 0%, 60%, 100% { opacity: .3 } 30% { opacity: 1 } }

.ai-hello { text-align: center; padding: 34px 12px 10px; }
.ai-hello-icon { font-size: 34px; margin-bottom: 8px; }
.ai-hello-title { font-size: 17px; font-weight: 800; margin-bottom: 4px; }
.ai-hints { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin-top: 16px; }
.ai-hint {
  font-size: 13px; font-weight: 600; color: var(--text);
  background: var(--card); border: 1px solid var(--hairline);
  border-radius: 20px; padding: 8px 13px;
}
.ai-hint:active { opacity: .7; }
.ai-locked { text-align: center; font-size: 13.5px; color: var(--hint); }

.ai-bar {
  position: fixed; left: 0; right: 0; z-index: 31;
  bottom: calc(62px + env(safe-area-inset-bottom));
  max-width: 560px; margin: 0 auto; padding: 8px 14px;
  display: flex; align-items: flex-end; gap: 8px;
  background: var(--bg); border-top: 1px solid var(--hairline);
}
.ai-bar textarea {
  flex: 1; resize: none; max-height: 96px;
  font-family: var(--font); font-size: 15px; line-height: 1.35;
  color: var(--text); background: var(--card);
  border: 1px solid var(--hairline); border-radius: 18px; padding: 11px 14px;
}
.ai-send {
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  background: var(--accent); color: var(--accent-text);
  display: flex; align-items: center; justify-content: center;
}
.ai-send svg { width: 20px; height: 20px; }
.ai-send:disabled { opacity: .45; }

/* ---------- Выбор нейросети ---------- */
.ai-models {
  display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px;
  scrollbar-width: none; margin-bottom: 10px;
}
.ai-models::-webkit-scrollbar { display: none; }
.ai-model {
  flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 14px; border-radius: var(--r); background: var(--card);
  border: 1.5px solid transparent; transition: border-color .15s; min-width: 80px;
}
.ai-model.on {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--card));
}
.ai-model-emoji { font-size: 20px; line-height: 1.2; }
.ai-model-title { font-size: 12.5px; font-weight: 700; }
.ai-model-time { font-size: 11px; color: var(--hint); }

/* ---------- Нижняя навигация ---------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  max-width: 560px; margin: 0 auto;
  display: flex; background: var(--card);
  border-top: 1px solid var(--hairline);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
}
.tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 4px 0; color: var(--hint); border-radius: 10px;
}
.tab.on { color: var(--accent); }
.tab-icon { width: 22px; height: 22px; }
[data-theme="crypto"] .tab.on { color: var(--link); }
.tab-label { font-size: 10px; font-weight: 600; white-space: nowrap; }

/* ---------- Тост ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom));
  transform: translateX(-50%); z-index: 60;
  background: var(--text); color: var(--bg);
  border-radius: 14px; padding: 11px 20px; font-size: 14px; font-weight: 600;
  max-width: 90vw; text-align: center;
  animation: fade .2s;
}

.empty { text-align: center; color: var(--hint); padding: 24px 10px; font-size: 14px; }
.row { display: flex; gap: 8px; }
.row > * { flex: 1; }
.mt { margin-top: 12px; }

button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* ---------- Вкладка «Цели» (v2.5) ---------- */
.act-card {
  display: flex; align-items: center; gap: 14px;
  cursor: pointer; position: relative;
}
.act-card:active { opacity: .85; }
.act-num {
  font-size: 44px; font-weight: 800; line-height: 1; flex: none;
  background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.act-num.neg {
  background: var(--grad-danger); -webkit-background-clip: text; background-clip: text;
}
.act-info { flex: 1; min-width: 0; }
.act-info > b { font-size: 15px; }
.act-mini { display: flex; gap: 18px; margin-top: 6px; }
.act-stat { display: flex; flex-direction: column; gap: 1px; }
.act-stat span {
  font-size: 10px; color: var(--hint);
  text-transform: uppercase; letter-spacing: .06em;
}
.act-stat b { font-size: 15px; white-space: nowrap; }
.act-hint {
  display: inline-block; font-size: 11px; font-weight: 700; color: var(--hint);
  margin-top: 8px; padding: 3px 8px; border-radius: 8px; background: var(--ring-track);
}
.act-chev { position: absolute; top: 12px; right: 14px; color: var(--hint); font-size: 15px; }

/* Шторка активности */
.kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
.kind {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  background: var(--bg); border: 1px solid var(--hairline); border-radius: 14px;
  padding: 10px 12px; text-align: left; color: var(--text);
}
.kind.on {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--bg));
}
.kind .k-emoji { font-size: 20px; line-height: 1.2; }
.kind .k-name { font-size: 13px; font-weight: 700; }
.kind .k-rate { font-size: 11px; color: var(--hint); }
.result-line {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  border-radius: 12px; padding: 10px 12px; text-align: center;
  font-size: 14px; margin: 12px 0;
}
.result-line b { font-size: 18px; color: var(--accent); }
.params-row { display: flex; gap: 8px; }
.param {
  flex: 1; display: flex; flex-direction: column; gap: 2px; align-items: center;
  background: var(--bg); border: 1px solid var(--hairline); border-radius: 12px;
  padding: 8px 10px; color: var(--text);
}
.param:active { opacity: .8; }
.param .sub { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.param b { font-size: 15px; }
.hairline { border-top: 1px solid var(--hairline); }

/* Всего целей + награды */
.total-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.total-num { font-size: 32px; font-weight: 800; line-height: 1.1; }
.next-award {
  display: flex; align-items: center; gap: 8px;
  background: color-mix(in srgb, var(--gold) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold) 25%, transparent);
  border-radius: 12px; padding: 6px 10px;
}
.na-emoji { font-size: 22px; }
.na-text { font-size: 10px; color: var(--hint); line-height: 1.35; }
.na-text b { font-size: 11px; color: var(--gold); }
.awards-row { display: flex; gap: 6px; justify-content: space-between; }
.award {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 22px; opacity: .3; filter: grayscale(1);
  padding: 6px 2px; border-radius: 12px;
}
.award.got { opacity: 1; filter: none; background: color-mix(in srgb, var(--gold) 8%, transparent); }
.award i { font-style: normal; font-size: 10px; font-weight: 700; color: var(--hint); }
.award.got i { color: var(--gold); }