/* ============================================================
   ЦЕПИ — дизайн-система v4
   Тёмная «ночная» база + неоновые акценты, крупные формы,
   скруглённые карточки, живые микровзаимодействия.
   Тема Telegram подхватывается через --tg-* переменные.
   ============================================================ */

:root{
  /* --- мост к теме Telegram --- */
  --tg-bg:#0a0b12;
  --tg-card:#161a28;
  --tg-card-3:#222840;
  --tg-text:#f2f4fb;
  --tg-hint:#8b93ad;
  --tg-accent:#8b5cf6;
  --tg-button:#8b5cf6;
  --tg-button-text:#ffffff;

  /* --- собственные акценты --- */
  --violet:#8b5cf6;
  --violet-2:#a78bfa;
  --coral:#ff4d6d;
  --lime:#a3e635;
  --cyan:#22d3ee;
  --gold:#ffc44d;

  --bg:var(--tg-bg);
  --bg-2:var(--tg-card);
  --card:var(--tg-card);
  --card-2:#1d2233;
  --card-2:color-mix(in srgb, var(--tg-card) 92%, var(--tg-text));
  --card-3:#252c42;
  --card-3:color-mix(in srgb, var(--tg-card) 82%, var(--tg-text));
  --text:var(--tg-text);
  --text-2:color-mix(in srgb, var(--tg-text) 78%, var(--bg));
  --hint:var(--tg-hint);
  --hint:#9aa3bd;              /* было #8b93ad: на карточках читалось впритык */
  --line:rgba(255,255,255,.10);
  --line-strong:rgba(255,255,255,.18);

  /* --- шкала отступов --- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:28px;

  /* --- глубина: тень + волосяная подсветка сверху --- */
  --shadow:0 14px 38px rgba(3,5,12,.5);
  --shadow-sm:0 8px 22px rgba(3,5,12,.34);
  --hairline:inset 0 1px 0 rgba(255,255,255,.07);

  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --r-lg:26px;
  --r-md:18px;
  --r-sm:12px;
  --glow-violet:0 10px 30px rgba(139,92,246,.4);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",system-ui,sans-serif;
  font-size:15px;line-height:1.45;
  overscroll-behavior-y:none;
  -webkit-font-smoothing:antialiased;
}
/* живой фон: три цветных пятна медленно плывут за интерфейсом */
.aurora{
  position:fixed;inset:-18%;z-index:0;pointer-events:none;
  background:
    radial-gradient(680px 420px at 20% 12%, rgba(139,92,246,.34), transparent 62%),
    radial-gradient(560px 380px at 82% 6%,  rgba(255,77,109,.26), transparent 64%),
    radial-gradient(640px 460px at 52% 104%,rgba(34,211,238,.20), transparent 62%);
  filter:blur(18px);
  animation:aurora 30s ease-in-out infinite alternate;
}
@keyframes aurora{
  from{transform:translate3d(-2%,-1%,0) scale(1)}
  to{transform:translate3d(3%,2%,0) scale(1.09)}
}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
input,textarea{font:inherit}
::-webkit-scrollbar{width:0;height:0}

#app{display:flex;flex-direction:column;height:100dvh;max-width:560px;margin:0 auto;position:relative;z-index:1}

/* ===== Шапка ===== */
.topbar{
  padding:calc(var(--safe-t) + 12px) 14px 12px;
  background:linear-gradient(180deg, rgba(26,30,48,.94) 0%, rgba(11,13,21,.62) 100%);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:20;
}
/* тонкая неоновая линия под шапкой */
.topbar::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(139,92,246,.6),rgba(255,77,109,.45),rgba(34,211,238,.35),transparent);
  opacity:.8;
}
.topbar__main{display:flex;align-items:center;justify-content:space-between;gap:10px}
.topbar__brand{display:flex;align-items:center;gap:10px;min-width:0;flex:1 1 auto}
.topbar__id{min-width:0;overflow:hidden}
.brand__logo{
  width:36px;height:36px;border-radius:12px;object-fit:cover;
  box-shadow:0 8px 20px rgba(139,92,246,.45), var(--hairline);
}
.brand__name{
  font-weight:900;font-size:17px;letter-spacing:-.4px;
  background:linear-gradient(92deg,#fff 20%,var(--violet-2) 90%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.brand__sub{
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--hint);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.link-btn{
  background:rgba(255,255,255,.12);border:1px solid var(--line-strong);color:var(--text);
  width:44px;height:44px;border-radius:14px;font-size:15px;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;
  transition:transform .12s ease,background .18s ease;
  flex:0 0 44px;
}
.link-btn:active{transform:scale(.9)}
.link-btn--sm{width:28px;height:28px;flex:0 0 28px;border-radius:10px;font-size:12.5px}
.hud{display:flex;align-items:center;gap:6px}
.hud__item{
  display:inline-flex;align-items:center;gap:5px;
  background:linear-gradient(180deg,var(--card-3),var(--card-2));
  border:1px solid var(--line);
  padding:6px 11px;border-radius:999px;font-weight:800;font-size:13.5px;
  font-variant-numeric:tabular-nums;white-space:nowrap;
  box-shadow:var(--hairline);
  transition:transform .18s cubic-bezier(.2,.9,.3,1.4);
}
.hud__item.is-pop{transform:scale(1.08)}
.hud__item--coin{border-color:rgba(255,196,77,.38);color:var(--gold)}
.hud__item--gem{border-color:rgba(34,211,238,.38);color:var(--cyan)}
.hud__item--rate{border-color:rgba(163,230,53,.38);color:var(--lime)}
.hud__ico{display:inline-flex;align-items:center}
.topbar__meta{font-size:12px;color:var(--hint);font-weight:700}
.topbar__banner{
  margin-top:10px;padding:10px 13px;border-radius:16px;font-size:13px;font-weight:700;
  background:linear-gradient(90deg, rgba(255,77,109,.2), rgba(255,77,109,.06));
  border:1px solid rgba(255,77,109,.32);color:#ffb3c1;
}
/* цвет по смыслу: тревога — коралловый, предупреждение — золотой, всё хорошо — лайм */
.topbar__banner--bad{background:linear-gradient(90deg, rgba(255,77,109,.2), rgba(255,77,109,.06));border-color:rgba(255,77,109,.32);color:#ffb3c1}
.topbar__banner--warn{background:linear-gradient(90deg, rgba(255,196,77,.18), rgba(255,196,77,.05));border-color:rgba(255,196,77,.32);color:#ffd98a}
.topbar__banner--ok{background:linear-gradient(90deg, rgba(163,230,53,.16), rgba(163,230,53,.04));border-color:rgba(163,230,53,.28);color:#d4f58a}
.topbar__banner[hidden]{display:none}

/* ===== Экран ===== */
.screen{
  flex:1;overflow-y:auto;overflow-x:hidden;
  padding:16px 14px 26px;-webkit-overflow-scrolling:touch;
}
.screen__title{font-size:25px;font-weight:900;margin:0 0 4px;letter-spacing:-.8px;line-height:1.15}
.screen__sub{font-size:13.5px;color:var(--hint);margin:0 0 16px;font-weight:500;line-height:1.4}

/* ===== Hero ===== */
.hero{
  position:relative;border-radius:28px;overflow:hidden;
  padding:18px;margin-bottom:14px;border:1px solid var(--line-strong);
  background:#12162a url('assets/icons/cepi-hero-bg.jpg') center/cover no-repeat;
  box-shadow:0 18px 46px rgba(3,5,12,.55), var(--hairline);
}
/* неоновое свечение изнутри карточки */
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(120% 70% at 88% -10%, rgba(34,211,238,.28), transparent 58%),
    radial-gradient(90% 60% at 6% 110%, rgba(255,77,109,.22), transparent 60%);
}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg, rgba(10,11,18,.28), rgba(10,11,18,.88))}
.hero__in{position:relative;z-index:2}
.hero__label{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.hero__profit{
  font-size:36px;font-weight:900;letter-spacing:-1.4px;line-height:1.02;margin-top:4px;
  background:linear-gradient(92deg,#fff 10%,var(--lime) 90%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shimmer 3.2s linear infinite;background-size:200% 100%;
}
@keyframes shimmer{0%{background-position:0% 0}100%{background-position:200% 0}}
.hero__row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:12px;flex-wrap:wrap}
.hero__chip{
  display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:999px;
  background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.18);
  font-size:12.5px;font-weight:800;backdrop-filter:blur(6px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
.hero__chip b{font-variant-numeric:tabular-nums}
.hero__name{font-size:14.5px;font-weight:800;color:rgba(255,255,255,.92);margin-top:8px;display:flex;align-items:center;gap:7px}
.hero__xp{font-size:12px;font-weight:700;color:rgba(255,255,255,.66);margin-top:14px}
.hero .bar{margin-top:8px;background:rgba(255,255,255,.16);height:9px}

/* ===== Карточки ===== */
.card{
  background:linear-gradient(180deg,var(--card-2),var(--card));
  border:1px solid var(--line);border-radius:var(--r-lg);
  padding:16px;margin-bottom:12px;position:relative;overflow:hidden;
  box-shadow:var(--shadow-sm), var(--hairline);
}
/* мягкий цветной блик над карточкой — даёт объём без «тяжести» */
.card::before{
  content:"";position:absolute;left:-12%;right:-12%;top:-70%;height:130%;
  background:radial-gradient(closest-side, rgba(139,92,246,.15), transparent 72%);
  opacity:.85;pointer-events:none;
}
.card>*{position:relative;z-index:1}
.card--glow{border-color:rgba(139,92,246,.45);box-shadow:0 12px 34px rgba(139,92,246,.2), var(--hairline)}
.card__title{font-weight:800;font-size:15.5px;letter-spacing:-.2px}
.card__row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}
.card__muted{font-size:13px;color:var(--hint);font-weight:500;line-height:1.5}
.muted{color:var(--hint)}
.green{color:var(--lime)}
.red{color:#ff7a93}
.gold{color:var(--gold)}
.small{font-size:12.5px}
.center{text-align:center}
.row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.grow{flex:1;min-width:0}
.section{
  font-size:11.5px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--hint);
  margin:22px 2px 10px;display:flex;align-items:center;
}
.section::before{
  content:"";display:inline-block;width:18px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--violet),var(--coral));margin-right:8px;vertical-align:middle;
  box-shadow:0 0 10px rgba(139,92,246,.5);
}

/* ===== Аватар ===== */
.ava{
  width:48px;height:48px;flex:0 0 48px;border-radius:16px;
  display:grid;place-items:center;font-size:24px;font-weight:900;
  background:linear-gradient(140deg,var(--violet),var(--coral));
  border:1px solid var(--line-strong);position:relative;overflow:hidden;
  box-shadow:0 8px 18px rgba(3,5,12,.4), var(--hairline);
}
.ava--lg{width:64px;height:64px;flex-basis:64px;font-size:26px;border-radius:20px}
.ava--sm{width:38px;height:38px;flex-basis:38px;font-size:17px;border-radius:13px}
.ava img{width:100%;height:100%;object-fit:cover}
.ava__txt{font-size:19px;font-weight:900;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.35)}
.ava--sm .ava__txt{font-size:14px}
.ava .ficon{width:34px;height:34px;flex:0 0 34px;border-radius:10px;object-fit:contain}

/* ===== Иконки направлений ===== */
.ficon{
  width:26px;height:26px;object-fit:contain;flex:0 0 26px;border-radius:8px;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.35));
}
.ficon--sm{width:20px;height:20px;flex-basis:20px;border-radius:6px}
.ficon--lg{width:42px;height:42px;flex-basis:42px;border-radius:13px}
.upicon{
  width:32px;height:32px;object-fit:contain;flex:0 0 32px;border-radius:10px;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.35));
}

/* ===== Разряды ===== */
.grade-wrap{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.grade{display:inline-flex;align-items:center;gap:3px}
.grade__pip{width:7px;height:7px;border-radius:3px;background:rgba(255,255,255,.18)}
.grade__pip.is-on{background:linear-gradient(140deg,var(--gold),var(--coral));box-shadow:0 0 8px rgba(255,196,77,.55)}
.grade__label{font-size:11.5px;font-weight:800;color:var(--gold);letter-spacing:.02em}

/* ===== Улучшения ===== */
.upg{
  display:flex;align-items:center;gap:12px;padding:11px 10px;border-radius:var(--r-md);
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
  border:1px solid var(--line);margin-bottom:9px;
  box-shadow:var(--hairline);
}
.upg:last-child{margin-bottom:0}
.upg.is-max{opacity:.72}
.upg__name{font-weight:800;font-size:14.5px;display:flex;align-items:center;gap:7px;flex-wrap:wrap;letter-spacing:-.2px}
.upg__desc{font-size:12.5px;color:var(--hint);margin-top:3px;line-height:1.4}

/* ===== Чужие сотрудники ===== */
.card--rival{border-color:rgba(255,77,109,.34);background:linear-gradient(160deg,rgba(255,77,109,.1),rgba(255,255,255,.03))}
.btn--coral{background:linear-gradient(135deg,var(--coral),#ff8a3d);color:#3b0716;box-shadow:0 8px 20px rgba(255,77,109,.35)}
.btn--coral:active{transform:scale(.96)}

/* ===== Свой, который ещё не в игре ===== */
.card--off{
  border-style:dashed;border-color:rgba(139,92,246,.35);
  background:linear-gradient(180deg,rgba(139,92,246,.09),rgba(255,255,255,.02));
}
.card--off .ava{opacity:.75}
.card--off .wk__name{font-size:14.5px}

/* ===== Своя деятельность ===== */
.chip--new{border-style:dashed;border-color:rgba(139,92,246,.6);color:var(--violet-2)}
.v-custom{margin-top:10px;padding:13px;border-radius:var(--r-md);background:rgba(139,92,246,.1);border:1px solid rgba(139,92,246,.3)}
.emoji-row{display:flex;flex-wrap:wrap;gap:7px}
.emoji-pick{
  width:40px;height:40px;border-radius:13px;background:rgba(255,255,255,.06);
  border:1px solid var(--line-strong);font-size:20px;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;
}
.emoji-pick.is-on{background:rgba(139,92,246,.3);border-color:var(--violet-2);box-shadow:0 0 14px rgba(139,92,246,.45)}
.emoji-pick:active{transform:scale(.92)}

/* ===== Топ лидеров ===== */
.top__place{
  width:28px;height:28px;flex:0 0 28px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;
  font-size:12.5px;font-weight:900;background:rgba(255,255,255,.08);color:var(--hint);
}
.list__item--me{background:rgba(139,92,246,.16);border-color:rgba(139,92,246,.45)}
.list__item--me .top__place{background:linear-gradient(140deg,var(--violet),var(--coral));color:#fff;box-shadow:0 4px 12px rgba(139,92,246,.4)}
.top__cap{font-size:13px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ===== Бейджи ===== */
.badge{
  display:inline-flex;align-items:center;gap:4px;
  font-size:11.5px;font-weight:800;letter-spacing:.02em;
  padding:4px 10px;border-radius:999px;
  background:rgba(255,255,255,.07);border:1px solid var(--line);color:var(--text-2);
}
.badge--gold{background:rgba(255,196,77,.16);border-color:rgba(255,196,77,.38);color:var(--gold)}
.badge--danger{background:rgba(255,77,109,.16);border-color:rgba(255,77,109,.38);color:#ff7a93}
.badge--success{background:rgba(163,230,53,.16);border-color:rgba(163,230,53,.38);color:var(--lime)}
.badge--violet{background:rgba(139,92,246,.18);border-color:rgba(139,92,246,.4);color:var(--violet-2)}
.badge--cyan{background:rgba(34,211,238,.16);border-color:rgba(34,211,238,.38);color:var(--cyan)}
.badge--warn{background:rgba(255,196,77,.15);border-color:rgba(255,196,77,.34);color:#fcd34d}
/* свой, который ещё не открыл игру — тише остальных, но не серый */
.badge--off{background:rgba(139,92,246,.12);border-color:rgba(139,92,246,.34);color:var(--violet-2)}

/* ===== Кнопки ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:11px 16px;border-radius:15px;font-weight:800;font-size:14px;
  background:var(--card-3);border:1px solid var(--line);color:var(--text);
  transition:transform .1s cubic-bezier(.2,.8,.3,1),filter .18s ease,box-shadow .18s ease;
  white-space:nowrap;position:relative;overflow:hidden;
  box-shadow:var(--hairline);
}
/* блик сверху — кнопка выглядит «объёмной», а не плоской заливкой */
.btn::after{
  content:"";position:absolute;left:0;right:0;top:0;height:52%;border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.22),transparent);
  pointer-events:none;
}
.btn:active{transform:scale(.96)}
.btn[disabled]{opacity:.42;filter:grayscale(.55);pointer-events:none}
/* тёмная надпись на коралловом: белый давал контраст 3,2:1 — ниже нормы */
.btn--primary{
  background:linear-gradient(135deg,var(--violet) 0%,#6d28d9 52%,#be123c 128%);
  border-color:transparent;color:#fff;box-shadow:var(--glow-violet);
}
.btn--lime{background:linear-gradient(135deg,#84cc16,var(--lime));border-color:transparent;color:#14210a;box-shadow:0 8px 24px rgba(163,230,53,.28)}
.btn--cyan{background:linear-gradient(135deg,#0891b2,var(--cyan));border-color:transparent;color:#052027;box-shadow:0 8px 24px rgba(34,211,238,.26)}
.btn--gold{background:linear-gradient(135deg,#d99a1b,var(--gold));border-color:transparent;color:#2a1c05;box-shadow:0 8px 24px rgba(255,196,77,.28)}
.btn--danger{background:rgba(255,77,109,.16);border-color:rgba(255,77,109,.45);color:#ff8fa5}
.btn--ghost{background:transparent;border-color:var(--line-strong)}
.btn--block{width:100%}
.btn--wide{width:100%}
/* две кнопки зова делят строку поровну: с иконками они иначе не влезают */
.invite-acts{flex-wrap:nowrap;gap:8px}
.invite-acts .btn{flex:1;min-width:0;font-size:13px;padding-left:11px;padding-right:11px}
/* мелкие кнопки тоже должны попадать пальцем: минимум 44 px */
.btn--sm{padding:10px 14px;font-size:13.5px;border-radius:14px;min-height:44px}
.btn--lg{padding:15px 22px;font-size:16px;border-radius:18px;min-height:52px}
.btn--pulse{animation:pulse 2.6s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 10px 28px rgba(139,92,246,.35)}50%{box-shadow:0 10px 42px rgba(139,92,246,.6)}}
/* хватает монет — кнопка светится золотом; не хватает — притихает */
.btn.is-can-buy{
  background:linear-gradient(135deg,#d99a1b,var(--gold));
  border-color:transparent;color:#2a1c05;
  box-shadow:0 8px 22px rgba(255,196,77,.32);
}
.btn.is-poor{opacity:.5;filter:grayscale(.35)}

/* фокус виден везде: в Telegram Desktop на клавиатуре это единственный ориентир */
:focus-visible{
  outline:2px solid var(--violet-2);
  outline-offset:2px;
  border-radius:12px;
}

/* ===== Поля и чипы ===== */
.input{
  width:100%;padding:13px 15px;border-radius:16px;font-size:15px;font-family:inherit;
  background:rgba(255,255,255,.06);border:1px solid var(--line-strong);color:var(--text);outline:none;
  min-width:0;min-height:48px;
  margin-top:10px;transition:border-color .18s ease,background .18s ease,box-shadow .18s ease;
}
.input:focus{
  border-color:var(--violet-2);background:rgba(139,92,246,.1);
  box-shadow:0 0 0 3px rgba(139,92,246,.18);
}
.input::placeholder{color:var(--hint)}
.input--area{min-height:88px;resize:vertical;line-height:1.45}
.label{font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--hint);margin:16px 0 8px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  padding:9px 13px;border-radius:999px;background:rgba(255,255,255,.05);
  border:1px solid var(--line);font-size:13px;font-weight:700;color:var(--text-2);
  display:inline-flex;align-items:center;gap:6px;transition:transform .12s ease,background .18s ease;
  min-height:44px;
}
.chip:active{transform:scale(.95)}
.chip.is-on{
  background:linear-gradient(135deg,rgba(139,92,246,.32),rgba(255,77,109,.22));
  border-color:var(--violet-2);color:#fff;
  box-shadow:0 6px 18px rgba(139,92,246,.25);
}
.verdict{border-radius:16px;padding:12px 14px;font-size:13px;line-height:1.5}
.verdict--ok{background:rgba(163,230,53,.11);border:1px solid rgba(163,230,53,.34);color:#d4f58a}
.verdict--warn{background:rgba(255,196,77,.11);border:1px solid rgba(255,196,77,.34);color:#ffd98a}
.verdict--bad{background:rgba(255,77,109,.13);border:1px solid rgba(255,77,109,.38);color:#ff9bb0}

/* ===== Плитки ===== */
.grid{display:grid;gap:10px}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.stat-tile{
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  border:1px solid var(--line);border-radius:var(--r-md);padding:11px 12px;
  box-shadow:var(--hairline);
}
.stat-tile__v{font-weight:900;font-size:18px;font-variant-numeric:tabular-nums;letter-spacing:-.5px}
.stat-tile__l{font-size:12px;color:var(--hint);font-weight:700;margin-top:3px;letter-spacing:.01em}

/* ===== Карточка сотрудника ===== */
.wk{display:flex;gap:12px;align-items:flex-start}
.wk__name{
  font-weight:900;font-size:15px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;letter-spacing:-.2px;
  overflow-wrap:anywhere;min-width:0;
}
.wk__prof{font-size:13px;color:var(--text-2);display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:3px;min-width:0}
.wk__income{font-weight:900;color:var(--lime);font-variant-numeric:tabular-nums;font-size:15px}
/* Полоса показателей: три равные ячейки вместо рыхлой строки — глазу проще
   сравнивать выручку, зарплату и настроение. */
.wk__stats{display:flex;gap:7px;margin-top:9px}
.wk__stat{
  flex:1;min-width:0;padding:7px 10px;border-radius:13px;
  background:rgba(255,255,255,.045);border:1px solid var(--line);
  display:flex;flex-direction:column;gap:2px;
}
.wk__stat b{
  font-size:14px;font-weight:900;font-variant-numeric:tabular-nums;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.wk__stat i{font-style:normal;font-size:11px;font-weight:700;color:var(--hint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wk__stat--lead{background:rgba(163,230,53,.1);border-color:rgba(163,230,53,.26)}
.wk__stat--lead b{color:var(--lime)}
/* настроение — подпись у полоски: так подпись не конкурирует с цифрами */
.wk__mor{display:flex;align-items:center;gap:10px;margin-top:9px}
.wk__mor .bar{flex:1;min-width:0;margin-top:0}
.wk__mor-l{font-size:11.5px;font-weight:700;color:var(--hint);white-space:nowrap;flex:0 0 auto}
.wk__mor-l b{color:var(--text);font-weight:900}
/* Действия: главная кнопка во всю ширину, вторая строка — охрана и «Ещё».
   Раньше три кнопки влезали в одну строку и текст в них обрезался. */
.wk__acts{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.wk__acts-row{display:flex;gap:8px;align-items:center}
.wk__more{flex:0 0 auto;min-width:72px;padding:10px 12px}
.btn__price{font-variant-numeric:tabular-nums;font-weight:900;opacity:.92}
.ic--act{flex:0 0 auto;opacity:.95}
.lvl-pill{
  background:rgba(255,255,255,.08);border:1px solid var(--line);border-radius:9px;
  padding:2px 8px;font-size:11.5px;font-weight:800;color:var(--text-2);white-space:nowrap;
}

/* ===== Полосы ===== */
.bar{height:9px;border-radius:99px;background:rgba(255,255,255,.09);overflow:hidden;margin-top:8px}
.bar__fill{height:100%;border-radius:99px;background:linear-gradient(90deg,#22d3ee,#a3e635);transition:width .35s ease}
.bar__fill--low{background:linear-gradient(90deg,#ffc44d,#ff4d6d)}
.bar__fill--gold{background:linear-gradient(90deg,#ffc44d,#ff4d6d)}
.bar__fill--violet{background:linear-gradient(90deg,#8b5cf6,#22d3ee)}
.bar__fill--sky{background:linear-gradient(90deg,#8b5cf6,#22d3ee)}

/* ===== Список ===== */
.list{display:flex;flex-direction:column;gap:9px}
.list__item{
  display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:var(--r-md);
  background:rgba(255,255,255,.045);border:1px solid var(--line);
  box-shadow:var(--hairline);
}
.list__t{font-weight:800;font-size:14px}
.list__s{font-size:12.5px;color:var(--hint);font-weight:500;line-height:1.4}
.q-item{
  display:flex;gap:10px;align-items:center;background:rgba(255,255,255,.045);
  border:1px solid var(--line);border-radius:var(--r-md);padding:12px 13px;
  box-shadow:var(--hairline);
}

/* ===== Модалка ===== */
.modal{
  position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center;
  background:rgba(4,6,12,.74);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  animation:fade .18s ease;
}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes rise{from{transform:translateY(34px);opacity:.15}to{transform:translateY(0);opacity:1}}
.modal__sheet{
  width:100%;max-width:560px;
  background:linear-gradient(180deg,#1e2337,#12151f);
  border:1px solid var(--line-strong);border-bottom:0;border-radius:28px 28px 0 0;
  padding:10px 16px calc(16px + var(--safe-b));
  animation:rise .28s cubic-bezier(.2,.9,.3,1);
  max-height:88dvh;overflow-y:auto;
  box-shadow:0 -20px 60px rgba(3,5,12,.6);
  position:relative;
}
.modal__grip{
  width:44px;height:4px;border-radius:99px;background:rgba(255,255,255,.22);margin:0 auto 14px;
}
/* крестик: у каждого окна должен быть явный выход */
.modal__close{
  position:absolute;top:12px;right:12px;z-index:2;
  width:44px;height:44px;border-radius:14px;
  background:rgba(255,255,255,.08);border:1px solid var(--line-strong);
  color:var(--text);font-size:16px;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;
  transition:transform .12s ease,background .18s ease;
}
.modal__close:active{transform:scale(.92);background:rgba(255,255,255,.14)}
.modal__title{font-size:20px;font-weight:900;margin:0 0 5px;letter-spacing:-.5px;padding-right:52px}
.modal__sub{font-size:13.5px;color:var(--hint);margin:0 0 16px;font-weight:500;line-height:1.45}
.modal__acts{display:flex;gap:10px;margin-top:18px}
.modal__acts .btn{flex:1;min-height:48px}

/* ===== меню действий (шторка «Ещё») ===== */
.menu-list{display:flex;flex-direction:column;gap:8px}
.menu-sec{
  font-size:10.5px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
  color:var(--hint);margin:10px 2px 0;display:flex;align-items:center;gap:8px;
}
.menu-sec:first-child{margin-top:0}
.menu-sec::after{content:"";flex:1;height:1px;background:var(--line)}
.menu-sec--danger{color:#ff8fa5}
.menu-row{
  display:flex;align-items:center;gap:11px;text-align:left;
  width:100%;padding:11px 13px;border-radius:var(--r-md);
  background:rgba(255,255,255,.05);border:1px solid var(--line);
  font-size:14.5px;font-weight:700;color:var(--text);
  transition:transform .12s ease,background .18s ease;
  min-height:52px;
}
.menu-row:active{transform:scale(.98);background:rgba(255,255,255,.09)}
.menu-row b{color:var(--hint);font-weight:800;font-size:13px;white-space:nowrap}
.menu-row__ic{
  flex:0 0 32px;width:32px;height:32px;border-radius:11px;
  display:grid;place-items:center;
  background:rgba(255,255,255,.07);border:1px solid var(--line);color:var(--text-2);
}
.menu-row__ic--good{color:var(--lime);background:rgba(163,230,53,.12);border-color:rgba(163,230,53,.26)}
.menu-row__ic--warn{color:var(--gold);background:rgba(255,196,77,.12);border-color:rgba(255,196,77,.26)}
.menu-row__ic--violet{color:var(--violet-2);background:rgba(139,92,246,.14);border-color:rgba(139,92,246,.3)}
.menu-row__ic--cyan{color:var(--cyan);background:rgba(34,211,238,.12);border-color:rgba(34,211,238,.26)}
.menu-row__ic--gold{color:var(--gold);background:rgba(255,196,77,.12);border-color:rgba(255,196,77,.26)}
.menu-row__ic--bad{color:#ff8fa5;background:rgba(255,77,109,.14);border-color:rgba(255,77,109,.3)}
.menu-row__t{flex:1;min-width:0;font-weight:700;letter-spacing:-.1px}
.menu-row__v{margin-left:auto;flex:0 0 auto}
.menu-row--note{color:var(--hint);font-weight:600;font-size:13px;cursor:default}
.menu-row--danger{color:#ff9bb0;border-color:rgba(255,77,109,.35);background:rgba(255,77,109,.1)}
.menu-row--danger b{color:#ff9bb0}
.menu-row[disabled]{opacity:.45;filter:grayscale(.4);pointer-events:none}

/* ===== Тосты ===== */
/* сверху: снизу тост наезжал на шторку модалки и закрывал кнопки */
.toast-root{
  position:fixed;left:0;right:0;top:calc(var(--safe-t) + 66px);z-index:100;
  display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;padding:0 14px;
}
.toast{
  background:rgba(30,35,54,.97);border:1px solid var(--line-strong);border-radius:16px;
  padding:11px 16px;font-size:13.5px;font-weight:700;max-width:94%;
  box-shadow:var(--shadow), var(--hairline);animation:dropIn .24s ease;
  backdrop-filter:blur(10px);
}
@keyframes dropIn{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
.toast--ok{border-color:rgba(163,230,53,.55);color:#d4f58a}
.toast--err{border-color:rgba(255,77,109,.55);color:#ff9bb0}
.toast--gold{border-color:rgba(255,196,77,.55);color:#ffd98a}

/* ===== Нижняя навигация: парящий док ===== */
.tabbar{
  display:flex;gap:4px;padding:6px;margin:0 10px calc(10px + var(--safe-b));
  border-radius:24px;z-index:20;
  background:rgba(18,21,34,.86);
  backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%);
  border:1px solid var(--line-strong);
  box-shadow:0 -4px 34px rgba(3,5,12,.55), var(--hairline);
}
.tab{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:9px 2px;border-radius:18px;color:var(--hint);font-size:10.5px;font-weight:800;
  transition:color .16s ease,background .16s ease,transform .12s ease;
  position:relative;
}
.tab__badge{
  position:absolute;top:6px;right:calc(50% - 17px);width:8px;height:8px;border-radius:99px;
  background:var(--coral);box-shadow:0 0 8px rgba(255,77,109,.8);
}
.tab:active{transform:scale(.94)}
.tab svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tab.is-on{
  color:#fff;
  background:linear-gradient(160deg,rgba(139,92,246,.44),rgba(255,77,109,.24));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 6px 18px rgba(139,92,246,.3);
}
.tab.is-on svg{filter:drop-shadow(0 3px 8px rgba(139,92,246,.65))}

/* ===== Разное ===== */
.empty{text-align:center;padding:36px 16px;color:var(--hint);line-height:1.55}
.empty__ico{
  display:grid;place-items:center;width:76px;height:76px;border-radius:26px;
  background:radial-gradient(circle at 50% 28%, rgba(139,92,246,.3), rgba(255,255,255,.02) 72%);
  border:1px solid var(--line);font-size:32px;margin:0 auto 16px;
  box-shadow:0 14px 34px rgba(3,5,12,.42);
}

/* ===== Лента империи ===== */
.feed{padding:6px 10px}
.feed__row{
  display:flex;align-items:flex-start;gap:9px;padding:9px 0;
  border-bottom:1px solid rgba(255,255,255,.05);font-size:13px;line-height:1.45;
}
.feed__row:last-child{border-bottom:none}
.feed__ico{font-size:15px;flex:0 0 20px;text-align:center;line-height:1.3}
.feed__text{flex:1;color:var(--text-2);min-width:0}
.feed__time{font-size:11px;color:var(--hint);flex:0 0 auto;white-space:nowrap;padding-top:3px}
.feed__row--good .feed__text{color:#d4f58a}
.feed__row--bad .feed__text{color:#ff9db0}

/* ===== Первые шаги ===== */
.onboard__step{display:flex;align-items:flex-start;gap:9px;font-size:13px;line-height:1.45;padding:7px 0;color:var(--text-2)}
.onboard__mark{color:var(--violet-2);font-weight:900;flex:0 0 14px}
.onboard__step.is-done{color:var(--hint)}
.onboard__step.is-done .onboard__mark{color:var(--lime)}

/* ===== Достижения ===== */
.ach{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.ach:last-child{border-bottom:none}
.ach__ico{font-size:21px;flex:0 0 28px;text-align:center}
.ach__name{font-size:13.5px;font-weight:800;color:var(--text)}
.ach__desc{font-size:12.5px;color:var(--hint);margin-top:2px}
.ach__bar{height:6px;border-radius:99px;background:rgba(255,255,255,.09);margin-top:7px;overflow:hidden}
.ach__bar>span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--violet),var(--cyan));transition:width .3s ease}
.ach__val{font-size:11.5px;color:var(--hint);font-weight:800;white-space:nowrap}
.ach.is-ready .ach__name{color:var(--lime)}
.ach.is-ready .ach__bar>span{background:linear-gradient(90deg,var(--lime),var(--cyan))}
.ach.is-done{opacity:.6}
.ach.is-done .ach__ico{filter:grayscale(1)}
.ach__bar--total{height:8px;margin:2px 0 10px}

/* ===== Награда дня ===== */
/* minmax(0,1fr) — иначе колонки распирает длинный текст («+3,2 тыс») и
   четвёртый день уезжает за край модалки */
.daily-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:2px}
.daily-day{
  position:relative;border:1px solid var(--line);border-radius:var(--r-md);
  padding:10px 4px;background:rgba(255,255,255,.04);text-align:center;overflow:hidden;
}
.daily-day__n{font-size:11px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--hint)}
.daily-day__r{font-size:12px;font-weight:800;margin-top:4px;white-space:nowrap}
.daily-day.is-done{opacity:.55}
.daily-day.is-now{border-color:var(--gold);box-shadow:0 0 0 1px rgba(255,196,77,.5),0 8px 22px rgba(255,196,77,.2)}
.daily-day__mark{position:absolute;top:4px;right:8px;color:var(--lime);font-weight:900;font-size:12px}
.daily-strip{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.daily-chip{
  width:28px;height:28px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--hint);
}
.daily-chip.is-done{color:var(--lime);border-color:rgba(163,230,53,.45)}
.daily-chip.is-now{color:#2a1c05;background:var(--gold);border-color:transparent}

/* ===== Тапалка: всплывающие цифры и вспышки ===== */
.tapcard{position:relative;overflow:hidden}
.tapfloat{
  position:absolute;top:34%;left:50%;transform:translateX(-50%);z-index:2;
  font-weight:900;font-size:16px;color:var(--gold);pointer-events:none;white-space:nowrap;
  text-shadow:0 2px 8px rgba(0,0,0,.55);animation:floatUp .9s ease-out forwards;
}
.tapfloat--crit{font-size:20px;color:#ffd98a}
@keyframes floatUp{from{opacity:1;transform:translate(-50%,0)}to{opacity:0;transform:translate(-50%,-48px)}}
.btn.is-tapped{animation:tapPop .17s ease}
@keyframes tapPop{50%{transform:scale(.92)}}
.tapcard.is-crit{animation:critGlow .44s ease}
@keyframes critGlow{50%{box-shadow:0 0 0 2px rgba(255,196,77,.7),0 12px 36px rgba(255,196,77,.35)}}

/* ===== Появление карточек при смене экрана ===== */
@keyframes cardIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes screenFade{from{opacity:.35}to{opacity:1}}
/* смена вкладки — один короткий фейд всего экрана.
   Поочерёдное «выпрыгивание» карточек выглядело как множественная
   перезагрузка страницы — убрали в пользу мгновенности */
#screen.enter{animation:screenFade .14s ease}
#screen.enter > *:nth-child(n+8){animation-delay:.29s}

body[data-scheme="light"] .feed__row{border-bottom-color:rgba(0,0,0,.06)}
body[data-scheme="light"] .ach{border-bottom-color:rgba(0,0,0,.06)}
body[data-scheme="light"] .ach__bar{background:rgba(0,0,0,.07)}
.notice{
  background:rgba(34,211,238,.1);border:1px solid rgba(34,211,238,.3);color:#a5eefc;
  border-radius:var(--r-md);padding:12px 14px;font-size:13px;line-height:1.5;
}
.linkbox{
  background:rgba(139,92,246,.12);border:1px dashed rgba(139,92,246,.42);color:#d9c9ff;
  border-radius:var(--r-md);padding:11px 13px;font-size:12.5px;word-break:break-all;line-height:1.45;
}
.switch{
  width:50px;height:30px;border-radius:99px;background:rgba(255,255,255,.1);
  border:1px solid var(--line-strong);position:relative;flex:0 0 50px;transition:background .18s;
}
.switch::after{
  content:"";position:absolute;top:2px;left:2px;width:24px;height:24px;border-radius:99px;
  background:#9aa3bd;transition:transform .18s,background .18s;
}
.switch.is-on{background:linear-gradient(135deg,var(--violet),var(--coral));border-color:transparent}
.switch.is-on::after{transform:translateX(20px);background:#fff}
.icon{width:16px;height:16px;vertical-align:-3px;display:inline-block}

/* ===== Иконки валют ===== */
.ic{vertical-align:-2px;display:inline-block}
.ic--coin .coin-face{fill:var(--coin-fill,#ffc44d);stroke:var(--coin-stroke,#b07d0f);stroke-width:1.8}
.ic--coin .coin-line{fill:none;stroke:var(--coin-glyph,var(--coin-stroke,#b07d0f));stroke-width:1.5;stroke-linecap:round}
.ic--gem .gem-face{fill:var(--gem-fill,#22d3ee);stroke:var(--gem-stroke,#0e7490);stroke-width:1.5;stroke-linejoin:round}
.ic--gem .gem-line{fill:none;stroke:var(--gem-glyph,var(--gem-stroke,#0e7490));stroke-width:1.2}
/* на цветных кнопках иконка повторяет цвет текста, но знак внутри остаётся виден */
.btn--primary{--coin-fill:#fff;--coin-stroke:rgba(42,28,5,.45);--coin-glyph:rgba(42,28,5,.85);--gem-fill:#fff;--gem-stroke:rgba(42,28,5,.45);--gem-glyph:rgba(42,28,5,.85)}
.btn--lime{--coin-fill:#14210a;--coin-stroke:#14210a;--coin-glyph:rgba(255,255,255,.92);--gem-fill:#14210a;--gem-stroke:#14210a;--gem-glyph:rgba(255,255,255,.92)}
.btn--gold{--coin-fill:#2a1c05;--coin-stroke:#2a1c05;--coin-glyph:rgba(255,255,255,.92);--gem-fill:#2a1c05;--gem-stroke:#2a1c05;--gem-glyph:rgba(255,255,255,.92)}
.btn--cyan{--coin-fill:#052027;--coin-stroke:#052027;--coin-glyph:rgba(255,255,255,.92);--gem-fill:#052027;--gem-stroke:#052027;--gem-glyph:rgba(255,255,255,.92)}
.btn.is-can-buy{--coin-fill:#2a1c05;--coin-stroke:#2a1c05;--coin-glyph:rgba(255,255,255,.92)}

/* ===== Светлая тема ===== */
body[data-scheme="light"]{
  --card-2:#f1f2f7;--card-3:#e6e8f0;--line:rgba(15,17,26,.1);--line-strong:rgba(15,17,26,.16);
  --shadow:0 12px 30px rgba(20,25,45,.12);
  --hairline:inset 0 1px 0 rgba(255,255,255,.9);
}
body[data-scheme="light"] .aurora{opacity:.45}
body[data-scheme="light"] .card{background:linear-gradient(180deg,#fff,#f7f8fc)}
body[data-scheme="light"] .card::before{opacity:.35}
body[data-scheme="light"] .stat-tile{background:#fff}
body[data-scheme="light"] .upg{background:#f6f7fb}
body[data-scheme="light"] .list__item,body[data-scheme="light"] .q-item{background:#f6f7fb}
body[data-scheme="light"] .tabbar{background:rgba(255,255,255,.9);box-shadow:0 -4px 26px rgba(20,25,45,.12), var(--hairline)}
body[data-scheme="light"] .topbar{background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.62))}
body[data-scheme="light"] .modal__sheet{background:linear-gradient(180deg,#fff,#f4f6fb)}
body[data-scheme="light"] .chip{background:#fff}
body[data-scheme="light"] .input{background:#fff}
body[data-scheme="light"] .hero::after{background:linear-gradient(160deg, rgba(10,11,18,.3), rgba(10,11,18,.88))}
body[data-scheme="light"] .hero__label{color:rgba(255,255,255,.6)}
body[data-scheme="light"] .hero__profit{background:linear-gradient(92deg,#fff 10%,var(--lime) 90%);-webkit-background-clip:text;background-clip:text;color:transparent}
body[data-scheme="light"] .hero__chip{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2);color:#fff}
body[data-scheme="light"] .hero__name{color:rgba(255,255,255,.94)}
body[data-scheme="light"] .hero__xp{color:rgba(255,255,255,.65)}
body[data-scheme="light"] .hero .bar{background:rgba(255,255,255,.16)}
body[data-scheme="light"] .brand__name{background:linear-gradient(92deg,#141824 20%,#7c3aed 95%);-webkit-background-clip:text;background-clip:text;color:transparent}
body[data-scheme="light"] .link-btn{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.3);color:#fff}
body[data-scheme="light"] .hud__item--coin{color:#a5700a;border-color:rgba(165,112,10,.3)}
body[data-scheme="light"] .hud__item--gem{color:#0e7490;border-color:rgba(14,116,144,.3)}
body[data-scheme="light"] .hud__item--rate{color:#4d7c0f;border-color:rgba(77,124,15,.3)}
body[data-scheme="light"] .verdict--ok{color:#3f7d12;background:rgba(163,230,53,.14);border-color:rgba(77,124,15,.28)}
body[data-scheme="light"] .verdict--warn{color:#8a5a00;background:rgba(255,196,77,.14);border-color:rgba(138,90,0,.28)}
body[data-scheme="light"] .verdict--bad{color:#b3122f;background:rgba(255,77,109,.1);border-color:rgba(179,18,47,.26)}
body[data-scheme="light"] .badge--gold{color:#8a5a00}
body[data-scheme="light"] .badge--danger{color:#b3122f}
body[data-scheme="light"] .badge--success{color:#3f7d12}
/* в светлой теме цветные подписи почти не читались на белом (1,4–2,7:1) */
body[data-scheme="light"] .badge--cyan{color:#0e7490}
body[data-scheme="light"] .badge--violet{color:#4c1d95}
body[data-scheme="light"] .badge--warn{color:#8a5a00}
body[data-scheme="light"] .badge--off{color:#4c1d95}
body[data-scheme="light"] .card--off{background:linear-gradient(180deg,#fff,#f7f8fc)}
body[data-scheme="light"] .wk__income{color:#3f7d12}
body[data-scheme="light"] .grade__label{color:#8a5a00}
body[data-scheme="light"] .red{color:#b3122f}
body[data-scheme="light"] .green{color:#3f7d12}
body[data-scheme="light"] .gold{color:#8a5a00}
body[data-scheme="light"] .toast{background:rgba(255,255,255,.97)}
body[data-scheme="light"] .notice{color:#0e7490;background:rgba(34,211,238,.1)}
body[data-scheme="light"] .linkbox{background:rgba(139,92,246,.08);border-color:rgba(139,92,246,.3);color:#4c1d95}
body[data-scheme="light"] .tab.is-on{color:#4c1d95;background:linear-gradient(160deg,rgba(139,92,246,.24),rgba(255,77,109,.16));box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
body[data-scheme="light"] .section::before{background:linear-gradient(90deg,#7c3aed,#ff4d6d)}

/* ===== Узкие экраны ===== */
@media (max-width:390px){
  .hud__item{padding:5px 9px;font-size:12.5px;gap:4px}
  .brand__logo{width:32px;height:32px;border-radius:11px}
  .brand__name{font-size:16px}
  .tab{font-size:10px}
  .tab svg{width:22px;height:22px}
  .hero__profit{font-size:31px}
  .screen__title{font-size:23px}
  .tabbar{margin:0 8px calc(8px + var(--safe-b));padding:5px}
  .btn{padding:10px 13px;font-size:13.5px}
  .chip{font-size:12.5px;padding:8px 11px}
  .empty__ico{width:66px;height:66px;font-size:28px}
}
@media (max-width:360px){
  /* скорость важнее кристаллов: без неё не понятно, растёт ли команда */
  .hud__item--gem{display:none}
  .screen{padding:14px 11px 24px}
}
@media (max-width:380px){
  /* узкий экран: у «Ещё» остаётся только значок — так кнопка охраны
     не обрезает цену */
  .wk__more-t{display:none}
  .wk__more{min-width:44px;padding:10px 12px}
}

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

/* ---------- анимации поведения ---------- */
/* новый человек въезжает в команду */
.card.is-new{animation:staffIn .5s cubic-bezier(.2,.9,.3,1.2)}
@keyframes staffIn{from{opacity:0;transform:translateX(-26px) scale(.96)}to{opacity:1;transform:none}}
/* горящий заказ пульсирует */
.order--hot{animation:hotPulse 1s ease-in-out infinite;border-radius:12px}
@keyframes hotPulse{0%,100%{background:rgba(255,99,72,.08);box-shadow:inset 0 0 0 1px rgba(255,99,72,.25)}50%{background:rgba(255,99,72,.16);box-shadow:inset 0 0 0 2px rgba(255,99,72,.5)}}
/* праздник уровня */
.lvlup{position:fixed;left:0;right:0;top:18%;display:flex;flex-direction:column;align-items:center;pointer-events:none;z-index:120;animation:lvlFlash 2.2s ease forwards}
.lvlup__v{font-size:22px;font-weight:800;color:#ffd166;text-shadow:0 2px 18px rgba(255,196,77,.65);animation:lvlPop .6s cubic-bezier(.2,1.4,.4,1)}
.lvlup__s{font-size:13px;color:var(--tg-hint,#7f8b9c);margin-top:4px}
@keyframes lvlPop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes lvlFlash{0%{opacity:0;transform:translateY(-14px)}12%{opacity:1;transform:none}80%{opacity:1}100%{opacity:0;transform:translateY(-10px)}}
/* настроение: полоса дышит красным при критическом уровне */
.bar__fill--low{animation:lowBreath 1.6s ease-in-out infinite}
@keyframes lowBreath{0%,100%{filter:saturate(1)}50%{filter:saturate(1.8) brightness(1.15)}}
@media (prefers-reduced-motion: reduce){
  .card.is-new,.order--hot,.lvlup,.lvlup__v,.bar__fill--low,.aurora{animation:none}
}