/* ============ Tivex Auth Pages — Shared Styles ============ */
:root{
  --background:#08090C; --foreground:#EDEEF0;
  --ink:#0E1117; --muted:#94A2B0; --subtle:#6b7480;
  --line:rgba(255,255,255,0.12);
  --surface:rgba(255,255,255,0.05); --surface-2:rgba(255,255,255,0.09);
  --accent:#D4AF37;
  --gold1:#FBF5B7; --gold2:#E6C158; --gold3:#BF953F; --gold4:#AA771C; --gold-deep:#7a5212;
  --gold-grad:linear-gradient(135deg,#BF953F 0%,#FCF6BA 22%,#E6C158 48%,#FBF5B7 62%,#AA771C 100%);
  --gold-text:linear-gradient(180deg,#FCF6BA 0%,#E6C158 45%,#BF953F 100%);
  --danger:#ff6b6b; --success:#4ade80;
}
.gold-text{ background:var(--gold-text); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
*{ box-sizing:border-box; margin:0; padding:0; }
html{ font-size:16px; -webkit-font-smoothing:antialiased; }
body,button,a,input{ -webkit-tap-highlight-color:transparent; }
body{
  background:var(--background); color:var(--foreground);
  font-family:'Onest',sans-serif;
  min-height:100vh; overflow-x:hidden;
  cursor:none;
  position:relative;
}
@media (pointer:coarse){ body{ cursor:auto; } }
a{ color:inherit; text-decoration:none; cursor:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:none; }
@media (pointer:coarse){ button,a{ cursor:pointer; } }
ul{ list-style:none; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }

.shell{ max-width:88rem; margin-inline:auto; }
.icon{ width:1em; height:1em; display:inline-block; vertical-align:-0.125em; }

/* ===== Custom Cursor ===== */
#cursor-dot,#cursor-ring{ position:fixed; top:0; left:0; pointer-events:none; z-index:9999; will-change:transform; mix-blend-mode:screen; }
#cursor-dot{ width:8px; height:8px; border-radius:50%; background:radial-gradient(circle,#FCF6BA 0%,#E6C158 60%,transparent 100%); box-shadow:0 0 18px rgba(230,193,88,.9); transition:transform .08s linear; }
#cursor-ring{ width:42px; height:42px; border-radius:50%; border:1px solid rgba(214,175,55,.55); box-shadow:0 0 22px rgba(214,175,55,.25), inset 0 0 12px rgba(214,175,55,.15); transition:transform .18s cubic-bezier(.2,.8,.2,1), width .25s, height .25s, border-color .25s; }
body.cur-hover #cursor-ring{ width:64px; height:64px; border-color:rgba(252,246,186,.95); box-shadow:0 0 36px rgba(214,175,55,.55), inset 0 0 18px rgba(252,246,186,.25); }
body.cur-hover #cursor-dot{ transform:translate(-50%,-50%) scale(1.6); }
@media (pointer:coarse){ #cursor-dot,#cursor-ring{ display:none !important; } }

/* ===== Ambient background ===== */
.bg-layer{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.bg-layer .orb{ position:absolute; border-radius:50%; filter:blur(80px); opacity:.45; animation:floatOrb 22s ease-in-out infinite; }
.bg-layer .orb.o1{ width:520px; height:520px; background:radial-gradient(circle,#BF953F 0%,transparent 70%); top:-15%; left:-10%; }
.bg-layer .orb.o2{ width:460px; height:460px; background:radial-gradient(circle,#7a5212 0%,transparent 70%); bottom:-20%; right:-8%; animation-delay:-8s; }
.bg-layer .orb.o3{ width:380px; height:380px; background:radial-gradient(circle,#E6C158 0%,transparent 70%); top:40%; left:55%; opacity:.25; animation-delay:-14s; }
.bg-layer .grid{ position:absolute; inset:0; background-image:linear-gradient(rgba(214,175,55,.05) 1px,transparent 1px), linear-gradient(90deg,rgba(214,175,55,.05) 1px,transparent 1px); background-size:60px 60px; mask-image:radial-gradient(ellipse at center,black 30%,transparent 80%); -webkit-mask-image:radial-gradient(ellipse at center,black 30%,transparent 80%); }
@keyframes floatOrb{ 0%,100%{ transform:translate(0,0) scale(1); } 33%{ transform:translate(40px,-30px) scale(1.08); } 66%{ transform:translate(-30px,40px) scale(0.95); } }

/* ===== Header ===== */
#header{ position:fixed; inset-inline:0; top:0; z-index:50; background:rgba(8,9,12,.65); -webkit-backdrop-filter:blur(14px) saturate(140%); backdrop-filter:blur(14px) saturate(140%); border-bottom:1px solid rgba(214,175,55,.12); }
#header .bar{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:1rem 1.25rem; }
#header .brand{ display:flex; align-items:center; gap:.625rem; font-size:1.125rem; font-weight:600; letter-spacing:-.01em; }
#header .brand .logoCoin{ width:2rem; height:2rem; border-radius:50%; background:var(--gold-grad); display:grid; place-items:center; color:#241a06; font-weight:800; box-shadow:0 0 18px rgba(214,175,55,.5), inset 0 1px 2px rgba(255,255,255,.6); font-size:.875rem; animation:coinSpinY 6s linear infinite; }
@keyframes coinSpinY{ 0%{transform:rotateY(0);} 100%{transform:rotateY(360deg);} }
#header .brand .bn{ background:var(--gold-text); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; letter-spacing:.02em; }
#header nav.primary{ display:none; }
#header nav.primary ul{ display:flex; gap:2rem; font-size:.875rem; font-weight:500; }
#header nav.primary a{ opacity:.85; transition:opacity .25s, transform .25s, color .25s; position:relative; }
#header nav.primary a::after{ content:''; position:absolute; left:0; right:0; bottom:-6px; height:1px; background:var(--gold-grad); transform:scaleX(0); transform-origin:center; transition:transform .35s ease; }
#header nav.primary a:hover{ opacity:1; transform:translateY(-2px); color:var(--gold1); }
#header nav.primary a:hover::after,#header nav.primary a.active::after{ transform:scaleX(1); }
#header nav.primary a.active{ color:var(--gold1); opacity:1; }
#header .right{ display:flex; align-items:center; gap:.75rem; }
#header .menu{ border:1px solid var(--line); background:rgba(255,255,255,.05); border-radius:.875rem; transition:background .2s, border-color .2s; }
#header .menu:hover{ background:rgba(214,175,55,.1); border-color:rgba(214,175,55,.4); }
#header .menu span{ display:inline-flex; align-items:center; gap:.5rem; padding:.5rem 1rem; font-size:.75rem; font-weight:500; text-transform:uppercase; letter-spacing:.05em; }
@media (min-width:1024px){ #header nav.primary{ display:block; } #header .bar{ padding:0rem 2rem; } }

/* ===== Nav Menu Overlay ===== */
#navmenu{ position:fixed; inset:0; z-index:115; display:flex; flex-direction:column; background:radial-gradient(circle at top right,#1a1408 0%,#06070A 60%); color:#fff; opacity:0; pointer-events:none; transition:opacity .4s ease; }
#navmenu.open{ opacity:1; pointer-events:auto; }
#navmenu .top{ display:flex; align-items:center; justify-content:space-between; padding:1rem 1.25rem; max-width:88rem; margin-inline:auto; width:100%; }
#navmenu .top .b{ display:flex; align-items:center; gap:.5rem; font-size:1.125rem; font-weight:600; }
#navmenu .top .b .logoCoin{ width:2rem; height:2rem; border-radius:50%; background:var(--gold-grad); display:grid; place-items:center; color:#241a06; font-weight:800; font-size:.875rem; }
#navmenu .close{ display:inline-flex; gap:.5rem; align-items:center; border:1px solid var(--line); border-radius:.875rem; padding:.5rem 1rem; font-size:.75rem; font-weight:500; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
#navmenu .close:hover{ color:var(--gold1); border-color:rgba(214,175,55,.4); }
#navmenu nav{ flex:1; display:flex; flex-direction:column; justify-content:center; max-width:88rem; margin-inline:auto; width:100%; padding-inline:1.25rem; }
#navmenu nav ul{ display:flex; flex-direction:column; gap:.25rem; }
#navmenu nav a{ display:flex; gap:1rem; align-items:baseline; padding-block:.5rem; font-size:2.25rem; font-weight:600; letter-spacing:-.02em; transform:translateY(1rem); opacity:0; transition:all .5s ease-out; }
#navmenu.open nav a{ transform:none; opacity:1; }
#navmenu nav a .n{ font-size:1rem; font-weight:400; color:rgba(255,255,255,.3); transition:color .3s; }
#navmenu nav a .l{ color:rgba(255,255,255,.7); transition:color .3s; }
#navmenu nav a:hover .n{ color:var(--gold2); } #navmenu nav a:hover .l{ color:var(--gold1); }
@media (min-width:640px){ #navmenu .top{ padding:1.5rem 2rem; } #navmenu nav{ padding-inline:2rem; } #navmenu nav a{ font-size:3.5rem; } }

/* ===== Auth Page Layout ===== */
main.auth{ position:relative; z-index:2; min-height:100vh; display:flex; align-items:center; justify-content:center; padding:8rem 1.25rem 3rem; }
.auth-wrap{ width:100%; max-width:30rem; }
.auth-eyebrow{ display:inline-flex; align-items:center; gap:.5rem; font-size:.75rem; font-weight:500; color:var(--gold2); text-transform:uppercase; letter-spacing:.14em; margin-bottom:1rem; }
.auth-eyebrow .dot{ width:.375rem; height:.375rem; border-radius:50%; background:var(--gold2); box-shadow:0 0 8px rgba(230,193,88,.75); animation:dotPulse 2.2s ease-in-out infinite; }
@keyframes dotPulse{ 0%,100%{ box-shadow:0 0 8px rgba(230,193,88,.75); } 50%{ box-shadow:0 0 20px rgba(252,246,186,1); } }
.auth-title{ font-size:2rem; font-weight:600; letter-spacing:-.02em; line-height:1.05; margin-bottom:.75rem; }
.auth-title .gold-text{ display:inline-block; }
.auth-sub{ font-size:.9rem; color:var(--muted); margin-bottom:2rem; max-width:32ch; line-height:1.5; }

.card{ position:relative; border-radius:1.5rem; padding:2rem 1.75rem; background:rgba(255,255,255,.04); border:1px solid rgba(214,175,55,.22); -webkit-backdrop-filter:blur(14px) saturate(140%); backdrop-filter:blur(14px) saturate(140%); box-shadow:0 30px 60px rgba(0,0,0,.4), inset 0 1px 1px rgba(255,255,255,.08), 0 0 40px rgba(214,175,55,.06); overflow:hidden; animation:cardIn .8s cubic-bezier(.2,.8,.2,1) both; }
.card::before{ content:''; position:absolute; inset:0; border-radius:1.5rem; padding:1px; background:linear-gradient(135deg,rgba(214,175,55,.5),transparent 40%,transparent 60%,rgba(214,175,55,.5)); -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; opacity:.5; }
@keyframes cardIn{ from{ opacity:0; transform:translateY(24px) scale(.98); } to{ opacity:1; transform:none; } }
@media (min-width:640px){ .card{ padding:2.5rem 2.25rem; } .auth-title{ font-size:2.5rem; } }

/* ===== Form fields ===== */
.field{ margin-bottom:1.25rem; }
.field label{ display:block; font-size:.75rem; text-transform:uppercase; letter-spacing:.1em; color:var(--gold2); margin-bottom:.5rem; font-weight:500; }
.field .input-wrap{ position:relative; }
.field input{ width:100%; padding:.9rem 1rem .9rem 2.75rem; background:rgba(255,255,255,.04); border:1px solid rgba(214,175,55,.2); border-radius:.875rem; color:#fff; font-family:inherit; font-size:.95rem; transition:border-color .25s, background .25s, box-shadow .25s; }
.field input::placeholder{ color:rgba(148,162,176,.55); }
.field input:hover{ border-color:rgba(214,175,55,.4); }
.field input:focus{ outline:none; border-color:var(--gold2); background:rgba(255,255,255,.06); box-shadow:0 0 0 3px rgba(214,175,55,.15), 0 0 24px rgba(214,175,55,.15); }
.field .ic{ position:absolute; left:1rem; top:50%; transform:translateY(-50%); color:var(--gold3); font-size:1rem; pointer-events:none; }
.field .tog{ position:absolute; right:.75rem; top:50%; transform:translateY(-50%); color:var(--muted); padding:.35rem; border-radius:.5rem; transition:color .25s, background .25s; }
.field .tog:hover{ color:var(--gold1); background:rgba(214,175,55,.1); }
.field.error input{ border-color:var(--danger); box-shadow:0 0 0 3px rgba(255,107,107,.15); }
.field .err{ display:none; margin-top:.4rem; font-size:.75rem; color:var(--danger); }
.field.error .err{ display:block; animation:shake .3s ease; }
@keyframes shake{ 0%,100%{ transform:translateX(0); } 25%{ transform:translateX(-4px); } 75%{ transform:translateX(4px); } }

.row-between{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1.5rem; gap:1rem; flex-wrap:wrap; }
.check{ display:inline-flex; align-items:center; gap:.5rem; font-size:.85rem; color:var(--muted); }
.check input{ appearance:none; width:1.05rem; height:1.05rem; border:1px solid rgba(214,175,55,.4); border-radius:.3rem; background:rgba(255,255,255,.04); position:relative; transition:background .2s, border-color .2s; cursor:none; }
.check input:checked{ background:var(--gold-grad); border-color:transparent; }
.check input:checked::after{ content:''; position:absolute; left:3px; top:0; width:5px; height:9px; border:solid #241a06; border-width:0 2px 2px 0; transform:rotate(45deg); }
.link-gold{ font-size:.85rem; color:var(--gold2); transition:color .2s; }
.link-gold:hover{ color:var(--gold1); }

/* ===== Buttons ===== */
.btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.75rem; width:100%; padding:1rem 1.5rem; border-radius:9999px; font-weight:600; font-size:.95rem; letter-spacing:.01em; overflow:hidden; isolation:isolate; transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s; }
.btn:hover{ transform:translateY(-2px) scale(1.01); }
.btn:active{ transform:translateY(0) scale(.99); }
.btn.primary{ background:var(--gold-grad); background-size:200% 200%; color:#241a06; box-shadow:0 10px 30px rgba(214,175,55,.35), inset 0 1px 0 rgba(255,255,255,.55); animation:goldFlow 6s ease-in-out infinite; }
.btn.primary:hover{ box-shadow:0 14px 40px rgba(214,175,55,.5), inset 0 1px 0 rgba(255,255,255,.7); }
@keyframes goldFlow{ 0%,100%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } }
.btn.ghost{ background:rgba(255,255,255,.04); color:var(--gold1); border:1px solid rgba(214,175,55,.4); }
.btn.ghost:hover{ background:rgba(214,175,55,.1); border-color:var(--gold2); }
.btn .arrow{ display:inline-grid; place-items:center; width:1.75rem; height:1.75rem; border-radius:9999px; background:#241a06; color:var(--gold1); transition:transform .35s; }
.btn:hover .arrow{ transform:translateX(4px) rotate(-45deg); }
.btn.ghost .arrow{ background:var(--gold-grad); color:#241a06; }
.ripple{ position:absolute; border-radius:50%; transform:translate(-50%,-50%) scale(0); background:radial-gradient(circle,rgba(255,247,200,.7),rgba(255,247,200,0) 70%); pointer-events:none; animation:rippleAnim .8s ease-out forwards; z-index:0; }
@keyframes rippleAnim{ to{ transform:translate(-50%,-50%) scale(8); opacity:0; } }

.divider{ display:flex; align-items:center; gap:1rem; margin:1.5rem 0; color:var(--muted); font-size:.75rem; text-transform:uppercase; letter-spacing:.14em; }
.divider::before,.divider::after{ content:''; flex:1; height:1px; background:linear-gradient(90deg,transparent,rgba(214,175,55,.3),transparent); }

.foot-note{ margin-top:1.5rem; text-align:center; font-size:.875rem; color:var(--muted); }
.foot-note a{ color:var(--gold1); font-weight:500; transition:color .2s; }
.foot-note a:hover{ color:var(--gold2); text-decoration:underline; }

/* ===== Success / Error Layouts ===== */
.status-hero{ text-align:center; padding:1rem 0; }
.status-icon{ position:relative; width:5.5rem; height:5.5rem; margin:0 auto 1.75rem; border-radius:50%; display:grid; place-items:center; animation:iconPop .8s cubic-bezier(.2,.8,.2,1) both; }
@keyframes iconPop{ 0%{ opacity:0; transform:scale(.4) rotate(-20deg); } 60%{ transform:scale(1.08); } 100%{ opacity:1; transform:none; } }
.status-icon.ok{ background:var(--gold-grad); box-shadow:0 0 60px rgba(214,175,55,.5), inset 0 2px 4px rgba(255,255,255,.5); }
.status-icon.err{ background:linear-gradient(135deg,#5a1a1a,#a02b2b); box-shadow:0 0 60px rgba(255,107,107,.35), inset 0 2px 4px rgba(255,255,255,.15); }
.status-icon svg{ width:2.5rem; height:2.5rem; color:#241a06; filter:drop-shadow(0 1px 2px rgba(0,0,0,.2)); z-index:2; position:relative; }
.status-icon.err svg{ color:#fff; }
.status-icon::before{ content:''; position:absolute; inset:-8px; border-radius:50%; border:1px solid rgba(214,175,55,.4); animation:pulseRing 2.4s ease-in-out infinite; }
.status-icon.err::before{ border-color:rgba(255,107,107,.4); }
@keyframes pulseRing{ 0%,100%{ transform:scale(1); opacity:.6; } 50%{ transform:scale(1.15); opacity:0; } }
.status-title{ font-size:2rem; font-weight:600; letter-spacing:-.02em; line-height:1.1; margin-bottom:.75rem; }
.status-sub{ font-size:.95rem; color:var(--muted); max-width:36ch; margin:0 auto 2rem; line-height:1.55; }
.status-actions{ display:flex; flex-direction:column; gap:.75rem; }
@media (min-width:520px){ .status-actions{ flex-direction:row; justify-content:center; } .status-actions .btn{ width:auto; padding-inline:1.75rem; } }

.err-code{ font-size:6rem; font-weight:700; line-height:1; background:var(--gold-text); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; margin-bottom:.5rem; letter-spacing:-.03em; animation:codeGlitch 3s ease-in-out infinite; }
@keyframes codeGlitch{ 0%,100%{ transform:translate(0); } 45%{ transform:translate(-2px,1px); } 55%{ transform:translate(2px,-1px); } }
@media (min-width:640px){ .err-code{ font-size:8rem; } }

/* ===== Password strength meter ===== */
.strength{ display:flex; gap:.3rem; margin-top:.5rem; }
.strength i{ flex:1; height:3px; border-radius:2px; background:rgba(255,255,255,.08); transition:background .3s; }
.strength.s1 i:nth-child(1){ background:#ff6b6b; }
.strength.s2 i:nth-child(-n+2){ background:#f59e0b; }
.strength.s3 i:nth-child(-n+3){ background:#eab308; }
.strength.s4 i{ background:var(--gold-grad); }
.strength-label{ font-size:.7rem; color:var(--muted); margin-top:.35rem; letter-spacing:.05em; text-transform:uppercase; }

/* ===== Footer mini ===== */
.foot-mini{ position:relative; z-index:2; padding:2rem 1.25rem; text-align:center; font-size:.75rem; color:var(--muted); border-top:1px solid var(--line); margin-top:2rem; }
.foot-mini a{ color:var(--gold2); }
.foot-mini a:hover{ color:var(--gold1); }

/* ===== Reveal ===== */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
.reveal.in{ opacity:1; transform:none; }

/* ===== Credentials Table ===== */

.credentials-table{
  margin:1.8rem auto;
  width:100%;
  max-width:420px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(214,175,55,.25);
  border-radius:1rem;
  overflow:hidden;
  backdrop-filter:blur(12px);
  box-shadow:
    0 20px 40px rgba(0,0,0,.35),
    inset 0 1px 1px rgba(255,255,255,.08);
  animation:tableReveal .8s ease both;
}


.table-title{
  padding:1rem;
  text-align:center;
  font-size:.85rem;
  text-transform:uppercase;
  letter-spacing:.15em;
  color:var(--gold2);
  border-bottom:1px solid rgba(214,175,55,.2);
  background:rgba(214,175,55,.06);
  font-weight:600;
}


.table-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:1rem 1.25rem;
  border-bottom:1px solid rgba(255,255,255,.08);
  gap:1rem;
}


.table-row:last-child{
  border-bottom:none;
}


.table-row span{
  color:var(--muted);
  font-size:.85rem;
}


.table-row strong{
  color:var(--gold1);
  font-size:.9rem;
  font-weight:600;
  letter-spacing:.03em;
  background:linear-gradient(
    180deg,
    #FCF6BA,
    #BF953F
  );
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}


/* Hover Effect */

.table-row:hover{
  background:rgba(214,175,55,.08);
  transition:.3s ease;
}


/* Animation */

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


/* Mobile Responsive */

@media(max-width:480px){

  .credentials-table{
    margin-top:1.25rem;
  }

  .table-row{
    padding:.85rem 1rem;
    flex-direction:column;
    align-items:flex-start;
    gap:.35rem;
  }

  .table-row strong{
    font-size:.85rem;
  }

}
/* Hide by default (Desktop) */
.menu {
    display: none;
}

/* Show only on screens 768px and below */
@media (max-width: 768px) {
    .menu {
        display: flex; /* or inline-flex */
        align-items: center;
        gap: 6px;
    }
}