/* public/assets/css/app.css */
/* Mobile-first. Light by default, dark/system via CSS variables. */
/* ==========================================================================
Self-hosted Manrope (Fontsource 5.2.8, subset cyrillic + latin, woff2).
Файлы в /assets/fonts/manrope/. font-display: swap — не блокирует first
paint. unicode-range — браузер качает только нужный subset (для чисто
латинского экрана кириллица не загружается).
PWA: шрифты precache'нуты в sw.js, после установки SW грузятся без сети.
========================================================================== */
@font-face{
font-family:'Manrope'; font-style:normal; font-weight:400; font-display:swap;
src:url('/assets/fonts/manrope/manrope-cyrillic-400-normal.woff2') format('woff2');
unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
font-family:'Manrope'; font-style:normal; font-weight:400; font-display:swap;
src:url('/assets/fonts/manrope/manrope-latin-400-normal.woff2') format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
font-family:'Manrope'; font-style:normal; font-weight:600; font-display:swap;
src:url('/assets/fonts/manrope/manrope-cyrillic-600-normal.woff2') format('woff2');
unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
font-family:'Manrope'; font-style:normal; font-weight:600; font-display:swap;
src:url('/assets/fonts/manrope/manrope-latin-600-normal.woff2') format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
font-family:'Manrope'; font-style:normal; font-weight:700; font-display:swap;
src:url('/assets/fonts/manrope/manrope-cyrillic-700-normal.woff2') format('woff2');
unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
font-family:'Manrope'; font-style:normal; font-weight:700; font-display:swap;
src:url('/assets/fonts/manrope/manrope-latin-700-normal.woff2') format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
font-family:'Manrope'; font-style:normal; font-weight:800; font-display:swap;
src:url('/assets/fonts/manrope/manrope-cyrillic-800-normal.woff2') format('woff2');
unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
font-family:'Manrope'; font-style:normal; font-weight:800; font-display:swap;
src:url('/assets/fonts/manrope/manrope-latin-800-normal.woff2') format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* ========== THEME TOKENS ========== */
:root{
--bottom-nav-h: 64px;
--bg:#0b1220; --card:#111827; --panel:#0b1220; --surface:#0f172a; --chip:#1f2937;
--text:#e5e7eb; --muted:#9ca3af; --accent:#22d3ee;
--ok:#34d399; --warn:#f59e0b; --danger:#ef4444;
--border:#1f2937; --radius:16px; --ring:#22d3ee; --input-bg:#0b1220; --topbar:#0f172a;
--overlay: rgba(0,0,0,.45);
--topbar-height: 56px; --container-pad: 16px; --sticky-top: calc(var(--topbar-height) + var(--container-pad));
}
.theme-light{
--bg:#f7f7f8; --card:#ffffff; --panel:#ffffff; --surface:#ffffff; --chip:#e5e7eb;
--text:#0b1220; --muted:#64748b; --accent:#0ea5b7;
--ok:#0f766e; --warn:#b45309; --danger:#b91c1c;
--border:#e5e7eb; --input-bg:#ffffff; --topbar:#ffffff;
--overlay: rgba(0,0,0,.25);
}
@media (prefers-color-scheme: light){
.theme-system{
--bg:#f7f7f8; --card:#ffffff; --panel:#ffffff; --surface:#ffffff; --chip:#e5e7eb;
--text:#0b1220; --muted:#64748b; --accent:#0ea5b7;
--ok:#0f766e; --warn:#b45309; --danger:#b91c1c;
--border:#e5e7eb; --input-bg:#ffffff; --topbar:#ffffff;
--overlay: rgba(0,0,0,.25);
}
}
/* Smooth transitions */
body, .card, .topbar, .nav, .toast { transition: background-color .25s, color .25s, border-color .25s, box-shadow .25s; }
body:not(.theme-ready) * { transition: none !important; }
/* Единое мягкое появление страниц при переходах через обычную навигацию. */
body > main{
animation: pageEnter .38s cubic-bezier(.22,.61,.36,1) both;
}
body > main > *{
animation: pageBlockEnter .42s cubic-bezier(.22,.61,.36,1) both;
}
body > main > :nth-child(2){ animation-delay: .035s; }
body > main > :nth-child(3){ animation-delay: .07s; }
body > main > :nth-child(4){ animation-delay: .105s; }
body > main > :nth-child(n+5){ animation-delay: .14s; }
@keyframes pageEnter{
from{ opacity:.78; transform: translateY(6px); }
to{ opacity:1; transform: none; }
}
@keyframes pageBlockEnter{
from{ opacity:0; transform: translateY(7px); }
to{ opacity:1; transform: none; }
}
/* ========== BASE ========== */
*{box-sizing:border-box}
html{height:100%}
/* Стабильная высота документа без svh/vvh (чтобы не было лишних «подушек») */
body{
min-height: 100%;
margin:0;
background:var(--bg);
color:var(--text);
font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Inter;
}
@supports (height: 100dvh){
body{ min-height: 100dvh; }
}
a{color:var(--accent);text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:16px}
/* ========== TOPBAR & NAV ========== */
.topbar{
position: sticky;
top:0;
z-index:4001;
background:var(--topbar);
border-bottom:1px solid var(--border);
display:flex;
align-items:center;
gap:12px;
padding:calc(10px + env(safe-area-inset-top)) 12px 10px 12px; /* PWA safe-area */
}
.brand{font-weight:800;letter-spacing:.3px}
.brand-logo{
display:block;
width:auto;
height:38px;
max-width:176px;
object-fit:contain;
}
.brand-logo--dark{ display:none; }
.theme-dark .brand-logo--light{ display:none; }
.theme-dark .brand-logo--dark{ display:block; }
@media (prefers-color-scheme: dark){
.theme-system .brand-logo--light{ display:none; }
.theme-system .brand-logo--dark{ display:block; }
}
.nav{display:flex;gap:12px;align-items:center}
.nav a{padding:6px 8px;border-radius:10px}
.top-actions{display:flex;gap:12px;margin-left:auto;align-items:center}
.nav-toggle{display:none;background:var(--chip);color:var(--text);border:none;border-radius:10px;padding:8px 10px}
.theme-btn{background:var(--chip);padding:6px 8px;border-radius:10px}
.nav.nav-desktop{ margin-left: auto; }
.nav.nav-mobile{ display:none; }
@media (max-width:860px){
.nav-toggle{display:inline-flex}
.nav.nav-desktop{ display:none; }
.nav.nav-mobile{
position: fixed;
top: calc(var(--topbar-height) + env(safe-area-inset-top));
right:12px; left:12px;
background:var(--surface);
border:1px solid var(--border);
border-radius:14px;
box-shadow:0 20px 40px rgba(0,0,0,.15);
padding:10px;
display:none;
flex-direction:column;
gap:8px;
z-index:4002;
}
.nav.nav-mobile.open{ display:flex; }
.nav.nav-mobile a.item-primary{ display:none !important; }
.nav.nav-mobile a.item-extra{ display:block; }
.brand-logo{ height:32px; max-width:144px; }
}
/* ========== CARDS & LAYOUT ========== */
.card{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:16px; box-shadow:0 10px 30px rgba(0,0,0,.12); margin-bottom:16px }
.title{margin:0 0 8px}
.grid{display:grid;gap:16px}
.grid .span-2{grid-column:span 2}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.mt{margin-top:12px}
/* Stats */
.stats{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
@media(min-width:720px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{ background:var(--card); padding:12px;border-radius:12px;text-align:center;border:1px solid var(--border) }
.stat .num{font-weight:800;font-size:28px}
.muted{color:var(--muted)}
.small{font-size:12px}
/* Lists */
.list{list-style:none;margin:0;padding:0}
.list li{padding:10px 8px;border-bottom:1px dashed var(--border)}
.list li.between{display:flex;justify-content:space-between;gap:12px;align-items:center}
.list li.selected{background:var(--panel);border-radius:12px}
/* Badges & buttons */
.badge{display:inline-block;padding:6px 10px;border-radius:999px;font-size:12px;background:var(--chip);color:var(--text)}
.badge.completed{background:rgba(52,211,153,.15);color:var(--ok)}
.badge.scheduled{background:rgba(245,158,11,.15);color:var(--warn)}
.badge.skipped{
background: rgba(148,163,184,.15);
color: #94a3b8;
border: 1px dashed #94a3b8;
}
.theme-light .badge.skipped{
background: rgba(100,116,139,.12);
color: #64748b;
border-color: #cbd5e1;
}
.btn{ background:linear-gradient(135deg,#0891b2,#06b6d4); color:#fff;border:none;padding:10px 14px;border-radius:12px;cursor:pointer;font-weight:700 }
.btn.small{padding:8px 10px;font-weight:600}
.btn.subtle{background:var(--chip);color:var(--text)}
.theme-light .btn.subtle, .theme-system .btn.subtle{ background:var(--chip); color:var(--text); }
.btn{position:relative;transition:transform .06s ease, filter .12s}
.btn:hover{filter:brightness(1.02)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.6;pointer-events:none}
/* Chips */
.chip{background:var(--chip);color:var(--text);border:none;border-radius:999px;padding:6px 8px;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip.add{background:transparent;border:1px dashed var(--border);color:var(--muted)}
.chip.completed{background:rgba(52,211,153,.15);color:var(--ok)}
.chip.scheduled{background:rgba(245,158,11,.15);color:var(--warn)}
.chip--external-activity{
background: color-mix(in oklab, var(--accent) 14%, var(--chip));
color: color-mix(in oklab, var(--accent) 72%, var(--text));
border: 1px solid color-mix(in oklab, var(--accent) 22%, transparent);
}
.chip--external-activity::before{
content:"⌁";
margin-right: 5px;
font-weight: 800;
}
/* Calendar */
.cal-head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.cal-head__nav{ display:flex; align-items:center; gap:8px; flex:1 1 auto; min-width:0; }
.cal-head__nav .title{ flex:1 1 auto; min-width:0; margin:0; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cal-head .cal-nav-btn{ width:40px; min-height:40px; padding:0; font-size:20px; line-height:1; display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; }
.cal-head [data-cal-today]{ flex:0 0 auto; }
.cal-head .cal-views{ flex:0 0 auto; }
/* На узких экранах переключатель видов уезжает на отдельную строку,
занимает всю ширину и центрируется. */
@media (max-width:720px){
.cal-head .cal-views{ order:2; flex:1 1 100%; justify-content:center; }
.cal-head [data-cal-today]{ order:3; }
}
/* В Списке стрелки навигации скрыты — диапазон списка фиксирован
относительно сегодня. */
body[data-cal-view="list"] .cal-head .cal-nav-btn{ visibility:hidden; pointer-events:none; }
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.cal-cell{ position:relative; min-height:110px; min-width:0; background:var(--panel); border:1px solid var(--border); border-radius:12px;padding:8px;display:flex;flex-direction:column; transition: border-color .15s, box-shadow .15s, background-color .15s; }
.page-calendar main.container > .card:first-of-type{ animation: dashFade .42s ease both; }
.calendar.is-entering > .cal-grid:not(.cal-headrow),
.calendar.is-entering > .cal-list{ animation: calEnter .34s cubic-bezier(.22,.61,.36,1) both; }
.calendar.is-entering .cal-cell:not(.head),
.calendar.is-entering .cal-list__row,
.calendar.is-entering .cal-list__empty{ animation: calItemEnter .34s cubic-bezier(.22,.61,.36,1) both; }
.calendar.is-entering .cal-cell:not(.head):nth-child(7n+2),
.calendar.is-entering .cal-list__row:nth-child(2n){ animation-delay: .025s; }
.calendar.is-entering .cal-cell:not(.head):nth-child(7n+3),
.calendar.is-entering .cal-list__row:nth-child(3n){ animation-delay: .05s; }
.calendar.is-entering .cal-cell:not(.head):nth-child(7n+4),
.calendar.is-entering .cal-list__row:nth-child(4n){ animation-delay: .075s; }
.calendar.is-entering .cal-cell:not(.head):nth-child(7n+5){ animation-delay: .10s; }
.calendar.is-entering .cal-cell:not(.head):nth-child(7n+6){ animation-delay: .125s; }
.calendar.is-entering .cal-cell:not(.head):nth-child(7n){ animation-delay: .15s; }
.cal-cell.dim{opacity:.35}
.cal-cell.head{min-height:auto;background:transparent;border:none;text-align:center;color:var(--muted);font-weight:600}
.cal-cell.is-weekend:not(.dim){ background: color-mix(in oklab, var(--accent) 4%, var(--panel)); }
.cal-cell.is-today{ border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.cal-cell.is-today .cal-daynum{ color: var(--accent); font-weight:800; }
.cal-cell.pulse{ animation: cal-cell-pulse .9s ease-out 1; }
@keyframes cal-cell-pulse{
0% { box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 0 color-mix(in oklab, var(--accent) 55%, transparent); }
60% { box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 10px color-mix(in oklab, var(--accent) 0%, transparent); }
100% { box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 0 transparent; }
}
@keyframes calEnter{
from{ opacity:.72; transform: translateY(5px); }
to{ opacity:1; transform: none; }
}
@keyframes calItemEnter{
from{ opacity:0; transform: translateY(6px) scale(.992); }
to{ opacity:1; transform: none; }
}
.cal-daynum{font-size:12px;color:var(--muted);margin-bottom:6px}
.cal-events{display:flex;flex-direction:column;gap:6px;min-width:0}
/* Чипы внутри ячейки растягиваются на всю ширину колонки и обрезаются по ней
через CSS-эллипсис; ручную обрезку JS-кодом теперь не делаем. */
.cal-events .chip{ display:block; max-width:100%; min-width:0; }
/* Кнопка «+» — абсолютно позиционирована в правом-нижнем углу, не растягивает
ячейку, ряды календаря остаются одной высоты на десктопе. */
.cal-cell .cal-add{
position: absolute;
right: 6px; bottom: 6px;
width: 24px; height: 24px;
min-width: 0; padding: 0;
display: inline-flex; align-items: center; justify-content: center;
font-size: 14px; line-height: 1;
border-radius: 999px;
opacity: .55;
transition: opacity .12s, border-color .12s, transform .08s, background-color .12s;
}
.cal-cell:hover .cal-add{ opacity: 1; }
.cal-cell .cal-add:hover{
border-color: color-mix(in oklab, var(--accent) 50%, var(--border));
background: color-mix(in oklab, var(--accent) 10%, transparent);
}
.cal-cell .cal-add:active{ transform: scale(0.92); }
.cal-cell .cal-add:focus-visible{ opacity: 1; }
/* Чтобы тренировки не накладывались на абсолютно-позиционированный «+» в правом-нижнем углу. */
.cal-cell .cal-events{ padding-bottom: 28px; }
/* Цветовая точка по основной мышечной группе (focus_group из apiList). */
.chip-dot{
display:inline-block; width:8px; height:8px; border-radius:50%;
margin-right:6px; vertical-align:middle; flex-shrink:0;
box-shadow: 0 0 0 1px color-mix(in oklab, var(--text) 20%, transparent);
}
.chip-dot--chest { background:#f97316; } /* грудь — оранжевый */
.chip-dot--back { background:#3b82f6; } /* спина — синий */
.chip-dot--legs { background:#8b5cf6; } /* ноги — фиолетовый */
.chip-dot--hamstrings { background:#a78bfa; } /* задняя поверхность бедра — светло-фиолетовый */
.chip-dot--shoulders { background:#06b6d4; } /* плечи — циан */
.chip-dot--arms { background:#f59e0b; } /* руки — янтарный */
.chip-dot--press { background:#10b981; } /* пресс — зелёный */
.chip-dot--heart { background:#ef4444; } /* кардио — красный */
/* ====================================================================== */
/* Вид «Неделя»: один ряд из 7 крупных ячеек. */
/* ====================================================================== */
.calendar--week .cal-grid--week{
grid-template-columns: repeat(7, 1fr);
gap: 10px;
}
.cal-cell--week{
min-height: 240px;
padding: 12px;
}
.cal-cell--week .cal-daynum{
display: flex;
align-items: baseline;
gap: 6px;
margin-bottom: 10px;
font-size: 14px;
}
.cal-cell--week .cal-daynum__wd{
text-transform: uppercase;
font-size: 11px;
color: var(--muted);
letter-spacing: .5px;
font-weight: 700;
}
.cal-cell--week .cal-daynum__n{
font-size: 20px;
font-weight: 800;
color: var(--text);
}
.cal-cell--week.is-today .cal-daynum__n{ color: var(--accent); }
@media (max-width:720px){
/* На мобильном неделя получает горизонтальный скролл — иначе колонки
были бы слишком узкими, чтобы что-то в них показать. */
.calendar--week{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.calendar--week .cal-grid--week{
grid-template-columns: repeat(7, 200px);
gap: 8px;
}
.cal-cell--week{ min-height: 200px; }
}
/* ====================================================================== */
/* Вид «Список»: вертикальный поток дней. */
/* ====================================================================== */
.calendar--list{ display:block; }
.cal-list{
display: flex;
flex-direction: column;
gap: 8px;
}
.cal-list__week{
margin: 18px 4px 4px;
font-size: 11px;
font-weight: 700;
color: var(--muted);
text-transform: uppercase;
letter-spacing: .8px;
}
.cal-list__week:first-child{ margin-top: 0; }
.cal-list__row{
display: grid;
grid-template-columns: 92px 1fr;
gap: 12px;
align-items: start;
padding: 12px 14px;
border: 1px solid var(--border);
border-radius: 12px;
background: var(--panel);
position: relative;
transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.cal-list__row.is-today{
border-color: var(--accent);
box-shadow: inset 0 0 0 1px var(--accent);
}
.cal-list__row.is-past{ opacity: 0.7; }
.cal-list__row.is-weekend:not(.is-today):not(.is-past){
background: color-mix(in oklab, var(--accent) 4%, var(--panel));
}
.cal-list__date{
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
min-width: 0;
}
.cal-list__wd{
text-transform: uppercase;
font-size: 11px;
color: var(--muted);
letter-spacing: .5px;
font-weight: 700;
}
.cal-list__num{
font-size: 26px;
font-weight: 800;
line-height: 1;
}
.cal-list__row.is-today .cal-list__num{ color: var(--accent); }
.cal-list__mo{
font-size: 11px;
color: var(--muted);
}
.cal-list__today-tag{
display: inline-block;
margin-top: 4px;
padding: 2px 6px;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .6px;
color: var(--accent);
background: color-mix(in oklab, var(--accent) 14%, transparent);
border-radius: 6px;
}
.cal-list__body{
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
}
.cal-list__body .cal-events{
/* В Списке отступ под «+» уже не нужен — кнопка не абсолютная. */
padding-bottom: 0;
}
/* Шаги в Списке — обычный inline-блок, не абсолютный. */
.cal-list__steps .cal-steps{
position: static;
align-self: flex-start;
}
/* Кнопка «+» в Списке — обычная маленькая, не абсолютная. */
.cal-list__add .cal-add{
position: static;
width: auto;
min-width: 0;
padding: 4px 12px;
font-size: 13px;
opacity: 1;
height: 32px;
}
.cal-list__empty{
padding: 28px;
text-align: center;
border: 1px dashed var(--border);
border-radius: 12px;
}
/* Анимация «пульса» работает и для строк списка, не только ячеек. */
.cal-list__row.pulse{ animation: cal-cell-pulse .9s ease-out 1; }
@media (max-width:520px){
.cal-list__row{
grid-template-columns: 70px 1fr;
padding: 10px 12px;
gap: 10px;
}
.cal-list__num{ font-size: 22px; }
}
@media (max-width:720px){ .cal-cell{min-height:100px} .cal-grid{gap:6px} .cal-head__nav .title{ font-size:1rem; } }
/* Bell + toasts */
.theme-btn,.bell{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; padding:0; border-radius:10px; }
.bell{ background:var(--chip); position:relative; }
.bell::after{ content:attr(data-count); position:absolute; top:-6px; right:-6px; background:var(--danger); color:#fff; border-radius:999px; font-size:11px; min-width:18px; line-height:18px; text-align:center; padding:0 5px; display:none; }
.bell[data-count]:not([data-count="0"])::after { display:inline-block; }
.badge.error{ background: rgba(239,68,68,.15); color: var(--danger); }
.toast-wrap{position:fixed;right:12px;bottom:12px;display:flex;flex-direction:column;gap:8px;z-index:5001}
.toast{ background:var(--surface);border:1px solid var(--border);color:var(--text); padding:12px 14px;border-radius:12px;opacity:0;transform:translateY(6px);transition:all .25s; box-shadow:0 10px 30px rgba(0,0,0,.15) }
.toast[role="button"]{ cursor:pointer; }
.toast.show{opacity:1;transform:none}
.toast-title{font-weight:700}
.toast-time{font-size:12px;color:var(--muted)}
.notifications-backdrop{
position:fixed;
inset:0;
background:rgba(0,0,0,.18);
opacity:0;
pointer-events:none;
transition:opacity .18s ease;
z-index:5000;
}
.notifications-backdrop.is-open{ opacity:1; pointer-events:auto; }
.notifications-panel{
position:fixed;
top: calc(var(--topbar-height) + env(safe-area-inset-top) + 10px);
right:12px;
width:min(380px, calc(100vw - 24px));
max-height:min(620px, calc(100dvh - var(--topbar-height) - 28px));
display:flex;
flex-direction:column;
overflow:hidden;
border:1px solid var(--border);
border-radius:18px;
background:var(--surface);
color:var(--text);
box-shadow:0 24px 60px rgba(0,0,0,.24);
opacity:0;
pointer-events:none;
transform:translateY(-6px) scale(.98);
transform-origin:top right;
transition:opacity .18s ease, transform .18s ease;
z-index:5002;
}
.notifications-panel.is-open{ opacity:1; pointer-events:auto; transform:none; }
.notifications-panel__head{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:12px;
padding:16px;
border-bottom:1px solid var(--border);
}
.notifications-panel__head strong{ display:block; font-size:18px; line-height:1.1; }
.notifications-panel__head span{ display:block; margin-top:4px; color:var(--muted); font-size:12px; }
.notifications-panel__close{
width:34px;
height:34px;
border:1px solid var(--border);
border-radius:10px;
background:var(--chip);
color:var(--text);
cursor:pointer;
font-size:22px;
line-height:1;
}
.notifications-panel__body{
overflow:auto;
-webkit-overflow-scrolling:touch;
padding:8px;
}
.notification-item{
display:grid;
grid-template-columns:10px minmax(0,1fr);
gap:10px;
padding:12px;
border-radius:14px;
}
.notification-item--link{ color:var(--text); text-decoration:none; }
.notification-item--link:hover{ background:color-mix(in oklab, var(--accent) 8%, transparent); }
.notification-item + .notification-item{ border-top:1px solid color-mix(in oklab, var(--border) 72%, transparent); }
.notification-item__dot{
width:8px;
height:8px;
margin-top:7px;
border-radius:999px;
background:var(--accent);
box-shadow:0 0 0 4px color-mix(in oklab, var(--accent) 14%, transparent);
}
.notification-item__main{ min-width:0; }
.notification-item__main strong{ display:block; line-height:1.25; }
.notification-item__main p{ margin:5px 0 0; color:var(--muted); font-size:13px; line-height:1.35; }
.notification-item__main time{ display:block; margin-top:7px; color:var(--muted); font-size:12px; }
.notifications-empty{
display:grid;
gap:6px;
min-height:150px;
place-content:center;
padding:24px;
text-align:center;
color:var(--muted);
}
.notifications-empty strong{ color:var(--text); font-size:17px; }
.notifications-open{ overflow:hidden; }
body.has-bottom-nav .toast-wrap{ bottom:calc(var(--bottom-nav-h) + env(safe-area-inset-bottom) + 12px); }
body.has-bottom-nav .notifications-backdrop{ bottom:calc(var(--bottom-nav-h) + env(safe-area-inset-bottom)); }
@media (max-width:768px){
.notifications-panel{
top:auto;
left:10px;
right:10px;
bottom:calc(env(safe-area-inset-bottom) + 10px);
width:auto;
max-height:min(72dvh, 560px);
border-radius:22px;
transform:translateY(18px);
transform-origin:bottom center;
}
body.has-bottom-nav .notifications-panel{
bottom:calc(var(--bottom-nav-h) + env(safe-area-inset-bottom) + 10px);
max-height:calc(100dvh - var(--topbar-height) - var(--bottom-nav-h) - env(safe-area-inset-bottom) - 28px);
}
body.has-bottom-nav .notifications-open{ overflow:hidden; }
}
/* Forms */
input[type="text"],input[type="email"],input[type="password"],input[type="number"],input[type="date"],input[type="time"],select, textarea{
width:100%; background:var(--input-bg); border:1px solid var(--border); border-radius:10px; padding:10px 12px; color:var(--text);
}
/* A11y & utils */
:where(a,button,input,select,textarea):focus-visible {
outline: 2px solid var(--ring); outline-offset: 2px; box-shadow: 0 0 0 4px color-mix(in oklab, var(--ring) 30%, transparent);
}
.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}
.flex{display:flex}.items-center{align-items:center}.justify-between{justify-content:space-between}
.gap-2{gap:8px}.gap-3{gap:12px}
.item{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid var(--border);border-radius:12px}
.icon{width:1.15em;height:1.15em;vertical-align:-.15em;display:inline-block}
@media (max-width:860px){ .topbar .brand{margin-right:auto} }
@media (prefers-reduced-motion: reduce) { *{transition:none !important; animation:none !important} }
/* Subtle calendar hint — отдельной строкой, чтобы не перекрывать заголовок */
.cal-hint{ display:none; }
@media (max-width:520px){
.cal-hint{ display:block; color:var(--muted); font-size:12px; opacity:.75; margin-top:6px; text-align:center; }
}
/* iOS tap targets */
.nav-toggle { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.topbar .nav-toggle .icon { pointer-events: none; }
/* iOS Safari auto-zoom fix:
При focus на input/select/textarea с font-size < 16px мобильный Safari
автоматически зумит страницу на поле ввода, что создаёт «прыжки» вёрстки
(особенно болезненно в модалках и сегментах поиска). Принудительно
поднимаем базовый размер шрифта до 16px для ВСЕХ форм-контролов на
touch-устройствах / узких экранах. Оставляем исключения для
checkbox/radio/range, где font-size роли не играет. */
@media (pointer: coarse), (max-width: 640px) {
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
select,
textarea {
font-size: 16px;
}
}
/* Backdrop for mobile menu */
.nav-backdrop{ position: fixed; inset: 0; background: var(--overlay); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 4000; }
.nav-backdrop.show{ opacity:1; pointer-events:auto; }
body.nav-open { overflow: hidden; }
@media (max-width:860px){
.nav.nav-mobile{ background:var(--surface) !important; border-color:var(--border) !important; color:var(--text) !important; }
}
.theme-light .nav.nav-mobile, .theme-system .nav.nav-mobile{ background:var(--surface) !important; border-color:var(--border) !important; color:var(--text) !important; }
/* === Calendar mobile polish === */
@media (max-width:720px){
.cal-cell{ min-height:92px; padding:8px; border-radius:12px }
.cal-daynum{ font-size:12px; margin-bottom:4px }
.chip{ font-size:12px; padding:6px 8px }
.btn.subtle.small{ padding:6px 8px; font-size:12px; border-radius:8px }
}
@media (max-width:420px){
#calendar{ overflow-x:auto; -webkit-overflow-scrolling: touch; }
.cal-grid{ grid-template-columns: repeat(7, 84px); gap:6px; min-width: 7*84px; }
.cal-cell{ min-height:88px; }
.cal-cell.head{ font-size:12px }
}
.theme-light .chip.add{ border-color:#d6dbe3; color:#94a3b8 }
@media (max-width:480px){
#calendar{ overflow-x:auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
#calendar > .cal-headrow, #calendar > .cal-grid{ grid-template-columns: repeat(7, 96px); gap: 6px; }
.cal-cell{ min-height:90px }
.cal-cell.head{ font-size:12px }
}
/* === Plans page layout === */
.plans-page{ display:grid; gap:18px; width:100%; max-width:1200px; padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
.plans-page *{ min-width:0; box-sizing:border-box; }
.plans-page .btn{ max-width:100%; white-space:normal; text-align:center; }
.plans-hero{
display:flex; justify-content:space-between; align-items:flex-end; gap:18px;
padding:22px; border:1px solid color-mix(in oklab, var(--accent) 24%, var(--border)); border-radius:24px;
background:
radial-gradient(520px 220px at 0% 0%, color-mix(in oklab, var(--accent) 22%, transparent), transparent 64%),
linear-gradient(135deg, color-mix(in oklab, var(--surface) 90%, transparent), var(--card));
box-shadow:0 18px 46px color-mix(in oklab, #000 18%, transparent);
}
.plans-hero .eyebrow{ color:var(--accent); font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.plans-hero h1{ margin:6px 0 8px; font-size:clamp(28px, 5vw, 44px); line-height:1; }
.plans-hero p{ margin:0; max-width:660px; color:var(--muted); font-size:15px; line-height:1.5; overflow-wrap:anywhere; }
.plans-hero__actions{ display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.plans-shell{ display:grid; gap:18px; align-items:start; }
.plans-panel{ border:1px solid var(--border); border-radius:24px; background:var(--card); padding:16px; overflow:hidden; }
.plans-panel--library{ position:static; max-height:none; overflow:visible; }
.plans-panel--board{ display:grid; gap:16px; min-width:0; }
.plans-panel__head,.plans-board-head,.plan-add-card__head,.plan-apply-panel__top,.plan-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.plans-panel__head h2,.plans-board-head h2,.plan-head h2{ margin:0; line-height:1.1; }
.plans-panel__head p,.plans-board-head p,.plan-add-card__head span,.plan-apply-panel__top span{ display:block; margin:5px 0 0; color:var(--muted); font-size:13px; line-height:1.4; }
.plan-create-card,.plan-add-card{
display:grid; gap:10px; margin-top:14px; padding:14px; border:1px solid var(--border); border-radius:18px;
background: color-mix(in oklab, var(--surface) 72%, transparent);
}
.plans-panel--library .plan-create-card{ grid-template-columns:minmax(180px,.8fr) minmax(180px,1fr) minmax(180px,1fr) auto; align-items:end; }
.plan-create-card strong,.plan-add-card strong,.plan-apply-panel strong{ display:block; }
.plan-create-card span{ display:block; margin-top:3px; color:var(--muted); font-size:12px; }
.plan-create-card input,.plan-add-grid input,.plan-add-grid select,.plan-apply-controls input,.plan-apply-controls select{ width:100%; }
.plans-archive-option{ display:flex; gap:9px; align-items:flex-start; margin:12px 2px; color:var(--muted); font-size:12px; line-height:1.35; }
.plans-archive-option span{ overflow-wrap:anywhere; }
.plans-list{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:10px; }
.plan-card{ display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:8px; align-items:center; padding:10px; border:1px solid var(--border); border-radius:18px; background:var(--surface); }
.plan-card.selected{ border-color:color-mix(in oklab, var(--accent) 48%, var(--border)); background:color-mix(in oklab, var(--accent) 10%, var(--surface)); box-shadow:inset 3px 0 0 var(--accent); }
.plan-card__main{ min-width:0; text-align:left; border:0; background:transparent; color:var(--text); padding:2px; cursor:pointer; }
.plan-card__main strong{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.plan-card__main span{ display:block; margin-top:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.plans-archive{ display:grid; gap:10px; margin-top:12px; padding:12px; border:1px dashed var(--border); border-radius:18px; background:color-mix(in oklab, var(--surface) 60%, transparent); }
.plans-archive__head strong{ display:block; }
.plans-archive__head span{ display:block; margin-top:3px; color:var(--muted); font-size:12px; }
.plans-archive-list{ display:grid; gap:8px; }
.plans-archive-item{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center; padding:10px; border:1px solid var(--border); border-radius:14px; background:var(--surface); }
.plans-archive-item span,.plans-archive-item small{ display:block; margin-top:4px; color:var(--muted); font-size:12px; line-height:1.35; }
.plans-empty{ display:grid; gap:4px; padding:16px; border:1px dashed var(--border); border-radius:18px; color:var(--muted); background:color-mix(in oklab, var(--surface) 58%, transparent); }
.plans-empty strong{ color:var(--text); }
.plans-empty--board{ min-height:180px; place-content:center; text-align:center; }
.plan-head{ padding:16px; border:1px solid color-mix(in oklab, var(--accent) 26%, var(--border)); border-radius:20px; background:linear-gradient(135deg, color-mix(in oklab, var(--accent) 12%, var(--surface)), var(--surface)); }
.plan-head p:empty{ display:none; }
.plan-add-grid{ display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:10px; align-items:end; }
.plan-add-grid label,.picker-field{ min-width:0; display:flex; flex-direction:column; gap:6px; color:var(--muted); font-size:12px; }
.picker-field{ grid-column:span 2; }
.picker-field .pf-row{ display:flex; gap:8px; align-items:center; min-width:0; }
.picker-field .pf-btn{ min-height:var(--ctl-h); max-width:100%; padding:10px 12px; border-radius:12px; background:var(--input-bg); border:1px solid var(--border); color:var(--text); cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.picker-field .pf-meta{ color:var(--muted); font-size:12px; white-space:nowrap; }
.days-grid{ display:grid; gap:12px; grid-template-columns:repeat(1, minmax(0,1fr)); }
@media (min-width:840px){ .days-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (min-width:1180px){ .days-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
.day-card{ display:grid; grid-template-rows:auto minmax(0,1fr) auto; gap:10px; align-content:stretch; border:1px solid var(--border); background:var(--surface); border-radius:18px; padding:12px; min-height:132px; }
.day-card__head{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
.day-card h4{ margin:0; font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:var(--accent); }
.day-card__head span{ color:var(--muted); font-size:12px; }
.day-card .list{ display:grid; align-self:start; gap:8px; margin:0; padding:0; list-style:none; }
.plan-card__actions{ display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.plan-day-editor-list{ display:grid; gap:10px; }
.plan-exercise-card{ grid-template-columns:minmax(260px,1.1fr) minmax(520px,2fr) auto; align-items:end; background:var(--surface); }
.plan-exercise-card__metrics{ grid-template-columns:repeat(4, minmax(120px,1fr)); }
.plan-editor-add-grid{ display:grid; grid-template-columns:minmax(160px,.4fr) minmax(260px,1fr); gap:12px; align-items:end; }
.plan-editor-add-grid--single{ grid-template-columns:1fr; }
.plan-editor-load-row{ grid-template-columns:repeat(4, minmax(120px,1fr)) auto; }
.day-card .item{ display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; border:1px solid var(--border); background:var(--card); border-radius:14px; padding:10px 12px; }
.day-card .item .name{ font-weight:800; font-size:14px; line-height:1.2; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.item-type{ margin-top:3px; color:var(--muted); font-size:11px; }
.meta-chips{ display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.plans-shell .chip{ display:inline-flex; align-items:center; gap:6px; padding:3px 8px; border-radius:999px; border:1px solid var(--border); background:var(--chip); font-size:12px; color:var(--text); }
.day-card__empty{ display:grid; place-items:center; min-height:110px; height:100%; border:1px dashed var(--border); border-radius:14px; color:var(--muted); font-size:13px; }
.day-card__edit{ justify-self:start; align-self:end; margin-top:2px; }
.plan-chooser{ display:grid; gap:14px; }
.plan-chooser__list{ display:grid; gap:8px; }
.plan-chooser__item{ display:grid; gap:4px; width:100%; padding:12px; border:1px solid var(--border); border-radius:14px; background:var(--card); color:var(--text); text-align:left; cursor:pointer; }
.plan-chooser__item span{ color:var(--muted); font-size:12px; }
.plan-chooser__item.is-current{ border-color:color-mix(in oklab, var(--accent) 45%, var(--border)); background:color-mix(in oklab, var(--accent) 10%, var(--card)); }
.plans-shell .btn.icon{ padding:6px 8px; border-radius:10px; }
.plans-shell .btn.icon.small{ min-height:34px; font-size:14px; line-height:1; }
.plan-apply-panel{ display:grid; gap:14px; padding:16px; border:1px solid color-mix(in oklab, var(--accent) 22%, var(--border)); border-radius:22px; background:color-mix(in oklab, var(--accent) 8%, var(--surface)); }
.plan-apply-controls{ display:grid; grid-template-columns:minmax(180px,1fr) minmax(220px,1fr) auto; align-items:end; gap:10px; }
.plan-apply-controls label{ display:flex; flex-direction:column; gap:6px; min-width:0; color:var(--muted); font-size:12px; }
.plan-apply-controls input,.plan-apply-controls select{ display:block; width:100%; min-width:0; max-width:100%; min-height:48px; border-radius:14px; padding:12px 14px; box-sizing:border-box; font-size:15px; line-height:1.2; }
.plan-apply-controls input[type="date"]{ appearance:none; -webkit-appearance:none; }
.plan-apply-controls select{ appearance:none; -webkit-appearance:none; padding-right:42px; background-color:var(--input-bg); background-image:linear-gradient(45deg, transparent 50%, var(--muted) 50%),linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%; background-size:6px 6px,6px 6px; background-repeat:no-repeat; }
.plan-apply-controls .btn{ min-height:var(--ctl-h); }
.plan-preview-empty{ padding:14px; border:1px dashed var(--border); border-radius:16px; color:var(--muted); background:color-mix(in oklab, var(--card) 70%, transparent); }
.plan-preview-summary{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:10px; padding:10px 12px; border-radius:14px; background:color-mix(in oklab, var(--accent) 12%, var(--card)); }
.plan-preview-summary span{ color:var(--muted); font-size:12px; }
.plan-apply-panel__actions{ display:flex; justify-content:flex-end; }
.plans-shell #previewWrap table{ width:100%; border-collapse:collapse; min-width:720px; }
.plans-shell #previewWrap th,.plans-shell #previewWrap td{ padding:9px 10px; border-bottom:1px solid var(--border); text-align:left; }
.plans-shell #previewWrap th{ font-size:12px; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); }
.plans-shell #previewWrap .delta-pos{ color:var(--ok); font-weight:700; }
.plans-shell #previewWrap .delta-neg{ color:var(--danger); font-weight:700; }
.plans-shell .pill{ display:inline-block; padding:3px 8px; border-radius:999px; border:1px solid var(--border); font-size:12px; color:var(--muted); }
.plans-shell .daypill{ background:color-mix(in oklab, var(--accent) 12%, transparent); color:var(--accent); }
.plans-created-workouts{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.plans-footnote{ margin:0; }
.picker-head{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.picker-head input[type="search"]{ flex:1 1 260px; background:var(--input-bg); border:1px solid var(--border); border-radius:12px; padding:10px 12px; }
.mg-chips{ display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.mg-chips .chip{ padding:6px 10px; border-radius:999px; background:var(--chip); border:1px solid var(--border); cursor:pointer; }
.mg-chips .chip.active{ background:color-mix(in oklab, var(--accent) 18%, var(--chip)); border-color:color-mix(in oklab, var(--accent) 44%, var(--border)); color:var(--accent); }
.ex-list{ list-style:none; padding:0; margin:12px 0 0; display:grid; gap:8px; grid-template-columns:repeat(1, minmax(0,1fr)); }
.ex-item{ border:1px solid var(--border); border-radius:14px; padding:10px; background:var(--card); display:flex; justify-content:space-between; gap:10px; align-items:center; }
.ex-item .meta{ color:var(--muted); font-size:12px; }
.ex-item .pick{ white-space:nowrap; }
@media (min-width:700px){ .ex-list{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:980px){
.plans-hero{ align-items:flex-start; flex-direction:column; }
.plans-hero__actions{ width:100%; display:grid; grid-template-columns:1fr 1fr; justify-content:stretch; }
.plans-hero__actions .btn{ width:100%; min-height:48px; }
.plans-panel--library .plan-create-card{ grid-template-columns:1fr; }
.plans-list{ grid-template-columns:1fr; }
.plans-archive-item{ grid-template-columns:1fr; align-items:stretch; }
.plan-add-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
.picker-field{ grid-column:1 / -1; }
.plan-apply-panel__top{ flex-direction:column; }
.plan-apply-controls{ width:100%; grid-template-columns:1fr 1fr; }
.plan-apply-controls .btn{ grid-column:1 / -1; justify-self:start; }
}
@media (max-width:680px){
.plans-page{ padding-bottom:calc(96px + env(safe-area-inset-bottom)); }
.plans-hero,.plans-panel{ border-radius:20px; padding:14px; }
.plans-hero h1{ font-size:clamp(30px, 11vw, 42px); }
.plans-hero p{ font-size:14px; }
.plans-hero__actions{ grid-template-columns:1fr; }
.plan-add-card__head,.plan-head{ flex-direction:column; }
.plan-add-card__head .btn,.plan-head .btn{ width:100%; }
.plan-add-grid{ grid-template-columns:1fr; }
.plan-apply-controls{ grid-template-columns:1fr; }
.plan-apply-controls .btn{ width:100%; }
.plans-list{ grid-auto-flow:row; grid-auto-columns:unset; overflow:visible; }
.plan-card{ grid-template-columns:minmax(0, 1fr) auto; }
}
@media (max-width:420px){
.plans-hero,.plans-panel{ margin-left:-4px; margin-right:-4px; }
.plan-card{ grid-template-columns:1fr; }
.plan-card .btn{ width:100%; }
}
/* === Trainer dashboard (/trainer) === */
.page-trainer{
background:
radial-gradient(1000px 520px at 90% -10%, color-mix(in oklab, var(--accent) 12%, transparent), transparent 55%),
var(--bg);
}
.trainer-page{ display:grid; gap:18px; padding-bottom:calc(28px + env(safe-area-inset-bottom)); }
.trainer-page *{ min-width:0; box-sizing:border-box; }
.trainer-hero{
display:flex; justify-content:space-between; align-items:flex-end; gap:18px;
padding:22px; border:1px solid color-mix(in oklab, var(--accent) 24%, var(--border)); border-radius:24px;
background:
radial-gradient(520px 220px at 0% 0%, color-mix(in oklab, var(--accent) 22%, transparent), transparent 64%),
linear-gradient(135deg, color-mix(in oklab, var(--surface) 90%, transparent), var(--card));
box-shadow:0 18px 46px color-mix(in oklab, #000 18%, transparent);
}
.trainer-hero .eyebrow{ color:var(--accent); font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.trainer-hero h1{ margin:6px 0 8px; font-size:clamp(28px, 5vw, 44px); line-height:1; }
.trainer-hero p{ margin:0; max-width:640px; color:var(--muted); font-size:15px; line-height:1.5; }
.trainer-hero__meta{ display:grid; gap:4px; min-width:220px; padding:14px; border:1px solid color-mix(in oklab, var(--accent) 28%, var(--border)); border-radius:18px; background:color-mix(in oklab, var(--accent) 10%, var(--surface)); }
.trainer-hero__meta span{ color:var(--muted); font-size:12px; }
.trainer-hero__meta strong{ font-size:20px; line-height:1.1; }
.trainer-attention{ display:grid; gap:14px; padding:18px; border:1px solid color-mix(in oklab, var(--accent) 26%, var(--border)); border-radius:24px; background:linear-gradient(135deg, color-mix(in oklab, var(--accent) 9%, var(--card)), var(--card)); box-shadow:0 18px 42px color-mix(in oklab, #000 14%, transparent); }
.trainer-attention__head{ display:flex; justify-content:space-between; align-items:flex-start; gap:14px; }
.trainer-attention__head .eyebrow{ margin:0 0 6px; color:var(--accent); font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.trainer-attention__head .title{ margin:0; }
.trainer-attention__head > span{ flex:0 0 auto; display:inline-flex; align-items:center; padding:7px 11px; border-radius:999px; color:var(--accent); background:color-mix(in oklab, var(--accent) 12%, transparent); font-size:12px; font-weight:800; }
.trainer-attention__list{ display:grid; grid-template-columns:repeat(5, minmax(180px,1fr)); gap:10px; }
.trainer-attention-item{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; min-height:132px; padding:14px; border:1px solid var(--border); border-radius:18px; color:var(--text); background:var(--surface); text-decoration:none; transition:transform .18s ease, border-color .18s ease, background .18s ease; }
.trainer-attention-item:hover{ transform:translateY(-2px); border-color:color-mix(in oklab, var(--accent) 34%, var(--border)); background:color-mix(in oklab, var(--accent) 6%, var(--surface)); }
.trainer-attention-item div{ display:grid; gap:5px; }
.trainer-attention-item strong{ font-size:16px; line-height:1.15; }
.trainer-attention-item span{ color:var(--text); font-size:13px; font-weight:800; line-height:1.25; }
.trainer-attention-item small{ color:var(--muted); font-size:12px; line-height:1.35; }
.trainer-attention-item b{ flex:0 0 auto; padding:5px 8px; border-radius:999px; color:var(--muted); background:var(--chip); font-size:11px; line-height:1; }
.trainer-attention-item.is-message{ border-color:color-mix(in oklab, var(--accent) 46%, var(--border)); box-shadow:inset 4px 0 0 var(--accent); }
.trainer-attention-item.is-message b{ color:var(--accent); background:color-mix(in oklab, var(--accent) 12%, transparent); }
.trainer-attention-item.is-warn{ border-color:color-mix(in oklab, var(--warn) 38%, var(--border)); }
.trainer-attention-item.is-warn b{ color:var(--warn); background:color-mix(in oklab, var(--warn) 12%, transparent); }
.trainer-attention-item.is-soft{ border-color:color-mix(in oklab, var(--text) 16%, var(--border)); }
.trainer-kpis{ display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:12px; }
.trainer-kpi{ padding:14px; border:1px solid var(--border); border-radius:18px; background:var(--card); }
.trainer-kpi span{ display:block; color:var(--muted); font-size:12px; line-height:1.35; }
.trainer-kpi strong{ display:block; margin-top:7px; font-size:24px; line-height:1; font-weight:800; font-family:"Manrope", system-ui, -apple-system, Segoe UI, Roboto, Inter; }
.trainer-kpi.is-warn{ border-color:color-mix(in oklab, var(--warn) 34%, var(--border)); background:color-mix(in oklab, var(--warn) 9%, var(--card)); }
.trainer-section{ display:grid; gap:14px; padding:18px; border:1px solid var(--border); border-radius:24px; background:var(--card); }
.trainer-section__head{ display:flex; justify-content:space-between; align-items:flex-start; gap:14px; }
.trainer-section__head .title{ margin:0; }
.trainer-section__head p{ margin:5px 0 0; }
.trainer-client-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; }
.trainer-client-card{ display:grid; gap:14px; padding:16px; border:1px solid var(--border); border-radius:20px; background:var(--surface); }
.trainer-client-card.is-stale{ border-color:color-mix(in oklab, var(--warn) 32%, var(--border)); }
.trainer-client-card.has-unread{ border-color:color-mix(in oklab, var(--accent) 46%, var(--border)); box-shadow:inset 4px 0 0 var(--accent); }
.trainer-client-card__top{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.trainer-client-card h3{ margin:0; font-size:20px; line-height:1.15; }
.trainer-client-card p{ margin:5px 0 0; color:var(--muted); font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.trainer-status{ flex:0 0 auto; display:inline-flex; align-items:center; padding:5px 9px; border-radius:999px; font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.trainer-status.is-ok{ color:var(--accent); background:color-mix(in oklab, var(--accent) 12%, transparent); }
.trainer-status.is-warn{ color:var(--warn); background:color-mix(in oklab, var(--warn) 12%, transparent); }
.trainer-status.is-message{ color:var(--accent); background:color-mix(in oklab, var(--accent) 14%, transparent); }
.trainer-status.is-soft{ color:var(--muted); background:var(--chip); }
.trainer-client-metrics{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px; }
.trainer-client-metrics div{ padding:10px; border:1px solid var(--border); border-radius:14px; background:var(--card); }
.trainer-client-metrics span{ display:block; color:var(--muted); font-size:11px; line-height:1.25; }
.trainer-client-metrics strong{ display:block; margin-top:5px; font-size:14px; line-height:1.15; }
.trainer-client-signals{ display:flex; flex-wrap:wrap; gap:8px; }
.trainer-client-signals span{ display:inline-flex; align-items:center; padding:6px 9px; border:1px solid var(--border); border-radius:999px; color:var(--muted); background:var(--chip); font-size:12px; }
.trainer-client-signals .trainer-client-signal--message{ color:var(--accent); border-color:color-mix(in oklab, var(--accent) 34%, var(--border)); background:color-mix(in oklab, var(--accent) 12%, var(--chip)); font-weight:800; }
.trainer-client-signals .trainer-client-signal--warn{ color:var(--warn); border-color:color-mix(in oklab, var(--warn) 32%, var(--border)); background:color-mix(in oklab, var(--warn) 11%, var(--chip)); font-weight:800; }
.trainer-client-card__actions{ display:flex; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
.trainer-empty{ display:grid; gap:5px; min-height:180px; place-content:center; text-align:center; padding:18px; border:1px dashed var(--border); border-radius:18px; color:var(--muted); background:color-mix(in oklab, var(--surface) 60%, transparent); }
.trainer-empty strong{ color:var(--text); font-size:18px; }
.trainer-invite-form{ display:grid; grid-template-columns:minmax(220px,1fr) auto; gap:12px; align-items:end; padding:14px; border:1px solid color-mix(in oklab, var(--accent) 22%, var(--border)); border-radius:18px; background:color-mix(in oklab, var(--accent) 6%, var(--surface)); }
.trainer-invite-form label{ display:grid; gap:6px; min-width:0; color:var(--muted); font-size:12px; }
.trainer-invite-form p{ grid-column:1 / -1; margin:0; }
@media (max-width:1080px){
.trainer-attention__list{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.trainer-kpis{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.trainer-client-grid{ grid-template-columns:1fr; }
}
@media (max-width:720px){
.trainer-page{ padding-bottom:calc(96px + env(safe-area-inset-bottom)); }
.trainer-hero{ flex-direction:column; align-items:flex-start; padding:16px; border-radius:20px; }
.trainer-hero__meta{ width:100%; }
.trainer-attention{ padding:14px; border-radius:20px; }
.trainer-attention__head{ flex-direction:column; }
.trainer-attention__head > span{ align-self:flex-start; }
.trainer-attention__list{ grid-template-columns:1fr; }
.trainer-attention-item{ min-height:0; }
.trainer-kpis{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.trainer-section{ padding:14px; border-radius:20px; }
.trainer-client-metrics{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.trainer-client-card__top{ flex-direction:column; }
.trainer-client-card__actions .btn{ width:100%; }
.trainer-invite-form{ grid-template-columns:1fr; }
.trainer-invite-form .btn{ width:100%; }
}
@media (max-width:420px){
.trainer-kpis{ grid-template-columns:1fr; }
.trainer-client-metrics{ grid-template-columns:1fr; }
}
/* === Trainer client card (/trainer/{id}) === */
.trainer-client-page{ gap:16px; }
.trainer-client-hero{ display:grid; gap:18px; padding:22px; border:1px solid color-mix(in oklab, var(--accent) 24%, var(--border)); border-radius:24px; background:linear-gradient(135deg, color-mix(in oklab, var(--accent) 10%, var(--surface)), var(--card)); }
.trainer-client-hero__top{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }
.trainer-back{ display:inline-flex; margin-bottom:12px; color:var(--muted); font-size:13px; }
.trainer-client-hero .eyebrow{ color:var(--accent); font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.trainer-client-hero h1{ margin:6px 0 6px; font-size:clamp(28px, 5vw, 42px); line-height:1; }
.trainer-client-hero p{ margin:0; color:var(--muted); }
.trainer-client-hero__grid{ display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:10px; }
.trainer-client-hero__grid div{ padding:12px; border:1px solid var(--border); border-radius:16px; background:color-mix(in oklab, var(--card) 82%, transparent); }
.trainer-client-hero__grid span{ display:block; color:var(--muted); font-size:11px; line-height:1.3; }
.trainer-client-hero__grid strong{ display:block; margin-top:6px; font-size:18px; line-height:1.1; }
.trainer-client-hero__grid small{ display:block; margin-top:5px; color:var(--muted); font-size:11px; }
.trainer-workspace{ display:grid; gap:16px; padding:18px; border:1px solid var(--border); border-radius:24px; background:var(--card); }
.trainer-tabs{ display:flex; gap:8px; flex-wrap:wrap; padding:6px; border:1px solid var(--border); border-radius:18px; background:var(--surface); }
.trainer-tabs .btn{ flex:0 1 auto; }
.trainer-tabs .is-active{ border-color:color-mix(in oklab, var(--accent) 42%, var(--border)); color:var(--accent); background:color-mix(in oklab, var(--accent) 12%, var(--chip)); }
.trainer-tab-panel{ display:grid; gap:14px; }
.trainer-overview-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
.trainer-overview-card{ display:grid; gap:8px; align-content:start; padding:16px; border:1px solid var(--border); border-radius:18px; background:var(--surface); }
.trainer-overview-card span{ color:var(--muted); font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.trainer-overview-card strong{ font-size:22px; line-height:1.1; }
.trainer-overview-card p{ margin:0; color:var(--muted); font-size:13px; line-height:1.45; }
.trainer-overview-card .btn{ justify-self:start; margin-top:4px; }
.trainer-tab-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:14px; }
.trainer-tab-head .title{ margin:0; }
.trainer-period-actions{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.trainer-period-actions .is-active{ border-color:color-mix(in oklab, var(--accent) 42%, var(--border)); color:var(--accent); background:color-mix(in oklab, var(--accent) 12%, var(--chip)); }
.trainer-nutrition-box{ display:grid; gap:14px; }
.trainer-nutrition-summary{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; }
.trainer-nutrition-summary div,.trainer-nutrition-plan,.trainer-nutrition-days{ padding:14px; border:1px solid var(--border); border-radius:16px; background:var(--surface); }
.trainer-nutrition-summary span,.trainer-nutrition-plan span{ display:block; color:var(--muted); font-size:12px; line-height:1.35; }
.trainer-nutrition-summary strong,.trainer-nutrition-plan strong{ display:block; margin-top:6px; font-size:18px; line-height:1.15; }
.trainer-nutrition-plan{ display:flex; justify-content:space-between; align-items:center; gap:14px; }
.trainer-nutrition-plan p{ margin:6px 0 0; color:var(--muted); font-size:13px; }
.trainer-nutrition-days h4{ margin:0 0 10px; }
.trainer-nutrition-days ul{ list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.trainer-nutrition-days li{ display:grid; gap:3px; padding:10px; border:1px solid var(--border); border-radius:12px; background:var(--card); }
.trainer-nutrition-days li span,.trainer-nutrition-days li small{ color:var(--muted); }
.trainer-activity-box{ display:grid; gap:14px; }
.trainer-activity-summary{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px; }
.trainer-activity-summary div,.trainer-activity-days{ padding:14px; border:1px solid var(--border); border-radius:16px; background:var(--surface); }
.trainer-activity-summary span{ display:block; color:var(--muted); font-size:12px; line-height:1.35; }
.trainer-activity-summary strong{ display:block; margin-top:6px; font-size:18px; line-height:1.15; }
.trainer-activity-summary small{ display:block; margin-top:5px; color:var(--muted); font-size:11px; }
.trainer-activity-days ul{ list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.trainer-activity-days li{ display:grid; gap:8px; padding:10px; border:1px solid var(--border); border-radius:12px; background:var(--card); }
.trainer-activity-days li.is-goal{ border-color:color-mix(in oklab, var(--accent) 36%, var(--border)); background:color-mix(in oklab, var(--accent) 7%, var(--card)); }
.trainer-activity-days li div{ display:flex; justify-content:space-between; gap:10px; align-items:baseline; }
.trainer-activity-days li span,.trainer-activity-days li small{ color:var(--muted); }
.trainer-activity-days i{ display:block; height:9px; border-radius:999px; overflow:hidden; background:var(--chip); border:1px solid var(--border); }
.trainer-activity-days b{ display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg, var(--accent), color-mix(in oklab, var(--accent) 60%, #16a34a)); }
.trainer-workout-list{ display:grid; gap:12px; }
.trainer-workout-card{ display:grid; gap:12px; padding:14px; border:1px solid var(--border); border-radius:18px; background:var(--surface); }
.trainer-workout-card.is-completed{ border-color:color-mix(in oklab, var(--accent) 28%, var(--border)); }
.trainer-workout-card.is-skipped{ border-color:color-mix(in oklab, var(--muted) 34%, var(--border)); background:color-mix(in oklab, var(--muted) 5%, var(--surface)); }
.trainer-workout-card.is-external-activity{ background:linear-gradient(135deg, color-mix(in oklab, var(--accent) 7%, var(--surface)), var(--surface)); }
.trainer-workout-card__head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.trainer-workout-card__head span{ display:block; color:var(--muted); font-size:12px; margin-bottom:6px; }
.trainer-workout-card__head input{ min-width:min(100%, 260px); font-weight:700; }
.trainer-workout-card__head b{ flex:0 0 auto; padding:5px 9px; border-radius:999px; color:var(--muted); background:var(--chip); font-size:11px; text-transform:uppercase; letter-spacing:.04em; }
.trainer-workout-card.is-completed .trainer-workout-card__head b{ color:var(--accent); background:color-mix(in oklab, var(--accent) 12%, transparent); }
.trainer-workout-card.is-skipped .trainer-workout-card__head b{ color:var(--muted); background:color-mix(in oklab, var(--muted) 13%, transparent); }
.trainer-workout-card__meta{ display:grid; grid-template-columns:1fr auto; align-items:center; gap:10px; }
.trainer-workout-card__meta span{ color:var(--muted); font-size:13px; }
.trainer-workout-card__source{ justify-self:end; padding:5px 9px; border-radius:999px; background:color-mix(in oklab, var(--accent) 10%, transparent); color:var(--accent) !important; font-weight:700; }
.trainer-workout-card__actions{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.trainer-workout-more{ display:flex; justify-content:center; padding:4px 0 2px; }
.trainer-workout-more .btn{ min-width:min(100%, 220px); }
.trainer-workout-end{ text-align:center; margin:2px 0 0; }
.trainer-plans-box{ display:grid; gap:14px; align-items:start; }
.trainer-plan-library,.trainer-plan-board{ display:grid; gap:12px; min-width:0; }
.trainer-plan-library{ order:1; }
.trainer-plan-board{ order:2; }
.trainer-plan-create-form,.trainer-plan-edit-form,.trainer-plan-item-form,.trainer-plan-apply{ display:grid; gap:10px; padding:14px; border:1px solid var(--border); border-radius:18px; background:var(--surface); }
.trainer-plan-create-form label,.trainer-plan-edit-form label,.trainer-plan-item-form label,.trainer-plan-apply label{ display:grid; gap:6px; color:var(--muted); font-size:12px; }
.trainer-plan-create-form{ grid-template-columns:minmax(180px,1fr) minmax(220px,1.4fr) auto; align-items:end; }
.trainer-plan-edit-form{ grid-template-columns:minmax(180px,1fr) minmax(220px,1.4fr) auto; align-items:end; }
.trainer-plan-head-actions{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.trainer-plan-list{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:8px; }
.trainer-plan-list-item{ display:grid; gap:5px; width:100%; text-align:left; padding:12px; border:1px solid var(--border); border-radius:14px; color:var(--text); background:var(--card); cursor:pointer; }
.trainer-plan-list-item span{ color:var(--muted); font-size:12px; line-height:1.35; }
.trainer-plan-list-item.is-active{ border-color:color-mix(in oklab, var(--accent) 44%, var(--border)); background:color-mix(in oklab, var(--accent) 8%, var(--card)); }
.trainer-plan-archive{ display:grid; gap:10px; margin-top:2px; padding:12px; border:1px dashed var(--border); border-radius:18px; background:color-mix(in oklab, var(--surface) 60%, transparent); }
.trainer-plan-archive__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.trainer-plan-archive__head strong{ display:block; }
.trainer-plan-archive__head span{ display:block; margin-top:3px; color:var(--muted); font-size:12px; }
.trainer-plan-archive-list{ display:grid; gap:8px; }
.trainer-plan-archive-item{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center; padding:10px; border:1px solid var(--border); border-radius:14px; background:var(--card); }
.trainer-plan-archive-item span,.trainer-plan-archive-item small{ display:block; margin-top:4px; color:var(--muted); font-size:12px; line-height:1.35; }
.trainer-plan-item-form{ grid-template-columns:minmax(80px,.45fr) minmax(240px,1.4fr) repeat(4, minmax(94px,.55fr)) auto; align-items:end; }
.trainer-plan-days{ display:grid; gap:10px; }
.trainer-plan-day{ display:grid; gap:10px; padding:12px; border:1px solid var(--border); border-radius:16px; background:var(--surface); }
.trainer-plan-day__head{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
.trainer-plan-day__head span{ color:var(--muted); font-size:12px; }
.trainer-plan-item{ display:grid; grid-template-columns:minmax(180px,1fr) minmax(320px,1.4fr) auto; gap:10px; align-items:end; padding:10px; border:1px solid var(--border); border-radius:14px; background:var(--card); }
.trainer-plan-item span{ display:block; margin-top:4px; color:var(--muted); font-size:12px; }
.trainer-plan-item__inputs{ display:grid; grid-template-columns:repeat(4, minmax(72px,1fr)); gap:8px; }
.trainer-plan-item__actions{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.trainer-plan-apply__controls{ display:grid; grid-template-columns:minmax(160px,.7fr) minmax(180px,.8fr) auto; gap:10px; align-items:end; }
.trainer-plan-conflict{ display:grid; gap:10px; margin-bottom:10px; padding:12px; border:1px solid color-mix(in oklab, var(--danger) 40%, var(--border)); border-radius:16px; background:color-mix(in oklab, var(--danger) 9%, var(--surface)); }
.trainer-plan-conflict strong{ color:var(--danger); }
.trainer-plan-conflict span{ color:var(--muted); font-size:13px; line-height:1.4; }
.trainer-plan-conflict__list{ display:flex; flex-wrap:wrap; gap:8px; }
.trainer-control{ display:block; width:100%; min-width:0; max-width:100%; min-height:48px; border-radius:14px; padding:12px 14px; box-sizing:border-box; background:var(--input-bg); border:1px solid var(--border); color:var(--text); font-size:15px; line-height:1.2; }
.trainer-control[type="search"]{ appearance:none; -webkit-appearance:none; }
.trainer-control[type="date"]{ appearance:none; -webkit-appearance:none; }
.trainer-select{ appearance:none; -webkit-appearance:none; padding-right:42px; background-color:var(--input-bg); background-image:linear-gradient(45deg, transparent 50%, var(--muted) 50%),linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%; background-size:6px 6px,6px 6px; background-repeat:no-repeat; }
.trainer-workout-create-form{ display:grid; grid-template-columns:minmax(160px,.7fr) minmax(260px,1.4fr) minmax(180px,.8fr) auto; gap:14px; align-items:end; }
.trainer-workout-create-form label{ display:grid; gap:6px; min-width:0; color:var(--muted); font-size:12px; }
.trainer-workout-create-form .btn{ min-height:48px; }
.trainer-workout-search{ display:grid; gap:6px; max-width:520px; margin-top:14px; color:var(--muted); font-size:12px; }
.trainer-workout-status-select{ width:clamp(160px, 18vw, 220px); justify-self:end; }
.trainer-progress-filters{ display:grid; grid-template-columns:minmax(220px,1fr) minmax(160px,.45fr); gap:14px; align-items:end; max-width:760px; }
.trainer-progress-filters label{ display:grid; gap:6px; min-width:0; color:var(--muted); font-size:12px; }
.trainer-progress-chart{ display:grid; gap:10px; margin-top:14px; padding:14px; border:1px solid var(--border); border-radius:18px; background:var(--surface); }
.trainer-progress-chart__head{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; }
.trainer-progress-chart__head strong{ font-size:16px; }
.trainer-pb-grid{ display:grid; gap:8px; }
.trainer-exercise-list{ display:grid; gap:10px; }
.trainer-exercise-card{ display:grid; grid-template-columns:minmax(220px,1.4fr) minmax(280px,1.6fr) auto; gap:10px; align-items:end; padding:12px; border:1px solid var(--border); border-radius:16px; background:var(--surface); }
.trainer-exercise-card__main{ display:grid; gap:6px; }
.trainer-exercise-card__main span{ color:var(--muted); font-size:12px; }
.trainer-exercise-card__main strong{ font-size:16px; line-height:1.2; }
.trainer-exercise-card label{ display:grid; gap:6px; color:var(--muted); font-size:12px; }
.trainer-exercise-card__metrics{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; }
.trainer-exercise-card__actions{ display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; }
.trainer-workout-edit-page{ display:grid; gap:18px; padding-bottom:calc(32px + env(safe-area-inset-bottom)); }
.trainer-workout-edit-page *{ min-width:0; box-sizing:border-box; }
.trainer-workout-edit-page .trainer-workspace{ padding:22px; border-radius:28px; box-shadow:0 18px 48px rgba(15,23,42,.06); }
.trainer-workout-edit-form{ display:grid; grid-template-columns:minmax(160px,.7fr) minmax(240px,1.4fr) minmax(180px,.8fr) auto; gap:14px; align-items:end; }
.trainer-workout-edit-form label,.trainer-exercise-search-form label{ display:grid; gap:6px; color:var(--muted); font-size:12px; }
.trainer-exercise-search-form{ display:grid; gap:18px; }
.trainer-exercise-search-field input{ width:100%; }
.trainer-exercise-autocomplete{ display:block; }
.trainer-exercise-autocomplete input[type="text"]{ min-height:52px; border-radius:16px; font-size:16px; }
.trainer-exercise-autocomplete input[type="text"]:focus{ box-shadow:0 0 0 7px color-mix(in oklab, var(--accent) 18%, transparent); }
.exercise-picker-chips{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.exercise-picker-chip{ border:1px solid var(--border); border-radius:999px; background:var(--surface); color:var(--muted); padding:7px 11px; font-size:12px; font-weight:700; line-height:1; cursor:pointer; }
.exercise-picker-chip:hover,.exercise-picker-chip:focus{ border-color:color-mix(in oklab, var(--accent) 38%, var(--border)); color:var(--text); }
.exercise-picker-chip.is-active{ border-color:color-mix(in oklab, var(--accent) 70%, var(--border)); background:color-mix(in oklab, var(--accent) 14%, var(--surface)); color:var(--accent); }
.trainer-exercise-results{ max-height:320px; border-radius:16px; padding:6px; }
.trainer-exercise-result.is-selected{ background:color-mix(in oklab, var(--accent) 10%, var(--surface)); }
.trainer-exercise-hint{ display:block; padding:10px 12px; color:var(--muted); font-size:13px; }
.trainer-exercise-load-row{ display:grid; grid-template-columns:repeat(3, minmax(120px,1fr)) auto; gap:14px; align-items:end; }
.plan-exercise-card.trainer-exercise-card{ grid-template-columns:minmax(300px,1.25fr) minmax(560px,1.6fr) auto; }
.trainer-exercise-card__metrics.plan-exercise-card__metrics{ grid-template-columns:minmax(96px,.75fr) minmax(110px,.9fr) minmax(110px,.9fr) minmax(96px,.7fr); }
.plan-exercise-card .trainer-exercise-card__actions{ flex-wrap:nowrap; }
.page-exercises{ --accent:#00C853; --ring:#00C853; }
.exercises-page{ display:grid; gap:18px; }
.exercises-page *{ min-width:0; box-sizing:border-box; }
.exercises-hero{ overflow:hidden; position:relative; }
.exercises-hero::after{
content:"";
position:absolute;
right:-72px; top:-96px;
width:260px; height:260px;
border-radius:999px;
background:radial-gradient(circle, color-mix(in oklab, var(--accent) 24%, transparent), transparent 68%);
pointer-events:none;
}
.exercises-hero .trainer-client-hero__top{ position:relative; z-index:1; }
.exercises-hero .btn{ min-height:46px; white-space:nowrap; }
.exercises-hero__grid{ position:relative; z-index:1; grid-template-columns:repeat(3, minmax(0,1fr)); }
.exercises-layout{ display:grid; grid-template-columns:1fr; gap:18px; align-items:start; }
.exercises-library,.exercises-editor{ box-shadow:0 18px 48px rgba(15,23,42,.06); }
.exercises-editor{ position:static; }
.exercises-section-head p{ margin:5px 0 0; }
.exercises-search-form{ gap:10px; }
.exercises-group-chips{ margin-top:12px; max-height:92px; overflow:auto; padding-bottom:2px; }
.exercises-mode-toggle{ display:flex; gap:8px; flex-wrap:wrap; padding:5px; border:1px solid var(--border); border-radius:18px; background:var(--surface); width:max-content; max-width:100%; }
.exercise-mode-chip{ border:0; border-radius:999px; background:transparent; color:var(--muted); padding:8px 13px; font-size:12px; font-weight:800; cursor:pointer; }
.exercise-mode-chip:hover,.exercise-mode-chip:focus{ color:var(--text); }
.exercise-mode-chip.is-active{ background:color-mix(in oklab, var(--accent) 13%, var(--card)); color:var(--accent); box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--accent) 38%, var(--border)); }
.exercises-help{ margin:0; }
.exercise-library-list{ display:grid; grid-template-columns:1fr; gap:12px; }
.exercise-card{ display:grid; gap:12px; padding:14px; border:1px solid var(--border); border-radius:20px; background:var(--surface); transition:border-color .16s, box-shadow .16s, transform .16s, background-color .16s; }
.exercise-card:hover{ transform:translateY(-1px); border-color:color-mix(in oklab, var(--accent) 28%, var(--border)); box-shadow:0 16px 34px color-mix(in oklab, #000 8%, transparent); }
.exercise-card.is-active{ border-color:color-mix(in oklab, var(--accent) 58%, var(--border)); background:linear-gradient(135deg, color-mix(in oklab, var(--accent) 10%, var(--surface)), var(--surface)); box-shadow:0 0 0 1px color-mix(in oklab, var(--accent) 24%, transparent), 0 18px 38px color-mix(in oklab, var(--accent) 10%, transparent); }
.exercise-card.is-archived{ border-style:dashed; background:color-mix(in oklab, var(--surface) 72%, transparent); }
.exercise-card__main{ display:grid; gap:7px; width:100%; padding:0; border:0; background:transparent; color:var(--text); text-align:left; cursor:pointer; }
.exercise-card__main strong{ font-size:18px; line-height:1.15; overflow-wrap:anywhere; }
.exercise-card__main span:last-child{ color:var(--muted); font-size:13px; line-height:1.45; }
.exercise-card__kicker{ color:var(--accent); font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.exercise-card__footer{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
.exercise-card__actions{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.exercise-card__type--custom{ color:var(--accent); border:1px solid color-mix(in oklab, var(--accent) 28%, var(--border)); background:color-mix(in oklab, var(--accent) 10%, transparent); }
.exercise-card__type--standard{ color:var(--muted); }
.exercise-card__type--archived{ color:var(--warn); border:1px solid color-mix(in oklab, var(--warn) 30%, var(--border)); background:color-mix(in oklab, var(--warn) 10%, transparent); }
.ex-form{ display:grid; gap:14px; }
.ex-form-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(180px,.55fr); gap:14px; align-items:end; }
.ex-form label{ display:grid; gap:6px; color:var(--muted); font-size:12px; }
.ex-form textarea.trainer-control{ min-height:180px; resize:vertical; line-height:1.45; }
.ex-check{ display:flex !important; grid-template-columns:none; align-items:center; gap:9px; padding:12px; border:1px dashed var(--border); border-radius:16px; background:color-mix(in oklab, var(--surface) 72%, transparent); color:var(--text) !important; font-size:13px !important; }
.ex-check input{ flex:0 0 auto; }
.ex-form-actions{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.exercise-view{ display:grid; gap:14px; }
.exercise-view[hidden],.ex-form[hidden]{ display:none; }
.ex-view-name{ margin:0; font-size:clamp(24px, 4vw, 34px); line-height:1.05; }
.ex-view-meta{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; color:var(--muted); }
.ex-view-desc{ white-space:pre-wrap; padding:14px; border:1px solid var(--border); border-radius:18px; background:var(--surface); line-height:1.55; }
.exercise-detail-modal{ width:min(620px, 94vw); }
.exercise-detail-modal__content{ display:grid; gap:14px; }
.exercise-detail-modal__head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.exercise-detail-modal__title{ margin:0; font-size:clamp(26px, 6vw, 38px); line-height:1.04; overflow-wrap:anywhere; }
.exercise-detail-modal__desc{ white-space:pre-wrap; padding:14px; border:1px solid var(--border); border-radius:18px; background:var(--card); color:var(--text); line-height:1.55; }
.exercise-detail-modal__actions{ display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
body.has-bottom-nav .exercises-page{ padding-bottom:calc(var(--bottom-nav-h) + env(safe-area-inset-bottom) + 24px); }
.trainer-progress-kpis{ display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:10px; }
.trainer-progress-kpis div{ padding:12px; border:1px solid var(--border); border-radius:16px; background:var(--surface); }
.trainer-progress-kpis span{ display:block; color:var(--muted); font-size:12px; line-height:1.35; }
.trainer-progress-kpis strong{ display:block; margin-top:6px; font-size:20px; line-height:1.1; }
.trainer-progress-kpis small{ display:block; margin-top:5px; color:var(--muted); font-size:11px; }
.trainer-messages-box{ display:grid; gap:14px; }
.trainer-messages-status{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px; border:1px solid var(--border); border-radius:18px; background:var(--surface); }
.trainer-messages-status.is-wait{ border-color:color-mix(in oklab, var(--accent) 42%, var(--border)); background:linear-gradient(135deg, color-mix(in oklab, var(--accent) 10%, var(--surface)), var(--surface)); box-shadow:inset 4px 0 0 var(--accent); }
.trainer-messages-status.is-ok{ border-color:color-mix(in oklab, var(--text) 12%, var(--border)); }
.trainer-messages-status span{ display:block; color:var(--muted); font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.trainer-messages-status strong{ display:block; margin-top:4px; font-size:18px; line-height:1.15; }
.trainer-messages-status small{ display:block; margin-top:4px; color:var(--muted); font-size:12px; }
.trainer-messages-status__actions{ display:flex; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
.trainer-messages-list{ display:grid; gap:12px; padding:14px; border:1px solid var(--border); border-radius:22px; background:linear-gradient(180deg, color-mix(in oklab, var(--surface) 72%, transparent), color-mix(in oklab, var(--card) 86%, transparent)); }
.trainer-messages-more{ display:flex; justify-content:center; padding:2px 0 6px; }
.trainer-messages-more .btn{ border-style:dashed; color:var(--muted); background:color-mix(in oklab, var(--surface) 68%, transparent); }
.trainer-message{ display:flex; align-items:flex-end; }
.trainer-message.is-trainer{ justify-content:flex-end; }
.trainer-message__bubble{ display:grid; gap:10px; width:min(78%, 620px); padding:14px; border:1px solid var(--border); border-radius:18px 18px 18px 6px; background:var(--surface); box-shadow:0 10px 24px color-mix(in oklab, #000 7%, transparent); }
.trainer-message.is-trainer .trainer-message__bubble{ border-color:color-mix(in oklab, var(--accent) 34%, var(--border)); border-radius:18px 18px 6px 18px; background:linear-gradient(135deg, color-mix(in oklab, var(--accent) 14%, var(--surface)), var(--surface)); }
.trainer-message.is-report .trainer-message__bubble{ border-color:color-mix(in oklab, var(--accent) 46%, var(--border)); background:linear-gradient(135deg, color-mix(in oklab, var(--accent) 12%, var(--surface)), var(--surface)); }
.trainer-message__head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.trainer-message__head span{ display:block; margin-top:3px; color:var(--muted); font-size:12px; }
.trainer-message__head b{ flex:0 0 auto; padding:5px 9px; border-radius:999px; color:var(--muted); background:var(--chip); font-size:11px; text-transform:uppercase; letter-spacing:.04em; }
.trainer-message.is-report .trainer-message__head b{ color:var(--accent); background:color-mix(in oklab, var(--accent) 12%, transparent); }
.trainer-message__body{ color:var(--text); font-size:13px; line-height:1.5; white-space:normal; overflow-wrap:anywhere; }
.trainer-message .btn{ justify-self:start; }
.trainer-message-form,.trainer-chat-form{ display:grid; gap:10px; padding:14px; border:1px solid var(--border); border-radius:18px; background:var(--surface); }
.trainer-message-form label,.trainer-chat-form label{ display:grid; gap:6px; color:var(--muted); font-size:12px; }
.trainer-message-form textarea,.trainer-chat-form textarea{ min-height:104px; resize:vertical; }
.trainer-message-form .btn,.trainer-chat-form .btn{ justify-self:start; }
.trainer-chat-page{ max-width:920px; padding-bottom:calc(96px + env(safe-area-inset-bottom)); }
.trainer-chat-card{ display:grid; gap:14px; }
.trainer-chat-card__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.trainer-chat-card__head p{ margin:5px 0 0; }
.trainer-chat-list{ display:grid; gap:12px; padding:14px; border:1px solid var(--border); border-radius:22px; background:linear-gradient(180deg, color-mix(in oklab, var(--surface) 72%, transparent), color-mix(in oklab, var(--card) 86%, transparent)); }
.trainer-chat-more{ display:flex; justify-content:center; padding:2px 0 6px; }
.trainer-chat-more .btn{ border-style:dashed; color:var(--muted); background:color-mix(in oklab, var(--surface) 68%, transparent); }
.trainer-chat-message{ display:flex; align-items:flex-end; }
.trainer-chat-message.is-client{ justify-content:flex-end; }
.trainer-chat-message__bubble{ display:grid; gap:8px; width:min(78%, 620px); padding:12px; border:1px solid var(--border); border-radius:18px 18px 18px 6px; background:var(--surface); box-shadow:0 10px 24px color-mix(in oklab, #000 7%, transparent); }
.trainer-chat-message.is-client .trainer-chat-message__bubble{ border-color:color-mix(in oklab, var(--accent) 34%, var(--border)); border-radius:18px 18px 6px 18px; background:linear-gradient(135deg, color-mix(in oklab, var(--accent) 14%, var(--surface)), var(--surface)); }
.trainer-chat-message.is-report .trainer-chat-message__bubble{ border-color:color-mix(in oklab, var(--accent) 46%, var(--border)); background:linear-gradient(135deg, color-mix(in oklab, var(--accent) 12%, var(--surface)), var(--surface)); }
.trainer-chat-message__meta{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.trainer-chat-message__meta span{ color:var(--muted); font-size:12px; }
.trainer-chat-message__body{ line-height:1.5; overflow-wrap:anywhere; }
@media (max-width:1080px){
.trainer-client-hero__grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.trainer-nutrition-summary{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.trainer-activity-summary{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.trainer-exercise-card{ grid-template-columns:1fr; }
.plan-exercise-card.trainer-exercise-card{ grid-template-columns:1fr; }
.exercises-layout{ grid-template-columns:1fr; }
.exercises-editor{ position:static; }
.trainer-workout-create-form{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.trainer-workout-create-form label:nth-of-type(2){ grid-column:1 / -1; }
.trainer-workout-create-form .btn{ grid-column:1 / -1; justify-self:start; }
.trainer-workout-edit-form,.trainer-exercise-load-row{ grid-template-columns:1fr 1fr; }
.trainer-progress-kpis{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}
@media (max-width:720px){
.trainer-client-hero,.trainer-workspace{ padding:14px; border-radius:20px; }
.trainer-client-hero__top{ flex-direction:column; }
.trainer-client-hero__grid,.trainer-overview-grid{ grid-template-columns:1fr; }
.exercises-hero .btn{ width:100%; }
.exercise-library-list{ grid-template-columns:1fr; }
.exercises-mode-toggle{ width:100%; }
.exercise-mode-chip{ flex:1 1 120px; }
.exercise-card__footer{ align-items:flex-start; flex-direction:column; }
.exercise-card__actions{ width:100%; justify-content:stretch; }
.exercise-card__actions .btn{ flex:1 1 120px; }
.ex-form-grid{ grid-template-columns:1fr; }
.ex-form-actions .btn{ flex:1 1 150px; }
.exercise-detail-modal__actions .btn{ flex:1 1 150px; }
.trainer-tabs{ display:grid; grid-template-columns:1fr 1fr; }
.trainer-tabs .btn{ width:100%; }
.trainer-overview-card .btn{ width:100%; justify-self:stretch; }
.trainer-tab-head,.trainer-nutrition-plan{ flex-direction:column; align-items:stretch; }
.trainer-period-actions{ justify-content:stretch; }
.trainer-period-actions .btn,.trainer-nutrition-plan .btn{ flex:1 1 auto; width:100%; }
.trainer-nutrition-summary{ grid-template-columns:1fr; }
.trainer-activity-summary{ grid-template-columns:1fr; }
.trainer-progress-kpis{ grid-template-columns:1fr; }
.trainer-plans-box{ grid-template-columns:1fr; }
.trainer-plan-create-form,.trainer-plan-edit-form,.trainer-plan-item-form,.trainer-plan-apply__controls{ grid-template-columns:1fr; }
.trainer-plan-head-actions{ justify-content:stretch; }
.trainer-plan-head-actions .btn{ flex:1 1 140px; }
.trainer-plan-archive__head,.trainer-plan-archive-item{ grid-template-columns:1fr; align-items:stretch; }
.trainer-plan-item{ grid-template-columns:1fr; }
.trainer-plan-item__inputs{ grid-template-columns:1fr 1fr; }
.trainer-plan-item__actions .btn{ flex:1 1 140px; }
.trainer-workout-card__head{ flex-direction:column; }
.trainer-workout-card__head input{ width:100%; }
.trainer-workout-card__meta{ grid-template-columns:1fr; align-items:stretch; }
.trainer-workout-status-select{ width:100%; justify-self:stretch; }
.trainer-workout-card__actions .btn{ flex:1 1 140px; }
.trainer-exercise-card__metrics{ grid-template-columns:1fr; }
.trainer-exercise-card__metrics.plan-exercise-card__metrics{ grid-template-columns:1fr; }
.plan-exercise-card .trainer-exercise-card__actions{ flex-wrap:wrap; }
.trainer-exercise-card__actions .btn{ flex:1 1 140px; }
.trainer-workout-edit-page{ padding-bottom:calc(96px + env(safe-area-inset-bottom)); }
.trainer-workout-create-form{ grid-template-columns:1fr; }
.trainer-workout-create-form label:nth-of-type(2),.trainer-workout-create-form .btn{ grid-column:auto; justify-self:stretch; }
.trainer-workout-create-form .btn{ width:100%; }
.trainer-workout-search{ max-width:none; }
.trainer-progress-filters{ grid-template-columns:1fr; max-width:none; }
.trainer-workout-edit-form,.trainer-exercise-load-row{ grid-template-columns:1fr; }
.trainer-workout-edit-form .btn,.trainer-exercise-load-row .btn{ width:100%; }
.trainer-exercise-result{ align-items:flex-start; flex-direction:column; }
.trainer-messages-status{ align-items:stretch; flex-direction:column; }
.trainer-messages-status__actions{ justify-content:stretch; }
.trainer-messages-status__actions .btn{ flex:1 1 120px; }
.trainer-messages-list{ padding:10px; border-radius:18px; }
.trainer-message__bubble{ width:min(92%, 620px); padding:12px; }
.trainer-message .btn{ width:100%; justify-self:stretch; }
.trainer-message-form{ position:sticky; bottom:calc(76px + env(safe-area-inset-bottom)); z-index:12; box-shadow:0 -14px 34px color-mix(in oklab, #000 13%, transparent); }
.trainer-message-form .btn,.trainer-chat-form .btn{ width:100%; justify-self:stretch; }
.trainer-chat-form{ position:sticky; bottom:calc(76px + env(safe-area-inset-bottom)); z-index:12; box-shadow:0 -14px 34px color-mix(in oklab, #000 13%, transparent); }
.trainer-chat-card__head{ flex-direction:column; }
.trainer-chat-card__head .btn{ width:100%; }
.trainer-chat-list{ padding:10px; border-radius:18px; }
.trainer-chat-message__bubble{ width:min(92%, 620px); }
.trainer-chat-message__meta{ flex-direction:column; gap:3px; }
}
@media (max-width:420px){
.trainer-tabs{ grid-template-columns:1fr; }
}
/* --- Gamification polish --- */
.points-badge{
background: rgba(234,179,8,.15);
color: #eab308;
border-radius: 999px;
padding: 6px 10px;
font-weight: 700;
}
.gam-progress-bar{
width: 100%;
height: 10px;
background: var(--chip);
border-radius: 999px;
overflow: hidden;
border: 1px solid var(--border);
}
.gam-progress-fill{
height: 100%;
background: linear-gradient(135deg,#22d3ee,#06b6d4);
width: 0%;
transition: width .6s ease;
}
.gam-heat{ display:flex; gap:6px; align-items:center; }
.gam-dot{
width: 12px; height: 12px; border-radius: 3px;
background: var(--chip); border:1px solid var(--border);
opacity:.7;
}
.gam-dot.on { background: rgba(34,211,238,.85); opacity:1; }
.gam-dot.off { background: var(--chip); }
.gam-badge-pop{ animation: gamPop .35s ease-out both; }
@keyframes gamPop {
from { transform: scale(.96); opacity: .0; }
to { transform: scale(1); opacity: 1; }
}
/* Gamification */
.gam-wrap{display:grid;gap:16px}
.badge-card{display:flex;gap:12px;align-items:center;background:var(--card);padding:10px;border-radius:12px;border:1px solid var(--border)}
.badge-icon{display:grid;place-items:center;flex:0 0 auto;width:42px;height:42px;border-radius:14px;background:color-mix(in oklab, var(--accent) 10%, var(--surface));font-size:28px;overflow:hidden}
.badge-card__img{width:100%;height:100%;object-fit:contain;padding:4px}
/* === Gamification compact UI ========================================= */
.gam-progress{
position: relative;
background: var(--panel);
border: 1px solid var(--border);
border-radius: 10px;
height: 14px; /* чуть толще — теперь это «герой»-бар, а не вспомогательная полоска */
overflow: hidden;
}
.gam-progress__bar{
height: 100%;
width: 0%;
background: linear-gradient(135deg,#10b981,#06b6d4);
transition: width .35s ease;
}
/* Цифровой текст внутри прогресса: позиционируем абсолютно поверх,
чтобы цифры были читаемы на любом фоне (и поверх fill, и поверх track). */
.gam-progress__txt{
position:absolute; inset:0;
display:flex; align-items:center; justify-content:center;
font-size:11px; font-weight:600;
color: var(--text);
letter-spacing:.2px;
pointer-events:none;
text-shadow: 0 1px 0 color-mix(in oklab, var(--card) 75%, transparent);
}
/* «Герой»-блок очков: крупная цифра + цель + полоса в одном ряду */
.gam-hero{
display:flex; align-items:center; gap:18px;
padding:8px 0 2px;
}
.gam-hero__num{
font-size:42px;
line-height:1;
font-weight:800;
font-family:"Manrope", system-ui, -apple-system, Segoe UI, Roboto, Inter;
color: var(--text);
letter-spacing:-0.01em;
flex:0 0 auto;
min-width: 64px;
}
.gam-hero__meta{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:6px; }
.gam-hero__label{ line-height:1; }
.gam-hero__goal{ color: var(--text); font-size:13px; font-weight:600; }
.gam-hero__goal .gam-hero__remain{ color: var(--muted); font-weight:400; }
@media (max-width: 520px){
.gam-hero{ gap:14px; }
.gam-hero__num{ font-size:36px; min-width:56px; }
}
/* Бейджи: сетка плиток, не «row» — равная ширина и аккуратный empty-state */
.gam-badges{
display:grid; gap:10px;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
margin-top:8px;
}
.gam-badges__all{
text-decoration: underline dotted;
text-underline-offset: 3px;
}
.badge-card--empty{
background: color-mix(in oklab, var(--accent) 4%, var(--card));
border-style: dashed;
}
.heatmap{
display: grid;
grid-auto-flow: column;
grid-auto-columns: 14px;
gap: 6px;
align-items: center;
}
.heatmap__cell{
width: 14px;
height: 14px;
border-radius: 4px;
border: 1px solid var(--border);
background: var(--card);
}
.heatmap__cell.lvl-0{ background: var(--card); }
.heatmap__cell.lvl-1{
background: rgba(34, 197, 94, 0.18);
border-color: rgba(34, 197, 94, 0.22);
}
.heatmap__cell.lvl-2{
background: rgba(34, 197, 94, 0.34);
border-color: rgba(34, 197, 94, 0.38);
}
.heatmap__cell.lvl-3{
background: rgba(34, 197, 94, 0.56);
border-color: rgba(34, 197, 94, 0.60);
}
/* Сегодняшняя ячейка — обводка акцентом + лёгкая тень, чтобы «текущий день»
считывался с одного взгляда. */
.heatmap__cell--today{
outline: 2px solid var(--accent);
outline-offset: 1px;
box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 25%, transparent);
}
.tiny{ font-size: 11px; }
/* === Table helpers (recent workouts) =================================== */
.table{ width:100%; border-collapse:collapse; table-layout:fixed; }
.table th, .table td{ padding:8px 10px; border-bottom:1px solid var(--border); vertical-align:top; }
.td-date{ width:120px; white-space:nowrap; }
.td-status{ width:140px; }
.td-points{ width:90px; white-space:nowrap; text-align:left; }
.td-title{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width: 720px){
.table{ table-layout:auto; }
.td-title{ white-space:normal; word-break:break-word; }
.td-status, .td-points{ white-space:nowrap; }
}
@media (max-width: 720px){
.table{ table-layout:auto; border-collapse: separate; border-spacing: 0 0; }
.table thead{ display:none; }
.table tbody tr{
display:grid;
grid-template-columns: 1fr auto;
grid-template-areas:
"date status"
"title title"
"points points";
gap:6px 10px;
padding:10px 0;
border-bottom:1px solid var(--border);
}
.table td{ border:0; padding:0; }
.td-date { grid-area:date; font-size:14px; color:var(--muted); white-space:nowrap; }
.td-status { grid-area:status; justify-self:end; }
.td-title {
grid-area:title;
white-space:normal;
word-break:break-word;
overflow:hidden;
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
line-height:1.35;
}
.td-points { grid-area:points; font-weight:700; color:var(--muted); }
.table .badge{ padding:4px 8px; border-radius:999px; font-size:12px; }
}
/* Деструктивная кнопка (используется в confirm-модалках для удаления и т.п.). */
.btn.btn--danger{
background: linear-gradient(135deg, #ef4444, #dc2626);
color: #fff;
}
.btn.btn--danger:hover{ filter: brightness(1.06); }
.btn.btn--danger:focus-visible{
outline: 2px solid var(--danger);
outline-offset: 2px;
box-shadow: 0 0 0 4px color-mix(in oklab, var(--danger) 30%, transparent);
}
/* Подсветка инпута с ошибкой валидации (используется в модалках). */
.input-error{
border-color: var(--danger) !important;
box-shadow: 0 0 0 3px color-mix(in oklab, var(--danger) 25%, transparent) !important;
animation: shake .25s ease-in-out 1;
}
@keyframes shake{
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-3px); }
75% { transform: translateX(3px); }
}
/* DnD calendar feedback (PointerEvents, только мышь) */
.cal-cell.drag-over,
.cal-list__row.drag-over{
outline: 2px dashed var(--accent); outline-offset: -4px;
background: color-mix(in oklab, var(--accent) 12%, transparent);
}
.cal-cell.drag-over--blocked,
.cal-list__row.drag-over--blocked{
outline: 2px dashed var(--danger); outline-offset: -4px;
background: color-mix(in oklab, var(--danger) 10%, transparent);
cursor: not-allowed;
}
.chip.dragging{ opacity: .35; cursor: grabbing; pointer-events: none; }
/* На «живых» чипах ставим курсор «можно тащить» для мыши. Тач здесь
ничего не наследует (cursor у него не отображается).
-webkit-touch-callout: none + user-select: none — глушим встроенное
iOS Safari меню превью ссылки, иначе на long-press по чипу всплывает
и наш action-menu, и нативный «Открыть / Скопировать ссылку / Поделиться». */
.cal-events .chip:not(.is-locked){
cursor: grab;
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
}
/* Призрак чипа при drag — клон с position:fixed, едет за курсором. */
.drag-ghost{
display: block;
pointer-events: none;
box-shadow: 0 8px 24px rgba(0,0,0,.25);
transform-origin: center center;
will-change: transform;
transition: none;
}
/* Во время drag запрещаем выделение текста по всему документу. */
body.cal-dragging{ user-select: none; -webkit-user-select: none; cursor: grabbing; }
/* Заблокированные тренировки (завершённые / пропущенные / в прошлом). */
.chip.is-locked{ cursor: default; opacity: .85; }
.chip.is-locked:hover{ opacity: .95; }
/* Контейнер для абсолютно-позиционированной кнопки «+». Сохраняем без
relative-anchor для свайпа (свайп удалён — больше не нужен). */
.cal-events{ position: relative; }
/* ====================================================================== */
/* Mobile action-menu (long-press на чипе) */
/* ====================================================================== */
.chip-actions__list{
display: flex;
flex-direction: column;
gap: 6px;
margin-top: 4px;
}
.chip-actions__btn{
display: flex; align-items: center; gap: 12px;
width: 100%;
padding: 12px 14px;
background: var(--chip);
color: var(--text);
border: 1px solid var(--border);
border-radius: 12px;
font-size: 15px; font-weight: 600;
text-align: left;
cursor: pointer;
transition: background-color .12s, transform .08s;
}
.chip-actions__btn:hover{ background: color-mix(in oklab, var(--accent) 8%, var(--chip)); }
.chip-actions__btn:active{ transform: scale(0.98); }
.chip-actions__btn--danger{ color: var(--danger); }
.chip-actions__btn--danger:hover{
background: color-mix(in oklab, var(--danger) 10%, var(--chip));
border-color: color-mix(in oklab, var(--danger) 35%, var(--border));
}
.chip-actions__ico{
display: inline-flex; align-items: center; justify-content: center;
width: 24px; height: 24px;
font-size: 16px;
flex: 0 0 auto;
}
/* ====================================================================== */
/* Mobile move form (vie 2 в action-menu) */
/* ====================================================================== */
.chip-move__head{
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 4px;
}
/* Лёгкая иконочная back-кнопка — без рамки/фона, только chevron. */
.chip-move__back{
width: 32px; height: 32px;
padding: 0;
background: transparent;
border: 0;
color: var(--muted);
font-size: 22px; line-height: 1;
cursor: pointer;
border-radius: 8px;
display: inline-flex; align-items: center; justify-content: center;
flex: 0 0 auto;
transition: background-color .12s, color .12s, transform .08s;
}
.chip-move__back:hover{ color: var(--text); background: var(--chip); }
.chip-move__back:active{ transform: scale(0.94); }
.chip-move__back:focus-visible{ outline: 2px solid var(--ring); outline-offset: 2px; }
.chip-move__title{
margin: 0;
font-size: 18px; font-weight: 700;
letter-spacing: -.01em;
}
.chip-move__sub{ margin: 0 0 16px; line-height: 1.4; }
.chip-move__field{
display: block;
margin-bottom: 14px;
min-width: 0;
}
.chip-move__field-label{
display: block;
margin-bottom: 6px;
}
/* Ключевой фикс: date-input в модалке не должен выезжать за её границы И
значение должно быть визуально по центру (на iOS Safari нативный date
рендер прижимает текст вправо, оставляя «зарезервированное» место
слева под системную иконку, отчего форма теряет симметрию).
- width/max-width/min-width + box-sizing:border-box (от глобального *) —
поле не выезжает за границы модалки.
- -webkit-appearance/appearance:none — снимаем iOS-стиль и вместе с ним
зарезервированное левое поле под системную иконку.
- text-align:center — значение оказывается ровно в центре, симметрично
относительно вертикальной оси модалки. */
.chip-move__date{
display: block;
width: 100%;
max-width: 100%;
min-width: 0;
padding: 10px 12px;
-webkit-appearance: none;
appearance: none;
text-align: center;
font-variant-numeric: tabular-nums;
}
/* iOS Safari у рендерит pseudo-элемент
::-webkit-calendar-picker-indicator справа и резервирует под него
место даже при appearance:none. Это сдвигает видимое поле визуально
влево и ломает симметрию. Скрываем индикатор полностью — нативный
пикер всё равно открывается тапом по самому полю.
Заодно нормализуем pseudo-элементы редактируемой части (datetime-edit
и его поля) — чтобы они занимали всю ширину и не смещали значение. */
.chip-move__date::-webkit-calendar-picker-indicator{
display: none !important;
-webkit-appearance: none;
appearance: none;
width: 0; height: 0;
margin: 0; padding: 0;
}
.chip-move__date::-webkit-datetime-edit{
display: block;
width: 100%;
padding: 0;
text-align: center;
}
.chip-move__date::-webkit-datetime-edit-fields-wrapper{
width: 100%;
justify-content: center;
}
.chip-move__date::-webkit-date-and-time-value{
margin: 0;
text-align: center;
}
/* Дополнительная страховка: запрещаем браузеру самому выставлять inner
spinner (для chrome desktop, на всякий случай). */
.chip-move__date::-webkit-inner-spin-button,
.chip-move__date::-webkit-clear-button{
display: none;
}
.chip-move__pts{
margin: 0 0 16px;
line-height: 1.45;
}
.chip-move__actions{
display: flex;
justify-content: flex-end;
gap: 8px;
flex-wrap: wrap;
}
/* ====================================================================== */
/* Легенда цветов мышечных групп */
/* ====================================================================== */
.cal-legend{
display: flex; flex-wrap: wrap; gap: 8px 14px;
margin-top: 12px;
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: 10px;
background: color-mix(in oklab, var(--chip) 40%, transparent);
}
.cal-legend__item{
display: inline-flex; align-items: center; gap: 6px;
font-size: 12px; color: var(--muted);
white-space: nowrap;
}
.cal-legend__item .chip-dot{
margin-right: 0;
width: 10px; height: 10px;
}
/* --- Modal & info chip --- */
.icon-btn{ background:var(--chip); border:1px solid var(--border); border-radius:999px; padding:6px; line-height:0; cursor:pointer; }
.icon-btn .icon{ width:1.1em; height:1.1em; }
.icon-btn.info{ opacity:.85; }
.icon-btn.info:hover{ filter:brightness(1.05); }
.modal-backdrop{ position:fixed; inset:0; background:var(--overlay); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
opacity:0; transition:opacity .2s; pointer-events:none; z-index:3000; }
.modal-backdrop.show{ opacity:1; pointer-events:auto; }
.modal{ position:fixed; inset:0; display:grid; place-items:center; z-index:3001; opacity:0; transform:translateY(6px); transition:all .2s; pointer-events:none; }
.modal.show{ opacity:1; transform:none; pointer-events:auto; }
.modal-card{ background:var(--surface); border:1px solid var(--border); border-radius:16px; width:min(760px, 92vw);
max-height:85vh; overflow:auto; padding:16px 18px; box-shadow:0 20px 50px rgba(0,0,0,.35); }
.modal-close{ position:sticky; top:0; float:right; background:var(--chip); border:1px solid var(--border); color:var(--text);
border-radius:10px; padding:6px 10px; font-weight:800; cursor:pointer; }
.modal-content{ clear:both; }
.info-chip{ display:inline-flex; align-items:center; gap:6px; background:var(--chip);
border:1px solid var(--border); border-radius:999px; padding:6px 10px; cursor:pointer; }
.info-chip .icon{ width:1.05em; height:1.05em; }
.info-chip .lbl{ font-size:12px; opacity:.9; }
.info-chip:hover{ filter:brightness(1.06); }
@media(max-width:560px){ .info-chip .lbl{ display:none; } }
.modal-backdrop{ position:fixed; inset:0; background:var(--overlay);
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
opacity:0; transition:opacity .2s; pointer-events:none; z-index:3000; }
.modal-backdrop.show{ opacity:1; pointer-events:auto; }
.modal{ position:fixed; inset:0; display:grid; place-items:center; z-index:3001;
opacity:0; transform:translateY(6px); transition:all .2s; pointer-events:none; }
.modal.show{ opacity:1; transform:none; pointer-events:auto; }
.modal-card{ background:var(--surface); border:1px solid var(--border); border-radius:16px;
width:min(760px, 92vw); max-height:85vh; overflow:auto; box-shadow:0 20px 50px rgba(0,0,0,.35);
/* iOS Safari: глушим long-press → выделение текста / callout-меню в модалке.
Поля ввода и редактируемые элементы остаются интерактивными — для них
выделение нужно (см. правило ниже). */
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
}
.modal-card input,
.modal-card textarea,
.modal-card select,
.modal-card [contenteditable="true"]{
-webkit-user-select: auto;
user-select: auto;
}
.modal-bar{ position:sticky; top:0; padding: calc(6px + env(safe-area-inset-top)) 10px 6px 10px;
background:linear-gradient(to bottom, color-mix(in oklab, var(--surface) 100%, transparent) 70%, transparent);
z-index:1; display:flex; justify-content:flex-end; align-items:center; }
.modal-drag{ width:36px; height:4px; border-radius:999px; background:var(--border);
position:absolute; left:50%; transform:translateX(-50%); top: calc(6px + env(safe-area-inset-top)); opacity:.7; }
.modal-close{ background:var(--chip); border:1px solid var(--border); color:var(--text);
border-radius:10px; padding:8px; cursor:pointer; line-height:0; }
.modal-close .icon{ width:1.1em; height:1.1em; }
.modal-content{ padding: 0 18px 16px 18px; }
@media (max-width:520px){ .modal-content{ padding: 0 14px 14px 14px; } }
/* === FitXP theme override ============================================ */
:root{
--bg:#0E1113; --card:#14181B; --panel:#0E1113; --surface:#12171A; --chip:#1B2126;
--text:#E6E8EA; --muted:#94A3B8; --accent:#00E676;
--ok:#00C853; --warn:#f59e0b; --danger:#ef4444;
--border:#1f2930; --radius:16px; --ring:#00E676; --input-bg:#0E1113; --topbar:#12171A;
--overlay: rgba(0,0,0,.45);
}
.theme-light{
--bg:#F6F8F7; --card:#FFFFFF; --panel:#FFFFFF; --surface:#FFFFFF; --chip:#EEF2EF;
--text:#0E1113; --muted:#667684; --accent:#00C853;
--ok:#00A84C; --warn:#b45309; --danger:#b91c1c;
--border:#E6EBE8; --input-bg:#FFFFFF; --topbar:#FFFFFF;
--overlay: rgba(0,0,0,.25);
}
@media (prefers-color-scheme: light){
.theme-system{
--bg:#F6F8F7; --card:#FFFFFF; --panel:#FFFFFF; --surface:#FFFFFF; --chip:#EEF2EF;
--text:#0E1113; --muted:#667684; --accent:#00C853;
--ok:#00A84C; --warn:#b45309; --danger:#b91c1c;
--border:#E6EBE8; --input-bg:#FFFFFF; --topbar:#FFFFFF;
--overlay: rgba(0,0,0,.25);
}
}
/* --- Кнопки и прогресс для FitXP --- */
.btn{ background: linear-gradient(135deg,#00E676,#00C853); color:#fff; }
.gam-progress-fill{ background: linear-gradient(135deg,#00E676,#00C853); }
.gam-progress__bar{ background: linear-gradient(135deg,#00E676,#00C853); }
.badge.completed,
.chip.completed{
background: color-mix(in oklab, var(--accent) 15%, transparent);
color: var(--accent);
}
.gam-dot.on{
background: color-mix(in oklab, var(--accent) 85%, transparent);
opacity:1;
}
.cal-cell.drag-over{
outline: 2px dashed var(--accent);
background: color-mix(in oklab, var(--accent) 18%, transparent);
}
/* === Dashboard (sport-drive) ========================================== */
:root{
--dash-hero-bg: radial-gradient(1200px 520px at 0% -30%, color-mix(in oklab, var(--accent) 22%, transparent) 0%, transparent 60%),
radial-gradient(700px 380px at 95% -25%, color-mix(in oklab, var(--accent) 18%, transparent) 0%, transparent 55%);
--dash-hero-sheen: linear-gradient(120deg, color-mix(in oklab, var(--accent) 18%, transparent), transparent 45%);
--dash-card-border: color-mix(in oklab, var(--accent) 22%, var(--border));
--dash-streak-bg: color-mix(in oklab, var(--accent) 16%, var(--card));
--dash-streak-border: color-mix(in oklab, var(--accent) 32%, var(--border));
--dash-soft-bg: color-mix(in oklab, var(--accent) 6%, var(--card));
}
.theme-light{
--dash-hero-bg: radial-gradient(1200px 520px at 0% -30%, color-mix(in oklab, var(--accent) 20%, transparent) 0%, transparent 60%),
radial-gradient(700px 380px at 95% -25%, color-mix(in oklab, var(--accent) 16%, transparent) 0%, transparent 55%);
--dash-hero-sheen: linear-gradient(120deg, color-mix(in oklab, var(--accent) 14%, transparent), transparent 45%);
--dash-card-border: color-mix(in oklab, var(--accent) 18%, var(--border));
--dash-streak-bg: color-mix(in oklab, var(--accent) 10%, var(--card));
--dash-streak-border: color-mix(in oklab, var(--accent) 26%, var(--border));
--dash-soft-bg: color-mix(in oklab, var(--accent) 5%, var(--card));
}
.page-dashboard .dash-grid{ gap:18px; align-items:stretch; }
.page-dashboard .dash-grid .card{ animation: dashFade .45s ease both; }
.page-dashboard .dash-grid .card:nth-child(2){ animation-delay:.04s; }
.page-dashboard .dash-grid .card:nth-child(3){ animation-delay:.08s; }
.page-dashboard .dash-grid .card:nth-child(4){ animation-delay:.12s; }
.page-dashboard .hero-card{
position:relative;
overflow:hidden;
border:1px solid var(--dash-card-border);
background:
var(--dash-hero-bg),
var(--card);
}
.page-dashboard .hero-card::before{
content:"";
position:absolute; inset:0;
background: var(--dash-hero-sheen);
opacity:.6; pointer-events:none;
}
.page-dashboard .hero-card > *{ position:relative; z-index:1; }
.hero-head{ display:flex; gap:16px; justify-content:space-between; align-items:flex-start; }
.hero-copy{ max-width:640px; }
.hero-ident{ display:flex; gap:12px; align-items:center; }
.avatar{
width:48px; height:48px; border-radius:50%;
background: color-mix(in oklab, var(--accent) 12%, var(--chip));
border:1px solid color-mix(in oklab, var(--accent) 26%, var(--border));
display:inline-flex; align-items:center; justify-content:center;
flex: 0 0 auto;
overflow:hidden;
}
.avatar img{ width:100%; height:100%; max-width:100%; max-height:100%; object-fit:cover; display:block; }
.avatar-lg{ width:56px; height:56px; max-width:56px; max-height:56px; }
.avatar-fallback{ font-weight:800; font-size:14px; letter-spacing:.08em; color:var(--text); }
.eyebrow{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.hero-title{ margin:6px 0 6px; font-size:28px; font-weight:800; font-family:"Manrope", system-ui, -apple-system, Segoe UI, Roboto, Inter; }
.page-dashboard .title{ font-family:"Manrope", system-ui, -apple-system, Segoe UI, Roboto, Inter; letter-spacing:.2px; }
.hero-sub{ margin:0; color:var(--muted); }
.hero-streak{
min-width:170px;
text-align:center;
background: var(--dash-streak-bg);
border:1px solid var(--dash-streak-border);
border-radius:16px;
padding:12px 14px;
box-shadow:0 12px 30px rgba(0,0,0,.18);
}
.streak-num{ font-size:32px; font-weight:800; font-family:"Manrope", system-ui, -apple-system, Segoe UI, Roboto, Inter; }
.streak-label{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.streak-best{ margin-top:4px; font-size:12px; color:var(--muted); }
.stats-hero{ display:grid; gap:12px; grid-template-columns:repeat(3, minmax(0,1fr)); margin-top:14px; }
.stats-hero .stat{
background: color-mix(in oklab, var(--card) 70%, transparent);
border:1px solid var(--border);
border-radius:14px;
padding:12px;
text-align:left;
}
.stats-hero .stat .num{ font-size:24px; font-weight:800; font-family:"Manrope", system-ui, -apple-system, Segoe UI, Roboto, Inter; }
.hero-actions .btn{ min-width:180px; }
.accent-card{
border-color: color-mix(in oklab, var(--accent) 22%, var(--border));
box-shadow: 0 16px 40px rgba(0,0,0,.18);
}
.table-card .table th{ font-size:12px; text-transform:uppercase; letter-spacing:.04em; }
.soft-card{ background: var(--dash-soft-bg); border-color: var(--dash-card-border); }
.next-card{
border-color: color-mix(in oklab, var(--accent) 18%, var(--border));
background: color-mix(in oklab, var(--card) 92%, transparent);
}
.next-body{ display:flex; gap:16px; align-items:center; }
.next-date{
width:82px; height:82px; border-radius:16px;
background: color-mix(in oklab, var(--accent) 14%, var(--panel));
border:1px solid color-mix(in oklab, var(--accent) 28%, var(--border));
display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.next-day{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.next-num{ font-size:24px; font-weight:800; font-family:"Manrope", system-ui, -apple-system, Segoe UI, Roboto, Inter; }
.next-info{ flex:1; min-width:0; }
.next-title{ font-weight:800; margin-bottom:4px; }
@media (max-width:900px){
.hero-head{ flex-direction:column; }
.hero-streak{ align-self:flex-start; }
}
@media (max-width:720px){
.hero-title{ font-size:24px; }
.stats-hero{ grid-template-columns:repeat(2, minmax(0,1fr)); }
/* В Strava-hero держим кнопки в одной строке, чтобы карточка не вытягивалась
вертикально. Старое поведение «width:100%» оставляем только для legacy
hero-карточек (не .hero-card--strava). */
.hero-card:not(.hero-card--strava) .hero-actions .btn{ min-width:unset; width:100%; }
.hero-card--strava .hero-actions{ flex-wrap:wrap; }
.hero-card--strava .hero-actions .btn{ min-width:unset; flex: 1 1 140px; }
.next-body{ flex-direction:column; align-items:flex-start; }
.next-date{ width:100%; height:auto; padding:12px; flex-direction:row; gap:10px; justify-content:flex-start; }
.next-num{ font-size:20px; }
}
@media (max-width:520px){
.stats-hero{ grid-template-columns:1fr; }
}
@keyframes dashFade{
from{ opacity:0; transform: translateY(6px); }
to{ opacity:1; transform: none; }
}
/* --- Quick actions (dashboard) --- */
.quick-actions .qa-grid{
display:grid; gap: 12px; margin-top: 12px;
grid-template-columns: 1fr;
}
@media (min-width: 600px){ .quick-actions .qa-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px){ .quick-actions .qa-grid{ grid-template-columns: repeat(3, 1fr); } }
.quick-actions .qa-item{
display: grid;
grid-template-columns: 44px 1fr;
gap: 12px;
align-items: center;
padding: 12px 14px;
border-radius: 14px;
background: var(--card);
border: 1px solid var(--border);
color: var(--text);
text-decoration: none;
transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.quick-actions .qa-item:hover{
transform: translateY(-2px);
border-color: color-mix(in oklab, var(--accent) 38%, var(--border));
box-shadow: 0 12px 30px rgba(0,0,0,.16);
}
.quick-actions .qa-ico{
width: 44px; height: 44px; border-radius: 12px;
display: grid; place-items: center;
background: color-mix(in oklab, var(--accent) 14%, var(--chip));
color: var(--accent);
border: 1px solid color-mix(in oklab, var(--accent) 28%, var(--border));
}
.quick-actions .qa-ico .icon{ width: 22px; height: 22px; }
.quick-actions .qa-copy{ display:flex; flex-direction:column; gap: 2px; min-width: 0; }
.quick-actions .qa-copy strong{ font-size: 14px; line-height: 1.25; }
.quick-actions .qa-copy .small{ font-size: 12px; line-height: 1.35; }
/* --- Today card (dashboard «Сегодня») --- */
.today-card{ display:flex; flex-direction:column; gap:8px; }
.today-block{
display:flex; gap:12px; align-items:flex-start;
padding:12px 14px; border-radius:14px;
background: color-mix(in oklab, var(--accent) 8%, var(--card));
border:1px solid color-mix(in oklab, var(--accent) 22%, var(--border));
}
.today-block--empty{
background: var(--card);
border-color: var(--border);
}
.today-block__ico{
width:42px; height:42px; flex:0 0 42px;
border-radius:12px;
display:grid; place-items:center;
background: color-mix(in oklab, var(--accent) 18%, var(--chip));
color: var(--accent);
border:1px solid color-mix(in oklab, var(--accent) 28%, var(--border));
}
.today-block__ico .icon{ width:20px; height:20px; }
.today-block__ico[data-status="completed"]{
background: color-mix(in oklab, var(--success, #22c55e) 18%, var(--chip));
color: var(--success, #22c55e);
border-color: color-mix(in oklab, var(--success, #22c55e) 32%, var(--border));
}
.today-block__ico[data-status="skipped"]{
background: color-mix(in oklab, var(--danger, #ef4444) 16%, var(--chip));
color: var(--danger, #ef4444);
border-color: color-mix(in oklab, var(--danger, #ef4444) 30%, var(--border));
}
.today-block__body{ flex:1 1 auto; min-width:0; }
.today-block__title{
font-weight:700; font-size:15px;
display:flex; gap:8px; align-items:center; flex-wrap:wrap;
}
.today-next{
padding-top:10px;
border-top:1px dashed var(--border);
}
.today-next .next-title{ font-weight:600; }
/* --- Геймификация: пояснение «Что такое очки» --- */
.gam-help{ position:relative; }
.gam-help summary{
cursor:pointer; user-select:none;
list-style:none; padding:4px 0;
text-decoration:underline dotted;
text-underline-offset:3px;
}
.gam-help summary::-webkit-details-marker{ display:none; }
.gam-help[open] summary{ color: var(--text); }
.gam-help__body{
margin-top:6px; padding:10px 12px;
border:1px solid var(--border); border-radius:10px;
background: color-mix(in oklab, var(--card) 96%, transparent);
max-width: 360px;
color: var(--text);
}
.gam-help__list{
margin: 6px 0 6px;
padding-left: 18px;
display: flex; flex-direction: column; gap: 2px;
color: var(--text);
font-size: 12.5px;
}
/* --- Heatmap legend --- */
.heatmap-legend{
display:flex; align-items:center; gap:6px;
margin-top:8px; flex-wrap:wrap;
}
.hl-cell{
width:12px; height:12px; border-radius:3px; display:inline-block;
}
.hl-cell.lvl-0{ background: var(--card); border:1px solid var(--border); }
.hl-cell.lvl-1{ background: rgba(34, 197, 94, 0.18); border:1px solid rgba(34, 197, 94, 0.22); }
.hl-cell.lvl-2{ background: rgba(34, 197, 94, 0.34); border:1px solid rgba(34, 197, 94, 0.38); }
.hl-cell.lvl-3{ background: rgba(34, 197, 94, 0.56); border:1px solid rgba(34, 197, 94, 0.60); }
/* --- «Недавние тренировки» в свёрнутом details --- */
.recent-details{ padding-bottom:14px; }
.recent-details > summary{
cursor:pointer; user-select:none;
display:flex; align-items:center; justify-content:space-between; gap:12px;
padding:6px 2px; list-style:none;
}
.recent-details > summary::-webkit-details-marker{ display:none; }
.recent-details > summary::after{
content:""; width:10px; height:10px;
border-right:2px solid var(--muted); border-bottom:2px solid var(--muted);
transform: rotate(45deg); margin-left:auto;
transition: transform .2s ease;
display:inline-block;
}
.recent-details[open] > summary::after{ transform: rotate(-135deg); }
.recent-details > summary .title{ margin:0; }
.recent-details .table-wrap{ margin-top:10px; }
.recent-details .table tbody tr[data-workout-id]{
cursor:pointer; transition: background .15s ease;
}
.recent-details .table tbody tr[data-workout-id]:hover,
.recent-details .table tbody tr[data-workout-id]:focus{
background: color-mix(in oklab, var(--accent) 8%, transparent);
outline: none;
}
.recent-details .table tbody tr[data-workout-id]:focus-visible{
box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--accent) 60%, transparent);
}
/* --- Skeleton-плейсхолдеры (для виджета питания) --- */
.today-nut__skeleton{ display:flex; flex-direction:column; gap:10px; padding:6px 0; }
.sk{
background: linear-gradient(90deg,
color-mix(in oklab, var(--text) 6%, transparent) 0%,
color-mix(in oklab, var(--text) 14%, transparent) 50%,
color-mix(in oklab, var(--text) 6%, transparent) 100%);
background-size: 200% 100%;
border-radius:8px;
animation: skShimmer 1.4s ease-in-out infinite;
}
.sk-line{ height:12px; }
.sk-w60{ width:60%; }
.sk-w40{ width:40%; }
.sk-bar{ height:10px; width:100%; }
@keyframes skShimmer{
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* --- Reduced motion: убираем дашборд-анимации и шиммеры --- */
@media (prefers-reduced-motion: reduce){
.page-dashboard .dash-grid .card{ animation: none !important; }
.sk{ animation: none !important; background: color-mix(in oklab, var(--text) 8%, transparent); }
.recent-details > summary::after{ transition: none !important; }
.quick-actions .qa-item{ transition: none !important; }
.quick-actions .qa-item:hover{ transform: none !important; }
}
/* === Bottom navigation (mobile/PWA) =================================== */
body.has-bottom-nav main.container{
padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom) + 16px);
}
.bottom-nav{ display:none; }
@media (max-width: 768px){
.bottom-nav{
position: fixed;
left:0; right:0; bottom:0;
height: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom));
padding-bottom: env(safe-area-inset-bottom);
background: var(--panel);
border-top: 1px solid var(--border);
display: grid;
grid-auto-flow: column;
grid-auto-columns: 1fr;
align-items: stretch;
z-index: 4002;
box-shadow: 0 -8px 24px rgba(0,0,0,.18);
transform: translateZ(0);
will-change: transform;
}
.bottom-nav a.bn-item{
position: relative;
display:flex; flex-direction:column; align-items:center; justify-content:center;
gap:6px; text-decoration:none;
color: var(--muted);
font-size: 11px; line-height:1; padding: 8px 6px 10px;
-webkit-tap-highlight-color: transparent;
transition: color .15s ease;
}
.bottom-nav a.bn-item::before{
content:"";
position:absolute; top:0; left:50%;
width:0; height:2px;
background: var(--accent);
border-radius: 0 0 2px 2px;
transform: translateX(-50%);
transition: width .2s ease;
}
.bottom-nav a.bn-item[aria-current="page"]{
color: var(--accent);
font-weight: 600;
}
.bottom-nav a.bn-item[aria-current="page"]::before{
width: 28px;
}
.bottom-nav a.bn-item:active{ opacity:.7; }
.bottom-nav a.bn-item .icon{ width:24px; height:24px; }
.bottom-nav a.bn-item .bn-label{ font-size:11px; letter-spacing:.2px; }
}
@media (max-width:380px){
.bottom-nav a.bn-item{ padding: 8px 4px 10px; }
.bottom-nav a.bn-item .bn-label{ white-space:nowrap; }
}
@media (max-width:360px){
.bottom-nav a.bn-item{ gap:0; padding: 10px 2px; }
.bottom-nav a.bn-item .bn-label{ display:none; }
.bottom-nav a.bn-item .icon{ width:26px; height:26px; }
}
/* План-варнинги и нолики */
.plan-warn{ margin: 10px 0 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: color-mix(in oklab, var(--warn) 10%, transparent); }
.delta-zero{ color: var(--muted); }
/* Segmented (days 3/5/7) */
.seg{ display:inline-grid; grid-auto-flow:column; gap:6px; background:var(--panel); border:1px solid var(--border);
padding:6px; border-radius:12px; }
.seg input{ display:none; }
.seg label{ padding:6px 10px; border-radius:8px; cursor:pointer; font-weight:700; color:var(--muted); min-height:38px; display:inline-flex; align-items:center; }
.seg input:checked + label{ background: color-mix(in oklab, var(--accent) 16%, transparent); color: var(--accent); }
/* === Unified Switch (toggle) ========================================== */
/* Разметка: */
.switch{ display:inline-grid; grid-auto-flow:column; align-items:center; gap:10px; cursor:pointer; user-select:none; }
.switch input{ position:absolute; opacity:0; pointer-events:none; }
.switch .track{
width:48px; height:28px; border-radius:999px; background:var(--chip); border:1px solid var(--border);
position:relative; transition:.2s;
}
.switch .thumb{
position:absolute; top:50%; left:4px; transform:translateY(-50%);
width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.25); transition:.2s;
}
.switch input:checked + .track{
background: linear-gradient(135deg, var(--accent), color-mix(in oklab, var(--accent) 70%, #000 0%));
border-color: transparent;
}
.switch input:checked + .track .thumb{ left:24px; }
.switch .label, .switch .switch-label{ font-size:12px; color:var(--muted); }
.switch .slider{ display:none !important; } /* для старых вёрсток */
/* Pattern builder */
.pattern-wrap{ display:grid; gap:8px; min-width:min(100%, 760px); max-width:100%; }
.chips-line{ display:flex; gap:8px; flex-wrap:wrap; padding:6px; border:1px dashed var(--border); border-radius:12px; background:var(--panel); min-height:42px; }
.chip--pattern{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; background:var(--chip); border:1px solid var(--border); cursor:grab; }
.chip--pattern[data-kind="auto"]{ border-style:dotted; }
.chip--pattern[data-kind="rest"]{ opacity:.7; background:transparent; border-style:dashed; }
.chip--pattern .x{ line-height:0; opacity:.7; cursor:pointer; }
.chip--pattern.dragging{ opacity:.6; cursor:grabbing; }
.chips-line.drag-over{ outline:2px dashed var(--accent); outline-offset:-6px; }
/* Dropdown (Add focus) */
.dropdown{ position:relative; }
.dropdown .menu{
position:absolute; inset:auto auto 0 0; transform: translateY(110%); display:none; min-width:220px;
background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:6px; box-shadow:0 12px 36px rgba(0,0,0,.24); z-index:10;
}
.dropdown.open .menu{ display:block; }
.dropdown .menu button{
display:block; width:100%; text-align:left; background:transparent; border:none; color:var(--text); padding:8px 10px; border-radius:8px; cursor:pointer;
}
.dropdown .menu button:hover{ background: color-mix(in oklab, var(--accent) 12%, transparent); }
.dropdown .menu hr{ border:0; border-top:1px solid var(--border); margin:6px 0; }
.preset{ background:var(--input-bg); border:1px solid var(--border); border-radius:10px; padding:8px 10px; color:var(--text); min-height:38px; }
/* === Unified controls & sections (recommendations UI) ================== */
:root{ --ctl-h: 44px; --ctl-h-sm: 38px; }
input[type="text"],input[type="email"],input[type="password"],input[type="number"],input[type="date"],input[type="time"],select, textarea{
min-height: var(--ctl-h); line-height: 1.2; padding: 10px 12px;
}
.btn{ min-height: var(--ctl-h); padding: 0 14px; display: inline-flex; align-items:center; justify-content:center; gap: 8px; border-radius: 12px; }
.btn.small{ min-height: var(--ctl-h-sm); padding: 0 12px; border-radius: 10px; }
.btn.subtle{ border:1px solid var(--border); }
.actions-row{ display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; }
@media (max-width:720px){ .actions-row{ grid-auto-flow: row; grid-auto-columns: unset; } }
.form-sections{ display: grid; gap: 14px; margin-top:6px; }
.form-section{
background: var(--panel);
border: 1px solid var(--border);
border-radius: 14px;
padding: 14px;
}
.form-section .section-head{
display:flex; align-items:center; justify-content:space-between; gap:10px;
margin-bottom: 12px;
}
.form-section .section-title{
font-weight: 700; font-size: 16px; line-height: 1.3;
color: var(--text);
/* Чистый заголовок, без чип-стиля: часть нормальной иерархии (h3-уровень). */
padding: 0; background: transparent; border: 0;
}
.section-grid{ display:grid; gap:12px; grid-template-columns: 1fr auto; align-items:center; }
@media (max-width:860px){ .section-grid{ grid-template-columns: 1fr; } }
.hint{ font-size:12px; color:var(--muted); }
.inline-controls{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
/* Дата: мобильный полиш */
.date-field{ position: relative; }
.date-field input[type="date"]{ -webkit-appearance: none; appearance: none; background: var(--input-bg); padding-right: 36px; }
.date-field .date-ico{ position:absolute; right:10px; top:50%; transform:translateY(-50%); width: 18px; height:18px; opacity:.7; pointer-events:none; }
input[type="date"]::-webkit-calendar-picker-indicator{ cursor:pointer; width: 18px; height:18px; opacity:.6; }
/* Plan mode switch (day/week) */
#quickAdd[data-mode="day"] .section-week{ display:none; }
#quickAdd[data-mode="week"] .section-day { display:none; }
/* Описание секции — обычный текст, не «карточка в карточке». */
.plan-intro{
margin: 4px 0 10px;
color: var(--text);
}
.plan-intro p{ margin:0; font-size:14px; line-height:1.45; }
.plan-intro p + p{ margin-top: 6px; }
.plan-intro .muted{ color: var(--muted); }
/* Переключатель типа плана */
.plan-mode{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:10px; }
/* Divider */
.divider{ height:1px; background: var(--border); margin: 12px 0; opacity:.6; border-radius:1px; }
/* Списки в модалках */
.modal-content ol{ padding-left: 18px; margin: 8px 0 0; }
.modal-content li{ margin: 4px 0; }
/* Чипы в паттерне: фикс метрик и клика */
.chip--pattern{
display:inline-flex;
align-items:center;
gap:6px;
padding:6px 10px;
line-height:1; /* важно для Chrome */
min-height:32px; /* стабильная высота */
-webkit-font-smoothing:antialiased;
white-space:nowrap;
}
.chip--pattern > span{ line-height:1; }
.chip--pattern .x{
appearance:none;
border:0;
background:transparent;
display:inline-flex;
align-items:center;
justify-content:center;
width:20px; height:20px;
border-radius:6px;
line-height:1;
padding:0;
opacity:.7;
}
.chip--pattern .x:hover{ background: color-mix(in oklab, var(--accent) 10%, transparent); opacity:1; }
/* Контейнер с чипами — устраняем «ломку» по строкам в некоторых zoom */
.chips-line{
align-items:flex-start; /* не baseline */
}
/* Модалка поверх всего, включая bottom-nav */
.modal-backdrop{ z-index: 4001; }
.modal{ z-index: 5001; }
/* Безопасный отступ снизу, чтобы кнопки не упирались в вырез/панель */
.modal-card{
margin:12px;
padding-bottom: calc(16px + env(safe-area-inset-bottom));
}
/* Если включена фиксированная нижняя навигация — добавляем ещё «подушку» */
body.has-bottom-nav .modal-card{
margin-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom) + 12px);
}
/* Опционально: закрепить панель действий внизу модального контента */
.modal-actions{
position: sticky;
bottom: 0;
background: linear-gradient(to top, color-mix(in oklab, var(--surface) 100%, transparent) 60%, transparent);
padding-top: 10px;
}
/* оставляем клики только на карточке:
— клики по зоне вокруг карточки ловит .modal (чтобы закрывать)
— сама карточка интерактивна */
.modal{ pointer-events:auto; }
.modal-card{ pointer-events:auto; }
/* Fail-safe: если модалка без .show — полностью выключаем из потока и хитов */
.modal:not(.show),
.modal-backdrop:not(.show){
display: none !important;
}
/* ====================================================================== */
/* ============== LANDING PAGE (body.page-landing) ====================== */
/* ====================================================================== */
.page-landing{
/* Декоративный фон */
background:
radial-gradient(1200px 620px at 85% -10%, color-mix(in oklab, var(--accent) 18%, transparent) 0%, transparent 55%),
radial-gradient(900px 520px at -10% 10%, color-mix(in oklab, var(--accent) 14%, transparent) 0%, transparent 55%),
var(--bg);
}
.page-landing main.container{ max-width:1160px; }
.page-landing .section{ padding: clamp(36px, 6vw, 72px) 0; }
.page-landing .section + .section{ border-top: 1px dashed color-mix(in oklab, var(--border) 80%, transparent); }
.page-landing .eyebrow{
display:inline-flex; align-items:center; gap:8px;
font-size:12px; letter-spacing:.12em; text-transform:uppercase;
color: var(--accent);
background: color-mix(in oklab, var(--accent) 12%, transparent);
border: 1px solid color-mix(in oklab, var(--accent) 28%, var(--border));
padding: 6px 10px; border-radius: 999px;
}
.page-landing .h-title{
font-family:"Manrope", system-ui, -apple-system, Segoe UI, Roboto, Inter;
font-weight: 800;
line-height: 1.08;
letter-spacing:-.01em;
margin: 14px 0 12px;
font-size: clamp(30px, 4.8vw, 56px);
}
.page-landing .h-title .accent{ color: var(--accent); }
.page-landing .h-sub{
color: var(--muted);
font-size: clamp(15px, 1.4vw, 18px);
line-height: 1.55;
margin: 0 0 18px;
max-width: 56ch;
}
.page-landing .s-title{
font-family:"Manrope", system-ui, -apple-system, Segoe UI, Roboto, Inter;
font-weight: 800;
font-size: clamp(22px, 2.4vw, 30px);
margin: 0 0 6px;
letter-spacing:-.005em;
}
.page-landing .s-sub{ color: var(--muted); margin: 0 0 22px; max-width: 60ch; }
/* --- Hero --- */
.page-landing .hero{
display: grid;
gap: clamp(24px, 3vw, 40px);
grid-template-columns: 1fr;
padding-top: clamp(28px, 4vw, 56px);
padding-bottom: clamp(24px, 4vw, 56px);
}
@media (min-width: 960px){
.page-landing .hero{ grid-template-columns: 1.08fr .92fr; align-items: center; }
}
.page-landing .hero-cta{ display:flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.page-landing .hero-cta .btn{ min-width: 180px; }
.page-landing .hero-chips{
display:flex; flex-wrap:wrap; gap:8px; margin-top: 18px;
}
.page-landing .hero-chip{
display:inline-flex; align-items:center; gap:6px;
padding: 6px 10px; border-radius: 999px;
background: var(--chip); color: var(--text);
border: 1px solid var(--border);
font-size: 12px;
}
.page-landing .hero-chip .icon{ width: 14px; height: 14px; color: var(--accent); }
/* Mobile CTA: кнопки во всю ширину */
@media (max-width: 560px){
.page-landing .hero-cta{ flex-direction: column; align-items: stretch; }
.page-landing .hero-cta .btn{ width: 100%; min-width: 0; }
}
/* --- Mockup (CSS-иллюстрация дашборда) --- */
.mockup{
position: relative;
border-radius: 20px;
background: color-mix(in oklab, var(--card) 92%, transparent);
border: 1px solid color-mix(in oklab, var(--accent) 22%, var(--border));
padding: 18px;
box-shadow:
0 30px 60px rgba(0,0,0,.28),
0 2px 0 color-mix(in oklab, var(--accent) 12%, transparent) inset;
overflow: hidden;
}
.mockup::before{
content:"";
position:absolute; inset:-1px;
background: linear-gradient(135deg, color-mix(in oklab, var(--accent) 22%, transparent), transparent 60%);
pointer-events:none; border-radius: 20px;
}
.mockup > *{ position: relative; z-index: 1; }
.mockup-head{ display:flex; align-items:center; gap:8px; margin-bottom: 14px; }
.mockup-dot{ width:10px; height:10px; border-radius:50%; background: var(--chip); border:1px solid var(--border); }
.mockup-dot.g{ background: color-mix(in oklab, var(--accent) 50%, var(--chip)); }
.mockup-dot.y{ background: color-mix(in oklab, var(--warn) 50%, var(--chip)); }
.mockup-dot.r{ background: color-mix(in oklab, var(--danger) 50%, var(--chip)); }
.mockup-title{ margin-left:8px; font-size:12px; color: var(--muted); letter-spacing:.05em; }
.mockup-hero{
display:flex; align-items:center; gap:14px;
padding:14px; border-radius:14px;
background: color-mix(in oklab, var(--accent) 10%, var(--panel));
border: 1px solid color-mix(in oklab, var(--accent) 26%, var(--border));
margin-bottom: 12px;
}
.mockup-streak{
width: 72px; height: 72px; border-radius: 50%;
background: conic-gradient(var(--accent) 0 72%, color-mix(in oklab, var(--accent) 18%, var(--panel)) 0);
display:grid; place-items:center;
position:relative; flex: 0 0 auto;
}
.mockup-streak::after{
content:""; position:absolute; inset:6px; border-radius:50%; background: var(--card);
}
.mockup-streak span{ position:relative; z-index:1; font-weight:800; font-family:"Manrope", system-ui; font-size: 22px; }
.mockup-hero-copy strong{ display:block; font-size:15px; }
.mockup-hero-copy span{ color: var(--muted); font-size:12px; }
.mockup-stats{ display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; margin-bottom: 14px; }
.mockup-stat{
background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding:10px;
}
.mockup-stat b{ font-family:"Manrope", system-ui; font-size: 20px; display:block; }
.mockup-stat em{ font-style:normal; font-size: 11px; color: var(--muted); letter-spacing:.06em; text-transform: uppercase; }
.mockup-heat{
display:grid; grid-auto-flow: column; grid-auto-columns: 14px; gap: 5px; padding: 12px;
background: var(--panel); border:1px solid var(--border); border-radius: 12px;
}
.mockup-heat i{ display:block; width:14px; height:14px; border-radius:3px; background: color-mix(in oklab, var(--accent) 8%, var(--chip)); }
.mockup-heat i.l1{ background: color-mix(in oklab, var(--accent) 30%, transparent); }
.mockup-heat i.l2{ background: color-mix(in oklab, var(--accent) 55%, transparent); }
.mockup-heat i.l3{ background: color-mix(in oklab, var(--accent) 80%, transparent); }
/* --- Features grid --- */
.page-landing .features-grid{
display:grid; gap:14px;
grid-template-columns: 1fr;
}
@media (min-width: 600px){ .page-landing .features-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px){ .page-landing .features-grid{ grid-template-columns: repeat(3, 1fr); } }
.page-landing .feature{
display:flex; flex-direction:column; gap:10px;
padding: 18px; border-radius: 16px;
background: var(--card); border: 1px solid var(--border);
transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.page-landing .feature:hover{
transform: translateY(-2px);
border-color: color-mix(in oklab, var(--accent) 40%, var(--border));
box-shadow: 0 18px 40px rgba(0,0,0,.18);
}
.page-landing .feature-ico{
width: 40px; height: 40px; border-radius: 12px;
display:grid; place-items:center;
background: color-mix(in oklab, var(--accent) 14%, var(--chip));
color: var(--accent);
border: 1px solid color-mix(in oklab, var(--accent) 28%, var(--border));
}
.page-landing .feature-ico .icon{ width: 22px; height: 22px; }
.page-landing .feature h3{ margin: 0; font-size: 16px; }
.page-landing .feature p{ margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
/* --- Steps --- */
.page-landing .steps{
display:grid; gap:14px; grid-template-columns: 1fr;
counter-reset: step;
}
@media (min-width: 820px){ .page-landing .steps{ grid-template-columns: repeat(3, 1fr); } }
.page-landing .step{
position: relative;
padding: 22px 18px 18px;
background: var(--card); border:1px solid var(--border); border-radius: 16px;
}
.page-landing .step::before{
counter-increment: step;
content: counter(step);
position: absolute; top: -18px; left: 18px;
width: 36px; height: 36px; border-radius: 12px;
display:grid; place-items:center;
background: linear-gradient(135deg, var(--accent), color-mix(in oklab, var(--accent) 65%, #000));
color: #fff; font-weight: 800; font-family:"Manrope", system-ui;
box-shadow: 0 8px 20px color-mix(in oklab, var(--accent) 35%, transparent);
}
.page-landing .step h3{ margin: 6px 0 6px; font-size: 16px; }
.page-landing .step p{ margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
/* --- Personas --- */
.page-landing .personas{
display:grid; gap:14px; grid-template-columns: 1fr;
}
@media (min-width: 820px){ .page-landing .personas{ grid-template-columns: 1fr 1fr; } }
.page-landing .persona{
padding: 20px;
border-radius: 18px;
background: var(--card); border:1px solid var(--border);
display:flex; flex-direction:column; gap: 10px;
}
.page-landing .persona.accent{
background: color-mix(in oklab, var(--accent) 8%, var(--card));
border-color: color-mix(in oklab, var(--accent) 28%, var(--border));
}
.page-landing .persona h3{ margin: 0; font-size: 18px; }
.page-landing .persona ul{ margin: 6px 0 0; padding-left: 18px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.page-landing .persona ul li::marker{ color: var(--accent); }
/* --- Gamification strip --- */
.page-landing .gami-card{
display:grid; gap: 18px; grid-template-columns: 1fr;
padding: 22px;
border-radius: 18px;
background:
radial-gradient(600px 260px at 100% 0%, color-mix(in oklab, var(--accent) 18%, transparent), transparent 55%),
var(--card);
border: 1px solid color-mix(in oklab, var(--accent) 22%, var(--border));
}
@media (min-width: 900px){ .page-landing .gami-card{ grid-template-columns: 1fr 1fr; align-items:center; } }
.page-landing .gami-badges{ display:flex; gap:10px; flex-wrap:wrap; }
.page-landing .gami-badge{
display:inline-flex; align-items:center; gap:8px;
padding: 8px 12px; border-radius: 999px;
background: color-mix(in oklab, var(--accent) 14%, var(--chip));
border: 1px solid color-mix(in oklab, var(--accent) 26%, var(--border));
color: var(--text); font-size: 13px; font-weight: 600;
}
.page-landing .gami-badge .icon{ width: 14px; height: 14px; color: var(--accent); }
/* --- FAQ --- */
.page-landing .faq{ display:grid; gap:10px; }
.page-landing details.faq-item{
background: var(--card); border: 1px solid var(--border); border-radius: 14px;
padding: 14px 16px;
transition: border-color .18s ease;
}
.page-landing details.faq-item[open]{
border-color: color-mix(in oklab, var(--accent) 35%, var(--border));
}
.page-landing details.faq-item summary{
list-style: none; cursor: pointer;
display:flex; align-items:center; justify-content:space-between; gap: 12px;
font-weight: 700;
}
.page-landing details.faq-item summary::-webkit-details-marker{ display:none; }
.page-landing details.faq-item summary::after{
content: "+"; font-family:"Manrope", system-ui; font-weight: 800; color: var(--accent);
width: 22px; height: 22px; display:grid; place-items:center; border-radius: 8px;
background: color-mix(in oklab, var(--accent) 14%, transparent);
transition: transform .2s;
}
.page-landing details.faq-item[open] summary::after{ content: "–"; transform: rotate(0deg); }
.page-landing details.faq-item .faq-body{
margin-top: 10px; color: var(--muted); font-size: 14px; line-height: 1.6;
}
/* --- Final CTA --- */
.page-landing .cta-card{
position: relative; overflow: hidden;
padding: clamp(22px, 3vw, 36px);
border-radius: 22px;
background:
radial-gradient(800px 320px at 100% 0%, color-mix(in oklab, var(--accent) 26%, transparent), transparent 55%),
linear-gradient(135deg, color-mix(in oklab, var(--accent) 10%, var(--card)), var(--card));
border: 1px solid color-mix(in oklab, var(--accent) 30%, var(--border));
text-align: center;
}
.page-landing .cta-card h2{
font-family:"Manrope", system-ui;
font-size: clamp(24px, 3vw, 34px);
margin: 0 0 8px;
}
.page-landing .cta-card p{ margin: 0 auto 18px; color: var(--muted); max-width: 56ch; }
.page-landing .cta-card .hero-cta{ justify-content: center; }
/* --- Footer --- */
.page-landing .l-footer{
display:flex; justify-content:space-between; align-items:center; gap: 12px; flex-wrap: wrap;
padding: 20px 0 24px;
color: var(--muted); font-size: 13px;
}
.page-landing .l-footer nav{ display:flex; gap: 14px; flex-wrap: wrap; }
.page-landing .l-footer nav a{ color: var(--muted); }
.page-landing .l-footer nav a:hover{ color: var(--text); }
/* --- Landing topbar flourish (только для гостей) --- */
.page-landing .topbar .brand:not(:has(.brand-logo)){
background: linear-gradient(135deg, var(--text), var(--accent));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* ============================================================================
* Журнал питания (/nutrition) — блочные стили страницы v2
* Все селекторы не конфликтуют с другими страницами: .page-nutrition .nut-*
* ========================================================================== */
.page-nutrition .nut-container{ display:flex; flex-direction:column; gap:14px; }
/* --- Вспомогательные утилиты, используемые формами модалок --- */
.is-hidden{ display:none !important; }
/* ==========================================================================
* NUTRITION TABS
* Четыре вкладки на странице /nutrition: Сегодня | Журнал | База | Планы.
* Sticky к верху области контента, на мобилке — прокрутка по горизонтали.
* Активная панель показана, остальные скрыты через [hidden] — это даёт
* корректный семантический ARIA и не ломает state внутри них.
* ========================================================================== */
.page-nutrition .nut-tabs{
position: sticky; top: 0; z-index: 25;
display: flex; gap: 6px;
margin: -4px -4px 4px;
padding: 8px 4px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
background: color-mix(in oklab, var(--bg) 88%, transparent);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--border);
}
.page-nutrition .nut-tabs::-webkit-scrollbar{ display: none; }
.page-nutrition .nut-tabs__item{
flex: 0 0 auto;
padding: 8px 14px;
border-radius: 999px;
border: 1px solid transparent;
background: transparent;
color: var(--muted);
font: inherit; font-weight: 600; font-size: 14px;
white-space: nowrap;
cursor: pointer;
transition: background .15s ease, color .15s ease, border-color .15s ease;
-webkit-tap-highlight-color: transparent;
}
.page-nutrition .nut-tabs__item:hover{ color: var(--text); }
.page-nutrition .nut-tabs__item.is-on{
background: color-mix(in oklab, var(--accent) 16%, transparent);
border-color: color-mix(in oklab, var(--accent) 38%, transparent);
color: var(--text);
}
.page-nutrition .nut-tabs__item:focus-visible{
outline: 2px solid var(--accent);
outline-offset: 2px;
}
/* Панели: простые контейнеры. Скрытие — через HTML-атрибут [hidden],
которым управляет JS (он же синхронит aria-selected у кнопок). */
.page-nutrition .nut-panel{
display: flex; flex-direction: column; gap: 14px;
}
.page-nutrition .nut-panel[hidden]{ display: none; }
@media (max-width: 640px){
.page-nutrition .nut-tabs{ gap: 4px; padding: 7px 2px; margin: -2px -2px 2px; }
.page-nutrition .nut-tabs__item{ padding: 7px 11px; font-size: 13px; }
}
/* --- Чипы: мягкий вариант и success --- */
.chip.chip--soft{
background: color-mix(in oklab, var(--chip) 70%, transparent);
border:1px solid var(--border);
color: var(--text);
}
.chip.chip--success{
background: color-mix(in oklab, var(--ok, #34D399) 22%, transparent);
color: var(--ok, #34D399);
}
/* --- HERO --- */
.nut-hero{ display:flex; flex-direction:column; gap:14px; }
.nut-hero__head{
display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.nut-hero__title{
margin: 4px 0 2px; font-size: clamp(20px, 2.6vw, 26px); line-height: 1.15;
}
.nut-hero__actions{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.nut-hero__body{
display:grid; grid-template-columns: minmax(160px, 220px) 1fr; gap:18px; align-items:center;
}
@media (max-width: 680px){
.nut-hero__body{ grid-template-columns: 1fr; justify-items:center; }
}
/* --- Советы FitXP --- */
.nut-insights-card{
display:flex;
flex-direction:column;
gap:12px;
background:
radial-gradient(circle at top left, color-mix(in oklab, var(--accent) 14%, transparent), transparent 34%),
var(--card);
}
.nut-insights-card[hidden]{ display:none; }
.nut-insights-card__head{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:12px;
}
.nut-insights{
list-style:none;
margin:0;
padding:0;
display:grid;
gap:9px;
}
.nut-balance{
--nut-balance-pct:0%;
display:grid;
grid-template-columns:86px 1fr;
gap:14px;
align-items:center;
padding:14px;
border-radius:18px;
border:1px solid color-mix(in oklab, var(--accent) 34%, var(--border));
background:linear-gradient(135deg,
color-mix(in oklab, var(--accent) 12%, var(--card)),
color-mix(in oklab, var(--card) 92%, transparent)
);
}
.nut-balance[hidden]{ display:none; }
.nut-balance__meter{
width:82px;
height:82px;
border-radius:50%;
display:grid;
place-items:center;
align-content:center;
background:
radial-gradient(circle at center, var(--card) 56%, transparent 57%),
conic-gradient(var(--accent) var(--nut-balance-pct), color-mix(in oklab, var(--chip) 72%, transparent) 0);
color:var(--text);
font-variant-numeric:tabular-nums;
}
.nut-balance__meter strong{ font-size:25px; line-height:1; }
.nut-balance__meter span{ color:var(--muted); font-size:12px; font-weight:700; }
.nut-balance__body{ min-width:0; display:flex; flex-direction:column; gap:3px; }
.nut-balance__label{
color:var(--muted);
font-size:11px;
font-weight:800;
letter-spacing:.08em;
text-transform:uppercase;
}
.nut-balance__status{ font-size:18px; font-weight:800; line-height:1.2; }
.nut-balance__summary,
.nut-balance__factors{ color:var(--muted); font-size:13px; line-height:1.4; }
.nut-balance.is-warn{
border-color:color-mix(in oklab, var(--warn, #F59E0B) 38%, var(--border));
background:linear-gradient(135deg,
color-mix(in oklab, var(--warn, #F59E0B) 10%, var(--card)),
color-mix(in oklab, var(--card) 92%, transparent)
);
}
.nut-balance.is-warn .nut-balance__meter{
background:
radial-gradient(circle at center, var(--card) 56%, transparent 57%),
conic-gradient(var(--warn, #F59E0B) var(--nut-balance-pct), color-mix(in oklab, var(--chip) 72%, transparent) 0);
}
.nut-balance.is-pos .nut-balance__meter{
background:
radial-gradient(circle at center, var(--card) 56%, transparent 57%),
conic-gradient(var(--ok, #34D399) var(--nut-balance-pct), color-mix(in oklab, var(--chip) 72%, transparent) 0);
}
.nut-insight{
display:grid;
grid-template-columns:34px 1fr;
align-items:flex-start;
gap:10px;
padding:11px 12px;
border:1px solid var(--border);
border-radius:14px;
background: color-mix(in oklab, var(--card) 82%, transparent);
}
.nut-insight__icon{
width:34px;
height:34px;
border-radius:12px;
display:grid;
place-items:center;
background: color-mix(in oklab, var(--accent) 14%, var(--chip));
color: var(--accent);
}
.nut-insight__icon .icon{ width:18px; height:18px; }
.nut-insight__text{
font-size:14px;
line-height:1.45;
}
.nut-insight.is-pos{
border-color: color-mix(in oklab, var(--ok, #34D399) 34%, var(--border));
background: color-mix(in oklab, var(--ok, #34D399) 8%, var(--card));
}
.nut-insight.is-pos .nut-insight__icon{
background: color-mix(in oklab, var(--ok, #34D399) 16%, var(--chip));
color: var(--ok, #34D399);
}
.nut-insight.is-warn,
.nut-insight.is-neg{
border-color: color-mix(in oklab, var(--warn, #F59E0B) 36%, var(--border));
background: color-mix(in oklab, var(--warn, #F59E0B) 8%, var(--card));
}
.nut-insight.is-warn .nut-insight__icon,
.nut-insight.is-neg .nut-insight__icon{
background: color-mix(in oklab, var(--warn, #F59E0B) 17%, var(--chip));
color: var(--warn, #F59E0B);
}
.nut-premium-gate{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
padding:14px;
border-radius:14px;
border:1px solid color-mix(in oklab, var(--accent) 38%, var(--border));
background:linear-gradient(135deg,
color-mix(in oklab, var(--accent) 15%, var(--card)),
color-mix(in oklab, var(--card) 90%, transparent)
);
}
.nut-premium-gate div{
display:flex;
flex-direction:column;
gap:3px;
}
.nut-premium-gate strong{ font-size:14px; }
.nut-premium-gate span{
color:var(--muted);
font-size:13px;
line-height:1.4;
}
.nut-suggest{
display:flex;
flex-direction:column;
gap:10px;
padding-top:2px;
}
.nut-suggest[hidden]{ display:none; }
.nut-suggest__head{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:12px;
}
.nut-suggest__kicker{
color:var(--accent);
font-size:11px;
font-weight:800;
letter-spacing:.08em;
text-transform:uppercase;
}
.nut-suggest__head h3{
margin:2px 0 0;
font-size:18px;
line-height:1.2;
}
.nut-suggest__grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:9px;
}
.nut-suggest-card{
min-width:0;
display:flex;
flex-direction:column;
justify-content:space-between;
gap:10px;
padding:12px;
border-radius:16px;
border:1px solid color-mix(in oklab, var(--accent) 24%, var(--border));
background:color-mix(in oklab, var(--card) 84%, transparent);
}
.nut-suggest-card__body{ min-width:0; display:flex; flex-direction:column; gap:4px; }
.nut-suggest-card__topline{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:6px;
}
.nut-meal-hint{
display:inline-flex;
align-items:center;
min-height:20px;
padding:2px 8px;
border-radius:999px;
background:color-mix(in oklab, var(--accent) 12%, transparent);
color:var(--accent);
font-size:11px;
font-weight:800;
line-height:1;
}
.nut-suggest-card__reason{
color:var(--accent);
font-size:12px;
font-weight:800;
}
.nut-suggest-card__name{
font-weight:800;
line-height:1.25;
}
.nut-suggest-card__meta{
color:var(--muted);
font-size:12px;
line-height:1.35;
}
.nut-recipe__meta .nut-meal-hint,
.nut-form--recipe-view .nut-meal-hint{ margin-right:6px; }
.nut-suggest-card__actions{
display:grid;
grid-template-columns:1fr auto;
gap:8px;
}
.nut-suggest-card .btn{ justify-content:center; width:100%; }
.nut-suggest__more{ align-self:center; min-width:180px; }
.nut-meal-filter{ margin:-2px 0 0; }
.nut-suggest__empty{ padding:12px; }
@media (max-width:640px){
.nut-insights-card__head{ align-items:center; }
.nut-balance{ grid-template-columns:72px 1fr; padding:12px; }
.nut-balance__meter{ width:70px; height:70px; }
.nut-balance__meter strong{ font-size:22px; }
.nut-balance__status{ font-size:16px; }
.nut-suggest__head{ align-items:flex-start; }
.nut-suggest__grid{ grid-template-columns:1fr; }
.nut-suggest-card__actions{ grid-template-columns:1fr 1fr; }
.nut-suggest__more{ align-self:stretch; }
.nut-premium-gate{ align-items:stretch; flex-direction:column; }
.nut-premium-gate .btn{ justify-content:center; }
}
/* --- Круговой прогресс калорий --- */
.nut-ring{
--nut-ring-size: 200px;
--nut-ring-thick: 12px;
--nut-ring-angle: 0deg;
position: relative; width: var(--nut-ring-size); height: var(--nut-ring-size);
display:grid; place-items:center;
}
.nut-ring__track{
position:absolute; inset:0; border-radius:50%;
background:
conic-gradient(var(--accent) var(--nut-ring-angle), color-mix(in oklab, var(--chip) 70%, transparent) 0);
mask: radial-gradient(circle,
transparent calc(50% - var(--nut-ring-thick) - 1px),
#000 calc(50% - var(--nut-ring-thick)),
#000 calc(50% - 1px),
transparent 50%);
-webkit-mask: radial-gradient(circle,
transparent calc(50% - var(--nut-ring-thick) - 1px),
#000 calc(50% - var(--nut-ring-thick)),
#000 calc(50% - 1px),
transparent 50%);
transition: background .35s ease;
}
.nut-ring.nut-ring--over .nut-ring__track{
background:
conic-gradient(var(--warn, #F59E0B) var(--nut-ring-angle), color-mix(in oklab, var(--chip) 70%, transparent) 0);
}
.nut-ring__center{
position:relative; z-index:1; text-align:center;
/* Геометрия: кольцо = окружность. Центральный блок — 3 строки, значит самая
нижняя (цель) стоит ощутимо ниже оси. Ширина вписанного прямоугольника
при такой высоте у́же, чем «диаметр − толщина». Эмпирически 70% диаметра —
гарантированный коридор, при котором «из 2000 ккал • 92%» не задевает дугу
даже при кольце 12px. */
width: calc(var(--nut-ring-size) * 0.70);
padding: 0 2px;
box-sizing: border-box;
display:flex; flex-direction:column; align-items:center; gap:2px;
}
.nut-ring__num{ font-size: 30px; font-weight: 800; line-height:1; font-variant-numeric: tabular-nums; }
.nut-ring__label{ color: var(--muted); font-size: 10px; letter-spacing:.08em; text-transform:uppercase; margin-top:2px; }
.nut-ring__goal{
margin-top:2px;
font-size: 10.5px;
line-height: 1.2;
color: var(--muted);
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Мобильная компоновка: кольцо чуть меньше, пропорционально уменьшаем шрифты. */
@media (max-width: 480px){
.nut-ring{ --nut-ring-size: 170px; --nut-ring-thick: 10px; }
.nut-ring__num{ font-size: 26px; }
.nut-ring__label{ font-size: 9.5px; }
.nut-ring__goal{ font-size: 10px; }
}
/* --- Макросы --- */
.nut-macros{ display:flex; flex-direction:column; gap:10px; width:100%; }
.nut-macro{ display:flex; flex-direction:column; gap:4px; }
.nut-macro__head{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.nut-macro__name{ font-weight:700; font-size:13px; }
/* «текущее / цель г · %» в одну строку, дробные части — приглушённым цветом */
.nut-macro__val{ color: var(--text); font-size:12px; white-space: nowrap; }
.nut-macro__goal{ color: var(--muted); }
.nut-macro__goal[hidden]{ display:none; }
.nut-macro__pct{ margin-left:4px; }
/* При переборе — окрашиваем весь «текущее / цель г · %» в опасный цвет,
сигнализируя что цель превышена (>100%). У .nut-macro__goal свой muted
цвет, поэтому явно сбрасываем его на inherit, чтобы подхватил красный
родительского .nut-macro__val. */
.nut-macro--over .nut-macro__val,
.nut-macro--over .nut-macro__pct{ color: var(--danger, #EF4444); }
.nut-macro--over .nut-macro__goal{ color: inherit; }
.nut-macro__bar{
position:relative; height:8px; border-radius:999px;
background: color-mix(in oklab, var(--chip) 80%, transparent);
overflow:hidden;
}
.nut-macro__fill{
position:absolute; inset:0 auto 0 0; width:0%;
background: linear-gradient(90deg, var(--accent), color-mix(in oklab, var(--accent) 60%, var(--text)));
border-radius:inherit; transition: width .45s cubic-bezier(.2,.7,.2,1);
}
.nut-macro[data-macro="protein"] .nut-macro__fill{ background: linear-gradient(90deg, #3B82F6, #60A5FA); }
.nut-macro[data-macro="carbs"] .nut-macro__fill{ background: linear-gradient(90deg, #F59E0B, #FBBF24); }
.nut-macro[data-macro="fat"] .nut-macro__fill{ background: linear-gradient(90deg, #EF4444, #F87171); }
.nut-macro--over .nut-macro__fill{ filter: saturate(1.15) brightness(1.05); box-shadow: inset 0 0 0 1px color-mix(in oklab, #fff 20%, transparent); }
/* --- Статус-бейдж белка (оптимум/норма/мало) относительно текущего веса ---
Вариант A: бейдж только у белка (единственный макрос с привязанной к весу
«достаточностью»). Оформлен нейтрально — плашка спокойная, цветом тонируется
ТОЛЬКО текст и тонкая рамка, без заливки зоны, чтобы не выглядеть как алерт.
У жиров/углеводов статуса нет осознанно: их «попадание в план» уже показывают
бар, процент и подсветка перебора. */
.nut-macro__zone{
display:inline-block; vertical-align:middle; margin-left:6px;
font-size:11px; line-height:1; font-weight:600; letter-spacing:.01em;
padding:3px 7px; border-radius:999px; white-space:nowrap;
color:var(--muted);
background:color-mix(in oklab, var(--chip, #64748B) 12%, transparent);
border:1px solid var(--border);
cursor:help;
}
.nut-macro__zone[hidden]{ display:none !important; }
/* Цветом помечаем только текст и рамку — мягко, без «красной тревоги». */
.nut-macro--zone-green .nut-macro__zone{ color:#15803D; border-color:color-mix(in oklab, #22C55E 40%, var(--border)); }
.nut-macro--zone-yellow .nut-macro__zone{ color:#B45309; border-color:color-mix(in oklab, #F59E0B 40%, var(--border)); }
.nut-macro--zone-red .nut-macro__zone{ color:#B91C1C; border-color:color-mix(in oklab, #EF4444 40%, var(--border)); }
/* Сам прогресс-бар белка оставляем в базовом синем — статус показывает только
бейдж зоны, чтобы не перегружать интерфейс красным. */
/* --- Месячная сводка в карточке баланса (за 30 дней) ---
Закреплена рядом с баллом, спокойный тон, отделена тонкой линией сверху. */
.nut-balance__month{
margin-top:8px; padding-top:8px;
border-top:1px solid color-mix(in oklab, var(--border) 70%, transparent);
font-size:13px; line-height:1.4; color:var(--muted);
display:flex; gap:6px; align-items:flex-start;
}
.nut-balance__month.is-pos{ color: color-mix(in oklab, #15803D 75%, var(--text)); }
.nut-balance__month.is-warn{ color: color-mix(in oklab, #B45309 75%, var(--text)); }
/* --- Баннер «пересчитать цели под текущий вес» ---
Ненавязчивая карточка-предложение: акцентная рамка, адаптивная раскладка. */
.nut-recalc{
display:flex; align-items:center; justify-content:space-between; gap:14px;
flex-wrap:wrap;
border:1px solid color-mix(in oklab, var(--accent, #3B82F6) 35%, var(--border));
background: color-mix(in oklab, var(--accent, #3B82F6) 8%, transparent);
}
.nut-recalc[hidden]{ display:none !important; }
.nut-recalc__main{ display:flex; align-items:flex-start; gap:12px; flex:1 1 280px; min-width:0; }
.nut-recalc__icon{ font-size:22px; line-height:1.2; }
.nut-recalc__text{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.nut-recalc__text strong{ font-size:15px; }
.nut-recalc__text span{ color:var(--muted); font-size:13px; line-height:1.4; }
.nut-recalc__actions{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
@media (max-width: 560px){
.nut-recalc__actions{ width:100%; }
.nut-recalc__actions .btn{ flex:1 1 auto; }
}
/* --- Геймификация питания (очки + серия в hero) ---
Показывается только если summary.gamification вернул что-то отличное от нулей.
Чипсы рассчитаны на тёмную и светлую темы (используют CSS-переменные). */
.nut-gam{
display:flex; flex-wrap:wrap; gap:8px 10px; align-items:center;
padding:10px 12px; border:1px solid var(--border); border-radius:12px;
background: color-mix(in oklab, var(--chip) 18%, transparent);
}
.nut-gam[hidden]{ display:none !important; }
.nut-gam__chip{
display:inline-flex; align-items:baseline; gap:6px;
padding:4px 10px; border-radius:999px;
background: color-mix(in oklab, var(--chip) 60%, transparent);
border:1px solid var(--border);
font-size:13px;
}
.nut-gam__chip[data-role="points"]{
background: color-mix(in oklab, #fbbf24 12%, transparent);
border-color: color-mix(in oklab, #fbbf24 40%, var(--border));
}
.nut-gam__chip[data-role="streak"]{
background: color-mix(in oklab, #ef4444 12%, transparent);
border-color: color-mix(in oklab, #ef4444 40%, var(--border));
}
.nut-gam__icon{ font-size:14px; line-height:1; }
.nut-gam__num{ font-weight:800; font-size:15px; }
.nut-gam__label{ color:var(--muted); }
.nut-gam__hints{
flex:1 1 220px; min-width:0; color:var(--muted); font-size:12px; line-height:1.35;
}
.nut-gam__hints b{ color:var(--text); font-weight:600; }
@media (max-width: 520px){
.nut-gam{ padding:8px 10px; }
.nut-gam__hints{ flex-basis:100%; }
}
/* --- Вода --- */
.nut-water{
display:flex; flex-direction:column; gap:8px;
padding:12px; border:1px solid var(--border); border-radius:12px;
background: color-mix(in oklab, var(--chip) 22%, transparent);
}
.nut-water__head{ display:flex; justify-content:space-between; align-items:baseline; }
.nut-water__name{ font-weight:700; }
.nut-water__val{ color: var(--muted); font-size:13px; }
.nut-water__bar{
position:relative; height:10px; border-radius:999px;
background: color-mix(in oklab, var(--chip) 80%, transparent);
overflow:hidden;
}
.nut-water__fill{
position:absolute; inset:0 auto 0 0; width:0%;
background: linear-gradient(90deg, #38BDF8, #22D3EE);
transition: width .5s cubic-bezier(.2,.7,.2,1);
}
.nut-water__actions{ display:flex; gap:6px; flex-wrap:wrap; }
.nut-water__breakdown{
margin-top:-2px;
font-size:12px;
color: var(--muted);
}
.nut-water__breakdown[hidden]{ display:none !important; }
.nut-water__group{
display:flex; align-items:center; gap:10px; flex-wrap:wrap;
padding:6px 0;
border-top:1px dashed color-mix(in oklab, var(--border) 70%, transparent);
}
.nut-water__group:first-of-type{ border-top:0; padding-top:2px; }
.nut-water__group-name{
display:inline-flex; align-items:center; gap:6px;
min-width:88px;
font-size:13px;
color: var(--text);
}
.nut-water__icon{ font-size:15px; line-height:1; }
.nut-water__factor{ font-size:11px; }
.nut-water__actions--undo{ justify-content:flex-end; margin-top:4px; }
@media (max-width: 520px){
.nut-water__group{ gap:6px; }
.nut-water__group-name{ min-width:0; flex-basis:100%; }
}
/* --- Фильтры журнала --- */
.nut-filters{
display:grid; gap:10px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
padding:10px; border:1px dashed var(--border); border-radius:12px; margin-bottom:10px;
background: color-mix(in oklab, var(--chip) 18%, transparent);
}
.nut-filters[hidden]{ display:none !important; }
.nut-filters label{ display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--muted); }
.nut-filters__actions{ display:flex; gap:8px; align-items:flex-end; }
@media (max-width:520px){ .nut-filters__actions{ grid-column: 1 / -1; justify-content:flex-end; } }
/* --- Журнал: дни и приёмы --- */
.nut-days{ display:flex; flex-direction:column; gap:14px; }
.nut-day{
display:flex; flex-direction:column; gap:10px;
padding:12px; border:1px solid var(--border); border-radius:14px;
background: color-mix(in oklab, var(--chip) 12%, transparent);
}
.nut-day__head{
display:grid; grid-template-columns: 1fr auto auto; gap:10px; align-items:center;
}
.nut-day__date{ display:flex; flex-direction:column; gap:2px; }
.nut-day__totals{ display:flex; flex-direction:column; align-items:flex-end; gap:2px; }
.nut-day__kcal{ font-weight:700; }
.nut-day__actions{ display:flex; gap:6px; }
@media (max-width:560px){
.nut-day__head{ grid-template-columns: 1fr; }
.nut-day__totals{ align-items:flex-start; }
.nut-day__actions{ justify-content:flex-start; }
}
/* Сегодня — визуальный акцент: чуть насыщеннее фон, мягкая рамка. */
.nut-day--today{
border-color: color-mix(in oklab, var(--accent) 45%, var(--border));
background: color-mix(in oklab, var(--accent) 7%, var(--chip) 10%);
}
/* Прошлые дни — collapsible . Сам наследует .nut-day,
а играет роль «шапки» и одновременно кликабельного тоггла. */
.nut-day--past{ padding:0; overflow:hidden; }
.nut-day--past > .nut-day__head--summary{
list-style: none; /* убираем нативный маркер */
cursor: pointer;
padding:12px;
margin:0;
user-select: none;
grid-template-columns: 1fr auto auto; /* дата | сводка | стрелка */
}
.nut-day--past > .nut-day__head--summary::-webkit-details-marker{ display:none; }
.nut-day--past > .nut-day__head--summary::marker{ content:''; }
.nut-day--past > .nut-day__head--summary:hover{
background: color-mix(in oklab, var(--chip) 18%, transparent);
}
.nut-day--past > .nut-day__head--summary:focus-visible{
outline: 2px solid var(--accent);
outline-offset: -2px;
}
.nut-day__toggle{
display:inline-flex; align-items:center; justify-content:center;
width:24px; height:24px; border-radius:8px;
color: var(--muted);
transition: transform .15s ease;
}
.nut-day--past[open] > .nut-day__head--summary .nut-day__toggle{
transform: rotate(180deg);
}
.nut-day--past > .nut-day__body{
padding: 0 12px 12px 12px;
display: flex; flex-direction: column; gap: 10px;
border-top: 1px solid var(--border);
padding-top: 10px;
}
.nut-day__actions--past{ justify-content:flex-end; }
@media (max-width:560px){
/* Мобильная раскладка :
[ дата ] [ ▾ ]
[ сводка (full) ]
Для этого явно задаём колонки/строки и позиции элементов. */
.nut-day--past > .nut-day__head--summary{
grid-template-columns: 1fr auto;
grid-template-rows: auto auto;
row-gap: 4px;
}
.nut-day--past > .nut-day__head--summary .nut-day__date { grid-column: 1 / 2; grid-row: 1; }
.nut-day--past > .nut-day__head--summary .nut-day__toggle { grid-column: 2 / 3; grid-row: 1; }
.nut-day--past > .nut-day__head--summary .nut-day__totals { grid-column: 1 / -1; grid-row: 2; align-items:flex-start; }
.nut-day__actions--past{ justify-content:flex-start; }
}
/* Кнопка «Показать ещё N дней» */
.nut-days__more{
display:flex; justify-content:center;
padding: 4px 0 2px;
}
.nut-days__more .btn{ padding: 8px 14px; }
.nut-meals{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
.nut-meal{
display:grid; grid-template-columns: 1fr auto; gap:8px;
padding:10px 12px; border:1px solid var(--border); border-radius:12px;
background: var(--surface);
}
.nut-meal__body{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.nut-meal__head{ display:flex; gap:6px; flex-wrap:wrap; }
.nut-meal__title{ display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; }
.nut-meal__title strong{ word-break: break-word; }
.nut-meal__kcal{ color: var(--accent); font-weight:700; }
.nut-meal__actions{ display:flex; gap:6px; align-items:flex-start; flex-wrap:wrap; justify-content:flex-end; }
@media (max-width:520px){
.nut-meal{ grid-template-columns: 1fr; }
.nut-meal__actions{ justify-content:flex-start; }
}
/* Акцент на типе приёма */
.nut-meal__type[data-type="breakfast"]{ background: color-mix(in oklab, #F59E0B 22%, var(--chip)); color: #F59E0B; }
.nut-meal__type[data-type="lunch"] { background: color-mix(in oklab, #10B981 22%, var(--chip)); color: #10B981; }
.nut-meal__type[data-type="dinner"] { background: color-mix(in oklab, #6366F1 22%, var(--chip)); color: #A5B4FC; }
.nut-meal__type[data-type="snack"] { background: color-mix(in oklab, #EC4899 22%, var(--chip)); color: #F472B6; }
.nut-meal__type[data-type="other"] { background: var(--chip); color: var(--muted); }
/* --- Продукты --- */
.nut-food-search{ margin-bottom:10px; }
.nut-food-search input{ width:100%; }
.nut-foods-grid{
display:grid; gap:10px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.nut-food{
display:flex; flex-direction:column; gap:6px;
padding:10px 12px; border:1px solid var(--border); border-radius:12px; background: var(--surface);
}
.nut-food__head{ display:flex; gap:8px; align-items:center; }
.nut-food__fav{
background: transparent; border:1px solid var(--border); color: var(--muted);
border-radius:999px; width:28px; height:28px; display:grid; place-items:center; cursor:pointer;
font-size:14px; line-height:1; padding:0; transition: color .15s, border-color .15s, background .15s;
}
.nut-food__fav:hover{ color: var(--text); }
.nut-food__fav.is-on{ color: #F59E0B; border-color: color-mix(in oklab, #F59E0B 40%, var(--border)); background: color-mix(in oklab, #F59E0B 12%, transparent); }
.nut-food__name{ font-weight:700; display:flex; gap:6px; align-items:center; flex:1; min-width:0; }
.nut-food__name .chip{ font-size:11px; padding:3px 8px; }
.nut-food__macros{ display:flex; flex-wrap:wrap; gap:4px; }
.nut-food__actions{ display:flex; gap:6px; margin-top:4px; flex-wrap:wrap; }
.nut-food[data-system="1"] .nut-food__name{ color: var(--text); }
/* --- Чипы-фильтры (используются над списками продуктов и рецептов) --- */
.chip-seg{
display:flex; gap:6px; flex-wrap:wrap;
margin: 4px 0 10px;
}
.chip-seg--scroll{
flex-wrap: nowrap;
overflow-x: auto;
scrollbar-width: none; /* Firefox */
-webkit-overflow-scrolling: touch;
/* Скрыть дефолтный скроллбар на WebKit — он визуально шумит в карточке */
padding-bottom: 2px;
}
.chip-seg--scroll::-webkit-scrollbar{ display:none; }
.chip-seg__item{
flex: 0 0 auto;
appearance: none;
background: var(--chip);
color: var(--muted);
border: 1px solid var(--border);
border-radius: 999px;
padding: 6px 12px;
font-size: 13px;
font-weight: 500;
cursor: pointer;
white-space: nowrap;
transition: color .15s, border-color .15s, background .15s;
}
.chip-seg__item:hover{ color: var(--text); }
.chip-seg__item:focus-visible{
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.chip-seg__item.is-on{
color: var(--accent);
background: color-mix(in oklab, var(--accent) 14%, var(--chip));
border-color: color-mix(in oklab, var(--accent) 55%, var(--border));
}
/* Пустое состояние при активном фильтре — компактная плашка с кнопкой-сбросом */
.nut-empty{
grid-column: 1 / -1;
display:flex; flex-direction:column; gap:8px; align-items:flex-start;
padding: 14px; border:1px dashed var(--border); border-radius:12px;
background: color-mix(in oklab, var(--chip) 10%, transparent);
}
/* Компактный мобильный вид карточек продуктов и рецептов.
На ≤520px действия сжимаются до иконок, заметки рецепта скрываются
(их видно после «Состав»), meta-extra не дублирует суммарные ккал. */
.nut-act__icon{ display:none; }
@media (max-width: 520px){
.nut-food{ padding: 9px 10px; gap: 5px; }
.nut-food__macros{ font-size: 12px; }
.nut-food__actions .btn.subtle{ padding: 6px 9px; }
.nut-recipe{ padding: 9px 10px; gap: 5px; }
.nut-recipe__meta-extra{ display:none; }
.nut-recipe__notes{ display:none; }
/* Иконки вместо подписей для вторичных действий — экономят место */
.nut-act__icon{ display:inline; font-size:14px; line-height:1; }
.nut-act__label{ display:none; }
}
/* --- Планы --- */
.nut-plans-grid{
display:grid; gap:10px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.nut-plan{
display:flex; flex-direction:column; gap:6px;
padding:12px; border:1px solid var(--border); border-radius:12px; background: var(--surface);
transition: border-color .2s, box-shadow .2s;
}
.nut-plan.is-active{
border-color: color-mix(in oklab, var(--accent) 55%, var(--border));
box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent) 30%, transparent) inset;
}
.nut-plan__head{ display:flex; gap:8px; align-items:center; justify-content:space-between; }
.nut-plan__name{ word-break: break-word; }
.nut-plan__actions{ display:flex; gap:6px; margin-top:6px; flex-wrap:wrap; }
/* --- Формы модалок --- */
.nut-form{ display:flex; flex-direction:column; gap:10px; }
.nut-form .title{ margin: 0 0 4px; }
.nut-form label{ display:flex; flex-direction:column; gap:4px; font-size:12px; color: var(--muted); }
.nut-form input:not([type="radio"]):not([type="checkbox"]),
.nut-form select,
.nut-form textarea{
background: var(--panel); color: var(--text); border:1px solid var(--border); border-radius:10px;
padding:10px 12px; font-size:16px; line-height:1.2; outline:none;
min-height:44px;
}
.nut-form input[type="date"]{ appearance:none; -webkit-appearance:none; }
.nut-form select{
appearance:none; -webkit-appearance:none;
padding-right:42px;
background-color:var(--panel);
background-image:linear-gradient(45deg, transparent 50%, var(--muted) 50%),linear-gradient(135deg, var(--muted) 50%, transparent 50%);
background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;
background-size:6px 6px,6px 6px;
background-repeat:no-repeat;
}
.nut-form input:focus, .nut-form select:focus, .nut-form textarea:focus{
border-color: color-mix(in oklab, var(--accent) 60%, var(--border));
}
.nut-form__grid{ display:grid; gap:10px; grid-template-columns: 1fr 1fr; }
.nut-form__grid--2{ grid-template-columns: 1fr 1fr; }
.nut-form__grid--3{ grid-template-columns: repeat(3, 1fr); }
.nut-form__grid--4{ grid-template-columns: repeat(4, 1fr); }
@media (max-width:560px){
.nut-form__grid, .nut-form__grid--2, .nut-form__grid--3, .nut-form__grid--4{ grid-template-columns: 1fr 1fr; }
}
/* Badge award popup */
.badge-award-backdrop{ position:fixed; inset:0; z-index:7000; display:grid; place-items:center; padding:18px; background:color-mix(in oklab, var(--overlay) 82%, transparent); opacity:0; pointer-events:none; transition:opacity .2s ease; }
.badge-award-backdrop.is-open{ opacity:1; pointer-events:auto; }
.badge-award-backdrop.is-leaving{ opacity:0; }
.badge-award{ position:relative; width:min(440px, 100%); overflow:hidden; border:1px solid color-mix(in oklab, var(--accent) 32%, var(--border)); border-radius:30px; padding:24px; text-align:center; background:radial-gradient(circle at 50% 0%, color-mix(in oklab, var(--accent) 20%, transparent), transparent 42%), var(--card); box-shadow:0 30px 90px rgba(0,0,0,.28); transform:translateY(18px) scale(.96); transition:transform .28s cubic-bezier(.2,.9,.2,1); }
.badge-award-backdrop.is-open .badge-award{ transform:none; }
.badge-award__close{ position:absolute; top:12px; right:12px; z-index:2; width:38px; height:38px; border:1px solid var(--border); border-radius:999px; background:var(--surface); color:var(--text); font-size:24px; line-height:1; cursor:pointer; }
.badge-award__mascot-wrap{ min-height:96px; display:grid; place-items:center; margin-bottom:-12px; }
.badge-award__mascot{ max-width:138px; max-height:116px; object-fit:contain; animation:badgeMascotBounce 1.4s ease-in-out infinite; }
.badge-award__badge{ position:relative; z-index:1; display:grid; place-items:center; width:128px; height:128px; margin:0 auto 14px; border-radius:34px; background:linear-gradient(135deg, color-mix(in oklab, var(--accent) 18%, var(--surface)), var(--surface)); box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--accent) 32%, transparent), 0 14px 36px color-mix(in oklab, var(--accent) 22%, transparent); animation:badgeAwardPop .46s cubic-bezier(.2,.9,.2,1) both; }
.badge-award__badge--rare{ background:linear-gradient(135deg,#dcfce7,var(--surface)); }
.badge-award__badge--epic{ background:linear-gradient(135deg,#ede9fe,#dcfce7); }
.badge-award__badge--legendary{ background:linear-gradient(135deg,#fef3c7,#dcfce7); }
.badge-award__badge-img{ width:100%; height:100%; object-fit:contain; padding:12px; }
.badge-award__badge-fallback{ font-size:58px; color:var(--accent); }
.badge-award__eyebrow{ display:inline-flex; align-items:center; gap:8px; margin-bottom:8px; padding:6px 10px; border-radius:999px; color:var(--accent); background:color-mix(in oklab, var(--accent) 12%, transparent); font-size:12px; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }
.badge-award__period{ color:var(--muted); font-weight:800; letter-spacing:0; }
.badge-award__title{ margin:0; font-size:clamp(26px, 7vw, 36px); line-height:1.02; }
.badge-award__desc{ margin:10px auto 0; max-width:330px; color:var(--muted); line-height:1.45; }
.badge-award__bonus{ display:inline-flex; margin-top:14px; padding:8px 12px; border-radius:999px; color:#065f46; background:#dcfce7; font-weight:900; }
.badge-award__actions{ display:flex; justify-content:center; gap:10px; margin-top:20px; flex-wrap:wrap; }
.badge-award__confetti{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.badge-award__confetti i{ position:absolute; top:-14px; width:8px; height:14px; border-radius:3px; background:var(--accent); animation:badgeConfetti 1.4s ease-out both; }
.badge-award__confetti i:nth-child(1){ left:10%; animation-delay:.05s; background:#22c55e; }.badge-award__confetti i:nth-child(2){ left:22%; animation-delay:.16s; background:#f59e0b; }.badge-award__confetti i:nth-child(3){ left:34%; animation-delay:.02s; background:#06b6d4; }.badge-award__confetti i:nth-child(4){ left:46%; animation-delay:.2s; background:#84cc16; }.badge-award__confetti i:nth-child(5){ left:58%; animation-delay:.1s; background:#a855f7; }.badge-award__confetti i:nth-child(6){ left:70%; animation-delay:.18s; background:#22c55e; }.badge-award__confetti i:nth-child(7){ left:82%; animation-delay:.04s; background:#f97316; }.badge-award__confetti i:nth-child(8){ left:15%; animation-delay:.28s; background:#14b8a6; }.badge-award__confetti i:nth-child(9){ left:63%; animation-delay:.3s; background:#eab308; }.badge-award__confetti i:nth-child(10){ left:92%; animation-delay:.24s; background:#22c55e; }
@keyframes badgeAwardPop{ from{ transform:scale(.7) rotate(-4deg); opacity:0; } to{ transform:scale(1) rotate(0); opacity:1; } }
@keyframes badgeMascotBounce{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }
@keyframes badgeConfetti{ 0%{ transform:translateY(0) rotate(0); opacity:0; } 12%{ opacity:1; } 100%{ transform:translateY(360px) rotate(320deg); opacity:0; } }
@media (max-width:520px){ .badge-award{ padding:22px 16px; border-radius:26px; } .badge-award__actions .btn{ flex:1 1 auto; } }
@media (prefers-reduced-motion: reduce){ .badge-award,.badge-award__badge,.badge-award__mascot,.badge-award__confetti i{ animation:none !important; transition:none !important; } }
/* Badges collection page */
.badges-page{ display:grid; gap:16px; padding-bottom:calc(28px + env(safe-area-inset-bottom)); }
.badges-hero{ display:flex; justify-content:space-between; gap:18px; align-items:stretch; padding:22px; border:1px solid color-mix(in oklab, var(--accent) 24%, var(--border)); border-radius:28px; background:linear-gradient(135deg, color-mix(in oklab, var(--accent) 12%, var(--card)), var(--card)); }
.badges-hero .eyebrow{ color:var(--accent); font-size:12px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.badges-hero h1{ margin:6px 0 8px; font-size:clamp(34px, 7vw, 56px); line-height:.95; }
.badges-hero p{ margin:0; max-width:620px; color:var(--muted); line-height:1.45; }
.badges-hero__stat{ flex:0 0 auto; min-width:128px; display:grid; place-content:center; text-align:center; padding:16px; border-radius:22px; background:color-mix(in oklab, var(--accent) 10%, var(--surface)); border:1px solid color-mix(in oklab, var(--accent) 26%, var(--border)); }
.badges-hero__stat strong{ font-size:30px; line-height:1; }.badges-hero__stat span{ margin-top:5px; color:var(--muted); font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.badges-toolbar{ display:flex; gap:8px; overflow:auto; padding:2px; scrollbar-width:none; }.badges-toolbar::-webkit-scrollbar{ display:none; }
.badges-toolbar button{ flex:0 0 auto; border:1px solid var(--border); border-radius:999px; background:var(--card); color:var(--muted); padding:10px 14px; font-weight:800; cursor:pointer; }
.badges-toolbar button.is-active{ color:var(--accent); border-color:color-mix(in oklab, var(--accent) 34%, var(--border)); background:color-mix(in oklab, var(--accent) 12%, var(--card)); }
.badges-overview{ display:grid; gap:10px; }.badges-overview__top{ display:flex; justify-content:space-between; gap:12px; align-items:center; }
.badges-overview__bar{ height:12px; border-radius:999px; background:var(--panel); overflow:hidden; border:1px solid var(--border); }.badges-overview__bar span{ display:block; height:100%; width:0; border-radius:999px; background:linear-gradient(135deg,var(--accent),#86efac); transition:width .3s ease; }
.badges-groups{ display:grid; gap:18px; }.badges-group{ display:grid; gap:10px; }.badges-group__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }.badges-group__head h2{ margin:0; }
.badge-collection-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:12px; }
.badge-collection-card{ display:grid; grid-template-columns:86px minmax(0,1fr); gap:13px; align-items:start; padding:13px; border:1px solid var(--border); border-radius:22px; background:var(--card); min-width:0; }
.badge-collection-card.is-locked{ opacity:.76; }.badge-collection-card.is-locked .badge-collection-card__art{ filter:grayscale(.85); }
.badge-collection-card__art{ display:grid; place-items:center; width:86px; height:86px; border-radius:24px; background:linear-gradient(135deg, color-mix(in oklab, var(--accent) 12%, var(--surface)), var(--surface)); box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--accent) 20%, transparent); overflow:hidden; font-size:38px; }
.badge-collection-card__art--rare{ background:linear-gradient(135deg,#dcfce7,var(--surface)); }.badge-collection-card__art--epic{ background:linear-gradient(135deg,#ede9fe,#dcfce7); }.badge-collection-card__art--legendary{ background:linear-gradient(135deg,#fef3c7,#dcfce7); }
.badge-collection-card__art img{ width:100%; height:100%; object-fit:contain; padding:9px; }
.badge-collection-card__body{ min-width:0; }.badge-collection-card__meta{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; color:var(--accent); font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.06em; }.badge-collection-card__period{ color:var(--muted); letter-spacing:0; }
.badge-collection-card h3{ margin:4px 0 5px; line-height:1.12; }.badge-collection-card p{ margin:0; color:var(--muted); font-size:13px; line-height:1.35; }
.badge-collection-card__progress{ height:8px; margin-top:10px; border-radius:999px; background:var(--panel); overflow:hidden; }.badge-collection-card__progress span{ display:block; height:100%; border-radius:999px; background:linear-gradient(135deg,var(--accent),#86efac); }
.badge-collection-card__foot{ display:flex; justify-content:space-between; gap:10px; margin-top:6px; color:var(--muted); font-size:12px; }.badge-collection-card__foot strong{ color:var(--text); }
.badge-collection-card__earned,.badge-collection-card__history{ margin-top:7px; color:var(--muted); font-size:12px; }.badges-empty{ color:var(--muted); }
@media (max-width:640px){ .badges-hero{ flex-direction:column; padding:18px; border-radius:24px; }.badges-hero__stat{ min-width:0; }.badge-collection-grid{ grid-template-columns:1fr; }.badge-collection-card{ grid-template-columns:72px minmax(0,1fr); }.badge-collection-card__art{ width:72px; height:72px; border-radius:20px; } }
/* Чекбокс «Сохранить как продукт» в форме приёма */
.nut-form__check{
display:flex; align-items:center; gap:8px;
font-size:13px; color: var(--text);
align-self:end; padding:8px 0;
}
.nut-form__check input[type="checkbox"]{
width:16px; height:16px; margin:0;
accent-color: var(--accent, #38BDF8);
}
.nut-form__section{ display:flex; flex-direction:column; gap:10px; }
.nut-form__mode{ display:flex; align-items:center; gap:10px; }
/* Сегмент с типом приёма — растягивается на ширину формы */
.seg.nut-meal-type{ display:grid; grid-auto-flow:column; grid-auto-columns: 1fr; width:100%; }
.seg.nut-meal-type label{ text-align:center; justify-content:center; padding:8px 4px; font-size:13px; }
@media (max-width:520px){
.seg.nut-meal-type label{ font-size:12px; padding:7px 2px; }
}
/* Кнопки с «опасной» семантикой */
.btn.nut-btn-danger{
background: color-mix(in oklab, #EF4444 18%, var(--chip));
color: #FCA5A5;
}
.btn.nut-btn-danger:hover{ filter: brightness(1.08); }
.btn.nut-btn-ghost-danger{ color: color-mix(in oklab, #EF4444 70%, var(--text)); }
.btn.nut-btn-ghost-danger:hover{ background: color-mix(in oklab, #EF4444 14%, var(--chip)); }
/* Подтверждение в модалке */
.nut-confirm{ padding: 6px 2px 2px; }
/* Предпросмотр Markdown-отчёта в модалке.
Моноширинный текст, расширяем под содержимое: на десктопе строки таблицы
широкие, узкая стандартная модалка не справляется. Используем :has(),
чтобы расширить ИМЕННО ту модалку, в которой лежит предпросмотр —
остальные модалки нутришна (формы) сохраняют свой компактный размер. */
.modal-card:has(.nut-md-preview){
width: min(1100px, 96vw);
max-height: 92vh;
}
.nut-form .nut-md-preview{
width: 100%;
min-height: 420px;
max-height: 72vh;
resize: vertical;
font: 14px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
white-space: pre;
overflow: auto;
tab-size: 2;
}
@media (max-width: 720px){
.modal-card:has(.nut-md-preview){ width: min(1100px, 96vw); max-height: 90vh; }
.nut-form .nut-md-preview{ min-height: 320px; max-height: 65vh; font-size: 13px; line-height: 1.5; }
}
@media (max-width: 480px){
.nut-form .nut-md-preview{ min-height: 240px; max-height: 60vh; font-size: 12.5px; }
}
/* --- Автокомплит продуктов --- */
.nut-autocomplete{ position:relative; }
.nut-autocomplete input[type="text"]{
width:100%;
background: var(--panel); color: var(--text); border:1px solid var(--border); border-radius:10px;
padding:10px 12px; font-size:14px; outline:none;
}
.nut-autocomplete input[type="text"]:focus{
border-color: color-mix(in oklab, var(--accent) 60%, var(--border));
}
.nut-autocomplete__drop{
position:absolute; left:0; right:0; top: calc(100% + 4px); z-index: 30;
background: var(--surface); border:1px solid var(--border); border-radius:10px;
max-height: 260px; overflow:auto;
box-shadow: 0 12px 32px rgba(0,0,0,.18);
display:flex; flex-direction:column; padding:4px;
}
.nut-autocomplete__drop[hidden]{ display:none; }
.nut-ac-item{
display:flex; align-items:center; justify-content:space-between; gap:10px;
padding:8px 10px; border-radius:8px; background: transparent; border:none;
color: var(--text); text-align:left; cursor:pointer; width:100%;
}
.nut-ac-item:hover, .nut-ac-item:focus{
background: color-mix(in oklab, var(--chip) 70%, transparent);
}
.nut-ac-name{ font-weight:600; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nut-ac-meta{ white-space:nowrap; color: var(--muted); font-size:.86em; }
/* Правая часть строки в выдаче автокомплита: тип (бейдж) + краткие макро. */
.nut-ac-extras{
display:inline-flex; align-items:center; gap:8px;
white-space:nowrap; flex-shrink:0;
}
.nut-ac-kind{
display:inline-block;
font-size:11px; line-height:1; font-weight:600;
padding:3px 7px; border-radius:999px;
border:1px solid var(--border);
background: color-mix(in oklab, var(--chip) 60%, transparent);
color: var(--text);
letter-spacing:.2px;
}
.nut-ac-kind--food{
/* нейтральный — продукт */
color: var(--muted);
}
.nut-ac-kind--recipe{
/* акцентный — рецепт */
color: var(--accent);
border-color: color-mix(in oklab, var(--accent) 35%, var(--border));
background: color-mix(in oklab, var(--accent) 10%, transparent);
}
/* Поясняющий расчёт КБЖУ под полями */
.nut-food__calc{ align-self:end; padding-bottom:6px; font-variant-numeric: tabular-nums; }
/* На узких экранах однострочная раскладка съедает место у названия и режет
его троеточием — пользователь не видит, что нашёл. Переносим строку
результата в вертикальную раскладку: имя целиком (до 2 строк) сверху,
бейдж типа + калории — снизу. */
@media (max-width: 520px){
/* Поле поиска при фокусе подскролливается к верху модалки (см. nutrition.js).
Отступ — чтобы оно не уехало под закреплённую панель с крестиком. */
.nut-autocomplete input[type="text"]{ scroll-margin-top: 56px; }
/* Ограничиваем высоту выпадашки, чтобы список помещался в зону над
клавиатурой и прокручивался внутри себя, а не уходил под неё. */
.nut-autocomplete__drop{ max-height: 40vh; }
.nut-ac-item{
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
.nut-ac-name{
white-space: normal;
overflow: visible;
text-overflow: clip;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
line-height: 1.3;
}
.nut-ac-extras{
flex-shrink: 1;
}
}
/* --- Адаптация для planов/продуктов в мобилке --- */
@media (max-width: 480px){
.nut-hero__actions .btn{ flex:1; }
.nut-hero__actions{ width:100%; }
}
/* ============================================================
Этап 1: общая база продуктов — бейджи и блок похожих в модалке
============================================================ */
.nut-food__badge{
margin-left:6px;
vertical-align: middle;
white-space: nowrap;
}
/* Чекбокс «Поделиться» в форме продукта */
.nut-check{
display:flex;
align-items:flex-start;
gap:10px;
padding:10px 12px;
border-radius:12px;
background: color-mix(in oklab, var(--chip) 55%, transparent);
cursor:pointer;
user-select:none;
line-height:1.35;
}
.nut-check input[type="checkbox"]{
margin-top:3px;
flex:0 0 auto;
width:16px;
height:16px;
accent-color: var(--accent);
}
.nut-check > span{ flex:1; min-width:0; }
.nut-check .muted{ display:block; margin-top:2px; }
/* Подсказка «Похожие продукты уже есть» */
.nut-similar{
margin-top:-4px;
padding:10px 12px;
border:1px dashed color-mix(in oklab, var(--accent) 45%, transparent);
border-radius:12px;
background: color-mix(in oklab, var(--accent) 8%, transparent);
}
.nut-similar__hint{ margin-bottom:6px; }
.nut-similar__list{
list-style:none;
margin:0;
padding:0;
display:flex;
flex-direction:column;
gap:4px;
}
.nut-similar__item{
width:100%;
text-align:left;
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding:8px 10px;
border-radius:10px;
border:1px solid transparent;
background: color-mix(in oklab, var(--chip) 70%, transparent);
color:inherit;
cursor:pointer;
font: inherit;
transition: background .15s ease, border-color .15s ease;
}
.nut-similar__item:hover,
.nut-similar__item:focus-visible{
background: color-mix(in oklab, var(--chip) 95%, transparent);
border-color: color-mix(in oklab, var(--accent) 55%, transparent);
outline:none;
}
.nut-similar__name{ font-weight:600; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nut-similar__meta{ white-space:nowrap; }
/* ============================================================
Этап 2: рецепты (составные блюда)
============================================================ */
/* --- Список рецептов (сетка карточек, в духе .nut-foods-grid) --- */
.nut-recipes-grid{
display:grid; gap:10px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.nut-recipe{
display:flex; flex-direction:column; gap:6px;
padding:12px; border:1px solid var(--border); border-radius:12px; background: var(--surface);
transition: border-color .2s, box-shadow .2s;
}
.nut-recipe[data-mine="1"]{
border-color: color-mix(in oklab, var(--accent) 30%, var(--border));
}
.nut-recipe__head{ display:flex; gap:8px; align-items:center; justify-content:space-between; }
.nut-recipe__name{
font-weight:700;
display:flex; gap:6px; align-items:center; flex-wrap:wrap;
min-width:0; word-break:break-word;
}
.nut-recipe__name .chip{ font-size:11px; padding:3px 8px; }
.nut-recipe__meta{ display:flex; flex-wrap:wrap; gap:6px; }
.nut-recipe__actions{ display:flex; gap:6px; margin-top:6px; flex-wrap:wrap; }
/* --- Редактор рецепта: список строк ингредиентов --- */
.nut-form--recipe{ gap:12px; }
.nut-recipe-items{
display:flex; flex-direction:column; gap:8px;
padding:10px 12px;
border:1px dashed color-mix(in oklab, var(--border) 85%, transparent);
border-radius:12px;
background: color-mix(in oklab, var(--chip) 35%, transparent);
}
.nut-recipe-items__list{
display:flex; flex-direction:column; gap:8px;
}
.nut-recipe-items__empty{ padding:2px 2px 0; }
.nut-recipe-item{
display:grid; gap:8px; align-items:start;
grid-template-columns: minmax(0, 1.6fr) minmax(110px, 120px) minmax(0, 1.4fr) auto;
padding:8px 10px;
border:1px solid var(--border);
border-radius:10px;
background: var(--panel);
}
.nut-recipe-item .nut-autocomplete__drop{
/* выпадашка рядом с полем продукта — выравниваем ширину к полю */
left:0; right:0;
}
.nut-recipe-item__food{ min-width:0; }
.nut-recipe-item__grams{
display:flex; flex-direction:column; gap:4px;
font-size:12px; color: var(--muted);
}
.nut-recipe-item__calc{
align-self:center;
padding:6px 2px;
font-variant-numeric: tabular-nums;
min-width:0; overflow:hidden; text-overflow:ellipsis;
}
.nut-recipe-item__del{
align-self:center;
width:34px; height:34px; padding:0;
display:grid; place-items:center;
border-radius:8px;
line-height:1;
}
@media (max-width: 640px){
.nut-recipe-item{
/* на мобилке складываем в две строки: продукт — сверху, граммы + расчёт + удалить — снизу */
grid-template-columns: 1fr 110px auto;
grid-template-areas:
"food food food"
"grams calc del";
}
.nut-recipe-item__food { grid-area: food; }
.nut-recipe-item__grams { grid-area: grams; }
.nut-recipe-item__calc { grid-area: calc; }
.nut-recipe-item__del { grid-area: del; }
}
/* --- Итоги рецепта --- */
.nut-recipe-totals{
display:flex; flex-direction:column; gap:6px;
padding:10px 12px;
border:1px solid var(--border);
border-radius:12px;
background: color-mix(in oklab, var(--accent) 6%, transparent);
}
.nut-recipe-totals__row{
display:grid;
grid-template-columns: minmax(120px, auto) minmax(90px, auto) 1fr;
gap:10px; align-items:baseline;
font-variant-numeric: tabular-nums;
}
.nut-recipe-totals__row strong{ font-size:15px; }
@media (max-width: 520px){
.nut-recipe-totals__row{
grid-template-columns: 1fr auto;
grid-auto-rows: auto;
}
.nut-recipe-totals__row > :nth-child(3){ grid-column: 1 / -1; }
}
/* --- Просмотр состава рецепта --- */
.nut-form--recipe-view .nut-recipe-view__list{
list-style:none; margin:0; padding:0;
display:flex; flex-direction:column; gap:4px;
max-height: 42vh; overflow:auto;
border:1px solid var(--border);
border-radius:12px;
padding:6px;
background: var(--panel);
}
.nut-recipe-view__item{
padding:8px 10px;
border-radius:8px;
background: color-mix(in oklab, var(--chip) 60%, transparent);
}
.nut-recipe-view__name{ font-weight:600; }
/* ============================================================
Этап 3: цели БЖУ + калькулятор калорий (Mifflin-St Jeor)
============================================================ */
/* Сворачиваемый блок калькулятора */
.nut-calc{
border:1px dashed color-mix(in oklab, var(--accent) 45%, transparent);
border-radius:12px;
background: color-mix(in oklab, var(--accent) 6%, transparent);
}
.nut-calc > summary{
cursor:pointer;
list-style:none;
padding:10px 12px;
font-weight:600;
color: var(--text);
display:flex; align-items:center; gap:8px;
}
.nut-calc > summary::-webkit-details-marker{ display:none; }
.nut-calc > summary::before{
content:'▸';
display:inline-block;
transition: transform .15s ease;
color: var(--muted);
width:1em; text-align:center;
}
.nut-calc[open] > summary::before{ transform: rotate(90deg); }
.nut-calc__body{
padding: 4px 12px 12px;
display:flex; flex-direction:column; gap:8px;
}
/* ============================================================
* Flash-сообщения (.alert / .note) для auth-страниц.
*
* Используются на /login, /register, /password/forgot,
* /password/reset, /email/resend и др.
*
* Поддерживаются две формы разметки:
* 1) Простая — Текст
* 2) С действием —
*
*
* Цветовая палитра берётся из --danger / --accent, чтобы блоки
* попадали в общий тёмный/светлый стиль FitXP.
* ============================================================ */
.alert,
.note{
margin:0 0 14px;
padding:12px 14px;
border-radius:12px;
border:1px solid transparent;
font-size:14px;
line-height:1.45;
display:flex;
flex-direction:column;
gap:8px;
word-wrap:break-word;
}
.alert{
color: var(--danger);
background: color-mix(in oklab, var(--danger) 12%, transparent);
border-color: color-mix(in oklab, var(--danger) 35%, transparent);
}
.note{
color: var(--text);
background: color-mix(in oklab, var(--accent) 10%, transparent);
border-color: color-mix(in oklab, var(--accent) 30%, transparent);
}
.alert__text,
.note__text{
margin:0;
color: inherit;
}
/* Кнопка-ссылка действия (например, «Запросить новое письмо →»).
* Стилизуем как «pill»-кнопку, чтобы было очевидно, что это клик. */
.alert__action,
.note__action{
align-self:flex-start;
display:inline-flex;
align-items:center;
gap:6px;
padding:6px 12px;
border-radius:999px;
font-size:13px;
font-weight:600;
text-decoration:none;
border:1px solid currentColor;
background: transparent;
transition: background .15s ease, color .15s ease;
}
.alert__action{ color: var(--danger); }
.note__action { color: var(--accent); }
.alert__action:hover,
.alert__action:focus-visible{
background: var(--danger);
color: #fff;
outline:none;
}
.note__action:hover,
.note__action:focus-visible{
background: var(--accent);
color: #0b1220;
outline:none;
}
/* На широких экранах текст и кнопка действия становятся в строку,
* чтобы блок не выглядел «двухэтажным» при коротком тексте. */
@media (min-width: 520px){
.alert--with-action,
.note--with-action{
flex-direction:row;
align-items:center;
justify-content:space-between;
gap:14px;
}
.alert--with-action .alert__text,
.note--with-action .note__text { flex:1 1 auto; }
.alert--with-action .alert__action,
.note--with-action .note__action{ flex:0 0 auto; align-self:auto; }
}
/* ============================================================
* Виджет «Питание сегодня» на дашборде (.today-nut-card)
*
* Карточка показывает компактную сводку дня:
* - крупная цифра ккал и линейная полоса прогресса к цели плана;
* - три бара БЖУ (белки, углеводы, жиры) с подписями граммов и %;
* - бар воды.
*
* Цвета берутся из существующей палитры (--accent / --warn / --danger).
* Адаптив: на мобиле блоки складываются в один столбец.
* ============================================================ */
.today-nut-card{ display:flex; flex-direction:column; gap:12px; }
.today-nut__body{ display:flex; flex-direction:column; gap:14px; }
/* Большая цифра ккал слева, цель + полоса справа */
.today-nut__kcal{
display:flex; align-items:center; gap:16px;
padding:6px 0 2px;
}
.today-nut__kcal-num{
font-size:42px;
line-height:1;
font-weight:800;
color: var(--text);
letter-spacing:-0.01em;
flex:0 0 auto;
}
.today-nut__kcal-meta{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:6px; }
.today-nut__kcal-goal{ color: var(--muted); font-size:13px; }
.today-nut__kcal-goal strong{ color: var(--text); font-weight:700; }
.today-nut__kcal-bar{
height:8px; border-radius:999px; overflow:hidden;
background: color-mix(in oklab, var(--accent) 12%, transparent);
}
.today-nut__kcal-fill{
height:100%;
background: var(--accent);
border-radius:999px;
transition: width .25s ease;
}
/* Строка «Последний приём: …» — под прогрессом ккал.
Ненавязчивая, помогает оценить «движение по дню». */
.today-nut__last{
margin-top:2px;
font-size:12px;
line-height:1.35;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.today-nut__last strong{ color: var(--text); font-weight:700; }
/* Сетка БЖУ + вода: на десктопе 2 колонки, на мобиле 1 */
.today-nut__rows{
display:grid;
grid-template-columns: 1fr 1fr;
gap:10px 18px;
}
@media (max-width: 640px){
.today-nut__rows{ grid-template-columns: 1fr; }
.today-nut__kcal{ gap:12px; }
.today-nut__kcal-num{ font-size:36px; }
}
.today-nut__row{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.today-nut__row-head{
display:flex; justify-content:space-between; align-items:baseline; gap:8px;
font-size:13px;
}
.today-nut__row-label{ color: var(--text); font-weight:600; }
.today-nut__row-val{ color: var(--text); white-space:nowrap; }
.today-nut__bar{
height:6px; border-radius:999px; overflow:hidden;
background: color-mix(in oklab, var(--text) 8%, transparent);
}
.today-nut__bar-fill{
height:100%; border-radius:999px;
transition: width .25s ease;
background: var(--accent);
}
/* Цветовое кодирование макросов — совпадает с легендой графика "Динамика КБЖУ" */
.today-nut__row[data-kind="protein"] .today-nut__bar-fill{ background:#3b82f6; } /* blue */
.today-nut__row[data-kind="carbs"] .today-nut__bar-fill{ background:#f59e0b; } /* amber */
.today-nut__row[data-kind="fat"] .today-nut__bar-fill{ background:#ef4444; } /* red */
.today-nut__row[data-kind="water"] .today-nut__bar-fill{ background:#22d3ee; } /* cyan/accent */
/* Перебор цели: значение и процент красятся в опасный цвет.
Бар намеренно оставляем как есть (цвет по data-kind) — смысл несёт текст. */
.today-nut__row--over .today-nut__row-val,
.today-nut__row--over .today-nut__row-pct{ color: var(--danger, #EF4444); }
.today-nut__kcal--over .today-nut__kcal-num{ color: var(--danger, #EF4444); }
/* Состояния: пустой день / ошибка */
.today-nut__empty{
display:flex; align-items:center; justify-content:space-between;
gap:12px; flex-wrap:wrap;
padding:8px 0;
}
.today-nut__hint{
margin-top:4px;
padding-top:8px;
border-top:1px dashed var(--border);
}
/* Пока aria-busy="true" — лёгкая полупрозрачность тела карточки */
.today-nut-card[aria-busy="true"] .today-nut__body{ opacity:.6; }
/* ====================================================================
Strava-style dashboard (sport-energy)
Спортивный энерджи: крупная типографика, акцентные градиенты,
eyebrow caps с tabular-nums, sheen-узоры, scroll-snap chip-ленты.
==================================================================== */
/* --- Глобальные акценты раздела --- */
.page-dashboard .dash-grid--strava{ gap:14px; }
.page-dashboard .dash-grid--strava .card{ border-radius:18px; }
/* Eyebrow-метка: caps + tabular-nums + лёгкий accent. */
.eyebrow{
font-size:11px;
font-weight:700;
letter-spacing:.16em;
text-transform:uppercase;
color: color-mix(in oklab, var(--accent) 70%, var(--muted));
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
}
.eyebrow-title{
font-size:13px;
font-weight:800;
letter-spacing:.18em;
text-transform:uppercase;
color: var(--text);
}
/* --- Hero «командный центр» (Strava-style) ---------------------------
MOBILE-FIRST: базовые правила = смартфон. Дальше прогрессивные
улучшения через @media (min-width: ...). Структурно — 3 функциональных
блока: [identity] [today's focus] [week ring]. На мобильном они
укладываются в 2-строчную сетку, на десктопе — в 3 колонки. */
/* --- База: мобильный (≤519 px) --------------------------------------- */
.page-dashboard .hero-card--strava{
position:relative;
overflow:hidden;
padding: 12px 12px;
border:1px solid var(--dash-card-border);
background:
radial-gradient(700px 320px at 0% -20%, color-mix(in oklab, var(--accent) 18%, transparent) 0%, transparent 60%),
var(--card);
box-shadow: 0 12px 30px rgba(0,0,0,.14);
display:flex;
flex-direction:column;
gap: 10px;
}
/* :not(.hero-blob) — критично: blob должен оставаться position:absolute,
иначе он попадает во flex-flow колонки и физически растягивает карточку
на свои размеры. */
.page-dashboard .hero-card--strava > *:not(.hero-blob){ position:relative; z-index:1; }
/* Декоративный градиент-blob — мягкое свечение акцента у правого верхнего
угла. Не должен влиять на размер карточки. */
.hero-blob{
position:absolute; top:-40px; right:-30px;
width: 160px; height: 160px;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%,
color-mix(in oklab, var(--accent) 32%, transparent) 0%,
color-mix(in oklab, var(--accent) 10%, transparent) 45%,
transparent 70%);
filter: blur(6px);
pointer-events:none;
z-index:0;
}
/* Тело hero. Mobile-first: 2-строчная сетка [ident][ring] / [focus full-width] */
.hero-body{
display:grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas:
"ident ring"
"focus focus";
gap: 10px;
align-items: center;
}
.hero-card--strava .hero-ident{
grid-area: ident;
display:flex; gap:10px; align-items:center; min-width:0;
}
.hero-card--strava .hero-name-block{
display:flex; flex-direction:column; gap:4px; min-width:0;
}
.hero-card--strava .hero-title{
font-size: 18px;
line-height: 1.12;
font-weight: 800;
letter-spacing: -0.005em;
margin: 0;
font-family:"Manrope", system-ui, -apple-system, Segoe UI, Roboto, Inter;
font-variant-numeric: tabular-nums;
/* На узком экране имя может быть длинным — обрезаем вместо переноса */
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* --- Hero focus (центр на десктопе, нижний ряд на мобильном) ---------- */
.hero-focus{
grid-area: focus;
display:flex; flex-direction:column; gap:4px;
min-width: 0;
padding: 10px 12px;
background: color-mix(in oklab, var(--accent) 5%, transparent);
border: 1px solid color-mix(in oklab, var(--accent) 16%, var(--border));
border-radius: 12px;
position: relative;
}
.hero-focus--completed{
background: color-mix(in oklab, #22c55e 7%, transparent);
border-color: color-mix(in oklab, #22c55e 22%, var(--border));
}
.hero-focus--skipped{
background: color-mix(in oklab, #f59e0b 7%, transparent);
border-color: color-mix(in oklab, #f59e0b 24%, var(--border));
}
.hero-focus--empty{
background: color-mix(in oklab, var(--text) 4%, transparent);
border-color: var(--border);
border-style: dashed;
}
.hero-focus__head{
display:flex; align-items:center; gap:8px; flex-wrap:wrap;
margin-bottom: 0;
}
.hero-focus__title{
margin: 0;
font-family:"Manrope", system-ui, -apple-system, Segoe UI, Roboto, Inter;
font-weight: 800;
font-size: 15px;
line-height: 1.18;
letter-spacing: -0.003em;
color: var(--text);
}
/* На мобильном sub скрываем — заголовок и так понятен,
а sub занимает 2 строки и сдвигает CTA вниз. */
.hero-focus__sub{
display:none;
margin: 0;
font-size: 12.5px;
line-height: 1.35;
color: var(--muted);
}
.hero-focus__actions{
display:flex; gap:6px; flex-wrap:wrap;
margin-top: 6px;
}
.hero-focus__actions .btn--hero{
flex: 1 1 auto;
min-height: 38px;
padding: 0 14px;
font-size: 13px;
}
.hero-focus__actions .btn.subtle{ flex: 0 0 auto; min-height: 38px; padding: 0 12px; }
.hero-focus__next{
display:flex; gap:6px; flex-wrap:wrap; align-items:baseline;
margin-top: 6px; padding-top: 6px;
border-top: 1px dashed color-mix(in oklab, var(--border) 70%, transparent);
font-size: 11.5px;
color: var(--muted);
}
.hero-focus__next-lbl{ flex: 0 0 auto; font-size: 9.5px; }
.hero-focus__next-date{
flex: 0 0 auto;
color: var(--text); font-weight: 700;
font-variant-numeric: tabular-nums;
}
.hero-focus__next-title{
flex: 1 1 100%;
min-width: 0;
color: var(--text); font-weight: 600;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hero-focus__next-link{
flex: 0 0 auto;
color: var(--accent); font-weight: 700; text-decoration: none;
}
.hero-focus__next-link:hover{ text-decoration: underline; }
/* --- Hero week (правая колонка с кольцом) ----------------------------- */
.hero-week{
grid-area: ring;
display:flex; flex-direction:column; align-items:center; gap:6px;
min-width: 0;
}
/* Подсказка под кольцом скрыта на мобильном — там и так негде. */
.hero-week__hint{
display:none;
font-size: 12px;
color: var(--muted);
text-align: center;
max-width: 180px;
line-height: 1.35;
}
.hero-week__hint strong{
color: var(--text); font-weight: 800;
font-variant-numeric: tabular-nums;
}
/* Avatar gradient ring — двойная обводка через box-shadow. */
.avatar--ring{
position:relative;
width:44px; height:44px; max-width:44px; max-height:44px;
background-clip: padding-box;
border:2px solid transparent;
box-shadow:
0 0 0 2px var(--card),
0 0 0 4px color-mix(in oklab, var(--accent) 80%, transparent),
0 0 0 6px color-mix(in oklab, var(--accent) 22%, transparent),
0 6px 16px rgba(0,0,0,.18);
}
/* Streak-капсула. */
.streak-pill{
display:inline-flex; align-items:center; gap:6px;
align-self:flex-start;
padding:4px 10px 4px 8px;
background: linear-gradient(135deg,
color-mix(in oklab, var(--accent) 90%, #ff6a00 0%),
color-mix(in oklab, var(--accent) 55%, #ff8a00 30%));
color:#0E1113;
border-radius:999px;
font-weight:700;
letter-spacing:.04em;
font-size:11px;
text-transform:lowercase;
box-shadow: 0 4px 12px color-mix(in oklab, var(--accent) 28%, transparent);
}
.streak-pill__num{
font-size:14px; line-height:1; font-weight:800;
font-variant-numeric: tabular-nums;
font-family:"Manrope", system-ui, -apple-system, Segoe UI, Roboto, Inter;
}
.streak-pill__lbl{ letter-spacing:.04em; }
.streak-pill__fire{ font-size:12px; line-height:1; filter: drop-shadow(0 1px 0 rgba(0,0,0,.2)); }
.streak-pill--cold{
background: var(--chip);
color: var(--muted);
box-shadow:none;
border:1px dashed var(--border);
}
.hero-club-pill{
display:inline-flex;
align-items:center;
gap:8px;
width:max-content;
max-width:100%;
padding:6px 10px;
border:1px solid color-mix(in oklab, var(--accent) 22%, var(--border));
border-radius:999px;
background:color-mix(in oklab, var(--accent) 8%, var(--surface));
color:var(--text);
font-size:12px;
font-weight:800;
text-decoration:none;
}
.hero-club-pill img{ width:22px; height:22px; object-fit:contain; border-radius:6px; background:#fff; }
.club-page{ padding-bottom:calc(92px + env(safe-area-inset-bottom)); }
.club-hero__brand{ display:flex; align-items:center; gap:16px; min-width:0; }
.club-hero__description{ max-width:760px; margin-top:8px; color:var(--muted); }
.club-hero__logo{ width:74px; height:74px; border-radius:22px; object-fit:contain; background:#fff; border:1px solid var(--border); box-shadow:0 12px 30px rgba(15,23,42,.10); }
.club-hero__logo--empty{ display:grid; place-items:center; background:color-mix(in oklab, var(--accent) 12%, #fff); color:var(--accent); font-weight:950; }
.club-stats{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:16px 0; }
.club-stats article{ padding:16px; border:1px solid var(--border); border-radius:18px; background:var(--surface); }
.club-stats span{ display:block; color:var(--muted); font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; }
.club-stats strong{ display:block; margin-top:6px; font-size:28px; line-height:1; }
.club-events-grid,.club-trainers-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; }
.club-event-card,.club-trainer-card{ padding:16px; border:1px solid var(--border); border-radius:18px; background:var(--surface); }
.club-event-card{ display:grid; gap:7px; }
.club-event-card strong{ font-size:16px; }
.club-event-card p{ margin:3px 0 0; color:var(--muted); font-size:14px; }
.club-trainer-card{ display:flex; align-items:center; gap:12px; }
.club-trainer-card > span{ display:grid; place-items:center; flex:0 0 44px; width:44px; height:44px; border-radius:14px; background:color-mix(in oklab, var(--accent) 10%, var(--chip)); color:var(--accent); font-weight:950; }
.club-trainer-card strong,.club-trainer-card small{ display:block; }
.club-trainer-card small{ margin-top:3px; color:var(--muted); font-weight:800; }
@media (max-width:720px){ .club-stats{ grid-template-columns:repeat(2,minmax(0,1fr)); } .club-hero .trainer-client-hero__top{ align-items:flex-start; } .club-hero__logo{ width:62px; height:62px; border-radius:18px; } }
.leaderboards-page{ padding-bottom:calc(92px + env(safe-area-inset-bottom)); }
.leaderboards-page > section + section{ margin-top:18px; }
.leaderboards-hero .trainer-client-hero__top{ align-items:center; }
.leaderboard-tabs{ display:flex; flex-wrap:wrap; gap:8px; }
.leaderboard-club-context{ display:flex; align-items:center; gap:12px; margin:14px 0 0; padding:12px; border:1px solid color-mix(in oklab, var(--accent) 24%, var(--border)); border-radius:18px; background:linear-gradient(135deg, color-mix(in oklab, var(--accent) 9%, var(--surface)), var(--surface)); }
.leaderboard-club-context[hidden]{ display:none; }
.leaderboard-club-context__logo{ display:grid; place-items:center; flex:0 0 48px; width:48px; height:48px; border-radius:16px; object-fit:contain; background:#fff; border:1px solid color-mix(in oklab, var(--accent) 18%, var(--border)); box-shadow:0 10px 24px rgba(15,23,42,.08); }
.leaderboard-club-context__logo--empty{ background:color-mix(in oklab, var(--accent) 12%, #fff); color:var(--accent); font-weight:950; }
.leaderboard-club-context span,.leaderboard-club-context small{ display:block; color:var(--muted); font-size:12px; font-weight:800; }
.leaderboard-club-context strong{ display:block; margin:2px 0; font-size:17px; line-height:1.15; }
.leaderboard-list{ display:grid; gap:10px; }
.leaderboard-row{
display:grid;
grid-template-columns:auto minmax(0,1fr) auto;
gap:12px;
align-items:center;
padding:14px;
border:1px solid var(--border);
border-radius:18px;
background:var(--surface);
}
.leaderboard-row.is-me{ border-color:color-mix(in oklab, var(--accent) 34%, var(--border)); background:color-mix(in oklab, var(--accent) 7%, var(--surface)); }
.leaderboard-rank{ display:grid; place-items:center; min-width:42px; height:42px; border-radius:14px; background:var(--chip); color:var(--muted); font-weight:900; }
.leaderboard-row strong{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.leaderboard-row small{ display:block; margin-top:3px; color:var(--accent); font-weight:800; }
.leaderboard-row b{ font-variant-numeric:tabular-nums; }
.leaderboard-awards{ display:flex; flex-wrap:wrap; gap:5px; margin-top:6px; }
.leaderboard-awards span{ display:inline-flex; align-items:center; min-height:22px; padding:3px 8px; border-radius:999px; background:color-mix(in oklab, var(--accent) 12%, var(--surface)); color:var(--accent); font-size:12px; font-weight:900; }
.leaderboard-events{ display:grid; gap:12px; }
.leaderboard-event{ display:grid; gap:12px; padding:16px; border:1px solid var(--border); border-radius:20px; background:var(--surface); }
.leaderboard-event__head{ display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.leaderboard-event__head .title{ margin:2px 0 4px; }
.leaderboard-event-consent{ display:grid; gap:8px; padding:12px; border:1px solid color-mix(in oklab, var(--accent) 24%, var(--border)); border-radius:16px; background:color-mix(in oklab, var(--accent) 7%, var(--surface)); }
.leaderboard-event-consent strong{ font-size:14px; }
.leaderboard-event-consent span{ color:var(--muted); font-size:13px; line-height:1.45; }
.leaderboard-event-consent.is-joined{ border-color:color-mix(in oklab, var(--accent) 34%, var(--border)); }
.leaderboard-event-consent__actions{ display:flex; flex-wrap:wrap; gap:8px; }
.weight-progress-head{ display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.weight-progress-days{ flex:0 0 auto; padding:5px 9px; border-radius:999px; background:color-mix(in oklab, var(--accent) 12%, var(--surface)); color:var(--accent); font-size:12px; font-style:normal; font-weight:900; }
.weight-progress-days.is-soon{ background:color-mix(in oklab, #f59e0b 16%, var(--surface)); color:#b45309; }
.weight-progress-card{ display:grid; gap:7px; padding:10px; border-radius:14px; background:color-mix(in oklab, var(--surface) 78%, #fff); border:1px solid color-mix(in oklab, var(--accent) 14%, var(--border)); }
.weight-progress-card > span{ color:var(--muted); font-size:12px; font-weight:800; }
.weight-progress-card > strong{ font-size:22px; line-height:1; }
.weight-progress-value{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.weight-pace-badge{ display:inline-flex; align-items:center; min-height:22px; padding:3px 9px; border-radius:999px; font-size:12px; font-weight:900; }
.weight-pace-badge.is-healthy{ background:color-mix(in oklab, #16a34a 16%, var(--surface)); color:#15803d; }
.weight-pace-badge.is-fast{ background:color-mix(in oklab, #f59e0b 16%, var(--surface)); color:#b45309; }
.weight-progress-spark{ margin-top:2px; }
.weight-progress-spark svg{ display:block; width:100%; height:auto; overflow:visible; }
.weight-progress-spark__line{ fill:none; stroke:var(--accent); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.weight-progress-spark__dot{ fill:var(--accent); stroke:var(--surface); stroke-width:1.5; }
.weight-milestones{ display:flex; flex-wrap:wrap; gap:6px; margin-top:2px; }
.weight-milestone{ display:inline-flex; align-items:center; min-height:22px; padding:3px 9px; border-radius:999px; border:1px dashed var(--border); background:var(--chip); color:var(--muted); font-size:12px; font-weight:800; font-variant-numeric:tabular-nums; transition:background .2s ease, color .2s ease, border-color .2s ease; }
.weight-milestone.is-reached{ border-style:solid; border-color:color-mix(in oklab, #16a34a 36%, var(--border)); background:color-mix(in oklab, #16a34a 14%, var(--surface)); color:#15803d; animation:weightMilestonePop .32s ease; }
@keyframes weightMilestonePop{ 0%{ transform:scale(.9); } 60%{ transform:scale(1.06); } 100%{ transform:scale(1); } }
@media (prefers-reduced-motion: reduce){ .weight-milestone.is-reached{ animation:none; } }
/* 2.2 — раскрывающийся блок «Как считается». */
.weight-calc{ margin-top:2px; font-size:12px; }
.weight-calc > summary{ cursor:pointer; color:var(--accent); font-weight:800; list-style:none; -webkit-tap-highlight-color:transparent; }
.weight-calc > summary::-webkit-details-marker{ display:none; }
.weight-calc > summary::before{ content:"▸"; display:inline-block; margin-right:5px; transition:transform .2s ease; }
.weight-calc[open] > summary::before{ transform:rotate(90deg); }
.weight-calc__body{ display:grid; gap:4px; margin-top:6px; padding:8px 10px; border-radius:12px; background:color-mix(in oklab, var(--surface) 84%, #fff); border:1px solid var(--border); }
.weight-calc__body p{ margin:0; line-height:1.5; font-variant-numeric:tabular-nums; }
/* 2.3 — баннер о «протухшем» стартовом весе. */
.weight-stale-banner{ padding:8px 11px; border-radius:12px; font-size:12px; font-weight:700; line-height:1.45; background:color-mix(in oklab, #f59e0b 14%, var(--surface)); color:#b45309; border:1px solid color-mix(in oklab, #f59e0b 32%, var(--border)); }
@media (prefers-reduced-motion: reduce){ .weight-calc > summary::before{ transition:none; } }
.leaderboard-event__results{ display:grid; gap:8px; padding-top:8px; border-top:1px solid var(--border); }
/* Hero CTA — крупная градиентная кнопка. */
.btn--hero{
min-height: 38px;
padding: 0 14px;
font-size: 13px;
font-weight: 800;
letter-spacing:.02em;
border-radius: 12px;
box-shadow: 0 6px 18px color-mix(in oklab, var(--accent) 24%, transparent);
}
.btn--hero .icon{ width:16px; height:16px; }
/* --- Hero ring (используется внутри .hero-week) ---------------------- */
.hero-ring{
position:relative;
width: 78px; height: 78px;
display:grid; place-items:center;
filter: drop-shadow(0 6px 14px color-mix(in oklab, var(--accent) 18%, transparent));
}
.hero-ring__svg{ width:100%; height:100%; transform: rotate(0deg); }
.hero-ring__track{
stroke: color-mix(in oklab, var(--text) 8%, var(--panel));
}
.hero-ring__bar{
transition: stroke-dashoffset .8s cubic-bezier(.2,.7,.2,1);
}
.hero-ring__center{
position:absolute; inset:0;
display:flex; flex-direction:column; align-items:center; justify-content:center;
gap:1px;
pointer-events:none;
}
.hero-ring__num{
font-family:"Manrope", system-ui, -apple-system, Segoe UI, Roboto, Inter;
font-size: 19px; line-height:1; font-weight:800;
font-variant-numeric: tabular-nums;
letter-spacing:-0.02em;
background: linear-gradient(135deg, var(--accent), #06b6d4);
-webkit-background-clip: text; background-clip: text;
color: transparent;
}
.hero-ring__den{
font-size: 11px;
color: var(--muted);
-webkit-text-fill-color: var(--muted);
margin-left: 1px;
font-weight: 700;
}
.hero-ring__lbl{ font-size: 8.5px; letter-spacing:.12em; }
/* --- ≥520 px: planshet/large phone landscape ------------------------- */
@media (min-width: 520px){
.page-dashboard .hero-card--strava{
padding: 14px 16px;
gap: 12px;
}
.hero-body{ gap: 12px; }
.hero-card--strava .hero-ident{ gap: 12px; }
.hero-card--strava .hero-name-block{ gap: 5px; }
.hero-card--strava .hero-title{ font-size: 22px; white-space: normal; overflow: visible; }
.hero-focus{ padding: 12px 14px; gap: 5px; }
.hero-focus__title{ font-size: 17px; }
.hero-focus__sub{ display:block; font-size: 12.5px; }
.hero-focus__actions{ gap: 8px; }
.hero-focus__actions .btn--hero{ flex: 0 1 auto; min-height: 40px; padding: 0 16px; font-size: 13.5px; }
.hero-focus__next{ font-size: 12px; }
.hero-focus__next-title{ flex: 1 1 auto; }
.avatar--ring{ width:50px; height:50px; max-width:50px; max-height:50px; }
.streak-pill{ padding:5px 11px 5px 9px; font-size:12px; }
.streak-pill__num{ font-size:15px; }
.streak-pill__fire{ font-size:13px; }
.hero-ring{ width: 100px; height: 100px; }
.hero-ring__num{ font-size: 24px; }
.hero-ring__den{ font-size: 13px; }
.hero-ring__lbl{ font-size: 9.5px; letter-spacing:.14em; }
.btn--hero{ min-height: 42px; padding: 0 16px; font-size: 13.5px; }
.btn--hero .icon{ width:17px; height:17px; }
.hero-blob{
width: 200px; height: 200px;
top:-50px; right:-35px;
}
}
/* --- ≥900 px: десктоп — раскладываем 3 колонки ----------------------- */
@media (min-width: 900px){
.page-dashboard .hero-card--strava{
padding: 18px 22px;
gap: 14px;
}
/* На десктопе превращаем 2-строчную сетку в реальные 3 колонки.
grid-area нужно отменить, чтобы grid-template-columns заработал. */
.hero-body{
grid-template-columns: minmax(220px, 1fr) minmax(280px, 1.7fr) auto;
grid-template-areas: none;
gap: 22px;
align-items: center;
}
.hero-card--strava .hero-ident,
.hero-focus,
.hero-week{ grid-area: auto; }
.hero-card--strava .hero-title{ font-size: clamp(20px, 2.4vw, 26px); }
.hero-focus{ padding: 14px 16px; gap: 6px; border-radius: 14px; }
.hero-focus__head{ gap: 10px; margin-bottom: 2px; }
.hero-focus__title{ font-size: clamp(15px, 1.5vw, 19px); line-height: 1.2; }
.hero-focus__actions{ margin-top: 6px; }
.hero-focus__actions .btn--hero{ flex: 0 0 auto; min-height: 40px; padding: 0 18px; font-size: 14px; }
.hero-focus__next{ margin-top: 8px; padding-top: 8px; }
.hero-week{ gap: 8px; }
.hero-week__hint{ display:block; }
.avatar--ring{ width:56px; height:56px; max-width:56px; max-height:56px; }
.streak-pill{ padding:6px 12px 6px 10px; }
.streak-pill__num{ font-size:16px; }
.streak-pill__fire{ font-size:14px; }
.hero-ring{ width: 132px; height: 132px; }
.hero-ring__num{ font-size: 32px; }
.hero-ring__den{ font-size: 16px; }
.hero-ring__lbl{ font-size: 10px; letter-spacing:.16em; }
.btn--hero{ min-height: 44px; padding: 0 18px; font-size: 14px; }
.btn--hero .icon{ width:18px; height:18px; }
.hero-blob{
width: 240px; height: 240px;
top:-60px; right:-40px;
}
}
/* --- Stat-strip (P3) -------------------------------------------------- */
.stat-strip{
display:grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 10px;
padding: 0;
background: transparent;
border: none;
margin-bottom: 16px;
}
.stat-chip{
display:flex; align-items:center; gap:10px;
padding: 12px 14px;
background: var(--card);
border: 1px solid var(--border);
border-radius: 14px;
position: relative;
overflow: hidden;
transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.stat-chip::before{
content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
background: var(--accent); opacity:.65;
}
.stat-chip[data-kind="best"]::before { background: linear-gradient(180deg,#f59e0b,#fb923c); }
.stat-chip[data-kind="streak"]::before { background: linear-gradient(180deg,#ff7a3a,#ef4444); }
.stat-chip[data-kind="week"]::before { background: linear-gradient(180deg,#06b6d4,#3b82f6); }
.stat-chip[data-kind="total"]::before { background: linear-gradient(180deg, var(--accent), #06b6d4); }
.stat-chip[data-kind="planned"]::before { background: linear-gradient(180deg,#a78bfa,#7c3aed); }
.stat-chip:hover{
transform: translateY(-1px);
border-color: color-mix(in oklab, var(--accent) 32%, var(--border));
box-shadow: 0 10px 24px rgba(0,0,0,.18);
}
.stat-chip__num{
font-size: 22px;
line-height: 1;
font-weight: 800;
font-family:"Manrope", system-ui, -apple-system, Segoe UI, Roboto, Inter;
font-variant-numeric: tabular-nums;
color: var(--text);
min-width: 28px;
}
.stat-chip__meta{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.stat-chip__lbl{ font-size: 12px; font-weight: 700; color: var(--text); letter-spacing:.04em; }
.stat-chip__unit{ font-size: 11px; color: var(--muted); letter-spacing:.06em; text-transform: lowercase; }
@media (max-width: 900px){
.stat-strip{
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
padding: 2px 14px 6px 14px;
margin-left: -14px; margin-right: -14px;
scrollbar-width: none;
}
.stat-strip::-webkit-scrollbar{ display:none; }
.stat-chip{
flex: 0 0 auto;
min-width: 144px;
scroll-snap-align: start;
}
}
/* --- Focus-карточка дня (P2) ---------------------------------------- */
.focus-card{
position:relative;
overflow:hidden;
padding: 20px 22px 18px;
border-radius: 18px;
background:
radial-gradient(420px 220px at 100% 0%, color-mix(in oklab, var(--accent) 18%, transparent) 0%, transparent 60%),
var(--card);
border: 1px solid color-mix(in oklab, var(--accent) 18%, var(--border));
}
.focus-card--scheduled{
background:
radial-gradient(520px 260px at 100% 0%, color-mix(in oklab, var(--accent) 26%, transparent) 0%, transparent 60%),
var(--card);
border-color: color-mix(in oklab, var(--accent) 32%, var(--border));
}
.focus-card--completed{
background:
radial-gradient(420px 220px at 100% 0%, color-mix(in oklab, var(--success, #22c55e) 18%, transparent) 0%, transparent 60%),
var(--card);
border-color: color-mix(in oklab, var(--success, #22c55e) 28%, var(--border));
}
.focus-card--skipped{
background:
radial-gradient(420px 220px at 100% 0%, color-mix(in oklab, var(--danger, #ef4444) 14%, transparent) 0%, transparent 60%),
var(--card);
border-color: color-mix(in oklab, var(--danger, #ef4444) 26%, var(--border));
}
.focus-card__head{
display:flex; align-items:center; justify-content:space-between; gap:10px;
margin-bottom: 8px;
}
.focus-card__title{
font-family:"Manrope", system-ui, -apple-system, Segoe UI, Roboto, Inter;
font-size: clamp(22px, 3vw, 28px);
line-height: 1.15;
font-weight: 800;
letter-spacing:-0.005em;
margin: 6px 0 4px;
}
.focus-card__sub{ margin: 0 0 14px; font-size: 14px; }
.focus-pill{
display:inline-flex; align-items:center;
font-size: 11px; font-weight: 800; letter-spacing:.14em;
padding: 5px 10px; border-radius: 999px;
text-transform: uppercase;
font-variant-numeric: tabular-nums;
}
.focus-pill--live{
color:#0E1113;
background: linear-gradient(135deg, var(--accent), color-mix(in oklab, var(--accent) 50%, #06b6d4 50%));
box-shadow: 0 6px 14px color-mix(in oklab, var(--accent) 32%, transparent);
}
.focus-pill--ok{
color: var(--success, #22c55e);
background: color-mix(in oklab, var(--success, #22c55e) 16%, transparent);
border:1px solid color-mix(in oklab, var(--success, #22c55e) 28%, var(--border));
}
.focus-pill--miss{
color: var(--danger, #ef4444);
background: color-mix(in oklab, var(--danger, #ef4444) 14%, transparent);
border:1px solid color-mix(in oklab, var(--danger, #ef4444) 26%, var(--border));
}
.focus-card__cta-row{
display:flex; align-items:center; gap:10px; flex-wrap:wrap;
margin-top:6px;
}
.btn--focus{
min-height: 56px;
padding: 0 22px;
font-size: 16px;
font-weight: 800;
letter-spacing:.02em;
border-radius: 14px;
box-shadow: 0 14px 32px color-mix(in oklab, var(--accent) 28%, transparent);
}
.btn--focus .icon{ width:20px; height:20px; }
.focus-next{
display:flex; align-items:center; gap:10px; flex-wrap:wrap;
margin-top: 16px;
padding-top: 12px;
border-top: 1px dashed var(--border);
font-size: 13px;
}
.focus-next__lbl{ flex: 0 0 auto; }
.focus-next__date{
display:inline-flex; align-items:center;
padding: 4px 10px; border-radius: 999px;
background: color-mix(in oklab, var(--accent) 12%, var(--chip));
color: var(--text);
font-weight: 700;
font-variant-numeric: tabular-nums;
letter-spacing:.04em;
}
.focus-next__title{ font-weight: 700; min-width: 0; flex: 1 1 auto; }
.focus-next__link{
margin-left:auto;
color: var(--accent);
font-weight: 700;
text-decoration: none;
}
.focus-next__link:hover{ text-decoration: underline; }
@media (max-width: 720px){
.focus-card{ padding: 16px 16px 14px; }
.btn--focus{ width: 100%; }
}
/* --- Quick-actions chip-style (P5) ----------------------------------- */
.quick-actions--chip .qa-grid{
display:grid; gap:10px; margin-top:10px;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
@media (max-width: 960px){ .quick-actions--chip .qa-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px){ .quick-actions--chip .qa-grid{ grid-template-columns: 1fr 1fr; } }
.quick-actions--chip .qa-item{
position: relative;
grid-template-columns: 38px 1fr;
gap: 10px;
padding: 10px 12px;
border-radius: 14px;
background: color-mix(in oklab, var(--card) 88%, transparent);
border: 1px solid var(--border);
transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.quick-actions--chip .qa-item:hover{
transform: translateY(-2px) scale(1.01);
border-color: color-mix(in oklab, var(--accent) 36%, var(--border));
box-shadow: 0 14px 32px rgba(0,0,0,.20);
}
.quick-actions--chip .qa-ico{
width:38px; height:38px; border-radius:11px;
}
.quick-actions--chip .qa-ico .icon{ width:20px; height:20px; }
/* Цветные акценты для разных действий — спортивная палитра. */
.quick-actions--chip .qa-item--plan .qa-ico{ background: color-mix(in oklab, #06b6d4 16%, var(--chip)); color:#22d3ee; border-color: color-mix(in oklab, #06b6d4 32%, var(--border)); }
.quick-actions--chip .qa-item--measure .qa-ico{ background: color-mix(in oklab, #a78bfa 14%, var(--chip)); color:#c4b5fd; border-color: color-mix(in oklab, #a78bfa 28%, var(--border)); }
.quick-actions--chip .qa-item--nut .qa-ico{ background: color-mix(in oklab, #f59e0b 14%, var(--chip)); color:#fbbf24; border-color: color-mix(in oklab, #f59e0b 28%, var(--border)); }
.quick-actions--chip .qa-item--ex .qa-ico{ background: color-mix(in oklab, var(--accent) 16%, var(--chip)); color: var(--accent); border-color: color-mix(in oklab, var(--accent) 32%, var(--border)); }
.quick-actions--chip .qa-item--trainer-chat .qa-ico{ background: color-mix(in oklab, #10b981 18%, var(--chip)); color:#34d399; border-color: color-mix(in oklab, #10b981 34%, var(--border)); }
/* --- Pulse-карточка (P4) --------------------------------------------- */
.pulse-card .gam-hero__num{
font-size: clamp(40px, 6vw, 56px);
font-variant-numeric: tabular-nums;
background: linear-gradient(135deg, var(--accent), color-mix(in oklab, var(--accent) 40%, #06b6d4 60%));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: none;
letter-spacing:-0.02em;
}
.pulse-card .gam-hero__label{
color: color-mix(in oklab, var(--accent) 65%, var(--muted));
}
.pulse-card .gam-progress{
height: 16px;
background: color-mix(in oklab, var(--text) 6%, var(--panel));
}
/* Сегментированный прогресс: 4 «деления» сверху (5 сегментов 20% каждый). */
.gam-progress--segmented{ position: relative; }
.gam-progress--segmented .gam-progress__seg{
position:absolute; top:0; bottom:0; width:1px;
background: color-mix(in oklab, var(--text) 18%, transparent);
pointer-events:none;
z-index:1;
}
.gam-progress--segmented .gam-progress__seg:nth-of-type(1){ left:20%; }
.gam-progress--segmented .gam-progress__seg:nth-of-type(2){ left:40%; }
.gam-progress--segmented .gam-progress__seg:nth-of-type(3){ left:60%; }
.gam-progress--segmented .gam-progress__seg:nth-of-type(4){ left:80%; }
/* Heatmap-блок: сетка ячеек + ось «N дн. назад → сегодня».
Подписи дней недели не используем — данные не выровнены по понедельнику. */
.heatmap-wrap{ margin-top: 10px; display:flex; flex-direction:column; gap:6px; }
.heatmap-axis{
display:flex; align-items:center; justify-content:space-between;
font-size: 10px;
letter-spacing:.08em;
color: var(--muted);
text-transform: uppercase;
font-variant-numeric: tabular-nums;
padding: 0 2px;
}
.heatmap-axis__arr{ flex: 0 0 auto; opacity:.6; }
/* Heatmap-grid: 2 ряда × 7 столбцов, ячейки растягиваются по сетке. */
.heatmap--grid{
display:grid;
grid-template-columns: repeat(7, 1fr);
grid-auto-rows: 28px;
gap: 6px;
grid-auto-flow: row;
}
.heatmap--grid .heatmap__cell{
width: auto;
height: 28px;
border-radius: 6px;
}
/* --- Глобальный полиш дашборда (P7) --------------------------------- */
/* Все цифры в типичных «спортивных» местах — tabular-nums.
Это убирает «прыжки» при анимации/обновлении значений. */
.page-dashboard .hero-title,
.page-dashboard .focus-card__title,
.page-dashboard .gam-hero__num,
.page-dashboard .stat-chip__num,
.page-dashboard .today-nut__kcal-num,
.page-dashboard .streak-num,
.page-dashboard .focus-pill,
.page-dashboard .streak-pill__num{
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
}
/* Карточки появляются с лёгким fade-up — поддерживается prefers-reduced-motion ниже. */
.page-dashboard .dash-grid--strava .stat-strip{ animation: dashFade .45s ease both; animation-delay:.05s; }
.page-dashboard .dash-grid--strava .focus-card{ animation: dashFade .45s ease both; animation-delay:.10s; }
.page-dashboard .dash-grid--strava .quick-actions{ animation: dashFade .45s ease both; animation-delay:.15s; }
.page-dashboard .dash-grid--strava .today-nut-card{ animation: dashFade .45s ease both; animation-delay:.20s; }
.page-dashboard .dash-grid--strava .pulse-card{ animation: dashFade .45s ease both; animation-delay:.25s; }
@media (prefers-reduced-motion: reduce){
.page-dashboard .hero-card--strava::before,
.page-dashboard .hero-chevrons{ display:none !important; }
.page-dashboard .dash-grid--strava .stat-strip,
.page-dashboard .dash-grid--strava .focus-card,
.page-dashboard .dash-grid--strava .quick-actions,
.page-dashboard .dash-grid--strava .today-nut-card,
.page-dashboard .dash-grid--strava .pulse-card{ animation: none !important; }
.stat-chip:hover,
.quick-actions--chip .qa-item:hover{ transform: none !important; }
}
/* ============================================================
MEASUREMENTS PAGE
Единый стиль с остальным приложением:
.card, .btn, .chip-seg, переменные темы.
============================================================ */
/* Глобальный фикс: контейнер графика должен иметь высоту,
иначе Chart.js с maintainAspectRatio:false схлопывается в 0px.
Используется в /measurements, /progress, /trainer, /nutrition. */
.chart-wrap{
position: relative;
width: 100%;
height: 320px;
margin-top: 8px;
}
@media (max-width: 640px){
.chart-wrap{ height: 260px; }
}
/* --- HERO с KPI -------------------------------------------------- */
.meas-hero__head{
display:flex; align-items:flex-start; justify-content:space-between;
gap:12px; flex-wrap:wrap; margin-bottom:14px;
}
.meas-hero__title{ margin:0 0 4px; }
.meas-hero__cta{
display:inline-flex; align-items:center; gap:8px;
white-space:nowrap;
}
.meas-hero__cta .icon{ width:18px; height:18px; }
.meas-kpi{
display:grid; gap:10px;
grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (min-width: 720px){
.meas-kpi{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}
.meas-kpi__cell{
background: color-mix(in oklab, var(--card) 70%, transparent);
border:1px solid var(--border);
border-radius:14px;
padding:12px 14px;
display:flex; flex-direction:column; gap:4px;
min-width:0;
}
.meas-kpi__label{
font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
}
.meas-kpi__num{
font-size:24px; font-weight:800;
font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
line-height:1.1;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.meas-kpi__num.is-up{ color: color-mix(in oklab, var(--warn) 85%, var(--text)); }
.meas-kpi__num.is-down{ color: color-mix(in oklab, var(--ok) 85%, var(--text)); }
.meas-kpi__hint{ font-size:12px; color:var(--muted); }
/* --- CHART head -------------------------------------------------- */
.meas-chart-head{
display:flex; align-items:center; justify-content:space-between;
gap:12px; flex-wrap:wrap; margin-bottom:8px;
}
.meas-chart-head .title{ margin:0; }
.meas-chart-head .chip-seg{ margin:0; max-width:100%; }
.meas-period{ margin: 4px 0 8px !important; opacity:.95; }
.meas-period .chip-seg__item{ font-size:12px; padding:5px 10px; }
.meas-empty{
margin-top: 10px;
padding: 14px;
border: 1px dashed var(--border);
border-radius: 12px;
color: var(--muted);
text-align: center;
background: color-mix(in oklab, var(--chip) 10%, transparent);
}
.meas-empty--big{ padding: 22px; }
.meas-empty--big strong{ color: var(--text); font-size: 15px; }
/* --- FORM ------------------------------------------------------- */
.meas-form{ display:flex; flex-direction:column; gap:12px; }
.meas-form__row{
display:grid; gap:10px;
grid-template-columns: 1fr 1fr;
}
@media (min-width: 720px){
.meas-form__row{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}
.meas-field{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.meas-field--full{ grid-column: 1/-1; }
.meas-field__label{
font-size:12px; color:var(--muted); font-weight:600; letter-spacing:.02em;
}
.meas-field input,
.meas-field textarea{
width:100%;
}
.meas-field textarea{
resize: vertical; min-height: 64px; font: inherit; line-height:1.45;
}
/* details "Дополнительные обхваты" */
.meas-extra{
border:1px solid var(--border); border-radius:12px;
background: color-mix(in oklab, var(--chip) 12%, transparent);
}
.meas-extra > summary{
cursor:pointer; list-style:none;
padding: 10px 14px;
display:flex; align-items:center; justify-content:space-between;
font-weight:600; color:var(--text);
user-select:none;
}
.meas-extra > summary::-webkit-details-marker{ display:none; }
.meas-extra__chev{
width:16px; height:16px; color:var(--muted);
transition: transform .2s ease;
}
.meas-extra[open] .meas-extra__chev{ transform: rotate(180deg); color: var(--accent); }
.meas-extra .meas-form__row--extra{
padding: 4px 14px 14px;
}
.meas-form__actions{
display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.meas-form__hint{ flex: 1 1 200px; min-width: 0; }
.page-measurements .card.is-editing{
border-color: color-mix(in oklab, var(--accent) 50%, var(--border));
box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 18%, transparent);
}
/* --- HISTORY LIST ----------------------------------------------- */
.meas-list-head{
display:flex; align-items:baseline; justify-content:space-between;
gap:12px; margin-bottom:8px;
}
.meas-list-head .title{ margin:0; }
.meas-row{
display:grid;
grid-template-columns: 64px 1fr auto;
gap:12px; align-items:center;
padding: 12px;
border:1px solid var(--border);
border-radius:14px;
background: color-mix(in oklab, var(--card) 80%, transparent);
margin-bottom: 8px;
transition: border-color .15s, transform .12s;
}
.meas-row:hover{
border-color: color-mix(in oklab, var(--accent) 35%, var(--border));
}
.meas-row__date{
text-align:center;
background: color-mix(in oklab, var(--accent) 12%, var(--panel));
border:1px solid color-mix(in oklab, var(--accent) 22%, var(--border));
border-radius:12px;
padding: 8px 6px;
min-width:0;
}
.meas-row__day{
font-weight:800; font-size:14px;
font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
white-space:nowrap;
}
.meas-row__year{ font-size:11px; }
.meas-row__body{ min-width:0; }
.meas-row__chips{
display:flex; flex-wrap:wrap; gap:6px;
}
.meas-row__chip{
font-size:12px;
padding: 4px 10px;
border-radius: 999px;
background: var(--chip);
color: var(--muted);
border: 1px solid var(--border);
white-space: nowrap;
}
.meas-row__chip b{ color: var(--text); font-weight:700; }
.meas-row__notes{ margin-top:6px; line-height:1.4; word-break:break-word; }
.meas-row__actions{
display:flex; gap:6px;
}
.meas-row__actions .btn.subtle.small{
width: 36px; height: 36px; padding: 0;
display:inline-flex; align-items:center; justify-content:center;
border-radius: 10px;
}
.meas-row__actions .btn.subtle.small .icon{
width: 16px; height: 16px;
}
.meas-row__del{
color: color-mix(in oklab, var(--danger) 70%, var(--text));
}
.meas-row__del:hover{
background: color-mix(in oklab, var(--danger) 14%, var(--chip));
}
/* Адаптив: на узких экранах строка истории — двух-рядная,
а кнопки уезжают вниз справа. */
@media (max-width: 540px){
.meas-row{
grid-template-columns: 56px 1fr;
grid-template-areas:
"date body"
"actions actions";
gap: 10px;
}
.meas-row__date{ grid-area: date; }
.meas-row__body{ grid-area: body; }
.meas-row__actions{ grid-area: actions; justify-self: end; }
.meas-row__chip{ font-size: 11.5px; padding: 3px 8px; }
}
@media (max-width: 380px){
.meas-hero__cta{ width: 100%; justify-content:center; }
.meas-kpi{ grid-template-columns: 1fr 1fr; }
.meas-kpi__num{ font-size: 20px; }
}
/* Toast: лёгкий красный акцент при ошибке */
.toast.is-err{
border-color: color-mix(in oklab, var(--danger) 50%, var(--border));
color: color-mix(in oklab, var(--danger) 30%, var(--text));
}
/* --- GUIDE / Инструкция по замерам (collapsible) ---------------- */
.meas-guide{
/* Карточка-`details`: убираем стандартный padding у details, чтобы
summary был кликабелен по всей ширине, а padding оставался у card. */
padding: 0;
overflow: hidden;
}
.meas-guide > .meas-guide__sum{
list-style: none;
cursor: pointer;
user-select: none;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 12px;
padding: 14px 16px;
}
.meas-guide > .meas-guide__sum::-webkit-details-marker{ display:none; }
.meas-guide__icon{
width: 22px; height: 22px;
color: var(--accent);
flex: 0 0 auto;
}
.meas-guide__sum-text{
display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.meas-guide__sum-title{ font-weight: 700; }
.meas-guide__chev{
width: 16px; height: 16px;
color: var(--muted);
transition: transform .2s ease;
}
.meas-guide[open] .meas-guide__chev{ transform: rotate(180deg); color: var(--accent); }
.meas-guide:hover{
border-color: color-mix(in oklab, var(--accent) 35%, var(--border));
}
.meas-guide__body{
padding: 4px 16px 16px;
border-top: 1px dashed var(--border);
}
.meas-guide__cols{
display: grid;
gap: 16px;
grid-template-columns: 1fr;
}
@media (min-width: 720px){
.meas-guide__cols{ grid-template-columns: 1fr 220px; align-items: start; }
}
.meas-guide__h{
margin: 14px 0 6px;
font-size: 13px;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--muted);
font-weight: 700;
}
.meas-guide__h:first-child{ margin-top: 4px; }
.meas-guide__ul,
.meas-guide__ol{
margin: 0;
padding-left: 22px;
line-height: 1.55;
}
.meas-guide__ul li,
.meas-guide__ol li{ margin: 2px 0; }
.meas-guide__ol li b{ color: var(--text); }
.meas-guide__note{
margin: 14px 0 0;
padding: 10px 12px;
border-left: 3px solid color-mix(in oklab, var(--accent) 60%, var(--border));
background: color-mix(in oklab, var(--accent) 6%, transparent);
border-radius: 0 8px 8px 0;
}
.meas-guide__figure{
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.meas-guide__image{
width: 100%;
max-width: 220px;
height: auto;
display: block;
}
.meas-guide__cap{ text-align: center; }
@media (max-width: 540px){
.meas-guide__image{ max-width: 180px; }
.meas-guide > .meas-guide__sum{ padding: 12px 14px; gap: 10px; }
.meas-guide__body{ padding: 4px 14px 14px; }
}
/* --- Компактная карточка-ссылка на настройки напоминания -------- */
.meas-remind-link{
background: color-mix(in oklab, var(--accent) 6%, var(--card));
border-color: color-mix(in oklab, var(--accent) 22%, var(--border));
}
.meas-remind-link__body{
display:flex; align-items:center; justify-content:space-between;
gap:12px; flex-wrap:wrap;
}
.meas-remind-link__title{
margin:0 0 4px;
display:flex; align-items:center; gap:8px;
font-size:16px; font-weight:700;
}
.meas-remind-link__title .icon{
width:18px; height:18px;
color: var(--accent);
}
.meas-remind-link .btn.subtle{
display:inline-flex; align-items:center; gap:8px;
white-space:nowrap;
}
.meas-remind-link .btn.subtle .icon{ width:16px; height:16px; }
/* ====================================================================
PROGRESS PAGE: глобальный селектор периода + KPI HERO
Используется на /progress.
==================================================================== */
/* --- Селектор периода: липкая полоса с чипами ---------------------- */
.prg-period{
position: sticky;
top: var(--sticky-top);
z-index: 20;
margin: 0 -16px 12px;
padding: 8px 16px;
background: color-mix(in oklab, var(--bg) 88%, transparent);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
border-bottom: 1px solid color-mix(in oklab, var(--border) 60%, transparent);
}
.prg-period__chips{
display: flex; gap: 6px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.prg-period__chips::-webkit-scrollbar{ display:none; }
.prg-chip{
flex: 0 0 auto;
background: var(--chip);
color: var(--text);
border: 1px solid transparent;
border-radius: 999px;
padding: 7px 14px;
font-size: 13px; font-weight: 600;
cursor: pointer;
transition: background-color .15s, color .15s, border-color .15s;
font-variant-numeric: tabular-nums;
}
.prg-chip:hover{ border-color: color-mix(in oklab, var(--accent) 30%, var(--border)); }
.prg-chip.is-active{
background: color-mix(in oklab, var(--accent) 18%, var(--card));
color: var(--accent);
border-color: color-mix(in oklab, var(--accent) 50%, transparent);
}
.prg-chip.is-locked{
position: relative;
color: var(--muted);
opacity: .62;
border-color: color-mix(in oklab, var(--border) 70%, transparent);
}
.prg-chip.is-locked::after{
content: 'Премиум';
margin-left: 6px;
font-size: 10px;
font-weight: 700;
color: var(--accent);
}
.prg-chip.is-locked:hover{
opacity: .86;
border-color: color-mix(in oklab, var(--accent) 35%, var(--border));
}
/* Кнопка экспорта в строке чипов — справа, не растягивает строку */
.prg-export{
margin-left: auto;
flex: 0 0 auto;
display: inline-flex; align-items: center; gap: 6px;
background: var(--chip);
color: var(--text);
border: 1px solid transparent;
border-radius: 999px;
padding: 6px 12px;
font-size: 13px; font-weight: 600;
text-decoration: none;
transition: background-color .15s, border-color .15s;
}
.prg-export:hover{
border-color: color-mix(in oklab, var(--accent) 35%, var(--border));
}
.prg-export .icon{ width: 14px; height: 14px; }
@media (max-width: 540px){
.prg-export span{ display: none; }
.prg-export{ padding: 6px 10px; }
}
/* --- HERO: 4 KPI-плитки -------------------------------------------- */
.prg-hero{
display: grid;
gap: 10px;
grid-template-columns: repeat(2, minmax(0,1fr));
margin-bottom: 16px;
}
@media (min-width: 720px){
.prg-hero{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}
.kpi-tile{
display: flex; align-items: flex-start; gap: 12px;
background: var(--card);
border: 1px solid var(--border);
border-radius: 14px;
padding: 14px;
box-shadow: 0 6px 18px rgba(0,0,0,.08);
transition: border-color .15s, transform .12s;
}
.kpi-tile:hover{
border-color: color-mix(in oklab, var(--accent) 30%, var(--border));
}
.kpi-icon{
flex: 0 0 auto;
width: 36px; height: 36px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 10px;
background: color-mix(in oklab, var(--accent) 14%, var(--panel));
color: var(--accent);
}
.kpi-icon .icon{ width: 18px; height: 18px; }
.kpi-body{ min-width: 0; flex: 1 1 auto; }
.kpi-label{
color: var(--muted);
font-size: 12px;
text-transform: uppercase;
letter-spacing: .04em;
font-weight: 700;
margin-bottom: 4px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kpi-value{
font-size: 26px; font-weight: 800; line-height: 1.05;
color: var(--text);
font-family: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Inter;
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
letter-spacing: -0.01em;
display: inline-flex; align-items: baseline; gap: 4px;
}
.kpi-unit{
font-size: 13px; font-weight: 600;
color: var(--muted);
letter-spacing: 0;
}
.kpi-sub{
margin-top: 6px;
font-size: 12px;
display: inline-flex; align-items: center; gap: 4px;
font-variant-numeric: tabular-nums;
}
.kpi-sub.is-pos{ color: var(--ok); font-weight: 600; }
.kpi-sub.is-neg{ color: var(--danger); font-weight: 600; }
.kpi-sub.is-flat{ color: var(--muted); }
@media (max-width: 480px){
.kpi-tile{ padding: 12px; gap: 10px; }
.kpi-icon{ width: 32px; height: 32px; }
.kpi-value{ font-size: 22px; }
.kpi-label{ font-size: 11px; }
}
@media (max-width: 380px){
.prg-hero{ grid-template-columns: 1fr; }
}
/* --- Личные рекорды (v2): группы + чипы по типам PR ----------------- */
.page-progress #pbList{
display: flex; flex-direction: column; gap: 18px;
}
.pb-group{ display: flex; flex-direction: column; gap: 8px; }
.pb-group__h{
margin: 0;
font-size: 12px;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--muted);
font-weight: 700;
}
.pb-row{
border: 1px solid var(--border);
border-radius: 12px;
padding: 10px 12px;
background: color-mix(in oklab, var(--card) 80%, transparent);
}
.pb-row__head{
display: flex; align-items: center; gap: 8px;
margin-bottom: 8px;
flex-wrap: wrap;
}
.pb-row__name{ font-weight: 700; }
.pb-row__date{ margin-left: auto; }
.pb-new-badge{
display: inline-block;
background: color-mix(in oklab, var(--ok) 18%, var(--chip));
color: var(--ok);
border: 1px solid color-mix(in oklab, var(--ok) 35%, var(--border));
border-radius: 999px;
padding: 1px 8px;
font-size: 11px;
font-weight: 700;
letter-spacing: .02em;
text-transform: uppercase;
}
.pb-row__chips{
display: grid;
grid-template-columns: repeat(4, minmax(0,1fr));
gap: 8px;
}
@media (max-width: 640px){
.pb-row__chips{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
.pb-chip{
background: var(--panel);
border: 1px solid var(--border);
border-radius: 10px;
padding: 8px 10px;
display: flex; flex-direction: column;
gap: 2px;
min-width: 0;
}
.pb-chip.is-new{
border-color: color-mix(in oklab, var(--ok) 40%, var(--border));
background: color-mix(in oklab, var(--ok) 6%, var(--panel));
}
.pb-chip__title{
font-size: 10px;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--muted);
font-weight: 700;
}
.pb-chip__val{
font-size: 18px; font-weight: 800;
color: var(--text);
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
letter-spacing: -0.01em;
display: inline-flex; align-items: baseline;
white-space: nowrap;
}
.pb-chip__unit{
font-size: 12px; font-weight: 600;
color: var(--muted); margin-left: 0;
}
.pb-chip__meta{
font-size: 11px;
color: var(--muted);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 380px){
.pb-chip__val{ font-size: 16px; }
}
/* --- Заголовок карточки с правым meta-текстом ---------------------- */
.prg-card-head{
display: flex; align-items: baseline; justify-content: space-between;
gap: 12px; margin-bottom: 8px; flex-wrap: wrap;
}
.prg-card-head .title{ margin: 0; }
/* --- Хитмап активности (GitHub-style) ------------------------------- */
.prg-heatmap-wrap{
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
margin: 4px -4px;
padding: 4px;
}
.prg-heatmap{
display: grid;
/* grid-template-columns/rows задаются inline из JS */
grid-auto-flow: column;
gap: 3px;
min-width: max-content;
}
.prg-hm-cell{
width: 14px; height: 14px;
border-radius: 3px;
background: var(--chip);
border: 1px solid var(--border);
display: block;
transition: transform .12s, outline-color .12s;
}
.prg-hm-cell.lvl-empty{ visibility: hidden; }
.prg-hm-cell.lvl-0{
background: color-mix(in oklab, var(--chip) 60%, var(--card));
border-color: var(--border);
}
.prg-hm-cell.lvl-1{
background: rgba(34, 211, 238, 0.22);
border-color: rgba(34, 211, 238, 0.28);
}
.prg-hm-cell.lvl-2{
background: rgba(34, 211, 238, 0.45);
border-color: rgba(34, 211, 238, 0.55);
}
.prg-hm-cell.lvl-3{
background: rgba(34, 211, 238, 0.78);
border-color: rgba(34, 211, 238, 0.85);
}
.prg-hm-cell.is-skipped{
background: repeating-linear-gradient(
45deg,
rgba(239, 68, 68, 0.18),
rgba(239, 68, 68, 0.18) 2px,
transparent 2px,
transparent 4px
);
border-color: rgba(239, 68, 68, 0.35);
}
.prg-hm-cell.is-today{
outline: 2px solid var(--accent);
outline-offset: 1px;
box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 25%, transparent);
}
.prg-hm-cell:hover{ transform: scale(1.25); }
.theme-light .prg-hm-cell.lvl-1,
.theme-system .prg-hm-cell.lvl-1{
background: rgba(8, 145, 178, 0.18);
border-color: rgba(8, 145, 178, 0.30);
}
.theme-light .prg-hm-cell.lvl-2,
.theme-system .prg-hm-cell.lvl-2{
background: rgba(8, 145, 178, 0.40);
border-color: rgba(8, 145, 178, 0.55);
}
.theme-light .prg-hm-cell.lvl-3,
.theme-system .prg-hm-cell.lvl-3{
background: rgba(8, 145, 178, 0.75);
border-color: rgba(8, 145, 178, 0.85);
}
.prg-heatmap-legend{
display: inline-flex; align-items: center; gap: 4px;
margin-top: 8px;
padding: 4px 0;
}
.prg-heatmap-legend .prg-hm-cell{
width: 12px; height: 12px;
}
.prg-heatmap-legend .small{ margin: 0 4px; }
@media (max-width: 480px){
.prg-hm-cell{ width: 11px; height: 11px; }
}
/* --- Группы мышц: горизонтальные бары ------------------------------- */
.prg-mg{ display: flex; flex-direction: column; gap: 8px; }
.prg-mg__row{
display: grid;
grid-template-columns: 160px 1fr auto;
align-items: center;
gap: 12px;
padding: 6px 0;
}
.prg-mg__name{
font-weight: 600;
font-size: 13px;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: flex; align-items: center; gap: 6px;
}
.prg-mg__stale{
display: inline-block;
background: rgba(245, 158, 11, 0.15);
color: var(--warn);
border: 1px solid rgba(245, 158, 11, 0.30);
border-radius: 999px;
padding: 1px 7px;
font-size: 11px;
font-weight: 600;
}
.prg-mg__bar{
height: 10px;
background: var(--chip);
border-radius: 999px;
overflow: hidden;
border: 1px solid var(--border);
}
.prg-mg__bar > span{
display: block;
height: 100%;
background: linear-gradient(135deg, #22d3ee, #06b6d4);
border-radius: 999px;
transition: width .4s ease;
}
.prg-mg__bar > span[data-cardio="1"]{
background: linear-gradient(135deg, #f59e0b, #ef4444);
}
.prg-mg__val{
font-size: 12px;
color: var(--muted);
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
@media (max-width: 600px){
.prg-mg__row{
grid-template-columns: 1fr auto;
grid-template-areas:
"name val"
"bar bar";
gap: 4px 12px;
}
.prg-mg__name{ grid-area: name; }
.prg-mg__val { grid-area: val; }
.prg-mg__bar { grid-area: bar; }
}
/* --- Инсайты ------------------------------------------------------- */
.prg-insights{
list-style: none; margin: 0; padding: 0;
display: flex; flex-direction: column; gap: 8px;
}
.prg-insight{
display: grid;
grid-template-columns: 32px 1fr;
align-items: center;
gap: 12px;
padding: 10px 12px;
border-radius: 12px;
border: 1px solid var(--border);
background: color-mix(in oklab, var(--card) 80%, transparent);
font-size: 14px; line-height: 1.4;
}
.prg-insight__icon{
width: 32px; height: 32px;
border-radius: 8px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--chip);
color: var(--muted);
}
.prg-insight__icon .icon{ width: 16px; height: 16px; }
.prg-insight.is-pos{
background: color-mix(in oklab, var(--ok) 8%, var(--card));
border-color: color-mix(in oklab, var(--ok) 35%, var(--border));
}
.prg-insight.is-pos .prg-insight__icon{
background: color-mix(in oklab, var(--ok) 18%, var(--chip));
color: var(--ok);
}
.prg-insight.is-neg{
background: color-mix(in oklab, var(--danger) 8%, var(--card));
border-color: color-mix(in oklab, var(--danger) 35%, var(--border));
}
.prg-insight.is-neg .prg-insight__icon{
background: color-mix(in oklab, var(--danger) 18%, var(--chip));
color: var(--danger);
}
.prg-insight.is-warn{
background: color-mix(in oklab, var(--warn) 8%, var(--card));
border-color: color-mix(in oklab, var(--warn) 35%, var(--border));
}
.prg-insight.is-warn .prg-insight__icon{
background: color-mix(in oklab, var(--warn) 18%, var(--chip));
color: var(--warn);
}
.prg-insight.is-info{
background: color-mix(in oklab, var(--accent) 8%, var(--card));
border-color: color-mix(in oklab, var(--accent) 30%, var(--border));
}
.prg-insight.is-info .prg-insight__icon{
background: color-mix(in oklab, var(--accent) 18%, var(--chip));
color: var(--accent);
}
.prg-premium-gate{
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 14px;
border-radius: 14px;
border: 1px solid color-mix(in oklab, var(--accent) 35%, var(--border));
background: linear-gradient(135deg,
color-mix(in oklab, var(--accent) 14%, var(--card)),
color-mix(in oklab, var(--card) 88%, transparent)
);
}
.prg-premium-gate div{
display: flex;
flex-direction: column;
gap: 3px;
}
.prg-premium-gate strong{ font-size: 14px; }
.prg-premium-gate span{
color: var(--muted);
font-size: 13px;
line-height: 1.4;
}
@media (max-width: 640px){
.prg-premium-gate{
align-items: stretch;
flex-direction: column;
}
.prg-premium-gate .btn{ justify-content: center; }
}
/* ====================================================================
RETURN MODE BANNER (Progress + Calendar)
Показывается в двух состояниях:
.is-active — режим уже включён, рисуем прогресс-бар и controls
.is-suggested — режим только предложен после паузы
==================================================================== */
.return-banner{
background: color-mix(in oklab, var(--warn) 10%, var(--card));
border: 1px solid color-mix(in oklab, var(--warn) 40%, var(--border));
border-radius: 14px;
padding: 14px 16px;
margin-bottom: 16px;
display: flex; flex-direction: column; gap: 10px;
}
/* HTML-атрибут [hidden] выставляет display:none, но кастомные display
(flex/grid) у .return-banner и подобных перекрывают это. Глобальное
правило восстанавливает ожидаемое поведение: элемент с [hidden]
действительно скрыт, даже если у него class с display:flex. */
[hidden]{ display: none !important; }
.return-banner.is-active{
background: color-mix(in oklab, var(--accent) 8%, var(--card));
border-color: color-mix(in oklab, var(--accent) 35%, var(--border));
}
.return-banner__head{
display: flex; align-items: center; justify-content: space-between;
gap: 12px; flex-wrap: wrap;
}
.return-banner__title{
display: inline-flex; align-items: center; gap: 8px;
font-weight: 700; font-size: 15px;
color: var(--text);
}
.return-banner__title .icon{
width: 18px; height: 18px;
color: var(--warn);
}
.return-banner.is-active .return-banner__title .icon{ color: var(--accent); }
.return-banner__week{
font-size: 13px; font-weight: 600; color: var(--muted);
font-variant-numeric: tabular-nums;
}
.return-banner__bar{
height: 8px;
background: color-mix(in oklab, var(--accent) 12%, var(--chip));
border-radius: 999px;
overflow: hidden;
border: 1px solid var(--border);
}
.return-banner__bar > span{
display: block; height: 100%;
background: linear-gradient(135deg, #22d3ee, #06b6d4);
transition: width .5s ease;
border-radius: 999px;
}
.return-banner__sub{
display: flex; align-items: center; justify-content: space-between;
gap: 8px; flex-wrap: wrap;
font-size: 13px;
}
.return-banner__cut{
font-weight: 700;
color: var(--accent);
font-variant-numeric: tabular-nums;
}
.return-banner__msg{
margin: 0;
font-size: 14px;
line-height: 1.5;
color: var(--text);
}
.return-banner__msg b{ color: var(--text); }
.return-banner__actions{
display: flex; gap: 8px; flex-wrap: wrap;
margin-top: 2px;
}
.return-banner__close{
background: transparent;
border: none;
color: var(--muted);
font-size: 22px;
line-height: 1;
cursor: pointer;
padding: 0 4px;
border-radius: 8px;
}
.return-banner__close:hover{ color: var(--text); background: var(--chip); }
@media (max-width: 480px){
.return-banner{ padding: 12px 14px; }
.return-banner__title{ font-size: 14px; }
}
/* Inline-вариант баннера для модалки рекомендации в календаре —
компактнее, без прогресс-бара. */
.return-banner--inline{
margin-bottom: 12px;
padding: 10px 12px;
}
.return-banner--inline .return-banner__title{ font-size: 13px; }
.return-banner--inline .return-banner__msg{ font-size: 13px; }
/* --- Недельный план: список дней с чекбоксами ----------------------- */
.wk-days{
display: grid;
gap: 10px;
margin-top: 10px;
}
.wk-day{
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: 14px;
background: var(--surface);
transition: border-color .15s, background .15s;
}
.wk-day:has(.wk-day__chk:checked){
border-color: color-mix(in oklab, var(--accent) 35%, var(--border));
background: color-mix(in oklab, var(--accent) 5%, var(--surface));
}
.wk-day--rest{
opacity: .65;
}
.wk-day--rest:has(.wk-day__chk:checked){
opacity: 1;
}
.wk-day__head{
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
user-select: none;
}
.wk-day__chk{
flex-shrink: 0;
width: 16px; height: 16px;
accent-color: var(--accent);
cursor: pointer;
}
.wk-day__title{
flex: 1;
font-size: 14px;
}
.wk-day__list{
margin: 6px 0 0 24px;
padding: 0;
font-size: 13px;
color: var(--muted);
}
.wk-day__rest-note{
margin: 4px 0 0 24px;
}
/* --- Подсказка «заполни профиль» на странице рекомендаций ----------- */
.profile-hint{
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
border: 1px solid color-mix(in oklab, var(--accent) 28%, var(--border));
border-radius: 14px;
background: color-mix(in oklab, var(--accent) 6%, var(--card));
font-size: 13px;
line-height: 1.45;
color: var(--text);
}
.profile-hint__text{ flex: 1; }
.profile-hint__text a{ color: var(--accent); text-decoration: underline; }
.profile-hint__close{
flex-shrink: 0;
background: transparent;
border: none;
color: var(--muted);
font-size: 20px;
line-height: 1;
cursor: pointer;
padding: 0 4px;
border-radius: 8px;
}
.profile-hint__close:hover{ color: var(--text); background: var(--chip); }
/* --- Виджет «Шаги сегодня» на дашборде ----------------------------- */
.today-steps__hero{
display: flex; align-items: baseline; justify-content: space-between;
gap: 12px; flex-wrap: wrap;
margin-top: 8px;
}
.today-steps__num{
font-size: 38px; font-weight: 800; line-height: 1;
color: var(--text);
font-family: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Inter;
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
letter-spacing: -0.01em;
display: inline-flex; align-items: baseline; gap: 6px;
}
.today-steps__num.is-ok{ color: var(--ok); }
.today-steps__goal{
font-size: 14px; font-weight: 600; color: var(--muted);
letter-spacing: 0;
}
.today-steps__hint{
font-size: 13px; color: var(--muted);
}
.today-steps__hint--ok{ color: var(--ok); font-weight: 600; }
.today-steps__bar{
margin-top: 10px;
height: 10px;
background: var(--chip);
border-radius: 999px;
overflow: hidden;
border: 1px solid var(--border);
}
.today-steps__bar-fill{
height: 100%;
background: linear-gradient(135deg, #22d3ee, #06b6d4);
width: 0%;
transition: width .5s ease;
border-radius: 999px;
}
.today-steps__bar.is-ok .today-steps__bar-fill{
background: linear-gradient(135deg, #34d399, #10b981);
}
.today-steps__form{
display: grid;
gap: 8px;
margin-top: 12px;
grid-template-columns: 1fr auto;
align-items: end;
}
.today-steps__field{
display: flex; flex-direction: column; gap: 4px;
grid-column: 1 / -1;
}
.today-steps__field input{
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
}
.today-steps__quick{
display: flex; gap: 6px; flex-wrap: wrap;
grid-column: 1 / -1;
}
.today-steps__form button[type="submit"]{
grid-column: 1 / -1;
justify-self: stretch;
}
@media (min-width: 720px){
.today-steps__form{
grid-template-columns: 1fr auto auto;
}
.today-steps__field{ grid-column: 1; }
.today-steps__quick{ grid-column: 2; align-self: end; }
.today-steps__form button[type="submit"]{
grid-column: 3; justify-self: end;
align-self: end;
}
}
/* Скелетон под загрузку — переиспользуем общие классы .sk, если есть в проекте */
.today-steps__skeleton{
display: flex; flex-direction: column; gap: 10px;
margin-top: 10px;
}
/* --- Ручная активность / Apple Watch -------------------------------- */
.today-activity-card{ overflow:hidden; }
.today-activity__body{ margin-top:12px; }
.today-activity__empty{
display:grid;
gap:4px;
padding:12px 14px;
border:1px dashed color-mix(in oklab, var(--accent) 28%, var(--border));
border-radius:14px;
background: color-mix(in oklab, var(--accent) 6%, transparent);
}
.today-activity__summary{
display:grid;
grid-template-columns:repeat(2, minmax(0,1fr));
gap:10px;
margin-bottom:10px;
}
.today-activity__summary > div{
padding:10px 12px;
border-radius:14px;
background: color-mix(in oklab, var(--accent) 8%, var(--panel));
border:1px solid color-mix(in oklab, var(--accent) 18%, var(--border));
}
.today-activity__summary strong{
display:block;
font-size:24px;
line-height:1.05;
color:var(--accent);
font-variant-numeric:tabular-nums;
font-feature-settings:"tnum" 1;
}
.today-activity__summary span{ color:var(--muted); font-size:12px; }
.today-activity__list{ display:grid; gap:8px; }
.today-activity__item{
display:flex;
justify-content:space-between;
gap:10px;
align-items:center;
padding:10px 12px;
border-radius:12px;
background:var(--panel);
border:1px solid var(--border);
color:var(--text);
}
.today-activity__item span{ font-weight:700; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.today-activity__item small{ color:var(--muted); white-space:nowrap; }
.external-activity-modal{ max-width:460px; }
.external-activity-head .title{ margin:3px 0 4px; }
.external-activity-form{ display:grid; gap:12px; }
.external-activity-field{ display:grid; gap:5px; }
.external-activity-field span{ color:var(--muted); font-size:12px; font-weight:700; }
.external-activity-field input,
.external-activity-field select,
.external-activity-field textarea{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }
.external-activity-presets{ display:flex; gap:7px; flex-wrap:wrap; }
.external-activity-more{
border:1px solid var(--border);
border-radius:14px;
padding:10px 12px;
background: color-mix(in oklab, var(--panel) 74%, transparent);
}
.external-activity-more summary{ cursor:pointer; font-weight:700; color:var(--text); }
.external-activity-more__grid{
display:grid;
grid-template-columns:repeat(2, minmax(0,1fr));
gap:10px;
margin-top:10px;
}
.external-activity-field--notes{ margin-top:10px; }
.external-activity-actions{ display:flex; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
@media (max-width:520px){
.external-activity-more__grid{ grid-template-columns:1fr; }
.today-activity__summary{ grid-template-columns:1fr 1fr; }
.today-activity__item{ align-items:flex-start; flex-direction:column; }
.today-activity__item small{ white-space:normal; }
}
/* --- Чип шагов в ячейке календаря ---------------------------------- */
/* Кнопка-чип в правом верхнем углу .cal-cell.
Состояния:
.is-empty — нет записи, плюсик
.has-value — есть запись (нейтральный цвет)
.goal-met — цель выполнена (зелёный) */
.cal-cell{ position: relative; }
/* Внешняя обёртка — это «кольцо» прогресса (conic-gradient), padding = его толщина.
Внутрь вкладывается .cal-steps__num — пилюля с числом и собственным фоном,
она перекрывает середину, оставляя видимым только тонкое кольцо. */
.cal-steps{
--p: 0; /* 0..100, выставляется из JS */
--ring-color: var(--accent);
--ring-track: var(--border);
position: absolute;
top: 6px; right: 6px;
z-index: 2;
padding: 2px; /* толщина кольца */
background: conic-gradient(var(--ring-color) calc(var(--p) * 1%), var(--ring-track) 0);
border: 0;
border-radius: 999px;
cursor: pointer;
user-select: none;
-webkit-tap-highlight-color: transparent;
transition: transform .08s, background .35s ease;
}
.cal-steps:active{ transform: scale(0.96); }
.cal-steps:focus-visible{ outline: 2px solid var(--ring); outline-offset: 2px; }
.cal-steps__num{
display: inline-flex; align-items: center; justify-content: center;
min-width: 28px; height: 20px;
padding: 0 7px;
font-size: 11px; font-weight: 700;
font-variant-numeric: tabular-nums;
background: var(--chip);
color: var(--muted);
border-radius: 999px;
transition: background-color .12s, color .12s;
}
/* Empty — нет данных: пунктирная плюсик-плашка, кольца нет. */
.cal-steps.is-empty{
background: transparent; padding: 0;
opacity: 0.55;
}
.cal-steps.is-empty .cal-steps__num{
background: transparent;
border: 1px dashed var(--border);
color: var(--muted);
}
.cal-cell:hover .cal-steps.is-empty{ opacity: 1; }
/* Есть значение, цель не достигнута — кольцо частично, число акцентом. */
.cal-steps.has-value .cal-steps__num{
background: color-mix(in oklab, var(--accent) 14%, var(--chip));
color: var(--text);
}
/* Цель выполнена — кольцо целиком зелёное (независимо от --p), галочка перед числом. */
.cal-steps.goal-met{ --ring-color: var(--ok); --ring-track: var(--ok); }
.cal-steps.goal-met .cal-steps__num{
background: color-mix(in oklab, var(--ok) 22%, var(--chip));
color: var(--ok);
}
.cal-steps.goal-met .cal-steps__num::before{
content: "✓"; margin-right: 2px; font-weight: 800;
}
@media (max-width: 480px){
.cal-steps{ top: 4px; right: 4px; padding: 2px; }
.cal-steps__num{ min-width: 24px; height: 18px; padding: 0 6px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce){
.cal-steps{ transition: none; }
}
/* --- Двухколоночная сетка для графиков на десктопе ----------------- */
.prg-cols{
display: grid;
gap: 16px;
}
.prg-cols > .card{ margin-bottom: 0; }
@media (min-width: 1024px){
.prg-cols{ grid-template-columns: 1fr 1fr; }
}
/* --- Скелетон-пульсация для значений «—», пока идёт первая загрузка - */
@keyframes prgPulse {
0%,100% { opacity: 1; }
50% { opacity: 0.45; }
}
/* Подсвечиваем числовые значения KPI, пока показывается прочерк.
Как только JS заменит «—» на число, анимация пропадает. */
.kpi-value [data-streak]:not([data-loaded]),
.kpi-value [data-completed]:not([data-loaded]),
.kpi-value [data-volume]:not([data-loaded]),
.kpi-value [data-adherence]:not([data-loaded]),
.prg-body-kpi__val:empty::before,
.prg-body-kpi__val:has(:not([data-loaded])){
animation: prgPulse 1.4s ease-in-out infinite;
}
.kpi-value [data-loaded],
.prg-body-kpi__val [data-loaded]{
animation: none;
}
/* Гарантируем, что контейнер графика на узких экранах не сжимается слишком сильно */
@media (max-width: 380px){
.chart-wrap{ height: 220px; }
}
/* Селектор периода: на тачскрине в нижнем bottom-nav-режиме оставляем
достаточный отступ снизу. */
body.has-bottom-nav .page-progress main.container,
body.has-bottom-nav main.container.page-progress{
padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom) + 24px);
}
/* --- Карточка «Шаги» (Progress) ------------------------------------ */
.prg-steps-kpi{
display: grid;
grid-template-columns: repeat(3, minmax(0,1fr));
gap: 10px;
margin-bottom: 4px;
}
@media (max-width: 540px){
.prg-steps-kpi{ grid-template-columns: 1fr 1fr; }
.prg-steps-kpi__cell:nth-child(3){ grid-column: span 2; }
}
.prg-steps-kpi__cell{
background: color-mix(in oklab, var(--card) 70%, transparent);
border: 1px solid var(--border);
border-radius: 12px;
padding: 10px 12px;
}
.prg-steps-kpi__label{
color: var(--muted);
font-size: 11px;
text-transform: uppercase;
letter-spacing: .04em;
font-weight: 700;
margin-bottom: 4px;
}
.prg-steps-kpi__val{
font-weight: 800;
font-size: 22px;
line-height: 1.05;
color: var(--text);
font-family: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Inter;
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
letter-spacing: -0.01em;
}
.prg-steps-kpi__sub{ margin-top: 4px; font-size: 12px; }
@media (max-width: 480px){
.prg-steps-kpi__val{ font-size: 18px; }
}
/* --- Карточка «Тело» (вес и % жира) -------------------------------- */
.prg-body-kpi{
display: grid;
grid-template-columns: repeat(3, minmax(0,1fr));
gap: 10px;
margin-bottom: 4px;
}
@media (max-width: 540px){
.prg-body-kpi{ grid-template-columns: 1fr 1fr; }
.prg-body-kpi__cell:nth-child(3){ grid-column: span 2; }
}
.prg-body-kpi__cell{
background: color-mix(in oklab, var(--card) 70%, transparent);
border: 1px solid var(--border);
border-radius: 12px;
padding: 10px 12px;
}
.prg-body-kpi__label{
color: var(--muted);
font-size: 11px;
text-transform: uppercase;
letter-spacing: .04em;
font-weight: 700;
margin-bottom: 4px;
}
.prg-body-kpi__val{
font-weight: 800;
font-size: 22px;
line-height: 1.05;
color: var(--text);
font-family: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Inter;
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
letter-spacing: -0.01em;
}
.prg-body-kpi__sub{
margin-top: 4px;
font-size: 12px;
font-variant-numeric: tabular-nums;
}
.prg-body-kpi__sub.is-pos{ color: var(--ok); font-weight: 600; }
.prg-body-kpi__sub.is-neg{ color: var(--danger); font-weight: 600; }
.prg-body-kpi__sub.is-flat{ color: var(--muted); }
@media (max-width: 480px){
.prg-body-kpi__val{ font-size: 18px; }
}
/* ====================================================================== */
/* Workouts: компактная шапка активной тренировки */
/* ====================================================================== */
.wo-header{ display: flex; flex-direction: column; gap: 12px; }
.wo-header__top{
display: flex; align-items: flex-start; justify-content: space-between;
gap: 12px;
}
.wo-header__title{
margin: 0;
font-size: 20px; font-weight: 700; line-height: 1.25;
min-width: 0;
}
.wo-header__date{ font-weight: 500; font-size: 16px; white-space: nowrap; }
/* Overflow-меню «⋮» (используется иконка #menu — три точки/линии). */
.wo-header__menu{ position: relative; flex: 0 0 auto; }
.wo-header__menu-btn{
width: 40px; height: 40px; padding: 0;
display: inline-flex; align-items: center; justify-content: center;
}
.wo-header__menu-btn .icon{ width: 18px; height: 18px; }
.wo-header__menu-list{
position: absolute; right: 0; top: calc(100% + 6px);
min-width: 220px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
box-shadow: 0 12px 30px rgba(0,0,0,.18);
padding: 6px;
z-index: 50;
display: flex; flex-direction: column; gap: 2px;
}
.wo-menu__item{
background: transparent; border: 0; color: var(--text);
text-align: left; padding: 10px 12px; border-radius: 8px;
font-size: 14px; cursor: pointer;
display: flex; align-items: center; gap: 8px;
}
.wo-menu__item:hover{ background: var(--chip); }
.wo-menu__item:disabled{ opacity: .5; cursor: not-allowed; }
.wo-menu__item:focus-visible{
outline: 2px solid var(--ring); outline-offset: -2px;
}
/* Прогресс-бар + текст «N из M подходов • elapsed». */
.wo-header__progress{
display: flex; flex-direction: column; gap: 6px;
}
.wo-progress__bar{
position: relative;
width: 100%; height: 8px;
background: var(--chip);
border-radius: 999px;
overflow: hidden;
}
.wo-progress__bar > span{
display: block; height: 100%;
background: linear-gradient(90deg, var(--accent), color-mix(in oklab, var(--accent) 70%, var(--ok)));
border-radius: 999px;
transition: width .25s ease;
width: 0%;
}
.wo-progress__meta{
display: flex; gap: 8px; align-items: baseline;
font-size: 13px; color: var(--muted);
}
.wo-progress__text{ font-variant-numeric: tabular-nums; }
.wo-progress__elapsed{ font-variant-numeric: tabular-nums; }
/* Контекстная primary-CTA: одна кнопка на всю ширину карточки. */
.wo-header__cta{ display: block; }
.wo-header__primary{
width: 100%;
min-height: 48px;
font-size: 15px; font-weight: 700;
}
/* Бейдж «Тренировка завершена» / «Тренировка из прошлого». */
.wo-header__completed{
display: inline-flex; align-items: center; gap: 8px;
padding: 10px 14px;
background: color-mix(in oklab, var(--ok) 14%, var(--card));
border: 1px solid color-mix(in oklab, var(--ok) 40%, var(--border));
color: var(--ok);
border-radius: 12px;
font-weight: 700;
}
.wo-header__completed .icon{ width: 18px; height: 18px; }
/* Пропущенная тренировка: жёлтый, не зелёный (это не победа, а блокировка). */
.wo-header__completed.is-missed{
background: color-mix(in oklab, var(--warn) 14%, var(--card));
border-color: color-mix(in oklab, var(--warn) 40%, var(--border));
color: var(--warn);
}
/* Индикатор автосохранения — мелким шрифтом под CTA. */
.wo-header__autosave{
display: flex; justify-content: flex-end;
font-size: 12px; color: var(--muted);
}
.wo-header__autosave .save-ind{ margin-left: 0; }
/* Детализация внешней активности (Apple Watch / ручной ввод). */
.external-workout-details{
display:grid;
gap:16px;
overflow:hidden;
position:relative;
}
.external-workout-details::before{
content:"";
position:absolute;
inset:-70px -70px auto auto;
width:210px;
height:210px;
border-radius:999px;
background:radial-gradient(circle, color-mix(in oklab, var(--accent) 16%, transparent), transparent 70%);
pointer-events:none;
}
.external-workout-details__head{
display:flex;
justify-content:space-between;
gap:12px;
align-items:flex-start;
position:relative;
z-index:1;
}
.external-workout-details__head .title{ margin:2px 0 0; }
.external-workout-details__source{
flex:0 0 auto;
display:inline-flex;
align-items:center;
padding:6px 10px;
border-radius:999px;
color:var(--accent);
background:color-mix(in oklab, var(--accent) 12%, transparent);
border:1px solid color-mix(in oklab, var(--accent) 22%, var(--border));
font-size:12px;
font-weight:800;
}
.external-workout-metrics{
display:grid;
grid-template-columns:repeat(3, minmax(0,1fr));
gap:10px;
position:relative;
z-index:1;
}
.external-workout-metric{
padding:12px 14px;
border-radius:16px;
background:var(--panel);
border:1px solid var(--border);
}
.external-workout-metric.is-primary{
background:color-mix(in oklab, var(--accent) 8%, var(--panel));
border-color:color-mix(in oklab, var(--accent) 22%, var(--border));
}
.external-workout-metric span{
display:block;
color:var(--muted);
font-size:12px;
font-weight:700;
margin-bottom:5px;
}
.external-workout-metric strong{
display:block;
color:var(--text);
font-size:24px;
line-height:1.08;
font-variant-numeric:tabular-nums;
font-feature-settings:"tnum" 1;
}
.external-workout-metric.is-primary strong{ color:var(--accent); }
.external-workout-timeline{
position:relative;
z-index:1;
padding-top:2px;
}
@media (max-width:720px){
.external-workout-metrics{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.external-workout-details__head{ flex-direction:column; }
}
@media (max-width:420px){
.external-workout-metrics{ grid-template-columns:1fr; }
}
/* ====================================================================== */
/* Глобальный rest-таймер (один на всю страницу workouts) */
/* ====================================================================== */
.rest-bar{
position: fixed;
left: 12px; right: 12px;
/* На мобильном внизу есть навигация (.bottom-nav, высота --bottom-nav-h) —
поднимаем rest-bar над ней. На десктопе .bottom-nav не показывается,
поэтому только safe-area-inset-bottom + базовый отступ. */
bottom: calc(12px + env(safe-area-inset-bottom));
z-index: 4000;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 14px;
padding: 10px 14px;
box-shadow: 0 8px 28px rgba(0,0,0,.22);
display: flex; align-items: center; gap: 12px;
min-height: 56px;
transition: background-color .2s, border-color .2s;
}
body.has-bottom-nav .rest-bar{
bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom) + 12px);
}
@media (min-width: 720px){
.rest-bar{
left: auto; right: 24px; bottom: 24px;
width: min(420px, calc(100vw - 48px));
}
}
/* Idle state: видны пресеты, активный countdown скрыт. */
.rest-bar__idle{
display: flex; align-items: center; gap: 12px; width: 100%;
}
.rest-bar.is-active .rest-bar__idle{ display: none; }
.rest-bar__idle-label{
flex: 0 0 auto;
text-transform: uppercase;
letter-spacing: .5px;
font-size: 11px;
font-weight: 700;
}
.rest-bar__presets{
display: flex; gap: 6px; flex: 1 1 auto; justify-content: flex-end;
}
.rest-bar__preset{
background: var(--chip);
border: 1px solid var(--border);
color: var(--text);
border-radius: 999px;
padding: 8px 14px;
font-size: 13px; font-weight: 600;
cursor: pointer;
min-height: 36px;
-webkit-tap-highlight-color: transparent;
transition: background-color .12s, transform .08s;
}
.rest-bar__preset:hover{
background: color-mix(in oklab, var(--accent) 12%, var(--chip));
}
.rest-bar__preset:active{ transform: scale(0.96); }
.rest-bar__preset.is-active{
background: color-mix(in oklab, var(--accent) 22%, var(--chip));
border-color: color-mix(in oklab, var(--accent) 45%, var(--border));
color: var(--text);
}
/* Active state: тикающий countdown с прогресс-баром и кнопкой Стоп. */
.rest-bar__active{ display: none; }
.rest-bar.is-active{
background: color-mix(in oklab, var(--accent) 8%, var(--surface));
border-color: color-mix(in oklab, var(--accent) 35%, var(--border));
}
.rest-bar.is-active .rest-bar__active{
display: flex; align-items: center; gap: 12px; width: 100%;
}
.rest-bar__time{
font-variant-numeric: tabular-nums;
font-weight: 700;
font-size: 16px;
min-width: 84px;
flex: 0 0 auto;
}
.rest-bar__bar{
position: relative;
flex: 1 1 auto;
height: 6px;
background: var(--chip);
border-radius: 999px;
overflow: hidden;
}
.rest-bar__bar > span{
display: block; height: 100%;
background: linear-gradient(90deg, var(--accent), color-mix(in oklab, var(--accent) 70%, var(--ok)));
border-radius: 999px;
transition: width 1s linear;
width: 0%;
}
.rest-bar__stop{
flex: 0 0 auto;
background: var(--chip);
border: 1px solid var(--border);
color: var(--text);
border-radius: 999px;
padding: 8px 14px;
font-size: 13px; font-weight: 600;
cursor: pointer;
min-height: 36px;
}
.rest-bar__stop:hover{ background: color-mix(in oklab, var(--danger) 12%, var(--chip)); color: var(--danger); }
/* Чтобы content под rest-bar не уезжал под него — добавляем нижний отступ
main только когда есть рабочая (.rest-bar:not([hidden])) панель.
На мобильном с .has-bottom-nav rest-bar поднят ещё на --bottom-nav-h,
поэтому padding больше. */
body:has(.rest-bar:not([hidden])) main{ padding-bottom: 90px; }
body.has-bottom-nav:has(.rest-bar:not([hidden])) main{
padding-bottom: calc(var(--bottom-nav-h) + 90px);
}
@media (min-width: 720px){
body:has(.rest-bar:not([hidden])) main{ padding-bottom: 24px; }
}