:root{
  color-scheme: light dark;
  --rose:#a61e4d; --rose-600:#8e1942; --rose-300:#e9b3c6;
  --gold:#e7b75b;
  --ink:#1a1d21; --ink-soft:#4f5662;
  --bg:#fff8fb;
  --bg-soft:
    radial-gradient(1100px 520px at 10% -10%, rgba(230,167,188,.25), transparent 60%),
    radial-gradient(900px 460px at 95% 10%, rgba(231,183,91,.15), transparent 60%),
    radial-gradient(800px 420px at 10% 100%, rgba(166,30,77,.10), transparent 60%);
  --card:#ffffff; --card-border:#f1dfe6;
  --shadow:0 10px 28px rgba(166,30,77,.10);
  --shadow-strong:0 16px 44px rgba(166,30,77,.25);
  --focus:0 0 0 3px rgba(230,167,188,.55);

  --input-bg:#ffffff; --input-border:#e8d6dd; --input-text:#1a1d21;
  --link:#8e1942;
  --card-lift:-28px; /* raise the fan */
  --why-hover-bg: rgba(231,183,91,.08);
  --chip:#fff3d9;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#0f0e12;
    --bg-soft:
      radial-gradient(1200px 600px at 15% -10%, rgba(166,30,77,.18), transparent 60%),
      radial-gradient(1000px 520px at 100% 0%, rgba(231,183,91,.12), transparent 60%),
      radial-gradient(900px 460px at 5% 100%, rgba(166,30,77,.14), transparent 60%);
    --ink:#edf1f5; --ink-soft:#b9c0cd;
    --card:#17161c; --card-border:#27232d;
    --shadow:0 10px 28px rgba(0,0,0,.45);
    --shadow-strong:0 16px 44px rgba(0,0,0,.6);
    --input-bg:#14131a; --input-border:#2a2631; --input-text:#edf1f5;
    --link:#f1b9cd;
    --why-hover-bg: rgba(231,183,91,.10);
    --chip:#2a2318;
  }
}

body.theme-dark{
  --bg:#0f0e12;
  --bg-soft:
    radial-gradient(1200px 600px at 15% -10%, rgba(166,30,77,.18), transparent 60%),
    radial-gradient(1000px 520px at 100% 0%, rgba(231,183,91,.12), transparent 60%),
    radial-gradient(900px 460px at 5% 100%, rgba(166,30,77,.14), transparent 60%);
  --ink:#edf1f5; --ink-soft:#b9c0cd;
  --card:#17161c; --card-border:#27232d;
  --shadow:0 10px 28px rgba(0,0,0,.45);
  --shadow-strong:0 16px 44px rgba(0,0,0,.6);
  --input-bg:#14131a; --input-border:#2a2631; --input-text:#edf1f5;
  --link:#f1b9cd;
  --why-hover-bg: rgba(231,183,91,.10);
  --chip:#2a2318;
  background:var(--bg);
}

body.theme-light{
  --bg:#fff8fb;
  --bg-soft:
    radial-gradient(1100px 520px at 10% -10%, rgba(230,167,188,.25), transparent 60%),
    radial-gradient(900px 460px at 95% 10%, rgba(231,183,91,.15), transparent 60%),
    radial-gradient(800px 420px at 10% 100%, rgba(166,30,77,.10), transparent 60%);
  --ink:#1a1d21; --ink-soft:#4f5662;
  --card:#ffffff; --card-border:#f1dfe6;
  --shadow:0 10px 28px rgba(166,30,77,.10);
  --shadow-strong:0 16px 44px rgba(166,30,77,.25);
  --input-bg:#ffffff; --input-border:#e8d6dd; --input-text:#1a1d21;
  --link:#8e1942;
  --why-hover-bg: rgba(231,183,91,.08);
  --chip:#fff3d9;
  background:var(--bg);
}

/* ---------- Base ---------- */
html,body{height:100%;}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--ink);
  line-height:1.55;
  background-image: var(--bg-soft), url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" width="180" height="180" viewBox="0 0 180 180" opacity="0.16">\
  <g fill="none" stroke="%23e7b75b" stroke-width="1">\
    <path d="M90 32c12 22-12 42-12 42s-24-20-12-42c8-14 24-14 36 0z"/>\
  </g>\
</svg>');
  background-attachment: fixed;
  background-size: auto, 180px 180px;
  overflow-x: hidden; /* prevent accidental horizontal scroll */
}

a{color:var(--link);}
a:focus,button:focus{outline:none; box-shadow:var(--focus);}

/* ---------- Navbar ---------- */
.navbar{
  background: linear-gradient(90deg, var(--rose), #c53d73 60%, #e48bb0);
  box-shadow: 0 6px 16px rgba(166,30,77,.25);
}
.navbar-brand, .navbar .nav-link { color: #fff !important; }

.brand-sub{font-size:.8rem; opacity:.9;}
.theme-toggle{border-radius:999px; background:rgba(255,255,255,.22); color:#fff;}

/* ---------- Hero ---------- */
.hero{
  display:grid;
  grid-template-columns: 1fr minmax(420px, 560px);
  gap: clamp(18px, 4vw, 40px);
  align-items:center;
  padding: clamp(28px, 5vw, 64px) 0;
  overflow: visible; /* let the glow show fully */
}
.hero-copy h1{ font-weight:800; letter-spacing:.2px; color:var(--rose); }
.hero-copy p{color:var(--ink-soft);}
.chip{
  display:inline-block; background:var(--chip); border:1px solid rgba(231,183,91,.35);
  padding:.35rem .65rem; border-radius:999px; font-weight:600; font-size:.85rem; margin-right:.4rem;
}

/* ---------- Login card ---------- */
.auth-card{
  background:var(--card); border:1px solid var(--card-border);
  border-radius:16px; box-shadow:var(--shadow);
  padding:22px 20px; width:100%; max-width:440px;
}
.auth-card h2{font-weight:800; text-align:center; margin-bottom:14px; color:var(--rose);}
.form-label{font-weight:600; color:var(--ink);}
.form-control{
  background:var(--input-bg); border:1px solid var(--input-border); color:var(--input-text);
  border-radius:12px; padding:.8rem .95rem;
}
.btn-brand{
  background:var(--rose); border-color:var(--rose); color:#fff; font-weight:700;
  border-radius:12px; padding:.75rem 1rem; width:100%;
}
.btn-brand:hover{background:var(--rose-600); border-color:var(--rose-600);}
.divider{height:1px; background:var(--card-border); margin:12px 0;}

/* ---------- Profile fan (centered, no clipping) ---------- */
.fan{
  position:relative;
  width:100%;
  max-width:560px;         /* matches the right column */
  height:300px;
  margin-inline:auto;
}
.fan-card{
  position:absolute; top:0; left:50%;           /* anchor at center */
  width:210px; padding:14px; background:var(--card); border-radius:18px;
  border:6px solid var(--card-border);
  box-shadow: var(--shadow-strong), 0 0 24px rgba(231,183,91,.28);
  outline:3px solid rgba(231,183,91,.55);
  outline-offset:-2px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.fan-card img{width:100%; height:220px; object-fit:contain; border-radius:12px; background:#ffffff08;}

/* offsets relative to center so edges never clip */
.fan-card:nth-child(2){ --x: 0px;   --y: calc(6px  + var(--card-lift)); --rot: -2deg; }  /* center */
.fan-card:nth-child(1){ --x:-160px; --y: calc(46px + var(--card-lift)); --rot:-12deg; }  /* left */
.fan-card:nth-child(3){ --x: 160px; --y: calc(46px + var(--card-lift)); --rot: 12deg; }  /* right */

.fan-card{ transform: translate(calc(-50% + var(--x)), var(--y)) rotate(var(--rot)); }
.fan-card:hover{
  transform: translate(calc(-50% + var(--x)), calc(var(--y) - 8px)) rotate(var(--rot));
  box-shadow: var(--shadow-strong), 0 0 36px rgba(231,183,91,.4);
}

/* ---------- Why choose us ---------- */
.why-card{
  background:var(--card);
  border:1px solid var(--card-border);
  border-radius:16px;
  padding:18px;
  box-shadow:var(--shadow);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}
.why-card .desc{color:var(--ink-soft);}
.why-card:hover, .why-card:focus-within{
  transform: translateY(-6px);
  box-shadow: var(--shadow-strong);
  border-color: var(--rose);
  background: var(--why-hover-bg);
}

/* ---------- Stats ---------- */
.stat{ text-align:center; padding:12px 10px; }
.stat .num{font-weight:800; font-size:1.6rem; color:var(--rose);}
.stat .lbl{color:var(--ink-soft); font-weight:600;}

footer{color:var(--ink-soft); text-align:center; padding:26px 0; margin-top:52px;}

/* ---------- Utility helpers (optional) ---------- */
.text-rose{ color:var(--rose) !important; }
.bg-card{ background:var(--card); border:1px solid var(--card-border); box-shadow:var(--shadow); border-radius:12px; }
.rounded-pill-sm{ border-radius:999px; padding:.35rem .65rem; }

/* ---------- Responsive ---------- */
@media (max-width: 992px){
  .hero{grid-template-columns: 1fr; gap: 20px;}
  .auth-card{order:2; margin-inline:auto;}
  .hero-copy{order:1; text-align:center;}
  .fan{order:3; height:auto; display:flex; justify-content:center; gap:12px; flex-wrap:wrap; max-width:none;}
  .fan-card{position:static; transform:none!important; width:min(46%,210px);}
  .fan-card img{height:200px;}
}

@media (prefers-reduced-motion: reduce){ *{transition:none!important;} }

.toast {
    min-width: 320px;
    font-weight: 500;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    text-align: center;
}


@media (max-width: 991px) {
    .navbar .dropdown,
    .navbar #themeToggle {
        width: 100%;
    }

    .navbar .dropdown button,
    .navbar #themeToggle {
        text-align: left;
    }
}

.theme-toggle {
    white-space: nowrap;
}