:root {
  --bg-0: #0a0714;
  --bg-1: #150b2e;
  --bg-2: #1d0f3d;
  --text: #f4f2ff;
  --hint: #a79bd1;
  --hint-dim: #8577ad;
  --card-bg: rgba(255, 255, 255, 0.045);
  --card-border: rgba(255, 255, 255, 0.09);
  --card-bg-hover: rgba(255, 255, 255, 0.07);
  --accent-1: #8b5cf6;
  --accent-2: #ec4899;
  --accent-3: #f59e0b;
  --grad-main: linear-gradient(135deg, #8b5cf6 0%, #ec4899 55%, #f59e0b 100%);
  --grad-btn: linear-gradient(135deg, #7c3aed 0%, #db2777 100%);
  --grad-btn-hover: linear-gradient(135deg, #8b47f5 0%, #ec4899 100%);
  --danger: #fb5c72;
  --success: #34e0a1;
  --warn: #ffc857;
  --shadow-card: 0 8px 30px -12px rgba(90, 30, 160, 0.35);
  --shadow-btn: 0 6px 20px -6px rgba(219, 39, 119, 0.55);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  padding-bottom: 90px;
  min-height: 100vh;
  background:
    radial-gradient(circle at 15% 0%, rgba(139, 92, 246, 0.35), transparent 45%),
    radial-gradient(circle at 100% 20%, rgba(236, 72, 153, 0.22), transparent 40%),
    radial-gradient(circle at 20% 100%, rgba(245, 158, 11, 0.12), transparent 45%),
    linear-gradient(160deg, var(--bg-0) 0%, var(--bg-1) 55%, var(--bg-2) 100%);
  /* No background-attachment: fixed — known to cause repaint stalls/blank
     screens in some iOS WKWebView versions (which is what Telegram iOS
     renders Mini Apps in), especially combined with multiple radial
     gradients. The gradient is fixed to the page anyway since nothing here
     scrolls independently of body. */
}

header.app-header {
  padding: calc(20px + env(safe-area-inset-top)) 16px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

header.app-header h1 {
  font-size: 21px;
  font-weight: 800;
  margin: 0;
  color: #fff; /* fallback if background-clip:text isn't supported — text stays visible, just not gradient */
  background: var(--grad-main);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.01em;
}

.container { padding: 0 16px; }

/* --- Bottom tab bar --- */
.tabs {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  display: flex;
  background: rgba(15, 8, 30, 0.82);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 8px 4px calc(8px + env(safe-area-inset-bottom));
  z-index: 10;
}

.tab {
  flex: 1;
  text-align: center;
  padding: 6px 2px;
  font-size: 11px;
  font-weight: 500;
  color: var(--hint-dim);
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 12px;
  transition: color 0.15s;
}

.tab .icon {
  display: block;
  font-size: 19px;
  margin-bottom: 3px;
  filter: grayscale(1) opacity(0.7);
  transition: filter 0.15s, transform 0.15s;
}

.tab.active {
  color: #fff;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.25), rgba(236, 72, 153, 0.18));
}
.tab.active .icon { filter: none; transform: scale(1.08); }

/* --- Cards --- */
.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 18px;
  padding: 16px;
  margin-bottom: 12px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow-card);
}

.card-title { font-weight: 700; font-size: 15.5px; margin: 0 0 4px; letter-spacing: -0.01em; }
.card-sub { color: var(--hint); font-size: 13px; margin: 0 0 8px; line-height: 1.5; }

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* --- Category accordions --- */
.category-group {
  border: 1px solid var(--card-border);
  border-radius: 18px;
  margin-bottom: 12px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.category-group summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  -webkit-tap-highlight-color: transparent;
}
.category-group summary::-webkit-details-marker { display: none; }

.cat-icon-chip {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  background: var(--cat-gradient, var(--grad-main));
  box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--accent-1) 60%, transparent);
}

.cat-title { flex: 1; font-weight: 700; font-size: 14.5px; }
.cat-count {
  font-size: 11.5px;
  color: var(--hint);
  background: rgba(255, 255, 255, 0.07);
  padding: 3px 9px;
  border-radius: 999px;
  font-weight: 600;
}

.cat-chevron {
  width: 18px; height: 18px;
  color: var(--hint);
  transition: transform 0.25s ease;
  flex-shrink: 0;
}
.category-group[open] .cat-chevron { transform: rotate(180deg); }

.category-body {
  padding: 0 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.agent-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 13px;
  transition: background 0.15s, border-color 0.15s;
}
.agent-card:active { background: var(--card-bg-hover); }

/* --- Info banner --- */
.info-banner {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.16), rgba(236, 72, 153, 0.10));
  border: 1px solid rgba(139, 92, 246, 0.28);
  border-radius: 16px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.info-banner p { margin: 0; font-size: 12.5px; line-height: 1.6; color: #ddd4fa; }

/* --- Buttons --- */
.btn {
  position: relative;
  overflow: hidden;
  display: inline-block;
  background: var(--grad-btn);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 11px 16px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  box-shadow: var(--shadow-btn);
  transition: transform 0.1s, box-shadow 0.15s, background 0.15s;
  letter-spacing: -0.005em;
}
.btn:active { transform: scale(0.97); }

/* Перелив — мягкий диагональный блик проходит по кнопке раз в несколько
   секунд, не мешая читаемости текста (низкая непрозрачность, короткая
   вспышка). Только на основных (не secondary/danger) кнопках — на них
   градиент уже сам по себе акцент, лишний блеск был бы избыточен. */
.btn:not(.secondary):not(.danger)::before {
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-20deg);
  animation: btn-shine 4.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes btn-shine {
  0%, 55% { left: -60%; }
  100% { left: 140%; }
}
@media (prefers-reduced-motion: reduce) {
  .btn:not(.secondary):not(.danger)::before { animation: none; display: none; }
}

.btn.secondary {
  background: rgba(255, 255, 255, 0.07);
  color: var(--text);
  box-shadow: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.btn.danger { background: linear-gradient(135deg, #ef4444, #dc2626); box-shadow: 0 6px 20px -6px rgba(220, 38, 38, 0.55); }
.btn.block { display: block; width: 100%; }
.btn-row { display: flex; gap: 8px; margin-top: 8px; }
.btn-row .btn { flex: 1; }
.btn:disabled { opacity: 0.55; }

/* --- Badges --- */
.badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--hint);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.badge.active {
  background: linear-gradient(135deg, rgba(52, 224, 161, 0.2), rgba(52, 224, 161, 0.08));
  color: var(--success);
  border-color: rgba(52, 224, 161, 0.3);
}
.badge.paused {
  background: linear-gradient(135deg, rgba(255, 200, 87, 0.2), rgba(255, 200, 87, 0.08));
  color: var(--warn);
  border-color: rgba(255, 200, 87, 0.3);
}
.badge.connectable {
  background: var(--grad-main);
  color: #fff;
  border: none;
}

/* --- Balance hero --- */
.balance-hero {
  text-align: center;
  padding: 28px 0 12px;
}
.balance-hero .amount {
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  background: var(--grad-main);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.balance-hero .sub { color: var(--hint); font-size: 13px; margin-top: 4px; }

.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.row:last-child { border-bottom: none; }

.input {
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text);
  border-radius: 12px;
  padding: 11px 13px;
  font-size: 14px;
  margin-bottom: 9px;
}
.input:focus { outline: none; border-color: var(--accent-1); background: rgba(139, 92, 246, 0.08); }
.input::placeholder { color: var(--hint-dim); }

.switch-row { display: flex; justify-content: space-between; align-items: center; padding: 11px 0; }

.empty-state { text-align: center; color: var(--hint); padding: 44px 16px; font-size: 14px; line-height: 1.6; }

.loading { text-align: center; color: var(--hint); padding: 28px; }

.toast {
  position: fixed;
  bottom: 96px; left: 16px; right: 16px;
  background: rgba(28, 14, 48, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 13px 16px;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.25s, transform 0.25s;
  pointer-events: none;
  z-index: 20;
}
.toast.show { opacity: 1; transform: translateY(0); }