/* ============================================
   FOUKE SHOP v4 — Clean Premium Dark
   ============================================ */

:root {
  --gold: #FFC72C;
  --gold-dim: #D4A017;
  --gold-glow: rgba(255, 199, 44, 0.15);
  --red: #DA291C;
  --red-dim: #B71C1C;
  --green: #34C759;
  --orange: #FF9500;

  --bg: #0A0A0A;
  --bg-card: #151515;
  --bg-raised: #1C1C1C;
  --bg-input: #111111;
  --bg-nav: #0D0D0D;

  --white: #FAFAFA;
  --grey: #8E8E93;
  --grey-dim: #555;
  --line: rgba(255,255,255,0.05);
  --line-light: rgba(255,255,255,0.08);

  --r: 14px;
  --r-sm: 10px;
  --r-lg: 18px;
  --r-xl: 22px;

  --nav-h: 64px;
  --head-h: 56px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  height: 100%;
  overflow: hidden;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#app { display: flex; flex-direction: column; height: 100%; }
.app-hidden { display: none !important; }

/* ── TELEGRAM GATE ─────────────────────── */
.tg-gate {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
  overflow: hidden;
  transition: opacity .5s cubic-bezier(.4,0,.2,1), transform .5s cubic-bezier(.4,0,.2,1);
}
.tg-gate::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 600px 400px at 50% 40%, rgba(255,199,44,.06) 0%, transparent 70%),
    radial-gradient(ellipse 400px 300px at 30% 80%, rgba(218,41,28,.04) 0%, transparent 60%);
  pointer-events: none;
}
.tg-gate.tg-gate-pass {
  opacity: 0; transform: scale(1.05);
  pointer-events: none;
}
.tg-gate-inner {
  text-align: center; position: relative; z-index: 1;
  animation: gateIn .6s cubic-bezier(.16,1,.3,1) both;
}
@keyframes gateIn {
  from { opacity: 0; transform: translateY(24px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.tg-gate-logo {
  width: 80px; height: 80px; margin: 0 auto 24px;
  border-radius: 20px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(255,199,44,.12), rgba(255,199,44,.04));
  border: 1px solid rgba(255,199,44,.1);
  animation: gatePulse 2s ease-in-out infinite;
}
@keyframes gatePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,199,44,.15); }
  50%      { box-shadow: 0 0 30px 8px rgba(255,199,44,.08); }
}
.tg-gate-logo svg { width: 40px; height: 40px; }
.tg-gate-brand {
  font-size: 22px; font-weight: 800; letter-spacing: -.02em;
  background: linear-gradient(135deg, var(--gold), #FFE082);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  margin-bottom: 6px;
}
.tg-gate-text {
  font-size: 14px; font-weight: 500; color: var(--grey);
  letter-spacing: .01em; margin-bottom: 28px;
}
.tg-gate-bar {
  width: 180px; height: 3px; margin: 0 auto; border-radius: 3px;
  background: var(--line-light); overflow: hidden;
}
.tg-gate-bar span {
  display: block; width: 40%; height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-dim));
  animation: gateBar 1.2s ease-in-out infinite;
}
@keyframes gateBar {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

/* Success state */
.tg-gate-success .tg-gate-logo {
  background: linear-gradient(135deg, rgba(52,199,89,.15), rgba(52,199,89,.05));
  border-color: rgba(52,199,89,.2);
  animation: gateSuccessPop .5s cubic-bezier(.16,1,.3,1);
}
@keyframes gateSuccessPop {
  0%   { transform: scale(.8); }
  50%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}
.tg-gate-success .tg-gate-logo svg { color: var(--green); }
.tg-gate-success .tg-gate-text { color: var(--green); }
.tg-gate-success .tg-gate-bar span {
  width: 100%; background: var(--green); animation: none;
}

/* Blocked state */
.tg-gate-blocked .tg-gate-logo {
  background: linear-gradient(135deg, rgba(218,41,28,.12), rgba(218,41,28,.04));
  border-color: rgba(218,41,28,.15); animation: gateShake .5s ease;
}
@keyframes gateShake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-8px); }
  40%, 80% { transform: translateX(8px); }
}
.tg-gate-blocked .tg-gate-brand {
  background: linear-gradient(135deg, #DA291C, #FF6B6B);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.tg-gate-blocked .tg-gate-text { color: var(--grey); margin-bottom: 12px; }
.tg-gate-blocked .tg-gate-bar { display: none; }
.tg-gate-sub {
  font-size: 13px; color: var(--grey-dim); line-height: 1.6;
  max-width: 260px; margin: 0 auto;
}
.tg-gate-sub a {
  color: var(--gold); text-decoration: none; font-weight: 600;
}
.tg-gate-badge {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 20px; padding: 8px 16px;
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: 100px; font-size: 12px; font-weight: 600; color: var(--grey);
}
.tg-gate-badge .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--red);
  animation: dotBlink 1.5s ease infinite;
}
@keyframes dotBlink {
  0%, 100% { opacity: 1; }
  50%      { opacity: .3; }
}

/* ── SVG ICONS ─────────────────────────── */

.ico { width: 20px; height: 20px; flex-shrink: 0; display: inline-block; vertical-align: middle; }
.ico-nav { width: 22px; height: 22px; stroke: var(--grey-dim); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.15s; }
.ico-24 { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: inline-block; vertical-align: middle; }
.ico-sm { width: 16px; height: 16px; }

/* ── HEADER ─────────────────────────────── */

#app-header {
  flex-shrink: 0;
  height: var(--head-h);
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  z-index: 20;
}

.h-left { display: flex; align-items: center; gap: 10px; }

.h-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 13px; color: #000;
  overflow: hidden; flex-shrink: 0;
}

.avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

.h-name { font-weight: 700; font-size: 14px; letter-spacing: -0.3px; }
.h-sub { font-size: 10px; color: var(--gold); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }

.h-bal {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 12px;
  background: var(--bg-card);
  border: 1px solid var(--line-light);
  border-radius: 100px;
  font-size: 12px; font-weight: 800; color: var(--gold);
  animation: borderGlow 3s ease infinite;
}

/* ── CONTENT ────────────────────────────── */

#app-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: calc(var(--nav-h) + var(--safe-b));
  -webkit-overflow-scrolling: touch;
}

#app-content::-webkit-scrollbar { display: none; }

.page-pad { padding: 16px; }

/* ── BOTTOM NAV ─────────────────────────── */

#app-navbar {
  flex-shrink: 0;
  height: calc(var(--nav-h) + var(--safe-b));
  padding-bottom: var(--safe-b);
  display: flex; align-items: center; justify-content: space-around;
  background: var(--bg-nav);
  border-top: 1px solid var(--line);
  z-index: 20;
}

.nav-item {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 6px 10px; border-radius: var(--r-sm);
  cursor: pointer; user-select: none;
  transition: all 0.15s ease; position: relative;
  min-width: 0;
}

.nav-item .ico-nav { width: 21px; height: 21px; }
.nav-item span { font-size: 9px; font-weight: 700; color: var(--grey-dim); letter-spacing: 0.5px; text-transform: uppercase; transition: color 0.15s; }

.nav-item.active .ico-nav { stroke: var(--gold); }
.nav-item.active span { color: var(--gold); }
.nav-item.active::after {
  content: ''; position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
  width: 16px; height: 2px; background: var(--gold); border-radius: 1px;
}

/* ── HERO BANNER ────────────────────────── */

.hero {
  position: relative;
  height: 220px;
  overflow: hidden;
  animation: heroIn 0.6s ease;
}

.hero img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  animation: kenBurns 20s ease-in-out infinite alternate;
}

@keyframes kenBurns {
  0% { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.08) translate(-1%, -1%); }
}

.hero-fade {
  position: absolute; inset: 0;
  background: linear-gradient(
    180deg,
    rgba(10,10,10,0) 30%,
    rgba(10,10,10,0.7) 65%,
    rgba(10,10,10,1) 100%
  );
}

.hero-content {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 0 20px 20px;
}

.hero-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px;
  background: var(--red);
  border-radius: 100px;
  font-size: 9px; font-weight: 800; color: #fff;
  letter-spacing: 0.8px; text-transform: uppercase;
  margin-bottom: 8px;
}

.hero-title {
  font-size: 28px; font-weight: 900;
  letter-spacing: -1px; line-height: 1.1;
}

.hero-title em {
  font-style: normal;
  color: var(--gold);
}

.hero-desc {
  font-size: 13px; color: var(--grey);
  margin-top: 4px; font-weight: 500;
}

@keyframes heroIn {
  from { opacity: 0; transform: scale(1.08); }
  to { opacity: 1; transform: scale(1); }
}

.hero-pill {
  animation: slideLeft 0.5s cubic-bezier(0.22,1,0.36,1) 0.3s backwards;
}

.hero-title {
  animation: slideUp 0.6s cubic-bezier(0.22,1,0.36,1) 0.4s backwards;
}

/* ── FIDELITY CARD ──────────────────────── */

.fidelity-banner {
  display: flex; align-items: center;
  margin: 0 16px 16px;
  padding: 12px 14px;
  background: linear-gradient(135deg, var(--red), #E8450E);
  border-radius: var(--r);
  cursor: pointer;
  transition: transform 0.15s;
  animation: slideUp 0.5s ease 0.2s backwards;
}

.fidelity-banner:active { transform: scale(0.97); }

.fid-left { flex: 1; }
.fid-badge {
  display: inline-block; padding: 2px 7px;
  background: rgba(255,255,255,0.18);
  border-radius: 100px;
  font-size: 9px; font-weight: 800; color: #fff;
  letter-spacing: 0.5px; text-transform: uppercase;
  margin-bottom: 4px;
}
.fid-title { font-size: 14px; font-weight: 800; color: #fff; }
.fid-desc { font-size: 10px; color: rgba(255,255,255,0.7); margin-top: 1px; }
.fid-arrow { font-size: 22px; color: rgba(255,255,255,0.5); margin-left: 8px; }

/* ── SECTION ────────────────────────────── */

.sec-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px; margin-bottom: 10px;
}

.sec-title { font-size: 18px; font-weight: 800; letter-spacing: -0.4px; }
.sec-count {
  font-size: 10px; font-weight: 700; color: var(--grey);
  padding: 3px 8px; background: var(--bg-card); border-radius: 100px;
}

/* Sort toggle */
.sort-toggle {
  display: flex; align-items: center; gap: 4px;
  padding: 5px 10px;
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: 100px; cursor: pointer;
  transition: all 0.15s;
}

.sort-toggle:active { background: var(--bg-raised); transform: scale(0.95); }

.sort-toggle span {
  font-size: 10px; font-weight: 700; color: var(--grey);
  letter-spacing: 0.3px;
}

.sort-ico {
  width: 14px; height: 14px;
  stroke: var(--gold); fill: none; stroke-width: 2;
  transition: transform 0.25s ease;
}

.sort-ico.sort-desc { transform: rotate(180deg); }

/* ── TRANCHES ───────────────────────────── */

.tranche {
  margin-bottom: 16px;
  animation: slideUp 0.35s ease backwards;
}

.tranche-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  background: linear-gradient(135deg, var(--bg-card), var(--bg-raised));
  border: 1px solid var(--line-light);
  border-radius: var(--r) var(--r) 0 0;
}

.tranche-pts {
  font-size: 20px; font-weight: 900; color: var(--gold);
  letter-spacing: -0.5px;
}

.tranche-pts span {
  font-size: 11px; font-weight: 700; color: var(--grey);
  text-transform: uppercase; letter-spacing: 0.5px;
}

.tranche-stock {
  font-size: 9px; font-weight: 800; padding: 3px 8px;
  border-radius: 100px; letter-spacing: 0.3px; text-transform: uppercase;
}

.tranche-list {
  border: 1px solid var(--line);
  border-top: none;
  border-radius: 0 0 var(--r) var(--r);
  overflow: hidden;
}

.tranche-list .p-card {
  margin-bottom: 0;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid var(--line);
}

.tranche-list .p-card:last-child { border-bottom: none; }

/* ── PRODUCT LIST ───────────────────────── */

.product-list { padding: 0 16px; }

.p-card {
  display: flex; align-items: center; gap: 12px;
  padding: 12px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  margin-bottom: 8px;
  cursor: pointer;
  transition: transform 0.15s, background 0.15s;
  animation: slideUp 0.35s ease backwards;
}

.p-card:nth-child(1) { animation-delay: 0.05s; }
.p-card:nth-child(2) { animation-delay: 0.1s; }
.p-card:nth-child(3) { animation-delay: 0.15s; }
.p-card:nth-child(4) { animation-delay: 0.2s; }
.p-card:nth-child(5) { animation-delay: 0.25s; }
.p-card:nth-child(6) { animation-delay: 0.3s; }

.p-card:active { transform: scale(0.98); background: var(--bg-raised); }

.p-thumb {
  width: 56px; height: 56px; border-radius: var(--r-sm);
  background: var(--bg-raised); overflow: hidden; flex-shrink: 0;
}

.p-thumb img { width: 100%; height: 100%; object-fit: cover; }

.p-info { flex: 1; min-width: 0; }
.p-name { font-size: 14px; font-weight: 700; letter-spacing: -0.2px; }
.p-cat { font-size: 10px; color: var(--grey); font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; margin-top: 1px; }

.p-right { text-align: right; flex-shrink: 0; }
.p-price { font-size: 16px; font-weight: 800; color: var(--gold); }

.p-stock {
  display: inline-block; margin-top: 3px;
  font-size: 9px; font-weight: 700; padding: 2px 6px;
  border-radius: 100px; letter-spacing: 0.2px; text-transform: uppercase;
}

.stk-ok { background: rgba(52,199,89,0.12); color: var(--green); }
.stk-low { background: rgba(255,149,0,0.12); color: var(--orange); }
.stk-out { background: rgba(218,41,28,0.12); color: var(--red); }

/* ── PRODUCT DETAIL ─────────────────────── */

.det { animation: fadeIn 0.2s ease; }

.det-img {
  width: 100%; height: 200px;
  overflow: hidden; position: relative;
  animation: heroIn 0.5s cubic-bezier(0.22,1,0.36,1);
}

.det-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.4s ease;
}

.det-img:active img { transform: scale(1.05); }
.det-img::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0;
  height: 50%; background: linear-gradient(transparent, var(--bg));
}

.det-body { padding: 20px 16px 16px; }

.det-name {
  font-size: 24px; font-weight: 900; letter-spacing: -0.7px;
  animation: slideUp 0.4s cubic-bezier(0.22,1,0.36,1) 0.15s backwards;
}
.det-desc {
  font-size: 13px; color: var(--grey); line-height: 1.5; margin: 6px 0 20px;
  animation: slideUp 0.4s cubic-bezier(0.22,1,0.36,1) 0.2s backwards;
}

.det-price {
  font-size: 36px; font-weight: 900; color: var(--gold); letter-spacing: -1px; margin-bottom: 24px;
  animation: countUp 0.5s cubic-bezier(0.22,1,0.36,1) 0.25s backwards;
}
.det-unit { font-size: 14px; color: var(--grey); font-weight: 500; }

/* ── QTY SELECTOR ───────────────────────── */

.qty-row {
  display: flex; align-items: center; justify-content: center; gap: 24px;
  padding: 14px;
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--r);
  margin-bottom: 20px;
}

.qty-btn {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line-light); background: var(--bg-raised);
  color: var(--white); font-size: 18px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.12s;
}

.qty-btn:active { background: var(--gold); color: #000; border-color: var(--gold); transform: scale(0.9); }
.qty-val {
  font-size: 26px; font-weight: 900; min-width: 40px; text-align: center;
  transition: transform 0.15s cubic-bezier(0.22,1,0.36,1);
}

.qty-val.bump { animation: popIn 0.25s cubic-bezier(0.22,1,0.36,1); }

/* ── INFO ROWS ──────────────────────────── */

.info-card {
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden; margin-bottom: 10px;
  animation: slideUp 0.35s cubic-bezier(0.22,1,0.36,1) 0.1s backwards;
}

.info-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px;
}

.info-row + .info-row { border-top: 1px solid var(--line); }
.info-label { font-size: 12px; color: var(--grey); font-weight: 500; }
.info-val { font-size: 13px; font-weight: 700; }
.info-val-gold { color: var(--gold); font-size: 15px; }

/* ── BUTTONS ────────────────────────────── */

.btn {
  width: 100%; padding: 14px; border: none;
  border-radius: var(--r);
  font-family: 'Inter', sans-serif;
  font-size: 13px; font-weight: 800;
  letter-spacing: 0.6px; text-transform: uppercase;
  cursor: pointer; transition: all 0.2s cubic-bezier(0.22,1,0.36,1);
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}

.btn::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(255,255,255,0.2) 0%, transparent 60%);
  opacity: 0; transition: opacity 0.3s;
}

.btn:active::after { opacity: 1; }

.btn:active { transform: scale(0.96); }
.btn:disabled { opacity: 0.3; cursor: not-allowed; transform: none; }

.btn-gold { background: var(--gold); color: #000; }
.btn-gold:active { background: var(--gold-dim); }

.btn-red { background: var(--red); color: #fff; }
.btn-red:active { background: var(--red-dim); }

.btn-ghost {
  background: var(--bg-card); color: var(--white);
  border: 1px solid var(--line-light);
}
.btn-ghost:active { background: var(--bg-raised); }

.btn-back {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 10px 16px; background: none; border: none;
  color: var(--grey); font-family: 'Inter', sans-serif;
  font-size: 13px; font-weight: 600; cursor: pointer;
}

.btn-back .ico-24 { width: 18px; height: 18px; stroke: currentColor; }

/* ── BALANCE CARD ───────────────────────── */

.bal-card {
  text-align: center;
  padding: 32px 20px;
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--r-xl);
  margin-bottom: 16px;
  position: relative; overflow: hidden;
  animation: slideUp 0.4s ease;
}

.bal-card::before {
  content: ''; position: absolute;
  top: -1px; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--red), var(--gold), var(--red));
  background-size: 200% 100%;
  animation: shimmer 2.5s linear infinite;
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.bal-label {
  font-size: 10px; font-weight: 700; color: var(--grey);
  text-transform: uppercase; letter-spacing: 2px; margin-bottom: 8px;
  animation: fadeIn 0.4s ease 0.1s backwards;
}

.bal-amount { font-size: 44px; font-weight: 900; color: var(--gold); letter-spacing: -2px; }
.bal-cur { font-size: 13px; color: var(--grey); font-weight: 600; margin-top: 2px; }

/* ── ORDERS ─────────────────────────────── */

.o-card {
  display: flex; align-items: center; gap: 12px;
  padding: 12px;
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--r); margin-bottom: 8px;
  cursor: pointer; transition: all 0.15s;
  animation: slideUp 0.3s ease backwards;
}

.o-card:nth-child(1) { animation-delay: 0.04s; }
.o-card:nth-child(2) { animation-delay: 0.08s; }
.o-card:nth-child(3) { animation-delay: 0.12s; }
.o-card:nth-child(4) { animation-delay: 0.16s; }
.o-card:nth-child(5) { animation-delay: 0.2s; }
.o-card:nth-child(6) { animation-delay: 0.24s; }
.o-card:nth-child(7) { animation-delay: 0.28s; }
.o-card:nth-child(8) { animation-delay: 0.32s; }

.o-card:active { transform: scale(0.98); background: var(--bg-raised); }

.o-ico {
  width: 38px; height: 38px; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
}

.o-ico.pending { background: rgba(255,149,0,0.1); }
.o-ico.completed { background: rgba(52,199,89,0.1); }
.o-ico.failed { background: rgba(218,41,28,0.1); }

.o-ico .ico-24 { width: 18px; height: 18px; }
.o-ico.pending .ico-24 { stroke: var(--orange); }
.o-ico.completed .ico-24 { stroke: var(--green); }
.o-ico.failed .ico-24 { stroke: var(--red); }

.o-info { flex: 1; min-width: 0; }
.o-name { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.o-date { font-size: 10px; color: var(--grey-dim); margin-top: 1px; }

.o-status {
  font-size: 9px; font-weight: 800; padding: 3px 8px;
  border-radius: 100px; letter-spacing: 0.3px; text-transform: uppercase; flex-shrink: 0;
}

.o-status.pending { background: rgba(255,149,0,0.1); color: var(--orange); }
.o-status.completed { background: rgba(52,199,89,0.1); color: var(--green); }
.o-status.failed { background: rgba(218,41,28,0.1); color: var(--red); }

/* ── PROFILE ────────────────────────────── */

.prof-head { text-align: center; margin-bottom: 24px; animation: slideUp 0.4s ease; }

.prof-av {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--gold); display: flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 900; color: #000;
  margin: 0 auto 10px; overflow: hidden; flex-shrink: 0;
}

.prof-av .avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

.prof-name { font-size: 20px; font-weight: 900; letter-spacing: -0.5px; }
.prof-tag { font-size: 11px; color: var(--grey); margin-top: 2px; }

.set-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--r); margin-bottom: 6px;
  cursor: pointer; transition: all 0.15s;
  animation: slideUp 0.3s ease backwards;
}

.set-row:nth-child(1) { animation-delay: 0.06s; }
.set-row:nth-child(2) { animation-delay: 0.1s; }
.set-row:nth-child(3) { animation-delay: 0.14s; }
.set-row:nth-child(4) { animation-delay: 0.18s; }
.set-row:nth-child(5) { animation-delay: 0.22s; }
.set-row:nth-child(6) { animation-delay: 0.26s; }
.set-row:nth-child(7) { animation-delay: 0.3s; }

.set-row:active { background: var(--bg-raised); transform: scale(0.98); }

.set-ico {
  width: 32px; height: 32px; border-radius: var(--r-sm);
  background: var(--bg-raised); display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: var(--grey);
}

.set-ico .ico-24 { width: 18px; height: 18px; stroke: var(--gold); }

.set-label { flex: 1; font-size: 13px; font-weight: 600; }
.set-chev { color: var(--grey-dim); font-size: 16px; }

/* ── EMPTY ──────────────────────────────── */

.empty { text-align: center; padding: 40px 20px; animation: slideUp 0.4s ease; }
.empty-ico { font-size: 44px; margin-bottom: 10px; opacity: 0.4; }
.empty-ico .ico-24 { width: 44px; height: 44px; stroke: var(--grey-dim); }
.empty-title { font-size: 16px; font-weight: 800; margin-bottom: 4px; }
.empty-desc { font-size: 12px; color: var(--grey); line-height: 1.4; }

/* ── TOAST ──────────────────────────────── */

#toast-container {
  position: fixed; top: 10px; left: 10px; right: 10px;
  z-index: 9999; display: flex; flex-direction: column; gap: 6px;
  pointer-events: none;
}

.toast {
  padding: 11px 16px; border-radius: var(--r);
  font-size: 12px; font-weight: 700;
  animation: toastIn 0.25s ease; pointer-events: auto;
}

.toast-success { background: var(--green); color: #fff; }
.toast-error { background: var(--red); color: #fff; }
.toast-info { background: var(--bg-raised); color: var(--gold); border: 1px solid var(--line-light); }

@keyframes toastIn {
  from { opacity: 0; transform: translateY(-8px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.toast-out { animation: toastOut 0.2s ease forwards; }

@keyframes toastOut {
  to { opacity: 0; transform: translateY(-8px) scale(0.96); }
}

/* ── LOADER ─────────────────────────────── */

.loader {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 50vh; gap: 14px;
  animation: fadeIn 0.3s ease;
}

.ld-dots { display: flex; gap: 6px; }
.ld-dots span {
  width: 8px; height: 8px; border-radius: 50%;
  animation: bounce 1s ease-in-out infinite;
}

.ld-dots span:nth-child(1) { background: var(--red); }
.ld-dots span:nth-child(2) { background: var(--gold); animation-delay: 0.12s; }
.ld-dots span:nth-child(3) { background: var(--red); animation-delay: 0.24s; }

@keyframes bounce {
  0%, 80%, 100% { transform: scale(0.5); opacity: 0.3; }
  40% { transform: scale(1.3); opacity: 1; }
}

.ld-text { font-size: 16px; font-weight: 900; color: var(--gold); letter-spacing: 2px; text-transform: uppercase; }

.spin {
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,0.15);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.5s linear infinite;
  display: inline-block; vertical-align: middle;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ── MODAL ──────────────────────────────── */

.modal-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(0,0,0,0);
  display: flex; flex-direction: column;
  transition: background 0.25s ease;
}

.modal-overlay.modal-visible { background: rgba(0,0,0,0.96); }

.modal-content {
  flex: 1; display: flex; flex-direction: column;
  opacity: 0; transform: translateY(16px);
  transition: all 0.25s ease;
}

.modal-visible .modal-content { opacity: 1; transform: translateY(0); }

.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; flex-shrink: 0;
}

.modal-title { font-size: 15px; font-weight: 800; }

.modal-close {
  width: 30px; height: 30px; border-radius: 50%;
  border: none; background: rgba(255,255,255,0.08);
  color: #fff; font-size: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}

.modal-body { flex: 1; overflow-y: auto; padding: 0 12px 24px; -webkit-overflow-scrolling: touch; }
.fidelity-img { width: 100%; border-radius: var(--r); display: block; }

/* ── ANIMATIONS ─────────────────────────── */

@keyframes slideUp {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-18px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideLeft {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes slideRight {
  from { opacity: 0; transform: translateX(-24px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.88); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes popIn {
  0% { opacity: 0; transform: scale(0.6); }
  70% { transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes goldPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,199,44,0.3); }
  50% { box-shadow: 0 0 16px 4px rgba(255,199,44,0.15); }
}

@keyframes borderGlow {
  0%, 100% { border-color: var(--line-light); }
  50% { border-color: rgba(255,199,44,0.25); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-3px); }
  40% { transform: translateX(3px); }
  60% { transform: translateX(-2px); }
  80% { transform: translateX(2px); }
}

@keyframes countUp {
  from { opacity: 0; transform: translateY(10px) scale(0.8); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes skeletonLoad {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.fade-in { animation: slideUp 0.35s cubic-bezier(0.22,1,0.36,1); }
.fade-left { animation: slideLeft 0.35s cubic-bezier(0.22,1,0.36,1); }
.fade-right { animation: slideRight 0.35s cubic-bezier(0.22,1,0.36,1); }
.pop-in { animation: popIn 0.4s cubic-bezier(0.22,1,0.36,1); }
.anim-float { animation: float 3s ease-in-out infinite; }

/* ── ADMIN NAV (scrollable pills) ──────── */

.admin-nav {
  display: flex; gap: 6px;
  overflow-x: auto;
  padding: 0 0 4px;
  scroll-snap-type: x mandatory;
}

.admin-nav::-webkit-scrollbar { display: none; }

.admin-nav-btn {
  flex-shrink: 0;
  padding: 8px 14px; border: 1px solid var(--line); border-radius: 100px;
  background: var(--bg-card); color: var(--grey);
  font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.3px; cursor: pointer;
  transition: all 0.15s; white-space: nowrap;
  scroll-snap-align: start;
}

.admin-nav-btn.active {
  background: var(--red); color: #fff;
  border-color: var(--red);
}

/* ── ADMIN TABS (broadcast type) ───────── */

.admin-tabs {
  display: flex; gap: 4px;
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--r); padding: 3px;
}

.admin-tab {
  flex: 1; padding: 9px; border: none; border-radius: var(--r-sm);
  background: transparent; color: var(--grey-dim);
  font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.3px; cursor: pointer; transition: all 0.15s;
}
.admin-tab.active { background: var(--red); color: #fff; }

/* ── ADMIN FORM ────────────────────────── */

.admin-form {
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--r); padding: 14px;
  animation: slideUp 0.35s ease;
}

.input-group { margin-bottom: 8px; }
.input-label { font-size: 10px; font-weight: 700; color: var(--grey); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 5px; display: block; }

.input-field {
  width: 100%; padding: 10px 12px;
  background: var(--bg-input); border: 1px solid var(--line-light);
  border-radius: var(--r-sm); color: var(--white);
  font-family: 'Inter', sans-serif; font-size: 13px; outline: none;
  transition: border-color 0.15s;
}
.input-field:focus { border-color: var(--gold); }

.input-textarea {
  width: 100%; padding: 10px 12px;
  background: var(--bg-input); border: 1px solid var(--line-light);
  border-radius: var(--r-sm); color: var(--white);
  font-family: 'Inter', sans-serif; font-size: 13px; outline: none;
  resize: vertical; min-height: 72px; transition: border-color 0.15s;
}
.input-textarea:focus { border-color: var(--gold); }

.input-row { display: flex; gap: 6px; }

.admin-separator { height: 1px; background: var(--line); margin: 12px 0; }

.file-zone { position: relative; margin-bottom: 10px; }
.file-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; z-index: -1; }

.file-zone-inner {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: 20px; border: 2px dashed var(--line-light);
  border-radius: var(--r); cursor: pointer; transition: border-color 0.15s;
}
.file-zone-inner:active { border-color: var(--gold); }
.file-zone-icon { display: flex; align-items: center; justify-content: center; }
.file-zone-icon .ico-24 { width: 24px; height: 24px; stroke: var(--grey-dim); }
.file-zone-text { font-size: 11px; color: var(--grey-dim); font-weight: 600; }

.file-preview {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; background: var(--bg-input);
  border-radius: var(--r-sm); border: 1px solid var(--line);
}
.file-preview-img { width: 44px; height: 44px; border-radius: var(--r-sm); object-fit: cover; }
.file-preview-name { flex: 1; font-size: 11px; font-weight: 600; color: var(--grey); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-remove {
  width: 26px; height: 26px; border-radius: 50%; border: none;
  background: rgba(218,41,28,0.12); color: var(--red);
  font-size: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

.bc-result { margin-top: 10px; padding: 9px 12px; border-radius: var(--r-sm); font-size: 11px; font-weight: 700; text-align: center; animation: slideUp 0.25s ease; }
.bc-result-success { background: rgba(52,199,89,0.1); color: var(--green); }
.bc-result-error { background: rgba(218,41,28,0.1); color: var(--red); }

/* ── ADMIN STATS GRID ───────────────────── */

.admin-stats-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}

.admin-stats-grid .stat-card { animation: popIn 0.4s cubic-bezier(0.22,1,0.36,1) backwards; }
.admin-stats-grid .stat-card:nth-child(1) { animation-delay: 0s; }
.admin-stats-grid .stat-card:nth-child(2) { animation-delay: 0.06s; }
.admin-stats-grid .stat-card:nth-child(3) { animation-delay: 0.12s; }
.admin-stats-grid .stat-card:nth-child(4) { animation-delay: 0.18s; }
.admin-stats-grid .stat-card:nth-child(5) { animation-delay: 0.24s; }
.admin-stats-grid .stat-card:nth-child(6) { animation-delay: 0.3s; }
.admin-stats-grid .stat-card:nth-child(7) { animation-delay: 0.36s; }
.admin-stats-grid .stat-card:nth-child(8) { animation-delay: 0.42s; }
.admin-stats-grid .stat-card:nth-child(9) { animation-delay: 0.48s; }

.stat-card {
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--r); padding: 16px; text-align: center;
  animation: scaleIn 0.35s ease backwards;
}

.stat-val { font-size: 28px; font-weight: 900; color: var(--gold); letter-spacing: -1px; }
.stat-lbl { font-size: 9px; font-weight: 700; color: var(--grey); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; }

.stat-card-wide { grid-column: span 2; }

/* ── ADMIN USER ROW ─────────────────────── */

.adm-user-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px;
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--r-sm); margin-bottom: 4px;
  animation: slideUp 0.25s ease backwards;
}

.adm-user-info { flex: 1; min-width: 0; }
.adm-user-name { font-size: 12px; font-weight: 700; }
.adm-user-meta { font-size: 9px; color: var(--grey-dim); margin-top: 1px; }

.adm-user-actions { display: flex; gap: 4px; flex-shrink: 0; }

.adm-btn-sm {
  width: 30px; height: 30px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--bg-raised);
  color: var(--grey); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.12s;
}
.adm-btn-sm .ico-24 { width: 14px; height: 14px; }
.adm-btn-sm:active { transform: scale(0.9); }
.adm-btn-del { border-color: rgba(218,41,28,0.15); color: var(--red); }
.adm-btn-del .ico-24 { stroke: var(--red); }
.adm-btn-del:active { background: rgba(218,41,28,0.1); }
.adm-btn-dm { color: var(--gold); }
.adm-btn-dm .ico-24 { stroke: var(--gold); }

/* ── CRYPTO TABS (wallet) ───────────────── */

.crypto-tabs {
  display: flex; gap: 6px; overflow-x: auto;
  padding: 2px 0;
}
.crypto-tabs::-webkit-scrollbar { display: none; }

.crypto-tab {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px;
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700;
  color: var(--grey); cursor: pointer;
  transition: all 0.15s; white-space: nowrap;
}

.crypto-tab .ico { width: 18px; height: 18px; }

.crypto-tab.active {
  background: var(--gold); color: #000;
  border-color: var(--gold);
}

/* ── PAYMENT INFO CARD ──────────────────── */

.pay-info-card {
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--r); padding: 16px;
  animation: slideUp 0.35s ease;
}

.pay-info-title {
  font-size: 14px; font-weight: 800; color: var(--green);
  margin-bottom: 12px;
}

.pay-info-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 12px; color: var(--grey);
}

.pay-info-amount { font-weight: 800; color: var(--gold); font-size: 14px; }

.pay-info-addr {
  font-size: 10px; font-weight: 600; color: var(--white);
  font-family: monospace;
  max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.pay-info-note {
  font-size: 10px; color: var(--grey-dim); margin-top: 10px;
  line-height: 1.4;
}

/* ── PAY METHODS TOGGLE ─────────────────── */

.pay-methods {
  display: flex; gap: 6px;
}

.pay-method-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px;
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--r);
  font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 800;
  color: var(--grey); cursor: pointer;
  transition: all 0.15s; text-transform: uppercase; letter-spacing: 0.3px;
}

.pay-method-btn .ico { width: 22px; height: 22px; }

.pay-method-btn.active {
  background: var(--gold); color: #000; border-color: var(--gold);
}

.pay-method-btn:active { transform: scale(0.97); }

/* ── PAYPAL STEPS ───────────────────────── */

.pay-steps {
  margin-bottom: 16px;
}

.pay-step {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0;
  animation: slideLeft 0.35s cubic-bezier(0.22,1,0.36,1) backwards;
}

.pay-step:nth-child(1) { animation-delay: 0.05s; }
.pay-step:nth-child(2) { animation-delay: 0.12s; }
.pay-step:nth-child(3) { animation-delay: 0.19s; }

.pay-step + .pay-step { border-top: 1px solid var(--line); }

.pay-step-num {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--bg-raised); border: 1px solid var(--line-light);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: var(--gold);
  flex-shrink: 0;
}

.pay-step-text {
  font-size: 12px; font-weight: 600; color: var(--grey);
}

/* ── PAYPAL BUTTON ──────────────────────── */

.btn-paypal {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 14px; border: none; border-radius: var(--r);
  background: #0070BA; color: #fff;
  font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 800;
  letter-spacing: 0.5px; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  transition: all 0.15s;
}

.btn-paypal .ico { width: 20px; height: 20px; }

.btn-paypal:active { transform: scale(0.97); background: #005EA6; }

/* ── SUPPORT / TICKET ──────────────────── */

.ticket-head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 20px;
}

.ticket-head-ico {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--gold-glow); border: 1px solid rgba(255,199,44,0.2);
  display: flex; align-items: center; justify-content: center;
}

.ticket-head-ico .ico-24 { width: 22px; height: 22px; stroke: var(--gold); }

.ticket-head-text { flex: 1; }
.ticket-head-title { font-size: 16px; font-weight: 800; }
.ticket-head-desc { font-size: 11px; color: var(--grey); margin-top: 2px; }

.ticket-form {
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--r); padding: 16px;
  animation: slideUp 0.35s ease;
}

.ticket-subjects {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px;
}

.ticket-subj {
  padding: 7px 12px;
  background: var(--bg-raised); border: 1px solid var(--line-light);
  border-radius: 100px;
  font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700;
  color: var(--grey); cursor: pointer;
  transition: all 0.15s;
}

.ticket-subj.active {
  background: var(--gold); color: #000; border-color: var(--gold);
}

.ticket-history {
  margin-top: 20px;
}

.ticket-item {
  padding: 12px;
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--r); margin-bottom: 6px;
  animation: slideLeft 0.35s cubic-bezier(0.22,1,0.36,1) backwards;
}

.ticket-item:nth-child(1) { animation-delay: 0.04s; }
.ticket-item:nth-child(2) { animation-delay: 0.08s; }
.ticket-item:nth-child(3) { animation-delay: 0.12s; }
.ticket-item:nth-child(4) { animation-delay: 0.16s; }

.ticket-item-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 4px;
}

.ticket-item-subj { font-size: 12px; font-weight: 700; }
.ticket-item-date { font-size: 9px; color: var(--grey-dim); }
.ticket-item-msg { font-size: 11px; color: var(--grey); line-height: 1.4; }
.ticket-item-status {
  display: inline-block; margin-top: 6px;
  font-size: 9px; font-weight: 800; padding: 2px 8px;
  border-radius: 100px; letter-spacing: 0.3px; text-transform: uppercase;
}
.ticket-item-status.sent { background: rgba(52,199,89,0.1); color: var(--green); }

/* ── SKELETON LOADING ──────────────────── */

.skeleton {
  background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-raised) 50%, var(--bg-card) 75%);
  background-size: 200% 100%;
  animation: skeletonLoad 1.5s ease-in-out infinite;
  border-radius: var(--r);
}

.skel-card {
  height: 72px; margin-bottom: 8px; border-radius: var(--r);
}

.skel-stat {
  height: 80px; border-radius: var(--r);
}

.skel-hero {
  height: 220px; border-radius: 0;
}

.skel-block {
  height: 44px; border-radius: var(--r-sm); margin-bottom: 6px;
}

/* ── PAGE TRANSITION ──────────────────── */

#app-content {
  transition: none;
}

.page-enter {
  animation: pageSlideIn 0.35s cubic-bezier(0.22,1,0.36,1);
}

@keyframes pageSlideIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── ENHANCED MICRO-INTERACTIONS ──────── */

.nav-item { transition: all 0.2s cubic-bezier(0.22,1,0.36,1); }
.nav-item:active { transform: scale(0.88); }
.nav-item.active .ico-nav { filter: drop-shadow(0 0 6px rgba(255,199,44,0.4)); }

.h-bal { transition: all 0.3s ease; }
.h-bal:hover, .h-bal:active { animation: goldPulse 1.5s ease infinite; }

.p-card { transition: transform 0.2s cubic-bezier(0.22,1,0.36,1), background 0.15s, box-shadow 0.2s; }
.p-card:active { transform: scale(0.97); box-shadow: 0 0 20px rgba(255,199,44,0.06); }

.p-price { transition: color 0.2s; }
.p-card:active .p-price { color: #fff; }

.o-card { transition: transform 0.2s cubic-bezier(0.22,1,0.36,1), background 0.15s; }
.o-card:active { transform: scale(0.97) translateX(4px); }

.btn { transition: all 0.2s cubic-bezier(0.22,1,0.36,1); }
.btn-gold:active { box-shadow: 0 0 20px rgba(255,199,44,0.3); }
.btn-red:active { box-shadow: 0 0 20px rgba(218,41,28,0.3); }

.stat-card { transition: transform 0.2s, box-shadow 0.2s; }
.stat-card:active { transform: scale(0.96); box-shadow: 0 0 12px rgba(255,199,44,0.08); }

.stat-val { animation: countUp 0.5s cubic-bezier(0.22,1,0.36,1) backwards; }

.bal-amount { animation: countUp 0.6s cubic-bezier(0.22,1,0.36,1) 0.2s backwards; }
.bal-card { transition: transform 0.3s; }
.bal-card:active { transform: scale(0.98); }

.tranche-head { transition: background 0.2s; }
.tranche:active .tranche-head { background: linear-gradient(135deg, var(--bg-raised), #222); }

.set-row { transition: all 0.2s cubic-bezier(0.22,1,0.36,1); }
.set-row:active { transform: scale(0.97) translateX(4px); }
.set-row:active .set-ico { background: var(--gold-glow); }

.fidelity-banner { transition: transform 0.2s cubic-bezier(0.22,1,0.36,1), box-shadow 0.2s; }
.fidelity-banner:active { transform: scale(0.96); box-shadow: 0 4px 20px rgba(218,41,28,0.2); }

.sort-toggle { transition: all 0.2s cubic-bezier(0.22,1,0.36,1); }
.sort-toggle:active { transform: scale(0.9); }
.sort-toggle:active .sort-ico { transform: rotate(180deg); }

.crypto-tab { transition: all 0.2s cubic-bezier(0.22,1,0.36,1); }
.crypto-tab:active { transform: scale(0.93); }
.crypto-tab.active { box-shadow: 0 0 12px rgba(255,199,44,0.15); }

.pay-method-btn { transition: all 0.2s cubic-bezier(0.22,1,0.36,1); }
.pay-method-btn.active { box-shadow: 0 0 16px rgba(255,199,44,0.15); }

.admin-nav-btn { transition: all 0.2s cubic-bezier(0.22,1,0.36,1); }
.admin-nav-btn:active { transform: scale(0.92); }
.admin-nav-btn.active { box-shadow: 0 0 12px rgba(218,41,28,0.2); }

.ticket-subj { transition: all 0.2s cubic-bezier(0.22,1,0.36,1); }
.ticket-subj:active { transform: scale(0.92); }
.ticket-subj.active { box-shadow: 0 0 10px rgba(255,199,44,0.15); }

.qty-btn { transition: all 0.15s cubic-bezier(0.22,1,0.36,1); }
.qty-btn:active { transform: scale(0.85); }
.qty-val { transition: transform 0.15s; }

.modal-close { transition: all 0.15s; }
.modal-close:active { transform: scale(0.85) rotate(90deg); }

.file-zone-inner { transition: border-color 0.2s, background 0.2s; }
.file-zone-inner:active { background: rgba(255,199,44,0.03); border-color: var(--gold); }

.adm-btn-sm { transition: all 0.15s cubic-bezier(0.22,1,0.36,1); }
.adm-btn-sm:active { transform: scale(0.8); }

.prof-av { transition: transform 0.3s cubic-bezier(0.22,1,0.36,1); animation: popIn 0.5s cubic-bezier(0.22,1,0.36,1); }
.prof-av:active { transform: scale(0.92); }

.ticket-head-ico { animation: popIn 0.5s cubic-bezier(0.22,1,0.36,1) 0.1s backwards; }

/* ── STAGGER HELPERS ──────────────────── */

.stagger-1 { animation-delay: 0.04s !important; }
.stagger-2 { animation-delay: 0.08s !important; }
.stagger-3 { animation-delay: 0.12s !important; }
.stagger-4 { animation-delay: 0.16s !important; }
.stagger-5 { animation-delay: 0.2s !important; }
.stagger-6 { animation-delay: 0.24s !important; }
.stagger-7 { animation-delay: 0.28s !important; }
.stagger-8 { animation-delay: 0.32s !important; }

/* ── GLOW ACCENTS ─────────────────────── */

.glow-gold { box-shadow: 0 0 12px rgba(255,199,44,0.12); }
.glow-red { box-shadow: 0 0 12px rgba(218,41,28,0.12); }
.glow-green { box-shadow: 0 0 12px rgba(52,199,89,0.12); }

.pulse-gold { animation: goldPulse 2s ease infinite; }
.border-glow { animation: borderGlow 2s ease infinite; }

/* ── PAYMENT POLL STATUS ─────────────────── */
.pay-poll-status {
  padding: 14px; border-radius: var(--r);
  background: var(--bg-card); border: 1px solid var(--line);
}
.poll-row {
  display: flex; align-items: center; gap: 10px;
}
.poll-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.poll-dot.waiting {
  background: var(--orange);
  animation: dotBlink 1.5s ease infinite;
}
.poll-dot.confirming {
  background: var(--gold);
  animation: dotBlink 0.8s ease infinite;
}
.poll-dot.success { background: var(--green); animation: none; }
.poll-dot.error   { background: var(--red); animation: none; }
.poll-label {
  font-size: 13px; font-weight: 600; color: var(--white);
}
.poll-timer {
  margin-top: 8px; font-size: 12px; font-weight: 700;
  color: var(--grey-dim); font-variant-numeric: tabular-nums;
  letter-spacing: .05em;
}

.hidden { display: none !important; }

/* ── UTILS ──────────────────────────────── */

.divider { height: 1px; background: var(--line); margin: 14px 0; }
.mt-10 { margin-top: 10px; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }
.mb-10 { margin-bottom: 10px; }
.mb-16 { margin-bottom: 16px; }
.mb-20 { margin-bottom: 20px; }
.gap-8 { gap: 8px; }