.snowflake-area {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;   /* viewport */
    height: 100vh;
    z-index: 10;
    pointer-events: none;
}

/* Each layer spans a *wider* area so gusts don’t create empty curtains */
.snowflake-layer {
    position: absolute;
    top: 0;
    left: -20vw;
    width: 140vw;
    height: 100vh;
    pointer-events: none;
    will-change: transform;
    transition: transform 2s ease-in-out;
}

.snowflake {
    position: absolute;
    top: -20%;
    animation: sway var(--sway-duration) ease-in-out infinite;
    pointer-events: none;
}

.snowflake-inner {
    width: var(--flake-size);
    aspect-ratio: 1;
    border-radius: 50%;
    background-color: snow;
    opacity: var(--flake-opacity, 1);
    animation: snowfall var(--fall-duration) linear infinite;
    pointer-events: none;
}

/* Spiral flakes use more dramatic path */
.snowflake-inner.spiral {
    animation: spiral-fall var(--fall-duration) linear infinite;
}

@keyframes snowfall {
    0%   { transform: translateY(0) rotate(0deg); }
    100% { transform: translateY(130vh) rotate(360deg); }
}

@keyframes sway {
    0%, 100% { transform: translateX(calc(-1 * var(--sway-amplitude))); }
    50%      { transform: translateX(var(--sway-amplitude)); }
}

@keyframes spiral-fall {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        transform:
            translate(calc(var(--spiral-sign) * var(--spiral-radius) * 0.5), 35vh)
            rotate(180deg);
    }
    50% {
        transform: translate(0, 70vh) rotate(360deg);
    }
    75% {
        transform:
            translate(calc(-1 * var(--spiral-sign) * var(--spiral-radius)), 105vh)
            rotate(540deg);
    }
    100% {
        transform: translate(0, 140vh) rotate(720deg);
    }
}

/* snowfall.css – load AFTER site.css */

/* Cool, frosty variants of your existing theme colors */
:root {
  --bg:        #050910;
  --fg:        #e9f4ff;
  --muted:     #a2b7cc;
  --ok:        #1b5e20; /* keep "ok" and "bad" as-is for clarity */
  --bad:       #b71c1c;
  --card:      #05070d;
  --accent:    #82e9ff;  /* icier accent */
  --tab:       #111822;
  --tab-active:#182130;
}

/* Colder, frostier background treatment */
body::before {
  background:
    linear-gradient(0deg, rgba(2,10,20,.70), rgba(2,10,20,.70)),
    url('/img/2025-10-11_17-53-03.webp') center / cover no-repeat fixed;
  filter:
    saturate(0.9)
    hue-rotate(-10deg)
    brightness(0.95)
    contrast(1.05);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.12), transparent 55%),
    radial-gradient(circle at top right, rgba(255,255,255,.10), transparent 55%),
    radial-gradient(circle at bottom center, rgba(0,0,0,.35), transparent 60%);
}

header {
  background: rgba(8,16,28,.70);
  border-bottom: 1px solid rgba(180,210,255,.22);
  box-shadow: 0 10px 40px rgba(0,0,0,.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

nav.tabs {
  background: rgba(5,12,24,.70);
  border-bottom: 1px solid rgba(160,190,230,.25);
}

nav.tabs button {
  background: rgba(9,18,32,.85);
}

nav.tabs button.active {
  background: rgba(18,30,48,.95);
  box-shadow: 0 0 0 1px rgba(160,210,255,.35) inset;
}

.card {
  background: rgba(8,14,26,.82);
  border: 1px solid rgba(185,215,255,.28);
  box-shadow:
    0 18px 45px rgba(0,0,0,.6),
    0 0 25px rgba(140,200,255,.15);
}

pre {
  background: rgba(6,10,20,.9);
  border: 1px solid rgba(170,205,255,.18);
}

h1 {
  color: #e3f3ff;
  text-shadow:
    0 0 6px rgba(150,210,255,.45),
    0 0 18px rgba(80,150,220,.35);
}

a {
  color: var(--accent);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
  text-shadow: 0 0 6px rgba(130,233,255,.55);
}

.meta,
.muted {
  color: var(--muted);
}

.status-card.status-online {
  background: rgba(22,73,33,.30);
}

.status-card.status-offline {
  background: rgba(120,22,22,.30);
}

.lang-switch select {
  background-color: #101726;
  border-color: #233654;
}

footer {
  background: rgba(5,10,18,.80);
  border-top: 1px solid rgba(160,190,230,.25);
}