/* ==========================================================================
   Stream Familiar — customer PORTAL theme.
   Layered over style.css (which keeps the admin look). Re-skins the portal to
   match streamfamiliar.com: Manrope + Space Grotesk, the aurora/starfield
   background, the familiar mascot brand, gradient pill buttons, glass panels.
   The left sidebar layout is kept intact — only the styling changes.
   ========================================================================== */

:root {
  --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Space Grotesk", var(--font-sans);
  --sf-accent: #7c5cff;
}

/* Site background: layered auroras over #0b0a14, with a faint starfield. */
body {
  background:
    radial-gradient(1100px 720px at 85% -8%, rgba(124,92,255,.22), transparent 60%),
    radial-gradient(820px 640px at 5% 112%, rgba(255,120,180,.12), transparent 55%),
    radial-gradient(760px 640px at 50% 50%, rgba(80,64,170,.16), transparent 72%),
    #0b0a14;
}
@keyframes sf-drift { from { background-position: 0 0; } to { background-position: -400px -1000px; } }
body.dash-page::before, .login-wrap::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background-image:
    radial-gradient(1.2px 1.2px at 30px 40px, #fff, transparent),
    radial-gradient(1px 1px at 140px 90px, rgba(255,255,255,.8), transparent),
    radial-gradient(1.6px 1.6px at 90px 170px, #fff, transparent),
    radial-gradient(1px 1px at 210px 130px, rgba(255,255,255,.55), transparent),
    radial-gradient(1.2px 1.2px at 260px 50px, rgba(255,255,255,.6), transparent);
  background-size: 300px 300px; background-repeat: repeat;
  animation: sf-drift 140s linear infinite;
}
/* Drifting aurora glow — the site's animated blob, so the background is alive. */
@keyframes sf-aurora { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(46px,-34px) scale(1.12); } }
body.dash-page::after, .login-wrap::after {
  content: ""; position: fixed; top: -170px; right: -140px; width: 560px; height: 560px; border-radius: 50%;
  background: radial-gradient(circle, rgba(124,92,255,.26), transparent 65%);
  filter: blur(36px); pointer-events: none; z-index: 0;
  animation: sf-aurora 22s ease-in-out infinite;
}
/* (No prefers-reduced-motion override here — the marketing site animates its
   starfield/aurora regardless, and we match it. The motion is slow + decorative.) */
/* Keep app chrome above the starfield + aurora. */
.sidebar, .dash-main, .login-wrap > * { position: relative; z-index: 1; }

/* Display face for headings + brand. */
h1, h2, h3, .card h1, .card h2, .login-card .brand { font-family: var(--font-display); letter-spacing: -.02em; }

/* -- Brand (mascot + StreamFamiliar wordmark) ----------------------------- */
.brand-mark-img { width: 30px; height: 30px; display: block; flex: none; }
.brand-name { font-family: var(--font-display); font-weight: 700; font-size: 16px; }
.brand-sub { color: #bfa9ff; font-weight: 700; }

/* -- Sidebar: glassier, matching the site nav -------------------------------- */
.sidebar { background: rgba(13,12,24,.62); border-right: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(16px); }
.nav-item.active {
  background: linear-gradient(90deg, rgba(124,92,255,.22), rgba(124,92,255,.06));
  border-color: rgba(124,92,255,.4);
}

/* -- Buttons: site gradient pill -------------------------------------------- */
button, .btn { border-radius: 12px; }
button.primary, .btn.primary, .login-card button[type="submit"] {
  background: linear-gradient(135deg, #a489ff, var(--sf-accent));
  border-color: transparent; color: #fff;
  box-shadow: 0 12px 30px -10px rgba(124,92,255,.9), inset 0 1px 0 rgba(255,255,255,.3);
}
button.primary:hover, .btn.primary:hover, .login-card button[type="submit"]:hover {
  box-shadow: 0 16px 36px -10px rgba(124,92,255,1), inset 0 1px 0 rgba(255,255,255,.3);
}

/* -- Cards: glass panels ---------------------------------------------------- */
.card {
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.1);
  background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02)), rgba(13,12,24,.45);
  box-shadow: 0 30px 80px -44px rgba(60,30,140,.7), inset 0 1px 0 rgba(255,255,255,.08);
}

/* -- Login: centered glass panel with the mascot ---------------------------- */
.login-card {
  border-radius: 22px; padding: 42px 34px;
  border: 1px solid rgba(255,255,255,.1);
  background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.025)), rgba(13,12,24,.5);
  box-shadow: 0 40px 90px -42px rgba(60,30,140,.85), inset 0 1px 0 rgba(255,255,255,.1);
}
.login-mascot { width: 66px; height: 66px; display: block; margin: 0 auto 16px; }
.login-card .brand { font-size: 1.7rem; font-weight: 800; }
.login-card .brand-sub { color: #bfa9ff; }  /* beat the base .login-card .brand-sub */

/* -- Smooth in-place page transitions (see portal-nav.js) ------------------- */
#page-content { transition: opacity .15s ease, transform .15s ease; }
#page-content.pjax-out { opacity: 0; transform: translateY(7px); }