/* ════════════════════════════════════════════════════════
   CORE GRID — Components
   Карточки, кнопки, бары прогресса, toast, модальные окна
   ════════════════════════════════════════════════════════ */

/* ── Glass card (основа всех карточек) ───────────────── */
.card {
  position: relative;
  width: 100%;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: none;
  overflow: hidden;
}
.card--pad { padding: var(--card-pad); }

/* Верхняя светящаяся линия на главных карточках */
.card--accent::before {
  content: '';
  position: absolute;
  top: 0; left: 14px; right: 14px;
  height: 1px;
  background: var(--border-strong);
}

/* ── Topbar (compact per tab) ─────────────────────────── */
.topbar {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--divider);
  margin-bottom: 4px;
}
.topbar__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}
.topbar__row--main {
  row-gap: 6px;
}
.topbar__brand {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-title);
  text-transform: uppercase;
  color: var(--grid-2);
  flex-shrink: 0;
}
.topbar__rank {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--text-muted);
  padding: 4px 10px;
  border-radius: var(--r-full);
  background: var(--card);
  border: 1px solid var(--border);
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topbar__rank--l2 { color: var(--sky); border-color: var(--sky-dim); }
.topbar__rank--l3 { color: var(--violet); border-color: var(--violet-dim); }
.topbar__rank--l4 {
  color: var(--primary);
  border-color: var(--primary-dim);
  background: var(--primary-dim);
}

/* ── Topbar (compact — see mobile-shell.css for layout) ─ */
.topbar__pills,
.balance-pill--earn-only {
  display: none !important;
}

.balance-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 4px 8px;
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text-soft);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: var(--fw-bold);
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.balance-pill:active { transform: scale(0.98); }
.balance-pill--grid {
  border-color: rgba(255, 122, 26, 0.35);
  background: var(--primary-dim);
}
.balance-pill--cryo {
  border-color: rgba(216, 132, 255, 0.35);
  background: var(--premium-dim);
}
.balance-pill__sym {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: var(--fw-black);
}
.balance-pill--grid .balance-pill__sym {
  background: rgba(255, 122, 26, 0.2);
  color: var(--grid);
}
.balance-pill--cryo .balance-pill__sym {
  background: rgba(216, 132, 255, 0.2);
  color: var(--cryo);
}
.balance-pill__val {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  max-width: 72px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.balance-pill--grid .balance-pill__val { color: var(--grid); }
.balance-pill--cryo .balance-pill__val { color: var(--cryo); }

.topbar-trigger {
  display: block;
  width: 100%;
  padding: 0;
  text-align: left;
  transition: transform var(--t-fast);
}
.topbar-trigger:active { transform: scale(0.99); }

/* ── Wallet strip (двойной баланс в шапке) ───────────── */
.wallet-topbar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-stack);
}
button.asset-card {
  width: 100%;
  padding: var(--card-pad);
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}
button.asset-card:active { transform: scale(0.98); }
.asset-card {
  display: flex;
  align-items: center;
  gap: var(--gap-stack);
  border-radius: var(--r-card);
  background: var(--card);
  border: 1px solid var(--border);
  min-width: 0;
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.asset-card--clickable:hover,
button.asset-card:hover { background: var(--card-hover); }
.asset-card__body {
  flex: 1;
  min-width: 0;
}
.asset-card__chevron {
  flex-shrink: 0;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--text-faint);
  opacity: 0.65;
  margin-right: 2px;
}
.asset-card__hint {
  margin-top: 2px;
  font-size: 9px;
  font-weight: var(--fw-med);
  letter-spacing: normal;
  color: var(--text-faint);
  opacity: 0.85;
}
.asset-card__icon {
  width: 30px; height: 30px;
  flex-shrink: 0;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-md);
  font-weight: var(--fw-black);
}
.asset-card__icon--grid {
  background: var(--primary-dim);
  border: 1px solid var(--primary-dim);
  color: var(--primary);
}
.asset-card__icon--cryo {
  background: var(--premium-dim);
  border: 1px solid var(--premium-dim);
  color: var(--premium);
}
.asset-card__label {
  font-size: var(--fs-section);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-section);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1px;
}
.asset-card__val {
  font-family: var(--font-mono);
  font-size: clamp(1rem, 4.5vw, 1.2rem);
  font-weight: var(--fw-bold);
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.asset-card--grid .asset-card__val { color: var(--grid); }
.asset-card--cryo .asset-card__val { color: var(--cryo); }

/* Вспышка баланса при начислении */
.asset-card__val--ping {
  animation: val-ping 0.4s var(--ease-out);
}
@keyframes val-ping {
  0% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

/* ── Кнопки ──────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--card);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-btn);
  transition: transform var(--t-fast), background var(--t-fast);
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn--primary {
  background: var(--primary-dim);
  border-color: var(--primary);
  color: var(--primary);
}
.btn--premium {
  background: var(--premium-dim);
  border-color: var(--premium);
  color: var(--premium);
}
.btn--ghost { color: var(--text-soft); }
.btn--block { width: 100%; }

/* ── Progress bar ────────────────────────────────────── */
.bar {
  height: 10px;
  border-radius: var(--r-full);
  background: var(--surface-2);
  border: 1px solid var(--border);
  overflow: hidden;
}
.bar__fill {
  height: 100%;
  width: 0%;
  border-radius: var(--r-full);
  transition: width 0.15s var(--ease);
}
.bar__fill--heat {
  background: var(--primary);
}
.bar__fill--energy {
  background: var(--premium);
}

/* ── Toast (короткое уведомление сверху) ─────────────── */
.toast {
  position: fixed;
  top: 14px; left: 50%;
  transform: translateX(-50%) translateY(-100px);
  z-index: 400;
  padding: 11px 18px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-md);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--text);
  max-width: 90%;
  text-align: center;
  transition: transform 0.28s var(--ease-out);
  pointer-events: none;
}
.toast--visible { transform: translateX(-50%) translateY(0); }
.toast--success { color: var(--success); border-color: var(--success-dim); }
.toast--warn    { color: var(--premium); border-color: var(--premium-dim); }
.toast--danger  { color: var(--danger); border-color: var(--danger-dim); }

/* ── Overlay (модальное окно-плашка снизу) ───────────── */
.sheet {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.22s var(--ease);
}
.sheet--open { pointer-events: auto; opacity: 1; }
.sheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
}
.sheet__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--app-max);
  max-height: 86dvh;
  overflow-y: auto;
  margin-bottom: var(--content-bottom-pad);
  padding: 18px 16px 22px;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-bottom: none;
  box-shadow: var(--shadow-lg);
  transform: translateY(100%);
  transition: transform 0.3s var(--ease-out);
}
.sheet--open .sheet__panel { transform: translateY(0); }
.sheet__close {
  position: absolute;
  top: 14px; right: 14px;
  width: 32px; height: 32px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text-muted);
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sheet__title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-black);
  margin-bottom: 2px;
  padding-right: 40px;
}
.sheet__sub {
  font-size: var(--fs-xs);
  color: var(--text-faint);
  font-weight: var(--fw-med);
  margin-bottom: 16px;
}

/* ── Bottom nav (inside app shell — see mobile-shell.css) ─ */
.nav {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  z-index: 50;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  pointer-events: none;
}

.nav__inner {
  pointer-events: auto;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: end;
  width: 100%;
  max-width: var(--app-max);
  margin: 0 auto;
  min-height: var(--nav-total-h);
  padding: var(--nav-core-lift) var(--app-h-pad) 0;
  background: var(--bg);
  border-top: 2px solid var(--border-strong);
  box-shadow: none;
  overflow: visible;
}

.nav__tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  width: 100%;
  min-width: 0;
  min-height: var(--nav-h);
  padding: 6px 2px 8px;
  color: var(--text-faint);
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: var(--fw-semi);
  letter-spacing: normal;
  position: relative;
  transition: color var(--t-fast);
  border: none;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}
.nav__tab:not(.nav__tab--core) { opacity: 0.82; }
.nav__tab:not(.nav__tab--core).nav__tab--active {
  color: var(--terminal);
  opacity: 1;
}
.nav__tab:not(.nav__tab--core)::before {
  content: '';
  position: absolute;
  inset: 4px 2px;
  border-radius: var(--r-sm);
  opacity: 0;
  background: var(--terminal-dim);
  border: 1px solid rgba(255, 176, 74, 0.22);
  transition: opacity var(--t-fast);
  z-index: 0;
}
.nav__tab:not(.nav__tab--core).nav__tab--active::before { opacity: 1; }

.nav__tab--core {
  grid-column: 3;
  position: relative;
  top: -18px;
  justify-self: center;
  align-self: end;
  width: var(--nav-core-size);
  height: var(--nav-core-size);
  min-width: 0;
  max-width: 100%;
  min-height: var(--nav-core-size);
  padding: 0;
  justify-content: center;
  gap: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  color: var(--terminal);
  opacity: 1;
  z-index: 2;
  pointer-events: auto;
}
.nav__tab--core::before { display: none; }
.nav__tab--core.nav__tab--active {
  color: var(--terminal);
  background: transparent;
  box-shadow: none;
}
.nav__icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}
.nav__icon--core {
  width: var(--nav-core-size);
  height: var(--nav-core-size);
  border-radius: 50%;
  border: 2px solid var(--core);
  background: var(--surface);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.45);
}
.nav__tab--core.nav__tab--active .nav__icon--core {
  border-width: 3px;
  background: var(--terminal-dim);
}
.nav__icon svg { width: 100%; height: 100%; }
.nav__label {
  position: relative;
  z-index: 1;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.1;
}
.nav__tab--core .nav__label {
  position: absolute;
  top: calc(100% + 3px);
  left: 0;
  right: 0;
  width: max-content;
  max-width: none;
  margin: 0 auto;
  font-size: 9px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  pointer-events: none;
}