/* =========================
   HOMMA LOGIN — PADRÃO DOURADO DARK LUXURY
   ========================= */

:root{
  --accent-gold: #d4af37;
  --accent-gold-2: #f2d27a;
  --accent-gold-3: #b8891f;
  --accent-gold-soft: #ffe9a6;
  --accent-gold-light: #fff1c7;
  --danger: #ef4444;

  --bg-1: #020202;
  --bg-2: #080705;
  --bg-3: #110d06;

  --panel-1: rgba(14, 11, 7, 0.92);
  --panel-2: rgba(5, 5, 5, 0.96);

  --text: #f7f2e8;
  --muted: #ccb57a;
  --muted2: #9d8651;

  --stroke: rgba(212,175,55,.24);
  --glass: rgba(212,175,55,.06);

  --card-radius: 28px;
  --card-max: 440px;
  --tabs-max: 320px;
  --logo-size: 170px;
}

/* reset */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html,
body{
  width:100%;
  min-height:100%;
}

html{
  background:#020202;
  scroll-behavior:smooth;
  overscroll-behavior:none;
}

body{
  min-height:100dvh;
  position:relative;
  overflow-x:hidden;
  font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color:var(--text);
  background-color:#020202;
  background-image:
    radial-gradient(1200px 760px at 12% -8%, rgba(212,175,55,.18), transparent 58%),
    radial-gradient(950px 700px at 100% 8%, rgba(255,217,102,.12), transparent 60%),
    radial-gradient(900px 600px at 50% 100%, rgba(184,137,31,.10), transparent 62%),
    linear-gradient(180deg, #040404 0%, #070604 42%, #030303 100%);
  background-repeat:no-repeat;
  background-size:cover;
  background-attachment:scroll;
}

/* brilhos dourados difusos */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.95;
  background:
    radial-gradient(circle at 8% 18%, rgba(255,210,90,.18), transparent 0 20%),
    radial-gradient(circle at 89% 12%, rgba(255,210,90,.13), transparent 0 18%),
    radial-gradient(circle at 16% 80%, rgba(255,185,60,.08), transparent 0 20%),
    radial-gradient(circle at 82% 84%, rgba(255,190,70,.08), transparent 0 18%);
}

/* estrelas fixas quentes */
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.95;
  background:
    radial-gradient(2px 2px at 2% 8%, rgba(255, 243, 199, .95), transparent 65%),
    radial-gradient(2px 2px at 6% 18%, rgba(255, 225, 140, .96), transparent 65%),
    radial-gradient(1.6px 1.6px at 10% 30%, rgba(255, 233, 168, .92), transparent 65%),
    radial-gradient(2.1px 2.1px at 16% 12%, rgba(255, 239, 192, .95), transparent 65%),
    radial-gradient(1.8px 1.8px at 21% 21%, rgba(255, 216, 120, .90), transparent 65%),
    radial-gradient(2px 2px at 26% 10%, rgba(255, 242, 201, .92), transparent 65%),
    radial-gradient(1.5px 1.5px at 31% 26%, rgba(255, 222, 135, .88), transparent 65%),
    radial-gradient(2px 2px at 39% 14%, rgba(255, 244, 204, .94), transparent 65%),
    radial-gradient(1.6px 1.6px at 47% 8%, rgba(255, 221, 126, .88), transparent 65%),
    radial-gradient(1.8px 1.8px at 52% 24%, rgba(255, 236, 184, .92), transparent 65%),
    radial-gradient(2px 2px at 61% 14%, rgba(255, 214, 108, .90), transparent 65%),
    radial-gradient(1.7px 1.7px at 68% 22%, rgba(255, 242, 198, .94), transparent 65%),
    radial-gradient(2px 2px at 76% 10%, rgba(255, 225, 132, .92), transparent 65%),
    radial-gradient(1.5px 1.5px at 84% 18%, rgba(255, 238, 178, .90), transparent 65%),
    radial-gradient(2px 2px at 90% 8%, rgba(255, 221, 117, .92), transparent 65%),
    radial-gradient(1.6px 1.6px at 96% 20%, rgba(255, 244, 205, .96), transparent 65%),

    radial-gradient(1.6px 1.6px at 5% 62%, rgba(255, 222, 132, .90), transparent 65%),
    radial-gradient(2px 2px at 12% 74%, rgba(255, 243, 202, .95), transparent 65%),
    radial-gradient(1.8px 1.8px at 18% 57%, rgba(255, 214, 102, .88), transparent 65%),
    radial-gradient(2px 2px at 24% 70%, rgba(255, 236, 179, .93), transparent 65%),
    radial-gradient(1.6px 1.6px at 32% 64%, rgba(255, 219, 115, .90), transparent 65%),
    radial-gradient(1.8px 1.8px at 42% 78%, rgba(255, 243, 204, .93), transparent 65%),
    radial-gradient(1.5px 1.5px at 51% 68%, rgba(255, 221, 121, .88), transparent 65%),
    radial-gradient(2px 2px at 58% 82%, rgba(255, 239, 190, .94), transparent 65%),
    radial-gradient(1.6px 1.6px at 66% 66%, rgba(255, 211, 99, .88), transparent 65%),
    radial-gradient(2px 2px at 73% 74%, rgba(255, 242, 200, .93), transparent 65%),
    radial-gradient(1.7px 1.7px at 81% 62%, rgba(255, 222, 124, .89), transparent 65%),
    radial-gradient(1.9px 1.9px at 88% 78%, rgba(255, 241, 197, .94), transparent 65%),
    radial-gradient(1.5px 1.5px at 95% 70%, rgba(255, 214, 108, .90), transparent 65%);
}

/* canvas/partículas */
.particle-bg,
canvas.particle-bg{
  position:fixed;
  inset:0;
  width:100vw;
  height:100dvh;
  z-index:1;
  opacity:.90;
  pointer-events:none;
  filter:
    sepia(1)
    hue-rotate(-8deg)
    saturate(2.8)
    brightness(1.15)
    contrast(1.08);
  mix-blend-mode:screen;
  display:block;
}

/* layout */
.container{
  position:relative;
  z-index:2;
  min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:38px 16px;
}

.auth-wrapper{
  width:100%;
  max-width:var(--card-max);
  margin:0 auto;
}

/* card */
.auth-card{
  width:min(92vw, var(--card-max));
  max-width:var(--card-max);
  position:relative;
  overflow:hidden;
  border-radius:var(--card-radius);
  padding:30px 24px 24px;
  background:
    linear-gradient(180deg, rgba(22,17,10,.88), rgba(6,6,6,.96));
  border:1px solid rgba(212,175,55,.32);
  box-shadow:
    0 30px 80px rgba(0,0,0,.62),
    0 0 0 1px rgba(255,224,128,.05) inset,
    0 0 28px rgba(212,175,55,.08);
  backdrop-filter:blur(18px) saturate(125%);
  -webkit-backdrop-filter:blur(18px) saturate(125%);
}

.auth-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 42%);
  opacity:.8;
}

.auth-card::after{
  content:"";
  position:absolute;
  inset:-35%;
  pointer-events:none;
  background:
    radial-gradient(60% 40% at 50% 0%, rgba(212,175,55,.13), transparent 60%);
  opacity:.75;
}

/* header */
.auth-header{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  padding-inline:56px !important;
}

/* fechar */
.close-btn{
  position:absolute;
  top:12px;
  right:12px;
  width:44px;
  height:44px;
  border:none;
  border-radius:14px;
  background:rgba(255,209,93,.06);
  border:1px solid rgba(212,175,55,.22);
  color:#f2d27a;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  cursor:pointer;
  transition:.22s ease;
  z-index:5;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.close-btn:hover{
  background:rgba(255,209,93,.12);
  border-color:rgba(255,225,145,.38);
  box-shadow:
    0 0 0 3px rgba(212,175,55,.10),
    0 0 18px rgba(212,175,55,.10);
}

/* logo */
.brand{
  width:100%;
  min-height:var(--logo-size);
  display:flex;
  align-items:center;
  justify-content:center;
}

.brand-logo{
  width:clamp(120px, 32vw, 170px) !important;
  max-width:72% !important;
  height:auto !important;
  object-fit:contain !important;
  display:block !important;
  filter:
    drop-shadow(0 0 14px rgba(212,175,55,.12))
    drop-shadow(0 0 24px rgba(212,175,55,.08));
}

.brand-text{
  display:none;
}

/* tabs */
.tab-bar{
  width:min(100%, var(--tabs-max));
  margin:0 auto;
  display:flex;
  gap:8px;
  padding:5px;
  border-radius:18px;
  border:1px solid rgba(212,175,55,.18);
  background:rgba(212,175,55,.05);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.tab{
  flex:1 1 0;
  border:none;
  outline:none;
  cursor:pointer;
  padding:.82rem 0;
  border-radius:14px;
  font-weight:800;
  font-size:1rem;
  color:#e8d8b1;
  background:transparent;
  transition:.2s ease;
  white-space:nowrap;
  text-align:center;
}

.tab:hover:not(.active){
  background:rgba(212,175,55,.08);
  color:#fff3cf;
}

.tab.active{
  color:#090909;
  background:linear-gradient(135deg, #f6dc8b, #d4af37);
  box-shadow:
    0 8px 18px rgba(212,175,55,.28),
    inset 0 1px 0 rgba(255,255,255,.22);
}

/* título */
.auth-title{
  margin:.3rem 0 1.2rem;
  text-align:center;
  font-weight:900;
  font-size:1.08rem;
  letter-spacing:.01em;
  background:linear-gradient(135deg, #fff8ea, #d4af37);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

/* mensagens */
.message{
  padding:12px 14px;
  border-radius:14px;
  margin-bottom:12px;
  font-weight:700;
  font-size:.9rem;
  border:1px solid rgba(212,175,55,.14);
  background:rgba(12,10,8,.70);
  text-align:center;
  color:#f5e7c2;
}

.message-success{
  border-color:rgba(212,175,55,.28);
  background:rgba(212,175,55,.08);
  color:#f2d27a;
}

.message-error{
  border-color:rgba(239,68,68,.35);
  background:rgba(239,68,68,.10);
  color:var(--danger);
}

/* form */
.form{
  display:none;
  opacity:0;
  transform:translateY(10px);
  transition:.25s ease;
}

.form.active{
  display:block;
  opacity:1;
  transform:translateY(0);
}

.form-group{
  margin-bottom:14px;
  position:relative;
}

.form-icon{
  position:absolute;
  left:15px;
  top:50%;
  transform:translateY(-50%);
  width:20px;
  height:20px;
  color:#bea35b;
}

/* campos */
.form-input{
  width:100%;
  height:58px;
  padding:0 1rem 0 44px;
  border-radius:16px;
  border:1px solid rgba(212,175,55,.12);
  background:rgba(255,248,235,.93);
  color:#18130a;
  font-size:1rem;
  font-weight:600;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.82),
    0 2px 0 rgba(0,0,0,.03);
  transition:.2s ease;
}

.form-input::placeholder{
  color:#9d8651;
  font-weight:600;
}

.form-input:focus{
  outline:none;
  border-color:#d4af37;
  background:#fffdf8;
  box-shadow:
    0 0 0 4px rgba(212,175,55,.16),
    0 12px 22px rgba(212,175,55,.08);
}

/* botão */
.submit-btn{
  width:100%;
  height:60px;
  border:none;
  border-radius:16px;
  overflow:hidden;
  cursor:pointer;
  background:linear-gradient(135deg, #f3d67a, #d4af37, #c99c23);
  color:#111;
  font-weight:900;
  font-size:1rem;
  letter-spacing:.01em;
  box-shadow:
    0 12px 26px rgba(212,175,55,.24),
    inset 0 1px 0 rgba(255,255,255,.22);
  transition:.22s ease;
}

.submit-btn:hover{
  transform:translateY(-2px);
  box-shadow:
    0 18px 34px rgba(212,175,55,.30),
    inset 0 1px 0 rgba(255,255,255,.22);
}

.submit-btn:active{
  transform:translateY(0);
}

/* divider */
.divider{
  display:flex;
  align-items:center;
  gap:12px;
  margin:14px 0 10px;
}

.divider-line{
  flex:1;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(212,175,55,.28), transparent);
}

.divider-text{
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.18em;
  color:#e0b93d;
  text-transform:uppercase;
}

/* footer */
.auth-footer{
  margin-top:10px;
  text-align:center;
}

.footer-note{
  color:rgba(241,228,191,.88);
  font-size:.9rem;
  line-height:1.45;
  margin-bottom:.55rem;
}

.footer-credit{
  color:rgba(214,193,139,.84);
  font-size:.78rem;
  padding-top:14px;
  border-top:1px solid rgba(212,175,55,.10);
}

.footer-credit a{
  color:#f2d27a;
  text-decoration:none;
  font-weight:800;
}

.footer-credit a:hover{
  color:#ffe39a;
}

.loading-text{
  display:none !important;
}

.tab:focus,
.form-input:focus,
.submit-btn:focus,
.close-btn:focus{
  outline:2px solid rgba(212,175,55,.70);
  outline-offset:2px;
}

@media (prefers-reduced-motion: reduce){
  *{
    transition-duration:0.01ms !important;
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
  }
}

@media (max-width:768px){
  :root{
    --logo-size:200px;
    --card-max:420px;
    --tabs-max:320px;
  }

  body{
    min-height:100svh;
    background-attachment:scroll !important;
  }

  .auth-card{
    width:min(92vw, var(--card-max));
    max-width:var(--card-max);
    border-radius:24px;
    padding:26px 20px 20px;
  }

  .auth-header{
    padding-inline:0 !important;
  }

  .close-btn{
    top:12px;
    right:12px;
    width:42px;
    height:42px;
  }

  .form-input,
  .submit-btn{
    height:56px;
  }

  .particle-bg,
  canvas.particle-bg{
    z-index:1 !important;
    pointer-events:none !important;
  }

  .container,
  .auth-wrapper,
  .auth-card{
    position:relative;
    z-index:2;
  }
}

.container{
  min-height:100vh;
}

@supports (height: 100svh){
  .container{
    min-height:100svh;
  }
}

@supports (height: 100dvh){
  body{
    min-height:100dvh;
  }

  .container{
    min-height:100dvh;
  }

  .particle-bg,
  canvas.particle-bg{
    height:100dvh;
  }
}

@supports (padding: max(0px)){
  .container{
    padding-top:max(32px, env(safe-area-inset-top));
    padding-bottom:max(32px, env(safe-area-inset-bottom));
  }
}