:root{
  --bg:#080808; --bg-sec:#111111; --bg-card:#181818; --border:#302A1A;
  --gold:#D4AF37; --gold-light:#F3D77A; --gold-dark:#A67C00;
  --text:#F5F2E8; --text-sec:#A9A49A;
  --gold-06:rgba(212,175,55,.06); --gold-08:rgba(212,175,55,.08); --gold-10:rgba(212,175,55,.1);
  --gold-15:rgba(212,175,55,.15); --gold-25:rgba(212,175,55,.25);
  --gold-30:rgba(212,175,55,.3); --gold-12:rgba(212,175,55,.12);
  --grad-gold:linear-gradient(135deg,#D4AF37,#A67C00);
}
[data-theme="light"]{
  --bg:#F5F2E8; --bg-sec:#FFFFFF; --bg-card:#FFFFFF; --border:#E5DCC3;
  --gold:#A67C00; --gold-light:#D4AF37; --gold-dark:#8A6400;
  --text:#201A10; --text-sec:#6E6753;
  --gold-06:rgba(166,124,0,.06); --gold-08:rgba(166,124,0,.08); --gold-10:rgba(166,124,0,.1);
  --gold-15:rgba(166,124,0,.15); --gold-25:rgba(166,124,0,.25);
  --gold-30:rgba(166,124,0,.3); --gold-12:rgba(166,124,0,.12);
  --grad-gold:linear-gradient(135deg,#A67C00,#8A6400);
}
*{margin:0;padding:0;box-sizing:border-box;font-family:'Segoe UI',Arial,sans-serif}
body{min-height:100vh;display:flex;align-items:center;justify-content:center;
background:var(--bg);position:relative;overflow:hidden}
body::before{content:"";position:absolute;width:600px;height:600px;
background:radial-gradient(circle,var(--gold-08),transparent 70%);
top:-100px;right:-100px;border-radius:50%;animation:float 8s ease-in-out infinite}
body::after{content:"";position:absolute;width:500px;height:500px;
background:radial-gradient(circle,var(--gold-06),transparent 70%);
bottom:-150px;left:-100px;border-radius:50%;animation:float 10s ease-in-out infinite reverse}
.btn-tema{position:absolute;top:20px;right:20px;z-index:10;width:42px;height:42px;border-radius:12px;
border:1px solid var(--border);background:var(--bg-card);color:var(--gold);cursor:pointer;
font-size:18px;transition:.2s;display:flex;align-items:center;justify-content:center}
.btn-tema:hover{transform:scale(1.08);box-shadow:var(--gold-25)}
.btn-tema .moon{display:none}
[data-theme="light"] .btn-tema .sun{display:none}
[data-theme="light"] .btn-tema .moon{display:inline}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-30px)}}
.box{background:var(--bg-card);padding:44px 40px;border-radius:24px;width:400px;
border:1px solid var(--border);box-shadow:0 25px 60px var(--gold-12);position:relative;z-index:1;
animation:slideUp .6s ease-out}
@keyframes slideUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
.logo{text-align:center;margin-bottom:28px}
.logo img{width:80px;height:80px;border-radius:20px;object-fit:cover;
border:2px solid var(--gold-30);box-shadow:0 0 30px var(--gold-12)}
.logo h1{font-size:26px;color:var(--text);margin-top:14px;font-weight:700;letter-spacing:.3px}
.logo h1 span{color:var(--gold)}
.sub{text-align:center;color:var(--text-sec);font-size:13.5px;margin-top:4px}
label{display:block;font-size:11px;font-weight:700;color:var(--text-sec);text-transform:uppercase;
letter-spacing:.8px;margin:18px 0 6px}
input{width:100%;padding:13px 16px;border:1px solid var(--border);
border-radius:12px;font-size:15px;background:var(--bg-sec);color:var(--text);transition:.2s}
input::placeholder{color:var(--text-sec)}
input:focus{outline:none;border-color:var(--gold);
box-shadow:0 0 0 3px var(--gold-10)}
button[type=submit]{width:100%;padding:14px;margin-top:28px;
background:var(--grad-gold);color:var(--bg);border:none;
border-radius:12px;font-size:15px;font-weight:700;cursor:pointer;transition:.2s;
letter-spacing:.3px;position:relative;overflow:hidden}
button[type=submit]::before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);
transition:.5s}
button[type=submit]:hover::before{left:100%}
button[type=submit]:hover{transform:translateY(-1px);box-shadow:0 8px 25px var(--gold-25)}
button[type=submit]:active{transform:translateY(0)}
.erro{background:var(--gold-08);color:var(--gold-light);border:1px solid var(--gold-15);
padding:12px 16px;border-radius:12px;font-size:13px;margin-top:16px;text-align:center}
.whats-link{display:inline-flex;align-items:center;gap:6px;margin-top:8px;
color:var(--gold);text-decoration:none;font-weight:600;font-size:13px;transition:.2s}
.whats-link:hover{color:var(--gold-light)}

html,body{width:100%;min-width:0;overflow-x:hidden}
@media(max-width:600px){
  .box{width:calc(100% - 24px);max-width:400px;padding:30px 22px;border-radius:18px}
  .btn-tema{top:12px;right:12px}
}
@media(max-width:360px){
  .box{width:calc(100% - 16px);padding:25px 16px}
  .logo img{width:68px;height:68px}
}