/* Contador Hack — tela de login (wp-login.php) com a paleta e a fonte do blog. */
body.ch-login {
  --bg: #11120f; --bg-2: #191b16; --bg-3: #20231c; --line: #2a2d25; --line-2: #363a30;
  --fg: #d4d6cc; --dim: #868a7c; --amber: #f0b44c; --green: #9fcf6e; --cyan: #7cc4c9; --red: #e07a63;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: dark;
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 32px 16px; box-sizing: border-box;
  font-family: var(--mono); color: var(--fg);
  background: var(--bg);
}
body.ch-login * { box-sizing: border-box; }
body.ch-login ::selection { background: var(--amber); color: var(--bg); }

/* ===== Fundo: ASCII rolando na diagonal sem fim (CSS puro) =====
   Duas camadas de ladrilhos feitos de caracteres, desenhados em SVG embutido. A animação leva o
   background-position exatamente do tamanho de cada ladrilho, então o laço não tem emenda; como o
   ladrilho da frente é maior, ele anda mais no mesmo tempo, e isso dá a profundidade (parallax).
   Por cima, linhas de varredura de CRT e uma vinheta. Quem pede menos movimento vê tudo parado. */
body.ch-login::before,
body.ch-login::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; }
body.ch-login::before {
  background:
    /* frente: glifos soltos em cores do terminal (ladrilho 240×240) */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240' font-family='Consolas,Menlo,monospace' font-size='15' font-weight='700'><text x='18' y='34' fill='%23f0b44c' fill-opacity='.5'>&gt;_</text><text x='132' y='58' fill='%239fcf6e' fill-opacity='.4'>01</text><text x='78' y='118' fill='%237cc4c9' fill-opacity='.45'>*</text><text x='196' y='132' fill='%23d4d6cc' fill-opacity='.22'>/%5C</text><text x='26' y='176' fill='%239fcf6e' fill-opacity='.3'>[]</text><text x='150' y='204' fill='%23f0b44c' fill-opacity='.3'>%23</text><text x='96' y='226' fill='%23d4d6cc' fill-opacity='.18'>::</text></svg>") 0 0 / 240px 240px,
    /* fundo: malha miúda de + e . (ladrilho 48×48) */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' font-family='Consolas,Menlo,monospace' font-size='12'><text x='4' y='14' fill='%23868a7c' fill-opacity='.22'>+</text><text x='28' y='38' fill='%23868a7c' fill-opacity='.14'>.</text></svg>") 0 0 / 48px 48px;
  animation: ch-ascii-scroll 14s linear infinite;
}
@keyframes ch-ascii-scroll {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 240px 240px, 48px 48px; }
}
body.ch-login::after {
  background:
    radial-gradient(60rem 40rem at 50% -10%, color-mix(in srgb, var(--amber) 10%, transparent), transparent 60%),
    /* área do formulário mais limpa: os glifos somem perto do texto */
    radial-gradient(30rem 26rem at 50% 50%, rgba(17, 18, 15, .92) 40%, rgba(17, 18, 15, 0) 100%),
    radial-gradient(ellipse at center, transparent 45%, rgba(0, 0, 0, .7) 100%),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .28) 0 1px, transparent 1px 3px);
}
@media (prefers-reduced-motion: reduce) { body.ch-login::before { animation: none; } }

.ch-login #login { width: min(400px, 100%); padding: 0; margin: 0; position: relative; z-index: 1; }
.ch-login .language-switcher, .ch-login .privacy-policy-page-link { position: relative; z-index: 1; }

/* nome do site no lugar da logo do WordPress */
.ch-login #login h1.wp-login-logo { margin: 0 0 18px; text-align: left; }
.ch-login #login h1.wp-login-logo a {
  background: none; width: auto; height: auto; margin: 0; text-indent: 0; overflow: visible;
  font: 800 1.35rem/1.2 var(--mono); letter-spacing: .02em; color: var(--fg); text-transform: uppercase;
  display: inline-flex; align-items: center; gap: .5ch;
}
.ch-login #login h1.wp-login-logo a::before { content: ">_"; color: var(--amber); }
.ch-login #login h1.wp-login-logo a:hover { color: var(--amber); }
.ch-login #login h1.wp-login-logo a:focus { box-shadow: none; outline: 2px solid var(--amber); outline-offset: 4px; border-radius: 4px; }

/* cartão */
.ch-login .ch-login-head { margin: 0 0 14px; }
.ch-login .ch-prompt { margin: 0; font-size: 13px; color: var(--dim); display: flex; flex-wrap: wrap; column-gap: .6ch; }
.ch-login .ch-prompt .u { color: var(--green); }
.ch-login .ch-prompt .p { color: var(--cyan); }
.ch-login .ch-prompt .c::before { content: "$ "; color: var(--dim); }
.ch-login .ch-prompt .c { color: var(--fg); }
.ch-login .ch-lede { margin: 6px 0 0; font-size: 13px; line-height: 1.6; color: var(--dim); }

.ch-login form,
.ch-login #loginform, .ch-login #registerform, .ch-login #lostpasswordform, .ch-login #resetpassform {
  margin: 0; padding: 24px; border: 1px solid var(--line); border-radius: 14px;
  background: color-mix(in srgb, var(--bg-2) 92%, transparent);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .03);
  backdrop-filter: blur(6px);
}
.ch-login form p, .ch-login form .user-pass-wrap { margin: 0 0 18px !important; } /* o login.css do core zera essa margem */
.ch-login label { color: var(--amber); font-size: 12px; letter-spacing: .02em; }
.ch-login form label[for]::before { content: "--"; color: var(--dim); }
.ch-login form .forgetmenot label::before, .ch-login form .pw-weak label::before, .ch-login form label[for="rememberme"]::before { content: none; }

.ch-login input[type="text"], .ch-login input[type="email"], .ch-login input[type="password"], .ch-login input.input {
  width: 100%; margin: 6px 0 0; padding: 10px 12px; min-height: 44px;
  font: 16px/1.3 var(--mono); color: var(--fg); background: var(--bg);
  border: 1px solid var(--line-2); border-radius: 8px; box-shadow: none; caret-color: var(--amber);
}
.ch-login input:focus { border-color: var(--amber); box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber) 25%, transparent); outline: none; }
.ch-login input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px var(--bg) inset; -webkit-text-fill-color: var(--fg); }

/* botão de mostrar senha */
.ch-login .wp-pwd { position: relative; }
.ch-login .wp-pwd .button.wp-hide-pw {
  top: 6px; right: 0; height: 44px; min-height: 44px; width: 44px; color: var(--dim);
  background: transparent; border: 0; box-shadow: none;
}
.ch-login .wp-pwd .button.wp-hide-pw:hover, .ch-login .wp-pwd .button.wp-hide-pw:focus { color: var(--amber); box-shadow: none; }

/* lembrar-me */
.ch-login .forgetmenot { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; float: none; }
.ch-login .forgetmenot label { color: var(--dim); font-size: 13px; }
.ch-login input[type="checkbox"] { accent-color: var(--amber); width: 16px; height: 16px; background: var(--bg); border-color: var(--line-2); }
.ch-login input[type="checkbox"]:checked::before { filter: invert(1) sepia(1) saturate(5) hue-rotate(5deg); }
.ch-login .wp-tooltip__toggle { color: var(--dim); }

/* botão principal */
.ch-login .submit { margin: 0; }
.ch-login .button-primary, .ch-login .button.button-primary.button-large {
  float: none; width: 100%; min-height: 46px; padding: 0 16px; margin: 0;
  font: 700 15px var(--mono); color: var(--bg); text-shadow: none;
  background: var(--amber); border: 0; border-radius: 8px; box-shadow: none;
  transition: background .15s, transform .15s;
}
.ch-login .button-primary:hover, .ch-login .button-primary:focus { background: #ffc864; color: var(--bg); box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber) 30%, transparent); }
.ch-login .button-primary:active { transform: translateY(1px); }
.ch-login .button-secondary:not(.wp-hide-pw) { color: var(--fg); background: var(--bg-3); border-color: var(--line-2); }

/* avisos e erros */
.ch-login .message, .ch-login .notice, .ch-login #login_error, .ch-login .success {
  margin: 0 0 14px; padding: 10px 14px; border-radius: 10px; font-size: 13px; line-height: 1.6;
  color: var(--fg); background: var(--bg-2); border: 1px solid var(--line); border-left: 3px solid var(--cyan); box-shadow: none;
}
.ch-login #login_error, .ch-login .notice-error { border-left-color: var(--red); }
.ch-login #login_error::before { content: "erro: "; color: var(--red); font-weight: 700; }
.ch-login .success, .ch-login .notice-success { border-left-color: var(--green); }
.ch-login .message a, .ch-login #login_error a { color: var(--cyan); }

/* força da senha (cadastro / nova senha) */
.ch-login #pass-strength-result { margin-top: 8px; border-radius: 6px; font-size: 12px; background: var(--bg-3); border-color: var(--line-2); color: var(--fg); }
.ch-login #pass-strength-result.short { background: color-mix(in srgb, var(--red) 30%, var(--bg)); border-color: var(--red); }
.ch-login #pass-strength-result.bad { background: color-mix(in srgb, var(--red) 20%, var(--bg)); border-color: var(--red); }
.ch-login #pass-strength-result.good { background: color-mix(in srgb, var(--amber) 22%, var(--bg)); border-color: var(--amber); }
.ch-login #pass-strength-result.strong { background: color-mix(in srgb, var(--green) 22%, var(--bg)); border-color: var(--green); }
.ch-login .description, .ch-login .indicator-hint, .ch-login #reg_passmail { color: var(--dim); font-size: 12px; }

/* links abaixo do cartão */
.ch-login #nav, .ch-login #backtoblog { margin: 14px 0 0; padding: 0 4px; font-size: 13px; text-align: left; color: var(--line-2); }
.ch-login #nav a, .ch-login #backtoblog a, .ch-login .privacy-policy-page-link a { color: var(--dim); text-decoration: none; }
.ch-login #nav a:hover, .ch-login #backtoblog a:hover, .ch-login .privacy-policy-page-link a:hover { color: var(--amber); }
.ch-login #nav a::before, .ch-login #backtoblog a::before { content: "./"; color: var(--line-2); }
.ch-login .privacy-policy-page-link { margin: 18px 0 0; text-align: left; padding: 0 4px; }

@media (prefers-reduced-motion: reduce) { .ch-login .button-primary { transition: none; } }
@media (max-width: 420px) { .ch-login form, .ch-login #loginform { padding: 18px; } }