/* Cyberpunk skin layer for Gorgorod (overrides site.css) */
html[data-theme="cyber"]{
  --accent: #00e5ff;
  --ok: #00ff84;
  --bad: #ff3b6b;
  --fg: #e6f0ff;
  --mutedFg: rgba(230,240,255,.68);
  --card: rgba(10,14,20,.72);
  --cardBorder: rgba(0,229,255,.18);
  --shadow: 0 10px 40px rgba(0,0,0,.45);
}

body.cyber{
  background:
    radial-gradient(1200px 600px at 20% 10%, rgba(0,229,255,.10), transparent 60%),
    radial-gradient(900px 500px at 80% 15%, rgba(255,59,107,.08), transparent 60%),
    radial-gradient(900px 700px at 50% 100%, rgba(0,255,132,.06), transparent 60%),
    linear-gradient(180deg, #05070b, #070a10 55%, #05060a);
  color: var(--fg);
}

/* Scanlines overlay */
body.cyber::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.03) 0px,
      rgba(255,255,255,.01) 1px,
      rgba(0,0,0,0) 3px,
      rgba(0,0,0,0) 5px
    );
  mix-blend-mode: overlay;
  opacity: .25;
  z-index: 0;
}

#cyber-canvas{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  opacity: .55;
}

/* Content should sit above canvas */
.topbar, main.container { position: relative; z-index: 1; }

.topbar{
  backdrop-filter: blur(10px);
  background: linear-gradient(180deg, rgba(5,7,11,.85), rgba(5,7,11,.55));
  border-bottom: 1px solid rgba(0,229,255,.15);
}

.brand{
  letter-spacing: .08em;
  text-transform: uppercase;
}

.glitch{
  position: relative;
  text-shadow: 0 0 18px rgba(0,229,255,.35);
}
.glitch::before, .glitch::after{
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  opacity: .65;
  width: 100%;
  overflow: hidden;
  clip-path: inset(0 0 0 0);
}
.glitch::before{
  transform: translate(1px, 0);
  color: rgba(255,59,107,.75);
  animation: glitch 2.4s infinite linear;
}
.glitch::after{
  transform: translate(-1px, 0);
  color: rgba(0,255,132,.65);
  animation: glitch 3.2s infinite linear reverse;
}
@keyframes glitch{
  0%{ clip-path: inset(0 0 90% 0); }
  10%{ clip-path: inset(10% 0 70% 0); }
  20%{ clip-path: inset(40% 0 40% 0); }
  30%{ clip-path: inset(70% 0 20% 0); }
  40%{ clip-path: inset(20% 0 60% 0); }
  50%{ clip-path: inset(0 0 85% 0); }
  60%{ clip-path: inset(55% 0 30% 0); }
  70%{ clip-path: inset(30% 0 50% 0); }
  80%{ clip-path: inset(75% 0 10% 0); }
  90%{ clip-path: inset(15% 0 65% 0); }
  100%{ clip-path: inset(0 0 90% 0); }
}

/* Cards / buttons */
.card{
  background: var(--card) !important;
  border: 1px solid var(--cardBorder) !important;
  box-shadow: var(--shadow) !important;
  position: relative;
}
.card::after{
  content:"";
  position:absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events:none;
  background: linear-gradient(135deg, rgba(0,229,255,.20), transparent 35%, rgba(255,59,107,.18), transparent 70%, rgba(0,255,132,.14));
  opacity:.25;
  mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding:1px;
}

.btn{
  border: 1px solid rgba(0,229,255,.22) !important;
  background: rgba(0,229,255,.06) !important;
  color: var(--fg) !important;
  text-shadow: 0 0 16px rgba(0,229,255,.15);
}
.btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(0,229,255,.20), 0 10px 30px rgba(0,0,0,.45);
}
.btn--primary{
  background: linear-gradient(90deg, rgba(0,229,255,.18), rgba(255,59,107,.12)) !important;
  border-color: rgba(0,229,255,.35) !important;
}

.nav__link{ color: rgba(230,240,255,.78) !important; }
.nav__link:hover{ color: #fff !important; text-shadow: 0 0 18px rgba(0,229,255,.28); }

.hr{ border-color: rgba(0,229,255,.12) !important; }

code{
  background: rgba(0,0,0,.35) !important;
  border: 1px solid rgba(0,229,255,.15) !important;
  color: rgba(230,240,255,.95) !important;
}

.alert{
  background: rgba(255,59,107,.10) !important;
  border: 1px solid rgba(255,59,107,.25) !important;
}

.badge{
  border: 1px solid rgba(0,229,255,.18) !important;
  background: rgba(0,229,255,.06) !important;
}

.footer .muted{ color: rgba(230,240,255,.5) !important; }

/* Sound button */
.cyber-sound{
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  border-radius: 999px;
  padding: 10px 12px;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 1px solid rgba(0,229,255,.25);
  background: rgba(5,7,11,.65);
  color: rgba(230,240,255,.88);
  backdrop-filter: blur(10px);
}
.cyber-sound.on{
  border-color: rgba(0,255,132,.35);
  box-shadow: 0 0 0 1px rgba(0,255,132,.20), 0 10px 30px rgba(0,0,0,.45);
}


/* ===== Forms (fix "white inputs") ===== */
html[data-theme="cyber"] .cyber-input,
html[data-theme="cyber"] .input,
html[data-theme="cyber"] input[type="text"],
html[data-theme="cyber"] input[type="password"],
html[data-theme="cyber"] input[type="email"],
html[data-theme="cyber"] input[type="number"],
html[data-theme="cyber"] input[type="search"],
html[data-theme="cyber"] input[type="url"],
html[data-theme="cyber"] select,
html[data-theme="cyber"] textarea{
  width: 100%;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(0,229,255,.22);
  background: rgba(6,10,14,.55);
  color: var(--fg);
  outline: none;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.20) inset,
    0 0 22px rgba(0,229,255,.06);
  transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease;
  backdrop-filter: blur(6px);
}
html[data-theme="cyber"] .cyber-input::placeholder,
html[data-theme="cyber"] .input::placeholder,
html[data-theme="cyber"] input::placeholder,
html[data-theme="cyber"] textarea::placeholder{
  color: rgba(230,240,255,.55);
}
html[data-theme="cyber"] .cyber-input:focus,
html[data-theme="cyber"] .input:focus,
html[data-theme="cyber"] input:focus,
html[data-theme="cyber"] select:focus,
html[data-theme="cyber"] textarea:focus{
  border-color: rgba(0,229,255,.55);
  box-shadow:
    0 0 0 4px rgba(0,229,255,.12),
    0 0 28px rgba(0,229,255,.10);
}
html[data-theme="cyber"] label,
html[data-theme="cyber"] .label{
  color: rgba(230,240,255,.80);
}

/* Buttons (ensure cyber look everywhere) */
html[data-theme="cyber"] .btn{
  border: 1px solid rgba(0,229,255,.28);
  background: linear-gradient(180deg, rgba(0,229,255,.12), rgba(10,14,20,.55));
  color: var(--fg);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
html[data-theme="cyber"] .btn:hover{ border-color: rgba(0,229,255,.55); }
html[data-theme="cyber"] .btn:active{ transform: translateY(1px); }

/* ===== Tables ===== */
html[data-theme="cyber"] .table-wrap{
  border: 1px solid rgba(0,229,255,.18);
  border-radius: 18px;
  overflow: auto;
  background: rgba(10,14,20,.55);
  box-shadow: var(--shadow);
}
html[data-theme="cyber"] .table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 520px;
}
html[data-theme="cyber"] .table th,
html[data-theme="cyber"] .table td{
  padding: 12px 14px;
  border-bottom: 1px solid rgba(0,229,255,.10);
  color: rgba(230,240,255,.90);
}
html[data-theme="cyber"] .table thead th{
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgba(5,8,12,.85);
  border-bottom: 1px solid rgba(0,229,255,.22);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 12px;
  color: rgba(230,240,255,.75);
}
html[data-theme="cyber"] .table tbody tr:hover td{
  background: rgba(0,229,255,.06);
}
html[data-theme="cyber"] .role-chip,
html[data-theme="cyber"] .chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,229,255,.20);
  background: rgba(0,0,0,.18);
  color: rgba(230,240,255,.92);
  white-space: nowrap;
}



/* Typography */
body.cyber{ font-family: 'VT323', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size: 20px; }
.h1, .card__title{ letter-spacing: .5px; }

.card--mini{ display:block; text-decoration:none; }
.card--mini:hover{ transform: translateY(-1px); }