/* Собственный визуальный язык: тёмно-фиолетовая база, стеклянные карточки,
   мятный акцент под деньги, плавающий док вместо панели во всю ширину. */

:root {
  --bg: #0a0812;
  --violet: #7c5cff;
  --violet-2: #a98bff;
  --indigo: #4a2fd6;
  --mint: #2ee6a8;
  --amber: #ffb547;
  --text: #f3f2fa;
  --muted: #8e8aa8;
  --glass: rgba(255, 255, 255, .05);
  --glass-2: rgba(255, 255, 255, .08);
  --line: rgba(255, 255, 255, .09);
  --r: 20px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  overscroll-behavior-y: none;
  min-height: 100%;
}

/* мягкие световые пятна на фоне — вместо плоской заливки */
.glow { position: fixed; border-radius: 50%; filter: blur(90px); z-index: 0; pointer-events: none; }
.glow-a { width: 300px; height: 300px; top: -120px; left: -80px; background: rgba(124, 92, 255, .38); }
.glow-b { width: 260px; height: 260px; top: 180px; right: -110px; background: rgba(46, 230, 168, .16); }

.app { position: relative; z-index: 1; padding: 16px 14px 110px; max-width: 560px; margin: 0 auto; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.sm { font-size: 12px; }
.strong { font-weight: 650; }
.mint { color: var(--mint); }
.center { text-align: center; }

/* ---------------------------------------------------------- верх */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.who { display: flex; align-items: center; gap: 11px; min-width: 0; }

.ava {
  width: 42px; height: 42px; flex: 0 0 42px; border-radius: 14px;
  background: linear-gradient(135deg, var(--violet), var(--indigo));
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 18px;
  box-shadow: 0 6px 18px rgba(124, 92, 255, .38);
}
.ava.xl { width: 76px; height: 76px; flex-basis: 76px; border-radius: 26px;
  font-size: 30px; margin: 0 auto 10px; }

.who-name { font-weight: 650; font-size: 16px; }
.who-sub { color: var(--muted); font-size: 11.5px; display: flex; align-items: center; gap: 5px; }
.live {
  width: 6px; height: 6px; border-radius: 50%; background: var(--mint);
  box-shadow: 0 0 0 0 rgba(46, 230, 168, .6); animation: pulse 2s infinite;
}
@keyframes pulse {
  70% { box-shadow: 0 0 0 7px rgba(46, 230, 168, 0); }
  100% { box-shadow: 0 0 0 0 rgba(46, 230, 168, 0); }
}

.lvl {
  background: var(--glass); border: 1px solid var(--line); color: var(--text);
  border-radius: 16px; padding: 7px 13px; text-align: center; line-height: 1.1;
}
.lvl-num { display: block; font-weight: 700; font-size: 17px; color: var(--amber); }
.lvl-cap { font-size: 9.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }

/* ---------------------------------------------------------- главный блок */
.hero {
  margin-top: 16px; padding: 18px;
  border-radius: 26px;
  background: linear-gradient(145deg, #6f4dff 0%, #4526c4 55%, #2d1a86 100%);
  box-shadow: 0 18px 40px -18px rgba(90, 50, 220, .9);
  position: relative; overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; width: 190px; height: 190px; right: -60px; top: -80px;
  background: rgba(255, 255, 255, .11); border-radius: 50%;
}
.hero-alt { background: linear-gradient(145deg, #14a97a 0%, #0e7f66 60%, #0b5b53 100%);
  box-shadow: 0 18px 40px -18px rgba(20, 169, 122, .8); }

.hero-top { display: flex; justify-content: space-between; align-items: center; }
.hero-cap { font-size: 12px; opacity: .8; text-transform: uppercase; letter-spacing: .09em; }
.hero-sum { font-size: 42px; font-weight: 750; letter-spacing: -.02em; margin: 4px 0 12px; }
.hero-sum em { font-style: normal; font-size: 20px; opacity: .75; margin-left: 5px; }

.bonus {
  background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .28);
  color: #fff; border-radius: 999px; padding: 6px 12px; font-size: 12.5px; font-weight: 600;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.bonus:disabled { opacity: .4; }

.hero-bar { height: 7px; border-radius: 6px; background: rgba(0, 0, 0, .3); overflow: hidden; }
.hero-bar i { display: block; height: 100%; border-radius: 6px;
  background: linear-gradient(90deg, #fff, var(--mint)); transition: width .5s; }
.hero-foot { display: flex; justify-content: space-between; font-size: 12px;
  opacity: .9; margin-top: 8px; }

/* ---------------------------------------------------------- плитки */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.tile {
  background: var(--glass); border: 1px solid var(--line); border-radius: 16px;
  padding: 12px 6px; text-align: center;
}
.tile b { display: block; font-size: 19px; font-weight: 700; }
.tile span { font-size: 10.5px; color: var(--muted); }

/* ---------------------------------------------------------- уровень */
.lvl-card {
  margin-top: 12px; padding: 14px;
  background: var(--glass); border: 1px solid var(--line); border-radius: var(--r);
}
.lvl-row { display: flex; justify-content: space-between; align-items: baseline; }
.track { height: 6px; border-radius: 5px; background: rgba(255, 255, 255, .09);
  margin: 10px 0 7px; overflow: hidden; }
.track i { display: block; height: 100%; border-radius: 5px;
  background: linear-gradient(90deg, var(--amber), #ff8a5c); transition: width .5s; }

/* ---------------------------------------------------------- лента выплат */
.strip-cap {
  margin: 20px 0 9px; font-size: 11px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .1em;
}
.strip { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 3px; }
.strip::-webkit-scrollbar { display: none; }
.pay {
  flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
  background: var(--glass); border: 1px solid var(--line);
  border-radius: 999px; padding: 7px 13px 7px 8px;
}
.pay-dot {
  width: 24px; height: 24px; border-radius: 50%; flex: 0 0 24px;
  background: linear-gradient(135deg, var(--violet), var(--indigo));
  display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700;
}
.pay b { color: var(--mint); font-size: 13px; }
.pay span { color: var(--muted); font-size: 10.5px; }
.strip-empty { color: var(--muted); font-size: 12px; padding: 6px 2px; }

/* ---------------------------------------------------------- фильтры */
.chips { display: flex; gap: 7px; margin: 18px 0 10px; overflow-x: auto; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto; background: transparent; border: 1px solid var(--line);
  color: var(--muted); border-radius: 999px; padding: 8px 16px; font-size: 13px;
}
.chip.on {
  background: linear-gradient(135deg, var(--violet), var(--indigo));
  border-color: transparent; color: #fff; font-weight: 600;
  box-shadow: 0 6px 16px -6px rgba(124, 92, 255, .9);
}

/* ---------------------------------------------------------- задания */
.list { display: flex; flex-direction: column; gap: 9px; }

.task {
  display: flex; align-items: center; gap: 12px;
  background: var(--glass); border: 1px solid var(--line);
  border-radius: var(--r); padding: 13px;
  transition: transform .12s, border-color .12s;
}
.task:active { transform: scale(.985); border-color: var(--violet); }
.task.off { opacity: .45; }

.task-ic {
  width: 44px; height: 44px; flex: 0 0 44px; border-radius: 15px;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
  background: rgba(124, 92, 255, .16); border: 1px solid rgba(124, 92, 255, .3);
}
.task-ic.a-video { background: rgba(255, 122, 89, .15); border-color: rgba(255, 122, 89, .32); }
.task-ic.a-likes { background: rgba(255, 181, 71, .15); border-color: rgba(255, 181, 71, .32); }
.task-ic.a-comment { background: rgba(46, 230, 168, .14); border-color: rgba(46, 230, 168, .3); }

.task-mid { flex: 1; min-width: 0; }
.task-t { font-weight: 600; font-size: 14.5px; }
.task-m { display: flex; align-items: center; gap: 6px; margin-top: 5px; flex-wrap: wrap; }
.tag { font-size: 10px; color: var(--muted); border: 1px solid var(--line);
  border-radius: 6px; padding: 2px 7px; }
.tag.wait { color: var(--amber); border-color: rgba(255, 181, 71, .4); }

.task-r {
  background: rgba(46, 230, 168, .12); border: 1px solid rgba(46, 230, 168, .28);
  color: var(--mint); font-weight: 700; font-size: 13.5px;
  border-radius: 999px; padding: 6px 11px; white-space: nowrap;
}
.task.off .task-r { background: none; border-color: var(--line); color: var(--muted); }

.empty { color: var(--muted); text-align: center; padding: 28px 10px; font-size: 13px; }

/* ---------------------------------------------------------- карточки/списки */
.card {
  background: var(--glass); border: 1px solid var(--line);
  border-radius: var(--r); padding: 15px; margin-top: 12px;
}
.card.prof { text-align: center; }
.prof-name { font-size: 19px; font-weight: 650; }

.line { display: flex; justify-content: space-between; align-items: center;
  padding: 11px 2px; border-bottom: 1px solid var(--line); }
.line:last-child { border-bottom: 0; }

.row-item {
  display: flex; align-items: center; gap: 10px;
  background: var(--glass); border: 1px solid var(--line);
  border-radius: 16px; padding: 12px 14px;
}
.row-item .grow { flex: 1; min-width: 0; }

.link {
  background: rgba(0, 0, 0, .3); border: 1px solid var(--line); border-radius: 14px;
  padding: 12px; font-size: 12.5px; word-break: break-all; color: var(--violet-2);
  margin: 7px 0 11px;
}

/* ---------------------------------------------------------- кнопки/поля */
.btn {
  background: linear-gradient(135deg, var(--violet), var(--indigo));
  color: #fff; border: 0; border-radius: 16px;
  padding: 14px 18px; font-size: 14.5px; font-weight: 650;
  box-shadow: 0 10px 24px -12px rgba(124, 92, 255, 1);
}
.btn:disabled { opacity: .5; box-shadow: none; }
.btn.ghost { background: transparent; border: 1px solid var(--line); color: var(--muted);
  box-shadow: none; }
.btn.wide { width: 100%; margin-top: 12px; }
.row2 { display: flex; gap: 8px; }
.row2 .btn { flex: 1; margin: 0; }

.input {
  width: 100%; background: rgba(0, 0, 0, .3); border: 1px solid var(--line);
  color: var(--text); border-radius: 14px; padding: 13px; font-size: 14px; margin-top: 4px;
}
.input:focus { outline: none; border-color: var(--violet); }

/* ---------------------------------------------------------- док */
.dock {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(14px + env(safe-area-inset-bottom));
  z-index: 30; display: flex; gap: 4px;
  background: rgba(20, 16, 34, .82); border: 1px solid var(--line);
  border-radius: 22px; padding: 7px;
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .85);
}
.dock-i {
  background: none; border: 0; color: var(--muted);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 15px; border-radius: 16px; font-size: 9.5px;
}
.dock-i i { font-style: normal; font-size: 17px; line-height: 1; }
.dock-i.on {
  background: linear-gradient(135deg, var(--violet), var(--indigo));
  color: #fff; font-weight: 600;
}

/* ---------------------------------------------------------- шторка */
.sheet-wrap {
  position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end;
  background: rgba(6, 4, 12, .72);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.sheet {
  width: 100%; max-width: 560px; margin: 0 auto;
  background: #150f26; border: 1px solid var(--line); border-bottom: 0;
  border-radius: 28px 28px 0 0;
  padding: 10px 18px calc(22px + env(safe-area-inset-bottom));
  animation: rise .24s cubic-bezier(.2, .8, .3, 1);
}
@keyframes rise { from { transform: translateY(101%); } }
.grip { width: 40px; height: 4px; border-radius: 3px; background: var(--line); margin: 0 auto 16px; }

.sheet-ic {
  width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 22px;
  background: rgba(124, 92, 255, .16); border: 1px solid rgba(124, 92, 255, .3);
  display: flex; align-items: center; justify-content: center; font-size: 28px;
}
.sheet-ic.ok { background: rgba(46, 230, 168, .14); border-color: rgba(46, 230, 168, .32);
  color: var(--mint); font-size: 32px; }
.sheet-title { font-size: 18px; font-weight: 650; text-align: center; }
.sheet-rew { text-align: center; font-size: 32px; font-weight: 750; color: var(--mint);
  margin: 12px 0 4px; }
.sheet-rew em { font-style: normal; font-size: 17px; opacity: .7; margin-left: 4px; }

/* ---------------------------------------------------------- ошибка запуска */
.fatal {
  max-width: 340px; margin: 0 auto; padding: 90px 24px 0; text-align: center;
}
.fatal-ic { font-size: 40px; margin-bottom: 14px; }
.fatal-t { font-size: 17px; font-weight: 650; margin-bottom: 8px; }
.fatal .btn { margin-top: 20px; width: 100%; }

/* ---------------------------------------------------------- тост */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 104px;
  background: #201936; border: 1px solid var(--line); color: var(--text);
  border-radius: 16px; padding: 12px 18px; font-size: 13.5px; z-index: 70;
  max-width: 90%; text-align: center; box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .9);
}
.toast.ok { background: linear-gradient(135deg, #1fb583, #0f7f5e); border-color: transparent;
  color: #fff; font-weight: 600; }
.toast.err { background: #7a2740; border-color: transparent; color: #fff; }