:root{
  --bg:#f5f7fb;
  --surface:#ffffff;
  --ink:#091426;
  --muted:#667085;
  --line:rgba(15,23,42,.08);
  --primary:#6d5dfb;
  --secondary:#5b8cff;
  --radius-xl:36px;
  --radius-lg:26px;
  --shadow:0 34px 90px rgba(15,23,42,.10), 0 8px 28px rgba(15,23,42,.05);
}

[data-bs-theme="dark"]{
  --bg:#071120;
  --surface:#0f1a2b;
  --ink:#f8fafc;
  --muted:#a8b3c7;
  --line:rgba(255,255,255,.09);
  --shadow:0 34px 90px rgba(0,0,0,.34), 0 8px 28px rgba(0,0,0,.18);
}

*{box-sizing:border-box}

html,body{min-height:100%}

body{
  margin:0;
  font-family:"Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at 18% 12%, rgba(109,93,251,.07), transparent 28%),
    linear-gradient(135deg, #f8faff 0%, var(--bg) 100%);
}

[data-bs-theme="dark"] body,
body:has([data-bs-theme="dark"]){
  background:
    radial-gradient(circle at 18% 12%, rgba(109,93,251,.16), transparent 28%),
    linear-gradient(135deg, #071120 0%, #0b1324 100%);
}

.auth-shell{
  min-height:100vh;
  width:100%;
  padding:0;
}

/* Brand */

.brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--ink);
  font-size:21px;
  font-weight:800;
  letter-spacing:-.055em;
  text-decoration:none;
}

.brand-mark{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:linear-gradient(135deg, rgba(109,93,251,.12), rgba(91,140,255,.12));
  color:var(--primary);
}

.brand-mark i,
.gradient-icon{
  background:linear-gradient(135deg, #6d5dfb, #5b8cff);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* Start card */

.welcome-card{
  position:relative;
  width:100%;
  min-height:100vh;
  overflow:hidden;
  border-radius:0;
  background:var(--surface);
  isolation:isolate;
}

.welcome-image{
  position:absolute;
  inset:0;
  z-index:0;
  background:url("https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?q=85&w=1800&auto=format&fit=crop") center right/cover;
}

.welcome-fade{
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(90deg, rgba(255,255,255,.99) 0%, rgba(255,255,255,.95) 28%, rgba(255,255,255,.74) 48%, rgba(255,255,255,.28) 66%, rgba(255,255,255,0) 100%);
  backdrop-filter:blur(1px);
}

[data-bs-theme="dark"] .welcome-fade{
  background:linear-gradient(90deg, rgba(15,26,43,.99) 0%, rgba(15,26,43,.95) 30%, rgba(15,26,43,.76) 50%, rgba(15,26,43,.32) 68%, rgba(15,26,43,0) 100%);
}

.welcome-glow,
.visual-glow{
  position:absolute;
  z-index:2;
  width:360px;
  height:360px;
  left:-130px;
  bottom:-150px;
  background:radial-gradient(circle, rgba(109,93,251,.12) 0%, rgba(91,140,255,.06) 34%, rgba(255,255,255,0) 72%);
  filter:blur(44px);
  pointer-events:none;
}

.welcome-content{
  position:relative;
  z-index:3;
  min-height:620px;
  width:56%;
  padding:42px 54px 52px;
  display:flex;
  flex-direction:column;
}

.topbar,
.panel-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:48px;
}

.theme-toggle{
  width:42px;
  height:42px;
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(255,255,255,.74);
  color:var(--ink);
  box-shadow:0 8px 24px rgba(15,23,42,.04);
}

[data-bs-theme="dark"] .theme-toggle{
  background:rgba(255,255,255,.06);
}

.event-badge{
  width:max-content;
  padding:14px 24px;
  border-radius:999px;
  background:#fff;
  color:var(--primary);
  font-size:20px;
  line-height:1;
  font-weight:500;
  letter-spacing:-.04em;
  box-shadow:0 8px 24px rgba(15,23,42,.05);
}

[data-bs-theme="dark"] .event-badge{
  background:rgba(255,255,255,.92);
  color:var(--primary);
}

.event-badge.small{
  font-size:14px;
  padding:10px 16px;
}

.event-badge span{
  font-weight:800;
  background:linear-gradient(135deg, #6d5dfb, #5b8cff);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

.hero-copy{
  margin-top:auto;
  margin-bottom:40px;
}

.hero-copy h1{
  margin:0;
  font-size:clamp(54px,7vw,78px);
  line-height:.94;
  letter-spacing:-.065em;
  font-weight:800;
}

.hero-copy p{
  margin:22px 0 0;
  font-size:clamp(22px,2.6vw,31px);
  line-height:1.18;
  letter-spacing:-.045em;
  font-weight:500;
  color:var(--muted);
}

.event-meta{
  display:grid;
  gap:16px;
  margin-bottom:32px;
}

.meta-item{
  display:flex;
  gap:15px;
  align-items:flex-start;
}

.meta-item i{
  margin-top:1px;
  font-size:25px;
  background:linear-gradient(135deg, #6d5dfb, #5b8cff);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

.meta-item strong{
  display:block;
  font-size:18px;
  line-height:1.12;
  letter-spacing:-.045em;
  font-weight:800;
}

.meta-item span{
  display:block;
  margin-top:5px;
  font-size:15px;
  line-height:1.2;
  color:var(--muted);
  letter-spacing:-.025em;
}

.start-actions{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

/* Buttons */

.btn{
  min-height:54px;
  border-radius:18px;
  padding:14px 22px;
  font-weight:750;
  letter-spacing:-.035em;
  border:0;
}

.btn-primary-premium{
  color:#fff;
  background:linear-gradient(135deg, #6d5dfb, #5b8cff);
  box-shadow:0 16px 36px rgba(109,93,251,.24);
}

.btn-primary-premium:hover{
  color:#fff;
  transform:translateY(-1px);
  box-shadow:0 20px 42px rgba(109,93,251,.30);
}

.btn-light-premium{
  color:var(--ink);
  background:rgba(255,255,255,.86);
  box-shadow:0 8px 24px rgba(15,23,42,.06);
}

[data-bs-theme="dark"] .btn-light-premium{
  background:rgba(255,255,255,.08);
  color:var(--ink);
}

.btn-dark-premium{
  color:#fff;
  background:#091426;
}

.btn i{font-size:20px; vertical-align:-2px}

/* Login */

.login-shell{
  padding:0;
}

.login-card{
  width:100%;
  min-height:100vh;
  display:grid;
  grid-template-columns:.92fr 1fr;
  overflow:hidden;
  border-radius:0;
  background:var(--surface);
}

.login-card.single{
  width:100%;
  display:block;
  min-height:100vh;
}

.login-visual{
  position:relative;
  min-height:680px;
  overflow:hidden;
  isolation:isolate;
}

.visual-image{
  position:absolute;
  inset:0;
  z-index:0;
  background:url("https://images.unsplash.com/photo-1518005020951-eccb494ad742?q=85&w=1600&auto=format&fit=crop") center/cover;
}

.visual-fade{
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(180deg, rgba(255,255,255,.84), rgba(255,255,255,.46) 48%, rgba(255,255,255,.92));
}

[data-bs-theme="dark"] .visual-fade{
  background:linear-gradient(180deg, rgba(15,26,43,.86), rgba(15,26,43,.44) 48%, rgba(15,26,43,.94));
}

.visual-brand{
  position:absolute;
  z-index:3;
  top:34px;
  left:34px;
}

.visual-copy{
  position:absolute;
  z-index:3;
  left:34px;
  right:34px;
  bottom:38px;
}

.visual-copy h2{
  margin:24px 0 16px;
  font-size:58px;
  line-height:.95;
  letter-spacing:-.07em;
  font-weight:800;
}

.visual-copy p{
  max-width:360px;
  margin:0;
  font-size:18px;
  line-height:1.32;
  color:var(--muted);
  letter-spacing:-.035em;
}

.login-panel{
  padding:42px 46px 38px;
}

.login-panel.full{
  padding:42px 46px 46px;
}

.back-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--muted);
  text-decoration:none;
  font-weight:700;
  letter-spacing:-.035em;
}

.login-heading{
  margin-bottom:30px;
}

.login-heading h1{
  margin:0;
  font-size:48px;
  line-height:1;
  letter-spacing:-.07em;
  font-weight:800;
}

.login-heading p{
  margin:14px 0 0;
  max-width:410px;
  font-size:17px;
  color:var(--muted);
  line-height:1.35;
  letter-spacing:-.03em;
}

.auth-form{
  display:grid;
  gap:14px;
}

.auth-form.compact{
  margin-top:14px;
}

.form-label{
  margin:0 0 -4px;
  color:var(--ink);
  font-weight:750;
  font-size:14px;
  letter-spacing:-.025em;
}

.input-wrap{
  position:relative;
}

.input-wrap i{
  position:absolute;
  top:50%;
  left:18px;
  transform:translateY(-50%);
  color:var(--muted);
  font-size:18px;
}

.form-control{
  height:58px;
  border-radius:18px;
  border:1px solid var(--line);
  padding:15px 18px 15px 48px;
  background:rgba(248,250,252,.88);
  color:var(--ink);
  font-weight:600;
  letter-spacing:-.025em;
  box-shadow:none;
}

[data-bs-theme="dark"] .form-control{
  background:rgba(255,255,255,.06);
  color:var(--ink);
}

.form-control:focus{
  border-color:rgba(109,93,251,.46);
  box-shadow:0 0 0 5px rgba(109,93,251,.10);
}

.auth-divider{
  display:flex;
  align-items:center;
  gap:14px;
  margin:28px 0 18px;
  color:var(--muted);
  font-size:13px;
  font-weight:700;
  letter-spacing:-.025em;
}

.auth-divider::before,
.auth-divider::after{
  content:"";
  height:1px;
  flex:1;
  background:var(--line);
}

.password-login{
  margin-bottom:14px;
}

.alt-login-main{
  width:100%;
  min-height:56px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:15px 18px;
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(255,255,255,.72);
  color:var(--ink);
  font-weight:750;
  letter-spacing:-.035em;
}

[data-bs-theme="dark"] .alt-login-main{
  background:rgba(255,255,255,.06);
}

.alt-login-main span{
  display:inline-flex;
  align-items:center;
  gap:10px;
}

.alt-login-main span i{
  background:linear-gradient(135deg, #6d5dfb, #5b8cff);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

.social-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}

.social-btn{
  min-height:54px;
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(255,255,255,.72);
  color:var(--ink);
  font-weight:750;
  letter-spacing:-.035em;
}

[data-bs-theme="dark"] .social-btn{
  background:rgba(255,255,255,.06);
}

.social-btn i{
  margin-right:7px;
  font-size:17px;
}

.social-btn.fb i{color:#1877f2}
.social-btn.google i{color:#ea4335}
.social-btn.ms i{color:#00a4ef}

.terms-note{
  margin:24px 0 0;
  color:var(--muted);
  font-size:13px;
  line-height:1.4;
  letter-spacing:-.02em;
}

.terms-note a{
  color:var(--primary);
  font-weight:800;
  text-decoration:none;
}

/* Responsive */

@media(max-width:860px){
  .welcome-card{
    min-height:720px;
  }

  .welcome-content{
    width:72%;
    min-height:720px;
    padding:28px 24px 30px;
  }

  .welcome-fade{
    background:linear-gradient(90deg, rgba(255,255,255,.99) 0%, rgba(255,255,255,.92) 42%, rgba(255,255,255,.35) 76%, rgba(255,255,255,.04) 100%);
  }

  [data-bs-theme="dark"] .welcome-fade{
    background:linear-gradient(90deg, rgba(15,26,43,.99) 0%, rgba(15,26,43,.92) 42%, rgba(15,26,43,.35) 76%, rgba(15,26,43,.04) 100%);
  }

  .login-card{
    grid-template-columns:1fr;
  }

  .login-visual{
    min-height:300px;
  }

  .social-grid{
    grid-template-columns:1fr;
  }
}

@media(max-width:560px){
  .auth-shell{
    padding:0;
  }

  .welcome-card,
  .login-card{
    min-height:100vh;
    border-radius:0;
  }

  .welcome-content{
    width:100%;
    min-height:100vh;
  }

  .topbar{
    margin-bottom:34px;
  }

  .brand{
    font-size:19px;
  }

  .event-badge{
    padding:10px 16px;
    font-size:13px;
  }

  .hero-copy h1{
    font-size:43px;
  }

  .hero-copy p{
    font-size:17px;
  }

  .event-meta{
    gap:13px;
  }

  .meta-item strong{
    font-size:14px;
  }

  .meta-item span{
    font-size:12px;
  }

  .start-actions{
    display:grid;
    width:100%;
  }

  .btn{
    width:100%;
  }

  .login-panel,
  .login-panel.full{
    padding:26px 22px 28px;
  }

  .login-heading h1{
    font-size:38px;
  }

  .login-heading p{
    font-size:15px;
  }

  .visual-copy h2{
    font-size:42px;
  }
}


/* VISIBLE ANIMATED BACKGROUND — INDEX */

.welcome-card{
  background:
    linear-gradient(135deg, #f8faff 0%, #eef3ff 100%);
}

.welcome-image{
  animation:heroImageDrift 18s ease-in-out infinite alternate;
  transform-origin:center right;
}

.welcome-aurora{
  position:absolute;
  inset:-25%;
  z-index:2;
  pointer-events:none;

  background:
    radial-gradient(circle at 20% 30%, rgba(109,93,251,.28), transparent 24%),
    radial-gradient(circle at 78% 26%, rgba(91,140,255,.22), transparent 22%),
    radial-gradient(circle at 52% 82%, rgba(14,165,233,.16), transparent 24%),
    radial-gradient(circle at 82% 78%, rgba(168,85,247,.14), transparent 22%);

  filter:blur(34px);
  opacity:.65;
  mix-blend-mode:multiply;

  animation:auroraMove 12s ease-in-out infinite alternate;
}

[data-bs-theme="dark"] .welcome-aurora{
  opacity:.9;
  mix-blend-mode:screen;
}

.welcome-particles{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  overflow:hidden;
}

.welcome-particles span{
  position:absolute;
  width:7px;
  height:7px;
  border-radius:999px;
  background:linear-gradient(135deg, rgba(109,93,251,.65), rgba(91,140,255,.55));
  box-shadow:0 0 22px rgba(109,93,251,.34);
  opacity:.45;

  animation:particleFloat 9s ease-in-out infinite;
}

.welcome-particles span:nth-child(1){left:58%; top:18%; animation-delay:0s}
.welcome-particles span:nth-child(2){left:76%; top:34%; animation-delay:1.1s; width:5px; height:5px}
.welcome-particles span:nth-child(3){left:88%; top:62%; animation-delay:2.2s; width:9px; height:9px}
.welcome-particles span:nth-child(4){left:64%; top:78%; animation-delay:3.3s; width:6px; height:6px}
.welcome-particles span:nth-child(5){left:46%; top:54%; animation-delay:4.4s; width:8px; height:8px}

@keyframes heroImageDrift{
  0%{
    transform:scale(1.02) translate3d(0,0,0);
  }

  100%{
    transform:scale(1.08) translate3d(-18px,8px,0);
  }
}

@keyframes auroraMove{
  0%{
    transform:translate3d(-3%, -2%, 0) rotate(0deg) scale(1);
  }

  50%{
    transform:translate3d(3%, 2%, 0) rotate(8deg) scale(1.06);
  }

  100%{
    transform:translate3d(-1%, 4%, 0) rotate(-6deg) scale(1.1);
  }
}

@keyframes particleFloat{
  0%, 100%{
    transform:translate3d(0,0,0) scale(1);
    opacity:.25;
  }

  50%{
    transform:translate3d(-28px,-34px,0) scale(1.45);
    opacity:.75;
  }
}

@media (prefers-reduced-motion: reduce){
  .welcome-image,
  .welcome-aurora,
  .welcome-particles span{
    animation:none !important;
  }
}


/* PREMIUM SCROLLBAR */

html{
  scrollbar-width:thin;
  scrollbar-color:rgba(109,93,251,.42) rgba(15,23,42,.04);
}

body::-webkit-scrollbar{
  width:10px;
}

body::-webkit-scrollbar-track{
  background:
    linear-gradient(
      180deg,
      rgba(248,250,252,.96),
      rgba(238,243,255,.96)
    );
}

body::-webkit-scrollbar-thumb{
  border:3px solid rgba(248,250,252,.96);
  border-radius:999px;
  background:
    linear-gradient(
      180deg,
      rgba(109,93,251,.68),
      rgba(91,140,255,.58)
    );
}

body::-webkit-scrollbar-thumb:hover{
  background:
    linear-gradient(
      180deg,
      rgba(109,93,251,.9),
      rgba(91,140,255,.82)
    );
}

[data-bs-theme="dark"]{
  scrollbar-color:rgba(109,93,251,.58) rgba(255,255,255,.05);
}

[data-bs-theme="dark"] body::-webkit-scrollbar-track{
  background:#071120;
}

[data-bs-theme="dark"] body::-webkit-scrollbar-thumb{
  border-color:#071120;
  background:
    linear-gradient(
      180deg,
      rgba(109,93,251,.76),
      rgba(91,140,255,.66)
    );
}

/* Scroll-friendly spacing on small heights */

@media(max-height:760px){
  .welcome-content{
    padding-top:28px;
    padding-bottom:28px;
  }

  .topbar{
    margin-bottom:28px;
  }

  .hero-copy{
    margin-bottom:24px;
  }

  .event-meta{
    margin-bottom:22px;
  }
}

@media(max-height:680px){
  .welcome-card,
  .welcome-content,
  .login-card,
  .login-visual{
    min-height:100vh;
  }

  .hero-copy h1{
    font-size:clamp(42px, 6vw, 62px);
  }

  .hero-copy p{
    font-size:clamp(17px, 2vw, 24px);
    margin-top:14px;
  }

  .event-badge{
    padding:10px 18px;
    font-size:15px;
  }

  .meta-item strong{
    font-size:15px;
  }

  .meta-item span{
    font-size:13px;
  }

  .btn{
    min-height:50px;
  }

  .login-panel{
    padding-top:28px;
    padding-bottom:28px;
  }

  .login-heading{
    margin-bottom:22px;
  }

  .login-heading h1{
    font-size:40px;
  }

  .auth-divider{
    margin:20px 0 14px;
  }
}


/* FIX: prevent white edge during animated image drift */

.welcome-image{
  inset:-8%;
  width:auto;
  height:auto;
  background-size:cover;
  background-position:center right;
  will-change:transform;
}

@keyframes heroImageDrift{
  0%{
    transform:scale(1.08) translate3d(0,0,0);
  }

  100%{
    transform:scale(1.14) translate3d(-24px,10px,0);
  }
}

@media(max-width:860px){
  .welcome-image{
    inset:-12%;
    background-position:center;
  }

  @keyframes heroImageDrift{
    0%{
      transform:scale(1.10) translate3d(0,0,0);
    }

    100%{
      transform:scale(1.18) translate3d(-18px,8px,0);
    }
  }
}


/* COMPACT HERO SPACING */

.welcome-content{
  justify-content:flex-start;
}

.event-badge{
  margin-top:42px;
  margin-bottom:26px;
}

.hero-copy{
  margin-top:0;
  margin-bottom:34px;
}

@media(max-width:560px){
  .event-badge{
    margin-top:22px;
    margin-bottom:18px;
  }

  .hero-copy{
    margin-bottom:24px;
  }
}


/* RESTORE BOTTOM HERO LAYOUT */

.welcome-content{
  justify-content:flex-end;
}

.event-badge{
  margin-top:0;
  margin-bottom:18px;
}

.hero-copy{
  margin-top:0;
  margin-bottom:28px;
}

.event-meta{
  margin-bottom:24px;
}

.start-actions{
  margin-top:0;
}

@media(max-width:560px){

  .event-badge{
    margin-bottom:14px;
  }

  .hero-copy{
    margin-bottom:20px;
  }

  .event-meta{
    margin-bottom:18px;
  }
}


/* KEEP HEADER ON TOP */

.welcome-content{
  display:flex;
  flex-direction:column;
}

.topbar{
  margin-bottom:auto;
}

.hero-copy{
  margin-top:0;
}

.hero-stack{
  margin-top:auto;
  display:flex;
  flex-direction:column;
}



/* LOGIN CLEAN HEADER */

.visual-topbar{
  position:absolute;
  z-index:4;

  top:34px;
  left:34px;
  right:34px;

  display:flex;
  align-items:center;
  justify-content:space-between;
}

.visual-brand{
  position:relative;
  top:auto;
  left:auto;
}

.visual-actions{
  display:flex;
  align-items:center;
  gap:12px;
}

.empty-header{
  display:none;
}

.visual-copy{
  bottom:46px;
}

.visual-copy h2{
  margin-top:0;
}

@media(max-width:860px){

  .visual-topbar{
    top:22px;
    left:22px;
    right:22px;
  }

  .visual-actions{
    gap:8px;
  }

  .visual-actions .back-link{
    font-size:13px;
  }
}


/* CONSISTENT AUTH PAGES */

.login-card{
  grid-template-columns:.92fr 1fr;
}

.login-panel{
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.login-heading{
  margin-bottom:28px;
}

.auth-form + .auth-divider{
  margin-top:26px;
}

.auth-switch{
  margin:16px 0 0;
  color:var(--muted);
  font-size:14px;
  line-height:1.4;
  letter-spacing:-.025em;
  text-align:center;
}

.auth-switch a{
  color:var(--primary);
  font-weight:800;
  text-decoration:none;
}

.auth-switch a:hover{
  text-decoration:underline;
}

.register-image{
  background-image:url("https://images.unsplash.com/photo-1515187029135-18ee286d815b?q=85&w=1600&auto=format&fit=crop");
}

.login-visual,
.login-panel{
  min-height:100vh;
}

.visual-copy h2{
  max-width:430px;
}

.visual-copy p{
  max-width:390px;
}

@media(max-width:860px){
  .login-card{
    grid-template-columns:1fr;
  }

  .login-visual{
    min-height:310px;
  }

  .login-panel{
    min-height:auto;
    justify-content:flex-start;
  }

  .visual-copy{
    bottom:30px;
  }
}

@media(max-width:560px){
  .login-visual{
    min-height:280px;
  }

  .login-panel{
    padding-top:28px;
  }

  .visual-topbar{
    top:20px;
    left:20px;
    right:20px;
  }

  .visual-copy{
    left:22px;
    right:22px;
    bottom:24px;
  }
}