/* ══════════════════════════════════════════════════════════
   Generator — единая тема оформления
   Подключать ПЕРЕД <style> страницы, чтобы страница могла
   переопределять любые правила.
   ══════════════════════════════════════════════════════════ */

/* ── Дизайн-токены (базовые значения) ── */
:root{
  --bg:#0c0c18;
  --surface:rgba(255,255,255,0.025);
  --surface2:rgba(255,255,255,0.05);
  --surface3:rgba(255,255,255,0.08);
  --border:rgba(255,255,255,0.07);
  --border-hover:rgba(255,255,255,0.12);
  --accent:#6366f1;
  --accent2:#7c3aed;
  --accent3:#8b5cf6;
  --accent-glow:rgba(99,102,241,0.2);
  --text:#f8fafc;
  --text2:#94a3b8;
  --text3:#64748b;
  --error:#f43f5e;
  --success:#34d399;
  --r:16px;
  --shadow-sm:0 2px 8px rgba(0,0,0,0.2);
  --shadow-md:0 8px 32px rgba(0,0,0,0.35);
  --shadow-lg:0 16px 48px rgba(0,0,0,0.45);
  --transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
}

/* ── Фирменный фон: градиенты + зерно ── */
body::before{
  content:'';
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse 70% 55% at 18% 8%,  rgba(99,102,241,0.13), transparent 60%),
    radial-gradient(ellipse 55% 45% at 88% 85%, rgba(124,58,237,0.10), transparent 60%),
    radial-gradient(ellipse 60% 50% at 50% 112%, rgba(139,92,246,0.07), transparent 60%);
}
body::after{
  content:'';
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  opacity:0.03;
  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:256px 256px;
}

/* ── Выделение и скроллбар ── */
::selection{background:rgba(129,140,248,0.25);color:var(--text);}
::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--surface3);border-radius:10px;}
::-webkit-scrollbar-thumb:hover{background:var(--text3);}

/* ── Фокус с клавиатуры ── */
:focus-visible{outline:2px solid var(--accent3);outline-offset:2px;border-radius:6px;}

/* ── Общие компоненты ── */
.glass{
  background:var(--surface);
  border:1px solid var(--border);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}
.btn-grad{
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  background-size:200% 200%;
  border:none;
  color:#fff;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 4px 20px rgba(99,102,241,0.30);
  transition:all 0.2s;
}
.btn-grad:hover:not(:disabled){background-position:100% 100%;transform:translateY(-2px);box-shadow:0 8px 28px rgba(124,58,237,0.45);}
.btn-grad:disabled{opacity:.5;cursor:not-allowed;}

.spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(139,92,246,0.3);border-top-color:var(--accent3);border-radius:50%;animation:g-spin .7s linear infinite;vertical-align:middle;}
@keyframes g-spin{to{transform:rotate(360deg)}}

/* ── Skeleton-загрузка ── */
.skel{
  position:relative;
  overflow:hidden;
  background:var(--surface2);
  border-radius:10px;
}
.skel::after{
  content:'';
  position:absolute;
  inset:0;
  transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(139,92,246,0.10),rgba(255,255,255,0.06),transparent);
  animation:g-shimmer 1.4s infinite;
}
@keyframes g-shimmer{to{transform:translateX(100%)}}
.skel-row{height:44px;margin:8px 14px;}
.skel-card{height:110px;margin-bottom:10px;border-radius:16px;}
.skel-line{height:12px;margin:6px 0;}

/* ── Toast-уведомления ── */
#toast-root{
  position:fixed;
  top:76px;
  right:18px;
  z-index:9999;
  display:flex;
  flex-direction:column;
  gap:8px;
  pointer-events:none;
}
.toast{
  pointer-events:auto;
  display:flex;
  align-items:center;
  gap:10px;
  min-width:220px;
  max-width:340px;
  padding:11px 16px;
  border-radius:13px;
  font-family:'Inter',sans-serif;
  font-size:12px;
  font-weight:500;
  color:var(--text);
  background:rgba(20,20,36,0.85);
  border:1px solid var(--border);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  box-shadow:var(--shadow-md);
  cursor:pointer;
  animation:g-toast-in .3s cubic-bezier(.2,.9,.3,1.2) both;
}
.toast.out{animation:g-toast-out .25s ease both;}
.toast .t-ic{
  width:22px;height:22px;flex-shrink:0;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;
}
.toast.success .t-ic{background:rgba(52,211,153,0.15);color:var(--success);}
.toast.error   .t-ic{background:rgba(244,63,94,0.15);color:var(--error);}
.toast.info    .t-ic{background:rgba(139,92,246,0.15);color:var(--accent3);}
.toast.success{border-color:rgba(52,211,153,0.25);}
.toast.error{border-color:rgba(244,63,94,0.25);}
.toast.info{border-color:rgba(139,92,246,0.3);}
@keyframes g-toast-in{from{opacity:0;transform:translateX(30px) scale(.95)}to{opacity:1;transform:none}}
@keyframes g-toast-out{to{opacity:0;transform:translateX(30px) scale(.95)}}

/* ── Уменьшенная анимация ── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;}
}

@media(max-width:720px){
  #toast-root{top:auto;bottom:76px;right:12px;left:12px;align-items:stretch;}
  .toast{max-width:none;}
}