/* /static_v2/loading.css */
/* ===== TOKENS (те же, что и в проекте) ===== */
:root{
  --color-primary:#0076FF; --color-accent:#8E58FF;
  --color-success:#32D583; --color-warning:#FFC107; --color-danger:#FF4D4F;

  --bg-canvas:#0B0E1A; --bg-surface:#12131A; --bg-elevated:#0F111A; --bg-card:#1A1C25;

  --text-primary:#fff; --text-secondary:#C7CBD1; --text-muted:#9AA0A6;

  --stroke:#3B3B3B; --divider:#2A2D36;

  --radius-lg:16px; --radius-md:12px; --radius-sm:8px; --radius-pill:100px;

  --shadow-sm:0 2px 8px rgba(0,0,0,.24); --shadow-md:0 8px 24px rgba(0,0,0,.32);

  --space-4:4px; --space-8:8px; --space-12:12px; --space-16:16px; --space-20:20px; --space-24:24px; --space-32:32px;

  --font-sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-weight-bold:700; --font-weight-extra:800;

  --topbar-h:64px;
  /* Уменьшенная высота таббара как в проекте */
  --tabbar-h:57px;

  /* Для загрузчика */
  --loader-w: min(74vw, 300px); /* на ~20% короче типовой ширины */
  --loader-h: 10px;
}

/* Кастомный шрифт проекта */
@font-face{
  font-family:'AppSans';
  src:url('/static_v2/font1.ttf') format('truetype');
  font-weight:400 800;
  font-style:normal;
  font-display:swap;
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg-canvas);color:var(--text-primary);font-family:var(--font-sans), 'AppSans';}
:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}

.loading-page{
  display:flex;min-height:100vh;align-items:center;justify-content:center;
  background:
    radial-gradient(1200px 600px at 50% -200px, rgba(0,118,255,.20), transparent 60%),
    radial-gradient(800px 400px at 100% 120%, rgba(142,88,255,.18), transparent 60%),
    var(--bg-canvas);
}

/* Card */
.loader{
  width:clamp(280px, 86vw, 420px);
  padding:28px 20px 22px;
  border-radius:20px;
  background:var(--bg-elevated);
  box-shadow:var(--shadow-md);
  display:flex;flex-direction:column;align-items:center;gap:14px;
}

/* Brand = Логотип. Без кругов, строго в линию с прогрессбаром */
.brand{width:var(--loader-w);display:flex;justify-content:center}
.brand__img{width:100%;height:auto;display:block}

/* Progress */
.progress{
  --p:0;
  width:var(--loader-w);
  height:var(--loader-h);
  border-radius:999px;
  background:#0C0F18;
  border:1px solid rgba(255,255,255,.18);
  overflow:hidden;
  position:relative;
}
.progress__bar{
  width:calc(var(--p) * 1%);height:100%;
  background:linear-gradient(90deg, #2D8BFF 0%, #6DA9FF 50%, #2D8BFF 100%);
  filter:drop-shadow(0 2px 8px rgba(0,118,255,.45));
  border-radius:999px;
  transition:width .25s ease;
}

/* Hint */
.hint{
  margin:6px 0 2px;
  font-size:12px; line-height:16px;
  color:var(--text-secondary);
  text-align:center;
  opacity:.9;
}

/* Reduce‑motion */
@media (prefers-reduced-motion: reduce){
  .progress__bar{transition:none}
}