:root{
  --fg:#e5e9ff;
  --muted:#8a8fa7;

  --purple-glow:rgba(160,70,255,.45);
  --cyan-glow:rgba(0,229,255,.22);

  --card-bg:rgba(15,18,30,.92);
  --card-border:rgba(200,160,255,.40);
  --card-border-hover:rgba(200,160,255,.90);
}

*{box-sizing:border-box;margin:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}

body{
  color:var(--fg);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:#000;
  overflow-x:hidden;
}

/* =====================================================
   FIXED BACKGROUND LAYER
   ===================================================== */
#bg{
  position:fixed;
  inset:0;
  z-index:-3;
  background-image:url("/bg.png");
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  will-change:transform;
  transform:translateZ(0);
}

#bg::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 620px at 50% 20%, rgba(0,0,0,.25), rgba(0,0,0,.90)),
    linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.75));
}

#bg::after{
  content:"";
  position:absolute;
  inset:0;
  opacity:.08;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  background-size:220px 220px;
  mix-blend-mode:soft-light;
}

/* =====================================================
   CONTENT
   ===================================================== */
.wrap{
  max-width:960px;
  margin:0 auto;
  padding:3.5rem 1.2rem 5rem;
  position:relative;
  z-index:1;
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}

h1{
  font-size:clamp(2.4rem,4.6vw,3.3rem);
  font-weight:750;
  letter-spacing:-.02em;
}

h1 .glow{
  background:linear-gradient(90deg,#7c4dff,#00e5ff);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:
    0 0 22px rgba(124,77,255,.22),
    0 0 28px rgba(0,229,255,.12);
}

.lead{margin:.6rem 0 2rem;color:var(--muted)}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1.4rem;
}

/* Cards */
.card{
  background:var(--card-bg);
  border-radius:18px;
  padding:1.4rem;
  border:1px solid var(--card-border);
  text-decoration:none;
  color:var(--fg);
  position:relative;
  overflow:hidden;
  box-shadow:
    0 12px 26px rgba(0,0,0,.9),
    0 0 22px var(--purple-glow);
  transition:transform 150ms ease-out, box-shadow 200ms ease-out, border-color 200ms ease-out;
}

.card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:radial-gradient(520px 220px at 15% 10%, rgba(124,77,255,.18), transparent 60%);
  opacity:.6;
  pointer-events:none;
}

.card > *{position:relative;z-index:1}

.card:hover{
  transform:translateY(-2px);
  border-color:var(--card-border-hover);
  box-shadow:
    0 18px 40px rgba(0,0,0,1),
    0 0 40px var(--purple-glow),
    0 0 22px var(--cyan-glow);
}

.card-icon{font-size:1.7rem;margin-bottom:.55rem}
.card h3{margin-bottom:.25rem;font-size:1.14rem;font-weight:700}
.card p{color:rgba(138,143,167,.95)}

.need-account{
  margin-left:10px;
  color:#c693ff;
  font-size:.85rem;
  text-decoration:none;
}
.need-account:hover{text-decoration:underline}

/* Status */
.status-bar{
  margin-top:2.6rem;
  display:flex;
  gap:1.2rem;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
}

.status-item{display:inline-flex;gap:.35rem;align-items:center}
.status-dot{width:9px;height:9px;border-radius:50%;background:#555}
.status-dot.on{background:#22c55e;box-shadow:0 0 10px #22c55e}
.status-dot.warn{background:#f97316;box-shadow:0 0 10px #f97316}

/* ===== Auth button (STYLE UNCHANGED) ===== */
.auth-btn{
  appearance:none;
  border:1px solid var(--card-border);
  background:rgba(15,18,30,.55);
  color:var(--fg);
  padding:.6rem .95rem;
  border-radius:999px;
  font-weight:650;
  letter-spacing:.01em;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  box-shadow:
    0 10px 22px rgba(0,0,0,.65),
    0 0 18px rgba(160,70,255,.22);
  transition:transform 150ms ease-out, box-shadow 200ms ease-out, border-color 200ms ease-out;

  /* ✅ FIX: DO NOT HIDE BY DEFAULT */
  visibility:visible;
}

.auth-btn:hover{
  transform:translateY(-1px);
  border-color:var(--card-border-hover);
  box-shadow:
    0 16px 34px rgba(0,0,0,.85),
    0 0 28px var(--purple-glow),
    0 0 16px var(--cyan-glow);
}

.auth-btn .dot{
  width:8px;height:8px;border-radius:50%;
  background:#555;
}
.auth-btn.logged-in .dot{
  background:#22c55e;
  box-shadow:0 0 10px #22c55e;
}
.auth-btn.logged-out .dot{
  background:#f97316;
  box-shadow:0 0 10px #f97316;
}

/* Private cards control (unchanged) */
html[data-auth="out"] #private-cards{ display:none; }
html[data-auth="in"]  #private-cards{ display:contents; }
html:not([data-auth]) #private-cards{ display:none; }