/* index.css — minimal black + subtle animated background compatibility */

/* Variables */
:root{
  --bg-top: #07070a;
  --bg-mid: #0b0c10;
  --accent: rgba(255,255,255,0.95);
  --muted: rgba(255,255,255,0.64);
  --muted-2: rgba(255,255,255,0.20);
  --line: rgba(255,255,255,0.10);

  --card-radius: 14px;
  --glass: 6px;
  --font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* Reset */
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  font-family:var(--font);
  color:var(--accent);
  background: linear-gradient(180deg, var(--bg-top), var(--bg-mid));
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow:hidden;
}

/* subtle film grain / scanline */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image: linear-gradient(rgba(255,255,255,0.0028) 1px, transparent 1px);
  background-size: 100% 56px;
  opacity:0.45;
  mix-blend-mode: overlay;
}

/* Canvas sits below everything */
#bg-canvas{ position:fixed; inset:0; z-index:0; width:100vw; height:100vh; pointer-events:none; }

/* Center */
.center-wrap{ position:relative; z-index:3; min-height:100vh; display:flex; align-items:center; justify-content:center; padding:28px; }

/* Card */
.login-card{
  width: min(460px, 94%);
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005));
  border-radius: var(--card-radius);
  padding: 34px;
  border: 1px solid rgba(255,255,255,0.03);
  box-shadow: 0 30px 80px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.02);
  backdrop-filter: blur(var(--glass));
  display:flex; flex-direction:column; gap:14px;
}

/* Title */
.login-title{
  margin:0 0 6px; font-weight:300; letter-spacing:3.8px; font-size:1.25rem; color:var(--muted); text-align:center;
}

/* flashes */
.flashes{ list-style:none; padding:0; margin:0 0 6px; display:flex; flex-direction:column; gap:8px; z-index:6; }
.flashes li{ padding:8px 10px; border-radius:8px; background:rgba(255,255,255,0.02); color:var(--muted); font-size:0.95rem; }

/* Form */
.login-form{ display:flex; flex-direction:column; gap:10px; }

/* Field */
.field{ position:relative; margin:6px 0; }
.field-inner{ display:flex; align-items:center; gap:12px; }
.icon{ width:26px; text-align:center; color:var(--muted); font-size:14px; }

/* input */
.field input{
  width:100%; border:none; outline:none; background:transparent;
  color:var(--accent); font-size:1rem; padding:10px 6px;
}
.field input::placeholder{ color: var(--muted-2); }

/* underline */
.underline{ display:block; height:1px; width:100%; background:transparent; border-bottom:1px solid var(--line); position:absolute; left:0; bottom:-4px; transition: border-color .16s ease, transform .16s ease; }
.field-inner:focus-within + .underline,
.field-inner:focus-within ~ .underline { border-bottom-color: rgba(88,223,248,0.9); }

/* row: checkbox + forgot */
.row{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:6px; margin-bottom:2px; }
.checkbox{ display:flex; align-items:center; gap:8px; color:var(--muted); font-size:0.95rem; }
.checkbox input{ width:11px; height:11px; accent-color: rgba(88,223,248,0.9); }
.forgot{ color:var(--muted); text-decoration:none; font-size:0.92rem; }
.forgot:hover{ color:var(--accent); text-decoration:underline; }

/* outlined button (subtle, smaller) */
.btn-outline{
  margin-top:8px; height:44px; border-radius:8px;
  background:transparent; border:1px solid rgba(255,255,255,0.06);
  color:var(--accent); font-weight:700; letter-spacing:1.6px; font-size:0.95rem;
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  transition: background-color .16s ease, color .16s ease, transform .12s;
  overflow:hidden; z-index:6;
}
.btn-outline:hover{ background: rgba(88,223,248,0.04); color: #fff; transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,0.45); }

/* ripple helper */
.ripple{ position:absolute; border-radius:50%; transform:scale(0); background: rgba(255,255,255,0.06); pointer-events:none; }

/* small screens */
@media (max-width:420px){
  .login-card{ padding:20px; }
  .login-title{ font-size:1.05rem; letter-spacing:3px; }
  .btn-outline{ height:46px; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation:none!important; transition:none!important; }
}

/* visually-hidden */
.visually-hidden{ position:absolute !important; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; }


.icon {
  opacity: 0.38; 
}

.checkbox span {
    font-size: 0.8rem;    /* tamanho reduzido */
    opacity: 0.75;        /* opcional, deixa mais suave */
}