/* =====================================================================
   M-PERKS — GALAXY THEME
   Employee Gamification, Points & Rewards System

   A premium enterprise HR gamification platform set inside a futuristic
   galaxy. Dark-theme first. The cosmic quality comes from the environment
   — depth, glow, glass — never from decorative typography or clutter.

   CONTENTS
     01  Design tokens
     02  Reset & base
     03  Galaxy background
     04  App shell (sidebar / topbar / content)
     05  Galaxy glass cards
     06  Galaxy stat cards
     07  Cosmic points hero
     08  Galaxy buttons
     09  Galaxy badges & status
     10  Points, stars & counters
     11  Tables
     12  Forms & filters
     13  Mission (task) cards
     14  Reward galaxy cards
     15  Leaderboard & podium
     16  Cosmic timeline (points history)
     17  Progress bars
     18  Alerts & empty states
     19  Toasts
     20  Modals & celebration
     21  Pagination
     22  Notifications
     23  ESS quick tile
     24  Login
     25  Utilities
     26  Responsive
     27  Print
     28  Reduced motion & accessibility
   ===================================================================== */


/* =====================================================================
   01  DESIGN TOKENS
   ===================================================================== */
:root {
  /* --- Deep space backgrounds --- */
  --space-900: #050816;
  --space-800: #080B1F;
  --space-700: #0B1026;
  --space-600: #11162F;
  --space-500: #171D3D;
  --space-400: #1F2749;

  /* --- Cosmic purple --- */
  --purple-700: #6D28D9;
  --purple-600: #7C3AED;
  --purple-500: #8B5CF6;
  --purple-400: #A78BFA;
  --purple-300: #C4B5FD;

  /* --- Cosmic blue --- */
  --blue-700: #1D4ED8;
  --blue-600: #2563EB;
  --blue-500: #3B82F6;
  --blue-400: #60A5FA;
  --blue-300: #93C5FD;

  /* --- Cyan glow --- */
  --cyan-600: #0891B2;
  --cyan-500: #06B6D4;
  --cyan-400: #22D3EE;
  --cyan-300: #67E8F9;

  /* --- Star / achievement gold --- */
  /* Stars and achievements share the brand amber: two warm accents four
     degrees apart would read as an accident, not a system. */
  --gold-600: var(--amber-600);
  --gold-500: var(--amber-500);
  --gold-400: var(--amber-400);
  --gold-300: var(--amber-300);

  /* --- Semantic --- */
  --green-500: #10B981;
  --green-400: #34D399;
  --green-300: #6EE7B7;
  --red-500:   #EF4444;
  --red-400:   #F87171;
  --red-300:   #FCA5A5;
  --amber-500: #F59E0B;
  --amber-400: #FBBF24;

  /* --- Text --- */
  --text:        #F8FAFC;
  --text-2:      #CBD5E1;
  --text-muted:  #94A3B8;
  --text-soft:   #64748B;

  /* --- Glass surfaces --- */
  --glass:        rgba(255, 255, 255, .045);
  --glass-strong: rgba(255, 255, 255, .075);
  --glass-hover:  rgba(255, 255, 255, .085);
  --glass-border: rgba(255, 255, 255, .10);
  --glass-edge:   rgba(255, 255, 255, .16);
  --glass-inset:  inset 0 1px 0 rgba(255, 255, 255, .06);

  /* ------------------------------------------------------------------
     M-COMMERCE BRAND
     Amber is the action colour: buttons, focus, active states, highlights
     and important system information. It is deliberately NOT used for
     large surfaces -- the slate ramp below carries interactive surfaces so
     the interface never turns orange.
     ------------------------------------------------------------------ */
  --amber-700: #A8690A;
  --amber-600: #D98C0A;   /* Amber Hover */
  --amber-500: #F5A623;   /* Primary Amber */
  --amber-400: #FFBC4C;
  --amber-300: #FFD489;
  --amber-100: #FFF4DD;   /* Light Amber */

  /* Interactive surfaces: lighter and more neutral than deep space, so
     controls lift off the galaxy backdrop without glowing. */
  --slate-700: #202A36;   /* Deep Slate */
  --slate-600: #2C3A4B;   /* Dark Slate */
  --slate-500: #33445A;   /* Secondary Slate */
  --slate-400: #41556F;

  /* --- Semantic accent. Components reference these, not the ramp. --- */
  --accent:         var(--amber-500);
  --accent-hover:   var(--amber-600);
  --accent-text:    var(--amber-400);   /* amber type on dark surfaces */
  --accent-soft:    var(--amber-100);
  --accent-tint:    rgba(245, 166, 35, .12);
  --accent-tint-2:  rgba(245, 166, 35, .20);
  --accent-border:  rgba(245, 166, 35, .38);
  --accent-ring:    rgba(245, 166, 35, .28);

  /* --- Glows --- */
  --glow-amber:  0 0 24px rgba(245, 166, 35, .32);
  --glow-purple: 0 0 24px rgba(245, 166, 35, .35);
  --glow-blue:   0 0 24px rgba(59, 130, 246, .32);
  --glow-cyan:   0 0 24px rgba(34, 211, 238, .30);
  --glow-gold:   0 0 24px rgba(255, 188, 76, .35);
  --glow-green:  0 0 20px rgba(16, 185, 129, .28);
  --glow-red:    0 0 20px rgba(239, 68, 68, .28);

  /* --- Gradients --- */
  --grad-amber:   linear-gradient(135deg, var(--amber-400) 0%, var(--amber-600) 100%);
  --grad-slate:   linear-gradient(135deg, var(--slate-600) 0%, var(--slate-500) 100%);
  --grad-cosmic:  linear-gradient(135deg, var(--purple-600) 0%, var(--blue-600) 100%);
  --grad-nebula:  linear-gradient(135deg, var(--amber-500) 0%, var(--cyan-500) 100%);
  --grad-solar:   linear-gradient(135deg, var(--gold-400) 0%, var(--gold-600) 100%);
  --grad-lunar:   linear-gradient(135deg, #E2E8F0 0%, #94A3B8 100%);
  --grad-bronze:  linear-gradient(135deg, #FDBA74 0%, #B45309 100%);
  --grad-text:    linear-gradient(135deg, #FFFFFF 18%, var(--amber-300) 62%, var(--amber-500) 100%);

  /* --- Shape --- */
  --radius-sm: 8px;
  --radius:    12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 26px;
  --radius-full: 999px;

  /* --- Elevation (dark-appropriate: depth via shadow + glow) --- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .40);
  --shadow:    0 4px 16px rgba(0, 0, 0, .45);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, .50);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, .60);

  /* --- Layout --- */
  --sidebar-w: 268px;
  --topbar-h:  66px;

  /* --- Type --- */
  --font: "Plus Jakarta Sans", "Inter", "Segoe UI", Roboto, -apple-system,
          BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --mono: "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;

  /* --- Motion --- */
  --t-fast: 150ms cubic-bezier(.4, 0, .2, 1);
  --t:      220ms cubic-bezier(.4, 0, .2, 1);
  --t-slow: 350ms cubic-bezier(.4, 0, .2, 1);

  /* ------------------------------------------------------------------
     Compatibility aliases.
     A handful of inline styles in the views refer to the pre-galaxy
     token names. Mapping them here keeps those surfaces correct without
     scattering galaxy values through the PHP. Prefer the galaxy tokens
     above in any new markup.
     ------------------------------------------------------------------ */
  --border:      var(--glass-border);
  --surface:     rgba(255, 255, 255, .045);
  --surface-alt: rgba(255, 255, 255, .03);
  --gray-100:    rgba(255, 255, 255, .06);
  --gray-200:    rgba(255, 255, 255, .10);
  --gray-300:    rgba(255, 255, 255, .16);
  --brand-100:   var(--accent-tint-2);
  --brand-400:   var(--amber-400);
  --brand-500:   var(--amber-500);
  --brand-600:   var(--amber-600);

  /* Names used in the M-Commerce brand spec, mapped onto the ramps above.
     The spec's light surface values (page #F6F7F9, card #FFFFFF) do not
     apply here: this build keeps the dark galaxy theme. */
  --primary:          var(--amber-500);
  --primary-hover:    var(--amber-600);
  --primary-light:    var(--amber-100);
  --slate:            var(--slate-600);
  --slate-secondary:  var(--slate-500);
  --slate-dark:       var(--slate-700);
}


/* =====================================================================
   02  RESET & BASE
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--space-400) var(--space-800);
}

/* NOTE: deliberately no `overflow-x: hidden` on html/body. It would turn
   the root into a scroll container and break the sticky top bar. Sideways
   overflow is prevented at the source instead, with min-width:0 on the
   layout wrappers below and overflow-x:auto on .table-wrap. */

body {
  margin: 0;
  min-height: 100vh;
  max-width: 100%;
  font-family: var(--font);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-2);
  background: var(--space-900);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5 {
  margin: 0 0 .5rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text);
  letter-spacing: -.01em;
}
h1 { font-size: 1.6rem; letter-spacing: -.02em; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }
h4 { font-size: .95rem; }
p  { margin: 0 0 .75rem; }

a { color: var(--accent-text); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--amber-300); }

img { max-width: 100%; display: block; }
hr { border: 0; border-top: 1px solid var(--glass-border); margin: 1.25rem 0; }
code, .mono { font-family: var(--mono); font-size: .85em; }
strong { color: var(--text); font-weight: 650; }

::selection { background: rgba(245, 166, 35, .35); color: #fff; }

/* Scrollbars, tuned for the dark theme */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--space-800); }
::-webkit-scrollbar-thumb {
  background: var(--slate-500);
  border-radius: 6px;
  border: 2px solid var(--space-800);
}
::-webkit-scrollbar-thumb:hover { background: var(--slate-400); }

/* Focus is always visible and never relies on colour alone */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Skip link for keyboard users */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 2000;
  background: var(--accent); color: var(--slate-700);
  padding: .7rem 1.1rem; border-radius: 0 0 var(--radius) 0;
  font-weight: 600;
}
.skip-link:focus { left: 0; color: #fff; }

.icon { flex-shrink: 0; vertical-align: -.125em; }


/* =====================================================================
   03  GALAXY BACKGROUND
   Reusable cosmic environment: painted nebula + three parallax star layers +
   two rotating spiral galaxies + twinkling flares and meteors.
   The starfields are tiled gradients, so a whole sky costs three elements.
   ===================================================================== */
/* The nebula wash is a painted asset (galaxy-nebula.png)
   generated in-house for M-PERKS -- see docs/galaxy-background.md. The spiral
   galaxies, flares and meteors are live DOM layers below, not part of this
   image. The gradients here double as the fallback if the artwork fails to
   load, so the theme never collapses to a flat colour. */
.galaxy-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-color: var(--space-900);
  background-image:
    /* 1. Scrim + nebula tints -- keeps UI chrome readable over the artwork */
    linear-gradient(178deg, rgba(5, 8, 22, .46) 0%, rgba(5, 8, 22, .60) 50%, rgba(5, 8, 22, .88) 100%),
    radial-gradient(1200px 800px at 38% 48%,  rgba(5, 8, 22, .42),     transparent 68%),
    radial-gradient(1100px 700px at 12% -5%,  rgba(124, 58, 237, .18), transparent 60%),
    radial-gradient(900px 600px at 88% 8%,    rgba(37, 99, 235, .16),  transparent 62%),
    radial-gradient(800px 700px at 70% 100%,  rgba(6, 182, 212, .10),  transparent 60%),
    /* 2. Painted nebula */
    url("../images/galaxy-nebula.png"),
    linear-gradient(175deg, var(--space-900) 0%, var(--space-800) 45%, var(--space-700) 100%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* Inside the app shell the background is only a backdrop for dense UI, so it
   is pushed further back than on the login screen. */
.galaxy-bg--app {
  opacity: .72;
}

/* Star layers.
   Three tiled fields drifting at different speeds: the further the field, the
   slower it moves, which reads as parallax. Each twinkles on its own clock so
   the sky never pulses in unison. */
.galaxy-stars {
  position: fixed;
  inset: -50px;
  z-index: -1;
  pointer-events: none;
  opacity: .85;

  /* Mid field */
  background-image:
    radial-gradient(1.2px 1.2px at 40px 110px,  rgba(255,255,255,.75), transparent),
    radial-gradient(1.2px 1.2px at 210px 60px,  rgba(196,181,253,.65), transparent),
    radial-gradient(1.1px 1.1px at 150px 260px, rgba(255,255,255,.60), transparent),
    radial-gradient(1.2px 1.2px at 290px 180px, rgba(147,197,253,.60), transparent),
    radial-gradient(1.1px 1.1px at 70px 320px,  rgba(255,255,255,.55), transparent);
  background-size: 340px 340px;
  animation: star-drift 210s linear infinite, star-twinkle 5.5s ease-in-out infinite;
}
.galaxy-stars::before,
.galaxy-stars::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* Far field: many tiny, dim stars */
.galaxy-stars::before {
  background-image:
    radial-gradient(1px 1px at 20px 30px,   rgba(255,255,255,.65), transparent),
    radial-gradient(1px 1px at 130px 80px,  rgba(199,181,253,.55), transparent),
    radial-gradient(1px 1px at 60px 150px,  rgba(255,255,255,.45), transparent),
    radial-gradient(1px 1px at 180px 40px,  rgba(147,197,253,.50), transparent),
    radial-gradient(1px 1px at 100px 190px, rgba(255,255,255,.40), transparent),
    radial-gradient(1px 1px at 230px 120px, rgba(255,255,255,.55), transparent);
  background-size: 260px 260px;
  animation: star-drift 240s linear infinite;
}

/* Near field: fewer, brighter stars that twinkle slowly */
.galaxy-stars::after {
  background-image:
    radial-gradient(1.6px 1.6px at 90px 60px,   rgba(255,255,255,.90), transparent),
    radial-gradient(1.6px 1.6px at 300px 200px, rgba(253,230,138,.80), transparent),
    radial-gradient(1.4px 1.4px at 200px 330px, rgba(103,232,249,.75), transparent),
    radial-gradient(1.6px 1.6px at 380px 110px, rgba(255,255,255,.70), transparent);
  background-size: 440px 440px;
  animation: star-drift 170s linear infinite reverse, star-twinkle 7s ease-in-out infinite;
}

@keyframes star-drift  { to { transform: translate3d(-260px, -160px, 0); } }
@keyframes star-twinkle { 0%, 100% { opacity: .85; } 50% { opacity: .5; } }

/* ---------------------------------------------------------------------
   Spiral galaxies.
   Real logarithmic-spiral arms (see galaxy_field() in includes/components.php)
   laid flat with a 3D tilt, then rotated about their own core. The arms and
   the dust lanes turn at slightly different rates, which keeps the rotation
   from looking like a rigid spinning decal.
   --------------------------------------------------------------------- */
/* The shared <defs> carrier holds no visible geometry, but as an inline
   element it would still generate a line box and push the page down by a
   row's height. Taking it out of flow is what keeps the login screen to a
   single viewport. */
.galaxy-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.galaxy-spirals {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.galaxy-spiral {
  position: absolute;
  display: block;
  will-change: transform;
}

.galaxy-spiral__disc { transform-box: fill-box; transform-origin: 50% 50%; }

/* Disc contents, outermost first. Colour only -- the geometry is generated. */
.galaxy-spiral__wisps { stroke: #9FE3F5; fill: none; opacity: .45; }
.galaxy-spiral__dust  { fill: #2B1C63; opacity: .62; }
.galaxy-spiral__arms  { fill: #8FDDF2; opacity: .78; }
.galaxy-spiral__field { fill: #DDF4FF; opacity: .5; }
.galaxy-spiral__knots { fill: #EAFCFF; opacity: .8; }
.galaxy-spiral__bar   { fill: url(#mp-gx-bargrad); opacity: .85; }

/* Near galaxy: the showpiece, low and to the right. */
.galaxy-spiral--near {
  left: 32%;
  bottom: -15%;
  width: clamp(340px, 36vw, 600px);
  aspect-ratio: 1;
  opacity: .62;
  transform: perspective(1400px) rotateX(58deg) rotateZ(-16deg);
}
.galaxy-spiral--near .galaxy-spiral__disc  { animation: galaxy-spin 200s linear infinite; }
.galaxy-spiral--near .galaxy-spiral__knots { animation: galaxy-knots 9s ease-in-out infinite; }
.galaxy-spiral--near .galaxy-spiral__core  { animation: galaxy-core 11s ease-in-out infinite; }

/* Far galaxy: smaller, dimmer, turning the other way. */
.galaxy-spiral--far {
  left: 5%;
  top: -6%;
  width: clamp(220px, 24vw, 380px);
  aspect-ratio: 1;
  opacity: .36;
  transform: perspective(900px) rotateX(52deg) rotateZ(26deg);
}
.galaxy-spiral--far .galaxy-spiral__disc { animation: galaxy-spin 340s linear infinite reverse; }
.galaxy-spiral--far .galaxy-spiral__core { animation: galaxy-core 17s ease-in-out infinite; }

@keyframes galaxy-spin  { to { transform: rotate(360deg); } }
@keyframes galaxy-core  { 0%, 100% { opacity: .9; } 50% { opacity: .62; } }
@keyframes galaxy-knots { 0%, 100% { opacity: .8; } 50% { opacity: .35; } }


/* ---------------------------------------------------------------------
   Twinkling flares and shooting stars.
   Positions come from galaxy_field(); each element carries its own custom
   properties so no two share a rhythm.
   --------------------------------------------------------------------- */
.galaxy-sparks {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.spark {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: var(--s);
  margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  opacity: 0;
  animation: spark-pulse var(--dur) ease-in-out var(--delay) infinite;
  will-change: opacity, transform;
}
.spark::before,
.spark::after { content: ""; position: absolute; inset: 0; }

/* Soft halo */
.spark::before {
  background: radial-gradient(closest-side,
    rgba(255, 255, 255, .85), rgba(168, 236, 250, .30) 42%, transparent 72%);
}

/* The four-point flare itself */
.spark::after {
  background: var(--c);
  clip-path: polygon(
    50% 0%, 56% 44%, 100% 50%, 56% 56%,
    50% 100%, 44% 56%, 0% 50%, 44% 44%);
  animation: spark-spin var(--spin) linear infinite;
  transform-origin: 50% 50%;
}

@keyframes spark-pulse {
  0%, 100% { opacity: .16; transform: scale(.78); }
  50%      { opacity: .92; transform: scale(1.06); }
}
@keyframes spark-spin { to { transform: rotate(180deg); } }

/* ---------------------------------------------------------------------
   The mascot, hovering past in an M-COM spaceplane.
   Opt-in: galaxy_field(false, true). Decorative, and small enough to read
   as a passing detail rather than an illustration.
   --------------------------------------------------------------------- */
.galaxy-cruiser {
  position: fixed;
  left: 45%;
  top: 7%;
  width: clamp(120px, 13vw, 186px);
  z-index: -1;
  pointer-events: none;
  animation: cruiser-hover 7s ease-in-out infinite;
  will-change: transform;
}
.galaxy-cruiser svg { display: block; width: 100%; height: auto; overflow: visible; }

.cruiser__mark {
  font: 800 12px var(--font);
  fill: #2B3350;
  letter-spacing: .5px;
}
.cruiser__fin {
  font: 800 11px var(--font);
  fill: #FFFFFF;
  text-anchor: middle;
}

/* The plume flickers faster than the craft drifts. */
.cruiser__flame {
  transform-box: fill-box;
  transform-origin: 100% 50%;
  animation: cruiser-burn .45s ease-in-out infinite alternate;
}

@keyframes cruiser-hover {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-1.5deg); }
  50%      { transform: translate3d(-6px, -13px, 0) rotate(1.5deg); }
}
@keyframes cruiser-burn {
  from { transform: scaleX(.78); opacity: .75; }
  to   { transform: scaleX(1.12); opacity: 1; }
}

.shooting-star {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 2px;
  height: 2px;
  border-radius: var(--radius-full);
  background: #fff;
  box-shadow: 0 0 7px 2px rgba(168, 236, 250, .75);
  opacity: 0;
  animation: shoot var(--dur) ease-in var(--delay) infinite;
  will-change: transform, opacity;
}
.shooting-star::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1px;
  width: 130px;
  height: 1.5px;
  transform: translateY(-50%) rotate(-32deg);
  transform-origin: 100% 50%;
  background: linear-gradient(270deg, rgba(255, 255, 255, .8), transparent);
}

/* A brief streak, then a long wait -- meteors should feel like a surprise. */
@keyframes shoot {
  0%        { opacity: 0; transform: translate3d(0, 0, 0); }
  2%        { opacity: 1; }
  9%        { opacity: 1; }
  13%, 100% { opacity: 0; transform: translate3d(-460px, 288px, 0); }
}


/* =====================================================================
   04  APP SHELL
   ===================================================================== */
.app { min-height: 100vh; }

/* ---------- Sidebar ---------- */
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  z-index: 60;
  background: linear-gradient(180deg, rgba(11, 16, 38, .92) 0%, rgba(5, 8, 22, .96) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-right: 1px solid var(--glass-border);
  transition: transform var(--t);
}
/* Cosmic edge light down the sidebar */
.sidebar::after {
  content: "";
  position: absolute; top: 0; right: -1px; bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(245, 166, 35,.55) 25%, rgba(34,211,238,.45) 70%, transparent);
  pointer-events: none;
}

.sidebar__brand {
  display: flex; align-items: center; gap: .75rem;
  height: var(--topbar-h);
  padding: 0 1.25rem;
  flex-shrink: 0;
  border-bottom: 1px solid var(--glass-border);
}
.sidebar__brand:hover { text-decoration: none; }

.sidebar__logo {
  width: 38px; height: 38px; flex-shrink: 0;
  border-radius: 11px;
  display: grid; place-items: center;
  color: var(--space-900);
  background: var(--grad-solar);
  box-shadow: 0 4px 14px rgba(217, 140, 10, .45), var(--glow-gold);
}
/* An uploaded logo replaces the star inside the brand tile. The gold
   plate is dropped so the artwork sits on its own. */
.brand-logo__img {
  width: 100%; height: 100%;
  object-fit: contain;
  border-radius: inherit;
}
.sidebar__logo:has(.brand-logo__img),
.auth__logo:has(.brand-logo__img) {
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--glass-border);
  box-shadow: none;
  padding: 3px;
  overflow: hidden;
}

.sidebar__title {
  font-weight: 800; font-size: 1.05rem; color: var(--text);
  letter-spacing: .02em;
}
.sidebar__subtitle {
  font-size: .66rem; color: var(--text-soft);
  letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
}

.sidebar__nav { flex: 1; overflow-y: auto; padding: .9rem .7rem 1.5rem; }
.sidebar__nav::-webkit-scrollbar { width: 5px; }
.sidebar__nav::-webkit-scrollbar-track { background: transparent; }
.sidebar__nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border: 0; }

.nav-section {
  display: flex; align-items: center; gap: .5rem;
  font-size: .64rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-soft);
  padding: 1.15rem .85rem .45rem;
}
.nav-section:first-child { padding-top: .25rem; }
.nav-section::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--glass-border), transparent);
}

.nav-link {
  position: relative;
  display: flex; align-items: center; gap: .7rem;
  padding: .6rem .85rem;
  margin-bottom: 3px;
  border-radius: 10px;
  color: var(--text-muted);
  font-size: .885rem;
  font-weight: 550;
  border: 1px solid transparent;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.nav-link:hover {
  background: var(--glass);
  color: var(--text);
  text-decoration: none;
  border-color: var(--glass-border);
}
.nav-link__icon { display: grid; place-items: center; width: 20px; flex-shrink: 0; opacity: .85; }
.nav-link:hover .nav-link__icon { opacity: 1; }

/* Active: cosmic gradient + outer glow + rail */
.nav-link.is-active {
  background: linear-gradient(90deg, rgba(245, 166, 35, .22), rgba(245, 166, 35, .07) 70%, transparent);
  color: var(--text);
  font-weight: 650;
  border-color: var(--accent-border);
  box-shadow: 0 0 18px rgba(245, 166, 35, .16);
}
.nav-link.is-active::before {
  content: "";
  position: absolute; left: -.7rem; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 62%;
  border-radius: 0 3px 3px 0;
  background: var(--grad-amber);
  box-shadow: 0 0 10px var(--amber-400);
}
.nav-link.is-active .nav-link__icon { color: var(--accent); opacity: 1; }

.nav-link__badge {
  margin-left: auto;
  background: var(--grad-solar);
  color: #2D1B00;
  font-size: .67rem; font-weight: 800;
  padding: .12rem .45rem; border-radius: var(--radius-full);
  min-width: 20px; text-align: center;
  box-shadow: 0 0 12px rgba(255, 188, 76, .45);
}

/* ---------- Main column ---------- */
.main {
  margin-left: var(--sidebar-w);
  min-height: 100vh;
  display: flex; flex-direction: column;
  /* min-width:0 lets wide children (tables, grids) shrink instead of
     stretching the column past the viewport. */
  min-width: 0;
  max-width: 100%;
}

.topbar {
  position: sticky; top: 0; z-index: 50;
  height: var(--topbar-h);
  display: flex; align-items: center; gap: .85rem;
  padding: 0 1.5rem;
  background: rgba(8, 11, 31, .78);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 1px solid var(--glass-border);
}
.topbar__toggle {
  display: none;
  background: var(--glass); border: 1px solid var(--glass-border);
  cursor: pointer; color: var(--text-2);
  padding: .45rem; border-radius: 9px;
  transition: all var(--t-fast);
}
.topbar__toggle:hover { background: var(--glass-hover); color: var(--text); }
.topbar__title { font-weight: 700; font-size: 1.02rem; color: var(--text); }
.topbar__spacer { flex: 1; }

/* Always-visible points balance */
.topbar__points {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .4rem .85rem;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, rgba(255, 188, 76,.16), rgba(217, 140, 10,.10));
  border: 1px solid rgba(255, 188, 76, .32);
  color: var(--gold-300);
  font-weight: 700; font-size: .88rem;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 16px rgba(255, 188, 76,.14);
  transition: all var(--t-fast);
}
.topbar__points:hover {
  text-decoration: none;
  border-color: rgba(255, 188, 76, .55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), var(--glow-gold);
}
.topbar__points .star-glyph { color: var(--gold-400); filter: drop-shadow(0 0 4px rgba(255, 188, 76,.7)); }

.topbar__icon-btn {
  position: relative;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 11px; cursor: pointer;
  color: var(--text-2);
  transition: all var(--t-fast);
}
.topbar__icon-btn:hover {
  background: var(--glass-hover);
  color: var(--accent-text);
  border-color: var(--accent-border);
  box-shadow: var(--glow-amber);
}
.topbar__icon-btn .dot {
  position: absolute; top: -5px; right: -5px;
  min-width: 18px; height: 18px; padding: 0 4px;
  display: grid; place-items: center;
  background: var(--red-500); color: #fff;
  font-size: .63rem; font-weight: 800;
  border-radius: var(--radius-full);
  border: 2px solid var(--space-800);
  box-shadow: 0 0 10px rgba(239, 68, 68, .7);
}

/* ---------- User menu / dropdown ---------- */
.usermenu { position: relative; }
.usermenu__btn {
  display: flex; align-items: center; gap: .6rem;
  background: transparent; border: 1px solid transparent; cursor: pointer;
  padding: .3rem .55rem .3rem .3rem; border-radius: 11px;
  transition: all var(--t-fast);
  font-family: inherit;
}
.usermenu__btn:hover { background: var(--glass); border-color: var(--glass-border); }
.usermenu__meta { text-align: left; line-height: 1.2; }
.usermenu__name { display: block; font-size: .85rem; font-weight: 650; color: var(--text); }
.usermenu__role { display: block; font-size: .71rem; color: var(--text-soft); }

.avatar {
  width: 38px; height: 38px; flex-shrink: 0;
  border-radius: var(--radius-full);
  display: grid; place-items: center;
  background: var(--grad-slate);
  color: var(--accent); font-weight: 700; font-size: .82rem;
  letter-spacing: .3px;
  box-shadow: 0 0 0 1px var(--accent-ring), 0 2px 10px rgba(0, 0, 0, .45);
}
.avatar--sm { width: 30px; height: 30px; font-size: .68rem; }
.avatar--lg { width: 58px; height: 58px; font-size: 1.15rem; }

.dropdown {
  position: absolute; right: 0; top: calc(100% + 10px);
  min-width: 246px;
  background: rgba(11, 16, 38, .96);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg), 0 0 30px rgba(0, 0, 0, .5);
  padding: .45rem;
  display: none;
  z-index: 70;
}
.dropdown.is-open { display: block; animation: pop var(--t); }
.dropdown__header {
  padding: .65rem .75rem;
  border-bottom: 1px solid var(--glass-border);
  margin-bottom: .35rem;
}
.dropdown__item {
  display: flex; align-items: center; gap: .65rem;
  width: 100%;
  padding: .58rem .75rem;
  border: 0; background: none; cursor: pointer;
  border-radius: 9px;
  font-size: .87rem; color: var(--text-2);
  font-family: inherit; text-align: left;
  transition: background var(--t-fast), color var(--t-fast);
}
.dropdown__item:hover { background: var(--accent-tint); color: var(--accent-text); text-decoration: none; }
.dropdown__item--danger { color: var(--red-400); }
.dropdown__item--danger:hover { background: rgba(239, 68, 68, .14); color: var(--red-300); }

@keyframes pop { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } }

.content {
  flex: 1;
  padding: 1.6rem;
  max-width: 1620px;
  width: 100%;
  min-width: 0;
}

/* Layout wrappers must be allowed to shrink below their content width,
   otherwise a wide table or card pushes the page sideways. */
.grid-2, .grid-3, .grid-main-side, .grid-side-main,
.card, .stat, .flex-1, .card__body { min-width: 0; }

/* ---------- Page head ---------- */
.page-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.4rem;
}
.page-head__title { margin: 0; font-size: 1.55rem; }
.page-head__sub { color: var(--text-muted); font-size: .89rem; margin: .25rem 0 0; }
.page-head__actions { display: flex; gap: .6rem; flex-wrap: wrap; }

.breadcrumb {
  display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
  font-size: .79rem; color: var(--text-soft); margin-bottom: .45rem;
}
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--accent-text); }


/* =====================================================================
   05  GALAXY GLASS CARDS
   ===================================================================== */
.card,
.galaxy-card {
  position: relative;
  background: var(--glass);
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow), var(--glass-inset);
}

/* Faint cosmic sheen along the top edge */
.card::before,
.galaxy-card::before {
  content: "";
  position: absolute; inset: 0 0 auto 0;
  height: 1px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22) 35%, rgba(167,139,250,.30) 65%, transparent);
  pointer-events: none;
}

.card__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding: 1.05rem 1.3rem;
  border-bottom: 1px solid var(--glass-border);
}
.card__title {
  margin: 0; font-size: .98rem; font-weight: 700; color: var(--text);
  display: flex; align-items: center; gap: .5rem;
}
.card__title .icon { color: var(--accent-text); }
.card__sub { font-size: .79rem; color: var(--text-muted); margin: .15rem 0 0; }
.card__body { padding: 1.3rem; }
.card__body--flush { padding: 0; }
.card__foot {
  padding: .9rem 1.3rem;
  border-top: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, .02);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* Elevated variant for focal panels */
.galaxy-card--glow {
  border-color: rgba(245, 166, 35, .28);
  box-shadow: var(--shadow-md), var(--glow-amber), var(--glass-inset);
}


/* =====================================================================
   06  GALAXY STAT CARDS
   ===================================================================== */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(218px, 1fr));
  gap: 1rem;
  margin-bottom: 1.45rem;
}

.stat {
  position: relative; overflow: hidden;
  display: flex; align-items: flex-start; gap: .95rem;
  padding: 1.15rem 1.25rem;
  background: var(--glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm), var(--glass-inset);
  color: inherit;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.stat::after {
  content: "";
  position: absolute; right: -40px; top: -40px;
  width: 130px; height: 130px; border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 166, 35, .16), transparent 70%);
  pointer-events: none;
  transition: opacity var(--t);
  opacity: .8;
}
.stat:hover {
  transform: translateY(-3px);
  border-color: rgba(245, 166, 35, .30);
  box-shadow: var(--shadow-md), 0 0 26px rgba(124, 58, 237, .20), var(--glass-inset);
}
.stat--link:hover { text-decoration: none; }

.stat__icon {
  width: 46px; height: 46px; flex-shrink: 0;
  border-radius: 13px;
  display: grid; place-items: center;
  background: var(--slate-500);
  border: 1px solid var(--accent-border);
  color: var(--accent);
}
.stat__icon--gold  { background: rgba(255, 188, 76,.13); border-color: rgba(255, 188, 76,.30); color: var(--gold-300); }
.stat__icon--green { background: rgba(16,185,129,.13); border-color: rgba(16,185,129,.30); color: var(--green-300); }
.stat__icon--red   { background: rgba(239,68,68,.13);  border-color: rgba(239,68,68,.30);  color: var(--red-300); }
.stat__icon--blue  { background: rgba(59,130,246,.13); border-color: rgba(59,130,246,.30); color: var(--blue-300); }
.stat__icon--cyan  { background: rgba(34,211,238,.13); border-color: rgba(34,211,238,.30); color: var(--cyan-300); }
.stat__icon--amber { background: rgba(245, 166, 35,.13); border-color: rgba(245, 166, 35,.30); color: var(--amber-400); }

.stat__label {
  font-size: .69rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-soft);
}
.stat__value {
  font-size: 1.7rem; font-weight: 800; line-height: 1.15;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.stat__hint { font-size: .76rem; color: var(--text-muted); margin-top: .15rem; }


/* =====================================================================
   07  COSMIC POINTS HERO
   ===================================================================== */
.points-hero {
  position: relative; overflow: hidden;
  padding: 2rem;
  margin-bottom: 1.5rem;
  border-radius: var(--radius-2xl);
  border: 1px solid rgba(245, 166, 35, .26);
  background:
    radial-gradient(700px 320px at 18% 0%,  rgba(124, 58, 237, .38), transparent 70%),
    radial-gradient(600px 300px at 85% 110%, rgba(6, 182, 212, .24), transparent 70%),
    linear-gradient(135deg, rgba(17, 22, 47, .92), rgba(8, 11, 31, .96));
  box-shadow: var(--shadow-md), 0 0 44px rgba(124, 58, 237, .20), var(--glass-inset);
}

/* Slow cosmic pulse behind the number */
.points-hero::after {
  content: "";
  position: absolute; left: 6%; top: 50%;
  width: 320px; height: 320px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 188, 76, .20), transparent 68%);
  pointer-events: none;
  animation: cosmic-pulse 6s ease-in-out infinite;
}
@keyframes cosmic-pulse {
  0%, 100% { opacity: .55; transform: translateY(-50%) scale(1); }
  50%      { opacity: .95; transform: translateY(-50%) scale(1.12); }
}

.points-hero__grid {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap;
}

.points-hero__eyebrow {
  display: flex; align-items: center; gap: .45rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: var(--accent-text);
  margin-bottom: .1rem;
}
.points-hero__label {
  display: flex; align-items: center; gap: .45rem;
  font-size: .74rem; font-weight: 650; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-muted);
}
.points-hero__value {
  display: flex; align-items: baseline; gap: .1rem;
  font-size: 3.4rem; font-weight: 800; line-height: 1.02;
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, #FFFFFF 25%, var(--gold-300) 75%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 22px rgba(255, 188, 76, .35));
}
.points-hero__unit {
  font-size: .78rem; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--text-muted);
  margin-top: .25rem;
}
.points-hero__meta { display: flex; gap: 2.25rem; flex-wrap: wrap; }
.points-hero__stat-label {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .14em;
  color: var(--text-soft); font-weight: 650;
}
.points-hero__stat-value {
  font-size: 1.35rem; font-weight: 750; color: var(--text);
  font-variant-numeric: tabular-nums;
}

.rank-chip {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(255, 255, 255, .07);
  border: 1px solid var(--glass-edge);
  padding: .45rem 1rem; border-radius: var(--radius-full);
  font-weight: 650; font-size: .85rem; color: var(--text);
  backdrop-filter: blur(8px);
}
.rank-chip .icon { color: var(--gold-400); }

/* ---------- Quick actions ---------- */
.quick-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(152px, 1fr));
  gap: .9rem;
  margin-bottom: 1.45rem;
}
.quick-action {
  position: relative; overflow: hidden;
  padding: 1.2rem .9rem;
  text-align: center;
  background: var(--glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  color: var(--text-2);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t), color var(--t);
}
.quick-action:hover {
  transform: translateY(-4px);
  border-color: rgba(245, 166, 35, .38);
  box-shadow: var(--shadow-md), var(--glow-amber);
  color: var(--text);
  text-decoration: none;
}
.quick-action__icon {
  width: 48px; height: 48px; margin: 0 auto .65rem;
  border-radius: 14px; display: grid; place-items: center;
  background: var(--slate-500);
  border: 1px solid var(--accent-border);
  color: var(--accent);
  transition: all var(--t);
}
.quick-action:hover .quick-action__icon {
  background: var(--grad-cosmic);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--glow-amber);
}
.quick-action__label { font-size: .86rem; font-weight: 650; }


/* =====================================================================
   08  GALAXY BUTTONS
   ===================================================================== */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: inherit; font-size: .875rem; font-weight: 650;
  padding: .58rem 1.1rem;
  border-radius: 11px;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  line-height: 1.4;
  transition: transform var(--t-fast), box-shadow var(--t-fast),
              background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }

.btn:disabled, .btn.is-disabled {
  cursor: not-allowed; pointer-events: none;
  transform: none; box-shadow: none;
  opacity: .55;
}

/* Primary — the M-Commerce combination: slate ground, amber type.
   The amber border is an adaptation for this dark theme; on the brand's
   light surfaces the slate alone carries the edge. */
.btn--primary {
  background: var(--slate-600);
  color: var(--accent);
  border-color: var(--accent-border);
  box-shadow: var(--glass-inset), 0 2px 10px rgba(0, 0, 0, .38);
}
.btn--primary:hover {
  background: var(--slate-500);
  color: var(--amber-400);
  border-color: var(--accent);
  box-shadow: var(--glass-inset), var(--glow-amber);
}

/* Amber — solid, for the rare place that needs maximum pull. Used
   sparingly on purpose: the interface should not read as orange.
   .btn--gold is the same treatment under its redeem/achievement name. */
.btn--amber,
.btn--gold {
  background: var(--grad-amber);
  color: var(--slate-700);
  border-color: transparent;
  box-shadow: 0 2px 12px rgba(245, 166, 35, .35);
}
.btn--amber:hover,
.btn--gold:hover {
  color: var(--slate-700);
  box-shadow: 0 4px 22px rgba(245, 166, 35, .5), var(--glow-amber);
  filter: brightness(1.06);
}

.btn--success {
  background: linear-gradient(135deg, var(--green-500), #059669);
  color: #fff;
  box-shadow: 0 2px 12px rgba(16, 185, 129, .35);
}
.btn--success:hover { color: #fff; box-shadow: 0 4px 20px rgba(16,185,129,.5), var(--glow-green); }

.btn--danger {
  background: linear-gradient(135deg, var(--red-500), #B91C1C);
  color: #fff;
  box-shadow: 0 2px 12px rgba(239, 68, 68, .32);
}
.btn--danger:hover { color: #fff; box-shadow: 0 4px 20px rgba(239,68,68,.48), var(--glow-red); }

/* Ghost — glass */
.btn--ghost {
  background: var(--glass);
  color: var(--text-2);
  border-color: var(--glass-border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.btn--ghost:hover {
  background: var(--glass-hover);
  border-color: var(--accent-border);
  color: var(--text);
}

.btn--subtle {
  background: var(--accent-tint);
  color: var(--accent-text);
  border-color: rgba(245, 166, 35, .26);
}
.btn--subtle:hover {
  background: var(--accent-tint-2);
  color: var(--amber-300);
  border-color: rgba(245, 166, 35, .45);
}

/* Muted / locked — clearly unavailable, never colour alone */
.btn--muted,
.btn--locked {
  background: rgba(255, 255, 255, .04);
  color: var(--text-soft);
  border: 1px dashed rgba(255, 255, 255, .16);
  box-shadow: none;
  opacity: .75;
  cursor: not-allowed;
}
.btn--locked .icon { color: var(--text-soft); }

.btn--sm { padding: .38rem .75rem; font-size: .79rem; border-radius: 9px; }
.btn--lg { padding: .8rem 1.6rem; font-size: .95rem; border-radius: 13px; }
.btn--block { width: 100%; }

.btn-group { display: inline-flex; gap: .4rem; flex-wrap: wrap; }


/* =====================================================================
   09  GALAXY BADGES & STATUS
   Status always pairs a glyph with the text, so colour is never the
   only carrier of meaning (accessibility).
   ===================================================================== */
.badge {
  display: inline-flex; align-items: center; gap: .32rem;
  font-size: .715rem; font-weight: 700;
  padding: .24rem .6rem;
  border-radius: var(--radius-full);
  letter-spacing: .03em;
  white-space: nowrap;
  border: 1px solid transparent;
}
.badge--gray   { background: rgba(148,163,184,.12); color: var(--text-muted);  border-color: rgba(148,163,184,.24); }
.badge--green  { background: rgba(16,185,129,.14);  color: var(--green-300);   border-color: rgba(16,185,129,.30); }
.badge--red    { background: rgba(239,68,68,.14);   color: var(--red-300);     border-color: rgba(239,68,68,.30); }
.badge--amber  { background: var(--accent-tint);      color: var(--accent-text); border-color: var(--accent-border); }
.badge--blue   { background: rgba(59,130,246,.14);  color: var(--blue-300);    border-color: rgba(59,130,246,.30); }
/* Identity chips (role, "You", unread count): slate ground, amber type. */
.badge--brand  { background: var(--slate-500);        color: var(--accent);      border-color: var(--accent-border); }
/* Highlight chips (featured, available): filled amber, the strongest chip. */
.badge--gold   { background: var(--amber-500);        color: var(--slate-700);   border-color: var(--amber-500); }
.badge--cyan   { background: rgba(34,211,238,.14);  color: var(--cyan-300);    border-color: rgba(34,211,238,.30); }

/* Cosmic status glyph — the ● ◉ ◌ ✦ × ○ system */
.status-dot {
  font-size: .85em;
  line-height: 1;
  font-weight: 700;
}
.badge--green .status-dot { text-shadow: 0 0 7px rgba(16,185,129,.85); }
.badge--brand .status-dot { text-shadow: 0 0 7px rgba(245, 166, 35,.85); }
.badge--gold  .status-dot { text-shadow: none; }
.badge--amber .status-dot { text-shadow: 0 0 7px rgba(245, 166, 35,.85); }
.badge--gold  .status-dot { text-shadow: 0 0 7px rgba(255, 188, 76,.85); }
.badge--red   .status-dot { text-shadow: 0 0 7px rgba(239,68,68,.85); }

/* Pulsing dot for a live/active state */
.badge--live .status-dot { animation: dot-pulse 2.2s ease-in-out infinite; }
@keyframes dot-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

.demo-flag {
  display: inline-block;
  font-size: .62rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase;
  background: rgba(245, 166, 35, .14);
  color: var(--gold-300);
  border: 1px solid rgba(245, 166, 35, .28);
  padding: .1rem .4rem; border-radius: 5px;
}


/* =====================================================================
   10  POINTS, STARS & COUNTERS
   ===================================================================== */
.star-glyph {
  vertical-align: -.1em;
  color: var(--gold-400);
  filter: drop-shadow(0 0 4px rgba(255, 188, 76, .55));
}

.points-pill {
  display: inline-flex; align-items: center; gap: .32rem;
  background: linear-gradient(135deg, rgba(255, 188, 76,.15), rgba(217, 140, 10,.09));
  border: 1px solid rgba(255, 188, 76, .30);
  color: var(--gold-300);
  font-weight: 750; font-size: .8rem;
  padding: .2rem .62rem; border-radius: var(--radius-full);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.points-pill--lg { font-size: 1rem; padding: .36rem .9rem; }
.points-pill--lg .star-glyph { filter: drop-shadow(0 0 7px rgba(255, 188, 76,.75)); }

/* Galaxy points counter (large, standalone) */
.points-counter {
  display: inline-flex; align-items: baseline; gap: .35rem;
  font-size: 2.6rem; font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
  color: var(--gold-300);
  filter: drop-shadow(0 0 16px rgba(255, 188, 76, .35));
}

.pts-up   { color: var(--green-300); font-weight: 700; }
.pts-down { color: var(--red-300);   font-weight: 700; }


/* =====================================================================
   11  TABLES
   ===================================================================== */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.table { width: 100%; border-collapse: collapse; font-size: .855rem; }
.table th {
  text-align: left;
  padding: .75rem 1rem;
  background: rgba(51, 68, 90, .42);
  border-bottom: 1px solid var(--glass-border);
  font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--text-muted);
  white-space: nowrap;
}
.table td {
  padding: .82rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  vertical-align: middle;
  color: var(--text-2);
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background var(--t-fast); }
.table tbody tr:hover { background: var(--accent-tint); box-shadow: inset 3px 0 0 var(--accent); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table .nowrap { white-space: nowrap; }
.table__actions { display: flex; gap: .35rem; justify-content: flex-end; }

.cell-main { font-weight: 650; color: var(--text); }
.cell-sub  { font-size: .755rem; color: var(--text-soft); }


/* =====================================================================
   12  FORMS & FILTERS
   ===================================================================== */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.1rem; }
.form-grid--1 { grid-template-columns: 1fr; }

.field { display: flex; flex-direction: column; gap: .38rem; }
.field--full { grid-column: 1 / -1; }

.label { font-size: .79rem; font-weight: 650; color: var(--text-2); }
.label .req { color: var(--red-400); margin-left: 2px; }
.hint { font-size: .755rem; color: var(--text-soft); }

.input, .select, .textarea {
  width: 100%;
  font-family: inherit; font-size: .875rem;
  color: var(--text);
  padding: .6rem .8rem;
  background: rgba(32, 42, 54, .55);
  border: 1px solid var(--glass-edge);
  border-radius: 10px;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.input::placeholder, .textarea::placeholder { color: var(--text-soft); }
.input:hover:not(:disabled), .select:hover:not(:disabled), .textarea:hover:not(:disabled) {
  border-color: rgba(255, 255, 255, .24);
}
.input:focus, .select:focus, .textarea:focus {
  outline: 0;
  border-color: var(--accent);
  background: rgba(32, 42, 54, .78);
  box-shadow: 0 0 0 3px var(--accent-ring), 0 0 18px rgba(245, 166, 35, .16);
}
.input:disabled, .select:disabled, .textarea:disabled {
  background: rgba(255, 255, 255, .03);
  color: var(--text-soft); cursor: not-allowed;
}
.textarea { min-height: 100px; resize: vertical; line-height: 1.55; }

.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2394a3b8' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  padding-right: 2.1rem;
}
.select option { background: var(--slate-700); color: var(--text); }

/* File inputs */
.input[type="file"] { padding: .45rem .55rem; }
.input[type="file"]::file-selector-button {
  font-family: inherit; font-size: .8rem; font-weight: 600;
  margin-right: .7rem; padding: .35rem .75rem;
  border-radius: 8px; cursor: pointer;
  background: var(--accent-tint-2);
  color: var(--accent-text);
  border: 1px solid var(--accent-border);
}
.input[type="file"]::file-selector-button:hover { background: rgba(245, 166, 35, .3); color: var(--amber-300); }

/* Date/time controls need a light picker indicator on dark */
.input[type="date"]::-webkit-calendar-picker-indicator,
.input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(1) opacity(.55); cursor: pointer;
}

.input--error, .select--error, .textarea--error { border-color: var(--red-500); }
.field-error { font-size: .755rem; color: var(--red-300); }

.check {
  display: flex; align-items: flex-start; gap: .58rem;
  font-size: .85rem; cursor: pointer;
  padding: .32rem 0; color: var(--text-2);
}
.check input[type="checkbox"], .check input[type="radio"] {
  width: 16px; height: 16px; margin: .18rem 0 0;
  accent-color: var(--accent); cursor: pointer; flex-shrink: 0;
}
.check__text { line-height: 1.4; }
.check__sub { display: block; font-size: .735rem; color: var(--text-soft); }

.check-list {
  max-height: 240px; overflow-y: auto;
  border: 1px solid var(--glass-edge);
  border-radius: 10px;
  padding: .6rem .8rem;
  background: rgba(32, 42, 54, .40);
}
.check-list--sm { max-height: 170px; }

.radio-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: .65rem; }
.radio-card {
  display: flex; align-items: flex-start; gap: .55rem;
  border: 1px solid var(--glass-edge);
  border-radius: 11px;
  padding: .75rem .9rem;
  cursor: pointer;
  background: rgba(255, 255, 255, .025);
  transition: all var(--t-fast);
}
.radio-card:hover { border-color: var(--accent-border); background: var(--accent-tint); }
.radio-card input { accent-color: var(--accent); margin-top: .18rem; }
.radio-card.is-selected {
  border-color: var(--accent);
  background: var(--accent-tint-2);
  box-shadow: 0 0 0 1px var(--accent-ring), var(--glow-amber);
}

.form-actions {
  display: flex; gap: .6rem; flex-wrap: wrap;
  padding-top: 1.15rem; margin-top: 1.15rem;
  border-top: 1px solid var(--glass-border);
}
.form-actions--end { justify-content: flex-end; }

/* Filter bar */
.filters {
  display: flex; gap: .7rem; flex-wrap: wrap; align-items: flex-end;
  padding: 1.05rem 1.3rem;
  border-bottom: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, .02);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.filters .field { min-width: 150px; flex: 1 1 150px; }
.filters .field--grow { flex: 2 1 240px; }

.file-drop {
  border: 2px dashed var(--glass-edge);
  border-radius: var(--radius);
  padding: 1.3rem; text-align: center;
  background: rgba(255, 255, 255, .02);
  cursor: pointer;
  transition: all var(--t-fast);
}
.file-drop:hover { border-color: var(--accent); background: var(--accent-tint); }
.file-drop__icon { color: var(--text-soft); }
.file-drop__text { font-size: .84rem; color: var(--text-muted); margin-top: .35rem; }

.img-preview {
  width: 100%; max-width: 220px; aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--glass-edge);
  background: rgba(5, 8, 22, .6);
}

/* Brand logo preview on the settings screen */
.logo-preview {
  flex: 0 0 auto;
  padding: 1rem 1.15rem;
  border: 1px dashed var(--glass-edge);
  border-radius: var(--radius-lg);
  background: rgba(5, 8, 22, .45);
  text-align: center;
}
.logo-preview__label {
  font-size: .64rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-soft);
  margin-bottom: .8rem;
}
.logo-preview__tiles {
  display: flex; align-items: center; justify-content: center;
  gap: 1.1rem;
}
.logo-preview__tile { display: grid; place-items: center; }
.logo-preview__meta {
  margin-top: .8rem;
  font-size: .7rem; color: var(--text-soft);
  max-width: 190px; overflow-wrap: anywhere;
}

/* The logo preview keeps its natural aspect ratio, unlike reward images */
#logoPreview {
  aspect-ratio: auto;
  max-width: 150px;
  max-height: 150px;
  object-fit: contain;
  padding: .5rem;
}


/* =====================================================================
   13  MISSION (TASK) CARDS
   Tasks are presented as missions. "Task" stays the business term.
   ===================================================================== */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.15rem;
}

.task-card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  background: var(--glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm), var(--glass-inset);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.task-card::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(167,139,250,.45), transparent);
}
.task-card:hover {
  transform: translateY(-4px);
  border-color: rgba(245, 166, 35, .35);
  box-shadow: var(--shadow-md), var(--glow-amber);
}

.task-card__eyebrow {
  display: flex; align-items: center; gap: .4rem;
  font-size: .64rem; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent-text);
  padding: .9rem 1.2rem 0;
}
.task-card__top {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem;
  padding: .6rem 1.2rem .8rem;
  border-bottom: 1px solid var(--glass-border);
}
.task-card__body { padding: 1.05rem 1.2rem; flex: 1; }
.task-card__title { font-size: 1.02rem; font-weight: 700; margin: 0 0 .45rem; color: var(--text); }
.task-card__desc { font-size: .83rem; color: var(--text-muted); line-height: 1.55; margin: 0; }
.task-card__meta {
  display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
  font-size: .775rem; color: var(--text-muted);
  padding: 0 1.2rem .85rem;
}
.task-card__meta .icon { color: var(--text-soft); }
.task-card__foot {
  padding: .9rem 1.2rem;
  background: rgba(255, 255, 255, .02);
  border-top: 1px solid var(--glass-border);
}

.deadline-soon { color: var(--red-300); font-weight: 650; }
.deadline-soon .icon { color: var(--red-400); }


/* =====================================================================
   14  REWARD GALAXY CARDS
   ===================================================================== */
.galaxy-hero {
  position: relative; overflow: hidden;
  text-align: center;
  padding: 2.2rem 1.5rem;
  margin-bottom: 1.5rem;
  border-radius: var(--radius-2xl);
  border: 1px solid var(--glass-border);
  background:
    radial-gradient(600px 260px at 50% -10%, rgba(124, 58, 237, .34), transparent 70%),
    linear-gradient(135deg, rgba(17, 22, 47, .85), rgba(8, 11, 31, .92));
}
.galaxy-hero__title {
  font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em;
  margin-bottom: .35rem;
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.galaxy-hero__sub { color: var(--text-muted); font-size: .92rem; margin: 0; }

.reward-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  gap: 1.15rem;
}

.reward-card {
  position: relative;
  display: flex; flex-direction: column;
  overflow: hidden;
  background: var(--glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm), var(--glass-inset);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.reward-card:hover {
  transform: translateY(-5px);
  border-color: rgba(255, 188, 76, .32);
  box-shadow: var(--shadow-md), 0 0 30px rgba(255, 188, 76, .18);
}

/* Locked cards read as unavailable without relying on colour alone */
.reward-card.is-locked { opacity: .72; }
.reward-card.is-locked:hover {
  transform: none;
  border-color: var(--glass-border);
  box-shadow: var(--shadow-sm), var(--glass-inset);
}

.reward-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 40%, rgba(245, 166, 35, .22), transparent 70%),
    linear-gradient(135deg, var(--space-600), var(--space-800));
  display: grid; place-items: center;
}
.reward-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--t-slow);
}
.reward-card:not(.is-locked):hover .reward-card__media img { transform: scale(1.07); }
.reward-card__placeholder { color: rgba(167, 139, 250, .45); }

.reward-card__ribbon {
  position: absolute; top: .65rem; left: .65rem;
  display: inline-flex; align-items: center; gap: .3rem;
  background: rgba(5, 8, 22, .82);
  backdrop-filter: blur(6px);
  border: 1px solid var(--glass-edge);
  color: var(--text-2);
  font-size: .67rem; font-weight: 700;
  padding: .2rem .55rem; border-radius: 7px;
}
.reward-card__ribbon--out { color: var(--red-300); border-color: rgba(239,68,68,.35); }
.reward-card__ribbon--low { color: var(--gold-300); border-color: rgba(255, 188, 76,.35); }

.reward-card__featured {
  position: absolute; top: .65rem; right: .65rem;
  display: inline-flex; align-items: center; gap: .25rem;
  background: var(--grad-solar);
  color: #2D1B00;
  font-size: .66rem; font-weight: 800;
  padding: .2rem .55rem; border-radius: 7px;
  box-shadow: 0 0 14px rgba(255, 188, 76, .5);
}

.reward-card__body { padding: 1rem 1.1rem; flex: 1; display: flex; flex-direction: column; gap: .5rem; }
.reward-card__name { font-size: .97rem; font-weight: 700; margin: 0; color: var(--text); }
.reward-card__desc { font-size: .8rem; color: var(--text-muted); margin: 0; line-height: 1.5; }
.reward-card__price {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; margin-top: auto; padding-top: .5rem;
}
.reward-card__stock { font-size: .775rem; color: var(--text-muted); }
.reward-card__stock.is-low { color: var(--gold-300); font-weight: 650; }
.reward-card__stock.is-out { color: var(--red-300); font-weight: 650; }
.reward-card__foot {
  padding: .9rem 1.1rem;
  background: rgba(255, 255, 255, .02);
  border-top: 1px solid var(--glass-border);
}

/* "You need N more points" affordance */
.reward-need {
  display: flex; align-items: center; gap: .35rem;
  font-size: .755rem; color: var(--gold-300);
  margin-top: .35rem; font-weight: 600;
}


/* =====================================================================
   15  LEADERBOARD & PODIUM
   ===================================================================== */
.leaderboard { display: flex; flex-direction: column; }

.lb-row {
  display: flex; align-items: center; gap: .9rem;
  padding: .78rem 1.3rem;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  transition: background var(--t-fast);
}
.lb-row:last-child { border-bottom: 0; }
.lb-row:hover { background: rgba(255, 255, 255, .035); }
.lb-row--me {
  background: linear-gradient(90deg, rgba(245, 166, 35, .18), transparent);
  box-shadow: inset 3px 0 0 var(--accent);
}
.lb-row--me:hover { background: linear-gradient(90deg, rgba(245, 166, 35, .26), transparent); }

/* Rank medallions — sleek, not cartoon trophies */
.lb-rank {
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: var(--radius-full);
  display: grid; place-items: center;
  font-weight: 750; font-size: .84rem;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--glass-border);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
/* The top three become award medals: ribbon straps fanned above a numeral
   disc, all sitting on a gold / silver / bronze face. Everything scales from
   the single --medal token, so one size modifier resizes the whole badge. */
.lb-rank--gold,
.lb-rank--silver,
.lb-rank--bronze {
  --medal: 36px;
  width: var(--medal); height: var(--medal);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: calc(var(--medal) * .02);
  border: 0;
  padding-top: calc(var(--medal) * .06);
}

/* Ribbon straps */
.medal__ribbon {
  display: block; line-height: 0;
  width: calc(var(--medal) * .54);
  margin-bottom: calc(var(--medal) * -.07);
}
.medal__ribbon svg { width: 100%; height: auto; display: block; overflow: visible; }
.medal__strap--l { fill: #1D4ED8; }
.medal__strap--r { fill: #3B82F6; }

/* Numeral disc */
.lb-rank__num {
  display: grid; place-items: center;
  width: calc(var(--medal) * .50);
  height: calc(var(--medal) * .50);
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, .94);
  font-size: calc(var(--medal) * .30);
  font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}

/* #1 Gold */
.lb-rank--1,
.lb-rank--gold {
  background: var(--grad-solar);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.38), 0 0 18px rgba(255, 188, 76, .55);
}
.lb-rank--gold .lb-rank__num { color: #92400E; }
/* #2 Silver */
.lb-rank--2,
.lb-rank--silver {
  background: var(--grad-lunar);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.45), 0 0 16px rgba(226, 232, 240, .35);
}
.lb-rank--silver .lb-rank__num { color: #475569; }
/* #3 Bronze */
.lb-rank--3,
.lb-rank--bronze {
  background: var(--grad-bronze);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.30), 0 0 16px rgba(217, 140, 10, .40);
}
.lb-rank--bronze .lb-rank__num { color: #9A3412; }

/* Size modifiers — plain chips keep width/height, medals scale via --medal */
.lb-rank--sm { width: 28px; height: 28px; font-size: .74rem; }
.lb-rank--lg { width: 46px; height: 46px; font-size: 1.15rem; }
.lb-rank--gold.lb-rank--sm,
.lb-rank--silver.lb-rank--sm,
.lb-rank--bronze.lb-rank--sm { --medal: 30px; }
.lb-rank--gold.lb-rank--lg,
.lb-rank--silver.lb-rank--lg,
.lb-rank--bronze.lb-rank--lg { --medal: 50px; }

.lb-name { font-weight: 650; font-size: .89rem; color: var(--text); }
.lb-dept { font-size: .745rem; color: var(--text-soft); }
.lb-points {
  margin-left: auto; text-align: right;
  display: inline-flex; align-items: center; gap: .3rem;
  font-weight: 750; font-size: .95rem; color: var(--gold-300);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.lb-you-badge {
  font-size: .6rem; font-weight: 800; letter-spacing: .08em;
  background: var(--grad-cosmic); color: #fff;
  padding: .1rem .4rem; border-radius: 5px; margin-left: .45rem;
  text-transform: uppercase;
}

.lb-self {
  display: flex; align-items: center; gap: .9rem;
  padding: .95rem 1.3rem;
  background: linear-gradient(90deg, rgba(245, 166, 35, .16), rgba(255, 188, 76, .07));
  border-top: 1px dashed rgba(245, 166, 35, .35);
}

/* ---------- Podium (top 3) ---------- */
.podium {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.25fr 1fr;
  align-items: end;
  gap: 1rem;
  padding: 2rem 1.3rem 0;
}
/* The floor the podium blocks stand on */
.podium::after {
  content: "";
  position: absolute; left: 1.3rem; right: 1.3rem; bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(245, 166, 35, .55), rgba(34, 211, 238, .40), transparent);
}
.podium__slot { text-align: center; }
.podium__medal {
  --medal: 62px;
  width: var(--medal); height: var(--medal); margin: 0 auto .7rem;
  border-radius: var(--radius-full);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: calc(var(--medal) * .02);
  padding-top: calc(var(--medal) * .06);
  position: relative;
}
.podium__slot--1 .podium__medal { --medal: 78px; }
.podium__medal--gold {
  background: var(--grad-solar);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.38), 0 0 34px rgba(255, 188, 76, .6);
}
.podium__medal--gold .lb-rank__num { color: #92400E; }
.podium__medal--silver {
  background: var(--grad-lunar);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.45), 0 0 24px rgba(226,232,240,.35);
}
.podium__medal--silver .lb-rank__num { color: #475569; }
.podium__medal--bronze {
  background: var(--grad-bronze);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.30), 0 0 24px rgba(217, 140, 10,.4);
}
.podium__medal--bronze .lb-rank__num { color: #9A3412; }

.podium__name {
  font-weight: 700; font-size: .88rem; color: var(--text);
  margin-bottom: .1rem;
  overflow-wrap: anywhere;
}
.podium__slot--1 .podium__name { font-size: 1rem; }
.podium__dept { font-size: .72rem; color: var(--text-soft); margin-bottom: .35rem; }
.podium__points {
  display: inline-flex; align-items: center; gap: .3rem;
  font-weight: 750; color: var(--gold-300);
  font-variant-numeric: tabular-nums;
}
.podium__base {
  margin-top: .8rem;
  border-radius: 10px 10px 0 0;
  background: linear-gradient(180deg, rgba(245, 166, 35, .22), rgba(245, 166, 35, .04));
  border: 1px solid var(--glass-border);
  border-bottom: 0;
  display: grid; place-items: center;
  font-size: .8rem; font-weight: 800; color: var(--text-muted);
}
.podium__slot--1 .podium__base { height: 82px; background: linear-gradient(180deg, rgba(255, 188, 76,.26), rgba(255, 188, 76,.04)); }
.podium__slot--2 .podium__base { height: 58px; }
.podium__slot--3 .podium__base { height: 44px; }

/* ---------- Your position panel ---------- */
.your-position {
  padding: 1.4rem;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(245, 166, 35, .28);
  background:
    radial-gradient(400px 200px at 50% 0%, rgba(124, 58, 237, .26), transparent 70%),
    rgba(255, 255, 255, .03);
  text-align: center;
}
.your-position__label {
  font-size: .66rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--text-soft);
}
.your-position__rank {
  font-size: 2.6rem; font-weight: 800; line-height: 1.05;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
}
.your-position__gap { font-size: .82rem; color: var(--text-muted); margin-top: .5rem; }


/* =====================================================================
   16  COSMIC TIMELINE (points history)
   ===================================================================== */
.timeline { position: relative; padding-left: 1.7rem; }
.timeline::before {
  content: "";
  position: absolute; left: 7px; top: 6px; bottom: 6px;
  width: 2px;
  background: linear-gradient(180deg, rgba(245, 166, 35,.5), rgba(34,211,238,.22), transparent);
}
.timeline__item { position: relative; padding-bottom: 1.2rem; }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__dot {
  position: absolute; left: -1.7rem; top: 3px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--space-700);
  border: 2px solid var(--glass-edge);
}
.timeline__item.is-done .timeline__dot {
  border-color: var(--green-500); background: var(--green-500);
  box-shadow: 0 0 10px rgba(16, 185, 129, .6);
}
.timeline__item.is-current .timeline__dot {
  border-color: var(--amber-400);
  box-shadow: 0 0 0 4px rgba(245, 166, 35, .22), 0 0 14px rgba(245, 166, 35, .6);
}
.timeline__title { font-weight: 650; font-size: .88rem; color: var(--text); }
.timeline__meta  { font-size: .765rem; color: var(--text-soft); }

/* Points history: grouped cosmic ledger */
.cosmic-log__day {
  display: flex; align-items: center; gap: .6rem;
  font-size: .68rem; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-soft);
  padding: 1.15rem 1.3rem .5rem;
}
.cosmic-log__day::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--glass-border), transparent);
}
.cosmic-log__item {
  display: flex; align-items: center; gap: .9rem;
  padding: .8rem 1.3rem;
  border-bottom: 1px solid rgba(255, 255, 255, .045);
  transition: background var(--t-fast);
}
.cosmic-log__item:hover { background: rgba(255, 255, 255, .03); }
.cosmic-log__icon {
  width: 38px; height: 38px; flex-shrink: 0;
  border-radius: 11px; display: grid; place-items: center;
  border: 1px solid transparent;
}
.cosmic-log__icon--in {
  background: rgba(16, 185, 129, .13); color: var(--green-300);
  border-color: rgba(16, 185, 129, .28);
  box-shadow: 0 0 14px rgba(16, 185, 129, .18);
}
.cosmic-log__icon--out {
  background: rgba(239, 68, 68, .12); color: var(--red-300);
  border-color: rgba(239, 68, 68, .26);
}
.cosmic-log__title { font-size: .88rem; font-weight: 650; color: var(--text); }
.cosmic-log__meta  { font-size: .755rem; color: var(--text-soft); }
.cosmic-log__amount {
  margin-left: auto; text-align: right;
  font-weight: 750; font-size: .95rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cosmic-log__balance { font-size: .73rem; color: var(--text-soft); font-weight: 500; }

/* Redemption status steps */
.steps { display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: 1rem; }
.step {
  flex: 1 1 105px;
  text-align: center;
  padding: .6rem .5rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--glass-border);
  color: var(--text-soft);
  font-size: .73rem; font-weight: 650;
}
.step.is-done {
  background: rgba(16, 185, 129, .12);
  border-color: rgba(16, 185, 129, .28);
  color: var(--green-300);
}
.step.is-current {
  background: var(--grad-cosmic);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--glow-amber);
}


/* =====================================================================
   17  PROGRESS BARS
   ===================================================================== */
.progress {
  height: 7px; border-radius: 4px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
}
.progress__bar {
  height: 100%;
  border-radius: 4px;
  background: var(--grad-amber);
  box-shadow: 0 0 12px rgba(245, 166, 35, .5);
  transition: width 500ms cubic-bezier(.4, 0, .2, 1);
}
.progress__bar--gold {
  background: var(--grad-solar);
  box-shadow: 0 0 12px rgba(255, 188, 76, .55);
}
.progress-note { font-size: .73rem; color: var(--text-muted); margin-top: .35rem; }


/* =====================================================================
   18  ALERTS & EMPTY STATES
   Alert icons are drawn by CSS from the modifier class, so every alert
   carries a shape as well as a colour.
   ===================================================================== */
.alert {
  display: flex; align-items: flex-start; gap: .7rem;
  padding: .85rem 1.05rem;
  border-radius: var(--radius);
  font-size: .86rem;
  border: 1px solid transparent;
  border-left-width: 3px;
  margin-bottom: 1rem;
  color: var(--text-2);
}
.alert::before {
  content: "";
  flex-shrink: 0;
  width: 18px; height: 18px;
  margin-top: .08rem;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: 18px 18px;   mask-size: 18px 18px;
}
.alert__icon { display: none; }   /* legacy inline glyphs are suppressed */

.alert--success {
  background: rgba(16, 185, 129, .10); border-color: rgba(16, 185, 129, .28); color: var(--green-300);
}
.alert--success::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
}
.alert--danger {
  background: rgba(239, 68, 68, .10); border-color: rgba(239, 68, 68, .28); color: var(--red-300);
}
.alert--danger::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m15 9-6 6'/%3E%3Cpath d='m9 9 6 6'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m15 9-6 6'/%3E%3Cpath d='m9 9 6 6'/%3E%3C/svg%3E");
}
.alert--warning {
  background: rgba(245, 166, 35, .10); border-color: rgba(245, 166, 35, .28); color: var(--gold-300);
}
.alert--warning::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
}
.alert--info {
  background: rgba(59, 130, 246, .10); border-color: rgba(59, 130, 246, .28); color: var(--blue-300);
}
.alert--info::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
}
.alert strong { color: inherit; }
.alert a { color: inherit; text-decoration: underline; }

.empty { text-align: center; padding: 3rem 1.5rem; color: var(--text-muted); }
.empty__icon {
  width: 64px; height: 64px; margin: 0 auto .85rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(245, 166, 35, .10);
  border: 1px solid rgba(245, 166, 35, .22);
  color: var(--accent-text);
}
.empty__title { font-weight: 700; color: var(--text); margin-bottom: .3rem; font-size: 1rem; }
.empty__text { font-size: .86rem; max-width: 430px; margin: 0 auto; color: var(--text-muted); }


/* =====================================================================
   19  TOASTS
   ===================================================================== */
.toast-stack {
  position: fixed;
  /* Sits below the top bar so it never covers the points balance,
     which must stay visible at all times. */
  top: calc(var(--topbar-h) + .75rem);
  right: 1rem;
  z-index: 1200;
  display: flex; flex-direction: column; gap: .6rem;
  max-width: min(380px, calc(100vw - 2rem));
  pointer-events: none;
}
.toast-stack > * { pointer-events: auto; }
.toast {
  display: flex; align-items: flex-start; gap: .7rem;
  background: rgba(11, 16, 38, .96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-edge);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg), 0 0 26px rgba(124, 58, 237, .20);
  padding: .85rem 1rem;
  font-size: .87rem;
  color: var(--text-2);
  animation: toast-in 280ms cubic-bezier(.2, .9, .3, 1.2);
}
.toast.is-leaving { animation: toast-out 200ms forwards; }
.toast--success { border-left-color: var(--green-500); }
.toast--danger  { border-left-color: var(--red-500); }
.toast--warning { border-left-color: var(--amber-500); }
.toast--info    { border-left-color: var(--blue-500); }
.toast__icon { flex-shrink: 0; margin-top: .05rem; }
.toast--success .toast__icon { color: var(--green-300); }
.toast--danger  .toast__icon { color: var(--red-300); }
.toast--warning .toast__icon { color: var(--gold-300); }
.toast--info    .toast__icon { color: var(--blue-300); }
.toast__body { flex: 1; }
.toast__title { font-weight: 700; margin-bottom: .1rem; color: var(--text); }
.toast__close {
  background: none; border: 0; cursor: pointer;
  color: var(--text-soft); font-size: 1.1rem; line-height: 1;
  padding: 0 .1rem;
}
.toast__close:hover { color: var(--text); }

@keyframes toast-in  { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateX(40px); } }


/* =====================================================================
   20  MODALS & CELEBRATION
   ===================================================================== */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(3, 5, 14, .78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 1100;
  display: none;
  align-items: center; justify-content: center;
  padding: 1rem;
}
.modal-backdrop.is-open { display: flex; animation: fade-in 160ms; }

.modal {
  position: relative;
  width: 100%; max-width: 480px;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  background: linear-gradient(160deg, rgba(17, 22, 47, .97), rgba(8, 11, 31, .98));
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg), 0 0 50px rgba(124, 58, 237, .25);
  animation: modal-in 260ms cubic-bezier(.2, .9, .3, 1.1);
}
.modal::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 1px;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background: linear-gradient(90deg, transparent, rgba(167,139,250,.6), transparent);
}
.modal--wide { max-width: 760px; }
.modal__head { padding: 1.4rem 1.6rem .8rem; }
.modal__title { margin: 0; font-size: 1.12rem; }
.modal__sub { font-size: .85rem; color: var(--text-muted); margin: .25rem 0 0; }
.modal__body { padding: .5rem 1.6rem 1.3rem; }
.modal__foot {
  display: flex; gap: .6rem; justify-content: flex-end;
  padding: 1rem 1.6rem 1.45rem;
  flex-wrap: wrap;
}

@keyframes fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-in { from { opacity: 0; transform: translateY(20px) scale(.97); } to { opacity: 1; transform: none; } }

/* Summary rows (confirmation dialogs) */
.summary {
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  overflow: hidden;
  background: rgba(5, 8, 22, .35);
}
.summary__row {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .7rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  font-size: .87rem;
}
.summary__row:last-child { border-bottom: 0; }
.summary__row--total {
  background: rgba(245, 166, 35, .10);
  font-weight: 750;
  border-top: 1px solid rgba(245, 166, 35, .22);
}
.summary__label { color: var(--text-muted); }
.summary__value { font-weight: 650; text-align: right; color: var(--text); }

/* ---------- Celebration: points awarded / reward unlocked ---------- */
.celebrate {
  position: relative;
  text-align: center;
  padding: 2.2rem 1.5rem 1.4rem;
  overflow: hidden;
}
.celebrate__burst {
  position: relative;
  width: 110px; height: 110px;
  margin: 0 auto 1.1rem;
  display: grid; place-items: center;
}
.celebrate__burst::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 188, 76, .45), transparent 65%);
  animation: burst-glow 2.2s ease-out infinite;
}
.celebrate__star {
  position: relative;
  color: var(--gold-300);
  filter: drop-shadow(0 0 18px rgba(255, 188, 76, .8));
  animation: burst-star 700ms cubic-bezier(.2, .9, .3, 1.4);
}
@keyframes burst-glow {
  0%   { transform: scale(.7); opacity: .85; }
  70%  { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}
@keyframes burst-star {
  0%   { transform: scale(.3) rotate(-35deg); opacity: 0; }
  60%  { transform: scale(1.18) rotate(8deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* Orbiting sparks around the burst */
.celebrate__spark {
  position: absolute;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold-300);
  box-shadow: 0 0 8px var(--gold-400);
  animation: spark-fly 900ms cubic-bezier(.2, .8, .3, 1) forwards;
  opacity: 0;
}
@keyframes spark-fly {
  0%   { transform: translate(0, 0) scale(0); opacity: 0; }
  35%  { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(1); opacity: 0; }
}

.celebrate__amount {
  font-size: 2.5rem; font-weight: 800;
  letter-spacing: -.03em;
  color: var(--gold-300);
  font-variant-numeric: tabular-nums;
  filter: drop-shadow(0 0 16px rgba(255, 188, 76, .4));
  line-height: 1.1;
}
.celebrate__headline {
  font-size: .72rem; font-weight: 800; letter-spacing: .22em;
  text-transform: uppercase; color: var(--accent-text);
  margin-bottom: .5rem;
}
.celebrate__name { font-size: 1.05rem; font-weight: 700; color: var(--text); margin: .3rem 0 .1rem; }
.celebrate__code {
  display: inline-block; margin-top: .85rem;
  font-family: var(--mono); font-size: .8rem;
  color: var(--accent-text);
  background: var(--accent-tint);
  border: 1px solid var(--accent-border);
  padding: .3rem .7rem; border-radius: 8px;
}


/* =====================================================================
   21  PAGINATION
   ===================================================================== */
.pagination {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding: .9rem 1.3rem;
  border-top: 1px solid var(--glass-border);
  font-size: .82rem; color: var(--text-muted);
}
.pagination strong { color: var(--text); }
.pagination__pages { display: flex; gap: .25rem; flex-wrap: wrap; }
.pagination__link {
  min-width: 34px; height: 34px;
  display: grid; place-items: center;
  padding: 0 .55rem;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 9px;
  font-size: .82rem; font-weight: 650;
  color: var(--text-2);
  transition: all var(--t-fast);
}
.pagination__link:hover {
  background: var(--glass-hover);
  border-color: rgba(245, 166, 35, .40);
  color: var(--text); text-decoration: none;
}
.pagination__link.is-active {
  background: var(--slate-600);
  border-color: var(--accent); color: var(--accent);
  box-shadow: var(--glow-amber);
}
.pagination__link.is-disabled { opacity: .35; pointer-events: none; }


/* =====================================================================
   22  NOTIFICATIONS
   ===================================================================== */
.notif-item {
  display: flex; gap: .85rem; align-items: flex-start;
  padding: .9rem 1.3rem;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  transition: background var(--t-fast);
  color: inherit;
}
.notif-item:last-child { border-bottom: 0; }
.notif-item:hover { background: rgba(255, 255, 255, .035); text-decoration: none; }
.notif-item.is-unread {
  background: linear-gradient(90deg, rgba(245, 166, 35, .12), transparent);
  box-shadow: inset 2px 0 0 var(--accent);
}
.notif-item.is-unread:hover { background: linear-gradient(90deg, rgba(245, 166, 35, .18), transparent); }
.notif-item__icon {
  width: 38px; height: 38px; flex-shrink: 0;
  border-radius: 11px; display: grid; place-items: center;
  background: rgba(245, 166, 35, .13);
  border: 1px solid rgba(245, 166, 35, .26);
  color: var(--accent-text);
}
.notif-item__icon--success { background: rgba(16,185,129,.13); border-color: rgba(16,185,129,.28); color: var(--green-300); }
.notif-item__icon--danger  { background: rgba(239,68,68,.13);  border-color: rgba(239,68,68,.28);  color: var(--red-300); }
.notif-item__icon--warning { background: rgba(245, 166, 35,.13); border-color: rgba(245, 166, 35,.28); color: var(--gold-300); }
.notif-item__title { font-weight: 650; font-size: .87rem; color: var(--text); }
.notif-item__msg   { font-size: .81rem; color: var(--text-muted); }
.notif-item__time  { font-size: .73rem; color: var(--text-soft); white-space: nowrap; }

.notif-panel { width: min(390px, calc(100vw - 2rem)); max-height: 450px; overflow-y: auto; padding: 0; }
.notif-panel .notif-item { padding: .75rem .95rem; }


/* =====================================================================
   23  ESS QUICK TILE
   ===================================================================== */
.ess-tile {
  position: relative; overflow: hidden;
  max-width: 330px;
  padding: 1.5rem;
  text-align: center;
  border-radius: var(--radius-2xl);
  border: 1px solid rgba(245, 166, 35, .30);
  background:
    radial-gradient(400px 200px at 50% -20%, rgba(124, 58, 237, .45), transparent 70%),
    linear-gradient(160deg, rgba(17, 22, 47, .95), rgba(5, 8, 22, .98));
  box-shadow: var(--shadow-md), 0 0 34px rgba(124, 58, 237, .22);
  color: var(--text-2);
}
.ess-tile::after {
  content: "";
  position: absolute; left: -50px; bottom: -70px;
  width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 188, 76, .18), transparent 70%);
  pointer-events: none;
}
.ess-tile__head {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  font-size: .72rem; font-weight: 800; letter-spacing: .2em;
  text-transform: uppercase; color: var(--accent-text);
}
.ess-tile__points {
  position: relative; z-index: 1;
  font-size: 2.6rem; font-weight: 800; letter-spacing: -.03em;
  margin: .55rem 0 .05rem;
  font-variant-numeric: tabular-nums;
  color: var(--gold-300);
  filter: drop-shadow(0 0 18px rgba(255, 188, 76, .4));
}
.ess-tile__unit {
  position: relative; z-index: 1;
  font-size: .68rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--text-soft); font-weight: 700;
}
.ess-tile__rank {
  position: relative; z-index: 1;
  font-size: .88rem; margin: .7rem 0 1rem; color: var(--text-2);
}
.ess-tile .btn { position: relative; z-index: 1; }


/* =====================================================================
   24  SIGN IN
   A single full-viewport screen: brand story on the left, form on the
   right, sitting directly on the sky with no card around it.
   ===================================================================== */

/* On the sign-in screen the sky reads navy rather than violet, so the
   amber controls stay the brightest thing on the page. */
body.is-auth .galaxy-bg { filter: saturate(.5) brightness(.8); }
body.is-auth .galaxy-spirals { opacity: .5; }

/* A denser sky here: the same three tiled fields, repeated more often and
   at full strength, so sign-in reads as a proper star map. */
body.is-auth .galaxy-stars { opacity: 1; background-size: 190px 190px; }
body.is-auth .galaxy-stars::before { background-size: 150px 150px; }
body.is-auth .galaxy-stars::after  { background-size: 265px 265px; }

.auth {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  align-content: center;
  padding: 5.5rem clamp(1.25rem, 5vw, 5rem) 4.5rem;
}

/* Faint engineering grid, strongest behind the headline. */
.auth::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 54px 54px;
  -webkit-mask-image: radial-gradient(1150px 780px at 28% 20%, #000, transparent 72%);
          mask-image: radial-gradient(1150px 780px at 28% 20%, #000, transparent 72%);
}

/* Warm glow overhead plus a navy wash that settles the whole scene. */
.auth::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(760px 520px at 55% -10%, rgba(245, 166, 35, .26), transparent 70%),
    linear-gradient(180deg, rgba(7, 12, 24, .30), rgba(4, 7, 16, .70));
}

.auth__logo {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--grad-amber);
  color: var(--slate-700);
  box-shadow: 0 6px 20px rgba(245, 166, 35, .38);
}

.auth > .auth__logo {
  position: absolute;
  top: 2rem;
  left: clamp(1.25rem, 5vw, 5rem);
}

.auth__grid {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: center;
  gap: clamp(2rem, 7vw, 7rem);
}

/* ---------- Left: the brand story ---------- */
.auth__badge {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .42rem .85rem;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--glass-border);
  color: var(--text-2);
  font-size: .68rem; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase;
}
.auth__badge .icon { color: var(--accent); }

.auth__title {
  margin: 1.6rem 0 0;
  font-size: clamp(2.4rem, 4.6vw, 3.9rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.035em;
  color: var(--text);
}

.auth__lede {
  margin: 1.1rem 0 0;
  max-width: 34rem;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--text-muted);
}

.auth__features {
  list-style: none;
  margin: 2.6rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.15rem;
  max-width: 34rem;
}
.auth__feature { display: flex; align-items: flex-start; gap: .9rem; }
.auth__feature-icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--glass-border);
  color: var(--accent);
}
.auth__feature-body { display: flex; flex-direction: column; gap: .1rem; }
.auth__feature-body strong { font-size: .92rem; font-weight: 700; color: var(--text); }
.auth__feature-body span   { font-size: .855rem; color: var(--text-muted); line-height: 1.45; }

/* ---------- Right: the form, no card ---------- */
.auth__panel { width: 100%; max-width: 430px; justify-self: end; }
.auth__heading { font-size: 1.95rem; font-weight: 800; letter-spacing: -.02em; margin: 0 0 .3rem; }
.auth__sub { color: var(--text-muted); font-size: .9rem; margin: 0 0 1.5rem; }

/* Notices here are full boxes rather than railed strips: the page has no
   card edges for a rail to sit against. Errors keep their red. */
.auth__panel .alert {
  border-left-width: 1px;
  border-radius: var(--radius);
  font-size: .855rem;
  margin-bottom: 1.1rem;
}
.auth__panel .alert--info,
.auth__panel .alert--success {
  background: var(--accent-tint);
  border-color: var(--accent-border);
  color: var(--accent-text);
}

/* Floating-label field with a leading glyph. */
.ifield { position: relative; margin-bottom: 1rem; }
.ifield__input {
  width: 100%;
  font-family: inherit; font-size: .92rem; font-weight: 500;
  color: var(--text);
  padding: 1.45rem 2.9rem .55rem 2.9rem;
  background: rgba(32, 42, 54, .62);
  border: 1px solid var(--glass-edge);
  border-radius: 12px;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.ifield__input:hover:not(:disabled) { border-color: rgba(255, 255, 255, .24); }
.ifield__input:focus {
  outline: 0;
  border-color: var(--accent);
  background: rgba(32, 42, 54, .82);
  box-shadow: 0 0 0 3px var(--accent-ring), 0 0 20px rgba(245, 166, 35, .16);
}

.ifield__label {
  position: absolute;
  left: 2.9rem; top: 50%;
  transform: translateY(-50%);
  font-size: .92rem; font-weight: 500;
  color: var(--text-muted);
  pointer-events: none;
  transition: all var(--t-fast);
}
.ifield__input:focus + .ifield__label,
.ifield__input:not(:placeholder-shown) + .ifield__label {
  top: .58rem;
  transform: none;
  font-size: .655rem; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--accent);
}

.ifield__icon {
  position: absolute;
  left: 1rem; top: 50%;
  transform: translateY(-50%);
  display: grid; place-items: center;
  color: var(--text-soft);
  pointer-events: none;
  transition: color var(--t-fast);
}
.ifield__input:focus ~ .ifield__icon { color: var(--accent); }

.ifield .pw-toggle { right: .45rem; }

.auth__submit {
  margin-top: .45rem;
  padding-block: .92rem;
  border-radius: 12px;
  font-size: .97rem; font-weight: 800;
  box-shadow: 0 8px 28px rgba(245, 166, 35, .38);
}
.auth__submit:hover { box-shadow: 0 10px 34px rgba(245, 166, 35, .52), var(--glow-amber); }

.auth__help {
  margin: 1.15rem 0 0;
  text-align: center;
  font-size: .8rem;
  color: var(--text-soft);
}

.auth__copy {
  position: absolute;
  left: clamp(1.25rem, 5vw, 5rem);
  bottom: 1.8rem;
  margin: 0;
  font-size: .755rem;
  color: var(--text-soft);
}
.auth__ver { display: block; opacity: .7; margin-top: .15rem; }

.pw-toggle {
  position: absolute; right: .3rem; top: 50%; transform: translateY(-50%);
  background: none; border: 0; cursor: pointer;
  padding: .4rem .55rem;
  color: var(--text-soft); border-radius: 7px;
  display: grid; place-items: center;
  transition: color var(--t-fast), background var(--t-fast);
}
.pw-toggle:hover { color: var(--accent-text); background: rgba(255, 255, 255, .06); }

/* Sign-in is meant to stay a single view, so on short viewports the brand
   column tightens rather than the page growing a scrollbar. */
@media (max-height: 820px) {
  .auth { padding-top: 4.4rem; padding-bottom: 3.4rem; }
  .auth > .auth__logo { top: 1.5rem; width: 38px; height: 38px; }
  .auth__title { font-size: clamp(2.1rem, 3.7vw, 3.1rem); margin-top: 1.25rem; }
  .auth__lede { margin-top: .85rem; font-size: .95rem; }
  .auth__features { margin-top: 1.75rem; gap: .85rem; }
  .auth__feature-icon { width: 32px; height: 32px; }
  .auth__heading { font-size: 1.75rem; }
  .auth__sub { margin-bottom: 1.2rem; }
}

@media (max-height: 680px) {
  .auth { padding-top: 3.6rem; padding-bottom: 2.8rem; }
  .auth > .auth__logo { top: 1rem; width: 32px; height: 32px; border-radius: 9px; }
  .auth__badge { padding: .32rem .7rem; font-size: .63rem; }
  .auth__title { font-size: clamp(1.85rem, 3.2vw, 2.5rem); margin-top: 1rem; }
  .auth__lede { margin-top: .7rem; font-size: .89rem; }
  .auth__features { margin-top: 1.25rem; gap: .62rem; }
  .auth__feature-icon { width: 29px; height: 29px; border-radius: 8px; }
  .auth__feature-body strong { font-size: .87rem; }
  .auth__feature-body span { font-size: .8rem; }
  .ifield { margin-bottom: .75rem; }
  .auth__copy { bottom: 1.1rem; }
}



/* =====================================================================
   25  UTILITIES
   ===================================================================== */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; }
.grid-main-side { display: grid; grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr); gap: 1.3rem; }
.grid-side-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.85fr); gap: 1.3rem; }

.flex            { display: flex; }
.flex-col        { display: flex; flex-direction: column; }
.items-center    { align-items: center; }
.items-start     { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.flex-wrap       { flex-wrap: wrap; }
.flex-1          { flex: 1; }
.gap-1 { gap: .35rem; } .gap-2 { gap: .6rem; } .gap-3 { gap: .9rem; } .gap-4 { gap: 1.3rem; }

.mt-0 { margin-top: 0; }      .mt-1 { margin-top: .4rem; }    .mt-2 { margin-top: .8rem; }
.mt-3 { margin-top: 1.2rem; } .mt-4 { margin-top: 1.6rem; }
.mb-0 { margin-bottom: 0; }   .mb-1 { margin-bottom: .4rem; } .mb-2 { margin-bottom: .8rem; }
.mb-3 { margin-bottom: 1.2rem; } .mb-4 { margin-bottom: 1.6rem; }

.text-sm    { font-size: .82rem; }
.text-xs    { font-size: .75rem; }
.text-muted { color: var(--text-muted); }
.text-soft  { color: var(--text-soft); }
.text-right { text-align: right; }
.text-center{ text-align: center; }
.font-bold  { font-weight: 750; }
.font-semi  { font-weight: 650; }
.nowrap     { white-space: nowrap; }
.tabular    { font-variant-numeric: tabular-nums; }
.break-word { overflow-wrap: anywhere; }

.w-full { width: 100%; }
.hidden { display: none !important; }

/* Cosmic gradient text, used sparingly for hero headings */
.text-cosmic {
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}


/* =====================================================================
   26  RESPONSIVE
   ===================================================================== */
@media (max-width: 1200px) {
  .grid-main-side, .grid-side-main { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1024px) {
  /* Stacking the brand story would push the form off-screen, and sign-in
     is meant to stay a single view, so the story steps aside. */
  .auth__grid { grid-template-columns: 1fr; }
  .auth__intro { display: none; }
  .auth__panel { justify-self: center; }
  .auth__copy { left: 50%; transform: translateX(-50%); text-align: center; }
}

@media (max-width: 900px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  /* Tablet: 2–3 reward cards per row */
  .reward-grid { grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); }
  .card-grid   { grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); }
}

@media (max-width: 860px) {
  /* The login panel stacks here, so there is no open sky left to fly in. */
  .galaxy-cruiser { display: none; }

  .sidebar { transform: translateX(-100%); box-shadow: var(--shadow-lg); }
  .sidebar.is-open { transform: none; }
  .main { margin-left: 0; }
  .topbar__toggle { display: grid; place-items: center; }
  .content { padding: 1.1rem; }

  .sidebar-scrim {
    position: fixed; inset: 0;
    background: rgba(3, 5, 14, .70);
    backdrop-filter: blur(3px);
    z-index: 55;
    display: none;
  }
  .sidebar-scrim.is-open { display: block; animation: fade-in 160ms; }

  .usermenu__meta { display: none; }
  .points-hero { padding: 1.5rem; }
  .points-hero__value { font-size: 2.7rem; }
  .page-head { flex-direction: column; align-items: stretch; }
  .podium { padding: 1.5rem .8rem 1.2rem; gap: .65rem; }
}

@media (max-width: 640px) {
  body { font-size: 14px; }
  .content { padding: .9rem; }
  .card__body, .card__head { padding: 1rem; }
  .points-hero { padding: 1.3rem; border-radius: var(--radius-xl); }
  .points-hero__value { font-size: 2.3rem; }
  .points-hero__meta { gap: 1.4rem; }
  .galaxy-hero { padding: 1.6rem 1rem; }
  .galaxy-hero__title { font-size: 1.45rem; }

  /* Mobile: 1–2 reward cards per row, touch-friendly */
  .reward-grid { grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: .8rem; }
  .card-grid   { grid-template-columns: 1fr; }
  .reward-card__body { padding: .8rem .85rem; }
  .reward-card__foot { padding: .75rem .85rem; }
  .reward-card__name { font-size: .88rem; }
  .reward-card__desc { display: none; }

  .stat-grid { grid-template-columns: repeat(auto-fit, minmax(152px, 1fr)); gap: .75rem; }
  .stat { padding: .9rem; gap: .7rem; }
  .stat__icon { width: 40px; height: 40px; }
  .stat__value { font-size: 1.35rem; }

  .quick-actions { grid-template-columns: repeat(auto-fit, minmax(108px, 1fr)); gap: .6rem; }
  .quick-action { padding: .9rem .5rem; }
  .quick-action__icon { width: 40px; height: 40px; }
  .quick-action__label { font-size: .78rem; }

  .filters { padding: .85rem; }
  .filters .field { min-width: 100%; flex-basis: 100%; }

  .table th, .table td { padding: .65rem .7rem; }

  .modal__head, .modal__body, .modal__foot { padding-left: 1.15rem; padding-right: 1.15rem; }
  .modal__foot { flex-direction: column-reverse; }
  .modal__foot .btn { width: 100%; }

  .toast-stack { left: 1rem; right: 1rem; max-width: none; }

  /* Podium stacks on small screens: #1 first */
  .podium { grid-template-columns: 1fr; gap: 1rem; }
  .podium__base { display: none; }
  .podium__slot--1 { order: -1; }

  /* Comfortable touch targets */
  .btn { min-height: 42px; }
  .btn--sm { min-height: 36px; }
  .nav-link { padding-top: .7rem; padding-bottom: .7rem; }
}

@media (max-width: 400px) {
  .reward-grid { grid-template-columns: 1fr; }
}


/* =====================================================================
   27  PRINT
   Reports must print legibly, so print flips to ink-on-paper.
   ===================================================================== */
@media print {
  .galaxy-bg, .galaxy-stars,
  .galaxy-spirals, .galaxy-sparks, .galaxy-cruiser,
  .sidebar, .topbar, .page-head__actions, .filters,
  .pagination, .toast-stack, .btn, .sidebar-scrim { display: none !important; }

  body { background: #fff !important; color: #000 !important; font-size: 11px; }
  .main { margin-left: 0; }
  .content { padding: 0; max-width: none; }

  .card, .stat, .galaxy-card {
    background: #fff !important;
    border: 1px solid #ccc !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    page-break-inside: avoid;
  }
  .card::before, .stat::after { display: none !important; }

  h1, h2, h3, h4, .cell-main, .stat__value, .table td { color: #000 !important; }
  .text-muted, .cell-sub, .stat__label { color: #444 !important; }

  .table th {
    background: #f1f1f1 !important; color: #000 !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .table td { border-bottom: 1px solid #ddd !important; }

  .badge, .points-pill {
    border: 1px solid #999 !important; color: #000 !important;
    background: none !important;
  }
  a { color: inherit; text-decoration: none; }
}


/* =====================================================================
   28  REDUCED MOTION & ACCESSIBILITY
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  /* Hold the drifting starfield and every cosmic pulse completely still */
  .galaxy-stars,
  .galaxy-stars::before,
  .galaxy-stars::after,
  .galaxy-spiral__disc,
  .galaxy-spiral__arms,
  .galaxy-spiral__knots,
  .galaxy-spiral__core,
  .galaxy-cruiser,
  .cruiser__flame,
  .spark,
  .spark::after,
  .points-hero::after,
  .celebrate__burst::before,
  .celebrate__star,
  .celebrate__spark,
  .badge--live .status-dot { animation: none !important; }

  /* Flares still need to be visible once their pulse is frozen. */
  .spark { opacity: .55; transform: none; }
  .shooting-star { display: none; }

  .celebrate__spark { display: none; }
  .stat:hover, .task-card:hover, .reward-card:hover, .quick-action:hover { transform: none; }
}

/* Honour forced-colours / high-contrast modes */
@media (forced-colors: active) {
  .card, .stat, .task-card, .reward-card, .modal, .btn { border: 1px solid CanvasText; }
  .galaxy-bg, .galaxy-stars,
  .galaxy-spirals, .galaxy-sparks, .galaxy-cruiser { display: none; }
}