/* =========================================================================
   Катя — Telegram Mini App · production styles
   Тёмная база Telegram, бирюзовый акцент, карточки, чипы, нижняя навигация.
   Тема управляется:
     1) themeParams Telegram   → --tg-* переменные (JS проставляет на :root)
     2) fallback палитра ниже  → если Telegram-переменной нет
   ========================================================================= */

:root {
  /* light (базовая fallback-тема) — нейтрали со сдвигом в сине-стальной */
  --backdrop:#dfe6ee;
  --app:#f4f7fa;
  --surface:#ffffff;
  --elev:#eef3f8;
  --line:#dde5ee;
  --line-soft:#e8eef4;
  --text:#0f1b26;
  --muted:#5c6b7a;
  --faint:#8494a3;
  --accent:#0d7f9e;
  --accent-ink:#075466;
  --accent-soft:#d5edf4;
  --on-accent:#ffffff;
  --good:#1a7f37; --good-bg:#dcf3e3;
  --warn:#8a5a00; --warn-bg:#f6e8c8;
  --crit:#bb372c; --crit-bg:#f7dcd8;
  --shadow:0 1px 2px rgba(15,27,38,.06),0 8px 24px rgba(15,27,38,.06);
}

@media (prefers-color-scheme:dark){
  :root{
    --backdrop:#05090d;
    --app:#0e1621;
    --surface:#17212b;
    --elev:#1d2a37;
    --line:#243341;
    --line-soft:#1c2836;
    --text:#e8eff6;
    --muted:#8a9bab;
    --faint:#5f7385;
    --accent:#41b7d0;
    --accent-ink:#8fdcec;
    --accent-soft:#123542;
    --on-accent:#032027;
    --good:#43c05a; --good-bg:#13301c;
    --warn:#e2b23c; --warn-bg:#382c10;
    --crit:#f26a60; --crit-bg:#3a1b18;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.35);
  }
}

/* Явное переключение темы (colorScheme Telegram или кнопка) — побеждает media */
:root[data-theme="light"]{
  --backdrop:#dfe6ee;--app:#f4f7fa;--surface:#ffffff;--elev:#eef3f8;--line:#dde5ee;--line-soft:#e8eef4;
  --text:#0f1b26;--muted:#5c6b7a;--faint:#8494a3;--accent:#0d7f9e;--accent-ink:#075466;--accent-soft:#d5edf4;
  --on-accent:#ffffff;
  --good:#1a7f37;--good-bg:#dcf3e3;--warn:#8a5a00;--warn-bg:#f6e8c8;--crit:#bb372c;--crit-bg:#f7dcd8;
  --shadow:0 1px 2px rgba(15,27,38,.06),0 8px 24px rgba(15,27,38,.06);
}
:root[data-theme="dark"]{
  --backdrop:#05090d;--app:#0e1621;--surface:#17212b;--elev:#1d2a37;--line:#243341;--line-soft:#1c2836;
  --text:#e8eff6;--muted:#8a9bab;--faint:#5f7385;--accent:#41b7d0;--accent-ink:#8fdcec;--accent-soft:#123542;
  --on-accent:#032027;
  --good:#43c05a;--good-bg:#13301c;--warn:#e2b23c;--warn-bg:#382c10;--crit:#f26a60;--crit-bg:#3a1b18;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.35);
}

/* Telegram themeParams overrides (проставляются JS через inline-стиль на :root).
   Если Telegram отдал цвет — используем его для базовых поверхностей/текста. */
:root[data-tg="1"]{
  --backdrop:var(--tg-bg, var(--app));
  --app:var(--tg-bg, var(--app));
  --surface:var(--tg-secondary-bg, var(--surface));
  --elev:var(--tg-secondary-bg, var(--elev));
  --text:var(--tg-text, var(--text));
  --muted:var(--tg-hint, var(--muted));
  --faint:var(--tg-hint, var(--faint));
  --accent:var(--tg-link, var(--accent));
  --accent-ink:var(--tg-link, var(--accent-ink));
  --on-accent:var(--tg-btn-text, var(--on-accent));
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--backdrop);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  display:flex;justify-content:center;
  min-height:100vh;min-height:100dvh;
}
.tabnum{font-variant-numeric:tabular-nums}

/* Контейнер приложения. В webview Telegram занимает весь экран; в браузере — «телефон». */
.phone{
  width:100%;max-width:480px;
  background:var(--app);
  overflow:hidden;
  display:flex;flex-direction:column;
  min-height:100vh;min-height:100dvh;
  position:relative;
}
@media (min-width:520px){
  body{padding:24px 16px;align-items:center}
  .phone{
    border-radius:26px;box-shadow:var(--shadow);border:1px solid var(--line);
    max-height:900px;height:88vh;min-height:640px;
  }
}

/* шапка */
header{
  padding:calc(14px + env(safe-area-inset-top)) 18px 12px;
  display:flex;align-items:center;gap:12px;
  border-bottom:1px solid var(--line-soft);
  background:var(--app);
  flex:0 0 auto;
}
.avatar{
  width:38px;height:38px;border-radius:12px;flex:0 0 auto;
  background:linear-gradient(145deg,var(--accent),var(--accent-ink));
  display:grid;place-items:center;color:#fff;font-weight:700;font-size:17px;letter-spacing:.5px;
}
.hgroup{flex:1;min-width:0}
.hgroup h1{margin:0;font-size:16px;font-weight:650;letter-spacing:-.01em}
.hgroup .sub{color:var(--muted);font-size:12.5px;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hbtns{display:flex;gap:8px;flex:0 0 auto}
.icon-btn{
  border:1px solid var(--line);background:var(--elev);color:var(--muted);
  width:34px;height:34px;border-radius:10px;cursor:pointer;font-size:15px;
  display:grid;place-items:center;line-height:1;
}
.icon-btn:hover{color:var(--text)}
.icon-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.icon-btn.spin svg{animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.icon-btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* контент со скроллом */
main{flex:1;overflow-y:auto;overflow-x:hidden;padding:14px 14px 20px;-webkit-overflow-scrolling:touch}

/* pull-to-refresh индикатор */
.ptr{
  height:0;overflow:hidden;display:grid;place-items:center;color:var(--muted);
  font-size:12px;transition:height .18s;
}
.ptr.armed{height:34px}
.ptr .sp{width:16px;height:16px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--accent);animation:spin .8s linear infinite}

.panel{display:none;flex-direction:column;gap:12px}
.panel.active{display:flex}

section.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px 15px;
}
.card-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;gap:8px}
.card-h .t{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--faint)}
.card-h .a{font-size:12px;color:var(--accent);text-decoration:none;font-weight:600;background:none;border:0;cursor:pointer;padding:0}
.card-h .a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

/* сводка «Сегодня» */
.hero{
  background:
    radial-gradient(120% 140% at 100% 0%,var(--accent-soft) 0%,transparent 55%),
    var(--surface);
  border:1px solid var(--line);border-radius:18px;padding:16px 16px 14px;
}
.hero .greet{font-size:13px;color:var(--muted)}
.hero .line{font-size:20px;font-weight:650;letter-spacing:-.02em;margin:4px 0 12px;text-wrap:balance;line-height:1.25}
.hero .line b{color:var(--accent-ink)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.stat{background:var(--elev);border:1px solid var(--line-soft);border-radius:12px;padding:9px 10px}
.stat .n{font-size:20px;font-weight:700;letter-spacing:-.02em;line-height:1}
.stat .l{font-size:11px;color:var(--muted);margin-top:4px}

/* строки-списки */
.row{display:flex;gap:11px;align-items:flex-start;padding:9px 0;border-top:1px solid var(--line-soft)}
.row:first-of-type{border-top:0}
.time{font-size:13px;font-weight:650;color:var(--accent-ink);min-width:44px;padding-top:1px}
.rc{flex:1;min-width:0}
.rc .ti{font-size:14px;font-weight:550;line-height:1.3}
.rc .me{font-size:12px;color:var(--muted);margin-top:2px}
.dot{width:8px;height:8px;border-radius:50%;margin-top:6px;flex:0 0 auto}

/* чипы состояния */
.chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:650;
  padding:3px 8px;border-radius:999px;letter-spacing:.01em;white-space:nowrap}
.chip.good{background:var(--good-bg);color:var(--good)}
.chip.warn{background:var(--warn-bg);color:var(--warn)}
.chip.crit{background:var(--crit-bg);color:var(--crit)}
.chip.mut{background:var(--elev);color:var(--muted)}
.chip .pip{width:6px;height:6px;border-radius:50%;background:currentColor}

/* поручения */
.task{padding:11px 0;border-top:1px solid var(--line-soft);display:flex;gap:10px;align-items:flex-start}
.task:first-of-type{border-top:0}
.task .who{width:30px;height:30px;border-radius:9px;background:var(--elev);border:1px solid var(--line-soft);
  display:grid;place-items:center;font-size:12px;font-weight:700;color:var(--muted);flex:0 0 auto}
.task .body{flex:1;min-width:0}
.task .txt{font-size:14px;font-weight:550;line-height:1.32}
.task.done .txt{text-decoration:line-through;color:var(--faint)}
.task .row2{display:flex;align-items:center;gap:8px;margin-top:7px;flex-wrap:wrap}
.btn{border:1px solid var(--line);background:var(--elev);color:var(--text);
  font-size:12px;font-weight:600;padding:5px 11px;border-radius:9px;cursor:pointer}
.btn.pri{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn:disabled{opacity:.5;cursor:default}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* инфра-плитки */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tile{background:var(--elev);border:1px solid var(--line-soft);border-radius:12px;padding:11px 12px;display:flex;
  align-items:center;gap:10px}
.tile .led{width:9px;height:9px;border-radius:50%;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 22%,transparent)}
.tile .tl{flex:1;min-width:0}
.tile .tn{font-size:13px;font-weight:600}
.tile .tv{font-size:12px;color:var(--muted);margin-top:1px}

/* токены-бары */
.bar{margin:11px 0 0}
.bar .lab{display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:5px;gap:8px}
.bar .lab .v{color:var(--muted)}
.track{height:9px;border-radius:6px;background:var(--elev);overflow:hidden}
.fill{height:100%;border-radius:6px;transition:width .4s}
.fill.fast{background:linear-gradient(90deg,#3fbf7a,#2fa5c2)}
.fill.deep{background:linear-gradient(90deg,var(--accent),var(--accent-ink))}

/* здоровье sparkline */
.spark-wrap{display:flex;align-items:baseline;gap:12px;margin-bottom:6px}
.spark-wrap .big{font-size:26px;font-weight:700;letter-spacing:-.02em}
.spark-wrap .unit{font-size:12px;color:var(--muted)}
svg{display:block}

/* здоровье: переключатель периода + интерактивные графики */
.seg{display:flex;gap:6px;margin:2px 0 14px;background:var(--elev);padding:3px;border-radius:11px}
.seg-b{flex:1;border:0;background:none;color:var(--muted);font-size:12px;font-weight:600;
  padding:7px 4px;border-radius:9px;cursor:pointer}
.seg-b.active{background:var(--surface);color:var(--text);box-shadow:var(--shadow)}
.seg-b:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.chart-block{margin-top:16px}
.chart-block:first-of-type{margin-top:0}
.chart-title{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--faint);margin-bottom:4px}
.chart-callout{font-size:13px;font-weight:600;color:var(--text);margin-bottom:4px;min-height:18px}
.chart-host{position:relative;transition:opacity .15s}
.chart-host.loading{opacity:.35}
.chart-empty{font-size:12.5px;color:var(--faint);padding:20px 0;text-align:center}

/* нижняя навигация */
nav{
  display:grid;grid-template-columns:repeat(5,1fr);
  border-top:1px solid var(--line);
  background:var(--app);
  padding:7px 6px calc(7px + env(safe-area-inset-bottom));
  flex:0 0 auto;
}
.nav-b{border:0;background:none;cursor:pointer;color:var(--faint);
  display:flex;flex-direction:column;align-items:center;gap:3px;padding:5px 0;border-radius:10px;
  font-size:10.5px;font-weight:600;letter-spacing:.01em;position:relative}
.nav-b svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.nav-b.active{color:var(--accent)}
.nav-b:hover{color:var(--text)}
.nav-b.active:hover{color:var(--accent)}
.nav-b:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

.badge{position:absolute;top:-3px;right:22%;background:var(--crit);color:#fff;font-size:9px;font-weight:700;
  min-width:15px;height:15px;border-radius:8px;display:grid;place-items:center;padding:0 3px}
.badge[hidden]{display:none}

/* toast */
#toast{position:fixed;left:50%;bottom:calc(72px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(20px);
  background:var(--text);color:var(--app);font-size:13px;font-weight:600;padding:9px 15px;border-radius:11px;
  opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;z-index:30;max-width:88%;text-align:center}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---- Состояния загрузки / ошибки ---- */
.skel{position:relative;overflow:hidden;background:var(--elev);border-radius:8px}
.skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--surface) 60%,transparent),transparent);
  animation:sheen 1.15s infinite}
@keyframes sheen{100%{transform:translateX(100%)}}
.skel-line{height:12px;margin:8px 0}
.skel-line.w40{width:40%}.skel-line.w60{width:60%}.skel-line.w80{width:80%}

.errbox{text-align:center;padding:26px 16px;color:var(--muted)}
.errbox .em{font-size:26px;margin-bottom:8px}
.errbox .msg{font-size:13.5px;margin-bottom:14px;line-height:1.4}
.errbox .btn.pri{display:inline-block}

.empty{text-align:center;color:var(--faint);font-size:13px;padding:16px 8px}

/* ---- Заслон «Откройте через Telegram» ---- */
#gate{
  position:fixed;inset:0;z-index:50;background:var(--backdrop);color:var(--text);
  display:none;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:32px;text-align:center;
}
#gate.show{display:flex}
#gate .g-av{width:64px;height:64px;border-radius:20px;background:linear-gradient(145deg,var(--accent),var(--accent-ink));
  display:grid;place-items:center;color:#fff;font-weight:700;font-size:30px}
#gate h2{margin:6px 0 0;font-size:19px;font-weight:650}
#gate p{margin:0;max-width:320px;color:var(--muted);font-size:14px;line-height:1.5}
#gate code{background:var(--elev);padding:1px 6px;border-radius:6px;color:var(--muted);font-size:12.5px}

/* доступность / движение */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (prefers-reduced-motion:reduce){
  *,*::after{transition:none!important;animation:none!important}
}