/* Wend4r — страницы ошибок. Динамические цвета (--bg,--fg,--blue,--orange, …)
   выставляются на .page инлайн из JS (тема + палитра статуса). */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: #07090d; }

@keyframes wpulse {
  0%, 100% { opacity: .45; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.3); }
}

.page {
  position: relative;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  color: var(--fg, #eaf1fc);
  background: var(--bg, #07090d);
  font-family: 'Space Grotesk', sans-serif;
}

.bg-canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
.overlay   { position: fixed; inset: 0; z-index: 1; background: var(--overlay, rgba(6,9,16,.32)); pointer-events: none; }

.top {
  position: relative; z-index: 3;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px clamp(20px, 4vw, 52px);
}
.brand {
  display: flex; align-items: center; gap: 9px;
  font-family: 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 600;
  letter-spacing: -.005em; color: var(--fg, #eaf1fc);
}
.brand-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--orange, #ff9a4d);
  box-shadow: 0 0 10px var(--orange, #ff9a4d);
  animation: wpulse 2.6s ease-in-out infinite;
}
.theme-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 500;
  letter-spacing: .02em; color: var(--fg, #eaf1fc);
  padding: 8px 13px; border-radius: 10px;
  border: 1px solid var(--border, rgba(255,255,255,.12));
  background: var(--panel, rgba(255,255,255,.05));
  cursor: pointer;
}
.theme-ico { font-size: 13px; }

.theme-seg {
  position: relative; display: inline-flex; padding: 4px; border-radius: 13px;
  border: 1px solid var(--border, rgba(255,255,255,.12));
  background: var(--panel, rgba(255,255,255,.05));
  overflow: hidden; isolation: isolate;
}
/* Скользящий индикатор активной кнопки */
.seg-ind {
  position: absolute; top: 4px; bottom: 4px; left: 4px; z-index: 0;
  width: calc((100% - 8px) / 3); border-radius: 9px; pointer-events: none;
  background: var(--seg, rgba(255,255,255,.14));
  box-shadow: 0 3px 12px rgba(0,0,0,.22), inset 0 0 0 1px rgba(255,255,255,.06);
  transition: background .25s ease;
}
.seg {
  position: relative; z-index: 1; flex: 1 0 0; min-width: 46px;
  display: flex; align-items: center; justify-content: center;
  appearance: none; border: 0; background: transparent;
  color: var(--muted, rgba(234,241,252,.56));
  padding: 7px 16px; border-radius: 9px; cursor: pointer;
  transition: color .28s ease, transform .12s ease;
}
.seg svg { width: 17px; height: 17px; display: block; }
.seg:hover { color: var(--fg, #eaf1fc); }
.seg:active { transform: scale(.94); }
.seg.on { color: var(--fg, #eaf1fc); font-weight: 700; }

.main {
  position: relative; z-index: 3; flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 12px clamp(20px, 4vw, 52px) 24px; gap: 6px;
}
.scrim {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 62% 58% at 50% 46%, var(--scrim, rgba(4,7,13,.5)), transparent 72%);
}

.kicker {
  font-family: 'JetBrains Mono', monospace; font-size: clamp(11px, 1.5vw, 14px);
  font-weight: 500; letter-spacing: .42em; text-transform: uppercase;
  color: var(--blue, #5b93ff); margin-bottom: 2px;
}
.code {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; line-height: .86;
  letter-spacing: -.04em; font-size: clamp(112px, 27vw, 440px);
  background: linear-gradient(142deg, var(--blue, #5b93ff) 8%, var(--orange, #ff9a4d) 94%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity: .5; filter: drop-shadow(0 6px 40px rgba(0,0,0,.35));
}
.status-en {
  font-family: 'Space Grotesk', sans-serif; font-weight: 600;
  font-size: clamp(22px, 3.6vw, 42px); letter-spacing: -.01em;
  color: var(--fg, #eaf1fc); margin-top: 4px;
}
.status-ru {
  font-family: 'Space Grotesk', sans-serif; font-weight: 500;
  font-size: clamp(16px, 2.3vw, 26px); color: var(--muted, rgba(234,241,252,.56));
}
.msg {
  max-width: 46ch; margin: 14px 0 2px;
  font-family: 'Space Grotesk', sans-serif; font-size: clamp(13px, 1.6vw, 16px);
  line-height: 1.5; color: var(--muted, rgba(234,241,252,.56));
}
.msg-br { opacity: .5; }
.msg-ru { opacity: .82; }

.foot { position: relative; z-index: 3; overflow: hidden; }
.watermark {
  position: absolute; left: 0; right: 0; bottom: -6%; text-align: center;
  font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  font-size: clamp(90px, 20vw, 320px); letter-spacing: .02em; line-height: .8;
  color: var(--fg, #eaf1fc); opacity: .045;
  pointer-events: none; user-select: none; white-space: nowrap;
}
.foot-bar {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; padding: 20px clamp(20px, 4vw, 52px);
  border-top: 1px solid var(--border, rgba(255,255,255,.12));
}
.mark {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 19px;
  letter-spacing: -.01em; color: var(--fg, #eaf1fc);
}
.years {
  font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 500;
  letter-spacing: .06em; color: var(--muted, rgba(234,241,252,.56));
}