/* SetLog Mini App. Цвета берутся из темы Telegram, в браузере — запасные значения. */
:root{
  --bg:var(--tg-theme-secondary-bg-color,#eef1f4);
  --surface:var(--tg-theme-bg-color,#ffffff);
  --ink:var(--tg-theme-text-color,#15202b);
  --muted:var(--tg-theme-hint-color,#5b6876);
  --accent:var(--tg-theme-button-color,#1f5fd6);
  --accent-ink:var(--tg-theme-button-text-color,#ffffff);
  --link:var(--tg-theme-link-color,#1f5fd6);
  --line:rgba(127,140,153,.28);
  --accent-soft:rgba(64,120,220,.12);
  --ok:#17845a; --ok-soft:rgba(23,132,90,.13);
  --warn:#b86e00; --warn-soft:rgba(220,140,20,.15);
  --bad:#c2362f;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:var(--tg-theme-secondary-bg-color,#0d1217);
    --surface:var(--tg-theme-bg-color,#161d25);
    --ink:var(--tg-theme-text-color,#e5ecf2);
    --muted:var(--tg-theme-hint-color,#8d9aa7);
    --accent:var(--tg-theme-button-color,#4f86f0);
    --link:var(--tg-theme-link-color,#6f9dff);
    --ok:#43c087; --warn:#e3a23f; --bad:#ef6d65;
  }
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:15px;line-height:1.45;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer;-webkit-appearance:none;appearance:none}
button:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.muted{color:var(--muted)}
.center{text-align:center;padding:40px 16px}

/* верхняя панель */
.bar{position:-webkit-sticky;position:sticky;top:0;z-index:2;background:var(--surface);border-bottom:1px solid var(--line);padding:12px 16px 10px}
.bar h1{margin:0;font-size:19px;font-weight:700}
.bar small{display:block;color:var(--muted);font-size:13px}
.coachbanner{background:var(--accent);color:var(--accent-ink);font-size:13px;padding:6px 16px}
.prog{height:6px;border-radius:3px;background:var(--line);margin-top:8px;overflow:hidden}
.prog i{display:block;height:100%;background:var(--ok);-webkit-transition:width .2s;transition:width .2s}
.sync{display:inline-block;margin-top:6px;font-size:12px;font-weight:600;border-radius:999px;padding:2px 10px}
.sync.ok{background:var(--ok-soft);color:var(--ok)}
.sync.warn{background:var(--warn-soft);color:var(--warn)}
.sync.info{background:var(--accent-soft);color:var(--link)}

.tabs{display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;margin-top:8px}
.tab{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:4px 14px;font-size:13px;font-weight:500;margin:0 6px 6px 0}
.tab.on{background:var(--ink);border-color:var(--ink);color:var(--surface)}

.body{padding:12px 12px 24px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:12px}
.card h2{margin:0;font-size:15px;display:-webkit-flex;display:flex;-webkit-justify-content:space-between;justify-content:space-between}
.card h2 span{font-weight:400;color:var(--muted);font-size:13px;white-space:nowrap;margin-left:8px}
.exnote{font-size:13px;color:var(--muted)}

/* строка подхода */
.setrow{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;margin-top:8px}
.setrow > *{margin-right:6px}
.setrow > *:last-child{margin-right:0}
.setrow .n{width:16px;color:var(--muted);font-size:13px;text-align:center;-webkit-flex:none;flex:none}
.step{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-flex:1;flex:1;min-width:0;border:1px solid var(--line);border-radius:10px;background:var(--surface);overflow:hidden}
.step button{border:0;background:transparent;width:34px;height:36px;font-size:18px;color:var(--link);font-weight:700;-webkit-flex:none;flex:none;padding:0}
.step button:disabled{color:var(--line)}
.step span{-webkit-flex:1;flex:1;text-align:center;font-variant-numeric:tabular-nums;font-size:14px;white-space:nowrap;overflow:hidden}
.step.w{-webkit-flex:1.3;flex:1.3}
.ck{width:40px;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--surface);font-size:18px;color:var(--muted);-webkit-flex:none;flex:none;padding:0}
.ck.on{background:var(--ok);border-color:var(--ok);color:#fff}
.setrow.done .step{border-color:var(--ok)}
.setrow.diff .step{border-color:var(--warn)}

.feel{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;font-size:14px;color:var(--muted)}
.feel span{margin-right:8px}
.feel button{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--surface);font-weight:600;margin-right:6px;padding:0}
.feel button.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:8px 10px;font:inherit;font-size:14px;background:var(--surface);color:var(--ink);resize:none;margin-top:10px}
.btn{display:block;width:100%;border:0;border-radius:10px;padding:12px;background:var(--accent);color:var(--accent-ink);font-weight:600;margin-top:10px}
.btn:disabled{background:var(--line);color:var(--muted);cursor:not-allowed}
.btn.ghost{background:var(--accent-soft);color:var(--link)}
.hint{font-size:12px;color:var(--muted);margin-top:6px;text-align:center}

/* список подопечных */
.sect{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:600;padding:14px 16px 6px}
.list{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.li{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;padding:12px 16px;background:var(--surface);border:0;border-bottom:1px solid var(--line);text-align:left;width:100%}
.li:last-child{border-bottom:0}
.li b{-webkit-flex:1;flex:1;font-weight:600}
.li i{font-style:normal;color:var(--muted);font-size:20px}
.ava{width:36px;height:36px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;font-weight:700;margin-right:12px;-webkit-flex:none;flex:none}

.done-box{text-align:center;padding:32px 16px}
.done-box .big{font-size:44px;color:var(--ok);font-weight:700}
.empty{text-align:center;padding:48px 20px;color:var(--muted)}
.empty b{display:block;color:var(--ink);font-size:17px;margin-bottom:6px}
.err{color:var(--bad)}

@media (prefers-reduced-motion:reduce){.prog i{-webkit-transition:none;transition:none}}