@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@100..900&display=swap');

/* ===== Base ===== */
:root{
  --bg:#070A12;
  --card: rgba(255,255,255,.06);
  --card2: rgba(255,255,255,.08);
  --stroke: rgba(255,255,255,.14);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.62);
  --shadow: 0 22px 80px rgba(0,0,0,.55);
  --pink: #ff3ea5;
  --red: #ff3b30;
  --violet:#8b5cf6;
  --cyan:#22d3ee;
  --emerald:#10b981;
}

html,body{height:100%;}
body{
  font-family: "Noto Sans Thai", "Noto Sans", sans-serif !important;
  background: var(--bg);
}

/* ===== Background mesh + glow ===== */
.bg-mesh{
  position:fixed; inset:0; z-index:-3;
  background:
    radial-gradient(1200px 800px at 15% 20%, rgba(255,62,165,.18), transparent 55%),
    radial-gradient(900px 700px at 85% 25%, rgba(34,211,238,.16), transparent 55%),
    radial-gradient(1100px 900px at 55% 85%, rgba(139,92,246,.16), transparent 60%),
    linear-gradient(180deg, #05060c 0%, #070a12 55%, #04050b 100%);
  filter:saturate(1.15);
}

.bg-glow{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
}
.bg-glow span{
  position:absolute; border-radius:999px; filter: blur(60px);
  opacity:.35; transform: translateZ(0);
  animation: floatGlow 9s ease-in-out infinite;
}
.bg-glow .g1{ width:320px; height:320px; left:10%; top:55%; background:rgba(255,62,165,.55); animation-delay:0s;}
.bg-glow .g2{ width:360px; height:360px; left:65%; top:10%; background:rgba(34,211,238,.45); animation-delay:1.2s;}
.bg-glow .g3{ width:420px; height:420px; left:50%; top:65%; background:rgba(139,92,246,.45); animation-delay:2.2s;}

@keyframes floatGlow{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(20px,-18px) scale(1.06); }
}

/* ===== Layout shell ===== */
.login-shell{align-items:stretch;}
.login-container{
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow);
}
.shine{
  position:absolute; inset:-60px -80px auto auto;
  width:320px; height:320px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.12), transparent 55%);
  transform: rotate(18deg);
  pointer-events:none;
}

/* ===== Left brand panel ===== */
.brand-panel{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(16px);
  border-radius: 18px;
  box-shadow: var(--shadow);
  overflow:hidden;
  position:relative;
}
.brand-inner{padding:26px; display:flex; flex-direction:column; height:100%; gap:18px;}
.brand-badge{display:flex; gap:12px; align-items:center;}
.badge-icon{
  width:48px; height:48px; border-radius:16px;
  display:grid; place-items:center;
  background: linear-gradient(135deg, rgba(255,59,48,.95), rgba(255,62,165,.95));
  box-shadow: 0 18px 45px rgba(255,62,165,.22);
}
.badge-icon i{font-size:18px;}
.brand-title{font-weight:900; letter-spacing:.6px; font-size:20px;}
.brand-title span{color: rgba(255,255,255,.9);}
.brand-sub{font-size:12px; color: rgba(255,255,255,.65); margin-top:2px;}
.brand-hero{margin-top:6px; display:flex; flex-direction:column; gap:12px;}
.hero-line{display:flex; align-items:flex-start; gap:10px; padding:12px; border-radius:14px;
  background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09);}
.hero-line .dot{width:10px; height:10px; border-radius:999px; margin-top:4px;
  background: linear-gradient(135deg, rgba(34,211,238,.95), rgba(139,92,246,.95));
  box-shadow: 0 0 0 4px rgba(34,211,238,.08);
}
.hero-line span{font-weight:700;}
.hero-line small{display:block; color: rgba(255,255,255,.6); margin-top:2px;}
.brand-footer{margin-top:auto;}
.mini-card{padding:12px 14px; border-radius:14px; background: rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.10);}
.mini-card-title{font-weight:800; font-size:12px;}
.mini-card-text{color: rgba(255,255,255,.65); font-size:12px; margin-top:3px;}

/* ===== Text gradient ===== */
.grad-text{
  background: linear-gradient(90deg, rgb(76, 121, 218), rgba(34,211,238,1));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ===== Inputs ===== */
.input-field{
  background: rgba(0,0,0,.26);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.input-field:focus{
  border-color: rgba(34,211,238,.45);
  box-shadow: 0 0 0 4px rgba(34,211,238,.12);
  transform: translateY(-1px);
}

/* ===== Buttons ===== */
.btn-lottery{
  background: linear-gradient(135deg, rgba(255,59,48,.95), rgba(255,62,165,.95));
  box-shadow: 0 18px 45px rgba(255,62,165,.22);
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
  border: 1px solid rgba(255,255,255,.14);
}
.btn-lottery:hover{transform: translateY(-1px); filter:saturate(1.1);}
.btn-lottery:active{transform: translateY(0px) scale(.99);}
.btn-lottery[disabled]{opacity:.7; cursor:not-allowed;}

/* ===== Divider ===== */
.divider{
  position:relative; text-align:center; margin-top:8px;
}
.divider:before{
  content:""; position:absolute; left:0; right:0; top:50%;
  height:1px; background: rgba(255,255,255,.10);
}
.divider span{
  position:relative; padding:0 12px;
  font-size:11px; color: rgba(255,255,255,.55);
  background: rgba(7,10,18,.35);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
}

/* ===== Alert ===== */
.alert-box{
  position:fixed; top:18px; left:50%; transform:translateX(-50%);
  z-index:60;
  padding:12px 14px;
  border-radius:14px;
  background: rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 55px rgba(0,0,0,.5);
}

/* ===== Toast ===== */
#toast-root{
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 70;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.toast{
  min-width: 240px;
  max-width: 320px;
  padding: 12px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
  box-shadow: 0 16px 45px rgba(0,0,0,.45);
  transform: translateY(-6px);
  opacity: 0;
  transition: transform .2s ease, opacity .2s ease;
  display:flex; align-items:center; gap:10px;
}
.toast.show{opacity:1; transform: translateY(0);}
.toast.hide{opacity:0; transform: translateY(-6px);}
.toast .dot{width:10px; height:10px; border-radius:999px;}
.toast .dot.success{background: rgba(16,185,129,1);}
.toast .dot.error{background: rgba(255,59,48,1);}
.toast .dot.info{background: rgba(34,211,238,1);}

/* ===== Lottery balls ===== */
.lottery-ball{
  position:fixed;
  width:64px; height:64px;
  border-radius:999px;
  display:grid; place-items:center;
  font-weight:900;
  color: rgba(255,255,255,.92);
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,.08) 45%, rgba(0,0,0,.22) 70%);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 22px 70px rgba(0,0,0,.4);
  backdrop-filter: blur(10px);
  z-index:-1;
  animation: floatBall 10s ease-in-out infinite;
}
.lottery-ball.b1{left:4%; top:18%; animation-delay:0s;}
.lottery-ball.b2{left:10%; top:70%; animation-delay:1.2s;}
.lottery-ball.b3{right:10%; top:22%; animation-delay:2s;}
.lottery-ball.b4{right:6%; top:72%; animation-delay:.6s;}
.lottery-ball.b5{left:50%; top:8%; transform:translateX(-50%); animation-delay:1.7s; width:58px; height:58px; opacity:.85;}

@keyframes floatBall{
  0%,100%{ transform: translateY(0) rotate(0deg); }
  50%{ transform: translateY(-14px) rotate(8deg); }
}

/* ===== Logo orb ===== */
.logo-orb{
  width:44px; height:44px; border-radius:16px;
  display:grid; place-items:center;
  background: linear-gradient(135deg, rgba(34,211,238,.95), rgba(139,92,246,.95));
  box-shadow: 0 18px 45px rgba(34,211,238,.18);
  border: 1px solid rgba(255,255,255,.14);
}

/* ===== TOTP Modal ===== */
#totpModal{align-items:center; justify-content:center;}
.totp-overlay{
  background: rgba(0,0,0,.68);
  backdrop-filter: blur(8px);
}
.totp-card{
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow);
}
.totp-close{
  position:absolute; top:14px; right:14px;
  width:38px; height:38px; border-radius:14px;
  display:grid; place-items:center;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.75);
  transition: transform .12s ease, color .12s ease;
}
.totp-close:hover{color:#fff; transform: translateY(-1px);}
.totp-icon{
  width:44px; height:44px; border-radius:16px;
  display:grid; place-items:center;
  background: linear-gradient(135deg, rgba(16,185,129,.95), rgba(34,211,238,.95));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 18px 45px rgba(16,185,129,.16);
}
.totp-onboard{
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  padding: 14px;
}
.chip{
  font-size:10px; font-weight:800;
  padding:4px 8px;
  border-radius:999px;
  background: rgba(255,62,165,.20);
  border:1px solid rgba(255,62,165,.28);
}
.qrbox{
  padding: 10px;
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  border: 1px dashed rgba(255,255,255,.18);
}
.totp-secret{
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.92);
}
.copy-btn{
  position:absolute; inset:0 0 0 auto;
  width:44px;
  display:grid; place-items:center;
  color: rgba(255,255,255,.65);
}
.copy-btn:hover{color:#fff;}
.otp-grid{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap:10px;
}
.otp-input{
  height:52px;
  border-radius: 16px;
  text-align:center;
  font-weight:900;
  font-size:18px;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.92);
  outline:none;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.otp-input:focus{
  border-color: rgba(16,185,129,.55);
  box-shadow: 0 0 0 4px rgba(16,185,129,.14);
  transform: translateY(-1px);
}
.totp-submit{
  background: linear-gradient(135deg, rgba(16,185,129,.95), rgba(34,211,238,.95));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 18px 45px rgba(16,185,129,.16);
  transition: transform .12s ease, filter .12s ease;
  color:#061015;
}
.totp-submit:hover{transform: translateY(-1px); filter:saturate(1.1);}
.totp-divider{
  height:1px;
  background: rgba(255,255,255,.10);
}

/* ===== Responsive ===== */
@media (max-width: 420px){
  .otp-grid{gap:8px;}
  .otp-input{height:48px; border-radius:14px;}
}

/* ===== FIX OTP ล้นขอบ: Responsive + ไม่ให้ช่องยืด ===== */
.otp-wrap{
  width:100%;
  display:flex;
  flex-wrap:wrap;          /* สำคัญ: ถ้าไม่พอให้ขึ้นบรรทัด */
  gap:10px;
  justify-content:center;  /* จัดกลาง */
}

.otp-wrap .otp-input{
  flex: 0 0 52px;          /* ล็อกความกว้าง ไม่ให้ยืดจนล้น */
  width:52px;
  max-width:52px;
  min-width:52px;
  height:52px;
  box-sizing:border-box;
}

/* จอเล็กมาก: ลดขนาดช่องลงนิดนึง */
@media (max-width: 420px){
  .otp-wrap{ gap:8px; }
  .otp-wrap .otp-input{
    width:48px;
    min-width:48px;
    max-width:48px;
    height:48px;
    border-radius:14px;
  }
}