/* brand-login.css — Sabong login / landing skin (OK Studios, first-pass facelift)
   Loaded LAST on login2.blade.php. Self-contained; no vendor-sheet dependency on this page. */
:root{
  --bg:#0a0c0f; --bg2:#0e1116; --surface:#15191f; --surface-2:#1b2028;
  --border:#282e37; --border-strong:#3a424d;
  --text:#eef1f5; --muted:#9aa2ad; --muted-2:#6f7883;
  --gold:#e6b23a; --gold-2:#f4ce63; --gold-ink:#1c1403;
  --ring:rgba(230,178,58,.35);
  --radius:16px; --radius-sm:11px;
  --font-head:'Montserrat',-apple-system,Segoe UI,Roboto,sans-serif;
  --font-body:'Source Sans Pro',-apple-system,Segoe UI,Roboto,sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%; max-width:100%; overflow-x:hidden}
body{
  margin:0; min-height:100vh; width:100%; color:var(--text);
  font-family:var(--font-body); font-size:16px; line-height:1.55;
  background:
    radial-gradient(1100px 560px at 50% -12%, rgba(230,178,58,.11), transparent 60%),
    radial-gradient(820px 520px at 50% 118%, rgba(230,178,58,.05), transparent 60%),
    linear-gradient(180deg,#0c0f14 0%, #08090c 100%);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  display:flex; flex-direction:column;
}
/* product shell top bar */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px clamp(16px,4vw,40px); gap:12px;
}
.topbar__brand{display:flex; align-items:center; gap:10px; font-family:var(--font-head);
  font-weight:700; letter-spacing:.14em; font-size:.72rem; text-transform:uppercase; color:var(--muted)}
.topbar__brand .dot{width:9px;height:9px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 0 4px rgba(230,178,58,.15)}
.pill{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--font-head); font-weight:600; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold-2); background:rgba(230,178,58,.08);
  border:1px solid rgba(230,178,58,.28); border-radius:999px; padding:6px 13px;
}
.pill .fas{font-size:.6rem}
/* main */
.stage{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:8px 20px 40px; width:100%; max-width:100%}
.hero{text-align:center; margin-bottom:26px; width:100%; max-width:520px}
.eyebrow, .tagline{overflow-wrap:break-word}
.logo-wrap{display:inline-block; margin-bottom:14px}
.logo-wrap img{
  width:auto; height:auto; max-width:240px; max-height:240px;
  filter:drop-shadow(0 8px 26px rgba(0,0,0,.55)) drop-shadow(0 0 22px rgba(230,178,58,.10));
}
.eyebrow{font-family:var(--font-head); font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  font-size:.7rem; color:var(--gold); margin:2px 0 8px}
.tagline{color:var(--muted); font-size:1rem; margin:0 auto; max-width:34ch}
/* card */
.card-login{
  width:100%; max-width:420px; background:linear-gradient(180deg,#171b22,#12161c);
  border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:0 24px 60px -22px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.02) inset;
  overflow:hidden;
}
.card-login__top{height:3px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.85}
.card-login__body{padding:26px 26px 24px}
.card-login h1{font-family:var(--font-head); font-weight:700; font-size:1.18rem; letter-spacing:.01em;
  margin:0 0 4px; color:var(--text)}
.card-login__sub{color:var(--muted); font-size:.9rem; margin:0 0 20px}
/* field */
.field{margin-bottom:14px}
.field label{display:block; font-family:var(--font-head); font-weight:600; font-size:.72rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:7px}
.control{
  display:flex; align-items:stretch; background:var(--surface-2);
  border:1px solid var(--border-strong); border-radius:var(--radius-sm);
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.control__icon{display:flex; align-items:center; justify-content:center; width:46px; color:var(--gold);
  font-size:.95rem; flex:none}
.control input{
  flex:1; width:100%; border:0; outline:0; background:transparent; color:var(--text);
  font-family:var(--font-body); font-size:1rem; padding:13px 14px 13px 2px;
}
.control input::placeholder{color:var(--muted-2)}
.control:focus-within{border-color:var(--gold); background:#20262f;
  box-shadow:0 0 0 3px var(--ring)}
/* button */
.btn-signin{
  display:flex; align-items:center; justify-content:center; gap:9px; width:100%;
  margin-top:6px; padding:13px 16px; cursor:pointer;
  font-family:var(--font-head); font-weight:700; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-ink); border:0; border-radius:var(--radius-sm);
  background:linear-gradient(180deg,var(--gold-2),var(--gold));
  box-shadow:0 10px 24px -10px rgba(230,178,58,.6);
  transition:transform .08s ease, filter .15s ease, box-shadow .15s ease;
}
.btn-signin:hover{filter:brightness(1.06); box-shadow:0 14px 30px -10px rgba(230,178,58,.7)}
.btn-signin:active{transform:translateY(1px)}
/* secure note */
.secure-note{display:flex; align-items:center; justify-content:center; gap:8px;
  margin-top:16px; color:var(--muted-2); font-size:.8rem}
.secure-note .fas{color:#4caf7d}
/* flash message */
.loginMessage:not(:empty){margin-bottom:16px}
.loginMessage .alert, .loginMessage .invalid-feedback, .loginMessage p{
  display:block; background:rgba(224,73,73,.12); border:1px solid rgba(224,73,73,.4);
  color:#ffb4b4; border-radius:10px; padding:10px 13px; font-size:.88rem; margin:0}
/* trust row */
.trust{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 22px;
  margin:22px auto 0; width:100%; max-width:420px}
.trust__item{display:inline-flex; align-items:center; gap:8px; color:var(--muted);
  font-size:.8rem; letter-spacing:.02em}
.trust__item .fas{color:var(--gold); font-size:.85rem}
/* footer */
.foot{text-align:center; color:var(--muted-2); font-size:.75rem; padding:20px 16px 26px}
.foot a{color:var(--muted); text-decoration:none}
/* responsive */
@media (max-width:560px){
  .topbar{padding:13px 16px}
  .topbar__brand{font-size:.66rem; letter-spacing:.1em}
  .pill{font-size:.6rem; letter-spacing:.08em; padding:5px 10px}
  .logo-wrap img{max-width:180px; max-height:180px}
  .card-login__body{padding:22px 18px 20px}
  .eyebrow{font-size:.62rem; letter-spacing:.14em}
  .tagline{font-size:.94rem}
  .trust{gap:9px 16px}
  .trust__item{font-size:.76rem}
}
@media (max-width:380px){
  .eyebrow{letter-spacing:.1em}
  .trust__item{font-size:.72rem}
}