/* JobMiniApp — дизайн-система (токены) и компоненты Mini App */
.light{--paper:#F3F1EE;--surface:#FFFFFF;--surface-sunk:#E9E6E1;--line:#D9D4CC;--ink:#0B1020;--ink-muted:#5B6070;--accent:#1D64F0;--night:#0A0F24;--night-ink:#EEF2FF;--night-muted:#8F98B6;--chart-line:#3D8BFF;--chart-from:#7CC4FF;--chart-band:#2A3560;--hot:#B93E0A;--hot-fill:#FCE7D8;--success:#13744A;--danger:#C0262D;--card-border:transparent;
--button-from:#1E56E0;--button-to:#2A6CF5;--on-button:#FFFFFF;--brand-to:#4A5CF7;
--glow-accent:rgba(30,86,224,.55);--glow-hot:rgba(234,88,12,.45);--night-glow:#2350B8;--page-glow:rgba(29,100,240,.30);--page-glow-2:rgba(124,196,255,.45);--thumb-tint:#D6E3FF;--card-glow:rgba(30,86,224,.22)}
.dark{--paper:#070B18;--surface:#10162B;--surface-sunk:#1B2240;--line:#2A3354;--ink:#F2F4F8;--ink-muted:#9AA3BC;--accent:#5B97FF;--night:#16204A;--night-ink:#EEF2FF;--night-muted:#8F98B6;--chart-line:#5B97FF;--chart-from:#8FD0FF;--chart-band:#26315C;--hot:#FF9A5C;--hot-fill:#3A2012;--success:#4CD68A;--danger:#FF7A7A;--card-border:#2A3354;
--button-from:#1E56E0;--button-to:#2A6CF5;--on-button:#FFFFFF;--brand-to:#4A5CF7;
--glow-accent:rgba(59,123,255,.55);--glow-hot:rgba(255,122,40,.45);--night-glow:#2B5BD0;--page-glow:rgba(59,123,255,.22);--page-glow-2:rgba(124,196,255,.10);--thumb-tint:#23305C;--card-glow:rgba(0,0,0,0)}

/* Безопасные зоны: Telegram задаёт --tg-*, браузер — env() */
:root{
  --safe-top:max(var(--tg-safe-area-inset-top,0px),env(safe-area-inset-top,0px));
  --safe-bottom:max(var(--tg-safe-area-inset-bottom,0px),env(safe-area-inset-bottom,0px));
  --content-top:var(--tg-content-safe-area-inset-top,0px);
  --content-bottom:var(--tg-content-safe-area-inset-bottom,0px);
  --tabbar-h:56px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{min-height:var(--tg-viewport-stable-height,100vh);color:var(--ink);font-family:"Onest",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:15px;line-height:22px;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;
background:radial-gradient(130% 380px at 30% -60px,var(--page-glow),transparent 72%),radial-gradient(70% 280px at 105% 0,var(--page-glow-2),transparent 70%),var(--paper);background-repeat:no-repeat;background-color:var(--paper)}
h1,h2,h3,p{margin:0}
:where(button){font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:where(a){color:inherit;text-decoration:none}
:where(button,a,input):focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:12px}
img{display:block}

.app{max-width:430px;margin:0 auto;min-height:var(--tg-viewport-stable-height,100vh);display:flex;flex-direction:column}
.content{flex:1;display:flex;flex-direction:column;gap:24px;padding:calc(16px + var(--safe-top) + var(--content-top)) 16px calc(32px + var(--bottom-space,0px))}
.app.with-tabs{--bottom-space:calc(var(--tabbar-h) + var(--safe-bottom))}
.app.with-mainbar{--bottom-space:calc(72px + var(--safe-bottom))}

/* Текст */
.title{font-weight:300;font-size:28px;line-height:32px;letter-spacing:-.02em}
.display{font-weight:300;font-size:40px;line-height:42px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.metric{font-weight:300;font-size:34px;line-height:36px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.heading{font-weight:600;font-size:17px;line-height:22px}
.strong{font-weight:500}
.caption{font-size:13px;line-height:18px}
.label{font-weight:500;font-size:12px;line-height:16px}
.muted{color:var(--ink-muted)}
.num{font-variant-numeric:tabular-nums}
.danger-text{color:var(--danger)}
.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.head{display:flex;flex-direction:column;gap:4px;padding:0 4px}

/* Секции и ячейки */
.group{display:flex;flex-direction:column;gap:8px}
.group-label{padding:0 16px}
.section{background:var(--surface);border-radius:18px;overflow:hidden;border:1px solid var(--card-border);box-shadow:0 14px 34px -20px var(--card-glow)}
.cell{display:flex;align-items:center;gap:12px;min-height:52px;padding:12px 16px;width:100%;text-align:left}
.section > :is(.cell,.block) + :is(.cell,.block){border-top:1px solid var(--line)}
button.cell:active,a.cell:active{background:var(--surface-sunk)}
.cell-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.cell-end{flex:none;display:flex;align-items:center;gap:8px;color:var(--ink-muted)}
.block{display:flex;flex-direction:column;gap:8px;padding:14px 16px}

.avatar{width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;font-weight:500;font-size:14px;background:var(--surface-sunk);color:var(--ink-muted);overflow:hidden;position:relative}
.avatar.brand{background:linear-gradient(135deg,var(--button-from),var(--brand-to));color:var(--on-button);box-shadow:0 6px 18px -6px var(--glow-accent)}
.avatar img,.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.avatar.lg{width:64px;height:64px;font-size:20px}
.thumb{width:56px;height:56px;border-radius:10px;flex:none;display:grid;place-items:center;position:relative;overflow:hidden;background:linear-gradient(135deg,var(--surface-sunk),var(--thumb-tint));color:var(--ink-muted)}
img.broken{display:none}

/* Бейджи */
.badge{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 10px;border-radius:999px;font-weight:500;font-size:12px;line-height:16px;white-space:nowrap;background:var(--surface-sunk);color:var(--ink-muted)}
.badge.hot{background:var(--hot-fill);color:var(--hot);box-shadow:0 4px 16px -4px var(--glow-hot)}
.night .badge.hot{background:#3A2012;color:#FF9A5C;box-shadow:0 0 0 1px rgba(255,154,92,.25),0 6px 22px -4px rgba(255,122,40,.55)}
.badge.error{background:transparent;color:var(--danger);padding:0}

/* Переключатель */
.toggle{width:51px;height:31px;border-radius:999px;position:relative;flex:none;background:var(--surface-sunk);box-shadow:inset 0 0 0 1px var(--line);transition:background .16s ease-out}
.toggle::after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#FFFFFF;box-shadow:0 1px 2px rgba(0,0,0,.18);transition:left .16s ease-out}
.toggle.on{background:linear-gradient(135deg,var(--button-from),var(--button-to));box-shadow:0 4px 16px -3px var(--glow-accent),0 0 12px -4px var(--glow-accent)}
.toggle.on::after{left:22px}
.toggle-hit{min-width:44px;min-height:44px;display:grid;place-items:center;flex:none}

/* Сегменты */
.seg{display:flex;gap:2px;padding:3px;border-radius:999px;background:var(--surface-sunk)}
.seg button{flex:1;height:38px;border-radius:999px;color:var(--ink-muted);font-weight:500;font-size:14px;transition:background .16s ease-out}
.seg button.on{background:var(--surface);color:var(--ink)}
.seg.accent button.on{background:linear-gradient(135deg,var(--button-from),var(--button-to));color:var(--on-button);box-shadow:0 6px 20px -5px var(--glow-accent),0 0 14px -4px var(--glow-accent)}

/* Поле ввода */
.field{height:48px;display:flex;align-items:center;gap:8px;padding:0 4px 0 20px;border-radius:999px;background:var(--surface);border:1px solid var(--card-border);box-shadow:0 8px 24px -14px var(--glow-accent)}
.field input{flex:1;min-width:0;height:44px;border:0;outline:0;background:transparent;color:var(--ink);font:400 16px/22px "Onest",system-ui,sans-serif}
.field input::placeholder{color:var(--ink-muted)}
.field-btn{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:none;background:linear-gradient(135deg,var(--button-from),var(--button-to));color:var(--on-button);box-shadow:0 6px 20px -4px var(--glow-accent),0 0 16px -4px var(--glow-accent),inset 0 1px 0 rgba(255,255,255,.22)}
.field-btn:disabled{opacity:.5}
.field-error{padding:0 20px;color:var(--danger)}
.num-input{width:96px;height:40px;border-radius:10px;border:1px solid var(--line);background:var(--surface-sunk);color:var(--ink);text-align:right;padding:0 10px;font:400 16px/22px "Onest",system-ui,sans-serif}

/* Тёмная карточка */
.night{display:flex;flex-direction:column;gap:12px;padding:20px;border-radius:28px;color:var(--night-ink);border:1px solid var(--card-border);
background:radial-gradient(85% 70% at 88% -8%,var(--night-glow) 0%,transparent 68%),radial-gradient(70% 60% at -5% 105%,rgba(124,196,255,.14),transparent 70%),var(--night);
box-shadow:0 24px 48px -16px var(--glow-accent)}
.night .muted{color:var(--night-muted)}
.row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.chart-line{fill:none;filter:drop-shadow(0 0 6px var(--glow-accent))}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.stat{padding:14px 16px;display:flex;flex-direction:column;gap:2px}

/* Шкала */
.meter{height:8px;border-radius:999px;background:var(--surface-sunk);overflow:hidden}
.meter span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--button-from),var(--chart-from));box-shadow:0 0 12px var(--glow-accent)}

/* Нижние вкладки */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:5;display:flex;justify-content:center;background:var(--surface);border-top:1px solid var(--line);padding-bottom:var(--safe-bottom)}
.tabbar nav{display:flex;width:100%;max-width:430px}
.tab{flex:1;height:var(--tabbar-h);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--ink-muted);font-weight:500;font-size:12px;line-height:16px}
.tab.active{color:var(--accent)}
.tab.active svg{filter:drop-shadow(0 2px 8px var(--glow-accent))}

/* Нижняя кнопка (своя, с градиентом) */
.mainbar{position:fixed;left:0;right:0;bottom:0;z-index:5;display:flex;justify-content:center;padding:8px 16px calc(12px + var(--safe-bottom));background:linear-gradient(to top,var(--paper) 70%,transparent)}
.mainbtn{width:100%;max-width:398px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-weight:500;font-size:16px;color:var(--on-button);
background:linear-gradient(135deg,var(--button-from),var(--button-to));box-shadow:0 12px 32px -8px var(--glow-accent),0 0 22px -6px var(--glow-accent),inset 0 1px 0 rgba(255,255,255,.22)}
.mainbtn:active,.field-btn:active{filter:brightness(.94)}
.keyboard-open .mainbar,.keyboard-open .tabbar{display:none}

/* Состояния */
.empty{padding:32px 24px;text-align:center;display:flex;flex-direction:column;gap:8px;align-items:center}
.skeleton{background:var(--surface-sunk);border-radius:18px}
.center-screen{min-height:70vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:24px}
.link-btn{color:var(--accent);font-weight:500;min-height:44px;padding:0 4px}
.toast{position:fixed;left:50%;bottom:calc(88px + var(--safe-bottom));transform:translateX(-50%) translateY(12px);opacity:0;pointer-events:none;z-index:10;background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:999px;font-size:14px;line-height:20px;transition:opacity .18s ease-out,transform .18s ease-out;max-width:calc(100% - 32px)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Движение (только transform/opacity/clip-path — дёшево для слабых телефонов) ---------- */
:root{--ease-out:cubic-bezier(.2,.7,.2,1);--ease-spring:cubic-bezier(.3,1.5,.5,1)}

/* Появление экрана: блоки и строки списков выезжают снизу лесенкой */
.screen-enter > *{animation:rise .38s var(--ease-out) both;animation-delay:calc(var(--n,0) * 55ms)}
.screen-enter .section > *{animation:rise .34s var(--ease-out) both;animation-delay:calc(var(--n,0) * 55ms + 90ms + var(--i,0) * 40ms)}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* График «рисуется» слева направо */
.screen-enter .chart{animation:reveal .95s var(--ease-out) .2s both}
@keyframes reveal{from{clip-path:inset(-24px 100% -24px -24px)}to{clip-path:inset(-24px -24px -24px -24px)}}

/* Живое свечение внутри тёмных карточек */
.night{position:relative;overflow:hidden;isolation:isolate}
.night::before{content:"";position:absolute;inset:-35%;z-index:-1;pointer-events:none;opacity:.75;
  background:radial-gradient(38% 32% at 72% 22%,var(--night-glow),transparent 70%),radial-gradient(30% 26% at 20% 85%,rgba(124,196,255,.22),transparent 70%);
  animation:drift 10s ease-in-out infinite alternate}
@keyframes drift{from{transform:translate(-5%,3%) scale(1)}to{transform:translate(6%,-4%) scale(1.08)}}

/* Бейдж роста «дышит» оранжевым */
.badge.hot{animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 4px 16px -4px var(--glow-hot)}50%{box-shadow:0 4px 24px 0 var(--glow-hot)}}

/* Отклик на нажатие */
.cell,.mainbtn,.field-btn,.tab,.seg button,.toggle-hit,.link-btn,a.night{transition:transform .14s var(--ease-out),background-color .14s ease-out}
:is(button.cell,a.cell,a.night):active{transform:scale(.985)}
:is(.mainbtn,.field-btn,.seg button,.tab):active{transform:scale(.95)}

/* Пружинка у переключателя и иконки активной вкладки */
.toggle::after{transition:left .28s var(--ease-spring)}
.tab.active svg{animation:pop .36s var(--ease-spring)}
@keyframes pop{from{transform:scale(.7)}to{transform:scale(1)}}

/* Скелетон с бегущим бликом */
.skeleton{position:relative;overflow:hidden}
.skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);animation:shimmer 1.3s ease-in-out infinite}
.dark .skeleton::after{background:linear-gradient(90deg,transparent,rgba(124,160,255,.12),transparent)}
@keyframes shimmer{to{transform:translateX(100%)}}

/* Нижняя кнопка въезжает снизу */
.mainbar{animation:slide-up .32s var(--ease-out) both}
@keyframes slide-up{from{transform:translateY(100%)}to{transform:none}}

/* ---------- Котики ---------- */
.cat-fill{fill:var(--surface)}
.cat-line{stroke:var(--ink)}
.cat-ink{fill:var(--ink)}
.cat-ear{fill:var(--hot-fill)}
.cat-nose{fill:var(--hot)}
.cat-whisker{stroke:var(--ink-muted)}
.zz{fill:var(--accent);font:600 14px "Onest",system-ui,sans-serif}
.zz-2{font-size:10px;opacity:.7}

/* Котик над карточкой «Сейчас выстреливает» */
.hot-wrap{position:relative;margin-top:40px}
.cat-peek{position:absolute;top:-56px;right:30px;z-index:2;pointer-events:none;overflow:visible}
.screen-enter .cat-peek{animation:peek .6s var(--ease-spring) .45s both}
@keyframes peek{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.cat-eyes{transform-box:fill-box;transform-origin:center;animation:blink 4.8s infinite}
@keyframes blink{0%,91%,100%{transform:scaleY(1)}94%{transform:scaleY(.1)}}

/* Спящий котик */
.cat-end{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 24px 0;text-align:center}
.cat-body{transform-box:fill-box;transform-origin:50% 100%;animation:breathe 3.4s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.035)}}
.zz{animation:float-z 2.8s ease-in-out infinite}
.zz-2{animation-delay:1.1s}
@keyframes float-z{0%{opacity:0;transform:translate(0,4px)}30%{opacity:1}100%{opacity:0;transform:translate(4px,-8px)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}