:root{ --accent: #35e0c9; }

/* ---------- аврора-фон ---------- */
.aurora{ position:fixed; inset:-20%; filter:blur(90px); z-index:0; opacity:0.55; pointer-events:none; }
.aurora span{ position:absolute; border-radius:50%; mix-blend-mode:screen; }
.aurora span:nth-child(1){ width:38vw; height:38vw; top:8%; left:6%; background:radial-gradient(circle at 30% 30%, #9b7bff, transparent 70%); animation:drift1 22s ease-in-out infinite; }
.aurora span:nth-child(2){ width:42vw; height:42vw; bottom:2%; right:4%; background:radial-gradient(circle at 60% 60%, #35e0c9, transparent 70%); animation:drift2 26s ease-in-out infinite; }
.aurora span:nth-child(3){ width:26vw; height:26vw; top:40%; left:42%; background:radial-gradient(circle at 50% 50%, #ff7bd4, transparent 70%); animation:drift3 18s ease-in-out infinite; }
@keyframes drift1{ 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(6vw,8vh) scale(1.12);} }
@keyframes drift2{ 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-7vw,-6vh) scale(1.08);} }
@keyframes drift3{ 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-4vw,5vh) scale(0.9);} }

.grain{ position:fixed; inset:0; z-index:1; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E"); }

/* ---------- htmx: анимации + индикатор загрузки (нужны и в admin, и в file) ---------- */
.htmx-added{ animation: htmxFadeIn 0.3s ease; }
@keyframes htmxFadeIn{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:translateY(0); } }
.htmx-swapping{ opacity:0; transition: opacity 150ms ease-out; }
.htmx-indicator{ opacity:0; transition:opacity 0.2s ease; }
.htmx-request.htmx-indicator, .htmx-request .htmx-indicator{ opacity:1; }
.spin{ animation: spinLoader 0.8s linear infinite; }
@keyframes spinLoader{ to{ transform:rotate(360deg); } }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}