/* ============================================================
   GIFTVAULT — LOGIN THEME  (v13)
   Đen tuyền + viền xanh dương nhạt phát sáng
   ============================================================ */

/* ---------- 1. TOKENS ---------- */

:root{
  color-scheme: dark;

  /* Nền đen */
  --bg-1:#000000;
  --bg-2:#05080e;
  --bg-3:#000000;
  --bg-glow:rgba(164,216,255,.10);
  --bg-glow-2:rgba(90,160,220,.08);
  --halo:rgba(164,216,255,.14);

  /* Chữ trắng-xanh nhạt */
  --text:#e6f2ff;
  --text-dim:#94b4d4;
  --text-mute:#5c7793;
  --placeholder:rgba(230,242,255,.22);

  /* Accent xanh dương nhạt */
  --accent:#a4d8ff;
  --accent-2:#d8ecff;
  --accent-deep:#4a9ee0;
  --accent-glow:rgba(164,216,255,.55);
  --accent-glow-soft:rgba(164,216,255,.28);
  --accent-tint:rgba(164,216,255,.08);
  --accent-line:rgba(164,216,255,.55);

  /* VIỀN — điểm nhấn chính của theme */
  --border-main:rgba(164,216,255,.55);      /* viền card, input */
  --border-strong:rgba(164,216,255,.85);    /* viền nút, focus */
  --border-soft:rgba(164,216,255,.22);      /* viền phụ, hint */

  /* Card */
  --card-bg:rgba(4,8,14,.72);
  --card-border:var(--border-main);
  --card-highlight:rgba(216,236,255,.55);
  --card-shadow:
    0 0 0 1px rgba(164,216,255,.10),
    0 0 40px -8px rgba(164,216,255,.22),
    0 30px 80px -40px rgba(0,20,50,.95),
    inset 0 0 40px -20px rgba(164,216,255,.14);

  /* Input */
  --input-bg:rgba(164,216,255,.04);
  --input-bg-focus:rgba(164,216,255,.08);
  --input-border:rgba(164,216,255,.32);
  --input-border-focus:var(--accent);

  /* Button */
  --btn-bg:linear-gradient(135deg,#d8ecff 0%,#a4d8ff 48%,#4a9ee0 100%);
  --btn-text:#001428;
  --btn-border:var(--accent);
  --btn-shadow:
    0 0 0 1px rgba(164,216,255,.65),
    0 0 26px rgba(164,216,255,.35),
    0 14px 34px -14px rgba(164,216,255,.55);

  /* Sky */
  --star:rgba(216,236,255,.92);
  --stars-opacity:.68;
  --dust:rgba(164,216,255,.85);
  --beam:rgba(164,216,255,.14);
  --horizon:rgba(74,158,224,.20);
  --fog:rgba(0,0,0,.92);

  --neb-1:rgba(50,120,200,.22);
  --neb-2:rgba(164,216,255,.16);
  --neb-3:rgba(40,100,180,.20);
  --neb-4:rgba(30,140,200,.15);
  --neb-opacity:.90;

  --mandala-1:#d8ecff;
  --mandala-2:#4a9ee0;

  --wordmark-1:#eaf5ff;
  --wordmark-2:#a4d8ff;

  /* Alerts */
  --err-bg:rgba(255,90,90,.10);
  --err-border:rgba(255,90,90,.55);
  --err-text:#ff9d94;
  --ok-bg:rgba(120,200,255,.10);
  --ok-border:rgba(164,216,255,.55);
  --ok-text:#a4d8ff;
}

/* ---------- 2. BASE ---------- */

*,*::before,*::after{ box-sizing:border-box; }

html{
  background:var(--bg-1);
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:14px;
  line-height:1.5;
  color:var(--text);
  background:var(--bg-1);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

/* ---------- 3. BACKDROP ---------- */

.backdrop{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% -10%, var(--bg-glow) 0%, transparent 58%),
    radial-gradient(110% 80% at 50% 112%, var(--bg-glow-2) 0%, transparent 62%),
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 55%, var(--bg-3) 100%);
}

.halo-behind-card{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:min(760px,130vw);
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle, var(--halo) 0%, transparent 62%);
  filter:blur(28px);
}

/* Mandala */
.mandala{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:min(1150px,160vmin);
  aspect-ratio:1;
}
.mandala svg{ display:block; width:100%; height:100%; }

#m-grad stop:first-child{ stop-color:var(--mandala-1); }
#m-grad stop:last-child{  stop-color:var(--mandala-2); }
#m-center stop:first-child{ stop-color:var(--mandala-1); }

/* Stars */
.stars{
  position:absolute;
  inset:-10%;
  background-repeat:repeat;
  opacity:var(--stars-opacity);
}
.stars-far{
  background-image:
    radial-gradient(1px 1px at 23px 41px,  var(--star) 50%, transparent 51%),
    radial-gradient(1px 1px at 137px 96px, var(--star) 50%, transparent 51%),
    radial-gradient(1px 1px at 211px 178px,var(--star) 50%, transparent 51%),
    radial-gradient(1px 1px at 305px 62px, var(--star) 50%, transparent 51%),
    radial-gradient(1px 1px at 78px 244px, var(--star) 50%, transparent 51%),
    radial-gradient(1px 1px at 268px 289px,var(--star) 50%, transparent 51%),
    radial-gradient(1px 1px at 340px 198px,var(--star) 50%, transparent 51%),
    radial-gradient(1px 1px at 165px 330px,var(--star) 50%, transparent 51%);
  background-size:360px 360px;
}
.stars-mid{
  background-image:
    radial-gradient(1px 1px at 60px 80px,  var(--star) 50%, transparent 51%),
    radial-gradient(1px 1px at 180px 40px, var(--star) 50%, transparent 51%),
    radial-gradient(1px 1px at 130px 170px,var(--star) 50%, transparent 51%),
    radial-gradient(1px 1px at 210px 120px,var(--star) 50%, transparent 51%);
  background-size:240px 240px;
  opacity:calc(var(--stars-opacity) * 1.25);
}
.stars-near{
  background-image:
    radial-gradient(2px 2px at 90px 130px,  var(--star) 50%, transparent 51%),
    radial-gradient(2px 2px at 330px 60px,  var(--star) 50%, transparent 51%),
    radial-gradient(2px 2px at 250px 330px, var(--star) 50%, transparent 51%),
    radial-gradient(2px 2px at 460px 210px, var(--star) 50%, transparent 51%);
  background-size:520px 520px;
  opacity:calc(var(--stars-opacity) * .9);
}

/* Nebulae */
.nebula{
  position:absolute;
  border-radius:50%;
  filter:blur(80px);
  opacity:var(--neb-opacity);
}
.nebula-violet{ width:560px; height:560px; left:-14%; top:-12%; background:var(--neb-1); }
.nebula-gold  { width:480px; height:480px; right:-12%; top:6%;   background:var(--neb-2); }
.nebula-indigo{ width:620px; height:620px; right:-18%; bottom:-20%; background:var(--neb-3); }
.nebula-teal  { width:520px; height:520px; left:-16%; bottom:-14%; background:var(--neb-4); }

/* Moonbeam */
.moonbeam{
  position:absolute;
  top:-30%; left:-20%;
  width:80vmax; height:80vmax;
  background:conic-gradient(from 200deg at 22% 22%,
              transparent 0deg, var(--beam) 7deg, transparent 24deg);
  filter:blur(34px);
  transform:rotate(-8deg);
}

/* Dust */
.dust{ position:absolute; inset:0; }
.dust span{
  position:absolute;
  width:2px; height:2px;
  border-radius:50%;
  background:var(--dust);
  box-shadow:0 0 8px var(--accent-glow);
  animation:dustFloat 12s ease-in-out infinite;
}
.dust span:nth-child(3n){ animation-duration:17s; }
.dust span:nth-child(3n+1){ animation-duration:9s; }
.dust span:nth-child(2n){ animation-delay:-5s; }

.dust span:nth-child(1){ left:8%;  top:22%; }
.dust span:nth-child(2){ left:18%; top:68%; }
.dust span:nth-child(3){ left:27%; top:12%; }
.dust span:nth-child(4){ left:36%; top:84%; }
.dust span:nth-child(5){ left:47%; top:32%; }
.dust span:nth-child(6){ left:55%; top:74%; }
.dust span:nth-child(7){ left:63%; top:18%; }
.dust span:nth-child(8){ left:71%; top:55%; }
.dust span:nth-child(9){ left:79%; top:88%; }
.dust span:nth-child(10){ left:86%; top:34%; }
.dust span:nth-child(11){ left:92%; top:66%; }
.dust span:nth-child(12){ left:14%; top:45%; }
.dust span:nth-child(13){ left:68%; top:8%; }
.dust span:nth-child(14){ left:41%; top:58%; }

@keyframes dustFloat{
  0%   { transform:translate3d(0,0,0);      opacity:.15; }
  50%  { opacity:.9; }
  100% { transform:translate3d(0,-26px,0);  opacity:.15; }
}

/* Horizon + Fog */
.horizon{
  position:absolute;
  left:50%; bottom:-22%;
  transform:translateX(-50%);
  width:150vmax; height:62vmax;
  border-radius:50%;
  background:radial-gradient(closest-side, var(--horizon) 0%, transparent 70%);
  filter:blur(34px);
}
.fog{
  position:absolute;
  left:0; right:0; bottom:0;
  height:38vh;
  background:linear-gradient(180deg, transparent, var(--fog));
}

/* ---------- 4. LAYOUT ---------- */

.page-main{
  position:relative;
  z-index:2;
  flex:1 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(28px,6vh,56px) 20px 28px;
}

.auth-column{
  width:100%;
  max-width:440px;
  display:flex;
  flex-direction:column;
  gap:22px;
}
.auth-column > *{
  animation:riseIn .8s cubic-bezier(.2,.7,.3,1) backwards;
}
.auth-column > *:nth-child(1){ animation-delay:.05s; }
.auth-column > *:nth-child(2){ animation-delay:.14s; }
.auth-column > *:nth-child(3){ animation-delay:.24s; }

@keyframes riseIn{
  from{ opacity:0; transform:translateY(16px); }
  to  { opacity:1; transform:none; }
}

/* ---------- 5. BRAND ---------- */

.brand-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
}
.brand-crest{
  display:inline-flex;
  padding:7px;
  border-radius:50%;
  color:var(--accent);
  border:1px solid var(--border-main);
  box-shadow:
    0 0 0 1px rgba(164,216,255,.08),
    0 0 16px var(--accent-glow-soft),
    inset 0 0 14px var(--accent-glow-soft);
  background:rgba(164,216,255,.04);
  filter:drop-shadow(0 0 8px var(--accent-glow-soft));
}
.brand-stack{ display:flex; flex-direction:column; gap:7px; }

.brand-wordmark{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:22px;
  font-weight:600;
  letter-spacing:.34em;
  text-transform:uppercase;
  padding-left:.34em;
  background:linear-gradient(180deg, var(--wordmark-1), var(--wordmark-2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 0 10px var(--accent-glow-soft));
}

.brand-tagline{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:9px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--text-mute);
}
.brand-tagline .line{
  height:1px; width:26px;
  background:linear-gradient(90deg, transparent, var(--accent-line));
}
.brand-tagline .line.right{
  background:linear-gradient(90deg, var(--accent-line), transparent);
}
.brand-tagline .dot{
  width:3px; height:3px; border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 6px var(--accent-glow);
}
.brand-tagline .label{ white-space:nowrap; }

/* ---------- 6. CARD ---------- */

.card{
  position:relative;
  border-radius:20px;
  background:var(--card-bg);
  border:1px solid var(--card-border);
  box-shadow:var(--card-shadow);
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
  overflow:hidden;
}
/* Lớp highlight trên cùng */
.card::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--card-highlight), transparent);
  opacity:.75;
}
/* Vầng sáng viền mềm */
.card::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:21px;
  pointer-events:none;
  background:
    radial-gradient(120% 60% at 50% 0%,  rgba(164,216,255,.10), transparent 60%),
    radial-gradient(120% 60% at 50% 100%,rgba(164,216,255,.08), transparent 60%);
  z-index:0;
}

.card-ornament{
  position:absolute;
  top:14px; left:50%;
  transform:translateX(-50%);
  width:200px; height:20px;
  pointer-events:none;
  opacity:1;
  z-index:1;
}
.card-ornament svg{ display:block; width:100%; height:100%; overflow:visible; }
.card-ornament svg path{
  stroke:var(--accent);
  filter:drop-shadow(0 0 3px var(--accent-glow));
}
.card-ornament svg circle{ fill:var(--accent); filter:drop-shadow(0 0 3px var(--accent-glow)); }
.card-ornament svg line{ stroke:var(--accent); opacity:.55; }
.card-ornament #o-grad stop:first-child{ stop-color:var(--accent); stop-opacity:0; }
.card-ornament #o-grad stop:last-child{  stop-color:var(--accent); stop-opacity:1; }

.card-body{
  position:relative;
  z-index:2;
  padding:44px 30px 30px;
}
.card-inner{ display:flex; flex-direction:column; }

/* ---------- 7. HEAD ---------- */

.card-head{
  text-align:center;
  margin-bottom:26px;
}
.eyebrow{
  display:inline-block;
  font-size:9.5px;
  font-weight:600;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--accent);
  background:var(--accent-tint);
  border:1px solid var(--border-main);
  border-radius:999px;
  padding:5px 13px;
  box-shadow:0 0 14px var(--accent-glow-soft), inset 0 0 8px var(--accent-glow-soft);
}
.card-head h1{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:clamp(28px,7vw,34px);
  font-weight:500;
  line-height:1.15;
  letter-spacing:.01em;
  margin:16px 0 8px;
  color:var(--text);
  text-shadow:0 0 20px rgba(164,216,255,.18);
}
.card-head p{
  margin:0;
  font-size:12.5px;
  letter-spacing:.02em;
  color:var(--text-dim);
}

/* ---------- 8. FIELD ---------- */

.field{ margin-bottom:6px; }

.field label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:9px;
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--text-dim);
}
.label-icon{
  display:inline-flex;
  color:var(--accent);
  opacity:.95;
  filter:drop-shadow(0 0 6px var(--accent-glow-soft));
}

.key-line{
  display:flex;
  align-items:center;
  gap:2px;
  padding:0 14px;
  border-radius:12px;
  background:var(--input-bg);
  border:1px solid var(--input-border);
  box-shadow:
    0 0 0 1px rgba(164,216,255,.06),
    inset 0 0 18px rgba(164,216,255,.04),
    0 0 18px rgba(164,216,255,.10);
  transition:border-color .25s, box-shadow .25s, background .25s;
}
.key-line:focus-within{
  background:var(--input-bg-focus);
  border-color:var(--input-border-focus);
  box-shadow:
    0 0 0 3px var(--accent-tint),
    0 0 0 1px var(--accent),
    0 0 32px rgba(164,216,255,.42),
    inset 0 0 20px rgba(164,216,255,.08);
}
.key-line .prefix{
  font-size:14px;
  font-weight:600;
  letter-spacing:.06em;
  color:var(--accent);
  user-select:none;
  padding-right:2px;
  text-shadow:0 0 8px var(--accent-glow-soft);
}
.key-line input{
  flex:1 1 auto;
  min-width:0;
  padding:14px 0;
  border:0;
  outline:0;
  background:transparent;
  font-family:inherit;
  font-size:15px;
  font-weight:500;
  letter-spacing:.16em;
  color:var(--text);
  caret-color:var(--accent);
}
.key-line input::placeholder{
  color:var(--placeholder);
  letter-spacing:.16em;
  font-weight:400;
}
.key-line input:-webkit-autofill{
  -webkit-text-fill-color:var(--text);
  transition:background-color 9999s ease-in-out 0s;
}

/* Error */
.key-line.invalid,
.key-line.error,
.field.has-error .key-line{
  border-color:var(--err-border);
  box-shadow:
    0 0 0 3px var(--err-bg),
    0 0 24px rgba(255,90,90,.35);
}
.shake{ animation:shake .42s cubic-bezier(.36,.07,.19,.97); }
@keyframes shake{
  10%,90%{ transform:translateX(-2px); }
  20%,80%{ transform:translateX(3px); }
  30%,50%,70%{ transform:translateX(-5px); }
  40%,60%{ transform:translateX(5px); }
}

.field-hint{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:9px;
  font-size:10.5px;
  letter-spacing:.04em;
  color:var(--text-mute);
}
.field-hint .fmt b{ color:var(--text-dim); font-weight:600; }
.field-hint .counter{
  font-variant-numeric:tabular-nums;
  color:var(--accent);
  opacity:.9;
  text-shadow:0 0 6px var(--accent-glow-soft);
}

/* ---------- 9. BUTTON ---------- */

.btn{
  position:relative;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-top:24px;
  padding:15px 18px;
  border:1px solid var(--btn-border);
  border-radius:12px;
  font-family:inherit;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--btn-text);
  background:var(--btn-bg);
  box-shadow:var(--btn-shadow);
  cursor:pointer;
  overflow:hidden;
  transition:transform .2s, filter .3s, box-shadow .3s;
}
.btn::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  transform:translateX(-130%);
  transition:transform .7s ease;
}
.btn:hover::after{ transform:translateX(130%); }
.btn:hover{
  transform:translateY(-1px);
  filter:brightness(1.05);
  box-shadow:
    0 0 0 1px var(--accent),
    0 0 40px rgba(164,216,255,.55),
    0 14px 40px -14px rgba(164,216,255,.7);
}
.btn:active{ transform:translateY(0); }
.btn:focus-visible{
  outline:2px solid var(--accent-2);
  outline-offset:3px;
}
.btn .arrow{ transition:transform .25s; }
.btn:hover .arrow{ transform:translateX(4px); }
.btn:disabled,
.btn.loading{ cursor:not-allowed; opacity:.7; transform:none; }

.loader{
  display:none;
  width:14px; height:14px;
  border-radius:50%;
  border:2px solid currentColor;
  border-top-color:transparent;
  animation:spin .7s linear infinite;
}
.btn.loading .loader,
.btn.is-loading .loader{ display:inline-block; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------- 10. ALERT ---------- */

.alert{
  margin-top:0;
  max-height:0;
  padding:0 14px;
  overflow:hidden;
  opacity:0;
  border-radius:10px;
  border:1px solid transparent;
  font-size:12px;
  line-height:1.5;
  text-align:center;
  transition:max-height .3s, opacity .3s, padding .3s, margin .3s;
}
.alert:not(:empty),
.alert.show{
  max-height:140px;
  padding:11px 14px;
  margin-top:14px;
  opacity:1;
}
.alert.error{
  color:var(--err-text);
  background:var(--err-bg);
  border-color:var(--err-border);
  box-shadow:0 0 20px rgba(255,90,90,.18);
}
.alert.success{
  color:var(--ok-text);
  background:var(--ok-bg);
  border-color:var(--ok-border);
  box-shadow:0 0 20px var(--accent-glow-soft);
}

/* ---------- 11. REGISTER ROW ---------- */

.register-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  margin-top:24px;
  font-size:12px;
  color:var(--text-mute);
}
.register-row a{
  display:inline-flex;
  align-items:center;
  gap:4px;
  color:var(--accent);
  font-weight:600;
  text-decoration:none;
  text-shadow:0 0 8px var(--accent-glow-soft);
  transition:gap .2s, opacity .2s, text-shadow .2s;
}
.register-row a:hover{
  gap:8px;
  opacity:1;
  text-shadow:0 0 14px var(--accent-glow);
}

/* ---------- 12. SECURE TAG ---------- */

.secure-tag{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  margin:0;
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--text-mute);
}
.secure-tag svg{
  color:var(--accent);
  opacity:.95;
  flex:0 0 auto;
  filter:drop-shadow(0 0 6px var(--accent-glow-soft));
}

/* ---------- 13. SEO + FOOTER ---------- */

.seo-keywords{
  position:absolute;
  width:1px; height:1px;
  margin:-1px; padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

.footer{
  position:relative;
  z-index:2;
  flex:0 0 auto;
  padding:0 20px 26px;
  text-align:center;
}
.footer-copyright{
  font-size:10.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-mute);
}
.footer-copyright .neon{
  color:var(--accent);
  text-shadow:0 0 18px var(--accent-glow);
}

/* ---------- 14. RESPONSIVE ---------- */

@media (max-width:420px){
  .card-body{ padding:40px 20px 24px; }
  .brand-wordmark{ font-size:19px; letter-spacing:.28em; padding-left:.28em; }
  .brand-tagline .line{ width:16px; }
  .brand-tagline{ font-size:8px; letter-spacing:.18em; }
  .key-line input{ font-size:14px; letter-spacing:.12em; }
}
@media (max-width:360px){
  .brand-tagline .line{ display:none; }
}

/* ---------- 15. REDUCED MOTION ---------- */

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}