/* ══════════════════════════════════════════════
   CuadrillaONE — DESIGN SYSTEM
   Premium hospitality workforce platform
══════════════════════════════════════════════ */

:root {
  /* Backgrounds — luxury near-black */
  --bg-base:     #0a0a0a;
  --bg-elevated: #101014;
  --bg-card:     #161620;
  --bg-surface:  #1C1C28;
  --bg-input:    rgba(255,255,255,0.04);
  --bg-overlay:  rgba(8,8,10,0.88);

  /* Brand — Signal blue primary (Tribeacon; var names kept for now) */
  --gold:        #6366FF;
  --gold-light:  #818CFF;
  --gold-glow:   rgba(255,255,255,0.25);
  --gold-glow-sm:rgba(255,255,255,0.12);
  /* PL-REBRAND 1b — lighter accent for blue TEXT/ICONS/BORDERS/GLOWS on dark
     (fills stay --gold #FFFFFF). rgb(159,165,255). */
  --accent-on-dark: #FFFFFF;

  /* Brand — silver/chrome secondary */
  --silver-dark:  #8A8F98;
  --silver:       #C0C0C0;
  --silver-light: #E8E8E8;
  --silver-glow:  rgba(224,224,232,0.18);
  --silver-glow-sm: rgba(224,224,232,0.08);
  --chrome-grad:  linear-gradient(135deg, #8A8F98 0%, #C0C0C0 35%, #F0F0F2 55%, #B8BCC4 80%, #8A8F98 100%);

  --cyan:        #0EA5CA;
  --cyan-glow:   rgba(14,165,202,0.2);
  --success:     #059669;
  --danger:      #DC2626;
  --warning:     #D97706;

  /* Text */
  --text-primary:   #FFFFFF;
  --text-secondary: #B0B4BC;
  --text-muted:     #6A7080;
  --text-gold:      #FFFFFF;

  /* Borders */
  --border:        rgba(255,255,255,0.06);
  --border-md:     rgba(255,255,255,0.10);
  --border-gold:   rgba(255,255,255,0.3);
  --border-silver: rgba(224,224,232,0.22);
  --border-silver-strong: rgba(232,232,240,0.36);
  --border-cyan:   rgba(14,165,202,0.3);

  /* Shadows */
  --shadow-sm:     0 2px 12px rgba(0,0,0,0.4);
  --shadow-md:     0 8px 32px rgba(0,0,0,0.55);
  --shadow-lg:     0 24px 80px rgba(0,0,0,0.8);
  --shadow-gold:   0 8px 32px rgba(255,255,255,0.2);
  --shadow-glow:   0 0 60px rgba(255,255,255,0.12);
  --shadow-silver: 0 0 0 1px rgba(224,224,232,0.06), 0 6px 28px rgba(224,224,232,0.08);

  /* Radius */
  --r-xs:  6px;
  --r-sm:  10px;
  --r-md:  16px;
  --r-lg:  20px;
  --r-xl:  28px;
  --r-full: 999px;

  /* Spacing */
  --sp-xs: 6px;
  --sp-sm: 12px;
  --sp-md: 16px;
  --sp-lg: 24px;
  --sp-xl: 32px;

  /* Typography */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ─── Reset ──────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  background: var(--bg-base);
  color: var(--text-primary);
  overflow-x: hidden;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--text-primary); text-decoration: none; }
button { cursor: pointer; border: none; background: none; font-family: var(--font); color: inherit; }
input, select, textarea { font-family: var(--font); }
img { display: block; max-width: 100%; }

/* ══════════════════════════════════════════════
   SPLASH SCREEN — pure black, centered logo
══════════════════════════════════════════════ */
.splash {
  position: fixed; inset: 0; z-index: 9999;
  background: #000;
  display: flex; align-items: center; justify-content: center;
  padding: 32px;
  animation: splashHold 2.1s ease-in forwards;
}
.splash.hide { pointer-events: none !important; display: none !important; opacity: 0; transition: opacity 0.5s ease; }
.splash-inner {
  display: flex; flex-direction: column; align-items: center; gap: 0;
  animation: splashRise 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.splash-logo {
  width: min(82vw, 420px); height: auto;
  filter: drop-shadow(0 0 40px rgba(224,224,232,0.15));
}
@keyframes splashHold { 0%,80% { opacity: 1; } 100% { opacity: 1; } }
@keyframes splashRise {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ══════════════════════════════════════════════
   BRAND LOGO IMAGE (replaces SVG brand marks)
══════════════════════════════════════════════ */
.brand-logo-img { height: 28px; width: auto; display: block; }
.brand-logo-img.brand-logo-img--sm { height: 22px; }
.brand-logo-img.brand-logo-img--md { height: 34px; }
.brand-logo-img.brand-logo-img--lg { height: 52px; }
/* ════════════════════════════════════════════════════
   CUADRILLAONE LOGO — ultra-simple gold gradient text
   One element. One word. No image, no tagline, no
   divider, no subtitle. Pure typography.
   ════════════════════════════════════════════════════ */
.cuadrillaone-logo {
  text-align: center;
  margin: 40px 0 24px;
}
.cuadrillaone-logo h1 {
  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 80px;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: -1px;
  margin: 0;
  padding: 0;
  line-height: 1;
  /* drop-shadow for gold glow (text-shadow conflicts with clipped gradient) */
  filter: drop-shadow(0 0 40px rgba(255,255,255, 0.4));
}

/* Variants */
.cuadrillaone-logo--footer h1 { font-size: 32px; }
.cuadrillaone-logo--auth   h1 { font-size: 48px; }

.cuadrillaone-logo--footer {
  margin: 0 auto 8px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255, 0.18);
}
.cuadrillaone-logo--auth { margin: 0 auto 10px; }

/* Canonical size scale — used app-wide */
.cuadrillaone-logo-xl { margin: 0; text-align: center; }
.cuadrillaone-logo-xl h1 {
  font-size: 80px;
  letter-spacing: -1px;
  filter: drop-shadow(0 0 40px rgba(255,255,255, 0.45));
}
.cuadrillaone-logo-md { margin: 0; text-align: center; }
.cuadrillaone-logo-md h1 {
  font-size: 32px;
  letter-spacing: -0.4px;
  filter: drop-shadow(0 0 20px rgba(255,255,255, 0.3));
}
.cuadrillaone-logo-sm { margin: 0; display: inline-block; }
.cuadrillaone-logo-sm h1 {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.2px;
  filter: none;
}
.cuadrillaone-logo-xs { margin: 0; display: inline-block; }
.cuadrillaone-logo-xs h1 {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.1px;
  filter: none;
}

/* "Powered by" footer pattern */
.powered-by {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px;
}
.powered-by-text {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 600;
}

/* Splash tagline replacing image */
.splash-tagline {
  text-align: center;
  margin-top: 14px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 600;
}

/* Neutralise old image-logo rules so residual classes don't leave spacing */
.brand-monogram-img,
.brand-logo-img,
.splash-logo { display: none !important; }

/* Mobile */
@media (max-width: 768px) {
  .cuadrillaone-logo--hero h1   { font-size: 56px; }
  .cuadrillaone-logo--footer h1 { font-size: 26px; }
  .cuadrillaone-logo--auth h1   { font-size: 38px; }
  .cuadrillaone-logo-xl h1      { font-size: 56px; }
  .cuadrillaone-logo-md h1      { font-size: 26px; }
}

/* Ensure footer-inner is centered */
.landing-footer .landing-footer-inner { text-align: center; }

/* Footer tagline — the single canonical tagline in the footer */
.landing-footer .footer-tagline {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-primary);
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-top: 12px;
  opacity: 0.7;
  text-align: center;
}

/* Small helper note for the role section */
.rx-role-intro { margin-bottom: 10px !important; }

/* ════════════════════════════════════════════════════
   EXPANDED FEATURE GRID — "One platform. Every tool."
   ════════════════════════════════════════════════════ */
.features-section .section-sub {
  max-width: 640px;
  margin: 10px auto 0;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.55;
  text-align: center;
}

.features-grid-v2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 28px;
}
@media (max-width: 900px) { .features-grid-v2 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .features-grid-v2 { grid-template-columns: 1fr; } }

.feat2 {
  position: relative;
  padding: 22px 18px 18px;
  background: linear-gradient(180deg, rgba(20,22,30,0.92), rgba(11,13,18,0.95));
  border: 1px solid var(--border-silver);
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  animation: feat2In 0.5s ease-out both;
}
.feat2:hover {
  transform: translateY(-3px);
  border-color: var(--border-gold);
  box-shadow: 0 14px 32px rgba(0,0,0,0.45), 0 0 24px rgba(129,140,255,0.18);
}
.feat2.is-featured {
  border-color: var(--text-primary);
  box-shadow: 0 0 18px rgba(129,140,255,0.16);
}
.feat2.is-featured:hover {
  box-shadow: 0 14px 32px rgba(0,0,0,0.45), 0 0 32px rgba(129,140,255,0.32);
}

.feat2-star {
  position: absolute; top: 10px; left: 10px;
  font-size: 14px;
  filter: drop-shadow(0 0 6px rgba(129,140,255,0.7));
}
.feat2-badge {
  position: absolute; top: 10px; right: 10px;
  font-size: 9px; font-weight: 800;
  padding: 3px 9px; border-radius: 999px;
  background: rgba(129,140,255,0.14);
  color: var(--text-primary);
  border: 1px solid var(--border-gold);
  letter-spacing: 0.5px; text-transform: uppercase;
}
.feat2-badge-soon {
  background: rgba(167,139,250,0.18); color: #c4b5fd;
  border-color: rgba(167,139,250,0.4);
}
.feat2-badge-ai {
  background: rgba(96,165,250,0.18); color: #93c5fd;
  border-color: rgba(96,165,250,0.4);
}
.feat2-badge-secure {
  background: rgba(34,197,94,0.18); color: #86efac;
  border-color: rgba(34,197,94,0.4);
}

.feat2-icon {
  font-size: 44px; line-height: 1;
  margin: 8px 0 14px;
  filter: drop-shadow(0 6px 16px rgba(129,140,255,0.25));
}

.feat2 h3 {
  font-family: 'Playfair Display', serif;
  font-size: 19px; font-weight: 700;
  color: var(--text-primary);
  background: linear-gradient(135deg, #FFFFFF, var(--text-primary), #fff);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 6px;
  line-height: 1.2;
}

.feat2 p {
  font-size: 12.5px; line-height: 1.55;
  color: var(--text-secondary);
}

/* Staggered fade-in animation */
@keyframes feat2In {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.features-grid-v2 .feat2:nth-child(1)  { animation-delay: 0.00s; }
.features-grid-v2 .feat2:nth-child(2)  { animation-delay: 0.05s; }
.features-grid-v2 .feat2:nth-child(3)  { animation-delay: 0.10s; }
.features-grid-v2 .feat2:nth-child(4)  { animation-delay: 0.15s; }
.features-grid-v2 .feat2:nth-child(5)  { animation-delay: 0.20s; }
.features-grid-v2 .feat2:nth-child(6)  { animation-delay: 0.25s; }
.features-grid-v2 .feat2:nth-child(7)  { animation-delay: 0.30s; }
.features-grid-v2 .feat2:nth-child(8)  { animation-delay: 0.35s; }
.features-grid-v2 .feat2:nth-child(9)  { animation-delay: 0.40s; }
.features-grid-v2 .feat2:nth-child(10) { animation-delay: 0.45s; }
.features-grid-v2 .feat2:nth-child(11) { animation-delay: 0.50s; }
.features-grid-v2 .feat2:nth-child(12) { animation-delay: 0.55s; }
.features-grid-v2 .feat2:nth-child(13) { animation-delay: 0.60s; }
.features-grid-v2 .feat2:nth-child(14) { animation-delay: 0.65s; }
.features-grid-v2 .feat2:nth-child(15) { animation-delay: 0.70s; }

/* ════════════════════════════════════════════════════
   THE ONE REGISTRATION WIZARD — 7-step flow
   ════════════════════════════════════════════════════ */

/* Step indicator */
.hx-progress {
  display: flex; align-items: center; gap: 4px;
  margin: 14px 0 4px;
}
.hx-step {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(255,255,255,0.12);
  color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800;
  flex-shrink: 0;
  transition: all 0.2s;
}
.hx-step.is-current {
  background: #FFFFFF; color: #1a1000;
  border-color: var(--text-primary);
  box-shadow: 0 0 12px rgba(129,140,255,0.5);
  transform: scale(1.1);
}
.hx-step.is-done {
  background: rgba(34,197,94,0.2); color: #4ade80;
  border-color: rgba(34,197,94,0.5);
}
.hx-line {
  flex: 1; height: 2px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
  min-width: 8px;
}
.hx-step-label {
  text-align: center;
  font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--text-primary); font-weight: 800;
  margin-bottom: 16px;
}

/* Step panels — only the active one shown · !important prevents any other
   rule from accidentally un-hiding an inactive panel (which would expose
   Step 6's "Confirm Plan →" button from another step). */
.hx-step-panel { display: none !important; animation: fadeIn 0.25s ease both; }
.hx-step-panel.active { display: block !important; }

/* Triple-belt guard: the "Confirm Plan" button is valid ONLY inside the
   Subscription Plan step (data-hxpanel="6"). Matches by handler substring
   AND by case-insensitive text prefix, so stray buttons anywhere in the
   the_one-registration section are hidden regardless of rendering path. */
:is(#reg-the-one, #reg-crew) .hx-step-panel:not([data-hxpanel="6"]) button[onclick*="hxConfirmPlan"],
:is(#reg-the-one, #reg-crew) .hx-step-panel:not([data-hxpanel="6"]) button[onclick*="confirmPlan"],
:is(#reg-the-one, #reg-crew) .hx-step-panel:not([data-hxpanel="6"]) .confirm-plan-btn,
:is(#reg-the-one, #reg-crew) .hx-step-panel:not([data-hxpanel="6"]) .btn-confirm-plan,
:is(#reg-the-one, #reg-crew) .hx-step-panel:not([data-hxpanel="6"]) [data-confirm-plan],
:is(#reg-the-one, #reg-crew) .hx-step-panel:not([data-hxpanel="6"]) [class*="confirm-plan"] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Inline verify buttons on Contact step */
.hx-verify-btn {
  position: absolute;
  right: 6px; top: 50%; transform: translateY(-50%);
  background: #FFFFFF; color: #1a1000;
  border: 0; border-radius: 8px;
  padding: 6px 12px;
  font-size: 11px; font-weight: 800; cursor: pointer;
  font-family: inherit;
  letter-spacing: 0.3px;
}
.hx-verify-btn:hover { filter: brightness(1.08); }
.hx-verify-btn.is-ok {
  background: rgba(34,197,94,0.2); color: #4ade80;
  border: 1px solid rgba(34,197,94,0.45);
}
.phone-input { position: relative; }
.hx-step-panel .input-wrap { position: relative; }
.hx-step-panel .input-wrap .hx-verify-btn,
.phone-input .hx-verify-btn {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
}

/* Master Admin card */
.hx-admin-card {
  display: flex; align-items: center; gap: 12px;
  padding: 14px;
  background: linear-gradient(135deg, rgba(129,140,255,0.12), rgba(255,255,255,0.02));
  border: 1.5px solid var(--text-primary);
  border-radius: 14px;
  position: relative;
}
.hx-admin-photo {
  width: 52px; height: 52px; border-radius: 50%;
  border: 2px solid var(--text-primary);
  background: #fff;
}
.hx-admin-info { flex: 1; min-width: 0; }
.hx-admin-name {
  font-family: 'Playfair Display', serif;
  font-size: 16px; font-weight: 700; color: #fff;
}
.hx-admin-role { font-size: 11px; color: var(--text-primary); font-weight: 700; }
.hx-admin-email { font-size: 10px; color: var(--text-muted); margin-top: 2px; }
.hx-admin-badge {
  font-size: 9px; padding: 4px 10px; border-radius: 999px;
  background: linear-gradient(135deg, #FFFFFF, #B0B4BC);
  color: #1a1000; font-weight: 800;
  letter-spacing: 1px;
  box-shadow: 0 0 12px rgba(129,140,255,0.4);
}

/* Plan strip on Managers step */
.hx-plan-strip {
  padding: 10px 14px; margin-bottom: 12px;
  background: rgba(129,140,255,0.08);
  border: 1px solid var(--border-gold);
  border-left: 3px solid var(--text-primary);
  border-radius: 10px;
  font-size: 12px; color: var(--text-secondary);
}
.hx-plan-strip strong { color: #fff; }
.hx-plan-name {
  color: var(--text-primary); font-weight: 800;
  letter-spacing: 0.3px;
}

/* Manager list */
.hx-manager-empty {
  text-align: center; padding: 18px;
  font-size: 12px; color: var(--text-muted); font-style: italic;
  border: 1px dashed var(--border-silver); border-radius: 10px;
  background: rgba(255,255,255,0.02);
  margin-bottom: 10px;
}
.hx-manager-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; margin-bottom: 6px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-silver);
  border-radius: 10px;
}
.hx-manager-photo {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px solid var(--border-gold);
  background: #fff;
}
.hx-manager-info { flex: 1; min-width: 0; }
.hx-manager-info strong { display: block; color: #fff; font-size: 12px; font-weight: 800; }
.hx-manager-info span { font-size: 10px; color: var(--text-muted); }
.hx-manager-x {
  background: rgba(239,68,68,0.14); color: #fca5a5;
  border: 1px solid rgba(239,68,68,0.4);
  width: 26px; height: 26px; border-radius: 50%;
  font-size: 14px; cursor: pointer;
  line-height: 1;
}

/* Permissions matrix */
.hx-perm-details {
  margin-top: 12px;
  padding: 8px 12px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border-silver);
  border-radius: 10px;
}
.hx-perm-details summary {
  cursor: pointer; font-weight: 800; font-size: 12px;
  color: var(--text-primary); letter-spacing: 0.4px;
  padding: 6px 0;
  list-style: none;
}
.hx-perm-details summary::-webkit-details-marker { display: none; }
.hx-perm-details summary::before {
  content: '▶'; color: var(--text-primary); margin-right: 6px;
  font-size: 8px; transition: transform 0.15s;
  display: inline-block;
}
.hx-perm-details[open] summary::before { transform: rotate(90deg); }
.hx-perm-row {
  padding: 10px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.06);
}
.hx-perm-row:last-child { border-bottom: 0; }
.hx-perm-role {
  font-size: 12px; font-weight: 800;
  color: var(--pcolor, var(--text-primary));
  margin-bottom: 4px;
}
.hx-perm-allow, .hx-perm-deny {
  display: flex; flex-wrap: wrap; gap: 4px;
  font-size: 10px;
  margin-top: 3px;
}
.hx-perm-allow span {
  background: rgba(34,197,94,0.12); color: #86efac;
  border: 1px solid rgba(34,197,94,0.3);
  padding: 2px 7px; border-radius: 4px;
}
.hx-perm-deny span {
  background: rgba(239,68,68,0.10); color: #fca5a5;
  border: 1px solid rgba(239,68,68,0.25);
  padding: 2px 7px; border-radius: 4px;
}

/* Subscription tiers */
.hx-tier-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin-top: 8px;
}
@media (max-width: 640px) { .hx-tier-grid { grid-template-columns: 1fr; } }
.hx-tier-card {
  position: relative;
  padding: 14px 12px;
  background: rgba(255,255,255,0.03);
  border: 1.5px solid var(--border-silver);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.2s;
}
.hx-tier-card input { position: absolute; opacity: 0; }
.hx-tier-card:hover { border-color: var(--border-gold); }
.hx-tier-card:has(input:checked) {
  border-color: var(--text-primary);
  background: linear-gradient(135deg, rgba(129,140,255,0.12), rgba(255,255,255,0.02));
  box-shadow: 0 0 18px rgba(129,140,255,0.22);
}
.hx-tier-card.is-popular:has(input:checked) { box-shadow: 0 0 22px rgba(129,140,255,0.35); }
.hx-tier-popular {
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, #FFFFFF, #B0B4BC);
  color: #1a1000;
  font-size: 9px; padding: 3px 10px; border-radius: 999px;
  font-weight: 800; letter-spacing: 0.6px;
  box-shadow: 0 2px 10px rgba(129,140,255,0.4);
}
.hx-tier-name {
  font-family: 'Playfair Display', serif;
  font-size: 14px; font-weight: 700; color: #fff;
  letter-spacing: 0.3px;
}
.hx-tier-price {
  font-family: 'Playfair Display', serif;
  font-size: 22px; font-weight: 800; color: var(--text-primary);
  margin: 4px 0 8px;
}
.hx-tier-price span { font-size: 11px; color: var(--text-muted); font-weight: 600; margin-left: 2px; }
.hx-tier-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.hx-tier-list li {
  font-size: 10px; color: var(--text-secondary);
  padding-left: 14px; position: relative;
}
.hx-tier-list li::before {
  content: '✓'; position: absolute; left: 0; top: 0;
  color: #4ade80; font-weight: 800;
}

/* Welcome screen */
.hx-welcome {
  text-align: center;
  padding: 30px 20px;
}
.hx-welcome-burst {
  font-size: 56px; margin-bottom: 8px;
  animation: pxEmptyFloat 2.4s ease-in-out infinite;
}
.hx-welcome h2 {
  font-family: 'Playfair Display', serif;
  font-size: 26px; font-weight: 800; color: var(--text-primary);
  margin-bottom: 6px;
}
.hx-welcome p {
  font-size: 13px; color: var(--text-secondary);
  margin-bottom: 18px;
}
.hx-welcome-checklist {
  text-align: left;
  list-style: none; padding: 0; margin: 0 auto 20px;
  max-width: 320px;
  display: flex; flex-direction: column; gap: 6px;
}
.hx-welcome-checklist li {
  padding: 8px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-silver);
  border-radius: 10px;
  font-size: 12px; color: var(--text-secondary);
}

/* Logo preview */
.hx-logo-preview {
  width: 80px; height: 80px; border-radius: 12px;
  object-fit: contain;
  background: #fff; padding: 6px;
  border: 1.5px solid var(--text-primary);
  margin-bottom: 6px;
}

/* ═══ Add Manager modal (search + invite + permissions) ═══ */
.hx-mgr-card { max-width: 520px; }
.hx-add-tabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  margin: 12px 0 14px;
  padding: 4px;
  background: rgba(255,255,255,0.04);
  border-radius: 10px;
}
.hx-add-tab {
  padding: 8px 12px; border-radius: 8px;
  background: transparent; border: 0;
  color: var(--text-muted); font-size: 12px; font-weight: 700;
  cursor: pointer; font-family: inherit;
  transition: all 0.15s;
}
.hx-add-tab.is-active {
  background: #FFFFFF; color: #1a1000;
  box-shadow: 0 2px 8px rgba(129,140,255,0.3);
}
.hx-add-pane { margin-bottom: 12px; }

.hx-user-list {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 260px; overflow-y: auto;
  padding-right: 2px;
}
.hx-user-row {
  display: grid; grid-template-columns: auto 1fr auto; gap: 10px;
  align-items: center;
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-silver);
  border-radius: 10px;
  cursor: pointer; text-align: left;
  font-family: inherit;
  transition: border-color 0.15s, background 0.15s;
}
.hx-user-row:hover { border-color: var(--border-gold); background: rgba(129,140,255,0.05); }
.hx-user-row.is-selected {
  border-color: var(--text-primary); background: rgba(129,140,255,0.12);
  box-shadow: inset 0 0 0 1px var(--text-primary);
}
.hx-user-photo {
  width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
  border: 1.5px solid var(--border-gold);
}
.hx-user-info strong { display: block; color: #fff; font-size: 13px; font-weight: 800; }
.hx-user-info .hx-user-verified {
  display: inline-block; margin-left: 4px;
  width: 14px; height: 14px; border-radius: 50%;
  background: rgba(34,197,94,0.25); color: #4ade80;
  font-size: 9px; line-height: 14px; text-align: center;
}
.hx-user-info span { font-size: 11px; color: var(--text-muted); }
.hx-user-info em { display: block; font-size: 10px; color: var(--text-primary); font-style: italic; margin-top: 2px; }
.hx-user-info em.hx-user-free { color: #86efac; }
.hx-user-plus, .hx-user-check {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(129,140,255,0.14); color: var(--text-primary);
  font-size: 14px; font-weight: 800;
}
.hx-user-check { background: #FFFFFF; color: #1a1000; }
.hx-user-empty {
  padding: 14px; text-align: center;
  font-size: 12px; color: var(--text-muted); font-style: italic;
  border: 1px dashed var(--border-silver); border-radius: 10px;
}
.hx-selected-user {
  display: flex; align-items: center; gap: 10px;
  margin-top: 10px; padding: 10px 12px;
  background: rgba(34,197,94,0.12);
  border: 1px solid rgba(34,197,94,0.4);
  border-radius: 10px;
}
.hx-selected-user img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 1.5px solid var(--text-primary); }
.hx-selected-user strong { display: block; color: #fff; font-size: 12px; }
.hx-selected-user span { font-size: 10px; color: #86efac; }

/* ════════════════════════════════════════════════════
   MANUAL PERMISSIONS UI — categories, search, group toggles,
   per-permission descriptions, save-as-template
   ════════════════════════════════════════════════════ */
.hx-perm-section {
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border-silver);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 12px 0;
}
.hx-perm-section-head { margin-bottom: 12px; }
.hx-perm-section-head strong {
  display: block;
  color: var(--text-primary);
  font-size: 13px; font-weight: 800;
  letter-spacing: 0.3px;
}
.hx-perm-section-head p {
  margin-top: 4px;
  font-size: 11px; color: var(--text-muted);
  line-height: 1.45;
}

.hx-perm-meter {
  background: rgba(129,140,255,0.06);
  border: 1px solid var(--border-gold);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.hx-perm-meter-label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 11px; color: var(--text-secondary);
  margin-bottom: 6px;
}
.hx-perm-meter-label strong { color: var(--text-primary); font-weight: 800; }
.hx-perm-meter-label span:last-child {
  font-family: 'Playfair Display', serif;
  font-weight: 800; font-size: 14px; color: var(--text-primary);
}
.hx-perm-meter-bar {
  height: 6px; border-radius: 999px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}
.hx-perm-meter-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #FFFFFF, #B0B4BC);
  transition: width 0.3s;
}

.hx-perm-search { margin-bottom: 8px; }
.hx-perm-search-empty {
  padding: 14px; text-align: center;
  font-size: 12px; color: var(--text-muted); font-style: italic;
}

.hx-perm-quick {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(255,255,255,0.06);
}
.hx-perm-quick-btn {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-silver);
  color: var(--text-secondary);
  padding: 5px 10px; border-radius: 6px;
  font-family: inherit; font-size: 10px; font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.3px;
}
.hx-perm-quick-btn:hover { background: var(--gold-glow-sm); border-color: var(--border-gold); color: var(--text-primary); }
.hx-perm-quick-tpl-save {
  background: rgba(129,140,255,0.10);
  border-color: var(--border-gold);
  color: var(--text-primary);
}
.hx-perm-quick-tpl {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-silver);
  color: var(--text-primary);
  padding: 5px 10px; border-radius: 6px;
  font-family: inherit; font-size: 10px; font-weight: 700;
  cursor: pointer;
}

/* Collapsible permission group */
.hx-perm-group {
  margin-bottom: 6px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border-silver);
  border-left: 3px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.15s;
}
.hx-perm-group.is-empty   { border-left-color: rgba(255,255,255,0.1); }
.hx-perm-group.is-partial { border-left-color: var(--text-primary); }
.hx-perm-group.is-full    { border-left-color: #4ade80; background: rgba(34,197,94,0.04); }

.hx-perm-group-summary {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px; align-items: center;
  padding: 8px 12px;
  cursor: pointer;
  list-style: none;
  font-weight: 800; font-size: 12px;
  color: #fff;
}
.hx-perm-group-summary::-webkit-details-marker { display: none; }
.hx-perm-group-summary::after {
  content: ''; /* spacer — chevron is part of the toggle column */
}
.hx-perm-group-summary::before {
  content: '▸'; color: var(--text-primary); margin-right: 6px;
  font-size: 9px; transition: transform 0.15s;
  display: inline-block;
}
.hx-perm-group[open] .hx-perm-group-summary::before { transform: rotate(90deg); }
.hx-perm-group-label {
  font-family: inherit;
  font-size: 12px; color: var(--text-primary);
  letter-spacing: 0.3px;
}
.hx-perm-group-count {
  font-size: 10px; padding: 2px 8px; border-radius: 999px;
  background: rgba(255,255,255,0.06); color: var(--text-muted);
  font-weight: 700; letter-spacing: 0.3px;
  font-family: 'Courier New', monospace;
}
.hx-perm-group.is-partial .hx-perm-group-count { background: rgba(129,140,255,0.16); color: var(--text-primary); }
.hx-perm-group.is-full    .hx-perm-group-count { background: rgba(34,197,94,0.18); color: #4ade80; }

.hx-perm-group-toggle {
  display: inline-flex; align-items: center; gap: 4px;
  cursor: pointer;
  font-size: 9px; color: var(--text-muted);
  font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase;
}
.hx-perm-group-toggle input { accent-color: #FFFFFF; }

.hx-perm-list {
  display: flex; flex-direction: column;
  padding: 4px 12px 10px;
}
.hx-perm-check {
  display: grid; grid-template-columns: auto 1fr; gap: 10px;
  align-items: flex-start;
  padding: 8px 4px;
  font-size: 12px; color: var(--text-secondary);
  cursor: pointer;
  border-bottom: 1px dashed rgba(255,255,255,0.04);
}
.hx-perm-check:last-child { border-bottom: 0; }
.hx-perm-check:hover { background: rgba(255,255,255,0.03); border-radius: 6px; }
.hx-perm-check input { accent-color: #FFFFFF; margin-top: 2px; }
.hx-perm-check-body strong {
  display: block; color: #fff; font-size: 12px; font-weight: 700;
  line-height: 1.35;
}
.hx-perm-check-body em {
  display: block;
  margin-top: 2px;
  font-size: 10.5px; color: var(--text-muted);
  font-style: normal; line-height: 1.45;
}

/* Manager row badges + toggle */
.hx-badge {
  display: inline-block; margin-left: 6px;
  font-size: 9px; padding: 2px 7px; border-radius: 999px;
  font-weight: 800; letter-spacing: 0.3px;
}
.hx-badge-verified {
  background: rgba(34,197,94,0.2); color: #4ade80;
  border: 1px solid rgba(34,197,94,0.4);
}
.hx-badge-pending {
  background: rgba(251,146,60,0.2); color: #fdba74;
  border: 1px solid rgba(251,146,60,0.4);
}
.hx-manager-row.is-inactive { opacity: 0.5; }
.hx-manager-perms {
  display: block; margin-top: 2px;
  font-size: 10px; color: var(--text-primary); font-style: italic;
}
.hx-toggle {
  position: relative; display: inline-block;
  width: 32px; height: 18px;
  cursor: pointer;
}
.hx-toggle input { display: none; }
.hx-toggle span {
  position: absolute; inset: 0;
  background: rgba(255,255,255,0.1);
  border-radius: 999px;
  transition: background 0.15s;
}
.hx-toggle span::before {
  content: ''; position: absolute;
  top: 2px; left: 2px;
  width: 14px; height: 14px;
  background: #fff; border-radius: 50%;
  transition: transform 0.15s;
}
.hx-toggle input:checked + span { background: #FFFFFF; }
.hx-toggle input:checked + span::before { transform: translateX(14px); }

/* Welcome cards (Step 7) */
.hx-welcome-cards {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
  margin: 18px 0 14px;
}
.hx-welcome-card {
  padding: 12px 10px;
  background: rgba(129,140,255,0.08);
  border: 1px solid var(--border-gold);
  border-radius: 10px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.hx-wc-ico { font-size: 24px; filter: drop-shadow(0 2px 8px rgba(129,140,255,0.25)); }
.hx-welcome-card strong {
  font-family: 'Playfair Display', serif;
  color: var(--text-primary); font-size: 12px;
}
.hx-welcome-card span { font-size: 10px; color: var(--text-muted); }

/* Included vs Additional subscription table */
.hx-incl-wrap {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin-top: 14px;
}
@media (max-width: 640px) { .hx-incl-wrap { grid-template-columns: 1fr; } }
.hx-incl {
  padding: 10px 12px;
  background: rgba(34,197,94,0.08);
  border: 1px solid rgba(34,197,94,0.35);
  border-radius: 10px;
  font-size: 11px;
}
.hx-incl strong { display: block; color: #86efac; margin-bottom: 6px; letter-spacing: 0.3px; }
.hx-incl ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 3px; }
.hx-incl li { color: var(--text-secondary); }
.hx-incl-add {
  background: rgba(96,165,250,0.08);
  border-color: rgba(96,165,250,0.35);
}
.hx-incl-add strong { color: #93c5fd; }

/* The One quick-access banner on home feed */
.px-the-one-quick {
  padding: 16px 14px;
  margin: 12px 14px 16px;
  background: linear-gradient(135deg, rgba(129,140,255,0.14), rgba(255,255,255,0.02));
  border: 1px solid var(--border-gold);
  border-radius: 14px;
  box-shadow: 0 0 20px rgba(129,140,255,0.12);
}
.px-the-one-welcome { margin-bottom: 12px; text-align: center; }
.px-the-one-welcome strong {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 16px; color: var(--text-primary);
}
.px-the-one-welcome span { font-size: 11px; color: var(--text-muted); }
.px-the-one-quick-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px;
}
@media (max-width: 560px) { .px-the-one-quick-grid { grid-template-columns: repeat(3, 1fr); } }
.px-hq-card {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 10px 6px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-silver);
  border-radius: 10px;
  cursor: pointer; font-family: inherit;
  transition: transform 0.15s, border-color 0.15s, background 0.15s;
}
.px-hq-card:hover {
  transform: translateY(-2px);
  border-color: var(--text-primary);
  background: rgba(129,140,255,0.1);
}
.px-hq-ico { font-size: 24px; margin-bottom: 2px; }
.px-hq-card strong { font-size: 11px; color: #fff; font-weight: 800; }
.px-hq-card em { font-size: 9px; color: var(--text-muted); font-style: normal; letter-spacing: 0.3px; text-transform: uppercase; }

/* Post-registration floating checklist */
.px-the-one-checklist {
  position: fixed; bottom: 16px; right: 16px;
  width: 280px; z-index: 9500;
  background: linear-gradient(180deg, #14161e, #0b0d12);
  border: 1px solid var(--text-primary);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 20px rgba(129,140,255,0.25);
  animation: pxFloatIn 0.35s ease-out;
}
@keyframes pxFloatIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 560px) {
  .px-the-one-checklist { right: 8px; left: 8px; width: auto; bottom: 76px; /* clear the bottom nav */ }
}
.px-the-one-checklist.is-collapsed .px-hc-body { display: none; }
.px-the-one-checklist.is-collapsed .px-hc-toggle { transform: rotate(180deg); }
.px-hc-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(129,140,255,0.2);
}
.px-hc-head strong {
  font-size: 12px; color: var(--text-primary);
  letter-spacing: 0.3px;
}
.px-hc-toggle {
  background: transparent; border: 0;
  color: var(--text-muted); font-size: 14px;
  cursor: pointer; transition: transform 0.2s;
}
.px-hc-body { padding: 10px 14px 12px; }
.px-hc-progress {
  height: 5px; border-radius: 999px;
  background: rgba(255,255,255,0.08);
  overflow: hidden; margin-bottom: 10px;
}
.px-hc-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #FFFFFF, #B0B4BC);
  transition: width 0.3s;
}
.px-hc-items { display: flex; flex-direction: column; gap: 5px; }
.px-hc-item {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 0;
  font-size: 11px; color: var(--text-secondary);
  cursor: pointer;
}
.px-hc-item.is-done span { text-decoration: line-through; color: var(--text-muted); opacity: 0.7; }
.px-hc-item input { accent-color: #FFFFFF; }
.px-hc-dismiss {
  width: 100%; margin-top: 10px;
  padding: 6px; background: transparent;
  border: 1px solid var(--border-silver);
  border-radius: 8px;
  color: var(--text-muted); font-size: 10px; font-weight: 700;
  cursor: pointer; font-family: inherit;
  letter-spacing: 0.3px; text-transform: uppercase;
}
.px-hc-dismiss:hover { background: rgba(255,255,255,0.04); color: #fff; }

/* ════════════════════════════════════════════════════
   THE ONE WIZARD — Step 5 Payment Method (NEW)
   ════════════════════════════════════════════════════ */
.hx-est-time {
  text-align: center;
  font-size: 10px; color: var(--text-muted);
  margin-bottom: 14px;
  letter-spacing: 0.4px;
  font-style: italic;
}
.hx-pay-options {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-bottom: 14px;
}
@media (max-width: 560px) { .hx-pay-options { grid-template-columns: 1fr; } }
.hx-pay-option {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
  background: rgba(255,255,255,0.04);
  border: 1.5px solid var(--border-silver);
  border-radius: 12px;
  cursor: pointer; font-family: inherit;
  text-align: left;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.hx-pay-option:hover {
  border-color: var(--text-primary);
  background: rgba(129,140,255,0.08);
  transform: translateY(-1px);
}
.hx-pay-icon {
  font-size: 32px;
  filter: drop-shadow(0 2px 8px rgba(129,140,255,0.3));
}
.hx-pay-option strong { display: block; color: #fff; font-size: 13px; font-weight: 800; }
.hx-pay-option span { font-size: 11px; color: var(--text-muted); }
.hx-pay-cta {
  width: 32px; height: 32px; border-radius: 50%;
  background: #FFFFFF; color: #1a1000;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
}

.hx-pay-list { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.hx-pay-empty {
  padding: 14px; text-align: center;
  font-size: 12px; color: var(--text-muted); font-style: italic;
  border: 1px dashed var(--border-silver); border-radius: 10px;
}
.hx-pay-row {
  display: grid; grid-template-columns: auto 1fr auto; gap: 10px;
  align-items: center;
  padding: 10px 12px;
  background: rgba(34,197,94,0.06);
  border: 1px solid rgba(34,197,94,0.35);
  border-radius: 10px;
}
.hx-pay-row-icon { font-size: 22px; }
.hx-pay-row-info strong { display: block; color: #fff; font-size: 12px; font-weight: 700; }
.hx-pay-row-info span { font-size: 10px; color: var(--text-muted); }
.hx-pay-row-ok {
  font-size: 10px; padding: 3px 8px; border-radius: 999px;
  background: rgba(34,197,94,0.18); color: #4ade80;
  border: 1px solid rgba(34,197,94,0.4);
  font-weight: 800; letter-spacing: 0.3px;
}
.hx-pay-trust {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  margin-top: 12px;
  font-size: 9px; color: var(--text-muted);
  font-weight: 700; letter-spacing: 0.4px;
}
.hx-pay-trust span {
  background: rgba(255,255,255,0.04);
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--border-silver);
}
.hx-pay-cards { color: var(--text-primary) !important; }

.hx-topup-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px;
}
.hx-topup-amt {
  padding: 12px;
  background: rgba(129,140,255,0.10);
  border: 1px solid var(--border-gold);
  border-radius: 10px;
  color: var(--text-primary);
  font-family: 'Playfair Display', serif;
  font-size: 14px; font-weight: 800;
  cursor: pointer;
  transition: all 0.15s;
}
.hx-topup-amt:hover {
  background: rgba(129,140,255,0.2);
  transform: translateY(-1px);
}

/* ════════════════════════════════════════════════════
   THE ONE WIZARD — Step 6 enhanced subscription
   ════════════════════════════════════════════════════ */
.hx-billing-toggle {
  display: inline-flex;
  margin: 0 auto 14px;
  padding: 4px;
  background: rgba(255,255,255,0.04);
  border-radius: 999px;
  gap: 4px;
  width: fit-content;
}
.hx-billing-toggle {
  display: flex;
  margin-left: auto; margin-right: auto;
}
.hx-billing-toggle button {
  background: transparent; border: 0;
  color: var(--text-muted);
  padding: 8px 18px; border-radius: 999px;
  font-family: inherit; font-size: 12px; font-weight: 800;
  cursor: pointer;
  transition: all 0.15s;
}
.hx-billing-toggle button.is-active {
  background: #FFFFFF; color: #1a1000;
  box-shadow: 0 2px 8px rgba(129,140,255,0.3);
}
.hx-save {
  display: inline-block; margin-left: 6px;
  font-size: 9px; padding: 2px 6px; border-radius: 4px;
  background: rgba(34,197,94,0.2); color: #4ade80;
  font-weight: 700;
}

.hx-tier-emoji { font-size: 26px; line-height: 1; margin-bottom: 4px; }
.hx-tier-for {
  font-size: 10px; color: var(--text-muted);
  font-style: italic;
  margin-bottom: 8px;
}

.hx-extra-options {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  margin-top: 12px;
}
.hx-extra-link {
  background: transparent; border: 1px dashed var(--border-silver);
  color: var(--text-secondary);
  padding: 6px 12px; border-radius: 999px;
  font-family: inherit; font-size: 11px; font-weight: 700;
  cursor: pointer;
}
.hx-extra-link:hover {
  background: rgba(129,140,255,0.06);
  border-color: var(--border-gold);
  color: var(--text-primary);
}

/* ════════════════════════════════════════════════════
   THE ONE WIZARD — Step 7 enhanced plan banner on Managers
   ════════════════════════════════════════════════════ */
.hx-plan-banner {
  padding: 14px 16px; margin-bottom: 14px;
  background: linear-gradient(135deg, rgba(129,140,255,0.16), rgba(255,255,255,0.02));
  border: 1.5px solid var(--text-primary);
  border-radius: 14px;
  box-shadow: 0 0 18px rgba(129,140,255,0.15);
}
.hx-plan-banner-row {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
}
.hx-plan-banner-lbl {
  font-size: 10px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--text-muted); font-weight: 800;
}
.hx-plan-banner-tier {
  font-family: 'Playfair Display', serif;
  font-size: 16px; font-weight: 800;
  color: var(--text-primary);
  background: linear-gradient(135deg, var(--text-primary), #FFFFFF);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hx-plan-banner-stats {
  display: flex; flex-wrap: wrap; gap: 12px;
  font-size: 12px; color: var(--text-secondary);
  margin-bottom: 10px;
}
.hx-plan-banner-stats strong {
  color: var(--text-primary); font-weight: 800;
}
.hx-plan-banner-progress {
  display: flex; flex-direction: column; gap: 4px;
}
.hx-plan-banner-bar {
  height: 6px; border-radius: 999px;
  background: rgba(255,255,255,0.08); overflow: hidden;
}
.hx-plan-banner-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #FFFFFF, #B0B4BC);
  transition: width 0.3s;
}
.hx-plan-banner-progress > span {
  font-size: 10px; color: var(--text-muted);
  font-weight: 700; letter-spacing: 0.3px;
}

/* ════════════════════════════════════════════════════
   COMPANY PROFILE — shown to Master Admin / The One
   ════════════════════════════════════════════════════ */

/* BRAND-CLARITY-1 — profile switcher strip deleted (the #pxBrandBand under
   the top bar is the sole identity signal) */

/* Cover */
.px-cp-cover {
  position: relative;
  height: 180px;
  background-size: cover;
  background-position: center;
  margin: 0 -16px;
}
.px-cp-cover-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(11,13,18,0.9) 100%);
  /* #52c.2 — overlay must not absorb taps from the Edit Cover button
     below it (Safari especially was eating clicks). */
  pointer-events: none;
}
.px-cp-edit-cover {
  /* #52c.2 — bigger hitbox: 44×44 iOS tap-target spec via min-height
     + flex centering + bumped padding. z-index 3 puts it above any
     overlay or stat tile that might share the cover area. */
  position: absolute; bottom: 12px; right: 12px; z-index: 3;
  background: rgba(11,13,18,0.75); color: #fff;
  border: 1px solid var(--border-gold); border-radius: 10px;
  min-height: 44px;
  padding: 10px 16px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700;
  cursor: pointer; font-family: inherit;
  backdrop-filter: blur(8px);
}
.px-cp-edit-cover:hover { background: rgba(129,140,255,0.2); }

.px-cp-view-toggle {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  display: flex; gap: 2px;
  background: rgba(11,13,18,0.7);
  padding: 3px; border-radius: 999px;
  backdrop-filter: blur(8px);
  border: 1px solid var(--border-silver);
}
.px-cp-view-toggle button {
  background: transparent; border: 0;
  color: var(--text-muted);
  font-family: inherit; font-size: 10px; font-weight: 700;
  padding: 5px 10px; border-radius: 999px;
  cursor: pointer;
  letter-spacing: 0.3px;
}
.px-cp-view-toggle button.is-active {
  background: #FFFFFF; color: #1a1000;
}

/* Header (logo + name + tags) */
.px-cp-header {
  display: flex; align-items: flex-end; gap: 14px;
  padding: 0 16px;
  margin-top: -36px; position: relative; z-index: 2;
}
.px-cp-logo-wrap {
  width: 84px; height: 84px;
  border-radius: 18px;
  /* #52c.1 — removed white bg + 6px padding (the visible "frame"). Gold
     ring stays via box-shadow. overflow:hidden so the rounded corners
     clip the cover-filled image cleanly. */
  overflow: hidden;
  background: #0a0a0a;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 0 0 2px var(--text-primary);
  flex-shrink: 0;
}
.px-cp-logo {
  /* #52c.1 — object-fit:cover so the logo fills the slot like the
     Cuadrix profile photo. Was object-fit:contain, which left the
     dark/white border visible around non-square logos. */
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.px-cp-id { flex: 1; min-width: 0; padding-bottom: 4px; }
.px-cp-name {
  font-family: 'Playfair Display', serif;
  font-size: 22px; font-weight: 800;
  color: var(--text-primary);
  background: linear-gradient(135deg, #FFFFFF, var(--text-primary), #fff);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0;
  line-height: 1.1;
}
.px-cp-tags {
  display: flex; flex-wrap: wrap; gap: 5px;
  margin: 6px 0 4px;
}
.px-cp-tag, .px-cp-verified, .px-cp-premium {
  font-size: 10px; padding: 3px 8px; border-radius: 999px;
  font-weight: 700; letter-spacing: 0.3px;
}
.px-cp-tag {
  background: rgba(129,140,255,0.14); color: var(--text-primary);
  border: 1px solid var(--border-gold);
}
.px-cp-verified {
  background: rgba(34,197,94,0.18); color: #4ade80;
  border: 1px solid rgba(34,197,94,0.4);
}
.px-cp-premium {
  background: linear-gradient(135deg, #FFFFFF, #B0B4BC);
  color: #1a1000;
  box-shadow: 0 0 10px rgba(129,140,255,0.4);
}
.px-cp-loc {
  font-size: 11px; color: var(--text-muted);
  margin-top: 2px;
}

/* Stats bar */
.px-cp-stats {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px;
  margin: 14px 16px;
  padding: 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-silver);
  border-radius: 12px;
}
@media (max-width: 480px) {
  .px-cp-stats { grid-template-columns: repeat(3, 1fr); gap: 8px; }
}
.px-cp-stat {
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.px-cp-stat strong {
  font-family: 'Playfair Display', serif;
  font-size: 16px; font-weight: 800; color: var(--text-primary);
  line-height: 1;
}
.px-cp-stat span {
  font-size: 9px; letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--text-muted); font-weight: 700; margin-top: 2px;
}

/* Action buttons */
.px-cp-actions {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 0 16px 4px;
}
.px-cp-actions button { font-size: 11px !important; padding: 7px 12px !important; }

/* Sections */
.px-cp-section {
  margin: 16px 16px;
  padding: 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-silver);
  border-radius: 12px;
}
.px-cp-section-title {
  font-family: 'Playfair Display', serif;
  font-size: 14px; font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.px-cp-about {
  font-size: 12px; color: var(--text-secondary); line-height: 1.55;
  margin-bottom: 10px;
}
.px-cp-about-meta {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
}
.px-cp-about-meta li {
  padding: 6px 8px;
  background: rgba(255,255,255,0.03);
  border-radius: 6px;
  font-size: 11px;
}
.px-cp-about-meta span {
  display: block; font-size: 9px; letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--text-primary); font-weight: 800;
}
.px-cp-about-meta strong { color: #fff; font-weight: 600; }

/* Tabs */
.px-cp-tabs {
  display: flex; flex-wrap: nowrap;
  overflow-x: auto;
  gap: 4px;
  padding: 0 16px;
  margin-bottom: 10px;
  scrollbar-width: none;
}
.px-cp-tabs::-webkit-scrollbar { display: none; }
.px-cp-tab {
  flex-shrink: 0;
  background: transparent; border: 0;
  color: var(--text-muted);
  padding: 8px 14px; border-radius: 10px;
  font-family: inherit; font-size: 12px; font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}
.px-cp-tab:hover { color: #fff; background: rgba(255,255,255,0.04); }
.px-cp-tab.is-active {
  background: rgba(129,140,255,0.16);
  color: var(--text-primary);
  border: 1px solid var(--border-gold);
}

.px-cp-tab-body {
  margin: 0 16px 16px;
  padding: 14px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border-silver);
  border-radius: 12px;
  min-height: 140px;
}

/* Info tab grid */
.px-cp-info-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
@media (max-width: 480px) { .px-cp-info-grid { grid-template-columns: 1fr; } }
.px-cp-info-grid > div {
  padding: 8px 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-silver);
  border-radius: 8px;
}
.px-cp-info-grid span {
  display: block; font-size: 9px; letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--text-muted); font-weight: 700;
}
.px-cp-info-grid strong {
  display: block; color: #fff; font-weight: 600; font-size: 11.5px;
  margin-top: 2px; word-break: break-word;
}
.px-cp-info-grid em {
  font-style: italic; color: var(--text-muted); font-weight: 400; font-size: 10px;
}
.px-cp-mini-badge {
  display: inline-block; margin-left: 4px;
  font-size: 9px; padding: 2px 6px; border-radius: 4px;
  background: rgba(34,197,94,0.18); color: #4ade80;
  font-weight: 800;
}

/* Team rows */
.px-cp-team-row {
  display: grid; grid-template-columns: auto 1fr auto; gap: 10px;
  align-items: center;
  padding: 8px 10px; margin-bottom: 6px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-silver);
  border-radius: 10px;
}
.px-cp-team-row.is-master {
  border-color: var(--text-primary);
  background: rgba(129,140,255,0.08);
}
.px-cp-team-row img {
  width: 36px; height: 36px; border-radius: 50%; object-fit: cover;
  border: 1.5px solid var(--border-gold);
}
.px-cp-team-row strong { display: block; color: #fff; font-size: 12px; font-weight: 800; }
.px-cp-team-row span { font-size: 10px; color: var(--text-muted); }
.px-cp-team-tag {
  font-size: 9px; padding: 3px 8px; border-radius: 999px;
  background: rgba(129,140,255,0.14); color: var(--text-primary);
  border: 1px solid var(--border-gold);
  font-weight: 800; letter-spacing: 0.3px;
}

/* Locations */
.px-cp-loc-card {
  display: grid; grid-template-columns: auto 1fr auto; gap: 12px;
  align-items: center;
  padding: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-silver);
  border-radius: 12px;
  margin-bottom: 8px;
}
.px-cp-loc-marker {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(129,140,255,0.16);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
}
.px-cp-loc-body strong { display: block; color: #fff; font-size: 12px; font-weight: 800; }
.px-cp-loc-body span { display: block; font-size: 10px; color: var(--text-primary); }
.px-cp-loc-body em { font-size: 10px; color: var(--text-muted); font-style: italic; }
.px-cp-loc-map {
  width: 40px; height: 40px; border-radius: 8px;
  background: rgba(255,255,255,0.05);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
}

/* Gallery */
.px-cp-gallery {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px;
}
.px-cp-gallery-cell {
  aspect-ratio: 1;
  background-size: cover; background-position: center;
  border-radius: 10px;
  border: 1px solid var(--border-silver);
}
.px-cp-gallery-add {
  aspect-ratio: 1;
  background: rgba(129,140,255,0.06);
  border: 2px dashed var(--border-gold);
  border-radius: 10px;
  color: var(--text-primary);
  font-family: inherit; font-size: 13px; font-weight: 800;
  cursor: pointer;
}
.px-cp-gallery-add:hover { background: rgba(129,140,255,0.12); }

/* Reviews */
.px-cp-reviews-summary {
  display: grid; grid-template-columns: auto 1fr; gap: 16px;
  align-items: center;
  padding: 14px; margin-bottom: 12px;
  background: rgba(129,140,255,0.06);
  border: 1px solid var(--border-gold);
  border-radius: 10px;
}
.px-cp-reviews-num {
  font-family: 'Playfair Display', serif;
  font-size: 36px; font-weight: 800; color: var(--text-primary);
}
.px-cp-reviews-bars { display: flex; flex-direction: column; gap: 3px; font-size: 10px; }
.px-cp-reviews-bars > div {
  display: grid; grid-template-columns: 18px 1fr 22px; gap: 6px; align-items: center;
  color: var(--text-muted);
}
.px-cp-bar { height: 5px; background: rgba(255,255,255,0.06); border-radius: 999px; overflow: hidden; }
.px-cp-bar > div { height: 100%; background: #FFFFFF; border-radius: 999px; }
.px-cp-review {
  padding: 10px 12px; margin-bottom: 6px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-silver);
  border-radius: 10px;
}
.px-cp-review-stars { color: var(--text-primary); font-size: 12px; letter-spacing: 1px; margin-bottom: 4px; }
.px-cp-review p { font-size: 11px; color: #fff; font-style: italic; line-height: 1.45; }
.px-cp-review span { display: block; margin-top: 6px; font-size: 9px; color: var(--text-muted); }

/* Hiring */
.px-cp-hiring-stats {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px;
  margin-bottom: 10px;
}
.px-cp-hiring-stats > div {
  padding: 10px; text-align: center;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-silver);
  border-radius: 8px;
}
.px-cp-hiring-stats strong {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 16px; color: var(--text-primary);
}
.px-cp-hiring-stats span {
  display: block; font-size: 9px; color: var(--text-muted);
  letter-spacing: 0.4px;
}
.px-cp-hiring-row {
  display: flex; flex-direction: column;
  padding: 8px 12px; margin-bottom: 4px;
  background: rgba(255,255,255,0.03);
  border-left: 3px solid var(--text-primary);
  border-radius: 8px;
}
.px-cp-hiring-row strong { color: #fff; font-size: 12px; font-weight: 700; }
.px-cp-hiring-row span { font-size: 10px; color: var(--text-muted); }

/* Sidebar (admin tools) */
.px-cp-sidebar {
  margin: 0 16px 16px;
  padding: 14px;
  background: linear-gradient(180deg, rgba(129,140,255,0.10), rgba(255,255,255,0.02));
  border: 1px solid var(--border-gold);
  border-radius: 12px;
}
.px-cp-side-title {
  font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--text-primary); font-weight: 800; margin-bottom: 8px;
}
.px-cp-side-card {
  display: block; padding: 10px 12px; margin-bottom: 6px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-silver);
  border-radius: 8px;
  font-size: 11px; color: var(--text-secondary);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.px-cp-side-card:hover { border-color: var(--border-gold); background: rgba(129,140,255,0.08); }
.px-cp-side-card strong {
  font-family: 'Playfair Display', serif;
  font-size: 14px; color: var(--text-primary); margin: 0 4px;
}
/* BRAND-CLARITY-1 — PEOPLE / WORK / MONEY section headers in Admin Tools */
.px-cp-side-group {
  font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--text-muted); font-weight: 600;
  margin: 14px 0 6px;
}
.px-cp-side-group:first-of-type { margin-top: 10px; }

/* CTX-FOLLOW-1 item 3 — PEOPLE group compact team list (quiet, hairline,
   no cards-in-cards) */
.px-cp-people { margin: 2px 0 6px; }
.px-cp-people-loading, .px-cp-people-empty {
  font-size: 12px; color: var(--text-muted); padding: 8px 2px;
}
.px-cp-person {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 2px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.px-cp-person:last-of-type { border-bottom: none; }
.px-cp-person-av {
  width: 28px; height: 28px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
}
.px-cp-person-main { flex: 1; min-width: 0; }
.px-cp-person-name {
  font-size: 13px; font-weight: 600; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.px-cp-person-sub {
  font-size: 11px; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.px-cp-people-all {
  display: block; width: 100%; text-align: left;
  margin-top: 8px; padding: 6px 2px;
  background: none; border: none;
  font: inherit; font-size: 12px; font-weight: 600; color: var(--text-secondary);
  cursor: pointer;
}
.px-cp-people-all:hover { color: var(--text-primary); }

/* BRAND-CLARITY-1 — quiet "Manage brands →" link in the profile tab strip */
.px-cp-manage-link {
  align-self: center; margin-left: auto; padding: 8px 4px;
  font-size: 12px; font-weight: 600; color: var(--text-muted);
  white-space: nowrap; cursor: pointer;
}
.px-cp-manage-link:hover { color: var(--text-secondary); }

/* BRAND-CLARITY-1 item 5 — "Your Beacon" completion module */
.bcpl-card {
  margin: 14px 16px 4px; padding: 14px 16px 6px;
  background: linear-gradient(180deg, rgba(22,22,28,0.92), rgba(14,14,18,0.9));
  border: 1px solid var(--border-silver);
  border-radius: 14px;
  animation: fadeIn 0.3s ease;
}
.bcpl-head {
  font-size: 12px; font-weight: 600; color: var(--text-secondary);
  letter-spacing: 0.2px; margin-bottom: 10px;
}
.bcpl-track {
  height: 2px; border-radius: 1px; background: rgba(255,255,255,0.08);
  overflow: hidden; margin-bottom: 6px;
}
.bcpl-fill { height: 100%; background: #E8C879; transition: width 0.3s ease; }
.bcpl-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 9px 2px;
  background: none; border: none; border-bottom: 1px solid rgba(255,255,255,0.05);
  font: inherit; font-size: 13px; color: var(--text-primary);
  text-align: left; cursor: pointer;
}
.bcpl-row:last-child { border-bottom: none; }
.bcpl-row.is-done { color: var(--text-muted); cursor: default; }
.bcpl-check { color: #E8C879; font-size: 12px; }
.bcpl-chev { color: var(--text-muted); font-size: 15px; line-height: 1; }

.px-cp-empty {
  padding: 14px; text-align: center;
  font-size: 12px; color: var(--text-muted); font-style: italic;
}

/* PX monogram — square app-icon */
.brand-monogram-img {
  width: 36px; height: 36px;
  display: block; flex-shrink: 0;
  border-radius: 9px;
  object-fit: cover;
  box-shadow: 0 2px 10px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.12);
}
.brand-monogram-img.brand-monogram-img--sm { width: 28px; height: 28px; border-radius: 7px; }
.brand-monogram-img.brand-monogram-img--lg { width: 48px; height: 48px; border-radius: 12px; }

/* ══════════════════════════════════════════════
   X UNIVERSITY — HQ learning hub
══════════════════════════════════════════════ */
.xu-section { margin-bottom: 28px; }

.xu-masthead {
  text-align: center;
  padding: 8px 0 18px;
  position: relative;
}
.xu-crest {
  font-size: 32px;
  line-height: 1;
  margin-bottom: 8px;
  filter: drop-shadow(0 4px 18px rgba(255,255,255,0.35));
}
.xu-title {
  font-family: 'Playfair Display', serif;
  font-size: 36px; font-weight: 700;
  letter-spacing: -1px; line-height: 1;
  color: #fff;
  margin-bottom: 6px;
}
.xu-title-accent {
  background: linear-gradient(135deg, var(--text-primary), #FFFFFF);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: italic;
}
.xu-tagline {
  font-size: 11px; letter-spacing: 4px; text-transform: uppercase;
  font-weight: 500;
  background: var(--chrome-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

.xu-progress-card {
  display: flex; align-items: stretch;
  padding: 14px 18px;
  background: linear-gradient(180deg, rgba(26,26,38,0.92), rgba(14,14,22,0.9));
  border: 1px solid var(--border-gold);
  border-radius: var(--r-lg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 4px 18px rgba(0,0,0,0.3), 0 0 30px rgba(255,255,255,0.08);
  margin-bottom: 18px;
}
.xu-progress-item {
  flex: 1;
  display: flex; flex-direction: column; align-items: center;
  gap: 2px;
}
.xu-progress-num {
  font-family: 'Playfair Display', serif;
  font-size: 24px; font-weight: 700;
  background: linear-gradient(135deg, var(--text-primary), #FFFFFF);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.xu-progress-lbl {
  font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--text-muted); font-weight: 700;
}
.xu-progress-divider {
  width: 1px; background: var(--border-gold); opacity: 0.4;
  margin: 4px 0;
}

.xu-filter-row {
  display: flex; gap: 6px;
  padding: 4px; margin-bottom: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-silver);
  border-radius: var(--r-full);
}
.xu-filter {
  flex: 1; padding: 8px 14px;
  border-radius: var(--r-full);
  font-size: 12px; font-weight: 600;
  color: var(--text-secondary);
  transition: all 0.2s;
}
.xu-filter.active {
  background: linear-gradient(135deg, #FFFFFF, #B0B4BC);
  color: #1a1000;
  box-shadow: 0 2px 10px rgba(255,255,255,0.28);
}

/* Module cards */
.xu-modules { display: flex; flex-direction: column; gap: 14px; }
.xu-module {
  position: relative;
  display: flex; flex-direction: column;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: linear-gradient(180deg, rgba(22,22,32,0.95), rgba(14,14,22,0.9));
  border: 1px solid var(--border-silver);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 4px 18px rgba(0,0,0,0.3);
  transition: all 0.25s;
}
.xu-module:hover {
  border-color: var(--border-silver-strong);
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 10px 28px rgba(0,0,0,0.45);
}
.xu-module.premium {
  border-color: var(--border-gold);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 4px 20px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.08), 0 0 32px rgba(255,255,255,0.06);
}
.xu-module.premium:hover {
  border-color: var(--text-primary);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 12px 32px rgba(0,0,0,0.5), 0 0 0 1px var(--gold-glow-sm), 0 0 42px rgba(255,255,255,0.15);
}

.xu-thumb {
  position: relative;
  height: 130px;
  background-size: cover; background-position: center;
}
.xu-thumb::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 0%, rgba(14,14,22,0.95) 100%);
}
.xu-thumb-top {
  position: absolute; top: 10px; left: 10px; right: 10px;
  z-index: 2;
  display: flex; justify-content: space-between; align-items: flex-start;
}
.xu-level {
  padding: 3px 8px; border-radius: 4px;
  font-size: 9px; font-weight: 800; letter-spacing: 1.2px;
  text-transform: uppercase;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff;
}
.xu-level.beginner    { color: #34d399; border-color: rgba(5,150,105,0.5); }
.xu-level.intermediate{ color: #fbbf24; border-color: rgba(251,191,36,0.5); }
.xu-level.advanced    { color: #f87171; border-color: rgba(248,113,113,0.5); }
.xu-premium-lock {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: 4px;
  font-size: 9px; font-weight: 800; letter-spacing: 1.2px;
  background: linear-gradient(135deg, #FFFFFF, #B0B4BC);
  color: #1a1000;
  box-shadow: 0 2px 10px rgba(255,255,255,0.35);
}

.xu-info {
  padding: 12px 14px 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.xu-m-title {
  font-size: 16px; font-weight: 800; letter-spacing: -0.2px;
  color: #fff; line-height: 1.25;
  margin: 0;
}
.xu-stats {
  display: flex; flex-wrap: wrap; gap: 6px;
  font-size: 11px; color: var(--text-secondary);
  font-weight: 500;
}
.xu-stat {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: var(--r-full);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
}
.xu-stat.cert { color: var(--text-primary); border-color: var(--border-gold); background: var(--gold-glow-sm); }

.xu-badge-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: var(--r-full);
  font-size: 10px; font-weight: 800; letter-spacing: 0.5px;
  align-self: flex-start;
}
.xu-badge-chip.gold     { background: linear-gradient(135deg, #FFFFFF, #B0B4BC); color: #1a1000; box-shadow: 0 2px 10px rgba(255,255,255,0.3); }
.xu-badge-chip.silver   { background: var(--chrome-grad); color: #1a1a1a; }
.xu-badge-chip.platinum { background: linear-gradient(135deg, #b9f2ff 0%, #a0d8e8 45%, #e6f6ff 100%); color: #0a1a2a; box-shadow: 0 2px 12px rgba(160,216,232,0.4); }
.xu-badge-chip.bronze   { background: linear-gradient(135deg, #b87333, #d8934a); color: #2a1400; }

.xu-foot {
  display: flex; align-items: center; gap: 12px;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.xu-ring {
  position: relative;
  width: 44px; height: 44px; flex-shrink: 0;
}
.xu-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.xu-ring-track { stroke: rgba(255,255,255,0.1); fill: none; stroke-width: 4; }
.xu-ring-fill  { stroke: url(#xuRingGrad); fill: none; stroke-width: 4; stroke-linecap: round; transition: stroke-dasharray 1.2s cubic-bezier(0.4,0,0.2,1); }
.xu-ring-label {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; color: var(--text-primary);
}
.xu-ring.completed .xu-ring-fill { stroke: #34d399; }
.xu-ring.completed .xu-ring-label { color: #34d399; }

.xu-actions { flex: 1; display: flex; gap: 8px; justify-content: flex-end; }
.xu-cta {
  padding: 9px 14px; border-radius: var(--r-full);
  font-size: 12px; font-weight: 700; letter-spacing: 0.3px;
  transition: all 0.2s;
}
.xu-cta.start {
  background: rgba(255,255,255,0.12);
  border: 1px solid var(--border-gold);
  color: var(--text-primary);
}
.xu-cta.start:hover { background: var(--gold-glow); color: #fff; }
.xu-cta.continue {
  background: linear-gradient(135deg, #FFFFFF, #B0B4BC);
  color: #1a1000;
  box-shadow: 0 2px 10px rgba(255,255,255,0.3);
}
.xu-cta.continue:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(255,255,255,0.45); }
.xu-cta.completed {
  background: rgba(5,150,105,0.12);
  border: 1px solid rgba(5,150,105,0.4);
  color: #34d399;
  cursor: default;
}
.xu-cta.cert {
  background: transparent;
  border: 1px solid var(--border-gold);
  color: var(--text-primary);
}
.xu-cta.cert:hover { background: var(--gold-glow-sm); }
.xu-cta.premium-unlock {
  background: linear-gradient(135deg, #FFFFFF, #B0B4BC);
  color: #1a1000;
  display: inline-flex; align-items: center; gap: 4px;
  box-shadow: 0 2px 10px rgba(255,255,255,0.35);
}

/* Premium lock overlay */
.xu-module.premium .xu-thumb::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(circle at 50% 40%, rgba(255,255,255,0.2), transparent 60%);
}
.xu-module.premium .xu-lock-icon {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(0,0,0,0.65);
  border: 2px solid var(--text-primary);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-primary);
  box-shadow: 0 0 24px rgba(255,255,255,0.4);
  backdrop-filter: blur(6px);
}

/* ══════════════════════════════════════════════
   PREMIUM UPGRADE CTA
══════════════════════════════════════════════ */
.xu-premium-cta {
  position: relative;
  padding: 22px 22px 20px;
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, #1a1400 0%, #2a2000 50%, #0d0a00 100%);
  border: 1px solid var(--border-gold);
  margin-bottom: 28px;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,0.55), 0 0 60px rgba(255,255,255,0.15);
  text-align: center;
}
.xu-premium-glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,0.22), transparent 55%),
    radial-gradient(circle at 85% 90%, rgba(255,255,255,0.15), transparent 50%);
}
.xu-premium-badge {
  position: relative; z-index: 1;
  display: inline-block;
  padding: 4px 10px; border-radius: 4px;
  font-size: 10px; font-weight: 900; letter-spacing: 2px;
  background: linear-gradient(135deg, #FFFFFF, #B0B4BC);
  color: #1a1000;
  margin-bottom: 12px;
}
.xu-premium-title {
  position: relative; z-index: 1;
  font-family: 'Playfair Display', serif;
  font-size: 24px; font-weight: 700; letter-spacing: -0.5px;
  color: #fff;
  margin-bottom: 6px;
}
.xu-premium-sub {
  position: relative; z-index: 1;
  font-size: 13px; color: rgba(255,255,255,0.8);
  line-height: 1.5;
  margin-bottom: 18px;
  max-width: 340px; margin-left: auto; margin-right: auto;
}
.xu-plans {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-bottom: 16px;
}
.xu-plan {
  position: relative;
  padding: 14px 10px 12px;
  border-radius: var(--r-md);
  background: rgba(255,255,255,0.04);
  border: 1.5px solid var(--border-silver);
  color: #fff;
  transition: all 0.2s;
  text-align: center;
}
.xu-plan:hover { border-color: var(--border-silver-strong); }
.xu-plan.active {
  border-color: var(--text-primary);
  background: rgba(255,255,255,0.12);
  box-shadow: 0 0 0 1px var(--gold-glow-sm), 0 4px 16px rgba(255,255,255,0.25);
}
.xu-plan--featured { }
.xu-plan-ribbon {
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  padding: 3px 8px; border-radius: 3px;
  font-size: 9px; font-weight: 900; letter-spacing: 1px;
  background: linear-gradient(135deg, #FFFFFF, #B0B4BC);
  color: #1a1000;
  white-space: nowrap;
}
.xu-plan-label {
  display: block;
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--text-primary); font-weight: 700;
  margin-bottom: 6px;
}
.xu-plan-price {
  display: block;
  font-size: 12px; color: rgba(255,255,255,0.75);
}
.xu-plan-price strong {
  font-size: 22px; font-weight: 900; letter-spacing: -0.5px;
  color: #fff;
  margin-right: 2px;
}
.xu-premium-btn { position: relative; z-index: 1; }

/* ══════════════════════════════════════════════
   BADGES SHOWCASE
══════════════════════════════════════════════ */
.badges-section { margin-bottom: 28px; }
.xu-section-head {
  display: flex; align-items: baseline; gap: 10px;
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-silver);
}
.xu-section-eyebrow {
  font-size: 10px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--text-primary); font-weight: 600;
}
.xu-section-title {
  margin-left: auto;
  font-size: 17px; font-weight: 800; letter-spacing: -0.3px;
  color: #fff;
}

.badges-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
.badge {
  position: relative;
  padding: 16px 12px 14px;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(22,22,32,0.95), rgba(14,14,22,0.9));
  border: 1px solid var(--border-silver);
  text-align: center;
  transition: all 0.25s;
}
.badge.earned { border-color: var(--border-gold); }
.badge.earned.gold     { box-shadow: 0 0 0 1px rgba(255,255,255,0.1), 0 0 40px rgba(255,255,255,0.18), inset 0 1px 0 rgba(255,255,255,0.06); }
.badge.earned.silver   { box-shadow: 0 0 0 1px rgba(224,224,232,0.12), 0 0 32px rgba(224,224,232,0.14), inset 0 1px 0 rgba(255,255,255,0.06); border-color: var(--border-silver-strong); }
.badge.earned.platinum { box-shadow: 0 0 0 1px rgba(160,216,232,0.18), 0 0 40px rgba(160,216,232,0.22), inset 0 1px 0 rgba(255,255,255,0.08); border-color: rgba(160,216,232,0.4); }
.badge-medal {
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 10px;
  font-size: 26px;
  position: relative;
}
.badge.earned.gold .badge-medal     { background: linear-gradient(135deg, #FFFFFF, #B0B4BC); color: #1a1000; box-shadow: 0 6px 20px rgba(255,255,255,0.45); }
.badge.earned.silver .badge-medal   { background: var(--chrome-grad); color: #1a1a1a; box-shadow: 0 6px 20px rgba(224,224,232,0.25); }
.badge.earned.platinum .badge-medal { background: linear-gradient(135deg, #b9f2ff 0%, #a0d8e8 45%, #e6f6ff 100%); color: #0a1a2a; box-shadow: 0 6px 22px rgba(160,216,232,0.5); }
.badge.earned.bronze .badge-medal   { background: linear-gradient(135deg, #b87333, #d8934a); color: #2a1400; }
.badge.locked .badge-medal {
  background: rgba(255,255,255,0.04);
  border: 1.5px dashed rgba(255,255,255,0.18);
  color: var(--text-muted);
  font-size: 20px;
}

.badge-name {
  font-size: 13px; font-weight: 800; color: #fff; letter-spacing: -0.1px;
  margin-bottom: 3px;
}
.badge.locked .badge-name { color: var(--text-secondary); }
.badge-from {
  font-size: 10px; color: var(--text-muted);
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}
.badge-date {
  font-size: 10px; color: var(--text-primary); letter-spacing: 1px; text-transform: uppercase; font-weight: 700;
  margin-bottom: 10px;
}
.badge-lock-label {
  font-size: 10px; color: var(--text-muted); letter-spacing: 1px; text-transform: uppercase; font-weight: 600;
  margin-bottom: 10px;
}
.badge-share {
  width: 100%; padding: 6px;
  border-radius: var(--r-full);
  background: transparent;
  border: 1px solid var(--border-gold);
  color: var(--text-primary);
  font-size: 11px; font-weight: 700;
  transition: all 0.2s;
}
.badge-share:hover { background: var(--gold-glow-sm); }

/* ══════════════════════════════════════════════
   TEACH ON CuadrillaONE — creator section
══════════════════════════════════════════════ */
.creator-cta {
  position: relative;
  padding: 24px 22px 20px;
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, rgba(24,22,14,0.95) 0%, rgba(14,12,8,0.92) 100%);
  border: 1px solid var(--border-gold);
  overflow: hidden;
  text-align: center;
  box-shadow: 0 6px 28px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.05);
}
.creator-hero-icon {
  width: 56px; height: 56px; border-radius: 16px;
  background: linear-gradient(135deg, #FFFFFF, #B0B4BC);
  color: #1a1000;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px;
  box-shadow: 0 6px 22px rgba(255,255,255,0.4);
}
.creator-eyebrow {
  font-size: 10px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--text-primary); font-weight: 700;
  margin-bottom: 8px;
}
.creator-title {
  font-family: 'Playfair Display', serif;
  font-size: 24px; font-weight: 700; letter-spacing: -0.5px;
  color: #fff; line-height: 1.15;
  margin-bottom: 10px;
}
.creator-title-accent {
  background: linear-gradient(135deg, var(--text-primary), #FFFFFF);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: italic;
}
.creator-sub {
  font-size: 13px; color: rgba(255,255,255,0.78); line-height: 1.55;
  margin-bottom: 18px;
}
.creator-perks {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin-bottom: 18px;
}
.creator-perk {
  padding: 10px 6px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border-gold);
  border-radius: var(--r-md);
}
.creator-perk-num {
  display: block;
  font-size: 14px; font-weight: 900; color: var(--text-primary);
  letter-spacing: -0.3px;
  line-height: 1.05;
}
.creator-perk-lbl {
  display: block;
  font-size: 9px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--text-muted); font-weight: 700;
  margin-top: 3px;
}
.creator-fineprint {
  font-size: 10px; color: var(--text-muted);
  margin-top: 12px; letter-spacing: 0.3px;
  line-height: 1.5;
}

/* Creator Dashboard */
.creator-dash {
  padding: 20px 20px 18px;
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, rgba(20,20,28,0.96), rgba(12,12,18,0.92));
  border: 1px solid var(--border-gold);
  box-shadow: var(--shadow-md), 0 0 40px rgba(255,255,255,0.08);
}
.creator-dash-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 14px; gap: 10px;
}
.creator-status {
  font-size: 10px; font-weight: 800; letter-spacing: 1.5px;
  padding: 4px 10px; border-radius: var(--r-full);
  background: rgba(5,150,105,0.15);
  color: #34d399;
  border: 1px solid rgba(5,150,105,0.4);
  white-space: nowrap;
  align-self: flex-start;
}
.creator-kpis {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin-bottom: 16px;
}
.creator-kpi {
  padding: 10px 8px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border-gold);
  border-radius: var(--r-md);
  text-align: center;
}
.creator-kpi-num {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 18px; font-weight: 700;
  background: linear-gradient(135deg, var(--text-primary), #FFFFFF);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.creator-kpi-lbl {
  display: block;
  font-size: 9px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--text-muted); font-weight: 700;
  margin-top: 2px;
}
.creator-courses {
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 14px;
}
.creator-course-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-silver);
  border-radius: var(--r-md);
}
.creator-course-tag {
  font-size: 9px; font-weight: 800; letter-spacing: 1px;
  padding: 4px 8px; border-radius: 4px;
  flex-shrink: 0;
}
.creator-course-tag.free    { background: rgba(5,150,105,0.15); color: #34d399; border: 1px solid rgba(5,150,105,0.4); }
.creator-course-tag.paid    { background: rgba(14,165,202,0.15); color: #7fd1e8; border: 1px solid var(--border-cyan); }
.creator-course-tag.premium { background: linear-gradient(135deg, #FFFFFF, #B0B4BC); color: #1a1000; }
.creator-course-info { flex: 1; min-width: 0; }
.creator-course-info h4 { font-size: 13px; font-weight: 700; color: #fff; margin-bottom: 2px; }
.creator-course-info span { font-size: 11px; color: var(--text-muted); }
.creator-course-earn {
  font-size: 12px; font-weight: 700;
  color: #34d399;
  letter-spacing: 0.2px;
  white-space: nowrap;
}

.creator-chart {
  padding: 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-silver);
  border-radius: var(--r-md);
  margin-bottom: 14px;
}
.creator-chart-label {
  font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--text-primary); font-weight: 700;
  margin-bottom: 10px;
}
.creator-chart-bars {
  display: flex; gap: 4px; align-items: flex-end;
  height: 70px;
}
.ccb {
  flex: 1;
  background: linear-gradient(180deg, #B0B4BC, #FFFFFF);
  border-radius: 3px 3px 0 0;
  box-shadow: 0 0 8px rgba(255,255,255,0.35);
  animation: ccbGrow 0.9s cubic-bezier(0.34, 1.2, 0.64, 1) both;
}
@keyframes ccbGrow { from { height: 0 !important; } }

/* ══════════════════════════════════════════════
   CREATOR APPLICATION MODAL
══════════════════════════════════════════════ */
.creator-app-overlay, .premium-up-overlay {
  display: none; position: fixed; inset: 0; z-index: 420;
  background: rgba(7,9,15,0.78); backdrop-filter: blur(12px);
  align-items: flex-end; justify-content: center;
}
.creator-app-overlay.show, .premium-up-overlay.show {
  display: flex; animation: fadeIn 0.2s ease both;
}
.creator-app-modal {
  width: 100%; max-width: 430px;
  max-height: 92vh;
  background: var(--bg-elevated);
  border: 1px solid var(--border-gold);
  border-bottom: none;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: 10px 20px 18px;
  overflow-y: auto;
  animation: slideUpSheet 0.3s cubic-bezier(0.34, 1.2, 0.64, 1);
  scrollbar-width: none;
}
.creator-app-modal::-webkit-scrollbar { display: none; }
.ca-header {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.ca-header h3 { flex: 1; text-align: center; font-size: 16px; font-weight: 800; color: #fff; letter-spacing: -0.2px; }
.ca-submit-space { width: 32px; flex-shrink: 0; }
.ca-sub { font-size: 13px; color: var(--text-secondary); margin: 12px 0; line-height: 1.5; }
.ca-form { display: flex; flex-direction: column; gap: 14px; }
.ca-split-note {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: var(--gold-glow-sm);
  border: 1px solid var(--border-gold);
  border-radius: var(--r-md);
  font-size: 12px; color: var(--text-primary);
}
.ca-split-note svg { color: var(--text-primary); flex-shrink: 0; }

/* Premium upgrade modal */
.premium-up-modal {
  position: relative;
  width: 100%; max-width: 380px;
  max-height: 80vh;
  background: linear-gradient(180deg, #1a1400, #0d0a00);
  border: 1px solid var(--border-gold);
  border-bottom: none;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: 28px 22px 20px;
  text-align: center;
  animation: slideUpSheet 0.3s cubic-bezier(0.34, 1.2, 0.64, 1);
  box-shadow: 0 -20px 60px rgba(0,0,0,0.7), 0 0 60px rgba(255,255,255,0.2);
}
.pu-crown {
  width: 60px; height: 60px; border-radius: 50%;
  background: linear-gradient(135deg, #FFFFFF, #B0B4BC);
  color: #1a1000;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px;
  box-shadow: 0 6px 28px rgba(255,255,255,0.45);
}
.pu-title {
  font-family: 'Playfair Display', serif;
  font-size: 24px; font-weight: 700; letter-spacing: -0.5px;
  color: #fff;
  margin-bottom: 6px;
}
.pu-sub { font-size: 13px; color: rgba(255,255,255,0.8); margin-bottom: 18px; line-height: 1.5; }
.pu-plan-summary {
  padding: 12px 14px;
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--border-gold);
  border-radius: var(--r-md);
  font-size: 13px; color: var(--text-primary); font-weight: 600;
  margin-bottom: 16px;
}
.premium-up-modal .btn-gold { margin-bottom: 8px; }

/* Profile Cuadrix tag */
.profile-type-tag {
  display: inline-block;
  padding: 3px 10px;
  font-size: 10px; font-weight: 800; letter-spacing: 3px;
  background: linear-gradient(135deg, #FFFFFF, #B0B4BC);
  color: #1a1000;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(255,255,255,0.3);
}
.profile-tags-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.xu-member-badge {
  display: inline-block;
  padding: 3px 10px;
  font-size: 10px; font-weight: 800; letter-spacing: 1.5px;
  border: 1px solid var(--text-primary);
  background: rgba(255,255,255,0.08);
  color: var(--text-primary);
  border-radius: 4px;
  box-shadow: 0 0 14px rgba(255,255,255,0.18);
}

/* Three-plan grid */
.xu-plans--3 { grid-template-columns: repeat(3, 1fr); }
.xu-plan-note { display: block; font-size: 9px; color: var(--text-muted); letter-spacing: 1px; margin-top: 3px; min-height: 12px; }
.xu-plan-ribbon--sm { font-size: 8px !important; }
.xu-premium-fine { position: relative; z-index: 1; font-size: 10px; color: var(--text-muted); margin-top: 10px; letter-spacing: 0.3px; }

/* ══════════════════════════════════════════════
   MODULE DETAIL OVERLAY (full-sheet)
══════════════════════════════════════════════ */
.xud-overlay {
  display: none; position: fixed; inset: 0; z-index: 440;
  background: rgba(7,9,15,0.85);
  backdrop-filter: blur(12px);
}
.xud-overlay.show { display: block; animation: fadeIn 0.2s ease both; }
.xud-sheet {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 100%; max-width: 430px; height: 95dvh;
  background: linear-gradient(180deg, var(--bg-elevated), #0a0a0f);
  border: 1px solid var(--border-gold);
  border-bottom: none;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: 0 -20px 60px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.08);
  animation: slideUpSheet 0.3s cubic-bezier(0.34, 1.2, 0.64, 1);
}
.xud-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.xud-top-title { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--text-primary); font-weight: 800; }
.xud-body { flex: 1; overflow-y: auto; padding: 16px 18px 32px; scrollbar-width: none; }
.xud-body::-webkit-scrollbar { display: none; }

.xud-hero { position: relative; margin: -16px -18px 16px; height: 180px; background-size: cover; background-position: center; }
.xud-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(10,10,15,0.95) 100%); }
.xud-hero-info { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 1; }
.xud-hero-title { font-family: 'Playfair Display', serif; font-size: 24px; font-weight: 700; color: #fff; line-height: 1.1; letter-spacing: -0.5px; margin-bottom: 6px; }
.xud-hero-meta { display: flex; gap: 6px; flex-wrap: wrap; font-size: 11px; color: rgba(255,255,255,0.85); font-weight: 600; }

.xud-instructor {
  display: flex; align-items: center; gap: 12px;
  padding: 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border-gold);
  border-radius: var(--r-md);
  margin-bottom: 16px;
}
.xud-instr-photo { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 2px solid var(--text-primary); flex-shrink: 0; }
.xud-instr-info { flex: 1; min-width: 0; }
.xud-instr-label { font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-primary); font-weight: 700; }
.xud-instr-name { font-size: 14px; font-weight: 700; color: #fff; margin-top: 2px; }
.xud-instr-title { font-size: 11px; color: var(--text-secondary); margin-top: 1px; }

.xud-section-h { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-primary); font-weight: 800; margin: 18px 0 10px; }
.xud-lesson-list { display: flex; flex-direction: column; gap: 6px; }
.xud-lesson {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: all 0.2s;
  width: 100%; text-align: left;
}
.xud-lesson:not(:disabled):hover { border-color: var(--border-gold); background: var(--gold-glow-sm); }
.xud-lesson[disabled] { cursor: not-allowed; opacity: 0.75; }
.xud-lesson-num { width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,0.1); border: 1px solid var(--border-gold); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: var(--text-primary); flex-shrink: 0; }
.xud-lesson.done .xud-lesson-num { background: linear-gradient(135deg, #34d399, #059669); border-color: transparent; color: #fff; }
.xud-lesson.locked .xud-lesson-num { background: rgba(255,255,255,0.04); border-color: var(--border); color: var(--text-muted); }
.xud-lesson-body { flex: 1; min-width: 0; }
.xud-lesson-title { font-size: 13px; font-weight: 600; color: #fff; }
.xud-lesson.locked .xud-lesson-title { color: var(--text-secondary); }
.xud-lesson-sub { font-size: 10px; color: var(--text-muted); margin-top: 2px; }
.xud-lesson-icon { color: var(--text-muted); flex-shrink: 0; }
.xud-lesson.done .xud-lesson-icon { color: #34d399; }

.xud-subscribe-banner {
  margin: 14px 0 10px;
  padding: 14px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04));
  border: 1px solid var(--border-gold);
  text-align: center;
}
.xud-subscribe-banner h4 { font-size: 14px; color: #fff; margin-bottom: 4px; font-weight: 700; }
.xud-subscribe-banner p { font-size: 12px; color: var(--text-secondary); margin-bottom: 10px; }

.xud-ojt-card {
  padding: 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-silver);
  border-radius: var(--r-md);
  margin-bottom: 12px;
}
.xud-ojt-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.xud-ojt-head h4 { font-size: 14px; font-weight: 700; color: #fff; }
.xud-ojt-hours { font-size: 20px; font-weight: 900; background: linear-gradient(135deg, var(--text-primary), #FFFFFF); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: -0.5px; }
.xud-ojt-progress { height: 6px; background: rgba(255,255,255,0.08); border-radius: 3px; margin-bottom: 10px; overflow: hidden; }
.xud-ojt-progress-fill { height: 100%; background: linear-gradient(90deg, #FFFFFF, #B0B4BC); border-radius: 3px; transition: width 0.5s; }
.xud-ojt-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.xud-exam-card {
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(22,22,32,0.95), rgba(14,14,22,0.92));
  border: 1px solid var(--border-gold);
  border-radius: var(--r-md);
  margin-bottom: 12px;
}
.xud-exam-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.xud-exam-head h4 { font-size: 14px; font-weight: 700; color: #fff; }
.xud-exam-pill { font-size: 9px; letter-spacing: 1.5px; padding: 3px 8px; border-radius: 3px; background: var(--gold-glow-sm); color: var(--text-primary); border: 1px solid var(--border-gold); font-weight: 800; text-transform: uppercase; }
.xud-exam-stats { display: flex; gap: 10px; font-size: 11px; color: var(--text-secondary); margin-bottom: 10px; }

/* Lesson player */
.lesson-overlay {
  display: none; position: fixed; inset: 0; z-index: 500;
  background: rgba(0,0,0,0.92); backdrop-filter: blur(12px);
  align-items: center; justify-content: center;
  padding: 16px;
}
.lesson-overlay.show { display: flex; animation: fadeIn 0.2s ease both; }
.lesson-modal {
  width: 100%; max-width: 430px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-gold);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg), 0 0 60px rgba(255,255,255,0.15);
}
.lesson-topbar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.lesson-breadcrumb { flex: 1; text-align: center; font-size: 12px; color: var(--text-primary); font-weight: 600; letter-spacing: 0.5px; }
.lesson-video {
  position: relative; aspect-ratio: 16/9; width: 100%;
  background: #000;
  overflow: hidden;
}
.lesson-video-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: brightness(0.4) saturate(0.8);
}
.lesson-video-title {
  position: absolute; bottom: 16px; left: 18px; right: 18px; z-index: 2;
  font-size: 18px; font-weight: 800; color: #fff; letter-spacing: -0.3px;
  text-shadow: 0 2px 16px rgba(0,0,0,0.6);
}
.lesson-play-btn {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 70px; height: 70px; border-radius: 50%;
  background: linear-gradient(135deg, #FFFFFF, #B0B4BC);
  color: #1a1000;
  display: flex; align-items: center; justify-content: center;
  z-index: 3;
  box-shadow: 0 8px 32px rgba(255,255,255,0.45);
  transition: transform 0.2s;
}
.lesson-play-btn:hover { transform: translate(-50%, -50%) scale(1.08); }
.lesson-watermark {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  font-size: 9px; letter-spacing: 3px;
  color: rgba(255,255,255,0.45);
  font-weight: 800;
}
.lesson-progress { padding: 10px 16px 6px; }
.lesson-progress-track { height: 4px; background: rgba(255,255,255,0.08); border-radius: 2px; overflow: hidden; }
.lesson-progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #FFFFFF, #B0B4BC); border-radius: 2px; transition: width 0.15s linear; }
.lesson-progress-labels { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-muted); margin-top: 6px; letter-spacing: 0.5px; }
.lesson-foot { display: flex; align-items: center; gap: 10px; padding: 12px 16px 14px; border-top: 1px solid var(--border); }
.lesson-complete-note { font-size: 11px; color: #34d399; font-weight: 700; letter-spacing: 0.3px; flex: 1; }

/* Exam */
.exam-overlay {
  display: none; position: fixed; inset: 0; z-index: 510;
  background: rgba(0,0,0,0.92); backdrop-filter: blur(14px);
  align-items: flex-start; justify-content: center;
  padding: 20px 12px;
  overflow-y: auto;
}
.exam-overlay.show { display: flex; animation: fadeIn 0.2s ease both; }
.exam-modal {
  width: 100%; max-width: 440px;
  background: linear-gradient(180deg, var(--bg-elevated), #0c0c14);
  border: 1px solid var(--border-gold);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg), 0 0 70px rgba(255,255,255,0.12);
}
.exam-header { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.exam-meta { flex: 1; display: flex; flex-direction: column; line-height: 1.15; align-items: center; }
.exam-module-label { font-size: 10px; letter-spacing: 2px; color: var(--text-primary); font-weight: 800; text-transform: uppercase; }
.exam-qcount { font-size: 12px; color: #fff; font-weight: 700; margin-top: 2px; }
.exam-timer {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 10px; border-radius: var(--r-full);
  background: rgba(255,255,255,0.1);
  border: 1px solid var(--border-gold);
  color: var(--text-primary);
  font-size: 12px; font-weight: 700;
}
.exam-timer.warn { background: rgba(220,38,38,0.15); border-color: rgba(220,38,38,0.4); color: #f87171; animation: pulse 1.2s ease-in-out infinite; }
.exam-progress-track { height: 3px; background: rgba(255,255,255,0.08); }
.exam-progress-fill { height: 100%; background: linear-gradient(90deg, #FFFFFF, #B0B4BC); transition: width 0.3s; }
.exam-body { padding: 20px 20px 16px; }
.exam-q-text { font-size: 16px; font-weight: 700; color: #fff; line-height: 1.35; margin-bottom: 16px; }
.exam-options { display: flex; flex-direction: column; gap: 8px; }
.exam-opt {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.03);
  border: 1.5px solid var(--border-silver);
  border-radius: var(--r-md);
  text-align: left;
  color: #fff;
  font-size: 13px;
  transition: all 0.2s;
  cursor: pointer;
  width: 100%;
}
.exam-opt:hover { border-color: var(--border-gold); background: var(--gold-glow-sm); }
.exam-opt.selected { border-color: var(--text-primary); background: var(--gold-glow-sm); box-shadow: 0 0 0 1px var(--gold-glow-sm); }
.exam-opt-letter {
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: 1px solid var(--border-gold);
  color: var(--text-primary);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 11px;
  flex-shrink: 0;
}
.exam-opt.selected .exam-opt-letter { background: linear-gradient(135deg, #FFFFFF, #B0B4BC); color: #1a1000; border-color: transparent; }
.exam-foot { display: flex; justify-content: space-between; gap: 10px; padding: 14px 16px; border-top: 1px solid var(--border); }

/* Exam result */
.exam-result-overlay {
  display: none; position: fixed; inset: 0; z-index: 520;
  background: rgba(0,0,0,0.9); backdrop-filter: blur(12px);
  align-items: flex-start; justify-content: center;
  padding: 20px 12px;
  overflow-y: auto;
}
.exam-result-overlay.show { display: flex; animation: fadeIn 0.2s ease both; }
.exam-result-modal {
  position: relative;
  width: 100%; max-width: 400px;
  background: linear-gradient(180deg, var(--bg-elevated), #0c0c14);
  border: 1px solid var(--border-gold);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg), 0 0 80px rgba(255,255,255,0.2);
  animation: slideUpSheet 0.35s cubic-bezier(0.34, 1.2, 0.64, 1);
}
.exr-hero {
  position: relative;
  padding: 30px 20px 18px;
  text-align: center;
  background: radial-gradient(circle at 50% 30%, rgba(255,255,255,0.18), transparent 55%);
}
.exr-hero.failed { background: radial-gradient(circle at 50% 30%, rgba(220,38,38,0.18), transparent 55%); }
.exr-score { position: relative; width: 140px; height: 140px; margin: 0 auto 14px; }
.exr-ring { width: 100%; height: 100%; }
.exr-score-num {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Playfair Display', serif;
  font-size: 40px; font-weight: 700;
  background: linear-gradient(135deg, var(--text-primary), #FFFFFF);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: scoreCount 1.2s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.exr-hero.failed .exr-score-num { background: linear-gradient(135deg, #f87171, #ef4444); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.exr-hero.failed #exrRingFill { stroke: #ef4444; }
@keyframes scoreCount { from { opacity: 0; transform: scale(0.7); } to { opacity: 1; transform: scale(1); } }
.exr-status { font-size: 16px; font-weight: 800; letter-spacing: 1px; margin-bottom: 2px; }
.exr-hero.passed .exr-status { color: #34d399; }
.exr-hero.failed .exr-status { color: #f87171; }
.exr-grade {
  display: inline-block;
  margin-top: 6px;
  padding: 4px 12px;
  border-radius: var(--r-full);
  font-size: 11px; font-weight: 800; letter-spacing: 1.5px;
  background: linear-gradient(135deg, #FFFFFF, #B0B4BC);
  color: #1a1000;
}
.exr-hero.failed .exr-grade { background: rgba(248,113,113,0.18); color: #fca5a5; border: 1px solid rgba(248,113,113,0.4); }
.exr-breakdown { display: grid; grid-template-columns: repeat(3, 1fr); padding: 10px 16px; gap: 8px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.exr-bd-item { text-align: center; padding: 8px 4px; }
.exr-bd-num { display: block; font-size: 22px; font-weight: 900; color: #fff; line-height: 1; }
.exr-bd-item.correct .exr-bd-num { color: #34d399; }
.exr-bd-item.wrong .exr-bd-num { color: #f87171; }
.exr-bd-lbl { font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; margin-top: 3px; display: block; }
.exr-wrong-list { padding: 10px 16px; max-height: 200px; overflow-y: auto; scrollbar-width: none; }
.exr-wrong-list::-webkit-scrollbar { display: none; }
.exr-wrong-item {
  padding: 10px 12px;
  background: rgba(220,38,38,0.06);
  border: 1px solid rgba(248,113,113,0.2);
  border-radius: var(--r-sm);
  margin-bottom: 8px;
  font-size: 11px; line-height: 1.4;
}
.exr-wrong-q { color: #fff; font-weight: 600; margin-bottom: 6px; }
.exr-wrong-correct { color: #34d399; font-weight: 600; }
.exr-wrong-correct strong { color: var(--text-primary); }
.exr-wrong-explain { color: var(--text-secondary); margin-top: 4px; }
.exr-actions { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 18px; }

/* Certificate */
.cert-overlay {
  display: none; position: fixed; inset: 0; z-index: 530;
  background: rgba(0,0,0,0.92); backdrop-filter: blur(14px);
  align-items: center; justify-content: center;
  padding: 16px;
  overflow-y: auto;
}
.cert-overlay.show { display: flex; animation: fadeIn 0.25s ease both; }
.cert-modal {
  position: relative;
  width: 100%; max-width: 420px;
  animation: slideUpSheet 0.4s cubic-bezier(0.34, 1.2, 0.64, 1);
}
.cert-close { position: absolute; top: -42px; right: -4px; background: rgba(255,255,255,0.1) !important; }
.cert-paper {
  position: relative;
  padding: 22px 20px 16px;
  border-radius: var(--r-lg);
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,0.18), transparent 60%),
    linear-gradient(180deg, #1a1200 0%, #0a0800 60%, #050400 100%);
  border: 2px solid var(--text-primary);
  box-shadow: 0 20px 60px rgba(0,0,0,0.75), 0 0 40px rgba(255,255,255,0.3), inset 0 1px 0 rgba(255,255,255,0.05);
  text-align: center;
  overflow: hidden;
}
.cert-corner-tl, .cert-corner-tr, .cert-corner-bl, .cert-corner-br {
  position: absolute; width: 28px; height: 28px;
  border: 2px solid var(--text-primary);
}
.cert-corner-tl { top: 12px; left: 12px; border-right: none; border-bottom: none; }
.cert-corner-tr { top: 12px; right: 12px; border-left: none; border-bottom: none; }
.cert-corner-bl { bottom: 12px; left: 12px; border-right: none; border-top: none; }
.cert-corner-br { bottom: 12px; right: 12px; border-left: none; border-top: none; }
.cert-crest { font-size: 32px; margin-bottom: 6px; filter: drop-shadow(0 4px 14px rgba(255,255,255,0.5)); }
.cert-masthead { font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 700; color: #fff; letter-spacing: -0.2px; }
.cert-masthead .accent { background: linear-gradient(135deg, var(--text-primary), #FFFFFF); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-style: italic; }
.cert-sub-line { font-size: 9px; letter-spacing: 3px; text-transform: uppercase; color: var(--text-primary); font-weight: 700; margin-top: 4px; }
.cert-divider { height: 1px; background: linear-gradient(90deg, transparent, #FFFFFF, transparent); margin: 16px 0; }
.cert-presented { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.7); font-weight: 600; margin-bottom: 8px; }
.cert-name { font-family: 'Playfair Display', serif; font-size: 28px; font-weight: 600; font-style: italic; color: #fff; line-height: 1; margin-bottom: 12px; padding: 0 16px; border-bottom: 1px solid rgba(255,255,255,0.35); padding-bottom: 10px; }
.cert-for { font-size: 12px; color: rgba(255,255,255,0.8); margin-bottom: 6px; }
.cert-course {
  font-family: 'Playfair Display', serif;
  font-size: 20px; font-weight: 700; color: var(--text-primary);
  line-height: 1.1;
  letter-spacing: -0.3px;
  margin-bottom: 14px;
}
.cert-grades { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; margin: 10px 0 16px; }
.cert-grade { text-align: center; }
.cert-grade-lbl { font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; margin-bottom: 3px; }
.cert-grade-val { font-family: 'Playfair Display', serif; font-size: 18px; font-weight: 700; background: linear-gradient(135deg, var(--text-primary), #FFFFFF); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.cert-signatures { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.3); }
.cert-sig { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.cert-sig-photo { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--text-primary); object-fit: cover; margin-bottom: 2px; }
.cert-sig-icon { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, #FFFFFF, #B0B4BC); color: #1a1000; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 900; font-family: 'Playfair Display', serif; margin-bottom: 2px; box-shadow: 0 4px 14px rgba(255,255,255,0.4); }
.cert-sig-scribble { font-family: 'Playfair Display', serif; font-size: 18px; font-weight: 600; font-style: italic; color: var(--text-primary); line-height: 1; }
.cert-sig-line { width: 80%; height: 1px; background: #FFFFFF; margin: 3px auto 4px; }
.cert-sig-name { font-size: 11px; font-weight: 700; color: #fff; line-height: 1.2; }
.cert-sig-role { font-size: 9px; color: var(--text-primary); letter-spacing: 0.5px; font-weight: 600; }
.cert-sig-creds { font-size: 9px; color: var(--text-muted); margin-top: 2px; letter-spacing: 0.3px; }
.cert-footer { margin-top: 16px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); }
.cert-serial { font-size: 10px; color: var(--text-primary); font-family: 'Playfair Display', serif; margin-top: 4px; }
.cert-actions { display: flex; gap: 10px; margin-top: 14px; }
.cert-actions .btn-outline, .cert-actions .btn-gold { flex: 1; }

/* OJT / Assessor shared overlay */
.ojt-overlay {
  display: none; position: fixed; inset: 0; z-index: 450;
  background: rgba(7,9,15,0.8); backdrop-filter: blur(12px);
  align-items: flex-end; justify-content: center;
  pointer-events: none;  /* Defensive — never intercept unless .show is active */
}
.ojt-overlay.show { display: flex; pointer-events: auto; animation: fadeIn 0.2s ease both; }
.ojt-modal {
  width: 100%; max-width: 430px;
  max-height: 90dvh;
  background: var(--bg-elevated);
  border: 1px solid var(--border-gold);
  border-bottom: none;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: 10px 20px 18px;
  overflow-y: auto;
  scrollbar-width: none;
  animation: slideUpSheet 0.3s cubic-bezier(0.34, 1.2, 0.64, 1);
}
.ojt-modal::-webkit-scrollbar { display: none; }

/* Assessor cards */
.assessor-list { display: flex; flex-direction: column; gap: 10px; }
.assessor-card {
  display: flex; align-items: center; gap: 12px;
  padding: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-silver);
  border-radius: var(--r-md);
  transition: all 0.2s; text-align: left;
}
.assessor-card:hover { border-color: var(--border-gold); background: var(--gold-glow-sm); }
.assessor-card.selected { border-color: var(--text-primary); box-shadow: 0 0 0 1px var(--gold-glow-sm); background: rgba(255,255,255,0.06); }
.assessor-photo { width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--text-primary); object-fit: cover; flex-shrink: 0; }
.assessor-info { flex: 1; min-width: 0; }
.assessor-name-row { display: flex; align-items: center; gap: 6px; }
.assessor-name { font-size: 14px; font-weight: 700; color: #fff; }
.assessor-verified { font-size: 12px; color: var(--text-primary); }
.assessor-spec { font-size: 11px; color: var(--text-primary); margin-top: 2px; font-weight: 600; }
.assessor-meta { font-size: 10px; color: var(--text-muted); margin-top: 2px; letter-spacing: 0.3px; }
.assessor-badge { font-size: 8px; font-weight: 800; letter-spacing: 1px; padding: 2px 7px; border-radius: 3px; background: linear-gradient(135deg, #FFFFFF, #B0B4BC); color: #1a1000; margin-top: 4px; display: inline-block; }
.assessor-cta { padding: 7px 12px; border-radius: var(--r-full); background: rgba(255,255,255,0.12); border: 1px solid var(--border-gold); color: var(--text-primary); font-size: 11px; font-weight: 700; flex-shrink: 0; }
.assessor-card:hover .assessor-cta { background: #FFFFFF; color: #1a1000; }

/* Assessor dashboard */
.asd-profile { display: flex; align-items: center; gap: 12px; padding: 14px; background: rgba(255,255,255,0.05); border: 1px solid var(--border-gold); border-radius: var(--r-md); margin-bottom: 8px; }
.asd-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.asd-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: rgba(255,255,255,0.03); border: 1px solid var(--border-silver); border-radius: var(--r-md); transition: all 0.2s; width: 100%; text-align: left; }
.asd-row:hover { border-color: var(--border-gold); }
.asd-row.pending { border-color: var(--border-gold); background: var(--gold-glow-sm); }
.asd-row-photo { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.asd-row-info { flex: 1; min-width: 0; }
.asd-row-name { font-size: 13px; font-weight: 700; color: #fff; }
.asd-row-sub { font-size: 11px; color: var(--text-muted); }
.asd-row-tag { font-size: 9px; font-weight: 800; letter-spacing: 1px; padding: 3px 8px; border-radius: 3px; }
.asd-row-tag.pending { background: linear-gradient(135deg, #FFFFFF, #B0B4BC); color: #1a1000; }
.asd-row-tag.done { background: rgba(5,150,105,0.15); color: #34d399; border: 1px solid rgba(5,150,105,0.4); }

/* Grading form */
.grade-summary { padding: 12px 14px; background: rgba(255,255,255,0.05); border: 1px solid var(--border-gold); border-radius: var(--r-md); margin-bottom: 14px; }
.grade-summary .gs-cuadrix { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 6px; }
.grade-summary .gs-line { font-size: 11px; color: var(--text-secondary); margin-bottom: 3px; }
.grade-tasks { font-size: 11px; color: var(--text-secondary); line-height: 1.45; max-height: 80px; overflow-y: auto; background: rgba(0,0,0,0.2); padding: 8px 10px; border-radius: 6px; margin-top: 6px; scrollbar-width: none; }
.grade-tasks::-webkit-scrollbar { display: none; }
.compet-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.compet-row { padding: 10px 12px; background: rgba(255,255,255,0.03); border: 1px solid var(--border-silver); border-radius: var(--r-md); }
.compet-row-label { font-size: 12px; font-weight: 600; color: #fff; margin-bottom: 6px; }
.compet-row-opts { display: flex; gap: 6px; }
.compet-opt { flex: 1; padding: 6px; border-radius: var(--r-sm); border: 1px solid var(--border-silver); background: transparent; color: var(--text-secondary); font-size: 11px; font-weight: 600; transition: all 0.2s; }
.compet-opt:hover { border-color: var(--border-gold); }
.compet-opt.active { border-color: var(--text-primary); background: var(--gold-glow-sm); color: var(--text-primary); }

.overall-row { display: flex; gap: 6px; margin-bottom: 14px; }
.overall-opt { flex: 1; padding: 9px 6px; border-radius: var(--r-md); border: 1.5px solid var(--border-silver); background: rgba(255,255,255,0.02); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.3px; transition: all 0.2s; }
.overall-opt.active { border-color: var(--text-primary); background: var(--gold-glow-sm); color: var(--text-primary); box-shadow: 0 0 0 1px var(--gold-glow-sm); }
.sig-pad { padding: 12px 14px; background: rgba(255,255,255,0.05); border: 1px dashed var(--border-gold); border-radius: var(--r-md); text-align: center; margin-bottom: 12px; }
.sig-pad label { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-primary); font-weight: 700; display: block; margin-bottom: 8px; }
.sig-pad input { width: 100%; border: none; background: transparent; color: #fff; font-family: 'Playfair Display', serif; font-size: 22px; font-style: italic; font-weight: 600; text-align: center; outline: none; border-bottom: 1px solid var(--text-primary); padding: 4px 0; }

/* Admin panel */
.admin-modal .assessor-card { flex-wrap: wrap; }
.admin-actions { display: flex; gap: 6px; margin-left: auto; flex-shrink: 0; }
.admin-btn { padding: 5px 10px; border-radius: var(--r-full); font-size: 10px; font-weight: 700; letter-spacing: 0.5px; transition: all 0.2s; white-space: nowrap; }
.admin-btn.suspend { background: rgba(220,38,38,0.12); border: 1px solid rgba(248,113,113,0.4); color: #f87171; }
.admin-btn.suspend:hover { background: rgba(220,38,38,0.22); }
.admin-btn.remove { background: transparent; border: 1px solid var(--border); color: var(--text-muted); }
.admin-btn.remove:hover { border-color: #f87171; color: #f87171; }
.admin-btn.restore { background: rgba(5,150,105,0.12); border: 1px solid rgba(5,150,105,0.4); color: #34d399; }

.admin-entry-btn {
  margin-top: 16px;
  padding: 10px 14px;
  background: transparent;
  border: 1px dashed var(--border-silver);
  border-radius: var(--r-md);
  color: var(--silver-light);
  font-size: 12px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase;
  width: 100%;
}
.admin-entry-btn:hover { border-color: var(--text-primary); color: var(--text-primary); }

/* ══════════════════════════════════════════════
   HQ — featured cards + rank
══════════════════════════════════════════════ */
.hq-head { margin-bottom: 18px; }
.hq-head-sub { font-size: 13px; color: var(--text-secondary); }

.hq-feature-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin-bottom: 24px;
}
.hq-feature-card {
  position: relative;
  padding: 18px 16px 16px;
  border-radius: var(--r-xl);
  text-align: left;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
  display: flex; flex-direction: column; gap: 8px;
}
.hq-feature-card::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
}
.hq-feature-xu {
  background: linear-gradient(180deg, rgba(32,26,8,0.95), rgba(12,10,4,0.92));
  border: 1.5px solid var(--text-primary);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 6px 22px rgba(0,0,0,0.4), 0 0 32px rgba(255,255,255,0.15);
}
.hq-feature-xu::before {
  background: radial-gradient(circle at 20% 0%, rgba(255,255,255,0.2), transparent 60%);
}
.hq-feature-xu:hover {
  transform: translateY(-3px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 12px 32px rgba(0,0,0,0.55), 0 0 0 1px var(--text-primary), 0 0 48px rgba(255,255,255,0.3);
}
.hq-feature-lib {
  background: linear-gradient(180deg, rgba(24,24,32,0.96), rgba(10,10,14,0.94));
  border: 1.5px solid var(--border-silver-strong);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 6px 22px rgba(0,0,0,0.4);
}
.hq-feature-lib::before {
  background: radial-gradient(circle at 80% 0%, rgba(224,224,232,0.1), transparent 60%);
}
.hq-feature-lib:hover {
  transform: translateY(-3px);
  border-color: var(--silver-light);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 12px 32px rgba(0,0,0,0.55), 0 0 0 1px var(--silver-glow), 0 0 36px rgba(224,224,232,0.18);
}
.hq-feature-icon {
  width: 44px; height: 44px; border-radius: var(--r-md);
  background: linear-gradient(135deg, #FFFFFF, #B0B4BC);
  color: #1a1000;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  box-shadow: 0 4px 18px rgba(255,255,255,0.4);
  position: relative; z-index: 1;
}
.hq-feature-icon--silver {
  background: var(--chrome-grad);
  color: #1a1a1a;
  box-shadow: 0 4px 18px rgba(224,224,232,0.22);
}
.hq-feature-tag {
  font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--text-primary); font-weight: 800;
  position: relative; z-index: 1;
}
.hq-feature-tag--silver { color: var(--silver-light); }
.hq-feature-title {
  font-family: 'Playfair Display', serif;
  font-size: 20px; font-weight: 700; letter-spacing: -0.4px; line-height: 1;
  color: #fff;
  position: relative; z-index: 1;
}
.hq-feature-accent {
  background: linear-gradient(135deg, var(--text-primary), #FFFFFF);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: italic;
}
.hq-feature-accent--silver {
  background: var(--chrome-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hq-feature-sub {
  font-size: 11px; color: var(--text-secondary); line-height: 1.4;
  position: relative; z-index: 1;
}
.hq-feature-cta {
  margin-top: auto;
  padding-top: 6px;
  font-size: 12px; font-weight: 800; letter-spacing: 0.5px;
  color: var(--text-primary);
  position: relative; z-index: 1;
}
.hq-feature-cta--silver { color: var(--silver-light); }

/* X University seal header */
.xu-seal-header {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 2px 0 18px;
  border-bottom: 1px solid var(--border-gold);
  margin-bottom: 16px;
}
.xu-back {
  width: 36px; height: 36px; border-radius: var(--r-full);
  background: var(--bg-card); border: 1px solid var(--border-gold);
  color: var(--text-primary);
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
}
.xu-back:hover { background: var(--gold-glow-sm); color: var(--text-primary); }
.xu-seal-center { flex: 1; display: flex; justify-content: center; }
.xu-seal {
  position: relative;
  width: 64px; height: 64px; border-radius: 50%;
  background: radial-gradient(circle, #1a1400, #0a0800);
  border: 2px solid var(--text-primary);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 24px rgba(255,255,255,0.35), inset 0 2px 4px rgba(255,255,255,0.05);
}
.xu-seal-crest {
  font-size: 26px;
  filter: drop-shadow(0 2px 8px rgba(255,255,255,0.5));
  z-index: 1;
}
.xu-seal-ring {
  position: absolute; inset: -2px;
  border-radius: 50%;
  font-size: 7px; font-weight: 800; letter-spacing: 1.2px;
  color: var(--text-primary);
  animation: xuSealRotate 18s linear infinite;
  pointer-events: none;
}
.xu-seal-ring::before {
  content: 'CuadrillaONE · X University · Est 2026 ·';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  white-space: nowrap;
  opacity: 0.6;
  transform: scale(0.95);
}
@keyframes xuSealRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ══════════════════════════════════════════════
   MILITARY RANK BADGES (SVG-heavy)
══════════════════════════════════════════════ */
.rank-badge {
  position: relative;
  width: 72px; height: 72px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.rank-badge--sm { width: 48px; height: 48px; }
.rank-badge--lg { width: 96px; height: 96px; }

.rank-showcase {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(24,22,14,0.96), rgba(12,10,8,0.93));
  border: 1px solid var(--border-gold);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 6px 22px rgba(0,0,0,0.4), 0 0 28px rgba(255,255,255,0.1);
  margin-bottom: 24px;
}
.rank-current {
  flex: 1; min-width: 0;
}
.rank-label {
  font-size: 9px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--text-primary); font-weight: 800;
}
.rank-name {
  font-family: 'Playfair Display', serif;
  font-size: 22px; font-weight: 700;
  color: #fff;
  line-height: 1.05;
  margin: 2px 0 6px;
  letter-spacing: -0.3px;
}
.rank-meta {
  font-size: 11px; color: var(--text-secondary); line-height: 1.4;
}
.rank-bar {
  margin-top: 8px;
  height: 5px; border-radius: 3px;
  background: rgba(255,255,255,0.08); overflow: hidden;
}
.rank-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #FFFFFF, #B0B4BC);
  border-radius: 3px;
  box-shadow: 0 0 8px rgba(255,255,255,0.5);
}
.rank-next {
  font-size: 10px; color: var(--text-primary); margin-top: 4px; letter-spacing: 0.5px;
}

/* Ladder (X University) */
.rank-ladder {
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 24px;
}
.rank-rung {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  border-radius: var(--r-md);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-silver);
  transition: all 0.25s;
}
.rank-rung.current {
  border-color: var(--text-primary);
  background: linear-gradient(90deg, rgba(255,255,255,0.14), rgba(255,255,255,0.04));
  box-shadow: 0 0 0 1px var(--gold-glow-sm), 0 4px 18px rgba(255,255,255,0.2);
}
.rank-rung.locked { opacity: 0.55; }
.rank-rung-info { flex: 1; min-width: 0; }
.rank-rung-name {
  font-family: 'Playfair Display', serif;
  font-size: 15px; font-weight: 700; color: #fff; letter-spacing: -0.2px;
}
.rank-rung-range { font-size: 10px; color: var(--text-primary); letter-spacing: 1px; text-transform: uppercase; font-weight: 700; margin-top: 1px; }
.rank-rung-desc { font-size: 11px; color: var(--text-muted); margin-top: 3px; line-height: 1.35; }
.rank-current-pill {
  font-size: 9px; letter-spacing: 1px; padding: 3px 8px;
  border-radius: 3px;
  background: linear-gradient(135deg, #FFFFFF, #B0B4BC);
  color: #1a1000;
  font-weight: 900;
  white-space: nowrap;
}

/* ── Individual rank visuals (SVG) ──
   Base badge shapes reused with modifiers */
.rb-disc {
  width: 100%; height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #2a2010 0%, #0d0a04 70%);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  box-shadow: inset 0 2px 6px rgba(255,255,255,0.06), inset 0 -4px 10px rgba(0,0,0,0.45);
}
.rb-disc::before {
  content: ''; position: absolute; inset: 3px; border-radius: 50%;
  border: 1.5px solid transparent;
  pointer-events: none;
}

/* Recruit — single star, thin silver border */
.rb--recruit .rb-disc::before { border-color: var(--silver); box-shadow: 0 0 0 1px rgba(224,224,232,0.2); }

/* Specialist — double stars, bronze border */
.rb--specialist .rb-disc::before { border-color: #d8934a; box-shadow: 0 0 0 1px rgba(216,147,74,0.3); }

/* Senior — triple stars, silver border */
.rb--senior .rb-disc::before { border-color: var(--silver-light); box-shadow: 0 0 0 1.5px rgba(232,232,240,0.35); }

/* Star cluster */
.rb-stars {
  display: flex; align-items: center; justify-content: center; gap: 2px;
  position: relative;
}
.rb-star {
  color: #ffd76a;
  filter: drop-shadow(0 0 3px rgba(255,215,106,0.6));
}

/* Shield rank (leader/elite/master) */
.rb-shield {
  position: relative;
  width: 78%; height: 86%;
  display: flex; align-items: center; justify-content: center;
}
.rb-shield svg { width: 100%; height: 100%; filter: drop-shadow(0 2px 10px rgba(255,255,255,0.6)); }

.rb--leader .rb-shield svg { filter: drop-shadow(0 0 10px rgba(255,255,255,0.55)); }
.rb--leader.rank-badge::after {
  content: ''; position: absolute; inset: -2px; border-radius: 50%;
  box-shadow: 0 0 18px rgba(255,255,255,0.4);
  pointer-events: none;
}

/* Elite — laurels on each side + animated glow */
.rb--elite.rank-badge::after {
  content: ''; position: absolute; inset: -3px; border-radius: 50%;
  box-shadow: 0 0 24px rgba(255,255,255,0.6);
  pointer-events: none;
  animation: rbEliteGlow 2.5s ease-in-out infinite;
}
@keyframes rbEliteGlow {
  0%, 100% { box-shadow: 0 0 18px rgba(255,255,255,0.5); }
  50%      { box-shadow: 0 0 32px rgba(255,255,255,0.9), 0 0 50px rgba(129,140,255,0.3); }
}
.rb-laurel-l, .rb-laurel-r {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 22%;
  color: #ffd76a;
  filter: drop-shadow(0 0 3px rgba(255,215,106,0.5));
}
.rb-laurel-l { left: -4%; }
.rb-laurel-r { right: -4%; transform: translateY(-50%) scaleX(-1); }

/* Master — crown + shield + double laurels + animated shimmer */
.rb--master.rank-badge::after {
  content: ''; position: absolute; inset: -4px; border-radius: 50%;
  background:
    conic-gradient(from 0deg, transparent, rgba(255,215,106,0.55), transparent, rgba(255,215,106,0.35), transparent);
  filter: blur(6px);
  z-index: -1;
  animation: rbMasterShimmer 4s linear infinite;
}
@keyframes rbMasterShimmer { to { transform: rotate(360deg); } }
.rb--master .rb-disc {
  background: radial-gradient(circle at 50% 35%, #3a2c10 0%, #120c03 75%);
  box-shadow: inset 0 2px 6px rgba(255,255,255,0.1), inset 0 -6px 14px rgba(0,0,0,0.55), 0 0 28px rgba(255,255,255,0.6);
}
.rb--master .rb-disc::before { border-color: var(--text-primary); box-shadow: 0 0 0 2px rgba(129,140,255,0.4); }
.rb-crown {
  position: absolute;
  top: -14%;
  left: 50%; transform: translateX(-50%);
  width: 44%;
  color: #ffd76a;
  filter: drop-shadow(0 0 6px rgba(255,215,106,0.7));
}

/* CuadrillaLEGEND — top tier */
.rb--legend.rank-badge {
  width: 84px; height: 84px;
}
.rb--legend.rank-badge::after {
  content: ''; position: absolute; inset: -6px; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent, rgba(77,208,255,0.5), rgba(255,215,106,0.6), rgba(255,77,109,0.5), transparent, rgba(255,215,106,0.55), transparent);
  filter: blur(9px);
  z-index: -1;
  animation: rbMasterShimmer 4.5s linear infinite;
}
.rb--legend .rb-disc {
  background: radial-gradient(circle at 50% 35%, #4a3818 0%, #130d04 80%);
  box-shadow: inset 0 2px 8px rgba(255,215,106,0.2), inset 0 -8px 16px rgba(0,0,0,0.6), 0 0 36px rgba(255,255,255,0.7), 0 0 60px rgba(255,215,106,0.4);
}
.rb--legend .rb-disc::before { border-color: #ffd76a; box-shadow: 0 0 0 3px rgba(255,215,106,0.5); }
.rb-wings-l, .rb-wings-r {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40%; color: #ffd76a;
  filter: drop-shadow(0 0 4px rgba(255,215,106,0.7));
}
.rb-wings-l { left: -22%; }
.rb-wings-r { right: -22%; transform: translateY(-50%) scaleX(-1); }

/* ══════════════════════════════════════════════
   CREWSCORE — bank-style
══════════════════════════════════════════════ */
.tm { font-size: 0.5em; vertical-align: super; letter-spacing: 0.5px; font-weight: 600; color: var(--text-muted); }

/* Compact (profile) */
.cs-card-compact {
  display: block;
  background: linear-gradient(180deg, rgba(26,22,10,0.95) 0%, rgba(12,10,6,0.92) 100%);
  border: 1px solid var(--border-gold);
  border-radius: var(--r-xl);
  padding: 16px 18px;
  margin-bottom: 16px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 6px 22px rgba(0,0,0,0.4), 0 0 32px rgba(255,255,255,0.08);
  transition: all 0.2s;
}
.cs-card-compact:hover { border-color: var(--text-primary); box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 8px 28px rgba(0,0,0,0.5), 0 0 0 1px var(--gold-glow-sm), 0 0 40px rgba(255,255,255,0.18); }

.cs-gauge-wrap {
  position: relative;
  display: flex; align-items: center; gap: 16px;
}
.cs-gauge {
  position: relative;
  width: 110px; height: 110px; flex-shrink: 0;
}
.cs-gauge svg { width: 100%; height: 100%; transform: rotate(135deg); }
.cs-gauge-track { stroke: rgba(255,255,255,0.08); fill: none; }
.cs-gauge-arc { fill: none; stroke-linecap: round; transition: stroke-dashoffset 1.4s cubic-bezier(0.4, 0, 0.2, 1); }
.cs-gauge-label {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  line-height: 1;
}
.cs-gauge-num {
  font-family: 'Playfair Display', serif;
  font-size: 32px; font-weight: 700;
  color: #fff;
  margin-bottom: 2px;
  letter-spacing: -0.5px;
}
.cs-gauge-band {
  font-size: 9px; letter-spacing: 2px; text-transform: uppercase; font-weight: 800;
}
.cs-gauge-range {
  font-size: 8px; color: var(--text-muted); letter-spacing: 1px;
  margin-top: 3px;
}
.cs-stacked-info { flex: 1; min-width: 0; }
.cs-title-row { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.cs-title { font-size: 16px; font-weight: 800; letter-spacing: -0.3px; color: #fff; }
.cs-title .tm { color: var(--text-primary); }
.cs-band-label {
  display: inline-block;
  padding: 3px 10px; border-radius: var(--r-full);
  font-size: 11px; font-weight: 800; letter-spacing: 1px;
  margin-bottom: 6px;
}
.cs-powered {
  font-size: 9px; color: var(--text-muted); letter-spacing: 1.3px;
  text-transform: uppercase; font-weight: 600;
}
.cs-updated { font-size: 10px; color: var(--text-muted); margin-top: 6px; }
.cs-change { font-size: 12px; font-weight: 800; letter-spacing: 0.3px; display: inline-flex; align-items: center; gap: 3px; }
.cs-change.up { color: #34d399; }
.cs-change.down { color: #f87171; }

/* Band color styles */
/* CS-BAND-2 — muted brand ramp; Excellent wears the brand gold */
.band-poor      { color: #C4695A; background: rgba(196,105,90,0.15); border: 1px solid rgba(196,105,90,0.4); }
.band-fair      { color: #C99A5B; background: rgba(201,154,91,0.15); border: 1px solid rgba(201,154,91,0.4); }
.band-good      { color: #D4C08A; background: rgba(212,192,138,0.15); border: 1px solid rgba(212,192,138,0.4); }
.band-very-good { color: #9DB89A; background: rgba(157,184,154,0.15); border: 1px solid rgba(157,184,154,0.4); }
.band-excellent { color: #E8C879; background: rgba(232,200,121,0.15); border: 1px solid rgba(232,200,121,0.4); }
.band-elite     { color: var(--text-primary); background: var(--gold-glow); border: 1px solid var(--text-primary); animation: bandElite 2.2s ease-in-out infinite; }
@keyframes bandElite { 0%, 100% { box-shadow: 0 0 0 rgba(255,255,255,0); } 50% { box-shadow: 0 0 22px rgba(255,255,255,0.45); } }

/* Full-screen bank card */
.cs-full-card {
  padding: 22px 18px 18px;
  background: linear-gradient(180deg, rgba(30,26,12,0.96) 0%, rgba(12,10,6,0.92) 100%);
  border: 1px solid var(--border-gold);
  border-radius: var(--r-xl);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 14px 40px rgba(0,0,0,0.55), 0 0 44px rgba(255,255,255,0.1);
  margin-bottom: 18px;
}
.cs-full-top { text-align: center; margin-bottom: 14px; }
.cs-full-eyebrow { font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--text-primary); font-weight: 800; margin-bottom: 4px; }
.cs-full-name { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 700; color: #fff; letter-spacing: -0.3px; }
.cs-full-name .tm { color: var(--text-primary); font-size: 0.45em; }

.cs-full-gauge-wrap { display: flex; justify-content: center; margin: 10px 0 18px; }
.cs-full-gauge { position: relative; width: 220px; height: 220px; }
.cs-full-gauge svg { width: 100%; height: 100%; transform: rotate(135deg); }
.cs-full-gauge-label {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.cs-full-num { font-family: 'Playfair Display', serif; font-size: 64px; font-weight: 700; color: #fff; line-height: 1; letter-spacing: -2px; }
.cs-full-band { margin-top: 8px; padding: 5px 14px; border-radius: var(--r-full); font-size: 13px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; }
.cs-full-range { font-size: 10px; color: var(--text-muted); margin-top: 6px; letter-spacing: 1.5px; }

.cs-full-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 14px;
  border-top: 1px solid var(--border-gold);
}
.cs-full-powered {
  font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase;
  background: linear-gradient(135deg, var(--text-primary), #FFFFFF);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
}
.cs-full-updated { font-size: 10px; color: var(--text-muted); }

/* Factor breakdown */
.cs-breakdown {
  padding: 18px;
  background: linear-gradient(180deg, rgba(22,22,32,0.95), rgba(14,14,22,0.92));
  border: 1px solid var(--border-silver);
  border-radius: var(--r-lg);
  margin-bottom: 14px;
}
.cs-breakdown-h { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-primary); font-weight: 800; margin-bottom: 14px; }
.cs-factor-bar { margin-bottom: 12px; }
.cs-factor-bar:last-child { margin-bottom: 0; }
.cs-factor-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.cs-factor-name { font-size: 12px; font-weight: 700; color: #fff; }
.cs-factor-weight { font-size: 10px; color: var(--text-muted); letter-spacing: 1px; }
.cs-factor-val { font-size: 12px; font-weight: 800; color: var(--text-primary); letter-spacing: 0.2px; }
.cs-factor-track { height: 6px; background: rgba(255,255,255,0.06); border-radius: 3px; overflow: hidden; }
.cs-factor-fill { height: 100%; background: linear-gradient(90deg, #FFFFFF, #B0B4BC); border-radius: 3px; box-shadow: 0 0 8px rgba(255,255,255,0.35); animation: cfGrow 1.1s cubic-bezier(0.25, 1, 0.3, 1) both; }
@keyframes cfGrow { from { width: 0 !important; } }

/* Impact list */
.cs-impact {
  padding: 14px 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-silver);
  border-radius: var(--r-lg);
  margin-bottom: 14px;
}
.cs-impact-h { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-primary); font-weight: 800; margin-bottom: 10px; }
.cs-impact-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cs-impact-list li {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 9px 12px;
  font-size: 12px;
  background: rgba(255,255,255,0.02);
  border-radius: var(--r-sm);
  border: 1px solid transparent;
}
.cs-impact-list li.pos { border-color: rgba(52,211,153,0.18); }
.cs-impact-list li.neg { border-color: rgba(248,113,113,0.18); }
.cs-impact-val { font-weight: 800; font-family: 'Playfair Display', serif; font-size: 14px; letter-spacing: -0.3px; }
.cs-impact-list li.pos .cs-impact-val { color: #34d399; }
.cs-impact-list li.neg .cs-impact-val { color: #f87171; }

/* Disclaimer */
.cs-disclaimer {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(234,179,8,0.08), rgba(234,179,8,0.02));
  border: 1px solid rgba(234,179,8,0.4);
  border-radius: var(--r-lg);
  margin-bottom: 14px;
}
.cs-disc-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.cs-disclaimer p { font-size: 12px; line-height: 1.55; color: rgba(234,179,8,0.95); font-weight: 500; margin: 0; letter-spacing: 0.1px; }

/* ══════════════════════════════════════════════
   INFO MODALS (shared)
══════════════════════════════════════════════ */
.info-overlay {
  display: none; position: fixed; inset: 0; z-index: 460;
  background: rgba(7,9,15,0.82); backdrop-filter: blur(12px);
  align-items: flex-end; justify-content: center;
}
.info-overlay.show { display: flex; animation: fadeIn 0.2s ease both; }
.info-modal {
  width: 100%; max-width: 430px;
  max-height: 92dvh;
  background: var(--bg-elevated);
  border: 1px solid var(--border-gold);
  border-bottom: none;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: 10px 20px 18px;
  overflow-y: auto;
  scrollbar-width: none;
  animation: slideUpSheet 0.3s cubic-bezier(0.34, 1.2, 0.64, 1);
}
.info-modal::-webkit-scrollbar { display: none; }
.info-body { font-size: 13px; color: var(--text-secondary); line-height: 1.6; margin: 8px 0 12px; }

.cs-factor-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.cs-factor {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-silver);
  border-radius: var(--r-md);
}
.cs-factor-icon {
  width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(135deg, #FFFFFF, #B0B4BC);
  color: #1a1000;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800;
  flex-shrink: 0;
}
.cs-factor-text { font-size: 12px; color: var(--text-secondary); line-height: 1.5; }
.cs-factor-text strong { color: #fff; font-weight: 700; }

.cs-tips { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.cs-tips li {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: rgba(52,211,153,0.06);
  border: 1px solid rgba(52,211,153,0.2);
  border-radius: var(--r-sm);
  font-size: 12px; color: #34d399;
}
.cs-tips li.negative { background: rgba(248,113,113,0.06); border-color: rgba(248,113,113,0.2); color: #f87171; }
.cs-tips li span {
  font-family: 'Playfair Display', serif;
  font-weight: 800; min-width: 36px; text-align: center;
  padding: 2px 6px; border-radius: 4px;
  background: rgba(52,211,153,0.14);
  color: inherit;
  font-size: 12px;
  letter-spacing: -0.2px;
}
.cs-tips li.negative span { background: rgba(248,113,113,0.14); }

/* Rank info modal */
.rank-info-hero {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 20px 10px 14px;
  text-align: center;
}
.rank-info-name {
  font-family: 'Playfair Display', serif;
  font-size: 26px; font-weight: 700;
  background: linear-gradient(135deg, var(--text-primary), #FFFFFF);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.4px;
}
.rank-info-range { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-secondary); font-weight: 700; }
.rank-info-status { font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: 4px; background: linear-gradient(135deg, #FFFFFF, #B0B4BC); color: #1a1000; letter-spacing: 1px; text-transform: uppercase; }
.rank-info-status.locked { background: rgba(255,255,255,0.08); color: var(--text-muted); }

.rank-info-perks {
  padding: 14px 16px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border-gold);
  border-radius: var(--r-md);
  margin-bottom: 14px;
}
.rank-info-perks h4 { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-primary); font-weight: 800; margin-bottom: 10px; }
.rank-perks-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rank-perks-list li {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 12px; color: #fff; line-height: 1.45;
}
.rank-perks-list li::before {
  content: '✦'; color: var(--text-primary);
  font-weight: 900;
  flex-shrink: 0; line-height: 1.4;
}
.rank-info-progress {
  padding: 12px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-silver);
  border-radius: var(--r-md);
  margin-bottom: 14px;
}
.rank-info-progress .cs-factor-weight { margin-bottom: 6px; display: block; }

.rank-info-source-note {
  display: flex; gap: 8px; padding: 10px 12px;
  background: var(--gold-glow-sm);
  border: 1px dashed var(--border-gold);
  border-radius: var(--r-md);
  font-size: 11px; color: var(--text-primary); line-height: 1.5;
  margin-bottom: 14px;
}

/* ══════════════════════════════════════════════
   CREDENTIALS TAB (profile)
══════════════════════════════════════════════ */
.cred-summary {
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px;
  background: linear-gradient(180deg, rgba(26,22,10,0.92), rgba(12,10,6,0.88));
  border: 1px solid var(--border-gold);
  border-radius: var(--r-lg);
  margin-bottom: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 0 28px rgba(255,255,255,0.08);
}
.cred-summary-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.cred-member-badge {
  padding: 4px 10px; border-radius: var(--r-full);
  background: linear-gradient(135deg, #FFFFFF, #B0B4BC);
  color: #1a1000;
  font-size: 10px; font-weight: 900; letter-spacing: 1.5px;
}
.cred-member-badge.inactive { background: rgba(255,255,255,0.05); color: var(--text-muted); border: 1px dashed var(--border-silver); }
.cred-member-since { font-size: 11px; color: var(--text-muted); letter-spacing: 0.5px; }
.cred-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cred-kpi { text-align: center; padding: 10px 6px; background: rgba(255,255,255,0.03); border: 1px solid var(--border-silver); border-radius: var(--r-md); }
.cred-kpi-num {
  font-family: 'Playfair Display', serif;
  font-size: 22px; font-weight: 700;
  background: linear-gradient(135deg, var(--text-primary), #FFFFFF);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cred-kpi-lbl { font-size: 9px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; margin-top: 2px; display: block; }

.cred-section-head {
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--text-primary); font-weight: 800;
  margin: 22px 0 10px;
  display: flex; justify-content: space-between; align-items: baseline;
}
.cred-section-head span:last-child { font-size: 10px; color: var(--text-muted); letter-spacing: 1px; font-weight: 600; }

/* Certificate preview cards */
.cred-cert-grid { display: flex; flex-direction: column; gap: 10px; }
.cred-cert {
  position: relative;
  padding: 14px 14px 12px;
  background: linear-gradient(135deg, rgba(32,24,8,0.92) 0%, rgba(14,10,4,0.9) 100%);
  border: 1.5px solid var(--text-primary);
  border-radius: var(--r-lg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 4px 18px rgba(0,0,0,0.4), 0 0 28px rgba(255,255,255,0.1);
  cursor: pointer;
  transition: all 0.2s;
}
.cred-cert:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 8px 26px rgba(0,0,0,0.55), 0 0 0 1px var(--gold-glow-sm), 0 0 40px rgba(255,255,255,0.2); }
.cred-cert-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.cred-cert-crest {
  width: 40px; height: 40px; border-radius: 50%;
  background: radial-gradient(circle, #1a1200, #0a0800);
  border: 2px solid var(--text-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  box-shadow: 0 0 12px rgba(255,255,255,0.4);
}
.cred-cert-title-wrap { flex: 1; min-width: 0; }
.cred-cert-title { font-family: 'Playfair Display', serif; font-size: 15px; font-weight: 700; color: #fff; letter-spacing: -0.2px; line-height: 1.2; }
.cred-cert-sub { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-primary); font-weight: 700; margin-top: 2px; }
.cred-cert-verified {
  color: #34d399; font-size: 14px; font-weight: 900; flex-shrink: 0;
  background: rgba(52,211,153,0.12);
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(52,211,153,0.4);
}
.cred-cert-meta { display: flex; flex-wrap: wrap; gap: 6px; font-size: 10px; color: var(--text-muted); letter-spacing: 0.3px; margin-bottom: 10px; }
.cred-cert-meta span { padding: 2px 8px; border-radius: var(--r-full); background: rgba(255,255,255,0.04); border: 1px solid var(--border); }
.cred-cert-meta .grade { color: var(--text-primary); border-color: var(--border-gold); background: var(--gold-glow-sm); font-weight: 700; }
.cred-cert-actions { display: flex; gap: 6px; }
.cred-cert-actions button { flex: 1; padding: 7px 8px; border-radius: var(--r-sm); font-size: 11px; font-weight: 700; letter-spacing: 0.3px; }
.cred-cert-actions .btn-view { background: linear-gradient(135deg, #FFFFFF, #B0B4BC); color: #1a1000; }
.cred-cert-actions .btn-dl { background: rgba(255,255,255,0.04); border: 1px solid var(--border-silver); color: var(--silver-light); }
.cred-cert-actions .btn-dl:hover { border-color: var(--border-gold); color: var(--text-primary); }

.cred-empty {
  text-align: center;
  padding: 30px 16px;
  border: 1px dashed var(--border-silver);
  border-radius: var(--r-md);
  color: var(--text-secondary);
  font-size: 12px;
}

/* Rank + badges grid in credentials */
.cred-rank-rail { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 4px 0 4px; }
.cred-rank-rail::-webkit-scrollbar { display: none; }
.cred-rank-tile {
  flex-shrink: 0;
  width: 110px;
  padding: 12px 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-silver);
  border-radius: var(--r-md);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  cursor: pointer;
  transition: all 0.2s;
}
.cred-rank-tile.current { border-color: var(--text-primary); background: var(--gold-glow-sm); box-shadow: 0 0 0 1px var(--gold-glow-sm); }
.cred-rank-tile.locked { opacity: 0.55; }
.cred-rank-tile-name { font-size: 11px; font-weight: 800; color: #fff; text-align: center; letter-spacing: -0.1px; }
.cred-rank-tile-range { font-size: 9px; color: var(--text-primary); letter-spacing: 0.8px; font-weight: 700; }

.cred-badges-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }

/* Learning Library banner */
.lib-rank-banner {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04));
  border: 1px solid var(--border-gold);
  border-radius: var(--r-md);
  margin-bottom: 14px;
}
.lib-rank-icon {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, #FFFFFF, #B0B4BC);
  color: #1a1000; font-weight: 900; font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(255,255,255,0.35);
}
.lib-rank-text { font-size: 12px; color: var(--text-secondary); line-height: 1.45; }
.lib-rank-text strong { display: block; color: #fff; font-size: 13px; font-weight: 700; margin-bottom: 2px; }
.lib-rank-text b { color: var(--text-primary); font-weight: 800; }

/* ══════════════════════════════════════════════
   LEARNING LIBRARY — MasterClass-style
══════════════════════════════════════════════ */
#screen-learning { background: linear-gradient(180deg, #040407 0%, #0a0a12 100%); }

.ll-hero {
  position: relative;
  padding: 28px 22px 22px;
  margin: 0 -16px 18px;
  overflow: hidden;
  text-align: center;
}
.ll-hero-bg {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,0.28), transparent 55%),
    radial-gradient(circle at 90% 90%, rgba(255,255,255,0.14), transparent 50%),
    linear-gradient(180deg, rgba(22,18,6,0.85), rgba(6,5,2,0.7));
  border-bottom: 1px solid var(--border-gold);
}
.ll-hero-eyebrow {
  position: relative; z-index: 1;
  font-size: 10px; letter-spacing: 4px;
  color: var(--text-primary); font-weight: 800;
  margin-bottom: 8px;
}
.ll-hero-title {
  position: relative; z-index: 1;
  font-family: 'Playfair Display', serif;
  font-size: 26px; font-weight: 700; letter-spacing: -0.5px;
  line-height: 1.1;
  color: #fff;
  margin-bottom: 8px;
}
.ll-hero-accent {
  background: linear-gradient(135deg, var(--text-primary), #FFFFFF);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: italic;
}
.ll-hero-sub {
  position: relative; z-index: 1;
  font-size: 13px; color: rgba(255,255,255,0.8);
  line-height: 1.5;
  max-width: 340px; margin: 0 auto 16px;
}
.ll-hero-row {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.ll-hero-meta {
  font-size: 11px; color: var(--text-secondary); letter-spacing: 0.3px;
}
.ll-hero-meta b { color: var(--text-primary); font-weight: 800; }

/* Category filter */
.ll-cat-row {
  display: flex; gap: 8px; overflow-x: auto;
  padding: 4px 0 14px;
  scrollbar-width: none;
  margin: 0 -4px;
}
.ll-cat-row::-webkit-scrollbar { display: none; }
.ll-cat-pill {
  flex-shrink: 0;
  padding: 8px 14px; border-radius: var(--r-full);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-silver);
  color: var(--text-secondary);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.3px;
  transition: all 0.2s;
}
.ll-cat-pill:hover { border-color: var(--border-gold); color: var(--text-primary); }
.ll-cat-pill.active {
  background: linear-gradient(135deg, #FFFFFF, #B0B4BC);
  color: #1a1000;
  border-color: transparent;
  box-shadow: 0 2px 10px rgba(255,255,255,0.3);
}

/* Catalog */
.ll-catalog { display: flex; flex-direction: column; gap: 18px; margin-bottom: 22px; }
.ll-cat-section { display: flex; flex-direction: column; gap: 12px; }
.ll-cat-header {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-silver);
}
.ll-cat-eyebrow {
  font-size: 9px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--text-primary); font-weight: 800;
}
.ll-cat-name {
  font-family: 'Playfair Display', serif;
  font-size: 19px; font-weight: 700; color: #fff;
  letter-spacing: -0.3px;
}
.ll-cat-count { font-size: 10px; color: var(--text-muted); letter-spacing: 1px; }

/* Course Card (cinematic) */
.ll-course {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #050508;
  border: 1px solid var(--border-silver);
  box-shadow: 0 6px 24px rgba(0,0,0,0.5);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 1, 0.3, 1);
}
.ll-course:hover {
  transform: translateY(-3px);
  border-color: var(--text-primary);
  box-shadow: 0 16px 40px rgba(0,0,0,0.65), 0 0 0 1px var(--gold-glow-sm), 0 0 50px rgba(255,255,255,0.18);
}
.ll-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background-size: cover; background-position: center;
  overflow: hidden;
}
.ll-thumb::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.45) 60%, rgba(0,0,0,0.92) 100%);
}
.ll-course:hover .ll-thumb-img { transform: scale(1.04); }
.ll-thumb-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.3, 1);
  filter: grayscale(0.1) contrast(1.05) brightness(0.85);
}
.ll-badges {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  display: flex; gap: 6px; flex-wrap: wrap;
}
.ll-badge {
  padding: 4px 9px;
  border-radius: 3px;
  font-size: 9px; font-weight: 900; letter-spacing: 1.5px;
  text-transform: uppercase;
}
.ll-badge.featured     { background: linear-gradient(135deg, #FFFFFF, #B0B4BC); color: #1a1000; box-shadow: 0 2px 10px rgba(255,255,255,0.4); }
.ll-badge.mostpopular  { background: #ef4444; color: #fff; box-shadow: 0 2px 10px rgba(239,68,68,0.4); }
.ll-badge.mandatory    { background: #facc15; color: #1a1000; }
.ll-cat-tag {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  padding: 4px 10px; border-radius: var(--r-full);
  font-size: 9px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
  background: rgba(0,0,0,0.55);
  color: #fff;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.15);
}

.ll-thumb-creator {
  position: absolute; bottom: 12px; left: 12px; z-index: 2;
  display: flex; align-items: center; gap: 8px;
}
.ll-thumb-creator-photo {
  width: 36px; height: 36px; border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--text-primary);
  box-shadow: 0 4px 12px rgba(0,0,0,0.6);
}
.ll-thumb-creator-info {
  display: flex; flex-direction: column; line-height: 1.1;
}
.ll-thumb-creator-kicker { font-size: 8px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-primary); font-weight: 800; }
.ll-thumb-creator-name { font-size: 12px; font-weight: 700; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,0.6); }
.ll-thumb-duration {
  position: absolute; bottom: 12px; right: 12px; z-index: 2;
  padding: 4px 8px; border-radius: 4px;
  font-size: 10px; font-weight: 700;
  background: rgba(0,0,0,0.6);
  color: #fff;
  backdrop-filter: blur(6px);
}

.ll-course-body {
  padding: 14px 16px 14px;
}
.ll-course-title {
  font-family: 'Playfair Display', serif;
  font-size: 17px; font-weight: 700; color: #fff;
  line-height: 1.25;
  letter-spacing: -0.3px;
  margin-bottom: 3px;
}
.ll-course-by {
  font-size: 11px; color: var(--text-primary);
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  font-weight: 600;
}
.ll-course-by-title { color: var(--text-muted); font-weight: 500; }
.ll-course-meta {
  display: flex; flex-wrap: wrap; gap: 10px;
  font-size: 11px; color: var(--text-secondary);
  margin-bottom: 8px;
}
.ll-stars { display: inline-flex; align-items: center; gap: 3px; color: var(--text-primary); font-weight: 700; }
.ll-stars svg { color: var(--text-primary); }
.ll-students { color: var(--text-muted); }
.ll-desc {
  font-size: 12px; color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ll-actions { display: flex; gap: 8px; }
.ll-btn-preview, .ll-btn-enroll {
  flex: 1;
  padding: 9px 14px; border-radius: var(--r-full);
  font-size: 12px; font-weight: 700; letter-spacing: 0.3px;
  transition: all 0.2s;
}
.ll-btn-preview {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-silver);
  color: var(--silver-light);
}
.ll-btn-preview:hover { border-color: var(--text-primary); color: var(--text-primary); }
.ll-btn-enroll {
  background: linear-gradient(135deg, #FFFFFF, #B0B4BC);
  color: #1a1000;
  box-shadow: 0 2px 10px rgba(255,255,255,0.3);
}
.ll-btn-enroll:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(255,255,255,0.4); }

/* Course detail modal (reuses module-detail overlay shell) */
.ll-detail-overlay {
  display: none; position: fixed; inset: 0; z-index: 440;
  background: rgba(4,4,8,0.9);
  backdrop-filter: blur(16px);
}
.ll-detail-overlay.show { display: block; animation: fadeIn 0.2s ease both; }
.ll-detail-sheet {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 100%; max-width: 430px; height: 95dvh;
  background: linear-gradient(180deg, #0a0a10 0%, #050508 100%);
  border: 1px solid var(--border-gold);
  border-bottom: none;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: 0 -20px 60px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.08);
  animation: slideUpSheet 0.3s cubic-bezier(0.34, 1.2, 0.64, 1);
}
.lld-hero {
  position: relative;
  margin: -16px -18px 16px;
  aspect-ratio: 16/9;
  background-size: cover; background-position: center;
}
.lld-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(4,4,8,0.95) 100%); }
.lld-hero-bottom { position: absolute; bottom: 14px; left: 18px; right: 18px; z-index: 1; }
.lld-hero-cat { font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-primary); font-weight: 800; margin-bottom: 4px; }
.lld-hero-title { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 700; color: #fff; line-height: 1.15; letter-spacing: -0.3px; margin-bottom: 2px; }
.lld-by { font-size: 11px; color: var(--text-primary); font-weight: 600; }

.lld-creator-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border-gold);
  border-radius: var(--r-md);
  margin-bottom: 16px;
}
.lld-creator-photo { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 2px solid var(--text-primary); flex-shrink: 0; }
.lld-creator-name { font-size: 14px; font-weight: 700; color: #fff; }
.lld-creator-title { font-size: 11px; color: var(--text-primary); font-weight: 600; margin-top: 1px; }
.lld-creator-verified { font-size: 11px; color: #34d399; margin-top: 3px; font-weight: 700; letter-spacing: 0.5px; }

.lld-meta-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.lld-meta-pill {
  padding: 4px 10px; border-radius: var(--r-full);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-silver);
  font-size: 11px; color: var(--text-secondary);
  font-weight: 600;
}
.lld-meta-pill.gold { background: var(--gold-glow-sm); color: var(--text-primary); border-color: var(--border-gold); }

.lld-desc { font-size: 13px; color: rgba(255,255,255,0.85); line-height: 1.55; margin-bottom: 18px; }

.lld-lessons { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; }
.lld-lesson {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.lld-lesson-num {
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: 1px solid var(--border-gold);
  color: var(--text-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800;
  flex-shrink: 0;
}
.lld-lesson-title { flex: 1; font-size: 13px; color: #fff; font-weight: 500; }
.lld-lesson-lock { color: var(--text-muted); font-size: 12px; }

.lld-cta-row {
  display: flex; gap: 10px; padding-top: 8px;
  border-top: 1px solid var(--border);
}
.lld-cta-row button { flex: 1; }

/* Become-a-Creator pitch block */
.ll-creator-pitch {
  position: relative;
  padding: 22px 20px 18px;
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, rgba(30,22,6,0.95), rgba(10,8,2,0.92));
  border: 1px solid var(--border-gold);
  overflow: hidden;
  margin-top: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 50px rgba(255,255,255,0.1);
}
.ll-creator-glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 20% 0%, rgba(255,255,255,0.22), transparent 60%);
}
.ll-creator-badge {
  position: relative; z-index: 1;
  display: inline-block;
  padding: 4px 10px; border-radius: 4px;
  font-size: 9px; font-weight: 900; letter-spacing: 2px;
  background: linear-gradient(135deg, #FFFFFF, #B0B4BC);
  color: #1a1000;
  margin-bottom: 12px;
}
.ll-creator-title {
  position: relative; z-index: 1;
  font-family: 'Playfair Display', serif;
  font-size: 24px; font-weight: 700; color: #fff; line-height: 1.1;
  letter-spacing: -0.4px;
  margin-bottom: 8px;
}
.ll-creator-accent {
  background: linear-gradient(135deg, var(--text-primary), #FFFFFF);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: italic;
}
.ll-creator-sub {
  position: relative; z-index: 1;
  font-size: 13px; color: rgba(255,255,255,0.8); line-height: 1.5;
  margin-bottom: 16px;
}
.ll-creator-stats {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin-bottom: 14px;
}
.ll-creator-stat {
  padding: 10px 6px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border-gold);
  border-radius: var(--r-md);
  text-align: center;
}
.ll-creator-stat-num {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 15px; font-weight: 700;
  background: linear-gradient(135deg, var(--text-primary), #FFFFFF);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.3px;
  line-height: 1.05;
}
.ll-creator-stat-lbl {
  display: block;
  font-size: 9px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--text-muted); font-weight: 700;
  margin-top: 3px;
}

.ll-success-card {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-silver);
  border-radius: var(--r-md);
  margin-bottom: 14px;
}
.ll-success-photo {
  width: 48px; height: 48px; border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--text-primary);
  flex-shrink: 0;
}
.ll-success-body { flex: 1; min-width: 0; }
.ll-success-label { font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-primary); font-weight: 800; margin-bottom: 4px; }
.ll-success-quote { font-family: 'Playfair Display', serif; font-style: italic; font-size: 13px; color: #fff; line-height: 1.35; margin-bottom: 4px; }
.ll-success-quote strong { color: var(--text-primary); font-weight: 700; }
.ll-success-name { font-size: 10px; color: var(--text-muted); letter-spacing: 0.3px; }

.ll-creator-fine {
  position: relative; z-index: 1;
  font-size: 10px; color: var(--text-muted);
  margin-top: 10px; text-align: center; letter-spacing: 0.3px;
}

/* ══════════════════════════════════════════════
   HR HUB — operational redesign
══════════════════════════════════════════════ */

/* Entity banner */
.hr-entity-banner {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(22,22,32,0.95), rgba(12,12,20,0.92));
  border: 1px solid var(--border-gold);
  border-radius: var(--r-lg);
  margin-bottom: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.hr-entity-seal {
  width: 48px; height: 48px; border-radius: var(--r-md);
  background: linear-gradient(135deg, #FFFFFF, #B0B4BC);
  color: #1a1000;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Playfair Display', serif; font-weight: 700;
  font-size: 20px;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(255,255,255,0.35);
}
.hr-entity-info { flex: 1; min-width: 0; }
.hr-entity-kicker { font-size: 9px; letter-spacing: 2px; color: var(--text-primary); font-weight: 800; text-transform: uppercase; }
.hr-entity-name { font-family: 'Playfair Display', serif; font-size: 18px; font-weight: 700; color: #fff; letter-spacing: -0.2px; }
.hr-entity-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.hr-entity-edit {
  padding: 6px 12px; border-radius: var(--r-full);
  background: var(--gold-glow-sm); border: 1px solid var(--border-gold);
  color: var(--text-primary); font-size: 11px; font-weight: 700;
  white-space: nowrap; flex-shrink: 0;
}

/* Dashboard strip */
.hr-dashboard {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
  margin-bottom: 14px;
  /* HR-DASH-2 — quiet hairline separation above/below the Dashboard section. */
  padding: 12px 0 14px;
  border-top: 1px solid rgba(229,184,96,0.16);
  border-bottom: 1px solid rgba(229,184,96,0.16);
}
/* HR-DASH-2 — white-label preview: hairlines take the brand accent (same
   treatment as the other [data-scope="hr"] border re-tints). */
[data-scope="hr"] .hr-dashboard { border-color: var(--brand-accent); }
.hr-kpi {
  /* HR-DASH-1 — compact equal 2×2 tiles (was 12px 14px). */
  padding: 9px 12px;
  background: linear-gradient(180deg, rgba(22,22,32,0.92), rgba(14,14,22,0.9));
  border: 1px solid var(--border-silver);
  border-radius: var(--r-md);
  position: relative;
  overflow: hidden;
  min-width: 0;
}
.hr-kpi.gold { border-color: var(--border-gold); background: linear-gradient(135deg, rgba(26,22,10,0.95), rgba(14,10,4,0.92)); }
.hr-kpi.warn { border-color: rgba(248,113,113,0.4); background: rgba(220,38,38,0.06); }
.hr-kpi-lbl { font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hr-kpi-val { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 700; color: #fff; line-height: 1.1; margin-top: 2px; letter-spacing: -0.3px; }
.hr-kpi.gold .hr-kpi-val { background: linear-gradient(135deg, var(--text-primary), #FFFFFF); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hr-kpi.warn .hr-kpi-val { color: #fca5a5; }
.hr-kpi-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* HR-DASH-1 — distinct unit ("0h" read like "oh"): smaller + muted. */
.hr-kpi-unit { font-size: 60%; font-weight: 600; color: var(--text-muted); -webkit-text-fill-color: var(--text-muted); margin-left: 1px; }
/* HR-DASH-1 — "Dashboard" eyebrow rides inside the grid, full row. */
.hr-dashboard .hr-sub-eyebrow { grid-column: 1 / -1; margin: 4px 0 -2px; }

.hr-dashboard-wide {
  grid-column: span 2;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(30,22,6,0.95), rgba(10,8,2,0.9));
  border: 1px solid var(--border-gold);
  border-radius: var(--r-md);
  cursor: pointer; transition: all 0.2s;
}
.hr-dashboard-wide:hover { border-color: var(--text-primary); background: linear-gradient(135deg, rgba(40,30,8,0.95), rgba(14,10,4,0.92)); }
.hr-dashboard-wide-icon { font-size: 22px; }
.hr-dashboard-wide-text { flex: 1; }
.hr-dashboard-wide-text strong { display: block; color: #fff; font-size: 13px; font-weight: 700; }
.hr-dashboard-wide-text span { font-size: 11px; color: var(--text-primary); letter-spacing: 0.3px; }

/* Main tabs */
.hr-main-tabs {
  display: flex; gap: 4px; padding: 4px;
  background: var(--bg-card);
  border: 1px solid var(--border-silver);
  border-radius: var(--r-full);
  margin-bottom: 14px;
  overflow-x: auto;
  scrollbar-width: none;
}
.hr-main-tabs::-webkit-scrollbar { display: none; }
.hr-tab {
  flex: 1;
  padding: 8px 10px; border-radius: var(--r-full);
  font-size: 12px; font-weight: 700;
  color: var(--text-secondary);
  transition: all 0.2s;
}
.hr-tab.active {
  background: linear-gradient(135deg, #FFFFFF, #B0B4BC);
  color: #1a1000;
  box-shadow: 0 2px 10px rgba(255,255,255,0.3);
}

.hr-panel { display: block; }
.hr-panel[hidden] { display: none !important; }

/* Week nav */
.hr-week-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 2px 14px;
}
.hr-nav-arrow {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--bg-card); border: 1px solid var(--border-silver);
  color: var(--silver-light);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700;
  transition: all 0.2s;
}
.hr-nav-arrow:hover { border-color: var(--text-primary); color: var(--text-primary); }
.hr-week-label {
  flex: 1; text-align: center;
  font-family: 'Playfair Display', serif;
  font-size: 16px; font-weight: 700; color: #fff; letter-spacing: -0.2px;
}

/* Department tabs */
.hr-dept-tabs {
  display: flex; gap: 6px; overflow-x: auto;
  padding: 2px; margin-bottom: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-silver);
  border-radius: var(--r-full);
  scrollbar-width: none;
}
.hr-dept-tabs::-webkit-scrollbar { display: none; }
.hr-dept-btn {
  flex-shrink: 0;
  padding: 8px 14px; border-radius: var(--r-full);
  background: transparent;
  font-size: 12px; font-weight: 700;
  color: var(--text-secondary);
  transition: all 0.2s;
  white-space: nowrap;
}
.hr-dept-btn:hover { color: var(--text-primary); }
.hr-dept-btn.active {
  background: linear-gradient(135deg, #FFFFFF, #B0B4BC);
  color: #1a1000;
  box-shadow: 0 2px 10px rgba(255,255,255,0.3);
}

/* Events banner */
.hr-events-banner {
  display: none;
  flex-direction: column; gap: 6px;
  margin-bottom: 12px;
}
.hr-events-banner.has-events { display: flex; }
.hr-event-badge {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(248,113,113,0.12), rgba(255,255,255,0.08));
  border: 1px solid rgba(248,113,113,0.35);
  border-radius: var(--r-md);
}
.hr-event-icon { font-size: 18px; }
.hr-event-info { flex: 1; min-width: 0; }
.hr-event-title { font-size: 13px; font-weight: 700; color: #fff; }
.hr-event-meta { font-size: 11px; color: rgba(255,215,106,0.9); letter-spacing: 0.3px; }

/* ── Roster grid ── */
.hr-roster-wrap { margin-bottom: 14px; }
.hr-roster {
  display: block;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--border-silver);
  background: rgba(8,8,14,0.6);
}
.hr-roster-scroll {
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.hr-roster-scroll::-webkit-scrollbar { height: 6px; }
.hr-roster-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.3); border-radius: 3px; }

.hr-roster-grid {
  display: grid;
  grid-template-columns: 160px repeat(7, minmax(70px, 1fr));
  min-width: 640px;
}
.hr-roster-head {
  padding: 10px 10px;
  background: linear-gradient(180deg, rgba(30,24,6,0.9), rgba(14,10,4,0.85));
  border-bottom: 1px solid var(--border-gold);
  font-size: 10px; letter-spacing: 1.5px; color: var(--text-primary);
  font-weight: 800; text-transform: uppercase;
  text-align: center;
}
.hr-roster-head.name { text-align: left; }
.hr-roster-head.is-today {
  background: linear-gradient(180deg, rgba(129,140,255,0.2), rgba(255,255,255,0.08));
  color: var(--text-primary);
}
.hr-roster-head.has-event { position: relative; }
.hr-roster-head.has-event::after {
  content: '⭐';
  position: absolute; top: 2px; right: 4px;
  font-size: 10px;
}

.hr-roster-staff {
  padding: 10px 10px;
  background: rgba(16,16,22,0.95);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px;
  min-height: 58px;
}
.hr-roster-staff img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 1.5px solid var(--border-gold); flex-shrink: 0; }
.hr-roster-staff-info { min-width: 0; line-height: 1.2; }
.hr-roster-staff-name { font-size: 12px; font-weight: 700; color: #fff; letter-spacing: -0.1px; }
.hr-roster-staff-pos { font-size: 10px; color: var(--text-muted); letter-spacing: 0.3px; }

.hr-shift-cell {
  padding: 8px 4px;
  border-bottom: 1px solid var(--border);
  border-left: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  min-height: 58px;
  position: relative;
}
.hr-shift {
  padding: 4px 6px;
  border-radius: 4px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.3px;
  text-align: center;
  line-height: 1.15;
  min-width: 54px;
}
.hr-shift.morning   { background: linear-gradient(135deg, rgba(125,211,252,0.22), rgba(56,189,248,0.1)); color: #7dd3fc; border: 1px solid rgba(56,189,248,0.4); }
.hr-shift.afternoon { background: linear-gradient(135deg, rgba(129,140,255,0.24), rgba(255,255,255,0.1)); color: var(--text-primary); border: 1px solid var(--border-gold); }
.hr-shift.night     { background: linear-gradient(135deg, rgba(167,139,250,0.25), rgba(109,40,217,0.1)); color: #c4b5fd; border: 1px solid rgba(167,139,250,0.45); }
.hr-shift.off       { background: rgba(255,255,255,0.03); color: var(--text-muted); border: 1px dashed rgba(255,255,255,0.12); }
.hr-shift.leave     { background: rgba(52,211,153,0.15); color: #34d399; border: 1px solid rgba(52,211,153,0.4); }
.hr-shift.event     { background: linear-gradient(135deg, rgba(248,113,113,0.2), rgba(129,140,255,0.12)); color: #fca5a5; border: 1px solid rgba(248,113,113,0.5); animation: hrEventPulse 2.2s ease-in-out infinite; }
@keyframes hrEventPulse { 0%,100% { box-shadow: 0 0 0 rgba(248,113,113,0); } 50% { box-shadow: 0 0 14px rgba(248,113,113,0.4); } }
.hr-shift-time { font-size: 9px; font-weight: 600; opacity: 0.85; display: block; margin-top: 2px; }

.hr-shift-cell.is-today { background: rgba(255,255,255,0.06); }

/* Day summary row */
.hr-summary-row {
  display: grid;
  grid-template-columns: 160px repeat(7, minmax(70px, 1fr));
  min-width: 640px;
  border-top: 2px solid var(--border-gold);
  background: linear-gradient(180deg, rgba(22,22,32,0.95), rgba(14,14,22,0.9));
}
.hr-summary-label {
  padding: 10px 10px;
  font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--text-primary); font-weight: 800;
  display: flex; align-items: center;
}
.hr-summary-cell {
  padding: 10px 6px;
  border-left: 1px solid var(--border);
  font-size: 10px;
  line-height: 1.35;
}
.hr-sum-head { font-weight: 800; font-size: 10px; letter-spacing: 0.5px; margin-bottom: 4px; }
.hr-sum-bk { color: var(--text-secondary); display: block; font-size: 9px; }
.hr-sum-cost { color: var(--text-primary); font-weight: 800; font-size: 11px; margin-top: 4px; letter-spacing: -0.2px; }
.hr-sum-badge {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 6px; border-radius: 3px;
  font-size: 8px; font-weight: 800; letter-spacing: 1px;
}
.hr-sum-badge.good  { background: rgba(52,211,153,0.15); color: #34d399; }
.hr-sum-badge.min   { background: rgba(234,179,8,0.15); color: #facc15; }
.hr-sum-badge.under { background: rgba(248,113,113,0.15); color: #f87171; }

.hr-actions-row {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 10px 0 4px;
}
.hr-actions-row button { flex: 1; min-width: 130px; }

/* Sub-head (panel subtitles) */
.hr-sub-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-silver);
  margin-bottom: 14px;
}
.hr-sub-eyebrow { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-primary); font-weight: 800; }
.hr-sub-title { font-family: 'Playfair Display', serif; font-size: 17px; font-weight: 700; color: #fff; letter-spacing: -0.2px; margin-top: 2px; }

/* Leave planner */
.hr-leave-types { display: flex; flex-wrap: wrap; gap: 6px; }
.hr-leave-type {
  padding: 7px 12px; border-radius: var(--r-full);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-silver);
  color: var(--silver-light);
  font-size: 11px; font-weight: 600;
  transition: all 0.2s;
}
.hr-leave-type:hover { border-color: var(--border-gold); color: var(--text-primary); }
.hr-leave-type.active {
  background: linear-gradient(135deg, #FFFFFF, #B0B4BC);
  color: #1a1000;
  border-color: transparent;
}

.hr-pending-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.hr-pending {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: linear-gradient(90deg, rgba(255,255,255,0.12), rgba(255,255,255,0.02));
  border: 1px solid var(--border-gold);
  border-radius: var(--r-md);
}
.hr-pending img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 1.5px solid var(--text-primary); flex-shrink: 0; }
.hr-pending-info { flex: 1; min-width: 0; }
.hr-pending-name { font-size: 12px; font-weight: 700; color: #fff; }
.hr-pending-meta { font-size: 10px; color: var(--text-primary); letter-spacing: 0.3px; margin-top: 1px; }
.hr-pending-reason { font-size: 10px; color: var(--text-secondary); margin-top: 1px; }
.hr-pending-actions { display: flex; gap: 4px; flex-shrink: 0; }
.hr-pending-btn {
  padding: 6px 10px; border-radius: var(--r-full);
  font-size: 10px; font-weight: 800; letter-spacing: 0.5px;
}
.hr-pending-btn.approve { background: rgba(5,150,105,0.15); border: 1px solid rgba(5,150,105,0.4); color: #34d399; }
.hr-pending-btn.reject  { background: rgba(220,38,38,0.12); border: 1px solid rgba(248,113,113,0.4); color: #f87171; }

/* Leave calendar */
.hr-leave-calendar {
  padding: 14px;
  background: rgba(16,16,24,0.9);
  border: 1px solid var(--border-silver);
  border-radius: var(--r-md);
}
.hr-cal-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px;
}
.hr-cal-title { font-family: 'Playfair Display', serif; font-size: 15px; font-weight: 700; color: #fff; }
.hr-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.hr-cal-dayname { font-size: 9px; letter-spacing: 1px; color: var(--text-muted); font-weight: 700; text-transform: uppercase; text-align: center; padding: 4px 0; }
.hr-cal-day {
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 11px; color: #fff;
  position: relative;
  padding: 3px;
}
.hr-cal-day {
  min-height: 62px;
  aspect-ratio: auto;
  align-items: stretch; justify-content: flex-start;
}
.hr-cal-day.is-today { border-color: var(--text-primary) !important; box-shadow: inset 0 0 0 1px var(--text-primary), 0 0 10px rgba(129,140,255,0.25); }
.hr-cal-day.is-today .hr-cal-num { color: var(--text-primary); }
.hr-cal-day.out { opacity: 0.3; min-height: 28px; }
.hr-cal-day.is-pending { border-style: dashed !important; }
.hr-cal-day.overload { animation: hrCalPulse 1.8s ease-in-out infinite; }
@keyframes hrCalPulse { 0%,100% { box-shadow: 0 0 0 rgba(248,113,113,0); } 50% { box-shadow: 0 0 0 1px rgba(248,113,113,0.3); } }
.hr-cal-day.event::after {
  content: ''; position: absolute; top: 0; right: 0; width: 0; height: 0;
  border-top: 10px solid rgba(129,140,255,0.7);
  border-left: 10px solid transparent;
  border-top-right-radius: 6px;
}
.hr-cal-num { font-size: 11px; color: #fff; font-weight: 700; line-height: 1; align-self: flex-start; }
.hr-cal-count { font-size: 8px; color: var(--text-primary); font-weight: 800; letter-spacing: 0.3px; margin-top: 1px; }
.hr-cal-stamp {
  position: absolute; top: 3px; right: 3px;
  width: 14px; height: 14px; border-radius: 50%;
  background: rgba(52,211,153,0.9); color: #062715;
  font-size: 9px; font-weight: 900; line-height: 14px; text-align: center;
  box-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.hr-cal-star { position: absolute; top: 2px; right: 18px; font-size: 10px; line-height: 1; }
.hr-cal-chips {
  display: flex; flex-wrap: wrap; gap: 2px; margin-top: auto;
}
.hr-cal-chip {
  font-size: 8px; font-weight: 800; padding: 1px 4px;
  border-radius: 3px; letter-spacing: 0.2px;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: #0a0d13;
}
.hr-cal-chip.more { background: rgba(255,255,255,0.12); color: #fff; }

.hr-cal-legend {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px;
  font-size: 10px; color: var(--text-muted);
}
.hr-cal-legend-dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }

/* Balance list */
.hr-balance-list { display: flex; flex-direction: column; gap: 10px; }
.hr-balance {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  align-items: center; gap: 10px;
  padding: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-silver);
  border-radius: var(--r-md);
}
.hr-balance img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border-silver); flex-shrink: 0; }
.hr-balance-name { min-width: 0; font-size: 12px; font-weight: 700; color: #fff; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hr-balance-name span { display: block; width: 100%; font-size: 10px; color: var(--text-muted); font-weight: 500; margin-top: 1px; }
.hr-balance-col { text-align: right; font-size: 10px; color: var(--text-secondary); }
.hr-balance-col strong { display: block; font-size: 12px; color: var(--text-primary); font-weight: 700; }
.hr-balance-bars {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px;
  margin-top: 4px;
}
.hr-balance-bar { display: flex; flex-direction: column; gap: 3px; }
.hr-balance-bar-h {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 9px; letter-spacing: 0.3px; color: var(--text-muted);
}
.hr-balance-bar-h strong { font-size: 11px; color: #fff; font-weight: 800; }
.hr-balance-bar-track {
  height: 6px; border-radius: 3px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.06);
  overflow: hidden;
}
.hr-balance-bar-fill { height: 100%; border-radius: 3px; transition: width 0.4s ease; }
.hr-balance-bar-fill.annual    { background: linear-gradient(90deg, #22c55e, #34d399); }
.hr-balance-bar-fill.sick      { background: linear-gradient(90deg, #f97316, #fb923c); }
.hr-balance-bar-fill.emergency { background: linear-gradient(90deg, #dc2626, #f87171); }
.hr-balance-bar-fill.is-high   { box-shadow: 0 0 6px currentColor; }
.hr-balance-edit {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border-silver);
  color: var(--text-secondary);
  width: 28px; height: 28px; border-radius: 50%;
  cursor: pointer; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
}
.hr-balance-edit:hover { color: var(--text-primary); border-color: var(--border-gold); background: var(--gold-glow-sm); }

/* On-duty pulsing dot */
.on-duty-dot {
  display: inline-block;
  width: 8px; height: 8px; border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34,197,94,0.6);
  animation: onDutyPulse 1.8s ease-in-out infinite;
  vertical-align: 1px;
}
@keyframes onDutyPulse {
  0%   { box-shadow: 0 0 0 0 rgba(34,197,94,0.5); }
  70%  { box-shadow: 0 0 0 6px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}
.hr-staff-avatar-wrap { position: relative; flex-shrink: 0; }
.hr-staff-avatar-wrap .on-duty-dot {
  position: absolute; right: -2px; bottom: -2px;
  width: 11px; height: 11px; border: 2px solid #0b0d12;
}

/* Team tab */
.hr-team-dept { margin-bottom: 16px; }
.hr-team-dept-head {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: linear-gradient(90deg, rgba(255,255,255,0.12), transparent);
  border-left: 3px solid var(--text-primary);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  margin-bottom: 10px;
}
.hr-team-dept-name { font-family: 'Playfair Display', serif; font-size: 15px; font-weight: 700; color: #fff; letter-spacing: -0.2px; }
.hr-team-dept-count { font-size: 10px; color: var(--text-muted); letter-spacing: 1px; margin-left: auto; }
.hr-team-leader {
  font-size: 10px; color: var(--text-primary); font-weight: 700;
  background: var(--gold-glow-sm);
  padding: 2px 8px; border-radius: var(--r-full);
  border: 1px solid var(--border-gold);
}

.hr-staff-list { display: flex; flex-direction: column; gap: 6px; }
.hr-staff-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-silver);
  border-radius: var(--r-md);
  cursor: pointer; transition: all 0.15s;
}
.hr-staff-row:hover { border-color: var(--border-gold); background: var(--gold-glow-sm); }
.hr-staff-row img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 1.5px solid var(--border-gold); flex-shrink: 0; }
.hr-staff-info { flex: 1; min-width: 0; }
.hr-staff-name { font-size: 13px; font-weight: 700; color: #fff; }
.hr-staff-name .leader-chip { font-size: 9px; letter-spacing: 1px; margin-left: 6px; padding: 1px 6px; border-radius: 3px; background: linear-gradient(135deg, #FFFFFF, #B0B4BC); color: #1a1000; font-weight: 800; vertical-align: 1px; }
.hr-staff-pos { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.hr-staff-chev { color: var(--text-muted); flex-shrink: 0; }

/* HR On Duty gold badge */
.hr-on-duty-badge {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 9px; letter-spacing: 0.6px; margin-left: 6px;
  padding: 2px 7px; border-radius: var(--r-full);
  background: linear-gradient(135deg, #FFFFFF, #B0B4BC);
  color: #1a1000; font-weight: 900;
  box-shadow: 0 0 8px rgba(129,140,255,0.5);
  vertical-align: 1px;
  animation: hrOnDutyGlow 2.2s ease-in-out infinite;
}
@keyframes hrOnDutyGlow {
  0%,100% { box-shadow: 0 0 6px rgba(129,140,255,0.4); }
  50%     { box-shadow: 0 0 12px rgba(129,140,255,0.75); }
}

/* Department tags on staff cards */
.hr-staff-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.hr-dept-tag {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 9px; font-weight: 700; letter-spacing: 0.3px;
  padding: 2px 7px; border-radius: var(--r-full);
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border-silver);
  color: var(--text-secondary);
}
.hr-dept-tag.on-duty-tag {
  background: rgba(34,197,94,0.12);
  border-color: rgba(34,197,94,0.35);
  color: #4ade80;
}
.hr-staff-access {
  margin-top: 4px; font-size: 10px; color: var(--text-muted);
  font-style: italic;
}
.hr-staff-row.is-on-duty {
  border-color: rgba(34,197,94,0.25);
  background: linear-gradient(90deg, rgba(34,197,94,0.06), rgba(255,255,255,0.03));
}
.hr-team-dept.is-admin .hr-team-dept-head {
  background: linear-gradient(90deg, rgba(147,197,253,0.1), transparent);
  border-left-color: #60a5fa;
}
.hr-team-dept.is-admin .hr-team-dept-name::after {
  content: ' · Admin';
  font-size: 9px; color: var(--text-muted); letter-spacing: 1px;
  font-family: 'Inter', sans-serif; font-weight: 600;
}

/* Doc vault */
.hr-doc-grid { display: flex; flex-direction: column; gap: 8px; }
.hr-doc {
  padding: 12px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-silver);
  border-radius: var(--r-md);
  display: flex; align-items: center; gap: 12px;
}
.hr-doc-icon {
  width: 40px; height: 40px; border-radius: var(--r-sm);
  background: rgba(255,255,255,0.1); border: 1px solid var(--border-gold);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.hr-doc-info { flex: 1; min-width: 0; }
.hr-doc-name { font-size: 13px; font-weight: 700; color: #fff; }
.hr-doc-meta { font-size: 10px; color: var(--text-muted); margin-top: 2px; letter-spacing: 0.3px; }
.hr-doc-status {
  padding: 3px 8px; border-radius: var(--r-full);
  font-size: 9px; font-weight: 800; letter-spacing: 1px;
  white-space: nowrap;
  flex-shrink: 0;
}
.hr-doc-status.ok { background: rgba(52,211,153,0.15); color: #34d399; border: 1px solid rgba(52,211,153,0.4); }
.hr-doc-status.warn { background: rgba(234,179,8,0.15); color: #facc15; border: 1px solid rgba(234,179,8,0.4); }
.hr-doc-status.expired { background: rgba(220,38,38,0.15); color: #f87171; border: 1px solid rgba(248,113,113,0.4); }
.hr-doc-preview-arrow {
  margin-left: auto;
  color: var(--text-primary);
  font-size: 14px;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════
   DOCUMENT PREVIEW MODAL
══════════════════════════════════════════════ */
.doc-preview-modal { max-width: 480px !important; padding: 10px 16px 16px !important; }
.doc-preview-meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 0 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}
.doc-meta-label {
  font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--text-muted); font-weight: 800;
}
.doc-meta-val { font-size: 11px; color: #fff; font-weight: 600; }
.doc-meta-chip {
  padding: 4px 10px; border-radius: var(--r-full);
  font-size: 10px; font-weight: 800; letter-spacing: 1px;
  text-transform: uppercase;
  margin-left: auto;
}
.doc-meta-chip.verified { background: rgba(52,211,153,0.15); color: #34d399; border: 1px solid rgba(52,211,153,0.4); }
.doc-meta-chip.warn { background: rgba(234,179,8,0.15); color: #facc15; border: 1px solid rgba(234,179,8,0.4); }
.doc-meta-chip.expired { background: rgba(220,38,38,0.15); color: #f87171; border: 1px solid rgba(248,113,113,0.4); }

.doc-preview-body {
  background: #f7f6f2;
  border-radius: var(--r-md);
  padding: 18px;
  min-height: 340px;
  color: #1a1a1a;
  font-family: 'Inter', sans-serif;
  position: relative;
  overflow: hidden;
}
.doc-preview-actions {
  display: flex; gap: 10px; margin-top: 14px;
}
.doc-preview-actions button { flex: 1; }

/* ─── Emirates ID card ─── */
.doc-emirates {
  background: linear-gradient(135deg, #0a2540 0%, #1e5fb5 50%, #0a2540 100%);
  color: #fff;
  border-radius: 14px;
  padding: 16px;
  min-height: 260px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 4px 18px rgba(0,0,0,0.2);
  font-family: 'Inter', sans-serif;
}
.doc-emirates::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 80% 20%, rgba(255,255,255,0.1), transparent 50%),
    repeating-linear-gradient(-45deg, rgba(255,255,255,0.02) 0 2px, transparent 2px 4px);
  pointer-events: none;
}
.doc-em-skyline {
  position: absolute; bottom: 0; left: 0; right: 0; height: 50px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.4));
}
.doc-em-skyline::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 28px;
  background-image:
    linear-gradient(to top, #000 0%, transparent 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 30'><rect x='10' y='10' width='8' height='20' fill='%23000'/><rect x='22' y='6' width='10' height='24' fill='%23000'/><rect x='35' y='14' width='6' height='16' fill='%23000'/><rect x='44' y='4' width='8' height='26' fill='%23000'/><rect x='55' y='12' width='12' height='18' fill='%23000'/><rect x='70' y='8' width='8' height='22' fill='%23000'/><rect x='82' y='2' width='14' height='28' fill='%23000'/><rect x='100' y='10' width='6' height='20' fill='%23000'/><rect x='110' y='6' width='10' height='24' fill='%23000'/><rect x='124' y='14' width='8' height='16' fill='%23000'/><rect x='136' y='8' width='12' height='22' fill='%23000'/><rect x='152' y='12' width='6' height='18' fill='%23000'/><rect x='162' y='4' width='10' height='26' fill='%23000'/><rect x='176' y='10' width='8' height='20' fill='%23000'/><rect x='188' y='14' width='6' height='16' fill='%23000'/></svg>");
  background-size: cover;
  opacity: 0.85;
}
.doc-em-flag {
  width: 44px; height: 28px; border-radius: 2px;
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.doc-em-flag > div { flex: 1; }
.doc-em-flag > div:nth-child(1) { background: #ef3340; flex: 0 0 25%; }
.doc-em-flag > div:nth-child(2) { background: #009639; flex: 0 0 25%; }
.doc-em-flag > div:nth-child(3) { background: #fff; flex: 0 0 25%; }
.doc-em-flag > div:nth-child(4) { background: #000; flex: 0 0 25%; }
.doc-em-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  position: relative; z-index: 1;
  margin-bottom: 8px;
}
.doc-em-title { font-size: 9px; letter-spacing: 1.5px; font-weight: 700; text-transform: uppercase; }
.doc-em-title strong { display: block; font-size: 11px; letter-spacing: 2px; }
.doc-em-body {
  display: flex; gap: 12px;
  position: relative; z-index: 1;
  margin-top: 8px;
}
.doc-em-photo {
  width: 66px; height: 82px;
  border-radius: 4px;
  background: rgba(255,255,255,0.9);
  border: 2px solid rgba(255,255,255,0.95);
  flex-shrink: 0;
  overflow: hidden;
}
.doc-em-photo img { width: 100%; height: 100%; object-fit: cover; }
.doc-em-fields { flex: 1; min-width: 0; font-size: 11px; line-height: 1.4; }
.doc-em-field { margin-bottom: 4px; }
.doc-em-field-lbl { font-size: 7px; letter-spacing: 1px; opacity: 0.75; text-transform: uppercase; display: block; }
.doc-em-field-val { font-size: 11px; font-weight: 700; letter-spacing: 0.3px; }
.doc-em-id-num {
  font-family: 'Courier New', monospace;
  font-size: 13px; font-weight: 700; letter-spacing: 1px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.2);
  position: relative; z-index: 1;
}

/* ─── Passport ─── */
.doc-passport {
  background: linear-gradient(145deg, #08402a 0%, #0d5a3b 60%, #08402a 100%);
  color: #d4af37;
  border-radius: 8px;
  padding: 28px 18px;
  min-height: 300px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  position: relative;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.08);
}
.doc-passport::before {
  content: '';
  position: absolute; inset: 10px;
  border: 1px solid rgba(212,175,55,0.3);
  border-radius: 4px;
  pointer-events: none;
}
.doc-pp-top { font-family: 'Playfair Display', serif; font-size: 13px; letter-spacing: 3px; font-weight: 600; }
.doc-pp-country { font-family: 'Playfair Display', serif; font-size: 16px; letter-spacing: 2px; font-weight: 700; margin-top: 3px; }
.doc-pp-emblem {
  width: 80px; height: 80px; border-radius: 50%;
  border: 2px solid #d4af37;
  display: flex; align-items: center; justify-content: center;
  font-size: 36px;
  background: radial-gradient(circle, rgba(212,175,55,0.15), transparent 70%);
  margin: 20px 0;
}
.doc-pp-label { font-family: 'Playfair Display', serif; font-style: italic; font-size: 22px; letter-spacing: 3px; font-weight: 600; }
.doc-pp-info {
  background: #f7f6f2;
  color: #1a1a1a;
  width: 100%;
  margin-top: 18px;
  padding: 10px 12px;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  font-size: 10px;
  text-align: left;
  line-height: 1.5;
}
.doc-pp-info strong { color: #0d3b1a; font-weight: 700; }
.doc-pp-mrz {
  font-family: 'Courier New', monospace;
  font-size: 9px;
  letter-spacing: 1px;
  color: rgba(212,175,55,0.7);
  margin-top: 10px;
  word-break: break-all;
  text-align: left;
  line-height: 1.3;
}

/* ─── Formal (visa/permit/noc) template ─── */
.doc-formal {
  background: #f7f6f2;
  padding: 22px 20px;
  min-height: 340px;
  color: #1a1a1a;
  position: relative;
  font-family: 'Inter', sans-serif;
}
.doc-formal-letterhead {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 2px solid #0a2540;
  margin-bottom: 14px;
}
.doc-formal-crest {
  width: 42px; height: 42px; border-radius: 50%;
  background: #0a2540;
  color: #d4af37;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
}
.doc-formal-org { font-size: 11px; color: #555; letter-spacing: 1px; text-align: right; }
.doc-formal-org strong { display: block; color: #0a2540; font-size: 13px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; }
.doc-formal-title {
  font-family: 'Playfair Display', serif;
  font-size: 18px; font-weight: 700;
  color: #0a2540;
  letter-spacing: 0.3px;
  margin-bottom: 8px;
}
.doc-formal-sub { font-size: 10px; letter-spacing: 2px; color: #888; text-transform: uppercase; margin-bottom: 14px; }
.doc-formal-body { font-size: 12px; line-height: 1.6; color: #2a2a2a; }
.doc-formal-body p { margin-bottom: 10px; }
.doc-formal-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin: 14px 0; }
.doc-formal-field-lbl { font-size: 8px; letter-spacing: 1px; color: #888; text-transform: uppercase; font-weight: 700; }
.doc-formal-field-val { font-size: 12px; color: #0a2540; font-weight: 700; margin-top: 2px; }
.doc-formal-sig-row { display: flex; justify-content: space-between; gap: 20px; margin-top: 22px; padding-top: 14px; border-top: 1px solid #ddd; }
.doc-formal-sig { flex: 1; }
.doc-formal-sig-scribble {
  font-family: 'Playfair Display', serif; font-style: italic;
  font-size: 20px; color: #0a2540;
  border-bottom: 1px solid #0a2540;
  padding-bottom: 3px;
  margin-bottom: 4px;
}
.doc-formal-sig-name { font-size: 10px; font-weight: 700; color: #1a1a1a; }
.doc-formal-sig-role { font-size: 9px; color: #666; letter-spacing: 0.3px; }
.doc-formal-stamp {
  position: absolute;
  right: 30px; bottom: 80px;
  width: 90px; height: 90px; border-radius: 50%;
  border: 3px solid #c00;
  color: #c00;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  font-size: 9px; font-weight: 800; letter-spacing: 1.5px;
  transform: rotate(-12deg);
  opacity: 0.85;
  line-height: 1.2;
  background: rgba(255,255,255,0.1);
}

/* ─── Health card ─── */
.doc-health {
  background: linear-gradient(135deg, #0a7a4a 0%, #12a36a 60%, #0a7a4a 100%);
  color: #fff;
  border-radius: 12px;
  padding: 20px 18px;
  min-height: 220px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
}
.doc-health-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; }
.doc-health-cross {
  width: 36px; height: 36px;
  background: #fff;
  color: #0a7a4a;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 900; line-height: 1;
}
.doc-health-org { font-size: 9px; letter-spacing: 2px; text-transform: uppercase; opacity: 0.85; font-weight: 700; text-align: right; }
.doc-health-org strong { display: block; font-family: 'Playfair Display', serif; font-size: 14px; letter-spacing: 1px; }
.doc-health-name { font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 700; margin-bottom: 16px; }
.doc-health-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.doc-health-field-lbl { font-size: 8px; letter-spacing: 1px; text-transform: uppercase; opacity: 0.8; font-weight: 700; display: block; }
.doc-health-field-val { font-size: 12px; font-weight: 700; font-family: 'Courier New', monospace; letter-spacing: 0.5px; }

/* ─── Photo ─── */
.doc-photo {
  background: #fff;
  padding: 28px; text-align: center;
  min-height: 340px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.doc-photo-ring {
  width: 180px; height: 180px; border-radius: 50%;
  border: 4px solid #FFFFFF;
  padding: 4px;
  background: #f4f4f4;
  box-shadow: 0 6px 22px rgba(0,0,0,0.15);
}
.doc-photo-ring img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.doc-photo-name { font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 700; color: #1a1a1a; }
.doc-photo-meta { font-size: 11px; color: #666; letter-spacing: 1px; text-transform: uppercase; }
.doc-photo-stamp {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 14px; border-radius: 3px;
  background: rgba(52,211,153,0.12);
  color: #0f766e;
  border: 2px solid #0f766e;
  font-size: 10px; font-weight: 800; letter-spacing: 2px;
  transform: rotate(-4deg);
  margin-top: 6px;
}

/* ─── Contract (3 pages) ─── */
.doc-contract {
  background: #f7f6f2;
  color: #1a1a1a;
  min-height: 340px;
  padding: 0;
}
.doc-contract-page {
  padding: 22px 22px 30px;
  border-bottom: 2px dashed #ccc;
}
.doc-contract-page:last-child { border-bottom: none; }
.doc-contract-head {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 10px;
  border-bottom: 2px solid #0a2540;
  margin-bottom: 14px;
}
.doc-contract-brand {
  font-family: 'Playfair Display', serif;
  font-size: 16px; font-weight: 700;
  color: #0a2540;
}
.doc-contract-brand .gold { background: linear-gradient(135deg, #6366FF, #818CFF); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-style: italic; }
.doc-contract-pagenum { font-size: 10px; color: #888; letter-spacing: 1px; text-transform: uppercase; }
.doc-contract-title { font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 700; color: #0a2540; margin-bottom: 6px; text-align: center; }
.doc-contract-sub { font-size: 10px; letter-spacing: 2px; text-align: center; color: #888; text-transform: uppercase; margin-bottom: 16px; }
.doc-contract-section { margin-bottom: 14px; }
.doc-contract-section h4 { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: #0a2540; font-weight: 800; margin-bottom: 6px; }
.doc-contract-section p { font-size: 11px; line-height: 1.6; color: #2a2a2a; margin-bottom: 6px; }
.doc-contract-section li { font-size: 11px; line-height: 1.6; margin-left: 16px; color: #2a2a2a; }
.doc-contract-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin: 6px 0 10px; }
.doc-contract-row span:nth-child(odd) { font-size: 9px; color: #888; letter-spacing: 1px; text-transform: uppercase; font-weight: 700; }
.doc-contract-row span:nth-child(even) { font-size: 11px; color: #0a2540; font-weight: 700; }
.doc-contract-sig { display: flex; gap: 20px; margin-top: 22px; padding-top: 14px; border-top: 1px solid #ddd; }
.doc-contract-sig-box { flex: 1; text-align: center; }
.doc-contract-sig-line { border-bottom: 1.5px solid #0a2540; height: 32px; font-family: 'Playfair Display', serif; font-style: italic; color: #0a2540; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 2px; font-size: 18px; font-weight: 600; }
.doc-contract-sig-label { font-size: 9px; letter-spacing: 1px; color: #666; margin-top: 4px; text-transform: uppercase; }

/* Print — doc preview */
@media print {
  body > *:not(#docPreviewOverlay) { display: none !important; }
  #docPreviewOverlay { position: static !important; background: #fff !important; }
  #docPreviewOverlay .ca-header, #docPreviewOverlay .doc-preview-actions { display: none !important; }
  #docPreviewOverlay .ojt-modal { background: #fff !important; max-width: 100% !important; max-height: none !important; overflow: visible !important; }
  #docPreviewOverlay .doc-preview-body { background: #fff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

.hr-alerts-card {
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(234,179,8,0.08), rgba(220,38,38,0.08));
  border: 1px solid rgba(248,113,113,0.35);
  border-radius: var(--r-md);
  margin-bottom: 14px;
}
.hr-alerts-h { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: #fca5a5; font-weight: 800; margin-bottom: 8px; }
.hr-alert-line {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-size: 11px;
}
.hr-alert-line:first-of-type { border-top: 0; }
.hr-alert-line strong { color: #fff; }
.hr-alert-line .days { margin-left: auto; font-weight: 800; letter-spacing: 0.3px; }
.hr-alert-line.warn .days { color: #facc15; }
.hr-alert-line.expired .days { color: #f87171; }

/* Who's on today list */
.wot-group { margin-bottom: 14px; }
.wot-group-head { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-primary); font-weight: 800; margin-bottom: 8px; }
.wot-list { display: flex; flex-direction: column; gap: 6px; }
.wot-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-silver);
  border-radius: var(--r-md);
}
.wot-item img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 1.5px solid var(--border-gold); flex-shrink: 0; }
.wot-item-info { flex: 1; min-width: 0; }
.wot-item-name { font-size: 12px; font-weight: 700; color: #fff; }
.wot-item-pos { font-size: 10px; color: var(--text-muted); }
.wot-item-shift {
  padding: 4px 8px; border-radius: 4px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.3px;
  white-space: nowrap; flex-shrink: 0;
}
.wot-item-shift.morning   { background: rgba(125,211,252,0.15); color: #7dd3fc; border: 1px solid rgba(56,189,248,0.3); }
.wot-item-shift.afternoon { background: rgba(129,140,255,0.18); color: var(--text-primary); border: 1px solid var(--border-gold); }
.wot-item-shift.night     { background: rgba(167,139,250,0.18); color: #c4b5fd; border: 1px solid rgba(167,139,250,0.35); }
.wot-item-shift.event     { background: rgba(248,113,113,0.18); color: #fca5a5; border: 1px solid rgba(248,113,113,0.4); }

/* ══════════════════════════════════════════════
   WHITE LABEL — per-scope brand
══════════════════════════════════════════════ */
/* Default: brand-primary falls back to gold. When a scope has data-brand set, it overrides. */
[data-scope="hr"], [data-scope="ops"] {
  --brand-primary: #FFFFFF;
  --brand-primary-light: #B0B4BC;
  --brand-on-primary: #1a1000;
  --brand-accent: rgba(255,255,255,0.35);
  --brand-surface: rgba(26,22,10,0.95);
  --brand-bg: #0a0a0a;
}
[data-scope="hr"][data-brand="nobu"], [data-scope="ops"][data-brand="nobu"] {
  --brand-primary: #C9A050;
  --brand-primary-light: #E2C079;
  --brand-on-primary: #0a0a0a;
  --brand-accent: rgba(201,160,80,0.45);
  --brand-surface: rgba(12,12,12,0.98);
  --brand-bg: #000000;
}

/* Apply brand vars to key visual elements within HR/Ops */
[data-scope="hr"] .hr-entity-seal,
[data-scope="ops"] .hr-entity-seal {
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-light));
  color: var(--brand-on-primary);
}
[data-scope="hr"] .hr-tab.active,
[data-scope="hr"] .hr-dept-btn.active,
[data-scope="hr"] .hr-leave-type.active {
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-light));
  color: var(--brand-on-primary);
}
[data-scope="hr"] .hr-kpi.gold,
[data-scope="hr"] .hr-dashboard-wide {
  border-color: var(--brand-accent);
  background: linear-gradient(135deg, var(--brand-surface), rgba(14,10,4,0.92));
}
[data-scope="hr"] .hr-kpi.gold .hr-kpi-val,
[data-scope="hr"] .hr-kpi-val,
[data-scope="hr"] .cred-kpi-num,
[data-scope="hr"] .hr-sum-cost,
[data-scope="hr"] .hr-sub-eyebrow,
[data-scope="hr"] .hr-team-dept-name,
[data-scope="hr"] .hr-entity-name,
[data-scope="hr"] .hr-week-label,
[data-scope="ops"] .hr-entity-name {
  /* keep white for titles — only KPI gold needs re-tinting */
}
[data-scope="hr"] .hr-kpi.gold .hr-kpi-val {
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-light));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
[data-scope="hr"] .hr-entity-banner,
[data-scope="ops"] .hr-entity-banner {
  border-color: var(--brand-accent);
  background: linear-gradient(135deg, var(--brand-surface), rgba(12,12,20,0.92));
}
[data-scope="hr"] .hr-entity-kicker,
[data-scope="ops"] .hr-entity-kicker,
[data-scope="hr"] .hr-team-dept-head,
[data-scope="hr"] .hr-sub-eyebrow,
[data-scope="hr"] .hr-sum-head,
[data-scope="hr"] .hr-alerts-h,
[data-scope="hr"] .hr-event-meta,
[data-scope="hr"] .wot-group-head {
  color: var(--brand-primary-light);
}
[data-scope="hr"] .hr-team-dept-head {
  border-left-color: var(--brand-primary);
}
[data-scope="hr"] .btn-gold,
[data-scope="ops"] .btn-gold {
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-light));
  color: var(--brand-on-primary);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--brand-primary) 35%, transparent);
}
[data-scope="hr"] .btn-outline:hover,
[data-scope="ops"] .btn-outline:hover {
  border-color: var(--brand-primary);
  color: var(--brand-primary-light);
  background: color-mix(in srgb, var(--brand-primary) 10%, transparent);
}
[data-scope="hr"] .hr-nav-arrow:hover,
[data-scope="hr"] .hr-dept-btn:hover,
[data-scope="ops"] .hr-nav-arrow:hover {
  color: var(--brand-primary-light);
  border-color: var(--brand-primary);
}
[data-scope="hr"] .hr-roster-head,
[data-scope="ops"] .ops-section-head {
  background: linear-gradient(180deg, var(--brand-surface), rgba(12,10,4,0.85));
  color: var(--brand-primary-light);
  border-bottom-color: var(--brand-accent);
}
[data-scope="hr"] .hr-pending { border-color: var(--brand-accent); background: linear-gradient(90deg, color-mix(in srgb, var(--brand-primary) 12%, transparent), rgba(255,255,255,0.02)); }
[data-scope="hr"] .hr-pending-meta { color: var(--brand-primary-light); }
[data-scope="hr"] .hr-team-leader {
  color: var(--brand-primary-light);
  background: color-mix(in srgb, var(--brand-primary) 12%, transparent);
  border-color: var(--brand-accent);
}
[data-scope="hr"] .leader-chip {
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-light));
  color: var(--brand-on-primary);
}
[data-scope="hr"] .hr-entity-edit {
  background: color-mix(in srgb, var(--brand-primary) 12%, transparent);
  border-color: var(--brand-accent);
  color: var(--brand-primary-light);
}
[data-scope="hr"] .wl-preview-bar,
[data-scope="ops"] .wl-preview-bar {
  background: linear-gradient(135deg, var(--brand-surface), rgba(8,8,8,0.92));
  border-color: var(--brand-accent);
}

/* White-label preview bar */
.wl-preview-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(26,22,10,0.92), rgba(10,8,2,0.88));
  border: 1px dashed var(--border-gold);
  border-radius: var(--r-md);
  margin-bottom: 10px;
}
.wl-preview-bar svg { flex-shrink: 0; color: var(--brand-primary-light, var(--text-primary)); }
.wl-preview-text { flex: 1; font-size: 11px; color: var(--text-secondary); line-height: 1.45; }
.wl-preview-text strong { color: #fff; display: block; font-size: 12px; font-weight: 700; margin-bottom: 1px; }
.wl-preview-actions { display: flex; gap: 6px; }
.wl-preview-btn {
  padding: 6px 10px; border-radius: var(--r-full);
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border-silver);
  color: var(--silver-light);
  font-size: 10px; font-weight: 700; letter-spacing: 0.5px;
  white-space: nowrap;
}
.wl-preview-btn.on {
  background: linear-gradient(135deg, var(--brand-primary, #FFFFFF), var(--brand-primary-light, #B0B4BC));
  color: var(--brand-on-primary, #1a1000);
  border-color: transparent;
}
.wl-preview-btn:hover { border-color: var(--brand-primary); color: var(--brand-primary-light); }

/* Brand seal — image support */
.hr-entity-seal.has-logo {
  background: #000;
  padding: 4px;
}
.hr-entity-seal.has-logo img {
  width: 100%; height: 100%;
  object-fit: contain;
  border-radius: 8px;
}
.hr-entity-seal.nobu-seal {
  background: linear-gradient(180deg, #1a1a1a, #000);
  border: 1.5px solid var(--brand-primary);
  padding: 0;
}

/* Brand Setup modal bits */
.brand-logo-upload { display: flex; align-items: center; gap: 12px; }
.brand-logo-preview {
  width: 70px; height: 70px; border-radius: var(--r-md);
  background: rgba(255,255,255,0.03);
  border: 1px dashed var(--border-silver);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.brand-logo-preview img { width: 100%; height: 100%; object-fit: contain; }
.brand-color-row { display: flex; align-items: center; gap: 10px; }
.brand-color-input {
  width: 48px; height: 48px; border-radius: var(--r-sm);
  border: 1px solid var(--border-silver);
  cursor: pointer;
  background: transparent;
  padding: 2px;
}
.brand-color-input::-webkit-color-swatch-wrapper { padding: 0; }
.brand-color-input::-webkit-color-swatch { border: none; border-radius: 6px; }
.brand-color-preview {
  flex: 1;
  height: 42px; border-radius: var(--r-sm);
  background: #FFFFFF;
  border: 1px solid var(--border-silver);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
  transition: background 0.25s;
}

/* "Powered by CuadrillaONE" footer */
.wl-footer {
  text-align: center;
  padding: 14px 0 6px;
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 20px;
  border-top: 1px solid var(--border);
  font-weight: 500;
}
.wl-footer strong {
  background: linear-gradient(135deg, var(--text-primary), #FFFFFF);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
  letter-spacing: 1.5px;
}

/* WL Admin entity rows (reuses .assessor-card) */
.wl-admin-entity {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-silver);
  border-radius: var(--r-md);
  margin-bottom: 8px;
}
.wl-admin-seal {
  width: 44px; height: 44px; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-weight: 800; font-family: 'Playfair Display', serif; font-size: 20px;
}
.wl-admin-info { flex: 1; min-width: 0; }
.wl-admin-name { font-size: 13px; font-weight: 700; color: #fff; }
.wl-admin-meta { font-size: 10px; color: var(--text-muted); margin-top: 2px; letter-spacing: 0.3px; }
.wl-admin-status {
  font-size: 8px; font-weight: 800; letter-spacing: 1.2px;
  padding: 3px 8px; border-radius: 3px;
  text-transform: uppercase;
  margin-top: 4px; display: inline-block;
}
.wl-admin-status.pending  { background: rgba(234,179,8,0.15); color: #facc15; border: 1px solid rgba(234,179,8,0.4); }
.wl-admin-status.approved { background: rgba(5,150,105,0.15); color: #34d399; border: 1px solid rgba(5,150,105,0.4); }
.wl-admin-status.suspended{ background: rgba(220,38,38,0.12); color: #f87171; border: 1px solid rgba(248,113,113,0.4); }

/* ══════════════════════════════════════════════
   INTERACTIVE BRAND SETUP — two-column + live preview
══════════════════════════════════════════════ */
.brand-setup-modal { max-width: 620px !important; }
.bs-grid {
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 16px;
  align-items: start;
}
@media (max-width: 560px) {
  .bs-grid { grid-template-columns: 1fr; }
  .bs-preview { order: -1; } /* phone first on mobile */
}

/* LEFT — form */
.bs-form { display: flex; flex-direction: column; gap: 12px; }
.bs-dropzone {
  display: flex; align-items: center; gap: 12px;
  padding: 12px;
  background: rgba(255,255,255,0.03);
  border: 1.5px dashed var(--border-gold);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all 0.15s;
}
.bs-dropzone:hover, .bs-dropzone.drag {
  background: var(--gold-glow-sm);
  border-color: var(--text-primary);
  border-style: solid;
}
.bs-dropzone-preview {
  width: 56px; height: 56px; border-radius: var(--r-sm);
  background: #000;
  border: 1px solid var(--border-silver);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  color: var(--text-muted);
  flex-shrink: 0;
}
.bs-dropzone-preview img { width: 100%; height: 100%; object-fit: contain; }
.bs-dropzone-preview svg { display: block; }
.bs-dropzone-text { line-height: 1.35; font-size: 11px; color: var(--text-secondary); }
.bs-dropzone-text strong { display: block; color: #fff; font-size: 13px; font-weight: 700; margin-bottom: 2px; }

.bs-toggle { display: flex; gap: 6px; background: var(--bg-card); border: 1px solid var(--border-silver); border-radius: var(--r-full); padding: 4px; }
.bs-toggle-btn { flex: 1; padding: 7px 10px; border-radius: var(--r-full); font-size: 11px; font-weight: 700; color: var(--text-secondary); transition: all 0.2s; }
.bs-toggle-btn.active {
  background: linear-gradient(135deg, #FFFFFF, #B0B4BC);
  color: #1a1000;
}

.bs-actions { display: flex; align-items: center; gap: 10px; padding-top: 4px; }
.bs-reset-link {
  flex-shrink: 0;
  font-size: 11px; color: var(--silver-light);
  text-decoration: underline;
  padding: 8px 2px;
  font-weight: 600;
}
.bs-reset-link:hover { color: var(--text-primary); }
.bs-save-btn { flex: 1; }

/* RIGHT — live preview "phone" */
.bs-preview {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 8px 0;
}
.bs-preview-label {
  font-size: 10px; letter-spacing: 2px; color: var(--text-primary);
  font-weight: 800; text-transform: uppercase;
  text-align: center;
}
.bs-phone {
  /* live-preview scoped brand vars (overridden by updateBrandLivePreview) */
  --p-primary: #FFFFFF;
  --p-primary-light: #B0B4BC;
  --p-on-primary: #1a1000;
  --p-secondary: #0A0A0A;
  --p-header-bg: linear-gradient(180deg, rgba(0,0,0,0.9), rgba(8,8,12,0.92));
  --p-header-text: #ffffff;
  --p-header-kicker: var(--p-primary);

  width: 100%; max-width: 220px;
  aspect-ratio: 9 / 17;
  background: #000;
  border: 2px solid rgba(255,255,255,0.15);
  border-radius: 26px;
  padding: 10px 8px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.7), inset 0 2px 0 rgba(255,255,255,0.05);
  position: relative;
  overflow: hidden;
}
.bs-phone-notch {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  width: 60px; height: 14px; border-radius: 0 0 8px 8px;
  background: #000;
  z-index: 2;
}
.bs-phone-screen {
  background: #0a0a0a;
  border-radius: 18px;
  height: 100%;
  overflow: hidden;
  display: flex; flex-direction: column;
  padding: 22px 8px 6px;
}

.bs-fake-topbar {
  background: var(--p-header-bg);
  color: var(--p-header-text);
  padding: 6px 6px;
  border-radius: 8px;
  display: flex; align-items: center; gap: 6px;
  border: 1px solid color-mix(in srgb, var(--p-primary) 20%, transparent);
  margin-bottom: 6px;
  transition: background 0.25s, border-color 0.25s;
}
.bs-fake-seal {
  width: 22px; height: 22px; border-radius: 5px;
  background: linear-gradient(135deg, var(--p-primary), var(--p-primary-light));
  color: var(--p-on-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800;
  flex-shrink: 0;
  overflow: hidden;
  transition: background 0.25s, color 0.25s;
}
.bs-fake-seal img { width: 100%; height: 100%; object-fit: contain; border-radius: 4px; }
.bs-fake-seal svg { width: 100%; height: 100%; }
.bs-fake-title-wrap { min-width: 0; line-height: 1.15; flex: 1; }
.bs-fake-kicker { font-size: 6px; letter-spacing: 1px; font-weight: 800; color: var(--p-header-kicker); text-transform: uppercase; transition: color 0.25s; }
.bs-fake-title { font-size: 10px; font-weight: 700; color: var(--p-header-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 0.25s; }

.bs-fake-tabs { display: flex; gap: 3px; margin-bottom: 5px; }
.bs-fake-tab {
  flex: 1;
  padding: 4px 4px;
  font-size: 7px; font-weight: 700;
  text-align: center;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  color: #9aa;
  border: 1px solid rgba(255,255,255,0.06);
}
.bs-fake-tab.active {
  background: linear-gradient(135deg, var(--p-primary), var(--p-primary-light));
  color: var(--p-on-primary);
  border-color: transparent;
  transition: background 0.25s, color 0.25s;
}

.bs-fake-card {
  padding: 5px 7px;
  border-radius: 6px;
  background: rgba(255,255,255,0.04);
  border: 1px solid color-mix(in srgb, var(--p-primary) 28%, transparent);
  margin-bottom: 5px;
  transition: border-color 0.25s;
}
.bs-fake-kpi-lbl { font-size: 6px; letter-spacing: 1px; color: color-mix(in srgb, var(--p-primary) 80%, #fff); font-weight: 800; transition: color 0.25s; text-transform: uppercase; }
.bs-fake-kpi-val { font-size: 10px; font-weight: 800; color: #fff; letter-spacing: -0.2px; }
.bs-fake-kpi-sub { font-size: 6px; color: #9aa; }

.bs-fake-roster {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px;
  margin-bottom: 6px;
}
.bs-fake-cell {
  padding: 4px 2px; border-radius: 3px;
  text-align: center;
  font-size: 7px; font-weight: 700;
}
.bs-fake-cell.head {
  background: color-mix(in srgb, var(--p-primary) 20%, transparent);
  color: var(--p-primary);
  letter-spacing: 0.5px;
  transition: background 0.25s, color 0.25s;
}
.bs-fake-cell.shift {
  background: color-mix(in srgb, var(--p-primary) 22%, transparent);
  color: var(--p-primary);
  border: 1px solid color-mix(in srgb, var(--p-primary) 35%, transparent);
  transition: all 0.25s;
}
.bs-fake-cell.off { background: rgba(255,255,255,0.04); color: #6a6a6a; border: 1px dashed rgba(255,255,255,0.1); }

.bs-fake-btn {
  margin-top: auto;
  padding: 6px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--p-primary), var(--p-primary-light));
  color: var(--p-on-primary);
  font-size: 8px; font-weight: 800; letter-spacing: 0.3px;
  transition: background 0.25s, color 0.25s;
}
.bs-fake-footer {
  margin-top: 4px; padding-top: 4px;
  border-top: 1px solid rgba(255,255,255,0.08);
  text-align: center;
  font-size: 5px; letter-spacing: 1px; text-transform: uppercase; color: #888;
}
.bs-fake-footer strong {
  background: linear-gradient(135deg, var(--text-primary), #FFFFFF);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 1.2px;
  font-weight: 800;
}

/* Light header style variant */
.bs-phone[data-header="light"] {
  --p-header-bg: linear-gradient(180deg, #f5f5f7, #e8e8ec);
  --p-header-text: #0a0a0a;
  --p-header-kicker: color-mix(in srgb, var(--p-primary) 60%, #333);
}

/* ══════════════════════════════════════════════
   WL DASHBOARD — KPIs + search + filter + gallery
══════════════════════════════════════════════ */
.wl-dashboard-modal { max-width: 560px !important; max-height: 94dvh !important; }

.wl-kpi-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin-bottom: 14px;
}
.wl-kpi {
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(26,22,10,0.95), rgba(14,10,4,0.92));
  border: 1px solid var(--border-gold);
  border-radius: var(--r-md);
}
.wl-kpi.warn { border-color: rgba(234,179,8,0.4); background: linear-gradient(180deg, rgba(40,30,8,0.95), rgba(18,14,4,0.92)); }
.wl-kpi-lbl { font-size: 9px; letter-spacing: 1.3px; text-transform: uppercase; color: var(--text-muted); font-weight: 800; }
.wl-kpi-val {
  font-family: 'Playfair Display', serif;
  font-size: 22px; font-weight: 700;
  background: linear-gradient(135deg, var(--text-primary), #FFFFFF);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.5px;
  line-height: 1.1;
  margin-top: 3px;
}
.wl-kpi-val.warn { background: linear-gradient(135deg, #facc15, #fcd34d); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.wl-kpi-sub { font-size: 10px; color: var(--text-secondary); margin-top: 2px; }

.wl-search-row {
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 12px;
}
.wl-search {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-silver);
  border-radius: var(--r-full);
  color: var(--text-muted);
}
.wl-search input {
  flex: 1;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 13px;
  outline: none;
}
.wl-search input::placeholder { color: var(--text-muted); }
.wl-filter-pills { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.wl-filter-pills::-webkit-scrollbar { display: none; }
.wl-fp {
  flex-shrink: 0;
  padding: 6px 12px; border-radius: var(--r-full);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-silver);
  color: var(--text-secondary);
  font-size: 11px; font-weight: 700;
  transition: all 0.2s;
  white-space: nowrap;
}
.wl-fp.active {
  background: linear-gradient(135deg, #FFFFFF, #B0B4BC);
  color: #1a1000;
  border-color: transparent;
}

/* Brand gallery cards */
.wl-gallery { display: flex; flex-direction: column; gap: 10px; }
.wl-card {
  padding: 12px;
  background: linear-gradient(180deg, rgba(20,20,28,0.96), rgba(10,10,16,0.92));
  border: 1px solid var(--border-silver);
  border-radius: var(--r-lg);
  transition: all 0.2s;
  overflow: hidden;
}
.wl-card:hover { border-color: var(--border-gold); }
.wl-card.approved { border-left: 3px solid #34d399; }
.wl-card.pending  { border-left: 3px solid #facc15; }
.wl-card.suspended{ border-left: 3px solid #f87171; opacity: 0.8; }

.wl-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.wl-card-seal {
  width: 52px; height: 52px; border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-family: 'Playfair Display', serif;
  font-weight: 700; font-size: 22px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,0.4);
  position: relative;
}
.wl-card-seal svg, .wl-card-seal img { width: 100%; height: 100%; object-fit: contain; }

.wl-card-info { flex: 1; min-width: 0; }
.wl-card-name { font-family: 'Playfair Display', serif; font-size: 17px; font-weight: 700; color: #fff; letter-spacing: -0.2px; line-height: 1.1; }
.wl-card-entity { font-size: 11px; color: var(--text-primary); font-weight: 600; margin-top: 2px; }
.wl-card-meta { font-size: 10px; color: var(--text-muted); margin-top: 2px; letter-spacing: 0.3px; }

.wl-card-status {
  align-self: flex-start;
  padding: 3px 9px; border-radius: 3px;
  font-size: 9px; font-weight: 800; letter-spacing: 1.2px;
  text-transform: uppercase;
  white-space: nowrap; flex-shrink: 0;
}
.wl-card-status.approved  { background: rgba(5,150,105,0.15); color: #34d399; border: 1px solid rgba(5,150,105,0.4); }
.wl-card-status.pending   { background: rgba(234,179,8,0.15); color: #facc15; border: 1px solid rgba(234,179,8,0.4); }
.wl-card-status.suspended { background: rgba(220,38,38,0.12); color: #f87171; border: 1px solid rgba(248,113,113,0.4); }

.wl-card-palette {
  display: flex; gap: 6px; margin-bottom: 10px;
  align-items: center;
}
.wl-swatch {
  width: 18px; height: 18px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15);
  flex-shrink: 0;
}
.wl-swatch-label {
  font-size: 10px; color: var(--text-muted);
  font-family: 'Courier New', monospace;
  letter-spacing: 0.3px;
}

.wl-card-actions {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.wl-card-btn {
  flex: 1;
  padding: 7px 10px; border-radius: var(--r-full);
  font-size: 11px; font-weight: 700;
  transition: all 0.2s;
  min-width: 72px;
}
.wl-card-btn.preview { background: linear-gradient(135deg, #FFFFFF, #B0B4BC); color: #1a1000; }
.wl-card-btn.preview:hover { box-shadow: 0 4px 14px rgba(255,255,255,0.35); transform: translateY(-1px); }
.wl-card-btn.edit { background: rgba(255,255,255,0.04); border: 1px solid var(--border-silver); color: var(--silver-light); }
.wl-card-btn.edit:hover { border-color: var(--text-primary); color: var(--text-primary); }
.wl-card-btn.approve { background: rgba(5,150,105,0.15); border: 1px solid rgba(5,150,105,0.4); color: #34d399; }
.wl-card-btn.approve:hover { background: rgba(5,150,105,0.25); }
.wl-card-btn.reject { background: rgba(220,38,38,0.12); border: 1px solid rgba(248,113,113,0.4); color: #f87171; }
.wl-card-btn.deactivate { background: rgba(220,38,38,0.08); border: 1px solid rgba(248,113,113,0.3); color: #f87171; }
.wl-card-btn.restore { background: rgba(5,150,105,0.12); border: 1px solid rgba(5,150,105,0.4); color: #34d399; }

/* Brand kit expandable */
.wl-kit {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}
.wl-kit-summary {
  list-style: none;
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700;
  color: var(--text-primary);
  cursor: pointer;
  padding: 2px 0;
  letter-spacing: 0.5px;
}
.wl-kit-summary::-webkit-details-marker { display: none; }
.wl-kit-summary::before {
  content: '›';
  display: inline-block;
  font-weight: 900;
  transition: transform 0.2s;
}
.wl-kit[open] .wl-kit-summary::before { transform: rotate(90deg); }
.wl-kit-body { padding: 10px 0 2px; font-size: 11px; color: var(--text-secondary); }
.wl-kit-row { margin-bottom: 8px; }
.wl-kit-row-lbl { font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; margin-bottom: 4px; }
.wl-kit-assets { display: flex; gap: 8px; flex-wrap: wrap; }
.wl-kit-asset {
  width: 40px; height: 40px; border-radius: var(--r-sm);
  background: #fff; border: 1px solid var(--border-silver);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.wl-kit-asset svg, .wl-kit-asset img { width: 100%; height: 100%; object-fit: contain; }
.wl-kit-asset.dark { background: #000; }
.wl-kit-palette { display: flex; gap: 6px; }
.wl-kit-palette-chip {
  display: flex; flex-direction: column; align-items: center;
  font-size: 9px; color: var(--text-muted); letter-spacing: 0.3px;
}
.wl-kit-palette-chip span {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.15);
  margin-bottom: 3px;
}

/* Full-screen Preview banner — shown at top of HR/Ops when previewing */
.wl-preview-ribbon {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px;
  background: linear-gradient(135deg, var(--brand-primary, #FFFFFF), var(--brand-primary-light, #B0B4BC));
  color: var(--brand-on-primary, #1a1000);
  border-radius: var(--r-md);
  margin-bottom: 10px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.3px;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--brand-primary, #FFFFFF) 35%, transparent);
}
.wl-preview-ribbon strong { font-weight: 900; }
.wl-preview-ribbon .wl-exit {
  margin-left: auto;
  padding: 5px 10px; border-radius: var(--r-full);
  background: rgba(0,0,0,0.35);
  color: #fff;
  font-size: 10px; font-weight: 800; letter-spacing: 1px;
}
.wl-preview-ribbon .wl-approve {
  padding: 5px 10px; border-radius: var(--r-full);
  background: rgba(255,255,255,0.9);
  color: #064e3b;
  font-size: 10px; font-weight: 800; letter-spacing: 1px;
}

/* ══════════════════════════════════════════════
   HQ — premium Entity cards (HR + Ops)
══════════════════════════════════════════════ */
.hq-entity-row {
  display: grid; grid-template-columns: 1fr; gap: 12px;
  margin-bottom: 16px;
}
@media (min-width: 520px) { .hq-entity-row { grid-template-columns: 1fr 1fr; } }

.hq-entity-card {
  position: relative;
  z-index: 50;                 /* Sit above any sibling pseudo-elements or decorative glows */
  pointer-events: auto;        /* Defensive — always clickable */
  padding: 20px 18px 16px;
  border-radius: var(--r-xl);
  text-align: left;
  background: linear-gradient(180deg, rgba(24,22,14,0.96), rgba(10,10,14,0.94));
  border: 1.5px solid transparent;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.34, 1.2, 0.64, 1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 6px 22px rgba(0,0,0,0.4);
  display: flex; flex-direction: column; gap: 10px;
  cursor: pointer;
}
/* Every child of the card must not swallow clicks */
.hq-entity-card > * { pointer-events: none; }
.hq-entity-row { position: relative; z-index: 20; }
.hq-entity--hr {
  background-image:
    linear-gradient(180deg, rgba(24,22,14,0.96), rgba(10,8,4,0.94)),
    linear-gradient(135deg, #FFFFFF 0%, rgba(255,255,255,0.35) 40%, transparent 80%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  border: 1.5px solid transparent;
}
.hq-entity--ops {
  background-image:
    linear-gradient(180deg, rgba(10,18,24,0.96), rgba(4,8,14,0.94)),
    linear-gradient(135deg, var(--cyan) 0%, rgba(14,165,202,0.35) 40%, transparent 80%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  border: 1.5px solid transparent;
}

.hq-entity-glow {
  position: absolute; inset: 0; pointer-events: none;
  opacity: 0.8;
  transition: opacity 0.3s;
}
.hq-entity--hr .hq-entity-glow  { background: radial-gradient(circle at 20% 0%, rgba(255,255,255,0.25), transparent 55%); }
.hq-entity--ops .hq-entity-glow { background: radial-gradient(circle at 20% 0%, rgba(14,165,202,0.28), transparent 55%); }

.hq-entity-card:hover {
  transform: translateY(-3px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 14px 36px rgba(0,0,0,0.55);
}
.hq-entity--hr:hover  { box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 14px 36px rgba(0,0,0,0.55), 0 0 0 1px var(--text-primary), 0 0 60px rgba(255,255,255,0.22); }
.hq-entity--ops:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 14px 36px rgba(0,0,0,0.55), 0 0 0 1px var(--cyan), 0 0 60px rgba(14,165,202,0.25); }

.hq-entity-card:hover .hq-entity-glow { opacity: 1; animation: hqEntityPulse 2.4s ease-in-out infinite; }
@keyframes hqEntityPulse { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.35); } }

/* ═══════════════════════════════════════════════════
   STATIC ENTITY BANNER (Nobu Dubai placeholder)
   ═══════════════════════════════════════════════════ */
.hr-entity-static {
  display: flex !important;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  margin: 0 0 12px;
  background: linear-gradient(135deg, rgba(129,140,255,0.1), rgba(10,10,14,0.6));
  border: 1px solid var(--border-gold);
  border-radius: var(--r-lg);
  position: relative;
  overflow: hidden;
}
.hr-entity-static::before {
  content: '';
  position: absolute; top: 0; left: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, #FFFFFF, #B0B4BC, #FFFFFF);
  box-shadow: 0 0 12px rgba(129,140,255,0.5);
}
/* UI-SWEEP-2a — .hr-entity-static--cyan rules deleted: the Ops banner now
   shares the HR Hub header component verbatim (JS also strips the modifier
   classes at hydrate; the classes in index.html are inert). */

/* Circular "N" monogram */
.wl-mono-circle {
  width: 54px; height: 54px; flex-shrink: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #F4D89A, #FFFFFF 45%, #8b6a1f 100%);
  color: #1a1000;
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  font-size: 30px; line-height: 54px; text-align: center;
  letter-spacing: -1px;
  border: 2px solid var(--text-primary);
  box-shadow:
    0 2px 10px rgba(0,0,0,0.45),
    0 0 16px rgba(129,140,255,0.45),
    inset 0 2px 4px rgba(255,255,255,0.25),
    inset 0 -2px 4px rgba(0,0,0,0.2);
  text-shadow: 0 1px 1px rgba(255,255,255,0.35);
  position: relative;
}
.wl-mono-circle::after {
  content: '';
  position: absolute; inset: 3px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.25);
  pointer-events: none;
}
.wl-brand-info {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 1px;
}
.wl-brand-name {
  font-family: 'Playfair Display', serif;
  font-size: 22px; font-weight: 900; color: #fff;
  letter-spacing: -0.3px; line-height: 1.1;
}
.wl-brand-role {
  font-size: 11px; font-weight: 800; letter-spacing: 2px;
  color: var(--text-primary); text-transform: uppercase;
  margin-top: 3px;
}
.wl-powered {
  font-size: 9px; color: var(--text-muted);
  letter-spacing: 0.4px; font-weight: 500;
  text-align: right; align-self: flex-end;
  padding-bottom: 2px;
}
.wl-powered strong {
  color: var(--text-primary); font-weight: 700;
  letter-spacing: 0.2px;
}
@media (max-width: 420px) {
  .wl-brand-name { font-size: 18px; }
  .wl-mono-circle { width: 46px; height: 46px; font-size: 26px; line-height: 46px; }
  .wl-powered { font-size: 8px; }
}

/* White-label preview bar (static) */
.wl-preview-static {
  display: flex !important;
  align-items: center; gap: 10px;
  padding: 8px 14px; margin-bottom: 10px;
  background: linear-gradient(90deg, rgba(129,140,255,0.08), rgba(255,255,255,0.02));
  border: 1px solid var(--border-gold);
  border-radius: var(--r-md);
  font-size: 11px; color: var(--text-secondary);
}
.wl-preview-static .wl-pv-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 0 8px rgba(129,140,255,0.6);
  animation: wlPvDot 1.6s ease-in-out infinite;
}
@keyframes wlPvDot {
  0%,100% { opacity: 1; transform: scale(1); }
  50%     { opacity: 0.5; transform: scale(1.2); }
}
.wl-preview-static .wl-pv-kicker {
  font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--text-primary); font-weight: 800; flex: 1;
}
.wl-preview-static .wl-pv-btn {
  font-size: 10px; font-weight: 800;
  padding: 5px 12px; border-radius: var(--r-full);
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border-silver);
  color: var(--text-secondary);
  cursor: pointer; transition: all 0.15s;
}
.wl-preview-static .wl-pv-btn:hover {
  border-color: var(--border-gold); color: var(--text-primary);
}
.wl-preview-static--cyan {
  background: linear-gradient(90deg, rgba(14,165,202,0.1), rgba(255,255,255,0.02));
  border-color: var(--border-cyan);
}
.wl-preview-static--cyan .wl-pv-dot { background: var(--cyan); box-shadow: 0 0 8px rgba(14,165,202,0.6); }
.wl-preview-static--cyan .wl-pv-kicker { color: #7dd3fc; }

/* ═══════════════════════════════════════════════════
   STATIC STAFF POPUP (roster row → weekly schedule)
   ═══════════════════════════════════════════════════ */
.static-staff-overlay {
  position: fixed; inset: 0; z-index: 9000;
  display: none;
  background: rgba(5,7,12,0.82);
  backdrop-filter: blur(14px);
  align-items: center; justify-content: center;
  padding: 20px;
  pointer-events: none;
}
.static-staff-overlay.show {
  display: flex;
  pointer-events: auto;
  animation: sssFade 0.22s ease both;
}
@keyframes sssFade { from { opacity: 0; } to { opacity: 1; } }

.static-staff-modal {
  position: relative;
  width: 100%; max-width: 460px;
  max-height: 92vh; overflow-y: auto;
  background: linear-gradient(180deg, #12141a, #0a0d12);
  border: 1px solid var(--border-gold);
  border-radius: var(--r-xl);
  box-shadow:
    0 20px 80px rgba(0,0,0,0.6),
    0 0 0 1px rgba(129,140,255,0.12),
    0 0 60px rgba(129,140,255,0.2);
  animation: sssIn 0.28s cubic-bezier(.2,.9,.3,1.2) both;
}
@keyframes sssIn {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

.static-staff-close {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--border-silver);
  color: var(--text-secondary);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.15s;
}
.static-staff-close:hover {
  background: rgba(248,113,113,0.15);
  border-color: rgba(248,113,113,0.4);
  color: #f87171;
}

.sss-head {
  padding: 28px 20px 16px;
  text-align: center;
  background: linear-gradient(180deg, rgba(129,140,255,0.1), transparent);
  border-bottom: 1px solid rgba(129,140,255,0.15);
}
.sss-photo-ring {
  width: 96px; height: 96px;
  margin: 0 auto 12px;
  padding: 3px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FFFFFF, #B0B4BC, #FFFFFF);
  box-shadow: 0 0 24px rgba(129,140,255,0.5);
}
.sss-photo-ring img {
  width: 100%; height: 100%; border-radius: 50%;
  object-fit: cover;
  border: 3px solid #0a0d12;
}
.sss-name {
  font-family: 'Playfair Display', serif;
  font-size: 22px; font-weight: 900; color: #fff;
  letter-spacing: -0.3px; line-height: 1.15;
}
.sss-role {
  font-size: 12px; font-weight: 700; color: var(--text-primary);
  letter-spacing: 0.3px; margin-top: 3px;
}
.sss-range {
  font-size: 10px; letter-spacing: 1.5px; color: var(--text-muted);
  text-transform: uppercase; font-weight: 700;
  margin-top: 10px;
}

.sss-table-wrap {
  padding: 16px 20px 0;
}
.sss-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: 12px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border-silver);
  border-radius: var(--r-md);
  overflow: hidden;
}
.sss-table thead th {
  background: #12141a; color: var(--text-primary);
  font-size: 9px; letter-spacing: 1px; font-weight: 800; text-transform: uppercase;
  padding: 9px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border-silver);
}
.sss-table thead th.num { text-align: right; }
.sss-table tbody td {
  padding: 9px 12px;
  color: var(--text-secondary);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.sss-table tbody tr:last-child td { border-bottom: none; }
.sss-table tbody td.num { text-align: right; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.sss-table tbody td strong { color: #fff; font-weight: 700; }
.sss-table tr.is-off td { background: rgba(255,255,255,0.015); color: var(--text-muted); }
.sss-table tr.is-off td strong { color: var(--text-muted); }
.sss-shift-cell { font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.sss-off {
  display: inline-block;
  padding: 2px 8px; border-radius: var(--r-full);
  background: rgba(148,163,184,0.15); color: #94a3b8;
  font-size: 10px; font-weight: 800; letter-spacing: 1px;
}

.sss-totals {
  padding: 16px 20px;
  display: flex; flex-direction: column; gap: 8px;
}
.sss-total-line {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 10px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-silver);
  border-radius: var(--r-md);
  font-size: 12px; color: var(--text-secondary);
}
.sss-total-line strong {
  font-family: 'Playfair Display', serif;
  font-size: 18px; color: #fff; font-weight: 800;
}
.sss-total-line.sss-pay {
  background: linear-gradient(135deg, rgba(129,140,255,0.15), rgba(129,140,255,0.04));
  border-color: var(--border-gold);
}
.sss-total-line.sss-pay strong {
  background: linear-gradient(135deg, var(--text-primary), #FFFFFF);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 20px;
}
.sss-total-line em {
  font-size: 10px; font-style: normal; color: var(--text-muted);
  letter-spacing: 0.2px;
}

.sss-actions {
  display: flex; gap: 8px; padding: 0 20px 14px;
}
.sss-btn {
  flex: 1;
  padding: 12px;
  border-radius: var(--r-md);
  font-size: 12px; font-weight: 800; letter-spacing: 0.3px;
  cursor: pointer; transition: all 0.15s;
  border: 1px solid transparent;
}
.sss-btn.ghost {
  background: rgba(255,255,255,0.05);
  border-color: var(--border-silver);
  color: var(--text-secondary);
}
.sss-btn.ghost:hover {
  border-color: var(--border-gold); color: #fff;
}
.sss-btn.gold {
  background: linear-gradient(135deg, #FFFFFF, #B0B4BC);
  color: #1a1000;
  box-shadow: 0 2px 10px rgba(129,140,255,0.35);
}
.sss-btn.gold:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(129,140,255,0.55);
}

.sss-foot {
  padding: 12px 20px 18px;
  text-align: center;
  font-size: 9px; letter-spacing: 0.4px;
  color: var(--text-muted);
  border-top: 1px solid rgba(255,255,255,0.04);
  display: flex; align-items: center; justify-content: center; gap: 5px;
}
.sss-foot strong { color: var(--text-primary); font-weight: 700; }
.sss-px {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 3px;
  background: linear-gradient(135deg, #FFFFFF, #B0B4BC);
  color: #1a1000;
  font-family: 'Playfair Display', serif;
  font-weight: 900; font-size: 9px;
  letter-spacing: -1px;
}

@media print {
  body * { visibility: hidden; }
  .static-staff-modal, .static-staff-modal * { visibility: visible; }
  .static-staff-overlay { position: static; background: #fff; }
  .static-staff-modal { background: #fff; color: #000; border: none; box-shadow: none; }
  .sss-name, .sss-role, .sss-range { color: #000 !important; }
  .sss-table thead th { background: #f5f5f5; color: #000; }
  .sss-table tbody td { color: #000; }
  .sss-total-line strong { color: #000 !important; -webkit-text-fill-color: #000 !important; }
  .static-staff-close, .sss-actions { display: none; }
}

/* ═══════════════════════════════════════════════════
   STATIC LEAVE — hardcoded
   ═══════════════════════════════════════════════════ */
.sl-pending { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.sl-pending-card {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-silver);
  border-radius: var(--r-md);
}
.sl-pending-card img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 1.5px solid var(--border-gold); flex-shrink: 0; }
.sl-pending-info { flex: 1; min-width: 0; }
.sl-pending-name { font-size: 13px; font-weight: 700; color: #fff; }
.sl-pending-meta { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.sl-pending-act { display: flex; gap: 6px; flex-shrink: 0; }
.sl-approve, .sl-reject {
  font-size: 10px; font-weight: 800; letter-spacing: 0.3px;
  padding: 5px 10px; border-radius: var(--r-full);
  cursor: pointer; transition: all 0.15s;
}
.sl-approve { background: rgba(34,197,94,0.15); color: #4ade80; border: 1px solid rgba(34,197,94,0.35); }
.sl-reject  { background: rgba(248,113,113,0.15); color: #f87171; border: 1px solid rgba(248,113,113,0.35); }

.sl-cal-card {
  padding: 14px; margin-bottom: 16px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border-silver);
  border-radius: var(--r-md);
}
.sl-cal-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.sl-cal-head strong { font-family: 'Playfair Display', serif; font-size: 16px; color: #fff; font-weight: 800; }
.sl-cal-head span { font-size: 10px; color: var(--text-muted); letter-spacing: 0.3px; }
.sl-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.sl-cal-dn { font-size: 9px; letter-spacing: 1px; color: var(--text-muted); font-weight: 700; text-transform: uppercase; text-align: center; padding: 4px 0; }
.sl-cal-d {
  min-height: 60px;
  border-radius: 6px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  padding: 4px;
  position: relative;
  display: flex; flex-direction: column; gap: 2px;
  font-size: 11px; color: #fff;
}
.sl-cal-d.sl-today { border-color: var(--text-primary); box-shadow: inset 0 0 0 1px var(--text-primary); }
.sl-cal-d.sl-ann   { background: rgba(52,211,153,0.18); border-color: #34d399; }
.sl-cal-num { font-size: 11px; font-weight: 700; }
.sl-cal-stamp {
  position: absolute; top: 3px; right: 3px;
  width: 14px; height: 14px; border-radius: 50%;
  background: rgba(52,211,153,0.9); color: #062715;
  font-size: 9px; font-weight: 900; line-height: 14px; text-align: center;
}
.sl-cal-chip {
  font-size: 8px; font-weight: 800; padding: 1px 4px;
  border-radius: 3px; color: #0a0d13;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sl-cal-chip.sl-ann  { background: #34d399; }
.sl-cal-chip.sl-sick { background: #fb923c; }
.sl-cal-chip.sl-emer { background: #f87171; }
.sl-cal-chip.sl-day  { background: #60a5fa; }
.sl-cal-legend {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px;
  font-size: 10px; color: var(--text-muted);
}
.sl-cal-legend span { display: inline-flex; align-items: center; gap: 4px; }
.sl-sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.sl-sw.sl-ann  { background: #34d399; }
.sl-sw.sl-sick { background: #fb923c; }
.sl-sw.sl-emer { background: #f87171; }
.sl-sw.sl-day  { background: #60a5fa; }

.sl-bal-head {
  font-size: 10px; letter-spacing: 1.5px; color: var(--text-primary);
  text-transform: uppercase; font-weight: 800; margin: 14px 0 8px;
}
.sl-bal-list { display: flex; flex-direction: column; gap: 10px; }
.sl-bal {
  display: grid; grid-template-columns: 38px 1fr; align-items: center; gap: 10px;
  padding: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-silver);
  border-radius: var(--r-md);
}
.sl-bal img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border-silver); }
.sl-bal-name { font-size: 12px; font-weight: 700; color: #fff; }
.sl-bal-name span { display: block; font-size: 10px; color: var(--text-muted); font-weight: 500; margin-top: 1px; }
.sl-bal-bars { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-top: 4px; }
.sl-bar { display: flex; flex-direction: column; gap: 3px; }
.sl-bar > span:first-child { font-size: 9px; color: var(--text-muted); letter-spacing: 0.3px; }
.sl-bar strong { font-size: 11px; color: #fff; font-weight: 800; }
.sl-bar-t { height: 6px; border-radius: 3px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.06); overflow: hidden; }
.sl-bar-f { height: 100%; border-radius: 3px; transition: width 0.4s ease; }
.sl-bar-f.sl-ann  { background: linear-gradient(90deg, #22c55e, #34d399); }
.sl-bar-f.sl-sick { background: linear-gradient(90deg, #f97316, #fb923c); }
.sl-bar-f.sl-emer { background: linear-gradient(90deg, #dc2626, #f87171); }
.sl-bar-f.is-high { box-shadow: 0 0 6px currentColor; }

/* ═══════════════════════════════════════════════════
   STATIC TEAM — hardcoded
   ═══════════════════════════════════════════════════ */
.st-dept { margin-bottom: 16px; }
.st-dept-h {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; margin-bottom: 10px;
  background: linear-gradient(90deg, rgba(129,140,255,0.1), transparent);
  border-left: 3px solid var(--text-primary);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.st-dept-h span { font-size: 18px; }
.st-dept-h strong { font-family: 'Playfair Display', serif; font-size: 15px; color: #fff; font-weight: 800; flex: 1; }
.st-dept-h em { font-size: 10px; color: var(--text-muted); font-style: normal; letter-spacing: 0.5px; }
.st-dept.st-dept--admin .st-dept-h {
  background: linear-gradient(90deg, rgba(147,197,253,0.1), transparent);
  border-left-color: #60a5fa;
}
.st-dept-grid { display: flex; flex-direction: column; gap: 6px; }
.st-card {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-silver);
  border-radius: var(--r-md);
  cursor: pointer; transition: all 0.15s;
}
.st-card:hover { border-color: var(--border-gold); background: var(--gold-glow-sm); }
.st-card img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 1.5px solid var(--border-gold); flex-shrink: 0; }
.st-card > div { flex: 1; min-width: 0; }
.st-card strong { display: block; font-size: 13px; color: #fff; font-weight: 700; }
.st-card > div > span { display: block; font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.st-tag {
  display: inline-block; margin-top: 4px; margin-right: 4px;
  font-size: 9px; font-style: normal; letter-spacing: 0.3px;
  padding: 2px 7px; border-radius: var(--r-full);
  font-weight: 800;
}
.st-tag.st-lead {
  background: linear-gradient(135deg, #FFFFFF, #B0B4BC); color: #1a1000;
}
.st-tag.st-onduty {
  background: linear-gradient(135deg, #FFFFFF, #B0B4BC); color: #1a1000;
  box-shadow: 0 0 8px rgba(129,140,255,0.45);
  animation: stOnDuty 2.2s ease-in-out infinite;
}
@keyframes stOnDuty {
  0%,100% { box-shadow: 0 0 6px rgba(129,140,255,0.4); }
  50%     { box-shadow: 0 0 12px rgba(129,140,255,0.75); }
}
.st-tag.st-access {
  background: rgba(96,165,250,0.14); color: #93c5fd;
  border: 1px solid rgba(96,165,250,0.3);
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════
   STATIC DOCS — hardcoded
   ═══════════════════════════════════════════════════ */
.sd-alert {
  padding: 12px 14px; margin-bottom: 12px;
  background: linear-gradient(135deg, rgba(248,113,113,0.1), rgba(251,146,60,0.06));
  border: 1px solid rgba(248,113,113,0.3);
  border-radius: var(--r-md);
  color: var(--text-secondary); font-size: 12px;
}
.sd-alert strong { color: #fca5a5; }
.sd-alert ul { margin: 8px 0 0; padding-left: 20px; font-size: 11px; }
.sd-alert li { margin-bottom: 2px; }
.sd-warn { color: #fb923c; font-weight: 700; }
.sd-staff-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.sd-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-silver);
  border-radius: var(--r-md);
  cursor: pointer; text-align: left;
  transition: all 0.15s;
}
.sd-row:hover { border-color: var(--border-gold); background: var(--gold-glow-sm); }
.sd-row img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 1.5px solid var(--border-gold); flex-shrink: 0; }
.sd-row > div { flex: 1; min-width: 0; }
.sd-row strong { display: block; font-size: 13px; color: #fff; font-weight: 700; }
.sd-row > div > span { display: block; font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.sd-row em { font-size: 22px; color: var(--text-muted); font-style: normal; flex-shrink: 0; }
.sd-types-note {
  padding: 10px 14px;
  background: rgba(129,140,255,0.04);
  border: 1px dashed var(--border-gold);
  border-radius: var(--r-md);
  font-size: 11px; color: var(--text-muted);
  line-height: 1.7;
}
.sd-types-note strong { color: var(--text-primary); display: block; margin-bottom: 4px; }

/* ═══════════════════════════════════════════════════
   STATIC ROSTER — hardcoded, no JS dependency
   ═══════════════════════════════════════════════════ */
.rs-week-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 14px; margin-bottom: 10px;
  background: linear-gradient(90deg, rgba(129,140,255,0.08), rgba(255,255,255,0.02));
  border: 1px solid var(--border-silver);
  border-radius: var(--r-md);
}
.rs-nav {
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border-silver);
  color: var(--text-primary); font-size: 18px; font-weight: 800;
  cursor: pointer; transition: all 0.15s;
}
.rs-nav:hover { background: var(--gold-glow-sm); border-color: var(--border-gold); }
.rs-week-lbl { font-family: 'Playfair Display', serif; font-size: 14px; font-weight: 700; color: #fff; flex: 1; text-align: center; }

.rs-dept-tabs {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.rs-dept {
  font-size: 12px; font-weight: 700; letter-spacing: 0.3px;
  padding: 8px 14px; border-radius: var(--r-full);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-silver);
  color: var(--text-secondary); cursor: pointer;
  transition: all 0.15s;
}
.rs-dept:hover { border-color: var(--border-gold); color: #fff; }
.rs-dept.active {
  background: linear-gradient(135deg, #FFFFFF, #B0B4BC);
  color: #1a1000; border-color: var(--text-primary);
  box-shadow: 0 2px 10px rgba(129,140,255,0.35);
}

.rs-dept-pane { margin-bottom: 12px; display: block; }
.rs-dept-pane[hidden] { display: none; }
/* The whole roster panel must be visible when the roster tab is active,
   regardless of any JS state. Reinforce with !important so nothing overrides. */
.hr-panel[data-hrpane="roster"]:not([hidden]) { display: block !important; }
.rs-table-wrap {
  overflow-x: auto;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border-silver);
  border-radius: var(--r-md);
}
.rs-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: 11px;
  min-width: 720px;
}
.rs-table thead th {
  background: #12141a; color: var(--text-primary);
  font-size: 9px; letter-spacing: 0.6px; font-weight: 800; text-transform: uppercase;
  padding: 10px 8px; text-align: center; white-space: nowrap;
  border-bottom: 1px solid var(--border-silver);
}
.rs-table thead th.rs-name-col { text-align: left; padding-left: 12px; min-width: 180px; }
.rs-table tbody td {
  padding: 8px 6px; text-align: center; white-space: nowrap;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-weight: 700; letter-spacing: 0.2px;
}
.rs-table tbody td.rs-name-col { text-align: left; padding: 6px 12px; }
.rs-table tbody tr:last-child td { border-bottom: none; }
.rs-table tbody tr:hover td { background: rgba(129,140,255,0.04); }

.rs-staff {
  display: flex; align-items: center; gap: 10px;
  background: transparent; border: none; cursor: pointer;
  padding: 4px 0; width: 100%;
  text-align: left;
  color: inherit;
  transition: all 0.15s;
  pointer-events: auto !important;
  position: relative; z-index: 2;
}
.rs-staff * { pointer-events: none; }        /* children don't absorb the click */
.rs-staff:hover { transform: translateX(2px); }
.rs-staff:hover strong { color: var(--text-primary); }
.rs-name-col { pointer-events: auto; }
.rs-staff img {
  width: 34px; height: 34px; border-radius: 50%; object-fit: cover;
  border: 1.5px solid var(--border-gold); flex-shrink: 0;
}
.rs-staff span { display: flex; flex-direction: column; min-width: 0; }
.rs-staff strong { font-size: 12px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rs-staff em {
  font-size: 10px; color: var(--text-muted); font-style: normal;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Shift cell tints */
.rs-am  { background: rgba(96,165,250,0.14); color: #93c5fd; border-radius: 4px; }
.rs-pm  { background: rgba(129,140,255,0.14); color: var(--text-primary); border-radius: 4px; }
.rs-nt  { background: rgba(167,139,250,0.14); color: #c4b5fd; border-radius: 4px; }
.rs-off { background: rgba(148,163,184,0.1);  color: #64748b; border-radius: 4px; font-weight: 800; letter-spacing: 1px; }

/* Summary */
.rs-summary {
  margin-top: 10px; padding: 12px 14px;
  background: linear-gradient(135deg, rgba(129,140,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid var(--border-gold);
  border-radius: var(--r-md);
}
.rs-summary-head { font-size: 10px; letter-spacing: 1.5px; color: var(--text-primary); text-transform: uppercase; font-weight: 800; margin-bottom: 8px; }
.rs-summary-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.rs-chip {
  font-size: 10px; font-weight: 700;
  padding: 4px 10px; border-radius: var(--r-full);
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border-silver);
  color: var(--text-secondary);
}
.rs-cost {
  font-size: 12px; color: var(--text-secondary);
  padding-top: 8px; border-top: 1px dashed rgba(129,140,255,0.25);
}
.rs-cost strong {
  font-family: 'Playfair Display', serif;
  font-size: 16px; color: var(--text-primary); font-weight: 800;
  margin-left: 4px;
}

/* Legend */
.rs-legend {
  display: flex; flex-wrap: wrap; gap: 12px;
  padding: 10px 14px; margin: 8px 0 12px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border-silver);
  border-radius: var(--r-md);
  font-size: 10px; color: var(--text-muted);
}
.rs-legend span { display: inline-flex; align-items: center; gap: 6px; }
.rs-sw {
  display: inline-block; width: 14px; height: 14px; border-radius: 3px;
}

/* Click-confirmation gold flash — proves the click registered */
.hq-entity-card.hq-entity-flashing {
  animation: hqEntityFlash 1s ease-out;
}
@keyframes hqEntityFlash {
  0%   { box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 0 0 0 rgba(129,140,255,0.0), 0 0 0 rgba(129,140,255,0); background-color: rgba(129,140,255,0.0); }
  15%  { box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 0 0 3px rgba(129,140,255,0.85), 0 0 50px rgba(129,140,255,0.7); background-color: rgba(129,140,255,0.35); }
  40%  { box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 0 0 2px rgba(129,140,255,0.6),  0 0 40px rgba(129,140,255,0.5); background-color: rgba(129,140,255,0.22); }
  100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 0 0 0 rgba(129,140,255,0),      0 0 0 rgba(129,140,255,0);     background-color: transparent; }
}

.hq-entity-icon-wrap {
  position: relative; z-index: 1;
  width: 60px; height: 60px; border-radius: var(--r-lg);
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
}
.hq-entity--hr .hq-entity-icon-wrap  {
  color: var(--text-primary);
  background: linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.04));
  border-color: var(--border-gold);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.hq-entity--ops .hq-entity-icon-wrap {
  color: var(--cyan);
  background: linear-gradient(135deg, rgba(14,165,202,0.22), rgba(14,165,202,0.04));
  border-color: var(--border-cyan);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.hq-entity-icon { filter: drop-shadow(0 0 10px currentColor); }

.hq-entity-body { position: relative; z-index: 1; }
.hq-entity-sub-badge {
  display: inline-block;
  padding: 3px 8px; border-radius: 3px;
  font-size: 9px; font-weight: 900; letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.hq-entity-sub-badge.gold { background: linear-gradient(135deg, #FFFFFF, #B0B4BC); color: #1a1000; }
.hq-entity-sub-badge.cyan { background: linear-gradient(135deg, var(--cyan), #7dd3fc); color: #042026; }

.hq-entity-title {
  font-family: 'Playfair Display', serif;
  font-size: 22px; font-weight: 700;
  color: #fff;
  letter-spacing: -0.4px;
  line-height: 1;
  margin-bottom: 4px;
}
.hq-entity-sub {
  font-size: 12px; font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: 0.3px;
  margin-bottom: 8px;
}
.hq-entity-stats {
  font-size: 11px; color: var(--text-secondary);
  padding: 8px 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.hq-entity-stats strong {
  color: #fff;
  font-weight: 700;
}
.hq-entity--hr .hq-entity-stats  { border-color: var(--border-gold); background: var(--gold-glow-sm); }
.hq-entity--ops .hq-entity-stats { border-color: var(--border-cyan); background: rgba(14,165,202,0.08); }

.hq-entity-cta {
  position: relative; z-index: 1;
  padding: 10px 14px; border-radius: var(--r-full);
  font-size: 12px; font-weight: 800; letter-spacing: 0.3px;
  text-align: center;
  margin-top: auto;
}
.hq-entity-cta.gold {
  background: linear-gradient(135deg, #FFFFFF, #B0B4BC);
  color: #1a1000;
  box-shadow: 0 3px 14px rgba(255,255,255,0.35);
}
.hq-entity-cta.cyan {
  background: linear-gradient(135deg, var(--cyan), #7dd3fc);
  color: #042026;
  box-shadow: 0 3px 14px rgba(14,165,202,0.35);
}

/* Entity Gate modal */
.entity-gate-modal { text-align: center; padding-top: 32px !important; max-width: 420px !important; }
.eg-icon {
  font-size: 42px;
  margin-bottom: 10px;
  filter: drop-shadow(0 4px 16px rgba(255,255,255,0.35));
}
.eg-title {
  font-family: 'Playfair Display', serif;
  font-size: 22px; font-weight: 700; color: #fff;
  letter-spacing: -0.3px; line-height: 1.15;
  margin-bottom: 6px;
}
.eg-sub { font-size: 13px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 16px; }
.eg-feature-list {
  text-align: left;
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 16px;
}
.eg-feature {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 12px; color: var(--text-secondary);
  line-height: 1.4;
  padding: 8px 10px;
  background: rgba(255,255,255,0.02);
  border-radius: var(--r-sm);
}
.eg-feature::before { content: '✓'; color: var(--text-primary); font-weight: 900; flex-shrink: 0; }
.eg-feature strong { color: #fff; font-weight: 700; }

.eg-price-card {
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(32,24,8,0.95), rgba(14,10,4,0.92));
  border: 1px solid var(--border-gold);
  border-radius: var(--r-lg);
  margin-bottom: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 0 30px rgba(255,255,255,0.1);
}
.eg-price-eyebrow { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-primary); font-weight: 800; }
.eg-price-amt {
  font-family: 'Playfair Display', serif;
  font-size: 16px; font-weight: 600;
  color: rgba(255,255,255,0.85);
  margin: 4px 0 2px;
}
.eg-price-amt strong {
  font-size: 36px; font-weight: 700;
  background: linear-gradient(135deg, var(--text-primary), #FFFFFF);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -1.5px;
}
.eg-price-amt span { font-size: 13px; color: var(--text-secondary); font-weight: 500; }
.eg-price-sub { font-size: 11px; color: var(--text-muted); }
.eg-actions { display: flex; gap: 10px; }
.eg-actions button { flex: 1; }

.entity-gate-modal.cyan-mode .eg-price-card { border-color: var(--border-cyan); background: linear-gradient(135deg, rgba(8,20,28,0.95), rgba(4,10,16,0.92)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 0 30px rgba(14,165,202,0.12); }
.entity-gate-modal.cyan-mode .eg-price-eyebrow { color: var(--cyan); }
.entity-gate-modal.cyan-mode .eg-price-amt strong { background: linear-gradient(135deg, var(--cyan), #7dd3fc); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.entity-gate-modal.cyan-mode .eg-feature::before { color: var(--cyan); }
.entity-gate-modal.cyan-mode .btn-gold { background: linear-gradient(135deg, var(--cyan), #7dd3fc); color: #042026; box-shadow: 0 4px 16px rgba(14,165,202,0.35); }

/* Back-to-HQ pill (Learning Library, HR Hub, Ops Oasis) */
.back-to-hq {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px 6px 10px;
  border-radius: var(--r-full);
  background: var(--gold-glow-sm);
  border: 1px solid var(--border-gold);
  color: var(--text-primary);
  font-size: 12px; font-weight: 700; letter-spacing: 0.3px;
  margin-bottom: 12px;
  transition: all 0.2s;
  align-self: flex-start;
}
.back-to-hq:hover { background: var(--gold-glow); color: var(--text-primary); border-color: var(--text-primary); transform: translateX(-2px); }
.back-to-hq svg { color: currentColor; }
@media print { .back-to-hq { display: none !important; } }

/* Print-friendly roster (PDF) */
@media print {
  body { background: #fff !important; color: #000 !important; }
  .top-bar, .bottom-nav, .hr-main-tabs, .hr-actions-row, .hr-dept-tabs, .hr-week-nav button, .hr-entity-edit, #app .top-bar-actions, .wl-preview-bar { display: none !important; }
  .screen { display: block !important; }
  .hr-roster, .hr-summary-row { background: #fff !important; color: #000 !important; }
  .hr-shift.morning { background: #dbeafe !important; color: #1e3a8a !important; border-color: #93c5fd !important; }
  .hr-shift.afternoon { background: #fef3c7 !important; color: #78350f !important; border-color: #fcd34d !important; }
  .hr-shift.night { background: #ede9fe !important; color: #4c1d95 !important; border-color: #c4b5fd !important; }
  .hr-shift.off { background: #f3f4f6 !important; color: #6b7280 !important; }
  .hr-shift.leave { background: #d1fae5 !important; color: #065f46 !important; }
  .hr-shift.event { background: #fee2e2 !important; color: #991b1b !important; }
  /* Brand header stays with brand color for print */
  [data-scope="hr"] .hr-entity-banner,
  [data-scope="ops"] .hr-entity-banner {
    background: #fff !important;
    border: 2px solid var(--brand-primary, #FFFFFF) !important;
    color: #000 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  [data-scope="hr"] .hr-entity-name,
  [data-scope="ops"] .hr-entity-name { color: #000 !important; }
  [data-scope="hr"] .hr-entity-sub,
  [data-scope="ops"] .hr-entity-sub { color: #333 !important; }
  .hr-entity-seal img { filter: none !important; }
  /* Print footer watermark — mandatory */
  .wl-footer { color: #666 !important; border-top: 1px solid #ccc !important; }
  .wl-footer strong { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; background: none !important; }
  /* Brand tint bars/titles in print */
  [data-scope="hr"] .hr-roster-head { background: color-mix(in srgb, var(--brand-primary, #FFFFFF) 18%, white) !important; color: #000 !important; }
}
/* .hero-brand-mark rules now handled by .brand-logo-img--hero above */

.profile-brand-footer {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 28px 16px 12px;
  border-top: 1px solid var(--border-silver);
  margin-top: 24px;
  opacity: 0.85;
}
.profile-brand-tag {
  font-size: 11px; font-weight: 500; letter-spacing: 3px;
  text-transform: uppercase;
  background: var(--chrome-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.profile-brand-copy { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* Brand tagline */
.brand-tagline {
  font-size: 11px; font-weight: 500; letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--silver);
  background: var(--chrome-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-top: 6px;
}
.brand-tagline--lg { font-size: 13px; letter-spacing: 4px; margin-top: 10px; }

/* ─── Page Router ────────────────────────────── */
.page { display: none; min-height: 100vh; position: relative; }
.page.active { display: block; }

/* ══════════════════════════════════════════════
   LANDING PAGE
══════════════════════════════════════════════ */
#page-landing { overflow: hidden; }

.landing-bg {
  position: fixed; inset: 0; z-index: 0;
  background: radial-gradient(ellipse at 20% 20%, rgba(255,255,255,0.08) 0%, transparent 60%),
              radial-gradient(ellipse at 80% 80%, rgba(14,165,202,0.06) 0%, transparent 60%),
              var(--bg-base);
}
.landing-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
}
.landing-glow {
  position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none;
}
.glow-1 { width: 600px; height: 600px; background: rgba(255,255,255,0.06); top: -200px; left: -200px; }
.glow-2 { width: 500px; height: 500px; background: rgba(14,165,202,0.05); bottom: -100px; right: -100px; }
.glow-3 { width: 400px; height: 400px; background: rgba(255,255,255,0.04); top: 40%; left: 30%; }

/* Landing Nav */
.landing-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  backdrop-filter: blur(20px);
  background: rgba(7,9,15,0.7);
  border-bottom: 1px solid var(--border);
}
.landing-nav-inner {
  max-width: 1200px; margin: 0 auto;
  padding: 16px 24px;
  display: flex; align-items: center; justify-content: space-between;
}
.brand-logo {
  display: flex; align-items: center; gap: 10px;
}
.brand-name {
  font-size: 18px; font-weight: 700; letter-spacing: -0.3px;
  background: linear-gradient(135deg, var(--text-primary), #FFFFFF);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.landing-nav-actions { display: flex; gap: 10px; align-items: center; }

/* Buttons */
.btn-ghost {
  padding: 9px 18px; border-radius: var(--r-full);
  font-size: 14px; font-weight: 500; color: var(--text-secondary);
  transition: all 0.2s;
}
.btn-ghost:hover { color: var(--text-primary); background: var(--bg-input); }

/* BTN-1 — app-wide Apple-quiet button system. The legacy --gold/--gold-light
   tokens are actually indigo (#6366FF — pre-rebrand palette drift); button
   classes no longer consume them. PRIMARY = soft-platinum pill (the landing
   Get Started / .pl35c-generate-btn precedent); SECONDARY = transparent +
   hairline; DESTRUCTIVE = the existing quiet terracotta. No saturated fills. */
:root {
  --btn-primary-grad: linear-gradient(180deg, #F5F5F7, #D8DADF);
  --btn-primary-fg: #131417;
  --btn-hairline: rgba(255,255,255,0.14);
}
.btn-gold {
  padding: 9px 20px; border-radius: var(--r-full);
  font-size: 14px; font-weight: 600;
  background: var(--btn-primary-grad);
  color: var(--btn-primary-fg);
  border: 0;
  transition: all 0.2s;
  box-shadow: 0 2px 12px rgba(0,0,0,0.35);
}
.btn-gold:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,0,0,0.45); }

/* PL-DEPOSIT-UX-POLISH (Day 15 #56) — disabled visual state for
   .btn-gold + .btn-outline. Native HTML disabled attribute already
   blocks click events; these selectors add the missing visual cue
   so users see the button is unavailable. pointer-events: none is
   belt-and-suspenders if any JS path strips the disabled attribute
   without clearing the state. */
.btn-gold:disabled,
.btn-gold[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
  transform: none;
}
.btn-gold:disabled:hover,
.btn-gold[disabled]:hover {
  transform: none;
  box-shadow: none;
}
.btn-outline:disabled,
.btn-outline[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-primary {
  padding: 14px 28px; border-radius: var(--r-full);
  font-size: 15px; font-weight: 600;
  background: var(--btn-primary-grad);
  color: var(--btn-primary-fg);
  border: 0;
  transition: all 0.2s;
  box-shadow: 0 2px 14px rgba(0,0,0,0.4);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 18px rgba(0,0,0,0.5); }
.btn-primary:active { transform: translateY(0); }

/* BTN-1 — SECONDARY: transparent, hairline, muted */
.btn-outline {
  padding: 13px 24px; border-radius: var(--r-full);
  font-size: 15px; font-weight: 600;
  border: 1px solid var(--btn-hairline);
  background: transparent;
  color: #B9BDC4;
  transition: all 0.2s;
}
.btn-outline:hover {
  border-color: rgba(255,255,255,0.28);
  color: #fff;
}

/* Silver button variant (use for secondary CTAs) */
.btn-silver {
  padding: 13px 24px; border-radius: var(--r-full);
  font-size: 15px; font-weight: 600;
  background: var(--chrome-grad);
  color: #1a1a1a;
  transition: all 0.2s;
  box-shadow: 0 4px 18px rgba(224,224,232,0.14), inset 0 1px 0 rgba(255,255,255,0.5);
}
.btn-silver:hover { transform: translateY(-1px); box-shadow: 0 8px 26px rgba(224,224,232,0.22), inset 0 1px 0 rgba(255,255,255,0.6); }

.btn-full { width: 100%; }
.btn-sm { padding: 8px 16px; font-size: 13px; }
.btn-xs { padding: 5px 10px; font-size: 12px; }

/* Hero */
.hero {
  position: relative; z-index: 1;
  padding: 160px 24px 80px;
  text-align: center;
  max-width: 800px; margin: 0 auto;
}
.hero-eyebrow { margin-bottom: 24px; }
.badge-pill {
  display: inline-block;
  padding: 8px 20px; border-radius: var(--r-full);
  font-size: 13px; font-weight: 500; letter-spacing: 0.3px;
  background: rgba(255,255,255,0.1);
  border: 1px solid var(--border-gold);
  color: var(--text-primary);
}
.hero-title {
  font-size: clamp(52px, 10vw, 96px);
  font-weight: 900; line-height: 1.0; letter-spacing: -3px;
  margin-bottom: 28px;
}
.gold-text {
  background: linear-gradient(135deg, var(--text-primary), #FFFFFF);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.hero-subtitle {
  font-size: 18px; color: var(--text-secondary); line-height: 1.7;
  margin-bottom: 48px; max-width: 560px; margin-left: auto; margin-right: auto;
}
.hero-ctas {
  display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;
  margin-bottom: 60px;
}
.btn-hero-crew, .btn-hero-the-one {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 32px; border-radius: var(--r-xl);
  font-size: 17px; font-weight: 700; letter-spacing: -0.2px;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  min-width: 200px; justify-content: center;
}
.btn-hero-crew {
  background: linear-gradient(135deg, #FFFFFF, #B0B4BC);
  color: #1a1000;
  box-shadow: 0 8px 40px rgba(255,255,255,0.35);
}
.btn-hero-crew:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 16px 50px rgba(255,255,255,0.45); }
.btn-hero-the-one {
  background: rgba(255,255,255,0.06);
  color: var(--text-primary);
  border: 1.5px solid var(--border-md);
  backdrop-filter: blur(10px);
}
.btn-hero-the-one:hover { transform: translateY(-3px); background: rgba(255,255,255,0.10); border-color: var(--border-gold); }
.btn-icon { font-size: 20px; }
.btn-arrow { opacity: 0.7; margin-left: 4px; }

.hero-stats {
  display: flex; align-items: center; justify-content: center; gap: 32px;
  flex-wrap: wrap;
}
.stat-item { display: flex; flex-direction: column; align-items: center; }
.stat-num { font-size: 32px; font-weight: 800; letter-spacing: -1px; background: linear-gradient(135deg, var(--text-primary), #FFFFFF); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.stat-label { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-top: 4px; }
.stat-div { width: 1px; height: 40px; background: var(--border); }

/* Launch-phase variant — replaces numeric stats with "Launching Soon" cards */
.hero-stats-launch { gap: 24px; }
.hero-stats-launch .stat-item {
  gap: 4px;
  min-width: 120px;
  padding: 14px 18px;
  background: linear-gradient(135deg, rgba(129,140,255,0.10), rgba(255,255,255,0.02));
  border: 1px solid var(--border-gold);
  border-radius: 14px;
}
.hero-stats-launch .stat-launch-icon {
  font-size: 22px; margin-bottom: 2px;
  filter: drop-shadow(0 4px 10px rgba(129,140,255,0.3));
}
.hero-stats-launch .stat-launch-title {
  font-family: 'Playfair Display', serif;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  line-height: 1.2;
  white-space: nowrap;
}
.hero-stats-launch .stat-label {
  font-size: 10px;
  letter-spacing: 1.2px;
}
.hero-stats-caption {
  text-align: center;
  margin-top: 12px;
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
  letter-spacing: 0.3px;
}
@media (max-width: 640px) {
  .hero-stats-launch { gap: 10px; flex-direction: column; }
  .hero-stats-launch .stat-div { display: none; }
  .hero-stats-launch .stat-item { width: 100%; min-width: 0; }
}

/* Features */
.features-section {
  position: relative; z-index: 1;
  padding: 80px 24px;
  max-width: 1200px; margin: 0 auto;
}
.features-header { text-align: center; margin-bottom: 48px; }
.section-eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--text-primary); margin-bottom: 12px; }
.section-title { font-size: clamp(32px, 5vw, 52px); font-weight: 800; letter-spacing: -1px; }

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.feature-card {
  background: linear-gradient(180deg, rgba(22,22,30,0.9), rgba(14,14,20,0.85));
  border: 1px solid var(--border-silver);
  border-radius: var(--r-xl);
  padding: var(--sp-xl);
  transition: all 0.25s;
  position: relative; overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.feature-card::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 30%, rgba(224,224,232,0.05) 0%, transparent 70%);
  pointer-events: none;
}
.feature-card:hover {
  border-color: var(--border-silver-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-silver), 0 0 32px rgba(224,224,232,0.1);
}
.feature-card--large { grid-column: span 1; }
.feature-card--accent { background: linear-gradient(135deg, rgba(14,165,202,0.08), var(--bg-card)); border-color: var(--border-cyan); }
.feature-card--accent:hover { border-color: rgba(14,165,202,0.5); box-shadow: 0 8px 32px rgba(14,165,202,0.15); }

.feature-icon-wrap {
  width: 52px; height: 52px; border-radius: var(--r-md);
  background: rgba(255,255,255,0.1); border: 1px solid var(--border-gold);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px; color: var(--text-primary);
}
.accent-icon { background: rgba(14,165,202,0.1); border-color: var(--border-cyan); color: var(--cyan); }
.feature-card h3 { font-size: 18px; font-weight: 700; margin-bottom: 10px; }
.feature-card p { font-size: 14px; color: var(--text-secondary); line-height: 1.6; margin-bottom: 16px; }
.feature-tag {
  display: inline-block;
  padding: 4px 10px; border-radius: var(--r-full);
  font-size: 11px; font-weight: 600; letter-spacing: 0.5px;
  background: var(--gold-glow-sm); color: var(--text-primary);
  border: 1px solid var(--border-gold);
}
.gold-tag { background: rgba(255,255,255,0.15); }
.cyan-tag { background: rgba(14,165,202,0.1); color: var(--cyan); border-color: var(--border-cyan); }

/* Landing Footer */
.landing-footer {
  position: relative; z-index: 1;
  padding: 48px 24px;
  border-top: 1px solid var(--border);
  text-align: center;
}
.footer-tagline { font-size: 14px; color: var(--text-secondary); margin: 16px 0 8px; }
.footer-copy { font-size: 12px; color: var(--text-muted); }

/* ══════════════════════════════════════════════
   AUTH PAGES
══════════════════════════════════════════════ */
.auth-bg {
  position: fixed; inset: 0; z-index: 0;
  background: var(--bg-base);
  overflow: hidden;
}
.auth-shell {
  position: relative; z-index: 1;
  min-height: 100vh;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 60px 16px 40px;
}
.auth-card {
  width: 100%; max-width: 440px;
  background: linear-gradient(180deg, rgba(22,22,32,0.96), rgba(14,14,22,0.92));
  border: 1px solid var(--border-silver);
  border-radius: var(--r-xl);
  padding: 36px 32px;
  position: relative;
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.05), 0 0 40px rgba(224,224,232,0.06);
}
.register-card { max-width: 480px; }
.back-btn {
  position: absolute; top: 20px; left: 20px;
  width: 36px; height: 36px; border-radius: var(--r-full);
  background: var(--bg-input); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary);
  transition: all 0.2s;
}
.back-btn:hover { border-color: var(--border-gold); color: var(--text-primary); }
.auth-brand { display: flex; justify-content: center; margin-bottom: 24px; }
.auth-title { font-size: 26px; font-weight: 800; text-align: center; letter-spacing: -0.5px; margin-bottom: 8px; }
.auth-sub { font-size: 14px; color: var(--text-secondary); text-align: center; margin-bottom: 28px; }

/* ── Sign-In · Cuadrix / The One toggle ── */
.signin-type-label {
  text-align: center;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #B0B4BC;
  margin: 4px 0 10px;
}
.user-type-toggle {
  display: flex;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 14px;
  padding: 4px;
  margin: 0 auto 18px;
  max-width: 380px;
  gap: 4px;
}
.user-type-toggle .toggle-option {
  flex: 1;
  padding: 11px 14px;
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.6);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  border-radius: 10px;
  transition: background 0.25s ease, color 0.25s ease, transform 0.15s ease, box-shadow 0.25s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.user-type-toggle .toggle-option:hover { color: #B0B4BC; }
.user-type-toggle .toggle-option.active {
  background: linear-gradient(135deg, #FFFFFF, #B0B4BC);
  color: #1a1000;
  box-shadow: 0 4px 12px rgba(255,255,255,0.3);
}
.user-type-toggle .toggle-option .icon { font-size: 16px; line-height: 1; }
.user-type-toggle .toggle-option { flex-wrap: wrap; }
.user-type-toggle .toggle-option .account-hint {
  flex-basis: 100%;
  text-align: center;
  display: block;
  margin-top: 3px;
  font-size: 10px;
  font-weight: 500;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.2px;
}
.user-type-toggle .toggle-option.active .account-hint { color: rgba(26,16,0,0.75); }
.user-type-toggle .toggle-option[data-no-account] { opacity: 0.55; }
.user-type-toggle .toggle-option[data-no-account] .account-hint { color: rgba(255,255,255,0.35); font-style: italic; }
.signin-greeting {
  text-align: center;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 18px;
  color: #fff;
  margin: 0 0 18px;
  font-weight: 700;
}

/* ── Remember me ── */
.remember-me {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: rgba(255,255,255,0.75);
  cursor: pointer;
  margin: 2px 0;
}
.remember-me input[type="checkbox"] {
  width: 16px; height: 16px;
  accent-color: #B0B4BC;
  cursor: pointer;
}
@media (max-width: 380px) {
  .user-type-toggle .toggle-option { font-size: 12px; padding: 10px 8px; gap: 4px; }
}

/* Social Buttons */
.social-btns { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.social-btn {
  width: 100%; padding: 13px 20px;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  border-radius: var(--r-md); font-size: 14px; font-weight: 500;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-md);
  color: var(--text-primary);
  transition: all 0.2s;
}
.social-btn:hover { background: rgba(255,255,255,0.08); border-color: var(--border-gold); }

.divider {
  display: flex; align-items: center; gap: 12px;
  margin: 20px 0; color: var(--text-muted); font-size: 13px;
}
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* Form Elements */
.auth-form, form { display: flex; flex-direction: column; gap: 14px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ── Email verification banner (Supabase signup follow-up) ──────── */
.px-verify-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: linear-gradient(180deg, rgba(99,102,255,0.22), rgba(12,14,32,0.92));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(99,102,255,0.55);
  color: var(--text-primary, #fff);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  font-size: 13px;
  z-index: 9000;
  animation: pxVerifyBannerIn 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes pxVerifyBannerIn {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
.px-verify-banner-icon { font-size: 16px; flex-shrink: 0; }
.px-verify-banner-text { flex: 1; line-height: 1.4; }
.px-verify-banner-text strong { color: #FFFFFF; font-weight: 700; }
.px-verify-banner-resend {
  background: linear-gradient(135deg, #6366FF, #818CFF);
  color: #FFFFFF;
  border: none;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
  transition: filter 0.18s ease;
}
.px-verify-banner-resend:hover { filter: brightness(1.1); }
.px-verify-banner-resend:disabled { opacity: 0.65; cursor: default; filter: none; }
/* Email-verification alert — URGENT RED. Scoped to #pxVerifyBanner so the
   complete-profile nudge (#pxCompleteBanner, reuses .px-verify-banner) stays blue. */
#pxVerifyBanner.px-verify-banner {
  background: linear-gradient(180deg, rgba(220,38,38,0.36), rgba(34,8,8,0.95));
  border-bottom: 1px solid rgba(248,113,113,0.78);
}
#pxVerifyBanner .px-verify-banner-resend {
  background: #FFFFFF;
  color: #B91C1C;
}
#pxVerifyBanner .px-verify-banner-resend:hover { filter: brightness(0.94); }
/* Collapse toggle — minimize without dismissing */
.px-verify-banner-short { display: none; flex: 1; line-height: 1.4; font-weight: 600; }
.px-verify-banner-toggle {
  background: none;
  border: none;
  color: var(--text-primary, #fff);
  font-size: 13px;
  cursor: pointer;
  padding: 2px 4px;
  line-height: 1;
  flex-shrink: 0;
  font-family: inherit;
  opacity: 0.85;
  transition: transform 0.18s ease, opacity 0.18s ease;
}
.px-verify-banner-toggle:hover { opacity: 1; }
.px-verify-banner.collapsed { padding-top: 7px; padding-bottom: 7px; }
.px-verify-banner.collapsed .px-verify-banner-text,
.px-verify-banner.collapsed .px-verify-banner-resend { display: none; }
.px-verify-banner.collapsed .px-verify-banner-short { display: inline; }
.px-verify-banner.collapsed .px-verify-banner-toggle { transform: rotate(-90deg); }
body.has-verify-banner { padding-top: 44px; }
body.has-verify-banner.verify-collapsed { padding-top: 32px; }
@media (max-width: 500px) {
  .px-verify-banner { font-size: 11px; padding: 8px 10px; gap: 6px; }
  .px-verify-banner-resend { font-size: 11px; padding: 5px 8px; }
  body.has-verify-banner { padding-top: 38px; }
  body.has-verify-banner.verify-collapsed { padding-top: 30px; }
}

/* ── Centralized name + headline rendering ──────────────────────── */
.px-name-block { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.px-name {
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-primary, #fff);
}
.px-headline {
  display: block;
  font-size: 12px;
  color: var(--text-secondary, #9aa3b2);
  font-weight: 500;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}
.px-headline--placeholder { font-style: italic; opacity: 0.65; }
.px-headline-add {
  display: inline-block;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  line-height: 1.35;
}
.px-headline-add:hover { text-decoration: underline; }

/* PART B — role/position typeahead (suggest-as-you-type). Shared by the Cuadrix
   signup Position field and the profile "Edit Position" modal. Free text always
   allowed; this list only suggests. No <datalist> (iOS Safari unreliable). */
.px-typeahead-wrap { position: relative; }
.px-role-suggest {
  display: none;
  position: absolute;
  left: 0; right: 0; top: 100%;
  z-index: 40;
  margin-top: 4px;
  max-height: 240px;
  overflow-y: auto;
  background: var(--bg-card);
  border: 1px solid var(--border-gold);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.5);
  padding: 4px;
}
.px-role-suggest-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 13px;
  padding: 9px 12px;
  border-radius: 8px;
  cursor: pointer;
}
.px-role-suggest-item:hover,
.px-role-suggest-item:focus {
  background: var(--gold-glow-sm, rgba(255,255,255,0.12));
  color: #B0B4BC;
}

/* Variant sizing */
.px-name-block--profile-header .px-name { font-size: 22px; }
.px-name-block--profile-header .px-headline,
.px-name-block--profile-header .px-headline-add { font-size: 13px; }

/* Match / swipe card · large dramatic name on dark card background */
.px-name-block--card .px-name {
  font-size: 32px; font-weight: 900; letter-spacing: -1px;
  line-height: 1; margin: 0;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
.px-name-block--card .px-headline {
  font-size: 14px; font-weight: 600;
  color: rgba(255,255,255,0.92);
  margin-top: 4px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.px-name-block--card .px-headline-add { font-size: 13px; color: var(--text-primary); }

/* Feed post byline */
.px-name-block--byline .px-name { font-size: 14px; }
.px-name-block--byline .px-headline,
.px-name-block--byline .px-headline-add { font-size: 12px; }

/* NetWorth connection row */
.px-name-block--connection-row .px-name {
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.px-name-block--connection-row .px-headline,
.px-name-block--connection-row .px-headline-add { font-size: 12px; }

/* Profile screen header context */
.profile-headline { margin: 4px 0 2px; min-height: 18px; }
.profile-headline .px-headline { font-size: 14px; color: var(--text-secondary); }
.profile-headline .px-headline-add { font-size: 14px; }

/* ── Cuadrix signup · social buttons + OR divider ───────────────── */
.cuadrix-social-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 6px;
}
.cuadrix-social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.18s ease, background 0.18s ease;
  border: 1px solid transparent;
  font-family: inherit;
}
.cuadrix-social-btn:hover { transform: translateY(-1px); }
.cuadrix-social-btn:active { transform: translateY(0); }
.cuadrix-social-google {
  background: #fff;
  color: #1f1f1f;
  border-color: #dadce0;
}
.cuadrix-social-google:hover {
  background: #f8f9fa;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.cuadrix-social-apple {
  background: #000;
  color: #fff;
  border-color: #000;
}
.cuadrix-social-apple:hover {
  background: #1a1a1a;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
.cuadrix-or-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  margin: 4px 0;
}
.cuadrix-or-divider::before,
.cuadrix-or-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.cuadrix-or-divider span { padding: 0 4px; }

/* Phone code text input — narrow, fixed-width slot next to the number field */
.cuadrix-phone-input { display: flex; gap: 8px; align-items: stretch; }
.cuadrix-phone-input .phone-code-input {
  width: 90px;
  flex: 0 0 90px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text-primary);
  font-size: 14px;
  font-family: inherit;
  text-align: center;
}
.cuadrix-phone-input .phone-code-input:focus {
  outline: none;
  border-color: var(--text-primary);
}
.cuadrix-phone-input input[type="tel"] { flex: 1; }

label { font-size: 13px; font-weight: 500; color: var(--text-secondary); }
.optional { color: var(--text-muted); font-weight: 400; }
.form-input {
  width: 100%;
  padding: 12px 14px; border-radius: var(--r-md);
  background: var(--bg-input); border: 1px solid var(--border);
  color: var(--text-primary); font-size: 15px;
  outline: none; transition: all 0.2s;
  -webkit-appearance: none; appearance: none;
  /* Dark native popup/UA widgets. --text-primary is #FFFFFF, so without this a
     <select>'s native option list renders white-on-white (invisible) on iOS
     Safari. Light-forced contexts (.geo-edit-modal / .ops-modal option rules)
     override via !important, so the base dark scheme is safe app-wide. */
  color-scheme: dark;
}
.form-input:focus { border-color: var(--border-gold); background: rgba(255,255,255,0.05); box-shadow: 0 0 0 3px rgba(255,255,255,0.1); }
.form-input::placeholder { color: var(--text-muted); }

/* ROOT-CAUSE FIX — kill white native <select> option popups app-wide. On iOS,
   color-scheme:dark on the select does NOT reliably repaint the OPTION popup;
   only an explicit option background/color does. This global rule (specificity
   0,0,2) is overridden by every class-scoped option rule (.line-manager-dropdown,
   .ops-modal, .geo-edit-modal, #page-register/login, .filters-panel, .bank-form,
   etc.), so it ONLY reaches the previously-unstyled bare selects that were
   rendering white-on-white. The app is 100% dark, so a dark default is safe. */
select { color-scheme: dark; }
select option, select optgroup { background: #16181d; color: #fff; }
select.form-input { cursor: pointer; }
textarea.form-input { resize: vertical; min-height: 72px; }

.input-wrap { position: relative; }
.input-wrap .form-input { padding-right: 44px; }
.input-toggle {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); transition: color 0.2s; padding: 4px;
}
.input-toggle:hover { color: var(--text-secondary); }

.phone-input { display: flex; gap: 8px; }
.phone-code { padding: 12px 10px; border-radius: var(--r-md); background: var(--bg-input); border: 1px solid var(--border); color: var(--text-primary); font-size: 14px; cursor: pointer; flex-shrink: 0; }
.phone-code:focus { border-color: var(--border-gold); outline: none; }

.forgot-link { font-size: 13px; color: var(--text-primary); text-align: right; }
.auth-switch { text-align: center; font-size: 14px; color: var(--text-secondary); margin-top: 16px; }
.auth-switch a { color: var(--text-primary); font-weight: 600; }

.checkbox-group { margin-top: 4px; }
.checkbox-label {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13px; color: var(--text-secondary); cursor: pointer; line-height: 1.5;
}
.checkbox-label input[type="checkbox"] { margin-top: 2px; accent-color: #FFFFFF; }

/* Registration Steps */
.reg-section { display: none; }
.reg-section.active { display: block; }
.reg-step { display: none; }
.reg-step.active { display: block; }

.step-indicator {
  display: flex; align-items: center; justify-content: center; gap: 0;
  margin-bottom: 28px;
}
.step {
  width: 32px; height: 32px; border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600;
  background: var(--bg-surface); border: 1.5px solid var(--border);
  color: var(--text-muted); transition: all 0.3s;
}
.step.active {
  background: linear-gradient(135deg, #FFFFFF, #B0B4BC);
  color: #1a1000; border-color: transparent;
  box-shadow: 0 4px 12px rgba(255,255,255,0.4);
}
.step.done { background: rgba(5,150,105,0.2); border-color: var(--success); color: var(--success); }
.step-line { width: 40px; height: 1.5px; background: var(--border); }

.role-cards { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
.role-card {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 20px; border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(24,24,34,0.92), rgba(16,16,24,0.9));
  border: 1.5px solid var(--border-silver);
  text-align: left; transition: all 0.25s;
  width: 100%;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.role-card:hover {
  border-color: var(--border-silver-strong);
  background: linear-gradient(180deg, rgba(32,32,44,0.95), rgba(20,20,28,0.92));
  transform: translateX(2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 0 28px rgba(224,224,232,0.1);
}
.role-icon { font-size: 32px; flex-shrink: 0; }
.role-info { flex: 1; }
.role-info h3 { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.role-info p { font-size: 13px; color: var(--text-secondary); line-height: 1.4; }
.role-arrow { color: var(--text-primary); flex-shrink: 0; }

.experience-entry { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px; margin-bottom: 12px; }
.add-btn { margin-bottom: 16px; border: 1.5px dashed var(--border); border-radius: var(--r-md); padding: 12px; color: var(--text-secondary); font-size: 14px; font-weight: 500; width: 100%; }
.add-btn:hover { border-color: var(--border-gold); color: var(--text-primary); }
.btn-row { display: flex; gap: 12px; margin-top: 8px; }
.btn-row .btn-outline, .btn-row .btn-primary { flex: 1; }

/* Skills Input */
.skills-input-wrap { background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--r-md); padding: 8px; transition: border-color 0.2s; }
.skills-input-wrap:focus-within { border-color: var(--border-gold); }
.skills-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.skill-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--r-full);
  background: var(--gold-glow-sm); border: 1px solid var(--border-gold);
  font-size: 12px; font-weight: 500; color: var(--text-primary);
}
.skill-tag button { color: var(--text-primary); font-size: 14px; line-height: 1; background: none; border: none; cursor: pointer; }
.skills-input-wrap .form-input { border: none; background: none; padding: 6px; }
.skills-input-wrap .form-input:focus { border: none; box-shadow: none; }

/* ══════════════════════════════════════════════
   APP SHELL
══════════════════════════════════════════════ */
#app { background: var(--bg-base); min-height: 100vh; }
.app-wrapper {
  display: flex; justify-content: center; align-items: flex-start;
  min-height: 100vh;
  padding: 0;
}
.phone-frame {
  width: 100%; max-width: 430px;
  height: 100vh;
  height: 100dvh;
  background: var(--bg-elevated);
  position: relative;
  display: flex; flex-direction: column;
  overflow: hidden;
  margin: 0 auto;
}

/* On desktop, show as a phone */
@media (min-width: 500px) {
  .app-wrapper { padding: 24px 0; align-items: center; }
  .phone-frame {
    height: 860px;
    border-radius: 44px;
    border: 1px solid var(--border-md);
    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,255,255,0.05), var(--shadow-glow);
    overflow: hidden;
  }
  #app { overflow-y: auto; padding: 20px 0; background: linear-gradient(135deg, #04060C, #080C17); }
}

/* Top Bar */
.top-bar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap;   /* BRAND-CLARITY-1 — lets #pxBrandBand take its own full-width row */
  /* safe-area top inset now lives here (moved off .phone-frame) so the absolute
     bar clears the notch and #screen-container padding-top can equal offsetHeight */
  padding: calc(16px + env(safe-area-inset-top, 0px)) 20px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elevated);
  backdrop-filter: blur(20px);
  flex-shrink: 0;
  z-index: 10;
  /* absolute (was sticky) so it slides out on scroll while content flows under */
  position: absolute; top: 0; left: 0; right: 0;
  transition: transform 0.25s ease;
  will-change: transform;
}
.top-bar-brand { display: flex; align-items: center; gap: 8px; }
.top-bar-brand span { font-size: 17px; font-weight: 700; letter-spacing: -0.2px; background: linear-gradient(135deg, var(--text-primary), #FFFFFF); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.top-bar-title { font-size: 17px; font-weight: 700; }
.top-bar-actions { display: flex; align-items: center; gap: 8px; }
/* BRAND-CLARITY-1 — identity band: the ONE "you're managing a child brand"
   signal. Full-width row inside .top-bar (chrome measurement + auto-hide
   come for free); bleeds past the bar's padding to sit flush at its edge. */
.px-brand-band {
  flex-basis: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 10px -20px -12px;
  padding: 7px 20px;
  background: #0B0B0C;
  border-bottom: 1px solid rgba(232,200,121,0.28);
  font-size: 13px; color: #EDEDED;
  opacity: 0; transition: opacity 0.15s ease;
}
.px-brand-band[hidden] { display: none; }
.px-brand-band.show { opacity: 1; }
.px-bb-left { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.px-bb-left #pxBrandBandName { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.px-bb-dot { color: #E8C879; font-size: 8px; line-height: 1; }
.px-bb-exit {
  background: none; border: none; cursor: pointer; font: inherit;
  font-size: 13px; font-weight: 600; color: #E8C879; padding: 2px 4px;
  flex-shrink: 0;
}
.top-bar-back { display: flex; align-items: center; justify-content: center; color: var(--text-primary); }
.icon-btn { width: 36px; height: 36px; border-radius: var(--r-full); display: flex; align-items: center; justify-content: center; color: var(--text-secondary); transition: all 0.2s; position: relative; }
.icon-btn:hover { background: var(--bg-input); color: var(--text-primary); }
.notif-btn .notif-dot { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: var(--r-full); background: #FFFFFF; border: 2px solid var(--bg-elevated); }
.avatar-btn { width: 36px; height: 36px; border-radius: var(--r-full); overflow: hidden; border: 2px solid var(--border-gold); }
.avatar-img { width: 100%; height: 100%; object-fit: cover; }

/* Screen Container — fills the whole frame now that the bars are absolute; the
   padding reserves the bars' rendered heights (measured into the vars at boot so
   env(safe-area) is included). Content sits exactly where it did under the old
   flex layout. */
.screen-container {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-top: var(--chrome-top, 56px);
  padding-bottom: var(--chrome-bottom, 68px);
}
.screen-container::-webkit-scrollbar { display: none; }
/* Auto-hiding chrome — slide bars off on scroll-down; content already flows under. */
.phone-frame.chrome-hidden .top-bar    { transform: translateY(-100%); }
.phone-frame.chrome-hidden .bottom-nav { transform: translateY(100%); }
/* MATCH-COMPACT-2 — the deck runs with ONE header: while the swipe view is
   visible the GLOBAL top-bar slides away and its reserved padding collapses
   (safe-area kept so the deck bar clears the notch). Bottom nav stays. */
.phone-frame.deck-solo .top-bar { transform: translateY(-100%); }
/* MATCH-HEAD — mirror the top-bar's proven notch formula (was env + 6px,
   which sat the title under the clock on notched installs). */
.phone-frame.deck-solo .screen-container { padding-top: calc(env(safe-area-inset-top, 0px) + 12px); }
.screen { display: none; padding: 16px 16px 96px; }
.screen.active { display: block; }

/* Bottom Nav — silver inactive, gold active (luxury finish) */
.bottom-nav {
  display: flex; align-items: flex-end;
  /* NAV-1 — compact FB-style bar: ~55px of chrome, safe-area inset BELOW the
     icons (env() is real — viewport-fit=cover). Was 8/16px padding ≈ 78px
     tall, with the home indicator overlapping the hardcoded 16px stand-in.
     NAV-3 — row seated LOW: top padding grew, icon-to-inset gap shrank. */
  padding: 8px 4px calc(2px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(16,16,20,0.85) 0%, var(--bg-elevated) 100%);
  border-top: 1px solid var(--border-silver);
  box-shadow: 0 -8px 28px rgba(0,0,0,0.5), 0 -1px 0 rgba(224,224,232,0.04);
  flex-shrink: 0;
  gap: 2px;
  backdrop-filter: blur(12px);
  /* absolute (was flex child) so it slides out on scroll; keeps safe-area pad */
  position: absolute; bottom: 0; left: 0; right: 0;
  z-index: 10;
  transition: transform 0.25s ease;
  will-change: transform;
}
.nav-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  /* NAV-1 — 4px vert pad: 4+22(icon)+2+12(label)+4 = 44px item = the hit target */
  padding: 4px 4px; border-radius: var(--r-sm);
  font-size: 10px; font-weight: 500;
  color: var(--silver-dark);
  transition: all 0.2s;
}
.nav-item:hover { color: var(--silver-light); background: var(--silver-glow-sm); }
.nav-item.active {
  color: var(--text-primary);
  background: var(--gold-glow-sm);
  font-weight: 600;
}
.nav-item svg { transition: transform 0.2s; }
.nav-item.active svg { transform: scale(1.1); filter: drop-shadow(0 0 6px rgba(255,255,255,0.4)); }

.nav-ai { flex-shrink: 0; }
.nav-ai-btn {
  width: 52px; height: 52px; border-radius: var(--r-full);
  background: linear-gradient(135deg, #FFFFFF, #B0B4BC);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: -6px;
  box-shadow: 0 4px 20px rgba(255,255,255,0.4);
  color: #1a1000;
  transition: all 0.2s;
}
.nav-ai:hover .nav-ai-btn { transform: scale(1.1); box-shadow: 0 6px 24px rgba(255,255,255,0.5); }
.nav-ai span { color: var(--text-primary); font-weight: 600; }

/* NAV-2 — bell + avatar footer tabs. min-height keeps every tab at the same
   44px hit target (padding, not size — NAV-3 icons are 20px). */
.nav-item { min-height: 44px; }
.nav-item.notif-btn { position: relative; }
.nav-item.notif-btn .notif-dot { top: 2px; right: auto; left: calc(50% + 6px); }
/* NAV-3 — "Notifications" at 9px/tight tracking: ~52px text vs a 50px tab at
   320px = ≤1px bleed into the 2px gaps (no ellipsis/clip); fits from 336px. */
.nav-notif-label { font-size: 9px; letter-spacing: -0.2px; white-space: nowrap; }
/* NAV-4 — 28px avatar (FB-style, photo IS the label; glyph icons stay 20px),
   1.5px lifted-white ring + faint well so dark logos read on the dark bar.
   padding-top 0 seats its center at 14px = the 20px icons' optical center. */
.nav-item.nav-avatar { padding-top: 0; }
.nav-avatar-wrap { position: relative; width: 28px; height: 28px; flex-shrink: 0; }
.nav-avatar-wrap .avatar-img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border: 1.5px solid rgba(255,255,255,0.3); background: rgba(255,255,255,0.06); display: block; }
/* NAV-3 — active = gold hairline ring ONLY (no glow wash on the avatar tab) */
.nav-item.nav-avatar.active { background: none; }
.nav-item.nav-avatar.active .nav-avatar-wrap .avatar-img { border-color: var(--border-gold); }
.nav-avatar-wrap .px-avatar-initials { font-size: 11px; }
/* NAV-3 — Kenneth ruling: no role badge on the footer avatar (FB-plain photo).
   The element stays in DOM — pxRenderTopAvatar hard-requires all four ids. */
.nav-avatar-wrap .role-badge { display: none; }
/* NAV-2 — header hamburger: shares the icon-btn chrome, root screens only */
.top-menu-btn { flex-shrink: 0; margin-right: 2px; }

/* ══════════════════════════════════════════════
   FEED SCREEN
══════════════════════════════════════════════ */
.stories-strip {
  display: flex; gap: 12px; overflow-x: auto;
  padding: 4px 0 12px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.stories-strip::-webkit-scrollbar { display: none; }
.story {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  flex-shrink: 0; cursor: pointer;
}
.story span { font-size: 11px; color: var(--text-secondary); max-width: 60px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.story-ring {
  width: 60px; height: 60px; border-radius: var(--r-full);
  padding: 2.5px;
  background: linear-gradient(135deg, var(--bg-surface), var(--bg-surface));
  border: 2px solid var(--border-md);
  transition: all 0.2s;
}
.story-ring.gold-ring {
  background: linear-gradient(135deg, #FFFFFF, #B0B4BC);
  border-color: transparent;
}
.story:hover .story-ring { border-color: var(--border-gold); }
.story-avatar { width: 100%; height: 100%; border-radius: var(--r-full); object-fit: cover; }
.add-ring { position: relative; background: rgba(255,255,255,0.1); border-color: var(--border-gold); border-style: dashed; }
/* PL-FEED-2 Phase 5 — "your story" active-state ring. Applied to the my-story
   tile when the signed-in user has a live story that's already been seen
   (unseen still uses the brighter solid .gold-ring). Gold conic gradient keeps
   the PL-54 premium direction — an Instagram-style ring without leaving gold. */
.story-ring.px-story-active {
  background: conic-gradient(from 135deg, #B0B4BC, #FFFFFF, #8a6d2a, #B0B4BC);
  border-color: transparent;
}

/* Avatar-stories (B3) — story ring layered onto EXISTING avatar elements
   (own profile #profileAvatarImg / .px-cp-logo, #opAvatarImg, inbox
   .inbox-avatar, chat-header .pxchat-counterpart-photo). box-shadow ring
   (no border-radius override, so it follows each element's own shape) +
   pointer. Gold = unseen, muted = seen. Mirrors the feed tray gold/seen. */
/* .px-story-tap = tappable cue (always when an avatar has a story, even when
   the box-shadow ring is suppressed — e.g. own profile, already in a gold
   wrapper). The ring classes add the gold(unseen)/muted(seen) box-shadow. */
.px-story-tap { cursor: pointer; }
.px-story-ring      { box-shadow: 0 0 0 2px #0a0a0a, 0 0 0 4px #FFFFFF; }
.px-story-ring-seen { box-shadow: 0 0 0 2px #0a0a0a, 0 0 0 4px rgba(255,255,255,0.22); }
.story-add-badge {
  position: absolute; right: -2px; bottom: -2px;
  width: 22px; height: 22px; border-radius: var(--r-full);
  background: linear-gradient(135deg, #FFFFFF, #B0B4BC);
  color: #1a1000; font-weight: 700; font-size: 16px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--bg-elevated);
  box-shadow: 0 2px 8px rgba(255,255,255,0.35);
}

/* Create Story Modal */
.create-story-overlay {
  display: none; position: fixed; inset: 0; z-index: 300;
  background: rgba(7,9,15,0.78); backdrop-filter: blur(10px);
  align-items: center; justify-content: center;
  padding: 20px;
}
.create-story-overlay.show { display: flex; animation: fadeIn 0.2s ease both; }
.create-story-modal {
  width: 100%; max-width: 340px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-gold);
  border-radius: var(--r-xl);
  padding: 28px 22px 22px;
  position: relative;
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,255,255,0.08), var(--shadow-glow);
  animation: storyModalIn 0.26s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes storyModalIn {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}
.create-story-close {
  position: absolute; top: 12px; right: 12px;
  width: 32px; height: 32px; border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.04);
  color: var(--text-secondary);
  transition: all 0.2s;
}
.create-story-close:hover { background: var(--gold-glow-sm); color: var(--text-primary); }
.create-story-icon {
  width: 72px; height: 72px; border-radius: var(--r-full);
  background: linear-gradient(135deg, #FFFFFF, #B0B4BC);
  display: flex; align-items: center; justify-content: center;
  margin: 4px auto 14px; color: #1a1000;
  box-shadow: 0 6px 24px rgba(255,255,255,0.4);
}
.create-story-title {
  font-size: 20px; font-weight: 700; letter-spacing: -0.3px;
  text-align: center; color: var(--text-primary); margin-bottom: 4px;
}
.create-story-sub {
  font-size: 13px; color: var(--text-secondary);
  text-align: center; margin-bottom: 20px;
}
.create-story-options { display: flex; flex-direction: column; gap: 10px; }
.create-story-option {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text-primary);
  font-size: 14px; font-weight: 600;
  transition: all 0.2s;
  text-align: left;
}
.create-story-option:hover {
  border-color: var(--border-gold);
  background: var(--gold-glow-sm);
  transform: translateY(-1px);
}
.create-story-option-icon {
  width: 36px; height: 36px; border-radius: var(--r-sm);
  background: var(--gold-glow-sm);
  border: 1px solid var(--border-gold);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-primary); flex-shrink: 0;
}
.create-story-option-label { flex: 1; }
.create-story-option-chev { color: var(--text-muted); flex-shrink: 0; }
.create-story-option:hover .create-story-option-chev { color: var(--text-primary); }

/* Create Post Bar */
.create-post-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: var(--r-lg);
  background: var(--bg-card); border: 1px solid var(--border);
  margin-bottom: 12px;
}
.create-avatar { width: 36px; height: 36px; border-radius: var(--r-full); }
.create-post-input {
  flex: 1; text-align: left; font-size: 14px; color: var(--text-muted);
  background: none; border: none; padding: 0; cursor: text;
}
.create-media-btn { color: var(--text-muted); padding: 4px; transition: color 0.2s; }
.create-media-btn:hover { color: var(--text-primary); }

/* Feed Post — glassmorphism with silver edge */
.feed-post {
  background: linear-gradient(180deg, rgba(22,22,32,0.95), rgba(16,16,24,0.9));
  border: 1px solid var(--border-silver);
  border-radius: var(--r-xl); margin-bottom: 12px; overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 4px 18px rgba(0,0,0,0.35);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.feed-post:hover {
  border-color: var(--border-silver-strong);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 6px 22px rgba(0,0,0,0.45), 0 0 0 1px var(--silver-glow);
}
.post-header { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px 0; }
.post-avatar { width: 42px; height: 42px; border-radius: var(--r-full); flex-shrink: 0; }
.post-meta { flex: 1; }
.post-name { display: block; font-size: 14px; font-weight: 700; }
.post-badge.verified { background: rgba(14,165,202,0.15); color: var(--cyan); font-size: 11px; font-weight: 600; padding: 2px 6px; border-radius: var(--r-full); border: 1px solid var(--border-cyan); margin-left: 6px; }
.post-role { display: block; font-size: 12px; color: var(--text-secondary); margin-top: 1px; }
.post-time { display: block; font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.post-more { color: var(--text-muted); font-size: 18px; padding: 0 4px; flex-shrink: 0; }
/* PULSE-SPACE — pre-wrap preserves the author's line breaks (content is stored
   raw and escaped at render; the <p> was collapsing \n). Covers feed cards,
   the post detail modal, and the re-share embedded original — all use .post-text. */
.post-text { padding: 12px 16px; font-size: 14px; line-height: 1.65; color: var(--text-primary); white-space: pre-wrap; overflow-wrap: break-word; }
/* PULSE-MORE — 5-line clamp (pre-wrap preserved) + quiet inline more/less. */
.post-text.is-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.post-more {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 13px; font-weight: 600;
  font-family: inherit; padding: 0 16px 10px; text-align: left;
}
.post-image-wrap { margin: 0 0 4px; }
.post-image-placeholder { background: var(--bg-surface); min-height: 160px; display: flex; align-items: center; justify-content: center; }
.cert-image { background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.02)); border-top: 1px solid var(--border-gold); border-bottom: 1px solid var(--border-gold); }
.cert-preview { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 24px; text-align: center; }
.cert-preview span { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; }
.cert-preview strong { font-size: 16px; font-weight: 700; color: var(--text-primary); }

.post-actions { display: flex; padding: 0 8px 8px; gap: 4px; }
/* #52i — bigger tap target (44×44 iOS spec), higher base opacity,
 * cursor:pointer for iOS click synthesis. SVG children get
 * pointer-events:none so a tap inside the trash icon's transparent
 * interior bubbles to the button (not absorbed by an empty SVG path).
 * Active state collapses to scale(0.95) for tap feedback. */
.post-action-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 12px; border-radius: var(--r-full);
  font-size: 13px; color: var(--text-secondary); font-weight: 500;
  min-width: 44px; min-height: 44px;
  opacity: 0.85; cursor: pointer;
  background: none; border: none;
  transition: all 0.2s;
}
.post-action-btn svg { pointer-events: none; }
.post-action-btn:hover { background: var(--bg-input); color: var(--text-primary); opacity: 1; }
.post-action-btn:active { opacity: 1; transform: scale(0.95); }
.post-action-btn.liked { color: var(--text-primary); }
.like-btn:hover svg { fill: #FFFFFF; stroke: var(--text-primary); }

/* Inline Job Card */
.feed-job-card {
  background: var(--bg-card); border: 1px solid var(--border-gold);
  border-radius: var(--r-xl); margin-bottom: 12px; padding: 16px;
  position: relative; overflow: hidden;
}
.feed-job-card::before {
  content: ''; position: absolute; top: 0; right: 0;
  width: 80px; height: 80px;
  background: radial-gradient(circle, rgba(255,255,255,0.1), transparent);
  pointer-events: none;
}
.job-card-header { display: flex; gap: 12px; margin-bottom: 12px; }
.job-card-logo { flex-shrink: 0; }
.job-logo-img { width: 48px; height: 48px; border-radius: var(--r-md); object-fit: cover; }
.job-card-info { flex: 1; }
.job-card-info h4 { font-size: 15px; font-weight: 700; margin-bottom: 3px; }
.job-card-info span { display: block; font-size: 13px; color: var(--text-secondary); margin-bottom: 6px; }
.job-meta-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip { display: inline-block; padding: 3px 8px; border-radius: var(--r-full); font-size: 11px; font-weight: 600; }
.chip-green { background: rgba(5,150,105,0.15); color: #34d399; border: 1px solid rgba(5,150,105,0.3); }
.chip-gold { background: var(--gold-glow-sm); color: var(--text-primary); border: 1px solid var(--border-gold); }
.chip-urgent { background: rgba(220,38,38,0.1); color: #f87171; border: 1px solid rgba(220,38,38,0.25); }
.verified-the-one-badge { color: var(--text-primary); }
.apply-btn { margin-top: 0; }

/* ══════════════════════════════════════════════
   MATCH SCREEN — premium swipe
══════════════════════════════════════════════ */

/* MODE SELECT (entry) */
.match-mode-select {
  min-height: calc(100dvh - 140px);
  display: flex; flex-direction: column; align-items: stretch;
  padding: 24px 4px 12px;
  position: relative;
}
.mms-eyebrow {
  text-align: center;
  font-size: 11px; letter-spacing: 4px; text-transform: uppercase;
  color: var(--text-primary); font-weight: 600; margin-bottom: 10px;
}
.mms-title {
  text-align: center;
  font-size: 32px; font-weight: 800; letter-spacing: -0.8px; line-height: 1.08;
  color: #fff;
  margin-bottom: 8px;
}
.mms-title-accent {
  background: var(--chrome-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.mms-sub {
  text-align: center;
  font-size: 13px; color: var(--text-secondary);
  margin-bottom: 28px;
}
.mms-cards { display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px; }
.mms-card {
  display: flex; align-items: center; gap: 16px;
  padding: 20px 22px; border-radius: var(--r-xl);
  background: linear-gradient(180deg, rgba(26,26,38,0.94), rgba(14,14,22,0.9));
  border: 1px solid var(--border-silver);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 6px 22px rgba(0,0,0,0.4);
  text-align: left; color: var(--text-primary);
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative; overflow: hidden;
}
.mms-card::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 20% 0%, rgba(255,255,255,0.09), transparent 60%);
}
.mms-card:hover {
  border-color: var(--border-gold);
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 12px 32px rgba(0,0,0,0.55), 0 0 0 1px var(--gold-glow-sm), 0 0 40px rgba(255,255,255,0.12);
}
.mms-icon-wrap {
  width: 54px; height: 54px; border-radius: var(--r-md);
  background: linear-gradient(135deg, rgba(255,255,255,0.15), rgba(255,255,255,0.04));
  border: 1px solid var(--border-gold);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-primary); flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.mms-card-body { flex: 1; min-width: 0; }
.mms-card-body h3 { font-size: 17px; font-weight: 700; letter-spacing: -0.2px; margin-bottom: 4px; }
.mms-card-body p { font-size: 13px; color: var(--text-secondary); line-height: 1.45; }
.mms-arrow { font-size: 22px; color: var(--text-primary); opacity: 0.5; transition: all 0.25s; }
.mms-card:hover .mms-arrow { opacity: 1; transform: translateX(4px); }
.mms-footnote {
  margin-top: auto;
  text-align: center;
  font-size: 11px; letter-spacing: 1px; color: var(--text-muted);
}

.mms-back-btn {
  width: 36px; height: 36px; border-radius: var(--r-full);
  background: var(--bg-card); border: 1px solid var(--border-silver);
  display: flex; align-items: center; justify-content: center;
  color: var(--silver-light); transition: all 0.2s;
  flex-shrink: 0;
}
.mms-back-btn:hover { border-color: var(--silver-light); color: #fff; background: var(--silver-glow-sm); }

/* HEADER */
/* MATCH-COMPACT — positioning context for the overlaid one-time swipe hint. */
.match-swipe-view { position: relative; }
.match-header {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px;
}
.match-mode-title { font-size: 20px; font-weight: 800; letter-spacing: -0.4px; flex: 1; color: #fff; text-align: center; }
.screen-title { font-size: 22px; font-weight: 800; letter-spacing: -0.5px; flex: 1; }
.match-mode-tabs { display: flex; background: var(--bg-card); border-radius: var(--r-full); padding: 3px; border: 1px solid var(--border); }
.mode-tab {
  padding: 7px 16px; border-radius: var(--r-full);
  font-size: 13px; font-weight: 600; color: var(--text-secondary);
  transition: all 0.2s;
}
.mode-tab.active { background: linear-gradient(135deg, #FFFFFF, #B0B4BC); color: #1a1000; }
.filter-btn {
  width: 40px; height: 40px; border-radius: var(--r-full);
  background: var(--bg-card); border: 1px solid var(--border-silver);
  display: flex; align-items: center; justify-content: center;
  color: var(--silver-light); transition: all 0.2s;
  flex-shrink: 0;
}
.filter-btn:hover { border-color: var(--border-gold); color: var(--text-primary); }

/* CARD STACK */
.card-stack {
  position: relative;
  /* MATCH-HEAD — tightened budget (safe-area top is real now via
     viewport-fit=cover): safe+pad ~59 + deck bar 48 + stack + 12 + action
     row ~66 + bottom chrome ~68 → stack = 100dvh − 240 clears the nav with
     full tap targets at 390×844 (592 cap) and 375×667 (427). */
  height: calc(100dvh - 240px);
  min-height: 380px; max-height: 592px;
  display: flex; justify-content: center; align-items: center;
  perspective: 1000px;
  margin: 0 -4px 12px;
}

/* CANDIDATE SWIPE CARD */
.swipe-card {
  position: absolute;
  width: 100%; max-width: 380px;
  height: max-content; max-height: 100%;
  border-radius: var(--r-xl);
  overflow: hidden;
  cursor: grab;
  user-select: none;
  /* PL-SWIPE-SCROLL — native vertical pan stays available until the JS
     axis lock claims the gesture (horizontal drag / pull-down dismiss). */
  touch-action: pan-y;
  transform-origin: bottom center;
  background: var(--bg-card);
  border: 1px solid var(--border-silver-strong);
  box-shadow:
    var(--shadow-lg),
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 0 0 1px rgba(224,224,232,0.04),
    0 0 32px rgba(224,224,232,0.12);
  transition: box-shadow 0.2s, transform 0.2s, filter 0.3s;
}

/* Mount-flicker kill: drops transform AND filter from the transition so cards
   snap fully into their stacked positions on first render (no slide, no fade).
   Removed on the next frame (double-RAF in initMatch) so drag/swipe animate. */
.swipe-card--mounting { transition: box-shadow 0.2s; }

.swipe-card:nth-child(1) { z-index: 3; }
.swipe-card:nth-child(2) { z-index: 2; transform: scale(0.95) translateY(10px); filter: brightness(0.75); pointer-events: none; }
.swipe-card:nth-child(3) { z-index: 1; transform: scale(0.90) translateY(20px); filter: brightness(0.55); pointer-events: none; }

/* Mobile paint isolation — prevents stale text/pixels from a transitioning
   card from bleeding into the one behind it. Each card becomes its own
   compositing layer so the old card's content can't ghost onto the new. */
.swipe-card {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
  isolation: isolate;
  will-change: transform, opacity;
}
.swipe-card.liking,
.swipe-card.noping {
  will-change: transform, opacity;
  pointer-events: none;
}
#cardStack {
  position: relative;
  overflow: visible;
}

/* Swipe-exit ghost — positioned fixed on body, inherits card visuals without
   any :nth-child layering. Keeps the card image/text visible while sliding off
   without polluting the real stack's z-index or nth-child scaling. */
.swipe-card-ghost {
  width: 100%; max-width: 380px;
  height: 100%;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--border-silver-strong);
  box-shadow:
    var(--shadow-lg),
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 0 0 1px rgba(224,224,232,0.04),
    0 0 32px rgba(224,224,232,0.12);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  isolation: isolate;
}
.swipe-card:active { cursor: grabbing; }
.swipe-card.grabbing { cursor: grabbing; user-select: none; }

/* Phase 5-3 polish: native HTML5 drag on <img> elements (Edge default) would
   consume mousedown for the OS drag protocol and never deliver it to the
   card's gesture listener. Disabling user-drag on all card images keeps
   mousedown reaching .swipe-card / .jd-card. */
.swipe-card img,
.jd-card img {
  -webkit-user-drag: none;
  user-drag: none;
}

/* Photo carousel */
.cc-photos {
  position: absolute; inset: 0;
  background: var(--bg-surface);
}
.cc-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.cc-photo.cc-photo-active { opacity: 1; }
/* PL-CANDIDATES-render: initials avatar fallback for candidates with
   no uploaded photos. Replaces the empty `<img>` block — same absolute
   inset so it covers the photo region. Background gradient set inline
   (deterministic per candidate first-char). No DiceBear / network.
   PL-CANDIDATES-render-fix: position + dimensions made explicit so the
   cascade doesn't depend on `.cc-photo`'s rule winning at every level. */
.cc-photo-initial {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Playfair Display', Georgia, serif;
  color: rgba(255,255,255,0.92);
  text-shadow: 0 2px 16px rgba(0,0,0,0.25);
}
.cc-photo-initial-letter {
  font-size: clamp(96px, 28vw, 180px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
}
/* PL-CANDIDATES-render-fix-3: every .swipe-card child is position:absolute
   (.cc-photos, .cc-photo, .cc-info, .cc-gradient, .cc-stamp), so
   `height: max-content` (line 7909) collapses to 0 (replaced <img>
   elements don't contribute to max-content when absolutely positioned —
   browser diagnostic confirmed: imgNaturalSize 1600x600 but
   imgRenderedHeight 0). Give the card explicit 100% height of its
   .card-stack parent for ALL photo-region card variants — covers
   initials-only fallback AND real-photo gallery cards AND job cards
   (.swipe-card.job-card uses .cc-photos too).

   PL-CANDIDATES-render-fix (61a3a8d) had a narrower :has(.cc-photo-initial)
   rule that only matched empty-photo cards; this broader :has(.cc-photos)
   rule supersedes it and fixes the real-photo case that never rendered
   correctly all day. */
.swipe-card:has(.cc-photos) {
  height: 100%;
}
.cc-photo-tap {
  position: absolute; top: 0; bottom: 40%;
  width: 40%; z-index: 5;
  cursor: pointer;
}
.cc-photo-tap.cc-tap-left { left: 0; }
.cc-photo-tap.cc-tap-right { right: 0; }

/* Photo dots indicator */
.cc-photo-dots {
  position: absolute; top: 10px; left: 10px; right: 10px;
  display: flex; gap: 4px; z-index: 6;
}
.cc-photo-dot {
  flex: 1; height: 3px; border-radius: 2px;
  background: rgba(255,255,255,0.3);
  overflow: hidden;
  transition: background 0.2s;
}
.cc-photo-dot.cc-dot-active { background: rgba(255,255,255,0.95); }

/* Gradient overlay */
.cc-gradient {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.55) 72%, rgba(0,0,0,0.92) 100%);
  pointer-events: none;
}

/* Stamps */
.cc-stamp {
  position: absolute; top: 32px;
  padding: 10px 22px;
  font-size: 28px; font-weight: 900; letter-spacing: 3px;
  border: 4px solid; border-radius: 8px;
  opacity: 0;
  transition: opacity 0.08s linear;
  z-index: 10;
  pointer-events: none;
  text-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.cc-stamp-like {
  left: 24px;
  color: #4ade80; border-color: #4ade80;
  transform: rotate(-15deg);
  box-shadow: 0 0 24px rgba(74,222,128,0.4);
}
.cc-stamp-nope {
  right: 24px;
  color: #f87171; border-color: #f87171;
  transform: rotate(15deg);
  box-shadow: 0 0 24px rgba(248,113,113,0.4);
}
.swipe-card.liking .cc-stamp-like { opacity: 1; }
.swipe-card.noping .cc-stamp-nope { opacity: 1; }

/* Info overlay */
.cc-info {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 18px 20px 22px;
  display: flex; flex-direction: column; gap: 8px;
  color: #fff;
  z-index: 7;
}
.cc-badge-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 2px; }
.cc-crew-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: var(--r-full);
  font-size: 10px; font-weight: 800; letter-spacing: 1.2px;
  text-transform: uppercase;
  border: 1px solid transparent;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.cc-crew-badge.gold {
  background: linear-gradient(135deg, #FFFFFF, #B0B4BC);
  color: #1a1000;
  box-shadow: 0 2px 12px rgba(255,255,255,0.4);
}
.cc-crew-badge.silver {
  background: var(--chrome-grad);
  color: #1a1a1a;
}
.cc-crew-badge.bronze {
  background: linear-gradient(135deg, #b87333, #d8934a);
  color: #2a1400;
}
.cc-interest-chip {
  padding: 4px 10px; border-radius: var(--r-full);
  font-size: 11px; font-weight: 600;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
  backdrop-filter: blur(6px);
}
/* WAVE-5 — last neon-cyan token retired: gig chip joins the muted palette. */
.cc-interest-chip.gig { border-color: rgba(255,255,255,0.35); color: #fff; background: rgba(255,255,255,0.12); }
/* BOOST-4b — quiet urgent chip: muted terracotta from the CS-BAND-2 ramp. */
.jc-urgent-chip {
  flex-shrink: 0; display: inline-block; vertical-align: middle;
  font-size: 9px; font-weight: 800; letter-spacing: 0.7px; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; margin-left: 6px;
  color: #C4695A; border: 1px solid rgba(196,105,90,0.55);
  background: rgba(196,105,90,0.12);
  white-space: nowrap;
}
.cc-interest-chip.ft  { border-color: var(--border-gold); color: var(--text-primary); background: var(--gold-glow-sm); }
/* BUG-2 — gold "✈ Relocate" chip; matches the detail viewer's relocate pill (#FFFFFF). */
.cc-interest-chip.relocate { border-color: rgba(255,255,255,0.35); color: #FFFFFF; background: rgba(255,255,255,0.15); }

.cc-name {
  font-size: 32px; font-weight: 900; letter-spacing: -1px;
  line-height: 1; margin: 0;
  text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
.cc-role {
  font-size: 15px; font-weight: 700; color: #B0B4BC;
  margin-top: 2px; text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.cc-last-venue {
  font-size: 13px; color: rgba(255,255,255,0.75);
  display: flex; align-items: center; gap: 6px;
}
.cc-last-venue::before {
  content: ''; display: inline-block; width: 4px; height: 4px;
  border-radius: 50%; background: #FFFFFF;
}
.cc-skills { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.cc-skill-chip {
  font-size: 10px; font-weight: 600;
  padding: 3px 8px; border-radius: var(--r-full);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff;
  backdrop-filter: blur(6px);
  letter-spacing: 0.2px;
}

/* PL-FT-CARD-CLEANUP — FT-deck card: one-line skills strip (muted meta
   family) + quiet CrewScore tier pill (gold hairline, replaces the raw
   score gauge on FT cards only). */
.cc-skills-line {
  font-size: 12px; color: rgba(255,255,255,0.65);
  margin-top: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cc-tier-pill {
  font-size: 11px; font-weight: 700; letter-spacing: 0.4px;
  color: #E5B860;
  padding: 4px 12px; border-radius: 999px;
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(229,184,96,0.45);
  backdrop-filter: blur(6px);
  white-space: nowrap;
}
.cc-bottom-row {
  display: flex; align-items: center; gap: 10px;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.cc-city {
  font-size: 13px; color: rgba(255,255,255,0.88); font-weight: 500;
  display: inline-flex; align-items: center; gap: 4px;
  flex: 1;
}
/* PL-39 — keep the photo the hero: cap the info overlay to roughly the bottom
   45% of the card (content bottom-anchored; the top clips if it ever overflows
   instead of climbing over the portrait), and scope the gradient fade to
   candidate cards so the upper photo stays clean. Skills chips were also
   removed from the card (they live on the full profile modal). */
.candidate-card .cc-info { max-height: 52%; justify-content: flex-end; overflow: hidden; }
.candidate-card .cc-gradient {
  background: linear-gradient(to bottom, transparent 52%, rgba(0,0,0,0.5) 74%, rgba(0,0,0,0.9) 100%);
}
/* nationality, small + dimmer, on the candidate card's location row */
.cc-nat { font-weight: 400; color: rgba(255,255,255,0.62); }

/* PL-45 — fix PL-39 fallout: with tall content (3-line headline + wrapped
   chips) the bottom-anchored .cc-info overflowed its cap and the top-clip ate
   the chips row (RECRUIT / Gig / Full Time / Relocate). Clamp the variable-
   height text so the stack fits within the (slightly raised, 52%) cap; the
   chips row stays fully visible and the photo stays the hero. Scoped strictly
   to .candidate-card — job cards share these classes and must NOT change. */
.candidate-card .px-name-block--card .px-headline {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.candidate-card .cc-role,
.candidate-card .cc-last-venue {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* CrewScore gauge */
.cc-score {
  display: flex; align-items: center; gap: 8px;
  background: rgba(0,0,0,0.45);
  padding: 5px 10px 5px 6px;
  border-radius: var(--r-full);
  border: 1px solid var(--border-gold);
  backdrop-filter: blur(6px);
}
.cc-score-gauge {
  position: relative; width: 30px; height: 30px;
  flex-shrink: 0;
}
.cc-score-gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.cc-score-gauge .gauge-track { stroke: rgba(255,255,255,0.15); fill: none; stroke-width: 3; }
.cc-score-gauge .gauge-arc { stroke: url(#ccScoreGrad); fill: none; stroke-width: 3; stroke-linecap: round; transition: stroke-dasharray 1.2s cubic-bezier(0.4, 0, 0.2, 1); }
.cc-score-label {
  display: flex; flex-direction: column;
  line-height: 1;
}
.cc-score-label .cc-score-num { font-size: 14px; font-weight: 800; color: var(--text-primary); }
.cc-score-label .cc-score-sub { font-size: 9px; letter-spacing: 1.2px; color: rgba(255,255,255,0.6); text-transform: uppercase; font-weight: 600; }

/* JOB LISTING CARD (Looking to Work) */
.job-card {
  background: linear-gradient(180deg, #151521 0%, #0a0a12 100%);
  display: flex; flex-direction: column;
}
.jc-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-size: cover; background-position: center;
  flex-shrink: 0;
}
.jc-gradient {
  position: absolute; top: 0; left: 0; right: 0;
  aspect-ratio: 1 / 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, transparent 40%, rgba(10,10,18,0.85) 100%);
}
.jc-top {
  position: absolute; top: 14px; left: 14px; right: 14px;
  z-index: 6;
  display: flex; justify-content: space-between; align-items: flex-start;
}
.jc-logo {
  width: 52px; height: 52px; border-radius: var(--r-sm);
  overflow: hidden;
  background: #fff;
  border: 2px solid rgba(255,255,255,0.9);
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.jc-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jc-info {
  position: relative;
  padding: 0 20px 20px;
  flex: 1;
  display: flex; flex-direction: column;
  color: #fff;
  margin-top: -32px;
  z-index: 5;
}
.jc-title-row { margin-bottom: 2px; }
.jc-title {
  font-size: 26px; font-weight: 900; letter-spacing: -0.8px;
  line-height: 1.1; color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,0.6);
  margin: 0;
}
.jc-company {
  font-size: 15px; font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.jc-meta {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 10px;
}
.jc-location {
  font-size: 12px; font-weight: 600;
  color: rgba(255,255,255,0.8);
}
.jc-salary {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  background: linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.08));
  border: 1px solid var(--border-gold);
  border-radius: var(--r-full);
  align-self: flex-start;
  font-size: 13px; font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 10px;
}
.jc-salary-icon { font-size: 14px; }
.jc-desc {
  font-size: 13px; line-height: 1.5;
  color: rgba(255,255,255,0.78);
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.jc-perks-row {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.jc-perks-label {
  display: block;
  font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--text-muted); font-weight: 700;
  margin-bottom: 6px;
}
.jc-perks {
  display: flex; flex-wrap: wrap; gap: 5px;
}
.jc-perk {
  font-size: 10px; font-weight: 600;
  padding: 4px 8px;
  border-radius: var(--r-full);
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border-silver);
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.2px;
}

/* ═══════════════════════════════════════════════════
   Phase 5-4 · Job Detail Modal
   ═══════════════════════════════════════════════════ */
.jd-modal .jd-card {
  max-width: 480px;
  padding: 0;
  overflow: hidden;
  display: flex; flex-direction: column;
  max-height: 92vh;
}
.jd-photos {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--bg-surface);
  flex-shrink: 0;
}
.jd-body {
  padding: 18px 20px 96px;
  overflow-y: auto;
  flex: 1;
  color: #fff;
}
.jd-header {
  display: flex; gap: 12px; align-items: center;
  margin-bottom: 12px;
}
.jd-logo {
  width: 48px; height: 48px; border-radius: var(--r-sm);
  overflow: hidden; flex-shrink: 0;
  background: #fff;
  border: 2px solid rgba(255,255,255,0.85);
  box-shadow: 0 4px 12px rgba(0,0,0,0.35);
}
.jd-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jd-brand { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.jd-brand-row { display: flex; align-items: center; gap: 8px; }
.jd-brand-name {
  font-size: 14px; font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.2px;
}
.jd-title {
  font-family: 'Playfair Display', serif;
  font-size: 26px; font-weight: 800;
  line-height: 1.15; letter-spacing: -0.6px;
  color: #fff;
  margin: 4px 0 12px;
  padding-right: 32px;
}
.jd-location {
  font-size: 13px; font-weight: 600;
  color: rgba(255,255,255,0.78);
  margin: 8px 0 4px;
}
.jd-section {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.jd-section h4 {
  font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--text-primary); font-weight: 800;
  margin: 0 0 8px;
}
.jd-section p {
  font-size: 13px; line-height: 1.55;
  color: rgba(255,255,255,0.84);
  margin: 0;
  white-space: pre-line;
}
.jd-req-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
  font-size: 13px; line-height: 1.5;
  color: rgba(255,255,255,0.82);
}
.jd-req-list li strong { color: #fff; font-weight: 700; }
.jd-chip {
  display: inline-block;
  font-size: 11px; font-weight: 600;
  padding: 3px 8px;
  border-radius: var(--r-full);
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border-silver);
  color: rgba(255,255,255,0.88);
  margin-right: 4px;
}
.jd-empty { font-size: 12px; color: var(--text-muted); margin: 0; font-style: italic; }
.jd-brand-link {
  display: block; width: 100%;
  margin-top: 20px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border-gold);
  border-radius: var(--r-md);
  color: var(--text-primary);
  font-size: 13px; font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: background 0.18s, transform 0.15s;
}
.jd-brand-link:hover {
  background: rgba(255,255,255,0.12);
  transform: translateY(-1px);
}
.jd-apply-bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 14px 18px calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(11,13,18,0) 0%, rgba(11,13,18,0.96) 35%, rgba(11,13,18,1) 100%);
  border-top: 1px solid rgba(255,255,255,0.06);
  z-index: 10;
}
.jd-apply-btn {
  width: 100%;
  padding: 14px;
  font-size: 15px; font-weight: 800;
  letter-spacing: 0.4px;
  border-radius: var(--r-md);
}

/* Gig-specific card extras */
.jc-desc-sm { -webkit-line-clamp: 2; }
.jc-event-banner {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px;
  border-radius: var(--r-full);
  background: linear-gradient(135deg, rgba(248,113,113,0.18), rgba(129,140,255,0.12));
  border: 1px solid rgba(248,113,113,0.45);
  color: #fca5a5;
  font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
  align-self: flex-start;
  margin-bottom: 4px;
  box-shadow: 0 0 14px rgba(248,113,113,0.15);
}
.jc-event-name { color: #fff; letter-spacing: 0.5px; font-weight: 700; text-transform: none; font-size: 11px; }
.jc-gig-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  margin: 8px 0 6px;
}
.jc-gig-cell {
  display: flex; flex-direction: column; gap: 1px;
  padding: 6px 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-silver);
  border-radius: var(--r-sm);
}
.jc-gig-lbl { font-size: 8px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-muted); font-weight: 800; }
.jc-gig-val { font-size: 11px; color: #fff; font-weight: 700; letter-spacing: 0.2px; }
.jc-gig-dress {
  font-size: 10px; color: var(--text-primary);
  padding: 5px 10px; border-radius: var(--r-full);
  background: var(--gold-glow-sm);
  border: 1px solid var(--border-gold);
  align-self: flex-start;
  margin-bottom: 6px;
  font-weight: 600;
}

/* WORK-TYPE SELECTOR (mandatory before showing jobs) */
.wts-wrap {
  margin-bottom: 12px;
}
.wts-toggle {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-bottom: 10px;
}
.wts-btn {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 12px;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(24,24,34,0.95), rgba(14,14,22,0.92));
  border: 1.5px solid var(--border-silver);
  color: var(--text-secondary);
  text-align: left;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  position: relative; overflow: hidden;
}
.wts-btn:hover {
  border-color: var(--border-silver-strong);
  color: #fff;
  transform: translateY(-1px);
}
.wts-btn.active {
  border-color: var(--text-primary);
  color: #fff;
  background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.04));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 0 0 1px var(--gold-glow-sm),
    0 6px 20px rgba(255,255,255,0.18);
}
.wts-btn.active::after {
  content: '✓'; position: absolute; top: 8px; right: 10px;
  font-size: 11px; font-weight: 900; color: var(--text-primary);
}
.wts-btn-icon {
  width: 42px; height: 42px; border-radius: var(--r-sm);
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--border-gold);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-primary);
  flex-shrink: 0;
  transition: all 0.2s;
}
.wts-btn.active .wts-btn-icon {
  background: linear-gradient(135deg, #FFFFFF, #B0B4BC);
  border-color: transparent;
  color: #1a1000;
  box-shadow: 0 4px 14px rgba(255,255,255,0.35);
}
.wts-btn-body { min-width: 0; flex: 1; }
.wts-btn-title {
  font-size: 14px; font-weight: 700;
  letter-spacing: -0.2px;
  line-height: 1.1;
}
.wts-btn.active .wts-btn-title { color: var(--text-primary); }
.wts-btn-sub {
  font-size: 11px; color: var(--text-muted);
  margin-top: 2px;
}
.wts-prompt {
  text-align: center;
  padding: 14px 20px;
  background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  border: 1px dashed var(--border-gold);
  border-radius: var(--r-md);
  font-size: 13px; font-weight: 500;
  color: var(--text-primary);
  letter-spacing: 0.2px;
  margin: 0;
  animation: wtsPromptPulse 2.4s ease-in-out infinite;
}
@keyframes wtsPromptPulse {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; }
}
/* When the prompt is hidden after selection */
.wts-wrap.wts-selected .wts-prompt { display: none; }

/* Gated state — no type picked yet: hide cards + swipe buttons */
.match-swipe-view.wts-gated .card-stack,
.match-swipe-view.wts-gated .swipe-buttons,
.match-swipe-view.wts-gated .swipe-hint-pill { display: none !important; }
.match-swipe-view.wts-gated .match-modal { display: none !important; }

/* SWIPE HINT PILL (first-run UX)
   MATCH-COMPACT — absolute: floats over the top of the deck at its static
   position (no layout height), shown once per user then never again. */
.swipe-hint-pill {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  z-index: 30;
  display: none;
  margin: 6px 0 0;
  padding: 8px 14px;
  white-space: nowrap;
  background: linear-gradient(135deg, rgba(255,255,255,0.14), rgba(255,255,255,0.04));
  border: 1px solid var(--border-gold);
  border-radius: var(--r-full);
  align-items: center; gap: 8px;
  max-width: fit-content;
  font-size: 11px; font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.3px;
  box-shadow: 0 2px 10px rgba(255,255,255,0.1);
  animation: hintPulse 2.2s ease-in-out infinite;
  transition: opacity 0.4s ease;   /* MATCH-HINT — fade-out dismiss */
}
.swipe-hint-pill.show { display: inline-flex; }
.swipe-hint-pill kbd {
  display: inline-block;
  padding: 1px 6px;
  margin: 0 1px;
  background: rgba(255,255,255,0.18);
  border: 1px solid var(--border-gold);
  border-radius: 4px;
  font-family: var(--font);
  font-size: 10px; font-weight: 700;
  color: var(--text-primary);
}
/* MATCH-HINT — the pulse's transform REPLACED the base translateX(-50%)
   centering (animations override the whole transform property), throwing the
   pill to the card's top-right, clipped. Keep the X-shift in every frame. */
@keyframes hintPulse {
  0%, 100% { opacity: 0.9; transform: translateX(-50%) translateY(0); }
  50%      { opacity: 1;   transform: translateX(-50%) translateY(-2px); }
}

/* SWIPE BUTTONS */
.swipe-buttons {
  display: flex; justify-content: center; align-items: center; gap: 22px;
  padding: 6px 0 4px;
}
.swipe-btn {
  border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s, background 0.2s;
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.08);
}
.swipe-btn:active { transform: scale(0.88); }

.nope-btn {
  width: 62px; height: 62px;
  background: rgba(220,38,38,0.12);
  border: 2px solid rgba(248,113,113,0.5);
  color: #f87171;
}
.nope-btn:hover { background: rgba(220,38,38,0.22); transform: scale(1.08); box-shadow: 0 6px 22px rgba(220,38,38,0.3); }

.undo-btn {
  width: 48px; height: 48px;
  background: linear-gradient(180deg, rgba(28,28,40,0.95), rgba(16,16,24,0.9));
  border: 1.5px solid var(--border-silver-strong);
  color: var(--silver-light);
}
.undo-btn:hover { border-color: var(--silver-light); color: #fff; transform: scale(1.08) rotate(-20deg); box-shadow: 0 6px 22px rgba(224,224,232,0.15); }

.like-btn.swipe-btn {
  width: 62px; height: 62px;
  background: linear-gradient(135deg, #FFFFFF, #B0B4BC);
  border: 2px solid transparent;
  color: #1a1000;
}
.like-btn.swipe-btn:hover { transform: scale(1.08); box-shadow: 0 8px 26px rgba(255,255,255,0.45); }

.bank-btn { display: none; }
.swipe-hint { display: none; }

/* FILTERS PANEL (shared) */
.filters-note { font-size: 12px; color: var(--text-muted); padding: 0 20px 12px; margin-top: -6px; }
.filter-toggle {
  display: flex; gap: 6px; padding: 4px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
}
.ftg {
  flex: 1;
  padding: 9px 14px; border-radius: var(--r-full);
  font-size: 13px; font-weight: 600;
  color: var(--text-secondary);
  transition: all 0.2s;
  text-align: center;
}
.ftg.active {
  background: linear-gradient(135deg, #FFFFFF, #B0B4BC);
  color: #1a1000;
  box-shadow: 0 2px 10px rgba(255,255,255,0.3);
}
.filter-val { margin-left: 8px; color: var(--text-primary); font-weight: 700; font-size: 12px; }

/* Dual range slider for age */
.dual-range {
  position: relative; height: 36px;
  display: flex; align-items: center;
  padding: 0 2px;
}
.dual-range-track {
  position: absolute; left: 0; right: 0; top: 50%; height: 4px;
  background: var(--bg-surface);
  border-radius: 2px;
  transform: translateY(-50%);
}
.dual-range-fill {
  position: absolute; top: 50%; height: 4px;
  background: linear-gradient(90deg, #FFFFFF, #B0B4BC);
  border-radius: 2px;
  transform: translateY(-50%);
}
.dual-range-input {
  position: absolute; left: 0; right: 0;
  width: 100%; height: 36px;
  background: transparent;
  pointer-events: none;
  -webkit-appearance: none; appearance: none;
}
.dual-range-input::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: linear-gradient(135deg, #FFFFFF, #B0B4BC);
  border: 2px solid #1a1000;
  box-shadow: 0 2px 8px rgba(255,255,255,0.4);
  pointer-events: auto;
  cursor: grab;
}
.dual-range-input::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: linear-gradient(135deg, #FFFFFF, #B0B4BC);
  border: 2px solid #1a1000;
  box-shadow: 0 2px 8px rgba(255,255,255,0.4);
  pointer-events: auto;
  cursor: grab;
}

.filters-footer {
  display: flex; gap: 10px;
  padding: 16px 20px 20px;
  border-top: 1px solid var(--border);
  margin-top: 12px;
}
.filters-footer .btn-outline,
.filters-footer .btn-primary { flex: 1; padding: 12px 20px; font-size: 14px; }

/* Match Modal */
.match-modal {
  display: none; position: absolute; inset: 0; z-index: 50;
  background: rgba(7,9,15,0.92); backdrop-filter: blur(16px);
  align-items: center; justify-content: center; border-radius: inherit;
}
.match-modal.show { display: flex; }
.match-modal-inner { text-align: center; padding: 32px; }
.match-burst { font-size: 48px; margin-bottom: 12px; display: block; animation: burst 0.5s ease; }
@keyframes burst { 0% { transform: scale(0); } 60% { transform: scale(1.3); } 100% { transform: scale(1); } }
.match-modal-inner h2 { font-size: 32px; font-weight: 900; letter-spacing: -1px; background: linear-gradient(135deg, var(--text-primary), #FFFFFF); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 8px; }
.match-modal-inner p { font-size: 16px; color: var(--text-secondary); margin-bottom: 4px; }
.match-sub { font-size: 13px; color: var(--text-muted); margin-bottom: 24px; }
.match-avatars { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 28px; }
.match-av { width: 64px; height: 64px; border-radius: var(--r-full); object-fit: cover; border: 3px solid var(--text-primary); }
.match-heart { font-size: 28px; color: var(--text-primary); animation: pulse 1s infinite; }
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.15); } }

/* ══════════════════════════════════════════════
   PROFILE SCREEN
══════════════════════════════════════════════ */
#screen-profile { padding: 0; }
.profile-cover {
  height: 140px;
  background: linear-gradient(135deg, #0D1A30, #1A2E50, #0D1A30);
  position: relative; overflow: hidden;
}
.profile-cover::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(255,255,255,0.12), transparent 70%);
}
.profile-cover-gradient { position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
.profile-edit-btn {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  display: flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: var(--r-full);
  background: rgba(7,9,15,0.6); border: 1px solid var(--border);
  color: var(--text-secondary); font-size: 12px; font-weight: 600;
  backdrop-filter: blur(10px);
  transition: all 0.2s;
}
.profile-edit-btn:hover { border-color: var(--border-gold); color: var(--text-primary); }

.profile-body { padding: 0 16px; }
.profile-avatar-wrap { display: flex; align-items: flex-end; justify-content: space-between; margin-top: -28px; margin-bottom: 12px; }
.profile-avatar-ring { padding: 3px; background: var(--bg-elevated); border-radius: var(--r-full); flex-shrink: 0; }
.gold-ring-lg { background: linear-gradient(135deg, #FFFFFF, #B0B4BC); padding: 3px; }
.profile-avatar { width: 80px; height: 80px; border-radius: var(--r-full); object-fit: cover; display: block; }

.available-toggle {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: var(--r-full);
  background: rgba(5,150,105,0.1); border: 1px solid rgba(5,150,105,0.3);
  font-size: 12px; font-weight: 600; color: #34d399;
  transition: all 0.2s;
}
.available-toggle:hover { background: rgba(5,150,105,0.18); }
.toggle-dot { width: 7px; height: 7px; border-radius: var(--r-full); background: #34d399; box-shadow: 0 0 6px rgba(52,211,153,0.8); animation: blink 2s infinite; }
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }
.toggle-text { font-size: 11px; }

/* PL-VIEWER-FIX-C-B: Open to Full-Time sibling toggle. Teal/blue tint so users
   can tell it apart from the green GigShift toggle at a glance. Same dimensions
   + animation. The .ft-toggle class overrides the green palette on the base
   .available-toggle rules. */
.available-toggle.ft-toggle {
  background: rgba(45, 120, 200, 0.10);
  border-color: rgba(45, 120, 200, 0.30);
  color: #5fa8e0;
  margin-top: 6px;
}
.available-toggle.ft-toggle:hover { background: rgba(45, 120, 200, 0.18); }
.available-toggle.ft-toggle .toggle-dot {
  background: #5fa8e0;
  box-shadow: 0 0 6px rgba(95, 168, 224, 0.8);
}

/* PL-RELOCATE: Open-to-Relocate opt-in toggle. Gold variant — distinct
   from the green GigShift + teal FT toggles. Default OFF state renders
   muted gray (visually communicates "opt-in, not yet enabled"); ON
   state lights up gold with globe glow. Adding .is-off cleanly overrides
   the gold palette without removing the .relocate-toggle class. */
.available-toggle.relocate-toggle {
  background: rgba(255,255,255, 0.10);
  border-color: rgba(255,255,255, 0.30);
  color: var(--text-primary);
  margin-top: 6px;
}
.available-toggle.relocate-toggle:hover { background: rgba(255,255,255, 0.18); }
.available-toggle.relocate-toggle .toggle-dot {
  background: #B0B4BC;
  box-shadow: 0 0 6px rgba(129,140,255, 0.8);
}
.available-toggle.relocate-toggle.is-off {
  background: rgba(71, 85, 105, 0.10);
  border-color: rgba(71, 85, 105, 0.30);
  color: var(--text-muted);
}
.available-toggle.relocate-toggle.is-off:hover { background: rgba(71, 85, 105, 0.16); }
.available-toggle.relocate-toggle.is-off .toggle-dot {
  background: var(--text-muted);
  box-shadow: none;
  animation: none;
}

.profile-info { margin-bottom: 16px; }
.profile-name-row { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.profile-name-row h2 { font-size: 22px; font-weight: 800; letter-spacing: -0.5px; }
.verified-badge { color: var(--text-primary); }
.profile-title { font-size: 13px; color: var(--text-secondary); margin-bottom: 8px; }
/* PL-38 — Position prominence: own gold line under the name, mirroring the
   match card's .cc-role treatment (gold-light, 700). Nationality stays small
   on the .profile-title line. */
.profile-role {
  font-size: 16px; font-weight: 700; color: #B0B4BC;
  letter-spacing: -0.2px; margin: 2px 0 4px;
}
.profile-nationality { color: var(--text-secondary); }
.profile-bio { font-size: 13px; color: var(--text-secondary); line-height: 1.6; }

/* CrewScore Card */
.crewscore-card {
  display: flex; gap: 16px; align-items: center;
  background: var(--bg-card); border: 1px solid var(--border-gold);
  border-radius: var(--r-xl); padding: 16px;
  margin-bottom: 16px;
  background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
}
.crewscore-left { flex-shrink: 0; }
.crewscore-gauge-wrap { position: relative; }
.score-number { dominant-baseline: auto; }
.score-gauge { overflow: visible; }
.crewscore-right { flex: 1; }
.score-tier { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
.tier-icon { font-size: 14px; }
.tier-label { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.score-desc { font-size: 12px; color: var(--text-secondary); margin-bottom: 8px; line-height: 1.5; }
.score-factors { display: flex; flex-direction: column; gap: 3px; margin-bottom: 10px; }
.factor { font-size: 11px; font-weight: 600; }
.factor.positive { color: #34d399; }
.factor.negative { color: #f87171; }
.btn-sm { font-size: 12px; font-weight: 600; }
.btn-ghost.btn-sm { padding: 6px 0; color: var(--text-primary); }

/* Badge Row */
.badge-row {
  display: flex; align-items: center; gap: 14px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-xl); padding: 14px 16px;
  margin-bottom: 16px;
}
.badge-item {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 14px; border-radius: var(--r-md);
  min-width: 68px;
}
.badge-gold { background: rgba(255,255,255,0.1); border: 1px solid var(--border-gold); }
.badge-stars { font-size: 14px; color: var(--text-primary); letter-spacing: 1px; }
.badge-label { font-size: 10px; font-weight: 700; color: var(--text-primary); text-transform: uppercase; letter-spacing: 1px; }
.badge-stats { display: flex; gap: 14px; }
.bstat { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.bstat-num { font-size: 14px; font-weight: 800; }
.bstat-lbl { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }

/* Profile Tabs */
.profile-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; scroll-snap-type: x proximity; gap: 2px; background: var(--bg-card); border-radius: var(--r-full); padding: 3px; margin-bottom: 14px; border: 1px solid var(--border); }
.profile-tabs::-webkit-scrollbar { display: none; }
/* flex:1 0 auto → tabs grow to fill the row when few, but never shrink below
   their label when many (≥7 on the Cuadrix strip) — the row overflows into a
   horizontal swipe instead of clipping the last tab. white-space:nowrap keeps
   each label on one line. */
.ptab { flex: 1 0 auto; white-space: nowrap; scroll-snap-align: start; padding: 8px; border-radius: var(--r-full); font-size: 12px; font-weight: 600; color: var(--text-muted); transition: all 0.2s; }
.ptab.active { background: linear-gradient(135deg, #FFFFFF, #B0B4BC); color: #1a1000; }

.profile-tab-content { display: none; }
.profile-tab-content.active { display: block; }

.exp-entry { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.exp-entry:last-child { border-bottom: none; }
.exp-logo { flex-shrink: 0; }
.exp-logo-img { width: 40px; height: 40px; border-radius: var(--r-sm); }
.exp-info h4 { font-size: 14px; font-weight: 700; }
.exp-info span { display: block; font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.exp-dates { color: var(--text-muted) !important; font-size: 11px !important; }

.skills-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.skill-chip { padding: 7px 14px; border-radius: var(--r-full); font-size: 13px; font-weight: 500; background: var(--bg-surface); border: 1px solid var(--border); color: var(--text-secondary); }

.cert-entry { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.cert-entry:last-child { border-bottom: none; }
.cert-icon { font-size: 24px; }
.cert-info h4 { font-size: 14px; font-weight: 700; }
.cert-info span { display: block; font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.cert-id { font-size: 11px !important; color: var(--text-muted) !important; font-family: monospace; }
.qr-btn { background: var(--gold-glow-sm); border: 1px solid var(--border-gold); color: var(--text-primary); font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 4px; cursor: pointer; font-family: var(--font); margin-left: 6px; }

.vault-notice { display: flex; gap: 10px; align-items: flex-start; background: rgba(255,255,255,0.06); border: 1px solid var(--border-gold); border-radius: var(--r-md); padding: 12px; margin-bottom: 14px; font-size: 12px; color: var(--text-secondary); line-height: 1.5; }
.doc-list { display: flex; flex-direction: column; gap: 8px; }
.doc-item { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--r-md); background: var(--bg-card); border: 1px solid var(--border); }
.doc-item .doc-icon { font-size: 18px; }
.doc-item span:nth-child(2) { flex: 1; font-size: 14px; }
.doc-status { font-size: 12px; font-weight: 600; }
.doc-item.uploaded .doc-status.uploaded { color: #34d399; }
.doc-status.pending { color: var(--text-primary); }

/* ══════════════════════════════════════════════
   CREWSCORE SCREEN
══════════════════════════════════════════════ */
.screen-header-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.cscore-hero { display: flex; flex-direction: column; align-items: center; padding: 12px 0 20px; }
.cscore-gauge { filter: drop-shadow(0 0 16px rgba(255,255,255,0.3)); }
.cscore-trend { font-size: 14px; font-weight: 600; color: #34d399; margin-top: 4px; }

.cscore-tiers {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-xl);
  padding: 4px 0; margin-bottom: 16px; overflow: hidden;
}
.tier-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; transition: background 0.2s;
}
.tier-row:hover { background: var(--bg-input); }
.current-tier { background: rgba(255,255,255,0.06); border-left: 3px solid var(--text-primary); }
.tier-dot { width: 10px; height: 10px; border-radius: var(--r-full); flex-shrink: 0; }
.gold-dot { background: #FFFFFF; }
.silver-dot { background: #94A3B8; }
.blue-dot { background: var(--cyan); }
.grey-dot { background: var(--text-muted); }
.dim-dot { background: #2A3545; }
.tier-range { font-size: 13px; font-weight: 600; color: var(--text-secondary); min-width: 70px; }
.tier-name { flex: 1; font-size: 14px; font-weight: 600; }
.tier-ring { font-size: 14px; }
.gold-ring-sm { color: var(--text-primary); }
.silver-ring-sm { color: #94A3B8; }
.blue-ring-sm { color: var(--cyan); }

.cscore-factors { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 20px; }
.cscore-factors h3 { font-size: 16px; font-weight: 700; margin-bottom: 16px; }
.factor-item { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.factor-item:last-child { margin-bottom: 0; }
.fi-label { font-size: 12px; color: var(--text-secondary); min-width: 130px; flex-shrink: 0; }
.fi-bar-wrap { flex: 1; height: 6px; background: var(--bg-surface); border-radius: var(--r-full); overflow: hidden; }
.fi-bar { height: 100%; border-radius: var(--r-full); background: linear-gradient(90deg, #FFFFFF, #B0B4BC); transition: width 1s ease; }
.fi-bar-cyan { background: linear-gradient(90deg, var(--cyan), #38BDF8); }
.fi-bar-red { background: linear-gradient(90deg, #DC2626, #F87171); }
.fi-pts { font-size: 12px; font-weight: 700; color: var(--text-primary); min-width: 48px; text-align: right; }
.fi-pts.negative { color: #f87171; }
.factor-item.negative .fi-label { color: #f87171; }

/* ══════════════════════════════════════════════
   HR HUB
══════════════════════════════════════════════ */
.hr-quick-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 20px; }
.qa-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 16px 8px; border-radius: var(--r-lg);
  background: var(--bg-card); border: 1px solid var(--border);
  font-size: 12px; font-weight: 600; color: var(--text-secondary);
  transition: all 0.2s;
}
.qa-card:hover { border-color: var(--border-gold); color: var(--text-primary); transform: translateY(-1px); }

.hr-section { margin-bottom: 20px; }
.section-title-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.section-title-row h3 { font-size: 16px; font-weight: 700; }
.section-actions { display: flex; gap: 8px; }
/* BTN-1 — small section-header actions (＋ Post, ＋ Add Item, Open →) are
   compact SECONDARY pills, never loud fills. */
.btn-gold.btn-sm {
  background: transparent;
  border: 1px solid var(--btn-hairline);
  color: #cfd3d8;
  border-radius: var(--r-full);
  box-shadow: none;
}
.btn-gold.btn-sm:hover { border-color: rgba(255,255,255,0.28); color: #fff; transform: none; box-shadow: none; }

/* Roster Grid */
.roster-grid { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden; font-size: 11px; }
.roster-header, .roster-row { display: grid; grid-template-columns: 100px repeat(7, 1fr); }
.roster-header { background: var(--bg-surface); padding: 8px 0; }
.roster-name-col, .roster-day { display: flex; align-items: center; justify-content: center; padding: 6px 2px; font-weight: 600; color: var(--text-muted); }
.roster-name-col { justify-content: flex-start; padding-left: 14px; }
.roster-row { border-top: 1px solid var(--border); }
.roster-person { display: flex; align-items: center; gap: 6px; padding: 8px 8px 8px 14px; }
.roster-av { width: 24px; height: 24px; border-radius: var(--r-full); }
.roster-person span { font-size: 11px; font-weight: 600; color: var(--text-secondary); }
.roster-shift { display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; letter-spacing: 0.5px; padding: 4px 2px; }
.roster-shift.morning { color: #FCD34D; }
.roster-shift.evening { color: var(--cyan); }
.roster-shift.off { color: var(--text-muted); }
.roster-shift.full { color: #34d399; }

/* HR Alerts */
.hr-alerts { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 16px; }
.hr-alerts h3 { font-size: 16px; font-weight: 700; margin-bottom: 12px; }
.alert-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-md); margin-bottom: 8px; }
.alert-item:last-child { margin-bottom: 0; }
.alert-warning { background: rgba(217,119,6,0.1); border: 1px solid rgba(217,119,6,0.3); color: #FCD34D; }
.alert-red { background: rgba(220,38,38,0.1); border: 1px solid rgba(220,38,38,0.3); color: #f87171; }
.alert-info { flex: 1; font-size: 13px; line-height: 1.4; }

/* ══════════════════════════════════════════════
   OPERATIONS OASIS
══════════════════════════════════════════════ */
.ops-date { font-size: 12px; color: var(--text-muted); }
.shift-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 16px; margin-bottom: 16px; position: relative; overflow: hidden; }
.shift-card::before { content: ''; position: absolute; top: -20px; right: -20px; width: 80px; height: 80px; background: radial-gradient(circle, rgba(14,165,202,0.1), transparent); border-radius: 50%; }
.shift-badge { font-size: 10px; font-weight: 700; color: var(--cyan); letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 10px; }
.shift-leader { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.shift-av { width: 48px; height: 48px; border-radius: var(--r-full); border: 2px solid var(--border-cyan); }
.shift-leader h3 { font-size: 16px; font-weight: 700; }
.shift-leader span { font-size: 12px; color: var(--text-secondary); }
.intercom-btn { margin-left: auto; width: 40px; height: 40px; border-radius: var(--r-full); background: rgba(14,165,202,0.1); border: 1px solid var(--border-cyan); display: flex; align-items: center; justify-content: center; color: var(--cyan); transition: all 0.2s; }
.intercom-btn:hover { background: rgba(14,165,202,0.2); }
.shift-leads { display: flex; gap: 10px; }
.shift-lead-item { display: flex; flex-direction: column; gap: 2px; background: var(--bg-surface); border-radius: var(--r-sm); padding: 8px 12px; flex: 1; }
.shift-lead-role { font-size: 10px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; }
.shift-lead-name { font-size: 13px; font-weight: 600; }

.ops-section { margin-bottom: 16px; }
.menu-items { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden; }
.menu-item { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--border); transition: background 0.15s; }
.menu-item:last-child { border-bottom: none; }
.menu-item:hover { background: var(--bg-input); }
.menu-status-dot { width: 9px; height: 9px; border-radius: var(--r-full); flex-shrink: 0; }
.available-dot { background: #34d399; box-shadow: 0 0 6px rgba(52,211,153,0.5); }
.push-dot { background: #FB923C; box-shadow: 0 0 6px rgba(251,146,60,0.5); }
.eightysix-dot { background: var(--text-muted); }
.low-dot { background: #F87171; box-shadow: 0 0 6px rgba(248,113,113,0.4); }
.menu-item-info { flex: 1; }
.menu-name { display: block; font-size: 14px; font-weight: 600; }
.menu-note { display: block; font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.menu-tag { font-size: 10px; font-weight: 800; letter-spacing: 1.5px; padding: 3px 7px; border-radius: var(--r-xs); }
.push-tag { background: rgba(251,146,60,0.15); color: #FB923C; border: 1px solid rgba(251,146,60,0.3); }
.available-tag { background: rgba(52,211,153,0.12); color: #34d399; border: 1px solid rgba(52,211,153,0.25); }
.eightysix-tag { background: var(--bg-surface); color: var(--text-muted); border: 1px solid var(--border); }
.low-tag { background: rgba(248,113,113,0.12); color: #F87171; border: 1px solid rgba(248,113,113,0.25); }

.memo-list { display: flex; flex-direction: column; gap: 10px; }
.memo-item { display: flex; gap: 12px; padding: 14px; border-radius: var(--r-lg); border: 1px solid var(--border); }
.memo-vip { background: rgba(255,255,255,0.05); border-color: var(--border-gold); }
.memo-ops { background: var(--bg-card); }
.memo-icon { font-size: 24px; flex-shrink: 0; }
.memo-tag { display: inline-block; padding: 2px 8px; border-radius: var(--r-full); font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 6px; }
.vip-tag { background: var(--gold-glow-sm); color: var(--text-primary); border: 1px solid var(--border-gold); }
.ops-tag { background: rgba(14,165,202,0.1); color: var(--cyan); border: 1px solid var(--border-cyan); }
.memo-content p { font-size: 13px; color: var(--text-secondary); line-height: 1.6; }

/* ══════════════════════════════════════════════
   LEARNING LIBRARY
══════════════════════════════════════════════ */
.library-tabs { display: flex; gap: 2px; background: var(--bg-card); border-radius: var(--r-full); padding: 3px; margin-bottom: 14px; border: 1px solid var(--border); }
.ltab { flex: 1; padding: 8px; border-radius: var(--r-full); font-size: 12px; font-weight: 600; color: var(--text-muted); transition: all 0.2s; }
.ltab.active { background: linear-gradient(135deg, #FFFFFF, #B0B4BC); color: #1a1000; }

.lib-featured { margin-bottom: 14px; }
.lib-featured-card {
  background: linear-gradient(135deg, var(--bg-card), rgba(255,255,255,0.06));
  border: 1px solid var(--border-gold); border-radius: var(--r-xl); padding: 20px;
  position: relative; overflow: hidden;
}
.lib-featured-card::after { content: ''; position: absolute; right: -20px; top: -20px; width: 100px; height: 100px; background: radial-gradient(circle, rgba(255,255,255,0.1), transparent); border-radius: 50%; pointer-events: none; }
.lib-feat-badge { font-size: 11px; font-weight: 700; color: #FB923C; margin-bottom: 8px; }
.lib-featured-card h3 { font-size: 18px; font-weight: 800; letter-spacing: -0.3px; margin-bottom: 4px; }
.lib-featured-card p { font-size: 13px; color: var(--text-secondary); margin-bottom: 14px; }
.lib-feat-footer { display: flex; align-items: center; justify-content: space-between; }
.lib-price { font-size: 14px; font-weight: 700; }
.free-price { color: #34d399; }

.category-pills { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 14px; padding-bottom: 4px; scrollbar-width: none; }
.category-pills::-webkit-scrollbar { display: none; }
.cpill { padding: 7px 16px; border-radius: var(--r-full); font-size: 12px; font-weight: 600; background: var(--bg-card); border: 1px solid var(--border); color: var(--text-secondary); white-space: nowrap; transition: all 0.2s; flex-shrink: 0; }
.cpill.active, .cpill:hover { background: var(--gold-glow-sm); border-color: var(--border-gold); color: var(--text-primary); }

.course-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
.course-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden; transition: all 0.2s; cursor: pointer; }
.course-card:hover { border-color: var(--border-gold); transform: translateY(-2px); box-shadow: var(--shadow-gold); }
.course-thumb { height: 100px; position: relative; display: flex; align-items: flex-end; justify-content: flex-end; padding: 8px; }
.course-thumb-1 { background: linear-gradient(135deg, #1a2a3a, #2d4a5a); }
.course-thumb-2 { background: linear-gradient(135deg, #2a1a3a, #4a2d5a); }
.course-thumb-3 { background: linear-gradient(135deg, #1a3a2a, #2d5a3a); }
.course-thumb-4 { background: linear-gradient(135deg, #3a1a1a, #5a2d2d); }
.course-duration { background: rgba(0,0,0,0.5); color: white; font-size: 10px; font-weight: 700; padding: 3px 7px; border-radius: var(--r-full); }
.course-lock { position: absolute; top: 8px; right: 8px; font-size: 16px; }
.course-info { padding: 10px; }
.course-cat { display: block; font-size: 10px; font-weight: 700; color: var(--text-primary); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 3px; }
.course-info h4 { font-size: 12px; font-weight: 700; line-height: 1.4; margin-bottom: 5px; }
.course-meta { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--text-muted); }
.free-badge { background: rgba(52,211,153,0.1); color: #34d399; border: 1px solid rgba(52,211,153,0.25); padding: 1px 6px; border-radius: var(--r-full); font-size: 9px; font-weight: 700; }
.paid-badge { background: var(--gold-glow-sm); color: var(--text-primary); border: 1px solid var(--border-gold); padding: 1px 6px; border-radius: var(--r-full); font-size: 9px; font-weight: 700; }

/* University Section */
.university-section { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 18px; }
.university-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.university-logo { width: 48px; height: 48px; border-radius: var(--r-md); background: rgba(255,255,255,0.1); border: 1px solid var(--border-gold); display: flex; align-items: center; justify-content: center; }
.university-header h3 { font-size: 15px; font-weight: 700; }
.university-header p { font-size: 12px; color: var(--text-secondary); }

.school-list { display: flex; flex-direction: column; gap: 4px; }
.school-item { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--r-lg); transition: background 0.2s; cursor: pointer; }
.school-item:hover { background: var(--bg-input); }
.locked-school { opacity: 0.6; }
.school-progress-ring { position: relative; width: 44px; height: 44px; flex-shrink: 0; }
.school-pct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: var(--text-secondary); }
.school-info { flex: 1; }
.school-info h4 { font-size: 13px; font-weight: 700; }
.school-info span { font-size: 11px; color: var(--text-muted); }

/* ══════════════════════════════════════════════
   HQ SCREEN
══════════════════════════════════════════════ */
.hq-cards { display: flex; flex-direction: column; gap: 12px; }
.hq-card {
  display: flex; flex-direction: column;
  padding: 24px; border-radius: var(--r-xl);
  background: var(--bg-card); border: 1px solid var(--border);
  text-align: left; transition: all 0.25s; position: relative; overflow: hidden;
}
.hq-card::before { content: ''; position: absolute; top: -30px; right: -30px; width: 100px; height: 100px; background: radial-gradient(circle, rgba(255,255,255,0.06), transparent); pointer-events: none; }
.hq-card:hover { border-color: var(--border-gold); transform: translateX(4px); box-shadow: var(--shadow-gold); }
.hq-card-icon { width: 56px; height: 56px; border-radius: var(--r-lg); background: var(--bg-surface); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.hq-card h3 { font-size: 17px; font-weight: 700; margin-bottom: 6px; }
.hq-card p { font-size: 13px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 12px; }
.hq-arrow { color: var(--text-primary); font-size: 18px; font-weight: 700; }

/* ══════════════════════════════════════════════
   OVERLAYS (AI, FILTERS, NOTIFICATIONS)
══════════════════════════════════════════════ */
.ai-overlay, .filters-overlay, .notif-overlay {
  display: none; position: fixed; inset: 0; z-index: 200;
  background: rgba(7,9,15,0.7); backdrop-filter: blur(8px);
  align-items: flex-end; justify-content: center;
}
.ai-overlay.show, .filters-overlay.show, .notif-overlay.show { display: flex; }

.ai-panel, .filters-panel, .notif-panel {
  width: 100%; max-width: 430px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-md);
  border-bottom: none;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  overflow: hidden;
  max-height: 80vh;
  display: flex; flex-direction: column;
  animation: slideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* AI Panel */
.ai-header { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--border); }
.ai-logo { width: 40px; height: 40px; border-radius: var(--r-full); background: linear-gradient(135deg, rgba(255,255,255,0.2), rgba(255,255,255,0.05)); border: 1px solid var(--border-gold); display: flex; align-items: center; justify-content: center; }
.ai-title-wrap { flex: 1; }
.ai-title-wrap h3 { font-size: 15px; font-weight: 700; }
.ai-status { font-size: 11px; color: #34d399; font-weight: 600; }
.ai-close { width: 32px; height: 32px; border-radius: var(--r-full); background: var(--bg-input); display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 14px; }
.ai-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; min-height: 200px; }
.ai-msg-bot .ai-msg-bubble { background: var(--bg-card); border: 1px solid var(--border); border-radius: 4px 16px 16px 16px; padding: 12px 14px; font-size: 14px; line-height: 1.5; max-width: 90%; color: var(--text-primary); }
.ai-msg-user .ai-msg-bubble { background: linear-gradient(135deg, #FFFFFF, #B0B4BC); color: #1a1000; border-radius: 16px 4px 16px 16px; padding: 12px 14px; font-size: 14px; max-width: 85%; margin-left: auto; font-weight: 500; }
.ai-quick-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.ai-chip { padding: 7px 14px; border-radius: var(--r-full); font-size: 12px; font-weight: 600; background: var(--bg-card); border: 1px solid var(--border); color: var(--text-secondary); transition: all 0.2s; white-space: nowrap; }
.ai-chip:hover { border-color: var(--border-gold); color: var(--text-primary); background: var(--gold-glow-sm); }
.ai-input-row { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border); }
.ai-input { flex: 1; padding: 12px 16px; border-radius: var(--r-full); background: var(--bg-card); border: 1px solid var(--border); color: var(--text-primary); font-size: 14px; outline: none; }
.ai-input:focus { border-color: var(--border-gold); }

/* ══════════════════════════════════════════════
   CuadrixAI — full-screen chat
══════════════════════════════════════════════ */
.cuadrix-ai-full {
  max-height: 100dvh !important;
  height: 100dvh;
  border-radius: 0 !important;
  display: flex; flex-direction: column;
  animation: fadeIn 0.2s ease both !important;
}

/* Header */
.cuadrix-ai-header {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 14px 12px;
  background: linear-gradient(180deg, rgba(22,18,8,0.95), rgba(10,8,4,0.92));
  border-bottom: 1px solid var(--border-gold);
  flex-shrink: 0;
}
.cuadrix-ai-brain {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, rgba(255,255,255,0.22), rgba(255,255,255,0.04));
  border: 1px solid var(--border-gold);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-primary);
  flex-shrink: 0;
  animation: cuadrixAiPulse 2.4s ease-in-out infinite;
  box-shadow: 0 0 20px rgba(255,255,255,0.25);
}
@keyframes cuadrixAiPulse {
  0%,100% { box-shadow: 0 0 14px rgba(255,255,255,0.2); }
  50% { box-shadow: 0 0 28px rgba(255,255,255,0.5), 0 0 50px rgba(255,255,255,0.15); }
}
.cuadrix-ai-title-wrap { flex: 1; display: flex; flex-direction: column; line-height: 1.15; }
.cuadrix-ai-title-wrap h3 {
  font-family: 'Playfair Display', serif;
  font-size: 18px; font-weight: 700; color: #fff; letter-spacing: -0.2px;
  margin: 0;
}
.cuadrix-ai-tagline {
  font-size: 9px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--text-primary);
  font-weight: 700;
  margin-top: 1px;
}
.cuadrix-ai-icon-btn {
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-silver);
  color: var(--silver-light);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s;
}
.cuadrix-ai-icon-btn:hover { border-color: var(--text-primary); color: var(--text-primary); }

/* Body */
.cuadrix-ai-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  scrollbar-width: none;
  display: flex; flex-direction: column; gap: 12px;
}
.cuadrix-ai-body::-webkit-scrollbar { display: none; }

/* Empty state */
.cuadrix-ai-empty {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  gap: 12px;
  padding: 20px 6px;
}
.cuadrix-ai-empty-icon {
  width: 72px; height: 72px; border-radius: 50%;
  background: linear-gradient(135deg, #FFFFFF, #B0B4BC);
  color: #1a1000;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 32px rgba(255,255,255,0.4);
  margin-bottom: 6px;
}
.cuadrix-ai-empty-title {
  font-family: 'Playfair Display', serif;
  font-size: 24px; font-weight: 700; letter-spacing: -0.4px;
  color: #fff;
  line-height: 1.1;
  margin-bottom: 2px;
}
.cuadrix-ai-empty-title .accent {
  background: linear-gradient(135deg, var(--text-primary), #FFFFFF);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: italic;
}
.cuadrix-ai-empty-sub {
  font-size: 12px; color: var(--text-secondary); line-height: 1.5;
  max-width: 300px;
}
.cuadrix-ai-capabilities {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  width: 100%; max-width: 380px;
  margin-top: 14px;
}
.cuadrix-ai-cap {
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-silver);
  border-radius: var(--r-md);
  font-size: 12px; color: var(--text-secondary);
  text-align: left;
  line-height: 1.4;
  transition: all 0.2s;
}
.cuadrix-ai-cap:hover { border-color: var(--border-gold); color: var(--text-primary); background: var(--gold-glow-sm); }

/* Message bubbles */
.ai-msg { display: flex; flex-direction: column; gap: 6px; }
.ai-msg.ai-msg-user { align-items: flex-end; }
.ai-msg.ai-msg-bot { align-items: flex-start; }
.ai-msg-row {
  display: flex; align-items: flex-start; gap: 8px;
  max-width: 88%;
}
.ai-msg-user .ai-msg-row { flex-direction: row-reverse; }
.ai-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg, #FFFFFF, #B0B4BC);
  color: #1a1000;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(255,255,255,0.35);
}
.ai-avatar svg { width: 14px; height: 14px; }
.ai-msg-bubble {
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.55;
  word-break: break-word;
  white-space: pre-line;
}
.ai-msg-bot .ai-msg-bubble {
  background: linear-gradient(180deg, rgba(22,22,32,0.95), rgba(14,14,22,0.9));
  border: 1px solid var(--border-silver);
  border-radius: 4px 16px 16px 16px;
  color: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,0.3);
}
.ai-msg-user .ai-msg-bubble {
  background: linear-gradient(135deg, #FFFFFF, #B0B4BC);
  color: #1a1000;
  border-radius: 16px 4px 16px 16px;
  font-weight: 500;
}
.ai-msg-meta {
  display: flex; align-items: center; gap: 4px;
  font-size: 10px; color: var(--text-muted);
  padding: 0 4px;
  letter-spacing: 0.3px;
}
.ai-msg-user .ai-msg-meta { margin-right: 32px; }
.ai-msg-bot .ai-msg-meta { margin-left: 34px; }
.ai-msg-action {
  width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  color: var(--text-muted);
  transition: all 0.15s;
}
.ai-msg-action:hover { color: var(--text-primary); background: var(--gold-glow-sm); }
.ai-msg-action.active { color: var(--text-primary); }

/* Typing */
.cuadrix-ai-typing {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 12px 16px;
  background: rgba(22,22,32,0.95);
  border: 1px solid var(--border-silver);
  border-radius: 4px 16px 16px 16px;
}
.cuadrix-ai-typing span {
  width: 6px; height: 6px; border-radius: 50%;
  background: #B0B4BC;
  animation: cuadrixAiDot 1.3s infinite ease-in-out;
}
.cuadrix-ai-typing span:nth-child(2) { animation-delay: 0.15s; }
.cuadrix-ai-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes cuadrixAiDot { 0%,60%,100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

/* Chips row (above input) */
.cuadrix-ai-chips-row {
  display: flex; gap: 6px;
  overflow-x: auto;
  padding: 0 12px 8px;
  scrollbar-width: none;
  flex-shrink: 0;
}
.cuadrix-ai-chips-row:empty { padding: 0; }
.cuadrix-ai-chips-row::-webkit-scrollbar { display: none; }
.cuadrix-ai-chip {
  flex-shrink: 0;
  padding: 7px 12px; border-radius: var(--r-full);
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--border-gold);
  color: var(--text-primary);
  font-size: 11px; font-weight: 600;
  white-space: nowrap;
  transition: all 0.2s;
}
.cuadrix-ai-chip:hover {
  background: linear-gradient(135deg, #FFFFFF, #B0B4BC);
  color: #1a1000;
  border-color: transparent;
}

/* Input row */
.cuadrix-ai-input-row {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px 14px;
  background: linear-gradient(180deg, rgba(10,10,14,0.6), rgba(10,10,14,0.92));
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.cuadrix-ai-voice-btn {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-silver);
  color: var(--silver-light);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s;
}
.cuadrix-ai-voice-btn:hover { border-color: var(--text-primary); color: var(--text-primary); }
.cuadrix-ai-input {
  flex: 1;
  padding: 11px 16px;
  border-radius: var(--r-full);
  background: var(--bg-card);
  border: 1px solid var(--border-silver);
  color: #fff;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
}
.cuadrix-ai-input:focus { border-color: var(--text-primary); }
.cuadrix-ai-input::placeholder { color: var(--text-muted); }
.cuadrix-ai-send-btn {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, #FFFFFF, #B0B4BC);
  color: #1a1000;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(255,255,255,0.35);
  transition: all 0.2s;
}
.cuadrix-ai-send-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(255,255,255,0.45); }
.ai-send-btn { width: 44px; height: 44px; border-radius: var(--r-full); background: linear-gradient(135deg, #FFFFFF, #B0B4BC); display: flex; align-items: center; justify-content: center; color: #1a1000; flex-shrink: 0; }
.ai-send-btn:hover { box-shadow: 0 4px 16px rgba(255,255,255,0.35); }

/* Filters Panel */
.filters-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--border); }
.filters-header h3 { font-size: 16px; font-weight: 700; }
.filters-header button { width: 32px; height: 32px; border-radius: var(--r-full); background: var(--bg-input); color: var(--text-muted); display: flex; align-items: center; justify-content: center; font-size: 14px; }
.filters-panel { padding: 0; overflow-y: auto; }
/* PL-FILTER-REDESIGN-3a: dark-theme <option> visibility inside filter
   panels. Browsers (esp. WebKit + Firefox) default to white-bg native
   dropdowns regardless of the parent <select> styling. Without this
   the region + supported-country menus flash white on the dark theme. */
.filters-panel select option {
  background: var(--bg-elevated);
  color: var(--text-primary);
}
.filter-group { padding: 16px 20px; border-bottom: 1px solid var(--border); }
.filter-group label { display: block; font-size: 13px; font-weight: 600; color: var(--text-secondary); margin-bottom: 10px; }
.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fchip { padding: 7px 16px; border-radius: var(--r-full); font-size: 13px; font-weight: 600; background: var(--bg-card); border: 1px solid var(--border); color: var(--text-secondary); transition: all 0.2s; }
.fchip.active { background: var(--gold-glow-sm); border-color: var(--border-gold); color: var(--text-primary); }
.range-input { width: 100%; accent-color: #FFFFFF; height: 4px; background: var(--bg-surface); border-radius: var(--r-full); cursor: pointer; }
.range-val { display: block; font-size: 12px; color: var(--text-muted); margin-top: 6px; }
.filters-panel .btn-primary { margin: 16px 20px 20px; width: calc(100% - 40px); }

/* Notif Panel */
/* NOTIF-3 — notifications = their own FULL window sliding in from the LEFT
   (replaces the shared bottom-sheet presentation; overrides the .ai/.filters
   group rules above). Same #notifOverlay + showNotifications/closeNotifications
   + _pxRenderNotifList + routes. Persistent node: closed = translateX(-100%)
   off-viewport, so it can't block taps — P1c-2a satisfied without removal. */
.notif-overlay {
  display: flex;
  align-items: stretch; justify-content: flex-start;
  background: var(--bg-base);
  backdrop-filter: none;
  transform: translateX(-100%);
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
  pointer-events: none;
}
.notif-overlay.show { transform: translateX(0); pointer-events: auto; }
.notif-panel {
  max-width: none; max-height: none;
  border: none; border-radius: 0;
  animation: none;
  padding-top: env(safe-area-inset-top, 0px);
}
.notif3-header {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
.notif3-header h3 { font-size: 16px; font-weight: 700; flex: 1; }
.notif-list { overflow-y: auto; flex: 1; padding: 8px 0 calc(16px + env(safe-area-inset-bottom, 0px)); }
.notif-item { display: flex; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--border); transition: background 0.15s; cursor: pointer; }
.notif-item:hover { background: var(--bg-input); }
.notif-item.unread { background: rgba(255,255,255,0.03); }

/* PL-NOTIFY (Day 15) — live notification list states */
.notif-empty {
  padding: 20px;
  text-align: center;
  color: rgba(255,255,255,0.5);
  font-size: 13px;
}
.notif-unread {
  background: rgba(255,255,255, 0.05);
}
.notif-dot-inline {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #FFFFFF;
  margin-right: 8px;
  vertical-align: middle;
  flex-shrink: 0;
}
.notif-text {
  flex: 1;
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.4;
}
.notif-time {
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  margin-top: 4px;
  white-space: nowrap;
}
.notif-av-wrap { flex-shrink: 0; }
.notif-av { width: 40px; height: 40px; border-radius: var(--r-full); }
.notif-sys-icon { width: 40px; height: 40px; border-radius: var(--r-full); background: var(--bg-surface); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 18px; }
.notif-content { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.notif-content strong { color: var(--text-primary); }
.notif-time { display: block; font-size: 11px; color: var(--text-muted); margin-top: 3px; }

/* ══════════════════════════════════════════════
   #53.3 PL-INVITE-FLOW · invite-row status badge
   (#53.3.1: inline buttons removed — buttons now live in the
    invitation detail modal. Badge styles kept; row still shows
    pre-fetched outcome of past responses.)
══════════════════════════════════════════════ */
/* Invite rows wrap so the badge drops to its own line below
   the text + time pair without touching non-invite row layout. */
.notif-item.notif-invite { flex-wrap: wrap; }

.notif-action-badge {
  display: inline-flex;
  align-items: center;
  width: 100%;
  margin-top: 8px;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.notif-badge-accepted {
  background: rgba(255,255,255,0.14);
  color: #B0B4BC;
  border: 1px solid rgba(255,255,255,0.4);
}
.notif-badge-declined {
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.5);
  border: 1px solid rgba(255,255,255,0.12);
}
/* Already-responded invite rows: no-op tap (badge stands). */
.notif-item.notif-invite[data-invite-state="accepted"],
.notif-item.notif-invite[data-invite-state="passed"] { cursor: default; }

/* ══════════════════════════════════════════════
   #53.3.2 PL-INVITE-FLOW · invited-job deck badge
   (Replaces #53.3.1 .pxinvite-detail-* modal — killed per Kenneth
    UX spec; tap-notif now deep-links into the Match deck with
    ONLY the invited job as a single card. Pill below is the
    visual cue on that card.)
══════════════════════════════════════════════ */
.jc-invited-pill {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  padding: 6px 14px;
  background: linear-gradient(135deg, #FFFFFF 0%, #E5B860 100%);
  color: #1a1a1a;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.8px;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(255,255,255,0.4),
              0 0 0 2px rgba(255,255,255,0.15);
  pointer-events: none;
  text-shadow: 0 1px 0 rgba(255,255,255,0.2);
}
/* Subtle gold halo on the invited card so it reads as "special"
   even before the eye lands on the pill. */
.swipe-card.is-invited {
  box-shadow: 0 0 0 2px rgba(255,255,255,0.55),
              0 12px 36px rgba(0,0,0,0.45);
}
/* PL-DECK-APPLIED — quiet state pills (same slot/geometry as
   .jc-invited-pill, hairline treatment instead of the loud gold slab). */
.jc-state-pill {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  padding: 5px 13px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  border-radius: 999px;
  pointer-events: none;
  background: rgba(20,20,20,0.72);
  backdrop-filter: blur(6px);
}
.jc-state-applied { color: #E5B860; box-shadow: 0 0 0 1px rgba(229,184,96,0.45); }
.jc-state-matched { color: #34d399; box-shadow: 0 0 0 1px rgba(5,150,105,0.55); }

/* ══════════════════════════════════════════════
   MOBILE RESPONSIVE
══════════════════════════════════════════════ */
@media (max-width: 499px) {
  .hero { padding-top: 100px; }
  .hero-title { font-size: 52px; }
  .hero-stats { gap: 20px; }
  .features-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .phone-frame { border-radius: 0; }
  #app { padding: 0; }
}

@media (max-width: 360px) {
  .hero-title { font-size: 44px; }
  .auth-card { padding: 28px 20px; }
  .course-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════
   ANIMATIONS
══════════════════════════════════════════════ */
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.screen.active > * { animation: fadeIn 0.3s ease both; }
.screen.active > *:nth-child(2) { animation-delay: 0.04s; }
.screen.active > *:nth-child(3) { animation-delay: 0.08s; }
.screen.active > *:nth-child(4) { animation-delay: 0.12s; }

@keyframes gaugeAnim { from { stroke-dashoffset: 314; } }
.gauge-fill { animation: gaugeAnim 1.4s cubic-bezier(0.4, 0, 0.2, 1) forwards; }

/* ══════════════════════════════════════════════
   MATCH ROLE TOGGLE
══════════════════════════════════════════════ */
.match-role-toggle {
  display: flex;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 4px;
  margin: 0 20px 16px;
  gap: 4px;
}
.role-toggle-btn {
  flex: 1;
  padding: 10px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.role-toggle-btn.active {
  background: #FFFFFF;
  color: #000;
}

/* ══════════════════════════════════════════════
   THE ONE MATCH — CREW CARDS
══════════════════════════════════════════════ */
.the-one-card-stack { position: relative; height: 480px; margin: 0 20px; }
.the-one-crew-card {
  position: absolute; inset: 0;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 24px;
  overflow: hidden;
  cursor: grab;
  user-select: none;
  touch-action: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.the-one-crew-card:nth-child(2) { transform: scale(0.96) translateY(10px); z-index: 1; }
.the-one-crew-card:nth-child(3) { transform: scale(0.92) translateY(20px); z-index: 0; }
.the-one-crew-card:first-child { z-index: 10; }
.the-one-crew-card .crew-photo-full {
  width: 100%; height: 280px;
  object-fit: cover; display: block;
}
.the-one-crew-info { padding: 16px; }
.the-one-crew-info h3 { font-size: 20px; font-weight: 700; color: var(--text); margin: 0 0 4px; }
.the-one-crew-info .crew-role { font-size: 13px; color: var(--text-primary); margin-bottom: 10px; }
.the-one-crew-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.crew-tag-chip {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25);
  color: var(--text-primary);
  font-size: 11px; font-weight: 600;
  padding: 4px 10px; border-radius: 20px;
}
.crew-score-badge {
  position: absolute; top: 16px; right: 16px;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(8px);
  border: 1px solid var(--text-primary);
  border-radius: 12px;
  padding: 6px 12px;
  color: var(--text-primary); font-size: 13px; font-weight: 700;
}
.the-one-card-actions {
  display: flex; justify-content: center; gap: 20px;
  margin: 16px 20px 0;
}
.the-one-action-btn {
  width: 60px; height: 60px; border-radius: 50%;
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; transition: transform 0.15s;
}
.the-one-action-btn:active { transform: scale(0.9); }
.the-one-action-btn.pass { background: rgba(255,59,48,0.15); border: 2px solid rgba(255,59,48,0.4); }
.the-one-action-btn.bank { background: rgba(0,122,255,0.15); border: 2px solid rgba(0,122,255,0.4); }
.the-one-action-btn.hire { background: rgba(255,255,255,0.15); border: 2px solid rgba(255,255,255,0.4); }
.swipe-label {
  position: absolute; top: 24px; padding: 6px 16px;
  border-radius: 8px; font-size: 18px; font-weight: 800;
  letter-spacing: 1px; opacity: 0; transition: opacity 0.15s;
  pointer-events: none; z-index: 20;
}
.swipe-label.hire-label { left: 16px; background: rgba(52,199,89,0.9); color: #fff; }
.swipe-label.pass-label { right: 16px; background: rgba(255,59,48,0.9); color: #fff; }
.hire-modal-overlay {
  position: absolute; inset: 0; background: rgba(0,0,0,0.75);
  backdrop-filter: blur(6px); z-index: 200;
  display: none; align-items: flex-end;
}
.hire-modal-overlay.open { display: flex; }
.hire-modal {
  background: var(--bg-card); border-radius: 28px 28px 0 0;
  padding: 28px 24px; width: 100%;
  border-top: 1px solid var(--border);
}
.hire-modal h3 { font-size: 20px; font-weight: 700; color: var(--text); margin: 0 0 6px; }
.hire-modal p { font-size: 14px; color: var(--text-muted); margin: 0 0 20px; }
.hire-modal-actions { display: flex; gap: 12px; }
.hire-modal-actions button { flex: 1; padding: 14px; border-radius: 14px; border: none; font-size: 15px; font-weight: 700; cursor: pointer; }
.hire-modal-actions .btn-cancel { background: var(--glass); color: var(--text); border: 1px solid var(--border); }
.hire-modal-actions .btn-confirm { background: #FFFFFF; color: #000; }

/* ══════════════════════════════════════════════
   MESSAGES / INBOX
══════════════════════════════════════════════ */
.msg-search-bar {
  display: flex; align-items: center; gap: 10px;
  background: var(--glass); border: 1px solid var(--border);
  border-radius: 14px; padding: 10px 14px;
  margin: 0 20px 16px;
}
.msg-search-bar input {
  flex: 1; background: none; border: none; outline: none;
  color: var(--text); font-size: 14px;
}
.msg-search-bar input::placeholder { color: var(--text-muted); }
.msg-search-bar svg { color: var(--text-muted); flex-shrink: 0; }
.stories-row {
  display: flex; gap: 12px; overflow-x: auto;
  padding: 0 20px 16px; scrollbar-width: none;
}
.stories-row::-webkit-scrollbar { display: none; }
.story-bubble {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px; cursor: pointer; flex-shrink: 0;
}
.story-avatar-ring {
  width: 58px; height: 58px; border-radius: 50%;
  padding: 2px;
  background: linear-gradient(135deg, #FFFFFF, var(--cyan));
}
.story-avatar-ring.seen {
  background: var(--border);
}
.story-avatar-ring img {
  width: 100%; height: 100%; border-radius: 50%;
  border: 2px solid var(--bg-base);
  object-fit: cover;
}
.story-add-btn {
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--glass); border: 2px dashed var(--border);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  font-size: 24px; color: var(--text-primary);
}
.story-name { font-size: 11px; color: var(--text-muted); max-width: 58px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox-list { display: flex; flex-direction: column; padding: 0 20px; gap: 2px; }
.inbox-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--border);
  cursor: pointer; transition: background 0.15s;
}
.inbox-item:last-child { border-bottom: none; }
.inbox-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.inbox-info { flex: 1; min-width: 0; }
.inbox-name { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 3px; }
.inbox-preview { font-size: 13px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.inbox-time { font-size: 12px; color: var(--text-muted); }
.inbox-badge {
  background: #FFFFFF; color: #000;
  font-size: 11px; font-weight: 700;
  width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.notif-dot {
  position: absolute; top: 6px; right: 6px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--cyan);
}

/* ══════════════════════════════════════════════
   CHAT SCREEN
══════════════════════════════════════════════ */
.chat-header {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-card);
}
.chat-header img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.chat-header-info { flex: 1; }
.chat-header-info .chat-name { font-size: 16px; font-weight: 700; color: var(--text); }
.chat-header-info .chat-status { font-size: 12px; color: var(--cyan); }
.chat-messages {
  flex: 1; overflow-y: auto; padding: 16px 20px;
  display: flex; flex-direction: column; gap: 10px;
}
.chat-bubble {
  max-width: 72%; padding: 10px 14px;
  border-radius: 18px; font-size: 14px; line-height: 1.45;
  word-break: break-word;
}
.chat-bubble.incoming {
  background: var(--glass); border: 1px solid var(--border);
  color: var(--text); border-bottom-left-radius: 4px;
  align-self: flex-start;
}
.chat-bubble.outgoing {
  background: #FFFFFF; color: #000;
  border-bottom-right-radius: 4px;
  align-self: flex-end;
}
.bubble-time {
  font-size: 11px; margin-top: 4px;
  opacity: 0.6;
}
.chat-input-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  background: var(--bg-card);
}
.chat-input-bar input {
  flex: 1; background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 22px; padding: 10px 16px;
  color: var(--text); font-size: 14px; outline: none;
}
.chat-send-btn {
  width: 42px; height: 42px; border-radius: 50%;
  background: #FFFFFF; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════
   CuadrillaONE MAG — premium digital magazine
══════════════════════════════════════════════ */
#screen-shiftmag { padding-bottom: 96px; }

/* Masthead */
.pmag-masthead {
  text-align: center;
  padding: 8px 0 20px;
}
.pmag-eyebrow {
  font-size: 10px; letter-spacing: 4px; text-transform: uppercase;
  color: var(--text-primary); font-weight: 600;
}

/* CuadrillaONE Mag LOCKUP — editorial serif brand */
.pml-lockup {
  font-family: 'Playfair Display', 'Times New Roman', serif;
  display: inline-flex;
  align-items: baseline;
  line-height: 1;
  white-space: nowrap;
}
.pml-cuadrillaone {
  font-weight: 600;
  font-style: normal;
  background: linear-gradient(135deg, #F4F5F8 0%, #C0C4CC 50%, #E8EAEF 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.01em;
}
.pml-mag {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 500;
  color: var(--silver);
  background: var(--chrome-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-left: 0.35em;
  font-size: 0.58em;
  letter-spacing: 0.02em;
  transform: translateY(-0.1em);
}
/* Size modifiers for compact contexts */
.pml-lockup--caps  { letter-spacing: 2px; font-weight: 700; }
.pml-lockup--caps .pml-cuadrillaone,
.pml-lockup--caps .pml-mag { letter-spacing: 0.08em; }
.pml-lockup--mini { letter-spacing: 1.5px; }
.pml-lockup--inline { font-size: inherit; }
.pml-lockup--inline .pml-mag { font-size: 0.82em; margin-left: 0.22em; transform: translateY(-0.05em); }

.pmag-title {
  font-size: 42px; font-weight: 600;
  letter-spacing: -1.2px; line-height: 1;
  margin: 6px 0 4px;
  font-family: 'Playfair Display', serif;
}
.pmag-title .pml-cuadrillaone { font-size: 1em; }
.pmag-title .pml-mag { font-size: 0.52em; margin-left: 0.3em; transform: translateY(-0.25em); }

.pmag-tagline {
  font-size: 10px; letter-spacing: 4px; text-transform: uppercase;
  color: var(--silver); font-weight: 500;
  background: var(--chrome-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Current issue */
.pmag-current { margin-bottom: 32px; cursor: pointer; }
.pmag-current-foot {
  margin-top: 10px; text-align: center;
}
.pmag-current-meta { font-size: 11px; color: var(--text-muted); letter-spacing: 1.2px; text-transform: uppercase; }

/* Magazine cover — shared */
.pmag-cover {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: linear-gradient(180deg, #141010 0%, #0a0a0a 100%);
  border: 1px solid var(--border-gold);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,255,255,0.1), 0 0 60px rgba(255,255,255,0.08);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s;
}
.pmag-current:hover .pmag-cover {
  transform: translateY(-3px) rotate(-0.4deg);
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--border-gold), 0 18px 48px rgba(255,255,255,0.18);
}
.pmag-cover--lg { aspect-ratio: 3 / 4; width: 100%; }

.pmag-cover-img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: grayscale(0.15) contrast(1.05) brightness(0.75);
}
.pmag-cover-foil {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background:
    linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.18) 48%, rgba(129,140,255,0.25) 52%, transparent 70%),
    radial-gradient(circle at 10% 10%, rgba(255,255,255,0.15), transparent 40%);
  mix-blend-mode: screen;
}
.pmag-cover-grain {
  position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 3px 3px;
  opacity: 0.5;
}
.pmag-cover-overlay {
  position: absolute; inset: 0; z-index: 4;
  padding: 20px 22px;
  display: flex; flex-direction: column;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.6) 0%, transparent 30%, transparent 55%, rgba(0,0,0,0.92) 100%);
  color: #fff;
}
.pmag-cover-top {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.3);
}
.pmag-cover-brand {
  font-size: 15px; font-weight: 700; letter-spacing: 2px;
}
.pmag-cover-brand .pml-mag { font-size: 0.72em; margin-left: 0.28em; }
.pmag-cover-issue { font-size: 10px; letter-spacing: 2px; color: rgba(255,255,255,0.7); font-weight: 600; }
.pmag-cover-copy {
  margin-top: auto;
  margin-bottom: 12px;
}
.pmag-cover-kicker {
  display: inline-block;
  background: #FFFFFF;
  color: #1a1000;
  padding: 3px 8px;
  font-size: 10px; font-weight: 800; letter-spacing: 1.5px;
  border-radius: 3px;
  margin-bottom: 10px;
}
.pmag-cover-head {
  font-family: 'Inter', serif;
  font-size: 42px; font-weight: 900; line-height: 0.95;
  letter-spacing: -1.8px;
  color: #fff;
  text-shadow: 0 2px 24px rgba(0,0,0,0.7);
  margin-bottom: 8px;
}
.pmag-cover-sub {
  font-size: 13px; font-weight: 500;
  color: rgba(255,255,255,0.85);
  line-height: 1.4;
  margin-bottom: 14px;
  max-width: 280px;
}
.pmag-cover-bullets {
  list-style: none;
  padding: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.pmag-cover-bullets li {
  font-size: 12px; font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.2px;
  padding-left: 14px;
  position: relative;
}
.pmag-cover-bullets li::before {
  content: '›'; position: absolute; left: 0; top: -1px;
  color: var(--text-primary); font-weight: 900;
}
.pmag-cover-cta {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.3);
}
.pmag-pages { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,0.7); font-weight: 600; }
.pmag-read-now {
  font-size: 12px; font-weight: 800; letter-spacing: 2px;
  background: linear-gradient(135deg, var(--text-primary), #FFFFFF);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pmag-read-now span { color: var(--text-primary); display: inline-block; transition: transform 0.2s; }
.pmag-current:hover .pmag-read-now span { transform: translateX(4px); }

/* Section heads */
.pmag-section-head {
  display: flex; align-items: baseline; gap: 10px;
  margin: 24px 4px 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-silver);
}
.pmag-section-eyebrow {
  font-size: 10px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--text-primary); font-weight: 600;
}
.pmag-section-title {
  font-size: 17px; font-weight: 800; letter-spacing: -0.3px;
  color: #fff;
  margin-left: auto;
}

/* Archive row */
.pmag-archive {
  display: flex; gap: 14px; overflow-x: auto;
  padding: 4px 4px 16px;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
  margin: 0 -4px;
}
.pmag-archive::-webkit-scrollbar { display: none; }
.pmag-archive-card {
  flex-shrink: 0; width: 160px;
  cursor: pointer;
  scroll-snap-align: start;
}
.pmag-mini-cover {
  position: relative;
  aspect-ratio: 3 / 4; width: 100%;
  border-radius: var(--r-md);
  overflow: hidden;
  padding: 14px;
  display: flex; flex-direction: column;
  border: 1px solid var(--border-silver);
  box-shadow: var(--shadow-md);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s;
  color: #fff;
}
.pmag-archive-card:hover .pmag-mini-cover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--border-gold), 0 14px 30px rgba(255,255,255,0.15);
}
.pmag-mini-cover.feb { background: linear-gradient(145deg, #2c1810 0%, #1a0f0a 60%, #0d0707 100%); }
.pmag-mini-cover.jan { background: linear-gradient(145deg, #0f1f30 0%, #0a1320 60%, #050910 100%); }
.pmag-mini-cover.dec { background: linear-gradient(145deg, #1a0f30 0%, #0d0820 60%, #050410 100%); }
.pmag-mini-foil {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,0.2) 50%, transparent 65%);
  mix-blend-mode: screen;
}
.pmag-mini-brand {
  font-size: 11px; font-weight: 700; letter-spacing: 1.5px;
}
.pmag-mini-brand .pml-mag { font-size: 0.75em; margin-left: 0.25em; transform: translateY(-0.05em); }
.pmag-mini-issue {
  font-size: 9px; letter-spacing: 1.5px;
  color: rgba(255,255,255,0.65); font-weight: 600;
  margin-top: 2px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.3);
}
.pmag-mini-head {
  font-size: 20px; font-weight: 900; line-height: 0.95;
  letter-spacing: -0.8px;
  margin-top: auto;
  margin-bottom: 6px;
  text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
.pmag-mini-kicker {
  font-size: 11px; font-weight: 700; letter-spacing: 1px;
  color: var(--text-primary);
}
.pmag-coming {
  background: linear-gradient(145deg, #1a1a1a 0%, #0a0a0a 100%);
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  border: 1px dashed var(--border-gold);
}
.pmag-coming .pmag-mini-brand,
.pmag-coming .pmag-mini-issue { position: absolute; top: 14px; left: 14px; }
.pmag-coming .pmag-mini-issue { left: auto; right: 14px; }
.pmag-coming-badge {
  font-size: 13px; font-weight: 800; letter-spacing: 2px;
  color: var(--text-primary);
  padding: 10px 14px;
  border: 1px dashed var(--border-gold);
  border-radius: 6px;
  text-transform: uppercase;
}
.pmag-archive-meta {
  padding: 10px 4px 0;
  display: flex; flex-direction: column; gap: 2px;
}
.pmag-archive-date { font-size: 13px; font-weight: 700; color: #fff; }
.pmag-archive-read { font-size: 11px; color: var(--text-primary); font-weight: 600; letter-spacing: 0.5px; }
.pmag-archive-read.muted { color: var(--text-muted); }

/* Featured the_ones */
.pmag-employers { display: flex; flex-direction: column; gap: 12px; padding: 0 0 8px; }
.pmag-employer-card {
  position: relative;
  background: linear-gradient(180deg, rgba(22,22,32,0.95), rgba(14,14,22,0.9));
  border: 1px solid var(--border-gold);
  border-radius: var(--r-lg);
  padding: 16px 16px 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 4px 18px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.04);
}
.pmag-featured-badge {
  position: absolute; top: 12px; right: 12px;
  font-size: 10px; font-weight: 800; letter-spacing: 1.2px;
  padding: 4px 10px; border-radius: var(--r-full);
  background: linear-gradient(135deg, #FFFFFF, #B0B4BC);
  color: #1a1000;
  box-shadow: 0 2px 10px rgba(255,255,255,0.35);
}
.pmag-employer-head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 10px;
  padding-right: 84px;
}
.pmag-employer-logo { width: 48px; height: 48px; border-radius: var(--r-md); flex-shrink: 0; }
.pmag-employer-head h4 { font-size: 16px; font-weight: 700; color: #fff; margin: 0; }
.pmag-employer-roles { font-size: 12px; color: var(--text-primary); font-weight: 600; }
.pmag-employer-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.45; margin-bottom: 12px; }

/* ═══ MAGAZINE READER ═══════════════════════ */
#screen-shiftmag-article {
  padding: 0 !important;
  overflow: hidden;
  position: relative;
  /* Full-bleed: reclaim #screenContainer's chrome-compensation padding via
     negative margins so the reader fills the WHOLE viewport (immersive reading).
     Size is constant regardless of .chrome-hidden — only the chrome bars slide,
     the stage never re-measures → transition-safe. Reader stays in-flow (below
     the chrome's z-index:10, so a down-flick reveal paints the bars over it). */
  margin: calc(-1 * var(--chrome-top, 56px)) 0 calc(-1 * var(--chrome-bottom, 68px));
  height: calc(100% + var(--chrome-top, 56px) + var(--chrome-bottom, 68px));
}
#screen-shiftmag-article.active { display: flex; flex-direction: column; }

.pmag-reader {
  position: relative;
  flex: 1;
  width: 100%;
  background: #000;
  display: flex; flex-direction: column;
  overflow: hidden;
  min-height: 0;   /* never force taller than the viewport (was 560px → mobile overflow) */
}
.pmag-reader-topbar {
  display: flex; align-items: center; gap: 10px;
  padding: calc(12px + env(safe-area-inset-top)) 14px 12px;
  background: linear-gradient(180deg, rgba(0,0,0,0.9), rgba(0,0,0,0.5));
  position: absolute; top: 0; left: 0; right: 0; z-index: 20;
}
.pmag-reader-close, .pmag-reader-toc {
  width: 34px; height: 34px; border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--border-silver);
  color: var(--silver-light);
  transition: all 0.2s;
}
.pmag-reader-close:hover, .pmag-reader-toc:hover { border-color: var(--text-primary); color: var(--text-primary); }
.pmag-reader-issue {
  flex: 1;
  text-align: center;
  font-size: 13px; font-weight: 600; letter-spacing: 1.5px;
  color: var(--text-primary);
  text-transform: uppercase;
}
.pmag-reader-issue .pml-lockup { letter-spacing: 1px; }
.pmag-reader-issue .pml-mag { font-size: 0.78em; margin-left: 0.22em; }

/* Stage + 3D page-flip */
.pmag-stage {
  flex: 1;
  position: relative;
  overflow: hidden;
  perspective: 1800px;
  perspective-origin: center center;
  background: #000;
  touch-action: none;   /* reader owns all gestures — browser never pans/scrolls */
}
.pmag-page {
  position: absolute; inset: 0;
  /* Fixed-size page (design ruling): content is authored to fit, NO vertical
     scroll — scrolling mid-flip was moving the stage up/down (jitter).
     Top padding clears the absolute .pmp-folio (58px+env + ~18px box + gap). */
  padding: calc(88px + env(safe-area-inset-top)) 22px calc(68px + env(safe-area-inset-bottom));
  overflow: hidden;
  background: linear-gradient(180deg, #0c0c0c 0%, #050505 100%);
  color: #fff;
  transform-origin: left center;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: transform 0.72s cubic-bezier(0.55, 0, 0.3, 1), box-shadow 0.72s;
  scrollbar-width: none;
  box-shadow: 0 0 0 0 rgba(0,0,0,0);
  will-change: transform;
}
.pmag-page::-webkit-scrollbar { display: none; }

/* Stacked page states — z-order matters for reveal during flip */
.pmag-page.pmag-page-current { z-index: 4; transform: rotateY(0deg); }
.pmag-page.pmag-page-next    { z-index: 2; transform: rotateY(0deg); transform-origin: left center; }
.pmag-page.pmag-page-prev    { z-index: 2; transform: rotateY(-179.9deg); transform-origin: left center; }
.pmag-page.pmag-page-hidden  { z-index: 1; transform: rotateY(0deg); opacity: 0; pointer-events: none; }

/* Active flips — forward: current rotates to -180 around left; backward: prev rotates back from -180 to 0 */
.pmag-page.pmag-flipping-fwd {
  z-index: 5;
  transform-origin: left center;
  transform: rotateY(-180deg);
  box-shadow: -20px 0 40px -10px rgba(0,0,0,0.55);
}
.pmag-page.pmag-flipping-back {
  z-index: 5;
  transform-origin: left center;
  transform: rotateY(0deg);
  box-shadow: -20px 0 40px -10px rgba(0,0,0,0.55);
}

/* Paper feel + curl shadow (visible on the currently-rotating page) */
.pmag-page::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 4px 4px;
  opacity: 0.5;
  z-index: 0;
}
.pmag-page::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.18) 10%, transparent 30%);
  opacity: 0; transition: opacity 0.25s;
  z-index: 1;
}
.pmag-page.pmag-flipping-fwd::after,
.pmag-page.pmag-flipping-back::after,
.pmag-page.pmag-dragging::after {
  opacity: 1;
}

/* Backface: a subtly-darkened paper feel so readers see the "back" as they flip */
.pmag-page .pmag-backface {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, #0a0a0a 0%, #050505 40%, #0c0c0c 100%);
  transform: rotateY(180deg);
  backface-visibility: hidden;
  z-index: 0;
  padding: 64px 22px 68px;
  color: rgba(255,255,255,0.3);
  font-family: 'Playfair Display', serif;
  font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.pmag-page .pmag-backface::before {
  content: '';
  position: absolute; inset: 0;
  background-image: linear-gradient(90deg, rgba(255,255,255,0.05) 0%, transparent 20%, rgba(0,0,0,0.4) 100%);
}

/* Taps + dots */
/* Tap zones inert: page turns are swipe-only now (a tap must do nothing). */
.pmag-tap-left, .pmag-tap-right {
  position: absolute; top: 54px; bottom: 72px;
  width: 24%; z-index: 10;
  pointer-events: none;
}
.pmag-tap-left { left: 0; }
.pmag-tap-right { right: 0; }

.pmag-dots {
  position: absolute; bottom: calc(22px + env(safe-area-inset-bottom)); left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 6px;
  z-index: 20;
}
.pmag-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,0.25);
  transition: all 0.3s;
}
.pmag-dot.active { background: #FFFFFF; width: 18px; border-radius: 3px; }
.pmag-pagelabel {
  position: absolute; bottom: 44px; right: 20px;
  font-size: 10px; letter-spacing: 2px;
  color: var(--text-primary);
  font-weight: 700;
  z-index: 20;
}

/* TOC overlay */
.pmag-toc {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.78);
  backdrop-filter: blur(10px);
  z-index: 30;
  display: none;
  animation: fadeIn 0.2s ease both;
}
.pmag-toc.show { display: block; }
.pmag-toc-panel {
  position: absolute; top: 58px; right: 14px;
  width: 240px; max-height: calc(100% - 90px);
  background: var(--bg-elevated);
  border: 1px solid var(--border-gold);
  border-radius: var(--r-lg);
  padding: 12px;
  overflow-y: auto;
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,255,255,0.1);
}
.pmag-toc-title {
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--text-primary); font-weight: 700;
  padding: 4px 8px 10px;
  border-bottom: 1px solid var(--border);
}
.pmag-toc-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 8px;
  border-radius: var(--r-sm);
  cursor: pointer;
  text-align: left;
  width: 100%;
  color: #fff;
  transition: background 0.15s;
}
.pmag-toc-item:hover { background: var(--gold-glow-sm); }
.pmag-toc-item.active { background: var(--gold-glow-sm); }
.pmag-toc-num {
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.12);
  color: var(--text-primary);
  font-size: 11px; font-weight: 700;
  flex-shrink: 0;
}
.pmag-toc-item.active .pmag-toc-num {
  background: linear-gradient(135deg, #FFFFFF, #B0B4BC);
  color: #1a1000;
}
.pmag-toc-label {
  flex: 1; font-size: 13px; font-weight: 600;
}

/* ═══ MAGAZINE PAGE TEMPLATES ═══ */
.pmp-eyebrow {
  font-size: 10px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--text-primary); font-weight: 700;
  margin-bottom: 8px;
}
.pmp-folio {
  /* Track the safe-area like the topbar does — fixed 58px collided with the
     content's eyebrow on env()=0 devices (folio box ran 58→76px, content at 64px). */
  position: absolute; top: calc(58px + env(safe-area-inset-top, 0px)); left: 22px; right: 22px;
  display: flex; justify-content: space-between;
  font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  font-weight: 600;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,0.2);
}
.pmp-h1 {
  font-size: 30px; font-weight: 900; line-height: 1.02;
  letter-spacing: -1.2px;
  margin-bottom: 14px;
  color: #fff;
}
.pmp-h1-accent {
  background: linear-gradient(135deg, var(--text-primary), #FFFFFF);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pmp-deck {
  font-size: 15px; color: var(--silver-light);
  line-height: 1.5;
  margin-bottom: 16px;
  font-weight: 500;
}
.pmp-body {
  font-size: 14px; line-height: 1.7;
  color: rgba(255,255,255,0.82);
  margin-bottom: 14px;
}
.pmp-dropcap::first-letter {
  font-family: 'Inter', serif;
  font-size: 48px; font-weight: 900;
  float: left;
  line-height: 0.92;
  padding: 4px 10px 2px 0;
  background: linear-gradient(135deg, var(--text-primary), #FFFFFF);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pmp-pull {
  font-size: 18px; font-weight: 700; line-height: 1.3;
  color: var(--text-primary);
  border-left: 3px solid var(--text-primary);
  padding: 10px 0 10px 14px;
  margin: 18px 0;
  letter-spacing: -0.2px;
  font-style: italic;
}
.pmp-hero-img {
  width: calc(100% + 44px);
  margin: 0 -22px 18px;
  aspect-ratio: 4/3;
  background-size: cover; background-position: center;
  position: relative;
}
.pmp-hero-img::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.85));
}
.pmp-img {
  width: 100%;
  aspect-ratio: 16/9;
  background-size: cover; background-position: center;
  border-radius: var(--r-md);
  margin: 14px 0;
  border: 1px solid var(--border-gold);
}
.pmp-caption {
  font-size: 11px; color: var(--text-muted);
  font-style: italic;
  margin: -8px 0 18px;
}
.pmp-divider {
  height: 1px; background: var(--border-gold); margin: 20px 0;
  position: relative;
}
.pmp-divider::before {
  content: '✦'; position: absolute; top: -10px; left: 50%;
  transform: translateX(-50%);
  background: #050505; padding: 0 10px;
  color: var(--text-primary); font-size: 14px;
}
/* OPS-6b — quiet setup-entry rows (TODAY leads / dept in-charges / floor) */
.ops-assign-row {
  display: flex; align-items: center; justify-content: center;
  width: 100%;
  padding: 14px 16px;
  background: rgba(255,255,255,0.03);
  border: 1px dashed rgba(212,175,55,0.28);
  border-radius: 12px;
  color: #cfd3d8;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
}
.ops-dept-row {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 11px 4px;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  color: #fff;
  cursor: pointer;
  text-align: left;
}
.ops-dept-row:last-child { border-bottom: none; }
.ops-dept-ico { font-size: 15px; width: 22px; text-align: center; flex-shrink: 0; }
.ops-dept-name { flex: 1; font-size: 13.5px; font-weight: 600; }
.ops-dept-assign { font-size: 11px; letter-spacing: 0.6px; color: #9aa0a8; flex-shrink: 0; }
/* OPS-8 — assigned lead name replaces the ＋ Assign mark, quiet gold */
.ops-dept-assign.is-set { color: #E8C879; font-size: 12.5px; font-weight: 600; letter-spacing: 0; display: inline-flex; align-items: center; gap: 7px; }
/* AV-3c — mini avatar beside the assigned dept lead name */
.ops-dept-assign img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.ops-lead-assigned {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 10px 2px;
  background: transparent; border: none;
  text-align: left; cursor: pointer;
}
.ops-lead-assigned img { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; }
.ops-lead-info { flex: 1; min-width: 0; }
.ops-lead-name { font-size: 13.5px; font-weight: 600; color: #fff; }
.ops-lead-role { font-size: 11.5px; color: #9aa0a8; }
.ops-lead-mark { font-size: 10px; letter-spacing: 1.2px; color: #E8C879; font-weight: 700; flex-shrink: 0; }
/* OPS-10 — The Main Tribe contact rows + time step */
.ops-main-row {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 11px 4px;
  background: transparent; border: none;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  color: #fff; text-align: left; cursor: pointer;
}
.ops-main-row:last-child { border-bottom: none; }
.ops-main-ord { font-size: 10.5px; letter-spacing: 0.8px; text-transform: uppercase; color: #9aa0a8; font-weight: 700; width: 78px; flex-shrink: 0; }
.ops-main-row img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.ops-main-row .ops-dept-assign { margin-left: auto; }
.ops-main-time { margin-left: auto; font-size: 12px; font-weight: 600; color: #E8C879; flex-shrink: 0; }
.ops-time-row { display: flex; gap: 10px; margin: 12px 0; }
.ops-time-row label { flex: 1; display: flex; flex-direction: column; gap: 5px; font-size: 11px; color: #9aa0a8; font-weight: 600; }

/* OPS-12 — Apple-quiet lead picker sheet */
.ops-picker-handle {
  width: 36px; height: 4px; border-radius: 999px;
  background: rgba(255,255,255,0.18);
  margin: 0 auto 12px;
}
.ops-picker-search { margin: 2px 0 8px; font-size: 13px; padding: 9px 12px; }
.ops-picker-list { max-height: 55vh; overflow-y: auto; margin: 2px 0 6px; }
.ops-picker-row {
  display: flex; align-items: center; gap: 11px;
  width: 100%;
  padding: 11px 4px;
  background: transparent; border: none;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  color: #fff; text-align: left; cursor: pointer;
}
.ops-picker-row:last-child { border-bottom: none; }
.ops-picker-row img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.ops-picker-info { flex: 1; min-width: 0; }
.ops-picker-name { font-size: 13.5px; font-weight: 600; color: #fff; }
.ops-picker-role { font-size: 11.5px; color: #9aa0a8; margin-top: 1px; }
.ops-picker-check { color: #E8C879; font-size: 15px; font-weight: 700; flex-shrink: 0; }

/* OPS-12 — quiet add-contact affordance under the last assigned contact */
.ops-add-contact {
  display: block; width: 100%;
  padding: 10px 4px;
  background: transparent; border: none;
  color: #9aa0a8; font-size: 12px; font-weight: 600; letter-spacing: 0.4px;
  text-align: left; cursor: pointer;
}
.ops-add-contact:hover { color: #cfd3d8; }

/* OPS-8 — roster-derived hint block (only when zero explicit assignments) */
.ops-hint-head { font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; color: #9aa0a8; font-weight: 700; margin: 12px 2px 4px; }
.ops-hint-row { display: flex; align-items: center; gap: 8px; padding: 6px 2px; }
.ops-hint-row img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.ops-hint-name { font-size: 12.5px; font-weight: 600; color: #cfd3d8; }
.ops-hint-role { font-size: 11px; color: #9aa0a8; margin-left: auto; }

/* OPS-16 — quiet contact glyph on in-charge rows: muted stroke, gold on press.
   OPS-16b — never shrinks (body overflow-x:hidden makes squeezed-out = invisible);
   the ::after inset gives a ~42px effective hit target without inflating the well. */
.ops-contact-glyph { color: #9aa0a8; cursor: pointer; flex-shrink: 0; position: relative; }
.ops-contact-glyph::after { content: ''; position: absolute; inset: -8px; }
.ops-contact-glyph:active { color: #E8C879; border-color: rgba(232,200,121,0.45); }
.ops-main-row .ops-contact-glyph { margin-left: auto; }
.ops-main-row .ops-main-time + .ops-contact-glyph { margin-left: 10px; }
/* OPS-17b — quiet lead-row status chips: hairline + muted (never gold).
   Inherits .pxteam-pill sizing; pending/carried share the same treatment. */
.ops-lead-chip { margin-left: 8px; background: none; border: 1px solid rgba(255,255,255,0.16); color: #9aa0a8; font-weight: 600; letter-spacing: .02em; }
/* OPS-17b — supervisor's own pending edit (leave own-request pattern, inline) */
.ops-lead-own { display: inline-block; margin-left: 8px; font-size: 10px; color: #9aa0a8; font-style: normal; }
/* OPS-17b — manager approvals block sits tight under the section header */
.ops-approvals-head { margin-top: 2px; }
.ops-keep-times { color: #cfd3d8; }

/* OPS-21b — Tribe Playground: segmented control · section cards · snap grid */
.ops-pg-seg { display: flex; gap: 6px; margin: 2px 0 10px; }
.ops-pg-seg-btn { flex: 1; padding: 6px 0; border-radius: 999px; border: 1px solid var(--btn-hairline); background: transparent; color: #9aa0a8; font-size: 11.5px; font-weight: 600; cursor: pointer; font-family: inherit; }
.ops-pg-seg-btn.is-active { color: #E8C879; border-color: rgba(232,200,121,0.45); }
.pg-sec-card { border: 1px solid rgba(255,255,255,0.08); border-left: 2px solid var(--pg-color); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; cursor: pointer; }
.pg-sec-head { display: flex; align-items: center; gap: 8px; }
.pg-sec-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pg-color); flex-shrink: 0; }
.pg-sec-nm { font-size: 13.5px; font-weight: 700; color: #fff; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-sec-tables { font-size: 10.5px; color: #9aa0a8; margin: 3px 0 6px; }
.pg-sec-staff { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.pg-staff { display: inline-flex; align-items: center; gap: 6px; }
.pg-staff img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.pg-staff-nm { font-size: 11.5px; font-weight: 600; color: #cfd3d8; }
.pg-none { font-size: 11px; color: #9aa0a8; }
.pg-swatches { display: flex; gap: 8px; justify-content: center; margin: 12px 0; }
.pg-swatch { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; }
.pg-swatch.is-sel { border-color: #fff; }
.pg-layout-bar { display: flex; gap: 6px; margin-bottom: 8px; }
.pg-tray-label { font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: #9aa0a8; font-weight: 700; margin: 6px 2px 4px; }
.pg-tray { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
.pg-tray::-webkit-scrollbar { display: none; }
/* OPS-21d — free-drag canvas: fixed aspect, percent-positioned tiles, quiet
   hairline guides. Drag = pointer events; touch-action off ONLY in edit mode
   so read-mode page scroll is untouched. */
/* PG-SWIPE-2 — the pointer pager lives on the wrapper; pan-y keeps vertical
   scroll native while horizontal pointermoves reach our handler. */
.pg-canvas-wrap { touch-action: pan-y; }
.pride-head-row { margin-top: 2px; }
/* PG-SWIPE-FIX — pan-y: vertical scroll stays native, horizontal gestures
   reach OUR touch handlers (without it iOS claimed them as scroll intent
   and fired touchcancel — touchend never arrived, swipe read as dead). */
.pg-canvas { position: relative; width: 100%; aspect-ratio: 4 / 5; touch-action: pan-y; border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; overflow: hidden;
  background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 12.5% 10%; }
.pg-canvas.is-edit .pg-table, .pg-tray.is-edit .pg-table { touch-action: none; }
.pg-table { border: 1px solid rgba(255,255,255,0.14); border-left: 2px solid var(--pg-color); background: rgba(255,255,255,0.04); color: #cfd3d8; font-size: 12px; font-weight: 700; cursor: pointer; flex-shrink: 0; font-family: inherit; display: inline-flex; align-items: center; justify-content: center; }
.pg-tile { position: absolute; }
/* OPS-21d — the four shapes */
.pg-shape-square { width: 40px; height: 40px; border-radius: 10px; }
.pg-shape-round  { width: 40px; height: 40px; border-radius: 50%; }
.pg-shape-rect_h { width: 56px; height: 28px; border-radius: 8px; }
.pg-shape-rect_v { width: 28px; height: 56px; border-radius: 8px; }
.pg-ghost { position: fixed; z-index: 10020; pointer-events: none; opacity: 0.9; }
/* OPS-26 — multi-area floors + multi-select */
.pg-area-chips { margin-bottom: 2px; }
.pg-area-title { display: flex; align-items: center; gap: 6px; margin: 6px 2px 4px; font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase; color: #9aa0a8; font-weight: 700; }
.pg-table.pg-selected { box-shadow: 0 0 0 2px #E8C879; }
.pg-sel-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; padding: 8px 10px; border: 1px solid rgba(232,200,121,0.35); border-radius: 12px; background: rgba(232,200,121,0.05); }
.pg-sel-count { font-size: 11px; font-weight: 700; color: #E8C879; margin-right: auto; }
.pg-sel-remove { color: #f87171 !important; border-color: rgba(248,113,113,0.4) !important; }

/* PG-DRAG-2 — faint alignment hairlines while dragging (drop does the snap) */
.pg-guide-v { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(232,200,121,0.4); pointer-events: none; }
.pg-guide-h { position: absolute; left: 0; right: 0; height: 1px; background: rgba(232,200,121,0.4); pointer-events: none; }
.pg-shape-picker { display: flex; gap: 10px; justify-content: center; margin: 12px 0 2px; }
.pg-shape-swatch { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.2); cursor: pointer; --pg-color: #9aa0a8; }
.pg-shape-swatch.pg-shape-square { width: 26px; height: 26px; border-radius: 7px; }
.pg-shape-swatch.pg-shape-round  { width: 26px; height: 26px; border-radius: 50%; }
.pg-shape-swatch.pg-shape-rect_h { width: 36px; height: 18px; border-radius: 5px; }
.pg-shape-swatch.pg-shape-rect_v { width: 18px; height: 36px; border-radius: 5px; }
.pg-shape-swatch.is-sel { border-color: rgba(232,200,121,0.7); }
/* OPS-21d — role UI: segmented picker in the allocation sheet + role groups */
.pg-role-seg { display: flex; gap: 4px; padding: 0 4px 8px 46px; }
.pg-role-btn { flex: 1; padding: 3px 0; border-radius: 999px; border: 1px solid var(--btn-hairline); background: transparent; color: #9aa0a8; font-size: 10px; font-weight: 600; cursor: pointer; font-family: inherit; }
.pg-role-btn.is-active { color: #E8C879; border-color: rgba(232,200,121,0.45); }
/* PG-ROLE-2 — quiet custom-label input revealed when role = Other */
.pg-role-lbl-input { display: block; width: calc(100% - 50px); margin: 0 4px 8px 46px; padding: 6px 10px;
  background: rgba(255,255,255,0.04); border: 1px solid var(--btn-hairline); border-radius: 8px;
  font-size: 12px; color: var(--text-primary); font-family: inherit; box-sizing: border-box; }
.pg-role-lbl-input::placeholder { color: var(--text-muted); }
.pg-role-lbl-input:focus { outline: none; border-color: rgba(232,200,121,0.45); }
.pg-role-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 4px 0; }
.pg-role-group.pg-role-incharge { border-bottom: 1px solid rgba(232,200,121,0.25); padding-bottom: 7px; margin-bottom: 3px; }
.pg-role-lbl { font-size: 9.5px; letter-spacing: 1px; text-transform: uppercase; color: #9aa0a8; font-weight: 700; flex-basis: 100%; }
.pg-role-incharge .pg-role-lbl { color: #E8C879; }
.pg-info-sec { display: flex; align-items: center; gap: 8px; justify-content: center; font-size: 12.5px; color: #cfd3d8; font-weight: 600; padding: 2px 0 8px; }

/* OPS-20d — menu status attribution: who set it + when, muted one-liner */
.oms-attr { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; color: #9aa0a8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oms-attr-av { width: 15px; height: 15px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }

/* OPS-22b — Tribe's Pride: live birthday cards/rows + quiet placeholder */
.ops-bday-today { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid rgba(232,200,121,0.35); border-radius: 12px; margin-bottom: 8px; }
.ops-bday-today img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.ops-bday-nm { font-size: 13.5px; font-weight: 700; color: #fff; }
.ops-bday-sub { font-size: 11px; color: #E8C879; }
.ops-bday-row { display: flex; align-items: center; gap: 10px; padding: 7px 2px; }
.ops-bday-row img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.ops-bday-row-nm { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; color: #cfd3d8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ops-bday-row-dt { font-size: 11px; color: #9aa0a8; flex-shrink: 0; }
.ops-pride-more { font-size: 10.5px; color: #9aa0a8; padding: 8px 2px 0; }
/* OPS-23b — manual celebration cards (above the birthdays block) */
.pride-card { border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; }
.pride-head { display: flex; align-items: center; gap: 8px; }
.pride-title { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 700; color: #E8C879; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pride-honoree { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.pride-honoree img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.pride-note { font-size: 12px; color: #cfd3d8; margin: 6px 0 0; }
.pride-date { font-size: 10.5px; color: #9aa0a8; margin-top: 6px; }
.pride-picker { max-height: 180px; overflow-y: auto; }

/* OPS-20 — Tribe to Sell category chips: hairline pills, gold active */
.ops-cat-chips { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 8px; scrollbar-width: none; }
.ops-cat-chips::-webkit-scrollbar { display: none; }
.ops-cat-chip { flex-shrink: 0; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--btn-hairline); background: transparent; color: #9aa0a8; font-size: 11px; font-weight: 600; cursor: pointer; font-family: inherit; }
.ops-cat-chip.is-active { color: #E8C879; border-color: rgba(232,200,121,0.45); }
/* UI-QUICK-1 — Add-celebration sheet: the Custom… chip sits in the SAME wrap
   row/spacing as the presets (the scroll-row default pushed it offscreen). */
#opsPrideSheet .ops-cat-chips { flex-wrap: wrap; overflow-x: visible; }

/* OPS-18b — board: author row · ack pill · counts footer · fold expander · views sheet */
.ops-memo-author { display: flex; align-items: center; gap: 7px; margin: 5px 0 2px; }
.ops-memo-author img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.ops-memo-author-nm { font-size: 11.5px; font-weight: 600; color: #cfd3d8; }
.ops-memo-when { font-size: 10.5px; color: #9aa0a8; }
.ops-memo-foot { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.ops-ack-pill { padding: 4px 12px; border-radius: 999px; border: 1px solid var(--btn-hairline); background: transparent; color: #cfd3d8; font-size: 11px; font-weight: 600; cursor: pointer; }
.ops-ack-pill.is-acked { color: #E8C879; border-color: rgba(232,200,121,0.4); }   /* OPS-18d — stays tappable: opens the readers sheet */
.ops-memo-counts { margin-left: auto; background: none; border: none; color: #9aa0a8; font-size: 10.5px; cursor: pointer; padding: 2px 0; font-family: inherit; }
.ops-board-more { display: block; width: 100%; margin-top: 8px; padding: 8px; background: transparent; border: 1px solid var(--btn-hairline); border-radius: 10px; color: #9aa0a8; font-size: 11.5px; font-weight: 600; cursor: pointer; font-family: inherit; }
.ops-reader-row { display: flex; align-items: center; gap: 10px; padding: 8px 4px; }
.ops-reader-row img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.ops-reader-nm { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ops-reader-at { font-size: 10.5px; color: #9aa0a8; flex-shrink: 0; }
.ops-reader-head { font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: #9aa0a8; font-weight: 700; margin: 10px 2px 4px; }

/* SIGNUP-V2 — progressive onboarding wizard */
#onbRoot { max-width: 430px; margin: 0 auto; padding: 34px 18px 60px; }
.onb-card { background: linear-gradient(160deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015)); border: 1px solid var(--border-silver); border-radius: 18px; padding: 24px 18px; animation: onbIn 0.35s ease; }
@keyframes onbIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.onb-eyebrow { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: #9aa0a8; font-weight: 800; }
.onb-title { font-size: 20px; font-weight: 700; color: #fff; margin: 6px 0 14px; }
.onb-progress { height: 3px; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; }
.onb-progress-fill { height: 100%; background: linear-gradient(90deg, #E8C879, #f0d9a0); border-radius: 999px; transition: width 0.4s ease; }
.onb-note { font-size: 11px; color: #9aa0a8; margin: 8px 0 16px; }
.onb-note strong { color: #E8C879; font-weight: 700; }
.onb-label { display: block; font-size: 11px; font-weight: 700; color: #cfd3d8; margin: 14px 0 6px; }
.onb-fields { margin-bottom: 18px; }
.onb-skip { display: block; width: 100%; margin-top: 12px; background: none; border: none; color: #9aa0a8; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; text-align: center; padding: 8px; }
.onb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.onb-chip { padding: 6px 13px; border-radius: 999px; border: 1px solid var(--btn-hairline); background: transparent; color: #9aa0a8; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; }
.onb-chip.is-sel { color: #E8C879; border-color: rgba(232,200,121,0.5); }
.onb-photo { display: flex; align-items: center; gap: 12px; }
.onb-photo img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border-silver); flex-shrink: 0; }
.onb-photo-btn { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--btn-hairline); background: transparent; color: #cfd3d8; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; }
.onb-photo-note { font-size: 11px; color: #9aa0a8; margin-top: 5px; }

/* HUB-2 — Approvals Hub (NOTIF-3 shell reused) + HQ tile badge */
.hq-appr-badge { display: inline-block; min-width: 18px; padding: 1px 6px; margin-left: 6px; border-radius: 999px; background: #E8C879; color: #1a1000; font-size: 10.5px; font-weight: 800; text-align: center; vertical-align: 1px; }
.appr-group-head { font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase; color: #9aa0a8; font-weight: 700; margin: 14px 12px 6px; }
#apprHubList .lp-pending-card { margin: 0 10px 8px; }
button.lp-pending-card { width: calc(100% - 20px); font-family: inherit; text-align: left; cursor: pointer; }
.appr-roster-row .px-hrhub-chev { margin-left: auto; color: #6b7280; font-size: 16px; }
.appr-domain-chip { font-size: 9.5px; letter-spacing: 0.8px; text-transform: uppercase; color: #9aa0a8; border: 1px solid var(--btn-hairline); border-radius: 999px; padding: 1px 7px; margin-left: 6px; white-space: nowrap; }
/* ROSTER-BATCH — rank-2 draft: dirty cells + sticky submit bar */
td.rost-cell.rb-dirty { box-shadow: inset 0 0 0 1px rgba(232,200,121,0.55); }
.rb-bar { position: sticky; bottom: 8px; display: flex; align-items: center; gap: 8px; margin: 10px 14px; padding: 10px 12px; border: 1px solid rgba(232,200,121,0.4); border-radius: 12px; background: rgba(20,16,6,0.96); z-index: 5; }
.rb-count { font-size: 12px; font-weight: 700; color: #E8C879; margin-right: auto; }

/* LEAD-PULL — rostered-today picker group + dept-row suggestion */
.ops-picker-group-head { font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; color: #9aa0a8; font-weight: 700; margin: 8px 2px 4px; }
.ops-picker-shift { color: #9aa0a8; font-weight: 500; }
.ops-picker-row.is-suggested { border: 1px solid rgba(232,200,121,0.5); border-radius: 10px; }
.ops-suggest { display: block; font-size: 10.5px; color: #9aa0a8; font-weight: 600; margin-top: 2px; cursor: pointer; }
.ops-suggest:hover { color: #E8C879; }

/* PG-BATCH — draft footer + pending banner + batch op list */
.pg-draft-bar { position: sticky; bottom: 8px; display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 10px 12px; border: 1px solid rgba(232,200,121,0.4); border-radius: 12px; background: rgba(20,16,6,0.96); z-index: 5; }
.pg-draft-count { font-size: 12px; font-weight: 700; color: #E8C879; margin-right: auto; }
.pg-batch-pending { margin: 0 0 8px; padding: 8px 12px; border: 1px solid rgba(232,200,121,0.3); border-radius: 10px; background: rgba(232,200,121,0.06); font-size: 11.5px; color: #E8C879; font-weight: 600; }
.appr-op-list { margin-top: 4px; font-size: 11px; color: #9aa0a8; }

/* HUB-SCOPE-2 — two-stage chain chips on TMT cards */
.appr-stage-chip { display: inline-block; margin-top: 3px; font-size: 10px; font-weight: 600; color: #9aa0a8; }
.appr-stage-chip.is-endorsed { color: #E8C879; }
/* HUB-UX-4 — stage-1 dimmed Approve · Activity view */
.lp-btn-approve.is-waiting, .lp-btn-approve[disabled] { opacity: 0.35; cursor: default; pointer-events: none; }
.appr-view-btn { width: auto; font-size: 11px; font-weight: 700; letter-spacing: 0.4px; padding: 0 10px; }
.appr-act.is-rejected { border-left: 2px solid rgba(248,113,113,0.55); opacity: 0.85; }
/* ACT-FIX-1 — gold waiting note over the dimmed Approve · activity rows ·
   ＋Post forced into the BOARD eyebrow row */
.appr-stage-chip.is-waiting { display: flex; align-items: center; gap: 4px; color: #E8C879; font-size: 9.5px; font-weight: 700; margin-bottom: 4px; text-align: right; }
.appr-act-row1 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.appr-act-when { flex-shrink: 0; font-size: 10.5px; color: #9aa0a8; }
.appr-act-status.is-ok { color: #34d399; font-weight: 700; }
.appr-act-status.is-no { color: #f87171; font-weight: 700; }
.ops-eyebrow-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
/* ROSTER-CHAIN-CLIENT — editor chain states */
.rost-life-btn.is-waiting { opacity: 0.35; cursor: default; pointer-events: none; }
.rost-tl-wait { display: inline-flex; align-items: center; gap: 4px; color: #E8C879; font-size: 10px; font-weight: 700; margin-right: 6px; }
.rost-tl-endorsed { color: #E8C879; font-size: 10px; font-weight: 700; margin-right: 6px; }

/* OPS-16b — narrow viewports: text columns truncate, fixed items never shrink */
.ops-lead-name, .ops-lead-role { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ops-dept-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ops-dept-assign.is-set { flex-shrink: 1; min-width: 0; }
.ops-dept-lead-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* OPS-4 — unified board: quiet gold unread dot on unseen posts */
.ops-post-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #E8C879;
  box-shadow: 0 0 6px rgba(232,200,121,0.45);
  margin-left: auto;
  flex-shrink: 0;
  align-self: center;
}
.ops-memo-card .ops-memo-top { align-items: center; }

/* MAG-PUBLIC-2 — public no-login reader (?issue= links): hide all app
   chrome around the reader; fixed Apple-quiet Join CTA. */
body.px-public-mag .top-bar,
body.px-public-mag .bottom-nav { display: none !important; }
#pxPubMagCta { display: none; }
body.px-public-mag #pxPubMagCta {
  display: flex;
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 10050;
  justify-content: center;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(10,10,12,0.82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-top: 1px solid rgba(232,200,121,0.35);
}
#pxPubMagCta button {
  appearance: none; -webkit-appearance: none;
  background: transparent;
  border: 1px solid #E8C879;
  color: #E8C879;
  border-radius: 999px;
  padding: 10px 26px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.8px;
  cursor: pointer;
}
/* MAG-P10 — the fixed Join CTA (z 10050) covered the reader's bottom
   controls (dots z20 @ bottom 22px, page label @ 44px): the LAST dot — the
   jump to the final page — and bottom-zone swipe starts were swallowed by
   the bar. Public mode only: inset the stage and lift the bottom chrome. */
body.px-public-mag .pmag-reader { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
body.px-public-mag .pmag-dots { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
body.px-public-mag .pmag-pagelabel { bottom: calc(98px + env(safe-area-inset-bottom, 0px)); }

/* HERO-2 — Lookout "Current Issue" hero: full-bleed cover, dark scrim,
   gold eyebrow, serif title, label, READ ISSUE. Shimmer while cover loads. */
.ph2 {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid rgba(212,175,55,0.18);
  background: #0a0a0c;
}
.ph2-img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.ph2-img.ph2-loaded { opacity: 1; }
.ph2-shimmer {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(255,255,255,0.02) 40%, rgba(255,255,255,0.07) 50%, rgba(255,255,255,0.02) 60%);
  background-size: 200% 100%;
  animation: ph2shimmer 1.6s linear infinite;
}
@keyframes ph2shimmer { to { background-position: -200% 0; } }
.ph2-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 30%, rgba(0,0,0,0.84) 100%);
}
.ph2-copy {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 20px;
  display: flex; flex-direction: column; gap: 6px;
}
.ph2-eyebrow {
  font-size: 10px; letter-spacing: 2px; font-weight: 600;
  color: #D4AF37;
  text-transform: uppercase;
}
.ph2-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 28px; line-height: 1.12; font-weight: 700;
  letter-spacing: -0.3px;
  color: #FFFFFF;
  margin: 0;
}
.ph2-label { font-size: 12px; color: rgba(255,255,255,0.65); }
.ph2-read {
  margin-top: 8px;
  font-size: 11px; letter-spacing: 1.6px; font-weight: 600;
  color: #D4AF37;
}

/* LOOKOUT-LIVE — News Desk link-out cards ("Title | Source | URL" body lines) */
.pmp-links { display: flex; flex-direction: column; gap: 10px; margin: 18px 0; }
.pmp-link-card {
  display: block;
  padding: 14px 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-gold);
  border-radius: var(--r-md);
  text-decoration: none;
}
.pmp-link-title {
  display: block;
  font-size: 14px; font-weight: 600; line-height: 1.4;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.pmp-link-src {
  font-size: 11px; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.6px;
}

/* Page 1 — Cover page (interior) */
.pmp-cover-page {
  padding: 0 !important;
  background: linear-gradient(180deg, #1a1010 0%, #0a0505 100%);
}
.pmp-cover-hero {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: brightness(0.55) grayscale(0.1) contrast(1.1);
}
.pmp-cover-overlay {
  position: absolute; inset: 0;
  padding: 64px 22px 76px;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, transparent 30%, transparent 55%, rgba(0,0,0,0.95));
  color: #fff;
}
.pmp-cover-brand {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.3);
}
.pmp-cover-brand-name {
  font-size: 17px; font-weight: 700; letter-spacing: 2px;
}
.pmp-cover-brand-name .pml-mag { font-size: 0.7em; margin-left: 0.25em; }
.pmp-cover-issue-label { font-size: 10px; letter-spacing: 2px; color: rgba(255,255,255,0.7); font-weight: 600; }
.pmp-cover-copy-block {
  margin-top: auto;
  margin-bottom: 20px;
}
.pmp-cover-kicker {
  display: inline-block; background: #FFFFFF;
  color: #1a1000; padding: 4px 10px;
  font-size: 10px; font-weight: 800; letter-spacing: 1.5px;
  border-radius: 3px; margin-bottom: 12px;
}
.pmp-cover-main {
  font-size: 44px; font-weight: 900; line-height: 0.95;
  letter-spacing: -2px; color: #fff;
  text-shadow: 0 2px 24px rgba(0,0,0,0.7);
}
.pmp-cover-main-gold {
  color: var(--text-primary);
}
.pmp-cover-desc {
  font-size: 14px; color: rgba(255,255,255,0.85);
  line-height: 1.4; margin-top: 10px; max-width: 290px;
}
.pmp-cover-bullets {
  list-style: none; display: flex; flex-direction: column; gap: 5px;
  margin-top: 16px;
}
.pmp-cover-bullets li {
  font-size: 13px; font-weight: 600;
  color: var(--text-primary);
  padding-left: 14px; position: relative;
}
.pmp-cover-bullets li::before {
  content: '›'; position: absolute; left: 0;
  color: var(--text-primary); font-weight: 900;
}
.pmp-cover-foot {
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.3);
  display: flex; justify-content: space-between; align-items: center;
}
.pmp-cover-foot span:first-child { font-size: 11px; letter-spacing: 2px; color: rgba(255,255,255,0.7); font-weight: 600; }
.pmp-swipe-hint { font-size: 11px; letter-spacing: 2px; color: var(--text-primary); font-weight: 700; text-transform: uppercase; }

/* Page 2 — Editor's Letter */
.pmp-editor-head {
  display: flex; gap: 14px; align-items: center;
  margin-bottom: 20px;
}
.pmp-editor-avatar {
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, #FFFFFF, #B0B4BC);
  color: #1a1000;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 20px;
  border: 2px solid var(--text-primary);
}
.pmp-editor-title h3 { font-size: 15px; font-weight: 700; color: #fff; }
.pmp-editor-title p { font-size: 12px; color: var(--text-primary); font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
.pmp-sig {
  margin-top: 22px;
  font-family: 'Inter', serif;
  font-size: 22px; font-weight: 700;
  color: var(--text-primary);
  font-style: italic;
}
.pmp-sig-sub { font-size: 11px; color: var(--text-muted); letter-spacing: 1.5px; text-transform: uppercase; margin-top: 2px; }

/* Page 4 — News grid */
.pmp-news-list { display: flex; flex-direction: column; gap: 14px; }
.pmp-news-item {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-silver);
  border-radius: var(--r-md);
  transition: all 0.2s;
}
.pmp-news-item:hover { border-color: var(--border-gold); background: var(--gold-glow-sm); }
.pmp-news-img {
  width: 80px; height: 80px; border-radius: var(--r-sm);
  background-size: cover; background-position: center;
  flex-shrink: 0;
}
.pmp-news-body { flex: 1; min-width: 0; }
.pmp-news-cat { font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-primary); font-weight: 700; }
.pmp-news-body h4 { font-size: 14px; font-weight: 700; line-height: 1.25; color: #fff; margin: 3px 0 4px; }
.pmp-news-body p { font-size: 12px; color: var(--text-secondary); line-height: 1.4; }

/* Page 5 — The One Spotlight */
.pmp-emp-hero {
  position: relative;
  width: calc(100% + 44px);
  margin: 0 -22px 16px;
  aspect-ratio: 16/9;
  background-size: cover; background-position: center;
}
.pmp-emp-hero::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.95));
}
.pmp-emp-hero .pmp-emp-badge {
  position: absolute; top: 12px; left: 22px; z-index: 2;
  font-size: 10px; font-weight: 800; letter-spacing: 2px;
  padding: 5px 12px; border-radius: 3px;
  background: linear-gradient(135deg, #FFFFFF, #B0B4BC);
  color: #1a1000;
}
.pmp-emp-name { font-size: 28px; font-weight: 900; letter-spacing: -0.8px; color: #fff; margin-bottom: 4px; }
.pmp-emp-loc { font-size: 13px; color: var(--text-primary); font-weight: 600; letter-spacing: 0.5px; margin-bottom: 18px; }
.pmp-emp-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin: 14px 0;
}
.pmp-stat-box {
  padding: 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border-gold);
  border-radius: var(--r-sm);
  text-align: center;
}
.pmp-stat-num { display: block; font-size: 20px; font-weight: 900; color: var(--text-primary); letter-spacing: -0.5px; }
.pmp-stat-lbl { display: block; font-size: 9px; color: rgba(255,255,255,0.6); letter-spacing: 1px; text-transform: uppercase; margin-top: 2px; font-weight: 600; }
.pmp-role-list { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 18px; }
.pmp-role-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-silver);
  border-radius: var(--r-sm);
  font-size: 13px;
}
.pmp-role-item strong { color: #fff; font-weight: 700; }
.pmp-role-item span { color: var(--text-primary); font-weight: 600; font-size: 12px; }

/* Page 6 — Crew Stars */
.pmp-star-list { display: flex; flex-direction: column; gap: 14px; }
.pmp-star-item {
  display: flex; gap: 14px; align-items: center;
  padding: 14px;
  background: linear-gradient(180deg, rgba(26,26,38,0.9), rgba(14,14,22,0.9));
  border: 1px solid var(--border-gold);
  border-radius: var(--r-md);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.pmp-star-photo {
  width: 64px; height: 64px; border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--text-primary);
  box-shadow: 0 0 20px rgba(255,255,255,0.3);
  flex-shrink: 0;
}
.pmp-star-info { flex: 1; min-width: 0; }
.pmp-star-name { font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 2px; }
.pmp-star-role { font-size: 12px; color: var(--text-primary); margin-bottom: 4px; }
.pmp-star-cred { font-size: 11px; color: var(--text-secondary); line-height: 1.35; }
.pmp-star-score {
  display: flex; flex-direction: column; align-items: center;
  flex-shrink: 0;
}
.pmp-star-score-num {
  font-size: 24px; font-weight: 900;
  background: linear-gradient(135deg, var(--text-primary), #FFFFFF);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}
.pmp-star-score-lbl { font-size: 8px; letter-spacing: 1px; color: var(--text-muted); text-transform: uppercase; font-weight: 700; }
.pmp-star-badge { font-size: 16px; color: var(--text-primary); margin-top: 4px; }

/* Page 7 — Gig Report (bar chart) */
.pmp-chart {
  padding: 14px 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-gold);
  border-radius: var(--r-md);
  margin: 14px 0;
}
.pmp-chart-title { font-size: 11px; letter-spacing: 1.5px; color: var(--text-primary); font-weight: 700; text-transform: uppercase; margin-bottom: 14px; }
.pmp-bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.pmp-bar-label { font-size: 11px; color: rgba(255,255,255,0.8); font-weight: 600; width: 72px; flex-shrink: 0; }
.pmp-bar-track {
  flex: 1; height: 10px;
  background: rgba(255,255,255,0.06);
  border-radius: var(--r-full);
  overflow: hidden;
  position: relative;
}
.pmp-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #FFFFFF, #B0B4BC);
  border-radius: var(--r-full);
  position: relative;
  box-shadow: 0 0 8px rgba(255,255,255,0.5);
  animation: pmpBarGrow 1s cubic-bezier(0.25, 1, 0.3, 1) both;
}
.pmp-bar-val { font-size: 11px; color: var(--text-primary); font-weight: 700; width: 40px; text-align: right; flex-shrink: 0; }
@keyframes pmpBarGrow { from { width: 0; } }
.pmp-metric-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0; }

/* Page 8 — Tips */
.pmp-tip-list { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.pmp-tip-item {
  display: flex; gap: 12px;
  padding: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-gold);
  border-radius: var(--r-md);
}
.pmp-tip-num {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, #FFFFFF, #B0B4BC);
  color: #1a1000;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 14px;
  flex-shrink: 0;
}
.pmp-tip-body h4 { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 4px; }
.pmp-tip-body p { font-size: 12px; color: var(--text-secondary); line-height: 1.5; }

/* Page 9 — Events */
.pmp-event-list { display: flex; flex-direction: column; gap: 10px; }
.pmp-event-item {
  display: flex; gap: 14px; align-items: center;
  padding: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-silver);
  border-radius: var(--r-md);
  transition: border-color 0.2s;
}
.pmp-event-item:hover { border-color: var(--border-gold); }
.pmp-event-date {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  border-radius: var(--r-sm);
  background: linear-gradient(135deg, #FFFFFF, #B0B4BC);
  color: #1a1000;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(255,255,255,0.3);
}
.pmp-event-day { font-size: 20px; font-weight: 900; line-height: 1; }
.pmp-event-mon { font-size: 9px; letter-spacing: 1.5px; font-weight: 800; text-transform: uppercase; margin-top: 2px; }
.pmp-event-info h4 { font-size: 13px; font-weight: 700; color: #fff; margin-bottom: 2px; }
.pmp-event-info p { font-size: 11px; color: var(--text-secondary); line-height: 1.35; }

/* Page 10 — Back cover */
.pmp-back-page {
  padding: 0 !important;
  background: #000;
}
.pmp-back-content {
  position: absolute; inset: 0;
  padding: 64px 24px 76px;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  text-align: center;
  background:
    radial-gradient(circle at 50% 30%, rgba(255,255,255,0.12), transparent 60%),
    linear-gradient(180deg, #0a0a0a 0%, #000 100%);
}
.pmp-back-brand-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 14px; }
.pmp-back-brand {
  font-size: 54px; font-weight: 900; letter-spacing: -2px;
  line-height: 0.9;
  color: #fff;
}
.pmp-back-brand-accent {
  background: linear-gradient(135deg, var(--text-primary), #FFFFFF);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: italic;
}
.pmp-back-mag { font-size: 14px; letter-spacing: 6px; color: var(--silver-light); font-weight: 600; text-transform: uppercase; }
.pmp-back-cta {
  text-align: center;
}
.pmp-back-headline {
  font-size: 28px; font-weight: 800; letter-spacing: -0.5px;
  color: #fff; margin-bottom: 6px;
  line-height: 1.1;
}
.pmp-back-tagline {
  font-size: 14px; letter-spacing: 4px;
  background: linear-gradient(135deg, var(--text-primary), #FFFFFF);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 24px;
}
.pmp-qr {
  width: 120px; height: 120px;
  margin: 0 auto;            /* centered on the back page */
  border: 3px solid var(--text-primary);
  background:
    conic-gradient(from 0deg, #fff 0% 12.5%, #000 12.5% 25%, #fff 25% 37.5%, #000 37.5% 50%, #fff 50% 62.5%, #000 62.5% 75%, #fff 75% 87.5%, #000 87.5% 100%);
  background-size: 20px 20px;
  border-radius: var(--r-md);
  position: relative;
  padding: 12px;
  box-shadow: 0 0 40px rgba(255,255,255,0.25);
}
.pmp-qr::before {
  content: ''; position: absolute; inset: 8px;
  background-image:
    linear-gradient(#000 50%, transparent 50%),
    linear-gradient(90deg, transparent 50%, #000 50%);
  background-size: 8px 8px;
  opacity: 0.85;
}
.pmp-qr::after {
  content: 'SCAN ME'; position: absolute;
  bottom: -22px; left: 50%; transform: translateX(-50%);
  font-size: 10px; letter-spacing: 2px; color: var(--text-primary);
  font-weight: 700;
  white-space: nowrap;
}
/* Real QR rendered (qrcode-generator) — white quiet zone, kill the CSS pattern. */
.pmp-qr.has-qr { background: #fff; padding: 10px; }
.pmp-qr.has-qr::before { display: none; }
.pmp-qr.has-qr svg { width: 100%; height: 100%; display: block; }
.pmp-socials { display: flex; gap: 14px; margin-top: 32px; justify-content: center; }
.pmp-social {
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--border-gold);
  color: var(--text-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 800;
  text-decoration: none;   /* now real <a> links */
}
.pmp-social-handle { font-size: 10px; letter-spacing: 1.5px; color: var(--silver); margin-top: 8px; text-transform: uppercase; }
.pmp-back-copy {
  font-size: 10px; letter-spacing: 1.5px; color: var(--text-muted);
  text-transform: uppercase;
  margin-top: 6px;
}

/* ══════════════════════════════════════════════
   THE ONE WALLET
══════════════════════════════════════════════ */
.wallet-balance-card {
  margin: 16px 20px;
  background: linear-gradient(135deg, #1a1400 0%, #2a2000 50%, #1a1400 100%);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 24px; padding: 24px;
  position: relative; overflow: hidden;
}
.wallet-balance-card::before {
  content: ''; position: absolute;
  width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
  top: -50px; right: -50px;
}
.wallet-balance-label { font-size: 12px; color: var(--text-primary); font-weight: 600; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 8px; }
.wallet-balance-amount { font-size: 42px; font-weight: 800; color: var(--text); letter-spacing: -1px; }
.wallet-balance-amount span { font-size: 22px; font-weight: 600; color: var(--text-primary); }
.wallet-actions { display: flex; gap: 12px; margin-top: 20px; }
.wallet-actions button {
  flex: 1; padding: 10px; border-radius: 12px; border: none;
  font-size: 13px; font-weight: 700; cursor: pointer;
  background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3);
  color: var(--text-primary);
}
.wallet-actions button.primary { background: #FFFFFF; color: #000; border-color: var(--text-primary); }
.credit-card-visual {
  margin: 0 20px 16px;
  background: linear-gradient(135deg, #1a1a2e, #16213e, #0f3460);
  border-radius: 18px; padding: 20px;
  border: 1px solid rgba(255,255,255,0.08);
  position: relative; overflow: hidden;
}
.card-chip { width: 36px; height: 28px; border-radius: 6px; background: linear-gradient(135deg, #FFFFFF, #B0B4BC); margin-bottom: 20px; }
.card-number { font-size: 16px; letter-spacing: 3px; color: rgba(255,255,255,0.8); font-family: monospace; margin-bottom: 16px; }
.card-bottom { display: flex; justify-content: space-between; align-items: flex-end; }
.card-name { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.7); text-transform: uppercase; }
.card-expiry { font-size: 12px; color: rgba(255,255,255,0.5); }
.wallet-tx-list { padding: 0 20px; }
.wallet-tx-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--border);
}
.wallet-tx-item:last-child { border-bottom: none; }
.wallet-tx-icon {
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--glass); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
}
.wallet-tx-info { flex: 1; }
.wallet-tx-name { font-size: 14px; font-weight: 600; color: var(--text); }
.wallet-tx-date { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.wallet-tx-amount { font-size: 15px; font-weight: 700; }
.wallet-tx-amount.debit { color: #ff453a; }
.wallet-tx-amount.credit { color: #30d158; }

/* ══════════════════════════════════════════════
   COACHING HUB
══════════════════════════════════════════════ */
.coaching-tab-bar {
  display: flex; gap: 8px; overflow-x: auto;
  padding: 0 20px 12px; scrollbar-width: none;
}
.coaching-tab-bar::-webkit-scrollbar { display: none; }
.coaching-tab {
  padding: 8px 16px; border-radius: 20px; font-size: 13px; font-weight: 600;
  border: 1px solid var(--border); background: transparent;
  color: var(--text-muted); cursor: pointer; white-space: nowrap;
  transition: all 0.2s;
}
.coaching-tab.active { background: #FFFFFF; color: #000; border-color: var(--text-primary); }
.coaching-featured {
  margin: 0 20px 16px; border-radius: 20px; overflow: hidden;
  position: relative; cursor: pointer;
}
.coaching-featured img { width: 100%; height: 180px; object-fit: cover; display: block; }
.coaching-featured-info {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 50%);
  padding: 16px; display: flex; flex-direction: column; justify-content: flex-end;
}
.coaching-featured-cat { font-size: 10px; color: var(--text-primary); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 4px; }
.coaching-featured-title { font-size: 18px; font-weight: 800; color: #fff; margin-bottom: 4px; }
.coaching-featured-meta { font-size: 12px; color: rgba(255,255,255,0.7); }
.coaching-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 12px; padding: 0 20px;
}
.coaching-card {
  background: var(--glass); border: 1px solid var(--border);
  border-radius: 16px; overflow: hidden; cursor: pointer;
}
.coaching-card img { width: 100%; height: 90px; object-fit: cover; display: block; }
.coaching-card-info { padding: 10px; }
.coaching-card-info .cc-cat { font-size: 10px; color: var(--cyan); font-weight: 700; text-transform: uppercase; }
.coaching-card-info .cc-title { font-size: 13px; font-weight: 700; color: var(--text); line-height: 1.3; margin-top: 3px; }
.coaching-card-info .cc-meta { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.coaching-card-info .cc-bar {
  height: 3px; background: var(--border); border-radius: 2px; margin-top: 8px;
}
.coaching-card-info .cc-progress { height: 100%; background: #FFFFFF; border-radius: 2px; }

/* ══════════════════════════════════════════════
   CREWSCORE CHART CARD
══════════════════════════════════════════════ */
.cscore-chart-card {
  background: var(--glass); border: 1px solid var(--border);
  border-radius: 20px; padding: 20px;
  margin: 0 20px 16px;
}
.cscore-chart-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; }
.cscore-chart-header h4 { font-size: 15px; font-weight: 700; color: var(--text); margin: 0; }
.cscore-chart-header .chart-range {
  font-size: 12px; color: var(--text-primary); font-weight: 600;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2);
  border-radius: 8px; padding: 4px 10px;
}
.cscore-svg { width: 100%; height: 100px; overflow: visible; }
.cscore-axis { display: flex; justify-content: space-between; margin-top: 6px; }
.cscore-axis span { font-size: 10px; color: var(--text-muted); }
.cscore-stats-row { display: flex; gap: 12px; margin-top: 16px; }
.cscore-stat { flex: 1; background: var(--bg-card); border-radius: 12px; padding: 12px; text-align: center; }
.cscore-stat .stat-val { font-size: 20px; font-weight: 800; color: var(--text-primary); }
.cscore-stat .stat-lbl { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* ══════════════════════════════════════════════
   BANK DETAILS — DOC VAULT
══════════════════════════════════════════════ */
.bank-section { padding: 16px 20px; }
.bank-section h4 { font-size: 16px; font-weight: 700; color: var(--text); margin: 0 0 16px; }
.bank-form { display: flex; flex-direction: column; gap: 12px; }
.bank-form .form-field label { display: block; font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 6px; letter-spacing: 0.5px; }
.bank-form .form-field input,
.bank-form .form-field select {
  width: 100%; padding: 12px 14px;
  background: var(--glass); border: 1px solid var(--border);
  border-radius: 12px; color: var(--text); font-size: 14px; outline: none;
  box-sizing: border-box;
}
.bank-form .form-field select option { background: var(--bg-card); }
.bank-form .form-field input:focus,
.bank-form .form-field select:focus { border-color: var(--text-primary); }
.bank-save-btn {
  width: 100%; padding: 14px;
  background: #FFFFFF; border: none; border-radius: 14px;
  color: #000; font-size: 15px; font-weight: 700; cursor: pointer;
  margin-top: 4px;
}
.bank-verified-badge {
  display: flex; align-items: center; gap: 8px;
  background: rgba(48,209,88,0.1); border: 1px solid rgba(48,209,88,0.3);
  border-radius: 12px; padding: 12px 16px;
  color: #30d158; font-size: 14px; font-weight: 600;
  margin-bottom: 16px;
}

/* ══════════════════════════════════════════════
   STORY VIEWER
══════════════════════════════════════════════ */
.story-viewer-overlay {
  position: absolute; inset: 0; z-index: 500;
  background: #000; display: none;
  flex-direction: column;
}
.story-viewer-overlay.open { display: flex; }
.story-progress-bar {
  display: flex; gap: 4px; padding: 12px 16px 8px;
  position: absolute; top: 0; left: 0; right: 0; z-index: 10;
}
.story-progress-seg {
  flex: 1; height: 2px; border-radius: 2px;
  background: rgba(255,255,255,0.3); overflow: hidden;
}
.story-progress-seg .fill {
  height: 100%; background: #fff;
  transition: width 0.1s linear; width: 0%;
}
.story-progress-seg.done .fill { width: 100%; }
.story-viewer-header {
  position: absolute; top: 24px; left: 0; right: 0; z-index: 10;
  display: flex; align-items: center; gap: 10px; padding: 0 16px;
}
.story-viewer-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; }
.story-viewer-name { font-size: 14px; font-weight: 700; color: #fff; flex: 1; }
.story-viewer-time { font-size: 12px; color: rgba(255,255,255,0.7); }
.story-close-btn { background: none; border: none; color: #fff; font-size: 22px; cursor: pointer; padding: 4px; }
.story-content { flex: 1; position: relative; overflow: hidden; }
.story-content img { width: 100%; height: 100%; object-fit: cover; }
.story-content .story-caption {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
  padding: 40px 20px 20px; color: #fff; font-size: 16px; font-weight: 600;
}
.story-tap-prev, .story-tap-next {
  position: absolute; top: 0; bottom: 0; width: 40%;
  z-index: 5; cursor: pointer;
}
.story-tap-prev { left: 0; }
.story-tap-next { right: 0; }

/* ══════════════════════════════════════════════
   STORY CREATOR
══════════════════════════════════════════════ */
.story-creator-overlay {
  position: absolute; inset: 0; z-index: 500;
  background: var(--bg-base); display: none;
  flex-direction: column;
}
.story-creator-overlay.open { display: flex; }
.story-creator-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.story-creator-header h3 { font-size: 18px; font-weight: 700; color: var(--text); margin: 0; }
.story-preview-area {
  flex: 1; margin: 16px 20px;
  border-radius: 20px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  position: relative; min-height: 280px;
}
.story-bg-options { display: flex; gap: 10px; padding: 0 20px 16px; overflow-x: auto; scrollbar-width: none; }
.story-bg-options::-webkit-scrollbar { display: none; }
.story-bg-swatch {
  width: 44px; height: 44px; border-radius: 12px;
  border: 2px solid transparent; cursor: pointer; flex-shrink: 0;
  transition: transform 0.15s;
}
.story-bg-swatch.active { border-color: #fff; transform: scale(1.1); }
.story-text-input {
  margin: 0 20px 12px; background: var(--glass);
  border: 1px solid var(--border); border-radius: 14px;
  padding: 12px 16px; color: var(--text); font-size: 15px;
  outline: none; resize: none; width: calc(100% - 40px);
  box-sizing: border-box; font-family: inherit;
}
.story-publish-btn {
  margin: 0 20px 20px; padding: 15px;
  background: #FFFFFF; border: none; border-radius: 14px;
  color: #000; font-size: 16px; font-weight: 700;
  cursor: pointer; width: calc(100% - 40px);
}

/* ══════════════════════════════════════════════
   VIDEO PLAYER OVERLAY
══════════════════════════════════════════════ */
.video-overlay {
  position: absolute; inset: 0; z-index: 400;
  background: #000; display: none;
  flex-direction: column;
}
.video-overlay.open { display: flex; }
.video-player-area {
  position: relative; background: #000;
  flex-shrink: 0;
}
.video-player-area img { width: 100%; height: 220px; object-fit: cover; display: block; }
.video-play-btn {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(8px);
  border: 2px solid rgba(255,255,255,0.3);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: #fff; font-size: 26px;
  transition: transform 0.15s;
}
.video-play-btn:active { transform: translate(-50%,-50%) scale(0.9); }
.video-progress-bar {
  height: 4px; background: rgba(255,255,255,0.2);
  cursor: pointer; margin: 0; position: relative;
}
.video-progress-fill { height: 100%; background: #FFFFFF; width: 0%; transition: width 0.3s linear; pointer-events: none; }
.video-info { padding: 20px; flex: 1; overflow-y: auto; }
.video-info h3 { font-size: 18px; font-weight: 700; color: var(--text); margin: 0 0 6px; }
.video-info .video-meta { font-size: 13px; color: var(--text-muted); margin-bottom: 16px; }
.video-info .video-desc { font-size: 14px; line-height: 1.6; color: var(--text-secondary); }
.video-time-display { font-size: 13px; color: var(--text-muted); display: flex; justify-content: space-between; padding: 8px 20px 0; }
.video-header-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; position: absolute; top: 0; left: 0; right: 0; z-index: 5;
  background: linear-gradient(to bottom, rgba(0,0,0,0.7), transparent);
}
.video-header-bar button { background: none; border: none; color: #fff; cursor: pointer; font-size: 14px; font-weight: 600; }

/* ══════════════════════════════════════════════
   QUIZ OVERLAY
══════════════════════════════════════════════ */
.quiz-overlay {
  position: absolute; inset: 0; z-index: 450;
  background: rgba(0,0,0,0.85); backdrop-filter: blur(6px);
  display: none; align-items: flex-end;
}
.quiz-overlay.open { display: flex; }
.quiz-panel {
  background: var(--bg-card); border-radius: 28px 28px 0 0;
  padding: 28px 24px; width: 100%;
  border-top: 1px solid var(--border); max-height: 85%;
  overflow-y: auto;
}
.quiz-panel h3 { font-size: 18px; font-weight: 700; color: var(--text); margin: 0 0 4px; }
.quiz-panel .quiz-sub { font-size: 13px; color: var(--text-muted); margin-bottom: 20px; }
.quiz-q { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 12px; }
.quiz-options { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.quiz-opt {
  padding: 12px 16px; border-radius: 12px;
  border: 1.5px solid var(--border); background: var(--glass);
  color: var(--text); font-size: 14px; text-align: left;
  cursor: pointer; transition: all 0.2s;
}
.quiz-opt.selected { border-color: var(--text-primary); background: rgba(255,255,255,0.1); }
.quiz-opt.correct { border-color: #30d158; background: rgba(48,209,88,0.15); color: #30d158; }
.quiz-opt.wrong { border-color: #ff453a; background: rgba(255,69,58,0.15); color: #ff453a; }
.quiz-counter { font-size: 12px; color: var(--text-muted); margin-bottom: 16px; }
.quiz-submit-btn {
  width: 100%; padding: 14px; border-radius: 14px; border: none;
  background: #FFFFFF; color: #000; font-size: 15px; font-weight: 700;
  cursor: pointer; margin-top: 8px;
}
.quiz-submit-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ══════════════════════════════════════════════
   CERTIFICATE OVERLAY
══════════════════════════════════════════════ */
.cert-overlay {
  position: absolute; inset: 0; z-index: 480;
  background: rgba(0,0,0,0.9); backdrop-filter: blur(8px);
  display: none; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 24px;
}
.cert-overlay.open { display: flex; }
.cert-card {
  background: linear-gradient(135deg, #0d0d00 0%, #1a1500 50%, #0d0d00 100%);
  border: 2px solid var(--text-primary); border-radius: 24px;
  padding: 32px 28px; width: 100%; max-width: 340px;
  text-align: center; position: relative; overflow: hidden;
}
.cert-card::before {
  content: ''; position: absolute; inset: 8px;
  border: 1px solid rgba(255,255,255,0.25); border-radius: 18px; pointer-events: none;
}
.cert-logo { font-size: 13px; font-weight: 800; letter-spacing: 1px; color: var(--text-primary); margin-bottom: 8px; }
.cert-title { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 16px; }
.cert-name { font-size: 26px; font-weight: 800; color: var(--text); margin-bottom: 4px; }
.cert-subtitle { font-size: 13px; color: var(--text-muted); margin-bottom: 20px; }
.cert-course { font-size: 16px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.cert-date { font-size: 12px; color: var(--text-muted); margin-bottom: 24px; }
.cert-qr {
  width: 80px; height: 80px; margin: 0 auto 16px;
  background: #fff; border-radius: 10px; padding: 6px;
}
.cert-id { font-size: 10px; color: var(--text-muted); letter-spacing: 1px; }
.cert-actions { display: flex; gap: 12px; margin-top: 20px; width: 100%; max-width: 340px; }
.cert-actions button {
  flex: 1; padding: 13px; border-radius: 14px; border: none;
  font-size: 14px; font-weight: 700; cursor: pointer;
}
.cert-actions .btn-close { background: var(--glass); color: var(--text); border: 1px solid var(--border); }
.cert-actions .btn-add { background: #FFFFFF; color: #000; }

/* ══════════════════════════════════════════════
   OVERLAY BACKDROP + SLIDE PANEL
══════════════════════════════════════════════ */
.overlay-backdrop {
  position: absolute; inset: 0; z-index: 300;
  background: rgba(0,0,0,0.75); backdrop-filter: blur(6px);
  display: none; align-items: flex-end;
}
.overlay-backdrop.open { display: flex; }
.slide-panel {
  background: var(--bg-card); border-radius: 28px 28px 0 0;
  width: 100%; border-top: 1px solid var(--border);
  padding: 28px 24px; max-height: 90%; overflow-y: auto;
}
.slide-panel-handle {
  width: 36px; height: 4px; border-radius: 2px;
  background: var(--border); margin: 0 auto 20px;
}
.slide-panel h3 { font-size: 20px; font-weight: 700; color: var(--text); margin: 0 0 6px; }
.slide-panel .panel-sub { font-size: 13px; color: var(--text-muted); margin-bottom: 20px; }

/* ══════════════════════════════════════════════
   BOOKING MODAL
══════════════════════════════════════════════ */
.booking-body { display: flex; flex-direction: column; gap: 16px; }
.date-chips-row { display: flex; gap: 8px; flex-wrap: wrap; }
.date-chip {
  padding: 8px 16px; border-radius: 20px;
  border: 1.5px solid var(--border); background: var(--glass);
  color: var(--text-muted); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all 0.2s;
}
.date-chip.selected { border-color: var(--text-primary); background: rgba(255,255,255,0.12); color: var(--text-primary); }
.focus-chips-row { display: flex; gap: 8px; flex-wrap: wrap; }
.focus-chip {
  padding: 8px 16px; border-radius: 20px;
  border: 1.5px solid var(--border); background: var(--glass);
  color: var(--text-muted); font-size: 13px; cursor: pointer; transition: all 0.2s;
}
.focus-chip.active { border-color: var(--cyan); background: rgba(0,210,255,0.1); color: var(--cyan); }
.booking-confirm-btn {
  width: 100%; padding: 15px; border-radius: 14px; border: none;
  background: #FFFFFF; color: #000; font-size: 16px; font-weight: 700;
  cursor: pointer; margin-top: 4px;
}

/* ══════════════════════════════════════════════
   OPS EDITOR PANEL
══════════════════════════════════════════════ */
.ops-editor-form { display: flex; flex-direction: column; gap: 12px; }
.ops-editor-form input,
.ops-editor-form select {
  width: 100%; padding: 12px 14px;
  background: var(--glass); border: 1px solid var(--border);
  border-radius: 12px; color: var(--text); font-size: 14px; outline: none;
  box-sizing: border-box;
}
.ops-status-row { display: flex; gap: 8px; flex-wrap: wrap; }
.ops-status-chip {
  padding: 8px 14px; border-radius: 20px; font-size: 12px; font-weight: 700;
  border: 1.5px solid transparent; cursor: pointer; transition: all 0.2s;
}
.ops-status-chip[data-status="available"] { border-color: #30d158; color: #30d158; }
.ops-status-chip[data-status="available"].active { background: rgba(48,209,88,0.15); }
.ops-status-chip[data-status="push"] { border-color: var(--text-primary); color: var(--text-primary); }
.ops-status-chip[data-status="push"].active { background: rgba(255,255,255,0.15); }
.ops-status-chip[data-status="86"] { border-color: #ff453a; color: #ff453a; }
.ops-status-chip[data-status="86"].active { background: rgba(255,69,58,0.15); }
.ops-status-chip[data-status="low"] { border-color: #ff9f0a; color: #ff9f0a; }
.ops-status-chip[data-status="low"].active { background: rgba(255,159,10,0.15); }
.ops-save-btn {
  width: 100%; padding: 14px; background: #FFFFFF; border: none;
  border-radius: 14px; color: #000; font-size: 15px; font-weight: 700;
  cursor: pointer; margin-top: 4px;
}

/* ══════════════════════════════════════════════
   MAG ADMIN MODAL
══════════════════════════════════════════════ */
.mag-admin-panel .admin-field { margin-bottom: 14px; }
.mag-admin-panel .admin-field label { display: block; font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 6px; letter-spacing: 0.5px; }
.mag-admin-panel .admin-field input,
.mag-admin-panel .admin-field textarea,
.mag-admin-panel .admin-field select {
  width: 100%; padding: 12px 14px;
  background: var(--glass); border: 1px solid var(--border);
  border-radius: 12px; color: var(--text); font-size: 14px; outline: none;
  box-sizing: border-box; font-family: inherit;
}
.mag-admin-panel .admin-field textarea { resize: vertical; min-height: 80px; }
.mag-generate-btn {
  width: 100%; padding: 12px; border-radius: 12px; border: none;
  background: var(--glass); border: 1px solid var(--border);
  color: var(--text-primary); font-size: 14px; font-weight: 600;
  cursor: pointer; margin-bottom: 10px;
}
.mag-publish-btn {
  width: 100%; padding: 14px; border-radius: 14px; border: none;
  background: #FFFFFF; color: #000; font-size: 15px; font-weight: 700;
  cursor: pointer;
}

/* ══════════════════════════════════════════════
   ADD CARD PANEL
══════════════════════════════════════════════ */
.add-card-form { display: flex; flex-direction: column; gap: 12px; }
.add-card-form input {
  width: 100%; padding: 12px 14px;
  background: var(--glass); border: 1px solid var(--border);
  border-radius: 12px; color: var(--text); font-size: 14px; outline: none;
  box-sizing: border-box; letter-spacing: 1px;
}
.add-card-form .card-row { display: flex; gap: 12px; }
.add-card-form .card-row input { flex: 1; }
.add-card-submit {
  width: 100%; padding: 14px; border-radius: 14px; border: none;
  background: #FFFFFF; color: #000; font-size: 15px; font-weight: 700;
  cursor: pointer; margin-top: 4px;
}

/* ══════════════════════════════════════════════
   MISC UTILITY
══════════════════════════════════════════════ */
.section-divider {
  height: 1px; background: var(--border);
  margin: 16px 20px;
}
.empty-state {
  text-align: center; padding: 40px 20px;
  color: var(--text-muted); font-size: 14px;
}
.empty-state .empty-icon { font-size: 40px; margin-bottom: 12px; }
.toaster {
  position: absolute; bottom: 80px; left: 50%; transform: translateX(-50%);
  background: rgba(30,30,30,0.95); backdrop-filter: blur(8px);
  border: 1px solid var(--border); border-radius: 14px;
  padding: 12px 20px; color: var(--text); font-size: 14px; font-weight: 600;
  z-index: 9999; opacity: 0; transition: opacity 0.3s;
  pointer-events: none; white-space: nowrap;
}
.toaster.show { opacity: 1; }
@keyframes slideUp { from { transform: translate(-50%, 20px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
.toaster.show { animation: slideUp 0.3s ease both; }

/* ══════════════════════════════════════════════
   CREATE POST MODAL
══════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════════════
   PL-FEED-4 — Post composer: modern iOS/Threads-grade full-height sheet.
   Premium dark + gold; grab handle, gold-hairline char meter, borderless
   auto-grow text surface, horizontal media-card tray, pinned bottom action
   bar. Every JS hook/id preserved. ═══════════════════════════════════ */
.create-post-overlay {
  display: none; position: fixed; inset: 0; z-index: 400;
  background: rgba(5,6,10,0.82); backdrop-filter: blur(14px);
  align-items: flex-end; justify-content: center;
}
.create-post-overlay.show { display: flex; animation: fadeIn 0.2s ease both; }
.create-post-modal {
  /* UI-POLISH-1 — the sheet fits its content (no fixed full-height dead
     space); media previews and long text grow it up to the old ceiling. */
  width: 100%; max-width: 500px; height: auto; max-height: 94vh; max-height: 94dvh;
  background: linear-gradient(180deg, #111319 0%, #0a0b10 100%);
  border: 1px solid rgba(255,255,255,0.18); border-bottom: none;
  border-radius: 26px 26px 0 0;
  padding: 0;
  display: flex; flex-direction: column;
  box-shadow: 0 -20px 60px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.05);
  animation: cpSpringUp 0.42s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative; overflow: hidden;
}
@keyframes cpSpringUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.cp-grab {
  width: 38px; height: 5px; border-radius: 999px;
  background: rgba(255,255,255,0.18);
  margin: 9px auto 2px; flex-shrink: 0;
}
.cp-meter {
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  opacity: 0; transition: opacity 0.25s; pointer-events: none; z-index: 5;
}
.cp-meter-fill { height: 100%; width: 0; border-radius: 0 2px 2px 0;
  background: linear-gradient(90deg, #FFFFFF, #B0B4BC);
  transition: width 0.15s ease-out, background 0.2s; }

.cp-header {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 14px 12px; flex-shrink: 0;
}
.cp-header h3 { flex: 1; text-align: center; font-size: 16px; font-weight: 800; color: #fff; letter-spacing: -0.3px; }
.cp-close {
  width: 34px; height: 34px; border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.06); color: var(--text-secondary);
  transition: all 0.2s; flex-shrink: 0; border: none; cursor: pointer;
}
.cp-close:hover { background: rgba(255,255,255,0.12); color: #fff; }
/* Gold Share pill — disabled → glowing enabled → loading. */
.cp-submit {
  flex-shrink: 0; border: none; cursor: pointer;
  padding: 9px 22px; border-radius: 999px;
  font-size: 14px; font-weight: 800; letter-spacing: 0.1px;
  color: #1a1000;
  background: linear-gradient(135deg, #FFFFFF, #B0B4BC);
  box-shadow: 0 4px 18px rgba(255,255,255,0.4);
  transition: transform 0.15s, box-shadow 0.2s, opacity 0.2s;
}
.cp-submit:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(255,255,255,0.55); }
.cp-submit:not(:disabled):active { transform: scale(0.96); }
.cp-submit:disabled { opacity: 0.32; cursor: not-allowed; box-shadow: none; background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.5); }

.cp-author { display: flex; align-items: center; gap: 12px; padding: 0 18px 10px; flex-shrink: 0; }
.cp-avatar { width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--border-gold); object-fit: cover; }
.cp-author-meta { display: flex; flex-direction: column; gap: 4px; }
.cp-name { font-size: 15px; font-weight: 800; color: #fff; letter-spacing: -0.2px; }
.cp-audience {
  display: inline-flex; align-items: center; gap: 5px; align-self: flex-start;
  padding: 4px 11px; border-radius: var(--r-full);
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.3);
  color: var(--text-primary);
  font-size: 11px; font-weight: 700; cursor: pointer;
  transition: all 0.2s;
}
.cp-audience:hover { background: rgba(255,255,255,0.18); }

/* Scrollable body — header + author fixed above, actions pinned below. */
.cp-scroll {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 0 18px 12px; scrollbar-width: none;
  display: flex; flex-direction: column; gap: 12px;
}
.cp-scroll::-webkit-scrollbar { display: none; }
/* Borderless type-on-the-surface text area. */
.cp-text {
  width: 100%; min-height: 120px; max-height: 50vh;
  padding: 4px 0; background: transparent; border: none;
  color: #fff; font-size: 19px; line-height: 1.45; font-weight: 400;
  resize: none; overflow-y: auto; outline: none;
}
.cp-text::placeholder { color: rgba(255,255,255,0.28); font-weight: 400; }
.cp-counter { display: none; }   /* hidden until UI-POLISH-1's 800-char reveal */
.cp-counter.is-show { display: block; text-align: right; font-size: 11px;
  color: var(--text-muted); margin: -6px 2px 0; }
.cp-counter.cp-counter-warn { color: #f87171; }
/* UI-POLISH-1 — link-recognition chip under the composer field */
.cp-linkchip { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  border: 1px solid rgba(232,200,121,0.35); border-radius: 999px; padding: 3px 10px;
  font-size: 11px; color: var(--text-secondary); }
/* UI-POLISH-2 — an explicit display beats the [hidden] UA rule (the empty-
   composer ghost chip); same guard .cp-media already carries. */
.cp-linkchip[hidden] { display: none !important; }
.cp-linkchip svg { color: #E8C879; flex-shrink: 0; }

/* Media tray — horizontal scroll of large rounded cards. _pxCpRenderPhotos
   renders the inner flex row; this just makes it a scroll lane. */
.cp-media { width: 100%; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.cp-media::-webkit-scrollbar { display: none; }
.cp-media[hidden] { display: none; }
.cp-media-img, .cp-media-vid { display: none; }   /* legacy single-media nodes unused in the feed flow */

.cp-caption {
  padding: 11px 14px; background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-silver); border-radius: 14px;
  color: #fff; font-size: 14px; width: 100%; outline: none;
}
.cp-caption:focus { border-color: var(--border-gold); }

/* Pinned bottom action bar — large gold-tinted icon buttons. */
.cp-actions {
  display: flex; gap: 10px; flex-shrink: 0;
  padding: 12px 18px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255,255,255,0.06);
  background: rgba(10,11,16,0.6); backdrop-filter: blur(8px);
}
.cp-action-btn {
  /* UI-POLISH-1 — quiet icon pills on one row (were two full-width slabs) */
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 14px; flex: 0 0 auto; cursor: pointer;
  background: transparent;
  border: 1px solid var(--btn-hairline);
  border-radius: 999px;
  color: #B9BDC4; font-size: 12px; font-weight: 600;
  transition: all 0.18s;
}
.cp-action-btn svg { width: 16px; height: 16px; }
.cp-action-btn:hover { background: rgba(255,255,255,0.16); border-color: var(--text-primary); }
.cp-action-btn:active { transform: scale(0.97); }
.cp-action-btn svg { color: var(--text-primary); }

.cp-audience-menu {
  position: absolute; top: 64px; left: 66px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-gold);
  border-radius: var(--r-md);
  padding: 6px;
  display: flex; flex-direction: column; gap: 2px;
  box-shadow: var(--shadow-lg);
  z-index: 10;
  min-width: 220px;
}
.cp-aud-opt {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  text-align: left;
  color: #fff;
  transition: background 0.15s;
}
.cp-aud-opt:hover { background: var(--gold-glow-sm); }
.cp-aud-opt strong { font-size: 13px; font-weight: 700; }
.cp-aud-opt span { font-size: 11px; color: var(--text-secondary); }

/* ══════════════════════════════════════════════
   JOB-BLOCK MODAL
══════════════════════════════════════════════ */
.job-block-overlay {
  display: none; position: fixed; inset: 0; z-index: 500;
  background: rgba(7,9,15,0.85); backdrop-filter: blur(12px);
  align-items: center; justify-content: center;
  padding: 20px;
}
.job-block-overlay.show { display: flex; animation: fadeIn 0.2s ease both; }
.job-block-modal {
  position: relative;
  width: 100%; max-width: 380px;
  background: linear-gradient(180deg, var(--bg-elevated), rgba(14,14,22,0.96));
  border: 1px solid var(--border-gold);
  border-radius: var(--r-xl);
  padding: 28px 22px 22px;
  text-align: center;
  box-shadow: var(--shadow-lg), 0 0 60px rgba(255,255,255,0.15);
  animation: storyModalIn 0.26s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.jb-icon {
  width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(135deg, #FFFFFF, #B0B4BC);
  color: #1a1000;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px;
  box-shadow: 0 6px 24px rgba(255,255,255,0.4);
}
.jb-title { font-size: 19px; font-weight: 800; letter-spacing: -0.3px; color: #fff; margin-bottom: 8px; }
.jb-sub { font-size: 13px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 18px; }
.jb-plans {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-bottom: 18px;
}
.jb-plan {
  position: relative;
  padding: 14px 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-silver);
  border-radius: var(--r-md);
  text-align: center;
}
.jb-plan-featured {
  border-color: var(--text-primary);
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.02));
  box-shadow: 0 4px 18px rgba(255,255,255,0.15);
}
.jb-plan-badge {
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  padding: 3px 8px; border-radius: 4px;
  background: linear-gradient(135deg, #FFFFFF, #B0B4BC);
  color: #1a1000;
  font-size: 9px; font-weight: 900; letter-spacing: 1px;
  white-space: nowrap;
}
.jb-plan-name { font-size: 12px; font-weight: 700; color: var(--text-primary); letter-spacing: 1px; text-transform: uppercase; }
.jb-plan-price { font-size: 22px; font-weight: 900; color: #fff; margin: 6px 0 2px; letter-spacing: -0.5px; }
.jb-plan-price strong { font-weight: 900; color: var(--text-primary); }
.jb-plan-sub { font-size: 10px; color: var(--text-muted); line-height: 1.3; }
.jb-actions { display: flex; gap: 10px; }
.jb-actions .btn-outline, .jb-actions .btn-primary { flex: 1; padding: 12px 16px; font-size: 13px; }

/* ══════════════════════════════════════════════
   FEED — user-created post extras
══════════════════════════════════════════════ */
.feed-post-image {
  width: 100%;
  display: block;
  max-height: 480px;
  object-fit: cover;
}
.feed-post-video {
  width: 100%;
  display: block;
  max-height: 480px;
  object-fit: cover;
  background: #000;
}
.feed-post-caption {
  padding: 10px 16px 6px;
  font-size: 14px; line-height: 1.55;
  color: var(--text-primary);
}
.feed-post-audience {
  font-size: 10px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--text-primary);
  font-weight: 700;
  background: var(--gold-glow-sm);
  padding: 2px 8px; border-radius: 3px;
  margin-left: 6px;
}
.feed-video-wrap { position: relative; background: #000; }
.feed-video-wrap .feed-video-indicator {
  position: absolute; top: 10px; right: 10px;
  padding: 4px 8px; border-radius: 4px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.5px;
  backdrop-filter: blur(4px);
  pointer-events: none;
}

/* ══════════════════════════════════════════════
   PROFILE POSTS TAB
══════════════════════════════════════════════ */
.profile-posts { display: flex; flex-direction: column; gap: 12px; padding: 4px 0; }
.profile-posts-empty {
  text-align: center;
  padding: 40px 20px;
  border: 1px dashed var(--border-silver);
  border-radius: var(--r-lg);
  color: var(--text-secondary);
}
.pp-empty-icon {
  font-size: 40px; margin-bottom: 10px;
  background: var(--chrome-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pp-empty-title { font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 4px; }
.pp-empty-sub { font-size: 12px; color: var(--text-muted); }
.pp-post {
  background: linear-gradient(180deg, rgba(22,22,32,0.95), rgba(16,16,24,0.9));
  border: 1px solid var(--border-silver);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.pp-post-body { padding: 12px 14px; }
.pp-post-meta {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; color: var(--text-muted);
  margin-bottom: 6px;
}
.pp-post-text { font-size: 13px; line-height: 1.5; color: var(--text-primary); white-space: pre-wrap; }
.pp-post-img { width: 100%; display: block; max-height: 320px; object-fit: cover; }
.pp-post-vid { width: 100%; display: block; max-height: 320px; object-fit: cover; background: #000; }

/* ══════════════════════════════════════════════
   STORY — video badge on ring
══════════════════════════════════════════════ */
.story-ring { position: relative; }
.story-video-badge {
  position: absolute; bottom: -2px; right: -2px;
  width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(135deg, #FFFFFF, #B0B4BC);
  color: #1a1000;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--bg-elevated);
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  z-index: 2;
}

/* ══════════════════════════════════════════════
   STORY VIEWER (fullscreen)
══════════════════════════════════════════════ */
.story-viewer {
  display: none; position: fixed; inset: 0; z-index: 800;
  background: #000;
  flex-direction: column;
}
.story-viewer.show { display: flex; animation: fadeIn 0.15s ease both; }
.sv-progress-row {
  position: relative; z-index: 3;
  padding: 10px 12px 4px;
  display: flex; gap: 4px;
}
.sv-progress {
  flex: 1; height: 3px; border-radius: 2px;
  background: rgba(255,255,255,0.25);
  overflow: hidden;
  position: relative;
}
.sv-progress-fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0%;
  background: linear-gradient(90deg, #FFFFFF, #B0B4BC);
  border-radius: 2px;
}
.sv-progress.done .sv-progress-fill { width: 100%; }
.sv-progress.active .sv-progress-fill {
  animation: svProgress var(--sv-dur, 5s) linear forwards;
}
@keyframes svProgress { from { width: 0; } to { width: 100%; } }
.sv-topbar {
  position: relative; z-index: 3;
  display: flex; align-items: center; gap: 10px;
  padding: 4px 14px 8px;
  background: linear-gradient(180deg, rgba(0,0,0,0.6), transparent);
}
.sv-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 2px solid var(--text-primary); }
.sv-meta { flex: 1; display: flex; flex-direction: column; line-height: 1.15; }
.sv-name { font-size: 13px; font-weight: 700; color: #fff; }
.sv-sub { font-size: 11px; color: rgba(255,255,255,0.7); }
.sv-close {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,0.1);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(6px);
}
/* PL-FEED-5 — owner delete affordance. Force-hide via the [hidden] attr
   (the .sv-close display:flex would otherwise win over the UA [hidden] rule). */
.sv-del[hidden] { display: none !important; }
.sv-del:hover { background: rgba(248,113,113,0.22); color: #f87171; }
.sv-stage {
  position: relative;
  flex: 1;
  background: #000;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.sv-media { width: 100%; height: 100%; object-fit: contain; background: #000; }
.sv-tap { position: absolute; top: 0; bottom: 0; width: 40%; z-index: 2; cursor: pointer; }
.sv-tap-left { left: 0; }
.sv-tap-right { right: 0; }

/* ══════════════════════════════════════════════
   WALLET PANEL
══════════════════════════════════════════════ */
.wallet-btn { position: relative; color: var(--text-primary) !important; }
.wallet-btn:hover { background: var(--gold-glow-sm); color: var(--text-primary) !important; }
.wallet-btn svg { color: var(--text-primary); }
.wallet-low-dot {
  position: absolute; top: 6px; right: 6px;
  width: 8px; height: 8px; border-radius: 50%;
  background: #ef4444;
  border: 2px solid var(--bg-elevated);
  box-shadow: 0 0 8px rgba(239,68,68,0.6);
  animation: pulse 1.4s ease-in-out infinite;
}
.wallet-overlay {
  display: none; position: fixed; inset: 0; z-index: 350;
  background: rgba(7,9,15,0.72); backdrop-filter: blur(10px);
  align-items: flex-end; justify-content: center;
}
.wallet-overlay.show { display: flex; animation: fadeIn 0.2s ease both; }
.wallet-panel {
  width: 100%; max-width: 430px;
  max-height: 88vh;
  background: linear-gradient(180deg, var(--bg-elevated), #0c0c14);
  border: 1px solid var(--border-gold);
  border-bottom: none;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: 8px 18px 22px;
  overflow-y: auto;
  box-shadow: 0 -20px 60px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.08);
  animation: slideUpSheet 0.3s cubic-bezier(0.34, 1.2, 0.64, 1);
  scrollbar-width: none;
}
.wallet-panel::-webkit-scrollbar { display: none; }
.wp-handle {
  width: 42px; height: 4px; border-radius: 2px;
  background: var(--silver-dark);
  margin: 6px auto 12px;
  opacity: 0.5;
}
.wp-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 14px;
}
.wp-eyebrow { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-primary); font-weight: 700; }
.wp-title { font-size: 19px; font-weight: 800; color: #fff; letter-spacing: -0.3px; }
.wp-section-label {
  font-size: 10px; letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--text-muted); font-weight: 700;
  margin: 16px 0 10px;
}
.wp-balance-card {
  position: relative;
  padding: 18px 20px;
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, #1a1400 0%, #2a2000 50%, #0d0a00 100%);
  border: 1px solid var(--border-gold);
  box-shadow: 0 8px 32px rgba(255,255,255,0.15), inset 0 1px 0 rgba(255,255,255,0.05);
  overflow: hidden;
}
.wp-balance-bg {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,0.18), transparent 55%),
    radial-gradient(circle at 90% 90%, rgba(255,255,255,0.12), transparent 45%);
}
.wp-balance-label {
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--text-primary); font-weight: 700;
  position: relative; z-index: 1;
}
.wp-balance-amt {
  font-size: 34px; font-weight: 900; letter-spacing: -1px;
  margin: 6px 0 4px;
  position: relative; z-index: 1;
  background: linear-gradient(135deg, #fff 0%, #FFFFFF 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.wp-balance-sub {
  font-size: 11px; letter-spacing: 1px; color: rgba(255,255,255,0.7);
  position: relative; z-index: 1;
}
.wp-quick-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
.wp-quick {
  padding: 10px 4px;
  border-radius: var(--r-md);
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border-gold);
  color: var(--text-primary);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.3px;
  transition: all 0.2s;
}
.wp-quick:hover {
  background: linear-gradient(135deg, #FFFFFF, #B0B4BC);
  color: #1a1000;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(255,255,255,0.35);
}
.wp-custom-row {
  display: flex; gap: 8px; margin-top: 10px;
}
.wp-custom-row input { flex: 1; }
.wp-custom-row .btn-gold { white-space: nowrap; flex-shrink: 0; padding: 12px 18px !important; }
.wp-tx-list { display: flex; flex-direction: column; }
.wp-tx {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--border);
}
.wp-tx:last-child { border-bottom: none; }
.wp-tx-icon {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800;
  flex-shrink: 0;
}
.wp-tx-icon.credit { background: rgba(5,150,105,0.15); color: #34d399; border: 1px solid rgba(5,150,105,0.3); }
.wp-tx-icon.debit  { background: rgba(220,38,38,0.12); color: #f87171; border: 1px solid rgba(220,38,38,0.3); }
.wp-tx-body { flex: 1; min-width: 0; }
.wp-tx-name { font-size: 13px; font-weight: 600; color: #fff; }
.wp-tx-date { font-size: 11px; color: var(--text-muted); }
.wp-tx-amt { font-size: 13px; font-weight: 700; letter-spacing: 0.2px; flex-shrink: 0; }
.wp-tx-amt.credit { color: #34d399; }
.wp-tx-amt.debit { color: #f87171; }
.wp-cards { display: flex; gap: 10px; overflow-x: auto; padding: 2px 0 8px; scrollbar-width: none; }
.wp-cards::-webkit-scrollbar { display: none; }
.wp-card {
  flex-shrink: 0;
  width: 240px;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-md);
  padding: 14px 16px;
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 22px rgba(0,0,0,0.45);
  color: #fff;
}
.wp-card.visa { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 60%, #0a0a1a 100%); border: 1px solid rgba(30,80,180,0.3); }
.wp-card.mastercard { background: linear-gradient(135deg, #2b1410 0%, #3d1b15 60%, #1a0a08 100%); border: 1px solid rgba(220,80,50,0.3); }
.wp-card::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.06) 50%, transparent 60%);
}
.wp-card-top {
  display: flex; justify-content: space-between; align-items: center;
  position: relative; z-index: 1;
}
.wp-card-chip {
  width: 28px; height: 22px; border-radius: 4px;
  background: linear-gradient(135deg, #FFFFFF, #6A7080);
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15);
}
.wp-card-brand { font-size: 14px; font-weight: 900; letter-spacing: 1px; }
.wp-card-brand.visa { color: #fff; font-style: italic; }
.wp-card-brand.mc-marks { display: inline-flex; }
.wp-card-brand.mc-marks span {
  width: 14px; height: 14px; border-radius: 50%;
  display: inline-block;
}
.wp-card-brand.mc-marks span:first-child { background: #eb001b; }
.wp-card-brand.mc-marks span:last-child { background: #f79e1b; margin-left: -6px; }
.wp-card-num {
  font-size: 15px; font-weight: 700; letter-spacing: 3px;
  position: relative; z-index: 1;
}
.wp-card-foot {
  display: flex; justify-content: space-between; align-items: flex-end;
  font-size: 10px;
  color: rgba(255,255,255,0.8);
  position: relative; z-index: 1;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.wp-card-name { font-size: 10px; font-weight: 600; }
.wp-card-exp { font-size: 10px; font-weight: 600; }
.wp-add-card {
  width: 100%;
  padding: 12px;
  border-radius: var(--r-md);
  background: transparent;
  border: 1.5px dashed var(--border-gold);
  color: var(--text-primary);
  font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: all 0.2s;
  margin-top: 4px;
}
.wp-add-card:hover { background: var(--gold-glow-sm); border-style: solid; }

.create-story-hint {
  font-size: 10px; font-weight: 500; color: var(--text-muted); margin-left: 4px; letter-spacing: 0.5px;
}

/* ══════════════════════════════════════════════
   CREATE STORY — rebuild (Text + Photo tabs)
══════════════════════════════════════════════ */
.cs-modal {
  padding: 16px 18px 18px !important;
  max-width: 380px;
  display: flex; flex-direction: column; gap: 12px;
}
.cs-header {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.cs-header .create-story-close { position: static; }
.cs-title {
  flex: 1; text-align: center;
  font-size: 16px; font-weight: 800; color: #fff; letter-spacing: -0.2px;
  margin-right: 32px;
}
.cs-tabs {
  display: flex; gap: 6px; padding: 4px;
  background: var(--bg-card);
  border: 1px solid var(--border-silver);
  border-radius: var(--r-full);
}
.cs-tab {
  flex: 1;
  padding: 8px 14px;
  border-radius: var(--r-full);
  font-size: 13px; font-weight: 600;
  color: var(--text-secondary);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: all 0.2s;
}
.cs-tab.active {
  background: linear-gradient(135deg, #FFFFFF, #B0B4BC);
  color: #1a1000;
  box-shadow: 0 2px 10px rgba(255,255,255,0.3);
}
.cs-pane { display: flex; flex-direction: column; gap: 10px; }
.cs-pane[hidden] { display: none; }

/* TEXT mode */
.cs-preview {
  width: 100%;
  aspect-ratio: 9/12;
  max-height: 300px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, #0f766e, #134e4a);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  border: 1px solid var(--border-silver);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
  transition: background 0.25s;
}
.cs-preview-text {
  font-size: 22px; font-weight: 800; line-height: 1.25;
  text-align: center;
  color: #fff;
  letter-spacing: -0.3px;
  text-shadow: 0 2px 18px rgba(0,0,0,0.4);
  word-break: break-word;
  max-width: 100%;
}
.cs-bg-picker {
  display: flex; gap: 8px;
  justify-content: center;
  padding: 4px 0 2px;
}
.cs-bg {
  width: 32px; height: 32px; border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.cs-bg:hover { transform: scale(1.08); }
.cs-bg.active { border-color: var(--text-primary); transform: scale(1.12); box-shadow: 0 0 0 3px var(--gold-glow-sm); }

.cs-text-input {
  width: 100%;
  padding: 12px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-silver);
  border-radius: var(--r-md);
  color: #fff;
  font-size: 14px; line-height: 1.5;
  min-height: 60px; resize: vertical;
  outline: none;
}
.cs-text-input:focus { border-color: var(--border-gold); }
.cs-text-input::placeholder { color: var(--text-muted); }

/* PHOTO mode */
.cs-photo-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.cs-photo-opt {
  position: relative;
  aspect-ratio: 9/12;
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  background: var(--bg-card);
  transition: all 0.2s;
}
.cs-photo-opt img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.25s;
}
.cs-photo-opt:hover img { transform: scale(1.05); }
.cs-photo-opt.active {
  border-color: var(--text-primary);
  box-shadow: 0 0 0 2px var(--gold-glow), 0 6px 18px rgba(255,255,255,0.25);
}
.cs-photo-opt.active::after {
  content: '✓'; position: absolute; top: 6px; right: 6px;
  width: 20px; height: 20px; border-radius: 50%;
  background: linear-gradient(135deg, #FFFFFF, #B0B4BC);
  color: #1a1000;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 900;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.cs-caption-input {
  width: 100%;
  padding: 10px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-silver);
  border-radius: var(--r-md);
  color: #fff;
  font-size: 13px;
  outline: none;
}
.cs-caption-input:focus { border-color: var(--border-gold); }

.cs-share-btn { margin-top: 4px; }

/* ════════════════════════════════════════════════════════════════════
   PL-FEED-4 — Story composer: FULL-SCREEN IMMERSIVE creator. The media is
   the screen, edge to edge; all chrome floats over it. Replaces the
   PL-FEED-3 full-bleed card. Every JS hook/id preserved; the .cs-has-media
   class (set in _pxRenderStagedSegments) flips empty-hero ↔ live preview.
   ══════════════════════════════════════════════════════════════════════ */
.create-story-overlay { padding: 0; align-items: stretch; justify-content: center; }
.create-story-modal.cs-modal {
  width: 100%; max-width: 520px; height: 100%; margin: 0 auto;
  border: none !important; border-radius: 0 !important; padding: 0 !important;
  background: #000; box-shadow: none; gap: 0;
  display: block; position: relative; overflow: hidden;
  animation: fadeIn 0.22s ease both;
}
/* HERO preview — fills the whole modal (beats the legacy teal .cs-preview). */
#createStoryOverlay .cs-preview {
  position: absolute; inset: 0; width: 100%; height: 100%;
  max-width: none; max-height: none; aspect-ratio: auto;
  margin: 0; padding: 0; border: none; border-radius: 0;
  background: #000; display: block; box-shadow: none;
}
#createStoryOverlay #csPreviewImg,
#createStoryOverlay #csPreviewVid {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; background: #000;
}
#createStoryOverlay .cs-preview::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 120px;
  background: linear-gradient(rgba(0,0,0,0.55), transparent); pointer-events: none; z-index: 1;
}
#createStoryOverlay .cs-preview::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 250px;
  background: linear-gradient(transparent, rgba(0,0,0,0.65)); pointer-events: none; z-index: 1;
}
#csCaptionDraggable { z-index: 3; }

/* thin gold progress line across the very top */
#createStoryOverlay .cs-progress {
  position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 12;
  background: rgba(255,255,255,0.08); display: none;
}
#createStoryOverlay .cs-progress-bar {
  height: 100%; width: 0; border-radius: 0 2px 2px 0;
  background: linear-gradient(90deg, #FFFFFF, #B0B4BC);
  transition: width 0.25s ease-out;
}
#createStoryOverlay #csProgressLabel { display: none; }

/* top overlay: × + segment count */
.cs-top {
  position: absolute; top: 0; left: 0; right: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(12px + env(safe-area-inset-top)) 14px 12px;
}
#createStoryOverlay .create-story-close {
  position: static; width: 40px; height: 40px; border-radius: 50%;
  background: rgba(0,0,0,0.4); color: #fff; backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; border: none; cursor: pointer;
}
.cs-seg-count { color: #fff; font-size: 13px; font-weight: 700; text-shadow: 0 1px 4px rgba(0,0,0,0.6); }

/* empty state — centred add-media hero (gold dashed ring) */
.cs-empty-hero {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: radial-gradient(circle at 50% 42%, rgba(255,255,255,0.08), #08090c 62%);
  border: none; cursor: pointer; color: #fff;
}
.cs-empty-ring {
  width: 94px; height: 94px; border-radius: 50%;
  border: 2px dashed rgba(255,255,255,0.6); color: var(--text-primary);
  display: flex; align-items: center; justify-content: center;
}
.cs-empty-title { font-size: 19px; font-weight: 800; letter-spacing: -0.3px; }
.cs-empty-sub { font-size: 13px; color: rgba(255,255,255,0.5); }
.cs-modal.cs-has-media .cs-empty-hero { display: none; }
.cs-modal:not(.cs-has-media) .cs-preview { display: none !important; }
.cs-modal:not(.cs-has-media) .cs-bottom { display: none; }

/* bottom overlay: floating caption + staged strip + Share */
.cs-bottom {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 10;
  display: flex; flex-direction: column; gap: 10px;
  padding: 12px 14px calc(14px + env(safe-area-inset-bottom));
}
#createStoryOverlay .cs-caption-input {
  width: 100%; padding: 11px 14px; border-radius: 14px;
  background: rgba(0,0,0,0.42); border: 1px solid rgba(255,255,255,0.18);
  color: #fff; font-size: 14px; outline: none; backdrop-filter: blur(6px);
}
#createStoryOverlay .cs-caption-input:focus { border-color: var(--text-primary); }
#createStoryOverlay .cs-caption-input::placeholder { color: rgba(255,255,255,0.55); }
#createStoryOverlay .cs-staged {
  display: flex; gap: 8px; overflow-x: auto; padding: 2px 0; scrollbar-width: none;
}
#createStoryOverlay .cs-staged::-webkit-scrollbar { display: none; }
#createStoryOverlay .cs-staged[hidden] { display: none; }
.cs-seg {
  position: relative; flex: 0 0 auto; width: 54px; height: 54px;
  border-radius: 10px; overflow: hidden; cursor: pointer; padding: 0;
  border: 2px solid transparent; background: #000;
}
.cs-seg.is-active { border-color: var(--text-primary); box-shadow: 0 0 0 1px var(--text-primary); }
.cs-seg img, .cs-seg video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-seg-dur { position: absolute; bottom: 2px; left: 3px; font-size: 9px; font-weight: 700; color: #fff; text-shadow: 0 1px 2px #000; }
.cs-seg-x {
  position: absolute; top: 1px; right: 1px; width: 17px; height: 17px;
  border-radius: 50%; background: rgba(0,0,0,0.7); color: #fff;
  font-size: 11px; line-height: 17px; text-align: center;
}
.cs-seg-add {
  border: 2px dashed rgba(255,255,255,0.5); color: var(--text-primary);
  font-size: 24px; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.06);
}
#createStoryOverlay .cs-share-btn {
  width: 100%; margin: 0; padding: 15px; border: none; border-radius: 16px;
  font-size: 15px; font-weight: 800; cursor: pointer; color: #1a1000;
  background: linear-gradient(135deg, #FFFFFF, #B0B4BC);
  box-shadow: 0 6px 22px rgba(255,255,255,0.4);
  transition: transform 0.15s, opacity 0.2s;
}
#createStoryOverlay .cs-share-btn:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }
#createStoryOverlay .cs-share-btn:not(:disabled):active { transform: scale(0.98); }

/* Text-thumbnail on user story tile (for text-only stories) */
.story-text-thumb {
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ══════════════════════════════════════════════
   STORY VIEWER — overlays + text
══════════════════════════════════════════════ */
.sv-gradient-top {
  position: absolute; top: 0; left: 0; right: 0; height: 120px;
  background: linear-gradient(180deg, rgba(0,0,0,0.7) 0%, transparent 100%);
  pointer-events: none; z-index: 1;
}
.sv-gradient-bottom {
  position: absolute; bottom: 0; left: 0; right: 0; height: 200px;
  background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, transparent 100%);
  pointer-events: none; z-index: 1;
}
.sv-text-overlay {
  position: absolute; left: 0; right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  padding: 0 24px;
  text-align: center;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.25;
  color: #fff;
  letter-spacing: -0.4px;
  text-shadow: 0 2px 20px rgba(0,0,0,0.55), 0 0 40px rgba(0,0,0,0.3);
  pointer-events: none;
  word-break: break-word;
}
.sv-text-overlay[hidden] { display: none; }
.sv-stage { transition: transform 0.25s ease, opacity 0.25s ease; }
.sv-topbar { position: relative; z-index: 4; }
.sv-progress-row { position: relative; z-index: 4; }

/* Viewed rings turn muted */
.story-ring:not(.gold-ring):not(.add-ring) img {
  filter: brightness(0.88);
}

/* ═══════════════════════════════════════════════════
   PAYROLL
   ═══════════════════════════════════════════════════ */
.hr-tab-pay { position: relative; }
.hr-pay-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  font-family: 'Inter', sans-serif; font-weight: 800; font-size: 11px;
  color: var(--text-primary);
  vertical-align: -2px;
}
.hr-tab-pay.active .hr-pay-ico { color: #1a1000; }

/* Access banner */
.pay-access-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; margin-bottom: 14px;
  background: linear-gradient(90deg, rgba(129,140,255,0.08), rgba(255,255,255,0.02));
  border: 1px solid var(--border-gold);
  border-left: 3px solid var(--text-primary);
  border-radius: var(--r-md);
  font-size: 11px; color: var(--text-secondary);
}
.pay-access-banner strong { display: block; color: #fff; font-size: 12px; margin-bottom: 1px; }
.pay-access-banner > div { flex: 1; min-width: 0; }
.pay-access-banner > div span { font-size: 10px; color: var(--text-muted); }
.pay-lock-ico { font-size: 18px; }
.pay-access-chip {
  font-size: 9px; letter-spacing: 0.6px; padding: 3px 8px;
  background: rgba(129,140,255,0.15); color: var(--text-primary);
  border-radius: var(--r-full); border: 1px solid var(--border-gold);
  font-weight: 700; white-space: nowrap;
}

/* Month bar */
.pay-month-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; margin-bottom: 14px;
  background: linear-gradient(135deg, rgba(129,140,255,0.08), rgba(255,255,255,0.02));
  border: 1px solid var(--border-silver);
  border-radius: var(--r-md);
}
.pay-month-nav {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,0.05); border: 1px solid var(--border-silver);
  color: var(--text-primary); font-size: 18px; font-weight: 800;
  cursor: pointer; transition: all 0.15s;
}
.pay-month-nav:hover { background: var(--gold-glow-sm); border-color: var(--border-gold); }
.pay-month-info { flex: 1; }
.pay-month-eyebrow { font-size: 9px; letter-spacing: 1.5px; color: var(--text-muted); font-weight: 700; text-transform: uppercase; }
.pay-month-title { display: block; font-family: 'Playfair Display', serif; font-size: 18px; font-weight: 700; color: #fff; }
.pay-history-select {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border-silver);
  color: #fff; font-size: 11px; font-weight: 700;
  padding: 6px 10px; border-radius: var(--r-sm);
  cursor: pointer;
  color-scheme: dark;   /* dark native popup (else white-on-white options); same class as .rost-pick-dept */
}
.pay-history-select option { background: #1a1c20; color: #fff; }

/* Dashboard */
.pay-dashboard { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.pay-dash-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 10px;
}
.pay-dash-card {
  padding: 12px; background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-silver); border-radius: var(--r-md);
}
.pay-dash-card.primary {
  background: linear-gradient(135deg, rgba(129,140,255,0.14), rgba(129,140,255,0.02));
  border-color: var(--border-gold);
}
.pay-dash-eyebrow { font-size: 9px; letter-spacing: 1.2px; color: var(--text-muted); font-weight: 700; text-transform: uppercase; }
.pay-dash-amt { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 800; color: var(--text-primary); margin-top: 2px; }
.pay-dash-amt.sm { font-size: 16px; }
.pay-dash-sub { font-size: 10px; color: var(--text-muted); margin-top: 2px; }
.pay-dash-delta { font-size: 10px; font-weight: 700; margin-top: 4px; }
.pay-dash-delta.up { color: #fca5a5; }
.pay-dash-delta.down { color: #34d399; }

/* Donut */
.pay-dash-donut-card {
  display: grid; grid-template-columns: 140px 1fr; gap: 14px; align-items: center;
  padding: 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-silver);
  border-radius: var(--r-md);
}
.pay-donut-wrap { position: relative; width: 120px; height: 120px; margin: 0 auto; }
.pay-donut {
  width: 100%; height: 100%; border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08), inset 0 0 0 1px rgba(0,0,0,0.3);
}
.pay-donut-hole {
  position: absolute; inset: 22px; border-radius: 50%;
  background: #0b0d12; border: 1px solid var(--border-silver);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 4px;
}
.pay-donut-hole span { font-size: 8px; color: var(--text-muted); letter-spacing: 0.8px; text-transform: uppercase; font-weight: 700; }
.pay-donut-hole strong { font-family: 'Playfair Display', serif; font-size: 13px; color: var(--text-primary); margin-top: 2px; }
.pay-donut-legend { display: flex; flex-direction: column; gap: 6px; }
.pay-donut-item {
  display: grid; grid-template-columns: 8px 1fr auto auto; gap: 8px; align-items: center;
  font-size: 11px;
}
.pay-donut-dot { width: 8px; height: 8px; border-radius: 2px; }
.pay-donut-label { color: var(--text-secondary); }
.pay-donut-pct { color: var(--text-primary); font-weight: 800; min-width: 32px; text-align: right; }
.pay-donut-val { color: var(--text-muted); font-size: 10px; min-width: 62px; text-align: right; }

/* Export + run payroll row */
.pay-actions-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 10px;
}
.pay-export-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 12px; text-align: left;
  border-radius: var(--r-md); cursor: pointer;
  transition: all 0.15s;
  border: 1px solid transparent;
}
.pay-export-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,0.3); }
.pay-export-btn.excel { background: linear-gradient(135deg, #16a34a, #22c55e); color: #052b15; border-color: #22c55e; }
.pay-export-btn.csv   { background: linear-gradient(135deg, #2563eb, #3b82f6); color: #051637; border-color: #3b82f6; }
.pay-export-btn.run   { background: linear-gradient(135deg, #FFFFFF, #B0B4BC); color: #1a1000; border-color: var(--text-primary); }
.pay-export-btn strong { display: block; font-size: 12px; font-weight: 800; }
.pay-export-btn span:not(.pay-exp-ico) { font-size: 9px; opacity: 0.85; letter-spacing: 0.3px; }
.pay-export-btn div { flex: 1; min-width: 0; }
.pay-exp-ico { font-size: 20px; flex-shrink: 0; }

/* Password toggle row */
.pay-toggle-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; color: var(--text-secondary);
  cursor: pointer; user-select: none;
  padding: 8px 12px; margin-bottom: 14px;
  background: rgba(255,255,255,0.02);
  border: 1px dashed var(--border-silver);
  border-radius: var(--r-md);
}
.pay-toggle-row input { display: none; }
.pay-toggle-sw {
  width: 34px; height: 18px; border-radius: 9px;
  background: rgba(255,255,255,0.1);
  border: 1px solid var(--border-silver);
  position: relative; flex-shrink: 0;
  transition: all 0.2s;
}
.pay-toggle-sw::after {
  content: ''; position: absolute; top: 1px; left: 1px;
  width: 14px; height: 14px; border-radius: 50%; background: #fff;
  transition: all 0.2s;
}
.pay-toggle-row input:checked + .pay-toggle-sw { background: #FFFFFF; border-color: var(--text-primary); }
.pay-toggle-row input:checked + .pay-toggle-sw::after { transform: translateX(16px); }
.pay-toggle-label { font-weight: 700; color: #fff; }
.pay-toggle-sub { margin-left: auto; font-size: 10px; color: var(--text-muted); font-style: italic; }

/* Summary cards */
.pay-summary {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px;
}
.pay-sum-card {
  padding: 10px; border-radius: var(--r-md);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-silver);
}
.pay-sum-card.paid { border-color: rgba(34,197,94,0.35); background: rgba(34,197,94,0.06); }
.pay-sum-card.pending { border-color: rgba(251,146,60,0.35); background: rgba(251,146,60,0.06); }
.pay-sum-eyebrow { font-size: 9px; letter-spacing: 1px; color: var(--text-muted); font-weight: 700; text-transform: uppercase; }
.pay-sum-val { font-family: 'Playfair Display', serif; font-size: 18px; font-weight: 800; color: #fff; margin-top: 2px; }
.pay-sum-val span { font-size: 14px; }

/* Payroll table */
.pay-table-wrap {
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border-silver);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-bottom: 14px;
}
.pay-table-head {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  padding: 10px 12px;
  background: linear-gradient(90deg, rgba(129,140,255,0.08), transparent);
  border-bottom: 1px solid var(--border-silver);
}
.pay-table-head h3 { font-family: 'Playfair Display', serif; font-size: 14px; font-weight: 700; color: #fff; }
.pay-filter-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.pay-chip {
  font-size: 10px; padding: 4px 10px; border-radius: var(--r-full);
  background: rgba(255,255,255,0.04); border: 1px solid var(--border-silver);
  color: var(--text-secondary); cursor: pointer; transition: all 0.15s;
  font-weight: 700;
}
.pay-chip.active { background: var(--gold-glow-sm); border-color: var(--border-gold); color: var(--text-primary); }
.pay-table-scroll { overflow-x: auto; max-width: 100%; }
.pay-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: 10px; min-width: 1100px;
}
.pay-table thead th {
  position: sticky; top: 0; z-index: 2;
  background: #12141a; color: var(--text-primary);
  font-size: 9px; letter-spacing: 0.6px; font-weight: 800; text-transform: uppercase;
  padding: 8px 10px; text-align: left; white-space: nowrap;
  border-bottom: 1px solid var(--border-silver);
}
.pay-table thead th.num, .pay-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.pay-table tbody td {
  padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,0.04);
  color: var(--text-secondary); white-space: nowrap;
}
.pay-table tbody tr:hover td { background: rgba(129,140,255,0.04); }
.pay-table td.strong { color: #fff; font-weight: 700; }
.pay-table td.neg { color: #fca5a5; }
.pay-table td.net-cell { color: var(--text-primary); font-weight: 800; font-size: 11px; }
.pay-table tfoot td {
  padding: 10px; background: #12141a; color: var(--text-primary);
  font-weight: 800; border-top: 2px solid var(--text-primary);
  font-size: 11px;
}
.sticky-col { position: sticky; left: 0; background: #0b0d12; z-index: 1; box-shadow: 1px 0 0 rgba(255,255,255,0.05); }
.pay-table thead th.sticky-col { background: #12141a; z-index: 3; }
.pay-table tfoot td.sticky-col { background: #12141a; z-index: 2; }
.pay-staff-cell { display: flex; align-items: center; gap: 8px; min-width: 140px; }
.pay-staff-cell img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border-gold); flex-shrink: 0; }
.pay-staff-cell span { color: #fff; font-weight: 700; font-size: 10px; }

.pay-st {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 7px; border-radius: var(--r-full);
  font-size: 9px; font-weight: 800; letter-spacing: 0.3px;
}
.pay-st.paid    { background: rgba(34,197,94,0.15);  color: #4ade80; border: 1px solid rgba(34,197,94,0.3); }
.pay-st.pending { background: rgba(251,146,60,0.15); color: #fb923c; border: 1px solid rgba(251,146,60,0.3); }
.pay-st.hold    { background: rgba(248,113,113,0.15); color: #f87171; border: 1px solid rgba(248,113,113,0.3); }

.pay-row-actions { display: flex; gap: 4px; }
.pay-icon-btn {
  width: 26px; height: 26px; border-radius: 6px;
  background: rgba(255,255,255,0.04); border: 1px solid var(--border-silver);
  color: var(--text-secondary); font-size: 12px; cursor: pointer;
  transition: all 0.15s;
}
.pay-icon-btn:hover { background: var(--gold-glow-sm); border-color: var(--border-gold); color: var(--text-primary); }

/* Auto-send card */
.pay-autosend-card {
  padding: 14px; border-radius: var(--r-md);
  background: linear-gradient(135deg, rgba(96,165,250,0.06), rgba(255,255,255,0.02));
  border: 1px solid rgba(96,165,250,0.3);
  margin-bottom: 14px;
}
.pay-autosend-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
}
.pay-autosend-head > div:nth-child(2) { flex: 1; }
.pay-autosend-title { font-size: 13px; font-weight: 800; color: #fff; }
.pay-autosend-sub { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.pay-auto-switch { cursor: pointer; }
.pay-auto-switch input { display: none; }
.pay-auto-sw-visual {
  display: block; width: 40px; height: 22px; border-radius: 11px;
  background: rgba(255,255,255,0.12); position: relative; transition: all 0.2s;
}
.pay-auto-sw-visual::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%; background: #fff;
  transition: all 0.2s;
}
.pay-auto-switch input:checked + .pay-auto-sw-visual { background: linear-gradient(135deg, #22c55e, #16a34a); }
.pay-auto-switch input:checked + .pay-auto-sw-visual::after { transform: translateX(18px); }

.pay-autosend-settings {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.pay-field { display: flex; flex-direction: column; gap: 4px; font-size: 10px; color: var(--text-muted); font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; }
.pay-field select {
  background: rgba(255,255,255,0.05); color: #fff; border: 1px solid var(--border-silver);
  padding: 6px 10px; border-radius: var(--r-sm); font-size: 11px; font-weight: 600;
}
.pay-autosend-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Payroll history */
.pay-history-card {
  padding: 14px; border-radius: var(--r-md);
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border-silver);
  margin-bottom: 14px;
}
.pay-history-head { margin-bottom: 10px; }
.pay-history-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pay-hist-item {
  padding: 10px; text-align: left; cursor: pointer;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-silver);
  border-radius: var(--r-md);
  transition: all 0.15s;
}
.pay-hist-item:hover { border-color: var(--border-gold); background: var(--gold-glow-sm); }
.pay-hist-item.active { border-color: var(--text-primary); background: var(--gold-glow-sm); box-shadow: inset 0 0 0 1px var(--text-primary); }
.pay-hist-m { font-size: 10px; color: var(--text-muted); letter-spacing: 0.4px; font-weight: 700; text-transform: uppercase; }
.pay-hist-amt { font-family: 'Playfair Display', serif; font-size: 15px; font-weight: 800; color: var(--text-primary); margin-top: 3px; }
.pay-hist-sub { font-size: 9px; color: var(--text-muted); margin-top: 2px; }

/* Payslip Modal */
.payslip-modal {
  max-width: 720px; width: 95%;
  max-height: 92vh; display: flex; flex-direction: column; padding: 0;
}
.payslip-body {
  flex: 1; overflow-y: auto; padding: 20px;
  background: linear-gradient(180deg, #0a0d12, #050810);
}

.ps-doc {
  background: #fff; color: #1a1a1a;
  padding: 28px 32px; border-radius: var(--r-md);
  font-family: 'Inter', sans-serif; font-size: 12px;
  box-shadow: 0 10px 60px rgba(0,0,0,0.4);
  position: relative;
  max-width: 620px; margin: 0 auto;
}
.ps-head {
  display: flex; align-items: center; gap: 16px;
  padding-bottom: 16px; border-bottom: 3px double #FFFFFF;
  margin-bottom: 16px;
}
.ps-logo { width: 60px; height: 60px; object-fit: contain; }
.ps-logo-fallback {
  width: 60px; height: 60px; border-radius: 8px;
  background: linear-gradient(135deg, #FFFFFF, #f4c878);
  color: #1a1000; display: flex; align-items: center; justify-content: center;
  font-family: 'Playfair Display', serif; font-weight: 900; font-size: 22px;
}
.ps-head-info { flex: 1; }
.ps-head-title {
  font-family: 'Playfair Display', serif; font-size: 24px; font-weight: 900;
  color: #FFFFFF; letter-spacing: 4px;
}
.ps-head-company { font-size: 13px; font-weight: 700; color: #1a1a1a; margin-top: 1px; }
.ps-head-meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: 10px; color: #666; margin-top: 4px; }

.ps-emp-box {
  padding: 12px; margin-bottom: 16px;
  background: #f8f5ee; border: 1px solid #e7dab5;
  border-radius: 6px;
}
.ps-emp-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  padding: 5px 0; border-bottom: 1px dashed #d8cc9a;
}
.ps-emp-row:last-child { border-bottom: none; }
.ps-emp-row > div { min-width: 0; }
.ps-label { display: block; font-size: 9px; letter-spacing: 0.8px; color: #888; text-transform: uppercase; font-weight: 700; }
.ps-emp-row strong { display: block; font-size: 12px; color: #1a1a1a; font-weight: 700; margin-top: 1px; }

.ps-split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; }
.ps-col-h {
  font-size: 10px; font-weight: 800; letter-spacing: 1.5px;
  color: #fff; background: #1a1a1a; padding: 6px 10px;
  border-radius: 4px 4px 0 0;
}
.ps-col-h.red { background: #991b1b; }
.ps-table { width: 100%; border-collapse: collapse; font-size: 11px; border: 1px solid #e5e5e5; border-top: none; }
.ps-table td { padding: 6px 10px; border-bottom: 1px solid #f0f0f0; color: #333; }
.ps-table td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ps-table .ps-total-row td {
  background: #f8f5ee; color: #1a1a1a; border-top: 2px solid #FFFFFF;
  border-bottom: none; padding: 8px 10px; font-size: 12px;
}

.ps-net-box {
  padding: 18px; text-align: center;
  background: linear-gradient(135deg, #FFFFFF, #f4c878);
  color: #1a1000; border-radius: 8px; margin-bottom: 14px;
  position: relative; overflow: hidden;
}
.ps-net-box::before {
  content: ''; position: absolute; inset: 4px;
  border: 1.5px dashed rgba(26,16,0,0.4); border-radius: 6px;
  pointer-events: none;
}
.ps-net-eyebrow { font-size: 10px; font-weight: 800; letter-spacing: 3px; margin-bottom: 4px; }
.ps-net-amt { font-family: 'Playfair Display', serif; font-size: 32px; font-weight: 900; line-height: 1; letter-spacing: -0.5px; }
.ps-net-sub { font-size: 10px; margin-top: 6px; color: #3a2700; }
.ps-net-sub strong { font-weight: 800; }

.ps-foot { border-top: 1px solid #ddd; padding-top: 10px; font-size: 9px; color: #888; text-align: center; }
.ps-stamp-row { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.ps-stamp-placeholder {
  width: 70px; height: 70px; border-radius: 50%;
  border: 2px dashed #FFFFFF; color: #FFFFFF;
  display: flex; align-items: center; justify-content: center;
  font-size: 8px; font-weight: 800; text-align: center; line-height: 1.3;
  transform: rotate(-8deg);
}
.ps-powered { font-size: 9px; color: #888; }
.ps-powered strong { color: #FFFFFF; }

/* Run payroll modal */
.run-payroll-modal { max-width: 440px; }
.run-pay-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  padding: 12px; margin: 12px 0;
  background: rgba(255,255,255,0.03); border: 1px solid var(--border-silver);
  border-radius: var(--r-md);
}
.run-pay-stats > div { text-align: center; }
.run-pay-stats span { display: block; font-size: 9px; letter-spacing: 0.6px; color: var(--text-muted); text-transform: uppercase; font-weight: 700; margin-bottom: 2px; }
.run-pay-stats strong { font-family: 'Playfair Display', serif; font-size: 15px; color: var(--text-primary); font-weight: 800; }

/* Payslip message preview */
.pay-msg-preview-modal { max-width: 420px; padding: 20px; }
.pay-msg-mock {
  background: linear-gradient(180deg, #12141a, #0b0d12);
  border: 1px solid var(--border-silver); border-radius: var(--r-md);
  overflow: hidden;
}
.pay-msg-topbar {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: rgba(129,140,255,0.08); border-bottom: 1px solid var(--border-silver);
}
.pay-msg-av { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 1.5px solid var(--border-gold); }
.pay-msg-sender { font-size: 13px; font-weight: 800; color: #fff; }
.pay-msg-time { font-size: 10px; color: var(--text-muted); }
.pay-msg-tag {
  margin-left: auto; font-size: 9px; padding: 3px 9px;
  background: linear-gradient(135deg, #FFFFFF, #B0B4BC);
  color: #1a1000; border-radius: var(--r-full); font-weight: 900; letter-spacing: 0.4px;
  white-space: nowrap;
}
.pay-msg-body { padding: 14px; }
.pay-msg-body p { font-size: 13px; color: var(--text-secondary); line-height: 1.5; margin: 0 0 10px; }
.pay-msg-highlight {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 12px 14px; margin: 10px 0;
  background: linear-gradient(135deg, rgba(129,140,255,0.18), rgba(129,140,255,0.04));
  border: 1px solid var(--border-gold); border-radius: var(--r-md);
}
.pay-msg-highlight span { font-size: 10px; color: var(--text-muted); letter-spacing: 1px; text-transform: uppercase; font-weight: 700; }
.pay-msg-highlight strong { font-family: 'Playfair Display', serif; font-size: 22px; color: var(--text-primary); font-weight: 900; }
.pay-msg-attach {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-silver); border-radius: var(--r-sm);
}
.pay-msg-attach-ico { font-size: 20px; }
.pay-msg-attach strong { display: block; font-size: 11px; color: #fff; font-weight: 700; }
.pay-msg-attach span { font-size: 10px; color: var(--text-muted); }

/* Inbox payslip message style */
.inbox-item.payslip-msg { border-left: 3px solid var(--text-primary); background: rgba(129,140,255,0.04); position: relative; }
.payslip-msg-tag {
  display: inline-block; margin-top: 3px;
  font-size: 8px; padding: 2px 7px; border-radius: var(--r-full);
  background: linear-gradient(135deg, #FFFFFF, #B0B4BC);
  color: #1a1000; font-weight: 900; letter-spacing: 0.4px;
}

/* Print — payslip */
@media print {
  body * { visibility: hidden; }
  #payslipDoc, #payslipDoc * { visibility: visible; }
  #payslipDoc { position: absolute; left: 0; top: 0; }
}

/* Responsive tweaks */
@media (max-width: 720px) {
  .pay-actions-row { grid-template-columns: 1fr; }
  .pay-summary { grid-template-columns: repeat(2, 1fr); }
  .pay-dash-grid { grid-template-columns: 1fr; }
  .pay-dash-donut-card { grid-template-columns: 1fr; }
  .pay-donut-wrap { width: 140px; height: 140px; }
  .pay-history-list { grid-template-columns: repeat(2, 1fr); }
  .pay-access-banner { flex-wrap: wrap; }
  .pay-access-chip { margin-left: auto; }
}

/* ═══════════════════════════════════════════════════
   ROSTER — Clickable staff rows
   ═══════════════════════════════════════════════════ */
.hr-roster-staff.is-clickable { cursor: pointer; transition: all 0.15s; }
.hr-roster-staff.is-clickable:hover {
  background: var(--gold-glow-sm);
  box-shadow: inset 0 0 0 1px var(--border-gold);
}
.hr-roster-chev {
  display: inline-block; margin-left: 6px;
  color: var(--text-primary); font-weight: 700; opacity: 0; transition: all 0.15s;
  transform: translateX(-4px);
}
.hr-roster-staff.is-clickable:hover .hr-roster-chev { opacity: 1; transform: translateX(0); }

/* ═══════════════════════════════════════════════════
   STAFF SCHEDULE POPUP
   ═══════════════════════════════════════════════════ */
.staff-sched-modal {
  max-width: 760px; width: 96%; max-height: 92vh;
  display: flex; flex-direction: column; padding: 0;
  background: linear-gradient(180deg, #12141a, #0a0d12);
  border: 1px solid var(--border-gold);
  box-shadow: 0 20px 80px rgba(0,0,0,0.55), 0 0 0 1px rgba(129,140,255,0.12);
  backdrop-filter: blur(20px);
}
.staff-sched-body {
  flex: 1; overflow-y: auto; padding: 22px;
  animation: staffSchedIn 0.28s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes staffSchedIn {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.ss-doc {
  background: #fff; color: #1a1a1a;
  border-radius: var(--r-md);
  padding: 26px 28px;
  font-family: 'Inter', sans-serif; font-size: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.35);
}

.ss-head {
  display: flex; align-items: center; gap: 16px;
  padding-bottom: 14px; border-bottom: 2px solid #FFFFFF;
  margin-bottom: 16px;
}
.ss-logo { width: 54px; height: 54px; object-fit: contain; }
.ss-logo-fallback {
  width: 54px; height: 54px; border-radius: 8px;
  background: linear-gradient(135deg, #FFFFFF, #f4c878);
  color: #1a1000; display: flex; align-items: center; justify-content: center;
  font-family: 'Playfair Display', serif; font-weight: 900; font-size: 20px;
}
.ss-head-info { flex: 1; }
.ss-head-eyebrow { font-size: 9px; letter-spacing: 2px; color: #888; text-transform: uppercase; font-weight: 700; }
.ss-head-range { font-family: 'Playfair Display', serif; font-size: 20px; color: #1a1a1a; font-weight: 800; }
.ss-head-company { font-size: 11px; color: #666; margin-top: 2px; }

.ss-staff-card {
  display: flex; align-items: center; gap: 14px;
  padding: 12px; margin-bottom: 14px;
  background: linear-gradient(90deg, rgba(255,255,255,0.12), transparent);
  border: 1px solid #e7dab5; border-radius: 8px;
}
.ss-staff-card img {
  width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
  border: 2px solid #FFFFFF;
}
.ss-staff-name { font-family: 'Playfair Display', serif; font-size: 17px; font-weight: 800; color: #1a1a1a; }
.ss-staff-meta { font-size: 12px; color: #444; font-weight: 600; margin-top: 1px; }
.ss-staff-sub { font-size: 10px; color: #888; margin-top: 1px; letter-spacing: 0.4px; }

.ss-table { width: 100%; border-collapse: collapse; font-size: 11px; margin-bottom: 14px; }
.ss-table thead th {
  background: #1a1a1a; color: #FFFFFF;
  padding: 8px 10px; font-size: 9px; letter-spacing: 1px; font-weight: 800; text-transform: uppercase;
  text-align: left;
}
.ss-table thead th.num, .ss-table td.num { text-align: right; }
.ss-table tbody td { padding: 9px 10px; border-bottom: 1px solid #eee; color: #333; vertical-align: middle; }
.ss-table tbody tr:last-child td { border-bottom: 2px solid #FFFFFF; }
.ss-table tr.is-off { background: #fafafa; color: #999; }
.ss-table tr.is-off .ss-off { color: #888; font-weight: 700; letter-spacing: 1px; font-size: 10px; }
.ss-table tr.is-leave { background: rgba(52,211,153,0.1); }
.ss-table tr.is-leave .ss-leave { color: #16a34a; font-weight: 800; letter-spacing: 1px; font-size: 10px; }
.ss-table tr.is-event { background: linear-gradient(90deg, rgba(255,255,255,0.18), rgba(255,255,255,0.06)); }
.ss-table tr.is-event td { color: #1a1a1a; font-weight: 700; }
.ss-table .ss-day { font-weight: 800; letter-spacing: 0.5px; color: #1a1a1a; min-width: 42px; }
.ss-ev-star { color: #FFFFFF; }
.ss-ev-note { font-size: 9px; color: #8a6b00; margin-top: 1px; font-style: italic; }
.ss-table tfoot td {
  background: #f8f5ee; color: #1a1a1a; padding: 10px; font-size: 12px;
}
.ss-table tfoot tr.ss-earn td {
  background: linear-gradient(135deg, #FFFFFF, #f4c878); color: #1a1000;
  font-size: 13px; border-top: 2px solid #1a1000;
}
.ss-table tfoot tr.ss-earn td span { font-weight: 400; opacity: 0.8; font-size: 11px; }
.ss-table tfoot td.strong, .ss-table tfoot td.num.strong { font-weight: 900; font-family: 'Playfair Display', serif; font-size: 16px; }

.ss-foot {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 9px; color: #888; border-top: 1px solid #ddd; padding-top: 10px;
}
.ss-powered strong { color: #FFFFFF; }

/* Schedule inbox message style */
.inbox-item.sched-msg { border-left: 3px solid #60a5fa; background: rgba(96,165,250,0.05); }
.sched-msg-tag {
  display: inline-block; margin-top: 3px;
  font-size: 8px; padding: 2px 7px; border-radius: var(--r-full);
  background: #60a5fa; color: #051637; font-weight: 900; letter-spacing: 0.4px;
}

/* Print — schedule */
@media print {
  body * { visibility: hidden; }
  #schedDoc, #schedDoc * { visibility: visible; }
  #schedDoc { position: absolute; left: 0; top: 0; }
}

/* ═══════════════════════════════════════════════════
   HR DASHBOARD — Birthday alert
   ═══════════════════════════════════════════════════ */
.hr-bday-alert {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; cursor: pointer;
  background: linear-gradient(90deg, rgba(129,140,255,0.18), rgba(244,114,182,0.12));
  border: 1px solid var(--border-gold);
  border-radius: var(--r-md);
  color: #fff; text-align: left;
  box-shadow: 0 0 0 rgba(129,140,255,0.4);
  animation: bdayAlertPulse 2.4s ease-in-out infinite;
}
@keyframes bdayAlertPulse {
  0%,100% { box-shadow: 0 0 0 rgba(129,140,255,0.3); }
  50%     { box-shadow: 0 0 18px rgba(129,140,255,0.55); }
}
.hr-bday-alert-ico { font-size: 26px; }
.hr-bday-alert > div { flex: 1; min-width: 0; }
.hr-bday-alert strong { display: block; font-size: 13px; font-weight: 800; color: #fff; }
.hr-bday-alert span { font-size: 11px; color: var(--text-secondary); }

/* ═══════════════════════════════════════════════════
   OPS — HQ birthday badge
   ═══════════════════════════════════════════════════ */
.hq-bday-badge {
  position: absolute; top: 10px; right: 10px; z-index: 4;
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10px; font-weight: 900; letter-spacing: 0.3px;
  padding: 4px 9px; border-radius: var(--r-full);
  background: linear-gradient(135deg, #f472b6, #f59e0b);
  color: #fff; box-shadow: 0 2px 10px rgba(244,114,182,0.4);
  animation: bdayBadgePulse 2s ease-in-out infinite;
}
@keyframes bdayBadgePulse {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.08); }
}

/* ═══════════════════════════════════════════════════
   OPS MEMO BOARD — Structured sections
   ═══════════════════════════════════════════════════ */
.memo-block {
  margin-bottom: 14px;
  padding: 12px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border-silver);
  border-radius: var(--r-md);
}
.memo-block-head {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 10px; margin-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.memo-block-ico { font-size: 22px; }
.memo-block-title {
  font-family: 'Playfair Display', serif; font-size: 15px; font-weight: 800; color: #fff;
  letter-spacing: -0.2px;
}
.memo-block-sub { font-size: 10px; color: var(--text-muted); letter-spacing: 0.3px; margin-top: 1px; }

/* Colored headers per block */
.memo-bday {
  background: linear-gradient(135deg, rgba(244,114,182,0.1), rgba(129,140,255,0.08));
  border-color: var(--border-gold);
}
.memo-bday .memo-block-head { border-bottom-color: rgba(244,114,182,0.2); }
.memo-bday .memo-block-title { color: #fce7f3; }

.memo-events { border-left: 3px solid var(--text-primary); padding-left: 14px; }
.memo-events .memo-block-title { color: var(--text-primary); }

.memo-daily { border-left: 3px solid #60a5fa; padding-left: 14px; }
.memo-daily .memo-block-title { color: #bfdbfe; }

.memo-ann { border-left: 3px solid #34d399; padding-left: 14px; }
.memo-ann .memo-block-title { color: #a7f3d0; }

.memo-item.memo-event {
  background: linear-gradient(90deg, rgba(129,140,255,0.12), transparent);
  border-color: var(--border-gold);
}
.memo-item.memo-announce {
  background: rgba(52,211,153,0.06);
  border-color: rgba(52,211,153,0.25);
}
.memo-tag.event-tag { background: #FFFFFF; color: #1a1000; }
.memo-tag.announce-tag { background: #34d399; color: #052b15; }

/* ═══ Birthday cards ═══ */
.bday-list { display: flex; flex-direction: column; gap: 10px; }
.bday-card {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: var(--r-md);
  background: linear-gradient(135deg, rgba(129,140,255,0.08), rgba(255,255,255,0.03));
  border: 1px solid var(--border-silver);
  overflow: hidden;
  transition: all 0.2s;
}
.bday-card:hover { transform: translateX(2px); }

.bday-card.today {
  background: linear-gradient(135deg, rgba(244,114,182,0.2), rgba(129,140,255,0.25));
  border: 2px solid transparent;
  background-clip: padding-box;
  box-shadow: 0 0 24px rgba(244,114,182,0.35), 0 0 0 rgba(129,140,255,0);
  animation: bdayTodayGlow 2s ease-in-out infinite;
}
@keyframes bdayTodayGlow {
  0%,100% { box-shadow: 0 0 14px rgba(244,114,182,0.3), 0 0 0 rgba(129,140,255,0); }
  50%     { box-shadow: 0 0 28px rgba(244,114,182,0.5), 0 0 18px rgba(129,140,255,0.45); }
}
.bday-card.today::before {
  content: ''; position: absolute; inset: 0; padding: 2px;
  background: linear-gradient(45deg, #f472b6, #FFFFFF, #fbbf24, #f472b6);
  background-size: 300% 300%;
  border-radius: var(--r-md);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude; -webkit-mask-composite: xor;
  animation: bdayRainbow 3.6s linear infinite;
  pointer-events: none;
}
@keyframes bdayRainbow {
  0%   { background-position: 0% 0%; }
  100% { background-position: 300% 0%; }
}

.bday-card.week {
  background: linear-gradient(135deg, rgba(129,140,255,0.12), rgba(255,255,255,0.02));
  border-color: var(--border-gold);
}
.bday-card.month {
  background: rgba(129,140,255,0.04);
  border-color: rgba(129,140,255,0.2);
}

.bday-confetti {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
}
.bday-confetti::before,
.bday-confetti::after {
  content: '🎉 🎂 ✨ 🎈 🎊 🥳';
  position: absolute;
  font-size: 16px; letter-spacing: 10px;
  white-space: nowrap;
  opacity: 0.28;
  animation: bdayConfettiMove 12s linear infinite;
}
.bday-confetti::before { top: 10%; left: -60%; }
.bday-confetti::after  { top: 55%; left: -40%; animation-duration: 15s; animation-direction: reverse; }
@keyframes bdayConfettiMove {
  from { transform: translateX(0); }
  to   { transform: translateX(120%); }
}

.bday-photo {
  width: 50px; height: 50px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--text-primary);
  box-shadow: 0 0 12px rgba(129,140,255,0.35);
  flex-shrink: 0;
  position: relative; z-index: 1;
}
.bday-card.today .bday-photo {
  border-color: #f472b6;
  box-shadow: 0 0 16px rgba(244,114,182,0.55);
  animation: bdayPhotoBounce 1.6s ease-in-out infinite;
}
@keyframes bdayPhotoBounce {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.05); }
}
.bday-info { flex: 1; min-width: 0; position: relative; z-index: 1; }
.bday-title {
  font-size: 13px; font-weight: 800; color: #fff;
  font-family: 'Inter', sans-serif; letter-spacing: -0.1px;
}
.bday-when {
  font-size: 12px; font-weight: 700; color: var(--text-primary); margin-top: 2px;
}
.bday-card.today .bday-when { color: #fce7f3; font-size: 13px; letter-spacing: 0.3px; }
.bday-role { font-size: 10px; color: var(--text-muted); margin-top: 2px; }

.bday-wish-btn {
  background: linear-gradient(135deg, #FFFFFF, #B0B4BC);
  color: #1a1000;
  border: none; border-radius: var(--r-full);
  padding: 8px 14px; font-size: 11px; font-weight: 800;
  cursor: pointer; white-space: nowrap;
  transition: all 0.15s;
  box-shadow: 0 2px 10px rgba(129,140,255,0.3);
  position: relative; z-index: 1;
}
.bday-wish-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(129,140,255,0.5); }

.bday-card.today .bday-wish-btn {
  background: linear-gradient(135deg, #f472b6, #ec4899);
  color: #fff;
  box-shadow: 0 2px 12px rgba(244,114,182,0.4);
}

/* Birthday wish modal */
.bday-wish-modal {
  max-width: 460px; padding: 22px;
  background: linear-gradient(180deg, #1a0d1a, #0a0d12);
  border: 1px solid var(--border-gold);
}
.bday-wish-head {
  display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
}
.bday-cake {
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, #f472b6, #FFFFFF);
  display: flex; align-items: center; justify-content: center;
  font-size: 30px;
  box-shadow: 0 0 18px rgba(244,114,182,0.5);
  animation: bdayPhotoBounce 2s ease-in-out infinite;
}
.bday-wish-eyebrow { font-size: 9px; letter-spacing: 2px; color: var(--text-primary); text-transform: uppercase; font-weight: 800; }
.bday-wish-title { font-family: 'Playfair Display', serif; font-size: 20px; color: #fff; margin: 2px 0 1px; font-weight: 900; }
.bday-wish-sub { font-size: 11px; color: var(--text-muted); }
.bday-wish-label { font-size: 10px; letter-spacing: 1px; color: var(--text-muted); text-transform: uppercase; font-weight: 700; }
.bday-wish-text {
  width: 100%; resize: vertical;
  margin-top: 6px; padding: 10px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-silver); color: #fff;
  border-radius: var(--r-md);
  font-family: 'Inter', sans-serif; font-size: 13px; line-height: 1.5;
}
.bday-wish-text:focus { outline: none; border-color: var(--border-gold); box-shadow: 0 0 0 2px var(--gold-glow-sm); }

/* Inbox birthday message */
.inbox-item.bday-msg { border-left: 3px solid #f472b6; background: rgba(244,114,182,0.05); }
.bday-msg-tag {
  display: inline-block; margin-top: 3px;
  font-size: 8px; padding: 2px 7px; border-radius: var(--r-full);
  background: linear-gradient(135deg, #f472b6, #ec4899);
  color: #fff; font-weight: 900; letter-spacing: 0.4px;
}

@media (max-width: 720px) {
  .bday-card { flex-wrap: wrap; }
  .bday-wish-btn { width: 100%; margin-top: 4px; }
  .ss-staff-card { flex-wrap: wrap; }
  .ss-table { font-size: 10px; }
  .ss-table th, .ss-table td { padding: 6px; }
}

/* ═══════════════════════════════════════════════════
   CuadrillaONE OFFICIAL — Pinned conversation
   ═══════════════════════════════════════════════════ */
.inbox-item.pinned {
  position: relative;
  border: 2px solid transparent;
  background:
    linear-gradient(#0b0d12, #0b0d12) padding-box,
    linear-gradient(135deg, #FFFFFF, #f4c878, #FFFFFF) border-box;
  box-shadow: 0 4px 20px rgba(129,140,255,0.25);
  margin-bottom: 10px;
}
.inbox-item.pinned::before {
  content: ''; position: absolute; inset: -2px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(129,140,255,0.2), transparent);
  pointer-events: none; z-index: 0;
}
.pinned-marker {
  position: absolute; top: 8px; right: 10px;
  font-size: 12px; color: var(--text-primary);
  transform: rotate(-12deg);
  z-index: 2;
}
.px-official-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, #1a1000, #3a2700, #1a1000);
  color: var(--text-primary);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Playfair Display', serif; font-weight: 900; font-size: 18px;
  letter-spacing: -1px;
  border: 2px solid var(--text-primary);
  box-shadow: 0 0 14px rgba(129,140,255,0.4);
  flex-shrink: 0;
}
.px-official-avatar--sm { width: 36px; height: 36px; font-size: 14px; }
.px-verified-tick {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; border-radius: 50%;
  background: #FFFFFF; color: #1a1000;
  font-size: 9px; font-weight: 900;
  margin-left: 4px; vertical-align: 1px;
}
.inbox-sub-label {
  font-size: 10px; color: var(--text-primary);
  font-weight: 700; letter-spacing: 0.3px;
  margin: 1px 0 4px;
}

/* PX Official conversation screen */
.px-official-header {
  background: linear-gradient(180deg, rgba(129,140,255,0.08), transparent);
  border-bottom: 1px solid var(--border-gold);
}
.px-official-messages {
  padding: 14px; display: flex; flex-direction: column; gap: 12px;
  background: linear-gradient(180deg, #0a0d12, #050810);
  min-height: 100%;
}
.pxo-msg {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-silver);
  border-radius: var(--r-md);
  padding: 14px;
  position: relative;
  animation: pxoIn 0.3s ease;
}
@keyframes pxoIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.pxo-msg-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-bottom: 8px;
}
.pxo-tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.3px;
  padding: 4px 10px; border-radius: var(--r-full);
  background: linear-gradient(135deg, #FFFFFF, #B0B4BC);
  color: #1a1000;
}
.pxo-tag-pay     { background: linear-gradient(135deg, #16a34a, #22c55e); color: #052b15; }
.pxo-tag-roster  { background: linear-gradient(135deg, #2563eb, #60a5fa); color: #fff; }
.pxo-tag-leave   { background: linear-gradient(135deg, #059669, #34d399); color: #052b15; }
.pxo-tag-cert    { background: linear-gradient(135deg, #FFFFFF, #B0B4BC); color: #1a1000; }
.pxo-tag-xu      { background: linear-gradient(135deg, #7c3aed, #a78bfa); color: #fff; }
.pxo-date { font-size: 10px; color: var(--text-muted); letter-spacing: 0.3px; }
.pxo-title {
  font-family: 'Playfair Display', serif; font-size: 15px; font-weight: 800; color: #fff;
  line-height: 1.3; margin-bottom: 4px;
}
.pxo-body { font-size: 12px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 10px; }
.pxo-sender { font-size: 11px; color: var(--text-muted); margin: 0 0 6px; }
.pxo-loading { padding: 24px; text-align: center; font-size: 12px; color: var(--text-muted); }

/* Official card v2 — a schedule widget: logo/title/sender/time header, hairline,
   then a bordered mini day-grid. Reads as a schedule, not a chat message. */
.pxo-card-top {
  display: flex; align-items: flex-start; gap: 10px;
  padding-bottom: 12px; border-bottom: 1px solid var(--border-silver);
}
.pxo-logo {
  width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
  object-fit: cover; background: rgba(255,255,255,0.05);
  border: 1px solid var(--border-silver);
}
.pxo-tag-ico {
  width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 16px;
  background: rgba(255,255,255,0.05); border: 1px solid var(--border-silver);
}
.pxo-card-headings { flex: 1; min-width: 0; }
.pxo-card-headings .pxo-title { margin-bottom: 2px; }
.pxo-card-top .pxo-date { flex-shrink: 0; padding-top: 2px; }
.pxo-card-body { margin-top: 14px; }
.pxo-daylist {
  border: 1px solid var(--border-silver); border-radius: 12px;
  background: rgba(255,255,255,0.02); overflow: hidden;
}
.pxo-day {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 13px; border-bottom: 1px solid rgba(255,255,255,0.05);
}
.pxo-day:last-child { border-bottom: none; }
.pxo-day-label {
  flex-shrink: 0; min-width: 58px; text-align: center;
  padding: 3px 9px; border-radius: 999px;
  background: rgba(255,255,255,0.05); border: 1px solid var(--border-silver);
  font-size: 11.5px; font-weight: 700; color: var(--text-secondary);
}
.pxo-day-shift { font-size: 12.5px; font-weight: 700; color: #fff; text-align: right; line-height: 1.35; }
.pxo-day-shift.is-off { font-weight: 500; color: var(--text-muted); }
.pxo-events {
  margin-top: 10px; padding: 12px 14px; border-radius: 12px;
  font-size: 12.5px; line-height: 1.5; color: #E8C879;
  background: rgba(232,200,121,0.10); border: 1px solid rgba(232,200,121,0.28);
}
/* OFFICIAL-3 — tappable 📎 attachment row (opens a signed URL). */
.pxo-attach-row {
  display: flex; align-items: center; gap: 8px; width: 100%;
  margin-top: 10px; padding: 10px 12px;
  background: rgba(255,255,255,0.03); border: 1px solid var(--border-silver);
  border-radius: 10px; cursor: pointer; text-align: left;
}
.pxo-attach-row:active { background: rgba(255,255,255,0.06); }
.pxo-attach-ico { font-size: 16px; flex-shrink: 0; }
.pxo-attach-name {
  font-size: 12.5px; font-weight: 600; color: var(--text-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pxo-attach {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; margin-bottom: 8px;
  background: linear-gradient(90deg, rgba(129,140,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid var(--border-gold);
  border-radius: var(--r-md);
}
.pxo-attach-ico {
  width: 38px; height: 38px; border-radius: 8px;
  background: rgba(129,140,255,0.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0;
}
.pxo-attach-info { flex: 1; min-width: 0; }
.pxo-attach-name { font-size: 12px; color: #fff; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pxo-attach-meta { font-size: 10px; color: var(--text-muted); margin-top: 1px; }
.pxo-attach-actions { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; }
.pxo-btn {
  font-size: 10px; font-weight: 700; letter-spacing: 0.3px;
  padding: 6px 10px; border-radius: var(--r-sm);
  cursor: pointer; transition: all 0.15s;
  white-space: nowrap;
  border: 1px solid var(--border-silver);
}
.pxo-btn.ghost { background: rgba(255,255,255,0.05); color: var(--text-secondary); }
.pxo-btn.ghost:hover { border-color: var(--border-gold); color: #fff; }
.pxo-btn.gold {
  background: linear-gradient(135deg, #FFFFFF, #B0B4BC);
  color: #1a1000; border-color: var(--text-primary); font-weight: 800;
}
.pxo-btn.gold:hover { filter: brightness(1.05); box-shadow: 0 2px 8px rgba(129,140,255,0.35); }
.pxo-foot { text-align: right; }
.pxo-delivered { font-size: 9px; color: var(--text-muted); font-weight: 700; letter-spacing: 0.3px; }

/* ═══════════════════════════════════════════════════
   PROFILE — Quick action buttons (My Vault + CV)
   ═══════════════════════════════════════════════════ */
.profile-quick-actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin: 12px 0 14px;
}
.prof-qa {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-silver);
  border-radius: var(--r-md);
  color: var(--text-secondary);
  cursor: pointer; transition: all 0.15s;
  text-align: left;
}
.prof-qa svg { color: var(--text-primary); flex-shrink: 0; }
.prof-qa span:first-of-type { font-size: 12px; font-weight: 700; color: #fff; flex: 1; }
.prof-qa-sub {
  font-size: 9px; padding: 2px 7px; border-radius: var(--r-full);
  background: rgba(129,140,255,0.12); color: var(--text-primary);
  letter-spacing: 0.4px; font-weight: 800;
}
.prof-qa-vault:hover {
  border-color: var(--border-gold);
  background: linear-gradient(135deg, rgba(129,140,255,0.08), rgba(255,255,255,0.03));
}
.prof-qa-cv:hover {
  border-color: var(--border-gold);
  background: linear-gradient(135deg, rgba(129,140,255,0.08), rgba(255,255,255,0.03));
}

/* ═══════════════════════════════════════════════════
   MY VAULT
   ═══════════════════════════════════════════════════ */
.vault-hero {
  display: flex; align-items: center; gap: 14px;
  padding: 16px; margin: 14px;
  background: linear-gradient(135deg, rgba(129,140,255,0.12), rgba(255,255,255,0.02));
  border: 1px solid var(--border-gold);
  border-radius: var(--r-lg);
}
.vault-hero-lock {
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, #FFFFFF, #B0B4BC);
  color: #1a1000;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 14px rgba(129,140,255,0.45);
}
.vault-hero-eyebrow { font-size: 10px; letter-spacing: 1.5px; color: var(--text-primary); text-transform: uppercase; font-weight: 800; }
.vault-hero-title { font-family: 'Playfair Display', serif; font-size: 22px; color: #fff; margin: 2px 0; font-weight: 900; }
.vault-hero-sub { font-size: 11px; color: var(--text-muted); line-height: 1.5; margin: 0; }

.vault-search-row {
  display: flex; align-items: center; gap: 8px;
  margin: 0 14px 12px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-silver);
  border-radius: var(--r-full);
  color: var(--text-muted);
}
.vault-search-row input {
  flex: 1; background: transparent; border: none; outline: none;
  color: #fff; font-size: 13px;
}
.vault-search-row input::placeholder { color: var(--text-muted); }

.vault-storage {
  margin: 0 14px 14px; padding: 12px 14px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border-silver);
  border-radius: var(--r-md);
}
.vault-storage-row {
  display: flex; justify-content: space-between; font-size: 11px; color: var(--text-muted);
  margin-bottom: 6px;
}
.vault-storage-row strong { color: var(--text-primary); font-weight: 800; }
.vault-storage-track {
  height: 6px; border-radius: 3px;
  background: rgba(255,255,255,0.06); overflow: hidden;
}
.vault-storage-fill {
  height: 100%; background: linear-gradient(90deg, #FFFFFF, #B0B4BC);
  transition: width 0.5s ease;
}

.vault-folders {
  display: flex; flex-direction: column; gap: 8px;
  padding: 0 14px 14px;
}
.vault-folder {
  display: flex; align-items: center; gap: 12px;
  padding: 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-silver);
  border-radius: var(--r-md);
  color: var(--text-secondary);
  cursor: pointer; transition: all 0.15s;
  text-align: left;
}
.vault-folder:hover {
  border-color: var(--border-gold);
  background: linear-gradient(90deg, rgba(129,140,255,0.08), rgba(255,255,255,0.03));
  transform: translateX(2px);
}
.vault-folder-ico { font-size: 22px; flex-shrink: 0; }
.vault-folder-info { flex: 1; min-width: 0; }
.vault-folder-name { font-size: 13px; font-weight: 700; color: #fff; }
.vault-folder-count { font-size: 10px; color: var(--text-muted); margin-top: 2px; }
.vault-folder-chev { font-size: 22px; color: var(--text-primary); font-weight: 600; flex-shrink: 0; }

.vault-back-btn {
  background: transparent; border: none;
  color: var(--text-primary); font-size: 12px; font-weight: 700;
  padding: 6px 0; cursor: pointer; margin-bottom: 8px;
}
.vault-folder-h {
  display: flex; align-items: center; gap: 12px;
  padding: 14px;
  background: linear-gradient(90deg, rgba(129,140,255,0.08), transparent);
  border: 1px solid var(--border-gold);
  border-left: 4px solid var(--text-primary);
  border-radius: var(--r-md);
  margin-bottom: 10px;
}
.vault-folder-ico-lg { font-size: 30px; }
.vault-folder-name-lg { font-family: 'Playfair Display', serif; font-size: 18px; color: #fff; font-weight: 800; }
.vault-folder-count-lg { font-size: 11px; color: var(--text-muted); margin-top: 1px; }

.vault-file-list { display: flex; flex-direction: column; gap: 6px; }
.vault-file {
  display: flex; align-items: center; gap: 10px;
  padding: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-silver);
  border-radius: var(--r-md);
}
.vault-file-ico {
  width: 38px; height: 38px; border-radius: 8px;
  background: rgba(129,140,255,0.12);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0;
}
.vault-file-info { flex: 1; min-width: 0; }
.vault-file-name {
  font-size: 12px; color: #fff; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vault-file-meta { font-size: 10px; color: var(--text-muted); margin-top: 1px; }
.vault-file-actions { display: flex; gap: 4px; flex-shrink: 0; }
.vault-file-btn {
  width: 28px; height: 28px; border-radius: 6px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-silver);
  color: var(--text-secondary); font-size: 12px;
  cursor: pointer; transition: all 0.15s;
}
.vault-file-btn:hover { border-color: var(--border-gold); color: var(--text-primary); }
.vault-file-btn.danger:hover { color: #f87171; border-color: rgba(248,113,113,0.4); }
.vault-empty { padding: 20px; text-align: center; color: var(--text-muted); font-size: 12px; font-style: italic; }
.vault-foot {
  padding: 20px 14px; text-align: center;
  font-size: 10px; color: var(--text-muted); letter-spacing: 0.4px;
}
.vault-foot strong { color: var(--text-primary); }

/* ═══════════════════════════════════════════════════
   CV (Curriculum Vitae) — Premium document
   ═══════════════════════════════════════════════════ */
.cv-modal {
  max-width: 780px; width: 96%; max-height: 94vh;
  display: flex; flex-direction: column; padding: 0;
}
.cv-body {
  flex: 1; overflow-y: auto; padding: 20px;
  background: linear-gradient(180deg, #0a0d12, #050810);
}
.cv-doc {
  max-width: 680px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 18px;
}
.cv-page {
  background: #fff; color: #1a1a1a;
  padding: 36px 40px;
  border-radius: var(--r-md);
  font-family: 'Inter', sans-serif; font-size: 12px; line-height: 1.5;
  box-shadow: 0 10px 60px rgba(0,0,0,0.45);
  position: relative;
  min-height: 720px;
  display: flex; flex-direction: column;
}

.cv-header {
  display: grid; grid-template-columns: 130px 1fr; gap: 22px;
  padding-bottom: 18px;
  border-bottom: 3px double #FFFFFF;
  margin-bottom: 20px;
  align-items: center;
}
.cv-photo-wrap {
  width: 120px; height: 120px; border-radius: 50%;
  padding: 3px; background: linear-gradient(135deg, #6366FF, #f4c878);
  flex-shrink: 0;
}
.cv-photo { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 3px solid #fff; }
.cv-header-info { min-width: 0; }
.cv-name {
  font-family: 'Playfair Display', serif;
  font-size: 28px; font-weight: 900; color: #1a1a1a;
  letter-spacing: -0.5px; line-height: 1.1; margin-bottom: 2px;
}
.cv-role {
  font-size: 14px; font-weight: 700; color: #FFFFFF;
  letter-spacing: 0.3px; margin-bottom: 4px;
}
.cv-location { font-size: 11px; color: #555; margin-bottom: 4px; }
.cv-contact {
  display: flex; flex-wrap: wrap; gap: 10px;
  font-size: 10px; color: #555; margin-bottom: 8px;
}
.cv-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.cv-badge {
  font-size: 9px; font-weight: 800; letter-spacing: 0.4px;
  padding: 3px 9px; border-radius: 11px;
}
.cv-badge-cs { background: linear-gradient(135deg, #6366FF, #f4c878); color: #1a1000; }
.cv-badge-rank {
  background: linear-gradient(135deg, #1a1a1a, #333); color: #FFFFFF;
  border: 1px solid #FFFFFF;
}

.cv-section { margin-bottom: 18px; }
.cv-section-h {
  font-family: 'Playfair Display', serif;
  font-size: 14px; font-weight: 800; color: #1a1a1a;
  text-transform: uppercase; letter-spacing: 2px;
  padding-bottom: 4px; margin: 0 0 10px;
  position: relative;
}
.cv-section-h::after {
  content: ''; position: absolute;
  left: 0; bottom: 0; width: 40px; height: 2px;
  background: #6366FF;
}
.cv-summary { font-size: 12px; color: #333; line-height: 1.6; margin: 0 0 6px; }
.cv-summary-meta {
  display: flex; gap: 14px; flex-wrap: wrap;
  font-size: 11px; color: #555; padding: 6px 10px;
  background: #faf7ee; border-left: 3px solid #FFFFFF; border-radius: 4px;
}
.cv-summary-meta strong { color: #1a1a1a; font-weight: 700; }

.cv-exp { margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px dashed #eee; }
.cv-exp:last-child { border-bottom: none; }
.cv-exp-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 10px; margin-bottom: 6px;
}
.cv-exp-role { font-size: 13px; font-weight: 800; color: #1a1a1a; }
.cv-exp-company { font-size: 11px; color: #6366FF; font-weight: 700; margin-top: 1px; }
.cv-exp-period {
  font-size: 10px; color: #666;
  white-space: nowrap; letter-spacing: 0.3px; font-weight: 700;
}
.cv-exp-bullets {
  margin: 4px 0 0 0; padding-left: 18px;
  font-size: 11px; color: #444; line-height: 1.5;
}
.cv-exp-bullets li { margin-bottom: 3px; }
.cv-dubai-chip {
  display: inline-block; font-size: 8px; letter-spacing: 0.4px;
  padding: 1px 6px; border-radius: 8px;
  background: #6366FF; color: #1a1000;
  font-weight: 800; vertical-align: 2px; margin-left: 4px;
}

.cv-skills-group { margin-bottom: 10px; }
.cv-skills-lbl {
  font-size: 10px; letter-spacing: 0.8px; color: #888;
  font-weight: 700; text-transform: uppercase; margin-bottom: 5px;
}
.cv-chip-row { display: flex; flex-wrap: wrap; gap: 5px; }
.cv-chip {
  font-size: 10px; font-weight: 700;
  padding: 4px 10px; border-radius: 14px;
  background: linear-gradient(135deg, #6366FF, #f4c878); color: #1a1000;
}
.cv-chip.cv-chip-soft {
  background: #faf7ee; color: #1a1a1a;
  border: 1px solid #FFFFFF;
}

.cv-lang-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
}
.cv-lang {
  display: flex; justify-content: space-between;
  padding: 7px 10px;
  background: #faf7ee; border-left: 3px solid #FFFFFF;
  border-radius: 4px;
}
.cv-lang-name { font-size: 11px; color: #1a1a1a; font-weight: 700; }
.cv-lang-level { font-size: 10px; color: #6366FF; font-weight: 800; letter-spacing: 0.3px; }

.cv-cert {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 10px; margin-bottom: 6px;
  background: #faf7ee; border: 1px solid #eadeb2;
  border-radius: 4px;
}
.cv-cert-ico { font-size: 18px; flex-shrink: 0; }
.cv-cert-name { font-size: 12px; color: #1a1a1a; font-weight: 700; }
.cv-cert-meta { font-size: 10px; color: #777; margin-top: 1px; }

.cv-refs { font-size: 11px; color: #666; font-style: italic; margin: 0; }

.cv-footer { margin-top: auto; padding-top: 14px; }
.cv-footer-rule {
  height: 1px; background: linear-gradient(90deg, transparent, #6366FF, transparent);
  margin-bottom: 8px;
}
.cv-footer-row {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  font-size: 9px; color: #888; flex-wrap: wrap;
}
.cv-footer-row strong { color: #6366FF; }
.cv-px-mono {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 4px;
  background: linear-gradient(135deg, #6366FF, #f4c878);
  color: #1a1000; font-family: 'Playfair Display', serif; font-weight: 900; font-size: 11px;
  letter-spacing: -1px;
}
.cv-foot-url { letter-spacing: 0.3px; }
.cv-foot-page { font-weight: 800; color: #6366FF; }

/* Print — CV */
@media print {
  body * { visibility: hidden; }
  #cvDoc, #cvDoc * { visibility: visible; }
  #cvDoc { position: absolute; left: 0; top: 0; }
  .cv-page { page-break-after: always; box-shadow: none; }
  .cv-page:last-child { page-break-after: auto; }
}

@media (max-width: 720px) {
  .cv-page { padding: 24px; }
  .cv-header { grid-template-columns: 1fr; text-align: center; }
  .cv-photo-wrap { margin: 0 auto; width: 100px; height: 100px; }
  .cv-contact { justify-content: center; }
  .cv-badges { justify-content: center; }
  .cv-lang-grid { grid-template-columns: 1fr; }
  .profile-quick-actions { grid-template-columns: 1fr; }
  .pxo-attach { flex-wrap: wrap; }
  .pxo-attach-actions { width: 100%; justify-content: flex-end; }
}

#splash.hide {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

.splash:not(.show):not(.open):not(.active) {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

/* ════════════════════════════════════════════════════
   SPECIAL EVENT MARKERS — gold star + column highlight
   ════════════════════════════════════════════════════ */
.rs-table th.rs-event-col,
.rs-table td.rs-event-col {
  border-left: 1px solid var(--text-primary);
  border-right: 1px solid var(--text-primary);
  background: linear-gradient(180deg, rgba(129,140,255,0.10), rgba(129,140,255,0.04));
  position: relative;
}
.rs-table thead th.rs-event-col {
  border-top: 1px solid var(--text-primary);
  box-shadow: inset 0 -2px 0 var(--text-primary);
}
.rs-table tbody tr:last-child td.rs-event-col {
  border-bottom: 1px solid var(--text-primary);
}

.rs-event-star {
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; padding: 0; margin-left: 4px;
  font-size: 13px; line-height: 1; cursor: pointer;
  filter: drop-shadow(0 0 4px rgba(129,140,255,0.7));
  animation: rsEventStarPulse 1.6s ease-in-out infinite;
  transition: transform 0.15s ease;
}
.rs-event-star:hover { transform: scale(1.25); }
.rs-event-star-cell {
  position: absolute;
  top: 2px; right: 3px;
  font-size: 11px;
  margin: 0;
}
@keyframes rsEventStarPulse {
  0%, 100% { transform: scale(1);   filter: drop-shadow(0 0 4px rgba(129,140,255,0.7)); }
  50%      { transform: scale(1.2); filter: drop-shadow(0 0 10px rgba(129,140,255,1)); }
}

/* Banner above the roster */
.rs-event-banner {
  display: flex; flex-direction: column; gap: 6px;
  margin: 10px 14px 12px;
}
.rs-event-banner-btn {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 10px 14px;
  background: linear-gradient(90deg, rgba(129,140,255,0.16), rgba(129,140,255,0.04));
  border: 1px solid var(--text-primary);
  border-left-width: 3px;
  border-radius: 12px;
  color: #fff; text-align: left; cursor: pointer;
  font-family: inherit; font-size: 12px; line-height: 1.35;
  transition: transform 0.15s, box-shadow 0.15s;
}
.rs-event-banner-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(129,140,255,0.25);
}
.rs-event-banner-star {
  font-size: 18px; flex-shrink: 0;
  animation: rsEventStarPulse 1.6s ease-in-out infinite;
}
.rs-event-banner-text strong { color: var(--text-primary); }

/* Event details modal */
.rs-event-modal {
  position: fixed; inset: 0; z-index: 9500;
  background: rgba(5,7,12,0.78); backdrop-filter: blur(8px);
  display: none; align-items: center; justify-content: center;
  padding: 20px;
}
.rs-event-modal.show { display: flex; animation: fadeIn 0.18s ease both; }
.rs-event-modal-card {
  width: 100%; max-width: 380px;
  background: linear-gradient(180deg, #14161e, #0b0d12);
  border: 1px solid var(--text-primary);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.55), 0 0 24px rgba(129,140,255,0.18);
  animation: rsModalRise 0.25s cubic-bezier(0.34, 1.2, 0.64, 1);
}
@keyframes rsModalRise {
  from { transform: translateY(12px) scale(0.96); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}
.rs-event-modal-head {
  display: flex; align-items: flex-start; gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(129,140,255,0.25);
}
.rs-event-modal-star {
  font-size: 26px; flex-shrink: 0;
  filter: drop-shadow(0 0 8px rgba(129,140,255,0.8));
  animation: rsEventStarPulse 1.6s ease-in-out infinite;
}
.rs-event-modal-title { flex: 1; min-width: 0; }
.rs-event-modal-eyebrow {
  font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--text-primary); font-weight: 800;
}
.rs-event-modal-name {
  font-family: 'Playfair Display', serif;
  font-size: 17px; font-weight: 700; color: #fff;
  margin-top: 2px; line-height: 1.25;
}
.rs-event-modal-x {
  background: transparent; border: 0; color: var(--text-muted);
  font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px;
}
.rs-event-modal-x:hover { color: #fff; }
.rs-event-modal-body { padding: 14px 0 6px; }
.rs-event-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 0; font-size: 12px;
  border-bottom: 1px dashed rgba(255,255,255,0.06);
}
.rs-event-row:last-of-type { border-bottom: 0; }
.rs-event-row span { color: var(--text-muted); }
.rs-event-row strong { color: #fff; font-weight: 700; }
.rs-event-notes {
  margin-top: 10px;
  background: rgba(129,140,255,0.06);
  border: 1px solid rgba(129,140,255,0.2);
  border-radius: 10px;
  padding: 10px 12px;
}
.rs-event-notes-label {
  display: block; font-size: 9px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--text-primary); font-weight: 800; margin-bottom: 4px;
}
.rs-event-notes p { font-size: 12px; color: #fff; line-height: 1.45; }
.rs-event-modal-btn {
  width: 100%; margin-top: 14px;
  padding: 11px; border-radius: 12px; cursor: pointer;
  background: linear-gradient(135deg, #FFFFFF, #B0B4BC);
  color: #1a1000; border: 0;
  font-family: inherit; font-size: 13px; font-weight: 800;
  letter-spacing: 0.4px;
}
.rs-event-modal-btn:hover { filter: brightness(1.08); }

/* ════════════════════════════════════════════════════
   LEAVE REQUEST — days pill, form actions, tracker, list
   ════════════════════════════════════════════════════ */
.leave-days-pill {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; margin: -4px 0 14px;
  background: linear-gradient(90deg, rgba(129,140,255,0.14), rgba(129,140,255,0.04));
  border: 1px solid var(--border-gold);
  border-left: 3px solid var(--text-primary);
  border-radius: 10px;
  font-size: 12px; color: var(--text-secondary);
}
.leave-days-pill .leave-days-icon { font-size: 16px; }
.leave-days-pill strong { color: var(--text-primary); font-size: 14px; font-weight: 800; margin: 0 2px; }
.leave-days-pill.is-invalid {
  background: linear-gradient(90deg, rgba(239,68,68,0.18), rgba(239,68,68,0.04));
  border-color: rgba(239,68,68,0.4); border-left-color: #ef4444;
  color: #fecaca;
}
.leave-days-pill.is-invalid strong { color: #fca5a5; }

.leave-form-actions {
  display: flex; gap: 10px; margin-top: 6px;
}
.btn-half { flex: 1; }

/* Status tracker (inside modal after submit) */
.mlt-summary {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px; margin-bottom: 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-silver);
  border-radius: 12px;
  flex-wrap: wrap;
}
.mlt-summary-dates {
  font-size: 12px; color: var(--text-secondary); font-weight: 600;
}
.mlt-type-chip {
  font-size: 12px; font-weight: 800; padding: 5px 12px;
  border-radius: 999px; letter-spacing: 0.3px;
  background: rgba(129,140,255,0.15); color: var(--text-primary);
  border: 1px solid var(--border-gold);
}
.leave-type-sick      { background: rgba(96,165,250,0.18); color: #93c5fd; border-color: rgba(96,165,250,0.4); }
.leave-type-emergency { background: rgba(239,68,68,0.18);  color: #fca5a5; border-color: rgba(239,68,68,0.4); }
.leave-type-dayoff    { background: rgba(167,139,250,0.18); color: #c4b5fd; border-color: rgba(167,139,250,0.4); }
.leave-type-unpaid    { background: rgba(120,120,120,0.18); color: #d4d4d4; border-color: rgba(160,160,160,0.4); }
.leave-type-ph        { background: rgba(201,160,80,0.18);  color: #e8c877; border-color: rgba(201,160,80,0.4); }

.mlt-track {
  position: relative;
  padding-left: 32px;
  margin-bottom: 16px;
}
.mlt-track::before {
  content: ''; position: absolute;
  left: 13px; top: 12px; bottom: 12px;
  width: 2px;
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 33%, rgba(129,140,255,0.25) 66%, rgba(255,255,255,0.08) 100%);
  border-radius: 2px;
}
.mlt-stage {
  position: relative;
  margin-bottom: 14px;
}
.mlt-stage:last-child { margin-bottom: 0; }
.mlt-marker {
  position: absolute; left: -32px; top: 0;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; font-size: 14px;
  background: #0b0d12;
  border: 2px solid rgba(255,255,255,0.15);
  z-index: 1;
}
.mlt-approved .mlt-marker {
  border-color: #22c55e;
  background: linear-gradient(135deg, rgba(34,197,94,0.25), rgba(34,197,94,0.05));
  color: #4ade80;
  box-shadow: 0 0 12px rgba(34,197,94,0.35);
}
.mlt-rejected .mlt-marker {
  border-color: #ef4444;
  background: linear-gradient(135deg, rgba(239,68,68,0.25), rgba(239,68,68,0.05));
  color: #fca5a5;
  box-shadow: 0 0 12px rgba(239,68,68,0.35);
}
.mlt-pending .mlt-marker {
  border-color: var(--text-primary);
  background: linear-gradient(135deg, rgba(129,140,255,0.2), rgba(129,140,255,0.04));
  color: var(--text-primary);
  animation: mltPulse 1.6s ease-in-out infinite;
}
.mlt-locked .mlt-marker { opacity: 0.55; }
@keyframes mltPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(129,140,255,0.45); }
  50%     { box-shadow: 0 0 0 8px rgba(129,140,255,0); }
}

.mlt-card {
  padding: 11px 13px;
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-silver);
}
.mlt-pending .mlt-card {
  background: linear-gradient(135deg, rgba(129,140,255,0.10), rgba(129,140,255,0.02));
  border-color: var(--border-gold);
  animation: mltCardGlow 2.4s ease-in-out infinite;
}
@keyframes mltCardGlow {
  0%,100% { box-shadow: 0 0 0 rgba(129,140,255,0); }
  50%     { box-shadow: 0 0 14px rgba(129,140,255,0.18); }
}
.mlt-approved .mlt-card { border-color: rgba(34,197,94,0.3); }
.mlt-rejected .mlt-card { border-color: rgba(239,68,68,0.4); background: linear-gradient(135deg, rgba(239,68,68,0.08), rgba(239,68,68,0.02)); }
.mlt-locked .mlt-card { opacity: 0.55; }

.mlt-card-row {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 4px;
}
.mlt-photo {
  width: 32px; height: 32px; border-radius: 50%; object-fit: cover;
  border: 1.5px solid var(--border-gold); flex-shrink: 0;
}
.mlt-photo-placeholder {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,0.05);
  border: 1.5px solid var(--border-silver);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; flex-shrink: 0;
}
.mlt-card-info { flex: 1; min-width: 0; }
.mlt-card-title {
  font-size: 9px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--text-primary); font-weight: 800;
}
.mlt-card-name { font-size: 12px; color: #fff; font-weight: 700; margin-top: 1px; }
.mlt-card-meta { font-size: 11px; color: var(--text-muted); margin-top: 4px; padding-left: 42px; }
.mlt-rejected .mlt-card-meta { color: #fca5a5; font-weight: 700; }
.mlt-approved .mlt-card-meta { color: #86efac; }
.mlt-reject-note {
  margin-top: 6px; padding: 6px 10px;
  font-size: 11px; color: #fecaca; font-style: italic;
  background: rgba(239,68,68,0.10);
  border: 1px dashed rgba(239,68,68,0.35);
  border-radius: 8px;
}

/* My Leave Requests list */
.my-leave-wrap { margin-top: 22px; }
.my-leave-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 10px; padding: 0 4px;
}
.my-leave-head h3 {
  font-family: 'Playfair Display', serif;
  font-size: 16px; font-weight: 700; color: #fff;
}
.my-leave-count {
  font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--text-muted); font-weight: 700;
}
.my-leave-list { display: flex; flex-direction: column; gap: 10px; }

.mlc-card {
  display: flex; flex-direction: column; gap: 7px;
  width: 100%; padding: 12px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-silver);
  border-radius: 14px;
  color: inherit; text-align: left; cursor: pointer;
  font-family: inherit;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.mlc-card:hover {
  transform: translateY(-1px);
  border-color: var(--border-gold);
  box-shadow: 0 4px 14px rgba(0,0,0,0.3);
}
.mlc-row1 { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mlc-type {
  font-size: 12px; font-weight: 800; padding: 4px 10px;
  border-radius: 999px;
  background: rgba(129,140,255,0.14); color: var(--text-primary);
  border: 1px solid var(--border-gold);
}
.mlc-badge {
  font-size: 10px; letter-spacing: 0.6px;
  padding: 4px 10px; border-radius: 999px;
  font-weight: 800; text-transform: uppercase;
  border: 1px solid transparent;
}
.mlc-approved {
  background: linear-gradient(135deg, #FFFFFF, #B0B4BC);
  color: #1a1000; border-color: var(--text-primary);
  box-shadow: 0 0 10px rgba(129,140,255,0.35);
}
.mlc-rejected {
  background: rgba(239,68,68,0.14); color: #fca5a5; border-color: rgba(239,68,68,0.4);
}
.mlc-cancelled {
  background: rgba(148,163,184,0.14); color: #94a3b8; border-color: rgba(148,163,184,0.35);
}
.mlc-progress {
  background: rgba(96,165,250,0.14); color: #93c5fd; border-color: rgba(96,165,250,0.4);
}

.mlc-row2 {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 12px;
}
.mlc-dates { color: #fff; font-weight: 700; }
.mlc-days { color: var(--text-muted); font-size: 11px; }

.mlc-stages {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; color: var(--text-muted);
  padding-top: 6px; border-top: 1px dashed rgba(255,255,255,0.06);
}
.mlc-stage { display: inline-flex; align-items: center; gap: 5px; }
.mlc-arrow { color: var(--text-muted); opacity: 0.6; }
.mlc-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  font-size: 10px; font-weight: 800;
}
.mlc-dot-ok   { background: rgba(34,197,94,0.2);  color: #4ade80; }
.mlc-dot-no   { background: rgba(239,68,68,0.2);  color: #fca5a5; }
.mlc-dot-wait { background: rgba(129,140,255,0.2); color: var(--text-primary); animation: mltPulse 1.6s ease-in-out infinite; }
.mlc-dot-lock { background: rgba(120,120,120,0.18); color: #999; }

.mlc-reject {
  font-size: 11px; color: #fca5a5;
  padding: 6px 10px; margin-top: 4px;
  background: rgba(239,68,68,0.08);
  border-left: 2px solid #ef4444;
  border-radius: 6px;
}

/* ════════════════════════════════════════════════════
   LEAVE PLANNER — pending list + dynamic calendar
   ════════════════════════════════════════════════════ */

/* Type colors */
.lp-cal-chip.lt-annual,      .lp-pending-type.lt-annual,      .lp-chip-type.lt-annual,      .lp-sw.lt-annual      { background: #34d399; color: #053b25; }
.lp-cal-chip.lt-sick,        .lp-pending-type.lt-sick,        .lp-chip-type.lt-sick,        .lp-sw.lt-sick        { background: #fb923c; color: #2a1a05; }
.lp-cal-chip.lt-unpaid,      .lp-pending-type.lt-unpaid,      .lp-chip-type.lt-unpaid,      .lp-sw.lt-unpaid      { background: #94a3b8; color: #1a1f2a; }
.lp-cal-chip.lt-maternity,   .lp-pending-type.lt-maternity,   .lp-chip-type.lt-maternity,   .lp-sw.lt-maternity   { background: #f472b6; color: #3a0a22; }
.lp-cal-chip.lt-paternity,   .lp-pending-type.lt-paternity,   .lp-chip-type.lt-paternity,   .lp-sw.lt-paternity   { background: #60a5fa; color: #051a3a; }
.lp-cal-chip.lt-bereavement, .lp-pending-type.lt-bereavement, .lp-chip-type.lt-bereavement, .lp-sw.lt-bereavement { background: #a78bfa; color: #1e0a3a; }
.lp-cal-chip.lt-ph,          .lp-pending-type.lt-ph,          .lp-chip-type.lt-ph,          .lp-sw.lt-ph          { background: #C9A050; color: #2a1f05; }
.lp-sw.lt-holiday { background: linear-gradient(135deg, #C9A050, #e8c877); }

/* LV-6 — Apple-calm calendar chips: neutral fill, type shows as a thin left
   bar (these later rules out-cascade the solid fills above for cal chips only;
   legend swatches + pending/type pills keep their solid color). */
.lp-cal-chip { background: rgba(255,255,255,0.06); color: #e2e6ec; border-left: 4px solid #94a3b8; border-radius: 3px; }
/* LEAVE-FIX-9JUL — leading type dot; 3px bar alone read colorless on device */
.lp-cal-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  margin-right: 4px; vertical-align: middle; flex-shrink: 0;
}
.lp-cal-chip.lt-annual      { background: rgba(255,255,255,0.06); color: #e2e6ec; border-left-color: #34d399; }
.lp-cal-chip.lt-sick        { background: rgba(255,255,255,0.06); color: #e2e6ec; border-left-color: #fb923c; }
.lp-cal-chip.lt-unpaid      { background: rgba(255,255,255,0.06); color: #e2e6ec; border-left-color: #94a3b8; }
.lp-cal-chip.lt-maternity   { background: rgba(255,255,255,0.06); color: #e2e6ec; border-left-color: #f472b6; }
.lp-cal-chip.lt-paternity   { background: rgba(255,255,255,0.06); color: #e2e6ec; border-left-color: #60a5fa; }
.lp-cal-chip.lt-bereavement { background: rgba(255,255,255,0.06); color: #e2e6ec; border-left-color: #a78bfa; }
.lp-cal-chip.lt-ph          { background: rgba(255,255,255,0.06); color: #e2e6ec; border-left-color: #C9A050; }

/* LV-6 — public holidays on the day grid */
.lp-cal-d.lp-cal-hol { border-top: 2px solid #C9A050; }
.lp-cal-hol-lbl {
  display: block; font-size: 8px; font-weight: 700; letter-spacing: 0.3px;
  color: #C9A050; text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: none; border: 0; padding: 0; font-family: inherit;
}
.lp-cal-addhol {
  background: none; border: 0; padding: 0 2px; line-height: 1;
  color: var(--text-muted); opacity: 0.35; font-size: 12px; cursor: pointer;
}
.lp-cal-addhol:hover { opacity: 0.9; }

/* Pending list */
.lp-pending-head { margin: 6px 0 10px; padding: 0 4px; }
.lp-pending-head h3 {
  font-family: 'Playfair Display', serif;
  font-size: 16px; font-weight: 700; color: #fff;
  display: flex; align-items: center; gap: 8px;
}
.lp-pending-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 7px;
  border-radius: 999px; font-family: 'Inter', sans-serif;
  background: #FFFFFF; color: #1a1000;
  font-size: 11px; font-weight: 800;
}
.lp-pending-empty {
  text-align: center; padding: 16px; font-size: 12px;
  color: var(--text-muted); font-style: italic;
  background: rgba(255,255,255,0.02);
  border: 1px dashed var(--border-silver); border-radius: 12px;
}
.lp-pending-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.lp-pending-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-silver);
  border-radius: 14px;
  transition: border-color 0.15s, transform 0.15s;
}
.lp-pending-card:hover { border-color: var(--border-gold); }
.lp-pending-photo {
  width: 44px; height: 44px; border-radius: 50%; object-fit: cover;
  border: 1.5px solid var(--border-gold);
}
.lp-pending-info { min-width: 0; }
.lp-pending-row1 {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 4px;
}
.lp-pending-row1 strong { color: #fff; font-size: 13px; font-weight: 800; }
.lp-pending-type {
  font-size: 10px; padding: 2px 8px; border-radius: 999px;
  font-weight: 800; letter-spacing: 0.3px;
}
.lp-pending-meta { font-size: 11px; color: var(--text-secondary); margin-bottom: 2px; }
.lp-pending-reason { font-size: 11px; color: #fff; font-style: italic; margin-bottom: 6px; }
.lp-wait-tag {
  display: inline-block;
  font-size: 10px; padding: 3px 8px; border-radius: 6px;
  font-weight: 700; letter-spacing: 0.2px;
}
.lp-wait-mgr { background: rgba(129,140,255,0.15); color: var(--text-primary); border: 1px solid var(--border-gold); }
.lp-wait-hr  { background: rgba(96,165,250,0.18); color: #93c5fd; border: 1px solid rgba(96,165,250,0.4); }

/* OPS-17d — BTN-1 treatment (shared by Leave Planner + Ops approval cards):
   one compact right-aligned row; Approve = hairline secondary pill, Reject =
   quiet terracotta hairline. The old platinum slab + red fill are gone. */
.lp-pending-actions {
  grid-column: 1 / -1;
  display: flex; gap: 8px; margin-top: 4px;
  justify-content: flex-end;
}
.lp-btn {
  flex: 0 0 auto; padding: 5px 14px;
  border-radius: 999px; cursor: pointer;
  font-family: inherit; font-size: 11px; font-weight: 600;
  border: 1px solid var(--btn-hairline);
  background: transparent;
  transition: border-color 0.15s, color 0.15s;
}
.lp-btn:hover { border-color: rgba(255,255,255,0.28); }
.lp-btn-approve { color: #cfd3d8; }
.lp-btn-approve:hover { color: #fff; }
.lp-btn-reject { color: #C4695A; border-color: rgba(196,105,90,0.4); }
.lp-btn-reject:hover { color: #d98a7c; border-color: rgba(196,105,90,0.6); }
/* OPS-17d — small requester by-line on approval cards */
.ops-appr-by { font-size: 10px; color: #9aa0a8; margin-top: 2px; }

/* Calendar */
.lp-cal-card {
  padding: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  border: 1px solid var(--border-silver);
  border-radius: 16px;
  margin-bottom: 18px;
  overflow: hidden;
}
.lp-cal-nav {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px; gap: 10px;
}
.lp-cal-arrow {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border-silver);
  color: var(--text-primary); font-size: 18px; font-weight: 800;
  cursor: pointer; transition: background 0.15s, border-color 0.15s;
}
.lp-cal-arrow:hover { background: var(--gold-glow-sm); border-color: var(--border-gold); }
.lp-cal-title-wrap { flex: 1; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.lp-cal-title {
  font-family: 'Playfair Display', serif;
  font-size: 20px; font-weight: 700;
  color: #fff; letter-spacing: 0.2px;
  background: linear-gradient(135deg, #FFFFFF, #fff);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.lp-cal-today {
  font-size: 9px; padding: 2px 9px; border-radius: 999px;
  background: rgba(129,140,255,0.12);
  border: 1px solid var(--border-gold);
  color: var(--text-primary); font-weight: 700;
  cursor: pointer; letter-spacing: 0.6px; text-transform: uppercase;
}
.lp-cal-today:hover { background: var(--gold-glow-sm); }

.lp-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
@keyframes lpSlideRight {
  from { transform: translateX(20px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
@keyframes lpSlideLeft {
  from { transform: translateX(-20px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
.lp-cal-slide-right { animation: lpSlideRight 0.28s ease-out both; }
.lp-cal-slide-left  { animation: lpSlideLeft  0.28s ease-out both; }

.lp-cal-dn {
  font-size: 9px; letter-spacing: 1px; text-transform: uppercase;
  text-align: center; padding: 4px 0;
  color: var(--text-primary); font-weight: 800;
}
.lp-cal-dn-wkd { color: var(--text-muted); }

.lp-cal-d {
  min-height: 64px; padding: 4px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: 8px;
  display: flex; flex-direction: column; gap: 2px;
}
.lp-cal-d.is-weekend {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.06);
}
.lp-cal-d.is-today {
  border-color: var(--text-primary);
  box-shadow: 0 0 0 2px rgba(129,140,255,0.45), inset 0 0 12px rgba(129,140,255,0.10);
}
.lp-cal-blank { background: transparent; border-color: transparent; }
.lp-cal-d-top {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px;
}
.lp-cal-num { color: #fff; font-weight: 700; }
.lp-cal-d.is-today .lp-cal-num { color: var(--text-primary); }
.lp-cal-warn {
  font-size: 11px; color: #fca5a5;
  filter: drop-shadow(0 0 4px rgba(248,113,113,0.6));
  animation: lpWarnPulse 1.6s ease-in-out infinite;
}
@keyframes lpWarnPulse {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.18); }
}
.lp-cal-chips {
  display: flex; flex-direction: column; gap: 2px;
  margin-top: 1px;
}
.lp-cal-chip {
  font-size: 9px; padding: 2px 5px; border-radius: 4px;
  font-weight: 800; letter-spacing: 0.2px;
  border: 0; cursor: pointer;
  text-align: left; line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: inherit;
  transition: transform 0.12s;
}
.lp-cal-chip:hover { transform: translateY(-1px); filter: brightness(1.15); }
.lp-cal-more {
  font-size: 9px; color: var(--text-muted); font-weight: 700;
  padding-left: 4px;
}

.lp-cal-legend {
  display: flex; flex-wrap: wrap; gap: 10px;
  padding-top: 10px; margin-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-size: 10px; color: var(--text-secondary);
  letter-spacing: 0.2px;
}
.lp-cal-legend span { display: inline-flex; align-items: center; gap: 5px; }
.lp-sw {
  display: inline-block; width: 12px; height: 12px;
  border-radius: 3px;
}

/* Chip details popup */
.lp-chip-modal, .lp-reject-modal {
  position: fixed; inset: 0; z-index: 9500;
  background: rgba(5,7,12,0.78); backdrop-filter: blur(8px);
  display: none; align-items: center; justify-content: center;
  padding: 20px;
}
.lp-chip-modal.show, .lp-reject-modal.show { display: flex; animation: fadeIn 0.18s ease both; }
.lp-chip-card, .lp-reject-card {
  position: relative;
  width: 100%; max-width: 360px;
  background: linear-gradient(180deg, #14161e, #0b0d12);
  border: 1px solid var(--text-primary);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.55), 0 0 24px rgba(129,140,255,0.18);
  animation: rsModalRise 0.25s cubic-bezier(0.34, 1.2, 0.64, 1);
}
.lp-chip-x, .lp-reject-x {
  position: absolute; top: 12px; right: 12px;
  background: transparent; border: 0; color: var(--text-muted);
  font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px;
}
.lp-chip-x:hover, .lp-reject-x:hover { color: #fff; }
.lp-chip-head {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 12px; margin-bottom: 12px;
  border-bottom: 1px solid rgba(129,140,255,0.25);
}
.lp-chip-photo {
  width: 48px; height: 48px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--text-primary);
}
.lp-chip-name {
  font-family: 'Playfair Display', serif;
  font-size: 17px; font-weight: 700; color: #fff;
}
.lp-chip-type {
  display: inline-block; margin-top: 4px;
  font-size: 10px; padding: 3px 9px; border-radius: 999px;
  font-weight: 800; letter-spacing: 0.3px;
}
.lp-chip-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 0; font-size: 12px;
  border-bottom: 1px dashed rgba(255,255,255,0.06);
}
.lp-chip-row:last-of-type { border-bottom: 0; }
.lp-chip-row span { color: var(--text-muted); }
.lp-chip-row strong { color: #fff; font-weight: 700; }
.lp-chip-notes {
  margin: 10px 0 14px;
  background: rgba(129,140,255,0.06);
  border: 1px solid rgba(129,140,255,0.2);
  border-radius: 10px;
  padding: 10px 12px;
}
.lp-chip-notes span {
  display: block; font-size: 9px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--text-primary); font-weight: 800; margin-bottom: 4px;
}
.lp-chip-notes p { font-size: 12px; color: #fff; line-height: 1.45; }

/* Reject modal */
.lp-reject-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: 17px; font-weight: 700; color: #fff;
  padding-right: 24px;
}
.lp-reject-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; margin-bottom: 14px; }
.lp-reject-label {
  display: block; font-size: 10px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--text-primary); font-weight: 800; margin-bottom: 6px;
}
.lp-reject-input { width: 100%; resize: vertical; min-height: 70px; }
.lp-reject-actions { display: flex; gap: 8px; margin-top: 12px; }

/* Confetti */
.lp-confetti-layer {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 9800; overflow: hidden;
}
.lp-confetti-piece {
  position: absolute; top: -18px;
  width: 10px; height: 14px;
  border-radius: 2px;
  animation: lpConfettiFall linear forwards;
  box-shadow: 0 0 4px rgba(0,0,0,0.3);
}
@keyframes lpConfettiFall {
  0%   { transform: translateY(-20px) rotate(0deg);   opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}

/* ════════════════════════════════════════════════════
   PAYSLIP — running-bill design with month nav
   ════════════════════════════════════════════════════ */
.pay-staff-cell { transition: background 0.15s; }
.pay-staff-cell:hover {
  background: rgba(129,140,255,0.08);
  border-radius: 6px;
}
.pay-staff-cell:hover span { color: var(--text-primary); text-decoration: underline; }

.ps-doc {
  position: relative;
  padding: 4px 4px 8px;
}
@keyframes psSlideRight { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes psSlideLeft  { from { transform: translateX(-20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.ps-slide-right { animation: psSlideRight 0.28s ease-out both; }
.ps-slide-left  { animation: psSlideLeft  0.28s ease-out both; }

.ps-monogram {
  position: absolute; bottom: 4px; right: 8px;
  font-family: 'Playfair Display', serif;
  font-size: 12px; font-weight: 800;
  color: var(--text-primary);
  letter-spacing: 2px;
  opacity: 0.4;
}

/* Header */
.ps-head {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #0a0c12, #14161e);
  border: 1px solid var(--border-gold);
  border-radius: 14px;
  margin-bottom: 12px;
}
.ps-wl-circle {
  width: 48px; height: 48px; border-radius: 50%;
  background: linear-gradient(135deg, #fff, #e6e6e6);
  color: #1a1000;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Playfair Display', serif;
  font-size: 22px; font-weight: 800;
  flex-shrink: 0;
  border: 2px solid var(--text-primary);
  box-shadow: 0 0 12px rgba(129,140,255,0.3);
}
.ps-head-info { flex: 1; min-width: 0; }
.ps-head-title {
  font-family: 'Playfair Display', serif;
  font-size: 22px; font-weight: 800;
  color: var(--text-primary);
  letter-spacing: 4px;
  background: linear-gradient(135deg, var(--text-primary), #FFFFFF, var(--text-primary));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ps-head-company { font-size: 12px; color: #fff; font-weight: 700; margin-top: 1px; }
.ps-head-poweredby {
  font-size: 9px; color: var(--text-muted); margin-top: 4px;
  letter-spacing: 0.4px;
}
.ps-head-poweredby strong { color: var(--text-primary); }

/* Breadcrumb */
.ps-bc-row {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  margin-bottom: 12px;
  font-size: 11px;
}
.ps-bc {
  background: transparent; border: 1px solid transparent;
  color: var(--text-muted);
  padding: 4px 10px; border-radius: 999px;
  cursor: pointer; font-family: inherit;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.5px; text-transform: uppercase;
  transition: all 0.15s;
}
.ps-bc:hover { color: #fff; background: rgba(255,255,255,0.05); }
.ps-bc.is-active {
  color: var(--text-primary);
  background: rgba(129,140,255,0.12);
  border-color: var(--border-gold);
}
.ps-bc-live {
  display: inline-block; margin-left: 4px;
  font-size: 8px; padding: 1px 5px; border-radius: 4px;
  background: #FFFFFF; color: #1a1000;
  letter-spacing: 0.5px;
  animation: psLivePulse 1.6s ease-in-out infinite;
}
.ps-bc-sep { color: var(--text-muted); opacity: 0.4; }

/* Month navigation bar */
.ps-month-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; margin-bottom: 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-silver);
  border-radius: 12px;
}
.ps-month-arrow {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border-silver);
  color: var(--text-primary); font-size: 18px; font-weight: 800;
  cursor: pointer; transition: all 0.15s;
}
.ps-month-arrow:hover:not(:disabled) {
  background: var(--gold-glow-sm);
  border-color: var(--border-gold);
}
.ps-month-arrow:disabled { opacity: 0.3; cursor: not-allowed; }
.ps-month-center { flex: 1; text-align: center; }
.ps-month-title {
  font-family: 'Playfair Display', serif;
  font-size: 18px; font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #FFFFFF, #fff);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 4px;
}
.ps-month-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 9px; padding: 3px 9px; border-radius: 999px;
  font-weight: 800; letter-spacing: 1px;
}
.ps-live {
  background: #FFFFFF;
  color: #1a1000;
  box-shadow: 0 0 12px rgba(129,140,255,0.45);
  animation: psLivePulse 1.8s ease-in-out infinite;
}
.ps-live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #1a1000;
  animation: psLiveDot 1s ease-in-out infinite;
}
@keyframes psLivePulse {
  0%,100% { box-shadow: 0 0 12px rgba(129,140,255,0.45); }
  50%     { box-shadow: 0 0 18px rgba(129,140,255,0.85); }
}
@keyframes psLiveDot {
  0%,100% { opacity: 1; }
  50%     { opacity: 0.3; }
}
.ps-final {
  background: rgba(34,197,94,0.18);
  color: #4ade80; border: 1px solid rgba(34,197,94,0.4);
}

/* Employee box */
.ps-emp-box {
  display: flex; gap: 14px;
  padding: 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-silver);
  border-radius: 12px;
  margin-bottom: 12px;
}
.ps-emp-photo {
  width: 60px; height: 60px; border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--text-primary);
  flex-shrink: 0;
}
.ps-emp-info { flex: 1; min-width: 0; }
.ps-emp-name {
  font-family: 'Playfair Display', serif;
  font-size: 18px; font-weight: 700; color: #fff;
}
.ps-emp-rolerow { font-size: 11px; color: var(--text-primary); margin-bottom: 8px; }
.ps-emp-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  font-size: 11px;
}
.ps-emp-lbl {
  display: block; font-size: 9px; letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--text-muted); font-weight: 700;
}
.ps-emp-grid strong { color: #fff; font-weight: 700; }

/* Live section (running bill) */
.ps-live-section {
  padding: 14px;
  background: linear-gradient(135deg, rgba(129,140,255,0.10), rgba(129,140,255,0.02));
  border: 1px solid var(--border-gold);
  border-left: 3px solid var(--text-primary);
  border-radius: 12px;
  margin-bottom: 12px;
}
.ps-live-header {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 10px;
}
.ps-live-header .ps-live-dot {
  background: #FFFFFF; width: 8px; height: 8px;
}
.ps-live-header strong {
  font-size: 11px; letter-spacing: 1.5px;
  color: var(--text-primary); font-weight: 800;
}
.ps-live-sub { font-size: 10px; color: var(--text-muted); margin-left: auto; }
.ps-progress-label {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 6px;
}
.ps-progress-label span { font-size: 10px; color: var(--text-muted); letter-spacing: 0.4px; text-transform: uppercase; font-weight: 700; }
.ps-progress-label strong { color: #fff; font-size: 14px; font-weight: 800; }
.ps-progress-bar {
  height: 8px; background: rgba(255,255,255,0.08);
  border-radius: 999px; overflow: hidden;
}
.ps-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #FFFFFF, #B0B4BC);
  border-radius: 999px;
  transition: width 0.3s;
  box-shadow: 0 0 12px rgba(129,140,255,0.5);
}
.ps-progress-est {
  margin-top: 8px; font-size: 11px; color: var(--text-secondary);
}
.ps-progress-est strong { color: var(--text-primary); font-weight: 800; }

/* Sections */
.ps-section { margin-bottom: 14px; }
.ps-section-head {
  font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--text-primary); font-weight: 800;
  padding: 0 4px 6px;
  border-bottom: 1px solid rgba(129,140,255,0.2);
  margin-bottom: 6px;
}

/* Tables */
.ps-table {
  width: 100%; border-collapse: collapse;
  font-size: 12px;
}
.ps-table td {
  padding: 7px 8px;
  border-bottom: 1px dashed rgba(255,255,255,0.05);
  color: var(--text-secondary);
}
.ps-table td:last-child, .ps-table .num { text-align: right; font-variant-numeric: tabular-nums; color: #fff; font-weight: 600; }
.ps-table .ps-pro {
  font-size: 10px; color: var(--text-muted); font-style: italic;
}
.ps-row-gross td {
  border-top: 1px solid var(--border-gold);
  border-bottom: 1px solid var(--border-gold);
  background: rgba(129,140,255,0.06);
  padding: 10px 8px;
}
.ps-row-gross strong { color: var(--text-primary) !important; font-size: 14px; }
.ps-row-totalded td {
  border-top: 1px solid rgba(239,68,68,0.3);
  background: rgba(239,68,68,0.04);
  padding: 10px 8px;
}
.ps-row-totalded strong { color: #fca5a5 !important; }

.ps-gig-head td {
  font-size: 9px; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--text-muted); font-weight: 800;
  padding-top: 12px; padding-bottom: 4px;
  border-bottom: 0;
}
.ps-gig-date { color: var(--text-muted) !important; font-size: 10px; }
.ps-gig-sub td {
  font-size: 11px; font-weight: 700;
  border-bottom: 0; border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 8px;
}
.ps-gig-sub td:last-child { color: var(--text-primary) !important; }

/* Net Pay box */
.ps-net-box {
  margin: 16px 0;
  padding: 18px 16px;
  background: linear-gradient(135deg, #FFFFFF, #B0B4BC, #FFFFFF);
  background-size: 200% 100%;
  border-radius: 16px;
  text-align: center;
  color: #1a1000;
  position: relative; overflow: hidden;
  box-shadow: 0 8px 28px rgba(129,140,255,0.35), inset 0 0 0 1px rgba(255,255,255,0.3);
  animation: psShimmer 3s ease-in-out infinite;
}
@keyframes psShimmer {
  0%,100% { background-position: 0% 50%; }
  50%     { background-position: 100% 50%; }
}
.ps-net-label {
  font-size: 10px; letter-spacing: 2px;
  font-weight: 800;
  opacity: 0.75;
}
.ps-net-amt {
  font-family: 'Playfair Display', serif;
  font-size: 36px; font-weight: 900;
  letter-spacing: -0.5px;
  line-height: 1.1;
  margin: 4px 0;
}
.ps-net-meta { font-size: 11px; font-weight: 700; opacity: 0.85; }

/* Shift log */
.ps-shift-scroll {
  max-height: 280px; overflow-y: auto;
  border: 1px solid var(--border-silver);
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
}
.ps-shift-table {
  width: 100%; border-collapse: collapse; font-size: 11px;
}
.ps-shift-table thead th {
  position: sticky; top: 0; z-index: 1;
  background: #14161e;
  color: var(--text-primary);
  font-size: 9px; letter-spacing: 0.8px; text-transform: uppercase;
  padding: 8px; text-align: left; font-weight: 800;
}
.ps-shift-table thead th.num { text-align: right; }
.ps-shift-table tbody td {
  padding: 7px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  color: var(--text-secondary);
}
.ps-shift-table tbody td.num { text-align: right; font-variant-numeric: tabular-nums; color: #fff; font-weight: 600; }
.ps-shift-table tbody tr:hover td { background: rgba(129,140,255,0.04); }
.ps-shift-st {
  display: inline-block;
  background: rgba(34,197,94,0.18); color: #4ade80;
  padding: 1px 6px; border-radius: 999px;
  font-size: 10px; font-weight: 800;
}
.ps-shift-table tfoot td {
  padding: 9px 8px;
  background: rgba(129,140,255,0.06);
  border-top: 1px solid var(--border-gold);
  color: var(--text-primary);
}

/* Actions grid */
.ps-actions-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin-top: 14px;
}
.ps-actions-grid .btn-gold,
.ps-actions-grid .btn-outline {
  font-size: 12px; padding: 10px 12px;
}

/* ════════════════════════════════════════════════════
   OPERATIONS OASIS — restructured sections
   ════════════════════════════════════════════════════ */

/* Shift Manager + In-Charges */
.ops-mgr-card {
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(129,140,255,0.16), rgba(255,255,255,0.02));
  border: 1px solid var(--text-primary);
  border-left: 3px solid var(--text-primary);
  border-radius: 14px;
  margin-bottom: 12px;
  box-shadow: 0 0 18px rgba(129,140,255,0.15);
}
.ops-mgr-eyebrow {
  font-size: 9px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--text-primary); font-weight: 800; margin-bottom: 6px;
}
.ops-mgr-row { display: flex; align-items: center; gap: 12px; }
.ops-mgr-photo {
  width: 48px; height: 48px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--text-primary);
  box-shadow: 0 0 12px rgba(129,140,255,0.4);
}
.ops-mgr-info { flex: 1; min-width: 0; }
.ops-mgr-name {
  font-family: 'Playfair Display', serif;
  font-size: 17px; font-weight: 700; color: #fff;
}
.ops-mgr-role { font-size: 11px; color: var(--text-primary); }
.ops-call-btn, .ops-ic-call {
  background: rgba(34,197,94,0.18);
  color: #4ade80;
  border: 1px solid rgba(34,197,94,0.4);
  border-radius: 50%;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.15s;
}
.ops-call-btn:hover, .ops-ic-call:hover {
  background: rgba(34,197,94,0.3);
  transform: scale(1.08);
}
.ops-ic-call { width: 30px; height: 30px; margin-top: 8px; }

.ops-incharge-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin-bottom: 18px;
}
.ops-incharge-card {
  position: relative;
  padding: 12px 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-silver);
  border-radius: 14px;
  text-align: center;
  transition: transform 0.15s, border-color 0.15s;
}
.ops-incharge-card:hover { border-color: var(--border-gold); transform: translateY(-1px); }
.ops-ic-pulse {
  position: absolute; top: 6px; right: 6px;
  font-size: 7px; padding: 2px 5px; border-radius: 999px;
  background: #FFFFFF; color: #1a1000; font-weight: 800;
  letter-spacing: 0.3px;
  animation: opsIcPulse 2s ease-in-out infinite;
}
@keyframes opsIcPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(129,140,255,0.5); }
  50%     { box-shadow: 0 0 0 6px rgba(129,140,255,0); }
}
.ops-ic-photo {
  width: 44px; height: 44px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--text-primary);
  margin: 4px auto 6px;
  display: block;
}
.ops-ic-icon { font-size: 16px; margin-bottom: 2px; }
.ops-ic-label {
  font-size: 8px; letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--text-muted); font-weight: 800; margin-bottom: 4px;
}
.ops-ic-name { font-size: 11px; font-weight: 800; color: #fff; line-height: 1.2; }
.ops-ic-role { font-size: 10px; color: var(--text-primary); margin-top: 1px; }

/* Live Menu — quick actions */
.oms-card {
  position: relative;
  padding: 12px 14px; margin-bottom: 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-silver);
  border-radius: 12px;
  transition: border-color 0.15s;
}
.oms-card.status-push       { border-color: rgba(248,113,113,0.45); background: linear-gradient(90deg, rgba(248,113,113,0.08), rgba(255,255,255,0.02)); }
.oms-card.status-eightysix  { border-color: rgba(120,120,120,0.4); opacity: 0.85; }
.oms-card.status-eightyfive { border-color: rgba(52,211,153,0.4); }
.oms-card.status-low        { border-color: rgba(251,146,60,0.5); background: linear-gradient(90deg, rgba(251,146,60,0.06), rgba(255,255,255,0.02)); }

.oms-row1 { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.oms-status-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.oms-status-dot.oms-push       { background: #f87171; box-shadow: 0 0 8px #f87171; }
.oms-status-dot.oms-available  { background: #34d399; }
.oms-status-dot.oms-86         { background: #6b7280; }
.oms-status-dot.oms-85         { background: #34d399; box-shadow: 0 0 8px #34d399; }
.oms-status-dot.oms-low        { background: #fb923c; box-shadow: 0 0 8px #fb923c; animation: opsIcPulse 1.6s ease-in-out infinite; }

.oms-info { flex: 1; min-width: 0; }
.oms-name { display: block; font-size: 13px; font-weight: 800; color: #fff; }
.oms-cat  { display: block; font-size: 10px; color: var(--text-muted); margin-top: 1px; }
.oms-tag {
  font-size: 11px; padding: 4px 10px; border-radius: 999px;
  font-weight: 800; letter-spacing: 0.3px;
}
.oms-tag.oms-push       { background: #f87171; color: #2a0a0a; }
.oms-tag.oms-available  { background: rgba(52,211,153,0.18); color: #4ade80; }
.oms-tag.oms-86         { background: rgba(120,120,120,0.25); color: #d4d4d4; }
.oms-tag.oms-85         { background: rgba(52,211,153,0.18); color: #4ade80; }
.oms-tag.oms-low        { background: #fb923c; color: #2a1505; }

/* MENU-UX-1 — dense list rows · collapsible category groups · live search */
.oms-search { margin: 0 0 8px; padding: 8px 12px; font-size: 12.5px; }
.oms-group { margin-bottom: 2px; }
.oms-group-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 2px 6px; background: none; border: none; cursor: pointer; font-family: inherit; font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase; color: #9aa0a8; font-weight: 700; }
.oms-group-count { color: #6b7280; font-weight: 600; letter-spacing: 0; }
.oms-chev { margin-left: auto; color: #6b7280; font-size: 14px; line-height: 1; transition: transform 0.15s; }
.oms-chev.is-open { transform: rotate(90deg); }
.oms-row { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; margin-bottom: 4px; background: rgba(255,255,255,0.03); border: 1px solid var(--border-silver); border-radius: 10px; cursor: pointer; font-family: inherit; text-align: left; }
.oms-row .oms-status-dot { width: 8px; height: 8px; }
.oms-row-nm { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 700; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oms-row-attr { display: inline-flex; align-items: center; gap: 4px; max-width: 50%; font-size: 10px; color: #9aa0a8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0; }
.oms-row-attr .oms-attr-av { width: 13px; height: 13px; }
.oms-row-go { color: #6b7280; font-size: 14px; flex-shrink: 0; }
.oms-searching .oms-group-body { display: block !important; }

/* OPS-25 — re-post chip (PG-SWIPE-1 removed the collapsible day headers —
   one day on screen via the shared .px-day-pager) */
.oms-repost { flex-shrink: 0; font-size: 10.5px; font-weight: 700; color: #9aa0a8; border: 1px solid var(--btn-hairline); border-radius: 999px; padding: 2px 9px; }

/* PG-SWIPE-1 — shared day pager (Playground sections + Ops menu) + loading hairline */
.px-day-pager { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 2px 0 12px; }
.px-day-chev { width: 30px; height: 30px; flex-shrink: 0; border-radius: 999px; border: 1px solid var(--btn-hairline); background: transparent; color: var(--text-secondary); font-size: 16px; line-height: 1; cursor: pointer; font-family: inherit; }
.px-day-lbl { font-size: 13px; font-weight: 600; color: var(--text-primary); letter-spacing: 0.2px; text-align: center; min-width: 0; }
.px-day-today { color: #E8C879; }
.px-day-hairline { height: 2px; margin: 10px 0; border-radius: 1px; background: rgba(232,200,121,0.15); overflow: hidden; position: relative; }
.px-day-hairline::after { content: ''; position: absolute; left: -40%; top: 0; bottom: 0; width: 40%; background: rgba(232,200,121,0.6); border-radius: 1px; animation: pxDaySlide 1s ease-in-out infinite; }
@keyframes pxDaySlide { to { left: 100%; } }

.oms-quick-actions {
  display: flex; flex-wrap: wrap; gap: 5px;
  padding-top: 8px; border-top: 1px dashed rgba(255,255,255,0.06);
}
.oms-badge {
  font-size: 10px; padding: 4px 9px; border-radius: 999px;
  background: rgba(255,255,255,0.04); color: var(--text-muted);
  border: 1px solid var(--border-silver);
  cursor: pointer; font-family: inherit; font-weight: 700;
  transition: all 0.15s;
}
.oms-badge:hover { background: rgba(255,255,255,0.08); color: #fff; transform: translateY(-1px); }
.oms-badge.is-active { background: #FFFFFF; color: #1a1000; border-color: var(--text-primary); box-shadow: 0 2px 8px rgba(129,140,255,0.35); }

/* Add Item modal status grid */
.omi-status-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.omi-status {
  padding: 10px; border-radius: 10px; cursor: pointer;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-silver);
  font-family: inherit; font-size: 12px; font-weight: 700;
  color: var(--text-secondary);
  transition: all 0.15s;
}
.omi-status:hover { background: rgba(255,255,255,0.08); color: #fff; }
.omi-status.is-selected { background: #FFFFFF; color: #1a1000; border-color: var(--text-primary); }

/* Memo / announcement cards */
.ops-memo-card {
  padding: 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-silver);
  border-radius: 14px;
  margin-bottom: 10px;
}
.ops-memo-card.priority-urgent { border-left: 3px solid #f87171; background: linear-gradient(90deg, rgba(248,113,113,0.08), rgba(255,255,255,0.02)); }
.ops-memo-card.priority-high   { border-left: 3px solid #fb923c; }
.ops-memo-card.priority-normal { border-left: 3px solid var(--text-primary); }
.ops-memo-card.priority-low    { border-left: 3px solid rgba(255,255,255,0.15); }

.ops-memo-top {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 8px;
}
.ops-memo-cat {
  font-size: 10px; padding: 3px 9px; border-radius: 999px;
  background: rgba(129,140,255,0.14); color: var(--text-primary);
  border: 1px solid var(--border-gold); font-weight: 800;
}
.ops-memo-priority {
  font-size: 9px; padding: 2px 8px; border-radius: 999px;
  font-weight: 800; letter-spacing: 0.4px;
}
.ops-memo-priority.p-urgent { background: rgba(248,113,113,0.2); color: #fca5a5; }
.ops-memo-priority.p-high   { background: rgba(251,146,60,0.2); color: #fdba74; }
.ops-memo-priority.p-normal { background: rgba(255,255,255,0.06); color: var(--text-secondary); }
.ops-memo-priority.p-low    { background: rgba(120,120,120,0.18); color: #999; }
.ops-memo-aud {
  font-size: 10px; color: var(--text-muted);
  margin-left: auto;
}
.ops-memo-title {
  font-family: 'Playfair Display', serif;
  font-size: 14px; font-weight: 700; color: #fff;
  margin-bottom: 4px;
}
.ops-memo-body {
  font-size: 12px; color: var(--text-secondary); line-height: 1.5;
  margin-bottom: 12px;
}
.ops-memo-footer {
  display: flex; flex-direction: column; gap: 8px;
  padding-top: 10px;
  border-top: 1px dashed rgba(255,255,255,0.06);
}
.ops-seen-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ops-seen-count { font-size: 11px; color: var(--text-primary); font-weight: 700; }
.ops-seen-stack { display: inline-flex; align-items: center; }
.ops-seen-av {
  width: 22px; height: 22px; border-radius: 50%; object-fit: cover;
  border: 2px solid #0b0d12;
  margin-left: -6px;
}
.ops-seen-av:first-child { margin-left: 0; }
.ops-seen-more {
  font-size: 9px; padding: 3px 6px; border-radius: 999px;
  background: rgba(255,255,255,0.08); color: var(--text-muted);
  font-weight: 700; margin-left: 2px;
}
.ops-seen-link {
  background: transparent; border: 0;
  color: var(--text-primary); cursor: pointer; font-family: inherit;
  font-size: 10px; text-decoration: underline;
  margin-left: auto;
}
.ops-memo-actions { display: flex; gap: 6px; }
.ops-memo-mark {
  flex: 1; padding: 6px 10px;
  background: rgba(34,197,94,0.16); color: #86efac;
  border: 1px solid rgba(34,197,94,0.4);
  border-radius: 8px; cursor: pointer;
  font-family: inherit; font-size: 11px; font-weight: 800;
}
.ops-memo-mark:hover { background: rgba(34,197,94,0.3); }
.ops-icon-btn {
  width: 30px; height: 30px; border-radius: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-silver);
  color: var(--text-muted); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.ops-icon-btn:hover { background: rgba(255,255,255,0.08); color: #fff; }

.ops-empty {
  text-align: center; padding: 16px; font-size: 12px;
  color: var(--text-muted); font-style: italic;
  background: rgba(255,255,255,0.02);
  border: 1px dashed var(--border-silver); border-radius: 12px;
}

/* Seen-by full list */
.ops-seen-sub { font-size: 11px; color: var(--text-muted); margin-bottom: 12px; }
.ops-seen-fulllist {
  max-height: 320px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 12px;
}
.ops-seen-fullrow {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-silver);
  border-radius: 10px;
  font-size: 12px;
}
.ops-seen-fullrow img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 1.5px solid var(--border-gold); }
.ops-seen-fullrow strong { display: block; color: #fff; font-weight: 700; }
.ops-seen-fullrow span { font-size: 10px; color: var(--text-muted); }
.ops-seen-fullrow em { margin-left: auto; font-size: 10px; color: var(--text-primary); font-style: normal; font-weight: 700; }

/* Generic ops modal */
.ops-modal {
  position: fixed; inset: 0; z-index: 9500;
  background: rgba(5,7,12,0.78); backdrop-filter: blur(8px);
  display: none; align-items: center; justify-content: center;
  padding: 20px;
}
.ops-modal.show { display: flex; animation: fadeIn 0.18s ease both; }
.ops-modal-card {
  position: relative;
  width: 100%; max-width: 420px; max-height: 90vh; overflow-y: auto;
  background: linear-gradient(180deg, #14161e, #0b0d12);
  border: 1px solid var(--text-primary);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.55), 0 0 24px rgba(129,140,255,0.18);
  animation: rsModalRise 0.25s cubic-bezier(0.34, 1.2, 0.64, 1);
}
.ops-modal-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: 18px; font-weight: 700; color: #fff;
  padding-right: 28px; margin-bottom: 4px;
}
.ops-modal-x {
  position: absolute; top: 10px; right: 10px;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 50%;
  color: #B0B4BC;
  font-size: 18px; line-height: 1;
  cursor: pointer;
  padding: 0;
  z-index: 50;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.2s ease;
}
.ops-modal-x:hover {
  background: #B0B4BC;
  color: #0a0a0a;
  border-color: #B0B4BC;
  transform: rotate(90deg);
}
.ops-form { margin-top: 14px; }
.ops-form .form-group { margin-bottom: 12px; }
.ops-form-actions { display: flex; gap: 8px; margin-top: 12px; }
/* BTN-2 — modal footer bars everywhere: one calm scale (the full-size
   .btn-outline 15px/24px pills read wide + noisy inside sheets). */
.ops-form-actions .btn-gold,
.ops-form-actions .btn-outline { padding: 11px 16px; font-size: 14px; }

/* Floor Plan */
.ops-floor-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.ops-fp-section {
  position: relative;
  padding: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-left: 3px solid var(--sec-color, var(--text-primary));
  border-radius: 12px;
  cursor: pointer; text-align: left; font-family: inherit;
  display: flex; flex-direction: column; gap: 8px;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.ops-fp-section:hover {
  transform: translateY(-1px);
  border-color: var(--sec-color);
  box-shadow: 0 4px 14px rgba(0,0,0,0.3);
}
.ops-fp-head { display: flex; align-items: center; gap: 8px; }
.ops-fp-letter {
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--sec-color);
  color: #1a1000; font-weight: 900;
  font-family: 'Playfair Display', serif;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
}
.ops-fp-info { flex: 1; min-width: 0; }
.ops-fp-name { font-size: 12px; font-weight: 800; color: #fff; }
.ops-fp-tables { font-size: 10px; color: var(--text-muted); }
.ops-fp-time {
  font-size: 9px; color: var(--text-primary);
  background: rgba(129,140,255,0.1);
  padding: 2px 6px; border-radius: 6px;
  font-weight: 700;
}
.ops-fp-slot {
  display: flex; align-items: center; gap: 8px;
  padding: 6px;
  background: rgba(255,255,255,0.02);
  border-radius: 8px;
}
.ops-fp-slot img {
  width: 28px; height: 28px; border-radius: 50%; object-fit: cover;
  border: 1.5px solid var(--sec-color);
}
.ops-fp-slot strong { display: block; font-size: 10px; color: #fff; font-weight: 700; line-height: 1.2; }
.ops-fp-slot span { display: block; font-size: 9px; color: var(--text-muted); }
.ops-fp-empty {
  border: 1px dashed rgba(255,255,255,0.15);
  background: transparent;
}
.ops-fp-empty-ico {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(129,140,255,0.1);
  color: var(--text-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800;
}
.ops-fp-actions { display: flex; justify-content: flex-end; }
.ops-fp-swap {
  font-size: 9px; color: var(--text-primary);
  letter-spacing: 0.5px; font-weight: 700;
  padding: 2px 7px; border-radius: 999px;
  background: rgba(129,140,255,0.1);
}

/* Birthdays divider at bottom */
.ops-bday-divider {
  margin: 22px 0 12px;
  text-align: center;
  font-family: 'Playfair Display', serif;
  font-size: 14px; font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 1px;
  position: relative;
}
.ops-bday-divider::before, .ops-bday-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 25%; height: 1px;
  background: linear-gradient(90deg, transparent, #FFFFFF, transparent);
}
.ops-bday-divider::before { left: 8%; }
.ops-bday-divider::after  { right: 8%; }

/* ════════════════════════════════════════════════════
   WHITE LABEL — export buttons + print fallback
   ════════════════════════════════════════════════════ */
.wl-export-row {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 0 4px; margin: 8px 0 14px;
}
.wl-export-row .btn-gold,
.wl-export-row .btn-outline {
  font-size: 11px; padding: 7px 12px;
}

/* Defensive print fallback — when the user prints the live app
   (Ctrl+P) instead of using a Download/Print button, hide the
   shell so they at least don't get a garbled screenshot. The
   branded popup window remains the proper export path. */
@media print {
  body > *:not(#payslipDoc):not(#schedDoc):not(#cvDoc):not(#docPreviewOverlay):not(.static-staff-overlay) {
    /* Suppressed in branded popup mode by the popup's own CSS. */
  }
  .wl-no-print, .top-bar, .bottom-nav, .splash, .nav-item, .back-to-hq,
  .hr-main-tabs, .rs-dept-tabs, .rs-week-bar .rs-nav,
  .ops-modal, .lp-reject-modal, .lp-chip-modal,
  #leavePendingWrap .lp-pending-actions {
    display: none !important;
  }
  /* Direct app print: simplify */
  body { background: #fff !important; color: #111 !important; }
  .screen { display: block !important; }
  .phone-frame, .app-wrapper { background: #fff !important; height: auto !important; max-width: 100% !important; border: 0 !important; box-shadow: none !important; overflow: visible !important; }
  /* Always inject a "Powered by Tribeacon" footer on direct print */
  body::after {
    content: 'Powered by Tribeacon HR Hub';
    display: block;
    text-align: center;
    margin-top: 14mm;
    padding-top: 6mm;
    border-top: 1px solid #C9A050;
    font-size: 9px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #C9A050;
    font-weight: 800;
  }
}

/* ════════════════════════════════════════════════════
   OPS REFINEMENTS — read-only menu, editable floor plan,
   memo detail popup
   ════════════════════════════════════════════════════ */

/* Read-only hint */
.ops-readonly-hint {
  font-size: 11px; color: var(--text-muted);
  background: rgba(255,255,255,0.03);
  border: 1px dashed var(--border-silver);
  border-left: 2px solid var(--text-primary);
  border-radius: 8px;
  padding: 6px 10px; margin: 6px 0 10px;
  font-style: italic;
}
.ops-readonly-hint strong { color: var(--text-primary); font-style: normal; }

/* Read-only menu cards */
.oms-card-readonly {
  display: block; width: 100%;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-silver);
  border-radius: 12px;
  padding: 12px 14px; margin-bottom: 8px;
  text-align: left; cursor: pointer;
  font-family: inherit; color: inherit;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.oms-card-readonly:hover {
  transform: translateY(-1px);
  border-color: var(--border-gold);
  box-shadow: 0 4px 14px rgba(0,0,0,0.3);
}
.oms-card-readonly.status-push        { border-color: rgba(248,113,113,0.45); background: linear-gradient(90deg, rgba(248,113,113,0.08), rgba(255,255,255,0.02)); }
.oms-card-readonly.status-eightysix   { border-color: rgba(120,120,120,0.4); opacity: 0.85; }
.oms-card-readonly.status-eightyfive  { border-color: rgba(52,211,153,0.4); }

.oms-meta {
  display: flex; align-items: center; gap: 6px;
  margin-top: 8px; padding-top: 6px;
  border-top: 1px dashed rgba(255,255,255,0.06);
  font-size: 10px; color: var(--text-muted);
}
.oms-author-photo {
  width: 18px; height: 18px; border-radius: 50%; object-fit: cover;
  border: 1px solid var(--border-gold);
}
.oms-meta-name { color: var(--text-primary); font-weight: 700; }
.oms-meta-sep { opacity: 0.5; }

/* Menu detail popup */
.omd-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-bottom: 12px; margin-bottom: 12px;
  border-bottom: 1px solid rgba(129,140,255,0.2);
}
.omd-head h3 { flex: 1; min-width: 0; padding: 0; margin: 0; font-size: 17px; }
.omd-cat-chip {
  font-size: 9px; padding: 3px 8px; border-radius: 999px;
  background: rgba(129,140,255,0.15); color: var(--text-primary);
  border: 1px solid var(--border-gold); font-weight: 800;
  letter-spacing: 0.4px; text-transform: uppercase;
}
.omd-note-box {
  background: rgba(129,140,255,0.06);
  border: 1px solid rgba(129,140,255,0.2);
  border-radius: 10px; padding: 10px 12px; margin-bottom: 12px;
}
.omd-note-box span {
  display: block; font-size: 9px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--text-primary); font-weight: 800; margin-bottom: 4px;
}
.omd-note-box p { font-size: 12px; color: #fff; line-height: 1.4; }
.omd-author {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; margin-bottom: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-silver);
  border-radius: 10px;
  font-size: 11px;
}
.omd-author img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 1.5px solid var(--border-gold); }
.omd-author strong { display: block; color: #fff; font-weight: 700; font-size: 12px; }
.omd-author span { font-size: 10px; color: var(--text-muted); }
.omd-author em { margin-left: auto; font-size: 10px; color: var(--text-primary); font-style: normal; font-weight: 700; }

.omd-tl-head {
  font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--text-primary); font-weight: 800; margin: 6px 0 8px;
}
.omd-timeline {
  list-style: none; padding: 0; margin: 0 0 8px;
  display: flex; flex-direction: column; gap: 6px;
}
.omd-tl-item {
  padding: 8px 10px;
  background: rgba(255,255,255,0.02);
  border-left: 3px solid var(--text-primary);
  border-radius: 8px;
  font-size: 11px; color: var(--text-secondary);
  display: grid; grid-template-columns: auto auto 1fr; gap: 8px;
}
.omd-tl-item.oms-push        { border-left-color: #f87171; }
.omd-tl-item.oms-86          { border-left-color: #6b7280; opacity: 0.85; }
.omd-tl-item.oms-85          { border-left-color: #34d399; }
.omd-tl-time { color: var(--text-primary); font-weight: 800; font-variant-numeric: tabular-nums; }
.omd-tl-tag { color: #fff; font-weight: 700; font-size: 10px; }
.omd-tl-by { color: var(--text-muted); font-style: italic; text-align: right; }
.omd-tl-note { grid-column: 1 / -1; font-size: 10px; color: var(--text-secondary); margin-top: 2px; padding-top: 4px; border-top: 1px dashed rgba(255,255,255,0.06); }
.omd-tl-empty { padding: 8px 10px; font-size: 11px; color: var(--text-muted); font-style: italic; text-align: center; background: rgba(255,255,255,0.02); border-radius: 8px; }

/* Editable floor plan v2 */
.ops-floor-grid-v2 {
  display: flex; flex-direction: column; gap: 10px;
}
.ops-fp-card {
  padding: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-left: 3px solid var(--sec-color, var(--text-primary));
  border-radius: 14px;
}
.ops-fp-card.is-closed {
  opacity: 0.5;
  background: rgba(255,255,255,0.01);
  border-left-color: rgba(255,255,255,0.15);
}
.ops-fp-card-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
}
.ops-fp-letter {
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--sec-color);
  color: #1a1000; font-weight: 900;
  font-family: 'Playfair Display', serif;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; flex-shrink: 0;
}
.ops-fp-card.is-closed .ops-fp-letter { background: rgba(255,255,255,0.15); color: var(--text-muted); }
.ops-fp-name-input {
  flex: 1; min-width: 0;
  background: transparent;
  border: 0; border-bottom: 1px dashed rgba(255,255,255,0.1);
  color: #fff; font-size: 14px; font-weight: 800;
  font-family: 'Playfair Display', serif;
  padding: 4px 6px;
  outline: none;
}
.ops-fp-name-input:focus { border-bottom-color: var(--text-primary); background: rgba(129,140,255,0.06); }
.ops-fp-name-input:hover:not(:focus):not(:disabled) { border-bottom-color: rgba(129,140,255,0.5); }
.ops-fp-close-toggle {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-silver);
  color: var(--text-muted);
  width: 28px; height: 28px; border-radius: 8px;
  cursor: pointer; font-size: 14px;
}
.ops-fp-close-toggle:hover { background: rgba(255,255,255,0.08); color: #fff; }

.ops-fp-meta-row {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px;
  font-size: 10px; color: var(--text-muted);
}
.ops-fp-meta-row label { font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; }
.ops-fp-tables-input {
  width: 50px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-silver);
  color: #fff; font-weight: 700;
  border-radius: 6px; padding: 3px 6px; font-size: 11px;
  text-align: center; font-family: inherit;
}
.ops-fp-tables-input:focus { border-color: var(--text-primary); outline: none; }
.ops-fp-positions-count { margin-left: auto; color: var(--text-primary); font-weight: 700; }
.ops-fp-closed-tag {
  margin-left: auto;
  font-size: 9px; padding: 2px 8px; border-radius: 999px;
  background: rgba(239,68,68,0.18); color: #fca5a5;
  border: 1px solid rgba(239,68,68,0.4);
  font-weight: 800; letter-spacing: 0.4px;
}

.ops-fp-positions {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 8px;
}
.ops-fp-pos {
  display: grid; grid-template-columns: auto 1fr 1.4fr auto; gap: 6px;
  align-items: center;
  padding: 5px 8px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border-silver);
  border-radius: 8px;
}
.ops-fp-pos-photo {
  width: 26px; height: 26px; border-radius: 50%; object-fit: cover;
  border: 1.5px solid var(--sec-color);
}
.ops-fp-pos-empty {
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255,255,255,0.05);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); font-weight: 700;
  font-size: 12px;
  border: 1.5px dashed rgba(255,255,255,0.15);
}
.ops-fp-pos-role, .ops-fp-pos-staff {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-silver);
  color: #fff; font-size: 10px; font-weight: 600;
  border-radius: 6px; padding: 4px 6px;
  font-family: inherit;
  min-width: 0;
}
.ops-fp-pos-role:focus, .ops-fp-pos-staff:focus { border-color: var(--text-primary); outline: none; }
.ops-fp-pos-x {
  background: rgba(239,68,68,0.14);
  color: #fca5a5;
  border: 1px solid rgba(239,68,68,0.3);
  width: 24px; height: 24px; border-radius: 6px;
  font-size: 14px; cursor: pointer; font-weight: 700;
  line-height: 1;
}
.ops-fp-pos-x:hover { background: rgba(239,68,68,0.3); color: #fff; }

.ops-fp-actions {
  display: flex; justify-content: space-between; gap: 6px;
  padding-top: 8px;
  border-top: 1px dashed rgba(255,255,255,0.06);
}
.ops-fp-add-pos {
  background: rgba(129,140,255,0.12);
  color: var(--text-primary);
  border: 1px solid var(--border-gold);
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 10px; font-weight: 800;
  cursor: pointer; font-family: inherit;
  letter-spacing: 0.3px;
}
.ops-fp-add-pos:hover { background: var(--gold-glow-sm); }
.ops-fp-remove-section {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-silver);
  color: var(--text-muted);
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 11px; cursor: pointer;
}
.ops-fp-remove-section:hover:not(:disabled) { background: rgba(239,68,68,0.14); color: #fca5a5; border-color: rgba(239,68,68,0.4); }
.ops-fp-remove-section:disabled { opacity: 0.3; cursor: not-allowed; }

/* Memo card click hint + pin */
.ops-memo-card.is-clickable { cursor: pointer; position: relative; }
.ops-memo-card.is-clickable:hover { border-color: var(--border-gold); transform: translateY(-1px); transition: transform 0.15s, border-color 0.15s; }
.ops-memo-pin {
  position: absolute; top: 8px; right: 10px;
  font-size: 13px;
  filter: drop-shadow(0 0 4px rgba(129,140,255,0.6));
}
.ops-memo-footer-v2 {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding-top: 10px;
  border-top: 1px dashed rgba(255,255,255,0.06);
}
.ops-memo-tap-hint {
  font-size: 10px; color: var(--text-primary); font-weight: 700;
}

/* Memo detail popup */
.omd-modal { max-width: 480px; }
.omd-memo-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 8px;
}
.omd-title {
  font-family: 'Playfair Display', serif !important;
  font-size: 19px !important;
  margin-bottom: 6px !important;
}
.omd-body {
  font-size: 13px; color: var(--text-secondary); line-height: 1.55;
  padding-bottom: 12px;
  border-bottom: 1px dashed rgba(255,255,255,0.08);
  margin-bottom: 12px;
}
.omd-extras {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-silver);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 12px;
}
.omd-extra-row {
  display: grid; grid-template-columns: 110px 1fr; gap: 8px;
  padding: 5px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.05);
  font-size: 11px;
}
.omd-extra-row:last-child { border-bottom: 0; }
.omd-extra-row span {
  font-size: 9px; letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--text-primary); font-weight: 800;
  align-self: start; padding-top: 1px;
}
.omd-extra-row strong { color: #fff; font-weight: 600; line-height: 1.4; }

.omd-author-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; margin-bottom: 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-silver);
  border-radius: 10px;
  font-size: 11px;
}
.omd-author-row img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 1.5px solid var(--border-gold); }
.omd-author-row strong { display: block; color: #fff; font-weight: 700; font-size: 12px; }
.omd-author-row span { font-size: 10px; color: var(--text-muted); }

.omd-meta-row {
  display: flex; flex-wrap: wrap; gap: 12px;
  font-size: 10px; color: var(--text-secondary);
  padding: 8px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.06);
  margin-bottom: 12px;
}
.omd-meta-row b { color: var(--text-primary); font-weight: 700; }

.omd-seen-summary {
  font-size: 11px; color: var(--text-primary); font-weight: 700;
  margin-bottom: 8px;
  text-align: center;
}

.omd-collapsible {
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border-silver);
  border-radius: 10px;
  margin-bottom: 8px;
  padding: 0 10px;
}
.omd-collapsible summary {
  padding: 8px 0;
  font-size: 11px; font-weight: 800;
  color: #fff; cursor: pointer;
  letter-spacing: 0.4px;
  list-style: none;
}
.omd-collapsible summary::-webkit-details-marker { display: none; }
.omd-collapsible summary::before {
  content: '▶';
  color: var(--text-primary); margin-right: 6px;
  font-size: 8px; transition: transform 0.15s;
  display: inline-block;
}
.omd-collapsible[open] summary::before { transform: rotate(90deg); }
.omd-list {
  display: flex; flex-direction: column; gap: 4px;
  padding: 4px 0 10px;
  max-height: 220px; overflow-y: auto;
}
.omd-seen-row, .omd-unseen-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px;
  background: rgba(255,255,255,0.02);
  border-radius: 8px;
  font-size: 11px;
}
.omd-seen-row img, .omd-unseen-row img {
  width: 26px; height: 26px; border-radius: 50%; object-fit: cover;
  border: 1.5px solid var(--border-gold);
}
.omd-unseen-row { opacity: 0.7; }
.omd-unseen-row img { border-color: rgba(255,255,255,0.15); filter: grayscale(0.3); }
.omd-seen-row strong, .omd-unseen-row strong { display: block; color: #fff; font-weight: 700; }
.omd-seen-row span, .omd-unseen-row span { font-size: 9px; color: var(--text-muted); }
.omd-seen-row em, .omd-unseen-row em { margin-left: auto; font-size: 10px; color: var(--text-primary); font-style: normal; font-weight: 700; }

.omd-actions-row {
  display: flex; align-items: center; gap: 6px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(129,140,255,0.2);
}
.omd-actions-row .ops-memo-mark { flex: 1; }

/* ════════════════════════════════════════════════════
   ROSTER WIZARD — 4-step modal
   ════════════════════════════════════════════════════ */
.rwz-modal {
  position: fixed; inset: 0; z-index: 9700;
  background: rgba(5,7,12,0.85);
  backdrop-filter: blur(10px);
  display: none; align-items: stretch; justify-content: center;
  padding: 12px;
}
.rwz-modal.show { display: flex; animation: fadeIn 0.18s ease both; }
.rwz-card {
  position: relative;
  width: 100%; max-width: 720px;
  background: linear-gradient(180deg, #14161e, #0b0d12);
  border: 1px solid var(--text-primary);
  border-radius: 18px;
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 24px rgba(129,140,255,0.18);
  animation: rsModalRise 0.25s cubic-bezier(0.34, 1.2, 0.64, 1);
}
.rwz-head {
  position: relative;
  padding: 14px 16px 10px;
  background: linear-gradient(180deg, rgba(129,140,255,0.10), transparent);
  border-bottom: 1px solid rgba(129,140,255,0.2);
}
.rwz-x {
  position: absolute; top: 12px; right: 12px;
  background: transparent; border: 0; color: var(--text-muted);
  font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px;
}
.rwz-x:hover { color: #fff; }
.rwz-title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-right: 28px; }
.rwz-title {
  font-family: 'Playfair Display', serif;
  font-size: 18px; font-weight: 700; color: #fff;
  margin: 0;
}
.rwz-step-counter {
  font-size: 10px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--text-primary); font-weight: 800;
}

/* Progress indicator */
.rwz-progress {
  display: flex; align-items: center; gap: 4px;
  margin: 12px 0 6px;
}
.rwz-progress-step {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(255,255,255,0.1);
  color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800;
  transition: all 0.2s;
}
.rwz-progress-step.is-active {
  background: rgba(129,140,255,0.18);
  border-color: var(--text-primary);
  color: var(--text-primary);
}
.rwz-progress-step.is-current {
  background: #FFFFFF;
  color: #1a1000;
  box-shadow: 0 0 12px rgba(129,140,255,0.5);
  transform: scale(1.1);
}
.rwz-progress-line {
  flex: 1; height: 2px;
  background: rgba(255,255,255,0.08);
  border-radius: 999px;
}
.rwz-progress-labels {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  font-size: 9px; color: var(--text-muted);
  font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
  text-align: center;
}
.rwz-progress-labels .is-current { color: var(--text-primary); }

.rwz-body {
  flex: 1; overflow-y: auto;
  padding: 16px 18px 14px;
}

.rwz-section-title {
  font-family: 'Playfair Display', serif;
  font-size: 16px; font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 14px;
}

/* Step 1 */
.rwz-week-card {
  padding: 14px 16px; margin-bottom: 14px;
  background: linear-gradient(135deg, rgba(129,140,255,0.10), rgba(255,255,255,0.02));
  border: 1px solid var(--border-gold);
  border-left: 3px solid var(--text-primary);
  border-radius: 12px;
}
.rwz-week-label {
  font-size: 9px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--text-primary); font-weight: 800;
}
.rwz-week-range {
  font-family: 'Playfair Display', serif;
  font-size: 20px; font-weight: 700; color: #fff;
  margin: 4px 0 8px;
}
.rwz-week-pickers label {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; color: var(--text-muted);
}
.rwz-week-pickers .form-input { padding: 6px 10px; max-width: 180px; font-size: 12px; }

.rwz-check {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-silver);
  border-radius: 10px;
  cursor: pointer;
  margin-bottom: 8px;
  font-size: 12px;
}
.rwz-check:hover { border-color: var(--border-gold); background: rgba(129,140,255,0.04); }
.rwz-check input { accent-color: #FFFFFF; }
.rwz-check span { color: var(--text-secondary); }
.rwz-check span strong { color: #fff; }

.rwz-drafts {
  margin-top: 14px; padding: 10px 12px;
  background: rgba(255,255,255,0.02);
  border: 1px dashed var(--border-silver);
  border-radius: 10px;
}
.rwz-drafts > strong {
  display: block; margin-bottom: 6px;
  font-size: 10px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--text-primary); font-weight: 800;
}
.rwz-draft-chip {
  display: inline-block; margin: 3px;
  padding: 4px 10px;
  background: rgba(129,140,255,0.10);
  color: var(--text-primary);
  border: 1px solid var(--border-gold);
  border-radius: 999px;
  font-size: 11px; cursor: pointer;
  font-family: inherit;
}
.rwz-draft-chip:hover { background: var(--gold-glow-sm); }

/* Step 2 */
.rwz-staff-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px; padding: 0 4px;
  font-size: 11px; color: var(--text-muted);
}
.rwz-staff-count strong { color: var(--text-primary); font-size: 14px; font-weight: 800; }
.rwz-mini-btn {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-silver);
  color: var(--text-secondary);
  padding: 4px 10px; border-radius: 6px;
  font-family: inherit; font-size: 10px; font-weight: 700;
  cursor: pointer; margin-left: 4px;
}
.rwz-mini-btn:hover { background: var(--gold-glow-sm); color: var(--text-primary); border-color: var(--border-gold); }

.rwz-staff-list {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 380px; overflow-y: auto;
  padding-right: 4px;
}
.rwz-staff-row {
  display: grid; grid-template-columns: auto auto 1fr auto; gap: 10px;
  align-items: center;
  padding: 8px 12px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border-silver);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s;
}
.rwz-staff-row:hover { border-color: var(--border-gold); }
.rwz-staff-row.is-sel {
  background: rgba(129,140,255,0.08);
  border-color: var(--text-primary);
}
.rwz-staff-row input { accent-color: #FFFFFF; width: 16px; height: 16px; }
.rwz-staff-row img {
  width: 36px; height: 36px; border-radius: 50%; object-fit: cover;
  border: 1.5px solid var(--border-gold);
}
.rwz-staff-info strong { display: block; color: #fff; font-size: 12px; font-weight: 700; }
.rwz-staff-info span { font-size: 10px; color: var(--text-muted); }
.rwz-staff-meta { text-align: right; }
.rwz-staff-rate { display: block; font-size: 10px; color: var(--text-primary); font-weight: 700; }
.rwz-staff-status {
  display: inline-block; margin-top: 2px;
  font-size: 9px; padding: 2px 7px; border-radius: 999px;
  font-weight: 700;
}
.rwz-status-available { background: rgba(34,197,94,0.16); color: #4ade80; }
.rwz-status-leave     { background: rgba(251,146,60,0.16); color: #fdba74; }

/* Step 3 — grid */
.rwz-tools {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-bottom: 10px;
  font-size: 10px;
}
.rwz-tools-label { color: var(--text-muted); margin-right: 4px; }

.rwz-grid-scroll {
  overflow-x: auto;
  border: 1px solid var(--border-silver);
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
  margin-bottom: 10px;
}
.rwz-grid {
  width: 100%; min-width: 720px;
  border-collapse: collapse;
  font-size: 10px;
}
.rwz-grid thead th {
  position: sticky; top: 0; z-index: 1;
  background: #14161e; color: var(--text-primary);
  font-size: 9px; letter-spacing: 0.6px; text-transform: uppercase;
  padding: 7px 6px; text-align: center;
  border-bottom: 1.5px solid var(--text-primary);
  font-weight: 800; white-space: nowrap;
}
.rwz-grid thead th span { font-size: 10px; color: #fff; font-weight: 600; }
.rwz-grid thead th.rwz-stk, .rwz-grid tbody td.rwz-stk, .rwz-grid tfoot td.rwz-stk {
  position: sticky; left: 0; z-index: 2;
  background: #14161e;
  text-align: left;
  min-width: 130px;
  border-right: 1px solid rgba(255,255,255,0.06);
}
.rwz-grid tbody td {
  padding: 4px 5px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  vertical-align: middle;
}
.rwz-grid tbody td.num { text-align: right; padding-right: 8px; color: var(--text-primary); font-weight: 800; }
.rwz-row-staff {
  display: flex; align-items: center; gap: 8px;
  padding: 4px;
}
.rwz-row-staff img {
  width: 30px; height: 30px; border-radius: 50%; object-fit: cover;
  border: 1.5px solid var(--border-gold);
  flex-shrink: 0;
}
.rwz-row-staff span { color: #fff; font-size: 11px; font-weight: 700; line-height: 1.2; }
.rwz-row-staff em { color: var(--text-muted); font-size: 9px; font-style: normal; font-weight: 500; }

.rwz-cell-sel {
  width: 100%; min-width: 60px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-silver);
  color: #fff; font-size: 10px;
  border-radius: 5px; padding: 3px 4px;
  font-family: inherit; font-weight: 700;
  cursor: pointer;
}
.rwz-cell-sel:focus { outline: none; border-color: var(--text-primary); }
.rwz-shift-cell { font-size: 9px; text-align: center; }
.rwz-shift-cell.rs-shift-am    { background: #dbeafe; color: #1e3a8a; border-color: #93c5fd; }
.rwz-shift-cell.rs-shift-pm    { background: #fef3c7; color: #78350f; border-color: #fcd34d; }
.rwz-shift-cell.rs-shift-nt    { background: #ede9fe; color: #4c1d95; border-color: #c4b5fd; }
.rwz-shift-cell.rs-shift-split { background: #fce7f3; color: #831843; border-color: #f9a8d4; }
.rwz-shift-cell.rs-shift-cust  { background: #fed7aa; color: #7c2d12; border-color: #fdba74; }
.rwz-shift-cell.rs-shift-leave { background: #d1fae5; color: #065f46; border-color: #6ee7b7; }
.rwz-shift-cell.rs-shift-off   { background: rgba(255,255,255,0.04); color: var(--text-muted); }

.rwz-stat {
  display: inline-block;
  font-size: 10px; padding: 2px 7px; border-radius: 999px;
  font-weight: 800; letter-spacing: 0.3px;
}
.rwz-stat-ok   { background: rgba(34,197,94,0.16); color: #4ade80; }
.rwz-stat-low  { background: rgba(251,146,60,0.16); color: #fdba74; }
.rwz-stat-over { background: rgba(239,68,68,0.18);  color: #fca5a5; }

.rwz-summary td {
  background: rgba(129,140,255,0.06);
  border-top: 2px solid var(--text-primary);
  padding: 8px 6px;
  font-size: 11px; color: var(--text-primary);
}

.rwz-warnings { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.rwz-warn {
  background: rgba(251,146,60,0.10);
  border: 1px solid rgba(251,146,60,0.4);
  border-left: 3px solid #fb923c;
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 11px; color: #fdba74;
}
.rwz-warn strong { color: #fff; font-weight: 700; }

/* Step 4 — review */
.rwz-review-meta {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-bottom: 12px;
}
.rwz-review-meta > div {
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-silver);
  border-radius: 10px;
}
.rwz-review-meta span { display: block; font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-primary); font-weight: 800; }
.rwz-review-meta strong { display: block; color: #fff; font-weight: 700; margin-top: 3px; font-size: 12px; }

.rwz-review-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin-bottom: 14px;
}
.rwz-stat-card {
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-silver);
  border-radius: 10px;
  text-align: center;
}
.rwz-stat-card.primary {
  background: linear-gradient(135deg, rgba(129,140,255,0.16), rgba(129,140,255,0.04));
  border-color: var(--text-primary);
}
.rwz-stat-card span { display: block; font-size: 9px; letter-spacing: 0.8px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; }
.rwz-stat-card strong {
  display: block; font-family: 'Playfair Display', serif;
  font-size: 18px; font-weight: 800; color: #fff;
  margin-top: 4px;
}
.rwz-stat-card.primary strong { color: var(--text-primary); font-size: 20px; }

.rwz-grid-preview tbody td { padding: 5px; }
.rwz-prev-cell {
  display: inline-block;
  font-size: 9px; padding: 3px 6px; border-radius: 4px;
  font-weight: 800; letter-spacing: 0.2px;
}
.rwz-prev-cell.rs-shift-am    { background: #dbeafe; color: #1e3a8a; }
.rwz-prev-cell.rs-shift-pm    { background: #fef3c7; color: #78350f; }
.rwz-prev-cell.rs-shift-nt    { background: #ede9fe; color: #4c1d95; }
.rwz-prev-cell.rs-shift-split { background: #fce7f3; color: #831843; }
.rwz-prev-cell.rs-shift-cust  { background: #fed7aa; color: #7c2d12; }
.rwz-prev-cell.rs-shift-leave { background: #d1fae5; color: #065f46; }
.rwz-prev-cell.rs-shift-off   { background: rgba(255,255,255,0.06); color: var(--text-muted); }

/* Action bar */
.rwz-actions {
  display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid rgba(129,140,255,0.2);
}
.rwz-actions .btn-gold,
.rwz-actions .btn-outline {
  font-size: 12px; padding: 9px 16px;
}

/* ════════════════════════════════════════════════════
   PREMIUM AUTH — Google / Apple / Mobile
   ════════════════════════════════════════════════════ */
.pxauth-stack {
  display: flex; flex-direction: column; gap: 10px;
  margin: 10px 0 6px;
}
.pxauth-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%;
  padding: 12px 16px;
  border-radius: 12px;
  font-family: inherit; font-size: 13px; font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
  position: relative;
  letter-spacing: 0.2px;
}
.pxauth-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}
.pxauth-btn:disabled { opacity: 0.75; cursor: not-allowed; }
.pxauth-btn.is-loading {
  color: transparent !important;
  pointer-events: none;
}
.pxauth-btn.is-loading::after {
  content: '';
  position: absolute; top: 50%; left: 50%;
  width: 18px; height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: pxauthSpin 0.7s linear infinite;
}
@keyframes pxauthSpin { to { transform: rotate(360deg); } }

.pxauth-google {
  background: #fff; color: #1f1f1f;
  border: 1px solid #dadce0;
}
.pxauth-google:hover { background: #f8f9fa; color: #1f1f1f; }

.pxauth-apple {
  background: #000; color: #fff;
  border: 1px solid #000;
}
.pxauth-apple:hover { background: #1a1a1a; }

.pxauth-mobile {
  background: transparent; color: var(--text-primary);
  border: 1.5px solid var(--text-primary);
}
.pxauth-mobile:hover {
  background: rgba(129,140,255,0.10);
  box-shadow: 0 6px 18px rgba(129,140,255,0.2);
}

.pxauth-security {
  margin-top: 4px; padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-silver);
  border-radius: 10px;
  font-size: 10px; color: var(--text-muted);
  line-height: 1.6;
}
.pxauth-security div { display: flex; align-items: center; gap: 6px; }

.pxauth-coming-soon {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-top: 4px; padding: 8px 10px;
  background: rgba(129,140,255,0.06);
  border: 1px dashed var(--border-gold);
  border-radius: 10px;
  font-size: 10px;
}
.pxauth-cs-title { color: var(--text-primary); font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; margin-right: 4px; }
.pxauth-cs-pill {
  font-size: 9px; padding: 2px 7px; border-radius: 999px;
  background: rgba(129,140,255,0.14); color: var(--text-primary);
  border: 1px solid var(--border-gold); font-weight: 700;
  opacity: 0.75;
  position: relative;
}
.pxauth-cs-pill::after {
  content: 'SOON'; position: absolute; top: -4px; right: -6px;
  font-size: 7px; background: #FFFFFF; color: #1a1000;
  padding: 1px 4px; border-radius: 3px;
  letter-spacing: 0.4px;
}

/* Verified badges */
.pxauth-badges {
  display: none; flex-wrap: wrap; gap: 6px;
  margin: 10px 0;
  padding: 10px 12px;
  background: linear-gradient(135deg, rgba(129,140,255,0.10), rgba(34,197,94,0.06));
  border: 1px solid var(--border-gold);
  border-radius: 12px;
  animation: pxauthBadgeIn 0.35s ease-out both;
}
.pxauth-badges.is-shown { display: flex; }
@keyframes pxauthBadgeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.pxauth-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 700;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border-silver);
  color: var(--text-secondary);
}
.pxauth-badge-ok   { background: rgba(34,197,94,0.18); color: #4ade80; border-color: rgba(34,197,94,0.4); }
.pxauth-badge-gold { background: rgba(129,140,255,0.18); color: var(--text-primary); border-color: var(--border-gold); }

/* Mobile OTP modal */
.pxauth-modal {
  position: fixed; inset: 0; z-index: 9600;
  background: rgba(5,7,12,0.85);
  backdrop-filter: blur(10px);
  display: none; align-items: center; justify-content: center;
  padding: 20px;
}
.pxauth-modal.show { display: flex; animation: fadeIn 0.18s ease both; }
.pxauth-modal-card {
  position: relative;
  width: 100%; max-width: 380px;
  background: linear-gradient(180deg, #14161e, #0b0d12);
  border: 1px solid var(--text-primary);
  border-radius: 18px;
  padding: 26px 22px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.55), 0 0 24px rgba(129,140,255,0.18);
  animation: rsModalRise 0.25s cubic-bezier(0.34, 1.2, 0.64, 1);
  text-align: center;
}
.pxauth-modal-x {
  position: absolute; top: 12px; right: 12px;
  background: transparent; border: 0; color: var(--text-muted);
  font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px;
}
.pxauth-modal-x:hover { color: #fff; }

.pxauth-modal-head { margin-bottom: 16px; }
.pxauth-modal-icon { font-size: 36px; margin-bottom: 6px; }
.pxauth-modal-head h3 {
  font-family: 'Playfair Display', serif;
  font-size: 18px; font-weight: 700; color: #fff;
  margin-bottom: 4px;
}
.pxauth-modal-head p {
  font-size: 12px; color: var(--text-muted);
}
.pxauth-modal-head p strong { color: var(--text-primary); }
.pxauth-mobile-hint {
  margin-top: 8px !important;
  padding: 6px 10px;
  background: rgba(129,140,255,0.08);
  border: 1px dashed var(--border-gold);
  border-radius: 8px;
  font-size: 11px !important; color: var(--text-secondary) !important;
}
.pxauth-mobile-hint strong { color: var(--text-primary) !important; font-weight: 800; font-size: 13px; }

.pxauth-mobile-form .form-group { text-align: left; margin-bottom: 14px; }

.pxauth-otp-row {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px;
  margin-bottom: 14px;
}
.pxauth-otp-row.pxauth-otp-wrong { animation: pxauthShake 0.4s; }
@keyframes pxauthShake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}
.pxauth-otp-box {
  width: 100%; aspect-ratio: 1;
  background: rgba(255,255,255,0.04);
  border: 1.5px solid var(--border-silver);
  border-radius: 10px;
  color: #fff; font-size: 22px; font-weight: 800;
  font-family: 'Playfair Display', serif;
  text-align: center;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.pxauth-otp-box:focus {
  outline: none;
  border-color: var(--text-primary);
  background: rgba(129,140,255,0.08);
  box-shadow: 0 0 12px rgba(129,140,255,0.3);
  transform: scale(1.04);
}

.pxauth-resend {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  margin: 12px 0 8px;
  font-size: 11px;
}
.pxauth-resend-btn {
  background: transparent; border: 0; color: var(--text-primary);
  font-family: inherit; font-size: 11px; font-weight: 700;
  cursor: pointer; text-decoration: underline;
}
.pxauth-resend-btn:disabled { color: var(--text-muted); cursor: not-allowed; text-decoration: none; }
.pxauth-resend-timer { color: var(--text-muted); }

.pxauth-back-link {
  background: transparent; border: 0; color: var(--text-muted);
  font-family: inherit; font-size: 11px;
  cursor: pointer; text-decoration: underline;
  margin-top: 6px;
}
.pxauth-back-link:hover { color: #fff; }

.pxauth-modal-footnote {
  margin-top: 12px;
  font-size: 10px; color: var(--text-muted);
}

.pxauth-modal-success {
  padding: 32px 22px;
}
.pxauth-success-check {
  margin-bottom: 12px;
  animation: pxauthCheckPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes pxauthCheckPop {
  from { transform: scale(0.3); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.pxauth-modal-success h3 {
  font-family: 'Playfair Display', serif;
  font-size: 20px; font-weight: 800; color: #4ade80;
  margin-bottom: 6px;
}
.pxauth-modal-success p {
  font-size: 12px; color: var(--text-secondary);
}
.pxauth-modal-success p strong { color: var(--text-primary); }

/* ════════════════════════════════════════════════════
   HQ COMING SOON — Gamification + CuadrillaONE Coach
   ════════════════════════════════════════════════════ */
.hq-cs-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}
@media (max-width: 640px) {
  .hq-cs-row { grid-template-columns: 1fr; }
}

.hq-cs-card {
  position: relative;
  padding: 16px 14px 14px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(20,22,30,0.96), rgba(11,13,18,0.98));
  border: 1.5px solid var(--border-gold);
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  animation: hqCsPulse 4s ease-in-out infinite;
}
@keyframes hqCsPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(129,140,255,0); }
  50%     { box-shadow: 0 0 22px rgba(129,140,255,0.18); }
}
.hq-cs-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(0,0,0,0.45), 0 0 24px rgba(129,140,255,0.28);
}

/* Gradient borders — distinct per card */
.hq-cs-card::before {
  content: '';
  position: absolute; inset: 0;
  padding: 1.5px;
  border-radius: inherit;
  background: linear-gradient(135deg, #FFFFFF, var(--grad-2, #FFFFFF), #FFFFFF);
  background-size: 200% 200%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
  animation: hqCsShimmer 4s linear infinite;
}
@keyframes hqCsShimmer {
  0%,100% { background-position: 0% 50%; }
  50%     { background-position: 100% 50%; }
}
.hq-cs-game  { --grad-2: #f87171; }
.hq-cs-coach { --grad-2: #a78bfa; }

/* Lock icon */
.hq-cs-lock {
  position: absolute; top: 12px; right: 12px;
  font-size: 18px;
  filter: drop-shadow(0 0 6px rgba(129,140,255,0.45));
  z-index: 2;
}

.hq-cs-badges {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.hq-cs-badge {
  font-size: 9px; padding: 3px 9px; border-radius: 999px;
  font-weight: 800; letter-spacing: 0.8px;
}
.hq-cs-badge-soon {
  background: #FFFFFF; color: #1a1000;
  box-shadow: 0 0 10px rgba(129,140,255,0.45);
  animation: hqCsSoonPulse 1.8s ease-in-out infinite;
}
@keyframes hqCsSoonPulse {
  0%,100% { box-shadow: 0 0 10px rgba(129,140,255,0.45); }
  50%     { box-shadow: 0 0 18px rgba(129,140,255,0.85); }
}
.hq-cs-badge-live {
  background: rgba(248,113,113,0.18);
  color: #fca5a5;
  border: 1px solid rgba(248,113,113,0.5);
  animation: hqCsLivePulse 1.2s ease-in-out infinite;
}
@keyframes hqCsLivePulse {
  0%,100% { opacity: 1; }
  50%     { opacity: 0.55; }
}

.hq-cs-icon-row {
  text-align: center;
  margin: 10px 0 6px;
  /* subtle greyed-out feel */
  filter: grayscale(0.25);
  opacity: 0.92;
}
.hq-cs-icon-big {
  font-size: 46px;
  display: inline-block;
  filter: drop-shadow(0 6px 14px rgba(129,140,255,0.25));
}

.hq-cs-title {
  font-family: 'Playfair Display', serif;
  font-size: 20px; font-weight: 700;
  color: #fff;
  text-align: center;
  margin-bottom: 4px;
  background: linear-gradient(135deg, #FFFFFF, #fff, var(--text-primary));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hq-cs-tagline {
  text-align: center;
  font-size: 12px; color: var(--text-primary); font-weight: 700;
  letter-spacing: 0.3px;
  margin-bottom: 10px;
}
.hq-cs-desc {
  font-size: 11px; color: var(--text-secondary);
  line-height: 1.55;
  margin-bottom: 12px;
  padding: 0 2px;
}

.hq-cs-features {
  display: flex; flex-wrap: wrap; gap: 5px;
  padding: 8px; margin-bottom: 12px;
  background: rgba(255,255,255,0.02);
  border: 1px dashed var(--border-silver);
  border-radius: 10px;
  justify-content: center;
}
.hq-cs-feat {
  font-size: 10px; padding: 3px 8px;
  border-radius: 999px;
  background: rgba(129,140,255,0.08);
  color: var(--text-primary);
  border: 1px solid var(--border-gold);
  font-weight: 700;
  white-space: nowrap;
}

.hq-cs-progress {
  margin-bottom: 12px;
}
.hq-cs-progress-label {
  font-size: 9px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--text-muted); font-weight: 700;
  display: flex; justify-content: space-between;
  margin-bottom: 4px;
}
.hq-cs-progress-label strong { color: var(--text-primary); font-size: 11px; font-weight: 800; letter-spacing: 0; text-transform: none; }
.hq-cs-progress-bar {
  height: 6px;
  background: rgba(255,255,255,0.06);
  border-radius: 999px; overflow: hidden;
}
.hq-cs-progress-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.3s;
}
.hq-cs-progress-fill--game  { background: linear-gradient(90deg, #FFFFFF, #f87171); box-shadow: 0 0 10px rgba(248,113,113,0.4); }
.hq-cs-progress-fill--coach { background: linear-gradient(90deg, #FFFFFF, #a78bfa); box-shadow: 0 0 10px rgba(167,139,250,0.4); }

.hq-cs-btn {
  width: 100%;
  padding: 11px; border-radius: 12px;
  border: 0; cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 800;
  letter-spacing: 0.4px;
  transition: transform 0.15s, filter 0.15s, box-shadow 0.15s;
}
.hq-cs-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
}
.hq-cs-btn-game {
  background: linear-gradient(135deg, #FFFFFF, #f87171);
  color: #1a0a0a;
  box-shadow: 0 4px 14px rgba(248,113,113,0.3);
}
.hq-cs-btn-coach {
  background: linear-gradient(135deg, #FFFFFF, #a78bfa);
  color: #12081f;
  box-shadow: 0 4px 14px rgba(167,139,250,0.3);
}

.hq-cs-footnote {
  margin-top: 8px;
  text-align: center;
  font-size: 9px; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--text-muted); font-weight: 700;
}

/* ════════════════════════════════════════════════════
   MONETIZATION — Subscribe modal, feed ads, dashboard
   ════════════════════════════════════════════════════ */

/* Inline CTA card (strategic placements) */
.px-sub-cta-card {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; margin: 10px 0;
  background: linear-gradient(135deg, rgba(129,140,255,0.10), rgba(255,255,255,0.02));
  border: 1px solid var(--border-gold);
  border-left: 3px solid var(--text-primary);
  border-radius: 12px;
  transition: transform 0.15s, box-shadow 0.15s;
}
.px-sub-cta-card:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(129,140,255,0.2); }
.px-sub-cta-icon {
  font-size: 22px; flex-shrink: 0;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(129,140,255,0.14);
  border-radius: 50%;
  border: 1px solid var(--border-gold);
  color: #E8C879; /* ICON-1 — PX_FEATURE_GLYPHS svgs ink gold; emoji unaffected */
}
.px-sub-cta-body { flex: 1; min-width: 0; }
.px-sub-cta-body strong { display: block; color: #fff; font-size: 13px; font-weight: 800; }
.px-sub-cta-body span { font-size: 10px; color: var(--text-muted); }
.px-sub-cta-card .btn-gold { white-space: nowrap; flex-shrink: 0; }
/* Inert status variant — quiet hairline, no CTA lift/hover (not a button). */
.px-sub-status {
  background: rgba(255,255,255,0.03);
  border-color: var(--border-silver);
  border-left-color: var(--border-silver);
  cursor: default;
}
.px-sub-status:hover { transform: none; box-shadow: none; }
.px-sub-status .px-sub-cta-icon { background: rgba(255,255,255,0.05); border-color: var(--border-silver); }
.px-sub-active {
  background: rgba(34,197,94,0.18) !important;
  color: #4ade80 !important;
  border-color: rgba(34,197,94,0.4) !important;
  cursor: default !important;
}

/* Coming Soon card subscribe link */
.px-cs-sub-link {
  display: block; width: 100%;
  background: transparent; border: 0;
  color: var(--text-primary);
  font-size: 10px; font-weight: 700;
  padding: 8px 0 0;
  cursor: pointer; font-family: inherit;
  text-decoration: underline;
  margin-top: 6px;
}
.px-cs-sub-link:hover { color: var(--text-primary); }

/* Subscribe modal */
.px-sub-modal {
  position: fixed; inset: 0; z-index: 9800;
  background: rgba(5,7,12,0.88);
  backdrop-filter: blur(14px);
  display: none; align-items: stretch; justify-content: center;
  padding: 14px;
}
.px-sub-modal.show { display: flex; animation: fadeIn 0.2s ease both; }
.px-sub-card {
  position: relative;
  width: 100%; max-width: 440px;
  margin: auto;
  max-height: 92vh; overflow-y: auto;
  background: linear-gradient(180deg, #14161e 0%, #0b0d12 100%);
  border: 1.5px solid var(--text-primary);
  border-radius: 22px;
  padding: 24px 22px 20px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 0 40px rgba(129,140,255,0.22);
  animation: rsModalRise 0.3s cubic-bezier(0.34, 1.2, 0.64, 1);
}
.px-sub-x {
  position: absolute; top: 14px; right: 14px;
  background: transparent; border: 0; color: var(--text-muted);
  font-size: 24px; line-height: 1; cursor: pointer;
}
.px-sub-x:hover { color: #fff; }

.px-sub-head { text-align: center; margin-bottom: 16px; }
.px-sub-badge {
  display: inline-block;
  font-size: 9px; padding: 3px 11px; border-radius: 999px;
  background: linear-gradient(135deg, #FFFFFF, #B0B4BC);
  color: #1a1000; font-weight: 800; letter-spacing: 1px;
  margin-bottom: 8px;
  box-shadow: 0 0 14px rgba(129,140,255,0.5);
}
.px-sub-audience {
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--text-muted); font-weight: 700;
}
.px-sub-title {
  font-family: 'Playfair Display', serif;
  font-size: 24px; font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #FFFFFF, #fff, var(--text-primary));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 4px 0;
}
.px-sub-tagline {
  font-size: 12px; color: var(--text-secondary);
  margin-top: 4px;
}

.px-sub-price-block {
  text-align: center;
  padding: 14px 0;
  border-top: 1px solid rgba(129,140,255,0.2);
  border-bottom: 1px solid rgba(129,140,255,0.2);
  margin-bottom: 14px;
}
.px-sub-price {
  font-family: 'Playfair Display', serif;
  font-size: 36px; font-weight: 900;
  color: var(--text-primary);
  line-height: 1;
}
.px-sub-price-sub {
  font-size: 11px; color: var(--text-muted); margin-top: 4px;
}
.px-sub-trial {
  display: inline-block; margin-top: 8px;
  font-size: 11px; padding: 4px 10px; border-radius: 999px;
  background: rgba(34,197,94,0.18); color: #86efac;
  border: 1px solid rgba(34,197,94,0.4);
  font-weight: 700;
}

.px-sub-benefits {
  list-style: none; padding: 0; margin: 0 0 14px;
  display: flex; flex-direction: column; gap: 6px;
}
.px-sub-benefits li {
  padding: 8px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-silver);
  border-radius: 10px;
  font-size: 12px; color: var(--text-secondary);
}
.px-sub-benefits li::first-letter { color: #4ade80; }

.px-sub-testimonial {
  padding: 12px 14px; margin-bottom: 12px;
  background: rgba(129,140,255,0.06);
  border: 1px solid rgba(129,140,255,0.25);
  border-radius: 12px;
  text-align: center;
}
.px-sub-stars { color: var(--text-primary); font-size: 13px; margin-bottom: 4px; letter-spacing: 2px; }
.px-sub-testimonial p { font-size: 12px; color: #fff; font-style: italic; line-height: 1.4; }
.px-sub-testimonial span { display: block; margin-top: 6px; font-size: 10px; color: var(--text-muted); }

.px-sub-trust {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
  margin-bottom: 14px;
  font-size: 9px; color: var(--text-muted);
  font-weight: 700; letter-spacing: 0.3px;
}
.px-sub-trust span {
  background: rgba(255,255,255,0.04);
  padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--border-silver);
}

.px-sub-actions {
  display: flex; flex-direction: column; gap: 8px;
}
.px-sub-btn-demo, .px-sub-btn-pay {
  padding: 13px; border-radius: 12px;
  cursor: pointer; font-family: inherit;
  font-size: 13px; font-weight: 800;
  letter-spacing: 0.3px;
  transition: transform 0.15s, filter 0.15s, box-shadow 0.15s;
}
.px-sub-btn-demo {
  background: transparent;
  color: var(--text-primary);
  border: 1.5px solid var(--text-primary);
}
.px-sub-btn-demo:hover {
  background: rgba(129,140,255,0.1);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(129,140,255,0.2);
}
.px-sub-btn-pay {
  background: linear-gradient(135deg, #FFFFFF, #B0B4BC);
  color: #1a1000; border: 0;
  box-shadow: 0 4px 14px rgba(129,140,255,0.35);
}
.px-sub-btn-pay:hover { transform: translateY(-1px); filter: brightness(1.08); }

.px-sub-footnote {
  text-align: center; margin-top: 10px;
  font-size: 9px; color: var(--text-muted); letter-spacing: 0.6px;
}
.px-sub-footnote strong { color: var(--text-primary); }

/* Success state */
.px-sub-success { text-align: center; padding: 36px 26px; }
.px-sub-check { margin-bottom: 14px; animation: pxauthCheckPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
.px-sub-success h2 {
  font-family: 'Playfair Display', serif;
  font-size: 22px; font-weight: 800;
  color: #4ade80;
  margin-bottom: 8px;
}
.px-sub-success p { font-size: 13px; color: #fff; margin-bottom: 10px; }
.px-sub-success p strong { color: var(--text-primary); }
.px-sub-success-badge {
  display: inline-block; font-size: 10px;
  padding: 4px 12px; border-radius: 999px;
  background: linear-gradient(135deg, #FFFFFF, #B0B4BC);
  color: #1a1000; font-weight: 800; letter-spacing: 1px;
  box-shadow: 0 0 14px rgba(129,140,255,0.5);
  margin-bottom: 10px;
}
.px-sub-success-sub { font-size: 11px !important; color: var(--text-muted) !important; line-height: 1.45; }

/* News feed sponsored ads */
.feed-ad {
  position: relative;
  border: 1px solid var(--border-gold);
  background: linear-gradient(180deg, rgba(129,140,255,0.04), rgba(255,255,255,0.02));
}
.feed-ad-tag {
  position: absolute; top: 10px; right: 12px;
  font-size: 9px; padding: 3px 9px; border-radius: 999px;
  background: #FFFFFF; color: #1a1000;
  font-weight: 800; letter-spacing: 1px;
  z-index: 2;
}
.feed-ad-logo {
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  border: 1.5px solid;
  flex-shrink: 0;
}
.feed-ad-title {
  font-family: 'Playfair Display', serif;
  font-size: 15px; font-weight: 700; color: #fff;
  margin: 10px 0 4px;
}
.feed-ad-body {
  font-size: 12px; color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 10px;
}
.feed-ad-cta {
  width: 100%; padding: 10px; border-radius: 10px;
  border: 0; cursor: pointer; font-family: inherit;
  font-size: 12px; font-weight: 800; letter-spacing: 0.4px;
  margin-top: 8px;
}
.feed-ad-footer {
  text-align: center; margin-top: 8px;
  font-size: 9px; color: var(--text-muted);
  letter-spacing: 0.3px;
}

/* Revenue dashboard */
.px-rev-modal {
  position: fixed; inset: 0; z-index: 9800;
  background: rgba(5,7,12,0.88);
  backdrop-filter: blur(14px);
  display: none; align-items: stretch; justify-content: center;
  padding: 12px;
}
.px-rev-modal.show { display: flex; animation: fadeIn 0.2s ease both; }
.px-rev-card {
  position: relative;
  width: 100%; max-width: 560px; margin: auto;
  max-height: 94vh; overflow-y: auto;
  background: linear-gradient(180deg, #14161e, #0b0d12);
  border: 1.5px solid var(--text-primary);
  border-radius: 20px;
  padding: 22px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 0 40px rgba(129,140,255,0.22);
  animation: rsModalRise 0.3s cubic-bezier(0.34, 1.2, 0.64, 1);
}
.px-rev-x {
  position: absolute; top: 14px; right: 14px;
  background: transparent; border: 0; color: var(--text-muted);
  font-size: 24px; cursor: pointer; line-height: 1;
}
.px-rev-x:hover { color: #fff; }
.px-rev-head { text-align: center; margin-bottom: 16px; padding-right: 20px; }
.px-rev-eyebrow { font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-primary); font-weight: 800; }
.px-rev-head h2 {
  font-family: 'Playfair Display', serif;
  font-size: 22px; font-weight: 800;
  color: #fff; margin: 4px 0;
}
.px-rev-month { font-size: 11px; color: var(--text-muted); }

.px-rev-hero {
  text-align: center;
  padding: 16px; margin-bottom: 12px;
  background: linear-gradient(135deg, #FFFFFF, #B0B4BC);
  color: #1a1000;
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(129,140,255,0.3);
}
.px-rev-hero-label { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; font-weight: 800; opacity: 0.8; }
.px-rev-hero-amt {
  font-family: 'Playfair Display', serif;
  font-size: 36px; font-weight: 900;
  line-height: 1; margin: 6px 0;
}
.px-rev-hero-mom { font-size: 12px; font-weight: 800; }

.px-rev-metrics {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
  margin-bottom: 14px;
}
.px-rev-metrics > div {
  padding: 10px 6px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-silver);
  border-radius: 10px;
  text-align: center;
}
.px-rev-metrics span { display: block; font-size: 8px; letter-spacing: 0.6px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; }
.px-rev-metrics strong { display: block; font-family: 'Playfair Display', serif; font-size: 14px; color: #fff; margin-top: 3px; }

.px-rev-section {
  font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--text-primary); font-weight: 800;
  margin: 14px 0 8px;
}

.px-rev-streams { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.px-rev-stream {
  padding: 8px 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-silver);
  border-radius: 10px;
}
.px-rev-stream-head {
  display: grid; grid-template-columns: auto 1fr auto auto; gap: 8px;
  align-items: center;
  font-size: 11px;
  margin-bottom: 4px;
}
.px-rev-dot { width: 10px; height: 10px; border-radius: 3px; }
.px-rev-stream-label { color: #fff; font-weight: 700; }
.px-rev-stream-count { font-size: 9px; color: var(--text-muted); }
.px-rev-stream-amt { color: var(--text-primary); font-weight: 800; font-variant-numeric: tabular-nums; }
.px-rev-stream-bar {
  height: 5px; border-radius: 999px; overflow: hidden;
  background: rgba(255,255,255,0.06);
}
.px-rev-stream-fill { height: 100%; border-radius: 999px; transition: width 0.3s; }

.px-rev-creators { display: flex; flex-direction: column; gap: 6px; }
.px-rev-creator {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-silver);
  border-radius: 10px;
  font-size: 11px;
}
.px-rev-rank {
  font-family: 'Playfair Display', serif;
  font-size: 14px; font-weight: 800; color: var(--text-primary);
  width: 26px; text-align: center;
}
.px-rev-creator img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 1.5px solid var(--border-gold); }
.px-rev-creator-info { flex: 1; min-width: 0; }
.px-rev-creator-info strong { display: block; color: #fff; font-size: 12px; font-weight: 700; }
.px-rev-creator-info span { font-size: 10px; color: var(--text-muted); }
.px-rev-creator-amt { color: var(--text-primary); font-weight: 800; font-variant-numeric: tabular-nums; }

.px-rev-footer {
  text-align: center; margin-top: 14px;
  font-size: 9px; color: var(--text-muted); letter-spacing: 0.4px;
}
.px-rev-footer strong { color: var(--text-primary); }

/* ════════════════════════════════════════════════════
   EMPTY STATES + DEMO MODE TOGGLE
   ════════════════════════════════════════════════════ */
.px-settings-launcher {
  display: block; width: calc(100% - 32px);
  margin: 10px 16px 12px;
  padding: 10px 14px;
  background: rgba(129,140,255,0.08);
  border: 1px solid var(--border-gold);
  border-radius: 10px;
  color: var(--text-primary);
  font-family: inherit; font-size: 12px; font-weight: 700;
  letter-spacing: 0.3px;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}
.px-settings-launcher:hover {
  background: var(--gold-glow-sm);
  transform: translateY(-1px);
}

.px-empty-wrap { padding: 24px 16px; }
.px-empty {
  text-align: center;
  padding: 32px 24px;
  background: linear-gradient(180deg, rgba(129,140,255,0.06), rgba(255,255,255,0.01));
  border: 1px dashed var(--border-gold);
  border-radius: 18px;
  max-width: 380px;
  margin: 20px auto;
  animation: pxEmptyIn 0.3s ease-out both;
}
@keyframes pxEmptyIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.px-empty-icon {
  font-size: 54px;
  line-height: 1;
  margin-bottom: 10px;
  filter: drop-shadow(0 4px 16px rgba(129,140,255,0.4));
  animation: pxEmptyFloat 3s ease-in-out infinite;
}
@keyframes pxEmptyFloat {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-6px); }
}
.px-empty-title {
  font-family: 'Playfair Display', serif;
  font-size: 20px; font-weight: 800;
  color: var(--text-primary);
  background: linear-gradient(135deg, #FFFFFF, var(--text-primary), #fff);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 8px;
  line-height: 1.2;
}
.px-empty-body {
  font-size: 12px; color: var(--text-secondary);
  line-height: 1.55;
  margin-bottom: 16px;
  padding: 0 8px;
}
.px-empty-btn {
  min-width: 200px;
  padding: 11px 20px !important;
  font-size: 13px !important;
}
.px-empty-footnote {
  margin-top: 14px;
  font-size: 9px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--text-muted); font-weight: 700;
}

/* Settings modal */
.px-set-modal {
  position: fixed; inset: 0; z-index: 9850;
  background: rgba(5,7,12,0.85);
  backdrop-filter: blur(12px);
  display: none; align-items: center; justify-content: center;
  padding: 16px;
}
.px-set-modal.show { display: flex; animation: fadeIn 0.2s ease both; }
.px-set-card {
  position: relative;
  width: 100%; max-width: 420px;
  max-height: 90vh; overflow-y: auto;
  background: linear-gradient(180deg, #14161e, #0b0d12);
  border: 1.5px solid var(--text-primary);
  border-radius: 20px;
  padding: 22px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.55), 0 0 40px rgba(129,140,255,0.2);
  animation: rsModalRise 0.28s cubic-bezier(0.34, 1.2, 0.64, 1);
}
.px-set-x {
  position: absolute; top: 14px; right: 14px;
  background: transparent; border: 0; color: var(--text-muted);
  font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px;
}
.px-set-x:hover { color: #fff; }
.px-set-head {
  text-align: center;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(129,140,255,0.25);
}
.px-set-eyebrow {
  font-size: 9px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--text-primary); font-weight: 800;
}
.px-set-head h2 {
  font-family: 'Playfair Display', serif;
  font-size: 22px; font-weight: 800; color: #fff;
  margin-top: 4px;
}

.px-set-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-silver);
  border-radius: 12px;
  margin-bottom: 8px;
}
.px-set-row-info { flex: 1; min-width: 0; }
.px-set-row-title {
  font-size: 14px; font-weight: 800; color: #fff;
  margin-bottom: 2px;
}
.px-set-row-sub {
  font-size: 11px; color: var(--text-muted);
  line-height: 1.4;
}

.px-demo-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 10px 4px 4px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border-silver);
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  transition: all 0.2s;
  flex-shrink: 0;
}
.px-demo-toggle:hover:not(:disabled) {
  background: rgba(255,255,255,0.1);
}
.px-demo-toggle:disabled { opacity: 0.6; cursor: not-allowed; }
.px-demo-knob {
  display: inline-block;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #444;
  transition: background 0.2s, transform 0.2s;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.px-demo-toggle.is-on {
  background: #FFFFFF;
  color: #1a1000;
  border-color: var(--text-primary);
  box-shadow: 0 2px 10px rgba(129,140,255,0.35);
}
.px-demo-toggle.is-on .px-demo-knob {
  background: #fff;
  transform: translateX(2px);
}

.px-set-note {
  padding: 10px 12px;
  background: rgba(129,140,255,0.06);
  border: 1px dashed var(--border-gold);
  border-radius: 10px;
  font-size: 10px; color: var(--text-secondary);
  line-height: 1.55;
  margin-bottom: 10px;
}

.px-set-card .btn-outline {
  margin-top: 10px;
}

/* Starter CrewScore indicator (shown when Demo Mode is OFF) */
.px-starter-rank {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin: 14px 16px;
  padding: 14px 18px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-silver);
  border-radius: 14px;
}
.px-starter-num {
  font-family: 'Playfair Display', serif;
  font-size: 28px; font-weight: 800;
  color: var(--text-primary);
}
.px-starter-lbl {
  font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--text-muted); font-weight: 700;
}

/* CuadrillaONE Official welcome message (Demo Mode OFF) */
.pxo-welcome {
  border: 1.5px solid var(--border-gold) !important;
  background: linear-gradient(135deg, rgba(129,140,255,0.10), rgba(255,255,255,0.02)) !important;
}
.pxo-tag-gold {
  background: #FFFFFF !important;
  color: #1a1000 !important;
  font-weight: 800;
}
.pxo-welcome-body { margin: 8px 0; font-size: 12px; color: var(--text-secondary); line-height: 1.55; }
.pxo-welcome-body strong { color: var(--text-primary); }
.pxo-welcome-list {
  list-style: none; padding: 8px 0; margin: 8px 0;
  display: flex; flex-direction: column; gap: 4px;
}
.pxo-welcome-list li {
  padding: 5px 10px;
  background: rgba(255,255,255,0.03);
  border-radius: 8px;
  font-size: 12px;
  color: #fff;
}
.pxo-welcome-foot { font-style: italic; opacity: 0.7; margin-top: 8px; }
.pxo-signature {
  text-align: right; margin-top: 10px;
  font-size: 11px; color: var(--text-primary); font-style: italic;
  font-weight: 700;
}

/* Profile — Demo Mode OFF overrides */
.badge-item.badge-starter {
  background: rgba(255,255,255,0.06) !important;
  border-color: var(--border-silver) !important;
  color: var(--text-muted) !important;
}
.badge-item.badge-starter .badge-stars {
  color: var(--text-muted);
  filter: none;
}
.badge-item.badge-starter .badge-label {
  color: var(--text-muted);
  letter-spacing: 1px;
}

.profile-avatar-ring { position: relative; }

/* ════════════════════════════════════════════════════
   REGISTRATION FORM (Cuadrix + The One) — BLACK text on WHITE,
   sections, dynamic blocks, photo/file upload UI
   ════════════════════════════════════════════════════ */

/* Force all form inputs/selects/textareas/datalists to black-on-white on
   the registration + login screens. Specificity targets .rx-form AND the
   fallback #page-register / #page-login scopes. */
#page-register .form-input,
#page-register select,
#page-register textarea,
#page-register input,
#page-register .phone-code,
#page-login .form-input,
#page-login select,
#page-login textarea,
#page-login input,
.rx-form .form-input,
.rx-form select,
.rx-form textarea,
.rx-form input,
.rx-form .phone-code {
  background: #ffffff !important;
  color: #111111 !important;
  border: 1px solid #cfcfd8;
  caret-color: #111;
  -webkit-text-fill-color: #111 !important;
}
#page-register select option,
#page-login select option,
.rx-form select option,
.rx-form select optgroup {
  background: #ffffff;
  color: #111111;
  font-weight: 500;
}
#page-register select optgroup,
.rx-form select optgroup {
  font-weight: 800;
  color: #555;
}
#page-register .phone-input .phone-code,
.rx-form .phone-input .phone-code {
  min-width: 130px;
  padding-right: 4px;
}
#page-register .form-input::placeholder,
.rx-form .form-input::placeholder {
  color: #8a8a90;
}
#page-register label,
.rx-form label {
  color: var(--text);
}
.rx-form .optional { color: #6b7280; font-weight: 400; font-size: 11px; }
.rx-form .req { color: #ef4444; margin-left: 2px; }

/* Section cards */
.rx-form .rx-section {
  padding: 14px;
  margin-bottom: 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-silver);
  border-left: 3px solid var(--text-primary);
  border-radius: 12px;
}
.rx-section-title {
  font-family: 'Playfair Display', serif;
  font-size: 14px; font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 10px;
  letter-spacing: 0.2px;
}

/* Gender cards — large tappable cards with icons, always WHITE bg + BLACK text */
.rx-gender-row {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px;
}
@media (max-width: 480px) {
  .rx-gender-row { grid-template-columns: 1fr; }
}
.rx-gender-card {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 14px 10px;
  background: #ffffff !important;
  border: 2px solid #d4d4d8;
  border-radius: 12px;
  color: #111111 !important;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.1s, box-shadow 0.15s;
  position: relative;
}
.rx-gender-card input[type="radio"] {
  position: absolute; opacity: 0; pointer-events: none;
}
.rx-gender-ico { font-size: 28px; line-height: 1; }
.rx-gender-label {
  font-size: 13px !important; font-weight: 700 !important;
  color: #111111 !important;
  text-align: center;
  line-height: 1.2;
}
.rx-gender-card:has(input:checked) {
  border-color: var(--text-primary);
  background: #fffaee !important;
  box-shadow: 0 0 0 3px rgba(129,140,255,0.2), 0 4px 14px rgba(129,140,255,0.18);
  transform: translateY(-1px);
}
.rx-gender-card:hover { border-color: var(--text-primary); }

/* Keep old rx-radio for backwards compat in case it's referenced */
.rx-radio-row { display: flex; flex-wrap: wrap; gap: 6px; }
.rx-radio {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; background: #fff; border: 1px solid #cfcfd8;
  border-radius: 10px; color: #111;
  font-size: 12px; font-weight: 600; cursor: pointer;
}
.rx-radio:has(input:checked) { border-color: var(--text-primary); background: #fffaee; }
.rx-radio input { accent-color: #FFFFFF; }

/* Photo grid */
.rx-photo-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.rx-photo-slot {
  aspect-ratio: 1;
  background: rgba(255,255,255,0.04);
  border: 2px dashed var(--border-gold);
  border-radius: 12px;
  color: var(--text-primary);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  cursor: pointer; font-family: inherit;
}
.rx-photo-slot span { font-size: 28px; color: var(--text-primary); line-height: 1; }
.rx-photo-slot em { font-size: 10px; color: var(--text-muted); font-style: normal; margin-top: 6px; }
.rx-photo-slot:hover { background: rgba(129,140,255,0.06); }
.rx-photo-cell {
  position: relative;
  aspect-ratio: 1;
  border-radius: 12px; overflow: hidden;
  border: 2px solid var(--border-silver);
}
.rx-photo-cell.is-primary { border-color: var(--text-primary); box-shadow: 0 0 10px rgba(129,140,255,0.35); }
.rx-photo-cell img { width: 100%; height: 100%; object-fit: cover; }
.rx-photo-star {
  position: absolute; top: 4px; left: 4px;
  font-size: 9px; padding: 2px 6px;
  background: #FFFFFF; color: #1a1000;
  border-radius: 4px; font-weight: 800; letter-spacing: 0.4px;
}
.rx-photo-set-primary,
.rx-photo-x {
  position: absolute;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(0,0,0,0.75); color: #fff;
  border: 0; font-size: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}
.rx-photo-set-primary { top: 4px; left: 4px; }
.rx-photo-x { top: 4px; right: 4px; }
.rx-photo-x:hover { background: rgba(239,68,68,0.85); }

/* Cover photo slot */
.rx-cover-slot {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  aspect-ratio: 16 / 7;
  background: rgba(255,255,255,0.04);
  border: 2px dashed var(--border-gold);
  border-radius: 12px;
  color: var(--text-primary);
  cursor: pointer;
  text-align: center; padding: 12px;
}
.rx-cover-slot .rx-cover-ico { font-size: 32px; margin-bottom: 4px; }
.rx-cover-slot span { font-size: 13px; color: #fff; font-weight: 700; }
.rx-cover-slot em { font-size: 11px; color: var(--text-muted); font-style: normal; margin-top: 4px; }
.rx-cover-slot:hover { background: rgba(129,140,255,0.06); }
.rx-cover-slot.has-photo { padding: 0; border-style: solid; }
.rx-cover-preview {
  width: 100%; height: 100%; object-fit: cover; border-radius: 10px;
}
.rx-cover-slot.has-photo .rx-photo-x {
  position: absolute; top: 8px; right: 8px;
  z-index: 2;
}

.rx-note {
  font-size: 11px; color: var(--text-muted);
  margin-top: 6px;
  padding: 6px 10px;
  background: rgba(129,140,255,0.06);
  border-left: 2px solid var(--text-primary);
  border-radius: 6px;
  line-height: 1.45;
}

/* Upload slot (ID, cert files) */
.rx-upload-slot {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 18px 14px;
  background: rgba(255,255,255,0.04);
  border: 2px dashed var(--border-gold);
  border-radius: 12px;
  color: #fff; text-align: center;
  cursor: pointer;
  min-height: 100px;
}
.rx-upload-slot:hover { background: rgba(129,140,255,0.06); }
.rx-upload-slot.has-file {
  background: rgba(34,197,94,0.08);
  border-style: solid; border-color: rgba(34,197,94,0.4);
}
.rx-upload-slot .rx-upload-ico { font-size: 30px; margin-bottom: 6px; }
.rx-upload-slot span { font-size: 13px; font-weight: 700; }
.rx-upload-slot em { font-size: 11px; color: var(--text-muted); font-style: normal; margin-top: 4px; }
.rx-upload-slot.rx-upload-slim { min-height: 60px; padding: 10px; }
.rx-upload-slot.rx-upload-slim .rx-upload-ico { font-size: 18px; margin-bottom: 2px; }
.rx-upload-x {
  position: absolute; top: 8px; right: 8px;
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(0,0,0,0.65); color: #fff;
  border: 0; font-size: 14px; cursor: pointer;
}

.rx-skip-row {
  display: flex; align-items: center; gap: 8px;
  margin-top: 8px;
  font-size: 12px; color: var(--text-secondary);
  cursor: pointer;
}
.rx-skip-row input { accent-color: #FFFFFF; }
.rx-not-rec {
  font-size: 9px; font-style: normal;
  padding: 2px 6px; border-radius: 4px;
  background: rgba(239,68,68,0.2); color: #fca5a5;
  font-weight: 700; letter-spacing: 0.3px;
  margin-left: 4px;
}

/* ID section — enhanced */
.rx-id-section {
  border-left-color: #fb923c !important;
  background: linear-gradient(135deg, rgba(251,146,60,0.06), rgba(255,255,255,0.02)) !important;
}
.rx-id-note {
  background: rgba(251,146,60,0.08) !important;
  border-left-color: #fb923c !important;
}
.rx-id-note strong { color: #fdba74; }
.rx-id-skip-link {
  display: block;
  margin: 10px auto 0;
  background: transparent; border: 0;
  color: var(--text-muted);
  font-family: inherit; font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
}
.rx-id-skip-link:hover { color: #fff; }
.rx-upload-slot.is-skipped {
  background: rgba(251,146,60,0.08);
  border-style: solid;
  border-color: rgba(251,146,60,0.4);
}

/* ID verification banner on profile */
.rx-id-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  margin: 12px 16px;
  border-radius: 12px;
  font-size: 12px;
}
.rx-id-banner span { font-weight: 800; }
.rx-id-banner em { font-style: normal; color: var(--text-muted); font-size: 11px; flex: 1; }
.rx-id-banner.is-ok {
  background: rgba(34,197,94,0.12);
  border: 1px solid rgba(34,197,94,0.4);
  color: #4ade80;
}
.rx-id-banner.is-warn {
  background: rgba(251,146,60,0.12);
  border: 1px solid rgba(251,146,60,0.4);
  color: #fdba74;
}
.rx-id-banner.is-warn .btn-gold {
  font-size: 11px; padding: 6px 12px;
}

/* Dynamic add/remove blocks */
.rx-dyn-block {
  padding: 12px; margin-bottom: 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-silver);
  border-radius: 12px;
  position: relative;
}
.rx-dyn-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px dashed rgba(255,255,255,0.08);
}
.rx-dyn-head strong {
  font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--text-primary); font-weight: 800;
}
.rx-dyn-x {
  background: rgba(239,68,68,0.16);
  color: #fca5a5;
  border: 1px solid rgba(239,68,68,0.4);
  width: 26px; height: 26px; border-radius: 50%;
  font-size: 14px; cursor: pointer;
  line-height: 1;
}
.rx-dyn-x:hover { background: rgba(239,68,68,0.32); color: #fff; }

.rx-inline-check {
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: 10px;
  font-size: 12px; color: var(--text-secondary);
  cursor: pointer;
}
.rx-inline-check input { accent-color: #FFFFFF; }

/* Add-block ghost button */
.rx-form .add-btn,
#crew-step-2 .add-btn,
#crew-step-3 .add-btn {
  margin-top: 4px;
  margin-bottom: 14px;
  padding: 12px;
  background: rgba(129,140,255,0.08);
  border: 1px dashed var(--border-gold);
  color: var(--text-primary);
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
}
.rx-form .add-btn:hover,
#crew-step-2 .add-btn:hover,
#crew-step-3 .add-btn:hover {
  background: rgba(129,140,255,0.16);
}

/* ════════════════════════════════════════════════════
   EMAIL + MOBILE VERIFICATION MODAL
   ════════════════════════════════════════════════════ */
.rx-verify-modal {
  position: fixed; inset: 0; z-index: 9900;
  background: rgba(5,7,12,0.88);
  backdrop-filter: blur(12px);
  display: none; align-items: center; justify-content: center;
  padding: 18px;
}
.rx-verify-modal.show { display: flex; animation: fadeIn 0.2s ease both; }

.rx-verify-card {
  position: relative;
  width: 100%; max-width: 420px;
  background: linear-gradient(180deg, #14161e, #0b0d12);
  border: 1.5px solid var(--text-primary);
  border-radius: 20px;
  padding: 28px 24px 22px;
  text-align: center;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 0 40px rgba(129,140,255,0.22);
  animation: rsModalRise 0.28s cubic-bezier(0.34, 1.2, 0.64, 1);
}

.rx-verify-x {
  position: absolute; top: 12px; right: 14px;
  background: transparent; border: 0;
  color: var(--text-muted); font-size: 22px;
  cursor: pointer; line-height: 1;
}
.rx-verify-x:hover { color: #fff; }

.rx-verify-progress {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-bottom: 4px;
}
.rx-verify-step {
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(255,255,255,0.12);
  color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800;
}
.rx-verify-step.is-current {
  background: #FFFFFF; color: #1a1000;
  border-color: var(--text-primary);
  box-shadow: 0 0 14px rgba(129,140,255,0.45);
}
.rx-verify-step.is-done {
  background: rgba(34,197,94,0.2); color: #4ade80;
  border-color: rgba(34,197,94,0.5);
}
.rx-verify-line {
  width: 40px; height: 2px;
  background: rgba(255,255,255,0.12);
  border-radius: 2px;
}
.rx-verify-line.is-done { background: #4ade80; }
.rx-verify-progress-lbl {
  font-size: 10px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--text-muted); font-weight: 700;
  margin-bottom: 14px;
}

.rx-verify-icon {
  font-size: 42px; margin-bottom: 8px;
  filter: drop-shadow(0 4px 14px rgba(129,140,255,0.3));
}
.rx-verify-title {
  font-family: 'Playfair Display', serif;
  font-size: 22px; font-weight: 800; color: #fff;
  margin-bottom: 6px;
}
.rx-verify-sub {
  font-size: 12px; color: var(--text-secondary);
  margin-bottom: 6px;
}
.rx-verify-sub strong { color: var(--text-primary); }
.rx-verify-hint {
  display: inline-block;
  font-size: 11px !important;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(129,140,255,0.10);
  border: 1px dashed var(--border-gold);
  color: var(--text-secondary) !important;
  margin-bottom: 14px !important;
}
.rx-verify-hint strong { color: var(--text-primary) !important; font-weight: 800; }

.rx-verify-otp-row {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px;
  margin-bottom: 14px;
}
.rx-verify-otp-row.rx-verify-wrong { animation: pxauthShake 0.4s; }
.rx-verify-otp-box {
  width: 100%; aspect-ratio: 1;
  background: rgba(255,255,255,0.04);
  border: 2px solid var(--border-silver);
  border-radius: 10px;
  color: #fff !important;
  font-size: 22px; font-weight: 800;
  font-family: 'Playfair Display', serif;
  text-align: center;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.rx-verify-otp-box:focus {
  outline: none;
  border-color: var(--text-primary);
  background: rgba(129,140,255,0.1);
  box-shadow: 0 0 14px rgba(129,140,255,0.35);
  transform: scale(1.05);
}

.rx-verify-btn { font-size: 13px !important; }

.rx-verify-resend {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  margin: 14px 0 10px;
  font-size: 11px;
}
.rx-verify-resend-btn {
  background: transparent; border: 0;
  color: var(--text-primary);
  font-family: inherit; font-size: 11px; font-weight: 700;
  cursor: pointer; text-decoration: underline;
}
.rx-verify-resend-btn:disabled {
  color: var(--text-muted); cursor: not-allowed; text-decoration: none;
}
.rx-verify-timer { color: var(--text-muted); }

.rx-verify-skip {
  background: transparent; border: 0;
  color: var(--text-muted);
  font-family: inherit; font-size: 11px;
  cursor: pointer; text-decoration: underline;
  margin-top: 4px;
}
.rx-verify-skip:hover { color: #fff; }
.rx-verify-skip em {
  font-style: normal;
  font-size: 9px; padding: 2px 6px; border-radius: 4px;
  background: rgba(239,68,68,0.18); color: #fca5a5;
  font-weight: 700; letter-spacing: 0.4px;
  margin-left: 6px;
}

/* Success state */
.rx-verify-success { padding: 44px 24px; }
.rx-verify-check {
  margin-bottom: 14px;
  animation: pxauthCheckPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.rx-verify-success h2 {
  font-family: 'Playfair Display', serif;
  font-size: 22px; font-weight: 800;
  color: #4ade80;
  margin-bottom: 6px;
}
.rx-verify-success p {
  font-size: 13px; color: var(--text-primary);
  font-weight: 700;
}

/* Verified badges on the form fields */
.rx-verify-mark {
  display: inline-block;
  margin-left: 8px;
  font-size: 10px; padding: 2px 8px; border-radius: 999px;
  font-weight: 700; letter-spacing: 0.3px;
}
.rx-verify-mark.is-ok {
  background: rgba(34,197,94,0.18); color: #4ade80;
  border: 1px solid rgba(34,197,94,0.4);
}
.rx-verify-mark.is-warn {
  background: rgba(251,146,60,0.18); color: #fdba74;
  border: 1px solid rgba(251,146,60,0.4);
}

/* ══════════════════════════════════════════════════════════
   RBAC · Demo Role Switcher
   ══════════════════════════════════════════════════════════ */
.px-role-switcher {
  position: fixed;
  left: 16px;
  bottom: 96px;
  z-index: 9998;
  font-family: 'Inter', sans-serif;
}
.px-role-switcher .prs-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: linear-gradient(135deg, #1a1a1a, #0a0a0a);
  border: 1px solid rgba(255,255,255, 0.4);
  border-radius: 999px;
  color: #B0B4BC;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.1);
  transition: all 0.2s ease;
}
.px-role-switcher .prs-toggle:hover {
  border-color: rgba(255,255,255, 0.8);
  transform: translateY(-1px);
}
.px-role-switcher .prs-toggle-icon {
  font-size: 15px;
  filter: grayscale(0.3);
}
.px-role-switcher .prs-panel {
  position: absolute;
  left: 0;
  bottom: calc(100% + 10px);
  width: 300px;
  background: linear-gradient(180deg, #141414, #0a0a0a);
  border: 1px solid rgba(255,255,255, 0.35);
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.px-role-switcher.collapsed .prs-panel {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}
.px-role-switcher .prs-head {
  position: relative;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.15);
}
.px-role-switcher .prs-eyebrow {
  font-size: 9px;
  letter-spacing: 1.4px;
  color: rgba(255,255,255, 0.7);
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 2px;
}
.px-role-switcher .prs-head h4 {
  font-family: 'Playfair Display', serif;
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  margin: 0;
}
.px-role-switcher .prs-close {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 22px; height: 22px;
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.5);
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
}
.px-role-switcher .prs-close:hover { color: #fff; }
.px-role-switcher .prs-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.px-role-switcher .prs-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
}
.px-role-switcher .prs-user:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.3);
}
.px-role-switcher .prs-user.active {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.6);
}
.px-role-switcher .prs-av {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 11px;
  flex-shrink: 0;
}
.px-role-switcher .prs-info { flex: 1; min-width: 0; }
.px-role-switcher .prs-name {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 1px;
}
.px-role-switcher .prs-role {
  font-size: 10px;
  color: rgba(255,255,255,0.55);
  font-weight: 500;
}
.px-role-switcher .prs-check {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #B0B4BC;
  color: #0a0a0a;
  font-size: 11px;
  font-weight: 900;
  display: none;
  align-items: center;
  justify-content: center;
}
.px-role-switcher .prs-user.active .prs-check { display: flex; }
.px-role-switcher .prs-foot {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.05);
  font-size: 9px;
  color: rgba(255,255,255,0.4);
  text-align: center;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* ── Role-gated visibility (applied to <body>) ── */
/* NOTE: .inbox-item.px-official is NOT hidden for individual Cuadrix anymore —
   the pinned CuadrillaONE Official (payslips/docs, coming-soon) is Cuadrix-
   primary, so solo Cuadrix SHOULD see it. Visibility is gated to !The-One in
   JS (pxIsTheOne ? 'none' : ''). */
body[data-px-role="individual"] .mms-card[onclick*="hire"] {
  display: none !important;
}
body[data-px-role="entity_member"] .mms-card[onclick*="hire"] {
  display: none !important;
}
/* Entity admins (master_admin/line_manager via the_one_members) keep data-px-role
   "individual"/"entity_member", so the role guards above would hide their Hire
   card. pxApplyRoleToDOM sets data-px-canhire="yes" when _pxCanHire() is true —
   this re-shows it (placed AFTER the guards so it wins at equal specificity). */
body[data-px-canhire="yes"] .mms-card[onclick*="hire"] {
  display: flex !important;
}
body[data-px-role="entity_member"] .hq-admin-only,
body[data-px-role="individual"] .hq-admin-only {
  display: none !important;
}
body[data-px-role="line_manager"] .hq-master-only,
body[data-px-role="individual"] .hq-master-only,
body[data-px-role="entity_member"] .hq-master-only {
  display: none !important;
}

@media (max-width: 500px) {
  .px-role-switcher { left: 10px; bottom: 84px; }
  .px-role-switcher .prs-panel { width: calc(100vw - 24px); max-width: 320px; }
  .px-role-switcher .prs-toggle-label { display: none; }
  .px-role-switcher .prs-toggle { padding: 10px; }
}

/* ══════════════════════════════════════════════════════════
   Step 5 · Payment Methods v2 (Apple Pay + Google Pay + ...)
   ══════════════════════════════════════════════════════════ */
.hx-pay-grid-v2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 12px 0;
}
.hx-pay-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border-radius: 12px;
  border: 1.5px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  cursor: pointer;
  text-align: left;
  transition: all 0.18s ease;
  min-height: 140px;
}
.hx-pay-card:hover {
  border-color: rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.06);
  transform: translateY(-1px);
}
.hx-pay-card.is-selected {
  border-color: #B0B4BC;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.25);
}
.hx-pay-card-logo {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
}
.hx-pay-card-body strong {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 2px;
}
.hx-pay-card-body span {
  display: block;
  font-size: 11px;
  color: rgba(255,255,255,0.7);
  line-height: 1.35;
}
.hx-pay-card-note {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  color: rgba(255,255,255,0.45);
  font-style: normal;
}
.hx-pay-card-cta {
  display: inline-block;
  margin-top: auto;
  align-self: flex-start;
  font-size: 11px;
  font-weight: 700;
  color: #B0B4BC;
  letter-spacing: 0.3px;
}

/* Apple Pay card — black w/ white Apple logo */
.hx-pay-card.hx-pay-apple {
  background: #000;
  border-color: #000;
  color: #fff;
}
.hx-pay-card.hx-pay-apple:hover {
  background: #111;
  border-color: rgba(255,255,255,0.25);
}
.hx-pay-card.hx-pay-apple .hx-pay-card-logo { color: #fff; }
.hx-pay-card.hx-pay-apple .hx-pay-card-body span,
.hx-pay-card.hx-pay-apple .hx-pay-card-note { color: rgba(255,255,255,0.7); }
.hx-pay-card.hx-pay-apple .hx-pay-card-cta { color: #fff; }

/* Google Pay card — white w/ colored Google Pay wordmark */
.hx-pay-card.hx-pay-google {
  background: #ffffff;
  border-color: #e5e7eb;
}
.hx-pay-card.hx-pay-google:hover {
  background: #f9fafb;
  border-color: #5f6368;
}
.hx-pay-card.hx-pay-google .hx-pay-card-body strong { color: #202124; }
.hx-pay-card.hx-pay-google .hx-pay-card-body span { color: #5f6368; }
.hx-pay-card.hx-pay-google .hx-pay-card-note { color: #80868b; }
.hx-pay-card.hx-pay-google .hx-pay-card-cta { color: #1a73e8; }

/* Credit card card — mini badges */
.hx-cc-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 7px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.5px;
  border-radius: 4px;
  color: #fff;
}
.hx-cc-visa { background: #1a1f71; }
.hx-cc-mc { background: linear-gradient(90deg, #eb001b 0 50%, #f79e1b 50% 100%); color: transparent; font-size: 14px; }
.hx-cc-amex { background: #2e77bb; }

/* Wallet card */
.hx-pay-wallet-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255,255,255,0.2), rgba(255,255,255,0.05));
  font-size: 22px;
}

/* Bank Transfer secondary button */
.hx-pay-bank {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  background: rgba(255,255,255,0.03);
  border: 1.5px dashed rgba(255,255,255,0.12);
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  margin-bottom: 14px;
  transition: all 0.18s ease;
}
.hx-pay-bank:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.4);
}
.hx-pay-bank-ico {
  font-size: 22px;
  width: 40px;
  text-align: center;
}
.hx-pay-bank strong { display: block; color: #fff; font-size: 13px; font-weight: 700; }
.hx-pay-bank span { display: block; color: rgba(255,255,255,0.65); font-size: 11px; }
.hx-pay-bank .hx-pay-card-cta { margin-left: auto; }

/* Saved methods wrapper */
.hx-pay-saved-wrap {
  margin-top: 10px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
}
.hx-pay-saved-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}
.hx-pay-saved-head strong {
  font-family: 'Playfair Display', serif;
  font-size: 14px;
  color: #fff;
  letter-spacing: 0.3px;
}
.hx-pay-saved-head em {
  font-size: 10px;
  color: rgba(255,255,255,0.55);
  font-style: normal;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.hx-pay-row-v2 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  margin-bottom: 6px;
}
.hx-pay-row-v2.is-default {
  border-color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.08);
}
.hx-pay-row-v2 .hx-pay-row-icon {
  font-size: 18px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.04);
  border-radius: 8px;
  flex-shrink: 0;
}
.hx-pay-row-v2 .hx-pay-row-info { flex: 1; min-width: 0; }
.hx-pay-row-v2 .hx-pay-row-info strong { display: flex; align-items: center; gap: 6px; color: #fff; font-size: 13px; font-weight: 700; }
.hx-pay-row-v2 .hx-pay-row-info span { display: block; color: rgba(255,255,255,0.6); font-size: 11px; margin-top: 2px; }
.hx-pay-default-badge {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.6px;
  padding: 2px 7px;
  background: #B0B4BC;
  color: #0a0a0a;
  border-radius: 999px;
  text-transform: uppercase;
}
.hx-pay-row-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.hx-pay-act {
  font-size: 10px;
  font-weight: 700;
  color: #B0B4BC;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.3);
  padding: 5px 9px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}
.hx-pay-act:hover { background: rgba(255,255,255,0.12); }
.hx-pay-act-remove { color: #f87171; border-color: rgba(248,113,113,0.35); }
.hx-pay-act-remove:hover { background: rgba(248,113,113,0.12); }

/* Trust badges v2 */
.hx-pay-trust-v2 {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  justify-content: center;
  font-size: 10px;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.3px;
}
.hx-pay-trust-v2 span {
  padding: 4px 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  white-space: nowrap;
}

/* ── Apple Pay / Google Pay modals ── */
.hx-applepay-card {
  background: #000 !important;
  border-color: rgba(255,255,255,0.1) !important;
  text-align: center;
  color: #fff;
  max-width: 360px;
}
.hx-ap-head h3 { color: #fff; margin: 10px 0 4px; }
.hx-ap-head .hx-ap-sub { color: rgba(255,255,255,0.65); }
.hx-ap-scan {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 22px 0 10px;
}
.hx-ap-scan p { color: rgba(255,255,255,0.85); font-size: 13px; font-weight: 600; }
.hx-ap-spinner {
  width: 46px; height: 46px;
  border: 3px solid rgba(255,255,255,0.12);
  border-top-color: #fff;
  border-radius: 50%;
  animation: hxApSpin 0.9s linear infinite;
}
@keyframes hxApSpin { to { transform: rotate(360deg); } }

.hx-googlepay-card {
  background: #fff !important;
  border-color: #e5e7eb !important;
  color: #202124;
  max-width: 380px;
}
.hx-googlepay-card .rx-note { color: #5f6368; }
.hx-gp-head { text-align: center; padding: 8px 0 14px; border-bottom: 1px solid #e5e7eb; margin-bottom: 10px; }
.hx-gp-head h3 { color: #202124; margin: 10px 0 4px; font-size: 18px; }
.hx-gp-accounts { display: flex; flex-direction: column; gap: 6px; }
.hx-gp-acct {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #e5e7eb;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease;
}
.hx-gp-acct:hover { background: #f8f9fa; }
.hx-gp-av {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 13px;
}
.hx-gp-acct strong { display: block; font-size: 13px; color: #202124; font-weight: 600; }
.hx-gp-acct span { display: block; font-size: 11px; color: #5f6368; }
.hx-gp-other .hx-gp-av { border: 1px dashed #d1d5db; background: transparent !important; color: #5f6368; }

/* Bank transfer details box */
.hx-bank-box {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 10px 14px;
  margin: 10px 0 12px;
}
.hx-bank-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: 12px;
}
.hx-bank-row:last-child { border-bottom: none; }
.hx-bank-row span { color: rgba(255,255,255,0.55); }
.hx-bank-row strong { color: #fff; font-family: 'Inter', monospace; }

@media (max-width: 500px) {
  .hx-pay-grid-v2 { grid-template-columns: 1fr; }
  .hx-pay-row-v2 { flex-wrap: wrap; }
  .hx-pay-row-actions { width: 100%; justify-content: flex-end; }
}

/* ══════════════════════════════════════════════════════════
   Step 5 · Simplified Pay (v3) — Card + Wallet only
   ══════════════════════════════════════════════════════════ */
.hx-pay-intro {
  font-size: 12px;
  color: rgba(255,255,255,0.65);
  margin: 8px 0 10px;
}
.hx-pay-grid-v3 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}
.hx-pay-list-v3 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
}
.hx-pay-section {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 12px;
  padding: 12px 14px;
}
.hx-pay-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}
.hx-pay-section-head strong {
  font-family: 'Playfair Display', serif;
  font-size: 13px;
  color: #fff;
  letter-spacing: 0.3px;
}
.hx-pay-empty-mini {
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  padding: 8px 2px;
  font-style: italic;
}
.hx-pay-add-link {
  display: block;
  margin-top: 8px;
  background: transparent;
  border: 1px dashed rgba(255,255,255,0.35);
  color: #B0B4BC;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  width: 100%;
  transition: background 0.15s ease;
}
.hx-pay-add-link:hover {
  background: rgba(255,255,255,0.08);
  border-style: solid;
}
.hx-pay-explainer {
  margin-top: 4px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
}
.hx-pay-explainer-head {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 800;
  color: #B0B4BC;
  margin-bottom: 8px;
}
.hx-pay-explainer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.hx-pay-explainer li {
  font-size: 12px;
  color: rgba(255,255,255,0.75);
  padding: 5px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.06);
  line-height: 1.45;
}
.hx-pay-explainer li:last-child { border-bottom: none; }
.hx-pay-explainer li strong { color: #fff; }

/* ── Wallet top-up modal with integrated methods picker ── */
.hx-topup-modal {
  max-width: 440px;
}
.hx-topup-section {
  margin: 12px 0;
}
.hx-topup-section-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 800;
  color: #B0B4BC;
  margin-bottom: 8px;
}
.hx-topup-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.hx-topup-amt {
  padding: 12px;
  background: rgba(255,255,255,0.03);
  border: 1.5px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}
.hx-topup-amt:hover {
  border-color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.06);
}
.hx-topup-amt.is-selected {
  border-color: #B0B4BC;
  background: rgba(255,255,255,0.15);
  color: #B0B4BC;
}
.hx-topup-divider {
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin: 14px 0;
}
.hx-topup-methods {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hx-topup-method {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.02);
  border: 1.5px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
}
.hx-topup-method:hover {
  border-color: rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.05);
}
.hx-topup-method.is-selected {
  border-color: #B0B4BC;
  background: rgba(255,255,255,0.1);
}
.hx-topup-method strong {
  display: block;
  font-size: 13px;
  color: #fff;
  font-weight: 700;
}
.hx-topup-method span {
  display: block;
  font-size: 11px;
  color: rgba(255,255,255,0.6);
}
.hx-tm-ico {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(255,255,255,0.04);
}
.hx-tm-apple { background: #000; color: #fff; }
.hx-tm-google { background: #fff; }
.hx-tm-card, .hx-tm-bank { font-size: 18px; }
.hx-tm-radio {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.25);
  margin-left: auto;
  flex-shrink: 0;
  position: relative;
}
.hx-topup-method.is-selected .hx-tm-radio {
  border-color: #B0B4BC;
}
.hx-topup-method.is-selected .hx-tm-radio::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #B0B4BC;
}

@media (max-width: 500px) {
  .hx-pay-grid-v3 { grid-template-columns: 1fr; }
  .hx-topup-grid { grid-template-columns: 1fr 1fr; }
}

/* ══════════════════════════════════════════════════════════
   Dynamic Top-Right User Avatar + Dropdown Menu
   ══════════════════════════════════════════════════════════ */
.avatar-btn.user-avatar {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid #FFFFFF;
  padding: 0;
  cursor: pointer;
  overflow: visible;
}
.avatar-btn.user-avatar .avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.avatar-btn.user-avatar .px-avatar-initials, .nav-avatar-wrap .px-avatar-initials { /* NAV-2 — footer avatar shares the overlay */
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.3px;
}
.avatar-btn.user-avatar .role-badge {
  position: absolute;
  bottom: -3px;
  right: -5px;
  background: #FFFFFF;
  color: #1a1000;
  font-size: 9px;
  font-weight: 900;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  border: 2px solid #0a0a0a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  letter-spacing: 0;
}
.avatar-btn.user-avatar .role-badge[data-role="line_manager"] {
  background: #8b5cf6;
  color: #fff;
}
.avatar-btn.user-avatar .role-badge[data-role="entity_member"] {
  background: #3b82f6;
  color: #fff;
}
.avatar-btn.user-avatar .role-badge[data-role="master_admin"] {
  background: #FFFFFF;
  color: #1a1000;
  font-size: 11px;
  border-width: 1.5px;
}

/* Dropdown menu */
.px-avatar-menu {
  /* Portaled to document.body at open-time to escape the top-bar's
     backdrop-filter containing block and the phone-frame's overflow:hidden.
     Top / right are set inline at open based on the avatar's bounding box. */
  position: fixed;
  top: 64px;
  right: 10px;
  width: 260px;
  /* Fully opaque · cards must never bleed through */
  background: #0a0a0a;
  background-image: linear-gradient(180deg, #141414, #0a0a0a);
  border: 1px solid rgba(255,255,255, 0.35);
  border-radius: 12px;
  padding: 10px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.55);
  z-index: 9999;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  /* Cap height so tall menus scroll inside the dropdown instead of
     overflowing the viewport (or clipping at the bottom behind cards). */
  max-height: calc(100vh - 80px);
  max-height: calc(100dvh - 80px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.px-avatar-menu.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.pxam-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 4px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  margin-bottom: 6px;
}
.pxam-av-init {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 12px;
  flex-shrink: 0;
}
.pxam-head strong {
  display: block;
  font-size: 13px;
  color: #fff;
  font-weight: 700;
}
.pxam-head span {
  display: block;
  font-size: 10px;
  color: rgba(255,255,255,0.55);
  margin-top: 1px;
}
.pxam-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pxam-item {
  display: flex;
  align-items: center;
  gap: 12px;   /* NAV-5 — Apple-quiet rhythm */
  padding: 12px 10px;
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.85);
  font-size: 13.5px;
  font-weight: 600;
  text-align: left;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s ease;
  width: 100%;
}
.pxam-item:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
}
.pxam-ico {
  width: 22px;
  text-align: center;
  font-size: 14px;
  flex-shrink: 0;
}
/* NAV-5 — thin-stroke glyph column (replaces the emoji .pxam-ico rows) */
.pxam-glyph { width: 22px; display: inline-flex; align-items: center; justify-content: center; color: #9aa0a8; flex-shrink: 0; }
.pxam-item:active { background: rgba(255,255,255,0.05); }
/* NAV-5 — workspace group slot (HQ + injected Tribe Management): hairline
   below only when it actually holds rows */
.pxam-ws { display: flex; flex-direction: column; gap: 2px; }
.pxam-ws:not(:empty) { border-bottom: 1px solid rgba(255,255,255,0.06); padding-bottom: 4px; margin-bottom: 4px; }
.pxam-item em {
  margin-left: auto;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #B0B4BC;
  font-style: normal;
  font-weight: 800;
}
.pxam-divider {
  height: 1px;
  background: rgba(255,255,255,0.06);
  margin: 6px 0;
}
/* NAV-5 — Logout: quiet terracotta TEXT (CS-BAND-2 ramp), never a filled slab */
.pxam-logout {
  color: #C4695A;
}
.pxam-logout .pxam-glyph { color: #C4695A; }
.pxam-logout:hover {
  background: rgba(196,105,90,0.1);
  color: #d98a7c;
}

@media (max-width: 500px) {
  .px-avatar-menu { width: calc(100vw - 20px); right: 10px; }
}

/* ══════════════════════════════════════════════════════════
   Post a Job · Master Admin flow
   ══════════════════════════════════════════════════════════ */
.pj-hero-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.06));
  border: 1.5px solid rgba(255,255,255,0.5);
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  margin: 6px 0 18px;
  transition: all 0.18s ease;
}
.pj-hero-cta:hover {
  border-color: #B0B4BC;
  background: linear-gradient(135deg, rgba(255,255,255,0.28), rgba(255,255,255,0.1));
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(255,255,255,0.2);
}
.pj-hero-plus {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: #B0B4BC;
  color: #0a0a0a;
  font-size: 22px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pj-hero-body { flex: 1; min-width: 0; }
.pj-hero-body strong {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 15px;
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.3px;
  margin-bottom: 2px;
}
.pj-hero-body span {
  display: block;
  font-size: 11px;
  color: rgba(255,255,255,0.7);
  line-height: 1.4;
}
.pj-hero-arrow {
  color: #B0B4BC;
  font-size: 20px;
  font-weight: 800;
}

/* "Post Similar Job" button on admin-viewed work cards */
.jc-admin-post-similar {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  padding: 10px 16px;
  background: #B0B4BC;
  color: #0a0a0a;
  border: none;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.3px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(255,255,255,0.4);
  z-index: 5;
}
.jc-admin-post-similar:hover {
  background: #B0B4BC;
  transform: translateX(-50%) translateY(-1px);
}

/* Post Job modal card */
.pj-modal .pj-card {
  max-width: 500px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.pj-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  color: #fff;
  margin: 2px 0 6px;
}
.pj-eyebrow {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  font-weight: 800;
  color: #B0B4BC;
  margin-bottom: 4px;
}
.pj-form-scroll {
  overflow-y: auto;
  flex: 1;
  padding-right: 4px;
  margin: 8px 0 10px;
}
.pj-section-head {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #B0B4BC;
  margin: 14px 0 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255,255,255,0.2);
}
.pj-check-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
  margin: 8px 0;
}
.pj-check { font-size: 12px; }

/* Type picker */
.pj-type-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 14px 0;
}
.pj-type-card {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 16px;
  background: rgba(255,255,255,0.03);
  border: 1.5px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
}
.pj-type-card:hover {
  border-color: #B0B4BC;
  background: rgba(255,255,255,0.06);
}
.pj-type-ico {
  width: 48px; height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,255,255,0.2), rgba(255,255,255,0.05));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}
.pj-type-body { flex: 1; }
.pj-type-body strong {
  display: block;
  font-size: 14px;
  color: #fff;
  font-weight: 800;
  margin-bottom: 3px;
}
.pj-type-body span {
  display: block;
  font-size: 11px;
  color: rgba(255,255,255,0.65);
  line-height: 1.4;
}
.pj-type-body em {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  color: #B0B4BC;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-style: normal;
  font-weight: 800;
}

/* Boost options */
.pj-boost-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px 0 14px;
}
.pj-boost-row {
  padding: 12px 14px;
  background: rgba(255,255,255,0.02);
  border: 1.5px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  cursor: pointer;
  display: block;
}
.pj-boost-row:hover { border-color: rgba(255,255,255,0.4); }
.pj-boost-row.is-on {
  border-color: #B0B4BC;
  background: rgba(255,255,255,0.08);
}
.pj-boost-row.pj-boost-standard {
  background: rgba(34,197,94,0.06);
  border-color: rgba(34,197,94,0.3);
  cursor: default;
}
.pj-boost-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.pj-boost-head strong { color: #fff; font-size: 13px; font-weight: 800; }
.pj-boost-head input[type="checkbox"] { margin-right: 6px; }
.pj-boost-cost {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 10px;
  background: rgba(255,255,255,0.15);
  color: #B0B4BC;
  border-radius: 999px;
}
.pj-boost-standard .pj-boost-cost { background: rgba(34,197,94,0.15); color: #4ade80; }
.pj-boost-row p {
  margin: 0;
  font-size: 11px;
  color: rgba(255,255,255,0.65);
  line-height: 1.45;
}
.pj-boost-included {
  display: inline-block;
  margin-top: 4px;
  font-size: 10px;
  color: #4ade80;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-weight: 700;
  font-style: normal;
}
.pj-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 10px;
  margin-bottom: 10px;
}
.pj-total-row span { color: rgba(255,255,255,0.7); font-size: 12px; }
.pj-total-row strong {
  color: #B0B4BC;
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  font-weight: 800;
}

/* Summary */
.pj-summary {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 10px 0 12px;
}
.pj-sum-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.06);
  font-size: 12px;
}
.pj-sum-row:last-child { border-bottom: none; }
.pj-sum-row span { color: rgba(255,255,255,0.55); flex-shrink: 0; }
.pj-sum-row strong { color: #fff; text-align: right; font-weight: 700; }
.pj-sum-divider {
  height: 1px;
  background: rgba(255,255,255,0.2);
  margin: 4px 0;
}
.pj-sum-total strong {
  color: #B0B4BC;
  font-size: 16px;
  font-family: 'Playfair Display', serif;
}
.pj-sum-wallet strong { color: rgba(255,255,255,0.85); font-size: 12px; }
.pj-warn {
  padding: 10px 12px;
  background: rgba(251,146,60,0.12);
  border: 1px solid rgba(251,146,60,0.35);
  border-radius: 8px;
  color: #fdba74;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 10px;
}
.btn-third { flex: 1; }

/* Success state */
.pj-success {
  text-align: center;
  padding: 14px 4px;
}
.pj-success-ico {
  font-size: 52px;
  margin-bottom: 10px;
}
.pj-success-stats {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 16px 0;
}
.pj-success-stats > div {
  flex: 1;
  padding: 12px 8px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 10px;
}
.pj-success-stats strong {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  color: #B0B4BC;
  font-weight: 800;
}
.pj-success-stats span {
  display: block;
  font-size: 10px;
  color: rgba(255,255,255,0.6);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-top: 2px;
}

/* My Job Posts list */
.pjl-card { max-width: 540px; }
.pjl-list {
  max-height: 420px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px 0;
}
.pjl-row {
  display: flex;
  flex-wrap: wrap; /* BTN-3 — actions drop to their own compact line */
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  align-items: flex-start;
}
.pjl-ico {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.pjl-body { flex: 1; min-width: 0; }
.pjl-body strong { display: block; color: #fff; font-size: 13px; font-weight: 700; }
.pjl-body span { display: block; color: rgba(255,255,255,0.6); font-size: 11px; margin-top: 2px; }
.pjl-body em { display: block; color: rgba(255,255,255,0.5); font-size: 10px; margin-top: 4px; font-style: normal; }
.pjl-postedby { display: block; color: var(--text-muted); font-size: 11px; font-style: normal; margin-top: 2px; }
.pjl-tags { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
.pjl-tag {
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: 0.3px;
}
.pjl-urgent { background: rgba(248,113,113,0.18); color: #fca5a5; }
.pjl-featured { background: rgba(255,255,255,0.18); color: #B0B4BC; }
.pjl-boost { background: rgba(139,92,246,0.2); color: #c4b5fd; }
/* BTN-3 — the 5-button vertical stack (each row stretched to the widest
   label) is now ONE horizontal row: Edit · Clone · Pause · ⋯ overflow.
   BTN-2 restyled the button chrome but never touched this geometry — that
   column stack is what read as "no change". */
.pjl-actions {
  display: flex;
  gap: 6px;
  flex-basis: 100%;
  min-width: 0;
}
/* BTN-2 — dense per-job action stacks: compact SECONDARY (hairline, pill,
   muted), terracotta only for the destructive row. */
.pjl-actions button {
  font-size: 10.5px;
  padding: 5px 12px;
  background: transparent;
  color: #B9BDC4;
  border: 1px solid var(--btn-hairline);
  border-radius: 999px;
  cursor: pointer;
  font-weight: 600;
}
.pjl-actions button:hover { border-color: rgba(255,255,255,0.28); color: #fff; background: transparent; }
.pjl-actions button.is-danger { color: #f87171; border-color: rgba(248,113,113,0.28); }
.pjl-actions button.is-danger:hover { background: rgba(248,113,113,0.08); }
.pjl-actions .pjl-more { font-size: 14px; line-height: 1; padding: 3px 10px; letter-spacing: 1px; }
.pj-empty {
  text-align: center;
  padding: 40px 20px;
  color: rgba(255,255,255,0.55);
  font-size: 13px;
}

@media (max-width: 500px) {
  .pj-check-grid { grid-template-columns: 1fr; }
  .pj-success-stats { flex-direction: row; gap: 6px; }
}

/* ═══════════════════════════════════════════════════
   Phase 6-3 · Applicants review modal
   ═══════════════════════════════════════════════════ */
.pjl-apps-link {
  background: transparent; border: 0; padding: 0;
  font: inherit; color: var(--text-primary); font-weight: 700;
  cursor: pointer;
}
/* JOBS-FIX-1 — Current Match identity block is tappable (opens the profile) */
.jobapps-idbtn { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0;
  background: none; border: 0; padding: 0; text-align: left; cursor: pointer;
  font-family: inherit; color: inherit; }
.pjl-apps-link:hover { color: var(--text-primary); }
.jobapps-card {
  max-width: 560px;
  max-height: 92vh;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.jobapps-tabs {
  display: flex; gap: 6px;
  margin: 12px 0 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.jobapps-tab {
  background: transparent; border: 0;
  padding: 8px 4px; margin-bottom: -1px;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  cursor: pointer;
}
.jobapps-tab.active {
  color: var(--text-primary);
  border-bottom-color: var(--text-primary);
}
/* PL-60 · Pending Invites tab bar inside My Job Posts (premium hairline). */
.pl60-tabs {
  display: flex; gap: 20px;
  margin: 14px 0 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  overflow-x: auto;               /* JOBS-UX-2 — six tabs scroll quietly */
  scrollbar-width: none;
}
.pl60-tabs::-webkit-scrollbar { display: none; }
.pl60-tab { white-space: nowrap; flex-shrink: 0; }

/* JOBS-UX-4 — STABLE FRAME: one constant height, header + tab row pinned,
   ONLY .pl60-body scrolls. Switching tabs never moves the window. */
.pjl-card { height: min(720px, 88vh); height: min(720px, 88dvh); max-height: none;
  display: flex; flex-direction: column; overflow: hidden; }
.pjl-card > h3 { flex-shrink: 0; }
.pjl-card .pl60-tabs { flex-shrink: 0; }
.pl60-body { flex: 1; min-height: 0; overflow-y: auto; }
.pl60-body .pjl-list { max-height: none; overflow: visible; }   /* one scroller */
/* JOBS-UX-4 — three-tab segmented control (UI-POLISH-1 op-tabs treatment) */
.pl60-tabs.pl60-seg { background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.09);
  border-bottom: 1px solid rgba(255,255,255,0.09); border-radius: 999px; padding: 3px; gap: 2px; }
.pl60-seg .pl60-tab { flex: 1 1 0; text-align: center; padding: 8px 12px; margin-bottom: 0;
  color: var(--text-muted); border: 1px solid transparent; border-radius: 999px; }
.pl60-seg .pl60-tab.is-active { background: rgba(255,255,255,0.10); color: var(--text-primary);
  border-color: rgba(232,200,121,0.4); box-shadow: 0 1px 6px rgba(0,0,0,0.35); }
.pl60-pipechips { margin-bottom: 12px; }

/* JOBS-UX-2 — Activity feed rows (one gold accent max per row: the chip) */
.pja-row { display: flex; align-items: center; gap: 10px; padding: 9px 2px;
  border-bottom: 1px solid rgba(255,255,255,0.05); }
.pja-row.is-muted { opacity: 0.55; }
.pja-av { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: #1a1c22; }
.pja-main { flex: 1; min-width: 0; }
.pja-line { font-size: 12px; color: var(--text-secondary); line-height: 1.4; }
.pja-line strong { color: var(--text-primary); font-weight: 700; }
.pja-sub { font-size: 10.5px; color: var(--text-muted); margin-top: 1px; }
.pja-chip { display: inline-block; margin-left: 7px; padding: 1px 7px; vertical-align: middle;
  border: 1px solid rgba(232,200,121,0.35); border-radius: 999px;
  font-size: 9px; font-weight: 600; letter-spacing: 0.2px; color: #E8C879; white-space: nowrap; }
.pja-side { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex-shrink: 0; }
.pja-time { font-size: 10px; color: var(--text-muted); white-space: nowrap; }
.pja-cta { background: transparent; border: 1px solid var(--btn-hairline); border-radius: 999px;
  color: #B9BDC4; font-size: 10.5px; font-weight: 600; padding: 3px 12px;
  cursor: pointer; font-family: inherit; }
/* JOBS-UX-3 — tab overflow fade + activity actor badge */
.pl60-tabs.has-more { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }
.pja-avwrap { position: relative; flex-shrink: 0; display: inline-flex; }
.pja-actorbadge { position: absolute; right: -3px; bottom: -3px; width: 16px; height: 16px;
  border-radius: 50%; object-fit: cover; border: 1.5px solid #101216; background: #1a1c22; }
.pja-actorbadge-txt { display: flex; align-items: center; justify-content: center;
  font-size: 8px; font-weight: 800; color: #E8C879; }
/* REF-UI-1 — reference cards (other-profile tab) + written-by-you rows */
.pxref-subs { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 2px; }
.pxref-sub { font-size: 9.5px; color: var(--text-muted); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 999px; padding: 1px 7px; white-space: nowrap; }
.pxref-given-text { font-size: 11px; color: var(--text-secondary); margin: 4px 0 0; font-style: italic; }
/* UI-POLISH-1 — the .cp-review family was UNSTYLED (author photos rendered
   full-width — the ship-a-class-without-its-CSS lesson again). Avatar is a
   40px circle; author meta clamps to one line; stars sit right. */
.cp-review { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; }
.cp-review-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cp-review-logo { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
  background: #1a1c22; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.cp-review-meta { flex: 1; min-width: 0; }
.cp-review-meta strong { display: block; font-size: 13px; font-weight: 700; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-review-meta em { display: block; font-size: 11px; color: var(--text-muted); font-style: normal;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.cp-review-stars { flex-shrink: 0; font-size: 12px; color: #E8C879; white-space: nowrap; letter-spacing: 1px; }
.cp-review-stars em { font-style: normal; color: var(--text-secondary); font-size: 11px; letter-spacing: 0; }
.cp-review-text { font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; margin: 8px 0 0; }

/* PROFILE-UX-1 — the op tab strip is DELETED (stacked sections replace it);
   the UI-POLISH-1 segmented styles moved on to .pl60-seg. Section shells: */
.opsec { margin-top: 26px; border-top: 1px solid rgba(255,255,255,0.07); padding-top: 14px; }
.opsec[hidden] { display: none !important; }        /* UI-POLISH-2 lesson */
.opsec-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.opsec-title { font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase;
  color: #cfd3d8; font-weight: 800; }
.opsec-count { font-size: 11px; color: var(--text-muted); font-weight: 600; }
.opsec-more { display: block; width: 100%; text-align: center; background: none;
  border: 1px solid var(--btn-hairline); border-radius: 999px; color: var(--text-secondary);
  font-size: 12px; font-weight: 600; padding: 8px; margin-top: 10px; cursor: pointer; font-family: inherit; }
.opsec-more[hidden] { display: none !important; }   /* UI-POLISH-2 lesson */
/* Skills — ~two chip rows when capped (naive ceiling, see populator note) */
#opSkillsList.is-capped .px-skills-grid { max-height: 64px; overflow: hidden; }
/* Bulletin — the grid renders one inner div; capped = first row (3 posts) */
#opPostsList.is-capped > div > :nth-child(n+4) { display: none; }
/* See-all sheet — fixed-height scrolling card (JOBS-UX-4 frame pattern) */
.opseeall-card { height: min(680px, 88vh); height: min(680px, 88dvh); max-height: none;
  display: flex; flex-direction: column; overflow: hidden; }
.opseeall-card h3 { flex-shrink: 0; }
.opseeall-body { flex: 1; min-height: 0; overflow-y: auto; }

/* PROFILE-UX-3 — compact header + collapsed content rows */
/* PROFILE-UX-4 — actions on the rank line: 28px controls; Message = filled
   3-dot bubble pill ("chat" mark), text drops at very narrow widths. */
.op-actions .pp-follow-btn { height: 28px; padding: 0 12px; font-size: 11.5px;
  line-height: 26px; margin: 0; white-space: nowrap; }
.op-msg-pill { height: 28px; display: inline-flex; align-items: center; gap: 5px;
  padding: 0 11px; border-radius: 999px; border: 1px solid var(--btn-hairline);
  background: transparent; color: #B9BDC4; font-size: 11.5px; font-weight: 600;
  cursor: pointer; font-family: inherit; flex-shrink: 0; white-space: nowrap; }
.op-msg-pill svg { flex-shrink: 0; }
@media (max-width: 400px) {
  .op-msg-pill span { display: none; }   /* glyph still reads as chat (filled 3-dot bubble) */
  .op-msg-pill { padding: 0 8px; }
  .op-actions .pp-follow-btn { padding: 0 9px; }
}
#opCrewScoreCard { padding: 10px 14px; }
.op-cs-row { display: flex; align-items: center; gap: 12px; }
.op-cs-ring { flex-shrink: 0; }
.op-cs-main { min-width: 0; }
.op-cs-score { font-size: 16px; font-weight: 800; color: #fff; font-feature-settings: 'tnum'; }
.op-cs-band { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.op-cs-sub { font-size: 10.5px; color: var(--text-muted); margin-top: 1px; }
.op-nw-line { display: flex; align-items: baseline; justify-content: center; gap: 8px;
  font-size: 12px; color: var(--text-secondary); }
.op-nw-line strong { color: #fff; font-weight: 700; font-feature-settings: 'tnum'; }
.op-nw-dot { color: var(--text-muted); }
.op-gal-strip { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.op-gal-strip::-webkit-scrollbar { display: none; }
.op-gal-thumb { width: 72px; height: 72px; flex-shrink: 0; border-radius: 10px; cursor: pointer;
  background-color: #1a1c20; background-size: cover; background-position: center; }
.opref-rest[hidden] { display: none !important; }
.opref-expander { display: flex; align-items: center; justify-content: center; gap: 6px; }
.opref-chev, .exp-chev { transition: transform 0.18s ease; }
.opref-expander.is-open .opref-chev { transform: rotate(180deg); }
.op-exp-collapsed.has-desc { cursor: pointer; position: relative; }
.op-exp-collapsed .exp-desc { display: none; }
.op-exp-collapsed.is-open .exp-desc { display: block; }
.op-exp-collapsed .exp-chev { position: absolute; right: 10px; top: 14px; color: var(--text-muted); }
.op-exp-collapsed.is-open .exp-chev { transform: rotate(180deg); }
.pl60-tab {
  background: transparent; border: 0;
  padding: 8px 2px; margin-bottom: -1px;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.pl60-tab.is-active {
  color: var(--text-primary);
  border-bottom-color: var(--text-primary);
}
.pl60-pane { animation: pl60-fade .25s ease both; }
@keyframes pl60-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.jobapps-list {
  display: flex; flex-direction: column; gap: 8px;
  max-height: 60vh; overflow-y: auto;
}
.jobapps-row {
  display: flex; gap: 10px; align-items: center;
  padding: 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
}
.jobapps-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid rgba(255,255,255,0.45);
  flex-shrink: 0;
}
.jobapps-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.jobapps-meta strong { color: #fff; font-size: 13px; font-weight: 700; }
.jobapps-headline { font-size: 11px; color: rgba(255,255,255,0.7); }
.jobapps-meta em { font-size: 10px; color: var(--text-muted); font-style: normal; }
.jobapps-view-profile {
  align-self: flex-start;
  background: transparent; border: 0;
  padding: 4px 0 0;
  font-size: 11px; font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
}
.jobapps-view-profile:hover { color: var(--text-primary); }
.jobapps-actions {
  display: flex; flex-direction: column; gap: 4px;
  flex-shrink: 0;
}
.jobapps-act {
  font-size: 11px; font-weight: 700;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
}
.jobapps-shortlist {
  color: var(--text-primary);
  border-color: rgba(255,255,255,0.45);
  background: rgba(255,255,255,0.08);
}
.jobapps-accept { background: #FFFFFF; color: #111; border-color: var(--text-primary); }
.jobapps-reject {
  color: #fca5a5;
  border-color: rgba(239,68,68,0.45);
  background: rgba(239,68,68,0.08);
}
.jobapps-status-pill {
  font-size: 10px; font-weight: 800;
  padding: 4px 10px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: 1.2px;
  white-space: nowrap;
}
.jobapps-status-pill.jobapps-accepted {
  color: var(--text-primary);
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.45);
}
.jobapps-status-pill.jobapps-rejected {
  color: #fca5a5;
  background: rgba(239,68,68,0.12);
  border: 1px solid rgba(239,68,68,0.4);
}

/* PL-POST-ACCEPT-CTA-fix — Decided tab full-width CTA bar below row */
.jobapps-cta-bar-fullwidth {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  padding: 0 12px 12px 12px;
  flex-wrap: wrap;
}
.jobapps-cta-bar-fullwidth .jobapps-btn-secondary,
.jobapps-cta-bar-fullwidth .jobapps-btn-primary {
  flex: 1;
  min-width: 120px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: none;
}
.jobapps-cta-bar-fullwidth .jobapps-btn-secondary {
  background: rgba(255,255,255,0.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.15);
}
.jobapps-cta-bar-fullwidth .jobapps-btn-secondary:hover {
  background: rgba(255,255,255,0.14);
}
.jobapps-cta-bar-fullwidth .jobapps-btn-primary {
  background: rgba(255,255,255,0.16);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.28);
}
.jobapps-cta-bar-fullwidth .jobapps-btn-primary:hover {
  background: rgba(255,255,255,0.24);
}

/* Pending-invite actions — full-width bar below the candidate row (mirrors
   jobapps-cta-bar-fullwidth). Keeps the long status banner + Withdraw/Message
   off the cramped flex-shrink:0 right column so nothing clips on narrow phones. */
.jobapps-invite-bar { margin-top: 8px; }
.jobapps-invite-bar .jobapps-cta-bar-fullwidth { margin-top: 0; }
.jobapps-invite-status {
  margin: 0 12px 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.22);
  color: var(--text-gold);
  font-size: 11px; font-weight: 700; letter-spacing: 0.01em;
  text-align: center;
  white-space: normal;          /* wrap gracefully — never clip past the card edge */
  overflow-wrap: anywhere;
  max-width: 100%;
}
/* Step 4 — dual-approval status pill (Manager / HR lanes). Mirrors invite-status
   shape but neutral (informational, not a CTA). */
.jobapps-approval-status {
  margin: 0 12px 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--text-secondary);
  font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  max-width: 100%;
}

/* SOA match-history timeline (lazy, viewer-aware) */
.px-soa-wrap { margin-top: 8px; }
.px-soa-toggle { background:none;border:0;color:rgba(255,255,255,0.4);font-size:12px;font-weight:500;letter-spacing:0.01em;cursor:pointer;padding:4px 0; }
.px-soa-panel { margin-top: 6px; }
.px-soa-list { list-style:none;margin:0;padding:0; }
.px-soa-item { position:relative;display:flex;align-items:baseline;gap:8px;padding:4px 0 4px 14px;font-size:12px;color:rgba(255,255,255,0.85); }
.px-soa-item::before { content:'';position:absolute;left:3px;top:12px;bottom:-4px;width:1px;background:rgba(255,255,255,0.12); }
.px-soa-item:last-child::before { display:none; }
.px-soa-dot { position:absolute;left:0;top:7px;width:7px;height:7px;border-radius:50%;background:var(--text-gold,#d4af37); }
.px-soa-label { font-weight:600; }
.px-soa-meta { color:rgba(255,255,255,0.5);font-size:11px; }
.px-soa-empty { font-size:12px;color:rgba(255,255,255,0.5);padding:4px 0; }

/* PL-POST-ACCEPT-CTA-fix — name + subtitle structure */
.jobapps-subtitle {
  font-size: 13px;
  color: #a1a1aa;
  margin-top: 2px;
}

/* PL-POST-ACCEPT-CTA — Cuadrix My Apps status sub-label */
.myapps-sub-label {
  margin-top: 4px;
  font-size: 12px;
  color: #a1a1aa;
  font-style: italic;
}

.jobapps-empty {
  padding: 28px 16px;
  text-align: center;
  color: rgba(255,255,255,0.55);
  font-size: 13px;
}

/* ═══════════════════════════════════════════════════
   Phase 6-3c · HQ Recruiting tile (The One entry point)
   ═══════════════════════════════════════════════════ */
.hq-jobs-card {
  position: relative;
  display: block; width: 100%;
  padding: 18px 18px 16px;
  margin: 12px 0 18px;
  background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid var(--border-gold);
  border-radius: var(--r-lg);
  cursor: pointer;
  text-align: left;
  transition: transform 0.18s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  overflow: hidden;
}
.hq-jobs-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 40px rgba(255,255,255,0.22);
  border-color: var(--text-primary);
}
.hq-jobs-glow {
  position: absolute; inset: -40% -20% auto auto;
  width: 200px; height: 200px; pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,0.18), transparent 70%);
  filter: blur(30px);
}
.hq-jobs-header {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 6px;
}
.hq-jobs-icon { font-size: 20px; }
.hq-jobs-eyebrow {
  font-size: 10px; font-weight: 800; letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--text-primary);
}
.hq-jobs-title {
  font-family: 'Playfair Display', serif;
  font-size: 22px; font-weight: 800; letter-spacing: -0.4px;
  color: #fff;
  margin: 0 0 4px;
}
.hq-jobs-sub {
  font-size: 13px; color: rgba(255,255,255,0.78);
  margin: 0 0 10px;
}
.hq-jobs-cta {
  display: inline-block;
  font-size: 12px; font-weight: 700; letter-spacing: 0.4px;
  color: var(--text-primary);
}
.hq-jobs-card:hover .hq-jobs-cta { color: var(--text-primary); }
.hq-jobs-badge {
  position: absolute; top: 14px; right: 14px;
  font-size: 10px; font-weight: 800; letter-spacing: 1px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ef4444, #f87171);
  color: #fff;
  box-shadow: 0 4px 12px rgba(239,68,68,0.35);
  white-space: nowrap;
  z-index: 2;
}

/* ═══════════════════════════════════════════════════
   Phase 6-4 · Cuadrix My Applications (HQ tile + modal)
   ═══════════════════════════════════════════════════ */
.hq-myapps-card {
  position: relative;
  display: block; width: 100%;
  padding: 18px 18px 16px;
  margin: 12px 0 18px;
  background: linear-gradient(135deg, rgba(96,165,250,0.06), rgba(96,165,250,0.02));
  border: 1px solid rgba(96,165,250,0.35);
  border-radius: var(--r-lg);
  cursor: pointer;
  text-align: left;
  transition: transform 0.18s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  overflow: hidden;
}
.hq-myapps-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 40px rgba(96,165,250,0.22);
  border-color: rgba(96,165,250,0.55);
}
.hq-myapps-glow {
  position: absolute; inset: -40% -20% auto auto;
  width: 200px; height: 200px; pointer-events: none;
  background: radial-gradient(circle, rgba(96,165,250,0.18), transparent 70%);
  filter: blur(30px);
}
.hq-myapps-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.hq-myapps-icon { font-size: 20px; }
.hq-myapps-eyebrow {
  font-size: 10px; font-weight: 800; letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #93c5fd;
}
.hq-myapps-title {
  font-family: 'Playfair Display', serif;
  font-size: 22px; font-weight: 800; letter-spacing: -0.4px;
  color: #fff;
  margin: 0 0 4px;
}
.hq-myapps-sub { font-size: 13px; color: rgba(255,255,255,0.78); margin: 0 0 10px; }
.hq-myapps-cta {
  display: inline-block;
  font-size: 12px; font-weight: 700; letter-spacing: 0.4px;
  color: #93c5fd;
}
.hq-myapps-card:hover .hq-myapps-cta { color: #60a5fa; }
.hq-myapps-badge {
  position: absolute; top: 14px; right: 14px;
  font-size: 10px; font-weight: 800; letter-spacing: 1px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #FFFFFF, #B0B4BC);
  color: #111;
  box-shadow: 0 4px 12px rgba(255,255,255,0.45);
  white-space: nowrap;
  z-index: 2;
}

/* My Applications modal */
.myapps-card {
  max-width: 560px;
  max-height: 92vh;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.myapps-tabs {
  display: flex; gap: 6px;
  margin: 12px 0 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.myapps-tab {
  background: transparent; border: 0;
  padding: 8px 4px; margin-bottom: -1px;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  cursor: pointer;
}
.myapps-tab.active {
  color: var(--text-primary);
  border-bottom-color: var(--text-primary);
}
.myapps-list {
  display: flex; flex-direction: column; gap: 8px;
  max-height: 60vh; overflow-y: auto;
}
.myapps-row {
  display: flex; gap: 10px;
  padding: 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
}
.myapps-logo {
  width: 44px; height: 44px; border-radius: var(--r-sm);
  object-fit: cover;
  background: #fff;
  border: 1.5px solid rgba(255,255,255,0.85);
  flex-shrink: 0;
}
.myapps-body {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.myapps-body strong { color: #fff; font-size: 13px; font-weight: 700; }
.myapps-brand { font-size: 11px; color: var(--text-primary); font-weight: 600; }
.myapps-meta { font-size: 11px; color: rgba(255,255,255,0.7); }
.myapps-body em { font-size: 10px; color: var(--text-muted); font-style: normal; }
.myapps-view-job {
  align-self: flex-start;
  background: transparent; border: 0;
  padding: 4px 0 0;
  font-size: 11px; font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
}
.myapps-view-job:hover { color: var(--text-primary); }

/* PL-CHAT-ENTRY-CUADRIX — Cuadrix My Apps Message button +
   actions row container */
.myapps-actions-row {
  display: flex;
  gap: 8px;
  align-items: center;
  padding-top: 4px;
  flex-wrap: wrap;
}
.myapps-message-btn {
  background: rgba(255,255,255, 0.15);
  border: 1px solid rgba(255,255,255, 0.4);
  color: var(--text-primary);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
}
.myapps-message-btn:hover {
  background: rgba(255,255,255, 0.28);
  color: var(--text-primary);
}

/* Phase B-3 — Cuadrix Confirm Booking CTA (action-required primary) */
.myapps-booking-btn {
  background: #FFFFFF;
  border: none;
  color: #111;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 999px;
  cursor: pointer;
}
.myapps-booking-btn:hover {
  background: #B0B4BC;
}

/* Phase B-5a — Cuadrix Mark Complete chip (green success theme) */
.myapps-complete-btn {
  background: rgba(52, 199, 89, 0.18);
  border: 1px solid rgba(52, 199, 89, 0.5);
  color: #2e7d32;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
}
.myapps-complete-btn:hover {
  background: rgba(52, 199, 89, 0.28);
  color: #1b5e20;
}

/* PL-MARK-COMPLETE-TIME-DISPLAY — shift elapsed time UI */
.shift-elapsed-row strong { font-weight: 600; }
.shift-elapsed-done strong  { color: #2e7d32; }
.shift-elapsed-mid strong   { color: #b8860b; }
.shift-elapsed-early strong { color: #c0392b; }

.shift-elapsed-bar-wrap {
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  margin: 4px 0 12px 0;
  overflow: hidden;
}
.shift-elapsed-bar {
  height: 100%;
  background: #FFFFFF;
  transition: width 0.3s ease;
}
.shift-elapsed-row.shift-elapsed-done ~ .shift-elapsed-bar-wrap .shift-elapsed-bar {
  background: #2e7d32;
}
.shift-elapsed-row.shift-elapsed-early ~ .shift-elapsed-bar-wrap .shift-elapsed-bar {
  background: #c0392b;
}

.shift-warning {
  background: rgba(192, 57, 43, 0.08);
  border-left: 3px solid #c0392b;
  padding: 8px 10px;
  border-radius: 4px;
}

/* Phase B-4 — Fund Escrow modal alpha banner + low-balance row + disabled btn */
/* PL-67 — quiet premium finance note (replaced the ALPHA "no real payments"
   warning banners). PL-54 language: dark glass, hairline gold top edge, muted
   text, no warning triangle. */
.pl67-finance-note {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top: 1px solid #FFFFFF;
  color: var(--text-muted, rgba(255, 255, 255, 0.62));
  font-size: 12px;
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 14px;
  line-height: 1.45;
}
.pxcs-row-balance-low strong {
  color: #c0392b;
}
.btn-disabled {
  opacity: 0.5;
  cursor: not-allowed !important;
}
.myapps-side {
  display: flex; flex-direction: column; gap: 6px;
  align-items: flex-end;
  flex-shrink: 0;
}
.myapps-pill {
  font-size: 9px; font-weight: 800;
  letter-spacing: 1.2px; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
  white-space: nowrap;
  border: 1px solid;
}
.myapps-awaiting {
  color: var(--text-secondary);
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.18);
}
.myapps-shortlisted {
  color: var(--text-primary);
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.45);
}
.myapps-accepted {
  color: #111;
  background: linear-gradient(135deg, #FFFFFF, #B0B4BC);
  border-color: var(--text-primary);
  box-shadow: 0 0 12px rgba(255,255,255,0.45);
}
.myapps-rejected {
  color: #fca5a5;
  background: rgba(239,68,68,0.1);
  border-color: rgba(239,68,68,0.35);
}
.myapps-withdraw {
  font-size: 10px; font-weight: 700;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid rgba(239,68,68,0.4);
  background: transparent;
  color: #fca5a5;
  cursor: pointer;
  white-space: nowrap;
}
.myapps-withdraw:hover { background: rgba(239,68,68,0.08); }

/* ══════════════════════════════════════════════════════════
   Team & Access Management module
   ══════════════════════════════════════════════════════════ */
.pxt-modal .pxt-card,
.pxt-modal .pxmw-card {
  max-width: 560px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.pxt-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.pxt-eyebrow {
  font-size: 10px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: #B0B4BC;
  font-weight: 800;
  margin-bottom: 2px;
}
.pxt-head h3 {
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  color: #fff;
  margin: 0;
}
.pxt-add-cta {
  padding: 8px 16px;
  font-size: 12px;
  white-space: nowrap;
}

.pxt-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: rgba(255,255,255,0.03);
  border-radius: 10px;
  margin-bottom: 12px;
}
.pxt-tab {
  flex: 1;
  padding: 8px 10px;
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.65);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.15s ease, color 0.15s ease;
}
.pxt-tab:hover { color: #fff; }
.pxt-tab.is-active {
  background: rgba(255,255,255,0.15);
  color: #B0B4BC;
}
.pxt-body {
  flex: 1;
  overflow-y: auto;
  padding-right: 4px;
}

.pxt-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.pxt-stats > div {
  padding: 10px 8px;
  text-align: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 10px;
}
.pxt-stats strong {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  color: #B0B4BC;
  font-weight: 800;
}
.pxt-stats span {
  display: block;
  font-size: 10px;
  color: rgba(255,255,255,0.6);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 2px;
}

.pxt-section-head {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.1px;
  font-weight: 800;
  color: #B0B4BC;
  margin: 14px 0 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255,255,255,0.2);
}
.pxt-group { margin-bottom: 10px; }
.pxt-group-head {
  font-size: 12px;
  color: #fff;
  font-weight: 700;
  margin-bottom: 6px;
  letter-spacing: 0.3px;
}
.pxt-group-head em {
  color: rgba(255,255,255,0.5);
  font-weight: 500;
  font-style: normal;
  margin-left: 4px;
}
.pxt-member-row {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  margin-bottom: 6px;
  align-items: flex-start;
}
.pxt-member-row.is-suspended { opacity: 0.65; border-color: rgba(251,146,60,0.3); }
.pxt-member-row.is-pending { border-color: rgba(59,130,246,0.3); background: rgba(59,130,246,0.05); }
.pxt-mem-photo {
  width: 40px; height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.pxt-mem-info { flex: 1; min-width: 0; }
.pxt-mem-info strong { display: flex; align-items: center; gap: 6px; color: #fff; font-size: 13px; font-weight: 700; flex-wrap: wrap; }
.pxt-mem-info span { display: block; color: rgba(255,255,255,0.65); font-size: 11px; margin-top: 2px; }
.pxt-mem-info em { display: block; color: rgba(255,255,255,0.5); font-size: 10px; font-style: normal; margin-top: 3px; }
.pxt-badge {
  font-size: 9px;
  padding: 2px 7px;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.pxt-pending { background: rgba(59,130,246,0.18); color: #93c5fd; }
.pxt-suspended { background: rgba(251,146,60,0.18); color: #fdba74; }
.pxt-mem-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}
.pxt-mem-actions button {
  font-size: 10px;
  padding: 5px 10px;
  background: transparent;
  color: #B0B4BC;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 6px;
  cursor: pointer;
  font-weight: 700;
  white-space: nowrap;
}
.pxt-mem-actions button:hover { background: rgba(255,255,255,0.1); }
.pxt-mem-actions button.is-danger { color: #f87171; border-color: rgba(248,113,113,0.28); }
.pxt-mem-actions button.is-danger:hover { background: rgba(248,113,113,0.08); }
/* BTN-2 — Tribe Management member-row actions on the same compact secondary */
.pxt-mem-actions button:not(.is-danger) { color: #B9BDC4; border: 1px solid var(--btn-hairline); border-radius: 999px; font-weight: 600; }
.pxt-mem-actions button:not(.is-danger):hover { border-color: rgba(255,255,255,0.28); color: #fff; background: transparent; }
.pxt-verified {
  font-size: 9px;
  color: #4ade80;
  background: rgba(34,197,94,0.12);
  padding: 1px 6px;
  border-radius: 4px;
}

.pxt-empty {
  text-align: center;
  padding: 40px 20px;
  color: rgba(255,255,255,0.6);
}
.pxt-empty-ico { font-size: 48px; margin-bottom: 10px; }
.pxt-empty h4 {
  font-family: 'Playfair Display', serif;
  font-size: 16px;
  color: #fff;
  margin: 0 0 6px;
}
.pxt-empty p { font-size: 12px; line-height: 1.5; margin: 0 auto 12px; max-width: 340px; }
.pxt-empty-mini {
  padding: 14px;
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  font-style: italic;
  text-align: center;
}

/* ── Wizard stepper ── */
.pxmw-stepper {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  padding: 4px 2px 14px;
  margin: -4px -4px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.2);
}
.pxmw-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  position: relative;
}
.pxmw-step-num {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  border: 1.5px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 12px;
}
.pxmw-step.is-done .pxmw-step-num {
  background: rgba(255,255,255,0.2);
  border-color: #B0B4BC;
  color: #B0B4BC;
}
.pxmw-step.is-current .pxmw-step-num {
  background: #B0B4BC;
  border-color: #B0B4BC;
  color: #0a0a0a;
}
.pxmw-step-lbl {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: rgba(255,255,255,0.5);
  font-weight: 700;
}
.pxmw-step.is-current .pxmw-step-lbl { color: #B0B4BC; }

.pxmw-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: rgba(255,255,255,0.03);
  border-radius: 10px;
  margin: 10px 0 12px;
}
.pxmw-tab {
  flex: 1;
  padding: 8px 10px;
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.65);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  border-radius: 8px;
}
.pxmw-tab:hover { color: #fff; }
.pxmw-tab.is-active { background: rgba(255,255,255,0.15); color: #B0B4BC; }

.pxmw-pane {
  max-height: 52vh;
  overflow-y: auto;
  padding-right: 4px;
  margin-bottom: 10px;
}

.pxmw-results {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
.pxmw-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.02);
  border: 1.5px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
}
.pxmw-user:hover { border-color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.05); }
.pxmw-user.is-selected { border-color: #B0B4BC; background: rgba(255,255,255,0.12); }
.pxmw-user img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.pxmw-user-info { flex: 1; min-width: 0; }
.pxmw-user-info strong { display: block; color: #fff; font-size: 13px; font-weight: 700; }
.pxmw-user-info span { display: block; color: rgba(255,255,255,0.65); font-size: 11px; margin-top: 1px; }
.pxmw-user-info em { display: block; color: rgba(255,255,255,0.5); font-size: 10px; font-style: normal; margin-top: 2px; }
.pxmw-user-cta {
  font-size: 10px;
  font-weight: 800;
  color: #B0B4BC;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ── Permission meter + groups ── */
.pxt-meter {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 10px;
  margin: 6px 0 10px;
}
.pxt-meter-label { font-size: 11px; color: rgba(255,255,255,0.85); flex-shrink: 0; }
.pxt-meter-label strong { color: #fff; }
.pxt-meter-bar {
  flex: 1;
  height: 6px;
  background: rgba(255,255,255,0.08);
  border-radius: 999px;
  overflow: hidden;
}
.pxt-meter-fill {
  height: 100%;
  background: linear-gradient(90deg, #B0B4BC, #B0B4BC);
  transition: width 0.3s ease;
}
.pxt-meter-pct {
  font-size: 11px;
  font-weight: 800;
  color: #B0B4BC;
  min-width: 32px;
  text-align: right;
}
.pxt-quick-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.pxt-quick-btn {
  padding: 6px 10px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.3);
  color: #B0B4BC;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.pxt-quick-btn:hover { background: rgba(255,255,255,0.1); }
.pxt-quick-tpl {
  padding: 6px 10px;
  background: #1a1a1a;
  border: 1px solid rgba(255,255,255,0.3);
  color: #B0B4BC;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.pxt-perm-groups { display: flex; flex-direction: column; gap: 6px; }
.pxt-perm-group {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  overflow: hidden;
}
.pxt-perm-group[open] { border-color: rgba(255,255,255,0.3); }
.pxt-perm-group summary {
  padding: 10px 14px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #fff;
  font-weight: 700;
  list-style: none;
}
.pxt-perm-group summary::-webkit-details-marker { display: none; }
.pxt-perm-group summary em {
  font-size: 10px;
  color: rgba(255,255,255,0.5);
  font-style: normal;
  font-weight: 500;
}
.pxt-perm-rows {
  padding: 4px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pxt-perm-row {
  display: flex;
  gap: 10px;
  padding: 8px 10px;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 8px;
  cursor: pointer;
  align-items: flex-start;
  transition: all 0.1s ease;
}
.pxt-perm-row:hover { border-color: rgba(255,255,255,0.3); }
.pxt-perm-row.is-on { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.45); }
.pxt-perm-row input[type="checkbox"] { margin-top: 2px; accent-color: #B0B4BC; flex-shrink: 0; }
.pxt-perm-info strong { display: block; color: #fff; font-size: 12px; font-weight: 700; }
.pxt-perm-info span { display: block; color: rgba(255,255,255,0.55); font-size: 10px; margin-top: 2px; line-height: 1.4; }

/* ── Limits section ── */
.pxt-lim-section {
  padding: 10px 14px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  margin-bottom: 10px;
}
.pxt-lim-head {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 800;
  color: #B0B4BC;
  margin-bottom: 8px;
}
.pxt-lim-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 12px;
  color: rgba(255,255,255,0.85);
  cursor: pointer;
}
.pxt-lim-row input { accent-color: #B0B4BC; }

/* ── Review block ── */
.pxt-review {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 10px;
}
.pxt-review-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(255,255,255,0.2);
  margin-bottom: 10px;
}
.pxt-review-head img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.pxt-review-head strong {
  display: block;
  font-family: 'Playfair Display', serif;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
}
.pxt-review-head span { display: block; color: rgba(255,255,255,0.7); font-size: 11px; margin-top: 2px; }
.pxt-review-head em { display: block; color: rgba(255,255,255,0.5); font-size: 10px; font-style: normal; margin-top: 3px; }
.pxt-review-block { margin-top: 10px; }
.pxt-review-block h5 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #B0B4BC;
  margin: 0 0 6px;
  font-weight: 800;
}
.pxt-review-block.pxt-review-no h5 { color: #f87171; }
.pxt-review-group { margin-bottom: 6px; }
.pxt-review-group strong { display: block; font-size: 11px; color: rgba(255,255,255,0.85); margin-bottom: 2px; }
.pxt-review-line { font-size: 11px; color: rgba(255,255,255,0.7); padding: 2px 0; }

/* ── Templates tab ── */
.pxt-tpl-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.pxt-tpl-head strong { font-size: 12px; color: rgba(255,255,255,0.85); }
.btn-sm { padding: 6px 12px; font-size: 11px; }
.pxt-tpl-list { display: flex; flex-direction: column; gap: 6px; }
.pxt-tpl-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
}
.pxt-tpl-info { flex: 1; min-width: 0; }
.pxt-tpl-info strong { display: block; color: #fff; font-size: 13px; font-weight: 700; }
.pxt-tpl-info span { display: block; color: rgba(255,255,255,0.6); font-size: 11px; margin-top: 2px; }
.pxt-tpl-actions { display: flex; gap: 4px; flex-shrink: 0; }
.pxt-tpl-actions button {
  font-size: 10px;
  padding: 5px 10px;
  background: transparent;
  color: #B0B4BC;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 6px;
  cursor: pointer;
  font-weight: 700;
}
.pxt-tpl-actions button.is-danger { color: #f87171; border-color: rgba(248,113,113,0.3); }

/* ── Audit tab ── */
.pxt-audit-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.pxt-audit-head strong { font-size: 12px; color: rgba(255,255,255,0.85); }
.pxt-audit-list { display: flex; flex-direction: column; gap: 6px; }
.pxt-audit-row {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  align-items: flex-start;
}
.pxt-audit-ico {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.pxt-audit-body { flex: 1; min-width: 0; }
.pxt-audit-body strong { display: block; color: #fff; font-size: 12px; font-weight: 700; }
.pxt-audit-body span { display: block; color: rgba(255,255,255,0.6); font-size: 10px; margin-top: 2px; }
.pxt-audit-body em { display: block; color: rgba(255,255,255,0.5); font-size: 10px; margin-top: 3px; font-style: normal; }

@media (max-width: 500px) {
  .pxt-stats { grid-template-columns: 1fr 1fr; }
  .pxt-member-row { flex-wrap: wrap; }
  .pxt-mem-actions { width: 100%; flex-direction: row; flex-wrap: wrap; justify-content: flex-end; }
  .pxmw-step-lbl { display: none; }
}

/* ══════════════════════════════════════════════════════════
   Line Manager · Department + Role dropdown visibility
   ══════════════════════════════════════════════════════════ */
.lm-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #B0B4BC;
  letter-spacing: 0.3px;
  margin-bottom: 6px;
}
.lm-label .req { color: #f87171; }
.lm-dropdown-wrap {
  position: relative;
}
.lm-dropdown-wrap::after {
  content: '';
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-right: 2px solid #FFFFFF;
  border-bottom: 2px solid #FFFFFF;
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.line-manager-dropdown,
.line-manager-role-dropdown {
  background: #ffffff;
  color: #000000;
  border: 2px solid #FFFFFF;
  padding: 12px 40px 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  font-family: 'Inter', sans-serif;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.line-manager-dropdown:hover,
.line-manager-role-dropdown:hover {
  border-color: #FFFFFF;
}
.line-manager-dropdown:focus,
.line-manager-role-dropdown:focus {
  outline: none;
  border-color: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(255,255,255, 0.2);
}
.line-manager-dropdown:disabled,
.line-manager-role-dropdown:disabled {
  background: #f3f4f6;
  color: #9ca3af;
  cursor: not-allowed;
  border-color: rgba(255,255,255, 0.35);
}
.line-manager-dropdown option,
.line-manager-role-dropdown option {
  background: #ffffff;
  color: #000000;
  padding: 8px;
  font-weight: 500;
}
.line-manager-dropdown option:disabled,
.line-manager-role-dropdown option:disabled {
  color: #9ca3af;
}
.lm-helper {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  font-style: italic;
}
.lm-custom-role {
  margin-top: 8px;
}
@media (max-width: 500px) {
  .line-manager-dropdown,
  .line-manager-role-dropdown {
    padding: 14px 40px 14px 16px;
    font-size: 15px;
  }
}

/* ══════════════════════════════════════════════════════════
   Role-gated Wallet modal
   ══════════════════════════════════════════════════════════ */
.pxw-modal .pxw-card {
  max-width: 460px;
  max-height: 92vh;
  overflow-y: auto;
}
.pxw-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: rgba(255,255,255,0.03);
  border-radius: 10px;
  margin-bottom: 12px;
}
.pxw-tab {
  flex: 1;
  padding: 8px 10px;
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.65);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  border-radius: 8px;
}
.pxw-tab:hover { color: #fff; }
.pxw-tab.is-active { background: rgba(255,255,255,0.15); color: #B0B4BC; }
.pxw-head { margin-bottom: 12px; }
.pxw-eyebrow {
  font-size: 10px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: #B0B4BC;
  font-weight: 800;
}
.pxw-title {
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  color: #fff;
  font-weight: 800;
  margin: 2px 0 4px;
}
.pxw-balance {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px;
  background: linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.05));
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 12px;
  margin-bottom: 10px;
}
.pxw-balance span {
  font-size: 10px;
  color: rgba(255,255,255,0.65);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.pxw-balance strong {
  font-family: 'Playfair Display', serif;
  font-size: 28px;
  color: #B0B4BC;
  font-weight: 800;
}
/* PL-BEACON-WALLET P4 — member allowance block under the balance card */
.pxw-allowance {
  margin-top: 10px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
}
.pxw-allowance > span {
  font-size: 10px;
  color: rgba(255,255,255,0.65);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.pxw-allowance-bar {
  height: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  margin: 8px 0;
  overflow: hidden;
}
.pxw-allowance-fill {
  height: 100%;
  border-radius: 999px;
  background: #E8C879;
}
.pxw-allowance-line {
  font-size: 13px;
  color: #fff;
}
.pxw-allowance-line.pxw-allowance-muted {
  color: rgba(255,255,255,0.55);
  font-size: 12px;
  margin-top: 6px;
}
.pxw-allowance-ext {
  font-style: normal;
  font-size: 11.5px;
  color: rgba(255,255,255,0.55);
  margin-left: 4px;
}
/* PL-WALLET-UI-DISPLAY — held-in-escrow sub-line under main balance */
.wallet-blocked-sub {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 4px;
  font-weight: 400;
}
.pxw-limit {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.pxw-limit-bar {
  height: 6px;
  background: rgba(255,255,255,0.08);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 6px;
}
.pxw-limit-fill {
  height: 100%;
  background: linear-gradient(90deg, #B0B4BC, #B0B4BC);
}
.pxw-limit span {
  font-size: 11px;
  color: rgba(255,255,255,0.65);
}
.pxw-section {
  padding: 12px 0;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.pxw-section:first-of-type { border-top: none; }
.pxw-section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.pxw-section-head strong {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #B0B4BC;
  font-weight: 800;
}
.pxw-card-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  font-size: 12px;
  color: rgba(255,255,255,0.85);
  margin-bottom: 4px;
}
.pxw-card-brand {
  font-size: 10px;
  font-weight: 900;
  padding: 3px 7px;
  background: #1a1f71;
  color: #fff;
  border-radius: 4px;
  letter-spacing: 0.5px;
}
.pxw-card-row strong { color: #fff; font-family: 'Inter', monospace; }
.pxw-card-row em { color: rgba(255,255,255,0.5); font-style: normal; font-size: 11px; margin-left: auto; }
.pxw-default {
  font-size: 9px;
  font-weight: 800;
  padding: 2px 7px;
  background: #B0B4BC;
  color: #0a0a0a;
  border-radius: 999px;
  text-transform: uppercase;
}
.pxw-add {
  display: block;
  margin-top: 6px;
  background: transparent;
  border: 1px dashed rgba(255,255,255,0.35);
  color: #B0B4BC;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  width: 100%;
}
.pxw-add:hover { background: rgba(255,255,255,0.08); }
.pxw-usedfor {
  padding: 10px 12px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  margin-bottom: 10px;
}
.pxw-usedfor-head {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #B0B4BC;
  font-weight: 800;
  margin-bottom: 6px;
}
.pxw-usedfor ul { margin: 0; padding: 0 0 0 18px; }
.pxw-usedfor li { font-size: 11px; color: rgba(255,255,255,0.75); padding: 3px 0; }
.pxw-pay-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 6px;
}
.pxw-pay-btn {
  padding: 10px;
  background: rgba(255,255,255,0.03);
  border: 1.5px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
}
.pxw-pay-btn:hover { border-color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.05); }
.pxw-pay-btn span { font-size: 20px; display: block; margin-bottom: 2px; }
.pxw-pay-btn strong { display: block; color: #fff; font-size: 12px; font-weight: 700; }
.pxw-pay-btn em { display: block; color: rgba(255,255,255,0.6); font-size: 10px; font-style: normal; margin-top: 2px; }
.pxw-viewall {
  font-size: 10px;
  background: transparent;
  border: none;
  color: #B0B4BC;
  font-weight: 700;
  cursor: pointer;
}
.pxw-tx-list { display: flex; flex-direction: column; gap: 4px; }
.pxw-tx {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
}
.pxw-tx-ico {
  width: 28px; height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
  flex-shrink: 0;
}
.pxw-tx-ico.credit { background: rgba(34,197,94,0.15); color: #4ade80; }
.pxw-tx-ico.debit { background: rgba(248,113,113,0.12); color: #fca5a5; }
.pxw-tx-body { flex: 1; min-width: 0; }
.pxw-tx-body strong { display: block; color: #fff; font-size: 12px; font-weight: 700; }
.pxw-tx-body span { display: block; color: rgba(255,255,255,0.55); font-size: 10px; margin-top: 2px; }
.pxw-tx-amt { font-size: 12px; font-weight: 800; white-space: nowrap; }
.pxw-tx-amt.credit { color: #4ade80; }
.pxw-tx-amt.debit { color: #fca5a5; }
.pxw-empty-mini {
  padding: 10px;
  color: rgba(255,255,255,0.5);
  font-size: 11px;
  text-align: center;
  font-style: italic;
}
.pxw-admin-tools {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

/* ══════════════════════════════════════════════════════════
   Full Settings modal
   ══════════════════════════════════════════════════════════ */
.pxset-modal .pxset-card {
  max-width: 540px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.pxset-head {
  padding-bottom: 10px;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,0.2);
  position: relative;
}
.pxset-eyebrow {
  font-size: 10px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: #B0B4BC;
  font-weight: 800;
}
.pxset-head h3 {
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  color: #fff;
  margin: 2px 0 4px;
}
.pxset-role {
  font-size: 10px;
  color: rgba(255,255,255,0.65);
  padding: 3px 10px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 999px;
  display: inline-block;
}
.pxset-body {
  flex: 1;
  overflow-y: auto;
  padding: 4px 2px 12px;
}
.pxset-section {
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.pxset-section:last-child { border-bottom: none; }
.pxset-section h4 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.9px;
  font-weight: 800;
  color: #B0B4BC;
  margin: 0 0 10px;
}
.pxset-section-danger h4 { color: #f87171; }
.pxset-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 10px;
  padding: 6px 0;
  align-items: start;
}
.pxset-row label {
  font-size: 12px;
  color: rgba(255,255,255,0.7);
  font-weight: 600;
}
.pxset-val {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
  color: rgba(255,255,255,0.9);
}
.pxset-val.pxset-col {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.pxset-verified {
  font-size: 10px;
  color: #4ade80;
  background: rgba(34,197,94,0.12);
  padding: 2px 7px;
  border-radius: 999px;
  font-weight: 700;
}
.pxset-muted { color: rgba(255,255,255,0.45); font-style: italic; font-size: 11px; }
.pxset-link {
  background: transparent;
  border: none;
  color: #B0B4BC;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  padding: 2px 4px;
  margin: 0 4px 0 0;
}
.pxset-link:hover { text-decoration: underline; }
.pxset-link.pxset-danger, .pxset-danger { color: #f87171 !important; }
.pxset-radio, .pxset-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: rgba(255,255,255,0.85);
  cursor: pointer;
  padding: 3px 0;
}
.pxset-radio input, .pxset-check input {
  accent-color: #B0B4BC;
}
.pxset-row-action { grid-template-columns: 1fr; padding: 8px 0; }
.pxset-sub-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  margin-bottom: 6px;
}
.pxset-sub-row strong { display: block; color: #fff; font-size: 12px; font-weight: 700; }
.pxset-sub-row span { display: block; color: rgba(255,255,255,0.6); font-size: 11px; margin-top: 2px; }
.pxset-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pxset-links button {
  padding: 10px 12px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  color: rgba(255,255,255,0.85);
  text-align: left;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
}
.pxset-links button:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.3); }
.pxset-links button.pxset-danger { color: #f87171 !important; border-color: rgba(248,113,113,0.25); }
.pxset-actions { padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.2); margin-top: 4px; }

/* Leave Entity */
.pxle-card { max-width: 460px; }
.pxle-consequences {
  padding: 10px 14px;
  background: rgba(251,146,60,0.08);
  border: 1px solid rgba(251,146,60,0.25);
  border-radius: 10px;
  margin: 10px 0;
}
.pxle-consequences strong {
  display: block;
  font-size: 11px;
  color: #fdba74;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.pxle-consequences ul { margin: 0; padding: 0 0 0 18px; }
.pxle-consequences li { font-size: 11px; color: rgba(255,255,255,0.75); padding: 2px 0; line-height: 1.4; }

/* ══════════════════════════════════════════════════════════
   CV Builder modal
   ══════════════════════════════════════════════════════════ */
.pxcv-modal .pxcv-card { max-width: 460px; }
.pxcv-section { padding: 10px 0; border-top: 1px solid rgba(255,255,255,0.06); }
.pxcv-section:first-of-type { border-top: none; }
.pxcv-section-head {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.9px;
  font-weight: 800;
  color: #B0B4BC;
  margin-bottom: 8px;
}
.pxcv-tpl-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.pxcv-tpl {
  padding: 10px;
  background: rgba(255,255,255,0.02);
  border: 1.5px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
}
.pxcv-tpl:hover { border-color: rgba(255,255,255,0.4); }
.pxcv-tpl.is-selected { border-color: #B0B4BC; background: rgba(255,255,255,0.08); }
.pxcv-tpl strong { display: block; color: #fff; font-size: 12px; font-weight: 700; margin-bottom: 2px; }
.pxcv-tpl span { display: block; color: rgba(255,255,255,0.6); font-size: 10px; }
.pxcv-tpl-swatch {
  height: 28px;
  border-radius: 6px;
  margin-bottom: 6px;
}
.pxcv-sw-premium { background: linear-gradient(135deg, #0a0a0a, #1a1a1a 40%, #B0B4BC); }
.pxcv-sw-modern { background: linear-gradient(135deg, #fff, #f3f4f6); border: 1px solid #e5e7eb; }
.pxcv-sw-classic { background: #fff; border: 2px solid #111; }
.pxcv-sw-creative { background: linear-gradient(135deg, #ec4899, #8b5cf6, #3b82f6); }

.pxcv-len-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
}
.pxcv-len {
  padding: 10px;
  background: rgba(255,255,255,0.02);
  border: 1.5px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
}
.pxcv-len:hover { border-color: rgba(255,255,255,0.4); }
.pxcv-len.is-selected { border-color: #B0B4BC; background: rgba(255,255,255,0.08); }
.pxcv-len strong { display: block; color: #fff; font-size: 12px; font-weight: 700; }
.pxcv-len span { display: block; color: rgba(255,255,255,0.6); font-size: 10px; margin-top: 2px; }

.pxcv-dl-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.pxcv-dl {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  cursor: pointer;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}
.pxcv-dl:hover { border-color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.05); }
.pxcv-stamp {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: rgba(0,0,0,0.55);
  padding: 6px 14px;
  background: rgba(255,255,255,0.1);
  border-bottom: 1px solid rgba(255,255,255,0.25);
  text-align: right;
  font-weight: 700;
}

/* Template-specific CV overrides */
.cv-doc[data-pxcv-template="modern"] { background: #fff !important; }
.cv-doc[data-pxcv-template="classic"] { background: #fff !important; }
.cv-doc[data-pxcv-template="creative"] { background: linear-gradient(135deg, #fff, #f9fafb); }

@media (max-width: 500px) {
  .pxset-row { grid-template-columns: 1fr; }
  .pxset-row label { margin-bottom: 2px; }
  .pxcv-tpl-grid, .pxcv-dl-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════
   Add Team Member entry buttons (HR Team screen)
   ══════════════════════════════════════════════════════════ */
.hr-sub-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.st-dept-h {
  display: flex;
  align-items: center;
  gap: 8px;
}
.st-dept-h em { margin-right: auto; }
.st-dept-add {
  margin-left: auto;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.3px;
  color: #B0B4BC;
  background: transparent;
  border: 1px dashed rgba(255,255,255, 0.45);
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.st-dept-add:hover {
  background: rgba(255,255,255, 0.12);
  border-style: solid;
  border-color: #B0B4BC;
}

/* ══════════════════════════════════════════════════════════
   Employment Preferences v2 · FT salary + Gig hourly rate
   ══════════════════════════════════════════════════════════ */
.pxemp-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 10px;
  padding: 8px 0;
  align-items: flex-start;
}
.pxemp-row > label {
  font-size: 12px;
  color: rgba(255,255,255,0.75);
  font-weight: 600;
  padding-top: 6px;
}
.pxemp-range {
  display: flex;
  align-items: center;
  gap: 6px;
}
.pxemp-range span { color: rgba(255,255,255,0.5); font-weight: 700; }
.pxemp-num {
  max-width: 120px;
  text-align: right;
}
.pxemp-num-prefix, .pxemp-num-suffix {
  font-size: 12px;
  color: rgba(255,255,255,0.6);
}
.pxemp-note {
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  padding: 6px 10px;
  background: rgba(255,255,255,0.03);
  border-left: 2px solid #B0B4BC;
  border-radius: 0 6px 6px 0;
  margin-top: 4px;
  line-height: 1.5;
}
.pxemp-req {
  padding: 10px 14px;
  background: rgba(248,113,113,0.08);
  border: 1px solid rgba(248,113,113,0.25);
  border-radius: 10px;
  margin-bottom: 12px;
}
.pxemp-req-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 900;
  padding: 3px 10px;
  background: #f87171;
  color: #0a0a0a;
  border-radius: 999px;
  letter-spacing: 0.7px;
  margin-bottom: 4px;
}
.pxemp-req p {
  margin: 4px 0 0;
  font-size: 11px;
  color: rgba(255,255,255,0.8);
  line-height: 1.5;
}
.pxemp-rates {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 0;
  margin: 8px 0;
  overflow: hidden;
}
.pxemp-rates summary {
  padding: 10px 14px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  color: #B0B4BC;
  list-style: none;
}
.pxemp-rates summary::-webkit-details-marker { display: none; }
.pxemp-rates ul { margin: 0; padding: 4px 28px 12px; list-style: disc; }
.pxemp-rates li {
  font-size: 11px;
  color: rgba(255,255,255,0.75);
  padding: 3px 0;
}
.pxemp-days {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.pxemp-day {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  min-width: 40px;
  background: rgba(255,255,255,0.02);
  border: 1.5px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,0.6);
  cursor: pointer;
  transition: all 0.15s ease;
}
.pxemp-day input { display: none; }
.pxemp-day:hover { border-color: rgba(255,255,255,0.35); color: #fff; }
.pxemp-day.is-on {
  background: rgba(255,255,255,0.12);
  border-color: #B0B4BC;
  color: #B0B4BC;
}

/* ══════════════════════════════════════════════════════════
   Gig Shift Management modal
   ══════════════════════════════════════════════════════════ */
.pxgig-modal .pxgig-card {
  max-width: 520px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.pxgig-head { padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.15); margin-bottom: 8px; }
.pxgig-eyebrow {
  font-size: 10px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: #B0B4BC;
  font-weight: 800;
}
.pxgig-head h3 {
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  color: #fff;
  margin: 2px 0 4px;
}
/* GS-FAM-UI-1 — brand filter chip row + per-row brand chip (quiet, hairline,
   no emoji) */
.pxgig-brandfilter {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 10px;
}
.pxgig-bf-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px;
  background: none; border: 1px solid rgba(255,255,255,0.14);
  color: var(--text-secondary); font: inherit; font-size: 12px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
}
.pxgig-bf-chip.is-active {
  border-color: var(--border-gold); color: #E8C879;
  background: rgba(232,200,121,0.08);
}
.pxgig-bf-logo { width: 16px; height: 16px; border-radius: 4px; object-fit: cover; }
/* GSM-CHIP-2 — brand is quiet meta TEXT inside the role/city line: no box,
   no border, no background; inherits the line's muted size/color. Logo is a
   tiny 14px square; no logo → no placeholder. Name clips at 20ch. */
.pxgig-brandmeta { display: inline-flex; align-items: center; gap: 4px;
  vertical-align: middle; min-width: 0; }
.pxgig-brandmeta-logo { width: 14px; height: 14px; border-radius: 4px;
  object-fit: cover; flex-shrink: 0; vertical-align: middle; }
.pxgig-brandmeta-name { max-width: 20ch; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }

.pxgig-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: rgba(255,255,255,0.03);
  border-radius: 10px;
  margin-bottom: 10px;
  overflow-x: auto;
}
.pxgig-tab {
  flex: 1;
  padding: 8px 8px;
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.65);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.pxgig-tab em {
  padding: 0 6px;
  background: rgba(255,255,255,0.08);
  border-radius: 999px;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}
.pxgig-tab:hover { color: #fff; }
.pxgig-tab.is-active { background: rgba(255,255,255,0.15); color: #B0B4BC; }
.pxgig-tab.is-active em { background: #B0B4BC; color: #0a0a0a; }
/* PL-MEMBER-GIG-MANAGER — mode accent system: gold = entity, violet = own.
   Context identity via restrained accents only (eyebrow, header wash, card
   hairline, active-tab tint) — same dark surfaces, no background recolors. */
.pxgig-mode-entity { border-top: 1px solid rgba(232,200,121,0.35); }
.pxgig-mode-own    { border-top: 1px solid rgba(99,102,241,0.35); }
.pxgig-mode-entity .pxgig-head { background: radial-gradient(ellipse at top, rgba(232,200,121,0.05), transparent 70%); }
.pxgig-mode-own    .pxgig-head { background: radial-gradient(ellipse at top, rgba(99,102,241,0.06), transparent 70%); }
.pxgig-mode-entity .pxgig-eyebrow { color: #E8C879; }
.pxgig-mode-own    .pxgig-eyebrow { color: rgba(129,140,248,0.9); }
.pxgig-mode-entity .pxgig-tab.is-active { background: rgba(232,200,121,0.14); color: #E8C879; }
.pxgig-mode-entity .pxgig-tab.is-active em { background: #E8C879; color: #0a0a0a; }
.pxgig-mode-own .pxgig-tab.is-active { background: rgba(99,102,241,0.16); color: #A5B4FC; }
.pxgig-mode-own .pxgig-tab.is-active em { background: #818CF8; color: #0a0a0a; }
.pxgig-list {
  flex: 1;
  overflow-y: auto;
  padding-right: 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pxgig-row {
  padding: 12px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
}
.pxgig-row-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.pxgig-ph {
  width: 42px; height: 42px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.pxgig-ph-fallback {
  background: #B0B4BC;
  color: #0a0a0a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
}
.pxgig-info { flex: 1; min-width: 0; }
.pxgig-info strong { display: block; color: #fff; font-size: 13px; font-weight: 700; }
.pxgig-info span { display: block; color: rgba(255,255,255,0.65); font-size: 11px; margin-top: 2px; }
.pxgig-info em { display: block; color: rgba(255,255,255,0.5); font-size: 10px; font-style: normal; margin-top: 2px; }
.pxgig-status {
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: 0.3px;
  flex-shrink: 0;
}
.pxgig-st-active { background: rgba(251,146,60,0.15); color: #fdba74; }
.pxgig-st-pending { background: rgba(59,130,246,0.15); color: #93c5fd; }
.pxgig-st-done { background: rgba(34,197,94,0.15); color: #4ade80; }
.pxgig-payline {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 8px;
  margin-bottom: 8px;
}
.pxgig-payline span { font-size: 11px; color: rgba(255,255,255,0.75); font-weight: 600; }
.pxgig-payline strong {
  font-family: 'Playfair Display', serif;
  font-size: 16px;
  color: #B0B4BC;
  font-weight: 800;
}
.pxgig-payline em {
  font-size: 10px;
  color: rgba(255,255,255,0.5);
  font-style: normal;
  grid-column: 1 / -1;
}
.pxgig-confirm-box {
  padding: 10px;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  margin-bottom: 8px;
}
.pxgig-confirm-line {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 12px;
  color: rgba(255,255,255,0.85);
  cursor: pointer;
}
.pxgig-confirm-line input[type="checkbox"] { accent-color: #B0B4BC; }
.pxgig-confirm-line em {
  margin-left: auto;
  color: #4ade80;
  font-weight: 800;
  font-style: normal;
}
.pxgig-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.pxgig-actions button {
  font-size: 10px;
  padding: 5px 10px;
  background: transparent;
  color: #B0B4BC;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 6px;
  cursor: pointer;
  font-weight: 700;
  white-space: nowrap;
}
.pxgig-actions button:hover { background: rgba(255,255,255,0.1); }

/* Payment breakdown modal */
.pxgig-break-card { max-width: 420px; }
.pxgig-break-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  color: #fff;
  margin: 0 0 8px;
}
.pxgig-break-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 0;
  font-size: 12px;
  color: rgba(255,255,255,0.75);
  border-bottom: 1px dashed rgba(255,255,255,0.06);
}
.pxgig-break-row strong { color: #fff; font-weight: 700; }
.pxgig-break-divider { height: 1px; background: rgba(255,255,255,0.3); margin: 4px 0; }
.pxgig-total span { color: #B0B4BC; font-weight: 800; font-size: 11px; letter-spacing: 0.6px; text-transform: uppercase; }
.pxgig-total strong {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  color: #B0B4BC;
}
.pxgig-break-held {
  margin: 10px 0;
  padding: 10px 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 8px;
}
.pxgig-break-held strong { display: block; color: #fff; font-size: 12px; }
.pxgig-break-held span { display: block; color: rgba(255,255,255,0.65); font-size: 11px; margin-top: 2px; }
.pxgig-break-methods ul { margin: 4px 0; padding: 0 0 0 18px; }
.pxgig-break-methods li { font-size: 11px; color: rgba(255,255,255,0.75); padding: 2px 0; }

/* Rating stars */
.pxrate-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 10px;
  align-items: center;
  padding: 6px 0;
}
.pxrate-row label { font-size: 12px; color: rgba(255,255,255,0.75); }
.pxrate-stars {
  display: flex;
  gap: 4px;
}
.pxrate-stars button {
  background: transparent;
  border: none;
  font-size: 22px;
  color: rgba(255,255,255,0.2);
  cursor: pointer;
  transition: color 0.12s ease;
  padding: 0;
}
.pxrate-stars button:hover,
.pxrate-stars button.is-on {
  color: #B0B4BC;
}
.pxrate-yesno {
  display: flex;
  gap: 12px;
}
.pxrate-yesno label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: rgba(255,255,255,0.85);
}

/* Earnings summary */
.pxgig-earnings {
  padding: 12px 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 12px;
  margin-bottom: 10px;
}
.pxgig-earn-head {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #B0B4BC;
  font-weight: 800;
  margin-bottom: 8px;
}
.pxgig-earn-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
}
.pxgig-earn-stats > div { padding: 6px 8px; text-align: center; background: rgba(0,0,0,0.25); border-radius: 8px; }
.pxgig-earn-stats strong {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 15px;
  color: #B0B4BC;
  font-weight: 800;
}
.pxgig-earn-stats span {
  display: block;
  font-size: 9px;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 2px;
}
.pxgig-earn-pending {
  margin-top: 8px;
  padding: 8px 10px;
  background: rgba(59,130,246,0.1);
  border-radius: 8px;
  font-size: 11px;
  color: #93c5fd;
}
.pxgig-earn-pending strong { color: #dbeafe; }

/* Bank details modal */
.pxbank-card { max-width: 420px; }
.pxbank-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.pxbank-rec {
  font-size: 10px;
  padding: 3px 10px;
  background: rgba(34,197,94,0.15);
  color: #4ade80;
  border-radius: 999px;
  letter-spacing: 0.5px;
  font-weight: 800;
  text-transform: uppercase;
}
.rx-bank-quick {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(251,146,60,0.1);
  border: 1px dashed rgba(251,146,60,0.35);
  border-radius: 10px;
}
.rx-bank-quick span { font-size: 12px; color: #fdba74; }
.rx-optional-chip {
  font-size: 9px;
  font-weight: 900;
  padding: 2px 8px;
  background: rgba(34,197,94,0.15);
  color: #4ade80;
  border-radius: 999px;
  letter-spacing: 0.5px;
  margin-left: 6px;
  vertical-align: middle;
}

/* Profile bank reminder banner */
.px-bank-reminder {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  margin: 10px 16px;
  background: linear-gradient(135deg, rgba(251,146,60,0.2), rgba(251,146,60,0.05));
  border: 1px solid rgba(251,146,60,0.4);
  border-radius: 10px;
  color: #fdba74;
  font-size: 12px;
  font-weight: 700;
}
.px-bank-reminder button {
  margin-left: auto;
  padding: 5px 12px;
  background: #B0B4BC;
  color: #0a0a0a;
  border: none;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}
.px-bank-reminder .pxbr-dismiss {
  background: transparent !important;
  color: rgba(255,255,255,0.5) !important;
  font-size: 16px;
  padding: 2px 8px;
  margin-left: 4px;
}

/* ── Candidate card · DISCREET rate/salary pill ──
   Inline pill that sits inside .cc-info after the last-venue line.
   No absolute positioning, no floating chip — respects the natural
   flex-column layout so skills / bottom-row don't overlap. */
.candidate-rate-discreet {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: rgba(255,255,255, 0.12);
  border: 1px solid rgba(255,255,255, 0.35);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: #B0B4BC;
  width: fit-content;
  max-width: 100%;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  backdrop-filter: blur(4px);
  white-space: nowrap;
  font-family: inherit;
  line-height: 1.25;
}
.candidate-rate-discreet:hover {
  background: rgba(255,255,255, 0.2);
  border-color: #B0B4BC;
  transform: translateY(-1px);
}
.candidate-rate-discreet .rate-icon { font-size: 13px; }
.candidate-rate-discreet .rate-amount { font-weight: 800; color: #fff; }
.candidate-rate-discreet .rate-type {
  font-size: 10px;
  color: rgba(255,255,255,0.65);
  font-weight: 600;
  letter-spacing: 0.3px;
}
.candidate-rate-discreet.is-ft {
  background: rgba(96, 165, 250, 0.1);
  border-color: rgba(96, 165, 250, 0.35);
  color: #93c5fd;
}
.candidate-rate-discreet.is-ft .rate-amount { color: #fff; }

/* Tighten .cc-info spacing so the pill doesn't push the bottom-row off the card */
.cc-info { gap: 5px !important; padding-bottom: 16px !important; }
.cc-skills { margin-top: 2px !important; }
.cc-bottom-row { margin-top: 4px !important; padding-top: 8px !important; }

/* Cost calculator modal */
.pxcalc-card { max-width: 420px; }
.pxcalc-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  color: #fff;
  margin: 2px 0 8px;
}
.pxcalc-target {
  padding: 10px 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 10px;
  margin-bottom: 10px;
}
.pxcalc-target strong { display: block; color: #fff; font-size: 14px; font-weight: 800; }
.pxcalc-target span { display: block; color: rgba(255,255,255,0.65); font-size: 11px; margin-top: 2px; }
.pxcalc-target em {
  display: block;
  color: #B0B4BC;
  font-size: 13px;
  font-weight: 800;
  font-style: normal;
  margin-top: 4px;
}
.pxcalc-hours-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  margin-bottom: 10px;
}
.pxcalc-hour {
  padding: 10px 4px;
  background: rgba(255,255,255,0.03);
  border: 1.5px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  color: #fff;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.12s ease;
}
.pxcalc-hour:hover { border-color: rgba(255,255,255,0.45); }
.pxcalc-hour.is-on {
  background: rgba(255,255,255,0.15);
  border-color: #B0B4BC;
  color: #B0B4BC;
}
.pxcalc-break {
  padding: 12px 14px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 10px;
  margin-bottom: 8px;
}
.pxcalc-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 12px;
  color: rgba(255,255,255,0.75);
}
.pxcalc-line strong { color: #fff; font-weight: 700; }
.pxcalc-divider { height: 1px; background: rgba(255,255,255,0.25); margin: 2px 0; }
.pxcalc-total span { color: #B0B4BC; font-weight: 800; font-size: 11px; letter-spacing: 0.5px; text-transform: uppercase; }
.pxcalc-total strong {
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  color: #B0B4BC;
}
.pxcalc-wallet {
  padding: 8px 12px;
  background: rgba(255,255,255,0.06);
  border-radius: 8px;
  font-size: 11px;
  color: rgba(255,255,255,0.75);
  text-align: center;
  margin-bottom: 8px;
}

/* Compact gig row for list view (future use) */
.gig-compact-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
}
.gig-compact-rate {
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  font-weight: 800;
  color: #B0B4BC;
}

@media (max-width: 500px) {
  .pxemp-row { grid-template-columns: 1fr; }
  .pxgig-earn-stats { grid-template-columns: 1fr 1fr; }
  .pxrate-row { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════
   Grant Permissions · scrollable, sticky header + footer, search + filters
   ══════════════════════════════════════════════════════════ */
.pxt-step3 {
  display: flex;
  flex-direction: column;
  max-height: 80vh;
  overflow: hidden;
}
.pxt-step3-head {
  padding: 4px 48px 10px 4px;   /* right pad keeps X-button clear */
  background: linear-gradient(180deg, #141414 0%, #141414 90%, rgba(20,20,20,0));
  position: sticky;
  top: 0;
  z-index: 5;
}
.pxt-step3-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 4px 8px 4px 4px;
  scrollbar-width: thin;
  scrollbar-color: #B0B4BC rgba(255,255,255,0.05);
}
.pxt-step3-scroll::-webkit-scrollbar { width: 8px; }
.pxt-step3-scroll::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.05);
  border-radius: 4px;
}
.pxt-step3-scroll::-webkit-scrollbar-thumb {
  background: #B0B4BC;
  border-radius: 4px;
}
.pxt-step3-scroll::-webkit-scrollbar-thumb:hover { background: #B0B4BC; }
.pxt-step3-foot {
  position: sticky;
  bottom: 0;
  background: linear-gradient(0deg, #141414 40%, rgba(20,20,20,0));
  padding: 10px 4px 4px;
  z-index: 5;
  margin-top: 0;
}

.pxt-shown-row {
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  margin: 4px 0 10px;
}
.pxt-shown-row strong { color: #B0B4BC; font-weight: 800; }

.pxt-search-wrap {
  position: relative;
  margin-bottom: 8px;
}
.pxt-search-ico {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  pointer-events: none;
}
.pxt-search-input {
  width: 100%;
  padding: 10px 36px 10px 32px;
  background: rgba(255,255,255,0.04);
  border: 1.5px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  color: #fff;
  font-size: 13px;
  font-family: 'Inter', sans-serif;
  outline: none;
  transition: border-color 0.15s ease;
}
.pxt-search-input:focus {
  border-color: #B0B4BC;
  background: rgba(255,255,255,0.05);
}
.pxt-search-input::placeholder { color: rgba(255,255,255,0.4); }
.pxt-search-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.5);
  font-size: 18px;
  cursor: pointer;
  padding: 2px 8px;
}
.pxt-search-clear:hover { color: #fff; }

.pxt-pill-row {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.pxt-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 11px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  color: rgba(255,255,255,0.7);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.12s ease;
}
.pxt-pill:hover { border-color: rgba(255,255,255,0.4); color: #fff; }
.pxt-pill.is-active {
  background: rgba(255,255,255,0.15);
  border-color: #B0B4BC;
  color: #B0B4BC;
}
.pxt-pill em {
  font-size: 10px;
  padding: 0 5px;
  background: rgba(255,255,255,0.08);
  border-radius: 999px;
  font-style: normal;
  font-weight: 800;
}
.pxt-pill.is-active em { background: #B0B4BC; color: #0a0a0a; }

.pxt-actor-note {
  margin: 6px 0 0;
  padding: 8px 12px;
  background: rgba(139,92,246,0.08);
  border-left: 2px solid #a78bfa;
  border-radius: 0 8px 8px 0;
  font-size: 11px;
  color: #c4b5fd;
  line-height: 1.45;
}

/* Locked permissions (Line Manager can't grant) */
.pxt-perm-row.is-locked {
  opacity: 0.5;
  cursor: not-allowed;
  background: rgba(139,92,246,0.04);
  border-color: rgba(139,92,246,0.2);
}
.pxt-perm-row.is-locked:hover { border-color: rgba(139,92,246,0.25); }
.pxt-perm-row.is-locked input[type="checkbox"] { cursor: not-allowed; }
.pxt-perm-lock {
  display: inline-block;
  margin-left: 4px;
  font-size: 10px;
  color: #a78bfa;
}

/* ══════════════════════════════════════════════════════════
   Deactivate + Reassign modals
   ══════════════════════════════════════════════════════════ */
.pxdeact-card { max-width: 480px; max-height: 92vh; overflow-y: auto; }
.pxdeact-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  color: #fff;
  margin: 0 0 8px;
}
.pxt-badge.pxt-deactivated {
  background: rgba(239,68,68,0.18);
  color: #fca5a5;
}
.pxt-member-row.is-deactivated {
  opacity: 0.55;
  border-color: rgba(239,68,68,0.25);
  background: rgba(239,68,68,0.04);
}
.pxreas-current {
  padding: 8px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  font-size: 12px;
  color: rgba(255,255,255,0.85);
}

/* ══════════════════════════════════════════════════════════
   Manager Config (Master-Admin oversight panel)
   ══════════════════════════════════════════════════════════ */
.pxmcfg-card {
  max-width: 520px;
  max-height: 92vh;
  overflow-y: auto;
}
.pxmcfg-head h3 {
  font-family: 'Playfair Display', serif;
  font-size: 19px;
  color: #fff;
  margin: 2px 0 4px;
}
.pxmcfg-role {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.6);
  margin-left: 6px;
  padding: 2px 8px;
  background: rgba(255,255,255,0.05);
  border-radius: 999px;
}
.pxmcfg-section {
  padding: 12px 0;
  border-top: 1px solid rgba(255,255,255,0.15);
  margin-top: 10px;
}
.pxmcfg-section:first-of-type {
  border-top: none;
  margin-top: 4px;
}
.pxmcfg-section h4 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.9px;
  font-weight: 800;
  color: #B0B4BC;
  margin: 0 0 8px;
}
.pxmcfg-dept-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.pxmcfg-dept {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.03);
  border: 1.5px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  font-size: 11px;
  color: rgba(255,255,255,0.8);
  cursor: pointer;
  transition: all 0.15s ease;
}
.pxmcfg-dept:hover { border-color: rgba(255,255,255,0.35); color: #fff; }
.pxmcfg-dept.is-on {
  border-color: #B0B4BC;
  background: rgba(255,255,255,0.1);
  color: #B0B4BC;
}
.pxmcfg-dept input { accent-color: #B0B4BC; }
.pxmcfg-toggle-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  margin-bottom: 6px;
  cursor: pointer;
}
.pxmcfg-toggle-row strong {
  display: block;
  font-size: 12px;
  color: #fff;
  font-weight: 700;
}
.pxmcfg-toggle-row span {
  display: block;
  font-size: 10px;
  color: rgba(255,255,255,0.55);
  margin-top: 2px;
  line-height: 1.4;
}
.pxmcfg-toggle-row > div { flex: 1; }
.pxmcfg-toggle-row input[type="checkbox"] {
  accent-color: #B0B4BC;
  transform: scale(1.3);
  margin-top: 4px;
}
.pxmcfg-added {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 180px;
  overflow-y: auto;
}
.pxmcfg-added-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 8px;
}
.pxmcfg-added-row img {
  width: 28px; height: 28px;
  border-radius: 50%;
  object-fit: cover;
}
.pxmcfg-added-row strong {
  display: block;
  font-size: 12px;
  color: #fff;
  font-weight: 700;
}
.pxmcfg-added-row span {
  display: block;
  font-size: 10px;
  color: rgba(255,255,255,0.55);
  margin-top: 2px;
}
.pxmcfg-added-row em {
  margin-left: auto;
  font-size: 10px;
  color: #B0B4BC;
  font-style: normal;
  font-weight: 700;
}
.pxt-mem-mgr-cfg {
  font-size: 10px;
  padding: 5px 10px;
  background: rgba(139,92,246,0.15);
  color: #c4b5fd;
  border: 1px solid rgba(139,92,246,0.4);
  border-radius: 6px;
  cursor: pointer;
  font-weight: 700;
  white-space: nowrap;
}
.pxt-mem-mgr-cfg:hover { background: rgba(139,92,246,0.25); }

/* ══════════════════════════════════════════════════════════
   NetWorth · modal
   ══════════════════════════════════════════════════════════ */
.pxnw-modal .pxnw-card {
  max-width: 540px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.pxnw-head {
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.2);
  margin-bottom: 10px;
}
.pxnw-head h3 {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  color: #fff;
  margin: 2px 0 10px;
}
.pxnw-hero {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
}
.pxnw-hero > div {
  padding: 10px 6px;
  text-align: center;
  background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 10px;
}
.pxnw-hero strong {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  color: #B0B4BC;
  font-weight: 800;
  line-height: 1;
}
.pxnw-hero span {
  display: block;
  font-size: 10px;
  color: rgba(255,255,255,0.65);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-top: 4px;
}
.pxnw-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding-bottom: 6px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.pxnw-tab {
  flex: 0 0 auto;
  padding: 7px 12px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  color: rgba(255,255,255,0.65);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.12s ease;
}
.pxnw-tab:hover { color: #fff; border-color: rgba(255,255,255,0.35); }
.pxnw-tab.is-active {
  background: rgba(255,255,255,0.15);
  border-color: #B0B4BC;
  color: #B0B4BC;
}
.pxnw-body {
  flex: 1;
  overflow-y: auto;
  padding-right: 4px;
}
.pxnw-search { margin-bottom: 8px; }

/* ══════════════════════════════════════════════════════════
   NETWORTH-REDESIGN-1 · My NetWorth — Apple-quiet redesign.
   Scoped to #pxNwModal ONLY: the company-followers modal shares
   the pxnw- vocabulary and keeps the legacy styles above.
   ══════════════════════════════════════════════════════════ */
#pxNwModal .pxnw-card {
  max-width: 540px;
  padding: 0;
  background: #101013;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 20px 60px rgba(0,0,0,0.55);
  overflow: hidden;
}
#pxNwModal .pxnw-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 0;
  border: none; margin: 0;
  flex-shrink: 0;
}
#pxNwModal .pxnw-title {
  margin: 0; padding: 0;
  font-family: inherit; font-size: 17px; font-weight: 700; color: #fff;
}
#pxNwModal .pxnw-x {
  width: 44px; height: 44px; margin: -8px -14px 0 0;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none;
  color: rgba(255,255,255,0.6); font-size: 15px; cursor: pointer;
}
#pxNwModal .pxnw-countline {
  display: flex; align-items: center; gap: 6px;
  padding: 2px 16px 12px;
  font-size: 13px; color: rgba(255,255,255,0.5);
  flex-shrink: 0;
}
#pxNwModal .pxnw-countline button {
  background: none; border: none; padding: 0;
  font: inherit; color: inherit; cursor: pointer;
}
#pxNwModal .pxnw-countline strong { color: #EDEDED; font-weight: 600; }
#pxNwModal .pxnw-seg {
  display: flex; gap: 2px;
  margin: 0 16px; padding: 2px;
  background: rgba(255,255,255,0.06);
  border-radius: 9px;
  flex-shrink: 0;
}
#pxNwModal .pxnw-seg-btn {
  flex: 1; position: relative;
  padding: 7px 0;
  background: none; border: none; border-radius: 7px;
  color: rgba(255,255,255,0.6);
  font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
}
#pxNwModal .pxnw-seg-btn.is-active { background: rgba(255,255,255,0.12); color: #fff; }
#pxNwModal .pxnw-seg-dot {
  position: absolute; top: 7px; margin-left: 4px;
  width: 6px; height: 6px; border-radius: 50%;
  background: #E8C879;
  display: inline-block;
}
#pxNwModal .pxnw-body { flex: 1; overflow-y: auto; padding: 4px 0 16px; }
#pxNwModal .pxnw-list { display: block; margin: 0; }
#pxNwModal .pxnw-row {
  display: flex; align-items: center; gap: 12px;
  min-height: 44px; padding: 8px 16px;
  background: none; border: none; border-radius: 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  cursor: pointer;
}
#pxNwModal .pxnw-list .pxnw-row:last-child { border-bottom: none; }
#pxNwModal .pxnw-av,
#pxNwModal .pxnw-row img {
  width: 36px; height: 36px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
}
#pxNwModal .pxnw-row-info { flex: 1; min-width: 0; }
#pxNwModal .pxnw-row-info strong {
  display: block; gap: 0;
  font-size: 14px; font-weight: 600; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#pxNwModal .pxnw-sub {
  display: block; margin-top: 1px;
  font-size: 12px; color: rgba(255,255,255,0.5);
}
#pxNwModal .pxnw-row-actions { display: flex; flex-direction: row; align-items: center; gap: 8px; flex-shrink: 0; }
#pxNwModal .pxnw-pill {
  min-height: 30px; padding: 6px 14px;
  background: none;
  border: 1px solid rgba(255,255,255,0.22); border-radius: 999px;
  color: #EDEDED; font: inherit; font-size: 12px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
}
#pxNwModal .pxnw-pill-gold { border-color: rgba(232,200,121,0.55); color: #E8C879; }
#pxNwModal .pxnw-ghost {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; border-radius: 8px;
  color: rgba(255,255,255,0.45); font-size: 14px; cursor: pointer;
}
#pxNwModal .pxnw-empty {
  text-align: center; padding: 48px 20px;
  color: rgba(255,255,255,0.45); font-size: 13px;
}
#pxNwModal .pxnw-error {
  text-align: center; padding: 32px 20px;
  color: #c87a7a; font-size: 13px;
}
#pxNwModal .pxnw-sent-head {
  margin: 18px 16px 4px;
  font-size: 11px; font-weight: 600;
  letter-spacing: 1.2px; text-transform: uppercase;
  color: rgba(255,255,255,0.4);
}
#pxNwModal .pxnw-sent-meta {
  flex-shrink: 0;
  font-size: 12px; color: rgba(255,255,255,0.5);
}
/* Mobile: full-height sheet, safe-area padding, ONE scroll region (the
   body) — head/counts/seg never clip or scroll away. */
@media (max-width: 640px) {
  #pxNwModal.ops-modal { padding: 0; }
  #pxNwModal .pxnw-card {
    max-width: none; width: 100%;
    height: 100%; max-height: none;
    border-radius: 0; border: none;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}

/* ═══════════════════════════════════════════════════
   Phase 15-3 · Match-screen search bar + results dropdown
   ═══════════════════════════════════════════════════ */
.px-search {
  position: relative;          /* dropdown anchors absolute to this */
  margin: 0 0 14px;
  z-index: 5;                  /* above mode-select cards, below modals */
}
.px-search-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.px-search-icon {
  position: absolute;
  left: 14px;
  font-size: 14px;
  pointer-events: none;
  opacity: 0.7;
}
.px-search-input {
  width: 100%;
  padding: 12px 38px 12px 38px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  color: #fff;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
  -webkit-appearance: none;
  appearance: none;
}
.px-search-input::placeholder { color: rgba(255,255,255,0.45); }
.px-search-input:focus {
  border-color: var(--text-primary);
  background: rgba(255,255,255,0.06);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.18);
}
.px-search-clear {
  position: absolute;
  right: 8px;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 0;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.7);
  font-size: 16px; line-height: 1;
  cursor: pointer;
}
.px-search-clear:hover {
  background: rgba(255,255,255,0.14);
  color: #fff;
}
.px-search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  max-height: 400px;
  overflow-y: auto;
  background: linear-gradient(180deg, #14161e, #0b0d12);
  border: 1px solid rgba(255,255,255,0.30);
  border-radius: 14px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.55);
  z-index: 10;
  padding: 6px 0;
}
.pxsr-loading {
  padding: 20px;
  text-align: center;
  color: rgba(255,255,255,0.6);
  font-size: 12px;
}
.pxsr-empty {
  padding: 24px 16px;
  text-align: center;
  color: rgba(255,255,255,0.55);
  font-size: 13px;
}
.pxsr-section + .pxsr-section {
  border-top: 1px solid rgba(255,255,255,0.06);
  margin-top: 4px;
  padding-top: 4px;
}
.pxsr-section-head {
  font-size: 10px; font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--text-primary);
  padding: 8px 16px 4px;
}
.pxsr-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 14px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  min-height: 56px;          /* ≥44px tap target */
  transition: background 0.15s;
}
.pxsr-row:hover, .pxsr-row:focus {
  background: rgba(255,255,255,0.06);
  outline: none;
}
.pxsr-av {
  width: 36px; height: 36px;
  border-radius: var(--r-sm);
  object-fit: cover;
  flex-shrink: 0;
  background: #fff;
  border: 1px solid rgba(255,255,255,0.10);
}
.pxsr-av-round { border-radius: 50%; }
.pxsr-body {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.pxsr-body strong {
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pxsr-body span {
  color: rgba(255,255,255,0.6);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pxsr-chev {
  color: rgba(255,255,255,0.35);
  font-size: 18px;
  flex-shrink: 0;
}
@media (max-width: 480px) {
  .px-search-results { max-height: 60vh; }
}
.pxnw-count-line {
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  margin-bottom: 8px;
}
.pxnw-count-line strong { color: #B0B4BC; font-weight: 800; }
.pxnw-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}
.pxnw-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
}
.pxnw-row img {
  width: 44px; height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.pxnw-row-info { flex: 1; min-width: 0; }
.pxnw-row-info strong {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
.pxnw-row-info span { display: block; color: rgba(255,255,255,0.65); font-size: 11px; margin-top: 2px; }
.pxnw-row-info em { display: block; color: rgba(255,255,255,0.5); font-size: 10px; font-style: normal; margin-top: 3px; }
.pxnw-verified {
  font-size: 10px;
  color: #4ade80;
  background: rgba(34,197,94,0.15);
  width: 18px; height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
}
.pxnw-biz-badge {
  font-size: 9px;
  padding: 2px 6px;
  background: rgba(59,130,246,0.18);
  color: #93c5fd;
  border-radius: 4px;
  font-weight: 800;
  letter-spacing: 0.3px;
}
.pxnw-row-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}
.pxnw-row-actions button {
  font-size: 10px;
  padding: 5px 10px;
  background: transparent;
  color: #B0B4BC;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 6px;
  cursor: pointer;
  font-weight: 700;
  white-space: nowrap;
}
.pxnw-row-actions button:hover { background: rgba(255,255,255,0.1); }
.pxnw-row-actions button.pxnw-act-primary {
  background: #B0B4BC;
  color: #0a0a0a;
  border-color: #B0B4BC;
}
.pxnw-row-actions button.pxnw-act-primary:hover { background: #B0B4BC; border-color: #FFFFFF; }
.pxnw-row-actions button.is-danger { color: #f87171; border-color: rgba(248,113,113,0.3); }
.pxnw-row-pending {
  border-color: rgba(59,130,246,0.25);
  background: rgba(59,130,246,0.04);
}

/* PL-27a · Profile Gallery tab — 6-slot grid for the Cuadrix multi-photo
   upload UI. Lives inside #tab-gallery on screen-profile. Slot 0 is the
   primary (★ pin); other slots are gallery photos. Empty slot tap = file
   picker; filled slot tap = overlay with [Set primary] + [Delete]. The
   90% Profile Completion gate (PL-26) reads from profile_photos[] and
   requires count >= 3 for photos.ok to fire. */
.pl27-tab-body { padding: 14px 16px 8px; }
.pl27-helper {
  font-size: 11px; color: var(--text-muted); margin: 0 0 10px;
  letter-spacing: 0.2px; text-align: center;
}
.pl27-helper strong { color: var(--text-primary); font-weight: 700; }
.pl27-gallery-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px; padding: 4px 0 6px;
}
.pl27-slot {
  position: relative; aspect-ratio: 1; border-radius: 10px;
  overflow: hidden; cursor: pointer;
  transition: transform 0.12s, border-color 0.15s;
}
.pl27-slot:hover { transform: translateY(-1px); }
.pl27-slot-empty {
  background: rgba(255,255,255,0.025);
  border: 1.5px dashed rgba(255,255,255,0.35);
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 4px;
  color: var(--text-muted);
}
.pl27-slot-empty:hover { border-color: var(--text-primary); background: rgba(255,255,255,0.06); }
.pl27-slot-empty-plus { font-size: 28px; line-height: 1; color: var(--text-primary); }
.pl27-slot-empty-label { font-size: 10px; letter-spacing: 0.4px; text-transform: uppercase; }
.pl27-slot-filled { border: 1px solid rgba(255,255,255,0.08); }
.pl27-slot-filled img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* PL-FEED-3 — owner/admin "⋯" affordance: plain tap on the slot now opens the
   fullscreen viewer, so the set-primary/delete overlay is triggered from here. */
.pl27-slot-more {
  position: absolute; top: 6px; right: 6px; z-index: 3;
  width: 26px; height: 26px; border-radius: 50%;
  border: none; cursor: pointer;
  background: rgba(0,0,0,0.55); color: #fff;
  font-size: 16px; line-height: 1; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(2px);
  transition: background 0.15s;
}
.pl27-slot-more:hover { background: rgba(255,255,255,0.85); color: #1a1000; }
.pl27-slot-primary { border: 2px solid var(--text-primary); box-shadow: 0 0 12px rgba(255,255,255,0.25); }
.pl27-slot-pin {
  position: absolute; top: 6px; right: 6px;
  background: #FFFFFF; color: #111;
  font-size: 9px; font-weight: 800; letter-spacing: 0.5px;
  padding: 2px 6px; border-radius: 999px;
  text-transform: uppercase;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.pl27-slot-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.72);
  display: none; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 8px; padding: 8px;
}
.pl27-slot.is-open .pl27-slot-overlay { display: flex; }
.pl27-overlay-btn {
  background: rgba(255,255,255,0.18); color: #fff;
  border: 1px solid var(--text-primary);
  padding: 6px 12px; font-size: 11px; font-weight: 600;
  border-radius: 999px; cursor: pointer; min-width: 100px;
  transition: background 0.15s;
}
.pl27-overlay-btn:hover { background: rgba(255,255,255,0.32); }
.pl27-overlay-btn.is-danger { background: rgba(248,113,113,0.16); border-color: #f87171; color: #fff; }
.pl27-overlay-btn.is-danger:hover { background: rgba(248,113,113,0.32); }
.pl27-overlay-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.pl27-slot-busy {
  position: absolute; inset: 0; background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--text-primary); font-weight: 600;
  letter-spacing: 0.5px;
}

/* PL-35c · Admin comp-codes Back-Office (modal reuses .px-rev-modal shell).
   Form + last-batch panel + recent codes scroller. Admin-only by allowlist. */
.pl35c-form { display: flex; flex-direction: column; gap: 10px; padding: 4px 0 14px; }
.pl35c-input-row { display: flex; flex-direction: column; gap: 4px; }
.pl35c-input-row label { font-size: 11px; color: var(--text-muted); letter-spacing: 0.3px; text-transform: uppercase; }
.pl35c-input {
  padding: 9px 11px; font-size: 13px; color: var(--text-primary);
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10);
  border-radius: 8px; outline: none; transition: border-color 0.15s, background 0.15s;
}
.pl35c-input:focus { border-color: var(--text-primary); background: rgba(255,255,255,0.06); }
.pl35c-generate-btn {
  margin-top: 6px; padding: 11px; font-size: 14px; font-weight: 700; color: #111;
  background: linear-gradient(90deg, #FFFFFF, #B0B4BC);
  border: 0; border-radius: 10px; cursor: pointer;
  transition: transform 0.12s, opacity 0.15s;
}
.pl35c-generate-btn:hover:not(:disabled) { transform: translateY(-1px); }
.pl35c-generate-btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* MAG-1 admin authoring tool (reuses .pl35c-* form primitives). */
.pxmag-ta { min-height: 62px; resize: vertical; font-family: inherit; line-height: 1.5; }
.pxmag-stats-row { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; }
.pxmag-cur { font-size: 10px; color: #4ade80; margin-top: 4px; }
.pxmag-ghost {
  margin-top: 6px; padding: 9px; font-size: 12px; font-weight: 700;
  background: rgba(255,255,255,0.05); border: 1px solid var(--border-silver);
  color: var(--text-secondary); border-radius: 10px; cursor: pointer; width: 100%;
}
.pxmag-ghost.is-pub { color: #E8C879; border-color: rgba(232,200,121,0.45); }
.pxmag-art-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.pxmag-art-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px;
}
.pxmag-art-kind {
  font-size: 9px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase;
  color: var(--text-muted); flex-shrink: 0; min-width: 56px;
}
.pxmag-art-title { flex: 1; min-width: 0; font-size: 12.5px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pxmag-mini {
  flex-shrink: 0; padding: 4px 12px; border-radius: 999px; font-size: 11px; font-weight: 700;
  background: rgba(255,255,255,0.05); border: 1px solid var(--border-gold); color: #E5B860; cursor: pointer;
}
/* DB-issue archive card cover (inline background-image set per issue). */
.pmag-db-cover { background-size: cover; background-position: center; }

.pl35c-batch-panel {
  padding: 12px; border: 1px solid rgba(52,211,153,0.35); border-radius: 10px;
  background: linear-gradient(135deg, rgba(52,211,153,0.06), rgba(255,255,255,0.02));
  margin-bottom: 14px;
}
.pl35c-batch-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 12px; color: #6ee7b7; }
.pl35c-batch-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 6px; }
.pl35c-batch-code {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 7px 9px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; color: #fff;
  background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
}

.pl35c-recent-table { display: flex; flex-direction: column; gap: 4px; max-height: 360px; overflow-y: auto; }
.pl35c-recent-row {
  display: grid;
  grid-template-columns: minmax(110px, 1.2fr) minmax(70px, 0.8fr) minmax(70px, 0.7fr) minmax(64px, 0.6fr) minmax(0, 1.4fr) 28px;
  gap: 8px; align-items: center;
  padding: 8px 10px; font-size: 12px;
  background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.05);
  border-radius: 6px;
}
.pl35c-recent-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: #fff; }
.pl35c-recent-tier { color: var(--text-secondary); }
.pl35c-recent-date { color: var(--text-muted); font-size: 11px; }
.pl35c-recent-notes { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl35c-status-unused  { color: var(--text-muted);  font-weight: 600; font-feature-settings: 'tnum'; }
.pl35c-status-partial { color: var(--text-primary);  font-weight: 700; font-feature-settings: 'tnum'; }
.pl35c-status-full    { color: #34d399;            font-weight: 700; font-feature-settings: 'tnum'; }
.pl35c-status-expired { color: #f87171;            font-weight: 800; letter-spacing: 0.5px; font-size: 10px; }

.pl35c-copy-btn {
  background: transparent; border: 1px solid rgba(255,255,255,0.35); color: var(--text-primary);
  padding: 4px 8px; font-size: 11px; border-radius: 5px; cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.pl35c-copy-btn:hover { background: rgba(255,255,255,0.10); border-color: var(--text-primary); }
.pl35c-empty { padding: 16px; text-align: center; color: var(--text-muted); font-size: 12px; }

/* PL-26b · Profile completion bar · Cuadrix screen-profile, above NetWorth.
   Single click target — whole card opens the "What's missing?" modal.
   ⓘ icon is decorative (span, not button) so it shares the card's handler. */
.pl26-section { padding: 0 16px; margin: 14px 0 12px; }
.pl26-card {
  position: relative; overflow: hidden; padding: 16px 18px;
  background: linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02));
  border: 1.5px solid rgba(255,255,255,0.35);
  border-radius: 14px; cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.2s;
}
.pl26-card:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(255,255,255,0.14); }
.pl26-card.is-complete {
  border-color: rgba(52,211,153,0.45);
  background: linear-gradient(135deg, rgba(52,211,153,0.10), rgba(255,255,255,0.02));
  cursor: pointer;
}
.pl26-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.pl26-title {
  font-family: 'Playfair Display', serif;
  font-size: 15px; font-weight: 800;
  color: #B0B4BC;
  letter-spacing: 0.4px;
}
.pl26-card.is-complete .pl26-title { color: #34d399; }
.pl26-right { display: flex; align-items: center; gap: 8px; }
.pl26-percent { font-size: 22px; font-weight: 800; color: #fff; line-height: 1; font-feature-settings: 'tnum'; }
.pl26-info-ico { color: var(--text-primary); font-size: 14px; line-height: 1; opacity: 0.85; }
.pl26-progress {
  height: 8px; border-radius: 999px;
  background: rgba(255,255,255,0.08); overflow: hidden;
  margin-bottom: 8px;
}
.pl26-progress-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #FFFFFF, #B0B4BC);
  transition: width 0.4s ease;
}
.pl26-card.is-complete .pl26-progress-fill { background: linear-gradient(90deg, #34d399, #6ee7b7); }
.pl26-helper { font-size: 11px; color: var(--text-secondary); margin: 0; letter-spacing: 0.2px; }
.pl26-card.is-complete .pl26-helper { color: #6ee7b7; }

/* Modal checklist — sits inside the existing .info-overlay/.info-modal shell */
.pl26-list { list-style: none; padding: 0; margin: 0; }
.pl26-list-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 4px; font-size: 13px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.pl26-list-item:last-child { border-bottom: 0; }
.pl26-list-icon { width: 18px; text-align: center; font-weight: 700; }
.pl26-list-icon.is-ok { color: #34d399; }
.pl26-list-icon.is-miss { color: #f87171; }
.pl26-list-label { flex: 1; color: var(--text-primary); }
.pl26-list-weight { color: var(--text-muted); font-size: 11px; font-feature-settings: 'tnum'; }

/* PL-40 PART B · Match-ready checklist · own-profile, below the PL-26b widget.
   Reuses the .pl26-card shell + .pl26-list rows; this only sets the section
   spacing (mirrors .pl26-section). Rows are individually tappable. */
.pl40-section { padding: 0 16px; margin: 12px 0; }
/* Mount wrappers (spacing only) — the premium surfaces live in .pl54-* below. */
.pl46-home-card { margin: 0 0 12px; }

/* PL-54 — premium, Apple-grade surfaces for the Home completion card (ring) and
   the profile match-ready banner (thin bar). Refined dark glass over
   --bg-elevated, hairline gold top accent, slim progress, quiet type hierarchy,
   restrained chevron / text CTA, near-zero emoji, smooth fade-in. */
@keyframes pl54In { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.pl54-card, .pl54-banner {
  position: relative;
  border-radius: 16px;
  padding: 15px 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012)),
    var(--bg-elevated, #14141b);
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.04);
  overflow: hidden;
  animation: pl54In 0.42s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.pl54-card::before, .pl54-banner::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7), transparent);
}

/* — Home completion card (conic ring) — */
.pl54-card { cursor: pointer; }
.pl54-card:hover { border-color: rgba(255,255,255,0.22); }
.pl54-row { display: flex; align-items: center; gap: 14px; }
.pl54-ring { position: relative; width: 46px; height: 46px; flex: 0 0 auto; display: grid; place-items: center; }
.pl54-ring-fill {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(#FFFFFF calc(var(--pct, 0) * 1%), rgba(255,255,255,0.10) 0);
  -webkit-mask: radial-gradient(closest-side, transparent 67%, #000 68%);
          mask: radial-gradient(closest-side, transparent 67%, #000 68%);
}
.pl54-ring-num { position: relative; font-weight: 700; font-size: 13px; line-height: 1; color: #fff; letter-spacing: -0.3px; }
.pl54-ring-num small { color: rgba(255,255,255,0.45); font-size: 10px; font-weight: 600; }
.pl54-body { flex: 1 1 auto; min-width: 0; }
.pl54-title { font-weight: 700; font-size: 15px; line-height: 1.2; color: #fff; letter-spacing: -0.2px; }
.pl54-sub { margin-top: 3px; font-size: 12.5px; line-height: 1.35; color: rgba(255,255,255,0.55); }
.pl54-chev { margin-left: auto; flex: 0 0 auto; color: #FFFFFF; font-size: 22px; font-weight: 600; line-height: 1; transition: transform 0.15s ease; }
.pl54-card:hover .pl54-chev { transform: translateX(2px); }
.pl54-dismiss {
  position: absolute; top: 6px; right: 8px; width: 24px; height: 24px; padding: 0;
  background: transparent; border: 0; cursor: pointer;
  color: rgba(255,255,255,0.32); font-size: 16px; line-height: 1;
}
.pl54-dismiss:hover { color: rgba(255,255,255,0.7); }

/* — Profile match-ready banner (thin bar) — */
.pl54-bar { height: 3px; border-radius: 2px; background: rgba(255,255,255,0.08); overflow: hidden; margin-bottom: 12px; }
.pl54-bar span { display: block; height: 100%; border-radius: 2px; background: linear-gradient(90deg, #FFFFFF, #B0B4BC); transition: width 0.5s ease; }
.pl54-banner .pl54-title { margin-bottom: 4px; }
.pl54-list { list-style: none; margin: 0; padding: 0; }
.pl54-li {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 2px; cursor: pointer; font-size: 13.5px; color: rgba(255,255,255,0.82);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.pl54-li:last-child { border-bottom: 0; }
.pl54-li:hover { color: #fff; }
.pl54-add { font-size: 12px; font-weight: 700; color: #FFFFFF; flex: 0 0 auto; }

/* PL-56 — self-update banner. PL-54 language: dark glass over --bg-elevated,
   hairline gold accent, restrained gold text-button. Slim, bottom-anchored,
   clears the bottom nav; below the critical modal tier (9500+). */
.pl56-update {
  position: fixed; left: 12px; right: 12px; bottom: 76px; z-index: 9000;
  margin: 0 auto; max-width: 420px;
  display: flex; align-items: center; gap: 10px;
  padding: 11px 8px 11px 14px; border-radius: 14px; overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015)),
    var(--bg-elevated, #14141b);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 12px 34px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.05);
  animation: pl54In 0.42s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.pl56-update::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7), transparent);
}
.pl56-update-text { flex: 1 1 auto; font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.85); }
.pl56-update-btn {
  flex: 0 0 auto; background: transparent; border: 0; cursor: pointer;
  color: #FFFFFF; font-size: 13px; font-weight: 700; padding: 4px 8px;
}
.pl56-update-btn:hover { text-decoration: underline; }
.pl56-update-x {
  flex: 0 0 auto; background: transparent; border: 0; cursor: pointer;
  color: rgba(255,255,255,0.3); font-size: 16px; line-height: 1; padding: 2px 6px;
}
.pl56-update-x:hover { color: rgba(255,255,255,0.7); }

/* PL-26c-fix · Apply Blocked Modal must outrank .ops-modal (job detail at
   z-index 9500). The shared .info-overlay class sits at z-index 460 — fine
   for standalone surfaces (pxOpenRankAbout, pxOpenCompletionModal) which
   never open over other modals, but the apply gate fires from INSIDE the
   job detail modal so it needs to stack above. Surgical id-only override
   leaves the shared class untouched (zero blast radius). 9700 = same tier
   as payment/checkout — both are critical user-action interceptions. */
#pl26ApplyBlockedModal { z-index: 9700; }

/* Profile NetWorth section · sits above the Experience/Credentials/... tabs */
.networth-section {
  padding: 0 16px;
  margin: 14px 0 16px;
}
.networth-card {
  position: relative;
  overflow: hidden;
  padding: 20px;
  background: linear-gradient(135deg, rgba(255,255,255,0.14), rgba(255,255,255,0.03));
  border: 1.5px solid #B0B4BC;
  border-radius: 16px;
  box-shadow: 0 8px 28px rgba(255,255,255,0.08);
}
.networth-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, #B0B4BC, transparent);
}
.networth-header {
  text-align: center;
  margin-bottom: 16px;
}
.networth-header h3 {
  font-family: 'Playfair Display', serif;
  font-size: 16px;
  font-weight: 800;
  color: #B0B4BC;
  margin: 0;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.networth-stats {
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-bottom: 14px;
  gap: 4px;
}
.networth-stat {
  flex: 1;
  text-align: center;
  cursor: pointer;
  padding: 10px 6px;
  border-radius: 12px;
  transition: background 0.18s ease, transform 0.18s ease;
}
.networth-stat:hover {
  background: rgba(255,255,255,0.1);
  transform: translateY(-2px);
}
.networth-count {
  font-family: 'Playfair Display', serif;
  font-size: 28px;
  font-weight: 800;
  background: linear-gradient(135deg, #FFFFFF, #FFFFFF, #FFFFFF);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  line-height: 1;
  margin-bottom: 6px;
  letter-spacing: -0.3px;
}
.networth-label {
  font-size: 10px;
  font-weight: 800;
  color: rgba(255,255,255,0.55);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.networth-divider {
  width: 1px;
  height: 42px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.4), transparent);
  flex-shrink: 0;
}
.networth-actions {
  display: flex;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.2);
}
.networth-btn-primary {
  flex: 1;
  background: linear-gradient(135deg, #B0B4BC, #B0B4BC);
  color: #1a1000;
  border: none;
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  letter-spacing: 0.2px;
}
.networth-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(255,255,255,0.4);
}

@media (max-width: 500px) {
  .networth-count { font-size: 24px; }
  .networth-divider { height: 36px; }
  .networth-section { padding: 0 12px; }
}

@media (max-width: 500px) {
  .pxnw-tabs { flex-wrap: nowrap; }
  .pxnw-row { flex-wrap: wrap; }
  .pxnw-row-actions { flex-direction: row; width: 100%; justify-content: flex-end; }
  .pxmcfg-dept-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════
   Media Studio
   ══════════════════════════════════════════════════════════ */
.pxstudio-modal .pxstudio-card {
  max-width: 520px;
  max-height: 94vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.pxstudio-stepper {
  display: flex;
  justify-content: space-between;
  gap: 2px;
  padding: 4px 2px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.2);
  margin-bottom: 8px;
}
.pxstudio-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  cursor: pointer;
}
.pxstudio-step-num {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  border: 1.5px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 11px;
}
.pxstudio-step.is-done .pxstudio-step-num {
  background: rgba(255,255,255,0.2);
  border-color: #B0B4BC;
  color: #B0B4BC;
}
.pxstudio-step.is-current .pxstudio-step-num {
  background: #B0B4BC;
  border-color: #B0B4BC;
  color: #0a0a0a;
}
.pxstudio-step-lbl {
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: rgba(255,255,255,0.5);
  font-weight: 700;
}
.pxstudio-step.is-current .pxstudio-step-lbl { color: #B0B4BC; }

.pxstudio-body {
  flex: 1;
  overflow-y: auto;
  padding: 4px 4px 4px 2px;
}
.pxstudio-body h3 {
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  color: #fff;
  margin: 2px 0 4px;
}

/* Step 1 choices */
.pxstudio-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 12px 0;
}
.pxstudio-choice {
  padding: 16px 12px;
  background: rgba(255,255,255,0.03);
  border: 1.5px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s ease;
}
.pxstudio-choice:hover {
  border-color: #B0B4BC;
  background: rgba(255,255,255,0.05);
}
.pxstudio-choice span { display: block; font-size: 30px; margin-bottom: 4px; }
.pxstudio-choice strong { display: block; font-size: 13px; color: #fff; font-weight: 700; }
.pxstudio-choice em { display: block; font-size: 10px; color: rgba(255,255,255,0.6); font-style: normal; margin-top: 2px; }

/* Live camera stage */
.pxstudio-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  max-height: 48vh;
  background: #000;
  border-radius: 14px;
  overflow: hidden;
  margin: 10px 0;
}
.pxstudio-stage video,
.pxstudio-stage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pxstudio-cam-top {
  position: absolute;
  top: 10px; right: 10px;
  display: flex;
  gap: 6px;
}
.pxstudio-cam-top button {
  padding: 6px 10px;
  background: rgba(0,0,0,0.6);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  border-radius: 999px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
}
.pxstudio-cam-bottom {
  position: absolute;
  bottom: 14px;
  left: 0; right: 0;
  display: flex;
  justify-content: center;
}
.pxstudio-big-btn {
  width: 64px; height: 64px;
  border-radius: 50%;
  border: 4px solid rgba(255,255,255,0.9);
  background: rgba(255,255,255,0.2);
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}
.pxstudio-big-btn:hover { background: rgba(255,255,255,0.4); }
.pxstudio-big-btn.is-rec { background: #ef4444; border-color: #ef4444; }
.pxstudio-rec {
  position: absolute;
  top: 10px; left: 10px;
  padding: 4px 10px;
  background: rgba(239,68,68,0.9);
  color: #fff;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  font-family: 'Inter', monospace;
}
.pxstudio-retake {
  position: absolute;
  top: 10px; right: 10px;
  padding: 6px 12px;
  background: rgba(0,0,0,0.6);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  border-radius: 999px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
}

/* Preview (shared across steps) */
.pxstudio-preview {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  max-height: 46vh;
  background: #000;
  border-radius: 14px;
  overflow: hidden;
  margin: 8px 0 10px;
}
.pxstudio-preview-media {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: filter 0.2s ease;
}
.pxstudio-preview-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 9/16;
  max-height: 46vh;
  background: #0a0a0a;
  color: rgba(255,255,255,0.4);
  font-size: 12px;
}
.pxstudio-layer {
  position: absolute;
  user-select: none;
  cursor: grab;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
  touch-action: none;
}
.pxstudio-layer:active { cursor: grabbing; }
.pxstudio-text-layer { max-width: 90%; text-align: center; line-height: 1.1; }

/* Filter strip */
.pxstudio-filter-strip {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 6px 0;
  margin-bottom: 10px;
}
.pxstudio-filter {
  flex: 0 0 auto;
  padding: 4px;
  background: transparent;
  border: 2px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  color: rgba(255,255,255,0.7);
  font-size: 10px;
  font-weight: 700;
  text-align: center;
}
.pxstudio-filter.is-selected {
  border-color: #B0B4BC;
  color: #B0B4BC;
}
.pxstudio-filter-sw {
  width: 52px; height: 52px;
  border-radius: 8px;
  background: linear-gradient(135deg, #FFFFFF 0%, #0a4d7a 50%, #ef4444 100%);
  margin-bottom: 2px;
}

/* Adjustments */
.pxstudio-adj { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.pxstudio-adj label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 11px; color: rgba(255,255,255,0.75); font-weight: 600;
}
.pxstudio-adj label em {
  align-self: flex-end; color: #B0B4BC; font-style: normal; font-weight: 800;
}
.pxstudio-adj input[type="range"] { accent-color: #B0B4BC; }

/* Music */
.pxstudio-music-cats {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.pxstudio-music-cat {
  padding: 5px 11px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 999px;
  color: rgba(255,255,255,0.7);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}
.pxstudio-music-cat:hover { border-color: rgba(255,255,255,0.4); color: #fff; }
.pxstudio-music-list {
  display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px;
  max-height: 240px; overflow-y: auto;
}
.pxstudio-music-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
}
.pxstudio-music-row.is-selected { border-color: #B0B4BC; background: rgba(255,255,255,0.08); }
.pxstudio-music-ico {
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(255,255,255,0.25), rgba(255,255,255,0.05));
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
}
.pxstudio-music-info { flex: 1; min-width: 0; }
.pxstudio-music-info strong { display: block; font-size: 12px; color: #fff; font-weight: 700; }
.pxstudio-music-info span { display: block; font-size: 10px; color: rgba(255,255,255,0.6); margin-top: 1px; }
.pxstudio-music-info em { display: block; font-size: 9px; color: rgba(255,255,255,0.45); font-style: normal; margin-top: 2px; }
.pxstudio-music-actions { display: flex; gap: 4px; }
.pxstudio-music-actions button {
  font-size: 10px;
  padding: 4px 10px;
  background: transparent;
  color: #B0B4BC;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 6px;
  cursor: pointer;
  font-weight: 700;
}
.pxstudio-music-actions button.is-active {
  background: #B0B4BC;
  color: #0a0a0a;
  border-color: #B0B4BC;
}
.pxstudio-music-settings {
  padding: 10px 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 12px;
  margin-bottom: 10px;
}
.pxstudio-music-settings strong {
  display: block;
  font-size: 11px;
  color: #B0B4BC;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 8px;
}
.pxstudio-music-settings label {
  display: flex; flex-direction: column; gap: 4px;
  padding: 4px 0;
  font-size: 11px; color: rgba(255,255,255,0.75); font-weight: 600;
}
.pxstudio-col { display: flex; flex-direction: column; gap: 2px; }

/* Text + stickers */
.pxstudio-text-add {
  padding: 10px 12px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  margin-bottom: 10px;
}
.pxstudio-text-add-row {
  display: flex; gap: 6px; align-items: center;
  margin-bottom: 8px;
}
.pxstudio-font-row {
  display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 6px;
}
.pxstudio-font-chip {
  padding: 4px 10px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 999px;
  color: rgba(255,255,255,0.8);
  font-size: 11px;
  cursor: pointer;
}
.pxstudio-font-chip.is-active {
  border-color: #B0B4BC;
  color: #B0B4BC;
  background: rgba(255,255,255,0.1);
}
.pxstudio-color-row { display: flex; gap: 4px; }
.pxstudio-color {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.25);
  cursor: pointer;
}
.pxstudio-color.is-active { border-color: #B0B4BC; box-shadow: 0 0 0 2px rgba(255,255,255,0.3); }

.pxstudio-layer-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.pxstudio-layer-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  font-size: 12px;
  color: rgba(255,255,255,0.85);
}
.pxstudio-layer-row strong { flex: 1; font-weight: 600; }
.pxstudio-layer-row button {
  background: transparent; border: none;
  color: rgba(255,255,255,0.5); cursor: pointer;
  font-size: 14px;
}
.pxstudio-layer-row button:hover { color: #f87171; }

/* Stickers */
.pxstudio-stickers {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 0;
  margin-bottom: 10px;
  overflow: hidden;
}
.pxstudio-stickers summary {
  padding: 10px 14px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  color: #B0B4BC;
  list-style: none;
}
.pxstudio-stickers summary::-webkit-details-marker { display: none; }
.pxstudio-sticker-cat { padding: 4px 10px 10px; }
.pxstudio-sticker-cat-head {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: rgba(255,255,255,0.5);
  margin-bottom: 6px;
  font-weight: 800;
}
.pxstudio-sticker-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
}
.pxstudio-sticker {
  padding: 6px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  font-size: 22px;
  cursor: pointer;
  transition: transform 0.1s ease;
}
.pxstudio-sticker:hover { transform: scale(1.15); border-color: rgba(255,255,255,0.35); }

/* Publish step */
.pxstudio-caption-wrap { position: relative; margin-bottom: 10px; }
.pxstudio-caption-wrap textarea { width: 100%; }
.pxstudio-caption-count {
  position: absolute;
  right: 8px; bottom: 6px;
  font-size: 10px;
  color: rgba(255,255,255,0.4);
}
.pxstudio-summary {
  padding: 10px 14px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 10px;
  margin-bottom: 10px;
}
.pxstudio-sum-row {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  font-size: 12px;
  border-bottom: 1px dashed rgba(255,255,255,0.06);
}
.pxstudio-sum-row:last-child { border-bottom: none; }
.pxstudio-sum-row span { color: rgba(255,255,255,0.6); }
.pxstudio-sum-row strong { color: #fff; font-weight: 700; }

@media (max-width: 500px) {
  .pxstudio-choices { grid-template-columns: 1fr 1fr; }
  .pxstudio-sticker-grid { grid-template-columns: repeat(5, 1fr); }
  .pxstudio-step-lbl { display: none; }
  .pxstudio-stage { max-height: 54vh; }
  .pxstudio-preview { max-height: 42vh; }
}

/* ══════════════════════════════════════════════════════════
   Profile Photo + Cover Photo · edit badges and modals
   ══════════════════════════════════════════════════════════ */
.profile-avatar-ring { position: relative; }
.profile-photo-edit {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 32px;
  height: 32px;
  background: #FFFFFF;
  border: 3px solid #0a0a0a;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  font-size: 14px;
  line-height: 1;
  padding: 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  transition: transform 0.18s ease, background 0.18s ease;
}
.profile-photo-edit:hover {
  transform: scale(1.1);
  background: #B0B4BC;
}

/* Existing cover Edit button — keep position, refresh hover + add background for video covers */
.profile-edit-btn {
  cursor: pointer;
}
.profile-cover { position: relative; overflow: hidden; }
.px-cover-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.profile-cover > .profile-cover-gradient,
.profile-cover > .profile-edit-btn { position: relative; z-index: 2; }

/* Photo editor modals (shared) */
.pxpp-modal .pxpp-card {
  max-width: 460px;
  max-height: 94vh;
  overflow-y: auto;
}
.pxpp-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  color: #fff;
  margin: 2px 0 4px;
}

.pxpp-preview {
  display: flex;
  justify-content: center;
  margin: 12px 0;
}
.pxpp-circle {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: #0a0a0a;
  border: 3px solid #B0B4BC;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 30px rgba(255,255,255,0.2);
}
.pxpp-circle img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: filter 0.2s ease, transform 0.1s ease;
}
.pxpp-empty {
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.pxcp-preview {
  width: 100%;
  aspect-ratio: 3 / 1;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.25);
  margin: 10px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pxcp-preview img,
.pxcp-preview video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* PL-58 — drag-to-reposition frames: suppress touch-scroll so a vertical drag
   pans the image instead of scrolling the modal; grab affordance. */
.pxpp-circle, .pxcp-preview { touch-action: none; cursor: grab; }
.pxpp-circle img, .pxcp-preview img { transform-origin: center center; will-change: transform; }

.pxpp-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
.pxpp-choice {
  padding: 12px 10px;
  background: rgba(255,255,255,0.03);
  border: 1.5px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s ease;
}
.pxpp-choice:hover {
  border-color: #B0B4BC;
  background: rgba(255,255,255,0.06);
  transform: translateY(-1px);
}
.pxpp-choice span { display: block; font-size: 24px; margin-bottom: 4px; }
.pxpp-choice strong { display: block; font-size: 12px; color: #fff; font-weight: 700; }
.pxpp-choice em { display: block; font-size: 10px; color: rgba(255,255,255,0.6); font-style: normal; margin-top: 2px; }

.pxpp-adjust {
  padding: 10px 12px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  margin-bottom: 10px;
}
.pxpp-adjust label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 0;
  font-size: 11px;
  color: rgba(255,255,255,0.75);
  font-weight: 600;
}
.pxpp-adjust label em {
  align-self: flex-end;
  color: #B0B4BC;
  font-style: normal;
  font-weight: 800;
}
.pxpp-adjust input[type="range"] { accent-color: #B0B4BC; }

.pxpp-filters {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 6px 0;
  margin-top: 6px;
}
.pxpp-filter {
  flex: 0 0 auto;
  padding: 4px;
  background: transparent;
  border: 2px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
}
.pxpp-filter.is-selected {
  border-color: #B0B4BC;
}
/* PL-48b — live filter thumbnail: the actual photo with the filter applied */
.pxpp-filter-thumb {
  display: block;
  width: 46px; height: 46px;
  border-radius: 8px;
  overflow: hidden;
  background: #0a0a0a;
  margin-bottom: 3px;
}
.pxpp-filter-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* PL-48b — minimal section labels in the photo editor */
.pxpp-section-label {
  font-size: 10px; font-weight: 800; letter-spacing: 1px;
  text-transform: uppercase; color: rgba(255,255,255,0.4);
  margin: 10px 0 4px;
}
.pxpp-filter em {
  display: block;
  font-size: 9px;
  color: rgba(255,255,255,0.7);
  font-weight: 700;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.pxpp-filter.is-selected em { color: #B0B4BC; }

.pxpp-reset {
  display: block;
  margin-top: 8px;
  background: transparent;
  border: 1px dashed rgba(255,255,255,0.35);
  color: #B0B4BC;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  width: 100%;
}
.pxpp-reset:hover { background: rgba(255,255,255,0.08); }

/* Camera stage (shared) */
.pxpp-cam-stage {
  position: relative;
  aspect-ratio: 4 / 3;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  margin: 10px 0;
}
.pxpp-cam-stage video {
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Template grid (covers) */
.pxpp-tpl-grid {
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}
.pxpp-tpl {
  position: relative;
  padding: 0;
  background: transparent;
  border: 1.5px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 3 / 1;
}
.pxpp-tpl:hover { border-color: #B0B4BC; }
.pxpp-tpl img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.pxpp-tpl span {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 4px 8px;
  background: linear-gradient(0deg, rgba(0,0,0,0.75), transparent);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  text-align: left;
  letter-spacing: 0.3px;
}

.pxcp-filters { margin-top: 8px; }
.btn-third { flex: 1; }

@media (max-width: 500px) {
  .pxpp-choices { grid-template-columns: 1fr 1fr; }
  .pxpp-tpl-grid { grid-template-columns: 1fr; }
  .pxpp-circle { width: 150px; height: 150px; }
}

/* Company Profile · Followers stat (individual NetWorth is elsewhere) */
.px-cp-stat.px-cp-stat-followers {
  cursor: pointer;
  background: linear-gradient(135deg, rgba(255,255,255,0.14), rgba(255,255,255,0.04));
  border: 1px solid rgba(255,255,255,0.35);
  transition: all 0.15s ease;
}
.px-cp-stat.px-cp-stat-followers:hover {
  background: linear-gradient(135deg, rgba(255,255,255,0.2), rgba(255,255,255,0.06));
  border-color: #B0B4BC;
  transform: translateY(-1px);
}
.px-cp-stat.px-cp-stat-followers strong { color: #B0B4BC; }

/* ══════════════════════════════════════════════════════════
   Welcome modal · shown once after registration
   ══════════════════════════════════════════════════════════ */
.pxwelcome-card {
  max-width: 440px;
  text-align: center;
  padding: 24px 20px 16px !important;
}
.pxwelcome-burst {
  font-size: 48px;
  line-height: 1;
  margin-bottom: 8px;
  filter: drop-shadow(0 0 24px rgba(255,255,255,0.5));
}
.pxwelcome-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  color: #fff;
  margin: 0 0 2px;
  letter-spacing: 0.3px;
}
.pxwelcome-hi {
  font-size: 16px;
  color: #B0B4BC;
  font-weight: 700;
  margin: 0 0 8px;
}
.pxwelcome-next {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 14px 0;
  text-align: left;
}
.pxwelcome-next > div {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 10px;
}
.pxwelcome-next > div > span:first-child {
  font-size: 20px;
  flex-shrink: 0;
  width: 32px;
  text-align: center;
}
.pxwelcome-next strong {
  display: block;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
.pxwelcome-next span:last-child {
  display: block;
  color: rgba(255,255,255,0.65);
  font-size: 11px;
  margin-top: 2px;
}
.pxwelcome-score {
  margin: 14px 0;
  padding: 12px;
  background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04));
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 12px;
}
.pxwelcome-score strong {
  display: block;
  font-family: 'Playfair Display', serif;
  color: #B0B4BC;
  font-size: 15px;
  font-weight: 800;
  margin-bottom: 4px;
}
.pxwelcome-score strong em {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
}
.pxwelcome-score span {
  display: block;
  font-size: 11px;
  color: rgba(255,255,255,0.65);
}

/* ══════════════════════════════════════════════════════════
   Settings · prominent Logout button
   ══════════════════════════════════════════════════════════ */
.logout-btn-large {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 16px;
  margin-bottom: 10px;
  background: rgba(231, 76, 60, 0.12);
  border: 1px solid rgba(231, 76, 60, 0.4);
  border-radius: 12px;
  color: #f87171;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.logout-btn-large:hover {
  background: rgba(231, 76, 60, 0.22);
  border-color: #f87171;
  transform: translateY(-1px);
}
.logout-btn-large:active {
  transform: translateY(0);
}

/* NAV-5 — quiet terracotta accent on the avatar-menu Logout item */
.pxam-item.pxam-logout:hover {
  background: rgba(196, 105, 90, 0.12);
  color: #d98a7c;
}

/* ══════════════════════════════════════════════════════════
   Match · celebration + post-match action tiles
   ══════════════════════════════════════════════════════════ */
.pxmatch-card {
  max-width: 440px;
  text-align: center;
  max-height: 94vh;
  overflow-y: auto;
}
.pxmatch-burst {
  font-size: 22px;
  letter-spacing: 4px;
  margin-bottom: 6px;
  filter: drop-shadow(0 0 24px rgba(255,255,255,0.5));
}
.pxmatch-title {
  font-family: 'Playfair Display', serif;
  font-size: 28px;
  font-weight: 900;
  background: linear-gradient(135deg, #FFFFFF, #FFFFFF, #FFFFFF);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  margin: 0 0 14px;
  letter-spacing: -0.3px;
}
.pxmatch-photos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 10px;
}
.pxmatch-photos img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #B0B4BC;
  box-shadow: 0 6px 20px rgba(255,255,255,0.35);
  background: #0a0a0a;
}
.pxmatch-link {
  font-size: 22px;
  color: #B0B4BC;
}
.pxmatch-sub {
  color: rgba(255,255,255,0.85);
  margin-bottom: 12px;
}
.pxmatch-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}
.pxmatch-action {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(255,255,255,0.3);
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  transition: all 0.18s ease;
}
.pxmatch-action:hover {
  background: rgba(255,255,255,0.12);
  border-color: #B0B4BC;
  transform: translateY(-1px);
}
.pxmatch-action .pxmatch-ico {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #B0B4BC, #B0B4BC);
  color: #0a0a0a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.pxmatch-action > div { flex: 1; }
.pxmatch-action strong { display: block; color: #fff; font-size: 14px; font-weight: 800; }
.pxmatch-action em { display: block; color: rgba(255,255,255,0.65); font-size: 11px; font-style: normal; margin-top: 2px; }

.pxmatch-next {
  padding: 10px 14px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  text-align: left;
  margin-bottom: 10px;
}
.pxmatch-next strong {
  display: block;
  font-size: 11px;
  color: #B0B4BC;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 4px;
}
.pxmatch-next ul { margin: 0; padding: 0 0 0 18px; }
.pxmatch-next li { font-size: 11px; color: rgba(255,255,255,0.7); padding: 2px 0; }

.pxsafety-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(251,146,60,0.1);
  border: 1px solid rgba(251,146,60,0.35);
  border-radius: 10px;
  margin-bottom: 10px;
  color: #fdba74;
  font-size: 11px;
  font-weight: 700;
  text-align: left;
}
.pxsafety-banner button {
  margin-left: auto;
  padding: 4px 10px;
  background: transparent;
  border: 1px solid rgba(251,146,60,0.5);
  color: #fdba74;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}
.pxsafety-banner button:hover { background: rgba(251,146,60,0.15); }

/* Schedule Interview modal */
.pxiv-card { max-width: 440px; }
.pxiv-slots { display: flex; flex-direction: column; gap: 4px; }
.pxiv-slot {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
  color: rgba(255,255,255,0.85);
}
.pxiv-slot input { accent-color: #B0B4BC; }

/* Match message modal · suggestions */
.pxmatch-msg-card { max-width: 460px; }
.pxmatch-suggestions {
  margin-bottom: 10px;
}
.pxmatch-suggestions-head {
  font-size: 11px;
  font-weight: 800;
  color: #B0B4BC;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 6px;
}
.pxmatch-suggestion {
  display: block;
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 4px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  color: rgba(255,255,255,0.85);
  font-size: 12px;
  line-height: 1.45;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.pxmatch-suggestion:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.35); }

.pxsafety-guidelines {
  padding: 10px 14px;
  background: rgba(251,146,60,0.08);
  border-left: 2px solid #fdba74;
  border-radius: 0 8px 8px 0;
  margin: 8px 0 10px;
}
.pxsafety-guidelines strong {
  display: block; font-size: 11px; color: #fdba74;
  text-transform: uppercase; letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.pxsafety-guidelines ul { margin: 0; padding: 0 0 0 18px; }
.pxsafety-guidelines li { font-size: 11px; color: rgba(255,255,255,0.75); padding: 2px 0; }

.pxsafety-inline {
  display: none;
  margin-top: 4px;
  padding: 6px 10px;
  background: rgba(251,146,60,0.1);
  border-left: 2px solid #fdba74;
  border-radius: 0 8px 8px 0;
  font-size: 10px;
}
.pxsafety-inline ul { margin: 0; padding: 0; list-style: none; }
.pxsafety-inline li { color: #fdba74; padding: 1px 0; }
.pxsafety-inline li.is-block { color: #f87171; font-weight: 700; }

/* Offer modal */
.pxoffer-card {
  max-width: 480px;
  max-height: 94vh;
  overflow-y: auto;
}
.pxoffer-total {
  padding: 12px 14px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0;
}
.pxoffer-total span {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: rgba(255,255,255,0.65);
  font-weight: 700;
}
.pxoffer-total strong {
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  color: #B0B4BC;
  font-weight: 800;
}

/* Offer accepted */
.pxoffer-accept-card {
  max-width: 440px;
  text-align: center;
}
.pxoffer-steps {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0;
  text-align: left;
}
.pxoffer-step {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
}
.pxoffer-step.is-done {
  background: rgba(34,197,94,0.08);
  border-color: rgba(34,197,94,0.3);
}
.pxoffer-step > span:first-child {
  font-size: 18px;
  width: 28px; text-align: center;
  flex-shrink: 0;
}
.pxoffer-step strong { display: block; color: #fff; font-size: 13px; font-weight: 700; }
.pxoffer-step em { display: block; color: rgba(255,255,255,0.6); font-size: 11px; font-style: normal; margin-top: 2px; }

/* Safety modals (warn / block / guide / report) */
.pxsafety-card {
  max-width: 440px;
  max-height: 94vh;
  overflow-y: auto;
}
.pxsafety-issues,
.pxsafety-dos {
  margin: 6px 0 10px;
  padding: 8px 16px;
  background: rgba(255,255,255,0.02);
  border-radius: 8px;
  list-style: none;
}
.pxsafety-issues li { color: #f87171; font-size: 12px; padding: 3px 0; font-weight: 600; }
.pxsafety-dos li    { color: rgba(255,255,255,0.75); font-size: 12px; padding: 3px 0; }
.pxsafety-penalty {
  padding: 10px 12px;
  background: rgba(248,113,113,0.08);
  border: 1px solid rgba(248,113,113,0.3);
  border-radius: 8px;
  color: #fca5a5;
  font-size: 11px;
  line-height: 1.45;
  margin: 10px 0;
}

.pxsafety-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 10px 0;
}
.pxsafety-col {
  padding: 12px 14px;
  border-radius: 10px;
}
.pxsafety-col-dont {
  background: rgba(248,113,113,0.08);
  border: 1px solid rgba(248,113,113,0.3);
}
.pxsafety-col-do {
  background: rgba(34,197,94,0.08);
  border: 1px solid rgba(34,197,94,0.3);
}
.pxsafety-col strong {
  display: block;
  font-size: 12px;
  margin-bottom: 6px;
  letter-spacing: 0.3px;
}
.pxsafety-col-dont strong { color: #fca5a5; }
.pxsafety-col-do strong { color: #4ade80; }
.pxsafety-col ul { margin: 0; padding: 0 0 0 16px; }
.pxsafety-col li { font-size: 11px; color: rgba(255,255,255,0.8); padding: 2px 0; line-height: 1.4; }
.pxsafety-contact {
  text-align: center;
  padding: 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 8px;
  font-size: 12px;
  color: rgba(255,255,255,0.85);
  margin-top: 8px;
}
.pxsafety-contact strong { color: #B0B4BC; }

@media (max-width: 500px) {
  .pxsafety-cols { grid-template-columns: 1fr; }
  .pxmatch-photos img { width: 66px; height: 66px; }
  .pxmatch-title { font-size: 24px; }
}

/* ══════════════════════════════════════════════════════════
   Hire-mode picker (FT / Gig / All)
   ══════════════════════════════════════════════════════════ */
.hire-mode-selection {
  display: none;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px 40px;
  text-align: center;
  position: relative;
  overflow-y: auto;
  max-height: 100%;
}
.hire-mode-selection .mms-back-btn {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.3);
  color: #B0B4BC;
  border-radius: 50%;
  cursor: pointer;
}
.hire-mode-title {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  margin: 30px 0 4px;
  letter-spacing: 0.2px;
}
.hire-mode-subtitle {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  margin: 0 0 22px;
}
.hire-mode-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 420px;
}
.hire-mode-card {
  background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.05));
  border: 1.5px solid rgba(255,255,255,0.25);
  border-radius: 16px;
  padding: 18px 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}
.hire-mode-card:hover {
  border-color: #B0B4BC;
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(255,255,255,0.18);
}
.hire-mode-icon { font-size: 38px; line-height: 1; margin-bottom: 8px; }
.hire-mode-name {
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  font-weight: 800;
  color: #B0B4BC;
  margin-bottom: 4px;
  letter-spacing: 0.3px;
}
.hire-mode-description {
  font-size: 12px;
  color: rgba(255,255,255,0.7);
  line-height: 1.45;
  margin-bottom: 8px;
}
.hire-mode-features {
  text-align: left;
  margin: 10px auto;
  padding-left: 20px;
  font-size: 11px;
  color: rgba(255,255,255,0.6);
  line-height: 1.7;
  max-width: 240px;
}
.hire-mode-btn {
  display: inline-block;
  margin-top: 8px;
  padding: 9px 18px;
  background: linear-gradient(135deg, #B0B4BC, #B0B4BC);
  color: #1a1000;
  border: none;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.4px;
}
.hire-mode-card:hover .hire-mode-btn {
  filter: brightness(1.05);
}
.hire-mode-hint {
  margin-top: 18px;
  font-size: 11px;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.3px;
}

/* Switch-mode chip inside swipe view */
.pxhire-mode-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: calc(100% - 32px);
  margin: 8px 16px 4px;
  padding: 8px 14px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 999px;
  color: rgba(255,255,255,0.85);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}
.pxhire-mode-chip:hover { background: rgba(255,255,255,0.14); }
/* MATCH-COMPACT — in-header compact variant (replaces the full-width row). */
.pxhire-mode-chip.is-compact {
  width: auto; margin: 0; padding: 6px 12px;
  font-size: 11px; font-weight: 700; flex-shrink: 0;
  white-space: nowrap;
}
.pxhire-mode-chip.is-compact span { font-size: 10px; margin-left: 2px; color: rgba(255,255,255,0.55); }
.pxhire-mode-chip strong { color: #B0B4BC; font-weight: 800; margin-left: 2px; }
.pxhire-mode-chip span {
  font-size: 10px;
  color: rgba(255,255,255,0.55);
  font-weight: 700;
  letter-spacing: 0.3px;
}

/* ═══════════════════════════════════════════════════════
   #53.2 PL-INVITE-FLOW · GS job-picker + selected-job chip
   ═══════════════════════════════════════════════════════ */

/* Inviting-to chip — mirrors .pxhire-mode-chip dimensions, gold-tinged
   to read as a selected-state pill. Stacks ABOVE the hire-mode chip
   when both are present so the user sees their invite context first. */
.pxinvite-job-chip {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  width: calc(100% - 32px);
  margin: 8px 16px 4px;
  padding: 8px 14px;
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.45);
  border-radius: 999px;
  color: rgba(255,255,255,0.92);
  font-size: 11px;
  font-weight: 600;
}
.pxinvite-job-chip .ijc-prefix { color: rgba(255,255,255,0.6); font-weight: 700; }
.pxinvite-job-chip strong {
  color: #B0B4BC;
  font-weight: 800;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pxinvite-job-chip .ijc-change {
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.4);
  color: #B0B4BC;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.3px;
}
.pxinvite-job-chip .ijc-change:hover { background: rgba(255,255,255,0.28); }

/* Job-picker list — sits inside .hire-mode-selection (which we reuse
   via the .invite-job-picker compound class) but uses a single-column
   list shape, not the 3-card grid of the mode selector. */
.invite-job-picker .invite-job-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 460px;
  margin: 12px auto 0;
  padding: 0 16px 16px;
  box-sizing: border-box;
}
.invite-job-card {
  position: relative;
  display: block;
  text-align: left;
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 14px;
  padding: 14px 38px 14px 16px;
  color: rgba(255,255,255,0.95);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.invite-job-card:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.45);
}
.invite-job-card:active { transform: scale(0.99); }
.invite-job-card .ijc-title {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 4px;
  color: rgba(255,255,255,0.95);
}
.invite-job-card .ijc-meta {
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  margin-bottom: 4px;
}
.invite-job-card .ijc-pay {
  font-size: 12px;
  font-weight: 700;
  color: #B0B4BC;
}
.invite-job-card .ijc-arrow {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #B0B4BC;
  font-size: 18px;
  font-weight: 700;
}
.invite-job-loading {
  text-align: center;
  color: rgba(255,255,255,0.55);
  padding: 32px 16px;
  font-size: 13px;
}
.invite-job-empty {
  text-align: center;
  padding: 28px 20px;
  color: rgba(255,255,255,0.85);
}

@media (max-width: 500px) {
  .hire-mode-title { font-size: 19px; }
  .hire-mode-icon { font-size: 32px; }
  .hire-mode-name { font-size: 16px; }
}

/* ══════════════════════════════════════════════════════════
   Character References · profile card + modals
   ══════════════════════════════════════════════════════════ */
.px-refs-section {
  padding: 0 16px;
  margin: 0 0 16px;
}
.px-refs-card {
  padding: 18px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 14px;
}
.px-refs-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.px-refs-head h3 {
  font-family: 'Playfair Display', serif;
  font-size: 16px;
  font-weight: 800;
  color: #B0B4BC;
  margin: 0;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.px-refs-head-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.px-refs-chip {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.4px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(34,197,94,0.14);
  color: #4ade80;
}
.px-refs-chip-pending {
  background: rgba(59,130,246,0.14);
  color: #93c5fd;
}
.px-refs-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.px-refs-actions .networth-btn-primary { flex: 2; }
.px-refs-btn-secondary {
  flex: 1;
  padding: 10px 12px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.3);
  color: #B0B4BC;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease;
}
.px-refs-btn-secondary:hover { background: rgba(255,255,255,0.08); }

.px-refs-list { display: flex; flex-direction: column; gap: 10px; }
.px-ref-row {
  display: flex;
  gap: 12px;
  padding: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 12px;
}
.px-ref-row img {
  width: 46px; height: 46px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,0.4);
  flex-shrink: 0;
}
.px-ref-body { flex: 1; min-width: 0; }
.px-ref-top {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 2px;
}
.px-ref-top strong {
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}
.px-ref-verified {
  font-size: 10px;
  padding: 2px 7px;
  background: rgba(34,197,94,0.15);
  color: #4ade80;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.px-ref-stars {
  margin-left: auto;
  color: #B0B4BC;
  font-size: 13px;
  letter-spacing: 2px;
}
.px-ref-meta {
  display: block;
  font-size: 11px;
  color: rgba(255,255,255,0.65);
  margin-top: 2px;
}
.px-ref-rel {
  display: block;
  font-size: 10px;
  color: rgba(255,255,255,0.5);
  margin-top: 2px;
  font-style: normal;
}
.px-ref-quote {
  margin: 8px 0 6px;
  padding: 8px 12px;
  background: rgba(0,0,0,0.25);
  border-left: 2px solid #B0B4BC;
  color: rgba(255,255,255,0.85);
  font-size: 12px;
  line-height: 1.5;
  font-style: italic;
  border-radius: 0 8px 8px 0;
}
.px-ref-date {
  display: block;
  font-size: 10px;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.3px;
}
.px-refs-empty {
  padding: 16px;
  text-align: center;
  color: rgba(255,255,255,0.55);
  font-size: 12px;
  font-style: italic;
  background: rgba(255,255,255,0.02);
  border-radius: 10px;
  border: 1px dashed rgba(255,255,255,0.2);
}
.px-refs-more {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 8px 12px;
  background: transparent;
  border: 1px dashed rgba(255,255,255,0.35);
  color: #B0B4BC;
  border-radius: 8px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
}
.px-refs-more:hover { background: rgba(255,255,255,0.08); border-style: solid; }

/* References modals (shared card) */
.pxref-card {
  max-width: 500px;
  max-height: 94vh;
  overflow-y: auto;
}
.pxref-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: 19px;
  color: #fff;
  margin: 2px 0 4px;
}

.pxref-suggestions-head {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.9px;
  font-weight: 800;
  color: #B0B4BC;
  margin: 8px 0 4px;
}
.pxref-suggestions { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.pxref-suggestion {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  border: 1.5px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
}
.pxref-suggestion:hover { border-color: rgba(255,255,255,0.45); background: rgba(255,255,255,0.06); }
.pxref-suggestion img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.pxref-sug-info { flex: 1; min-width: 0; }
.pxref-sug-info strong { display: block; color: #fff; font-size: 13px; font-weight: 700; }
.pxref-sug-info span { display: block; color: rgba(255,255,255,0.65); font-size: 11px; }
.pxref-sug-info em { display: block; color: rgba(255,255,255,0.5); font-size: 10px; font-style: normal; margin-top: 2px; }
.pxref-sug-cta {
  font-size: 10px;
  font-weight: 800;
  color: #B0B4BC;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  white-space: nowrap;
}

.pxref-divider {
  text-align: center;
  font-size: 10px;
  color: rgba(255,255,255,0.4);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 10px 0;
}
.pxref-invite-row {
  display: flex;
  gap: 6px;
  align-items: center;
}
.pxref-invite-row input { flex: 1; }

.pxref-target {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 10px;
  margin-bottom: 12px;
}
.pxref-target img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
.pxref-target strong { display: block; color: #fff; font-size: 13px; font-weight: 800; }
.pxref-target span { display: block; color: rgba(255,255,255,0.65); font-size: 11px; margin-top: 1px; }

.pxref-guidelines {
  padding: 10px 14px;
  background: rgba(255,255,255,0.02);
  border-left: 2px solid #B0B4BC;
  border-radius: 0 8px 8px 0;
  margin: 8px 0 12px;
}
.pxref-guidelines strong {
  display: block;
  font-size: 11px;
  color: #B0B4BC;
  margin-bottom: 4px;
  letter-spacing: 0.3px;
}
.pxref-guidelines ul { margin: 0; padding: 0 0 0 18px; }
.pxref-guidelines li { font-size: 11px; color: rgba(255,255,255,0.75); padding: 2px 0; }

.pxref-wc {
  display: block;
  font-size: 10px;
  color: rgba(255,255,255,0.5);
  margin-top: 4px;
  text-align: right;
}

/* Manage modal */
.pxref-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}
.pxref-stats > div {
  padding: 10px 8px;
  text-align: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 10px;
}
.pxref-stats strong {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  color: #B0B4BC;
  font-weight: 800;
}
.pxref-stats span {
  display: block;
  font-size: 10px;
  color: rgba(255,255,255,0.6);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 2px;
}
.pxref-section-head {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.9px;
  font-weight: 800;
  color: #B0B4BC;
  margin: 12px 0 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255,255,255,0.15);
}
.pxref-mgr-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.pxref-mgr-row img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.pxref-mgr-info { flex: 1; min-width: 160px; }
.pxref-mgr-info strong { display: block; color: #fff; font-size: 13px; font-weight: 700; }
.pxref-mgr-info span { display: block; color: rgba(255,255,255,0.6); font-size: 11px; margin-top: 1px; }
.pxref-mgr-info em { display: block; color: rgba(255,255,255,0.5); font-size: 10px; font-style: normal; margin-top: 3px; }
.pxref-mgr-actions {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  align-items: center;
}
.pxref-mgr-actions button {
  font-size: 10px;
  padding: 4px 9px;
  background: transparent;
  color: #B0B4BC;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 6px;
  cursor: pointer;
  font-weight: 700;
}
.pxref-mgr-actions button.is-danger { color: #f87171; border-color: rgba(248,113,113,0.3); }
.pxref-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: rgba(255,255,255,0.7);
  cursor: pointer;
}
.pxref-toggle input { accent-color: #B0B4BC; }

/* CV References block */
.cv-refs-list { display: flex; flex-direction: column; gap: 12px; }
.cv-ref-item {
  padding: 10px 0;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.cv-ref-item:last-child { border-bottom: none; }
.cv-ref-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 2px;
}
.cv-ref-head strong { font-size: 13px; color: #1a1a1a; font-weight: 800; }
.cv-ref-stars { color: #6366FF; font-size: 12px; letter-spacing: 1.5px; }
.cv-ref-verified {
  font-size: 9px;
  padding: 2px 7px;
  background: rgba(99,102,255,0.14);
  color: #8a6a22;
  border-radius: 4px;
  font-weight: 800;
  letter-spacing: 0.3px;
}
.cv-ref-meta { font-size: 11px; color: #555; }
.cv-ref-rel  { font-size: 10px; color: #888; margin-top: 2px; font-style: italic; }
.cv-ref-quote {
  margin: 6px 0;
  padding: 6px 12px;
  border-left: 2px solid #FFFFFF;
  color: #333;
  font-size: 11px;
  line-height: 1.5;
  font-style: italic;
}
.cv-ref-date { font-size: 9px; color: #888; letter-spacing: 0.3px; }

@media (max-width: 500px) {
  .pxref-mgr-actions { width: 100%; justify-content: flex-end; }
  .pxref-stats { grid-template-columns: 1fr 1fr; }
}

/* ══════════════════════════════════════════════════════════
   Pre-deploy mobile polish · iOS safe-areas · touch targets
   · input-zoom prevention · tap highlight cleanup
   ══════════════════════════════════════════════════════════ */

/* ESSENTIALS-3 item 3 — legacy pre-NAV-1 safe-area block DELETED: its
   16px + inset !important overrode NAV-3's seated-low padding (2px +
   inset, already applied ONCE inside the bar) and stacked a dead strip
   under the icons. The NAV-1 rule at .bottom-nav is the single source. */
/* Top inset moved onto .top-bar's padding (absolute-chrome model); keep it on
   .app-wrapper only. Adding it to .phone-frame too would double-offset the
   scroller vs the absolute top bar. */
.app-wrapper {
  padding-top: env(safe-area-inset-top, 0px);
}

/* Prevent iOS Safari from zooming inputs on focus · needs >= 16px
   font-size on the input when it receives focus. Only bumps on
   mobile breakpoints so desktop compactness is preserved. */
@media (max-width: 820px) {
  .form-input,
  .form-input[type="text"],
  .form-input[type="email"],
  .form-input[type="tel"],
  .form-input[type="number"],
  .form-input[type="password"],
  .form-input[type="search"],
  .form-input[type="url"],
  .form-input[type="date"],
  .form-input[type="datetime-local"],
  textarea.form-input,
  select.form-input,
  .line-manager-dropdown,
  .line-manager-role-dropdown,
  .pxt-search-input,
  .pxemp-num {
    font-size: 16px !important;
  }
}

/* Enforce minimum touch-target on the most-tapped controls.
   WCAG 2.5.5 recommends 44×44 CSS px. */
@media (max-width: 820px) {
  .nav-item { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
  .icon-btn,
  .avatar-btn,
  .profile-edit-btn,
  .profile-photo-edit,
  .ops-modal-x,
  .pxam-item,
  .pxt-tab,
  .pxnw-tab,
  .pxgig-tab,
  .pxstudio-step,
  .hx-pay-card,
  .pxpp-choice,
  .pxmatch-action,
  .pxref-mgr-actions button,
  .pxnw-row-actions button,
  .pxt-mem-actions button {
    min-height: 40px;
  }
  .px-role-switcher .prs-toggle,
  .btn-gold, .btn-outline, .btn-primary, .btn-ghost, .btn-gold.btn-sm,
  .networth-btn-primary,
  .hire-mode-btn {
    min-height: 44px;
  }
  /* Inline chips stay small for density but at least finger-tappable */
  .candidate-rate-discreet,
  .gig-calc-chip,
  .pxt-pill,
  .pxt-quick-btn {
    min-height: 32px;
    padding-top: 6px;
    padding-bottom: 6px;
  }
}

/* Clean up blue iOS tap flash on interactive elements */
button, a, .nav-item, .icon-btn, .pxam-item, .ops-modal-x,
.pxmatch-action, .pxpp-choice, .hire-mode-card {
  -webkit-tap-highlight-color: rgba(255,255,255,0.15);
}

/* Prevent horizontal overflow on narrow viewports */
@media (max-width: 500px) {
  html, body { overflow-x: hidden; }
  .screen-container { overflow-x: hidden; }
  .swipe-card { max-width: 100%; }
}

/* Smooth native-feel scrolling everywhere */
.pxt-step3-scroll,
.pxmw-pane,
.pxnw-body,
.pxgig-list,
.pxstudio-body,
.pxset-body,
.px-refs-section,
.pxref-suggestions,
.pxmcfg-added,
.pxset-modal .pxset-card {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Keyboard-aware form focus: scroll into view on focus (iOS keyboard safe) */
@media (max-width: 820px) {
  .form-input:focus,
  .line-manager-dropdown:focus,
  .line-manager-role-dropdown:focus,
  .pxt-search-input:focus,
  .pxemp-num:focus,
  textarea:focus {
    scroll-margin-top: 80px;
    scroll-margin-bottom: 160px;
  }
}

/* Ghost-card promoted transform · be extra defensive so the ghost is never
   affected by any stacking-context or nth-child rule */
.swipe-card-ghost {
  will-change: transform, opacity;
  pointer-events: none !important;
  z-index: 9999 !important;
  transform-origin: center center;
}

/* ══════════════════════════════════════════════════════════
   Dynamic profile-tab renderers · real user registration data
   ══════════════════════════════════════════════════════════ */
.px-dyn-wrap { display: flex; flex-direction: column; gap: 10px; padding: 8px 0; }
.px-dyn-item,
.exp-entry.px-dyn-item {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 12px;
}
.exp-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255,255,255,0.25), rgba(255,255,255,0.08));
  color: #B0B4BC;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.4px;
  flex-shrink: 0;
}
.exp-icon-img { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; flex-shrink: 0; }
.exp-body { flex: 1; min-width: 0; }
.exp-body h4 {
  margin: 0 0 2px;
  font-size: 14px;
  font-weight: 800;
  color: #fff;
}
.exp-company {
  margin: 0;
  font-size: 12px;
  color: rgba(255,255,255,0.75);
  font-weight: 600;
}
.exp-dates {
  margin: 3px 0 4px;
  font-size: 11px;
  color: #B0B4BC;
  font-style: italic;
}
.exp-desc {
  margin: 4px 0 0;
  font-size: 11px;
  color: rgba(255,255,255,0.7);
  line-height: 1.45;
}

.px-skills-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 0;
}
.px-skill-tag {
  display: inline-block;
  padding: 6px 12px;
  background: rgba(255,255,255, 0.12);
  border: 1px solid rgba(255,255,255, 0.35);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: #B0B4BC;
}

.px-cred-section { margin-bottom: 14px; }
.px-cred-head {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.9px;
  font-weight: 800;
  color: #B0B4BC;
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255,255,255,0.2);
}
.px-cred-item {
  display: flex;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  margin-bottom: 6px;
  align-items: center;
}
.px-cred-item img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.3);
  flex-shrink: 0;
}
.px-cred-ph {
  width: 52px; height: 52px;
  border-radius: 8px;
  background: rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.px-cred-body { flex: 1; min-width: 0; }
.px-cred-body strong { display: block; color: #fff; font-size: 13px; font-weight: 800; }
.px-cred-body span { display: block; color: rgba(255,255,255,0.65); font-size: 11px; margin-top: 1px; }
.px-cred-body em {
  display: block;
  color: #B0B4BC;
  font-size: 10px;
  margin-top: 2px;
  font-style: italic;
}

.px-gallery-img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.25);
}

/* ══════════════════════════════════════════════════════════
   Smart Demo Mode · role banner + "you stay the same" card
   ══════════════════════════════════════════════════════════ */
.demo-role-banner {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 8px);
  right: 10px;
  display: none;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 10px;
  background: linear-gradient(135deg, rgba(255,255,255,0.22), rgba(255,255,255,0.08));
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 999px;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  z-index: 100;
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
  max-width: calc(100vw - 20px);
}
.demo-role-banner-ico { font-size: 14px; line-height: 1; }
.demo-role-banner-text { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.demo-role-banner-text strong {
  color: #B0B4BC;
  font-weight: 800;
  font-size: 11px;
  white-space: nowrap;
}
.demo-role-banner-text em {
  color: rgba(255,255,255,0.7);
  font-size: 9px;
  font-style: normal;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}
.demo-role-banner button {
  background: transparent;
  border: none;
  color: #B0B4BC;
  cursor: pointer;
  font-weight: 700;
  font-size: 10px;
  padding: 2px 8px;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.demo-role-banner button.demo-role-reset {
  padding: 2px 6px;
  font-size: 12px;
}
.demo-role-banner button:hover { color: #FFFFFF; }

/* Demo switcher · "your profile stays the same" card */
.px-role-switcher .prs-you {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 10px;
  margin-bottom: 10px;
}
.px-role-switcher .prs-you .prs-av {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}
.px-role-switcher .prs-you strong {
  display: block;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}
.px-role-switcher .prs-you span {
  display: block;
  color: rgba(255,255,255,0.65);
  font-size: 10px;
  margin-top: 2px;
  line-height: 1.4;
}

/* When the switcher avatar is backed by a real profile photo, drop the init letters */
.px-role-switcher .prs-av[style*="background-image"] {
  color: transparent;
}

@media (max-width: 500px) {
  .demo-role-banner-text em { max-width: 100px; }
  .demo-role-banner { padding: 6px 8px; }
}

/* ══════════════════════════════════════════════════════════
   The One Step 5 · Optional payment · skip + gate
   ══════════════════════════════════════════════════════════ */
.hx-pay-skip-note {
  margin: 8px 0 4px;
  padding: 10px 14px;
  background: rgba(255,255,255, 0.08);
  border: 1px solid rgba(255,255,255, 0.28);
  border-radius: 10px;
  font-size: 12px;
  color: rgba(255,255,255,0.8);
  line-height: 1.5;
}
.hx-pay-skip-note strong { color: #B0B4BC; }

/* Warning modal */
.hxskip-card { max-width: 460px; }
.hxskip-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: 19px;
  color: #fff;
  margin: 0 0 8px;
}
.hxskip-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 10px 0;
}
.hxskip-col {
  padding: 12px 14px;
  border-radius: 10px;
}
.hxskip-col.hxskip-can {
  background: rgba(34,197,94,0.08);
  border: 1px solid rgba(34,197,94,0.3);
}
.hxskip-col.hxskip-cant {
  background: rgba(248,113,113,0.08);
  border: 1px solid rgba(248,113,113,0.3);
}
.hxskip-col strong {
  display: block;
  font-size: 11px;
  margin-bottom: 6px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.hxskip-col.hxskip-can strong { color: #4ade80; }
.hxskip-col.hxskip-cant strong { color: #fca5a5; }
.hxskip-col ul { margin: 0; padding: 0 0 0 16px; }
.hxskip-col li { font-size: 11px; padding: 2px 0; line-height: 1.4; color: rgba(255,255,255,0.8); }

/* In-app paygate banner · pinned at top of HR Hub / Ops Oasis / Hiring */
.px-paygate-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 16px;
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(251,146,60,0.18), rgba(251,146,60,0.05));
  border: 1px solid rgba(251,146,60,0.4);
  border-radius: 12px;
}
.px-paygate-ico {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: rgba(251,146,60,0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
}
.px-paygate-body { flex: 1; min-width: 0; }
.px-paygate-body strong {
  display: block;
  font-size: 12px;
  color: #fdba74;
  font-weight: 800;
  margin-bottom: 2px;
}
.px-paygate-body span {
  display: block;
  font-size: 11px;
  color: rgba(255,255,255,0.7);
  line-height: 1.45;
}
.px-paygate-banner button {
  padding: 8px 14px;
  background: linear-gradient(135deg, #B0B4BC, #B0B4BC);
  color: #1a1000;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.3px;
  white-space: nowrap;
  flex-shrink: 0;
}
.px-paygate-banner button:hover { filter: brightness(1.05); }

@media (max-width: 500px) {
  .hxskip-cols { grid-template-columns: 1fr; }
  .px-paygate-banner { flex-wrap: wrap; }
  .px-paygate-banner button { width: 100%; }
}

/* ══════════════════════════════════════════════════════════
   Step 6 · Optional subscription + Free Tier + CuadriCode
   ══════════════════════════════════════════════════════════ */
.hx-tier-optional-chip {
  display: inline-block;
  padding: 3px 10px;
  margin-left: 6px;
  background: rgba(34,197,94,0.15);
  color: #4ade80;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  vertical-align: middle;
}

/* Free tier card · sits above the paid tier grid */
.hx-free-card {
  display: block;
  padding: 16px;
  background: linear-gradient(135deg, rgba(34,197,94,0.1), rgba(34,197,94,0.03));
  border: 1.5px solid rgba(34,197,94,0.4);
  border-radius: 16px;
  cursor: pointer;
  margin: 10px 0 14px;
  transition: all 0.18s ease;
}
.hx-free-card:has(input:checked),
.hx-free-card.is-selected {
  border-color: #4ade80;
  box-shadow: 0 8px 24px rgba(34,197,94,0.18);
}
.hx-free-card input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.hx-free-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: flex-start;
}
.hx-free-row > div:first-child { min-width: 140px; }
.hx-free-row .hx-tier-name { color: #4ade80; }
.hx-free-row .hx-tier-price span { color: #4ade80; }
.hx-free-feat strong {
  display: block;
  font-size: 10px;
  color: #4ade80;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 4px;
  font-weight: 800;
}
.hx-free-feat ul {
  margin: 0 0 10px;
  padding: 0 0 0 16px;
  list-style: none;
}
.hx-free-feat li {
  position: relative;
  font-size: 11px;
  color: rgba(255,255,255,0.75);
  padding: 2px 0;
  line-height: 1.4;
}
.hx-free-feat ul.hx-free-locked li { color: rgba(255,255,255,0.55); }
.hx-free-cta {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed rgba(34,197,94,0.3);
  text-align: center;
  font-size: 11px;
  color: #4ade80;
  font-weight: 700;
  letter-spacing: 0.3px;
}

/* CuadriCode row in Step 6 */
.hx-cuadricode-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.06);
  border: 1px dashed rgba(255,255,255,0.3);
  border-radius: 10px;
  flex-wrap: wrap;
}
.hx-cuadricode-row > span {
  font-size: 12px;
  color: rgba(255,255,255,0.75);
  font-weight: 700;
}

/* Free welcome modal */
.pxfree-card {
  max-width: 420px;
  text-align: center;
}
.pxfree-burst { font-size: 42px; margin-bottom: 4px; }
.pxfree-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  color: #fff;
  margin: 0 0 8px;
}
.pxfree-incl,
.pxfree-unlock {
  margin: 10px 0;
  padding: 12px 14px;
  border-radius: 10px;
  text-align: left;
}
.pxfree-incl {
  background: rgba(34,197,94,0.08);
  border: 1px solid rgba(34,197,94,0.3);
}
.pxfree-unlock {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.3);
}
.pxfree-incl strong { color: #4ade80; font-size: 11px; letter-spacing: 0.5px; text-transform: uppercase; display: block; margin-bottom: 6px; }
.pxfree-unlock strong { color: #B0B4BC; font-size: 11px; letter-spacing: 0.5px; text-transform: uppercase; display: block; margin-bottom: 6px; }
.pxfree-incl ul, .pxfree-unlock ul { margin: 0; padding: 0 0 0 16px; list-style: none; }
.pxfree-incl li, .pxfree-unlock li { font-size: 12px; color: rgba(255,255,255,0.8); padding: 2px 0; }

/* CuadriCode redeem modal */
.pxpcode-card { max-width: 420px; }
.pxpcode-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: 19px;
  color: #fff;
  margin: 0 0 8px;
}
.pxpcode-hint {
  font-size: 11px;
  color: rgba(255,255,255,0.55);
}
.pxpcode-hint code {
  display: inline-block;
  padding: 1px 6px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 4px;
  font-family: 'Inter', monospace;
  color: #B0B4BC;
  font-weight: 700;
  margin: 0 2px;
}

/* Locked feature modal */
.pxlock-card {
  max-width: 420px;
  text-align: center;
}
.pxlock-icon { font-size: 52px; margin-bottom: 8px; filter: drop-shadow(0 0 24px rgba(255,255,255,0.4)); }
.pxlock-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: 19px;
  color: #fff;
  margin: 0 0 4px;
}
.pxlock-benefits {
  margin: 10px 0;
  padding: 10px 14px;
  background: rgba(255,255,255,0.06);
  border-left: 2px solid #B0B4BC;
  border-radius: 0 8px 8px 0;
  text-align: left;
}
.pxlock-benefits strong {
  display: block;
  font-size: 11px;
  color: #B0B4BC;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.pxlock-benefits ul { margin: 0; padding: 0 0 0 12px; list-style: none; }
.pxlock-benefits li { font-size: 12px; color: rgba(255,255,255,0.8); padding: 2px 0; }
.pxlock-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 14px 0 8px;
}
.pxlock-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
  color: rgba(255,255,255,0.9);
}
.pxlock-btn:hover {
  border-color: #B0B4BC;
  background: rgba(255,255,255,0.06);
}
.pxlock-btn > span:first-child {
  font-size: 22px;
  width: 36px;
  text-align: center;
  flex-shrink: 0;
}
.pxlock-btn > div { flex: 1; }
.pxlock-btn strong { display: block; color: #fff; font-size: 13px; font-weight: 800; }
.pxlock-btn em { display: block; color: rgba(255,255,255,0.65); font-size: 11px; font-style: normal; margin-top: 2px; }
.pxlock-btn-primary {
  background: linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.05));
  border-color: #B0B4BC;
}
.pxlock-back {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.55);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  padding: 6px;
}
.pxlock-back:hover { color: #fff; }

/* Lock banner at top of gated screens */
.px-lock-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 16px;
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(255,255,255,0.15), rgba(255,255,255,0.04));
  border: 1px solid rgba(255,255,255,0.45);
  border-radius: 12px;
}
.px-lock-banner-ico {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: rgba(255,255,255,0.22);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; flex-shrink: 0;
}
.px-lock-banner-body { flex: 1; min-width: 0; }
.px-lock-banner-body strong { display: block; font-size: 12px; color: #fff; font-weight: 800; margin-bottom: 2px; }
.px-lock-banner-body span { display: block; font-size: 11px; color: rgba(255,255,255,0.7); line-height: 1.4; }
.px-lock-banner button {
  padding: 8px 14px;
  background: linear-gradient(135deg, #B0B4BC, #B0B4BC);
  color: #1a1000;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.3px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Membership badge · pinned top-left */
.px-membership-badge {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 8px);
  left: 10px;
  display: none;
  padding: 5px 11px;
  background: rgba(0,0,0,0.6);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 999px;
  color: rgba(255,255,255,0.85);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.3px;
  cursor: pointer;
  z-index: 100;
  backdrop-filter: blur(6px);
  align-items: center;
  transition: background 0.15s ease, transform 0.15s ease;
}
.px-membership-badge:hover { background: rgba(255,255,255,0.18); transform: translateY(-1px); }
.px-membership-badge.is-free { border-color: rgba(34,197,94,0.45); color: #86efac; }
.px-membership-badge.is-paid { border-color: rgba(255,255,255,0.6); color: #B0B4BC; }

/* Subscription dashboard */
.pxsub-card { max-width: 440px; }
.pxsub-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: 19px;
  color: #fff;
  margin: 0 0 10px;
}
.pxsub-current {
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(255,255,255,0.15), rgba(255,255,255,0.05));
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 10px;
  margin-bottom: 10px;
}
.pxsub-current strong {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 17px;
  color: #B0B4BC;
  font-weight: 800;
}
.pxsub-current span {
  display: block;
  font-size: 11px;
  color: rgba(255,255,255,0.7);
  margin-top: 3px;
}
.pxsub-usage {
  padding: 10px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  margin-bottom: 10px;
}
.pxsub-usage-head {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #B0B4BC;
  font-weight: 800;
  margin-bottom: 6px;
}
.pxsub-usage-row {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  font-size: 12px;
  color: rgba(255,255,255,0.75);
  border-bottom: 1px dashed rgba(255,255,255,0.06);
}
.pxsub-usage-row:last-child { border-bottom: none; }
.pxsub-usage-row strong { color: #B0B4BC; }
.pxsub-upgrade {
  margin: 10px 0;
}
.pxsub-upgrade-head {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #B0B4BC;
  font-weight: 800;
  margin-bottom: 6px;
}
.pxsub-upgrade-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  margin-bottom: 4px;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.pxsub-upgrade-row:hover {
  background: rgba(255,255,255,0.06);
  border-color: #B0B4BC;
}
.pxsub-upgrade-row strong { color: #fff; font-size: 13px; font-weight: 800; flex: 0 0 auto; }
.pxsub-upgrade-row em {
  color: rgba(255,255,255,0.65);
  font-size: 11px;
  font-style: normal;
  margin-left: 8px;
}
.pxsub-upgrade-row span:last-child {
  margin-left: auto;
  color: #B0B4BC;
  font-size: 11px;
  font-weight: 800;
}

@media (max-width: 500px) {
  .hx-free-row { grid-template-columns: 1fr; gap: 10px; }
  .hx-free-row > div:first-child { min-width: auto; }
  .px-lock-banner { flex-wrap: wrap; }
  .px-lock-banner button { width: 100%; }
}

/* ══════════════════════════════════════════════════════════
   Free-tier candidate card · PARTIAL PREVIEW (no blur)
   · 3 photos swipeable · first name + role · subscribe CTA
   ══════════════════════════════════════════════════════════ */
.swipe-card.cc-free-partial .cc-photo-dot.cc-dot-locked {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 10, 10, 0.7);
  border: 1px solid rgba(255,255,255, 0.5);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  font-size: 8px;
  color: #B0B4BC;
  line-height: 1;
}

.swipe-card.cc-free-partial .cc-info {
  padding-bottom: 16px !important;
  gap: 6px !important;
}

.cc-free-partial-head { margin-bottom: 2px; }
.cc-name-firstonly {
  font-size: 28px !important;
  letter-spacing: -0.5px !important;
  margin: 0 !important;
}

.cc-free-locked-panel {
  margin-top: 6px;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(10,10,10,0.82), rgba(20,20,20,0.72));
  border: 1.5px solid #B0B4BC;
  border-radius: 12px;
  backdrop-filter: blur(10px);
  box-shadow: 0 6px 22px rgba(0,0,0,0.4);
}
.cc-free-locked-head {
  font-family: 'Playfair Display', serif;
  font-size: 12px;
  font-weight: 800;
  color: #B0B4BC;
  letter-spacing: 0.4px;
  margin-bottom: 6px;
}
.cc-free-locked-list {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
}
.cc-free-locked-list li {
  font-size: 11px;
  color: rgba(255,255,255,0.78);
  padding: 2px 0;
  line-height: 1.4;
}
.cc-free-locked-list li::before {
  content: '• ';
  color: #B0B4BC;
  font-weight: 800;
}
.cc-free-upgrade-btn {
  display: block;
  width: 100%;
  padding: 10px 14px;
  background: linear-gradient(135deg, #B0B4BC, #B0B4BC);
  color: #1a1000;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.3px;
  margin-bottom: 6px;
}
.cc-free-upgrade-btn:hover { filter: brightness(1.05); }
.cc-free-cuadricode-btn {
  display: block;
  width: 100%;
  padding: 9px 14px;
  background: transparent;
  color: #B0B4BC;
  border: 1px solid rgba(255,255,255, 0.4);
  border-radius: 10px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
}
.cc-free-cuadricode-btn:hover { background: rgba(255,255,255, 0.1); }
.cc-free-hint {
  margin-top: 8px;
  font-size: 10px;
  color: rgba(255,255,255,0.55);
  text-align: center;
  letter-spacing: 0.3px;
  font-style: italic;
}

/* Locked/disabled swipe Like button */
.swipe-btn.like-btn.is-locked,
.swipe-btn.like-btn.is-admin-disabled {
  opacity: 0.45;
  filter: grayscale(0.5);
  position: relative;
}
.swipe-btn.like-btn.is-locked::after,
.swipe-btn.like-btn.is-admin-disabled::after {
  content: '🔒';
  position: absolute;
  top: -4px; right: -4px;
  width: 18px; height: 18px;
  background: #0a0a0a;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  border: 1px solid #B0B4BC;
}

/* Admin apply-disabled modal */
.pxadmin-apply-card {
  max-width: 400px;
  text-align: center;
}
.pxadmin-apply-ico {
  font-size: 40px;
  margin-bottom: 6px;
}
.pxadmin-apply-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: 19px;
  color: #fff;
  margin: 0 0 6px;
}
.pxadmin-apply-can {
  margin: 10px 0;
  padding: 10px 14px;
  background: rgba(34,197,94,0.08);
  border: 1px solid rgba(34,197,94,0.3);
  border-radius: 10px;
  text-align: left;
}
.pxadmin-apply-can strong {
  display: block;
  font-size: 10px;
  color: #4ade80;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.pxadmin-apply-can ul { margin: 0; padding: 0 0 0 16px; list-style: none; }
.pxadmin-apply-can li { font-size: 11px; color: rgba(255,255,255,0.8); padding: 2px 0; }

/* ══════════════════════════════════════════════════════════
   Company Reputation (replaces The One CrewScore)
   ══════════════════════════════════════════════════════════ */
.px-company-rep {
  margin: 10px 16px 14px;
  padding: 16px;
  background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03));
  border: 1.5px solid rgba(255,255,255,0.35);
  border-radius: 14px;
}
.px-rep-head { text-align: center; margin-bottom: 10px; }
.px-rep-title {
  font-size: 10px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  font-weight: 800;
  color: #B0B4BC;
  margin-bottom: 6px;
}
.px-rep-score {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.px-rep-score strong {
  font-family: 'Playfair Display', serif;
  font-size: 30px;
  font-weight: 900;
  color: #B0B4BC;
  line-height: 1;
}
.px-rep-score em {
  font-style: normal;
  color: rgba(255,255,255,0.55);
  font-size: 14px;
  font-weight: 700;
}
.px-rep-stars {
  color: #B0B4BC;
  font-size: 15px;
  letter-spacing: 2px;
}
.px-rep-meta {
  margin-top: 4px;
  font-size: 11px;
  color: rgba(255,255,255,0.6);
}
.px-rep-break {
  padding: 10px 14px;
  background: rgba(0,0,0,0.25);
  border-radius: 10px;
  margin-bottom: 10px;
}
.px-rep-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  font-size: 12px;
  color: rgba(255,255,255,0.75);
}
.px-rep-row strong {
  color: #B0B4BC;
  font-weight: 600;
  letter-spacing: 1.5px;
}
.px-rep-badges-head {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.9px;
  color: #B0B4BC;
  font-weight: 800;
  margin-bottom: 6px;
}
.px-rep-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.px-rep-badge {
  display: inline-block;
  padding: 5px 11px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 999px;
  color: #B0B4BC;
  font-size: 11px;
  font-weight: 700;
}
.px-rep-view-btn {
  display: block;
  width: 100%;
  padding: 9px 14px;
  background: transparent;
  border: 1px dashed rgba(255,255,255,0.35);
  color: #B0B4BC;
  border-radius: 10px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}
.px-rep-view-btn:hover { background: rgba(255,255,255,0.08); border-style: solid; }

@media (max-width: 500px) {
  .px-rep-score strong { font-size: 26px; }
  .cc-free-lock { bottom: 64px; padding: 12px 14px; }
}

/* ══════════════════════════════════════════════════════════
   Top Up Member Wallet modal
   ══════════════════════════════════════════════════════════ */
.pxtum-card {
  max-width: 440px;
  max-height: 94vh;
  overflow-y: auto;
}
.pxtum-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: 19px;
  color: #fff;
  margin: 0 0 8px;
}
.pxtum-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
  max-height: 240px;
  overflow-y: auto;
}
.pxtum-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  transition: all 0.12s ease;
}
.pxtum-row:hover { border-color: rgba(255,255,255,0.45); background: rgba(255,255,255,0.06); }
.pxtum-row img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.pxtum-row strong { display: block; color: #fff; font-size: 12px; font-weight: 700; }
.pxtum-row span { display: block; color: rgba(255,255,255,0.6); font-size: 11px; margin-top: 1px; }

.pxtum-selected {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 10px;
  margin-bottom: 10px;
}
.pxtum-selected img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.pxtum-selected strong { display: block; color: #fff; font-size: 14px; font-weight: 800; }
.pxtum-selected span { display: block; color: rgba(255,255,255,0.7); font-size: 11px; margin-top: 2px; }
.pxtum-change {
  margin-left: auto;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.35);
  color: #B0B4BC;
  padding: 5px 11px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
}
.pxtum-change:hover { background: rgba(255,255,255,0.1); }

.pxtum-amount {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 800;
  color: #B0B4BC;
}
.pxtum-quick {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.pxtum-quick-btn {
  padding: 6px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 999px;
  color: rgba(255,255,255,0.85);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.12s ease;
}
.pxtum-quick-btn:hover { border-color: rgba(255,255,255,0.4); color: #fff; }
.pxtum-quick-btn.is-on {
  background: rgba(255,255,255,0.15);
  border-color: #B0B4BC;
  color: #B0B4BC;
}
.pxtum-deduct {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 10px;
  font-size: 11px;
  color: rgba(255,255,255,0.75);
  margin-bottom: 10px;
}
.pxtum-deduct strong { color: #B0B4BC; }
.pxtum-deduct.is-warn {
  background: rgba(248,113,113,0.08);
  border-color: rgba(248,113,113,0.3);
}
.pxtum-deduct.is-warn em { color: #fca5a5; font-style: normal; font-weight: 700; }

/* ══════════════════════════════════════════════════════════
   Registration · single top-left back button + no duplicates
   ══════════════════════════════════════════════════════════ */
.reg-section { position: relative; }
.registration-back-btn {
  position: absolute;
  top: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 999px;
  color: #B0B4BC;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  z-index: 100;
  backdrop-filter: blur(6px);
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.registration-back-btn:hover {
  background: #B0B4BC;
  color: #1a1000;
  transform: translateX(-2px);
}
.registration-back-btn .rbb-arrow { font-size: 14px; line-height: 1; }

/* Hide the legacy inline "← Back" buttons inside the step panels so there's
   only one back control on screen (the top-left pill). Buttons are tagged
   with data-reg-back-hidden via JS (see _pxHideInlineRegBacks) so we don't
   accidentally catch "Skip for now" / "Continue →" which also use hxGoto(). */
#reg-the-one [data-reg-back-hidden],
#reg-crew [data-reg-back-hidden] {
  display: none !important;
}

/* Let the surviving row still look balanced when the back button disappears */
:is(#reg-the-one, #reg-crew) .btn-row,
#reg-crew .btn-row {
  justify-content: flex-end;
}
:is(#reg-the-one, #reg-crew) .btn-row .btn-primary,
:is(#reg-the-one, #reg-crew) .btn-row .btn-gold,
#reg-crew .btn-row .btn-primary { min-width: 180px; }

@media (max-width: 500px) {
  .registration-back-btn { top: 10px; left: 10px; padding: 7px 12px; font-size: 11px; }
  .registration-back-btn .rbb-label { display: none; }
}

/* ══════════════════════════════════════════════════════════
   The One PDF extraction · loading spinner + auto-fill highlight
   ══════════════════════════════════════════════════════════ */
.hx-ext-spin {
  display: inline-block;
  animation: hxExtSpin 1.4s linear infinite;
}
@keyframes hxExtSpin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.hx-auto-filled {
  background: rgba(255,255,255, 0.1) !important;
  border-color: rgba(255,255,255, 0.5) !important;
  box-shadow: 0 0 0 2px rgba(255,255,255, 0.12);
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

/* ══════════════════════════════════════════════════════════
   Revenue Dashboard · "CuadrillaONE Team Only" banner
   ══════════════════════════════════════════════════════════ */
.px-rev-team-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  margin: 0 0 10px;
  background: linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.06));
  border: 1px solid #B0B4BC;
  border-radius: 10px;
  color: #B0B4BC;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.px-rev-team-banner strong { color: #FFFFFF; }

/* ══════════════════════════════════════════════════════════
   Company Analytics (Master Admin · entity-only stats)
   ══════════════════════════════════════════════════════════ */
.pxca-card {
  max-width: 460px;
  max-height: 92vh;
  overflow-y: auto;
}
.pxca-head {
  text-align: center;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.2);
  margin-bottom: 10px;
}
.pxca-eyebrow {
  font-size: 10px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: #B0B4BC;
  font-weight: 800;
}
.pxca-head h3 {
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  color: #fff;
  margin: 2px 0 4px;
}
.pxca-period {
  font-size: 11px;
  color: rgba(255,255,255,0.65);
}
.pxca-section {
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.pxca-section:last-of-type { border-bottom: none; }
.pxca-section-head {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.9px;
  color: #B0B4BC;
  font-weight: 800;
  margin-bottom: 8px;
}
.pxca-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.pxca-grid > div {
  padding: 10px 6px;
  text-align: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 10px;
}
.pxca-grid strong {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  color: #B0B4BC;
  font-weight: 800;
  line-height: 1;
}
.pxca-grid span {
  display: block;
  font-size: 9px;
  color: rgba(255,255,255,0.65);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 4px;
  font-weight: 700;
}
.pxca-lines {
  background: rgba(0,0,0,0.25);
  border-radius: 10px;
  padding: 8px 14px;
}
.pxca-lines > div {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 12px;
  color: rgba(255,255,255,0.78);
  border-bottom: 1px dashed rgba(255,255,255,0.05);
}
.pxca-lines > div:last-child { border-bottom: none; }
.pxca-lines strong { color: #fff; font-weight: 700; }
.pxca-note {
  margin: 8px 0 0;
  padding: 8px 12px;
  background: rgba(255,255,255,0.02);
  border-left: 2px solid #B0B4BC;
  border-radius: 0 8px 8px 0;
  font-size: 11px;
  color: rgba(255,255,255,0.7);
  line-height: 1.45;
}
.pxca-note strong { color: #fff; }

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

/* ══════════════════════════════════════════════════════════
   Financial Performance (Master Admin · company-only finances)
   ══════════════════════════════════════════════════════════ */
.fp-card {
  max-width: 560px;
  max-height: 92vh;
  overflow-y: auto;
}
.fp-head {
  text-align: center;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.22);
  margin-bottom: 14px;
}
.fp-eyebrow {
  font-size: 10px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: #B0B4BC;
  font-weight: 800;
}
.fp-head h3 {
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  color: #fff;
  margin: 4px 0 4px;
}
.fp-period {
  font-size: 11px;
  color: rgba(255,255,255,0.65);
}
.fp-section {
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.fp-section:last-of-type { border-bottom: none; }
.fp-section-head {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.9px;
  color: #B0B4BC;
  font-weight: 800;
  margin-bottom: 10px;
}
.fp-section-sub {
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  margin: 6px 0 10px;
}
.fp-overview .fp-total-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(255,255,255,0.14), rgba(255,255,255,0.04));
  border: 1px solid rgba(255,255,255,0.32);
  border-radius: 14px;
}
.fp-total-label {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: rgba(255,255,255,0.65);
  font-weight: 700;
}
.fp-total-amount {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 26px;
  font-weight: 800;
  color: #B0B4BC;
  margin-top: 2px;
  line-height: 1.1;
}
/* Expense breakdown cards */
.fp-expense-card {
  padding: 12px 14px;
  margin-bottom: 8px;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
}
.fp-expense-card h4 {
  font-size: 13px;
  color: #fff;
  margin: 0 0 6px;
  font-weight: 700;
}
.fp-expense-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.fp-expense-amount {
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  font-weight: 800;
  color: #B0B4BC;
  line-height: 1;
}
.fp-expense-percentage {
  font-size: 11px;
  color: rgba(255,255,255,0.55);
}
.fp-expense-sub {
  margin-top: 6px;
  font-size: 10.5px;
  color: rgba(255,255,255,0.45);
}
/* Change pills */
.fp-change {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  margin-left: auto;
}
.fp-change.fp-up,
.fp-up {
  background: rgba(255, 107, 107, 0.15);
  color: #ff6b6b;
}
.fp-change.fp-down,
.fp-down {
  background: rgba(81, 207, 102, 0.15);
  color: #51cf66;
}
.fp-change.fp-same {
  background: rgba(168, 168, 168, 0.15);
  color: #a8a8a8;
}
/* Staff / hiring grid */
.fp-staff-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 10px;
}
.fp-staff-grid > div {
  padding: 10px 6px;
  text-align: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 10px;
}
.fp-staff-grid strong {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 16px;
  color: #B0B4BC;
  font-weight: 800;
  line-height: 1;
}
.fp-staff-grid span {
  display: block;
  font-size: 9px;
  color: rgba(255,255,255,0.65);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-top: 4px;
  font-weight: 700;
}
.fp-top-earners {
  background: rgba(0,0,0,0.25);
  border-radius: 10px;
  padding: 10px 14px;
}
.fp-top-earners-head {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: rgba(255,255,255,0.6);
  font-weight: 700;
  margin-bottom: 6px;
}
.fp-top-earners ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
.fp-top-earners li {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  font-size: 12px;
  color: #fff;
  border-bottom: 1px dashed rgba(255,255,255,0.05);
}
.fp-top-earners li:last-child { border-bottom: none; }
.fp-top-earners strong { color: #B0B4BC; font-weight: 700; }
/* Content creators */
.fp-creators { display: flex; flex-direction: column; gap: 8px; }
.fp-creator {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
}
.fp-creator-rank {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  color: #B0B4BC;
  font-weight: 800;
  font-size: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.fp-creator-info { flex: 1; min-width: 0; }
.fp-creator-info strong { display: block; font-size: 13px; color: #fff; }
.fp-creator-info span { display: block; font-size: 10.5px; color: rgba(255,255,255,0.55); }
.fp-creator-rev {
  text-align: right;
  font-family: 'Playfair Display', serif;
  font-size: 15px;
  font-weight: 800;
  color: #B0B4BC;
}
.fp-creator-share {
  display: block;
  font-family: system-ui, sans-serif;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,0.45);
  font-weight: 600;
  margin-top: 2px;
}
.fp-creators-total {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04));
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 10px;
  font-size: 12px;
  color: #fff;
  font-weight: 700;
}
.fp-creators-total strong {
  font-family: 'Playfair Display', serif;
  font-size: 16px;
  color: #B0B4BC;
}
/* Trend chart */
.fp-trend-chart {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  gap: 8px;
  height: 160px;
  padding: 12px 6px 0;
  background: rgba(0,0,0,0.25);
  border-radius: 12px;
}
.fp-trend-bar {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  height: 100%;
}
.fp-trend-bar-fill {
  width: 70%;
  max-width: 60px;
  background: linear-gradient(180deg, rgba(255,255,255,0.7), rgba(255,255,255,0.25));
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 6px 6px 0 0;
  transition: height 0.4s ease;
}
.fp-trend-bar-fill.is-current {
  background: linear-gradient(180deg, #B0B4BC, rgba(255,255,255,0.6));
  box-shadow: 0 0 12px rgba(255,255,255,0.35);
}
.fp-trend-bar-amt {
  font-size: 11px;
  color: #fff;
  font-weight: 700;
}
.fp-trend-bar-lbl {
  font-size: 9.5px;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  font-weight: 600;
  text-align: center;
}
/* Insights list */
.fp-insights {
  margin: 0;
  padding: 0;
  list-style: none;
}
.fp-insights li {
  padding: 8px 12px;
  margin-bottom: 6px;
  background: rgba(0,0,0,0.25);
  border-left: 3px solid #B0B4BC;
  border-radius: 0 8px 8px 0;
  font-size: 12px;
  color: rgba(255,255,255,0.85);
  line-height: 1.45;
}
.fp-actions { display: flex; gap: 8px; margin-top: 14px; }
.fp-actions .btn-third { flex: 1; }
.fp-footer-note {
  margin: 10px 0 0;
  padding: 8px 12px;
  background: rgba(255,255,255,0.02);
  border-left: 2px solid #B0B4BC;
  border-radius: 0 8px 8px 0;
  font-size: 10.5px;
  color: rgba(255,255,255,0.6);
  line-height: 1.45;
}
@media (max-width: 500px) {
  .fp-staff-grid { grid-template-columns: 1fr 1fr; }
  .fp-actions { flex-wrap: wrap; }
  .fp-actions .btn-third { flex: 1 1 calc(50% - 4px); }
  .fp-trend-chart { height: 140px; }
}

/* ══════════════════════════════════════════════════════════
   Cuadrix profile tabs · empty-state + vault sections
   ══════════════════════════════════════════════════════════ */
.px-tab-empty {
  text-align: center;
  padding: 28px 18px;
  border: 1px dashed rgba(255,255,255,0.3);
  border-radius: 14px;
  background: rgba(0,0,0,0.18);
}
.px-tab-empty-ico {
  font-size: 28px;
  margin-bottom: 6px;
}
.px-tab-empty h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 16px;
  color: #fff;
  margin: 4px 0;
}
.px-tab-empty p {
  font-size: 12.5px;
  color: rgba(255,255,255,0.6);
  margin: 0 0 14px;
}
.px-tab-empty .btn-gold, .px-tab-empty .btn-outline {
  margin: 4px 4px 0;
  min-width: 160px;
  display: inline-flex;
}
.px-dl-cv-btn {
  margin: 0 0 14px;
  font-size: 13px;
  letter-spacing: 0.3px;
}
.px-vault-section {
  padding: 12px 14px;
  margin-bottom: 10px;
  background: rgba(0,0,0,0.25);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.05);
}
.px-vault-section h4 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #B0B4BC;
  margin: 0 0 8px;
  font-weight: 800;
}
.px-vault-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: rgba(255,255,255,0.85);
}
.px-vault-item strong {
  display: block;
  font-size: 13px;
  color: #fff;
  margin-bottom: 2px;
}
.px-vault-item span {
  display: block;
  font-size: 11px;
  color: rgba(255,255,255,0.6);
}
.px-cred-id {
  display: block;
  font-size: 10px;
  color: rgba(255,255,255,0.45);
  margin-top: 2px;
  letter-spacing: 0.3px;
}

/* ✏️ edit buttons — bio, headline, contact, tab items (PL-52: now labeled "Edit ✏") */
.px-bio-edit-btn,
.px-headline-edit-btn,
.px-contact-edit-btn {
  float: right;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 999px;
  color: #B0B4BC;
  font-size: 11px;
  padding: 2px 8px;
  cursor: pointer;
  margin-left: 6px;
  line-height: 1.4;
  transition: background 0.18s ease, color 0.18s ease;
}
.px-bio-edit-btn:hover,
.px-headline-edit-btn:hover,
.px-contact-edit-btn:hover { background: #B0B4BC; color: #1a1000; }

/* Inline edit/delete per tab entry */
.px-dyn-item { position: relative; }
.px-dyn-actions {
  display: flex;
  gap: 4px;
  position: absolute;
  top: 10px; right: 10px;
}
.px-dyn-edit, .px-dyn-del {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.px-dyn-edit:hover { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.4); }
.px-dyn-del:hover  { background: rgba(255,107,107,0.15); border-color: rgba(255,107,107,0.4); }
.px-dyn-addbtn { margin-top: 10px; }

.px-cred-item { position: relative; padding-right: 80px; }
.px-cred-addrow {
  display: flex; gap: 8px; margin-top: 12px;
}

/* Edit modal · shared by every edit action */
.px-edit-card {
  max-width: 480px;
  max-height: 92vh;
  overflow-y: auto;
}
.px-edit-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 18px;
  color: #fff;
  margin: 0 0 14px;
  padding-right: 32px;
}
.px-edit-label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #B0B4BC;
  font-weight: 700;
  margin: 10px 0 4px;
}
.px-edit-body .form-input { width: 100%; }
.px-edit-body textarea.form-input { resize: vertical; }

/* ══════════════════════════════════════════════════════════
   Matched Candidate Full Profile (.cp-*)
   Used by View Profile after a match — shows full profile +
   downloadable CV of the matched person.
   ══════════════════════════════════════════════════════════ */
.cp-card {
  max-width: 560px;
  max-height: 92vh;
  overflow-y: auto;
  padding: 0 0 20px;
  position: relative;
}
.cp-back {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 5;
  background: rgba(0,0,0,0.6);
  border: 1px solid rgba(255,255,255,0.4);
  color: #B0B4BC;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  backdrop-filter: blur(6px);
}
.cp-back:hover { background: #B0B4BC; color: #1a1000; }
.cp-cover {
  height: 140px;
  background: linear-gradient(135deg,#FFFFFF,#8B6F1E);
  border-radius: 16px 16px 0 0;
}
.cp-photo-wrap {
  display: flex;
  justify-content: center;
  margin-top: -48px;
  position: relative;
  z-index: 2;
}
.cp-photo {
  width: 96px; height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #0a0a0a;
  background: #0a0a0a;
}
.cp-photo-init {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg,#FFFFFF,#8B6F1E);
  color: #0a0a0a;
  font-size: 28px; font-weight: 800;
  font-family: 'Playfair Display', Georgia, serif;
}
.cp-info {
  text-align: center;
  padding: 10px 20px 0;
}
.cp-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 22px; font-weight: 800;
  color: #fff;
  margin: 0;
}
.cp-tagline {
  font-size: 13px;
  color: var(--text-secondary);
  font-style: italic;
  margin: 4px 0 12px;
}

/* ═══════════════════════════════════════════════════
   Phase 15-4 · Public Profile View (unified Cuadrix + Brand)
   ═══════════════════════════════════════════════════ */
.pp-modal .pp-card {
  max-width: 480px;
  padding: 0;
}
.pp-close { z-index: 40; }
.pp-cover {
  height: 180px;
  background-size: cover;
  background-position: center;
}
.pp-avatar-wrap {
  margin: -50px 0 0 20px;
  position: relative;
  z-index: 5;
}
.pp-avatar {
  width: 96px; height: 96px;
  object-fit: cover;
  background: #fff;
  border: 3px solid #0a0a0a;
  display: block;
  box-shadow: 0 4px 16px rgba(0,0,0,0.45);
}
.pp-avatar-cuadrix { border-radius: 50%; }
.pp-avatar-brand   { border-radius: 16px; }
.pp-body { padding: 12px 24px 28px; }
.pp-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 24px; font-weight: 800;
  color: #fff;
  margin: 0 0 4px;
  letter-spacing: -0.4px;
}
.pp-subtitle {
  font-size: 13px;
  color: var(--text-secondary);
  font-style: italic;
  margin: 0 0 12px;
  letter-spacing: 0.2px;
}
.pp-stats {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 0 0 12px;
}
.pp-stat-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 999px;
  font-size: 11px;
  color: rgba(255,255,255,0.78);
}
.pp-stat-followers {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.30);
  color: var(--text-primary);
}
.pp-follow-btn {
  display: inline-block;
  margin: 6px 0 16px;
  padding: 9px 20px;
  background: #FFFFFF;
  color: #111;
  border: 0;
  border-radius: 999px;
  font-size: 13px; font-weight: 800;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.pp-follow-btn:hover { transform: translateY(-1px); }
.pp-follow-btn.is-following {
  background: rgba(255,255,255,0.06);
  color: var(--text-primary);
  border: 1px solid rgba(255,255,255,0.4);
}
/* Subtle red hint on hover when already following — telegraphs unfollow. */
.pp-follow-btn.is-following:hover {
  background: rgba(239,68,68,0.10);
  border-color: rgba(239,68,68,0.4);
  color: #fca5a5;
}
.pp-following-line {
  font-size: 12px;
  color: rgba(255,255,255,0.7);
  margin: 0 0 16px;
  letter-spacing: 0.2px;
}
.pp-following-line strong { color: var(--text-primary); font-weight: 700; }
.pp-section {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.pp-section-head {
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--text-primary);
  font-weight: 800;
  margin: 0 0 8px;
}
.pp-about {
  font-size: 13px; line-height: 1.55;
  color: rgba(255,255,255,0.84);
  margin: 0;
  white-space: pre-line;
}
.pp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pp-chip {
  display: inline-block;
  font-size: 11px; font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.88);
}
/* #13 PROFILE-PUBLIC-VIEW-VENUE — brand public-profile detail sections */
.pp-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pp-stat-card {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-gold);
  border-radius: 10px;
  text-align: center;
}
.pp-stat-card .pp-stat-ico { font-size: 16px; }
.pp-stat-card strong { font-size: 14px; font-weight: 800; color: var(--text-primary); }
.pp-stat-card em {
  font-size: 10px; font-style: normal; color: rgba(255,255,255,0.55);
  text-transform: uppercase; letter-spacing: 0.5px;
}
.pp-company-info { display: flex; flex-wrap: wrap; gap: 8px; }
.pp-info-item {
  display: flex; flex-direction: column; gap: 1px;
  padding: 6px 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 8px;
}
.pp-info-item em {
  font-size: 9.5px; font-style: normal; color: rgba(255,255,255,0.5);
  text-transform: uppercase; letter-spacing: 0.6px;
}
.pp-info-item strong { font-size: 12.5px; font-weight: 700; color: rgba(255,255,255,0.9); text-transform: capitalize; }
.pp-hours { display: flex; flex-direction: column; gap: 3px; }
.pp-hours-row {
  display: flex; justify-content: space-between;
  font-size: 12.5px; color: rgba(255,255,255,0.82); padding: 3px 0;
}
.pp-hours-row span:first-child { color: rgba(255,255,255,0.6); }
.pp-links { display: flex; flex-wrap: wrap; gap: 8px; }
.pp-link {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  border: 1px solid var(--border-gold);
  color: var(--text-primary);
  text-decoration: none;
}
.pp-link:hover { background: rgba(255,255,255,0.20); }
.pp-link-static { cursor: default; opacity: 0.85; }
.pp-trust { display: flex; flex-direction: column; gap: 4px; }
.pp-trust-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12.5px; color: rgba(255,255,255,0.78);
}
.pp-trust-row strong { font-size: 13px; font-weight: 800; color: rgba(255,255,255,0.92); }
.pp-cta { text-align: center; }
.pp-cta-text { font-size: 13px; font-weight: 700; color: var(--text-primary); margin: 0 0 8px; }
.pp-cta-text.pp-cta-muted { color: rgba(255,255,255,0.5); font-weight: 600; margin: 0; }
.pp-cta-btn {
  width: 100%; padding: 11px;
  border: none; border-radius: 10px;
  background: linear-gradient(135deg, #FFFFFF, #B0B4BC);
  color: #1a1000; font-weight: 800; font-size: 13px; cursor: pointer;
}
.pp-cta-btn:hover { filter: brightness(1.06); }
@media (max-width: 480px) {
  .pp-body { padding: 12px 16px 24px; }
  .pp-avatar-wrap { margin-left: 16px; }
  .pp-avatar { width: 88px; height: 88px; }
}
/* Phase 15-1 · brand follow pill + toggle button */
.cp-stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  font-size: 11px;
  color: rgba(255,255,255,0.7);
}
.cp-followers-pill {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.30);
  color: var(--text-primary);
}
.cp-follow-btn {
  display: inline-block;
  margin-top: 10px;
  padding: 6px 16px;
  background: #FFFFFF;
  color: #111;
  border: 0;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.cp-follow-btn:hover { transform: translateY(-1px); }
.cp-follow-btn.is-following {
  background: rgba(255,255,255,0.06);
  color: var(--text-primary);
  border: 1px solid rgba(255,255,255,0.4);
}
/* Subtle red hint on hover when already following — telegraphs unfollow. */
.cp-follow-btn.is-following:hover {
  background: rgba(239,68,68,0.10);
  border-color: rgba(239,68,68,0.4);
  color: #fca5a5;
}
.cp-role {
  font-size: 12.5px;
  color: rgba(255,255,255,0.7);
  margin: 4px 0 10px;
}
.cp-availability {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.cp-avail-chip {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}
.cp-avail-gig { background: rgba(255,255,255,0.18); color: #B0B4BC; border: 1px solid rgba(255,255,255,0.4); }
.cp-avail-ft  { background: rgba(59,130,246,0.18); color: #60a5fa; border: 1px solid rgba(59,130,246,0.4); }
.cp-stats {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  font-size: 11px;
  color: rgba(255,255,255,0.7);
  margin-bottom: 10px;
}
.cp-stats span {
  padding: 3px 10px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
}
.cp-stats .cp-verified { color: #51cf66; border-color: rgba(81,207,102,0.4); }
.cp-rate {
  display: flex; align-items: center; justify-content: space-between;
  margin: 10px 18px 0;
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(255,255,255,0.14), rgba(255,255,255,0.04));
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 12px;
}
.cp-rate span { font-size: 11px; color: rgba(255,255,255,0.7); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 700; }
.cp-rate strong { font-family: 'Playfair Display', Georgia, serif; font-size: 18px; color: #B0B4BC; }
.cp-section {
  padding: 14px 20px;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.cp-section-head {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.9px;
  color: #B0B4BC;
  font-weight: 800;
  margin-bottom: 8px;
}
.cp-bio {
  font-size: 13px;
  color: rgba(255,255,255,0.8);
  line-height: 1.5;
  margin: 0;
}
.cp-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 12px 20px 6px;
}
.cp-action-primary { grid-column: 1 / -1; }
.cp-networth .cp-nw-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.cp-nw-grid > div {
  padding: 10px 6px;
  text-align: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 10px;
}
.cp-nw-grid strong {
  display: block;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 16px;
  color: #B0B4BC;
  font-weight: 800;
}
.cp-nw-grid span {
  display: block;
  font-size: 10px;
  color: rgba(255,255,255,0.6);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-top: 3px;
  font-weight: 700;
}
.cp-tabs {
  display: flex;
  gap: 4px;
  padding: 10px 14px 0;
  overflow-x: auto;
  scrollbar-width: none;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.cp-tabs::-webkit-scrollbar { display: none; }
.cp-tab {
  padding: 7px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  color: rgba(255,255,255,0.6);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.18s ease;
}
.cp-tab.is-active {
  background: #B0B4BC;
  color: #0a0a0a;
  border-color: #B0B4BC;
}
.cp-tab-body {
  padding: 12px 20px;
  font-size: 13px;
  color: rgba(255,255,255,0.82);
}
.cp-exp {
  display: flex;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.06);
}
.cp-exp:last-child { border-bottom: none; }
.cp-exp-logo {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: rgba(255,255,255,0.14);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.cp-exp-body { flex: 1; min-width: 0; }
.cp-exp-body strong { display: block; font-size: 13px; color: #fff; }
.cp-exp-body span { display: block; font-size: 12px; color: rgba(255,255,255,0.7); margin-top: 1px; }
.cp-exp-body em { display: block; font-style: normal; font-size: 10.5px; color: rgba(255,255,255,0.5); margin-top: 2px; }
.cp-exp-body p { font-size: 12px; color: rgba(255,255,255,0.65); margin: 6px 0 0; line-height: 1.4; }
.cp-cred {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.05);
}
.cp-cred:last-child { border-bottom: none; }
.cp-cred-ico {
  width: 32px; height: 32px;
  background: rgba(255,255,255,0.14);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cp-cred strong { display: block; font-size: 12.5px; color: #fff; }
.cp-cred span { display: block; font-size: 11px; color: rgba(255,255,255,0.6); margin-top: 1px; }
.cp-skills { display: flex; flex-wrap: wrap; gap: 6px; }
.cp-skill-chip {
  padding: 5px 12px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 999px;
  color: #B0B4BC;
  font-size: 11.5px;
  font-weight: 600;
}
.cp-review {
  padding: 10px 12px;
  margin-bottom: 8px;
  background: rgba(0,0,0,0.25);
  border-left: 3px solid #B0B4BC;
  border-radius: 0 8px 8px 0;
}
.cp-review-stars { font-size: 13px; }
.cp-review-text { font-size: 12.5px; color: rgba(255,255,255,0.85); margin: 4px 0 6px; font-style: italic; line-height: 1.4; }
.cp-review-author { font-size: 11px; color: rgba(255,255,255,0.55); }
.cp-post {
  padding: 10px 12px;
  margin-bottom: 8px;
  background: rgba(0,0,0,0.25);
  border-radius: 10px;
  font-size: 12.5px;
  color: rgba(255,255,255,0.85);
}
.cp-empty {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  font-style: italic;
  text-align: center;
  padding: 14px 0;
}
.cp-reference {
  padding: 10px 12px;
  margin-bottom: 8px;
  background: rgba(0,0,0,0.25);
  border-radius: 10px;
}
.cp-ref-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.cp-ref-head strong { font-size: 13px; color: #fff; }
.cp-ref-head span { font-size: 11px; color: rgba(255,255,255,0.55); }
.cp-reference p { font-size: 12px; color: rgba(255,255,255,0.78); margin: 0; font-style: italic; line-height: 1.4; }
@media (max-width: 500px) {
  .cp-actions { grid-template-columns: 1fr; }
  .cp-action-primary { grid-column: auto; }
}

/* ══════════════════════════════════════════════════════════
   Universal dropdown visibility fix · white bg / black text
   inside every .ops-modal / modal / post-menu form. Prevents
   invisible dropdowns (white-on-white) across the whole app.
   ══════════════════════════════════════════════════════════ */
.ops-modal select,
.ops-modal select.form-input,
.modal select,
.post-menu-dropdown,
select.post-menu-dropdown,
.ops-modal-card select,
.ops-modal-card select.form-input {
  background: #ffffff !important;
  color: #000000 !important;
  border: 1.5px solid rgba(255,255,255, 0.55) !important;
  padding: 10px 14px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  font-family: 'Inter', sans-serif !important;
  width: 100%;
  cursor: pointer;
  appearance: menulist;
  -webkit-appearance: menulist;
  -moz-appearance: menulist;
}
.ops-modal select option,
.ops-modal select.form-input option,
.modal select option,
.post-menu-dropdown option {
  background: #ffffff !important;
  color: #000000 !important;
  padding: 8px;
  font-weight: 500;
}
.ops-modal select:focus,
.ops-modal select.form-input:focus,
.modal select:focus,
.post-menu-dropdown:focus {
  border-color: #FFFFFF !important;
  outline: 2px solid rgba(255,255,255, 0.25);
  outline-offset: 0;
}
.ops-modal select:disabled,
.modal select:disabled {
  background: #f3f4f6 !important;
  color: #6b7280 !important;
  cursor: not-allowed;
}

/* Centralised z-index hierarchy · reference variables
   (kept as a map so any stray modal can use a sensible value)
*/
:root {
  --z-dropdown:    9000;
  --z-modal:       9500;
  --z-toast:      10500;
  --z-topmost:   100000; /* avatar dropdown · above everything */
}

/* ══════════════════════════════════════════════════════════
   Free-tier read-only preview · HR Hub + Operations Oasis
   Rich banner with bullets + dual CTAs. Content stays visible.
   ══════════════════════════════════════════════════════════ */
.px-preview-banner {
  margin: 10px 16px;
  padding: 14px;
  background: linear-gradient(135deg, rgba(255,255,255,0.14), rgba(255,255,255,0.04));
  border: 1.5px solid rgba(255,255,255,0.45);
  border-radius: 14px;
}
.px-preview-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.px-preview-ico {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: rgba(255,255,255,0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
}
.px-preview-body { flex: 1; min-width: 0; }
.px-preview-body strong {
  display: block;
  font-size: 13px;
  color: #B0B4BC;
  font-weight: 800;
  letter-spacing: 0.3px;
}
.px-preview-body span {
  display: block;
  font-size: 11px;
  color: rgba(255,255,255,0.75);
  line-height: 1.45;
  margin-top: 2px;
}
.px-preview-bullets {
  padding: 10px 14px;
  background: rgba(0,0,0,0.25);
  border-radius: 10px;
  margin-bottom: 10px;
}
.px-preview-bullets-head {
  font-size: 10px;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: #B0B4BC;
  font-weight: 800;
  margin-bottom: 4px;
}
.px-preview-bullets ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 10px;
}
.px-preview-bullets li {
  font-size: 11px;
  color: rgba(255,255,255,0.78);
  padding: 2px 0;
  line-height: 1.4;
}
.px-preview-ctas {
  display: flex;
  gap: 8px;
}
.px-preview-cta-gold {
  flex: 1;
  padding: 10px 14px;
  background: linear-gradient(135deg, #B0B4BC, #B0B4BC);
  color: #1a1000;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.3px;
}
.px-preview-cta-gold:hover { filter: brightness(1.05); }
.px-preview-cta-outline {
  flex: 1;
  padding: 10px 14px;
  background: transparent;
  color: #B0B4BC;
  border: 1px solid rgba(255,255,255,0.45);
  border-radius: 10px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}
.px-preview-cta-outline:hover { background: rgba(255,255,255,0.08); }

/* Per-button lock state · applied to every actionable control inside a
   free-tier preview screen. Click handlers intercept at capture-phase. */
.px-btn-locked {
  opacity: 0.55;
  position: relative;
  cursor: pointer !important;
}
.px-btn-locked:hover {
  opacity: 0.75;
}
.px-btn-locked::after {
  /* No extra element — just mute any visual action state */
  content: '';
}

/* Dim form inputs inside a read-only preview, but keep them showing content.
   Preview banner's own controls are fully interactive. */
.px-readonly-preview select.form-input,
.px-readonly-preview input.form-input:not([readonly]):not([type="radio"]):not([type="checkbox"]),
.px-readonly-preview textarea.form-input {
  opacity: 0.7;
  pointer-events: none;
}
.px-readonly-preview .px-preview-banner,
.px-readonly-preview .px-preview-banner button,
.px-readonly-preview .px-preview-banner * {
  opacity: 1 !important;
  pointer-events: auto !important;
}

@media (max-width: 500px) {
  .px-preview-bullets ul { grid-template-columns: 1fr; }
  .px-preview-ctas { flex-direction: column; }
}

/* ═══════════════════════════════════════════════════
   GEO-ATTENDANCE — Chunk 2 (Staff My Shifts + QR mock)
   ═══════════════════════════════════════════════════ */

/* My Shifts screen */
.ms-screen { padding: 16px; max-width: 720px; margin: 0 auto; }
.ms-intro  { margin-bottom: 14px; }
.ms-title  {
  font-family: 'Playfair Display', serif;
  color: #fff;
  font-size: 22px;
  margin: 0 0 4px;
}
.ms-sub    { color: var(--text-secondary); font-size: 13px; margin: 0; }

.ms-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 10px 12px;
  margin: 12px 0;
}
.ms-venue {
  font-size: 12px; color: var(--text-secondary); font-weight: 600;
}
.ms-demo-toggle {
  font-size: 11px; padding: 6px 10px; border-radius: var(--r-full);
  border: 1px dashed rgba(255,255,255,0.45);
  background: rgba(255,255,255,0.06);
  color: var(--text-gold);
  cursor: pointer;
}
.ms-demo-toggle.on {
  background: rgba(255,255,255,0.18);
  border-style: solid;
  color: #fff;
}

.ms-section-title {
  font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--text-muted); font-weight: 800;
  margin: 18px 0 8px;
}

.ms-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px;
  margin-bottom: 10px;
}
.ms-card-today {
  border-color: var(--border-gold);
  background: linear-gradient(135deg, rgba(255,255,255,0.10), rgba(10,10,15,0.6));
  box-shadow: var(--shadow-glow);
}
.ms-card-off { color: var(--text-secondary); }
.ms-card-empty { font-size: 14px; padding: 6px 0; }
.ms-card-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; margin-bottom: 8px;
}
.ms-day  { font-weight: 800; color: #fff; font-size: 14px; }
.ms-sched, .ms-actual, .ms-hours {
  font-size: 13px; color: var(--text-secondary); margin-top: 4px;
}
.ms-actual strong, .ms-sched strong, .ms-hours strong { color: #fff; }

.ms-clock-btn {
  display: block; width: 100%;
  margin-top: 12px;
  padding: 14px;
  border-radius: var(--r-md);
  border: none;
  font-size: 15px; font-weight: 800; letter-spacing: 0.5px;
  cursor: pointer;
  background: linear-gradient(135deg, #FFFFFF, #B0B4BC);
  color: #1a1a1a;
  box-shadow: var(--shadow-gold);
  transition: filter 0.15s, transform 0.05s;
}
.ms-clock-btn:hover { filter: brightness(1.06); }
.ms-clock-btn:active { transform: translateY(1px); }
.ms-clock-btn.disabled,
.ms-clock-btn[disabled] {
  background: rgba(255,255,255,0.05);
  color: var(--text-muted);
  border: 1px solid var(--border);
  box-shadow: none;
  cursor: not-allowed;
}
.ms-clock-btn.out {
  background: linear-gradient(135deg, #c0c0c0, #e8e8e8);
}
.ms-window-note {
  font-size: 11px; color: var(--text-muted);
  margin-top: 8px; text-align: center;
}
.ms-done-pill {
  display: inline-block; margin-top: 10px;
  padding: 8px 14px; border-radius: var(--r-full);
  background: rgba(5,150,105,0.14); color: #34d399;
  font-size: 12px; font-weight: 800;
}

/* QR fallback (mocked) modal */
.geo-qr-modal {
  max-width: 380px; padding: 26px 22px 18px; text-align: center;
  position: relative;
}
.geo-qr-icon { font-size: 36px; margin-bottom: 4px; }
.geo-qr-title {
  font-family: 'Playfair Display', serif;
  color: #fff; font-size: 20px; margin: 0 0 6px;
}
.geo-qr-msg {
  color: var(--text-secondary); font-size: 13px; margin: 0 0 16px;
}
.geo-qr-frame {
  position: relative;
  width: 200px; height: 200px;
  margin: 0 auto 10px;
  border-radius: var(--r-md);
  background: #0a0a0a;
  overflow: hidden;
  border: 1px solid var(--border);
}
.geo-qr-grid {
  position: absolute; inset: 18px;
  background-image:
    linear-gradient(90deg, transparent 7%, rgba(255,255,255,0.85) 7% 9%, transparent 9% 16%, rgba(255,255,255,0.85) 16% 20%, transparent 20% 30%, rgba(255,255,255,0.85) 30% 36%, transparent 36% 47%, rgba(255,255,255,0.85) 47% 50%, transparent 50% 60%, rgba(255,255,255,0.85) 60% 66%, transparent 66% 75%, rgba(255,255,255,0.85) 75% 80%, transparent 80% 90%, rgba(255,255,255,0.85) 90% 93%, transparent 93%),
    linear-gradient(0deg, transparent 6%, rgba(255,255,255,0.85) 6% 9%, transparent 9% 18%, rgba(255,255,255,0.85) 18% 22%, transparent 22% 32%, rgba(255,255,255,0.85) 32% 38%, transparent 38% 48%, rgba(255,255,255,0.85) 48% 52%, transparent 52% 62%, rgba(255,255,255,0.85) 62% 68%, transparent 68% 78%, rgba(255,255,255,0.85) 78% 82%, transparent 82% 92%, rgba(255,255,255,0.85) 92% 95%, transparent 95%);
  opacity: 0.85;
}
.geo-qr-corners span {
  position: absolute; width: 22px; height: 22px;
  border: 3px solid var(--text-primary);
}
.geo-qr-corners span:nth-child(1) { top: 10px;  left: 10px;  border-right: none;  border-bottom: none; }
.geo-qr-corners span:nth-child(2) { top: 10px;  right: 10px; border-left: none;   border-bottom: none; }
.geo-qr-corners span:nth-child(3) { bottom: 10px; left: 10px;  border-right: none;  border-top: none; }
.geo-qr-corners span:nth-child(4) { bottom: 10px; right: 10px; border-left: none;   border-top: none; }
.geo-qr-hint { font-size: 10px; color: var(--text-muted); margin-bottom: 14px; letter-spacing: 0.5px; }

/* HQ — My Shift Today (prominent operational card at top of HQ) */
.hq-shift-card {
  position: relative;
  margin: 14px 12px 18px;
  padding: 18px 18px 16px;
  background: linear-gradient(135deg, rgba(255,255,255,0.16), rgba(16,16,20,0.92));
  border: 1.5px solid var(--border-gold);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-glow);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.2s;
}
.hq-shift-card:hover { transform: translateY(-1px); box-shadow: 0 12px 40px rgba(255,255,255,0.22); }
.hq-shift-card.state-active {
  background: linear-gradient(135deg, rgba(34,197,94,0.18), rgba(10,15,12,0.92));
  border-color: rgba(52,211,153,0.55);
  box-shadow: 0 0 38px rgba(34,197,94,0.22);
}
.hq-shift-card.state-done {
  background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(16,16,20,0.9));
  border-color: var(--border);
  box-shadow: none;
}
.hq-shift-card.state-waiting {
  background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(16,16,20,0.92));
  border-color: rgba(255,255,255,0.32);
  box-shadow: none;
}
.hq-shift-card.off {
  background: var(--bg-card);
  border-color: var(--border);
  box-shadow: none;
}
.hq-shift-glow {
  position: absolute; inset: -40% -20% auto auto;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(129,140,255,0.18), transparent 70%);
  pointer-events: none;
}
.hq-shift-card.state-active .hq-shift-glow {
  background: radial-gradient(circle, rgba(52,211,153,0.22), transparent 70%);
}

.hq-shift-header {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px;
  position: relative;
}
.hq-shift-icon { font-size: 22px; }
.hq-shift-eyebrow {
  font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--text-gold); font-weight: 800;
}
.hq-shift-card.state-active .hq-shift-eyebrow { color: #34d399; }
.hq-shift-card.state-done .hq-shift-eyebrow,
.hq-shift-card.off .hq-shift-eyebrow { color: var(--text-secondary); }

.hq-shift-body {
  position: relative;
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 14px;
}
.hq-shift-row {
  display: flex; gap: 8px; align-items: baseline;
  font-size: 13px; color: var(--text-secondary);
}
.hq-shift-row > span { min-width: 78px; color: var(--text-muted); }
.hq-shift-row > strong { color: #fff; font-weight: 700; }
.hq-shift-status-row > span { color: var(--text-muted); }
.hq-shift-status { font-weight: 800; }
.hq-shift-status.ready    { color: var(--text-primary); }
.hq-shift-status.waiting  { color: var(--text-secondary); }
.hq-shift-status.active   { color: #34d399; }
.hq-shift-status.done     { color: #34d399; }

.hq-shift-action {
  position: relative;
  display: block; width: 100%;
  padding: 14px;
  border: none; border-radius: var(--r-md);
  font-size: 14px; font-weight: 800; letter-spacing: 1px;
  cursor: pointer;
  transition: filter 0.15s, transform 0.05s;
}
.hq-shift-action:hover { filter: brightness(1.06); }
.hq-shift-action:active { transform: translateY(1px); }
.hq-shift-action.primary {
  background: linear-gradient(135deg, #FFFFFF, #B0B4BC);
  color: #1a1a1a;
  box-shadow: var(--shadow-gold);
}
.hq-shift-action.out {
  background: linear-gradient(135deg, #c0c0c0, #e8e8e8);
  color: #1a1a1a;
}
.hq-shift-action.disabled,
.hq-shift-action[disabled] {
  background: rgba(255,255,255,0.05);
  color: var(--text-muted);
  border: 1px solid var(--border);
  cursor: not-allowed;
  filter: none;
  box-shadow: none;
}
.hq-shift-action.ghost {
  background: rgba(255,255,255,0.04);
  color: var(--text-gold);
  border: 1px solid var(--border-gold);
}

.hq-shift-window {
  position: relative;
  margin-top: 10px;
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
}
.hq-shift-window strong { color: var(--text-secondary); font-weight: 700; }
.hq-shift-demo-link {
  color: var(--text-gold);
  cursor: pointer;
  font-weight: 700;
}
.hq-shift-demo-link:hover { text-decoration: underline; }
.hq-shift-link {
  display: inline-block; margin-top: 4px;
  font-size: 12px; color: var(--text-gold); font-weight: 700;
}

/* ═══════════════════════════════════════════════════
   GEO-ATTENDANCE — Chunk 3 (Manager Attendance view)
   ═══════════════════════════════════════════════════ */
.att-week-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 12px 16px; margin: 0 16px 8px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.att-nav {
  width: 30px; height: 30px; border-radius: var(--r-full);
  border: 1px solid var(--border); background: rgba(255,255,255,0.03);
  color: var(--text-secondary); font-size: 18px; font-weight: 700;
  cursor: pointer;
}
.att-nav[disabled] { opacity: 0.35; cursor: not-allowed; }
.att-week-lbl {
  flex: 1; text-align: center;
  font-family: 'Playfair Display', serif;
  color: #fff; font-size: 15px; font-weight: 700;
}

.att-dept-tabs {
  display: flex; gap: 8px; overflow-x: auto;
  padding: 0 16px; margin-bottom: 12px;
  scrollbar-width: none;
}
.att-dept-tabs::-webkit-scrollbar { display: none; }
.att-dept {
  flex-shrink: 0;
  padding: 8px 14px; border-radius: var(--r-full);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 12px; font-weight: 700;
  cursor: pointer; white-space: nowrap;
}
.att-dept.active {
  background: linear-gradient(135deg, #FFFFFF, #B0B4BC);
  color: #1a1a1a; border-color: var(--text-primary);
}

.att-table-wrap {
  overflow-x: auto;
  margin: 0 12px;
  scrollbar-width: thin;
}
.att-table {
  border-collapse: separate;
  border-spacing: 4px;
  font-size: 11px;
  width: 100%;
}
.att-table thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--bg-card);
  color: var(--text-gold);
  font-weight: 800; letter-spacing: 0.6px;
  padding: 8px 6px;
  text-align: center;
  border-radius: var(--r-xs);
  font-size: 10px; text-transform: uppercase;
}
.att-table thead th.att-name-col { text-align: left; padding-left: 10px; min-width: 140px; }

.att-table tbody td.att-name-col {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 6px 8px;
  display: flex; align-items: center; gap: 8px;
  min-width: 140px;
}
.att-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
  border: 1px solid var(--border-gold);
}
.att-name-wrap { display: flex; flex-direction: column; min-width: 0; }
.att-name {
  font-size: 11px; font-weight: 700; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 96px;
}
.att-pos {
  font-size: 9px; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 96px;
}

.att-cell {
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 5px 4px;
  min-width: 76px;
  cursor: pointer;
  text-align: center;
  vertical-align: middle;
  position: relative;
  transition: background 0.12s, transform 0.05s;
}
.att-cell:hover {
  background: rgba(255,255,255,0.07);
  transform: translateY(-1px);
}
.att-cell-off {
  background: transparent;
  border-style: dashed;
  border-color: rgba(255,255,255,0.06);
  color: var(--text-muted);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 1px;
  cursor: default;
}
.att-cell-off:hover { background: transparent; transform: none; }
.att-cell-leave { color: #fbbf24; }

.att-cell-noshow  { border-color: rgba(220,38,38,0.45); background: rgba(220,38,38,0.06); }
.att-cell-late    { border-color: rgba(217,119,6,0.40); background: rgba(217,119,6,0.06); }
.att-cell-ontime  { border-color: rgba(5,150,105,0.30); background: rgba(5,150,105,0.04); }
.att-cell-edited  { border-left: 3px solid var(--danger); background: rgba(220,38,38,0.05); }
.att-cell-active  { border-color: rgba(52,211,153,0.45); background: rgba(34,197,94,0.08); }
.att-cell-pending { background: rgba(255,255,255,0.02); }

.att-sched {
  font-size: 9px;
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: 0.2px;
}
.att-actual {
  font-size: 11px;
  color: #fff;
  font-weight: 700;
  margin-top: 2px;
}
.att-actual.att-pending { color: var(--text-muted); font-weight: 400; }
.att-actual.att-noshow  { color: #f87171; }
.att-hours {
  font-size: 9px;
  color: var(--text-gold);
  font-weight: 700;
  margin-top: 1px;
}
.att-badges {
  display: flex; justify-content: center; align-items: center;
  gap: 3px;
  margin-top: 3px;
  font-size: 11px;
}
.att-badge { font-size: 11px; }
.att-badge.late    { color: #fbbf24; }
.att-badge.noshow  { color: #f87171; }
.att-badge.ontime  { color: #34d399; }
.att-badge.active  { color: #34d399; }
.att-badge.edited  { color: #f87171; }
.att-method {
  font-size: 10px;
  opacity: 0.85;
}

.att-legend {
  display: flex; flex-wrap: wrap; gap: 10px 14px;
  padding: 12px 16px; margin: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: 10px;
  color: var(--text-secondary);
}
.att-legend-item {
  display: inline-flex; align-items: center; gap: 4px;
  white-space: nowrap;
}

.att-actions {
  display: flex; gap: 10px;
  padding: 0 16px 18px;
  flex-wrap: wrap;
}
.att-actions > button { flex: 1; min-width: 140px; }

/* ═══════════════════════════════════════════════════
   GEO-ATTENDANCE — Chunk 4 (Edit modal + audit trail)
   ═══════════════════════════════════════════════════ */
.geo-edit-modal {
  max-width: 480px;
  padding: 22px 22px 18px;
  position: relative;
}
.geo-edit-head {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
  position: relative;
}
.geo-edit-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid var(--border-gold);
  flex-shrink: 0;
}
.geo-edit-name {
  font-family: 'Playfair Display', serif;
  color: #fff; font-size: 18px; font-weight: 800;
}
.geo-edit-sub {
  font-size: 11px; color: var(--text-secondary);
  margin-top: 2px;
}
.geo-edit-flag {
  position: absolute; top: 0; right: 0;
  background: rgba(220,38,38,0.16);
  color: #f87171;
  font-size: 10px; font-weight: 800; letter-spacing: 0.6px;
  padding: 4px 8px; border-radius: var(--r-full);
  border: 1px solid rgba(220,38,38,0.35);
}

.geo-edit-meta {
  display: flex; gap: 18px; flex-wrap: wrap;
  font-size: 11px; color: var(--text-muted);
  margin-bottom: 14px;
}
.geo-edit-meta-row { display: flex; flex-direction: column; gap: 2px; }
.geo-edit-meta-row > span { font-size: 9px; letter-spacing: 0.6px; text-transform: uppercase; }
.geo-edit-meta-row > strong { color: #fff; font-size: 12px; }

.geo-edit-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-bottom: 12px;
}
.geo-edit-col {
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 10px 12px;
}
.geo-edit-col-title {
  font-size: 11px; letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--text-gold); font-weight: 800;
  margin-bottom: 8px;
}
.geo-edit-label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 10px; color: var(--text-muted);
  letter-spacing: 0.4px; text-transform: uppercase;
  margin-bottom: 8px;
}
.geo-edit-label input[type="time"] {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  padding: 8px 10px;
  color: #fff;
  font-size: 14px; font-weight: 700;
  font-family: inherit;
  color-scheme: dark;
}
.geo-edit-label input[type="time"]:focus {
  outline: none;
  border-color: var(--border-gold);
}
.geo-edit-label input[type="time"][disabled] {
  opacity: 0.4; cursor: not-allowed;
}
.geo-edit-meta-sub {
  display: flex; flex-direction: column; gap: 3px;
  font-size: 10px; color: var(--text-secondary);
}
.geo-edit-meta-sub strong { color: #fff; font-weight: 700; }

.geo-edit-hours {
  display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--r-sm);
  padding: 8px 12px;
  margin-bottom: 14px;
  font-size: 11px; color: var(--text-secondary);
}
.geo-edit-hours strong {
  color: var(--text-primary); font-size: 13px;
}

.geo-edit-note-label {
  display: block;
  font-size: 11px; color: var(--text-secondary);
  letter-spacing: 0.4px;
  margin-bottom: 14px;
}
.geo-edit-note-label em {
  color: #f87171; font-style: normal; font-weight: 700; font-size: 10px;
}
.geo-edit-note-label textarea {
  display: block; width: 100%; box-sizing: border-box;
  margin-top: 6px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  color: #fff;
  font-family: inherit;
  font-size: 12px;
  resize: vertical;
  min-height: 60px;
}
.geo-edit-note-label textarea:focus {
  outline: none;
  border-color: var(--border-gold);
}

.geo-edit-history {
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  margin-bottom: 14px;
  max-height: 180px;
  overflow-y: auto;
}
.geo-edit-history-title {
  font-size: 10px; letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--text-muted); font-weight: 800;
  margin-bottom: 8px;
}
.geo-hist-row {
  border-left: 2px solid var(--border-gold);
  padding-left: 10px; margin-bottom: 10px;
}
.geo-hist-row:last-child { margin-bottom: 0; }
.geo-hist-head {
  display: flex; justify-content: space-between; gap: 8px;
  font-size: 11px; color: #fff;
}
.geo-hist-head span { color: var(--text-muted); font-size: 10px; }
.geo-hist-body {
  font-size: 11px; color: var(--text-secondary);
  margin-top: 2px;
}
.geo-hist-body code {
  background: rgba(255,255,255,0.05);
  padding: 1px 5px; border-radius: 3px;
  color: var(--text-gold);
  font-size: 10px;
}
.geo-hist-old { color: #f87171; text-decoration: line-through; }
.geo-hist-new { color: #34d399; font-weight: 700; }
.geo-hist-reason {
  font-size: 10px; color: var(--text-muted);
  font-style: italic;
  margin-top: 3px;
}
.geo-hist-empty {
  font-size: 11px; color: var(--text-muted);
  font-style: italic;
}

.geo-edit-empty {
  text-align: center; padding: 30px 16px;
  color: var(--text-secondary);
}
.geo-edit-empty-icon { font-size: 36px; margin-bottom: 6px; }
.geo-edit-empty-title { font-size: 16px; color: #fff; font-weight: 700; }
.geo-edit-empty-sub   { font-size: 12px; margin-top: 4px; }

@media (max-width: 480px) {
  .geo-edit-grid { grid-template-columns: 1fr; }
}

/* ── Chunk 9 additions: status dropdown, approve row, validation msg ── */
.geo-edit-flags {
  position: absolute; top: 0; right: 0;
  display: flex; gap: 6px; flex-wrap: wrap;
}
.geo-edit-flag {
  font-size: 10px; font-weight: 800; letter-spacing: 0.6px;
  padding: 4px 8px; border-radius: var(--r-full);
  border: 1px solid;
}
.geo-edit-flag.edited {
  background: rgba(220,38,38,0.16);
  color: #f87171;
  border-color: rgba(220,38,38,0.35);
}
.geo-edit-flag.approved {
  background: rgba(5,150,105,0.16);
  color: #34d399;
  border-color: rgba(5,150,105,0.35);
}

.geo-edit-status-label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 10px; color: var(--text-muted);
  letter-spacing: 0.4px; text-transform: uppercase;
  margin-bottom: 12px;
}
.geo-edit-select,
.geo-edit-status-label > input[type="number"] {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  padding: 8px 10px;
  color: #fff;
  font-size: 13px; font-weight: 700;
  font-family: inherit;
  color-scheme: dark;
  text-transform: none;
}
.geo-edit-select:focus,
.geo-edit-status-label > input[type="number"]:focus {
  outline: none;
  border-color: var(--border-gold);
}

.geo-edit-validate-msg {
  display: none;
  margin-top: 6px;
  font-size: 11px;
  color: #f87171;
  font-style: italic;
}

.geo-edit-approve-row {
  display: flex; align-items: center; gap: 10px;
  background: rgba(5,150,105,0.06);
  border: 1px solid rgba(5,150,105,0.22);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  margin-bottom: 14px;
  cursor: pointer;
}
.geo-edit-approve-row input[type="checkbox"] {
  width: 18px; height: 18px;
  accent-color: #34d399;
  cursor: pointer;
}
.geo-edit-approve-label {
  font-size: 12px; color: #fff; font-weight: 700;
}

/* Status bar — "All reviewed" variant */
.att-status-all_reviewed {
  background: rgba(52,211,153,0.10);
  border-color: rgba(52,211,153,0.40);
}
.att-status-all_reviewed .att-status-label { color: #34d399; }

/* ═══════════════════════════════════════════════════
   GEO-ATTENDANCE — Chunk 5 (Payroll integration)
   ═══════════════════════════════════════════════════ */
.pay-geo-th {
  white-space: nowrap;
  background: linear-gradient(135deg, rgba(255,255,255,0.10), transparent) !important;
}
.pay-geo-th-sub {
  display: block;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--text-muted);
  text-transform: none;
  margin-top: 1px;
}
.pay-geo-td {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-size: 11px;
}
.pay-geo-clean {
  color: #fff;
  font-weight: 700;
}
.pay-geo-auto {
  color: var(--text-muted);
  font-weight: 600;
  text-decoration: line-through;
  text-decoration-color: rgba(255,255,255,0.25);
}
.pay-geo-sep {
  color: var(--text-muted);
  margin: 0 2px;
}
.pay-geo-final {
  color: var(--text-primary);
  font-weight: 800;
}
.pay-geo-edit-icon {
  display: inline-block;
  margin-left: 4px;
  color: #f87171;
  font-size: 11px;
  cursor: help;
}
.pay-geo-edited {
  border-left: 2px solid var(--danger);
}
.pay-geo-empty {
  color: var(--text-muted);
  font-weight: 500;
}

/* Stacked layout for the Hours column (main + OT + pending) */
.pay-geo-main {
  display: flex; align-items: center; gap: 4px;
  white-space: nowrap;
}
.pay-geo-ot {
  font-size: 9px;
  color: #fbbf24;
  font-weight: 700;
  margin-top: 2px;
}
.pay-geo-pending {
  font-size: 9px;
  color: #fbbf24;
  font-weight: 700;
  margin-top: 2px;
}

/* Make ✏ icon look clickable */
button.pay-geo-edit-icon {
  background: transparent;
  border: none;
  padding: 0 2px;
  font-size: 13px;
  color: #f87171;
  cursor: pointer;
  line-height: 1;
}
button.pay-geo-edit-icon:hover {
  color: #ef4444;
  transform: scale(1.15);
}

/* Edit-reason popup (clicked from payroll cell) */
.geo-payedit-modal {
  max-width: 460px; padding: 22px 22px 18px; position: relative;
}
.pay-edit-head {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}
.pay-edit-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid var(--border-gold);
  flex-shrink: 0;
}
.pay-edit-name {
  font-family: 'Playfair Display', serif;
  color: #fff; font-size: 17px; font-weight: 800;
}
.pay-edit-sub {
  font-size: 11px; color: var(--text-secondary); margin-top: 2px;
}
.pay-edit-totals {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}
.pay-edit-totals > div {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 8px 10px;
  text-align: center;
}
.pay-edit-totals > div span {
  display: block;
  font-size: 9px;
  color: var(--text-muted);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.pay-edit-totals > div strong {
  font-family: 'Playfair Display', serif;
  font-size: 16px;
  color: #fff;
}
.pay-edit-list {
  max-height: 280px;
  overflow-y: auto;
  margin-bottom: 14px;
}
.pay-edit-row {
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
  border-left: 3px solid var(--danger);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  margin-bottom: 8px;
}
.pay-edit-row:last-child { margin-bottom: 0; }
.pay-edit-row-head {
  display: flex; justify-content: space-between; gap: 8px;
  font-size: 12px; color: #fff;
}
.pay-edit-row-head span { font-size: 10px; color: var(--text-muted); font-weight: 400; }
.pay-edit-row-meta {
  font-size: 11px; color: var(--text-secondary);
  margin-top: 4px;
}
.pay-edit-row-meta code {
  background: rgba(255,255,255,0.05);
  color: var(--text-gold);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 10px;
}
.pay-edit-row-reason {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
  margin-top: 4px;
}
.pay-edit-row-numbers {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 6px;
}
.pay-edit-row-numbers strong { color: #fff; }
.pay-edit-final { color: var(--text-primary) !important; }
.pay-edit-jump {
  margin-top: 8px;
  background: transparent;
  border: 1px solid var(--border-gold);
  color: var(--text-gold);
  padding: 5px 10px;
  border-radius: var(--r-full);
  font-size: 10px; font-weight: 700;
  cursor: pointer;
}
.pay-edit-jump:hover {
  background: rgba(255,255,255,0.10);
}
.pay-edit-empty {
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  padding: 20px;
  font-style: italic;
}

/* ═══════════════════════════════════════════════════
   GEO-ATTENDANCE — Chunk 6 (Tier gating + upgrade)
   ═══════════════════════════════════════════════════ */

/* Demo tier pill (top of Attendance) */
.att-tier-row {
  padding: 0 16px;
  margin-bottom: 8px;
}
.geo-tier-pill {
  font-size: 11px;
  padding: 6px 12px;
  border-radius: var(--r-full);
  border: 1px dashed rgba(255,255,255,0.45);
  background: rgba(255,255,255,0.06);
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: filter 0.15s;
}
.geo-tier-pill:hover { filter: brightness(1.1); }
.geo-tier-pill strong { color: var(--text-gold); }
.geo-tier-pill.geo-tier-free strong       { color: #f87171; }
.geo-tier-pill.geo-tier-starter strong    { color: var(--text-primary); }
.geo-tier-pill.geo-tier-professional strong { color: var(--text-primary); }
.geo-tier-pill.geo-tier-enterprise strong { color: #a78bfa; }

/* Free-tier read-only banner (above Attendance + Payroll content) */
.geo-free-banner {
  display: flex; align-items: center; gap: 12px;
  margin: 10px 16px 12px;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(220,38,38,0.10), rgba(16,16,20,0.8));
  border: 1px solid rgba(220,38,38,0.32);
  border-radius: var(--r-md);
}
.geo-free-icon { font-size: 24px; flex-shrink: 0; }
.geo-free-text { flex: 1; min-width: 0; }
.geo-free-text strong {
  display: block;
  color: #f87171;
  font-size: 13px;
  font-weight: 800;
}
.geo-free-text span {
  display: block;
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* Free-tier banner inside the Payroll table wrap */
.geo-pay-tier-strip {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; margin-bottom: 10px;
  background: linear-gradient(135deg, rgba(220,38,38,0.10), rgba(16,16,20,0.8));
  border: 1px solid rgba(220,38,38,0.28);
  border-radius: var(--r-md);
  flex-wrap: wrap;
}
.geo-pay-tier-info { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.geo-pay-tier-pill {
  font-size: 10px; font-weight: 800;
  padding: 4px 8px; border-radius: var(--r-full);
  background: rgba(220,38,38,0.18);
  color: #f87171;
  white-space: nowrap;
}
.geo-pay-tier-msg { font-size: 11px; color: var(--text-secondary); }

/* Upgrade modal */
.geo-upgrade-modal {
  max-width: 380px; padding: 26px 22px 18px;
  text-align: center; position: relative;
}
.geo-up-icon { font-size: 40px; margin-bottom: 6px; }
.geo-up-title {
  font-family: 'Playfair Display', serif;
  color: #fff; font-size: 22px; margin: 0 0 6px;
}
.geo-up-sub {
  color: var(--text-secondary); font-size: 13px;
  margin: 0 0 16px;
}
.geo-up-bullets {
  list-style: none; padding: 0; margin: 0 0 16px;
  text-align: left;
}
.geo-up-bullets li {
  font-size: 12px; color: var(--text-secondary);
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.geo-up-bullets li:last-child { border-bottom: none; }

.geo-up-pricing {
  background: linear-gradient(135deg, rgba(255,255,255,0.10), rgba(16,16,20,0.8));
  border: 1px solid var(--border-gold);
  border-radius: var(--r-md);
  padding: 14px;
  margin-bottom: 16px;
}
.geo-up-plan-name {
  font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--text-gold); font-weight: 800;
}
.geo-up-plan-price {
  font-family: 'Playfair Display', serif;
  font-size: 28px; color: #fff; font-weight: 800;
  margin: 4px 0 2px;
}
.geo-up-plan-price span {
  font-size: 12px; color: var(--text-muted); font-weight: 500;
  font-family: inherit;
}
.geo-up-plan-trial {
  font-size: 11px; color: #34d399; font-weight: 700;
}

/* ═══════════════════════════════════════════════════
   GEO-ATTENDANCE — Chunk 7 (Multi-week + approval)
   ═══════════════════════════════════════════════════ */

/* Week navigator (re-skinned: nav buttons enabled, label has subtitle) */
.att-week-bar .att-nav:not([disabled]) {
  background: rgba(255,255,255,0.08);
  border-color: var(--border-gold);
  color: var(--text-gold);
  cursor: pointer;
  opacity: 1;
}
.att-week-bar .att-nav:not([disabled]):hover {
  background: rgba(255,255,255,0.18);
}
.att-week-lbl-wrap { flex: 1; text-align: center; }
.att-week-sub {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 2px;
  letter-spacing: 0.4px;
}
.att-week-today {
  color: var(--text-gold);
  cursor: pointer;
  font-weight: 700;
}
.att-week-today:hover { text-decoration: underline; }

/* Status bar (sits under the nav bar) */
.att-status-bar {
  display: flex; align-items: center; gap: 10px;
  margin: 0 16px 12px;
  padding: 10px 14px;
  border-radius: var(--r-md);
  font-size: 12px; font-weight: 700;
  border: 1px solid var(--border);
}
.att-status-icon { font-size: 18px; }
.att-status-label { color: #fff; }
.att-status-in_progress  { background: rgba(255,255,255,0.03); border-color: var(--border); }
.att-status-needs_review { background: rgba(217,119,6,0.10); border-color: rgba(217,119,6,0.40); }
.att-status-needs_review .att-status-label { color: #fbbf24; }
.att-status-approved     { background: rgba(5,150,105,0.10); border-color: rgba(5,150,105,0.40); }
.att-status-approved .att-status-label { color: #34d399; }
.att-status-paid         { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.40); }
.att-status-paid .att-status-label { color: var(--text-primary); }
.att-status-scheduled    { background: rgba(168,139,250,0.08); border-color: rgba(168,139,250,0.32); }
.att-status-scheduled .att-status-label { color: #c4b5fd; }
.att-status-past         { background: rgba(255,255,255,0.02); border-color: var(--border); }

/* Empty-state card for future weeks with no roster */
.att-empty-card {
  margin: 20px 16px;
  padding: 30px 20px;
  background: linear-gradient(135deg, rgba(168,139,250,0.06), rgba(16,16,20,0.92));
  border: 1.5px dashed rgba(168,139,250,0.35);
  border-radius: var(--r-lg);
  text-align: center;
}
.att-empty-icon { font-size: 48px; margin-bottom: 8px; }
.att-empty-title {
  font-family: 'Playfair Display', serif;
  font-size: 20px; color: #fff; font-weight: 700;
  margin-bottom: 8px;
}
.att-empty-sub {
  font-size: 13px; color: var(--text-secondary);
  max-width: 340px; margin: 0 auto 18px; line-height: 1.5;
}
.att-empty-card .btn-gold {
  font-size: 13px; padding: 12px 22px;
}
.att-empty-hint {
  font-size: 10px; color: var(--text-muted);
  margin-top: 14px; font-style: italic;
}

/* Approved/scheduled cell variants */
.att-cell-approved {
  background: rgba(5,150,105,0.06);
  border-color: rgba(5,150,105,0.22);
}
.att-cell-scheduled {
  background: rgba(168,139,250,0.05);
  border-color: rgba(168,139,250,0.25);
  border-style: dashed;
}
.att-cell-readonly { cursor: not-allowed; }
.att-cell-readonly:hover {
  background: rgba(255,255,255,0.02);
  transform: none;
}
.att-cell-approved.att-cell-readonly:hover {
  background: rgba(5,150,105,0.08);
}

.att-badge.approved   { color: #34d399; }
.att-badge.scheduled  { color: #c4b5fd; }

/* Read-only table treatment (subtle) */
.att-table-wrap.att-readonly { opacity: 0.92; }

/* Full-bleed roster grid on the EDITOR only — cancel the .screen 16px padding
   so the scroll area (overflow-x:auto retained) spans edge-to-edge. Scoped to
   #screen-hr-roster-edit so the shared demo attendance screens are untouched.
   Header / status / add rows keep their own padding (they're outside the wrap). */
#screen-hr-roster-edit .att-table-wrap { margin: 0 -16px; }

/* ═══════════════════════════════════════════════════
   ROSTER EDITOR — Chunk 8 (Editable shifts)
   ═══════════════════════════════════════════════════ */

/* Status pill (top of editor) */
.rost-status-row { padding: 0 16px; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
/* Right-aligned group: the one contextual primary + the ··· overflow. */
.rost-row-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
/* Quiet circular overflow trigger — hairline, muted. */
.rost-more-btn {
  width: 34px; height: 34px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid var(--border);
  background: rgba(255,255,255,0.03); color: var(--text-secondary);
  cursor: pointer;
}
.rost-more-btn:active { background: rgba(255,255,255,0.08); }
/* P1c-2b — draft→submit→approve lifecycle button (now a single primary). */
.rost-life-btn {
  padding: 6px 14px; border-radius: 999px;
  background: rgba(255,255,255,0.04); border: 1px solid var(--border-gold);
  color: #E5B860; font-size: 11px; font-weight: 800; letter-spacing: 0.3px;
  cursor: pointer; white-space: nowrap;
}
.rost-life-btn.is-approve { border-color: rgba(5,150,105,0.55); color: #34d399; }
.rost-life-btn:active { background: rgba(255,255,255,0.08); }
.rost-status {
  display: inline-block;
  padding: 5px 10px; border-radius: var(--r-full);
  font-size: 11px; font-weight: 800; letter-spacing: 0.4px;
  border: 1px solid;
}
.rost-status.empty     { background: rgba(255,255,255,0.04); border-color: var(--border);          color: var(--text-muted); }
.rost-status.draft     { background: rgba(217,119,6,0.10);   border-color: rgba(217,119,6,0.40);   color: #fbbf24; }
.rost-status.published { background: rgba(5,150,105,0.10);   border-color: rgba(5,150,105,0.40);   color: #34d399; }

/* HR-HUB-ROSTER P1c-1 — real-grid chips, off-cells, department headers.
   Chip text/border colour is set inline per shift template; the background
   tint here is neutral so any template colour reads cleanly. */
.rost-dept-row td.rost-dept-head {
  text-align: left;
  padding: 8px 10px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.4px;
  color: #fff;
  background: rgba(255,255,255,0.03);
  border-left: 3px solid var(--dept, #8a94a6);
  border-radius: var(--r-sm);
}
.rost-cell-off  { text-align: center; vertical-align: middle; }
.rost-off       { font-size: 10px; font-weight: 600; color: var(--text-muted); opacity: 0.6; }
/* P1c-2b — editable cells invite a tap. */
.rost-cell.is-editable { cursor: pointer; }
.rost-cell.is-editable:active { background: rgba(255,255,255,0.05); }
/* Cell-schedule modal: checkbox rows + event label input. */
.rost-check-row { flex-direction: row !important; align-items: center; gap: 10px; }
.rost-check-row input[type="checkbox"] { width: 18px; height: 18px; flex-shrink: 0; accent-color: #E5B860; }
.rost-check-row > span { font-size: 13px; color: #fff; }
.rost-cell-input {
  width: 100%; margin-top: 6px;
  background: var(--bg-input); border: 1px solid var(--border); color: #fff;
  border-radius: var(--r-xs); padding: 8px 10px; font-size: 13px; font-family: inherit;
}
.rost-cell-split { padding: 3px 0; }
.rost-cell-split .rost-chip + .rost-chip { margin-top: 4px; }
.rost-chip {
  display: inline-block;
  padding: 3px 8px; border-radius: var(--r-full);
  font-size: 10px; font-weight: 800; letter-spacing: 0.3px;
  border: 1px solid #8a94a6;
  background: rgba(255,255,255,0.05);
  white-space: nowrap;
}
.rost-chip-event {
  color: #E8C879 !important;
  border-color: #E8C879 !important;
  background: rgba(232,200,121,0.10);
}

/* HR-HUB-ROSTER P1c-2a — add-members bar (quiet gold-hairline pill). */
.rost-addbar { padding: 4px 18px 12px; }
.rost-add-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: 999px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-gold);
  color: #E5B860; font-size: 12px; font-weight: 700; letter-spacing: 0.3px;
  cursor: pointer; transition: background 0.15s ease;
}
.rost-add-btn:active { background: rgba(229,184,96,0.10); }

/* P2 — department + shift-template manager modal. */
.rost-mng-card { max-width: 460px; }
.rost-mng-sec { margin-top: 16px; }
.rost-mng-head { font-size: 12px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 8px; }
.rost-mng-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
.rost-mng-dot { width: 14px; height: 14px; border-radius: 4px; flex-shrink: 0; }
.rost-mng-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: #fff; }
.rost-mng-sub { font-size: 11px; color: var(--text-muted); margin-left: 8px; font-weight: 500; }
.rost-mng-del { background: none; border: none; cursor: pointer; font-size: 15px; opacity: 0.7; padding: 4px; }
.rost-mng-del:active { opacity: 1; }
.rost-mng-empty { padding: 12px 0; color: var(--text-muted); font-size: 13px; }
.rost-mng-add { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.rost-mng-add .rost-cell-input { flex: 1; min-width: 120px; margin-top: 0; }
.rost-mng-add-tmpl { flex-wrap: wrap; }
.rost-mng-times { display: flex; align-items: center; gap: 6px; }
.rost-mng-times .rost-cell-input { width: auto; }
.rost-mng-color { width: 38px; height: 34px; padding: 2px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-input); cursor: pointer; flex-shrink: 0; }

/* SHIFT-DEL — action-sheet shift picker (replaces the cell modal's <select>). */
.rost-pick-btn {
  width: 100%; text-align: left; cursor: pointer;
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: var(--r-xs); padding: 8px 10px;
  color: #fff; font-size: 13px; font-family: inherit;
}
.rost-pick-btn::after { content: '▾'; float: right; color: var(--text-muted); }
.rost-pick-btn:focus { outline: none; border-color: var(--border-gold); }
.rost-pick-row { display: flex; align-items: center; border-bottom: 1px solid rgba(255,255,255,0.06); }
.rost-pick-row:last-of-type { border-bottom: none; }
.rost-pick-row.is-current .rost-pick-opt { color: #E5B860; font-weight: 700; }
.rost-pick-opt {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px;
  background: none; border: none; cursor: pointer; text-align: left;
  color: #fff; font-size: 14px; font-family: inherit; padding: 12px 8px;
}
.rost-pick-new { color: var(--text-muted); font-weight: 600; }
.rost-pick-x {
  background: none; border: none; cursor: pointer; flex-shrink: 0;
  color: var(--text-muted); font-size: 13px; padding: 10px 12px; opacity: 0.7;
}
.rost-pick-x:active { opacity: 1; color: #f87171; }

/* Day-level events — tappable day header + gold dot badge + day-events sheet. */
.rost-day-th { cursor: pointer; white-space: nowrap; }
/* Quiet "EVENT" ribbon on day headers with events — a whisper under the label,
   sized like the label so it doesn't widen the column. */
.rost-day-evt {
  display: block; width: fit-content; margin: 2px auto 0;
  font-size: 8px; font-weight: 800; letter-spacing: 0.5px; line-height: 1.3;
  text-transform: uppercase; color: #E8C879;
  background: rgba(232,200,121,0.10);
  border: 1px solid rgba(232,200,121,0.30);
  border-radius: 4px; padding: 1px 4px;
}
.rost-de-list { max-height: 50vh; overflow-y: auto; padding: 4px 0; }
.rost-de-row { display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.rost-de-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rost-de-info > strong { font-size: 14px; color: #fff; }
.rost-de-time { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.rost-de-add { display: flex; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.rost-de-add .rost-cell-input { flex: 1; min-width: 120px; margin-top: 0; }
.rost-de-add .rost-mng-times .rost-cell-input { width: auto; flex: none; }

/* Dark native popups for roster <select>s that reuse these classes (else
   white-on-white options on iOS Safari). */
.rost-cell-input, .rwz-cell-sel { color-scheme: dark; }

/* Create-week entry card (a week with no roster). */
.rost-create-card { text-align: center; padding: 40px 24px; max-width: 380px; margin: 20px auto; }
.rost-create-icon { font-size: 44px; margin-bottom: 12px; }
.rost-create-title { font-size: 18px; font-weight: 800; color: #fff; margin-bottom: 6px; }
.rost-create-sub { font-size: 13px; color: var(--text-muted); margin-bottom: 18px; line-height: 1.5; }
.rost-create-btn { padding: 12px 22px; }

/* Create-wizard — new bits layered on the reused rwz-* classes. */
.rwz-section-sub { font-size: 12px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; color: var(--text-secondary); margin: 4px 0 8px; }
.rwz-events { margin-top: 16px; }
.rwz-de-list { margin-bottom: 8px; }
.rwz-ev-notes { margin-top: 14px; }
.rwz-ev-note { font-size: 13px; color: var(--text-secondary); padding: 3px 0; }
.rwz-check.is-disabled { opacity: 0.5; }

/* Dark native option lists for EVERY select/date/time inside the wizard modal +
   day-events sheet (they still popped white on device). */
#pxRosterWizModal select, #pxRosterWizModal input[type="date"], #pxRosterWizModal input[type="time"],
#pxRosterDaySheet select, #pxRosterDaySheet input[type="time"] { color-scheme: dark; }

/* Step-2 staff row → two lines: name row, then dept + position selects. */
#pxRosterWizModal .rwz-staff-row { flex-direction: column; align-items: stretch; }
.rwz-staff-top { display: flex; align-items: center; gap: 10px; cursor: pointer; }
/* AV-3e — explicit sizing: real photos must not render at intrinsic size */
.rwz-staff-top img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 1.5px solid var(--border-gold); flex-shrink: 0; }
.rwz-staff-selects { display: flex; gap: 8px; margin-top: 8px; }
#pxRosterWizModal .rwz-staff-selects .rost-pick-dept { flex: 1; min-width: 0; max-width: none; }

/* Step-3 shift-library strip. */
.rwz-lib { margin-bottom: 14px; }
.rwz-lib-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.rwz-lib-chip { font-size: 10px; font-weight: 800; letter-spacing: 0.3px; padding: 3px 9px; border-radius: 999px; border: 1px solid #8a94a6; background: rgba(255,255,255,0.05); white-space: nowrap; }

/* Step-4 review: first name + chosen position. */
.rwz-rev-name { display: flex; flex-direction: column; align-items: flex-start; }
.rwz-rev-name em { font-style: normal; font-size: 10px; color: var(--text-muted); }

/* Tappable member name (dept reassign). */
.rost-name-col.is-clickable { cursor: pointer; }
.rost-name-chev { margin-left: 4px; color: var(--text-muted); font-weight: 600; }

/* Add-members picker rows (inside the cloned .pxchat-action-sheet). */
.rost-pick-list { max-height: 56vh; overflow-y: auto; padding: 4px 0; }
.rost-pick-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px;
}
.rost-pick-av { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; object-fit: cover; }
.rost-pick-info { flex: 1; min-width: 0; }
.rost-pick-name { font-size: 13px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rost-pick-sub  { font-size: 10px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rost-pick-dept {
  flex-shrink: 0; max-width: 128px;
  font-size: 11px; padding: 5px 6px; border-radius: 8px;
  background: var(--bg-input); border: 1px solid var(--border); color: #fff;
  /* color-scheme:dark makes the NATIVE popup render dark (iOS Safari / desktop
     Chrome+Safari); without it the popup is white-on-white → invisible options.
     The explicit option rule is belt-and-braces for engines that ignore it. */
  color-scheme: dark;
}
.rost-pick-dept option { background: #1a1c20; color: #fff; }
.rost-pick-add {
  flex-shrink: 0; padding: 6px 14px; border-radius: 999px;
  background: #E5B860; border: none; color: #1a1000;
  font-size: 12px; font-weight: 800; cursor: pointer;
}
.rost-pick-add:disabled { opacity: 0.5; cursor: default; }
.rost-pick-empty { padding: 28px 16px; text-align: center; color: var(--text-muted); font-size: 13px; }

/* HR-HUB P1c-1 — restrained "Free" tag. Whispers: muted fill, hairline,
   small caps. No loud gold (that competes with content). */
.px-free-chip {
  display: inline-block; vertical-align: middle;
  font-size: 9px; font-weight: 600; letter-spacing: 0.8px;
  padding: 2.5px 9px; margin-left: 6px; border-radius: 999px;
  /* Platinum whisper — hairline border, muted silver text, faint white glow. */
  background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.18);
  color: #c9ced6;
  box-shadow: 0 0 8px rgba(255,255,255,0.06);
  text-transform: uppercase;
  white-space: nowrap;
}
/* ══ SUB-2a — "FOUNDING MEMBER" corner sash ══════════════════
   Platinum language of .px-free-chip: hairline borders, muted
   silver text, faint glow. Absolutely positioned — zero layout
   shift; host takes .px-has-sash for containment. */
.px-has-sash { position: relative; overflow: hidden; }
.px-founding-sash-wrap {
  position: absolute; top: 0; right: 0;
  width: 132px; height: 132px;
  overflow: hidden;
  pointer-events: none;
  z-index: 3;
}
/* 9JUL ruling — single line, geometry enlarged to fit it unclipped. */
.px-founding-sash {
  position: absolute; display: block;
  width: 200px; top: 34px; right: -52px;
  transform: rotate(45deg);
  text-align: center; padding: 4px 0;
  font-size: 8.5px; font-weight: 800; letter-spacing: 0.7px;
  text-transform: uppercase; white-space: nowrap;
  color: #c9ced6;
  background: rgba(255,255,255,0.10);
  border-top: 1px solid rgba(255,255,255,0.35);
  border-bottom: 1px solid rgba(255,255,255,0.35);
  box-shadow: 0 0 12px rgba(201,206,214,0.18);
}
/* Short hosts (~72px HR tiles): shrink the whole sash so the text's tail
   never crosses the tile's bottom edge (full band needs ~81px of height). */
.hr-tool .px-founding-sash-wrap,
.px-hrhub-tile .px-founding-sash-wrap { transform: scale(0.82); transform-origin: top right; }
/* Sash carries the message on the HR entity-subscription card — the inline
   chip repeating it reads as clutter, so it yields there. */
.px-hr-sub.px-has-sash .px-free-chip { display: none; }

/* Quiet "Limited time" chip — gold hairline, not a shouting badge. */
.px-lt-chip {
  display: inline-block; vertical-align: middle;
  font-size: 9px; font-weight: 700; letter-spacing: 0.5px;
  padding: 2px 8px; margin-left: 6px; border-radius: 999px;
  background: rgba(232,200,121,0.08);
  border: 1px solid rgba(232,200,121,0.45);
  color: #E8C879;
  text-transform: uppercase; white-space: nowrap;
}
/* Mailto request rendered as a gold button (anchor, no underline). */
.px-mag-adv-btn { text-decoration: none; display: inline-flex; align-items: center; }

/* Feed URL auto-link (XSS-safe linkify) — quiet gold, no underline. */
.post-link {
  color: #E8C879;
  text-decoration: none;
  word-break: break-all;
}

/* PL-OG-PREVIEW — compact WhatsApp-style link card in the feed. */
.post-link-card {
  display: flex; gap: 10px; align-items: stretch;
  margin: 8px 16px 0; padding: 8px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 12px; cursor: pointer; overflow: hidden;
}
.post-link-card:active { background: rgba(255,255,255,0.04); }
.post-link-img {
  width: 64px; height: 64px; flex-shrink: 0;
  border-radius: 8px; object-fit: cover;
  background: rgba(255,255,255,0.05);
}
.post-link-col {
  min-width: 0; flex: 1;
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
}
.post-link-title {
  font-size: 13px; font-weight: 700; color: #fff; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.post-link-desc {
  font-size: 11px; color: var(--text-secondary); line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.post-link-domain { font-size: 10px; font-weight: 700; color: #E8C879; letter-spacing: 0.2px; }

/* Roster send-to-staff sheet (cloned .pxchat-action-sheet shell). */
.rost-send-all { width: 100%; margin: 4px 0 10px; }
.rost-send-list { max-height: 52vh; overflow-y: auto; padding: 2px 0; }
.rost-send-row { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.rost-send-av { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; object-fit: cover; }
.rost-send-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rost-send-btn {
  flex-shrink: 0; padding: 6px 16px; border-radius: 999px;
  background: rgba(255,255,255,0.05); border: 1px solid var(--border-gold);
  color: #E5B860; font-size: 12px; font-weight: 800; cursor: pointer; white-space: nowrap;
}
.rost-send-btn:disabled { opacity: 0.7; cursor: default; }
.rost-send-preview {
  white-space: pre-wrap; word-break: break-word; font-family: inherit;
  font-size: 13px; line-height: 1.5; color: #E7E7EA; margin: 6px 0 14px;
  max-height: 56vh; overflow-y: auto; padding: 14px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
}
.rost-recreate-msg {
  font-size: 13px; line-height: 1.5; color: var(--text-secondary);
  margin: 4px 8px 14px; text-align: center;
}
/* Apple-quiet destructive confirm (roster re-create) */
.rost-confirm-title {
  text-align: center; font-size: 16px; font-weight: 700; color: #fff;
  padding: 4px 0 2px;
}
.rost-confirm-destructive {
  display: block; width: 100%;
  padding: 13px; border-radius: 12px;
  background: rgba(239,68,68,0.12);
  border: 1px solid rgba(239,68,68,0.35);
  color: #f87171; font-size: 15px; font-weight: 700;
  cursor: pointer; transition: background 0.15s;
}
.rost-confirm-destructive:hover { background: rgba(239,68,68,0.2); }
.rost-confirm-destructive[disabled] { opacity: 0.6; cursor: default; }

/* ══ FEED-FEATURED (FF-2/3/4) ══════════════════════════════ */
/* FF-7 (9JUL upsize) — sponsored mini-card: premium, clearly distinct from
   posts, still dark/quiet */
.px-feed-featured {
  display: flex; align-items: center; gap: 14px;
  margin: 10px 16px; padding: 16px;
  min-height: 92px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 14px;
  box-shadow: 0 0 16px rgba(255,255,255,0.07);
  cursor: pointer;
  transition: border-color 0.15s;
}
.px-feed-featured:hover { border-color: var(--border-gold); }
.px-feed-featured img {
  width: 56px; height: 56px; border-radius: 14px;
  object-fit: cover; flex-shrink: 0;
}
.px-feed-featured-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.px-feed-featured-body strong { font-size: 16px; font-weight: 800; color: #fff; }
.px-feed-featured-body span {
  font-size: 12.5px; color: var(--text-secondary);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.px-feed-featured-side {
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  align-self: flex-start; flex-shrink: 0;
}
.px-feed-featured-views { font-size: 10.5px; color: var(--text-muted); }
.px-feed-featured-tag {
  font-size: 9px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--text-secondary);
  border: 1px solid rgba(255,255,255,0.14);
  padding: 2px 8px; border-radius: 999px;
  flex-shrink: 0;
}
/* Featured content sheet — banner, quiet head, body, one Visit CTA */
.px-feat-card { max-width: 420px; padding: 0 0 20px; overflow: hidden; }
.px-feat-banner {
  width: 100%; max-height: 180px; object-fit: cover; display: block;
  border-radius: 16px 16px 0 0;
}
.px-feat-head {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px 0;
}
.px-feat-logo {
  width: 44px; height: 44px; border-radius: 12px;
  object-fit: cover; flex-shrink: 0;
  border: 1px solid var(--border-silver);
}
.px-feat-head-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.px-feat-head-txt strong { font-size: 16px; font-weight: 800; color: #fff; }
.px-feat-head-txt span { font-size: 12px; color: var(--text-secondary); }
.px-feat-body {
  font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,0.8);
  padding: 12px 18px 0; margin: 0;
}
.px-feat-visit { margin: 16px 18px 0; width: calc(100% - 36px); text-align: center; text-decoration: none; display: block; }
/* FF-6 — modal PDF viewer: all pages stacked in a scrollable wrap */
.px-feat-pdf {
  max-height: 60vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column; gap: 4px;
  padding: 24px 0; background: #e8e8ea;   /* paper gutter, not dark glass */
  border-radius: 16px 16px 0 0;
}
.px-feat-pdf canvas { display: block; box-shadow: 0 1px 3px rgba(0,0,0,0.25); }
.px-feat-pdf:has(canvas) { padding: 0; }   /* spinner padding drops once pages land */
.px-feat-pdf .pxchat-spinner { margin: 0 auto; }
.px-feat-pdf-open {
  display: block; text-align: center; padding: 8px 0;
  color: var(--text-secondary); text-decoration: none; font-size: 13.5px;
}
/* FF-2 — admin active pill */
.pxmag-mini.is-on { border-color: #34d399; color: #34d399; }
/* Leave — self-approval placeholder in the pending queue */
.lp-pending-own { font-style: normal; font-size: 11px; color: var(--text-muted); align-self: center; }

/* ══ Leave balances — Apple mini-dashboard + SOA history ══ */
.lv-stats-row {
  display: flex; gap: 10px;
  margin: 0 0 18px;
}
.lv-stat {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 7px;
  padding: 14px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-silver);
  border-radius: 14px;
}
.lv-stat-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lv-stat-value { font-size: 19px; font-weight: 800; color: #fff; line-height: 1; }
.lv-stat-value em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--text-muted); }
.lv-stat-track {
  height: 4px; border-radius: 2px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
}
.lv-stat-fill { height: 100%; border-radius: 2px; transition: width 0.4s ease; }
.lv-stat-fill.lv-ann  { background: linear-gradient(90deg, #22c55e, #34d399); }
.lv-stat-fill.lv-sick { background: linear-gradient(90deg, #f97316, #fb923c); }
.lv-stat-fill.is-high { background: linear-gradient(90deg, #dc2626, #f87171); }
.lv-stat-foot { font-size: 9px; color: var(--text-muted); letter-spacing: 0.3px; }

/* LV-6 — staff baseline rows + sheet inputs */
.lv-staff-avail { font-size: 12px; font-weight: 700; color: #fff; white-space: nowrap; flex-shrink: 0; }
.lv-bl-row { display: flex; flex-direction: column; gap: 5px; margin: 10px 0 0; text-align: left; }
.lv-bl-row span {
  font-size: 10px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase;
  color: var(--text-muted);
}
/* LV-6b — live availability readout + single Cancel|Save row */
.lv-bl-avail {
  text-align: center; font-size: 24px; font-weight: 800; color: #fff;
  margin-top: 16px; line-height: 1.2;
}
.lv-bl-sub { text-align: center; font-size: 11px; color: var(--text-muted); margin-top: 4px; }
/* PRES-1 — online presence dots (Messages list + open-chat header) */
.px-presence-host { position: relative; }
.px-presence-dot {
  position: absolute; right: -1px; bottom: -1px;
  width: 10px; height: 10px; border-radius: 50%;
  background: #30D158;
  border: 2px solid var(--bg-primary, #0A0A0A);
  pointer-events: none;
}
.px-presence-online { display: block; font-size: 10.5px; font-weight: 600; color: #30D158; }

/* CTA-2 — gold founding CTA: the action goes gold, the sash stays platinum */
.px-founding-cta {
  display: block; width: 100%; padding: 16px; border-radius: 14px;
  background: linear-gradient(180deg, #E8C879, #C9A050);
  border: 1px solid rgba(232,200,121,0.6);
  color: #1a1408; cursor: pointer; font-family: inherit;
  box-shadow: 0 0 18px rgba(232,200,121,0.25);
  text-align: center;
}
.px-founding-cta:disabled { opacity: 0.7; cursor: default; }
.px-founding-cta-main { display: block; font-size: 15.5px; font-weight: 800; }
.px-founding-cta-sub {
  display: block; margin-top: 3px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
  opacity: 0.85;
}

/* WZ-EDIT — library chips became buttons (tap → inline edit) */
button.rwz-lib-chip { background: none; font-family: inherit; cursor: pointer; }
button.rwz-lib-chip.is-editing { box-shadow: 0 0 0 1px currentColor; }

/* LV-5 — roster leave paint: cell pill + holiday day header */
.rost-leave-pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 9.5px; font-weight: 700; color: var(--text-secondary);
  background: rgba(255,255,255,0.06); border: 1px solid var(--border);
  border-radius: 999px; padding: 2px 7px; white-space: nowrap;
}
.rost-leave-pill i { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.rost-day-th.rost-day-hol { border-top: 2px solid #C9A050; }
.rost-day-hol-lbl {
  display: block; font-size: 7.5px; font-weight: 800; letter-spacing: 0.3px;
  text-transform: uppercase; color: #C9A050; margin-top: 1px;
}

.lv-bl-actions { display: flex; gap: 10px; margin-top: 16px; }
.lv-bl-actions > button { flex: 1; margin-top: 0; width: auto; display: block; }
/* Holiday sheet — quiet red text link, not a destructive slab */
.lv-hol-remove {
  display: block; margin: 12px auto 0; padding: 4px 10px;
  background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 12.5px; font-weight: 600; color: #f87171;
}

.lv-hist-head {
  font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 4px 10px;
}
.lv-hist-list { display: flex; flex-direction: column; gap: 8px; }
.lv-hist-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
}
.lv-hist-icon { font-size: 16px; flex-shrink: 0; }
.lv-hist-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.lv-hist-mid strong { font-size: 13px; font-weight: 700; color: #fff; }
.lv-hist-mid strong em { font-style: normal; font-weight: 600; font-size: 11px; color: var(--text-muted); }
.lv-hist-mid span {
  font-size: 11px; color: var(--text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pxmag-slot-sub { font-style: normal; color: var(--text-muted); font-size: 11px; }

/* Cell modal — quiet inline "+ New shift" (wizard library add, in place) */
.rost-cell-newshift {
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.rost-newshift-toggle {
  background: none; border: none; padding: 2px 0;
  color: var(--text-secondary); font-size: 12.5px; font-weight: 600;
  cursor: pointer;
}
.rost-newshift-toggle:hover { color: var(--text-primary); }
#rostNewShiftForm { flex-direction: column; gap: 8px; margin-top: 8px; }

/* HR-HUB P1c-1 — HQ → HR Hub entry tile (own class; avoids the .hq-entity--hr
   capture-delegate + lock that force a Coming-Soon wall). */
/* HQ-DESIGN — ONE tile system across all HQ sections: soft dark card edges,
   quiet gold glyph well, muted secondary line, thin SVG chevron. */
.px-hrhub-tile {
  display: flex; align-items: center; gap: 14px;
  width: 100%; margin: 0 0 10px;
  padding: 17px 16px; border-radius: 16px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
  color: inherit; text-align: left; font-family: inherit; cursor: pointer;
  transition: transform 0.15s ease;
}
.px-hrhub-tile:active { transform: scale(0.99); }
.hq-glyph {
  width: 40px; height: 40px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(232,200,121,0.08);
  border: 1px solid rgba(232,200,121,0.22);
  color: #E8C879;
  flex-shrink: 0;
}
.hq-glyph svg { width: 22px; height: 22px; display: block; }
.hq-glyph--sm { width: 30px; height: 30px; border-radius: 9px; }
.hq-glyph--sm svg { width: 16px; height: 16px; }
.hq-glyph--xs { width: 26px; height: 26px; border-radius: 8px; }
.hq-glyph--xs svg { width: 14px; height: 14px; }
.px-hrhub-body { flex: 1; min-width: 0; }
.px-hrhub-name { font-family: 'Playfair Display', serif; font-size: 16px; font-weight: 800; color: #fff; display: flex; align-items: center; }
.px-hrhub-desc { font-size: 11.5px; color: var(--text-muted); line-height: 1.4; margin-top: 2px; }
.px-hrhub-chev { color: #9aa0a8; flex-shrink: 0; display: inline-flex; }
.px-hrhub-chev svg { width: 16px; height: 16px; display: block; }

/* HQ-1 — sectioned HQ: eyebrow-titled sections, one quiet row pattern.
   HQ-DESIGN — consistent rhythm: eyebrow→cards 12px, section gap 26px. */
.hq-sec { position: relative; margin-bottom: 26px; }
.hq-sec .hq-sec-head { margin: 0 2px 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
/* SASH-CLIP — quiet platinum founding chip for section headers (the rotated
   corner sash needs a tall card to sit in; on a bare header it clips). */
.hq-founding-chip {
  font-size: 8.5px; font-weight: 800; letter-spacing: 0.7px;
  text-transform: uppercase; white-space: nowrap;
  padding: 3px 9px; border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(216,219,224,0.45);
  color: #d8dbe0;
}
.px-hrhub-tile.is-soon { border-color: var(--border-silver); opacity: 0.62; filter: saturate(0.7); cursor: default; }
.px-hrhub-tile.is-soon:active { transform: none; }
.hq-soon-pill {
  flex-shrink: 0; font-size: 9px; font-weight: 700; letter-spacing: 0.6px;
  text-transform: uppercase; color: var(--text-muted);
  border: 1px solid var(--border-silver); border-radius: 999px;
  padding: 3px 8px; white-space: nowrap;
}

/* HR-HUB P1c-1 — Hub landing tool grid. Live tools gold hairline + tappable;
   Coming-soon tools muted + inert with a quiet chip. */
.hr-tool-grid { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; }
.hr-tool {
  display: flex; align-items: center; gap: 16px;
  width: 100%; padding: 18px 20px; border-radius: 18px;
  background: var(--bg-card); border: 1px solid var(--border);
  color: inherit; text-align: left; font-family: inherit;
}
.hr-tool--live { border-color: var(--border-gold); cursor: pointer; transition: transform 0.15s ease; }
.hr-tool--live:active { transform: scale(0.99); }
.hr-tool--soon { opacity: 0.5; cursor: default; }
.hr-tool-ico  { font-size: 30px; flex-shrink: 0; }
.hr-tool-body { flex: 1; min-width: 0; }
.hr-tool-name { font-family: 'Playfair Display', serif; font-size: 17px; font-weight: 800; color: #fff; margin-bottom: 3px; display: flex; align-items: center; }
.hr-tool-desc { font-size: 11px; color: var(--text-muted); line-height: 1.4; }
.hr-tool-chev { color: #fff; font-size: 22px; font-weight: 600; flex-shrink: 0; }
.hr-tool-soon-chip {
  font-size: 9px; font-weight: 700; letter-spacing: 0.4px;
  margin-left: 8px; padding: 2px 8px; border-radius: 999px;
  background: rgba(255,255,255,0.05); border: 1px solid var(--border);
  color: var(--text-muted); text-transform: uppercase;
}

/* Action button row */
.rost-actions {
  display: flex; gap: 8px;
  padding: 0 16px 12px;
  flex-wrap: wrap;
}
.rost-actions > button { flex: 1; min-width: 110px; }
.rost-actions > button[disabled] { opacity: 0.4; cursor: not-allowed; }

/* Roster grid cells */
.rost-table .rost-name-col {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 6px 8px;
  display: flex; align-items: center; gap: 8px;
  min-width: 140px;
}
.rost-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
  border: 1px solid var(--border-gold);
}
.rost-name-wrap { display: flex; flex-direction: column; min-width: 0; }
.rost-name { font-size: 11px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 96px; }
.rost-pos  { font-size: 9px;  color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 96px; }

.rost-day-date {
  font-size: 9px;
  color: var(--text-muted);
  font-weight: 400;
  margin-top: 1px;
}

.rost-cell {
  position: relative;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 6px 5px;
  min-width: 84px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  transition: background 0.12s, transform 0.05s;
}
.rost-cell:hover { background: rgba(255,255,255,0.07); transform: translateY(-1px); }
.rost-cell-empty {
  border-style: dashed;
  border-color: rgba(255,255,255,0.07);
  color: var(--text-muted);
}
.rost-cell-empty:hover {
  border-style: solid;
  border-color: var(--border-gold);
  color: var(--text-gold);
}
.rost-add-hint { font-size: 11px; font-weight: 700; }
.rost-cell-filled {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.20);
}
.rost-cell-time {
  font-size: 11px;
  color: #fff;
  font-weight: 700;
  margin-bottom: 2px;
}
.rost-cell-meta {
  font-size: 9px;
  color: var(--text-secondary);
  letter-spacing: 0.2px;
}
.rost-cell-meta-sub {
  font-size: 9px;
  color: var(--text-gold);
  margin-top: 2px;
  font-weight: 700;
}
.rost-cell-badge {
  position: absolute;
  top: 4px; right: 4px;
  font-size: 10px;
}
.rost-readonly { cursor: default; }
.rost-readonly:hover { background: rgba(255,255,255,0.02); transform: none; }

/* Totals strip at the bottom of the editor */
.rost-totals {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
  padding: 14px 16px 18px;
}
.rost-total-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 10px 12px;
  text-align: center;
}
.rost-total-card.budget {
  background: linear-gradient(135deg, rgba(255,255,255,0.10), rgba(16,16,20,0.9));
  border-color: var(--border-gold);
}
.rost-tc-eyebrow {
  font-size: 9px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 800;
  margin-bottom: 4px;
}
.rost-tc-val {
  font-family: 'Playfair Display', serif;
  font-size: 18px; color: #fff; font-weight: 700;
}

/* ── Shift modal ── */
.roster-shift-modal {
  max-width: 460px; padding: 22px 22px 18px; position: relative;
}
.rost-modal-head {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}
.rost-modal-icon { font-size: 30px; }
.rost-modal-title {
  font-family: 'Playfair Display', serif;
  color: #fff; font-size: 18px; font-weight: 800;
}
.rost-modal-sub {
  font-size: 11px; color: var(--text-muted);
  margin-top: 2px;
}

.rost-form { display: flex; flex-direction: column; gap: 12px; }
.rost-form-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.rost-form-row {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 10px; color: var(--text-muted);
  letter-spacing: 0.4px; text-transform: uppercase;
}
.rost-form-row > input,
.rost-form-row > select,
.rost-form-row > textarea {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  padding: 8px 10px;
  color: #fff;
  font-size: 13px;
  font-family: inherit;
  color-scheme: dark;
  text-transform: none;
  letter-spacing: normal;
}
.rost-form-row > input:focus,
.rost-form-row > select:focus,
.rost-form-row > textarea:focus {
  outline: none;
  border-color: var(--border-gold);
}
.rost-form-row > textarea { resize: vertical; min-height: 50px; }

.rost-summary {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  margin-top: 4px;
}
.rost-sum-row {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--text-secondary);
  padding: 2px 0;
}
.rost-sum-row strong { color: var(--text-primary); font-weight: 700; }

@media (max-width: 480px) {
  .rost-form-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════
   ROSTER & ATTENDANCE — Chunk 10 (Dropdown visibility +
   non-working shift types). Scoped to these two modals
   only — no global override of input styles.
   ═══════════════════════════════════════════════════ */

/* High-contrast inputs inside the roster shift modal */
.roster-shift-modal select,
.roster-shift-modal input[type="time"],
.roster-shift-modal input[type="date"],
.roster-shift-modal input[type="number"],
.roster-shift-modal input[type="text"],
.roster-shift-modal textarea {
  background: #ffffff !important;
  color: #1a1a1a !important;
  border: 1.5px solid var(--text-primary) !important;
  font-weight: 600;
  appearance: auto;
  -webkit-appearance: auto;
}
.roster-shift-modal select { -webkit-appearance: menulist; appearance: menulist; cursor: pointer; }
.roster-shift-modal select option {
  background: #ffffff !important;
  color: #1a1a1a !important;
  padding: 8px;
}
.roster-shift-modal select:focus,
.roster-shift-modal input:focus,
.roster-shift-modal textarea:focus {
  outline: 2px solid rgba(255,255,255,0.35);
  border-color: var(--text-primary) !important;
}
.roster-shift-modal input:disabled {
  background: #f3f4f6 !important;
  color: #6b7280 !important;
  cursor: not-allowed;
}

/* Same treatment for the attendance edit modal — extra-specific selectors
   to override prior dark-themed rules regardless of source order. */
.geo-edit-modal select,
.geo-edit-modal .geo-edit-select,
.geo-edit-modal input[type="time"],
.geo-edit-modal input[type="number"],
.geo-edit-modal input[type="date"],
.geo-edit-modal input[type="text"],
.geo-edit-modal textarea {
  background: #ffffff !important;
  color: #1a1a1a !important;
  border: 1.5px solid var(--text-primary) !important;
  font-weight: 600;
  appearance: auto;
  -webkit-appearance: auto;
}
.geo-edit-modal select,
.geo-edit-modal .geo-edit-select {
  -webkit-appearance: menulist !important;
  appearance: menulist !important;
  cursor: pointer;
  padding: 10px 12px !important;
}
.geo-edit-modal select option,
.geo-edit-modal .geo-edit-select option {
  background: #ffffff !important;
  color: #1a1a1a !important;
  padding: 8px;
  font-weight: 600;
}
.geo-edit-modal select:focus,
.geo-edit-modal .geo-edit-select:focus,
.geo-edit-modal input:focus,
.geo-edit-modal textarea:focus {
  outline: 2px solid rgba(255,255,255,0.35) !important;
  border-color: var(--text-primary) !important;
}
.geo-edit-modal input:disabled,
.geo-edit-modal .geo-edit-select:disabled {
  background: #f3f4f6 !important;
  color: #6b7280 !important;
  cursor: not-allowed;
}

/* Note field: add hint + required label states */
.geo-edit-note-label .req {
  color: #f87171;
  font-style: normal;
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.4px;
}
.geo-edit-note-hint {
  margin-top: 6px;
  font-size: 11px;
  color: #fbbf24;
  background: rgba(217,119,6,0.10);
  border: 1px solid rgba(217,119,6,0.32);
  border-radius: var(--r-xs);
  padding: 6px 10px;
}

/* Shift-type message strip (shown when non-working type selected) */
.rost-shift-type-msg {
  margin: -6px 0 4px;
  padding: 8px 12px;
  background: rgba(168,139,250,0.12);
  border: 1px solid rgba(168,139,250,0.32);
  border-radius: var(--r-sm);
  font-size: 11px;
  color: #c4b5fd;
}
.rost-shift-type-msg strong { color: #fff; font-weight: 800; }

/* Non-working shift cells (roster grid) */
.rost-cell-nontype {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  background: rgba(255,255,255,0.03);
}
.rost-cell-icon-big {
  font-size: 18px;
  line-height: 1;
  margin-bottom: 4px;
}
.rost-cell-type-label {
  font-size: 9px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.3px;
}
.rost-type-on_leave            { background: rgba(96,165,250,0.10); border-color: rgba(96,165,250,0.32); }
.rost-type-on_leave .rost-cell-type-label            { color: #93c5fd; }
.rost-type-no_duty             { background: rgba(156,163,175,0.10); border-color: rgba(156,163,175,0.30); }
.rost-type-no_duty .rost-cell-type-label             { color: #d1d5db; }
.rost-type-sick_leave          { background: rgba(252,211,77,0.10); border-color: rgba(252,211,77,0.32); }
.rost-type-sick_leave .rost-cell-type-label          { color: #fde68a; }
.rost-type-medical_appointment { background: rgba(34,211,238,0.10); border-color: rgba(34,211,238,0.32); }
.rost-type-medical_appointment .rost-cell-type-label { color: #67e8f9; }
.rost-type-training_day        { background: rgba(168,139,250,0.10); border-color: rgba(168,139,250,0.32); }
.rost-type-training_day .rost-cell-type-label        { color: #c4b5fd; }

/* ═══════════════════════════════════════════════════
   GEO-ATTENDANCE — Chunk 11 (Privacy modal)
   ═══════════════════════════════════════════════════ */
.geo-privacy-modal {
  max-width: 460px; padding: 24px 22px 18px;
  text-align: center; position: relative;
}
.geo-priv-icon { font-size: 38px; margin-bottom: 4px; }
.geo-priv-title {
  font-family: 'Playfair Display', serif;
  color: #fff; font-size: 22px; margin: 0 0 6px;
}
.geo-priv-sub {
  font-size: 13px; color: var(--text-secondary);
  margin: 0 0 18px;
}
.geo-priv-sub strong { color: #fff; }

.geo-priv-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-bottom: 14px;
  text-align: left;
}
.geo-priv-col {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 10px 12px;
}
.geo-priv-col-title {
  font-size: 10px; letter-spacing: 0.6px; text-transform: uppercase;
  font-weight: 800; margin-bottom: 6px;
}
.geo-priv-col-yes { color: #34d399; }
.geo-priv-col-no  { color: #f87171; }
.geo-priv-col ul {
  list-style: none; padding: 0; margin: 0;
}
.geo-priv-col li {
  font-size: 11px; color: var(--text-secondary);
  padding: 3px 0;
}

.geo-priv-foot {
  font-size: 11px; color: var(--text-muted);
  margin: 0 0 16px;
  font-style: italic;
}
.geo-priv-foot strong { color: var(--text-gold); font-style: normal; }

.geo-priv-remember {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 11px; color: var(--text-secondary);
  margin-bottom: 14px;
  cursor: pointer;
}
.geo-priv-remember input[type="checkbox"] {
  width: 16px; height: 16px;
  accent-color: #FFFFFF;
  cursor: pointer;
}

.geo-priv-actions { gap: 10px; }
.geo-priv-actions > button { flex: 1; }

@media (max-width: 460px) {
  .geo-priv-row { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════
   GEO/ROSTER MODAL FORMS — Chunk 12
   Maximum-specificity dropdown + input visibility.
   Loaded LAST so it wins source-order ties, prefixed
   with `body` so it outranks any earlier rule with
   the same selector and !important.
   Scoped to the roster + attendance + privacy modals
   only — does NOT touch global form inputs (sign-in,
   registration, search, settings, chat, etc).
   ═══════════════════════════════════════════════════ */

body .ojt-modal.roster-shift-modal select,
body .ojt-modal.roster-shift-modal input[type="text"],
body .ojt-modal.roster-shift-modal input[type="time"],
body .ojt-modal.roster-shift-modal input[type="date"],
body .ojt-modal.roster-shift-modal input[type="number"],
body .ojt-modal.roster-shift-modal textarea,
body .ojt-modal.geo-edit-modal    select,
body .ojt-modal.geo-edit-modal    .geo-edit-select,
body .ojt-modal.geo-edit-modal    input[type="text"],
body .ojt-modal.geo-edit-modal    input[type="time"],
body .ojt-modal.geo-edit-modal    input[type="date"],
body .ojt-modal.geo-edit-modal    input[type="number"],
body .ojt-modal.geo-edit-modal    textarea {
  background: #ffffff !important;
  color: #000000 !important;
  border: 2px solid #FFFFFF !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  font-family: inherit !important;
  width: 100% !important;
  box-sizing: border-box !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  margin: 4px 0 !important;
  -webkit-appearance: auto !important;
  appearance: auto !important;
  color-scheme: light !important;
}

body .ojt-modal.roster-shift-modal select,
body .ojt-modal.geo-edit-modal    select,
body .ojt-modal.geo-edit-modal    .geo-edit-select {
  -webkit-appearance: menulist !important;
  -moz-appearance: menulist !important;
  appearance: menulist !important;
  cursor: pointer !important;
}

body .ojt-modal.roster-shift-modal select option,
body .ojt-modal.geo-edit-modal    select option,
body .ojt-modal.geo-edit-modal    .geo-edit-select option {
  background: #ffffff !important;
  color: #000000 !important;
  padding: 8px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

body .ojt-modal.roster-shift-modal select:hover,
body .ojt-modal.geo-edit-modal    select:hover,
body .ojt-modal.geo-edit-modal    .geo-edit-select:hover {
  border-color: #FFFFFF !important;
  background: #fffdf5 !important;
}

body .ojt-modal.roster-shift-modal select:focus,
body .ojt-modal.roster-shift-modal input:focus,
body .ojt-modal.roster-shift-modal textarea:focus,
body .ojt-modal.geo-edit-modal    select:focus,
body .ojt-modal.geo-edit-modal    .geo-edit-select:focus,
body .ojt-modal.geo-edit-modal    input:focus,
body .ojt-modal.geo-edit-modal    textarea:focus {
  border-color: #FFFFFF !important;
  outline: 3px solid rgba(255,255,255,0.30) !important;
  background: #ffffff !important;
}

body .ojt-modal.roster-shift-modal select:disabled,
body .ojt-modal.roster-shift-modal input:disabled,
body .ojt-modal.geo-edit-modal    select:disabled,
body .ojt-modal.geo-edit-modal    .geo-edit-select:disabled,
body .ojt-modal.geo-edit-modal    input:disabled {
  background: #f0f0f0 !important;
  color: #999999 !important;
  cursor: not-allowed !important;
  opacity: 0.6 !important;
}

/* ═══════════════════════════════════════════════════════════════
   Phase 7-5 · Paid tier badges
   All-gold palette · brand-cohesive across tiers.
   - cuadrix_paid : soft gold pill, dark text          (entry tier)
   - the_one_base : soft gold pill, heavier gold border (mid tier)
   - the_one_hq   : dark/black pill with gold accents   (premium)
   ═══════════════════════════════════════════════════════════════ */
.px-tier-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 11px;
  line-height: 1.3;
  vertical-align: middle;
  white-space: nowrap;
  letter-spacing: 0.2px;
  border: 1px solid transparent;
  user-select: none;
}
.px-tier-badge-sm { padding: 1px 6px; font-size: 10px; gap: 3px; }
.px-tier-badge-lg { padding: 3px 11px; font-size: 13px; gap: 5px; }
.px-tier-badge.is-icon {
  padding: 2px 6px;
  min-width: 22px;
  justify-content: center;
}
.px-tier-badge-sm.is-icon { padding: 1px 5px; min-width: 18px; }
.px-tier-badge-lg.is-icon { padding: 3px 8px; min-width: 28px; }
.px-tier-badge-ico { font-size: 1.05em; line-height: 1; }
.px-tier-badge-lbl { line-height: 1; }

/* Note: !important is used in two places below to defend against parents
   that apply the gold-gradient text-clip trick (e.g. .px-cp-name on the
   company profile header uses `background-clip: text` +
   `-webkit-text-fill-color: transparent`). Two cascading effects break
   the badge inside such a parent:
     1. Background:  the parent's text-clip mask clips the badge's
        gradient/solid background to the parent's text shape — badge
        renders transparent. → Fixed with `background: ... !important`
        on each tier rule.
     2. Text fill:   `-webkit-text-fill-color: transparent` is inherited,
        and it overrides the badge's own `color` property — text/icons
        render invisible. → Fixed with the rule below resetting
        `-webkit-text-fill-color` to `initial` on the badge and all
        descendants, so the badge's own `color` wins. */
.px-tier-badge,
.px-tier-badge * {
  -webkit-text-fill-color: initial !important;
}

/* Tribe Pro — monochrome dark chip */
.px-tier-cuadrix-paid {
  background: rgba(255,255,255,0.08) !important;
  color: #FFFFFF;
  border-color: rgba(255,255,255,0.22);
}

/* Beacon Base — heavier border for "mid tier" weight */
.px-tier-the-one-base {
  background: rgba(255,255,255,0.12) !important;
  color: #FFFFFF;
  border-color: rgba(255,255,255,0.4);
  border-width: 1.5px;
}

/* Beacon HQ — premium: deeper dark base with a brighter rim */
.px-tier-the-one-hq {
  background: linear-gradient(135deg, #1C1C1E 0%, #2A2A2E 100%) !important;
  color: #FFFFFF;
  border-color: rgba(255,255,255,0.45);
  box-shadow: 0 0 0 1px rgba(255,255,255, 0.25);
}
.px-tier-the-one-hq .px-tier-badge-ico { filter: drop-shadow(0 0 2px rgba(255,255,255, 0.6)); }

/* ═══════════════════════════════════════════════════════════════
   Phase 5-2b · Job photos picker (post-job wizard)
   3-up grid of square thumbnails with remove × button + add tile.
   ═══════════════════════════════════════════════════════════════ */
.pj-photos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 8px 0 4px;
}
.pj-photo-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  background: #0a0a0a;
  border: 1px solid rgba(255,255,255,0.08);
}
.pj-photo-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.pj-photo-primary {
  position: absolute; top: 4px; left: 4px;
  background: #FFFFFF; color: #1a1000;
  font-size: 9px; font-weight: 700;
  padding: 2px 6px; border-radius: 999px;
  letter-spacing: 0.3px;
}
.pj-photo-x {
  position: absolute; top: 4px; right: 4px;
  width: 22px; height: 22px;
  border-radius: 50%; border: none;
  background: rgba(0,0,0,0.7); color: #fff;
  font-size: 16px; line-height: 1;
  cursor: pointer; display: flex;
  align-items: center; justify-content: center;
}
.pj-photo-x:hover { background: rgba(0,0,0,0.9); }
.pj-photo-add {
  aspect-ratio: 1 / 1;
  border: 2px dashed rgba(255,255,255,0.2);
  background: transparent; color: var(--text-muted);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; cursor: pointer;
  font-weight: 500;
}
.pj-photo-add:hover { border-color: var(--text-primary); color: var(--text-primary); }

/* ═══════════════════════════════════════════════════════════════
   Phase 4-2 · Chat thread modal
   ═══════════════════════════════════════════════════════════════ */
.pxchat-modal .pxchat-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 500px;
  height: 80vh;
  max-height: 720px;
  padding: 0;
  overflow: hidden;
  position: relative;
}
.pxchat-close { z-index: 3; }
.pxchat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 56px 14px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.06), transparent);
  flex: 0 0 auto;
  min-height: 64px;
}
.pxchat-counterpart-photo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  background: linear-gradient(135deg,#FFFFFF,#B0B4BC);
  flex: 0 0 auto;
}
.pxchat-counterpart-info strong {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}
.pxchat-list {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scroll-behavior: smooth;
}
.pxchat-bubble {
  max-width: 78%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.4;
  word-wrap: break-word;
  position: relative;
}
.pxchat-bubble.is-mine {
  align-self: flex-end;
  background: linear-gradient(135deg, #FFFFFF, #B68A2C);
  color: #111;
  border-bottom-right-radius: 6px;
}
.pxchat-bubble.is-theirs {
  align-self: flex-start;
  background: rgba(255,255,255,0.07);
  color: #f3f3f3;
  border-bottom-left-radius: 6px;
}
.pxchat-bubble.is-sending { opacity: 0.55; }
.pxchat-bubble-body { white-space: pre-wrap; }
.pxchat-meta {
  font-size: 11px;
  opacity: 0.65;
  margin-top: 4px;
  text-align: right;
}
.pxchat-bubble.is-theirs .pxchat-meta { color: #aaa; }
/* DM read receipts (Phase 1) — own-bubble ticks: ✓ sent, ✓✓ read (blue). The
   own bubble is the light gold gradient, so both read fine. Not --gold (#6366FF). */
.pxchat-tick { color: #8a8a8a; font-size: 11px; margin-left: 3px; letter-spacing: -1px; }
.pxchat-tick--read { color: #53bdeb; }
/* DM delete — muted tombstone + ⋯ caret (own bubbles, mouse hover). */
.pxchat-tombstone { font-style: italic; color: #9a9a9a; font-size: 13px; }
.pxchat-bubble.is-deleted { background: rgba(255,255,255,0.06); color: #9a9a9a; }
.pxchat-bubble.is-deleted .pxchat-meta { color: #888; }
.pxchat-bubble-menu {
  position: absolute; top: 2px; right: 6px;
  border: none; background: transparent; cursor: pointer;
  color: #111; opacity: 0; font-size: 15px; line-height: 1;
  padding: 0 4px; transition: opacity .12s;
}
.pxchat-bubble:hover .pxchat-bubble-menu { opacity: 0.55; }
.pxchat-bubble-menu:hover { opacity: 0.9; }
.pxchat-empty {
  margin: auto;
  text-align: center;
  color: #aaa;
  padding: 32px 16px;
}
.pxchat-empty span { font-size: 32px; display: block; margin-bottom: 8px; }
.pxchat-empty p { margin: 0; font-size: 14px; }
.pxchat-compose {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 12px 14px;
  border-top: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.2);
}
.pxchat-textarea {
  flex: 1 1 auto;
  resize: none;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: #f3f3f3;
  border-radius: 14px;
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1.4;
  max-height: 120px;
  outline: none;
  font-family: inherit;
}
.pxchat-textarea:focus { border-color: var(--text-primary); }
.pxchat-textarea:disabled { opacity: 0.5; }
.pxchat-send-btn {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #FFFFFF, #B68A2C);
  color: #111;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s, opacity 0.15s;
}
.pxchat-send-btn:hover:not(:disabled) { transform: scale(1.05); }
.pxchat-send-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.pxchat-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255,255,255,0.25);
  border-top-color: #FFFFFF;
  border-radius: 50%;
  animation: pxchat-spin 0.8s linear infinite;
}
.pxchat-spinner-lg { width: 28px; height: 28px; margin: auto; }
@keyframes pxchat-spin { to { transform: rotate(360deg); } }

/* ── Phase B-2a: Gig Manager "Action Needed" tab + Confirm Schedule modal ── */
.pxgig-actionneeded {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  margin-bottom: 8px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.30);
  border-radius: 8px;
}
.pxgig-an-label {
  flex: 1;
  font-size: 11px;
  font-weight: 700;
  color: #B0B4BC;
}
.pxgig-an-cta {
  flex: 0 0 auto;
  padding: 6px 14px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #B0B4BC, #B68A2C);
  color: #111;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.15s, opacity 0.15s;
}
.pxgig-an-cta:hover { transform: scale(1.04); }

/* Confirm Schedule review modal (reuses .pxgig-break-card shell) */
.pxcs-body { margin: 6px 0 10px; }
.pxcs-rows { display: flex; flex-direction: column; }
.pxcs-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 7px 0;
  font-size: 12px;
  color: rgba(255,255,255,0.7);
  border-bottom: 1px dashed rgba(255,255,255,0.07);
}
.pxcs-row span { flex: 0 0 auto; }
.pxcs-row strong { flex: 1; text-align: right; color: #fff; font-weight: 700; }
.pxcs-row-total {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.35);
  border-bottom: none;
}
.pxcs-row-total span {
  color: #B0B4BC;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.pxcs-row-total strong {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 22px;
  color: #B0B4BC;
}

/* PL-FX-DISPLAY — FX equivalent line tucked under total rows */
.pxcs-row-fx {
  margin-top: -6px;
  padding-top: 0;
  padding-bottom: 4px;
  border-top: none;
  border-bottom: none;
}
.pxcs-row-fx em {
  flex: 1;
  text-align: right;
  font-style: italic;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 400;
  line-height: 1.2;
}

/* ════════════════════════════════════════════════════════════════
   PL-FILTER-POLISH — Nationality region dropdown +
   selected chips below (with ℹ + ✕) + sheet with backdrop
   ════════════════════════════════════════════════════════════════ */

.region-dropdown-wrap { margin-bottom: 8px; }

.region-selected-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 20px;
  padding: 4px 0;
}

.region-placeholder {
  font-size: 12px;
  color: #71717a;
  font-style: italic;
  padding: 4px 0;
}

.region-selected-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 6px 6px 12px;
  border-radius: 999px;
  /* Dark Slate pill (matches .filter-toggle / .form-input) with a hairline
     border + light legible text — was white-on-white (invisible). */
  background: var(--bg-surface);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 500;
  user-select: none;
}

.region-chip-label { white-space: nowrap; }

.region-chip-info,
.region-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.12);
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
  font-weight: 600;
  padding: 0;
}

.region-chip-info:hover,
.region-chip-remove:hover {
  background: rgba(255,255,255,0.22);
  color: var(--text-primary);
}

.region-chip-remove { font-size: 14px; }

.region-countries-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 999;
  animation: regionBackdropFadeIn 0.2s ease;
}

@keyframes regionBackdropFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.region-countries-sheet {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: #fff;
  border-radius: 16px 16px 0 0;
  padding: 16px 20px 24px;
  max-height: 70vh;
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform 0.25s ease;
  z-index: 1000;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
}

.region-countries-sheet.show { transform: translateY(0); }

.region-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e4e4e7;
}

.region-sheet-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #18181b;
}

.region-sheet-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.06);
  color: #3f3f46;
  font-size: 16px;
  cursor: pointer;
  font-weight: 600;
  padding: 0;
}

.region-sheet-x:hover { background: rgba(0,0,0,0.12); }

.region-countries-sheet ul {
  list-style: none;
  padding: 0;
  margin: 0;
  columns: 2;
  column-gap: 16px;
}

.region-countries-sheet ul li {
  padding: 6px 0;
  font-size: 14px;
  color: #3f3f46;
  break-inside: avoid;
}

/* ════════════════════════════════════════════════════════════════════
   PL-29 Block + Report (Day 15) — chat overflow + action sheet +
   block confirm + report modal + blocked-users list (Settings)
   ════════════════════════════════════════════════════════════════════ */

/* Chat header ⋮ overflow button */
.pxchat-counterpart-info { flex: 1 1 auto; min-width: 0; }
.pxchat-overflow-btn {
  margin-left: auto; margin-right: 36px;
  background: transparent; border: none; color: #fff;
  font-size: 22px; line-height: 1;
  width: 32px; height: 32px; border-radius: 50%;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.pxchat-overflow-btn:hover { background: rgba(255,255,255,0.08); }
.pxchat-overflow-btn:focus-visible { outline: 2px solid var(--border-gold); outline-offset: 2px; }

/* Bottom action sheet (Block / Report) */
.pxchat-action-sheet {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 10010;
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; transition: opacity 0.18s;
  /* Hidden state must NOT capture clicks: an opacity:0 full-screen overlay left
     in the DOM at z-index 10010 silently blocks every tap beneath it. Roster
     P1c-2a hit exactly this (close removed .show but not the element). Fixes the
     class of bug for all sheets that toggle .show. */
  pointer-events: none;
}
.pxchat-action-sheet.show { opacity: 1; pointer-events: auto; }
.pxchat-action-card {
  width: 100%; max-width: 460px;
  background: var(--bg-card); border-radius: 18px 18px 0 0;
  border-top: 1px solid var(--border-gold);
  padding: 14px 16px 22px;
  transform: translateY(100%); transition: transform 0.22s ease;
}
.pxchat-action-sheet.show .pxchat-action-card { transform: translateY(0); }
.pxchat-action-title {
  text-align: center; color: var(--text-secondary);
  font-size: 13px; padding: 6px 0 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.pxchat-action-item {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 14px 8px;
  background: transparent; border: none; color: #fff;
  font-size: 15px; text-align: left; cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.pxchat-action-item:hover { background: rgba(255,255,255,0.04); }
.pxchat-action-icon { font-size: 20px; width: 24px; text-align: center; }
.pxchat-action-cancel {
  display: block; width: 100%; margin-top: 12px;
  padding: 12px; background: rgba(255,255,255,0.06);
  border: none; border-radius: 12px; color: #fff;
  font-size: 15px; font-weight: 600; cursor: pointer;
}

/* Block confirm modal */
.pxblock-confirm-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 10020;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0; transition: opacity 0.18s;
}
.pxblock-confirm-overlay.show { opacity: 1; }
.pxblock-confirm-card {
  background: var(--bg-card); border: 1px solid var(--border-gold);
  border-radius: 16px; padding: 22px 20px; max-width: 380px; width: 100%;
}
.pxblock-confirm-title { margin: 0 0 8px; color: #fff; font-size: 17px; }
.pxblock-confirm-body { color: var(--text-secondary); font-size: 14px; line-height: 1.5; margin: 0 0 18px; }
.pxblock-confirm-actions { display: flex; gap: 10px; justify-content: flex-end; }
.pxblock-confirm-cancel, .pxblock-confirm-ok {
  padding: 10px 18px; border-radius: 10px; border: none;
  font-size: 14px; font-weight: 600; cursor: pointer;
}
.pxblock-confirm-cancel { background: rgba(255,255,255,0.06); color: #fff; }
.pxblock-confirm-ok { background: #c0392b; color: #fff; }
.pxblock-confirm-ok:hover { background: #d9483a; }
/* PL-CANCEL-CONFIRM-DISABLED-STYLE (Day 15 #60) — mirrors
   the .btn-gold:disabled treatment from #56. Native HTML
   disabled attribute already blocks click events; this adds
   the missing visual cue so users see the button is
   unavailable. pointer-events: none is defense-in-depth. */
.pxblock-confirm-ok:disabled,
.pxblock-confirm-ok[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
.pxblock-confirm-ok:disabled:hover,
.pxblock-confirm-ok[disabled]:hover {
  opacity: 0.4;
  filter: none;
}

/* Report modal */
.pxreport-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 10020;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0; transition: opacity 0.18s;
}
.pxreport-overlay.show { opacity: 1; }
.pxreport-card {
  background: var(--bg-card); border: 1px solid var(--border-gold);
  border-radius: 16px; padding: 22px 20px;
  max-width: 460px; width: 100%; max-height: 92vh; overflow-y: auto;
  position: relative;
}
.pxreport-close {
  position: absolute; top: 10px; right: 12px;
  background: transparent; border: none; color: #fff;
  font-size: 26px; line-height: 1; cursor: pointer; width: 32px; height: 32px;
}
.pxreport-title { margin: 0 0 6px; color: #fff; font-size: 17px; padding-right: 24px; }
.pxreport-help { color: var(--text-secondary); font-size: 13px; line-height: 1.5; margin: 0 0 16px; }
.pxreport-categories { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; }
.pxreport-cat {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px; color: #fff; font-size: 14px; cursor: pointer;
}
.pxreport-cat input { accent-color: var(--text-gold); }
.pxreport-notes-label {
  display: block; color: var(--text-secondary);
  font-size: 13px; margin: 0 0 6px;
}
.pxreport-notes {
  width: 100%; min-height: 92px; padding: 10px 12px;
  background: rgba(255,255,255,0.04); color: #fff;
  border: 1px solid rgba(255,255,255,0.1); border-radius: 10px;
  font: inherit; font-size: 14px; resize: vertical; margin-bottom: 16px;
}
.pxreport-actions { display: flex; gap: 10px; justify-content: flex-end; }
.pxreport-cancel, .pxreport-submit {
  padding: 10px 18px; border-radius: 10px; border: none;
  font-size: 14px; font-weight: 600; cursor: pointer;
}
.pxreport-cancel { background: rgba(255,255,255,0.06); color: #fff; }
.pxreport-submit { background: var(--text-gold); color: #111; }
.pxreport-submit:disabled { opacity: 0.6; cursor: wait; }

/* Settings → Blocked users list modal */
.pxblock-list-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 10020;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0; transition: opacity 0.18s;
}
.pxblock-list-overlay.show { opacity: 1; }
.pxblock-list-card {
  background: var(--bg-card); border: 1px solid var(--border-gold);
  border-radius: 16px; padding: 22px 20px;
  max-width: 460px; width: 100%; max-height: 80vh;
  display: flex; flex-direction: column;
  position: relative;
}
.pxblock-list-close {
  position: absolute; top: 10px; right: 12px;
  background: transparent; border: none; color: #fff;
  font-size: 26px; line-height: 1; cursor: pointer; width: 32px; height: 32px;
}
.pxblock-list-title { margin: 0 0 14px; color: #fff; font-size: 17px; padding-right: 24px; }
.pxblock-list-body { flex: 1 1 auto; overflow-y: auto; }
.pxblock-list-spinner, .pxblock-list-empty {
  text-align: center; color: var(--text-secondary);
  padding: 28px 12px;
}
.pxblock-list-empty-icon { font-size: 36px; margin-bottom: 8px; }
.pxblock-list-empty-title { color: #fff; font-weight: 600; margin-bottom: 4px; }
.pxblock-list-empty-sub { font-size: 13px; color: var(--text-secondary); }
.pxblock-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.pxblock-row-info { flex: 1 1 auto; min-width: 0; }
.pxblock-row-name { color: #fff; font-size: 14px; font-weight: 600; }
.pxblock-row-meta { color: var(--text-secondary); font-size: 12px; margin-top: 2px; }
.pxblock-row-btn {
  padding: 7px 14px; border-radius: 8px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  color: #fff; font-size: 13px; font-weight: 600; cursor: pointer;
}
.pxblock-row-btn:hover { background: rgba(255,255,255,0.1); }
.pxblock-row-btn:disabled { opacity: 0.6; cursor: wait; }

/* Settings → Privacy → "Manage blocked users" link button */
.pxset-link-btn {
  background: transparent; border: none; padding: 0;
  color: var(--text-gold); font-size: 14px; font-weight: 600;
  cursor: pointer; text-align: left;
}
.pxset-link-btn:hover { text-decoration: underline; }

/* ════════════════════════════════════════════════════════════════════
   LEGAL (Day 15 #50) — ToS + Privacy modals + acceptance gate
   ════════════════════════════════════════════════════════════════════ */
.pxlegal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 10030;
  display: flex; align-items: center; justify-content: center;
  padding: 12px;
  opacity: 0; transition: opacity 0.2s;
}
.pxlegal-overlay.show { opacity: 1; }
.pxlegal-card {
  background: var(--bg-card); border: 1px solid var(--border-gold);
  border-radius: 14px; width: 100%; max-width: 720px;
  max-height: 92vh; display: flex; flex-direction: column;
  overflow: hidden;
}
.pxlegal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.06), transparent);
}
.pxlegal-header-no-close { justify-content: center; }
.pxlegal-title {
  margin: 0; color: #fff; font-size: 17px; font-weight: 700;
}
.pxlegal-close {
  background: transparent; border: none; color: #fff;
  font-size: 26px; line-height: 1; cursor: pointer;
  width: 32px; height: 32px; border-radius: 50%;
}
.pxlegal-close:hover { background: rgba(255,255,255,0.08); }
.pxlegal-body {
  flex: 1 1 auto; overflow-y: auto; padding: 16px 22px 18px;
  -webkit-overflow-scrolling: touch;
}
.pxlegal-content {
  color: var(--text-secondary); font-size: 14px; line-height: 1.6;
}
.pxlegal-content h2 {
  color: #fff; font-size: 15px; font-weight: 700;
  margin: 22px 0 8px; padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.pxlegal-content h2:first-child { border-top: none; padding-top: 0; margin-top: 0; }
.pxlegal-content p { margin: 0 0 10px; }
.pxlegal-content ul { margin: 0 0 12px; padding-left: 22px; }
.pxlegal-content li { margin-bottom: 4px; }
.pxlegal-content strong { color: #fff; }
.pxlegal-content em { color: var(--text-gold); font-style: italic; }
.pxlegal-effective {
  color: var(--text-gold); font-size: 12px; font-weight: 600;
  letter-spacing: 0.4px; text-transform: uppercase;
  margin: 0 0 14px;
}
.pxlegal-footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 12px 18px;
  border-top: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.2);
}
.pxlegal-footer-meta { color: var(--text-secondary); font-size: 12px; }
.pxlegal-footer-btn {
  padding: 8px 16px; border-radius: 8px; border: none;
  background: rgba(255,255,255,0.08); color: #fff;
  font-size: 13px; font-weight: 600; cursor: pointer;
}
.pxlegal-footer-btn:hover { background: rgba(255,255,255,0.14); }
.pxlegal-footer-btn-primary {
  background: var(--text-gold); color: #111;
}
.pxlegal-footer-btn-primary:hover { background: #B0B4BC; }
.pxlegal-footer-link {
  background: transparent; border: none; padding: 6px 4px;
  color: var(--text-gold); font-size: 13px; font-weight: 600;
  cursor: pointer; text-decoration: underline;
}
.pxlegal-footer-acceptance {
  flex-wrap: wrap; justify-content: flex-end;
}

/* Acceptance modal (one-time gate per Q3) */
.pxlegal-acceptance-card {
  max-width: 480px;
}

/* @media print — save-as-PDF friendly (Q4 lock) */
@media print {
  body * { visibility: hidden !important; }
  .pxlegal-overlay, .pxlegal-overlay * { visibility: visible !important; }
  .pxlegal-overlay {
    position: static !important; background: #fff !important;
    padding: 0 !important; display: block !important;
  }
  .pxlegal-card {
    max-width: none !important; max-height: none !important;
    border: none !important; border-radius: 0 !important;
    background: #fff !important; color: #000 !important;
  }
  .pxlegal-header, .pxlegal-footer { display: none !important; }
  .pxlegal-content,
  .pxlegal-content p,
  .pxlegal-content li,
  .pxlegal-content strong,
  .pxlegal-content em { color: #000 !important; }
  .pxlegal-content h2 { color: #000 !important; border-top-color: #ccc !important; }
  .pxlegal-body { overflow: visible !important; max-height: none !important; padding: 24px !important; }
}

/* ═══════════════════════════════════════════════════════════
   PHASE 7 · Multi-day shift scheduler (job posting wizard)
   ═══════════════════════════════════════════════════════════ */
.pj-days-stepper { display: flex; align-items: center; gap: 10px; }
.pj-days-stepper button {
  width: 36px; height: 36px;
  border-radius: 9px;
  border: 1.5px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: #B0B4BC;
  font-size: 20px; font-weight: 700; line-height: 1;
  cursor: pointer;
}
.pj-days-stepper button:hover:not(:disabled) { border-color: rgba(255,255,255,0.5); }
.pj-days-stepper button:disabled { opacity: 0.3; cursor: not-allowed; }
.pj-days-stepper .pj-days-count {
  min-width: 30px; text-align: center;
  font-size: 17px; font-weight: 800; color: #fff;
}
.pj-shift-list {
  border: 1.5px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  margin: 10px 0 4px;
  overflow: hidden;
}
.pj-shift-list-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 12px;
  background: rgba(255,255,255,0.02);
  font-size: 11px; font-weight: 800; letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #B0B4BC;
}
.pj-apply-all {
  background: none; border: none;
  color: #B0B4BC;
  font-size: 11px; font-weight: 700;
  text-transform: none; letter-spacing: 0;
  cursor: pointer; text-decoration: underline;
}
.pj-shift-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.pj-shift-day { display: flex; flex-direction: column; min-width: 92px; }
.pj-shift-day strong { font-size: 12px; color: #fff; }
.pj-shift-day span { font-size: 11px; color: rgba(255,255,255,0.5); }
.pj-shift-times { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.pj-shift-times .form-input { flex: 1; min-width: 0; margin: 0; }
.pj-shift-arrow { color: rgba(255,255,255,0.4); font-size: 13px; }
.pj-shift-hrs {
  min-width: 50px; text-align: right;
  font-size: 13px; font-weight: 700; color: #fff;
}
.pj-shift-hrs em {
  display: block; font-style: normal;
  font-size: 9px; font-weight: 700; letter-spacing: 0.5px;
  color: #B0B4BC;
}
.pj-shift-hrs.is-short { color: #e0524d; }
.pj-shift-total {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px;
  border-top: 1.5px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.06);
}
.pj-shift-total span {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.8px;
  color: rgba(255,255,255,0.6);
}
.pj-shift-total strong { font-size: 14px; font-weight: 800; color: #B0B4BC; }

/* PHASE 7 · per-day shift list (job-detail modal) */
.jc-shift-days {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  overflow: hidden;
}
.jc-shift-days li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 11px;
  font-size: 12px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.jc-shift-days li:first-child { border-top: none; }
.jc-shift-days li span { color: rgba(255,255,255,0.55); }
.jc-shift-days li strong { color: #fff; font-weight: 600; text-align: right; }

/* ════════════════════════════════════════════════════════════════
   #52y · screen-other-profile (dedicated ACTUAL profile view)
   ════════════════════════════════════════════════════════════════
   Most styling inherits from existing .profile-* / .ptab / .bstat /
   .badge-* / .cs-card-compact / .cp-empty classes used inside the
   cloned-then-stripped HTML in index.html. Only new rules below —
   for the back-button header (no analog in screen-profile since
   users navigate to own profile via bottom-nav). */
/* NAV-BACK — was position:sticky, broken by the screen-entry fadeIn:
   .screen.active > * (fill-mode both) permanently retains
   transform:translateY(0) on every screen child, which detaches sticky on
   iOS Safari and would containing-block a fixed child. animation:none
   exempts the header so the pill can pin to the REAL viewport —
   safe-area-anchored, immune to the auto-hiding chrome. */
#screen-other-profile .op-header {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  left: 12px;
  z-index: 11;              /* over content + top-bar (10); far below modals (9999) */
  animation: none;
  padding: 0;
}
#screen-other-profile .op-back-btn {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 8px 14px 8px 10px;   /* ≥40px tap target */
  background: rgba(16,16,20,0.82);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  color: #fff; cursor: pointer; font-family: inherit;
  font-size: 14px; font-weight: 500;
}
#screen-other-profile .op-back-btn:hover { color: var(--text-primary); }

/* ════════════════════════════════════════════════════════════════════
   PL-74 / PL-75 — Signup premium re-skin (The One + Cuadrix)
   ════════════════════════════════════════════════════════════════════
   PL-54 language: dark glass over --bg-elevated, hairline gold top
   edge, slim type, no emoji, mobile-first 380px. PURE VISUAL LAYER --
   does not touch any wizard IDs, names, onclicks, validation, or the
   signUp payload. Originally scoped to #reg-the-one (PL-74); PL-75
   widened the scope to :is(#reg-the-one, #reg-crew) so the Cuadrix
   single-step signup shares the same dark-glass card, inputs, consent
   row, action row, and armor against the legacy white registration
   block at style.css:16864-16883. :is() preserves specificity (its
   value = highest of its arguments = a single ID, 1-0-0), so the
   armor rules stay at (2-1-0) and the unscoped rules stay at (1-1-0).
   The Cuadrix flow has 1 step -- no stepind markup is emitted there
   (a single dot is meaningless chrome).
   ──────────────────────────────────────────────────────────────────── */
@keyframes pl74In { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Outer card shell per step. Base .reg-step (display:none) + .active
   (display:block) still drive visibility; we just dress the visible
   step as a PL-54 dark-glass card with a hairline gold top edge. */
:is(#reg-the-one, #reg-crew) .pl74-step-card {
  position: relative;
  border-radius: 16px;
  padding: 22px 18px 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012)),
    var(--bg-elevated, #14141b);
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.04);
  overflow: hidden;
}
:is(#reg-the-one, #reg-crew) .pl74-step-card::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7), transparent);
}
:is(#reg-the-one, #reg-crew) .reg-step.active.pl74-step-card {
  animation: pl74In 0.42s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

/* Slim 1-2-3 step indicator. Each step embeds its own (pending/active/
   done state baked into markup) so no JS coupling is needed. */
:is(#reg-the-one, #reg-crew) .pl74-stepind {
  display: flex; align-items: center; justify-content: center; gap: 0;
  margin: 0 0 18px;
}
:is(#reg-the-one, #reg-crew) .pl74-stepind-dot {
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700; letter-spacing: -0.2px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.45);
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
:is(#reg-the-one, #reg-crew) .pl74-stepind-dot.active {
  background: transparent;
  border-color: #FFFFFF;
  color: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.10);
}
:is(#reg-the-one, #reg-crew) .pl74-stepind-dot.done {
  background: #FFFFFF;
  border-color: #FFFFFF;
  color: #1a1000;
}
:is(#reg-the-one, #reg-crew) .pl74-stepind-line {
  width: 28px; height: 1px;
  background: rgba(255,255,255,0.10);
  margin: 0 6px;
  transition: background 0.25s ease;
}
:is(#reg-the-one, #reg-crew) .pl74-stepind-line.filled { background: #FFFFFF; }

/* Type hierarchy inside the wizard. Wins over the base .auth-title /
   .auth-sub via the ID-scoped selector. */
:is(#reg-the-one, #reg-crew) .auth-title {
  font-size: 20px; font-weight: 800; line-height: 1.2;
  color: #fff; letter-spacing: -0.4px; margin: 0 0 6px;
}
:is(#reg-the-one, #reg-crew) .auth-sub {
  font-size: 13px; line-height: 1.4;
  color: rgba(255,255,255,0.55); margin: 0 0 16px;
}

/* Quiet premium note -- PL-67 finance-note tone, reused (no shared
   class to avoid coupling; same visual recipe). */
:is(#reg-the-one, #reg-crew) .pl74-quiet-note {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-top: 1px solid #FFFFFF;
  color: rgba(255,255,255,0.62);
  font-size: 12px;
  line-height: 1.45;
  padding: 10px 14px;
  border-radius: 8px;
  margin: 0 0 16px;
}

/* Inputs on dark surfaces with gold focus ring. Overrides the global
   .form-input yellow-tinted focus inside the wizard only. */
:is(#reg-the-one, #reg-crew) .form-group { margin: 0 0 14px; }
:is(#reg-the-one, #reg-crew) .form-group label {
  display: block; margin: 0 0 6px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.2px;
  color: rgba(255,255,255,0.72);
}
:is(#reg-the-one, #reg-crew) .form-group .req { color: #FFFFFF; font-weight: 700; }
/* PL-74d: legacy registration rule at style.css:16864-16883 sets
   `background:#fff !important; color:#111 !important;
    -webkit-text-fill-color:#111 !important` across 14 selectors,
   highest at (1-1-0): `#page-register .form-input`, `#page-register
   .phone-code`, `#page-login .form-input` (plus 1-0-1 tag-only
   variants `#page-register input` / `#page-register select` /
   `#page-register textarea` and the all-class .rx-form variants).
   Continuation at 16897 (`#page-register .phone-input .phone-code`)
   is 1-2-0 but matches `.phone-code` (not `.phone-code-input`).
   PL-74c matched the !important flags and relied on PL-74's later
   cascade position to break the (1-1-0) tie -- which on prod did
   NOT win for unfocused inputs (focused inputs picked up our :focus
   rule at 1-1-1 and went dark). PL-74d lifts every PL-74 input
   selector to (2-1-0) by prefixing `#page-register` -- this beats
   every selector in the offender block decisively, regardless of
   bundle/build order. !important flags retained on the contested
   properties; select chevron background-image stays !important so
   the offender's `background: #fff !important` shorthand (which
   resets background-image to none !important) can't kill it. */
#page-register :is(#reg-the-one, #reg-crew) .form-input {
  width: 100%;
  background-color: rgba(255,255,255,0.025) !important;
  border: 1px solid rgba(255,255,255,0.10);
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  caret-color: #fff;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 14px; line-height: 1.3;
  transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
  -webkit-appearance: none; appearance: none;
}
#page-register :is(#reg-the-one, #reg-crew) .form-input::placeholder {
  color: rgba(255,255,255,0.30) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.30) !important;
}
#page-register :is(#reg-the-one, #reg-crew) .form-input:focus {
  border-color: #FFFFFF;
  background-color: rgba(255,255,255,0.04) !important;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.12);
  outline: none;
}
#page-register :is(#reg-the-one, #reg-crew) .form-input:disabled {
  color: rgba(255,255,255,0.35) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.35) !important;
  background-color: rgba(255,255,255,0.015) !important;
  cursor: not-allowed;
}
#page-register :is(#reg-the-one, #reg-crew) select.form-input {
  cursor: pointer;
  background-color: rgba(255,255,255,0.025) !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239FA5FF' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  padding-right: 36px;
}
:is(#reg-the-one, #reg-crew) .rx-note {
  margin: 6px 0 0;
  font-size: 11.5px; line-height: 1.4;
  color: rgba(255,255,255,0.45);
}

/* Phone-code input shares the wizard's input language */
:is(#reg-the-one, #reg-crew) .phone-input { display: flex; gap: 8px; }
#page-register :is(#reg-the-one, #reg-crew) .phone-code-input {
  flex: 0 0 90px;
  background-color: rgba(255,255,255,0.025) !important;
  border: 1px solid rgba(255,255,255,0.10);
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  caret-color: #fff;
  padding: 12px 12px;
  border-radius: 10px;
  font-size: 14px;
  text-align: center;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
#page-register :is(#reg-the-one, #reg-crew) .phone-code-input:focus {
  border-color: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.12);
  outline: none;
}

/* Consent rows -- premium card containers, gold-accented links. The
   inputs themselves stay #theOneTerms / #theOnePrivacy with their
   existing onchange="theOneConsentChange()" handlers, so the Create
   button gating logic is untouched. */
:is(#reg-the-one, #reg-crew) .pl74-consent {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 0 0 10px;
}
:is(#reg-the-one, #reg-crew) .pl74-consent .checkbox-label {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13px; line-height: 1.45;
  color: rgba(255,255,255,0.78); cursor: pointer;
}
:is(#reg-the-one, #reg-crew) .pl74-consent input[type="checkbox"] {
  margin-top: 2px;
  accent-color: #FFFFFF;
  flex: 0 0 auto;
  width: 16px; height: 16px;
}
:is(#reg-the-one, #reg-crew) .pl74-consent a {
  color: #FFFFFF;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.4);
  padding-bottom: 1px;
}
:is(#reg-the-one, #reg-crew) .pl74-consent a:hover { border-bottom-color: #FFFFFF; }
:is(#reg-the-one, #reg-crew) .pl74-consent .req { color: #FFFFFF; }

/* SIGNUP-1b — quiet "consent pending" dim on the Create button. Visual only:
   NO pointer-events change — the tap always works and routes to the loud
   consent toast in completeTheOneRegistration. */
#theOneCreateBtn.is-consent-pending {
  opacity: 0.55;
  filter: saturate(0.6);
  transition: opacity 0.2s ease;
}

/* Buttons -- restrained gold primary, quiet text Back. Scoped so other
   .btn-primary surfaces stay on their existing skin. */
:is(#reg-the-one, #reg-crew) .btn-primary {
  background: linear-gradient(180deg, #DCB456, var(--gold, #6366FF));
  color: #1a1000;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.2px;
  border: 0;
  border-radius: 10px;
  padding: 13px 18px;
  cursor: pointer;
  transition: filter 0.18s ease, box-shadow 0.18s ease;
  box-shadow: 0 4px 14px rgba(255,255,255,0.22), inset 0 1px 0 rgba(255,255,255,0.18);
}
:is(#reg-the-one, #reg-crew) .btn-primary:hover:not(:disabled) {
  filter: brightness(1.05);
  box-shadow: 0 6px 18px rgba(255,255,255,0.30), inset 0 1px 0 rgba(255,255,255,0.18);
}
:is(#reg-the-one, #reg-crew) .btn-primary:disabled {
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.32);
  box-shadow: none;
  cursor: not-allowed;
}
:is(#reg-the-one, #reg-crew) .btn-ghost {
  background: transparent;
  color: rgba(255,255,255,0.55);
  font-weight: 600;
  font-size: 13px;
  border: 0;
  padding: 13px 12px;
  cursor: pointer;
  transition: color 0.18s ease;
}
:is(#reg-the-one, #reg-crew) .btn-ghost:hover { color: rgba(255,255,255,0.88); }

/* Footer action row. Two-button form has Back as a narrow text button
   on the left + primary CTA spanning the rest. Single-button form
   (Step 1) lets the primary stretch full-width. */
:is(#reg-the-one, #reg-crew) .pl74-actions {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: center;
  margin-top: 6px;
}
:is(#reg-the-one, #reg-crew) .pl74-actions .btn-ghost { padding: 13px 0; text-align: left; }
:is(#reg-the-one, #reg-crew) .pl74-actions .btn-primary { width: 100%; }
:is(#reg-the-one, #reg-crew) .pl74-actions-single { display: block; }
:is(#reg-the-one, #reg-crew) .pl74-actions-single .btn-primary { width: 100%; }

:is(#reg-the-one, #reg-crew) .auth-switch {
  margin-top: 14px;
  font-size: 12.5px;
  color: rgba(255,255,255,0.55);
  text-align: center;
}
:is(#reg-the-one, #reg-crew) .auth-switch a {
  color: #FFFFFF;
  font-weight: 600;
  text-decoration: none;
}

/* Mobile-first guard: comfortable down to 380px width. */
@media (max-width: 380px) {
  :is(#reg-the-one, #reg-crew) .pl74-step-card { padding: 18px 14px 14px; }
  :is(#reg-the-one, #reg-crew) .auth-title { font-size: 18px; }
  :is(#reg-the-one, #reg-crew) .pl74-stepind-line { width: 20px; margin: 0 4px; }
  :is(#reg-the-one, #reg-crew) .phone-code-input { flex: 0 0 78px; padding: 12px 8px; }
}

/* PL-74b: Chrome/Safari autofill repaints inputs white/pale-blue, breaking
   the dark-glass language. The 1000px inset box-shadow trick masks the
   browser's autofill background; -webkit-text-fill-color keeps the text
   white; the 9999s transition holds the override against autofill's own
   delayed style swap. Scoped to :is(#reg-the-one, #reg-crew). */
:is(#reg-the-one, #reg-crew) .form-input:-webkit-autofill,
:is(#reg-the-one, #reg-crew) .form-input:-webkit-autofill:hover,
:is(#reg-the-one, #reg-crew) .form-input:-webkit-autofill:focus,
:is(#reg-the-one, #reg-crew) .phone-code-input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #15151c inset;
  -webkit-text-fill-color: #fff;
  caret-color: #fff;
  transition: background-color 9999s ease-out 0s;
}

/* ===== Landing — minimal elegant redesign ===== */
/* NOTE: scoped to #page-landing.active (not bare #page-landing) — an ID
   display:flex would out-specify .page.active{display:block}/.page{display:none}
   and keep the landing visible after login. */
#page-landing.active{background:#0A0A0A;color:#fff;min-height:100vh;display:flex;flex-direction:column;position:relative;overflow:hidden}
.tb-land-bg{position:absolute;inset:0;pointer-events:none}
.tb-glow{position:absolute;border-radius:50%;filter:blur(120px)}
.tb-glow-1{width:520px;height:520px;background:#C9A24B;opacity:.16;top:-170px;left:-120px}
.tb-glow-2{width:460px;height:460px;background:#2b6cff;opacity:.09;bottom:-190px;right:-120px}
.tb-land-nav{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:22px 28px}
.tb-land-logo{height:22px;width:auto;opacity:.95}
.tb-land-login-link{background:none;border:none;color:rgba(255,255,255,.72);font-size:15px;font-weight:500;cursor:pointer;padding:8px 4px;transition:color .2s}
.tb-land-login-link:hover{color:#fff}
.tb-land-hero{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px 28px 40px}
.tb-land-title{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif;font-size:clamp(42px,9vw,76px);line-height:1.02;font-weight:600;letter-spacing:-.03em;margin:0 0 22px}
.tb-land-sub{max-width:520px;font-size:clamp(16px,2.4vw,19px);line-height:1.5;color:rgba(255,255,255,.62);margin:0 0 40px}
.tb-land-eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#E8C879;background:rgba(201,162,75,.10);border:1px solid rgba(201,162,75,.30);border-radius:980px;padding:8px 16px;margin:0 0 24px}
.tb-eyebrow-dot{width:6px;height:6px;border-radius:50%;background:#E8C879;box-shadow:0 0 10px rgba(232,200,121,.85);animation:tbDotPulse 2.4s ease-in-out infinite}
@keyframes tbDotPulse{0%,100%{opacity:1;box-shadow:0 0 10px rgba(232,200,121,.85)}50%{opacity:.5;box-shadow:0 0 4px rgba(232,200,121,.35)}}
.tb-land-cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;align-items:center}
.tb-btn-primary{background:#fff;color:#0A0A0A;border:none;border-radius:980px;padding:15px 34px;font-size:16px;font-weight:600;letter-spacing:-.01em;cursor:pointer;transition:transform .15s,box-shadow .2s}
.tb-btn-primary:hover{transform:translateY(-1px);box-shadow:0 10px 30px rgba(255,255,255,.12)}
.tb-btn-ghost{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.06);color:#fff;border:1px solid rgba(255,255,255,.16);border-radius:980px;padding:14px 28px;font-size:16px;font-weight:500;cursor:pointer;transition:background .2s,border-color .2s}
.tb-btn-ghost:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28)}
.tb-btn-ghost svg{width:17px;height:17px}
.tb-land-foot{position:relative;z-index:2;text-align:center;padding:26px;display:flex;flex-direction:column;gap:4px}
.tb-foot-mark{font-size:13px;font-weight:600;letter-spacing:.22em;color:rgba(255,255,255,.5)}
.tb-foot-tag{font-size:12px;color:rgba(255,255,255,.32)}
/* sheets */
.tb-sheet-overlay{position:fixed;inset:0;z-index:9700;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);display:none;align-items:flex-end;justify-content:center}
.tb-sheet-overlay.show{display:flex;animation:tbFade .2s ease}
@keyframes tbFade{from{opacity:0}to{opacity:1}}
.tb-sheet{width:100%;max-width:440px;background:#141414;border:1px solid rgba(255,255,255,.08);border-radius:24px 24px 0 0;padding:28px 24px calc(24px + env(safe-area-inset-bottom));animation:tbUp .26s cubic-bezier(.2,.8,.2,1)}
@media(min-width:520px){.tb-sheet-overlay{align-items:center}.tb-sheet{border-radius:24px}}
@keyframes tbUp{from{transform:translateY(24px);opacity:.6}to{transform:translateY(0);opacity:1}}
.tb-sheet-title{font-size:21px;font-weight:600;letter-spacing:-.02em;margin:0 0 6px;color:#fff}
.tb-sheet-sub{font-size:14px;color:rgba(255,255,255,.55);margin:0 0 20px}
.tb-role-opt{display:flex;flex-direction:column;gap:3px;width:100%;text-align:left;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:16px 18px;margin-bottom:12px;cursor:pointer;transition:background .18s,border-color .18s}
.tb-role-opt:hover{background:rgba(255,255,255,.08);border-color:rgba(201,162,75,.5)}
.tb-role-name{font-size:16px;font-weight:600;color:#fff}
.tb-role-desc{font-size:13px;color:rgba(255,255,255,.5)}
.tb-sheet-cancel{width:100%;background:none;border:none;color:rgba(255,255,255,.55);font-size:15px;font-weight:500;padding:12px;margin-top:4px;cursor:pointer}

/* ===== Push opt-in encourage card (Ticket 3) — premium dark/gold ===== */
/* Reuses the landing sheet tokens (tbFade/tbUp keyframes, dark surface, gold
   #E8C879). Bottom-anchored slide-up on mobile; centered modal on desktop. */
.pxpush-overlay{position:fixed;inset:0;z-index:9650;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);display:flex;align-items:flex-end;justify-content:center;animation:tbFade .2s ease}
@media(min-width:520px){.pxpush-overlay{align-items:center}}
.pxpush-card{width:100%;max-width:440px;background:#141414;border:1px solid rgba(255,255,255,.08);border-radius:24px 24px 0 0;padding:30px 24px calc(26px + env(safe-area-inset-bottom));text-align:center;animation:tbUp .26s cubic-bezier(.2,.8,.2,1)}
@media(min-width:520px){.pxpush-card{border-radius:24px}}
.pxpush-bell{width:60px;height:60px;border-radius:50%;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;color:#E8C879;background:rgba(201,162,75,.10);border:1px solid rgba(201,162,75,.30)}
.pxpush-title{font-size:21px;font-weight:600;letter-spacing:-.02em;color:#fff;margin:0 0 8px}
.pxpush-sub{font-size:14px;line-height:1.5;color:rgba(255,255,255,.6);margin:0 auto 22px;max-width:320px}
.pxpush-enable{width:100%;background:#E8C879;color:#0A0A0A;border:none;border-radius:980px;padding:15px 24px;font-size:16px;font-weight:600;letter-spacing:-.01em;cursor:pointer;transition:transform .15s,box-shadow .2s}
.pxpush-enable:hover{transform:translateY(-1px);box-shadow:0 10px 30px rgba(232,200,121,.22)}
.pxpush-later{width:100%;background:none;border:none;color:rgba(255,255,255,.55);font-size:15px;font-weight:500;padding:12px;margin-top:6px;cursor:pointer;transition:color .2s}
.pxpush-later:hover{color:rgba(255,255,255,.85)}

/* ============================================================
   PL-57 · Desktop-adaptive display (v1 — Ship A)
   Applies ONLY at >=900px. Mobile + tablet (<900px) never match,
   so they are provably untouched. Drops the 430px phone-mockup
   chrome on laptop and widens to a clean full-height column.
   ============================================================ */
@media (min-width: 900px) {
  #app.page {
    background: var(--bg-base);
    padding: 0;
  }
  .phone-frame {
    max-width: 760px;
    width: 100%;
    height: 100dvh;   /* override the fixed mockup height from the 500px rule */
    margin: 0 auto;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }
}

/* ============================================================
   PL-57 · Desktop-adaptive display (v1 — Ship B)
   Sidebar shell at >=900px. Pure CSS, no DOM change: re-lays the
   3 existing .phone-frame children via CSS grid areas.
   Mobile + tablet (<900px) never match — provably untouched.
   ============================================================ */
@media (min-width: 900px) {
  .phone-frame {
    max-width: 1200px;
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas:
      "nav topbar"
      "nav content";
  }
  .bottom-nav {
    grid-area: nav;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 4px;
    height: 100%;
    padding: 18px 12px;
    border-top: none;
    border-right: 1px solid rgba(255,255,255,.07);
  }
  .bottom-nav .nav-item {
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 12px 14px;
    border-radius: 12px;
    text-align: left;
    font-size: 13px;   /* PL-57 tweak: 10px mobile label is too small in the 240px sidebar row */
  }
  .bottom-nav .nav-item.active { background: rgba(255,255,255,.06); }
  .top-bar { grid-area: topbar; }
  .screen-container { grid-area: content; }
  .screen { padding: 24px 32px 40px; }  /* drops the 96px bottom-nav clearance */

  /* PL-56 self-update banner is a base rule pinned at bottom:76px (clears the
     mobile bottom nav); reseat to 24px so it doesn't hang at an odd gap with
     no bottom bar on desktop. (.px-the-one-checklist needs no override — its
     76px is <=560px-scoped; its desktop base is already bottom:16px.) */
  .pl56-update { bottom: 24px; }
}

/* ============================================================
   PL-60 · Beacon Team (entity management) modal
   Premium dark glass + hairline gold. Renders inside the shared
   .px-rev-modal / .px-rev-card shell.
   ============================================================ */
.pxteam-section { margin-bottom: 18px; }
.pxteam-section-h {
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-muted); margin: 0 0 10px;
}
.pxteam-invite { display: flex; flex-direction: column; gap: 8px; }
.pxteam-input {
  width: 100%; box-sizing: border-box;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px; padding: 10px 12px; color: #fff; font-size: 14px;
}
.pxteam-input:focus { outline: none; border-color: rgba(232,200,121,0.55); }
.pxteam-input option { background: #1a1a1a; color: #fff; }
select.pxteam-input { color: #fff; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' stroke='%23E8C879' stroke-width='1.5' fill='none'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 34px; }
.pxteam-row {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  border: 1px solid rgba(255,255,255,0.08); border-radius: 10px;
  padding: 12px 14px; margin-bottom: 8px; background: rgba(255,255,255,0.02);
}
.pxteam-row-main { min-width: 0; flex: 1; }
.pxteam-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px; color: #0A0A0A;
  background: linear-gradient(135deg, #FFFFFF, #B0B4BC);
}
.pxteam-avatar-img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: rgba(255,255,255,0.06); }
.pxteam-status-waiting { background: rgba(250,204,21,0.14); color: #facc15; }
.pxteam-status-pending { background: rgba(251,146,60,0.16); color: #fb923c; }
.pxteam-dots {
  background: transparent; border: none; color: var(--text-secondary);
  font-size: 18px; line-height: 1; cursor: pointer; padding: 2px 6px; border-radius: 8px;
}
.pxteam-dots:hover { background: rgba(255,255,255,0.08); color: #fff; }
.pxteam-editform { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 10px; }
.pxteam-row-side { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; flex-shrink: 0; }
.pxteam-name  { font-weight: 700; font-size: 14px; color: #fff; overflow-wrap: anywhere; }
.pxteam-email { font-size: 12px; color: var(--text-secondary); margin-top: 2px; overflow-wrap: anywhere; }
.pxteam-title { font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.pxteam-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 4px; }
.pxteam-meta-txt { font-size: 12px; color: var(--text-secondary); overflow-wrap: anywhere; }
.pxteam-pill {
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}
/* PL-BEACON-WALLET P4 — quiet text-first spending-limit chip, own line under
   the meta row (flex-basis 100% forces the wrap; max-width clamps to content).
   Transparent border at rest so the hover hairline doesn't shift layout. */
.pxteam-limit-chip {
  flex-basis: 100%;
  max-width: fit-content;
  font-size: 11px;
  font-family: inherit;
  line-height: 1.3;
  color: rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.04);
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 3px 8px;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.pxteam-limit-chip:hover,
.pxteam-limit-chip:active {
  border-color: rgba(232,200,121,0.35);
  color: rgba(255,255,255,0.8);
}
.pxteam-limit-chip.is-nolimit { color: rgba(255,120,120,0.65); }
.pxteam-role           { background: rgba(232,200,121,0.14); color: #E8C879; border: 1px solid rgba(232,200,121,0.30); }
.pxteam-status-active  { background: rgba(52,211,153,0.16); color: #34d399; }
.pxteam-status-invited { background: rgba(232,200,121,0.12); color: #e3b341; }
.pxteam-status-other   { background: rgba(255,255,255,0.10); color: var(--text-secondary); }
.pxteam-remove { color: #f87171; border-color: rgba(248,113,113,0.35); }
/* PL-60 — compact, quiet member-row action buttons (Apple-grade). */
.pxteam-rowbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: auto; font-size: 12px; font-weight: 600; line-height: 1;
  padding: 5px 12px; min-height: 30px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12); background: transparent;
  color: var(--text-secondary); cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.pxteam-rowbtn:hover { background: rgba(255,255,255,0.06); }
.pxteam-rowbtn.pxteam-remove { color: #E5897F; border-color: rgba(229,137,127,0.25); }
.pxteam-rowbtn.pxteam-remove:hover { background: rgba(229,137,127,0.12); color: #f87171; }
.pxteam-or {
  text-align: center; font-size: 11px; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .06em; margin: 4px 0 2px;
}
.pxteam-linkout {
  margin-top: 10px; padding: 12px;
  border: 1px solid rgba(232,200,121,0.30); border-radius: 10px;
  background: rgba(232,200,121,0.06);
  display: flex; flex-direction: column; gap: 8px;
}
.pxteam-linkout-label {
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: #E8C879;
}
.pxteam-linkout-url {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
  color: #fff; word-break: break-all; user-select: all;
  background: rgba(0,0,0,0.25); border-radius: 8px; padding: 8px 10px;
}
.pxteam-linkout .btn-gold { align-self: flex-start; }

/* ─── PULSE-COMMENTS-1 — FB-style comment preview on feed cards ─────── */
.post-comments-preview:not(:empty) { padding: 0 16px 12px; }
.post-cprev-row { display: flex; align-items: flex-start; gap: 8px; padding: 3px 0; }
.post-cprev-row img {
  width: 24px; height: 24px; border-radius: var(--r-full);
  object-fit: cover; flex-shrink: 0;
}
.post-cprev-body {
  flex: 1; min-width: 0;
  font-size: 13px; line-height: 1.4; color: var(--text-secondary);
  overflow-wrap: break-word;
}
.post-cprev-body strong { color: var(--text-primary); font-weight: 600; margin-right: 5px; }
.post-cprev-all {
  background: none; border: none; padding: 6px 0 0;
  font: inherit; font-size: 13px; font-weight: 600;
  color: var(--text-muted); cursor: pointer;
}
.post-cprev-all:hover { color: var(--text-secondary); }

/* ─── GEO-2 — geofenced attendance (punch pill · list · roster overlay) ─── */
.geo-punch-row { display: flex; align-items: center; gap: 12px; margin: 4px 0 16px; }
.geo-pill {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 10px 20px;
  background: linear-gradient(180deg, rgba(28,28,38,0.92), rgba(18,18,26,0.9));
  border: 1px solid var(--border-gold);
  border-radius: var(--r-full);
  color: var(--text-primary); font-size: 14px; font-weight: 600;
  cursor: pointer; transition: border-color 0.2s, transform 0.1s;
}
.geo-pill:active { transform: scale(0.97); }
.geo-pill:disabled { opacity: 0.6; cursor: default; }
.geo-since { font-size: 12px; color: var(--text-secondary); }
.geo-adjust {
  background: none; border: none; margin-left: auto; padding: 8px;
  color: var(--text-muted); font-size: 12px; font-weight: 600; cursor: pointer;
}
.geo-att-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.geo-att-row:last-child { border-bottom: none; }
.geo-att-row.is-editable { cursor: pointer; }
.geo-att-av { width: 32px; height: 32px; border-radius: var(--r-full); object-fit: cover; flex-shrink: 0; }
.geo-att-info { flex: 1; min-width: 0; }
.geo-att-name {
  font-size: 13px; font-weight: 600; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.geo-att-edited { color: var(--text-muted); font-size: 11px; }
.geo-att-times { font-size: 12px; color: var(--text-secondary); }
/* UI-SWEEP-2b — sheet form + primary on the shared sheet language: the
   card's own 16px padding insets everything (was double-inset), and the
   primary is a full-width platinum pill above the full-width cancel. */
.geo-fence-form { display: flex; flex-direction: column; gap: 10px; padding: 4px 0; }
.geo-fence-hint { font-size: 11px; line-height: 1.45; color: var(--text-muted); }
.geo-fence-prev { min-height: 16px; font-size: 12px; color: var(--text-secondary); }
.geo-fence-prev.is-bad { color: #c87a7a; }
.geo-fence-lbl { display: flex; flex-direction: column; gap: 4px; flex: 1; font-size: 12px; color: var(--text-secondary); }
.geo-fence-save { display: block; width: 100%; margin: 10px 0 0; }
/* Roster overlay — today's column only */
.rost-cell.geo-cell-amber {
  background: rgba(251,191,36,0.10);
  box-shadow: inset 0 0 0 1px rgba(251,191,36,0.35);
}
.geo-chip {
  display: inline-block; font-size: 9px; font-weight: 700; letter-spacing: 0.03em;
  padding: 1px 5px; border-radius: var(--r-full); margin-top: 2px;
}
.geo-chip-off { color: #fbbf24; border: 1px solid rgba(251,191,36,0.5); }
.geo-chip-unr { color: #c4b5fd; border: 1px solid rgba(167,139,250,0.5); }
.geo-late { font-size: 10px; margin-left: 2px; }

/* ─── MP-2 — entity switcher + child creation ─── */
.pxam-entity {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 14px; margin: 0;
  background: rgba(255,255,255,0.03);
  border: none; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  cursor: pointer; text-align: left; font: inherit; color: var(--text-primary);
}
.pxam-entity:disabled { cursor: default; }
.mp2-ent-logo { width: 28px; height: 28px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.mp2-ent-mono {
  width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.08); border: 1px solid var(--border-md);
  font-size: 13px; font-weight: 700; color: var(--text-primary);
}
.mp2-ent-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mp2-ent-info strong {
  font-size: 13px; font-weight: 600; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mp2-ent-info em { font-style: normal; font-size: 11px; color: var(--text-muted); }
.pxam-ent-chev { color: var(--text-muted); display: flex; flex-shrink: 0; }
.mp2-ent-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 16px; background: none; border: none;
  cursor: pointer; text-align: left; font: inherit; color: var(--text-primary);
}
.mp2-ent-row.is-child { padding-left: 34px; }
.mp2-ent-row.is-current { background: rgba(255,255,255,0.04); }
.mp2-ent-tier { font-size: 11px; color: var(--text-muted); flex-shrink: 0; }
.mp2-ent-cur { color: var(--text-primary); font-size: 12px; flex-shrink: 0; }

/* ─── PHONE-GATE-1 — blocking mobile-capture sheet ─── */
#pxPhoneGate { z-index: 11000; }   /* GUARD-FIX-1 — same z-class bug: must sit ABOVE the 10010 sheet base, not below it */
.pxpg-card { border-top: 1px solid var(--border-gold); padding: 22px 20px 26px; }
.pxpg-eyebrow {
  font-size: 10px; font-weight: 800; letter-spacing: 2px;
  text-transform: uppercase; color: #E8C879; opacity: 0.85;
}
.pxpg-title { margin: 6px 0 4px; font-size: 19px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.2px; }
.pxpg-copy { margin: 0 0 14px; font-size: 13px; line-height: 1.5; color: var(--text-secondary); }
.pxpg-save { display: block; width: 100%; margin-top: 14px; }
.pxpg-signout {
  display: block; width: 100%; margin-top: 10px; padding: 8px;
  background: none; border: none; cursor: pointer;
  font-size: 12px; font-weight: 600; color: var(--text-muted);
}

/* ─── MP-6 — "Brands": HQ grid · wizard (identity chip retired by
   BRAND-CLARITY-1 — the #pxBrandBand is the sole identity signal) ─── */
.mp6-overlay {
  position: fixed; inset: 0; z-index: 2400;
  background: var(--bg-main, #0A0A0A);
  transform: translateX(100%); transition: transform 0.22s ease;
  overflow-y: auto; padding: 16px 16px calc(24px + env(safe-area-inset-bottom));
}
.mp6-overlay.show { transform: translateX(0); }
.mp6-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.mp6-head h2 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.3px; }
.mp6-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.mp6-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: 16px 14px; text-align: left;
  background: linear-gradient(180deg, rgba(22,22,32,0.95), rgba(16,16,24,0.9));
  border: 1px solid var(--border-silver); border-radius: 14px;
  cursor: pointer; font: inherit; color: var(--text-primary);
  transition: border-color 0.2s;
}
.mp6-card.is-current { border-color: var(--border-gold); }
.mp6-card strong {
  font-size: 14px; font-weight: 700; letter-spacing: -0.2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.mp6-card em { font-style: normal; font-size: 11px; color: var(--text-muted); }
.mp6-card-logo { width: 36px; height: 36px; border-radius: 9px; object-fit: cover; }
.mp6-card-mono {
  width: 36px; height: 36px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(232,200,121,0.12); border: 1px solid var(--border-gold);
  font-size: 17px; font-weight: 700; color: #E8C879;
}
.mp6-card-cur {
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: #E8C879;
}
.mp6-card.mp6-new { border-style: dashed; background: none; }
.mp6-new-mono { background: none; }
.mp6-new-row .mp2-ent-info strong { color: #E8C879; }
.mp6-eyebrow {
  font-size: 10px; font-weight: 800; letter-spacing: 2px;
  text-transform: uppercase; color: #E8C879; opacity: 0.85;
}
.mp6-wiz-title { margin: 6px 0 4px; font-size: 19px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.2px; }
.mp6-wiz-copy { margin: 0 0 12px; font-size: 13px; line-height: 1.5; color: var(--text-secondary); }
.mp6-wiz-card { padding: 22px 20px 26px; }

/* ─── NOTIF-NUDGE-2 — persistent quiet prompt ─── */
.px-nudge-banner {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 4px; padding: 9px 12px;
  border-bottom: 1px solid var(--border-gold);
  background: rgba(232,200,121,0.06);
  font-size: 12px; color: var(--text-secondary);
}
.px-nudge-banner span:first-child { flex: 1; min-width: 0; }
.px-nudge-banner-x {
  background: none; border: none; padding: 2px 6px;
  color: var(--text-muted); font-size: 16px; cursor: pointer;
}
.px-nudge-dot {
  position: absolute; top: 4px; right: 2px;
  width: 6px; height: 6px; border-radius: 50%;
  background: #E8C879; pointer-events: none;
}

/* ─── SIGNUP-V3 — Beacon-lite value points ─── */
.v3-points { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-direction: column; gap: 6px; }
.v3-points li { position: relative; padding-left: 18px; font-size: 13px; color: var(--text-secondary); line-height: 1.45; }
.v3-points li::before { content: '✓'; position: absolute; left: 0; color: #E8C879; font-weight: 800; }

/* ─── UNSAVED-GUARD-1 — dirty-dismiss confirm ─── */
/* GUARD-FIX-1 🔥 — the base .pxchat-action-sheet z-index is 10010; the old
   3200 override rendered the confirm BELOW its sibling sheet: the intercept
   killed the dismiss and the confirm was invisible ("Cancel does nothing").
   The confirm must beat every sheet incl. re-appended ones. */
#pxGuardSheet { z-index: 12000; }
/* CITY-GATE-1 / ESSENTIALS-GATE-1 — same blocking tier as the phone gate
   (above sheet base 10010, below the guard confirm 12000). */
#pxCityGate, #pxNatGate, #pxGenderGate, #pxPhotoGate { z-index: 11000; }

/* ─── OASIS-SOA-1 — attendance statement (Ops Oasis) + HR day nav ─── */
#opsAttSoa { margin: 14px 0 4px; }
.soa-att-head {
  font-size: 11px; font-weight: 600;
  letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--text-muted); margin: 16px 2px 6px;
}
.soa-att-row {
  display: flex; align-items: center; gap: 12px;
  min-height: 44px; padding: 8px 2px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.soa-att-row:last-child { border-bottom: none; }
.soa-att-av { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.soa-att-main { flex: 1; min-width: 0; }
.soa-att-name {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.soa-att-title { font-size: 11px; font-weight: 500; color: var(--text-muted); }
.soa-att-status { font-size: 12px; color: var(--text-secondary); margin-top: 1px; }
.soa-att-status.is-open { color: #E8C879; }
.soa-day { border-bottom: 1px solid rgba(255,255,255,0.06); }
.soa-day:last-child { border-bottom: none; }
.soa-day-head {
  display: flex; align-items: center; gap: 8px;
  width: 100%; min-height: 40px; padding: 6px 2px;
  background: none; border: none;
  color: var(--text-secondary); font: inherit; font-size: 13px;
  cursor: pointer; text-align: left;
}
.soa-day-lbl { flex: 1; }
.soa-day-count { font-size: 11px; color: var(--text-muted); }
.soa-day-chev { color: var(--text-muted); font-size: 14px; transition: transform 0.15s; }
.soa-day-head.is-open .soa-day-chev { transform: rotate(90deg); }
.soa-day-body { padding: 0 0 6px 10px; }
.hr-att-nav { display: flex; align-items: center; gap: 10px; }
.hr-att-nav button {
  width: 32px; height: 32px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 1px solid rgba(255,255,255,0.14); border-radius: 8px;
  color: var(--text-secondary); font-size: 16px; cursor: pointer;
}
.hr-att-nav button:disabled { opacity: 0.35; cursor: default; }
/* ATT-FIX-2 — quiet History link beside the punch pill */
.geo-hist-link {
  margin-left: auto; padding: 6px 4px;
  background: none; border: none;
  color: var(--text-muted); font: inherit; font-size: 12px; font-weight: 600;
  cursor: pointer;
}
.geo-hist-link:hover { color: var(--text-secondary); }
/* PG-BRIDGE-1 — roster badge (Playground alloc sheet) + section tag (grid) */
.pg-roster-badge { font-size: 10px; color: var(--text-muted); margin-top: 1px; }
.pg-roster-badge.is-off { color: #e3b341; }
.pg-sec-tag {
  display: inline-block; margin-top: 3px; padding: 1px 6px;
  border: 1px solid rgba(255,255,255,0.12); border-radius: 5px;
  font-size: 9px; font-weight: 600; letter-spacing: 0.2px;
  color: var(--text-secondary);
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* ATT-FIX-2 — CSV export custom-range row + member ops-context label */
.geo-exp-custom {
  display: flex; gap: 8px; align-items: center;
  padding: 12px 8px 4px;
  border-top: 1px solid rgba(255,255,255,0.06);
  margin-top: 6px;
}
.geo-exp-custom .form-input { flex: 1; min-width: 0; }
/* OPS-CTX-2 — .px-opsctx-label deleted with the per-surface chooser.
   Lesson logged: never ship a sheet reusing scoped classes (#pxHireForSheet
   .pxhf-*) outside their scope — that's how the unstyled giant-logo sheet
   happened. */
/* STAGE3-FIX-1 — the confirm rendered as a bottom sheet, colliding with the
   modal that spawned it (Stage-3 screenshot: overlapped the member list,
   half-off the card). Dead-center of the VIEWPORT now — the sheet is
   position:fixed inset:0 on document.body, so scroll position and spawning
   modal are irrelevant. Card gets full radius + a gentle rise-in. */
#pxGuardSheet { align-items: center; padding: 24px; }
#pxGuardSheet .pxchat-action-card {
  border-radius: 18px;
  border: 1px solid var(--border-gold);
  transform: translateY(14px);
}
#pxGuardSheet.show .pxchat-action-card { transform: translateY(0); }
.pxguard-mid {
  display: block; width: 100%; margin-top: 10px; padding: 12px;
  background: none; border: 1px solid var(--btn-hairline); border-radius: var(--r-full);
  font: inherit; font-size: 14px; font-weight: 600; color: var(--text-secondary); cursor: pointer;
}
.pxguard-discard {
  display: block; width: 100%; margin-top: 10px; padding: 12px;
  background: none; border: 1px solid rgba(224,122,95,0.5); border-radius: var(--r-full);
  font: inherit; font-size: 14px; font-weight: 600; color: #e07a5f; cursor: pointer;
}

/* ─── ADMIN-SIGNUPS-2 — month sections ─── */
.asg-month {
  display: flex; justify-content: space-between; align-items: center;
  width: 100%; padding: 10px 4px; margin-top: 4px;
  background: none; border: none; border-bottom: 1px solid var(--border);
  cursor: pointer; font: inherit;
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-secondary); text-align: left;
}
.asg-chev { display: inline-block; color: var(--text-muted); transition: transform 0.15s; }
.asg-chev.is-open { transform: rotate(90deg); }
.asg-month-body { padding-top: 10px; }

/* ─── MP-8 — family wallet ─── */
.mp8-fam-hint {
  margin-top: 6px; padding-top: 6px;
  border-top: 1px solid var(--border);
  font-size: 11px; font-weight: 600; color: var(--text-muted);
}
.mp8-fam-total { font-size: 13px; font-weight: 800; color: #E8C879; }
.mp8-fam-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 5px 0; border-bottom: 1px solid var(--border);
  font-size: 13px; color: var(--text-secondary);
}
.mp8-fam-row:last-child { border-bottom: none; }
.mp8-fam-row em { font-style: normal; font-size: 10px; color: var(--text-muted); }
.mp8-fam-row strong { color: var(--text-primary); font-weight: 600; }

/* MP-7b invite chips + HIRE-ACCESS-1 hire chips retired (STAGE3-FIX-1 +
   HIREFOR-1) — the chooser sheet below replaced the last consumer. */

/* ─── HIREFOR-1 — "Hiring for" chooser sheet + in-header label ─── */
#pxHireForSheet .pxhf-card {
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
}
#pxHireForSheet .pxhf-title {
  text-align: center; color: var(--text-secondary);
  font-size: 13px; padding: 6px 0 10px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
#pxHireForSheet .pxhf-list { max-height: 60vh; overflow-y: auto; }
#pxHireForSheet .pxhf-row {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 52px; padding: 8px 6px;
  background: none; border: none;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  color: #fff; font: inherit; cursor: pointer; text-align: left;
}
#pxHireForSheet .pxhf-row:last-child { border-bottom: none; }
#pxHireForSheet .pxhf-logo {
  width: 36px; height: 36px; border-radius: 8px;
  object-fit: cover; flex-shrink: 0;
}
#pxHireForSheet .pxhf-name {
  flex: 1; min-width: 0;
  font-size: 14px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#pxHireForSheet .pxhf-check { color: #E8C879; font-size: 14px; flex-shrink: 0; }
.pxhf-label {
  display: inline-flex; align-items: center; gap: 4px;
  max-width: 40%; padding: 6px 4px;
  background: none; border: none;
  color: rgba(255,255,255,0.55);
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
}
.pxhf-label-name {
  min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pxhf-label-chev { font-size: 9px; flex-shrink: 0; }

/* ═══ XUNI-UI-1 — X University Learning Library (pilot-gated) ═══ */
.xuni-card { display: block; width: 100%; text-align: left; background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 0; overflow: hidden;
  margin-bottom: 10px; cursor: pointer; font-family: inherit; color: var(--text-primary); }
.xuni-card-body { padding: 14px 16px; }
/* XUNI-UI-3 — legacy cover band (renders only when a row already has one) */
.xuni-cover { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #1a1c22; }
/* XUNI-TILE-1 — generated Spotify-style tile: deterministic dark duotone
   (title hash), eyebrow top-left, serif title bottom-left. Pure CSS. */
.xuni-tile { display: flex; flex-direction: column; justify-content: space-between;
  width: 100%; aspect-ratio: 16 / 9; padding: 12px 14px; box-sizing: border-box;
  text-align: left; overflow: hidden; }
.xuni-tile-eyebrow { font-size: 9px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: rgba(232,200,121,0.75); }
.xuni-tile-title { font-family: Georgia, 'Times New Roman', serif;
  font-size: 16px; line-height: 1.25; color: #f5f1e6;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* XUNI-ART-2 — mobile-first: single full-width column (fixes the
   half-width left-stuck card); two columns only when they fit comfortably. */
.xuni-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 10px; }
@media (min-width: 480px) { .xuni-grid { grid-template-columns: 1fr 1fr; } }
.xuni-grid .xuni-card { margin-bottom: 0; }
/* detail header band — same artwork, wider crop, larger title */
.xuni-hero { aspect-ratio: 21 / 9; border-radius: 14px; margin-bottom: 12px; }
.xuni-hero .xuni-tile-title { font-size: 22px; }
img.xuni-hero { display: block; width: 100%; object-fit: cover; }
.xuni-card-title { font-size: 15px; font-weight: 700; }
.xuni-card-desc { font-size: 12px; color: var(--text-secondary); margin-top: 3px; }
.xuni-card-meta { font-size: 11px; color: var(--text-muted); margin-top: 6px; }
.xuni-bar { height: 3px; border-radius: 2px; background: rgba(255,255,255,0.08); margin-top: 8px; overflow: hidden; }
.xuni-bar span { display: block; height: 100%; border-radius: 2px; background: #E8C879; }
.xuni-back { background: none; border: none; color: var(--text-secondary); font-size: 13px;
  font-family: inherit; cursor: pointer; padding: 2px 0 10px; }
.xuni-mod-title { font-size: 17px; font-weight: 800; color: var(--text-primary); margin-bottom: 2px; }
.xuni-mod-titlerow { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.xuni-setcover { flex-shrink: 0; background: none; border: 1px solid var(--btn-hairline); border-radius: 999px;
  color: var(--text-secondary); font-size: 11px; font-weight: 600; padding: 3px 10px;
  cursor: pointer; font-family: inherit; }
.xuni-up-lbl { display: block; font-size: 11px; color: var(--text-muted); margin: 2px 2px 4px; }
.xuni-lesson { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px;
  padding: 10px 12px; margin-top: 8px; cursor: pointer; font-family: inherit; color: var(--text-primary); }
.xuni-lesson-body { min-width: 0; flex: 1; }
.xuni-minitile { width: 64px; height: 40px; border-radius: 8px; object-fit: cover;
  flex-shrink: 0; display: inline-block; }
/* XUNI-ART-2 — optional per-video thumb + 2-line description clamp */
.xuni-thumb { width: 64px; height: 40px; border-radius: 8px; object-fit: cover;
  flex-shrink: 0; background: #1a1c22; }
.xuni-lesson-desc { font-size: 12px; color: var(--text-secondary); margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* XUNI-TILE-1 — episode rows: play glyph (default when no thumb) */
.xuni-play { width: 30px; height: 30px; flex-shrink: 0; display: inline-flex;
  align-items: center; justify-content: center; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.14); color: var(--text-secondary); }
.xuni-play svg { width: 14px; height: 14px; }
.xuni-lsn-bar { height: 2px; border-radius: 1px; background: rgba(255,255,255,0.10);
  margin-top: 6px; overflow: hidden; }
.xuni-lsn-bar span { display: block; height: 100%; background: #E8C879; }
.xuni-lesson .xuni-done { margin-left: auto; flex-shrink: 0; }
.xuni-lesson-title { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xuni-lesson-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.xuni-done { color: #E8C879; }
.xuni-player { position: fixed; inset: 0; z-index: 12000; background: rgba(0,0,0,0.88);
  display: flex; align-items: center; justify-content: center; padding: 16px; }
.xuni-player-card { width: 100%; max-width: 720px; background: #101216;
  border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 12px; position: relative; }
.xuni-player-card video { width: 100%; border-radius: 10px; background: #000; max-height: 70vh; display: block; }
.xuni-player-close { position: absolute; top: 4px; right: 10px; z-index: 1; background: none; border: none;
  color: #fff; font-size: 22px; cursor: pointer; line-height: 1; padding: 4px; }
.xuni-player-title { font-size: 13px; font-weight: 600; color: var(--text-primary); margin: 10px 2px 2px; }
.xuni-resume { position: absolute; top: 22px; left: 22px; font-size: 11px; font-weight: 600;
  color: #E8C879; background: rgba(0,0,0,0.55); border: 1px solid rgba(232,200,121,0.5);
  border-radius: 6px; padding: 3px 8px; }
.xuni-rev-head { font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: #cfd3d8;
  font-weight: 800; margin: 18px 2px 8px; border-bottom: 1px solid rgba(255,255,255,0.07); padding-bottom: 6px; }
.xuni-rev-row { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 8px 10px; margin-top: 8px; }
.xuni-rev-info { flex: 1; min-width: 0; text-align: left; background: none; border: none;
  cursor: pointer; font-family: inherit; color: var(--text-primary); padding: 0; }
.xuni-rev-actions { display: flex; gap: 8px; margin-top: 10px; }
.xuni-up-note { font-size: 12px; color: #e3b341; min-height: 16px; margin: 6px 2px; }
#xuniUpSheet .form-input { margin-bottom: 8px; }
/* XUNI-UI-2 — creator accreditation */
.xuni-creator-note { font-size: 12px; color: var(--text-muted); text-align: center; padding: 12px 0 2px; }
.xuni-apply-sub { font-size: 12.5px; color: var(--text-secondary); margin: 0 2px 10px; }
#xuniApplySheet .form-input { margin-bottom: 8px; }
.xuni-capp { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px; padding: 10px 12px; margin-top: 8px; }
.xuni-capp-head { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.xuni-capp-pitch { font-size: 12px; color: var(--text-secondary); margin: 6px 0 2px; white-space: pre-wrap; }
.xuni-capp-actions { display: flex; gap: 8px; margin-top: 8px; }
/* XUNI-UI-5 — byline, completion, auto-advance, god ⋯ */
.xuni-by { display: flex; align-items: center; gap: 6px; margin-top: 6px;
  font-size: 11px; color: var(--text-secondary); }
.xuni-byav { width: 16px; height: 16px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: #1a1c22; }
.xuni-byav-t { display: inline-flex; align-items: center; justify-content: center;
  font-size: 8.5px; font-weight: 800; color: #E8C879; border: 1px solid rgba(232,200,121,0.35); }
.xuni-by-role { color: var(--text-muted); }
.xuni-mchk { color: #E8C879; margin-left: 6px; font-weight: 700; }
.xuni-lesson-wrap { display: flex; gap: 6px; align-items: stretch; margin-top: 8px; }
.xuni-lesson-wrap .xuni-lesson { flex: 1; min-width: 0; margin-top: 0; }
.xuni-dots { flex-shrink: 0; width: 34px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03); color: var(--text-muted); font-size: 14px; letter-spacing: 1px;
  cursor: pointer; font-family: inherit; }
.xuni-upnext { margin-top: 10px; padding: 10px 12px; border: 1px solid rgba(232,200,121,0.35);
  border-radius: 12px; text-align: center; }
.xuni-upnext-t { font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: #E8C879; font-weight: 700; }
.xuni-upnext-title { font-size: 13px; font-weight: 600; color: var(--text-primary); margin: 3px 0 8px; }
.xuni-complete { position: fixed; inset: 0; z-index: 12500; background: rgba(5,7,12,0.92);
  backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 24px; }
.xuni-complete-card { width: 100%; max-width: 340px; text-align: center;
  background: #101216; border: 1px solid rgba(255,255,255,0.1); border-radius: 18px; padding: 32px 24px 22px; }
.xuni-complete-chk { display: block; margin: 0 auto 14px; }
.xuni-complete-title { font-size: 19px; font-weight: 800; color: var(--text-primary); }
.xuni-complete-sub { font-size: 12px; color: var(--text-secondary); margin: 6px 0 20px; }
/* PASSPORT-UNIFY-1 — the in-app preview hosts the white Passport document.
   PASSPORT-MARGIN-3 — preview spacing lives HERE, not on the node: node
   padding rides into the PDF capture and shifts the render flush-left. */
.pxpass-preview { background: #fff; color: #1a1a1a; font-family: Inter, Arial, sans-serif;
  border-radius: 12px; overflow: hidden; padding: 24px 28px; }

/* XUNI-UI-4 — module authoring */
.xuni-chip { display: inline-block; margin-left: 8px; padding: 1px 7px; vertical-align: middle;
  border: 1px solid rgba(232,200,121,0.35); border-radius: 999px;
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.2px; color: #E8C879; }
.xuni-managerow { display: flex; gap: 6px; flex-shrink: 0; }
.xuni-modq-head { display: flex; align-items: center; gap: 12px; min-width: 0; }

/* HQ-GROUP-1 — personal identity header + family-grouped Businesses */
.hq-identity { display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; margin-bottom: 14px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px; }
.hq-id-avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover;
  border: 2px solid rgba(232,200,121,0.45); flex-shrink: 0; }
.hq-id-body { min-width: 0; }
.hq-id-name { font-size: 17px; font-weight: 700; color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hq-id-sub { font-size: 12px; color: var(--text-secondary); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hq-biz-group { border-bottom: 1px solid rgba(255,255,255,0.06); }
.hq-biz-group:last-child { border-bottom: none; }
#hqBizGroups .pxhe-row { border-bottom: none; }
.hq-biz-child { padding-left: 14px; }
.hq-biz-role { flex-shrink: 0; font-size: 11px; color: var(--text-muted); }

/* XUNI-UP-FIX-1 — quiet module-context line in the add-lesson sheet */
.xuni-up-ctx { font-size: 12px; color: var(--text-secondary); margin: -4px 0 10px; }
/* XUNI-ECON-1 — live 80/20 transparency line under the price field */
.xuni-price-line { font-size: 11.5px; color: var(--text-secondary); margin: 4px 0 8px; line-height: 1.4; }

/* PROFILE-UNIFY-2 — own profile stacked sections (viewer shells reused).
   Bodies are the untouched #tab-* containers: always visible, section
   spacing from the shared .opsec language. Strip stays hidden in the DOM
   for the tab injectors. */
#screen-profile .profile-tabs[hidden] { display: none !important; }
#screen-profile .own-sec-body { display: block !important; margin-top: 0; }
#screen-profile .own-sec-head { margin-top: 26px; border-top: 1px solid rgba(255,255,255,0.07);
  padding-top: 14px; margin-bottom: 10px; }

/* XUNI-PLAYER-1 — Spotify mini card (body-appended, above the tab bar) */
.xuni-mini { position: fixed; left: 10px; right: 10px; bottom: 74px; z-index: 11500;
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  background: rgba(24,25,30,0.97); border: 1px solid rgba(232,200,121,0.35);
  border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,0.5); cursor: pointer; }
.xuni-mini-slot { width: 74px; flex-shrink: 0; border-radius: 8px; overflow: hidden; display: block; }
.xuni-mini-slot video { display: block; width: 100%; height: 44px; object-fit: cover; }
.xuni-mini-title { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xuni-mini-pp, .xuni-mini-x { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid rgba(255,255,255,0.16); color: var(--text-primary);
  font: inherit; cursor: pointer; }
.xuni-mini-x { font-size: 16px; line-height: 1; }
/* up-next end-card buttons + PiP glyph */
.xuni-upnext-back { display: block; width: 100%; margin-top: 8px; padding: 8px;
  background: none; border: none; color: var(--text-secondary); font: inherit;
  font-size: 12.5px; cursor: pointer; }
.xuni-pip { float: right; width: 28px; height: 28px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid rgba(255,255,255,0.16); color: var(--text-secondary);
  cursor: pointer; }
/* certificate sheet — gold family, no emoji */
.xuni-cert-card { max-width: 420px; }
.xuni-cert { border: 1px solid rgba(232,200,121,0.45); border-radius: 12px;
  padding: 26px 18px; text-align: center; margin-bottom: 12px;
  background: rgba(232,200,121,0.04); }
.xuni-cert-eyebrow { font-size: 9px; font-weight: 800; letter-spacing: 2.5px;
  text-transform: uppercase; color: #E8C879; }
.xuni-cert-head { font-family: Georgia, 'Times New Roman', serif; font-size: 15px;
  letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-secondary); margin-top: 14px; }
.xuni-cert-name { font-family: 'Playfair Display', Georgia, serif; font-size: 26px;
  font-weight: 700; color: var(--text-primary); margin-top: 14px; }
.xuni-cert-line { font-size: 12px; color: var(--text-muted); margin-top: 8px; }
.xuni-cert-module { font-family: Georgia, 'Times New Roman', serif; font-size: 17px;
  color: var(--text-primary); margin-top: 4px; }
.xuni-cert-meta { font-size: 12px; color: var(--text-secondary); margin-top: 12px; }
.xuni-cert-id { font-size: 10.5px; letter-spacing: 1px; color: var(--text-muted); margin-top: 14px; }

/* HIRE-ENTITY-1 — "Hiring for" door picker (ops-modal stack) */
.pxhe-card { max-width: 360px; }
.pxhe-title { margin: 0 0 2px; font-size: 17px; font-weight: 700; }
.pxhe-sub { margin: 0 0 10px; font-size: 12.5px; color: var(--text-secondary); }
.pxhe-row { display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 50px; padding: 8px 6px; background: none; border: none;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  color: var(--text-primary); font: inherit; cursor: pointer; text-align: left; }
.pxhe-row:last-child { border-bottom: none; }
.pxhe-logo { width: 28px; height: 28px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.pxhe-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pxhe-chev { color: var(--text-muted); font-size: 16px; flex-shrink: 0; }