:root{
  --bg-deep:#080d1c;
  --bg-mid:#0f1730;
  --bg-soft:#182443;
  --bg:var(--bg-deep);
  --panel:rgba(13,21,40,.82);
  --panel2:rgba(18,28,50,.76);
  --panel-soft:rgba(22,34,62,.66);
  --surface-card:linear-gradient(160deg, rgba(22,34,62,.56), rgba(14,24,46,.52));
  --surface-card-hover:linear-gradient(160deg, rgba(25,40,72,.62), rgba(16,28,54,.58));
  --surface-border:rgba(136,164,232,.18);
  --text:#e8efff;
  --muted:#a8b9d8;
  --line:rgba(136,164,232,.24);
  --accent:#84a3ff;
  --accent2:#5a7de0;
  --accent-rgb:132,163,255;
  --accent-deep-rgb:90,125,224;
  --ok:#4ade80;
  --warn:#f59e0b;
  --bad:#fb7185;
  --shadow:0 24px 50px rgba(3,8,20,.45);
  --r:16px;
  --r2:22px;
  --pad:16px;
  --pad2:22px;
  --dashboard-card-height:202px;
  --artist-grid-min: 208px;
  --video-grid-min: 224px;
  --playlist-grid-min: 216px;
  --font:"Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial;
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  position:relative;
  font-family:var(--font);
  line-height:1.45;
  color:var(--text);
  background:
    radial-gradient(1100px 820px at 12% -8%, rgba(var(--accent-deep-rgb),.34), transparent 58%),
    radial-gradient(900px 700px at 100% 10%, rgba(var(--accent-rgb),.24), transparent 60%),
    radial-gradient(960px 760px at 50% 105%, rgba(76,194,174,.14), transparent 62%),
    linear-gradient(162deg, var(--bg-soft) 0%, var(--bg-mid) 52%, var(--bg-deep) 100%);
  background-attachment: fixed;
  overflow:hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  opacity:.64;
  background: radial-gradient(120% 85% at 50% 0%, rgba(255,255,255,.06), transparent 72%);
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  opacity:.18;
  background-image:
    linear-gradient(to right, rgba(136,164,232,.1) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(136,164,232,.08) 1px, transparent 1px);
  background-size:48px 48px;
  background-repeat:repeat;
}

body::-webkit-scrollbar {
  display: none;
}

::selection{
  background:rgba(var(--accent-rgb),.28);
  color:#070d1e;
}

svg{ display:block; transition: transform .15s ease; }