:root{
  --primary: #E9190F;
  --secondary: #333333;
  --bg: #FCFBF9;
  --glass: rgba(255,255,255,.65);
}
.dark{ --bg:#0b0c10; --glass: rgba(0,0,0,.25); }
html,body{ height:100%; }
body{ background: var(--bg); }

.gradient-bg{
  background:
    radial-gradient(900px 420px at 100% 0%, rgba(233,25,15,.18), transparent 62%),
    radial-gradient(900px 420px at 0% 100%, rgba(0,0,0,.07), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0));
}
.dark .gradient-bg{
  background:
    radial-gradient(900px 420px at 100% 0%, rgba(233,25,15,.22), transparent 62%),
    radial-gradient(900px 420px at 0% 100%, rgba(255,255,255,.08), transparent 62%),
    linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,0));
}

.container-max{ max-width: 82rem; }

.glass{
  background: var(--glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.badge-dot{
  position:absolute; top:-7px; right:-7px;
  min-width:18px; height:18px;
  padding:0 6px;
  border-radius:999px;
  font-size:11px; font-weight:900;
  display:grid; place-items:center;
  color:white;
  background: var(--primary);
  border: 2px solid rgba(255,255,255,.9);
}
.dark .badge-dot{ border-color: rgba(0,0,0,.55); }

.soft-shadow{ box-shadow: 0 18px 60px rgba(0,0,0,.10); }
.card-shadow{ box-shadow: 0 12px 34px rgba(0,0,0,.08); }

.btn-primary{
  background: var(--primary);
  color:#fff;
}
.btn-secondary{
  background: var(--secondary);
  color:#fff;
}

/* nicer scrollbars (chromium) */
*::-webkit-scrollbar{ height:10px; width:10px; }
*::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.18); border-radius:999px; }
.dark *::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.14); }