/* ==================== RESET & ROOT ==================== */
* { margin:0; padding:0; box-sizing:border-box; }
html, body {
    overscroll-behavior: none;
    height: 100%; height: 100dvh;
    overflow: hidden;
    position: fixed;
    width: 100%;
}
:root {
    --bg:      #F0F2F5;
    --card:    #FFFFFF;
    --card2:   #F5F7FA;
    --border:  #E8EBF0;
    --txt:     #0D1117;
    --txt2:    #7A8190;
    --txt3:    #B8BEC8;
    --green:   #1A6642;
    --green2:  #22885A;
    --green-a: rgba(26,102,66,.10);
    --warn:    #F59E0B;
    --warn-a:  rgba(245,158,11,.12);
    --red:     #EF4444;
    --red-a:   rgba(239,68,68,.10);
    --blue:    #3B82F6;
    --blue-a:  rgba(59,130,246,.10);
    --r:       14px;
    --r-sm:    10px;
    --r-lg:    20px;
    --r-xl:    24px;
    --sh0: 0 1px 2px rgba(0,0,0,.04);
    --sh1: 0 2px 8px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    --sh2: 0 6px 24px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.05);
    --sh3: 0 16px 48px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.06);
}
[data-theme="dark"] {
    --bg:     #080B0E;
    --card:   #111722;
    --card2:  #161E28;
    --border: rgba(255,255,255,.07);
    --txt:    #F0F4F8;
    --txt2:   #8A96A8;
    --txt3:   #3A4555;
    --green:  #25A664;
    --green2: #1D8A52;
    --green-a:rgba(37,166,100,.14);
    --warn-a: rgba(245,158,11,.14);
    --red-a:  rgba(239,68,68,.12);
    --blue-a: rgba(59,130,246,.12);
    --sh0: 0 1px 3px rgba(0,0,0,.3);
    --sh1: 0 2px 12px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.2);
    --sh2: 0 8px 32px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.3);
    --sh3: 0 20px 60px rgba(0,0,0,.7), 0 6px 16px rgba(0,0,0,.4);
}
body {
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg); color: var(--txt);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 15px; line-height: 1.5;
}

/* ==================== ANIMATIONS ==================== */
@keyframes fadeUp   { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn   { from{opacity:0} to{opacity:1} }
@keyframes scaleIn  { from{opacity:0;transform:scale(.92)} to{opacity:1;transform:scale(1)} }
@keyframes shimmer  { 0%{background-position:-600px 0} 100%{background-position:600px 0} }
@keyframes spin     { to{transform:rotate(360deg)} }
@keyframes pulse    { 0%,100%{opacity:1} 50%{opacity:.5} }
@keyframes slideUp  { from{opacity:0;transform:translateY(32px)} to{opacity:1;transform:translateY(0)} }
@keyframes popIn    { 0%{opacity:0;transform:scale(.85)} 70%{transform:scale(1.04)} 100%{opacity:1;transform:scale(1)} }
@keyframes gradShift{ 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }

/* ==================== ONBOARDING ==================== */
#onboarding { display:none; min-height:100vh; }
#onboarding.show { display:flex; flex-direction:column; }
.ob-screen {
    display:none; flex:1; flex-direction:column;
    padding:48px 24px 32px;
    animation: fadeUp .38s cubic-bezier(.22,1,.36,1);
}
.ob-screen.show { display:flex; }
.ob-logo {
    font-size:56px; text-align:center; margin-bottom:16px;
    animation: scaleIn .4s cubic-bezier(.22,1,.36,1);
}
.ob-title {
    font-size:30px; font-weight:800; text-align:center;
    margin-bottom:8px; letter-spacing:-.6px; line-height:1.2;
}
.ob-sub { font-size:15px; color:var(--txt2); text-align:center; line-height:1.65; }
.ob-field { margin-bottom:16px; }
.ob-label {
    font-size:11px; color:var(--txt2); margin-bottom:7px;
    display:block; font-weight:700; letter-spacing:.9px; text-transform:uppercase;
}
.ob-input {
    width:100%; padding:15px 16px;
    background:var(--card); border:1.5px solid var(--border);
    border-radius:var(--r); color:var(--txt); font-size:16px;
    font-family:inherit; transition:border-color .2s, box-shadow .2s;
}
.ob-input:focus { outline:none; border-color:var(--green); box-shadow:0 0 0 3px var(--green-a); }
.ob-input::placeholder { color:var(--txt3); }
select.ob-input {
    -webkit-appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%237A8190' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 16px center; padding-right:42px;
}
.ob-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.ob-nav { margin-top:auto; display:flex; gap:10px; padding-top:28px; }
.ob-nav button {
    flex:1; padding:17px; border:none; border-radius:var(--r);
    font-size:16px; font-weight:700; cursor:pointer;
    font-family:inherit; transition:transform .12s, opacity .15s, box-shadow .15s;
}
.ob-nav button:active { transform:scale(.97); opacity:.88; }
.ob-back { background:var(--card2); color:var(--txt2); border:1.5px solid var(--border); }
.ob-next { background:var(--green); color:#fff; box-shadow:0 6px 24px rgba(37,166,100,.35); }

/* ==================== APP SHELL ==================== */
#app { display:none; }
#app.show {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    height: 100%;
    overflow: hidden;
}
.hdr {
    position:fixed; top:0; left:0; right:0;
    background:rgba(var(--card-rgb, 255,255,255),.92);
    background:var(--card);
    border-bottom:1px solid var(--border);
    padding:calc(13px + env(safe-area-inset-top)) 18px 13px; z-index:100;
    display:flex; justify-content:space-between; align-items:center;
    backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
}
.hdr h1 { font-size:18px; font-weight:800; letter-spacing:-.4px; }
.hdr-btn {
    background:var(--card2); border:1px solid var(--border);
    color:var(--txt2); font-size:16px; cursor:pointer; padding:0;
    width:36px; height:36px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    transition:background .15s, color .15s;
}
.hdr-btn:active { background:var(--border); color:var(--txt); }
.content { margin-top:calc(58px + env(safe-area-inset-top)); padding:16px 16px 8px; }
.sec {
    display: none;
    animation: fadeUp .3s cubic-bezier(.22,1,.36,1);
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-top: calc(58px + env(safe-area-inset-top));
    padding-bottom: calc(56px + env(safe-area-inset-bottom));
}
.sec.active { display: block; }

/* ==================== CARDS ==================== */
.card {
    background:var(--card); border-radius:var(--r-lg);
    padding:18px; margin-bottom:12px;
    border:1px solid var(--border); box-shadow:var(--sh1);
}
.card-head {
    font-size:11px; font-weight:700; color:var(--txt2);
    margin-bottom:14px; text-transform:uppercase; letter-spacing:1px;
    display:flex; justify-content:space-between; align-items:center;
}

/* ==================== STAT GRID ==================== */
.sg { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.sg-item {
    background:var(--card2); border-radius:var(--r);
    padding:14px 10px; text-align:center;
    border:1px solid var(--border);
}
.sg-label { font-size:10px; color:var(--txt2); margin-bottom:5px; font-weight:600; letter-spacing:.5px; text-transform:uppercase; }
.sg-val   { font-size:24px; font-weight:800; line-height:1; letter-spacing:-.5px; }
.sg-unit  { font-size:11px; font-weight:500; color:var(--txt2); margin-top:1px; }

/* ==================== INPUTS ==================== */
.inp {
    width:100%; padding:13px 16px; box-sizing:border-box;
    background:var(--card2); border:1.5px solid var(--border);
    border-radius:var(--r); color:var(--txt); font-size:15px;
    font-family:inherit; transition:border-color .18s, box-shadow .18s, background .18s;
}
.inp:focus { outline:none; border-color:var(--green); box-shadow:0 0 0 3px var(--green-a); background:var(--card); }
.inp::placeholder { color:var(--txt3); }
select.inp { -webkit-appearance:none; }
.field { margin-bottom:14px; }
.field label { font-size:11px; color:var(--txt2); display:block; margin-bottom:6px; font-weight:700; text-transform:uppercase; letter-spacing:.8px; }
.inp-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
textarea.inp { min-height:80px; resize:none; line-height:1.55; }

/* ==================== BUTTONS ==================== */
.btn {
    display:block; width:100%; padding:15px;
    border:none; border-radius:var(--r);
    font-size:15px; font-weight:700; cursor:pointer;
    font-family:inherit; text-align:center; letter-spacing:-.1px;
    transition:transform .12s, opacity .15s, box-shadow .15s;
}
.btn:active { transform:scale(.975); opacity:.85; }
.btn-green { background:linear-gradient(135deg,var(--green),#1D8A52); color:#fff; box-shadow:0 6px 24px rgba(37,166,100,.32); }
.btn-green:active { box-shadow:none; }
.btn-blue  { background:var(--blue);  color:#fff; box-shadow:0 4px 16px rgba(59,130,246,.28); }
.btn-red   { background:var(--red);   color:#fff; box-shadow:0 4px 16px rgba(239,68,68,.28); }
.btn-gray  { background:var(--card2); color:var(--txt); border:1.5px solid var(--border); }
.btn-sm    { padding:8px 16px; font-size:13px; width:auto; display:inline-block; border-radius:var(--r-sm); }

/* ==================== LIST ITEMS ==================== */
.li { display:flex; align-items:center; gap:12px; padding:13px 0; border-bottom:1px solid var(--border); }
.li:last-child { border-bottom:none; }
.li-icon {
    width:42px; height:42px; border-radius:12px;
    display:flex; align-items:center; justify-content:center;
    font-size:20px; flex-shrink:0;
    background:var(--card2); border:1px solid var(--border);
}
.li-body  { flex:1; min-width:0; }
.li-title { font-size:15px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.li-sub   { font-size:12px; color:var(--txt2); margin-top:2px; line-height:1.4; }
.li-right { font-size:13px; color:var(--txt2); flex-shrink:0; font-weight:500; }

/* ==================== PROGRESS BAR ==================== */
.pbar-wrap { margin-top:14px; }
.pbar-head { display:flex; justify-content:space-between; font-size:13px; font-weight:500; margin-bottom:7px; }
.pbar { height:6px; background:var(--card2); border-radius:4px; overflow:hidden; }
.pbar-fill { height:100%; background:linear-gradient(90deg,var(--green),var(--green2)); border-radius:4px; transition:width .55s cubic-bezier(.4,0,.2,1); }

/* ==================== TABS ==================== */
.tabs { display:flex; gap:6px; overflow-x:auto; margin-bottom:14px; padding-bottom:2px; scrollbar-width:none; }
.tabs::-webkit-scrollbar { display:none; }
.tab {
    padding:7px 16px; background:var(--card); border-radius:20px;
    font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap;
    color:var(--txt2); border:1.5px solid var(--border);
    transition:all .17s; font-family:inherit;
}
.tab.active { background:var(--green); color:#fff; border-color:var(--green); box-shadow:0 4px 16px rgba(37,166,100,.35); }
.tab:not(.active):active { background:var(--card2); }

/* ==================== MODAL ==================== */
.modal-bg {
    display:none; position:fixed; inset:0;
    background:rgba(0,0,0,.65); z-index:200;
    overflow-y:auto; padding:20px 16px;
    backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
}
#exFeedbackModal { z-index:300; }
#exInfoModal { z-index:400; }
#exerciseVideoModal { z-index:400; }
#viewVideoModal { z-index:400; }
#trainerEditMealModal { z-index:400; }
#feedbackVideoModal { z-index:500; }
#photoViewModal { z-index:500; }
.modal-bg.show {
    display:flex; align-items:flex-start; justify-content:center;
    animation:fadeIn .2s ease;
}
.modal {
    background:var(--card); border-radius:var(--r-xl);
    padding:22px; width:100%; max-width:480px; margin:auto;
    box-shadow:var(--sh3); border:1px solid var(--border);
    animation:scaleIn .25s cubic-bezier(.22,1,.36,1);
}
.modal-hdr { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.modal-hdr h2 { font-size:17px; font-weight:800; letter-spacing:-.3px; }
.modal-close {
    background:var(--card2); border:1px solid var(--border);
    color:var(--txt2); width:32px; height:32px; border-radius:50%;
    font-size:15px; cursor:pointer; display:flex; align-items:center; justify-content:center;
    transition:background .15s;
}
.modal-close:active { background:var(--border); }

/* ==================== SEARCH ==================== */
.search-results {
    background:var(--card); border-radius:var(--r);
    margin-top:6px; overflow:hidden; border:1px solid var(--border);
    box-shadow:var(--sh2);
}
.search-item { padding:13px 16px; cursor:pointer; border-bottom:1px solid var(--border); transition:background .12s; }
.search-item:last-child { border-bottom:none; }
.search-item:active { background:var(--green-a); }
.search-item-name { font-size:14px; font-weight:600; }
.search-item-sub  { font-size:12px; color:var(--txt2); margin-top:2px; }

/* ==================== TOAST ==================== */
.toast {
    position:fixed; bottom:96px; left:50%;
    transform:translateX(-50%) translateY(14px) scale(.96);
    background:var(--txt); color:var(--bg);
    border-radius:24px; padding:11px 22px;
    display:flex; align-items:center; gap:8px;
    font-size:14px; font-weight:600; opacity:0;
    pointer-events:none; white-space:nowrap; z-index:500;
    box-shadow:0 8px 28px rgba(0,0,0,.22);
    transition:opacity .24s, transform .24s cubic-bezier(.22,1,.36,1);
}
.toast.show { opacity:1; transform:translateX(-50%) translateY(0) scale(1); }

/* ==================== BOTTOM NAV ==================== */
.bnav {
    position:fixed; bottom:0; left:0; right:0;
    background:rgba(9,9,13,.94);
    border-top:1px solid rgba(255,255,255,.06);
    display:flex; z-index:100;
    padding-bottom:env(safe-area-inset-bottom);
    box-shadow:0 -1px 0 rgba(255,255,255,.04), 0 -12px 40px rgba(0,0,0,.5);
    backdrop-filter:blur(24px) saturate(1.4); -webkit-backdrop-filter:blur(24px) saturate(1.4);
}
.bnav button {
    flex:1; border:none; background:none; color:var(--txt3);
    padding:10px 0 10px; cursor:pointer;
    display:flex; flex-direction:column; align-items:center; gap:3px;
    font-size:10px; font-weight:600; font-family:inherit; letter-spacing:.1px;
    transition:color .22s cubic-bezier(.4,0,.2,1), transform .2s;
    position:relative;
}
.bnav button::before {
    content:''; position:absolute; top:0; left:50%; transform:translateX(-50%) scaleX(0);
    width:28px; height:2.5px; background:var(--green);
    border-radius:0 0 4px 4px;
    transition:transform .25s cubic-bezier(.34,1.56,.64,1), opacity .22s;
    opacity:0;
}
.bnav button.active { color:var(--green); }
.bnav button.active::before { transform:translateX(-50%) scaleX(1); opacity:1; }
.bnav button span { font-size:22px; line-height:1; display:block; transition:transform .25s cubic-bezier(.34,1.56,.64,1); }
.bnav button.active span { transform:scale(1.14); }

/* ==================== CHAT ==================== */
#sec-community { display:flex; flex-direction:column; padding:0; }
/* ---- CHAT LAYOUT ---- */
#sec-chat {
    display: none;
    flex-direction: column;
    overflow: hidden;
    padding: 0 !important;
    height: 100%;
}
#sec-chat.active { display: flex !important; }

/* Вкладки — всегда вверху */
#chat-tabs-bar {
    flex-shrink: 0;
    background: var(--card);
    border-bottom: 1px solid var(--border);
    display: flex;
}

/* Панели чата */
#chat-pane-community {
    flex: 1; display: flex; flex-direction: column;
    overflow: hidden; min-height: 0;
}
#chat-pane-trainer {
    flex: 1; display: flex; flex-direction: column;
    overflow: hidden; min-height: 0;
}

/* Сообщения — только эта область скроллится */
#community-msgs {
    flex: 1; overflow-y: auto;
    padding: 14px 14px 8px;
    display: flex; flex-direction: column; gap: 8px;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
#chat-messages {
    flex: 1; overflow-y: auto;
    padding: 10px 14px 8px;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* Input bar — всегда внизу */
.cm-input-bar   { flex-shrink: 0 !important; }
#chat-pane-trainer > div:last-child { flex-shrink: 0; }
.cm-msg { display:flex; gap:8px; align-items:flex-end; }
.cm-msg.own { flex-direction:row-reverse; }
.cm-avatar {
    width:32px; height:32px; border-radius:50%;
    background:var(--card2); display:flex; align-items:center;
    justify-content:center; font-size:14px; flex-shrink:0;
    border:2px solid var(--border); overflow:hidden; cursor:pointer;
    position:relative;
}
.cm-avatar.trainer { border-color:var(--green); background:var(--green-a); }
.cm-avatar img { width:100%; height:100%; object-fit:cover; position:relative; z-index:1; }
.cm-avatar-fallback { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:14px; z-index:0; pointer-events:none; }
.cm-bubble {
    max-width:75%; background:var(--card); border-radius:18px 18px 18px 4px;
    padding:10px 13px; border:1px solid var(--border);
}
.cm-msg.own .cm-bubble {
    background:var(--green); border-radius:18px 18px 4px 18px;
    color:#fff; border-color:var(--green);
    box-shadow:0 3px 12px rgba(26,102,66,.28);
}
.cm-bubble img { max-width:100%; border-radius:10px; display:block; margin-top:6px; cursor:pointer; }
.cm-name { font-size:11px; font-weight:700; margin-bottom:3px; color:var(--green2); }
.cm-msg.own .cm-name { display:none; }
.cm-trainer-badge { font-size:9px; background:var(--green); color:#fff; border-radius:5px; padding:1px 5px; margin-left:4px; font-weight:700; }
.cm-text { font-size:14px; line-height:1.5; word-break:break-word; }
.cm-msg.own .cm-text { color:#fff; }
.cm-footer { display:flex; align-items:center; gap:8px; margin-top:4px; }
.cm-time { font-size:10px; color:var(--txt2); }
.cm-msg.own .cm-time { color:rgba(255,255,255,.6); }
.cm-like { background:none; border:none; cursor:pointer; font-size:12px; color:var(--txt2); padding:0; display:flex; align-items:center; gap:3px; }
.cm-msg.own .cm-like { color:rgba(255,255,255,.65); }
.cm-like.liked { color:#ef4444; }
.cm-del { background:none; border:none; cursor:pointer; font-size:12px; color:var(--txt2); padding:0; opacity:.45; }
.cm-date-divider {
    text-align:center; font-size:11px; color:var(--txt2);
    padding:6px 0; font-weight:600; letter-spacing:.3px;
}
.cm-input-bar {
    background:var(--card); border-top:1px solid var(--border);
    padding:10px 12px; display:flex; gap:8px;
    align-items:flex-end; flex-shrink:0;
}
.cm-input-bar textarea {
    flex:1; resize:none; min-height:40px; max-height:120px;
    border-radius:20px; border:1.5px solid var(--border);
    background:var(--card2); color:var(--txt);
    padding:10px 15px; font-size:14px; outline:none;
    font-family:inherit; line-height:1.45; overflow-y:auto;
    transition:border-color .18s;
}
.cm-input-bar textarea:focus { border-color:var(--green); }
.cm-send-btn {
    width:40px; height:40px; border-radius:50%;
    background:var(--green); border:none; color:#fff;
    font-size:19px; cursor:pointer; display:flex; align-items:center;
    justify-content:center; flex-shrink:0;
    box-shadow:0 3px 10px rgba(26,102,66,.3);
    transition:transform .15s, box-shadow .15s;
}
.cm-send-btn:active { transform:scale(.9); box-shadow:none; }
.cm-img-btn {
    width:40px; height:40px; border-radius:50%;
    background:var(--card2); border:1.5px solid var(--border);
    cursor:pointer; display:flex; align-items:center;
    justify-content:center; font-size:18px; flex-shrink:0;
    transition:background .15s;
}
.cm-img-btn:active { background:var(--border); }
.cm-img-preview { position:relative; }
.cm-img-preview img { width:56px; height:56px; object-fit:cover; border-radius:10px; display:block; }
.cm-img-preview button {
    position:absolute; top:-6px; right:-6px;
    width:18px; height:18px; border-radius:50%;
    background:var(--red); border:none; color:#fff;
    font-size:11px; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.cm-unread-badge {
    position:absolute; top:6px; right:2px;
    background:var(--red); color:#fff; border-radius:50%;
    width:16px; height:16px; font-size:9px; font-weight:700;
    display:flex; align-items:center; justify-content:center;
}
.chat-bubble { max-width:82%; padding:10px 14px; border-radius:16px; font-size:14px; margin-bottom:8px; line-height:1.5; }
.chat-me { background:var(--green); color:#fff; margin-left:auto; border-bottom-right-radius:4px; box-shadow:0 2px 8px rgba(26,102,66,.25); }
.chat-trainer { background:var(--card); border:1px solid var(--border); border-bottom-left-radius:4px; }
.chat-time { font-size:10px; opacity:.55; margin-top:4px; }

/* ==================== PROFILE ==================== */
.avatar {
    width:76px; height:76px; border-radius:50%;
    background:var(--green); display:flex; align-items:center;
    justify-content:center; font-size:32px; cursor:pointer;
    overflow:hidden; position:relative; flex-shrink:0;
    border:3px solid var(--card); box-shadow:0 0 0 1.5px var(--border), var(--sh1);
}
.avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.avatar-edit-hint {
    position:absolute; bottom:0; left:0; right:0;
    background:rgba(0,0,0,.55); color:#fff;
    font-size:9px; text-align:center; padding:3px 0; font-weight:600;
}
.profile-top { display:flex; align-items:center; gap:16px; margin-bottom:16px; }
.album-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; }
.album-item { aspect-ratio:1; overflow:hidden; border-radius:10px; cursor:pointer; position:relative; background:var(--card2); }
.album-item img { width:100%; height:100%; object-fit:cover; }
.album-item .album-del { position:absolute; top:5px; right:5px; background:rgba(0,0,0,.6); border:none; color:#fff; border-radius:50%; width:22px; height:22px; font-size:11px; cursor:pointer; display:none; align-items:center; justify-content:center; }
.album-item:hover .album-del { display:flex; }

/* Public profile modal */
#pubProfileModal .modal { max-height:90vh; overflow-y:auto; padding:0; }
.pub-hero { padding:22px 20px 18px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:14px; background:var(--card2); }
.pub-avatar { width:68px; height:68px; border-radius:50%; overflow:hidden; border:3px solid var(--green); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:28px; background:var(--card2); }
.pub-avatar img { width:100%; height:100%; object-fit:cover; }

/* Trainer cards */
.trainer-card {
    display:flex; align-items:center; gap:12px;
    padding:13px 14px; background:var(--card);
    border:1.5px solid var(--border); border-radius:var(--r);
    margin-bottom:10px; cursor:pointer; transition:border-color .18s, background .18s;
}
.trainer-card:active { background:var(--card2); }
.trainer-card.selected { border-color:var(--green); background:var(--green-a); }
.trainer-card-avatar { width:46px; height:46px; border-radius:50%; background:var(--card2); display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; overflow:hidden; border:2px solid var(--border); }
.trainer-card-avatar img { width:100%; height:100%; object-fit:cover; }
.trainer-card-info { flex:1; min-width:0; }
.trainer-card-name { font-size:15px; font-weight:700; }
.trainer-card-spec { font-size:12px; color:var(--txt2); margin-top:2px; }
.trainer-card-meta { font-size:11px; color:var(--green2); margin-top:3px; font-weight:600; }

/* ==================== WORKOUT ==================== */
.workout-card {
    background:var(--card); border-radius:var(--r-lg);
    padding:18px; margin-bottom:12px;
    border:1px solid var(--border); box-shadow:var(--sh0);
}
.workout-card.done { border-color:var(--green); }
.workout-name { font-size:16px; font-weight:800; margin-bottom:5px; letter-spacing:-.2px; }
.workout-meta { font-size:13px; color:var(--txt2); font-weight:500; }
.ex-row { background:var(--card2); border-radius:var(--r); padding:13px; margin-bottom:8px; border:1px solid var(--border); }
.ex-name { font-size:14px; font-weight:700; margin-bottom:8px; }
.ex-params { display:flex; gap:6px; flex-wrap:wrap; }
.ex-param { font-size:12px; color:var(--txt2); background:var(--card); padding:4px 10px; border-radius:8px; font-weight:600; border:1px solid var(--border); }
.ex-check {
    width:30px; height:30px; border-radius:50%;
    background:var(--card); border:2px solid var(--border);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; font-size:14px; flex-shrink:0; margin-left:auto;
    transition:all .2s;
}
.ex-check.done { background:var(--green); border-color:var(--green); box-shadow:0 2px 8px rgba(26,102,66,.35); }
.ex-block { background:var(--card2); border-radius:var(--r); padding:14px; margin-bottom:12px; border:1px solid var(--border); }
.ex-block-head { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.sets-count-row { display:flex; align-items:center; gap:8px; margin-bottom:10px; flex-wrap:wrap; }
.sets-count-label { font-size:12px; color:var(--txt2); font-weight:700; text-transform:uppercase; letter-spacing:.5px; }
.sets-count-btn { width:32px; height:32px; border-radius:8px; border:1.5px solid var(--border); background:var(--card); color:var(--txt2); font-size:13px; font-weight:700; cursor:pointer; transition:all .15s; }
.sets-count-btn.active { background:var(--green); border-color:var(--green); color:#fff; }
.set-row { display:grid; grid-template-columns:28px 1fr 1fr; gap:8px; align-items:center; margin-bottom:6px; }
.set-num { font-size:12px; font-weight:700; color:var(--txt2); text-align:center; }
.active-ex-block { background:var(--card2); border-radius:var(--r); padding:14px; margin-bottom:12px; border:2px solid var(--border); transition:border-color .25s, background .25s; position:relative; }
.active-ex-block.done { border-color:var(--green); background:rgba(26,102,66,.04); }
.active-ex-name { font-size:15px; font-weight:700; margin-bottom:10px; display:flex; align-items:center; justify-content:space-between; }
.active-set-row { display:grid; grid-template-columns:28px 1fr 1fr 36px; gap:8px; align-items:center; padding:8px 10px; background:var(--card); border-radius:10px; margin-bottom:6px; border:1px solid var(--border); }
.active-set-num { font-size:12px; font-weight:700; color:var(--txt2); }
.active-set-info { font-size:13px; text-align:center; font-weight:600; }
.set-check { width:32px; height:32px; border-radius:50%; background:var(--card2); border:2px solid var(--border); display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:14px; transition:all .18s; }
.set-check.done { background:var(--green); border-color:var(--green); box-shadow:0 2px 8px rgba(26,102,66,.3); }
.ex-detail { background:var(--card2); border-radius:var(--r); padding:13px; margin-bottom:8px; border:1px solid var(--border); }
.ex-detail-head { display:flex; align-items:center; margin-bottom:8px; }
.ex-set-row { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; }
.ex-set-label { font-size:11px; color:var(--txt2); margin-bottom:4px; font-weight:600; }

/* ==================== NUTRITION ==================== */
.meal-chip { display:inline-block; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:700; margin-right:6px; }
.chip-plan { background:var(--blue-a); color:var(--blue); }
.chip-fact { background:var(--green-a); color:var(--green2); }
.meal-group { background:var(--card); border-radius:var(--r-lg); margin-bottom:10px; overflow:hidden; border:1px solid var(--border); box-shadow:var(--sh0); }
.meal-group-head { display:flex; align-items:center; padding:15px 16px; cursor:pointer; gap:12px; }
.meal-group-icon { font-size:24px; }
.meal-group-info { flex:1; }
.meal-group-name { font-size:15px; font-weight:700; }
.meal-group-sub  { font-size:12px; color:var(--txt2); margin-top:2px; }
.meal-group-cal  { font-size:18px; font-weight:800; color:var(--green); letter-spacing:-.3px; }
.meal-group-arrow { font-size:16px; color:var(--txt3); transition:transform .25s; flex-shrink:0; }
.meal-group.open .meal-group-arrow { transform:rotate(90deg); }
.meal-group-body { border-top:1px solid var(--border); }
.dish-row { display:flex; align-items:center; padding:11px 16px; border-bottom:1px solid var(--border); gap:10px; }
.dish-row:last-of-type { border-bottom:none; }
.dish-name  { flex:1; font-size:13px; font-weight:600; }
.dish-cal   { font-size:13px; color:var(--green2); font-weight:700; white-space:nowrap; }
.dish-macros{ font-size:11px; color:var(--txt2); white-space:nowrap; }
.dish-del   { background:none; border:none; color:var(--txt3); font-size:20px; cursor:pointer; padding:0 0 0 6px; line-height:1; transition:color .15s; }
.dish-del:active { color:var(--red); }
.meal-group-add-btn { display:flex; align-items:center; justify-content:center; gap:6px; padding:11px; color:var(--green2); font-size:13px; font-weight:700; cursor:pointer; border-top:1px solid var(--border); background:none; border-left:none; border-right:none; border-bottom:none; width:100%; transition:background .15s; }
.meal-group-add-btn:active { background:var(--green-a); }
.meal-icon-btn { font-size:24px; width:44px; height:44px; border-radius:10px; border:2px solid var(--border); background:var(--card2); cursor:pointer; transition:all .15s; }
.meal-icon-btn.active { border-color:var(--green); background:var(--green-a); transform:scale(1.08); }
.meal-photo-thumb { width:40px; height:40px; border-radius:8px; object-fit:cover; cursor:pointer; flex-shrink:0; border:1px solid var(--border); }
.client-dish-row { display:flex; align-items:center; gap:8px; padding:8px 0; border-bottom:1px solid var(--border); }
.client-dish-row:last-child { border-bottom:none; }

/* ==================== WELLNESS ==================== */
.slider-row { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.slider-label { font-size:14px; font-weight:600; min-width:90px; }
.slider-val { font-size:15px; font-weight:800; color:var(--green); min-width:26px; text-align:right; }
input[type=range] { flex:1; -webkit-appearance:none; height:5px; border-radius:3px; background:var(--card2); outline:none; border:1px solid var(--border); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:22px; height:22px; border-radius:50%; background:var(--green); cursor:pointer; box-shadow:0 2px 8px rgba(26,102,66,.35); border:2px solid #fff; }
.mood-btn { flex:1; font-size:30px; background:var(--card2); border:2px solid transparent; border-radius:14px; padding:10px 0; cursor:pointer; transition:all .18s; }
.mood-btn.active { border-color:var(--green); background:var(--green-a); transform:scale(1.06); box-shadow:0 3px 10px rgba(26,102,66,.2); }
.wellness-row { display:flex; align-items:center; gap:10px; padding:11px 0; border-bottom:1px solid var(--border); }
.wellness-row:last-child { border-bottom:none; }
.wellness-date { font-size:12px; color:var(--txt2); min-width:48px; font-weight:600; }
.wellness-mood { font-size:22px; }
.wellness-bars { flex:1; display:flex; flex-direction:column; gap:4px; }
.wellness-bar-row { display:flex; align-items:center; gap:6px; font-size:11px; color:var(--txt2); }
.wellness-mini-bar { flex:1; height:4px; background:var(--card2); border-radius:2px; overflow:hidden; }
.wellness-mini-fill { height:100%; border-radius:2px; }
.feeling-btn { background:none; border:2px solid transparent; cursor:pointer; padding:8px; border-radius:14px; transition:all .15s; display:flex; flex-direction:column; align-items:center; }

/* ── Кастомный date-picker ── */
.date-picker-wrap { position:relative; }
.date-picker-btn {
    width:100%; padding:12px 16px; background:var(--card2); border:1px solid var(--border);
    border-radius:12px; color:var(--txt); font-size:15px; font-weight:600; text-align:center;
    cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px;
    font-family:inherit; transition:border-color .15s;
}
.date-picker-btn:active { border-color:var(--green); }
.date-picker-dropdown {
    display:none; position:absolute; left:0; right:0; top:calc(100% + 6px);
    background:var(--card); border:1px solid var(--border); border-radius:16px;
    box-shadow:0 8px 32px rgba(0,0,0,.18); z-index:500; padding:12px;
    overflow:hidden;
}
.date-picker-dropdown.open { display:block; }
.date-picker-cols { display:flex; gap:0; height:200px; }
.date-picker-col { flex:1; overflow-y:scroll; scroll-snap-type:y mandatory;
    scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.date-picker-col::-webkit-scrollbar { display:none; }
.date-picker-item {
    scroll-snap-align:center; height:44px; display:flex; align-items:center;
    justify-content:center; font-size:15px; color:var(--txt2); cursor:pointer;
    transition:color .1s, font-weight .1s; user-select:none;
}
.date-picker-item.selected { color:var(--txt); font-weight:700; font-size:16px; }
.date-picker-highlight {
    position:absolute; left:12px; right:12px; top:50%;
    transform:translateY(-50%); height:44px; background:var(--card2);
    border-radius:10px; border:1px solid var(--border); pointer-events:none;
    z-index:1;
}
.date-picker-col { position:relative; z-index:2; }
.date-picker-confirm {
    width:100%; margin-top:10px; padding:11px; background:var(--green);
    border:none; border-radius:12px; color:#fff; font-size:14px; font-weight:700;
    cursor:pointer; font-family:inherit;
}
.feeling-btn:active { transform:scale(.9); }

/* ==================== TASKS ==================== */
.task-item { background:var(--card2); border-radius:var(--r); padding:15px; margin-bottom:10px; border-left:4px solid var(--warn); border-top:1px solid var(--border); border-right:1px solid var(--border); border-bottom:1px solid var(--border); }
.task-item.done { border-left-color:var(--green); opacity:.6; }
.task-title { font-size:15px; font-weight:700; margin-bottom:4px; letter-spacing:-.1px; }
.task-desc  { font-size:13px; color:var(--txt2); line-height:1.5; }

/* ==================== REMINDERS ==================== */
.reminder-item { display:flex; align-items:center; gap:12px; padding:14px; background:var(--card); border-radius:var(--r); margin-bottom:8px; border:1px solid var(--border); box-shadow:var(--sh0); }
.reminder-time { font-size:24px; font-weight:800; color:var(--green); min-width:62px; letter-spacing:-.5px; }
.reminder-days { font-size:12px; color:var(--txt2); margin-top:2px; font-weight:500; }
.day-btn { width:32px; height:32px; border-radius:50%; background:var(--card2); border:1.5px solid var(--border); color:var(--txt2); font-size:12px; font-weight:700; cursor:pointer; transition:all .15s; }
.day-btn.active { background:var(--green); border-color:var(--green); color:#fff; }

/* ==================== ACHIEVEMENTS ==================== */
.ach-grid { margin-top:4px; }
.ach-row { display:flex; align-items:center; gap:10px; padding:10px 2px; border-bottom:1px solid var(--border); }
.ach-row:last-child { border-bottom:none; }
.ach-row-icon { font-size:24px; width:34px; text-align:center; flex-shrink:0; }
.ach-row.locked .ach-row-icon { opacity:.25; filter:grayscale(1); }
.ach-row-body  { flex:1; min-width:0; }
.ach-row-name  { font-size:13px; font-weight:700; line-height:1.2; }
.ach-row.locked .ach-row-name  { color:var(--txt2); }
.ach-row-desc  { font-size:10px; color:var(--txt2); margin-top:1px; line-height:1.35; }
.ach-row-right { flex-shrink:0; text-align:right; min-width:46px; }
.ach-row-xp    { font-size:11px; font-weight:700; }
.ach-row-date  { font-size:9px; color:var(--txt2); margin-top:2px; }
.ach-row-lock  { font-size:18px; color:var(--border); }
.ach-mini-bar  { height:3px; background:var(--border); border-radius:2px; margin-top:4px; overflow:hidden; max-width:120px; }
.ach-mini-fill { height:100%; border-radius:2px; transition:width .5s; }
.ach-mini-txt  { font-size:9px; color:var(--txt2); margin-top:2px; }
.ach-row.lvl-bronze .ach-row-xp { color:#c97c30; }
.ach-row.lvl-silver .ach-row-xp { color:#8a9aa8; }
.ach-row.lvl-gold   .ach-row-xp { color:#d4a017; }
.ach-row.lvl-plat   .ach-row-xp { color:#22b8c8; }
.ach-row.lvl-legend .ach-row-xp { color:#c040e0; }
.ach-row.lvl-bronze .ach-mini-fill { background:#c97c30; }
.ach-row.lvl-silver .ach-mini-fill { background:#8a9aa8; }
.ach-row.lvl-gold   .ach-mini-fill { background:#d4a017; }
.ach-row.lvl-plat   .ach-mini-fill { background:#22b8c8; }
.ach-row.lvl-legend .ach-mini-fill { background:#c040e0; }
.ach-section-head  { display:flex; align-items:center; justify-content:space-between; padding:12px 2px 8px; cursor:pointer; user-select:none; }
.ach-section-title { font-size:13px; font-weight:800; letter-spacing:-.1px; }
.ach-section-right { display:flex; align-items:center; gap:6px; }
.ach-section-count { font-size:10px; color:var(--txt2); background:var(--card2); padding:2px 8px; border-radius:10px; font-weight:600; border:1px solid var(--border); }
.ach-section-arr   { font-size:14px; color:var(--txt3); transition:transform .22s; }
.ach-section-arr.open { transform:rotate(90deg); }
.ach-section-body  { overflow:hidden; max-height:2000px; transition:max-height .35s ease; }
.ach-section-body.collapsed { max-height:0; }
.ach-header {
    background:linear-gradient(135deg,var(--green) 0%,#0a3020 100%);
    border-radius:var(--r-lg); padding:16px;
    margin-bottom:12px; border:1px solid var(--green);
}
.ach-hrow { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:10px; }
.ach-hbox { background:rgba(255,255,255,.1); border-radius:10px; padding:8px 4px; text-align:center; }
.ach-hbox-v { font-size:16px; font-weight:800; color:#fff; }
.ach-hbox-l { font-size:9px; color:rgba(255,255,255,.6); margin-top:2px; font-weight:600; letter-spacing:.3px; text-transform:uppercase; }

/* ==================== LEVEL CARD ==================== */
.level-card {
    background:linear-gradient(135deg, var(--green) 0%, #0a3020 100%);
    border-radius:var(--r-lg); padding:18px; margin-bottom:14px;
    border:1px solid var(--green); box-shadow:0 4px 20px rgba(26,102,66,.25);
}
.level-title { font-size:10px; color:rgba(255,255,255,.65); text-transform:uppercase; letter-spacing:.9px; margin-bottom:3px; font-weight:700; }
.level-name  { font-size:22px; font-weight:800; color:#fff; letter-spacing:-.3px; }
.level-bar   { height:6px; background:rgba(255,255,255,.2); border-radius:4px; overflow:hidden; margin-top:12px; }
.level-fill  { height:100%; background:rgba(255,255,255,.85); border-radius:4px; transition:width .8s cubic-bezier(.4,0,.2,1); }
.level-meta  { display:flex; justify-content:space-between; font-size:11px; color:rgba(255,255,255,.6); margin-top:5px; font-weight:600; }

/* ==================== TRAINER PANEL ==================== */
.client-card { background:var(--card2); border-radius:var(--r); padding:15px; margin-bottom:10px; cursor:pointer; border:1px solid var(--border); transition:border-color .15s; }
.client-card:active { border-color:var(--green); }
.client-card-name { font-size:16px; font-weight:700; margin-bottom:10px; letter-spacing:-.2px; }
.client-card-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.cc-stat { background:var(--card); border-radius:10px; padding:9px; text-align:center; border:1px solid var(--border); }
.cc-stat-val   { font-size:17px; font-weight:800; color:var(--green); letter-spacing:-.3px; }
.cc-stat-label { font-size:10px; color:var(--txt2); margin-top:2px; font-weight:600; text-transform:uppercase; letter-spacing:.4px; }
.tp-badge { display:inline-flex; align-items:center; gap:5px; background:var(--card2); border-radius:20px; padding:5px 12px; font-size:12px; font-weight:600; margin:3px 3px 3px 0; border:1px solid var(--border); }
.tp-cert-item { display:flex; align-items:flex-start; gap:10px; padding:11px 0; border-bottom:1px solid var(--border); }
.tp-cert-item:last-child { border-bottom:none; }
.tp-ach-item  { display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--border); }
.tp-ach-item:last-child { border-bottom:none; }
.tp-ach-icon  { font-size:28px; flex-shrink:0; }

/* ==================== EMPTY STATE ==================== */
.empty { text-align:center; padding:44px 20px; }
.empty-icon  { font-size:52px; margin-bottom:14px; opacity:.35; }
.empty-title { font-size:17px; font-weight:700; margin-bottom:6px; letter-spacing:-.2px; }
.empty-sub   { font-size:13px; color:var(--txt2); line-height:1.6; }

/* ==================== STEPS RING ==================== */
.steps-ring { display:flex; justify-content:center; margin:8px 0 16px; }
.steps-ring svg { overflow:visible; }

/* ==================== PHOTO GALLERY ==================== */
.photo-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px; }
.photo-item { position:relative; aspect-ratio:1; border-radius:var(--r); overflow:hidden; cursor:pointer; background:var(--card2); }
.photo-item img { width:100%; height:100%; object-fit:cover; }
.photo-item-info { position:absolute; bottom:0; left:0; right:0; background:linear-gradient(transparent, rgba(0,0,0,.75)); padding:10px 12px; }
.photo-item-date { font-size:12px; font-weight:700; color:#fff; }
.photo-item-kg   { font-size:11px; color:rgba(255,255,255,.7); }

/* ==================== MEDIA BUTTONS ==================== */
.media-btn { display:inline-flex; align-items:center; gap:5px; padding:5px 11px; border-radius:20px; border:1.5px solid var(--border); background:var(--card2); color:var(--txt2); font-size:11px; font-weight:700; cursor:pointer; transition:all .15s; }
.media-btn:active { border-color:var(--green); color:var(--green); }
.media-btn.has-media { border-color:var(--green); color:var(--green); background:var(--green-a); }
.video-btn-ex { position:absolute; right:8px; top:8px; }

/* ==================== DROPDOWN ==================== */
.dropdown { position:relative; display:inline-block; }
.dropdown-btn { background:none; border:none; color:var(--txt2); font-size:20px; cursor:pointer; padding:0 8px; line-height:1; }
.dropdown-content { display:none; position:absolute; right:0; background:var(--card); border:1px solid var(--border); border-radius:var(--r); min-width:165px; box-shadow:var(--sh2); z-index:100; overflow:hidden; }
.dropdown-content.show { display:block; animation:scaleIn .15s ease; }
.dropdown-item { padding:11px 14px; font-size:13px; cursor:pointer; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:9px; font-weight:500; transition:background .12s; }
.dropdown-item:last-child { border-bottom:none; }
.dropdown-item:active { background:var(--card2); }

/* ==================== SKELETON ==================== */
.skel {
    background:linear-gradient(90deg, var(--card2) 25%, var(--border) 50%, var(--card2) 75%);
    background-size:600px 100%;
    animation:shimmer 1.5s infinite linear;
    border-radius:var(--r-sm);
}
.skel-line  { height:13px; margin-bottom:10px; border-radius:6px; }
.skel-line.short { width:50%; }
.skel-line.med   { width:72%; }
.skel-card  { height:88px; border-radius:var(--r-lg); margin-bottom:12px; }
.skel-sg    { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:14px; }
.skel-sg-item { height:64px; border-radius:var(--r); }

/* ==================== SPLASH ==================== */
#splash {
    position:fixed; inset:0; z-index:99999;
    display:flex; align-items:center; justify-content:center;
    background:var(--bg);
    animation:splashFadeIn .5s ease forwards;
    transition:opacity .6s ease, visibility .6s ease;
}
@keyframes splashFadeIn { from{opacity:0} to{opacity:1} }
#splash.hide { opacity:0; visibility:hidden; pointer-events:none; }
#splash img {
    width:72vw; max-width:340px;
    animation:splashPulse 1.8s ease-in-out infinite;
    will-change:opacity, transform;
    mix-blend-mode:multiply;
}
[data-theme="dark"] #splash img { mix-blend-mode:screen; }
@keyframes splashPulse {
    0%   { opacity:0;   transform:scale(.88); }
    25%  { opacity:1;   transform:scale(1.02); }
    60%  { opacity:1;   transform:scale(1); }
    100% { opacity:.55; transform:scale(.96); }
}


/* ==================== CONFIRM BOTTOM SHEET ==================== */
#confirm-sheet {
    display:none;
    position:fixed;inset:0;z-index:9999;
}
#confirm-sheet.show { display:block; }
#confirm-sheet-overlay {
    position:absolute;inset:0;
    background:rgba(0,0,0,.45);
    backdrop-filter:blur(2px);
    animation:fadeIn .18s ease;
}
#confirm-sheet-box {
    position:absolute;bottom:0;left:0;right:0;
    background:var(--card);
    border-radius:20px 20px 0 0;
    padding:24px 20px 32px;
    animation:slideUp .22s cubic-bezier(.4,0,.2,1);
}
#confirm-sheet-icon {
    text-align:center;font-size:38px;margin-bottom:12px;
}
#confirm-sheet-title {
    font-size:17px;font-weight:700;text-align:center;
    margin-bottom:8px;color:var(--txt);
}
#confirm-sheet-msg {
    font-size:13px;color:var(--txt2);text-align:center;
    line-height:1.5;margin-bottom:22px;
}
#confirm-sheet-btns {
    display:flex;flex-direction:column;gap:10px;
}
.csb-btn-confirm {
    background:var(--red,#ef4444);color:#fff;
    border:none;border-radius:14px;padding:14px;
    font-size:15px;font-weight:700;cursor:pointer;
    transition:opacity .15s;
}
.csb-btn-confirm.green { background:var(--green); }
.csb-btn-confirm:active { opacity:.8; }
.csb-btn-cancel {
    background:var(--card2);color:var(--txt2);
    border:none;border-radius:14px;padding:13px;
    font-size:15px;font-weight:600;cursor:pointer;
}
@keyframes slideUp { from{transform:translateY(100%)} to{transform:translateY(0)} }
@keyframes fadeIn  { from{opacity:0} to{opacity:1} }

/* ==================== UTILITY CLASSES (П.2) ==================== */
/* Flex helpers */
.row          { display:flex;align-items:center; }
.row-between  { display:flex;align-items:center;justify-content:space-between; }
.row-center   { display:flex;align-items:center;justify-content:center; }
.col          { display:flex;flex-direction:column; }
.gap4         { gap:4px; }
.gap6         { gap:6px; }
.gap8         { gap:8px; }
.gap10        { gap:10px; }
.gap12        { gap:12px; }
.mb4          { margin-bottom:4px; }
.mb6          { margin-bottom:6px; }
.mb8          { margin-bottom:8px; }
.mb10         { margin-bottom:10px; }
.mb12         { margin-bottom:12px; }
.mb14         { margin-bottom:14px; }
.mb16         { margin-bottom:16px; }
.mb20         { margin-bottom:20px; }
.mt8          { margin-top:8px; }
.mt12         { margin-top:12px; }
.mt16         { margin-top:16px; }
/* Text helpers */
.txt-center   { text-align:center; }
.txt-sm       { font-size:12px; }
.txt-xs       { font-size:11px; }
.txt-md       { font-size:14px; }
.txt-muted    { color:var(--txt2); }
.txt-bold     { font-weight:700; }
.txt-semi     { font-weight:600; }
.lh15         { line-height:1.5; }
/* Section labels */
.sec-label {
    font-size:11px;font-weight:700;letter-spacing:.06em;
    text-transform:uppercase;color:var(--txt2);
    margin-bottom:8px;
}
/* Empty state */
.empty-state {
    text-align:center;padding:32px 20px;color:var(--txt2);
}
.empty-state-icon { font-size:36px;margin-bottom:10px; }
.empty-state-title { font-weight:600;font-size:15px;margin-bottom:6px;color:var(--txt); }
.empty-state-sub   { font-size:13px;line-height:1.5; }
/* Grid stats */
.stats-grid-2 { display:grid;grid-template-columns:repeat(2,1fr);gap:8px; }
.stats-grid-3 { display:grid;grid-template-columns:repeat(3,1fr);gap:8px; }
.stats-grid-4 { display:grid;grid-template-columns:repeat(4,1fr);gap:6px; }
/* Tag/chip */
.tag {
    display:inline-flex;align-items:center;gap:4px;
    background:var(--card2);border:1px solid var(--border);
    border-radius:10px;padding:5px 10px;
    font-size:12px;font-weight:600;color:var(--txt2);
}
/* Divider */
.divider { height:1px;background:var(--border);margin:12px 0; }

/* ==================== SYSTEM THEME ====================  */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) {
        --bg:     #080B0E;
        --card:   #111722;
        --card2:  #161E28;
        --border: rgba(255,255,255,.07);
        --txt:    #F0F4F8;
        --txt2:   #8A96A8;
        --txt3:   #3A4555;
        --green:  #25A664;
        --green2: #1D8A52;
        --green-a:rgba(37,166,100,.14);
        --sh0: 0 1px 3px rgba(0,0,0,.3);
        --sh1: 0 2px 12px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.2);
        --sh2: 0 8px 32px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.3);
        --sh3: 0 20px 60px rgba(0,0,0,.7), 0 6px 16px rgba(0,0,0,.4);
    }
}

/* ==================== TRAINER ANALYTICS ==================== */
.client-card-v2 {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 14px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s;
}
.client-card-v2:active { transform: scale(.985); }
.client-card-v2.silent { border-color: rgba(239,68,68,.35); }
.cc2-header { display:flex;align-items:center;gap:10px;margin-bottom:10px; }
.cc2-avatar {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--card2);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; flex-shrink: 0;
    position: relative; overflow: hidden;
}
.cc2-avatar img {
    width:100%;height:100%;object-fit:cover;border-radius:50%;
    position:absolute;inset:0;
}
.cc2-name { font-weight:700;font-size:14px;flex:1; }
.cc2-badge {
    font-size:11px;font-weight:700;padding:3px 8px;border-radius:8px;
}
.cc2-badge.silent { background:rgba(239,68,68,.12);color:var(--red); }
.cc2-badge.active { background:rgba(34,197,94,.12);color:var(--green); }
.cc2-badge.streak { background:rgba(245,158,11,.12);color:#f59e0b; }
.cc2-stats { display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:10px; }
.cc2-stat { text-align:center; }
.cc2-stat-v { font-size:15px;font-weight:800;color:var(--txt); }
.cc2-stat-l { font-size:10px;color:var(--txt2);margin-top:1px; }
.cc2-activity {
    display:flex;gap:3px;align-items:center;
}
.cc2-day {
    flex:1;height:20px;border-radius:4px;
    background: var(--card2);
    position:relative;
}
.cc2-day.active { background: var(--green); opacity:.8; }
.cc2-day-label {
    font-size:9px;color:var(--txt2);text-align:center;
    margin-top:2px;
}

/* Analytics summary cards */
.analytics-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}
.analytics-card {
    background: var(--card2);
    border-radius: 14px;
    padding: 12px;
    text-align: center;
}
.analytics-card-val {
    font-size: 22px;
    font-weight: 800;
    color: var(--txt);
}
.analytics-card-val.green { color: var(--green); }
.analytics-card-val.red   { color: var(--red); }
.analytics-card-val.orange { color: #f59e0b; }
.analytics-card-label {
    font-size: 11px;
    color: var(--txt2);
    margin-top: 3px;
    font-weight: 600;
}
.alert-banner {
    background: rgba(239,68,68,.1);
    border: 1px solid rgba(239,68,68,.25);
    border-radius: 12px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 13px;
    color: var(--txt);
}

/* ==================== UNREAD BADGES ==================== */
.nav-badge {
    position: absolute;
    top: 2px; right: 6px;
    min-width: 16px; height: 16px;
    background: var(--red, #ef4444);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    padding: 0 4px;
    pointer-events: none;
    line-height: 1;
    box-shadow: 0 1px 4px rgba(0,0,0,.3);
    animation: badgePop .2s cubic-bezier(.4,0,.2,1);
}
@keyframes badgePop {
    from { transform: scale(0); }
    to   { transform: scale(1); }
}
.bnav button { position: relative; }

/* Бейдж на карточке клиента в панели тренера */
.cc2-unread {
    background: var(--red, #ef4444);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    border-radius: 10px;
    padding: 2px 7px;
    margin-left: auto;
    flex-shrink: 0;
}

/* ==================== REDESIGN 2026 ==================== */

/* Refined cards */
.card {
    background: var(--card);
    border-radius: 20px;
    padding: 18px;
    margin-bottom: 12px;
    border: 1px solid rgba(255,255,255,.06);
    box-shadow: 0 2px 16px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.2);
    transition: transform .2s, box-shadow .2s;
}

/* Header refinement */
.hdr {
    background: rgba(9,9,13,.88) !important;
    border-bottom: 1px solid rgba(255,255,255,.05) !important;
    backdrop-filter: blur(28px) saturate(1.5) !important;
    -webkit-backdrop-filter: blur(28px) saturate(1.5) !important;
}

/* Buttons improved */
.btn-green {
    background: linear-gradient(135deg, #25A664, #1A7A4C) !important;
    box-shadow: 0 4px 20px rgba(37,166,100,.35) !important;
    letter-spacing: -.1px;
}
.btn-green:active { transform: scale(.97) !important; box-shadow: none !important; }
.btn-gray { background: rgba(255,255,255,.05) !important; border-color: rgba(255,255,255,.08) !important; }

/* Input refined */
.inp {
    background: rgba(255,255,255,.04) !important;
    border-color: rgba(255,255,255,.08) !important;
}
.inp:focus {
    background: rgba(37,166,100,.04) !important;
    border-color: rgba(37,166,100,.5) !important;
    box-shadow: 0 0 0 3px rgba(37,166,100,.1) !important;
}

/* Modal refined */
.modal {
    background: #111722 !important;
    border: 1px solid rgba(255,255,255,.07) !important;
    border-radius: 28px !important;
}

/* Tabs refined */
.tabs { gap: 7px; }
.tab {
    background: rgba(255,255,255,.04) !important;
    border-color: rgba(255,255,255,.07) !important;
    border-radius: 24px !important;
}
.tab.active {
    background: rgba(37,166,100,.18) !important;
    border-color: rgba(37,166,100,.35) !important;
    color: #25A664 !important;
    box-shadow: 0 0 20px rgba(37,166,100,.15) !important;
}

/* ── ACHIEVEMENT BADGE GRID ── */
.ach-badge-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 6px 0 10px;
}
.ach-badge {
    background: rgba(255,255,255,.04);
    border-radius: 16px;
    padding: 13px 8px 11px;
    text-align: center;
    border: 1px solid rgba(255,255,255,.07);
    transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s, border-color .2s;
    cursor: default;
    position: relative;
    overflow: hidden;
}
.ach-badge.unlocked {
    border-color: rgba(37,166,100,.25);
    background: rgba(37,166,100,.07);
}
.ach-badge.unlocked::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(37,166,100,.5), transparent);
}
.ach-badge.locked { opacity: .45; filter: grayscale(.7); }
.ach-badge-icon { font-size: 28px; display: block; margin-bottom: 5px; line-height: 1; }
.ach-badge-name { font-size: 10px; font-weight: 700; line-height: 1.3; color: var(--txt); }
.ach-badge-xp {
    font-size: 10px; font-weight: 800; margin-top: 4px;
    color: var(--green);
}
.ach-badge.locked .ach-badge-xp { color: var(--txt3); }
.ach-badge.lvl-bronze.unlocked { border-color: rgba(201,124,48,.3); background: rgba(201,124,48,.07); }
.ach-badge.lvl-silver.unlocked { border-color: rgba(138,154,168,.3); background: rgba(138,154,168,.07); }
.ach-badge.lvl-gold.unlocked   { border-color: rgba(212,160,23,.35); background: rgba(212,160,23,.08); }
.ach-badge.lvl-plat.unlocked   { border-color: rgba(34,184,200,.3); background: rgba(34,184,200,.07); }
.ach-badge.lvl-legend.unlocked { border-color: rgba(192,64,224,.35); background: rgba(192,64,224,.08); }
.ach-badge.lvl-bronze.unlocked .ach-badge-xp { color: #c97c30; }
.ach-badge.lvl-silver.unlocked .ach-badge-xp { color: #8a9aa8; }
.ach-badge.lvl-gold.unlocked   .ach-badge-xp { color: #d4a017; }
.ach-badge.lvl-plat.unlocked   .ach-badge-xp { color: #22b8c8; }
.ach-badge.lvl-legend.unlocked .ach-badge-xp { color: #c040e0; }

@keyframes badgeUnlock {
    0%   { transform: scale(.7); opacity: 0; }
    60%  { transform: scale(1.12); }
    100% { transform: scale(1); opacity: 1; }
}
.ach-badge.just-unlocked { animation: badgeUnlock .45s cubic-bezier(.22,1,.36,1) forwards; }

/* Achievement header refined */
.ach-header {
    background: linear-gradient(135deg, rgba(37,166,100,.22) 0%, rgba(9,9,13,0) 100%) !important;
    border: 1px solid rgba(37,166,100,.2) !important;
    position: relative;
    overflow: hidden;
}
.ach-header::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(37,166,100,.6), transparent);
}

/* Level card refined */
.level-card {
    background: linear-gradient(135deg, rgba(37,166,100,.2) 0%, rgba(9,9,13,0) 100%) !important;
    border: 1px solid rgba(37,166,100,.2) !important;
    box-shadow: 0 4px 24px rgba(37,166,100,.15) !important;
    position: relative;
    overflow: hidden;
}
.level-card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(37,166,100,.6), transparent);
}

/* Progress bar refined */
.pbar { height: 5px; border-radius: 3px; background: rgba(255,255,255,.06); }
.pbar-fill { background: linear-gradient(90deg, var(--green), #1ff89a); border-radius: 3px; }

/* Stat grid refined */
.sg-item {
    background: rgba(255,255,255,.04) !important;
    border-color: rgba(255,255,255,.06) !important;
    border-radius: 16px !important;
}
.sg-val { letter-spacing: -.8px; }

/* List item refined */
.li { border-bottom: 1px solid rgba(255,255,255,.05); }
.li-icon { border-radius: 14px; background: rgba(255,255,255,.05) !important; border: none !important; }

/* Section label */
.sec-label { letter-spacing: .8px; font-size: 10px !important; }

/* Card hover for trainer cards */
.cc2 { transition: transform .18s, box-shadow .18s; }
.cc2:active { transform: scale(.985); }

/* Smooth page transitions */
.sec.active { animation: pageIn .32s cubic-bezier(.22,1,.36,1) both; }
@keyframes pageIn {
    from { opacity: 0; transform: translateY(18px) scale(.99); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Scroll progress micro */
.pbar-fill { transition: width .7s cubic-bezier(.4,0,.2,1) !important; }

/* Toast refined */
.toast {
    background: rgba(17,23,34,.97) !important;
    color: var(--txt) !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.5) !important;
}

/* Pulse animation */
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* Settings */
.st-tab { flex:1;padding:10px 0;border:none;background:none;font-size:12px;font-weight:600;cursor:pointer;color:var(--txt2);border-bottom:2px solid transparent;transition:.15s; }
.st-tab-active { color:var(--green);border-bottom-color:var(--green);font-weight:700; }
.st-row { display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--border); }
.st-row:last-child { border-bottom:none; }
.st-label { font-size:14px;font-weight:500; }
.st-sub { font-size:12px;color:var(--txt2);margin-top:2px; }
.st-toggle { position:relative;width:44px;height:24px;flex-shrink:0 }
.st-toggle input { opacity:0;width:0;height:0 }
.st-toggle-slider { position:absolute;inset:0;background:var(--border);border-radius:24px;cursor:pointer;transition:.2s }
.st-toggle-slider:before { content:'';position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s }
.st-toggle input:checked + .st-toggle-slider { background:var(--green) }
.st-toggle input:checked + .st-toggle-slider:before { transform:translateX(20px) }