/* ─── BL Project Design System ─────────────────────────────────────── */

/* Syne — display-шрифт (только заголовки/UI-текст).
   Inter — основной sans для крупных цифр (его табулярные `tnum` цифры
   не выглядят сплющенными в bold-весах, в отличие от Syne).
   JetBrains Mono — для моноширинных полей (IP, slug, URL). */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ─── Tokens ────────────────────────────────────────────────────────── */
:root {
  --bg:        #080a0f;
  --bg-card:   #0f1117;
  --bg-hover:  #171921;
  --border:    #1e2130;
  --border-md: #262a3a;

  --text:      #f0f0f5;
  --text-muted:#6b7080;
  --text-dim:  #3d4255;

  --accent:    #e8783a;
  --accent-hov:#d96828;
  --accent-dim: rgba(232,120,58,.12);
  --accent-glow: rgba(232,120,58,.25);

  --green:     #10b981;
  --yellow:    #f59e0b;
  --red:       #ef4444;
  --green-dim: rgba(16,185,129,.12);
  --yellow-dim:rgba(245,158,11,.12);
  --red-dim:   rgba(239,68,68,.12);

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;

  --font-sans: 'Syne', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-num:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, Monaco, monospace;

  --ease: cubic-bezier(.16,1,.3,1);
  --ease-out: cubic-bezier(.22,1,.36,1);

  --shadow-sm: 0 1px 3px rgba(0,0,0,.4);
  --shadow-md: 0 4px 24px rgba(0,0,0,.5);
  --shadow-lg: 0 8px 48px rgba(0,0,0,.6);
  --shadow-accent: 0 0 32px rgba(232,120,58,.15);
}

/* ─── Reset ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.6;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }

/* ─── Typography ─────────────────────────────────────────────────────── */
h1 { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 700; line-height: 1.2; letter-spacing: -.015em; }
h3 { font-size: 1.125rem; font-weight: 600; }
h4 { font-size: .875rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }

.mono { font-family: var(--font-mono); }
.accent { color: var(--accent); }
.muted  { color: var(--text-muted); }

/* ─── Layout ─────────────────────────────────────────────────────────── */
.container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 48px; }
@media (max-width: 1023px) { .container { padding: 0 24px; } }
@media (max-width: 767px)  { .container { padding: 0 16px; } }

/* ─── Buttons ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-sans); font-size: .875rem; font-weight: 600;
  border: none; border-radius: var(--r-sm); cursor: pointer;
  transition: all 150ms var(--ease); white-space: nowrap; text-decoration: none;
}
.btn-primary {
  background: var(--accent); color: #fff; padding: 11px 22px;
  box-shadow: 0 0 0 0 var(--accent-glow);
}
.btn-primary:hover { background: var(--accent-hov); transform: translateY(-1px); box-shadow: var(--shadow-accent); }
.btn-primary:active { transform: translateY(0); }

.btn-ghost {
  background: transparent; color: var(--text-muted); padding: 11px 18px;
  border: 1px solid var(--border-md);
}
.btn-ghost:hover { color: var(--text); border-color: var(--text-dim); background: var(--bg-hover); }

.btn-lg { padding: 14px 28px; font-size: 1rem; border-radius: var(--r-md); }
.btn-sm { padding: 7px 14px; font-size: .8125rem; }

/* ─── Cards ──────────────────────────────────────────────────────────── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px;
}
.card-hover { transition: border-color 200ms, box-shadow 200ms; }
.card-hover:hover { border-color: var(--border-md); box-shadow: var(--shadow-md); }

/* ─── Badges ─────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .75rem; font-weight: 600; letter-spacing: .02em;
  padding: 3px 10px; border-radius: 100px;
}
.badge-green  { background: var(--green-dim);  color: var(--green);  }
.badge-yellow { background: var(--yellow-dim); color: var(--yellow); }
.badge-red    { background: var(--red-dim);    color: var(--red);    }
.badge-accent { background: var(--accent-dim); color: var(--accent); }
.badge-neutral{ background: var(--bg-hover);   color: var(--text-muted); border: 1px solid var(--border); }

/* ─── Inputs ─────────────────────────────────────────────────────────── */
.input {
  width: 100%; background: var(--bg-card); border: 1px solid var(--border-md);
  border-radius: var(--r-sm); color: var(--text); font-family: var(--font-sans);
  font-size: .9375rem; padding: 11px 14px; outline: none;
  transition: border-color 150ms, box-shadow 150ms;
}
.input::placeholder { color: var(--text-dim); }
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
.input.error { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-dim); }

/* ─── Divider ────────────────────────────────────────────────────────── */
.divider { border: none; border-top: 1px solid var(--border); }

/* ─── Noise overlay (subtle texture) ────────────────────────────────── */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: .025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* ─── Stat card ──────────────────────────────────────────────────────── */
.stat-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px 24px; }
.stat-label { font-size: .8125rem; color: var(--text-muted); margin-bottom: 8px; font-weight: 500; }
.stat-value { font-size: 1.875rem; font-weight: 800; color: var(--text); letter-spacing: -.02em; }
.stat-delta { font-size: .8125rem; font-weight: 600; margin-top: 6px; display: flex; align-items: center; gap: 4px; }
.stat-delta.up   { color: var(--green); }
.stat-delta.down { color: var(--red); }

/* ─── Animations ─────────────────────────────────────────────────────── */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 var(--accent-glow); }
  70%  { box-shadow: 0 0 0 12px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@keyframes scroll-x {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes glow-drift {
  0%, 100% { transform: translate(0,0) scale(1); }
  33%       { transform: translate(30px,-20px) scale(1.05); }
  66%       { transform: translate(-20px,15px) scale(.97); }
}

.animate-fade-up { animation: fade-up .6s var(--ease) both; }

[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].visible { opacity: 1; transform: translateY(0); }

/* ─── Scrollbar ──────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border-md); border-radius: 3px; }

/* ─── Selection ──────────────────────────────────────────────────────── */
::selection { background: var(--accent-dim); color: var(--accent); }

/* ─── Logo (общий — используется на всех страницах, не только лендинге) ─
   Дизайнеры положили эти стили в <style> у index.html, на других страницах
   они не подгружались — `.logo-mark` отображался просто как «BL» текстом.
   Вынес сюда — теперь работает на /login, /register, /cabinet, везде. */
.logo {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-sans); font-size: 1.0625rem; font-weight: 700;
  color: var(--text); letter-spacing: -.01em;
  flex-shrink: 0; text-decoration: none;
}
.logo-mark {
  width: 32px; height: 32px;
  background: var(--accent); border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-num); font-size: .75rem; font-weight: 800;
  color: #fff; letter-spacing: -.01em;
  box-shadow: 0 2px 12px var(--accent-glow);
  flex-shrink: 0;
}

/* ─── Цифры (Inter + tabular-nums) ─────────────────────────────────────
   Syne — display-шрифт; в bold его цифры реально "сплющенные".
   Inter с табулярными цифрами (`tnum`) — стандарт для аналитики/дашбордов.
   `!important` нужен потому что inline <style> на каждой cabinet-странице
   определяет .stat-value без font-family — наследует Syne от body. */
.stat-value,
.balance-value,
.link-stat-val,
.casino-earned,
.casino-clicks,
.casino-rank,
.balance-meta,
.stat-delta,
.dropdown-user-email,
.data-table td,
.data-table th {
  font-family: var(--font-num) !important;
  font-feature-settings: 'tnum' 1, 'ss01' 1;
  font-variant-numeric: tabular-nums;
}
/* Заголовки/UI остаются на Syne — НЕ переопределяем h1..h4 */

/* mono-поля оставляем mono — JetBrains Mono сам по себе табулярный */
.tx-hash,
.ip-cell,
.time-cell,
.link-url-text,
.ref-big,
.ref-code,
.mono {
  font-family: var(--font-mono) !important;
  font-variant-numeric: tabular-nums;
}

/* Цифры в крупных размерах лучше без отрицательного letter-spacing —
   Inter сам по себе компактный, минус только делает их "склеенными". */
.stat-value, .balance-value, .link-stat-val { letter-spacing: 0 !important; }