/* ========== Base Theme ========== */
:root{
  --bg: #050608;
  --bg-2: #090b10;
  --card: #0b0f14;
  --text: #e6f1ff;
  --muted: #8aa4b5;
  --brand: #00ffad;
  --brand-2: #58a6ff;
  --danger: #ff3b3b;
  --ok: #00ffa3;
  --radius: 16px;
  --shadow: 0 12px 40px rgba(0, 255, 173, .07);
  --grid: rgba(0, 255, 173, .90);
  --tint-color: rgba(0, 255, 173, .90); /* verde suave (mude a opacidade aqui) */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  position:relative;           /* para os pseudo-elementos do fundo */
  margin:0;
  font-family:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--bg);       /* fallback */
  color:var(--text);
  overflow:hidden;
}

/* ======= BACKGROUND: imagem + tonalização verde + vinheta ======= */
/* FUNDO: imagem quase toda visível */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-1;
  background:
    /* reduz muito a camada escura */
    linear-gradient(0deg, rgba(0,0,0,.18), rgba(0,0,0,.12)),
    url('../img/anonymous-bg.png') center/cover no-repeat; /* sua imagem */
  /* deixa a foto mais “limpa” e clara */
  filter:
    grayscale(10%)      /* menos cinza (mais cor da foto) */
    saturate(120%)      /* um pouquinho mais de cor */
    hue-rotate(105deg)  /* mantém tom esverdeado; ajuste 90–120 se quiser */
    brightness(0.92)    /* mais brilho (0.85–1.0) */
    contrast(1.05)      /* leve contraste */
    blur(3px);          /* sem blur (ou 0.5px se preferir suavizar) */
}


/* “halo” verde suave + vinheta nos cantos */
/* HALO + VINHETA (bem mais suave) */
body::after{
  content:"";
  position:fixed; inset:0; z-index:-1;
  background:
    radial-gradient(60% 50% at 55% 60%, rgba(0,255,173,.10), transparent 62%),
    radial-gradient(80% 70% at 50% 50%, transparent 70%, rgba(0,0,0,.18) 100%);
  pointer-events:none;
}

/* ======= Matrix canvas acima do fundo, abaixo do conteúdo ======= */
/* Matrix acima do fundo, sem escurecer a foto */
#matrix{
  position:fixed; inset:0; z-index:0;
  /* removi a película escura e deixei só a grade bem fraca */
  background:
    repeating-linear-gradient(0deg, rgba(0,255,173,.03), rgba(0,255,173,.03) 1px, transparent 1px, transparent 24px);
  pointer-events:none;
  filter: contrast(105%) brightness(105%);
}


.container{
  position:relative; z-index:1;
  height:100dvh; display:grid; place-items:center;
  padding:24px;
}

/* Cards / Forms */
.card{
  width:min(480px, 92vw);
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.0)), var(--card);
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  backdrop-filter: blur(8px);
  padding:28px;
}

.card-header{ text-align:center; margin-bottom:12px }
.title{ margin:4px 0 2px; font-weight:800; letter-spacing:.5px }
.subtitle{ margin:0; color:var(--muted); font-size:.9rem }
.logo-glitch{
  font-weight:800; font-size:28px; letter-spacing:6px; color:var(--brand);
  text-shadow: 2px 0 0 #00ffaa, -2px 0 0 #58a6ff;
  animation: glitch 2.5s infinite steps(2, end);
}
@keyframes glitch{
  0%{ transform: skewX(0deg) }
  5%{ transform: skewX(5deg) }
  10%{ transform: skewX(-4deg) }
  15%{ transform: skewX(0deg) }
  100%{ transform: skewX(0deg) }
}

.form{ display:grid; gap:14px; margin-top:10px }
.field{ display:grid; gap:8px }
.field span{ color:var(--muted); font-size:.9rem }
input[type="text"], input[type="password"]{
  width:100%; padding:12px 14px; border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  color:var(--text); outline:none;
}
input:focus{ border-color: var(--brand) ; box-shadow:0 0 0 3px rgba(0,255,173,.15) }

.row{ display:flex; justify-content:space-between; align-items:center; margin-top:6px }
.checkbox{ display:flex; align-items:center; gap:10px; color:var(--muted) }
.btn{
  border:0; padding:12px 18px; border-radius:999px; cursor:pointer; font-weight:800;
  transition: transform .08s ease, box-shadow .2s ease, background .2s ease;
}
.btn-primary{ background:linear-gradient(135deg, var(--brand), #00c2ff); color:#00110a; box-shadow:0 10px 24px rgba(0, 255, 173, .12) }
.btn-primary:hover{ transform:translateY(-1px); }
.btn-ghost{ background:transparent; color:var(--muted); border:1px solid rgba(255,255,255,.08) }
.btn-ghost:hover{ color:var(--text); border-color: var(--brand) }

.feedback{ height:22px; margin:6px 2px 0; color:var(--danger); font-size:.9rem }
.card-footer{ margin-top:12px; text-align:center; color:var(--muted) }

/* Construction Page */
.construction .glitch-wrapper{ display:grid; gap:18px; text-align:center; width:min(920px, 95vw) }
.glitch{
  font-size: clamp(28px, 7vw, 72px);
  font-weight: 800;
  position:relative;
  display:inline-block;
  letter-spacing:2px;
  text-transform: uppercase;
}
.glitch::before,.glitch::after{
  content: attr(data-text);
  position:absolute; inset:0; pointer-events:none;
}
.glitch{ color:#eafff5; text-shadow: 0 0 8px rgba(0,255,173,.3) }
.glitch::before{ color:#00ffad; transform: translate(2px, -2px); mix-blend-mode:screen; }
.glitch::after{ color:#58a6ff; transform: translate(-2px, 2px); mix-blend-mode:screen; }

.muted{ color:var(--muted) }
.badges{ display:flex; gap:10px; justify-content:center }
.badge{ padding:6px 10px; border-radius:10px; background: rgba(0,255,173,.08); border:1px solid rgba(0,255,173,.25); color:#c9fff0 }
.badge-alt{ background: rgba(88,166,255,.08); border-color: rgba(88,166,255,.25); color:#e0efff }

.term{ text-align:left; margin:8px auto 0; width:min(920px, 95vw) }
.term-header{
  display:flex; align-items:center; gap:8px; padding:8px 12px;
  background: rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08);
  border-radius:10px 10px 0 0;
}
.term-header .dot{ width:10px; height:10px; border-radius:50%; display:inline-block; }
.term-header .dot:nth-child(1){ background:#ff5f57 }
.term-header .dot:nth-child(2){ background:#fdbc2c }
.term-header .dot:nth-child(3){ background:#28c840 }
.term-title{ margin-left:auto; color:var(--muted) }
.term-body{
  height: 240px; overflow:auto; padding:12px; line-height:1.5;
  background: rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.08);
  border-top:0; border-radius: 0 0 10px 10px;
}
.term .line{ margin:0 }

/* Small screens */
@media (max-width: 380px){
  .row{ flex-direction:column; gap:10px; align-items:stretch }
  .btn-primary{ width:100% }
}

/* Película de cor por cima de TUDO (inclusive as letras) */
/* Película de cor por cima do CANVAS e da imagem (o card continua legível) */
#matrix::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:1;                 /* acima do canvas, abaixo do conteúdo */
  background: var(--tint-color);
  pointer-events:none;
  mix-blend-mode: overlay;   /* opções: overlay | color | multiply | screen */
}

/* =========================================
   HACKER PACK — sem mudar o HTML
   (cole no final do styles.css)
========================================= */

/* tokens extras (pode ajustar as cores aqui) */
:root{
  --hacker-neon: #00ffad;
  --hacker-cyan: #6ae0ff;
  --hacker-deep: #0a0f13;
  --hacker-grid: rgba(0,255,173,.06);
  --hacker-scan: rgba(255,255,255,.03);
  --hacker-danger: #ff4e5d;
}

/* CARD: vidro escuro + grade + scanlines + ruído + borda neon animada */
.card{
  position: relative;
  background:
    linear-gradient(180deg, rgba(8,12,14,.35), rgba(8,12,14,.22)),
    var(--card);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow:
    0 30px 60px rgba(0,0,0,.45),
    0 0 0 1px rgba(0,255,173,.05) inset;
  backdrop-filter: blur(10px);
  overflow: hidden;
}

/* grade interna */
.card::before{
  content:"";
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(0deg, var(--hacker-grid), var(--hacker-grid) 1px, transparent 1px, transparent 20px),
    repeating-linear-gradient(90deg, var(--hacker-grid), var(--hacker-grid) 1px, transparent 1px, transparent 20px);
  pointer-events:none;
  opacity:.4;
  mix-blend-mode: overlay;
}

/* scanlines e ruído */
.card::after{
  content:"";
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(0deg, var(--hacker-scan), var(--hacker-scan) 1px, transparent 2px, transparent 3px),
    radial-gradient(120% 100% at 50% -10%, rgba(0,255,173,.10), transparent 45%);
  filter: contrast(105%) brightness(105%);
  pointer-events:none;
}

/* moldura neon viva nos cantos (colchetes) */
.card:has(.form) {
  --b: 1px;
  --c: var(--hacker-neon);
}
.card:has(.form) .card-header::before,
.card:has(.form) .card-header::after,
.card:has(.form)::before,
.card:has(.form)::after{
  content:"";
  position:absolute; width:26px; height:26px; border:2px solid var(--hacker-neon);
  filter: drop-shadow(0 0 8px rgba(0,255,173,.45));
}
.card:has(.form) .card-header::before{ top:10px; left:10px; border-right:none; border-bottom:none; border-radius:10px 0 0 0 }
.card:has(.form) .card-header::after{ top:10px; right:10px; border-left:none; border-bottom:none; border-radius:0 10px 0 0 }
.card:has(.form)::before{ bottom:10px; left:10px; border-right:none; border-top:none; border-radius:0 0 0 10px }
.card:has(.form)::after{ bottom:10px; right:10px; border-left:none; border-top:none; border-radius:0 0 10px 0 }

/* “borda viva” animada (traço que percorre o card) */
.card { --glow: rgba(0,255,173,.16); }
.card .login-card::selection{ background: var(--hacker-neon); color:#00120c }
.card{ 
  background-clip: padding-box;
}
.card > ._border-run{
  display:none;
}
@keyframes border-run {
  0% { background-position: 0% 0% }
  100% { background-position: 400% 0% }
}
.card{
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 0 24px var(--glow) inset,
    0 0 40px rgba(0,0,0,.45);
}

/* HEADER: logo glitch + subtítulo com fio */
.logo-glitch{
  font-weight: 900;
  letter-spacing: .6rem;
  color: var(--hacker-neon);
  text-shadow:
    0 0 6px rgba(0,255,173,.55),
    2px 0 0 #00ffaa,
   -2px 0 0 #58a6ff;
}
.subtitle{
  position: relative;
  padding-top: 8px;
}
.subtitle::after{
  content:"";
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:-10px; width:160px; height:1px;
  background: linear-gradient(90deg, transparent, var(--hacker-neon), transparent);
  opacity:.6;
}

/* “LEDs” de status (decorativo) */
.card-footer{
  position:relative; padding-top:14px;
}
.card-footer::before{
  content:"● ● ●  ● ●";
  position:absolute; top:-2px; left:50%; transform:translateX(-50%);
  letter-spacing: 8px; font-size:10px;
  color: rgba(0,255,173,.65);
  text-shadow: 0 0 8px rgba(0,255,173,.35);
  opacity:.9;
}

/* CAMPOS: moldura cyber + glow */
input[type="text"], input[type="password"]{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 0 0 0 rgba(0,255,173,0);
  transition: box-shadow .2s ease, border-color .2s ease, background .2s ease;
  caret-color: var(--hacker-neon);
}
input[type="text"]::placeholder, input[type="password"]::placeholder{
  color: #6ea3a0;
}
input[type="text"]:focus, input[type="password"]:focus{
  border-color: var(--hacker-neon);
  box-shadow: 0 0 0 3px rgba(0,255,173,.20), 0 0 24px rgba(0,255,173,.15) inset;
  background: rgba(0,255,173,.03);
}

/* checkbox mais cyber */
.checkbox input[type="checkbox"]{
  appearance: none; width:16px; height:16px; border-radius:4px;
  border:1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.03);
  display:grid; place-items:center;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.checkbox input[type="checkbox"]:checked{
  border-color: var(--hacker-neon);
  background: radial-gradient(circle at 50% 50%, var(--hacker-neon) 0 45%, transparent 48% 100%);
  box-shadow: 0 0 10px rgba(0,255,173,.35);
}

/* BOTÃO: pílula neon com “scan” animado */
.btn-primary{
  position:relative; overflow:hidden;
  background: linear-gradient(135deg, var(--hacker-neon), var(--hacker-cyan));
  color:#00110a; font-weight:900;
  box-shadow: 0 10px 24px rgba(0,255,173,.18), 0 0 0 1px rgba(0,255,173,.25) inset;
}
.btn-primary::after{
  content:""; position:absolute; inset:-40% -60% auto -60%; height:180%;
  background: linear-gradient(90deg, transparent 0 45%, rgba(255,255,255,.45) 50%, transparent 55% 100%);
  transform: translateX(-120%);
  animation: btn-scan 3.2s linear infinite;
}
@keyframes btn-scan { to { transform: translateX(120%) } }
.btn-primary:hover{ transform: translateY(-1px) scale(1.01) }

/* TITLES mais “terminal” */
.title{
  text-shadow: 0 0 8px rgba(0,255,173,.25);
  letter-spacing: .8px;
}

/* Pequeno “brilho de foco” ao redor do card quando os campos são focados */
.form:focus-within ~ .card-footer,
.form:focus-within .field input{
  /* já coberto pelo :focus dos inputs */
}