:root {
  --bg: var(--tg-theme-bg-color, #0f1714);
  --surface: var(--tg-theme-secondary-bg-color, #18221e);
  --surface-2: #202d28;
  --text: var(--tg-theme-text-color, #f5f8f6);
  --hint: var(--tg-theme-hint-color, #91a19a);
  --accent: var(--tg-theme-button-color, #baf34d);
  --accent-text: var(--tg-theme-button-text-color, #122000);
  --line: rgba(255,255,255,.09);
  --danger: #ff756d;
  --safe-bottom: max(16px, env(safe-area-inset-bottom));
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }
body { overscroll-behavior: none; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
.app-frame { width: min(100%, 560px); min-height: 100vh; margin: 0 auto; }
.app-header { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; height: calc(58px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 16px 0; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(18px); }
.global-nav { position: sticky; top: calc(58px + env(safe-area-inset-top)); z-index: 10; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 5px; padding: 6px 12px; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(16px); }
.global-nav button { padding: 8px 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--hint); font-size: 10px; font-weight: 700; }
.logo { display: flex; align-items: center; gap: 9px; font-size: 16px; }
.logo > span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: var(--accent); color: var(--accent-text); font-weight: 900; }
.profile-chip { display: flex; align-items: center; gap: 7px; max-width: 145px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 99px; background: transparent; color: var(--hint); font-size: 12px; overflow: hidden; }
.profile-chip i { flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.profile-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.screen { min-height: calc(100vh - 58px); padding: 18px 16px calc(24px + env(safe-area-inset-bottom)); }
.loading-screen { display: grid; place-content: center; justify-items: center; gap: 14px; color: var(--hint); font-size: 13px; }
.loader { width: 34px; height: 34px; border: 3px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.welcome-copy { padding-top: clamp(22px, 8vh, 70px); }
.badge { display: inline-flex; color: var(--accent); font-size: 10px; font-weight: 800; letter-spacing: .15em; }
h1 { margin: 12px 0 16px; font-size: clamp(36px, 10vw, 52px); line-height: 1.02; letter-spacing: -.045em; }
h1 em { color: var(--accent); font-style: normal; }
.welcome-copy > p, .dashboard-title > p { margin: 0; color: var(--hint); font-size: 15px; line-height: 1.55; }
.feature-card { display: flex; gap: 12px; margin-top: 28px; padding: 15px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.feature-icon { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); font-weight: 900; }
.feature-card b { font-size: 14px; }
.feature-card p { margin: 5px 0 0; color: var(--hint); font-size: 12px; line-height: 1.45; }
.quick-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0 24px; }
.quick-stats div { padding: 13px 8px; text-align: center; border: 1px solid var(--line); border-radius: 15px; }
.quick-stats b { display: block; font-size: 17px; }
.quick-stats span { display: block; margin-top: 4px; color: var(--hint); font-size: 9px; line-height: 1.2; }
.main-button { width: 100%; min-height: 52px; display: flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 15px; background: var(--accent); color: var(--accent-text); font-weight: 800; }
.main-button span { font-size: 19px; }
.main-button:disabled { opacity: .45; cursor: default; }
.legal-hint { margin: 12px 0 0; text-align: center; color: var(--hint); font-size: 10px; }
.quiz-screen { position: relative; padding-bottom: 108px; }
.quiz-topline { display: flex; align-items: center; gap: 14px; }
.icon-button { width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--hint); font-size: 24px; line-height: 1; }
.progress-meta { flex: 1; display: flex; justify-content: space-between; color: var(--hint); font-size: 12px; }
.progress-meta b { color: var(--text); }
.progress-track { height: 4px; margin-top: 14px; border-radius: 99px; background: var(--line); overflow: hidden; }
.progress-track span { display: block; height: 100%; width: 7%; border-radius: inherit; background: var(--accent); transition: width .25s ease; }
.quiz-body { padding: 34px 0 12px; animation: appear .2s ease; }
@keyframes appear { from { opacity: 0; transform: translateY(6px); } }
.question-index { color: var(--accent); font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.question-title { margin: 9px 0 8px; font-size: 28px; line-height: 1.16; letter-spacing: -.025em; }
.question-help { margin: 0 0 24px; color: var(--hint); font-size: 13px; line-height: 1.5; }
.options { display: grid; gap: 9px; }
.option { position: relative; width: 100%; min-height: 54px; display: flex; align-items: center; gap: 12px; padding: 12px 14px; text-align: left; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--text); }
.option.selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.option-emoji { flex: 0 0 27px; text-align: center; font-size: 20px; }
.option-label { flex: 1; font-size: 14px; font-weight: 600; }
.option-check { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--line); border-radius: 50%; color: transparent; font-size: 12px; }
.option.selected .option-check { border-color: var(--accent); background: var(--accent); color: var(--accent-text); }
.number-box { display: flex; align-items: baseline; gap: 10px; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.number-box input { min-width: 0; width: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 42px; font-weight: 800; letter-spacing: -.04em; }
.number-box span { color: var(--hint); font-size: 14px; }
.detail-box { width: 100%; min-height: 100px; margin-top: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; outline: 0; resize: vertical; background: var(--surface); color: var(--text); }
.detail-box:focus, .number-box:focus-within { border-color: var(--accent); }
.health-note { display: flex; gap: 10px; margin-bottom: 14px; padding: 12px; border-radius: 14px; background: rgba(255,117,109,.1); color: #ffb0aa; font-size: 11px; line-height: 1.45; }
.consent-card { display: flex; align-items: flex-start; gap: 11px; margin-top: 18px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; color: var(--hint); font-size: 11px; line-height: 1.5; }
.consent-card input { flex: 0 0 20px; width: 20px; height: 20px; accent-color: var(--accent); }
.quiz-footer { position: fixed; left: 50%; bottom: 0; z-index: 20; width: min(100%, 560px); transform: translateX(-50%); display: grid; grid-template-columns: 96px 1fr; gap: 10px; padding: 12px 16px var(--safe-bottom); background: linear-gradient(transparent, var(--bg) 20%); }
.back-button { min-height: 52px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); color: var(--text); font-weight: 700; }
.dashboard-screen { padding-bottom: calc(34px + env(safe-area-inset-bottom)); }
.locked-screen { padding-bottom: calc(34px + env(safe-area-inset-bottom)); }
.locked-hero { padding-top: 22px; text-align: center; }
.ready-check { width: 52px; height: 52px; display: grid; place-items: center; margin: 0 auto 16px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); font-size: 25px; font-weight: 900; }
.locked-hero h1 { margin: 10px 0; font-size: 32px; }
.locked-hero p { max-width: 390px; margin: 0 auto; color: var(--hint); font-size: 13px; line-height: 1.5; }
.preview-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 22px 0 10px; }
.preview-metric { padding: 14px 7px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); text-align: center; }
.preview-metric b { display: block; color: var(--accent); font-size: 20px; }
.preview-metric span { display: block; margin-top: 4px; color: var(--hint); font-size: 9px; line-height: 1.2; }
.included-card, .purchase-card { margin-top: 10px; padding: 16px; border: 1px solid var(--line); border-radius: 19px; background: var(--surface); }
.included-card h3 { margin: 0 0 12px; font-size: 15px; }
.included-row { display: flex; align-items: center; gap: 11px; padding: 11px 0; border-top: 1px solid var(--line); }
.included-row > span { flex: 0 0 30px; font-size: 21px; }
.included-row > div { flex: 1; }
.included-row b { font-size: 13px; }
.included-row p { margin: 3px 0 0; color: var(--hint); font-size: 10px; }
.included-row i { color: var(--accent); font-style: normal; font-weight: 900; }
.locked-days { margin-top: 10px; }
.locked-day { display: flex; align-items: center; gap: 11px; margin-bottom: 7px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); }
.locked-day span { display: grid; place-items: center; flex: 0 0 31px; width: 31px; height: 31px; border-radius: 10px; background: var(--surface-2); font-size: 14px; }
.locked-day div { flex: 1; min-width: 0; }
.locked-day b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.locked-day small { color: var(--hint); font-size: 9px; }
.locked-day i { color: var(--hint); font-style: normal; }
.purchase-card { text-align: center; border-color: color-mix(in srgb, var(--accent) 34%, var(--line)); }
.purchase-card > span { color: var(--accent); font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.price { display: flex; align-items: baseline; justify-content: center; gap: 7px; margin: 8px 0 14px; }
.price b { font-size: 34px; letter-spacing: -.04em; }
.price small { color: var(--hint); font-size: 11px; }
.purchase-card > p { margin: 2px 0 0; color: var(--hint); font-size: 9px; }
.profile-screen { padding-bottom: calc(34px + env(safe-area-inset-bottom)); }
.profile-topline { display: flex; align-items: flex-start; gap: 13px; padding-top: 12px; }
.profile-topline h1 { margin: 6px 0 0; font-size: 30px; }
.profile-user { display: flex; align-items: center; gap: 12px; margin: 20px 0; padding: 15px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.profile-avatar { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 16%, var(--surface-2)); color: var(--accent); font-size: 18px; font-weight: 900; }
.profile-user b { display: block; font-size: 14px; }
.profile-user span { display: block; margin-top: 4px; color: var(--hint); font-size: 10px; }
.list-title { margin: 20px 2px 10px; font-size: 14px; }
.profile-program-card { display: flex; align-items: center; gap: 11px; width: 100%; margin-bottom: 8px; padding: 14px; text-align: left; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--text); }
.profile-program-icon { display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px; border-radius: 12px; background: var(--surface-2); }
.profile-program-copy { flex: 1; min-width: 0; }
.profile-program-copy b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.profile-program-copy span { display: block; margin-top: 4px; color: var(--hint); font-size: 9px; }
.profile-program-card > i { color: var(--hint); font-style: normal; }
.empty-card { padding: 20px; text-align: center; border: 1px dashed var(--line); border-radius: 16px; color: var(--hint); font-size: 11px; }
.payment-screen h1 { margin: 5px 0 0; font-size: 29px; }
.payment-summary { margin: 22px 0 12px; padding: 18px; border: 1px solid var(--line); border-radius: 19px; background: var(--surface); }
.payment-summary > span, .payment-summary small { display: block; color: var(--hint); font-size: 11px; }
.payment-summary > b { display: block; margin: 7px 0; color: var(--accent); font-size: 32px; }
.payment-help { color: var(--hint); font-size: 12px; line-height: 1.55; }
.payment-methods { display: grid; gap: 10px; margin: 16px 0; }
.bank-card { display: flex; align-items: center; gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.bank-card div { flex: 1; min-width: 0; }
.bank-card span, .bank-card small { display: block; color: var(--hint); font-size: 10px; }
.bank-card b { display: block; margin: 6px 0; overflow-wrap: anywhere; font-size: 16px; letter-spacing: .04em; }
.bank-card button { flex: 0 0 auto; padding: 9px 10px; border: 1px solid var(--accent); border-radius: 10px; background: transparent; color: var(--accent); font-size: 9px; font-weight: 800; }
.moderation-note { margin-top: 8px; padding: 13px; border-radius: 14px; background: var(--surface); color: var(--hint); font-size: 10px; line-height: 1.45; }
.weekly-card { margin: 16px 0 10px; padding: 16px; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); border-radius: 19px; background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.weekly-card h3 { margin: 7px 0 5px; font-size: 18px; }
.weekly-card p { margin: 0 0 13px; color: var(--hint); font-size: 11px; line-height: 1.45; }
.weekly-card .main-button { min-height: 44px; }
.weekly-latest { margin: 10px 0; padding: 15px; border: 1px solid var(--line); border-radius: 17px; background: var(--surface); }
.weekly-latest > b { font-size: 13px; }
.weekly-latest div { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin: 10px 0; }
.weekly-latest div span { padding: 7px 3px; text-align: center; border-radius: 9px; background: var(--surface-2); color: var(--accent); font-size: 9px; font-weight: 800; }
.weekly-latest small { color: var(--hint); font-size: 9px; }
.weekly-history { display: grid; gap: 7px; }
.history-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.history-row b, .history-row small { display: block; }
.history-row b { font-size: 11px; }
.history-row small, .history-row > span { margin-top: 3px; color: var(--hint); font-size: 9px; }
.checkin-screen h1 { margin: 5px 0 0; font-size: 29px; }
.checkin-form { display: grid; gap: 10px; margin: 16px 0; }
.checkin-field { display: block; padding: 15px; border: 1px solid var(--line); border-radius: 17px; background: var(--surface); }
.checkin-field > b { display: block; margin-bottom: 10px; font-size: 13px; line-height: 1.35; }
.checkin-field select, .checkin-field > input[type="number"], .checkin-field textarea { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px; outline: none; background: var(--surface-2); color: var(--text); }
.checkin-field textarea { min-height: 76px; resize: vertical; }
.checkin-field small, .checkin-field output { display: block; margin-top: 7px; color: var(--hint); font-size: 9px; }
.checkin-field input[type="range"] { width: 100%; accent-color: var(--accent); }
.compact-number { display: flex; align-items: center; gap: 8px; }
.compact-number input { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-2); color: var(--text); }
.compact-number span { color: var(--hint); font-size: 11px; }
.measure-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.measure-grid input{min-width:0;padding:9px 6px;border:1px solid var(--line);border-radius:9px;background:var(--surface-2);color:var(--text);font-size:10px}
.channel-card { display: flex; justify-content: space-between; margin: 12px 0; padding: 15px; border-radius: 16px; background: var(--accent); color: var(--accent-text); text-decoration: none; font-size: 12px; font-weight: 800; }
.daily-card{display:grid;gap:9px;margin:10px 0;padding:14px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}.daily-card label{color:var(--hint);font-size:11px}.daily-card .main-button{min-height:42px}
.level-card{display:flex;justify-content:space-between;align-items:center;margin:10px 0;padding:14px;border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line));border-radius:16px;background:color-mix(in srgb,var(--accent) 8%,var(--surface))}.level-card span,.level-card b{display:block}.level-card span{color:var(--accent);font-size:10px;font-weight:800;text-transform:uppercase}.level-card b{margin-top:4px}.level-card small{color:var(--hint);font-size:9px}
.profile-post-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.mini-post{overflow:hidden;border:1px solid var(--line);border-radius:14px;background:var(--surface)}.mini-post img{display:block;width:100%;aspect-ratio:1;object-fit:cover}.mini-post div{padding:9px}.mini-post b,.mini-post small{display:block;font-size:9px}.mini-post small{margin-top:3px;color:var(--hint)}.mini-post button{margin-top:7px;padding:6px 8px;border:1px solid var(--danger);border-radius:8px;background:transparent;color:var(--danger);font-size:8px}.admin-danger{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:18px}.admin-danger button{padding:10px;border:1px solid var(--danger);border-radius:10px;background:transparent;color:var(--danger);font-size:9px}
.feed-screen h1,.ranking-screen h1,.admin-screen h1 { margin: 5px 0 0; font-size: 29px; }
.feed-tabs,.admin-tabs { display: grid; grid-auto-flow: column; gap: 6px; margin: 16px 0; }
.feed-tabs button,.admin-tabs button { padding: 11px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--hint); }
.feed-tabs button.active { border-color: var(--accent); color: var(--accent); }
.post-composer,.admin-form { display: grid; gap: 8px; margin: 12px 0 20px; padding: 14px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.post-composer textarea,.admin-form input,.admin-form textarea,#admin-user-search { width: 100%; padding: 11px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-2); color: var(--text); }
.admin-form textarea { min-height: 100px; }
.admin-form select{width:100%;padding:11px;border:1px solid var(--line);border-radius:11px;background:var(--surface-2);color:var(--text)}
.program-day-builder{padding:12px;border:1px solid var(--line);border-radius:14px}.program-exercise{display:grid;grid-template-columns:1fr .55fr auto;gap:5px;margin-top:6px}.program-exercise button{border:0;background:transparent;color:var(--danger)}
.feed-list { display: grid; gap: 16px; }
.social-card { overflow: hidden; border: 1px solid var(--line); border-radius: 19px; background: var(--surface); }
.social-head { display: flex; align-items: center; gap: 10px; padding: 12px; }
.social-head small { display:block;color:var(--hint);font-size:9px;margin-top:3px; }
.social-card > img { display:block;width:100%;max-height:580px;object-fit:cover;background:#000; }
.social-card > p { padding: 0 13px; font-size: 12px; line-height:1.45; }
.rating-box { display:flex;align-items:center;gap:9px;padding:12px;border-top:1px solid var(--line); }
.rating-box b { color:var(--accent); }.rating-box select{padding:7px;border-radius:9px;background:var(--surface-2);color:var(--text);border:1px solid var(--line)}.rating-box small{color:var(--hint)}
.ranking-list{display:grid;gap:8px}.rank-row,.admin-row{display:flex;align-items:center;gap:12px;padding:13px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}.rank-row.me{border-color:var(--accent)}.rank-row>span,.admin-row>span{flex:1}.rank-row small,.admin-row small{display:block;color:var(--hint);font-size:9px;margin-top:3px}.rank-row strong{color:var(--accent)}
.admin-row button{padding:8px;border:1px solid var(--accent);border-radius:9px;background:transparent;color:var(--accent);font-size:9px}.admin-pane h3{margin-top:22px}
.dashboard-title { padding-top: 22px; }
.dashboard-title h1 { font-size: 34px; margin-bottom: 10px; }
.progress-card { display: flex; align-items: center; gap: 14px; margin: 22px 0 14px; padding: 15px; border-radius: 19px; background: var(--surface); border: 1px solid var(--line); }
.progress-circle { --progress: 0deg; position: relative; flex: 0 0 58px; width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--accent) var(--progress), var(--line) 0); }
.progress-circle::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--surface); }
.progress-circle span { z-index: 1; font-size: 11px; font-weight: 800; }
.progress-card b { font-size: 14px; }
.progress-card p { margin: 5px 0 0; color: var(--hint); font-size: 11px; }
.tabbar { position: sticky; top: calc(58px + env(safe-area-inset-top)); z-index: 9; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 5px; border: 1px solid var(--line); border-radius: 16px; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(18px); }
.tabbar button { display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 48px; padding: 6px; border: 0; border-radius: 11px; background: transparent; color: var(--hint); font-size: 10px; font-weight: 700; }
.tabbar button span { font-size: 17px; filter: grayscale(1); }
.tabbar button.active { background: var(--surface-2); color: var(--text); }
.tabbar button.active span { filter: none; }
.tab-panel { padding-top: 12px; }
.workout-card { margin-bottom: 10px; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.workout-head { display: flex; align-items: center; gap: 12px; padding: 15px; }
.workout-number { display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px; border-radius: 12px; background: var(--surface-2); color: var(--accent); font-size: 12px; font-weight: 800; }
.workout-head-copy { flex: 1; min-width: 0; }
.workout-head small { display: block; color: var(--hint); font-size: 9px; font-weight: 700; letter-spacing: .08em; }
.workout-head h3 { margin: 4px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.complete-toggle { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: transparent; }
.complete-toggle.done { border-color: var(--accent); background: var(--accent); color: var(--accent-text); }
.expand-button { width: 24px; border: 0; background: transparent; color: var(--hint); font-size: 16px; transition: transform .2s; }
.workout-card.open .expand-button { transform: rotate(180deg); }
.exercise-list { display: none; border-top: 1px solid var(--line); }
.workout-card.open .exercise-list { display: block; }
.exercise { padding: 13px 15px; border-bottom: 1px solid var(--line); }
.exercise:last-child { border-bottom: 0; }
.exercise-row { display: flex; justify-content: space-between; gap: 12px; }
.exercise strong { font-size: 13px; }
.exercise b { flex: 0 0 auto; color: var(--accent); font-size: 12px; }
.exercise p { margin: 6px 0 0; color: var(--hint); font-size: 10px; line-height: 1.45; }
.video-link, .video-missing { display: inline-flex; margin-top: 7px; font-size: 10px; }
.video-link { color: var(--accent); text-decoration: none; font-weight: 700; }
.video-missing { color: var(--hint); }
.macro-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.macro { padding: 15px; border: 1px solid var(--line); border-radius: 17px; background: var(--surface); }
.macro strong { display: block; font-size: 23px; }
.macro span { color: var(--hint); font-size: 10px; }
.info-card { margin-top: 10px; padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); color: var(--hint); font-size: 12px; line-height: 1.55; }
.info-card h3 { margin: 0 0 9px; color: var(--text); font-size: 15px; }
.info-card ul { padding-left: 19px; }
.text-button { width: 100%; padding: 13px; border: 0; background: transparent; color: var(--hint); font-size: 12px; }
.modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; background: rgba(0,0,0,.6); }
.modal-sheet { width: min(100%, 560px); margin: 0 auto; padding: 10px 18px var(--safe-bottom); border-radius: 24px 24px 0 0; background: var(--surface); }
.modal-handle { width: 40px; height: 4px; margin: 0 auto 20px; border-radius: 9px; background: var(--line); }
.modal-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,117,109,.14); color: var(--danger); font-weight: 900; }
.modal h2 { margin: 14px 0 8px; font-size: 22px; }
.modal p { margin: 0 0 18px; color: var(--hint); font-size: 13px; line-height: 1.55; }
@media (prefers-color-scheme: light) {
  :root { --surface-2: #e8eee9; --line: rgba(10,30,20,.1); }
}

/* Mobile product shell */
:root{--bg:#0c1210;--surface:#151d1a;--surface-2:#1d2824;--text:#f4f8f5;--hint:#91a099;--accent:#c8f56a;--accent-text:#102000;--line:rgba(255,255,255,.08)}
html,body{overflow-x:hidden;background:var(--bg)}body{padding-bottom:72px}.app-frame{max-width:560px;overflow-x:hidden}.screen{padding:18px 16px calc(92px + env(safe-area-inset-bottom))}.app-header{height:64px;padding-left:16px;padding-right:16px}.global-nav{position:fixed;left:50%;bottom:0;top:auto;transform:translateX(-50%);z-index:40;width:min(100%,560px);grid-template-columns:repeat(5,1fr);grid-auto-flow:row;padding:8px 10px calc(8px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:rgba(12,18,16,.96)}.global-nav button{min-width:0;padding:10px 2px;border:0;background:transparent;font-size:9px;white-space:normal}.global-nav button:active{color:var(--accent);background:var(--surface-2)}
h1{font-size:clamp(30px,8vw,42px);line-height:1.05}.profile-topline{align-items:center}.profile-topline>div{min-width:0}.profile-topline h1{overflow-wrap:anywhere}.feed-tabs,.admin-tabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:3px}.feed-tabs::-webkit-scrollbar,.admin-tabs::-webkit-scrollbar{display:none}.feed-tabs button,.admin-tabs button{flex:0 0 auto;min-width:112px}.knowledge-screen,.ranking-screen{overflow-x:hidden}
input,select,textarea{max-width:100%;font-size:16px!important}#knowledge-search,#people-search,#admin-user-search{display:block;width:100%;min-height:48px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--text);outline:none}#knowledge-search:focus,#people-search:focus{border-color:var(--accent)}
.post-composer{padding:12px;gap:10px}.post-composer input[type=file]{width:100%;padding:9px;border:1px dashed var(--line);border-radius:12px;background:var(--surface-2);color:var(--hint);font-size:12px!important}.post-composer input[type=file]::file-selector-button{margin-right:10px;padding:9px 12px;border:0;border-radius:9px;background:var(--accent);color:var(--accent-text);font-weight:800}.post-composer textarea{min-height:90px;background:var(--surface-2)!important}.social-card{box-shadow:0 16px 35px rgba(0,0,0,.18)}.social-head{cursor:pointer}.profile-avatar{background:linear-gradient(145deg,var(--accent),#7faf42);color:var(--accent-text)}
.preview-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}.preview-metric{min-width:0}.bank-card,.admin-row,.history-row{min-width:0}.admin-row span{min-width:0}.admin-row small{overflow:hidden;text-overflow:ellipsis}.admin-row button{flex:0 0 auto}.admin-danger{position:sticky;bottom:72px;padding:8px;background:var(--bg)}
@media(max-width:390px){.global-nav button{font-size:8px}.screen{padding-left:12px;padding-right:12px}.quick-stats{gap:5px}.admin-danger{grid-template-columns:1fr}.profile-post-grid{grid-template-columns:1fr 1fr}}

/* Readability, desktop scrolling and fixed-navigation safe areas */
:root{--bottom-nav-height:72px}
html{height:auto!important;overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:auto!important;scroll-behavior:auto}
body{min-height:100vh!important;height:auto!important;overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:auto!important;padding-bottom:calc(var(--bottom-nav-height) + env(safe-area-inset-bottom))!important;font-size:16px;line-height:1.5;touch-action:pan-y}
.app-frame{width:100%;max-width:760px;min-height:100vh;height:auto!important;overflow-x:clip!important;overflow-y:visible!important}
.screen{min-height:calc(100vh - 64px);padding:24px 22px calc(var(--bottom-nav-height) + 64px + env(safe-area-inset-bottom))}
.global-nav{width:min(100%,760px);min-height:var(--bottom-nav-height);padding:9px 14px calc(9px + env(safe-area-inset-bottom))}
.global-nav button{min-height:48px;font-size:12px;line-height:1.2;border-radius:12px}
.global-nav button:focus-visible,.global-nav button.active{color:var(--accent);background:var(--surface)}
.app-header{height:72px}.logo{font-size:20px}.logo>span{width:42px;height:42px;font-size:18px}.profile-chip{font-size:15px;padding:9px 13px}
h1,.feed-screen h1,.ranking-screen h1,.admin-screen h1,.profile-topline h1{font-size:clamp(34px,6vw,48px);line-height:1.06;letter-spacing:-.035em}
.badge,.question-index{font-size:13px}.question-title{font-size:clamp(30px,5vw,42px)}.question-help{font-size:17px;line-height:1.55}.option-card{min-height:76px;padding:17px 20px}.option-label{font-size:18px}.progress-meta{font-size:15px}.health-note,.consent-card{font-size:14px}
.quiz-screen{padding-bottom:calc(var(--bottom-nav-height) + 112px + env(safe-area-inset-bottom))}
.quiz-footer{bottom:calc(var(--bottom-nav-height) + env(safe-area-inset-bottom));width:min(100%,760px);padding:18px 22px 16px;background:linear-gradient(transparent,var(--bg) 22%,var(--bg) 100%)}
.main-button,.back-button{min-height:58px;font-size:17px}
.profile-user b,.list-title,.daily-card b,.weekly-card b{font-size:18px}.profile-user span,.daily-card label,.weekly-card p,.weekly-card small{font-size:14px}.level-card span{font-size:13px}.level-card b{font-size:21px}.level-card small{font-size:13px}.channel-card{font-size:15px;padding:18px}
.profile-program-card{gap:14px;padding:17px;border-radius:18px}.profile-program-icon{width:46px;height:46px;flex-basis:46px;font-size:20px}.profile-program-copy b{margin-top:3px;white-space:normal;font-size:17px;line-height:1.3}.profile-program-copy span{font-size:14px;line-height:1.45}.profile-program-copy small{display:block;color:var(--accent);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.empty-card{font-size:15px;line-height:1.5}
.social-head b,.rank-row span,.admin-row b{font-size:16px}.social-head small,.rank-row small,.admin-row small{font-size:13px}.social-card>p{font-size:16px}.mini-post b,.mini-post small,.mini-post button{font-size:12px}

/* Knowledge base */
.knowledge-screen{overflow:visible!important}.knowledge-screen .profile-topline{margin-bottom:22px}.knowledge-screen #knowledge-search{min-height:58px;font-size:17px!important}
.category-strip-wrap{position:relative;width:100%;margin:18px 0 6px;overflow:hidden}.category-strip{display:flex;width:100%;gap:10px;padding:2px 2px 10px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:var(--accent) transparent;overscroll-behavior-x:contain}.category-strip::-webkit-scrollbar{height:5px}.category-strip::-webkit-scrollbar-thumb{border-radius:8px;background:var(--accent)}.category-strip button{flex:0 0 auto;min-height:54px;padding:13px 18px;scroll-snap-align:start;border:1px solid var(--line);border-radius:15px;background:var(--surface);color:var(--hint);font-size:16px;white-space:nowrap}.category-strip button.active{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--surface));color:var(--text);box-shadow:inset 0 0 0 1px var(--accent)}
.knowledge-result-label{margin:12px 2px;color:var(--hint);font-size:14px}.knowledge-list{display:grid;gap:10px}.knowledge-card{margin:0}.knowledge-card:disabled{opacity:.62}.knowledge-card>i{font-size:20px}
.article-topline{display:flex;align-items:center;gap:16px;margin-bottom:20px}.knowledge-article-screen>h1{max-width:680px;margin:0 0 24px;font-size:clamp(34px,6vw,50px)}.article-content{padding:24px;border:1px solid var(--line);border-radius:22px;background:var(--surface);box-shadow:0 18px 45px rgba(0,0,0,.18)}.article-content p{margin:0 0 18px;color:#d8e1dc;font-size:17px;line-height:1.75}.article-content .article-lead{color:var(--text);font-size:19px;font-weight:650}.article-content h2{margin:30px 0 12px;color:var(--text);font-size:24px;line-height:1.25}.article-content>*:last-child{margin-bottom:0}
@media(max-width:520px){.screen{padding-left:16px;padding-right:16px}.quiz-footer{padding-left:16px;padding-right:16px}.global-nav{padding-left:6px;padding-right:6px}.global-nav button{font-size:10px}.article-content{padding:18px}.article-content p{font-size:16px}.category-strip button{font-size:15px}}