@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700;800&family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Inter:wght@400;500;600&display=swap'); :root{ --bg-0:#120c28; --bg-1:#170f33; --bg-2:#1d1440; --surface:#1e1642; --surface-2:#291c56; --border:rgba(255,255,255,.10); --border-strong:rgba(255,255,255,.20); --text-0:#fdfbff; --text-1:#c3b8e8; --text-2:#8177ab; --blue:#5b9dff; --blue-glow:#8ec1ff; --green:#4ade9a; --orange:#ffb454; --purple:#b895ff; --cyan:#3fe0d8; --red:#ff6b9d; /* ---- Custom theme (community/settings.html) ---- These are the defaults. A logged-in user's saved theme overrides them at runtime as inline styles on (see applyUserTheme() in supabase-client.js), so every page that loads supabase-client.js reflects it automatically. */ --accent:#ff6b9d; --accent-2:#b895ff; --accent-3:#3fe0d8; --accent-gradient:linear-gradient(135deg, var(--accent), var(--accent-2) 60%, var(--accent-3)); --bg-glow-1:rgba(255,107,157,.28); --bg-glow-2:rgba(63,224,216,.22); --bg-glow-3:rgba(184,149,255,.24); --page-bg-image:none; --page-bg-size:cover; --page-bg-dim:0; --ui-scale:1; --ui-saturation:1; --ui-hue:0deg; } *{box-sizing:border-box; margin:0; padding:0;} html,body{height:100%;} @media (prefers-reduced-motion: reduce){ *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;} } /* These background layers live on (not ) on purpose: carries a `filter` for the UI saturation/hue controls below, and CSS spec says any element with a filter becomes the containing block for its position:fixed descendants. If these pseudo-elements were on body, that would silently turn "fixed to the viewport" into "fixed to body's own (possibly page-tall) box", making the aurora background scroll away instead of staying pinned. Keeping them on html — an ancestor of the filtered body, not a descendant — sidesteps that entirely. */ html::before{ content:""; position:fixed; inset:-10%; background: radial-gradient(620px 520px at 8% 6%, var(--bg-glow-1), transparent 62%), radial-gradient(680px 560px at 96% 0%, var(--bg-glow-2), transparent 60%), radial-gradient(720px 620px at 50% 105%, var(--bg-glow-3), transparent 62%); filter:blur(10px); pointer-events:none; z-index:0; animation:driftGlow 16s ease-in-out infinite alternate; } /* Dims a custom background image so text stays readable; 0 = invisible. */ html::after{ content:""; position:fixed; inset:0; background:rgba(5,3,15,var(--page-bg-dim)); pointer-events:none; z-index:0; } @keyframes driftGlow{ 0%{transform:translate(0,0) scale(1);} 100%{transform:translate(1.5%,-1.5%) scale(1.04);} } body{ position:relative; z-index:1; /* stacks above html::before/::after */ background-color:var(--bg-0); background-image:var(--page-bg-image); background-size:var(--page-bg-size); background-position:center; background-attachment:fixed; background-repeat:no-repeat; color:var(--text-0); font-family:'Inter',sans-serif; min-height:100%; -webkit-font-smoothing:antialiased; overflow-x:hidden; zoom:var(--ui-scale); filter:saturate(var(--ui-saturation)) hue-rotate(var(--ui-hue)); } a{color:inherit; text-decoration:none;} :focus-visible{outline:2px solid var(--cyan); outline-offset:2px; border-radius:8px;} .wrap{max-width:960px; margin:0 auto; padding:32px 20px 80px;} .wrap.narrow{max-width:460px;} .topbar{display:flex; align-items:center; justify-content:space-between; margin-bottom:28px; flex-wrap:wrap; gap:12px;} .brand{font-family:'Baloo 2',sans-serif; font-weight:800; font-size:20px; letter-spacing:.2px;} .brand a{ background:var(--accent-gradient); -webkit-background-clip:text; background-clip:text; color:transparent; display:flex; align-items:center; gap:9px; } .brand-logo{height:32px; width:auto; display:block; border-radius:9px; filter:drop-shadow(0 3px 10px rgba(255,107,157,.35));} .topnav{display:flex; gap:8px; flex-wrap:wrap; align-items:center;} .topnav a, .btn-ghost{ padding:9px 16px; border-radius:999px; border:1px solid var(--border-strong); background:rgba(255,255,255,.05); color:var(--text-1); font-size:13.5px; font-weight:700; cursor:pointer; transition:.2s ease; } .topnav a:hover, .btn-ghost:hover{background:rgba(255,255,255,.1); color:var(--text-0); transform:translateY(-2px);} .card{ background:rgba(255,255,255,.045); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border:1px solid var(--border); border-radius:26px; padding:28px; margin-bottom:20px; } h1{font-family:'Baloo 2',sans-serif; font-weight:700; font-size:24px; margin-bottom:6px;} h2{font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:19px; margin-bottom:14px; color:var(--text-0);} .subtitle{color:var(--text-2); font-size:13.5px; margin-bottom:22px;} label{display:block; font-size:12.5px; font-weight:700; color:var(--text-1); margin:14px 0 6px; text-transform:uppercase; letter-spacing:.4px;} input, select, textarea{ width:100%; padding:12px 16px; border-radius:16px; border:1px solid var(--border); background:rgba(255,255,255,.04); color:var(--text-0); font-family:inherit; font-size:14px; transition:border-color .2s ease, background .2s ease; } input:focus, select:focus, textarea:focus{outline:none; border-color:var(--cyan); background:rgba(255,255,255,.07);} /* The closed