:root{
  --bg:radial-gradient(1200px 800px at 60% -10%, #1a1528, #0b0a13);
  --panel:rgba(255,255,255,.06);
  --panel-strong:rgba(255,255,255,.1);
  --border:rgba(255,255,255,.1);
  --text:#f7f6ff; --muted:#b9b6cc; --accent:#c4a1ff;
  --success:#ffd966; --danger:#ff5e7e;
  --radius-xl:18px; --radius-lg:14px;
  --shadow-sm:0 4px 14px rgba(0,0,0,.25);
  --shadow-md:0 10px 28px rgba(0,0,0,.35);
  --shadow-lg:0 16px 44px rgba(0,0,0,.5);
--chip-text: #1a1528;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0;color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Rounded','Segoe UI',Roboto,Helvetica,Arial,'Apple Color Emoji','Segoe UI Emoji';
  letter-spacing:.2px; overflow:hidden;
  min-height:100svh;

  /* star image ON TOP of the gradient */
  background-image: url("/img/stars.png"), var(--bg);
  background-repeat: no-repeat, no-repeat;
  background-position: 0 50%, center;
  background-size: cover, cover;
  background-attachment: fixed, fixed;
}
body::before,body::after{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none}
body::before{
  background:
    radial-gradient(2px 2px at 10% 20%,rgba(255,255,255,.6) 0,transparent 60%),
    radial-gradient(1.5px 1.5px at 30% 80%,rgba(255,217,102,.55) 0,transparent 70%),
    radial-gradient(1px 1px at 80% 40%,rgba(196,161,255,.55) 0,transparent 60%),
    radial-gradient(2px 2px at 60% 60%,rgba(255,255,255,.45) 0,transparent 70%);
  background-repeat:repeat;background-size:600px 600px;animation:drift 60s linear infinite;opacity:.55
}
body::after{
  background:radial-gradient(900px 700px at 50% 120%,rgba(196,161,255,.18),transparent 80%),
             radial-gradient(600px 420px at 80% -20%,rgba(255,217,102,.12),transparent 80%);
  mix-blend-mode:screen;animation:glow 40s ease-in-out infinite alternate;opacity:.55
}
@keyframes drift{from{background-position:0 0}to{background-position:600px 600px}}
@keyframes glow{from{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}