/* MegaFlix — Login Signature UI */
:root{
  --primary:#5b8cff;
  --primary-2:#7c5df0;
  --cyan:#22d3ee;
  --success:#34d399;
  --bg:#040711;
  --surface:#0a111e;
  --surface-2:#0e1828;
  --text:#f8fbff;
  --muted:#8fa3bd;
  --muted-2:#627892;
  --border:rgba(115,148,197,.16);
  --border-focus:rgba(91,140,255,.62);
  --danger:#fb7185;
  --shadow:0 42px 120px rgba(0,0,0,.56);
}
*{box-sizing:border-box}
html,body{min-height:100%;margin:0}
html{background:var(--bg);color-scheme:dark}
body{
  padding:clamp(14px,2.7vw,38px);display:grid;place-items:center;position:relative;overflow-x:hidden;
  background:
    radial-gradient(circle at 10% -8%,rgba(91,140,255,.20),transparent 30%),
    radial-gradient(circle at 100% 16%,rgba(124,93,240,.15),transparent 28%),
    radial-gradient(circle at 54% 105%,rgba(34,211,238,.07),transparent 26%),
    linear-gradient(150deg,#03060d,#070c16 55%,#050914);
  color:var(--text);font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:-.008em
}
body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.38;background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:46px 46px;mask-image:linear-gradient(to bottom,black,transparent 78%)}
.login-shell{
  width:min(1180px,100%);min-height:min(720px,calc(100vh - 76px));display:grid;grid-template-columns:minmax(0,1.12fr) minmax(400px,.88fr);
  position:relative;z-index:1;background:rgba(9,16,28,.92);border:1px solid rgba(118,151,201,.17);border-radius:32px;overflow:hidden;
  box-shadow:var(--shadow),0 0 0 1px rgba(91,140,255,.035);backdrop-filter:blur(18px)
}
.login-visual{
  position:relative;min-height:100%;padding:clamp(34px,5vw,68px);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;color:#fff;
  background:
    linear-gradient(145deg,rgba(5,13,26,.76),rgba(10,27,53,.82)),
    url("../../../api/img/fundo_login.jpg") center/cover no-repeat
}
.login-visual::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 72% 18%,rgba(91,140,255,.30),transparent 32%),radial-gradient(circle at 12% 88%,rgba(124,93,240,.19),transparent 30%);pointer-events:none}
.login-visual::after{content:"";position:absolute;width:460px;height:460px;border-radius:50%;right:-230px;bottom:-250px;border:1px solid rgba(255,255,255,.07);box-shadow:0 0 0 50px rgba(255,255,255,.014),0 0 0 100px rgba(255,255,255,.009);pointer-events:none}
.visual-top,.visual-content,.visual-footer{position:relative;z-index:1}
.brand{display:flex;align-items:center;gap:14px}
.brand-logo{width:62px;height:62px;padding:7px;border-radius:20px;display:grid;place-items:center;background:linear-gradient(145deg,rgba(91,140,255,.20),rgba(124,93,240,.12));border:1px solid rgba(160,185,255,.25);box-shadow:0 16px 38px rgba(0,0,0,.25),inset 0 1px rgba(255,255,255,.07)}
.brand-logo img{width:100%;height:100%;object-fit:contain;border-radius:13px}
.brand-copy{display:flex;flex-direction:column;line-height:1.15}
.brand-copy strong{font-size:17px;font-weight:800;letter-spacing:-.025em}
.brand-copy small{margin-top:5px;color:#7f9bbc;font-size:9px;text-transform:uppercase;letter-spacing:.18em;font-weight:800}
.visual-content{max-width:550px;padding:48px 0}
.visual-kicker{display:inline-flex;align-items:center;gap:9px;padding:8px 12px;border-radius:999px;background:rgba(91,140,255,.11);border:1px solid rgba(125,160,255,.20);color:#b8d0ff;font-size:10px;font-weight:750;letter-spacing:.02em}
.visual-kicker span{width:7px;height:7px;border-radius:50%;background:var(--success);box-shadow:0 0 0 5px rgba(52,211,153,.10)}
.visual-content h1{margin:22px 0 15px;font-size:clamp(36px,4.5vw,58px);line-height:1.02;letter-spacing:-.055em;font-weight:800;max-width:540px}
.visual-content p{margin:0;color:#a9bed6;line-height:1.76;font-size:13px;max-width:490px}
.feature-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:32px;max-width:500px}
.feature{display:flex;align-items:center;gap:10px;padding:13px 14px;border-radius:15px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.075);color:#d8e7f7;font-size:10.5px;font-weight:650;box-shadow:inset 0 1px rgba(255,255,255,.025)}
.feature i{width:29px;height:29px;border-radius:9px;display:grid;place-items:center;font-size:17px;color:#9ab9ff;background:rgba(91,140,255,.10)}
.visual-footer{display:flex;align-items:center;gap:8px;color:#607c9c;font-size:9.5px;font-weight:650}
.visual-footer i{color:#61d9a8;font-size:16px}
.login-panel{padding:clamp(30px,5vw,66px);display:flex;align-items:center;justify-content:center;position:relative;background:linear-gradient(180deg,rgba(13,22,38,.97),rgba(8,15,27,.98));border-left:1px solid rgba(116,148,196,.13)}
.login-panel::before{content:"";position:absolute;top:0;right:0;width:230px;height:230px;background:radial-gradient(circle,rgba(124,93,240,.09),transparent 68%);pointer-events:none}
.login-content{width:100%;max-width:390px;position:relative;z-index:1}
.mobile-brand{display:none;align-items:center;gap:11px;margin-bottom:30px}
.mobile-brand img{width:48px;height:48px;object-fit:contain;padding:5px;border-radius:15px;background:#101a2b;border:1px solid rgba(91,140,255,.24)}
.mobile-brand strong{display:block;font-size:14px}.mobile-brand small{display:block;margin-top:3px;color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.12em;font-weight:700}
.login-heading{margin-bottom:30px}
.login-heading .eyebrow{display:inline-flex;align-items:center;gap:7px;color:#8fb2ff;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.14em}
.login-heading .eyebrow i{font-size:15px}
.login-heading h2{margin:10px 0 8px;font-size:31px;letter-spacing:-.045em;font-weight:800}
.login-heading p{margin:0;color:var(--muted);font-size:11.5px;line-height:1.65}
.login-error{display:flex;align-items:flex-start;gap:10px;margin-bottom:18px;padding:12px 13px;border-radius:14px;background:rgba(251,113,133,.075);border:1px solid rgba(251,113,133,.24);color:#ffa7b4;font-size:11px;font-weight:650;line-height:1.45}
.login-error i{font-size:18px;flex:none}
.field{margin-bottom:15px}
.field label{display:block;margin-bottom:7px;color:#d7e4f4;font-size:10.5px;font-weight:700}
.input-wrap{position:relative}
.input-wrap>i{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:18px;color:#7189a8;pointer-events:none;transition:color .18s ease}
.input-wrap input{width:100%;height:50px;padding:0 46px 0 43px;border:1px solid rgba(116,148,196,.18);border-radius:14px;background:#070d18;color:var(--text);outline:0;font-size:12.5px;font-weight:500;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}
.input-wrap input::placeholder{color:#546982}
.input-wrap input:hover{border-color:rgba(91,140,255,.32)}
.input-wrap input:focus{background:#08111e;border-color:var(--border-focus);box-shadow:0 0 0 4px rgba(91,140,255,.10)}
.input-wrap:focus-within>i{color:#90b2ff}
.password-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:35px;height:35px;border:0;border-radius:10px;background:transparent;color:#647b98;display:grid;place-items:center;font-size:18px;cursor:pointer;transition:.18s ease}
.password-toggle:hover{background:rgba(91,140,255,.09);color:#a9c3ff}
.login-button{width:100%;height:51px;margin-top:8px;border:1px solid rgba(151,172,255,.28);border-radius:14px;display:flex;align-items:center;justify-content:center;gap:9px;background:linear-gradient(135deg,#5b8cff,#725fe9);color:#fff;font-size:12px;font-weight:800;cursor:pointer;box-shadow:0 14px 32px rgba(67,91,210,.27);transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}
.login-button:hover{transform:translateY(-1px);box-shadow:0 19px 42px rgba(67,91,210,.34);filter:brightness(1.05)}
.login-button:active{transform:none}
.login-button:focus-visible,.password-toggle:focus-visible,.input-wrap input:focus-visible{outline:2px solid #8fabff;outline-offset:2px}
.login-note{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:20px;color:#627995;font-size:9.5px;font-weight:650}
.login-note i{font-size:15px;color:#4ecf9d}
.login-copyright{margin-top:34px;text-align:center;color:#455a73;font-size:9px}
@media(max-width:930px){
  body{padding:16px}
  .login-shell{grid-template-columns:1fr;min-height:0;max-width:530px;border-radius:26px}
  .login-visual{display:none}
  .login-panel{padding:36px 26px;border-left:0}
  .mobile-brand{display:flex}
}
@media(max-width:460px){
  body{padding:0;background:#070d18}
  body::before{display:none}
  .login-shell{min-height:100vh;border:0;border-radius:0;box-shadow:none}
  .login-panel{padding:30px 20px;background:linear-gradient(180deg,#0b1422,#070d18)}
  .login-heading h2{font-size:28px}
  .feature-list{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}