:root{
  --accent:#FF7A30;
  --accent-2:#ff4d6d;
  --accent-soft:rgba(255,122,48,0.12);
  --bg:#050505;
  --bg-2:#0c0c0c;
  --bg-3:#121214;
  --bg-4:#18181c;
  --card:#0b0b0d;
  --card-2:#101013;
  --text:#f0f0f5;
  --text-2:#ccccd2;
  --muted:#6a6a78;
  --muted-2:#3a3a44;
  --border:rgba(255,255,255,0.05);
  --border-2:rgba(255,255,255,0.09);
  --border-3:rgba(255,255,255,0.14);
  --green:#34d399;
  --red:#f87171;
  --font:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --auth-font:var(--font);
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --radius:18px;
  --radius-sm:12px;
  --radius-xs:9px;
  --auth-ease:cubic-bezier(.22,1,.36,1);
  --auth-ease2:cubic-bezier(.4,0,.2,1);
}

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

html{
  -webkit-text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
}

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  min-height:100vh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.55;
}

.bg-grid{
  position:fixed;inset:0;z-index:0;
  background-image:
    linear-gradient(rgba(255,122,48,0.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,122,48,0.025) 1px,transparent 1px);
  background-size:54px 54px;
  pointer-events:none;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 35%, #000 30%, transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 35%, #000 30%, transparent 80%);
}

.bg-glow-a{
  position:fixed;top:-220px;right:-180px;
  width:640px;height:640px;
  background:radial-gradient(circle,rgba(255,122,48,0.10) 0%,transparent 65%);
  pointer-events:none;z-index:0;
}

.bg-glow-b{
  position:fixed;bottom:-200px;left:-200px;
  width:540px;height:540px;
  background:radial-gradient(circle,rgba(255,77,109,0.06) 0%,transparent 65%);
  pointer-events:none;z-index:0;
}

.auth-page{
  position:relative;z-index:1;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px 18px 64px;
}

.auth-card{
  position:relative;
  width:100%;
  max-width:440px;
  background:var(--card);
  border:1px solid var(--border-2);
  border-radius:24px;
  padding:40px 34px 32px;
  box-shadow:
    0 0 0 1px rgba(255,122,48,.06),
    0 24px 64px rgba(0,0,0,.55),
    0 4px 16px rgba(0,0,0,.30);
  animation:authSlideUp .45s var(--auth-ease) both;
  overflow:hidden;
}

.auth-card::before{
  content:'';
  position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,122,48,0.55),transparent);
}

@keyframes authSlideUp{
  from{opacity:0;transform:translateY(24px) scale(.98)}
  to{opacity:1;transform:none}
}

.auth-logo-wrap{
  display:flex;flex-direction:column;align-items:center;
  margin-bottom:20px;
}

.auth-logo-ring{
  width:60px;height:60px;
  border-radius:16px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  padding:2px;
  box-shadow:0 8px 28px rgba(255,122,48,.35);
  margin-bottom:14px;
  display:flex;align-items:center;justify-content:center;
  animation:authPop .5s var(--auth-ease) .1s both;
}

.auth-logo-inner{
  width:100%;height:100%;
  border-radius:14px;
  background:var(--bg-2);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);
  font-weight:800;font-size:.85rem;
  letter-spacing:-.04em;
  color:var(--accent);
}

.auth-title{
  font-family:var(--auth-font);
  font-size:1.45rem;font-weight:800;
  letter-spacing:-.04em;text-align:center;
  margin-bottom:4px;line-height:1.2;color:var(--text);
  animation:authFadeUp .4s var(--auth-ease) .15s both;
}
.auth-title em{color:var(--accent);font-style:normal;font-weight:800}

.auth-sub{
  font-size:.82rem;color:var(--muted);
  text-align:center;line-height:1.55;
  font-family:var(--auth-font);font-weight:500;
  animation:authFadeUp .4s var(--auth-ease) .2s both;
}

@keyframes authPop{
  from{opacity:0;transform:scale(.7)}
  to{opacity:1;transform:scale(1)}
}
@keyframes authFadeUp{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}

.auth-tabs{
  display:flex;
  background:var(--bg-2);
  border:1px solid var(--border-2);
  border-radius:14px;
  padding:4px;gap:3px;
  margin:20px 0 18px;
  animation:authFadeUp .4s var(--auth-ease) .25s both;
}
.auth-tab{
  flex:1;padding:9px 12px;
  border-radius:10px;
  font-family:var(--auth-font);
  font-weight:600;font-size:.82rem;
  cursor:pointer;transition:all .22s var(--auth-ease2);
  color:var(--muted);border:none;background:none;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  text-decoration:none;
}
.auth-tab svg{opacity:.85}
.auth-tab.on{
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#0a0a0a;
  box-shadow:0 4px 14px rgba(255,122,48,.35);
}
.auth-tab.on svg{opacity:1}
.auth-tab:not(.on):hover{color:var(--text)}

.auth-divider{
  display:flex;align-items:center;gap:10px;
  margin:18px 0 14px;
}
.auth-divider span{
  font-size:.66rem;color:var(--muted-2);
  font-family:var(--mono);
  letter-spacing:.1em;white-space:nowrap;
  text-transform:uppercase;
}
.auth-divider::before,
.auth-divider::after{
  content:'';flex:1;height:1px;
  background:linear-gradient(90deg,transparent,var(--border-3),transparent);
}

.btn-google,
.btn-github{
  width:100%;padding:12px 16px;
  background:var(--bg-2);
  border:1px solid var(--border-2);
  border-radius:12px;
  font-family:var(--auth-font);
  font-weight:600;font-size:.87rem;
  cursor:pointer;color:var(--text);
  display:flex;align-items:center;justify-content:center;gap:11px;
  transition:all .22s var(--auth-ease2);
  text-decoration:none;
  margin-top:10px;
}

.btn-google{animation:authFadeUp .4s var(--auth-ease) .3s both}
.btn-github{animation:authFadeUp .4s var(--auth-ease) .35s both}

.btn-google:hover{
  background:var(--card-2);
  border-color:rgba(255,122,48,0.32);
  transform:translateY(-1px);
  box-shadow:0 6px 22px rgba(255,122,48,.12);
}

.btn-github:hover{
  background:var(--card-2);
  border-color:rgba(255,255,255,0.22);
  transform:translateY(-1px);
  box-shadow:0 6px 22px rgba(0,0,0,.35);
}

.btn-google:active,
.btn-github:active{transform:none}

.btn-google[disabled],
.btn-google.is-disabled,
.btn-github[disabled],
.btn-github.is-disabled{
  opacity:.45;cursor:not-allowed;pointer-events:none;
}

.cf-wrap{
  display:flex;justify-content:center;
  margin:16px 0 0;
  animation:authFadeUp .4s var(--auth-ease) .28s both;
}

.cf-status{
  display:flex;align-items:center;gap:7px;
  margin-top:10px;
  font-family:var(--mono);
  font-size:.66rem;letter-spacing:.08em;
  color:var(--muted);
  text-transform:uppercase;
  text-align:center;justify-content:center;
}
.cf-status.ok{color:var(--green)}
.cf-status.err{color:var(--red)}
.cf-status .dot{
  width:6px;height:6px;border-radius:50%;
  background:currentColor;
  box-shadow:0 0 0 3px rgba(255,255,255,0.04);
}

.auth-err{
  background:rgba(248,113,113,0.08);
  border:1px solid rgba(248,113,113,0.25);
  color:var(--red);
  font-family:var(--mono);
  font-size:.7rem;
  padding:9px 12px;
  border-radius:10px;
  margin-bottom:14px;
  letter-spacing:.04em;
  text-align:center;
}

.auth-foot{
  text-align:center;
  margin-top:18px;
  font-size:.76rem;color:var(--muted);
  font-family:var(--auth-font);
  animation:authFadeUp .4s var(--auth-ease) .35s both;
}
.auth-foot a{color:var(--accent);font-weight:600;text-decoration:none}
.auth-foot a:hover{text-decoration:underline}

.auth-switch{
  text-align:center;margin-top:18px;
  font-size:.8rem;color:var(--muted);
  font-family:var(--auth-font);
  animation:authFadeUp .4s var(--auth-ease) .4s both;
}
.auth-switch a{color:var(--accent);font-weight:600;text-decoration:none}
.auth-switch a:hover{text-decoration:underline}

.auth-info{
  background:rgba(255,122,48,0.05);
  border:1px solid rgba(255,122,48,0.18);
  border-radius:11px;
  padding:11px 14px;
  margin:8px 0 14px;
  font-size:.78rem;color:var(--text-2);line-height:1.55;
  font-family:var(--auth-font);
  display:flex;gap:9px;align-items:flex-start;
  animation:authFadeUp .4s var(--auth-ease) .27s both;
}
.auth-info svg{flex-shrink:0;margin-top:1px;color:var(--accent)}
.auth-info strong{color:var(--accent);font-weight:600}

@media(max-width:500px){
  .auth-card{padding:30px 22px 26px;border-radius:20px}
  .auth-logo-ring{width:54px;height:54px}
  .auth-title{font-size:1.3rem}
}