/* ==========================================================================
   Laundry League — Design System
   Strictly two brand colors — blue #2D7DFF and green #86C023 — on white
   (light theme) or near-black (dark theme) glass surfaces. Toggle via the
   nav button; assets/js/app.js persists the choice and defaults to the
   visitor's OS preference. Space Grotesk display type, Plus Jakarta Sans
   body, JetBrains Mono for stats/HUD.
   ========================================================================== */

:root {
  /* ---- page background (light theme, default) ---------------------------- */
  --bg-page: #F1F5FC;

  /* ---- glass surfaces ------------------------------------------------------ */
  --glass:        rgba(255,255,255,0.68);
  --glass-strong: rgba(255,255,255,0.86);
  --glass-border: rgba(255,255,255,0.85);
  --line:         rgba(103,124,168,0.20);
  --track:        rgba(103,124,168,0.12);
  --field-bg:     rgba(255,255,255,0.6);
  --field-bg-focus: #fff;

  --nav-bg:          rgba(255,255,255,0.55);
  --nav-bg-scrolled: rgba(255,255,255,0.82);
  --nav-bg-mobile:   rgba(255,255,255,0.94);

  /* ---- the two brand colors, as gradient pairs + glow ---------------------- */
  --blue:      #2D7DFF;
  --blue-2:    #62A2FF;
  --blue-dim:  #1F5FCC;
  --blue-ink:  #163F8A;
  --blue-glow: rgba(45,125,255,0.38);

  --green:      #86C023;
  --green-2:    #A6DE4E;
  --green-dim:  #6B9A1B;
  --green-ink:  #4F7314;
  --green-glow: rgba(134,192,35,0.35);

  /* Reserved for validation errors only — everything else stays on-brand. */
  --danger:     #EF4444;
  --danger-dim: #B91C1C;

  --locked:      #DCE3F0;
  --locked-text: #6B7690;

  --text-primary: #0F1B2D;
  --text-muted:   #57647A;
  --text-faint:   #8593AC;

  --road:        #CBD5EA;   /* neutral path surface — not a brand accent */
  --road-line:   #ffffff;

  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 30px;

  --shadow-soft: 0 20px 50px -26px rgba(15,27,45,0.35);

  color-scheme: light;
}

/* ---- dark theme — same variable names, same two brand colors ------------- */
html[data-theme="dark"] {
  --bg-page: #0A0F1C;

  --glass:        rgba(255,255,255,0.05);
  --glass-strong: rgba(22,30,48,0.78);
  --glass-border: rgba(255,255,255,0.10);
  --line:         rgba(255,255,255,0.12);
  --track:        rgba(255,255,255,0.08);
  --field-bg:     rgba(255,255,255,0.05);
  --field-bg-focus: rgba(255,255,255,0.09);

  --nav-bg:          rgba(10,15,28,0.55);
  --nav-bg-scrolled: rgba(10,15,28,0.82);
  --nav-bg-mobile:   rgba(14,20,36,0.96);

  --blue-glow: rgba(45,125,255,0.5);
  --green-glow: rgba(134,192,35,0.45);

  --locked:      rgba(255,255,255,0.16);
  --locked-text: #8792AD;

  --text-primary: #F3F6FC;
  --text-muted:   #A7B1C6;
  --text-faint:   #6B7690;

  --road:        rgba(255,255,255,0.28);
  --road-line:   rgba(255,255,255,0.4);

  --shadow-soft: 0 20px 50px -22px rgba(0,0,0,0.6);

  color-scheme: dark;
}

* { box-sizing: border-box; }
/* The `hidden` attribute must always win over any `display` an element's
   own class sets (e.g. `.some-flex-thing[hidden]` would otherwise still
   render as flex) — without this, toggling `.hidden = true/false` in JS
   silently does nothing for any element whose class sets `display`. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
  transition: background .3s ease, color .3s ease;
}

/* Animated gradient-mesh background — two soft blurred blobs (blue + green
   only) that drift slowly, shared across every page via includes/header.php. */
.bg-mesh {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}
.bg-mesh span {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
  animation: mesh-float 24s ease-in-out infinite;
  will-change: transform;
}
html[data-theme="dark"] .bg-mesh span { opacity: 0.32; }
.bg-mesh span:nth-child(1) { width: 560px; height: 560px; background: var(--blue); top: -180px; left: -140px; animation-delay: 0s; }
.bg-mesh span:nth-child(2) { width: 520px; height: 520px; background: var(--green); bottom: -200px; right: -120px; animation-delay: -8s; }
.bg-mesh span:nth-child(3) { width: 420px; height: 420px; background: var(--blue); top: 40%; right: 12%; animation-delay: -16s; }
@keyframes mesh-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(50px, -40px) scale(1.08); }
  66%      { transform: translate(-35px, 30px) scale(0.94); }
}

.bg-noise {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
html[data-theme="dark"] .bg-noise { opacity: 0.06; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .bg-mesh span { animation: none; }
}

a { color: inherit; text-decoration: none; }

.ll-icon { display: inline-block; vertical-align: -0.15em; flex-shrink: 0; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
}

p { color: var(--text-muted); }

.container { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ==========================================================================
   Nav — frosted glass, gains depth on scroll, theme toggle lives here
   ========================================================================== */
.ll-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--nav-bg);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid transparent;
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.ll-nav.is-scrolled {
  background: var(--nav-bg-scrolled);
  border-bottom-color: var(--line);
  box-shadow: 0 8px 30px -18px rgba(15,27,45,0.35);
}
.ll-nav__inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.ll-nav__brand { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.ll-nav__brand-icon {
  width: 36px; height: 36px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--blue-2), var(--blue));
  color: #fff;
  box-shadow: 0 6px 16px -4px var(--blue-glow);
}
.ll-nav__brand em { color: var(--green-dim); font-style: normal; }
html[data-theme="dark"] .ll-nav__brand em { color: var(--green-2); }
.ll-nav__right { display: flex; align-items: center; gap: 10px; }
.ll-nav__links { display: flex; align-items: center; gap: 2px; flex-wrap: nowrap; }
.ll-nav__links a {
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.82rem;
  transition: color .15s, background .15s;
  display: flex; align-items: center; gap: 5px;
  white-space: nowrap; flex-shrink: 0;
  padding: 8px 10px;
  border-radius: 999px;
}
.ll-nav__links a:hover { color: var(--blue); background: rgba(45,125,255,0.08); }
.ll-nav__cta {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--blue-2), var(--blue));
  color: #fff !important;
  padding: 10px 20px !important;
  border-radius: 999px;
  font-weight: 700;
  box-shadow: 0 10px 22px -8px var(--blue-glow);
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease;
}
.ll-nav__cta:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 14px 28px -8px var(--blue-glow); }
.ll-nav__logout { opacity: 0.55; padding: 8px !important; }
.ll-nav__logout:hover { opacity: 1; background: rgba(239,68,68,0.08) !important; color: var(--danger) !important; }

.theme-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--glass);
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: color .2s ease, border-color .2s ease, transform .2s cubic-bezier(.34,1.56,.64,1);
}
.theme-toggle:hover { color: var(--blue); border-color: var(--blue); transform: rotate(-12deg) scale(1.08); }

.ll-role-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--glass);
  backdrop-filter: blur(10px);
  border: 1.5px solid var(--line);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
}

.ll-hud {
  display: flex; align-items: center; gap: 10px;
  background: var(--glass);
  backdrop-filter: blur(10px);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 5px 14px 5px 5px;
  transition: border-color .2s ease;
}
.ll-hud:hover { border-color: var(--blue); }
.ll-hud__level {
  width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(135deg, var(--green-2), var(--green));
  color: #fff;
  font-family: var(--font-mono); font-weight: 700; font-size: 0.75rem;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  box-shadow: 0 4px 10px -3px var(--green-glow);
}
.ll-hud__bar { width: 64px; height: 6px; border-radius: 999px; background: var(--track); overflow: hidden; }
.ll-hud__bar-fill { height: 100%; background: linear-gradient(90deg, var(--green), var(--blue)); }
.ll-hud__xp { font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-faint); white-space: nowrap; }

.ll-nav__burger { display: none; background: none; border: none; color: var(--text-primary); cursor: pointer; }

@media (max-width: 1180px) {
  .ll-nav__burger { display: block; }
  .ll-nav__links {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--nav-bg-mobile);
    backdrop-filter: blur(20px);
    flex-direction: column; align-items: stretch;
    padding: 12px 24px 20px;
    display: none;
    border-bottom: 1px solid var(--line);
  }
  .ll-nav__links.is-open { display: flex; }
  .ll-nav__links a { padding: 12px 6px; }
  .ll-hud { align-self: flex-start; margin-bottom: 6px; }
}

/* ==========================================================================
   Buttons — glowing gradient pills with a diagonal shine sweep on hover.
   Primary = blue, secondary = green. Only these two hues, ever.
   ========================================================================== */
.btn {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-display); font-weight: 700; font-size: 0.98rem; letter-spacing: -0.01em;
  border-radius: 999px;
  padding: 15px 30px;
  border: none;
  cursor: pointer;
  color: #fff;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease, filter .2s ease;
}
.btn::after {
  content: "";
  position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: skewX(-20deg);
  transition: left .65s ease;
  pointer-events: none;
}
.btn:hover::after { left: 140%; }
.btn:hover { transform: translateY(-3px) scale(1.02); }
.btn:active { transform: translateY(0) scale(0.96); }
.btn-primary {
  background: linear-gradient(135deg, var(--blue-2), var(--blue));
  box-shadow: 0 12px 26px -10px var(--blue-glow), 0 2px 8px rgba(15,27,45,0.1);
}
.btn-primary:hover { box-shadow: 0 18px 34px -10px var(--blue-glow), 0 4px 10px rgba(15,27,45,0.12); }
.btn-suds {
  background: linear-gradient(135deg, var(--green-2), var(--green));
  box-shadow: 0 12px 26px -10px var(--green-glow), 0 2px 8px rgba(15,27,45,0.1);
}
.btn-suds:hover { box-shadow: 0 18px 34px -10px var(--green-glow), 0 4px 10px rgba(15,27,45,0.12); }
.btn-ghost {
  background: var(--glass-strong);
  backdrop-filter: blur(12px);
  color: var(--text-primary);
  border: 1.5px solid var(--line);
  box-shadow: 0 6px 18px -10px rgba(15,27,45,0.15);
}
.btn-ghost:hover { border-color: var(--blue); color: var(--blue-dim); box-shadow: 0 10px 24px -10px var(--blue-glow); }
html[data-theme="dark"] .btn-ghost:hover { color: var(--blue-2); }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; filter: none; }
.btn:disabled::after { display: none; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { padding: 96px 0 64px; position: relative; overflow: hidden; }
.hero__inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; }
.hero__eyebrow {
  font-family: var(--font-mono);
  color: var(--blue-ink);
  background: rgba(45,125,255,0.1);
  border: 1px solid rgba(45,125,255,0.25);
  font-size: 0.78rem; letter-spacing: 1px;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
  display: inline-flex; align-items: center; gap: 7px;
}
html[data-theme="dark"] .hero__eyebrow { color: var(--blue-2); }
.hero h1 { font-size: clamp(2.5rem, 5vw, 4rem); margin-bottom: 0.4em; color: var(--text-primary); }
.hero h1 .hl {
  background: linear-gradient(100deg, var(--blue), var(--green));
  background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.hero p.lede { font-size: 1.15rem; max-width: 46ch; margin-bottom: 30px; }
.hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 38px; }
.hero__stats { display: flex; gap: 32px; flex-wrap: wrap; }
.hero__stat b { font-family: var(--font-display); font-size: 1.6rem; color: var(--text-primary); display: block; }
.hero__stat span { font-size: 0.82rem; color: var(--text-faint); }

/* ==========================================================================
   Promo banner — admin-uploaded image slides on the public home page
   (e.g. "New season, double XP" style promos). Dark card regardless of
   theme, since it's meant to pop against the page like a billboard.
   ========================================================================== */
.promo-banner {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: radial-gradient(120% 140% at 78% 20%, rgba(240,180,41,0.16), transparent 60%), linear-gradient(135deg, #10151F, #060809);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: var(--shadow-soft);
}
.promo-banner__slide {
  display: none;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 32px;
  padding: 48px;
  min-height: 320px;
}
.promo-banner__slide.is-active { display: grid; }
.promo-banner__eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono);
  font-size: 0.76rem; letter-spacing: 1px;
  color: #F0B429;
  background: rgba(240,180,41,0.12);
  border: 1px solid rgba(240,180,41,0.35);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 16px;
}
.promo-banner__text h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); color: #F5F7FB; margin-bottom: 12px; line-height: 1.15; }
.promo-banner__text p { color: rgba(232,236,245,0.72); font-size: 1rem; max-width: 42ch; margin-bottom: 24px; }
.promo-banner__media {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 24px 50px -18px rgba(0,0,0,0.6);
  aspect-ratio: 4 / 3;
}
.promo-banner__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.promo-banner__arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .2s ease;
}
.promo-banner__arrow:hover { background: rgba(255,255,255,0.18); }
.promo-banner__arrow--prev { left: 18px; }
.promo-banner__arrow--next { right: 18px; }
.promo-banner__dots { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; }
.promo-banner__dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.3); border: none; cursor: pointer; padding: 0; }
.promo-banner__dot.is-active { background: #F0B429; width: 22px; border-radius: 5px; }
@media (max-width: 760px) {
  .promo-banner__slide { grid-template-columns: 1fr; padding: 30px 24px 60px; gap: 22px; }
  .promo-banner__media { order: -1; }
  .promo-banner__arrow { display: none; }
}

/* Signature: glass "porthole" XP gauge with a glowing blue progress ring */
.porthole {
  --pct: 0;
  width: 280px; height: 280px;
  margin: 0 auto;
  position: relative;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, var(--glass-strong) 0 62%, transparent 62%),
    conic-gradient(from -90deg, var(--blue) calc(var(--pct) * 1%), var(--locked) 0);
  padding: 14px;
  box-shadow: 0 0 0 1px var(--glass-border), 0 30px 60px -24px var(--blue-glow), var(--shadow-soft);
  animation: porthole-in .8s cubic-bezier(.2,.8,.2,1);
}
@keyframes porthole-in {
  from { opacity: 0; transform: scale(0.85) rotate(-8deg); }
  to   { opacity: 1; transform: scale(1) rotate(0); }
}
.porthole::before {
  content: "";
  position: absolute; inset: 26px; border-radius: 50%;
  backdrop-filter: blur(10px);
  background: radial-gradient(circle at 32% 26%, rgba(255,255,255,0.95), transparent 55%), var(--glass-strong);
  border: 1px solid rgba(255,255,255,0.8);
}
html[data-theme="dark"] .porthole::before { background: radial-gradient(circle at 32% 26%, rgba(255,255,255,0.12), transparent 55%), var(--glass-strong); border-color: rgba(255,255,255,0.14); }
.porthole::after {
  content: "";
  position: absolute; top: 8%; left: 14%; width: 34%; height: 18%;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.9), transparent);
  filter: blur(1px);
  pointer-events: none;
  z-index: 3;
}
.porthole__content { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; z-index: 2; }
.porthole__level-label { font-family: var(--font-mono); font-size: 0.72rem; color: var(--blue); letter-spacing: 2px; text-transform: uppercase; }
.porthole__level { font-family: var(--font-display); font-size: 3.2rem; font-weight: 700; line-height: 1; margin: 4px 0; color: var(--text-primary); }
.porthole__pct { font-family: var(--font-mono); color: var(--text-muted); font-size: 0.85rem; }
.porthole__bubbles { position: absolute; inset: 0; overflow: hidden; border-radius: 50%; z-index: 1; }
.porthole__bubbles span { position: absolute; bottom: -20px; width: 10px; height: 10px; border-radius: 50%; background: rgba(45,125,255,0.4); animation: rise 6s infinite ease-in; }
@keyframes rise {
  0% { transform: translateY(0) scale(1); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translateY(-230px) scale(0.4); opacity: 0; }
}

.porthole--sm { width: 108px; height: 108px; padding: 6px; box-shadow: 0 0 0 1px var(--glass-border), 0 10px 24px -12px var(--blue-glow); animation: none; }
.porthole--sm::before { inset: 10px; }
.porthole--sm .porthole__level { font-size: 1.4rem; }
.porthole--sm .porthole__level-label { font-size: 0.55rem; }
.porthole--sm .porthole__pct { font-size: 0.6rem; }

@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero { text-align: center; padding-top: 64px; }
  .hero__ctas, .hero__stats { justify-content: center; }
  .hero p.lede { margin-left: auto; margin-right: auto; }
  .hero__eyebrow { margin-left: auto; margin-right: auto; }
}

/* ==========================================================================
   Sections / panels
   ========================================================================== */
.section { padding: 68px 0; }
.section-head { max-width: 640px; margin: 0 auto 44px; text-align: center; }
.section-head .eyebrow {
  font-family: var(--font-mono);
  color: var(--blue-dim);
  background: rgba(45,125,255,0.08);
  border: 1px solid rgba(45,125,255,0.2);
  letter-spacing: 1px; font-size: 0.76rem;
  padding: 5px 13px;
  border-radius: 999px;
  display: inline-block;
}
html[data-theme="dark"] .section-head .eyebrow { color: var(--blue-2); }

.icon-badge {
  position: relative; overflow: hidden;
  width: 48px; height: 48px; border-radius: 15px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--blue-2), var(--blue));
  color: #fff;
  box-shadow: 0 10px 22px -8px var(--blue-glow);
  margin-bottom: 16px;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.icon-badge--berry { background: linear-gradient(135deg, var(--blue-2), var(--blue)); box-shadow: 0 10px 22px -8px var(--blue-glow); }
.icon-badge--xp { background: linear-gradient(135deg, var(--green-2), var(--green)); box-shadow: 0 10px 22px -8px var(--green-glow); }
.icon-badge--violet { background: linear-gradient(135deg, var(--blue-2), var(--blue-dim)); box-shadow: 0 10px 22px -8px var(--blue-glow); }
.icon-badge--sm { width: 40px; height: 40px; border-radius: 12px; }
.title-row { display: flex; align-items: center; gap: 12px; }
.title-row .icon-badge { margin-bottom: 0; }

.panel {
  background: var(--glass-strong);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,0.15);
}

/* ==========================================================================
   Admin sub-nav — shared tab strip across every admin/*.php page
   ========================================================================== */
.admin-subnav {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 28px;
  padding: 6px;
  background: var(--glass-strong);
  backdrop-filter: blur(18px);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
}
.admin-subnav__tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.84rem;
  color: var(--text-muted);
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.admin-subnav__tab:hover { color: var(--blue-dim); background: rgba(45,125,255,0.08); }
.admin-subnav__tab.is-active {
  background: linear-gradient(135deg, var(--blue-2), var(--blue));
  color: #fff;
  box-shadow: 0 6px 16px -6px var(--blue-glow);
}

/* KPI cards for the admin dashboard */
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 32px; }
.kpi-grid > * { min-width: 0; }
.kpi-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .kpi-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .kpi-grid--3 { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .kpi-grid { grid-template-columns: 1fr; } }
.kpi-card {
  background: var(--glass-strong);
  backdrop-filter: blur(18px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 22px;
  box-shadow: 0 14px 30px -20px rgba(15,27,45,0.3);
  transition: transform .25s cubic-bezier(.2,.8,.2,1);
}
.kpi-card:hover { transform: translateY(-3px); }
.kpi-card__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.kpi-card__icon {
  width: 38px; height: 38px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--blue-2), var(--blue));
  color: #fff;
}
.kpi-card--green .kpi-card__icon { background: linear-gradient(135deg, var(--green-2), var(--green)); }
.kpi-card--red .kpi-card__icon { background: linear-gradient(135deg, #F87171, var(--danger)); }
.kpi-card--gold .kpi-card__icon { background: linear-gradient(135deg, #F0B429, #B8860B); }
.kpi-card__value { font-family: var(--font-display); font-size: 1.9rem; font-weight: 700; color: var(--text-primary); line-height: 1; }
.kpi-card__label { font-size: 0.82rem; color: var(--text-faint); margin-top: 6px; }

/* ==========================================================================
   Accounting statement — admin/accounting.php
   ========================================================================== */
.statement-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border-radius: var(--radius-sm);
  border-bottom: 1px solid var(--line);
}
.statement-row:last-child { border-bottom: none; }
.statement-row:hover { background: rgba(45,125,255,0.04); }
.statement-row__icon {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.statement-row__icon--revenue { background: rgba(134,192,35,0.14); color: var(--green-dim, var(--green)); }
.statement-row__icon--expense { background: rgba(239,68,68,0.12); color: var(--danger); }
.statement-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.statement-row__body strong { font-size: 0.88rem; color: var(--text-primary); }
.statement-row__body span { font-size: 0.8rem; color: var(--text-muted); }
.statement-row__body time { font-size: 0.72rem; color: var(--text-faint); margin-top: 2px; }
.statement-row__amount { flex-shrink: 0; font-family: var(--font-mono); font-weight: 700; font-size: 0.9rem; white-space: nowrap; }
.statement-row__amount--revenue { color: var(--green-dim, var(--green)); }
.statement-row__amount--expense { color: var(--danger); }
.statement-row__delete {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-faint); background: transparent; border: none; cursor: pointer;
}
.statement-row__delete:hover { background: rgba(239,68,68,0.1); color: var(--danger); }

/* Simple activity/list rows used on the admin dashboard */
.activity-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.activity-row:last-child { border-bottom: none; }
.activity-row__main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.activity-row__icon {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(45,125,255,0.1); color: var(--blue-dim);
}
.activity-row__text { min-width: 0; }
.activity-row__title { font-weight: 600; color: var(--text-primary); font-size: 0.92rem; }
.activity-row__meta { font-size: 0.78rem; color: var(--text-faint); }

/* ==========================================================================
   Level map — an illustrated, infinitely-scrolling winding road of level
   nodes in the spirit of a classic saga map, built strictly from blue and
   green. Nodes/road are positioned by JS (assets/js/app.js → initCandyMap);
   this file supplies the visual language.
   ========================================================================== */
.candy-map-wrap {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background:
    radial-gradient(320px 260px at 8% 4%,   rgba(45,125,255,0.14), transparent 70%),
    radial-gradient(300px 260px at 92% 18%, rgba(134,192,35,0.14), transparent 70%),
    radial-gradient(320px 280px at 10% 45%, rgba(134,192,35,0.10), transparent 70%),
    radial-gradient(320px 280px at 90% 62%, rgba(45,125,255,0.12), transparent 70%),
    radial-gradient(320px 280px at 12% 85%, rgba(45,125,255,0.10), transparent 70%),
    radial-gradient(320px 280px at 88% 95%, rgba(134,192,35,0.12), transparent 70%),
    linear-gradient(180deg, #EEF3FC 0%, #EEF9E9 100%);
}
html[data-theme="dark"] .candy-map-wrap {
  background:
    radial-gradient(320px 260px at 8% 4%,   rgba(45,125,255,0.16), transparent 70%),
    radial-gradient(300px 260px at 92% 18%, rgba(134,192,35,0.16), transparent 70%),
    radial-gradient(320px 280px at 10% 45%, rgba(134,192,35,0.12), transparent 70%),
    radial-gradient(320px 280px at 90% 62%, rgba(45,125,255,0.14), transparent 70%),
    radial-gradient(320px 280px at 12% 85%, rgba(45,125,255,0.12), transparent 70%),
    radial-gradient(320px 280px at 88% 95%, rgba(134,192,35,0.14), transparent 70%),
    linear-gradient(180deg, #0D1424 0%, #0B1A16 100%);
}
/* Twinkling stars — dark theme only, purely atmospheric. */
html[data-theme="dark"] .candy-map-wrap::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 15% 12%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 78% 8%, #fff, transparent),
    radial-gradient(1px 1px at 32% 28%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 62% 22%, #fff, transparent),
    radial-gradient(1px 1px at 88% 38%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 8% 52%, #fff, transparent),
    radial-gradient(1px 1px at 45% 65%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 72% 72%, #fff, transparent),
    radial-gradient(1px 1px at 22% 88%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 95% 90%, #fff, transparent);
  opacity: 0.5;
  animation: star-twinkle 4s ease-in-out infinite alternate;
}
@keyframes star-twinkle { 0% { opacity: 0.3; } 100% { opacity: 0.75; } }
.candy-map-scroll {
  height: 560px;
  overflow-y: auto; overflow-x: hidden;
  position: relative;
  scrollbar-width: thin;
  scrollbar-color: var(--blue) transparent;
}
.candy-map-scroll::-webkit-scrollbar { width: 8px; }
.candy-map-scroll::-webkit-scrollbar-thumb { background: var(--blue); border-radius: 999px; }

.candy-map { position: relative; width: 100%; min-height: 560px; }
.candy-map__sentinel { position: absolute; top: 40px; left: 0; width: 100%; height: 4px; }
.candy-map__path { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }

/* The road itself — a wide neutral ribbon (not a brand color) with a
   dashed center line, like a path drawn across a map. */
.candy-map__path .road-surface {
  fill: none;
  stroke: var(--road);
  stroke-width: 34;
  stroke-linecap: round;
}
.candy-map__path .road-line {
  fill: none;
  stroke: var(--road-line);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 2 16;
}
.candy-map__path .road-line.is-done {
  stroke: var(--green);
  stroke-width: 4;
  opacity: 0.85;
  stroke-dasharray: none;
  filter: drop-shadow(0 0 5px var(--green-glow));
}
.candy-map__path .road-line:not(.is-done) { animation: flow-dash 1.4s linear infinite; }
@keyframes flow-dash { to { stroke-dashoffset: -36; } }

.candy-node {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 66px; height: 66px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.candy-node__btn {
  width: 66px; height: 66px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
  border: 4px solid #fff;
  cursor: default;
  position: relative;
  overflow: hidden;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease;
}
html[data-theme="dark"] .candy-node__btn { border-color: rgba(255,255,255,0.85); }
.candy-node__btn::before {
  content: "";
  position: absolute; top: 6%; left: 16%; width: 42%; height: 26%;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.85), transparent);
  pointer-events: none;
}
.candy-node__num { position: relative; z-index: 1; }

.candy-node--done .candy-node__btn {
  background: linear-gradient(135deg, var(--green-2), var(--green));
  color: #fff;
  box-shadow: 0 10px 22px -8px var(--green-glow), 0 0 0 4px rgba(134,192,35,0.14);
}
.candy-node--current .candy-node__btn {
  width: 80px; height: 80px;
  background: linear-gradient(135deg, var(--blue-2), var(--blue));
  color: #fff;
  box-shadow: 0 14px 30px -10px var(--blue-glow), 0 0 0 8px rgba(45,125,255,0.18);
  cursor: pointer;
  animation: candy-pulse 2.2s ease-in-out infinite;
}
.candy-node--current { z-index: 3; }
.candy-node--locked .candy-node__btn {
  background: var(--locked);
  border: 4px dashed rgba(103,124,168,0.55);
  color: var(--locked-text);
  box-shadow: 0 4px 14px -6px rgba(15,27,45,0.35);
}
html[data-theme="dark"] .candy-node--locked .candy-node__btn {
  border-color: rgba(180,195,230,0.5);
  box-shadow: 0 4px 14px -6px rgba(0,0,0,0.5);
}
.candy-node:hover .candy-node__btn { transform: translateY(-3px) scale(1.05); }
.candy-node--done:hover .candy-node__btn { box-shadow: 0 16px 28px -8px var(--green-glow), 0 0 0 6px rgba(134,192,35,0.22); }
.candy-node--locked:hover .candy-node__btn { transform: translateY(-1px); box-shadow: 0 6px 14px -8px rgba(15,27,45,0.3); }
.candy-node--current:active .candy-node__btn,
.candy-node--current.is-pressed .candy-node__btn { transform: scale(0.93); transition: transform .1s ease; }
.candy-node--current:hover .candy-node__btn { transform: translateY(-4px) scale(1.08); }

@keyframes candy-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 14px 30px -10px var(--blue-glow), 0 0 0 8px rgba(45,125,255,0.18); }
  50%      { transform: scale(1.08); box-shadow: 0 18px 36px -10px var(--blue-glow), 0 0 0 14px rgba(45,125,255,0.1); }
}

.candy-node__flag {
  position: absolute; top: -32px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, var(--blue-2), var(--blue));
  color: #fff;
  font-family: var(--font-mono); font-size: 0.62rem; font-weight: 700; letter-spacing: 1px;
  padding: 5px 11px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 6px 16px -4px var(--blue-glow);
  display: inline-flex; align-items: center; gap: 3px;
  animation: flag-bob 2.2s ease-in-out infinite;
}
@keyframes flag-bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-3px); }
}
.candy-node__flag::after {
  content: "";
  position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--blue);
}
.candy-node__stars { position: absolute; bottom: -14px; left: 50%; transform: translateX(-50%); display: flex; gap: 1px; color: var(--green-dim); white-space: nowrap; }
html[data-theme="dark"] .candy-node__stars { color: var(--green-2); }
.candy-node__lock { position: absolute; bottom: -16px; left: 50%; transform: translateX(-50%); color: var(--locked-text); }
.candy-node__gift {
  position: absolute; top: -12px; right: -8px;
  width: 26px; height: 26px; border-radius: 50%;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  color: var(--blue-dim);
  box-shadow: 0 4px 12px -3px rgba(15,27,45,0.3);
}

/* Decorative landmarks dotted along the road — laundromat houses and bubble
   clusters, purely ornamental, alternating blue/green like the nodes. */
.candy-landmark {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  opacity: 0.85;
  pointer-events: none;
}
.candy-landmark--blue  { background: rgba(45,125,255,0.14); color: var(--blue-dim); }
.candy-landmark--green { background: rgba(134,192,35,0.16); color: var(--green-dim); }
html[data-theme="dark"] .candy-landmark--blue  { color: var(--blue-2); background: rgba(45,125,255,0.16); }
html[data-theme="dark"] .candy-landmark--green { color: var(--green-2); background: rgba(134,192,35,0.18); }

.candy-map__hint {
  text-align: center; padding: 12px 0 4px;
  font-size: 0.76rem; color: var(--text-faint); font-family: var(--font-mono);
  display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap;
}
.candy-map__loading {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  font-size: 0.68rem; font-family: var(--font-mono); color: var(--text-faint);
  opacity: 0; transition: opacity .2s;
}
.candy-map__loading.is-visible { opacity: 1; }

@media (max-width: 560px) { .candy-map-scroll { height: 460px; } }
@media (max-width: 420px) {
  .candy-node, .candy-node__btn { width: 54px; height: 54px; }
  .candy-node--current .candy-node__btn { width: 66px; height: 66px; }
  .candy-node__btn { font-size: 0.92rem; }
  .candy-landmark { width: 32px; height: 32px; }
}

/* ==========================================================================
   Cards grid (rewards / achievements / features)
   ========================================================================== */
.grid { display: grid; gap: 20px; }
.grid > * { min-width: 0; } /* prevents CSS Grid's default min-content sizing from blowing out the layout on narrow screens */
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grid-3, .grid-4 { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .why-grid { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .steps-row::before { display: none; } }
/* Common two-column patterns (main content + sidebar, or two equal panels) — replaces
   ad-hoc inline `style="grid-template-columns: ..."` so mobile can actually override it;
   inline styles beat any class-based media query, which was the root cause of the
   horizontal-overflow bug on dashboard/admin/index/campaigns/order-detail. */
.grid-aside { grid-template-columns: 1.4fr 1fr; }
.grid-halves { grid-template-columns: 1fr 1fr; }
@media (max-width: 860px) { .grid-aside, .grid-halves { grid-template-columns: 1fr; } }

.card {
  background: var(--glass-strong);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 28px;
  box-shadow: 0 16px 36px -22px rgba(15,27,45,0.3);
  transition: box-shadow .3s ease, border-color .3s ease;
  transform-style: preserve-3d;
  will-change: transform;
}
.card:hover { border-color: rgba(45,125,255,0.35); box-shadow: 0 26px 50px -20px var(--blue-glow); }
.card__icon { font-size: 1.8rem; margin-bottom: 12px; display: block; }
.card h3 { font-size: 1.1rem; margin-bottom: 6px; color: var(--text-primary); }
.card p { margin: 0; font-size: 0.93rem; }

/* Alternating section tint — gives the long marketing page visual rhythm
   instead of every section blurring into the next. Cheap: just a
   background swap, no layout change. */
.section--tint { background: var(--glass); }

/* "Why Laundry League" — deliberately lighter-weight than the boxed
   .card grid used elsewhere (How it works, Rewards): no card border or
   background, just icon + text in a loose row. Reads as a quick list of
   facts, not another wall of boxes. */
.why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 44px; }
.why-item { display: flex; gap: 16px; align-items: flex-start; }
.why-item .icon-badge { flex-shrink: 0; margin-bottom: 0; }
.why-item h3 { font-size: 1.05rem; margin-bottom: 4px; color: var(--text-primary); }
.why-item p { margin: 0; font-size: 0.92rem; }

/* "How it works" — numbered steps with a faint oversized digit behind the
   icon, and a connecting line across the row on desktop, so the sequence
   reads as a process rather than four generic feature cards. */
.steps-row { position: relative; }
.steps-row::before {
  content: '';
  position: absolute; top: 44px; left: 12.5%; right: 12.5%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--line) 15%, var(--line) 85%, transparent);
}
.step-card { position: relative; overflow: hidden; }
.step-card__num {
  position: absolute; top: -6px; right: 10px;
  font-family: var(--font-display); font-size: 3rem; font-weight: 800;
  color: var(--text-primary); opacity: 0.06; line-height: 1; pointer-events: none;
}

/* Testimonials (index.php) */
.testimonial-card { display: flex; flex-direction: column; }
.testimonial-card__stars { color: #F0B429; letter-spacing: 2px; font-size: 0.95rem; margin-bottom: 10px; }
.testimonial-card__quote { color: var(--text-primary); font-size: 0.98rem; line-height: 1.6; flex: 1; margin-bottom: 18px; }
.testimonial-card__author { display: flex; align-items: center; gap: 10px; }
.testimonial-card__avatar {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--blue-2), var(--blue));
  color: #fff; font-weight: 700; font-family: var(--font-display); font-size: 0.9rem;
}
.testimonial-card__author strong { display: block; font-size: 0.88rem; color: var(--text-primary); }
.testimonial-card__author span { font-size: 0.78rem; color: var(--text-faint); }

/* "Our Locations" map (index.php, request-location.php) */
.locations-map {
  position: relative;
  height: 420px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--glass);
}
.locations-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.locations-list__item {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 999px;
  background: var(--glass); border: 1px solid var(--line);
  font-size: 0.82rem; font-weight: 600; color: var(--text-muted);
}

.reward-card {
  background: var(--glass-strong);
  backdrop-filter: blur(18px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 26px;
  position: relative;
  box-shadow: 0 16px 36px -22px rgba(15,27,45,0.3);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
}
.reward-card:hover { transform: translateY(-4px); box-shadow: 0 24px 46px -20px var(--green-glow); }
.reward-card h3 { color: var(--text-primary); }
.reward-card.is-locked { opacity: 0.62; }
.reward-card.is-locked:hover { transform: none; box-shadow: 0 16px 36px -22px rgba(15,27,45,0.3); }
.reward-card .lvl-tag {
  font-family: var(--font-mono); font-size: 0.72rem; color: #fff;
  background: linear-gradient(135deg, var(--green-2), var(--green));
  padding: 4px 11px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 4px;
  margin-bottom: 14px; font-weight: 700;
}
.reward-card.is-locked .lvl-tag { background: var(--locked); color: var(--locked-text); }

.reward-card--inline {
  background: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  border: none; border-radius: 0; box-shadow: none; padding: 0;
}
.reward-card--inline:hover { transform: none; box-shadow: none; }

.badge-card {
  text-align: center;
  padding: 24px 16px;
  border-radius: var(--radius-md);
  background: var(--glass-strong);
  backdrop-filter: blur(18px);
  border: 1px solid var(--glass-border);
  box-shadow: 0 16px 36px -22px rgba(15,27,45,0.3);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
}
.badge-card:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 24px 46px -20px var(--blue-glow); }
.badge-card h4 { color: var(--text-primary); }
.badge-card.is-locked { opacity: 0.5; }
.badge-card.is-locked:hover { transform: none; }
.badge-card .icon {
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px; width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, var(--green-2), var(--green));
  color: #fff;
  box-shadow: 0 10px 20px -8px var(--green-glow);
}
.badge-card.is-locked .icon { background: var(--locked); color: var(--locked-text); box-shadow: none; }
.badge-card h4 { font-size: 0.93rem; margin-bottom: 4px; }
.badge-card p { font-size: 0.78rem; margin: 0; }

/* ==========================================================================
   Forms
   ========================================================================== */
.auth-wrap { max-width: 440px; margin: 70px auto; padding: 44px 38px; }
.auth-wrap h1 { font-size: 1.8rem; text-align: center; color: var(--text-primary); }
.auth-wrap p.sub { text-align: center; margin-bottom: 30px; }

.field { margin-bottom: 18px; }
.field label { display: block; font-size: 0.86rem; color: var(--text-muted); margin-bottom: 7px; font-weight: 600; }
.field input, .field select, .field textarea {
  width: 100%;
  background: var(--field-bg);
  border: 1.5px solid var(--line);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  padding: 13px 15px;
  font-family: var(--font-body);
  font-size: 0.96rem;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--blue);
  outline: none;
  background: var(--field-bg-focus);
  box-shadow: 0 0 0 4px rgba(45,125,255,0.12);
}
/* The dropdown POPUP a <select> opens is unstyled by default and falls
   back to a plain white background in most browsers — but the closed
   box above inherits --text-primary, which is a light color in dark
   mode. Without this, every option except the currently-highlighted one
   renders as near-invisible light text on white. Setting both explicitly
   on <option> fixes it in both themes. */
.field select option, select option {
  background: var(--bg-page);
  color: var(--text-primary);
}
.field-row { display: flex; gap: 14px; flex-wrap: wrap; }
.field-row .field { flex: 1 1 150px; min-width: 0; }
.checkboxes label { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; color: var(--text-primary); margin-bottom: 8px; }
.checkboxes input { width: auto; }

.form-foot { text-align: center; margin-top: 20px; font-size: 0.9rem; color: var(--text-muted); }

.alert { padding: 14px 17px; border-radius: var(--radius-sm); font-size: 0.9rem; margin-bottom: 18px; font-weight: 500; }
.alert-error { background: rgba(239,68,68,0.08); border: 1.5px solid var(--danger); color: var(--danger-dim); }
.alert-success { background: rgba(134,192,35,0.12); border: 1.5px solid var(--green); color: var(--green-ink); }
.alert-info { background: rgba(45,125,255,0.1); border: 1.5px solid var(--blue); color: var(--blue-ink); }
.alert-warning { background: rgba(240,180,41,0.1); border: 1.5px solid #F0B429; color: #8A6414; }
html[data-theme="dark"] .alert-success { color: var(--green-2); }
html[data-theme="dark"] .alert-info { color: var(--blue-2); }
html[data-theme="dark"] .alert-error { color: #FCA5A5; }
html[data-theme="dark"] .alert-warning { color: #F0B429; }

/* ==========================================================================
   Dashboard
   ========================================================================== */
.dash-header { display: flex; align-items: center; gap: 26px; padding: 32px; flex-wrap: wrap; }
.dash-header__meta { flex: 1; min-width: 220px; }
.dash-header__rank { font-family: var(--font-mono); color: var(--blue-dim); letter-spacing: 2px; text-transform: uppercase; font-size: 0.78rem; }
html[data-theme="dark"] .dash-header__rank { color: var(--blue-2); }
.dash-header__name { font-size: 1.9rem; margin: 4px 0 12px; color: var(--text-primary); }
.xp-bar { background: var(--track); border-radius: 999px; height: 14px; overflow: hidden; border: 1px solid var(--line); }
.xp-bar__fill { height: 100%; background: linear-gradient(90deg, var(--green), var(--blue)); border-radius: 999px; transition: width .6s cubic-bezier(.2,.8,.2,1); }
.xp-bar__caption { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-faint); margin-top: 9px; }

.stat-strip { display: flex; gap: 16px; flex-wrap: wrap; margin: 32px 0; }
.stat-chip {
  flex: 1; min-width: 130px;
  background: var(--glass-strong);
  backdrop-filter: blur(18px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 20px;
  text-align: center;
  box-shadow: 0 14px 30px -20px rgba(15,27,45,0.3);
  transition: transform .25s cubic-bezier(.2,.8,.2,1);
}
.stat-chip:hover { transform: translateY(-3px); }
.stat-chip b { display: block; font-family: var(--font-display); font-size: 1.6rem; color: var(--blue-dim); }
html[data-theme="dark"] .stat-chip b { color: var(--blue-2); }
.stat-chip span { font-size: 0.78rem; color: var(--text-faint); }

.play-panel { padding: 36px; margin-bottom: 30px; }
.play-panel h2 { margin-bottom: 6px; color: var(--text-primary); }

.table-wrap { overflow-x: auto; }
table.ll-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
table.ll-table th {
  text-align: left; padding: 13px 15px;
  color: var(--text-faint);
  font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 1px;
  border-bottom: 2px solid var(--line);
}
table.ll-table td { padding: 15px; border-bottom: 1px solid var(--line); color: var(--text-primary); }
table.ll-table tr { transition: background .15s ease; }
table.ll-table tbody tr:hover { background: rgba(45,125,255,0.05); }
table.ll-table tr:last-child td { border-bottom: none; }
.status-pill { padding: 5px 12px; border-radius: 999px; font-size: 0.75rem; font-family: var(--font-mono); font-weight: 600; white-space: nowrap; }
.status-pill.scheduled { background: rgba(45,125,255,0.12); color: var(--blue-ink); }
.status-pill.picked_up { background: rgba(134,192,35,0.14); color: var(--green-ink); }
.status-pill.sorting { background: rgba(240,180,41,0.16); color: #8a6200; }
.status-pill.washing { background: rgba(45,125,255,0.16); color: var(--blue-ink); }
.status-pill.drying_folding { background: rgba(240,180,41,0.16); color: #8a6200; }
.status-pill.out_for_delivery { background: rgba(134,192,35,0.16); color: var(--green-ink); }
.status-pill.completed { background: rgba(134,192,35,0.2); color: var(--green-ink); }
.status-pill.cancelled { background: var(--locked); color: var(--locked-text); }
html[data-theme="dark"] .status-pill.scheduled,
html[data-theme="dark"] .status-pill.washing { color: var(--blue-2); }
html[data-theme="dark"] .status-pill.sorting,
html[data-theme="dark"] .status-pill.drying_folding { color: #F0B429; }
html[data-theme="dark"] .status-pill.picked_up,
html[data-theme="dark"] .status-pill.out_for_delivery,
html[data-theme="dark"] .status-pill.completed { color: var(--green-2); }

.leader-row {
  display: grid; grid-template-columns: 50px 1fr 90px 110px; align-items: center; gap: 12px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--line);
  transition: background .15s ease;
}
.leader-row:hover { background: rgba(45,125,255,0.05); }
.leader-row:last-child { border-bottom: none; }
.leader-row.is-you { background: rgba(45,125,255,0.08); border-radius: var(--radius-sm); }
.leader-rank { font-family: var(--font-mono); font-size: 1.1rem; color: var(--text-faint); display: flex; align-items: center; }
.leader-rank.top1 { color: var(--blue-ink); }
.leader-rank.top2 { color: var(--green-ink); }
.leader-rank.top3 { color: var(--text-faint); }
html[data-theme="dark"] .leader-rank.top1 { color: var(--blue-2); }
html[data-theme="dark"] .leader-rank.top2 { color: var(--green-2); }
.leader-name { font-weight: 600; color: var(--text-primary); }
.leader-name small { display: block; color: var(--text-faint); font-weight: 400; font-size: 0.78rem; }
.leader-xp { font-family: var(--font-mono); color: var(--blue-dim); text-align: right; font-weight: 700; }
html[data-theme="dark"] .leader-xp { color: var(--blue-2); }

.campaign-bar { background: var(--track); border: 1px solid var(--line); border-radius: 999px; height: 22px; overflow: hidden; }
.campaign-bar__fill { height: 100%; background: linear-gradient(90deg, var(--blue), var(--green)); display: flex; align-items: center; justify-content: flex-end; padding-right: 10px; font-family: var(--font-mono); font-size: 0.68rem; color: #fff; font-weight: 700; transition: width .6s cubic-bezier(.2,.8,.2,1); }

.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.small-muted { font-size: 0.85rem; color: var(--text-faint); }

/* ==========================================================================
   Footer — solid blue, green accent — the two brand colors, paired
   ========================================================================== */
.ll-footer {
  margin-top: 64px;
  padding: 44px 0;
  background: linear-gradient(135deg, var(--blue-2), var(--blue-dim));
  color: #fff;
  position: relative;
  overflow: hidden;
}
html[data-theme="dark"] .ll-footer { background: linear-gradient(135deg, var(--blue-dim), #0A1530); }
.ll-footer p { color: rgba(255,255,255,0.82); }
.ll-footer__inner { max-width: 1120px; margin: 0 auto; padding: 0 24px; text-align: center; position: relative; z-index: 1; }
.ll-footer__brand { font-family: var(--font-display); font-size: 1.15rem; margin-bottom: 6px; display: flex; align-items: center; justify-content: center; gap: 8px; color: #fff; }
.ll-footer__brand em { color: var(--green-2); font-style: normal; }
.ll-footer__fine { font-size: 0.78rem; color: rgba(255,255,255,0.6); margin-top: 12px; }

/* ==========================================================================
   V1.1 — App shell (sidebar + top bar) for every logged-in role
   Replaces the marketing nav once a player/staff/rider/admin is signed
   in. Same two-brand-color system, same glass surfaces — just a proper
   app "control center" instead of a website header.
   ========================================================================== */
.app-shell { min-height: 100vh; }

.app-topbar {
  position: fixed; top: 0; left: 0; right: 0; height: 62px; z-index: 60;
  display: flex; align-items: center; gap: 14px;
  padding: 0 18px 0 14px;
  background: var(--nav-bg-scrolled);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 8px 24px -20px rgba(15,27,45,0.4);
}
.app-topbar__burger {
  display: none; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 12px;
  color: var(--text-primary); cursor: pointer; flex-shrink: 0;
  transition: background .15s ease;
}
.app-topbar__burger:hover { background: var(--track); }
.app-topbar__brand {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
  flex-shrink: 0; white-space: nowrap;
}
.app-topbar__brand em { color: var(--green-dim); font-style: normal; }
html[data-theme="dark"] .app-topbar__brand em { color: var(--green-2); }
.app-topbar__hud { margin-left: 6px; }
.app-topbar__right { display: flex; align-items: center; gap: 10px; margin-left: auto; }

.app-install-btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-display); font-weight: 700; font-size: 0.8rem;
  background: var(--glass); border: 1.5px solid var(--line);
  color: var(--blue-dim); padding: 8px 14px; border-radius: 999px;
  cursor: pointer; transition: border-color .2s ease, transform .2s ease;
  white-space: nowrap;
}
html[data-theme="dark"] .app-install-btn { color: var(--blue-2); }
.app-install-btn:hover { border-color: var(--blue); transform: translateY(-1px); }
button.app-install-btn.btn { color: #fff; }

.app-user-menu { position: relative; }
.app-user-menu summary { list-style: none; cursor: pointer; }
.app-user-menu summary::-webkit-details-marker { display: none; }
.app-user-menu__trigger {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 12px 5px 5px; border-radius: 999px;
  border: 1.5px solid var(--line); background: var(--glass);
  transition: border-color .2s ease;
}
.app-user-menu[open] .app-user-menu__trigger,
.app-user-menu__trigger:hover { border-color: var(--blue); }
.app-user-menu__avatar {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--blue-2), var(--blue));
  color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 0.82rem;
}
.app-user-menu__name { font-size: 0.85rem; font-weight: 600; color: var(--text-primary); }
.app-user-menu__panel {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 70;
  min-width: 220px;
  background: rgba(255,255,255,0.98);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--glass-border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  padding: 14px;
  display: flex; flex-direction: column; gap: 2px;
  animation: menu-pop .16s cubic-bezier(.2,.8,.2,1);
}
html[data-theme="dark"] .app-user-menu__panel { background: rgba(15,21,36,0.98); }
@keyframes menu-pop { from { opacity: 0; transform: translateY(-6px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
.app-user-menu__who { padding: 4px 10px 12px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
.app-user-menu__who strong { display: block; color: var(--text-primary); font-size: 0.92rem; margin-bottom: 6px; }
.app-user-menu__who .ll-role-badge { backdrop-filter: none; -webkit-backdrop-filter: none; }
.app-user-menu__panel a {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 10px; border-radius: var(--radius-sm);
  font-size: 0.86rem; font-weight: 600; color: var(--text-muted);
  transition: background .15s ease, color .15s ease;
}
.app-user-menu__panel a:hover { background: rgba(45,125,255,0.08); color: var(--blue-dim); }
html[data-theme="dark"] .app-user-menu__panel a:hover { color: var(--blue-2); }
.app-user-menu__logout:hover { background: rgba(239,68,68,0.08) !important; color: var(--danger) !important; }

/* ==========================================================================
   Notification bell — app-shell top bar
   ========================================================================== */
.app-notif-menu { position: relative; }
.app-notif-menu summary { list-style: none; cursor: pointer; }
.app-notif-menu summary::-webkit-details-marker { display: none; }
.app-notif-menu__trigger {
  position: relative;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1.5px solid var(--line); background: var(--glass);
  color: var(--text-muted);
  transition: border-color .2s ease, color .2s ease;
}
.app-notif-menu[open] .app-notif-menu__trigger,
.app-notif-menu__trigger:hover { border-color: var(--blue); color: var(--blue-dim); }
html[data-theme="dark"] .app-notif-menu[open] .app-notif-menu__trigger,
html[data-theme="dark"] .app-notif-menu__trigger:hover { color: var(--blue-2); }
.app-notif-menu__badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 0.66rem; font-weight: 700; font-family: var(--font-mono);
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--bg-page);
}
.app-notif-menu__panel {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 70;
  width: 340px; max-width: 88vw;
  background: rgba(255,255,255,0.98);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--glass-border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  padding: 14px;
  display: flex; flex-direction: column;
  animation: menu-pop .16s cubic-bezier(.2,.8,.2,1);
}
html[data-theme="dark"] .app-notif-menu__panel { background: rgba(15,21,36,0.98); }
.app-notif-menu__head { display: flex; align-items: center; justify-content: space-between; padding: 2px 6px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.app-notif-menu__head strong { font-size: 0.92rem; color: var(--text-primary); }
.app-notif-menu__mark-all { font-size: 0.76rem; font-weight: 600; color: var(--blue-dim); }
html[data-theme="dark"] .app-notif-menu__mark-all { color: var(--blue-2); }
.app-notif-menu__mark-all:hover { text-decoration: underline; }
.app-notif-menu__list { display: flex; flex-direction: column; gap: 2px; max-height: 360px; overflow-y: auto; }
.app-notif-menu__empty { padding: 26px 10px; text-align: center; font-size: 0.84rem; color: var(--text-faint); }
.app-notif-item {
  position: relative;
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 26px 10px 8px; border-radius: var(--radius-sm);
  transition: background .15s ease;
}
.app-notif-item:hover { background: rgba(45,125,255,0.06); }
.app-notif-item.is-unread { background: rgba(45,125,255,0.05); }
.app-notif-item__icon {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--glass); border: 1px solid var(--line); color: var(--text-muted);
}
.app-notif-item__body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.app-notif-item__body strong { font-size: 0.83rem; color: var(--text-primary); font-weight: 700; }
.app-notif-item__body span { font-size: 0.78rem; color: var(--text-muted); }
.app-notif-item__body time { font-size: 0.7rem; color: var(--text-faint); margin-top: 2px; }
.app-notif-item__dot { position: absolute; top: 14px; right: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); }
.app-notif-menu__viewall {
  display: block; text-align: center;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line);
  font-size: 0.8rem; font-weight: 600; color: var(--blue-dim);
}
html[data-theme="dark"] .app-notif-menu__viewall { color: var(--blue-2); }
.app-notif-menu__viewall:hover { text-decoration: underline; }
@media (max-width: 560px) { .app-notif-menu__panel { position: fixed; top: 64px; right: 10px; left: 10px; width: auto; } }

/* Full notifications page (notifications.php) — same visual language as
   the bell dropdown's list, just roomier rows. */
.notif-row {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px 14px; border-radius: var(--radius-sm);
  border-bottom: 1px solid var(--line);
  transition: background .15s ease;
}
.notif-row:last-child { border-bottom: none; }
.notif-row:hover { background: rgba(45,125,255,0.05); }
.notif-row.is-unread { background: rgba(45,125,255,0.05); }
.notif-row__icon {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--glass); border: 1px solid var(--line); color: var(--text-muted);
}
.notif-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.notif-row__body strong { font-size: 0.92rem; color: var(--text-primary); }
.notif-row__body span { font-size: 0.83rem; color: var(--text-muted); }
.notif-row__time { flex-shrink: 0; font-size: 0.76rem; color: var(--text-faint); white-space: nowrap; }

.app-sidebar-toggle-input { position: absolute; }
.app-sidebar-backdrop {
  display: none; position: fixed; inset: 0; z-index: 55;
  background: rgba(6,10,20,0.5); backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none; transition: opacity .25s ease;
}

.app-sidebar {
  position: fixed; top: 62px; left: 0; bottom: 0; width: 250px; z-index: 58;
  display: flex; flex-direction: column; justify-content: space-between;
  background: var(--glass-strong); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  border-right: 1px solid var(--line);
  padding: 18px 14px; overflow-y: auto;
  transition: left .28s cubic-bezier(.2,.8,.2,1);
}
.app-sidebar__nav { display: flex; flex-direction: column; gap: 3px; }
.app-sidebar__link {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border-radius: var(--radius-sm);
  color: var(--text-muted); font-weight: 600; font-size: 0.9rem;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.app-sidebar__link:hover { background: rgba(45,125,255,0.07); color: var(--blue-dim); transform: translateX(2px); }
html[data-theme="dark"] .app-sidebar__link:hover { color: var(--blue-2); }
.app-sidebar__link.is-active {
  background: linear-gradient(135deg, rgba(45,125,255,0.14), rgba(134,192,35,0.10));
  color: var(--blue-dim);
  box-shadow: inset 0 0 0 1.5px rgba(45,125,255,0.25);
}
html[data-theme="dark"] .app-sidebar__link.is-active { color: var(--blue-2); }
.app-sidebar__divider { height: 1px; background: var(--line); margin: 12px 6px; }
.app-sidebar__footer { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; }
.app-sidebar__logout {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px; border-radius: var(--radius-sm);
  color: var(--text-faint); font-weight: 600; font-size: 0.85rem;
  transition: background .15s ease, color .15s ease;
}
.app-sidebar__logout:hover { background: rgba(239,68,68,0.08); color: var(--danger); }
.app-sidebar__footer .app-install-btn.btn { justify-content: center; }

.app-main { margin-left: 250px; padding-top: 62px; min-height: 100vh; }

@media (max-width: 960px) {
  .app-topbar__burger { display: flex; }
  .app-topbar__brand-text { display: none; }
  .app-sidebar {
    left: -280px;
    width: 260px;
    box-shadow: 0 0 60px -20px rgba(0,0,0,0.4);
  }
  .app-main { margin-left: 0; }
  #appSidebarToggle:checked ~ .app-sidebar { left: 0; }
  #appSidebarToggle:checked ~ .app-sidebar-backdrop { display: block; opacity: 1; pointer-events: auto; }
}
@media (max-width: 560px) {
  .app-topbar__hud { display: none; }
  .app-install-btn span { display: none; }
}

/* Onboarding "finish setup" banner shown on every page until the tour is done */
.setup-banner {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 16px 20px; margin-bottom: 22px;
  background: linear-gradient(135deg, rgba(45,125,255,0.12), rgba(134,192,35,0.10));
  border: 1.5px solid rgba(45,125,255,0.25);
  border-radius: var(--radius-md);
}
.setup-banner__icon {
  width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--blue-2), var(--blue)); color: #fff;
  box-shadow: 0 8px 18px -8px var(--blue-glow);
}
.setup-banner__text { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 2px; }
.setup-banner__text strong { color: var(--text-primary); font-size: 0.95rem; }
.setup-banner__text span { font-size: 0.83rem; color: var(--text-muted); }

/* ==========================================================================
   Onboarding tour (onboarding.php) — multi-step wizard
   ========================================================================== */
.tour-wrap { max-width: 620px; margin: 26px auto 60px; padding: 0 20px; }
.tour-progress { display: flex; gap: 8px; margin-bottom: 26px; }
.tour-progress__dot { flex: 1; height: 6px; border-radius: 999px; background: var(--track); overflow: hidden; }
.tour-progress__dot.is-done, .tour-progress__dot.is-active { background: linear-gradient(90deg, var(--blue), var(--green)); }
.tour-card { padding: 40px 36px; }
.tour-card__icon {
  width: 56px; height: 56px; border-radius: 16px; margin-bottom: 18px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--blue-2), var(--blue)); color: #fff;
  box-shadow: 0 12px 26px -10px var(--blue-glow);
}
.tour-card h1 { font-size: 1.5rem; margin-bottom: 8px; }
.tour-card p.sub { margin-bottom: 26px; }
.tour-step { display: none; }
.tour-step.is-active { display: block; animation: tour-in .35s cubic-bezier(.2,.8,.2,1); }
@keyframes tour-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: translateX(0); } }
.tour-highlights { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 10px; }
.tour-highlights--2 { grid-template-columns: repeat(2, 1fr); }
.tour-highlight { text-align: center; padding: 18px 10px; border-radius: var(--radius-md); background: var(--glass); border: 1px solid var(--line); }
.tour-highlight .icon-badge--sm { margin: 0 auto 10px; }
.tour-highlight p { font-size: 0.78rem; margin: 0; color: var(--text-muted); }
.tour-install-hint { text-align: center; font-size: 0.78rem; color: var(--text-faint); margin: 14px 0 0; }
.tour-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 30px; }
.tour-skip { font-size: 0.85rem; color: var(--text-faint); font-weight: 600; }
.tour-skip:hover { color: var(--text-muted); }
.locate-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--glass); border: 1.5px solid var(--line);
  color: var(--blue-dim); padding: 11px 18px; border-radius: var(--radius-sm);
  font-family: var(--font-display); font-weight: 700; font-size: 0.86rem;
  cursor: pointer; margin-bottom: 18px; transition: border-color .2s ease;
}
html[data-theme="dark"] .locate-btn { color: var(--blue-2); }
.locate-btn:hover { border-color: var(--blue); }
.locate-btn.is-located { color: var(--green-dim); border-color: var(--green); }
html[data-theme="dark"] .locate-btn.is-located { color: var(--green-2); }
.tour-success { text-align: center; padding: 20px 0; }
.tour-success__badge {
  width: 84px; height: 84px; margin: 0 auto 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--green-2), var(--green)); color: #fff;
  box-shadow: 0 16px 32px -12px var(--green-glow);
  animation: porthole-in .6s cubic-bezier(.2,.8,.2,1);
}

/* ==========================================================================
   Profile & settings page
   ========================================================================== */
.profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
@media (max-width: 860px) { .profile-grid { grid-template-columns: 1fr; } }
.profile-panel { padding: 30px; }
.profile-panel h2 { font-size: 1.1rem; display: flex; align-items: center; gap: 10px; }

/* Dismissable "how to install" tip (iOS / manual-install fallback) */
.install-tip {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  z-index: 200; max-width: 320px; width: calc(100% - 40px);
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 40px 14px 16px; border-radius: var(--radius-md);
  background: var(--glass-strong); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border); box-shadow: var(--shadow-soft);
  animation: menu-pop .2s cubic-bezier(.2,.8,.2,1);
}
.install-tip strong { font-size: 0.86rem; color: var(--text-primary); }
.install-tip span { font-size: 0.8rem; color: var(--text-muted); }
.install-tip button {
  position: absolute; top: 8px; right: 8px; width: 24px; height: 24px;
  border-radius: 50%; color: var(--text-faint); font-size: 1.1rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.install-tip button:hover { background: var(--track); }

/* ==========================================================================
   V1.2 — Dashboard as the game home screen
   ========================================================================== */

/* Announcement banner ("hero" repurposed for admin-managed announcements) */
.game-banner {
  position: relative;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 20px 26px;
  margin-bottom: 20px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  color: #fff;
}
.game-banner--blue  { background: linear-gradient(120deg, #2D7DFF 0%, #6AA2FF 100%); }
.game-banner--green { background: linear-gradient(120deg, #4C9A1A 0%, #86C023 100%); }
.game-banner--gold  { background: linear-gradient(120deg, #B8860B 0%, #F0B429 100%); }
.game-banner__glow {
  position: absolute; inset: 0;
  background: radial-gradient(360px 200px at 15% 0%, rgba(255,255,255,0.35), transparent 60%),
              radial-gradient(300px 200px at 90% 100%, rgba(255,255,255,0.2), transparent 60%);
  pointer-events: none;
}
.game-banner__icon {
  position: relative; z-index: 1; flex-shrink: 0;
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.22);
  backdrop-filter: blur(6px);
}
.game-banner__text { position: relative; z-index: 1; flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 2px; }
.game-banner__text strong { font-family: var(--font-display); font-size: 1.05rem; }
.game-banner__text span { font-size: 0.86rem; opacity: 0.92; }
.game-banner__cta {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.92); color: var(--blue-ink);
  font-family: var(--font-display); font-weight: 700; font-size: 0.84rem;
  padding: 10px 18px; border-radius: 999px; white-space: nowrap;
  transition: transform .2s ease;
}
.game-banner__cta:hover { transform: translateY(-2px); }

/* Slim status strip — replaces the old big "profile" header block */
.game-stat-strip {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-bottom: 22px;
}
.game-stat-strip__hud { display: flex; align-items: center; gap: 12px; padding: 6px 18px 6px 6px; background: var(--glass); border: 1px solid var(--line); border-radius: 999px; }
.game-stat-strip__hud .porthole--sm { width: 44px; height: 44px; }
.game-stat-strip__hud .porthole__level { font-size: 1.1rem; }
.game-stat-strip__name { font-family: var(--font-display); font-weight: 700; font-size: 0.88rem; color: var(--text-primary); }
.xp-bar--sm { width: 130px; height: 8px; margin-top: 4px; }
.game-stat-strip .stat-chip { padding: 10px 16px; }
.game-stat-strip .stat-chip b { font-size: 1.2rem; }

/* Map panel wrapper */
.game-map-panel { margin-bottom: 30px; overflow: hidden; }
.game-map-panel__play-btn { animation: cta-glow 2.4s ease-in-out infinite; }
@keyframes cta-glow {
  0%, 100% { box-shadow: 0 10px 24px -10px var(--blue-glow); }
  50%      { box-shadow: 0 14px 34px -8px var(--blue-glow), 0 0 0 6px rgba(45,125,255,0.14); }
}

/* Active-mission banner shown atop the map when a level is in progress */
.mission-banner { padding: 22px 26px 6px; }
.mission-banner__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.mission-banner__head strong { display: block; color: var(--text-primary); font-size: 0.98rem; }

/* ==========================================================================
   Mission tracker — Placed -> Collected -> Sorting -> Washing ->
   Drying & folding -> Out for delivery -> Delivered
   ========================================================================== */
.mission-tracker { display: flex; align-items: flex-start; overflow-x: auto; padding: 6px 2px 14px; }
.mission-step { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 64px; flex-shrink: 0; }
.mission-step__dot {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--track); color: var(--text-faint);
  border: 2px solid var(--line);
  transition: all .3s ease;
  flex-shrink: 0;
}
.mission-step__label { font-size: 0.6rem; font-weight: 700; text-align: center; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.2px; line-height: 1.25; max-width: 72px; }
.mission-step--done .mission-step__dot { background: linear-gradient(135deg, var(--green-2), var(--green)); color: #fff; border-color: transparent; box-shadow: 0 6px 14px -6px var(--green-glow); }
.mission-step--done .mission-step__label { color: var(--green-dim); }
html[data-theme="dark"] .mission-step--done .mission-step__label { color: var(--green-2); }
.mission-step--current .mission-step__dot { background: linear-gradient(135deg, var(--blue-2), var(--blue)); color: #fff; border-color: transparent; box-shadow: 0 0 0 5px rgba(45,125,255,0.18), 0 6px 14px -6px var(--blue-glow); animation: mission-pulse 1.8s ease-in-out infinite; }
.mission-step--current .mission-step__label { color: var(--blue-dim); font-weight: 800; }
html[data-theme="dark"] .mission-step--current .mission-step__label { color: var(--blue-2); }
@keyframes mission-pulse {
  0%, 100% { box-shadow: 0 0 0 5px rgba(45,125,255,0.18), 0 6px 14px -6px var(--blue-glow); }
  50%      { box-shadow: 0 0 0 9px rgba(45,125,255,0.10), 0 8px 18px -6px var(--blue-glow); }
}
.mission-step__connector { flex: 1; height: 3px; background: var(--line); margin: 15px 0 0; border-radius: 2px; min-width: 10px; }
.mission-step__connector.is-done { background: linear-gradient(90deg, var(--green), var(--blue)); }
.mission-cancelled { display: flex; align-items: center; gap: 10px; padding: 14px 18px; background: rgba(239,68,68,0.08); color: var(--danger); border-radius: var(--radius-sm); font-weight: 700; font-size: 0.88rem; }

.detail-list { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; }
.detail-list dt { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-faint); font-weight: 700; }
.detail-list dd { margin: 0; color: var(--text-primary); font-size: 0.88rem; }

/* ==========================================================================
   Package picker (configure.php) + admin package cards
   ========================================================================== */
.package-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.package-card {
  position: relative;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
  padding: 22px 16px 18px;
  background: var(--glass); border: 2px solid var(--line); border-radius: var(--radius-md);
  cursor: pointer; transition: all .2s ease;
}
.package-card input { position: absolute; opacity: 0; }
.package-card:hover { border-color: rgba(45,125,255,0.4); transform: translateY(-2px); }
.package-card.is-selected { border-color: var(--blue); background: linear-gradient(135deg, rgba(45,125,255,0.08), rgba(134,192,35,0.06)); box-shadow: 0 12px 28px -14px var(--blue-glow); }
.package-card__icon {
  width: 48px; height: 48px; border-radius: 14px; margin-bottom: 4px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--blue-2), var(--blue)); color: #fff;
}
.package-card.is-selected .package-card__icon { background: linear-gradient(135deg, var(--green-2), var(--green)); }
.package-card__name { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; color: var(--text-primary); }
.package-card__price { font-family: var(--font-mono); font-weight: 700; color: var(--blue-dim); font-size: 0.92rem; }
html[data-theme="dark"] .package-card__price { color: var(--blue-2); }
.package-card__desc { font-size: 0.76rem; color: var(--text-muted); line-height: 1.4; }
.package-card__tier { font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; padding: 3px 10px; border-radius: 999px; margin-top: 4px; }
.tier-standard { background: var(--track); color: var(--text-muted); }
.tier-express  { background: rgba(45,125,255,0.14); color: var(--blue-dim); }
html[data-theme="dark"] .tier-express { color: var(--blue-2); }
.tier-premium  { background: rgba(240,180,41,0.18); color: #B8860B; }
html[data-theme="dark"] .tier-premium { color: #F0B429; }
.package-card__turnaround { font-size: 0.7rem; color: var(--text-faint); display: flex; align-items: center; gap: 4px; }

.package-admin-card { padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.package-admin-card.is-inactive { opacity: 0.55; }
.package-admin-card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }

/* ==========================================================================
   Play Level — the "launching" screen shown right after a level is played
   (play.php), between configuring the package and landing on the mission
   tracker.
   ========================================================================== */
.play-launch {
  text-align: center;
  padding: 54px 28px;
  background: var(--glass-strong);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,0.15);
}
.play-launch__icon {
  width: 84px; height: 84px; margin: 0 auto 18px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue-2), var(--blue));
  color: #fff;
  box-shadow: 0 14px 30px -10px var(--blue-glow);
  animation: play-launch-spin 1.6s cubic-bezier(.34,1.56,.64,1) infinite;
}
@keyframes play-launch-spin {
  0%   { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(180deg) scale(1.08); }
  100% { transform: rotate(360deg) scale(1); }
}
.play-launch h1 { margin-bottom: 8px; }
.play-launch p { color: var(--text-muted); margin-bottom: 26px; }
.play-launch__bar {
  width: 100%; max-width: 320px; height: 8px; margin: 0 auto 30px;
  background: var(--locked);
  border-radius: 999px;
  overflow: hidden;
}
.play-launch__bar-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--blue), var(--green));
  border-radius: 999px;
  animation: play-launch-fill 1.5s ease forwards;
}
@keyframes play-launch-fill { to { width: 100%; } }

/* KopoKopo M-PESA payment (play.php) */
.kk-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--text-faint); font-size: 0.78rem; }
.kk-divider::before, .kk-divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.kk-spinner {
  width: 38px; height: 38px; margin: 0 auto;
  border: 3px solid var(--line); border-top-color: var(--green);
  border-radius: 50%;
  animation: kk-spin 0.8s linear infinite;
}
@keyframes kk-spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   Rider portal — pickup pool, claim cards, live alerts
   ========================================================================== */
.rider-alerts-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 18px; margin-bottom: 20px;
  background: rgba(45,125,255,0.08); border: 1.5px solid rgba(45,125,255,0.2);
  border-radius: var(--radius-md); font-size: 0.85rem; color: var(--blue-dim);
}
html[data-theme="dark"] .rider-alerts-bar { color: var(--blue-2); }
.rider-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
  z-index: 300; max-width: 380px; width: calc(100% - 40px);
  padding: 14px 20px; border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--blue-2), var(--blue)); color: #fff;
  font-size: 0.86rem; font-weight: 600; text-align: center;
  box-shadow: 0 16px 40px -12px var(--blue-glow);
  opacity: 0; transition: all .3s cubic-bezier(.2,.8,.2,1);
  cursor: pointer;
}
.rider-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

.rider-pool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; padding: 20px 26px 26px; }
.pickup-card {
  padding: 18px; border-radius: var(--radius-md);
  background: var(--glass); border: 1.5px solid var(--line);
  display: flex; flex-direction: column; gap: 6px;
  animation: pickup-in .3s ease;
}
@keyframes pickup-in { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: scale(1); } }
.pickup-card__head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.pickup-card__head strong { font-size: 0.88rem; color: var(--text-primary); }
.pickup-card p { margin: 0; font-size: 0.8rem; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.pickup-card__player { font-weight: 600; }
.pickup-card__notes { background: var(--track); padding: 8px 10px; border-radius: 8px; font-size: 0.78rem; }
.pickup-card__actions { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }

/* ==========================================================================
   Level map visual overhaul — bottom-up, richer, more colorful
   ========================================================================== */
/* Level map — level 1 sits near the bottom of a tall fixed canvas, higher
   levels climb upward (smaller y). Plain coordinate math in app.js — see
   coordFor() there — no CSS transform tricks, so scrolling and click
   targeting stay fully predictable. */
.candy-bubble-field { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.candy-bubble-field span {
  position: absolute; bottom: -20px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.9), rgba(255,255,255,0.15) 70%);
  border: 1px solid rgba(255,255,255,0.5);
  animation: bubble-drift linear infinite;
  opacity: 0.7;
}
html[data-theme="dark"] .candy-bubble-field span { background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.35), rgba(255,255,255,0.05) 70%); border-color: rgba(255,255,255,0.15); }
@keyframes bubble-drift {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  10%  { opacity: 0.7; }
  90%  { opacity: 0.5; }
  100% { transform: translateY(-620px) translateX(24px); opacity: 0; }
}

.candy-node__ring {
  position: absolute; inset: -10px; border-radius: 50%;
  pointer-events: none;
}
.candy-node--current .candy-node__ring {
  border: 2px solid rgba(45,125,255,0.35);
  animation: ring-expand 2.2s ease-out infinite;
}
@keyframes ring-expand {
  0%   { transform: scale(0.85); opacity: 0.9; }
  100% { transform: scale(1.35); opacity: 0; }
}

.candy-landmark--gold { background: rgba(240,180,41,0.2); color: #B8860B; }
html[data-theme="dark"] .candy-landmark--gold { color: #F0B429; background: rgba(240,180,41,0.18); }
.candy-landmark { width: 42px; height: 42px; box-shadow: 0 6px 16px -8px rgba(15,27,45,0.35); }
.candy-landmark__icon { display: flex; }

.candy-node__gift--sparkle { animation: gift-sparkle 1.8s ease-in-out infinite; }
@keyframes gift-sparkle {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50%      { transform: scale(1.15) rotate(-8deg); }
}

/* ==========================================================================
   V1.3 — Staff pipeline operational tools
   ========================================================================== */
.stat-chip--danger b { color: var(--danger); }
.stat-chip--warn b { color: #B8860B; }
html[data-theme="dark"] .stat-chip--warn b { color: #F0B429; }

.flag-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; margin-left: 6px;
  background: rgba(240,180,41,0.2); color: #B8860B; cursor: help;
}
html[data-theme="dark"] .flag-dot { color: #F0B429; }

.overdue-tag { display: inline-flex; align-items: center; gap: 4px; color: var(--danger); font-weight: 700; font-size: 0.78rem; }
.staff-flag-tag { display: inline-flex; align-items: center; gap: 4px; color: #B8860B; font-weight: 600; font-size: 0.78rem; }
html[data-theme="dark"] .staff-flag-tag { color: #F0B429; }

.staff-table td { vertical-align: top; }
.staff-detail-row td { padding: 0 !important; border: none; }
.staff-detail {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  padding: 20px 24px 26px; background: var(--track);
  animation: detail-in .2s ease;
}
@keyframes detail-in { from { opacity: 0; } to { opacity: 1; } }
.staff-detail__col h4 { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-faint); margin-bottom: 8px; }
.staff-detail__col p { display: flex; align-items: flex-start; gap: 7px; font-size: 0.85rem; color: var(--text-muted); margin-bottom: 6px; }
.staff-detail-form textarea { resize: vertical; }
@media (max-width: 760px) { .staff-detail { grid-template-columns: 1fr; } }

/* ==========================================================================
   V1.4 — Responsive tables: real card layout on phones, not a horizontal-
   scroll table. Requires each <td> to carry data-label="Column Name" —
   the label is drawn via CSS ::before so no JS/duplication needed.
   ========================================================================== */
@media (max-width: 720px) {
  table.ll-table.is-responsive thead { display: none; }
  table.ll-table.is-responsive, table.ll-table.is-responsive tbody { display: block; width: 100%; }
  table.ll-table.is-responsive tr {
    display: block; padding: 14px 16px; margin-bottom: 10px;
    border: 1px solid var(--line); border-radius: var(--radius-md);
    background: var(--glass);
  }
  table.ll-table.is-responsive tr:last-child { margin-bottom: 0; }
  table.ll-table.is-responsive tr.staff-detail-row { padding: 0; border: none; background: transparent; }
  table.ll-table.is-responsive td[data-label] {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 12px; padding: 7px 0; border-bottom: none; text-align: right;
  }
  table.ll-table.is-responsive td { border-bottom: none; }
  table.ll-table.is-responsive td[data-label]::before {
    content: attr(data-label);
    font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
    color: var(--text-faint); text-align: left; flex-shrink: 0; padding-top: 2px;
  }
  table.ll-table.is-responsive td:empty,
  table.ll-table.is-responsive td[data-label=""] { display: none; }
  .staff-detail-row.is-responsive-detail td { display: block; text-align: left; }
}

/* ==========================================================================
   V1.4 — Rider portal rebuild: dashboard stats + hero pickup section
   ========================================================================== */
.rider-stat-strip { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.rider-stat-strip .stat-chip { flex: 1; min-width: 130px; padding: 16px; }
.stat-chip--gold b { color: #B8860B; }
html[data-theme="dark"] .stat-chip--gold b { color: #F0B429; }

.rider-alerts-bar { padding-right: 46px; position: relative; }
.rider-alerts-bar__close {
  position: absolute; top: 50%; right: 14px; transform: translateY(-50%);
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--blue-dim); opacity: 0.7;
}
html[data-theme="dark"] .rider-alerts-bar__close { color: var(--blue-2); }
.rider-alerts-bar__close:hover { opacity: 1; background: rgba(45,125,255,0.12); }

.rider-hero {
  border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 22px;
  background: linear-gradient(160deg, rgba(45,125,255,0.10), rgba(134,192,35,0.08));
  border: 1.5px solid rgba(45,125,255,0.18);
}
.rider-hero__head { padding: 22px 24px 4px; }
.rider-hero__head p { margin-top: 2px; }
.pool-count-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 6px; margin-left: 4px;
  border-radius: 999px; background: var(--blue); color: #fff;
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700;
  vertical-align: middle;
}

.rider-section { margin-bottom: 22px; }
.rider-section__head { padding: 4px 4px 12px; }
.rider-section__head p { margin-top: 2px; }

.rider-empty {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 34px 20px; text-align: center; color: var(--text-faint);
}
.rider-empty__icon {
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--track); color: var(--text-faint);
}
.rider-empty p { margin: 0; font-size: 0.86rem; max-width: 280px; }

.pickup-card--fresh { animation: pickup-highlight 2s ease; }
@keyframes pickup-highlight {
  0%   { box-shadow: 0 0 0 3px rgba(45,125,255,0.5); }
  100% { box-shadow: 0 0 0 0 rgba(45,125,255,0); }
}

@media (max-width: 640px) {
  .rider-pool-grid { grid-template-columns: 1fr; padding: 16px; }
  .rider-hero__head { padding: 18px 16px 4px; }
}

/* ==========================================================================
   V1.5 — Staff portal: Kanban board layout (mirrors the rider portal's
   card language) + live multi-staff sync
   ========================================================================== */
.staff-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: start; }
.staff-column { background: var(--glass); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.staff-column__head { padding: 16px 16px 10px; }
.staff-column__head h2 { font-size: 0.95rem; }
.staff-column__head p { font-size: 0.76rem; margin-top: 2px; }
.staff-column__cards { display: flex; flex-direction: column; gap: 10px; padding: 0 12px 14px; min-height: 60px; }

.staff-card { padding: 14px; gap: 4px; }
.staff-card .pickup-card__head { flex-wrap: wrap; }
.staff-card .pickup-card__head strong { font-size: 0.85rem; }
.staff-card .pickup-card__actions { margin-top: 8px; }

/* The detail expand now lives inside a narrow Kanban card, not a full-width table row — always single column. */
.staff-detail {
  display: grid; grid-template-columns: 1fr; gap: 14px;
  padding: 14px; margin-top: 10px;
  background: var(--track); border-radius: var(--radius-sm);
  animation: detail-in .2s ease;
}

@media (max-width: 1180px) { .staff-board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .staff-board { grid-template-columns: 1fr; } }

/* New pipeline arrival, inserted live — same highlight language as the rider pool. */
.staff-card.staff-card--fresh { animation: pickup-highlight 2s ease; }

/* ==========================================================================
   Admin design system — "refined dark SaaS"
   Scoped entirely to html[data-role="admin"], so nothing here touches the
   player, staff, or rider experience — they keep the existing gamified
   look untouched. Admin always renders in this single near-black neutral
   register regardless of the light/dark toggle (the toggle is hidden for
   admin — see below): this is a bookkeeping/ops tool now that Accounting
   and Payments live here, not a game screen.
   This block is deliberately LAST in the file — it overrides the same
   custom properties every existing component already consumes
   (--glass, --line, --radius-*, --shadow-soft, --blue, etc.), so the vast
   majority of the flattening below is "free": panels, forms, KPI cards,
   badges and tables all reuse these variables already.
   ========================================================================== */
html[data-role="admin"] {
  --bg-page: #0B0F17;

  --glass:        #10151F;
  --glass-strong: #10151F;
  --glass-border: rgba(255,255,255,0.08);
  --line:         rgba(255,255,255,0.09);
  --track:        rgba(255,255,255,0.06);
  --field-bg:     #0D1119;
  --field-bg-focus: #141A26;

  --nav-bg:          #0D1119;
  --nav-bg-scrolled: #0D1119;
  --nav-bg-mobile:   #0D1119;

  --blue:      #4C8DFF;
  --blue-2:    #4C8DFF;
  --blue-dim:  #7FADFF;
  --blue-ink:  #7FADFF;
  --blue-glow: transparent;

  --green:      #3DAA6D;
  --green-2:    #3DAA6D;
  --green-dim:  #55C084;
  --green-ink:  #55C084;
  --green-glow: transparent;

  --danger:     #E5484D;
  --danger-dim: #FF9592;

  --locked:      rgba(255,255,255,0.06);
  --locked-text: #6B7280;

  --text-primary: #EDEFF3;
  --text-muted:   #9AA3B2;
  --text-faint:   #5C6675;

  --font-display: var(--font-body);

  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;

  --shadow-soft: 0 1px 2px rgba(0,0,0,0.4);

  color-scheme: dark;
}

/* Kill every blur — flat fills read as "serious tool", not "glass game". */
html[data-role="admin"] .panel,
html[data-role="admin"] .app-topbar,
html[data-role="admin"] .app-sidebar,
html[data-role="admin"] .kpi-card,
html[data-role="admin"] .btn-ghost,
html[data-role="admin"] .admin-subnav,
html[data-role="admin"] .app-notif-menu__panel {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Panels + KPI cards: flat fill, hairline border, no lift-on-hover bounce. */
html[data-role="admin"] .panel { box-shadow: none; }
html[data-role="admin"] .kpi-card { box-shadow: none; transition: border-color .15s ease; }
html[data-role="admin"] .kpi-card:hover { transform: none; border-color: var(--glass-border); }
html[data-role="admin"] .kpi-card__icon,
html[data-role="admin"] .kpi-card--green .kpi-card__icon,
html[data-role="admin"] .kpi-card--red .kpi-card__icon,
html[data-role="admin"] .kpi-card--gold .kpi-card__icon {
  background: rgba(255,255,255,0.06);
  color: var(--text-primary);
}
html[data-role="admin"] .kpi-card--green .kpi-card__icon { color: var(--green-dim); }
html[data-role="admin"] .kpi-card--red .kpi-card__icon { color: var(--danger-dim); }
html[data-role="admin"] .kpi-card--gold .kpi-card__icon { color: #E5B94E; }

/* Icon badges: solid tint instead of gradient + glow. */
html[data-role="admin"] .icon-badge {
  box-shadow: none;
}
html[data-role="admin"] .icon-badge--berry,
html[data-role="admin"] .icon-badge--violet {
  background: rgba(76,141,255,0.14); color: var(--blue-dim);
}
html[data-role="admin"] .icon-badge--xp {
  background: rgba(61,170,109,0.14); color: var(--green-dim);
}

/* Buttons: rounded-rect instead of pill, solid fill, no shine sweep, no bounce. */
html[data-role="admin"] .btn { border-radius: var(--radius-sm); }
html[data-role="admin"] .btn::after { display: none; }
html[data-role="admin"] .btn:hover { transform: none; }
html[data-role="admin"] .btn:active { transform: scale(0.98); }
html[data-role="admin"] .btn-primary {
  background: var(--blue); box-shadow: none;
}
html[data-role="admin"] .btn-primary:hover { background: #3B7CF0; box-shadow: none; }
html[data-role="admin"] .btn-suds {
  background: rgba(61,170,109,0.14); color: var(--green-dim); box-shadow: none;
}
html[data-role="admin"] .btn-suds:hover { background: rgba(61,170,109,0.22); box-shadow: none; }
html[data-role="admin"] .btn-ghost {
  background: transparent; box-shadow: none; border-color: var(--line);
}
html[data-role="admin"] .btn-ghost:hover { border-color: var(--text-faint); color: var(--text-primary); box-shadow: none; }

/* Top bar + sidebar: flat fill instead of glass, solid left-bar active state
   instead of a gradient pill. */
html[data-role="admin"] .app-topbar,
html[data-role="admin"] .app-sidebar {
  background: var(--nav-bg); box-shadow: none;
}
html[data-role="admin"] .app-sidebar__link.is-active {
  background: rgba(76,141,255,0.12);
  color: var(--blue-dim);
  box-shadow: inset 2px 0 0 var(--blue);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
html[data-role="admin"] .app-sidebar__link:hover { transform: none; background: rgba(255,255,255,0.04); color: var(--text-primary); }
html[data-role="admin"] #themeToggle { display: none; }

/* Tables: tighten slightly, flat hover instead of tinted glow. */
html[data-role="admin"] table.ll-table tbody tr:hover { background: rgba(255,255,255,0.03); }

/* Statement/notification rows: flat hover, no tint. */
html[data-role="admin"] .statement-row:hover,
html[data-role="admin"] .notif-row:hover { background: rgba(255,255,255,0.03); }

/* Section headers: drop the oversized display-font treatment in favor of a
   quieter, denser heading — this is a tool, not a level-up screen. */
html[data-role="admin"] .section-head h1 { font-size: 1.6rem; letter-spacing: -0.01em; }
html[data-role="admin"] .section-head .eyebrow {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-faint);
}