/* ============================================================
   Critical CSS - Above the fold styles
   Загружается синхронно для быстрого отображения
   ============================================================ */

:root{
  --gap: 16px;
  --radius: 16px;
  --shadow: 0 10px 30px rgba(17,24,39,.12);
  --shadow-lg: 0 20px 60px rgba(17,24,39,.18);
}

@media (max-width: 900px){ :root{ --gap:14px; } }
@media (max-width: 560px){ :root{ --gap:12px; } }

:root[data-theme='light']{
  --bg:#f5f7ff; --bg2:#ffffff; --card:#ffffff; --stroke:rgba(0,0,0,.10);
  --text:#17202a; --muted:#6b7280; --brand:#4361ee; --brand2:#67e8f9;
  --accent:#f72585; --ok:#06d6a0; --warn:#fbbf24; --ring:0 0 0 3px rgba(67,97,238,.25);
  --input-bg:#ffffff; --input-bg-hover:#f7f7fb; --menu-bg:#ffffff; --menu-text:#17202a;
}

:root[data-theme='dark']{
  --bg:#0f1224; --bg2:#0b0e1a; --card:#151935; --stroke:rgba(255,255,255,.10);
  --text:#ecf0ff; --muted:#a0a7c9; --brand:#6a7dff; --brand2:#7ff0ff;
  --accent:#f86aa4; --ok:#26d3a9; --warn:#ffd166; --ring:0 0 0 3px rgba(122,162,255,.28);
  --input-bg:#1b2146; --input-bg-hover:#202759; --menu-bg:#151935; --menu-text:#ecf0ff;
  color-scheme: dark;
}

*{box-sizing:border-box}
html,body{scroll-behavior:smooth}
body{
  margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial; color:var(--text);
  background: linear-gradient(180deg, var(--bg), var(--bg2));
  min-height:100vh; transition: background .35s ease, color .2s ease;
}

.container{max-width:1200px; margin:0 auto; padding: clamp(12px, 2.2vw, 24px)}

/* Header критических стилей */
header{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid var(--stroke); border-radius: clamp(10px,1.8vw,14px);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px clamp(10px,1.6vw,14px); margin-bottom:var(--gap); z-index:10;
}

.btn{
  position:relative; overflow:hidden; padding:8px 12px; border-radius:12px; border:1px solid var(--stroke);
  background:var(--card); color:var(--text); cursor:pointer; font-weight:800; font-size: clamp(12px, 1.7vw, 14px);
  box-shadow:var(--shadow); transition:transform .18s ease, box-shadow .22s ease, background .2s ease
}

/* Скелетон для быстрой загрузки */
.skeleton{position:relative; overflow:hidden; background:linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.18), rgba(255,255,255,.08)); background-size:200% 100%; animation:shine 1.2s linear infinite}
@keyframes shine{0%{background-position:200% 0} 100%{background-position:-200% 0}}

/* Скрытие неважного контента до загрузки */
.animate-in{opacity:0; transform:translateY(8px); transition:opacity .4s cubic-bezier(.22,1,.36,1), transform .4s cubic-bezier(.22,1,.36,1)}
.animate-in.loaded{opacity:1; transform:translateY(0)}

/* Оптимизация для мобильных */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Оптимизация GPU */
.chart-card, .modal, .btn {
  will-change: transform;
  transform: translateZ(0);
}