/*
 * dot-pattern.css
 * Shared visual background layers (dot-field, noise, vignette).
 * Extracted from auth.css so non-auth pages (onboarding, connect, etc.)
 * can share the same starry aesthetic without inheriting flex/centering.
 *
 * Usage: <link rel="stylesheet" href="/css/dot-pattern.css">
 *
 * NOTE: Sets background ON body. Page-specific stylesheets that also
 * style body (e.g. auth.css, onboarding.css) should NOT redeclare
 * background-color/image/repeat/size/attachment, or they'll override.
 */

body {
  background-color: #0d0d0d;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Ccircle cx='331' cy='61' r='0.7' fill='rgba(255,255,255,0.17)'/%3E%3Ccircle cx='381' cy='56' r='1.4' fill='rgba(255,255,255,0.14)'/%3E%3Ccircle cx='220' cy='20' r='0.7' fill='rgba(200,16,46,0.4)'/%3E%3Ccircle cx='17' cy='291' r='0.9' fill='rgba(255,255,255,0.25)'/%3E%3Ccircle cx='116' cy='233' r='1.3' fill='rgba(255,255,255,0.12)'/%3E%3Ccircle cx='85' cy='361' r='1.2' fill='rgba(255,255,255,0.17)'/%3E%3Ccircle cx='394' cy='176' r='0.8' fill='rgba(255,255,255,0.2)'/%3E%3Ccircle cx='180' cy='313' r='1.0' fill='rgba(200,16,46,0.39)'/%3E%3Ccircle cx='67' cy='197' r='0.8' fill='rgba(255,255,255,0.26)'/%3E%3Ccircle cx='189' cy='299' r='0.9' fill='rgba(200,16,46,0.45)'/%3E%3Ccircle cx='152' cy='44' r='1.6' fill='rgba(255,255,255,0.21)'/%3E%3Ccircle cx='236' cy='329' r='1.6' fill='rgba(200,16,46,0.36)'/%3E%3Ccircle cx='347' cy='140' r='1.5' fill='rgba(255,255,255,0.14)'/%3E%3Ccircle cx='329' cy='91' r='1.3' fill='rgba(200,16,46,0.39)'/%3E%3Ccircle cx='142' cy='331' r='1.5' fill='rgba(200,16,46,0.35)'/%3E%3Ccircle cx='32' cy='121' r='1.6' fill='rgba(255,255,255,0.21)'/%3E%3Ccircle cx='37' cy='112' r='1.7' fill='rgba(255,255,255,0.29)'/%3E%3Ccircle cx='112' cy='339' r='1.2' fill='rgba(255,255,255,0.27)'/%3E%3Ccircle cx='77' cy='139' r='0.9' fill='rgba(255,255,255,0.24)'/%3E%3Ccircle cx='386' cy='303' r='1.2' fill='rgba(255,255,255,0.2)'/%3E%3Ccircle cx='74' cy='264' r='1.2' fill='rgba(255,255,255,0.32)'/%3E%3Ccircle cx='82' cy='325' r='0.9' fill='rgba(255,255,255,0.26)'/%3E%3Ccircle cx='201' cy='199' r='1.4' fill='rgba(255,255,255,0.18)'/%3E%3Ccircle cx='287' cy='9' r='1.4' fill='rgba(200,16,46,0.52)'/%3E%3Ccircle cx='388' cy='140' r='1.5' fill='rgba(255,255,255,0.19)'/%3E%3Ccircle cx='84' cy='236' r='0.7' fill='rgba(255,255,255,0.29)'/%3E%3Ccircle cx='260' cy='394' r='0.9' fill='rgba(255,255,255,0.32)'/%3E%3Ccircle cx='156' cy='331' r='1.3' fill='rgba(200,16,46,0.36)'/%3E%3Ccircle cx='86' cy='280' r='1.7' fill='rgba(255,255,255,0.33)'/%3E%3Ccircle cx='310' cy='169' r='1.2' fill='rgba(200,16,46,0.36)'/%3E%3Ccircle cx='161' cy='126' r='0.8' fill='rgba(255,255,255,0.34)'/%3E%3Ccircle cx='47' cy='378' r='1.2' fill='rgba(200,16,46,0.48)'/%3E%3Ccircle cx='396' cy='68' r='0.8' fill='rgba(255,255,255,0.25)'/%3E%3Ccircle cx='139' cy='274' r='1.7' fill='rgba(255,255,255,0.17)'/%3E%3Ccircle cx='280' cy='390' r='1.5' fill='rgba(200,16,46,0.34)'/%3E%3Ccircle cx='347' cy='336' r='1.1' fill='rgba(255,255,255,0.22)'/%3E%3Ccircle cx='130' cy='119' r='0.8' fill='rgba(200,16,46,0.42)'/%3E%3Ccircle cx='305' cy='116' r='0.7' fill='rgba(255,255,255,0.13)'/%3E%3Ccircle cx='38' cy='20' r='1.6' fill='rgba(200,16,46,0.32)'/%3E%3Ccircle cx='346' cy='252' r='0.9' fill='rgba(200,16,46,0.53)'/%3E%3Ccircle cx='296' cy='299' r='1.2' fill='rgba(255,255,255,0.31)'/%3E%3Ccircle cx='101' cy='52' r='0.8' fill='rgba(255,255,255,0.22)'/%3E%3Ccircle cx='243' cy='377' r='0.8' fill='rgba(255,255,255,0.27)'/%3E%3Ccircle cx='35' cy='210' r='1.5' fill='rgba(255,255,255,0.15)'/%3E%3Ccircle cx='102' cy='101' r='1.3' fill='rgba(200,16,46,0.31)'/%3E%3Ccircle cx='240' cy='131' r='1.7' fill='rgba(200,16,46,0.49)'/%3E%3Ccircle cx='285' cy='54' r='0.8' fill='rgba(255,255,255,0.31)'/%3E%3Ccircle cx='51' cy='389' r='1.6' fill='rgba(200,16,46,0.4)'/%3E%3Ccircle cx='113' cy='209' r='1.7' fill='rgba(200,16,46,0.25)'/%3E%3Ccircle cx='203' cy='139' r='1.7' fill='rgba(255,255,255,0.19)'/%3E%3Ccircle cx='360' cy='378' r='1.8' fill='rgba(255,255,255,0.29)'/%3E%3Ccircle cx='83' cy='101' r='1.0' fill='rgba(255,255,255,0.25)'/%3E%3Ccircle cx='281' cy='35' r='1.5' fill='rgba(200,16,46,0.43)'/%3E%3Ccircle cx='261' cy='275' r='0.9' fill='rgba(255,255,255,0.14)'/%3E%3Ccircle cx='99' cy='39' r='1.4' fill='rgba(255,255,255,0.17)'/%3E%3Ccircle cx='65' cy='295' r='1.0' fill='rgba(255,255,255,0.26)'/%3E%3Ccircle cx='218' cy='340' r='1.3' fill='rgba(255,255,255,0.33)'/%3E%3Ccircle cx='108' cy='346' r='1.5' fill='rgba(200,16,46,0.37)'/%3E%3Ccircle cx='347' cy='334' r='1.0' fill='rgba(255,255,255,0.29)'/%3E%3Ccircle cx='41' cy='8' r='1.2' fill='rgba(255,255,255,0.35)'/%3E%3Ccircle cx='41' cy='279' r='0.9' fill='rgba(255,255,255,0.33)'/%3E%3Ccircle cx='39' cy='129' r='1.1' fill='rgba(200,16,46,0.5)'/%3E%3Ccircle cx='364' cy='158' r='1.4' fill='rgba(255,255,255,0.27)'/%3E%3Ccircle cx='8' cy='345' r='1.6' fill='rgba(255,255,255,0.27)'/%3E%3Ccircle cx='72' cy='139' r='0.8' fill='rgba(200,16,46,0.42)'/%3E%3Ccircle cx='143' cy='148' r='1.4' fill='rgba(255,255,255,0.17)'/%3E%3Ccircle cx='328' cy='139' r='1.3' fill='rgba(255,255,255,0.33)'/%3E%3Ccircle cx='30' cy='51' r='1.4' fill='rgba(255,255,255,0.13)'/%3E%3Ccircle cx='174' cy='70' r='1.4' fill='rgba(255,255,255,0.29)'/%3E%3Ccircle cx='286' cy='365' r='1.2' fill='rgba(200,16,46,0.27)'/%3E%3Ccircle cx='357' cy='80' r='1.3' fill='rgba(255,255,255,0.25)'/%3E%3Ccircle cx='79' cy='224' r='0.8' fill='rgba(255,255,255,0.33)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 400px 400px;
  background-attachment: fixed;
}



/* ─────────────────────────────────────────────────────────────────────────
 * Centered atmospheric glow
 * Shared across all pages that load this partial.
 * Add <div class="auth-glow"></div> right after <body> on any page to use.
 * Sits behind content (z-index 0). pointer-events:none so it never blocks clicks.
 * ───────────────────────────────────────────────────────────────────────── */