/* =========================================================================
   EvilFox Fit — design system v2
   Класс-имена и CSS-переменные сохранены 1:1 с прежней версией (JS/inline
   стили на них завязаны). --main-color / --accent-glow остаются СПЛОШНЫМ
   цветом — их читает Chart.js через getComputedStyle.
   ========================================================================= */

:root {
    /* поверхности */
    --bg-base: #07090E;
    --bg-card: #12151E;
    --bg-card-hover: #1A1E2A;
    --bg-elev: #171B26;

    /* текст */
    --text-main: #F4F6FA;
    --text-sec: #8A93A6;
    --text-muted: #545C6E;

    /* акцент */
    --main-color: #FF8C1A;
    --accent-glow: rgba(255, 140, 26, 0.18);
    --accent-grad: linear-gradient(135deg, #FFA23D 0%, #FF7A00 100%);
    --accent-soft: rgba(255, 140, 26, 0.12);

    /* семантика */
    --danger: #FF4D46;
    --success: #2ED573;
    --warning: #FFC940;

    /* линии */
    --stroke: rgba(255, 255, 255, 0.06);
    --stroke-strong: rgba(255, 255, 255, 0.12);

    /* совместимость со старыми именами */
    --bg-color: var(--bg-base);
    --card-bg: var(--bg-card);

    /* радиусы / отступы */
    --rad-sm: 10px;
    --rad-md: 16px;
    --rad-lg: 24px;
    --gap-sm: 8px;
    --gap-md: 16px;
    --gap-lg: 24px;

    /* тени */
    --shadow-card: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px -12px rgba(0,0,0,0.55);
    --shadow-pop: 0 12px 40px -8px rgba(0,0,0,0.6), 0 0 0 1px var(--stroke);
    --shadow-nav: 0 -8px 32px -8px rgba(0,0,0,0.6);
    --shadow-accent: 0 8px 24px -6px rgba(255,122,0,0.45);

    --ease: cubic-bezier(0.32, 0.72, 0, 1);
    --maxw: 520px;
}

body[data-theme='orange'] { --main-color: #FF7A1A; --accent-glow: rgba(255,122,26,0.18); --accent-grad: linear-gradient(135deg,#FF9F45,#FF6A00); --accent-soft: rgba(255,122,26,0.12); --shadow-accent: 0 8px 24px -6px rgba(255,106,0,0.45); }
body[data-theme='lime']   { --main-color: #B8F000; --accent-glow: rgba(184,240,0,0.18);  --accent-grad: linear-gradient(135deg,#D6FF4B,#9FD400); --accent-soft: rgba(184,240,0,0.12);  --shadow-accent: 0 8px 24px -6px rgba(159,212,0,0.45); }
body[data-theme='cyan']   { --main-color: #22D6F0; --accent-glow: rgba(34,214,240,0.18);  --accent-grad: linear-gradient(135deg,#5FE6F7,#00B8D4); --accent-soft: rgba(34,214,240,0.12);  --shadow-accent: 0 8px 24px -6px rgba(0,184,212,0.45); }
body[data-theme='coral']  { --main-color: #FF5B5B; --accent-glow: rgba(255,91,91,0.18);   --accent-grad: linear-gradient(135deg,#FF7D7D,#F53B3B); --accent-soft: rgba(255,91,91,0.12);   --shadow-accent: 0 8px 24px -6px rgba(245,59,59,0.45); }

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

/* сброс нативной обводки кнопок/полей — убирает «белую окантовку» на кнопках без своих стилей */
button, input, select, textarea {
    font: inherit; color: inherit; -webkit-appearance: none; appearance: none;
}
button {
    background: transparent; border: 0; padding: 0; margin: 0; cursor: pointer;
    line-height: inherit; text-align: inherit;
}
button:disabled { cursor: default; }
select { background: var(--bg-card); border: 1px solid var(--stroke); border-radius: var(--rad-sm); padding: 9px 12px; color: var(--text-main); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--main-color); outline-offset: 2px; border-radius: 6px; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Roboto", "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    color: var(--text-main);
    background-color: var(--bg-base);
    background-image:
        radial-gradient(900px 500px at 100% -5%, rgba(255,140,26,0.10), transparent 60%),
        radial-gradient(700px 500px at -10% 8%, rgba(34,120,255,0.08), transparent 55%);
    background-attachment: fixed;
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    letter-spacing: 0.1px;
    -webkit-user-select: none;
    user-select: none;
}

h1, h2, h3 { letter-spacing: -0.02em; font-weight: 700; }
h2 { font-size: 19px; }
h3 { font-size: 17px; }
b, strong { font-weight: 700; }

::-webkit-scrollbar { width: 0; height: 0; }
* { scrollbar-width: none; }

/* ---------- каркас ---------- */
.header {
    position: sticky; top: 0; z-index: 400;
    background: rgba(10, 12, 18, 0.72);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    padding: calc(14px + env(safe-area-inset-top)) 18px 14px;
    display: flex; justify-content: space-between; align-items: center;
    border-bottom: 1px solid var(--stroke);
}
.header h1 {
    font-size: 20px !important; font-weight: 800; letter-spacing: -0.02em;
    background: var(--accent-grad); -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.content {
    padding: 18px 16px calc(96px + env(safe-area-inset-bottom));
    max-width: var(--maxw); margin: 0 auto;
    animation: screen-in 0.34s var(--ease) both;
}
@keyframes screen-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.screen { display: none; }
.active-screen { display: block; }

/* ---------- кнопки ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: none; border-radius: var(--rad-md);
    font-weight: 700; font-size: 15.5px; letter-spacing: 0.1px;
    cursor: pointer; transition: transform 0.16s var(--ease), box-shadow 0.2s var(--ease), filter 0.2s;
    background: var(--accent-grad); color: #1A0E00;
    padding: 15px 22px; width: 100%; margin-bottom: 10px;
    box-shadow: var(--shadow-accent);
    position: relative; overflow: hidden;
}
.btn::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.22), transparent 45%);
    pointer-events: none;
}
.btn:active { transform: scale(0.975); filter: brightness(0.95); }
.btn:disabled { opacity: 0.55; box-shadow: none; filter: grayscale(0.3); }

.btn-sec {
    background: rgba(255,255,255,0.07); color: var(--text-main);
    padding: 13px 20px; border: 1px solid var(--stroke);
    border-radius: var(--rad-md); font-weight: 600; font-size: 14.5px; cursor: pointer;
    transition: background 0.18s, transform 0.16s var(--ease), border-color 0.18s;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-sec:active { background: rgba(255,255,255,0.12); transform: scale(0.975); }
.btn-skip { background: rgba(255,255,255,0.07); color: var(--text-main); font-size: 13px; padding: 11px; flex: 1; border: 1px solid var(--stroke); border-radius: var(--rad-sm); font-weight: 600; }
.btn-danger { background: rgba(255,77,70,0.12); color: var(--danger); border: 1px solid rgba(255,77,70,0.2); font-weight: 700; padding: 7px 13px; border-radius: var(--rad-sm); cursor: pointer; }
.btn-danger:active { background: rgba(255,77,70,0.22); }
.btn-primary-light { background: var(--accent-soft); color: var(--main-color); border: 1px solid var(--accent-glow); font-weight: 700; padding: 7px 13px; border-radius: var(--rad-sm); cursor: pointer; }

.input-row { display: flex; gap: 10px; margin-bottom: 10px; align-items: center; }

/* ---------- поля ввода ---------- */
.search-input {
    width: 100%; padding: 13px 14px; border-radius: var(--rad-sm);
    border: 1px solid var(--stroke); background: rgba(255,255,255,0.03);
    color: var(--text-main); outline: none; font-size: 16px; text-align: center;
    transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
}
.search-input::placeholder { color: var(--text-muted); }
.search-input:focus { border-color: var(--main-color); background: rgba(255,255,255,0.05); box-shadow: 0 0 0 4px var(--accent-soft); }

/* ---------- карточки ---------- */
.premium-card {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0) 40%),
        var(--bg-card);
    border: 1px solid var(--stroke);
    border-radius: var(--rad-md);
    padding: var(--gap-md);
    box-shadow: var(--shadow-card);
    position: relative;
}
.premium-card::before {
    content: ""; position: absolute; left: 14px; right: 14px; top: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.14), transparent);
    pointer-events: none;
}
.neon-glow { box-shadow: var(--shadow-card), inset 0 1px 1px rgba(255,255,255,0.08); }
.card-bg, .set-list, .timer-wrap, .summary-box { }

.video-player { width: 100%; border-radius: var(--rad-md); background: #000; margin-bottom: 10px; max-height: 35vh; object-fit: contain; border: 1px solid var(--stroke); }

/* ---------- прогресс-бары ---------- */
.progress-container { background: rgba(255,255,255,0.07); height: 6px; border-radius: 99px; margin-bottom: 15px; width: 100%; overflow: hidden; }
.progress-bar { background: var(--accent-grad); height: 100%; width: 0%; border-radius: 99px; transition: width 0.45s var(--ease); box-shadow: 0 0 12px var(--accent-glow); }

/* ---------- подходы / списки ---------- */
.set-list { background: var(--bg-card); border-radius: var(--rad-md); padding: var(--gap-md); margin-bottom: 15px; border: 1px solid var(--stroke); box-shadow: var(--shadow-card); }
.set-item { display: flex; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid var(--stroke); font-size: 14px; align-items: center; }
.set-item:last-child { border-bottom: none; }
.set-num { color: var(--main-color); font-weight: 800; }

/* ---------- таймер ---------- */
.timer-wrap { text-align: center; margin-bottom: 15px; background: var(--bg-card); padding: var(--gap-md); border-radius: var(--rad-md); border: 1px solid var(--stroke); box-shadow: var(--shadow-card); }
.timer-val { font-size: 46px; font-weight: 800; color: var(--main-color); margin: 0 0 12px; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; text-shadow: 0 0 24px var(--accent-glow); }
.timer-controls { display: flex; justify-content: center; gap: 10px; margin-bottom: 10px; }

/* ---------- модалки ---------- */
.modal {
    display: none; position: fixed; inset: 0;
    background: rgba(6, 8, 12, 0.66);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    z-index: 950; flex-direction: column; align-items: center; justify-content: center;
    padding: 20px; animation: fade-in 0.22s ease both;
}
.modal > .premium-card, .modal > div { animation: modal-pop 0.3s var(--ease) both; }

/* ── Карточка упражнения (техника/мышцы/прогресс) — крупная, без лишней прокрутки ── */
#tech-modal { padding: 0; align-items: stretch; justify-content: flex-end; }
.tech-sheet {
    display: flex; flex-direction: column;
    width: 100%; height: 94vh; max-width: var(--maxw, 520px); margin: 0 auto;
    background: var(--bg-card, #14171e);
    border-radius: 22px 22px 0 0;
    border: 1px solid var(--stroke, rgba(255,255,255,.08));
    padding: 16px 16px calc(14px + env(safe-area-inset-bottom));
    animation: modal-pop .3s var(--ease) both;
}
.tech-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.tech-head h3 { flex: 1; margin: 0; font-size: 18px; line-height: 1.25; color: var(--text-main); text-wrap: balance; }
#btn-favorite { flex: 0 0 auto; width: auto; margin: 0; padding: 7px 12px; font-size: 12px; border-radius: 9px; }
.tech-x { flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: rgba(255,255,255,.06); color: var(--text-sec); }
.tech-media { flex: 0 0 auto; max-height: 30vh; border-radius: 14px; overflow: hidden; background: #0c0e13; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.tech-media:empty { display: none; }
.tech-media img, .tech-media video { max-height: 30vh; width: auto; max-width: 100%; object-fit: contain; }
.tech-tabs { display: flex; gap: 6px; flex: 0 0 auto; background: rgba(255,255,255,.04); padding: 4px; border-radius: 12px; margin-bottom: 12px; }
.tech-tabs .tab-btn { padding: 10px 6px; font-size: 13px; border-radius: 9px; }
.tech-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.tech-body .tab-content { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
#modal-text { color: var(--text-main); font-size: 15px; line-height: 1.6; white-space: pre-wrap; padding-bottom: 8px; }
#muscle-breakdown { font-size: 14px; color: var(--text-main); line-height: 1.6; background: rgba(255,255,255,.04); padding: 14px; border-radius: 12px; }
.tech-chart-box { background: rgba(255,255,255,.04); border-radius: 12px; padding: 10px; height: 200px; flex: 0 0 auto; margin-bottom: 12px; }
.tech-chart-box canvas { width: 100% !important; height: 100% !important; }
.tech-sub { font-size: 13px; font-weight: 700; color: var(--main-color); margin-bottom: 8px; }
#mini-history-list { font-size: 13px; color: var(--text-sec); }
.tech-foot { flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px; padding-top: 12px; }
.tech-foot .btn { margin: 0; }
#btn-modal-add { background: var(--success, #34c759); color: #06210f; font-weight: 800; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-pop { from { opacity: 0; transform: translateY(16px) scale(0.96); } to { opacity: 1; transform: none; } }

.kcal-badge { background: rgba(255,255,255,0.07); border: 1px solid var(--stroke); padding: 6px 12px; border-radius: 99px; font-size: 13px; font-weight: 700; color: var(--main-color); font-variant-numeric: tabular-nums; }

/* ---------- степперы ---------- */
.stepper { display: flex; align-items: center; gap: 6px; flex: 1; }
.btn-step { background: rgba(255,255,255,0.07); color: var(--text-main); border: 1px solid var(--stroke); width: 42px; height: 46px; border-radius: var(--rad-sm); font-size: 20px; font-weight: 700; cursor: pointer; transition: 0.14s var(--ease); }
.btn-step:active { background: var(--main-color); color: #1A0E00; transform: scale(0.92); }

/* ---------- итоги тренировки ---------- */
.summary-box { background: var(--bg-card); border-radius: var(--rad-lg); padding: 28px 24px; width: 100%; text-align: center; border: 1px solid var(--stroke); box-shadow: var(--shadow-pop); }
.summary-val { font-size: 34px; font-weight: 800; color: var(--main-color); margin: 8px 0; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.summary-label { font-size: 12px; color: var(--text-sec); text-transform: uppercase; letter-spacing: 1.5px; font-weight: 700; }

/* ---------- чипы-фильтры ---------- */
.filter-scroll { display: flex; overflow-x: auto; gap: 8px; padding-bottom: 8px; margin-bottom: 15px; }
.filter-scroll::-webkit-scrollbar { display: none; }
.filter-chip {
    background: rgba(255,255,255,0.06); padding: 9px 15px; border-radius: 99px;
    font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer;
    border: 1px solid var(--stroke); transition: 0.2s var(--ease); color: var(--text-sec);
}
.filter-chip.active { background: var(--accent-grad); border-color: transparent; color: #1A0E00; font-weight: 700; box-shadow: 0 4px 14px -4px var(--accent-glow); }
.filter-chip:active, .btn-step:active { transform: scale(0.94); }

.history-card { background: var(--bg-card); border-radius: var(--rad-md); padding: 15px; margin-bottom: 10px; border: 1px solid var(--stroke); border-left: 3px solid var(--main-color); text-align: left; box-shadow: var(--shadow-card); }

/* ---------- табы ---------- */
.tabs { display: flex; background: rgba(255,255,255,0.05); border: 1px solid var(--stroke); border-radius: var(--rad-sm); margin-bottom: 15px; overflow: hidden; padding: 4px; gap: 4px; }
.tab-btn { flex: 1; padding: 10px; background: transparent; color: var(--text-sec); border: none; font-weight: 700; cursor: pointer; transition: 0.25s var(--ease); font-size: 13px; border-radius: 8px; }
.tab-btn.active-tab-btn { background: var(--accent-grad); color: #1A0E00; }
.tab-content { display: none; flex: 1; overflow-y: auto; flex-direction: column; }
.tab-content.active-tab { display: flex; animation: fade-in 0.25s ease both; }
.mini-history-item { background: var(--bg-card-hover); padding: 11px; border-radius: var(--rad-sm); margin-bottom: 8px; font-size: 13px; display: flex; justify-content: space-between; border-left: 3px solid var(--main-color); }

/* ---------- bottom sheets ---------- */
.sheet-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.55); backdrop-filter: blur(2px); z-index: 950; animation: fade-in 0.25s ease both; }
.bottom-sheet {
    position: fixed; bottom: -110%; left: 0; width: 100%;
    background: linear-gradient(180deg, rgba(255,255,255,0.04), transparent 12%), rgba(13, 16, 23, 0.92);
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    border-top: 1px solid var(--stroke-strong);
    border-radius: var(--rad-lg) var(--rad-lg) 0 0;
    padding: 22px 20px calc(22px + env(safe-area-inset-bottom));
    z-index: 951; transition: bottom 0.4s var(--ease);
    box-shadow: 0 -20px 60px -12px rgba(0,0,0,0.7);
    max-width: var(--maxw); margin: 0 auto; left: 0; right: 0;
}
.bottom-sheet::before { content: ""; position: absolute; top: 9px; left: 50%; transform: translateX(-50%); width: 38px; height: 4px; border-radius: 99px; background: rgba(255,255,255,0.18); }
.bottom-sheet.active-sheet { bottom: 0; }
.sheet-header { font-size: 12px; font-weight: 800; color: var(--text-sec); margin: 6px 0 16px; text-align: center; text-transform: uppercase; letter-spacing: 2px; }
.sheet-item { padding: 17px 4px; border-bottom: 1px solid var(--stroke); font-size: 15.5px; cursor: pointer; color: var(--text-main); font-weight: 600; transition: color 0.15s, padding-left 0.15s var(--ease); }
.sheet-item:active { padding-left: 10px; color: var(--main-color); }
.sheet-item:last-child { border-bottom: none; }

/* ---------- очередь упражнений ---------- */
.queue-item { display: flex; align-items: center; justify-content: space-between; padding: 12px; background: var(--bg-card); margin-bottom: 8px; border-radius: var(--rad-sm); border: 1px solid var(--stroke); transition: 0.2s; }
.queue-item.active-q { border-color: var(--main-color); background: var(--accent-soft); }
.q-controls { display: flex; gap: 5px; }
.q-btn { background: rgba(255,255,255,0.07); color: var(--text-main); border: 1px solid var(--stroke); padding: 8px 12px; border-radius: 8px; font-weight: 700; cursor: pointer; }
.q-btn:active { background: var(--main-color); color: #1A0E00; }

/* ---------- нижняя навигация ---------- */
.bottom-nav {
    position: fixed; bottom: 0; left: 0; right: 0; width: 100%;
    background: rgba(10, 12, 18, 0.82);
    backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%);
    display: flex; justify-content: space-around; align-items: center;
    padding: 9px 6px calc(9px + env(safe-area-inset-bottom));
    z-index: 500; border-top: 1px solid var(--stroke);
    box-shadow: var(--shadow-nav);
    max-width: var(--maxw); margin: 0 auto;
}
.nav-item {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    color: var(--text-muted); font-size: 10px; font-weight: 600;
    cursor: pointer; background: none; border: none; flex: 1; padding: 6px 4px;
    transition: color 0.2s var(--ease); position: relative;
}
.nav-item .nav-icon { font-size: 21px; transition: transform 0.2s var(--ease); display: block; }
.nav-item.active { color: var(--main-color); }
.nav-item.active .nav-icon { transform: translateY(-2px) scale(1.06); }
.nav-item.active::after { content: ""; position: absolute; top: -1px; left: 50%; transform: translateX(-50%); width: 5px; height: 5px; border-radius: 50%; background: var(--main-color); box-shadow: 0 0 8px var(--main-color); }
.nav-item-main {
    background: var(--accent-grad); width: 58px; height: 58px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; margin-top: -26px;
    box-shadow: var(--shadow-accent), inset 0 1px 1px rgba(255,255,255,0.35), 0 6px 18px rgba(0,0,0,0.5);
    color: #1A0E00; font-size: 25px; border: 4px solid var(--bg-base);
    transition: transform 0.18s var(--ease);
}
.nav-item-main:active { transform: scale(0.92); }

/* ---------- силуэт гидратации ---------- */
.hydration-container {
    width: 140px; height: 320px; margin: 0 auto;
    background-color: rgba(255, 255, 255, 0.04);
    mask-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 450'%3E%3Cellipse cx='100' cy='35' rx='22' ry='28' fill='%23000'/%3E%3Cpath d='M85 55 h30 l5 20 h-40 z' fill='%23000'/%3E%3Cpath d='M100 70 Q130 70 155 90 Q170 105 175 180 h-22 Q150 130 145 120 Q135 150 130 220 Q135 320 140 430 h-32 Q105 350 100 270 Q95 350 90 430 h-32 Q65 320 70 220 Q65 150 55 120 Q50 130 47 180 h-22 Q30 105 45 90 Q70 70 100 70 Z' fill='%23000'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 450'%3E%3Cellipse cx='100' cy='35' rx='22' ry='28' fill='%23000'/%3E%3Cpath d='M85 55 h30 l5 20 h-40 z' fill='%23000'/%3E%3Cpath d='M100 70 Q130 70 155 90 Q170 105 175 180 h-22 Q150 130 145 120 Q135 150 130 220 Q135 320 140 430 h-32 Q105 350 100 270 Q95 350 90 430 h-32 Q65 320 70 220 Q65 150 55 120 Q50 130 47 180 h-22 Q30 105 45 90 Q70 70 100 70 Z' fill='%23000'/%3E%3C/svg%3E");
    mask-size: contain; -webkit-mask-size: contain;
    mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
    mask-position: center; -webkit-mask-position: center;
    position: relative; overflow: hidden;
}
.liquid-fill {
    position: absolute; bottom: 0; left: 0; width: 100%; height: 0%;
    background: linear-gradient(180deg, #4FE3FF 0%, #0066FF 100%);
    box-shadow: 0 -6px 24px rgba(0, 200, 255, 0.55);
    transition: height 1s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.8s ease, box-shadow 0.8s ease;
}
.liquid-fill::before {
    content: ""; position: absolute; top: -8px; left: 0; right: 0; height: 12px;
    background: rgba(255,255,255,0.35); filter: blur(3px); border-radius: 50%;
}

/* ---------- тост ---------- */
.app-toast {
    position: fixed; top: calc(-100px - env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
    background: rgba(20, 24, 33, 0.95); backdrop-filter: blur(12px);
    color: var(--text-main); padding: 13px 22px; border-radius: 99px;
    border: 1px solid var(--stroke-strong);
    box-shadow: 0 12px 32px rgba(0,0,0,0.5), 0 0 20px var(--accent-glow);
    z-index: 1000; font-size: 14px; font-weight: 600; max-width: 88%;
    text-align: center; transition: top 0.45s var(--ease);
}
.app-toast.show { top: calc(16px + env(safe-area-inset-top)); }

/* ---------- утилиты ---------- */
.text-truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.screen-header { display: grid; grid-template-columns: 76px 1fr 76px; align-items: center; margin-bottom: var(--gap-lg); gap: 8px; }
.screen-header h2, .screen-header .text-truncate { font-size: 17px; font-weight: 800; letter-spacing: -0.02em; }
.screen-header .btn-sec { padding: 9px 10px; margin: 0; width: 100%; font-size: 13px; }

.traffic-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 8px; box-shadow: 0 0 8px currentColor; }
.traffic-green { background-color: var(--success); color: rgba(46,213,115,0.6); }
.traffic-yellow { background-color: var(--warning); color: rgba(255,201,64,0.6); }
.traffic-red { background-color: var(--danger); color: rgba(255,77,70,0.6); }

.skeleton { background: linear-gradient(90deg, var(--bg-card) 25%, rgba(255,255,255,0.07) 50%, var(--bg-card) 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite linear; border-radius: var(--rad-sm); }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.skeleton-line { height: 14px; margin-bottom: 8px; width: 60%; }
.skeleton-title { height: 18px; margin-bottom: 12px; width: 40%; }

.chat-bubble { padding: 12px 16px; border-radius: 20px; max-width: 85%; font-size: 15px; margin-bottom: 12px; line-height: 1.45; }
.chat-user { background: var(--accent-grad); color: #1A0E00; align-self: flex-end; border-bottom-right-radius: 5px; font-weight: 600; }
.chat-ai { background: rgba(255,255,255,0.07); border: 1px solid var(--stroke); color: var(--text-main); align-self: flex-start; border-bottom-left-radius: 5px; }
.typing-indicator { display: flex; gap: 4px; padding: 4px 0; }
.typing-indicator span { width: 6px; height: 6px; border-radius: 50%; background: var(--text-sec); animation: typing-bounce 1.4s infinite ease-in-out; }
.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typing-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-6px); opacity: 1; } }

.pagination-info { color: var(--text-main); font-size: 14px; font-weight: 700; background: var(--bg-card); padding: 10px 20px; border-radius: var(--rad-sm); border: 1px solid var(--stroke); }

/* кликабельные карточки и строки — тактильный отклик */
.premium-card[onclick], .set-item[onclick] { cursor: pointer; transition: transform 0.16s var(--ease), border-color 0.18s; }
.premium-card[onclick]:active, .set-item[onclick]:active { transform: scale(0.982); }

/* ================= ИКОНКИ ================= */
.ic { display: block; flex-shrink: 0; }
[data-ic] { display: inline-flex; align-items: center; justify-content: center; }
.btn [data-ic], .btn-sec [data-ic], .row-btn [data-ic] { margin-top: -1px; }

/* ================= ШАПКА ================= */
.header .logo-wrap { display: flex; align-items: center; gap: 9px; }
.header .logo-mark { color: var(--main-color); filter: drop-shadow(0 0 8px var(--accent-glow)); }
.header h1 { margin: 0; }

/* ================= ГЛАВНАЯ: карточка ранга ================= */
.rank-card { margin-bottom: var(--gap-lg); }
.rank-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.rank-id { display: flex; align-items: center; gap: 12px; }
.rank-avatar {
    width: 46px; height: 46px; border-radius: 14px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent-soft); color: var(--main-color);
    border: 1px solid var(--accent-glow); box-shadow: 0 0 16px -4px var(--accent-glow);
}
.rank-label { font-size: 10px; color: var(--text-sec); text-transform: uppercase; letter-spacing: 1.4px; font-weight: 700; margin-bottom: 3px; }
.rank-value { font-size: 17px; font-weight: 800; color: var(--main-color); letter-spacing: -0.01em; }
.rank-xp { text-align: right; }
.xp-value { font-size: 17px; font-weight: 800; color: var(--text-main); }
.xp-unit { font-size: 11px; color: var(--text-sec); margin-left: 4px; font-weight: 700; }
.xp-track { background: rgba(255,255,255,0.06); height: 8px; border-radius: 99px; overflow: hidden; margin-bottom: 7px; }
.xp-bar { background: var(--accent-grad); height: 100%; width: 0%; border-radius: 99px; box-shadow: 0 0 12px var(--accent-glow); transition: width 1.2s var(--ease); }
.xp-scale { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-muted); font-weight: 700; }

/* ================= ГЛАВНАЯ: hero-кнопка ================= */
.btn-hero { margin-bottom: var(--gap-lg); padding: 17px 22px; font-size: 16.5px; }
.btn-hero [data-ic] { margin-right: 2px; }

/* ================= ГЛАВНАЯ: плитки ================= */
.tile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: var(--gap-md); }
.tile {
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
    padding: 16px; border-radius: var(--rad-md); text-align: left;
    background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0) 45%), var(--bg-card);
    border: 1px solid var(--stroke); box-shadow: var(--shadow-card);
    transition: transform 0.16s var(--ease), border-color 0.18s;
}
.tile:active { transform: scale(0.97); border-color: var(--stroke-strong); }
.tile-ic {
    width: 40px; height: 40px; border-radius: 12px; margin-bottom: 8px;
    display: flex; align-items: center; justify-content: center;
}
.tile-ic.ic-accent { background: var(--accent-soft); color: var(--main-color); }
.tile-ic.ic-blue { background: rgba(56,150,255,0.14); color: #5AB0FF; }
.tile-ic.ic-green { background: rgba(46,213,115,0.14); color: var(--success); }
.tile-t { font-size: 15px; font-weight: 700; color: var(--text-main); }
.tile-s { font-size: 11.5px; color: var(--text-sec); }

/* ================= ГЛАВНАЯ: строки-кнопки ================= */
.row-btn {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 14px 16px; border-radius: var(--rad-md); margin-bottom: 10px;
    background: rgba(255,255,255,0.05); border: 1px solid var(--stroke);
    color: var(--text-main); font-weight: 600; font-size: 14.5px;
    transition: background 0.16s, transform 0.16s var(--ease);
}
.row-btn:active { background: rgba(255,255,255,0.09); transform: scale(0.985); }
.row-btn [data-ic]:first-child { color: var(--main-color); }
.row-btn .row-arrow { margin-left: auto; color: var(--text-muted); }
.row-pair { display: flex; gap: 10px; }
.row-pair .row-btn { flex: 1; justify-content: center; }

/* ================= АКТИВНАЯ ТРЕНИРОВКА ================= */
.wk-titlebar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.wk-title { color: var(--main-color); font-weight: 800; font-size: 14px; letter-spacing: 0.02em; flex: 1; text-transform: uppercase; }
.icon-btn {
    width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.06); border: 1px solid var(--stroke); color: var(--text-main);
}
.icon-btn:active { background: rgba(255,255,255,0.12); }
.wk-media { margin-bottom: 12px; }
.wk-media:empty { display: none; }
.wk-media img, .wk-media video { border-radius: var(--rad-md); border: 1px solid var(--stroke); max-height: 34vh; width: auto; max-width: 100%; object-fit: contain; }
.wk-exbtns { display: flex; gap: 8px; margin-bottom: 14px; }
.wk-exbtns .btn { margin: 0; flex: 1; font-size: 13px; padding: 11px 8px; }

/* ── Карточки программ в генераторе — единый ритм, ровный текст ── */
.gen-sec-label { font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--text-sec); margin: 22px 0 10px; }
.prog-card {
    display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
    width: 100%; text-align: left; margin: 0 0 8px;
    padding: 14px 16px; border-radius: 14px;
    background: var(--bg-card, #14171e); border: 1px solid var(--stroke, rgba(255,255,255,.08));
    transition: transform .15s var(--ease), border-color .2s;
}
.prog-card:active { transform: scale(.985); }
.prog-card .pc-t { font-size: 15px; font-weight: 700; color: var(--text-main); line-height: 1.3; }
.prog-card .pc-s { font-size: 12.5px; color: var(--text-sec); line-height: 1.35; }
.prog-card.accent { border-color: rgba(255, 122, 0, .38); background: rgba(255, 122, 0, .09); }
.prog-card.accent .pc-t { color: var(--main-color); }

/* ══ Интервальное голодание (уровень топовых трекеров) ══════════════════════ */
#fasting-screen { --fa: #FF8A3D; --fb: #FF5E62; --fring: #FF7A2F; --fsoft: rgba(255,122,47,.14); }
#fasting-body { padding-bottom: 30px; }
.fast-badge { display: inline-flex; align-items: center; margin-left: 8px; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; background: var(--main-color); color: #1A0E00; }

/* темы */
.fast-themes { display: flex; align-items: center; justify-content: space-between; margin: 2px 0 14px; }
.fast-themes > span { font-size: 12px; color: var(--text-sec); }
.fth-row { display: flex; gap: 8px; }
.fth { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; padding: 0; transition: transform .15s var(--ease); }
.fth.on { border-color: var(--text-main); transform: scale(1.1); }

/* кольцо */
.fast-ring { position: relative; width: min(74vw, 280px); aspect-ratio: 1; margin: 4px auto 18px; }
.fast-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.fast-ring circle.fr-track, .fast-ring circle.fr-fill { fill: none; stroke-width: 8; stroke-linecap: round; }
.fast-ring .fr-track { stroke: rgba(255,255,255,.07); }
.fast-ring .fr-fill { stroke: url(#fgrad); stroke-dasharray: 326.726; transition: stroke-dashoffset .8s var(--ease); filter: drop-shadow(0 0 6px var(--fsoft)); }
.fast-ring .fr-mark { fill: rgba(255,255,255,.22); }
.fast-ring .fr-mark.on { fill: var(--fring); }
.fast-ring .fr-handle { fill: #fff; stroke: var(--fring); stroke-width: 3; filter: drop-shadow(0 2px 5px rgba(0,0,0,.4)); transition: r .12s var(--ease); }
.fast-ring.draggable { cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; }
.fast-ring.draggable svg { touch-action: none; }
.fast-ring.dragging { cursor: grabbing; }
.fast-ring.dragging .fr-handle { r: 9; }
.fast-ring.dragging .fr-fill { transition: none; }
.fast-ring-hint { text-align: center; font-size: 11px; color: var(--text-sec); margin: -8px 0 16px; opacity: .8; }
.fast-ring .fr-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 12%; }
.fast-ring .fr-pct { font-size: 12px; font-weight: 800; color: var(--fring); letter-spacing: .06em; margin-bottom: 3px; }
.fast-ring .fr-big { font-size: clamp(24px, 8vw, 34px); font-weight: 800; color: var(--text-main); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.fast-ring .fr-small { font-size: 12.5px; color: var(--text-sec); margin-top: 4px; }

/* текущий этап */
.fast-stage { display: flex; gap: 12px; align-items: center; background: var(--fsoft); border: 1px solid color-mix(in srgb, var(--fring) 25%, transparent); border-radius: 16px; padding: 14px; margin-bottom: 12px; }
.fast-stage .fs-ic { font-size: 24px; flex: 0 0 30px; display: flex; align-items: center; justify-content: center; color: var(--fring); }
.fast-stage .fs-ic svg { width: 24px; height: 24px; }
.fast-stage .fs-tx b { display: block; font-size: 15px; font-weight: 800; color: var(--text-main); }
.fast-stage .fs-tx span { font-size: 12.5px; color: var(--text-sec); line-height: 1.45; }

.fast-meta { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.fast-meta > div { background: rgba(255,255,255,.04); border-radius: 12px; padding: 10px 8px; text-align: center; }
.fast-meta span { display: block; font-size: 10.5px; color: var(--text-sec); text-transform: uppercase; letter-spacing: .04em; }
.fast-meta b { font-size: 13px; color: var(--text-main); font-variant-numeric: tabular-nums; }

.fast-adjust { font-size: 12px; color: var(--text-sec); margin-bottom: 14px; text-align: center; line-height: 2.1; }
.fast-adjust button { background: rgba(255,255,255,.06); border: 1px solid var(--stroke); color: var(--text-main); font-size: 12px; font-weight: 700; padding: 6px 11px; border-radius: 9px; margin: 0 3px; }
.fast-adjust button:active { background: var(--fsoft); border-color: var(--fring); }

.fast-start, .fast-stop { width: 100%; margin: 0 0 12px; padding: 16px; font-size: 15px; font-weight: 800; border-radius: 15px; }
.fast-start { background: linear-gradient(135deg, var(--fa), var(--fb)); color: #fff; box-shadow: 0 10px 26px -12px var(--fb); }
.fast-stop { background: transparent; border: 1.5px solid var(--fring); color: var(--fring); }
.fast-startopt { display: flex; gap: 8px; margin-bottom: 20px; }
.fast-startopt button { flex: 1; background: rgba(255,255,255,.05); border: 1px solid var(--stroke); color: var(--text-sec); font-size: 12px; font-weight: 600; padding: 9px 6px; border-radius: 10px; }

/* режим */
.fast-modes { margin-bottom: 20px; }
.fm-head, .fz-head, .fh-head, .fw-top span { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-sec); }
.fm-head { margin-bottom: 10px; }
.fm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fmode { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 11px 4px; border-radius: 13px; background: var(--bg-card, #14171e); border: 1px solid var(--stroke); }
.fmode b { font-size: 14px; color: var(--text-main); }
.fmode span { font-size: 10px; color: var(--text-sec); }
.fmode.on { background: linear-gradient(135deg, var(--fa), var(--fb)); border-color: transparent; }
.fmode.on b, .fmode.on span { color: #fff; }
.fmode-custom { border-style: dashed; }

/* вода */
.fast-water { background: rgba(255,255,255,.04); border-radius: 16px; padding: 14px; margin-bottom: 18px; }
.fw-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 9px; }
.fw-top b { font-size: 13px; color: var(--text-main); font-variant-numeric: tabular-nums; text-transform: none; letter-spacing: 0; }
.fw-track { height: 9px; border-radius: 999px; background: rgba(255,255,255,.07); overflow: hidden; margin-bottom: 11px; }
.fw-track > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #3EC6FF, #2E7CF6); transition: width .4s var(--ease); }
.fw-btns { display: flex; gap: 8px; margin-bottom: 12px; }
.fw-btns button { flex: 1; background: rgba(62,198,255,.12); border: 1px solid rgba(62,198,255,.3); color: #7dd6ff; font-weight: 800; font-size: 13px; padding: 10px 0; border-radius: 11px; }
.fw-remind { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--text-main); }
.fw-remind input { display: none; }
.fw-remind i { width: 40px; height: 24px; border-radius: 999px; background: rgba(255,255,255,.14); position: relative; transition: .2s; flex: 0 0 auto; }
.fw-remind i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: .2s; }
.fw-remind input:checked + i { background: linear-gradient(90deg, #3EC6FF, #2E7CF6); }
.fw-remind input:checked + i::after { transform: translateX(16px); }

/* таймлайн этапов */
.fast-zones { margin-bottom: 18px; }
.fz-head { margin-bottom: 10px; }
.fz-row { display: flex; gap: 11px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.fz-row:last-child { border-bottom: 0; }
.fz-ic { font-size: 17px; flex: 0 0 22px; display: flex; align-items: center; justify-content: center; opacity: .4; color: var(--text-sec); margin-top: 1px; }
.fz-ic svg { width: 17px; height: 17px; }
.fz-row.done .fz-ic { opacity: 1; color: var(--fring); }
.fz-row.done .fz-txt b { opacity: 1; }
.fz-row.todo .fz-ic { opacity: .35; }
.fz-txt { flex: 1; }
.fz-txt b { display: block; font-size: 13.5px; color: var(--text-main); opacity: .55; }
.fz-txt span { font-size: 11.5px; color: var(--text-sec); line-height: 1.4; }
.fz-h { font-size: 11px; color: var(--text-sec); white-space: nowrap; font-variant-numeric: tabular-nums; }
.fz-row.done .fz-h { color: var(--fring); font-weight: 700; }

/* история */
.fast-hist { margin-top: 4px; }
.fh-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.fh-stats > div { background: rgba(255,255,255,.04); border-radius: 13px; padding: 12px 6px; text-align: center; }
.fh-stats b { display: block; font-size: 19px; font-weight: 800; color: var(--fring); font-variant-numeric: tabular-nums; }
.fh-stats span { font-size: 10.5px; color: var(--text-sec); }
.fh-head { margin-bottom: 10px; }
.fh-row { display: flex; align-items: center; gap: 10px; font-size: 12px; margin-bottom: 7px; }
.fh-d { flex: 0 0 42px; color: var(--text-sec); font-variant-numeric: tabular-nums; }
.fh-bar { flex: 1; height: 8px; border-radius: 999px; background: rgba(255,255,255,.06); overflow: hidden; }
.fh-bar > span { display: block; height: 100%; border-radius: 999px; background: rgba(255,255,255,.2); }
.fh-bar > span.ok { background: linear-gradient(90deg, var(--fa), var(--fb)); }
.fh-v { flex: 0 0 auto; color: var(--text-main); font-weight: 700; font-variant-numeric: tabular-nums; }

/* инлайн-ввод */
.ef-prompt { position: fixed; inset: 0; z-index: 1200; background: rgba(6,8,12,.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; padding: 24px; }
.efp-card { width: 100%; max-width: 360px; background: var(--bg-card, #14171e); border: 1px solid var(--stroke); border-radius: 18px; padding: 20px; }
.efp-t { font-size: 16px; font-weight: 800; color: var(--text-main); margin-bottom: 4px; }
.efp-h { font-size: 12.5px; color: var(--text-sec); margin-bottom: 14px; line-height: 1.4; }
.efp-in { width: 100%; padding: 12px 14px; border-radius: 11px; background: rgba(255,255,255,.05); border: 1px solid var(--stroke); color: var(--text-main); font-size: 15px; box-sizing: border-box; margin-bottom: 14px; }
.efp-b { display: flex; gap: 10px; }
.efp-b button { flex: 1; padding: 12px; border-radius: 11px; font-weight: 800; font-size: 14px; }
.efp-x { background: rgba(255,255,255,.06); border: 1px solid var(--stroke); color: var(--text-main); }
.efp-ok { background: var(--main-color); color: #1A0E00; border: 0; }
.wk-setrow { position: relative; }
.wk-nextset { position: absolute; top: 12px; right: 14px; font-size: 11px; color: var(--text-sec); text-transform: uppercase; letter-spacing: 1px; font-weight: 700; }
.wk-nextset b { color: var(--main-color); font-size: 14px; }
.wk-lastperf { color: var(--text-sec); font-size: 12px; text-align: center; margin: 10px 0; }
.wk-lbls { display: flex; justify-content: space-around; font-size: 11px; color: var(--text-muted); margin-bottom: 6px; font-weight: 700; letter-spacing: 1px; }
.wk-lbls > div { flex: 1; text-align: center; }
.wk-inputs { padding: 14px; margin-bottom: 12px; }
.btn-ok { background: linear-gradient(135deg, #37D67A, #1FB863); box-shadow: 0 8px 24px -6px rgba(31,184,99,0.45); color: #04150B; }
.wk-rest { text-align: center; padding: 20px 16px; margin-bottom: 14px; border-color: var(--accent-glow); }
.wk-rest-label { font-size: 11px; font-weight: 800; color: var(--text-sec); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 4px; }
.wk-finish { font-size: 12.5px; margin-top: 10px; color: var(--text-sec); }

/* ================= ДОСТИЖЕНИЯ / ИСТОРИЯ / АДМИН ================= */
.ach-card { text-align: center; position: relative; overflow: hidden; }
.ach-ic { width: 54px; height: 54px; border-radius: 16px; margin: 0 auto 10px; display: flex; align-items: center; justify-content: center; }
.ach-ic.on { background: var(--accent-soft); color: var(--main-color); }
.ach-ic.off { background: rgba(255,255,255,0.05); color: var(--text-muted); }
.ach-bar { background: rgba(255,255,255,0.08); height: 4px; border-radius: 2px; margin-top: 10px; overflow: hidden; }
.ach-bar > div { background: var(--accent-grad); height: 100%; }
.hist-date { color: var(--main-color); font-weight: 700; font-size: 14px; margin-bottom: 6px; display: flex; align-items: center; gap: 7px; }
.hist-sets { color: var(--text-sec); font-size: 13px; display: flex; align-items: center; gap: 7px; }
.hist-sets b { color: var(--text-main); }
.adm-stat { padding: 13px; text-align: center; }
.adm-stat-l { font-size: 9.5px; color: var(--text-sec); text-transform: uppercase; letter-spacing: 1px; font-weight: 700; margin-bottom: 5px; }
.adm-stat-v { font-size: 19px; font-weight: 800; color: var(--text-main); font-variant-numeric: tabular-nums; }

/* ================= ПИТАНИЕ ================= */
.nutri-hero { padding: 22px 18px 20px; margin-bottom: var(--gap-md); text-align: center; }
.cal-ring { position: relative; width: 176px; height: 176px; margin: 0 auto 4px; }
.cal-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.cal-ring .ring-track { stroke: rgba(255,255,255,0.07); }
.cal-ring .ring-fill {
    stroke: url(#calGrad); stroke-linecap: round;
    stroke-dasharray: 326.726; stroke-dashoffset: 326.726;
    transition: stroke-dashoffset 1s var(--ease), stroke 0.4s ease;
}
.cal-ring.over .ring-fill { stroke: var(--danger); }
.water-ring .ring-fill { stroke: url(#waterGrad); }
.cal-ring-center {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 2px;
}
.cal-ring-num { font-size: 34px; font-weight: 800; color: var(--text-main); font-variant-numeric: tabular-nums; line-height: 1; }
.cal-ring-lbl { font-size: 11px; color: var(--text-sec); text-transform: uppercase; letter-spacing: 1.2px; font-weight: 700; }
.cal-sub { font-size: 12.5px; color: var(--text-sec); margin-top: 2px; }
.cal-sub b { color: var(--text-main); font-weight: 700; font-variant-numeric: tabular-nums; }

.macro-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: var(--gap-md); }
.macro-cell { padding: 13px 8px 12px; text-align: center; border-radius: var(--rad-md); background: var(--bg-card); border: 1px solid var(--stroke); }
.macro-cell .m-lbl { font-size: 11px; font-weight: 700; color: var(--text-sec); margin-bottom: 4px; }
.macro-cell .m-val { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.macro-cell .m-val span { font-size: 11px; color: var(--text-muted); font-weight: 600; }
.macro-track { background: rgba(255,255,255,0.06); height: 5px; border-radius: 99px; margin-top: 9px; overflow: hidden; }
.macro-track > div { height: 100%; border-radius: 99px; width: 0; transition: width 0.9s var(--ease); }
.m-p { color: #FF5C55; } .m-p-bar { background: #FF5C55; }
.m-f { color: #FFC940; } .m-f-bar { background: #FFC940; }
.m-c { color: #2ED573; } .m-c-bar { background: #2ED573; }

.nutri-actions { display: grid; grid-template-columns: 1.3fr 1fr; gap: 10px; margin-bottom: var(--gap-md); }
.nutri-actions .btn, .nutri-actions .btn-sec { margin: 0; }
.btn-water { background: rgba(56,150,255,0.12); border: 1px solid rgba(56,150,255,0.3); color: #5AB0FF; display: flex; align-items: center; justify-content: center; gap: 6px; }
.btn-water:active { background: rgba(56,150,255,0.22); }

.gen-card {
    display: flex; align-items: center; gap: 12px; padding: 15px 16px;
    margin-bottom: 10px; border-radius: var(--rad-md); cursor: pointer;
    background: linear-gradient(135deg, rgba(255,140,26,0.14), rgba(56,150,255,0.12));
    border: 1px solid var(--accent-glow); transition: transform 0.15s var(--ease);
}
.gen-card:active { transform: scale(0.985); }
.gen-card .gen-txt { flex: 1; min-width: 0; }
.gen-card .gen-t { font-weight: 800; font-size: 15px; color: var(--text-main); display: flex; align-items: center; gap: 6px; }
.gen-card .gen-s { font-size: 12px; color: var(--text-sec); margin-top: 3px; }

.diary-head { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 10px; }
.diary-head b { font-size: 10.5px; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1.4px; }
.food-item {
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    padding: 12px 14px; border-radius: var(--rad-md);
    background: var(--bg-card); border: 1px solid var(--stroke); box-shadow: var(--shadow-card);
}
.food-item .fi-l { display: flex; align-items: center; gap: 11px; min-width: 0; }
.food-item .fi-name { font-weight: 700; font-size: 14.5px; color: var(--text-main); }
.food-item .fi-meta { font-size: 12px; color: var(--text-sec); margin-top: 3px; }
.food-item .fi-meta b { color: var(--main-color); font-weight: 700; }
.food-empty { text-align: center; color: var(--text-sec); font-size: 13px; padding: 26px 16px; border: 1px dashed var(--stroke-strong); border-radius: var(--rad-md); }

/* ================= СПОРТ-БАР ================= */
.hydro-hero { padding: 20px 18px; margin-bottom: var(--gap-md); text-align: center; }
.hydro-hero .hydration-container { width: 116px; height: 232px; margin: 8px auto 14px; }
.hydro-num { font-size: 40px; font-weight: 800; color: #5AB0FF; font-variant-numeric: tabular-nums; line-height: 1; }
.hydro-num span { font-size: 17px; color: var(--text-sec); font-weight: 700; }
.hydro-track { background: rgba(255,255,255,0.06); height: 10px; border-radius: 99px; overflow: hidden; margin: 14px 0 8px; }
.hydro-track > div { height: 100%; border-radius: 99px; background: linear-gradient(90deg,#4FE3FF,#0066FF); box-shadow: 0 0 12px rgba(0,150,255,0.5); width: 0; transition: width 0.9s var(--ease); }
.hydro-sub { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-sec); font-weight: 600; }
.hydro-sub b { color: var(--text-main); font-variant-numeric: tabular-nums; }
.quick-add { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: var(--gap-md); }
.quick-add button {
    padding: 14px 4px; border-radius: var(--rad-md); font-weight: 800; font-size: 15px;
    background: rgba(56,150,255,0.1); border: 1px solid rgba(56,150,255,0.28); color: #5AB0FF;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    transition: transform 0.14s var(--ease);
}
.quick-add button:active { transform: scale(0.95); background: rgba(56,150,255,0.2); }
.quick-add button small { font-size: 10px; color: var(--text-muted); font-weight: 600; }
.drink-cat { text-align: center; }
.drink-cat-ic { width: 46px; height: 46px; margin: 0 auto 8px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: rgba(56,150,255,0.12); color: #5AB0FF; }

/* ================= СПРАВОЧНИК ================= */
.dir-search { display: flex; gap: 8px; margin-bottom: 14px; }
.dir-search .search-input { flex: 1; margin: 0; text-align: left; }
.dir-add { flex-shrink: 0; width: auto; padding: 0 14px; margin: 0; color: var(--main-color); border-color: var(--accent-glow); background: var(--accent-soft); font-size: 13px; }
.dir-label { font-size: 10.5px; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1.4px; margin: 4px 0 8px; }
.filter-chip.chip-ic { display: inline-flex; align-items: center; gap: 5px; }
.filter-chip.chip-ic [data-ic] { margin-top: -1px; }

.ex-card {
    display: flex; align-items: center; gap: 8px;
    padding: 13px 14px; margin-bottom: 9px; border-radius: var(--rad-md);
    background: var(--bg-card); border: 1px solid var(--stroke);
    box-shadow: var(--shadow-card); cursor: pointer;
    transition: transform 0.14s var(--ease), border-color 0.16s;
}
.ex-card:active { transform: scale(0.985); border-color: var(--stroke-strong); }
.ex-main { flex: 1; min-width: 0; }
.ex-name { font-size: 15px; font-weight: 700; color: var(--text-main); line-height: 1.3; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.ex-meta { font-size: 12px; color: var(--text-sec); margin-top: 4px; display: flex; align-items: center; flex-wrap: wrap; }
.ex-fav { color: var(--main-color); display: inline-flex; }
.ex-tag { background: rgba(34,214,240,0.16); color: #4FD8ED; font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 6px; }
.ex-adm { display: flex; gap: 5px; flex-shrink: 0; }
.ex-adm button { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--main-color); border: 1px solid var(--accent-glow); }
.ex-adm button.del { background: rgba(255,77,70,0.12); color: var(--danger); border-color: rgba(255,77,70,0.25); }
.use-badge { display: inline-flex; align-items: center; gap: 3px; color: var(--main-color); font-size: 10.5px; font-weight: 700; margin-left: 8px; border: 1px solid var(--accent-glow); padding: 1px 6px; border-radius: 6px; }
.ex-chev { color: var(--text-muted); flex-shrink: 0; display: inline-flex; }

/* ================= ВОССТАНОВЛЕНИЕ ================= */
.rec-map { text-align: center; margin-bottom: var(--gap-lg); padding: 16px; }
.rec-toggle { display: inline-flex; background: rgba(0,0,0,0.35); border: 1px solid var(--stroke); border-radius: 99px; padding: 4px; gap: 2px; margin-bottom: 10px; }
.rec-toggle button { padding: 8px 20px; border-radius: 99px; font-size: 13px; font-weight: 700; color: var(--text-muted); transition: 0.2s var(--ease); }
.rec-toggle button.on { background: var(--accent-grad); color: #1A0E00; box-shadow: 0 4px 12px -4px var(--accent-glow); }
.rec-tooltip { min-height: 18px; color: var(--main-color); font-weight: 700; font-size: 13px; margin-bottom: 4px; }
#bodymap-container { width: 100%; max-width: 250px; min-height: 300px; margin: 0 auto 14px; display: flex; align-items: center; justify-content: center; }
#bodymap-container:empty::after { content: "Загрузка карты…"; color: var(--text-muted); font-size: 12px; }
.rec-legend { display: flex; justify-content: center; gap: 16px; font-size: 11px; color: var(--text-sec); }
.rec-legend span { display: inline-flex; align-items: center; gap: 5px; }
.rec-legend i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.rec-item {
    padding: 13px 14px; margin-bottom: 8px; border-radius: var(--rad-md);
    background: var(--bg-card); border: 1px solid var(--stroke); cursor: pointer;
    transition: transform 0.14s var(--ease);
}
.rec-item:active { transform: scale(0.985); }
.rec-item-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 14.5px; margin-bottom: 8px; }
.rec-item-top b { font-weight: 700; }
.rec-item-top span { font-weight: 800; font-variant-numeric: tabular-nums; }
.rec-bar { background: rgba(255,255,255,0.07); height: 8px; border-radius: 99px; overflow: hidden; }
.rec-bar > div { height: 100%; border-radius: 99px; transition: width 0.6s var(--ease); }
.rec-item-sub { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-sec); margin-top: 7px; font-weight: 600; }
.rec-empty { text-align: center; color: var(--text-sec); font-size: 13px; padding: 28px 16px; border: 1px dashed var(--stroke-strong); border-radius: var(--rad-md); line-height: 1.5; }

/* ================= ПОИСК ПО БАЗЕ ПРОДУКТОВ ================= */
.fs-row {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
    padding: 12px 12px; margin-bottom: 7px; border-radius: var(--rad-sm); text-align: left;
    background: rgba(255,255,255,0.04); border: 1px solid var(--stroke);
}
.fs-row:active { background: rgba(255,255,255,0.09); }
.fs-row-name { font-size: 14px; font-weight: 600; color: var(--text-main); }
.fs-row-macro { font-size: 11px; color: var(--text-sec); margin-top: 3px; }
.fs-row-cal { font-size: 16px; font-weight: 800; color: var(--main-color); flex-shrink: 0; font-variant-numeric: tabular-nums; }
.fs-row-cal span { font-size: 10px; color: var(--text-muted); font-weight: 600; margin-left: 3px; }

/* ================= МАСТЕР РАЦИОНА ================= */
.wiz-progress { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.wiz-progress span { font-size: 11px; font-weight: 700; color: var(--text-sec); white-space: nowrap; }
.wiz-bar { flex: 1; height: 6px; background: rgba(255,255,255,0.07); border-radius: 99px; overflow: hidden; }
.wiz-bar > div { height: 100%; border-radius: 99px; background: var(--accent-grad); transition: width 0.4s var(--ease); }
.wiz-step { min-height: 260px; animation: screen-in 0.28s var(--ease) both; }
.wiz-hint { font-size: 12px; color: var(--text-sec); line-height: 1.5; margin-top: 12px; }
.wiz-loading { text-align: center; padding: 60px 24px; animation: screen-in 0.3s var(--ease) both; }
.wiz-spinner { width: 46px; height: 46px; margin: 0 auto 20px; border-radius: 50%; border: 3px solid var(--stroke); border-top-color: var(--main-color); animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.wiz-load-t { font-size: 17px; font-weight: 800; color: var(--text-main); }
.wiz-load-s { font-size: 13px; color: var(--text-sec); line-height: 1.55; margin-top: 8px; max-width: 320px; margin-left: auto; margin-right: auto; }

.stepper { display: flex; align-items: center; gap: 4px; background: var(--bg-card); border: 1px solid var(--stroke); border-radius: 99px; padding: 5px; width: fit-content; margin-bottom: 6px; }
.stepper button { width: 42px; height: 42px; border-radius: 50%; font-size: 22px; font-weight: 700; color: var(--main-color); background: var(--accent-soft); display: flex; align-items: center; justify-content: center; transition: transform 0.12s var(--ease); }
.stepper button:active { transform: scale(0.9); }
.stepper span { min-width: 54px; text-align: center; font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }

.wiz-seg { display: inline-flex; background: rgba(0,0,0,0.35); border: 1px solid var(--stroke); border-radius: 99px; padding: 4px; gap: 2px; margin-bottom: 6px; }
.wiz-seg-b { padding: 9px 22px; border-radius: 99px; font-size: 14px; font-weight: 700; color: var(--text-sec); transition: 0.2s var(--ease); }
.wiz-seg-b:active { transform: scale(0.96); }
.wiz-seg-b.on { background: var(--accent-grad); color: #1A0E00; box-shadow: 0 3px 10px -3px var(--accent-glow); }

.wiz-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.wiz-chip { padding: 10px 15px; border-radius: 99px; font-size: 13.5px; font-weight: 600; color: var(--text-sec); background: var(--bg-card); border: 1px solid var(--stroke); transition: 0.16s var(--ease); }
.wiz-chip:active { transform: scale(0.95); }
.wiz-chip.on { background: var(--accent-soft); border-color: var(--main-color); color: var(--main-color); }
.wiz-chip.on.danger { background: rgba(255,77,70,0.12); border-color: var(--danger); color: var(--danger); }

.wiz-cards { display: flex; flex-direction: column; gap: 10px; }
.wiz-card { position: relative; text-align: left; padding: 15px 44px 15px 16px; border-radius: var(--rad-md); background: var(--bg-card); border: 1px solid var(--stroke); transition: 0.16s var(--ease); }
.wiz-card:active { transform: scale(0.99); }
.wiz-card.on { border-color: var(--main-color); background: var(--accent-soft); }
.wiz-card-t { display: block; font-size: 15px; font-weight: 700; color: var(--text-main); }
.wiz-card-s { display: block; font-size: 12px; color: var(--text-sec); margin-top: 2px; }
.wiz-card-ck { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--main-color); }

.wiz-summary { padding: 6px 16px; }
.sum-row { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--stroke); font-size: 13.5px; }
.sum-row:last-child { border-bottom: none; }
.sum-row span { color: var(--text-sec); flex-shrink: 0; }
.sum-row b { color: var(--text-main); text-align: right; font-weight: 600; }

.wiz-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 22px; }
.wiz-nav .btn, .wiz-nav .btn-sec { margin: 0; flex: 1; }
.wiz-nav > span { flex: 1; }

/* результат рациона */
.meal-card { padding: 14px 16px; margin-bottom: 9px; border-radius: var(--rad-md); background: var(--bg-card); border: 1px solid var(--stroke); box-shadow: var(--shadow-card); }
.meal-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.meal-type { font-size: 10.5px; font-weight: 800; color: var(--main-color); text-transform: uppercase; letter-spacing: 1px; }
.meal-title { font-size: 15px; font-weight: 700; color: var(--text-main); margin-top: 3px; line-height: 1.3; }
.meal-kcal { font-size: 18px; font-weight: 800; color: var(--text-main); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.meal-kcal span { font-size: 10px; color: var(--text-muted); font-weight: 600; margin-left: 3px; }
.meal-macros { font-size: 12px; color: var(--text-sec); margin-top: 6px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.cook-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: #FFB661; background: rgba(255,140,26,0.12); border: 1px solid var(--accent-glow); padding: 2px 7px; border-radius: 6px; }
.rr-cost { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--stroke); font-size: 13px; font-weight: 700; color: var(--success); }
.rr-cost.over { color: var(--danger); }
.gro-budget { margin-top: 10px; font-size: 12px; font-weight: 700; color: var(--success); }
.gro-budget.over { color: var(--danger); }
.meal-recipe-btn { margin-top: 10px; font-size: 12.5px; font-weight: 700; color: var(--main-color); display: inline-flex; align-items: center; gap: 3px; }
.meal-recipe { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--stroke); }
.mr-ing { display: flex; flex-direction: column; gap: 3px; margin-bottom: 10px; font-size: 12.5px; color: var(--text-sec); }
.mr-steps { font-size: 13px; line-height: 1.6; color: var(--text-main); }
.rr-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.rr-actions .btn, .rr-actions .btn-sec { margin: 0; }

/* ================= СПИСОК ПОКУПОК ================= */
.gro-sum { padding: 16px 18px; margin-bottom: 14px; }
.gro-sum-row { display: flex; justify-content: space-between; align-items: flex-start; }
.gro-sum-big { font-size: 26px; font-weight: 800; color: var(--text-main); font-variant-numeric: tabular-nums; }
.gro-sum-lbl { font-size: 11px; color: var(--text-sec); text-transform: uppercase; letter-spacing: 1px; font-weight: 700; margin-top: 2px; }
.gro-sum-side { text-align: right; font-size: 12px; color: var(--text-sec); display: flex; flex-direction: column; gap: 3px; }
.gro-sum-side b { color: var(--text-main); font-variant-numeric: tabular-nums; }
.gro-tools { display: flex; gap: 8px; margin-bottom: 16px; }
.gro-tools .btn-sec { margin: 0; flex: 1; padding: 10px 6px; font-size: 12px; display: flex; align-items: center; justify-content: center; gap: 5px; }
.gro-tools .btn-sec.on { background: var(--accent-soft); border-color: var(--main-color); color: var(--main-color); }
.gro-cat { font-size: 10.5px; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1.4px; margin: 16px 0 8px; }
.gro-item { display: flex; align-items: center; gap: 11px; padding: 11px 13px; margin-bottom: 7px; border-radius: var(--rad-md); background: var(--bg-card); border: 1px solid var(--stroke); }
.gro-item.bought { opacity: 0.5; }
.gro-item.bought .gi-name { text-decoration: line-through; }
.gi-check { width: 24px; height: 24px; border-radius: 8px; border: 2px solid var(--stroke-strong); flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #1A0E00; transition: 0.14s var(--ease); }
.gro-item.bought .gi-check { background: var(--success); border-color: var(--success); }
.gi-main { flex: 1; min-width: 0; }
.gi-name { font-size: 14px; font-weight: 600; color: var(--text-main); }
.gi-qty { font-size: 11.5px; color: var(--text-sec); }
.gi-price { font-size: 13px; font-weight: 700; color: var(--main-color); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.gi-price-in { width: 66px; flex-shrink: 0; padding: 6px 8px; border-radius: 8px; background: rgba(0,0,0,0.3); border: 1px solid var(--stroke-strong); color: var(--text-main); font-size: 13px; text-align: right; }
.gi-del { color: var(--text-muted); flex-shrink: 0; padding: 4px; }
.gi-del:active { color: var(--danger); }

/* ===== недельный рацион / редактирование блюд / история ===== */
.day-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-top: 14px; -webkit-overflow-scrolling: touch; }
.day-tab { flex: 0 0 auto; padding: 8px 14px; border-radius: 99px; font-size: 13px; font-weight: 700; color: var(--text-sec); background: var(--bg-card); border: 1px solid var(--stroke); }
.day-tab.on { background: var(--accent-grad); color: #1A0E00; border-color: transparent; }

.meal-acts { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.meal-acts button { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; color: var(--text-sec); background: rgba(255,255,255,0.04); border: 1px solid var(--stroke); border-radius: 8px; padding: 6px 9px; }
.meal-acts button:active { background: var(--accent-soft); color: var(--main-color); }
.mr-edit { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--stroke); }
.mr-edit-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; font-size: 13px; color: var(--text-main); border-bottom: 1px solid var(--stroke); }
.mr-edit-row:last-of-type { border-bottom: none; }
.mr-edit-btns { display: flex; gap: 6px; flex-shrink: 0; }
.mr-edit-row button { flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px; background: rgba(255,77,70,0.12); color: var(--danger); border: 1px solid rgba(255,77,70,0.25); display: flex; align-items: center; justify-content: center; }
.mr-edit-row button.ie-swap { background: var(--accent-soft); color: var(--main-color); border-color: var(--accent-glow); }
.mr-edit-row button.ie-ok { background: rgba(46,213,115,0.14); color: var(--success); border-color: rgba(46,213,115,0.3); }
.mr-edit-row.ed { gap: 8px; }
.ing-edit-inp { flex: 1; min-width: 0; padding: 7px 10px; border-radius: 8px; background: rgba(0,0,0,0.3); border: 1px solid var(--main-color); color: var(--text-main); font-size: 13px; }

/* форма добавления в список покупок */
.gro-add { background: var(--bg-card); border: 1px solid var(--stroke-strong); border-radius: var(--rad-md); padding: 12px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 8px; animation: screen-in 0.22s var(--ease) both; }
.gro-add-row { display: flex; gap: 8px; align-items: center; }
.gro-add .btn { margin: 0; }
.mr-edit-hint { font-size: 11px; color: var(--text-muted); margin-top: 8px; line-height: 1.4; }

.hist-plan { display: flex; align-items: center; gap: 8px; padding: 12px 14px; margin-bottom: 8px; border-radius: var(--rad-md); background: var(--bg-card); border: 1px solid var(--stroke); }
.hist-plan.on { border-color: var(--main-color); background: var(--accent-soft); }
.hist-plan-main { flex: 1; min-width: 0; cursor: pointer; }
.hist-plan-t { font-size: 14px; font-weight: 700; color: var(--text-main); }
.hist-plan-badge { font-size: 10px; font-weight: 800; color: var(--main-color); background: var(--accent-soft); border: 1px solid var(--accent-glow); padding: 1px 6px; border-radius: 6px; margin-left: 4px; }
.hist-plan-s { font-size: 11.5px; color: var(--text-sec); margin-top: 3px; }

/* ===== AI-чат ===== */
.ai-sheet { height: 78vh; display: flex; flex-direction: column; padding: 14px 0 0; }
.ai-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 18px 14px; border-bottom: 1px solid var(--stroke); }
.ai-sheet-title { display: flex; align-items: center; gap: 8px; font-family: inherit; font-size: 15px; font-weight: 800; color: var(--text-main); }
.ai-avatar { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--accent-grad); color: #1A0E00; }
.ai-close { width: 34px; height: 34px; border-radius: 10px; background: rgba(255,255,255,.06); border: 1px solid var(--stroke); color: var(--text-sec); display: grid; place-items: center; }
.ai-close:active { background: rgba(255,255,255,.12); }
.ai-history { flex: 1; overflow-y: auto; padding: 16px 16px 8px; display: flex; flex-direction: column; gap: 10px; }
.chat-bubble { max-width: 86%; margin: 0; padding: 11px 14px; font-size: 14px; line-height: 1.5; border-radius: 16px; }
.chat-ai { align-self: flex-start; background: var(--bg-card); border: 1px solid var(--stroke); color: var(--text-main); border-bottom-left-radius: 5px; }
.chat-user { align-self: flex-end; background: var(--accent-grad); color: #1A0E00; font-weight: 600; border-bottom-right-radius: 5px; }
.chat-ai.chat-err { border-color: rgba(255,77,70,.3); color: var(--danger); }
.typing-indicator { display: inline-flex; gap: 4px; padding: 3px 0; }
.typing-indicator span { width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); animation: ai-typing 1s infinite ease-in-out; }
.typing-indicator span:nth-child(2) { animation-delay: .15s; }
.typing-indicator span:nth-child(3) { animation-delay: .3s; }
@keyframes ai-typing { 0%,60%,100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-5px); opacity: 1; } }
.ai-input-row { display: flex; gap: 10px; padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); background: var(--bg-card); border-top: 1px solid var(--stroke); }
.ai-send { margin: 0; width: 48px; flex-shrink: 0; padding: 0; display: grid; place-items: center; }

/* ===== напоминания ===== */
.rmd-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; margin-bottom: 7px; border-radius: var(--rad-md); background: var(--bg-card); border: 1px solid var(--stroke); font-size: 14px; color: var(--text-main); cursor: pointer; }
.rmd-sw { width: 44px; height: 26px; -webkit-appearance: none; appearance: none; background: rgba(255,255,255,0.12); border-radius: 99px; position: relative; cursor: pointer; transition: background 0.2s var(--ease); flex-shrink: 0; }
.rmd-sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform 0.2s var(--ease); }
.rmd-sw:checked { background: var(--main-color); }
.rmd-sw:checked::after { transform: translateX(18px); }

/* ===== конструктор блюд ===== */
.kc-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 7px; border-radius: var(--rad-md); background: var(--bg-card); border: 1px solid var(--stroke); }
.kc-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: var(--text-main); }
.kc-g { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.kc-g button { width: 28px; height: 28px; border-radius: 50%; font-size: 17px; font-weight: 700; color: var(--main-color); background: var(--accent-soft); }
.kc-g span { min-width: 44px; text-align: center; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.kc-del { flex-shrink: 0; width: 26px; height: 26px; border-radius: 7px; background: rgba(255,77,70,0.12); color: var(--danger); border: 1px solid rgba(255,77,70,0.25); display: flex; align-items: center; justify-content: center; }
.kc-add { display: flex; gap: 8px; margin-top: 10px; }
.kc-add .search-input { flex: 1; }
.kc-suggest { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.kc-suggest button { font-size: 12px; font-weight: 600; color: var(--text-sec); background: rgba(255,255,255,0.05); border: 1px solid var(--stroke); border-radius: 99px; padding: 6px 11px; }
.kc-suggest button:active { background: var(--accent-soft); color: var(--main-color); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}