/* ============================================================
   Work Together — Polish layer v3 (additive overlay)
   ------------------------------------------------------------
   Loads AFTER style.css and style-redesign-v2.css.
   Goal: push the product from "nice MVP" to "premium startup
   demo" without touching JS, HTML structure, or existing rules.

   This file ONLY refines visuals. It:
   - Does not rename/remove any class, ID, or JS hook.
   - Does not change layout grid breakpoints.
   - Does not introduce heavy libraries or images.
   - Plays nicely with the existing dark mode (data-theme=dark).

   To revert: remove the <link> tag in the 3 HTML files
   or delete this file. Nothing else changes.
   ============================================================ */


/* ---------- Tokens (extend, do not redefine core) ---------- */
:root {
  --polish-glass-bg: rgba(255, 255, 255, 0.78);
  --polish-glass-border: rgba(15, 23, 42, 0.06);
  --polish-card-shadow: 0 1px 0 rgba(15, 23, 42, 0.03), 0 12px 28px rgba(15, 23, 42, 0.05);
  --polish-card-shadow-hover: 0 1px 0 rgba(15, 23, 42, 0.04), 0 18px 40px rgba(15, 23, 42, 0.09);
  --polish-orange-shadow: 0 10px 24px rgba(255, 106, 26, 0.18);
  --polish-orange-glow: 0 0 0 4px rgba(255, 106, 26, 0.10);
  --polish-grid-line: rgba(15, 23, 42, 0.05);
  --polish-text-strong: #0F172A;
  --polish-text-body: #475569;
  --polish-text-muted: #64748B;
}

html[data-theme="dark"] {
  --polish-glass-bg: rgba(15, 23, 42, 0.66);
  --polish-glass-border: rgba(148, 163, 184, 0.12);
  --polish-card-shadow: 0 1px 0 rgba(255, 255, 255, 0.02), 0 14px 30px rgba(0, 0, 0, 0.32);
  --polish-card-shadow-hover: 0 1px 0 rgba(255, 255, 255, 0.03), 0 20px 44px rgba(0, 0, 0, 0.40);
  --polish-grid-line: rgba(148, 163, 184, 0.08);
  --polish-text-strong: #F1F5F9;
  --polish-text-body: #CBD5E1;
  --polish-text-muted: #94A3B8;
}


/* ---------- Body canvas — slightly more refined ---------- */
body {
  /* Calm down the older "warm bg patch" so the new tokens dominate */
  background:
    radial-gradient(circle at 6% -4%, rgba(255, 106, 26, 0.07), transparent 28%),
    radial-gradient(circle at 96% 2%, rgba(255, 167, 102, 0.05), transparent 24%),
    linear-gradient(180deg, #FFFFFF 0%, #FBFBFD 60%, #FFFFFF 100%);
  background-attachment: fixed;
}
html[data-theme="dark"] body {
  background:
    radial-gradient(circle at 8% -4%, rgba(255, 106, 26, 0.13), transparent 28%),
    radial-gradient(circle at 100% 0%, rgba(59, 130, 246, 0.08), transparent 28%),
    linear-gradient(180deg, #07111F 0%, #0B1220 50%, #0F172A 100%);
  background-attachment: fixed;
}

/* Soft ambient orbs from the older patch — keep them subtle */
body::before { opacity: .55; }
body::after  { opacity: .5; }
html[data-theme="dark"] body::before,
html[data-theme="dark"] body::after { opacity: .25; }


/* ---------- Topbar refinements ---------- */
.topbar {
  background: var(--polish-glass-bg);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--polish-glass-border);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02);
}
html[data-theme="dark"] .topbar {
  background: var(--polish-glass-bg);
  border-bottom-color: var(--polish-glass-border);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.02);
}

/* Brand mark gets a slightly softer gradient */
.brand-mark {
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.32), transparent 38%),
    linear-gradient(135deg, var(--orange) 0%, #FF8A4A 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 8px 18px rgba(255, 106, 26, 0.30);
}

/* Active nav pill gets a subtle gradient + dot */
.main-nav button.active {
  background: linear-gradient(180deg, var(--orange-soft) 0%, rgba(255, 106, 26, 0.06) 100%);
  color: var(--orange-dark);
  box-shadow: inset 0 0 0 1px rgba(255, 106, 26, 0.16);
}
html[data-theme="dark"] .main-nav button.active {
  background: linear-gradient(180deg, rgba(255, 106, 26, 0.18) 0%, rgba(255, 106, 26, 0.07) 100%);
  color: #FFB07A;
  box-shadow: inset 0 0 0 1px rgba(255, 106, 26, 0.28);
}

/* Tighten icon-style controls in the topbar */
.notification-button,
.theme-toggle,
.language-switch {
  box-shadow: var(--polish-card-shadow);
}
.theme-toggle:hover,
.notification-button:hover {
  box-shadow: var(--polish-card-shadow-hover);
}
html[data-theme="dark"] .notification-button,
html[data-theme="dark"] .theme-toggle {
  background: rgba(15, 23, 42, 0.85);
  border-color: rgba(148, 163, 184, 0.22);
  color: var(--ink-2);
}
.notification-button:hover .notification-bell-icon,
html[data-theme="dark"] .notification-button:hover { color: var(--orange-dark); }

/* Notification bell as pure CSS shape if not already drawn */
.notification-bell-icon {
  position: relative;
  display: inline-block;
  width: 16px;
  height: 18px;
}
.notification-bell-icon::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 2px;
  width: 12px;
  height: 12px;
  transform: translateX(-50%);
  border: 2px solid currentColor;
  border-radius: 8px 8px 4px 4px;
  border-bottom: 0;
}
.notification-bell-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 1px;
  width: 14px;
  height: 2px;
  transform: translateX(-50%);
  background: currentColor;
  border-radius: 2px;
  box-shadow: 0 3px 0 -1px currentColor;
}


/* ---------- Hero — more breathing room and depth ---------- */
.landing-hero {
  align-items: center;
  padding: 36px 0 16px;
}

/* Chip — slightly softer + cleaner alignment */
.landing-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px 5px 5px;
  border-radius: 999px;
  background: linear-gradient(180deg, #FFFFFF 0%, #FFF8F2 100%);
  border-color: var(--orange-soft-2);
  box-shadow: 0 6px 16px rgba(255, 106, 26, 0.10);
}
.chip-prefix {
  display: inline-grid;
  place-items: center;
  min-width: 28px;
  height: 22px;
  padding: 0 8px;
  background: linear-gradient(135deg, var(--orange) 0%, #FF8A4A 100%);
  color: #fff;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
html[data-theme="dark"] .landing-chip {
  background: rgba(255, 106, 26, 0.10);
  border-color: rgba(255, 106, 26, 0.30);
  color: #FFB07A;
}
html[data-theme="dark"] .chip-prefix {
  background: linear-gradient(135deg, var(--orange), #FFA876);
  color: #fff;
}

/* Headline — sharper rendering */
.hero-copy h1 {
  letter-spacing: -0.038em;
  line-height: 1.0;
  font-weight: 800;
  text-wrap: balance;
  color: var(--polish-text-strong);
}
.hero-copy h1 span {
  color: var(--orange);
}
html[data-theme="dark"] .hero-copy h1 { color: var(--ink); }
html[data-theme="dark"] .hero-copy h1 span {
  color: var(--orange);
}

.hero-copy .lead {
  color: var(--polish-text-body);
  text-wrap: pretty;
}

/* Single CTA — bigger emphasis */
.button.primary.large {
  padding: 14px 24px;
  font-size: 15px;
  border-radius: 13px;
  box-shadow: var(--polish-orange-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.button.primary.large:hover {
  box-shadow: 0 16px 32px rgba(255, 106, 26, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

/* Hero preview panel — refined glass card with subtle grid pattern */
.hero-product-preview {
  position: relative;
  border-radius: 24px;
  border: 1px solid var(--border-soft);
  background:
    linear-gradient(180deg, #FFFFFF 0%, #FBFCFE 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.60) inset,
    0 24px 60px rgba(15, 23, 42, 0.07),
    0 4px 12px rgba(15, 23, 42, 0.03);
  padding: 22px;
  isolation: isolate;
  overflow: hidden;
}
.hero-product-preview::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(var(--polish-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--polish-grid-line) 1px, transparent 1px);
  background-size: 28px 28px;
  background-position: -1px -1px;
  mask-image: radial-gradient(ellipse 70% 60% at 70% 0%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 70% 0%, #000 30%, transparent 75%);
  opacity: 0.85;
  pointer-events: none;
}
.hero-product-preview > * { position: relative; z-index: 1; }

html[data-theme="dark"] .hero-product-preview {
  background:
    linear-gradient(180deg, rgba(17, 24, 39, 0.82) 0%, rgba(15, 23, 42, 0.86) 100%);
  border-color: var(--border-soft);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 24px 60px rgba(0, 0, 0, 0.45);
}

/* Preview competition row stays as the existing 3-col grid; we only refine cards */
.preview-card {
  position: relative;
  min-height: 168px;
  border-radius: 18px;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.10);
}
.preview-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 12% 20%, rgba(255, 255, 255, 0.18), transparent 38%),
    radial-gradient(circle at 88% 80%, rgba(255, 255, 255, 0.12), transparent 36%);
  pointer-events: none;
}
.preview-card > * { position: relative; z-index: 1; }
.preview-card span {
  display: inline-flex;
  align-self: flex-start;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.20);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.preview-card strong {
  color: #fff;
  letter-spacing: -0.015em;
}
.preview-card small { color: rgba(255, 255, 255, 0.82); }

/* Preview panels (Teams looking / Activity feed) */
.preview-panel {
  position: relative;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid var(--border-soft);
  background: #fff;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
}
.activity-panel p {
  position: relative;
  margin: 10px 0 0;
  padding: 6px 0 6px 14px;
  border-left: 2px solid var(--orange-soft-2);
  color: var(--polish-text-body);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
}
.activity-panel p::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 11px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--orange);
  box-shadow: 0 0 0 3px rgba(255, 106, 26, 0.18);
}
.activity-panel p b {
  color: var(--polish-text-strong);
  font-weight: 700;
}
html[data-theme="dark"] .activity-panel p { color: var(--body); }
html[data-theme="dark"] .activity-panel p b { color: var(--ink); }
html[data-theme="dark"] .activity-panel p::before {
  background: #FFB07A;
  box-shadow: 0 0 0 3px rgba(255, 106, 26, 0.20);
}

/* Team preview line — small status pill polish */
.team-preview-line em {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #ECFDF5;
  color: #047857;
  font-size: 11.5px;
  font-style: normal;
  font-weight: 700;
}
.team-preview-line em::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #10B981;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.20);
}
html[data-theme="dark"] .team-preview-line em {
  background: rgba(16, 185, 129, 0.16);
  color: #6EE7B7;
}
html[data-theme="dark"] .team-preview-line em::before {
  background: #6EE7B7;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.22);
}


/* ---------- Stats strip — refined separators + hover glow ---------- */
.landing-stats-strip {
  margin-top: 36px;
  border: 1px solid var(--border-soft);
  background:
    radial-gradient(circle at 0% 50%, rgba(255, 106, 26, 0.04), transparent 26%),
    linear-gradient(180deg, #FFFFFF 0%, #FFFAF3 100%);
  border-radius: 22px;
  box-shadow: var(--polish-card-shadow);
  padding: 6px;
  gap: 0;
  overflow: hidden;
}
.landing-stat {
  position: relative;
  border-radius: 16px;
  border-right: 1px solid rgba(255, 211, 168, 0.55);
  transition: background-color .18s ease, transform .18s ease;
}
.landing-stat:last-child { border-right: 0; }
.landing-stat::before {
  content: "";
  position: absolute;
  inset: auto 12px 6px 12px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 106, 26, 0), transparent);
  opacity: 0;
  transition: opacity .18s ease, background .18s ease;
}
.landing-stat:hover::before {
  opacity: 1;
  background: linear-gradient(90deg, transparent, rgba(255, 106, 26, 0.45), transparent);
}
.landing-stat strong {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
html[data-theme="dark"] .landing-stat strong {
  color: var(--ink);
}
html[data-theme="dark"] .landing-stats-strip {
  background:
    radial-gradient(circle at 0% 50%, rgba(255, 106, 26, 0.08), transparent 26%),
    linear-gradient(180deg, rgba(17, 24, 39, 0.86) 0%, rgba(15, 23, 42, 0.92) 100%);
}
html[data-theme="dark"] .landing-stat {
  border-right-color: rgba(255, 106, 26, 0.18);
}


/* ---------- Feature cards (What you can do) ---------- */
.landing-feature-grid { gap: 16px; }
.feature-card {
  position: relative;
  padding: 24px;
  border-radius: 20px;
  border: 1px solid var(--border-soft);
  background:
    linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%);
  box-shadow: var(--polish-card-shadow);
  overflow: hidden;
}
.feature-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--polish-card-shadow-hover);
  border-color: var(--orange-soft-2);
}
html[data-theme="dark"] .feature-card {
  background: linear-gradient(180deg, rgba(17, 24, 39, 0.78) 0%, rgba(15, 23, 42, 0.82) 100%);
}

.feature-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.95), transparent 30%),
    linear-gradient(135deg, #FFF1E6 0%, #FFFFFF 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 106, 26, 0.18),
    0 10px 22px rgba(255, 106, 26, 0.12);
}
html[data-theme="dark"] .feature-icon {
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.14), transparent 26%),
    linear-gradient(135deg, rgba(255, 106, 26, 0.20), rgba(15, 23, 42, 0.92));
  box-shadow:
    inset 0 0 0 1px rgba(255, 106, 26, 0.30),
    0 10px 22px rgba(0, 0, 0, 0.30);
}

/* Feature card CTA buttons — equal width, no auto arrow */
.feature-card .button.secondary {
  width: 100%;
  min-height: 44px;
  justify-self: stretch;
  align-self: end;
  padding: 10px 14px;
  text-align: center;
}
.feature-card .button.secondary::after,
.feature-card:hover .button.secondary::after {
  content: none;
  display: none;
  transform: none;
}


/* ---------- How it works — connect the steps ---------- */
.how-it-works {
  border: 1px solid var(--border-soft);
  border-radius: 22px;
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 106, 26, 0.04), transparent 28%),
    linear-gradient(180deg, #FFFFFF 0%, #FFFCF8 100%);
  box-shadow: var(--polish-card-shadow);
  padding: 32px;
}
html[data-theme="dark"] .how-it-works {
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 106, 26, 0.10), transparent 28%),
    linear-gradient(180deg, rgba(17, 24, 39, 0.78) 0%, rgba(15, 23, 42, 0.86) 100%);
}
.how-grid {
  position: relative;
  gap: 16px;
}
.how-grid article {
  position: relative;
  padding: 24px;
  border-radius: 18px;
  border: 1px solid var(--border-soft);
  background: #fff;
  box-shadow: var(--polish-card-shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.how-grid article:hover {
  transform: translateY(-2px);
  box-shadow: var(--polish-card-shadow-hover);
  border-color: var(--orange-soft-2);
}
html[data-theme="dark"] .how-grid article {
  background: rgba(17, 24, 39, 0.82);
}
.how-grid article > span {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: linear-gradient(180deg, var(--orange-soft) 0%, #FFE7D4 100%);
  color: var(--orange-dark);
  border: 1px solid var(--orange-soft-2);
  font-weight: 800;
  font-size: 16px;
  box-shadow: 0 6px 14px rgba(255, 106, 26, 0.10);
}
html[data-theme="dark"] .how-grid article > span {
  background: linear-gradient(180deg, rgba(255, 106, 26, 0.20) 0%, rgba(255, 106, 26, 0.10) 100%);
  color: #FFB07A;
  border-color: rgba(255, 106, 26, 0.32);
}

/* Subtle connector line between cards on wide screens */
@media (min-width: 760px) {
  .how-grid::before {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    top: 44px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 106, 26, 0.20) 20%, rgba(255, 106, 26, 0.20) 80%, transparent);
    z-index: 0;
    pointer-events: none;
  }
  .how-grid article { z-index: 1; }
}
html[data-theme="dark"] .how-grid::before {
  background: linear-gradient(90deg, transparent, rgba(255, 106, 26, 0.30) 20%, rgba(255, 106, 26, 0.30) 80%, transparent);
}


/* ---------- Organizer CTA — premium gradient + soft pattern ---------- */
.organizer-cta {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #0F172A 0%, #1A2236 50%, #2A1B0E 100%);
  border-radius: 24px;
  padding: 40px;
  border: 0;
  box-shadow: 0 24px 50px rgba(15, 23, 42, 0.20);
}
.organizer-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 88% 8%, rgba(255, 106, 26, 0.32), transparent 36%),
    radial-gradient(circle at 4% 94%, rgba(255, 167, 102, 0.20), transparent 36%);
  pointer-events: none;
}
.organizer-cta::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse 60% 60% at 100% 0%, #000 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 100% 0%, #000 20%, transparent 70%);
  pointer-events: none;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  background-color: transparent !important;
}
.organizer-cta > * { position: relative; z-index: 1; }
.organizer-cta h2 {
  color: #fff;
  letter-spacing: -0.025em;
}
.organizer-cta .eyebrow { color: #FFB07A; }
.organizer-cta p:not(.eyebrow) {
  color: #CBD5E1;
  font-weight: 500;
  line-height: 1.6;
}
.organizer-cta .button.primary {
  box-shadow: 0 14px 32px rgba(255, 106, 26, 0.35);
}


/* ---------- Testimonials — quote mark + softer card ---------- */
.testimonial-card {
  position: relative;
  padding: 24px;
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  box-shadow: var(--polish-card-shadow);
  background: #fff;
  overflow: hidden;
}
.testimonial-card::before {
  content: "“";
  position: absolute;
  top: -12px;
  left: 14px;
  font-family: Georgia, "Times New Roman", serif;
  color: var(--orange);
  opacity: 0.18;
  font-size: 96px;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}
.testimonial-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--polish-card-shadow-hover);
  border-color: var(--orange-soft-2);
}
.testimonial-card p {
  position: relative;
  margin: 12px 0 14px;
  font-weight: 500;
  color: var(--polish-text-body);
  line-height: 1.6;
}
.rating-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.rating-dots i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--orange);
  box-shadow: 0 0 0 1px rgba(255, 106, 26, 0.18);
}
html[data-theme="dark"] .testimonial-card {
  background: rgba(17, 24, 39, 0.82);
}
html[data-theme="dark"] .testimonial-card::before {
  color: #FFB07A;
  opacity: 0.22;
}


/* ---------- Footer ---------- */
.landing-footer {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
  margin-top: 56px;
  padding: 36px 32px;
  border: 1px solid var(--border-soft);
  border-radius: 24px;
  background: linear-gradient(180deg, #FFFFFF 0%, #FBFCFE 100%);
  box-shadow: var(--polish-card-shadow);
}
.landing-footer .brand small { display: block; }
.landing-footer > div { gap: 10px; }
.landing-footer strong {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--polish-text-muted);
  font-weight: 700;
}
.landing-footer button {
  text-align: left;
  color: var(--polish-text-body);
  font-weight: 500;
  font-size: 14px;
  padding: 4px 0;
  transition: color .14s ease, transform .14s ease;
}
.landing-footer button:hover {
  color: var(--orange-dark);
  transform: translateX(2px);
}
.landing-footer p {
  color: var(--polish-text-muted);
  font-weight: 500;
  font-size: 13.5px;
  line-height: 1.6;
}
html[data-theme="dark"] .landing-footer {
  background: linear-gradient(180deg, rgba(17, 24, 39, 0.78) 0%, rgba(15, 23, 42, 0.86) 100%);
}


/* ---------- Section title row ---------- */
.section-title-row { margin-bottom: 24px; }
.section-title-row h1 {
  letter-spacing: -0.025em;
  line-height: 1.1;
  font-weight: 800;
  color: var(--polish-text-strong);
}
.section-title-row h2 {
  font-weight: 800;
  letter-spacing: -0.022em;
  color: var(--polish-text-strong);
}
.section-title-row p.muted { margin-top: 8px; }

/* Generic heading colors that adapt across themes (override hardcoded #111827) */
.how-it-works h2,
.landing-testimonials h2,
.landing-section h2 {
  color: var(--polish-text-strong);
  letter-spacing: -0.022em;
  font-weight: 800;
}
html[data-theme="dark"] .how-it-works h2,
html[data-theme="dark"] .landing-testimonials h2,
html[data-theme="dark"] .landing-section h2,
html[data-theme="dark"] .section-title-row h1,
html[data-theme="dark"] .section-title-row h2 { color: var(--ink); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--orange-soft);
  border: 1px solid var(--orange-soft-2);
  color: var(--orange-dark);
  font-size: 10.5px;
  font-weight: 800;
}
.eyebrow + h1, .eyebrow + h2 { margin-top: 14px; }
html[data-theme="dark"] .eyebrow {
  background: rgba(255, 106, 26, 0.14);
  border-color: rgba(255, 106, 26, 0.28);
  color: #FFB07A;
}
/* Light-context eyebrows on dark panels */
.auth-info-panel .eyebrow,
.organizer-cta .eyebrow {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.16);
  color: #FFB07A;
}


/* ---------- Filter shells — cleaner separation ---------- */
.competition-filter-shell,
.team-filter-shell,
.member-filter-shell {
  margin-bottom: 18px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid var(--border-soft);
  background: linear-gradient(180deg, #FFFFFF 0%, #FBFCFE 100%);
  box-shadow: var(--polish-card-shadow);
}
html[data-theme="dark"] .competition-filter-shell,
html[data-theme="dark"] .team-filter-shell,
html[data-theme="dark"] .member-filter-shell {
  background: linear-gradient(180deg, rgba(17, 24, 39, 0.80) 0%, rgba(15, 23, 42, 0.88) 100%);
}
.filter-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 10px;
}
.filter-search-field {
  flex: 1 1 320px;
  min-width: 0;
}
.filter-search-field span,
.filter-sort-field span { display: none; }
.filter-search-field input {
  width: 100%;
  height: 44px;
  padding: 0 14px 0 38px;
  background:
    linear-gradient(180deg, #FFFFFF 0%, #FCFCFE 100%) padding-box;
  position: relative;
}
.filter-search-field {
  position: relative;
}
.filter-search-field::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border: 2px solid var(--polish-text-muted);
  border-radius: 999px;
  pointer-events: none;
  z-index: 1;
}
.filter-search-field::after {
  content: "";
  position: absolute;
  left: 24px;
  top: 50%;
  width: 6px;
  height: 2px;
  margin-top: 2px;
  background: var(--polish-text-muted);
  border-radius: 2px;
  transform: rotate(45deg);
  pointer-events: none;
  z-index: 1;
}
html[data-theme="dark"] .filter-search-field input {
  background: rgba(15, 23, 42, 0.86);
}

.filter-sort-field {
  flex: 0 0 auto;
}
.filter-sort-field select {
  height: 44px;
  padding-right: 30px;
}
.filter-toggle {
  height: 44px;
  font-weight: 700;
}

/* Active filters strip */
.active-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 4px 2px;
}
.active-filter-chip {
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--orange-soft);
  border: 1px solid var(--orange-soft-2);
  color: var(--orange-dark);
  font-size: 12px;
  font-weight: 700;
}


/* ---------- Item cards (competitions, teams, members) ---------- */
.item-card {
  border-radius: 18px;
  border: 1px solid var(--border-soft);
  background: #FFFFFF;
  box-shadow: var(--polish-card-shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.item-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--polish-card-shadow-hover);
  border-color: var(--orange-soft-2);
}
html[data-theme="dark"] .item-card {
  background: rgba(17, 24, 39, 0.86);
}

.item-title {
  font-weight: 800;
  letter-spacing: -0.012em;
  color: var(--polish-text-strong);
}
.item-meta {
  font-weight: 500;
  color: var(--polish-text-body);
  line-height: 1.5;
}

/* Score pill — slightly more refined */
.score-pill {
  background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%);
  border-radius: 14px;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.20);
  position: relative;
  isolation: isolate;
}
.score-pill::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255, 106, 26, 0.18), transparent 40%);
  pointer-events: none;
}
.score-pill strong { letter-spacing: -0.02em; }
html[data-theme="dark"] .score-pill {
  background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.40);
}


/* ---------- Competition card poster polish ---------- */
.competition-poster {
  border-bottom: 1px solid var(--border-soft);
  background:
    radial-gradient(circle at 22% 18%, rgba(255, 106, 26, 0.18), transparent 32%),
    radial-gradient(circle at 78% 86%, rgba(255, 167, 102, 0.10), transparent 32%),
    linear-gradient(135deg, #FFF7ED 0%, #F8FAFC 60%, #EEF2FF 100%);
}
.competition-poster.has-image:hover .poster-placeholder {
  background: rgba(15, 23, 42, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.poster-placeholder span {
  background: rgba(255, 255, 255, 0.94);
  border-color: var(--orange-soft-2);
  color: var(--orange-dark);
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}
html[data-theme="dark"] .competition-poster {
  background:
    radial-gradient(circle at 22% 18%, rgba(255, 106, 26, 0.18), transparent 30%),
    radial-gradient(circle at 78% 86%, rgba(59, 130, 246, 0.12), transparent 32%),
    linear-gradient(135deg, #1E293B 0%, #0F172A 100%);
  border-bottom-color: rgba(148, 163, 184, 0.16);
}
html[data-theme="dark"] .poster-placeholder span {
  background: rgba(255, 106, 26, 0.18);
  border-color: rgba(255, 106, 26, 0.32);
  color: #FFB07A;
}
html[data-theme="dark"] .poster-placeholder strong { color: var(--ink); }
html[data-theme="dark"] .poster-placeholder small { color: var(--muted); }


/* ---------- Tags & status badges ---------- */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid var(--orange-soft-2);
  background: var(--orange-soft);
  color: var(--orange-dark);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.005em;
}
.tag.gray {
  border-color: var(--border-soft);
  background: var(--soft);
  color: #475569;
}
html[data-theme="dark"] .tag {
  background: rgba(255, 106, 26, 0.13);
  border-color: rgba(255, 106, 26, 0.28);
  color: #FFB07A;
}
html[data-theme="dark"] .tag.gray {
  background: rgba(148, 163, 184, 0.12);
  border-color: rgba(148, 163, 184, 0.20);
  color: var(--body);
}

.mini-chip {
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: #fff;
  color: var(--polish-text-body);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.005em;
}
html[data-theme="dark"] .mini-chip {
  background: rgba(15, 23, 42, 0.6);
  border-color: rgba(148, 163, 184, 0.20);
  color: var(--body);
}

/* Status badges with leading dot */
.status-badge,
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: capitalize;
  letter-spacing: 0.005em;
}
.status-badge::before,
.status-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.65;
}
.status-draft { background: var(--soft); color: #475569; }
.status-pending { background: #FEF3C7; color: #92400E; }
.status-approved { background: #DCFCE7; color: #166534; }
.status-rejected { background: #FEE2E2; color: #991B1B; }
.status-open { background: #DBEAFE; color: #1D4ED8; }


/* ---------- Card actions row — refined buttons ---------- */
.card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.card-actions .button {
  flex: 1 1 auto;
  min-height: 40px;
  padding: 9px 12px;
  font-size: 13px;
  justify-content: center;
}


/* ---------- Discovery shells (find team / find members) ---------- */
.discovery-shell {
  border-radius: 22px;
  border: 1px solid var(--border-soft);
  background:
    radial-gradient(circle at top right, rgba(255, 106, 26, 0.06), transparent 28%),
    linear-gradient(180deg, #FFFFFF 0%, #FFFDFA 100%);
  box-shadow: var(--polish-card-shadow);
}
.discovery-shell:hover {
  transform: translateY(-3px);
  box-shadow: var(--polish-card-shadow-hover);
  border-color: var(--orange-soft-2);
}
html[data-theme="dark"] .discovery-shell {
  background:
    radial-gradient(circle at top right, rgba(255, 106, 26, 0.10), transparent 28%),
    linear-gradient(180deg, rgba(17, 24, 39, 0.86) 0%, rgba(15, 23, 42, 0.92) 100%);
}

.discovery-summary-panel {
  background: linear-gradient(180deg, #FBFCFE 0%, #F7F9FC 100%);
  border-color: var(--border-soft);
}
html[data-theme="dark"] .discovery-summary-panel {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.5) 0%, rgba(15, 23, 42, 0.7) 100%);
  border-color: var(--border-soft);
}


/* ---------- Profile / dashboard cards ---------- */
.content-card,
.dashboard-feature-card,
.dashboard-profile-card,
.dashboard-activity-card,
.saved-items-card,
.dashboard-create-team-card {
  border-radius: 18px;
  border: 1px solid var(--border-soft);
  box-shadow: var(--polish-card-shadow);
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
.content-card:hover,
.dashboard-feature-card:hover,
.dashboard-profile-card:hover,
.dashboard-activity-card:hover {
  border-color: var(--orange-soft-2);
}
.content-card h3 {
  font-size: 16px;
  letter-spacing: -0.012em;
  color: var(--polish-text-strong);
  font-weight: 800;
}

/* Profile identity card */
.profile-identity-card {
  position: relative;
  padding: 24px;
  border-radius: 22px;
  border: 1px solid var(--border-soft);
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 106, 26, 0.06), transparent 30%),
    linear-gradient(180deg, #FFFFFF 0%, #FFFCF8 100%);
  box-shadow: var(--polish-card-shadow);
  overflow: hidden;
}
.profile-identity-card::before {
  content: "";
  position: absolute;
  right: -50px;
  top: -50px;
  width: 180px;
  height: 180px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 106, 26, 0.10), transparent 70%);
  pointer-events: none;
}
html[data-theme="dark"] .profile-identity-card {
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 106, 26, 0.12), transparent 30%),
    linear-gradient(180deg, rgba(17, 24, 39, 0.88) 0%, rgba(15, 23, 42, 0.92) 100%);
}

/* Social links — slightly more energetic but still professional */
.social-link-pill {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  border: 1px solid var(--border-soft);
  background: linear-gradient(180deg, #FFFFFF 0%, #FBFCFE 100%);
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.05);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, color .18s ease;
}
.social-link-pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(255, 106, 26, 0.16);
  border-color: var(--orange-soft-2);
}
html[data-theme="dark"] .social-link-pill {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.86) 0%, rgba(17, 24, 39, 0.92) 100%);
  border-color: var(--border-soft);
  color: var(--ink-2);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.30);
}
html[data-theme="dark"] .social-link-pill:hover {
  border-color: rgba(255, 106, 26, 0.42);
  box-shadow: 0 14px 28px rgba(255, 106, 26, 0.20);
}

/* Activity metric tiles (dashboard) */
.activity-metric {
  position: relative;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid var(--orange-soft-2);
  background: linear-gradient(180deg, #FFFFFF 0%, #FFF8F0 100%);
  box-shadow: var(--polish-card-shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.activity-metric:hover {
  transform: translateY(-2px);
  box-shadow: var(--polish-card-shadow-hover);
  border-color: rgba(255, 106, 26, 0.42);
}
.activity-metric strong {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--polish-text-strong);
  font-variant-numeric: tabular-nums;
}
.activity-metric p {
  font-size: 12px;
  font-weight: 600;
  color: var(--polish-text-body);
  margin: 2px 0 0;
  line-height: 1.4;
}
.activity-metric small {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--orange-dark);
  letter-spacing: 0.01em;
}
html[data-theme="dark"] .activity-metric {
  background: linear-gradient(180deg, rgba(255, 106, 26, 0.10) 0%, rgba(15, 23, 42, 0.86) 100%);
  border-color: rgba(255, 106, 26, 0.28);
}
html[data-theme="dark"] .activity-metric strong { color: var(--ink); }
html[data-theme="dark"] .activity-metric p { color: var(--body); }
html[data-theme="dark"] .activity-metric small { color: #FFB07A; }


/* ---------- Empty states — more inviting ---------- */
.empty-state {
  position: relative;
  padding: 44px 28px 36px;
  border: 1px dashed rgba(148, 163, 184, 0.40);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 106, 26, 0.06), transparent 40%),
    var(--canvas);
  color: var(--polish-text-muted);
  font-weight: 600;
  text-align: center;
  font-size: 14px;
  line-height: 1.6;
}
.empty-state strong {
  display: block;
  margin-bottom: 6px;
  color: var(--polish-text-strong);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.01em;
}
/* Decorative icon: clean orange-soft tile with a centered SVG glyph (search) */
.empty-state::before {
  content: "";
  display: block;
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  border-radius: 16px;
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.85), transparent 38%),
    linear-gradient(135deg, var(--orange-soft) 0%, #FFE3D1 100%);
  border: 1px solid var(--orange-soft-2);
  box-shadow:
    inset 0 0 0 1px rgba(255, 106, 26, 0.10),
    0 8px 18px rgba(255, 106, 26, 0.10);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C2410C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='6.5'/><line x1='15.7' y1='15.7' x2='20' y2='20'/></svg>"),
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.85), transparent 38%),
    linear-gradient(135deg, var(--orange-soft) 0%, #FFE3D1 100%);
  background-size: 26px 26px, 100% 100%, 100% 100%;
  background-position: center, 0 0, 0 0;
  background-repeat: no-repeat;
}
.empty-state.compact {
  padding: 22px 18px 18px;
  font-size: 13.5px;
}
.empty-state.compact::before {
  width: 40px;
  height: 40px;
  margin-bottom: 10px;
  background-size: 18px 18px, 100% 100%, 100% 100%;
}
html[data-theme="dark"] .empty-state {
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 106, 26, 0.08), transparent 40%),
    rgba(15, 23, 42, 0.62);
  border-color: rgba(148, 163, 184, 0.22);
  color: var(--muted);
}
html[data-theme="dark"] .empty-state strong { color: var(--ink); }
html[data-theme="dark"] .empty-state::before {
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFB07A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='6.5'/><line x1='15.7' y1='15.7' x2='20' y2='20'/></svg>"),
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.18), transparent 38%),
    linear-gradient(135deg, rgba(255, 106, 26, 0.20) 0%, rgba(15, 23, 42, 0.60) 100%);
  border-color: rgba(255, 106, 26, 0.30);
}


/* ---------- Tabs (used in Requests) ---------- */
.tabs {
  gap: 8px;
}
.tabs button {
  padding: 9px 14px;
  border-radius: 11px;
  border: 1px solid var(--border-soft);
  background: #fff;
  color: var(--polish-text-body);
  font-weight: 700;
  font-size: 13.5px;
  transition: background-color .14s ease, color .14s ease, border-color .14s ease, transform .14s ease;
}
.tabs button:hover {
  background: var(--orange-soft);
  color: var(--orange-dark);
  border-color: var(--orange-soft-2);
}
.tabs button.active {
  background: linear-gradient(180deg, var(--orange-soft) 0%, rgba(255, 106, 26, 0.06) 100%);
  color: var(--orange-dark);
  border-color: var(--orange-soft-2);
  box-shadow: inset 0 0 0 1px rgba(255, 106, 26, 0.16);
}
html[data-theme="dark"] .tabs button {
  background: rgba(15, 23, 42, 0.86);
  border-color: var(--border-soft);
  color: var(--body);
}


/* ---------- Section block (generic content section) ---------- */
.section-block {
  padding: 28px;
  border-radius: 22px;
  border: 1px solid var(--border-soft);
  background: #fff;
  box-shadow: var(--polish-card-shadow);
}
html[data-theme="dark"] .section-block {
  background: rgba(17, 24, 39, 0.84);
}


/* ---------- List rows / saved rows / request rows ---------- */
.list-row,
.saved-row,
.request-row {
  border-radius: 14px;
  border: 1px solid var(--border-soft);
  background: #fff;
  padding: 14px;
  transition: border-color .14s ease, box-shadow .14s ease;
}
.list-row:hover,
.saved-row:hover,
.request-row:hover {
  border-color: var(--orange-soft-2);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.05);
}
html[data-theme="dark"] .list-row,
html[data-theme="dark"] .saved-row,
html[data-theme="dark"] .request-row {
  background: rgba(17, 24, 39, 0.84);
}


/* ---------- Modals ---------- */
.modal-overlay {
  background: rgba(15, 23, 42, 0.58);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
}
.modal-card {
  border-radius: 22px;
  border: 1px solid var(--border-soft);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 30px 70px rgba(15, 23, 42, 0.20);
  padding: 26px;
  background: #fff;
}
html[data-theme="dark"] .modal-card {
  background: rgba(17, 24, 39, 0.96);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 30px 70px rgba(0, 0, 0, 0.50);
}
.modal-header {
  border-bottom-color: var(--border-soft);
  padding-bottom: 16px;
}
.modal-header h2 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.018em;
  color: var(--polish-text-strong);
}
html[data-theme="dark"] .modal-header h2 { color: var(--ink); }


/* ---------- Toast ---------- */
.toast {
  background: var(--ink);
  color: #fff;
  border-radius: 14px;
  font-weight: 600;
  font-size: 14px;
  padding: 12px 18px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.30);
}
html[data-theme="dark"] .toast {
  background: #F8FAFC;
  color: #0F172A;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.50);
}


/* ---------- Forms / inputs ---------- */
input, select, textarea {
  border-radius: 11px;
  border: 1px solid var(--border);
  font-weight: 500;
  font-size: 14px;
  padding: 11px 13px;
  background: #fff;
  transition: border-color .14s ease, box-shadow .14s ease, background-color .14s ease;
}
input:hover, select:hover, textarea:hover {
  border-color: rgba(148, 163, 184, 0.55);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 4px rgba(255, 106, 26, 0.14);
}
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background: rgba(15, 23, 42, 0.86);
  border-color: rgba(148, 163, 184, 0.24);
  color: var(--ink-2);
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: #64748B; }


/* ---------- Auth / Login polish ---------- */
.auth-shell {
  min-height: 100vh;
  grid-template-columns: 0.95fr 1.05fr;
}
.auth-info-panel {
  position: relative;
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 106, 26, 0.32), transparent 38%),
    radial-gradient(circle at 0% 100%, rgba(59, 130, 246, 0.10), transparent 40%),
    linear-gradient(135deg, #0F172A 0%, #1A2236 70%);
  padding: 48px 40px;
  overflow: hidden;
}
.auth-info-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse 60% 60% at 80% 0%, #000 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 80% 0%, #000 20%, transparent 70%);
  pointer-events: none;
}
.auth-info-panel > * { position: relative; z-index: 1; }

.auth-info-panel .brand-mark {
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.32), transparent 38%),
    linear-gradient(135deg, var(--orange) 0%, #FF8A4A 100%);
  box-shadow: 0 10px 22px rgba(255, 106, 26, 0.36);
}
.auth-info-panel h1 {
  font-size: clamp(32px, 4vw, 48px);
  letter-spacing: -0.025em;
  font-weight: 800;
  color: #fff;
  text-wrap: balance;
}
.auth-info-panel p {
  color: rgba(255, 255, 255, 0.78);
  font-weight: 500;
  line-height: 1.6;
}

.auth-note-grid div {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 14px;
  padding: 14px 16px;
  transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}
.auth-note-grid div:hover {
  border-color: rgba(255, 106, 26, 0.30);
  background: rgba(255, 106, 26, 0.08);
  transform: translateY(-1px);
}
.auth-note-grid strong { color: #fff; font-weight: 800; }
.auth-note-grid span {
  color: rgba(255, 255, 255, 0.70);
  font-size: 13px;
  font-weight: 500;
}

.auth-form-panel {
  position: relative;
  display: grid;
  place-items: center;
  padding: 36px 28px;
}
.auth-card-redesign {
  width: min(520px, 100%);
  border-radius: 22px;
  border: 1px solid var(--border-soft);
  box-shadow: var(--polish-card-shadow-hover);
  padding: 28px;
  background: #FFFFFF;
}
html[data-theme="dark"] .auth-card-redesign {
  background: rgba(17, 24, 39, 0.92);
  border-color: var(--border-soft);
}

.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 4px;
  border-radius: 13px;
  background: var(--soft);
  border: 1px solid var(--border-soft);
}
.auth-tabs button {
  padding: 11px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  font-weight: 700;
  font-size: 14px;
  color: var(--polish-text-body);
  transition: background-color .14s ease, color .14s ease, box-shadow .14s ease;
}
.auth-tabs button.active {
  background: #fff;
  color: var(--polish-text-strong);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04), 0 6px 14px rgba(15, 23, 42, 0.06);
}
html[data-theme="dark"] .auth-tabs {
  background: rgba(15, 23, 42, 0.78);
  border-color: var(--border-soft);
}
html[data-theme="dark"] .auth-tabs button.active {
  background: rgba(255, 106, 26, 0.16);
  color: #FFB07A;
  box-shadow: inset 0 0 0 1px rgba(255, 106, 26, 0.30);
}

.role-select-box {
  margin-top: 18px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid var(--border-soft);
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 106, 26, 0.05), transparent 30%),
    linear-gradient(180deg, #FFFFFF 0%, #FFFAF6 100%);
}
.role-select-head .field-help { font-weight: 800; font-size: 12px; }
.role-select-head small {
  display: block;
  margin-top: 4px;
  color: var(--polish-text-muted);
  font-size: 12px;
  font-weight: 500;
}
.role-grid {
  margin-top: 12px;
  gap: 10px;
}
.role-grid button {
  padding: 14px;
  border-radius: 13px;
  border: 1px solid var(--border-soft);
  background: #fff;
  text-align: left;
  transition: transform .14s ease, border-color .14s ease, background-color .14s ease, box-shadow .14s ease;
}
.role-grid button:hover {
  transform: translateY(-1px);
  border-color: var(--orange-soft-2);
  background: var(--orange-soft);
}
.role-grid button.active {
  border-color: var(--orange);
  background: linear-gradient(180deg, var(--orange-soft) 0%, #FFF7ED 100%);
  color: var(--orange-dark);
  box-shadow: 0 8px 20px rgba(255, 106, 26, 0.14), inset 0 0 0 1px rgba(255, 106, 26, 0.20);
}
.role-grid button strong { display: block; font-weight: 800; font-size: 14px; }
.role-grid button small {
  display: block;
  margin-top: 4px;
  color: var(--polish-text-muted);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.45;
}
html[data-theme="dark"] .role-select-box {
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 106, 26, 0.08), transparent 30%),
    linear-gradient(180deg, rgba(17, 24, 39, 0.78) 0%, rgba(15, 23, 42, 0.86) 100%);
}
html[data-theme="dark"] .role-grid button {
  background: rgba(15, 23, 42, 0.86);
  color: var(--ink-2);
}
html[data-theme="dark"] .role-grid button small { color: var(--muted); }

/* Demo grid — looks more like quick action chips */
.demo-grid button {
  padding: 11px 12px;
  border-radius: 11px;
  border: 1px solid var(--border-soft);
  background: #fff;
  font-weight: 700;
  font-size: 13px;
  color: var(--polish-text-body);
  transition: background-color .14s ease, color .14s ease, border-color .14s ease;
}
.demo-grid button:hover {
  background: var(--orange-soft);
  border-color: var(--orange-soft-2);
  color: var(--orange-dark);
}
html[data-theme="dark"] .demo-grid button {
  background: rgba(15, 23, 42, 0.86);
  color: var(--body);
  border-color: var(--border-soft);
}

.divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 16px;
  color: var(--polish-text-muted);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.divider::before, .divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
}
html[data-theme="dark"] .divider::before,
html[data-theme="dark"] .divider::after {
  background: linear-gradient(90deg, transparent, var(--border-soft), transparent);
}

.message {
  padding: 11px 14px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 13.5px;
  border: 1px solid transparent;
}
.message.error { background: #FEF2F2; color: #991B1B; border-color: #FECACA; }
.message.success { background: #DCFCE7; color: #166534; border-color: #BBF7D0; }
.message.info { background: var(--orange-soft); color: var(--orange-dark); border-color: var(--orange-soft-2); }
html[data-theme="dark"] .message.error { background: rgba(239, 68, 68, 0.14); color: #FCA5A5; border-color: rgba(248, 113, 113, 0.30); }
html[data-theme="dark"] .message.success { background: rgba(16, 185, 129, 0.14); color: #6EE7B7; border-color: rgba(16, 185, 129, 0.30); }
html[data-theme="dark"] .message.info { background: rgba(255, 106, 26, 0.14); color: #FFB07A; border-color: rgba(255, 106, 26, 0.30); }


/* ---------- Onboarding ---------- */
.onboarding-shell {
  width: min(1140px, calc(100% - 32px));
  margin: 36px auto;
  gap: 28px;
}
.onboarding-side {
  position: relative;
  padding: 28px;
  border-radius: 22px;
  border: 1px solid var(--border-soft);
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 106, 26, 0.08), transparent 30%),
    linear-gradient(180deg, #FFFFFF 0%, #FFFAF6 100%);
  box-shadow: var(--polish-card-shadow);
  overflow: hidden;
}
.onboarding-side::before {
  content: "";
  position: absolute;
  right: -40px;
  bottom: -40px;
  width: 180px;
  height: 180px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 106, 26, 0.10), transparent 70%);
  pointer-events: none;
}
.onboarding-side h1 {
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 800;
  letter-spacing: -0.025em;
  margin-bottom: 8px;
}
.onboarding-side p {
  color: var(--polish-text-body);
  font-weight: 500;
  line-height: 1.6;
}
html[data-theme="dark"] .onboarding-side {
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 106, 26, 0.14), transparent 30%),
    linear-gradient(180deg, rgba(17, 24, 39, 0.84) 0%, rgba(15, 23, 42, 0.92) 100%);
}

/* Progress dots — refined steppers */
.progress-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 22px;
}
.progress-dot {
  height: 8px;
  border-radius: 999px;
  background: var(--border);
  transition: background-color .14s ease, transform .14s ease;
}
.progress-dot.done { background: var(--orange); }
.progress-dot.active {
  background: linear-gradient(90deg, var(--orange) 0%, #FF8A4A 100%);
  box-shadow: 0 0 0 3px rgba(255, 106, 26, 0.16);
  transform: scaleY(1.2);
}

.choice-button {
  padding: 12px;
  border-radius: 11px;
  border: 1px solid var(--border-soft);
  background: #fff;
  font-weight: 700;
  font-size: 13.5px;
  color: var(--polish-text-strong);
  transition: background-color .14s ease, border-color .14s ease, color .14s ease, transform .14s ease;
}
.choice-button:hover {
  border-color: var(--orange-soft-2);
  background: var(--orange-soft);
  color: var(--orange-dark);
  transform: translateY(-1px);
}
.choice-button.active {
  border-color: var(--orange);
  background: linear-gradient(180deg, var(--orange-soft) 0%, #FFF7ED 100%);
  color: var(--orange-dark);
  box-shadow: inset 0 0 0 1px rgba(255, 106, 26, 0.20);
}
html[data-theme="dark"] .choice-button {
  background: rgba(15, 23, 42, 0.86);
  color: var(--ink-2);
}
html[data-theme="dark"] .choice-button:hover {
  background: rgba(255, 106, 26, 0.10);
  border-color: rgba(255, 106, 26, 0.30);
  color: #FFB07A;
}


/* ---------- Dashboard appearance card (theme mode) ---------- */
.dashboard-appearance-card {
  padding: 22px 24px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 90% 0%, rgba(255, 106, 26, 0.16), transparent 40%),
    linear-gradient(180deg, #FFFFFF 0%, #FFFAF6 100%);
  border: 1px solid var(--orange-soft-2);
  box-shadow: var(--polish-card-shadow);
  overflow: hidden;
}
html[data-theme="dark"] .dashboard-appearance-card {
  background:
    radial-gradient(circle at 90% 0%, rgba(255, 106, 26, 0.20), transparent 40%),
    linear-gradient(180deg, rgba(30, 41, 59, 0.96) 0%, rgba(17, 24, 39, 0.96) 100%);
  border-color: rgba(255, 106, 26, 0.28);
}


/* ---------- Mobile menu / nav (open state) ---------- */
@media (max-width: 1050px) {
  .main-nav.open,
  .auth-actions.open {
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
  }
  html[data-theme="dark"] .main-nav.open,
  html[data-theme="dark"] .auth-actions.open {
    background: rgba(17, 24, 39, 0.96);
  }
}


/* ---------- Reduce motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .feature-card:hover,
  .item-card:hover,
  .discovery-shell:hover,
  .testimonial-card:hover,
  .how-grid article:hover,
  .role-grid button:hover,
  .choice-button:hover,
  .activity-metric:hover,
  .auth-note-grid div:hover {
    transform: none !important;
  }
  .feature-card .button.secondary::after,
  .feature-card:hover .button.secondary::after { transform: none !important; }
  .landing-footer button:hover { transform: none !important; }
}


/* ---------- Final small polish bits ---------- */

/* Sharper border for select dropdowns in dark mode */
html[data-theme="dark"] select {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  appearance: none;
  -webkit-appearance: none;
  padding-right: 32px;
}

/* Tag rows — never wrap as a wall of text */
.tag-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
}

/* Make multiline competition descriptions a touch nicer */
.competition-description-preview {
  color: var(--polish-text-body);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.55;
}
html[data-theme="dark"] .competition-description-preview { color: var(--body); }

/* Dashboard title row icon — already styled, just refine */
.dashboard-title-icon {
  border-radius: 10px;
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.95), transparent 40%),
    linear-gradient(135deg, var(--orange-soft), #FFFFFF);
  box-shadow: inset 0 0 0 1px rgba(255, 106, 26, 0.18);
}
html[data-theme="dark"] .dashboard-title-icon {
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.18), transparent 40%),
    linear-gradient(135deg, rgba(255, 106, 26, 0.20), rgba(15, 23, 42, 0.86));
  box-shadow: inset 0 0 0 1px rgba(255, 106, 26, 0.32);
}

/* Avoid double-shadow on hovered buttons that were already glowing */
.button.primary:hover { box-shadow: 0 14px 30px rgba(255, 106, 26, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.18); }

/* Visually balance the simple-header on Onboarding page */
.simple-header {
  background: var(--polish-glass-bg);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--polish-glass-border);
}

/* Make sure card-grid stays consistent at all breakpoints */
.card-grid { gap: 16px; }

/* Slightly tighter modal body */
.modal-body { padding: 18px 0; }
.modal-footer { gap: 10px; padding-top: 16px; border-top-color: var(--border-soft); }


/* ---------- Print fallback (for safety) ---------- */
@media print {
  .topbar, .auth-actions, .main-nav, .modal-overlay { display: none !important; }
  body { background: #fff !important; }
  .item-card, .feature-card, .preview-card { box-shadow: none !important; break-inside: avoid; }
}

/* ---------- end Polish layer v3 ---------- */

/* Phase 8M: saved items now live as a real dashboard hub */
.saved-dashboard-card {
  scroll-margin-top: 96px;
}
.saved-dashboard-heading {
  align-items: flex-start;
  gap: 16px;
}
.saved-total-pill {
  border: 1px solid rgba(255, 110, 32, 0.45);
  background: rgba(255, 110, 32, 0.14);
  color: #ffb17a;
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 700;
  white-space: nowrap;
}
.saved-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}
.saved-dashboard-column {
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 18px;
  background: rgba(15, 23, 42, 0.38);
  padding: 14px;
  min-height: 140px;
}
.saved-column-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.saved-column-title h4 {
  margin: 0;
  color: var(--text);
  font-size: 1rem;
}
.saved-column-title span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  color: var(--muted);
  font-weight: 700;
}
.saved-dashboard-list {
  display: grid;
  gap: 10px;
}
.saved-dashboard-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 16px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.03);
}
.saved-dashboard-row strong {
  display: block;
  color: var(--text);
  line-height: 1.2;
}
.saved-dashboard-row p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: .88rem;
}
.saved-member-info {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.saved-row-actions {
  justify-content: flex-end;
}
.profile-saved-redirect-card .button {
  margin-top: 14px;
}
@media (max-width: 1024px) {
  .saved-dashboard-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .saved-dashboard-row { grid-template-columns: 1fr; }
  .saved-row-actions { justify-content: flex-start; }
}

/* Phase 8N: compact saved hub for real beta usage */
.saved-hub-card {
  overflow: hidden;
}
.saved-hub-card .mini-kicker {
  display: inline-flex;
  width: max-content;
  margin-bottom: 8px;
}
.saved-heading-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}
.saved-summary-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.saved-summary-button {
  appearance: none;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 110, 32, 0.06));
  color: var(--text);
  border-radius: 16px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  text-align: left;
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.saved-summary-button:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 110, 32, 0.46);
  background: linear-gradient(135deg, rgba(255, 110, 32, 0.12), rgba(255, 255, 255, 0.07));
}
.saved-summary-button strong {
  min-width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 110, 32, 0.14);
  border: 1px solid rgba(255, 110, 32, 0.32);
  color: #ffb17a;
}
.compact-saved-grid {
  margin-top: 12px;
}
.compact-saved-column {
  min-height: 0;
  padding: 12px;
}
.compact-saved-list {
  gap: 8px;
}
.compact-saved-row {
  min-height: 74px;
  padding: 10px;
}
.compact-saved-row strong {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.compact-saved-row p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.saved-column-more {
  width: 100%;
  margin-top: 10px;
  border: 1px dashed rgba(255, 110, 32, 0.40);
  background: rgba(255, 110, 32, 0.06);
  color: #ffb17a;
  border-radius: 14px;
  padding: 10px 12px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.saved-column-more:hover {
  transform: translateY(-1px);
  background: rgba(255, 110, 32, 0.12);
  border-color: rgba(255, 110, 32, 0.62);
}
.saved-modal-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.saved-modal-tab {
  appearance: none;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(15, 23, 42, 0.45);
  color: var(--muted);
  border-radius: 999px;
  padding: 8px 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.saved-modal-tab.active,
.saved-modal-tab:hover {
  border-color: rgba(255, 110, 32, 0.55);
  background: rgba(255, 110, 32, 0.14);
  color: var(--text);
}
.saved-modal-tab strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffb17a;
}
.saved-modal-scroll {
  max-height: min(58vh, 640px);
  overflow: auto;
  padding-right: 4px;
  display: grid;
  gap: 14px;
}
.saved-modal-section {
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 18px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.03);
}
.saved-modal-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.saved-modal-section-title h4 {
  margin: 0;
}
.saved-modal-section-title span {
  color: #ffb17a;
  font-weight: 700;
}
.saved-modal-list {
  display: grid;
  gap: 10px;
}
html[data-theme="light"] .saved-summary-button,
html[data-theme="light"] .saved-dashboard-column,
html[data-theme="light"] .saved-modal-section,
html[data-theme="light"] .saved-dashboard-row {
  background: rgba(255, 255, 255, 0.82);
}
html[data-theme="light"] .saved-modal-tab {
  background: rgba(255, 255, 255, 0.86);
}
@media (max-width: 760px) {
  .saved-heading-actions { justify-content: flex-start; }
  .saved-summary-strip { grid-template-columns: 1fr; }
  .saved-modal-scroll { max-height: 62vh; }
}
.saved-hub-card .mini-kicker {
  border: 1px solid rgba(255, 110, 32, 0.42);
  background: rgba(255, 110, 32, 0.12);
  color: #ffb17a;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Phase 8O: saved hub compact card polish — prevent text/button collisions */
.compact-saved-grid .compact-saved-row,
.saved-modal-list .compact-saved-row {
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: 10px;
  min-height: 0;
}

.compact-saved-row > div:first-child,
.compact-saved-row .saved-member-info,
.compact-saved-row .saved-member-info > div {
  min-width: 0;
}

.compact-saved-row .saved-member-info {
  align-items: flex-start;
}

.compact-saved-row strong {
  font-size: 0.98rem;
  line-height: 1.18;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.compact-saved-row p {
  font-size: 0.84rem;
  line-height: 1.35;
  word-break: break-word;
  overflow-wrap: anywhere;
  -webkit-line-clamp: 1;
}

.compact-saved-row .saved-row-actions {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  justify-content: stretch;
  margin-top: 2px;
}

.compact-saved-row .saved-row-actions .button {
  width: 100%;
  min-width: 0;
  justify-content: center;
  padding-inline: 10px;
  white-space: nowrap;
}

.compact-saved-row .saved-member-info + .saved-row-actions {
  padding-left: 0;
}

.compact-saved-column {
  overflow: hidden;
}

.compact-saved-list {
  align-content: start;
}

.saved-dashboard-column .empty-state,
.saved-dashboard-column .muted.small-copy {
  overflow-wrap: anywhere;
}

@media (min-width: 1180px) {
  .saved-modal-list .compact-saved-row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
  .saved-modal-list .compact-saved-row .saved-row-actions {
    width: auto;
    min-width: 190px;
  }
}

@media (max-width: 520px) {
  .compact-saved-row .saved-row-actions {
    grid-template-columns: 1fr;
  }
}

/* Phase 8R: current-team locked state dark-theme polish */
.team-locked-state {
  overflow: hidden;
  position: relative;
}

.team-locked-state::before {
  content: "";
  position: absolute;
  inset: -30% auto auto -12%;
  width: 280px;
  height: 280px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 106, 26, 0.16), transparent 68%);
  pointer-events: none;
}

.team-locked-state > * {
  position: relative;
  z-index: 1;
}

html[data-theme="dark"] .team-locked-state {
  border-color: rgba(148, 163, 184, 0.18);
  background:
    radial-gradient(circle at 10% 10%, rgba(255, 106, 26, 0.18), transparent 32%),
    radial-gradient(circle at 95% 0%, rgba(59, 130, 246, 0.10), transparent 30%),
    linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(15, 23, 42, 0.82));
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

html[data-theme="dark"] .team-locked-copy h2,
html[data-theme="dark"] .team-locked-card h3 {
  color: #F8FAFC;
}

html[data-theme="dark"] .team-locked-state .muted {
  color: #CBD5E1;
}

html[data-theme="dark"] .team-locked-card {
  border-color: rgba(148, 163, 184, 0.20);
  background:
    linear-gradient(135deg, rgba(30, 41, 59, 0.88), rgba(15, 23, 42, 0.92)),
    radial-gradient(circle at 100% 0%, rgba(255, 106, 26, 0.12), transparent 38%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 14px 34px rgba(0, 0, 0, 0.24);
}

html[data-theme="dark"] .team-locked-card .tag.gray {
  color: #CBD5E1;
  background: rgba(148, 163, 184, 0.14);
  border-color: rgba(148, 163, 184, 0.22);
}

html[data-theme="dark"] .team-locked-actions .button.secondary {
  color: #FFB07A;
  background: rgba(255, 106, 26, 0.10);
  border-color: rgba(255, 106, 26, 0.34);
}

html[data-theme="dark"] .team-locked-actions .button.secondary:hover,
html[data-theme="dark"] .team-locked-actions .button.secondary:focus-visible {
  color: #FFF7ED;
  background: rgba(255, 106, 26, 0.18);
  border-color: rgba(255, 106, 26, 0.50);
}

@media (max-width: 640px) {
  .team-locked-state {
    padding: 18px;
    border-radius: 22px;
  }

  .team-locked-actions .button {
    width: 100%;
  }
}

/* Phase 8S: polished locked university selector for onboarding */
.university-field,
.university-field-inline {
  position: relative;
  display: block;
}
.university-field-inline {
  width: 100%;
}
.university-select-shell {
  position: relative;
  width: 100%;
  z-index: 4;
}
.university-select-shell.open {
  z-index: 80;
}
.university-select-trigger {
  width: 100%;
  min-height: 64px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 18px;
  background: rgba(15, 23, 42, 0.78);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.university-select-trigger:hover,
.university-select-shell.open .university-select-trigger {
  border-color: rgba(255, 106, 26, 0.78);
  background: rgba(15, 23, 42, 0.96);
  box-shadow: 0 0 0 3px rgba(255, 106, 26, 0.12), 0 18px 40px rgba(255, 106, 26, 0.10);
}
.university-selected-copy,
.university-option-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.university-selected-copy strong,
.university-option-copy strong {
  color: var(--text);
  font-weight: 700;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.university-selected-copy small,
.university-option-copy small {
  color: var(--muted);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.university-trigger-caret {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: var(--muted);
  background: rgba(148, 163, 184, 0.12);
  transition: transform 0.18s ease, color 0.18s ease, background 0.18s ease;
}
.university-select-shell.open .university-trigger-caret {
  transform: rotate(180deg);
  color: #fff;
  background: rgba(255, 106, 26, 0.22);
}
.university-select-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  display: none;
  border: 1px solid rgba(255, 106, 26, 0.28);
  border-radius: 22px;
  background: rgba(10, 18, 32, 0.98);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  overflow: hidden;
}
.university-select-shell.open .university-select-menu {
  display: block;
}
.university-menu-head {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
  background: linear-gradient(135deg, rgba(255, 106, 26, 0.14), rgba(15, 23, 42, 0.9));
}
.university-menu-head strong,
.university-menu-head span {
  display: block;
}
.university-menu-head strong {
  color: var(--text);
  font-size: 14px;
}
.university-menu-head span {
  color: var(--muted);
  margin-top: 3px;
  font-size: 12px;
}
.university-option-list {
  max-height: 320px;
  overflow-y: auto;
  padding: 8px;
  scrollbar-width: thin;
}
.university-option {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border: 1px solid transparent;
  border-radius: 16px;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}
.university-option:hover {
  border-color: rgba(255, 106, 26, 0.28);
  background: rgba(255, 106, 26, 0.10);
  transform: translateY(-1px);
}
.university-option.active {
  border-color: rgba(255, 106, 26, 0.55);
  background: rgba(255, 106, 26, 0.16);
}
.university-option-check {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff7a1a, #ff4d1a);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 10px 28px rgba(255, 106, 26, 0.25);
}
html[data-theme="light"] .university-select-trigger {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(15, 23, 42, 0.12);
}
html[data-theme="light"] .university-select-trigger:hover,
html[data-theme="light"] .university-select-shell.open .university-select-trigger {
  background: #fff;
}
html[data-theme="light"] .university-select-menu {
  background: rgba(255, 255, 255, 0.99);
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(15, 23, 42, 0.04) inset;
}
html[data-theme="light"] .university-menu-head {
  background: linear-gradient(135deg, rgba(255, 106, 26, 0.12), rgba(255, 255, 255, 0.96));
}
@media (max-width: 760px) {
  .university-select-menu {
    position: fixed;
    left: 16px;
    right: 16px;
    top: auto;
    bottom: 18px;
    max-height: min(70vh, 560px);
  }
  .university-option-list {
    max-height: calc(min(70vh, 560px) - 72px);
  }
}

/* Phase 8S patch: searchable university picker + no overlap with onboarding footer */
.onboarding-page .university-select-shell.open {
  z-index: 10;
}

.onboarding-page .university-select-menu {
  position: static;
  margin-top: 10px;
  max-height: none;
}

.onboarding-page .university-menu-head {
  display: grid;
  gap: 8px;
}

.university-search-input {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.72);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  outline: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.university-search-input::placeholder {
  color: var(--muted);
  font-weight: 600;
}

.university-search-input:focus {
  border-color: rgba(255, 106, 26, 0.72);
  background: rgba(15, 23, 42, 0.92);
  box-shadow: 0 0 0 3px rgba(255, 106, 26, 0.12);
}

.onboarding-page .university-option-list {
  max-height: 238px;
}

.university-option.hidden {
  display: none;
}

.university-empty-state {
  margin: 0 8px 8px;
  padding: 14px;
  border: 1px dashed rgba(148, 163, 184, 0.28);
  border-radius: 16px;
  color: var(--muted);
  text-align: center;
  font-weight: 800;
  background: rgba(148, 163, 184, 0.08);
}

html[data-theme="light"] .university-search-input {
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(15, 23, 42, 0.14);
}

html[data-theme="light"] .university-search-input:focus {
  background: #fff;
}

@media (max-width: 760px) {
  .onboarding-page .university-select-menu {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    max-height: none;
  }

  .onboarding-page .university-option-list {
    max-height: 300px;
  }
}

/* ============================================================
   Phase 8T-v2 patch — polished Light/Dark theme transition
   ============================================================
   What changed vs v1:
   - Persistent base transitions on key surfaces (always smooth)
   - SVG icon animation: scale-down→swap→scale-up (clean morph)
   - Wash: gentler opacity, shorter travel, timed with CSS transition
   - Button: tighter breathe + glow ring; sheen stays the same
   - All timings land between 300–560ms; reduced-motion respected
   ============================================================ */

/* ── 1. Persistent base transitions ────────────────────────
   These fire on EVERY theme change, even without the class.
   Keep them short (320ms) so they never feel sluggish on
   normal interactions — they only affect color/bg properties. */
body,
.topbar,
.simple-header,
.main-nav button,
.section-block,
.form-card,
.content-card,
.info-card,
.item-card,
.onboarding-side,
.auth-card-redesign,
.role-select-box,
.discovery-shell,
.modal-card,
.university-input-shell,
.university-select-menu,
.filter-toggle,
.score-pill,
.tag,
.mini-chip,
.landing-footer,
input,
select,
textarea,
.button,
.theme-toggle,
.language-switch,
.notification-button {
  transition-property: background-color, border-color, color,
                       box-shadow, opacity;
  transition-duration: 320ms;
  transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* ── 2. During active switch — extend duration for richer feel */
html.theme-transition-active *,
html.theme-transition-active *::before,
html.theme-transition-active *::after {
  transition-property: background-color, border-color, color,
                       box-shadow, opacity, filter;
  transition-duration: 400ms;
  transition-timing-function: cubic-bezier(0.22, 0.78, 0.26, 1);
}

html.theme-transition-active body,
html.theme-transition-active .topbar,
html.theme-transition-active .simple-header,
html.theme-transition-active .section-block,
html.theme-transition-active .form-card,
html.theme-transition-active .content-card,
html.theme-transition-active .info-card,
html.theme-transition-active .item-card,
html.theme-transition-active .onboarding-side,
html.theme-transition-active .auth-card-redesign,
html.theme-transition-active .role-select-box,
html.theme-transition-active .discovery-shell,
html.theme-transition-active .modal-card,
html.theme-transition-active .university-input-shell,
html.theme-transition-active .university-select-menu,
html.theme-transition-active input,
html.theme-transition-active select,
html.theme-transition-active textarea,
html.theme-transition-active .button,
html.theme-transition-active .theme-toggle,
html.theme-transition-active .language-switch,
html.theme-transition-active .notification-button {
  transition-duration: 500ms;
}

/* ── 3. Theme-toggle button base ── */
.theme-toggle {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  will-change: transform, box-shadow;
  /* Don't let the persistent transition above affect transform — keep
     hover/focus snappy. Override just for the properties we care about. */
  transition-property: background-color, border-color, color,
                       box-shadow, opacity;
}

.theme-toggle > span {
  position: relative;
  z-index: 1;
}

/* SVG inside the icon span — inherit size & color cleanly */
.theme-toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.theme-toggle-icon svg {
  width: 15px;
  height: 15px;
  display: block;
  flex-shrink: 0;
}

body[data-page="app"] .auth-actions > .theme-toggle,
body[data-page="login"] .auth-language-row > .theme-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  gap: 0 !important;
  border-radius: 12px !important;
  white-space: nowrap !important;
}

body[data-page="app"] .auth-actions > .theme-toggle .theme-toggle-label,
body[data-page="login"] .auth-language-row > .theme-toggle .theme-toggle-label {
  display: none !important;
}

body[data-page="app"] .auth-actions > .theme-toggle .theme-toggle-icon,
body[data-page="login"] .auth-language-row > .theme-toggle .theme-toggle-icon {
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 auto !important;
}

body[data-page="app"] .auth-actions > .theme-toggle .theme-toggle-icon svg,
body[data-page="login"] .auth-language-row > .theme-toggle .theme-toggle-icon svg {
  width: 17px !important;
  height: 17px !important;
}

/* Sheen overlay */
.theme-toggle::after {
  content: "";
  position: absolute;
  inset: -45%;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-120%) rotate(18deg);
  background: linear-gradient(110deg,
    transparent 0%,
    rgba(255, 255, 255, 0.14) 34%,
    rgba(255, 255, 255, 0.52) 50%,
    rgba(255, 255, 255, 0.14) 66%,
    transparent 100%);
}

/* ── 4. Button animations when switching ── */
.theme-toggle.is-switching {
  animation: theme-toggle-breathe 500ms cubic-bezier(0.2, 0.84, 0.24, 1) forwards;
}

.theme-toggle.is-switching::after {
  animation: theme-toggle-sheen 500ms ease-out forwards;
}

/* Icon: shrinks to invisible at midpoint, re-emerges with new icon */
.theme-toggle.is-switching .theme-toggle-icon {
  animation: theme-icon-switch 480ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Label: subtle vertical lift + fade */
.theme-toggle.is-switching .theme-toggle-label {
  animation: theme-label-fade 420ms ease-out forwards;
}

/* ── 5. Radial wash ── */
.theme-transition-wash {
  position: fixed;
  left: var(--theme-origin-x, calc(100vw - 96px));
  top: var(--theme-origin-y, 48px);
  /* Small enough to be a dot at rest */
  width: 24px;
  height: 24px;
  border-radius: 999px;
  pointer-events: none;
  z-index: 2147483000;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.2);
  will-change: transform, opacity;
  transition:
    transform 560ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity   220ms ease;
}

/* Dark wash: deep navy with faint orange warmth at the edge */
.theme-transition-wash-dark {
  background: radial-gradient(circle,
    rgba(11, 18, 32, 0.72) 0%,
    rgba(7,  15, 28, 0.38) 40%,
    rgba(255, 106, 26, 0.08) 62%,
    rgba(7,  15, 28, 0) 72%);
}

/* Light wash: crisp white with a very faint warm tint */
.theme-transition-wash-light {
  background: radial-gradient(circle,
    rgba(255, 255, 255, 0.80) 0%,
    rgba(255, 245, 235, 0.44) 40%,
    rgba(255, 106, 26, 0.07) 62%,
    rgba(255, 255, 255, 0) 72%);
}

/* At peak the wash covers the whole viewport (scale ~140 covers a
   1920 × 1080 viewport from a 24 px dot in the top-right corner).
   Using 160 is a safe upper bound without being excessively large. */
.theme-transition-wash.is-active {
  opacity: 0.82;
  transform: translate(-50%, -50%) scale(160);
}

.theme-transition-wash.is-fading {
  opacity: 0;
  transition-duration: 240ms;
}

/* ── 6. Keyframes ── */

/* Button: gentle lift + focused glow ring */
@keyframes theme-toggle-breathe {
  0%   { transform: translateY(0)    scale(1);     box-shadow: var(--polish-card-shadow); }
  40%  { transform: translateY(-2px) scale(1.055);
         box-shadow: 0 0 0 4px rgba(255, 106, 26, 0.18),
                     0 12px 28px rgba(255, 106, 26, 0.20); }
  100% { transform: translateY(0)    scale(1);     box-shadow: var(--polish-card-shadow); }
}

/* Sheen sweep */
@keyframes theme-toggle-sheen {
  0%   { opacity: 0; transform: translateX(-125%) rotate(18deg); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(125%)  rotate(18deg); }
}

/* Icon: rotate + collapse to zero → swap happens at ~50% → re-emerge */
@keyframes theme-icon-switch {
  0%   { transform: rotate(0deg)   scale(1);   opacity: 1; }
  40%  { transform: rotate(90deg)  scale(0);   opacity: 0; }
  60%  { transform: rotate(-90deg) scale(0);   opacity: 0; }
  100% { transform: rotate(0deg)   scale(1);   opacity: 1; }
}

/* Label: brief fade + upward nudge */
@keyframes theme-label-fade {
  0%   { opacity: 0.55; transform: translateY(2px); }
  50%  { opacity: 1;    transform: translateY(-1px); }
  100% { opacity: 1;    transform: translateY(0); }
}

/* ── 7. Reduced-motion override ── */
@media (prefers-reduced-motion: reduce) {
  /* Kill all animation and transition augmentation */
  body,
  .topbar,
  .simple-header,
  .main-nav button,
  .section-block,
  .form-card,
  .content-card,
  .info-card,
  .item-card,
  .onboarding-side,
  .auth-card-redesign,
  .role-select-box,
  .discovery-shell,
  .modal-card,
  .university-input-shell,
  .university-select-menu,
  .filter-toggle,
  .score-pill,
  .tag,
  .mini-chip,
  .landing-footer,
  input,
  select,
  textarea,
  .button,
  .theme-toggle,
  .language-switch,
  .notification-button {
    transition: none !important;
  }

  html.theme-transition-active *,
  html.theme-transition-active *::before,
  html.theme-transition-active *::after,
  .theme-toggle.is-switching,
  .theme-toggle.is-switching::after,
  .theme-toggle.is-switching .theme-toggle-icon,
  .theme-toggle.is-switching .theme-toggle-label {
    animation: none !important;
    transition: none !important;
  }

  .theme-transition-wash {
    display: none !important;
  }
}

/* Patch: align landing feature-card CTA buttons to the same baseline */
.landing-feature-grid {
  align-items: stretch;
}

.landing-feature-grid .feature-card {
  display: flex !important;
  flex-direction: column;
  height: 100%;
  min-height: 242px;
}

.landing-feature-grid .feature-card p {
  flex: 1 1 auto;
}

.landing-feature-grid .feature-card .button,
.landing-feature-grid .feature-card .button.secondary {
  width: 100%;
  margin-top: auto !important;
  align-self: stretch !important;
  justify-content: center;
}

.landing-feature-grid .feature-card .button::after,
.landing-feature-grid .feature-card .button.secondary::after,
.landing-feature-grid .feature-card:hover .button::after,
.landing-feature-grid .feature-card:hover .button.secondary::after {
  content: none !important;
  display: none !important;
}

/* W2G patch: keep Team Workspace modal readable in Dark theme */
html[data-theme="dark"] .workspace-tabs {
  border-bottom-color: var(--border-soft) !important;
}
html[data-theme="dark"] .workspace-tabs button {
  background: rgba(15, 23, 42, 0.78) !important;
  border-color: rgba(148, 163, 184, 0.28) !important;
  color: var(--body) !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .workspace-tabs button:not(.active):hover,
html[data-theme="dark"] .workspace-tabs button:not(.active):focus-visible {
  background: rgba(255, 106, 26, 0.12) !important;
  border-color: rgba(255, 106, 26, 0.42) !important;
  color: #FFB07A !important;
}
html[data-theme="dark"] .workspace-tabs button.active {
  background: rgba(255, 106, 26, 0.16) !important;
  border-color: rgba(255, 106, 26, 0.58) !important;
  color: #FFB07A !important;
  box-shadow: inset 0 0 0 1px rgba(255, 106, 26, 0.14) !important;
}
html[data-theme="dark"] .workspace-grid .info-card,
html[data-theme="dark"] .member-stack.expanded .member-line,
html[data-theme="dark"] .member-line.member-card-line,
html[data-theme="dark"] .team-message,
html[data-theme="dark"] .task-row,
html[data-theme="dark"] .request-history-row {
  background: rgba(17, 24, 39, 0.88) !important;
  border-color: var(--border-soft) !important;
  color: var(--ink) !important;
  box-shadow: var(--shadow-sm) !important;
}
html[data-theme="dark"] .team-board,
html[data-theme="dark"] .task-board {
  background: rgba(15, 23, 42, 0.45) !important;
  border-color: var(--border-soft) !important;
}
html[data-theme="dark"] .workspace-section h3,
html[data-theme="dark"] .workspace-section h4,
html[data-theme="dark"] .workspace-grid .info-card strong,
html[data-theme="dark"] .member-line strong,
html[data-theme="dark"] .team-message p,
html[data-theme="dark"] .task-row strong,
html[data-theme="dark"] .request-history-row strong {
  color: var(--ink) !important;
}
html[data-theme="dark"] .workspace-section .muted,
html[data-theme="dark"] .workspace-grid .info-card p,
html[data-theme="dark"] .member-line p,
html[data-theme="dark"] .team-message small,
html[data-theme="dark"] .task-row p,
html[data-theme="dark"] .request-history-row p {
  color: var(--body) !important;
}
html[data-theme="dark"] .member-line span,
html[data-theme="dark"] .member-line small,
html[data-theme="dark"] .member-line-actions span {
  color: var(--muted) !important;
}

/* W2G patch: polished multi-select for role/skill pickers */
.multi-select-field {
  position: relative;
}

.multi-select-trigger {
  min-height: 48px;
  border-radius: 14px !important;
  background: var(--card) !important;
  border-color: var(--border) !important;
  color: var(--ink) !important;
  transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease, color 180ms ease;
}

.multi-select-trigger:hover,
.multi-select-field.open .multi-select-trigger {
  border-color: var(--orange) !important;
  box-shadow: 0 0 0 3px rgba(255, 106, 26, 0.14) !important;
}

.multi-select-trigger [data-multi-summary] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.multi-select-tags {
  gap: 8px !important;
  margin-top: 10px !important;
}

.multi-select-selected-chip {
  appearance: none;
  border: 1px solid rgba(255, 106, 26, 0.34) !important;
  border-radius: 999px !important;
  background: rgba(255, 106, 26, 0.11) !important;
  color: var(--orange-dark) !important;
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 6px 10px !important;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.multi-select-selected-chip:hover,
.multi-select-selected-chip:focus-visible {
  background: rgba(255, 106, 26, 0.18) !important;
  border-color: rgba(255, 106, 26, 0.64) !important;
  box-shadow: 0 0 0 3px rgba(255, 106, 26, 0.10);
  transform: translateY(-1px);
  outline: none;
}

.multi-select-chip-remove {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: rgba(255, 106, 26, 0.16);
  font-size: 13px;
  line-height: 1;
}

.multi-select-empty-tag {
  opacity: 0.78;
}

.multi-select-menu {
  display: none;
  max-height: min(340px, 46vh) !important;
  overflow: hidden !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255, 106, 26, 0.34) !important;
  background: var(--card) !important;
  color: var(--ink) !important;
  box-shadow: 0 22px 60px rgba(15, 23, 42, 0.20) !important;
  padding: 10px !important;
}

.multi-select-field.open .multi-select-menu {
  display: grid !important;
  gap: 10px !important;
}

.multi-select-field[data-multi-name="existingRoles"] .multi-select-tags:empty {
  display: none !important;
}

.multi-select-field[data-multi-name="existingRoles"].open .multi-select-menu {
  margin-top: 12px !important;
}

.multi-select-search {
  position: sticky;
  top: 0;
  z-index: 2;
  min-height: 44px;
  border-radius: 13px !important;
  background: var(--soft) !important;
  border-color: var(--border-soft) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}

.multi-select-search::placeholder {
  color: var(--muted) !important;
}

.multi-select-options {
  display: grid !important;
  gap: 8px !important;
  max-height: min(244px, 34vh);
  overflow-y: auto;
  padding: 2px 2px 4px;
  scrollbar-width: thin;
}

.multi-select-option {
  position: relative;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px !important;
  min-height: 44px;
  margin: 0 !important;
  border: 1px solid var(--border-soft);
  border-radius: 14px !important;
  background: rgba(248, 250, 252, 0.92);
  color: var(--body) !important;
  padding: 10px 12px !important;
  cursor: pointer;
  user-select: none;
  transition: transform 150ms ease, background 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

.multi-select-option:hover {
  background: rgba(255, 106, 26, 0.08) !important;
  border-color: rgba(255, 106, 26, 0.32) !important;
  color: var(--orange-dark) !important;
  transform: translateY(-1px);
}

.multi-select-option.is-selected {
  background: linear-gradient(135deg, rgba(255, 106, 26, 0.16), rgba(255, 106, 26, 0.08)) !important;
  border-color: rgba(255, 106, 26, 0.58) !important;
  color: var(--orange-dark) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 106, 26, 0.08);
}

.multi-select-option-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.multi-select-checkbox {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.multi-select-check {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: transparent;
  background: var(--card);
  font-size: 13px;
  font-weight: 700;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease, transform 150ms ease;
}

.multi-select-option.is-selected .multi-select-check {
  background: var(--orange) !important;
  border-color: var(--orange) !important;
  color: #fff !important;
  transform: scale(1.04);
}

.multi-select-empty {
  border: 1px dashed var(--border);
  border-radius: 14px;
  padding: 14px;
  color: var(--muted);
  font-weight: 800;
  text-align: center;
  background: var(--soft);
}

html[data-theme="dark"] .multi-select-trigger,
html[data-theme="dark"] .multi-select-menu {
  background: rgb(10 12 18) !important;

  border-color: rgba(148, 163, 184, 0.24) !important;
  color: var(--ink) !important;
}

html[data-theme="dark"] .multi-select-field.open .multi-select-trigger,
html[data-theme="dark"] .multi-select-trigger:hover {
  border-color: rgba(255, 106, 26, 0.58) !important;
  box-shadow: 0 0 0 3px rgba(255, 106, 26, 0.16) !important;
}

html[data-theme="dark"] .multi-select-menu {
  border-color: rgba(255, 106, 26, 0.38) !important;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.48) !important;
}

html[data-theme="dark"] .multi-select-search {
  background: rgba(30, 41, 59, 0.95) !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
  color: var(--ink) !important;
}

html[data-theme="dark"] .multi-select-option {
  background: rgba(17, 24, 39, 0.86) !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
  color: var(--body) !important;
}

html[data-theme="dark"] .multi-select-option:hover {
  background: rgba(255, 106, 26, 0.12) !important;
  border-color: rgba(255, 106, 26, 0.40) !important;
  color: #FFB07A !important;
}

html[data-theme="dark"] .multi-select-option.is-selected {
  background: linear-gradient(135deg, rgba(255, 106, 26, 0.22), rgba(255, 106, 26, 0.10)) !important;
  border-color: rgba(255, 106, 26, 0.66) !important;
  color: #FFB07A !important;
}

html[data-theme="dark"] .multi-select-check {
  background: rgba(15, 23, 42, 0.92);
  border-color: rgba(148, 163, 184, 0.28);
}

html[data-theme="dark"] .multi-select-selected-chip {
  background: rgba(255, 106, 26, 0.14) !important;
  border-color: rgba(255, 106, 26, 0.40) !important;
  color: #FFB07A !important;
}

html[data-theme="dark"] .multi-select-chip-remove {
  background: rgba(255, 106, 26, 0.20);
}

html[data-theme="dark"] .multi-select-empty {
  background: rgba(17, 24, 39, 0.80);
  border-color: rgba(148, 163, 184, 0.18);
  color: var(--muted);
}

/* Saved competition state: keep it clickable so users can unsave/cancel saved competitions */
.button.competition-save-state-button.saved-state {
  opacity: 1;
  cursor: pointer;
  pointer-events: auto;
  color: #ffb27b;
  border-color: rgba(255, 106, 26, 0.46);
  background: linear-gradient(135deg, rgba(255, 106, 26, 0.18), rgba(255, 106, 26, 0.08));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 10px 22px rgba(255, 106, 26, 0.12);
}

.button.competition-save-state-button.saved-state:disabled {
  cursor: not-allowed;
  pointer-events: none;
}

.button.competition-save-state-button.saved-state::before {
  content: "✓";
  display: inline-block;
  margin-right: 6px;
  font-weight: 700;
}

.saved-competition-option {
  border-color: rgba(255, 106, 26, 0.34);
  background:
    radial-gradient(circle at 92% 30%, rgba(255, 106, 26, 0.13), transparent 34%),
    rgba(255, 106, 26, 0.035);
}

html[data-theme="light"] .button.competition-save-state-button.saved-state,
html[data-theme="light"] .button.competition-save-state-button.saved-state:disabled {
  color: #9a3f0f;
  border-color: rgba(255, 106, 26, 0.40);
  background: linear-gradient(135deg, rgba(255, 106, 26, 0.16), rgba(255, 255, 255, 0.92));
  box-shadow: inset 0 0 0 1px rgba(255, 106, 26, 0.08), 0 10px 22px rgba(255, 106, 26, 0.10);
}

/* Dashboard recommended members: cleaner professional invite rows */
.recommended-member-row {
  position: relative;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px !important;
  border-radius: 18px !important;
  overflow: hidden;
  background:
    radial-gradient(circle at 100% 30%, rgba(255, 106, 26, 0.08), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 252, 249, 0.96)) !important;
}

.recommended-member-row::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, rgba(255, 106, 26, 0.95), rgba(255, 169, 96, 0.25));
  opacity: 0;
  transition: opacity .18s ease;
}

.recommended-member-row:hover::before { opacity: 1; }

.recommended-member-row .member-avatar {
  width: 46px;
  height: 46px;
  flex-basis: 46px;
  border-radius: 16px;
  font-size: 13px;
  box-shadow: 0 12px 28px rgba(255, 106, 26, 0.12);
}

.recommended-member-copy {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.recommended-member-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.recommended-member-heading strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--polish-text-strong);
  letter-spacing: -0.012em;
}

.recommended-member-score {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255, 106, 26, 0.12);
  border: 1px solid rgba(255, 106, 26, 0.24);
  color: var(--orange-dark);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.recommended-member-row p {
  margin: 0 !important;
  color: var(--polish-text-muted) !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  line-height: 1.35;
}

.recommended-member-skills {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}

.recommended-member-chip {
  display: inline-flex;
  align-items: center;
  max-width: 112px;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  background: rgba(248, 250, 252, 0.86);
  color: var(--polish-text-muted);
  font-size: 11px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recommended-member-chip.more {
  max-width: none;
  border-color: rgba(255, 106, 26, 0.24);
  background: rgba(255, 106, 26, 0.10);
  color: var(--orange-dark);
}

.recommended-member-chip.muted-chip {
  max-width: none;
  color: var(--muted);
}

.recommended-member-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.recommended-member-actions .button {
  min-width: 98px;
  min-height: 42px;
  padding: 9px 14px !important;
  border-radius: 14px !important;
  white-space: nowrap;
  line-height: 1.1 !important;
  font-size: 13px !important;
  box-shadow: 0 12px 26px rgba(255, 106, 26, 0.18);
}

html[lang="th"] .recommended-member-actions .button {
  min-width: 104px;
  font-size: 13px !important;
}

html[data-theme="dark"] .recommended-member-row {
  background:
    radial-gradient(circle at 100% 30%, rgba(255, 106, 26, 0.16), transparent 35%),
    linear-gradient(180deg, rgba(17, 24, 39, 0.90), rgba(15, 23, 42, 0.96)) !important;
  border-color: rgba(148, 163, 184, 0.20) !important;
}

html[data-theme="dark"] .recommended-member-row:hover {
  border-color: rgba(255, 106, 26, 0.42) !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.20);
}

html[data-theme="dark"] .recommended-member-heading strong { color: var(--ink); }
html[data-theme="dark"] .recommended-member-row p { color: var(--body) !important; }

html[data-theme="dark"] .recommended-member-score {
  background: rgba(255, 106, 26, 0.16);
  border-color: rgba(255, 106, 26, 0.32);
  color: #FFB07A;
}

html[data-theme="dark"] .recommended-member-chip {
  background: rgba(15, 23, 42, 0.72);
  border-color: rgba(148, 163, 184, 0.20);
  color: #CBD5E1;
}

html[data-theme="dark"] .recommended-member-chip.more {
  background: rgba(255, 106, 26, 0.12);
  border-color: rgba(255, 106, 26, 0.28);
  color: #FFB07A;
}

@media (max-width: 720px) {
  .recommended-member-row {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .recommended-member-actions {
    grid-column: 1 / -1;
  }
  .recommended-member-actions .button {
    width: 100%;
  }
}

/* W2G patch: mobile responsive polish for private-beta use */
@keyframes wtMobilePanelIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes wtMobileSheetIn {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 760px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  body[data-page="app"] .topbar {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    padding: 10px 12px;
    align-items: center;
  }

  body[data-page="app"] .brand {
    min-width: 0;
    max-width: 100%;
    gap: 9px;
  }

  body[data-page="app"] .brand-mark {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    font-size: 12px;
    flex: 0 0 auto;
  }

  body[data-page="app"] .brand span:not(.brand-mark) {
    min-width: 0;
  }

  body[data-page="app"] .brand strong,
  body[data-page="app"] .brand small {
    max-width: 210px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body[data-page="app"] .brand strong { font-size: 13.5px; }
  body[data-page="app"] .brand small { font-size: 10.5px; }

  body[data-page="app"] .mobile-menu-button {
    display: inline-flex;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
  }

  body[data-page="app"] .main-nav.open,
  body[data-page="app"] .auth-actions.open {
    width: 100%;
    margin-top: 8px;
    padding: 10px;
    border-radius: 18px;
    animation: wtMobilePanelIn .18s ease both;
  }

  body[data-page="app"] .main-nav.open {
    max-height: 46vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  body[data-page="app"] .main-nav.open button {
    min-height: 44px;
    width: 100%;
    text-align: left;
    justify-content: flex-start;
  }

  body[data-page="app"] .auth-actions.open {
    display: grid !important;
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  body[data-page="app"] .auth-actions.open .language-switch,
  body[data-page="app"] .auth-actions.open .theme-toggle,
  body[data-page="app"] .auth-actions.open .notification-button,
  body[data-page="app"] .auth-actions.open .button {
    width: 100%;
    min-height: 44px;
    justify-content: center;
  }

  body[data-page="app"] .auth-actions.open .language-switch {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  body[data-page="app"] .page-shell {
    width: min(100% - 20px, 1320px);
    padding-top: 16px;
    padding-bottom: calc(42px + env(safe-area-inset-bottom, 0px));
  }

  body[data-page="app"] .landing-hero {
    grid-template-columns: 1fr !important;
    min-height: auto;
    gap: 16px;
    padding: 8px 0 6px;
  }

  body[data-page="app"] .hero-copy {
    padding: 8px 0 0;
  }

  body[data-page="app"] .landing-chip {
    max-width: 100%;
    margin-bottom: 14px;
    padding-right: 10px;
    font-size: 12px;
    line-height: 1.25;
  }

  body[data-page="app"] .chip-prefix {
    min-width: 26px;
    height: 20px;
    padding: 0 7px;
  }

  body[data-page="app"] .hero-copy h1,
  html[lang="th"] body[data-page="app"] .hero-copy h1 {
    max-width: 100%;
    font-size: clamp(30px, 8.8vw, 38px) !important;
    line-height: 1.08;
    letter-spacing: -0.038em;
    text-wrap: balance;
  }

  body[data-page="app"] .hero-copy .lead {
    margin-top: 14px;
    max-width: 100%;
    font-size: 14.5px;
    line-height: 1.62;
  }

  body[data-page="app"] .hero-actions,
  body[data-page="app"] .hero-actions .button,
  body[data-page="app"] .button.primary.large {
    width: 100%;
  }

  body[data-page="app"] .button.primary.large {
    min-height: 50px;
  }

  body[data-page="app"] .hero-social-proof {
    margin-top: 18px;
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }

  body[data-page="app"] .avatar-stack span {
    width: 30px;
    height: 30px;
    border-width: 2px;
    font-size: 10px;
  }

  body[data-page="app"] .hero-social-proof p {
    font-size: 12.5px;
    line-height: 1.45;
  }

  body[data-page="app"] .hero-product-preview {
    padding: 14px;
    border-radius: 20px;
  }

  body[data-page="app"] .preview-competition-row,
  body[data-page="app"] .preview-bottom-grid,
  body[data-page="app"] .how-grid,
  body[data-page="app"] .landing-footer,
  body[data-page="app"] .simple-grid.two,
  body[data-page="app"] .simple-grid.three,
  body[data-page="app"] .simple-grid.four,
  body[data-page="app"] .dashboard-layout,
  body[data-page="app"] .two-col,
  body[data-page="app"] .role-grid,
  body[data-page="app"] .choice-grid,
  body[data-page="app"] .auth-note-grid,
  body[data-page="app"] .demo-grid {
    grid-template-columns: 1fr !important;
  }

  body[data-page="app"] .landing-stats-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    margin-top: 16px;
    border-radius: 18px;
  }

  body[data-page="app"] .landing-stat {
    min-height: 82px;
    padding: 12px 8px;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 211, 168, 0.55);
  }

  body[data-page="app"] .landing-stat.static {
    grid-column: 1 / -1;
  }

  body[data-page="app"] .landing-stat strong { font-size: 23px; }
  body[data-page="app"] .landing-stat small { font-size: 11.5px; }

  body[data-page="app"] .section-block,
  body[data-page="app"] .content-card,
  body[data-page="app"] .form-card {
    padding: 16px;
    border-radius: 18px;
  }

  body[data-page="app"] .section-title-row {
    align-items: stretch;
    gap: 12px;
    margin-bottom: 16px;
  }

  body[data-page="app"] .section-title-row h1,
  body[data-page="app"] .section-title-row h2 {
    font-size: clamp(25px, 7vw, 32px);
    line-height: 1.14;
  }

  body[data-page="app"] .section-title-row .button,
  body[data-page="app"] .organizer-cta .button {
    width: 100%;
    min-height: 46px;
  }

  body[data-page="app"] .landing-feature-grid .feature-card {
    min-height: 0;
    padding: 18px;
  }

  body[data-page="app"] .landing-feature-grid .feature-card .button {
    min-height: 44px;
  }

  body[data-page="app"] .card-grid,
  body[data-page="app"] .dashboard-layout {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  body[data-page="app"] .dashboard-layout .wide {
    grid-column: auto !important;
  }

  body[data-page="app"] .competition-filter-shell,
  body[data-page="app"] .team-filter-shell,
  body[data-page="app"] .member-filter-shell {
    padding: 10px;
    border-radius: 18px;
    margin-bottom: 14px;
  }

  body[data-page="app"] .filter-toolbar {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: stretch;
  }

  body[data-page="app"] .filter-search-field,
  body[data-page="app"] .filter-sort-field {
    width: 100%;
    flex: none;
  }

  body[data-page="app"] .filter-search-field input,
  body[data-page="app"] .filter-sort-field select,
  body[data-page="app"] .filter-toggle {
    width: 100%;
    min-height: 48px;
    font-size: 16px;
  }

  body[data-page="app"] .active-filter-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 10px 2px 0;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  body[data-page="app"] .active-filter-row::-webkit-scrollbar,
  body[data-page="app"] .workspace-tabs::-webkit-scrollbar,
  body[data-page="app"] .tabs::-webkit-scrollbar,
  body[data-page="app"] .saved-modal-tabs::-webkit-scrollbar {
    display: none;
  }

  body[data-page="app"] .active-filter-chip,
  body[data-page="app"] .clear-filter-button,
  body[data-page="app"] .active-filter-label {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  body[data-page="app"] .filter-drawer:not(.hidden) {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 70;
    margin: 0;
    max-height: min(78dvh, 720px);
    overflow: auto;
    border-radius: 24px 24px 0 0;
    padding: 22px 16px calc(18px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -22px 60px rgba(0, 0, 0, 0.32);
    animation: wtMobileSheetIn .20s ease both;
    -webkit-overflow-scrolling: touch;
  }

  body[data-page="app"] .filter-drawer:not(.hidden)::before {
    content: "";
    position: sticky;
    top: 0;
    display: block;
    width: 42px;
    height: 4px;
    margin: -8px auto 14px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.58);
  }

  body[data-page="app"] .filter-drawer-header {
    gap: 12px;
    margin-bottom: 12px;
  }

  body[data-page="app"] .filters-panel.compact-filter-grid {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  body[data-page="app"] .filters-panel.compact-filter-grid select,
  body[data-page="app"] .filters-panel.compact-filter-grid input,
  body[data-page="app"] input,
  body[data-page="app"] select,
  body[data-page="app"] textarea {
    font-size: 16px;
  }

  body[data-page="app"] .filter-actions {
    position: sticky;
    bottom: calc(-18px - env(safe-area-inset-bottom, 0px));
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 16px -4px -10px;
    padding: 12px 4px 10px;
    background: linear-gradient(180deg, transparent 0%, var(--card) 26%, var(--card) 100%);
  }

  html[data-theme="dark"] body[data-page="app"] .filter-actions {
    background: linear-gradient(180deg, transparent 0%, rgba(17, 24, 39, 0.98) 26%, rgba(17, 24, 39, 0.98) 100%);
  }

  body[data-page="app"] .filter-actions .button {
    width: 100%;
    min-height: 46px;
  }

  body[data-page="app"] .item-card {
    border-radius: 18px;
  }

  body[data-page="app"] .competition-card .item-head,
  body[data-page="app"] .competition-card > .item-meta,
  body[data-page="app"] .competition-card > .tag-row,
  body[data-page="app"] .competition-card > .card-actions,
  body[data-page="app"] .competition-card > .competition-description-wrap {
    margin-left: 14px;
    margin-right: 14px;
  }

  body[data-page="app"] .item-head {
    gap: 10px;
  }

  body[data-page="app"] .item-title {
    font-size: 18px;
    line-height: 1.18;
    word-break: break-word;
  }

  body[data-page="app"] .item-meta {
    font-size: 12.8px;
  }

  body[data-page="app"] .score-pill {
    width: 54px;
    height: 48px;
    border-radius: 13px;
    font-size: 10.5px;
  }

  body[data-page="app"] .score-pill strong { font-size: 15px; }

  body[data-page="app"] .card-actions,
  body[data-page="app"] .competition-card-actions,
  body[data-page="app"] .button-row:not(.hero-actions) {
    width: 100%;
  }

  body[data-page="app"] .competition-card-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  body[data-page="app"] .card-actions .button,
  body[data-page="app"] .competition-card-actions .button,
  body[data-page="app"] .button-row:not(.hero-actions) .button,
  body[data-page="app"] .button-row:not(.hero-actions) button {
    width: 100%;
    min-height: 44px;
    justify-content: center;
  }

  body[data-page="app"] .tag {
    max-width: 100%;
    white-space: normal;
    line-height: 1.25;
  }

  body[data-page="app"] .modal-overlay {
    place-items: end stretch;
    padding: 0;
    z-index: 80;
  }

  body[data-page="app"] .modal-card {
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
    padding: 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  body[data-page="app"] .modal-header {
    flex: 0 0 auto;
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 12px;
  }

  body[data-page="app"] .modal-header h2 {
    font-size: 22px;
    line-height: 1.18;
  }

  body[data-page="app"] .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 14px 0;
    -webkit-overflow-scrolling: touch;
  }

  body[data-page="app"] .modal-footer {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    padding-top: 12px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  body[data-page="app"] .modal-footer .button,
  body[data-page="app"] .modal-footer button {
    width: 100%;
    min-height: 46px;
  }

  body[data-page="app"] .workspace-tabs,
  body[data-page="app"] .tabs,
  body[data-page="app"] .saved-modal-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 10px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  body[data-page="app"] .workspace-tabs button,
  body[data-page="app"] .tabs button,
  body[data-page="app"] .saved-modal-tab {
    flex: 0 0 auto;
    min-height: 40px;
    scroll-snap-align: start;
    white-space: nowrap;
  }

  body[data-page="app"] .workspace-grid,
  body[data-page="app"] .saved-dashboard-grid,
  body[data-page="app"] .compact-saved-grid {
    grid-template-columns: 1fr !important;
  }

  body[data-page="app"] .team-workspace-row,
  body[data-page="app"] .member-line,
  body[data-page="app"] .request-row,
  body[data-page="app"] .list-row,
  body[data-page="app"] .saved-row {
    align-items: stretch;
    gap: 10px;
  }

  body[data-page="app"] .saved-dashboard-row,
  body[data-page="app"] .compact-saved-row {
    grid-template-columns: 1fr !important;
  }

  body[data-page="app"] .saved-row-actions,
  body[data-page="app"] .compact-saved-row .saved-row-actions {
    grid-template-columns: 1fr !important;
  }

  body[data-page="app"] .table-card {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  body[data-page="app"] .toast {
    left: 12px;
    right: 12px;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    width: auto;
    transform: none;
    border-radius: 14px;
    text-align: center;
  }
}

@media (max-width: 480px) {
  body[data-page="app"] .topbar {
    padding: 9px 10px;
  }

  body[data-page="app"] .brand small {
    display: none;
  }

  body[data-page="app"] .brand strong {
    max-width: 170px;
    font-size: 13px;
  }

  body[data-page="app"] .page-shell {
    width: calc(100% - 16px);
  }

  body[data-page="app"] .hero-copy h1,
  html[lang="th"] body[data-page="app"] .hero-copy h1 {
    font-size: clamp(28px, 8.2vw, 34px) !important;
  }

  body[data-page="app"] .hero-product-preview,
  body[data-page="app"] .section-block,
  body[data-page="app"] .content-card,
  body[data-page="app"] .form-card,
  body[data-page="app"] .competition-filter-shell,
  body[data-page="app"] .team-filter-shell,
  body[data-page="app"] .member-filter-shell {
    border-radius: 16px;
  }

  body[data-page="app"] .landing-stats-strip {
    grid-template-columns: 1fr !important;
  }

  body[data-page="app"] .landing-stat.static {
    grid-column: auto;
  }

  body[data-page="app"] .filter-actions {
    grid-template-columns: 1fr;
  }
}

/* W2G patch: make landing stats easier to scan on phones */
@media (max-width: 560px) {
  body[data-page="app"] .landing-stats-strip {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding: 10px !important;
    margin-top: 18px !important;
    overflow: visible !important;
    border-radius: 22px !important;
    background:
      radial-gradient(circle at 15% 10%, rgba(255, 106, 26, 0.10), transparent 30%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 250, 243, 0.94)) !important;
  }

  body[data-page="app"] .landing-stat {
    min-width: 0 !important;
    min-height: 112px !important;
    padding: 14px 10px !important;
    border: 1px solid rgba(255, 106, 26, 0.18) !important;
    border-radius: 18px !important;
    background:
      radial-gradient(circle at 50% 0%, rgba(255, 106, 26, 0.10), transparent 40%),
      rgba(255, 255, 255, 0.72) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    text-align: center !important;
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.06) !important;
  }

  body[data-page="app"] .landing-stat.static {
    grid-column: 1 / -1 !important;
    min-height: 96px !important;
  }

  body[data-page="app"] .landing-stat span.stat-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 14px !important;
  }

  body[data-page="app"] .landing-stat strong {
    font-size: 26px !important;
    line-height: 1 !important;
    letter-spacing: -0.04em !important;
  }

  body[data-page="app"] .landing-stat small {
    max-width: 100% !important;
    font-size: 11.5px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
  }

  html[data-theme="dark"] body[data-page="app"] .landing-stats-strip {
    background:
      radial-gradient(circle at 15% 10%, rgba(255, 106, 26, 0.16), transparent 32%),
      linear-gradient(180deg, rgba(17, 24, 39, 0.88), rgba(15, 23, 42, 0.96)) !important;
  }

  html[data-theme="dark"] body[data-page="app"] .landing-stat {
    border-color: rgba(255, 106, 26, 0.22) !important;
    background:
      radial-gradient(circle at 50% 0%, rgba(255, 106, 26, 0.13), transparent 42%),
      rgba(15, 23, 42, 0.62) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18) !important;
  }
}

/* ============================================================
   W2G Polish v4 — Final product-readiness pass
   Target: private-beta quality, not student demo
   ============================================================ */


/* ── 1. Reset sample-data button — de-emphasise so it doesn't
         look like a dangerous CTA on the profile page header ── */
.reset-demo-button {
  border-color: var(--border-soft);
  background: transparent;
  color: var(--polish-text-muted);
  font-size: 12.5px;
  font-weight: 600;
  padding: 9px 12px;
  opacity: 0.72;
  transition: opacity .18s ease, color .18s ease, border-color .18s ease;
}
.reset-demo-button:hover {
  opacity: 1;
  color: var(--danger, #EF4444);
  border-color: rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.06);
}
html[data-theme="dark"] .reset-demo-button {
  color: var(--muted);
  border-color: rgba(148, 163, 184, 0.22);
}


/* ── 2. Activity metric grid — 5 cols only on wide screens ── */
.activity-metric-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 1100px) {
  .activity-metric-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .activity-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* Last metric (5th) spans both columns to avoid orphan column */
  .activity-metric:last-child {
    grid-column: 1 / -1;
  }
}
@media (max-width: 420px) {
  .activity-metric-grid {
    grid-template-columns: 1fr;
  }
  .activity-metric:last-child {
    grid-column: auto;
  }
}


/* ── 3. Activity metric card — better typography and visual ── */
.activity-metric {
  position: relative;
  border: 1px solid rgba(232, 237, 243, 0.9);
  border-radius: 18px;
  padding: 16px;
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFCF8 100%);
  box-shadow: var(--polish-card-shadow);
  overflow: hidden;
}
.activity-metric::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 100% 0%, rgba(255, 106, 26, 0.07), transparent 40%);
  pointer-events: none;
}
.activity-metric strong {
  display: block;
  font-size: 26px;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--polish-text-strong);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.activity-metric p {
  margin: 4px 0 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--polish-text-body);
  line-height: 1.3;
}
html[data-theme="dark"] .activity-metric {
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 106, 26, 0.10), transparent 40%),
    linear-gradient(180deg, rgba(17, 24, 39, 0.88) 0%, rgba(15, 23, 42, 0.92) 100%);
  border-color: rgba(148, 163, 184, 0.16);
}
html[data-theme="dark"] .activity-metric strong { color: var(--ink); }
html[data-theme="dark"] .activity-metric p { color: var(--body); }


/* ── 4. Dashboard layout — profile card + activity card on mid widths ── */
@media (max-width: 1100px) {
  .dashboard-layout {
    grid-template-columns: 1fr 1fr;
  }
  .dashboard-layout .wide {
    grid-column: span 2;
  }
}
@media (max-width: 760px) {
  .dashboard-layout {
    grid-template-columns: 1fr;
  }
  .dashboard-layout .wide {
    grid-column: auto;
  }
}


/* ── 5. Dashboard content card — better heading + spacing ── */
.content-card {
  padding: 22px;
  border-radius: 20px;
  box-shadow: var(--polish-card-shadow);
  transition: box-shadow .18s ease, border-color .18s ease;
}
.content-card h3 {
  margin: 0 0 14px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--polish-text-strong);
  line-height: 1.2;
}
.content-card .muted {
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.5;
}
html[data-theme="dark"] .content-card {
  background: rgba(17, 24, 39, 0.86);
}
html[data-theme="dark"] .content-card h3 { color: var(--ink); }


/* ── 6. Profile section header button row ── */
@media (max-width: 560px) {
  #profile .section-title-row .button-row.compact {
    flex-direction: column;
    width: 100%;
  }
  #profile .section-title-row .button-row.compact .button {
    width: 100%;
    justify-content: center;
  }
}


/* ── 7. Section title row — tighter on compact screens ── */
@media (max-width: 560px) {
  .section-title-row {
    flex-direction: column;
    gap: 14px;
    margin-bottom: 18px;
  }
  .section-title-row h1 {
    font-size: clamp(24px, 7vw, 32px) !important;
  }
}


/* ── 8. Admin panel — more product-feeling title & card grid ── */
#adminContent .table-card {
  border-radius: 18px;
  overflow: hidden;
}
#adminContent .section-title-row h1 { /* already handled globally */ }
#adminContent .tabs {
  margin-bottom: 20px;
}
#adminContent .stack {
  gap: 10px;
}


/* ── 9. Requests tabs — horizontal scroll on mobile (already in v3 patch,
         but also ensure tabs wrap for 2-tab case) ── */
#requestTabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}
#requestTabs button {
  flex: 0 0 auto;
}


/* ── 10. Team workspace row — better alignment ── */
.team-workspace-row {
  gap: 16px;
  padding: 18px;
  border-radius: 18px;
  background: linear-gradient(180deg, #FFFFFF 0%, #FEFCF9 100%);
}
.team-workspace-row strong {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--polish-text-strong);
}
.team-workspace-row .team-row-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}
html[data-theme="dark"] .team-workspace-row {
  background: rgba(17, 24, 39, 0.82);
}
html[data-theme="dark"] .team-workspace-row strong { color: var(--ink); }


/* ── 11. Empty state — cleaner + more helpful ── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 140px;
  padding: 36px 24px;
  border: 1px dashed var(--border);
  border-radius: 18px;
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFBFD 100%);
  color: var(--polish-text-muted);
  font-weight: 600;
  font-size: 14px;
  text-align: center;
  line-height: 1.55;
}
.empty-state strong {
  color: var(--polish-text-strong);
  font-size: 15px;
}
.empty-state.compact {
  min-height: 72px;
  padding: 18px 16px;
  font-size: 13px;
}
.empty-state a.button,
.empty-state button {
  margin-top: 6px;
}
html[data-theme="dark"] .empty-state {
  background: rgba(15, 23, 42, 0.72);
  border-color: rgba(148, 163, 184, 0.18);
}


/* ── 12. Loading skeleton pulse ── */
@keyframes skeletonPulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}
.skeleton-loading {
  pointer-events: none;
  animation: skeletonPulse 1.4s ease-in-out infinite;
}


/* ── 13. Toast — slightly more branded ── */
.toast {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 16px;
  background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%);
  color: #F8FAFC;
  padding: 13px 20px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  box-shadow: 0 20px 44px rgba(15, 23, 42, 0.36), 0 1px 0 rgba(255, 255, 255, 0.06) inset;
  max-width: min(400px, calc(100vw - 32px));
  text-align: center;
}
html[data-theme="dark"] .toast {
  background: linear-gradient(135deg, #F1F5F9 0%, #E2E8F0 100%);
  color: #0F172A;
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.44);
}


/* ── 14. Table improvements ── */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
th {
  background: var(--soft);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--polish-text-muted);
  padding: 11px 12px;
  text-align: left;
  vertical-align: middle;
}
th:first-child { border-radius: 12px 0 0 0; }
th:last-child  { border-radius: 0 12px 0 0; }
td {
  padding: 12px;
  border-bottom: 1px solid var(--border-soft);
  color: var(--polish-text-strong);
  font-weight: 500;
  vertical-align: middle;
  line-height: 1.5;
}
tr:last-child td { border-bottom: 0; }
tr:hover td {
  background: rgba(255, 106, 26, 0.024);
}
html[data-theme="dark"] th {
  background: rgba(15, 23, 42, 0.86);
  color: var(--muted);
}
html[data-theme="dark"] td {
  color: var(--ink-2);
  border-bottom-color: var(--border-soft);
}
html[data-theme="dark"] tr:hover td {
  background: rgba(255, 106, 26, 0.06);
}


/* ── 15. Member discovery card refinements ── */
.member-discovery-card {
  border-radius: 20px;
}
.member-avatar {
  border-radius: 16px;
  border: 1px solid rgba(255, 218, 185, 0.6);
  background: linear-gradient(135deg, rgba(255, 106, 26, 0.12), rgba(255, 255, 255, 0.95));
  color: var(--orange-dark);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.02em;
  box-shadow: 0 10px 26px rgba(255, 106, 26, 0.12);
}
html[data-theme="dark"] .member-avatar {
  background: linear-gradient(135deg, rgba(255, 106, 26, 0.18), rgba(15, 23, 42, 0.88));
  border-color: rgba(255, 106, 26, 0.32);
  color: #FFB07A;
}


/* ── 16. Competition badge — better "approved" indicator ── */
.status-approved { background: #ECFDF5; color: #047857; }
html[data-theme="dark"] .status-approved { background: rgba(16, 185, 129, 0.16); color: #6EE7B7; }


/* ── 17. Focus ring — more accessible + branded ── */
:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
  border-radius: 6px;
}
.button:focus-visible {
  outline-offset: 2px;
  border-radius: 10px;
}


/* ── 18. Page title / section eyebrow — visual fix for dark mode ── */
html[data-theme="dark"] .section-title-row h1 { color: var(--ink); }
html[data-theme="dark"] .section-title-row h2 { color: var(--ink); }
html[data-theme="dark"] .section-title-row .muted { color: var(--body); }


/* ── 19. Dashboard create-team card — cleaner CTA ── */
.dashboard-create-team-card {
  position: relative;
  overflow: hidden;
}
.dashboard-create-team-card::after {
  content: "";
  position: absolute;
  right: -40px;
  top: -40px;
  width: 160px;
  height: 160px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 106, 26, 0.16), transparent 70%);
  pointer-events: none;
}
.dashboard-create-team-card h3 { margin-bottom: 8px; }
.dashboard-create-team-card .muted { margin-bottom: 16px; }
.dashboard-create-team-card > p.muted {
  margin: 0 0 16px;
}


/* ── 20. Profile identity card — tighten spacing ── */
.profile-identity-card {
  padding: 22px;
  border-radius: 20px;
  box-shadow: var(--polish-card-shadow);
}


/* ── 21. Workspace tabs — polish ── */
.workspace-tabs {
  border-bottom-color: var(--border-soft);
  gap: 6px;
  padding-bottom: 14px;
  margin-bottom: 20px;
}
.workspace-tabs button {
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 700;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: #fff;
  color: var(--polish-text-body);
  transition: background-color .14s ease, color .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.workspace-tabs button:hover {
  background: var(--orange-soft);
  border-color: var(--orange-soft-2);
  color: var(--orange-dark);
}
.workspace-tabs button.active {
  background: linear-gradient(180deg, var(--orange-soft) 0%, rgba(255, 106, 26, 0.06) 100%);
  border-color: var(--orange-soft-2);
  color: var(--orange-dark);
  box-shadow: inset 0 0 0 1px rgba(255, 106, 26, 0.18);
}
html[data-theme="dark"] .workspace-tabs button {
  background: rgba(15, 23, 42, 0.78);
  border-color: var(--border-soft);
  color: var(--body);
}
html[data-theme="dark"] .workspace-tabs button.active {
  background: rgba(255, 106, 26, 0.16);
  color: #FFB07A;
  border-color: rgba(255, 106, 26, 0.36);
}


/* ── 22. Section block — tighter padding + heading ── */
.section-block {
  padding: 24px;
  border-radius: 20px;
}
.section-block h2 {
  margin: 0 0 18px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.018em;
  color: var(--polish-text-strong);
}
html[data-theme="dark"] .section-block h2 { color: var(--ink); }


/* ── 23. Mini competition card on home — better overflow ── */
.mini-competition-card {
  border-radius: 18px;
  overflow: hidden;
}
.mini-competition-card h3 {
  margin: 24px 0 6px;
  font-size: 17px;
  letter-spacing: -0.012em;
  line-height: 1.2;
}
.mini-competition-card p {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  opacity: 0.88;
}


/* ── 24. Saved-items modal tabs ── */
.saved-modal-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.saved-modal-tab {
  padding: 8px 14px;
  border-radius: 11px;
  border: 1px solid var(--border-soft);
  background: #fff;
  color: var(--polish-text-body);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .14s ease, color .14s ease, border-color .14s ease;
}
.saved-modal-tab:hover,
.saved-modal-tab.active {
  background: var(--orange-soft);
  border-color: var(--orange-soft-2);
  color: var(--orange-dark);
}


/* ── 25. Section mini headings in dashboard/requests ── */
.section-mini h3 {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--polish-text-strong);
}
html[data-theme="dark"] .section-mini h3 { color: var(--ink); }


/* ── 26. List/request/saved rows – better typography ── */
.list-row strong,
.saved-row strong,
.request-row strong {
  font-size: 14px;
  font-weight: 800;
  color: var(--polish-text-strong);
}
html[data-theme="dark"] .list-row strong,
html[data-theme="dark"] .saved-row strong,
html[data-theme="dark"] .request-row strong {
  color: var(--ink);
}


/* ── 27. Request history row ── */
.request-history-row {
  border-radius: 14px;
  border-color: var(--border-soft);
  background: #fff;
  padding: 12px 14px;
}
html[data-theme="dark"] .request-history-row {
  background: rgba(17, 24, 39, 0.82);
  border-color: var(--border-soft);
}


/* ── 28. Landing "how it works" section — ensure clean section title ── */
.how-it-works h2 {
  margin-bottom: 24px;
}


/* ── 29. Section title row improvements for compact profile/requests ── */
#profile .section-title-row h1,
#requests .section-title-row h1,
#admin .section-title-row h1,
#dashboard .section-title-row h1 {
  font-size: clamp(28px, 4vw, 40px);
}


/* ── 30. Mobile: filter toolbar should not overflow ── */
@media (max-width: 640px) {
  .filter-toolbar {
    flex-direction: column;
    gap: 8px;
  }
  .filter-search-field,
  .filter-sort-field {
    width: 100%;
    flex: none;
  }
  .filter-sort-field select {
    width: 100%;
    height: 44px;
  }
  .filter-toggle {
    width: 100%;
    justify-content: center;
  }
}


/* ── 31. Admin-only badge color fix ── */
.admin-only-badge {
  background: #FEE2E2;
  color: #991B1B;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}


/* ── 32. Organizer create-competition card (dashboard) ── */
.organizer-create-card {
  gap: 20px;
}
.organizer-create-card .section-heading-row {
  flex: 1;
}
.organizer-create-card h3 {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
}


/* ── 33. Request tab badge – show pending count nicely ── */
#requestTabs button .count-badge,
#requestTabs button [class*="badge"] {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  margin-left: 6px;
  border-radius: 999px;
  background: var(--orange);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  vertical-align: middle;
}


/* ── 34. Competition card info label — muted text under poster ── */
.competition-poster .poster-placeholder strong {
  font-size: 17px;
  letter-spacing: -0.01em;
}


/* ── 35. Card-grid — ensure 1-col on very small phones ── */
@media (max-width: 480px) {
  .card-grid {
    grid-template-columns: 1fr !important;
  }
}


/* ── 36. Content card in dashboard — title row cleanup ── */
.dashboard-card-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-soft);
}
.dashboard-card-title h3 {
  margin: 0;
  font-size: 16px;
}
.dashboard-card-title p {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--polish-text-muted);
}


/* ── 37. Profile photo section ── */
.profile-photo-panel {
  padding: 20px;
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFCF9 100%);
  box-shadow: var(--polish-card-shadow);
}
html[data-theme="dark"] .profile-photo-panel {
  background: rgba(17, 24, 39, 0.82);
  border-color: var(--border-soft);
}


/* ── 38. Mobile: team-workspace-row should stack nicely ── */
@media (max-width: 640px) {
  .team-workspace-row {
    flex-direction: column;
    align-items: stretch;
  }
  .team-row-actions {
    justify-content: flex-start;
    width: 100%;
  }
  .team-row-actions .button {
    flex: 1;
    min-height: 42px;
    justify-content: center;
  }
}


/* ── 39. Mini team/competition rows in dashboard ── */
.list-row.compact,
.request-row.compact {
  padding: 10px 12px;
}
.list-row.compact p,
.request-row.compact p {
  font-size: 12.5px;
  margin-top: 2px;
}


/* ── 40. Prevent horizontal scroll on any page ── */
body[data-page="app"] {
  overflow-x: hidden;
}



/* ── 41. Profile bottom actions (logout button area) ── */
.profile-bottom-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
  padding-top: 16px;
}
.profile-logout-button {
  border-radius: 12px;
  padding: 10px 20px;
  font-weight: 700;
}
html[data-theme="dark"] .profile-logout-button {
  background: rgba(248, 250, 252, 0.96);
  color: #0F172A;
  border-color: rgba(248, 250, 252, 0.96);
}


/* ── 42. Admin stats grid (four cards) ── */
#adminContent .simple-grid.four {
  margin-bottom: 20px;
}
#adminContent .simple-grid.four .content-card {
  min-height: 96px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
#adminContent .simple-grid.four .content-card h3 {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--polish-text-muted);
  margin: 0 0 8px;
}
#adminContent .simple-grid.four .content-card p {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--polish-text-strong);
  margin: 0;
  line-height: 1;
}
html[data-theme="dark"] #adminContent .simple-grid.four .content-card p {
  color: var(--ink);
}


/* ── 43. Stacked section blocks in admin ── */
#adminContent .section-block {
  margin-top: 16px;
}
#adminContent .section-block h2 {
  margin-bottom: 16px;
}


/* ── 44. Section-heading-row in organizer dashboard ── */
.section-heading-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}
.section-heading-row h3 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.section-heading-row p.muted {
  margin: 0;
  font-size: 13px;
}
@media (max-width: 640px) {
  .section-heading-row {
    flex-direction: column;
    gap: 10px;
  }
  .section-heading-row .button {
    width: 100%;
    justify-content: center;
  }
}


/* ── 45. Two-col form layout on mobile ── */
@media (max-width: 520px) {
  .two-col {
    grid-template-columns: 1fr !important;
  }
}


/* ── 46. Info cards in modal/competition detail ── */
.info-card {
  padding: 18px;
  border-radius: 14px;
  border: 1px solid var(--border-soft);
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFCFF 100%);
  box-shadow: var(--polish-card-shadow);
}
.info-card strong {
  display: block;
  margin: 0 0 6px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--polish-text-muted);
}
.info-card p {
  margin: 0;
  font-size: 14px;
  color: var(--polish-text-strong);
  font-weight: 600;
  line-height: 1.5;
}
html[data-theme="dark"] .info-card {
  background: rgba(17, 24, 39, 0.78);
  border-color: var(--border-soft);
}
html[data-theme="dark"] .info-card p { color: var(--ink-2); }


/* ── 47. Organizer applicants mini row ── */
.organizer-applicant-mini {
  padding: 11px 14px;
  border-radius: 12px;
}
.organizer-applicant-mini strong {
  font-size: 13.5px;
}
.organizer-applicant-mini p {
  font-size: 12px;
  margin-top: 2px;
}


/* ── 48. Request row actionable — better visual separation ── */
.request-row-actionable {
  border-color: var(--border-soft);
  transition: border-color .14s ease, box-shadow .14s ease;
}
.request-row-actionable:hover {
  border-color: var(--orange-soft-2);
  box-shadow: 0 4px 12px rgba(255, 106, 26, 0.06);
}


/* ── 49. Member line in workspace ── */
.member-line {
  border-radius: 12px;
  padding: 11px 14px;
  background: var(--soft);
  border: 1px solid var(--border-soft);
}
.member-line strong {
  font-size: 14px;
  font-weight: 700;
  color: var(--polish-text-strong);
}
html[data-theme="dark"] .member-line {
  background: rgba(15, 23, 42, 0.72);
  border-color: var(--border-soft);
}
html[data-theme="dark"] .member-line strong { color: var(--ink); }


/* ── 50. Team message in workspace ── */
.team-message {
  border-radius: 12px;
  border-color: var(--border-soft);
  padding: 12px 14px;
}
.team-message small {
  color: var(--polish-text-muted);
  font-weight: 600;
}
html[data-theme="dark"] .team-message {
  background: rgba(17, 24, 39, 0.78);
  border-color: var(--border-soft);
}


/* ── 51. Task row improvements ── */
.task-row {
  border-radius: 14px;
  border-color: var(--border-soft);
  padding: 14px;
  transition: border-color .14s ease;
}
.task-row strong {
  font-size: 14px;
  font-weight: 700;
  color: var(--polish-text-strong);
}
.task-row p {
  font-size: 12.5px;
  color: var(--polish-text-muted);
  font-weight: 600;
}
.task-row.done strong {
  color: var(--polish-text-muted);
}
html[data-theme="dark"] .task-row {
  background: rgba(17, 24, 39, 0.82);
  border-color: var(--border-soft);
}
html[data-theme="dark"] .task-row strong { color: var(--ink-2); }


/* ── 52. Task status select ── */
.task-status-select {
  min-width: 120px;
  font-size: 13px;
  padding: 8px 10px;
}


/* ── 53. Filter drawer improvements ── */
.filter-drawer {
  border-color: var(--border-soft);
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFCFE 100%);
  border-radius: 16px;
  padding: 18px;
  margin-top: 10px;
}
html[data-theme="dark"] .filter-drawer {
  background:
    linear-gradient(180deg, rgba(17, 24, 39, 0.82) 0%, rgba(15, 23, 42, 0.88) 100%);
}
.filter-drawer-header strong {
  font-size: 16px;
  font-weight: 800;
  color: var(--polish-text-strong);
  letter-spacing: -0.01em;
}
html[data-theme="dark"] .filter-drawer-header strong { color: var(--ink); }


/* ── 54. Mini competition card in dashboard ── */
.mini-competition-card.hackathon,
.mini-competition-card.business,
.mini-competition-card.data {
  position: relative;
  overflow: hidden;
}
.mini-competition-card.hackathon::before,
.mini-competition-card.business::before,
.mini-competition-card.data::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.28) 100%);
  pointer-events: none;
}


/* ── 55. "Required roles" h3 in modals — consistent heading ── */
.modal-body h3 {
  margin: 18px 0 10px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--polish-text-strong);
}
html[data-theme="dark"] .modal-body h3 { color: var(--ink); }


/* ── 56. Organizer competition row — action buttons tighter ── */
.organizer-competition-row .button-row.compact {
  gap: 6px;
  flex-wrap: nowrap;
}
@media (max-width: 640px) {
  .organizer-competition-row {
    flex-direction: column;
    align-items: stretch;
  }
  .organizer-competition-row .button-row.compact {
    flex-wrap: wrap;
  }
  .organizer-competition-row .button-row.compact .button {
    flex: 1;
    min-height: 40px;
    font-size: 12.5px;
    padding: 8px 10px;
  }
}


/* ── 57. Form card in auth/onboarding ── */
.form-card {
  position: relative;
}
.form-card label {
  display: block;
  margin-bottom: 0;
}
.form-card label + label {
  margin-top: 12px;
}
.form-card .stack > label + label {
  margin-top: 0;
}


/* ── 58. Compact stack spacing ── */
.stack.compact-stack {
  gap: 8px;
}


/* ── 59. Notification count badge — cleaner positional fix ── */
.notification-icon-button {
  position: relative;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 12px;
}
.notification-icon-button .count-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  margin: 0;
  padding: 0 4px;
  border: 2px solid #fff;
  font-size: 9px;
  font-weight: 700;
  border-radius: 999px;
}
html[data-theme="dark"] .notification-icon-button .count-badge {
  border-color: rgba(15, 23, 42, 0.96);
}


/* ── 60. Chip helper — consistent tag visual ── */
.chip,
span.chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  border: 1px solid var(--orange-soft-2);
  background: var(--orange-soft);
  color: var(--orange-dark);
}
.chip.gray {
  border-color: var(--border-soft);
  background: var(--soft);
  color: #475569;
}
html[data-theme="dark"] .chip {
  background: rgba(255, 106, 26, 0.13);
  border-color: rgba(255, 106, 26, 0.28);
  color: #FFB07A;
}
html[data-theme="dark"] .chip.gray {
  background: rgba(148, 163, 184, 0.12);
  border-color: rgba(148, 163, 184, 0.20);
  color: var(--body);
}


/* ── 61. "View profile, edit role-specific…" text in profile content ── */
.profile-identity-card .profile-photo-actions h3 {
  margin: 0 0 4px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.018em;
  color: var(--polish-text-strong);
}
.profile-identity-card .profile-photo-actions p {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--polish-text-body);
  font-weight: 500;
  line-height: 1.5;
}
html[data-theme="dark"] .profile-identity-card .profile-photo-actions h3 { color: var(--ink); }
html[data-theme="dark"] .profile-identity-card .profile-photo-actions p { color: var(--body); }


/* ── 62. Saved items card in profile ── */
.profile-saved-redirect-card h3 {
  font-size: 17px;
  margin-bottom: 8px;
}
.profile-saved-redirect-card p {
  font-size: 14px;
  color: var(--polish-text-body);
  font-weight: 500;
  line-height: 1.6;
}
.profile-saved-redirect-card .muted.small-copy {
  font-size: 12.5px;
  margin-top: 8px;
}


/* ── 63. Avatar-upload button ── */
.avatar-upload-button {
  cursor: pointer;
  font-size: 13px;
  padding: 9px 14px;
}


/* ── 64. Accessibility: reduce motion compatibility ── */
@media (prefers-reduced-motion: reduce) {
  .reset-demo-button,
  .profile-logout-button,
  .workspace-tabs button,
  .activity-metric,
  .organizer-competition-row {
    transition: none !important;
  }
}


/* ── 65. Print: hide controls ── */
@media print {
  .reset-demo-button,
  .profile-logout-button,
  .filter-toolbar,
  .filter-drawer,
  .dashboard-card-title .button {
    display: none !important;
  }
}



/* Phase 9A: Real Beta Stabilization cleanup overrides
   Keep these rules near the end so later polish blocks do not revert mobile/dark fixes. */
@media (max-width: 420px) {
  body[data-page="app"] .activity-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body[data-page="app"] .activity-metric:last-child {
    grid-column: 1 / -1 !important;
  }
}

html[data-theme="dark"] body[data-page="app"] .saved-modal-tab,
html[data-theme="dark"] .saved-modal-tab {
  background: rgba(15, 23, 42, 0.72) !important;
  color: #CBD5E1 !important;
  border-color: rgba(148, 163, 184, 0.24) !important;
  box-shadow: none !important;
}
html[data-theme="dark"] body[data-page="app"] .saved-modal-tab:hover,
html[data-theme="dark"] body[data-page="app"] .saved-modal-tab.active,
html[data-theme="dark"] .saved-modal-tab:hover,
html[data-theme="dark"] .saved-modal-tab.active {
  background: rgba(255, 110, 32, 0.16) !important;
  color: #FFB17A !important;
  border-color: rgba(255, 110, 32, 0.48) !important;
}
html[data-theme="dark"] body[data-page="app"] .saved-modal-tab strong,
html[data-theme="dark"] .saved-modal-tab strong {
  background: rgba(255, 110, 32, 0.14) !important;
  color: #FFB17A !important;
}

body[data-page="app"] .neutral-preview-panel p {
  margin: 8px 0 10px;
  color: var(--muted);
  line-height: 1.45;
}
body[data-page="app"] .team-preview-line.neutral-preview small {
  max-width: 220px;
}

/* Phase 9D: Private beta feedback / report issue system */
.feedback-launcher {
  position: fixed;
  right: 20px;
  bottom: 22px;
  z-index: 70;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 11px 16px;
  border: 1px solid rgba(255, 110, 32, 0.32);
  border-radius: 999px;
  background: linear-gradient(135deg, #ff6e20, #ff8a3d);
  color: #fff;
  font-weight: 800;
  box-shadow: 0 16px 36px rgba(255, 110, 32, 0.26), 0 12px 28px rgba(15, 23, 42, 0.18);
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, opacity 180ms ease;
}
.feedback-launcher:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 42px rgba(255, 110, 32, 0.32), 0 14px 34px rgba(15, 23, 42, 0.22);
}
.feedback-launcher-icon {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  font-size: 14px;
  line-height: 1;
}
.feedback-launcher {
  display: none !important;
}
.feedback-topbar-button {
  white-space: nowrap;
}
.feedback-form {
  display: grid;
  gap: 14px;
}
.feedback-form textarea {
  min-height: 138px;
  resize: vertical;
}
.feedback-context-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 11px 12px;
  border-radius: 16px;
  background: rgba(255, 110, 32, 0.08);
  border: 1px solid rgba(255, 110, 32, 0.18);
  color: var(--muted);
  font-size: 13px;
}
.feedback-context-card strong {
  color: var(--text);
}
.feedback-admin-list {
  display: grid;
  gap: 12px;
}
.feedback-admin-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.07);
}
.feedback-admin-main {
  min-width: 0;
  flex: 1;
}
.feedback-admin-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.feedback-admin-main p {
  margin: 0 0 10px;
  color: var(--text);
  line-height: 1.55;
}
.feedback-admin-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.feedback-admin-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.05);
  color: var(--muted);
  font-size: 12px;
}
.feedback-admin-actions {
  flex-shrink: 0;
  justify-content: flex-end;
}
.status-badge.feedback-status-open {
  background: rgba(255, 110, 32, 0.12);
  color: #b45309;
}
.status-badge.feedback-status-reviewed {
  background: rgba(59, 130, 246, 0.12);
  color: #1d4ed8;
}
.status-badge.feedback-status-resolved {
  background: rgba(34, 197, 94, 0.13);
  color: #15803d;
}
html[data-theme="dark"] .feedback-admin-card {
  background: rgba(15, 23, 42, 0.78);
  border-color: rgba(148, 163, 184, 0.22);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24);
}
html[data-theme="dark"] .feedback-admin-meta span {
  background: rgba(148, 163, 184, 0.12);
}
html[data-theme="dark"] .feedback-context-card {
  background: rgba(255, 110, 32, 0.12);
  border-color: rgba(255, 110, 32, 0.28);
}
html[data-theme="dark"] .status-badge.feedback-status-open {
  color: #fdba74;
}
html[data-theme="dark"] .status-badge.feedback-status-reviewed {
  color: #93c5fd;
}
html[data-theme="dark"] .status-badge.feedback-status-resolved {
  color: #86efac;
}
@media (max-width: 720px) {
  .feedback-launcher {
    right: 14px;
    bottom: 14px;
    min-height: 44px;
    padding: 10px 13px;
    font-size: 13px;
  }
  .feedback-admin-card {
    display: grid;
    gap: 14px;
  }
  .feedback-admin-actions {
    justify-content: stretch;
  }
  .feedback-admin-actions .button {
    flex: 1;
  }
}
@media print {
  .feedback-launcher {
    display: none !important;
  }
}

/* ── 67. Phase 9E: competition source trust states ── */
.tag.trust-verified {
  border-color: rgba(22, 163, 74, 0.28);
  background: rgba(22, 163, 74, 0.12);
  color: #15803d;
}
.tag.trust-review {
  border-color: rgba(245, 158, 11, 0.30);
  background: rgba(245, 158, 11, 0.13);
  color: #b45309;
}
.tag.trust-starter {
  border-color: rgba(100, 116, 139, 0.26);
  background: rgba(100, 116, 139, 0.12);
  color: #475569;
}
.tag.trust-archived {
  border-color: rgba(148, 163, 184, 0.28);
  background: rgba(148, 163, 184, 0.14);
  color: #64748b;
}
.content-trust-panel {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(255, 106, 26, 0.24);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255, 106, 26, 0.08), rgba(255, 255, 255, 0.72));
}
.trust-panel-header {
  display: grid;
  gap: 4px;
}
.trust-panel-header strong {
  color: var(--ink);
  font-size: 14px;
}
.trust-panel-header small {
  color: var(--muted);
  line-height: 1.45;
}
.trust-checkbox-stack {
  display: grid;
  gap: 10px;
  align-content: start;
}
.checkbox-card {
  display: flex !important;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.82);
  cursor: pointer;
}
.checkbox-card input {
  width: 18px;
  height: 18px;
  accent-color: var(--orange);
}
.checkbox-card span {
  font-weight: 700;
  color: var(--ink);
}
.content-source-card {
  margin-top: 14px;
  border-color: rgba(255, 106, 26, 0.22);
  background: rgba(255, 106, 26, 0.06);
}
.import-fitting-notice {
  margin-top: -6px;
  padding: 6px 10px;
  border: 1px solid rgba(251, 191, 36, 0.4);
  background: rgba(251, 191, 36, 0.12);
  border-radius: 10px;
  color: var(--ink);
  overflow-wrap: anywhere;
  word-break: break-word;
}
html[data-theme="dark"] .import-fitting-notice {
  border-color: rgba(251, 191, 36, 0.34);
  background: rgba(251, 191, 36, 0.13);
  color: var(--ink);
}
.import-suggestion-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}
.import-suggestion-chip {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.82);
  min-width: 0;
}
.import-suggestion-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.import-suggestion-head strong {
  font-size: 13px;
  color: var(--ink);
}
.import-suggestion-value {
  font-weight: 700;
  color: var(--ink);
  overflow-wrap: anywhere;
  word-break: break-word;
}
.import-suggestion-evidence {
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.4;
}
.import-suggestion-candidates {
  margin: 0;
  padding-left: 18px;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.import-suggestion-candidates li {
  margin-bottom: 2px;
}
.import-listing-signals {
  margin: 6px 0 0;
  padding-left: 18px;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.import-listing-signals li {
  margin-bottom: 2px;
}
.import-suggestion-display-only-note {
  margin-top: 2px;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.status-badge-high {
  border: 1px solid rgba(34, 197, 94, 0.34);
  background: rgba(34, 197, 94, 0.14);
  color: #15803d;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.status-badge-review {
  border: 1px solid rgba(251, 191, 36, 0.4);
  background: rgba(251, 191, 36, 0.16);
  color: #92400e;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
html[data-theme="dark"] .import-suggestion-chip {
  border-color: rgba(148, 163, 184, 0.20);
  background: rgba(15, 23, 42, 0.72);
}
html[data-theme="dark"] .import-suggestion-head strong,
html[data-theme="dark"] .import-suggestion-value {
  color: var(--ink);
}
html[data-theme="dark"] .status-badge-high {
  border-color: rgba(34, 197, 94, 0.34);
  background: rgba(34, 197, 94, 0.14);
  color: #86efac;
}
html[data-theme="dark"] .status-badge-review {
  border-color: rgba(251, 191, 36, 0.34);
  background: rgba(251, 191, 36, 0.13);
  color: #fcd34d;
}
.table-subcopy {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}
html[data-theme="dark"] .tag.trust-verified {
  border-color: rgba(34, 197, 94, 0.34);
  background: rgba(34, 197, 94, 0.14);
  color: #86efac;
}
html[data-theme="dark"] .tag.trust-review {
  border-color: rgba(251, 191, 36, 0.34);
  background: rgba(251, 191, 36, 0.13);
  color: #fcd34d;
}
html[data-theme="dark"] .tag.trust-starter,
html[data-theme="dark"] .tag.trust-archived {
  border-color: rgba(148, 163, 184, 0.24);
  background: rgba(148, 163, 184, 0.12);
  color: #cbd5e1;
}
html[data-theme="dark"] .content-trust-panel {
  border-color: rgba(255, 106, 26, 0.28);
  background: linear-gradient(135deg, rgba(255, 106, 26, 0.12), rgba(15, 23, 42, 0.72));
}
html[data-theme="dark"] .checkbox-card {
  border-color: rgba(148, 163, 184, 0.20);
  background: rgba(15, 23, 42, 0.72);
}
html[data-theme="dark"] .checkbox-card span,
html[data-theme="dark"] .trust-panel-header strong {
  color: var(--ink);
}
html[data-theme="dark"] .content-source-card {
  border-color: rgba(255, 106, 26, 0.28);
  background: rgba(255, 106, 26, 0.10);
}
@media (max-width: 720px) {
  .content-trust-panel {
    padding: 14px;
    border-radius: 18px;
  }
  .trust-checkbox-stack {
    gap: 8px;
  }
  .checkbox-card {
    min-height: 48px;
  }
}

/* Phase 9G.1: beta polish cleanup */
.archived-competition-details {
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(148, 163, 184, 0.06);
  overflow: hidden;
}
.archived-competition-details > summary {
  cursor: pointer;
  list-style: none;
  padding: 13px 16px;
  color: var(--muted);
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.archived-competition-details > summary::-webkit-details-marker {
  display: none;
}
.archived-competition-details > summary::after {
  content: 'Show';
  font-size: 12px;
  color: var(--brand);
  border: 1px solid rgba(255, 106, 26, 0.24);
  border-radius: 999px;
  padding: 4px 10px;
  background: rgba(255, 106, 26, 0.08);
}
.archived-competition-details[open] > summary::after {
  content: 'Hide';
}
.archived-competition-details > .stack,
.archived-competition-details > .table-card {
  margin: 0 12px 12px;
}
.admin-archived-competitions {
  margin-top: 18px;
}
.admin-archived-competitions .table-card {
  box-shadow: none;
}
html[data-theme="dark"] .archived-competition-details {
  border-color: rgba(148, 163, 184, 0.18);
  background: rgba(15, 23, 42, 0.54);
}
html[data-theme="dark"] .archived-competition-details > summary {
  color: #cbd5e1;
}
@media (max-width: 720px) {
  .archived-competition-details > summary {
    padding: 12px 14px;
  }
  .archived-competition-details > .stack,
  .archived-competition-details > .table-card {
    margin: 0 8px 10px;
  }
}


/* ---------- Phase 9L: Full poster image viewer ---------- */
.competition-poster.is-expandable {
  cursor: zoom-in;
  border: 1px solid var(--border-soft);
  appearance: none;
  -webkit-appearance: none;
  padding: 0;
  color: inherit;
  font: inherit;
  text-align: inherit;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.competition-poster.is-expandable:hover {
  transform: translateY(-1px);
  border-color: var(--orange-soft-2);
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.16);
}
html[data-theme="dark"] .competition-poster.is-expandable:hover {
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.46), 0 0 0 1px rgba(255, 106, 26, 0.18) inset;
}
.poster-expand-hint {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.78);
  color: #fff;
  padding: 7px 11px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .01em;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.30);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.competition-poster.is-expandable:hover .poster-expand-hint {
  background: linear-gradient(135deg, #ff6a1a, #ff8a3d);
  border-color: rgba(255, 255, 255, 0.30);
}
body.poster-lightbox-open { overflow: hidden; }
.poster-lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483200;
  display: grid;
  place-items: center;
  padding: clamp(14px, 3vw, 34px);
  background: rgba(2, 6, 23, 0.82);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  animation: posterLightboxFade .16s ease-out;
}
.poster-lightbox-panel {
  width: min(1120px, 100%);
  max-height: min(92vh, 920px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 14px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 24px;
  background: rgba(15, 23, 42, 0.96);
  padding: clamp(14px, 2vw, 20px);
  box-shadow: 0 35px 90px rgba(0, 0, 0, 0.56);
}
.poster-lightbox-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: #fff;
}
.poster-lightbox-toolbar strong {
  display: block;
  margin-top: 4px;
  font-size: clamp(16px, 2vw, 22px);
  line-height: 1.2;
}
.poster-lightbox-kicker {
  display: inline-flex;
  width: fit-content;
  border: 1px solid rgba(255, 106, 26, 0.34);
  border-radius: 999px;
  background: rgba(255, 106, 26, 0.14);
  color: #ffb07a;
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.poster-lightbox-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.poster-lightbox-open-tab {
  min-height: 42px;
  padding: 10px 14px;
}
.poster-lightbox-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  overflow: auto;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 18px;
  background:
    linear-gradient(45deg, rgba(148, 163, 184, 0.08) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(148, 163, 184, 0.08) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(148, 163, 184, 0.08) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(148, 163, 184, 0.08) 75%),
    rgba(2, 6, 23, 0.40);
  background-size: 28px 28px;
  background-position: 0 0, 0 14px, 14px -14px, -14px 0;
}
.poster-lightbox-stage img {
  display: block;
  max-width: 100%;
  max-height: min(74vh, 760px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
}
.poster-lightbox-help {
  margin: 0;
  color: rgba(226, 232, 240, 0.72);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}
.poster-lightbox-error {
  display: none;
  margin: 0;
  color: #fecaca;
  font-weight: 700;
}
.poster-lightbox-panel.image-load-error .poster-lightbox-stage img { display: none; }
.poster-lightbox-panel.image-load-error .poster-lightbox-error { display: block; }
@keyframes posterLightboxFade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (max-width: 680px) {
  .poster-expand-hint {
    right: 10px;
    bottom: 10px;
    padding: 6px 9px;
    font-size: 11px;
  }
  .poster-lightbox-overlay { padding: 10px; }
  .poster-lightbox-panel {
    max-height: 94vh;
    border-radius: 18px;
    padding: 12px;
  }
  .poster-lightbox-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }
  .poster-lightbox-actions {
    width: 100%;
    justify-content: space-between;
  }
  .poster-lightbox-open-tab { flex: 1; justify-content: center; }
  .poster-lightbox-stage img { max-height: 68vh; }
}
@media (prefers-reduced-motion: reduce) {
  .competition-poster.is-expandable,
  .competition-poster.is-expandable:hover {
    transition: none;
    transform: none;
  }
  .poster-lightbox-overlay { animation: none; }
}

/* ── 62. Phase 9M: Team handoff hub instead of full workspace clone ── */
.workspace-handoff-intro,
.workspace-handoff-hero {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: stretch;
  border: 1px solid var(--border-soft);
  border-radius: 20px;
  padding: 16px;
  background:
    radial-gradient(circle at top left, rgba(255, 106, 26, 0.14), transparent 38%),
    linear-gradient(180deg, #FFFFFF 0%, #FFF8F2 100%);
  box-shadow: var(--polish-card-shadow-soft, 0 10px 30px rgba(15, 23, 42, 0.06));
}
.workspace-handoff-intro {
  align-items: center;
  margin-bottom: 14px;
}
.workspace-handoff-intro p,
.workspace-handoff-hero p {
  margin: 4px 0 0;
}
.workspace-handoff-intro strong,
.handoff-status-card {
  align-self: stretch;
  display: grid;
  align-content: center;
  min-width: 210px;
  border-radius: 16px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(255, 106, 26, 0.18);
  color: var(--orange-dark);
}
.workspace-handoff-hero h3 {
  margin: 4px 0 6px;
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.12;
  color: var(--polish-text-strong);
}
.handoff-status-card strong {
  color: var(--orange-dark);
  font-size: 15px;
}
.handoff-status-card p {
  font-size: 13px;
  color: var(--polish-text-muted);
  font-weight: 700;
}
.workspace-link-form-panel {
  display: grid;
  gap: 12px;
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  padding: 16px;
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFCFE 100%);
}
.workspace-link-form-panel h3 {
  margin: 0;
  font-size: 16px;
}
.workspace-link-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.workspace-link-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.workspace-link-grid.compact {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.workspace-link-card {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 14px;
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  background: #fff;
  text-decoration: none;
  color: var(--polish-text-body);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.workspace-link-card:hover,
.workspace-link-card:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(255, 106, 26, 0.42);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.10);
  outline: none;
}
.workspace-link-icon {
  display: grid;
  place-items: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: var(--orange-soft);
  color: var(--orange-dark);
  font-weight: 700;
}
.workspace-link-card strong {
  display: block;
  color: var(--polish-text-strong);
  font-size: 14px;
}
.workspace-link-card small {
  display: block;
  margin-top: 3px;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--polish-text-muted);
  font-size: 12px;
  font-weight: 700;
}
.workspace-empty-handoff {
  border: 1px dashed rgba(255, 106, 26, 0.36);
  border-radius: 18px;
  padding: 16px;
  background: rgba(255, 106, 26, 0.06);
}
.workspace-empty-handoff strong {
  color: var(--orange-dark);
}
.handoff-checklist {
  display: grid;
  gap: 10px;
}
.handoff-step {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  align-items: start;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  padding: 12px;
  background: #fff;
}
.handoff-step > span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #f1f5f9;
  color: var(--polish-text-muted);
  font-weight: 700;
}
.handoff-step.done > span {
  background: rgba(34, 197, 94, 0.14);
  color: #15803d;
}
.handoff-step strong {
  color: var(--polish-text-strong);
  font-size: 14px;
}
.handoff-step p {
  margin: 4px 0 0;
  color: var(--polish-text-muted);
  font-size: 13px;
  font-weight: 700;
}
.team-notes-board {
  max-height: 240px;
}
.member-card-line .profile-social-links,
.member-card-line .profile-social-list,
.member-card-line .social-link-row {
  margin-top: 8px;
}

html[data-theme="dark"] .workspace-handoff-intro,
html[data-theme="dark"] .workspace-handoff-hero {
  background:
    radial-gradient(circle at top left, rgba(255, 106, 26, 0.18), transparent 42%),
    linear-gradient(180deg, rgba(17, 24, 39, 0.92) 0%, rgba(15, 23, 42, 0.94) 100%);
  border-color: rgba(148, 163, 184, 0.20);
}
html[data-theme="dark"] .workspace-handoff-intro strong,
html[data-theme="dark"] .handoff-status-card,
html[data-theme="dark"] .workspace-link-form-panel,
html[data-theme="dark"] .workspace-link-card,
html[data-theme="dark"] .handoff-step {
  background: rgba(15, 23, 42, 0.82);
  border-color: rgba(148, 163, 184, 0.20);
}
html[data-theme="dark"] .workspace-link-card strong,
html[data-theme="dark"] .handoff-step strong,
html[data-theme="dark"] .workspace-handoff-hero h3 {
  color: var(--ink-2);
}
html[data-theme="dark"] .workspace-link-card small,
html[data-theme="dark"] .handoff-step p,
html[data-theme="dark"] .handoff-status-card p {
  color: var(--body);
}
html[data-theme="dark"] .workspace-empty-handoff {
  background: rgba(255, 106, 26, 0.10);
  border-color: rgba(255, 106, 26, 0.32);
}
html[data-theme="dark"] .workspace-link-icon {
  background: rgba(255, 106, 26, 0.18);
  color: #FFB07A;
}

@media (max-width: 760px) {
  .workspace-handoff-intro,
  .workspace-handoff-hero {
    flex-direction: column;
  }
  .workspace-handoff-intro strong,
  .handoff-status-card {
    min-width: 0;
  }
  .workspace-link-form-grid,
  .workspace-link-grid {
    grid-template-columns: 1fr;
  }
  .workspace-link-card {
    min-height: 64px;
  }
  .workspace-link-card small {
    max-width: min(70vw, 360px);
  }
}

/* Phase 9M.1 — Professional Team Hub / external handoff polish */
.team-hub-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 16px;
  align-items: stretch;
  padding: 16px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 22px;
  background:
    radial-gradient(circle at 8% 0%, rgba(255, 106, 26, 0.15), transparent 32%),
    linear-gradient(135deg, rgba(15, 23, 42, 0.92), rgba(17, 24, 39, 0.72));
  margin-bottom: 16px;
}
[data-theme="light"] .team-hub-header {
  background:
    radial-gradient(circle at 8% 0%, rgba(255, 106, 26, 0.12), transparent 32%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.9));
}
.team-hub-header p { margin: 6px 0 0; color: var(--muted); line-height: 1.6; }
.team-hub-meter {
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 18px;
  padding: 12px;
  background: rgba(2, 6, 23, 0.28);
}
[data-theme="light"] .team-hub-meter { background: rgba(255, 255, 255, 0.72); }
.team-hub-meter span,
.team-hub-meter small { display: block; color: var(--muted); font-weight: 800; }
.team-hub-meter > div,
.mini-progress {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.2);
  margin: 8px 0;
}
.team-hub-meter i,
.mini-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand), #ff9b55);
  box-shadow: 0 0 18px rgba(255, 106, 26, 0.35);
}
.team-handoff-hero.refined {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.75fr);
  gap: 18px;
  padding: 20px;
  border: 1px solid rgba(255, 106, 26, 0.22);
  border-radius: 24px;
  background:
    radial-gradient(circle at top right, rgba(255, 106, 26, 0.18), transparent 36%),
    linear-gradient(135deg, rgba(15, 23, 42, 0.94), rgba(31, 41, 55, 0.64));
}
[data-theme="light"] .team-handoff-hero.refined {
  background:
    radial-gradient(circle at top right, rgba(255, 106, 26, 0.14), transparent 36%),
    linear-gradient(135deg, rgba(255,255,255,0.98), rgba(248,250,252,0.9));
}
.handoff-hero-copy h3 {
  max-width: 780px;
  margin: 6px 0 10px;
  font-size: clamp(1.3rem, 2.2vw, 2rem);
  line-height: 1.18;
}
.handoff-status-stack { display: grid; gap: 12px; }
.handoff-score-card,
.handoff-mini-card,
.handoff-purpose-grid article,
.handoff-guidance-card {
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 18px;
  padding: 14px;
  background: rgba(15, 23, 42, 0.62);
}
[data-theme="light"] .handoff-score-card,
[data-theme="light"] .handoff-mini-card,
[data-theme="light"] .handoff-purpose-grid article,
[data-theme="light"] .handoff-guidance-card {
  background: rgba(255, 255, 255, 0.76);
}
.handoff-score-card span,
.handoff-mini-card span { display: block; color: var(--muted); font-weight: 800; margin-bottom: 4px; }
.handoff-score-card strong { font-size: 2rem; }
.handoff-mini-card strong { display: block; margin-bottom: 4px; }
.handoff-mini-card p { margin: 0; color: var(--muted); overflow-wrap: anywhere; }
.handoff-purpose-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.handoff-purpose-grid article strong { display: block; margin-bottom: 6px; }
.handoff-purpose-grid article p { margin: 0; color: var(--muted); line-height: 1.55; }
.workspace-empty-handoff {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-style: dashed;
}
.workspace-empty-handoff p { max-width: 760px; }
.workspace-primary-action { white-space: nowrap; }
.handoff-guidance-card { margin-top: 12px; }
.handoff-guidance-card p { margin: 6px 0 0; color: var(--muted); line-height: 1.6; }
.compact-team-context .simple-grid article {
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 18px;
  padding: 14px;
  background: rgba(15, 23, 42, 0.36);
}
[data-theme="light"] .compact-team-context .simple-grid article { background: rgba(255,255,255,0.72); }
@media (max-width: 760px) {
  .team-hub-header,
  .team-handoff-hero.refined,
  .handoff-purpose-grid {
    grid-template-columns: 1fr;
  }
  .workspace-empty-handoff {
    align-items: stretch;
    flex-direction: column;
  }
  .workspace-primary-action,
  .workspace-empty-handoff .button {
    width: 100%;
    justify-content: center;
  }
}

/* Phase 9P — corrected Dashboard right action panel layout */
.dashboard-personal-shell {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 400px) !important;
  gap: 18px !important;
  align-items: start;
}
.dashboard-main-column,
.dashboard-action-column,
.team-hub-main,
.team-hub-side {
  min-width: 0;
}
.dashboard-main-column {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.dashboard-action-column {
  align-self: start;
  position: sticky;
  top: 88px;
}
.dashboard-top-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.95fr);
  gap: 16px;
  align-items: stretch;
}
.dashboard-top-grid > .content-card {
  min-width: 0;
  height: 100%;
}
.dashboard-personal-shell .dashboard-activity-card,
.dashboard-personal-shell .saved-hub-card,
.dashboard-personal-shell .dashboard-feature-card {
  grid-column: auto !important;
}
.dashboard-action-panel {
  overflow: hidden;
  border-top: 4px solid var(--orange, #ff6a1a);
}
.dashboard-action-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border-soft);
}
.dashboard-action-header h3 {
  margin-bottom: 6px;
}
.dashboard-action-header .button {
  flex: 0 0 auto;
}
.dashboard-request-tabs,
.team-action-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-bottom: 14px;
}
.dashboard-request-tab {
  appearance: none;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  padding: 13px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  font: inherit;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.dashboard-request-tab:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 106, 26, 0.42);
}
.dashboard-request-tab.active {
  background: linear-gradient(135deg, rgba(255, 106, 26, 0.18), rgba(255, 106, 26, 0.06));
  border-color: rgba(255, 106, 26, 0.52);
}
.dashboard-request-tab span {
  min-width: 0;
  line-height: 1.25;
}
.dashboard-request-tab strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--orange, #ff6a1a);
  background: rgba(255, 106, 26, 0.14);
  font-variant-numeric: tabular-nums;
}
.dashboard-request-content {
  max-height: min(520px, calc(100vh - 360px));
  overflow: auto;
  padding-right: 2px;
}
.dashboard-request-content .request-row,
.dashboard-request-content .list-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.dashboard-request-content .button-row,
.dashboard-request-content .request-actions {
  justify-content: flex-start;
  flex-wrap: wrap;
}
.team-hub-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
  gap: 18px;
  align-items: start;
}
.team-hub-layout.single {
  grid-template-columns: 1fr;
}
.team-hub-main,
.team-hub-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.team-hub-side {
  position: sticky;
  top: 88px;
}
.team-hub-hero h3 {
  font-size: clamp(22px, 2.2vw, 30px);
}
@media (max-width: 1120px) {
  .dashboard-personal-shell,
  .team-hub-layout {
    grid-template-columns: 1fr !important;
  }
  .dashboard-action-column,
  .team-hub-side {
    position: static;
  }
  .dashboard-request-content {
    max-height: none;
    overflow: visible;
  }
}
@media (max-width: 760px) {
  .dashboard-top-grid {
    grid-template-columns: 1fr;
  }
  .dashboard-action-header {
    flex-direction: column;
  }
  .dashboard-action-header .button {
    width: 100%;
    justify-content: center;
  }
}

/* Phase 9Q — polished Dashboard action panel: no nested scroll, lighter visual hierarchy */
.dashboard-action-column {
  position: static !important;
  top: auto !important;
  align-self: start;
}
.dashboard-action-panel {
  overflow: visible !important;
  border-top: 3px solid var(--orange, #ff6a1a);
  box-shadow: 0 18px 45px rgba(3, 7, 18, 0.22);
}
.dashboard-action-header {
  padding-bottom: 12px;
  margin-bottom: 12px;
  gap: 12px;
}
.dashboard-action-header h3 {
  font-size: 21px;
  line-height: 1.05;
}
.dashboard-action-header .muted {
  max-width: 30rem;
  line-height: 1.45;
}
.dashboard-request-tabs {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin-bottom: 14px !important;
}
.dashboard-request-tab {
  min-height: 66px;
  border-radius: 15px !important;
  padding: 10px 11px !important;
  background: rgba(255, 255, 255, 0.026) !important;
  box-shadow: none;
}
.dashboard-request-tab:nth-child(5) {
  grid-column: 1 / -1;
}
.dashboard-request-tab span {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.dashboard-request-tab b {
  font-size: 13.5px;
  line-height: 1.1;
}
.dashboard-request-tab small {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.15;
}
.dashboard-request-tab strong {
  min-width: 30px !important;
  height: 30px !important;
  padding: 0 9px !important;
  font-size: 14px;
}
.dashboard-request-tab.active {
  background: linear-gradient(135deg, rgba(255, 106, 26, 0.18), rgba(255, 255, 255, 0.035)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.dashboard-request-content {
  max-height: none !important;
  overflow: visible !important;
  padding-right: 0 !important;
}
.dashboard-request-content-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 13px;
  margin-bottom: 10px;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  background: rgba(255,255,255,0.025);
}
.dashboard-request-content-head div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.dashboard-request-content-head span,
.dashboard-request-content-head small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.dashboard-request-content-head strong {
  color: var(--text);
  line-height: 1.1;
}
.dashboard-request-preview-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.dashboard-request-preview-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 16px;
  background: rgba(8, 14, 28, 0.34);
}
.dashboard-request-preview-copy {
  min-width: 0;
}
.dashboard-request-preview-copy strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
}
.dashboard-request-meta-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 7px;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.35;
}
.dashboard-request-meta-line .status-badge {
  margin-right: 0;
}
.dashboard-request-preview-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}
.button.micro,
a.button.micro {
  min-height: 34px;
  padding: 8px 12px;
  border-radius: 11px;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}
.dashboard-request-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-soft);
}
.dashboard-request-footer span {
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  text-align: right;
}
.dashboard-request-empty {
  margin: 0;
  padding: 18px !important;
  border-radius: 16px;
}
@media (max-width: 1240px) {
  .dashboard-personal-shell {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 360px) !important;
  }
  .dashboard-request-tabs {
    grid-template-columns: 1fr !important;
  }
  .dashboard-request-tab:nth-child(5) {
    grid-column: auto;
  }
}
@media (max-width: 1120px) {
  .dashboard-action-column {
    position: static !important;
  }
  .dashboard-request-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .dashboard-request-tab:nth-child(5) {
    grid-column: 1 / -1;
  }
}
@media (max-width: 760px) {
  .dashboard-request-tabs {
    grid-template-columns: 1fr !important;
  }
  .dashboard-request-tab:nth-child(5) {
    grid-column: auto;
  }
  .dashboard-request-preview-row {
    grid-template-columns: 1fr;
  }
  .dashboard-request-preview-actions {
    justify-content: flex-start;
  }
  .dashboard-request-footer {
    align-items: stretch;
    flex-direction: column;
  }
  .dashboard-request-footer span {
    text-align: left;
  }
}

/* Phase 9R — Team Hub expert polish: stronger hierarchy, calmer actions, better member cards */
.polished-team-hub-layout {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 380px) !important;
  align-items: start;
}
.team-snapshot-card {
  padding: 22px !important;
  border-top: 3px solid rgba(255, 106, 26, 0.8);
  background:
    radial-gradient(circle at 95% 0%, rgba(255, 106, 26, 0.18), transparent 34%),
    linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(17, 24, 39, 0.78)) !important;
}
[data-theme="light"] .team-snapshot-card {
  background:
    radial-gradient(circle at 95% 0%, rgba(255, 106, 26, 0.13), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(255, 247, 237, 0.64)) !important;
}
.team-snapshot-topline,
.team-snapshot-title-row,
.team-actions-footer,
.team-actions-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.team-snapshot-title-row {
  align-items: center;
  margin: 8px 0 18px;
}
.team-snapshot-title-copy {
  min-width: 0;
}
.team-snapshot-title-copy h3 {
  margin: 0 0 7px;
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 0.98;
  letter-spacing: -0.04em;
}
.team-snapshot-title-copy p {
  max-width: 720px;
  margin: 0;
  line-height: 1.55;
}
.team-snapshot-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  flex: 0 0 auto;
}

.team-tools-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin: -2px 0 16px;
}
.team-tools-label {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(148, 163, 184, 0.08);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.team-tools-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.team-tool-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 56px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(15, 23, 42, 0.26);
  color: var(--text);
  text-decoration: none;
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}
.team-tool-chip:is(a, button) {
  cursor: pointer;
}
.team-tool-chip:is(a, button):hover,
.team-tool-chip:is(a, button):focus-visible {
  transform: translateY(-1px);
  border-color: rgba(255, 106, 26, 0.34);
  background: rgba(255, 106, 26, 0.08);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.15);
}
.team-tool-chip.connected {
  border-color: rgba(255, 106, 26, 0.28);
  background: linear-gradient(135deg, rgba(255, 106, 26, 0.10), rgba(255, 255, 255, 0.02));
}
.team-tool-chip.workspace {
  border-color: rgba(255, 106, 26, 0.34);
  background: linear-gradient(135deg, rgba(255, 106, 26, 0.16), rgba(255, 255, 255, 0.02));
}
.team-tool-chip.pending small {
  color: #ffb07a;
}
.team-tool-chip.disabled {
  opacity: 0.72;
}
.team-tool-svg {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
}
.team-tool-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}
.team-tool-copy strong,
.team-tool-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.team-tool-copy strong {
  color: var(--text);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.15;
}
.team-tool-copy small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.1;
}
[data-theme="light"] .team-tool-chip {
  background: rgba(255, 255, 255, 0.72);
}
[data-theme="light"] .team-tool-chip.connected,
[data-theme="light"] .team-tool-chip.workspace {
  background: linear-gradient(135deg, rgba(255, 239, 228, 0.95), rgba(255, 255, 255, 0.82));
}
.team-status-pill,
.team-action-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid rgba(255, 106, 26, 0.30);
  background: rgba(255, 106, 26, 0.12);
  color: #ffb07a;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
[data-theme="light"] .team-status-pill,
[data-theme="light"] .team-action-status {
  color: #9a3f0f;
}
.team-action-status.clear {
  border-color: rgba(34, 197, 94, 0.28);
  background: rgba(34, 197, 94, 0.10);
  color: #86efac;
}
[data-theme="light"] .team-action-status.clear {
  color: #15803d;
}
.team-snapshot-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 16px;
}
.team-snapshot-stat {
  min-width: 0;
  padding: 13px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 17px;
  background: rgba(2, 6, 23, 0.22);
}
[data-theme="light"] .team-snapshot-stat {
  background: rgba(255, 255, 255, 0.62);
}
.team-snapshot-stat span,
.team-snapshot-stat small {
  display: block;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.25;
}
.team-snapshot-stat strong {
  display: block;
  margin: 5px 0 2px;
  overflow: hidden;
  color: var(--text);
  font-size: 20px;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.team-context-block {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--border-soft);
}
.team-context-block > div {
  min-width: 0;
}
.team-context-block strong {
  display: block;
  margin-bottom: 8px;
  color: var(--text);
}
.team-members-panel .section-title-row,
.recommended-members-panel .section-title-row {
  margin-bottom: 14px;
}
.team-member-list {
  display: grid;
  gap: 10px;
}
.team-member-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 17px;
  background: rgba(15, 23, 42, 0.34);
}
[data-theme="light"] .team-member-card {
  background: rgba(255, 255, 255, 0.72);
}
.team-member-card .member-avatar {
  width: 42px;
  height: 42px;
  border-radius: 14px;
}
.team-member-copy {
  min-width: 0;
}
.team-member-copy strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.team-member-copy p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 800;
}
.team-member-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-align: right;
}
.member-role-pill {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(148, 163, 184, 0.10);
  color: var(--muted);
  font-weight: 700;
}
.member-role-pill.owner {
  border-color: rgba(255, 106, 26, 0.30);
  background: rgba(255, 106, 26, 0.12);
  color: #ffb07a;
}
[data-theme="light"] .member-role-pill.owner {
  color: #9a3f0f;
}
.team-member-actions .button.danger,
.soft-danger {
  border-color: rgba(239, 68, 68, 0.28) !important;
  background: rgba(239, 68, 68, 0.08) !important;
  color: #fca5a5 !important;
  box-shadow: none !important;
}
[data-theme="light"] .team-member-actions .button.danger,
[data-theme="light"] .soft-danger {
  color: #b91c1c !important;
}
.team-actions-card {
  border-top-width: 3px !important;
}
.team-actions-header {
  align-items: flex-start;
}
.team-actions-header .team-action-status {
  margin-top: 2px;
}
.team-action-list.polished {
  gap: 9px;
  margin-bottom: 12px;
}
.team-action-tab {
  min-height: 72px !important;
}
.team-action-tab.attention {
  border-color: rgba(255, 106, 26, 0.42) !important;
  background: linear-gradient(135deg, rgba(255, 106, 26, 0.16), rgba(255, 255, 255, 0.025)) !important;
}
.team-actions-footer {
  align-items: stretch;
  padding-top: 12px;
  border-top: 1px solid var(--border-soft);
}
.team-actions-footer .button {
  flex: 1;
  justify-content: center;
}
.recommended-members-panel .section-title-row p {
  margin-top: 4px;
}
.polished-member-row {
  grid-template-columns: auto minmax(0, 1fr) auto !important;
}
.polished-member-row .recommended-member-actions {
  display: inline-flex;
  gap: 8px;
  flex-wrap: nowrap;
}
.polished-member-row .recommended-member-actions .button {
  min-width: auto;
  box-shadow: none;
}
.polished-member-row .recommended-member-actions .button.primary {
  min-width: 102px;
  box-shadow: 0 12px 26px rgba(255, 106, 26, 0.18);
}
@media (max-width: 1180px) {
  .polished-team-hub-layout {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 880px) {
  .team-snapshot-title-row,
  .team-snapshot-topline,
  .team-actions-footer,
  .team-actions-header {
    flex-direction: column;
    align-items: stretch;
  }
  .team-snapshot-actions,
  .team-actions-footer .button,
  .team-snapshot-actions .button {
    width: 100%;
    justify-content: center;
  }
  .team-snapshot-grid,
  .team-context-block {
    grid-template-columns: 1fr 1fr;
  }
  .team-tools-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .team-tools-label {
    justify-content: center;
  }
  .team-tools-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .team-member-card {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .team-member-meta,
  .team-member-actions {
    grid-column: 2 / -1;
    align-items: flex-start;
    text-align: left;
  }
  .polished-member-row {
    grid-template-columns: auto minmax(0, 1fr) !important;
  }
  .polished-member-row .recommended-member-actions {
    grid-column: 1 / -1;
    width: 100%;
  }
  .polished-member-row .recommended-member-actions .button {
    flex: 1;
    justify-content: center;
  }
}
@media (max-width: 560px) {
  .team-tools-row,
  .team-snapshot-grid,
  .team-context-block {
    grid-template-columns: 1fr;
  }
  .team-tools-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .team-snapshot-card {
    padding: 17px !important;
  }
}

/* Phase 9U — Team member profile preview */
.team-member-card-clickable {
  cursor: pointer;
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}
.team-member-card-clickable:hover,
.team-member-card-clickable:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(255, 106, 26, 0.34);
  background: linear-gradient(135deg, rgba(255, 106, 26, 0.08), rgba(255, 255, 255, 0.02));
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.16);
  outline: none;
}
.team-member-view-hint {
  display: inline-block;
  margin-top: 4px;
  color: #ffb07a;
  font-size: 11px;
  font-weight: 800;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 0.16s ease, transform 0.16s ease;
}
.team-member-card-clickable:hover .team-member-view-hint,
.team-member-card-clickable:focus-visible .team-member-view-hint {
  opacity: 1;
  transform: translateY(0);
}
.team-member-profile-modal {
  display: grid;
  gap: 18px;
}
.team-member-profile-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  align-items: flex-start;
  padding: 16px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(255, 106, 26, 0.08), rgba(15, 23, 42, 0.18));
}
.team-member-profile-identity {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.team-member-profile-identity h3 {
  margin: 0;
  color: var(--text);
  font-size: clamp(22px, 3vw, 32px);
  line-height: 1.05;
}
.team-member-profile-identity p {
  margin: 0;
}
.team-member-profile-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.member-profile-section {
  display: grid;
  gap: 10px;
  padding-top: 2px;
}
.member-profile-section h3 {
  margin: 0;
  font-size: 15px;
}
html[data-theme="light"] .team-member-card-clickable:hover,
html[data-theme="light"] .team-member-card-clickable:focus-visible {
  background: linear-gradient(135deg, rgba(255, 239, 228, 0.92), rgba(255, 255, 255, 0.82));
}
html[data-theme="light"] .team-member-profile-head {
  background: linear-gradient(135deg, rgba(255, 239, 228, 0.92), rgba(255, 255, 255, 0.78));
}
@media (max-width: 760px) {
  .team-member-profile-head,
  .team-member-profile-grid {
    grid-template-columns: 1fr;
  }
  .team-member-view-hint {
    opacity: 1;
    transform: none;
  }
}

/* Phase 10A — Workspace polish pass: clearer modal hierarchy, real tool logos, stronger request actions */
.workspace-command-header {
  grid-template-columns: minmax(0, 1fr) minmax(210px, 250px) !important;
  margin-bottom: 14px !important;
}
.workspace-header-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
}
.workspace-header-pills span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 6px 10px;
  border: 1px solid rgba(148, 163, 184, 0.20);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
[data-theme="light"] .workspace-header-pills span {
  background: rgba(255, 255, 255, 0.68);
}
.workspace-tabs {
  gap: 8px !important;
  padding: 7px !important;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 18px;
  background: rgba(15, 23, 42, 0.30);
}
[data-theme="light"] .workspace-tabs {
  background: rgba(248, 250, 252, 0.92);
}
.workspace-tabs button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  border-radius: 13px !important;
}
.workspace-tabs button span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.workspace-tabs button strong {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.16);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}
.workspace-tabs button.active strong,
.workspace-tabs button.has-count strong {
  background: rgba(255, 106, 26, 0.18);
  color: #ffb07a;
}
[data-theme="light"] .workspace-tabs button.active strong,
[data-theme="light"] .workspace-tabs button.has-count strong {
  color: #9a3f0f;
}
.workspace-link-card {
  position: relative;
  min-height: 76px;
  padding-right: 42px !important;
}
.workspace-link-icon {
  overflow: hidden;
  background: rgba(255, 106, 26, 0.12) !important;
}
.workspace-link-icon .team-tool-svg {
  width: 25px;
  height: 25px;
}
.workspace-link-copy {
  min-width: 0;
}
.workspace-link-open {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.12);
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}
.team-tools-grid {
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)) !important;
}
.team-tool-chip {
  min-height: 58px;
}
.workspace-members-section .compact-title {
  align-items: center;
}
.workspace-member-list {
  gap: 11px;
}
.workspace-empty-note {
  margin: 0;
  padding: 16px;
  border: 1px dashed rgba(148, 163, 184, 0.26);
  border-radius: 16px;
}
.workspace-actions-section {
  display: grid;
  gap: 14px;
}
.workspace-actions-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
  gap: 14px;
  align-items: stretch;
  padding: 16px;
  border: 1px solid rgba(255, 106, 26, 0.22);
  border-radius: 22px;
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 106, 26, 0.13), transparent 34%),
    rgba(15, 23, 42, 0.34);
}
[data-theme="light"] .workspace-actions-hero {
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 106, 26, 0.10), transparent 34%),
    rgba(255, 255, 255, 0.78);
}
.workspace-actions-hero h3 {
  margin: 4px 0 6px !important;
  color: var(--text) !important;
}
.workspace-actions-hero p {
  margin: 0;
}
.workspace-actions-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.workspace-actions-stats span {
  display: grid;
  align-content: center;
  min-width: 0;
  min-height: 78px;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 16px;
  background: rgba(2, 6, 23, 0.22);
}
[data-theme="light"] .workspace-actions-stats span {
  background: rgba(255, 255, 255, 0.66);
}
.workspace-actions-stats strong {
  display: block;
  color: var(--text);
  font-size: 24px;
  line-height: 1;
}
.workspace-actions-stats small {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.2;
}
.workspace-action-list {
  display: grid;
  gap: 10px;
}
.workspace-action-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 18px;
  background: rgba(15, 23, 42, 0.28);
}
[data-theme="light"] .workspace-action-row {
  background: rgba(255, 255, 255, 0.74);
}
.workspace-action-row.urgent {
  border-color: rgba(255, 106, 26, 0.28);
  background: linear-gradient(135deg, rgba(255, 106, 26, 0.10), rgba(15, 23, 42, 0.18));
}
[data-theme="light"] .workspace-action-row.urgent {
  background: linear-gradient(135deg, rgba(255, 239, 228, 0.92), rgba(255, 255, 255, 0.84));
}
.workspace-action-copy {
  min-width: 0;
}
.workspace-action-copy strong,
.request-history-row.polished strong {
  display: block;
  color: var(--text);
  line-height: 1.2;
}
.workspace-action-copy p,
.request-history-row.polished p {
  margin: 5px 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
}
.workspace-action-copy small,
.request-history-row.polished small {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 780;
}
.workspace-action-controls {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  flex-wrap: wrap;
}
.workspace-empty-state {
  padding: 18px;
  border: 1px dashed rgba(148, 163, 184, 0.28);
  border-radius: 18px;
  background: rgba(148, 163, 184, 0.06);
}
.workspace-empty-state strong {
  color: var(--text);
}
.workspace-empty-state p {
  margin: 5px 0 0;
}
.workspace-history-details {
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 18px;
  padding: 12px 14px;
  background: rgba(15, 23, 42, 0.18);
}
[data-theme="light"] .workspace-history-details {
  background: rgba(255, 255, 255, 0.68);
}
.workspace-history-details summary {
  cursor: pointer;
  color: var(--text);
  font-weight: 700;
}
.workspace-history-details .request-history-list {
  margin-top: 12px;
}
.request-history-row.polished {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}
@media (min-width: 960px) {
  .modal-card:has(.workspace-command-header) {
    width: min(1040px, calc(100vw - 36px));
  }
}
@media (max-width: 820px) {
  .workspace-command-header,
  .workspace-actions-hero {
    grid-template-columns: 1fr !important;
  }
  .workspace-actions-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .workspace-action-row {
    grid-template-columns: 1fr;
  }
  .workspace-action-controls {
    justify-content: flex-start;
  }
}
@media (max-width: 560px) {
  .workspace-header-pills,
  .workspace-action-controls {
    align-items: stretch;
    flex-direction: column;
  }
  .workspace-header-pills span,
  .workspace-action-controls .button,
  .workspace-action-controls .tag,
  .workspace-action-controls .status-pill {
    justify-content: center;
    width: 100%;
  }
  .workspace-actions-stats {
    grid-template-columns: 1fr;
  }
  .workspace-tabs button {
    min-width: 142px;
  }
}

/* W2G Pre-Beta QA patch: critical usability hardening */
select option,
select optgroup {
  background: #ffffff;
  color: #0f172a;
}

select:disabled,
.button:disabled,
button[disabled] {
  cursor: not-allowed;
  opacity: 0.68;
}

html[data-theme="dark"] select option,
html[data-theme="dark"] select optgroup {
  background: #0f172a;
  color: #f8fafc;
}

html[data-theme="dark"] select option:checked,
html[data-theme="dark"] select option:hover {
  background: #1e293b;
  color: #ffffff;
}

.modal-header {
  position: relative;
  z-index: 3;
}

#modalClose,
.modal-header .icon-button {
  position: relative;
  z-index: 5;
  min-width: 42px;
  min-height: 42px;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
}

#modalClose:hover,
.modal-header .icon-button:hover {
  border-color: rgba(255, 106, 26, 0.42);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
}

.workspace-link-form-panel {
  scroll-margin: 96px;
}

.workspace-link-form-panel--focus {
  border-color: rgba(255, 106, 26, 0.66) !important;
  box-shadow: 0 0 0 4px rgba(255, 106, 26, 0.14), 0 20px 50px rgba(15, 23, 42, 0.10) !important;
}

.workspace-link-scroll-hint {
  align-self: center;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 106, 26, 0.12);
  color: var(--orange-dark, #c2410c);
  font-size: 12px;
  font-weight: 800;
}

html[data-theme="dark"] .workspace-link-scroll-hint {
  background: rgba(251, 146, 60, 0.16);
  color: #fed7aa;
}

.team-tool-chip.connected .team-tool-copy small {
  color: #047857;
  font-weight: 700;
}

html[data-theme="dark"] .team-tool-chip.connected .team-tool-copy small {
  color: #6ee7b7;
}

.score-pill,
.match-score,
[class*="match"] .score-pill {
  color: #ffffff !important;
  text-shadow: 0 1px 1px rgba(0,0,0,0.35);
}

.score-pill strong,
.score-pill span,
.score-pill small,
.discovery-score-pill strong,
.discovery-score-pill span,
.discovery-score-pill small {
  color: inherit !important;
}

html[data-theme="dark"] .score-pill,
html[data-theme="dark"] .match-score,
html[data-theme="dark"] [class*="match"] .score-pill {
  color: #ffffff !important;
  text-shadow: 0 1px 1px rgba(0,0,0,0.35);
}

.toast {
  max-width: min(520px, calc(100vw - 32px));
  text-align: center;
  line-height: 1.35;
}

body.modal-open .toast,
.modal-overlay:not(.hidden) ~ .toast {
  bottom: 28px;
}

@media (max-width: 640px) {
  .workspace-link-scroll-hint { display: none; }
  #modalClose,
  .modal-header .icon-button {
    min-width: 46px;
    min-height: 46px;
  }
}

/* ============================================================
   W2G46 patch: Dark theme readability guard for onboarding
   ------------------------------------------------------------
   Some rich onboarding sections live in the older base stylesheet
   and used light-only backgrounds. Keep light theme untouched, but
   force readable dark surfaces for onboarding cards, optional panels,
   notes, and nested choices.
   ============================================================ */
html[data-theme="dark"] .onboarding-page .onboarding-step-section,
html[data-theme="dark"] .onboarding-page .onboarding-more-options {
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 106, 26, 0.10), transparent 36%),
    linear-gradient(180deg, rgba(17, 24, 39, 0.94) 0%, rgba(15, 23, 42, 0.96) 100%) !important;
  border-color: rgba(148, 163, 184, 0.22) !important;
  color: var(--ink-2) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28) !important;
}

html[data-theme="dark"] .onboarding-page .onboarding-step-section.compact {
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 106, 26, 0.08), transparent 32%),
    linear-gradient(180deg, rgba(17, 24, 39, 0.94) 0%, rgba(15, 23, 42, 0.96) 100%) !important;
}

html[data-theme="dark"] .onboarding-page .section-mini-heading h3,
html[data-theme="dark"] .onboarding-page .onboarding-more-options summary span {
  color: #F8FAFC !important;
}

html[data-theme="dark"] .onboarding-page .section-mini-heading p,
html[data-theme="dark"] .onboarding-page .onboarding-more-options summary small {
  color: #CBD5E1 !important;
}

html[data-theme="dark"] .onboarding-page .onboarding-slim-note {
  background: rgba(255, 106, 26, 0.12) !important;
  border-color: rgba(255, 106, 26, 0.30) !important;
  color: #FED7AA !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22) !important;
}

html[data-theme="dark"] .onboarding-page .onboarding-slim-note strong {
  color: #FDBA74 !important;
}

html[data-theme="dark"] .onboarding-page .onboarding-more-options {
  border-style: dashed !important;
}

html[data-theme="dark"] .onboarding-page .onboarding-more-options summary {
  color: #FDBA74 !important;
}

html[data-theme="dark"] .onboarding-page .onboarding-more-options[open] summary {
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

html[data-theme="dark"] .onboarding-page .onboarding-step-section .choice-button,
html[data-theme="dark"] .onboarding-page .onboarding-more-body .choice-button {
  background: rgba(30, 41, 59, 0.92) !important;
  border-color: rgba(148, 163, 184, 0.22) !important;
  color: #E2E8F0 !important;
}

html[data-theme="dark"] .onboarding-page .onboarding-step-section .choice-button:hover,
html[data-theme="dark"] .onboarding-page .onboarding-more-body .choice-button:hover {
  background: rgba(255, 106, 26, 0.12) !important;
  border-color: rgba(255, 106, 26, 0.44) !important;
  color: #FDBA74 !important;
}

html[data-theme="dark"] .onboarding-page .onboarding-step-section .choice-button.active,
html[data-theme="dark"] .onboarding-page .onboarding-more-body .choice-button.active {
  background:
    linear-gradient(180deg, rgba(255, 106, 26, 0.24) 0%, rgba(255, 106, 26, 0.16) 100%) !important;
  border-color: rgba(255, 106, 26, 0.78) !important;
  color: #FFF7ED !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 106, 26, 0.24),
    0 12px 26px rgba(255, 106, 26, 0.13) !important;
}

html[data-theme="dark"] .onboarding-page .simple-grid .info-card {
  background: rgba(17, 24, 39, 0.92) !important;
  border-color: rgba(148, 163, 184, 0.22) !important;
  color: #E2E8F0 !important;
}

html[data-theme="dark"] .onboarding-page .simple-grid .info-card strong {
  color: #F8FAFC !important;
}

/* General dark-theme safety net for white legacy info blocks that may appear
   inside onboarding/profile modals without their own dark override. */
html[data-theme="dark"] .modal-card .onboarding-step-section,
html[data-theme="dark"] .modal-card .onboarding-more-options,
html[data-theme="dark"] .content-card .onboarding-step-section,
html[data-theme="dark"] .content-card .onboarding-more-options {
  background: rgba(17, 24, 39, 0.94) !important;
  border-color: rgba(148, 163, 184, 0.22) !important;
  color: #E2E8F0 !important;
}

/* W2G46 patch: dark overrides for other late-added legacy surfaces */
html[data-theme="dark"] .university-picker-card,
html[data-theme="dark"] .university-field-inline,
html[data-theme="dark"] .profile-university-card {
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 106, 26, 0.08), transparent 34%),
    linear-gradient(180deg, rgba(17, 24, 39, 0.94) 0%, rgba(15, 23, 42, 0.96) 100%) !important;
  border-color: rgba(148, 163, 184, 0.22) !important;
  color: #E2E8F0 !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25) !important;
}

html[data-theme="dark"] .university-input-shell,
html[data-theme="dark"] .university-field-inline .university-input-shell {
  background: rgba(15, 23, 42, 0.86) !important;
  border-color: rgba(148, 163, 184, 0.22) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

html[data-theme="dark"] .profile-university-card strong {
  color: #F8FAFC !important;
}

html[data-theme="dark"] .profile-university-card span,
html[data-theme="dark"] .profile-university-card small {
  color: #CBD5E1 !important;
}

html[data-theme="dark"] .form-warning {
  background: rgba(239, 68, 68, 0.14) !important;
  border-color: rgba(248, 113, 113, 0.32) !important;
  color: #FCA5A5 !important;
}

html[data-theme="dark"] .team-locked-state,
body.theme-dark .team-locked-state {
  border-color: rgba(255, 106, 26, 0.26) !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 106, 26, 0.12), transparent 32%),
    linear-gradient(135deg, rgba(17, 24, 39, 0.94), rgba(15, 23, 42, 0.96)) !important;
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.26) !important;
}

html[data-theme="dark"] .team-locked-card,
body.theme-dark .team-locked-card {
  border-color: rgba(148, 163, 184, 0.20) !important;
  background: rgba(15, 23, 42, 0.78) !important;
}

/* ============================================================
   W2G46 patch: Onboarding selected skill level buttons
   ------------------------------------------------------------
   Replaces the Step 3 dropdown grid with compact tap targets and
   only shows skills derived from the user's Step 2 choices.
   ============================================================ */
.selected-skill-level-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFAF7 100%);
  color: var(--polish-text-strong);
}

.selected-skill-level-intro strong {
  font-size: 14px;
}

.selected-skill-level-intro span {
  color: var(--polish-text-muted);
  font-size: 13px;
  font-weight: 700;
}

.selected-skill-level-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.skill-level-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  background: #FFFFFF;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

.skill-level-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.skill-level-card-head strong {
  color: var(--polish-text-strong);
  font-size: 14px;
  letter-spacing: -0.01em;
}

.skill-level-card-head small {
  color: var(--polish-text-muted);
  font-size: 12px;
  font-weight: 800;
}

.skill-level-button-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.skill-level-button {
  min-height: 42px;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: #F8FAFC;
  color: var(--polish-text-strong);
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .14s ease, background-color .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease;
}

.skill-level-button:hover {
  transform: translateY(-1px);
  border-color: var(--orange-soft-2);
  background: var(--orange-soft);
  color: var(--orange-dark);
}

.skill-level-button.active {
  border-color: var(--orange);
  background: linear-gradient(180deg, var(--orange) 0%, var(--orange-2) 100%);
  color: #FFFFFF;
  box-shadow: 0 10px 22px rgba(255, 106, 26, 0.22);
}

.onboarding-empty-card {
  padding: 18px;
  border: 1px dashed var(--orange-soft-2);
  border-radius: 18px;
  background: var(--orange-soft);
  color: var(--orange-dark);
}

.onboarding-empty-card p {
  margin: 8px 0 0;
  color: var(--polish-text-muted);
  font-weight: 700;
}

html[data-theme="dark"] .selected-skill-level-intro,
body.theme-dark .selected-skill-level-intro {
  background: rgba(17, 24, 39, 0.92) !important;
  border-color: rgba(148, 163, 184, 0.24) !important;
  color: #F8FAFC !important;
}

html[data-theme="dark"] .selected-skill-level-intro span,
body.theme-dark .selected-skill-level-intro span {
  color: #CBD5E1 !important;
}

html[data-theme="dark"] .skill-level-card,
body.theme-dark .skill-level-card {
  background: rgba(17, 24, 39, 0.92) !important;
  border-color: rgba(148, 163, 184, 0.22) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28) !important;
}

html[data-theme="dark"] .skill-level-card-head strong,
body.theme-dark .skill-level-card-head strong {
  color: #F8FAFC !important;
}

html[data-theme="dark"] .skill-level-card-head small,
body.theme-dark .skill-level-card-head small {
  color: #CBD5E1 !important;
}

html[data-theme="dark"] .skill-level-button,
body.theme-dark .skill-level-button {
  background: rgba(30, 41, 59, 0.92) !important;
  border-color: rgba(148, 163, 184, 0.24) !important;
  color: #E2E8F0 !important;
}

html[data-theme="dark"] .skill-level-button:hover,
body.theme-dark .skill-level-button:hover {
  background: rgba(255, 106, 26, 0.14) !important;
  border-color: rgba(255, 106, 26, 0.48) !important;
  color: #FDBA74 !important;
}

html[data-theme="dark"] .skill-level-button.active,
body.theme-dark .skill-level-button.active {
  background: linear-gradient(180deg, rgba(255, 106, 26, 0.95) 0%, rgba(234, 88, 12, 0.95) 100%) !important;
  border-color: rgba(255, 106, 26, 0.95) !important;
  color: #FFFFFF !important;
}

html[data-theme="dark"] .onboarding-empty-card,
body.theme-dark .onboarding-empty-card {
  background: rgba(255, 106, 26, 0.12) !important;
  border-color: rgba(255, 106, 26, 0.34) !important;
  color: #FDBA74 !important;
}

html[data-theme="dark"] .onboarding-empty-card p,
body.theme-dark .onboarding-empty-card p {
  color: #CBD5E1 !important;
}

@media (max-width: 760px) {
  .selected-skill-level-intro {
    align-items: flex-start;
    flex-direction: column;
  }
  .selected-skill-level-grid {
    grid-template-columns: 1fr;
  }
  .skill-level-button-row {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   W2G46 patch: Full onboarding skill inventory
   ------------------------------------------------------------
   Step 3 now uses the same broad skill set used by teams,
   competitions, and member discovery.  The layout is grouped and
   compact so a large skill list stays readable.
   ============================================================ */
.skill-inventory-intro {
  align-items: stretch;
  margin-bottom: 14px;
}

.skill-inventory-intro > div:first-child {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.skill-inventory-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(76px, 1fr));
  gap: 8px;
  align-items: stretch;
  min-width: 180px;
}

.skill-inventory-meta b,
.skill-inventory-meta small {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.skill-inventory-meta b {
  grid-row: 1;
  min-height: 28px;
  border-radius: 999px;
  background: rgba(255, 106, 26, 0.14);
  color: var(--orange-dark);
  font-size: 15px;
  font-weight: 800;
}

.skill-inventory-meta small {
  grid-row: 2;
  color: var(--polish-text-muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
}

.skill-inventory-all-title {
  margin: 16px 0 10px;
  padding: 0 2px;
}

.skill-inventory-all-title h3,
.skill-category-head h3 {
  margin: 0 0 4px;
  color: var(--polish-text-strong);
  font-size: 15px;
  letter-spacing: -0.01em;
}

.skill-inventory-all-title p,
.skill-category-head p {
  margin: 0;
  color: var(--polish-text-muted);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.45;
}

.skill-category-list {
  display: grid;
  gap: 12px;
}

.skill-category-section {
  display: block;
  padding: 14px;
  border: 1px solid var(--border-soft);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.05);
}

.skill-category-recommended {
  margin-bottom: 14px;
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 106, 26, 0.12), transparent 34%),
    rgba(255, 255, 255, 0.88);
  border-color: rgba(255, 106, 26, 0.22);
}

.skill-category-section > summary.skill-category-head {
  cursor: pointer;
  list-style: none;
}

.skill-category-section > summary.skill-category-head::-webkit-details-marker {
  display: none;
}

.skill-category-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.skill-category-section > summary.skill-category-head {
  margin-bottom: 0;
}

.skill-category-section[open] > summary.skill-category-head {
  margin-bottom: 12px;
}

.skill-category-head span {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.12);
  color: var(--polish-text-muted);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.selected-skill-level-grid.compact {
  grid-template-columns: repeat(auto-fit, minmax(184px, 1fr));
  gap: 10px;
}

.selected-skill-level-grid.compact .skill-level-card {
  gap: 9px;
  padding: 12px;
  border-radius: 16px;
  box-shadow: none;
}

.selected-skill-level-grid.compact .skill-level-card.is-suggested {
  border-color: rgba(255, 106, 26, 0.30);
  background:
    linear-gradient(180deg, rgba(255, 250, 247, 0.96), rgba(255, 255, 255, 0.96));
}

.selected-skill-level-grid.compact .skill-level-card.is-selected {
  border-color: rgba(255, 106, 26, 0.42);
}

.skill-level-card-head > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.skill-level-card-head em {
  color: var(--orange-dark);
  font-size: 10.5px;
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.selected-skill-level-grid.compact .skill-level-card-head strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.selected-skill-level-grid.compact .skill-level-button-row {
  gap: 6px;
}

.selected-skill-level-grid.compact .skill-level-button {
  min-height: 34px;
  padding: 0 6px;
  border-radius: 10px;
  font-size: 11.5px;
}

html[data-theme="dark"] .skill-inventory-meta b,
body.theme-dark .skill-inventory-meta b {
  background: rgba(255, 106, 26, 0.18) !important;
  color: #FDBA74 !important;
}

html[data-theme="dark"] .skill-inventory-meta small,
body.theme-dark .skill-inventory-meta small,
html[data-theme="dark"] .skill-inventory-all-title p,
body.theme-dark .skill-inventory-all-title p,
html[data-theme="dark"] .skill-category-head p,
body.theme-dark .skill-category-head p {
  color: #CBD5E1 !important;
}

html[data-theme="dark"] .skill-inventory-all-title h3,
body.theme-dark .skill-inventory-all-title h3,
html[data-theme="dark"] .skill-category-head h3,
body.theme-dark .skill-category-head h3 {
  color: #F8FAFC !important;
}

html[data-theme="dark"] .skill-category-section,
body.theme-dark .skill-category-section {
  background: rgba(17, 24, 39, 0.86) !important;
  border-color: rgba(148, 163, 184, 0.22) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22) !important;
}

html[data-theme="dark"] .skill-category-recommended,
body.theme-dark .skill-category-recommended {
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 106, 26, 0.13), transparent 34%),
    rgba(17, 24, 39, 0.92) !important;
  border-color: rgba(255, 106, 26, 0.28) !important;
}

html[data-theme="dark"] .skill-category-head span,
body.theme-dark .skill-category-head span {
  background: rgba(148, 163, 184, 0.14) !important;
  color: #CBD5E1 !important;
}

html[data-theme="dark"] .selected-skill-level-grid.compact .skill-level-card.is-suggested,
body.theme-dark .selected-skill-level-grid.compact .skill-level-card.is-suggested {
  background:
    linear-gradient(180deg, rgba(30, 41, 59, 0.94), rgba(17, 24, 39, 0.94)) !important;
  border-color: rgba(255, 106, 26, 0.34) !important;
}

html[data-theme="dark"] .skill-level-card-head em,
body.theme-dark .skill-level-card-head em {
  color: #FDBA74 !important;
}

@media (max-width: 860px) {
  .skill-inventory-intro {
    flex-direction: column;
  }
  .skill-inventory-meta {
    width: 100%;
    min-width: 0;
  }
  .skill-category-head {
    flex-direction: column;
    align-items: flex-start;
  }
  .selected-skill-level-grid.compact {
    grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  }
}

@media (max-width: 540px) {
  .selected-skill-level-grid.compact {
    grid-template-columns: 1fr;
  }
  .selected-skill-level-grid.compact .skill-level-button-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}


/* W2G — Skill Level Onboarding · v4 clean merge */
/*
 * W2G — Skill Level Onboarding · v4 patch
 * Replaces the heavy card grid with compact rows grouped by category.
 * Scoped entirely to .sl-* and [data-sl-*] selectors so nothing else breaks.
 * ─────────────────────────────────────────────────────────────────────────── */

/* ─── Page header ─────────────────────────────────────────────────────────── */
.sl-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 14px;
}

.sl-page-header-text {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.sl-page-header-text strong {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--polish-text-strong);
}

.sl-page-header-text span {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--polish-text-muted);
  line-height: 1.45;
}

.sl-stats-row {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  align-items: center;
}

.sl-stat-pill {
  display: flex;
  width: 62px;
  height: 62px;
  flex: 0 0 62px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0;
  border-radius: 12px;
  background: rgba(255, 106, 26, 0.11);
  font-size: 17px;
  font-weight: 800;
  color: var(--orange-dark);
  line-height: 1;
}

.sl-stat-pill span {
  margin-top: 3px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--polish-text-muted);
}

.sl-stat-pill.muted {
  background: rgba(148, 163, 184, 0.11);
  color: var(--polish-text-muted);
}

/* ─── Toolbar (search + filter toggle) ───────────────────────────────────── */
.sl-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
}

.sl-search-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
}

.sl-search-icon {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--polish-text-muted);
  pointer-events: none;
}

.sl-search-input {
  width: 100%;
  height: 36px;
  padding: 0 12px 0 32px;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: #FFFFFF;
  color: var(--polish-text-strong);
  font-size: 13px;
  font-weight: 600;
  outline: none;
  box-sizing: border-box;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.sl-search-input::placeholder {
  color: var(--polish-text-muted);
  font-weight: 500;
}

.sl-search-input:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(255, 106, 26, 0.12);
}

/* Toggle: "Selected only" */
.sl-toggle-label {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
}

.sl-toggle-checkbox {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.sl-toggle-track {
  display: inline-block;
  position: relative;
  width: 32px;
  height: 18px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.28);
  transition: background .18s ease;
  flex-shrink: 0;
}

.sl-toggle-track::after {
  content: '';
  position: absolute;
  left: 2px;
  top: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
  transition: transform .18s ease;
}

.sl-toggle-checkbox:checked + .sl-toggle-track {
  background: var(--orange);
}

.sl-toggle-checkbox:checked + .sl-toggle-track::after {
  transform: translateX(14px);
}

.sl-toggle-checkbox:disabled + .sl-toggle-track {
  opacity: .4;
  cursor: not-allowed;
}

.sl-toggle-label:has(.sl-toggle-checkbox:disabled) {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
}

.sl-toggle-text {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--polish-text-muted);
}

/* ─── Recommended section (non-collapsible) ──────────────────────────────── */
.sl-cat--reco {
  margin-bottom: 14px;
  padding: 12px 14px 14px;
  border: 1px solid rgba(255, 106, 26, 0.22);
  border-radius: 16px;
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 106, 26, 0.08), transparent 38%),
    #FFFFFF;
}

.sl-cat--reco .sl-cat-hd {
  border-bottom: 1px solid rgba(255, 106, 26, 0.14);
  padding-bottom: 10px;
  margin-bottom: 10px;
}

.sl-cat--reco .sl-badge {
  background: rgba(255, 106, 26, 0.14);
  color: var(--orange-dark);
}

/* ─── Section divider ────────────────────────────────────────────────────── */
.sl-section-divider {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 18px 0 10px;
  padding: 0 2px;
}

.sl-section-divider span {
  font-size: 13px;
  font-weight: 800;
  color: var(--polish-text-strong);
  letter-spacing: -0.01em;
}

.sl-section-divider small {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--polish-text-muted);
  line-height: 1.4;
}

/* ─── Category list ──────────────────────────────────────────────────────── */
.sl-categories {
  display: grid;
  gap: 8px;
}

/* ─── Individual category (details/summary) ──────────────────────────────── */
.sl-cat {
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: #FFFFFF;
  overflow: hidden;
}

.sl-cat-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

details.sl-cat > summary.sl-cat-hd::-webkit-details-marker {
  display: none;
}

.sl-cat-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.sl-cat-name {
  font-size: 13px;
  font-weight: 800;
  color: var(--polish-text-strong);
  letter-spacing: -0.01em;
}

.sl-cat-desc {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--polish-text-muted);
  line-height: 1.38;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 280px;
}

.sl-cat-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.sl-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.14);
  font-size: 11px;
  font-weight: 700;
  color: var(--polish-text-muted);
  white-space: nowrap;
}

.sl-chevron {
  display: flex;
  align-items: center;
  color: var(--polish-text-muted);
  transition: transform .2s ease;
}

details.sl-cat[open] > summary .sl-chevron {
  transform: rotate(180deg);
}

/* ─── Skill list (rows) ──────────────────────────────────────────────────── */
.sl-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border-soft);
  background: #FAFBFC;
}

/* ─── Individual skill row ───────────────────────────────────────────────── */
.sl-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 14px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
  transition: background .12s ease;
}

.sl-row:last-child {
  border-bottom: none;
}

.sl-row:hover {
  background: rgba(148, 163, 184, 0.07);
}

.sl-row.is-selected {
  background: rgba(255, 106, 26, 0.05);
  border-bottom-color: rgba(255, 106, 26, 0.1);
}

.sl-row-info {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  flex: 1;
}

.sl-skill-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--polish-text-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sl-tag {
  display: inline-flex;
  align-items: center;
  height: 17px;
  padding: 0 6px;
  border-radius: 4px;
  background: rgba(255, 106, 26, 0.12);
  color: var(--orange-dark);
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  flex-shrink: 0;
}

/* ─── Level buttons ──────────────────────────────────────────────────────── */
.sl-level-group {
  display: flex;
  gap: 5px;
  flex-shrink: 0;
}

.sl-lvl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  min-width: 30px;
  padding: 0 9px;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  background: #F1F5F9;
  color: var(--polish-text-muted);
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
  transition: background .13s ease, border-color .13s ease, color .13s ease, transform .1s ease, box-shadow .13s ease;
  white-space: nowrap;
}

.sl-lvl-btn:hover {
  background: rgba(255, 106, 26, 0.1);
  border-color: rgba(255, 106, 26, 0.4);
  color: var(--orange-dark);
  transform: translateY(-1px);
}

.sl-lvl-btn.active {
  background: linear-gradient(160deg, var(--orange) 0%, #EA580C 100%);
  border-color: var(--orange);
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(255, 106, 26, 0.28);
}

.sl-lvl-btn:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

/* Show only abbreviated label on narrow widths */
.sl-btn-label { display: inline; }
.sl-btn-abbr  { display: none; }

/* ─── Hidden rows (filter) ───────────────────────────────────────────────── */
.sl-row.sl-hidden {
  display: none;
}

/* An empty category after filter gets a nudge */
.sl-cat[data-sl-empty] > .sl-cat-hd {
  opacity: .45;
  pointer-events: none;
}

/* ─── Dark theme ─────────────────────────────────────────────────────────── */
html[data-theme="dark"] .sl-page-header-text strong,
body.theme-dark .sl-page-header-text strong {
  color: #F1F5F9 !important;
}

html[data-theme="dark"] .sl-page-header-text span,
body.theme-dark .sl-page-header-text span {
  color: #94A3B8 !important;
}

html[data-theme="dark"] .sl-stat-pill,
body.theme-dark .sl-stat-pill {
  background: rgba(255, 106, 26, 0.16) !important;
  color: #FDBA74 !important;
}

html[data-theme="dark"] .sl-stat-pill.muted,
body.theme-dark .sl-stat-pill.muted {
  background: rgba(148, 163, 184, 0.12) !important;
  color: #94A3B8 !important;
}

html[data-theme="dark"] .sl-stat-pill span,
body.theme-dark .sl-stat-pill span {
  color: #64748B !important;
}

html[data-theme="dark"] .sl-search-input,
body.theme-dark .sl-search-input {
  background: rgba(30, 41, 59, 0.9) !important;
  border-color: rgba(148, 163, 184, 0.22) !important;
  color: #F1F5F9 !important;
}

html[data-theme="dark"] .sl-search-input::placeholder,
body.theme-dark .sl-search-input::placeholder {
  color: #475569 !important;
}

html[data-theme="dark"] .sl-search-input:focus,
body.theme-dark .sl-search-input:focus {
  border-color: rgba(255, 106, 26, 0.6) !important;
  box-shadow: 0 0 0 3px rgba(255, 106, 26, 0.12) !important;
}

html[data-theme="dark"] .sl-search-icon,
body.theme-dark .sl-search-icon {
  color: #475569 !important;
}

html[data-theme="dark"] .sl-toggle-text,
body.theme-dark .sl-toggle-text {
  color: #64748B !important;
}

html[data-theme="dark"] .sl-toggle-track,
body.theme-dark .sl-toggle-track {
  background: rgba(148, 163, 184, 0.22) !important;
}

html[data-theme="dark"] .sl-section-divider span,
body.theme-dark .sl-section-divider span {
  color: #E2E8F0 !important;
}

html[data-theme="dark"] .sl-section-divider small,
body.theme-dark .sl-section-divider small {
  color: #64748B !important;
}

html[data-theme="dark"] .sl-cat,
body.theme-dark .sl-cat {
  background: rgba(17, 24, 39, 0.9) !important;
  border-color: rgba(148, 163, 184, 0.15) !important;
}

html[data-theme="dark"] .sl-cat-name,
body.theme-dark .sl-cat-name {
  color: #E2E8F0 !important;
}

html[data-theme="dark"] .sl-cat-desc,
body.theme-dark .sl-cat-desc {
  color: #475569 !important;
}

html[data-theme="dark"] .sl-badge,
body.theme-dark .sl-badge {
  background: rgba(148, 163, 184, 0.12) !important;
  color: #64748B !important;
}

html[data-theme="dark"] .sl-chevron,
body.theme-dark .sl-chevron {
  color: #475569 !important;
}

html[data-theme="dark"] .sl-list,
body.theme-dark .sl-list {
  background: rgba(15, 23, 42, 0.5) !important;
  border-top-color: rgba(148, 163, 184, 0.1) !important;
}

html[data-theme="dark"] .sl-row,
body.theme-dark .sl-row {
  border-bottom-color: rgba(148, 163, 184, 0.08) !important;
}

html[data-theme="dark"] .sl-row:hover,
body.theme-dark .sl-row:hover {
  background: rgba(255, 255, 255, 0.04) !important;
}

html[data-theme="dark"] .sl-row.is-selected,
body.theme-dark .sl-row.is-selected {
  background: rgba(255, 106, 26, 0.07) !important;
  border-bottom-color: rgba(255, 106, 26, 0.1) !important;
}

html[data-theme="dark"] .sl-skill-name,
body.theme-dark .sl-skill-name {
  color: #CBD5E1 !important;
}

html[data-theme="dark"] .sl-tag,
body.theme-dark .sl-tag {
  background: rgba(255, 106, 26, 0.18) !important;
  color: #FDBA74 !important;
}

html[data-theme="dark"] .sl-lvl-btn,
body.theme-dark .sl-lvl-btn {
  background: rgba(30, 41, 59, 0.8) !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
  color: #64748B !important;
}

html[data-theme="dark"] .sl-lvl-btn:hover,
body.theme-dark .sl-lvl-btn:hover {
  background: rgba(255, 106, 26, 0.14) !important;
  border-color: rgba(255, 106, 26, 0.4) !important;
  color: #FDBA74 !important;
}

html[data-theme="dark"] .sl-lvl-btn.active,
body.theme-dark .sl-lvl-btn.active {
  background: linear-gradient(160deg, rgba(255,106,26,.95) 0%, rgba(234,88,12,.95) 100%) !important;
  border-color: rgba(255, 106, 26, .8) !important;
  color: #FFFFFF !important;
}

html[data-theme="dark"] .sl-cat--reco,
body.theme-dark .sl-cat--reco {
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 106, 26, 0.1), transparent 40%),
    rgba(17, 24, 39, 0.9) !important;
  border-color: rgba(255, 106, 26, 0.24) !important;
}

html[data-theme="dark"] .sl-cat--reco .sl-cat-hd,
body.theme-dark .sl-cat--reco .sl-cat-hd {
  border-bottom-color: rgba(255, 106, 26, 0.12) !important;
}

html[data-theme="dark"] .sl-cat--reco .sl-badge,
body.theme-dark .sl-cat--reco .sl-badge {
  background: rgba(255, 106, 26, 0.18) !important;
  color: #FDBA74 !important;
}

/* ─── Mobile layout ──────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .sl-page-header {
    flex-direction: column;
    gap: 10px;
  }

  .sl-stats-row {
    width: 100%;
  }

  .sl-stat-pill {
    flex: 0 0 62px;
  }

  .sl-toolbar {
    flex-wrap: wrap;
    gap: 8px;
  }

  .sl-search-wrap {
    width: 100%;
  }

  .sl-cat-desc {
    display: none; /* hide on small screens; too narrow */
  }
}

/* On very narrow screens, show abbreviated button labels */
@media (max-width: 600px) {
  .sl-lvl-btn {
    min-width: 26px;
    padding: 0 6px;
  }

  .sl-btn-label { display: none; }
  .sl-btn-abbr  { display: inline; }
}

/*
 * Suppress the OLD skill-level styles when this new file is loaded.
 * We zero out the main old classes so there's no bleed.
 */
.selected-skill-level-intro,
.selected-skill-level-grid,
.skill-level-card,
.skill-level-card-head,
.skill-level-button-row,
.skill-level-button,
.skill-inventory-intro,
.skill-inventory-meta,
.skill-inventory-all-title,
.skill-category-list,
.skill-category-section,
.skill-category-head {
  /* Reset — these elements should no longer appear on the skill step. */
  all: unset;
  display: revert;
}


/* W2G v4 contrast tuning for Thai/dark onboarding readability */
html[data-theme="dark"] .sl-cat-desc,
body.theme-dark .sl-cat-desc,
html[data-theme="dark"] .sl-section-divider small,
body.theme-dark .sl-section-divider small,
html[data-theme="dark"] .sl-toggle-text,
body.theme-dark .sl-toggle-text,
html[data-theme="dark"] .sl-stat-pill span,
body.theme-dark .sl-stat-pill span {
  color: #94A3B8 !important;
}

html[data-theme="dark"] .sl-search-input::placeholder,
body.theme-dark .sl-search-input::placeholder,
html[data-theme="dark"] .sl-search-icon,
body.theme-dark .sl-search-icon,
html[data-theme="dark"] .sl-chevron,
body.theme-dark .sl-chevron {
  color: #94A3B8 !important;
}

html[data-theme="dark"] .sl-lvl-btn,
body.theme-dark .sl-lvl-btn {
  color: #CBD5E1 !important;
}

html[data-theme="dark"] .sl-badge,
body.theme-dark .sl-badge {
  color: #CBD5E1 !important;
}

.sl-hidden {
  display: none !important;
}

[data-sl-section][data-sl-empty] .sl-cat-hd,
[data-sl-section][data-sl-empty] .sl-list {
  opacity: .52;
}

/* W2G48 patch: keep Skill Inventory Selected-only toggle orange in dark theme */
html[data-theme="dark"] .sl-toggle-checkbox:checked + .sl-toggle-track,
body.theme-dark .sl-toggle-checkbox:checked + .sl-toggle-track {
  background: linear-gradient(135deg, var(--orange) 0%, #EA580C 100%) !important;
  box-shadow: 0 0 0 3px rgba(255, 106, 26, 0.14), 0 8px 18px rgba(255, 106, 26, 0.22) !important;
}

html[data-theme="dark"] .sl-toggle-checkbox:checked + .sl-toggle-track::after,
body.theme-dark .sl-toggle-checkbox:checked + .sl-toggle-track::after {
  background: #FFFFFF !important;
  transform: translateX(14px) !important;
}

html[data-theme="dark"] .sl-toggle-label:has(.sl-toggle-checkbox:checked) .sl-toggle-text,
body.theme-dark .sl-toggle-label:has(.sl-toggle-checkbox:checked) .sl-toggle-text {
  color: #FDBA74 !important;
}

/* W2G48 patch: Login page dark-theme color polish + top-right controls spacing */
@media (min-width: 900px) {
  body[data-page="login"] .auth-form-panel {
    padding-top: clamp(84px, 8vh, 112px) !important;
  }

  body[data-page="login"] .auth-card-redesign {
    margin-top: 16px !important;
  }

  body[data-page="login"] .auth-language-row {
    position: fixed !important;
    top: 22px !important;
    right: 28px !important;
    z-index: 80 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
  }
}

html[data-theme="dark"] body[data-page="login"] .auth-card-redesign {
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 106, 26, 0.09), transparent 34%),
    linear-gradient(180deg, rgba(17, 24, 39, 0.94) 0%, rgba(15, 23, 42, 0.96) 100%) !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

html[data-theme="dark"] body[data-page="login"] .auth-tabs {
  background: rgba(15, 23, 42, 0.76) !important;
  border-color: rgba(148, 163, 184, 0.20) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

html[data-theme="dark"] body[data-page="login"] .auth-tabs button {
  background: transparent !important;
  color: #94A3B8 !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body[data-page="login"] .auth-tabs button:hover {
  color: #E2E8F0 !important;
  background: rgba(148, 163, 184, 0.10) !important;
}

html[data-theme="dark"] body[data-page="login"] .auth-tabs button.active {
  background: linear-gradient(135deg, rgba(255, 106, 26, 0.22) 0%, rgba(234, 88, 12, 0.14) 100%) !important;
  color: #FED7AA !important;
  border-color: rgba(255, 106, 26, 0.38) !important;
  box-shadow: 0 10px 24px rgba(255, 106, 26, 0.14), inset 0 0 0 1px rgba(255, 106, 26, 0.16) !important;
}

html[data-theme="dark"] body[data-page="login"] .role-select-box,
html[data-theme="dark"] body[data-page="login"] .auth-card-redesign .auth-role-select {
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 106, 26, 0.08), transparent 34%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.78) 0%, rgba(15, 23, 42, 0.64) 100%) !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

html[data-theme="dark"] body[data-page="login"] .role-select-head .field-help {
  color: #CBD5E1 !important;
}

html[data-theme="dark"] body[data-page="login"] .role-select-head small {
  color: #7C8CA5 !important;
}

html[data-theme="dark"] body[data-page="login"] .auth-card-redesign .role-grid button {
  background: rgba(15, 23, 42, 0.72) !important;
  border-color: rgba(148, 163, 184, 0.20) !important;
  color: #E2E8F0 !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body[data-page="login"] .auth-card-redesign .role-grid button:hover {
  background: rgba(30, 41, 59, 0.82) !important;
  border-color: rgba(255, 106, 26, 0.30) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.16) !important;
}

html[data-theme="dark"] body[data-page="login"] .auth-card-redesign .role-grid button strong {
  color: #E5E7EB !important;
}

html[data-theme="dark"] body[data-page="login"] .auth-card-redesign .role-grid button small {
  color: #94A3B8 !important;
}

html[data-theme="dark"] body[data-page="login"] .auth-card-redesign .role-grid button.active {
  background: linear-gradient(135deg, rgba(255, 106, 26, 0.24) 0%, rgba(234, 88, 12, 0.12) 100%) !important;
  border-color: rgba(255, 106, 26, 0.50) !important;
  color: #FFF7ED !important;
  box-shadow: 0 18px 44px rgba(255, 106, 26, 0.13), inset 0 0 0 1px rgba(255, 106, 26, 0.16) !important;
}

html[data-theme="dark"] body[data-page="login"] .auth-card-redesign .role-grid button.active strong {
  color: #FDBA74 !important;
}

html[data-theme="dark"] body[data-page="login"] .auth-card-redesign .role-grid button.active small {
  color: #CBD5E1 !important;
}

html[data-theme="dark"] body[data-page="login"] .auth-card-redesign .role-grid button.active::after {
  background: linear-gradient(135deg, var(--orange) 0%, #EA580C 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 8px 18px rgba(255, 106, 26, 0.28) !important;
}

html[data-theme="dark"] body[data-page="login"] .auth-language-row .language-switch,
html[data-theme="dark"] body[data-page="login"] .auth-language-row .theme-toggle {
  background: rgba(15, 23, 42, 0.78) !important;
  border-color: rgba(148, 163, 184, 0.24) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.22) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

html[data-theme="dark"] body[data-page="login"] .auth-language-row .theme-toggle {
  color: #FDBA74 !important;
  border-color: rgba(255, 106, 26, 0.34) !important;
  background: rgba(67, 28, 20, 0.82) !important;
}

html[data-theme="dark"] body[data-page="login"] .auth-language-row .language-switch button.active {
  background: rgba(255, 106, 26, 0.18) !important;
  color: #FDBA74 !important;
}

@media (max-width: 899px) {
  body[data-page="login"] .auth-language-row {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    justify-content: flex-end !important;
    margin-bottom: 14px !important;
  }
}

/* W2G48 patch: Register first/last name grid alignment */
body[data-page="login"] #registerForm .two-col {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: end !important;
  width: 100% !important;
}

body[data-page="login"] #registerForm .two-col > label {
  display: grid !important;
  grid-template-rows: auto 50px !important;
  gap: 6px !important;
  min-width: 0 !important;
  width: 100% !important;
  margin: 0 !important;
}

body[data-page="login"] #registerForm .two-col > label > span {
  display: flex !important;
  align-items: flex-end !important;
  min-height: 18px !important;
  line-height: 1.25 !important;
  margin: 0 !important;
}

body[data-page="login"] #registerFirstName,
body[data-page="login"] #registerLastName {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 50px !important;
  min-height: 50px !important;
  box-sizing: border-box !important;
}

@media (max-width: 560px) {
  body[data-page="login"] #registerForm .two-col {
    grid-template-columns: 1fr !important;
  }
}

/* Phase 10B — Dashboard activity cards drive the right detail panel */
.dashboard-context-panel {
  position: sticky;
  top: 92px;
  min-height: 360px;
  border-top: 3px solid rgba(255, 106, 26, 0.86) !important;
  background:
    radial-gradient(circle at 96% 8%, rgba(255, 106, 26, 0.16), transparent 36%),
    linear-gradient(145deg, rgba(15, 23, 42, 0.92), rgba(15, 23, 42, 0.76)) !important;
}
[data-theme="light"] .dashboard-context-panel,
html[data-theme="light"] .dashboard-context-panel {
  background:
    radial-gradient(circle at 96% 8%, rgba(255, 106, 26, 0.12), transparent 38%),
    linear-gradient(145deg, #ffffff, #fff8f3) !important;
}
.activity-metric-button.active,
.activity-metric-button[aria-pressed="true"] {
  border-color: rgba(255, 106, 26, 0.72) !important;
  background:
    linear-gradient(135deg, rgba(255, 106, 26, 0.2), rgba(255, 106, 26, 0.055)) !important;
  box-shadow: 0 18px 34px rgba(255, 106, 26, 0.12), inset 0 1px 0 rgba(255,255,255,0.08);
  transform: translateY(-1px);
}
.activity-metric-button.active small,
.activity-metric-button[aria-pressed="true"] small {
  color: var(--orange, #ff6a1a) !important;
}
.dashboard-action-detail-content {
  animation: dashboardDetailFade .24s ease both;
}
.dashboard-action-panel.panel-fade-in {
  animation: dashboardPanelFade .28s ease both;
}
@keyframes dashboardDetailFade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes dashboardPanelFade {
  from { opacity: .72; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}
.dashboard-saved-action-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.dashboard-saved-action-tile {
  appearance: none;
  border: 1px solid rgba(255, 106, 26, 0.26);
  border-radius: 16px;
  background: rgba(255, 106, 26, 0.08);
  color: var(--text);
  padding: 12px 10px;
  cursor: pointer;
  text-align: left;
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.dashboard-saved-action-tile:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 106, 26, 0.58);
  background: rgba(255, 106, 26, 0.13);
}
.dashboard-saved-action-tile span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 4px;
}
.dashboard-saved-action-tile strong {
  display: block;
  color: var(--orange, #ff6a1a);
  font-size: 22px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.dashboard-saved-preview-row {
  background: rgba(255, 255, 255, 0.026);
}
[data-theme="light"] .dashboard-saved-preview-row,
html[data-theme="light"] .dashboard-saved-preview-row {
  background: #fff;
}
@media (max-width: 1120px) {
  .dashboard-context-panel { position: static; top: auto; }
}
@media (max-width: 620px) {
  .dashboard-saved-action-summary { grid-template-columns: 1fr; }
}

/* Phase 10C — Connected dashboard activity animation */
.activity-metric-button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease;
}

.activity-metric-button::after {
  content: "";
  position: absolute;
  inset: auto 14px 10px 14px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 106, 26, .95), transparent);
  opacity: 0;
  transform: scaleX(.35);
  transition: opacity .18s ease, transform .18s ease;
  z-index: -1;
}

.activity-metric-button.active::after,
.activity-metric-button[aria-pressed="true"]::after {
  opacity: 1;
  transform: scaleX(1);
}

.activity-metric-button.active,
.activity-metric-button[aria-pressed="true"] {
  box-shadow:
    0 18px 34px rgba(255, 106, 26, 0.16),
    0 0 0 1px rgba(255, 106, 26, .18),
    inset 0 1px 0 rgba(255,255,255,0.10) !important;
}

.activity-metric-button.active .activity-icon,
.activity-metric-button[aria-pressed="true"] .activity-icon {
  transform: scale(1.06);
}

.dashboard-activity-pop {
  animation: dashboardActivityPop .34s cubic-bezier(.2, .85, .25, 1) both;
}

@keyframes dashboardActivityPop {
  0% { transform: translateY(-1px) scale(1); }
  42% { transform: translateY(-3px) scale(1.025); }
  100% { transform: translateY(-1px) scale(1); }
}

.dashboard-selection-ghost {
  position: fixed !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  z-index: 9999 !important;
  pointer-events: none !important;
  margin: 0 !important;
  border: 1px solid rgba(255, 106, 26, .72) !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 255, 255, .12), transparent 28%),
    linear-gradient(135deg, rgba(255, 106, 26, .26), rgba(15, 23, 42, .9)) !important;
  color: var(--ink, #f8fafc) !important;
  box-shadow: 0 28px 70px rgba(255, 106, 26, .22), 0 16px 34px rgba(2, 6, 23, .38) !important;
  opacity: .96;
  transform-origin: top left;
  will-change: transform, opacity, filter;
  transition:
    transform .48s cubic-bezier(.16, 1, .3, 1),
    opacity .48s ease,
    filter .48s ease;
}

.dashboard-selection-ghost.is-flying {
  filter: blur(.8px) saturate(1.08);
}

.dashboard-selection-ghost * {
  pointer-events: none !important;
}

.dashboard-panel-linked-in {
  animation: dashboardLinkedPanel .42s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes dashboardLinkedPanel {
  0% {
    opacity: .68;
    transform: translateX(-12px) scale(.985);
    box-shadow: 0 0 0 rgba(255, 106, 26, 0);
  }
  55% {
    opacity: 1;
    transform: translateX(2px) scale(1.004);
    box-shadow: 0 24px 54px rgba(255, 106, 26, .14);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

.dashboard-action-source-line {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  color: var(--orange, #ff6a1a);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .01em;
}

.dashboard-action-source-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--orange, #ff6a1a);
  box-shadow: 0 0 0 5px rgba(255, 106, 26, .12);
}

.dashboard-action-panel.panel-fade-in .dashboard-action-header h3,
.dashboard-action-panel.panel-fade-in .dashboard-action-source-line {
  animation: dashboardDetailCopyIn .26s ease both;
}

@keyframes dashboardDetailCopyIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

html[data-theme="light"] .dashboard-selection-ghost,
[data-theme="light"] .dashboard-selection-ghost {
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 255, 255, .9), transparent 32%),
    linear-gradient(135deg, rgba(255, 126, 54, .38), rgba(255, 255, 255, .96)) !important;
  color: #111827 !important;
  box-shadow: 0 28px 70px rgba(255, 106, 26, .2), 0 16px 34px rgba(15, 23, 42, .12) !important;
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-activity-pop,
  .dashboard-selection-ghost,
  .dashboard-panel-linked-in,
  .dashboard-action-detail-content,
  .dashboard-action-panel.panel-fade-in,
  .dashboard-action-panel.panel-fade-in .dashboard-action-header h3,
  .dashboard-action-panel.panel-fade-in .dashboard-action-source-line {
    animation: none !important;
    transition: none !important;
  }
}

/* Phase 10D — Dashboard detail drawer hidden until an activity is selected */
.dashboard-personal-shell:not(.has-action-drawer) {
  grid-template-columns: minmax(0, 1fr) !important;
}

.dashboard-personal-shell:not(.has-action-drawer) .dashboard-main-column {
  width: 100%;
  min-width: 0;
}

.dashboard-personal-shell.has-action-drawer {
  grid-template-columns: minmax(0, 1fr) minmax(340px, 400px) !important;
  align-items: start !important;
}

.dashboard-action-drawer {
  min-width: 0;
  transform-origin: left center;
  animation: dashboardDrawerFromMain .32s cubic-bezier(.16, 1, .3, 1) both;
}

.dashboard-action-panel.dashboard-drawer-open {
  animation: dashboardDrawerCardIn .34s cubic-bezier(.16, 1, .3, 1) both !important;
}

.dashboard-action-panel.dashboard-drawer-closing {
  animation: dashboardDrawerCardOut .18s ease both !important;
}

.dashboard-action-controls {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.dashboard-panel-close {
  appearance: none;
  width: 38px;
  height: 38px;
  border-radius: 14px;
  border: 1px solid var(--border-soft);
  background: rgba(15, 23, 42, 0.46);
  color: var(--text);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .16s ease, border-color .16s ease, background .16s ease, color .16s ease;
}

.dashboard-panel-close:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 106, 26, .52);
  background: rgba(255, 106, 26, .12);
  color: var(--orange, #ff6a1a);
}

html[data-theme="light"] .dashboard-panel-close,
[data-theme="light"] .dashboard-panel-close {
  background: #fff;
  color: #334155;
}

@keyframes dashboardDrawerFromMain {
  0% {
    opacity: 0;
    transform: translateX(-34px) scale(.975);
    filter: blur(4px);
  }
  64% {
    opacity: 1;
    transform: translateX(3px) scale(1.003);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0);
  }
}

@keyframes dashboardDrawerCardIn {
  from {
    opacity: 0;
    transform: translateX(-22px) scale(.985);
    box-shadow: 0 0 0 rgba(255, 106, 26, 0);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
    box-shadow: 0 22px 56px rgba(255, 106, 26, .12), 0 18px 45px rgba(3, 7, 18, 0.22);
  }
}

@keyframes dashboardDrawerCardOut {
  from { opacity: 1; transform: translateX(0) scale(1); }
  to { opacity: 0; transform: translateX(-18px) scale(.985); }
}

/* Disable the older flying-card effect. The right panel now behaves like a hidden drawer. */
.dashboard-selection-ghost {
  display: none !important;
}

@media (max-width: 1120px) {
  .dashboard-personal-shell.has-action-drawer {
    grid-template-columns: 1fr !important;
  }
  .dashboard-action-drawer {
    animation: dashboardDrawerFromMain .28s cubic-bezier(.16, 1, .3, 1) both;
  }
}

@media (max-width: 760px) {
  .dashboard-action-controls {
    width: 100%;
    justify-content: space-between;
  }
  .dashboard-action-controls .button {
    width: auto !important;
    flex: 1 1 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-action-drawer,
  .dashboard-action-panel.dashboard-drawer-open,
  .dashboard-action-panel.dashboard-drawer-closing {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    filter: none !important;
  }
}

/* Phase 10E — Light theme drawer color cleanup
   The dashboard drawer looks good in dark mode, but the preview rows inherited
   dark translucent surfaces in light mode. Keep the drawer warm without making
   list items look disabled/grey. */
html[data-theme="light"] .dashboard-action-drawer .dashboard-context-panel,
[data-theme="light"] .dashboard-action-drawer .dashboard-context-panel,
html[data-theme="light"] .dashboard-action-panel.dashboard-context-panel,
[data-theme="light"] .dashboard-action-panel.dashboard-context-panel {
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 106, 26, 0.12), transparent 34%),
    linear-gradient(145deg, #ffffff 0%, #fffaf7 72%, #fff3ea 100%) !important;
  border-color: rgba(255, 106, 26, 0.34) !important;
  color: #172033 !important;
  box-shadow: 0 24px 58px rgba(15, 23, 42, 0.10), 0 18px 42px rgba(255, 106, 26, 0.12) !important;
}

html[data-theme="light"] .dashboard-action-panel .dashboard-action-header h3,
[data-theme="light"] .dashboard-action-panel .dashboard-action-header h3,
html[data-theme="light"] .dashboard-action-panel .dashboard-request-content-head strong,
[data-theme="light"] .dashboard-action-panel .dashboard-request-content-head strong,
html[data-theme="light"] .dashboard-action-panel .dashboard-request-preview-copy strong,
[data-theme="light"] .dashboard-action-panel .dashboard-request-preview-copy strong {
  color: #111827 !important;
}

html[data-theme="light"] .dashboard-action-panel .dashboard-action-header .muted,
[data-theme="light"] .dashboard-action-panel .dashboard-action-header .muted,
html[data-theme="light"] .dashboard-action-panel .dashboard-request-meta-line,
[data-theme="light"] .dashboard-action-panel .dashboard-request-meta-line,
html[data-theme="light"] .dashboard-action-panel .dashboard-request-footer span,
[data-theme="light"] .dashboard-action-panel .dashboard-request-footer span,
html[data-theme="light"] .dashboard-action-panel .dashboard-request-content-head span,
[data-theme="light"] .dashboard-action-panel .dashboard-request-content-head span,
html[data-theme="light"] .dashboard-action-panel .dashboard-request-content-head small,
[data-theme="light"] .dashboard-action-panel .dashboard-request-content-head small {
  color: #64748b !important;
}

html[data-theme="light"] .dashboard-action-panel .dashboard-request-content-head,
[data-theme="light"] .dashboard-action-panel .dashboard-request-content-head {
  background: rgba(255, 255, 255, 0.78) !important;
  border-color: rgba(255, 161, 99, 0.32) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}

html[data-theme="light"] .dashboard-action-panel .dashboard-request-preview-list,
[data-theme="light"] .dashboard-action-panel .dashboard-request-preview-list {
  gap: 10px !important;
}

html[data-theme="light"] .dashboard-action-panel .dashboard-request-preview-row,
[data-theme="light"] .dashboard-action-panel .dashboard-request-preview-row {
  background:
    linear-gradient(180deg, #ffffff 0%, #fffdfa 100%) !important;
  border-color: rgba(226, 232, 240, 0.96) !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.055) !important;
}

html[data-theme="light"] .dashboard-action-panel .dashboard-request-preview-row:hover,
[data-theme="light"] .dashboard-action-panel .dashboard-request-preview-row:hover {
  border-color: rgba(255, 106, 26, 0.34) !important;
  background:
    linear-gradient(180deg, #ffffff 0%, #fff7ed 100%) !important;
  transform: translateY(-1px);
}

html[data-theme="light"] .dashboard-action-panel .dashboard-saved-preview-row,
[data-theme="light"] .dashboard-action-panel .dashboard-saved-preview-row {
  background: #ffffff !important;
}

html[data-theme="light"] .dashboard-action-panel .dashboard-request-footer,
[data-theme="light"] .dashboard-action-panel .dashboard-request-footer {
  border-top-color: rgba(226, 232, 240, 0.9) !important;
}

html[data-theme="light"] .dashboard-action-source-line,
[data-theme="light"] .dashboard-action-source-line {
  color: #ea580c !important;
}

html[data-theme="light"] .dashboard-panel-close,
[data-theme="light"] .dashboard-panel-close {
  background: rgba(255, 255, 255, 0.9) !important;
  color: #334155 !important;
  border-color: rgba(226, 232, 240, 0.95) !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="light"] .dashboard-panel-close:hover,
[data-theme="light"] .dashboard-panel-close:hover {
  background: #fff7ed !important;
  color: #ea580c !important;
  border-color: rgba(255, 106, 26, 0.38) !important;
}


/* Phase 10C — Dashboard activity supports six cards */
.dashboard-personal-shell:not(.has-action-drawer) .activity-metric-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.dashboard-personal-shell.has-action-drawer .activity-metric-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1180px) {
  .dashboard-personal-shell:not(.has-action-drawer) .activity-metric-grid,
  .dashboard-personal-shell.has-action-drawer .activity-metric-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .dashboard-personal-shell:not(.has-action-drawer) .activity-metric-grid,
  .dashboard-personal-shell.has-action-drawer .activity-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dashboard-personal-shell .activity-metric:last-child {
    grid-column: auto;
  }
}
@media (max-width: 420px) {
  .dashboard-personal-shell:not(.has-action-drawer) .activity-metric-grid,
  .dashboard-personal-shell.has-action-drawer .activity-metric-grid {
    grid-template-columns: 1fr;
  }
}

/* Phase 10D — language switch dark-theme contrast fix */
html[data-theme="dark"] .language-switch,
[data-theme="dark"] .language-switch,
body.dark .language-switch,
body.theme-dark .language-switch {
  background: rgba(15, 23, 42, 0.84) !important;
  border: 1px solid rgba(148, 163, 184, 0.26) !important;
  box-shadow: 0 14px 34px rgba(2, 6, 23, 0.32) !important;
}

html[data-theme="dark"] .language-switch button,
[data-theme="dark"] .language-switch button,
body.dark .language-switch button,
body.theme-dark .language-switch button {
  background: transparent !important;
  color: rgba(226, 232, 240, 0.72) !important;
}

html[data-theme="dark"] .language-switch button.active,
[data-theme="dark"] .language-switch button.active,
body.dark .language-switch button.active,
body.theme-dark .language-switch button.active {
  background: linear-gradient(135deg, #ff7a2f 0%, #ff5f1a 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 22px rgba(255, 106, 26, 0.32) !important;
}

html[data-theme="dark"] .header-actions,
[data-theme="dark"] .header-actions,
body.dark .header-actions,
body.theme-dark .header-actions {
  gap: 12px !important;
}

/* W2G48 Thai language + English font polish
   DM Sans handles Latin glyphs; Bai Jamjuree handles Thai script. */
:root {
  --wt-font-ui: 'DM Sans', 'Bai Jamjuree', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

html,
body,
button,
input,
textarea,
select,
.wt-app,
.auth-page,
.modal-content,
.team-workspace,
.dashboard-page,
.card,
.btn {
  font-family: var(--wt-font-ui) !important;
}

/* Thai language: Bai Jamjuree first so browser routes Thai glyphs correctly */
html[lang='th'] body,
html[lang='th'] button,
html[lang='th'] input,
html[lang='th'] textarea,
html[lang='th'] select,
html[lang='th'] .wt-app,
html[lang='th'] .auth-page,
html[lang='th'] .modal-content,
html[lang='th'] .team-workspace,
html[lang='th'] .dashboard-page,
html[lang='th'] .card,
html[lang='th'] .btn {
  font-family: 'Bai Jamjuree', 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
}

/* Thai body text needs taller line-height to prevent glyph clipping */
html[lang='th'] body,
html[lang='th'] p,
html[lang='th'] .card,
html[lang='th'] .modal-content,
html[lang='th'] .team-workspace {
  line-height: 1.75;
}

/* =========================================================
   W2G51 Mobile Auth Window UX Polish
   Scope: Login/Register page only
   Goal: show a proper mobile-first auth window instead of a huge desktop hero stack.
   ========================================================= */
@media (max-width: 760px) {
  body[data-page="login"].auth-page {
    min-height: 100dvh;
    overflow-x: hidden;
    background-attachment: fixed;
  }

  body[data-page="login"] .auth-shell.auth-redesign {
    width: min(100%, 430px);
    min-height: 100dvh;
    margin: 0 auto;
    padding: max(14px, env(safe-area-inset-top)) 12px max(28px, env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: 1fr;
    align-content: start;
    gap: 14px;
  }

  body[data-page="login"] .auth-info-panel {
    order: 1;
    min-height: 0;
    width: 100%;
    padding: 10px 4px 2px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible;
  }

  body[data-page="login"] .auth-info-panel::before,
  body[data-page="login"] .auth-info-panel::after,
  body[data-page="login"] .auth-decor,
  body[data-page="login"] .auth-grid-lines {
    display: none !important;
  }

  body[data-page="login"] .auth-brand {
    width: auto;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    position: relative;
    z-index: 2;
  }

  body[data-page="login"] .auth-brand .brand-mark {
    width: 44px;
    height: 44px;
    border-radius: 15px;
    font-size: 0.88rem;
    box-shadow: 0 14px 26px rgba(255, 106, 31, 0.28);
    flex: 0 0 auto;
  }

  body[data-page="login"] .auth-brand strong {
    display: block;
    font-size: 0.98rem;
    line-height: 1.1;
  }

  body[data-page="login"] .auth-brand small {
    display: block;
    max-width: 220px;
    font-size: 0.72rem;
    line-height: 1.3;
    opacity: 0.76;
    white-space: normal;
  }

  body[data-page="login"] .auth-hero-copy,
  body[data-page="login"] .auth-note-grid {
    display: none !important;
  }

  body[data-page="login"] .auth-form-panel {
    order: 2;
    width: 100%;
    min-height: 0;
    padding: 0;
    display: block;
  }

  body[data-page="login"] .auth-form-orb {
    opacity: 0.32;
    filter: blur(22px);
    pointer-events: none;
  }

  body[data-page="login"] .auth-language-row {
    width: 100%;
    position: relative;
    inset: auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    padding: 0 2px;
    z-index: 5;
  }

  body[data-page="login"] .language-switch {
    height: 38px;
    padding: 4px;
    border-radius: 999px;
  }

  body[data-page="login"] .language-switch button {
    min-width: 44px;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 0.74rem;
    letter-spacing: 0.02em;
  }

  body[data-page="login"] .theme-toggle {
    min-height: 38px;
    padding: 0 13px;
    border-radius: 13px;
    white-space: nowrap;
  }

  body[data-page="login"] .theme-toggle-label {
    font-size: 0.75rem;
  }

  body[data-page="login"] .form-card.auth-card-redesign {
    width: 100%;
    max-width: none;
    min-height: 0;
    border-radius: 24px;
    padding: 14px;
    box-shadow: 0 24px 60px rgba(2, 6, 23, 0.28);
  }

  body[data-page="login"] .auth-card-glow {
    opacity: 0.58;
    transform: scale(0.82);
    right: -70px;
    top: -70px;
  }

  body[data-page="login"] .auth-tabs {
    height: 48px;
    padding: 4px;
    margin-bottom: 14px;
    border-radius: 18px;
  }

  body[data-page="login"] .auth-tabs button {
    min-height: 40px;
    border-radius: 14px;
    font-size: 0.88rem;
  }

  body[data-page="login"] .role-select-box.auth-role-select {
    padding: 12px;
    border-radius: 20px;
    margin-bottom: 14px;
  }

  body[data-page="login"] .role-select-head {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
    margin-bottom: 10px;
  }

  body[data-page="login"] .role-select-head .field-help {
    font-size: 0.78rem;
    letter-spacing: 0;
  }

  body[data-page="login"] .role-select-head small {
    max-width: none;
    text-align: left;
    font-size: 0.72rem;
    line-height: 1.35;
    opacity: 0.72;
  }

  body[data-page="login"] .role-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  body[data-page="login"] .role-grid button {
    min-height: 74px;
    padding: 13px 14px;
    border-radius: 16px;
    text-align: left;
  }

  body[data-page="login"] .role-grid button strong {
    font-size: 0.94rem;
  }

  body[data-page="login"] .role-grid button small {
    font-size: 0.78rem;
    line-height: 1.4;
  }

  body[data-page="login"] #authMessage.message {
    margin: 0 0 12px;
    border-radius: 16px;
    padding: 11px 12px;
    font-size: 0.84rem;
    line-height: 1.35;
  }

  body[data-page="login"] form.stack {
    gap: 12px;
  }

  body[data-page="login"] form.stack label {
    gap: 6px;
  }

  body[data-page="login"] form.stack label span {
    font-size: 0.72rem;
    letter-spacing: 0.05em;
  }

  body[data-page="login"] input,
  body[data-page="login"] select,
  body[data-page="login"] textarea {
    min-height: 48px;
    border-radius: 15px;
    font-size: 16px;
    padding: 0 13px;
  }

  body[data-page="login"] .two-col {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  body[data-page="login"] .button.primary.full {
    min-height: 50px;
    border-radius: 16px;
    font-size: 0.92rem;
  }

  body[data-page="login"] .divider {
    margin: 16px 0 12px;
  }

  body[data-page="login"] .divider span {
    font-size: 0.68rem;
    letter-spacing: 0.13em;
  }

  body[data-page="login"] .demo-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  body[data-page="login"] .demo-grid button {
    min-height: 44px;
    border-radius: 15px;
    font-size: 0.84rem;
  }

  body[data-page="login"] .form-card.auth-card-redesign > .field-help.center {
    margin-top: 12px;
    padding: 12px;
    border-radius: 16px;
    font-size: 0.74rem;
    line-height: 1.4;
  }
}

@media (max-width: 430px) {
  body[data-page="login"] .auth-shell.auth-redesign {
    padding-inline: 10px;
  }

  body[data-page="login"] .auth-info-panel {
    padding-inline: 0;
  }

  body[data-page="login"] .auth-brand small {
    max-width: 190px;
  }

  body[data-page="login"] .form-card.auth-card-redesign {
    border-radius: 22px;
    padding: 12px;
  }

  body[data-page="login"] .auth-language-row {
    gap: 7px;
  }

  body[data-page="login"] .language-switch button {
    min-width: 40px;
    padding-inline: 10px;
  }

  body[data-page="login"] .theme-toggle {
    padding-inline: 11px;
  }
}

@media (max-width: 360px) {
  body[data-page="login"] .auth-brand small {
    display: none;
  }

  body[data-page="login"] .language-switch button {
    min-width: 36px;
    padding-inline: 8px;
  }

  body[data-page="login"] .theme-toggle-label {
    display: none;
  }

  body[data-page="login"] .theme-toggle {
    width: 38px;
    justify-content: center;
    padding: 0;
  }
}

/* =========================================================
   W2G51 - Mobile onboarding UX polish
   Goal: make onboarding feel like a native mobile setup flow.
   Desktop remains unchanged; this only applies to small screens.
========================================================= */
@media (max-width: 760px) {
  body.onboarding-page {
    min-height: 100svh;
    overflow-x: hidden;
    background-attachment: scroll !important;
  }

  body.onboarding-page .simple-header {
    position: sticky;
    top: 0;
    z-index: 60;
    min-height: 64px;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.14);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  body.onboarding-page .simple-header .brand-mark,
  body.onboarding-page .simple-header .brand-icon,
  body.onboarding-page .simple-header img {
    transform: scale(.92);
    transform-origin: left center;
  }

  body.onboarding-page .onboarding-shell {
    display: block !important;
    width: min(100%, 430px);
    margin: 0 auto;
    padding: 12px 10px 18px !important;
    min-height: auto;
  }

  body.onboarding-page .onboarding-side {
    display: none !important;
  }

  body.onboarding-page .form-card.wide {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 14px 12px 86px !important;
    border-radius: 24px !important;
    box-shadow: 0 24px 72px rgba(2, 6, 23, .26);
  }

  body.onboarding-page .progress-row {
    position: sticky;
    top: 74px;
    z-index: 55;
    display: grid !important;
    /* auto-fit: works for any number of steps (1 organizer step, 4 personal steps, etc.) */
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 7px;
    margin: -2px -2px 18px;
    padding: 9px 8px;
    border: 1px solid rgba(148, 163, 184, .12);
    border-radius: 18px;
    background: rgba(15, 23, 42, .80);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }

  body.onboarding-page[data-theme="light"] .progress-row,
  body[data-theme="light"].onboarding-page .progress-row {
    background: rgba(255, 255, 255, .88);
    border-color: rgba(15, 23, 42, .08);
    box-shadow: 0 16px 34px rgba(15, 23, 42, .08);
  }

  body.onboarding-page .progress-dot {
    width: 100%;
    height: 7px;
    min-height: 7px;
    border-radius: 999px;
    font-size: 0;
    overflow: hidden;
    background: rgba(148, 163, 184, .26);
  }

  body.onboarding-page .progress-dot.done,
  body.onboarding-page .progress-dot.active {
    background: linear-gradient(90deg, #ff7a22, #ff4f1f);
    box-shadow: 0 0 0 1px rgba(255, 122, 34, .18), 0 8px 18px rgba(255, 98, 31, .24);
  }

  body.onboarding-page #onboardingForm {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  /* Align grid items from top so the tall university picker doesn't stretch adjacent selects */
  body.onboarding-page #onboardingForm .two-col {
    align-items: start;
  }

  body.onboarding-page #onboardingForm h1,
  body.onboarding-page #onboardingForm h2,
  body.onboarding-page #onboardingForm .step-title {
    font-size: clamp(24px, 7vw, 31px) !important;
    line-height: 1.08 !important;
    letter-spacing: -.035em;
    margin-bottom: 10px;
  }

  body.onboarding-page #onboardingForm p,
  body.onboarding-page #onboardingForm .muted,
  body.onboarding-page #onboardingForm .field-help {
    font-size: 13.5px;
    line-height: 1.55;
  }

  body.onboarding-page .choice-grid,
  body.onboarding-page .persona-grid,
  body.onboarding-page .interest-grid,
  body.onboarding-page .role-grid,
  body.onboarding-page .goal-grid,
  body.onboarding-page .card-grid,
  body.onboarding-page .two-col,
  body.onboarding-page .form-grid,
  body.onboarding-page .compact-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  body.onboarding-page .choice-card,
  body.onboarding-page .choice-option,
  body.onboarding-page .selectable-card,
  body.onboarding-page .onboarding-option,
  body.onboarding-page .option-card,
  body.onboarding-page .card-option,
  body.onboarding-page label.choice,
  body.onboarding-page .persona-card,
  body.onboarding-page .interest-card,
  body.onboarding-page .role-card {
    min-height: 76px;
    padding: 14px !important;
    border-radius: 18px !important;
    align-items: flex-start;
  }

  body.onboarding-page input,
  body.onboarding-page textarea,
  body.onboarding-page select {
    min-height: 48px;
    font-size: 16px !important;
    border-radius: 16px !important;
  }

  body.onboarding-page textarea {
    min-height: 116px;
  }

  body.onboarding-page .button-row.between {
    position: sticky;
    bottom: 0;
    z-index: 58;
    display: grid !important;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    gap: 10px;
    margin: 18px -12px -86px;
    padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(148, 163, 184, .14);
    background: linear-gradient(180deg, rgba(15, 23, 42, .70), rgba(15, 23, 42, .96));
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  body.onboarding-page[data-theme="light"] .button-row.between,
  body[data-theme="light"].onboarding-page .button-row.between {
    background: linear-gradient(180deg, rgba(255, 255, 255, .70), rgba(255, 255, 255, .97));
    border-color: rgba(15, 23, 42, .08);
  }

  body.onboarding-page .button-row.between .btn,
  body.onboarding-page .button-row.between button {
    width: 100%;
    min-height: 50px;
    border-radius: 16px;
    font-size: 14px;
    justify-content: center;
  }

  body.onboarding-page .sl-page-header {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 10px;
  }

  body.onboarding-page .sl-page-header-text {
    min-width: 0;
  }

  body.onboarding-page .sl-stats-row {
    display: grid !important;
    grid-template-columns: repeat(2, 62px);
    gap: 9px;
    width: 100%;
  }

  body.onboarding-page .sl-stat-pill {
    width: 62px;
    height: 62px;
    min-height: 62px;
    border-radius: 12px;
  }

  body.onboarding-page .sl-toolbar {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 10px;
    margin: 14px 0;
  }

  body.onboarding-page .sl-search-wrap {
    width: 100%;
  }

  body.onboarding-page .sl-search-input {
    width: 100%;
    min-height: 50px;
    padding-left: 42px !important;
  }

  body.onboarding-page .sl-toggle-label {
    width: 100%;
    justify-content: space-between;
    min-height: 46px;
    padding: 10px 12px;
    border: 1px solid rgba(148, 163, 184, .16);
    border-radius: 16px;
    background: rgba(15, 23, 42, .38);
  }

  body.onboarding-page[data-theme="light"] .sl-toggle-label,
  body[data-theme="light"].onboarding-page .sl-toggle-label {
    background: rgba(255, 255, 255, .72);
    border-color: rgba(15, 23, 42, .08);
  }

  body.onboarding-page .sl-cat,
  body.onboarding-page .sl-cat--reco {
    border-radius: 18px !important;
    overflow: hidden;
  }

  body.onboarding-page .sl-cat-hd {
    min-height: 58px;
    padding: 13px 12px !important;
    align-items: center;
  }

  body.onboarding-page .sl-cat-meta {
    min-width: 0;
  }

  body.onboarding-page .sl-cat-name {
    font-size: 14px;
    line-height: 1.28;
  }

  body.onboarding-page .sl-cat-desc {
    display: none !important;
  }

  body.onboarding-page .sl-section-divider {
    margin: 14px 0 10px;
  }

  body.onboarding-page .sl-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 8px 10px !important;
  }

  body.onboarding-page .sl-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px;
    padding: 12px !important;
    border-radius: 16px !important;
    min-height: 0;
  }

  body.onboarding-page .sl-row-info {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
  }

  body.onboarding-page .sl-skill-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    line-height: 1.3;
  }

  body.onboarding-page .sl-tag {
    flex: 0 0 auto;
    font-size: 10px;
  }

  body.onboarding-page .sl-level-group {
    width: 100%;
    display: grid !important;
    grid-template-columns: minmax(54px, .8fr) repeat(3, minmax(44px, 1fr));
    gap: 8px;
    align-items: center;
  }

  body.onboarding-page .sl-level-group::before {
    content: "ระดับ";
    color: rgba(203, 213, 225, .68);
    font-size: 11px;
    font-weight: 800;
  }

  body.onboarding-page[data-theme="light"] .sl-level-group::before,
  body[data-theme="light"].onboarding-page .sl-level-group::before {
    color: rgba(71, 85, 105, .70);
  }

  body.onboarding-page .sl-lvl-btn {
    min-width: 0;
    width: 100%;
    height: 38px;
    border-radius: 12px;
  }

  body.onboarding-page .sl-btn-abbr {
    display: inline !important;
    font-size: 12px;
    font-weight: 700;
  }

  body.onboarding-page .sl-btn-label {
    display: none !important;
  }

  body.onboarding-page .sl-categories {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
}

@media (max-width: 460px) {
  body.onboarding-page .onboarding-shell {
    width: 100%;
    padding-inline: 8px !important;
  }

  body.onboarding-page .form-card.wide {
    border-radius: 22px !important;
    padding-inline: 10px !important;
  }

  body.onboarding-page #onboardingForm h1,
  body.onboarding-page #onboardingForm h2,
  body.onboarding-page #onboardingForm .step-title {
    font-size: clamp(22px, 7.4vw, 28px) !important;
  }

  body.onboarding-page .sl-level-group {
    grid-template-columns: 48px repeat(3, minmax(38px, 1fr));
    gap: 7px;
  }

  body.onboarding-page .sl-lvl-btn {
    height: 36px;
  }

  body.onboarding-page .button-row.between {
    grid-template-columns: 1fr 1fr;
  }
}


/* W2G51 mobile onboarding role/skill polish: readable level labels + reliable search */
body.onboarding-page .sl-row.sl-hidden,
body.onboarding-page [data-sl-section].sl-hidden,
body.onboarding-page .sl-row[hidden],
body.onboarding-page [data-sl-section][hidden] {
  display: none !important;
}

body.onboarding-page .sl-lvl-btn {
  white-space: nowrap;
}

body.onboarding-page .sl-btn-label,
body.onboarding-page .sl-btn-abbr {
  line-height: 1;
  font-weight: 700;
}

@media (max-width: 760px) {
  body.onboarding-page .sl-row[data-skill-level-card] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: stretch !important;
  }

  body.onboarding-page .sl-level-group {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-top: 2px !important;
  }

  body.onboarding-page .sl-level-group::before {
    content: none !important;
    display: none !important;
  }

  body.onboarding-page .sl-lvl-btn {
    min-width: 0 !important;
    width: 100% !important;
    height: 38px !important;
    padding: 0 8px !important;
    border-radius: 12px !important;
    font-size: 11px !important;
    letter-spacing: -0.01em !important;
  }

  body.onboarding-page .sl-btn-label {
    display: inline !important;
    font-size: 11px !important;
  }

  body.onboarding-page .sl-btn-abbr {
    display: none !important;
  }
}

@media (max-width: 380px) {
  body.onboarding-page .sl-lvl-btn {
    padding-inline: 5px !important;
  }

  body.onboarding-page .sl-btn-label {
    display: none !important;
  }

  body.onboarding-page .sl-btn-abbr {
    display: inline !important;
    font-size: 11px !important;
  }
}

/* W2G51 mobile onboarding guardrail: keep step navigation visible and make skill search obvious */
@media (max-width: 760px) {
  body.onboarding-page .onboarding-shell {
    padding-bottom: 108px !important;
  }

  body.onboarding-page .button-row.between {
    position: fixed !important;
    left: max(12px, env(safe-area-inset-left)) !important;
    right: max(12px, env(safe-area-inset-right)) !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    z-index: 120 !important;
    width: auto !important;
    max-width: 390px !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: 1fr 1.15fr !important;
    gap: 10px !important;
    padding: 10px !important;
    border: 1px solid rgba(148, 163, 184, .22) !important;
    border-radius: 20px !important;
    background: rgba(15, 23, 42, .94) !important;
    box-shadow: 0 -18px 42px rgba(0, 0, 0, .34), 0 18px 40px rgba(255, 91, 31, .18) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
  }

  html[data-theme="light"] body.onboarding-page .button-row.between {
    background: rgba(255, 255, 255, .96) !important;
    border-color: rgba(255, 111, 35, .20) !important;
    box-shadow: 0 -18px 38px rgba(15, 23, 42, .14), 0 18px 38px rgba(255, 111, 35, .18) !important;
  }

  body.onboarding-page .button-row.between .btn,
  body.onboarding-page .button-row.between .button,
  body.onboarding-page .button-row.between button {
    width: 100% !important;
    min-height: 48px !important;
    border-radius: 14px !important;
    margin: 0 !important;
  }

  body.onboarding-page .sl-lvl-btn {
    min-width: 0 !important;
    min-height: 42px !important;
    padding: 8px 10px !important;
  }

  body.onboarding-page .sl-btn-abbr {
    display: none !important;
  }

  body.onboarding-page .sl-btn-label {
    display: inline !important;
    font-size: 11px !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
  }

  body.onboarding-page .sl-row.sl-hidden,
  body.onboarding-page .sl-category.sl-hidden {
    display: none !important;
  }

  body.onboarding-page .sl-empty-state {
    padding: 18px !important;
    border: 1px dashed rgba(148, 163, 184, .28) !important;
    border-radius: 16px !important;
    color: var(--muted, #94a3b8) !important;
    text-align: center !important;
  }
}

@media (max-width: 380px) {
  body.onboarding-page .sl-lvl-btn {
    padding: 8px 6px !important;
  }

  body.onboarding-page .sl-btn-label {
    font-size: 10px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   W2G – Mobile Onboarding UX Patch
   Fixes: Step 3 visibility · role search field · skill level labels
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Skill level buttons: show FULL labels (Beginner/Intermediate/Advanced)
        on all screen sizes where cards are in a 3-column button group.
        Only collapse to abbreviation (Beg/Int/Adv) on very narrow phones. ── */
body.onboarding-page .sl-btn-label {
  display: inline !important;
}
body.onboarding-page .sl-btn-abbr {
  display: none !important;
}

@media (max-width: 360px) {
  /* Extremely narrow phones: fall back to abbreviation */
  body.onboarding-page .sl-btn-label { display: none    !important; }
  body.onboarding-page .sl-btn-abbr  { display: inline !important; }
}

/* ── 2a. Skill search no-results empty state ── */
.sl-no-match {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 32px 20px;
  text-align: center;
  color: var(--polish-text-muted, #64748B);
}
.sl-no-match p {
  margin: 0;
  font-size: 14px;
  color: var(--polish-text-muted, #64748B);
}
.sl-no-match small {
  font-size: 12px;
  opacity: .72;
}
html[data-theme="dark"] .sl-no-match,
body.theme-dark .sl-no-match {
  color: #94A3B8;
}

/* ── 2b. Role search field (datalist-backed text input)
         Matches the style of other searchable fields in onboarding. ── */
body.onboarding-page label.role-search-field input[type="text"] {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border-soft, rgba(148,163,184,.25));
  border-radius: 10px;
  background: var(--input-bg, #F8FAFC);
  color: var(--text-main, #0F172A);
  font-size: 15px;
  font-family: inherit;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  -webkit-appearance: none;
}
body.onboarding-page label.role-search-field input[type="text"]:focus {
  border-color: var(--orange, #FF6A1A);
  box-shadow: 0 0 0 3px rgba(255,106,26,.14);
}
html[data-theme="dark"] body.onboarding-page label.role-search-field input[type="text"],
body.theme-dark.onboarding-page label.role-search-field input[type="text"] {
  background: rgba(15,23,42,.55);
  color: #F1F5F9;
  border-color: rgba(148,163,184,.22);
}
html[data-theme="dark"] body.onboarding-page label.role-search-field input[type="text"]:focus,
body.theme-dark.onboarding-page label.role-search-field input[type="text"]:focus {
  border-color: var(--orange, #FF6A1A);
}

/* ── 3. Mobile step spacing: reduce clutter and improve touch targets ── */
@media (max-width: 760px) {
  /* Better vertical rhythm inside each step */
  body.onboarding-page #onboardingForm .onboarding-step-section {
    margin-bottom: 20px !important;
  }

  body.onboarding-page #onboardingForm .section-mini-heading {
    margin-bottom: 10px !important;
  }

  body.onboarding-page #onboardingForm .section-mini-heading h3 {
    font-size: 15px !important;
    margin: 0 0 3px !important;
  }

  body.onboarding-page #onboardingForm .section-mini-heading p {
    font-size: 13px !important;
    margin: 0 !important;
    opacity: .78;
  }

  /* Choice grid: larger touch targets, better wrap */
  body.onboarding-page .choice-grid {
    gap: 8px !important;
  }

  body.onboarding-page .choice-button {
    min-height: 42px !important;
    padding: 8px 14px !important;
    font-size: 13.5px !important;
    border-radius: 12px !important;
  }

  /* Slim note: reduce vertical weight */
  body.onboarding-page .onboarding-slim-note {
    padding: 10px 14px !important;
    font-size: 13px !important;
    margin-bottom: 18px !important;
  }

  /* two-col on step 1: stack for narrow screens */
  body.onboarding-page #onboardingForm .two-col {
    gap: 14px !important;
  }

  /* Skill level search bar: larger tap target */
  body.onboarding-page .sl-search-input {
    height: 44px !important;
    font-size: 15px !important;
    border-radius: 12px !important;
  }

  body.onboarding-page .sl-toolbar {
    gap: 10px !important;
    margin-bottom: 14px !important;
  }

  /* Skill row: ensure it's never clipped beneath the fixed nav bar */
  body.onboarding-page .sl-categories,
  body.onboarding-page .sl-cat--reco {
    margin-bottom: 4px !important;
  }

  /* Info cards in sidebar (shown on desktop only, hidden on mobile already) */
  body.onboarding-page .onboarding-more-options summary {
    min-height: 44px !important;
    padding: 10px 14px !important;
  }

  /* Field labels: slightly larger for readability */
  body.onboarding-page #onboardingForm label > span:first-child {
    font-size: 13px !important;
    margin-bottom: 5px !important;
  }

  /* Availability grid (step 4) */
  body.onboarding-page .field-intro {
    font-size: 14px !important;
    font-weight: 600 !important;
    margin-top: 18px !important;
    margin-bottom: 10px !important;
  }
}

/* ── 4. Very narrow phones (≤ 390px): extra compactness ── */
@media (max-width: 390px) {
  body.onboarding-page #onboardingForm h2 {
    font-size: 20px !important;
  }

  body.onboarding-page .choice-button {
    min-height: 40px !important;
    padding: 7px 10px !important;
    font-size: 13px !important;
  }

  body.onboarding-page .sl-cat-name {
    font-size: 13px !important;
  }

  body.onboarding-page .sl-skill-name {
    font-size: 13px !important;
  }
}

/* W2G patch 54a: mobile-first home featured competition thumbnails
   Keeps desktop poster cards as background covers, but turns mobile cards into compact list items. */
body[data-page="app"] .home-featured-card.has-poster .home-featured-poster {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
}

@media (max-width: 760px) {
  body[data-page="app"] .preview-competition-row {
    gap: 12px !important;
  }

  body[data-page="app"] .home-featured-card {
    min-height: 0 !important;
    width: 100% !important;
    padding: 12px !important;
    border-radius: 18px !important;
    display: grid !important;
    grid-template-columns: 96px minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    column-gap: 12px !important;
    row-gap: 3px !important;
    align-items: center !important;
    justify-content: stretch !important;
    text-align: left !important;
    border: 1px solid rgba(148, 163, 184, 0.18) !important;
    background:
      radial-gradient(circle at 12% 0%, rgba(255, 106, 26, 0.14), transparent 34%),
      linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(11, 18, 32, 0.98)) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18) !important;
  }

  body[data-page="app"] .home-featured-card:hover {
    transform: none !important;
  }

  body[data-page="app"] .home-featured-card.has-poster::before {
    display: none !important;
  }

  body[data-page="app"] .home-featured-card.has-poster .home-featured-poster {
    position: relative !important;
    inset: auto !important;
    grid-column: 1 !important;
    grid-row: 1 / span 3 !important;
    width: 96px !important;
    height: 82px !important;
    max-height: 82px !important;
    aspect-ratio: 1.17 / 1 !important;
    object-fit: cover !important;
    border-radius: 14px !important;
    z-index: 1 !important;
    background: rgba(15, 23, 42, 0.72) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22) !important;
  }

  body[data-page="app"] .home-featured-card:not(.has-poster) {
    grid-template-columns: 1fr !important;
    min-height: 118px !important;
  }

  body[data-page="app"] .home-featured-card > span,
  body[data-page="app"] .home-featured-card > strong,
  body[data-page="app"] .home-featured-card > small {
    position: relative !important;
    z-index: 2 !important;
    min-width: 0 !important;
    grid-column: 2 !important;
  }

  body[data-page="app"] .home-featured-card:not(.has-poster) > span,
  body[data-page="app"] .home-featured-card:not(.has-poster) > strong,
  body[data-page="app"] .home-featured-card:not(.has-poster) > small {
    grid-column: 1 !important;
  }

  body[data-page="app"] .home-featured-card > span {
    grid-row: 1 !important;
    margin: 0 0 4px !important;
    padding: 4px 9px !important;
    max-width: max-content !important;
    font-size: 10.5px !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
  }

  body[data-page="app"] .home-featured-card > strong {
    grid-row: 2 !important;
    margin: 0 !important;
    font-size: 14.5px !important;
    line-height: 1.22 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  body[data-page="app"] .home-featured-card > small {
    grid-row: 3 !important;
    margin: 4px 0 0 !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    color: rgba(226, 232, 240, 0.82) !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
}

@media (max-width: 390px) {
  body[data-page="app"] .home-featured-card {
    grid-template-columns: 84px minmax(0, 1fr) !important;
    column-gap: 10px !important;
    padding: 10px !important;
  }

  body[data-page="app"] .home-featured-card.has-poster .home-featured-poster {
    width: 84px !important;
    height: 74px !important;
    max-height: 74px !important;
    border-radius: 12px !important;
  }

  body[data-page="app"] .home-featured-card > strong {
    font-size: 13.5px !important;
  }

  body[data-page="app"] .home-featured-card > small {
    font-size: 11.5px !important;
  }
}

/* ── Round 4 Team Workspace / Team Hub QA polish ── */
.workspace-quick-actions .info-card .button {
  margin-top: 12px;
  width: fit-content;
}
html[data-theme="dark"] .team-chat-box,
html[data-theme="dark"] .chat-bubble,
html[data-theme="dark"] .task-form-grid input,
html[data-theme="dark"] .task-form-grid select,
html[data-theme="dark"] .task-status-select {
  background: rgba(15, 23, 42, 0.72) !important;
  border-color: var(--border-soft) !important;
  color: var(--ink) !important;
}
html[data-theme="dark"] .chat-message-row.mine .chat-bubble {
  background: rgba(255, 106, 26, 0.15) !important;
  border-color: rgba(255, 106, 26, 0.42) !important;
}
html[data-theme="dark"] .chat-meta,
html[data-theme="dark"] .task-row p,
html[data-theme="dark"] .team-chat-box .muted {
  color: var(--muted) !important;
}
html[data-theme="dark"] .chat-bubble p {
  color: var(--ink) !important;
}
.task-form-grid label span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
@media (max-width: 720px) {
  body[data-page="app"] .workspace-quick-actions .handoff-summary-grid {
    grid-template-columns: 1fr !important;
  }
  body[data-page="app"] .workspace-quick-actions .info-card .button {
    width: 100%;
  }
  body[data-page="app"] .team-chat-box,
  body[data-page="app"] .task-board {
    max-height: 280px;
  }
}


/* ── Round 5.1 Quick UX cleanup ─────────────────────────────
   Lower visual noise before private-beta QA: clearer search icon,
   mobile-friendly competition actions, and hidden organizer CTA when needed. */
.hidden { display: none !important; }

.filter-search-field::before,
.filter-search-field::after {
  opacity: 0.72;
}

html[data-theme="dark"] .filter-search-field::before {
  border-color: rgba(203, 213, 225, 0.72);
}

html[data-theme="dark"] .filter-search-field::after {
  background: rgba(203, 213, 225, 0.72);
}

@media (max-width: 760px) {
  body[data-page="app"] .competition-card .competition-poster {
    max-height: 190px;
    overflow: hidden;
  }

  body[data-page="app"] .competition-card .poster-placeholder,
  body[data-page="app"] .competition-card .competition-poster img {
    max-height: 190px;
    object-fit: contain;
  }

  body[data-page="app"] .competition-card-actions {
    gap: 9px !important;
  }
}

/* Round 5.2: Team Workspace should feel like a real working area, not a small popup. */
.team-workspace-fullscreen-modal {
  align-items: stretch;
  justify-content: center;
  padding: 18px;
}
.team-workspace-fullscreen-modal .modal-card {
  width: min(1320px, calc(100vw - 36px));
  max-height: calc(100vh - 36px);
  display: flex;
  flex-direction: column;
}
.team-workspace-fullscreen-modal #modalBody {
  overflow: auto;
  min-height: 0;
}
.team-workspace-fullscreen-modal .modal-footer {
  flex-wrap: wrap;
}
@media (max-width: 760px) {
  .team-workspace-fullscreen-modal {
    padding: 0;
  }
  .team-workspace-fullscreen-modal .modal-card {
    width: 100vw;
    min-height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    border-inline: 0;
  }
}


/* Round 5.3: Create/Edit Team polish */
.required-asterisk {
  color: #ff6a1a;
  font-weight: 700;
  margin-left: 3px;
}
.field-help {
  display: block;
  margin-top: 6px;
  color: var(--muted, #9aa4b2);
  font-size: 0.78rem;
  line-height: 1.4;
}
.team-target-competition-field input {
  width: 100%;
}
.team-visual-form-panel {
  border-style: solid;
}
.team-card-media {
  position: relative;
  width: 100%;
  height: 168px;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--border-soft, rgba(148, 163, 184, 0.18));
  background:
    radial-gradient(circle at top right, rgba(255, 122, 26, 0.22), transparent 42%),
    linear-gradient(135deg, rgba(9, 16, 34, 0.96), rgba(12, 28, 58, 0.92));
  margin-bottom: 16px;
}
.team-card-banner {
  position: absolute;
  inset: 0;
}
.team-card-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.team-banner-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  padding: 20px 88px 20px 96px;
  color: rgba(226, 232, 240, 0.76);
  background:
    linear-gradient(90deg, rgba(255, 122, 26, 0.12) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 122, 26, 0.10) 1px, transparent 1px),
    radial-gradient(circle at 20% 15%, rgba(255, 122, 26, 0.2), transparent 30%),
    linear-gradient(135deg, rgba(9, 16, 34, 0.96), rgba(15, 34, 72, 0.94));
  background-size: 34px 34px, 34px 34px, auto, auto;
}
.team-banner-placeholder span {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 190, 150, 0.92);
}
.team-banner-placeholder small {
  max-width: 220px;
  font-size: 0.74rem;
  line-height: 1.35;
  color: rgba(203, 213, 225, 0.72);
}
.team-card-media-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4, 8, 18, 0.02) 0%, rgba(4, 8, 18, 0.14) 48%, rgba(4, 8, 18, 0.4) 100%);
  pointer-events: none;
}
.team-card-logo {
  position: absolute;
  left: 16px;
  bottom: 16px;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(8, 14, 28, 0.9);
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(12px);
}
.team-card-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.team-card-logo.is-placeholder {
  display: grid;
  place-items: center;
  color: rgba(255, 190, 150, 0.95);
  background:
    radial-gradient(circle at top, rgba(255, 122, 26, 0.32), transparent 56%),
    rgba(12, 21, 40, 0.94);
  border-color: rgba(255, 122, 26, 0.38);
}
.team-card-logo.is-placeholder span {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.team-card-media.no-banner .team-card-media-overlay {
  background: linear-gradient(180deg, rgba(4, 8, 18, 0.02) 0%, rgba(4, 8, 18, 0.1) 100%);
}
.team-card-media.banner-error .team-card-banner {
  background:
    radial-gradient(circle at top right, rgba(255, 122, 26, 0.18), transparent 42%),
    linear-gradient(135deg, rgba(11, 19, 36, 0.98), rgba(10, 31, 68, 0.98));
}
.team-polished-card.has-team-media .discovery-shell-top {
  margin-top: 0;
}
.team-polished-card.has-team-media .discovery-shell-header {
  padding-top: 2px;
}

.team-hub-visual {
  border-radius: 22px;
  overflow: hidden;
  min-height: 150px;
  border: 1px solid var(--border-soft, rgba(148, 163, 184, 0.18));
  background: rgba(255, 255, 255, 0.04);
}
.team-hub-visual img {
  width: 100%;
  height: 100%;
  min-height: 150px;
  object-fit: cover;
  display: block;
}
@media (max-width: 860px) {
  .team-hub-header.has-team-visual {
    grid-template-columns: 1fr;
  }
  .team-hub-visual {
    min-height: 160px;
  }
}
@media (max-width: 520px) {
  .team-card-media {
    height: 144px;
    border-radius: 18px;
    margin-bottom: 14px;
  }
  .team-banner-placeholder {
    padding: 18px 72px 18px 78px;
  }
  .team-banner-placeholder small {
    display: none;
  }
  .team-card-logo {
    width: 54px;
    height: 54px;
    left: 12px;
    bottom: 12px;
    border-radius: 15px;
  }
}

/* Round 5.3.1: Team image upload polish */
.team-upload-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.team-upload-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border-soft, rgba(148, 163, 184, 0.18));
  border-radius: 18px;
  background: rgba(15, 23, 42, 0.46);
}
.team-upload-card-head {
  display: grid;
  gap: 3px;
}
.team-upload-card-head strong {
  color: var(--text, #f8fafc);
  font-weight: 700;
}
.team-upload-card-head small {
  color: var(--muted, #9aa4b2);
  font-size: 0.78rem;
}
.team-upload-preview {
  min-height: 128px;
  border-radius: 16px;
  border: 1px dashed rgba(255, 106, 26, 0.38);
  background: radial-gradient(circle at 20% 10%, rgba(255, 106, 26, 0.12), transparent 34%), rgba(255, 255, 255, 0.03);
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
  color: var(--muted, #9aa4b2);
  padding: 12px;
}
.team-upload-preview span {
  display: block;
  color: var(--text, #f8fafc);
  font-weight: 700;
}
.team-upload-preview small {
  display: block;
  margin-top: 4px;
  font-size: 0.76rem;
}
.team-upload-preview.has-image {
  padding: 0;
  border-style: solid;
  background: rgba(255, 255, 255, 0.04);
}
.team-upload-preview img {
  width: 100%;
  height: 100%;
  min-height: 128px;
  object-fit: cover;
  display: block;
}
.team-upload-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.team-upload-actions .button {
  min-height: 40px;
  flex: 1 1 120px;
}
.team-upload-button {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 720px) {
  .team-upload-grid {
    grid-template-columns: 1fr;
  }
  .team-upload-preview,
  .team-upload-preview img {
    min-height: 116px;
  }
}


/* Round 5.3.3: Team page hero uses the uploaded team banner as a calm background only. */
.team-snapshot-card.has-team-banner {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-color: rgba(255, 106, 26, 0.36);
  background:
    linear-gradient(135deg, rgba(9, 15, 30, 0.96), rgba(10, 18, 35, 0.88)) !important;
}
.team-snapshot-card.has-team-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--team-snapshot-banner);
  background-size: cover;
  background-position: center;
  opacity: 0.26;
  filter: saturate(0.86) contrast(0.94);
  transform: scale(1.03);
}
.team-snapshot-card.has-team-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 88% 0%, rgba(255, 106, 26, 0.20), transparent 34%),
    linear-gradient(90deg, rgba(6, 12, 25, 0.94) 0%, rgba(7, 14, 29, 0.82) 45%, rgba(7, 14, 29, 0.72) 100%),
    linear-gradient(180deg, rgba(7, 13, 26, 0.16) 0%, rgba(7, 13, 26, 0.82) 100%);
  pointer-events: none;
}
.team-snapshot-card.has-team-banner .team-snapshot-stat,
.team-snapshot-card.has-team-banner .team-tool-chip,
.team-snapshot-card.has-team-banner .team-context-block {
  background-color: rgba(8, 15, 30, 0.66);
  backdrop-filter: blur(12px);
}
[data-theme="light"] .team-snapshot-card.has-team-banner {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(255, 247, 237, 0.82)) !important;
}
[data-theme="light"] .team-snapshot-card.has-team-banner::before {
  opacity: 0.18;
  filter: saturate(0.9) contrast(0.96);
}
[data-theme="light"] .team-snapshot-card.has-team-banner::after {
  background:
    radial-gradient(circle at 88% 0%, rgba(255, 106, 26, 0.16), transparent 34%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.78) 48%, rgba(255, 247, 237, 0.72) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.76) 100%);
}
[data-theme="light"] .team-snapshot-card.has-team-banner .team-snapshot-stat,
[data-theme="light"] .team-snapshot-card.has-team-banner .team-tool-chip,
[data-theme="light"] .team-snapshot-card.has-team-banner .team-context-block {
  background-color: rgba(255, 255, 255, 0.68);
}
@media (max-width: 760px) {
  .team-snapshot-card.has-team-banner::before {
    opacity: 0.20;
  }
  .team-snapshot-card.has-team-banner::after {
    background:
      radial-gradient(circle at 88% 0%, rgba(255, 106, 26, 0.18), transparent 32%),
      linear-gradient(180deg, rgba(6, 12, 25, 0.92) 0%, rgba(7, 14, 29, 0.84) 100%);
  }
}

/* Round 5.3.4: Banner-only team visual cleanup — remove team logo UI completely. */
.team-upload-grid--single {
  grid-template-columns: minmax(0, 1fr);
}
.team-visual-form-panel--banner-only .team-upload-card {
  max-width: none;
}
.team-visual-form-panel--banner-only .team-upload-preview,
.team-visual-form-panel--banner-only .team-upload-preview img {
  min-height: 180px;
}
.team-card-media .team-card-logo {
  display: none !important;
}
.team-banner-placeholder {
  padding: 22px;
}
.team-card-media.no-banner .team-card-media-overlay {
  background: linear-gradient(180deg, rgba(4, 8, 18, 0.02) 0%, rgba(4, 8, 18, 0.12) 100%);
}
@media (max-width: 720px) {
  .team-visual-form-panel--banner-only .team-upload-preview,
  .team-visual-form-panel--banner-only .team-upload-preview img {
    min-height: 140px;
  }
}


/* W2G60.2 Core-flow polish: smoother beta UI, full-screen workspace, cleaner search, clearer required fields. */
.required-asterisk {
  color: #EF4444 !important;
  font-weight: 800;
}

body[data-page="app"] .filter-toolbar {
  align-items: center;
  gap: 12px;
}

body[data-page="app"] .filter-search-field input {
  height: 48px;
  border-radius: 999px;
  padding-left: 44px;
  font-weight: 600;
  letter-spacing: -0.01em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.78), 0 10px 24px rgba(15, 23, 42, 0.06);
}

body[data-page="app"] .filter-search-field::before {
  left: 17px;
  width: 15px;
  height: 15px;
  margin-top: -8px;
  border-width: 2.2px;
}

body[data-page="app"] .filter-search-field::after {
  left: 29px;
  width: 7px;
  height: 2.4px;
  margin-top: 3px;
}

body[data-page="app"] .filter-toggle,
body[data-page="app"] .filter-sort-field select {
  height: 48px;
  border-radius: 999px;
}

.team-workspace-fullscreen-modal {
  padding: 0 !important;
  align-items: stretch !important;
  justify-content: stretch !important;
}

.team-workspace-fullscreen-modal .modal-card {
  width: 100vw !important;
  min-height: 100dvh !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  border-radius: 0 !important;
  border-inline: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

.team-workspace-fullscreen-modal #modalBody {
  flex: 1 1 auto !important;
  overflow: auto !important;
  min-height: 0 !important;
}

.team-workspace-fullscreen-modal .modal-footer {
  flex-shrink: 0 !important;
}

@media (max-width: 760px) {
  body[data-page="app"] .filter-toolbar {
    display: grid;
    grid-template-columns: 1fr;
  }
  body[data-page="app"] .filter-search-field,
  body[data-page="app"] .filter-sort-field,
  body[data-page="app"] .filter-sort-field select,
  body[data-page="app"] .filter-toggle {
    width: 100%;
  }
}

/* W2G60.3 Beta cleanup: remove Team Banner UI and protect workspace footer actions. */
.team-visual-form-panel,
.team-visual-form-panel--banner-only,
.team-upload-grid--single,
.team-card-media,
.team-card-banner,
.team-banner-placeholder,
.team-hub-visual,
.team-snapshot-card.has-team-banner::before,
.team-snapshot-card.has-team-banner::after {
  display: none !important;
}

.team-polished-card {
  padding-top: 18px;
}

.team-snapshot-card {
  background-image: none !important;
}

#modalOverlay.team-workspace-fullscreen-modal:not(.hidden) {
  z-index: 120 !important;
}

#modalOverlay.team-workspace-fullscreen-modal:not(.hidden) ~ .feedback-launcher {
  display: none !important;
}

.team-workspace-fullscreen-modal .modal-footer {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px 12px !important;
  padding: 14px max(24px, env(safe-area-inset-right, 0px)) max(14px, env(safe-area-inset-bottom, 0px)) max(24px, env(safe-area-inset-left, 0px)) !important;
  background: rgba(15, 23, 42, 0.96) !important;
  border-top: 1px solid rgba(148, 163, 184, 0.2) !important;
  box-shadow: 0 -12px 30px rgba(2, 6, 23, 0.26) !important;
  overflow: visible !important;
}

.team-workspace-fullscreen-modal .modal-footer .button,
.team-workspace-fullscreen-modal .modal-footer button {
  width: auto !important;
  min-width: 132px !important;
  max-width: 100% !important;
  white-space: nowrap !important;
}

.team-workspace-fullscreen-modal #modalBody {
  padding-bottom: 18px !important;
}

@media (max-width: 760px) {
  .team-workspace-fullscreen-modal .modal-footer {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    padding: 12px 14px max(12px, env(safe-area-inset-bottom, 0px)) !important;
  }
  .team-workspace-fullscreen-modal .modal-footer .button,
  .team-workspace-fullscreen-modal .modal-footer button {
    width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
  }
}


/* ── W2G Mobile Beta Polish Round ── */

/* 1. Onboarding page: compact logout button (less dominant on mobile) */
body.onboarding-page .onboarding-logout-btn {
  font-size: 12.5px;
  padding: 6px 11px;
  min-height: 32px;
  border-radius: 8px;
  opacity: 0.7;
  font-weight: 600;
}
body.onboarding-page .onboarding-logout-btn:hover { opacity: 1; }

@media (max-width: 760px) {
  body.onboarding-page .simple-header .button-row.compact {
    gap: 6px;
  }
  body.onboarding-page #onboardingSkipButton {
    font-size: 12px;
    padding: 6px 10px;
    min-height: 32px;
    border-radius: 8px;
  }
}

/* 2. Mobile topbar: 3-column grid → brand | notification | hamburger */
/* style.css:707 sets main-nav/auth-actions display:none + grid-col:1/-1 on mobile.
   We override auth-actions:not(.open) to show the notification button in col 2. */
/* Superseded by the single W2G64.3 drawer system below. */

/* 3. Mobile filter toolbar: search + filter toggle on one row, sort below */
@media (max-width: 760px) {
  body[data-page="app"] .filter-toolbar {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
  }
  body[data-page="app"] .filter-search-field {
    grid-column: 1;
    grid-row: 1;
  }
  body[data-page="app"] .filter-toggle {
    grid-column: 2;
    grid-row: 1;
    width: auto;
    min-width: 52px;
    padding: 0 14px;
    white-space: nowrap;
  }
  body[data-page="app"] .filter-sort-field {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  body[data-page="app"] .filter-sort-field select {
    width: 100%;
  }
}

/* 4. Filter drawer backdrop on mobile — uses filter-shell ::after (body::after is reserved) */
@media (max-width: 760px) {
  body[data-page="app"] .competition-filter-shell:has(.filter-drawer:not(.hidden))::after,
  body[data-page="app"] .team-filter-shell:has(.filter-drawer:not(.hidden))::after,
  body[data-page="app"] .member-filter-shell:has(.filter-drawer:not(.hidden))::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.38);
    z-index: 68;
    pointer-events: none;
  }
}

/* 5. Workspace footer on mobile: reduce Leave team prominence */
@media (max-width: 760px) {
  .team-workspace-fullscreen-modal .modal-footer .button.danger {
    background: rgba(239, 68, 68, 0.08) !important;
    border-color: rgba(239, 68, 68, 0.26) !important;
    color: #ef4444 !important;
    box-shadow: none !important;
  }
  html[data-theme="light"] .team-workspace-fullscreen-modal .modal-footer .button.danger {
    color: #b91c1c !important;
  }
  /* Back/ghost button shorter than primary actions */
  .team-workspace-fullscreen-modal .modal-footer .button.ghost {
    min-height: 40px !important;
    opacity: 0.75;
  }
  /* 2-col layout for secondary/ghost/danger footer buttons */
  .team-workspace-fullscreen-modal .modal-footer {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  /* Primary actions (first button) span full width */
  .team-workspace-fullscreen-modal .modal-footer .button:first-child {
    grid-column: 1 / -1 !important;
  }
}

/* 6. Floating Feedback: hide when modal is open on mobile */
@media (max-width: 760px) {
  body:has(#modalOverlay:not(.hidden)) .feedback-launcher {
    display: none !important;
  }
}

/* 7. General mobile polish: 360–430px */
@media (max-width: 430px) {
  /* Prevent horizontal overflow */
  body[data-page="app"] .page-shell {
    width: min(100% - 16px, 430px);
  }
}


/* ══════════════════════════════════════════════════════════════
   W2G64.1 — Repair failed mobile patch regressions
   Replace the broken W2G63.1/W2G64 override stack instead of
   adding another conflicting mobile system.
   ══════════════════════════════════════════════════════════════ */

/* A. Onboarding dropdown repair: one arrow, real click target. */
body.onboarding-page #onboardingForm label {
  position: relative;
  isolation: isolate;
}

body.onboarding-page #onboardingForm select {
  position: relative !important;
  z-index: 5 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  touch-action: manipulation;
  min-height: 46px;
  padding-right: 42px !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23FF6A1A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 13px center !important;
  background-size: 18px 18px !important;
}

body.onboarding-page #onboardingForm select::-ms-expand {
  display: none;
}

body.onboarding-page #onboardingForm .role-search-field::after,
body.onboarding-page #onboardingForm label:has(select)::before,
body.onboarding-page #onboardingForm label:has(select)::after {
  content: none !important;
  display: none !important;
}

body.onboarding-page .university-field,
body.onboarding-page .university-field-inline,
body.onboarding-page .university-select-shell {
  position: relative;
  z-index: 1;
  isolation: isolate;
}

body.onboarding-page .university-select-shell.open {
  z-index: 90;
}

body.onboarding-page .university-select-trigger {
  position: relative;
  z-index: 2;
}

body.onboarding-page .university-select-menu {
  position: static !important;
  margin-top: 10px;
  max-height: none;
  z-index: 3;
}

/* B. Workspace tool logos: make the actual inline SVGs prominent, not just the card tint. */
.team-tools-grid {
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)) !important;
  gap: 10px !important;
}

.team-tool-chip {
  min-height: 60px !important;
  padding: 10px 12px !important;
  gap: 10px !important;
  border-radius: 16px !important;
}

.team-tool-chip .team-tool-svg,
.workspace-link-icon .team-tool-svg {
  width: 28px !important;
  height: 28px !important;
  display: block !important;
  filter: drop-shadow(0 5px 10px rgba(15, 23, 42, .14));
}

.workspace-link-icon {
  width: 42px !important;
  height: 42px !important;
  flex: 0 0 42px !important;
  border-radius: 14px !important;
  display: grid !important;
  place-items: center !important;
}

.team-tool-chip::before {
  content: "";
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 12px;
  display: none;
  background: rgba(255,255,255,.08);
}

.team-tool-chip .team-tool-copy strong {
  font-size: 12.5px !important;
}

.team-tool-chip .team-tool-copy small {
  font-size: 10.5px !important;
}

.team-tool-chip.connected[href*="discord"],
.workspace-link-card[href*="discord"] { --tool-brand: #5865F2; --tool-tint: rgba(88,101,242,.16); --tool-border: rgba(88,101,242,.38); }
.team-tool-chip.connected[href*="line.me"],
.workspace-link-card[href*="line.me"] { --tool-brand: #06C755; --tool-tint: rgba(6,199,85,.16); --tool-border: rgba(6,199,85,.38); }
.team-tool-chip.connected[href*="notion"],
.workspace-link-card[href*="notion"] { --tool-brand: #F8FAFC; --tool-tint: rgba(255,255,255,.10); --tool-border: rgba(255,255,255,.24); }
.team-tool-chip.connected[href*="figma"],
.workspace-link-card[href*="figma"] { --tool-brand: #F24E1E; --tool-tint: rgba(242,78,30,.16); --tool-border: rgba(242,78,30,.40); }
.team-tool-chip.connected[href*="github"],
.workspace-link-card[href*="github"] { --tool-brand: #F8FAFC; --tool-tint: rgba(255,255,255,.10); --tool-border: rgba(255,255,255,.24); }
.team-tool-chip.connected[href*="drive.google"],
.workspace-link-card[href*="drive.google"] { --tool-brand: #4285F4; --tool-tint: rgba(66,133,244,.16); --tool-border: rgba(66,133,244,.38); }

.team-tool-chip.connected,
.workspace-link-card {
  border-color: var(--tool-border, rgba(255,106,26,.25)) !important;
}

.team-tool-chip.connected {
  background: linear-gradient(135deg, var(--tool-tint, rgba(255,106,26,.10)), rgba(15,23,42,.30)) !important;
}

.workspace-link-card {
  background: linear-gradient(135deg, var(--tool-tint, rgba(255,106,26,.08)), rgba(15,23,42,.18)) !important;
}

.workspace-link-icon {
  background: var(--tool-tint, rgba(255,106,26,.14)) !important;
  color: var(--tool-brand, currentColor) !important;
  border: 1px solid var(--tool-border, rgba(255,106,26,.22));
}

@media (max-width: 760px) {
  .team-tools-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .team-tool-chip {
    min-height: 56px !important;
  }
}

/* C. Mobile filter sheet: keep all controls reachable and above feedback. */
@media (max-width: 760px) {
  body[data-page="app"] .filter-drawer:not(.hidden) {
    max-height: min(82vh, 720px) !important;
    overflow-y: auto !important;
    padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 22px 22px 0 0 !important;
  }

  body[data-page="app"] .filters-panel.compact-filter-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  body[data-page="app"] .filters-panel.compact-filter-grid label {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
  }

  body[data-page="app"] .filters-panel.compact-filter-grid select,
  body[data-page="app"] .filter-sort-field select {
    min-height: 48px !important;
    font-size: 16px !important;
    border-radius: 14px !important;
  }

  body[data-page="app"] .filter-drawer-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 4 !important;
    padding: 12px 0 10px !important;
    background: var(--card, #fff) !important;
    border-bottom: 1px solid var(--border-soft) !important;
  }

  html[data-theme="dark"] body[data-page="app"] .filter-drawer-header {
    background: rgba(15,23,42,.98) !important;
  }

  body[data-page="app"] .filter-actions {
    position: sticky !important;
    bottom: calc(-1px - env(safe-area-inset-bottom, 0px)) !important;
    z-index: 4 !important;
    display: grid !important;
    grid-template-columns: 1fr 1.4fr !important;
    gap: 10px !important;
    padding: 12px !important;
    margin: 12px -16px calc(-86px - env(safe-area-inset-bottom, 0px)) !important;
    background: var(--card, #fff) !important;
    border-top: 1px solid var(--border-soft) !important;
  }

  html[data-theme="dark"] body[data-page="app"] .filter-actions {
    background: rgba(15,23,42,.98) !important;
  }
}

/* D. Retired W2G64.1 mobile drawer experiment. Kept inactive to avoid competing with W2G64.3. */
@keyframes wtDrawerInLeft {
  from { transform: translateX(-104%); opacity: .9; }
  to { transform: translateX(0); opacity: 1; }
}

@media (max-width: 0px) {
  body[data-page="app"] .topbar {
    position: sticky !important;
    z-index: 80 !important;
    grid-template-columns: auto auto minmax(0, 1fr) !important;
    gap: 8px !important;
    align-items: center !important;
    overflow: visible !important;
  }

  body[data-page="app"].mobile-menu-open .topbar {
    z-index: 260 !important;
  }

  body[data-page="app"] .mobile-menu-button {
    grid-column: 1 !important;
    grid-row: 1 !important;
    order: 1 !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
  }

  body[data-page="app"] .auth-actions:not(.open) {
    grid-column: 2 !important;
    grid-row: 1 !important;
    order: 2 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body[data-page="app"] .auth-actions:not(.open) > *:not(#notificationButton) {
    display: none !important;
  }

  body[data-page="app"] #notificationButton {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    border-radius: 12px !important;
  }

  body[data-page="app"] .brand {
    grid-column: 3 !important;
    grid-row: 1 !important;
    order: 3 !important;
    justify-self: end !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: 100% !important;
  }

  body[data-page="app"] .brand strong,
  body[data-page="app"] .brand small {
    max-width: 150px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body[data-page="app"].mobile-menu-open::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 210 !important;
    background: rgba(2, 6, 23, .58) !important;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    pointer-events: auto !important;
  }

  body[data-page="app"] .main-nav.open,
  body[data-page="app"] .auth-actions.open {
    position: fixed !important;
    left: 0 !important;
    width: min(292px, 84vw) !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border: 0 !important;
    box-shadow: 24px 0 70px rgba(2, 6, 23, .42) !important;
    background: rgba(9 11 18) !important;
    color: #F8FAFC !important;
    z-index: 270 !important;
  }

  body[data-page="app"] .main-nav.open {
    top: 0 !important;
    bottom: 170px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
    max-height: none !important;
    overflow-y: auto !important;
    padding: calc(18px + env(safe-area-inset-top, 0px)) 14px 14px !important;
    animation: wtDrawerInLeft .22s cubic-bezier(.22,.78,.26,1) both !important;
  }

  body[data-page="app"] .main-nav.open::before {
    content: "Work Together";
    display: block;
    margin: 4px 2px 12px;
    color: #F8FAFC;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .04em;
  }

  body[data-page="app"] .main-nav.open button {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    min-height: 46px !important;
    padding: 11px 13px !important;
    border-radius: 14px !important;
    border-color: rgba(148,163,184,.16) !important;
    background: rgba(255,255,255,.045) !important;
    color: #F8FAFC !important;
    text-align: left !important;
  }

  body[data-page="app"] .main-nav.open button.active {
    background: rgba(255,106,26,.18) !important;
    border-color: rgba(255,106,26,.44) !important;
    color: #FFB07A !important;
  }

  body[data-page="app"] .auth-actions.open {
    top: auto !important;
    bottom: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 12px 14px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    max-height: 170px !important;
    overflow-y: auto !important;
    border-top: 1px solid rgba(148,163,184,.18) !important;
    animation: wtDrawerInLeft .22s cubic-bezier(.22,.78,.26,1) both !important;
  }

  body[data-page="app"] .auth-actions.open .language-switch {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }

  body[data-page="app"] .auth-actions.open .language-switch,
  body[data-page="app"] .auth-actions.open .theme-toggle,
  body[data-page="app"] .auth-actions.open .notification-button,
  body[data-page="app"] .auth-actions.open .button {
    width: 100% !important;
    min-height: 42px !important;
    justify-content: center !important;
  }
}

@media (max-width: 0px) {
  body[data-page="app"] .topbar {
    padding: 8px 10px !important;
    gap: 7px !important;
  }
  body[data-page="app"] .brand-mark {
    width: 32px !important;
    height: 32px !important;
    border-radius: 10px !important;
    font-size: 11px !important;
  }
  body[data-page="app"] .brand strong { font-size: 12.5px !important; }
  body[data-page="app"] .brand small { display: none !important; }
  body[data-page="app"] .mobile-menu-button,
  body[data-page="app"] #notificationButton {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
  }
}



/* ========================================================================
   W2G64.3 — Single mobile drawer system
   Keeps auth-actions compact in the topbar and makes main-nav the only
   slide-out drawer. Legacy W2G64.1 rules above are inactive.
   ======================================================================== */
@media (max-width: 720px) {
  body[data-page="app"] .topbar {
    display: grid !important;
    grid-template-columns: auto auto minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: 8px !important;
    overflow: visible !important;
    position: sticky !important;
    top: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: none !important;
    contain: none !important;
    z-index: 320 !important;
  }

  body[data-page="app"] .mobile-menu-button {
    grid-column: 1 !important;
    grid-row: 1 !important;
    order: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 0 !important;
    color: transparent !important;
    border-radius: 12px !important;
    border: 1px solid rgba(148,163,184,.28) !important;
    background: rgba(15,23,42,.72) !important;
    box-shadow: 0 10px 24px rgba(2,6,23,.22) !important;
    z-index: 322 !important;
  }

  body[data-page="app"] .mobile-menu-button::before,
  body[data-page="app"] .mobile-menu-button::after {
    content: "" !important;
    position: absolute !important;
    left: 10px !important;
    right: 10px !important;
    height: 2px !important;
    border-radius: 999px !important;
    background: var(--ink, #f8fafc) !important;
    transform: none !important;
  }

  body[data-page="app"] .mobile-menu-button::before {
    top: 12px !important;
    box-shadow: 0 7px 0 0 var(--ink, #f8fafc) !important;
  }

  body[data-page="app"] .mobile-menu-button::after {
    top: 26px !important;
    bottom: auto !important;
  }

  body[data-page="app"] .auth-actions,
  body[data-page="app"] .auth-actions.open,
  body[data-page="app"] .auth-actions:not(.open) {
    grid-column: 2 !important;
    grid-row: 1 !important;
    order: 1 !important;
    justify-self: start !important;
    align-self: center !important;
    display: inline-flex !important;
    position: static !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    animation: none !important;
    overflow: visible !important;
    z-index: 321 !important;
  }

  body[data-page="app"] .auth-actions > *:not(#notificationButton),
  body[data-page="app"] .auth-actions.open > *:not(#notificationButton) {
    display: none !important;
  }

  body[data-page="app"] #notificationButton {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 12px !important;
    z-index: 321 !important;
  }

  body[data-page="app"] .brand {
    grid-column: 3 !important;
    grid-row: 1 !important;
    order: 2 !important;
    justify-self: end !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
    max-width: min(210px, calc(100vw - 112px)) !important;
    z-index: 321 !important;
  }

  body[data-page="app"] .brand span:not(.brand-mark) {
    min-width: 0 !important;
  }

  body[data-page="app"] .brand strong,
  body[data-page="app"] .brand small {
    display: block !important;
    max-width: 150px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body[data-page="app"].mobile-menu-open::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 240 !important;
    background: rgba(2,6,23,.58) !important;
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
    pointer-events: auto !important;
  }

  body[data-page="app"] .main-nav {
    display: none !important;
  }

  body[data-page="app"] .main-nav.open {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: min(280px, 82vw) !important;
    max-width: 82vw !important;
    margin: 0 !important;
    padding: calc(72px + env(safe-area-inset-top, 0px)) 14px calc(18px + env(safe-area-inset-bottom, 0px)) !important;
    flex-flow: column nowrap !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    height: auto !important;
    min-height: 100dvh !important;
    max-height: none !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-radius: 0 22px 22px 0 !important;
    background: rgba(15,23,42,.98) !important;
    box-shadow: 24px 0 70px rgba(2,6,23,.45) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    z-index: 340 !important;
    animation: wtDrawerInLeft .22s cubic-bezier(.22,.78,.26,1) both !important;
  }

  body[data-page="app"] .main-nav.open::before {
    content: "Menu" !important;
    display: block !important;
    margin: 0 2px 10px !important;
    color: rgba(248,250,252,.72) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
  }

  body[data-page="app"] .main-nav.open button {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 11px 13px !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.055) !important;
    border-color: rgba(148,163,184,.18) !important;
    color: #F8FAFC !important;
    text-align: left !important;
  }

  body[data-page="app"] .main-nav.open button.active {
    background: rgba(255,106,26,.18) !important;
    border-color: rgba(255,106,26,.44) !important;
    color: #FFB07A !important;
  }
}

@media (max-width: 430px) {
  body[data-page="app"] .topbar {
    grid-template-columns: auto auto minmax(0, 1fr) !important;
    padding: 8px 10px !important;
    gap: 7px !important;
  }
  body[data-page="app"] .mobile-menu-button,
  body[data-page="app"] #notificationButton {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
  }
  body[data-page="app"] .brand {
    max-width: calc(100vw - 106px) !important;
  }
  body[data-page="app"] .brand small {
    display: none !important;
  }
}

/* W2G68.3: Beta mobile filter sheet hardening.
   Keeps team/competition/member filters fully reachable on phones without touching nav drawer. */
@media (max-width: 760px) {
  body[data-page="app"].filter-sheet-open {
    overflow: hidden !important;
    touch-action: none !important;
  }

  body[data-page="app"] .filter-shell,
  body[data-page="app"] .competition-filter-shell,
  body[data-page="app"] .team-filter-shell,
  body[data-page="app"] .member-filter-shell {
    position: relative !important;
    z-index: 1 !important;
  }

  body[data-page="app"] .filter-drawer:not(.hidden) {
    position: fixed !important;
    top: calc(62px + env(safe-area-inset-top, 0px)) !important;
    right: 8px !important;
    bottom: 8px !important;
    left: 8px !important;
    z-index: 330 !important;
    display: flex !important;
    flex-direction: column !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 14px !important;
    overflow: hidden !important;
    border-radius: 22px !important;
    border: 1px solid rgba(148, 163, 184, 0.22) !important;
    box-shadow: 0 24px 80px rgba(2, 6, 23, 0.46) !important;
    animation: wtMobileSheetIn .18s ease both !important;
  }

  body[data-page="app"] .filter-drawer:not(.hidden)::before {
    flex: 0 0 auto !important;
    margin: 0 auto 10px !important;
  }

  body[data-page="app"] .filter-drawer-header {
    position: static !important;
    flex: 0 0 auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
    gap: 10px !important;
    margin: 0 0 12px !important;
    padding: 0 0 10px !important;
    background: transparent !important;
    border-bottom: 1px solid var(--border-soft) !important;
  }

  body[data-page="app"] .filter-drawer-header p {
    display: none !important;
  }

  body[data-page="app"] .filter-drawer-header .filter-close {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
  }

  body[data-page="app"] .filters-panel.compact-filter-grid {
    flex: 1 1 auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    padding: 2px 2px 12px !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body[data-page="app"] .filters-panel.compact-filter-grid label {
    min-width: 0 !important;
  }

  body[data-page="app"] .filters-panel.compact-filter-grid span {
    font-size: 12px !important;
    line-height: 1.25 !important;
  }

  body[data-page="app"] .filters-panel.compact-filter-grid select,
  body[data-page="app"] .filters-panel.compact-filter-grid input {
    width: 100% !important;
    min-height: 48px !important;
  }

  body[data-page="app"] .filter-actions {
    position: static !important;
    flex: 0 0 auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.35fr) !important;
    gap: 10px !important;
    margin: 0 -2px !important;
    padding: 12px 2px calc(2px + env(safe-area-inset-bottom, 0px)) !important;
    border-top: 1px solid var(--border-soft) !important;
    background: var(--card, #fff) !important;
  }

  html[data-theme="dark"] body[data-page="app"] .filter-actions {
    background: rgba(10 12 17) !important;
  }

  body[data-page="app"] .filter-actions .button {
    min-height: 48px !important;
    width: 100% !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  body[data-page="app"] .feedback-fab,
  body[data-page="app"] #feedbackButton,
  body[data-page="app"] .feedback-button {
    z-index: 120 !important;
  }
}

@media (max-width: 430px) {
  body[data-page="app"] .filter-drawer:not(.hidden) {
    top: calc(58px + env(safe-area-inset-top, 0px)) !important;
    right: 6px !important;
    bottom: 6px !important;
    left: 6px !important;
    padding: 12px !important;
    border-radius: 20px !important;
  }

  body[data-page="app"] .filter-actions {
    grid-template-columns: 1fr 1.3fr !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   W2G68.4 — Mobile filter sheet root-cause fix
   Root cause: .view.active-view runs "pageFadeUp" which goes
     from { transform: translateY(8px) } → to { transform: translateY(0) }
   With animation-fill-mode:both, translateY(0) stays on the element after
   the animation. Any transform (even translateY(0)) on an ancestor makes it
   a CSS containing block — so position:fixed children (.filter-drawer) are
   trapped relative to the .view section, not the viewport.
   The filter renders way outside the screen; only the header happens to
   land in the visible area, leaving the rest invisible.
   Fix: on mobile, replace the view entry animation with an opacity-only
   variant so .view.active-view carries no transform and fixed descendants
   escape to the real viewport.
   ══════════════════════════════════════════════════════════════ */

@keyframes wtViewFadeMobile {
  from { opacity: .75; }
  to   { opacity: 1;   }
}

@media (max-width: 760px) {
  .view.active-view {
    animation: wtViewFadeMobile .24s ease both !important;
  }

  /* Guarantee a fully-opaque backdrop for the fixed filter drawer so page
     cards cannot bleed through on either theme. */
  body[data-page="app"] .filter-drawer:not(.hidden) {
    background: var(--card, #ffffff) !important;
  }

  html[data-theme="dark"] body[data-page="app"] .filter-drawer:not(.hidden) {
    background: var(--card, #111827) !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   W2G69.1 — Mobile filter sheet hard fallback
   The filter panel is now moved to <body> on mobile when opened. This avoids
   every transformed / filtered / backdrop-filtered parent that can trap
   position: fixed and show only the drawer header.
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 760px) {
  body.filter-sheet-open .competition-filter-shell,
  body.filter-sheet-open .team-filter-shell,
  body.filter-sheet-open .member-filter-shell {
    transform: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    contain: none !important;
    perspective: none !important;
    overflow: visible !important;
  }

  body[data-page="app"].filter-sheet-open > .filter-drawer:not(.hidden) {
    position: fixed !important;
    inset: calc(58px + env(safe-area-inset-top, 0px)) 8px 8px 8px !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    z-index: 999 !important;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    border-radius: 20px !important;
    padding: 12px !important;
    background: var(--card, #ffffff) !important;
  }

  html[data-theme="dark"] body[data-page="app"].filter-sheet-open > .filter-drawer:not(.hidden) {
    background: rgb(10 12 18) !important;

  }

  body[data-page="app"].filter-sheet-open > .filter-drawer:not(.hidden) .filter-drawer-header {
    flex: 0 0 auto !important;
  }

  body[data-page="app"].filter-sheet-open > .filter-drawer:not(.hidden) .filters-panel.compact-filter-grid {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body[data-page="app"].filter-sheet-open > .filter-drawer:not(.hidden) .filter-actions {
    flex: 0 0 auto !important;
    position: static !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   W2G69.2 — iOS Safari login input contrast hotfix
   Real iPhone Safari can repaint focused/autofilled auth inputs with a white
   field while keeping the previous light text color. Force readable text,
   placeholder, caret, and autofill colors for the login/register page.
   ══════════════════════════════════════════════════════════════ */
body[data-page="login"] input,
body[data-page="login"] input[type="email"],
body[data-page="login"] input[type="password"],
body[data-page="login"] input[type="text"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  opacity: 1 !important;
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  caret-color: #ff6a1a !important;
  background-color: #ffffff !important;
}

body[data-page="login"] input::placeholder {
  color: #64748b !important;
  -webkit-text-fill-color: #64748b !important;
  opacity: 1 !important;
}

body[data-page="login"] input:-webkit-autofill,
body[data-page="login"] input:-webkit-autofill:hover,
body[data-page="login"] input:-webkit-autofill:focus,
body[data-page="login"] input:-webkit-autofill:active {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  caret-color: #ff6a1a !important;
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  box-shadow: 0 0 0 1000px #ffffff inset !important;
  transition: background-color 9999s ease-out 0s !important;
}

html[data-theme="dark"] body[data-page="login"] input,
html[data-theme="dark"] body[data-page="login"] input[type="email"],
html[data-theme="dark"] body[data-page="login"] input[type="password"],
html[data-theme="dark"] body[data-page="login"] input[type="text"],
body.theme-dark[data-page="login"] input,
body.theme-dark[data-page="login"] input[type="email"],
body.theme-dark[data-page="login"] input[type="password"],
body.theme-dark[data-page="login"] input[type="text"] {
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc !important;
  caret-color: #ff8a3d !important;
  background-color: rgba(15, 23, 42, 0.94) !important;
  border-color: rgba(148, 163, 184, 0.38) !important;
}

html[data-theme="dark"] body[data-page="login"] input::placeholder,
body.theme-dark[data-page="login"] input::placeholder {
  color: #94a3b8 !important;
  -webkit-text-fill-color: #94a3b8 !important;
  opacity: 1 !important;
}

html[data-theme="dark"] body[data-page="login"] input:focus,
body.theme-dark[data-page="login"] input:focus {
  border-color: #ff6a1a !important;
  box-shadow: 0 0 0 4px rgba(255, 106, 26, 0.22) !important;
}

html[data-theme="dark"] body[data-page="login"] input:-webkit-autofill,
html[data-theme="dark"] body[data-page="login"] input:-webkit-autofill:hover,
html[data-theme="dark"] body[data-page="login"] input:-webkit-autofill:focus,
html[data-theme="dark"] body[data-page="login"] input:-webkit-autofill:active,
body.theme-dark[data-page="login"] input:-webkit-autofill,
body.theme-dark[data-page="login"] input:-webkit-autofill:hover,
body.theme-dark[data-page="login"] input:-webkit-autofill:focus,
body.theme-dark[data-page="login"] input:-webkit-autofill:active {
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc !important;
  caret-color: #ff8a3d !important;
  -webkit-box-shadow: 0 0 0 1000px #0f172a inset !important;
  box-shadow: 0 0 0 1000px #0f172a inset !important;
  transition: background-color 9999s ease-out 0s !important;
}

/* W2G70.1 beta hardening: make disabled quick-access buttons visibly unavailable */
.demo-grid button.is-disabled,
.demo-grid button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.25);
}


/* W2G71.1 — Beta test stabilization polish */
@media (max-width: 720px) {
  body[data-page="app"] .topbar {
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    column-gap: 8px !important;
  }
  body[data-page="app"] .brand {
    grid-column: 1 !important;
    justify-self: start !important;
    max-width: calc(100vw - 112px) !important;
  }
  body[data-page="app"] .auth-actions,
  body[data-page="app"] .auth-actions.open,
  body[data-page="app"] .auth-actions:not(.open) {
    grid-column: 2 !important;
    justify-self: end !important;
  }
  body[data-page="app"] .mobile-menu-button {
    grid-column: 3 !important;
    justify-self: end !important;
    color: var(--ink, #f8fafc) !important;
    background: rgba(15, 23, 42, .86) !important;
  }
  html[data-theme="light"] body[data-page="app"] .mobile-menu-button {
    color: #0f172a !important;
    background: rgba(255,255,255,.94) !important;
    border-color: rgba(15,23,42,.16) !important;
  }
  html[data-theme="light"] body[data-page="app"] .mobile-menu-button::before,
  html[data-theme="light"] body[data-page="app"] .mobile-menu-button::after {
    background: #0f172a !important;
    box-shadow: 0 7px 0 0 #0f172a !important;
  }
}

.workspace-chat-list {
  max-height: min(46vh, 440px);
  overflow-y: auto;
  scroll-behavior: smooth;
}
.workspace-note-row {
  align-items: flex-start !important;
  gap: 12px !important;
}
.workspace-note-row .button.danger.ghost {
  color: #ef4444 !important;
  border-color: rgba(239,68,68,.25) !important;
}
.field-error {
  outline: 2px solid rgba(239,68,68,.75) !important;
  outline-offset: 3px !important;
  border-radius: 14px !important;
}


/* ========================================================================
   W2G72.2 true safe stabilization patch
   Minimal scoped CSS only. W2G73 visual/layout CSS was NOT copied wholesale.
   ======================================================================== */

.mobile-nav-extras {
  display: none;
}

@media (max-width: 720px) {
  body[data-page="app"] .main-nav.open .mobile-nav-extras {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: auto !important;
    padding-top: 12px !important;
    border-top: 1px solid rgba(148, 163, 184, 0.18) !important;
  }

  body[data-page="app"] .main-nav.open .mobile-nav-extras .language-switch {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    width: 100% !important;
  }

  body[data-page="app"] .main-nav.open .mobile-nav-extras .language-switch button,
  body[data-page="app"] .main-nav.open .mobile-nav-extras .theme-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 42px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-align: center !important;
  }

  html[data-theme="light"] body[data-page="app"] .main-nav.open {
    background: #ffffff !important;
    color: #0f172a !important;
    border-right: 1px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow: 18px 0 50px rgba(15, 23, 42, 0.16) !important;
  }

  html[data-theme="light"] body[data-page="app"] .main-nav.open::before {
    color: rgba(15, 23, 42, 0.62) !important;
  }

  html[data-theme="light"] body[data-page="app"] .main-nav.open button,
  html[data-theme="light"] body[data-page="app"] .main-nav.open .mobile-nav-extras .language-switch button,
  html[data-theme="light"] body[data-page="app"] .main-nav.open .mobile-nav-extras .theme-toggle {
    background: rgba(15, 23, 42, 0.04) !important;
    border-color: rgba(15, 23, 42, 0.10) !important;
    color: #0f172a !important;
  }

  html[data-theme="light"] body[data-page="app"] .main-nav.open button.active,
  html[data-theme="light"] body[data-page="app"] .main-nav.open .mobile-nav-extras .language-switch button.active {
    background: rgba(255, 106, 26, 0.12) !important;
    border-color: rgba(255, 106, 26, 0.34) !important;
    color: #b84d00 !important;
  }

  html[data-theme="dark"] body[data-page="app"] .main-nav.open .mobile-nav-extras .language-switch button,
  html[data-theme="dark"] body[data-page="app"] .main-nav.open .mobile-nav-extras .theme-toggle {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(148, 163, 184, 0.18) !important;
    color: #f8fafc !important;
  }
}

/* Selected role chips: allow larger role selections without overflow. */
.multi-select-tags {
  flex-wrap: wrap !important;
  gap: 6px !important;
  overflow: visible !important;
}

/* Thai text clipping guard — scoped to high-risk text elements only. */
.landing-hero h1,
.auth-hero-copy h1,
.brand strong,
.brand small,
.main-nav button,
.topbar button,
.button {
  line-height: 1.38 !important;
}

.landing-hero h1,
.auth-hero-copy h1 {
  padding-bottom: 0.08em !important;
}

.onboarding-field-error {
  display: block;
  margin-top: 6px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.24);
  color: #b91c1c;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
}

html[data-theme="dark"] .onboarding-field-error {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.28);
  color: #fca5a5;
}


/* ========================================================================
   W2G72.3 beta hotfix: mobile settings visibility, modal stacking, workspace live UX
   ======================================================================== */
@media (max-width: 720px) {
  body[data-page="app"] .main-nav.open .mobile-nav-extras {
    order: -1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 0 10px 0 !important;
    padding: 0 0 12px 0 !important;
    border-top: 0 !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18) !important;
    flex: 0 0 auto !important;
  }
  body[data-page="app"] .main-nav.open .mobile-nav-settings-label {
    display: block !important;
    color: rgba(248,250,252,.72) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    margin: 0 2px 2px !important;
  }
  html[data-theme="light"] body[data-page="app"] .main-nav.open .mobile-nav-settings-label {
    color: rgba(15,23,42,.62) !important;
  }
  body[data-page="app"] .main-nav.open .mobile-nav-extras .language-switch,
  body[data-page="app"] .main-nav.open .mobile-nav-extras .theme-toggle {
    display: grid !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  body[data-page="app"] .main-nav.open .mobile-nav-extras .theme-toggle {
    display: flex !important;
  }
  body[data-page="app"] .main-nav.open .mobile-nav-extras .theme-toggle .theme-toggle-label {
    display: inline !important;
  }

  body[data-page="app"] #modalOverlay:not(.hidden),
  body[data-page="app"] #modalOverlay.team-workspace-fullscreen-modal:not(.hidden) {
    z-index: 5000 !important;
  }
  body[data-page="app"] #modalOverlay:not(.hidden) .modal-card {
    z-index: 5001 !important;
  }
  body[data-page="app"].modal-open .topbar,
  body[data-page="app"].modal-open .auth-actions,
  body[data-page="app"].modal-open .mobile-menu-button {
    z-index: 10 !important;
  }
}

.team-workspace-fullscreen-modal .workspace-chat-list,
.team-workspace-fullscreen-modal .team-notes-board {
  scroll-behavior: smooth;
}

/* ========================================================================
   W2G72.4 mobile drawer controls hotfix
   The mobile nav is re-rendered by script.js, so controls must be injected
   through renderRoleNavigation() and explicitly ordered inside the drawer.
   ======================================================================== */
@media (max-width: 720px) {
  body[data-page="app"] .main-nav.open::before {
    order: 0 !important;
    flex: 0 0 auto !important;
  }

  body[data-page="app"] .main-nav.open > .mobile-nav-extras {
    order: 1 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    flex: 0 0 auto !important;
    margin: 0 0 10px 0 !important;
    padding: 0 0 12px 0 !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18) !important;
    opacity: 1 !important;
    visibility: visible !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    pointer-events: auto !important;
  }

  body[data-page="app"] .main-nav.open > button {
    order: 2 !important;
  }

  body[data-page="app"] .main-nav.open .mobile-nav-settings-label {
    display: block !important;
    color: rgba(248, 250, 252, 0.72) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    line-height: 1.35 !important;
    text-transform: uppercase !important;
    margin: 0 2px 1px !important;
  }

  body[data-page="app"] .main-nav.open .mobile-nav-extras .language-switch {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    width: 100% !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  body[data-page="app"] .main-nav.open .mobile-nav-extras .language-switch button,
  body[data-page="app"] .main-nav.open .mobile-nav-extras .theme-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 40px !important;
    padding: 9px 12px !important;
    border-radius: 13px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-align: center !important;
    white-space: nowrap !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  body[data-page="app"] .main-nav.open .mobile-nav-extras .theme-toggle {
    gap: 8px !important;
  }

  body[data-page="app"] .main-nav.open .mobile-nav-extras .theme-toggle .theme-toggle-icon {
    display: inline-grid !important;
    width: 17px !important;
    height: 17px !important;
    place-items: center !important;
    flex: 0 0 auto !important;
  }

  body[data-page="app"] .main-nav.open .mobile-nav-extras .theme-toggle .theme-toggle-label {
    display: inline !important;
  }

  html[data-theme="dark"] body[data-page="app"] .main-nav.open .mobile-nav-extras .language-switch button,
  html[data-theme="dark"] body[data-page="app"] .main-nav.open .mobile-nav-extras .theme-toggle {
    background: rgba(255, 255, 255, 0.07) !important;
    border-color: rgba(148, 163, 184, 0.20) !important;
    color: #f8fafc !important;
  }

  html[data-theme="dark"] body[data-page="app"] .main-nav.open .mobile-nav-extras .language-switch button.active {
    background: rgba(255, 106, 26, 0.18) !important;
    border-color: rgba(255, 106, 26, 0.44) !important;
    color: #ffb07a !important;
  }

  html[data-theme="light"] body[data-page="app"] .main-nav.open .mobile-nav-settings-label {
    color: rgba(15, 23, 42, 0.62) !important;
  }

  html[data-theme="light"] body[data-page="app"] .main-nav.open .mobile-nav-extras .language-switch button,
  html[data-theme="light"] body[data-page="app"] .main-nav.open .mobile-nav-extras .theme-toggle {
    background: rgba(15, 23, 42, 0.045) !important;
    border-color: rgba(15, 23, 42, 0.11) !important;
    color: #0f172a !important;
  }

  html[data-theme="light"] body[data-page="app"] .main-nav.open .mobile-nav-extras .language-switch button.active {
    background: rgba(255, 106, 26, 0.12) !important;
    border-color: rgba(255, 106, 26, 0.34) !important;
    color: #b84d00 !important;
  }
}

/* ========================================================================
   W2G72.5 — Mobile topbar icon visual polish
   Scope: visual-only cleanup for the mobile hamburger + notification icons.
   Keeps the existing drawer logic and menu structure untouched.
   ======================================================================== */
@media (max-width: 720px) {
  body[data-page="app"] .topbar {
    column-gap: 7px !important;
    padding-inline: 10px !important;
  }

  body[data-page="app"] .auth-actions,
  body[data-page="app"] .auth-actions.open,
  body[data-page="app"] .auth-actions:not(.open) {
    gap: 7px !important;
  }

  body[data-page="app"] #notificationButton,
  body[data-page="app"] .mobile-menu-button {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(148, 163, 184, .28) !important;
    background: rgba(15, 23, 42, .72) !important;
    box-shadow: 0 10px 22px rgba(2, 6, 23, .18), inset 0 1px 0 rgba(255, 255, 255, .08) !important;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease !important;
  }

  body[data-page="app"] .mobile-menu-button {
    color: transparent !important;
    font-size: 0 !important;
    overflow: visible !important;
  }

  body[data-page="app"] .mobile-menu-button::before {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 12px !important;
    right: auto !important;
    width: 16px !important;
    height: 1.8px !important;
    border-radius: 999px !important;
    background: currentColor !important;
    transform: translateX(-50%) !important;
    box-shadow: 0 6px 0 currentColor, 0 12px 0 currentColor !important;
    opacity: .96 !important;
  }

  body[data-page="app"] .mobile-menu-button::after {
    display: none !important;
    content: none !important;
    box-shadow: none !important;
  }

  html[data-theme="dark"] body[data-page="app"] .mobile-menu-button,
  html[data-theme="dark"] body[data-page="app"] #notificationButton {
    color: #f8fafc !important;
    background: rgba(15, 23, 42, .76) !important;
    border-color: rgba(148, 163, 184, .28) !important;
  }

  html[data-theme="light"] body[data-page="app"] .mobile-menu-button,
  html[data-theme="light"] body[data-page="app"] #notificationButton {
    color: #111827 !important;
    background: rgba(255, 255, 255, .92) !important;
    border-color: rgba(15, 23, 42, .14) !important;
    box-shadow: 0 10px 22px rgba(15, 23, 42, .08), inset 0 1px 0 rgba(255, 255, 255, .9) !important;
  }

  body[data-page="app"] .mobile-menu-button:hover,
  body[data-page="app"] #notificationButton:hover,
  body[data-page="app"] .mobile-menu-button:focus-visible,
  body[data-page="app"] #notificationButton:focus-visible {
    border-color: rgba(249, 115, 22, .48) !important;
    box-shadow: 0 12px 26px rgba(249, 115, 22, .13), inset 0 1px 0 rgba(255, 255, 255, .12) !important;
  }

  body[data-page="app"].mobile-menu-open .mobile-menu-button {
    color: #fb923c !important;
    border-color: rgba(249, 115, 22, .62) !important;
    background: rgba(249, 115, 22, .10) !important;
    box-shadow: 0 14px 30px rgba(249, 115, 22, .18), inset 0 1px 0 rgba(255, 255, 255, .10) !important;
  }

  html[data-theme="light"] body[data-page="app"].mobile-menu-open .mobile-menu-button {
    background: rgba(255, 237, 213, .92) !important;
    color: #c2410c !important;
  }
}

/* W2G76.1 Product Scale Sprint 1: clarity, decision quality, feedback structure */
.hero-value-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.hero-value-strip span,
.product-helper-copy {
  color: var(--muted);
}
.hero-value-strip span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 10px;
  border: 1px solid rgba(255, 106, 26, 0.20);
  border-radius: 999px;
  background: rgba(255, 106, 26, 0.08);
  color: var(--orange-dark, #c2410c);
  font-size: 12px;
  font-weight: 700;
}
html[data-theme="dark"] .hero-value-strip span {
  background: rgba(251, 146, 60, 0.14);
  color: #fed7aa;
  border-color: rgba(251, 146, 60, 0.28);
}
.product-helper-copy {
  max-width: 680px;
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.55;
}
.decision-snapshot {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0 10px;
}
.decision-snapshot > div {
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.70);
}
html[data-theme="dark"] .decision-snapshot > div {
  background: rgba(15, 23, 42, 0.54);
  border-color: rgba(148, 163, 184, 0.18);
}
.decision-snapshot span {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.decision-snapshot strong {
  display: block;
  overflow: hidden;
  color: var(--polish-text-strong, var(--ink));
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.readiness-meter {
  margin: 8px 0 12px;
  padding: 10px 11px;
  border: 1px solid rgba(148, 163, 184, 0.20);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.54);
}
html[data-theme="dark"] .readiness-meter {
  background: rgba(15, 23, 42, 0.50);
  border-color: rgba(148, 163, 184, 0.18);
}
.readiness-meter-label {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.readiness-meter-label strong { color: var(--polish-text-strong, var(--ink)); }
.readiness-meter-track {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.22);
}
.readiness-meter-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #fb923c, #f97316);
}
.readiness-ready .readiness-meter-track span { background: linear-gradient(90deg, #34d399, #10b981); }
.readiness-almost .readiness-meter-track span { background: linear-gradient(90deg, #fbbf24, #f97316); }
.score-meter {
  margin: 8px 0 12px;
  padding: 10px 11px;
  border: 1px solid rgba(148, 163, 184, 0.20);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.54);
}
html[data-theme="dark"] .score-meter {
  background: rgba(15, 23, 42, 0.50);
  border-color: rgba(148, 163, 184, 0.18);
}
.score-meter-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.score-meter-label strong {
  color: var(--polish-text-strong, var(--ink));
  font-size: 13px;
}
.score-meter-track {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.22);
}
.score-meter-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #34d399, #10b981);
}
.member-polished-card .score-meter,
.team-polished-card .score-meter {
  width: 100%;
}

/* W2G v2.0 — Competition Matching Engine: Estimated fit meter on competition cards */
.competition-score-meter {
  margin: 10px 0 14px;
}
.competition-score-meter.closed .score-meter-track span {
  background: linear-gradient(90deg, #94a3b8, #64748b);
}
.competition-score-meter.closed .score-meter-label {
  color: var(--muted);
}
.score-meter-helper {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
}
html[data-theme="dark"] .score-meter-helper {
  color: rgba(226, 232, 240, 0.70);
}
@media (max-width: 480px) {
  .score-meter-helper { display: none; }
}
.discovery-summary-panel,
.discovery-shell .team-summary-text,
.discovery-shell .member-summary-text {
  line-height: 1.55;
}
.feedback-form .optional-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.feedback-admin-context {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0;
}
.feedback-admin-context span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 5px 8px;
  border: 1px solid rgba(148, 163, 184, 0.20);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
@media (max-width: 760px) {
  .hero-value-strip { gap: 6px; }
  .hero-value-strip span { font-size: 11px; }
  .product-helper-copy { font-size: 13px; }
  .decision-snapshot { grid-template-columns: 1fr; }
  .decision-snapshot > div { padding: 9px 10px; }
  .score-meter { padding: 9px 10px; }
  .score-meter-label { font-size: 10px; }
}

/* W2G77.1 — Product Scale Sprint 1 score clarity + feedback readability */
.score-pill-explained {
  min-width: 76px;
  gap: 1px;
  cursor: help;
}
.score-pill-explained small {
  display: block;
  color: inherit;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.05;
  opacity: .82;
  text-transform: lowercase;
}
.score-explainer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 110, 32, 0.18);
  border-radius: 18px;
  background: rgba(255, 110, 32, 0.07);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.score-explainer strong {
  flex: 0 0 auto;
  color: var(--polish-text-strong, var(--ink));
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.score-explainer span {
  min-width: 0;
}
html[data-theme="dark"] .score-explainer {
  background: rgba(255, 110, 32, 0.10);
  border-color: rgba(255, 110, 32, 0.22);
}
.feedback-admin-card-v2 {
  align-items: stretch;
}
.feedback-admin-header-v2 {
  margin-bottom: 12px;
}
.feedback-admin-title-stack {
  display: grid;
  gap: 8px;
}
.feedback-admin-title-stack > strong {
  color: var(--polish-text-strong, var(--ink));
  font-size: 15px;
  line-height: 1.45;
}
.feedback-admin-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.feedback-type-badge,
.feedback-severity-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(148, 163, 184, 0.10);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.feedback-severity-badge.severity-high {
  border-color: rgba(248, 113, 113, 0.35);
  background: rgba(248, 113, 113, 0.12);
}
.feedback-severity-badge.severity-low {
  border-color: rgba(34, 197, 94, 0.25);
  background: rgba(34, 197, 94, 0.10);
}
.feedback-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0 12px;
}
.feedback-field {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 14px;
  background: rgba(148, 163, 184, 0.07);
}
.feedback-field-wide {
  grid-column: 1 / -1;
}
.feedback-field span {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.feedback-field strong {
  display: block;
  overflow-wrap: anywhere;
  color: var(--polish-text-strong, var(--ink));
  font-size: 13px;
  line-height: 1.4;
}
.feedback-admin-details {
  border-top: 1px solid rgba(148, 163, 184, 0.16);
  padding-top: 10px;
}
.feedback-admin-details summary {
  cursor: pointer;
  color: var(--accent, #ff6a1a);
  font-size: 13px;
  font-weight: 700;
}
.feedback-admin-details pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 10px 0 0;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(15, 23, 42, 0.04);
  color: var(--text);
  font: inherit;
  line-height: 1.55;
}
html[data-theme="dark"] .feedback-field,
html[data-theme="dark"] .feedback-admin-details pre {
  background: rgba(15, 23, 42, 0.46);
  border-color: rgba(148, 163, 184, 0.18);
}
@media (max-width: 760px) {
  .score-explainer {
    display: grid;
    gap: 6px;
    padding: 11px 12px;
  }
  .score-pill-explained {
    min-width: 68px;
  }
  .feedback-admin-card-v2 {
    display: grid;
  }
  .feedback-field-grid {
    grid-template-columns: 1fr;
  }
}

/* W2G77.2 — Score guide layout + member score context fix */
#teamList > .score-explainer,
#memberList > .score-explainer {
  grid-column: 1 / -1;
  align-self: start;
}
.score-explainer.score-explainer-compact {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  min-height: 0;
  margin: 0 0 8px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255, 110, 32, 0.055);
  border-color: rgba(255, 110, 32, 0.16);
  box-shadow: none;
  font-size: 12px;
  line-height: 1.4;
}
.score-explainer-compact .score-explainer-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(255, 110, 32, 0.14);
  color: var(--orange);
  font-size: 12px;
  font-weight: 800;
}
.score-explainer-compact > div {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.score-explainer.score-explainer-compact strong {
  flex: 0 0 auto;
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
}
.score-explainer.score-explainer-compact span:not(.score-explainer-icon) {
  min-width: 0;
  font-size: 12px;
  line-height: 1.42;
}
html[data-theme="dark"] .score-explainer.score-explainer-compact {
  background: rgba(255, 110, 32, 0.075);
  border-color: rgba(255, 110, 32, 0.18);
}
.member-polished-card .discovery-shell-top-member .member-card-identity {
  flex: 1 1 auto;
  min-width: 0;
}
@media (max-width: 760px) {
  .score-explainer.score-explainer-compact {
    align-items: flex-start;
    padding: 10px 11px;
  }
  .score-explainer-compact > div {
    display: grid;
    gap: 3px;
  }
}


/* W2G84.2 — Competition status visibility polish */
.competition-poster-shell {
  position: relative;
  isolation: isolate;
}

.competition-poster-shell .competition-poster {
  margin-bottom: 16px;
}

.competition-status-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: calc(100% - 28px);
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.20);
  padding: 9px 14px;
  background: rgba(15, 23, 42, 0.78);
  color: #f8fafc;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.01em;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.30);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.competition-status-badge::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18);
}

.competition-status-badge.status-open {
  background: linear-gradient(135deg, rgba(22, 163, 74, 0.98) 0%, rgba(34, 197, 94, 0.98) 55%, rgba(74, 222, 128, 0.98) 100%);
  border-color: rgba(187, 247, 208, 0.78);
  color: #f0fdf4;
  box-shadow: 0 14px 34px rgba(22, 163, 74, 0.42), 0 0 0 1px rgba(34, 197, 94, 0.18);
}

.competition-status-badge.status-open::before {
  background: #dcfce7;
  box-shadow: 0 0 0 3px rgba(240, 253, 244, 0.22), 0 0 14px rgba(187, 247, 208, 0.80);
}

.competition-status-badge.status-soon {
  background: rgba(249, 115, 22, 0.95);
}

.competition-status-badge.status-closed {
  background: rgba(220, 38, 38, 0.96);
  text-transform: uppercase;
}

.competition-card {
  position: relative;
}

.competition-card-closed {
  border-color: rgba(220, 38, 38, 0.28) !important;
}

.competition-card-closed .competition-poster img,
.competition-card-closed .competition-poster.poster-empty {
  filter: grayscale(0.55) brightness(0.74);
}

.competition-card-closed .competition-poster-shell::after {
  content: "REGISTRATION CLOSED";
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  padding-top: 44px;
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(16px, 2.4vw, 26px);
  font-weight: 1000;
  letter-spacing: 0.06em;
  text-align: center;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.18), rgba(15, 23, 42, 0.48));
  pointer-events: none;
}

.competition-closed-notice {
  display: grid;
  gap: 3px;
  margin: 12px 18px 0;
  border: 1px solid rgba(220, 38, 38, 0.30);
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(254, 226, 226, 0.78);
  color: #7f1d1d;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
}

.competition-closed-notice strong {
  font-size: 13px;
  font-weight: 800;
}

.competition-closed-notice span {
  opacity: 0.86;
}

.button.disabled,
.button:disabled.competition-closed-action {
  cursor: not-allowed;
  border-color: rgba(148, 163, 184, 0.30) !important;
  background: rgba(148, 163, 184, 0.18) !important;
  color: var(--muted) !important;
  box-shadow: none !important;
}

.competition-action-option.closed-option {
  border-color: rgba(220, 38, 38, 0.28);
  background: rgba(254, 226, 226, 0.42);
}

html[data-theme="dark"] .competition-closed-notice,
html[data-theme="dark"] .competition-action-option.closed-option {
  background: rgba(127, 29, 29, 0.20);
  border-color: rgba(248, 113, 113, 0.32);
  color: #fecaca;
}

html[data-theme="dark"] .competition-card-closed {
  border-color: rgba(248, 113, 113, 0.28) !important;
}

/* W2G84.8: Target competition single custom combobox */
.team-target-combobox {
  position: relative;
  width: 100%;
}

.team-target-combobox input[data-team-target-competition] {
  width: 100%;
  padding-right: 78px;
}

.team-target-clear,
.team-target-toggle {
  position: absolute;
  z-index: 2;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted, #94a3b8);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.team-target-clear {
  right: 42px;
  font-size: 18px;
}

.team-target-toggle {
  right: 10px;
  font-size: 14px;
}

.team-target-clear:hover,
.team-target-toggle:hover,
.team-target-combobox.is-open .team-target-toggle {
  background: rgba(255, 122, 26, 0.12);
  color: #ffb27a;
}

.team-target-combobox.is-open .team-target-toggle {
  transform: translateY(-50%) rotate(180deg);
}

.team-target-menu {
  position: absolute;
  z-index: 120;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 238px;
  overflow: auto;
  padding: 6px;
  border: 1px solid rgba(148, 163, 184, 0.26);
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.99);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.42);
}

.team-target-option {
  display: block;
  width: 100%;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 9px 10px;
  background: transparent;
  color: var(--text, #f8fafc);
  text-align: left;
  cursor: pointer;
}

.team-target-option + .team-target-option {
  margin-top: 2px;
}

.team-target-option strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.team-target-option small {
  display: block;
  margin-top: 3px;
  color: var(--muted, #94a3b8);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.team-target-option:hover,
.team-target-option:focus-visible {
  border-color: rgba(255, 122, 26, 0.38);
  background: rgba(255, 122, 26, 0.10);
  outline: none;
}

.team-target-option.is-custom {
  border-color: rgba(34, 197, 94, 0.34);
  background: rgba(34, 197, 94, 0.08);
}

.team-target-option.is-disabled,
.team-target-option.is-empty {
  cursor: default;
  color: var(--muted, #94a3b8);
}

.team-target-option.is-disabled {
  border-color: rgba(239, 68, 68, 0.32);
  background: rgba(239, 68, 68, 0.09);
}

.team-target-option.is-empty {
  padding: 12px;
  font-size: 12px;
  font-weight: 800;
}

@media (max-width: 760px) {
  .team-target-menu {
    max-height: 210px;
  }
}

/* W2G84.9 — Team Workspace redesign: command-room overview, clearer next actions */
.team-workspace-fullscreen-modal .modal-card {
  background:
    radial-gradient(circle at 88% 4%, rgba(255, 106, 26, 0.10), transparent 26%),
    linear-gradient(135deg, rgba(8, 15, 30, 0.98), rgba(11, 19, 38, 0.96)) !important;
}

.team-workspace-fullscreen-modal #modalBody {
  padding-inline: clamp(18px, 3vw, 44px) !important;
  padding-top: 18px !important;
}

.workspace-redesign-shell {
  width: min(1280px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 18px;
}

.workspace-redesign-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  gap: 18px;
  align-items: stretch;
  padding: clamp(18px, 2.5vw, 28px);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 28px;
  background:
    radial-gradient(circle at 6% 0%, rgba(255, 106, 26, 0.18), transparent 34%),
    linear-gradient(135deg, rgba(15, 23, 42, 0.82), rgba(17, 24, 39, 0.54));
  box-shadow: 0 22px 70px rgba(2, 6, 23, 0.22);
}

.workspace-redesign-main h3 {
  margin: 8px 0 10px;
  max-width: 820px;
  color: var(--text, #f8fafc);
  font-size: clamp(1.55rem, 3vw, 2.8rem);
  line-height: 1.04;
  letter-spacing: -0.055em;
}

.workspace-redesign-main p {
  max-width: 740px;
  margin: 0;
  color: var(--muted, #9aa4b2);
  font-size: 1rem;
  line-height: 1.65;
}

.workspace-redesign-quickfacts {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 18px;
}

.workspace-redesign-quickfacts span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 8px 12px;
  border: 1px solid rgba(148, 163, 184, 0.20);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  color: var(--muted, #9aa4b2);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.15;
}

.workspace-redesign-action-card {
  display: grid;
  align-content: space-between;
  gap: 16px;
  min-height: 100%;
  padding: 18px;
  border: 1px solid rgba(255, 106, 26, 0.25);
  border-radius: 22px;
  background:
    radial-gradient(circle at 90% 0%, rgba(255, 106, 26, 0.22), transparent 44%),
    rgba(15, 23, 42, 0.76);
}

.workspace-redesign-action-card strong {
  display: block;
  margin-top: 5px;
  color: var(--text, #f8fafc);
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.24;
}

.workspace-redesign-action-card p {
  margin: 8px 0 0;
  color: var(--muted, #9aa4b2);
  font-size: 0.88rem;
  line-height: 1.55;
}

.workspace-redesign-primary {
  width: 100%;
  justify-content: center;
}

.workspace-readiness-mini span {
  display: block;
  color: var(--muted, #9aa4b2);
  font-weight: 700;
  font-size: 0.82rem;
}

.workspace-overview-redesign {
  display: grid;
  gap: 18px;
}

.workspace-next-panel,
.workspace-status-main,
.workspace-readiness-card,
.workspace-snapshot-grid article,
.workspace-context-card,
.workspace-next-card {
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 24px;
  background: rgba(15, 23, 42, 0.58);
}

.workspace-next-panel {
  padding: clamp(16px, 2.2vw, 22px);
}

.workspace-next-title h3 {
  margin: 4px 0 4px;
  font-size: clamp(1.25rem, 2vw, 1.7rem);
  letter-spacing: -0.035em;
}

.workspace-next-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.workspace-next-card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 11px;
  min-height: 178px;
  padding: 15px;
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.workspace-next-card:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 106, 26, 0.34);
}

.workspace-next-card.is-done {
  border-color: rgba(34, 197, 94, 0.28);
  background:
    radial-gradient(circle at 0% 0%, rgba(34, 197, 94, 0.10), transparent 40%),
    rgba(15, 23, 42, 0.58);
}

.workspace-next-card.needs-work {
  border-color: rgba(255, 106, 26, 0.30);
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 106, 26, 0.12), transparent 42%),
    rgba(15, 23, 42, 0.62);
}

.workspace-next-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.workspace-next-card-head span {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(255, 106, 26, 0.16);
  color: #ffb07a;
  font-weight: 800;
}

.workspace-next-card.is-done .workspace-next-card-head span {
  background: rgba(34, 197, 94, 0.14);
  color: #86efac;
}

.workspace-next-card strong {
  color: var(--text, #f8fafc);
  font-weight: 800;
}

.workspace-next-card p {
  margin: 0;
  color: var(--muted, #9aa4b2);
  font-size: 0.86rem;
  line-height: 1.5;
}

.workspace-status-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.75fr);
  gap: 14px;
}

.workspace-status-main,
.workspace-readiness-card,
.workspace-context-card {
  padding: 18px;
}

.workspace-status-main h3 {
  margin: 6px 0;
  color: var(--text, #f8fafc);
  font-size: clamp(1.2rem, 1.8vw, 1.65rem);
  letter-spacing: -0.03em;
  overflow-wrap: anywhere;
}

.workspace-status-main p,
.workspace-readiness-card p {
  margin: 0 0 14px;
  color: var(--muted, #9aa4b2);
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.workspace-readiness-card span,
.workspace-snapshot-grid article span {
  display: block;
  color: var(--muted, #9aa4b2);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.workspace-readiness-card strong {
  display: block;
  margin-top: 6px;
  color: var(--text, #f8fafc);
  font-size: 2.4rem;
  line-height: 1;
  letter-spacing: -0.05em;
}

.workspace-snapshot-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.workspace-snapshot-grid article {
  padding: 16px;
  min-height: 128px;
}

.workspace-snapshot-grid article strong {
  display: block;
  margin: 7px 0 6px;
  color: var(--text, #f8fafc);
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.18;
  overflow-wrap: anywhere;
}

.workspace-snapshot-grid article p {
  margin: 0;
  color: var(--muted, #9aa4b2);
  line-height: 1.45;
}

.workspace-two-column {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.8fr);
  gap: 14px;
}

.workspace-context-card h3 {
  margin: 0 0 14px;
  font-size: 1.1rem;
}

.workspace-context-card .simple-grid.two > div,
.workspace-activity-list > div {
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 18px;
  background: rgba(2, 6, 23, 0.18);
}

.workspace-activity-list {
  display: grid;
  gap: 10px;
}

.workspace-activity-list strong {
  display: block;
  margin-bottom: 4px;
}

.workspace-activity-list p {
  margin: 0 0 10px;
  color: var(--muted, #9aa4b2);
}

html[data-theme="light"] .team-workspace-fullscreen-modal .modal-card {
  background:
    radial-gradient(circle at 88% 4%, rgba(255, 106, 26, 0.08), transparent 26%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96)) !important;
}

html[data-theme="light"] .workspace-redesign-hero,
html[data-theme="light"] .workspace-next-panel,
html[data-theme="light"] .workspace-status-main,
html[data-theme="light"] .workspace-readiness-card,
html[data-theme="light"] .workspace-snapshot-grid article,
html[data-theme="light"] .workspace-context-card,
html[data-theme="light"] .workspace-next-card,
html[data-theme="light"] .workspace-redesign-action-card {
  background: rgba(255, 255, 255, 0.84);
}

html[data-theme="light"] .workspace-redesign-quickfacts span,
html[data-theme="light"] .workspace-context-card .simple-grid.two > div,
html[data-theme="light"] .workspace-activity-list > div {
  background: rgba(248, 250, 252, 0.82);
}

@media (max-width: 1120px) {
  .workspace-next-grid,
  .workspace-snapshot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .workspace-redesign-hero,
  .workspace-status-layout,
  .workspace-two-column {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .team-workspace-fullscreen-modal #modalBody {
    padding: 14px !important;
  }
  .workspace-redesign-shell {
    gap: 14px;
  }
  .workspace-redesign-hero,
  .workspace-next-panel,
  .workspace-status-main,
  .workspace-readiness-card,
  .workspace-context-card {
    border-radius: 20px;
  }
  .workspace-next-grid,
  .workspace-snapshot-grid {
    grid-template-columns: 1fr;
  }
  .workspace-next-card {
    min-height: 0;
  }
  .workspace-redesign-main h3 {
    font-size: 1.65rem;
  }
  .workspace-redesign-quickfacts span {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
  .workspace-status-main .button-row,
  .workspace-status-main .button-row .button,
  .workspace-next-card .button {
    width: 100%;
  }
}

/* W2G86.2: invitation-aware Find Team cards */
.team-invited-card {
  position: relative;
  border-color: rgba(255, 106, 26, 0.58) !important;
  box-shadow: 0 18px 52px rgba(255, 106, 26, 0.16), var(--polish-card-shadow);
}

.team-invited-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  border-radius: 22px 0 0 22px;
  background: linear-gradient(180deg, #ff7a1a, #ffb347);
}

.team-invitation-banner {
  display: grid;
  gap: 3px;
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 106, 26, 0.34);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255, 106, 26, 0.14), rgba(255, 178, 71, 0.08));
}

.team-invitation-banner span {
  width: max-content;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 106, 26, 0.16);
  color: var(--orange);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.team-invitation-banner strong {
  color: var(--polish-text-strong);
  font-size: 14px;
  line-height: 1.25;
}

.team-invitation-banner small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.team-invitation-tag {
  border-color: rgba(255, 106, 26, 0.48) !important;
  background: rgba(255, 106, 26, 0.14) !important;
  color: var(--orange) !important;
}

html[data-theme="dark"] .team-invited-card,
body.theme-dark .team-invited-card {
  box-shadow: 0 18px 58px rgba(255, 106, 26, 0.22), var(--polish-card-shadow);
}

html[data-theme="dark"] .team-invitation-banner,
body.theme-dark .team-invitation-banner {
  background: linear-gradient(135deg, rgba(255, 106, 26, 0.18), rgba(255, 178, 71, 0.08));
  border-color: rgba(255, 106, 26, 0.42);
}

/* ---------- W2G87 UX patch: availability section header ---------- */
.field-intro-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 16px;
  margin-bottom: 4px;
}
.field-intro-row .field-intro {
  margin: 0;
}
.field-hint {
  color: var(--muted, #9aa4b2);
  font-size: 0.78rem;
  font-weight: 700;
}

/* ---------- W2G87 UX patch: notification clickable rows ---------- */
.notif-clickable {
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.notif-clickable:hover {
  background: rgba(255, 106, 26, 0.07) !important;
  border-color: rgba(255, 106, 26, 0.35) !important;
}
.notif-action-hint {
  font-size: 0.78rem;
  color: var(--orange, #ff6a1a);
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ---------- Notification Center: approved centered modal treatment ---------- */
#modalOverlay[data-modal-kind="notifications"] .modal-card {
  width: min(680px, 100%);
  max-height: min(760px, 90vh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--w2g-line, var(--border));
  border-radius: 14px;
  box-shadow: var(--w2g-shadow-pop, 0 8px 24px rgba(36, 29, 20, 0.14));
}

#modalOverlay[data-modal-kind="notifications"] .modal-header {
  flex: 0 0 auto;
  align-items: center;
  padding: 18px 20px 16px;
  border-bottom-color: var(--w2g-line, var(--border));
}

#modalOverlay[data-modal-kind="notifications"] .modal-header .eyebrow {
  margin-bottom: 3px;
  color: var(--w2g-muted, var(--muted));
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0;
}

#modalOverlay[data-modal-kind="notifications"] .modal-header h2 {
  color: var(--w2g-ink, var(--ink));
  font-size: 1.35rem;
  line-height: 1.3;
}

#modalOverlay[data-modal-kind="notifications"] .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 0;
  background: var(--w2g-bg, var(--bg));
  -webkit-overflow-scrolling: touch;
}

#modalOverlay[data-modal-kind="notifications"] .modal-footer {
  display: none;
}

.notification-v2-center {
  padding: 14px;
}

.notification-v2-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 42px;
  margin-bottom: 14px;
  padding: 0 2px;
  color: var(--w2g-muted, var(--muted));
  font-size: 0.8125rem;
  font-weight: 700;
}

.notification-v2-mark-all.button {
  min-height: 38px;
  padding: 8px 11px;
  color: var(--w2g-orange-ink, var(--orange-dark));
  font-size: 0.8125rem;
  white-space: nowrap;
}

.notification-v2-list,
.notification-v2-group-items {
  display: flex;
  flex-direction: column;
}

.notification-v2-list {
  gap: 18px;
}

.notification-v2-group h3 {
  margin: 0 2px 8px;
  color: var(--w2g-muted, var(--muted));
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.3;
}

.notification-v2-group-items {
  gap: 8px;
}

#modalOverlay[data-modal-kind="notifications"] .notification-v2-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto auto;
  align-items: start;
  gap: 10px;
  min-width: 0;
  padding: 13px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--w2g-ink, var(--ink));
  transition: background-color 160ms ease-out, border-color 160ms ease-out;
}

#modalOverlay[data-modal-kind="notifications"] .notification-v2-row.is-unread {
  border-color: var(--w2g-line, var(--border));
  background: var(--w2g-surface, var(--card));
}

#modalOverlay[data-modal-kind="notifications"] .notification-v2-row.is-read {
  opacity: 0.78;
}

#modalOverlay[data-modal-kind="notifications"] .notification-v2-row.notif-clickable:hover,
#modalOverlay[data-modal-kind="notifications"] .notification-v2-row.notif-clickable:focus-visible {
  border-color: var(--w2g-line-strong, var(--border));
  background: var(--w2g-surface, var(--card));
  outline: none;
}

#modalOverlay[data-modal-kind="notifications"] .notification-v2-row.notif-clickable:focus-visible {
  box-shadow: var(--w2g-focus, 0 0 0 3px rgba(234, 88, 12, 0.18));
}

.notification-v2-icon {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 10px;
  background: var(--w2g-surface-2, var(--soft));
  color: var(--w2g-body, var(--body));
}

.notification-v2-icon svg {
  width: 18px;
  height: 18px;
}

.notification-v2-icon-competition,
.notification-v2-icon-application {
  background: var(--w2g-orange-soft, var(--orange-light));
  color: var(--w2g-orange-ink, var(--orange-dark));
}

.notification-v2-icon-invite,
.notification-v2-icon-request,
.notification-v2-icon-team,
.notification-v2-icon-task {
  background: var(--w2g-match-soft, #e7f2e2);
  color: var(--w2g-match-ink, #0f7a38);
}

.notification-v2-copy {
  min-width: 0;
  overflow-wrap: anywhere;
}

.notification-v2-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  align-items: center;
  margin-bottom: 3px;
  color: var(--w2g-muted, var(--muted));
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.35;
}

.notification-v2-type {
  color: var(--w2g-body, var(--body));
  font-weight: 700;
  text-transform: capitalize;
}

.notification-v2-copy strong {
  display: block;
  color: var(--w2g-ink, var(--ink));
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.48;
}

.notification-v2-copy p {
  margin: 3px 0 0;
  color: var(--w2g-body, var(--body));
  font-size: 0.875rem;
  line-height: 1.55;
}

.notification-v2-unread-dot {
  width: 7px;
  height: 7px;
  margin-top: 7px;
  border-radius: 999px;
  background: var(--w2g-orange, var(--orange));
}

.notification-v2-cta {
  min-height: 36px;
  margin: 1px -3px 0 0;
  padding: 6px 4px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--w2g-orange-ink, var(--orange-dark));
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  cursor: pointer;
}

.notification-v2-cta:hover,
.notification-v2-cta:focus-visible {
  background: var(--w2g-orange-soft, var(--orange-light));
  outline: none;
}

.notification-v2-empty,
.notification-v2-loading {
  display: grid;
  min-height: 260px;
  place-content: center;
  justify-items: center;
  padding: 32px 24px;
  color: var(--w2g-muted, var(--muted));
  text-align: center;
}

.notification-v2-empty-icon {
  display: grid;
  width: 48px;
  height: 48px;
  margin-bottom: 14px;
  place-items: center;
  border-radius: 12px;
  background: var(--w2g-surface-2, var(--soft));
  color: var(--w2g-body, var(--body));
}

.notification-v2-empty-icon svg {
  width: 23px;
  height: 23px;
}

.notification-v2-empty strong {
  color: var(--w2g-ink, var(--ink));
  font-size: 1rem;
}

.notification-v2-empty p {
  max-width: 31ch;
  margin: 6px 0 0;
  font-size: 0.875rem;
  line-height: 1.6;
}

.notification-v2-notice {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--w2g-orange-line, var(--border-orange));
  border-radius: 10px;
  background: var(--w2g-orange-soft, var(--orange-light));
  color: var(--w2g-orange-ink, var(--orange-dark));
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.5;
}

@media (max-width: 760px) {
  #modalOverlay[data-modal-kind="notifications"] .modal-card {
    width: 100vw;
    max-height: none;
    border: 0;
    border-radius: 0;
  }

  #modalOverlay[data-modal-kind="notifications"] .modal-header {
    padding: 16px;
  }

  .notification-v2-center {
    padding: 14px;
  }

  .notification-v2-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .notification-v2-mark-all.button {
    width: 100%;
  }

  #modalOverlay[data-modal-kind="notifications"] .notification-v2-row {
    grid-template-columns: 36px minmax(0, 1fr) auto;
  }

  .notification-v2-cta {
    grid-column: 2 / -1;
    justify-self: start;
    margin: -2px 0 0;
    padding: 7px 8px;
    border: 1px solid var(--w2g-line, var(--border));
    background: var(--w2g-surface, var(--card));
  }

  .notification-v2-unread-dot {
    grid-column: 3;
    grid-row: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  #modalOverlay[data-modal-kind="notifications"] .notification-v2-row {
    transition: none;
  }
}

/* ---------- W2G87 UX patch: team hub chat preview in side panel ---------- */
.team-hub-quick-chat {
  margin: 10px 0 6px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(148, 163, 184, 0.07);
  border: 1px solid var(--border, rgba(226,232,240,0.9));
}
.team-hub-quick-chat p.field-help {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted, #9aa4b2);
}
.team-hub-quick-chat p:not(.field-help) {
  margin: 0;
  font-size: 13px;
  color: var(--ink, #0f172a);
  line-height: 1.4;
  word-break: break-word;
}
html[data-theme="dark"] .team-hub-quick-chat {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.1);
}

/* W2G88.3 — Light theme Team Workspace contrast hotfix
   Keep the redesigned workspace readable when the app is switched to light mode.
   Earlier workspace redesign rules used var(--text) with a dark-theme fallback,
   so the hero/action-card headings became almost white on white in light theme. */
html[data-theme="light"] .team-workspace-fullscreen-modal {
  --text: #0f172a;
  --workspace-text-strong: #0f172a;
  --workspace-text-body: #334155;
  --workspace-text-muted: #64748b;
  --workspace-card-border: rgba(15, 23, 42, 0.10);
  color: var(--workspace-text-strong);
}

html[data-theme="light"] .team-workspace-fullscreen-modal .modal-card,
html[data-theme="light"] .team-workspace-fullscreen-modal #modalBody,
html[data-theme="light"] .team-workspace-fullscreen-modal .workspace-redesign-shell {
  color: var(--workspace-text-strong);
}

html[data-theme="light"] .team-workspace-fullscreen-modal .workspace-redesign-hero {
  border-color: var(--workspace-card-border);
  background:
    radial-gradient(circle at 6% 0%, rgba(255, 106, 26, 0.10), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.90));
}

html[data-theme="light"] .team-workspace-fullscreen-modal .workspace-redesign-action-card {
  border-color: rgba(255, 106, 26, 0.26);
  background:
    radial-gradient(circle at 92% 0%, rgba(255, 106, 26, 0.12), transparent 46%),
    rgba(255, 255, 255, 0.90);
}

html[data-theme="light"] .team-workspace-fullscreen-modal .workspace-redesign-main h3,
html[data-theme="light"] .team-workspace-fullscreen-modal .workspace-redesign-action-card strong,
html[data-theme="light"] .team-workspace-fullscreen-modal .workspace-status-main h3,
html[data-theme="light"] .team-workspace-fullscreen-modal .workspace-readiness-card strong,
html[data-theme="light"] .team-workspace-fullscreen-modal .workspace-snapshot-grid article strong,
html[data-theme="light"] .team-workspace-fullscreen-modal .workspace-context-card h3,
html[data-theme="light"] .team-workspace-fullscreen-modal .workspace-next-title h3,
html[data-theme="light"] .team-workspace-fullscreen-modal .workspace-next-card strong,
html[data-theme="light"] .team-workspace-fullscreen-modal .workspace-activity-list strong,
html[data-theme="light"] .team-workspace-fullscreen-modal .workspace-actions-hero h3,
html[data-theme="light"] .team-workspace-fullscreen-modal .workspace-actions-stats strong {
  color: var(--workspace-text-strong) !important;
}

html[data-theme="light"] .team-workspace-fullscreen-modal .workspace-redesign-main p,
html[data-theme="light"] .team-workspace-fullscreen-modal .workspace-redesign-action-card p,
html[data-theme="light"] .team-workspace-fullscreen-modal .workspace-status-main p,
html[data-theme="light"] .team-workspace-fullscreen-modal .workspace-readiness-card p,
html[data-theme="light"] .team-workspace-fullscreen-modal .workspace-snapshot-grid article p,
html[data-theme="light"] .team-workspace-fullscreen-modal .workspace-next-card p,
html[data-theme="light"] .team-workspace-fullscreen-modal .workspace-activity-list p,
html[data-theme="light"] .team-workspace-fullscreen-modal .workspace-panel p,
html[data-theme="light"] .team-workspace-fullscreen-modal .workspace-readiness-mini span {
  color: var(--workspace-text-body) !important;
}

html[data-theme="light"] .team-workspace-fullscreen-modal .workspace-redesign-quickfacts span,
html[data-theme="light"] .team-workspace-fullscreen-modal .workspace-header-pills span,
html[data-theme="light"] .team-workspace-fullscreen-modal .workspace-readiness-card span,
html[data-theme="light"] .team-workspace-fullscreen-modal .workspace-snapshot-grid article span,
html[data-theme="light"] .team-workspace-fullscreen-modal .workspace-link-open {
  color: var(--workspace-text-muted) !important;
}

html[data-theme="light"] .team-workspace-fullscreen-modal .workspace-redesign-quickfacts span,
html[data-theme="light"] .team-workspace-fullscreen-modal .workspace-context-card .simple-grid.two > div,
html[data-theme="light"] .team-workspace-fullscreen-modal .workspace-activity-list > div,
html[data-theme="light"] .team-workspace-fullscreen-modal .workspace-snapshot-grid article,
html[data-theme="light"] .team-workspace-fullscreen-modal .workspace-next-card,
html[data-theme="light"] .team-workspace-fullscreen-modal .workspace-status-main,
html[data-theme="light"] .team-workspace-fullscreen-modal .workspace-readiness-card,
html[data-theme="light"] .team-workspace-fullscreen-modal .workspace-context-card,
html[data-theme="light"] .team-workspace-fullscreen-modal .workspace-next-panel {
  border-color: var(--workspace-card-border);
}

/* W2G88.4 — Light theme Team Workspace footer/action bar polish
   The fullscreen workspace footer was forced to a dark navy bar globally. In light mode,
   that made secondary actions such as Leave team / Back feel visually disconnected and
   some ghost text became low-contrast. Keep the footer consistent with the light workspace. */
html[data-theme="light"] .team-workspace-fullscreen-modal .modal-footer {
  background: rgba(255, 255, 255, 0.94) !important;
  border-top: 1px solid rgba(15, 23, 42, 0.10) !important;
  box-shadow: 0 -18px 44px rgba(15, 23, 42, 0.12) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

html[data-theme="light"] .team-workspace-fullscreen-modal .modal-footer .button.secondary,
html[data-theme="light"] .team-workspace-fullscreen-modal .modal-footer button.secondary {
  background: rgba(255, 247, 237, 0.96) !important;
  border-color: rgba(249, 115, 22, 0.26) !important;
  color: #c2410c !important;
  box-shadow: none !important;
}

html[data-theme="light"] .team-workspace-fullscreen-modal .modal-footer .button.ghost,
html[data-theme="light"] .team-workspace-fullscreen-modal .modal-footer button.ghost {
  background: rgba(255, 255, 255, 0.88) !important;
  border-color: rgba(15, 23, 42, 0.20) !important;
  color: #334155 !important;
  box-shadow: none !important;
}

html[data-theme="light"] .team-workspace-fullscreen-modal .modal-footer .button.danger,
html[data-theme="light"] .team-workspace-fullscreen-modal .modal-footer .button.soft-danger,
html[data-theme="light"] .team-workspace-fullscreen-modal .modal-footer button.danger,
html[data-theme="light"] .team-workspace-fullscreen-modal .modal-footer button.soft-danger {
  background: rgba(254, 242, 242, 0.92) !important;
  border-color: rgba(220, 38, 38, 0.28) !important;
  color: #b91c1c !important;
  box-shadow: none !important;
}

html[data-theme="light"] .team-workspace-fullscreen-modal .modal-footer .button.ghost:hover,
html[data-theme="light"] .team-workspace-fullscreen-modal .modal-footer button.ghost:hover {
  background: rgba(248, 250, 252, 0.98) !important;
  border-color: rgba(15, 23, 42, 0.32) !important;
  color: #0f172a !important;
}

html[data-theme="light"] .team-workspace-fullscreen-modal .modal-footer .button.danger:hover,
html[data-theme="light"] .team-workspace-fullscreen-modal .modal-footer .button.soft-danger:hover,
html[data-theme="light"] .team-workspace-fullscreen-modal .modal-footer button.danger:hover,
html[data-theme="light"] .team-workspace-fullscreen-modal .modal-footer button.soft-danger:hover {
  background: rgba(254, 226, 226, 0.98) !important;
  border-color: rgba(185, 28, 28, 0.40) !important;
  color: #991b1b !important;
}

html[data-theme="light"] .team-workspace-fullscreen-modal .modal-footer .button:disabled,
html[data-theme="light"] .team-workspace-fullscreen-modal .modal-footer button:disabled {
  background: rgba(248, 250, 252, 0.72) !important;
  border-color: rgba(148, 163, 184, 0.28) !important;
  color: #94a3b8 !important;
  opacity: 0.72 !important;
}

/* W2G88.5 — Personal onboarding desktop field alignment hotfix
   The global .form-card label + label rule adds margin-top to every label after the
   first one. Inside the two-column onboarding grid that unintentionally pushes the
   right column down, so Current status and Short bio no longer line up with the
   left-side field in the same row. Reset only the direct grid children here. */
body.onboarding-page #onboardingForm .two-col > label,
body.onboarding-page #onboardingForm .two-col > .university-field,
body.onboarding-page #onboardingForm .two-col > .university-field-inline,
body.onboarding-page #onboardingForm .two-col > .university-picker-card {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  align-self: start !important;
}

body.onboarding-page #onboardingForm .two-col {
  align-items: start !important;
}

body.onboarding-page #onboardingForm .two-col > label > span:first-child,
body.onboarding-page #onboardingForm .two-col > .university-field > span:first-child,
body.onboarding-page #onboardingForm .two-col > .university-field-inline > span:first-child {
  display: block !important;
  min-height: 18px !important;
  line-height: 1.25 !important;
  margin: 0 0 6px !important;
}

body.onboarding-page #onboardingForm .two-col > label > input,
body.onboarding-page #onboardingForm .two-col > label > select {
  min-height: 46px !important;
}

body.onboarding-page #onboardingForm .two-col textarea {
  display: block !important;
  min-height: 110px !important;
}

@media (max-width: 760px) {
  body.onboarding-page #onboardingForm .two-col > label,
  body.onboarding-page #onboardingForm .two-col > .university-field,
  body.onboarding-page #onboardingForm .two-col > .university-field-inline,
  body.onboarding-page #onboardingForm .two-col > .university-picker-card {
    margin-top: 0 !important;
  }
}

/* W2G88.8 — Dark theme competition Open status parity
   The light theme Open now badge reads as an active green status. In dark theme,
   the older glass treatment could look muted/disabled on poster thumbnails, so
   use a stronger emerald pill while keeping the same size, placement, and glow. */
html[data-theme="dark"] .competition-status-badge.status-open {
  background: linear-gradient(135deg, rgba(22, 163, 74, 0.98) 0%, rgba(34, 197, 94, 0.98) 52%, rgba(74, 222, 128, 0.98) 100%) !important;
  border-color: rgba(187, 247, 208, 0.86) !important;
  color: #f0fdf4 !important;
  box-shadow:
    0 16px 38px rgba(22, 163, 74, 0.42),
    0 0 0 1px rgba(134, 239, 172, 0.20),
    0 0 24px rgba(34, 197, 94, 0.26) !important;
  text-shadow: 0 1px 1px rgba(20, 83, 45, 0.28);
}

html[data-theme="dark"] .competition-status-badge.status-open::before {
  background: #dcfce7 !important;
  box-shadow:
    0 0 0 3px rgba(240, 253, 244, 0.28),
    0 0 16px rgba(187, 247, 208, 0.88) !important;
}

html[data-theme="dark"] .competition-card .competition-poster-shell .competition-status-badge.status-open {
  opacity: 1 !important;
  filter: none !important;
}

/* W2G88.9 — Team slot reservation clarity */
.team-post-modal .modal-card {
  width: min(820px, calc(100vw - 36px));
}

.team-sectioned-form {
  display: grid;
  gap: 0;
}

.team-sectioned-form .team-preset-note {
  margin-bottom: 0.35rem;
}

.team-form-section {
  display: grid;
  grid-template-columns: minmax(150px, 0.34fr) minmax(0, 1fr);
  gap: 1.1rem;
  padding: 1.05rem 0;
  border-top: 1px solid var(--border-soft, rgba(148, 163, 184, 0.18));
}

.team-sectioned-form .team-form-section:first-of-type {
  border-top: 0;
  padding-top: 0.75rem;
}

.team-form-section-meta {
  min-width: 0;
}

.team-form-section-title {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.25;
  letter-spacing: 0;
  color: var(--ink, var(--text));
}

.team-form-section-help {
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.team-form-section-fields {
  display: grid;
  gap: 0.85rem;
  min-width: 0;
}

.team-form-section-recruiting {
  border-top-color: rgba(249, 115, 22, 0.32);
}

.team-form-section-recruiting .team-form-section-title {
  color: var(--orange-dark, #ea580c);
}

.team-form-section-secondary {
  opacity: 0.9;
}

.team-post-modal .multi-select-field[data-multi-name="existingRoles"] .multi-select-selected-chip {
  border-color: var(--border, rgba(148, 163, 184, 0.34)) !important;
  background: var(--card-soft, rgba(148, 163, 184, 0.08)) !important;
  color: var(--body, var(--text)) !important;
}

.team-post-modal .multi-select-field[data-multi-name="existingRoles"] .multi-select-chip-remove {
  background: rgba(148, 163, 184, 0.16);
}

.team-post-modal .multi-select-field[data-multi-name="existingRoles"] .multi-select-option.is-selected {
  background: rgba(148, 163, 184, 0.12) !important;
  border-color: rgba(148, 163, 184, 0.42) !important;
  color: var(--body, var(--text)) !important;
  box-shadow: none !important;
}

.team-post-modal .multi-select-field[data-multi-name="existingRoles"] .multi-select-option.is-selected .multi-select-check {
  background: var(--muted, #64748b) !important;
  border-color: var(--muted, #64748b) !important;
}

.team-slot-preview {
  border-color: rgba(249, 115, 22, 0.28);
  background: rgba(249, 115, 22, 0.08);
}
.team-slot-preview p { margin: 0.35rem 0 0; }
.team-slot-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
  margin-top: 0.75rem;
}
.team-slot-preview-grid span {
  border: 1px solid var(--border);
  border-radius: 0.85rem;
  padding: 0.7rem 0.75rem;
  background: var(--card-soft, rgba(148, 163, 184, 0.08));
}
.team-slot-preview-grid b {
  display: block;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--text);
}
.team-slot-preview-grid small {
  display: block;
  margin-top: 0.2rem;
  color: var(--muted);
  font-weight: 800;
}
.form-warning {
  color: #ef4444;
  font-weight: 700;
  margin-top: 0.55rem !important;
}
.team-member-card-reserved {
  border-style: dashed;
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.09), rgba(148, 163, 184, 0.05));
}
.reserved-avatar {
  display: grid;
  place-items: center;
  width: 2.55rem;
  height: 2.55rem;
  border-radius: 0.9rem;
  background: rgba(249, 115, 22, 0.14);
  border: 1px solid rgba(249, 115, 22, 0.35);
  color: var(--orange-600, #f97316);
  font-weight: 700;
  font-size: 0.8rem;
}
.reserved-member-line {
  border-style: dashed;
  background: rgba(249, 115, 22, 0.08);
}
@media (max-width: 640px) {
  .team-post-modal .modal-card {
    width: min(100%, calc(100vw - 24px));
  }

  .team-form-section {
    grid-template-columns: 1fr;
    gap: 0.75rem;
    padding: 1rem 0;
  }

  .team-form-section-help {
    max-width: 36rem;
  }

  .team-form-section-fields .two-col,
  .team-form-section-fields .team-province-mode-grid {
    grid-template-columns: 1fr;
  }

  .team-slot-preview-grid { grid-template-columns: 1fr; }
}
.team-form-section-label {
  margin: 4px 0 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Admin wide competition editor workspace — single-competition create/edit form,
   restyled from a narrow tall modal into a multi-column desktop workspace.
   Width/height overrides for .competition-editor-modal live further below,
   next to the other #modalOverlay modifier-class overrides they must beat. */
.comp-editor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 26px;
  align-items: start;
  min-width: 0;
}

.comp-editor-section {
  min-width: 0;
  border: 1px solid var(--border-soft, rgba(148, 163, 184, 0.18));
  border-radius: 14px;
  padding: 16px 18px 18px;
  background: var(--card-soft, rgba(148, 163, 184, 0.05));
}

.comp-editor-section-span-2 {
  grid-column: 1 / -1;
}

.comp-editor-section-title {
  margin: 0 0 12px;
  font-size: 0.76rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--muted);
}

.comp-editor-section-fields {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.comp-editor-section-fields .two-col {
  margin: 0;
}

@media (max-width: 900px) {
  .comp-editor-grid {
    grid-template-columns: 1fr;
  }
  .comp-editor-section-span-2 {
    grid-column: auto;
  }
}

/* Admin Bulk Paste Competition Intake — editable review table for a pasted TSV
   block. Wide-modal sizing lives with the other #modalOverlay modifier-class
   overrides further below. */
.bulk-paste-workspace {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.bulk-paste-notice p {
  margin: 6px 0 0;
}

.bulk-paste-help summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 0.85rem;
}

.bulk-paste-help code {
  word-break: break-word;
}

.bulk-paste-input-label {
  display: grid;
  gap: 6px;
}

.bulk-paste-input-label textarea {
  width: 100%;
  min-height: 120px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82rem;
  white-space: pre;
  overflow-x: auto;
}

.bulk-paste-parse-row,
.bulk-paste-summary-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* The table is the one element allowed to scroll sideways; the page/modal body
   itself must never overflow horizontally. */
.bulk-paste-table-card {
  overflow-x: auto;
  max-width: 100%;
}

.bulk-paste-table {
  width: 100%;
  min-width: 1080px;
  border-collapse: collapse;
  font-size: 0.84rem;
}

/* Keep the identifying columns readable instead of letting the browser
   collapse them to one character per line. */
.bulk-paste-table th:nth-child(1),
.bulk-paste-table td:nth-child(1) { width: 56px; }
.bulk-paste-table th:nth-child(2),
.bulk-paste-table td:nth-child(2) { min-width: 210px; }
.bulk-paste-table th:nth-child(3),
.bulk-paste-table td:nth-child(3) { min-width: 120px; }
.bulk-paste-table th:nth-child(4),
.bulk-paste-table td:nth-child(4) { min-width: 105px; }
.bulk-paste-table th:nth-child(5),
.bulk-paste-table td:nth-child(5) { min-width: 90px; }
.bulk-paste-table th:nth-child(6),
.bulk-paste-table td:nth-child(6),
.bulk-paste-table th:nth-child(7),
.bulk-paste-table td:nth-child(7) { min-width: 130px; }
.bulk-paste-table th:nth-child(8),
.bulk-paste-table td:nth-child(8) { min-width: 80px; }
.bulk-paste-table th:nth-child(9),
.bulk-paste-table td:nth-child(9) { min-width: 240px; }
.bulk-paste-table th:nth-child(10),
.bulk-paste-table td:nth-child(10) { min-width: 150px; }

.bulk-paste-table th,
.bulk-paste-table td {
  vertical-align: top;
  padding: 9px 10px;
  text-align: left;
}

.bulk-paste-table th {
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.bulk-cell-title .bulk-cell-value {
  font-weight: 700;
}

.bulk-cell-value {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.bulk-cell-empty {
  color: var(--muted);
}

.bulk-cell-invalid {
  background: rgba(239, 68, 68, 0.07);
  box-shadow: inset 2px 0 0 rgba(239, 68, 68, 0.65);
}

.bulk-cell-error {
  display: block;
  margin-top: 4px;
  color: var(--red-500, #dc2626);
  font-size: 0.72rem;
  line-height: 1.35;
}

.bulk-ai-badge {
  display: inline-block;
  margin-top: 4px;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid rgba(99, 102, 241, 0.45);
  background: rgba(99, 102, 241, 0.12);
  color: var(--indigo-500, #6366f1);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.bulk-state-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--border-soft, rgba(148, 163, 184, 0.35));
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.bulk-state-ready { border-color: rgba(37, 99, 235, 0.45); background: rgba(37, 99, 235, 0.12); }
.bulk-state-invalid { border-color: rgba(239, 68, 68, 0.5); background: rgba(239, 68, 68, 0.12); }
.bulk-state-creating { border-color: rgba(234, 179, 8, 0.5); background: rgba(234, 179, 8, 0.14); }
.bulk-state-created { border-color: rgba(22, 163, 74, 0.5); background: rgba(22, 163, 74, 0.14); }
.bulk-state-duplicate { border-color: rgba(249, 115, 22, 0.5); background: rgba(249, 115, 22, 0.14); }
.bulk-state-failed { border-color: rgba(239, 68, 68, 0.5); background: rgba(239, 68, 68, 0.12); }
.bulk-state-rateLimited { border-color: rgba(249, 115, 22, 0.5); background: rgba(249, 115, 22, 0.14); }

.bulk-status-message {
  display: block;
  margin-top: 5px;
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.35;
}

.bulk-status-cell .competition-duplicate-conflict {
  margin-top: 8px;
  padding: 8px 10px;
  font-size: 0.75rem;
}

/* Row-level "why this row is invalid" summary — covers every blocking issue,
   including fields with no dedicated table column (province, URLs, organizer,
   description, prize, team size, source name). */
.bulk-issue-summary {
  margin-top: 6px;
  padding: 7px 9px;
  border-radius: 8px;
  border: 1px solid rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.06);
  max-width: 280px;
}

.bulk-issue-summary-title {
  margin: 0 0 4px;
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--red-500, #dc2626);
}

.bulk-issue-summary-list {
  margin: 0;
  padding-left: 16px;
  list-style: disc;
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--red-500, #dc2626);
}

.bulk-issue-summary-list li {
  overflow-wrap: anywhere;
}

.bulk-row-created {
  opacity: 0.78;
}

.bulk-actions-cell .button-row {
  flex-wrap: nowrap;
}

.bulk-actions-cell .button.small,
.bulk-paste-summary-row .button.small {
  padding: 4px 10px;
  font-size: 0.75rem;
}


/* W2G89.2 reserved teammate slot invite polish */
.member-invite-split-actions {
  display: grid;
  gap: 0.55rem;
  width: 100%;
}
.discovery-primary-actions .member-invite-split-actions,
.recommended-member-actions .member-invite-split-actions {
  grid-template-columns: minmax(0, 1fr);
}
.member-invite-split-actions .button {
  width: 100%;
  justify-content: center;
}
.reserved-slot-invite {
  border-color: rgba(249, 115, 22, 0.45);
  background: rgba(249, 115, 22, 0.10);
  color: var(--orange-500, #fb923c);
}
.reserved-slot-invite:hover {
  background: rgba(249, 115, 22, 0.18);
  border-color: rgba(249, 115, 22, 0.7);
}
.team-member-card-reserved-pending {
  border-style: solid;
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.13), rgba(14, 165, 233, 0.06));
}
.team-member-card-reserved-pending .member-role-pill.pending {
  background: rgba(249, 115, 22, 0.16);
  border-color: rgba(249, 115, 22, 0.45);
  color: var(--orange-500, #fb923c);
}
@media (min-width: 980px) {
  .discovery-primary-actions .member-invite-split-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* W2G89.4 — Find Members pending invitation priority section */
.member-priority-section,
.member-recommended-divider {
  grid-column: 1 / -1;
}
.member-priority-section {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(249, 115, 22, 0.22);
  border-radius: 24px;
  background:
    radial-gradient(circle at top left, rgba(249, 115, 22, 0.12), transparent 32%),
    rgba(255, 247, 237, 0.62);
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.06);
}
html[data-theme="dark"] .member-priority-section {
  background:
    radial-gradient(circle at top left, rgba(249, 115, 22, 0.16), transparent 32%),
    rgba(15, 23, 42, 0.44);
  border-color: rgba(249, 115, 22, 0.26);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18);
}
.member-priority-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.member-priority-heading .section-kicker {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 6px 10px;
  background: rgba(249, 115, 22, 0.12);
  border: 1px solid rgba(249, 115, 22, 0.28);
  color: var(--orange-600, #ea580c);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}
.member-priority-heading h3,
.member-recommended-divider h3 {
  margin: 0;
  color: var(--polish-text-strong, var(--ink));
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.member-priority-heading p,
.member-recommended-divider p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.member-priority-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.member-priority-card {
  border-color: rgba(249, 115, 22, 0.36);
}
.member-pending-context {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 2px 0 10px;
  padding: 9px 10px;
  border-radius: 14px;
  background: rgba(249, 115, 22, 0.08);
  border: 1px solid rgba(249, 115, 22, 0.18);
}
.member-pending-context small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.3;
  text-align: right;
}
.member-recommended-divider {
  margin-top: 2px;
  padding: 8px 2px 0;
  border-top: 1px solid rgba(148, 163, 184, 0.18);
}
@media (max-width: 1100px) {
  .member-priority-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .member-priority-section {
    padding: 12px;
    border-radius: 20px;
  }
  .member-priority-heading {
    display: grid;
    gap: 8px;
  }
  .member-priority-grid {
    grid-template-columns: 1fr;
  }
  .member-pending-context {
    align-items: flex-start;
    display: grid;
  }
  .member-pending-context small {
    text-align: left;
  }
}

/* W2G89.7 — Reserved slot locked state action sizing hotfix
   Keeps the normal invite CTA compact after the reserved slot has already been used.
   The reserved-slot explanation becomes a full-width helper strip below the CTA instead
   of forcing the orange button to stretch to the same height. */
.member-invite-split-actions.has-reserved-status {
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: start;
  gap: 0.55rem;
}
.discovery-primary-actions .member-invite-split-actions.has-reserved-status,
.recommended-member-actions .member-invite-split-actions.has-reserved-status {
  grid-template-columns: minmax(0, 1fr) !important;
}
.member-invite-split-actions.has-reserved-status > .button {
  width: 100%;
  min-height: 46px;
  height: auto;
  padding: 0.78rem 1rem;
  align-self: start;
}
.reserved-slot-status-block {
  display: grid;
  gap: 0.28rem;
  width: 100%;
  min-height: 0;
  padding: 0.72rem 0.85rem;
  border: 1px solid rgba(234, 179, 8, 0.28);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.11), rgba(249, 115, 22, 0.07));
  color: var(--polish-text-strong, var(--ink));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.reserved-slot-status-block .status-pill {
  justify-self: start;
  width: fit-content;
  max-width: 100%;
  padding: 0.24rem 0.58rem;
  font-size: 0.72rem;
  line-height: 1.15;
  white-space: normal;
}
.reserved-slot-status-block strong {
  display: block;
  font-size: 0.82rem;
  line-height: 1.3;
  font-weight: 700;
}
.reserved-slot-status-block small {
  display: block;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.35;
  font-weight: 600;
}
html[data-theme="dark"] .reserved-slot-status-block {
  border-color: rgba(234, 179, 8, 0.34);
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.14), rgba(249, 115, 22, 0.08));
}
@media (min-width: 980px) {
  .discovery-primary-actions .member-invite-split-actions.has-reserved-status {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}


/* W2G89.8 — Single invite CTA should fill the row after reserved slots are already consumed. */
.member-invite-split-actions.is-single-action {
  grid-template-columns: minmax(0, 1fr) !important;
}
.discovery-primary-actions .member-invite-split-actions.is-single-action,
.recommended-member-actions .member-invite-split-actions.is-single-action {
  grid-template-columns: minmax(0, 1fr) !important;
}
.member-invite-split-actions.is-single-action > .button {
  width: 100%;
  min-height: 46px;
}

/* W2G89.9 — Mobile Find Members compact card polish
   Goal: make member cards faster to scan on phones by reducing vertical weight,
   tightening detail blocks, surfacing actions earlier, and keeping the floating
   Feedback CTA from crowding the primary invite action area. */
@media (max-width: 760px) {
  .member-polished-card {
    padding: 14px;
    gap: 10px;
    border-radius: 18px;
  }

  .member-polished-card .discovery-shell-top-member {
    gap: 10px;
    align-items: flex-start;
  }

  .member-polished-card .member-avatar {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
    border-radius: 15px;
    font-size: 13px;
  }

  .member-polished-card .member-card-identity {
    align-items: flex-start;
  }

  .member-polished-card .identity-copy {
    display: grid;
    gap: 6px;
  }

  .member-polished-card .identity-copy .tag {
    margin-bottom: 0;
  }

  .member-polished-card .identity-copy .item-title {
    margin-top: 2px;
    font-size: 15px;
    line-height: 1.24;
  }

  .member-polished-card .discovery-meta-row-member {
    gap: 6px;
  }

  .member-polished-card .discovery-meta-row-member .mini-chip {
    padding: 6px 9px;
    font-size: 11px;
  }

  .member-polished-card .score-meter {
    margin: 8px 0 8px;
    padding: 9px 10px;
    border-radius: 14px;
  }

  .member-polished-card .member-decision-snapshot {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin: 10px 0 6px;
  }

  .member-polished-card .member-decision-snapshot > div {
    padding: 8px 9px;
    border-radius: 12px;
  }

  .member-polished-card .member-decision-snapshot > div:last-child {
    grid-column: 1 / -1;
  }

  .member-polished-card .member-decision-snapshot span {
    margin-bottom: 3px;
    font-size: 10px;
  }

  .member-polished-card .member-decision-snapshot strong {
    font-size: 12px;
  }

  /* Surface actions earlier for faster recruiting decisions on mobile. */
  .member-polished-card > .discovery-actions-stack {
    order: 5;
    margin-top: 0;
    gap: 8px;
  }

  .member-polished-card > .collapsible-copy,
  .member-polished-card > .discovery-tag-cluster {
    order: 6;
  }

  .member-polished-card .discovery-summary-panel {
    min-height: 0;
    padding: 10px 11px;
    border-radius: 14px;
  }

  .member-polished-card .collapsible-copy .discovery-summary-text {
    -webkit-line-clamp: 2;
    font-size: 13px;
    line-height: 1.5;
  }

  .member-polished-card .discovery-tag-cluster {
    min-height: 0;
    gap: 6px;
    align-content: flex-start;
  }

  .member-polished-card .discovery-tag-cluster .tag:nth-child(n+7) {
    display: none;
  }

  .member-polished-card .discovery-primary-actions .button,
  .member-polished-card .discovery-primary-actions .member-invite-split-actions > .button {
    min-height: 44px;
  }

  .member-polished-card .discovery-secondary-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .member-polished-card .discovery-secondary-actions .button {
    min-height: 38px;
    padding-inline: 10px;
    font-size: 12px;
  }

  .member-polished-card .reserved-slot-status-block {
    padding: 0.66rem 0.78rem;
    border-radius: 14px;
  }
}

@media (max-width: 430px) {
  .member-polished-card {
    padding: 13px;
  }

  .member-polished-card .identity-copy .item-title {
    font-size: 14px;
  }

  .member-polished-card .member-decision-snapshot {
    grid-template-columns: 1fr;
  }

  .member-polished-card .member-decision-snapshot > div:last-child {
    grid-column: auto;
  }

  .feedback-launcher {
    right: 12px;
    bottom: 12px;
    min-height: 40px;
    padding: 9px 12px;
    gap: 6px;
    font-size: 12px;
  }

  .feedback-launcher-icon {
    width: 18px;
    height: 18px;
    font-size: 11px;
  }
}

/* ========================================================================
   W2G89.10 mobile dashboard activity sheet
   Activity cards on phones should open a focused sheet instead of jumping
   down to a desktop-style detail panel below the dashboard.
   ======================================================================== */
@media (max-width: 760px) {
  body[data-page="app"] #modalOverlay[data-modal-kind="dashboardActivity"] {
    align-items: end !important;
    place-items: end center !important;
    padding: 0 !important;
    background: rgba(2, 6, 23, 0.72) !important;
    backdrop-filter: blur(14px) saturate(130%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(130%) !important;
  }

  body[data-page="app"] #modalOverlay[data-modal-kind="dashboardActivity"] .modal-card {
    width: 100% !important;
    max-width: none !important;
    max-height: min(86dvh, 820px) !important;
    margin: 0 !important;
    border-radius: 26px 26px 0 0 !important;
    border: 1px solid rgba(148, 163, 184, 0.26) !important;
    border-bottom: 0 !important;
    padding: 18px !important;
    overflow: auto !important;
    box-shadow: 0 -24px 70px rgba(0, 0, 0, 0.42) !important;
  }

  body[data-page="app"] #modalOverlay[data-modal-kind="dashboardActivity"] .modal-header {
    padding-bottom: 12px !important;
    gap: 12px !important;
  }

  body[data-page="app"] #modalOverlay[data-modal-kind="dashboardActivity"] .modal-header h2 {
    font-size: clamp(1.35rem, 6vw, 1.75rem) !important;
    line-height: 1.05 !important;
  }

  body[data-page="app"] #modalOverlay[data-modal-kind="dashboardActivity"] .modal-body {
    padding: 14px 0 !important;
  }

  body[data-page="app"] #modalOverlay[data-modal-kind="dashboardActivity"] .modal-footer {
    position: sticky !important;
    bottom: -18px !important;
    margin-inline: -18px !important;
    padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0), rgba(15, 23, 42, 0.96) 28%, rgba(15, 23, 42, 0.98) 100%) !important;
    border-top: 1px solid rgba(148, 163, 184, 0.18) !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  body[data-page="app"] #modalOverlay[data-modal-kind="dashboardActivity"] .modal-footer .button {
    width: 100% !important;
    min-height: 46px !important;
    justify-content: center !important;
  }

  .mobile-dashboard-activity-sheet {
    display: grid !important;
    gap: 14px !important;
  }

  .mobile-dashboard-activity-summary {
    display: grid !important;
    grid-template-columns: 44px 1fr !important;
    gap: 12px !important;
    align-items: center !important;
    padding: 14px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(251, 146, 60, 0.24) !important;
    background:
      radial-gradient(circle at 12% 0%, rgba(249, 115, 22, 0.18), transparent 36%),
      rgba(15, 23, 42, 0.58) !important;
  }

  .mobile-dashboard-activity-summary strong {
    display: block !important;
    color: var(--text) !important;
    font-size: 1rem !important;
    line-height: 1.2 !important;
  }

  .mobile-dashboard-activity-summary p {
    margin: 4px 0 0 !important;
    color: var(--muted) !important;
    font-size: 0.85rem !important;
    line-height: 1.45 !important;
  }

  .mobile-dashboard-activity-content {
    display: grid !important;
    gap: 12px !important;
  }

  .mobile-dashboard-activity-content .dashboard-request-content {
    display: grid !important;
    gap: 12px !important;
  }

  .mobile-dashboard-activity-content .request-list,
  .mobile-dashboard-activity-content .dashboard-action-list {
    max-height: none !important;
    overflow: visible !important;
  }

  .mobile-dashboard-activity-content .request-card,
  .mobile-dashboard-activity-content .saved-item-card,
  .mobile-dashboard-activity-content .saved-competition-card,
  .mobile-dashboard-activity-content .mini-card {
    border-radius: 18px !important;
  }
}

@media (max-width: 760px) {
  html[data-theme="light"] body[data-page="app"] #modalOverlay[data-modal-kind="dashboardActivity"] .modal-card {
    background: rgba(255, 255, 255, 0.98) !important;
    border-color: rgba(226, 232, 240, 0.95) !important;
    box-shadow: 0 -24px 70px rgba(15, 23, 42, 0.18) !important;
  }

  html[data-theme="light"] body[data-page="app"] #modalOverlay[data-modal-kind="dashboardActivity"] .modal-footer {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.96) 28%, #fff 100%) !important;
    border-top-color: rgba(226, 232, 240, 0.9) !important;
  }

  html[data-theme="light"] .mobile-dashboard-activity-summary {
    background:
      radial-gradient(circle at 12% 0%, rgba(249, 115, 22, 0.13), transparent 36%),
      rgba(248, 250, 252, 0.92) !important;
    border-color: rgba(251, 146, 60, 0.24) !important;
  }
}


/* W2G90.1 — Private Beta notice + tester agreement */
.private-beta-notice-banner {
  position: sticky;
  top: 0;
  z-index: 80;
  width: 100%;
  background: linear-gradient(135deg, rgba(255, 245, 232, 0.98), rgba(255, 250, 243, 0.96));
  border-bottom: 1px solid rgba(234, 88, 12, 0.22);
  color: #7c2d12;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.private-beta-notice-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 8px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 42px;
}

.private-beta-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(234, 88, 12, 0.12);
  border: 1px solid rgba(234, 88, 12, 0.22);
  color: #9a3412;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.private-beta-notice-copy {
  font-size: 12.5px;
  line-height: 1.45;
  font-weight: 600;
  text-align: center;
}

.private-beta-notice-action {
  flex: 0 0 auto;
  border: 0;
  border-radius: 999px;
  padding: 7px 12px;
  background: #ea580c;
  color: #fff7ed;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(234, 88, 12, 0.18);
}

.private-beta-notice-action:hover {
  transform: translateY(-1px);
}

.private-beta-agreement-modal .modal-card {
  max-width: 720px;
}

.private-beta-agreement-required #modalClose {
  display: none;
}

.private-beta-agreement-copy {
  display: grid;
  gap: 14px;
}

.private-beta-rule-list {
  display: grid;
  gap: 10px;
}

.private-beta-rule-list > div {
  display: grid;
  gap: 4px;
  padding: 12px 13px;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(248, 250, 252, 0.82);
}

.private-beta-rule-list strong {
  font-size: 13px;
  color: #0f172a;
}

.private-beta-rule-list span {
  font-size: 12.5px;
  color: #475569;
  line-height: 1.45;
}

.private-beta-note {
  margin: 0;
  padding: 12px 13px;
  border-radius: 16px;
  background: rgba(255, 247, 237, 0.9);
  border: 1px solid rgba(251, 146, 60, 0.24);
  color: #9a3412;
  font-size: 12.5px;
  line-height: 1.55;
  font-weight: 600;
}

.private-beta-agreement-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 13px;
  border-radius: 16px;
  background: rgba(15, 23, 42, 0.04);
  border: 1px solid rgba(15, 23, 42, 0.1);
  color: #0f172a;
  font-weight: 800;
  cursor: pointer;
}

.private-beta-agreement-check input {
  margin-top: 3px;
  width: 17px;
  height: 17px;
  accent-color: #ea580c;
}

#privateBetaAgreementAccept:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

html[data-theme="dark"] .private-beta-notice-banner,
body.dark .private-beta-notice-banner {
  background: linear-gradient(135deg, rgba(67, 20, 7, 0.96), rgba(15, 23, 42, 0.94));
  border-bottom-color: rgba(251, 146, 60, 0.28);
  color: #fed7aa;
}

html[data-theme="dark"] .private-beta-pill,
body.dark .private-beta-pill {
  background: rgba(251, 146, 60, 0.14);
  border-color: rgba(251, 146, 60, 0.24);
  color: #fdba74;
}

html[data-theme="dark"] .private-beta-notice-action,
body.dark .private-beta-notice-action {
  background: #fb923c;
  color: #431407;
}

html[data-theme="dark"] .private-beta-rule-list > div,
body.dark .private-beta-rule-list > div {
  background: rgba(15, 23, 42, 0.66);
  border-color: rgba(148, 163, 184, 0.18);
}

html[data-theme="dark"] .private-beta-rule-list strong,
body.dark .private-beta-rule-list strong,
html[data-theme="dark"] .private-beta-agreement-check,
body.dark .private-beta-agreement-check {
  color: #f8fafc;
}

html[data-theme="dark"] .private-beta-rule-list span,
body.dark .private-beta-rule-list span {
  color: #cbd5e1;
}

html[data-theme="dark"] .private-beta-note,
body.dark .private-beta-note {
  background: rgba(67, 20, 7, 0.46);
  border-color: rgba(251, 146, 60, 0.24);
  color: #fed7aa;
}

html[data-theme="dark"] .private-beta-agreement-check,
body.dark .private-beta-agreement-check {
  background: rgba(248, 250, 252, 0.06);
  border-color: rgba(248, 250, 252, 0.12);
}

@media (max-width: 760px) {
  .private-beta-notice-inner {
    align-items: stretch;
    justify-content: flex-start;
    padding: 9px 12px;
    gap: 8px;
  }

  .private-beta-notice-copy {
    text-align: left;
    font-size: 11.5px;
    flex: 1 1 auto;
  }

  .private-beta-pill {
    align-self: flex-start;
    padding: 5px 8px;
    font-size: 10px;
  }

  .private-beta-notice-action {
    align-self: center;
    padding: 7px 10px;
    font-size: 11px;
    white-space: nowrap;
  }

  .private-beta-agreement-modal .modal-card {
    width: min(94vw, 720px);
  }

  .private-beta-rule-list > div,
  .private-beta-note,
  .private-beta-agreement-check {
    border-radius: 14px;
  }
}

@media (max-width: 430px) {
  .private-beta-notice-inner {
    display: grid;
    grid-template-columns: auto 1fr;
  }

  .private-beta-notice-action {
    grid-column: 1 / -1;
    width: 100%;
  }
}

/* W2G90.2 — Login top controls no longer hidden by Private Beta notice */
@media (min-width: 900px) {
  body[data-page="login"] .private-beta-notice-banner {
    z-index: 90 !important;
  }

  body[data-page="login"] .auth-language-row {
    top: 58px !important;
    z-index: 140 !important;
  }

  body[data-page="login"] .auth-form-panel {
    padding-top: clamp(104px, 9vh, 132px) !important;
  }
}

@media (max-width: 899px) {
  body[data-page="login"] .private-beta-notice-banner {
    position: relative !important;
    top: auto !important;
    z-index: 60 !important;
  }

  body[data-page="login"] .auth-language-row {
    z-index: 70 !important;
  }
}

/* W2G90.3: Competition prize / reward highlight */
.competition-prize-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 10px 0 12px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 132, 45, 0.36);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(255, 104, 31, 0.16), rgba(255, 177, 74, 0.07)),
    rgba(255, 255, 255, 0.025);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 10px 24px rgba(255, 100, 26, 0.08);
  color: var(--text-primary, #f8fafc);
}

.competition-prize-strip.is-detail {
  margin: 14px 0;
  padding: 12px 14px;
}

.competition-prize-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  color: #fff7ed;
  font-weight: 700;
  background: linear-gradient(135deg, #ff6b1a, #ff9a3d);
  box-shadow: 0 8px 18px rgba(255, 105, 26, 0.26);
}

.competition-prize-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.competition-prize-copy span {
  color: rgba(255, 209, 178, 0.92);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.competition-prize-copy strong {
  color: #fff7ed;
  font-size: 0.95rem;
  line-height: 1.25;
  word-break: break-word;
}

.light-theme .competition-prize-strip,
body.light .competition-prize-strip {
  background: linear-gradient(135deg, rgba(255, 104, 31, 0.12), rgba(255, 177, 74, 0.08)), #fffaf5;
  border-color: rgba(234, 88, 12, 0.28);
  box-shadow: 0 10px 22px rgba(234, 88, 12, 0.1);
}

.light-theme .competition-prize-copy span,
body.light .competition-prize-copy span {
  color: #9a3412;
}

.light-theme .competition-prize-copy strong,
body.light .competition-prize-copy strong {
  color: #431407;
}

@media (max-width: 640px) {
  .competition-prize-strip {
    align-items: flex-start;
    padding: 9px 10px;
    border-radius: 14px;
  }
  .competition-prize-icon {
    width: 30px;
    height: 30px;
    border-radius: 10px;
  }
  .competition-prize-copy strong {
    font-size: 0.88rem;
  }
}

.form-help {
  margin: -4px 0 4px;
  color: var(--text-muted, #94a3b8);
  font-size: 0.82rem;
  line-height: 1.45;
}

/* W2G v1.5 — Explainable Match Reasons */
.match-reasons {
  display: grid;
  gap: 5px;
  margin: 7px 0 0;
}
.match-reason {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: var(--w2g-text-base, 14px);
  font-weight: 600;
  line-height: 1.35;
}
.match-reason-icon {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
}
.match-reason.strength { color: #065f46; }
.match-reason.gap      { color: #92400e; }
.match-reason.action   { color: var(--orange, #ff6e20); }
.match-reason.strength .match-reason-icon {
  background: rgba(52, 211, 153, 0.18);
  color: #065f46;
}
.match-reason.gap .match-reason-icon {
  background: rgba(251, 191, 36, 0.20);
  color: #92400e;
}
.match-reason.action .match-reason-icon {
  background: rgba(255, 110, 32, 0.14);
  color: var(--orange, #ff6e20);
}
html[data-theme="dark"] .match-reason.strength { color: #34d399; }
html[data-theme="dark"] .match-reason.gap      { color: #fbbf24; }
html[data-theme="dark"] .match-reason.action   { color: #fb923c; }
html[data-theme="dark"] .match-reason.strength .match-reason-icon { background: rgba(52,211,153,0.15); color: #34d399; }
html[data-theme="dark"] .match-reason.gap      .match-reason-icon { background: rgba(251,191,36,0.15); color: #fbbf24; }
html[data-theme="dark"] .match-reason.action   .match-reason-icon { background: rgba(251,146,60,0.15); color: #fb923c; }
@media (max-width: 640px) {
  .discovery-shell .match-reasons .match-reason:not(.match-reason-mobile) { display: none; }
  .match-reasons { gap: 4px; }
}

/* ========================================================================
   W2G-HAMBURGER-FIX: 3-bar hamburger consistency in Light + Dark theme
   Root cause: the block at ~line 12672 applies box-shadow with only 1 shadow
   to ::before in light theme (specificity 0,3,1), overriding the later
   two-shadow rule (0,2,1) that would produce 3 bars.
   Fix: repeat the same high-specificity selector AFTER the conflicting block
   so source-order wins and both shadows render all 3 bars.
   ::after is pinned to display:none to prevent a phantom 4th line.
   ======================================================================== */
@media (max-width: 720px) {
  html[data-theme="light"] body[data-page="app"] .mobile-menu-button::before {
    background: #111827 !important;
    box-shadow: 0 6px 0 #111827, 0 12px 0 #111827 !important;
  }
  html[data-theme="light"] body[data-page="app"] .mobile-menu-button::after {
    display: none !important;
    content: none !important;
    box-shadow: none !important;
  }
}

/* ========================================================================
   W2G-TABLET-NAV v2 — iPad / Tablet navigation drawer (recovery patch)
   Covers 721px – 1050px (iPad Air portrait, most tablets).
   ≤720px is handled by W2G64.3. >1050px uses the full desktop nav.

   Root-cause fixes over v1:
   A) Backdrop was inheriting body::before ambient-orb styles (border-radius:
      999px, filter:blur(8px), width/height:360px, animation, opacity:.55)
      → now all inherited orb properties are explicitly reset.
   B) padding-top:72px on drawer caused huge blank top area
      → reduced to 16px so content starts near the top.
   C) margin-top:auto on .mobile-nav-extras pushed settings to the bottom
      → removed; extras are first in DOM so they appear at top naturally.
      Divider is now border-bottom on extras (above nav items) not border-top.
   D) Orange dot/line artifacts from style-redesign-v2.css active pseudo-
      elements (::after orange dot, ::before radial gradient, navPillIn anim)
      → all button ::before / ::after suppressed inside the drawer.
   ======================================================================== */

@media (min-width: 721px) and (max-width: 1050px) {

  /* ── Topbar: above the backdrop and the drawer ── */
  body[data-page="app"] .topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 350 !important;
    overflow: visible !important;
  }

  /* ── Hamburger button ── */
  body[data-page="app"] .mobile-menu-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 0 !important;
    color: transparent !important;
    border-radius: 14px !important;
    border: 1px solid rgba(15, 23, 42, 0.14) !important;
    background: rgba(15, 23, 42, 0.06) !important;
    box-shadow: 0 2px 8px rgba(2, 6, 23, 0.06) !important;
    z-index: 352 !important;
    transition: background 0.15s ease !important;
  }
  html[data-theme="dark"] body[data-page="app"] .mobile-menu-button {
    border-color: rgba(148, 163, 184, 0.28) !important;
    background: rgba(248, 250, 252, 0.08) !important;
  }

  /* 3-bar icon: top bar + 2 more via box-shadow on ::before */
  body[data-page="app"] .mobile-menu-button::before {
    content: "" !important;
    position: absolute !important;
    left: 11px !important;
    right: 11px !important;
    top: 13px !important;
    height: 2px !important;
    border-radius: 999px !important;
    background: #111827 !important;
    box-shadow: 0 6px 0 #111827, 0 12px 0 #111827 !important;
    transform: none !important;
    transition: top 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease !important;
    /* reset any inherited filter/animation from ambient-orb base rule */
    filter: none !important;
    animation: none !important;
    opacity: 1 !important;
    width: auto !important;
  }
  html[data-theme="dark"] body[data-page="app"] .mobile-menu-button::before {
    background: #f8fafc !important;
    box-shadow: 0 6px 0 #f8fafc, 0 12px 0 #f8fafc !important;
  }

  /* ::after = second bar of the ✕ when menu is open */
  body[data-page="app"] .mobile-menu-button::after {
    content: "" !important;
    position: absolute !important;
    left: 11px !important;
    right: 11px !important;
    top: 19px !important;
    height: 2px !important;
    border-radius: 999px !important;
    background: #111827 !important;
    transform: rotate(-45deg) !important;
    opacity: 0 !important;
    filter: none !important;
    animation: none !important;
    width: auto !important;
    transition: top 0.18s ease, transform 0.18s ease, opacity 0.18s ease !important;
  }
  html[data-theme="dark"] body[data-page="app"] .mobile-menu-button::after {
    background: #f8fafc !important;
  }

  /* ✕ state when menu is open */
  body[data-page="app"] .mobile-menu-button[aria-expanded="true"]::before {
    top: 19px !important;
    transform: rotate(45deg) !important;
    box-shadow: none !important;
  }
  html[data-theme="dark"] body[data-page="app"] .mobile-menu-button[aria-expanded="true"]::before {
    box-shadow: none !important;
  }
  body[data-page="app"] .mobile-menu-button[aria-expanded="true"]::after {
    opacity: 1 !important;
  }

  /* ── Backdrop: FULL reset of inherited body::before ambient-orb styles ──
     Without these resets, the backdrop appears as a 360×360 px circular blob
     with border-radius:999px, filter:blur(8px), and an animated drift.  ── */
  body[data-page="app"].mobile-menu-open::before {
    content: "" !important;
    position: fixed !important;
    /* Use explicit TRBL instead of inset shorthand to beat all conflicting rules */
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    /* Override orb dimensions */
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    /* Override orb shape */
    border-radius: 0 !important;
    /* Override orb blur */
    filter: none !important;
    /* Override orb animation */
    animation: none !important;
    /* Override orb opacity */
    opacity: 1 !important;
    /* Override any orb transform */
    transform: none !important;
    /* Actual backdrop appearance */
    background: rgba(2, 6, 23, 0.50) !important;
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
    z-index: 330 !important;
    pointer-events: auto !important;
  }

  /* ── Main nav: hidden by default ── */
  body[data-page="app"] .main-nav {
    display: none !important;
    grid-column: auto !important;
    position: static !important;
  }

  /* ── Drawer: open state ──
     Content order (HTML order inside <nav>):
       1. ::before pseudo  → "MENU" label
       2. .mobile-nav-extras → Settings (language + theme)
       3. nav buttons        → Home, Competitions, etc.
     No margin-top:auto anywhere — extras stay at the top.            ── */
  body[data-page="app"] .main-nav.open {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    right: auto !important;
    width: min(360px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    margin: 0 !important;
    /* Small top padding: content starts near the top */
    padding: 16px 16px calc(20px + env(safe-area-inset-bottom, 0px)) !important;
    flex-flow: column nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    height: 100dvh !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-radius: 0 20px 20px 0 !important;
    background: #141414 !important;
    box-shadow: 24px 0 72px rgba(2, 6, 23, 0.48) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    z-index: 340 !important;
    animation: wtDrawerInLeft 0.22s cubic-bezier(0.22, 0.78, 0.26, 1) both !important;
  }

  /* "MENU" label — first visible element at top of drawer */
  body[data-page="app"] .main-nav.open::before {
    content: "Menu" !important;
    display: block !important;
    flex: 0 0 auto !important;
    margin: 0 2px 8px !important;
    color: rgba(248, 250, 252, 0.50) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
  }

  /* ── Settings section (language + theme) — appears second, near the top ── */
  body[data-page="app"] .main-nav.open .mobile-nav-extras {
    display: flex !important;
    flex-direction: column !important;
    flex: 0 0 auto !important;
    gap: 6px !important;
    width: 100% !important;
    /* NO margin-top:auto — keep it near the top */
    margin-top: 0 !important;
    margin-bottom: 4px !important;
    padding-top: 0 !important;
    padding-bottom: 12px !important;
    /* Divider is BELOW the settings section (above nav items) */
    border-top: 0 !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.14) !important;
  }

  body[data-page="app"] .main-nav.open .mobile-nav-settings-label {
    display: block !important;
    margin-bottom: 4px !important;
    color: rgba(248, 250, 252, 0.50) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
  }

  body[data-page="app"] .main-nav.open .mobile-nav-extras .language-switch {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    width: 100% !important;
  }

  body[data-page="app"] .main-nav.open .mobile-nav-extras .language-switch button,
  body[data-page="app"] .main-nav.open .mobile-nav-extras .theme-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: 100% !important;
    min-height: 44px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(148, 163, 184, 0.16) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    color: #f8fafc !important;
    font-size: 14px !important;
    font-weight: 700 !important;
  }

  body[data-page="app"] .main-nav.open .mobile-nav-extras .language-switch button.active {
    background: rgba(255, 106, 26, 0.18) !important;
    border-color: rgba(255, 106, 26, 0.40) !important;
    color: #ffb07a !important;
  }

  /* ── Nav buttons — appear after the settings section ── */
  body[data-page="app"] .main-nav.open button {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    min-height: 48px !important;
    padding: 11px 14px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: #1E1E1E !important;
    color: #f8fafc !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-align: left !important;
    /* Reset inherited effects from style-redesign-v2.css */
    position: relative !important;
    transform: none !important;
    animation: none !important;
    box-shadow: none !important;
    transition: background 0.12s ease !important;
  }

  /* Suppress the orange dot/line/glow pseudo-elements from style-redesign-v2.css.
     These rules cause the "orange artifact" on active and non-active items:
       .main-nav button::before        — radial-gradient glow on hover
       .main-nav button.active::after  — orange underline dot
       .main-nav button[data-route="dashboard"]:not(.active)::after — orange dot */
  body[data-page="app"] .main-nav.open button::before,
  body[data-page="app"] .main-nav.open button::after {
    display: none !important;
    content: none !important;
  }

  body[data-page="app"] .main-nav.open button:not(.active):hover,
  body[data-page="app"] .main-nav.open button:not(.active):active {
    transform: none !important;
    background: #242424 !important;
    box-shadow: none !important;
  }

  body[data-page="app"] .main-nav.open button.active {
    background: rgba(249, 115, 22, 0.16) !important;
    border-color: rgba(249, 115, 22, 0.34) !important;
    color: #ff8a3d !important;
    animation: none !important;
    transform: none !important;
  }

  /* ── Light-theme variants ── */
  html[data-theme="light"] body[data-page="app"] .main-nav.open {
    background: #ffffff !important;
    border-left: 1px solid rgba(15, 23, 42, 0.07) !important;
    box-shadow: 18px 0 56px rgba(15, 23, 42, 0.12) !important;
  }
  html[data-theme="light"] body[data-page="app"] .main-nav.open::before {
    color: rgba(15, 23, 42, 0.40) !important;
  }
  html[data-theme="light"] body[data-page="app"] .main-nav.open .mobile-nav-extras {
    border-bottom-color: rgba(15, 23, 42, 0.08) !important;
  }
  html[data-theme="light"] body[data-page="app"] .main-nav.open .mobile-nav-settings-label {
    color: rgba(15, 23, 42, 0.40) !important;
  }
  html[data-theme="light"] body[data-page="app"] .main-nav.open .mobile-nav-extras .language-switch button,
  html[data-theme="light"] body[data-page="app"] .main-nav.open .mobile-nav-extras .theme-toggle {
    border-color: rgba(15, 23, 42, 0.10) !important;
    background: rgba(15, 23, 42, 0.04) !important;
    color: #0f172a !important;
  }
  html[data-theme="light"] body[data-page="app"] .main-nav.open .mobile-nav-extras .language-switch button.active {
    background: rgba(255, 106, 26, 0.10) !important;
    border-color: rgba(255, 106, 26, 0.30) !important;
    color: #c2410c !important;
  }
  html[data-theme="light"] body[data-page="app"] .main-nav.open button {
    border-color: rgba(15, 23, 42, 0.07) !important;
    background: rgba(15, 23, 42, 0.04) !important;
    color: #0f172a !important;
  }
  html[data-theme="light"] body[data-page="app"] .main-nav.open button:hover {
    background: rgba(15, 23, 42, 0.07) !important;
  }
  html[data-theme="light"] body[data-page="app"] .main-nav.open button.active {
    background: rgba(255, 106, 26, 0.10) !important;
    border-color: rgba(255, 106, 26, 0.30) !important;
    color: #c2410c !important;
  }
}
/* END W2G-TABLET-NAV */

/* ========================================================================
   W2G-MOBILE-LANDING-GLOW-FIX
   Fixes the circular blurred orange/peach glow visible behind the mobile
   nav drawer on the Home / Landing page (≤720 px).

   Root cause: W2G64.3's mobile-menu-open::before backdrop rule uses
   inset:0 and a dark background, but does NOT reset the inherited ambient-
   orb properties from the base body::before rule:
     • opacity:.55       ← from style-polish-v3.css (body::before { opacity:.55 })
     • filter:blur(8px)  ← from style.css body::before base rule
     • animation:ambientDriftA ← drifts and fades, leaking the body gradient
     • border-radius:999px / width:360px / height:360px
   Result: backdrop is 55% opaque + blurred + animated → warm radial-gradient
   body background shows through as the "large circular glow on the right".

   body::after (420×420 px, right:-110px, z-index:-2) has no mobile open-
   state rule at all, so it can also contribute to the right-side glow.
   ======================================================================== */
@media (max-width: 720px) {
  /* ── Fully reset ambient-orb styles on the backdrop pseudo-element ── */
  body[data-page="app"].mobile-menu-open::before {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 0 !important;
    max-height: none !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    border-radius: 0 !important;
    filter: none !important;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* ── Hide the right-side body::after orb while the nav drawer is open ── */
  body[data-page="app"].mobile-menu-open::after {
    display: none !important;
    content: none !important;
  }
}

/* ================================================================
   W2G-AUTH-RESPONSIVE-POLISH
   Scope: Login page (body[data-page="login"]) ONLY.

   Fixes:
   A) Mobile ≤ 720px  — light theme brand invisible (white-on-white)
   B) Mobile ≤ 720px  — light theme unwanted dark outer card shadow/frame
   C) Mobile ≤ 720px  — dark theme tab-glow too strong
   D) Tablet 721–1024px — broken 2-col desktop grid on iPad-sized screens
   E) Tablet 721–1024px — brand text contrast + clean backgrounds
   ================================================================ */

/* ── A + B: Mobile light theme — brand contrast & card frame fix ── */
@media (max-width: 720px) {
  /* Brand text must be dark on light transparent background */
  html[data-theme="light"] body[data-page="login"] .auth-brand {
    color: var(--ink) !important;
  }
  html[data-theme="light"] body[data-page="login"] .auth-brand strong {
    color: var(--ink) !important;
  }
  html[data-theme="light"] body[data-page="login"] .auth-brand small {
    color: var(--muted) !important;
    opacity: 1 !important;
  }

  /* Plain off-white page so the white card visually separates from background */
  html[data-theme="light"] body[data-page="login"].auth-page {
    background: #F2F4F8 !important;
  }

  /* Replace the heavy dark shadow (0 24px 60px rgba(2,6,23,0.28)) that
     creates an outer "frame" look on a light page */
  html[data-theme="light"] body[data-page="login"] .form-card.auth-card-redesign {
    background: #FFFFFF !important;
    border: 1px solid rgba(15, 23, 42, 0.09) !important;
    box-shadow:
      0 2px 6px rgba(15, 23, 42, 0.04),
      0 10px 28px rgba(15, 23, 42, 0.07) !important;
  }

  /* No extra background layer behind the form panel */
  html[data-theme="light"] body[data-page="login"] .auth-form-panel {
    background: transparent !important;
  }

  /* Stable dark background for dark theme */
  html[data-theme="dark"] body[data-page="login"].auth-page {
    background:
      radial-gradient(circle at 15% 0%, rgba(255, 106, 26, 0.10), transparent 30%),
      linear-gradient(180deg, #07111F 0%, #0B1220 100%) !important;
  }
  html[data-theme="dark"] body[data-page="login"] .auth-form-panel {
    background: transparent !important;
  }
}

/* ── C: Mobile dark theme — soften tab active glow ─────────────── */
@media (max-width: 720px) {
  html[data-theme="dark"] body[data-page="login"] .auth-tabs button.active {
    box-shadow:
      0 4px 12px rgba(255, 106, 26, 0.12),
      inset 0 0 0 1px rgba(255, 106, 26, 0.24) !important;
  }
}

/* ── D + E: Tablet 721–1024px — single-column centered layout ──── */
@media (min-width: 721px) and (max-width: 1024px) {
  body[data-page="login"].auth-page {
    overflow-x: hidden !important;
  }

  /* Override the unconstrained 0.95fr 1.05fr grid that persists at
     iPad widths because style-polish-v3.css has no breakpoint on it */
  body[data-page="login"] .auth-shell.auth-redesign {
    display: grid !important;
    grid-template-columns: 1fr !important;
    max-width: 580px !important;
    width: 100% !important;
    margin: 0 auto !important;
    min-height: 100dvh !important;
    padding: 28px 24px 52px !important;
    align-content: start !important;
    gap: 16px !important;
  }

  /* Compact header strip — same approach as the mobile W2G51 patch */
  body[data-page="login"] .auth-info-panel {
    order: 1 !important;
    min-height: 0 !important;
    padding: 10px 0 6px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    overflow: visible !important;
  }

  /* Hide all decorative elements */
  body[data-page="login"] .auth-info-panel::before,
  body[data-page="login"] .auth-info-panel::after,
  body[data-page="login"] .auth-decor,
  body[data-page="login"] .auth-grid-lines,
  body[data-page="login"] .auth-form-orb {
    display: none !important;
  }

  /* Hero copy and role notes are desktop-only */
  body[data-page="login"] .auth-hero-copy,
  body[data-page="login"] .auth-note-grid {
    display: none !important;
  }

  /* Brand: always visible and legible */
  body[data-page="login"] .auth-brand {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
  }
  html[data-theme="light"] body[data-page="login"] .auth-brand {
    color: var(--ink) !important;
  }
  html[data-theme="light"] body[data-page="login"] .auth-brand strong {
    color: var(--ink) !important;
  }
  html[data-theme="light"] body[data-page="login"] .auth-brand small {
    color: var(--muted) !important;
    opacity: 1 !important;
  }

  /* Form panel: full width, no extra padding */
  body[data-page="login"] .auth-form-panel {
    order: 2 !important;
    display: block !important;
    padding: 0 !important;
    width: 100% !important;
    min-height: 0 !important;
  }

  /* Language / theme toggle row: relative (not fixed) on tablet */
  body[data-page="login"] .auth-language-row {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    inset: auto !important;
    width: 100% !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    z-index: 5 !important;
  }

  /* Auth card: full width, comfortable padding */
  body[data-page="login"] .form-card.auth-card-redesign {
    width: 100% !important;
    max-width: none !important;
    padding: 26px !important;
  }

  /* ── Light theme: clean backgrounds ── */
  html[data-theme="light"] body[data-page="login"].auth-page {
    background: #F2F4F8 !important;
  }
  html[data-theme="light"] body[data-page="login"] .auth-form-panel {
    background: transparent !important;
  }
  html[data-theme="light"] body[data-page="login"] .form-card.auth-card-redesign {
    background: #FFFFFF !important;
    border: 1px solid rgba(15, 23, 42, 0.09) !important;
    box-shadow:
      0 2px 6px rgba(15, 23, 42, 0.04),
      0 12px 32px rgba(15, 23, 42, 0.08) !important;
  }

  /* ── Dark theme: stable background ── */
  html[data-theme="dark"] body[data-page="login"].auth-page {
    background:
      radial-gradient(circle at 15% 0%, rgba(255, 106, 26, 0.10), transparent 30%),
      linear-gradient(180deg, #07111F 0%, #0B1220 100%) !important;
  }
  html[data-theme="dark"] body[data-page="login"] .auth-form-panel {
    background: transparent !important;
  }
}

/* ================================================================
   W2G-DRAWER-COMPACT-v1
   Scope: mobile + tablet nav drawer (≤1050px).
   Changes:
     1. Compact control row — language EN/TH + icon-only theme btn
        in one horizontal line, replaces the multi-row stacked layout.
     2. Theme label hidden in drawer; only icon shows (saves ~20px).
     3. Login / Logout auth section at drawer bottom, auth-aware.
   ================================================================ */

/* ── 1. Controls row: language buttons + compact theme icon ── */
.mobile-nav-controls-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.mobile-nav-controls-row .mobile-language-switch {
  flex: 1 1 auto;
}

/* Icon-only theme button — compact square */
.mobile-theme-icon-btn {
  flex: 0 0 40px !important;
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  gap: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 12px !important;
}

/* Override the 100%-width rules that target .theme-toggle inside the drawer */
@media (max-width: 1050px) {
  body[data-page="app"] .main-nav.open .mobile-nav-extras .mobile-theme-icon-btn {
    flex: 0 0 40px !important;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    gap: 0 !important;
  }
}

/* Hide the text label — drawer theme button is icon-only */
.mobile-theme-icon-btn .theme-toggle-label {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  max-width: 0 !important;
  overflow: hidden !important;
}

/* Icon size inside the compact button */
.mobile-theme-icon-btn .theme-toggle-icon {
  display: inline-grid !important;
  place-items: center !important;
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 auto !important;
}

/* ── 2. Auth section: Login / Logout at drawer bottom ── */
.mobile-nav-auth {
  display: none; /* hidden on desktop */
}

@media (max-width: 1050px) {
  body[data-page="app"] .main-nav.open .mobile-nav-auth {
    order: 3 !important;          /* appears AFTER nav buttons (order 2) */
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: auto !important;  /* pushes auth section to drawer bottom */
    padding-top: 12px !important;
    border-top: 1px solid rgba(148, 163, 184, 0.16) !important;
    flex: 0 0 auto !important;
    pointer-events: auto !important;
  }
}

/* Shared base for both login and logout drawer buttons.
   Use high-specificity selectors to beat .main-nav.open button generic rules. */
body[data-page="app"] .main-nav.open .mobile-drawer-auth-btn,
.mobile-drawer-auth-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
  min-height: 44px !important;
  padding: 10px 16px !important;
  border-radius: 13px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  border: 1px solid transparent !important;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease !important;
  box-sizing: border-box !important;
  letter-spacing: 0.01em !important;
}

/* Login button: primary orange accent */
body[data-page="app"] .main-nav.open a.mobile-drawer-auth-btn,
a.mobile-drawer-auth-btn {
  background: rgba(255, 106, 26, 0.92) !important;
  border-color: rgba(255, 106, 26, 0.80) !important;
  color: #ffffff !important;
}

body[data-page="app"] .main-nav.open a.mobile-drawer-auth-btn:hover,
body[data-page="app"] .main-nav.open a.mobile-drawer-auth-btn:focus-visible {
  background: rgba(229, 92, 16, 0.96) !important;
  border-color: rgba(229, 92, 16, 0.90) !important;
  color: #ffffff !important;
}

/* Logout button: subtle ghost — clear but not alarming */
body[data-page="app"] .main-nav.open button.mobile-drawer-auth-btn,
button.mobile-drawer-auth-btn {
  background: rgba(148, 163, 184, 0.08) !important;
  border-color: rgba(148, 163, 184, 0.20) !important;
  color: rgba(248, 250, 252, 0.80) !important;
}

html[data-theme="light"] body[data-page="app"] .main-nav.open button.mobile-drawer-auth-btn {
  background: rgba(15, 23, 42, 0.05) !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
  color: #374151 !important;
}

body[data-page="app"] .main-nav.open button.mobile-drawer-auth-btn:hover,
body[data-page="app"] .main-nav.open button.mobile-drawer-auth-btn:focus-visible {
  background: rgba(239, 68, 68, 0.12) !important;
  border-color: rgba(239, 68, 68, 0.30) !important;
  color: #fca5a5 !important;
}

html[data-theme="light"] body[data-page="app"] .main-nav.open button.mobile-drawer-auth-btn:hover,
html[data-theme="light"] body[data-page="app"] .main-nav.open button.mobile-drawer-auth-btn:focus-visible {
  background: rgba(239, 68, 68, 0.08) !important;
  border-color: rgba(239, 68, 68, 0.22) !important;
  color: #dc2626 !important;
}

/* ── Fix: .hidden must beat display:flex !important on auth buttons ──
   The base .mobile-drawer-auth-btn rule uses display:flex !important which
   has higher specificity than .hidden { display:none }.  These rules restore
   correct hidden behaviour by matching both classes with !important. */
body[data-page="app"] .main-nav.open .mobile-drawer-auth-btn.hidden,
.mobile-drawer-auth-btn.hidden {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ── Fix: hide the large Dashboard Appearance card on mobile ──
   The compact theme icon in the drawer replaces this card on small screens.
   Hiding the card here does NOT remove the theme switching function. */
@media (max-width: 720px) {
  .dashboard-appearance-card {
    display: none !important;
  }
}
/* END W2G-AUTH-RESPONSIVE-POLISH */

/* ── W2G-WORKSPACE-CLARITY: Compact team header + footer polish ── */

/* Compact header replaces the old hero section */
.workspace-compact-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 20px;
  background: rgba(15, 23, 42, 0.58);
  flex-wrap: wrap;
}

.workspace-compact-left {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.workspace-compact-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}

/* Tag pills */
.wch-tag {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 11px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  color: var(--muted, #9aa4b2);
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
  line-height: 1;
}

.wch-tag--open {
  border-color: rgba(34, 197, 94, 0.32);
  background: rgba(34, 197, 94, 0.07);
  color: #86efac;
}

.wch-tag--closed {
  border-color: rgba(148, 163, 184, 0.18);
  color: var(--muted, #9aa4b2);
  opacity: 0.65;
}

.wch-tag--alert {
  border-color: rgba(251, 146, 60, 0.38);
  background: rgba(255, 106, 26, 0.09);
  color: #ffb07a;
}

.wch-tag--ok {
  border-color: rgba(34, 197, 94, 0.22);
  background: rgba(34, 197, 94, 0.05);
  color: #86efac;
}

.wch-tag--role {
  border-color: rgba(99, 102, 241, 0.30);
  background: rgba(99, 102, 241, 0.07);
  color: #a5b4fc;
}

/* Inline progress bar row */
.workspace-compact-progress {
  display: flex;
  align-items: center;
  gap: 9px;
}

.workspace-compact-progress .mini-progress {
  width: 88px;
  margin: 0;
}

.workspace-compact-progress span {
  color: var(--muted, #9aa4b2);
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

/* Action buttons group */
.workspace-compact-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.workspace-compact-edit {
  white-space: nowrap;
}

/* Footer danger buttons — demoted to ghost/outline style */
.workspace-footer-danger {
  color: var(--danger, #ef4444) !important;
  background: transparent !important;
  border-color: rgba(239, 68, 68, 0.20) !important;
  opacity: 0.65;
  transition: opacity 0.14s ease, border-color 0.14s ease, background 0.14s ease;
}

.workspace-footer-danger:hover {
  opacity: 1;
  background: rgba(239, 68, 68, 0.07) !important;
  border-color: rgba(239, 68, 68, 0.38) !important;
}

.team-workspace-fullscreen-modal .workspace-team-settings-panel {
  display: grid;
  gap: 16px;
  padding: 16px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 18px;
  background: rgba(15, 23, 42, 0.42);
}

.team-workspace-fullscreen-modal .workspace-team-settings-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.team-workspace-fullscreen-modal .workspace-team-settings-head h3,
.team-workspace-fullscreen-modal .workspace-team-settings-head p {
  margin: 0;
}

.team-workspace-fullscreen-modal .workspace-team-settings-head h3 {
  margin-top: 2px;
}

.team-workspace-fullscreen-modal .workspace-team-settings-head p {
  margin-top: 6px;
  max-width: 640px;
}

.team-workspace-fullscreen-modal .workspace-team-settings-actions,
.team-workspace-fullscreen-modal .workspace-team-danger-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.team-workspace-fullscreen-modal .workspace-team-danger-zone {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px;
  border: 1px solid rgba(239, 68, 68, 0.30);
  border-radius: 14px;
  background: rgba(239, 68, 68, 0.08);
}

.team-workspace-fullscreen-modal .workspace-team-danger-zone strong {
  display: block;
  color: #fca5a5;
  font-weight: 700;
}

.team-workspace-fullscreen-modal .workspace-team-danger-zone p {
  max-width: 600px;
  margin: 4px 0 0;
}

.team-workspace-fullscreen-modal .workspace-team-danger-actions {
  justify-content: flex-end;
  flex-shrink: 0;
}

/* Light theme */
html[data-theme="light"] .workspace-compact-header {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(15, 23, 42, 0.10);
}

html[data-theme="light"] .wch-tag {
  background: rgba(15, 23, 42, 0.04);
  border-color: rgba(15, 23, 42, 0.14);
  color: #475569;
}

html[data-theme="light"] .wch-tag--open {
  border-color: rgba(22, 163, 74, 0.28);
  background: rgba(22, 163, 74, 0.06);
  color: #16a34a;
}

html[data-theme="light"] .wch-tag--alert {
  border-color: rgba(194, 65, 12, 0.28);
  background: rgba(194, 65, 12, 0.06);
  color: #c2410c;
}

html[data-theme="light"] .wch-tag--ok {
  border-color: rgba(22, 163, 74, 0.22);
  background: rgba(22, 163, 74, 0.05);
  color: #16a34a;
}

html[data-theme="light"] .wch-tag--role {
  border-color: rgba(79, 70, 229, 0.22);
  background: rgba(79, 70, 229, 0.05);
  color: #4f46e5;
}

html[data-theme="light"] .workspace-footer-danger {
  color: #b91c1c !important;
  border-color: rgba(185, 28, 28, 0.22) !important;
}

html[data-theme="light"] .workspace-footer-danger:hover {
  background: rgba(185, 28, 28, 0.05) !important;
  border-color: rgba(185, 28, 28, 0.38) !important;
}

html[data-theme="light"] .team-workspace-fullscreen-modal .workspace-team-settings-panel {
  background: rgba(255, 255, 255, 0.78);
  border-color: rgba(15, 23, 42, 0.10);
}

html[data-theme="light"] .team-workspace-fullscreen-modal .workspace-team-danger-zone {
  background: rgba(254, 242, 242, 0.82);
  border-color: rgba(185, 28, 28, 0.24);
}

html[data-theme="light"] .team-workspace-fullscreen-modal .workspace-team-danger-zone strong {
  color: #b91c1c;
}

/* Mobile: stack header vertically */
@media (max-width: 760px) {
  .workspace-compact-header {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 16px;
  }

  .workspace-compact-actions {
    flex-direction: column;
    gap: 8px;
  }

  .workspace-compact-actions .button {
    width: 100%;
    justify-content: center;
  }

  .team-workspace-fullscreen-modal .workspace-team-settings-head,
  .team-workspace-fullscreen-modal .workspace-team-danger-zone {
    flex-direction: column;
    align-items: stretch;
  }

  .team-workspace-fullscreen-modal .workspace-team-settings-actions,
  .team-workspace-fullscreen-modal .workspace-team-danger-actions {
    flex-direction: column;
  }

  .team-workspace-fullscreen-modal .workspace-team-settings-actions .button,
  .team-workspace-fullscreen-modal .workspace-team-danger-actions .button {
    width: 100%;
    justify-content: center;
  }

  .workspace-compact-progress .mini-progress {
    width: 72px;
  }
}
/* END W2G-WORKSPACE-CLARITY */

/* W2G quick team chat polish */
.quick-team-chat-card {
  display: grid;
  gap: 14px;
  border-top-color: rgba(255, 106, 26, 0.88) !important;
}
.quick-team-chat-header {
  align-items: flex-start;
}
.quick-team-chat-header h3 {
  margin-bottom: 6px;
  font-size: 1.35rem;
}
.quick-team-chat-count {
  flex: 0 0 auto;
}
.quick-team-chat-messages {
  display: grid;
  gap: 9px;
  max-height: 300px;
  overflow-y: auto;
  padding: 12px;
  border: 1px solid rgba(255, 106, 26, 0.22);
  border-radius: 18px;
  background: rgba(2, 6, 23, 0.24);
  scroll-behavior: smooth;
}
.quick-team-chat-row {
  display: grid;
  gap: 5px;
  padding: 10px 12px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.48);
}
.quick-team-chat-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.quick-team-chat-meta strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.quick-team-chat-meta span {
  flex: 0 0 auto;
  white-space: nowrap;
}
.quick-team-chat-row p,
.quick-team-chat-empty p {
  margin: 0;
  color: var(--ink);
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.quick-team-chat-empty {
  padding: 18px;
  border: 1px dashed rgba(255, 106, 26, 0.30);
  border-radius: 16px;
  background: rgba(255, 106, 26, 0.07);
}
.quick-team-chat-empty strong {
  display: block;
  margin-bottom: 5px;
  color: var(--text);
}
.quick-team-chat-composer {
  display: grid;
  gap: 10px;
}
.quick-team-chat-input textarea {
  min-height: 86px;
  resize: vertical;
}
.quick-team-chat-actions {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}
.quick-team-chat-actions .button {
  width: 100%;
  justify-content: center;
}
.quick-team-secondary-status {
  display: grid;
  gap: 8px;
  padding-top: 4px;
}
.quick-team-secondary-status .field-help {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.quick-team-status-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.quick-team-status-card {
  display: grid;
  gap: 4px;
  min-width: 0;
  min-height: 86px;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 16px;
  background: rgba(15, 23, 42, 0.28);
  color: var(--text);
  text-align: left;
}
.quick-team-status-card:not(.passive) {
  cursor: pointer;
}
.quick-team-status-card.attention {
  border-color: rgba(255, 106, 26, 0.42);
  background: rgba(255, 106, 26, 0.10);
}
.quick-team-status-card span,
.quick-team-status-card small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.quick-team-status-card strong {
  overflow: hidden;
  color: var(--text);
  font-size: 1.45rem;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-workspace-fullscreen-modal .workspace-chat-section {
  min-height: 0;
  grid-template-rows: auto auto auto;
}
.workspace-chat-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.workspace-chat-heading h3,
.workspace-chat-heading p {
  margin: 0;
}
.workspace-chat-heading p {
  margin-top: 6px;
}
.team-workspace-fullscreen-modal .workspace-chat-list {
  max-height: clamp(280px, 40vh, 360px);
  min-height: 0;
  padding: 16px;
  border-radius: 18px;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.team-workspace-fullscreen-modal .workspace-chat-list::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.team-workspace-fullscreen-modal .chat-bubble {
  width: fit-content;
  max-width: min(86%, 680px);
  min-width: 0;
  box-sizing: border-box;
  padding: 12px 14px;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: pre-wrap;
}
.team-workspace-fullscreen-modal .chat-bubble p {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: pre-wrap;
}
.team-workspace-fullscreen-modal .chat-meta {
  align-items: baseline;
}
.team-workspace-fullscreen-modal .chat-meta strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.workspace-chat-composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(255, 106, 26, 0.20);
  border-radius: 18px;
  background: rgba(255, 106, 26, 0.06);
}
.workspace-chat-composer .field-block {
  margin: 0;
}
.workspace-chat-composer textarea {
  min-height: 92px;
  resize: vertical;
}
.workspace-chat-composer .button {
  min-height: 46px;
  padding-inline: 20px;
}

html[data-theme="light"] .quick-team-chat-messages,
html[data-theme="light"] .quick-team-chat-row,
html[data-theme="light"] .quick-team-status-card {
  background: rgba(255, 255, 255, 0.72);
}
html[data-theme="light"] .quick-team-chat-empty,
html[data-theme="light"] .workspace-chat-composer {
  background: rgba(255, 247, 237, 0.72);
}
html[data-theme="light"] .quick-team-chat-row p,
html[data-theme="light"] .quick-team-chat-empty p {
  color: #334155;
}

@media (max-width: 1180px) {
  .polished-team-hub-layout {
    grid-template-columns: 1fr !important;
  }
  .quick-team-chat-card {
    width: 100%;
  }
}
@media (max-width: 760px) {
  .quick-team-chat-header,
  .workspace-chat-heading {
    flex-direction: column;
    align-items: stretch;
  }
  .quick-team-chat-count,
  .workspace-chat-heading .team-action-status {
    width: max-content;
  }
  .quick-team-chat-actions,
  .quick-team-status-grid {
    grid-template-columns: 1fr;
  }
  .quick-team-chat-messages {
    max-height: 260px;
  }
  .quick-team-chat-meta {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }
  .team-workspace-fullscreen-modal .workspace-chat-section {
    min-height: 0;
    grid-template-rows: auto auto auto;
  }
  .team-workspace-fullscreen-modal .workspace-chat-list {
    min-height: 0;
    max-height: clamp(240px, 50vh, 340px);
  }
  .team-workspace-fullscreen-modal .chat-bubble {
    width: fit-content;
    max-width: 100%;
  }
  .workspace-chat-composer {
    grid-template-columns: 1fr;
  }
  .workspace-chat-composer .button {
    width: 100%;
    justify-content: center;
  }
}

/* W2G mobile team chat FAB + drawer feedback */
.mobile-team-chat-fab,
.mobile-drawer-feedback-btn {
  display: none !important;
}

@media (max-width: 760px) {
  body[data-page="app"] .quick-team-chat-card {
    display: none !important;
  }

  body[data-page="app"] #teamHubContent {
    padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px));
  }

  body[data-page="app"] .feedback-launcher {
    display: none !important;
  }

  body[data-page="app"] .feedback-topbar-button {
    display: none !important;
  }

  body[data-page="app"] .mobile-team-chat-fab:not(.hidden) {
    position: fixed;
    right: max(14px, env(safe-area-inset-right, 0px));
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    z-index: 90;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 92px;
    min-height: 46px;
    padding: 10px 15px;
    border: 1px solid rgba(255, 106, 26, 0.46);
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(30, 41, 59, 0.96));
    color: #fff7ed;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0;
    box-shadow: 0 16px 34px rgba(2, 6, 23, 0.34), 0 0 0 3px rgba(255, 106, 26, 0.12);
    cursor: pointer;
  }

  body[data-page="app"] .mobile-team-chat-fab-icon {
    position: relative;
    width: 17px;
    height: 14px;
    border: 2px solid #ffb07a;
    border-radius: 6px;
    flex: 0 0 auto;
  }

  body[data-page="app"] .mobile-team-chat-fab-icon::after {
    content: "";
    position: absolute;
    left: 3px;
    bottom: -5px;
    width: 6px;
    height: 6px;
    border-left: 2px solid #ffb07a;
    border-bottom: 2px solid #ffb07a;
    border-radius: 0 0 0 3px;
    background: transparent;
  }

  body[data-page="app"] .mobile-team-chat-fab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: #ff6a1a;
    color: #ffffff;
    font-size: 11px;
    line-height: 1;
  }

  body[data-page="app"].modal-open .mobile-team-chat-fab,
  body[data-page="app"].mobile-menu-open .mobile-team-chat-fab,
  body[data-page="app"]:has(#modalOverlay:not(.hidden)) .mobile-team-chat-fab {
    display: none !important;
  }

  body[data-page="app"] .main-nav.open .mobile-drawer-feedback-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    min-height: 48px !important;
    margin-top: 4px !important;
    padding: 11px 14px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 106, 26, 0.34) !important;
    background: rgba(255, 106, 26, 0.14) !important;
    color: #ffb07a !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    text-align: left !important;
    box-shadow: none !important;
  }

  body[data-page="app"] .main-nav.open .mobile-drawer-feedback-btn::before,
  body[data-page="app"] .main-nav.open .mobile-drawer-feedback-btn::after {
    display: none !important;
    content: none !important;
  }

  html[data-theme="light"] body[data-page="app"] .main-nav.open .mobile-drawer-feedback-btn {
    border-color: rgba(255, 106, 26, 0.28) !important;
    background: rgba(255, 106, 26, 0.09) !important;
    color: #c2410c !important;
  }
}

@media (max-width: 430px) {
  body[data-page="app"] .mobile-team-chat-fab:not(.hidden) {
    right: max(12px, env(safe-area-inset-right, 0px));
    min-width: 84px;
    min-height: 42px;
    padding: 9px 13px;
    font-size: 13px;
  }
}

/* W2G91 beta UX polish: compact onboarding help, searchable provinces, profile-role shortcut */
.province-search-field {
  position: relative;
  isolation: isolate;
}

.province-search-field.open {
  z-index: 120;
}

.province-combobox-control {
  position: relative;
  display: block;
}

.province-search-field .province-combobox-input {
  min-height: 46px;
  padding-right: 42px !important;
}

.province-combobox-toggle {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  min-height: 32px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: rgba(255, 106, 26, 0.12) !important;
  color: var(--orange, #ff6a1a) !important;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.province-combobox-toggle:hover,
.province-combobox-toggle:focus-visible {
  background: rgba(255, 106, 26, 0.20) !important;
  outline: none;
}

.province-combobox-menu {
  display: none;
  position: relative;
  z-index: 121;
  max-height: min(320px, 42vh);
  overflow-y: auto;
  margin-top: 8px;
  padding: 8px;
  border: 1px solid rgba(255, 106, 26, 0.34);
  border-radius: 14px;
  background: var(--card, #fff);
  color: var(--ink, #111827);
  box-shadow: 0 22px 60px rgba(15, 23, 42, 0.22);
}

.province-search-field.open .province-combobox-menu {
  display: grid;
  gap: 6px;
}

.province-combobox-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  color: var(--body, #334155);
  text-align: left;
  cursor: pointer;
}

/* display:grid above overrides the browser [hidden] rule — force-hide filtered options */
[data-province-option].is-filter-hidden,
[data-province-option][hidden] {
  display: none !important;
}

.province-combobox-option span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}

.province-combobox-option small {
  color: var(--muted, #64748b);
  font-weight: 800;
  white-space: nowrap;
}

.province-combobox-option:hover,
.province-combobox-option:focus-visible,
.province-combobox-option.active {
  border-color: rgba(255, 106, 26, 0.38);
  background: rgba(255, 106, 26, 0.10);
  color: var(--orange-dark, #c2410c);
  outline: none;
}

.province-combobox-empty {
  padding: 12px;
  border: 1px dashed var(--border, rgba(148, 163, 184, 0.35));
  border-radius: 11px;
  color: var(--muted, #64748b);
  text-align: center;
  font-weight: 800;
}

.province-search-field .field-help {
  font-size: 11.5px;
  line-height: 1.35;
}

#teamPostForm .province-search-field.is-disabled {
  opacity: 0.62;
}

#teamPostForm .province-search-field.is-disabled .province-combobox-input,
#teamPostForm .province-search-field.is-disabled .province-combobox-toggle {
  cursor: not-allowed;
}

#teamPostForm .province-search-field.is-disabled .province-combobox-input {
  background: rgba(148, 163, 184, 0.10) !important;
  color: var(--muted, #64748b) !important;
}

#teamPostForm .province-search-field.is-disabled .province-combobox-menu {
  display: none !important;
}

#teamPostForm .team-province-mode-grid,
#teamPostForm .province-search-field {
  overflow: visible;
}

#teamPostForm .province-search-field {
  position: relative;
  min-width: 0;
}

#teamPostForm .province-search-field.open {
  z-index: 360;
}

#teamPostForm .province-search-field.open .province-combobox-toggle {
  transform: translateY(-50%) rotate(180deg);
}

#teamPostForm .province-combobox-menu {
  position: absolute !important;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 361;
  max-height: min(300px, 42vh);
  margin-top: 0;
  overscroll-behavior: contain;
}

#teamPostForm .province-search-field.open .province-combobox-menu {
  display: grid;
}

#teamPostForm .province-search-field.is-disabled .province-combobox-toggle {
  opacity: 0.7;
  pointer-events: none;
}

#teamPostForm .team-communication-link-field {
  display: grid;
  gap: 7px;
  margin-top: -2px;
}

#teamPostForm .team-communication-link-field .field-help {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.35;
}

html[data-theme="dark"] .province-combobox-menu {
  background: rgba(15, 23, 42, 0.98);
  border-color: rgba(255, 106, 26, 0.38);
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.48);
}

html[data-theme="dark"] .province-combobox-option {
  color: var(--body, #cbd5e1);
}

html[data-theme="dark"] .province-combobox-option:hover,
html[data-theme="dark"] .province-combobox-option:focus-visible,
html[data-theme="dark"] .province-combobox-option.active {
  background: rgba(255, 106, 26, 0.14);
  color: #ffb07a;
}

.team-profile-role-shortcut {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-top: -4px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 106, 26, 0.22);
  border-radius: 14px;
  background: rgba(255, 106, 26, 0.07);
}

.team-profile-role-shortcut .button.micro {
  width: auto !important;
  min-height: 34px;
  padding: 7px 11px;
  border-radius: 999px;
  font-size: 12px;
}

.team-profile-role-shortcut small {
  flex: 1 1 220px;
  color: var(--muted);
  font-weight: 600;
  line-height: 1.35;
}

html[data-theme="dark"] .team-profile-role-shortcut {
  border-color: rgba(255, 106, 26, 0.30);
  background: rgba(255, 106, 26, 0.10);
}

@media (min-width: 681px) and (max-width: 1050px) {
  body.onboarding-page .onboarding-shell {
    margin-top: 16px !important;
    gap: 14px !important;
  }

  body.onboarding-page .onboarding-side {
    padding: 16px 18px !important;
    border-radius: 18px !important;
  }

  body.onboarding-page .onboarding-side::before {
    width: 96px !important;
    height: 96px !important;
    right: -28px !important;
    bottom: -34px !important;
  }

  body.onboarding-page .onboarding-side h1 {
    font-size: clamp(24px, 3vw, 30px) !important;
    margin-bottom: 4px !important;
  }

  body.onboarding-page .onboarding-side p {
    line-height: 1.38 !important;
    margin: 0 !important;
  }

  body.onboarding-page #onboardingDescription {
    max-width: 68ch;
    font-size: 13.5px !important;
  }

  body.onboarding-page #onboardingNotes {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px !important;
    margin-top: 10px !important;
  }

  body.onboarding-page #onboardingNotes .info-card {
    padding: 10px 11px !important;
    border-radius: 12px !important;
  }

  body.onboarding-page #onboardingNotes .info-card p {
    font-size: 12px !important;
    line-height: 1.32 !important;
  }
}

@media (max-width: 680px) {
  body.onboarding-page .onboarding-side {
    padding: 14px !important;
  }

  body.onboarding-page .onboarding-side h1 {
    font-size: 24px !important;
    margin-bottom: 4px !important;
  }

  body.onboarding-page #onboardingDescription {
    font-size: 13px !important;
    line-height: 1.35 !important;
  }

  body.onboarding-page #onboardingNotes {
    margin-top: 8px !important;
  }

  body.onboarding-page #onboardingNotes .info-card {
    padding: 9px 10px !important;
  }

  body.onboarding-page #onboardingNotes .info-card:nth-child(n+2) {
    display: none !important;
  }

  .team-profile-role-shortcut {
    align-items: stretch;
  }

  .team-profile-role-shortcut .button.micro {
    width: 100% !important;
  }
}

/* ---------- W2G-FIX: Team pending-request card state (Find Team) ---------- */
.team-request-pending-card {
  position: relative;
  border-color: rgba(59, 130, 246, 0.42) !important;
  box-shadow: 0 18px 52px rgba(59, 130, 246, 0.10), var(--polish-card-shadow);
}
.team-request-pending-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  border-radius: 22px 0 0 22px;
  background: linear-gradient(180deg, #3b82f6, #93c5fd);
}
.team-request-pending-banner {
  display: grid;
  gap: 3px;
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(59, 130, 246, 0.26);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.09), rgba(147, 197, 253, 0.05));
}
.team-request-pending-banner span {
  width: max-content;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(59, 130, 246, 0.13);
  color: #1d4ed8;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.team-request-pending-banner strong {
  color: var(--polish-text-strong);
  font-size: 14px;
  line-height: 1.25;
}
.team-request-pending-banner small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}
.team-request-pending-tag {
  border-color: rgba(59, 130, 246, 0.40) !important;
  background: rgba(59, 130, 246, 0.11) !important;
  color: #1d4ed8 !important;
}
html[data-theme="dark"] .team-request-pending-card,
body.theme-dark .team-request-pending-card {
  box-shadow: 0 18px 58px rgba(59, 130, 246, 0.16), var(--polish-card-shadow);
}
html[data-theme="dark"] .team-request-pending-banner,
body.theme-dark .team-request-pending-banner {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.13), rgba(147, 197, 253, 0.06));
  border-color: rgba(59, 130, 246, 0.32);
}
html[data-theme="dark"] .team-request-pending-banner span,
body.theme-dark .team-request-pending-banner span,
html[data-theme="dark"] .team-request-pending-tag,
body.theme-dark .team-request-pending-tag {
  color: #93c5fd !important;
}

/* ---------- W2G-FIX: Member join-request badge (Find Members) ---------- */
.member-join-request-context {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 2px 0 10px;
  padding: 9px 10px;
  border-radius: 14px;
  background: rgba(59, 130, 246, 0.07);
  border: 1px solid rgba(59, 130, 246, 0.18);
}
.member-join-request-context small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.3;
  text-align: right;
}
.member-join-request-action {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.member-join-request-action small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}
@media (max-width: 760px) {
  .member-join-request-context {
    align-items: flex-start;
    display: grid;
  }
  .member-join-request-context small {
    text-align: left;
  }
}

/* W2G-HUB — Compact Recruitment Hub bar + filter chips */
.recruitment-hub-bar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 14px;
  margin-bottom: 4px;
  border-radius: 16px;
  background: rgba(15, 23, 42, 0.04);
  border: 1px solid rgba(148, 163, 184, 0.18);
}
html[data-theme="dark"] .recruitment-hub-bar,
body.theme-dark .recruitment-hub-bar {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(148, 163, 184, 0.12);
}
.recruitment-hub-label {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  padding-right: 4px;
}
.recruitment-hub-filters {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  flex: 1;
}
.hub-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
  white-space: nowrap;
}
.hub-filter-chip:hover {
  background: rgba(148, 163, 184, 0.12);
  border-color: rgba(148, 163, 184, 0.45);
  color: var(--polish-text-strong, var(--ink));
}
.hub-filter-chip.active {
  background: rgba(14, 165, 233, 0.10);
  border-color: rgba(14, 165, 233, 0.45);
  color: var(--blue-600, #2563eb);
  font-weight: 800;
}
html[data-theme="dark"] .hub-filter-chip.active,
body.theme-dark .hub-filter-chip.active {
  background: rgba(14, 165, 233, 0.14);
  border-color: rgba(14, 165, 233, 0.38);
  color: #7dd3fc;
}
.hub-filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.22);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}
.hub-filter-chip.active .hub-filter-count {
  background: rgba(14, 165, 233, 0.22);
}

/* Section divider used between pipeline sections in 'All' filter mode */
.member-section-divider {
  grid-column: 1 / -1;
  margin-top: 10px;
  padding: 6px 2px 0;
  border-top: 1px solid rgba(148, 163, 184, 0.18);
}
.member-section-divider h3 {
  margin: 0;
  color: var(--polish-text-strong, var(--ink));
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

/* Empty-state inside the hub (spans full grid width) */
.recruitment-hub-empty {
  grid-column: 1 / -1;
}

@media (max-width: 760px) {
  .recruitment-hub-bar {
    padding: 9px 12px;
    gap: 8px;
  }
  .recruitment-hub-label {
    width: 100%;
    padding-right: 0;
  }
  .hub-filter-chip {
    font-size: 11px;
    padding: 4px 8px;
  }
  .member-section-divider {
    margin-top: 8px;
  }
}

/* ============================================================
   W2G-QUEUE — Recruitment Queue compact section
   Owner Find Members: requests + invitations as compact rows,
   recommended as full cards, unavailable as muted cards.
   ============================================================ */

/* Outer wrapper — spans full card-grid width */
.recruitment-queue-section {
  grid-column: 1 / -1;
  background: rgba(249, 115, 22, 0.04);
  border: 1px solid rgba(249, 115, 22, 0.18);
  border-radius: 18px;
  padding: 14px 16px 10px;
  margin-bottom: 4px;
}

html[data-theme="dark"] .recruitment-queue-section,
body.theme-dark .recruitment-queue-section {
  background: rgba(249, 115, 22, 0.07);
  border-color: rgba(249, 115, 22, 0.22);
}

.recruitment-queue-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.recruitment-queue-kicker {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #f97316;
}

/* Two-column layout: requests | invitations */
.recruitment-queue-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.queue-col {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 12px;
  padding: 8px 10px 6px;
}

html[data-theme="dark"] .queue-col,
body.theme-dark .queue-col {
  background: rgba(255, 255, 255, 0.03);
}

.queue-col-requests {
  border-color: rgba(59, 130, 246, 0.25);
}

.queue-col-invited {
  border-color: rgba(249, 115, 22, 0.25);
}

.queue-col-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.13);
}

.queue-col-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  color: var(--muted);
  flex: 1;
  min-width: 0;
}

.queue-col-empty {
  font-size: 12px;
  color: var(--muted);
  padding: 4px 2px 4px;
  font-style: italic;
}

/* Individual queue row: avatar | body | actions */
.queue-row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 6px 3px;
  border-radius: 8px;
  transition: background 0.1s ease;
}

.queue-row + .queue-row {
  border-top: 1px solid rgba(148, 163, 184, 0.10);
}

.queue-row:hover {
  background: rgba(148, 163, 184, 0.07);
}

.queue-row .member-avatar {
  width: 32px;
  height: 32px;
  min-width: 32px;
  font-size: 11px;
  border-radius: 50%;
}

.queue-row-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.queue-row-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--polish-text-strong, var(--ink));
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.queue-row-role {
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.queue-row-body .status-pill {
  font-size: 10px;
  padding: 2px 7px;
  margin-top: 3px;
  align-self: flex-start;
}

.queue-row-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: flex-end;
  flex-shrink: 0;
}

/* Small variant buttons inside queue rows */
.queue-row-actions .button.small {
  padding: 3px 10px;
  font-size: 11px;
  border-radius: 8px;
  white-space: nowrap;
  min-height: 28px;
}

/* Full-width rows-only wrapper used in filtered views (requests / invited chip) */
.recruitment-queue-rows-only {
  grid-column: 1 / -1;
  background: rgba(249, 115, 22, 0.03);
  border: 1px solid rgba(249, 115, 22, 0.14);
  border-radius: 14px;
  padding: 8px 14px;
}

/* Unavailable member cards — muted visual */
.member-card-unavailable {
  opacity: 0.55;
  filter: saturate(0.45);
  transition: opacity 0.15s ease, filter 0.15s ease;
}

.member-card-unavailable:hover {
  opacity: 0.75;
  filter: saturate(0.65);
}

/* ── Mobile: stack queue columns vertically ── */
@media (max-width: 680px) {
  .recruitment-queue-cols {
    grid-template-columns: 1fr;
  }

  .queue-row {
    grid-template-columns: 28px 1fr;
    grid-template-rows: auto auto;
    align-items: start;
  }

  .queue-row .member-avatar {
    width: 28px;
    height: 28px;
    min-width: 28px;
    margin-top: 2px;
  }

  .queue-row-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
    margin-top: 4px;
  }
}

@media (max-width: 480px) {
  .recruitment-queue-section {
    padding: 12px 12px 8px;
    border-radius: 14px;
  }

  .queue-col {
    border-radius: 10px;
  }

  .recruitment-queue-rows-only {
    padding: 8px 10px;
  }
}


/* ===== Dashboard next-steps section ===== */
.dashboard-next-steps-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}
.dashboard-next-step-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 14px;
  background: rgba(8, 14, 28, 0.20);
}
.dashboard-next-step-copy strong {
  display: block;
  font-size: 14px;
  line-height: 1.35;
  margin-bottom: 2px;
}
.dashboard-next-step-copy p {
  margin: 0;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.4;
}
.dashboard-next-step-action {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
html[data-theme="dark"] .dashboard-next-step-row {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(148, 163, 184, 0.14);
}
@media (max-width: 600px) {
  .dashboard-next-step-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .dashboard-next-step-action {
    justify-content: flex-start;
  }
}

/* W2G onboarding polish: floating Personal onboarding dropdowns */
body.onboarding-page .form-card.wide,
body.onboarding-page #onboardingForm,
body.onboarding-page #onboardingForm .two-col {
  overflow: visible;
}

body.onboarding-page #onboardingForm .province-search-field,
body.onboarding-page #onboardingForm .university-field,
body.onboarding-page #onboardingForm .university-field-inline,
body.onboarding-page #onboardingForm .university-select-shell {
  position: relative;
}

body.onboarding-page #onboardingForm .province-search-field.open,
body.onboarding-page #onboardingForm .university-select-shell.open {
  z-index: 320;
}

body.onboarding-page #onboardingForm .province-combobox-toggle,
body.onboarding-page #onboardingForm .university-trigger-caret {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px !important;
  display: grid;
  place-items: center;
  border-radius: 10px !important;
  background: rgba(255, 106, 26, 0.12) !important;
  color: var(--orange, #ff6a1a) !important;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  transition: transform 0.18s ease, color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

body.onboarding-page #onboardingForm .province-combobox-toggle:hover,
body.onboarding-page #onboardingForm .province-combobox-toggle:focus-visible,
body.onboarding-page #onboardingForm .university-select-trigger:hover .university-trigger-caret,
body.onboarding-page #onboardingForm .university-select-shell.open .university-trigger-caret {
  background: rgba(255, 106, 26, 0.20) !important;
  color: var(--orange-dark, #c2410c) !important;
  box-shadow: 0 0 0 3px rgba(255, 106, 26, 0.10);
}

body.onboarding-page #onboardingForm .province-search-field.open .province-combobox-toggle {
  transform: translateY(-50%) rotate(180deg);
}

body.onboarding-page #onboardingForm .university-select-shell.open .university-trigger-caret {
  transform: rotate(180deg);
}

body.onboarding-page #onboardingForm .province-combobox-menu,
body.onboarding-page #onboardingForm .university-select-menu {
  position: absolute !important;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 321;
  margin-top: 0 !important;
  border: 1px solid rgba(255, 106, 26, 0.34);
  background: var(--card, #fff);
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.24);
  overflow: hidden;
}

body.onboarding-page #onboardingForm .province-combobox-menu {
  max-height: min(320px, 42vh);
  overflow-y: auto;
}

body.onboarding-page #onboardingForm .university-select-menu {
  max-height: min(430px, 58vh);
}

body.onboarding-page #onboardingForm .university-option-list {
  max-height: min(280px, 38vh);
  overflow-y: auto;
}

html[data-theme="dark"] body.onboarding-page #onboardingForm .province-combobox-menu,
html[data-theme="dark"] body.onboarding-page #onboardingForm .university-select-menu {
  background: rgba(15, 23, 42, 0.98);
  box-shadow: 0 24px 78px rgba(0, 0, 0, 0.50);
}

@media (max-width: 760px) {
  body.onboarding-page #onboardingForm .province-combobox-menu,
  body.onboarding-page #onboardingForm .university-select-menu {
    position: absolute !important;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    bottom: auto;
    max-height: min(360px, 52vh);
  }

  body.onboarding-page #onboardingForm .university-option-list {
    max-height: min(248px, 34vh);
  }
}

/* =============================================================
   W2G Onboarding Basic Profile — Visual Balance Polish
   UX/UI only. No data, logic, backend, or API changes.
   ============================================================= */

/* ── A. University field: strip nested-card wrapper in onboarding ── */
body.onboarding-page #onboardingForm label.university-field-inline {
  padding: 0;
  border: none;
  background: none !important;
  box-shadow: none !important;
}

/* ── A. University trigger: compact height + radius to match form controls ── */
body.onboarding-page #onboardingForm .university-select-trigger {
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 10px;
  gap: 10px;
}

/* ── A. University logo: reduce inside compact trigger ── */
body.onboarding-page #onboardingForm .university-select-trigger .university-logo-fallback {
  width: 26px;
  height: 26px;
  font-size: 0.58rem;
  border-radius: 7px;
}

/* ── C. Left panel: reduce padding and let panel fit its content height ── */
body.onboarding-page .onboarding-side {
  padding: 20px 22px;
  align-self: start;
}

/* ── C. Compact the onboarding note cards ── */
body.onboarding-page #onboardingNotes {
  gap: 8px;
  margin-top: 10px;
}

body.onboarding-page #onboardingNotes .info-card {
  padding: 10px 12px;
  border-radius: 10px;
  box-shadow: none;
}

body.onboarding-page #onboardingNotes .info-card p {
  font-size: 12.5px;
  line-height: 1.4;
}

/* =============================================================
   Team Mission Center — v1 additions
   Appended after existing rules. New class names only.
   ============================================================= */

/* ── Mission Header ── */
.mission-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: rgba(99, 102, 241, 0.08);
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: 18px;
  padding: 18px 20px;
  margin-bottom: 18px;
}
.mission-header-left .eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--indigo, #6366f1);
  display: block;
  margin-bottom: 4px;
}
.mission-header-left h2 {
  font-size: 19px;
  font-weight: 700;
  margin: 0 0 4px;
  line-height: 1.2;
}
.mission-target {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
}
.mission-header-stats {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-start;
}
.mission-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(15, 23, 42, 0.3);
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 12px;
  padding: 8px 14px;
  min-width: 64px;
  text-align: center;
}
.mission-stat strong {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.1;
}
.mission-stat span {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}
.mission-stat--warn {
  border-color: rgba(251, 146, 60, 0.35);
  background: rgba(251, 146, 60, 0.08);
}
.mission-stat--warn strong {
  color: #fb923c;
}
html[data-theme="light"] .mission-header {
  background: rgba(99, 102, 241, 0.05);
}
html[data-theme="light"] .mission-stat {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.1);
}

/* ── My Next Task Card ── */
.my-next-task-card {
  background: rgba(15, 23, 42, 0.3);
  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: 18px;
  padding: 16px 18px;
  margin-bottom: 18px;
}
.my-next-task-card .section-title-row h3 {
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 300px;
}
.my-next-task-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.my-next-task-title-row strong {
  font-size: 14px;
  font-weight: 800;
}
.my-next-task-meta {
  font-size: 12px;
  margin: 0 0 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
}
.my-next-task-notes {
  max-height: 1.5em;
  margin: -4px 0 8px;
}
.my-next-task-more {
  font-size: 11.5px;
  margin: 4px 0 0;
}
.my-next-task-detail .task-status-select {
  margin-top: 6px;
}
html[data-theme="light"] .my-next-task-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.09);
}

/* ── Task Priority Badges ── */
.task-priority {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  flex-shrink: 0;
}
.task-priority--high {
  background: rgba(239, 68, 68, 0.14);
  color: #ef4444;
}
.task-priority--medium {
  background: rgba(251, 191, 36, 0.16);
  color: #d97706;
}
.task-priority--low {
  background: rgba(100, 116, 139, 0.14);
  color: #94a3b8;
}
.task-status-badge {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 2px 8px;
  border-radius: 999px;
  flex-shrink: 0;
}
.task-status-badge--blocked {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.34);
}
.task-priority-text {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}
html[data-theme="light"] .task-status-badge--blocked {
  background: rgba(245, 158, 11, 0.16);
  color: #92400e;
  border-color: rgba(217, 119, 6, 0.3);
}

/* ── Team Readiness v1 ── */
.workspace-readiness-v1 {
  background: rgba(15, 23, 42, 0.3);
  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: 18px;
  padding: 16px 18px;
  margin-bottom: 18px;
}
.workspace-readiness-v1 .readiness-meter {
  margin: 10px 0 4px;
}
.readiness-factors {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
  display: grid;
  gap: 8px;
}
.readiness-factor {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background: rgba(255, 255, 255, 0.03);
}
.readiness-factor.is-done {
  border-color: rgba(34, 197, 94, 0.22);
  background: rgba(34, 197, 94, 0.04);
}
.readiness-factor-icon {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}
.readiness-factor.is-done .readiness-factor-icon {
  background: rgba(34, 197, 94, 0.16);
  color: #34d399;
}
.readiness-factor:not(.is-done) .readiness-factor-icon {
  background: rgba(251, 146, 60, 0.16);
  color: #fb923c;
}
.readiness-factor-body strong {
  font-size: 13px;
  font-weight: 800;
  display: block;
}
.readiness-factor-body p {
  font-size: 12px;
  color: var(--muted);
  margin: 2px 0 0;
}
html[data-theme="light"] .workspace-readiness-v1 {
  background: #f8fafc;
  border-color: rgba(15, 23, 42, 0.08);
}
html[data-theme="light"] .readiness-factor {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.08);
}

/* ── Task Board (Kanban) ── */
.task-board-kanban {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.task-board-col {
  border-radius: 16px;
  background: rgba(15, 23, 42, 0.3);
  border: 1px solid rgba(148, 163, 184, 0.13);
  padding: 10px 10px 12px;
  min-height: 80px;
}
.task-board-col-header {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 2px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
  margin-bottom: 8px;
}
.task-board-col-count {
  font-size: 11px;
  font-weight: 700;
  background: rgba(148, 163, 184, 0.14);
  border-radius: 999px;
  padding: 1px 7px;
}
.task-board-col--blocked .task-board-col-header {
  color: #ef4444;
}
.task-board-col--blocked {
  border-color: rgba(239, 68, 68, 0.2);
  background: rgba(239, 68, 68, 0.05);
}
.task-board-col--done {
  opacity: 0.7;
}
.task-board-empty {
  font-size: 12px;
  padding: 4px 2px;
}
.task-card {
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(148, 163, 184, 0.13);
  padding: 10px 11px;
  margin-bottom: 8px;
}
.task-card:last-child {
  margin-bottom: 0;
}
.task-card-title {
  font-size: 13px;
  font-weight: 800;
  line-height: 1.3;
  margin-bottom: 4px;
  word-break: break-word;
}
.task-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 5px 8px;
  font-size: 11.5px;
  color: var(--muted);
  margin: 0 0 6px;
}
.task-card-meta-label,
.task-card-meta-chip .task-card-meta-label {
  font-weight: 700;
  opacity: 0.75;
  margin-right: 2px;
}
.task-card-footer {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.phase-tag {
  font-style: italic;
  opacity: 0.85;
}
.task-card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.task-card-actions .task-status-select {
  flex: 1;
  min-width: 90px;
  font-size: 12px;
}
.task-card-actions .task-status-select:disabled,
.my-next-task-detail .task-status-select:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}
.task-card-actions .button.micro {
  font-size: 11px;
  padding: 3px 8px;
}
.task-create-details {
  border: 1px solid rgba(148, 163, 184, 0.13);
  border-radius: 14px;
  padding: 12px 14px;
  margin-top: 4px;
}
.task-create-details summary {
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
}
.task-form-grid--extended {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 10px;
}
html[data-theme="light"] .task-board-col {
  background: #f8fafc;
  border-color: rgba(15, 23, 42, 0.08);
}
html[data-theme="light"] .task-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.09);
}
html[data-theme="light"] .task-board-col--blocked {
  background: rgba(239, 68, 68, 0.04);
}

/* ── Responsive: Kanban columns ── */
@media (max-width: 900px) {
  .task-board-kanban {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 520px) {
  .task-board-kanban {
    grid-template-columns: 1fr;
  }
  .task-form-grid--extended {
    grid-template-columns: 1fr;
  }
  .mission-header {
    flex-direction: column;
  }
  .mission-header-stats {
    width: 100%;
    justify-content: flex-start;
  }
}

/* =============================================================
   Team Workspace — Mission Center sidebar layout (v2)
   Sidebar nav + structured main area. Scoped to .workspace-shell-v2.
   Reuses the existing .workspace-tabs / .workspace-panel markup so the
   tab-switch (setWorkspaceTab) and badge (refreshWorkspaceTabBadges)
   JS keeps working unchanged. New class names only — appended last.
   ============================================================= */
.workspace-shell-v2 {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 1380px;
  margin: 0 auto;
  padding-bottom: 12px;
}

/* Full-width status bar under the modal header (context chips + target). */
.workspace-statusbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
}
.wch-tag--target {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  border-color: rgba(255, 106, 26, 0.34);
  background: rgba(255, 106, 26, 0.1);
  color: #ffb07a;
}
.wch-tag--target.is-empty {
  border-color: rgba(148, 163, 184, 0.22);
  background: rgba(148, 163, 184, 0.08);
  color: var(--muted, #9aa4b2);
}
html[data-theme="light"] .workspace-statusbar {
  border-bottom-color: rgba(15, 23, 42, 0.1);
}
html[data-theme="light"] .wch-tag--target {
  color: #9a3f0f;
  background: rgba(255, 106, 26, 0.08);
  border-color: rgba(255, 106, 26, 0.28);
}

/* Sidebar + main row (sits below the status bar). */
.workspace-body-grid {
  display: flex;
  align-items: stretch;
  gap: 0;
  min-height: calc(100dvh - 240px);
}

/* ── Sidebar ── */
.workspace-shell-v2 .workspace-sidebar {
  flex: 0 0 248px;
  width: 248px;
  align-self: flex-start;
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 4px 24px 12px 2px;
}
.workspace-sidebar-brand {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 2px 2px 0;
}
.workspace-sidebar-eyebrow {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ff8a4c;
}
.workspace-sidebar-team {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text, #f8fafc);
  word-break: break-word;
}
.workspace-sidebar-target {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  max-width: 100%;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  color: #c7d2fe;
  background: rgba(99, 102, 241, 0.12);
  border: 1px solid rgba(99, 102, 241, 0.24);
  border-radius: 999px;
  padding: 4px 11px;
  word-break: break-word;
}
.workspace-sidebar-target.is-empty {
  color: var(--muted, #9aa4b2);
  background: rgba(148, 163, 184, 0.1);
  border-color: rgba(148, 163, 184, 0.2);
  font-weight: 600;
}

/* ── Vertical nav (overrides the horizontal .workspace-tabs chrome) ── */
.workspace-shell-v2 .workspace-tabs.workspace-sidebar-nav {
  flex-direction: column;
  align-items: stretch;
  gap: 3px !important;
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  overflow: visible;
}
.workspace-shell-v2 .workspace-sidebar-nav button {
  display: flex !important;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 40px;
  padding: 8px 12px !important;
  border-radius: 10px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: var(--muted, #9aa4b2) !important;
  font-size: 13.5px;
  font-weight: 700;
  text-align: left;
  box-shadow: none !important;
  transition: background-color .14s ease, color .14s ease, border-color .14s ease;
}
.workspace-shell-v2 .workspace-sidebar-nav button span {
  flex: 1;
  min-width: 0;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.workspace-shell-v2 .workspace-sidebar-nav button:hover {
  background: rgba(148, 163, 184, 0.1) !important;
  color: var(--text, #f8fafc) !important;
}
.workspace-shell-v2 .workspace-sidebar-nav button.active {
  background: rgba(255, 106, 26, 0.13) !important;
  border-color: rgba(255, 106, 26, 0.32) !important;
  color: #ffb07a !important;
  box-shadow: inset 2px 0 0 #ff6a1a !important;
}
.workspace-shell-v2 .workspace-sidebar-nav button strong {
  flex: 0 0 auto;
}

/* ── Sidebar footer: setup progress + primary actions ── */
.workspace-sidebar-foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid rgba(148, 163, 184, 0.14);
}
.workspace-sidebar-progress {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.workspace-sidebar-progress .mini-progress {
  width: 100%;
  margin: 0;
}
.workspace-sidebar-progress span {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted, #9aa4b2);
}
.workspace-sidebar-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.workspace-sidebar-actions .button {
  width: 100%;
  justify-content: center;
  white-space: nowrap;
}

/* ── Main content area ── */
.workspace-shell-v2 .workspace-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 4px 2px 8px 24px;
  border-left: 1px solid rgba(148, 163, 184, 0.16);
}
.workspace-main-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}
.workspace-shell-v2 .workspace-panel {
  margin: 0;
}

/* Tighten the spacing of the v1 mission sections inside the new shell
   (the panel grid gap already supplies vertical rhythm). */
.workspace-shell-v2 .mission-header,
.workspace-shell-v2 .my-next-task-card,
.workspace-shell-v2 .workspace-readiness-v1 {
  margin-bottom: 0;
}

/* Make Mission / Readiness read as the primary surfaces. */
.workspace-shell-v2 .mission-header {
  background: linear-gradient(135deg, rgba(255, 106, 26, 0.1), rgba(99, 102, 241, 0.08));
  border-color: rgba(255, 106, 26, 0.22);
}
.workspace-shell-v2 .mission-header-left h2 {
  font-size: 22px;
}

/* Light theme */
html[data-theme="light"] .workspace-shell-v2 .workspace-main {
  border-left-color: rgba(15, 23, 42, 0.1);
}
html[data-theme="light"] .workspace-sidebar-team {
  color: #0f172a;
}
html[data-theme="light"] .workspace-sidebar-target {
  color: #4f46e5;
  background: rgba(79, 70, 229, 0.07);
  border-color: rgba(79, 70, 229, 0.2);
}
html[data-theme="light"] .workspace-sidebar-target.is-empty {
  color: #64748b;
  background: rgba(15, 23, 42, 0.04);
  border-color: rgba(15, 23, 42, 0.12);
}
html[data-theme="light"] .workspace-shell-v2 .workspace-sidebar-nav button {
  color: #475569 !important;
}
html[data-theme="light"] .workspace-shell-v2 .workspace-sidebar-nav button:hover {
  background: rgba(15, 23, 42, 0.05) !important;
  color: #0f172a !important;
}
html[data-theme="light"] .workspace-shell-v2 .workspace-sidebar-nav button.active {
  background: rgba(255, 106, 26, 0.1) !important;
  border-color: rgba(255, 106, 26, 0.28) !important;
  color: #9a3f0f !important;
}
html[data-theme="light"] .workspace-main-topbar,
html[data-theme="light"] .workspace-sidebar-foot {
  border-color: rgba(15, 23, 42, 0.1);
}

/* ── Responsive: collapse sidebar into a top nav bar ── */
@media (max-width: 980px) {
  .workspace-shell-v2 {
    flex-direction: column;
    gap: 12px;
    min-height: 0;
  }
  .workspace-body-grid {
    flex-direction: column;
    gap: 12px;
    min-height: 0;
  }
  .workspace-shell-v2 .workspace-sidebar {
    flex: none;
    width: 100%;
    position: static;
    flex-direction: column;
    gap: 12px;
    padding: 0 0 12px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
  }
  .workspace-shell-v2 .workspace-tabs.workspace-sidebar-nav {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 6px !important;
    padding-bottom: 4px !important;
    -webkit-overflow-scrolling: touch;
  }
  .workspace-shell-v2 .workspace-sidebar-nav button {
    flex: 0 0 auto;
    width: auto;
    justify-content: center;
    box-shadow: none !important;
  }
  .workspace-shell-v2 .workspace-sidebar-nav button.active {
    box-shadow: inset 0 -2px 0 #ff6a1a !important;
  }
  .workspace-sidebar-foot {
    margin-top: 0;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-top: 0;
    border-top: 0;
  }
  .workspace-sidebar-progress {
    flex: 1 1 200px;
  }
  .workspace-sidebar-actions {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .workspace-sidebar-actions .button {
    width: auto;
  }
  .workspace-shell-v2 .workspace-main {
    padding: 0;
    border-left: 0;
  }
  html[data-theme="light"] .workspace-shell-v2 .workspace-sidebar {
    border-bottom-color: rgba(15, 23, 42, 0.1);
  }
}
@media (max-width: 520px) {
  .workspace-sidebar-foot {
    flex-direction: column;
    align-items: stretch;
  }
  .workspace-sidebar-actions {
    flex-direction: column;
  }
  .workspace-sidebar-actions .button {
    width: 100%;
  }
}

/* =============================================================
   Team Workspace — UX Fix Patch v1.1
   Chat containment, task-board polish, demoted overview details,
   mobile safety. Scoped / new class names. Appended last.
   ============================================================= */

/* Chat layout is governed by the existing
   `.team-workspace-fullscreen-modal .workspace-chat-*` block above
   (bounded log height + grid composer). v1.1 duplicates removed in v1.2
   to avoid dueling rules. */

/* ── Task Board v2 polish ── */
.task-board-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.task-board-head-titles .eyebrow {
  display: block;
  margin-bottom: 2px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ff8a4c;
}
.task-board-head-titles h3 {
  margin: 0 0 4px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.task-board-head-titles p {
  margin: 0;
  font-size: 13px;
}
.task-board-stats {
  display: flex;
  gap: 10px;
}
.task-board-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 58px;
  padding: 7px 12px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.34);
  border: 1px solid rgba(148, 163, 184, 0.16);
}
.task-board-stat strong {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.1;
}
.task-board-stat span {
  margin-top: 2px;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.task-board-stat--done strong {
  color: #34d399;
}
html[data-theme="light"] .task-board-stat {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.1);
}
.task-board-col-name {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.task-board-col-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.task-board-col--todo .task-board-col-header {
  color: #93c5fd;
}
.task-board-col--doing .task-board-col-header {
  color: #fbbf24;
}
.task-board-empty {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 4px;
  font-size: 12px;
  color: var(--muted);
  opacity: 0.85;
}
.task-board-empty-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  border: 1.5px dashed currentColor;
  opacity: 0.6;
}
.task-card {
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.task-card:hover {
  border-color: rgba(255, 106, 26, 0.3);
  box-shadow: 0 6px 18px rgba(2, 6, 23, 0.18);
}
.task-create-details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.task-create-summary-label {
  font-weight: 800;
}
.task-create-summary-hint {
  font-size: 12px;
  font-weight: 600;
}
.task-form-grid--extended .task-form-wide {
  grid-column: 1 / -1;
}

/* ── Kanban Inline Composer v1 (Patch) ───────────────────────────────────── */
.task-board-col-header-right {
  display: flex;
  align-items: center;
  gap: 5px;
}

.task-col-add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 6px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: transparent;
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
}

.task-col-add-btn:hover,
.task-col-add-btn:focus-visible {
  border-color: rgba(255, 138, 76, 0.55);
  color: #ff8a4c;
  background: rgba(255, 138, 76, 0.08);
  outline: none;
}

.task-inline-composer {
  border-style: dashed;
  border-color: rgba(148, 163, 184, 0.28);
  background: rgba(255, 255, 255, 0.03);
}

.task-inline-title {
  display: block;
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  padding: 2px 0 5px;
  margin-bottom: 10px;
  outline: none;
}

.task-inline-title::placeholder {
  color: var(--muted);
  font-weight: 400;
}

.task-inline-title:focus {
  border-bottom-color: #ff8a4c;
}

.task-inline-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

@keyframes task-inline-shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}

.task-inline-title--shake {
  animation: task-inline-shake 0.4s ease;
  border-bottom-color: #ef4444;
}

html[data-theme="light"] .task-col-add-btn {
  border-color: rgba(15, 23, 42, 0.18);
  color: rgba(15, 23, 42, 0.5);
}

html[data-theme="light"] .task-col-add-btn:hover,
html[data-theme="light"] .task-col-add-btn:focus-visible {
  border-color: #ff6a1a;
  color: #ff6a1a;
  background: rgba(255, 106, 26, 0.07);
}

html[data-theme="light"] .task-inline-title {
  color: #0f172a;
  border-bottom-color: rgba(15, 23, 42, 0.2);
}

html[data-theme="light"] .task-inline-composer {
  background: rgba(15, 23, 42, 0.02);
  border-color: rgba(15, 23, 42, 0.15);
}
/* ── Kanban Inline Composer v1.1 additions ───────────────────────────────── */
.task-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 4px;
}

.task-card-top .task-card-title {
  margin-bottom: 0;
  flex: 1 1 0;
  min-width: 0;
}

.task-card-menu-wrap {
  position: relative;
  flex-shrink: 0;
}

.task-card-menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 5px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.1s ease, background 0.1s ease;
}

.task-card:hover .task-card-menu-btn,
.task-card-menu-btn:focus-visible,
.task-card-menu-btn[aria-expanded="true"] {
  opacity: 1;
}

.task-card-menu-btn:hover,
.task-card-menu-btn[aria-expanded="true"] {
  background: rgba(148, 163, 184, 0.16);
  color: var(--ink);
}

.task-card-menu {
  position: absolute;
  top: calc(100% + 3px);
  right: 0;
  min-width: 110px;
  background: var(--surface-raised, var(--surface));
  border: 1px solid var(--border);
  border-radius: 7px;
  box-shadow: 0 4px 14px rgba(0,0,0,.2);
  z-index: 120;
  display: none;
  overflow: hidden;
}

.task-card-menu.open {
  display: block;
}

.task-card-menu-item {
  display: block;
  width: 100%;
  padding: 8px 12px;
  background: none;
  border: none;
  text-align: left;
  font-size: 12.5px;
  cursor: pointer;
  color: var(--ink);
}

.task-card-menu-item:hover,
.task-card-menu-item:focus-visible {
  background: var(--surface-hover, var(--surface-alt));
  outline: none;
}

.task-card-menu-item-danger {
  color: var(--danger, #e03);
}

.task-card-menu-item-danger:hover,
.task-card-menu-item-danger:focus-visible {
  background: rgba(238, 0, 51, 0.08);
}

.task-card-notes {
  display: block;
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.5;
  margin: 2px 0 6px;
  word-break: break-word;
  overflow: hidden;
  max-height: calc(1.5em * 2 + 2px);
}

.task-inline-notes {
  display: block;
  width: 100%;
  resize: vertical;
  min-height: 48px;
  max-height: 120px;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 0;
  color: var(--ink);
  font-size: 12.5px;
  font-family: inherit;
  padding: 4px 0 6px;
  margin-bottom: 8px;
  outline: none;
}

.task-inline-notes::placeholder {
  color: var(--muted);
}

.task-inline-notes:focus {
  border-bottom-color: rgba(255, 138, 76, 0.6);
}

.task-inline-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 8px;
}

.task-inline-select {
  flex: 1 1 80px;
  min-width: 0;
  font-size: 11.5px;
  padding: 3px 6px;
  border-radius: 6px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: rgba(255,255,255,0.05);
  color: var(--ink);
  cursor: pointer;
}

.task-inline-date {
  flex: 1 1 100px;
  min-width: 0;
  font-size: 11.5px;
  padding: 3px 6px;
  border-radius: 6px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: rgba(255,255,255,0.05);
  color: var(--ink);
}

html[data-theme="light"] .task-inline-select,
html[data-theme="light"] .task-inline-date {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.15);
  color: #0f172a;
}

html[data-theme="light"] .task-card-menu-btn {
  color: rgba(15, 23, 42, 0.5);
}

html[data-theme="light"] .task-card-menu-btn:hover {
  background: rgba(15, 23, 42, 0.07);
  color: #0f172a;
}
/* ── End Kanban Inline Composer ──────────────────────────────────────────── */

/* Workspace Task Core Polish v1.5 */
.workspace-focus-panel {
  margin-bottom: 18px;
  padding: 16px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 16px;
  background: rgba(15, 23, 42, 0.26);
}
.workspace-focus-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.workspace-focus-head h3 {
  margin: 2px 0 0;
  font-size: 16px;
  font-weight: 700;
}
.workspace-focus-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr) minmax(0, 0.95fr);
  gap: 10px;
}
.workspace-focus-card {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, 0.13);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
}
.workspace-focus-card > span {
  display: block;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}
.workspace-focus-card--blocked {
  border-color: rgba(245, 158, 11, 0.26);
  background: rgba(245, 158, 11, 0.055);
}
.workspace-focus-list {
  display: grid;
  gap: 8px;
}
.workspace-focus-task {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid rgba(148, 163, 184, 0.13);
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.22);
}
.workspace-focus-task.is-overdue,
.task-card.is-overdue,
.my-next-task-detail.is-overdue {
  border-color: rgba(239, 68, 68, 0.44);
  box-shadow: inset 3px 0 0 rgba(239, 68, 68, 0.82);
}
.workspace-focus-task.is-due-soon,
.task-card.is-due-soon,
.my-next-task-detail.is-due-soon {
  border-color: rgba(251, 191, 36, 0.36);
  box-shadow: inset 3px 0 0 rgba(251, 191, 36, 0.82);
}
.workspace-focus-task.is-blocked,
.task-card.is-blocked,
.my-next-task-detail.is-blocked {
  border-color: rgba(245, 158, 11, 0.44);
  box-shadow: inset 3px 0 0 rgba(245, 158, 11, 0.82);
}
.workspace-focus-task-main {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.workspace-focus-task-main strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
}
.workspace-focus-task-main span {
  font-size: 11.5px;
  color: var(--muted);
}
.workspace-focus-task-meta,
.my-next-task-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.workspace-focus-empty {
  padding: 10px;
  border: 1px dashed rgba(148, 163, 184, 0.22);
  border-radius: 10px;
}
.workspace-focus-empty strong {
  display: block;
  margin-bottom: 2px;
  font-size: 13px;
}
.workspace-focus-empty p {
  margin: 0;
  font-size: 12px;
}
/* ── Phase 4.1 Timeline Lite (read-only deadline view) ───────────────────── */
.workspace-timeline-lite {
  margin-bottom: 18px;
  padding: 16px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 16px;
  background: rgba(15, 23, 42, 0.26);
}
.timeline-helper-copy {
  margin: 0 0 12px;
  font-size: 12px;
}
.timeline-deadline-banner {
  display: grid;
  gap: 2px;
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-left: 3px solid var(--muted);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
}
.timeline-deadline-banner .eyebrow {
  font-size: 10.5px;
}
.timeline-deadline-banner strong {
  font-size: 15px;
  font-weight: 800;
}
.timeline-deadline-banner small {
  font-size: 11.5px;
  color: var(--muted);
}
.timeline-deadline-danger { border-left-color: #ef4444; }
.timeline-deadline-urgent { border-left-color: #f59e0b; }
.timeline-deadline-steady { border-left-color: #22c55e; }
.timeline-deadline-neutral { border-left-color: rgba(148, 163, 184, 0.5); }
.timeline-groups {
  display: grid;
  gap: 12px;
}
.timeline-group {
  min-width: 0;
}
.timeline-group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.timeline-group-name {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}
.timeline-group-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: rgba(148, 163, 184, 0.16);
  font-size: 10.5px;
  font-weight: 800;
  color: var(--muted);
}
.timeline-group--overdue .timeline-group-name { color: #ef4444; }
.timeline-group-list {
  display: grid;
  gap: 8px;
}
.timeline-group-empty {
  padding: 9px 10px;
  border: 1px dashed rgba(148, 163, 184, 0.22);
  border-radius: 10px;
  font-size: 12px;
  color: var(--muted);
}
.timeline-overflow-action {
  margin-top: 8px;
}
.timeline-group--completed summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.timeline-group--completed summary::-webkit-details-marker {
  display: none;
}
.timeline-group--completed[open] summary {
  margin-bottom: 8px;
}
html[data-theme="light"] .workspace-timeline-lite {
  background: rgba(15, 23, 42, 0.03);
  border-color: rgba(15, 23, 42, 0.09);
}
html[data-theme="light"] .timeline-deadline-banner {
  background: rgba(15, 23, 42, 0.02);
  border-color: rgba(15, 23, 42, 0.1);
}
.my-next-task-detail,
.my-next-task-empty {
  padding: 10px 11px;
  border: 1px solid rgba(148, 163, 184, 0.13);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
}
.my-next-task-empty strong {
  display: block;
  margin-bottom: 3px;
  font-size: 13px;
}
.my-next-task-empty p {
  margin: 0 0 8px;
}
.task-status-badge--todo {
  background: rgba(59, 130, 246, 0.14);
  color: #93c5fd;
  border: 1px solid rgba(59, 130, 246, 0.26);
}
.task-status-badge--in-progress {
  background: rgba(251, 191, 36, 0.14);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.28);
}
.task-status-badge--done {
  background: rgba(34, 197, 94, 0.14);
  color: #34d399;
  border: 1px solid rgba(34, 197, 94, 0.28);
}
.task-due-badge {
  display: inline-block;
  flex-shrink: 0;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
  background: rgba(148, 163, 184, 0.12);
  color: var(--muted);
}
.task-due-badge--overdue {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
}
.task-due-badge--today,
.task-due-badge--soon {
  background: rgba(251, 191, 36, 0.16);
  color: #fbbf24;
}
.task-board-stat--blocked strong,
.task-board-stat--urgent strong {
  color: #fbbf24;
}
.task-board-stats {
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: 620px;
}
.task-board-stat strong {
  overflow-wrap: anywhere;
  text-align: center;
}
.task-board-kanban {
  grid-template-columns: repeat(4, minmax(210px, 1fr));
  align-items: start;
}
.task-board-col {
  min-width: 0;
}
.task-card {
  min-width: 0;
}
.task-board-col--blocked .task-card {
  background: rgba(245, 158, 11, 0.055);
}
.task-board-col--done .task-card {
  opacity: 0.84;
}
.readiness-factor-details {
  margin-top: 10px;
}
.readiness-factor-details > summary {
  cursor: pointer;
  user-select: none;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--muted);
}
html[data-theme="light"] .workspace-focus-panel,
html[data-theme="light"] .workspace-focus-card,
html[data-theme="light"] .my-next-task-detail,
html[data-theme="light"] .my-next-task-empty {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.09);
}
html[data-theme="light"] .workspace-focus-task {
  background: #f8fafc;
  border-color: rgba(15, 23, 42, 0.08);
}
html[data-theme="light"] .workspace-focus-card--blocked,
html[data-theme="light"] .task-board-col--blocked .task-card {
  background: rgba(245, 158, 11, 0.055);
}
html[data-theme="light"] .task-status-badge--todo {
  color: #1d4ed8;
}
html[data-theme="light"] .task-status-badge--in-progress,
html[data-theme="light"] .task-due-badge--today,
html[data-theme="light"] .task-due-badge--soon {
  color: #92400e;
}
html[data-theme="light"] .task-status-badge--done {
  color: #047857;
}
html[data-theme="light"] .task-due-badge--overdue {
  color: #b91c1c;
}
@media (max-width: 1120px) {
  .workspace-focus-grid {
    grid-template-columns: 1fr;
  }
  .task-board-kanban {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 680px) {
  .workspace-focus-head {
    flex-direction: column;
  }
  .workspace-focus-head .button {
    width: 100%;
  }
  .task-board-kanban {
    grid-template-columns: 1fr;
  }
  .task-board-stats {
    max-width: none;
  }
}

/* ── Overview: demoted secondary details (data preserved, collapsed) ── */
.workspace-more-details {
  margin-top: 4px;
  padding: 0 16px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 16px;
  background: rgba(15, 23, 42, 0.22);
}
.workspace-more-details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 2px;
  cursor: pointer;
  user-select: none;
  list-style: none;
  font-size: 14px;
  font-weight: 800;
}
.workspace-more-details > summary::-webkit-details-marker {
  display: none;
}
.workspace-more-details > summary::after {
  content: "⌄";
  margin-left: auto;
  font-size: 16px;
  color: var(--muted);
  transition: transform .15s ease;
}
.workspace-more-details[open] > summary::after {
  transform: rotate(180deg);
}
.workspace-more-hint {
  font-weight: 600;
}
.workspace-more-details[open] {
  padding-bottom: 16px;
}
.workspace-more-details > section {
  margin-top: 14px;
}
html[data-theme="light"] .workspace-more-details {
  background: #f8fafc;
  border-color: rgba(15, 23, 42, 0.08);
}

/* ── Mobile safety: no horizontal overflow, footer clearance ── */
@media (max-width: 980px) {
  .task-board-head {
    gap: 10px;
  }
}
@media (max-width: 520px) {
  .workspace-statusbar {
    gap: 6px;
    padding-bottom: 10px;
  }
  .task-board-head-titles h3 {
    font-size: 18px;
  }
  .task-board-stats {
    width: 100%;
  }
  .task-board-stat {
    flex: 1;
  }
  .workspace-shell-v2 {
    padding-bottom: 24px;
  }
  .workspace-shell-v2,
  .workspace-body-grid,
  .workspace-shell-v2 .workspace-main,
  .workspace-shell-v2 .workspace-panel {
    max-width: 100%;
  }
  .workspace-shell-v2 .workspace-panel {
    overflow-x: hidden;
  }
}

/* =============================================================
   Team Workspace — Layout Stability Patch v1.2
   Single-scroll architecture. Lock the page behind the modal and
   make .workspace-main the only scroll area on desktop; the modal
   header/footer + status bar + sidebar stay fixed. Mobile keeps the
   single #modalBody scroll. CSS-only. Appended last.
   ============================================================= */

/* 1. Lock the page behind any open modal (overflow on body propagates
   to the viewport) — removes the duplicate page-level scrollbar. */
body.modal-open {
  overflow: hidden;
  overscroll-behavior: none;
}

.modal-overlay:not(.hidden) {
  overscroll-behavior: contain;
}

/* 2. Desktop: only the main content scrolls. Header/footer are already
   fixed (modal-card flex column). The status bar + sidebar are pinned. */
@media (min-width: 981px) {
  .team-workspace-fullscreen-modal #modalBody {
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .team-workspace-fullscreen-modal #modalBody > .workspace-shell-v2 {
    flex: 1 1 auto;
    min-height: 0;
    padding-bottom: 0;
  }
  .workspace-shell-v2 .workspace-statusbar {
    flex: 0 0 auto;
  }
  .workspace-shell-v2 .workspace-body-grid {
    flex: 1 1 auto;
    min-height: 0;
  }
  .workspace-shell-v2 .workspace-sidebar {
    position: static;
    align-self: stretch;
    min-height: 0;
    overflow-y: auto;
  }
  .workspace-shell-v2 .workspace-main {
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 18px;
    scrollbar-gutter: stable;
  }
}

/* =============================================================
   W2G Design v2 Phase 1 -- CSS-only visual foundation
   -------------------------------------------------------------
   Final override block. Tokens + existing primitives only:
   no markup, route, auth, API, task, matching, or role changes.
   ============================================================= */

:root {
  color-scheme: light;

  --w2g-bg: #F6F7F9;
  --w2g-surface: #FFFFFF;
  --w2g-surface-2: #F1F3F6;
  --w2g-surface-3: #E8EBF0;
  --w2g-line: #E5E8EC;
  --w2g-line-strong: #D6DAE1;

  --w2g-ink: #0C1019;
  --w2g-ink-2: #1E2531;
  --w2g-body: #424A58;
  --w2g-muted: #6B7382;
  --w2g-faint: #98A0AE;

  --w2g-orange: #EA580C;
  --w2g-orange-strong: #C2410C;
  --w2g-orange-soft: #FFF1E8;
  --w2g-orange-line: #FBD9C4;
  --w2g-orange-ink: #B7400B;

  --w2g-match-strong: #15A34A;
  --w2g-match-good: #19A349;
  --w2g-match-fair: #C98A12;
  --w2g-match-low: #8A93A2;
  --w2g-match-track: #E8EBF0;
  --w2g-match-soft: #E7F6EC;
  --w2g-match-ink: #0F7A38;
  --w2g-match-fair-ink: #8A5D09;

  --w2g-success: #15A34A;
  --w2g-warning: #C98A12;
  --w2g-danger: #DC2626;
  --w2g-info: #2563EB;

  --w2g-r-xs: 8px;
  --w2g-r-sm: 10px;
  --w2g-r-md: 12px;
  --w2g-r-lg: 14px;
  --w2g-r-xl: 18px;
  --w2g-r-pill: 999px;

  --w2g-shadow-sm: 0 1px 2px rgba(12, 16, 25, 0.05);
  --w2g-shadow-md: 0 2px 8px rgba(12, 16, 25, 0.06);
  --w2g-shadow-pop: 0 8px 24px rgba(12, 16, 25, 0.12);
  --w2g-focus: 0 0 0 3px rgba(234, 88, 12, 0.18);

  --w2g-text-h1: 26px;
  --w2g-text-h2: 20px;
  --w2g-text-h3: 16px;
  --w2g-text-base: 14px;
  --w2g-text-sm: 13px;
  --w2g-text-xs: 11.5px;

  --bg: var(--w2g-bg);
  --surface: var(--w2g-surface);
  --surface-2: var(--w2g-surface-2);
  --surface-3: var(--w2g-surface-3);
  --border: var(--w2g-line);
  --line: var(--w2g-line);
  --ink: var(--w2g-ink);
  --ink-2: var(--w2g-ink-2);
  --body: var(--w2g-body);
  --muted: var(--w2g-muted);
  --orange: var(--w2g-orange);
  --orange-dark: var(--w2g-orange-strong);
  --orange-soft: var(--w2g-orange-soft);
  --orange-soft-2: var(--w2g-orange-line);
  --polish-glass-bg: rgba(255, 255, 255, 0.92);
  --polish-glass-border: var(--w2g-line);
  --polish-card-shadow: var(--w2g-shadow-sm);
  --polish-card-shadow-hover: var(--w2g-shadow-md);
  --polish-orange-shadow: 0 6px 14px rgba(234, 88, 12, 0.14);
  --polish-orange-glow: var(--w2g-focus);
  --polish-text-strong: var(--w2g-ink);
  --polish-text-body: var(--w2g-body);
  --polish-text-muted: var(--w2g-muted);
}

html[data-theme="dark"] {
  color-scheme: dark;

  --w2g-bg: #0A0C11;
  --w2g-surface: #14171E;
  --w2g-surface-2: #1B1F27;
  --w2g-surface-3: #242A35;
  --w2g-line: rgba(255, 255, 255, 0.08);
  --w2g-line-strong: rgba(255, 255, 255, 0.14);

  --w2g-ink: #F3F5F8;
  --w2g-ink-2: #DDE2EA;
  --w2g-body: #B9C0CC;
  --w2g-muted: #828B9A;
  --w2g-faint: #5A6373;

  --w2g-orange: #F97316;
  --w2g-orange-strong: #FB8C3E;
  --w2g-orange-soft: rgba(249, 115, 22, 0.14);
  --w2g-orange-line: rgba(249, 115, 22, 0.30);
  --w2g-orange-ink: #FCA968;

  --w2g-match-strong: #2BB35E;
  --w2g-match-good: #33C26B;
  --w2g-match-fair: #D6A22B;
  --w2g-match-low: #6B7382;
  --w2g-match-track: rgba(255, 255, 255, 0.09);
  --w2g-match-soft: rgba(43, 179, 94, 0.14);
  --w2g-match-ink: #6FD79A;
  --w2g-match-fair-ink: #D6A22B;

  --w2g-success: #2BB35E;
  --w2g-warning: #D6A22B;
  --w2g-danger: #F26464;
  --w2g-info: #5B93F5;

  --w2g-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30);
  --w2g-shadow-md: 0 2px 10px rgba(0, 0, 0, 0.36);
  --w2g-shadow-pop: 0 10px 30px rgba(0, 0, 0, 0.46);
  --w2g-focus: 0 0 0 3px rgba(249, 115, 22, 0.26);

  --bg: var(--w2g-bg);
  --surface: var(--w2g-surface);
  --surface-2: var(--w2g-surface-2);
  --surface-3: var(--w2g-surface-3);
  --border: var(--w2g-line);
  --line: var(--w2g-line);
  --ink: var(--w2g-ink);
  --ink-2: var(--w2g-ink-2);
  --body: var(--w2g-body);
  --muted: var(--w2g-muted);
  --orange: var(--w2g-orange);
  --orange-dark: var(--w2g-orange-strong);
  --orange-soft: var(--w2g-orange-soft);
  --orange-soft-2: var(--w2g-orange-line);
  --polish-glass-bg: rgba(20, 23, 30, 0.94);
  --polish-glass-border: var(--w2g-line);
  --polish-card-shadow: var(--w2g-shadow-sm);
  --polish-card-shadow-hover: var(--w2g-shadow-md);
  --polish-orange-shadow: 0 6px 16px rgba(249, 115, 22, 0.18);
  --polish-orange-glow: var(--w2g-focus);
  --polish-text-strong: var(--w2g-ink);
  --polish-text-body: var(--w2g-body);
  --polish-text-muted: var(--w2g-muted);
}

body,
body[data-page="app"],
body[data-page="login"],
body.onboarding-page {
  background: var(--w2g-bg) !important;
  color: var(--w2g-body);
  font-size: var(--w2g-text-base);
  letter-spacing: 0;
}

body::before,
body::after,
.auth-form-orb,
.auth-card-glow,
.auth-decor,
.hero-product-preview::before,
.hero-product-preview::after,
.form-card.auth-card-redesign::before,
.form-card.auth-card-redesign::after {
  opacity: 0 !important;
}

h1, h2, h3, h4,
.section-title-row h1,
.section-title-row h2,
.item-title,
.dashboard-feature-card h3,
.workspace-section h3,
.modal-header h2 {
  color: var(--w2g-ink);
  letter-spacing: 0;
}

p,
.muted,
.item-meta,
.field-help,
.small-copy,
.score-meter-helper {
  color: var(--w2g-muted);
}

*:focus-visible {
  outline: 2px solid var(--w2g-orange);
  outline-offset: 2px;
  box-shadow: var(--w2g-focus);
}

.button,
button.button,
a.button,
.mobile-menu-button,
.mobile-drawer-auth-btn,
.mobile-drawer-feedback-btn,
.notification-button,
.theme-toggle,
.language-switch button,
.tabs button,
.workspace-tabs button,
.hub-filter-chip {
  border-radius: var(--w2g-r-sm);
  font-weight: 700;
  letter-spacing: 0;
  box-shadow: none;
  transition: background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease, box-shadow 0.14s ease, transform 0.14s ease;
}

.button.primary,
a.button.primary,
button.button.primary {
  background: var(--w2g-orange);
  border-color: var(--w2g-orange);
  color: #FFFFFF;
  box-shadow: var(--polish-orange-shadow);
}

.button.primary:hover,
a.button.primary:hover,
button.button.primary:hover {
  background: var(--w2g-orange-strong);
  border-color: var(--w2g-orange-strong);
  transform: translateY(-1px);
}

.button.secondary,
.button.outline,
.button.ghost,
.filter-toggle,
.text-link {
  background: var(--w2g-surface);
  border-color: var(--w2g-line);
  color: var(--w2g-ink-2);
}

.button.secondary:hover,
.button.outline:hover,
.button.ghost:hover,
.filter-toggle:hover,
.text-link:hover {
  background: var(--w2g-surface-2);
  border-color: var(--w2g-line-strong);
  color: var(--w2g-ink);
}

.button.danger,
.button.danger.ghost:hover {
  border-color: rgba(220, 38, 38, 0.30);
  color: var(--w2g-danger);
}

.button.success,
.button.success:hover {
  background: var(--w2g-success);
  border-color: var(--w2g-success);
  color: #FFFFFF;
}

.topbar,
.simple-header,
.main-nav.open,
.auth-actions.open {
  background: var(--polish-glass-bg) !important;
  border-color: var(--w2g-line) !important;
  box-shadow: var(--w2g-shadow-sm);
}

.brand-mark {
  background: var(--w2g-orange);
  border-radius: var(--w2g-r-sm);
  box-shadow: none;
}

.main-nav button,
.main-nav.open button {
  border-radius: var(--w2g-r-sm);
  color: var(--w2g-body);
}

.main-nav button:hover,
.main-nav.open button:hover {
  background: var(--w2g-surface-2);
  color: var(--w2g-ink);
}

.main-nav button.active,
.main-nav.open button.active {
  background: var(--w2g-orange-soft) !important;
  color: var(--w2g-orange-ink) !important;
  box-shadow: inset 0 0 0 1px var(--w2g-orange-line);
}

.page-shell,
.onboarding-shell,
.auth-shell {
  color: var(--w2g-body);
}

.content-card,
.info-card,
.item-card,
.form-card,
.modal-card,
.preview-panel,
.landing-stat,
.feature-card,
.section-block,
.list-row,
.saved-row,
.request-row,
.dashboard-feature-card,
.dashboard-action-panel,
.profile-identity-card,
.activity-metric,
.team-locked-state,
.team-locked-card,
.discovery-shell,
.competition-card,
.team-polished-card,
.member-polished-card,
.empty-state,
.filter-drawer,
.competition-filter-shell,
.team-filter-shell,
.member-filter-shell,
.workspace-section,
.workspace-panel,
.workspace-shell-v2 .workspace-sidebar,
.workspace-shell-v2 .workspace-main,
.workspace-shell-v2 .mission-header,
.workspace-shell-v2 .my-next-task-card,
.workspace-shell-v2 .workspace-readiness-v1,
.workspace-focus-panel,
.workspace-focus-card,
.workspace-more-details,
.task-board-col,
.task-card,
.team-message,
.chat-bubble,
.quick-team-chat-row,
.quick-team-status-card,
.recruitment-queue-section,
.queue-col,
.queue-row {
  background: var(--w2g-surface) !important;
  border-color: var(--w2g-line) !important;
  border-radius: var(--w2g-r-lg);
  box-shadow: var(--w2g-shadow-sm) !important;
}

.item-card:hover,
.content-card:hover,
.discovery-shell:hover,
.competition-card:hover,
.team-polished-card:hover,
.member-polished-card:hover {
  border-color: var(--w2g-line-strong) !important;
  box-shadow: var(--w2g-shadow-md) !important;
}

.landing-hero,
.hero-product-preview,
.auth-info-panel,
.auth-form-panel,
.onboarding-side {
  background: transparent !important;
  box-shadow: none !important;
}

.tag,
.chip,
.mini-chip,
.status-badge,
.status-pill,
.task-status-badge,
.task-due-badge,
.member-role-pill,
.wch-tag,
.competition-status-badge,
.feedback-type-badge,
.feedback-severity-badge {
  border-radius: var(--w2g-r-pill);
  letter-spacing: 0;
  font-weight: 700;
  background: var(--w2g-surface-2);
  border: 1px solid var(--w2g-line);
  color: var(--w2g-body);
  box-shadow: none;
}

.tag.gray,
.mini-chip,
.status-pill.neutral,
.status-badge.neutral {
  background: var(--w2g-surface-2);
  color: var(--w2g-muted);
}

.tag:not(.gray),
.chip:not(.gray),
.member-role-pill.owner,
.wch-tag--role {
  background: var(--w2g-orange-soft);
  border-color: var(--w2g-orange-line);
  color: var(--w2g-orange-ink);
}

.status-approved,
.status-open,
.status-success,
.status-pill.accepted,
.status-pill.status-open,
.status-badge.feedback-status-resolved,
.task-status-badge--done,
.wch-tag--ok,
.wch-tag--open {
  background: var(--w2g-match-soft) !important;
  border-color: rgba(21, 163, 74, 0.24) !important;
  color: var(--w2g-match-ink) !important;
}

.status-pending,
.status-review,
.status-warning,
.task-status-badge--in-progress,
.task-due-badge--today,
.task-due-badge--soon,
.wch-tag--alert {
  background: rgba(201, 138, 18, 0.12) !important;
  border-color: rgba(201, 138, 18, 0.24) !important;
  color: var(--w2g-warning) !important;
}

.status-rejected,
.status-closed,
.status-danger,
.task-due-badge--overdue,
.competition-status-badge.status-closed {
  background: rgba(220, 38, 38, 0.10) !important;
  border-color: rgba(220, 38, 38, 0.22) !important;
  color: var(--w2g-danger) !important;
}

input,
select,
textarea,
.multi-select-trigger,
.multi-select-menu,
.province-combobox-input,
.province-combobox-menu,
.university-select-trigger,
.university-select-menu {
  background: var(--w2g-surface) !important;
  border-color: var(--w2g-line) !important;
  border-radius: var(--w2g-r-sm);
  color: var(--w2g-ink);
  box-shadow: none !important;
}

input:hover,
select:hover,
textarea:hover,
.multi-select-trigger:hover,
.province-combobox-input:hover,
.university-select-trigger:hover {
  border-color: var(--w2g-line-strong) !important;
}

input:focus,
select:focus,
textarea:focus,
.multi-select-field.open .multi-select-trigger,
.province-combobox-input:focus,
.university-select-trigger:focus {
  border-color: var(--w2g-orange) !important;
  box-shadow: var(--w2g-focus) !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--w2g-faint);
}

.filter-toolbar,
.filters-panel,
.active-filter-row,
.filter-actions,
.dashboard-request-tabs,
.recruitment-hub-bar {
  background: var(--w2g-surface-2) !important;
  border-color: var(--w2g-line) !important;
  border-radius: var(--w2g-r-lg);
  box-shadow: none !important;
}

.filter-search-field,
.filter-sort-field,
.filters-panel label,
.field-block,
.stack label {
  color: var(--w2g-body);
}

.score-meter,
.readiness-meter,
.team-hub-meter,
.mini-progress,
.competition-score-meter,
.discovery-score-meter {
  background: var(--w2g-surface-2) !important;
  border: 1px solid var(--w2g-line) !important;
  border-radius: var(--w2g-r-md);
  box-shadow: none !important;
}

.score-meter-label,
.readiness-meter-label {
  color: var(--w2g-muted);
  letter-spacing: 0;
}

.score-meter-label strong,
.readiness-meter-label strong,
.team-hub-meter strong {
  color: var(--w2g-match-ink);
}

.score-meter-track,
.readiness-meter-track,
.team-hub-meter > div,
.mini-progress {
  background: var(--w2g-match-track) !important;
  border-radius: var(--w2g-r-pill);
  overflow: hidden;
}

.score-meter-track span,
.readiness-meter-track span,
.team-hub-meter i,
.mini-progress i,
.workspace-compact-progress .mini-progress i,
.workspace-sidebar-progress .mini-progress i {
  background: linear-gradient(90deg, var(--w2g-match-good), var(--w2g-match-strong)) !important;
  border-radius: var(--w2g-r-pill);
  box-shadow: none !important;
}

.readiness-almost .readiness-meter-track span {
  background: linear-gradient(90deg, var(--w2g-match-fair), var(--w2g-match-good)) !important;
}

.match-reasons,
.score-explainer,
.match-feedback-lite,
.match-reason,
.decision-snapshot,
.team-decision-snapshot,
.member-decision-snapshot,
.discovery-summary-panel,
.collapsible-copy,
.score-pill-explained {
  background: var(--w2g-surface-2) !important;
  border-color: var(--w2g-line) !important;
  border-radius: var(--w2g-r-md);
  box-shadow: none !important;
}

.match-reason {
  color: var(--w2g-body);
}

.match-reason.strength,
.match-reason.strength .match-reason-icon {
  color: var(--w2g-match-ink) !important;
}

.match-reason.gap,
.match-reason.gap .match-reason-icon {
  color: var(--w2g-match-fair-ink) !important;
}

.match-reason.action,
.match-reason.action .match-reason-icon {
  color: var(--w2g-orange-ink) !important;
}

.match-reason-icon,
.score-explainer-icon {
  background: var(--w2g-surface) !important;
  border: 1px solid var(--w2g-line);
}

.competition-poster,
.competition-poster-shell,
.poster-placeholder,
.avatar,
.member-avatar,
.university-logo-fallback {
  border-radius: var(--w2g-r-sm);
  box-shadow: none !important;
}

.discovery-meta-row,
.discovery-shell-top,
.discovery-actions-stack,
.card-actions,
.competition-card-actions,
.dashboard-request-preview-row,
.workspace-action-row,
.request-history-row,
.member-line,
.team-member-card,
.team-workspace-row {
  border-color: var(--w2g-line) !important;
}

.empty-state {
  color: var(--w2g-muted);
  text-align: left;
}

.empty-state::before {
  background: var(--w2g-surface-2) !important;
  border: 1px solid var(--w2g-line);
  color: var(--w2g-orange);
  box-shadow: none !important;
}

.empty-state strong {
  color: var(--w2g-ink);
}

.workspace-shell-v2 {
  background: var(--w2g-surface-2) !important;
  border-color: var(--w2g-line) !important;
  border-radius: var(--w2g-r-xl);
  box-shadow: none !important;
}

.workspace-statusbar,
.workspace-main-topbar,
.workspace-sidebar-foot {
  background: var(--w2g-surface) !important;
  border-color: var(--w2g-line) !important;
  box-shadow: none !important;
}

.workspace-shell-v2 .workspace-sidebar-nav button {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--w2g-body);
  box-shadow: none !important;
}

.workspace-shell-v2 .workspace-sidebar-nav button:hover {
  background: var(--w2g-surface-2) !important;
  color: var(--w2g-ink);
}

.workspace-shell-v2 .workspace-sidebar-nav button.active {
  background: var(--w2g-orange-soft) !important;
  border-color: var(--w2g-orange-line) !important;
  color: var(--w2g-orange-ink) !important;
}

.mission-header,
.workspace-focus-head,
.task-board-head,
.workspace-chat-heading,
.workspace-actions-hero {
  border-color: var(--w2g-line) !important;
}

.task-board-kanban {
  gap: 12px;
}

.task-board-col {
  background: var(--w2g-surface-2) !important;
}

.task-board-col-header {
  background: transparent !important;
  border-color: var(--w2g-line) !important;
  color: var(--w2g-ink);
}

.task-card {
  background: var(--w2g-surface) !important;
  border-radius: var(--w2g-r-md);
}

.task-card-title,
.task-card strong,
.workspace-focus-task-main strong {
  color: var(--w2g-ink);
}

.task-card-meta,
.task-board-empty,
.workspace-focus-task-main span {
  color: var(--w2g-muted);
}

.task-board-col--blocked,
.task-board-col--blocked .task-card,
.workspace-focus-card--blocked {
  background: rgba(201, 138, 18, 0.08) !important;
}

.task-board-col--done .task-card {
  opacity: 0.86;
}

.team-workspace-fullscreen-modal .workspace-chat-list,
.quick-team-chat-messages,
.team-board,
.task-board {
  background: var(--w2g-surface-2) !important;
  border-color: var(--w2g-line) !important;
}

.chat-message-row.mine .chat-bubble {
  background: var(--w2g-orange-soft) !important;
  border-color: var(--w2g-orange-line) !important;
}

.chat-message-row.theirs .chat-bubble {
  background: var(--w2g-surface) !important;
}

.modal-overlay {
  background: rgba(12, 16, 25, 0.54);
  backdrop-filter: blur(6px);
}

.modal-card {
  background: var(--w2g-surface) !important;
}

.modal-header,
.modal-footer {
  background: var(--w2g-surface) !important;
  border-color: var(--w2g-line) !important;
}

.toast,
.message {
  border-radius: var(--w2g-r-md);
  border-color: var(--w2g-line);
  box-shadow: var(--w2g-shadow-pop);
}

html[data-theme="dark"] .content-card,
html[data-theme="dark"] .info-card,
html[data-theme="dark"] .item-card,
html[data-theme="dark"] .form-card,
html[data-theme="dark"] .modal-card,
html[data-theme="dark"] .preview-panel,
html[data-theme="dark"] .landing-stat,
html[data-theme="dark"] .feature-card,
html[data-theme="dark"] .section-block,
html[data-theme="dark"] .empty-state,
html[data-theme="dark"] .filter-drawer,
html[data-theme="dark"] .competition-filter-shell,
html[data-theme="dark"] .team-filter-shell,
html[data-theme="dark"] .member-filter-shell,
html[data-theme="dark"] .workspace-section,
html[data-theme="dark"] .workspace-panel,
html[data-theme="dark"] .workspace-shell-v2 .workspace-sidebar,
html[data-theme="dark"] .workspace-shell-v2 .workspace-main,
html[data-theme="dark"] .task-card,
html[data-theme="dark"] .chat-bubble {
  background: var(--w2g-surface) !important;
  border-color: var(--w2g-line) !important;
}

html[data-theme="dark"] .filter-toolbar,
html[data-theme="dark"] .filters-panel,
html[data-theme="dark"] .active-filter-row,
html[data-theme="dark"] .filter-actions,
html[data-theme="dark"] .task-board-col,
html[data-theme="dark"] .team-workspace-fullscreen-modal .workspace-chat-list,
html[data-theme="dark"] .quick-team-chat-messages,
html[data-theme="dark"] .team-board,
html[data-theme="dark"] .task-board,
html[data-theme="dark"] .match-reasons,
html[data-theme="dark"] .score-explainer,
html[data-theme="dark"] .match-feedback-lite,
html[data-theme="dark"] .decision-snapshot {
  background: var(--w2g-surface-2) !important;
  border-color: var(--w2g-line) !important;
}

/* Blocked / Need help — dark theme warning parity. The generic dark-theme
   surface resets above (html[data-theme="dark"] .task-board-col / .task-card)
   outrank the light-theme amber tint by specificity, so without this the
   blocked column and its cards render as plain neutral surfaces in dark mode. */
html[data-theme="dark"] .task-board-col.task-board-col--blocked {
  background: rgba(201, 138, 18, 0.12) !important;
  border-color: rgba(201, 138, 18, 0.30) !important;
}

html[data-theme="dark"] .task-card[data-task-status="blocked"] {
  background: rgba(201, 138, 18, 0.16) !important;
  border-color: rgba(201, 138, 18, 0.38) !important;
}

@media (max-width: 760px) {
  .button,
  .filter-toggle,
  input,
  select,
  textarea {
    min-height: 44px;
  }

  .filter-toolbar,
  .filters-panel,
  .discovery-actions-stack,
  .competition-card-actions,
  .workspace-chat-composer,
  .task-board-head {
    gap: 10px;
  }

  .item-card,
  .discovery-shell,
  .competition-card,
  .team-polished-card,
  .member-polished-card,
  .content-card,
  .workspace-section {
    border-radius: var(--w2g-r-md);
  }
}

/* =============================================================
   W2G Design v2 Phase 2 -- App shell and screen structure
   -------------------------------------------------------------
   Scoped to logged-in app pages via body.app-shell-v2.
   Keeps route IDs, data-route hooks, drawers, and all business
   logic intact.
   ============================================================= */

body.app-shell-v2 {
  min-height: 100vh;
  background: var(--w2g-bg) !important;
}

body.app-shell-v2 .topbar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 90;
  width: 264px;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  padding: 20px 14px 16px;
  background: var(--w2g-surface) !important;
  border-right: 1px solid var(--w2g-line) !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  overflow: hidden;
}

body.app-shell-v2 .topbar .brand {
  width: 100%;
  min-width: 0;
  padding: 4px 8px 14px;
  border-bottom: 1px solid var(--w2g-line);
}

body.app-shell-v2 .topbar .brand-mark {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 10px;
  font-size: 13px;
}

body.app-shell-v2 .topbar .brand strong {
  font-size: 13.5px;
  line-height: 1.2;
  letter-spacing: 0;
}

body.app-shell-v2 .topbar .brand small {
  max-width: 160px;
  color: var(--w2g-muted);
  line-height: 1.35;
}

body.app-shell-v2 .mobile-menu-button {
  display: none;
}

body.app-shell-v2 .main-nav {
  display: flex !important;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}

body.app-shell-v2 .main-nav .mobile-nav-extras,
body.app-shell-v2 .main-nav .mobile-nav-auth,
body.app-shell-v2 .main-nav .mobile-drawer-feedback-btn {
  display: none;
}

body.app-shell-v2 .shell-nav-scroll {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
  padding: 2px 2px 10px;
  scrollbar-width: thin;
}

body.app-shell-v2 .shell-nav-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

body.app-shell-v2 .shell-nav-group-label {
  padding: 8px 10px 4px;
  color: var(--w2g-faint);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

body.app-shell-v2 .shell-nav-group-items {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

body.app-shell-v2 .main-nav .shell-nav-item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  width: 100%;
  min-height: 38px;
  gap: 9px;
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent !important;
  color: var(--w2g-body);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  box-shadow: none !important;
}

body.app-shell-v2 .shell-nav-icon {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 8px;
  background: var(--w2g-surface-2);
  color: var(--w2g-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0;
}

body.app-shell-v2 .shell-nav-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.app-shell-v2 .shell-nav-badge {
  min-width: 22px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--w2g-surface-2);
  border: 1px solid var(--w2g-line);
  color: var(--w2g-muted);
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}

body.app-shell-v2 .main-nav .shell-nav-item:hover {
  background: var(--w2g-surface-2) !important;
  color: var(--w2g-ink);
}

body.app-shell-v2 .main-nav .shell-nav-item:hover .shell-nav-icon {
  color: var(--w2g-ink-2);
}

body.app-shell-v2 .main-nav .shell-nav-item.active {
  background: var(--w2g-orange-soft) !important;
  border-color: var(--w2g-orange-line);
  color: var(--w2g-orange-ink) !important;
}

body.app-shell-v2 .main-nav .shell-nav-item.active .shell-nav-icon {
  background: var(--w2g-orange);
  color: #FFFFFF;
}

body.app-shell-v2 .main-nav .shell-nav-item.active .shell-nav-badge {
  background: var(--w2g-surface);
  border-color: var(--w2g-orange-line);
  color: var(--w2g-orange-ink);
}

body.app-shell-v2 .shell-account-panel {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 8px;
  padding: 12px 8px 0;
  border-top: 1px solid var(--w2g-line);
}

body.app-shell-v2 .shell-account-main,
body.app-shell-v2 .shell-account-team {
  width: 100%;
  border: 1px solid var(--w2g-line);
  border-radius: 12px;
  background: var(--w2g-surface-2);
  color: var(--w2g-body);
  box-shadow: none;
}

body.app-shell-v2 .shell-account-main {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 9px;
  text-align: left;
}

body.app-shell-v2 .shell-account-avatar {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  background: var(--w2g-orange-soft);
  color: var(--w2g-orange-ink);
  font-size: 12px;
  font-weight: 800;
}

body.app-shell-v2 .shell-account-copy {
  min-width: 0;
}

body.app-shell-v2 .shell-account-copy strong,
body.app-shell-v2 .shell-account-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.app-shell-v2 .shell-account-copy strong {
  color: var(--w2g-ink);
  font-size: 13px;
}

body.app-shell-v2 .shell-account-copy small,
body.app-shell-v2 .shell-account-team {
  color: var(--w2g-muted);
  font-size: 11.5px;
  font-weight: 700;
}

body.app-shell-v2 .shell-account-team {
  padding: 8px 10px;
  text-align: left;
}

body.app-shell-v2 .auth-actions {
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: 1fr auto auto;
  width: 100%;
  gap: 8px;
  padding: 12px 8px 0;
  border-top: 1px solid var(--w2g-line);
  background: transparent !important;
  box-shadow: none !important;
}

body.app-shell-v2 .auth-actions .language-switch {
  grid-column: 1 / -1;
  width: 100%;
  justify-content: stretch;
}

body.app-shell-v2 .auth-actions .language-switch button {
  flex: 1 1 0;
}

body.app-shell-v2 .auth-actions .theme-toggle,
body.app-shell-v2 .auth-actions .notification-button,
body.app-shell-v2 .auth-actions #logoutButton {
  min-height: 38px;
}

body.app-shell-v2 .auth-actions #logoutButton {
  grid-column: 1 / -1;
  width: 100%;
}

body.app-shell-v2 .auth-actions #loginShortcut,
body.app-shell-v2 .auth-actions #signupShortcut {
  display: none !important;
}

body.app-shell-v2 .page-shell {
  width: auto;
  max-width: none;
  min-height: 100vh;
  margin-left: 264px;
  padding: 24px clamp(24px, 4vw, 46px) 88px;
}

body.app-shell-v2 .page-shell > .view {
  max-width: 1180px;
  margin: 0 auto;
}

body.app-shell-v2 .page-shell > .view.active-view {
  display: block;
}

body.app-shell-v2 #home.view,
body.app-shell-guest #home.view {
  max-width: 1180px;
}

body.app-shell-v2 .app-shell-context-bar {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  max-width: 1180px;
  margin: 0 auto 22px;
  padding: 13px 16px;
  border: 1px solid var(--w2g-line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--w2g-surface) 94%, transparent);
  box-shadow: var(--w2g-shadow-sm);
  backdrop-filter: blur(12px);
}

body.app-shell-v2 .app-shell-context-copy {
  min-width: 0;
}

body.app-shell-v2 .app-shell-context-copy span {
  display: block;
  margin-bottom: 2px;
  color: var(--w2g-muted);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

body.app-shell-v2 .app-shell-context-copy strong {
  display: block;
  color: var(--w2g-ink);
  font-size: 17px;
  line-height: 1.2;
}

body.app-shell-v2 .app-shell-context-copy p {
  margin: 2px 0 0;
  color: var(--w2g-muted);
  font-size: 13px;
}

body.app-shell-v2 .app-shell-context-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
}

body.app-shell-v2 .app-shell-search-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 220px;
  justify-content: space-between;
  padding: 8px 10px 8px 12px;
  border: 1px solid var(--w2g-line);
  border-radius: 12px;
  background: var(--w2g-surface-2);
  color: var(--w2g-muted);
  font-size: 13px;
  font-weight: 600;
  box-shadow: none;
}

body.app-shell-v2 .app-shell-search-button small {
  display: grid;
  min-width: 23px;
  height: 23px;
  place-items: center;
  border: 1px solid var(--w2g-line);
  border-radius: 7px;
  background: var(--w2g-surface);
  color: var(--w2g-muted);
  font-size: 11px;
  font-weight: 800;
}

body.app-shell-v2 .app-shell-context-pill {
  max-width: 220px;
  overflow: hidden;
  padding: 7px 10px;
  border: 1px solid var(--w2g-line);
  border-radius: 999px;
  background: var(--w2g-surface-2);
  color: var(--w2g-body);
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.app-shell-v2 #home .landing-hero,
body.app-shell-v2 #home .landing-stats-strip,
body.app-shell-v2 #home .landing-section,
body.app-shell-v2 #home .how-it-works,
body.app-shell-v2 #home .organizer-cta,
body.app-shell-v2 #home .landing-footer {
  display: none !important;
}

/* Hide old landing page for guest V2 — guest #home shows the V2 surface instead */
body.app-shell-guest #home .landing-hero,
body.app-shell-guest #home .landing-stats-strip,
body.app-shell-guest #home .landing-section,
body.app-shell-guest #home .how-it-works,
body.app-shell-guest #home .organizer-cta,
body.app-shell-guest #home .landing-footer {
  display: none !important;
}

body:not(.app-shell-v2):not(.app-shell-guest) .home-mission-v2 {
  display: none !important;
}

body.app-shell-v2 .home-mission-v2 {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

body.app-shell-guest .home-mission-v2 {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

body.app-shell-v2 .home-mission-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding: 24px;
  border: 1px solid var(--w2g-line);
  border-radius: 18px;
  background: var(--w2g-surface);
  box-shadow: var(--w2g-shadow-sm);
}

body.app-shell-v2 .home-mission-head h1 {
  margin: 4px 0 6px;
  color: var(--w2g-ink);
  font-size: 28px;
  line-height: 1.12;
  letter-spacing: 0;
}

body.app-shell-v2 .home-mission-head p {
  max-width: 58ch;
  margin: 0;
}

body.app-shell-v2 .home-mission-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

body.app-shell-v2 .home-mission-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

body.app-shell-v2 .home-mission-stat {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
  padding: 15px;
  border: 1px solid var(--w2g-line);
  border-radius: 14px;
  background: var(--w2g-surface);
  box-shadow: var(--w2g-shadow-sm);
}

body.app-shell-v2 .home-mission-stat[role="button"] {
  cursor: pointer;
}

body.app-shell-v2 .home-mission-stat[role="button"]:hover {
  border-color: var(--w2g-orange-line);
  background: var(--w2g-orange-soft);
}

body.app-shell-v2 .home-mission-stat span,
body.app-shell-v2 .home-mission-stat small {
  color: var(--w2g-muted);
  font-size: 12px;
  font-weight: 700;
}

body.app-shell-v2 .home-mission-stat strong {
  overflow: hidden;
  color: var(--w2g-ink);
  font-size: 24px;
  line-height: 1.12;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.app-shell-v2 .home-mission-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
}

body.app-shell-v2 .home-mission-card {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--w2g-line);
  border-radius: 16px;
  background: var(--w2g-surface);
  box-shadow: var(--w2g-shadow-sm);
}

body.app-shell-v2 .home-mission-card h3 {
  margin: 6px 0 6px;
  color: var(--w2g-ink);
  font-size: 18px;
  line-height: 1.25;
}

body.app-shell-v2 .home-mission-card p {
  margin: 0 0 12px;
  color: var(--w2g-muted);
  font-size: 13px;
  line-height: 1.5;
}

body.app-shell-v2 .home-mission-task-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

body.app-shell-v2 .home-mission-task-row,
body.app-shell-v2 .home-mission-empty {
  padding: 10px 11px;
  border: 1px solid var(--w2g-line);
  border-radius: 12px;
  background: var(--w2g-surface-2);
}

body.app-shell-v2 .home-mission-task-row span,
body.app-shell-v2 .home-mission-task-row small {
  display: block;
  color: var(--w2g-muted);
  font-size: 11.5px;
  font-weight: 700;
}

body.app-shell-v2 .home-mission-task-row strong,
body.app-shell-v2 .home-mission-empty strong {
  display: block;
  color: var(--w2g-ink);
  font-size: 13px;
  line-height: 1.35;
}

body.app-shell-v2 .home-mission-empty p {
  margin: 3px 0 0;
  font-size: 12.5px;
}

body.app-shell-v2 #competitions .section-title-row,
body.app-shell-v2 #teams .section-title-row,
body.app-shell-v2 #members .section-title-row,
body.app-shell-v2 #team .section-title-row {
  align-items: flex-end;
  margin-bottom: 16px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

body.app-shell-v2 #competitions .section-title-row h1,
body.app-shell-v2 #teams .section-title-row h1,
body.app-shell-v2 #members .section-title-row h1,
body.app-shell-v2 #team .section-title-row h1 {
  font-size: 26px;
  line-height: 1.15;
}

body.app-shell-v2 .competition-filter-shell,
body.app-shell-v2 .team-filter-shell,
body.app-shell-v2 .member-filter-shell {
  margin-bottom: 18px;
  padding: 12px;
  border-radius: 16px;
}

body.app-shell-v2 .filter-toolbar {
  grid-template-columns: minmax(240px, 1fr) auto minmax(180px, 220px);
  padding: 0;
  background: transparent !important;
  border: 0 !important;
}

body.app-shell-v2 .card-grid {
  gap: 14px;
}

body.app-shell-v2 .item-card,
body.app-shell-v2 .discovery-shell,
body.app-shell-v2 .competition-card,
body.app-shell-v2 .team-polished-card,
body.app-shell-v2 .member-polished-card {
  border-radius: 14px;
}

body.app-shell-v2 .team-hub-layout,
body.app-shell-v2 .polished-team-hub-layout {
  gap: 16px;
}

@media (max-width: 1180px) {
  body.app-shell-v2 .page-shell {
    padding-inline: 24px;
  }

  body.app-shell-v2 .home-mission-grid {
    grid-template-columns: 1fr 1fr;
  }

  body.app-shell-v2 .home-mission-continue {
    grid-column: 1 / -1;
  }
}

@media (max-width: 1050px) {
  body.app-shell-v2 .topbar {
    position: sticky;
    inset: auto;
    top: 0;
    width: 100%;
    height: auto;
    min-height: 64px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    padding: 10px 14px;
    border-right: 0 !important;
    border-bottom: 1px solid var(--w2g-line) !important;
    overflow: visible;
  }

  body.app-shell-v2 .topbar .brand {
    padding: 0;
    border-bottom: 0;
  }

  body.app-shell-v2 .mobile-menu-button {
    display: inline-flex;
  }

  body.app-shell-v2 .main-nav {
    display: none !important;
  }

  body.app-shell-v2 .main-nav.open {
    display: flex !important;
    flex-direction: column;
    max-height: calc(100vh - 82px);
    overflow-y: auto;
  }

  body.app-shell-v2 .main-nav.open .mobile-nav-extras,
  body.app-shell-v2 .main-nav.open .mobile-nav-auth,
  body.app-shell-v2 .main-nav.open .mobile-drawer-feedback-btn {
    display: flex;
  }

  body.app-shell-v2 .main-nav.open .shell-nav-scroll {
    flex: 0 0 auto;
    overflow: visible;
  }

  body.app-shell-v2 .main-nav.open .shell-account-panel {
    display: flex;
  }

  body.app-shell-v2 .auth-actions {
    display: flex;
    width: auto;
    padding: 0;
    border-top: 0;
  }

  body.app-shell-v2 .auth-actions .language-switch,
  body.app-shell-v2 .auth-actions .theme-toggle,
  body.app-shell-v2 .auth-actions #logoutButton {
    display: none !important;
  }

  body.app-shell-v2 .page-shell {
    margin-left: 0;
    padding: 16px clamp(14px, 4vw, 24px) 72px;
  }

  body.app-shell-v2 .app-shell-context-bar {
    position: static;
    flex-direction: column;
    align-items: stretch;
    margin-bottom: 16px;
  }

  body.app-shell-v2 .app-shell-context-actions {
    flex-wrap: wrap;
  }

  body.app-shell-v2 .app-shell-search-button {
    min-width: 0;
    flex: 1 1 220px;
  }
}

@media (max-width: 760px) {
  body.app-shell-v2 .home-mission-head {
    flex-direction: column;
    align-items: stretch;
    padding: 18px;
  }

  body.app-shell-v2 .home-mission-actions .button {
    flex: 1 1 160px;
  }

  body.app-shell-v2 .home-mission-stats,
  body.app-shell-v2 .home-mission-grid {
    grid-template-columns: 1fr;
  }

  body.app-shell-v2 .home-mission-continue {
    grid-column: auto;
  }

  body.app-shell-v2 .filter-toolbar {
    grid-template-columns: 1fr;
  }

  body.app-shell-v2 .app-shell-context-pill {
    max-width: 100%;
  }
}

/* =============================================================
   W2G Design v2 Phase 3 -- Discovery cards and match explainers
   -------------------------------------------------------------
   Scoped to the real Competition, Find Team, and Find Members
   discovery cards. Uses existing v2 tokens and keeps behavior in JS.
   ============================================================= */

body.app-shell-v2 .discovery-card-v2 {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  border-radius: var(--w2g-r-xl);
  background: var(--w2g-surface) !important;
  border: 1px solid var(--w2g-line) !important;
  box-shadow: var(--w2g-shadow-sm) !important;
}

body.app-shell-v2 .discovery-card-v2:hover {
  border-color: var(--w2g-line-strong) !important;
  box-shadow: var(--w2g-shadow-md) !important;
}

body.app-shell-v2 .competition-card-v2 .competition-poster-shell {
  margin: -2px -2px 0;
  border-radius: var(--w2g-r-lg);
}

body.app-shell-v2 .competition-card-v2 .competition-poster,
body.app-shell-v2 .competition-card-v2 .competition-poster img,
body.app-shell-v2 .competition-card-v2 .poster-placeholder {
  border-radius: var(--w2g-r-lg);
}

body.app-shell-v2 .discovery-card-v2 .item-head,
body.app-shell-v2 .discovery-card-v2 .discovery-shell-header,
body.app-shell-v2 .discovery-card-v2 .discovery-shell-top {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

body.app-shell-v2 .discovery-card-v2 .item-title {
  margin: 5px 0 3px;
  color: var(--w2g-ink);
  font-size: 19px;
  line-height: 1.22;
  letter-spacing: 0;
}

body.app-shell-v2 .discovery-card-v2 .item-meta,
body.app-shell-v2 .discovery-card-v2 .discovery-competition-link {
  color: var(--w2g-muted);
  font-size: 13px;
  line-height: 1.45;
}

body.app-shell-v2 .discovery-card-v2 .tag.gray {
  background: var(--w2g-surface-2);
  border-color: var(--w2g-line);
  color: var(--w2g-muted);
}

body.app-shell-v2 .discovery-fact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

body.app-shell-v2 .discovery-fact-grid > div {
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid var(--w2g-line);
  border-radius: var(--w2g-r-md);
  background: var(--w2g-surface-2);
}

body.app-shell-v2 .discovery-fact-grid span,
body.app-shell-v2 .discovery-role-block > span {
  display: block;
  margin-bottom: 3px;
  color: var(--w2g-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body.app-shell-v2 .discovery-fact-grid strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--w2g-ink);
  font-size: 13px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.app-shell-v2 .discovery-role-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--w2g-line);
  border-radius: var(--w2g-r-md);
  background: var(--w2g-surface-2);
}

body.app-shell-v2 .discovery-role-block .tag-row,
body.app-shell-v2 .discovery-card-v2 .discovery-tag-cluster {
  gap: 7px;
}

body.app-shell-v2 .match-meter-v2 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 13px;
  border-radius: var(--w2g-r-lg);
  background: var(--w2g-surface-2) !important;
}

body.app-shell-v2 .match-meter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

body.app-shell-v2 .match-meter-v2 .score-meter-label {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

body.app-shell-v2 .match-meter-v2 .score-meter-label span {
  color: var(--w2g-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body.app-shell-v2 .match-meter-v2 .score-meter-label strong {
  color: var(--w2g-match-ink);
  font-size: 22px;
  line-height: 1;
}

body.app-shell-v2 .match-quality-badge {
  flex: 0 0 auto;
  padding: 5px 9px;
  border: 1px solid rgba(21, 163, 74, 0.24);
  border-radius: var(--w2g-r-pill);
  background: var(--w2g-match-soft);
  color: var(--w2g-match-ink);
  font-size: 12px;
  font-weight: 800;
}

body.app-shell-v2 .match-tone-fair .match-quality-badge {
  border-color: rgba(201, 138, 18, 0.26);
  background: rgba(201, 138, 18, 0.12);
  color: var(--w2g-warning);
}

body.app-shell-v2 .match-tone-low .match-quality-badge {
  border-color: var(--w2g-line);
  background: var(--w2g-surface);
  color: var(--w2g-muted);
}

body.app-shell-v2 .match-meter-v2 .score-meter-track {
  height: 8px;
}

body.app-shell-v2 .match-tone-low .score-meter-track span {
  background: var(--w2g-match-low) !important;
}

body.app-shell-v2 .match-tone-fair .score-meter-track span {
  background: linear-gradient(90deg, var(--w2g-match-fair), var(--w2g-match-good)) !important;
}

body.app-shell-v2 .match-explainer-v2 {
  border: 1px solid var(--w2g-line);
  border-radius: var(--w2g-r-md);
  background: var(--w2g-surface);
}

body.app-shell-v2 .match-explainer-v2 summary {
  cursor: pointer;
  padding: 9px 11px;
  color: var(--w2g-ink);
  font-size: 13px;
  font-weight: 800;
  list-style: none;
}

body.app-shell-v2 .match-explainer-v2 summary::-webkit-details-marker {
  display: none;
}

body.app-shell-v2 .match-explainer-v2 summary::after {
  content: "+";
  float: right;
  color: var(--w2g-muted);
}

body.app-shell-v2 .match-explainer-v2[open] summary::after {
  content: "-";
}

body.app-shell-v2 .match-explainer-v2:not([open]) .match-reasons {
  display: none !important;
}

body.app-shell-v2 .match-explainer-v2 .match-reasons {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0 10px 10px;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  list-style: none;
}

body.app-shell-v2 .match-explainer-v2 .match-reason {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  width: 100%;
  padding: 7px 0;
  border: 0 !important;
  background: transparent !important;
  color: var(--w2g-body);
  font-size: var(--w2g-text-base, 14px);
  line-height: 1.4;
}

body.app-shell-v2 .match-explainer-v2 .match-reason + .match-reason {
  border-top: 1px solid var(--w2g-line) !important;
}

body.app-shell-v2 .match-explainer-v2 .match-reason-icon {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 700;
}

body.app-shell-v2 .match-explainer-v2 .match-reason.confidence,
body.app-shell-v2 .match-explainer-v2 .match-reason.confidence .match-reason-icon {
  color: var(--w2g-muted) !important;
}

body.app-shell-v2 .match-meter-v2 .score-meter-helper {
  margin: 0;
  color: var(--w2g-muted);
  font-size: 12px;
  line-height: 1.45;
}

body.app-shell-v2 .discovery-card-v2 .match-feedback-lite {
  margin-top: -2px;
}

body.app-shell-v2 .discovery-card-v2 .discovery-summary-panel,
body.app-shell-v2 .discovery-card-v2 .collapsible-copy {
  padding: 12px;
  border-radius: var(--w2g-r-md);
}

body.app-shell-v2 .discovery-card-v2 .discovery-actions-stack,
body.app-shell-v2 .competition-card-v2 .competition-card-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 2px;
  border-top: 1px solid var(--w2g-line);
}

body.app-shell-v2 .discovery-card-v2 .discovery-primary-actions,
body.app-shell-v2 .discovery-card-v2 .discovery-secondary-actions,
body.app-shell-v2 .competition-card-v2 .competition-card-actions {
  align-items: stretch;
}

body.app-shell-v2 .discovery-card-v2 .discovery-primary-actions .button,
body.app-shell-v2 .discovery-card-v2 .discovery-secondary-actions .button,
body.app-shell-v2 .competition-card-v2 .competition-card-actions .button {
  justify-content: center;
  min-height: 40px;
}

html[data-theme="dark"] body.app-shell-v2 .discovery-card-v2,
html[data-theme="dark"] body.app-shell-v2 .match-explainer-v2 {
  background: var(--w2g-surface) !important;
  border-color: var(--w2g-line) !important;
}

html[data-theme="dark"] body.app-shell-v2 .discovery-fact-grid > div,
html[data-theme="dark"] body.app-shell-v2 .discovery-role-block,
html[data-theme="dark"] body.app-shell-v2 .match-meter-v2 {
  background: var(--w2g-surface-2) !important;
  border-color: var(--w2g-line) !important;
}

@media (max-width: 860px) {
  body.app-shell-v2 .discovery-fact-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 620px) {
  body.app-shell-v2 .discovery-card-v2 {
    gap: 12px;
    padding: 14px;
    border-radius: var(--w2g-r-lg);
  }

  body.app-shell-v2 .discovery-fact-grid {
    grid-template-columns: 1fr;
  }

  body.app-shell-v2 .match-meter-head {
    align-items: flex-start;
    flex-direction: column;
  }

  body.app-shell-v2 .match-quality-badge {
    align-self: flex-start;
  }

  body.app-shell-v2 .match-explainer-v2 .match-reasons {
    padding-inline: 9px;
  }

  body.app-shell-v2 .discovery-card-v2 .discovery-secondary-actions,
  body.app-shell-v2 .competition-card-v2 .competition-card-actions {
    flex-direction: column;
  }
}

/* =============================================================
   W2G Design v2 Phase 4 -- Mission Center / Workspace UI
   -------------------------------------------------------------
   Scoped to Team Hub and workspace mission components only.
   This is visual structure around existing task/chat/request logic.
   ============================================================= */

body.app-shell-v2 .mission-preview-card {
  gap: 16px;
}

body.app-shell-v2 .mission-preview-strip {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 12px;
}

body.app-shell-v2 .mission-preview-target,
body.app-shell-v2 .mission-preview-next,
body.app-shell-v2 .mission-role-note,
.workspace-mission-topbar,
.workspace-command-center,
.mission-header-next {
  border: 1px solid var(--w2g-line);
  border-radius: var(--w2g-r-lg);
  background: var(--w2g-surface-2);
  box-shadow: none;
}

body.app-shell-v2 .mission-preview-target,
body.app-shell-v2 .mission-preview-next {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 5px;
  padding: 14px;
}

body.app-shell-v2 .mission-preview-target span,
body.app-shell-v2 .mission-preview-next span,
.workspace-mission-command span,
.workspace-mission-role strong,
.workspace-command-meta span,
.mission-header-next span {
  color: var(--w2g-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body.app-shell-v2 .mission-preview-target strong,
body.app-shell-v2 .mission-preview-next strong,
.workspace-mission-command strong,
.workspace-command-primary h3,
.mission-header-next strong {
  color: var(--w2g-ink);
  line-height: 1.25;
}

body.app-shell-v2 .mission-preview-target small,
body.app-shell-v2 .mission-preview-next small,
.workspace-mission-command small,
.workspace-mission-role span,
.workspace-command-primary p,
.workspace-command-meta small,
.mission-header-next small,
.mission-role-note span {
  color: var(--w2g-muted);
  line-height: 1.45;
}

body.app-shell-v2 .mission-preview-metrics {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 10px;
}

body.app-shell-v2 .mission-preview-meter {
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--w2g-line);
  border-radius: var(--w2g-r-md);
  background: var(--w2g-match-soft);
}

body.app-shell-v2 .mission-preview-meter .score-meter-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

body.app-shell-v2 .mission-preview-meter .score-meter-label strong {
  color: var(--w2g-match-ink);
}

body.app-shell-v2 .mission-preview-meter .score-meter-track {
  height: 8px;
  background: var(--w2g-match-track);
}

body.app-shell-v2 .mission-preview-meter .score-meter-track span {
  background: linear-gradient(90deg, var(--w2g-match-good), var(--w2g-match-strong)) !important;
}

body.app-shell-v2 .team-snapshot-stat.is-alert,
.workspace-command-meta.is-alert,
.workspace-mission-snapshot .is-alert {
  border-color: rgba(201, 138, 18, 0.30) !important;
  background: rgba(201, 138, 18, 0.10) !important;
}

body.app-shell-v2 .mission-deadline-urgent,
body.app-shell-v2 .mission-deadline-danger,
.workspace-mission-snapshot .mission-deadline-urgent,
.workspace-mission-snapshot .mission-deadline-danger,
.workspace-command-meta.mission-deadline-urgent,
.workspace-command-meta.mission-deadline-danger {
  border-color: rgba(220, 38, 38, 0.24) !important;
  background: rgba(220, 38, 38, 0.08) !important;
}

body.app-shell-v2 .mission-role-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  padding: 11px 13px;
}

body.app-shell-v2 .mission-role-note strong {
  color: var(--w2g-ink);
}

.workspace-shell-v2 .workspace-mission-topbar {
  display: grid;
  grid-template-columns: minmax(220px, 1.15fr) minmax(220px, 1fr) minmax(260px, 1fr) minmax(220px, 0.9fr);
  gap: 12px;
  padding: 14px;
  margin-bottom: 12px;
  background: var(--w2g-surface);
}

.workspace-mission-identity,
.workspace-mission-command,
.workspace-mission-role {
  min-width: 0;
}

.workspace-mission-identity h2 {
  margin: 3px 0 4px;
  color: var(--w2g-ink);
  font-size: 20px;
  line-height: 1.2;
}

.workspace-mission-identity p {
  margin: 0;
  color: var(--w2g-muted);
}

.workspace-mission-command,
.workspace-mission-role {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 12px;
  border: 1px solid var(--w2g-line);
  border-radius: var(--w2g-r-md);
  background: var(--w2g-surface-2);
}

.workspace-mission-command .button {
  align-self: flex-start;
  margin-top: 3px;
}

.workspace-mission-snapshot {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.workspace-mission-snapshot > div {
  min-width: 0;
  padding: 11px;
  border: 1px solid var(--w2g-line);
  border-radius: var(--w2g-r-md);
  background: var(--w2g-surface-2);
}

.workspace-mission-snapshot strong,
.workspace-command-meta strong {
  display: block;
  overflow: hidden;
  color: var(--w2g-ink);
  font-size: 18px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-mission-snapshot span {
  display: block;
  margin-top: 3px;
  color: var(--w2g-muted);
  font-size: 11px;
  font-weight: 700;
}

.workspace-mission-readiness-trigger {
  display: block;
  width: 100%;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.workspace-mission-readiness-trigger:hover,
.workspace-mission-readiness-trigger:focus-visible {
  border-color: var(--w2g-orange-line);
  background: var(--w2g-orange-soft);
  outline: none;
}

.workspace-mission-readiness-trigger small {
  display: block;
  margin-top: 3px;
  color: var(--w2g-muted);
  font-size: 11px;
  font-weight: 700;
}

.workspace-mission-readiness-trigger em {
  display: block;
  margin-top: 4px;
  color: var(--w2g-orange-strong);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}

/* "View checklist" CTA on the main Mission Center page card (desktop
   .mission-readiness-copy and the mobile readiness block both render one
   of these — kept as a real button, never hover-only, styled as a plain
   text link rather than a pill). */
.mission-readiness-checklist-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  padding: 2px 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--w2g-orange-strong);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.15s ease;
}

.mission-readiness-checklist-link:hover,
.mission-readiness-checklist-link:focus-visible {
  text-decoration: underline;
}

.mission-readiness-checklist-link:focus-visible {
  outline: 2px solid var(--w2g-orange-strong);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (max-width: 640px) {
  .mission-readiness-checklist-link {
    display: inline-flex;
    margin-top: 8px;
  }
}

.workspace-mission-readiness-panel {
  margin-bottom: 12px;
  padding: 14px;
  border: 1px solid var(--w2g-line);
  border-radius: var(--w2g-r-lg);
  background: var(--w2g-surface);
}

.readiness-panel-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.readiness-panel-heading {
  display: flex;
  flex-direction: column;
}

.readiness-panel-score {
  color: var(--w2g-ink);
  font-size: 18px;
}

.readiness-panel-summary {
  margin-right: auto;
  color: var(--w2g-muted);
  font-size: 12px;
  font-weight: 700;
}

.readiness-panel-close {
  padding: 4px 8px;
  border: none;
  border-radius: var(--w2g-r-sm);
  background: transparent;
  color: var(--w2g-muted);
  font-size: 14px;
  cursor: pointer;
}

.readiness-panel-close:hover,
.readiness-panel-close:focus-visible {
  background: var(--w2g-surface-2);
  color: var(--w2g-ink);
}

.readiness-detail-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.readiness-detail-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--w2g-line);
  border-radius: var(--w2g-r-md);
  background: var(--w2g-surface-2);
}

.readiness-detail-row.is-missing {
  border-color: var(--w2g-orange-line);
  background: var(--w2g-orange-soft);
}

.readiness-detail-row.is-done {
  opacity: 0.7;
}

.readiness-detail-icon {
  flex-shrink: 0;
  font-weight: 700;
}

.readiness-detail-row.is-missing .readiness-detail-icon {
  color: var(--w2g-orange-strong);
}

.readiness-detail-row.is-done .readiness-detail-icon {
  color: var(--w2g-success);
}

.readiness-detail-body {
  flex: 1;
  min-width: 0;
}

.readiness-detail-body p {
  margin: 2px 0 0;
  color: var(--w2g-muted);
  font-size: 12px;
}

.readiness-detail-cta {
  flex-shrink: 0;
}

.mission-readiness-row-link {
  flex-shrink: 0;
  align-self: center;
  padding: 2px 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--w2g-orange-strong);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
}

.mission-readiness-row-link:hover,
.mission-readiness-row-link:focus-visible {
  text-decoration: underline;
}

.mission-readiness-row-link:focus-visible {
  outline: 2px solid var(--w2g-orange-strong);
  outline-offset: 2px;
  border-radius: 4px;
}

.readiness-detail-done summary {
  margin-top: 4px;
  color: var(--w2g-muted);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.readiness-detail-done .readiness-detail-list {
  margin-top: 8px;
}

.mission-header-next {
  margin-top: 12px;
  padding: 11px 12px;
}

.mission-header-next strong,
.mission-header-next small {
  display: block;
  margin-top: 2px;
}

.workspace-command-center {
  display: grid;
  grid-template-columns: minmax(260px, 1.3fr) repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 14px;
  margin-bottom: 16px;
  background: var(--w2g-surface);
}

.workspace-command-primary,
.workspace-command-meta {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--w2g-line);
  border-radius: var(--w2g-r-md);
  background: var(--w2g-surface-2);
}

.workspace-command-primary h3 {
  margin: 4px 0 5px;
  font-size: 18px;
}

.workspace-command-primary p {
  margin: 0 0 10px;
}

.workspace-command-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.task-card[data-task-status="blocked"] {
  border-color: rgba(201, 138, 18, 0.35) !important;
  background: rgba(201, 138, 18, 0.10) !important;
}

.task-card.is-overdue {
  border-color: rgba(220, 38, 38, 0.28) !important;
}

.task-card.is-read-only {
  opacity: 0.88;
}

.task-permission-chip {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 7px;
  border: 1px solid var(--w2g-line);
  border-radius: var(--w2g-r-pill);
  background: var(--w2g-surface-2);
  color: var(--w2g-muted);
  font-size: 10.5px;
  font-weight: 800;
}

.task-permission-can-manage,
.task-permission-owner-controls {
  border-color: var(--w2g-orange-line);
  background: var(--w2g-orange-soft);
  color: var(--w2g-orange-ink);
}

.task-permission-status-delete {
  border-color: rgba(99, 102, 241, 0.28);
  background: rgba(99, 102, 241, 0.12);
  color: #6366f1;
}

.task-permission-can-update {
  border-color: rgba(21, 163, 74, 0.24);
  background: var(--w2g-match-soft);
  color: var(--w2g-match-ink);
}

.workspace-shell-v2 .workspace-main,
.workspace-shell-v2 .workspace-panel,
.workspace-overview-redesign,
.workspace-tasks-v2 {
  min-width: 0;
}

@media (max-width: 1180px) {
  .workspace-shell-v2 .workspace-mission-topbar,
  .workspace-command-center {
    grid-template-columns: 1fr 1fr;
  }

  body.app-shell-v2 .mission-preview-metrics {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 820px) {
  body.app-shell-v2 .mission-preview-strip,
  body.app-shell-v2 .mission-preview-metrics,
  .workspace-shell-v2 .workspace-mission-topbar,
  .workspace-command-center,
  .workspace-mission-snapshot {
    grid-template-columns: 1fr;
  }

  body.app-shell-v2 .mission-role-note {
    grid-template-columns: 1fr;
  }

  .workspace-mission-command .button,
  .workspace-command-primary .button {
    width: 100%;
    justify-content: center;
  }

  .readiness-panel-header {
    flex-wrap: wrap;
  }

  .readiness-detail-row {
    flex-wrap: wrap;
  }

  .readiness-detail-cta {
    width: 100%;
  }
}

@media (max-width: 620px) {
  .workspace-shell-v2 .workspace-mission-topbar,
  .workspace-command-center {
    padding: 12px;
    border-radius: var(--w2g-r-md);
  }

  .workspace-mission-identity h2 {
    font-size: 18px;
  }

  .task-permission-chip {
    width: 100%;
    justify-content: center;
  }
}

/* W2G Design v2 Phase 5 -- Account entry, onboarding, and profile */
body[data-page="login"].auth-page,
body.onboarding-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% 0%, rgba(240, 119, 40, 0.08), transparent 26%),
    linear-gradient(180deg, var(--w2g-bg) 0%, var(--w2g-surface-2) 100%) !important;
  color: var(--w2g-ink);
}

body[data-page="login"] .auth-decor,
body[data-page="login"] .auth-grid-lines,
body[data-page="login"] .auth-form-orb,
body[data-page="login"] .auth-card-glow,
body.onboarding-page .onboarding-side::before {
  display: none !important;
}

body[data-page="login"] .auth-shell.auth-redesign {
  display: grid;
  width: min(1180px, calc(100vw - 32px));
  min-height: 100vh;
  grid-template-columns: minmax(320px, 0.92fr) minmax(360px, 0.78fr);
  gap: 28px;
  align-items: center;
  padding: 36px 0;
  margin: 0 auto;
}

body[data-page="login"] .auth-info-panel,
body[data-page="login"] .auth-form-panel,
body[data-page="login"] .form-card.auth-card-redesign,
body.onboarding-page .onboarding-side,
body.onboarding-page .form-card.wide,
body.app-shell-v2 #profile .content-card {
  border: 1px solid var(--w2g-line) !important;
  background: var(--w2g-surface) !important;
  box-shadow: var(--w2g-shadow-md) !important;
}

body[data-page="login"] .auth-info-panel {
  min-height: 640px;
  overflow: hidden;
  padding: clamp(28px, 4vw, 46px);
  border-radius: var(--w2g-r-xl);
  color: var(--w2g-ink);
}

body[data-page="login"] .auth-info-panel::after {
  content: "";
  position: absolute;
  inset: auto -14% -20% 40%;
  height: 260px;
  border-radius: 999px;
  background: rgba(240, 119, 40, 0.10);
  filter: blur(52px);
  pointer-events: none;
}

body[data-page="login"] .auth-brand,
body[data-page="login"] .auth-brand.light {
  color: var(--w2g-ink);
}

body[data-page="login"] .auth-brand .brand-mark {
  background: var(--w2g-orange);
  color: #fff;
  box-shadow: none;
}

body[data-page="login"] .auth-brand small,
body[data-page="login"] .auth-info-panel p,
body[data-page="login"] .auth-role-note span {
  color: var(--w2g-muted);
}

body[data-page="login"] .auth-hero-copy {
  max-width: 560px;
  margin-top: clamp(52px, 10vh, 120px);
}

body[data-page="login"] .auth-hero-copy .eyebrow,
body[data-page="login"] .auth-hero-copy .light-text {
  color: var(--w2g-orange-ink) !important;
}

body[data-page="login"] .auth-kicker-dot {
  background: var(--w2g-orange);
  box-shadow: 0 0 0 5px var(--w2g-orange-soft);
}

body[data-page="login"] .auth-hero-copy h1 {
  max-width: 12ch;
  margin: 12px 0 16px;
  color: var(--w2g-ink);
  font-size: clamp(34px, 5vw, 58px);
  line-height: 1.03;
  letter-spacing: 0;
}

body[data-page="login"] .auth-note-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 34px;
}

body[data-page="login"] .auth-role-note {
  padding: 14px 16px;
  border: 1px solid var(--w2g-line);
  border-radius: var(--w2g-r-md);
  background: var(--w2g-surface-2);
  box-shadow: none;
}

body[data-page="login"] .auth-role-note strong {
  color: var(--w2g-ink);
}

body[data-page="login"] .auth-form-panel {
  position: relative;
  min-height: 640px;
  padding: 22px;
  border-radius: var(--w2g-r-xl);
}

body[data-page="login"] .auth-language-row {
  position: static;
  justify-content: flex-end;
  margin-bottom: 16px;
}

body[data-page="login"] .language-switch,
body[data-page="login"] .theme-toggle {
  border-color: var(--w2g-line);
  background: var(--w2g-surface-2);
  color: var(--w2g-body);
  box-shadow: none;
}

body[data-page="login"] .form-card.auth-card-redesign {
  width: 100%;
  max-width: none;
  padding: clamp(22px, 3vw, 32px);
  border-radius: var(--w2g-r-lg);
}

body[data-page="login"] .auth-tabs {
  padding: 4px;
  border: 1px solid var(--w2g-line);
  border-radius: var(--w2g-r-pill);
  background: var(--w2g-surface-2);
}

body[data-page="login"] .auth-tabs button {
  min-height: 42px;
  border-radius: var(--w2g-r-pill);
  color: var(--w2g-muted);
  font-weight: 800;
}

body[data-page="login"] .auth-tabs button.active {
  background: var(--w2g-orange);
  color: #fff !important;
  box-shadow: var(--w2g-shadow-sm);
}

body[data-page="login"] .auth-role-select {
  padding: 16px;
  border: 1px solid var(--w2g-line);
  border-radius: var(--w2g-r-md);
  background: var(--w2g-surface-2);
}

body[data-page="login"] .role-select-head {
  margin-bottom: 10px;
}

body[data-page="login"] .role-select-head .field-help,
body[data-page="login"] .role-select-head small {
  color: var(--w2g-muted);
}

body[data-page="login"] .role-grid {
  gap: 10px;
}

body[data-page="login"] .role-grid button {
  min-height: 102px;
  padding: 15px;
  border: 1px solid var(--w2g-line);
  border-radius: var(--w2g-r-md);
  background: var(--w2g-surface);
  color: var(--w2g-body);
  text-align: left;
  box-shadow: none;
}

body[data-page="login"] .role-grid button:hover {
  border-color: var(--w2g-orange-line);
  background: var(--w2g-orange-soft);
}

body[data-page="login"] .role-grid button.active {
  border-color: var(--w2g-orange);
  background: var(--w2g-orange-soft);
  color: var(--w2g-orange-ink);
  box-shadow: inset 0 0 0 1px var(--w2g-orange-line);
}

body[data-page="login"] .role-grid button strong {
  color: var(--w2g-ink);
}

body[data-page="login"] .role-grid button.active strong,
body[data-page="login"] .role-grid button.active small {
  color: var(--w2g-orange-ink);
}

body[data-page="login"] .auth-card-redesign label span,
body.onboarding-page #onboardingForm label > span,
body.app-shell-v2 #profile label > span {
  color: var(--w2g-ink);
  font-size: 12px;
  font-weight: 800;
}

body[data-page="login"] .auth-card-redesign input,
body.onboarding-page #onboardingForm input,
body.onboarding-page #onboardingForm select,
body.onboarding-page #onboardingForm textarea,
body.app-shell-v2 #profile input,
body.app-shell-v2 #profile select,
body.app-shell-v2 #profile textarea {
  border: 1px solid var(--w2g-line);
  border-radius: var(--w2g-r-md);
  background: var(--w2g-surface);
  color: var(--w2g-ink);
  box-shadow: none;
}

body[data-page="login"] .auth-card-redesign input:focus,
body[data-page="login"] .role-grid button:focus-visible,
body[data-page="login"] .auth-tabs button:focus-visible,
body.onboarding-page #onboardingForm input:focus,
body.onboarding-page #onboardingForm select:focus,
body.onboarding-page #onboardingForm textarea:focus,
body.onboarding-page .choice-button:focus-visible,
body.onboarding-page .multi-select-trigger:focus-visible,
body.onboarding-page .university-select-trigger:focus-visible,
body.app-shell-v2 #profile input:focus,
body.app-shell-v2 #profile select:focus,
body.app-shell-v2 #profile textarea:focus {
  border-color: var(--w2g-orange);
  outline: 3px solid var(--w2g-orange-soft);
  outline-offset: 1px;
}

body[data-page="login"] .button.primary,
body.onboarding-page .button.primary {
  background: var(--w2g-orange);
  color: #fff;
  box-shadow: var(--w2g-shadow-sm);
}

body.onboarding-page .simple-header {
  border-bottom: 1px solid var(--w2g-line);
  background: color-mix(in srgb, var(--w2g-surface) 90%, transparent);
  backdrop-filter: blur(14px);
}

body.onboarding-page .onboarding-shell {
  width: min(1180px, calc(100vw - 32px));
  grid-template-columns: minmax(260px, 0.42fr) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  padding: 34px 0 48px;
  margin: 0 auto;
}

body.onboarding-page .onboarding-side {
  position: sticky;
  top: 92px;
  padding: 24px;
  border-radius: var(--w2g-r-lg);
}

body.onboarding-page #onboardingRoleBadge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border: 1px solid var(--w2g-orange-line);
  border-radius: var(--w2g-r-pill);
  background: var(--w2g-orange-soft);
  color: var(--w2g-orange-ink);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

body.onboarding-page .onboarding-side h1 {
  margin: 16px 0 8px;
  color: var(--w2g-ink);
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.08;
  letter-spacing: 0;
}

body.onboarding-page .onboarding-side p {
  color: var(--w2g-body);
}

body.onboarding-page #onboardingNotes {
  display: grid;
  gap: 10px;
  margin-top: 22px;
}

body.onboarding-page #onboardingNotes .info-card {
  padding: 12px 13px;
  border: 1px solid var(--w2g-line);
  border-radius: var(--w2g-r-md);
  background: var(--w2g-surface-2);
  box-shadow: none;
}

body.onboarding-page #onboardingNotes .info-card p {
  margin: 0;
  color: var(--w2g-muted);
  font-size: 13px;
}

body.onboarding-page .form-card.wide {
  padding: clamp(20px, 3vw, 30px);
  border-radius: var(--w2g-r-lg);
}

body.onboarding-page #onboardingProgress {
  display: flex;
  gap: 8px;
  padding: 8px;
  margin-bottom: 20px;
  border: 1px solid var(--w2g-line);
  border-radius: var(--w2g-r-pill);
  background: var(--w2g-surface-2);
}

body.onboarding-page .progress-dot {
  height: 8px;
  flex: 1 1 0;
  border-radius: var(--w2g-r-pill);
  background: color-mix(in srgb, var(--w2g-muted) 22%, transparent);
}

body.onboarding-page .progress-dot.done {
  background: var(--w2g-match);
}

body.onboarding-page .progress-dot.active {
  background: var(--w2g-orange);
}

body.onboarding-page #onboardingForm {
  display: grid;
  gap: 18px;
}

body.onboarding-page #onboardingForm > .eyebrow {
  width: fit-content;
  margin: 0;
  padding: 5px 10px;
  border: 1px solid var(--w2g-orange-line);
  border-radius: var(--w2g-r-pill);
  background: var(--w2g-orange-soft);
  color: var(--w2g-orange-ink);
}

body.onboarding-page #onboardingForm > h2 {
  margin: -8px 0 2px;
  color: var(--w2g-ink);
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.12;
  letter-spacing: 0;
}

body.onboarding-page #onboardingForm label,
body.onboarding-page .multi-select-field,
body.onboarding-page .university-picker-card,
body.onboarding-page .skill-level-board,
body.onboarding-page .onboarding-more-options {
  border: 1px solid var(--w2g-line);
  border-radius: var(--w2g-r-md);
  background: var(--w2g-surface-2);
  box-shadow: none;
}

body.onboarding-page #onboardingForm label {
  padding: 13px;
}

body.onboarding-page .choice-grid,
body.onboarding-page .role-grid {
  gap: 8px;
}

body.onboarding-page .choice-button,
body.onboarding-page .skill-level-choice,
body.onboarding-page .multi-select-option,
body.onboarding-page .province-combobox-option,
body.onboarding-page .university-option {
  border: 1px solid var(--w2g-line);
  border-radius: var(--w2g-r-md);
  background: var(--w2g-surface);
  color: var(--w2g-body);
  box-shadow: none;
}

body.onboarding-page .choice-button.active,
body.onboarding-page .skill-level-choice.active,
body.onboarding-page .multi-select-option.is-selected,
body.onboarding-page .province-combobox-option.active,
body.onboarding-page .university-option.active {
  border-color: rgba(21, 163, 74, 0.30);
  background: var(--w2g-match-soft);
  color: var(--w2g-match-ink);
}

body.onboarding-page .multi-select-trigger,
body.onboarding-page .province-combobox-control,
body.onboarding-page .university-select-trigger {
  border: 1px solid var(--w2g-line);
  border-radius: var(--w2g-r-md);
  background: var(--w2g-surface);
  color: var(--w2g-ink);
  box-shadow: none;
}

body.onboarding-page .onboarding-more-options summary {
  color: var(--w2g-ink);
}

body.onboarding-page .button-row.between {
  gap: 10px;
  padding-top: 18px;
  border-top: 1px solid var(--w2g-line);
}

body.app-shell-v2 #profile {
  background: transparent;
}

body.app-shell-v2 #profile .section-title-row {
  align-items: center;
  gap: 14px;
  padding: 0 0 16px;
  border-bottom: 1px solid var(--w2g-line);
}

body.app-shell-v2 #profile .section-title-row h2 {
  color: var(--w2g-ink);
  letter-spacing: 0;
}

body.app-shell-v2 #profile .section-title-row .button {
  background: var(--w2g-orange);
  color: #fff;
  box-shadow: var(--w2g-shadow-sm);
}

body.app-shell-v2 #profileContent {
  display: grid;
  gap: 16px;
}

body.app-shell-v2 #profile .dashboard-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.36fr);
  gap: 16px;
  align-items: stretch;
}

body.app-shell-v2 #profile .profile-identity-card,
body.app-shell-v2 #profile .profile-saved-redirect-card {
  position: relative;
  overflow: hidden;
  padding: clamp(18px, 2.4vw, 26px);
  border-radius: var(--w2g-r-lg);
}

body.app-shell-v2 #profile .profile-identity-card::before {
  display: none;
}

body.app-shell-v2 #profile .profile-photo-panel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--w2g-line);
  border-radius: var(--w2g-r-md);
  background: var(--w2g-surface-2);
}

body.app-shell-v2 #profile .avatar.large,
body.app-shell-v2 #profile .avatar-xl,
body.app-shell-v2 #profile .profile-photo-panel .avatar {
  border: 3px solid var(--w2g-surface);
  box-shadow: var(--w2g-shadow-sm);
}

body.app-shell-v2 #profile .profile-photo-actions h3 {
  margin: 0 0 5px;
  color: var(--w2g-ink);
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.1;
  letter-spacing: 0;
}

body.app-shell-v2 #profile .profile-photo-actions p,
body.app-shell-v2 #profile .profile-meta-label,
body.app-shell-v2 #profile .small-copy {
  color: var(--w2g-muted) !important;
}

body.app-shell-v2 #profile .profile-photo-actions .button-row {
  margin-top: 12px;
}

body.app-shell-v2 #profile .profile-social-action-row,
body.app-shell-v2 #profile .profile-university-card,
body.app-shell-v2 #profile .profile-skill-row,
body.app-shell-v2 #profile .team-profile-role-shortcut {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--w2g-line);
  border-radius: var(--w2g-r-md);
  background: var(--w2g-surface-2);
}

body.app-shell-v2 #profile .profile-social-action-row {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

body.app-shell-v2 #profile .profile-social-block {
  min-width: 0;
}

body.app-shell-v2 #profile .profile-social-links a,
body.app-shell-v2 #profile .social-link-pill {
  border: 1px solid var(--w2g-line);
  background: var(--w2g-surface);
  color: var(--w2g-ink);
  box-shadow: none;
}

body.app-shell-v2 #profile .profile-university-card {
  display: flex;
  gap: 12px;
  align-items: center;
}

body.app-shell-v2 #profile .profile-university-card span,
body.app-shell-v2 #profile .profile-university-card small {
  color: var(--w2g-muted);
}

body.app-shell-v2 #profile .profile-university-card strong {
  color: var(--w2g-ink);
}

body.app-shell-v2 #profile .profile-skill-row {
  gap: 8px;
}

body.app-shell-v2 #profile .profile-skill-row .tag {
  border-color: rgba(21, 163, 74, 0.22);
  background: var(--w2g-match-soft);
  color: var(--w2g-match-ink);
}

body.app-shell-v2 #profile .profile-saved-redirect-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

body.app-shell-v2 #profile .profile-saved-redirect-card h3 {
  margin: 0;
  color: var(--w2g-ink);
  font-size: 20px;
}

body.app-shell-v2 #profile .profile-saved-redirect-card p:first-of-type {
  padding: 13px;
  border: 1px solid var(--w2g-line);
  border-radius: var(--w2g-r-md);
  background: var(--w2g-surface-2);
  color: var(--w2g-body);
  font-weight: 800;
  line-height: 1.7;
}

body.app-shell-v2 #profile .profile-bottom-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 12px;
}

body.app-shell-v2 #profile .profile-logout-button {
  border-color: var(--w2g-line);
  background: var(--w2g-surface);
  color: var(--w2g-ink);
  box-shadow: none;
}

html[data-theme="dark"] body[data-page="login"].auth-page,
html[data-theme="dark"] body.onboarding-page {
  background:
    radial-gradient(circle at 12% 0%, rgba(251, 146, 60, 0.12), transparent 26%),
    linear-gradient(180deg, #0f172a 0%, #111827 100%) !important;
}

html[data-theme="dark"] body[data-page="login"] .auth-info-panel,
html[data-theme="dark"] body[data-page="login"] .auth-form-panel,
html[data-theme="dark"] body[data-page="login"] .form-card.auth-card-redesign,
html[data-theme="dark"] body.onboarding-page .onboarding-side,
html[data-theme="dark"] body.onboarding-page .form-card.wide,
html[data-theme="dark"] body.app-shell-v2 #profile .content-card {
  background: var(--w2g-surface) !important;
  border-color: var(--w2g-line) !important;
}

html[data-theme="dark"] body[data-page="login"] .auth-role-note,
html[data-theme="dark"] body[data-page="login"] .auth-role-select,
html[data-theme="dark"] body.onboarding-page #onboardingNotes .info-card,
html[data-theme="dark"] body.onboarding-page #onboardingProgress,
html[data-theme="dark"] body.onboarding-page #onboardingForm label,
html[data-theme="dark"] body.onboarding-page .multi-select-field,
html[data-theme="dark"] body.onboarding-page .university-picker-card,
html[data-theme="dark"] body.onboarding-page .skill-level-board,
html[data-theme="dark"] body.app-shell-v2 #profile .profile-photo-panel,
html[data-theme="dark"] body.app-shell-v2 #profile .profile-social-action-row,
html[data-theme="dark"] body.app-shell-v2 #profile .profile-university-card,
html[data-theme="dark"] body.app-shell-v2 #profile .profile-skill-row,
html[data-theme="dark"] body.app-shell-v2 #profile .profile-saved-redirect-card p:first-of-type {
  background: var(--w2g-surface-2) !important;
  border-color: var(--w2g-line) !important;
}

@media (max-width: 980px) {
  body[data-page="login"] .auth-shell.auth-redesign,
  body.onboarding-page .onboarding-shell,
  body.app-shell-v2 #profile .dashboard-layout {
    grid-template-columns: 1fr;
  }

  body[data-page="login"] .auth-info-panel,
  body[data-page="login"] .auth-form-panel {
    min-height: auto;
  }

  body[data-page="login"] .auth-hero-copy {
    margin-top: 42px;
  }

  body[data-page="login"] .auth-hero-copy h1 {
    max-width: 16ch;
  }

  body.onboarding-page .onboarding-side {
    position: static;
  }
}

@media (max-width: 680px) {
  body[data-page="login"] .auth-shell.auth-redesign,
  body.onboarding-page .onboarding-shell {
    width: min(100% - 24px, 560px);
    padding: 18px 0 30px;
  }

  body[data-page="login"] .auth-info-panel,
  body[data-page="login"] .auth-form-panel,
  body[data-page="login"] .form-card.auth-card-redesign,
  body.onboarding-page .onboarding-side,
  body.onboarding-page .form-card.wide {
    border-radius: var(--w2g-r-lg);
  }

  body[data-page="login"] .auth-info-panel,
  body[data-page="login"] .auth-form-panel,
  body.onboarding-page .onboarding-side,
  body.onboarding-page .form-card.wide {
    padding: 18px;
  }

  body[data-page="login"] .auth-language-row {
    justify-content: space-between;
  }

  body[data-page="login"] .role-grid,
  body[data-page="login"] .two-col,
  body.onboarding-page .form-grid.two,
  body.onboarding-page .form-grid.three,
  body.onboarding-page .choice-grid,
  body.onboarding-page .role-grid {
    grid-template-columns: 1fr !important;
  }

  body.app-shell-v2 #profile .profile-photo-panel,
  body.app-shell-v2 #profile .profile-social-action-row {
    grid-template-columns: 1fr;
    align-items: start;
  }

  body.app-shell-v2 #profile .profile-social-action-row {
    flex-direction: column;
  }

  body.app-shell-v2 #profile .profile-social-action-row .button,
  body.app-shell-v2 #profile .profile-saved-redirect-card .button,
  body.app-shell-v2 #profile .profile-bottom-actions .button,
  body.onboarding-page .button-row.between .button {
    width: 100%;
    justify-content: center;
  }
}

/* Phase 5 auth regression hotfix -- keep behavior untouched */
body[data-page="login"] .auth-shell.auth-redesign {
  grid-template-columns: minmax(360px, 0.95fr) minmax(380px, 0.82fr);
  gap: clamp(20px, 3vw, 34px);
}

body[data-page="login"] .auth-info-panel,
body[data-page="login"] .auth-form-panel {
  min-height: clamp(560px, 78vh, 650px);
}

body[data-page="login"] .auth-form-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

body[data-page="login"] .auth-language-row {
  width: 100%;
  max-width: 500px;
  margin: 0 auto 14px;
}

body[data-page="login"] .form-card.auth-card-redesign {
  max-width: 500px;
  margin: 0 auto;
}

body[data-page="login"] .auth-hero-copy {
  margin-top: clamp(40px, 8vh, 86px);
}

body[data-page="login"] .auth-hero-copy h1 {
  max-width: 13.5ch;
}

body[data-page="login"] .auth-note-grid {
  margin-top: clamp(22px, 4vh, 32px);
}

body[data-page="login"] .auth-role-note,
body[data-page="login"] .auth-note-grid div {
  border-color: rgba(148, 163, 184, 0.34) !important;
  background: color-mix(in srgb, var(--w2g-surface) 88%, var(--w2g-orange-soft) 12%) !important;
  color: var(--w2g-body) !important;
}

body[data-page="login"] .auth-role-note strong,
body[data-page="login"] .auth-note-grid div strong {
  color: var(--w2g-ink) !important;
  -webkit-text-fill-color: var(--w2g-ink) !important;
}

body[data-page="login"] .auth-role-note span,
body[data-page="login"] .auth-note-grid div span {
  color: var(--w2g-body) !important;
  -webkit-text-fill-color: var(--w2g-body) !important;
  opacity: 1 !important;
}

body[data-page="login"] .auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--w2g-line) !important;
  background: var(--w2g-surface-2) !important;
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.05);
}

body[data-page="login"] .auth-tabs button,
body[data-page="login"] .auth-tabs button:not(.active) {
  min-height: 42px;
  border: 0 !important;
  background: transparent !important;
  color: var(--w2g-muted) !important;
  -webkit-text-fill-color: var(--w2g-muted) !important;
  opacity: 1 !important;
  box-shadow: none !important;
}

body[data-page="login"] .auth-tabs button:hover:not(.active) {
  background: color-mix(in srgb, var(--w2g-surface) 72%, var(--w2g-orange-soft) 28%) !important;
  color: var(--w2g-ink) !important;
  -webkit-text-fill-color: var(--w2g-ink) !important;
}

body[data-page="login"] .auth-tabs button.active {
  border: 1px solid var(--w2g-orange-line) !important;
  background: var(--w2g-orange) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  opacity: 1 !important;
  box-shadow: var(--w2g-shadow-sm) !important;
}

body[data-page="login"] #authMessage.message {
  display: block;
  min-height: 0;
  margin: 12px 0;
  padding: 12px 14px;
  border-radius: var(--w2g-r-md);
  font-weight: 600;
}

body[data-page="login"] #authMessage.message.hidden {
  display: none;
}

body[data-page="login"] #authMessage.message.info,
body[data-page="login"] #authMessage.message.info.hidden {
  display: block !important;
  border: 1px solid var(--w2g-orange-line) !important;
  background: var(--w2g-orange-soft) !important;
  color: var(--w2g-orange-ink) !important;
  -webkit-text-fill-color: var(--w2g-orange-ink) !important;
}

html[data-theme="dark"] body[data-page="login"] .auth-role-note,
html[data-theme="dark"] body[data-page="login"] .auth-note-grid div {
  border-color: rgba(148, 163, 184, 0.28) !important;
  background: rgba(30, 41, 59, 0.92) !important;
  color: var(--w2g-body) !important;
}

html[data-theme="dark"] body[data-page="login"] .auth-role-note strong,
html[data-theme="dark"] body[data-page="login"] .auth-note-grid div strong {
  color: var(--w2g-ink) !important;
  -webkit-text-fill-color: var(--w2g-ink) !important;
}

html[data-theme="dark"] body[data-page="login"] .auth-role-note span,
html[data-theme="dark"] body[data-page="login"] .auth-note-grid div span {
  color: #cbd5e1 !important;
  -webkit-text-fill-color: #cbd5e1 !important;
}

html[data-theme="dark"] body[data-page="login"] .auth-tabs {
  background: rgba(15, 23, 42, 0.72) !important;
}

html[data-theme="dark"] body[data-page="login"] .auth-tabs button:not(.active) {
  color: #cbd5e1 !important;
  -webkit-text-fill-color: #cbd5e1 !important;
}

html[data-theme="dark"] body[data-page="login"] #authMessage.message.info,
html[data-theme="dark"] body[data-page="login"] #authMessage.message.info.hidden {
  border-color: rgba(251, 146, 60, 0.34) !important;
  background: rgba(251, 146, 60, 0.14) !important;
  color: #fed7aa !important;
  -webkit-text-fill-color: #fed7aa !important;
}

@media (max-width: 980px) {
  body[data-page="login"] .auth-shell.auth-redesign {
    grid-template-columns: 1fr;
  }

  body[data-page="login"] .auth-info-panel,
  body[data-page="login"] .auth-form-panel {
    min-height: auto;
  }

  body[data-page="login"] .auth-form-panel {
    display: block;
  }
}

@media (max-width: 680px) {
  body[data-page="login"] .auth-shell.auth-redesign {
    gap: 14px;
  }

  body[data-page="login"] .auth-hero-copy {
    margin-top: 32px;
  }

  body[data-page="login"] .auth-tabs button,
  body[data-page="login"] .auth-tabs button.active {
    min-height: 44px;
  }
}

/* W2G Design v2 Phase 6 -- Requests, invitations, and notifications */
body.app-shell-v2 #requests .section-title-row {
  align-items: center;
  gap: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--w2g-line);
}

body.app-shell-v2 #requests .section-title-row h1 {
  color: var(--w2g-ink);
  letter-spacing: 0;
}

body.app-shell-v2 #requestTabs.tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
  padding: 8px;
  margin: 18px 0;
  border: 1px solid var(--w2g-line);
  border-radius: var(--w2g-r-lg);
  background: var(--w2g-surface);
  box-shadow: var(--w2g-shadow-sm);
}

body.app-shell-v2 #requestTabs.tabs button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: var(--w2g-r-md);
  background: transparent;
  color: var(--w2g-muted);
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  box-shadow: none;
}

body.app-shell-v2 #requestTabs.tabs button:hover {
  border-color: var(--w2g-line);
  background: var(--w2g-surface-2);
  color: var(--w2g-ink);
}

body.app-shell-v2 #requestTabs.tabs button.active {
  border-color: var(--w2g-orange-line);
  background: var(--w2g-orange-soft);
  color: var(--w2g-orange-ink);
}

body.app-shell-v2 #requestTabs.tabs .request-tab-label {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

body.app-shell-v2 #requestTabs.tabs .request-tab-label iconify-icon {
  flex: 0 0 auto;
  color: inherit;
}

.request-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 26px;
  padding: 0 8px;
  border-radius: var(--w2g-r-pill);
  background: var(--w2g-surface-2);
  color: var(--w2g-ink);
  font-size: 12px;
  font-weight: 700;
}

body.app-shell-v2 #requestTabs.tabs button.active .request-tab-count {
  background: var(--w2g-orange);
  color: #fff;
}

.request-v2-list {
  display: grid;
  gap: 12px;
}

.request-v2-section {
  display: grid;
  gap: 10px;
}

.request-v2-section > h3 {
  margin: 0;
  color: var(--w2g-ink);
  font-size: 16px;
  letter-spacing: 0;
}

.request-v2-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
  padding: 16px;
  border: 1px solid var(--w2g-line);
  border-radius: var(--w2g-r-lg);
  background: var(--w2g-surface);
  box-shadow: var(--w2g-shadow-sm);
}

.request-v2-card.request-v2-urgent,
.request-v2-card.urgent,
.request-v2-card.request-v2-workspace-request {
  border-left: 4px solid var(--w2g-orange);
}

.request-v2-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.request-v2-head h3 {
  margin: 4px 0 0;
  color: var(--w2g-ink);
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: 0;
}

.request-v2-kicker {
  color: var(--w2g-orange-ink);
}

.request-v2-subtitle {
  margin: 8px 0 0;
  color: var(--w2g-body);
  line-height: 1.45;
}

.request-v2-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
}

.request-v2-meta span {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  min-height: 26px;
  padding: 4px 9px;
  border: 1px solid var(--w2g-line);
  border-radius: var(--w2g-r-pill);
  background: var(--w2g-surface-2);
  color: var(--w2g-muted);
  font-size: 12px;
  font-weight: 600;
}

.request-v2-meta b {
  color: var(--w2g-ink);
  font-weight: 700;
}

.request-v2-message {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--w2g-line);
  border-radius: var(--w2g-r-md);
  background: var(--w2g-surface-2);
}

.request-v2-message span {
  display: block;
  margin-bottom: 4px;
  color: var(--w2g-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.request-v2-message p {
  margin: 0;
  color: var(--w2g-body);
  line-height: 1.45;
}

.request-v2-side {
  display: grid;
  gap: 10px;
  justify-items: end;
  min-width: 180px;
}

.request-v2-actions {
  justify-content: flex-end;
}

.request-v2-organizer-applicant .organizer-applicant-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.request-v2-organizer-applicant .organizer-applicant-heading strong {
  display: block;
  margin: 4px 0 0;
  color: var(--w2g-ink);
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: 0;
}

.request-v2-organizer-applicant .organizer-applicant-heading p,
.request-v2-organizer-applicant .organizer-applicant-v2-main > p {
  margin: 8px 0 0;
  color: var(--w2g-body);
  line-height: 1.45;
}

.request-v2-organizer-applicant .tag-row {
  margin-top: 12px;
}

.organizer-applicant-v2-actions .field-label {
  width: 100%;
}

.organizer-applicant-v2-actions select {
  width: 100%;
  min-width: 180px;
}

.request-v2-actions .button.primary {
  background: var(--w2g-orange);
  color: #fff;
}

.request-v2-actions .button.danger,
.request-v2-actions .button.danger.ghost {
  border-color: rgba(220, 38, 38, 0.22);
  background: transparent;
  color: #b91c1c;
  box-shadow: none;
}

.request-v2-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 4px 9px;
  border: 1px solid var(--w2g-line);
  border-radius: var(--w2g-r-pill);
  background: var(--w2g-surface-2);
  color: var(--w2g-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
}

.request-v2-status-pending {
  border-color: var(--w2g-orange-line);
  background: var(--w2g-orange-soft);
  color: var(--w2g-orange-ink);
}

.request-v2-status-accepted {
  border-color: rgba(21, 163, 74, 0.26);
  background: var(--w2g-match-soft);
  color: var(--w2g-match-ink);
}

.request-v2-status-rejected {
  border-color: rgba(220, 38, 38, 0.20);
  background: rgba(220, 38, 38, 0.08);
  color: #b91c1c;
}

.request-v2-empty {
  display: grid;
  gap: 8px;
  min-height: 140px;
  place-items: center;
  padding: 24px;
  border: 1px dashed var(--w2g-line);
  border-radius: var(--w2g-r-lg);
  background: var(--w2g-surface);
  text-align: center;
  box-shadow: none;
}

.request-v2-empty strong {
  color: var(--w2g-ink);
}

.request-v2-empty p {
  max-width: 520px;
  margin: 0;
}

.request-v2-history-row {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.workspace-action-list.request-v2-list {
  gap: 10px;
}

.workspace-actions-section .request-v2-card {
  box-shadow: none;
}

.notification-v2-list {
  gap: 10px;
}

.notification-v2-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--w2g-line);
  border-radius: var(--w2g-r-md);
  background: var(--w2g-surface);
}

.notification-v2-row.is-unread {
  border-color: var(--w2g-orange-line);
  background: var(--w2g-orange-soft);
}

.notification-v2-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--w2g-r-md);
  background: var(--w2g-surface-2);
  color: var(--w2g-orange-ink);
  font-weight: 700;
}

.notification-v2-copy {
  min-width: 0;
}

.notification-v2-copy strong {
  display: block;
  color: var(--w2g-ink);
  line-height: 1.3;
}

.notification-v2-copy p {
  margin: 4px 0 0;
  color: var(--w2g-muted);
  font-size: 12px;
}

.notif-action-hint {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border: 1px solid var(--w2g-line);
  border-radius: var(--w2g-r-pill);
  background: var(--w2g-surface-2);
  color: var(--w2g-ink);
  font-size: 12px;
  font-weight: 700;
}

html[data-theme="dark"] .request-v2-card,
html[data-theme="dark"] .request-v2-empty,
html[data-theme="dark"] .notification-v2-row {
  border-color: var(--w2g-line);
  background: var(--w2g-surface);
}

html[data-theme="dark"] .request-v2-meta span,
html[data-theme="dark"] .request-v2-message,
html[data-theme="dark"] .notification-v2-icon,
html[data-theme="dark"] .notif-action-hint {
  background: var(--w2g-surface-2);
}

html[data-theme="dark"] .request-v2-actions .button.danger,
html[data-theme="dark"] .request-v2-actions .button.danger.ghost {
  color: #fca5a5;
}

html[data-theme="dark"] .request-v2-status-rejected {
  background: rgba(220, 38, 38, 0.14);
  color: #fca5a5;
}

html[data-theme="dark"] .notification-v2-row.is-unread {
  background: rgba(251, 146, 60, 0.12);
}

@media (max-width: 760px) {
  body.app-shell-v2 #requestTabs.tabs {
    grid-template-columns: 1fr;
  }

  .request-v2-card {
    grid-template-columns: 1fr;
  }

  .request-v2-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .request-v2-organizer-applicant .organizer-applicant-heading {
    flex-direction: column;
    align-items: flex-start;
  }

  .request-v2-side {
    width: 100%;
    min-width: 0;
    justify-items: stretch;
  }

  .request-v2-actions,
  .request-v2-actions .button {
    width: 100%;
    justify-content: center;
  }

  .notification-v2-row {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .notification-v2-row .notif-action-hint {
    grid-column: 1 / -1;
    justify-content: center;
  }
}

/* W2G Design v2 Visual Parity Phase 1 -- Login/Register only */
body[data-page="login"].auth-page {
  min-height: 100dvh;
  overflow-x: hidden;
  background:
    linear-gradient(180deg, #F8FAFC 0%, #F3F6FA 100%) !important;
}

body[data-page="login"] .auth-shell.auth-redesign {
  width: min(1120px, calc(100% - 32px));
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(390px, 0.86fr);
  gap: clamp(20px, 3vw, 36px);
  align-items: center;
  padding: clamp(22px, 4vh, 42px) 0;
  margin: 0 auto;
}

body[data-page="login"] .auth-info-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: clamp(560px, 82vh, 680px);
  padding: clamp(28px, 4.3vw, 48px);
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 18px;
  background:
    linear-gradient(135deg, #0F172A 0%, #172033 58%, #1E293B 100%) !important;
  color: #FFFFFF;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.18) !important;
}

body[data-page="login"] .auth-info-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(135deg, #000 0%, rgba(0, 0, 0, 0.72) 42%, transparent 86%);
  pointer-events: none;
}

body[data-page="login"] .auth-info-panel::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 42%;
  background: linear-gradient(180deg, transparent 0%, rgba(234, 88, 12, 0.13) 100%);
  filter: none;
  pointer-events: none;
}

body[data-page="login"] .auth-info-panel > * {
  position: relative;
  z-index: 1;
}

body[data-page="login"] .auth-brand,
body[data-page="login"] .auth-brand.light {
  width: fit-content;
  color: #FFFFFF;
}

body[data-page="login"] .auth-brand .brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.34), transparent 38%),
    linear-gradient(135deg, #F97316 0%, #EA580C 100%);
  color: #FFFFFF;
  box-shadow: 0 10px 24px rgba(234, 88, 12, 0.28);
}

body[data-page="login"] .auth-brand strong {
  color: #FFFFFF;
  font-size: 15px;
}

body[data-page="login"] .auth-brand small {
  color: rgba(226, 232, 240, 0.72);
}

body[data-page="login"] .auth-hero-copy {
  max-width: 470px;
  margin-top: auto;
  padding-top: 64px;
}

body[data-page="login"] .auth-hero-copy .eyebrow,
body[data-page="login"] .auth-hero-copy .light-text {
  color: #FDBA74 !important;
}

body[data-page="login"] .auth-kicker-dot {
  width: 9px;
  height: 9px;
  margin-bottom: 12px;
  background: #F97316;
  box-shadow: 0 0 0 5px rgba(249, 115, 22, 0.18);
}

body[data-page="login"] .auth-hero-copy h1 {
  max-width: 11.4ch;
  margin: 10px 0 16px;
  color: #FFFFFF;
  font-size: clamp(38px, 5.2vw, 62px);
  line-height: 0.98;
  letter-spacing: 0;
}

body[data-page="login"] .auth-hero-copy p:not(.eyebrow) {
  max-width: 430px;
  color: rgba(226, 232, 240, 0.78);
  font-size: 15px;
  line-height: 1.62;
  font-weight: 550;
}

body[data-page="login"] .auth-note-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: clamp(28px, 6vh, 48px);
}

body[data-page="login"] .auth-role-note,
body[data-page="login"] .auth-note-grid div {
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.055) !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
}

body[data-page="login"] .auth-role-note strong,
body[data-page="login"] .auth-note-grid div strong {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  font-size: 13px;
}

body[data-page="login"] .auth-role-note span,
body[data-page="login"] .auth-note-grid div span {
  color: rgba(226, 232, 240, 0.70) !important;
  -webkit-text-fill-color: rgba(226, 232, 240, 0.70) !important;
  font-size: 12px;
  line-height: 1.45;
}

body[data-page="login"] .auth-footer-copy {
  margin: auto 0 0;
  padding-top: 28px;
  color: rgba(226, 232, 240, 0.58) !important;
  font-size: 12px;
  font-weight: 600;
}

body[data-page="login"] .auth-form-panel {
  min-height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-page="login"] .auth-language-row {
  width: min(100%, 430px);
  max-width: 430px;
  justify-content: flex-end;
  gap: 8px;
  margin: 0 auto 14px;
}

body[data-page="login"] .language-switch,
body[data-page="login"] .theme-toggle {
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  background: #FFFFFF;
  color: #334155;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
}

body[data-page="login"] .language-switch button {
  min-height: 34px;
  border-radius: 9px;
  font-size: 12px;
}

body[data-page="login"] .theme-toggle {
  height: 38px;
  min-width: 76px;
}

body[data-page="login"] .form-card.auth-card-redesign {
  width: min(100%, 430px);
  max-width: 430px;
  margin: 0 auto;
  padding: clamp(22px, 3vw, 30px);
  border: 1px solid #E8EDF3 !important;
  border-radius: 16px;
  background: #FFFFFF !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.80) inset,
    0 22px 56px rgba(15, 23, 42, 0.10) !important;
}

body[data-page="login"] .auth-card-heading {
  margin-bottom: 18px;
}

body[data-page="login"] .auth-card-heading .eyebrow {
  margin-bottom: 7px;
  color: #C2410C;
}

body[data-page="login"] .auth-card-heading h2 {
  margin: 0;
  color: #0F172A;
  font-size: 25px;
  line-height: 1.12;
  letter-spacing: 0;
}

body[data-page="login"] .auth-card-heading p:last-child {
  margin: 8px 0 0;
  color: #64748B;
  font-size: 13.5px;
  line-height: 1.5;
  font-weight: 550;
}

body[data-page="login"] .auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-bottom: 12px;
  padding: 4px;
  border: 1px solid #E5E7EB !important;
  border-radius: 12px;
  background: #F8FAFC !important;
  box-shadow: none;
}

body[data-page="login"] .auth-tabs button,
body[data-page="login"] .auth-tabs button:not(.active) {
  min-height: 40px;
  border: 0 !important;
  border-radius: 9px;
  background: transparent !important;
  color: #64748B !important;
  -webkit-text-fill-color: #64748B !important;
  font-size: 13.5px;
  font-weight: 800;
}

body[data-page="login"] .auth-tabs button:hover:not(.active) {
  background: #FFFFFF !important;
  color: #0F172A !important;
  -webkit-text-fill-color: #0F172A !important;
}

body[data-page="login"] .auth-tabs button.active {
  border: 0 !important;
  background: #EA580C !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  box-shadow: 0 8px 18px rgba(234, 88, 12, 0.22) !important;
}

body[data-page="login"] .quick-access-notice {
  display: block;
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid #FBD9C4 !important;
  border-radius: 12px;
  background: #FFF7ED !important;
  color: #B7400B !important;
  font-size: 12.5px;
  line-height: 1.45;
  font-weight: 600;
}

body[data-page="login"] .auth-role-select {
  margin: 0 0 14px;
  padding: 14px;
  border: 1px solid #E8EDF3 !important;
  border-radius: 14px;
  background: #FBFCFE !important;
  box-shadow: none !important;
}

body[data-page="login"] .role-select-head {
  margin-bottom: 10px;
}

body[data-page="login"] .role-select-head .field-help {
  margin: 0 0 3px;
  color: #0F172A;
  font-size: 12px;
}

body[data-page="login"] .role-select-head small {
  color: #64748B;
}

body[data-page="login"] .role-grid {
  grid-template-columns: 1fr;
  gap: 8px;
}

body[data-page="login"] .role-grid button {
  min-height: auto;
  padding: 12px 13px;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  background: #FFFFFF;
  color: #475569;
  box-shadow: none;
}

body[data-page="login"] .role-grid button:hover {
  border-color: #FBD9C4;
  background: #FFF7ED;
}

body[data-page="login"] .role-grid button.active {
  border-color: #EA580C;
  background: #FFF7ED;
  color: #B7400B;
  box-shadow: inset 0 0 0 1px #FBD9C4;
}

body[data-page="login"] .role-grid button strong {
  color: #0F172A;
  font-size: 13.5px;
}

body[data-page="login"] .role-grid button small {
  color: #64748B;
  font-size: 12px;
  line-height: 1.42;
}

body[data-page="login"] .auth-card-redesign .stack {
  gap: 12px;
}

body[data-page="login"] .auth-card-redesign label span {
  margin-bottom: 7px;
  color: #334155;
  font-size: 12px;
  font-weight: 800;
}

body[data-page="login"] .auth-card-redesign input {
  min-height: 44px;
  padding: 11px 12px;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  background: #FFFFFF;
  color: #0F172A;
  font-size: 14px;
  font-weight: 550;
  box-shadow: none;
}

body[data-page="login"] .auth-card-redesign input::placeholder {
  color: #94A3B8;
}

body[data-page="login"] .auth-card-redesign input:focus,
body[data-page="login"] .role-grid button:focus-visible,
body[data-page="login"] .auth-tabs button:focus-visible {
  border-color: #EA580C;
  outline: 3px solid rgba(234, 88, 12, 0.14);
  outline-offset: 1px;
  box-shadow: none;
}

body[data-page="login"] .auth-card-redesign .button.primary {
  min-height: 44px;
  margin-top: 2px;
  border: 1px solid #EA580C;
  border-radius: 12px;
  background: #EA580C;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 10px 24px rgba(234, 88, 12, 0.22);
}

body[data-page="login"] .auth-card-redesign .button.primary:hover {
  background: #C2410C;
  border-color: #C2410C;
  box-shadow: 0 14px 30px rgba(234, 88, 12, 0.26);
}

body[data-page="login"] #authMessage.message {
  margin: 12px 0;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 12.5px;
}

html[data-theme="dark"] body[data-page="login"].auth-page {
  background:
    linear-gradient(180deg, #080E19 0%, #0B1220 100%) !important;
}

html[data-theme="dark"] body[data-page="login"] .auth-info-panel {
  border-color: rgba(148, 163, 184, 0.16) !important;
  background:
    linear-gradient(135deg, #050A12 0%, #0F172A 58%, #162033 100%) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34) !important;
}

html[data-theme="dark"] body[data-page="login"] .auth-form-panel {
  background: transparent !important;
}

html[data-theme="dark"] body[data-page="login"] .language-switch,
html[data-theme="dark"] body[data-page="login"] .theme-toggle,
html[data-theme="dark"] body[data-page="login"] .form-card.auth-card-redesign,
html[data-theme="dark"] body[data-page="login"] .auth-role-select,
html[data-theme="dark"] body[data-page="login"] .role-grid button,
html[data-theme="dark"] body[data-page="login"] .auth-card-redesign input {
  border-color: rgba(148, 163, 184, 0.20) !important;
  background: rgba(15, 23, 42, 0.92) !important;
  color: #E2E8F0;
}

html[data-theme="dark"] body[data-page="login"] .form-card.auth-card-redesign {
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.38) !important;
}

html[data-theme="dark"] body[data-page="login"] .auth-card-heading h2,
html[data-theme="dark"] body[data-page="login"] .role-select-head .field-help,
html[data-theme="dark"] body[data-page="login"] .role-grid button strong,
html[data-theme="dark"] body[data-page="login"] .auth-card-redesign label span,
html[data-theme="dark"] body[data-page="login"] .auth-card-redesign input {
  color: #F8FAFC;
}

html[data-theme="dark"] body[data-page="login"] .auth-card-heading p:last-child,
html[data-theme="dark"] body[data-page="login"] .role-select-head small,
html[data-theme="dark"] body[data-page="login"] .role-grid button small {
  color: #94A3B8;
}

html[data-theme="dark"] body[data-page="login"] .auth-tabs {
  border-color: rgba(148, 163, 184, 0.20) !important;
  background: rgba(2, 6, 23, 0.66) !important;
}

html[data-theme="dark"] body[data-page="login"] .auth-tabs button:not(.active) {
  color: #CBD5E1 !important;
  -webkit-text-fill-color: #CBD5E1 !important;
}

html[data-theme="dark"] body[data-page="login"] .auth-tabs button:hover:not(.active),
html[data-theme="dark"] body[data-page="login"] .role-grid button:hover {
  background: rgba(249, 115, 22, 0.12) !important;
}

html[data-theme="dark"] body[data-page="login"] .quick-access-notice,
html[data-theme="dark"] body[data-page="login"] #authMessage.message.info,
html[data-theme="dark"] body[data-page="login"] #authMessage.message.info.hidden {
  border-color: rgba(249, 115, 22, 0.30) !important;
  background: rgba(249, 115, 22, 0.13) !important;
  color: #FDBA74 !important;
}

html[data-theme="dark"] body[data-page="login"] .role-grid button.active {
  border-color: #F97316 !important;
  background: rgba(249, 115, 22, 0.16) !important;
  color: #FDBA74;
}

@media (max-width: 920px) {
  body[data-page="login"] .auth-shell.auth-redesign {
    width: min(100% - 28px, 620px);
    grid-template-columns: 1fr;
    gap: 18px;
    align-items: stretch;
    padding: 18px 0 32px;
  }

  body[data-page="login"] .auth-info-panel {
    min-height: auto;
  }

  body[data-page="login"] .auth-hero-copy {
    margin-top: 42px;
    padding-top: 0;
  }

  body[data-page="login"] .auth-hero-copy h1 {
    max-width: 14ch;
    font-size: clamp(34px, 10vw, 48px);
  }

  body[data-page="login"] .auth-note-grid {
    grid-template-columns: 1fr;
    margin-top: 24px;
  }
}

@media (max-width: 560px) {
  body[data-page="login"] .auth-shell.auth-redesign {
    width: min(100% - 20px, 440px);
    gap: 12px;
    padding: 10px 0 24px;
  }

  body[data-page="login"] .auth-info-panel,
  body[data-page="login"] .form-card.auth-card-redesign {
    border-radius: 14px;
  }

  body[data-page="login"] .auth-info-panel {
    padding: 22px;
  }

  body[data-page="login"] .auth-form-panel {
    padding: 0;
  }

  body[data-page="login"] .auth-language-row {
    width: 100%;
    justify-content: space-between;
    margin-bottom: 10px;
  }

  body[data-page="login"] .form-card.auth-card-redesign {
    width: 100%;
    padding: 20px;
  }

  body[data-page="login"] .auth-card-heading h2 {
    font-size: 22px;
  }

  body[data-page="login"] .two-col,
  body[data-page="login"] .role-grid {
    grid-template-columns: 1fr !important;
  }

  body[data-page="login"] .theme-toggle-label {
    display: none;
  }

  body[data-page="login"] .theme-toggle {
    min-width: 40px;
    width: 40px;
    padding: 0;
  }
}

/* W2G Design v2 Phase 1 reference reconciliation -- approved auth kit */
body[data-page="login"].auth-page {
  min-height: 100vh;
  background: #F6F7F9 !important;
  color: #0C1019;
  font-family: "DM Sans", "Bai Jamjuree", system-ui, -apple-system, "Segoe UI", sans-serif;
}

body[data-page="login"] .auth-shell.auth-redesign {
  width: 100%;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 0;
  align-items: stretch;
  padding: 0;
  margin: 0;
}

body[data-page="login"] .auth-info-panel {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 44px 48px;
  border: 0 !important;
  border-right: 1px solid #E5E8EC !important;
  border-radius: 0;
  background: #FFFFFF !important;
  color: #0C1019;
  box-shadow: none !important;
}

body[data-page="login"] .auth-info-panel::before {
  display: none;
}

body[data-page="login"] .auth-info-panel::after {
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  inset: -90px -120px auto auto;
  border-radius: 999px;
  background: radial-gradient(circle, #FFF1E8, transparent 70%);
  filter: none;
  pointer-events: none;
}

body[data-page="login"] .auth-brand,
body[data-page="login"] .auth-brand.light {
  color: #0C1019;
  gap: 12px;
}

body[data-page="login"] .auth-brand .brand-mark {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: #EA580C;
  color: #FFFFFF;
  font-size: 14px;
  box-shadow: none;
}

body[data-page="login"] .auth-brand strong {
  color: #0C1019;
  font-size: 14px;
}

body[data-page="login"] .auth-brand small {
  color: #6B7382;
  font-size: 11.5px;
}

body[data-page="login"] .auth-hero-copy {
  max-width: 42ch;
  margin: 0;
  padding-top: 0;
}

body[data-page="login"] .auth-kicker-dot,
body[data-page="login"] .auth-hero-copy .eyebrow {
  display: none;
}

body[data-page="login"] .auth-hero-copy h1 {
  max-width: 12ch;
  margin: 26px 0 14px;
  color: #0C1019;
  font-size: 30px;
  line-height: 1.12;
  letter-spacing: -0.03em;
  font-weight: 800;
}

body[data-page="login"] .auth-hero-copy p:not(.eyebrow) {
  max-width: 42ch;
  margin: 0 0 26px;
  color: #424A58;
  font-size: 14.5px;
  line-height: 1.55;
  font-weight: 450;
}

body[data-page="login"] .auth-note-grid {
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin-top: 0;
}

body[data-page="login"] .auth-role-note,
body[data-page="login"] .auth-note-grid div {
  position: relative;
  display: block;
  padding: 0 0 0 26px;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  color: #1E2531 !important;
  box-shadow: none !important;
}

body[data-page="login"] .auth-role-note::before,
body[data-page="login"] .auth-note-grid div::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 3px;
  width: 15px;
  height: 15px;
  border: 1px solid #FBD9C4;
  border-radius: 5px;
  background: #FFF1E8;
  box-shadow: inset 0 0 0 4px #FFFFFF;
}

body[data-page="login"] .auth-role-note strong,
body[data-page="login"] .auth-note-grid div strong {
  display: inline;
  color: #1E2531 !important;
  -webkit-text-fill-color: #1E2531 !important;
  font-size: 13.5px;
  font-weight: 600;
}

body[data-page="login"] .auth-role-note span,
body[data-page="login"] .auth-note-grid div span {
  display: inline;
  margin-left: 4px;
  color: #424A58 !important;
  -webkit-text-fill-color: #424A58 !important;
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 500;
}

body[data-page="login"] .auth-footer-copy {
  margin: 0;
  padding: 0;
  color: #6B7382 !important;
  font-size: 12px;
  line-height: 1.45;
  font-weight: 500;
}

body[data-page="login"] .auth-form-panel {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 32px;
  border: 0 !important;
  border-radius: 0;
  background: #F6F7F9 !important;
  box-shadow: none !important;
}

body[data-page="login"] .auth-language-row {
  width: 100%;
  max-width: 380px;
  margin: 0 auto 12px;
  justify-content: flex-end;
  gap: 8px;
}

body[data-page="login"] .language-switch,
body[data-page="login"] .theme-toggle {
  border: 1px solid #E5E8EC;
  border-radius: 10px;
  background: #FFFFFF;
  color: #424A58;
  box-shadow: none;
}

body[data-page="login"] .language-switch button {
  min-height: 32px;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 600;
}

body[data-page="login"] .language-switch button.active {
  background: #FFF1E8;
  color: #B7400B;
}

body[data-page="login"] .theme-toggle {
  height: 36px;
  min-width: 72px;
  font-size: 12px;
  font-weight: 600;
}

body[data-page="login"] .form-card.auth-card-redesign {
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
  padding: 26px;
  border: 1px solid #E5E8EC !important;
  border-radius: 16px;
  background: #FFFFFF !important;
  box-shadow: 0 2px 8px rgba(12, 16, 25, 0.06) !important;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

body[data-page="login"] .auth-card-heading {
  margin: 0;
}

body[data-page="login"] .auth-card-heading .eyebrow {
  display: none;
}

body[data-page="login"] .auth-card-heading h2 {
  margin: 0;
  color: #0C1019;
  font-size: 21px;
  line-height: 1.18;
  letter-spacing: -0.02em;
  font-weight: 800;
}

body[data-page="login"] .auth-card-heading p:last-child {
  margin: 6px 0 0;
  color: #6B7382;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 450;
}

body[data-page="login"] .auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin: 0;
  padding: 4px;
  border: 1px solid #E5E8EC !important;
  border-radius: 12px;
  background: #F1F3F6 !important;
  box-shadow: none;
}

body[data-page="login"] .auth-tabs button,
body[data-page="login"] .auth-tabs button:not(.active) {
  min-height: 36px;
  border: 0 !important;
  border-radius: 8px;
  background: transparent !important;
  color: #424A58 !important;
  -webkit-text-fill-color: #424A58 !important;
  font-size: 13px;
  font-weight: 600;
  box-shadow: none !important;
}

body[data-page="login"] .auth-tabs button.active {
  background: #FFFFFF !important;
  color: #0C1019 !important;
  -webkit-text-fill-color: #0C1019 !important;
  box-shadow: 0 1px 2px rgba(12, 16, 25, 0.05) !important;
}

body[data-page="login"] .quick-access-notice {
  margin: 0;
  padding: 9px 11px;
  border: 1px solid #FBD9C4 !important;
  border-radius: 10px;
  background: #FFF1E8 !important;
  color: #B7400B !important;
  font-size: 12px;
  line-height: 1.45;
  font-weight: 600;
}

body[data-page="login"] .auth-role-select {
  margin: 0;
  padding: 14px;
  border: 1px solid #E5E8EC !important;
  border-radius: 14px;
  background: #F6F7F9 !important;
  box-shadow: none !important;
}

body[data-page="login"] .role-grid {
  grid-template-columns: 1fr;
  gap: 9px;
}

body[data-page="login"] .role-grid button {
  min-height: auto;
  padding: 11px 12px;
  border: 1px solid #D6DAE1;
  border-radius: 10px;
  background: #FFFFFF;
  color: #424A58;
  box-shadow: none;
}

body[data-page="login"] .role-grid button.active {
  border-color: #FBD9C4;
  background: #FFF1E8;
  color: #B7400B;
  box-shadow: none;
}

body[data-page="login"] .auth-card-redesign .stack {
  gap: 12px;
}

body[data-page="login"] .auth-card-redesign label span {
  margin-bottom: 6px;
  color: #424A58;
  font-size: 12px;
  font-weight: 600;
}

body[data-page="login"] .auth-card-redesign input {
  min-height: 40px;
  padding: 10px 12px;
  border: 1px solid #D6DAE1;
  border-radius: 10px;
  background: #FFFFFF;
  color: #0C1019;
  font-size: 13.5px;
  font-weight: 500;
  box-shadow: none;
}

body[data-page="login"] .auth-card-redesign input::placeholder {
  color: #98A0AE;
}

body[data-page="login"] .auth-card-redesign input:focus,
body[data-page="login"] .role-grid button:focus-visible,
body[data-page="login"] .auth-tabs button:focus-visible {
  border-color: #EA580C;
  outline: 0;
  box-shadow: 0 0 0 3px #FFF1E8;
}

body[data-page="login"] .auth-card-redesign .button.primary {
  min-height: 45px;
  margin-top: 4px;
  padding: 12px 18px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: #EA580C;
  color: #FFFFFF;
  font-size: 14.5px;
  font-weight: 600;
  box-shadow: none;
  transform: none;
}

body[data-page="login"] .auth-card-redesign .button.primary:hover {
  background: #C2410C;
  border-color: transparent;
  box-shadow: none;
  transform: none;
}

body[data-page="login"] #authMessage.message {
  margin: 0;
  padding: 9px 11px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
}

body[data-page="login"] #authMessage.message.hidden {
  display: none !important;
}

html[data-theme="dark"] body[data-page="login"].auth-page {
  background: #0A0C11 !important;
  color: #F3F5F8;
}

html[data-theme="dark"] body[data-page="login"] .auth-info-panel {
  border-right-color: rgba(255, 255, 255, 0.08) !important;
  background: #14171E !important;
  color: #F3F5F8;
}

html[data-theme="dark"] body[data-page="login"] .auth-info-panel::after {
  background: radial-gradient(circle, rgba(249, 115, 22, 0.14), transparent 70%);
}

html[data-theme="dark"] body[data-page="login"] .auth-form-panel {
  background: #0A0C11 !important;
}

html[data-theme="dark"] body[data-page="login"] .auth-brand,
html[data-theme="dark"] body[data-page="login"] .auth-brand.light,
html[data-theme="dark"] body[data-page="login"] .auth-brand strong,
html[data-theme="dark"] body[data-page="login"] .auth-hero-copy h1,
html[data-theme="dark"] body[data-page="login"] .auth-card-heading h2 {
  color: #F3F5F8;
}

html[data-theme="dark"] body[data-page="login"] .auth-brand small,
html[data-theme="dark"] body[data-page="login"] .auth-footer-copy,
html[data-theme="dark"] body[data-page="login"] .auth-card-heading p:last-child {
  color: #828B9A !important;
}

html[data-theme="dark"] body[data-page="login"] .auth-hero-copy p:not(.eyebrow),
html[data-theme="dark"] body[data-page="login"] .auth-role-note span,
html[data-theme="dark"] body[data-page="login"] .auth-note-grid div span {
  color: #B9C0CC !important;
  -webkit-text-fill-color: #B9C0CC !important;
}

html[data-theme="dark"] body[data-page="login"] .auth-role-note strong,
html[data-theme="dark"] body[data-page="login"] .auth-note-grid div strong {
  color: #DDE2EA !important;
  -webkit-text-fill-color: #DDE2EA !important;
}

html[data-theme="dark"] body[data-page="login"] .auth-role-note::before,
html[data-theme="dark"] body[data-page="login"] .auth-note-grid div::before {
  border-color: rgba(249, 115, 22, 0.30);
  background: rgba(249, 115, 22, 0.14);
  box-shadow: inset 0 0 0 4px #14171E;
}

html[data-theme="dark"] body[data-page="login"] .language-switch,
html[data-theme="dark"] body[data-page="login"] .theme-toggle,
html[data-theme="dark"] body[data-page="login"] .form-card.auth-card-redesign,
html[data-theme="dark"] body[data-page="login"] .auth-card-redesign input,
html[data-theme="dark"] body[data-page="login"] .role-grid button {
  border-color: rgba(255, 255, 255, 0.14) !important;
  background: #14171E !important;
  color: #DDE2EA;
}

html[data-theme="dark"] body[data-page="login"] .auth-tabs,
html[data-theme="dark"] body[data-page="login"] .auth-role-select {
  border-color: rgba(255, 255, 255, 0.08) !important;
  background: #1B1F27 !important;
}

html[data-theme="dark"] body[data-page="login"] .auth-tabs button.active {
  background: #14171E !important;
  color: #F3F5F8 !important;
  -webkit-text-fill-color: #F3F5F8 !important;
}

html[data-theme="dark"] body[data-page="login"] .auth-tabs button:not(.active),
html[data-theme="dark"] body[data-page="login"] .auth-card-redesign label span {
  color: #B9C0CC !important;
  -webkit-text-fill-color: #B9C0CC !important;
}

html[data-theme="dark"] body[data-page="login"] .quick-access-notice,
html[data-theme="dark"] body[data-page="login"] #authMessage.message.info,
html[data-theme="dark"] body[data-page="login"] #authMessage.message.info.hidden,
html[data-theme="dark"] body[data-page="login"] .role-grid button.active {
  border-color: rgba(249, 115, 22, 0.30) !important;
  background: rgba(249, 115, 22, 0.14) !important;
  color: #FCA968 !important;
}

@media (max-width: 860px) {
  body[data-page="login"] .auth-shell.auth-redesign {
    grid-template-columns: 1fr;
  }

  body[data-page="login"] .auth-info-panel {
    display: none;
  }

  body[data-page="login"] .auth-form-panel {
    min-height: 100vh;
    padding: 24px;
  }
}

@media (max-width: 480px) {
  body[data-page="login"] .auth-form-panel {
    padding: 18px;
  }

  body[data-page="login"] .auth-language-row,
  body[data-page="login"] .form-card.auth-card-redesign {
    max-width: 100%;
  }

  body[data-page="login"] .form-card.auth-card-redesign {
    padding: 22px;
  }

  body[data-page="login"] .auth-language-row {
    justify-content: space-between;
  }
}

/* ============================================================
   DESIGN v2 — AUTH ALIGNMENT (Login / Register)
   ------------------------------------------------------------
   Replaces the rejected "glassy" auth (dark-gradient brand
   panel, frosted note cards, orb/glow/grid decor) with the
   calm two-pane .auth spec from
   handoff/design-v2-reference/.../kit.css. Reuses the existing
   correct --w2g-* v2 tokens, so light + dark stay consistent.
   Auth-scoped (body[data-page="login"]) — no other screen is
   affected. Appended last so it wins equal-specificity ties.
   Decorative divs were removed from Login.html.
   ============================================================ */

/* Two-pane shell: calm surface brand panel + neutral form panel */
body[data-page="login"] .auth-info-panel {
  position: relative;
  background: var(--w2g-surface) !important;
  border-right: 1px solid var(--w2g-line);
  box-shadow: none !important;
  padding: 44px 48px;
  color: var(--w2g-body);
  overflow: hidden;
}
body[data-page="login"] .auth-form-panel {
  background: var(--w2g-bg) !important;
  box-shadow: none !important;
}

/* Drop the leftover grid overlay; keep one faint warm radial only */
body[data-page="login"] .auth-info-panel::before { display: none !important; }
body[data-page="login"] .auth-info-panel::after {
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  right: -120px;
  top: -90px;
  background: radial-gradient(circle, var(--w2g-orange-soft), transparent 70%);
  opacity: 1;
  pointer-events: none;
  z-index: 0;
}
body[data-page="login"] .auth-info-panel > * { position: relative; z-index: 1; }

/* Desktop two-column rhythm (mobile collapse handled at <=860 above) */
@media (min-width: 861px) {
  body[data-page="login"] .auth-shell.auth-redesign {
    grid-template-columns: 1.05fr 1fr;
  }
  body[data-page="login"] .auth-info-panel {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 26px;
  }
}

/* Brand mark: solid orange square — no gradient, no glow */
body[data-page="login"] .auth-info-panel .brand-mark {
  background: var(--w2g-orange) !important;
  color: #fff !important;
  box-shadow: none !important;
  border-radius: 11px;
  width: 40px;
  height: 40px;
  font-size: 14px;
}
body[data-page="login"] .auth-brand strong {
  color: var(--w2g-ink) !important;
  -webkit-text-fill-color: var(--w2g-ink) !important;
}
body[data-page="login"] .auth-brand small {
  color: var(--w2g-muted) !important;
  -webkit-text-fill-color: var(--w2g-muted) !important;
}

/* Eyebrow: quiet muted uppercase label (NOT orange) */
body[data-page="login"] .auth-info-panel .eyebrow,
body[data-page="login"] .auth-info-panel .eyebrow.light-text {
  color: var(--w2g-muted) !important;
  -webkit-text-fill-color: var(--w2g-muted) !important;
  font-weight: 700;
  letter-spacing: 0.12em;
  font-size: 11px;
}

/* Headline + lead: ink / body on the calm panel */
body[data-page="login"] .auth-hero-copy h1 {
  color: var(--w2g-ink) !important;
  -webkit-text-fill-color: var(--w2g-ink) !important;
  background: none !important;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.12;
}
body[data-page="login"] .auth-hero-copy p {
  color: var(--w2g-body) !important;
  -webkit-text-fill-color: var(--w2g-body) !important;
  font-weight: 500;
}

/* Value bullets: compact icon + text rows (reference .auth-points) — no grey cards */
body[data-page="login"] .auth-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
body[data-page="login"] .auth-points li {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 13.5px;
  font-weight: 550;
  line-height: 1.4;
  color: var(--w2g-ink-2) !important;
}
body[data-page="login"] .auth-points li span {
  color: var(--w2g-ink-2) !important;
  -webkit-text-fill-color: var(--w2g-ink-2) !important;
}
body[data-page="login"] .auth-point-ic {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--w2g-orange);
}
body[data-page="login"] .auth-footer-copy {
  color: var(--w2g-muted) !important;
  -webkit-text-fill-color: var(--w2g-muted) !important;
}

/* Form card: clean surface, hairline border, soft shadow — no glow */
body[data-page="login"] .form-card.auth-card-redesign {
  background: var(--w2g-surface) !important;
  border: 1px solid var(--w2g-line) !important;
  border-radius: 16px !important;
  box-shadow: var(--w2g-shadow-md) !important;
  width: min(372px, 100%);
  max-width: 372px;
  padding: 24px;
}
body[data-page="login"] .auth-card-heading h2 {
  color: var(--w2g-ink) !important;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
body[data-page="login"] .auth-card-heading .eyebrow {
  color: var(--w2g-muted) !important;
  -webkit-text-fill-color: var(--w2g-muted) !important;
}
body[data-page="login"] .auth-card-heading p {
  color: var(--w2g-muted) !important;
}

/* Inputs: v2 orange focus ring */
body[data-page="login"] .auth-card-redesign input:focus {
  border-color: var(--w2g-orange) !important;
  box-shadow: var(--w2g-focus) !important;
}

/* Buttons in auth: focused accent — NO lift, NO glow */
body[data-page="login"] .button.primary {
  background: var(--w2g-orange) !important;
  border-color: var(--w2g-orange) !important;
  box-shadow: none !important;
}
body[data-page="login"] .button.primary:hover {
  background: var(--w2g-orange-strong) !important;
  border-color: var(--w2g-orange-strong) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Quick-access notice: single calm info pill (behavior unchanged) */
body[data-page="login"] .quick-access-notice {
  border-radius: 10px;
}

/* ============================================================
   DESIGN v2 — PHASE 2 SHELL REFINEMENT (logged-in app only)
   ------------------------------------------------------------
   The logged-in sidebar shell (body.app-shell-v2) already exists
   from earlier phases with the correct --w2g-* tokens. This block
   only removes the remaining non-v2 effects from the *shell*:
   decorative background orbs, glassy blur on the sidebar + context
   bar, and the button hover lift/glow — so the chrome reads flat,
   neutral, and calm per the reference. Scoped to body.app-shell-v2,
   so the public marketing landing (guest) is untouched. Appended
   last to win ties. No HTML/JS/route/behavior changes.
   ============================================================ */

/* 1. Neutral FLAT canvas — kill the ambient decorative orbs */
body.app-shell-v2 {
  background: var(--w2g-bg) !important;
  background-attachment: initial !important;
}
body.app-shell-v2::before,
body.app-shell-v2::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  background: none !important;
}

/* 2. De-glass the fixed sidebar (no backdrop blur over a solid fill) */
body.app-shell-v2 .topbar {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: var(--w2g-surface) !important;
}

/* 3. De-glass the page context bar — solid surface, hairline, soft shadow */
body.app-shell-v2 .app-shell-context-bar {
  background: var(--w2g-surface) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: var(--w2g-shadow-sm) !important;
}

/* 4. Restrained buttons in the shell — focused accent, NO lift, NO glow */
body.app-shell-v2 .button.primary {
  box-shadow: none !important;
}
body.app-shell-v2 .button.primary:hover {
  background: var(--w2g-orange-strong) !important;
  border-color: var(--w2g-orange-strong) !important;
  transform: none !important;
  box-shadow: none !important;
}
body.app-shell-v2 .button:hover {
  transform: none !important;
}

/* 5. Shared foundation: keep the active nav crisp and badges neutral
      (reinforces existing v2 rules; flat, no glow). */
body.app-shell-v2 .main-nav .shell-nav-item.active {
  box-shadow: none !important;
}
body.app-shell-v2 .app-shell-search-button:hover {
  border-color: var(--w2g-line-strong) !important;
  color: var(--w2g-ink-2) !important;
}

/* ============================================================
   DESIGN v2 — HOME PAGE (logged-in) alignment
   ------------------------------------------------------------
   Reworks #home (rendered by renderHomeMissionSurface) to the
   reference: intro "Your competition home", four stat cards,
   "Continue your mission", "Top match for you" (+ "A team wants
   your role"). Flat surfaces, hairline borders, green match
   meters, restrained orange, no glow/lift/glass. Scoped to
   body.app-shell-v2 #home so no other screen is affected.
   ============================================================ */

/* The clean intro leads on Home — hide the heavy context card here only */
body.app-shell-v2 .app-shell-context-bar[data-route="home"] { display: none !important; }

body.app-shell-v2 #home .home-mission-v2 { gap: 20px; }

/* Intro */
body.app-shell-v2 #home .hv2-head { display: flex; flex-direction: column; gap: 6px; }
body.app-shell-v2 #home .hv2-eyebrow {
  font-size: 11px; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--w2g-muted);
}
body.app-shell-v2 #home .hv2-head h1 {
  margin: 0; font-size: 26px; font-weight: 800;
  letter-spacing: -0.025em; line-height: 1.1; color: var(--w2g-ink);
}
body.app-shell-v2 #home .hv2-head p {
  margin: 2px 0 0; max-width: 600px; font-size: 14px;
  line-height: 1.5; color: var(--w2g-muted);
}

/* Stat cards */
body.app-shell-v2 #home .hv2-stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px;
}
body.app-shell-v2 #home .hv2-stat {
  display: flex; flex-direction: column; gap: 4px; padding: 16px;
  border: 1px solid var(--w2g-line); border-radius: 14px;
  background: var(--w2g-surface); box-shadow: var(--w2g-shadow-sm);
}
body.app-shell-v2 #home .hv2-stat[role="button"] { cursor: pointer; }
body.app-shell-v2 #home .hv2-stat[role="button"]:hover { border-color: var(--w2g-orange-line); }
body.app-shell-v2 #home .hv2-stat-ic {
  display: grid; width: 32px; height: 32px; place-items: center; margin-bottom: 7px;
  border-radius: 9px; background: var(--w2g-surface-2); color: var(--w2g-orange);
}
body.app-shell-v2 #home .hv2-stat-ic svg { width: 16px; height: 16px; }
body.app-shell-v2 #home .hv2-stat strong {
  font-size: 24px; font-weight: 800; letter-spacing: -0.02em; color: var(--w2g-ink);
}
body.app-shell-v2 #home .hv2-stat-lbl { font-size: 12px; font-weight: 600; color: var(--w2g-muted); }

/* Two-column grid */
body.app-shell-v2 #home .hv2-grid {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 16px; align-items: start;
}
body.app-shell-v2 #home .hv2-card {
  padding: 18px; border: 1px solid var(--w2g-line); border-radius: 14px;
  background: var(--w2g-surface); box-shadow: var(--w2g-shadow-sm);
}
body.app-shell-v2 #home .hv2-card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 4px;
}
body.app-shell-v2 #home .hv2-card-head h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--w2g-ink); }
body.app-shell-v2 #home .hv2-link {
  padding: 4px 6px; border: 0; background: transparent;
  color: var(--w2g-muted); font-size: 12.5px; font-weight: 600; cursor: pointer;
}
body.app-shell-v2 #home .hv2-link:hover { color: var(--w2g-orange-ink); }
body.app-shell-v2 #home .hv2-card-sub { margin: 0 0 12px; font-size: 12.5px; color: var(--w2g-muted); }

/* Green match / readiness meter */
body.app-shell-v2 #home .hv2-meter { display: flex; flex-direction: column; gap: 7px; margin: 6px 0 14px; }
body.app-shell-v2 #home .hv2-meter-head { display: flex; align-items: center; justify-content: space-between; }
body.app-shell-v2 #home .hv2-meter-head span { font-size: 12.5px; font-weight: 700; color: var(--w2g-match-strong); }
body.app-shell-v2 #home .hv2-meter-head strong { font-size: 14px; font-weight: 800; color: var(--w2g-ink); font-variant-numeric: tabular-nums; }
body.app-shell-v2 #home .hv2-meter-head strong small { font-size: 11px; font-weight: 700; color: var(--w2g-muted); }
body.app-shell-v2 #home .hv2-meter-track { height: 7px; border-radius: 999px; background: var(--w2g-match-track); overflow: hidden; }
body.app-shell-v2 #home .hv2-meter-track span { display: block; height: 100%; border-radius: 999px; background: var(--w2g-match-strong); }

/* Task rows */
body.app-shell-v2 #home .hv2-task-list { display: flex; flex-direction: column; gap: 8px; }
body.app-shell-v2 #home .hv2-task-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 11px;
  border: 1px solid var(--w2g-line); border-radius: 12px; background: var(--w2g-surface-2);
}
body.app-shell-v2 #home .hv2-pri {
  flex: 0 0 auto; padding: 2px 7px; border-radius: 6px; font-size: 10px;
  font-weight: 800; text-transform: capitalize; border: 1px solid var(--w2g-line);
  background: var(--w2g-surface); color: var(--w2g-muted);
}
body.app-shell-v2 #home .hv2-pri-high { background: var(--status-danger-bg, #FCE9E9); color: var(--status-danger-fg, #B42121); border-color: transparent; }
body.app-shell-v2 #home .hv2-pri-med { background: var(--status-warning-bg, #FBF1DC); color: var(--status-warning-fg, #9A6B0E); border-color: transparent; }
body.app-shell-v2 #home .hv2-task-copy { flex: 1 1 auto; min-width: 0; }
body.app-shell-v2 #home .hv2-task-copy strong { display: block; font-size: 12.5px; font-weight: 600; color: var(--w2g-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.app-shell-v2 #home .hv2-task-copy small { font-size: 11px; color: var(--w2g-muted); }
body.app-shell-v2 #home .hv2-status { flex: 0 0 auto; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; }
body.app-shell-v2 #home .hv2-status-doing { background: var(--status-info-bg, #E8F0FE); color: var(--status-info-fg, #1D4ED8); }
body.app-shell-v2 #home .hv2-status-blocked { background: var(--status-danger-bg, #FCE9E9); color: var(--status-danger-fg, #B42121); }
body.app-shell-v2 #home .hv2-empty { padding: 16px; border: 1px dashed var(--w2g-line-strong); border-radius: 12px; background: var(--w2g-surface-2); }
body.app-shell-v2 #home .hv2-empty strong { display: block; font-size: 13px; color: var(--w2g-ink); }
body.app-shell-v2 #home .hv2-empty p { margin: 3px 0 0; font-size: 12px; color: var(--w2g-muted); }

/* Match lead (thumb / avatar + title) + role section */
body.app-shell-v2 #home .hv2-match-lead { display: flex; align-items: center; gap: 11px; margin-bottom: 4px; }
body.app-shell-v2 #home .hv2-thumb {
  display: grid; flex: 0 0 auto; width: 44px; height: 44px; place-items: center;
  border-radius: 11px; background: var(--w2g-surface-2); border: 1px solid var(--w2g-line);
  color: var(--w2g-orange-ink); font-size: 16px; font-weight: 800;
}
body.app-shell-v2 #home .hv2-avatar {
  display: grid; flex: 0 0 auto; width: 30px; height: 30px; place-items: center;
  border-radius: 50%; background: var(--w2g-orange-soft); color: var(--w2g-orange-ink);
  font-size: 12px; font-weight: 800;
}
body.app-shell-v2 #home .hv2-lead-copy { min-width: 0; }
body.app-shell-v2 #home .hv2-lead-copy strong { display: block; font-size: 13.5px; font-weight: 700; color: var(--w2g-ink); line-height: 1.25; }
body.app-shell-v2 #home .hv2-lead-copy small { font-size: 11.5px; color: var(--w2g-muted); }
body.app-shell-v2 #home .hv2-divider { height: 1px; margin: 14px 0; border: 0; background: var(--w2g-line); }
body.app-shell-v2 #home .hv2-role-head { margin-bottom: 9px; font-size: 13px; font-weight: 700; color: var(--w2g-ink); }
body.app-shell-v2 #home .hv2-cta { width: 100%; margin-top: 11px; }

/* Sidebar: bare Lucide-style line icons (not letter chips) */
body.app-shell-v2 .shell-nav-icon { background: transparent !important; color: var(--w2g-muted); }
body.app-shell-v2 .shell-nav-icon svg { width: 18px; height: 18px; }
body.app-shell-v2 .main-nav .shell-nav-item:hover .shell-nav-icon { background: transparent !important; color: var(--w2g-ink-2); }
body.app-shell-v2 .main-nav .shell-nav-item.active .shell-nav-icon { background: transparent !important; color: var(--w2g-orange); }

/* Slimmer, less dominant private-beta banner (kept, not removed) */
body.app-shell-v2 .private-beta-notice-banner { font-size: 11.5px; }
body.app-shell-v2 .private-beta-notice-inner { padding-top: 6px !important; padding-bottom: 6px !important; gap: 9px; }
body.app-shell-v2 .private-beta-notice-copy { font-size: 11.5px; }

/* Responsive */
@media (max-width: 960px) {
  body.app-shell-v2 #home .hv2-grid { grid-template-columns: 1fr; }
  body.app-shell-v2 #home .hv2-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================
   DESIGN v2 - PHASE 3 SIDEBAR / NAVIGATION PARITY
   ------------------------------------------------------------
   Scoped to the logged-in app shell only. Keeps existing route
   hooks and drawer behavior while making the left rail match the
   v2 reference more closely: fixed 244px rail, simple grouped nav,
   line icons, calm active state, and compact footer controls.
   ============================================================ */

@media (min-width: 1051px) {
  body.app-shell-v2 .topbar {
    width: 244px;
    gap: 12px;
    padding: 18px 12px 12px;
    background: var(--w2g-surface) !important;
    border-right: 1px solid var(--w2g-line) !important;
  }

  body.app-shell-v2 .page-shell {
    margin-left: 244px;
  }
}

body.app-shell-v2 .topbar .brand {
  gap: 10px;
  padding: 2px 6px 16px;
  color: var(--w2g-ink);
}

body.app-shell-v2 .topbar .brand-mark {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--w2g-orange) !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
}

body.app-shell-v2 .topbar .brand small {
  max-width: 150px;
  font-size: 11.5px;
}

body.app-shell-v2 .shell-nav-scroll {
  gap: 15px;
  padding: 0 2px 8px;
}

body.app-shell-v2 .shell-nav-group {
  gap: 4px;
}

body.app-shell-v2 .shell-nav-group-label {
  padding: 7px 9px 3px;
  color: var(--w2g-muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.11em;
}

body.app-shell-v2 .shell-nav-group-items {
  gap: 2px;
}

body.app-shell-v2 .main-nav .shell-nav-item {
  grid-template-columns: 22px minmax(0, 1fr) auto;
  min-height: 34px;
  gap: 10px;
  padding: 6px 9px;
  border-radius: 8px;
  border-color: transparent !important;
  color: var(--w2g-ink-2);
  font-size: 13px;
  font-weight: 600;
}

body.app-shell-v2 .main-nav .shell-nav-item:hover {
  background: var(--w2g-surface-2) !important;
  border-color: transparent !important;
  color: var(--w2g-ink) !important;
}

body.app-shell-v2 .main-nav .shell-nav-item.active {
  background: var(--w2g-orange-soft) !important;
  border-color: transparent !important;
  color: var(--w2g-orange-ink) !important;
  box-shadow: none !important;
}

body.app-shell-v2 .shell-nav-icon {
  width: 22px;
  height: 22px;
  border-radius: 0;
  background: transparent !important;
  color: var(--w2g-muted);
}

body.app-shell-v2 .shell-nav-icon svg {
  width: 17px;
  height: 17px;
  stroke-width: 2;
}

body.app-shell-v2 .main-nav .shell-nav-item.active .shell-nav-icon {
  background: transparent !important;
  color: var(--w2g-orange) !important;
}

body.app-shell-v2 .shell-nav-badge {
  min-width: 18px;
  padding: 1px 6px;
  border-color: transparent;
  background: var(--w2g-surface-2);
  color: var(--w2g-muted);
  font-size: 10.5px;
  font-weight: 600;
}

body.app-shell-v2 .main-nav .shell-nav-item.active .shell-nav-badge {
  border-color: transparent;
  background: color-mix(in srgb, var(--w2g-orange) 10%, #FFFFFF);
  color: var(--w2g-orange-ink);
}

body.app-shell-v2 .shell-account-panel {
  gap: 0;
  padding: 10px 6px 0;
}

body.app-shell-v2 .shell-account-main {
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 9px;
  padding: 8px;
  border-radius: 10px;
  background: var(--w2g-surface) !important;
}

body.app-shell-v2 .shell-account-main:hover {
  border-color: var(--w2g-line-strong);
  background: var(--w2g-surface-2) !important;
}

body.app-shell-v2 .shell-account-avatar {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  font-size: 11px;
}

body.app-shell-v2 .shell-account-copy strong {
  font-size: 12.5px;
}

body.app-shell-v2 .shell-account-copy small {
  font-size: 11px;
  font-weight: 600;
}

body.app-shell-v2 .auth-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 8px 6px 0;
  border-top: 1px solid var(--w2g-line);
}

body.app-shell-v2 .auth-actions .language-switch {
  min-height: 28px;
  border-radius: 8px;
}

body.app-shell-v2 .auth-actions .language-switch button {
  min-height: 28px;
  padding: 2px 6px;
  font-size: 10.5px;
}

body.app-shell-v2 .auth-actions .theme-toggle,
body.app-shell-v2 .auth-actions .notification-button {
  min-height: 30px;
  padding: 0;
  border-radius: 8px;
  background: transparent !important;
  color: var(--w2g-muted);
}

body.app-shell-v2 .auth-actions .theme-toggle-label {
  display: none !important;
}

body.app-shell-v2 .auth-actions #logoutButton {
  grid-column: 1 / -1;
  min-height: 30px;
  padding: 4px 8px;
  border-radius: 8px;
  background: transparent !important;
  color: var(--w2g-muted);
  font-size: 11.5px;
  font-weight: 600;
}

body.app-shell-v2 .auth-actions .theme-toggle:hover,
body.app-shell-v2 .auth-actions .notification-button:hover,
body.app-shell-v2 .auth-actions #logoutButton:hover {
  background: var(--w2g-surface-2) !important;
  color: var(--w2g-ink) !important;
}

@media (max-width: 1050px) {
  body.app-shell-v2 .main-nav.open {
    gap: 12px;
    padding-top: 8px;
  }

  body.app-shell-v2 .main-nav.open .shell-nav-scroll {
    gap: 12px;
  }

  body.app-shell-v2 .main-nav.open .shell-account-panel {
    padding-inline: 2px;
  }
}

/* ============================================================
   DESIGN v2 - SHELL SPACING CLEANUP
   ------------------------------------------------------------
   Removes the global Private Beta banner footprint, pulls logged-in
   content toward the sidebar, and tightens nav tab rhythm. The auth
   quick-access notice inside the Login/Register card is untouched.
   ============================================================ */

.private-beta-notice-banner,
#privateBetaNoticeBanner {
  display: none !important;
  visibility: hidden !important;
  position: absolute !important;
  inset: auto !important;
  width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

.private-beta-notice-inner,
.private-beta-pill,
.private-beta-notice-copy,
.private-beta-notice-action {
  display: none !important;
}

@media (min-width: 900px) {
  body[data-page="login"] .auth-language-row {
    top: 22px !important;
  }

  body[data-page="login"] .auth-form-panel {
    padding-top: clamp(34px, 5vh, 64px) !important;
  }
}

@media (max-width: 899px) {
  body[data-page="login"] .auth-form-panel {
    padding-top: 18px !important;
  }
}

@media (min-width: 1051px) {
  body.app-shell-v2 .page-shell {
    padding: 24px 32px 88px 30px;
  }

  body.app-shell-v2 .page-shell > .view,
  body.app-shell-v2 #home.view,
  body.app-shell-v2 .app-shell-context-bar {
    max-width: 1180px;
    margin-left: 0;
    margin-right: 0;
  }

  body.app-shell-v2 .app-shell-context-bar {
    margin-bottom: 20px;
  }
}

body.app-shell-v2 .shell-nav-scroll {
  gap: 12px;
  padding: 0 1px 8px;
}

body.app-shell-v2 .shell-nav-group {
  gap: 3px;
}

body.app-shell-v2 .shell-nav-group + .shell-nav-group {
  margin-top: 1px;
}

body.app-shell-v2 .shell-nav-group-label {
  padding: 6px 8px 3px;
  font-size: 9.8px;
  line-height: 1.2;
  letter-spacing: 0.105em;
}

body.app-shell-v2 .shell-nav-group-items {
  gap: 1px;
}

body.app-shell-v2 .main-nav .shell-nav-item {
  grid-template-columns: 20px minmax(0, 1fr) auto;
  min-height: 32px;
  gap: 9px;
  padding: 5px 8px;
  border-radius: 8px;
  line-height: 1.2;
}

body.app-shell-v2 .shell-nav-icon {
  width: 20px;
  height: 20px;
}

body.app-shell-v2 .shell-nav-icon svg {
  width: 16px;
  height: 16px;
}

body.app-shell-v2 .shell-nav-label {
  align-self: center;
}

body.app-shell-v2 .main-nav .shell-nav-item:hover {
  background: color-mix(in srgb, var(--w2g-surface-2) 82%, transparent) !important;
}

body.app-shell-v2 .main-nav .shell-nav-item.active {
  background: color-mix(in srgb, var(--w2g-orange) 10%, #FFFFFF) !important;
  color: var(--w2g-orange-ink) !important;
}

html[data-theme="dark"] body.app-shell-v2 .main-nav .shell-nav-item.active {
  background: color-mix(in srgb, var(--w2g-orange) 15%, transparent) !important;
}

/* ============================================================
   DESIGN v2 - APP SHELL PARITY PASS
   ------------------------------------------------------------
   Shared logged-in shell only: v2 sidebar, slim content topbar,
   top-right shell controls, and left-aligned app canvas.
   ============================================================ */

body.app-shell-v2 #privateBetaNoticeBanner,
body.app-shell-v2 .private-beta-notice-banner {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

@media (min-width: 1051px) {
  body.app-shell-v2 .topbar {
    width: 244px;
    padding: 18px 12px 14px;
    gap: 14px;
    overflow: visible;
  }

  body.app-shell-v2 .page-shell {
    margin-left: 244px;
    padding: 12px 32px 88px 30px;
  }

  body.app-shell-v2 .page-shell > .view,
  body.app-shell-v2 #home.view {
    width: min(100%, 1180px);
    max-width: 1180px;
    margin-left: 0;
    margin-right: 0;
  }
}

body.app-shell-v2 .topbar .brand {
  padding: 2px 8px 16px;
  border-bottom: 1px solid var(--w2g-line);
}

body.app-shell-v2 .topbar .brand-mark {
  width: 32px;
  height: 32px;
  border-radius: 8px;
}

body.app-shell-v2 .topbar .brand strong {
  font-size: 13.5px;
  font-weight: 800;
}

body.app-shell-v2 .topbar .brand small {
  max-width: 150px;
  font-size: 11.5px;
  line-height: 1.3;
}

body.app-shell-v2 .main-nav {
  gap: 10px;
}

body.app-shell-v2 .shell-nav-scroll {
  gap: 14px;
  padding: 0 2px 8px;
}

body.app-shell-v2 .shell-nav-group {
  gap: 4px;
}

body.app-shell-v2 .shell-nav-group-label {
  padding: 5px 8px 4px 4px;
  color: var(--w2g-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.11em;
  line-height: 1.15;
}

body.app-shell-v2 .shell-nav-group-items {
  gap: 2px;
}

body.app-shell-v2 .main-nav .shell-nav-item {
  grid-template-columns: 22px minmax(0, 1fr) auto;
  min-height: 34px;
  gap: 9px;
  padding: 6px 9px 6px 5px;
  border: 0 !important;
  border-radius: 8px;
  color: var(--w2g-ink-2);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  transform: none !important;
  transition: background-color 0.14s ease, color 0.14s ease;
}

body.app-shell-v2 .main-nav .shell-nav-item::before,
body.app-shell-v2 .main-nav .shell-nav-item::after {
  display: none !important;
  content: none !important;
}

body.app-shell-v2 .shell-nav-icon {
  width: 22px;
  height: 22px;
  color: var(--w2g-muted);
}

body.app-shell-v2 .shell-nav-icon svg {
  width: 17px;
  height: 17px;
}

body.app-shell-v2 .main-nav .shell-nav-item:hover {
  background: var(--w2g-surface-2) !important;
  color: var(--w2g-ink) !important;
  box-shadow: none !important;
}

body.app-shell-v2 .main-nav .shell-nav-item.active {
  background: color-mix(in srgb, var(--w2g-orange) 10%, #FFFFFF) !important;
  color: var(--w2g-orange-ink) !important;
  box-shadow: none !important;
}

body.app-shell-v2 .main-nav .shell-nav-item.active .shell-nav-icon {
  color: var(--w2g-orange) !important;
}

html[data-theme="dark"] body.app-shell-v2 .main-nav .shell-nav-item.active {
  background: color-mix(in srgb, var(--w2g-orange) 16%, transparent) !important;
}

body.app-shell-v2 .shell-nav-badge {
  min-width: 18px;
  padding: 1px 6px;
  background: var(--w2g-surface-2);
  border: 0;
  color: var(--w2g-muted);
  font-size: 10.5px;
}

body.app-shell-v2 .shell-account-panel {
  margin-top: auto;
  padding: 12px 6px 0;
}

body.app-shell-v2 .shell-account-main {
  grid-template-columns: 30px minmax(0, 1fr);
  min-height: 46px;
  gap: 9px;
  padding: 8px;
  border-radius: 10px;
  background: var(--w2g-surface) !important;
}

body.app-shell-v2 .shell-account-avatar {
  width: 30px;
  height: 30px;
  border-radius: 8px;
}

body.app-shell-v2 .mobile-nav-extras,
body.app-shell-v2 .mobile-nav-auth,
body.app-shell-v2 .mobile-drawer-feedback-btn {
  display: none !important;
}

body.app-shell-v2 #logoutButton,
body.app-shell-v2 .feedback-topbar-button {
  display: none !important;
}

body.app-shell-v2 .app-shell-context-bar {
  display: flex !important;
  position: sticky;
  top: 0;
  z-index: 95;
  width: min(100%, 1180px);
  max-width: 1180px;
  min-height: 52px;
  margin: 0 0 22px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--w2g-bg) !important;
  box-shadow: none !important;
}

body.app-shell-v2 .app-shell-context-bar[data-route="home"] {
  display: flex !important;
}

body.app-shell-v2 .app-shell-context-copy,
body.app-shell-v2 .app-shell-context-pill {
  display: none !important;
}

body.app-shell-v2 .app-shell-context-actions {
  width: min(420px, 100%);
  flex: 0 1 420px;
  justify-content: flex-start;
  align-items: center;
}

body.app-shell-v2 .app-shell-search-button {
  width: min(420px, 100%);
  min-width: 0;
  min-height: 38px;
  justify-content: space-between;
  padding: 8px 10px 8px 12px;
  border-radius: 10px;
  background: var(--w2g-surface) !important;
}

body.app-shell-v2 .app-shell-search-button.is-placeholder {
  cursor: default;
}

body.app-shell-v2 .app-shell-search-button.is-placeholder:hover {
  border-color: var(--w2g-line) !important;
  color: var(--w2g-muted) !important;
}

@media (min-width: 1051px) {
  body.app-shell-v2 .auth-actions {
    position: fixed;
    top: 12px;
    right: 28px;
    z-index: 115;
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    width: auto;
    gap: 8px;
    padding: 0;
    border: 0;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.app-shell-v2 .auth-actions #logoutButton,
  body.app-shell-v2 .auth-actions #loginShortcut,
  body.app-shell-v2 .auth-actions #signupShortcut,
  body.app-shell-v2 .auth-actions .feedback-topbar-button {
    display: none !important;
  }

  body.app-shell-v2 .auth-actions .language-switch {
    order: 1;
    grid-column: auto;
    width: auto;
    min-height: 32px;
    border-radius: 9px;
    background: var(--w2g-surface) !important;
  }

  body.app-shell-v2 .auth-actions .language-switch button {
    min-width: 34px;
    min-height: 28px;
    padding: 2px 8px;
    font-size: 10.5px;
    font-weight: 800;
  }

  body.app-shell-v2 .auth-actions .theme-toggle,
  body.app-shell-v2 .auth-actions .notification-button {
    display: inline-grid !important;
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
    place-items: center;
    padding: 0;
    border: 1px solid var(--w2g-line);
    border-radius: 9px;
    background: var(--w2g-surface) !important;
    color: var(--w2g-muted);
  }

  body.app-shell-v2 .auth-actions .theme-toggle {
    order: 2;
  }

  body.app-shell-v2 .auth-actions .notification-button {
    order: 3;
  }

  body.app-shell-v2 .auth-actions .theme-toggle-label {
    display: none !important;
  }

  body.app-shell-v2 .auth-actions .theme-toggle-icon,
  body.app-shell-v2 .auth-actions .notification-bell-icon {
    width: 17px;
    height: 17px;
  }

  body.app-shell-v2 .auth-actions .theme-toggle:hover,
  body.app-shell-v2 .auth-actions .notification-button:hover {
    border-color: var(--w2g-line-strong);
    background: var(--w2g-surface-2) !important;
    color: var(--w2g-ink);
  }
}

@media (max-width: 1050px) {
  body.app-shell-v2 .app-shell-context-bar {
    position: static;
    min-height: 44px;
    margin-bottom: 14px;
  }

  body.app-shell-v2 .app-shell-context-actions,
  body.app-shell-v2 .app-shell-search-button {
    width: 100%;
  }
}

/* ============================================================
   DESIGN v2 - TOP-RIGHT CONTROL ICON PARITY
   ------------------------------------------------------------
   Uses inline Lucide-style SVGs from script.js for bell/moon/sun.
   Keeps language text compact and removes old CSS-drawn chrome.
   ============================================================ */

body.app-shell-v2 .auth-actions {
  gap: 8px;
}

body.app-shell-v2 .auth-actions .notification-button,
body.app-shell-v2 .auth-actions .theme-toggle {
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  border: 1px solid var(--w2g-line) !important;
  border-radius: 10px !important;
  background: var(--w2g-surface) !important;
  color: var(--w2g-muted) !important;
  box-shadow: none !important;
  transform: none !important;
}

body.app-shell-v2 .auth-actions .notification-button {
  order: 1;
}

body.app-shell-v2 .auth-actions .theme-toggle {
  order: 2;
}

body.app-shell-v2 .auth-actions .language-switch {
  order: 3;
  display: inline-flex;
  align-items: center;
  width: auto !important;
  min-height: 38px !important;
  padding: 3px;
  border: 1px solid var(--w2g-line) !important;
  border-radius: 10px !important;
  background: var(--w2g-surface) !important;
  box-shadow: none !important;
}

body.app-shell-v2 .auth-actions .language-switch button {
  min-width: 34px;
  min-height: 30px;
  padding: 0 8px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 800;
  color: var(--w2g-muted);
  box-shadow: none !important;
  transform: none !important;
}

body.app-shell-v2 .auth-actions .language-switch button.active {
  background: var(--w2g-orange-soft) !important;
  color: var(--w2g-orange-ink) !important;
}

body.app-shell-v2 .auth-actions .theme-toggle-icon,
body.app-shell-v2 .auth-actions .notification-bell-icon {
  display: grid;
  width: 18px !important;
  height: 18px !important;
  place-items: center;
}

body.app-shell-v2 .auth-actions .theme-toggle-icon svg,
body.app-shell-v2 .auth-actions .notification-bell-icon svg {
  display: block;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
}

body.app-shell-v2 .auth-actions .notification-bell-icon::before,
body.app-shell-v2 .auth-actions .notification-bell-icon::after {
  display: none !important;
  content: none !important;
}

body.app-shell-v2 .auth-actions .notification-button:hover,
body.app-shell-v2 .auth-actions .theme-toggle:hover,
body.app-shell-v2 .auth-actions .language-switch:hover {
  border-color: var(--w2g-line-strong) !important;
  background: var(--w2g-surface-2) !important;
  color: var(--w2g-ink) !important;
  box-shadow: none !important;
  transform: none !important;
}

body.app-shell-v2 .auth-actions .notification-button:focus-visible,
body.app-shell-v2 .auth-actions .theme-toggle:focus-visible,
body.app-shell-v2 .auth-actions .language-switch button:focus-visible {
  outline: 2px solid var(--w2g-orange-line);
  outline-offset: 2px;
}

html[data-theme="dark"] body.app-shell-v2 .auth-actions .notification-button,
html[data-theme="dark"] body.app-shell-v2 .auth-actions .theme-toggle,
html[data-theme="dark"] body.app-shell-v2 .auth-actions .language-switch {
  background: var(--w2g-surface) !important;
  border-color: var(--w2g-line) !important;
  color: var(--w2g-muted) !important;
}

/* Design v2 - remove unused global shell search/context bar */
body.app-shell-v2 #appShellContextBar,
body.app-shell-v2 .app-shell-context-bar,
body.app-shell-v2 .app-shell-search-button {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}

/* ============================================================
   DESIGN v2 — Shell top spacing and divider polish
   ------------------------------------------------------------
   Adds a stable top utility zone and a clear hairline separator
   without restoring the removed global search/context bar.
   ============================================================ */

@media (min-width: 1051px) {
  body.app-shell-v2::after {
    content: "" !important;
    position: fixed;
    top: 64px;
    right: 0;
    left: 244px;
    z-index: 94;
    display: block !important;
    height: 1px;
    background: var(--w2g-line);
    pointer-events: none;
    opacity: 1 !important;
  }

  body.app-shell-v2 .auth-actions {
    top: 16px;
    right: 30px;
  }

  body.app-shell-v2 .page-shell {
    padding-top: 86px;
  }

  body.app-shell-v2 .page-shell > .view,
  body.app-shell-v2 #home.view {
    margin-top: 0;
  }
}

@media (max-width: 1050px) {
  body.app-shell-v2 .topbar {
    border-bottom: 1px solid var(--w2g-line) !important;
  }

  body.app-shell-v2 .page-shell {
    padding-top: 24px;
  }
}

@media (max-width: 640px) {
  body.app-shell-v2 .page-shell {
    padding-top: 18px;
  }
}

/* =============================================================
   DESIGN v2 — Competitions page visual parity
   -------------------------------------------------------------
   Scoped to the logged-in Competitions view only. Keeps existing
   search, filter, sort, route, and action hooks intact.
   ============================================================= */

body.app-shell-v2 #competitions.competition-page-v2 .section-title-row {
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 18px;
}

body.app-shell-v2 #competitions.competition-page-v2 .eyebrow {
  color: var(--w2g-orange);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

body.app-shell-v2 #competitions.competition-page-v2 .section-title-row h1 {
  margin: 3px 0 5px;
  font-size: 28px;
  line-height: 1.12;
}

body.app-shell-v2 #competitions.competition-page-v2 .section-title-row .muted {
  max-width: 680px;
  color: var(--w2g-muted);
  font-size: 14px;
  line-height: 1.5;
}

body.app-shell-v2 #competitions.competition-page-v2 .competition-filter-shell {
  margin-bottom: 18px;
  padding: 10px;
  border: 1px solid var(--w2g-line);
  border-radius: 12px;
  background: var(--w2g-surface);
  box-shadow: none;
}

body.app-shell-v2 #competitions.competition-page-v2 .filter-toolbar {
  display: grid;
  grid-template-columns: minmax(230px, 1fr) auto auto minmax(150px, 190px);
  align-items: center;
  gap: 10px;
}

body.app-shell-v2 #competitions.competition-page-v2 .filter-toolbar label {
  min-width: 0;
  margin: 0;
}

body.app-shell-v2 #competitions.competition-page-v2 .filter-toolbar label:has(#competitionSort) {
  display: grid;
  grid-template-columns: auto minmax(120px, 1fr);
  align-items: center;
  gap: 8px;
  color: var(--w2g-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body.app-shell-v2 #competitions.competition-page-v2 #competitionSearch,
body.app-shell-v2 #competitions.competition-page-v2 #competitionSort {
  min-height: 38px;
  border-color: var(--w2g-line);
  border-radius: 10px;
  background: var(--w2g-surface-2);
  box-shadow: none;
}

body.app-shell-v2 #competitions.competition-page-v2 .competition-quick-filters {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

body.app-shell-v2 #competitions.competition-page-v2 .competition-quick-filter {
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid var(--w2g-line);
  border-radius: var(--w2g-r-pill);
  background: var(--w2g-surface);
  color: var(--w2g-body);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  box-shadow: none;
  cursor: pointer;
}

body.app-shell-v2 #competitions.competition-page-v2 .competition-quick-filter:hover {
  border-color: var(--w2g-orange-line);
  background: var(--w2g-orange-soft);
  color: var(--w2g-orange-ink);
}

body.app-shell-v2 #competitions.competition-page-v2 .competition-quick-filter.active {
  border-color: var(--w2g-orange-line);
  background: var(--w2g-orange-soft);
  color: var(--w2g-orange);
}

body.app-shell-v2 #competitions.competition-page-v2 #competitionFilterToggle {
  min-height: 36px;
  padding-inline: 12px;
  border-radius: 10px;
  box-shadow: none;
}

body.app-shell-v2 #competitions.competition-page-v2 #competitionActiveFilters.active-filter-row {
  margin-top: 9px;
  padding: 8px 0 0;
  border-top: 1px solid var(--w2g-line);
  background: transparent;
  box-shadow: none;
}

body.app-shell-v2 #competitions.competition-page-v2 #competitionActiveFilters .active-filter-label {
  color: var(--w2g-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body.app-shell-v2 #competitions.competition-page-v2 #competitionActiveFilters .active-filter-chip,
body.app-shell-v2 #competitions.competition-page-v2 #competitionActiveFilters .clear-filter-button {
  min-height: 28px;
  border-radius: var(--w2g-r-pill);
  background: var(--w2g-surface-2);
  box-shadow: none;
}

body.app-shell-v2 #competitionList.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 16px;
}

body.app-shell-v2 #competitionList .competition-card-v2-ref {
  gap: 13px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--w2g-line) !important;
  border-radius: 12px;
  background: var(--w2g-surface) !important;
  box-shadow: none !important;
}

body.app-shell-v2 #competitionList .competition-card-v2-ref:hover {
  border-color: var(--w2g-line-strong) !important;
  box-shadow: none !important;
  transform: none !important;
}

body.app-shell-v2 #competitionList .competition-v2-card-top {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: start;
  gap: 11px;
}

body.app-shell-v2 #competitionList .competition-v2-thumb {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--w2g-orange-line);
  border-radius: 12px;
  background: var(--w2g-orange-soft);
  color: var(--w2g-orange);
  font-size: 17px;
  font-weight: 700;
}

body.app-shell-v2 #competitionList .competition-v2-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.app-shell-v2 #competitionList .competition-v2-title-block {
  min-width: 0;
}

body.app-shell-v2 #competitionList .competition-card-v2-ref .item-title {
  margin: 5px 0 3px;
  font-size: 17px;
  line-height: 1.24;
}

body.app-shell-v2 #competitionList .competition-card-v2-ref .item-meta {
  overflow: hidden;
  color: var(--w2g-muted);
  font-size: 12.5px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.app-shell-v2 #competitionList .competition-v2-deadline {
  justify-self: end;
  padding: 5px 9px;
  border: 1px solid var(--w2g-line);
  border-radius: var(--w2g-r-pill);
  background: var(--w2g-surface-2);
  color: var(--w2g-muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

body.app-shell-v2 #competitionList .competition-v2-deadline.is-soon {
  border-color: rgba(201, 138, 18, 0.28);
  background: rgba(201, 138, 18, 0.10);
  color: var(--w2g-warning);
}

body.app-shell-v2 #competitionList .competition-v2-deadline.is-open {
  border-color: rgba(21, 163, 74, 0.22);
  background: var(--w2g-match-soft);
  color: var(--w2g-match-ink);
}

body.app-shell-v2 #competitionList .competition-v2-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

body.app-shell-v2 #competitionList .competition-v2-meta > div,
body.app-shell-v2 #competitionList .competition-v2-role-grid > div {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--w2g-line);
  border-radius: 10px;
  background: var(--w2g-surface-2);
}

body.app-shell-v2 #competitionList .competition-v2-meta span,
body.app-shell-v2 #competitionList .competition-v2-role-grid span {
  display: block;
  margin-bottom: 4px;
  color: var(--w2g-muted);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body.app-shell-v2 #competitionList .competition-v2-meta strong {
  display: block;
  overflow: hidden;
  color: var(--w2g-ink);
  font-size: 12.5px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.app-shell-v2 #competitionList .competition-v2-match {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 12px;
  border: 1px solid rgba(21, 163, 74, 0.18);
  border-radius: 11px;
  background: var(--w2g-match-soft);
}

body.app-shell-v2 #competitionList .competition-v2-match.match-tone-fair {
  border-color: rgba(201, 138, 18, 0.24);
  background: rgba(201, 138, 18, 0.09);
}

body.app-shell-v2 #competitionList .competition-v2-match.match-tone-low,
body.app-shell-v2 #competitionList .competition-v2-match.match-tone-closed {
  border-color: var(--w2g-line);
  background: var(--w2g-surface-2);
}

body.app-shell-v2 #competitionList .competition-v2-match-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

body.app-shell-v2 #competitionList .competition-v2-match-head span {
  color: var(--w2g-match-ink);
  font-size: 12px;
  font-weight: 700;
}

body.app-shell-v2 #competitionList .match-tone-fair .competition-v2-match-head span {
  color: var(--w2g-warning);
}

body.app-shell-v2 #competitionList .match-tone-low .competition-v2-match-head span,
body.app-shell-v2 #competitionList .match-tone-closed .competition-v2-match-head span {
  color: var(--w2g-muted);
}

body.app-shell-v2 #competitionList .competition-v2-match-head strong {
  color: var(--w2g-ink);
  font-size: 18px;
  line-height: 1;
}

body.app-shell-v2 #competitionList .competition-v2-match-track,
body.app-shell-v2 #competitionList .competition-v2-explainer-track {
  overflow: hidden;
  border-radius: var(--w2g-r-pill);
  background: var(--w2g-match-track);
}

body.app-shell-v2 #competitionList .competition-v2-match-track {
  height: 8px;
}

body.app-shell-v2 #competitionList .competition-v2-match-track i,
body.app-shell-v2 #competitionList .competition-v2-explainer-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--w2g-match-good);
}

body.app-shell-v2 #competitionList .match-tone-strong .competition-v2-match-track i,
body.app-shell-v2 #competitionList .match-tone-good .competition-v2-match-track i {
  background: linear-gradient(90deg, var(--w2g-match-good), var(--w2g-match-strong));
}

body.app-shell-v2 #competitionList .match-tone-fair .competition-v2-match-track i {
  background: var(--w2g-match-fair);
}

body.app-shell-v2 #competitionList .match-tone-low .competition-v2-match-track i,
body.app-shell-v2 #competitionList .match-tone-closed .competition-v2-match-track i {
  background: var(--w2g-match-low);
}

body.app-shell-v2 #competitionList .competition-v2-explainer {
  border: 1px solid rgba(21, 163, 74, 0.16);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.62);
}

body.app-shell-v2 #competitionList .competition-v2-explainer summary {
  cursor: pointer;
  padding: 8px 10px;
  color: var(--w2g-ink);
  font-size: 12.5px;
  font-weight: 700;
  list-style: none;
}

body.app-shell-v2 #competitionList .competition-v2-explainer summary::-webkit-details-marker {
  display: none;
}

body.app-shell-v2 #competitionList .competition-v2-explainer summary::after {
  content: "+";
  float: right;
  color: var(--w2g-muted);
}

body.app-shell-v2 #competitionList .competition-v2-explainer[open] summary::after {
  content: "-";
}

body.app-shell-v2 #competitionList .competition-v2-explainer-body {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 0 10px 10px;
}

body.app-shell-v2 #competitionList .competition-v2-explainer-row {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 7px;
  color: var(--w2g-body);
  font-size: 11.5px;
}

body.app-shell-v2 #competitionList .competition-v2-explainer-track {
  height: 5px;
}

body.app-shell-v2 #competitionList .competition-v2-explainer-row strong {
  color: var(--w2g-muted);
  font-size: 11px;
  text-align: right;
}

body.app-shell-v2 #competitionList .competition-v2-reasons {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-top: 3px;
}

body.app-shell-v2 #competitionList .competition-v2-reason,
body.app-shell-v2 #competitionList .competition-v2-explainer-body small {
  margin: 0;
  color: var(--w2g-muted);
  font-size: 11.5px;
  line-height: 1.4;
}

body.app-shell-v2 #competitionList .competition-card-v2-ref .collapsible-copy,
body.app-shell-v2 #competitionList .competition-card-v2-ref .discovery-summary-panel {
  padding: 10px;
  border-radius: 10px;
  background: var(--w2g-surface-2);
  box-shadow: none;
}

body.app-shell-v2 #competitionList .competition-v2-role-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

body.app-shell-v2 #competitionList .competition-v2-role-grid .tag-row {
  gap: 6px;
}

body.app-shell-v2 #competitionList .competition-v2-role-grid .tag {
  padding: 5px 8px;
  font-size: 11.5px;
}

body.app-shell-v2 #competitionList .competition-v2-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 9px;
  padding-top: 11px;
  border-top: 1px solid var(--w2g-line);
}

body.app-shell-v2 #competitionList .competition-v2-actions .button {
  min-height: 38px;
  justify-content: center;
  border-radius: 10px;
  box-shadow: none !important;
  transform: none !important;
}

html[data-theme="dark"] body.app-shell-v2 #competitions.competition-page-v2 .competition-filter-shell,
html[data-theme="dark"] body.app-shell-v2 #competitionList .competition-card-v2-ref,
html[data-theme="dark"] body.app-shell-v2 #competitionList .competition-v2-explainer {
  background: var(--w2g-surface) !important;
  border-color: var(--w2g-line) !important;
}

html[data-theme="dark"] body.app-shell-v2 #competitionList .competition-v2-meta > div,
html[data-theme="dark"] body.app-shell-v2 #competitionList .competition-v2-role-grid > div,
html[data-theme="dark"] body.app-shell-v2 #competitionList .competition-card-v2-ref .collapsible-copy,
html[data-theme="dark"] body.app-shell-v2 #competitionList .competition-card-v2-ref .discovery-summary-panel {
  background: var(--w2g-surface-2) !important;
  border-color: var(--w2g-line) !important;
}

@media (max-width: 1180px) {
  body.app-shell-v2 #competitionList.card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.app-shell-v2 #competitions.competition-page-v2 .filter-toolbar {
    grid-template-columns: minmax(230px, 1fr) minmax(0, 1fr) auto;
  }

  body.app-shell-v2 #competitions.competition-page-v2 .filter-toolbar label:has(#competitionSort) {
    grid-column: 1 / -1;
    justify-self: end;
    max-width: 220px;
  }
}

@media (max-width: 760px) {
  body.app-shell-v2 #competitions.competition-page-v2 .section-title-row {
    align-items: flex-start;
    flex-direction: column;
  }

  body.app-shell-v2 #competitions.competition-page-v2 .filter-toolbar,
  body.app-shell-v2 #competitionList.card-grid,
  body.app-shell-v2 #competitionList .competition-v2-actions {
    grid-template-columns: 1fr;
  }

  body.app-shell-v2 #competitions.competition-page-v2 .filter-toolbar label:has(#competitionSort) {
    justify-self: stretch;
    max-width: none;
  }

  body.app-shell-v2 #competitionList .competition-v2-card-top {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  body.app-shell-v2 #competitionList .competition-v2-deadline {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

@media (max-width: 520px) {
  body.app-shell-v2 #competitionList .competition-v2-meta,
  body.app-shell-v2 #competitionList .competition-v2-explainer-row {
    grid-template-columns: 1fr;
  }

  body.app-shell-v2 #competitionList .competition-v2-explainer-row strong {
    text-align: left;
  }
}


/* ================================================================
   DESIGN v2 PARITY — Competition card (cv2-card) full rebuild
   Scope: body.app-shell-v2 #competitionList .cv2-card
   Replaces all competition-card-v2-ref selectors.
   ================================================================ */

/* ── Card shell ── */
body.app-shell-v2 #competitionList .cv2-card {
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 18px;
  border: 1px solid var(--w2g-line);
  border-radius: 14px;
  background: var(--w2g-surface);
  box-shadow: none;
  min-width: 0;
  transition: border-color .14s ease, box-shadow .14s ease;
}
body.app-shell-v2 #competitionList .cv2-card:hover {
  border-color: var(--w2g-line-strong);
  box-shadow: 0 2px 8px rgba(12, 16, 25, .06);
}

/* ── Top row: left-group + deadline pill ── */
body.app-shell-v2 #competitionList .cv2-card .cv2-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}
body.app-shell-v2 #competitionList .cv2-card .cv2-top-left {
  display: flex;
  gap: 12px;
  min-width: 0;
  flex: 1;
  align-items: flex-start;
}

/* ── Thumbnail ── */
body.app-shell-v2 #competitionList .cv2-card .cv2-thumb {
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 11px;
  border: 1px solid var(--w2g-line);
  background: var(--w2g-surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
body.app-shell-v2 #competitionList .cv2-card .cv2-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body.app-shell-v2 #competitionList .cv2-card .cv2-thumb-ph {
  color: var(--w2g-orange-ink);
  font-size: 16px;
  font-weight: 800;
  background: var(--w2g-orange-soft);
  border-color: var(--w2g-orange-line);
}

/* ── Info block (chip + title + meta) ── */
body.app-shell-v2 #competitionList .cv2-card .cv2-info {
  min-width: 0;
  flex: 1;
}
body.app-shell-v2 #competitionList .cv2-card .cv2-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 7px;
  border: 1px solid var(--w2g-line);
  background: var(--w2g-surface-2);
  color: var(--w2g-body);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  margin-bottom: 4px;
}
body.app-shell-v2 #competitionList .cv2-card .cv2-title {
  margin: 4px 0 3px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--w2g-ink);
  line-height: 1.25;
}
body.app-shell-v2 #competitionList .cv2-card .cv2-meta {
  margin: 0;
  font-size: 12px;
  color: var(--w2g-muted);
  line-height: 1.45;
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  align-items: center;
}
body.app-shell-v2 #competitionList .cv2-card .cv2-sep {
  color: var(--w2g-line-strong);
  margin: 0 2px;
  font-weight: 400;
}

/* ── Deadline pill (scoped inside cv2-card) ── */
body.app-shell-v2 #competitionList .cv2-card .pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  flex: none;
  align-self: flex-start;
}
body.app-shell-v2 #competitionList .cv2-card .pill .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: none;
}
body.app-shell-v2 #competitionList .cv2-card .pill.success {
  background: rgba(21, 163, 74, .10);
  color: #0F7A38;
}
body.app-shell-v2 #competitionList .cv2-card .pill.success .dot { background: #15A34A; }
body.app-shell-v2 #competitionList .cv2-card .pill.warning {
  background: rgba(201, 138, 18, .12);
  color: #9A6B0E;
}
body.app-shell-v2 #competitionList .cv2-card .pill.warning .dot { background: #C98A12; }
body.app-shell-v2 #competitionList .cv2-card .pill.info {
  background: rgba(37, 99, 235, .08);
  color: #1D4ED8;
}
body.app-shell-v2 #competitionList .cv2-card .pill.info .dot { background: #2563EB; }
body.app-shell-v2 #competitionList .cv2-card .pill.neutral {
  background: var(--w2g-surface-2);
  color: var(--w2g-muted);
}
body.app-shell-v2 #competitionList .cv2-card .pill.neutral .dot { background: var(--w2g-muted); }

/* ── Match meter — flat, no tinted box ── */
body.app-shell-v2 #competitionList .cv2-card .cv2-match {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
body.app-shell-v2 #competitionList .cv2-card .cv2-match-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
body.app-shell-v2 #competitionList .cv2-card .cv2-match-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 700;
}
body.app-shell-v2 #competitionList .cv2-card .cv2-tier-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}
body.app-shell-v2 #competitionList .cv2-card .cv2-match-score {
  font-size: 12px;
  font-weight: 700;
  color: var(--w2g-muted);
  font-variant-numeric: tabular-nums;
}
body.app-shell-v2 #competitionList .cv2-card .cv2-match-score b {
  color: var(--w2g-ink);
  font-size: 14px;
  font-weight: 800;
}
body.app-shell-v2 #competitionList .cv2-card .cv2-match-bar {
  height: 7px;
  border-radius: 999px;
  background: var(--w2g-match-track);
  overflow: hidden;
}
body.app-shell-v2 #competitionList .cv2-card .cv2-match-bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
}

/* Tier color tokens */
body.app-shell-v2 #competitionList .cv2-card .tier-strong .cv2-match-label { color: var(--w2g-match-ink); }
body.app-shell-v2 #competitionList .cv2-card .tier-strong .cv2-tier-dot,
body.app-shell-v2 #competitionList .cv2-card .tier-strong .cv2-match-bar i { background: var(--w2g-match-strong); }

body.app-shell-v2 #competitionList .cv2-card .tier-good .cv2-match-label { color: var(--w2g-match-good); }
body.app-shell-v2 #competitionList .cv2-card .tier-good .cv2-tier-dot,
body.app-shell-v2 #competitionList .cv2-card .tier-good .cv2-match-bar i { background: var(--w2g-match-good); }

body.app-shell-v2 #competitionList .cv2-card .tier-fair .cv2-match-label { color: var(--w2g-match-fair); }
body.app-shell-v2 #competitionList .cv2-card .tier-fair .cv2-tier-dot,
body.app-shell-v2 #competitionList .cv2-card .tier-fair .cv2-match-bar i { background: var(--w2g-match-fair); }

body.app-shell-v2 #competitionList .cv2-card .tier-low .cv2-match-label { color: var(--w2g-muted); }
body.app-shell-v2 #competitionList .cv2-card .tier-low .cv2-tier-dot,
body.app-shell-v2 #competitionList .cv2-card .tier-low .cv2-match-bar i { background: var(--w2g-match-low); }

/* ── "Why this match?" collapsible ── */
body.app-shell-v2 #competitionList .cv2-card .cv2-why {
  border: none;
  background: none;
  border-radius: 0;
}
body.app-shell-v2 #competitionList .cv2-card .cv2-why summary {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  list-style: none;
  padding: 5px 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--w2g-muted);
  user-select: none;
}
body.app-shell-v2 #competitionList .cv2-card .cv2-why summary::-webkit-details-marker { display: none; }
body.app-shell-v2 #competitionList .cv2-card .cv2-why summary::before {
  content: "›";
  display: inline-block;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  transition: transform .15s ease;
}
body.app-shell-v2 #competitionList .cv2-card .cv2-why[open] summary::before {
  transform: rotate(90deg);
}
body.app-shell-v2 #competitionList .cv2-card .cv2-why-body {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 4px 0 2px;
}
body.app-shell-v2 #competitionList .cv2-card .cv2-why-body small {
  color: var(--w2g-muted);
  font-size: 11px;
  line-height: 1.4;
  margin-top: 3px;
}

/* Explainer breakdown rows (reuse existing class names from competitionV2ExplainerRows) */
body.app-shell-v2 #competitionList .cv2-card .competition-v2-explainer-row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 7px;
  color: var(--w2g-body);
  font-size: 11.5px;
}
body.app-shell-v2 #competitionList .cv2-card .competition-v2-explainer-track {
  height: 5px;
  border-radius: 999px;
  background: var(--w2g-match-track);
  overflow: hidden;
}
body.app-shell-v2 #competitionList .cv2-card .competition-v2-explainer-track i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--w2g-match-strong);
}
body.app-shell-v2 #competitionList .cv2-card .competition-v2-explainer-row strong {
  color: var(--w2g-muted);
  font-size: 11px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
body.app-shell-v2 #competitionList .cv2-card .competition-v2-reason {
  margin: 0;
  font-size: 11.5px;
  color: var(--w2g-muted);
  line-height: 1.4;
}

/* ── Divider ── */
body.app-shell-v2 #competitionList .cv2-card .cv2-divider {
  height: 1px;
  background: var(--w2g-line);
  border: none;
  margin: 0;
}

/* ── Roles & recommended section ── */
body.app-shell-v2 #competitionList .cv2-card .cv2-roles {
  display: flex;
  flex-direction: column;
  gap: 0;
}
body.app-shell-v2 #competitionList .cv2-card .cv2-roles-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--w2g-muted);
  letter-spacing: .06em;
  margin-bottom: 6px;
}

/* ── Chips inside cv2-card (scoped, precise sizing) ── */
body.app-shell-v2 #competitionList .cv2-card .chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
body.app-shell-v2 #competitionList .cv2-card .chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border-radius: 7px;
  border: 1px solid var(--w2g-line);
  background: var(--w2g-surface-2);
  color: var(--w2g-body);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  box-shadow: none;
  border-radius: 7px !important;
}
body.app-shell-v2 #competitionList .cv2-card .chip.need {
  border-color: var(--w2g-orange-line) !important;
  background: var(--w2g-orange-soft) !important;
  color: var(--w2g-orange-ink) !important;
}
body.app-shell-v2 #competitionList .cv2-card .chip.rec {
  border-style: dashed !important;
  background: var(--w2g-surface-2) !important;
  color: var(--w2g-body) !important;
  border-color: var(--w2g-line-strong) !important;
}

/* ── Actions ── */
body.app-shell-v2 #competitionList .cv2-card .competition-v2-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 9px;
  padding-top: 0;
  border-top: none;
  margin-top: 2px;
}
body.app-shell-v2 #competitionList .cv2-card .competition-v2-actions .button {
  min-height: 38px;
  justify-content: center;
  border-radius: 10px;
  box-shadow: none !important;
  transform: none !important;
  font-size: 13px;
  font-weight: 600;
}

/* ── Description preview ── */
body.app-shell-v2 #competitionList .cv2-card .competition-description-wrap {
  padding: 10px;
  border-radius: 10px;
  background: var(--w2g-surface-2);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--w2g-body);
}
body.app-shell-v2 #competitionList .cv2-card .competition-description-wrap .item-meta {
  margin: 0;
  font-size: 12.5px;
  color: var(--w2g-body);
}

/* ── Closed notice ── */
body.app-shell-v2 #competitionList .cv2-card .competition-closed-notice {
  padding: 10px;
  border-radius: 10px;
  background: rgba(220, 38, 38, .06);
  border: 1px solid rgba(220, 38, 38, .14);
  font-size: 12.5px;
}

/* ── Dark mode ── */
html[data-theme="dark"] body.app-shell-v2 #competitionList .cv2-card {
  background: var(--w2g-surface);
  border-color: var(--w2g-line);
}
html[data-theme="dark"] body.app-shell-v2 #competitionList .cv2-card .cv2-chip,
html[data-theme="dark"] body.app-shell-v2 #competitionList .cv2-card .chip {
  background: var(--w2g-surface-2);
  border-color: var(--w2g-line);
  color: var(--w2g-body);
}
html[data-theme="dark"] body.app-shell-v2 #competitionList .cv2-card .chip.need {
  border-color: var(--w2g-orange-line) !important;
  background: var(--w2g-orange-soft) !important;
  color: var(--w2g-orange-ink) !important;
}
html[data-theme="dark"] body.app-shell-v2 #competitionList .cv2-card .pill.success {
  background: rgba(43, 179, 94, .15);
  color: #6FD79A;
}
html[data-theme="dark"] body.app-shell-v2 #competitionList .cv2-card .pill.success .dot { background: #2BB35E; }
html[data-theme="dark"] body.app-shell-v2 #competitionList .cv2-card .pill.warning {
  background: rgba(214, 162, 43, .15);
  color: #E7C260;
}
html[data-theme="dark"] body.app-shell-v2 #competitionList .cv2-card .pill.warning .dot { background: #D6A22B; }
html[data-theme="dark"] body.app-shell-v2 #competitionList .cv2-card .pill.info {
  background: rgba(91, 147, 245, .15);
  color: #9CBEFB;
}
html[data-theme="dark"] body.app-shell-v2 #competitionList .cv2-card .pill.info .dot { background: #5B93F5; }
html[data-theme="dark"] body.app-shell-v2 #competitionList .cv2-card .competition-description-wrap {
  background: var(--w2g-surface-2);
}

/* ── Responsive ── */
@media (max-width: 760px) {
  body.app-shell-v2 #competitionList .cv2-card .cv2-top {
    flex-wrap: wrap;
  }
  body.app-shell-v2 #competitionList .cv2-card .competition-v2-actions {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 520px) {
  body.app-shell-v2 #competitionList .cv2-card .competition-v2-explainer-row {
    grid-template-columns: 1fr auto;
  }
  body.app-shell-v2 #competitionList .cv2-card .competition-v2-explainer-row > :nth-child(2) {
    grid-column: 1 / -1;
  }
}


/* ================================================================
   DESIGN v2 PARITY — Content-area topbar divider + Competition
   page refinements
   ================================================================ */

/* ── 1. Content-area utility topbar (desktop ≥ 1051px only) ──
   auth-actions is repositioned from the sidebar bottom to a
   fixed horizontal bar at the top of the content column.
   This creates the top divider visible in the Design v2 reference.
   Mobile stays as-is (controls already handled by sidebar drawer). ── */

@media (min-width: 1051px) {
  body.app-shell-v2 .auth-actions {
    position: fixed;
    top: 0;
    left: 264px;
    right: 0;
    z-index: 75;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    height: 50px;
    padding: 0 clamp(24px, 4vw, 46px);
    border-top: none;
    border-bottom: none; /* removed: fixed-bar separator under auth controls */
    background: var(--w2g-surface);
    width: auto;
    grid-template-columns: none;
  }

  /* Reset full-width grid-column behaviours from sidebar layout */
  body.app-shell-v2 .auth-actions .language-switch {
    grid-column: auto;
    width: auto;
    flex: none;
    justify-content: flex-end;
    border-radius: 8px;
    min-height: 28px;
  }
  body.app-shell-v2 .auth-actions .language-switch button {
    flex: 0 0 auto;
    min-height: 28px;
    padding: 3px 9px;
    font-size: 11px;
  }
  body.app-shell-v2 .auth-actions .theme-toggle,
  body.app-shell-v2 .auth-actions .notification-button {
    min-height: 30px;
    padding: 0 6px;
  }
  body.app-shell-v2 .auth-actions #logoutButton {
    grid-column: auto;
    width: auto;
    min-height: 28px;
    padding: 4px 12px;
    border-radius: 8px;
    font-size: 11.5px;
  }

  /* Push page content below the fixed utility bar */
  body.app-shell-v2 .page-shell {
    padding-top: 74px; /* 50px bar + 24px original gap */
  }
}

/* ── 2. Competition page header — tighter vertical rhythm ── */
body.app-shell-v2 #competitions.competition-page-v2 .section-title-row {
  margin-top: 0;
  margin-bottom: 16px;
  padding-top: 0;
}
body.app-shell-v2 #competitions.competition-page-v2 .section-title-row > div:first-child {
  display: flex;
  flex-direction: column;
}
body.app-shell-v2 #competitions.competition-page-v2 .eyebrow {
  display: block;
  margin: 0 0 5px;
  padding: 0;
}
body.app-shell-v2 #competitions.competition-page-v2 .section-title-row h1 {
  margin: 0 0 5px;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.15;
}
body.app-shell-v2 #competitions.competition-page-v2 .section-title-row .muted {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.45;
}

/* ── 3. Filter shell — compact, clean, single-row ── */
body.app-shell-v2 #competitions.competition-page-v2 .competition-filter-shell {
  padding: 10px 12px;
  box-shadow: 0 1px 3px rgba(12, 16, 25, .04);
  margin-bottom: 16px;
}
body.app-shell-v2 #competitions.competition-page-v2 .filter-toolbar {
  grid-template-columns: minmax(200px, 1fr) auto auto minmax(190px, 220px);
  gap: 8px;
}
body.app-shell-v2 #competitions.competition-page-v2 .filter-toolbar label:has(#competitionSort) {
  grid-template-columns: auto minmax(150px, 1fr);
}
body.app-shell-v2 #competitions.competition-page-v2 #competitionSearch,
body.app-shell-v2 #competitions.competition-page-v2 #competitionSort {
  min-height: 36px;
  font-size: 13px;
}
body.app-shell-v2 #competitions.competition-page-v2 #competitionFilterToggle {
  min-height: 36px;
  font-size: 13px;
  padding-inline: 11px;
}
body.app-shell-v2 #competitions.competition-page-v2 .competition-quick-filters {
  gap: 6px;
  flex-wrap: nowrap;
}
body.app-shell-v2 #competitions.competition-page-v2 .competition-quick-filter {
  min-height: 32px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

/* ── 4. Card grid — equal-height rows, actions pinned to bottom ── */
body.app-shell-v2 #competitionList.card-grid {
  align-items: stretch;
  gap: 14px;
}

/* Pin action buttons to the bottom of every card */
body.app-shell-v2 #competitionList .cv2-card .competition-v2-actions {
  margin-top: auto;
}

/* ── 5. Dark mode top bar ── */
@media (min-width: 1051px) {
  html[data-theme="dark"] body.app-shell-v2 .auth-actions {
    background: var(--w2g-surface);
    border-bottom-color: var(--w2g-line);
  }
}

/* ── Responsive ── */
@media (max-width: 1180px) {
  body.app-shell-v2 #competitionList.card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body.app-shell-v2 #competitions.competition-page-v2 .filter-toolbar {
    grid-template-columns: minmax(180px, 1fr) auto auto minmax(170px, 200px);
  }
}
@media (max-width: 1050px) {
  body.app-shell-v2 .page-shell {
    padding-top: 16px;
  }
}
@media (max-width: 900px) {
  body.app-shell-v2 #competitions.competition-page-v2 .competition-quick-filters {
    flex-wrap: wrap;
  }
}
@media (max-width: 760px) {
  body.app-shell-v2 #competitionList.card-grid {
    grid-template-columns: 1fr;
  }
  body.app-shell-v2 #competitions.competition-page-v2 .filter-toolbar {
    grid-template-columns: 1fr;
  }
}


/* ================================================================
   DESIGN v2 — Full visual parity corrections pass
   Scope: logged-in Competitions page only.
   ================================================================ */

/* ── Page section: strip any inherited box treatment ── */
body.app-shell-v2 #competitions.competition-page-v2 {
  background: transparent;
  border: none;
  box-shadow: none;
}

/* ── Page header: plain text block, no card/box look ── */
body.app-shell-v2 #competitions.competition-page-v2 .section-title-row,
body.app-shell-v2 #competitions.competition-page-v2 .section-title-row > div,
body.app-shell-v2 #competitions.competition-page-v2 .section-title-row > div:first-child {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0;
}
body.app-shell-v2 #competitions.competition-page-v2 .section-title-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

/* Eyebrow: small orange uppercase label */
body.app-shell-v2 #competitions.competition-page-v2 .eyebrow {
  display: block;
  margin: 0 0 6px;
  padding: 0;
  color: var(--w2g-orange);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .10em;
  text-transform: uppercase;
  line-height: 1;
}

/* Title: bold, large, tight */
body.app-shell-v2 #competitions.competition-page-v2 .section-title-row h1 {
  margin: 0 0 6px;
  padding: 0;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.12;
  color: var(--w2g-ink);
}

/* Subtitle: compact muted text */
body.app-shell-v2 #competitions.competition-page-v2 .section-title-row .muted {
  margin: 0;
  padding: 0;
  max-width: 600px;
  color: var(--w2g-muted);
  font-size: 13.5px;
  line-height: 1.45;
}

/* ── Filter shell: compact white surface, clean border ── */
body.app-shell-v2 #competitions.competition-page-v2 .competition-filter-shell {
  margin-bottom: 20px;
  padding: 10px 12px;
  border: 1px solid var(--w2g-line);
  border-radius: 12px;
  background: var(--w2g-surface);
  box-shadow: 0 1px 2px rgba(12, 16, 25, .04);
}

/* Filter toolbar: single row, correct column widths */
body.app-shell-v2 #competitions.competition-page-v2 .filter-toolbar {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) auto auto minmax(195px, 225px);
  align-items: center;
  gap: 8px;
}

/* Sort label wrapper */
body.app-shell-v2 #competitions.competition-page-v2 .filter-toolbar label:has(#competitionSort) {
  display: grid;
  grid-template-columns: auto minmax(140px, 1fr);
  align-items: center;
  gap: 6px;
  color: var(--w2g-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* Search & sort control sizing */
body.app-shell-v2 #competitions.competition-page-v2 #competitionSearch,
body.app-shell-v2 #competitions.competition-page-v2 #competitionSort {
  min-height: 36px;
  font-size: 13px;
  border-color: var(--w2g-line);
  border-radius: 9px;
  background: var(--w2g-surface-2);
  box-shadow: none;
}

/* Filters button */
body.app-shell-v2 #competitions.competition-page-v2 #competitionFilterToggle {
  min-height: 36px;
  padding-inline: 11px;
  font-size: 13px;
  border-radius: 9px;
  box-shadow: none;
}

/* Quick-filter pills: compact, tight */
body.app-shell-v2 #competitions.competition-page-v2 .competition-quick-filters {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: nowrap;
  min-width: 0;
}
body.app-shell-v2 #competitions.competition-page-v2 .competition-quick-filter {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--w2g-line);
  border-radius: 999px;
  background: var(--w2g-surface);
  color: var(--w2g-muted);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
body.app-shell-v2 #competitions.competition-page-v2 .competition-quick-filter:hover,
body.app-shell-v2 #competitions.competition-page-v2 .competition-quick-filter.active {
  border-color: var(--w2g-orange-line);
  background: var(--w2g-orange-soft);
  color: var(--w2g-orange-ink);
}

/* Active-filters row */
body.app-shell-v2 #competitions.competition-page-v2 #competitionActiveFilters.active-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-top: 9px;
  padding: 8px 2px 0;
  border-top: 1px solid var(--w2g-line);
  background: transparent;
  box-shadow: none;
}

/* ── Card grid: 3-col desktop, full-height rows ── */
body.app-shell-v2 #competitionList.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 14px;
}

/* ── cv2-card: enforce full column height, actions at bottom ── */
body.app-shell-v2 #competitionList .cv2-card {
  gap: 12px;
  padding: 16px;
  border-radius: 12px;
}

/* Actions always sit at the bottom of the card */
body.app-shell-v2 #competitionList .cv2-card .competition-v2-actions {
  margin-top: auto;
  padding-top: 2px;
}

/* ── Card top: thumbnail + info + pill ── */
body.app-shell-v2 #competitionList .cv2-card .cv2-top {
  gap: 10px;
}
body.app-shell-v2 #competitionList .cv2-card .cv2-top-left {
  gap: 10px;
}

/* Thumbnail: 44x44, subtle orange accent for placeholder */
body.app-shell-v2 #competitionList .cv2-card .cv2-thumb {
  width: 44px;
  height: 44px;
  border-radius: 10px;
}

/* Category chip: neutral, compact */
body.app-shell-v2 #competitionList .cv2-card .cv2-chip {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 6px;
  border: 1px solid var(--w2g-line);
  background: var(--w2g-surface-2);
  color: var(--w2g-muted);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 3px;
}

/* Title: 15px, tighter than before */
body.app-shell-v2 #competitionList .cv2-card .cv2-title {
  margin: 2px 0 2px;
  font-size: 15px;
  line-height: 1.25;
}

/* Meta: compact muted line */
body.app-shell-v2 #competitionList .cv2-card .cv2-meta {
  font-size: 11.5px;
  gap: 2px;
}
body.app-shell-v2 #competitionList .cv2-card .cv2-sep {
  color: var(--w2g-faint, #98A0AE);
  font-size: 10px;
  margin: 0 1px;
}

/* ── Match meter: tighter spacing ── */
body.app-shell-v2 #competitionList .cv2-card .cv2-match {
  gap: 6px;
}
body.app-shell-v2 #competitionList .cv2-card .cv2-match-bar {
  height: 6px;
}

/* "Why this match?" summary: compact */
body.app-shell-v2 #competitionList .cv2-card .cv2-why summary {
  padding: 4px 0;
  font-size: 11.5px;
  color: var(--w2g-muted);
}

/* ── Divider ── */
body.app-shell-v2 #competitionList .cv2-card .cv2-divider {
  margin: 0;
}

/* ── Roles section ── */
body.app-shell-v2 #competitionList .cv2-card .cv2-roles {
  gap: 2px;
}
body.app-shell-v2 #competitionList .cv2-card .cv2-roles-label {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--w2g-muted);
  letter-spacing: .07em;
  margin-bottom: 5px;
}

/* ── Chips: match reference sizing exactly ── */
body.app-shell-v2 #competitionList .cv2-card .chip-row {
  gap: 5px;
}
body.app-shell-v2 #competitionList .cv2-card .chip {
  padding: 3px 8px;
  font-size: 11px;
  border-radius: 6px !important;
  font-weight: 600;
}

/* ── Action buttons: equal-width pair ── */
body.app-shell-v2 #competitionList .cv2-card .competition-v2-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  border-top: none;
  padding-top: 0;
}
body.app-shell-v2 #competitionList .cv2-card .competition-v2-actions .button {
  min-height: 36px;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: 9px;
  justify-content: center;
}

/* ── Responsive: 2-col ≤1180px, 1-col ≤760px ── */
@media (max-width: 1180px) {
  body.app-shell-v2 #competitionList.card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body.app-shell-v2 #competitions.competition-page-v2 .filter-toolbar {
    grid-template-columns: minmax(180px, 1fr) auto auto minmax(180px, 210px);
  }
  body.app-shell-v2 #competitions.competition-page-v2 .competition-quick-filters {
    flex-wrap: wrap;
  }
}
@media (max-width: 760px) {
  body.app-shell-v2 #competitionList.card-grid {
    grid-template-columns: 1fr;
  }
  body.app-shell-v2 #competitions.competition-page-v2 .filter-toolbar {
    grid-template-columns: 1fr;
  }
  body.app-shell-v2 #competitionList .cv2-card .competition-v2-actions {
    grid-template-columns: 1fr;
  }
}

/* ================================================================
   DESIGN v2 PARITY -- Competitions final scoped correction
   Scope: logged-in Competitions page only.
   ================================================================ */

@media (min-width: 1051px) {
  body.app-shell-v2:has(#competitions.active-view) .auth-actions {
    height: 52px;
    border-bottom: none;
    background: color-mix(in srgb, var(--w2g-surface) 96%, transparent);
  }

  body.app-shell-v2:has(#competitions.active-view) .page-shell {
    padding-top: 84px;
  }
}

body.app-shell-v2 #competitions.competition-page-v2 {
  width: 100%;
  max-width: 1180px;
  margin-inline: 0;
}

body.app-shell-v2 #competitions.competition-page-v2 .section-title-row,
body.app-shell-v2 #competitions.competition-page-v2 .section-title-row > div:first-child {
  display: block;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.app-shell-v2 #competitions.competition-page-v2 .section-title-row {
  align-items: flex-end;
  margin: 0 0 22px;
}

body.app-shell-v2 #competitions.competition-page-v2 .eyebrow {
  display: inline-block;
  width: auto;
  margin: 0 0 7px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--w2g-orange);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.11em;
  line-height: 1;
  text-transform: uppercase;
}

body.app-shell-v2 #competitions.competition-page-v2 .eyebrow::before,
body.app-shell-v2 #competitions.competition-page-v2 .eyebrow::after {
  display: none !important;
  content: none !important;
}

body.app-shell-v2 #competitions.competition-page-v2 .section-title-row h1 {
  margin: 0 0 6px;
  color: var(--w2g-ink);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

body.app-shell-v2 #competitions.competition-page-v2 .section-title-row .muted {
  max-width: 620px;
  margin: 0;
  color: var(--w2g-muted);
  font-size: 13.5px;
  line-height: 1.45;
}

body.app-shell-v2 #competitions.competition-page-v2 .competition-filter-shell {
  margin: 0 0 18px;
  padding: 12px;
  border: 1px solid var(--w2g-line);
  border-radius: 14px;
  background: var(--w2g-surface);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

body.app-shell-v2 #competitions.competition-page-v2 .filter-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

body.app-shell-v2 #competitions.competition-page-v2 .filter-search-field {
  position: relative;
  display: block;
  flex: 1 1 300px;
  min-width: min(100%, 240px);
}

body.app-shell-v2 #competitions.competition-page-v2 .filter-search-field > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

body.app-shell-v2 #competitions.competition-page-v2 .filter-search-field::before,
body.app-shell-v2 #competitions.competition-page-v2 .filter-search-field::after,
body.app-shell-guest #competitions.competition-page-v2 .filter-search-field::before,
body.app-shell-guest #competitions.competition-page-v2 .filter-search-field::after {
  content: none !important;
  display: none !important;
}

body.app-shell-v2 #competitions.competition-page-v2 .filter-search-field > .competition-search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  z-index: 2;
  display: inline-flex;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  overflow: visible;
  clip: auto;
  color: var(--w2g-muted);
  pointer-events: none;
  transform: translateY(-50%);
}

body.app-shell-v2 #competitions.competition-page-v2 .competition-search-icon svg {
  width: 18px;
  height: 18px;
  display: block;
  flex: none;
}

body.app-shell-v2 #competitions.competition-page-v2 #competitionSearch,
body.app-shell-v2 #competitions.competition-page-v2 #competitionSort {
  min-height: 36px;
  border-color: var(--w2g-line);
  border-radius: 10px;
  background: var(--w2g-bg);
  color: var(--w2g-ink);
  font-size: 13px;
  font-weight: 500;
  box-shadow: none;
}

body.app-shell-v2 #competitions.competition-page-v2 #competitionSearch {
  width: 100%;
  min-width: 0;
  padding: 8px 12px 8px 46px;
  line-height: 1.35;
}

body.app-shell-v2 #competitions.competition-page-v2 .competition-quick-filters {
  display: flex;
  min-width: 0;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
}

body.app-shell-v2 #competitions.competition-page-v2 .competition-quick-filter {
  min-height: 31px;
  padding: 7px 11px;
  border: 1px solid var(--w2g-line);
  border-radius: var(--w2g-r-pill);
  background: var(--w2g-surface);
  color: var(--w2g-body);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
  box-shadow: none;
}

body.app-shell-v2 #competitions.competition-page-v2 .competition-quick-filter:hover,
body.app-shell-v2 #competitions.competition-page-v2 .competition-quick-filter.active {
  border-color: var(--w2g-orange-line);
  background: var(--w2g-orange-soft);
  color: var(--w2g-orange-ink);
}

body.app-shell-v2 #competitions.competition-page-v2 #competitionFilterToggle {
  min-height: 36px;
  padding-inline: 12px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 600;
  box-shadow: none;
}

body.app-shell-v2 #competitions.competition-page-v2 .filter-toolbar label:has(#competitionSort) {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  color: var(--w2g-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body.app-shell-v2 #competitions.competition-page-v2 .filter-toolbar label:has(#competitionSort) #competitionSort {
  width: auto;
  min-width: 142px;
  padding: 8px 10px;
}

body.app-shell-v2 #competitions.competition-page-v2 #competitionFilterCount.filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  margin-left: 2px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--w2g-orange-soft);
  color: var(--w2g-orange-ink);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
}

body.app-shell-v2 #competitions.competition-page-v2 #competitionFilterCount.hidden {
  display: none;
}

body.app-shell-v2 #competitions.competition-page-v2 #competitionActiveFilters.active-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--w2g-line);
  border-radius: 11px;
  background: var(--w2g-surface-2);
  box-shadow: none;
}

body.app-shell-v2 #competitions.competition-page-v2 #competitionActiveFilters.hidden {
  display: none;
}

body.app-shell-v2 #competitions.competition-page-v2 #competitionActiveFilters .active-filter-label {
  color: var(--w2g-muted);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.app-shell-v2 #competitions.competition-page-v2 #competitionActiveFilters .active-filter-chip,
body.app-shell-v2 #competitions.competition-page-v2 #competitionActiveFilters .clear-filter-button {
  min-height: 27px;
  padding: 3px 9px;
  border-radius: var(--w2g-r-pill);
  border: 1px solid var(--w2g-line);
  background: var(--w2g-surface);
  font-size: 11.5px;
  font-weight: 600;
  box-shadow: none;
}

body.app-shell-v2 #competitionList.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 16px;
}

body.app-shell-v2 #competitionList .cv2-card {
  display: flex;
  min-width: 0;
  min-height: 392px;
  height: 100%;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--w2g-line) !important;
  border-radius: 14px;
  background: var(--w2g-surface) !important;
  box-shadow: none !important;
  transform: none !important;
}

body.app-shell-v2 #competitionList .cv2-card:hover {
  border-color: var(--w2g-line-strong) !important;
  box-shadow: var(--w2g-shadow-md, 0 8px 22px rgba(15, 23, 42, 0.06)) !important;
  transform: none !important;
}

body.app-shell-v2 #competitionList .cv2-card .cv2-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-height: 74px;
}

body.app-shell-v2 #competitionList .cv2-card .cv2-top-left {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  align-items: flex-start;
  gap: 12px;
}

body.app-shell-v2 #competitionList .cv2-card .cv2-thumb {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border-radius: 11px;
}

body.app-shell-v2 #competitionList .cv2-card .cv2-info {
  min-width: 0;
}

body.app-shell-v2 #competitionList .cv2-card .cv2-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 22px;
  padding: 3px 8px;
  border-radius: 7px;
  border-color: var(--w2g-line);
  background: var(--w2g-surface-2);
  color: var(--w2g-body);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}

body.app-shell-v2 #competitionList .cv2-card .cv2-title {
  display: -webkit-box;
  min-height: 40px;
  margin: 6px 0 3px;
  overflow: hidden;
  color: var(--w2g-ink);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body.app-shell-v2 #competitionList .cv2-card .cv2-meta {
  display: block;
  min-height: 17px;
  overflow: hidden;
  color: var(--w2g-muted);
  font-size: 12px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.app-shell-v2 #competitionList .cv2-card .pill {
  flex: 0 0 auto;
  min-height: 24px;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 600;
}

body.app-shell-v2 #competitionList .cv2-card .cv2-match {
  flex: 0 0 auto;
  gap: 7px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

body.app-shell-v2 #competitionList .cv2-card .cv2-match-label {
  font-size: 12px;
  font-weight: 700;
}

body.app-shell-v2 #competitionList .cv2-card .cv2-match-score {
  font-size: 12px;
  font-weight: 700;
}

body.app-shell-v2 #competitionList .cv2-card .cv2-match-score b {
  font-size: 14px;
}

body.app-shell-v2 #competitionList .cv2-card .cv2-match-bar {
  height: 7px;
}

body.app-shell-v2 #competitionList .cv2-card .cv2-why {
  min-height: 27px;
  border: 0;
  background: transparent;
}

body.app-shell-v2 #competitionList .cv2-card .cv2-why summary {
  min-height: 27px;
  padding: 5px 0;
  color: var(--w2g-muted);
  font-size: 12px;
  font-weight: 600;
}

body.app-shell-v2 #competitionList .cv2-card .cv2-divider {
  flex: 0 0 auto;
  margin: 0;
}

body.app-shell-v2 #competitionList .cv2-card .cv2-roles {
  flex: 1 1 auto;
  gap: 0;
}

body.app-shell-v2 #competitionList .cv2-card .cv2-roles-label {
  margin: 0 0 6px;
  color: var(--w2g-muted);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
}

body.app-shell-v2 #competitionList .cv2-card .cv2-roles-label[style] {
  margin-top: 11px !important;
}

body.app-shell-v2 #competitionList .cv2-card .chip-row {
  display: flex;
  min-height: 25px;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 6px;
}

body.app-shell-v2 #competitionList .cv2-card .chip {
  min-height: 24px;
  padding: 4px 9px;
  border-radius: 7px !important;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
}

body.app-shell-v2 #competitionList .cv2-card .chip.need {
  border-color: var(--w2g-orange-line) !important;
  background: var(--w2g-orange-soft) !important;
  color: var(--w2g-orange-ink) !important;
}

body.app-shell-v2 #competitionList .cv2-card .chip.rec {
  border-style: dashed !important;
  background: var(--w2g-surface-2) !important;
  color: var(--w2g-body) !important;
}

body.app-shell-v2 #competitionList .cv2-card .competition-closed-notice {
  display: -webkit-box;
  max-height: 58px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body.app-shell-v2 #competitionList .cv2-card .competition-v2-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 9px;
  margin-top: auto;
  padding-top: 2px;
  border-top: 0;
}

body.app-shell-v2 #competitionList .cv2-card .competition-v2-actions .button {
  min-width: 0;
  min-height: 38px;
  justify-content: center;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: none !important;
  transform: none !important;
}

html[data-theme="dark"] body.app-shell-v2 #competitions.competition-page-v2 .competition-filter-shell,
html[data-theme="dark"] body.app-shell-v2 #competitionList .cv2-card {
  background: var(--w2g-surface) !important;
  border-color: var(--w2g-line) !important;
}

@media (max-width: 1180px) {
  body.app-shell-v2 #competitionList.card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.app-shell-v2 #competitions.competition-page-v2 .filter-toolbar {
    display: flex;
  }

  body.app-shell-v2 #competitions.competition-page-v2 .filter-toolbar label:has(#competitionSort) {
    width: min(100%, 218px);
  }

  body.app-shell-v2 #competitions.competition-page-v2 .competition-quick-filters {
    flex-wrap: wrap;
  }
}

@media (max-width: 760px) {
  body.app-shell-v2 #competitions.competition-page-v2 {
    max-width: none;
  }

  body.app-shell-v2 #competitions.competition-page-v2 .section-title-row {
    align-items: flex-start;
    flex-direction: column;
  }

  body.app-shell-v2 #competitions.competition-page-v2 .filter-toolbar,
  body.app-shell-v2 #competitionList.card-grid {
    grid-template-columns: 1fr;
  }

  body.app-shell-v2 #competitions.competition-page-v2 .filter-toolbar {
    display: grid;
  }

  body.app-shell-v2 #competitions.competition-page-v2 .filter-toolbar label:has(#competitionSort) {
    grid-column: auto;
    justify-self: stretch;
    width: 100%;
  }

  body.app-shell-v2 #competitions.competition-page-v2 .competition-quick-filters {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 2px;
  }

  body.app-shell-v2 #competitionList .cv2-card {
    min-height: 0;
  }

  body.app-shell-v2 #competitionList .cv2-card .competition-v2-actions {
    grid-template-columns: 1fr;
  }
}

/* ================================================================
   MODAL LAYER FIX -- app shell controls must stay below overlays
   ================================================================ */

:root {
  --w2g-layer-shell-top: 115;
  --w2g-layer-modal-overlay: 6000;
  --w2g-layer-modal-panel: 6001;
}

body[data-page="app"] #modalOverlay.modal-overlay:not(.hidden) {
  position: fixed !important;
  inset: 0 !important;
  z-index: var(--w2g-layer-modal-overlay) !important;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(12, 16, 25, 0.58);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  pointer-events: auto;
}

body[data-page="app"] #modalOverlay.modal-overlay:not(.hidden) .modal-card {
  position: relative;
  z-index: var(--w2g-layer-modal-panel) !important;
}

body[data-page="app"] #modalOverlay.modal-overlay:not(.hidden):not(.team-workspace-fullscreen-modal) .modal-card {
  width: min(760px, calc(100vw - 36px));
  max-height: min(90vh, calc(100vh - 36px));
  overflow: auto;
}

body[data-page="app"].modal-open .auth-actions,
body[data-page="app"].modal-open .notification-button,
body[data-page="app"].modal-open .theme-toggle,
body[data-page="app"].modal-open .language-switch,
body[data-page="app"].modal-open .mobile-menu-button {
  pointer-events: none !important;
}

/* ================================================================
   FIND TEAM DESIGN V2 PARITY PASS -- logged-in Team Board only
   ================================================================ */

body.app-shell-v2 #teams.team-page-v2 {
  width: 100%;
  max-width: 1180px;
  margin-inline: 0;
  padding-top: 8px;
}

body.app-shell-v2 #teams.team-page-v2 .section-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin: 0 0 22px;
  padding: 0;
  border: 0;
  background: transparent;
}

/* Targets the copy block specifically, not .head-row itself -- .head-row is
   also a direct child of .section-title-row (wrapped in by
   ensureReferencePageHead()) and must stay full-width so its own
   justify-content:space-between can push #createTeamButton to the far
   right edge, in line with the toolbar below. */
body.app-shell-v2 #teams.team-page-v2 .head-row > div {
  max-width: 620px;
}

body.app-shell-v2 #teams.team-page-v2 .section-title-row .eyebrow {
  display: inline-block;
  margin: 0 0 7px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  color: var(--w2g-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-transform: uppercase;
}

body.app-shell-v2 #teams.team-page-v2 .section-title-row h1 {
  margin: 0 0 6px;
  color: var(--w2g-ink);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.15;
}

body.app-shell-v2 #teams.team-page-v2 .section-title-row .muted {
  max-width: 600px;
  margin: 0;
  color: var(--w2g-muted);
  font-size: 14px;
  line-height: 1.5;
}

body.app-shell-v2 #teams.team-page-v2 .section-title-row .product-helper-copy {
  display: none;
}

body.app-shell-v2 #teams.team-page-v2 #createTeamButton {
  min-height: 36px;
  flex: 0 0 auto;
  padding: 8px 13px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: none;
}

body.app-shell-v2 #teams.team-page-v2 .team-filter-shell {
  margin: 0 0 18px;
  padding: 12px;
  border: 1px solid var(--w2g-line);
  border-radius: 14px;
  background: var(--w2g-surface);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

body.app-shell-v2 #teams.team-page-v2 .filter-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0 !important;
  background: transparent !important;
}

body.app-shell-v2 #teams.team-page-v2 .filter-search-field {
  position: relative;
  display: block;
  flex: 1 1 300px;
  min-width: min(100%, 240px);
}

body.app-shell-v2 #teams.team-page-v2 .filter-search-field > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

body.app-shell-v2 #teams.team-page-v2 .filter-search-field::before,
body.app-shell-v2 #teams.team-page-v2 .filter-search-field::after,
body.app-shell-guest #teams.team-page-v2 .filter-search-field::before,
body.app-shell-guest #teams.team-page-v2 .filter-search-field::after {
  content: none !important;
  display: none !important;
}

body.app-shell-v2 #teams.team-page-v2 .filter-search-field > .team-search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  z-index: 2;
  display: inline-flex;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  overflow: visible;
  clip: auto;
  color: var(--w2g-muted);
  pointer-events: none;
  transform: translateY(-50%);
}

body.app-shell-v2 #teams.team-page-v2 .team-search-icon svg {
  display: block;
  width: 18px;
  height: 18px;
  flex: none;
}

body.app-shell-v2 #teams.team-page-v2 #teamSearch,
body.app-shell-v2 #teams.team-page-v2 #teamSort {
  min-height: 36px;
  border-color: var(--w2g-line);
  border-radius: 10px;
  background: var(--w2g-bg);
  color: var(--w2g-ink);
  font-size: 13px;
  font-weight: 500;
  box-shadow: none;
}

body.app-shell-v2 #teams.team-page-v2 #teamSearch {
  width: 100%;
  min-width: 0;
  padding: 8px 12px 8px 46px;
  line-height: 1.35;
}

body.app-shell-v2 #teams.team-page-v2 .team-quick-filters {
  display: flex;
  min-width: 0;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
}

body.app-shell-v2 #teams.team-page-v2 .team-quick-filter {
  min-height: 31px;
  padding: 7px 11px;
  border: 1px solid var(--w2g-line);
  border-radius: var(--w2g-r-pill);
  background: var(--w2g-surface);
  color: var(--w2g-body);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
  box-shadow: none;
}

body.app-shell-v2 #teams.team-page-v2 .team-quick-filter:hover,
body.app-shell-v2 #teams.team-page-v2 .team-quick-filter.active {
  border-color: var(--w2g-orange-line);
  background: var(--w2g-orange-soft);
  color: var(--w2g-orange-ink);
}

body.app-shell-v2 #teams.team-page-v2 #teamFilterToggle {
  min-height: 36px;
  padding-inline: 12px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 600;
  box-shadow: none;
}

body.app-shell-v2 #teams.team-page-v2 .filter-toolbar label:has(#teamSort) {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  color: var(--w2g-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body.app-shell-v2 #teams.team-page-v2 .filter-toolbar label:has(#teamSort) #teamSort {
  width: auto;
  min-width: 150px;
  padding: 8px 10px;
}

body.app-shell-v2 #teams.team-page-v2 #teamFilterCount.filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  margin-left: 2px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--w2g-orange-soft);
  color: var(--w2g-orange-ink);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
}

body.app-shell-v2 #teams.team-page-v2 #teamFilterCount.hidden {
  display: none;
}

body.app-shell-v2 #teams.team-page-v2 #teamActiveFilters.active-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--w2g-line);
  border-radius: 11px;
  background: var(--w2g-surface-2);
  box-shadow: none;
}

body.app-shell-v2 #teams.team-page-v2 #teamActiveFilters.hidden {
  display: none;
}

body.app-shell-v2 #teams.team-page-v2 #teamActiveFilters .active-filter-label {
  color: var(--w2g-muted);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.app-shell-v2 #teams.team-page-v2 #teamActiveFilters .active-filter-chip,
body.app-shell-v2 #teams.team-page-v2 #teamActiveFilters .clear-filter-button {
  min-height: 27px;
  padding: 3px 9px;
  border: 1px solid var(--w2g-line);
  border-radius: var(--w2g-r-pill);
  background: var(--w2g-surface);
  font-size: 11.5px;
  font-weight: 600;
  box-shadow: none;
}

body.app-shell-v2 #teamList.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 16px;
}

body.app-shell-v2 #teamList > .score-explainer {
  grid-column: 1 / -1;
}

body.app-shell-v2 #teamList .team-card-v2 {
  display: flex;
  min-width: 0;
  min-height: 412px;
  height: 100%;
  flex-direction: column;
  gap: 13px;
  padding: 18px;
  border: 1px solid var(--w2g-line) !important;
  border-radius: 14px;
  background: var(--w2g-surface) !important;
  box-shadow: none !important;
  transform: none !important;
}

body.app-shell-v2 #teamList .team-card-v2:hover {
  border-color: var(--w2g-line-strong) !important;
  box-shadow: var(--w2g-shadow-md, 0 8px 22px rgba(15, 23, 42, 0.06)) !important;
  transform: none !important;
}

body.app-shell-v2 #teamList .team-card-v2 .team-invitation-banner,
body.app-shell-v2 #teamList .team-card-v2 .team-request-pending-banner {
  margin: -2px 0 0;
  padding: 9px 10px;
  border-radius: 10px;
}

body.app-shell-v2 #teamList .team-card-v2 .discovery-shell-top {
  display: flex;
  min-height: 24px;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  order: 0;
}

body.app-shell-v2 #teamList .team-card-v2 .discovery-shell-header {
  display: block;
  min-height: 62px;
  order: 1;
}

body.app-shell-v2 #teamList .team-card-v2 .discovery-title-block {
  min-width: 0;
}

body.app-shell-v2 #teamList .team-card-v2 .item-title {
  display: -webkit-box;
  min-height: 40px;
  margin: 0 0 5px;
  overflow: hidden;
  color: var(--w2g-ink);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body.app-shell-v2 #teamList .team-card-v2 .item-meta,
body.app-shell-v2 #teamList .team-card-v2 .discovery-competition-link {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--w2g-muted);
  font-size: 12px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

body.app-shell-v2 #teamList .team-card-v2 .discovery-meta-row {
  display: flex;
  min-height: 25px;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  order: 2;
}

body.app-shell-v2 #teamList .team-card-v2 .tag,
body.app-shell-v2 #teamList .team-card-v2 .mini-chip {
  display: inline-flex;
  min-height: 23px;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border: 1px solid var(--w2g-line);
  border-radius: 7px;
  background: var(--w2g-surface-2);
  color: var(--w2g-body);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1;
}

body.app-shell-v2 #teamList .team-card-v2 .tag.gray {
  color: var(--w2g-muted);
}

body.app-shell-v2 #teamList .team-card-v2 .mini-chip:first-child {
  border-radius: var(--w2g-r-pill);
  color: var(--w2g-muted);
}

body.app-shell-v2 #teamList .team-card-v2 .discovery-fact-grid {
  display: none;
}

body.app-shell-v2 #teamList .team-card-v2 .discovery-summary-panel {
  order: 3;
  min-height: 41px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent !important;
}

body.app-shell-v2 #teamList .team-card-v2 .discovery-summary-text {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--w2g-body);
  font-size: 13px;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body.app-shell-v2 #teamList .team-card-v2 .collapsible-copy .read-more-link {
  display: none;
}

body.app-shell-v2 #teamList .team-card-v2 .match-meter-v2 {
  order: 4;
  gap: 7px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent !important;
}

body.app-shell-v2 #teamList .team-card-v2 .match-meter-head {
  align-items: center;
  gap: 10px;
}

body.app-shell-v2 #teamList .team-card-v2 .match-meter-v2 .score-meter-label {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

body.app-shell-v2 #teamList .team-card-v2 .match-meter-v2 .score-meter-label span {
  color: var(--w2g-ink);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

body.app-shell-v2 #teamList .team-card-v2 .match-meter-v2 .score-meter-label strong {
  color: var(--w2g-ink);
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
}

body.app-shell-v2 #teamList .team-card-v2 .match-quality-badge {
  display: none;
}

body.app-shell-v2 #teamList .team-card-v2 .score-meter-track {
  height: 7px;
  border-radius: 999px;
  background: var(--w2g-match-track);
}

body.app-shell-v2 #teamList .team-card-v2 .score-meter-track span {
  border-radius: inherit;
}

body.app-shell-v2 #teamList .team-card-v2 .match-explainer-v2 {
  margin-top: 3px;
  border: 1px solid var(--w2g-line);
  border-radius: 10px;
  background: var(--w2g-surface);
}

body.app-shell-v2 #teamList .team-card-v2 .match-explainer-v2 summary {
  padding: 8px 10px;
  color: var(--w2g-ink);
  font-size: 12.5px;
  font-weight: 700;
}

body.app-shell-v2 #teamList .team-card-v2 .match-explainer-v2 .match-reasons {
  padding: 0 10px 9px;
}

body.app-shell-v2 #teamList .team-card-v2 .match-feedback-lite {
  order: 4;
  margin: -2px 0 0;
  padding: 0;
}

body.app-shell-v2 #teamList .team-card-v2 .match-feedback-lite .small-copy {
  margin: 0 0 6px;
  font-size: 11.5px;
  line-height: 1.35;
}

body.app-shell-v2 #teamList .team-card-v2 .match-feedback-actions {
  gap: 5px;
}

body.app-shell-v2 #teamList .team-card-v2 .match-feedback-actions .button {
  min-height: 26px;
  padding: 3px 7px;
  border-radius: 8px;
  font-size: 11px;
}

body.app-shell-v2 #teamList .team-card-v2 .discovery-role-block {
  order: 5;
  margin-top: 0;
  padding: 13px 0 0;
  border: 0;
  border-top: 1px solid var(--w2g-line);
  border-radius: 0;
  background: transparent !important;
}

body.app-shell-v2 #teamList .team-card-v2 .discovery-role-block > span {
  margin: 0 0 6px;
  color: var(--w2g-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.1;
  text-transform: uppercase;
}

body.app-shell-v2 #teamList .team-card-v2 .discovery-tag-cluster {
  display: flex;
  max-height: 59px;
  flex-wrap: wrap;
  gap: 6px;
  overflow: hidden;
}

body.app-shell-v2 #teamList .team-card-v2 .discovery-tag-cluster .tag:not(.gray) {
  border-color: var(--w2g-orange-line);
  background: var(--w2g-orange-soft);
  color: var(--w2g-orange-ink);
}

body.app-shell-v2 #teamList .team-card-v2 .discovery-tag-cluster .tag.gray {
  background: var(--w2g-surface-2);
  color: var(--w2g-muted);
}

body.app-shell-v2 #teamList .team-card-v2 .discovery-actions-stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 9px;
  order: 6;
  margin-top: auto;
  padding-top: 2px;
  border-top: 0;
}

body.app-shell-v2 #teamList .team-card-v2 .discovery-primary-actions,
body.app-shell-v2 #teamList .team-card-v2 .discovery-secondary-actions {
  display: contents;
}

body.app-shell-v2 #teamList .team-card-v2 .discovery-secondary-actions [data-save-team-button] {
  display: inline-flex;
  min-width: 74px;
  padding-inline: 10px;
}

body.app-shell-v2 #teamList .team-card-v2 .discovery-actions-stack .button {
  min-width: 0;
  min-height: 38px;
  justify-content: center;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: none !important;
  transform: none !important;
}

html[data-theme="dark"] body.app-shell-v2 #teams.team-page-v2 .team-filter-shell,
html[data-theme="dark"] body.app-shell-v2 #teamList .team-card-v2,
html[data-theme="dark"] body.app-shell-v2 #teamList .team-card-v2 .match-explainer-v2 {
  background: var(--w2g-surface) !important;
  border-color: var(--w2g-line) !important;
}

html[data-theme="dark"] body.app-shell-v2 #teams.team-page-v2 #teamActiveFilters.active-filter-row,
html[data-theme="dark"] body.app-shell-v2 #teamList .team-card-v2 .tag,
html[data-theme="dark"] body.app-shell-v2 #teamList .team-card-v2 .mini-chip {
  background: var(--w2g-surface-2);
  border-color: var(--w2g-line);
}

@media (max-width: 1180px) {
  body.app-shell-v2 #teamList.card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.app-shell-v2 #teams.team-page-v2 .filter-toolbar label:has(#teamSort) {
    width: min(100%, 218px);
  }

  body.app-shell-v2 #teams.team-page-v2 .team-quick-filters {
    flex-wrap: wrap;
  }
}

@media (max-width: 760px) {
  body.app-shell-v2 #teams.team-page-v2 {
    max-width: none;
  }

  body.app-shell-v2 #teams.team-page-v2 .section-title-row {
    align-items: flex-start;
    flex-direction: column;
  }

  body.app-shell-v2 #teams.team-page-v2 #createTeamButton {
    width: 100%;
    justify-content: center;
  }

  body.app-shell-v2 #teams.team-page-v2 .filter-toolbar,
  body.app-shell-v2 #teamList.card-grid {
    display: grid;
    grid-template-columns: 1fr;
  }

  body.app-shell-v2 #teams.team-page-v2 .filter-toolbar label:has(#teamSort) {
    width: 100%;
    margin-left: 0;
  }

  body.app-shell-v2 #teams.team-page-v2 .team-quick-filters {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 2px;
  }

  body.app-shell-v2 #teamList .team-card-v2 {
    min-height: 0;
  }

  body.app-shell-v2 #teamList .team-card-v2 .discovery-actions-stack {
    grid-template-columns: 1fr;
  }
}

/* ================================================================
   DESIGN v2 PARITY -- Competitions + Find Team closeout
   Scope: logged-in v2 app shell only.
   ================================================================ */

@media (min-width: 1051px) {
  body.app-shell-v2:has(#competitions.active-view) .page-shell,
  body.app-shell-v2:has(#teams.active-view) .page-shell {
    padding-top: 74px;
  }

  body.app-shell-v2:has(#competitions.active-view) .page-shell::before,
  body.app-shell-v2:has(#teams.active-view) .page-shell::before {
    content: none;
  }
}

body.app-shell-v2 #competitions.competition-page-v2,
body.app-shell-v2 #teams.team-page-v2 {
  margin-left: 0 !important;
  margin-right: auto !important;
}

body.app-shell-v2 #competitions.competition-page-v2 .section-title-row .eyebrow,
body.app-shell-v2 #teams.team-page-v2 .section-title-row .eyebrow {
  color: var(--w2g-muted) !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
}

body.app-shell-v2 #competitions.competition-page-v2 .competition-filter-shell,
body.app-shell-v2 #teams.team-page-v2 .team-filter-shell {
  border-radius: 14px;
  box-shadow: none;
}

body.app-shell-v2 #competitions.competition-page-v2 .competition-search-icon,
body.app-shell-v2 #teams.team-page-v2 .team-search-icon {
  line-height: 0;
}

body.app-shell-v2 #competitions.competition-page-v2 .competition-search-icon[data-icon],
body.app-shell-v2 #teams.team-page-v2 .team-search-icon[data-icon] {
  color: var(--w2g-muted);
}

body.app-shell-v2 #competitionList .cv2-card .cv2-match-head,
body.app-shell-v2 #teamList .team-card-v2 .match-meter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

body.app-shell-v2 #competitionList .cv2-card .cv2-tier-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
}

body.app-shell-v2 #competitionList .cv2-card .cv2-match-bar,
body.app-shell-v2 #teamList .team-card-v2 .score-meter-track {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--w2g-match-track) !important;
}

body.app-shell-v2 #competitionList .cv2-card .cv2-match-bar i,
body.app-shell-v2 #teamList .team-card-v2 .score-meter-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
}

body.app-shell-v2 #teamList .team-card-v2 .match-quality-badge {
  order: -1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--w2g-match-ink);
  font-size: 12.5px;
  font-weight: 700;
}

body.app-shell-v2 #teamList .team-card-v2 .match-quality-badge::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

body.app-shell-v2 #teamList .team-card-v2 .match-tone-good .match-quality-badge {
  color: var(--w2g-match-good);
}

body.app-shell-v2 #teamList .team-card-v2 .match-tone-fair .match-quality-badge {
  color: var(--w2g-match-fair);
}

body.app-shell-v2 #teamList .team-card-v2 .match-tone-low .match-quality-badge {
  color: var(--w2g-match-low);
}

body.app-shell-v2 #teamList .team-card-v2 .match-meter-v2 .score-meter-label {
  flex: 0 0 auto;
  margin-left: auto;
}

body.app-shell-v2 #teamList .team-card-v2 .match-meter-v2 .score-meter-label > span {
  display: none;
}

body.app-shell-v2 #teamList .team-card-v2 .match-meter-v2 .score-meter-label strong,
body.app-shell-v2 #competitionList .cv2-card .cv2-match-score {
  color: var(--w2g-muted);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

body.app-shell-v2 #teamList .team-card-v2 .match-meter-v2 .score-meter-label strong b,
body.app-shell-v2 #competitionList .cv2-card .cv2-match-score b {
  color: var(--w2g-ink);
  font-size: 14px;
}

body.app-shell-v2 #teamList .team-card-v2 .discovery-role-block,
body.app-shell-v2 #competitionList .cv2-card .cv2-roles {
  min-height: 112px;
}

body.app-shell-v2 #teamList .team-card-v2 .discovery-actions-stack,
body.app-shell-v2 #competitionList .cv2-card .competition-v2-actions {
  align-items: stretch;
}

body.app-shell-v2 #modalOverlay .topbar,
body.app-shell-v2 #modalOverlay .auth-actions,
body.app-shell-v2 #modalOverlay .main-nav {
  display: none !important;
}

@media (min-width: 1051px) {
  body.app-shell-v2 #modalOverlay[data-modal-kind="competitionDetail"].modal-overlay:not(.hidden) {
    padding: 18px 18px 18px calc(264px + 18px);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

body.app-shell-v2 #modalOverlay[data-modal-kind="competitionDetail"].modal-overlay:not(.hidden) .modal-card {
  width: min(760px, 100%);
  border-radius: 14px;
  box-shadow: var(--w2g-shadow-lg, 0 18px 48px rgba(12, 16, 25, 0.16));
}

/* ================================================================
   DESIGN v2 PARITY CLOSEOUT -- Competitions + Find Team
   Late scoped overrides for the two logged-in discovery pages.
   ================================================================ */

@media (min-width: 1051px) {
  body.app-shell-v2:has(#competitions.active-view) .page-shell,
  body.app-shell-v2:has(#teams.active-view) .page-shell {
    padding: 74px 28px 64px !important;
  }

  body.app-shell-v2:has(#competitions.active-view) .page-shell::before,
  body.app-shell-v2:has(#teams.active-view) .page-shell::before {
    content: none !important;
  }
}

body.app-shell-v2 #competitions.competition-page-v2,
body.app-shell-v2 #teams.team-page-v2 {
  width: min(100%, 1180px) !important;
  max-width: 1180px !important;
  margin-inline: 0 auto !important;
}

body.app-shell-v2 #competitions.competition-page-v2 .section-title-row,
body.app-shell-v2 #teams.team-page-v2 .section-title-row {
  margin-bottom: 22px !important;
}

body.app-shell-v2 #competitions.competition-page-v2 .section-title-row .eyebrow,
body.app-shell-v2 #teams.team-page-v2 .section-title-row .eyebrow {
  display: inline-block !important;
  margin: 0 0 7px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--w2g-muted) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
}

body.app-shell-v2 #competitions.competition-page-v2 .section-title-row h1,
body.app-shell-v2 #teams.team-page-v2 .section-title-row h1 {
  margin: 0 0 6px !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.1 !important;
}

body.app-shell-v2 #competitions.competition-page-v2 .section-title-row .muted,
body.app-shell-v2 #teams.team-page-v2 .section-title-row .muted {
  max-width: 600px !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

body.app-shell-v2 #competitions.competition-page-v2 .competition-filter-shell,
body.app-shell-v2 #teams.team-page-v2 .team-filter-shell {
  margin: 0 0 18px !important;
  padding: 12px !important;
  overflow: visible !important;
  border: 1px solid var(--w2g-line) !important;
  border-radius: 14px !important;
  background: var(--w2g-surface) !important;
  box-shadow: none !important;
}

body.app-shell-v2 #competitions.competition-page-v2 .filter-toolbar,
body.app-shell-v2 #teams.team-page-v2 .filter-toolbar {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px !important;
  overflow: visible !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body.app-shell-v2 #competitions.competition-page-v2 .filter-search-field,
body.app-shell-v2 #teams.team-page-v2 .filter-search-field {
  position: relative !important;
  display: flex !important;
  flex: 1 1 300px !important;
  min-width: min(100%, 240px) !important;
  align-items: center !important;
}

body.app-shell-v2 #competitions.competition-page-v2 .filter-search-field > span:not(.competition-search-icon),
body.app-shell-v2 #teams.team-page-v2 .filter-search-field > span:not(.team-search-icon) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

body.app-shell-v2 #competitions.competition-page-v2 .competition-search-icon,
body.app-shell-v2 #teams.team-page-v2 .team-search-icon {
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  z-index: 2 !important;
  display: inline-flex !important;
  width: 16px !important;
  height: 16px !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--w2g-muted) !important;
  line-height: 0 !important;
  pointer-events: none !important;
  transform: translateY(-50%) !important;
}

body.app-shell-v2 #competitions.competition-page-v2 #competitionSearch,
body.app-shell-v2 #teams.team-page-v2 #teamSearch {
  width: 100% !important;
  min-height: 36px !important;
  padding: 8px 12px 8px 38px !important;
  border: 1px solid var(--w2g-line) !important;
  border-radius: 10px !important;
  background: var(--w2g-bg) !important;
  color: var(--w2g-ink) !important;
  font-size: 13.5px !important;
  line-height: 1.35 !important;
  box-shadow: none !important;
}

body.app-shell-v2 #competitions.competition-page-v2 .competition-quick-filters,
body.app-shell-v2 #teams.team-page-v2 .team-quick-filters {
  display: flex !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
}

body.app-shell-v2 #competitions.competition-page-v2 .competition-quick-filter,
body.app-shell-v2 #teams.team-page-v2 .team-quick-filter {
  min-height: 30px !important;
  padding: 6px 10px !important;
  border: 1px solid var(--w2g-line) !important;
  border-radius: 999px !important;
  background: var(--w2g-surface-2) !important;
  color: var(--w2g-body) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

body.app-shell-v2 #competitions.competition-page-v2 .competition-quick-filter.active,
body.app-shell-v2 #teams.team-page-v2 .team-quick-filter.active {
  border-color: var(--w2g-orange-line) !important;
  background: var(--w2g-orange-soft) !important;
  color: var(--w2g-orange-ink) !important;
}

body.app-shell-v2 #competitions.competition-page-v2 #competitionFilterToggle,
body.app-shell-v2 #teams.team-page-v2 #teamFilterToggle {
  min-height: 36px !important;
  padding: 8px 12px !important;
  border-radius: 10px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

body.app-shell-v2 #competitions.competition-page-v2 .filter-toolbar label:has(#competitionSort),
body.app-shell-v2 #teams.team-page-v2 .filter-toolbar label:has(#teamSort) {
  display: flex !important;
  flex: 0 0 auto !important;
  min-width: 190px !important;
  width: auto !important;
  align-items: center !important;
  gap: 7px !important;
  margin-left: auto !important;
  color: var(--w2g-muted) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

body.app-shell-v2 #competitions.competition-page-v2 #competitionSort,
body.app-shell-v2 #teams.team-page-v2 #teamSort {
  width: 100% !important;
  min-width: 150px !important;
  min-height: 36px !important;
  padding: 8px 30px 8px 10px !important;
  border: 1px solid var(--w2g-line) !important;
  border-radius: 10px !important;
  background-color: var(--w2g-bg) !important;
  color: var(--w2g-ink) !important;
  font-size: 13px !important;
  box-shadow: none !important;
}

body.app-shell-v2 #competitions.competition-page-v2 .active-filter-row,
body.app-shell-v2 #teams.team-page-v2 .active-filter-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 12px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body.app-shell-v2 #competitions.competition-page-v2 .active-filter-row.hidden,
body.app-shell-v2 #teams.team-page-v2 .active-filter-row.hidden {
  display: none !important;
}

body.app-shell-v2 #competitionList.card-grid,
body.app-shell-v2 #teamList.card-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 16px !important;
}

body.app-shell-v2 #teamList > .score-explainer {
  display: none !important;
}

body.app-shell-v2 #competitionList .cv2-card,
body.app-shell-v2 #teamList .team-card-v2 {
  min-width: 0 !important;
  height: 100% !important;
  padding: 18px !important;
  border: 1px solid var(--w2g-line) !important;
  border-radius: 14px !important;
  background: var(--w2g-surface) !important;
  box-shadow: none !important;
  transform: none !important;
}

body.app-shell-v2 #competitionList .cv2-card {
  min-height: 398px !important;
}

body.app-shell-v2 #teamList .team-card-v2 {
  min-height: 390px !important;
  gap: 13px !important;
}

body.app-shell-v2 #competitionList .cv2-card:hover,
body.app-shell-v2 #teamList .team-card-v2:hover {
  border-color: var(--w2g-line-strong) !important;
  box-shadow: var(--w2g-shadow-md, 0 8px 22px rgba(15, 23, 42, 0.06)) !important;
}

body.app-shell-v2 #teamList .team-card-v2 .lc-top {
  display: flex !important;
  min-height: 74px !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
  order: 0 !important;
}

body.app-shell-v2 #teamList .team-card-v2 .team-status-row {
  min-height: 0 !important;
  order: 1 !important;
}

body.app-shell-v2 #teamList .team-card-v2 .discovery-meta-row {
  order: 2 !important;
}

body.app-shell-v2 #teamList .team-card-v2 .discovery-summary-panel {
  order: 3 !important;
  min-height: 41px !important;
}

body.app-shell-v2 #teamList .team-card-v2 .match-meter-v2 {
  order: 4 !important;
}

body.app-shell-v2 #teamList .team-card-v2 .match-feedback-lite {
  order: 5 !important;
}

body.app-shell-v2 #teamList .team-card-v2 .divider {
  order: 6 !important;
  height: 1px !important;
  margin: 0 !important;
  border: 0 !important;
  background: var(--w2g-line) !important;
}

body.app-shell-v2 #teamList .team-card-v2 .discovery-role-block {
  order: 7 !important;
  min-height: 88px !important;
  padding: 0 !important;
  border: 0 !important;
}

body.app-shell-v2 #teamList .team-card-v2 .discovery-actions-stack {
  order: 8 !important;
}

body.app-shell-v2 #competitionList .cv2-card .cv2-title,
body.app-shell-v2 #teamList .team-card-v2 .item-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.25 !important;
}

body.app-shell-v2 #competitionList .cv2-card .cv2-meta,
body.app-shell-v2 #teamList .team-card-v2 .item-meta {
  color: var(--w2g-muted) !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
}

body.app-shell-v2 #competitionList .cv2-card .cv2-match-label,
body.app-shell-v2 #teamList .team-card-v2 .match-quality-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  color: var(--w2g-match-ink) !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
}

body.app-shell-v2 #competitionList .cv2-card .cv2-match.tier-good .cv2-match-label,
body.app-shell-v2 #teamList .team-card-v2 .match-tone-good .match-quality-badge {
  color: var(--w2g-match-good) !important;
}

body.app-shell-v2 #competitionList .cv2-card .cv2-match.tier-fair .cv2-match-label,
body.app-shell-v2 #teamList .team-card-v2 .match-tone-fair .match-quality-badge {
  color: var(--w2g-match-fair) !important;
}

body.app-shell-v2 #competitionList .cv2-card .cv2-match.tier-low .cv2-match-label,
body.app-shell-v2 #teamList .team-card-v2 .match-tone-low .match-quality-badge {
  color: var(--w2g-match-low) !important;
}

body.app-shell-v2 #competitionList .cv2-card .cv2-match-score,
body.app-shell-v2 #teamList .team-card-v2 .score-meter-label strong {
  color: var(--w2g-muted) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums !important;
}

body.app-shell-v2 #competitionList .cv2-card .cv2-match-score b,
body.app-shell-v2 #teamList .team-card-v2 .score-meter-label strong b {
  color: var(--w2g-ink) !important;
  font-size: 14px !important;
}

body.app-shell-v2 #competitionList .cv2-card .cv2-why,
body.app-shell-v2 #teamList .team-card-v2 .match-explainer-v2 {
  min-height: 29px !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body.app-shell-v2 #competitionList .cv2-card .cv2-why summary,
body.app-shell-v2 #teamList .team-card-v2 .match-explainer-v2 summary {
  padding: 5px 0 !important;
  color: var(--w2g-muted) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

body.app-shell-v2 #competitionList .cv2-card .cv2-why[open] .cv2-why-body,
body.app-shell-v2 #teamList .team-card-v2 .match-explainer-v2[open] .match-reasons {
  margin-top: 6px !important;
  padding: 10px !important;
  border: 1px solid color-mix(in srgb, var(--w2g-match-strong) 22%, transparent) !important;
  border-radius: 11px !important;
  background: var(--w2g-match-soft) !important;
}

body.app-shell-v2 #competitionList .cv2-card .cv2-roles-label,
body.app-shell-v2 #teamList .team-card-v2 .discovery-role-block > span {
  display: block !important;
  margin: 0 0 6px !important;
  color: var(--w2g-muted) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  line-height: 1.1 !important;
  text-transform: uppercase !important;
}

body.app-shell-v2 #competitionList .cv2-card .chip,
body.app-shell-v2 #teamList .team-card-v2 .tag,
body.app-shell-v2 #teamList .team-card-v2 .mini-chip {
  min-height: 24px !important;
  padding: 4px 9px !important;
  border-radius: 7px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}

body.app-shell-v2 #teamList .team-card-v2 .tag.need {
  border-color: var(--w2g-orange-line) !important;
  background: var(--w2g-orange-soft) !important;
  color: var(--w2g-orange-ink) !important;
}

body.app-shell-v2 #competitionList .cv2-card .competition-v2-actions,
body.app-shell-v2 #teamList .team-card-v2 .discovery-actions-stack {
  display: flex !important;
  gap: 9px !important;
  margin-top: auto !important;
  padding-top: 2px !important;
}

body.app-shell-v2 #teamList .team-card-v2 .discovery-primary-actions,
body.app-shell-v2 #teamList .team-card-v2 .discovery-secondary-actions {
  display: contents !important;
}

body.app-shell-v2 #competitionList .cv2-card .competition-v2-actions .button,
body.app-shell-v2 #teamList .team-card-v2 .discovery-actions-stack .button {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  min-height: 38px !important;
  justify-content: center !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

body.app-shell-v2:has(#modalOverlay[data-modal-kind="competitionDetail"]:not(.hidden)) > .auth-actions {
  visibility: hidden !important;
}

body.app-shell-v2 #modalOverlay[data-modal-kind="competitionDetail"].modal-overlay:not(.hidden) {
  display: grid !important;
  place-items: center !important;
  padding: 18px !important;
  background: rgba(12, 16, 25, 0.58) !important;
  backdrop-filter: blur(8px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(120%) !important;
}

body.app-shell-v2 #modalOverlay[data-modal-kind="competitionDetail"].modal-overlay:not(.hidden) .modal-card {
  width: min(760px, calc(100vw - 36px)) !important;
  max-height: min(90vh, calc(100vh - 36px)) !important;
  overflow: auto !important;
}

:is(body.app-shell-v2, body.app-shell-guest) #modalOverlay[data-modal-kind="competitionDetail"] .competition-detail-content {
  display: grid;
  gap: 16px;
}

:is(body.app-shell-v2, body.app-shell-guest) #modalOverlay[data-modal-kind="competitionDetail"] .competition-detail-trust-warning {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid rgba(217, 119, 6, 0.32);
  border-radius: 10px;
  background: rgba(245, 158, 11, 0.10);
  color: var(--w2g-ink);
}

:is(body.app-shell-v2, body.app-shell-guest) #modalOverlay[data-modal-kind="competitionDetail"] .competition-detail-trust-warning strong {
  font-size: 13.5px;
  line-height: 1.35;
}

:is(body.app-shell-v2, body.app-shell-guest) #modalOverlay[data-modal-kind="competitionDetail"] .competition-detail-trust-warning p,
:is(body.app-shell-v2, body.app-shell-guest) #modalOverlay[data-modal-kind="competitionDetail"] .competition-detail-trust-summary {
  margin: 0;
  color: var(--w2g-muted);
  font-size: 12px;
  line-height: 1.45;
}

:is(body.app-shell-v2, body.app-shell-guest) #modalOverlay[data-modal-kind="competitionDetail"] .competition-detail-trust-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  align-items: center;
}

:is(body.app-shell-v2, body.app-shell-guest) #modalOverlay[data-modal-kind="competitionDetail"] .competition-detail-trust-summary strong {
  color: var(--w2g-ink);
}

:is(body.app-shell-v2, body.app-shell-guest) #modalOverlay[data-modal-kind="competitionDetail"] .competition-detail-section {
  display: grid;
  gap: 8px;
}

:is(body.app-shell-v2, body.app-shell-guest) #modalOverlay[data-modal-kind="competitionDetail"] .competition-detail-section > h3 {
  margin: 0;
  color: var(--w2g-ink);
  font-size: 14px;
  line-height: 1.35;
}

:is(body.app-shell-v2, body.app-shell-guest) #modalOverlay[data-modal-kind="competitionDetail"] .competition-detail-description > p {
  max-width: 68ch;
  margin: 0;
  color: var(--w2g-body);
  font-size: 13px;
  line-height: 1.65;
  overflow-wrap: break-word;
  white-space: pre-line;
}

:is(body.app-shell-v2, body.app-shell-guest) #modalOverlay[data-modal-kind="competitionDetail"] .competition-detail-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

:is(body.app-shell-v2, body.app-shell-guest) #modalOverlay[data-modal-kind="competitionDetail"] .competition-detail-info-grid .info-card,
:is(body.app-shell-v2, body.app-shell-guest) #modalOverlay[data-modal-kind="competitionDetail"] .competition-detail-source-card {
  padding: 13px 14px;
  border-radius: 10px;
}

:is(body.app-shell-v2, body.app-shell-guest) #modalOverlay[data-modal-kind="competitionDetail"] .competition-detail-info-wide {
  grid-column: 1 / -1;
}

:is(body.app-shell-v2, body.app-shell-guest) #modalOverlay[data-modal-kind="competitionDetail"] .competition-detail-source-links {
  display: grid;
  gap: 6px;
  margin-top: 6px;
}

:is(body.app-shell-v2, body.app-shell-guest) #modalOverlay[data-modal-kind="competitionDetail"] .competition-detail-source-links a {
  overflow-wrap: anywhere;
}

:is(body.app-shell-v2, body.app-shell-guest) #modalOverlay[data-modal-kind="competitionDetail"] .competition-related-empty {
  padding: 12px 14px;
  border: 1px dashed var(--w2g-line-strong);
  border-radius: 10px;
  background: var(--w2g-surface-2);
}

:is(body.app-shell-v2, body.app-shell-guest) #modalOverlay[data-modal-kind="competitionDetail"] .competition-related-empty strong {
  display: block;
  color: var(--w2g-ink);
  font-size: 13px;
}

:is(body.app-shell-v2, body.app-shell-guest) #modalOverlay[data-modal-kind="competitionDetail"] .competition-related-empty p {
  margin: 3px 0 0;
  color: var(--w2g-muted);
  font-size: 12px;
  line-height: 1.45;
}

html[data-theme="dark"] :is(body.app-shell-v2, body.app-shell-guest) #modalOverlay[data-modal-kind="competitionDetail"] .competition-detail-trust-warning {
  border-color: rgba(251, 191, 36, 0.32);
  background: rgba(245, 158, 11, 0.12);
}

@media (max-width: 600px) {
  :is(body.app-shell-v2, body.app-shell-guest) #modalOverlay[data-modal-kind="competitionDetail"] .competition-detail-content {
    gap: 14px;
  }

  :is(body.app-shell-v2, body.app-shell-guest) #modalOverlay[data-modal-kind="competitionDetail"] .competition-detail-info-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1180px) {
  body.app-shell-v2 #competitionList.card-grid,
  body.app-shell-v2 #teamList.card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  body.app-shell-v2 #competitions.competition-page-v2,
  body.app-shell-v2 #teams.team-page-v2 {
    max-width: none !important;
  }

  body.app-shell-v2 #competitions.competition-page-v2 .filter-toolbar,
  body.app-shell-v2 #teams.team-page-v2 .filter-toolbar,
  body.app-shell-v2 #competitionList.card-grid,
  body.app-shell-v2 #teamList.card-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  body.app-shell-v2 #competitions.competition-page-v2 .filter-toolbar label:has(#competitionSort),
  body.app-shell-v2 #teams.team-page-v2 .filter-toolbar label:has(#teamSort) {
    width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
  }

  body.app-shell-v2 #competitionList .cv2-card,
  body.app-shell-v2 #teamList .team-card-v2 {
    min-height: 0 !important;
  }

  body.app-shell-v2 #competitionList .cv2-card .competition-v2-actions,
  body.app-shell-v2 #teamList .team-card-v2 .discovery-actions-stack {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
}

/* ================================================================
   FIND TEAM v2 PARITY REFINEMENT
   Team cards only: match Competition v2 card rhythm.
   ================================================================ */

body.app-shell-v2 #teams.team-page-v2 {
  width: min(100%, 1180px) !important;
  max-width: 1180px !important;
  margin-inline: 0 auto !important;
}

body.app-shell-v2 #teamList.card-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 16px !important;
}

body.app-shell-v2 #teamList .team-card-v2 {
  display: flex !important;
  min-width: 0 !important;
  min-height: 398px !important;
  height: 100% !important;
  flex-direction: column !important;
  gap: 12px !important;
  padding: 18px !important;
  border: 1px solid var(--w2g-line) !important;
  border-radius: 14px !important;
  background: var(--w2g-surface) !important;
  box-shadow: none !important;
  transform: none !important;
}

body.app-shell-v2 #teamList .team-card-v2:hover {
  border-color: var(--w2g-line-strong) !important;
  box-shadow: var(--w2g-shadow-md, 0 8px 22px rgba(15, 23, 42, 0.06)) !important;
}

body.app-shell-v2 #teamList .team-card-v2 .team-invitation-banner,
body.app-shell-v2 #teamList .team-card-v2 .team-request-pending-banner {
  flex: 0 0 auto !important;
  margin: -2px 0 0 !important;
  padding: 8px 10px !important;
  border-radius: 10px !important;
}

body.app-shell-v2 #teamList .team-card-v2 .lc-top {
  display: flex !important;
  min-height: 74px !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

body.app-shell-v2 #teamList .team-card-v2 .discovery-title-block {
  min-width: 0 !important;
}

body.app-shell-v2 #teamList .team-card-v2 .item-title {
  display: -webkit-box !important;
  min-height: 40px !important;
  margin: 6px 0 3px !important;
  overflow: hidden !important;
  color: var(--w2g-ink) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.25 !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

body.app-shell-v2 #teamList .team-card-v2 .item-meta {
  display: -webkit-box !important;
  min-height: 17px !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: var(--w2g-muted) !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 1 !important;
}

body.app-shell-v2 #teamList .team-card-v2 .pill {
  flex: 0 0 auto !important;
  min-height: 24px !important;
  padding: 4px 9px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

body.app-shell-v2 #teamList .team-card-v2 .discovery-meta-row {
  min-height: 25px !important;
  gap: 6px !important;
}

body.app-shell-v2 #teamList .team-card-v2 .discovery-summary-panel {
  min-height: 41px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body.app-shell-v2 #teamList .team-card-v2 .discovery-summary-text {
  display: -webkit-box !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: var(--w2g-body) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

body.app-shell-v2 #teamList .team-card-v2 .match-meter-v2 {
  flex: 0 0 auto !important;
  gap: 7px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.app-shell-v2 #teamList .team-card-v2 .match-meter-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

body.app-shell-v2 #teamList .team-card-v2 .match-quality-badge {
  order: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--w2g-match-ink) !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

body.app-shell-v2 #teamList .team-card-v2 .match-quality-badge::before {
  content: "" !important;
  width: 8px !important;
  height: 8px !important;
  flex: 0 0 8px !important;
  border-radius: 50% !important;
  background: currentColor !important;
}

body.app-shell-v2 #teamList .team-card-v2 .match-meter-v2 .score-meter-label {
  flex: 0 0 auto !important;
  margin-left: auto !important;
}

body.app-shell-v2 #teamList .team-card-v2 .match-meter-v2 .score-meter-label > span {
  display: none !important;
}

body.app-shell-v2 #teamList .team-card-v2 .match-meter-v2 .score-meter-label strong {
  color: var(--w2g-muted) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums !important;
}

body.app-shell-v2 #teamList .team-card-v2 .match-meter-v2 .score-meter-label strong b {
  color: var(--w2g-ink) !important;
  font-size: 14px !important;
}

body.app-shell-v2 #teamList .team-card-v2 .score-meter-track {
  height: 7px !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  background: var(--w2g-match-track) !important;
}

body.app-shell-v2 #teamList .team-card-v2 .score-meter-track span {
  display: block !important;
  height: 100% !important;
  border-radius: inherit !important;
}

body.app-shell-v2 #teamList .team-card-v2 .match-explainer-v2 {
  min-height: 29px !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body.app-shell-v2 #teamList .team-card-v2 .match-explainer-v2 summary {
  min-height: 27px !important;
  padding: 5px 0 !important;
  color: var(--w2g-muted) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

body.app-shell-v2 #teamList .team-card-v2 .match-feedback-lite {
  display: none !important;
}

body.app-shell-v2 #teamList .team-card-v2 .divider {
  flex: 0 0 auto !important;
}

body.app-shell-v2 #teamList .team-card-v2 .discovery-role-block {
  flex: 1 1 auto !important;
  min-height: 88px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body.app-shell-v2 #teamList .team-card-v2 .discovery-tag-cluster {
  display: flex !important;
  max-height: 58px !important;
  flex-wrap: wrap !important;
  align-content: flex-start !important;
  gap: 6px !important;
  overflow: hidden !important;
}

body.app-shell-v2 #teamList .team-card-v2 .tag,
body.app-shell-v2 #teamList .team-card-v2 .mini-chip {
  min-height: 24px !important;
  padding: 4px 9px !important;
  border: 1px solid var(--w2g-line) !important;
  border-radius: 7px !important;
  background: var(--w2g-surface-2) !important;
  color: var(--w2g-body) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}

body.app-shell-v2 #teamList .team-card-v2 .tag.need {
  border-color: var(--w2g-orange-line) !important;
  background: var(--w2g-orange-soft) !important;
  color: var(--w2g-orange-ink) !important;
}

body.app-shell-v2 #teamList .team-card-v2 .discovery-actions-stack {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)) !important;
  gap: 9px !important;
  align-items: stretch !important;
  margin-top: auto !important;
  padding-top: 2px !important;
}

body.app-shell-v2 #teamList .team-card-v2 .discovery-primary-actions,
body.app-shell-v2 #teamList .team-card-v2 .discovery-secondary-actions {
  display: contents !important;
}

body.app-shell-v2 #teamList .team-card-v2 .discovery-actions-stack .button {
  width: auto !important;
  min-width: 0 !important;
  min-height: 38px !important;
  justify-content: center !important;
  padding: 8px 10px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
  white-space: normal !important;
  box-shadow: none !important;
  transform: none !important;
}

@media (max-width: 1180px) {
  body.app-shell-v2 #teamList.card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  body.app-shell-v2 #teamList.card-grid {
    grid-template-columns: 1fr !important;
  }

  body.app-shell-v2 #teamList .team-card-v2 {
    min-height: 0 !important;
  }

  body.app-shell-v2 #teamList .team-card-v2 .discovery-actions-stack {
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)) !important;
  }
}

/* ================================================================
   DESIGN V2 TRUE REFERENCE PARITY — COMPETITIONS + FIND TEAM
   Source: W2G Web App UI Kit v2 PageHead, FilterBar, list-card.
   ================================================================ */

@media (min-width: 1051px) {
  body.app-shell-v2:has(#competitions.active-view) .page-shell,
  body.app-shell-v2:has(#teams.active-view) .page-shell {
    padding: 74px 28px 64px !important;
  }

  body.app-shell-v2:has(#competitions.active-view) .page-shell::before,
  body.app-shell-v2:has(#teams.active-view) .page-shell::before {
    content: none !important;
  }
}

body.app-shell-v2 #competitions.competition-page-v2,
body.app-shell-v2 #teams.team-page-v2 {
  width: 100% !important;
  max-width: 1180px !important;
  margin: 0 !important;
}

body.app-shell-v2 #competitions .reference-page-head,
body.app-shell-v2 #teams .reference-page-head {
  margin: 0 0 22px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.app-shell-v2 #competitions .reference-page-head .head-row,
body.app-shell-v2 #teams .reference-page-head .head-row {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
  width: 100% !important;
}

body.app-shell-v2 #competitions .reference-page-head .eyebrow,
body.app-shell-v2 #teams .reference-page-head .eyebrow {
  display: inline-block !important;
  margin: 0 0 7px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--w2g-muted) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
}

body.app-shell-v2 #competitions .reference-page-head h1,
body.app-shell-v2 #teams .reference-page-head h1 {
  margin: 0 0 6px !important;
  color: var(--w2g-ink) !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  letter-spacing: -.025em !important;
  line-height: 1.1 !important;
}

body.app-shell-v2 #competitions .reference-page-head .muted,
body.app-shell-v2 #teams .reference-page-head .muted {
  max-width: 600px !important;
  margin: 0 !important;
  color: var(--w2g-muted) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

body.app-shell-v2 #competitions .reference-filter-card,
body.app-shell-v2 #teams .reference-filter-card {
  display: block !important;
  margin: 0 0 18px !important;
  padding: 12px !important;
  overflow: visible !important;
  border: 1px solid var(--w2g-line) !important;
  border-radius: 14px !important;
  background: var(--w2g-surface) !important;
  box-shadow: none !important;
}

body.app-shell-v2 #competitions .reference-filter-row,
body.app-shell-v2 #teams .reference-filter-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body.app-shell-v2 #competitions .reference-filter-search,
body.app-shell-v2 #teams .reference-filter-search {
  display: flex !important;
  position: relative !important;
  flex: 1 1 260px !important;
  min-width: 200px !important;
  align-items: center !important;
  gap: 9px !important;
  min-height: 36px !important;
  padding: 8px 12px !important;
  border: 1px solid var(--w2g-line) !important;
  border-radius: 10px !important;
  background: var(--w2g-bg) !important;
}

body.app-shell-v2 #competitions .reference-filter-search > span:not(.reference-search-icon),
body.app-shell-v2 #teams .reference-filter-search > span:not(.reference-search-icon) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

body.app-shell-v2 #competitions .reference-search-icon,
body.app-shell-v2 #teams .reference-search-icon {
  position: static !important;
  display: inline-flex !important;
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--w2g-muted) !important;
  line-height: 0 !important;
  transform: none !important;
}

body.app-shell-v2 #competitions .reference-filter-search input,
body.app-shell-v2 #teams .reference-filter-search input {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: var(--w2g-ink) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  box-shadow: none !important;
}

body.app-shell-v2 #competitions .competition-quick-filters,
body.app-shell-v2 #teams .team-quick-filters {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
}

body.app-shell-v2 #competitions .competition-quick-filter.chip,
body.app-shell-v2 #teams .team-quick-filter.chip {
  min-height: 30px !important;
  padding: 7px 11px !important;
  cursor: pointer !important;
}

body.app-shell-v2 #competitions .competition-quick-filter.active,
body.app-shell-v2 #teams .team-quick-filter.active {
  border-color: var(--w2g-orange-line) !important;
  background: var(--w2g-orange-soft) !important;
  color: var(--w2g-orange-ink) !important;
}

body.app-shell-v2 #competitions .filter-toggle,
body.app-shell-v2 #teams .filter-toggle {
  min-height: 36px !important;
  padding: 8px 12px !important;
  border-radius: 10px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

body.app-shell-v2 #competitions .reference-filter-sort,
body.app-shell-v2 #teams .reference-filter-sort {
  display: flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  gap: 7px !important;
  margin-left: auto !important;
  color: var(--w2g-muted) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

body.app-shell-v2 #competitions .reference-filter-sort select,
body.app-shell-v2 #teams .reference-filter-sort select {
  width: auto !important;
  min-width: 150px !important;
  min-height: 36px !important;
  padding: 8px 10px !important;
  border: 1px solid var(--w2g-line-strong) !important;
  border-radius: 10px !important;
  background: var(--w2g-surface) !important;
  color: var(--w2g-ink) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

body.app-shell-v2 #competitionList.card-grid,
body.app-shell-v2 #teamList.card-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)) !important;
  align-items: stretch !important;
  gap: 16px !important;
}

body.app-shell-v2 #competitionList .reference-card,
body.app-shell-v2 #teamList .reference-card {
  display: flex !important;
  min-width: 0 !important;
  min-height: 398px !important;
  height: 100% !important;
  flex-direction: column !important;
  gap: 13px !important;
  padding: 18px !important;
  border: 1px solid var(--w2g-line) !important;
  border-radius: 14px !important;
  background: var(--w2g-surface) !important;
  box-shadow: none !important;
  transform: none !important;
  transition: border-color .14s ease, box-shadow .14s ease !important;
}

body.app-shell-v2 #competitionList .reference-card:hover,
body.app-shell-v2 #teamList .reference-card:hover {
  border-color: var(--w2g-line-strong) !important;
  box-shadow: var(--w2g-shadow-md, 0 8px 22px rgba(15, 23, 42, .06)) !important;
}

body.app-shell-v2 .reference-card .lc-top {
  display: flex !important;
  min-height: 74px !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

body.app-shell-v2 .reference-card-title-row {
  display: flex !important;
  min-width: 0 !important;
  align-items: flex-start !important;
  gap: 12px !important;
}

body.app-shell-v2 .reference-card-copy {
  min-width: 0 !important;
}

body.app-shell-v2 .reference-card .thumb {
  width: 46px !important;
  height: 46px !important;
  flex: 0 0 46px !important;
  border: 1px solid var(--w2g-line) !important;
  border-radius: 11px !important;
  background-position: center !important;
  background-size: cover !important;
}

body.app-shell-v2 .reference-card .thumb.ph {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--w2g-surface-2) !important;
  color: var(--w2g-orange-ink) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
}

body.app-shell-v2 .reference-card .chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  min-height: 24px !important;
  padding: 4px 9px !important;
  border: 1px solid var(--w2g-line) !important;
  border-radius: 7px !important;
  background: var(--w2g-surface-2) !important;
  color: var(--w2g-body) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}

body.app-shell-v2 .reference-card .chip.need {
  border-color: var(--w2g-orange-line) !important;
  background: var(--w2g-orange-soft) !important;
  color: var(--w2g-orange-ink) !important;
}

body.app-shell-v2 .reference-card .chip.rec {
  border-style: dashed !important;
  background: var(--w2g-surface-2) !important;
  color: var(--w2g-body) !important;
}

body.app-shell-v2 .reference-card .lc-title {
  display: -webkit-box !important;
  min-height: 40px !important;
  margin: 4px 0 3px !important;
  overflow: hidden !important;
  color: var(--w2g-ink) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
  line-height: 1.25 !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

body.app-shell-v2 .reference-card .lc-meta {
  display: flex !important;
  min-height: 17px !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 5px !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: var(--w2g-muted) !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
}

body.app-shell-v2 .reference-card .lc-meta .sep {
  color: var(--w2g-faint, #AEB5C0) !important;
}

body.app-shell-v2 .reference-card-summary {
  display: -webkit-box !important;
  min-height: 39px !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: var(--w2g-body) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

body.app-shell-v2 .reference-card .pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 24px !important;
  padding: 3px 9px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}

body.app-shell-v2 .reference-card .pill .dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
}

body.app-shell-v2 .reference-card .match {
  display: flex !important;
  flex: 0 0 auto !important;
  flex-direction: column !important;
  gap: 7px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body.app-shell-v2 .reference-card .match-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

body.app-shell-v2 .reference-card .match-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
}

body.app-shell-v2 .reference-card .tier-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
}

body.app-shell-v2 .reference-card .match-score {
  color: var(--w2g-muted) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums !important;
}

body.app-shell-v2 .reference-card .match-score b {
  color: var(--w2g-ink) !important;
  font-size: 14px !important;
}

body.app-shell-v2 .reference-card .match-bar {
  height: 7px !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  background: var(--w2g-match-track) !important;
}

body.app-shell-v2 .reference-card .match-bar i {
  display: block !important;
  height: 100% !important;
  border-radius: 999px !important;
}

body.app-shell-v2 .reference-card .tier-strong { color: var(--w2g-match-ink) !important; }
body.app-shell-v2 .reference-card .tier-good  { color: var(--w2g-match-ink) !important; }
body.app-shell-v2 .reference-card .tier-fair  { color: var(--w2g-match-fair-ink) !important; }
body.app-shell-v2 .reference-card .tier-low   { color: var(--w2g-match-low) !important; }
body.app-shell-v2 .reference-card .tier-strong .tier-dot,
body.app-shell-v2 .reference-card .fill-strong { background: var(--w2g-match-strong) !important; }
body.app-shell-v2 .reference-card .tier-good .tier-dot,
body.app-shell-v2 .reference-card .fill-good { background: var(--w2g-match-good) !important; }
body.app-shell-v2 .reference-card .tier-fair .tier-dot,
body.app-shell-v2 .reference-card .fill-fair { background: var(--w2g-match-fair) !important; }
body.app-shell-v2 .reference-card .tier-low .tier-dot,
body.app-shell-v2 .reference-card .fill-low { background: var(--w2g-match-low) !important; }

body.app-shell-v2 .reference-card .reference-why {
  min-height: 29px !important;
}

body.app-shell-v2 .reference-card .reference-why summary {
  width: max-content !important;
  min-height: 27px !important;
  padding: 5px 9px !important;
  border-radius: 8px !important;
  color: var(--w2g-body) !important;
  font-size: 11.5px !important;
  list-style: none !important;
}

body.app-shell-v2 .reference-card .reference-why summary::-webkit-details-marker {
  display: none !important;
}

body.app-shell-v2 .reference-card .why {
  margin-top: 6px !important;
  padding: 12px !important;
  border: 1px solid color-mix(in srgb, var(--w2g-match-strong) 22%, transparent) !important;
  border-radius: 11px !important;
  background: var(--w2g-match-soft) !important;
}

body.app-shell-v2 .reference-card .why-head {
  margin-bottom: 8px !important;
  color: var(--w2g-match-ink) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

body.app-shell-v2 .reference-card .why p,
body.app-shell-v2 .reference-card .why-roles {
  font-size: 12px !important;
  line-height: 1.45 !important;
}

body.app-shell-v2 .reference-card .divider {
  height: 1px !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  border: 0 !important;
  background: var(--w2g-line) !important;
}

body.app-shell-v2 .reference-role-block {
  flex: 1 1 auto !important;
  min-height: 112px !important;
}

body.app-shell-v2 .reference-section-label {
  margin: 0 0 6px !important;
  color: var(--w2g-muted) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
}

body.app-shell-v2 .reference-section-label-spaced {
  margin-top: 10px !important;
}

body.app-shell-v2 .reference-card .chip-row {
  display: flex !important;
  max-height: 58px !important;
  flex-wrap: wrap !important;
  align-content: flex-start !important;
  gap: 6px !important;
  overflow: hidden !important;
}

body.app-shell-v2 .reference-card .lc-actions {
  display: flex !important;
  gap: 9px !important;
  margin-top: auto !important;
}

body.app-shell-v2 .reference-card .lc-actions .button,
body.app-shell-v2 .reference-card .lc-actions .btn {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  min-height: 38px !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 9px 12px !important;
  border-radius: 10px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
  box-shadow: none !important;
  transform: none !important;
}

body.app-shell-v2 #teamList > .score-explainer,
body.app-shell-v2 .reference-card .match-feedback-lite {
  display: none !important;
}

body.app-shell-v2 #modalOverlay .topbar,
body.app-shell-v2 #modalOverlay .auth-actions,
body.app-shell-v2 #modalOverlay .main-nav {
  display: none !important;
}

body[data-page="app"] #modalOverlay.modal-overlay:not(.hidden) {
  z-index: 6000 !important;
  display: grid !important;
  place-items: center !important;
  background: rgba(12, 16, 25, .58) !important;
  backdrop-filter: blur(8px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(120%) !important;
}

body[data-page="app"] #modalOverlay.modal-overlay:not(.hidden):not(.team-workspace-fullscreen-modal) .modal-card {
  width: min(760px, calc(100vw - 36px)) !important;
  max-height: min(90vh, calc(100vh - 36px)) !important;
  overflow: auto !important;
}

body[data-page="app"] #modalOverlay.team-post-modal.modal-overlay:not(.hidden) .modal-card {
  width: min(820px, calc(100vw - 36px)) !important;
}

@media (max-width: 640px) {
  body[data-page="app"] #modalOverlay.team-post-modal.modal-overlay:not(.hidden) .modal-card {
    width: min(100%, calc(100vw - 24px)) !important;
  }
}

/* Wide single-competition Admin editor workspace. Same width-override pattern
   as .team-post-modal above (equal selector specificity, later in source),
   plus a flex-column card so the header/footer stay put and only #modalBody
   scrolls. Scoped to min-width:761px so it never fights the existing
   mobile-only full-bleed flex-column rule that already handles ≤760px for
   every modal (one column, edge-to-edge sheet, sticky footer). */
@media (min-width: 761px) {
  body[data-page="app"] #modalOverlay.competition-editor-modal.modal-overlay:not(.hidden) .modal-card {
    width: min(94vw, 1400px) !important;
    max-height: min(90vh, 960px) !important;
    height: min(90vh, 960px) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding: 22px 26px !important;
  }

  body[data-page="app"] #modalOverlay.competition-editor-modal .modal-header {
    flex: 0 0 auto !important;
  }

  body[data-page="app"] #modalOverlay.competition-editor-modal .modal-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    padding: 16px 2px !important;
  }

  body[data-page="app"] #modalOverlay.competition-editor-modal .modal-footer {
    flex: 0 0 auto !important;
  }
}

@media (min-width: 761px) and (max-width: 900px) {
  body[data-page="app"] #modalOverlay.competition-editor-modal.modal-overlay:not(.hidden) .modal-card {
    width: min(97vw, 1400px) !important;
    padding: 16px !important;
  }
}

/* Admin Bulk Paste workspace — same widening technique as the wide competition
   editor above: fixed header/footer, scrolling body, desktop-first. Kept as a
   separate modifier class so the two workspaces can diverge without either
   inheriting the other's layout by accident. */
@media (min-width: 761px) {
  body[data-page="app"] #modalOverlay.bulk-paste-modal.modal-overlay:not(.hidden) .modal-card {
    width: min(94vw, 1400px) !important;
    max-height: min(90vh, 960px) !important;
    height: min(90vh, 960px) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding: 22px 26px !important;
  }

  body[data-page="app"] #modalOverlay.bulk-paste-modal .modal-header {
    flex: 0 0 auto !important;
  }

  body[data-page="app"] #modalOverlay.bulk-paste-modal .modal-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    padding: 16px 2px !important;
  }

  body[data-page="app"] #modalOverlay.bulk-paste-modal .modal-footer {
    flex: 0 0 auto !important;
  }
}

@media (min-width: 761px) and (max-width: 900px) {
  body[data-page="app"] #modalOverlay.bulk-paste-modal.modal-overlay:not(.hidden) .modal-card {
    width: min(97vw, 1400px) !important;
    padding: 16px !important;
  }
}

@media (max-width: 760px) {
  body.app-shell-v2 #competitions .reference-page-head .head-row,
  body.app-shell-v2 #teams .reference-page-head .head-row,
  body.app-shell-v2 .reference-card .lc-actions {
    flex-direction: column !important;
  }

  body.app-shell-v2 #competitionList.card-grid,
  body.app-shell-v2 #teamList.card-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   W2G v2 reference parity lock — competitions + find team
   Scope: logged-in app shell only. Behavior/API/matching unchanged.
   ============================================================ */
body.app-shell-v2 {
  --w2g-bg:#f5f6f8; --w2g-surface:#fff; --w2g-ink:#0f172a; --w2g-muted:#64748b;
  --w2g-line:#dfe4ea; --w2g-chip:#f1f4f8; --w2g-chip-border:#dbe3ec;
  --w2g-orange:#fa580c; --w2g-orange-soft:#fff1e8; --w2g-orange-line:#fed7c2;
  --w2g-green:#16a34a; --w2g-green-deep:#3f9626; --w2g-amber:#d18b05;
  --w2g-page-w:1180px; --w2g-sidebar-w:220px; background:var(--w2g-bg)!important;
}
body.app-shell-v2 .app-main, body.app-shell-v2 main { background:var(--w2g-bg)!important; }
body.app-shell-v2 .app-shell-context-bar, body.app-shell-v2 .topbar {
  background:var(--w2g-surface)!important; border-bottom:1px solid var(--w2g-line)!important;
  box-shadow:none!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important;
}
body.app-shell-v2 #competitions.competition-page-v2,
body.app-shell-v2 #teams.team-page-v2 {
  width:100%!important;
  max-width:var(--w2g-page-w)!important; margin:0!important; padding:0 0 64px!important;
  background:transparent!important; overflow:visible!important;
}
body.app-shell-v2 #competitions .reference-page-head,
body.app-shell-v2 #teams .reference-page-head { margin:0 0 24px!important; padding:0!important; background:transparent!important; border:0!important; box-shadow:none!important; }
body.app-shell-v2 #competitions .head-row, body.app-shell-v2 #teams .head-row { display:flex!important; justify-content:space-between!important; align-items:flex-start!important; gap:24px!important; }
body.app-shell-v2 #competitions .head-copy, body.app-shell-v2 #teams .head-copy { width:min(620px,100%)!important; }
body.app-shell-v2 #competitions .page-eyebrow, body.app-shell-v2 #teams .page-eyebrow,
body.app-shell-v2 #competitions .eyebrow, body.app-shell-v2 #teams .eyebrow {
  display:block!important; width:auto!important; margin:0 0 8px!important; padding:0!important; background:transparent!important; border:0!important;
  color:var(--w2g-muted)!important; font-size:11px!important; line-height:1!important; font-weight:700!important; letter-spacing:.1em!important; text-transform:uppercase!important;
}
body.app-shell-v2 #competitions h1, body.app-shell-v2 #teams h1, body.app-shell-v2 #competitions .page-title, body.app-shell-v2 #teams .page-title {
  margin:0 0 8px!important; color:var(--w2g-ink)!important; font-size:26px!important; line-height:1.08!important; font-weight:800!important; letter-spacing:-.025em!important;
}
body.app-shell-v2 #competitions .lede, body.app-shell-v2 #teams .lede, body.app-shell-v2 #competitions .page-lede, body.app-shell-v2 #teams .page-lede {
  margin:0!important; width:min(620px,100%)!important; color:var(--w2g-muted)!important; font-size:14px!important; line-height:1.45!important; font-weight:500!important;
}
body.app-shell-v2 #teams .head-actions .button.primary, body.app-shell-v2 #teams #createTeamButton, body.app-shell-v2 #teams button[onclick*="openTeamForm"] {
  height:40px!important; min-height:40px!important; border-radius:10px!important; padding:0 18px!important; background:var(--w2g-orange)!important; border:1px solid var(--w2g-orange)!important; box-shadow:none!important; color:#fff!important; font-size:13px!important; font-weight:800!important;
}

body.app-shell-v2 #competitions .reference-filter-shell, body.app-shell-v2 #teams .reference-filter-shell,
body.app-shell-v2 #competitions .competition-filter-shell, body.app-shell-v2 #teams .team-filter-shell,
body.app-shell-v2 #competitions .filter-shell, body.app-shell-v2 #teams .filter-shell {
  display:block!important; width:100%!important; max-width:100%!important;
  margin:0 0 18px!important; padding:12px!important; background:var(--w2g-surface)!important; border:1px solid var(--w2g-line)!important; border-radius:14px!important; box-shadow:0 1px 2px rgba(15,23,42,.05)!important;
}
body.app-shell-v2 #competitions .reference-search, body.app-shell-v2 #teams .reference-search, body.app-shell-v2 #competitions .search-box, body.app-shell-v2 #teams .search-box {
  position:relative!important; flex:1 1 420px!important; min-width:280px!important; max-width:560px!important; margin:0!important;
}
body.app-shell-v2 #competitions .reference-search .iconify, body.app-shell-v2 #teams .reference-search .iconify,
body.app-shell-v2 #competitions .reference-search .search-icon, body.app-shell-v2 #teams .reference-search .search-icon,
body.app-shell-v2 #competitions .search-box .iconify, body.app-shell-v2 #teams .search-box .iconify,
body.app-shell-v2 #competitions .search-box .search-icon, body.app-shell-v2 #teams .search-box .search-icon {
  position:absolute!important; left:15px!important; top:50%!important; width:18px!important; height:18px!important; transform:translateY(-50%)!important; color:#64748b!important; opacity:1!important; pointer-events:none!important; z-index:2!important;
}
body.app-shell-v2 #competitionSearch, body.app-shell-v2 #teamSearch {
  width:100%!important; min-width:0!important; margin:0!important; padding:0!important;
  border:0!important; border-radius:0!important; outline:0!important; background:transparent!important;
  color:var(--w2g-ink)!important; box-shadow:none!important; font-size:13.5px!important; font-weight:500!important; line-height:1.35!important;
}
body.app-shell-v2 #competitions .reference-search input, body.app-shell-v2 #teams .reference-search input {
  width:100%!important; border:0!important; outline:0!important; background:transparent!important;
  color:var(--w2g-ink)!important; font-size:13.5px!important; font-weight:500!important;
}
body.app-shell-v2 #competitionSearch::placeholder, body.app-shell-v2 #teamSearch::placeholder { color:#94a3b8!important; }
body.app-shell-v2 #competitions .reference-quick-filters, body.app-shell-v2 #teams .reference-quick-filters,
body.app-shell-v2 #competitions .quick-filter-row, body.app-shell-v2 #teams .quick-filter-row { display:flex!important; flex-wrap:wrap!important; gap:8px!important; align-items:center!important; margin:0!important; padding:0!important; }
body.app-shell-v2 #competitions .reference-quick-filters .chip, body.app-shell-v2 #teams .reference-quick-filters .chip,
body.app-shell-v2 #competitions .quick-filter, body.app-shell-v2 #teams .quick-filter {
  display:inline-flex!important; align-items:center!important; justify-content:center!important; height:32px!important; padding:0 13px!important; border-radius:9px!important; border:1px solid var(--w2g-chip-border)!important; background:var(--w2g-chip)!important; color:#334155!important; box-shadow:none!important; font-size:12px!important; font-weight:600!important; white-space:nowrap!important;
}
body.app-shell-v2 #competitions .reference-filter-toggle, body.app-shell-v2 #teams .reference-filter-toggle,
body.app-shell-v2 #competitions .filter-button, body.app-shell-v2 #teams .filter-button {
  display:inline-flex!important; align-items:center!important; justify-content:center!important; gap:8px!important; min-height:36px!important; padding:8px 12px!important; border-radius:10px!important; border:1px solid var(--w2g-line)!important; background:#fff!important; color:#0f172a!important; box-shadow:none!important; font-size:12.5px!important; font-weight:600!important; white-space:nowrap!important;
}
body.app-shell-v2 #competitions .filter-count, body.app-shell-v2 #teams .filter-count, body.app-shell-v2 #competitions .count-badge, body.app-shell-v2 #teams .count-badge {
  display:inline-flex!important; align-items:center!important; justify-content:center!important; width:18px!important; height:18px!important; min-width:18px!important; border-radius:999px!important; background:var(--w2g-orange-soft)!important; color:var(--w2g-orange)!important; font-size:10px!important; font-weight:700!important;
}
body.app-shell-v2 #competitions .sort-label, body.app-shell-v2 #teams .sort-label { color:#64748b!important; font-size:12px!important; font-weight:600!important; }
body.app-shell-v2 #competitionSort, body.app-shell-v2 #teamSort, body.app-shell-v2 #competitions .sort-select, body.app-shell-v2 #teams .sort-select {
  min-height:36px!important; min-width:130px!important; border:1px solid var(--w2g-line)!important; border-radius:10px!important; background:#fff!important; color:#0f172a!important; padding:8px 30px 8px 10px!important; box-shadow:none!important; font-size:13px!important; font-weight:500!important;
}
body.app-shell-v2 #competitions .active-filter-row, body.app-shell-v2 #teams .active-filter-row,
body.app-shell-v2 #competitions .active-filters, body.app-shell-v2 #teams .active-filters { display:flex!important; flex:1 0 100%!important; flex-wrap:wrap!important; gap:8px!important; align-items:center!important; margin:0!important; padding:0!important; background:transparent!important; border:0!important; box-shadow:none!important; }
body.app-shell-v2 #competitions .active-filter-label, body.app-shell-v2 #teams .active-filter-label { color:#64748b!important; font-size:11px!important; font-weight:700!important; letter-spacing:.08em!important; text-transform:uppercase!important; }
body.app-shell-v2 #competitions .active-filter-chip, body.app-shell-v2 #teams .active-filter-chip,
body.app-shell-v2 #competitions .filter-chip, body.app-shell-v2 #teams .filter-chip { display:inline-flex!important; align-items:center!important; height:28px!important; padding:0 10px!important; border-radius:999px!important; background:#fff7ed!important; border:1px solid var(--w2g-orange-line)!important; color:#c2410c!important; font-size:12px!important; font-weight:800!important; }
body.app-shell-v2 #competitions .active-filter-clear, body.app-shell-v2 #teams .active-filter-clear,
body.app-shell-v2 #competitions .clear-filters, body.app-shell-v2 #teams .clear-filters { height:28px!important; padding:0 10px!important; border-radius:999px!important; border:1px solid var(--w2g-line)!important; background:#fff!important; color:#334155!important; font-size:12px!important; font-weight:800!important; }
body.app-shell-v2 #teams .score-explainer, body.app-shell-v2 #teams .match-explainer, body.app-shell-v2 #teams .reference-score-explainer { display:none!important; }

body.app-shell-v2 #competitionList, body.app-shell-v2 #teamList {
  display:grid!important; grid-template-columns:repeat(auto-fill,minmax(330px,1fr))!important; gap:16px!important; align-items:stretch!important; width:100%!important; max-width:100%!important; margin:0!important; padding:0!important;
}
body.app-shell-v2 #competitionList > .reference-card, body.app-shell-v2 #teamList > .reference-card,
body.app-shell-v2 #competitionList > .cv2-card, body.app-shell-v2 #teamList > .team-card-v2 {
  width:100%!important; min-width:0!important; min-height:0!important; height:100%!important; margin:0!important; padding:18px!important; display:flex!important; flex-direction:column!important; background:#fff!important; border:1px solid var(--w2g-line)!important; border-radius:14px!important; box-shadow:0 1px 2px rgba(15,23,42,.05)!important; overflow:hidden!important;
}
body.app-shell-v2 #competitionList .lc-top, body.app-shell-v2 #teamList .lc-top { display:flex!important; align-items:flex-start!important; justify-content:space-between!important; gap:14px!important; min-height:78px!important; margin:0 0 14px!important; }
body.app-shell-v2 #competitionList .reference-card-title-row { display:grid!important; grid-template-columns:48px minmax(0,1fr)!important; gap:14px!important; align-items:flex-start!important; min-width:0!important; }
body.app-shell-v2 .reference-card .thumb, body.app-shell-v2 .reference-card .competition-thumb { width:48px!important; height:48px!important; min-width:48px!important; border-radius:10px!important; object-fit:cover!important; background-color:var(--w2g-orange-soft)!important; background-size:cover!important; background-position:center!important; background-repeat:no-repeat!important; border:1px solid var(--w2g-orange-line)!important; color:#c2410c!important; font-size:16px!important; font-weight:700!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; }
body.app-shell-v2 .reference-card .chip, body.app-shell-v2 .reference-card .pill, body.app-shell-v2 .reference-card .badge { display:inline-flex!important; align-items:center!important; justify-content:center!important; min-height:22px!important; padding:3px 9px!important; border-radius:7px!important; background:var(--w2g-chip)!important; border:1px solid var(--w2g-chip-border)!important; color:#475569!important; font-size:11px!important; line-height:1.2!important; font-weight:600!important; white-space:nowrap!important; }
body.app-shell-v2 .reference-card .chip.need, body.app-shell-v2 .reference-card .role-chip.need, body.app-shell-v2 .reference-card .need { background:var(--w2g-orange-soft)!important; border-color:var(--w2g-orange-line)!important; color:#c2410c!important; }
body.app-shell-v2 .reference-card .chip.rec, body.app-shell-v2 .reference-card .rec { background:#f1f5f9!important; border-color:#e2e8f0!important; color:#475569!important; }
body.app-shell-v2 .reference-card .lc-title { display:-webkit-box!important; -webkit-line-clamp:2!important; -webkit-box-orient:vertical!important; overflow:hidden!important; min-height:40px!important; margin:4px 0 3px!important; color:#0f172a!important; font-size:16px!important; line-height:1.25!important; font-weight:700!important; letter-spacing:-.01em!important; }
body.app-shell-v2 .reference-card .lc-meta { color:#64748b!important; font-size:12px!important; line-height:1.45!important; font-weight:500!important; margin:0!important; max-height:54px!important; overflow:hidden!important; }
body.app-shell-v2 #teamList .reference-card-summary { display:-webkit-box!important; -webkit-line-clamp:3!important; -webkit-box-orient:vertical!important; overflow:hidden!important; min-height:56px!important; margin:0 0 16px!important; color:#334155!important; font-size:13px!important; line-height:1.45!important; }
body.app-shell-v2 #competitionList .reference-card-summary, body.app-shell-v2 #competitionList .reason-preview, body.app-shell-v2 #competitionList .match-reason-preview { display:none!important; }
body.app-shell-v2 .reference-card .pill.neutral, body.app-shell-v2 .reference-card .deadline-chip, body.app-shell-v2 .reference-card .status-chip { flex:0 0 auto!important; height:26px!important; background:#eff6ff!important; color:#2563eb!important; border:0!important; border-radius:999px!important; padding:0 10px!important; font-size:11px!important; font-weight:700!important; line-height:1!important; }
body.app-shell-v2 .reference-card .match-block, body.app-shell-v2 .reference-card .reference-match, body.app-shell-v2 .reference-card .match-meter-v2 { margin:0 0 16px!important; padding:0!important; background:transparent!important; border:0!important; box-shadow:none!important; }
body.app-shell-v2 .reference-card .match-head { display:flex!important; flex-direction:row!important; align-items:center!important; justify-content:space-between!important; gap:10px!important; margin:0 0 8px!important; min-height:18px!important; }
body.app-shell-v2 .reference-card .match-label { order:0!important; display:inline-flex!important; align-items:center!important; gap:7px!important; margin:0!important; font-size:12px!important; line-height:1!important; font-weight:700!important; }
body.app-shell-v2 .reference-card .tier-strong .match-label,
body.app-shell-v2 .reference-card .tier-good  .match-label { color: var(--w2g-match-ink) !important; }
body.app-shell-v2 .reference-card .tier-fair  .match-label { color: var(--w2g-match-fair-ink) !important; }
body.app-shell-v2 .reference-card .tier-low   .match-label { color: var(--w2g-match-low) !important; }
body.app-shell-v2 .reference-card .dot { width:7px!important; height:7px!important; min-width:7px!important; border-radius:999px!important; background:currentColor!important; display:inline-block!important; }
body.app-shell-v2 .reference-card .match-score { order:1!important; margin:0 0 0 auto!important; color:#64748b!important; font-size:12px!important; line-height:1!important; font-weight:700!important; font-variant-numeric:tabular-nums!important; }
body.app-shell-v2 .reference-card .match-score b { color:#0f172a!important; font-size:14px!important; font-weight:700!important; }
body.app-shell-v2 .reference-card .match-score small, body.app-shell-v2 .reference-card .score-denom { color:#64748b!important; font-size:11px!important; font-weight:700!important; }
body.app-shell-v2 .reference-card .bar, body.app-shell-v2 .reference-card .match-bar, body.app-shell-v2 .reference-card .match-progress, body.app-shell-v2 .reference-card .match-meter-track { width:100%!important; height:7px!important; overflow:hidden!important; border-radius:999px!important; background:#e5eaf0!important; border:0!important; }
body.app-shell-v2 .reference-card .bar > span, body.app-shell-v2 .reference-card .match-bar > span, body.app-shell-v2 .reference-card .match-progress > span, body.app-shell-v2 .reference-card .match-meter-fill { display:block!important; height:100%!important; border-radius:999px!important; background:var(--w2g-green-deep)!important; box-shadow:none!important; }
body.app-shell-v2 .reference-card .match-label.fair ~ .bar > span, body.app-shell-v2 .reference-card .match-meter-fill.fair, body.app-shell-v2 .reference-card .match-meter-fill.low { background:var(--w2g-amber)!important; }
body.app-shell-v2 .reference-card .why-link, body.app-shell-v2 .reference-card .why-toggle, body.app-shell-v2 .reference-card summary { display:inline-flex!important; align-items:center!important; gap:6px!important; margin:12px 0 0!important; padding:0!important; background:transparent!important; border:0!important; box-shadow:none!important; color:#475569!important; font-size:12px!important; font-weight:800!important; cursor:pointer!important; }
body.app-shell-v2 .reference-card .divider, body.app-shell-v2 .reference-card hr { width:100%!important; height:1px!important; margin:0 0 14px!important; border:0!important; background:var(--w2g-line)!important; }
body.app-shell-v2 .reference-card .reference-role-block { min-height:92px!important; margin:0!important; padding:0!important; }
body.app-shell-v2 .reference-card .reference-section-label, body.app-shell-v2 .reference-card .section-label { display:block!important; margin:0 0 8px!important; color:#64748b!important; font-size:11px!important; line-height:1!important; font-weight:700!important; letter-spacing:.08em!important; text-transform:uppercase!important; }
body.app-shell-v2 .reference-card .reference-section-label-spaced { margin-top:12px!important; }
body.app-shell-v2 .reference-card .chip-row, body.app-shell-v2 .reference-card .role-chip-row { display:flex!important; flex-wrap:wrap!important; gap:6px!important; align-items:center!important; }
body.app-shell-v2 .reference-card .lc-actions, body.app-shell-v2 .reference-card .actions { display:flex!important; gap:9px!important; margin-top:auto!important; padding-top:18px!important; }
body.app-shell-v2 .reference-card .lc-actions .button, body.app-shell-v2 .reference-card .actions .button { flex:1 1 0!important; min-width:0!important; height:40px!important; min-height:40px!important; margin:0!important; padding:0 14px!important; border-radius:10px!important; box-shadow:none!important; font-size:13.5px!important; font-weight:600!important; white-space:normal!important; line-height:1.15!important; }
body.app-shell-v2 .reference-card .lc-actions .button.primary, body.app-shell-v2 .reference-card .actions .button.primary { background:var(--w2g-orange)!important; border:1px solid var(--w2g-orange)!important; color:#fff!important; }
body.app-shell-v2 .reference-card .lc-actions .button.outline, body.app-shell-v2 .reference-card .lc-actions .button.secondary, body.app-shell-v2 .reference-card .actions .button.outline, body.app-shell-v2 .reference-card .actions .button.secondary { background:#fff!important; border:1px solid var(--w2g-line)!important; color:#1f2937!important; }
body.app-shell-v2 .reference-card [data-save-team-button] { display:none!important; }

/* ============================================================
   Poster-first competition card (Level 0 UI refinement).
   Anchored on #competitionList so it wins over both the
   app-shell-v2 and app-shell-guest reference-card rule chains
   above without needing to duplicate per shell.
   ============================================================ */
#competitionList .reference-competition-card { overflow: hidden; }
#competitionList .reference-competition-card .lc-top { min-height: 0; }
#competitionList .reference-card-poster {
  position: relative;
  isolation: isolate;
  width: calc(100% + 38px);
  margin: -19px -19px 14px;
}
#competitionList .reference-card-poster .competition-poster {
  aspect-ratio: 16 / 9;
  margin-bottom: 0;
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
}
#competitionList .reference-card-poster-badge {
  position: absolute;
  top: 12px;
  z-index: 4;
  max-width: calc(50% - 20px);
}
#competitionList .reference-card-poster-badge-start {
  left: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: rgba(15, 23, 42, .72) !important;
  border-color: rgba(255, 255, 255, .22) !important;
  color: #f8fafc !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
#competitionList .reference-card-poster-badge-end { right: 12px; }
#competitionList .reference-card-poster-badge-end .pill {
  background: rgba(15, 23, 42, .72) !important;
  border: 1px solid rgba(255, 255, 255, .22) !important;
  color: #f8fafc !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
@media (prefers-reduced-motion: no-preference) {
  #competitionList .reference-competition-card:hover .reference-card-poster .competition-poster img,
  #competitionList .reference-competition-card:focus-within .reference-card-poster .competition-poster img {
    transform: scale(1.03);
  }
}
#competitionList .reference-card-poster .competition-poster img {
  transition: transform .18s ease;
}

body.app-shell-v2 #modalOverlay[data-modal-kind="competitionDetail"] { display:flex!important; align-items:flex-start!important; justify-content:center!important; padding:48px 24px!important; background:rgba(15,23,42,.58)!important; backdrop-filter:blur(6px)!important; }
body.app-shell-v2 #modalOverlay[data-modal-kind="competitionDetail"] .topbar, body.app-shell-v2 #modalOverlay[data-modal-kind="competitionDetail"] .app-shell-context-bar, body.app-shell-v2 #modalOverlay[data-modal-kind="competitionDetail"] .shell-controls, body.app-shell-v2 #modalOverlay[data-modal-kind="competitionDetail"] .theme-toggle, body.app-shell-v2 #modalOverlay[data-modal-kind="competitionDetail"] .language-toggle { display:none!important; }
body.app-shell-v2 #modalOverlay[data-modal-kind="competitionDetail"] .modal, body.app-shell-v2 #modalOverlay[data-modal-kind="competitionDetail"] .modal-card, body.app-shell-v2 #modalOverlay[data-modal-kind="competitionDetail"] .competition-detail-modal { width:min(680px,calc(100vw - 48px))!important; max-height:calc(100vh - 96px)!important; margin:0!important; overflow:auto!important; border-radius:16px!important; border:1px solid var(--w2g-line)!important; background:#fff!important; box-shadow:0 24px 70px rgba(15,23,42,.24)!important; }
@media (max-width:1180px){ body.app-shell-v2 #competitionList, body.app-shell-v2 #teamList{grid-template-columns:repeat(2,minmax(0,1fr))!important;} }
@media (max-width:760px){ body.app-shell-v2 #competitions.competition-page-v2, body.app-shell-v2 #teams.team-page-v2{width:auto!important;margin:0!important;padding:28px 16px 96px!important;} body.app-shell-v2 #competitionList,body.app-shell-v2 #teamList{grid-template-columns:1fr!important;} body.app-shell-v2 #competitions .reference-search,body.app-shell-v2 #teams .reference-search{flex-basis:100%!important;max-width:100%!important;} body.app-shell-v2 #teams .head-row,body.app-shell-v2 #competitions .head-row{display:block!important;} }

/* ============================================================
   Dark mode fix for reference-parity block (counters line 29512)
   Part 1: re-declare --w2g-* variables that were hardcoded light
   Part 2: override hardcoded hex values with themed equivalents
   ============================================================ */

/* Part 1 — re-declare dark CSS variables on app-shell-v2 */
html[data-theme="dark"] body.app-shell-v2 {
  --w2g-bg: #0A0C11;
  --w2g-surface: #14171E;
  --w2g-ink: #F3F5F8;
  --w2g-muted: #828B9A;
  --w2g-line: rgba(255, 255, 255, 0.08);
  --w2g-chip: #1B1F27;
  --w2g-chip-border: rgba(255, 255, 255, 0.10);
  --w2g-orange: #F97316;
  --w2g-orange-soft: rgba(249, 115, 22, 0.14);
  --w2g-orange-line: rgba(249, 115, 22, 0.30);
  --w2g-green: #2BB35E;
  --w2g-green-deep: #5FB833;
  --w2g-amber: #D6A22B;
  background: var(--w2g-bg) !important;
}

/* Part 2 — explicit overrides for hardcoded hex values */

html[data-theme="dark"] body.app-shell-v2 #competitions .reference-filter-shell,
html[data-theme="dark"] body.app-shell-v2 #teams .reference-filter-shell,
html[data-theme="dark"] body.app-shell-v2 #competitions .competition-filter-shell,
html[data-theme="dark"] body.app-shell-v2 #teams .team-filter-shell,
html[data-theme="dark"] body.app-shell-v2 #competitions .filter-shell,
html[data-theme="dark"] body.app-shell-v2 #teams .filter-shell {
  background: var(--w2g-surface) !important;
}

html[data-theme="dark"] body.app-shell-v2 #competitions .reference-search .iconify,
html[data-theme="dark"] body.app-shell-v2 #teams .reference-search .iconify,
html[data-theme="dark"] body.app-shell-v2 #competitions .reference-search .search-icon,
html[data-theme="dark"] body.app-shell-v2 #teams .reference-search .search-icon,
html[data-theme="dark"] body.app-shell-v2 #competitions .search-box .iconify,
html[data-theme="dark"] body.app-shell-v2 #teams .search-box .iconify {
  color: var(--w2g-muted) !important;
}

html[data-theme="dark"] body.app-shell-v2 #competitions .reference-quick-filters .chip,
html[data-theme="dark"] body.app-shell-v2 #teams .reference-quick-filters .chip,
html[data-theme="dark"] body.app-shell-v2 #competitions .quick-filter,
html[data-theme="dark"] body.app-shell-v2 #teams .quick-filter {
  color: var(--w2g-body) !important;
}

html[data-theme="dark"] body.app-shell-v2 #competitions .reference-filter-toggle,
html[data-theme="dark"] body.app-shell-v2 #teams .reference-filter-toggle,
html[data-theme="dark"] body.app-shell-v2 #competitions .filter-button,
html[data-theme="dark"] body.app-shell-v2 #teams .filter-button {
  background: var(--w2g-surface-2, #1B1F27) !important;
  color: var(--w2g-ink) !important;
}

html[data-theme="dark"] body.app-shell-v2 #competitions .sort-label,
html[data-theme="dark"] body.app-shell-v2 #teams .sort-label {
  color: var(--w2g-muted) !important;
}

html[data-theme="dark"] body.app-shell-v2 #competitionSort,
html[data-theme="dark"] body.app-shell-v2 #teamSort,
html[data-theme="dark"] body.app-shell-v2 #competitions .sort-select,
html[data-theme="dark"] body.app-shell-v2 #teams .sort-select {
  background: var(--w2g-surface-2, #1B1F27) !important;
  color: var(--w2g-ink) !important;
}

html[data-theme="dark"] body.app-shell-v2 #competitions .active-filter-label,
html[data-theme="dark"] body.app-shell-v2 #teams .active-filter-label {
  color: var(--w2g-muted) !important;
}

html[data-theme="dark"] body.app-shell-v2 #competitions .active-filter-chip,
html[data-theme="dark"] body.app-shell-v2 #teams .active-filter-chip,
html[data-theme="dark"] body.app-shell-v2 #competitions .filter-chip,
html[data-theme="dark"] body.app-shell-v2 #teams .filter-chip {
  background: var(--w2g-orange-soft) !important;
  color: var(--w2g-orange-ink, #FCA968) !important;
}

html[data-theme="dark"] body.app-shell-v2 #competitions .active-filter-clear,
html[data-theme="dark"] body.app-shell-v2 #teams .active-filter-clear,
html[data-theme="dark"] body.app-shell-v2 #competitions .clear-filters,
html[data-theme="dark"] body.app-shell-v2 #teams .clear-filters {
  background: var(--w2g-surface-2, #1B1F27) !important;
  color: var(--w2g-body) !important;
}

html[data-theme="dark"] body.app-shell-v2 #competitionList > .reference-card,
html[data-theme="dark"] body.app-shell-v2 #teamList > .reference-card,
html[data-theme="dark"] body.app-shell-v2 #competitionList > .cv2-card,
html[data-theme="dark"] body.app-shell-v2 #teamList > .team-card-v2 {
  background: var(--w2g-surface) !important;
  border-color: var(--w2g-line) !important;
}

html[data-theme="dark"] body.app-shell-v2 .reference-card .chip,
html[data-theme="dark"] body.app-shell-v2 .reference-card .pill,
html[data-theme="dark"] body.app-shell-v2 .reference-card .badge {
  color: var(--w2g-muted) !important;
}

html[data-theme="dark"] body.app-shell-v2 .reference-card .chip.rec,
html[data-theme="dark"] body.app-shell-v2 .reference-card .rec {
  background: var(--w2g-surface-2, #1B1F27) !important;
  border-color: var(--w2g-line) !important;
  color: var(--w2g-muted) !important;
}

html[data-theme="dark"] body.app-shell-v2 .reference-card .lc-title {
  color: var(--w2g-ink) !important;
}

html[data-theme="dark"] body.app-shell-v2 .reference-card .lc-meta {
  color: var(--w2g-muted) !important;
}

html[data-theme="dark"] body.app-shell-v2 #teamList .reference-card-summary {
  color: var(--w2g-body) !important;
}

html[data-theme="dark"] body.app-shell-v2 .reference-card .pill.neutral,
html[data-theme="dark"] body.app-shell-v2 .reference-card .deadline-chip,
html[data-theme="dark"] body.app-shell-v2 .reference-card .status-chip {
  background: rgba(91, 147, 245, 0.14) !important;
  color: #5B93F5 !important;
}

html[data-theme="dark"] body.app-shell-v2 .reference-card .match-score {
  color: var(--w2g-muted) !important;
}
html[data-theme="dark"] body.app-shell-v2 .reference-card .match-score b {
  color: var(--w2g-ink) !important;
}

html[data-theme="dark"] body.app-shell-v2 .reference-card .bar,
html[data-theme="dark"] body.app-shell-v2 .reference-card .match-bar,
html[data-theme="dark"] body.app-shell-v2 .reference-card .match-progress,
html[data-theme="dark"] body.app-shell-v2 .reference-card .match-meter-track {
  background: rgba(255, 255, 255, 0.09) !important;
}

html[data-theme="dark"] body.app-shell-v2 .reference-card .why-link,
html[data-theme="dark"] body.app-shell-v2 .reference-card .why-toggle,
html[data-theme="dark"] body.app-shell-v2 .reference-card summary {
  color: var(--w2g-muted) !important;
}

html[data-theme="dark"] body.app-shell-v2 .reference-card .reference-section-label,
html[data-theme="dark"] body.app-shell-v2 .reference-card .section-label {
  color: var(--w2g-faint, #5A6373) !important;
}

html[data-theme="dark"] body.app-shell-v2 .reference-card .lc-actions .button.outline,
html[data-theme="dark"] body.app-shell-v2 .reference-card .lc-actions .button.secondary,
html[data-theme="dark"] body.app-shell-v2 .reference-card .actions .button.outline,
html[data-theme="dark"] body.app-shell-v2 .reference-card .actions .button.secondary {
  background: var(--w2g-surface-2, #1B1F27) !important;
  color: var(--w2g-ink) !important;
  border-color: var(--w2g-line) !important;
}

html[data-theme="dark"] body.app-shell-v2 #modalOverlay[data-modal-kind="competitionDetail"] .modal,
html[data-theme="dark"] body.app-shell-v2 #modalOverlay[data-modal-kind="competitionDetail"] .modal-card,
html[data-theme="dark"] body.app-shell-v2 #modalOverlay[data-modal-kind="competitionDetail"] .competition-detail-modal {
  background: var(--w2g-surface) !important;
  border-color: var(--w2g-line) !important;
}

/* ============================================================
   Find Team density polish — toolbar button + card compacting
   Scope: #teams.team-page-v2 toolbar and #teamList cards only.
   Does not affect competition cards or other pages.
   ============================================================ */

/* A — Create team button in toolbar (orange, compact, right-aligned via sort label's margin-left:auto) */
body.app-shell-v2 #teams.team-page-v2 .filter-toolbar #createTeamButton {
  flex: 0 0 auto !important;
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 16px !important;
  border-radius: 10px !important;
  background: var(--w2g-orange) !important;
  border: 1px solid var(--w2g-orange) !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  transform: none !important;
}

/* B — Card flex gap: reduce from 13 px to 10 px */
body.app-shell-v2 #teamList > .reference-card {
  gap: 10px !important;
}

/* B — Header row: trim forced min-height and remove additive margin */
body.app-shell-v2 #teamList .reference-card .lc-top {
  min-height: 60px !important;
  margin-bottom: 0 !important;
}

/* B — Team name: no forced height reservation */
body.app-shell-v2 #teamList .reference-card .lc-title {
  min-height: 0 !important;
}

/* B — Description: no forced height, no additive bottom margin */
body.app-shell-v2 #teamList .reference-card-summary {
  min-height: 0 !important;
  margin: 0 !important;
}

/* B — Match block: remove additive bottom margin (card gap handles spacing) */
body.app-shell-v2 #teamList .reference-card .match,
body.app-shell-v2 #teamList .reference-card .match-block,
body.app-shell-v2 #teamList .reference-card .reference-match {
  margin-bottom: 0 !important;
}

/* B — "Why this match?" accordion row: full-width, chevron, border-top as divider */
body.app-shell-v2 #teamList .reference-card .reference-why {
  min-height: 0 !important;
}
body.app-shell-v2 #teamList .reference-card .reference-why summary {
  display: flex !important;
  width: 100% !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 6px 0 !important;
  border-top: 1px solid var(--w2g-line) !important;
  background: transparent !important;
  color: var(--w2g-muted) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  list-style: none !important;
  cursor: pointer !important;
  box-shadow: none !important;
}
body.app-shell-v2 #teamList .reference-card .reference-why summary::-webkit-details-marker {
  display: none !important;
}
body.app-shell-v2 #teamList .reference-card .reference-why summary::after {
  content: '' !important;
  display: inline-block !important;
  flex: 0 0 14px !important;
  width: 14px !important;
  height: 14px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  transition: transform 0.15s ease !important;
}
body.app-shell-v2 #teamList .reference-card .reference-why[open] summary::after {
  transform: rotate(90deg) !important;
}

/* B — Divider: remove additive bottom margin */
body.app-shell-v2 #teamList .reference-card .divider,
body.app-shell-v2 #teamList .reference-card hr {
  margin: 0 !important;
}

/* B — Open roles: shrink to content height, stop flex-expanding */
body.app-shell-v2 #teamList .reference-card .reference-role-block {
  flex: 0 0 auto !important;
  min-height: 0 !important;
}

/* B — CTA buttons: reduce top padding (margin-top:auto already pins to bottom) */
body.app-shell-v2 #teamList .reference-card .lc-actions,
body.app-shell-v2 #teamList .reference-card .actions {
  padding-top: 8px !important;
}

/* Mobile: Create team button takes full width when toolbar stacks to single column */
@media (max-width: 760px) {
  body.app-shell-v2 #teams.team-page-v2 .filter-toolbar #createTeamButton {
    width: 100% !important;
    margin: 0 !important;
  }
}

/* ============================================================
   Find Competitions density polish — card compacting + visual sharpness
   Scope: #competitionList reference cards only.
   Does not affect team cards or other pages.
   ============================================================ */

/* A — Card flex gap + remove enforced minimum height */
body.app-shell-v2 #competitionList > .reference-card {
  gap: 10px !important;
  min-height: 0 !important;
}

/* A — Header row: trim forced min-height, remove additive margin-bottom */
body.app-shell-v2 #competitionList .reference-card .lc-top {
  min-height: 60px !important;
  margin-bottom: 0 !important;
}

/* A — Title: no forced height reservation */
body.app-shell-v2 #competitionList .reference-card .lc-title {
  min-height: 0 !important;
}

/* A/B — Metadata: prevent wrap, slightly stronger weight for crispness */
body.app-shell-v2 #competitionList .reference-card .lc-meta {
  flex-wrap: nowrap !important;
  overflow: hidden !important;
  font-weight: 600 !important;
}

/* A — Divider: remove additive bottom margin (card gap handles spacing) */
body.app-shell-v2 #competitionList .reference-card .divider,
body.app-shell-v2 #competitionList .reference-card hr {
  margin: 0 !important;
}

/* A — Required roles block: shrink to content, stop flex-expanding */
body.app-shell-v2 #competitionList .reference-card .reference-role-block {
  flex: 0 0 auto !important;
  min-height: 0 !important;
}

/* A — CTA buttons: reduce top padding (margin-top:auto already pins to bottom) */
body.app-shell-v2 #competitionList .reference-card .lc-actions,
body.app-shell-v2 #competitionList .reference-card .actions {
  padding-top: 8px !important;
}

/* A — "Why this match?" accordion: full-width row with chevron + border-top divider */
body.app-shell-v2 #competitionList .reference-card .reference-why {
  min-height: 0 !important;
}
body.app-shell-v2 #competitionList .reference-card .reference-why summary {
  display: flex !important;
  width: 100% !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 6px 0 !important;
  border-top: 1px solid var(--w2g-line) !important;
  background: transparent !important;
  color: var(--w2g-muted) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  list-style: none !important;
  cursor: pointer !important;
  box-shadow: none !important;
}
body.app-shell-v2 #competitionList .reference-card .reference-why summary::-webkit-details-marker {
  display: none !important;
}
body.app-shell-v2 #competitionList .reference-card .reference-why summary::after {
  content: '' !important;
  display: inline-block !important;
  flex: 0 0 14px !important;
  width: 14px !important;
  height: 14px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  transition: transform 0.15s ease !important;
}
body.app-shell-v2 #competitionList .reference-card .reference-why[open] summary::after {
  transform: rotate(90deg) !important;
}

/* B — Thumbnail fallback: bolder initial for a more intentional look */
body.app-shell-v2 #competitionList .reference-card .thumb.ph {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--w2g-orange-ink, #B7400B) !important;
}

/* B — Deadline pill: restore semantic colors for success / warning / info variants */
body.app-shell-v2 #competitionList .reference-card .pill.success {
  background: #ecfdf5 !important;
  border: 0 !important;
  color: #15803d !important;
}
body.app-shell-v2 #competitionList .reference-card .pill.success .dot {
  background: #15803d !important;
}
body.app-shell-v2 #competitionList .reference-card .pill.warning {
  background: #fffbeb !important;
  border: 0 !important;
  color: #b45309 !important;
}
body.app-shell-v2 #competitionList .reference-card .pill.warning .dot {
  background: #b45309 !important;
}
body.app-shell-v2 #competitionList .reference-card .pill.info {
  background: #eff6ff !important;
  border: 0 !important;
  color: #2563eb !important;
}
body.app-shell-v2 #competitionList .reference-card .pill.info .dot {
  background: #2563eb !important;
}

/* C — Dark mode: pill variant colors */
html[data-theme="dark"] body.app-shell-v2 #competitionList .reference-card .pill.success {
  background: rgba(43, 179, 94, 0.14) !important;
  color: #2BB35E !important;
}
html[data-theme="dark"] body.app-shell-v2 #competitionList .reference-card .pill.success .dot {
  background: #2BB35E !important;
}
html[data-theme="dark"] body.app-shell-v2 #competitionList .reference-card .pill.warning {
  background: rgba(214, 162, 43, 0.14) !important;
  color: #D6A22B !important;
}
html[data-theme="dark"] body.app-shell-v2 #competitionList .reference-card .pill.warning .dot {
  background: #D6A22B !important;
}
html[data-theme="dark"] body.app-shell-v2 #competitionList .reference-card .pill.info {
  background: rgba(91, 147, 245, 0.14) !important;
  color: #5B93F5 !important;
}
html[data-theme="dark"] body.app-shell-v2 #competitionList .reference-card .pill.info .dot {
  background: #5B93F5 !important;
}

/* ============================================================
   Unified Match Detail Panel — competition + team cards
   Scope: body.app-shell-v2 .reference-card .reference-why
   Controls: toggle label, highlight box, score rows, method chips
   ============================================================ */

/* Toggle label: "Why this match?" collapses, "Hide match detail" shows on [open] */
body.app-shell-v2 .reference-card .reference-why .why-label-open {
  display: none !important;
}
body.app-shell-v2 .reference-card .reference-why[open] .why-label-closed {
  display: none !important;
}
body.app-shell-v2 .reference-card .reference-why[open] .why-label-open {
  display: inline !important;
}

/* Highlight box: compact inset, replaces plain .why-roles text */
body.app-shell-v2 .reference-card .why-highlight {
  margin: 4px 0 8px !important;
  padding: 5px 9px !important;
  background: color-mix(in srgb, var(--w2g-match-strong) 14%, transparent) !important;
  border-radius: 7px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: var(--w2g-match-ink) !important;
  line-height: 1.4 !important;
}

/* Fit evidence rows: categorical states, with a bar only for skill coverage. */
body.app-shell-v2 .reference-card .why-scores {
  display: grid !important;
  gap: 5px !important;
  margin: 0 0 8px !important;
}
body.app-shell-v2 .reference-card .why-score-row {
  display: grid !important;
  grid-template-columns: minmax(108px, 1.15fr) minmax(48px, 1fr) max-content !important;
  align-items: center !important;
  gap: 6px !important;
}
body.app-shell-v2 .reference-card .why-score-row-categorical {
  grid-template-columns: minmax(108px, 1fr) minmax(92px, max-content) !important;
}
body.app-shell-v2 .reference-card .why-score-label {
  font-size: 10.5px !important;
  font-weight: 600 !important;
  color: var(--w2g-muted) !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.35 !important;
  overflow-wrap: anywhere !important;
}
body.app-shell-v2 .reference-card .why-score-bar {
  position: relative !important;
  height: 4px !important;
  background: color-mix(in srgb, var(--w2g-match-strong) 15%, transparent) !important;
  border-radius: 999px !important;
  overflow: hidden !important;
}
body.app-shell-v2 .reference-card .why-score-bar i {
  display: block !important;
  height: 100% !important;
  border-radius: 999px !important;
}
body.app-shell-v2 .reference-card .why-fill-strong { background: var(--w2g-match-strong) !important; }
body.app-shell-v2 .reference-card .why-fill-good { background: var(--w2g-match-good) !important; }
body.app-shell-v2 .reference-card .why-fill-low { background: var(--w2g-match-low) !important; }
body.app-shell-v2 .reference-card .why-score-val {
  font-size: 10px !important;
  font-weight: 700 !important;
  color: var(--w2g-muted) !important;
  text-align: right !important;
}
body.app-shell-v2 .reference-card .why-fill-match { background: var(--w2g-match-strong) !important; }
body.app-shell-v2 .reference-card .why-fill-partial { background: var(--w2g-match-good) !important; }
body.app-shell-v2 .reference-card .why-fill-mismatch { background: var(--w2g-match-low) !important; }
body.app-shell-v2 .reference-card .why-score-status {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  text-align: right !important;
  line-height: 1.35 !important;
  white-space: normal !important;
}
body.app-shell-v2 .reference-card .why-score-status.status-match {
  color: var(--w2g-match-ink) !important;
}
body.app-shell-v2 .reference-card .why-score-status.status-partial,
body.app-shell-v2 .reference-card .why-score-status.status-neutral,
body.app-shell-v2 .reference-card .why-score-status.status-unknown {
  color: var(--w2g-muted) !important;
}
body.app-shell-v2 .reference-card .why-score-status.status-mismatch {
  color: var(--w2g-body) !important;
}

/* Context block: decision-useful facts that are explicitly NOT scoring inputs.
   Kept visually separate from the evidence rows above so it can never be read
   as evidence that moved the score. Wraps freely — long Thai values must not
   push the card wider on mobile. */
body.app-shell-v2 .reference-card .why-context {
  margin-top: 8px !important;
  padding-top: 7px !important;
  border-top: 1px solid color-mix(in srgb, var(--w2g-match-strong) 20%, transparent) !important;
}
body.app-shell-v2 .reference-card .why-context-head {
  display: block !important;
  margin-bottom: 5px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  color: var(--w2g-muted) !important;
  line-height: 1.4 !important;
  overflow-wrap: anywhere !important;
}
body.app-shell-v2 .reference-card .why-context-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px 6px !important;
}
body.app-shell-v2 .reference-card .why-context-item {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 4px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding: 2px 7px !important;
  border-radius: 6px !important;
  background: color-mix(in srgb, var(--w2g-body) 6%, transparent) !important;
  font-size: 10.5px !important;
  line-height: 1.4 !important;
}
body.app-shell-v2 .reference-card .why-context-item > span {
  color: var(--w2g-muted) !important;
  font-weight: 600 !important;
}
body.app-shell-v2 .reference-card .why-context-item > b {
  color: var(--w2g-body) !important;
  font-weight: 700 !important;
  overflow-wrap: anywhere !important;
}
html[data-theme="dark"] body.app-shell-v2 .reference-card .why-context {
  border-top-color: rgba(43, 179, 94, 0.18) !important;
}
html[data-theme="dark"] body.app-shell-v2 .reference-card .why-context-item {
  background: rgba(255, 255, 255, 0.06) !important;
}

/* Method note: flex row of inline tech chips */
body.app-shell-v2 .reference-card .method-note {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 4px !important;
  margin-top: 8px !important;
  padding-top: 6px !important;
  border-top: 1px solid color-mix(in srgb, var(--w2g-match-strong) 20%, transparent) !important;
}
body.app-shell-v2 .reference-card .why-chip {
  display: inline-flex !important;
  align-items: center !important;
  padding: 2px 7px !important;
  border-radius: 5px !important;
  background: color-mix(in srgb, var(--w2g-match-strong) 11%, transparent) !important;
  color: var(--w2g-match-ink) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  white-space: nowrap !important;
}

/* Dark mode: highlight box and chip bg use rgba so they don't wash out on dark surfaces */
html[data-theme="dark"] body.app-shell-v2 .reference-card .why-highlight {
  background: rgba(43, 179, 94, 0.13) !important;
}
html[data-theme="dark"] body.app-shell-v2 .reference-card .why-score-bar {
  background: rgba(255, 255, 255, 0.08) !important;
}
html[data-theme="dark"] body.app-shell-v2 .reference-card .method-note {
  border-top-color: rgba(43, 179, 94, 0.18) !important;
}
html[data-theme="dark"] body.app-shell-v2 .reference-card .why-chip {
  background: rgba(43, 179, 94, 0.11) !important;
}

/* ============================================================
   Visual Audit Fix — horizontal overflow + sharpness
   Scope: body.app-shell-v2 (logged-in shell only)
   ============================================================ */

/* Part A — Horizontal overflow fix
   Root cause: body::after (position:fixed, width:420px, right:-110px,
   filter:blur(8px)) bleeds 110px past the viewport right edge.
   Chromium includes filtered fixed elements in scroll-area width
   even when the element is opacity:0.
   Fix 1: remove the orbs from layout in app-shell context entirely.
   The mobile-menu backdrop (body.mobile-menu-open::before) has
   specificity 0,3,1 vs our 0,2,1 and is unaffected. */
body.app-shell-v2::before,
body.app-shell-v2::after {
  content: none !important;
}
/* Fix 2: scoped overflow-x guard. body.auth-page and landing
   page are unaffected. position:fixed modals still render
   since fixed elements ignore overflow-x:hidden on ancestors. */
body.app-shell-v2 {
  overflow-x: hidden !important;
}

/* Part B — Visual sharpness
   B1 — Card borders: slightly crisper definition.
   --w2g-line (#E5E8EC) → --w2g-line-strong (#D6DAE1). */
body.app-shell-v2 #competitionList > .reference-card,
body.app-shell-v2 #teamList > .reference-card {
  border-color: var(--w2g-line-strong) !important;
}
/* B2 — Context bar: reduce backdrop-filter from 12px to 4px.
   12px caused the sticky header to look visually soft/foggy. */
body.app-shell-v2 .app-shell-context-bar {
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}
/* B3 — Card metadata: 500→600 weight for crisper secondary text. */
body.app-shell-v2 .reference-card .lc-meta {
  font-weight: 600 !important;
}
/* B4 — Match score numeric: 700→800 for crisper number rendering. */
body.app-shell-v2 .reference-card .match-score b {
  font-weight: 800 !important;
}
/* B5 — Why score row label: muted→body for slightly stronger
   contrast in the expanded match detail panel. */
body.app-shell-v2 .reference-card .why-score-label {
  color: var(--w2g-body) !important;
}

/* ============================================================
   Find Members — compact reference-card polish
   Scope: body.app-shell-v2 #memberList only
   ============================================================ */

/* Grid */
body.app-shell-v2 #memberList.card-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
  align-items: stretch !important;
  gap: 16px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Card base */
body.app-shell-v2 #memberList > .reference-card {
  display: flex !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 18px !important;
  border: 1px solid var(--w2g-line-strong) !important;
  border-radius: 14px !important;
  background: var(--w2g-surface) !important;
  box-shadow: none !important;
  transform: none !important;
  transition: border-color .14s ease, box-shadow .14s ease !important;
}
body.app-shell-v2 #memberList > .reference-card:hover {
  border-color: var(--w2g-line-strong) !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .06) !important;
}

/* Title row: avatar (48px) + copy */
body.app-shell-v2 #memberList .reference-card-title-row {
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: flex-start !important;
  min-width: 0 !important;
}

/* Avatar: match thumb sizing */
body.app-shell-v2 #memberList .reference-card .member-avatar {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  flex: 0 0 48px !important;
  border-radius: 10px !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  background: var(--w2g-orange-soft) !important;
  border: 1px solid var(--w2g-orange-line) !important;
  color: var(--w2g-orange-ink, #c2410c) !important;
}

/* Header row density */
body.app-shell-v2 #memberList .reference-card .lc-top {
  min-height: 60px !important;
  margin-bottom: 0 !important;
}
body.app-shell-v2 #memberList .reference-card .lc-title {
  min-height: 0 !important;
  font-size: 15px !important;
}

/* Bio: 2-line clamp, no excess height */
body.app-shell-v2 #memberList .reference-card .reference-card-summary {
  min-height: 0 !important;
}

/* Match block: no forced margin */
body.app-shell-v2 #memberList .reference-card .match,
body.app-shell-v2 #memberList .reference-card .reference-why {
  margin-bottom: 0 !important;
}

/* Skills section: compact */
body.app-shell-v2 #memberList .reference-card .reference-role-block {
  flex: 0 0 auto !important;
  min-height: 0 !important;
}

/* Divider */
body.app-shell-v2 #memberList .reference-card .divider,
body.app-shell-v2 #memberList .reference-card hr {
  margin: 0 !important;
}

/* CTA buttons */
body.app-shell-v2 #memberList .reference-card .lc-actions {
  padding-top: 8px !important;
}
/* Handle memberInviteAction returning a div wrapper */
body.app-shell-v2 #memberList .reference-card .lc-actions > div {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  display: flex !important;
  gap: 8px !important;
}
body.app-shell-v2 #memberList .reference-card .lc-actions > div > .button {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}
/* "Has team" badge alignment */
body.app-shell-v2 #memberList .reference-card .lc-top > .pill {
  flex: 0 0 auto !important;
}

/* Why panel: same accordion density as competition/team cards */
body.app-shell-v2 #memberList .reference-card .reference-why {
  min-height: 0 !important;
}
body.app-shell-v2 #memberList .reference-card .reference-why summary {
  display: flex !important;
  width: 100% !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 6px 0 !important;
  border-top: 1px solid var(--w2g-line) !important;
  background: transparent !important;
  color: var(--w2g-muted) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  list-style: none !important;
  cursor: pointer !important;
  box-shadow: none !important;
}
body.app-shell-v2 #memberList .reference-card .reference-why summary::-webkit-details-marker {
  display: none !important;
}
body.app-shell-v2 #memberList .reference-card .reference-why summary::after {
  content: '' !important;
  display: inline-block !important;
  flex: 0 0 14px !important;
  width: 14px !important;
  height: 14px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  transition: transform 0.15s ease !important;
}
body.app-shell-v2 #memberList .reference-card .reference-why[open] summary::after {
  transform: rotate(90deg) !important;
}

/* Pending badges: compact inline */
body.app-shell-v2 #memberList .reference-card .member-pending-context,
body.app-shell-v2 #memberList .reference-card .member-join-request-context {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

/* Dark mode */
html[data-theme="dark"] body.app-shell-v2 #memberList > .reference-card {
  background: var(--w2g-surface) !important;
  border-color: var(--w2g-line) !important;
}
html[data-theme="dark"] body.app-shell-v2 #memberList .reference-card .lc-actions .button.outline,
html[data-theme="dark"] body.app-shell-v2 #memberList .reference-card .lc-actions .button.secondary {
  background: var(--w2g-surface-2, #1B1F27) !important;
  color: var(--w2g-ink) !important;
  border-color: var(--w2g-line) !important;
}
html[data-theme="dark"] body.app-shell-v2 #memberList .reference-card .member-avatar {
  background: var(--w2g-orange-soft) !important;
  border-color: var(--w2g-orange-line) !important;
}

/* Responsive: 2 columns at tablet */
@media (max-width: 1180px) {
  body.app-shell-v2 #memberList.card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
/* Responsive: 1 column at mobile */
@media (max-width: 760px) {
  body.app-shell-v2 #memberList.card-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Mission Center IA alignment v1 */
body.app-shell-v2 #team .section-title-row {
  margin-bottom: 14px;
}

body.app-shell-v2 .mission-center-layout {
  display: block;
}

body.app-shell-v2 .mission-center-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  max-width: 1360px;
}

body.app-shell-v2 .mission-center-header {
  padding: 18px;
}

body.app-shell-v2 .mission-center-header .team-snapshot-title-row {
  align-items: center;
  gap: 12px;
}

body.app-shell-v2 .mission-center-header .team-snapshot-title-copy h3 {
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.12;
}

body.app-shell-v2 .mission-center-header .team-snapshot-title-copy p {
  max-width: 820px;
}

body.app-shell-v2 .mission-center-header .mission-preview-metrics {
  grid-template-columns: minmax(220px, 1fr) minmax(260px, 1.25fr);
  gap: 12px;
  margin-top: 14px;
}

body.app-shell-v2 .mission-center-header .mission-preview-next {
  min-height: auto;
  padding: 12px;
}

body.app-shell-v2 .mission-critical-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

body.app-shell-v2 .mission-critical-stats .team-snapshot-stat {
  min-height: 104px;
}

body.app-shell-v2 .mission-center-main > .workspace-tasks-v2,
body.app-shell-v2 .mission-center-main .mission-compact-expanded > .workspace-tasks-v2 {
  margin: 0;
  padding: 18px;
}

body.app-shell-v2 .mission-center-main .task-board-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 14px;
}

body.app-shell-v2 .mission-center-main .task-board-stats {
  grid-column: 1 / -1;
}

body.app-shell-v2 .task-board-new-button {
  white-space: nowrap;
}

body.app-shell-v2 .mission-center-main .task-board-kanban {
  overflow-x: auto;
  padding-bottom: 4px;
  overscroll-behavior-inline: contain;
}

body.app-shell-v2 .mission-center-main .task-board-col {
  min-width: 240px;
}

body.app-shell-v2 .mission-secondary-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
  gap: 16px;
  align-items: start;
}

body.app-shell-v2 .mission-secondary-panel {
  height: 100%;
}

body.app-shell-v2 .mission-links-panel .workspace-link-grid {
  grid-template-columns: 1fr;
  gap: 8px;
}

body.app-shell-v2 .mission-links-panel .workspace-link-card {
  min-height: 58px;
}

body.app-shell-v2 .mission-role-context {
  padding: 14px;
}

body.app-shell-v2 .mission-role-context .team-context-block {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

body.app-shell-v2 .mission-chat-row .quick-team-chat-card {
  max-width: none;
}

body.app-shell-v2 .mission-chat-row .quick-team-chat-messages {
  max-height: 180px;
}

body.app-shell-v2 .mission-chat-row .quick-team-secondary-status {
  margin-top: 10px;
}

@media (max-width: 1100px) {
  body.app-shell-v2 .mission-critical-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.app-shell-v2 .mission-secondary-grid,
  body.app-shell-v2 .mission-role-context .team-context-block {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  body.app-shell-v2 .mission-center-main {
    gap: 12px;
  }

  body.app-shell-v2 .mission-center-header {
    padding: 14px;
  }

  body.app-shell-v2 .mission-center-header .team-snapshot-title-row,
  body.app-shell-v2 .mission-center-header .team-snapshot-actions,
  body.app-shell-v2 .mission-center-header .mission-preview-metrics,
  body.app-shell-v2 .mission-center-main .task-board-head {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  body.app-shell-v2 .mission-center-header .team-snapshot-actions .button,
  body.app-shell-v2 .task-board-new-button {
    width: 100%;
  }

  body.app-shell-v2 .mission-critical-stats {
    grid-template-columns: 1fr;
  }

  body.app-shell-v2 .mission-center-main > .workspace-tasks-v2,
  body.app-shell-v2 .mission-center-main .mission-compact-expanded > .workspace-tasks-v2 {
    padding: 14px;
    overflow: hidden;
  }

  body.app-shell-v2 .mission-center-main .task-board-kanban {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(250px, 84vw);
    grid-template-columns: none;
    width: 100%;
  }
}

/* Mission Center reference parity v2: layout-only density pass */
body.app-shell-v2 #team {
  --mission-center-max: 1480px;
}

body.app-shell-v2 #team > .section-title-row,
body.app-shell-v2 #team #teamHubContent {
  width: min(100%, var(--mission-center-max));
  margin-inline: 0;
}

body.app-shell-v2 #team > .section-title-row {
  margin-bottom: 10px;
}

body.app-shell-v2 #team > .section-title-row h1 {
  margin-bottom: 4px;
}

body.app-shell-v2 .mission-center-main {
  max-width: var(--mission-center-max);
  gap: 12px;
}

body.app-shell-v2 .mission-center-header {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border-color: var(--w2g-line-strong, var(--line));
  box-shadow: none;
}

body.app-shell-v2 .mission-center-header .team-snapshot-topline {
  min-height: 0;
  justify-content: flex-end;
  margin: 0;
}

body.app-shell-v2 .mission-center-header .team-snapshot-title-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

body.app-shell-v2 .mission-center-header .avatar,
body.app-shell-v2 .mission-center-header .member-avatar {
  width: 40px;
  height: 40px;
  min-width: 40px;
  font-size: 13px;
}

body.app-shell-v2 .mission-center-header .team-snapshot-title-copy h3 {
  margin: 0 0 2px;
  font-size: 20px;
}

body.app-shell-v2 .mission-center-header .team-snapshot-title-copy p {
  margin: 0;
  font-size: 12.5px;
}

body.app-shell-v2 .mission-center-header .team-snapshot-actions {
  gap: 8px;
}

body.app-shell-v2 .mission-center-header .team-snapshot-actions .button {
  padding: 7px 10px;
  min-height: 34px;
  font-size: 12px;
}

body.app-shell-v2 .mission-center-header .member-role-pill {
  min-height: 28px;
  padding: 5px 9px;
}

body.app-shell-v2 .mission-center-header .mission-preview-metrics {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin-top: 0;
}

body.app-shell-v2 .mission-readiness-badge {
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  border-radius: 999px;
  background:
    radial-gradient(circle at center, var(--w2g-surface, #fff) 58%, transparent 59%),
    conic-gradient(var(--w2g-orange, #f97316) var(--mission-readiness, 0%), color-mix(in srgb, var(--w2g-line, #e5e7eb) 70%, transparent) 0);
  border: 1px solid var(--w2g-line-strong, var(--line));
  color: var(--w2g-ink, var(--ink));
}

body.app-shell-v2 .mission-readiness-badge strong {
  margin-top: 8px;
  font-size: 19px;
  line-height: 1;
  font-weight: 700;
}

body.app-shell-v2 .mission-readiness-badge span {
  max-width: 54px;
  margin-top: -8px;
  text-align: center;
  font-size: 8.5px;
  line-height: 1.05;
  font-weight: 800;
  color: var(--w2g-muted, var(--muted));
}

body.app-shell-v2 .mission-center-header .mission-preview-next {
  display: grid;
  grid-template-columns: minmax(96px, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 10px;
}

body.app-shell-v2 .mission-center-header .mission-preview-next span,
body.app-shell-v2 .mission-center-header .mission-preview-next small {
  font-size: 11px;
}

body.app-shell-v2 .mission-center-header .mission-preview-next strong {
  font-size: 13px;
}

body.app-shell-v2 .mission-center-header .mission-preview-next .button {
  padding: 6px 9px;
  min-height: 30px;
  font-size: 11.5px;
}

body.app-shell-v2 .mission-center-header .mission-role-note {
  margin: 0;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 12px;
}

body.app-shell-v2 .mission-critical-stats {
  gap: 8px;
}

body.app-shell-v2 .mission-critical-stats .team-snapshot-stat {
  min-height: 78px;
  padding: 10px 12px;
  border-radius: 10px;
}

body.app-shell-v2 .mission-critical-stats .team-snapshot-stat span,
body.app-shell-v2 .mission-critical-stats .team-snapshot-stat small {
  font-size: 11px;
}

body.app-shell-v2 .mission-critical-stats .team-snapshot-stat strong {
  font-size: 20px;
}

body.app-shell-v2 .mission-center-main > .workspace-tasks-v2,
body.app-shell-v2 .mission-center-main .mission-compact-expanded > .workspace-tasks-v2 {
  padding: 14px;
  border-radius: 12px;
}

body.app-shell-v2 .mission-center-main .task-board-head {
  grid-template-columns: minmax(0, 1fr) auto;
  margin-bottom: 10px;
}

body.app-shell-v2 .mission-center-main .task-board-head-titles .eyebrow,
body.app-shell-v2 .mission-center-main .task-board-stats {
  display: none;
}

body.app-shell-v2 .mission-center-main .task-board-head-titles h3 {
  margin-bottom: 2px;
  font-size: 18px;
}

body.app-shell-v2 .mission-center-main .task-board-head-titles p {
  font-size: 12.5px;
}

body.app-shell-v2 .mission-center-main .task-board-new-button {
  padding: 8px 12px;
  min-height: 34px;
  font-size: 12px;
}

body.app-shell-v2 .mission-center-main .task-board-kanban {
  gap: 10px;
}

body.app-shell-v2 .mission-center-main .task-board-col {
  min-width: 220px;
  padding: 10px;
  border-radius: 10px;
}

body.app-shell-v2 .mission-center-main .task-board-col-header {
  margin-bottom: 8px;
  padding-bottom: 6px;
}

body.app-shell-v2 .mission-center-main .task-card {
  padding: 10px;
  border-radius: 9px;
}

body.app-shell-v2 .mission-center-main .task-card-title {
  font-size: 13px;
}

body.app-shell-v2 .mission-center-main .task-card-meta,
body.app-shell-v2 .mission-center-main .task-card-footer {
  font-size: 11px;
}

body.app-shell-v2 .mission-center-main .task-card-actions {
  gap: 6px;
}

body.app-shell-v2 .mission-center-main .task-card-actions .task-status-select {
  min-height: 30px;
  font-size: 11.5px;
}

body.app-shell-v2 .mission-center-main .task-create-details {
  margin-top: 10px;
}

body.app-shell-v2 .mission-secondary-grid {
  gap: 12px;
}

body.app-shell-v2 .mission-secondary-panel {
  padding: 14px;
  border-radius: 12px;
}

body.app-shell-v2 .mission-secondary-panel .section-title-row {
  margin-bottom: 10px;
}

body.app-shell-v2 .mission-secondary-panel .section-title-row h3 {
  font-size: 16px;
}

body.app-shell-v2 .mission-secondary-panel .section-title-row p {
  font-size: 12px;
}

body.app-shell-v2 .mission-secondary-panel .team-member-list,
body.app-shell-v2 .mission-links-panel .workspace-link-grid {
  gap: 8px;
}

body.app-shell-v2 .mission-secondary-panel .team-member-card {
  padding: 9px 10px;
  border-radius: 10px;
}

body.app-shell-v2 .mission-links-panel .workspace-link-card {
  min-height: 48px;
  padding: 8px 10px;
  border-radius: 9px;
}

body.app-shell-v2 .mission-role-context,
body.app-shell-v2 .mission-chat-row .quick-team-chat-card,
body.app-shell-v2 .recommended-members-panel {
  padding: 12px;
  border-radius: 12px;
  box-shadow: none;
}

body.app-shell-v2 .mission-role-context .team-context-block {
  gap: 10px;
}

body.app-shell-v2 .mission-chat-row .quick-team-chat-header h3,
body.app-shell-v2 .recommended-members-panel .section-title-row h3 {
  font-size: 15px;
}

body.app-shell-v2 .mission-chat-row .quick-team-chat-messages {
  max-height: 132px;
}

html[data-theme="dark"] body.app-shell-v2 .mission-readiness-badge {
  background:
    radial-gradient(circle at center, var(--w2g-surface, #141820) 58%, transparent 59%),
    conic-gradient(var(--w2g-orange, #f97316) var(--mission-readiness, 0%), rgba(255, 255, 255, 0.12) 0);
  border-color: var(--w2g-line, rgba(255, 255, 255, 0.14));
}

@media (max-width: 900px) {
  body.app-shell-v2 .mission-center-header .team-snapshot-title-row,
  body.app-shell-v2 .mission-center-header .mission-preview-metrics {
    grid-template-columns: auto minmax(0, 1fr);
  }

  body.app-shell-v2 .mission-center-header .team-snapshot-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  body.app-shell-v2 .mission-center-header .mission-preview-next {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  body.app-shell-v2 .mission-center-header .team-snapshot-title-row,
  body.app-shell-v2 .mission-center-header .mission-preview-metrics {
    grid-template-columns: 1fr;
  }

  body.app-shell-v2 .mission-readiness-badge {
    width: 68px;
    height: 68px;
  }

  body.app-shell-v2 .mission-center-main .task-board-kanban {
    grid-auto-columns: minmax(238px, 82vw);
  }
}

/* Mission Center core parity v4: compact header + reference-like task board */
body.app-shell-v2 .mission-center-header {
  grid-template-columns: minmax(0, 1fr);
  padding: 10px 12px;
  background: var(--w2g-surface, #fff);
}

body.app-shell-v2 .mission-center-header::before,
body.app-shell-v2 .mission-center-header::after {
  content: none !important;
}

body.app-shell-v2 .mission-center-header .team-snapshot-title-row {
  grid-template-columns: 38px minmax(0, 1fr) auto;
}

body.app-shell-v2 .mission-center-header .team-snapshot-title-copy h3 {
  font-size: 18px;
}

body.app-shell-v2 .mission-center-header .team-snapshot-title-copy p {
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.app-shell-v2 .mission-header-status {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 280px;
}

body.app-shell-v2 .mission-readiness-compact {
  display: grid;
  grid-template-columns: 48px minmax(0, 150px);
  align-items: center;
  gap: 8px;
}

body.app-shell-v2 .mission-readiness-compact .mission-readiness-badge {
  width: 48px;
  height: 48px;
}

body.app-shell-v2 .mission-readiness-compact .mission-readiness-badge strong {
  margin: 0;
  font-size: 16px;
}

body.app-shell-v2 .mission-readiness-copy {
  display: grid;
  gap: 2px;
}

body.app-shell-v2 .mission-readiness-copy strong {
  font-size: 12px;
  line-height: 1.1;
  color: var(--w2g-ink, var(--ink));
}

body.app-shell-v2 .mission-readiness-copy span {
  font-size: 10.5px;
  line-height: 1.2;
  color: var(--w2g-muted, var(--muted));
}

body.app-shell-v2 .mission-center-header .member-role-pill {
  min-height: 24px;
  padding: 4px 8px;
  font-size: 10.5px;
  border-radius: 999px;
}

body.app-shell-v2 .mission-critical-stats .team-snapshot-stat {
  min-height: 66px;
  padding: 8px 10px;
}

body.app-shell-v2 .mission-critical-stats .team-snapshot-stat strong {
  font-size: 18px;
}

body.app-shell-v2 .mission-center-main > .workspace-tasks-v2,
body.app-shell-v2 .mission-center-main .mission-compact-expanded > .workspace-tasks-v2 {
  padding: 12px;
}

body.app-shell-v2 .mission-center-main .task-board-head {
  align-items: center;
  margin-bottom: 8px;
}

body.app-shell-v2 .mission-center-main .task-board-head-titles h3 {
  font-size: 17px;
}

body.app-shell-v2 .mission-center-main .task-board-head-titles p {
  font-size: 12px;
}

body.app-shell-v2 .mission-center-main .task-board-new-button {
  border-radius: 8px;
}

body.app-shell-v2 .mission-center-main .task-board-kanban {
  align-items: start;
}

body.app-shell-v2 .mission-center-main .task-board-col {
  min-height: 0;
  padding: 9px;
}

body.app-shell-v2 .mission-center-main .task-board-col-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
}

body.app-shell-v2 .mission-center-main .task-board-col-header::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--w2g-muted, #64748b);
}

body.app-shell-v2 .mission-center-main .task-board-col--todo .task-board-col-header::before {
  background: #64748b;
}

body.app-shell-v2 .mission-center-main .task-board-col--doing .task-board-col-header::before {
  background: #2563eb;
}

body.app-shell-v2 .mission-center-main .task-board-col--blocked .task-board-col-header::before {
  background: #dc2626;
}

body.app-shell-v2 .mission-center-main .task-board-col--done .task-board-col-header::before {
  background: #16a34a;
}

body.app-shell-v2 .mission-center-main .task-board-col-name {
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0;
}

body.app-shell-v2 .mission-center-main .task-board-col-count {
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  font-size: 11px;
}

body.app-shell-v2 .mission-center-main .task-board-col-body {
  gap: 8px;
}

body.app-shell-v2 .mission-center-main .task-card {
  padding: 9px;
}

body.app-shell-v2 .mission-center-main .task-card-footer {
  gap: 5px;
}

body.app-shell-v2 .mission-center-main .task-card-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

body.app-shell-v2 .mission-center-main .task-action-button {
  min-height: 28px;
  padding: 5px 8px;
  border-radius: 7px;
  font-size: 11px;
}

body.app-shell-v2 .mission-center-main .task-action-button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

body.app-shell-v2 .mission-center-main .task-create-details {
  border-radius: 9px;
}

body.app-shell-v2 .mission-center-main .task-create-details summary {
  min-height: 34px;
  padding: 7px 9px;
  font-size: 12px;
}

body.app-shell-v2 .mission-center-main .task-form-grid--extended {
  gap: 8px;
  padding-top: 8px;
}

body.app-shell-v2 .mission-center-main .task-form-grid--extended label span {
  font-size: 11px;
}

body.app-shell-v2 .mission-center-main .task-form-grid--extended input,
body.app-shell-v2 .mission-center-main .task-form-grid--extended select {
  min-height: 34px;
  padding: 7px 9px;
  font-size: 12px;
}

.task-due-date-helper {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.35;
}

.task-due-date-helper.is-error {
  color: var(--status-danger-fg, #b42121);
}

body.app-shell-v2 .mission-owner-controls-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px solid var(--w2g-line, var(--line));
  border-radius: 9px;
  background: color-mix(in srgb, var(--w2g-surface, #fff) 92%, var(--w2g-orange, #f97316));
  font-size: 12px;
}

body.app-shell-v2 .mission-owner-controls-note strong {
  color: var(--w2g-ink, var(--ink));
}

body.app-shell-v2 .mission-owner-controls-note span {
  color: var(--w2g-muted, var(--muted));
}

html[data-theme="dark"] body.app-shell-v2 .mission-center-header {
  background: var(--w2g-surface, #141820);
}

html[data-theme="dark"] body.app-shell-v2 .mission-owner-controls-note {
  background: rgba(249, 115, 22, 0.08);
  border-color: var(--w2g-line, rgba(255, 255, 255, 0.14));
}

@media (max-width: 900px) {
  body.app-shell-v2 .mission-header-status {
    grid-column: 1 / -1;
    justify-content: flex-start;
    min-width: 0;
  }
}

@media (max-width: 520px) {
  body.app-shell-v2 .mission-header-status,
  body.app-shell-v2 .mission-owner-controls-note {
    align-items: flex-start;
    flex-direction: column;
  }

  body.app-shell-v2 .mission-readiness-compact {
    grid-template-columns: 48px minmax(0, 1fr);
  }
}

/* Mission Center composition parity v5: visual hierarchy + density */
body.app-shell-v2 #team > .section-title-row {
  margin-bottom: 8px;
}

body.app-shell-v2 #team > .section-title-row .eyebrow {
  display: inline-block;
  margin: 0 0 4px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--w2g-muted, var(--muted));
  font-size: 11px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: 0.11em;
}

body.app-shell-v2 #team > .section-title-row h1 {
  margin: 0 0 2px;
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1.08;
}

body.app-shell-v2 #team > .section-title-row .muted {
  margin-top: 0;
  max-width: 760px;
  font-size: 13px;
}

body.app-shell-v2 .mission-center-main {
  gap: 10px;
}

body.app-shell-v2 .mission-center-header {
  padding: 9px 11px;
  border-radius: 10px;
  border-color: var(--w2g-line-strong, var(--line));
  background: var(--w2g-surface, #fff);
  box-shadow: none;
}

body.app-shell-v2 .mission-center-header .team-snapshot-title-row {
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 9px;
}

body.app-shell-v2 .mission-center-header .avatar,
body.app-shell-v2 .mission-center-header .member-avatar {
  width: 36px;
  height: 36px;
  min-width: 36px;
}

body.app-shell-v2 .mission-center-header .team-snapshot-title-copy h3 {
  font-size: 17px;
}

body.app-shell-v2 .mission-center-header .team-snapshot-title-copy p {
  color: var(--w2g-muted, var(--muted));
}

body.app-shell-v2 .mission-readiness-compact {
  grid-template-columns: 42px minmax(0, 138px);
  gap: 7px;
}

body.app-shell-v2 .mission-readiness-compact .mission-readiness-badge {
  width: 42px;
  height: 42px;
  background:
    radial-gradient(circle at center, var(--w2g-surface, #fff) 60%, transparent 61%),
    conic-gradient(var(--w2g-orange, #f97316) var(--mission-readiness, 0%), color-mix(in srgb, var(--w2g-line, #e5e7eb) 80%, transparent) 0);
}

body.app-shell-v2 .mission-readiness-compact .mission-readiness-badge strong {
  font-size: 14px;
}

body.app-shell-v2 .mission-readiness-copy strong {
  font-size: 11.5px;
}

body.app-shell-v2 .mission-readiness-copy span {
  font-size: 10px;
}

body.app-shell-v2 .mission-critical-stats {
  gap: 7px;
}

body.app-shell-v2 .mission-critical-stats .team-snapshot-stat {
  min-height: 58px;
  padding: 7px 9px;
  border-radius: 9px;
}

body.app-shell-v2 .mission-critical-stats .team-snapshot-stat span,
body.app-shell-v2 .mission-critical-stats .team-snapshot-stat small {
  font-size: 10.5px;
}

body.app-shell-v2 .mission-critical-stats .team-snapshot-stat strong {
  font-size: 17px;
}

body.app-shell-v2 .mission-center-main > .workspace-tasks-v2,
body.app-shell-v2 .mission-center-main .mission-compact-expanded > .workspace-tasks-v2 {
  padding: 10px;
  border-radius: 10px;
  border-color: var(--w2g-line-strong, var(--line));
  box-shadow: none;
}

body.app-shell-v2 .mission-center-main .task-board-head {
  margin-bottom: 7px;
}

body.app-shell-v2 .mission-center-main .task-board-head-titles h3 {
  font-size: 16px;
}

body.app-shell-v2 .mission-center-main .task-board-head-titles p {
  font-size: 11.5px;
}

body.app-shell-v2 .mission-center-main .task-board-new-button {
  min-height: 32px;
  padding: 7px 10px;
}

body.app-shell-v2 .mission-center-main .task-board-kanban {
  gap: 8px;
}

body.app-shell-v2 .mission-center-main .task-board-col {
  min-width: 210px;
  padding: 8px;
  border-radius: 9px;
}

body.app-shell-v2 .mission-center-main .task-board-col-header {
  margin-bottom: 6px;
  padding-bottom: 5px;
}

body.app-shell-v2 .mission-center-main .task-board-col-body {
  gap: 7px;
  min-height: 0;
}

body.app-shell-v2 .mission-center-main .task-board-empty {
  min-height: 44px;
  padding: 8px;
  border-radius: 8px;
  font-size: 11px;
}

body.app-shell-v2 .mission-center-main .task-card {
  padding: 8px;
  border-radius: 8px;
}

body.app-shell-v2 .mission-center-main .task-card-title {
  font-size: 12.5px;
}

body.app-shell-v2 .mission-center-main .task-card-meta,
body.app-shell-v2 .mission-center-main .task-card-footer {
  font-size: 10.5px;
}

body.app-shell-v2 .mission-center-main .task-create-details {
  margin-top: 8px;
  border-radius: 8px;
}

body.app-shell-v2 .mission-center-main .task-create-details:not([open]) .task-create-summary-hint {
  display: none;
}

body.app-shell-v2 .mission-center-main .task-create-details summary {
  min-height: 30px;
  padding: 6px 8px;
}

body.app-shell-v2 .mission-owner-controls-note {
  margin-top: 8px;
  padding: 7px 9px;
}

body.app-shell-v2 .mission-secondary-grid {
  margin-top: 0;
  gap: 10px;
}

body.app-shell-v2 .mission-secondary-panel {
  padding: 11px;
  border-radius: 10px;
  box-shadow: none;
}

body.app-shell-v2 .mission-secondary-panel .section-title-row {
  margin-bottom: 8px;
}

body.app-shell-v2 .mission-secondary-panel .team-member-card,
body.app-shell-v2 .mission-links-panel .workspace-link-card {
  padding: 8px;
}

html[data-theme="dark"] body.app-shell-v2 .mission-readiness-compact .mission-readiness-badge {
  background:
    radial-gradient(circle at center, var(--w2g-surface, #141820) 60%, transparent 61%),
    conic-gradient(var(--w2g-orange, #f97316) var(--mission-readiness, 0%), rgba(255, 255, 255, 0.1) 0);
}

@media (max-width: 760px) {
  body.app-shell-v2 #team > .section-title-row .eyebrow {
    font-size: 10.5px;
  }

  body.app-shell-v2 .mission-center-main {
    gap: 9px;
  }

  body.app-shell-v2 .mission-center-main .task-board-kanban {
    grid-auto-columns: minmax(224px, 80vw);
  }
}

/* Mission Center Design v2 handoff compliance: core command surface only */
body.app-shell-v2 {
  --mission-center-max: 1180px;
}

body.app-shell-v2 #team > .section-title-row,
body.app-shell-v2 .mission-center-main {
  width: min(100%, var(--mission-center-max));
  max-width: var(--mission-center-max);
  margin-left: auto;
  margin-right: auto;
}

body.app-shell-v2 #team > .section-title-row {
  margin-bottom: 12px;
}

body.app-shell-v2 #team > .section-title-row .eyebrow {
  color: var(--muted);
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

body.app-shell-v2 #team > .section-title-row h1 {
  font-size: var(--text-h1, 26px);
  line-height: var(--lead-tight, 1.18);
  letter-spacing: var(--track-tight, -0.02em);
}

body.app-shell-v2 .mission-center-main {
  gap: 12px;
}

body.app-shell-v2 .mission-center-header {
  min-height: 72px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg, 14px);
  background: var(--surface);
  box-shadow: var(--sh-sm);
}

body.app-shell-v2 .mission-center-header,
body.app-shell-v2 .mission-center-header::before,
body.app-shell-v2 .mission-center-header::after {
  background-image: none;
  filter: none;
}

body.app-shell-v2 .mission-center-header .team-snapshot-title-row {
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

body.app-shell-v2 .mission-center-header .avatar,
body.app-shell-v2 .mission-center-header .member-avatar {
  width: 40px;
  height: 40px;
  min-width: 40px;
}

body.app-shell-v2 .mission-center-header .team-snapshot-title-copy h3 {
  font-size: var(--text-h3, 16px);
}

body.app-shell-v2 .mission-center-header .team-snapshot-title-copy p {
  color: var(--muted);
  font-size: var(--text-xs, 11.5px);
}

body.app-shell-v2 .mission-header-status {
  display: flex;
  align-items: center;
  gap: 10px;
}

body.app-shell-v2 .mission-readiness-compact {
  display: grid;
  grid-template-columns: 42px minmax(118px, 160px);
  align-items: center;
  gap: 8px;
}

body.app-shell-v2 .mission-readiness-compact .mission-readiness-badge {
  width: 42px;
  height: 42px;
  color: var(--ink);
  background:
    radial-gradient(circle at center, var(--surface) 59%, transparent 60%),
    conic-gradient(var(--mission-readiness-color, var(--match-strong)) var(--mission-readiness, 0%), var(--match-track) 0);
}

html[data-theme="dark"] body.app-shell-v2 .mission-readiness-compact .mission-readiness-badge {
  background:
    radial-gradient(circle at center, var(--surface) 59%, transparent 60%),
    conic-gradient(var(--mission-readiness-color, var(--match-strong)) var(--mission-readiness, 0%), var(--match-track) 0);
}

body.app-shell-v2 .mission-critical-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

body.app-shell-v2 .mission-critical-stats .team-snapshot-stat {
  min-height: 64px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md, 12px);
  background: var(--surface);
  box-shadow: var(--sh-sm);
}

body.app-shell-v2 .mission-critical-stats .team-snapshot-stat strong {
  font-size: 18px;
}

body.app-shell-v2 .mission-center-main > .workspace-tasks-v2,
body.app-shell-v2 .mission-center-main .mission-compact-expanded > .workspace-tasks-v2,
body.app-shell-v2 .mission-secondary-panel {
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--sh-sm);
}

body.app-shell-v2 .mission-center-main > .workspace-tasks-v2,
body.app-shell-v2 .mission-center-main .mission-compact-expanded > .workspace-tasks-v2 {
  padding: 14px;
  border-radius: var(--r-lg, 14px);
}

body.app-shell-v2 .mission-center-main .task-board-head {
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

body.app-shell-v2 .mission-center-main .task-board-head-titles .eyebrow {
  display: none;
}

body.app-shell-v2 .mission-center-main .task-board-head-titles h3 {
  font-size: var(--text-h3, 16px);
}

body.app-shell-v2 .mission-center-main .task-board-head-titles p {
  max-width: 68ch;
  color: var(--muted);
}

body.app-shell-v2 .mission-center-main .mission-next-task-card {
  display: none;
  margin-bottom: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-lg, 14px);
  background: var(--surface);
  box-shadow: var(--sh-sm);
}

body.app-shell-v2 .mission-center-main .mission-next-task-card .section-title-row {
  margin-bottom: 8px;
}

body.app-shell-v2 .mission-center-main .task-board-scroll-cue {
  display: none;
  margin: -2px 0 8px;
  color: var(--muted);
  font-size: var(--text-xs, 11.5px);
  font-weight: 700;
}

body.app-shell-v2 .mission-center-main .task-board-kanban {
  gap: 10px;
}

body.app-shell-v2 .mission-center-main .task-board-col {
  min-width: 0;
  min-height: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-md, 12px);
  background: var(--surface-2);
}

body.app-shell-v2 .mission-center-main .task-board-col-body {
  min-height: 0;
  gap: 8px;
}

body.app-shell-v2 .mission-center-main .task-card {
  padding: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: none;
}

body.app-shell-v2 .mission-center-main .task-card.is-overdue:not([data-task-status="blocked"]):not([data-task-status="done"]) {
  background: rgba(127, 29, 29, 0.22) !important;
  border-color: rgba(248, 113, 113, 0.45) !important;
}

body.app-shell-v2 .mission-center-main .task-card-actions {
  gap: 6px;
}

body.app-shell-v2 .mission-center-main .task-create-details {
  margin-top: 2px;
  border: 1px dashed var(--line-strong);
  background: transparent;
  box-shadow: none;
}

body.app-shell-v2 .mission-center-main .task-create-details[open] {
  background: var(--surface);
}

body.app-shell-v2 .mission-center-main .task-create-details summary {
  color: var(--muted);
}

body.app-shell-v2 .mission-center-main .task-create-actions {
  justify-content: flex-end;
  margin-top: 10px;
}

body.app-shell-v2 .mission-owner-controls-note {
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--muted);
}

body.app-shell-v2 .mission-secondary-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.9fr);
  gap: 12px;
  margin-top: 0;
}

body.app-shell-v2 .mission-secondary-panel {
  padding: 14px;
  border-radius: var(--r-lg, 14px);
}

body.app-shell-v2 .mission-secondary-panel .section-title-row {
  align-items: center;
  margin-bottom: 10px;
}

body.app-shell-v2 .mission-secondary-panel .team-member-card,
body.app-shell-v2 .mission-links-panel .workspace-link-card {
  padding: 9px 10px;
  border-color: var(--line);
  background: var(--surface-2);
}

@media (max-width: 980px) {
  body.app-shell-v2 .mission-critical-stats,
  body.app-shell-v2 .mission-secondary-grid {
    grid-template-columns: 1fr 1fr;
  }

  body.app-shell-v2 .mission-center-main .task-board-kanban {
    display: grid;
    grid-auto-flow: column;
    overflow-x: auto;
    grid-auto-columns: minmax(230px, 42vw);
    grid-template-columns: none;
  }

  body.app-shell-v2 .mission-center-main .task-board-scroll-cue {
    display: block;
  }
}

@media (max-width: 900px) {
  body.app-shell-v2 .mission-center-main .mission-next-task-card {
    display: block;
  }
}

@media (max-width: 640px) {
  body.app-shell-v2 .mission-center-header .team-snapshot-title-row {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  body.app-shell-v2 .mission-header-status {
    grid-column: 1 / -1;
    width: 100%;
    justify-content: space-between;
  }

  body.app-shell-v2 .mission-critical-stats,
  body.app-shell-v2 .mission-secondary-grid {
    grid-template-columns: 1fr;
  }

  body.app-shell-v2 .mission-center-main .task-board-kanban {
    grid-auto-columns: minmax(236px, 86vw);
  }

  body.app-shell-v2 .mission-center-main .task-action-button,
  body.app-shell-v2 .mission-center-main .task-card-actions .task-status-select,
  body.app-shell-v2 .mission-center-main .my-next-task-detail .task-status-select {
    min-height: 38px;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  body.app-shell-v2 .mission-center-main .task-action-button {
    padding-left: 11px;
    padding-right: 11px;
  }
}

/* Mission Center typography + contrast cleanup */
body.app-shell-v2 .mission-center-layout,
body.app-shell-v2 .mission-center-layout * {
  text-shadow: none;
}

body.app-shell-v2 .mission-center-header {
  background: var(--surface) !important;
  background-image: none !important;
  border-color: var(--line-strong);
  box-shadow: var(--sh-sm);
  filter: none;
  backdrop-filter: none;
}

body.app-shell-v2 .mission-center-header::before,
body.app-shell-v2 .mission-center-header::after {
  content: none;
}

body.app-shell-v2 .mission-center-header .team-snapshot-title-copy h3 {
  color: var(--ink);
  font-weight: 700;
}

body.app-shell-v2 .mission-center-header .team-snapshot-title-copy p {
  color: var(--body);
  font-weight: 400;
}

body.app-shell-v2 .mission-center-header .member-role-pill {
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--body);
  font-weight: 600;
}

body.app-shell-v2 .mission-readiness-copy strong {
  color: var(--ink);
  font-weight: 600;
}

body.app-shell-v2 .mission-readiness-copy span {
  color: var(--body);
  font-weight: 400;
}

body.app-shell-v2 .mission-critical-stats .team-snapshot-stat {
  border-color: var(--line-strong);
}

body.app-shell-v2 .mission-critical-stats .team-snapshot-stat span {
  color: var(--body);
  font-weight: 500;
}

body.app-shell-v2 .mission-critical-stats .team-snapshot-stat strong {
  color: var(--ink);
  font-weight: 700;
}

body.app-shell-v2 .mission-critical-stats .team-snapshot-stat small {
  color: var(--body);
  font-weight: 400;
}

body.app-shell-v2 .mission-center-main .task-board-head-titles h3 {
  color: var(--ink);
  font-weight: 700;
}

body.app-shell-v2 .mission-center-main .task-board-head-titles p {
  color: var(--body);
  font-weight: 400;
}

body.app-shell-v2 .mission-center-main .task-board-col {
  border-color: var(--line-strong);
}

body.app-shell-v2 .mission-center-main .task-board-col-header {
  color: var(--ink);
  border-bottom-color: var(--line);
}

body.app-shell-v2 .mission-center-main .task-board-col-name {
  color: var(--ink) !important;
  font-weight: 600;
  text-transform: none;
}

body.app-shell-v2 .mission-center-main .task-board-col-count {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--body);
  font-weight: 600;
}

body.app-shell-v2 .mission-center-main .task-board-col-header::before {
  box-shadow: none;
}

body.app-shell-v2 .mission-center-main .task-board-col--todo .task-board-col-header,
body.app-shell-v2 .mission-center-main .task-board-col--doing .task-board-col-header,
body.app-shell-v2 .mission-center-main .task-board-col--blocked .task-board-col-header,
body.app-shell-v2 .mission-center-main .task-board-col--done .task-board-col-header {
  color: var(--ink);
}

body.app-shell-v2 .mission-center-main .task-board-empty {
  color: var(--body);
  font-weight: 400;
  background: var(--surface);
  border: 1px dashed var(--line);
}

body.app-shell-v2 .mission-center-main .task-card {
  border-color: var(--line-strong);
}

body.app-shell-v2 .mission-center-main .task-card-title {
  color: var(--ink);
  font-weight: 700;
}

body.app-shell-v2 .mission-center-main .task-card-meta,
body.app-shell-v2 .mission-center-main .task-card-footer {
  color: var(--body);
  font-weight: 400;
}

body.app-shell-v2 .mission-center-main .mission-task-create-form {
  margin-top: 10px;
}

body.app-shell-v2 .mission-center-main .mission-task-create-form[hidden] {
  display: none;
}

body.app-shell-v2 .mission-owner-controls-note {
  background: var(--surface-2);
  border-color: var(--line-strong);
}

body.app-shell-v2 .mission-owner-controls-note strong {
  color: var(--ink);
  font-weight: 600;
}

body.app-shell-v2 .mission-owner-controls-note span {
  color: var(--body);
  font-weight: 400;
}

html[data-theme="dark"] body.app-shell-v2 .mission-center-header,
html[data-theme="dark"] body.app-shell-v2 .mission-center-main .task-board-empty,
html[data-theme="dark"] body.app-shell-v2 .mission-center-main .task-board-col-count {
  background: var(--surface);
}

/* Owner Team Settings MVP: Mission Center entry + modal */
body.app-shell-v2 .mission-team-settings-button {
  min-height: 30px;
  padding: 6px 10px;
  border-radius: var(--r-sm, 8px);
  font-size: var(--text-xs, 11.5px);
  font-weight: 600;
  white-space: nowrap;
}

body.app-shell-v2 #modalOverlay.team-settings-modal .modal-card {
  width: min(820px, calc(100vw - 32px));
  max-height: min(860px, calc(100vh - 48px));
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--sh-lg);
}

body.app-shell-v2 #modalOverlay.team-settings-modal .modal-body {
  padding-top: 12px;
}

body.app-shell-v2 .team-settings-mvp {
  display: grid;
  gap: 12px;
}

body.app-shell-v2 .team-settings-section {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg, 14px);
  background: var(--surface-2);
}

body.app-shell-v2 .team-settings-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

body.app-shell-v2 .team-settings-section-head h3 {
  margin: 0 0 2px;
  color: var(--ink);
  font-size: var(--text-h3, 16px);
}

body.app-shell-v2 .team-settings-section-head p {
  margin: 0;
  font-size: var(--text-xs, 11.5px);
}

body.app-shell-v2 .team-settings-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

body.app-shell-v2 .team-settings-field-row,
body.app-shell-v2 .team-settings-copy-block,
body.app-shell-v2 .team-settings-member-row,
body.app-shell-v2 .team-settings-link-row,
body.app-shell-v2 .team-settings-rules-copy {
  border: 1px solid var(--line);
  border-radius: var(--r-md, 12px);
  background: var(--surface);
}

body.app-shell-v2 .team-settings-field-row,
body.app-shell-v2 .team-settings-copy-block {
  padding: 10px 12px;
}

body.app-shell-v2 .team-settings-field-row span,
body.app-shell-v2 .team-settings-copy-block strong {
  display: block;
  color: var(--muted);
  font-size: var(--text-xs, 11.5px);
  font-weight: 700;
}

body.app-shell-v2 .team-settings-field-row strong {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  font-size: var(--text-sm, 13px);
}

body.app-shell-v2 .team-settings-copy-block p,
body.app-shell-v2 .team-settings-rules-copy {
  margin: 3px 0 0;
  color: var(--body);
  font-size: var(--text-sm, 13px);
  line-height: 1.45;
}

body.app-shell-v2 .team-settings-member-list,
body.app-shell-v2 .team-settings-link-list {
  display: grid;
  gap: 8px;
}

body.app-shell-v2 .team-settings-member-row,
body.app-shell-v2 .team-settings-link-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
}

body.app-shell-v2 .team-settings-member-row strong,
body.app-shell-v2 .team-settings-link-row strong {
  color: var(--ink);
  font-size: var(--text-sm, 13px);
}

body.app-shell-v2 .team-settings-member-row p,
body.app-shell-v2 .team-settings-link-row p {
  margin: 1px 0 0;
  overflow-wrap: anywhere;
  font-size: var(--text-xs, 11.5px);
}

body.app-shell-v2 .team-settings-member-actions {
  display: flex;
  justify-content: flex-end;
}

body.app-shell-v2 .team-settings-rules-copy {
  padding: 10px 12px;
}

body.app-shell-v2 .team-settings-danger-zone {
  border-color: color-mix(in srgb, var(--danger, #ef4444) 35%, var(--line));
  background: color-mix(in srgb, var(--surface-2) 92%, var(--danger, #ef4444));
}

html[data-theme="dark"] body.app-shell-v2 .team-settings-danger-zone {
  background: rgba(239, 68, 68, 0.07);
}

@media (max-width: 640px) {
  body.app-shell-v2 #modalOverlay.team-settings-modal .modal-card {
    width: min(100vw - 18px, 820px);
    max-height: calc(100vh - 24px);
  }

  body.app-shell-v2 .team-settings-section-head {
    display: grid;
  }

  body.app-shell-v2 .team-settings-section-head .button {
    width: 100%;
    justify-content: center;
  }

  body.app-shell-v2 .team-settings-field-grid {
    grid-template-columns: 1fr;
  }

  body.app-shell-v2 .team-settings-member-row,
  body.app-shell-v2 .team-settings-link-row {
    grid-template-columns: 36px minmax(0, 1fr);
  }

  body.app-shell-v2 .team-settings-member-actions,
  body.app-shell-v2 .team-settings-link-row > .button {
    grid-column: 2;
    justify-content: flex-start;
  }
}

/* Mission Center secondary panels: compact members + workspace links */
body.app-shell-v2 .mission-secondary-grid {
  align-items: start;
}

body.app-shell-v2 .mission-secondary-panel {
  min-height: 0;
  padding: 14px;
}

body.app-shell-v2 .mission-secondary-panel .section-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

body.app-shell-v2 .mission-secondary-panel .section-title-row h3 {
  color: var(--ink);
  font-size: var(--text-h3, 16px);
  font-weight: 700;
  line-height: 1.25;
}

body.app-shell-v2 .mission-secondary-panel .section-title-row p {
  margin-top: 3px;
  color: var(--body);
  font-size: var(--text-xs, 11.5px);
  font-weight: 400;
  line-height: 1.35;
}

body.app-shell-v2 .mission-secondary-panel .team-member-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--line);
}

body.app-shell-v2 .mission-secondary-panel .team-member-card {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 0;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.app-shell-v2 .mission-secondary-panel .team-member-card:hover,
body.app-shell-v2 .mission-secondary-panel .team-member-card:focus-visible {
  background: transparent;
  box-shadow: none;
}

body.app-shell-v2 .mission-secondary-panel .team-member-card .avatar,
body.app-shell-v2 .mission-secondary-panel .team-member-card .member-avatar {
  width: 32px;
  height: 32px;
  min-width: 32px;
  font-size: 11px;
}

body.app-shell-v2 .mission-secondary-panel .team-member-copy strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
}

body.app-shell-v2 .mission-secondary-panel .team-member-copy p {
  margin-top: 2px;
  color: var(--body);
  font-size: var(--text-xs, 11.5px);
  font-weight: 400;
  line-height: 1.3;
}

body.app-shell-v2 .mission-secondary-panel .team-member-view-hint {
  display: none;
}

body.app-shell-v2 .mission-secondary-panel .team-member-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
}

body.app-shell-v2 .mission-secondary-panel .team-member-meta small {
  display: none;
}

body.app-shell-v2 .mission-secondary-panel .team-member-meta .member-role-pill,
body.app-shell-v2 .mission-secondary-panel .team-member-actions .button {
  min-height: 24px;
  padding: 3px 8px;
  border-radius: var(--r-pill, 999px);
  font-size: 11px;
  font-weight: 600;
}

body.app-shell-v2 .mission-secondary-panel .team-member-actions {
  grid-column: 3;
  justify-self: end;
}

body.app-shell-v2 .mission-links-panel .mission-workspace-links-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--line);
}

body.app-shell-v2 .mission-links-panel .workspace-link-card {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  min-height: 0;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.app-shell-v2 .mission-links-panel .workspace-link-card:hover,
body.app-shell-v2 .mission-links-panel .workspace-link-card:focus-visible {
  background: var(--surface-2);
  box-shadow: none;
}

body.app-shell-v2 .mission-links-panel .workspace-link-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--r-xs, 8px);
  background: var(--surface-2);
  border: 1px solid var(--line);
}

body.app-shell-v2 .mission-links-panel .workspace-link-card strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
}

body.app-shell-v2 .mission-links-panel .workspace-link-card small {
  color: var(--body);
  font-size: var(--text-xs, 11.5px);
  font-weight: 400;
  line-height: 1.3;
}

body.app-shell-v2 .mission-links-panel .workspace-link-open {
  color: var(--muted);
  font-size: 14px;
}

body.app-shell-v2 .mission-workspace-empty {
  margin-top: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: transparent;
}

body.app-shell-v2 .mission-workspace-empty strong {
  display: block;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
}

body.app-shell-v2 .mission-workspace-empty p {
  margin: 3px 0 0;
  color: var(--body);
  font-size: var(--text-xs, 11.5px);
  font-weight: 400;
  line-height: 1.4;
}

body.app-shell-v2 .mission-link-footer {
  margin-top: 10px;
}

body.app-shell-v2 .mission-add-link-button {
  width: 100%;
  justify-content: center;
}

body.app-shell-v2 .mission-link-owner-note {
  display: block;
  color: var(--body);
  font-size: var(--text-xs, 11.5px);
  line-height: 1.35;
}

@media (max-width: 640px) {
  body.app-shell-v2 .mission-secondary-panel .team-member-card {
    grid-template-columns: 32px minmax(0, 1fr);
  }

  body.app-shell-v2 .mission-secondary-panel .team-member-meta,
  body.app-shell-v2 .mission-secondary-panel .team-member-actions {
    grid-column: 2;
    justify-self: start;
    margin-top: 4px;
  }
}

/* Mission Center divider removal hotfix: keep page title as simple text */
body.app-shell-v2 #team > .section-title-row {
  display: flex;
  width: min(100%, var(--mission-center-max, 1180px));
  max-width: var(--mission-center-max, 1180px);
  margin: 0 auto 12px;
  padding: 0;
  border: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  border-radius: 0;
  background: transparent;
  box-shadow: none !important;
}

body.app-shell-v2 #team > .section-title-row,
body.app-shell-v2 #team > .section-title-row::before,
body.app-shell-v2 #team > .section-title-row::after,
body.app-shell-v2 #team > .section-title-row > div,
body.app-shell-v2 #team > .section-title-row > div::before,
body.app-shell-v2 #team > .section-title-row > div::after {
  border-top: 0 !important;
  border-bottom: 0 !important;
  background: transparent;
  background-image: none !important;
  box-shadow: none !important;
}

body.app-shell-v2 #team > .section-title-row .eyebrow {
  display: block;
  margin: 0 0 6px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: var(--text-eyebrow, 11px);
  font-weight: 600;
  letter-spacing: var(--track-eyebrow, 0.12em);
  line-height: 1.2;
  text-transform: uppercase;
}

body.app-shell-v2 #team > .section-title-row h1 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(24px, 2vw, 28px);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: var(--track-tight, -0.02em);
}

body.app-shell-v2 #team > .section-title-row .muted {
  max-width: 68ch;
  margin: 6px 0 0;
  color: var(--body);
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.45;
}

@media (max-width: 640px) {
  body.app-shell-v2 #team > .section-title-row {
    padding: 0;
    margin-bottom: 10px;
  }

  body.app-shell-v2 #team > .section-title-row h1 {
    font-size: 24px;
  }

  body.app-shell-v2 #team .section-title-row,
  body.app-shell-v2 #team > .section-title-row {
    border-top: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
  }

  body.app-shell-v2 #team .section-title-row::before,
  body.app-shell-v2 #team .section-title-row::after,
  body.app-shell-v2 #team > .section-title-row::before,
  body.app-shell-v2 #team > .section-title-row::after {
    content: none !important;
    display: none !important;
  }
}

/* ============================================================
   Typography + Visual Hierarchy Alignment Pass
   Reference: Mission Center (body.app-shell-v2 #team)
   Scope: logged-in shell only. Layout, behavior unchanged.
   ============================================================ */

/* ── 1. Page-header eyebrow normalization ──────────────────
   Base .eyebrow inherits color: var(--orange-dark) from
   style-redesign-v2.css. Competitions additionally overrides
   to var(--w2g-orange) at weight 900. All content pages
   should match Mission Center's neutral/muted treatment. */
body.app-shell-v2 #competitions .section-title-row .eyebrow,
body.app-shell-v2 #competitions.competition-page-v2 .eyebrow,
body.app-shell-v2 #members .section-title-row .eyebrow,
body.app-shell-v2 #requests .section-title-row .eyebrow,
body.app-shell-v2 #profile .section-title-row .eyebrow {
  color: var(--w2g-muted);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  background: transparent;
  border: 0;
}

/* ── 2. Section h1 / h2 — explicit weight + color ──────────
   Mission Center ref: font-weight: 700, color: var(--ink),
   letter-spacing: -0.02em. Competition/members/requests/
   profile were inheriting browser-bold but without explicit
   values, making them hard to audit and inconsistently
   overrideable by other rules. */
body.app-shell-v2 #competitions .section-title-row h1,
body.app-shell-v2 #members .section-title-row h1,
body.app-shell-v2 #requests .section-title-row h1 {
  font-weight: 700;
  color: var(--w2g-ink);
  letter-spacing: -0.02em;
}

body.app-shell-v2 #profile .section-title-row h1,
body.app-shell-v2 #profile .section-title-row h2 {
  font-weight: 700;
  color: var(--w2g-ink);
  letter-spacing: -0.02em;
}

/* ── 3. Subtitle / muted description text ──────────────────
   Mission Center ref: color: var(--body), font-weight: 400,
   font-size: 13.5px. Keeps text readable without being heavy. */
body.app-shell-v2 #competitions .section-title-row .muted,
body.app-shell-v2 #members .section-title-row .muted,
body.app-shell-v2 #requests .section-title-row .muted,
body.app-shell-v2 #profile .section-title-row .muted {
  color: var(--w2g-body);
  font-weight: 400;
  font-size: 13.5px;
  line-height: 1.45;
}

/* ── 4. Home / Dashboard — crisper stat and content cards ──
   Upgrade border to --w2g-line-strong and remove the
   barely-visible box-shadow (5% opacity) to match the
   zero-shadow, strong-border convention of Mission Center. */
body.app-shell-v2 #home .hv2-stat {
  border-color: var(--w2g-line-strong);
  box-shadow: none;
}
body.app-shell-v2 #home .hv2-card {
  border-color: var(--w2g-line-strong);
  box-shadow: none;
}
body.app-shell-v2 #home .hv2-task-row {
  border-color: var(--w2g-line-strong);
}

/* ── 5. Teams — filter shell shadow removal ────────────────
   The 4% rgba box-shadow is invisible but adds rendering
   weight. Remove to match Competitions (shadow: none). */
body.app-shell-v2 #teams.team-page-v2 .team-filter-shell {
  box-shadow: none;
}

/* ── 6. Requests — card shadows match Competition cards ────
   request-v2-card uses --w2g-shadow-sm (5%). Mission Center
   uses none. Remove for consistent flat-card approach. */
body.app-shell-v2 .request-v2-card {
  box-shadow: none;
  border-color: var(--w2g-line-strong);
}
body.app-shell-v2 #requestTabs.tabs {
  box-shadow: none;
}

/* ── 7. Requests — section and card heading weights ────────
   Explicit 700 on h3 titles inside request cards and
   section groupings (browser default is 700 but being
   explicit makes hierarchy easier to audit/override). */
body.app-shell-v2 .request-v2-section > h3 {
  font-weight: 700;
  letter-spacing: -0.01em;
}
body.app-shell-v2 .request-v2-head h3 {
  font-weight: 700;
  letter-spacing: -0.01em;
}
body.app-shell-v2 .request-v2-subtitle {
  font-weight: 400;
  color: var(--w2g-body);
}

/* ── 8. Profile — name heading and content card headings ───
   profile-photo-actions h3 is the user's display name.
   Saved-items and sidebar cards use .content-card h3. */
body.app-shell-v2 #profile .profile-photo-actions h3 {
  font-weight: 700;
  letter-spacing: -0.02em;
}
body.app-shell-v2 #profile .content-card h3 {
  font-weight: 700;
  color: var(--w2g-ink);
  letter-spacing: -0.01em;
}
body.app-shell-v2 #profile .content-card {
  box-shadow: none !important;
  border-color: var(--w2g-line-strong) !important;
}

/* ── 9. Members — product-helper-copy consistent with Teams  */
body.app-shell-v2 #members .section-title-row .product-helper-copy {
  color: var(--w2g-muted);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.45;
}

/* ── 10. Dark mode — tokens auto-resolve via CSS custom
    properties. Explicit muted color holds in dark mode
    since --w2g-muted is redefined per theme. No overrides
    needed beyond the shared token context. ── */

/* ============================================================
   Unified Discovery Filter Bar Pass
   Target: Competitions, Find Team, Find Members
   Reference for height/spacing/typography: Competitions bar
   Scope: body.app-shell-v2 only. Mission Center untouched.
   ============================================================ */

/* ── A. Members — full filter bar (mirrors Competitions/Teams) ─
   Members had no dedicated app-shell-v2 filter CSS; it fell
   back to base grid/height rules, making it look different.
   ensureMemberV2Page() (script.js) injects the search icon
   and adds card/reference-filter-row classes before render. */

body.app-shell-v2 #members .member-filter-shell {
  margin: 0 0 18px;
  padding: 12px;
  border: 1px solid var(--w2g-line);
  border-radius: 14px;
  background: var(--w2g-surface);
  box-shadow: none;
}

body.app-shell-v2 #members .filter-toolbar {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body.app-shell-v2 #members .filter-search-field {
  position: relative !important;
  display: flex !important;
  flex: 1 1 300px !important;
  min-width: min(100%, 240px) !important;
  align-items: center !important;
}

/* ── Mission Center member overflow menu (Patch C) ─────────────────────── */
.mission-member-actions-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.mission-member-actions-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 6px;
  flex-shrink: 0;
}

.mission-member-actions-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 148px;
  background: var(--surface-raised, var(--surface));
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,.16);
  z-index: 200;
  display: none;
  overflow: hidden;
}

.mission-member-actions-menu.open {
  display: block;
}

.mission-member-menu-item {
  display: block;
  width: 100%;
  padding: 10px 14px;
  background: none;
  border: none;
  text-align: left;
  font-size: var(--text-sm, 13.5px);
  cursor: pointer;
  color: var(--ink);
}

.mission-member-menu-item:hover,
.mission-member-menu-item:focus-visible {
  background: var(--surface-hover, var(--surface-alt));
  outline: none;
}

.mission-member-menu-item-danger {
  color: var(--danger, #e03);
}

.mission-member-menu-item-danger:hover,
.mission-member-menu-item-danger:focus-visible {
  background: var(--danger-bg, rgba(238,0,51,.08));
}

/* ── End Mission Center member overflow menu ─────────────────────────────── */

/* Hide the visually-placed text label */
body.app-shell-v2 #members .filter-search-field > span:not(.member-search-icon) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

/* Search icon injected by ensureMemberV2Page() */
body.app-shell-v2 #members .member-search-icon {
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  z-index: 2 !important;
  display: inline-flex !important;
  width: 16px !important;
  height: 16px !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--w2g-muted) !important;
  line-height: 0 !important;
  pointer-events: none !important;
  transform: translateY(-50%) !important;
}

body.app-shell-v2 #members #memberSearch {
  width: 100% !important;
  min-height: 36px !important;
  padding: 8px 12px 8px 38px !important;
  border: 1px solid var(--w2g-line) !important;
  border-radius: 10px !important;
  background: var(--w2g-bg) !important;
  color: var(--w2g-ink) !important;
  font-size: 13.5px !important;
  line-height: 1.35 !important;
  box-shadow: none !important;
}

body.app-shell-v2 #members #memberFilterToggle {
  min-height: 36px !important;
  padding: 8px 12px !important;
  border-radius: 10px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

body.app-shell-v2 #members #memberFilterCount.filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  margin-left: 2px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--w2g-orange-soft);
  color: var(--w2g-orange-ink);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
}

body.app-shell-v2 #members #memberFilterCount.hidden {
  display: none;
}

/* Sort label — same pattern as Competitions/Teams */
body.app-shell-v2 #members .filter-toolbar label:has(#memberSort) {
  display: flex !important;
  flex: 0 0 auto !important;
  min-width: 190px !important;
  width: auto !important;
  align-items: center !important;
  gap: 7px !important;
  margin-left: auto !important;
  color: var(--w2g-muted) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

body.app-shell-v2 #members #memberSort {
  width: 100% !important;
  min-width: 150px !important;
  min-height: 36px !important;
  padding: 8px 30px 8px 10px !important;
  border: 1px solid var(--w2g-line) !important;
  border-radius: 10px !important;
  background-color: var(--w2g-bg) !important;
  color: var(--w2g-ink) !important;
  font-size: 13px !important;
  box-shadow: none !important;
}

/* Active filter row */
body.app-shell-v2 #members .active-filter-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 12px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body.app-shell-v2 #members .active-filter-row.hidden {
  display: none !important;
}

body.app-shell-v2 #members #memberActiveFilters .active-filter-label {
  color: var(--w2g-muted);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.app-shell-v2 #members #memberActiveFilters .active-filter-chip,
body.app-shell-v2 #members #memberActiveFilters .clear-filter-button {
  min-height: 27px;
  padding: 3px 9px;
  border: 1px solid var(--w2g-line);
  border-radius: var(--w2g-r-pill);
  background: var(--w2g-surface);
  font-size: 11.5px;
  font-weight: 600;
  box-shadow: none;
}

/* ── B. Teams — visually separate Create Team from filter controls
   Move margin-left:auto from the sort label to the Create Team
   button so the layout reads: [Search][Chips][Filters][Sort] → [Create] */

body.app-shell-v2 #teams.team-page-v2 .filter-toolbar label:has(#teamSort) {
  margin-left: 0 !important;
}

body.app-shell-v2 #teams.team-page-v2 .filter-toolbar #createTeamButton {
  margin-left: auto !important;
}

/* ── C. Shared quick-filter chip hover — ensure identical hover
   between competition and team chips (already consistent, but
   explicit to guard against later overrides) */
body.app-shell-v2 #competitions.competition-page-v2 .competition-quick-filter:hover,
body.app-shell-v2 #teams.team-page-v2 .team-quick-filter:hover {
  border-color: var(--w2g-orange-line) !important;
  background: var(--w2g-orange-soft) !important;
  color: var(--w2g-orange-ink) !important;
}

/* ── D. Members mobile — stack cleanly at 760px ─────────── */
@media (max-width: 760px) {
  body.app-shell-v2 #members .filter-toolbar {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  body.app-shell-v2 #members .filter-toolbar label:has(#memberSort) {
    width: 100% !important;
    margin-left: 0 !important;
  }

  body.app-shell-v2 #members .member-filter-shell {
    max-width: none !important;
  }
}

/* ── E. Dark mode — Members filter (tokens auto-resolve but
   border-color needs an explicit set for the filter shell) */
html[data-theme="dark"] body.app-shell-v2 #members .member-filter-shell {
  background: var(--w2g-surface) !important;
  border-color: var(--w2g-line) !important;
}

/* ============================================================
   DISCOVERY FILTER BAR — Unified Layout Contract v2
   Scope: #competitions (competition-page-v2), #teams (team-page-v2),
          #members — all via shared .reference-filter-row class
          injected by ensureReferenceFilterShell() in script.js.
   Contract: [Search fixed] [chips/spacer] [Filters] [Sort] [CTA?]
   Root fix: previous passes had flex:1 1 300px on search field,
   causing Members (no chips) to stretch across the full toolbar.
   ============================================================ */

/* ── 1. Filter shell: identical surface on all 3 pages ───── */
body.app-shell-v2 #competitions.competition-page-v2 .competition-filter-shell,
body.app-shell-v2 #teams.team-page-v2 .team-filter-shell,
body.app-shell-v2 #members .member-filter-shell {
  margin: 0 0 18px !important;
  padding: 12px !important;
  border: 1px solid var(--w2g-line) !important;
  border-radius: 14px !important;
  background: var(--w2g-surface) !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* ── 2. Toolbar: shared flex contract via injected class ──── */
body.app-shell-v2 .filter-toolbar.reference-filter-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

/* ── 3. Search field: FIXED width — the core fix.
   Must use page-ID selectors to beat parity-lock !important
   (specificity ~1,3,0 beats old rule's 1,3,0 because later in file). */
body.app-shell-v2 #competitions.competition-page-v2 .filter-toolbar .filter-search-field,
body.app-shell-v2 #teams.team-page-v2 .filter-toolbar .filter-search-field,
body.app-shell-v2 #members .filter-toolbar .filter-search-field {
  position: relative !important;
  display: flex !important;
  flex: 0 0 auto !important;
  width: clamp(260px, 30vw, 400px) !important;
  min-width: 0 !important;
  align-items: center !important;
}

/* Hide label text, keep accessible */
body.app-shell-v2 .filter-toolbar.reference-filter-row .filter-search-field > span:not([class*="search-icon"]) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

/* Search input */
body.app-shell-v2 .filter-toolbar.reference-filter-row input[type="search"] {
  width: 100% !important;
  min-height: 36px !important;
  padding: 8px 12px 8px 38px !important;
  border: 1px solid var(--w2g-line) !important;
  border-radius: 10px !important;
  background: var(--w2g-bg) !important;
  color: var(--w2g-ink) !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  box-shadow: none !important;
}

/* Search icon (injected as .reference-search-icon by ensureReferenceFilterShell) */
body.app-shell-v2 .filter-toolbar.reference-filter-row .reference-search-icon {
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  z-index: 2 !important;
  display: inline-flex !important;
  width: 16px !important;
  height: 16px !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--w2g-muted) !important;
  line-height: 0 !important;
  pointer-events: none !important;
  transform: translateY(-50%) !important;
}

/* ── 4. Quick chips: flex: 1 1 0% fills middle space as spacer.
   Chip buttons inside keep their natural width (flex: 0 0 auto).
   Members has no chips so the filter-toggle margin-left:auto
   (section 6) handles the equivalent gap. */
body.app-shell-v2 .filter-toolbar.reference-filter-row .competition-quick-filters,
body.app-shell-v2 .filter-toolbar.reference-filter-row .team-quick-filters,
body.app-shell-guest .filter-toolbar.reference-filter-row .competition-quick-filters {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 6px !important;
  overflow: visible !important;
}

body.app-shell-v2 .filter-toolbar.reference-filter-row .competition-quick-filter,
body.app-shell-v2 .filter-toolbar.reference-filter-row .team-quick-filter {
  flex: 0 0 auto !important;
  min-height: 30px !important;
  padding: 6px 10px !important;
  border: 1px solid var(--w2g-line) !important;
  border-radius: 999px !important;
  background: var(--w2g-surface-2) !important;
  color: var(--w2g-body) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  box-shadow: none !important;
}

body.app-shell-v2 .filter-toolbar.reference-filter-row .competition-quick-filter:hover,
body.app-shell-v2 .filter-toolbar.reference-filter-row .competition-quick-filter.active,
body.app-shell-v2 .filter-toolbar.reference-filter-row .team-quick-filter:hover,
body.app-shell-v2 .filter-toolbar.reference-filter-row .team-quick-filter.active {
  border-color: var(--w2g-orange-line) !important;
  background: var(--w2g-orange-soft) !important;
  color: var(--w2g-orange-ink) !important;
}

/* ── 5. Filter toggle: shared sizing ──────────────────────── */
body.app-shell-v2 .filter-toolbar.reference-filter-row .filter-toggle {
  flex: 0 0 auto !important;
  min-height: 36px !important;
  padding: 8px 14px !important;
  border-radius: 10px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  box-shadow: none !important;
}

/* ── 6. Members: no chips → auto-margin on filter toggle creates gap */
body.app-shell-v2 #members .filter-toolbar.reference-filter-row .filter-toggle {
  margin-left: auto !important;
}

/* Filter count badge */
body.app-shell-v2 .filter-toolbar.reference-filter-row .filter-count,
body.app-shell-guest .filter-toolbar.reference-filter-row .filter-count {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 18px !important;
  height: 18px !important;
  margin-left: 3px !important;
  padding: 0 5px !important;
  border-radius: 999px !important;
  background: var(--w2g-orange-soft) !important;
  color: var(--w2g-orange-ink) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}
body.app-shell-v2 .filter-toolbar.reference-filter-row .filter-count.hidden,
body.app-shell-guest .filter-toolbar.reference-filter-row .filter-count.hidden {
  display: none !important;
}

/* ── 7. Sort label: override old margin-left:auto !important.
   Must repeat the EXACT selectors from parity-lock (28311-28325)
   and members pass — same specificity, later in file → wins. */
body.app-shell-v2 #competitions.competition-page-v2 .filter-toolbar label:has(#competitionSort),
body.app-shell-v2 #teams.team-page-v2 .filter-toolbar label:has(#teamSort),
body.app-shell-v2 #members .filter-toolbar label:has(#memberSort) {
  margin-left: 0 !important;
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  min-width: 0 !important;
  color: var(--w2g-muted) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* Sort label span ("Sort" text) — keep visible as context prefix */
body.app-shell-v2 .filter-toolbar.reference-filter-row .reference-filter-sort > span {
  position: static !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: nowrap !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--w2g-muted) !important;
}

/* Sort select */
body.app-shell-v2 .filter-toolbar.reference-filter-row .reference-filter-sort select {
  min-height: 36px !important;
  min-width: 150px !important;
  padding: 8px 30px 8px 10px !important;
  border: 1px solid var(--w2g-line) !important;
  border-radius: 10px !important;
  background-color: var(--w2g-bg) !important;
  color: var(--w2g-ink) !important;
  font-size: 13px !important;
  box-shadow: none !important;
}

/* ── 8. Create Team: CTA slot — visually separated from sort ─
   chips (flex:1) fill the middle so CTA is right-edge by design;
   margin-left: 12px adds extra separation from sort. */
body.app-shell-v2 #teams.team-page-v2 .filter-toolbar.reference-filter-row #createTeamButton {
  flex: 0 0 auto !important;
  min-height: 36px !important;
  margin-left: 12px !important;
  padding: 0 16px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: var(--w2g-orange) !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  transform: none !important;
}

/* ── 9. Active filter row: compact, transparent — all 3 pages ─ */
body.app-shell-v2 #competitions.competition-page-v2 .active-filter-row,
body.app-shell-v2 #teams.team-page-v2 .active-filter-row,
body.app-shell-v2 #members .active-filter-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 7px !important;
  margin-top: 10px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.app-shell-v2 #competitions.competition-page-v2 .active-filter-row.hidden,
body.app-shell-v2 #teams.team-page-v2 .active-filter-row.hidden,
body.app-shell-v2 #members .active-filter-row.hidden {
  display: none !important;
}

body.app-shell-v2 #competitions.competition-page-v2 .active-filter-row .active-filter-label,
body.app-shell-v2 #teams.team-page-v2 .active-filter-row .active-filter-label,
body.app-shell-v2 #members .active-filter-row .active-filter-label {
  color: var(--w2g-muted) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

body.app-shell-v2 #competitions.competition-page-v2 .active-filter-row .active-filter-chip,
body.app-shell-v2 #teams.team-page-v2 .active-filter-row .active-filter-chip,
body.app-shell-v2 #members .active-filter-row .active-filter-chip {
  min-height: 26px !important;
  padding: 3px 9px !important;
  border: 1px solid var(--w2g-line) !important;
  border-radius: 999px !important;
  background: var(--w2g-surface) !important;
  color: var(--w2g-body) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

body.app-shell-v2 #competitions.competition-page-v2 .active-filter-row .clear-filter-button,
body.app-shell-v2 #teams.team-page-v2 .active-filter-row .clear-filter-button,
body.app-shell-v2 #members .active-filter-row .clear-filter-button {
  min-height: 26px !important;
  padding: 3px 9px !important;
  border: 1px solid var(--w2g-line) !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--w2g-muted) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

/* ── 10. Mobile: clean stack at 760px ─────────────────────── */
@media (max-width: 760px) {
  /* Search: full-width first row */
  body.app-shell-v2 #competitions.competition-page-v2 .filter-toolbar .filter-search-field,
  body.app-shell-v2 #teams.team-page-v2 .filter-toolbar .filter-search-field,
  body.app-shell-v2 #members .filter-toolbar .filter-search-field {
    flex: 1 1 100% !important;
    width: 100% !important;
  }

  /* Members: remove auto-margin from filter toggle now that search is above */
  body.app-shell-v2 #members .filter-toolbar.reference-filter-row .filter-toggle {
    margin-left: 0 !important;
  }

  /* Chips: own row, horizontal scroll */
  body.app-shell-v2 .filter-toolbar.reference-filter-row .competition-quick-filters,
  body.app-shell-v2 .filter-toolbar.reference-filter-row .team-quick-filters {
    flex: 1 1 100% !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    padding-bottom: 2px !important;
    scrollbar-width: thin !important;
  }

  /* Sort: fills row next to filter toggle */
  body.app-shell-v2 #competitions.competition-page-v2 .filter-toolbar label:has(#competitionSort),
  body.app-shell-v2 #teams.team-page-v2 .filter-toolbar label:has(#teamSort),
  body.app-shell-v2 #members .filter-toolbar label:has(#memberSort) {
    flex: 1 1 auto !important;
  }

  /* Create Team: full-width own row */
  body.app-shell-v2 #teams.team-page-v2 .filter-toolbar.reference-filter-row #createTeamButton {
    flex: 1 1 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    justify-content: center !important;
  }
}

/* ── 11. Dark mode ────────────────────────────────────────── */
html[data-theme="dark"] body.app-shell-v2 .filter-toolbar.reference-filter-row input[type="search"],
html[data-theme="dark"] body.app-shell-v2 .filter-toolbar.reference-filter-row .reference-filter-sort select {
  background: var(--w2g-bg) !important;
  border-color: var(--w2g-line) !important;
  color: var(--w2g-ink) !important;
}

html[data-theme="dark"] body.app-shell-v2 #competitions.competition-page-v2 .competition-filter-shell,
html[data-theme="dark"] body.app-shell-v2 #teams.team-page-v2 .team-filter-shell,
html[data-theme="dark"] body.app-shell-v2 #members .member-filter-shell {
  background: var(--w2g-surface) !important;
  border-color: var(--w2g-line) !important;
}

/* ============================================================
   GUEST DISCOVERY TOOLBAR PARITY — Find Team / Find Members
   Goal: give logged-out Find Team and Find Members the same
   compact toolbar contract as section "DISCOVERY FILTER BAR —
   Unified Layout Contract v2" above, minus the Create Team CTA
   (guests cannot create a team — see #createTeamButton[hidden]
   rule near .active-team-create-hidden).
   Scope: body.app-shell-guest, #teams.team-page-v2 / #members
   only. Competitions guest toolbar already reads consistently
   and is intentionally left untouched.
   ============================================================ */

/* ── Filter shell: identical surface to logged-in ──────────── */
body.app-shell-guest #teams.team-page-v2 .team-filter-shell,
body.app-shell-guest #members .member-filter-shell {
  margin: 0 0 18px !important;
  padding: 12px !important;
  border: 1px solid var(--w2g-line) !important;
  border-radius: 14px !important;
  background: var(--w2g-surface) !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* ── Toolbar: shared flex contract ─────────────────────────── */
body.app-shell-guest #teams.team-page-v2 .filter-toolbar.reference-filter-row,
body.app-shell-guest #members .filter-toolbar.reference-filter-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

/* ── Search field ───────────────────────────────────────────── */
body.app-shell-guest #teams.team-page-v2 .filter-toolbar .filter-search-field,
body.app-shell-guest #members .filter-toolbar .filter-search-field {
  position: relative !important;
  display: flex !important;
  flex: 0 0 auto !important;
  width: clamp(260px, 30vw, 400px) !important;
  min-width: 0 !important;
  align-items: center !important;
}

body.app-shell-guest #teams.team-page-v2 .filter-toolbar.reference-filter-row .filter-search-field > span:not([class*="search-icon"]),
body.app-shell-guest #members .filter-toolbar.reference-filter-row .filter-search-field > span:not([class*="search-icon"]) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

body.app-shell-guest #teams.team-page-v2 .filter-toolbar.reference-filter-row input[type="search"],
body.app-shell-guest #members .filter-toolbar.reference-filter-row input[type="search"] {
  width: 100% !important;
  min-height: 36px !important;
  padding: 8px 12px 8px 38px !important;
  border: 1px solid var(--w2g-line) !important;
  border-radius: 10px !important;
  background: var(--w2g-bg) !important;
  color: var(--w2g-ink) !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  box-shadow: none !important;
}

body.app-shell-guest #teams.team-page-v2 .filter-toolbar.reference-filter-row .reference-search-icon,
body.app-shell-guest #members .filter-toolbar.reference-filter-row .reference-search-icon {
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  z-index: 2 !important;
  display: inline-flex !important;
  width: 16px !important;
  height: 16px !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--w2g-muted) !important;
  line-height: 0 !important;
  pointer-events: none !important;
  transform: translateY(-50%) !important;
}

/* ── Filter toggle: shared sizing ──────────────────────────── */
body.app-shell-guest #teams.team-page-v2 .filter-toolbar.reference-filter-row .filter-toggle,
body.app-shell-guest #members .filter-toolbar.reference-filter-row .filter-toggle {
  flex: 0 0 auto !important;
  min-height: 36px !important;
  padding: 8px 14px !important;
  border-radius: 10px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  box-shadow: none !important;
}

/* Members: no chips → auto-margin on filter toggle creates gap (matches logged-in) */
body.app-shell-guest #members .filter-toolbar.reference-filter-row .filter-toggle {
  margin-left: auto !important;
}

/* Filter count badge */
body.app-shell-guest #teams.team-page-v2 .filter-toolbar.reference-filter-row .filter-count,
body.app-shell-guest #members .filter-toolbar.reference-filter-row .filter-count {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 18px !important;
  height: 18px !important;
  margin-left: 3px !important;
  padding: 0 5px !important;
  border-radius: 999px !important;
  background: var(--w2g-orange-soft) !important;
  color: var(--w2g-orange-ink) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}
body.app-shell-guest #teams.team-page-v2 .filter-toolbar.reference-filter-row .filter-count.hidden,
body.app-shell-guest #members .filter-toolbar.reference-filter-row .filter-count.hidden {
  display: none !important;
}

/* ── Sort label + select ────────────────────────────────────── */
body.app-shell-guest #teams.team-page-v2 .filter-toolbar label:has(#teamSort),
body.app-shell-guest #members .filter-toolbar label:has(#memberSort) {
  margin-left: 0 !important;
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  min-width: 0 !important;
  color: var(--w2g-muted) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

body.app-shell-guest #teams.team-page-v2 .filter-toolbar.reference-filter-row .reference-filter-sort > span,
body.app-shell-guest #members .filter-toolbar.reference-filter-row .reference-filter-sort > span {
  position: static !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: nowrap !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--w2g-muted) !important;
}

body.app-shell-guest #teams.team-page-v2 .filter-toolbar.reference-filter-row .reference-filter-sort select,
body.app-shell-guest #members .filter-toolbar.reference-filter-row .reference-filter-sort select {
  min-height: 36px !important;
  min-width: 150px !important;
  padding: 8px 30px 8px 10px !important;
  border: 1px solid var(--w2g-line) !important;
  border-radius: 10px !important;
  background-color: var(--w2g-bg) !important;
  color: var(--w2g-ink) !important;
  font-size: 13px !important;
  box-shadow: none !important;
}

/* ── Active filter row: compact, transparent ───────────────── */
body.app-shell-guest #teams.team-page-v2 .active-filter-row,
body.app-shell-guest #members .active-filter-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 7px !important;
  margin-top: 10px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.app-shell-guest #teams.team-page-v2 .active-filter-row.hidden,
body.app-shell-guest #members .active-filter-row.hidden {
  display: none !important;
}

body.app-shell-guest #teams.team-page-v2 .active-filter-row .active-filter-label,
body.app-shell-guest #members .active-filter-row .active-filter-label {
  color: var(--w2g-muted) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

body.app-shell-guest #teams.team-page-v2 .active-filter-row .active-filter-chip,
body.app-shell-guest #members .active-filter-row .active-filter-chip {
  min-height: 26px !important;
  padding: 3px 9px !important;
  border: 1px solid var(--w2g-line) !important;
  border-radius: 999px !important;
  background: var(--w2g-surface) !important;
  color: var(--w2g-body) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

body.app-shell-guest #teams.team-page-v2 .active-filter-row .clear-filter-button,
body.app-shell-guest #members .active-filter-row .clear-filter-button {
  min-height: 26px !important;
  padding: 3px 9px !important;
  border: 1px solid var(--w2g-line) !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--w2g-muted) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

/* ── Dark mode ──────────────────────────────────────────────── */
html[data-theme="dark"] body.app-shell-guest #teams.team-page-v2 .filter-toolbar.reference-filter-row input[type="search"],
html[data-theme="dark"] body.app-shell-guest #members .filter-toolbar.reference-filter-row input[type="search"],
html[data-theme="dark"] body.app-shell-guest #teams.team-page-v2 .filter-toolbar.reference-filter-row .reference-filter-sort select,
html[data-theme="dark"] body.app-shell-guest #members .filter-toolbar.reference-filter-row .reference-filter-sort select {
  background: var(--w2g-bg) !important;
  border-color: var(--w2g-line) !important;
  color: var(--w2g-ink) !important;
}

html[data-theme="dark"] body.app-shell-guest #teams.team-page-v2 .team-filter-shell,
html[data-theme="dark"] body.app-shell-guest #members .member-filter-shell {
  background: var(--w2g-surface) !important;
  border-color: var(--w2g-line) !important;
}

/* ============================================================
   Competition Filter Bar — Reference Parity Fix
   Goal: slim toolbar feel; no nested-box search; compact controls
   Root cause A: #competitionSearch had background:var(--w2g-bg)
     (page gray) + border:1px inside white shell → gray box in
     white box → nested card visual. Fix: transparent + no border.
   Root cause B: shell padding 12px + radius 14px + global shadow
     from line 19663–19689 → panel appearance. Fix: slim padding.
   Root cause C: active-filter-row inside shell grows height.
     Fix: negative-margin footer strip, transparent background.
   Scope: #competitions.competition-page-v2 ONLY.
   Find Team, Find Members, Mission Center: unchanged.
   ============================================================ */

/* ── Shell: slim bar, not a card panel ─────────────────── */
body.app-shell-v2 #competitions.competition-page-v2 .competition-filter-shell,
body.app-shell-guest #competitions.competition-page-v2 .competition-filter-shell {
  padding: 8px 10px !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* ── Toolbar: tight flex row ────────────────────────────── */
body.app-shell-v2 #competitions.competition-page-v2 .filter-toolbar.reference-filter-row,
body.app-shell-guest #competitions.competition-page-v2 .filter-toolbar.reference-filter-row {
  gap: 8px !important;
  align-items: center !important;
}

/* ── Search field: cap width inside slim bar ─────────────  */
body.app-shell-v2 #competitions.competition-page-v2 .filter-toolbar .filter-search-field,
body.app-shell-guest #competitions.competition-page-v2 .filter-toolbar .filter-search-field {
  width: clamp(220px, 26vw, 360px) !important;
}

/* ── Search input: remove inner box (core fix) ───────────
   Transparent + no border means the shell IS the visual
   boundary — one surface, no nested card. */
body.app-shell-v2 #competitions.competition-page-v2 #competitionSearch,
body.app-shell-guest #competitions.competition-page-v2 #competitionSearch {
  min-height: 32px !important;
  padding: 6px 10px 6px 34px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
}

body.app-shell-v2 #competitions.competition-page-v2 #competitionSearch:focus,
body.app-shell-guest #competitions.competition-page-v2 #competitionSearch:focus {
  background: var(--w2g-surface-2) !important;
  outline: 2px solid var(--w2g-orange-line) !important;
  outline-offset: 0 !important;
}

body.app-shell-v2 #competitions.competition-page-v2 #competitionSearch::placeholder,
body.app-shell-guest #competitions.competition-page-v2 #competitionSearch::placeholder {
  color: var(--w2g-muted) !important;
  font-weight: 400 !important;
}

/* ── Search icon: adjusted for compact input ─────────────  */
body.app-shell-v2 #competitions.competition-page-v2 .competition-search-icon,
body.app-shell-guest #competitions.competition-page-v2 .competition-search-icon {
  left: 10px !important;
  width: 15px !important;
  height: 15px !important;
}
body.app-shell-v2 #competitions.competition-page-v2 .competition-search-icon svg,
body.app-shell-guest #competitions.competition-page-v2 .competition-search-icon svg {
  width: 15px !important;
  height: 15px !important;
}

/* ── Quick chips: compact, connected to bar rhythm ───────── */
body.app-shell-v2 #competitions.competition-page-v2 .competition-quick-filter,
body.app-shell-guest #competitions.competition-page-v2 .competition-quick-filter {
  min-height: 30px !important;
  padding: 5px 10px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  border-color: var(--w2g-line) !important;
}

/* ── Filter toggle: match slim bar height ────────────────── */
body.app-shell-v2 #competitions.competition-page-v2 #competitionFilterToggle,
body.app-shell-guest #competitions.competition-page-v2 #competitionFilterToggle {
  min-height: 32px !important;
  padding: 6px 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

/* ── Sort label + select: compact ────────────────────────── */
body.app-shell-v2 #competitions.competition-page-v2 .filter-toolbar label:has(#competitionSort),
body.app-shell-guest #competitions.competition-page-v2 .filter-toolbar label:has(#competitionSort) {
  gap: 6px !important;
}

body.app-shell-v2 #competitions.competition-page-v2 #competitionSort,
body.app-shell-guest #competitions.competition-page-v2 #competitionSort {
  min-height: 32px !important;
  min-width: 140px !important;
  padding: 5px 28px 5px 10px !important;
  font-size: 12.5px !important;
}

/* ── Active filter row: slim extension below bar ─────────
   Negative margins pull it to shell edges so it looks like
   an appended row, not a panel growing the bar height. */
body.app-shell-v2 #competitions.competition-page-v2 #competitionActiveFilters.active-filter-row,
body.app-shell-guest #competitions.competition-page-v2 #competitionActiveFilters.active-filter-row {
  margin: 5px -10px -8px !important;
  padding: 7px 10px !important;
  border-top: 1px solid var(--w2g-line) !important;
  border-radius: 0 0 10px 10px !important;
  background: transparent !important;
  box-shadow: none !important;
  gap: 6px !important;
}

/* ── Dark mode ────────────────────────────────────────────── */
html[data-theme="dark"] body.app-shell-v2 #competitions.competition-page-v2 #competitionSearch,
html[data-theme="dark"] body.app-shell-guest #competitions.competition-page-v2 #competitionSearch {
  background: transparent !important;
  color: var(--w2g-ink) !important;
}
html[data-theme="dark"] body.app-shell-v2 #competitions.competition-page-v2 #competitionSearch:focus,
html[data-theme="dark"] body.app-shell-guest #competitions.competition-page-v2 #competitionSearch:focus {
  background: rgba(255, 255, 255, 0.06) !important;
}

/* ============================================================
   Competition filter bar — Slim toolbar v2
   Scope: #competitions.competition-page-v2 ONLY.
   Find Team / Find Members / Mission Center: unchanged.

   Root causes fixed:
   A) .filter-search-field (wrapper) had padding:8px 12px +
      border + bg → visible box. Input inside was transparent.
      Two surfaces = "box inside a box". Fix: strip wrapper to
      layout-only; give #competitionSearch its own single border.
   B) Wrapper min-height:36px vs chips at 30px → height mismatch
      inflated the toolbar row. Fix: all controls at 30px rhythm.
   C) Active-filter-row margin-top:10px grew the shell visually.
      Fix: compact negative-margin footer strip.
   D) Shell padding still felt panel-like at 8px/10px.
      Fix: 6px 10px — slim bar, not a card.
   ============================================================ */

/* ── 1. Shell: slim toolbar, not a card panel ─────────────── */
body.app-shell-v2 #competitions.competition-page-v2 .competition-filter-shell,
body.app-shell-guest #competitions.competition-page-v2 .competition-filter-shell {
  padding: 6px 10px !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* ── 2. Toolbar row: tight single row ────────────────────── */
body.app-shell-v2 #competitions.competition-page-v2 .filter-toolbar.reference-filter-row,
body.app-shell-guest #competitions.competition-page-v2 .filter-toolbar.reference-filter-row {
  gap: 7px !important;
  flex-wrap: nowrap !important;
}

/* ── 3. Search wrapper: transparent layout shell only ─────
   Removes the border + bg that was creating a visible box
   inside the toolbar. The input below is the one surface. */
body.app-shell-v2 #competitions.competition-page-v2 .filter-search-field,
body.app-shell-guest #competitions.competition-page-v2 .filter-search-field {
  flex: 0 0 auto !important;
  width: clamp(180px, 22vw, 320px) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
}

/* ── 4. Search input: the one visible surface ──────────────
   Border + bg here, not on the wrapper. Single-surface search. */
body.app-shell-v2 #competitions.competition-page-v2 #competitionSearch,
body.app-shell-guest #competitions.competition-page-v2 #competitionSearch {
  width: 100% !important;
  min-height: 30px !important;
  padding: 4px 8px 4px 30px !important;
  border: 1px solid var(--w2g-line) !important;
  border-radius: 8px !important;
  background: var(--w2g-surface-2) !important;
  color: var(--w2g-ink) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  box-shadow: none !important;
  outline: none !important;
}

body.app-shell-v2 #competitions.competition-page-v2 #competitionSearch:focus,
body.app-shell-guest #competitions.competition-page-v2 #competitionSearch:focus {
  border-color: var(--w2g-orange-line) !important;
  background: var(--w2g-surface) !important;
  outline: none !important;
  box-shadow: none !important;
}

body.app-shell-v2 #competitions.competition-page-v2 #competitionSearch::placeholder,
body.app-shell-guest #competitions.competition-page-v2 #competitionSearch::placeholder {
  color: var(--w2g-muted) !important;
  font-weight: 400 !important;
}

/* ── 5. Search icon: positioned over input left area ──────── */
body.app-shell-v2 #competitions.competition-page-v2 .competition-search-icon,
body.app-shell-v2 #competitions.competition-page-v2 .reference-search-icon,
body.app-shell-guest #competitions.competition-page-v2 .competition-search-icon,
body.app-shell-guest #competitions.competition-page-v2 .reference-search-icon {
  position: absolute !important;
  left: 9px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 2 !important;
  display: inline-flex !important;
  width: 14px !important;
  height: 14px !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--w2g-muted) !important;
  pointer-events: none !important;
  line-height: 0 !important;
  clip: auto !important;
  overflow: visible !important;
}
body.app-shell-v2 #competitions.competition-page-v2 .competition-search-icon svg,
body.app-shell-v2 #competitions.competition-page-v2 .reference-search-icon svg,
body.app-shell-guest #competitions.competition-page-v2 .competition-search-icon svg,
body.app-shell-guest #competitions.competition-page-v2 .reference-search-icon svg {
  width: 14px !important;
  height: 14px !important;
  display: block !important;
  flex: none !important;
}

/* ── 6. Quick chips: compact, same 30px rhythm ────────────── */
body.app-shell-v2 #competitions.competition-page-v2 .competition-quick-filter,
body.app-shell-guest #competitions.competition-page-v2 .competition-quick-filter {
  min-height: 30px !important;
  padding: 4px 10px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  border-color: var(--w2g-line) !important;
  background: var(--w2g-surface-2) !important;
  color: var(--w2g-body) !important;
  box-shadow: none !important;
}

/* ── 7. Filter toggle: lighter, 30px rhythm ──────────────── */
body.app-shell-v2 #competitions.competition-page-v2 #competitionFilterToggle,
body.app-shell-guest #competitions.competition-page-v2 #competitionFilterToggle {
  min-height: 30px !important;
  padding: 4px 11px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

/* ── 8. Sort select: compact, 30px rhythm ────────────────── */
body.app-shell-v2 #competitions.competition-page-v2 #competitionSort,
body.app-shell-guest #competitions.competition-page-v2 #competitionSort {
  min-height: 30px !important;
  min-width: 130px !important;
  padding: 4px 26px 4px 9px !important;
  font-size: 12.5px !important;
  border-radius: 8px !important;
  border-color: var(--w2g-line) !important;
  background: var(--w2g-surface-2) !important;
  color: var(--w2g-ink) !important;
  box-shadow: none !important;
}

/* ── 9. Active filter row: compact footer strip ────────────
   Negative margins pull it flush to shell edges so active
   filters extend the bar without growing its apparent height. */
body.app-shell-v2 #competitions.competition-page-v2 #competitionActiveFilters.active-filter-row,
body.app-shell-guest #competitions.competition-page-v2 #competitionActiveFilters.active-filter-row {
  margin: 4px -10px -6px !important;
  padding: 5px 10px !important;
  border-top: 1px solid var(--w2g-line) !important;
  border-radius: 0 0 10px 10px !important;
  background: transparent !important;
  box-shadow: none !important;
  gap: 5px !important;
}

/* ── 10. Dark mode ─────────────────────────────────────────── */
html[data-theme="dark"] body.app-shell-v2 #competitions.competition-page-v2 #competitionSearch,
html[data-theme="dark"] body.app-shell-guest #competitions.competition-page-v2 #competitionSearch {
  background: var(--w2g-surface-2) !important;
  border-color: var(--w2g-line) !important;
  color: var(--w2g-ink) !important;
}
html[data-theme="dark"] body.app-shell-v2 #competitions.competition-page-v2 #competitionSearch:focus,
html[data-theme="dark"] body.app-shell-guest #competitions.competition-page-v2 #competitionSearch:focus {
  background: var(--w2g-surface) !important;
  border-color: var(--w2g-orange-line) !important;
}
html[data-theme="dark"] body.app-shell-v2 #competitions.competition-page-v2 .competition-filter-shell,
html[data-theme="dark"] body.app-shell-guest #competitions.competition-page-v2 .competition-filter-shell {
  background: var(--w2g-surface) !important;
  border-color: var(--w2g-line) !important;
}

/* ── 11. Mobile: search + chips wrap, controls row ──────────── */
@media (max-width: 760px) {
  body.app-shell-v2 #competitions.competition-page-v2 .filter-toolbar.reference-filter-row {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  body.app-shell-v2 #competitions.competition-page-v2 .filter-search-field {
    flex: 1 1 100% !important;
    width: 100% !important;
  }
  body.app-shell-v2 #competitions.competition-page-v2 .competition-quick-filters {
    flex: 1 1 100% !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
  }
}

@media (max-width: 900px) {
  body.app-shell-v2 #competitions.competition-page-v2 .filter-toolbar.reference-filter-row,
  body.app-shell-guest #competitions.competition-page-v2 .filter-toolbar.reference-filter-row {
    flex-wrap: wrap !important;
  }
  body.app-shell-v2 #competitions.competition-page-v2 .filter-search-field,
  body.app-shell-guest #competitions.competition-page-v2 .filter-search-field {
    flex: 1 1 auto !important;
    width: clamp(160px, 40%, 320px) !important;
  }
}

/* ============================================================
   Find Team / Find Members filter parity — Competition reference
   Scope: #teams, #members ONLY.
   Keeps search/filter/sort logic untouched while matching the
   final Competitions single-surface search and compact toolbar.
   ============================================================ */

body.app-shell-v2 #teams.team-page-v2 .team-filter-shell,
body.app-shell-guest #teams.team-page-v2 .team-filter-shell,
body.app-shell-v2 #members.member-page-v2 .member-filter-shell,
body.app-shell-v2 #members .member-filter-shell,
body.app-shell-guest #members.member-page-v2 .member-filter-shell,
body.app-shell-guest #members .member-filter-shell {
  padding: 6px 10px !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body.app-shell-v2 #teams.team-page-v2 .filter-toolbar.reference-filter-row,
body.app-shell-guest #teams.team-page-v2 .filter-toolbar.reference-filter-row,
body.app-shell-v2 #members.member-page-v2 .filter-toolbar.reference-filter-row,
body.app-shell-v2 #members .filter-toolbar.reference-filter-row,
body.app-shell-guest #members.member-page-v2 .filter-toolbar.reference-filter-row,
body.app-shell-guest #members .filter-toolbar.reference-filter-row {
  gap: 7px !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
}

body.app-shell-v2 #teams.team-page-v2 .filter-toolbar .filter-search-field,
body.app-shell-guest #teams.team-page-v2 .filter-toolbar .filter-search-field,
body.app-shell-v2 #members.member-page-v2 .filter-toolbar .filter-search-field,
body.app-shell-v2 #members .filter-toolbar .filter-search-field,
body.app-shell-guest #members.member-page-v2 .filter-toolbar .filter-search-field,
body.app-shell-guest #members .filter-toolbar .filter-search-field {
  flex: 0 0 auto !important;
  width: clamp(180px, 22vw, 320px) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  box-shadow: none !important;
}

body.app-shell-v2 #teams.team-page-v2 #teamSearch,
body.app-shell-guest #teams.team-page-v2 #teamSearch,
body.app-shell-v2 #members.member-page-v2 #memberSearch,
body.app-shell-v2 #members #memberSearch,
body.app-shell-guest #members.member-page-v2 #memberSearch,
body.app-shell-guest #members #memberSearch {
  width: 100% !important;
  min-height: 30px !important;
  padding: 4px 8px 4px 30px !important;
  border: 1px solid var(--w2g-line) !important;
  border-radius: 8px !important;
  background: var(--w2g-surface-2) !important;
  color: var(--w2g-ink) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  box-shadow: none !important;
  outline: none !important;
}

body.app-shell-v2 #teams.team-page-v2 #teamSearch:focus,
body.app-shell-guest #teams.team-page-v2 #teamSearch:focus,
body.app-shell-v2 #members.member-page-v2 #memberSearch:focus,
body.app-shell-v2 #members #memberSearch:focus,
body.app-shell-guest #members.member-page-v2 #memberSearch:focus,
body.app-shell-guest #members #memberSearch:focus {
  border-color: var(--w2g-orange-line) !important;
  background: var(--w2g-surface) !important;
  outline: none !important;
  box-shadow: none !important;
}

body.app-shell-v2 #teams.team-page-v2 #teamSearch::placeholder,
body.app-shell-guest #teams.team-page-v2 #teamSearch::placeholder,
body.app-shell-v2 #members.member-page-v2 #memberSearch::placeholder,
body.app-shell-v2 #members #memberSearch::placeholder,
body.app-shell-guest #members.member-page-v2 #memberSearch::placeholder,
body.app-shell-guest #members #memberSearch::placeholder {
  color: var(--w2g-muted) !important;
  font-weight: 400 !important;
}

body.app-shell-v2 #teams.team-page-v2 .team-search-icon,
body.app-shell-guest #teams.team-page-v2 .team-search-icon,
body.app-shell-v2 #teams.team-page-v2 .reference-search-icon,
body.app-shell-guest #teams.team-page-v2 .reference-search-icon,
body.app-shell-v2 #members.member-page-v2 .member-search-icon,
body.app-shell-v2 #members.member-page-v2 .reference-search-icon,
body.app-shell-v2 #members .member-search-icon,
body.app-shell-v2 #members .reference-search-icon,
body.app-shell-guest #members.member-page-v2 .member-search-icon,
body.app-shell-guest #members.member-page-v2 .reference-search-icon,
body.app-shell-guest #members .member-search-icon,
body.app-shell-guest #members .reference-search-icon {
  position: absolute !important;
  left: 9px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 2 !important;
  display: inline-flex !important;
  width: 14px !important;
  height: 14px !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--w2g-muted) !important;
  pointer-events: none !important;
  line-height: 0 !important;
  clip: auto !important;
  overflow: visible !important;
}

body.app-shell-v2 #teams.team-page-v2 .team-search-icon svg,
body.app-shell-guest #teams.team-page-v2 .team-search-icon svg,
body.app-shell-v2 #teams.team-page-v2 .reference-search-icon svg,
body.app-shell-guest #teams.team-page-v2 .reference-search-icon svg,
body.app-shell-v2 #members.member-page-v2 .member-search-icon svg,
body.app-shell-v2 #members.member-page-v2 .reference-search-icon svg,
body.app-shell-v2 #members .member-search-icon svg,
body.app-shell-v2 #members .reference-search-icon svg,
body.app-shell-guest #members.member-page-v2 .member-search-icon svg,
body.app-shell-guest #members.member-page-v2 .reference-search-icon svg,
body.app-shell-guest #members .member-search-icon svg,
body.app-shell-guest #members .reference-search-icon svg {
  width: 14px !important;
  height: 14px !important;
  display: block !important;
  flex: none !important;
}

body.app-shell-v2 #teams.team-page-v2 .team-quick-filters,
body.app-shell-guest #teams.team-page-v2 .team-quick-filters {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 6px !important;
  overflow: visible !important;
}

body.app-shell-v2 #teams.team-page-v2 .team-quick-filter,
body.app-shell-guest #teams.team-page-v2 .team-quick-filter {
  min-height: 30px !important;
  padding: 4px 10px !important;
  border-color: var(--w2g-line) !important;
  border-radius: 999px !important;
  background: var(--w2g-surface-2) !important;
  color: var(--w2g-body) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  box-shadow: none !important;
}

body.app-shell-v2 #teams.team-page-v2 #teamFilterToggle,
body.app-shell-guest #teams.team-page-v2 #teamFilterToggle,
body.app-shell-v2 #members.member-page-v2 #memberFilterToggle,
body.app-shell-v2 #members #memberFilterToggle,
body.app-shell-guest #members.member-page-v2 #memberFilterToggle,
body.app-shell-guest #members #memberFilterToggle {
  min-height: 30px !important;
  padding: 4px 11px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

body.app-shell-v2 #teams.team-page-v2 .filter-toolbar label:has(#teamSort),
body.app-shell-guest #teams.team-page-v2 .filter-toolbar label:has(#teamSort),
body.app-shell-v2 #members.member-page-v2 .filter-toolbar label:has(#memberSort),
body.app-shell-v2 #members .filter-toolbar label:has(#memberSort),
body.app-shell-guest #members.member-page-v2 .filter-toolbar label:has(#memberSort),
body.app-shell-guest #members .filter-toolbar label:has(#memberSort) {
  gap: 6px !important;
}

body.app-shell-v2 #teams.team-page-v2 #teamSort,
body.app-shell-guest #teams.team-page-v2 #teamSort,
body.app-shell-v2 #members.member-page-v2 #memberSort,
body.app-shell-v2 #members #memberSort,
body.app-shell-guest #members.member-page-v2 #memberSort,
body.app-shell-guest #members #memberSort {
  min-height: 30px !important;
  min-width: 130px !important;
  padding: 4px 26px 4px 9px !important;
  border-radius: 8px !important;
  border-color: var(--w2g-line) !important;
  background: var(--w2g-surface-2) !important;
  color: var(--w2g-ink) !important;
  font-size: 12.5px !important;
  box-shadow: none !important;
}

body.app-shell-v2 #teams.team-page-v2 .filter-toolbar.reference-filter-row #createTeamButton,
body.app-shell-guest #teams.team-page-v2 .filter-toolbar.reference-filter-row #createTeamButton {
  min-height: 30px !important;
  margin-left: auto !important;
  padding: 4px 12px !important;
  border-radius: 8px !important;
  font-size: 12.5px !important;
  line-height: 1 !important;
  align-self: center !important;
  box-shadow: none !important;
}

body.app-shell-v2 #teams.team-page-v2 #teamActiveFilters.active-filter-row,
body.app-shell-guest #teams.team-page-v2 #teamActiveFilters.active-filter-row,
body.app-shell-v2 #members.member-page-v2 #memberActiveFilters.active-filter-row,
body.app-shell-v2 #members #memberActiveFilters.active-filter-row,
body.app-shell-guest #members.member-page-v2 #memberActiveFilters.active-filter-row,
body.app-shell-guest #members #memberActiveFilters.active-filter-row {
  margin: 4px -10px -6px !important;
  padding: 5px 10px !important;
  border-top: 1px solid var(--w2g-line) !important;
  border-radius: 0 0 10px 10px !important;
  background: transparent !important;
  box-shadow: none !important;
  gap: 5px !important;
}

html[data-theme="dark"] body.app-shell-v2 #teams.team-page-v2 #teamSearch,
html[data-theme="dark"] body.app-shell-guest #teams.team-page-v2 #teamSearch,
html[data-theme="dark"] body.app-shell-v2 #members.member-page-v2 #memberSearch,
html[data-theme="dark"] body.app-shell-v2 #members #memberSearch,
html[data-theme="dark"] body.app-shell-guest #members.member-page-v2 #memberSearch,
html[data-theme="dark"] body.app-shell-guest #members #memberSearch,
html[data-theme="dark"] body.app-shell-v2 #teams.team-page-v2 #teamSort,
html[data-theme="dark"] body.app-shell-guest #teams.team-page-v2 #teamSort,
html[data-theme="dark"] body.app-shell-v2 #members.member-page-v2 #memberSort,
html[data-theme="dark"] body.app-shell-v2 #members #memberSort,
html[data-theme="dark"] body.app-shell-guest #members.member-page-v2 #memberSort,
html[data-theme="dark"] body.app-shell-guest #members #memberSort {
  background: var(--w2g-surface-2) !important;
  border-color: var(--w2g-line) !important;
  color: var(--w2g-ink) !important;
}

html[data-theme="dark"] body.app-shell-v2 #teams.team-page-v2 #teamSearch:focus,
html[data-theme="dark"] body.app-shell-guest #teams.team-page-v2 #teamSearch:focus,
html[data-theme="dark"] body.app-shell-v2 #members.member-page-v2 #memberSearch:focus,
html[data-theme="dark"] body.app-shell-v2 #members #memberSearch:focus,
html[data-theme="dark"] body.app-shell-guest #members.member-page-v2 #memberSearch:focus,
html[data-theme="dark"] body.app-shell-guest #members #memberSearch:focus {
  background: var(--w2g-surface) !important;
  border-color: var(--w2g-orange-line) !important;
}

@media (max-width: 900px) {
  body.app-shell-v2 #teams.team-page-v2 .filter-toolbar.reference-filter-row,
  body.app-shell-guest #teams.team-page-v2 .filter-toolbar.reference-filter-row,
  body.app-shell-v2 #members.member-page-v2 .filter-toolbar.reference-filter-row,
  body.app-shell-v2 #members .filter-toolbar.reference-filter-row,
  body.app-shell-guest #members.member-page-v2 .filter-toolbar.reference-filter-row,
  body.app-shell-guest #members .filter-toolbar.reference-filter-row {
    flex-wrap: wrap !important;
  }

  body.app-shell-v2 #teams.team-page-v2 .filter-search-field,
  body.app-shell-guest #teams.team-page-v2 .filter-search-field,
  body.app-shell-v2 #members.member-page-v2 .filter-search-field,
  body.app-shell-v2 #members .filter-search-field,
  body.app-shell-guest #members.member-page-v2 .filter-search-field,
  body.app-shell-guest #members .filter-search-field {
    flex: 1 1 auto !important;
    width: clamp(160px, 40%, 320px) !important;
  }
}

@media (max-width: 760px) {
  body.app-shell-v2 #teams.team-page-v2 .filter-toolbar.reference-filter-row,
  body.app-shell-v2 #members.member-page-v2 .filter-toolbar.reference-filter-row,
  body.app-shell-v2 #members .filter-toolbar.reference-filter-row {
    gap: 6px !important;
  }

  body.app-shell-v2 #teams.team-page-v2 .filter-search-field,
  body.app-shell-v2 #members.member-page-v2 .filter-search-field,
  body.app-shell-v2 #members .filter-search-field {
    flex: 1 1 100% !important;
    width: 100% !important;
  }

  body.app-shell-v2 #teams.team-page-v2 .team-quick-filters {
    flex: 1 1 100% !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
  }

  body.app-shell-v2 #teams.team-page-v2 .filter-toolbar.reference-filter-row #createTeamButton {
    flex: 1 1 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    justify-content: center !important;
  }
}

/* Hotfix: Find Members search collision
   Older global search-field pseudo elements can still draw over the
   injected member search icon. Keep Members to one input border and one icon. */
body.app-shell-v2 #members.member-page-v2 .filter-search-field::before,
body.app-shell-v2 #members.member-page-v2 .filter-search-field::after,
body.app-shell-v2 #members .filter-search-field::before,
body.app-shell-v2 #members .filter-search-field::after,
body.app-shell-guest #members.member-page-v2 .filter-search-field::before,
body.app-shell-guest #members.member-page-v2 .filter-search-field::after,
body.app-shell-guest #members .filter-search-field::before,
body.app-shell-guest #members .filter-search-field::after {
  content: none !important;
  display: none !important;
}

body.app-shell-v2 #members.member-page-v2 .filter-search-field > .member-search-icon,
body.app-shell-v2 #members.member-page-v2 .filter-search-field > .reference-search-icon,
body.app-shell-v2 #members .filter-search-field > .member-search-icon,
body.app-shell-v2 #members .filter-search-field > .reference-search-icon,
body.app-shell-guest #members.member-page-v2 .filter-search-field > .member-search-icon,
body.app-shell-guest #members.member-page-v2 .filter-search-field > .reference-search-icon,
body.app-shell-guest #members .filter-search-field > .member-search-icon,
body.app-shell-guest #members .filter-search-field > .reference-search-icon {
  left: 9px !important;
  right: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

body.app-shell-v2 #members.member-page-v2 .filter-search-field > span:not(.member-search-icon):not(.reference-search-icon),
body.app-shell-v2 #members .filter-search-field > span:not(.member-search-icon):not(.reference-search-icon),
body.app-shell-guest #members.member-page-v2 .filter-search-field > span:not(.member-search-icon):not(.reference-search-icon),
body.app-shell-guest #members .filter-search-field > span:not(.member-search-icon):not(.reference-search-icon) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

body.app-shell-v2 #members.member-page-v2 #memberSearch,
body.app-shell-v2 #members #memberSearch,
body.app-shell-guest #members.member-page-v2 #memberSearch,
body.app-shell-guest #members #memberSearch {
  padding-left: 30px !important;
  background-image: none !important;
}

/* ============================================================
   Profile page — Matching profile layout v2
   Scope: #profile ONLY.
   Other pages (Mission Center, Competitions, Find Team/Members,
   Requests, Dashboard) are not touched.
   ============================================================ */

/* ── 1. Two-column grid ──────────────────────────────────────── */
body.app-shell-v2 #profile .profile-v2-layout {
  display: grid;
  grid-template-columns: 1fr 330px;
  column-gap: 16px;
  row-gap: 0;
  align-items: start;
  margin-bottom: 16px;
}

body.app-shell-v2 #profile .profile-v2-left,
body.app-shell-v2 #profile .profile-v2-right {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── 2. Cards ─────────────────────────────────────────────────── */
body.app-shell-v2 #profile .profile-v2-card {
  padding: 18px 20px;
  border: 1px solid var(--w2g-line);
  border-radius: 14px;
  background: var(--w2g-surface);
  box-shadow: none;
}

html[data-theme="dark"] body.app-shell-v2 #profile .profile-v2-card {
  background: var(--w2g-surface);
  border-color: var(--w2g-line);
}

/* ── 3. Card label (uppercase eyebrow-style) ──────────────────── */
body.app-shell-v2 #profile .profile-v2-card-label {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--w2g-muted);
}

/* ── 4. Identity card ─────────────────────────────────────────── */
body.app-shell-v2 #profile .profile-identity-top {
  display: flex;
  align-items: center;
  gap: 14px;
}

body.app-shell-v2 #profile .profile-identity-v2 .member-avatar.large {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  font-size: 22px;
  border-radius: 14px;
}

body.app-shell-v2 #profile .profile-identity-meta {
  min-width: 0;
  flex: 1 1 auto;
}

body.app-shell-v2 #profile .profile-v2-name {
  margin: 0 0 4px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--w2g-ink);
}

body.app-shell-v2 #profile .profile-name-row {
  min-width: 0;
}

body.app-shell-v2 #profile .profile-mobile-edit-button {
  display: none;
}

body.app-shell-v2 #profile .profile-v2-meta {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--w2g-body);
  line-height: 1.4;
}

body.app-shell-v2 #profile .profile-v2-status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

body.app-shell-v2 #profile .profile-v2-status-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border: 1px solid var(--w2g-line);
  border-radius: 999px;
  background: var(--w2g-surface-2);
  color: var(--w2g-body);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.4;
}

/* ── 4b. Social icon row — shared style (profile page + modals/cards) ─ */
body.app-shell-v2 .profile-social-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
body.app-shell-v2 .profile-social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--w2g-line);
  border-radius: 8px;
  background: var(--w2g-surface-2);
  color: var(--w2g-body);
  font-size: 18px;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
}
body.app-shell-v2 .profile-social-icon:hover {
  border-color: var(--w2g-orange-line);
  background: var(--w2g-orange-soft);
  color: var(--w2g-orange-ink);
}
body.app-shell-v2 .profile-social-icon .social-brand-icon {
  display: block;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

/* ── 4b. Social icon row inside identity card ─────────────────── */
body.app-shell-v2 #profile .profile-identity-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--w2g-line);
}

body.app-shell-v2 #profile .profile-social-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1 1 auto;
}

body.app-shell-v2 #profile .profile-social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--w2g-line);
  border-radius: 8px;
  background: var(--w2g-surface-2);
  color: var(--w2g-body);
  font-size: 18px;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
}

body.app-shell-v2 #profile .profile-social-icon:hover {
  border-color: var(--w2g-orange-line);
  background: var(--w2g-orange-soft);
  color: var(--w2g-orange-ink);
}

body.app-shell-v2 #profile .profile-social-edit {
  font-size: 12px !important;
  padding: 3px 10px !important;
  min-height: 26px !important;
  border-radius: 7px !important;
  flex-shrink: 0;
}

/* ── 4a. Avatar column: PFP + Change photo / Remove directly beneath ─── */
body.app-shell-v2 #profile .profile-avatar-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 auto;
  gap: 4px;
}

body.app-shell-v2 #profile .profile-avatar-change-link {
  padding: 2px 0;
  color: var(--w2g-orange-strong);
  font-size: 11.5px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

body.app-shell-v2 #profile .profile-avatar-change-link:hover,
body.app-shell-v2 #profile .profile-avatar-change-link:focus-visible {
  text-decoration: underline;
}

body.app-shell-v2 #profile .profile-avatar-remove-link {
  padding: 0;
  border: none;
  background: transparent;
  color: var(--w2g-muted);
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

body.app-shell-v2 #profile .profile-avatar-remove-link:hover,
body.app-shell-v2 #profile .profile-avatar-remove-link:focus-visible {
  text-decoration: underline;
}

/* ── 5. About card ────────────────────────────────────────────── */
body.app-shell-v2 #profile .profile-about-body {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--w2g-body);
}

body.app-shell-v2 #profile .profile-university-inline {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--w2g-line);
}

body.app-shell-v2 #profile .profile-university-inline .profile-university-card {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  margin: 0 !important;
}

/* ── 6. Skills + Interests card ──────────────────────────────── */
body.app-shell-v2 #profile .profile-interests-section {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--w2g-line);
}

body.app-shell-v2 #profile .profile-v2-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

body.app-shell-v2 #profile .profile-v2-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border: 1px solid var(--w2g-line);
  border-radius: 7px;
  background: var(--w2g-surface-2);
  color: var(--w2g-body);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}

body.app-shell-v2 #profile .profile-v2-chip-pill {
  border-radius: 999px;
  font-weight: 500;
}

/* ── 7. Empty / helper text ──────────────────────────────────── */
body.app-shell-v2 #profile .profile-v2-empty {
  margin: 0;
  font-size: 13px;
  color: var(--w2g-muted);
  line-height: 1.5;
}

body.app-shell-v2 #profile .profile-v2-empty-sub {
  margin-top: 3px;
}

/* ── 8. Profile strength card ────────────────────────────────── */
body.app-shell-v2 #profile .profile-strength-helper {
  margin: 0 0 12px;
  font-size: 12.5px;
  color: var(--w2g-muted);
  line-height: 1.5;
}

body.app-shell-v2 #profile .profile-strength-score-row {
  display: flex;
  align-items: baseline;
  gap: 3px;
  margin-bottom: 8px;
}

body.app-shell-v2 #profile .profile-strength-num {
  font-size: 26px;
  font-weight: 800;
  color: var(--w2g-ink);
  line-height: 1;
}

body.app-shell-v2 #profile .profile-strength-denom {
  font-size: 13px;
  color: var(--w2g-muted);
  margin-right: 6px;
}

body.app-shell-v2 #profile .profile-strength-status {
  font-size: 12px;
  font-weight: 700;
  color: var(--w2g-orange);
}

body.app-shell-v2 #profile .profile-strength-track {
  height: 5px;
  border-radius: 999px;
  background: var(--w2g-line);
  overflow: hidden;
  margin-bottom: 14px;
}

body.app-shell-v2 #profile .profile-strength-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--w2g-orange);
  transition: width 0.4s ease;
}

body.app-shell-v2 #profile .profile-strength-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

body.app-shell-v2 #profile .profile-strength-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
}

body.app-shell-v2 #profile .profile-strength-item.is-done {
  color: var(--w2g-body);
}

body.app-shell-v2 #profile .profile-strength-item.is-todo {
  color: var(--w2g-muted);
}

body.app-shell-v2 #profile .profile-strength-icon {
  flex: 0 0 14px;
  width: 14px;
  text-align: center;
  font-size: 11px;
}

body.app-shell-v2 #profile .profile-strength-item.is-done .profile-strength-icon {
  color: var(--w2g-orange);
  font-weight: 700;
}

body.app-shell-v2 #profile .profile-strength-item--bonus {
  margin-top: 2px;
  padding-top: 7px;
  border-top: 1px dashed var(--w2g-line);
}

body.app-shell-v2 #profile .profile-strength-bonus-tag {
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--w2g-orange-soft);
  color: var(--w2g-orange-strong);
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* ── 4c. Soft, non-blocking social links suggestion card ───────── */
body.app-shell-v2 #profile .profile-social-suggestion {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid var(--w2g-orange-line);
  border-radius: var(--w2g-r-md);
  background: var(--w2g-orange-soft);
}

body.app-shell-v2 #profile .profile-social-suggestion-copy {
  flex: 1 1 220px;
  min-width: 0;
}

body.app-shell-v2 #profile .profile-social-suggestion-badge {
  display: inline-flex;
  align-items: center;
  height: 17px;
  margin-bottom: 6px;
  padding: 0 6px;
  border-radius: 4px;
  background: var(--w2g-orange-strong);
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

body.app-shell-v2 #profile .profile-social-suggestion-copy strong {
  display: block;
  margin-bottom: 2px;
  color: var(--w2g-orange-ink);
  font-size: 13.5px;
  font-weight: 800;
}

body.app-shell-v2 #profile .profile-social-suggestion-copy p {
  margin: 0;
  color: var(--w2g-body);
  font-size: 12.5px;
  line-height: 1.5;
}

body.app-shell-v2 #profile .profile-social-suggestion-cta {
  flex-shrink: 0;
  padding: 7px 14px;
  border: 1px solid var(--w2g-orange-line);
  border-radius: var(--w2g-r-pill);
  background: var(--w2g-orange-strong);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

body.app-shell-v2 #profile .profile-social-suggestion-cta:hover,
body.app-shell-v2 #profile .profile-social-suggestion-cta:focus-visible {
  background: var(--w2g-orange);
  border-color: var(--w2g-orange);
}

body.app-shell-v2 #profile .profile-social-suggestion-cta:focus-visible {
  outline: 2px solid var(--w2g-orange-strong);
  outline-offset: 2px;
}

/* ── 9. Team card ─────────────────────────────────────────────── */
body.app-shell-v2 #profile .profile-team-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

body.app-shell-v2 #profile .profile-team-name {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--w2g-ink);
  line-height: 1.3;
}

body.app-shell-v2 #profile .profile-team-role-label {
  margin: 0;
  font-size: 12px;
  color: var(--w2g-muted);
}

body.app-shell-v2 #profile .profile-team-competition {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--w2g-body);
  line-height: 1.4;
}

body.app-shell-v2 #profile .profile-team-action--link {
  align-self: flex-start;
  margin-top: 6px;
  padding: 2px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--w2g-orange);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

body.app-shell-v2 #profile .profile-team-action--link:hover {
  color: var(--w2g-orange-strong);
  text-decoration: underline;
}

body.app-shell-v2 #profile .profile-team-action--link:focus-visible {
  outline: 2px solid var(--w2g-orange-strong);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── 10. Links card ───────────────────────────────────────────── */
body.app-shell-v2 #profile .profile-links-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

body.app-shell-v2 #profile .profile-link-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 13px;
  border: 1px solid var(--w2g-line);
  border-radius: 999px;
  background: var(--w2g-surface-2);
  color: var(--w2g-body);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.12s, color 0.12s;
}

body.app-shell-v2 #profile a.profile-link-chip:hover {
  border-color: var(--w2g-orange-line);
  color: var(--w2g-orange-ink);
  background: var(--w2g-orange-soft);
}

body.app-shell-v2 #profile .profile-edit-links-btn {
  font-size: 12px !important;
  padding: 3px 10px !important;
  min-height: 26px !important;
  border-radius: 7px !important;
}

/* ── 11. Section title row — edit profile button (secondary override) */
body.app-shell-v2 #profile .section-title-row #editProfileButton.button.secondary {
  font-size: 13px;
  font-weight: 600;
}

/* ── 12. Suppress old profile card styles on this new layout ──── */
body.app-shell-v2 #profile .profile-v2-layout .profile-identity-card,
body.app-shell-v2 #profile .profile-v2-layout .profile-photo-panel,
body.app-shell-v2 #profile .profile-v2-layout .profile-social-action-row,
body.app-shell-v2 #profile .profile-v2-layout .profile-skill-row,
body.app-shell-v2 #profile .profile-v2-layout .profile-saved-redirect-card,
body.app-shell-v2 #profile .profile-v2-layout .saved-items-card {
  display: none !important;
}

/* ── 13. Dark mode ────────────────────────────────────────────── */
html[data-theme="dark"] body.app-shell-v2 #profile .profile-v2-chip {
  background: var(--w2g-surface-2);
  border-color: var(--w2g-line);
  color: var(--w2g-body);
}

html[data-theme="dark"] body.app-shell-v2 #profile .profile-link-chip {
  background: var(--w2g-surface-2);
  border-color: var(--w2g-line);
  color: var(--w2g-body);
}

html[data-theme="dark"] body.app-shell-v2 #profile .profile-strength-track {
  background: var(--w2g-line);
}

/* ── 14. Mobile: single column with correct stacking order ─────── */
@media (max-width: 860px) {
  body.app-shell-v2 #profile .profile-v2-layout {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  /* display:contents makes column children direct flex children
     so CSS order can reorder across left/right columns */
  body.app-shell-v2 #profile .profile-v2-left,
  body.app-shell-v2 #profile .profile-v2-right {
    display: contents;
  }

  body.app-shell-v2 #profile .profile-identity-v2 { order: 1; }
  body.app-shell-v2 #profile .profile-strength-v2  { order: 2; }
  body.app-shell-v2 #profile .profile-about-v2     { order: 3; }
  body.app-shell-v2 #profile .profile-skills-v2    { order: 4; }
  body.app-shell-v2 #profile .profile-team-v2      { order: 5; }
}

/* ── 15. No horizontal overflow ──────────────────────────────── */
body.app-shell-v2 #profile .profile-v2-layout {
  max-width: 100%;
  overflow: hidden;
}
body.app-shell-v2 #profile .profile-v2-left,
body.app-shell-v2 #profile .profile-v2-right {
  min-width: 0;
}

/* ============================================================
   GUEST HOME V2
   ------------------------------------------------------------
   Extends the authenticated .hv2-* design system to the guest
   home surface. Scoped to body.app-shell-guest #home so auth
   styles and all other views are unaffected.
   ============================================================ */

body.app-shell-guest #home.view { padding-top: 0; }
body.app-shell-guest #home .home-mission-v2 { gap: 0; }
body.app-shell-guest #home .guest-landing-v2 { display: flex; flex-direction: column; gap: 30px; padding-top: 18px; }

body.app-shell-guest #home .hv2-eyebrow {
  font-size: 11px; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--w2g-muted);
}
body.app-shell-guest #home .hv2-card-sub { margin: 0 0 12px; font-size: 12.5px; color: var(--w2g-muted); }


/* Hero — two-column grid: copy left, featured match right */
body.app-shell-guest #home .guest-hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 32px; align-items: start;
}
body.app-shell-guest #home .guest-hero-copy { display: flex; flex-direction: column; gap: 14px; max-width: 620px; }
body.app-shell-guest #home .guest-hero-title {
  margin: 0; font-size: 56px; font-weight: 800; letter-spacing: -0.03em;
  line-height: 1; color: var(--w2g-ink);
}
body.app-shell-guest #home .guest-hero-accent { color: var(--w2g-orange); }
body.app-shell-guest #home .guest-hero-sub { margin: 0; max-width: 540px; font-size: 15px; line-height: 1.6; color: var(--w2g-muted); }
body.app-shell-guest #home .guest-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
body.app-shell-guest #home .guest-hero-note {
  display: flex; align-items: center; gap: 7px; margin: 2px 0 0; font-size: 12.5px; color: var(--w2g-muted);
}
body.app-shell-guest #home .guest-hero-note-icon { display: flex; flex: 0 0 auto; color: var(--w2g-success); }
body.app-shell-guest #home .guest-hero-note-icon svg { width: 15px; height: 15px; }

/* Hero — featured match card */
body.app-shell-guest #home .guest-hero-match-card {
  display: flex; flex-direction: column; gap: 10px; padding: 20px 20px 16px;
  border: 1px solid var(--w2g-line); border-radius: 16px;
  background: var(--w2g-surface); box-shadow: var(--w2g-shadow-md);
}
body.app-shell-guest #home .guest-hero-match-card-empty { gap: 12px; }
body.app-shell-guest #home .guest-match-eyebrow {
  font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--w2g-muted);
}
body.app-shell-guest #home .guest-match-badge {
  display: inline-flex; align-self: flex-start; padding: 3px 9px; border-radius: 999px;
  background: var(--w2g-orange-soft); color: var(--w2g-orange-ink); font-size: 11px; font-weight: 700;
}
body.app-shell-guest #home .hv2-avatar {
  display: grid; flex: 0 0 auto; width: 30px; height: 30px; place-items: center;
  border-radius: 50%; background: var(--w2g-orange-soft); color: var(--w2g-orange-ink);
  font-size: 12px; font-weight: 800;
}
body.app-shell-guest #home .hv2-match-lead { display: flex; align-items: center; gap: 11px; }
body.app-shell-guest #home .hv2-lead-copy { min-width: 0; }
body.app-shell-guest #home .hv2-lead-copy strong { display: block; font-size: 14px; font-weight: 700; color: var(--w2g-ink); line-height: 1.25; }
body.app-shell-guest #home .hv2-lead-copy small { font-size: 11.5px; color: var(--w2g-muted); }
body.app-shell-guest #home .guest-match-coverage { margin: 0; font-size: 12.5px; color: var(--w2g-muted); }
body.app-shell-guest #home .guest-match-tags { display: flex; flex-wrap: wrap; gap: 6px; }
body.app-shell-guest #home .hv2-meter { display: flex; flex-direction: column; gap: 7px; margin: 2px 0; }
body.app-shell-guest #home .hv2-meter-head { display: flex; align-items: center; justify-content: space-between; }
body.app-shell-guest #home .hv2-meter-head span { font-size: 12px; font-weight: 700; color: var(--w2g-muted); }
body.app-shell-guest #home .hv2-meter-head strong { font-size: 13px; font-weight: 800; color: var(--w2g-ink); font-variant-numeric: tabular-nums; }
body.app-shell-guest #home .hv2-meter-head strong small { font-size: 10.5px; font-weight: 700; color: var(--w2g-muted); }
body.app-shell-guest #home .hv2-meter-track { height: 7px; border-radius: 999px; background: var(--w2g-surface-2); overflow: hidden; }
body.app-shell-guest #home .hv2-meter-track span { display: block; height: 100%; border-radius: 999px; background: var(--w2g-orange); }
body.app-shell-guest #home .guest-match-locked {
  display: flex; align-items: center; gap: 8px; margin: 2px 0;
  padding: 9px 12px; border: 1px dashed var(--w2g-line); border-radius: 10px;
  background: var(--w2g-surface-2);
}
body.app-shell-guest #home .guest-match-locked-icon {
  display: grid; flex: 0 0 auto; width: 26px; height: 26px; place-items: center;
  border-radius: 50%; background: var(--w2g-surface); color: var(--w2g-orange);
}
body.app-shell-guest #home .guest-match-locked-icon svg { width: 14px; height: 14px; }
body.app-shell-guest #home .guest-match-locked-label { font-size: 12.5px; font-weight: 700; color: var(--w2g-ink-2); }
body.app-shell-guest #home .guest-match-reason { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--w2g-surface-2); font-size: 12px; line-height: 1.5; }
body.app-shell-guest #home .guest-match-helper { margin: 0; font-size: 11.5px; }

/* Compact metrics strip — quick proof row inside the hero-left column,
   under the CTA/note. Not a full-width dashboard divider. */
body.app-shell-guest #home .guest-metrics-strip {
  display: flex; flex-wrap: wrap; gap: 32px; max-width: 520px;
  margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--w2g-line);
}
body.app-shell-guest #home .guest-metric {
  display: flex; flex-direction: column; gap: 2px; padding: 0;
  border: 0; background: transparent; cursor: pointer; text-align: left;
}
body.app-shell-guest #home .guest-metric strong { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; color: var(--w2g-ink); }
body.app-shell-guest #home .guest-metric span { font-size: 11.5px; font-weight: 600; color: var(--w2g-muted); white-space: nowrap; }

/* "The loop" — how it works */
body.app-shell-guest #home .guest-loop-head { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: 18px; text-align: center; }
body.app-shell-guest #home .guest-loop-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--w2g-orange); }
body.app-shell-guest #home .guest-loop-head h2 { margin: 0; font-size: 22px; font-weight: 800; color: var(--w2g-ink); }
body.app-shell-guest #home .guest-loop-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
body.app-shell-guest #home .guest-loop-step {
  position: relative; display: flex; flex-direction: column; gap: 8px; padding: 18px 16px;
  border: 1px solid var(--w2g-line); border-radius: 14px;
  background: var(--w2g-surface); box-shadow: var(--w2g-shadow-sm);
}
body.app-shell-guest #home .guest-loop-step-num { position: absolute; top: 12px; right: 14px; font-size: 11px; font-weight: 800; color: var(--w2g-muted); }
body.app-shell-guest #home .guest-loop-step .hv2-stat-ic {
  display: grid; width: 32px; height: 32px; place-items: center;
  border-radius: 9px; background: var(--w2g-surface-2); color: var(--w2g-orange);
}
body.app-shell-guest #home .guest-loop-step .hv2-stat-ic svg { width: 16px; height: 16px; }
body.app-shell-guest #home .guest-loop-step strong { font-size: 13px; font-weight: 700; color: var(--w2g-ink); }
body.app-shell-guest #home .guest-loop-step-desc { margin: 0; font-size: 11.5px; line-height: 1.45; color: var(--w2g-muted); }

/* "Browse before you sign up" — live marketplace preview with tabs */
body.app-shell-guest #home .guest-live-section {
  display: flex; flex-direction: column; gap: 16px;
}
body.app-shell-guest #home .guest-live-header {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px;
}
body.app-shell-guest #home .guest-live-eyebrow {
  font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--w2g-orange);
}
body.app-shell-guest #home .guest-live-header h2 { margin: 4px 0 4px; font-size: 22px; font-weight: 800; color: var(--w2g-ink); }
body.app-shell-guest #home .guest-live-header .hv2-card-sub { margin: 0; max-width: 480px; }
body.app-shell-guest #home .guest-live-tabs {
  display: flex; flex-wrap: wrap; gap: 6px; padding: 4px; border-radius: 12px;
  background: var(--w2g-surface-2); align-self: flex-start;
}
body.app-shell-guest #home .guest-live-tab {
  padding: 7px 14px; border: 0; border-radius: 9px; background: transparent;
  color: var(--w2g-muted); font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
body.app-shell-guest #home .guest-live-tab:hover { color: var(--w2g-ink); }
body.app-shell-guest #home .guest-live-tab.active { background: var(--w2g-surface); color: var(--w2g-orange-ink); box-shadow: var(--w2g-shadow-sm); }
body.app-shell-guest #home .guest-live-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;
}
body.app-shell-guest #home .guest-live-card {
  display: flex; flex-direction: column; gap: 8px; padding: 16px;
  border: 1px solid var(--w2g-line); border-radius: 14px;
  background: var(--w2g-surface); box-shadow: var(--w2g-shadow-sm);
}
body.app-shell-guest #home .guest-live-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
body.app-shell-guest #home .guest-live-card-badge {
  display: inline-flex; padding: 3px 9px; border-radius: 999px;
  background: var(--w2g-orange-soft); color: var(--w2g-orange-ink); font-size: 10.5px; font-weight: 700; white-space: nowrap;
}
body.app-shell-guest #home .guest-live-card-count { font-size: 11px; font-weight: 700; color: var(--w2g-muted); white-space: nowrap; }
body.app-shell-guest #home .guest-live-card-title { margin: 0; font-size: 14.5px; font-weight: 800; color: var(--w2g-ink); line-height: 1.3; }
body.app-shell-guest #home .guest-live-card-meta { margin: 0; font-size: 11.5px; color: var(--w2g-muted); }
body.app-shell-guest #home .guest-live-card-summary {
  margin: 0; font-size: 12px; line-height: 1.5; color: var(--w2g-ink-2);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
body.app-shell-guest #home .guest-live-card-tags { display: flex; flex-wrap: wrap; gap: 6px; }
body.app-shell-guest #home .guest-live-card-note { margin: 0; font-size: 11px; }
body.app-shell-guest #home .guest-live-card-footer { margin-top: auto; padding-top: 4px; }
body.app-shell-guest #home .guest-live-muted-link {
  padding: 0; border: 0; background: transparent; color: var(--w2g-orange-ink);
  font-size: 12px; font-weight: 700; cursor: pointer; text-align: left;
}
body.app-shell-guest #home .guest-live-muted-link:hover { text-decoration: underline; }
body.app-shell-guest #home .guest-live-empty {
  grid-column: 1 / -1; padding: 24px; border: 1px dashed var(--w2g-line-strong); border-radius: 14px;
  background: var(--w2g-surface-2); color: var(--w2g-muted); font-size: 12.5px; text-align: center;
}
body.app-shell-guest #home .guest-live-more-link { align-self: center; }

/* "More than a listing site" — Mission Center preview, below the live section */
body.app-shell-guest #home .guest-more-than-listing h2 { margin: 0 0 4px; font-size: 17px; font-weight: 800; color: var(--w2g-ink); }
body.app-shell-guest #home .guest-more-than-listing .hv2-card-sub { margin: 0 0 12px; }
body.app-shell-guest #home .guest-mission-preview-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px;
}
body.app-shell-guest #home .guest-mission-preview-item {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px;
  border: 1px dashed var(--w2g-line-strong); border-radius: 14px;
  background: var(--w2g-surface-2); color: var(--w2g-muted);
  font-size: 12.5px; font-weight: 600; text-align: center;
}
body.app-shell-guest #home .guest-mission-preview-item svg { width: 18px; height: 18px; color: var(--w2g-orange); }

/* Register modal helper copy */
.register-modal .register-modal-helper { margin: -4px 0 12px; font-size: 12.5px; }

/* Responsive */
@media (max-width: 1100px) {
  body.app-shell-guest #home .guest-hero-title { font-size: 44px; }
}
@media (max-width: 960px) {
  body.app-shell-guest #home .guest-hero-grid { grid-template-columns: 1fr; }
  body.app-shell-guest #home .guest-loop-grid,
  body.app-shell-guest #home .guest-live-grid,
  body.app-shell-guest #home .guest-mission-preview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.app-shell-guest #home .guest-live-header { flex-direction: column; }
  body.app-shell-guest #home .guest-live-tabs { align-self: stretch; }
}
@media (max-width: 560px) {
  body.app-shell-guest #home .guest-hero-title { font-size: 32px; }
  body.app-shell-guest #home .guest-metrics-strip { gap: 20px; }
  body.app-shell-guest #home .guest-loop-grid,
  body.app-shell-guest #home .guest-live-grid,
  body.app-shell-guest #home .guest-mission-preview-grid { grid-template-columns: 1fr; }
  body.app-shell-guest #home .guest-live-tab { flex: 1 1 auto; text-align: center; }
}

/* Wide desktop: the shared .page-shell > .view cap (1180px) leaves a large
   blank strip on the right of the guest landing page on big monitors.
   Widen #home specifically (ID selector outranks .page-shell > .view) and
   spread the hero grid so the featured match card sits further right,
   without touching other guest views (competitions/teams/members) or the
   logged-in app shell. */
@media (min-width: 1500px) {
  body.app-shell-guest #home.view { width: min(100%, 1500px); max-width: 1500px; }
  body.app-shell-guest #home .guest-hero-grid {
    grid-template-columns: minmax(560px, 700px) minmax(520px, 600px);
    column-gap: clamp(64px, 8vw, 160px);
    justify-content: space-between;
  }
  body.app-shell-guest #home .guest-hero-match-card { width: 100%; max-width: 580px; justify-self: end; }
  body.app-shell-guest #home .guest-loop-grid { justify-items: center; }
  body.app-shell-guest #home .guest-loop-step { width: 100%; max-width: 360px; }
}

/* ============================================================
   GUEST HOME V2 - SIDEBAR SHELL PARITY
   Extends the authenticated sidebar/page-shell layout to
   body.app-shell-guest. Auth-only elements (account panel,
   logout, notification, beta banner suppression) are NOT
   extended here.
   ============================================================ */

body.app-shell-guest { min-height: 100vh; background: var(--w2g-bg) !important; }

body.app-shell-guest .topbar {
  position: fixed; inset: 0 auto 0 0; z-index: 90;
  width: 244px; height: 100vh;
  display: flex; flex-direction: column; align-items: stretch;
  gap: 14px; padding: 18px 12px 12px;
  background: var(--w2g-surface) !important;
  border-right: 1px solid var(--w2g-line) !important;
  border-bottom: 0 !important; box-shadow: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  overflow: hidden;
}
body.app-shell-guest .topbar .brand { width: 100%; min-width: 0; gap: 10px; padding: 2px 6px 14px; border-bottom: 1px solid var(--w2g-line); color: var(--w2g-ink); }
body.app-shell-guest .topbar .brand-mark { width: 32px; height: 32px; flex: 0 0 auto; border-radius: 9px; background: var(--w2g-orange) !important; color: #FFFFFF !important; font-size: 13px; box-shadow: none !important; }
body.app-shell-guest .topbar .brand strong { font-size: 13.5px; line-height: 1.2; letter-spacing: 0; }
body.app-shell-guest .topbar .brand small { max-width: 150px; font-size: 11.5px; color: var(--w2g-muted); line-height: 1.35; }
body.app-shell-guest .topbar .brand .brand-subtitle { max-width: none; font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

body.app-shell-guest .mobile-menu-button { display: none; }

body.app-shell-guest .main-nav { display: flex !important; flex: 1 1 auto; min-height: 0; width: 100%; flex-direction: column; gap: 12px; overflow: hidden; }
body.app-shell-guest .main-nav .mobile-nav-extras,
body.app-shell-guest .main-nav .mobile-nav-auth,
body.app-shell-guest .main-nav .mobile-drawer-feedback-btn { display: none; }

body.app-shell-guest .shell-nav-scroll { display: flex; flex: 1 1 auto; min-height: 0; flex-direction: column; gap: 12px; overflow-y: auto; padding: 0 1px 8px; scrollbar-width: thin; }
body.app-shell-guest .shell-nav-group { display: flex; flex-direction: column; gap: 3px; }
body.app-shell-guest .shell-nav-group + .shell-nav-group { margin-top: 1px; }
body.app-shell-guest .shell-nav-group-label { padding: 6px 8px 3px; color: var(--w2g-muted); font-size: 9.8px; font-weight: 600; letter-spacing: 0.105em; text-transform: uppercase; line-height: 1.2; }
body.app-shell-guest .shell-nav-group-items { display: flex; flex-direction: column; gap: 1px; }

body.app-shell-guest .main-nav .shell-nav-item { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; width: 100%; min-height: 32px; gap: 9px; padding: 5px 8px; border: 1px solid transparent; border-radius: 8px; background: transparent !important; color: var(--w2g-ink-2); font-size: 13px; font-weight: 600; text-align: left; box-shadow: none !important; line-height: 1.2; }
body.app-shell-guest .shell-nav-icon { display: grid; width: 20px; height: 20px; place-items: center; border-radius: 0; background: transparent !important; color: var(--w2g-muted); }
body.app-shell-guest .shell-nav-icon svg { width: 16px; height: 16px; stroke-width: 2; }
body.app-shell-guest .shell-nav-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; align-self: center; }
body.app-shell-guest .shell-nav-badge { min-width: 18px; padding: 1px 6px; border-radius: 999px; border-color: transparent; background: var(--w2g-surface-2); color: var(--w2g-muted); font-size: 10.5px; font-weight: 600; text-align: center; }

body.app-shell-guest .main-nav .shell-nav-item:hover { background: color-mix(in srgb, var(--w2g-surface-2) 82%, transparent) !important; color: var(--w2g-ink) !important; }
body.app-shell-guest .main-nav .shell-nav-item:hover .shell-nav-icon { color: var(--w2g-ink-2); }
body.app-shell-guest .main-nav .shell-nav-item.active { background: color-mix(in srgb, var(--w2g-orange) 10%, #FFFFFF) !important; border-color: transparent !important; color: var(--w2g-orange-ink) !important; box-shadow: none !important; }
body.app-shell-guest .main-nav .shell-nav-item.active .shell-nav-icon { background: transparent !important; color: var(--w2g-orange) !important; }
/* Suppress the legacy orange underline dot (.main-nav button.active::after in
   style-redesign-v2.css) — it leaves a stray mark below the compact guest
   nav label. Logged-in shell-nav-item is untouched. */
body.app-shell-guest .main-nav .shell-nav-item.active::after { content: none !important; display: none !important; }
html[data-theme=dark] body.app-shell-guest .main-nav .shell-nav-item.active { background: color-mix(in srgb, var(--w2g-orange) 15%, transparent) !important; }

/* Locked "After you join" nav item */
body.app-shell-guest .main-nav .shell-nav-item-locked { cursor: not-allowed; opacity: 0.6; }
body.app-shell-guest .main-nav .shell-nav-item-locked:hover { background: transparent !important; color: var(--w2g-ink-2) !important; }
body.app-shell-guest .shell-nav-lock-icon { display: grid; flex: 0 0 auto; width: 14px; height: 14px; place-items: center; color: var(--w2g-muted); }
body.app-shell-guest .shell-nav-lock-icon svg { width: 12px; height: 12px; }

/* Bottom guest CTA card inside the sidebar nav column */
body.app-shell-guest .guest-sidebar-cta {
  display: flex; flex: 0 0 auto; flex-direction: column; gap: 6px;
  margin-top: 4px; padding: 12px; border: 1px solid var(--w2g-line); border-radius: 12px;
  background: var(--w2g-surface-2);
}
body.app-shell-guest .guest-sidebar-cta-eyebrow { font-size: 9.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--w2g-orange); }
body.app-shell-guest .guest-sidebar-cta p { margin: 0; font-size: 11.5px; line-height: 1.4; color: var(--w2g-muted); }
body.app-shell-guest .guest-sidebar-cta .button { width: 100%; min-height: 32px; padding: 6px 10px; font-size: 12.5px; }

body.app-shell-guest .auth-actions { display: grid; flex: 0 0 auto; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; gap: 6px; padding: 8px 6px 0; border-top: 1px solid var(--w2g-line); background: transparent !important; box-shadow: none !important; }
body.app-shell-guest .auth-actions .language-switch { grid-column: 1 / -1; width: 100%; justify-content: stretch; min-height: 28px; border-radius: 8px; }
body.app-shell-guest .auth-actions .language-switch button { flex: 1 1 0; min-height: 28px; padding: 2px 6px; font-size: 10.5px; }
body.app-shell-guest .auth-actions .theme-toggle { min-height: 30px; padding: 0; border-radius: 8px; background: transparent !important; color: var(--w2g-muted); }
body.app-shell-guest .auth-actions .theme-toggle-label { display: none !important; }
body.app-shell-guest .auth-actions .theme-toggle:hover { background: var(--w2g-surface-2) !important; color: var(--w2g-ink) !important; }
body.app-shell-guest .auth-actions #loginShortcut,
body.app-shell-guest .auth-actions #signupShortcut { grid-column: 1 / -1; width: 100%; min-height: 30px; padding: 4px 8px; border-radius: 8px; font-size: 12px; font-weight: 600; text-align: center; }
body.app-shell-guest .auth-actions #loginShortcut { background: transparent !important; color: var(--w2g-muted); box-shadow: none !important; border-color: transparent !important; }
body.app-shell-guest .auth-actions #loginShortcut:hover { background: var(--w2g-surface-2) !important; color: var(--w2g-ink) !important; }

body.app-shell-guest .page-shell { width: auto; max-width: none; min-height: 100vh; margin-left: 244px; padding: 12px 32px 88px 30px; }
body.app-shell-guest .page-shell > .view { width: min(100%, 1180px); max-width: 1180px; margin-left: 0; margin-right: 0; }
body.app-shell-guest .page-shell > .view.active-view { display: block; }

@media (max-width: 1050px) {
  body.app-shell-guest .topbar { position: sticky; inset: auto; top: 0; width: 100%; height: auto; min-height: 64px; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; padding: 10px 14px; border-right: 0 !important; border-bottom: 1px solid var(--w2g-line) !important; overflow: visible; }
  body.app-shell-guest .topbar .brand { padding: 0; border-bottom: 0; }
  body.app-shell-guest .mobile-menu-button { display: inline-flex; }
  body.app-shell-guest .main-nav { display: none !important; }
  body.app-shell-guest .main-nav.open { display: flex !important; flex-direction: column; max-height: calc(100vh - 82px); overflow-y: auto; gap: 12px; padding-top: 8px; }
  body.app-shell-guest .main-nav.open .mobile-nav-extras,
  body.app-shell-guest .main-nav.open .mobile-nav-auth,
  body.app-shell-guest .main-nav.open .mobile-drawer-feedback-btn { display: flex; }
  body.app-shell-guest .main-nav.open .shell-nav-scroll { flex: 0 0 auto; overflow: visible; }
  body.app-shell-guest .auth-actions { display: flex; width: auto; padding: 0; border-top: 0; gap: 8px; }
  body.app-shell-guest .auth-actions #loginShortcut,
  body.app-shell-guest .auth-actions #signupShortcut { display: none !important; }
  body.app-shell-guest .page-shell { margin-left: 0; padding: 16px clamp(14px, 4vw, 24px) 72px; }
}

/* ============================================================
   GUEST DISCOVERY V2 STYLING
   ------------------------------------------------------------
   Applies V2 reference card visual quality to the three
   discovery pages (#competitions, #teams, #members) when the
   user is not logged in (body.app-shell-guest).

   Tokens are inherited from :root (light) and
   html[data-theme="dark"] — no redefinition needed here.
   Scoped entirely to body.app-shell-guest so body.app-shell-v2
   (logged-in) rules are never touched.
   ============================================================ */

/* ── Page canvas ── */
body.app-shell-guest #competitions,
body.app-shell-guest #teams,
body.app-shell-guest #members {
  background: transparent;
  border: none;
  box-shadow: none;
}

/* ── Page header: eyebrow / h1 / subtitle ── */
body.app-shell-guest #competitions .section-title-row,
body.app-shell-guest #teams .section-title-row,
body.app-shell-guest #members .section-title-row {
  margin: 0 0 22px;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}
body.app-shell-guest #competitions .eyebrow,
body.app-shell-guest #teams .eyebrow,
body.app-shell-guest #members .eyebrow {
  display: block;
  margin: 0 0 8px;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--w2g-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .10em;
  line-height: 1;
  text-transform: uppercase;
}
body.app-shell-guest #competitions h1,
body.app-shell-guest #teams h1,
body.app-shell-guest #members h1 {
  margin: 0 0 6px;
  color: var(--w2g-ink);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.15;
}
body.app-shell-guest #competitions .section-title-row .muted,
body.app-shell-guest #teams .section-title-row .muted,
body.app-shell-guest #members .section-title-row .muted {
  max-width: 600px;
  margin: 0;
  color: var(--w2g-muted);
  font-size: 14px;
  line-height: 1.5;
}
/* Hide "Teams" helper copy that only makes sense when logged in */
body.app-shell-guest #teams .product-helper-copy { display: none; }

/* ── Filter shells (competition / team / member) ── */
body.app-shell-guest .competition-filter-shell,
body.app-shell-guest .team-filter-shell,
body.app-shell-guest .member-filter-shell {
  margin: 0 0 18px;
  padding: 12px;
  background: var(--w2g-surface);
  border: 1px solid var(--w2g-line);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(12, 16, 25, .05);
}
body.app-shell-guest .competition-filter-shell .filter-toolbar,
body.app-shell-guest .team-filter-shell .filter-toolbar,
body.app-shell-guest .member-filter-shell .filter-toolbar {
  padding: 0;
  border: none;
  background: transparent;
}

/* ── Quick filter chips (injected by ensureCompetitionV2Page / ensureTeamV2Page) ── */
body.app-shell-guest .competition-quick-filter,
body.app-shell-guest .team-quick-filter {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--w2g-line-strong);
  border-radius: 9px;
  background: var(--w2g-surface-2);
  color: var(--w2g-body);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .12s ease, background .12s ease, color .12s ease;
}
body.app-shell-guest .competition-quick-filter:hover,
body.app-shell-guest .team-quick-filter:hover,
body.app-shell-guest .competition-quick-filter.active,
body.app-shell-guest .team-quick-filter.active {
  border-color: var(--w2g-orange-line);
  background: var(--w2g-orange-soft);
  color: var(--w2g-orange-ink);
}

/* ── Card grids ── */
body.app-shell-guest #competitionList,
body.app-shell-guest #teamList {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 16px;
  align-items: stretch;
  width: 100%;
  margin: 0;
  padding: 0;
}
body.app-shell-guest #memberList {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  align-items: stretch;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* ── Reference card shell ── */
body.app-shell-guest #competitionList .reference-card,
body.app-shell-guest #teamList .reference-card,
body.app-shell-guest #memberList .reference-card {
  display: flex;
  flex-direction: column;
  gap: 13px;
  height: 100%;
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--w2g-line);
  border-radius: 14px;
  background: var(--w2g-surface);
  box-shadow: 0 1px 2px rgba(12, 16, 25, .05);
  transition: border-color .14s ease, box-shadow .14s ease;
}
body.app-shell-guest #competitionList .reference-card:hover,
body.app-shell-guest #teamList .reference-card:hover,
body.app-shell-guest #memberList .reference-card:hover {
  border-color: var(--w2g-line-strong);
  box-shadow: 0 2px 8px rgba(12, 16, 25, .07);
}

/* ── Card top row ── */
body.app-shell-guest .reference-card .lc-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-height: 60px;
}
body.app-shell-guest #competitionList .reference-card .lc-top {
  min-height: 74px;
}

/* ── Title row layout ── */
body.app-shell-guest .reference-card-title-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}
/* Competition cards have a 48px thumb column */
body.app-shell-guest #competitionList .reference-card-title-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px;
}
/* Member cards have a 48px avatar column */
body.app-shell-guest #memberList .reference-card-title-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px;
  align-items: flex-start;
}
body.app-shell-guest .reference-card-copy {
  min-width: 0;
}

/* ── Thumbnail (competition cards) ── */
body.app-shell-guest .reference-card .thumb {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 10px;
  background-position: center;
  background-size: cover;
  border: 1px solid var(--w2g-line);
}
body.app-shell-guest .reference-card .thumb.ph {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--w2g-orange-soft);
  border-color: var(--w2g-orange-line);
  color: var(--w2g-orange-ink);
  font-size: 16px;
  font-weight: 800;
}

/* ── Member avatar ── */
body.app-shell-guest #memberList .reference-card .member-avatar {
  width: 48px;
  height: 48px;
  min-width: 48px;
  flex: 0 0 48px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 800;
  background: var(--w2g-orange-soft);
  border: 1px solid var(--w2g-orange-line);
  color: var(--w2g-orange-ink);
}

/* ── Chips (role / category / tag) ── */
body.app-shell-guest .reference-card .chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 9px;
  border: 1px solid var(--w2g-line);
  border-radius: 7px;
  background: var(--w2g-surface-2);
  color: var(--w2g-body);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1;
}
body.app-shell-guest .reference-card .chip.need {
  border-color: var(--w2g-orange-line);
  background: var(--w2g-orange-soft);
  color: var(--w2g-orange-ink);
}
body.app-shell-guest .reference-card .chip.rec {
  border-style: dashed;
  background: var(--w2g-surface-2);
  color: var(--w2g-body);
}

/* ── Title / meta / summary text ── */
body.app-shell-guest .reference-card .lc-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 40px;
  margin: 4px 0 3px;
  color: var(--w2g-ink);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.25;
}
body.app-shell-guest #memberList .reference-card .lc-title {
  min-height: 0;
  font-size: 15px;
}
body.app-shell-guest .reference-card .lc-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin: 0;
  color: var(--w2g-muted);
  font-size: 12px;
  line-height: 1.45;
}
body.app-shell-guest .reference-card .lc-meta .sep { color: var(--w2g-faint); }
body.app-shell-guest .reference-card-summary {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  color: var(--w2g-body);
  font-size: 13px;
  line-height: 1.5;
}
/* Competition cards hide the plain text summary (match detail handles it) */
body.app-shell-guest #competitionList .reference-card-summary { display: none; }

/* ── Deadline pill (competition cards) ── */
body.app-shell-guest .reference-card .pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 3px 10px;
  border: none;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  flex: 0 0 auto;
  align-self: flex-start;
}
body.app-shell-guest .reference-card .pill .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: none;
  background: currentColor;
}
body.app-shell-guest .reference-card .pill.neutral {
  background: #eff6ff;
  color: #2563eb;
}
/* Semantic deadline pill colors for competitions */
body.app-shell-guest #competitionList .reference-card .pill.success {
  background: #ecfdf5;
  color: #15803d;
}
body.app-shell-guest #competitionList .reference-card .pill.success .dot { background: #15803d; }
body.app-shell-guest #competitionList .reference-card .pill.warning {
  background: #fffbeb;
  color: #b45309;
}
body.app-shell-guest #competitionList .reference-card .pill.warning .dot { background: #b45309; }
body.app-shell-guest #competitionList .reference-card .pill.info {
  background: #eff6ff;
  color: #2563eb;
}
body.app-shell-guest #competitionList .reference-card .pill.info .dot { background: #2563eb; }

/* ── Match bar ── */
body.app-shell-guest .reference-card .match {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 7px;
  padding: 0;
  border: none;
  background: transparent;
}
body.app-shell-guest .reference-card .match-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
body.app-shell-guest .reference-card .match-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 700;
}
body.app-shell-guest .reference-card .tier-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}
body.app-shell-guest .reference-card .match-score {
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--w2g-muted);
}
body.app-shell-guest .reference-card .match-score b {
  font-size: 14px;
  color: var(--w2g-ink);
}
body.app-shell-guest .reference-card .match-bar {
  height: 7px;
  border-radius: 999px;
  background: var(--w2g-match-track);
  overflow: hidden;
}
body.app-shell-guest .reference-card .match-bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
}
/* Tier label colours */
body.app-shell-guest .reference-card .tier-strong { color: var(--w2g-match-ink); }
body.app-shell-guest .reference-card .tier-good   { color: var(--w2g-match-ink); }
body.app-shell-guest .reference-card .tier-fair   { color: var(--w2g-match-fair-ink); }
body.app-shell-guest .reference-card .tier-low    { color: var(--w2g-match-low); }
/* Tier dot and bar fill colours */
body.app-shell-guest .reference-card .tier-strong .tier-dot,
body.app-shell-guest .reference-card .fill-strong { background: var(--w2g-match-strong); }
body.app-shell-guest .reference-card .tier-good .tier-dot,
body.app-shell-guest .reference-card .fill-good   { background: var(--w2g-match-good); }
body.app-shell-guest .reference-card .tier-fair .tier-dot,
body.app-shell-guest .reference-card .fill-fair   { background: var(--w2g-match-fair); }
body.app-shell-guest .reference-card .tier-low .tier-dot,
body.app-shell-guest .reference-card .fill-low    { background: var(--w2g-match-low); }

/* ── "Why this match?" accordion ── */
body.app-shell-guest .reference-card .reference-why summary {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 6px 0;
  border: none;
  border-top: 1px solid var(--w2g-line);
  background: transparent;
  color: var(--w2g-muted);
  font-size: 12px;
  font-weight: 700;
  list-style: none;
  cursor: pointer;
  box-shadow: none;
}
body.app-shell-guest .reference-card .reference-why summary::-webkit-details-marker { display: none; }
/* Toggle label: "Why this match?" → "Hide match detail" on [open] */
body.app-shell-guest .reference-card .reference-why .why-label-open          { display: none; }
body.app-shell-guest .reference-card .reference-why[open] .why-label-closed  { display: none; }
body.app-shell-guest .reference-card .reference-why[open] .why-label-open    { display: inline; }
body.app-shell-guest .reference-card .why {
  margin-top: 6px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--w2g-match-strong) 22%, transparent);
  border-radius: 11px;
  background: var(--w2g-match-soft);
}
body.app-shell-guest .reference-card .why-head {
  margin-bottom: 8px;
  color: var(--w2g-match-ink);
  font-size: 12px;
  font-weight: 700;
}
body.app-shell-guest .reference-card .why-scores {
  display: grid;
  gap: 5px;
  margin: 0 0 8px;
}
body.app-shell-guest .reference-card .why-score-row {
  display: grid;
  grid-template-columns: 84px 1fr 22px;
  align-items: center;
  gap: 6px;
}
body.app-shell-guest .reference-card .why-score-label {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--w2g-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.app-shell-guest .reference-card .why-score-bar {
  height: 4px;
  background: color-mix(in srgb, var(--w2g-match-strong) 15%, transparent);
  border-radius: 999px;
  overflow: hidden;
}
body.app-shell-guest .reference-card .why-score-bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
}
body.app-shell-guest .reference-card .why-fill-strong { background: var(--w2g-match-strong); }
body.app-shell-guest .reference-card .why-fill-good   { background: var(--w2g-match-good); }
body.app-shell-guest .reference-card .why-fill-low    { background: var(--w2g-match-low); }
body.app-shell-guest .reference-card .why-score-val {
  font-size: 10px;
  font-weight: 700;
  color: var(--w2g-muted);
  text-align: right;
}
body.app-shell-guest .reference-card .method-note {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid color-mix(in srgb, var(--w2g-match-strong) 20%, transparent);
}
body.app-shell-guest .reference-card .why-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--w2g-match-strong) 11%, transparent);
  color: var(--w2g-match-ink);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

/* ── Divider ── */
body.app-shell-guest .reference-card .divider,
body.app-shell-guest .reference-card hr {
  height: 1px;
  flex: 0 0 auto;
  margin: 0;
  border: none;
  background: var(--w2g-line);
}

/* ── Role / skills section ── */
body.app-shell-guest .reference-role-block { flex: 1 1 auto; }
body.app-shell-guest .reference-section-label {
  margin: 0 0 6px;
  color: var(--w2g-muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
body.app-shell-guest .reference-section-label-spaced { margin-top: 10px; }
body.app-shell-guest .reference-card .chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 58px;
  overflow: hidden;
}

/* ── CTA buttons ── */
body.app-shell-guest .reference-card .lc-actions {
  display: flex;
  gap: 9px;
  margin-top: auto;
}
body.app-shell-guest .reference-card .lc-actions .button,
body.app-shell-guest .reference-card .lc-actions .btn {
  flex: 1 1 0;
  min-width: 0;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.15;
  box-shadow: none;
  transform: none;
}

/* ── Empty states ── */
body.app-shell-guest #competitionList .empty-state,
body.app-shell-guest #teamList .empty-state,
body.app-shell-guest #memberList .empty-state {
  grid-column: 1 / -1;
  padding: 32px;
  text-align: center;
  border: 1px dashed var(--w2g-line-strong);
  border-radius: 14px;
  background: var(--w2g-surface);
  color: var(--w2g-muted);
}

/* ── Dark mode ── */
html[data-theme="dark"] body.app-shell-guest #competitionList .reference-card,
html[data-theme="dark"] body.app-shell-guest #teamList .reference-card,
html[data-theme="dark"] body.app-shell-guest #memberList .reference-card {
  background: var(--w2g-surface);
  border-color: var(--w2g-line);
  box-shadow: none;
}
html[data-theme="dark"] body.app-shell-guest .reference-card .chip {
  background: var(--w2g-surface-2);
  border-color: var(--w2g-line);
  color: var(--w2g-body);
}
html[data-theme="dark"] body.app-shell-guest .reference-card .chip.need {
  border-color: var(--w2g-orange-line);
  background: var(--w2g-orange-soft);
  color: var(--w2g-orange-ink);
}
html[data-theme="dark"] body.app-shell-guest .reference-card .lc-title {
  color: var(--w2g-ink);
}
html[data-theme="dark"] body.app-shell-guest .reference-card .lc-meta {
  color: var(--w2g-muted);
}
html[data-theme="dark"] body.app-shell-guest .reference-card .lc-actions .button.outline,
html[data-theme="dark"] body.app-shell-guest .reference-card .lc-actions .button.secondary {
  background: var(--w2g-surface-2);
  color: var(--w2g-ink);
  border-color: var(--w2g-line);
}
/* Dark deadline pill variants */
html[data-theme="dark"] body.app-shell-guest #competitionList .reference-card .pill.success {
  background: rgba(43, 179, 94, .14);
  color: #2BB35E;
}
html[data-theme="dark"] body.app-shell-guest #competitionList .reference-card .pill.success .dot { background: #2BB35E; }
html[data-theme="dark"] body.app-shell-guest #competitionList .reference-card .pill.warning {
  background: rgba(214, 162, 43, .14);
  color: #D6A22B;
}
html[data-theme="dark"] body.app-shell-guest #competitionList .reference-card .pill.warning .dot { background: #D6A22B; }
html[data-theme="dark"] body.app-shell-guest #competitionList .reference-card .pill.info {
  background: rgba(91, 147, 245, .14);
  color: #5B93F5;
}
html[data-theme="dark"] body.app-shell-guest #competitionList .reference-card .pill.info .dot { background: #5B93F5; }
html[data-theme="dark"] body.app-shell-guest .reference-card .pill.neutral {
  background: rgba(91, 147, 245, .14);
  color: #9CBEFB;
}
html[data-theme="dark"] body.app-shell-guest .competition-filter-shell,
html[data-theme="dark"] body.app-shell-guest .team-filter-shell,
html[data-theme="dark"] body.app-shell-guest .member-filter-shell {
  background: var(--w2g-surface);
  border-color: var(--w2g-line);
}
html[data-theme="dark"] body.app-shell-guest #memberList .reference-card .member-avatar {
  background: var(--w2g-orange-soft);
  border-color: var(--w2g-orange-line);
}
html[data-theme="dark"] body.app-shell-guest .reference-card .why {
  background: rgba(43, 179, 94, .07);
  border-color: rgba(43, 179, 94, .18);
}
html[data-theme="dark"] body.app-shell-guest .reference-card .why-score-bar {
  background: rgba(255, 255, 255, .08);
}
html[data-theme="dark"] body.app-shell-guest .reference-card .method-note {
  border-top-color: rgba(43, 179, 94, .18);
}
html[data-theme="dark"] body.app-shell-guest .reference-card .why-chip {
  background: rgba(43, 179, 94, .11);
}

/* ── Responsive ── */
@media (max-width: 1180px) {
  body.app-shell-guest #competitionList,
  body.app-shell-guest #teamList,
  body.app-shell-guest #memberList {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  body.app-shell-guest #competitionList,
  body.app-shell-guest #teamList,
  body.app-shell-guest #memberList {
    grid-template-columns: 1fr;
  }
  body.app-shell-guest .reference-card .lc-actions {
    flex-direction: column;
  }
}
/* END GUEST DISCOVERY V2 STYLING */

/* ============================================================
   GUEST AUTH-ACTIONS TOP-RIGHT ALIGNMENT
   ------------------------------------------------------------
   At desktop (≥ 1051px) the guest .auth-actions is moved from
   the bottom of the left sidebar to a fixed horizontal bar at
   the top of the content column, matching the pattern used for
   body.app-shell-v2. The sidebar retains brand + nav only.
   Mobile (≤ 1050px) keeps the existing inline-topbar layout.
   Notification bell remains hidden for guests (no private state).
   No JS changes — position:fixed escapes overflow:hidden.
   ============================================================ */

@media (min-width: 1051px) {
  /* Lift auth-actions out of sidebar to top-right fixed bar */
  body.app-shell-guest .auth-actions {
    position: fixed;
    top: 0;
    left: 244px;
    right: 0;
    z-index: 75;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    height: 50px;
    padding: 0 clamp(20px, 3vw, 40px);
    background: var(--w2g-surface);
    border-top: none;
    border-bottom: 1px solid var(--w2g-line);
    width: auto;
    grid-template-columns: none;
    box-shadow: none;
  }

  /* Reset grid-column / full-width sizing from sidebar layout */
  body.app-shell-guest .auth-actions .language-switch {
    grid-column: auto;
    width: auto;
    flex: none;
    justify-content: flex-end;
    min-height: 28px;
    border-radius: 8px;
  }
  body.app-shell-guest .auth-actions .language-switch button {
    flex: 0 0 auto;
    min-height: 28px;
    padding: 3px 9px;
    font-size: 11px;
  }
  body.app-shell-guest .auth-actions .theme-toggle {
    min-height: 30px;
    padding: 0 6px;
  }
  /* Restore theme-toggle label (hidden in sidebar context) */
  body.app-shell-guest .auth-actions .theme-toggle-label {
    display: inline !important;
  }
  /* Notification bell: always hidden for guests */
  body.app-shell-guest .auth-actions .notification-button {
    display: none !important;
  }
  /* Login and sign up: compact inline CTAs */
  body.app-shell-guest .auth-actions #loginShortcut,
  body.app-shell-guest .auth-actions #signupShortcut {
    grid-column: auto;
    width: auto;
    min-height: 30px;
    padding: 5px 14px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
    text-align: center;
  }
  body.app-shell-guest .auth-actions #loginShortcut {
    background: transparent !important;
    color: var(--w2g-muted);
    box-shadow: none !important;
    border-color: transparent !important;
  }
  body.app-shell-guest .auth-actions #loginShortcut:hover {
    background: var(--w2g-surface-2) !important;
    color: var(--w2g-ink) !important;
  }

  /* Push page content below the 50px fixed top bar */
  body.app-shell-guest .page-shell {
    padding-top: 62px;
  }
}

/* Dark mode: fixed bar adapts via --w2g-surface / --w2g-line tokens automatically.
   No extra overrides needed — both tokens flip in html[data-theme="dark"]. */
/* END GUEST AUTH-ACTIONS TOP-RIGHT ALIGNMENT */

/* App boot guard -- prevent static legacy Home from flashing before route render */
body[data-page="app"].app-booting {
  background: var(--w2g-bg, #0f172a);
}

body[data-page="app"].app-booting .topbar,
body[data-page="app"].app-booting .page-shell,
body[data-page="app"].app-booting .feedback-launcher {
  opacity: 0;
  visibility: hidden;
}

body[data-page="app"].app-ready .topbar,
body[data-page="app"].app-ready .page-shell {
  opacity: 1;
  visibility: visible;
}

/* Patch 4C -- Active team locked card: calm Teams V2 status surface */
body.app-shell-v2 #teams.team-page-v2 .team-locked-state {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  overflow: visible;
  padding: 18px;
  border: 1px solid var(--w2g-line-strong) !important;
  border-radius: var(--w2g-r-lg);
  background: var(--w2g-surface) !important;
  box-shadow: none !important;
}

body.app-shell-v2 #teams.team-page-v2 .team-locked-state::before {
  content: none;
}

body.app-shell-v2 #teams.team-page-v2 .team-locked-copy {
  display: grid;
  gap: 6px;
}

body.app-shell-v2 #teams.team-page-v2 .team-locked-copy .tag {
  justify-self: start;
}

body.app-shell-v2 #teams.team-page-v2 .team-locked-copy h2 {
  margin: 0;
  color: var(--w2g-ink);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

body.app-shell-v2 #teams.team-page-v2 .team-locked-copy .muted {
  max-width: 780px;
  color: var(--w2g-body);
  line-height: 1.5;
}

body.app-shell-v2 #teams.team-page-v2 .team-locked-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--w2g-line) !important;
  border-radius: var(--w2g-r-lg);
  background: var(--w2g-surface-2) !important;
  box-shadow: none !important;
}

body.app-shell-v2 #teams.team-page-v2 .team-locked-card h3 {
  margin: 0;
  color: var(--w2g-ink);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0;
}

body.app-shell-v2 #teams.team-page-v2 .team-locked-card .muted {
  margin: 6px 0 0;
  color: var(--w2g-muted);
}

body.app-shell-v2 #teams.team-page-v2 .team-locked-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

body.app-shell-v2 #teams.team-page-v2 #createTeamButton.active-team-create-hidden,
body.app-shell-guest #teams.team-page-v2 #createTeamButton[hidden],
body.app-shell-guest #teams.team-page-v2 #createTeamButton.active-team-create-hidden {
  display: none !important;
}

/* Find Team / Find Members: keep discovery actions and dense cards easy to scan. */
body.app-shell-v2 #teams.team-page-v2 .reference-page-head #createTeamButton,
body.app-shell-guest #teams.team-page-v2 .reference-page-head #createTeamButton {
  flex: 0 0 auto;
  align-self: flex-start;
}

body.app-shell-v2 #teamList .reference-team-card.team-card-low-match,
body.app-shell-guest #teamList .reference-team-card.team-card-low-match {
  border-color: var(--w2g-line);
}

body.app-shell-v2 #teamList .reference-team-card.team-card-low-match .match,
body.app-shell-guest #teamList .reference-team-card.team-card-low-match .match {
  opacity: 0.72;
}

body.app-shell-v2 #memberList .member-invite-helper,
body.app-shell-guest #memberList .member-invite-helper {
  display: inline-flex;
  flex: 1 1 0;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  color: var(--w2g-muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
}

body.app-shell-v2 #teams.team-page-v2 .team-locked-actions .button.primary {
  background: var(--w2g-orange);
  color: #fff;
}

body.app-shell-v2 #teams.team-page-v2 .team-browse-text-link,
body.app-shell-v2 #teams.team-page-v2 .team-notice-back {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
  border: 0;
  background: transparent;
  color: var(--w2g-orange-ink);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  cursor: pointer;
}

body.app-shell-v2 #teams.team-page-v2 .team-browse-text-link {
  margin-top: 4px;
  justify-self: start;
}

body.app-shell-v2 #teams.team-page-v2 .team-browse-text-link:hover,
body.app-shell-v2 #teams.team-page-v2 .team-browse-text-link:focus-visible,
body.app-shell-v2 #teams.team-page-v2 .team-notice-back:hover,
body.app-shell-v2 #teams.team-page-v2 .team-notice-back:focus-visible {
  color: var(--w2g-orange);
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.app-shell-v2 #teams.team-page-v2 .team-locked-state.is-browsing {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  padding: 8px 0 18px;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.app-shell-v2 #teams.team-page-v2 .team-locked-state.is-browsing .team-locked-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

body.app-shell-v2 #teams.team-page-v2 .team-locked-state.is-browsing .team-locked-copy h2 {
  font-size: 17px;
}

body.app-shell-v2 #teams.team-page-v2 .team-locked-state.is-browsing .team-locked-copy .muted {
  margin: 0;
  font-size: 12.5px;
}

body.app-shell-v2 #teamList .team-card-v2.current-team-card {
  border-color: var(--w2g-orange-line) !important;
  background: linear-gradient(180deg, var(--w2g-orange-soft), var(--w2g-surface) 34%) !important;
}

body.app-shell-v2 #teamList .team-card-v2 .team-read-only-action {
  height: auto;
  min-height: 38px;
  padding-block: 7px;
  white-space: normal;
  line-height: 1.25;
}

body.app-shell-v2 #teamList.active-team-browse-mode .reference-card [data-save-team-button] {
  display: inline-flex !important;
}

html[data-theme="dark"] body.app-shell-v2 #teams.team-page-v2 .team-locked-state,
body.theme-dark.app-shell-v2 #teams.team-page-v2 .team-locked-state {
  border-color: var(--w2g-line) !important;
  background: var(--w2g-surface) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body.app-shell-v2 #teams.team-page-v2 .team-locked-state.is-browsing,
body.theme-dark.app-shell-v2 #teams.team-page-v2 .team-locked-state.is-browsing {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body.app-shell-v2 #teams.team-page-v2 .team-locked-card,
body.theme-dark.app-shell-v2 #teams.team-page-v2 .team-locked-card {
  border-color: var(--w2g-line) !important;
  background: var(--w2g-surface-2) !important;
  box-shadow: none !important;
}

@media (max-width: 760px) {
  body.app-shell-v2 #teams.team-page-v2 .team-locked-state {
    grid-template-columns: 1fr;
    align-items: stretch;
    padding: 16px;
  }

  body.app-shell-v2 #teams.team-page-v2 .team-locked-card {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  body.app-shell-v2 #teams.team-page-v2 .team-locked-state.is-browsing {
    grid-template-columns: 1fr;
    align-items: stretch;
    padding: 4px 0 14px;
  }

  body.app-shell-v2 #teams.team-page-v2 .team-locked-actions,
  body.app-shell-v2 #teams.team-page-v2 .team-locked-actions .button {
    width: 100%;
  }

  body.app-shell-v2 #teams.team-page-v2 .team-locked-actions .team-notice-back {
    width: fit-content;
  }
}

/* Create/Edit Team role pickers: W2G-native multi-select polish */
body[data-page="app"] #modalOverlay.team-post-modal .multi-select-field {
  display: grid;
  gap: 7px;
}

body[data-page="app"] #modalOverlay.team-post-modal .multi-select-field > span:first-child {
  color: var(--w2g-muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
}

body[data-page="app"] #modalOverlay.team-post-modal .multi-select-trigger {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-height: 40px !important;
  padding: 8px 11px 8px 12px !important;
  border: 1px solid var(--w2g-line) !important;
  border-radius: 10px !important;
  background: var(--w2g-bg) !important;
  color: var(--w2g-ink) !important;
  font-size: 13.5px;
  font-weight: 600;
  box-shadow: none !important;
}

body[data-page="app"] #modalOverlay.team-post-modal .multi-select-trigger:hover {
  border-color: var(--w2g-line-strong) !important;
  background: var(--w2g-surface) !important;
  box-shadow: none !important;
}

body[data-page="app"] #modalOverlay.team-post-modal .multi-select-field.open .multi-select-trigger {
  border-color: var(--w2g-orange) !important;
  background: var(--w2g-surface) !important;
  box-shadow: var(--w2g-focus) !important;
}

body[data-page="app"] #modalOverlay.team-post-modal .multi-select-arrow {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  color: var(--w2g-muted);
  font-size: 14px;
  line-height: 1;
  transition: color 150ms ease, background 150ms ease, transform 150ms ease;
}

body[data-page="app"] #modalOverlay.team-post-modal .multi-select-field.open .multi-select-arrow {
  background: var(--w2g-orange-soft);
  color: var(--w2g-orange-ink);
  transform: rotate(180deg);
}

body[data-page="app"] #modalOverlay.team-post-modal .multi-select-tags {
  display: flex !important;
  flex-wrap: wrap;
  gap: 6px !important;
  margin-top: 1px !important;
}

body[data-page="app"] #modalOverlay.team-post-modal .multi-select-selected-chip {
  min-height: 26px;
  gap: 6px;
  padding: 4px 7px 4px 9px !important;
  border-radius: var(--w2g-r-pill) !important;
  border: 1px solid var(--w2g-orange-line) !important;
  background: var(--w2g-orange-soft) !important;
  color: var(--w2g-orange-ink) !important;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.1;
  box-shadow: none !important;
  transform: none !important;
}

body[data-page="app"] #modalOverlay.team-post-modal .multi-select-selected-chip:hover,
body[data-page="app"] #modalOverlay.team-post-modal .multi-select-selected-chip:focus-visible {
  border-color: rgba(255, 106, 26, 0.42) !important;
  background: rgba(255, 106, 26, 0.16) !important;
  box-shadow: 0 0 0 2px rgba(255, 106, 26, 0.12) !important;
  transform: none !important;
  outline: none;
}

body[data-page="app"] #modalOverlay.team-post-modal .multi-select-chip-remove {
  width: 16px;
  height: 16px;
  background: rgba(255, 106, 26, 0.14);
  color: currentColor;
  font-size: 12px;
}

body[data-page="app"] #modalOverlay.team-post-modal .multi-select-empty-tag {
  min-height: 26px;
  padding: 5px 9px !important;
  border: 1px dashed var(--w2g-line) !important;
  background: var(--w2g-surface-2) !important;
  color: var(--w2g-muted) !important;
  font-size: 12px;
  font-weight: 700;
}

body[data-page="app"] #modalOverlay.team-post-modal .multi-select-menu {
  margin-top: 4px !important;
  padding: 8px !important;
  gap: 7px !important;
  border: 1px solid var(--w2g-line) !important;
  border-radius: 12px !important;
  background: var(--w2g-surface) !important;
  color: var(--w2g-ink) !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.18) !important;
}

body[data-page="app"] #modalOverlay.team-post-modal .multi-select-search {
  min-height: 36px;
  padding: 8px 11px !important;
  border: 1px solid var(--w2g-line) !important;
  border-radius: 9px !important;
  background: var(--w2g-bg) !important;
  color: var(--w2g-ink) !important;
  font-size: 13px;
  box-shadow: none !important;
}

body[data-page="app"] #modalOverlay.team-post-modal .multi-select-search:focus {
  border-color: var(--w2g-orange) !important;
  box-shadow: var(--w2g-focus) !important;
  outline: none;
}

body[data-page="app"] #modalOverlay.team-post-modal .multi-select-options {
  gap: 3px !important;
  max-height: min(230px, 32vh);
  padding: 1px;
}

body[data-page="app"] #modalOverlay.team-post-modal .multi-select-option {
  min-height: 36px;
  grid-template-columns: minmax(0, 1fr) 18px;
  gap: 10px !important;
  padding: 7px 8px 7px 10px !important;
  border: 1px solid transparent !important;
  border-radius: 9px !important;
  background: transparent !important;
  color: var(--w2g-body) !important;
  font-size: 13px;
  font-weight: 600;
  box-shadow: none !important;
  transform: none !important;
}

body[data-page="app"] #modalOverlay.team-post-modal .multi-select-option:hover {
  border-color: var(--w2g-line) !important;
  background: var(--w2g-surface-2) !important;
  color: var(--w2g-ink) !important;
  transform: none !important;
}

body[data-page="app"] #modalOverlay.team-post-modal .multi-select-option.is-selected {
  border-color: var(--w2g-orange-line) !important;
  background: rgba(255, 106, 26, 0.10) !important;
  color: var(--w2g-orange-ink) !important;
  box-shadow: none !important;
}

body[data-page="app"] #modalOverlay.team-post-modal .multi-select-check {
  width: 18px;
  height: 18px;
  border-color: var(--w2g-line) !important;
  background: var(--w2g-surface) !important;
  color: transparent !important;
  font-size: 11px;
  line-height: 1;
  box-shadow: none !important;
}

body[data-page="app"] #modalOverlay.team-post-modal .multi-select-option.is-selected .multi-select-check {
  border-color: var(--w2g-orange) !important;
  background: var(--w2g-orange) !important;
  color: #fff !important;
  transform: none !important;
}

body[data-page="app"] #modalOverlay.team-post-modal .multi-select-empty {
  border: 1px dashed var(--w2g-line) !important;
  border-radius: 9px;
  background: var(--w2g-surface-2) !important;
  color: var(--w2g-muted);
  font-size: 13px;
  font-weight: 700;
}

body[data-page="app"] #modalOverlay.team-post-modal .multi-select-field[data-multi-name="existingRoles"] .multi-select-selected-chip {
  border-color: var(--w2g-line) !important;
  background: var(--w2g-surface-2) !important;
  color: var(--w2g-body) !important;
}

body[data-page="app"] #modalOverlay.team-post-modal .multi-select-field[data-multi-name="existingRoles"] .multi-select-selected-chip:hover,
body[data-page="app"] #modalOverlay.team-post-modal .multi-select-field[data-multi-name="existingRoles"] .multi-select-selected-chip:focus-visible {
  border-color: var(--w2g-line-strong) !important;
  background: var(--w2g-surface) !important;
  box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.12) !important;
}

body[data-page="app"] #modalOverlay.team-post-modal .multi-select-field[data-multi-name="existingRoles"] .multi-select-chip-remove {
  background: rgba(148, 163, 184, 0.14);
}

body[data-page="app"] #modalOverlay.team-post-modal .multi-select-field[data-multi-name="existingRoles"] .multi-select-option.is-selected {
  border-color: var(--w2g-line-strong) !important;
  background: var(--w2g-surface-2) !important;
  color: var(--w2g-ink) !important;
}

body[data-page="app"] #modalOverlay.team-post-modal .multi-select-field[data-multi-name="existingRoles"] .multi-select-option.is-selected .multi-select-check {
  border-color: var(--w2g-muted) !important;
  background: var(--w2g-muted) !important;
}

html[data-theme="dark"] body[data-page="app"] #modalOverlay.team-post-modal .multi-select-menu,
body.theme-dark[data-page="app"] #modalOverlay.team-post-modal .multi-select-menu {
  background: rgba(17, 24, 39, 0.98) !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.36) !important;
}

html[data-theme="dark"] body[data-page="app"] #modalOverlay.team-post-modal .multi-select-trigger,
html[data-theme="dark"] body[data-page="app"] #modalOverlay.team-post-modal .multi-select-search,
body.theme-dark[data-page="app"] #modalOverlay.team-post-modal .multi-select-trigger,
body.theme-dark[data-page="app"] #modalOverlay.team-post-modal .multi-select-search {
  background: rgba(15, 23, 42, 0.88) !important;
  border-color: rgba(148, 163, 184, 0.20) !important;
}

html[data-theme="dark"] body[data-page="app"] #modalOverlay.team-post-modal .multi-select-option:hover,
body.theme-dark[data-page="app"] #modalOverlay.team-post-modal .multi-select-option:hover {
  background: rgba(148, 163, 184, 0.10) !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
}

/* Create/Edit Team: unified dropdown/select/combobox system */
body[data-page="app"] #modalOverlay.team-post-modal {
  --team-control-h: 40px;
  --team-control-radius: 10px;
  --team-control-bg: var(--w2g-bg);
  --team-control-surface: var(--w2g-surface);
  --team-control-muted-surface: var(--w2g-surface-2);
  --team-control-line: var(--w2g-line);
  --team-control-line-strong: var(--w2g-line-strong);
  --team-control-focus: var(--w2g-focus);
  --team-control-panel-shadow: 0 14px 34px rgba(15, 23, 42, 0.18);
}

body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm label > span,
body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .multi-select-field > span:first-child,
body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm [data-team-communication-link-label] {
  color: var(--w2g-muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
}

body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm select,
body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .team-target-combobox input[data-team-target-competition],
body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .province-combobox-input,
body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .multi-select-trigger,
body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm [data-team-communication-link] {
  width: 100%;
  min-height: var(--team-control-h) !important;
  border: 1px solid var(--team-control-line) !important;
  border-radius: var(--team-control-radius) !important;
  background-color: var(--team-control-bg) !important;
  color: var(--w2g-ink) !important;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  box-shadow: none !important;
  transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease, color 150ms ease;
}

body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm select {
  appearance: none;
  padding: 8px 34px 8px 12px !important;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%2394a3b8' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right 12px center;
  background-repeat: no-repeat;
  background-size: 12px 12px;
}

body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .team-target-combobox input[data-team-target-competition] {
  padding: 8px 76px 8px 12px !important;
}

body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .province-combobox-input {
  padding: 8px 42px 8px 12px !important;
}

body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm [data-team-communication-link] {
  padding: 8px 12px !important;
}

body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm select:hover,
body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .team-target-combobox input[data-team-target-competition]:hover,
body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .province-combobox-input:hover,
body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .multi-select-trigger:hover,
body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm [data-team-communication-link]:hover {
  border-color: var(--team-control-line-strong) !important;
  background-color: var(--team-control-surface) !important;
}

body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm select:focus,
body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .team-target-combobox input[data-team-target-competition]:focus,
body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .team-target-combobox.is-open input[data-team-target-competition],
body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .province-search-field.open .province-combobox-input,
body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .province-combobox-input:focus,
body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .multi-select-field.open .multi-select-trigger,
body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm [data-team-communication-link]:focus {
  border-color: var(--w2g-orange) !important;
  background-color: var(--team-control-surface) !important;
  box-shadow: var(--team-control-focus) !important;
  outline: none;
}

body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm select:disabled,
body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .province-search-field.is-disabled .province-combobox-input {
  border-color: var(--team-control-line) !important;
  background: rgba(148, 163, 184, 0.08) !important;
  color: var(--w2g-muted) !important;
  opacity: 1;
}

body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .team-target-clear,
body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .team-target-toggle,
body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .province-combobox-toggle,
body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .multi-select-arrow {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  min-height: 24px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--w2g-muted) !important;
  line-height: 1;
  box-shadow: none !important;
}

body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .team-target-clear {
  right: 42px;
  font-size: 17px;
}

body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .team-target-toggle {
  right: 10px;
  font-size: 14px;
}

body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .province-combobox-toggle {
  right: 9px;
  font-size: 15px;
}

body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .team-target-clear:hover,
body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .team-target-toggle:hover,
body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .team-target-combobox.is-open .team-target-toggle,
body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .province-combobox-toggle:hover,
body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .province-combobox-toggle:focus-visible,
body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .province-search-field.open .province-combobox-toggle,
body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .multi-select-field.open .multi-select-arrow {
  background: var(--w2g-orange-soft) !important;
  color: var(--w2g-orange-ink) !important;
  outline: none;
}

body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .team-target-combobox.is-open .team-target-toggle,
body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .province-search-field.open .province-combobox-toggle,
body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .multi-select-field.open .multi-select-arrow {
  transform: translateY(-50%) rotate(180deg);
}

body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .multi-select-field.open .multi-select-arrow {
  transform: rotate(180deg);
}

body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .team-target-menu,
body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .province-combobox-menu,
body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .multi-select-menu {
  max-height: min(248px, 34vh);
  padding: 8px !important;
  border: 1px solid var(--team-control-line) !important;
  border-radius: 12px !important;
  background: var(--team-control-surface) !important;
  color: var(--w2g-ink) !important;
  box-shadow: var(--team-control-panel-shadow) !important;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.38) transparent;
}

body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .team-target-menu {
  top: calc(100% + 5px);
}

body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .province-combobox-menu {
  top: calc(100% + 5px);
  max-height: min(248px, 34vh);
}

body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .multi-select-menu {
  margin-top: 4px !important;
}

body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .team-target-menu::-webkit-scrollbar,
body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .province-combobox-menu::-webkit-scrollbar,
body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .multi-select-options::-webkit-scrollbar {
  width: 8px;
}

body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .team-target-menu::-webkit-scrollbar-thumb,
body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .province-combobox-menu::-webkit-scrollbar-thumb,
body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .multi-select-options::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.32);
}

body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .multi-select-search {
  min-height: 36px !important;
  padding: 8px 11px !important;
  border: 1px solid var(--team-control-line) !important;
  border-radius: 9px !important;
  background: var(--team-control-bg) !important;
  color: var(--w2g-ink) !important;
  font-size: 13px;
  box-shadow: none !important;
}

body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .multi-select-search:focus {
  border-color: var(--w2g-orange) !important;
  box-shadow: var(--team-control-focus) !important;
  outline: none;
}

body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .team-target-option,
body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .province-combobox-option,
body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .multi-select-option {
  min-height: 36px;
  margin: 0 !important;
  padding: 7px 8px 7px 10px !important;
  border: 1px solid transparent !important;
  border-radius: 9px !important;
  background: transparent !important;
  color: var(--w2g-body) !important;
  font-size: 13px;
  font-weight: 600;
  box-shadow: none !important;
  transform: none !important;
}

body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .team-target-option + .team-target-option {
  margin-top: 3px !important;
}

body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .team-target-option strong,
body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .province-combobox-option span,
body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .multi-select-option-text {
  color: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
}

body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .team-target-option small,
body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .province-combobox-option small {
  color: var(--w2g-muted) !important;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.25;
}

body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .team-target-option:hover,
body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .team-target-option:focus-visible,
body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .province-combobox-option:hover,
body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .province-combobox-option:focus-visible,
body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .multi-select-option:hover {
  border-color: var(--team-control-line) !important;
  background: var(--team-control-muted-surface) !important;
  color: var(--w2g-ink) !important;
  outline: none;
  transform: none !important;
}

body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .team-target-option.is-custom,
body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .province-combobox-option.active,
body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .multi-select-option.is-selected {
  border-color: var(--w2g-orange-line) !important;
  background: rgba(255, 106, 26, 0.10) !important;
  color: var(--w2g-orange-ink) !important;
  box-shadow: none !important;
}

body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .team-target-option.is-disabled {
  border-color: rgba(220, 38, 38, 0.20) !important;
  background: rgba(220, 38, 38, 0.08) !important;
  color: var(--w2g-muted) !important;
}

body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .team-target-option.is-empty,
body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .province-combobox-empty,
body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .multi-select-empty {
  padding: 11px !important;
  border: 1px dashed var(--team-control-line) !important;
  border-radius: 9px !important;
  background: var(--team-control-muted-surface) !important;
  color: var(--w2g-muted) !important;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .multi-select-check {
  width: 18px;
  height: 18px;
  border-color: var(--team-control-line) !important;
  background: var(--team-control-surface) !important;
}

body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .multi-select-option.is-selected .multi-select-check {
  border-color: var(--w2g-orange) !important;
  background: var(--w2g-orange) !important;
  color: #fff !important;
}

body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .multi-select-field[data-multi-name="existingRoles"] .multi-select-option.is-selected {
  border-color: var(--team-control-line-strong) !important;
  background: var(--team-control-muted-surface) !important;
  color: var(--w2g-ink) !important;
}

body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .multi-select-field[data-multi-name="existingRoles"] .multi-select-option.is-selected .multi-select-check {
  border-color: var(--w2g-muted) !important;
  background: var(--w2g-muted) !important;
}

html[data-theme="dark"] body[data-page="app"] #modalOverlay.team-post-modal,
body.theme-dark[data-page="app"] #modalOverlay.team-post-modal {
  --team-control-bg: rgba(15, 23, 42, 0.88);
  --team-control-surface: rgba(17, 24, 39, 0.98);
  --team-control-muted-surface: rgba(148, 163, 184, 0.10);
  --team-control-line: rgba(148, 163, 184, 0.20);
  --team-control-line-strong: rgba(148, 163, 184, 0.34);
  --team-control-panel-shadow: 0 16px 40px rgba(0, 0, 0, 0.36);
}

@media (max-width: 640px) {
  body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .team-target-menu,
  body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .province-combobox-menu,
  body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .multi-select-menu {
    max-height: min(232px, 42vh);
  }
}

/* Create/Edit Team dropdown correction: theme-aware, input-like system */
body[data-page="app"] #modalOverlay.team-post-modal {
  --team-control-bg: var(--w2g-surface);
  --team-control-surface: var(--w2g-surface);
  --team-control-muted-surface: var(--w2g-surface-2);
  --team-control-hover: var(--w2g-surface-2);
  --team-control-line: var(--w2g-line);
  --team-control-line-strong: var(--w2g-line-strong);
  --team-control-text: var(--w2g-ink);
  --team-control-body: var(--w2g-body);
  --team-control-muted: var(--w2g-muted);
  --team-control-faint: var(--w2g-faint);
  --team-control-focus: var(--w2g-focus);
  --team-control-panel-shadow: 0 8px 24px rgba(12, 16, 25, 0.12);
}

body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .team-native-select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .team-custom-select-field {
  position: relative;
  display: grid;
  gap: 7px;
  min-width: 0;
}

body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .team-custom-select {
  position: relative;
  min-width: 0;
}

body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .team-custom-select-trigger,
body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .team-target-combobox input[data-team-target-competition],
body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .province-combobox-input,
body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .multi-select-trigger {
  width: 100%;
  min-height: 40px !important;
  border: 1px solid var(--team-control-line) !important;
  border-radius: 10px !important;
  background: var(--team-control-bg) !important;
  color: var(--team-control-text) !important;
  box-shadow: none !important;
}

body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .team-custom-select-trigger,
body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .multi-select-trigger {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 24px;
  align-items: center;
  gap: 8px;
  padding: 8px 9px 8px 12px !important;
  text-align: left;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
}

body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .team-custom-select-trigger:hover,
body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .team-target-combobox input[data-team-target-competition]:hover,
body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .province-combobox-input:hover,
body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .multi-select-trigger:hover {
  border-color: var(--team-control-line-strong) !important;
  background: var(--team-control-surface) !important;
}

body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .team-custom-select.is-open .team-custom-select-trigger,
body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .team-target-combobox.is-open input[data-team-target-competition],
body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .team-target-combobox input[data-team-target-competition]:focus,
body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .province-search-field.open .province-combobox-input,
body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .province-combobox-input:focus,
body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .multi-select-field.open .multi-select-trigger {
  border-color: rgba(249, 115, 22, 0.72) !important;
  background: var(--team-control-surface) !important;
  box-shadow: var(--team-control-focus) !important;
  outline: none;
}

body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .team-custom-select-trigger span:first-child,
body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .multi-select-trigger [data-multi-summary] {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .team-custom-select-arrow,
body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .team-target-clear,
body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .team-target-toggle,
body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .province-combobox-toggle,
body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .multi-select-arrow {
  display: inline-grid !important;
  place-items: center;
  width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--team-control-muted) !important;
  box-shadow: none !important;
  line-height: 1;
}

body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .team-custom-select.is-open .team-custom-select-arrow,
body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .team-target-combobox.is-open .team-target-toggle,
body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .province-search-field.open .province-combobox-toggle,
body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .multi-select-field.open .multi-select-arrow {
  background: rgba(249, 115, 22, 0.14) !important;
  color: #fb923c !important;
}

body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .team-custom-select.is-open .team-custom-select-arrow {
  transform: rotate(180deg);
}

body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .team-custom-select-menu,
body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .team-target-menu,
body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .province-combobox-menu,
body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .multi-select-menu {
  border: 1px solid var(--team-control-line) !important;
  border-radius: 12px !important;
  background: var(--team-control-surface) !important;
  color: var(--team-control-text) !important;
  box-shadow: var(--team-control-panel-shadow) !important;
}

body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .team-custom-select-menu {
  position: absolute;
  z-index: 370;
  top: calc(100% + 5px);
  left: 0;
  right: 0;
  display: grid;
  gap: 3px;
  max-height: min(248px, 34vh);
  overflow-y: auto;
  padding: 8px;
  overscroll-behavior: contain;
}

body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .team-custom-select-menu.hidden {
  display: none !important;
}

body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .multi-select-search {
  border-color: var(--team-control-line) !important;
  background: var(--team-control-bg) !important;
  color: var(--team-control-text) !important;
}

body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .multi-select-search::placeholder,
body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .team-target-combobox input[data-team-target-competition]::placeholder,
body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .province-combobox-input::placeholder {
  color: var(--team-control-faint) !important;
}

body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .team-custom-select-option,
body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .team-target-option,
body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .province-combobox-option,
body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .multi-select-option {
  min-height: 36px;
  border: 1px solid transparent !important;
  border-radius: 9px !important;
  background: transparent !important;
  color: var(--team-control-body) !important;
}

body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .team-custom-select-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 8px 7px 10px;
  text-align: left;
  cursor: pointer;
}

body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .team-custom-select-option span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 700;
}

body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .team-custom-select-option:hover,
body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .team-custom-select-option:focus-visible,
body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .team-target-option:hover,
body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .team-target-option:focus-visible,
body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .province-combobox-option:hover,
body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .province-combobox-option:focus-visible,
body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .multi-select-option:hover {
  border-color: var(--team-control-line) !important;
  background: var(--team-control-hover) !important;
  color: var(--team-control-text) !important;
  outline: none;
}

body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .team-custom-select-option.is-selected,
body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .team-target-option.is-custom,
body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .province-combobox-option.active,
body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .multi-select-option.is-selected {
  border-color: rgba(249, 115, 22, 0.34) !important;
  background: rgba(249, 115, 22, 0.11) !important;
  color: var(--w2g-orange-ink) !important;
}

body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .team-custom-select-check {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  color: transparent;
  font-size: 11px;
  font-weight: 800;
}

body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .team-custom-select-option.is-selected .team-custom-select-check {
  background: #f97316;
  color: #fff;
}

body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .multi-select-field[data-multi-name="existingRoles"] .multi-select-option.is-selected {
  border-color: var(--team-control-line-strong) !important;
  background: var(--team-control-muted-surface) !important;
  color: var(--team-control-text) !important;
}

body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .team-target-option.is-disabled {
  background: rgba(127, 29, 29, 0.18) !important;
  border-color: rgba(248, 113, 113, 0.22) !important;
  color: var(--team-control-muted) !important;
}

body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .team-target-option.is-empty,
body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .province-combobox-empty,
body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .multi-select-empty {
  background: var(--team-control-muted-surface) !important;
  border-color: var(--team-control-line) !important;
  color: var(--team-control-muted) !important;
}

body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .province-search-field.is-disabled .province-combobox-input {
  background: var(--team-control-muted-surface) !important;
  color: var(--team-control-muted) !important;
}

@media (max-width: 640px) {
  body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .team-custom-select-menu {
    max-height: min(232px, 42vh);
  }
}

/* Communication and commitment selects sit at the bottom of the form.
   Open their menus upward so they never overlap the sticky modal footer. */
body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .team-custom-select[data-team-custom-select="communication"] .team-custom-select-menu,
body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .team-custom-select[data-team-custom-select="commitment"] .team-custom-select-menu {
  top: auto;
  bottom: calc(100% + 5px);
}

html[data-theme="dark"] body[data-page="app"] #modalOverlay.team-post-modal,
body.theme-dark[data-page="app"] #modalOverlay.team-post-modal {
  --team-control-bg: #171717;
  --team-control-surface: #1d1d1d;
  --team-control-muted-surface: #252525;
  --team-control-hover: #2b2b2b;
  --team-control-line: rgba(255, 255, 255, 0.10);
  --team-control-line-strong: rgba(255, 255, 255, 0.18);
  --team-control-text: #f4f4f5;
  --team-control-body: #d4d4d8;
  --team-control-muted: #a1a1aa;
  --team-control-faint: #71717a;
  --team-control-panel-shadow: 0 14px 32px rgba(0, 0, 0, 0.34);
}

html[data-theme="dark"] body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .team-custom-select-trigger,
html[data-theme="dark"] body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .team-target-combobox input[data-team-target-competition],
html[data-theme="dark"] body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .province-combobox-input,
html[data-theme="dark"] body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .multi-select-trigger,
body.theme-dark[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .team-custom-select-trigger,
body.theme-dark[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .team-target-combobox input[data-team-target-competition],
body.theme-dark[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .province-combobox-input,
body.theme-dark[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .multi-select-trigger {
  background: #171717 !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
  color: #f4f4f5 !important;
}

html[data-theme="dark"] body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .team-custom-select-menu,
html[data-theme="dark"] body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .team-target-menu,
html[data-theme="dark"] body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .province-combobox-menu,
html[data-theme="dark"] body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .multi-select-menu,
body.theme-dark[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .team-custom-select-menu,
body.theme-dark[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .team-target-menu,
body.theme-dark[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .province-combobox-menu,
body.theme-dark[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .multi-select-menu {
  background: #1d1d1d !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
  color: #f4f4f5 !important;
}

html[data-theme="dark"] body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .team-custom-select-option:hover,
html[data-theme="dark"] body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .team-target-option:hover,
html[data-theme="dark"] body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .province-combobox-option:hover,
html[data-theme="dark"] body[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .multi-select-option:hover,
body.theme-dark[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .team-custom-select-option:hover,
body.theme-dark[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .team-target-option:hover,
body.theme-dark[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .province-combobox-option:hover,
body.theme-dark[data-page="app"] #modalOverlay.team-post-modal #teamPostForm .multi-select-option:hover {
  background: #2b2b2b !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
  color: #f4f4f5 !important;
}

/* Mission Center readiness: semantic circular progress ring */
body.app-shell-v2 .mission-readiness-compact {
  grid-template-columns: 46px minmax(118px, 160px);
}

body.app-shell-v2 .mission-readiness-ring {
  position: relative;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  color: var(--w2g-ink, var(--ink));
}

body.app-shell-v2 .mission-readiness-ring-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

body.app-shell-v2 .mission-readiness-ring-track,
body.app-shell-v2 .mission-readiness-ring-progress {
  fill: none;
  stroke-width: 4;
  vector-effect: non-scaling-stroke;
}

body.app-shell-v2 .mission-readiness-ring-track {
  stroke: rgba(255, 255, 255, 0.12);
}

body.app-shell-v2 .mission-readiness-ring-progress {
  stroke: var(--mission-readiness-ring-color, #f59e0b);
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: var(--mission-readiness-offset, 100);
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

body.app-shell-v2 .mission-readiness-ring.readiness-low {
  --mission-readiness-ring-color: #ef4444;
}

body.app-shell-v2 .mission-readiness-ring.readiness-medium {
  --mission-readiness-ring-color: #f59e0b;
}

body.app-shell-v2 .mission-readiness-ring.readiness-high {
  --mission-readiness-ring-color: #22c55e;
}

body.app-shell-v2 .mission-readiness-ring strong {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  background: var(--surface, var(--w2g-surface, #14171e));
  color: var(--w2g-ink, var(--ink));
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}

html[data-theme="light"] body.app-shell-v2 .mission-readiness-ring-track {
  stroke: rgba(15, 23, 42, 0.12);
}

html[data-theme="light"] body.app-shell-v2 .mission-readiness-ring strong {
  border-color: rgba(15, 23, 42, 0.08);
  background: var(--surface, #ffffff);
}

@media (max-width: 760px) {
  body.app-shell-v2 .mission-readiness-compact {
    grid-template-columns: 46px minmax(0, 1fr);
  }
}

/* ── Authenticated Home: hide guest/marketing sections ─────────────────────
   When a user is logged in, renderHomeMissionSurface() adds .home--auth to
   #home. The mission surface stays visible; the landing content is hidden so
   returning users see only the command surface, not a marketing page.
   Guest users (no .home--auth) continue to see everything unchanged.
   ───────────────────────────────────────────────────────────────────────── */
#home.home--auth .landing-hero,
#home.home--auth .landing-stats-strip,
#home.home--auth .landing-section,
#home.home--auth .how-it-works,
#home.home--auth .organizer-cta,
#home.home--auth .landing-footer {
  display: none;
}

/* ── Home Command Center: Patch B additions ────────────────────────────────
   All selectors are scoped to body.app-shell-v2 #home so they never bleed
   into other pages or the guest shell.
   ───────────────────────────────────────────────────────────────────────── */

/* "Your next move" banner */
body.app-shell-v2 #home .hv2-next-move {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--w2g-surface-2);
  border: 1px solid var(--w2g-line-strong);
  margin-bottom: 4px;
}
body.app-shell-v2 #home .hv2-nm-text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--w2g-ink);
}
body.app-shell-v2 #home .hv2-nm-cta {
  flex: 0 0 auto;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--w2g-orange-ink);
  background: none;
  border: none;
  padding: 4px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s ease;
  white-space: nowrap;
}
body.app-shell-v2 #home .hv2-nm-cta:hover {
  background: var(--w2g-orange-soft);
}

/* Deadline stat: competition name subtext */
body.app-shell-v2 #home .hv2-stat-sub {
  font-size: 10.5px;
  color: var(--w2g-muted);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  line-height: 1.3;
}

/* "Needs attention" chips row */
body.app-shell-v2 #home .hv2-attention {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 0 6px;
}
body.app-shell-v2 #home .hv2-attention-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--w2g-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  flex: 0 0 auto;
}
body.app-shell-v2 #home .hv2-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--w2g-line-strong);
  background: var(--w2g-surface-2);
  font-size: 12px;
  font-weight: 600;
  color: var(--w2g-ink);
  cursor: pointer;
  transition: border-color 0.12s ease, color 0.12s ease;
}
body.app-shell-v2 #home .hv2-chip:hover {
  border-color: var(--w2g-orange-line);
  color: var(--w2g-orange-ink);
}
body.app-shell-v2 #home .hv2-chip-warn {
  border-color: var(--status-danger-fg, #B42121);
  color: var(--status-danger-fg, #B42121);
  background: var(--status-danger-bg, #FCE9E9);
}
body.app-shell-v2 #home .hv2-chip-warn:hover {
  border-color: var(--status-danger-fg, #B42121);
}

/* Readiness factors list (below the meter) */
body.app-shell-v2 #home .hv2-readiness-factors {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 4px 0 14px;
  padding: 11px 13px;
  border-radius: 10px;
  background: var(--w2g-surface-2);
  border: 1px solid var(--w2g-line);
}
body.app-shell-v2 #home .hv2-readiness-factors-head {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--w2g-muted);
  margin-bottom: 3px;
}
body.app-shell-v2 #home .hv2-readiness-factor {
  display: flex;
  gap: 9px;
  align-items: flex-start;
}
body.app-shell-v2 #home .hv2-factor-dot {
  flex: 0 0 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--w2g-orange-line);
  margin-top: 5px;
}
body.app-shell-v2 #home .hv2-factor-copy strong {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--w2g-ink);
  line-height: 1.3;
}
body.app-shell-v2 #home .hv2-factor-copy small {
  font-size: 11.5px;
  color: var(--w2g-muted);
  line-height: 1.4;
}
body.app-shell-v2 #home .hv2-readiness-ok {
  font-size: 12.5px;
  color: var(--w2g-match-strong);
  font-weight: 600;
  margin: 4px 0 12px;
}

/* "Why this match" reasons (below the fit meter) */
body.app-shell-v2 #home .hv2-why {
  margin: 2px 0 10px;
}
body.app-shell-v2 #home .hv2-why-head {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--w2g-muted);
  margin-bottom: 6px;
}
body.app-shell-v2 #home .hv2-why-list {
  margin: 0;
  padding: 0 0 0 15px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
body.app-shell-v2 #home .hv2-why-list li {
  font-size: 12.5px;
  color: var(--w2g-muted);
  line-height: 1.45;
}

/* Mobile tweaks */
@media (max-width: 620px) {
  body.app-shell-v2 #home .hv2-next-move {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  body.app-shell-v2 #home .hv2-nm-cta {
    padding-left: 0;
  }
}

/* ============================================================
   ONBOARDING UX POLISH — Phase 1-3
   ============================================================ */

/* ---------- 1.2 Required field indicators ---------- */
.required-asterisk {
  color: #EF4444;
  font-weight: 700;
  margin-left: 1px;
}
html[data-theme="dark"] .required-asterisk {
  color: #F87171;
}
.field-optional {
  font-weight: 400;
  color: var(--muted);
  font-size: 0.88em;
}
.required-fields-note {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 6px;
  margin-top: -2px;
}

/* ---------- 1.3 Bio character counter ---------- */
.textarea-with-counter {
  display: contents;
}
.textarea-counter-wrap {
  display: flex;
  justify-content: flex-end;
  margin-top: -8px;
  margin-bottom: 4px;
}
.textarea-counter {
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  transition: color .2s ease;
}
.textarea-counter.counter-warning {
  color: #F97316;
}
.textarea-counter.counter-danger {
  color: #EF4444;
  font-weight: 600;
}

/* ---------- 1.4 Selection counter badge — muted, not competing with CTA ---------- */
.selection-counter-badge {
  display: inline-block;
  background: var(--border-soft, rgba(0,0,0,0.06));
  color: var(--muted);
  border: 1px solid var(--border-soft);
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 8px;
  margin-left: 6px;
  vertical-align: middle;
  line-height: 1.6;
}
html[data-theme="dark"] .selection-counter-badge {
  background: rgba(148, 163, 184, 0.12);
  color: #94A3B8;
  border-color: rgba(148, 163, 184, 0.2);
}

/* ---------- 1.4 Max-dim for chips at selection limit ---------- */
.choice-button.at-max-dim {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: auto;
}
body.onboarding-page .choice-button.at-max-dim {
  opacity: 0.35;
  cursor: not-allowed;
}

/* ---------- 1.5 Checkmark on selected chips — subtle, not competing with CTA ---------- */
body.onboarding-page .choice-button.active::before,
body.onboarding-page .choice-grid .choice-button.active::before {
  content: "✓ ";
  font-size: 10px;
  opacity: 0.7;
}

/* Tone down dark-mode orange chip active — keep border but reduce fill saturation */
html[data-theme="dark"] .onboarding-page .onboarding-step-section .choice-button.active,
html[data-theme="dark"] .onboarding-page .onboarding-more-body .choice-button.active {
  background:
    linear-gradient(180deg, rgba(255, 106, 26, 0.14) 0%, rgba(255, 106, 26, 0.08) 100%) !important;
  border-color: rgba(255, 106, 26, 0.55) !important;
  color: #FED7AA !important;
  box-shadow: none !important;
}

/* ---------- 2.1 Skill show-more button ---------- */
.sl-show-more-btn {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 9px 14px;
  border-radius: 10px;
  border: 1px dashed var(--border-soft);
  background: transparent;
  color: var(--orange-dark);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: background .15s ease, border-color .15s ease;
}
.sl-show-more-btn:hover {
  background: var(--orange-soft);
  border-color: var(--orange-soft-2);
}
html[data-theme="dark"] .sl-show-more-btn {
  color: #FDBA74;
  border-color: rgba(249, 115, 22, 0.3);
}
html[data-theme="dark"] .sl-show-more-btn:hover {
  background: rgba(249, 115, 22, 0.1);
  border-color: rgba(249, 115, 22, 0.5);
}

/* ---------- 2.3 Commitment custom dropdown ---------- */
.custom-commit-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.custom-commit-label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--polish-text-strong);
}
.custom-commit-select {
  position: relative;
}
.custom-commit-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 14px;
  border-radius: var(--w2g-r-md, 10px);
  border: 1px solid var(--w2g-line, var(--border-soft));
  background: var(--w2g-surface, #fff);
  cursor: pointer;
  text-align: left;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.custom-commit-trigger:hover {
  border-color: var(--orange-soft-2);
}
.custom-commit-selected {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.custom-commit-selected strong {
  font-size: 13.5px;
  color: var(--w2g-body, var(--text));
  font-weight: 600;
}
.custom-commit-selected small {
  font-size: 11.5px;
  color: var(--muted);
}
.custom-commit-caret {
  font-size: 12px;
  color: var(--muted);
  flex-shrink: 0;
  margin-left: 8px;
}
.custom-commit-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 200;
  background: var(--w2g-surface, #fff);
  border: 1px solid var(--border-soft);
  border-radius: var(--w2g-r-md, 10px);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
  overflow: hidden;
}
.custom-commit-menu.open {
  display: block;
}
.custom-commit-option {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 10px 14px;
  text-align: left;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-soft);
  cursor: pointer;
  transition: background .12s ease;
}
.custom-commit-option:last-child {
  border-bottom: none;
}
.custom-commit-option:hover {
  background: var(--orange-soft);
}
.custom-commit-option.active {
  background: var(--orange-soft);
}
.custom-commit-option.active strong::before {
  content: "✓ ";
  font-size: 11px;
  color: var(--orange-dark);
}
.custom-commit-option strong {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--polish-text-strong);
}
.custom-commit-option small {
  font-size: 11.5px;
  color: var(--muted);
}
html[data-theme="dark"] .custom-commit-trigger {
  background: var(--w2g-surface, rgba(30, 41, 59, 0.9));
  border-color: rgba(148, 163, 184, 0.22);
  color: #E2E8F0;
}
html[data-theme="dark"] .custom-commit-selected strong {
  color: #F1F5F9;
}
html[data-theme="dark"] .custom-commit-menu {
  background: rgba(17, 24, 39, 0.98);
  border-color: rgba(148, 163, 184, 0.22);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
html[data-theme="dark"] .custom-commit-option {
  border-bottom-color: rgba(148, 163, 184, 0.14);
}
html[data-theme="dark"] .custom-commit-option:hover,
html[data-theme="dark"] .custom-commit-option.active {
  background: rgba(249, 115, 22, 0.12);
}
html[data-theme="dark"] .custom-commit-option strong {
  color: #F1F5F9;
}

/* ---------- 2.4 Availability chip sub-labels ---------- */
.availability-grid .availability-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 10px 12px;
}
.avail-label {
  font-weight: 700;
  font-size: 13.5px;
}
.avail-sublabel {
  font-weight: 400;
  font-size: 11px;
  color: var(--muted);
  line-height: 1;
}
.availability-chip.active .avail-sublabel {
  color: inherit;
  opacity: 0.75;
}

/* ---------- 2.5 Contextual tip in sidebar ---------- */
.info-card.contextual-tip {
  border-left: 3px solid var(--orange);
}
.info-card.contextual-tip strong {
  display: block;
  margin-bottom: 4px;
  font-size: 13.5px;
}
.info-card.contextual-tip p {
  margin: 0;
  line-height: 1.55;
}

/* ---------- 3.1 Draft-updated indicator (no persistence claim) ---------- */
.autosave-indicator {
  font-size: 11px;
  color: var(--muted);
  margin-left: auto;
  padding-left: 10px;
  white-space: nowrap;
  opacity: 0.8;
}
.autosave-indicator.draft-updated {
  color: var(--muted);
  font-style: italic;
}
.progress-row {
  display: flex;
  align-items: center;
}

/* ---------- 3.2 Profile photo field ---------- */
.profile-photo-field {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
  padding: 12px 14px;
  border-radius: var(--w2g-r-md, 10px);
  border: 1px solid var(--border-soft);
  background: var(--w2g-surface, #fff);
}
html[data-theme="dark"] .profile-photo-field {
  background: rgba(30, 41, 59, 0.6);
  border-color: rgba(148, 163, 184, 0.2);
}
.profile-photo-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--orange-soft);
  border: 2px solid var(--orange-soft-2);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.profile-photo-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.avatar-initials {
  font-size: 18px;
  font-weight: 700;
  color: var(--orange-dark);
  letter-spacing: 0.5px;
}
.profile-photo-controls {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.profile-photo-label {
  display: inline-block;
  cursor: pointer;
  font-size: 12.5px;
  padding: 5px 12px;
}

/* ---------- 3.3 Celebration screen ---------- */
/* celebrate-mode resets the two-column grid so the screen is properly centred */
.onboarding-shell.celebrate-mode,
body.onboarding-page .onboarding-shell.celebrate-mode {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  grid-template-columns: none !important;
  min-height: 72vh;
  padding: 40px 16px !important;
  gap: 0 !important;
}

.celebrate-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 24px 48px;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  animation: celebrateFadeIn .45s ease both;
}
@keyframes celebrateFadeIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.celebrate-icon {
  font-size: 52px;
  margin-bottom: 12px;
  animation: celebratePop .4s .1s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes celebratePop {
  from { transform: scale(0.5); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
.celebrate-heading {
  font-size: 26px;
  font-weight: 800;
  margin: 0 0 16px;
  color: var(--polish-text-strong);
}
.celebrate-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--orange-soft);
  border: 3px solid var(--orange-soft-2);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
.celebrate-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.celebrate-avatar-initials {
  font-size: 24px;
  font-weight: 700;
  color: var(--orange-dark);
}
.celebrate-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.celebrate-name {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 2px;
  color: var(--polish-text-strong);
}
.celebrate-meta {
  font-size: 13.5px;
  color: var(--muted);
  margin: 0 0 10px;
}
.celebrate-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-bottom: 16px;
}
.celebrate-tagline {
  font-size: 15px;
  color: var(--muted);
  margin: 0 0 24px;
}
.celebrate-cta {
  display: flex;
  gap: 10px;
}

/* W2G clean profile setup shell: removes the former coach/sidebar layout. */
body.onboarding-page {
  background: #0A0C11 !important;
}

body.onboarding-page .simple-header {
  min-height: 72px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(11, 17, 32, 0.88);
  color: #e5e7eb;
}

body.onboarding-page .simple-header .brand {
  color: #f8fafc;
}

body.onboarding-page .simple-header .brand small {
  color: #94a3b8;
}

body.onboarding-page .simple-header .brand-mark {
  background: #f97316;
  color: #fff;
  box-shadow: none;
}

body.onboarding-page .simple-header .button.ghost,
body.onboarding-page .simple-header .language-switch,
body.onboarding-page .simple-header .theme-toggle {
  border-color: rgba(148, 163, 184, 0.22);
  background: rgba(15, 23, 42, 0.78);
  color: #e5e7eb;
  box-shadow: none;
}

body.onboarding-page .onboarding-clean-shell,
body.onboarding-page .onboarding-shell.onboarding-clean-shell {
  display: block !important;
  width: min(920px, calc(100vw - 32px));
  min-height: calc(100vh - 72px);
  padding: clamp(22px, 4vw, 44px) 0 48px;
  margin: 0 auto;
}

body.onboarding-page .onboarding-clean-container,
body.onboarding-page .form-card.wide.onboarding-clean-container {
  display: grid;
  gap: 18px;
  width: 100%;
  padding: clamp(18px, 3vw, 30px);
  border: 1px solid rgba(148, 163, 184, 0.20) !important;
  border-radius: 16px;
  background: rgba(15, 23, 42, 0.94) !important;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.22) !important;
}

body.onboarding-page .onboarding-clean-head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: 2px;
}

body.onboarding-page .onboarding-clean-head > div {
  min-width: 0;
  text-align: right;
}

body.onboarding-page .onboarding-clean-head h1 {
  margin: 0;
  color: #f8fafc;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.1;
  letter-spacing: 0;
}

body.onboarding-page .onboarding-clean-head p:not(.eyebrow) {
  max-width: 560px;
  margin: 7px 0 0 auto;
  color: #94a3b8;
  font-size: 14px;
  line-height: 1.55;
}

body.onboarding-page #onboardingRoleBadge {
  flex: 0 0 auto;
  margin: 0;
  border-color: rgba(249, 115, 22, 0.36);
  background: rgba(249, 115, 22, 0.12);
  color: #fdba74;
}

body.onboarding-page #onboardingProgress {
  margin: 0;
  padding: 8px;
  border-color: rgba(148, 163, 184, 0.18);
  background: rgba(2, 6, 23, 0.42);
}

body.onboarding-page .progress-dot {
  height: 7px;
  background: rgba(148, 163, 184, 0.22);
}

body.onboarding-page .progress-dot.done {
  background: rgba(249, 115, 22, 0.48);
}

body.onboarding-page .progress-dot.active {
  background: #f97316;
}

body.onboarding-page .onboarding-preview-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 12px;
  background: rgba(2, 6, 23, 0.36);
}

body.onboarding-page .onboarding-preview-avatar {
  display: grid;
  width: 56px;
  height: 56px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(249, 115, 22, 0.42);
  border-radius: 999px;
  background: rgba(249, 115, 22, 0.13);
  color: #fed7aa;
  font-size: 16px;
  font-weight: 800;
}

body.onboarding-page .onboarding-preview-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.onboarding-page .onboarding-preview-main {
  display: grid;
  gap: 10px;
  min-width: 0;
}

body.onboarding-page .onboarding-preview-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

body.onboarding-page .onboarding-preview-kicker {
  color: #94a3b8;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body.onboarding-page .onboarding-preview-copy strong {
  overflow-wrap: anywhere;
  color: #f8fafc;
  font-size: 17px;
  line-height: 1.2;
}

body.onboarding-page .onboarding-preview-copy small {
  overflow-wrap: anywhere;
  color: #cbd5e1;
  font-size: 13px;
}

body.onboarding-page .onboarding-preview-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

body.onboarding-page .onboarding-preview-tags span {
  max-width: 100%;
  padding: 4px 9px;
  overflow-wrap: anywhere;
  border: 1px solid rgba(249, 115, 22, 0.28);
  border-radius: 999px;
  background: rgba(249, 115, 22, 0.08);
  color: #fdba74;
  font-size: 12px;
  font-weight: 700;
}

body.onboarding-page .onboarding-preview-tags span.muted {
  border-color: rgba(148, 163, 184, 0.18);
  background: rgba(148, 163, 184, 0.08);
  color: #94a3b8;
}

body.onboarding-page #onboardingForm {
  display: grid;
  gap: 16px;
  padding: clamp(16px, 2.5vw, 24px);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.72);
}

body.onboarding-page #onboardingForm > .eyebrow {
  width: fit-content;
  margin: 0;
  border-color: rgba(148, 163, 184, 0.22);
  background: rgba(148, 163, 184, 0.10);
  color: #cbd5e1;
}

body.onboarding-page #onboardingForm > h2 {
  margin: -8px 0 0;
  color: #f8fafc;
  font-size: clamp(22px, 2.5vw, 30px);
  line-height: 1.15;
}

body.onboarding-page #onboardingForm label,
body.onboarding-page .multi-select-field,
body.onboarding-page .university-picker-card,
body.onboarding-page .skill-level-board,
body.onboarding-page .onboarding-more-options,
html[data-theme="dark"] body.onboarding-page #onboardingForm label,
html[data-theme="dark"] body.onboarding-page .multi-select-field,
html[data-theme="dark"] body.onboarding-page .university-picker-card,
html[data-theme="dark"] body.onboarding-page .skill-level-board {
  border-color: rgba(148, 163, 184, 0.18) !important;
  background: rgba(2, 6, 23, 0.28) !important;
  box-shadow: none !important;
}

body.onboarding-page .choice-button.active,
body.onboarding-page .skill-level-choice.active,
body.onboarding-page .sl-lvl-btn.active,
body.onboarding-page .multi-select-option.is-selected,
body.onboarding-page .province-combobox-option.active,
body.onboarding-page .university-option.active {
  border-color: rgba(249, 115, 22, 0.50) !important;
  background: rgba(249, 115, 22, 0.11) !important;
  color: #fed7aa !important;
  box-shadow: none !important;
}

body.onboarding-page .button-row.between {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding-top: 18px;
  border-top: 1px solid rgba(148, 163, 184, 0.18);
}

body.onboarding-page .button.primary {
  background: #f97316;
  color: #fff;
  box-shadow: 0 10px 24px rgba(249, 115, 22, 0.24);
}

body.onboarding-page .button.secondary {
  border-color: rgba(148, 163, 184, 0.24);
  background: rgba(15, 23, 42, 0.86);
  color: #e5e7eb;
  box-shadow: none;
}

@media (max-width: 720px) {
  body.onboarding-page .simple-header {
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
  }

  body.onboarding-page .simple-header .button-row.compact {
    width: 100%;
    justify-content: flex-start;
  }

  body.onboarding-page .onboarding-clean-shell,
  body.onboarding-page .onboarding-shell.onboarding-clean-shell {
    width: min(100% - 20px, 560px);
    padding: 16px 0 30px;
  }

  body.onboarding-page .onboarding-clean-container,
  body.onboarding-page .form-card.wide.onboarding-clean-container,
  body.onboarding-page #onboardingForm {
    padding: 16px;
    border-radius: 12px;
  }

  body.onboarding-page .onboarding-clean-head {
    display: grid;
    gap: 10px;
  }

  body.onboarding-page .onboarding-clean-head > div {
    text-align: left;
  }

  body.onboarding-page .onboarding-clean-head p:not(.eyebrow) {
    margin-left: 0;
  }

  body.onboarding-page .onboarding-preview-card {
    grid-template-columns: 1fr;
  }

  body.onboarding-page .onboarding-preview-avatar {
    width: 48px;
    height: 48px;
  }

  body.onboarding-page .button-row.between {
    display: grid;
    grid-template-columns: 1fr;
  }
}

/* W2G92 -- Claude reference onboarding shell: neutral charcoal visual shell only. */
body.onboarding-page {
  --ob-page: #0A0C11;
  --ob-shell: #161A22;
  --ob-elevated: #1A1D24;
  --ob-input: #181818;
  --ob-border: rgba(255, 255, 255, 0.06);
  --ob-border-strong: rgba(255, 255, 255, 0.08);
  --ob-text: #f5f5f5;
  --ob-muted: #a1a1aa;
  --ob-soft: #d4d4d8;
  --ob-orange: #f97316;
  background: var(--ob-page) !important;
  color: var(--ob-text);
}

html[data-theme="dark"] body.onboarding-page {
  background: var(--ob-page) !important;
}

body.onboarding-page .simple-header {
  border-bottom: 1px solid var(--ob-border);
  background: rgba(10, 12, 17, 0.94);
  color: var(--ob-text);
  box-shadow: none;
}

body.onboarding-page .simple-header .brand,
body.onboarding-page .simple-header .brand strong {
  color: var(--ob-text);
}

body.onboarding-page .simple-header .brand small {
  color: var(--ob-muted);
}

body.onboarding-page .simple-header .brand-mark {
  background: var(--ob-elevated);
  color: var(--ob-orange);
  border: 1px solid var(--ob-border-strong);
}

body.onboarding-page .simple-header .button.ghost,
body.onboarding-page .simple-header .language-switch,
body.onboarding-page .simple-header .theme-toggle {
  border-color: var(--ob-border);
  background: var(--ob-input);
  color: var(--ob-soft);
}

body.onboarding-page .ob-shell,
body.onboarding-page .onboarding-shell.onboarding-clean-shell {
  width: min(940px, calc(100vw - 32px));
  min-height: calc(100vh - 72px);
  padding: clamp(18px, 3vw, 34px) 0;
}

body.onboarding-page .ob-card,
body.onboarding-page .form-card.wide.onboarding-clean-container {
  gap: 14px;
  padding: clamp(16px, 2.4vw, 24px);
  border: 1px solid var(--ob-border-strong) !important;
  border-radius: 12px;
  background: var(--ob-shell) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.20) !important;
}

body.onboarding-page .ob-header {
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  padding-bottom: 0;
}

body.onboarding-page .ob-header > div {
  text-align: left;
}

body.onboarding-page .ob-header h1 {
  margin: 0;
  color: var(--ob-text);
  font-size: clamp(20px, 1.85vw, 24px);
  font-weight: 680;
  line-height: 1.15;
}

body.onboarding-page .ob-header p:not(.eyebrow) {
  max-width: 500px;
  margin-top: 3px;
  margin-left: 0;
  color: var(--ob-muted);
  font-size: 12.5px;
  line-height: 1.4;
}

body.onboarding-page #onboardingRoleBadge {
  min-height: 0;
  padding: 3px 7px;
  border-color: var(--ob-border-strong);
  background: rgba(255, 255, 255, 0.03);
  color: var(--ob-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

body.onboarding-page .ob-progress,
body.onboarding-page #onboardingProgress,
body.onboarding-page #onboardingProgress.ob-progress {
  position: static !important;
  display: grid;
  grid-template-columns: repeat(var(--ob-step-count, 4), minmax(0, 1fr)) auto;
  gap: 10px;
  align-items: start;
  padding: 4px 0 0;
  margin: 0;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-theme="dark"] body.onboarding-page #onboardingProgress,
html[data-theme="dark"] body.onboarding-page #onboardingProgress.ob-progress {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.onboarding-page .ob-step-node {
  position: relative;
  display: grid;
  width: auto;
  min-width: 0;
  height: auto;
  gap: 6px;
  align-items: start;
  justify-items: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  color: var(--ob-muted);
  box-shadow: none !important;
  outline: 0;
  transform: none !important;
}

body.onboarding-page .ob-step-node::after {
  content: "";
  position: absolute;
  top: 10px;
  left: calc(50% + 14px);
  width: calc(100% - 28px + 10px);
  height: 1px;
  background: var(--ob-border-strong);
}

body.onboarding-page .ob-step-node:nth-last-child(2)::after {
  display: none;
}

body.onboarding-page .ob-step-node.done {
  color: #8fd5aa;
}

body.onboarding-page .ob-step-node.active {
  color: #f97316;
  background: transparent !important;
  box-shadow: none !important;
}

body.onboarding-page .ob-step-marker {
  display: grid;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: #141820;
  color: inherit;
  font-size: 11px;
  font-weight: 700;
  z-index: 1;
}

body.onboarding-page .ob-step-node.done .ob-step-marker {
  border-color: rgba(143, 213, 170, 0.32);
  background: rgba(143, 213, 170, 0.08);
}

body.onboarding-page .ob-step-node.done::after {
  background: rgba(143, 213, 170, 0.22);
}

body.onboarding-page .ob-step-node.active .ob-step-marker {
  border-color: var(--ob-orange);
  background: var(--ob-orange);
  color: #fff;
}

body.onboarding-page .ob-step-label {
  min-width: 0;
  overflow: hidden;
  max-width: 100%;
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.onboarding-page .autosave-indicator {
  min-width: 92px;
  color: var(--ob-muted);
  text-align: right;
}

body.onboarding-page .ob-preview,
body.onboarding-page .onboarding-preview-card {
  gap: 10px;
  padding: 8px 10px;
  border-color: rgba(255, 255, 255, 0.045);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.014);
}

body.onboarding-page .onboarding-preview-avatar {
  width: 32px;
  height: 32px;
  border-color: var(--ob-border-strong);
  background: var(--ob-input);
  color: var(--ob-text);
  font-size: 12px;
}

body.onboarding-page .onboarding-preview-main {
  gap: 5px;
}

body.onboarding-page .onboarding-preview-copy {
  gap: 1px;
}

body.onboarding-page .onboarding-preview-kicker {
  display: none;
}

body.onboarding-page .onboarding-preview-copy strong {
  color: var(--ob-text);
  font-size: 14px;
  line-height: 1.15;
}

body.onboarding-page .onboarding-preview-copy small {
  color: var(--ob-muted);
  font-size: 11.5px;
  line-height: 1.25;
}

body.onboarding-page .onboarding-preview-tags span {
  padding: 2px 6px;
  border-color: rgba(249, 115, 22, 0.16);
  background: rgba(249, 115, 22, 0.032);
  color: #e7b993;
  font-size: 10.5px;
  font-weight: 620;
}

body.onboarding-page .onboarding-preview-tags {
  gap: 4px;
  max-height: 18px;
  overflow: hidden;
}

body.onboarding-page .ob-step-body,
body.onboarding-page #onboardingForm {
  gap: 12px;
  padding: 14px 0 2px;
  border: 0;
  border-top: 1px solid var(--ob-border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.onboarding-page #onboardingForm > .eyebrow,
body.onboarding-page .selection-counter-badge,
html[data-theme="dark"] .selection-counter-badge {
  padding: 3px 7px;
  border-color: rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.025);
  color: var(--ob-muted);
  font-size: 10.5px;
  font-weight: 650;
}

body.onboarding-page #onboardingForm > h2 {
  color: var(--ob-text);
  margin: -2px 0 0;
  font-size: clamp(20px, 2vw, 23px);
  font-weight: 680;
  line-height: 1.18;
  letter-spacing: 0;
}

body.onboarding-page #onboardingForm > .field-help,
body.onboarding-page #onboardingForm > p:not(.eyebrow) {
  margin: 0;
  color: var(--ob-muted);
  font-size: 12.5px;
  line-height: 1.45;
}

body.onboarding-page #onboardingForm label,
body.onboarding-page .multi-select-field,
body.onboarding-page .university-picker-card,
body.onboarding-page .skill-level-board,
body.onboarding-page .onboarding-more-options,
body.onboarding-page .sl-page-header,
body.onboarding-page .sl-cat,
body.onboarding-page .sl-row,
body.onboarding-page .custom-commit-field,
html[data-theme="dark"] body.onboarding-page #onboardingForm label,
html[data-theme="dark"] body.onboarding-page .multi-select-field,
html[data-theme="dark"] body.onboarding-page .university-picker-card,
html[data-theme="dark"] body.onboarding-page .skill-level-board {
  border-color: rgba(255, 255, 255, 0.045) !important;
  background: rgba(255, 255, 255, 0.018) !important;
  box-shadow: none !important;
}

body.onboarding-page #onboardingForm label,
body.onboarding-page .multi-select-field,
body.onboarding-page .university-picker-card,
body.onboarding-page .skill-level-board,
body.onboarding-page .onboarding-more-options,
body.onboarding-page .custom-commit-field {
  padding: 10px 11px;
  border-radius: 8px;
}

body.onboarding-page #onboardingForm label > span:first-child,
body.onboarding-page #onboardingForm .section-mini-heading h3,
body.onboarding-page .sl-cat-name,
body.onboarding-page .sl-skill-name {
  color: var(--ob-soft);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.25;
}

body.onboarding-page #onboardingForm .field-help,
body.onboarding-page #onboardingForm .field-intro,
body.onboarding-page #onboardingForm .section-mini-heading p,
body.onboarding-page .sl-cat-desc {
  color: var(--ob-muted);
  font-size: 12px;
  line-height: 1.45;
}

body.onboarding-page #onboardingForm input,
body.onboarding-page #onboardingForm select,
body.onboarding-page #onboardingForm textarea,
body.onboarding-page .province-combobox-control,
body.onboarding-page .university-select-trigger,
body.onboarding-page .custom-commit-trigger,
body.onboarding-page .sl-search-input {
  min-height: 42px;
  border-color: rgba(255, 255, 255, 0.08) !important;
  border-radius: 8px;
  background: #14171d !important;
  color: var(--ob-text) !important;
  box-shadow: none !important;
}

body.onboarding-page #onboardingForm textarea {
  min-height: 96px;
}

body.onboarding-page .choice-grid,
body.onboarding-page .role-grid,
body.onboarding-page .two-col,
body.onboarding-page .form-grid,
body.onboarding-page .compact-grid {
  gap: 8px;
}

body.onboarding-page .choice-button,
body.onboarding-page .skill-level-choice,
body.onboarding-page .multi-select-option,
body.onboarding-page .province-combobox-option,
body.onboarding-page .university-option,
body.onboarding-page .availability-chip {
  border-color: rgba(255, 255, 255, 0.055);
  background: rgba(255, 255, 255, 0.018);
  box-shadow: none;
}

body.onboarding-page .choice-button.active,
body.onboarding-page .skill-level-choice.active,
body.onboarding-page .sl-lvl-btn.active,
body.onboarding-page .multi-select-option.is-selected,
body.onboarding-page .province-combobox-option.active,
body.onboarding-page .university-option.active,
body.onboarding-page .availability-chip.active {
  border-color: rgba(249, 115, 22, 0.34) !important;
  background: rgba(249, 115, 22, 0.07) !important;
  color: #f6caa8 !important;
  box-shadow: none !important;
}

body.onboarding-page .choice-button.at-max-dim {
  opacity: 0.38;
}

body.onboarding-page .ob-footer,
body.onboarding-page .button-row.between {
  min-height: 0;
  gap: 10px;
  padding-top: 12px;
  border: 0;
  border-top: 0;
  outline: 0;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.onboarding-page .ob-footer-spacer {
  visibility: hidden;
  pointer-events: none;
}

body.onboarding-page .button.primary {
  background: var(--ob-orange);
  color: #fff;
  box-shadow: none;
}

html[data-theme="dark"] body.onboarding-page .button.primary,
body.onboarding-page .button.primary:hover,
body.onboarding-page .button.primary:focus-visible {
  background: var(--ob-orange);
  color: #fff;
  box-shadow: none !important;
}

body.onboarding-page .button.secondary {
  border-color: var(--ob-border-strong);
  background: var(--ob-input);
  color: var(--ob-soft);
}

body.onboarding-page .celebrate-screen {
  width: min(520px, calc(100vw - 32px));
  margin: auto !important;
  border: 1px solid var(--ob-border-strong);
  border-radius: 12px;
  background: var(--ob-shell);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.20);
}

body.onboarding-page .celebrate-icon {
  background: rgba(34, 197, 94, 0.10);
  color: #86efac;
}

body.onboarding-page .celebrate-heading,
body.onboarding-page .celebrate-name {
  color: var(--ob-text);
}

body.onboarding-page .celebrate-meta,
body.onboarding-page .celebrate-tagline {
  color: var(--ob-muted);
}

@media (max-width: 720px) {
  body.onboarding-page .ob-shell,
  body.onboarding-page .onboarding-shell.onboarding-clean-shell {
    width: min(100% - 20px, 560px);
    padding: 14px 0 28px;
  }

  body.onboarding-page .ob-progress,
  body.onboarding-page #onboardingProgress {
    grid-template-columns: repeat(var(--ob-step-count, 4), minmax(0, 1fr));
    position: static !important;
    margin: 0;
    padding: 4px 0 0;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body.onboarding-page .autosave-indicator {
    grid-column: 1 / -1;
    min-width: 0;
    text-align: left;
  }

  body.onboarding-page .ob-step-node {
    justify-content: center;
    min-height: 34px;
    padding: 0 4px;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
  }

  body.onboarding-page .ob-step-label {
    display: none;
  }

  body.onboarding-page .ob-preview,
  body.onboarding-page .onboarding-preview-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  body.onboarding-page .ob-step-body,
  body.onboarding-page #onboardingForm {
    padding: 12px 0 2px !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  body.onboarding-page #onboardingForm h1,
  body.onboarding-page #onboardingForm h2,
  body.onboarding-page #onboardingForm .step-title,
  body.onboarding-page #onboardingForm > h2 {
    margin: -1px 0 0 !important;
    font-size: clamp(20px, 5.4vw, 22px) !important;
    font-weight: 680 !important;
    line-height: 1.18 !important;
    letter-spacing: 0 !important;
  }

  body.onboarding-page #onboardingForm label,
  body.onboarding-page .multi-select-field,
  body.onboarding-page .university-picker-card,
  body.onboarding-page .skill-level-board,
  body.onboarding-page .onboarding-more-options,
  body.onboarding-page .custom-commit-field {
    padding: 10px !important;
    border-radius: 8px !important;
  }

  body.onboarding-page input,
  body.onboarding-page textarea,
  body.onboarding-page select,
  body.onboarding-page #onboardingForm input,
  body.onboarding-page #onboardingForm textarea,
  body.onboarding-page #onboardingForm select {
    min-height: 42px;
    border-radius: 8px !important;
  }

  body.onboarding-page textarea,
  body.onboarding-page #onboardingForm textarea {
    min-height: 96px;
  }

  body.onboarding-page .button-row.between {
    position: static !important;
    grid-template-columns: 1fr;
    margin: 0 !important;
    padding: 12px 0 0 !important;
    border: 0 !important;
    border-top: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body.onboarding-page .button-row.between .btn,
  body.onboarding-page .button-row.between .button,
  body.onboarding-page .button-row.between button {
    min-height: 42px;
    border-radius: 8px;
  }

  body.onboarding-page .celebrate-screen {
    width: min(100% - 24px, 520px);
    margin: auto !important;
  }
}

/* ── Personal Onboarding Step 1 visual refinement ── */

/* Footer hint between back and next buttons */
.ob-footer-hint {
  flex: 1;
  margin: 0;
  padding: 0 8px;
  text-align: center;
  font-size: 12px;
  line-height: 1.4;
  color: #64748b;
}

/* Preview: neutral gray avatar for personal step 0 */
body[data-ob-role="personal"][data-ob-step="0"] .onboarding-preview-avatar {
  border-color: rgba(255, 255, 255, 0.12);
  background: #2a2d35;
  color: #cbd5e1;
}

/* University field: hide logo decoration in onboarding Step 1 */
body[data-ob-role="personal"][data-ob-step="0"] .university-logo-fallback {
  display: none;
}

/* University trigger: tighten grid when logo is hidden */
body[data-ob-role="personal"][data-ob-step="0"] .university-select-trigger {
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 46px;
}

/* Province toggle: normalize hover color to match other dropdowns */
body.onboarding-page .province-combobox-toggle:hover,
body.onboarding-page .province-combobox-toggle:focus-visible {
  background: rgba(255, 255, 255, 0.08) !important;
  outline: none;
}

/* ================================================================
   Round 5 — Step 3 "ทักษะและระดับ" visual refinements
   Scope: body[data-ob-role="personal"][data-ob-step="2"]
   CSS-only; no logic or data changes.
   ================================================================ */

/* A. Flatten recommended skills container */
body[data-ob-role="personal"][data-ob-step="2"].onboarding-page .sl-cat--reco {
  background: none !important;
  border-color: rgba(148, 163, 184, 0.16) !important;
  border-radius: 10px !important;
  padding: 0 !important;
  margin-bottom: 10px !important;
}
body[data-ob-role="personal"][data-ob-step="2"].onboarding-page .sl-cat--reco .sl-cat-hd {
  border-bottom-color: rgba(148, 163, 184, 0.12) !important;
  padding: 8px 12px !important;
  margin-bottom: 0 !important;
  min-height: 0 !important;
}
body[data-ob-role="personal"][data-ob-step="2"].onboarding-page .sl-cat--reco .sl-badge {
  background: rgba(148, 163, 184, 0.10) !important;
  color: #64748b !important;
}

/* B. Simplify skill rows */
body[data-ob-role="personal"][data-ob-step="2"].onboarding-page .sl-row {
  padding: 6px 12px !important;
}
body[data-ob-role="personal"][data-ob-step="2"].onboarding-page .sl-list {
  background: none !important;
  border-top-color: rgba(148, 163, 184, 0.10) !important;
  padding: 0 !important;
  gap: 0 !important;
}

/* C. Refine level buttons — subtle tint, no glow */
body[data-ob-role="personal"][data-ob-step="2"].onboarding-page .sl-lvl-btn.active {
  background: rgba(249, 115, 22, 0.10) !important;
  border-color: rgba(249, 115, 22, 0.42) !important;
  color: #fdba74 !important;
  box-shadow: none !important;
}
body[data-ob-role="personal"][data-ob-step="2"].onboarding-page .sl-lvl-btn:hover {
  transform: none !important;
}
html[data-theme="dark"] body[data-ob-role="personal"][data-ob-step="2"].onboarding-page .sl-lvl-btn.active {
  background: rgba(249, 115, 22, 0.10) !important;
  border-color: rgba(249, 115, 22, 0.42) !important;
  color: #fdba74 !important;
  box-shadow: none !important;
}

/* D. Show-more skills — text link, not full-width dashed block */
body[data-ob-role="personal"][data-ob-step="2"].onboarding-page .sl-show-more-btn {
  display: inline-block !important;
  width: auto !important;
  padding: 4px 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: none !important;
  color: #64748b !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  text-align: left !important;
  margin-top: 4px !important;
}
body[data-ob-role="personal"][data-ob-step="2"].onboarding-page .sl-show-more-btn:hover {
  background: none !important;
  border: none !important;
  color: rgba(249, 115, 22, 0.80) !important;
}

/* E. Skill group categories — lighter card */
body[data-ob-role="personal"][data-ob-step="2"].onboarding-page .sl-cat {
  border-color: rgba(148, 163, 184, 0.14) !important;
  background: none !important;
  border-radius: 10px !important;
}
body[data-ob-role="personal"][data-ob-step="2"].onboarding-page .sl-cat-hd {
  min-height: 0 !important;
  padding: 8px 12px !important;
}

/* F. Compact vertical rhythm */
body[data-ob-role="personal"][data-ob-step="2"].onboarding-page .sl-categories {
  gap: 6px !important;
}
body[data-ob-role="personal"][data-ob-step="2"].onboarding-page .sl-section-divider {
  margin: 8px 0 6px !important;
}

/* Mobile: restore touch-friendly sizes */
@media (max-width: 760px) {
  body[data-ob-role="personal"][data-ob-step="2"].onboarding-page .sl-row {
    padding: 10px 12px !important;
  }
  body[data-ob-role="personal"][data-ob-step="2"].onboarding-page .sl-cat-hd {
    min-height: 48px !important;
    padding: 10px 12px !important;
  }
  body[data-ob-role="personal"][data-ob-step="2"].onboarding-page .sl-list {
    gap: 6px !important;
    padding: 6px 6px 8px !important;
  }
  body[data-ob-role="personal"][data-ob-step="2"].onboarding-page .sl-show-more-btn {
    padding: 6px 0 !important;
  }
}

/* ================================================================
   Round 4 — Step 2 "ความสนใจและเป้าหมาย" visual refinements
   Scope: body[data-ob-role="personal"][data-ob-step="1"]
   CSS-first; no layout or logic changes.
   ================================================================ */

/* A. Helper text (replaces orange slim-note in Step 2) */
.ob-step-helper {
  margin: -4px 0 10px;
  color: #94a3b8;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
}

/* B. Flatten section containers */
body[data-ob-role="personal"][data-ob-step="1"].onboarding-page .onboarding-step-section {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
body[data-ob-role="personal"][data-ob-step="1"].onboarding-page .onboarding-step-section + .onboarding-step-section {
  margin-top: 0 !important;
  padding-top: 16px !important;
  border-top: 1px solid rgba(148, 163, 184, 0.12) !important;
}

/* C. Compact pill chips */
body[data-ob-role="personal"][data-ob-step="1"].onboarding-page .choice-grid {
  display: flex !important;
  flex-flow: row wrap !important;
  gap: 7px !important;
}
body[data-ob-role="personal"][data-ob-step="1"].onboarding-page .choice-button {
  min-height: 0 !important;
  height: auto !important;
  padding: 5px 14px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  flex: none !important;
  width: auto !important;
  transform: none !important;
}
body[data-ob-role="personal"][data-ob-step="1"].onboarding-page .choice-button:hover {
  transform: none !important;
  border-color: rgba(249, 115, 22, 0.38) !important;
  background: rgba(249, 115, 22, 0.06) !important;
  color: #fed7aa !important;
  box-shadow: none !important;
}
body[data-ob-role="personal"][data-ob-step="1"].onboarding-page .choice-button.active {
  background: rgba(249, 115, 22, 0.09) !important;
  border-color: rgba(249, 115, 22, 0.42) !important;
  color: #fdba74 !important;
  box-shadow: none !important;
}
body[data-ob-role="personal"][data-ob-step="1"].onboarding-page .choice-button.at-max-dim {
  opacity: 0.28 !important;
}

/* D. Section heading — counter as right-aligned light metadata */
body[data-ob-role="personal"][data-ob-step="1"].onboarding-page .section-mini-heading h3 {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 8px !important;
}
body[data-ob-role="personal"][data-ob-step="1"].onboarding-page .selection-counter-badge {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 11.5px !important;
  color: #64748b !important;
  font-weight: 400 !important;
  flex-shrink: 0 !important;
  line-height: inherit !important;
  vertical-align: baseline !important;
}

/* E. Show-more: text link, not card row */
body[data-ob-role="personal"][data-ob-step="1"].onboarding-page .onboarding-more-options {
  border: none !important;
  background: none !important;
  border-radius: 0 !important;
  margin-top: 8px !important;
  overflow: visible !important;
  box-shadow: none !important;
}
body[data-ob-role="personal"][data-ob-step="1"].onboarding-page .onboarding-more-options summary {
  display: inline-flex !important;
  align-items: center !important;
  padding: 2px 0 !important;
  min-height: 0 !important;
  font-weight: 400 !important;
  font-size: 13px !important;
  color: #64748b !important;
  justify-content: flex-start !important;
  width: auto !important;
  cursor: pointer !important;
}
body[data-ob-role="personal"][data-ob-step="1"].onboarding-page .onboarding-more-options summary::after {
  display: none !important;
}
body[data-ob-role="personal"][data-ob-step="1"].onboarding-page .onboarding-more-options summary small {
  display: none !important;
}
body[data-ob-role="personal"][data-ob-step="1"].onboarding-page .onboarding-more-options[open] summary {
  color: rgba(249, 115, 22, 0.80) !important;
  border-bottom: none !important;
}
body[data-ob-role="personal"][data-ob-step="1"].onboarding-page .onboarding-more-body {
  padding: 8px 0 2px !important;
}

/* F. Compact vertical rhythm */
body[data-ob-role="personal"][data-ob-step="1"].onboarding-page .section-mini-heading {
  margin-bottom: 8px !important;
}

/* G. Mute preview tag chip intensity slightly */
body.onboarding-page .onboarding-preview-tags span {
  border-color: rgba(249, 115, 22, 0.18) !important;
  background: rgba(249, 115, 22, 0.06) !important;
  color: #c9956b !important;
}

/* Mobile: preserve pill shape on small screens */
@media (max-width: 760px) {
  body[data-ob-role="personal"][data-ob-step="1"].onboarding-page .choice-button {
    padding: 6px 12px !important;
    font-size: 13.5px !important;
    border-radius: 999px !important;
    min-height: 0 !important;
    height: auto !important;
  }
  body[data-ob-role="personal"][data-ob-step="1"].onboarding-page .choice-grid {
    gap: 6px !important;
  }
}

/* ── Personal onboarding profile photo upload ── */
body[data-ob-role="personal"].onboarding-page .ob-profile-photo-upload {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  text-decoration: none;
}

body[data-ob-role="personal"].onboarding-page .ob-profile-photo-content {
  display: grid;
  gap: 2px;
  min-width: 0;
}

body[data-ob-role="personal"].onboarding-page .ob-profile-photo-content > strong {
  color: var(--ob-text);
  font-size: 13.5px;
  line-height: 1.2;
}

body[data-ob-role="personal"].onboarding-page .ob-profile-photo-content > small {
  color: var(--ob-muted);
  font-size: 11px;
  line-height: 1.3;
}

body[data-ob-role="personal"].onboarding-page .ob-profile-photo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  align-items: center;
  margin-top: 4px;
}

body[data-ob-role="personal"].onboarding-page .ob-profile-photo-button {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  padding: 4px 9px;
  border: 1px solid rgba(249, 115, 22, 0.36);
  border-radius: 6px;
  background: rgba(249, 115, 22, 0.10);
  color: #fdba74;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

body[data-ob-role="personal"].onboarding-page .ob-profile-photo-rule {
  color: #64748b;
  font-size: 10px;
  line-height: 1.2;
}

body[data-ob-role="personal"].onboarding-page .onboarding-avatar-optional-note {
  display: inline-block;
  justify-self: start;
  width: fit-content;
  max-width: 100%;
  margin-top: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #a1a1aa;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
}

html[data-theme="light"] body[data-ob-role="personal"].onboarding-page .onboarding-avatar-optional-note {
  color: #64748b;
}

body[data-ob-role="personal"].onboarding-page .ob-profile-photo-upload .onboarding-preview-kicker {
  display: block;
  align-self: start;
  padding-top: 2px;
  color: #4b5563;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

body[data-ob-role="personal"].onboarding-page .ob-profile-photo-button:hover {
  border-color: rgba(249, 115, 22, 0.58);
  background: rgba(249, 115, 22, 0.16);
  color: #fed7aa;
}

body[data-ob-role="personal"].onboarding-page .ob-profile-photo-button:focus-visible {
  outline: 2px solid rgba(249, 115, 22, 0.65);
  outline-offset: 2px;
}

@media (max-width: 520px) {
  body[data-ob-role="personal"].onboarding-page .ob-profile-photo-upload {
    grid-template-columns: auto minmax(0, 1fr);
  }

  body[data-ob-role="personal"].onboarding-page .ob-profile-photo-upload .onboarding-preview-kicker {
    display: none;
  }
}

/* ── Onboarding dropdown interaction and charcoal surface cleanup ── */
body.onboarding-page #onboardingForm input,
body.onboarding-page #onboardingForm select,
body.onboarding-page #onboardingForm textarea,
body.onboarding-page .province-combobox-control,
body.onboarding-page .university-select-trigger,
body.onboarding-page .custom-commit-trigger,
body.onboarding-page .sl-search-input {
  background: #181818 !important;
}

body.onboarding-page #onboardingForm .province-combobox-menu,
body.onboarding-page #onboardingForm .university-select-menu,
body.onboarding-page .custom-commit-menu {
  border-color: rgba(255, 255, 255, 0.08) !important;
  background: #1e1e1e !important;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.42) !important;
}

body.onboarding-page #onboardingForm .university-menu-head,
body.onboarding-page #onboardingForm .university-option-list,
body.onboarding-page #onboardingForm .province-combobox-option,
body.onboarding-page #onboardingForm .university-option,
body.onboarding-page .custom-commit-option {
  border-color: rgba(255, 255, 255, 0.06) !important;
  background: #1e1e1e !important;
}

body.onboarding-page #onboardingForm .province-combobox-option:hover,
body.onboarding-page #onboardingForm .province-combobox-option:focus-visible,
body.onboarding-page #onboardingForm .university-option:hover,
body.onboarding-page #onboardingForm .university-option:focus-visible,
body.onboarding-page .custom-commit-option:hover,
body.onboarding-page .custom-commit-option:focus-visible,
body.onboarding-page #onboardingForm .province-combobox-option.active,
body.onboarding-page #onboardingForm .university-option.active,
body.onboarding-page .custom-commit-option.active {
  border-color: rgba(249, 115, 22, 0.28) !important;
  background: rgba(249, 115, 22, 0.10) !important;
}

body.onboarding-page #onboardingForm select option {
  background: #1e1e1e;
  color: #f5f5f5;
}

/* Light theme counterpart for the charcoal onboarding shell above. */
html[data-theme="light"] body.onboarding-page {
  --ob-page: #f8fafc;
  --ob-shell: #ffffff;
  --ob-elevated: #f1f5f9;
  --ob-input: #ffffff;
  --ob-border: #e2e8f0;
  --ob-border-strong: #cbd5e1;
  --ob-text: #0f172a;
  --ob-muted: #64748b;
  --ob-soft: #334155;
  background: var(--ob-page) !important;
  color: var(--ob-text);
}

html[data-theme="light"] body.onboarding-page .simple-header {
  border-bottom-color: var(--ob-border);
  background: rgba(255, 255, 255, 0.94);
  color: var(--ob-text);
}

html[data-theme="light"] body.onboarding-page .simple-header .brand,
html[data-theme="light"] body.onboarding-page .simple-header .brand strong {
  color: var(--ob-text);
}

html[data-theme="light"] body.onboarding-page .simple-header .brand small {
  color: var(--ob-muted);
}

html[data-theme="light"] body.onboarding-page .simple-header .brand-mark {
  background: #fff7ed;
  color: var(--ob-orange);
  border-color: #fed7aa;
}

html[data-theme="light"] body.onboarding-page .simple-header .button.ghost,
html[data-theme="light"] body.onboarding-page .simple-header .language-switch,
html[data-theme="light"] body.onboarding-page .simple-header .theme-toggle {
  border-color: var(--ob-border);
  background: #ffffff;
  color: var(--ob-soft);
}

html[data-theme="light"] body.onboarding-page .ob-card,
html[data-theme="light"] body.onboarding-page .onboarding-clean-container,
html[data-theme="light"] body.onboarding-page .form-card.wide.onboarding-clean-container,
html[data-theme="light"] body.onboarding-page .celebrate-screen {
  border-color: var(--ob-border) !important;
  background: var(--ob-shell) !important;
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="light"] body.onboarding-page #onboardingRoleBadge,
html[data-theme="light"] body.onboarding-page #onboardingForm > .eyebrow,
html[data-theme="light"] body.onboarding-page .selection-counter-badge {
  border-color: #fed7aa;
  background: #fff7ed;
  color: #c2410c;
}

html[data-theme="light"] body.onboarding-page .ob-step-marker {
  border-color: var(--ob-border-strong);
  background: #ffffff;
}

html[data-theme="light"] body.onboarding-page .ob-preview,
html[data-theme="light"] body.onboarding-page .onboarding-preview-card {
  border-color: var(--ob-border);
  background: #f8fafc;
}

html[data-theme="light"] body.onboarding-page .onboarding-preview-avatar,
html[data-theme="light"] body[data-ob-role="personal"][data-ob-step="0"].onboarding-page .onboarding-preview-avatar {
  border-color: #fed7aa;
  background: #fff7ed;
  color: #c2410c;
}

html[data-theme="light"] body.onboarding-page .onboarding-preview-tags span {
  border-color: #fed7aa;
  background: #fff7ed;
  color: #c2410c;
}

html[data-theme="light"] body.onboarding-page .onboarding-preview-tags span.muted {
  border-color: var(--ob-border);
  background: #f1f5f9;
  color: var(--ob-muted);
}

html[data-theme="light"] body.onboarding-page #onboardingForm {
  border-color: var(--ob-border);
  background: #ffffff;
}

html[data-theme="light"] body.onboarding-page #onboardingForm label,
html[data-theme="light"] body.onboarding-page .multi-select-field,
html[data-theme="light"] body.onboarding-page .university-picker-card,
html[data-theme="light"] body.onboarding-page .skill-level-board,
html[data-theme="light"] body.onboarding-page .onboarding-more-options,
html[data-theme="light"] body.onboarding-page .sl-page-header,
html[data-theme="light"] body.onboarding-page .sl-cat,
html[data-theme="light"] body.onboarding-page .sl-row,
html[data-theme="light"] body.onboarding-page .custom-commit-field,
html[data-theme="light"] body.onboarding-page .ob-profile-photo-upload {
  border-color: var(--ob-border) !important;
  background: #ffffff !important;
}

html[data-theme="light"] body.onboarding-page #onboardingForm input,
html[data-theme="light"] body.onboarding-page #onboardingForm select,
html[data-theme="light"] body.onboarding-page #onboardingForm textarea,
html[data-theme="light"] body.onboarding-page .province-combobox-control,
html[data-theme="light"] body.onboarding-page .university-select-trigger,
html[data-theme="light"] body.onboarding-page .multi-select-trigger,
html[data-theme="light"] body.onboarding-page .multi-select-search,
html[data-theme="light"] body.onboarding-page .custom-commit-trigger,
html[data-theme="light"] body.onboarding-page .sl-search-input {
  border-color: var(--ob-border-strong) !important;
  background: #ffffff !important;
  color: var(--ob-text) !important;
}

html[data-theme="light"] body.onboarding-page #onboardingForm input::placeholder,
html[data-theme="light"] body.onboarding-page #onboardingForm textarea::placeholder,
html[data-theme="light"] body.onboarding-page .multi-select-search::placeholder,
html[data-theme="light"] body.onboarding-page .sl-search-input::placeholder {
  color: #94a3b8;
}

html[data-theme="light"] body.onboarding-page #onboardingForm .province-combobox-menu,
html[data-theme="light"] body.onboarding-page #onboardingForm .university-select-menu,
html[data-theme="light"] body.onboarding-page .multi-select-menu,
html[data-theme="light"] body.onboarding-page .custom-commit-menu {
  border-color: var(--ob-border) !important;
  background: #ffffff !important;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12) !important;
}

html[data-theme="light"] body.onboarding-page #onboardingForm .university-menu-head,
html[data-theme="light"] body.onboarding-page #onboardingForm .university-option-list,
html[data-theme="light"] body.onboarding-page #onboardingForm .province-combobox-option,
html[data-theme="light"] body.onboarding-page #onboardingForm .university-option,
html[data-theme="light"] body.onboarding-page .multi-select-option,
html[data-theme="light"] body.onboarding-page .custom-commit-option {
  border-color: var(--ob-border) !important;
  background: #ffffff !important;
  color: var(--ob-text);
}

html[data-theme="light"] body.onboarding-page #onboardingForm .province-combobox-option:hover,
html[data-theme="light"] body.onboarding-page #onboardingForm .university-option:hover,
html[data-theme="light"] body.onboarding-page .multi-select-option:hover,
html[data-theme="light"] body.onboarding-page .custom-commit-option:hover,
html[data-theme="light"] body.onboarding-page #onboardingForm .province-combobox-option.active,
html[data-theme="light"] body.onboarding-page #onboardingForm .university-option.active,
html[data-theme="light"] body.onboarding-page .multi-select-option.is-selected,
html[data-theme="light"] body.onboarding-page .custom-commit-option.active {
  border-color: #fdba74 !important;
  background: #fff7ed !important;
  color: #9a3412 !important;
}

html[data-theme="light"] body.onboarding-page #onboardingForm select option {
  background: #ffffff;
  color: var(--ob-text);
}

html[data-theme="light"] body.onboarding-page .choice-button,
html[data-theme="light"] body.onboarding-page .skill-level-choice,
html[data-theme="light"] body.onboarding-page .availability-chip,
html[data-theme="light"] body.onboarding-page .sl-lvl-btn {
  border-color: var(--ob-border);
  background: #ffffff;
  color: var(--ob-soft);
}

html[data-theme="light"] body.onboarding-page .choice-button.active,
html[data-theme="light"] body.onboarding-page .skill-level-choice.active,
html[data-theme="light"] body.onboarding-page .availability-chip.active,
html[data-theme="light"] body.onboarding-page .sl-lvl-btn.active {
  border-color: #fdba74 !important;
  background: #fff7ed !important;
  color: #9a3412 !important;
}

html[data-theme="light"] body.onboarding-page .button.secondary {
  border-color: var(--ob-border-strong);
  background: #ffffff;
  color: var(--ob-soft);
}

/* ============================================================
   MOBILE PROFILE REDESIGN V1
   Compact matching identity layout; desktop remains unchanged.
   ============================================================ */
@media (max-width: 680px) {
  body.app-shell-v2 #profile {
    overflow-x: clip;
  }

  body.app-shell-v2 #profile .section-title-row {
    display: none;
  }

  body.app-shell-v2 #profile .profile-name-row {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
  }

  body.app-shell-v2 #profile .profile-name-row .profile-v2-name {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  body.app-shell-v2 #profile .profile-mobile-edit-button {
    display: inline-flex;
    flex: 0 0 auto;
    width: auto;
    min-height: 32px;
    padding: 6px 9px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border-color: var(--w2g-orange-line);
    background: var(--w2g-orange);
    color: #fff;
    font-size: 11px;
    line-height: 1;
    white-space: nowrap;
  }

  body.app-shell-v2 #profileContent,
  body.app-shell-v2 #profile .profile-v2-layout {
    gap: 8px;
  }

  body.app-shell-v2 #profile .profile-v2-layout {
    align-items: stretch;
    margin-bottom: 6px;
    overflow: visible;
  }

  body.app-shell-v2 #profile .profile-v2-card {
    padding: 13px 14px;
    border-radius: 12px;
  }

  body.app-shell-v2 #profile .profile-v2-card-label {
    margin-bottom: 7px;
    font-size: 10.5px;
  }

  body.app-shell-v2 #profile .profile-identity-top {
    align-items: center;
    gap: 11px;
  }

  body.app-shell-v2 #profile .profile-identity-v2 .member-avatar.large {
    flex-basis: 56px;
    width: 56px;
    height: 56px;
    border-radius: 12px;
    font-size: 19px;
  }

  body.app-shell-v2 #profile .profile-v2-name {
    margin-bottom: 3px;
    font-size: 18px;
  }

  body.app-shell-v2 #profile .profile-v2-meta {
    margin-bottom: 6px;
    font-size: 12px;
  }

  body.app-shell-v2 #profile .profile-v2-status-chip {
    padding: 2px 8px;
    font-size: 10.5px;
  }

  body.app-shell-v2 #profile .profile-identity-links {
    gap: 5px;
    margin-top: 9px;
    padding-top: 8px;
  }

  body.app-shell-v2 #profile .profile-social-icons {
    gap: 5px;
  }

  body.app-shell-v2 #profile .profile-social-icon {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    font-size: 16px;
  }

  body.app-shell-v2 #profile .profile-social-edit {
    min-height: 28px !important;
    padding: 3px 9px !important;
    font-size: 11px !important;
  }

  body.app-shell-v2 #profile .profile-avatar-column {
    gap: 3px;
  }

  body.app-shell-v2 #profile .profile-avatar-change-link,
  body.app-shell-v2 #profile .profile-avatar-remove-link {
    font-size: 10.5px;
  }

  body.app-shell-v2 #profile .profile-strength-helper {
    display: none;
  }

  body.app-shell-v2 #profile .profile-strength-score-row {
    margin-bottom: 7px;
  }

  body.app-shell-v2 #profile .profile-strength-num {
    font-size: 22px;
  }

  body.app-shell-v2 #profile .profile-strength-track {
    margin-bottom: 0;
  }

  body.app-shell-v2 #profile .profile-strength-list {
    display: none;
  }

  body.app-shell-v2 #profile .profile-social-suggestion {
    flex-direction: column;
    align-items: stretch;
    padding: 10px 12px;
  }

  body.app-shell-v2 #profile .profile-social-suggestion-copy {
    flex: 0 1 auto;
  }

  body.app-shell-v2 #profile .profile-social-suggestion-cta {
    width: 100%;
    text-align: center;
  }

  body.app-shell-v2 #profile .profile-about-body {
    font-size: 12.5px;
    line-height: 1.55;
  }

  body.app-shell-v2 #profile .profile-university-inline {
    margin-top: 10px;
    padding-top: 9px;
  }

  body.app-shell-v2 #profile .profile-interests-section {
    margin-top: 10px;
    padding-top: 10px;
  }

  body.app-shell-v2 #profile .profile-v2-chips-row {
    gap: 5px;
  }

  body.app-shell-v2 #profile .profile-v2-chip {
    max-width: 100%;
    padding: 3px 8px;
    font-size: 11px;
    overflow-wrap: anywhere;
  }

  body.app-shell-v2 #profile .profile-team-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 10px;
    align-items: center;
  }

  body.app-shell-v2 #profile .profile-team-name,
  body.app-shell-v2 #profile .profile-team-role-label,
  body.app-shell-v2 #profile .profile-team-competition {
    grid-column: 1;
  }

  body.app-shell-v2 #profile .profile-team-name {
    font-size: 13.5px;
  }

  body.app-shell-v2 #profile .profile-team-competition {
    margin-top: 2px;
    font-size: 11.5px;
  }

  body.app-shell-v2 #profile .profile-team-action {
    grid-column: 2;
    grid-row: 1 / span 3;
    font-size: 11.5px;
    white-space: nowrap;
    align-self: center;
  }

  body.app-shell-v2 #profile .profile-bottom-actions {
    justify-content: center;
    padding-top: 8px;
  }

  body.app-shell-v2 #profile .profile-bottom-actions .profile-logout-button {
    width: auto;
    min-height: 30px;
    padding: 4px 12px;
    border-color: transparent;
    background: transparent;
    color: var(--w2g-muted);
    font-size: 11.5px;
    box-shadow: none;
  }
}

@media (max-width: 390px) {
  body.app-shell-v2 #profile .profile-team-body {
    grid-template-columns: 1fr;
  }

  body.app-shell-v2 #profile .profile-team-action {
    grid-column: 1;
    grid-row: auto;
    width: 100%;
    margin-top: 7px;
    justify-content: center;
  }
}

/* Mobile Home command center. Desktop Home remains on the existing layout. */
body.app-shell-v2 #home .hv2-mobile-greeting,
body.app-shell-v2 #home .hv2-mobile-quick-actions,
body.app-shell-v2 #home .hv2-mobile-mission-summary,
body.app-shell-v2 #home .hv2-mobile-match-cta {
  display: none;
}

@media (max-width: 680px) {
  body.app-shell-v2 #home.home--auth {
    overflow-x: clip;
  }

  body.app-shell-v2 #home.home--auth .home-mission-v2 {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  body.app-shell-v2 #home.home--auth .hv2-stats { order: 1; }
  body.app-shell-v2 #home.home--auth .hv2-grid { order: 2; }

  body.app-shell-v2 #home.home--auth .hv2-head,
  body.app-shell-v2 #home.home--auth .hv2-attention,
  body.app-shell-v2 #home.home--auth .hv2-next-move,
  body.app-shell-v2 #home.home--auth .hv2-mobile-quick-actions {
    display: none;
  }

  body.app-shell-v2 #home.home--auth .hv2-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  body.app-shell-v2 #home.home--auth .hv2-card {
    padding: 12px;
    border-radius: 12px;
  }

  body.app-shell-v2 #home.home--auth .hv2-card-head h3 {
    font-size: 13.5px;
  }

  body.app-shell-v2 #home.home--auth .hv2-continue .hv2-link {
    min-height: 30px;
    padding: 5px 7px;
    border-radius: 7px;
    background: transparent;
    color: var(--w2g-orange-ink);
    font-size: 11px;
    white-space: nowrap;
  }

  body.app-shell-v2 #home.home--auth .hv2-card-sub {
    margin-bottom: 7px;
    font-size: 11px;
    line-height: 1.3;
  }

  body.app-shell-v2 #home.home--auth .hv2-meter {
    gap: 4px;
    margin: 4px 0 7px;
  }

  body.app-shell-v2 #home.home--auth .hv2-meter-track {
    height: 6px;
  }

  body.app-shell-v2 #home.home--auth .hv2-mobile-mission-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 14px;
    margin-top: 5px;
  }

  body.app-shell-v2 #home.home--auth .hv2-mobile-mission-summary div {
    display: flex;
    min-width: 0;
    align-items: baseline;
    gap: 4px;
    padding: 0;
    background: transparent;
  }

  body.app-shell-v2 #home.home--auth .hv2-mobile-mission-summary span,
  body.app-shell-v2 #home.home--auth .hv2-mobile-mission-summary strong {
    display: inline;
  }

  body.app-shell-v2 #home.home--auth .hv2-mobile-mission-summary span {
    margin: 0;
    font-size: 10px;
    color: var(--w2g-muted);
  }

  body.app-shell-v2 #home.home--auth .hv2-mobile-mission-summary strong {
    max-width: 190px;
    overflow: hidden;
    font-size: 10.5px;
    color: var(--w2g-ink);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.app-shell-v2 #home.home--auth .hv2-readiness-factors,
  body.app-shell-v2 #home.home--auth .hv2-readiness-ok,
  body.app-shell-v2 #home.home--auth .hv2-task-list {
    display: none;
  }

  body.app-shell-v2 #home.home--auth .hv2-topmatch .hv2-card-head .hv2-link {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    font-size: 11px;
  }

  body.app-shell-v2 #home.home--auth .hv2-topmatch .hv2-match-lead {
    gap: 9px;
    margin-bottom: 2px;
  }

  body.app-shell-v2 #home.home--auth .hv2-topmatch .hv2-thumb {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    font-size: 13px;
  }

  body.app-shell-v2 #home.home--auth .hv2-topmatch .hv2-lead-copy strong {
    font-size: 12.5px;
  }

  body.app-shell-v2 #home.home--auth .hv2-topmatch .hv2-lead-copy small {
    font-size: 10.5px;
  }

  body.app-shell-v2 #home.home--auth .hv2-why {
    margin: 0 0 6px;
  }

  body.app-shell-v2 #home.home--auth .hv2-why-head {
    margin-bottom: 3px;
    font-size: 9.5px;
  }

  body.app-shell-v2 #home.home--auth .hv2-why-list {
    gap: 2px;
    padding-left: 13px;
  }

  body.app-shell-v2 #home.home--auth .hv2-why-list li {
    font-size: 11px;
    line-height: 1.35;
  }

  body.app-shell-v2 #home.home--auth .hv2-why-list li:nth-child(n + 2) {
    display: none;
  }

  body.app-shell-v2 #home.home--auth .hv2-mobile-match-cta {
    display: inline-flex;
    width: auto;
    min-height: 32px;
    margin-top: 2px;
    padding: 6px 10px;
    font-size: 11.5px;
  }

  body.app-shell-v2 #home.home--auth .hv2-topmatch .hv2-divider,
  body.app-shell-v2 #home.home--auth .hv2-topmatch .hv2-role-head,
  body.app-shell-v2 #home.home--auth .hv2-topmatch .hv2-role-head ~ * {
    display: none;
  }

  body.app-shell-v2 #home.home--auth .hv2-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  body.app-shell-v2 #home.home--auth .hv2-stat {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 0 7px;
    min-width: 0;
    padding: 8px 9px;
    border-radius: 10px;
  }

  body.app-shell-v2 #home.home--auth .hv2-stat-ic {
    grid-row: 1 / span 2;
    width: 26px;
    height: 26px;
    margin: 0;
  }

  body.app-shell-v2 #home.home--auth .hv2-stat strong {
    min-width: 0;
    font-size: 14px;
    line-height: 1.1;
  }

  body.app-shell-v2 #home.home--auth .hv2-stat-lbl,
  body.app-shell-v2 #home.home--auth .hv2-stat-sub {
    min-width: 0;
    overflow: hidden;
    font-size: 9.5px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* ── Recommended field badge ─────────────────────────────────────────────── */
.field-recommended-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--orange-dark, #C2410C);
  background: var(--orange-soft, rgba(255, 106, 26, 0.09));
  border: 1px solid var(--orange-soft-2, rgba(255, 106, 26, 0.22));
  border-radius: 4px;
  padding: 1px 6px;
  margin-left: 6px;
  vertical-align: middle;
  line-height: 1.5;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
html[data-theme="dark"] .field-recommended-badge {
  background: rgba(255, 106, 26, 0.14);
  color: #FF8A4A;
  border-color: rgba(255, 106, 26, 0.28);
}

/* ── Profile page short-bio nudge ────────────────────────────────────────── */
.profile-bio-nudge {
  margin-top: 6px;
  font-size: 0.78rem;
  color: var(--orange-dark, #C2410C);
  font-weight: 500;
}
html[data-theme="dark"] .profile-bio-nudge {
  color: #FF8A4A;
}
.profile-bio-nudge-link {
  display: inline;
  margin-left: 4px;
  color: var(--orange-dark, #C2410C);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}
.profile-bio-nudge-link:hover {
  opacity: 0.75;
}
html[data-theme="dark"] .profile-bio-nudge-link {
  color: #FF8A4A;
}

/* ── Mission Center mobile density pass (max-width: 640px) ─────────────────
   Scope: body.app-shell-v2 mission-center surfaces only.
   Desktop layout is untouched. Task/member logic is untouched.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* F. Overall section gap */
  body.app-shell-v2 .mission-center-main {
    gap: 8px;
  }

  /* A. Team header — tighter padding and smaller avatar */
  body.app-shell-v2 .mission-center-header {
    padding: 9px 11px;
    gap: 5px;
  }

  body.app-shell-v2 .mission-center-header .team-snapshot-title-row {
    gap: 8px;
  }

  body.app-shell-v2 .mission-center-header .avatar,
  body.app-shell-v2 .mission-center-header .member-avatar {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 9px;
    font-size: 11px;
  }

  body.app-shell-v2 .mission-center-header .team-snapshot-title-copy h3 {
    font-size: 15px;
    line-height: 1.2;
  }

  body.app-shell-v2 .mission-center-header .team-snapshot-title-copy p {
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  /* Readiness compact: shrink ring to 34px so status row stays one line */
  body.app-shell-v2 .mission-readiness-compact {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 6px;
  }

  body.app-shell-v2 .mission-readiness-compact .mission-readiness-badge {
    width: 34px;
    height: 34px;
  }

  body.app-shell-v2 .mission-readiness-compact .mission-readiness-badge strong {
    font-size: 11px;
    margin: 0;
  }

  body.app-shell-v2 .mission-readiness-copy strong {
    font-size: 10.5px;
  }

  body.app-shell-v2 .mission-readiness-copy span {
    font-size: 9.5px;
  }

  body.app-shell-v2 .mission-center-header .member-role-pill {
    font-size: 10px;
    padding: 3px 6px;
    min-height: 20px;
  }

  /* B. Stats: 2-column grid instead of 1-column — halves the vertical height */
  body.app-shell-v2 .mission-critical-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  body.app-shell-v2 .mission-critical-stats .team-snapshot-stat {
    min-height: 52px;
    padding: 7px 9px;
  }

  body.app-shell-v2 .mission-critical-stats .team-snapshot-stat strong {
    font-size: 16px;
  }

  body.app-shell-v2 .mission-critical-stats .team-snapshot-stat span,
  body.app-shell-v2 .mission-critical-stats .team-snapshot-stat small {
    font-size: 10px;
  }

  /* C. Your next task empty state: one compact row, hide verbose paragraph */
  body.app-shell-v2 .mission-center-main .mission-next-task-card {
    padding: 10px 12px;
  }

  body.app-shell-v2 .mission-center-main .mission-next-task-card .section-title-row {
    margin-bottom: 6px;
  }

  body.app-shell-v2 .mission-center-main .my-next-task-empty {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    padding: 8px 10px;
    border-radius: 9px;
  }

  body.app-shell-v2 .mission-center-main .my-next-task-empty strong {
    flex: 1 1 auto;
    margin-bottom: 0;
    font-size: 12.5px;
  }

  body.app-shell-v2 .mission-center-main .my-next-task-empty p {
    display: none;
  }

  body.app-shell-v2 .mission-center-main .my-next-task-empty .button {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  /* E. Members: compact list rows — smaller avatar, hide hint text */
  body.app-shell-v2 .mission-secondary-grid {
    gap: 8px;
  }

  body.app-shell-v2 .mission-secondary-panel {
    padding: 10px 11px;
  }

  body.app-shell-v2 .mission-secondary-panel .section-title-row {
    margin-bottom: 7px;
  }

  body.app-shell-v2 .mission-secondary-panel .team-member-list {
    gap: 5px;
  }

  body.app-shell-v2 .mission-secondary-panel .team-member-card {
    padding: 6px 8px;
    gap: 8px;
    border-radius: 9px;
  }

  body.app-shell-v2 .mission-secondary-panel .team-member-card .member-avatar {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 9px;
    font-size: 11px;
  }

  body.app-shell-v2 .mission-secondary-panel .team-member-card .team-member-copy strong {
    font-size: 13px;
  }

  body.app-shell-v2 .mission-secondary-panel .team-member-card .team-member-copy p {
    font-size: 11px;
    margin: 0;
  }

  /* Hide "Click to view profile" hint — wastes vertical space on mobile */
  body.app-shell-v2 .mission-secondary-panel .team-member-card .team-member-view-hint {
    display: none;
  }
}

/* ── Mission Center compact hierarchy pass (Task 5, max-width: 640px) ────────
   Layered on top of the density pass. Desktop layout is untouched.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* A. Team header status: split into two clear rows
     Row 1: [readiness ring] [status text]
     Row 2: [role pill]      [settings/actions →right] */
  body.app-shell-v2 .mission-center-header .mission-header-status {
    flex-wrap: wrap;
    gap: 5px 6px;
    align-items: center;
  }

  /* Readiness compact: full-width first row */
  body.app-shell-v2 .mission-center-header .mission-readiness-compact {
    flex: 0 0 100%;
    min-width: 0;
  }

  /* Hide "Mission readiness" label — ring + score are self-explanatory on mobile */
  body.app-shell-v2 .mission-center-header .mission-readiness-copy strong {
    display: none;
  }

  /* Status text: slightly more readable without the label above it */
  body.app-shell-v2 .mission-center-header .mission-readiness-copy span {
    font-size: 11px;
  }

  /* Role pill: left anchor of second row */
  body.app-shell-v2 .mission-center-header .member-role-pill {
    flex: 1 0 auto;
  }

  /* Settings / member-actions: right anchor of second row */
  body.app-shell-v2 .mission-center-header .mission-team-settings-button,
  body.app-shell-v2 .mission-center-header .mission-member-actions-wrap {
    margin-left: auto;
    flex-shrink: 0;
  }

  /* Settings button: visually secondary — smaller, ghost */
  body.app-shell-v2 .mission-center-header .mission-team-settings-button {
    font-size: 11px;
    padding: 4px 9px;
    min-height: 26px;
  }

  /* B. "Your next task" empty state: hide redundant h3 "Nothing assigned" */
  body.app-shell-v2 .mission-next-task-card.is-empty .section-title-row h3 {
    display: none;
  }

  /* Eyebrow carries the full heading weight when h3 is suppressed */
  body.app-shell-v2 .mission-next-task-card.is-empty .section-title-row .eyebrow {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    opacity: 1;
    color: var(--text-primary, inherit);
  }

  /* C. Stats: softer border so cards feel lighter */
  body.app-shell-v2 .mission-critical-stats .team-snapshot-stat {
    border-color: color-mix(in srgb, var(--border-color, currentColor) 35%, transparent);
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   Mission Center beta-mobile readability fix
   Removes floating ring, adds text readiness, kills eyebrow pill, simplifies
   next-task empty state. Desktop unchanged. Logic/data untouched.
   Target: max-width 640px (iPhone Pro Max and smaller)
   ══════════════════════════════════════════════════════════════════════════════ */

/* Mobile readiness block: hidden everywhere by default; shown only on mobile */
body.app-shell-v2 .mission-readiness-mobile {
  display: none;
}

/* Next-task eyebrow: always kill the pill look inside this card
   (card is display:none on desktop, so this only renders on ≤900px) */
body.app-shell-v2 .mission-center-main .mission-next-task-card .section-title-row .eyebrow {
  display: block;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: none;
  color: var(--w2g-ink, var(--ink));
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 2px;
}

@media (max-width: 640px) {
  /* ── A. Team summary: replace floating ring with stacked text layout ── */

  /* Grid: title-row stays 2-col; mobile-readiness spans full row 2;
     header-status spans full row 3 */
  body.app-shell-v2 .mission-center-header .team-snapshot-title-row {
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: start;
    gap: 10px 8px;
  }

  /* Show mobile readiness block as a full-width grid row */
  body.app-shell-v2 .mission-center-header .mission-readiness-mobile {
    display: block;
    grid-column: 1 / -1;
    padding: 8px 0 2px;
    border-top: 1px solid var(--w2g-line, var(--line, rgba(255,255,255,0.08)));
  }

  /* Hide the SVG ring — replaced by text block above */
  body.app-shell-v2 .mission-center-header .mission-readiness-compact {
    display: none;
  }

  /* "Team readiness 33/100" heading */
  body.app-shell-v2 .readiness-mobile-score {
    font-size: 12px;
    font-weight: 700;
    color: var(--w2g-ink, var(--ink));
    margin-bottom: 5px;
    line-height: 1.2;
  }

  /* Progress bar track */
  body.app-shell-v2 .readiness-mobile-bar {
    height: 6px;
    border-radius: 999px;
    background: var(--w2g-line, rgba(148,163,184,0.2));
    overflow: hidden;
    margin-bottom: 5px;
  }

  /* Progress bar fill — colour set by tone class */
  body.app-shell-v2 .readiness-mobile-fill {
    height: 100%;
    border-radius: 999px;
    background: #f59e0b;
    transition: width 0.3s ease;
  }
  body.app-shell-v2 .readiness-mobile-fill.readiness-tone-low   { background: #ef4444; }
  body.app-shell-v2 .readiness-mobile-fill.readiness-tone-medium { background: #f59e0b; }
  body.app-shell-v2 .readiness-mobile-fill.readiness-tone-high  { background: #22c55e; }

  html[data-theme="light"] body.app-shell-v2 .readiness-mobile-bar {
    background: rgba(15,23,42,0.10);
  }

  /* "Still need: ..." / next action text */
  body.app-shell-v2 .readiness-mobile-missing {
    font-size: 11.5px;
    color: var(--w2g-body, var(--body));
    line-height: 1.4;
  }
  body.app-shell-v2 .readiness-mobile-missing.readiness-all-set {
    color: #22c55e;
    font-weight: 600;
  }

  /* Status row (role pill + settings): clean flex row, no ring */
  body.app-shell-v2 .mission-center-header .mission-header-status {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    justify-content: flex-start;
    grid-column: 1 / -1;
    width: 100%;
    padding-top: 8px;
    border-top: 1px solid var(--w2g-line, var(--line, rgba(255,255,255,0.08)));
    margin-top: 2px;
  }

  /* Settings button and member-actions: pushed to right */
  body.app-shell-v2 .mission-center-header .mission-team-settings-button,
  body.app-shell-v2 .mission-center-header .mission-member-actions-wrap {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 11px;
    padding: 4px 10px;
    min-height: 26px;
  }

  /* Role pill: left anchor */
  body.app-shell-v2 .mission-center-header .member-role-pill {
    flex-shrink: 0;
  }

  /* ── B. Your next task: plain header + compact empty row ── */

  /* Eyebrow override already set globally above; reinforce on mobile */
  body.app-shell-v2 .mission-center-main .mission-next-task-card .section-title-row .eyebrow {
    font-size: 11px;
    letter-spacing: 0.06em;
    opacity: 0.55;
  }

  /* Hide redundant h3 "Nothing assigned" in empty state */
  body.app-shell-v2 .mission-next-task-card.is-empty .section-title-row h3 {
    display: none;
  }

  /* Empty state: one compact inline row */
  body.app-shell-v2 .mission-next-task-card.is-empty .my-next-task-empty {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    padding: 8px 10px;
  }

  body.app-shell-v2 .mission-next-task-card.is-empty .my-next-task-empty strong {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--w2g-body, var(--body));
    margin-bottom: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body.app-shell-v2 .mission-next-task-card.is-empty .my-next-task-empty p.muted {
    display: none;
  }

  body.app-shell-v2 .mission-next-task-card.is-empty .my-next-task-empty .button {
    flex-shrink: 0;
    font-size: 11px;
    padding: 4px 10px;
    min-height: 26px;
    white-space: nowrap;
  }

  /* ── C. Stats: keep 2-column, ensure minimum touch target ── */
  body.app-shell-v2 .mission-critical-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  body.app-shell-v2 .mission-critical-stats .team-snapshot-stat {
    min-height: 54px;
    padding: 8px 10px;
  }

  body.app-shell-v2 .mission-critical-stats .team-snapshot-stat span {
    font-size: 10.5px;
  }

  body.app-shell-v2 .mission-critical-stats .team-snapshot-stat strong {
    font-size: 17px;
  }

  body.app-shell-v2 .mission-critical-stats .team-snapshot-stat small {
    font-size: 10px;
  }
}

/* ── Onboarding mobile overflow menu ────────────────────────────────────────
   Desktop: real skip/logout buttons visible; overflow toggle hidden.
   Mobile (≤640px): real buttons hidden; overflow toggle shown.
   Scoped entirely to body.onboarding-page to avoid bleeding into the app. */

body.onboarding-page #obMenuWrap {
  display: none;
}

@media (max-width: 640px) {
  body.onboarding-page #onboardingSkipButton,
  body.onboarding-page #onboardingLogoutButton {
    display: none !important;
  }

  body.onboarding-page #obMenuWrap {
    display: block;
    position: relative;
    flex: 0 0 auto !important;
  }

  body.onboarding-page #obMenuToggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: transparent;
    color: var(--ink);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    flex: 0 0 auto !important;
    transition: background 0.15s, border-color 0.15s;
  }

  body.onboarding-page #obMenuToggle:hover {
    background: var(--hover-bg, rgba(148, 163, 184, 0.1));
    border-color: var(--border-soft, rgba(148, 163, 184, 0.4));
  }

  body.onboarding-page #obMenuDropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 200;
    min-width: 160px;
    background: var(--card-bg, var(--surface));
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  body.onboarding-page #obMenuDropdown[hidden] {
    display: none !important;
  }

  body.onboarding-page .ob-menu-item {
    width: 100%;
    padding: 12px 16px;
    text-align: left;
    background: transparent;
    border: none;
    color: var(--ink);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s;
    flex: none !important;
  }

  body.onboarding-page .ob-menu-item:hover {
    background: var(--hover-bg, rgba(148, 163, 184, 0.1));
  }

  body.onboarding-page .ob-menu-item + .ob-menu-item {
    border-top: 1px solid var(--border-soft, rgba(148, 163, 184, 0.2));
  }

  /* Prevent the button-row mobile rule from stretching the overflow wrap */
  body.onboarding-page .simple-header .button-row #obMenuWrap {
    flex: 0 0 auto !important;
    width: auto !important;
  }
}

/* ── Onboarding Step 1 footer: mobile compact stack ─────────────────────────
   Scope: body[data-ob-role="personal"][data-ob-step="0"] only.
   On desktop the back-spacer / hint / next layout is fine; only mobile breaks.
   Fix: stack hint text above the full-width next button; remove the spacer so
   it does not consume 1/3 of the row width under the global flex:1 rule. */
@media (max-width: 640px) {
  body[data-ob-role="personal"][data-ob-step="0"].onboarding-page .ob-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  body[data-ob-role="personal"][data-ob-step="0"].onboarding-page .ob-footer .ob-footer-spacer {
    display: none !important;
  }

  body[data-ob-role="personal"][data-ob-step="0"].onboarding-page .ob-footer .ob-footer-hint {
    flex: none;
    order: 0;
    text-align: center;
    padding: 0;
    margin: 0;
  }

  body[data-ob-role="personal"][data-ob-step="0"].onboarding-page .ob-footer #onboardingNextButton {
    flex: none !important;
    width: 100%;
    order: 1;
  }
}

/* ── Home: no-team start panel ───────────────────────────────────────────────
   Replaces the thin hv2-next-move banner when user has no team.
   Scoped to body.app-shell-v2 #home; cannot bleed into other pages. */

body.app-shell-v2 #home .hv2-no-team-panel {
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  border-color: rgba(255, 106, 26, 0.24);
}

body.app-shell-v2 #home .hv2-no-team-copy {
  flex: none;
}

body.app-shell-v2 #home .hv2-no-team-title {
  display: block;
  font-size: 17px;
  font-weight: 700;
  color: var(--w2g-ink);
  line-height: 1.3;
  margin-bottom: 6px;
}

body.app-shell-v2 #home .hv2-no-team-desc {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--w2g-muted);
  margin: 0;
}

body.app-shell-v2 #home .hv2-no-team-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

body.app-shell-v2 #home .hv2-no-team-secondary {
  font-size: 13.5px;
}

@media (max-width: 620px) {
  body.app-shell-v2 #home .hv2-no-team-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  body.app-shell-v2 #home .hv2-no-team-primary,
  body.app-shell-v2 #home .hv2-no-team-secondary {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

/* ── Onboarding footer: strip glow/frame on all mobile steps ────────────────
   style-redesign-v2.css L1342 applies a warm-white gradient background to the
   footer (.form-card.wide .button-row.between). The existing transparent
   override uses !important so it should win, but repeating the exact selector
   here ensures load-order takes precedence too.

   style-redesign-v2.css L1350 applies `box-shadow` to #onboardingNextButton
   using an ID selector (specificity 1,1,0). Class-based rules without
   !important lose to ID selectors, so the orange glow persists. Fixed below
   by targeting the ID directly with !important.
*/
body.onboarding-page .form-card.wide .button-row.between,
body.onboarding-page .form-card.wide .ob-footer {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.onboarding-page #onboardingNextButton {
  box-shadow: none !important;
}

body.onboarding-page .ob-footer .button.primary,
body.onboarding-page .button-row.between .button.primary {
  box-shadow: none !important;
}

/* ============================================================
   MOBILE TOPBAR SHELL PARITY
   Keeps the shared header geometry stable across guest and
   authenticated states while moving secondary controls to the drawer.
   ============================================================ */
@media (max-width: 1050px) {
  body.app-shell-guest .topbar,
  body.app-shell-v2 .topbar {
    width: 100%;
    height: 64px;
    min-height: 64px;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
  }

  body.app-shell-guest .topbar .brand,
  body.app-shell-v2 .topbar .brand {
    min-width: 0;
    min-height: 40px;
    gap: 8px;
    padding: 0 !important;
    border-bottom: 0;
  }

  body.app-shell-guest .topbar .brand-mark,
  body.app-shell-v2 .topbar .brand-mark {
    width: 32px;
    height: 32px;
    border-radius: 9px;
  }

  body.app-shell-guest .mobile-menu-button,
  body.app-shell-v2 .mobile-menu-button,
  body.app-shell-v2 .auth-actions .notification-button {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    border: 1px solid var(--w2g-line) !important;
    border-radius: 10px !important;
    background: var(--w2g-surface) !important;
    color: var(--w2g-muted) !important;
    box-shadow: none !important;
    transform: none !important;
  }

  body.app-shell-guest .mobile-menu-button,
  body.app-shell-v2 .mobile-menu-button {
    grid-column: 3;
  }

  body.app-shell-guest .auth-actions {
    display: none !important;
  }

  body.app-shell-v2 .auth-actions {
    grid-column: 2;
    display: flex !important;
    width: 40px;
    min-width: 40px;
    height: 40px;
    align-items: center;
    gap: 0;
    padding: 0;
  }

  body.app-shell-v2 .auth-actions > :not(.notification-button) {
    display: none !important;
  }

  body.app-shell-guest .auth-actions .notification-button {
    display: none !important;
  }

  body.app-shell-v2 .auth-actions .notification-button {
    position: relative;
    display: inline-grid !important;
    place-items: center;
  }

  body.app-shell-v2 .auth-actions .count-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    margin: 0;
  }

  body.app-shell-guest .main-nav.open .mobile-nav-extras,
  body.app-shell-guest .main-nav.open .mobile-nav-auth,
  body.app-shell-v2 .main-nav.open .mobile-nav-extras,
  body.app-shell-v2 .main-nav.open .mobile-nav-auth {
    display: flex !important;
  }

  body.app-shell-guest .main-nav.open .mobile-nav-controls-row,
  body.app-shell-v2 .main-nav.open .mobile-nav-controls-row {
    width: 100%;
    align-items: center;
    gap: 8px;
  }

  body.app-shell-guest .main-nav.open .mobile-theme-icon-btn,
  body.app-shell-v2 .main-nav.open .mobile-theme-icon-btn {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    border-radius: 10px !important;
  }
}

/* Competition listing card alignment
   Scoped to discovery cards so team/member/admin surfaces are unchanged. */
body.app-shell-v2 #competitionList,
body.app-shell-guest #competitionList {
  align-items: stretch;
}

body.app-shell-v2 #competitions .competition-quick-filter-group,
body.app-shell-guest #competitions .competition-quick-filter-group {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
}

body.app-shell-v2 #competitions .competition-quick-filter-group + .competition-quick-filter-group,
body.app-shell-guest #competitions .competition-quick-filter-group + .competition-quick-filter-group {
  margin-inline-start: 3px;
  padding-inline-start: 8px;
  border-inline-start: 1px solid var(--w2g-line);
}

body.app-shell-v2 #competitions .competition-quick-filter-label,
body.app-shell-guest #competitions .competition-quick-filter-label {
  color: var(--w2g-muted);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

body.app-shell-v2 #competitions .competition-result-count,
body.app-shell-guest #competitions .competition-result-count {
  margin: -8px 2px 10px;
  font-size: 11.5px;
  line-height: 1.35;
}

body.app-shell-v2 #competitionList > .reference-competition-card,
body.app-shell-guest #competitionList > .reference-competition-card {
  display: flex;
  height: 100%;
  min-width: 0;
  flex-direction: column;
}

body.app-shell-v2 #competitionList .reference-competition-card .lc-top,
body.app-shell-guest #competitionList .reference-competition-card .lc-top {
  flex: 0 0 108px;
  height: 108px;
  min-height: 108px !important;
  max-height: 108px;
  overflow: hidden;
}

body.app-shell-v2 #competitionList .reference-competition-card .reference-card-title-row,
body.app-shell-guest #competitionList .reference-competition-card .reference-card-title-row,
body.app-shell-v2 #competitionList .reference-competition-card .reference-card-copy,
body.app-shell-guest #competitionList .reference-competition-card .reference-card-copy {
  min-width: 0;
  max-height: 100%;
  overflow: hidden;
}

body.app-shell-v2 #competitionList .reference-competition-card .reference-card-copy > .chip,
body.app-shell-guest #competitionList .reference-competition-card .reference-card-copy > .chip {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.app-shell-v2 #competitionList .reference-competition-card .lc-title,
body.app-shell-guest #competitionList .reference-competition-card .lc-title {
  display: -webkit-box;
  height: 40px;
  min-height: 40px !important;
  max-height: 40px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  line-height: 1.35;
  overflow-wrap: break-word;
  word-break: normal;
}

body.app-shell-v2 #competitionList .reference-competition-card .lc-meta,
body.app-shell-guest #competitionList .reference-competition-card .lc-meta {
  display: -webkit-box !important;
  height: 35px;
  min-height: 35px;
  max-height: 35px;
  overflow: hidden !important;
  white-space: normal !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

body.app-shell-v2 #competitionList .reference-competition-card > .match,
body.app-shell-guest #competitionList .reference-competition-card > .match {
  min-height: 44px;
}

body.app-shell-v2 #competitionList .reference-competition-card > .reference-why,
body.app-shell-guest #competitionList .reference-competition-card > .reference-why {
  min-height: 31px !important;
}

body.app-shell-v2 #competitionList .reference-competition-card .reference-role-block,
body.app-shell-guest #competitionList .reference-competition-card .reference-role-block {
  display: grid;
  flex: 0 0 auto !important;
  grid-template-rows: auto minmax(24px, auto);
  row-gap: 6px;
  min-height: 54px !important;
}

body.app-shell-v2 #competitionList .reference-competition-card .reference-section-label,
body.app-shell-guest #competitionList .reference-competition-card .reference-section-label {
  margin: 0 !important;
  align-self: end;
}

body.app-shell-v2 #competitionList .reference-competition-card .chip-row,
body.app-shell-guest #competitionList .reference-competition-card .chip-row {
  height: 100%;
  max-height: none;
  overflow: hidden;
  align-content: flex-start;
}

body.app-shell-v2 #competitionList .reference-competition-card .lc-actions,
body.app-shell-guest #competitionList .reference-competition-card .lc-actions {
  width: 100%;
  margin-top: auto !important;
}

body.app-shell-v2 #competitionList .reference-competition-card .lc-actions .button,
body.app-shell-guest #competitionList .reference-competition-card .lc-actions .button {
  min-width: 0;
}

@media (max-width: 760px) {
  body.app-shell-v2 #competitions .competition-result-count,
  body.app-shell-guest #competitions .competition-result-count {
    margin: 6px 2px 9px;
  }

  body.app-shell-v2 #competitions.competition-page-v2 .filter-toolbar.reference-filter-row,
  body.app-shell-guest #competitions.competition-page-v2 .filter-toolbar.reference-filter-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px !important;
    align-items: stretch;
  }

  body.app-shell-v2 #competitions.competition-page-v2 #competitionQuickFilters,
  body.app-shell-guest #competitions.competition-page-v2 #competitionQuickFilters {
    display: none !important;
  }

  body.app-shell-v2 #competitions.competition-page-v2 .filter-search-field,
  body.app-shell-guest #competitions.competition-page-v2 .filter-search-field {
    grid-column: 1;
    width: auto !important;
    min-width: 0;
  }

  body.app-shell-v2 #competitions.competition-page-v2 #competitionFilterToggle,
  body.app-shell-guest #competitions.competition-page-v2 #competitionFilterToggle {
    grid-column: 2;
    min-width: 112px;
    min-height: 44px;
  }

  body.app-shell-v2 #competitions.competition-page-v2 .filter-toolbar label:has(#competitionSort),
  body.app-shell-guest #competitions.competition-page-v2 .filter-toolbar label:has(#competitionSort) {
    grid-column: 1 / -1;
    width: 100% !important;
    min-width: 0;
    margin: 0 !important;
  }

  body.app-shell-v2 #competitions.competition-page-v2 #competitionSearch,
  body.app-shell-guest #competitions.competition-page-v2 #competitionSearch,
  body.app-shell-v2 #competitions.competition-page-v2 #competitionSort,
  body.app-shell-guest #competitions.competition-page-v2 #competitionSort {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px;
  }

  body.app-shell-v2 #competitions.competition-page-v2 #competitionActiveFilters.active-filter-row,
  body.app-shell-guest #competitions.competition-page-v2 #competitionActiveFilters.active-filter-row {
    width: 100%;
    overflow: visible !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    box-sizing: border-box;
  }

  body.app-shell-v2 #competitions.competition-page-v2 #competitionActiveFilters .active-filter-label,
  body.app-shell-guest #competitions.competition-page-v2 #competitionActiveFilters .active-filter-label {
    flex: 1 0 100%;
  }

  body.app-shell-v2 #competitionList .reference-competition-card,
  body.app-shell-guest #competitionList .reference-competition-card {
    height: auto;
  }

  body.app-shell-v2 #competitionList .reference-competition-card .reference-role-block,
  body.app-shell-guest #competitionList .reference-competition-card .reference-role-block {
    grid-template-rows: auto minmax(24px, auto);
    min-height: 0 !important;
  }

  body.app-shell-v2 #competitionList .reference-competition-card .chip-row,
  body.app-shell-guest #competitionList .reference-competition-card .chip-row {
    height: auto;
    overflow: visible;
  }
}

body #competitionFilterToggle .competition-mobile-filter-icon {
  display: none;
}

body #teamFilterToggle .team-mobile-filter-icon,
body #memberFilterToggle .member-mobile-filter-icon {
  display: none;
}

/* Competition mobile filter trigger: one compact control inside the existing frame. */
@media (max-width: 760px) {
  body.app-shell-v2 #competitions.competition-page-v2 .competition-filter-shell,
  body.app-shell-guest #competitions.competition-page-v2 .competition-filter-shell {
    width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    padding: 6px 8px !important;
    box-sizing: border-box;
  }

  body.app-shell-v2 #competitions.competition-page-v2 .filter-toolbar.reference-filter-row,
  body.app-shell-guest #competitions.competition-page-v2 .filter-toolbar.reference-filter-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 44px !important;
    align-items: center !important;
    min-height: 44px;
    gap: 8px !important;
  }

  body.app-shell-v2 #competitions.competition-page-v2 #competitionQuickFilters,
  body.app-shell-guest #competitions.competition-page-v2 #competitionQuickFilters,
  body.app-shell-v2 #competitions.competition-page-v2 .filter-toolbar label:has(#competitionSort),
  body.app-shell-guest #competitions.competition-page-v2 .filter-toolbar label:has(#competitionSort),
  body.app-shell-v2 #competitions.competition-page-v2 #competitionActiveFilters.active-filter-row,
  body.app-shell-guest #competitions.competition-page-v2 #competitionActiveFilters.active-filter-row {
    display: none !important;
  }

  body.app-shell-v2 #competitions.competition-page-v2 .filter-toolbar .filter-search-field,
  body.app-shell-guest #competitions.competition-page-v2 .filter-toolbar .filter-search-field {
    grid-column: 1;
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  body.app-shell-v2 #competitions.competition-page-v2 #competitionSearch,
  body.app-shell-guest #competitions.competition-page-v2 #competitionSearch {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 8px 12px 8px 38px !important;
    border: 1px solid var(--w2g-line) !important;
    border-radius: 10px !important;
    background: var(--w2g-surface-2) !important;
    color: var(--w2g-ink) !important;
    font-size: 16px !important;
    box-shadow: none !important;
  }

  body.app-shell-v2 #competitions.competition-page-v2 .filter-search-field .reference-search-icon,
  body.app-shell-guest #competitions.competition-page-v2 .filter-search-field .reference-search-icon {
    left: 13px !important;
    top: 50% !important;
  }

  body.app-shell-v2 #competitions.competition-page-v2 #competitionFilterToggle,
  body.app-shell-guest #competitions.competition-page-v2 #competitionFilterToggle {
    grid-column: 2;
    position: relative;
    display: inline-flex !important;
    flex: 0 0 44px !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 0 !important;
    align-items: center;
    justify-content: center;
    border-radius: 10px !important;
  }

  body.app-shell-v2 #competitionFilterToggle .filter-toggle-label,
  body.app-shell-guest #competitionFilterToggle .filter-toggle-label,
  body.app-shell-v2 #competitionFilterToggle .filter-button-icon,
  body.app-shell-guest #competitionFilterToggle .filter-button-icon {
    display: none !important;
  }

  body.app-shell-v2 #competitionFilterToggle .competition-mobile-filter-icon,
  body.app-shell-guest #competitionFilterToggle .competition-mobile-filter-icon {
    display: block;
    width: 20px;
    height: 20px;
    font-size: 20px;
  }

  body.app-shell-v2 #competitionFilterToggle .filter-count,
  body.app-shell-guest #competitionFilterToggle .filter-count {
    position: absolute !important;
    top: -5px;
    right: -5px;
    min-width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    padding: 0 4px !important;
    border: 2px solid var(--w2g-surface);
    font-size: 10px !important;
  }

  body[data-page="app"] > #competitionFilterPanel .mobile-competition-primary-controls {
    display: grid;
    gap: 12px;
    margin-bottom: 14px;
  }

  body[data-page="app"] > #competitionFilterPanel .mobile-competition-primary-controls .filter-sort-field {
    position: relative;
    display: grid !important;
    width: 100% !important;
    gap: 6px;
    margin: 0 !important;
  }

  body[data-page="app"] > #competitionFilterPanel .mobile-competition-primary-controls label > span:not(.reference-search-icon) {
    display: block !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    clip: auto !important;
    color: var(--w2g-body);
    font-size: 12px;
    font-weight: 700;
  }

  body[data-page="app"] > #competitionFilterPanel .mobile-competition-primary-controls #competitionSort {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    border: 1px solid var(--w2g-line) !important;
    border-radius: 10px !important;
    background: var(--w2g-surface-2) !important;
    color: var(--w2g-ink) !important;
    font-size: 16px !important;
    box-shadow: none !important;
  }

  body[data-page="app"] > #competitionFilterPanel #competitionActiveFilters.active-filter-row {
    display: flex !important;
    width: 100%;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-sizing: border-box;
  }

  body[data-page="app"] > #competitionFilterPanel #competitionActiveFilters.hidden {
    display: none !important;
  }

  body[data-page="app"] > #competitionFilterPanel #competitionActiveFilters .active-filter-label {
    flex: 1 0 100%;
  }
}

/* Team and Member mobile discovery controls match the Competition search-first pattern. */
@media (max-width: 760px) {
  body.app-shell-v2 #teams.team-page-v2 .team-filter-shell,
  body.app-shell-guest #teams.team-page-v2 .team-filter-shell,
  body.app-shell-v2 #members.member-page-v2 .member-filter-shell,
  body.app-shell-guest #members.member-page-v2 .member-filter-shell {
    width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    padding: 6px 8px !important;
    box-sizing: border-box;
  }

  body.app-shell-v2 #teams.team-page-v2 .filter-toolbar.reference-filter-row,
  body.app-shell-guest #teams.team-page-v2 .filter-toolbar.reference-filter-row,
  body.app-shell-v2 #members.member-page-v2 .filter-toolbar.reference-filter-row,
  body.app-shell-guest #members.member-page-v2 .filter-toolbar.reference-filter-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 44px !important;
    align-items: center !important;
    min-height: 44px;
    gap: 8px !important;
  }

  body.app-shell-v2 #teams.team-page-v2 #teamQuickFilters,
  body.app-shell-guest #teams.team-page-v2 #teamQuickFilters,
  body.app-shell-v2 #teams.team-page-v2 .filter-toolbar label:has(#teamSort),
  body.app-shell-guest #teams.team-page-v2 .filter-toolbar label:has(#teamSort),
  body.app-shell-v2 #members.member-page-v2 .filter-toolbar label:has(#memberSort),
  body.app-shell-guest #members.member-page-v2 .filter-toolbar label:has(#memberSort),
  body.app-shell-v2 #teams.team-page-v2 #teamActiveFilters.active-filter-row,
  body.app-shell-guest #teams.team-page-v2 #teamActiveFilters.active-filter-row,
  body.app-shell-v2 #members.member-page-v2 #memberActiveFilters.active-filter-row,
  body.app-shell-guest #members.member-page-v2 #memberActiveFilters.active-filter-row {
    display: none !important;
  }

  body.app-shell-v2 #teams.team-page-v2 .filter-toolbar .filter-search-field,
  body.app-shell-guest #teams.team-page-v2 .filter-toolbar .filter-search-field,
  body.app-shell-v2 #members.member-page-v2 .filter-toolbar .filter-search-field,
  body.app-shell-guest #members.member-page-v2 .filter-toolbar .filter-search-field {
    grid-column: 1;
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  body.app-shell-v2 #teams.team-page-v2 #teamSearch,
  body.app-shell-guest #teams.team-page-v2 #teamSearch,
  body.app-shell-v2 #members.member-page-v2 #memberSearch,
  body.app-shell-guest #members.member-page-v2 #memberSearch {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 8px 12px 8px 38px !important;
    border: 1px solid var(--w2g-line) !important;
    border-radius: 10px !important;
    background: var(--w2g-surface-2) !important;
    color: var(--w2g-ink) !important;
    font-size: 16px !important;
    box-shadow: none !important;
  }

  body.app-shell-v2 #teams.team-page-v2 .filter-search-field .reference-search-icon,
  body.app-shell-guest #teams.team-page-v2 .filter-search-field .reference-search-icon,
  body.app-shell-v2 #members.member-page-v2 .filter-search-field .reference-search-icon,
  body.app-shell-guest #members.member-page-v2 .filter-search-field .reference-search-icon {
    left: 13px !important;
    top: 50% !important;
  }

  body.app-shell-v2 #teams.team-page-v2 #teamFilterToggle,
  body.app-shell-guest #teams.team-page-v2 #teamFilterToggle,
  body.app-shell-v2 #members.member-page-v2 #memberFilterToggle,
  body.app-shell-guest #members.member-page-v2 #memberFilterToggle {
    grid-column: 2;
    position: relative;
    display: inline-flex !important;
    flex: 0 0 44px !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center;
    justify-content: center;
    border-radius: 10px !important;
  }

  body.app-shell-v2 #teamFilterToggle .filter-toggle-label,
  body.app-shell-guest #teamFilterToggle .filter-toggle-label,
  body.app-shell-v2 #memberFilterToggle .filter-toggle-label,
  body.app-shell-guest #memberFilterToggle .filter-toggle-label,
  body.app-shell-v2 #teamFilterToggle .filter-button-icon,
  body.app-shell-guest #teamFilterToggle .filter-button-icon,
  body.app-shell-v2 #memberFilterToggle .filter-button-icon,
  body.app-shell-guest #memberFilterToggle .filter-button-icon {
    display: none !important;
  }

  body.app-shell-v2 #teamFilterToggle .team-mobile-filter-icon,
  body.app-shell-guest #teamFilterToggle .team-mobile-filter-icon,
  body.app-shell-v2 #memberFilterToggle .member-mobile-filter-icon,
  body.app-shell-guest #memberFilterToggle .member-mobile-filter-icon {
    display: block;
    width: 20px;
    height: 20px;
    font-size: 20px;
  }

  body.app-shell-v2 #teamFilterToggle .filter-count,
  body.app-shell-guest #teamFilterToggle .filter-count,
  body.app-shell-v2 #memberFilterToggle .filter-count,
  body.app-shell-guest #memberFilterToggle .filter-count {
    position: absolute !important;
    top: -5px;
    right: -5px;
    min-width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    padding: 0 4px !important;
    border: 2px solid var(--w2g-surface);
    font-size: 10px !important;
  }

  body.app-shell-v2 #teams .reference-page-head #createTeamButton,
  body.app-shell-guest #teams .reference-page-head #createTeamButton {
    width: 100% !important;
    min-height: 44px !important;
    margin: 12px 0 0 !important;
  }

  body.app-shell-v2 #teams #createTeamButton[hidden],
  body.app-shell-guest #teams #createTeamButton[hidden],
  body.app-shell-v2 #teams #createTeamButton.active-team-create-hidden,
  body.app-shell-guest #teams #createTeamButton.active-team-create-hidden {
    display: none !important;
  }

  body[data-page="app"] > #teamFilterPanel .mobile-team-secondary-controls,
  body[data-page="app"] > #memberFilterPanel .mobile-member-secondary-controls {
    display: grid;
    gap: 12px;
    margin-bottom: 14px;
  }

  body[data-page="app"] > #teamFilterPanel .mobile-team-secondary-controls .filter-sort-field,
  body[data-page="app"] > #memberFilterPanel .mobile-member-secondary-controls .filter-sort-field {
    position: relative;
    display: grid !important;
    width: 100% !important;
    gap: 6px;
    margin: 0 !important;
  }

  body[data-page="app"] > #teamFilterPanel .mobile-team-secondary-controls label > span,
  body[data-page="app"] > #memberFilterPanel .mobile-member-secondary-controls label > span {
    display: block !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    clip: auto !important;
    color: var(--w2g-body);
    font-size: 12px;
    font-weight: 700;
  }

  body[data-page="app"] > #teamFilterPanel .mobile-team-secondary-controls #teamSort,
  body[data-page="app"] > #memberFilterPanel .mobile-member-secondary-controls #memberSort {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    border: 1px solid var(--w2g-line) !important;
    border-radius: 10px !important;
    background: var(--w2g-surface-2) !important;
    color: var(--w2g-ink) !important;
    font-size: 16px !important;
    box-shadow: none !important;
  }

  body[data-page="app"] > #teamFilterPanel #teamActiveFilters.active-filter-row,
  body[data-page="app"] > #memberFilterPanel #memberActiveFilters.active-filter-row {
    display: flex !important;
    width: 100%;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-sizing: border-box;
  }

  body[data-page="app"] > #teamFilterPanel #teamActiveFilters.hidden,
  body[data-page="app"] > #memberFilterPanel #memberActiveFilters.hidden {
    display: none !important;
  }

  body[data-page="app"] > #teamFilterPanel .active-filter-label,
  body[data-page="app"] > #memberFilterPanel .active-filter-label {
    flex: 1 0 100%;
  }
}

/* ── Home: Thin Action Row ──────────────────────────────────────────────────
   Compact no-team actions for the dashboard Home surface. */

body.app-shell-v2 #home .hv2-action-hub {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 52px;
  padding: 7px 10px;
  border: 1px solid var(--w2g-line);
  border-radius: 12px;
  background: var(--w2g-surface);
  margin-bottom: 4px;
}

body.app-shell-v2 #home .hv2-action-hub-icon {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 10px;
  background: var(--w2g-orange-soft);
  color: var(--w2g-orange-ink);
}

body.app-shell-v2 #home .hv2-action-hub .hv2-no-team-copy {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px 8px;
}

body.app-shell-v2 #home .hv2-action-hub .hv2-no-team-title {
  margin: 0;
  font-size: 14px;
  line-height: 1.25;
}

body.app-shell-v2 #home .hv2-action-context {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  margin: 0;
  padding: 2px 7px;
  border: 1px solid var(--w2g-line);
  border-radius: 999px;
  background: var(--w2g-surface-2);
  color: var(--w2g-muted);
  font-size: 10.5px;
  font-weight: 650;
  line-height: 1.25;
}

body.app-shell-v2 #home .hv2-action-hub-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

body.app-shell-v2 #home .hv2-action-primary,
body.app-shell-v2 #home .hv2-action-secondary {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.14s ease, background 0.14s ease, color 0.14s ease;
}

body.app-shell-v2 #home .hv2-action-primary {
  gap: 5px;
  padding: 8px 12px;
  border: 1px solid var(--w2g-orange);
  background: var(--w2g-orange);
  color: #fff;
}

body.app-shell-v2 #home .hv2-action-primary:hover {
  border-color: var(--w2g-orange-strong);
  background: var(--w2g-orange-strong);
}

body.app-shell-v2 #home .hv2-action-secondary {
  padding: 8px 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--w2g-orange-ink);
}

body.app-shell-v2 #home .hv2-action-secondary:hover {
  border-color: var(--w2g-orange-line);
  background: var(--w2g-orange-soft);
}

body.app-shell-v2 #home .hv2-action-primary:focus-visible,
body.app-shell-v2 #home .hv2-action-secondary:focus-visible {
  outline: 2px solid var(--w2g-orange);
  outline-offset: 2px;
}

/* ── Home: compact stat strip — desktop authenticated ───────────────────────
   Reduces icon/value/padding so stats read as supporting info rather than
   the primary focal point. Only targets ≥681 px; the existing mobile block
   at @media (max-width: 680px) owns the smaller-screen layout. */

@media (min-width: 681px) {
  body.app-shell-v2 #home.home--auth .hv2-stat {
    padding: 10px 12px;
    gap: 2px;
    border-color: var(--w2g-line);
  }

  body.app-shell-v2 #home.home--auth .hv2-stat-ic {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    margin-bottom: 4px;
  }

  body.app-shell-v2 #home.home--auth .hv2-stat-ic svg {
    width: 13px;
    height: 13px;
  }

  body.app-shell-v2 #home.home--auth .hv2-stat strong {
    font-size: 18px;
  }
}

/* Mobile: context first, compact actions below. */

@media (max-width: 680px) {
  body.app-shell-v2 #home.home--auth .hv2-action-hub {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 6px 8px;
    min-height: 0;
    padding: 8px;
    margin-bottom: 0;
  }

  body.app-shell-v2 #home.home--auth .hv2-action-hub-icon {
    width: 32px;
    height: 32px;
  }

  body.app-shell-v2 #home.home--auth .hv2-action-hub-actions {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
  }

  body.app-shell-v2 #home.home--auth .hv2-action-primary {
    width: 100%;
    min-height: 38px;
  }

  body.app-shell-v2 #home.home--auth .hv2-action-secondary {
    width: auto;
    min-height: 38px;
    padding-block: 6px;
  }
}

@media (min-width: 961px) {
  body.app-shell-v2 #home .hv2-grid--no-team {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
  }

  body.app-shell-v2 #home .hv2-grid--no-team > .hv2-card {
    height: 100%;
  }
}

body.app-shell-v2 #home .hv2-no-team-mission {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 4px;
}

body.app-shell-v2 #home .hv2-no-team-mission > strong {
  color: var(--w2g-text);
  font-size: 14px;
  line-height: 1.35;
}

body.app-shell-v2 #home .hv2-no-team-mission > p {
  margin: 0;
  color: var(--w2g-muted);
  font-size: 12px;
  line-height: 1.45;
}

body.app-shell-v2 #home .hv2-no-team-task-placeholder {
  padding: 13px 14px;
}

/* ── Home: Status Link Strip ─────────────────────────────────────────────────
   Replaces the 4 large hv2-stat cards with a compact single-row strip of
   quick-link buttons. Visually lighter than the Action Hub — no filled
   backgrounds, no heavy borders, no large numbers.
   Scoped to body.app-shell-v2 #home; cannot bleed into other pages. */

body.app-shell-v2 #home .hv2-status-strip {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--w2g-line);
  border-radius: 10px;
  background: var(--w2g-surface-2);
  overflow: hidden;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

body.app-shell-v2 #home .hv2-status-strip::-webkit-scrollbar {
  display: none;
}

body.app-shell-v2 #home .hv2-ss-item {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border: none;
  border-right: 1px solid var(--w2g-line);
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  font-size: 12.5px;
  line-height: 1.2;
  white-space: nowrap;
  transition: background 0.14s ease;
  text-align: left;
  min-width: 0;
}

body.app-shell-v2 #home .hv2-ss-item:last-child {
  border-right: none;
}

body.app-shell-v2 #home .hv2-ss-item:hover {
  background: var(--w2g-surface);
}

body.app-shell-v2 #home .hv2-ss-item:focus-visible {
  outline: 2px solid var(--w2g-orange);
  outline-offset: -2px;
  background: var(--w2g-surface);
  z-index: 1;
}

body.app-shell-v2 #home .hv2-ss-item[disabled] {
  cursor: default;
  opacity: 0.65;
}

body.app-shell-v2 #home .hv2-ss-item[disabled]:hover {
  background: transparent;
}

body.app-shell-v2 #home .hv2-ss-item iconify-icon {
  flex-shrink: 0;
  color: var(--w2g-muted);
  font-size: 16px;
  transition: color 0.14s ease;
}

body.app-shell-v2 #home .hv2-ss-item:not([disabled]):hover iconify-icon {
  color: var(--w2g-ink);
}

body.app-shell-v2 #home .hv2-ss-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--w2g-muted);
  overflow: hidden;
  text-overflow: ellipsis;
}

body.app-shell-v2 #home .hv2-ss-val {
  font-size: 13px;
  font-weight: 700;
  color: var(--w2g-ink);
  flex-shrink: 0;
}

body.app-shell-v2 #home .hv2-ss-arrow {
  margin-left: auto;
  padding-left: 6px;
  font-size: 11px;
  color: var(--w2g-muted);
  flex-shrink: 0;
  transition: color 0.14s ease;
}

body.app-shell-v2 #home .hv2-ss-item:not([disabled]):hover .hv2-ss-arrow {
  color: var(--w2g-ink);
}

/* ── Status strip: per-item accent colors ────────────────────────────────────
   Each item gets a colored icon and a subtle tinted hover/focus. The strip
   itself stays neutral; only interactive cues carry the accent. */

/* Competitions — W2G orange */
body.app-shell-v2 #home .hv2-ss-item--competitions iconify-icon { color: var(--w2g-orange); }
body.app-shell-v2 #home .hv2-ss-item--competitions:not([disabled]):hover {
  background: var(--w2g-orange-soft);
  border-color: var(--w2g-orange-line);
}
body.app-shell-v2 #home .hv2-ss-item--competitions:not([disabled]):hover iconify-icon { color: var(--w2g-orange-strong, var(--w2g-orange)); }
body.app-shell-v2 #home .hv2-ss-item--competitions:focus-visible { outline-color: var(--w2g-orange); background: var(--w2g-orange-soft); }

/* Teams — blue/indigo */
body.app-shell-v2 #home .hv2-ss-item--teams iconify-icon { color: #3B82F6; }
body.app-shell-v2 #home .hv2-ss-item--teams:not([disabled]):hover {
  background: rgba(59, 130, 246, 0.08);
  border-color: rgba(59, 130, 246, 0.28);
}
body.app-shell-v2 #home .hv2-ss-item--teams:not([disabled]):hover iconify-icon { color: #2563EB; }
body.app-shell-v2 #home .hv2-ss-item--teams:focus-visible { outline-color: #3B82F6; background: rgba(59, 130, 246, 0.08); }

/* Requests — purple/slate */
body.app-shell-v2 #home .hv2-ss-item--requests iconify-icon { color: #8B5CF6; }
body.app-shell-v2 #home .hv2-ss-item--requests:not([disabled]):hover {
  background: rgba(139, 92, 246, 0.08);
  border-color: rgba(139, 92, 246, 0.28);
}
body.app-shell-v2 #home .hv2-ss-item--requests:not([disabled]):hover iconify-icon { color: #7C3AED; }
body.app-shell-v2 #home .hv2-ss-item--requests:focus-visible { outline-color: #8B5CF6; background: rgba(139, 92, 246, 0.08); }

/* Deadline — urgency tiers */
body.app-shell-v2 #home .hv2-ss-item--deadline iconify-icon { color: var(--w2g-muted); }

/* warning: 3-7 days — amber */
body.app-shell-v2 #home .hv2-ss-item--deadline.deadline--warning iconify-icon { color: #D97706; }
body.app-shell-v2 #home .hv2-ss-item--deadline.deadline--warning:not([disabled]):hover {
  background: rgba(217, 119, 6, 0.08);
  border-color: rgba(217, 119, 6, 0.28);
}
body.app-shell-v2 #home .hv2-ss-item--deadline.deadline--warning:focus-visible { outline-color: #D97706; background: rgba(217, 119, 6, 0.08); }

/* urgent: 0-2 days — red-orange */
body.app-shell-v2 #home .hv2-ss-item--deadline.deadline--urgent iconify-icon { color: #EF4444; }
body.app-shell-v2 #home .hv2-ss-item--deadline.deadline--urgent .hv2-ss-val { color: #EF4444; }
body.app-shell-v2 #home .hv2-ss-item--deadline.deadline--urgent:not([disabled]):hover {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.28);
}
body.app-shell-v2 #home .hv2-ss-item--deadline.deadline--urgent:focus-visible { outline-color: #EF4444; background: rgba(239, 68, 68, 0.08); }

/* neutral deadline: hover fallback */
body.app-shell-v2 #home .hv2-ss-item--deadline.deadline--neutral:not([disabled]):hover { background: var(--w2g-surface); }

/* Mobile: horizontally scrollable, place after action hub (order 1) */
@media (max-width: 680px) {
  body.app-shell-v2 #home.home--auth .hv2-status-strip {
    order: 1;
    border-radius: 8px;
  }

  body.app-shell-v2 #home.home--auth .hv2-ss-item {
    flex: 0 0 auto;
    padding: 8px 11px;
    gap: 5px;
    font-size: 12px;
  }

  body.app-shell-v2 #home.home--auth .hv2-ss-val {
    font-size: 12.5px;
  }

  body.app-shell-v2 #home.home--auth .hv2-ss-arrow {
    display: none;
  }
}

/* Member profile modal v3 standalone shell. openModal only supplies the host. */
body[data-page="app"] #modalOverlay.member-profile-modal-v3:not(.hidden) {
  --mpv3-bg: #0d0f16;
  --mpv3-surface: #14171e;
  --mpv3-panel: #151820;
  --mpv3-card: #1b1f27;
  --mpv3-card-deep: #181c24;
  --mpv3-line: rgba(255, 255, 255, 0.12);
  --mpv3-line-strong: rgba(255, 255, 255, 0.16);
  --mpv3-ink: #f5f7fa;
  --mpv3-muted: #a8b0bd;
  --mpv3-faint: #7d8796;
  --mpv3-orange: #f97316;
  --mpv3-orange-soft: rgba(249, 115, 22, 0.14);
  --mpv3-green: #6fd79a;
  --mpv3-green-soft: rgba(43, 179, 94, 0.13);
  background: rgba(4, 6, 10, 0.82) !important;
}

body[data-page="app"] #modalOverlay.member-profile-modal-v3:not(.hidden) .modal-card {
  width: min(600px, calc(100vw - 36px)) !important;
  max-height: min(88vh, 820px) !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  overflow: hidden !important;
  color: var(--mpv3-ink);
  background: var(--mpv3-surface) !important;
  border: 1px solid var(--mpv3-line-strong);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.38);
}

body[data-page="app"] #modalOverlay.member-profile-modal-v3 .modal-header,
body[data-page="app"] #modalOverlay.member-profile-modal-v3 .modal-footer {
  display: none !important;
}

body[data-page="app"] #modalOverlay.member-profile-modal-v3 .modal-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  padding: 0 !important;
  overflow: hidden !important;
  background: var(--mpv3-surface) !important;
}

body[data-page="app"] #modalOverlay.member-profile-modal-v3 .member-profile-modal-v3-shell {
  flex: 1 1 auto;
  min-height: 0;
  max-height: inherit;
  display: flex;
  flex-direction: column;
  color: var(--mpv3-ink);
  background: var(--mpv3-surface);
}

body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-bar {
  flex: 0 0 auto;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 14px 8px 18px;
  border-bottom: 1px solid var(--mpv3-line);
  background: var(--mpv3-surface);
}

body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-bar-context {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--mpv3-faint);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
}

body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-context-badge {
  padding: 2px 7px;
  border: 1px solid rgba(111, 215, 154, 0.28);
  border-radius: 999px;
  color: var(--mpv3-green);
  background: rgba(43, 179, 94, 0.1);
  font-size: 11px;
}

body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-close-button {
  width: 30px;
  min-width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--mpv3-line);
  border-radius: 8px;
  color: var(--mpv3-muted);
  background: var(--mpv3-card-deep);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-close-button:hover,
body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-close-button:focus-visible {
  color: var(--mpv3-ink);
  border-color: rgba(249, 115, 22, 0.5);
  background: #222731;
  outline: none;
}

body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-scroll {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 16px 18px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}

body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--mpv3-line);
  border-radius: 12px;
  background: var(--mpv3-card-deep);
}

body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-hero .member-avatar.large {
  width: 64px;
  height: 64px;
  border-radius: 12px;
}

body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-hero-copy {
  min-width: 0;
}

body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-name-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-name-row h3 {
  margin: 0;
  color: var(--mpv3-ink);
  font-size: 19px;
  line-height: 1.25;
}

body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-role-badge {
  width: fit-content;
  padding: 3px 8px;
  border: 1px solid rgba(249, 115, 22, 0.24);
  border-radius: 999px;
  color: #ffb07a;
  background: var(--mpv3-orange-soft);
  font-size: 11px;
  font-weight: 700;
}

body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 5px;
  color: var(--mpv3-muted);
  font-size: 12px;
}

body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-meta-row span:not(:last-child)::after {
  content: "/";
  margin-left: 10px;
  color: var(--mpv3-faint);
}

body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-bio {
  max-width: 65ch;
  margin: 8px 0 0;
  color: #d2d7df;
  font-size: 13px;
  line-height: 1.55;
}

body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-empty {
  color: var(--mpv3-faint);
  font-style: italic;
}

body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-socials {
  margin-top: 9px;
}

body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-socials .profile-social-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-match-card {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid rgba(43, 179, 94, 0.24);
  border-radius: 10px;
  color: var(--mpv3-ink);
  background: var(--mpv3-green-soft);
}

body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-match-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-match-head > div:first-child {
  display: grid;
  gap: 2px;
}

body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-match-head span,
body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-section h3 {
  color: var(--mpv3-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
}

body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-match-head strong {
  color: var(--mpv3-ink);
  font-size: 14px;
  line-height: 1.25;
}

body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-match-score {
  display: flex;
  align-items: baseline;
  gap: 2px;
  color: var(--mpv3-green);
  line-height: 1;
}

body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-match-score b {
  font-size: 30px;
}

body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-match-score span {
  color: #c8ecd5;
  font-size: 12px;
  font-weight: 700;
}

body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-match-tier {
  width: fit-content;
  padding: 4px 8px;
  border: 1px solid rgba(111, 215, 154, 0.28);
  border-radius: 999px;
  color: #c8ecd5;
  background: rgba(43, 179, 94, 0.12);
  font-size: 11.5px;
  font-weight: 700;
}

body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-match-track {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
}

body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-match-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2bb35e, var(--mpv3-green));
}

body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-match-reasons {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-match-reason {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  color: #d8eee0;
  font-size: 12.5px;
  line-height: 1.4;
}

body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-match-reason span {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: var(--mpv3-green);
  background: rgba(111, 215, 154, 0.13);
  font-size: 10px;
  font-weight: 800;
}

body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-match-reason p {
  margin: 0;
}

body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-info-card {
  min-width: 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--mpv3-card);
}

body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-info-card strong {
  display: block;
  margin-bottom: 3px;
  color: var(--mpv3-faint);
  font-size: 11px;
}

body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-info-card p {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--mpv3-ink);
  font-size: 13px;
  line-height: 1.4;
}

body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-section {
  display: grid;
  gap: 8px;
}

body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-section h3 {
  margin: 0;
}

body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-skill-chip,
body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-interest-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 4px 9px;
  border: 1px solid var(--mpv3-line);
  color: #c4cad3;
  background: var(--mpv3-card);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-skill-chip {
  border-radius: 6px;
}

body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-skill-chip.is-match {
  color: #ffb07a;
  background: var(--mpv3-orange-soft);
  border-color: rgba(249, 115, 22, 0.24);
}

body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-interest-chip {
  border-radius: 999px;
}

body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-goals {
  padding-top: 12px;
  border-top: 1px solid var(--mpv3-line);
}

body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-action-bar {
  flex: 0 0 auto;
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 18px;
  border-top: 1px solid var(--mpv3-line);
  background: var(--mpv3-surface);
}

body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-action-left {
  flex: 0 0 auto;
}

body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-action-right,
body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-invite-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-action-button {
  width: auto;
  min-width: 0;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 13px;
  border: 1px solid var(--mpv3-line);
  border-radius: 8px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none;
}

body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-action-button:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-action-button .mpv3-btn-icon {
  width: 16px;
  height: 16px;
  margin-right: 6px;
  flex-shrink: 0;
}

body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-action-neutral {
  color: #d7dce4;
  background: rgba(255, 255, 255, 0.06);
}

body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-action-secondary {
  color: #f1f3f6;
  background: var(--mpv3-card);
  border-color: var(--mpv3-line-strong);
}

body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-action-primary {
  color: #fff;
  background: var(--mpv3-orange);
  border-color: var(--mpv3-orange);
}

body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-action-danger {
  color: #f4b4b4;
  background: rgba(242, 100, 100, 0.08);
  border-color: rgba(242, 100, 100, 0.2);
}

body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-report-link {
  appearance: none;
  padding: 4px 0;
  border: 0;
  color: var(--mpv3-faint);
  background: transparent;
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
}

body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-report-link:hover,
body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-report-link:focus-visible {
  color: #f26464;
  outline: none;
}

body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-invite-state {
  display: grid;
  gap: 2px;
  max-width: 180px;
  color: var(--mpv3-muted);
  font-size: 11.5px;
  line-height: 1.25;
}

body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-invite-state span {
  color: var(--mpv3-ink);
  font-weight: 700;
}

html[data-theme="light"] body[data-page="app"] #modalOverlay.member-profile-modal-v3:not(.hidden) {
  --mpv3-bg: #f6f7f9;
  --mpv3-surface: #ffffff;
  --mpv3-panel: #ffffff;
  --mpv3-card: #f6f7f9;
  --mpv3-card-deep: #ffffff;
  --mpv3-line: rgba(15, 23, 42, 0.1);
  --mpv3-line-strong: rgba(15, 23, 42, 0.16);
  --mpv3-ink: #0c1019;
  --mpv3-muted: #5f6877;
  --mpv3-faint: #7b8494;
  --mpv3-orange: #ea580c;
  --mpv3-orange-soft: rgba(234, 88, 12, 0.1);
  --mpv3-green: #15803d;
  --mpv3-green-soft: #eaf7ee;
  background: rgba(12, 16, 25, 0.38) !important;
}

html[data-theme="light"] body[data-page="app"] #modalOverlay.member-profile-modal-v3:not(.hidden) .modal-card {
  background: var(--mpv3-surface) !important;
  border-color: var(--mpv3-line-strong);
  box-shadow: 0 18px 44px rgba(12, 16, 25, 0.18);
}

html[data-theme="light"] body[data-page="app"] #modalOverlay.member-profile-modal-v3 .modal-body,
html[data-theme="light"] body[data-page="app"] #modalOverlay.member-profile-modal-v3 .member-profile-modal-v3-shell,
html[data-theme="light"] body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-bar,
html[data-theme="light"] body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-action-bar {
  background: var(--mpv3-surface) !important;
}

html[data-theme="light"] body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-close-button {
  color: var(--mpv3-muted);
  background: #f8fafc;
  border-color: var(--mpv3-line);
}

html[data-theme="light"] body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-close-button:hover,
html[data-theme="light"] body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-close-button:focus-visible {
  color: var(--mpv3-ink);
  background: #fff7ed;
  border-color: rgba(234, 88, 12, 0.36);
}

html[data-theme="light"] body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-hero {
  background: #ffffff;
  border-color: var(--mpv3-line);
  box-shadow: 0 1px 2px rgba(12, 16, 25, 0.05);
}

html[data-theme="light"] body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-role-badge {
  color: #9a3412;
  background: rgba(234, 88, 12, 0.1);
  border-color: rgba(234, 88, 12, 0.22);
}

html[data-theme="light"] body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-bio {
  color: #424a58;
}

html[data-theme="light"] body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-socials .profile-social-icon {
  color: var(--mpv3-ink);
  background: #f8fafc;
  border-color: var(--mpv3-line);
}

html[data-theme="light"] body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-match-card {
  color: var(--mpv3-ink);
  background: var(--mpv3-green-soft);
  border-color: rgba(21, 128, 61, 0.18);
}

html[data-theme="light"] body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-match-score {
  color: var(--mpv3-green);
}

html[data-theme="light"] body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-match-score span,
html[data-theme="light"] body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-match-tier {
  color: #166534;
}

html[data-theme="light"] body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-match-tier {
  background: rgba(21, 128, 61, 0.08);
  border-color: rgba(21, 128, 61, 0.18);
}

html[data-theme="light"] body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-match-track {
  background: rgba(21, 128, 61, 0.14);
}

html[data-theme="light"] body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-match-fill {
  background: linear-gradient(90deg, #22c55e, var(--mpv3-green));
}

html[data-theme="light"] body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-match-reason {
  color: #254c34;
}

html[data-theme="light"] body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-match-reason span {
  color: var(--mpv3-green);
  background: rgba(21, 128, 61, 0.1);
}

html[data-theme="light"] body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-info-card {
  background: #f8fafc;
  border: 1px solid var(--mpv3-line);
}

html[data-theme="light"] body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-info-card p {
  color: var(--mpv3-ink);
}

html[data-theme="light"] body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-skill-chip,
html[data-theme="light"] body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-interest-chip {
  color: #424a58;
  background: #ffffff;
  border-color: var(--mpv3-line);
}

html[data-theme="light"] body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-skill-chip.is-match {
  color: #9a3412;
  background: rgba(234, 88, 12, 0.1);
  border-color: rgba(234, 88, 12, 0.24);
}

html[data-theme="light"] body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-action-neutral {
  color: #1e2531;
  background: #ffffff;
  border-color: var(--mpv3-line);
}

html[data-theme="light"] body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-action-secondary {
  color: #1e2531;
  background: #f8fafc;
  border-color: var(--mpv3-line-strong);
}

html[data-theme="light"] body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-action-primary {
  color: #ffffff;
  background: var(--mpv3-orange);
  border-color: var(--mpv3-orange);
}

html[data-theme="light"] body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-action-danger {
  color: #b91c1c;
  background: rgba(220, 38, 38, 0.06);
  border-color: rgba(220, 38, 38, 0.16);
}

html[data-theme="light"] body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-report-link {
  color: var(--mpv3-faint);
}

html[data-theme="light"] body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-report-link:hover,
html[data-theme="light"] body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-report-link:focus-visible {
  color: #b91c1c;
}

html[data-theme="light"] body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-invite-state {
  color: var(--mpv3-muted);
}

html[data-theme="light"] body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-invite-state span {
  color: var(--mpv3-ink);
}

@media (max-width: 680px) {
  body[data-page="app"] #modalOverlay.member-profile-modal-v3:not(.hidden) {
    padding: 10px;
  }

  body[data-page="app"] #modalOverlay.member-profile-modal-v3:not(.hidden) .modal-card {
    width: min(100%, 680px) !important;
    max-height: calc(100dvh - 20px) !important;
  }

  body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-action-bar {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-action-right {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
  }

  /* Save member and Invite to team paired side-by-side, sharing the row
     evenly so there is no leftover empty space next to Invite. */
  body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-action-right > .mpv3-action-button,
  body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-action-right > .mpv3-invite-actions {
    flex: 1 1 140px;
  }

  body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-invite-actions > .mpv3-action-button {
    flex: 1 1 0;
  }
}

body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-chip-more {
  display: none;
}

/* Mobile compact pass: keep the default view inside the viewport so footer
   actions never require scrolling on phones (e.g. iPhone 14 Pro Max 430x932). */
@media (max-width: 640px) {
  body[data-page="app"] #modalOverlay.member-profile-modal-v3:not(.hidden) {
    padding: 12px;
    align-items: center;
  }

  body[data-page="app"] #modalOverlay.member-profile-modal-v3:not(.hidden) .modal-card {
    width: calc(100vw - 24px) !important;
    height: calc(100dvh - 24px) !important;
    max-height: calc(100dvh - 24px) !important;
    overflow: hidden !important;
  }

  body[data-page="app"] #modalOverlay.member-profile-modal-v3 .modal-body {
    height: 100%;
  }

  body[data-page="app"] #modalOverlay.member-profile-modal-v3 .member-profile-modal-v3-shell {
    height: 100%;
    max-height: 100%;
  }

  /* Compact header */
  body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-bar {
    min-height: 0;
    padding: 6px 10px 6px 12px;
  }

  body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-bar-context span {
    font-size: 10px;
  }

  body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-close-button {
    width: 26px;
    min-width: 26px;
    height: 26px;
    font-size: 16px;
  }

  body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-scroll {
    gap: 10px;
    padding: 10px 12px;
  }

  /* Compact hero */
  body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-hero {
    gap: 10px;
    padding: 10px;
  }

  body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-hero .member-avatar.large {
    width: 44px;
    height: 44px;
    border-radius: 10px;
  }

  body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-name-row h3 {
    font-size: 16px;
  }

  body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-meta-row {
    margin-top: 3px;
    font-size: 11px;
  }

  body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-bio {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-socials {
    display: none;
  }

  /* Compact match card: hide everything but score, tier and progress */
  body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-match-card {
    gap: 6px;
    padding: 10px 12px;
  }

  body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-match-score b {
    font-size: 22px;
  }

  body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-match-reasons {
    gap: 0;
  }

  body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-match-reason:nth-child(n + 2) {
    display: none;
  }

  /* Compact info grid */
  body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-info-grid {
    gap: 6px;
  }

  body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-info-card {
    padding: 7px 9px;
  }

  body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-info-card strong {
    margin-bottom: 1px;
    font-size: 10px;
  }

  body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-info-card p {
    font-size: 12px;
  }

  /* Skills/interests preview: cap visible chips, reveal the "+ more" hint */
  body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-section h3 {
    font-size: 11px;
  }

  body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-skills .mpv3-skill-chip:nth-child(n + 5) {
    display: none;
  }

  body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-interests .mpv3-interest-chip:nth-child(n + 4) {
    display: none;
  }

  body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-chip-more {
    display: inline-flex;
    align-items: center;
    padding: 4px 9px;
    border: 1px dashed var(--mpv3-line-strong);
    border-radius: 999px;
    color: var(--mpv3-faint);
    background: transparent;
    font-size: 11px;
    font-weight: 700;
  }

  body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-goals {
    display: none;
  }

  /* Footer: keep it pinned and visible, full-width invite on mobile */
  body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-action-bar {
    min-height: 0;
    gap: 8px;
    padding: 8px 12px;
  }

  body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-action-button {
    min-height: 32px;
    padding: 6px 10px;
    font-size: 12px;
  }

  body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-invite-state {
    max-width: 130px;
    font-size: 10.5px;
  }
}

@media (max-width: 460px) {
  body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-bar,
  body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-scroll,
  body[data-page="app"] #modalOverlay.member-profile-modal-v3 .mpv3-action-bar {
    padding-left: 14px;
    padding-right: 14px;
  }

}

@media (prefers-reduced-motion: reduce) {
  body[data-page="app"] #modalOverlay.member-profile-modal-v3 .member-profile-modal-v3-shell *,
  body[data-page="app"] #modalOverlay.member-profile-modal-v3 .member-profile-modal-v3-shell *::before,
  body[data-page="app"] #modalOverlay.member-profile-modal-v3 .member-profile-modal-v3-shell *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* Mission Center UI compact hotfix: collapsible Timeline Lite / Mission tasks.
   Additive only — does not touch .task-board-kanban or broad layout rules. */
.mission-collapsible-toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.mission-collapsible-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  background: none;
  border: none;
  padding: 4px 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}

.mission-collapsible-chevron {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.15s ease;
  opacity: 0.6;
}

.mission-collapsible-section.is-collapsed .mission-collapsible-chevron {
  transform: rotate(-45deg);
}

.mission-collapsible-title {
  font-weight: 600;
  white-space: nowrap;
}

.mission-collapsible-summary {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
  font-size: 12.5px;
  color: var(--muted, currentColor);
  opacity: 0.85;
}

.mission-collapsible-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.mission-collapsible-chip.is-warning {
  color: var(--danger, #c0392b);
}

.mission-collapsible-chip.is-urgent {
  color: var(--warning, #b8860b);
}

.mission-collapsible-toggle-label {
  flex: 0 0 auto;
  margin-left: auto;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: underline;
  white-space: nowrap;
}

.mission-collapsible-section.is-collapsed .mission-collapsible-body {
  display: none;
}

@media (max-width: 520px) {
  .mission-collapsible-toggle-row {
    gap: 6px;
  }

  .mission-collapsible-summary {
    font-size: 11.5px;
  }

  .mission-collapsible-toggle-label {
    font-size: 11.5px;
  }
}

/* Mission Center UI compact hotfix v2: Timeline Lite and Mission Tasks render
   as a small dashboard card row, with one shared expanded area below the
   cards. Additive only — leaves .task-board-kanban and broad layout rules
   untouched. Grid uses auto-fit so a future third card (e.g. Calendar) can
   join the row without further CSS changes; no Calendar is rendered here. */
.mission-compact-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}

.mission-compact-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--r-lg, 14px);
  padding: 12px 14px;
}

.mission-compact-card.is-active {
  border-color: var(--w2g-orange, var(--accent, #f5862c));
  box-shadow: 0 0 0 1px var(--w2g-orange, var(--accent, #f5862c)) inset;
}

.mission-compact-card-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}

.mission-compact-card-chevron {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.15s ease;
  opacity: 0.6;
}

.mission-compact-card.is-active .mission-compact-card-chevron {
  transform: rotate(-45deg);
}

.mission-compact-card-title {
  font-weight: 600;
  font-size: 13.5px;
  white-space: nowrap;
}

.mission-compact-card-summary {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
  font-size: 12px;
  color: var(--muted, currentColor);
  opacity: 0.85;
}

.mission-compact-card-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 2px;
}

@media (max-width: 520px) {
  .mission-compact-card-grid {
    grid-template-columns: 1fr;
  }

  .mission-compact-card {
    padding: 10px 12px;
  }

  .mission-compact-card-title {
    font-size: 13px;
  }

  .mission-compact-card-summary {
    font-size: 11px;
  }
}

/* Mission Center Phase 7: Calendar Lite v1. Read-only date list — additive
   only, does not touch .task-board-kanban or the Timeline group styles. */
.mission-calendar-subtitle {
  margin: -4px 0 12px;
  font-size: 12px;
}

.mission-calendar-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 6px;
  background: var(--surface);
}

.mission-calendar-item:last-child {
  margin-bottom: 0;
}

.mission-calendar-item-body {
  min-width: 0;
}

.mission-calendar-item-title {
  font-weight: 600;
  font-size: 13px;
}

.mission-calendar-item-meta {
  font-size: 12px;
  color: var(--muted, currentColor);
  opacity: 0.85;
  margin-top: 2px;
}

.mission-calendar-item--deadline {
  border-color: var(--w2g-orange, var(--accent, #f5862c));
  background: rgba(245, 134, 44, 0.06);
}

.mission-calendar-item-badge {
  flex: 0 0 auto;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 2px 6px;
  border-radius: 999px;
  color: var(--w2g-orange, var(--accent, #f5862c));
  border: 1px solid currentColor;
}

.mission-calendar-empty {
  padding: 12px;
  border: 1px dashed rgba(148, 163, 184, 0.22);
  border-radius: 10px;
  margin-bottom: 12px;
}

@media (max-width: 520px) {
  .mission-calendar-item {
    padding: 8px;
  }

  .mission-calendar-item-title {
    font-size: 12.5px;
  }

  .mission-calendar-item-meta {
    font-size: 11px;
  }
}

/* Mission Center Calendar Lite v3: compact dashboard widget. Two-column
   layout (grid | side panel) on desktop, stacked on mobile. Additive/targeted
   only — does not touch .task-board-kanban or broad Mission Center layout. */
.mission-calendar-layout {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}

.mission-calendar-grid-panel {
  flex: 1 1 520px;
  max-width: 600px;
  min-width: 320px;
}

.mission-calendar-side-panel {
  flex: 1 1 220px;
  min-width: 200px;
  padding-top: 2px;
}

.mission-calendar-grid {
  margin-bottom: 8px;
}

.mission-calendar-grid-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 8px;
}

.mission-calendar-month-label {
  font-weight: 700;
  font-size: 12.5px;
  min-width: 110px;
  text-align: center;
}

.mission-calendar-nav-btn {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  color: inherit;
}

.mission-calendar-nav-btn:hover {
  border-color: var(--w2g-orange, var(--accent, #f5862c));
}

.mission-calendar-weekdays,
.mission-calendar-cells {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
}

.mission-calendar-weekday {
  text-align: center;
  font-size: 9.5px;
  font-weight: 700;
  opacity: 0.6;
  padding-bottom: 2px;
}

.mission-calendar-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 48px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: none;
  cursor: pointer;
  color: inherit;
  font: inherit;
}

.mission-calendar-cell.is-outside {
  cursor: default;
}

.mission-calendar-cell:not(.is-outside):hover {
  background: var(--surface);
}

.mission-calendar-cell-day {
  font-size: 11px;
}

.mission-calendar-cell.is-today .mission-calendar-cell-day {
  font-weight: 700;
  color: var(--w2g-orange, var(--accent, #f5862c));
}

.mission-calendar-cell.is-selected {
  border-color: var(--w2g-orange, var(--accent, #f5862c));
  background: rgba(245, 134, 44, 0.08);
}

.mission-calendar-markers {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 5px;
}

.mission-calendar-marker,
.mission-calendar-cell-marker {
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--muted, currentColor);
  opacity: 0.6;
  display: inline-block;
}

.mission-calendar-marker--deadline {
  background: var(--w2g-orange, var(--accent, #f5862c));
  opacity: 1;
}

.mission-calendar-marker-count,
.mission-calendar-cell-count {
  font-size: 8px;
  line-height: 1;
  opacity: 0.7;
}

/* Tiny legend explaining the grid dots — stays a single small row. */
.mission-calendar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
  font-size: 10.5px;
  opacity: 0.75;
}

.mission-calendar-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.mission-calendar-legend-today-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  border: 1.5px solid var(--w2g-orange, var(--accent, #f5862c));
  display: inline-block;
}

.mission-calendar-selected-day-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.mission-calendar-selected-day-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  opacity: 0.6;
}

.mission-calendar-today-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid var(--w2g-orange, var(--accent, #f5862c));
  color: var(--w2g-orange, var(--accent, #f5862c));
}

.mission-calendar-empty-day {
  font-size: 12px;
}

/* Compact "next few items" shortcut list inside the side panel. */
.mission-calendar-upcoming {
  margin-top: 14px;
}

.mission-calendar-upcoming-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  opacity: 0.6;
  margin-bottom: 6px;
}

.mission-calendar-upcoming-list {
  display: grid;
  gap: 4px;
}

.mission-calendar-upcoming-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 6px;
  width: 100%;
  padding: 5px 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: none;
  cursor: pointer;
  color: inherit;
  font: inherit;
  text-align: left;
}

.mission-calendar-upcoming-item:hover {
  background: var(--surface);
}

.mission-calendar-upcoming-item.is-selected {
  border-color: var(--w2g-orange, var(--accent, #f5862c));
  background: rgba(245, 134, 44, 0.06);
}

.mission-calendar-upcoming-date {
  font-size: 11px;
  font-weight: 700;
  opacity: 0.7;
  white-space: nowrap;
}

.mission-calendar-upcoming-title {
  font-size: 12px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mission-calendar-upcoming-meta {
  font-size: 10.5px;
  opacity: 0.6;
  white-space: nowrap;
}

.mission-calendar-upcoming-item--deadline .mission-calendar-upcoming-title {
  color: var(--w2g-orange, var(--accent, #f5862c));
  font-weight: 600;
}

/* Merged-Timeline focus strip: one small urgency row above the grid/side
   panel split. Intentionally tiny — Calendar must not grow tall again. */
.mission-calendar-focus-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.mission-calendar-focus-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  opacity: 0.6;
  white-space: nowrap;
}

.mission-calendar-focus-stats {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
}

@media (max-width: 760px) {
  .mission-calendar-layout {
    flex-direction: column;
  }

  .mission-calendar-grid-panel {
    max-width: 100%;
    width: 100%;
  }
}

@media (max-width: 520px) {
  .mission-calendar-cell {
    height: 40px;
    border-radius: 6px;
  }

  .mission-calendar-cell-day {
    font-size: 10.5px;
  }

  .mission-calendar-month-label {
    font-size: 11.5px;
    min-width: 90px;
  }

  .mission-calendar-weekday {
    font-size: 9px;
  }

  .mission-calendar-upcoming-item {
    grid-template-columns: auto 1fr;
  }

  .mission-calendar-upcoming-meta {
    display: none;
  }
}

/* Guest landing modal-first registration: tiny additive spacing only —
   the form itself reuses existing .stack/.two-col/.message/button styles
   already loaded on every page. */
.register-modal-switch {
  margin: 10px 0 0;
  text-align: center;
}
/* ============================================================
   GUEST EXPERIENCE HANDOFF
   Claude Design integration, scoped to guest Home only.
   ============================================================ */

body.app-shell-guest #home .guest-landing-handoff {
  --guest-ease: cubic-bezier(.22, .78, .24, 1);
  gap: 44px;
  padding: 22px 0 8px;
}

body.app-shell-guest #home .guest-landing-handoff > section {
  scroll-margin-top: 24px;
}

body.app-shell-guest #home .guest-landing-handoff .guest-hero-grid {
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
  align-items: center;
  gap: clamp(30px, 5vw, 64px);
  min-height: 500px;
  animation: guestHandoffEnter .42s var(--guest-ease) both;
}

body.app-shell-guest #home .guest-landing-handoff .guest-hero-copy {
  max-width: 660px;
  gap: 17px;
}

body.app-shell-guest #home .guest-hero-kicker,
body.app-shell-guest #home .guest-feature-label,
body.app-shell-guest #home .guest-metrics-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--w2g-orange-ink);
  font-size: 11px;
  font-weight: 750;
}

body.app-shell-guest #home .guest-hero-kicker {
  align-self: flex-start;
  padding: 6px 11px;
  border: 1px solid var(--w2g-orange-line);
  border-radius: 999px;
  background: var(--w2g-orange-soft);
}

body.app-shell-guest #home .guest-hero-kicker i,
body.app-shell-guest #home .guest-feature-label i,
body.app-shell-guest #home .guest-metrics-live i,
body.app-shell-guest .guest-sidebar-cta-eyebrow i {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--w2g-success);
}

body.app-shell-guest #home .guest-landing-handoff .guest-hero-title {
  max-width: 13ch;
  font-size: clamp(42px, 4.4vw, 64px);
  line-height: 1.03;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

html[lang="th"] body.app-shell-guest #home .guest-landing-handoff .guest-hero-title {
  max-width: 16ch;
  font-size: clamp(38px, 4vw, 58px);
  line-height: 1.16;
  letter-spacing: 0;
}

body.app-shell-guest #home .guest-landing-handoff .guest-hero-sub {
  max-width: 55ch;
  color: var(--w2g-body);
  font-size: 16px;
  line-height: 1.58;
  text-wrap: pretty;
}

body.app-shell-guest #home .guest-landing-handoff .guest-hero-actions .button {
  min-height: 46px;
  padding: 10px 17px;
}

body.app-shell-guest #home .guest-landing-handoff .guest-hero-note {
  color: var(--w2g-muted);
}

body.app-shell-guest #home .guest-landing-handoff .guest-hero-note svg {
  width: 15px;
  height: 15px;
  color: var(--w2g-success);
}

body.app-shell-guest #home .guest-landing-handoff .guest-hero-match-card {
  gap: 14px;
  padding: 20px;
  border-color: var(--w2g-line-strong);
  border-radius: 16px;
  box-shadow: none;
  transition: transform .18s var(--guest-ease), border-color .18s ease;
}

body.app-shell-guest #home .guest-landing-handoff .guest-hero-match-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--w2g-orange) 38%, var(--w2g-line));
}

body.app-shell-guest #home .guest-feature-topline,
body.app-shell-guest #home .guest-feature-team,
body.app-shell-guest #home .guest-readiness-head,
body.app-shell-guest #home .guest-live-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

body.app-shell-guest #home .guest-feature-status,
body.app-shell-guest #home .guest-preview-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--w2g-success) 14%, var(--w2g-surface));
  color: var(--w2g-success);
  font-size: 11px;
  font-weight: 750;
  white-space: nowrap;
}

body.app-shell-guest #home .guest-feature-team {
  justify-content: flex-start;
  align-items: flex-start;
}

body.app-shell-guest #home .guest-feature-mark {
  display: grid;
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--w2g-orange-line);
  border-radius: 12px;
  background: var(--w2g-orange-soft);
  color: var(--w2g-orange-ink);
  font-size: 18px;
  font-weight: 800;
}

body.app-shell-guest #home .guest-feature-team h2 {
  margin: 0;
  color: var(--w2g-ink);
  font-size: 18px;
  line-height: 1.25;
}

body.app-shell-guest #home .guest-feature-team p,
body.app-shell-guest #home .guest-feature-pitch,
body.app-shell-guest #home .guest-hero-match-card-empty p {
  margin: 3px 0 0;
  color: var(--w2g-muted);
  font-size: 12.5px;
  line-height: 1.5;
}

body.app-shell-guest #home .guest-feature-team p b {
  color: var(--w2g-orange-ink);
  font-weight: 700;
}

body.app-shell-guest #home .guest-feature-pitch {
  margin: 0;
  color: var(--w2g-body);
}

body.app-shell-guest #home .guest-feature-needs {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

body.app-shell-guest #home .guest-feature-needs > span,
body.app-shell-guest #home .guest-mission-label {
  color: var(--w2g-muted);
  font-size: 11px;
  font-weight: 750;
}

body.app-shell-guest #home .guest-feature-needs > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

body.app-shell-guest #home .guest-landing-handoff .guest-match-locked {
  margin: 0;
  padding: 11px 12px;
  border-style: solid;
}

body.app-shell-guest #home .guest-match-locked > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

body.app-shell-guest #home .guest-match-locked strong {
  color: var(--w2g-ink-2);
  font-size: 12.5px;
}

body.app-shell-guest #home .guest-match-locked div span {
  color: var(--w2g-muted);
  font-size: 11.5px;
  line-height: 1.4;
}

body.app-shell-guest #home .guest-feature-action {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--w2g-orange-line);
  border-radius: 10px;
  background: var(--w2g-orange-soft);
  color: var(--w2g-orange-ink);
  font-size: 12.5px;
  font-weight: 750;
  transition: background .16s ease, transform .16s ease;
}

body.app-shell-guest #home .guest-feature-action:hover {
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--w2g-orange) 18%, var(--w2g-surface));
}

body.app-shell-guest #home .guest-landing-handoff .guest-metrics-strip {
  display: flex;
  max-width: none;
  align-items: center;
  gap: clamp(18px, 3.5vw, 42px);
  margin: 0;
  padding: 14px 18px;
  border: 1px solid var(--w2g-line);
  border-radius: 14px;
  background: var(--w2g-surface);
}

body.app-shell-guest #home .guest-landing-handoff .guest-metric {
  flex-direction: row;
  align-items: baseline;
  gap: 7px;
}

body.app-shell-guest #home .guest-landing-handoff .guest-metric strong {
  font-size: 20px;
}

body.app-shell-guest #home .guest-landing-handoff .guest-metrics-strip > small {
  margin-left: auto;
  color: var(--w2g-muted);
  font-size: 11px;
}

body.app-shell-guest #home .guest-section-heading {
  max-width: 720px;
  margin-bottom: 18px;
}

body.app-shell-guest #home .guest-section-heading > span,
body.app-shell-guest #home .guest-live-eyebrow {
  color: var(--w2g-muted);
  font-size: 12px;
  font-weight: 700;
}

body.app-shell-guest #home .guest-section-heading h2,
body.app-shell-guest #home .guest-live-header h2,
body.app-shell-guest #home .guest-final-cta h2 {
  margin: 6px 0 0;
  color: var(--w2g-ink);
  font-size: 25px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

body.app-shell-guest #home .guest-section-heading p,
body.app-shell-guest #home .guest-live-header p,
body.app-shell-guest #home .guest-final-cta p {
  max-width: 62ch;
  margin: 7px 0 0;
  color: var(--w2g-muted);
  font-size: 13.5px;
  line-height: 1.55;
}

body.app-shell-guest #home .guest-landing-handoff .guest-loop-head {
  display: none;
}

body.app-shell-guest #home .guest-landing-handoff .guest-loop-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

body.app-shell-guest #home .guest-landing-handoff .guest-loop-step {
  min-height: 184px;
  gap: 11px;
  padding: 18px;
  box-shadow: none;
  transition: transform .18s var(--guest-ease), border-color .18s ease;
}

body.app-shell-guest #home .guest-landing-handoff .guest-loop-step:hover {
  transform: translateY(-2px);
  border-color: var(--w2g-line-strong);
}

body.app-shell-guest #home .guest-landing-handoff .guest-loop-step strong {
  font-size: 15px;
}

body.app-shell-guest #home .guest-landing-handoff .guest-loop-step-desc {
  color: var(--w2g-body);
  font-size: 12.5px;
  line-height: 1.55;
}

body.app-shell-guest #home .guest-landing-handoff .guest-loop-step .hv2-stat-ic {
  width: 38px;
  height: 38px;
}

body.app-shell-guest #home .guest-landing-handoff .guest-loop-step .hv2-stat-ic svg {
  width: 19px;
  height: 19px;
}

body.app-shell-guest #home .guest-landing-handoff .guest-live-section {
  gap: 18px;
}

body.app-shell-guest #home .guest-landing-handoff .guest-live-eyebrow {
  color: var(--w2g-orange-ink);
}

body.app-shell-guest #home .guest-landing-handoff .guest-live-tabs {
  display: grid;
  min-width: 330px;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  padding: 4px;
  border: 1px solid var(--w2g-line);
  background: var(--w2g-surface);
}

body.app-shell-guest #home .guest-landing-handoff .guest-live-tab {
  padding: 8px 10px;
  border-radius: 8px;
}

body.app-shell-guest #home .guest-landing-handoff .guest-live-tab.active {
  background: var(--w2g-surface-2);
  color: var(--w2g-ink);
  box-shadow: none;
}

body.app-shell-guest #home .guest-landing-handoff .guest-live-card {
  min-height: 230px;
  gap: 11px;
  padding: 18px;
  box-shadow: none;
  transition: transform .18s var(--guest-ease), border-color .18s ease;
}

body.app-shell-guest #home .guest-landing-handoff .guest-live-card:hover {
  transform: translateY(-2px);
  border-color: var(--w2g-line-strong);
}

body.app-shell-guest #home .guest-live-card-badge.neutral {
  background: var(--w2g-surface-2);
  color: var(--w2g-ink-2);
}

body.app-shell-guest #home .guest-landing-handoff .guest-live-card-title {
  font-size: 15.5px;
}

body.app-shell-guest #home .guest-landing-handoff .guest-live-card-footer {
  margin-top: auto;
  padding-top: 11px;
  border-top: 1px solid var(--w2g-line);
}

body.app-shell-guest #home .guest-live-card-footer > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--w2g-muted);
  font-size: 11px;
  font-weight: 650;
}

body.app-shell-guest #home .guest-live-card-footer > span svg {
  width: 12px;
  height: 12px;
}

body.app-shell-guest #home .guest-live-panel-enter {
  animation: guestTabIn .2s var(--guest-ease) both;
}

body.app-shell-guest #home .guest-mission-shell {
  overflow: hidden;
  border: 1px solid var(--w2g-line-strong);
  border-radius: 16px;
  background: var(--w2g-surface);
}

body.app-shell-guest #home .guest-mission-shell > header,
body.app-shell-guest #home .guest-mission-shell > footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  background: var(--w2g-surface-2);
}

body.app-shell-guest #home .guest-mission-shell > header {
  border-bottom: 1px solid var(--w2g-line);
}

body.app-shell-guest #home .guest-mission-shell > footer {
  justify-content: space-between;
  border-top: 1px solid var(--w2g-line);
}

body.app-shell-guest #home .guest-mission-mark {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 9px;
  background: var(--w2g-orange);
  color: #fff;
}

body.app-shell-guest #home .guest-mission-mark svg {
  width: 16px;
  height: 16px;
}

body.app-shell-guest #home .guest-mission-shell header > div {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

body.app-shell-guest #home .guest-mission-shell header strong {
  color: var(--w2g-ink);
  font-size: 14px;
}

body.app-shell-guest #home .guest-mission-shell header small,
body.app-shell-guest #home .guest-task-preview small,
body.app-shell-guest #home .guest-deadline-preview small {
  color: var(--w2g-muted);
  font-size: 11.5px;
}

body.app-shell-guest #home .guest-mission-body {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
}

body.app-shell-guest #home .guest-mission-main,
body.app-shell-guest #home .guest-mission-tools {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
}

body.app-shell-guest #home .guest-mission-main {
  border-right: 1px solid var(--w2g-line);
}

body.app-shell-guest #home .guest-readiness-head span,
body.app-shell-guest #home .guest-readiness-head strong {
  color: var(--w2g-ink-2);
  font-size: 12px;
}

body.app-shell-guest #home .guest-readiness-head strong {
  color: var(--w2g-muted);
}

body.app-shell-guest #home .guest-readiness-track {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--w2g-surface-3);
}

body.app-shell-guest #home .guest-readiness-track span {
  display: block;
  width: 36%;
  height: 100%;
  border-radius: inherit;
  background: var(--w2g-muted);
  opacity: .55;
}

body.app-shell-guest #home .guest-task-preview,
body.app-shell-guest #home .guest-deadline-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 11px;
  background: var(--w2g-surface-2);
}

body.app-shell-guest #home .guest-task-preview > span,
body.app-shell-guest #home .guest-deadline-preview > svg {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  place-items: center;
  color: var(--w2g-orange);
}

body.app-shell-guest #home .guest-task-preview svg {
  width: 15px;
  height: 15px;
}

body.app-shell-guest #home .guest-task-preview div,
body.app-shell-guest #home .guest-deadline-preview div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

body.app-shell-guest #home .guest-task-preview strong,
body.app-shell-guest #home .guest-deadline-preview strong {
  color: var(--w2g-ink-2);
  font-size: 12.5px;
}

body.app-shell-guest #home .guest-tool-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

body.app-shell-guest #home .guest-tool-grid span {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px;
  border: 1px solid var(--w2g-line);
  border-radius: 10px;
  color: var(--w2g-ink-2);
  font-size: 12px;
  font-weight: 650;
}

body.app-shell-guest #home .guest-tool-grid svg {
  width: 15px;
  height: 15px;
  color: var(--w2g-orange);
}

body.app-shell-guest #home .guest-deadline-preview {
  margin-top: auto;
}

body.app-shell-guest #home .guest-mission-shell > footer > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--w2g-body);
  font-size: 12.5px;
}

body.app-shell-guest #home .guest-mission-shell > footer > span svg {
  width: 14px;
  height: 14px;
  color: var(--w2g-muted);
}

body.app-shell-guest #home .guest-final-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 30px;
  border: 1px solid var(--w2g-orange-line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--w2g-orange) 7%, var(--w2g-surface));
}

body.app-shell-guest #home .guest-final-cta > div:last-child {
  display: flex;
  flex: 0 0 auto;
  gap: 10px;
}

body.app-shell-guest .guest-sidebar-cta-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

body.app-shell-guest .guest-sidebar-cta {
  background: var(--w2g-surface);
}

@keyframes guestHandoffEnter {
  from { opacity: .01; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@keyframes guestTabIn {
  from { opacity: .35; transform: translateY(5px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 1100px) {
  body.app-shell-guest #home .guest-landing-handoff .guest-hero-grid {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  body.app-shell-guest #home .guest-landing-handoff .guest-hero-match-card {
    width: min(100%, 640px);
  }
}

@media (max-width: 760px) {
  body.app-shell-guest #home .guest-landing-handoff { gap: 36px; padding-top: 8px; }
  body.app-shell-guest #home .guest-landing-handoff .guest-hero-title,
  html[lang="th"] body.app-shell-guest #home .guest-landing-handoff .guest-hero-title {
    max-width: none;
    font-size: clamp(34px, 10vw, 46px);
  }
  body.app-shell-guest #home .guest-landing-handoff .guest-metrics-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
  body.app-shell-guest #home .guest-metrics-live,
  body.app-shell-guest #home .guest-landing-handoff .guest-metrics-strip > small {
    grid-column: 1 / -1;
    margin: 0;
  }
  body.app-shell-guest #home .guest-landing-handoff .guest-metric {
    flex-direction: column;
    gap: 2px;
  }
  body.app-shell-guest #home .guest-landing-handoff .guest-loop-grid,
  body.app-shell-guest #home .guest-landing-handoff .guest-live-grid {
    grid-template-columns: 1fr;
  }
  body.app-shell-guest #home .guest-mission-body { grid-template-columns: 1fr; }
  body.app-shell-guest #home .guest-mission-main { border-right: 0; border-bottom: 1px solid var(--w2g-line); }
  body.app-shell-guest #home .guest-final-cta { align-items: stretch; flex-direction: column; padding: 24px 20px; }
  body.app-shell-guest #home .guest-final-cta > div:last-child { flex-direction: column; }
}

@media (max-width: 520px) {
  body.app-shell-guest #home .guest-landing-handoff .guest-hero-actions,
  body.app-shell-guest #home .guest-landing-handoff .guest-hero-actions .button { width: 100%; }
  body.app-shell-guest #home .guest-feature-topline { align-items: flex-start; }
  body.app-shell-guest #home .guest-feature-label { max-width: 18ch; }
  body.app-shell-guest #home .guest-landing-handoff .guest-live-tabs { min-width: 0; width: 100%; }
  body.app-shell-guest #home .guest-landing-handoff .guest-live-tab { padding-inline: 5px; font-size: 11.5px; }
  body.app-shell-guest #home .guest-landing-handoff .guest-metrics-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 14px; }
  body.app-shell-guest #home .guest-landing-handoff .guest-metric span { white-space: normal; }
  body.app-shell-guest #home .guest-mission-shell > footer { align-items: stretch; flex-direction: column; }
  body.app-shell-guest #home .guest-tool-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  body.app-shell-guest #home .guest-landing-handoff .guest-hero-grid,
  body.app-shell-guest #home .guest-live-panel-enter { animation: none !important; }
  body.app-shell-guest #home .guest-landing-handoff .guest-hero-match-card,
  body.app-shell-guest #home .guest-landing-handoff .guest-loop-step,
  body.app-shell-guest #home .guest-landing-handoff .guest-live-card,
  body.app-shell-guest #home .guest-feature-action { transition: none !important; }
  body.app-shell-guest #home .guest-landing-handoff .guest-hero-match-card:hover,
  body.app-shell-guest #home .guest-landing-handoff .guest-loop-step:hover,
  body.app-shell-guest #home .guest-landing-handoff .guest-live-card:hover,
  body.app-shell-guest #home .guest-feature-action:hover { transform: none !important; }
}

/* Team Calendar: operational month view with in-cell work items. */
.mission-calendar-lite { min-width: 0; }
.mission-calendar-subtitle { margin: -2px 0 14px; font-size: 13px; }
.mission-calendar-focus-strip {
  margin-bottom: 16px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
}
.mission-calendar-focus-label,
.mission-calendar-selected-day-label,
.mission-calendar-upcoming-label,
.mission-calendar-agenda-label { letter-spacing: 0; text-transform: none; }
.mission-calendar-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 300px);
  gap: 16px;
  align-items: start;
}
.mission-calendar-grid-panel,
.mission-calendar-side-panel {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 62%, transparent);
}
.mission-calendar-grid-panel { max-width: none; }
.mission-calendar-grid-head { justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.mission-calendar-month-label { min-width: 0; font-size: 15px; text-align: left; }
.mission-calendar-grid-actions { display: inline-flex; align-items: center; gap: 6px; }
.mission-calendar-nav-btn,
.mission-calendar-today-btn {
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
}
.mission-calendar-nav-btn { width: 30px; font-size: 17px; }
.mission-calendar-today-btn { padding: 0 10px; font-size: 11.5px; }
.mission-calendar-nav-btn:hover,
.mission-calendar-today-btn:hover {
  border-color: color-mix(in srgb, var(--w2g-orange, var(--accent, #f5862c)) 68%, var(--line));
  background: color-mix(in srgb, var(--surface) 88%, var(--w2g-orange, var(--accent, #f5862c)));
}
.mission-calendar-nav-btn:focus-visible,
.mission-calendar-today-btn:focus-visible,
.mission-calendar-cell:focus-visible,
.mission-calendar-upcoming-item:focus-visible,
.mission-calendar-overdue-item:focus-visible {
  outline: 2px solid var(--w2g-orange, var(--accent, #f5862c));
  outline-offset: 2px;
}
.mission-calendar-weekdays,
.mission-calendar-cells { gap: 4px; }
.mission-calendar-weekday { padding: 0 4px 5px; font-size: 10.5px; opacity: 0.72; }
.mission-calendar-cell {
  box-sizing: border-box;
  align-items: stretch;
  justify-content: flex-start;
  gap: 6px;
  height: 104px;
  min-width: 0;
  padding: 7px;
  border-color: var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  text-align: left;
  overflow: hidden;
}
.mission-calendar-cell.is-outside { border-color: transparent; background: transparent; }
.mission-calendar-cell:not(.is-outside):hover {
  border-color: color-mix(in srgb, var(--line) 54%, currentColor);
  background: var(--surface);
}
.mission-calendar-cell.is-selected {
  border-color: var(--w2g-orange, var(--accent, #f5862c));
  background: rgba(245, 134, 44, 0.1);
  outline: 1px solid rgba(245, 134, 44, 0.22);
  outline-offset: -3px;
}
.mission-calendar-cell-top { display: flex; align-items: center; gap: 5px; min-height: 15px; }
.mission-calendar-cell-day { font-size: 12px; font-weight: 650; line-height: 1; }
.mission-calendar-today-dot {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--w2g-orange, var(--accent, #f5862c));
}
.mission-calendar-cell-items { display: grid; gap: 3px; min-width: 0; }
.mission-calendar-cell-item {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 4px 5px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--surface) 88%, currentColor 12%);
  color: inherit;
}
.mission-calendar-cell-item--deadline {
  background: rgba(245, 134, 44, 0.15);
  color: var(--w2g-orange, var(--accent, #f5862c));
}
.mission-calendar-cell-item-type {
  flex: 0 0 auto;
  font-size: 8px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}
.mission-calendar-cell-item-title {
  min-width: 0;
  overflow: hidden;
  color: inherit;
  font-size: 9.5px;
  font-weight: 600;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mission-calendar-cell-more { padding-left: 3px; font-size: 9px; font-weight: 700; opacity: 0.72; }
.mission-calendar-legend { margin-top: 10px; font-size: 11px; }
.mission-calendar-selected-day-head { align-items: center; margin-bottom: 14px; }
.mission-calendar-selected-day-head strong { flex-basis: 100%; font-size: 16px; }
.mission-calendar-selected-day-label,
.mission-calendar-upcoming-label,
.mission-calendar-agenda-label { font-size: 11.5px; font-weight: 700; opacity: 0.72; }
.mission-calendar-agenda-label { margin-bottom: 7px; }
.mission-calendar-item { align-items: center; margin-bottom: 6px; padding: 9px; background: var(--surface); }
.mission-calendar-item-body { flex: 1 1 auto; }
.mission-calendar-item-title {
  overflow: hidden;
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mission-calendar-item-badge { letter-spacing: 0; }
.mission-calendar-item-badge--task {
  color: var(--muted, currentColor);
  border-color: var(--line);
  background: color-mix(in srgb, var(--surface) 84%, currentColor 16%);
}
.mission-calendar-empty-day {
  margin: 0;
  padding: 10px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  line-height: 1.45;
}
.mission-calendar-overdue {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.mission-calendar-overdue-label {
  margin-bottom: 8px;
  color: #f87171;
  font-size: 11.5px;
  font-weight: 700;
}
.mission-calendar-overdue-list { display: grid; gap: 5px; }
.mission-calendar-overdue-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  width: 100%;
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(248, 113, 113, 0.24);
  border-radius: 8px;
  background: rgba(127, 29, 29, 0.12);
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.mission-calendar-overdue-item:hover,
.mission-calendar-overdue-item.is-selected {
  border-color: rgba(248, 113, 113, 0.44);
  background: rgba(127, 29, 29, 0.19);
}
.mission-calendar-overdue-date {
  padding-top: 2px;
  color: #fca5a5;
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
}
.mission-calendar-overdue-body { display: grid; gap: 4px; min-width: 0; }
.mission-calendar-overdue-title {
  overflow: hidden;
  font-size: 12px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mission-calendar-overdue-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  color: var(--muted, currentColor);
  font-size: 10.5px;
}
.mission-calendar-overdue-meta .task-due-badge { min-height: 18px; padding: 1px 5px; font-size: 9.5px; }
.mission-calendar-overdue-more {
  padding: 6px 8px 0;
  color: var(--muted, currentColor);
  font-size: 10.5px;
}
html[data-theme="light"] .mission-calendar-overdue-item { background: rgba(220, 38, 38, 0.06); }
html[data-theme="light"] .mission-calendar-overdue-item:hover,
html[data-theme="light"] .mission-calendar-overdue-item.is-selected { background: rgba(220, 38, 38, 0.10); }
html[data-theme="light"] .mission-calendar-overdue-label,
html[data-theme="light"] .mission-calendar-overdue-date { color: #b91c1c; }
.mission-calendar-upcoming { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.mission-calendar-upcoming-label { margin-bottom: 8px; }
.mission-calendar-upcoming-item { padding: 7px 8px; border-color: transparent; }

@media (max-width: 760px) {
  .mission-calendar-layout { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .mission-calendar-grid-panel,
  .mission-calendar-side-panel { padding: 10px; }
  .mission-calendar-cell { height: 82px; gap: 4px; padding: 5px 3px; }
  .mission-calendar-cell-item { padding: 3px; }
  .mission-calendar-cell-item-type { display: none; }
  .mission-calendar-cell-item-title { font-size: 8.5px; }
  .mission-calendar-cell-more { font-size: 8px; }
}
@media (max-width: 420px) {
  .mission-calendar-focus-strip { align-items: flex-start; }
  .mission-calendar-focus-stats { gap: 5px; }
  .mission-calendar-grid-head { align-items: flex-start; }
  .mission-calendar-today-btn { display: none; }
  .mission-calendar-weekdays,
  .mission-calendar-cells { gap: 2px; }
}

/* Team profile modal, aligned with the member profile hierarchy. */
body[data-page="app"] #modalOverlay.team-profile-modal-v3:not(.hidden) {
  --teamv3-surface: #14171e;
  --teamv3-panel: #181c24;
  --teamv3-card: #1b1f27;
  --teamv3-line: rgba(255, 255, 255, 0.12);
  --teamv3-line-strong: rgba(255, 255, 255, 0.17);
  --teamv3-ink: #f5f7fa;
  --teamv3-muted: #a8b0bd;
  --teamv3-faint: #7d8796;
  --teamv3-orange: #f97316;
  --teamv3-orange-soft: rgba(249, 115, 22, 0.14);
  background: rgba(4, 6, 10, 0.82) !important;
}

body[data-page="app"] #modalOverlay.team-profile-modal-v3:not(.hidden) .modal-card {
  width: min(780px, calc(100vw - 36px)) !important;
  max-height: min(90vh, 860px) !important;
  display: flex;
  flex-direction: column;
  padding: 0 !important;
  overflow: hidden !important;
  color: var(--teamv3-ink);
  border: 1px solid var(--teamv3-line-strong);
  border-radius: 14px;
  background: var(--teamv3-surface) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.38);
}

body[data-page="app"] #modalOverlay.team-profile-modal-v3 .modal-header,
body[data-page="app"] #modalOverlay.team-profile-modal-v3 .modal-footer { display: none !important; }

body[data-page="app"] #modalOverlay.team-profile-modal-v3 .modal-body {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  padding: 0 !important;
  overflow: hidden !important;
  background: var(--teamv3-surface) !important;
}

.team-profile-modal-v3-shell {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  color: var(--teamv3-ink);
}

.teamv3-bar {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding: 8px 14px 8px 18px;
  border-bottom: 1px solid var(--teamv3-line);
  color: var(--teamv3-faint);
  font-size: 11px;
  font-weight: 700;
}

.teamv3-close-button {
  display: grid;
  width: 30px;
  min-width: 30px;
  height: 30px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--teamv3-line);
  border-radius: 8px;
  background: var(--teamv3-panel);
  color: var(--teamv3-muted);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}

.teamv3-close-button:hover,
.teamv3-close-button:focus-visible {
  border-color: rgba(249, 115, 22, 0.5);
  color: var(--teamv3-ink);
  outline: none;
}

.teamv3-scroll {
  display: grid;
  flex: 1 1 auto;
  align-content: start;
  gap: 14px;
  min-height: 0;
  padding: 16px 18px 20px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.teamv3-notice {
  padding: 9px 11px;
  border: 1px solid rgba(201, 138, 18, 0.28);
  border-radius: 8px;
  background: rgba(201, 138, 18, 0.09);
  color: #e7bd67;
  font-size: 12px;
}

.teamv3-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--teamv3-line);
  border-radius: 12px;
  background: var(--teamv3-panel);
}

.teamv3-avatar {
  display: grid;
  width: 64px;
  height: 64px;
  place-items: center;
  border-radius: 12px;
  background: var(--teamv3-orange-soft);
  color: #ffb07a;
  font-size: 24px;
  font-weight: 800;
}

.teamv3-hero-copy { min-width: 0; }
.teamv3-name-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.teamv3-hero h2 {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--teamv3-ink);
  font-size: 21px;
  line-height: 1.25;
}
.teamv3-type-badge {
  padding: 3px 8px;
  border: 1px solid rgba(249, 115, 22, 0.24);
  border-radius: 999px;
  background: var(--teamv3-orange-soft);
  color: #ffb07a;
  font-size: 10.5px;
  font-weight: 700;
}
.teamv3-competition {
  margin: 4px 0 0;
  overflow-wrap: anywhere;
  color: var(--teamv3-muted);
  font-size: 12.5px;
}
.teamv3-meta-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.teamv3-meta-chip {
  max-width: 100%;
  padding: 3px 8px;
  overflow: hidden;
  border: 1px solid var(--teamv3-line);
  border-radius: 999px;
  background: var(--teamv3-card);
  color: var(--teamv3-muted);
  font-size: 10.5px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.teamv3-pitch {
  max-width: 68ch;
  margin: 11px 0 0;
  color: #d2d7df;
  font-size: 13px;
  line-height: 1.55;
}

.teamv3-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.teamv3-info-card {
  display: grid;
  align-content: start;
  gap: 4px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--teamv3-line);
  border-radius: 9px;
  background: var(--teamv3-panel);
}
.teamv3-info-card strong { color: var(--teamv3-faint); font-size: 10.5px; font-weight: 700; }
.teamv3-info-card p { margin: 0; overflow-wrap: anywhere; color: var(--teamv3-ink); font-size: 12.5px; line-height: 1.4; }
.teamv3-info-card small { color: var(--teamv3-muted); font-size: 10px; }
.teamv3-info-card .button { justify-self: start; margin-top: 3px; }
.teamv3-context {
  display: grid;
  gap: 8px;
}
.teamv3-main { display: grid; min-width: 0; gap: 0; }
.teamv3-section { display: grid; gap: 9px; padding: 15px 0; border-bottom: 1px solid var(--teamv3-line); }
.teamv3-section:first-child { padding-top: 0; }
.teamv3-section:last-child { border-bottom: 0; }
.teamv3-section h3 { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--teamv3-ink); font-size: 13px; }
.teamv3-section-icon { width: 15px; height: 15px; flex: 0 0 auto; color: var(--teamv3-faint); }
.teamv3-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.teamv3-section-head p { margin: 3px 0 0; color: var(--teamv3-faint); font-size: 10.5px; }
.teamv3-section-copy { margin: 0; overflow-wrap: anywhere; color: var(--teamv3-muted); font-size: 12.5px; line-height: 1.55; }
.teamv3-slot-badge {
  flex: 0 0 auto;
  padding: 3px 8px;
  border: 1px solid rgba(249, 115, 22, 0.24);
  border-radius: 999px;
  background: var(--teamv3-card);
  color: #ffb07a;
  font-size: 10.5px;
  font-weight: 700;
}
.teamv3-role-row { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.teamv3-role-chip {
  max-width: 100%;
  padding: 5px 9px;
  overflow-wrap: anywhere;
  border: 1px solid var(--teamv3-line);
  border-radius: 7px;
  background: var(--teamv3-card);
  color: var(--teamv3-muted);
  font-size: 11.5px;
  font-weight: 700;
}
.teamv3-empty { margin: 0; color: var(--teamv3-faint); font-size: 12px; font-style: italic; }
.teamv3-empty-stack { display: grid; gap: 3px; }
.teamv3-empty-stack p { margin: 0; color: var(--teamv3-faint); font-size: 12px; }

.teamv3-member-list { display: grid; gap: 0; }
.teamv3-member-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 8px 0;
  border-bottom: 1px solid var(--teamv3-line);
}
.teamv3-member-row:last-child { border-bottom: 0; }
.teamv3-member-row .member-avatar.small { width: 34px; height: 34px; }
.teamv3-member-copy { display: grid; min-width: 0; gap: 2px; }
.teamv3-member-copy strong { overflow: hidden; color: var(--teamv3-ink); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.teamv3-member-copy small { color: var(--teamv3-muted); font-size: 10.5px; }

.teamv3-reserved-list { display: grid; gap: 5px; }
.teamv3-reserved-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border-radius: 8px;
  background: rgba(148, 163, 184, 0.07);
  color: var(--teamv3-muted);
}
.teamv3-reserved-icon {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 7px;
  background: rgba(148, 163, 184, 0.12);
  color: var(--teamv3-faint);
  font-size: 10px;
  font-weight: 700;
}
.teamv3-reserved-row > span:last-child { display: grid; gap: 1px; }
.teamv3-reserved-row strong { font-size: 11.5px; }
.teamv3-reserved-row small { color: var(--teamv3-faint); font-size: 10px; }

.teamv3-status-row > span { color: var(--teamv3-faint); font-size: 10.5px; font-weight: 700; }
.teamv3-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 11px;
  border: 1px solid var(--teamv3-line);
  border-radius: 9px;
}
.teamv3-context-note { margin: 0; color: var(--teamv3-muted); font-size: 11px; line-height: 1.5; }

.teamv3-action-bar {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 62px;
  padding: 11px 18px;
  border-top: 1px solid var(--teamv3-line);
  background: var(--teamv3-surface);
}
.teamv3-action-left,
.teamv3-action-right { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; }
.teamv3-action-right { justify-content: flex-end; }
.teamv3-action-bar .button,
.teamv3-info-card .button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.teamv3-btn-icon { width: 16px; height: 16px; flex: 0 0 auto; }

html[data-theme="light"] body[data-page="app"] #modalOverlay.team-profile-modal-v3:not(.hidden) {
  --teamv3-surface: #ffffff;
  --teamv3-panel: #f6f7f9;
  --teamv3-card: #ffffff;
  --teamv3-line: rgba(15, 23, 42, 0.10);
  --teamv3-line-strong: rgba(15, 23, 42, 0.16);
  --teamv3-ink: #0c1019;
  --teamv3-muted: #5f6877;
  --teamv3-faint: #7b8494;
  --teamv3-orange: #ea580c;
  --teamv3-orange-soft: rgba(234, 88, 12, 0.10);
  background: rgba(12, 16, 25, 0.38) !important;
}
html[data-theme="light"] .teamv3-avatar,
html[data-theme="light"] .teamv3-type-badge,
html[data-theme="light"] .teamv3-slot-badge { color: #9a3412; }
html[data-theme="light"] .teamv3-pitch { color: #424a58; }
html[data-theme="light"] .teamv3-notice { color: #854d0e; background: rgba(201, 138, 18, 0.08); }

@media (max-width: 700px) {
  body[data-page="app"] #modalOverlay.team-profile-modal-v3:not(.hidden) { padding: 10px; }
  body[data-page="app"] #modalOverlay.team-profile-modal-v3:not(.hidden) .modal-card {
    width: min(100%, 780px) !important;
    height: calc(100dvh - 20px) !important;
    max-height: calc(100dvh - 20px) !important;
  }
}

@media (max-width: 520px) {
  .teamv3-bar { padding: 6px 10px 6px 12px; }
  .teamv3-scroll { gap: 10px; padding: 12px; }
  .teamv3-hero { grid-template-columns: 48px minmax(0, 1fr); gap: 10px; padding: 12px; }
  .teamv3-avatar { width: 48px; height: 48px; border-radius: 10px; font-size: 19px; }
  .teamv3-hero h2 { font-size: 18px; }
  .teamv3-pitch { font-size: 12px; }
  .teamv3-info-grid { grid-template-columns: 1fr; }
  .teamv3-action-bar { align-items: stretch; flex-direction: column; gap: 8px; min-height: 0; padding: 9px 12px; }
  .teamv3-action-left,
  .teamv3-action-right { width: 100%; }
  .teamv3-action-right > .button { flex: 1 1 130px; }
}

/* Dedicated Competition Detail page. Scoped to the route container so the
   legacy modal and discovery cards can remain in place during Phase 1. */
.competition-detail-route-view.active-view {
  display: block;
}

.competition-detail-page {
  --cdp-surface: var(--w2g-surface, #fff);
  --cdp-surface-2: var(--w2g-surface-2, #f6f7f9);
  --cdp-line: var(--w2g-line, #e5e8ec);
  --cdp-line-strong: var(--w2g-line-strong, #d6dae1);
  --cdp-ink: var(--w2g-ink, #0c1019);
  --cdp-body: var(--w2g-body, #424a58);
  --cdp-muted: var(--w2g-muted, #6b7382);
  width: min(1180px, calc(100vw - 40px));
  margin: 0 auto;
  padding: 26px 0 48px;
  color: var(--cdp-body);
}

.competition-detail-toolbar {
  display: flex;
  margin-bottom: 14px;
}

.competition-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(300px, 0.95fr);
  gap: 28px;
  align-items: start;
}

.competition-detail-main,
.competition-detail-sidebar {
  min-width: 0;
}

.competition-detail-main {
  display: grid;
  gap: 26px;
}

.competition-detail-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--cdp-line, var(--w2g-line, #e5e8ec));
  border-radius: var(--w2g-radius-full, 999px);
  background: var(--cdp-surface, var(--w2g-surface, #fff));
  color: var(--w2g-orange-strong, #c2410c);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.competition-detail-back:hover {
  background: var(--cdp-surface-2, var(--w2g-surface-2, #f6f7f9));
  border-color: var(--cdp-line-strong, var(--w2g-line-strong, #d6dae1));
}

.competition-detail-back:focus-visible,
.competition-detail-actions .button:focus-visible,
.competition-detail-source-link:focus-visible,
.competition-detail-team-row .button:focus-visible {
  outline: 2px solid var(--w2g-orange, #ea580c);
  outline-offset: 3px;
}

.competition-detail-hero {
  display: grid;
  gap: 12px;
}

.competition-detail-label {
  width: fit-content;
  padding: 4px 10px;
  border: 1px solid var(--cdp-line);
  border-radius: 999px;
  background: var(--cdp-surface-2);
  color: var(--cdp-muted);
  font-size: 12px;
  font-weight: 800;
}

.competition-detail-hero h1 {
  max-width: 18ch;
  margin: 0;
  color: var(--cdp-ink);
  font-size: 34px;
  line-height: 1.12;
  letter-spacing: 0;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.competition-detail-subtitle {
  max-width: 72ch;
  margin: 0;
  color: var(--cdp-body);
  font-size: 15px;
  line-height: 1.7;
  white-space: pre-line;
}

.competition-detail-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 4px;
}

.competition-detail-poster {
  display: grid;
  min-height: 280px;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--cdp-line);
  border-radius: 14px;
  background: var(--cdp-surface-2);
}

.competition-detail-poster img {
  width: 100%;
  height: 100%;
  max-height: 560px;
  object-fit: contain;
  background: var(--cdp-surface-2);
}

.competition-detail-poster.is-empty {
  place-items: center;
  gap: 8px;
  padding: 28px;
  text-align: center;
}

.competition-detail-poster.is-empty span {
  color: var(--cdp-muted);
  font-size: 13px;
  font-weight: 700;
}

.competition-detail-poster.is-empty strong {
  color: var(--cdp-ink);
  font-size: 18px;
}

.competition-detail-trust-warning,
.competition-detail-trust-summary {
  display: grid;
  gap: 5px;
  padding: 14px 16px;
  border: 1px solid rgba(201, 138, 18, 0.34);
  border-radius: 12px;
  background: rgba(201, 138, 18, 0.08);
}

.competition-detail-trust-summary {
  border-color: rgba(21, 163, 74, 0.24);
  background: rgba(21, 163, 74, 0.08);
}

.competition-detail-trust-warning strong,
.competition-detail-trust-summary strong {
  color: var(--cdp-ink);
}

.competition-detail-trust-warning p,
.competition-detail-trust-summary span {
  margin: 0;
  color: var(--cdp-muted);
}

.competition-detail-section {
  display: grid;
  gap: 12px;
  padding-top: 2px;
}

.competition-detail-section h2,
.competition-detail-sidebar h2 {
  margin: 0;
  color: var(--cdp-ink);
  font-size: 20px;
  line-height: 1.3;
}

.competition-detail-copy {
  max-width: 74ch;
  margin: 0;
  color: var(--cdp-body);
  font-size: 14px;
  line-height: 1.75;
  white-space: pre-line;
  overflow-wrap: break-word;
}

.competition-detail-info-grid,
.competition-detail-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.competition-detail-fact {
  display: grid;
  gap: 4px;
  padding: 13px 14px;
  border: 1px solid var(--cdp-line);
  border-radius: 12px;
  background: var(--cdp-surface);
}

.competition-detail-fact span {
  color: var(--cdp-muted);
  font-size: 12px;
  font-weight: 700;
}

.competition-detail-fact strong {
  color: var(--cdp-ink);
  font-size: 14px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.competition-detail-sidebar {
  position: sticky;
  top: 92px;
  display: grid;
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--cdp-line);
  border-radius: 14px;
  background: var(--cdp-surface);
}

.competition-detail-sidebar .competition-detail-facts {
  grid-template-columns: 1fr;
}

.competition-detail-actions {
  display: grid;
  gap: 10px;
}

.competition-detail-actions .button {
  justify-content: center;
  width: 100%;
}

.competition-detail-closed-note {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(220, 38, 38, 0.08);
  color: var(--w2g-danger, #dc2626);
  font-weight: 700;
  text-align: center;
}

.competition-detail-source-link,
.competition-detail-source-mobile a {
  color: var(--w2g-orange-strong, #c2410c);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.competition-detail-source-mobile {
  display: none;
}

.competition-detail-related-list {
  display: grid;
  gap: 10px;
}

.competition-detail-team-row {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  padding: 14px;
  border: 1px solid var(--cdp-line);
  border-radius: 12px;
  background: var(--cdp-surface);
}

.competition-detail-team-row strong {
  color: var(--cdp-ink);
}

.competition-detail-team-row p,
.competition-detail-team-row small {
  margin: 3px 0 0;
  color: var(--cdp-muted);
  line-height: 1.45;
}

.competition-detail-mobile-actions {
  display: none;
}

.competition-detail-loading {
  display: grid;
  gap: 14px;
  padding: 20px 0;
}

.competition-detail-skeleton {
  display: block;
  border-radius: 12px;
  background: linear-gradient(90deg, var(--cdp-surface-2), var(--cdp-line), var(--cdp-surface-2));
  background-size: 220% 100%;
  animation: cdpSkeleton 1.2s ease-in-out infinite;
}

.competition-detail-skeleton.title { width: min(520px, 80%); height: 42px; }
.competition-detail-skeleton.line { width: min(700px, 100%); height: 18px; }
.competition-detail-skeleton.line.short { width: min(360px, 60%); }
.competition-detail-skeleton.block { height: 320px; }

@keyframes cdpSkeleton {
  0% { background-position: 120% 0; }
  100% { background-position: -120% 0; }
}

.competition-detail-state {
  display: grid;
  gap: 18px;
}

html[data-theme="dark"] .competition-detail-page {
  --cdp-surface: var(--w2g-surface, #14171e);
  --cdp-surface-2: var(--w2g-surface-2, #1b2029);
  --cdp-line: rgba(255, 255, 255, 0.10);
  --cdp-line-strong: rgba(255, 255, 255, 0.16);
  --cdp-ink: rgba(255, 255, 255, 0.92);
  --cdp-body: rgba(255, 255, 255, 0.74);
  --cdp-muted: rgba(255, 255, 255, 0.56);
}

@media (max-width: 980px) {
  .competition-detail-page {
    width: min(100% - 28px, 760px);
    padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px));
  }

  .competition-detail-layout {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .competition-detail-sidebar {
    position: static;
    order: 2;
  }

  .competition-detail-main {
    order: 1;
  }

  .competition-detail-hero h1 {
    max-width: none;
    font-size: 28px;
  }

  .competition-detail-poster {
    min-height: 220px;
  }

  .competition-detail-source-mobile {
    display: grid;
  }

  .competition-detail-sidebar .competition-detail-actions,
  .competition-detail-sidebar .competition-detail-source-link {
    display: none;
  }

  .competition-detail-mobile-actions {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: calc(var(--w2g-layer-shell-top, 115) + 1);
    display: block;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--cdp-line);
    background: var(--cdp-surface);
  }

  .competition-detail-mobile-actions .competition-detail-actions {
    max-width: 760px;
    margin: 0 auto;
    grid-template-columns: 1fr 1fr;
  }

  .competition-detail-mobile-actions .competition-detail-actions > :first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .competition-detail-page {
    width: min(100% - 20px, 420px);
    padding-top: 18px;
  }

  .competition-detail-info-grid {
    grid-template-columns: 1fr;
  }

  .competition-detail-team-row {
    align-items: stretch;
    flex-direction: column;
  }

  .competition-detail-mobile-actions .competition-detail-actions {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .competition-detail-skeleton {
    animation: none;
  }
}

/* Keep the Notification Center on the shared modal foundation while taking
   precedence over the late legacy desktop width rule above. */
@media (min-width: 761px) {
  body[data-page="app"] #modalOverlay.modal-overlay[data-modal-kind="notifications"]:not(.hidden) .modal-card {
    width: min(680px, calc(100vw - 36px)) !important;
    max-height: min(760px, calc(100vh - 36px)) !important;
    overflow: hidden !important;
  }
}

@media (max-width: 760px) {
  body[data-page="app"] #modalOverlay.modal-overlay[data-modal-kind="notifications"]:not(.hidden) {
    place-items: end stretch !important;
    padding: 0 !important;
  }

  body[data-page="app"] #modalOverlay.modal-overlay[data-modal-kind="notifications"]:not(.hidden) .modal-card {
    width: 100vw !important;
    height: 100dvh !important;
    max-height: none !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
  }
}

/* ============================================================
   Team Discovery — Member Discovery design-family alignment
   Scope: body.app-shell-v2 #teamList reference cards only.
   Mirrors the metrics already approved on #memberList (card gap,
   border, hover, 48px identity mark, header density, disclosure)
   so both discovery surfaces read as one system. Reuses existing
   W2G tokens; no Member/Competition selector is touched, and no
   Member DOM is depended on.
   ============================================================ */

/* Card shell: same gap / border / hover as #memberList. Dropping the
   inherited 398px floor lets short cards stop reserving dead space —
   grid `align-items: stretch` plus `.lc-actions { margin-top:auto }`
   still keep every CTA row in a rank aligned. */
body.app-shell-v2 #teamList > .reference-card {
  gap: 10px !important;
  min-height: 0 !important;
  border-color: var(--w2g-line-strong) !important;
}

body.app-shell-v2 #teamList > .reference-card:hover {
  border-color: var(--w2g-line-strong) !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .06) !important;
}

/* Identity row: 48px team mark + copy, same grid as the member avatar row */
body.app-shell-v2 #teamList .reference-card-title-row {
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: flex-start !important;
  min-width: 0 !important;
}

body.app-shell-v2 #teamList .reference-card .team-card-mark {
  display: flex !important;
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  flex: 0 0 48px !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid var(--w2g-orange-line) !important;
  border-radius: 10px !important;
  background: var(--w2g-orange-soft) !important;
  color: var(--w2g-orange-ink, #c2410c) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -.01em !important;
}

/* Header density: same trimmed reservations as member cards */
body.app-shell-v2 #teamList .reference-card .lc-top {
  min-height: 60px !important;
  margin-bottom: 0 !important;
}

body.app-shell-v2 #teamList .reference-card .lc-title {
  min-height: 0 !important;
  font-size: 15px !important;
}

body.app-shell-v2 #teamList .reference-card .reference-card-summary {
  min-height: 0 !important;
}

/* Team metadata carries one more token than a member card (target competition
   · province · mode · members), so it must be allowed to wrap to a third line
   on narrow cards. The shared `.lc-meta { overflow: hidden }` would clip that
   line instead. Scoped to #teamList so competition/member meta keep their
   single-line treatment. */
body.app-shell-v2 #teamList .reference-card .lc-meta {
  overflow: visible !important;
}

/* Recruiting-state pill holds its width instead of squeezing the title */
body.app-shell-v2 #teamList .reference-card .lc-top > .pill {
  flex: 0 0 auto !important;
}

/* Match block: no additive margin, and the basis line under the meter
   sits at the same weight as the member card's confidence line. */
body.app-shell-v2 #teamList .reference-card .match,
body.app-shell-v2 #teamList .reference-card .reference-why {
  margin-bottom: 0 !important;
}

body.app-shell-v2 #teamList .reference-card .team-discovery-match > small.muted {
  color: var(--w2g-muted) !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
}

/* Section labels carry an optional count token (open roles / required skills) */
body.app-shell-v2 #teamList .reference-card .reference-section-label-count {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

body.app-shell-v2 #teamList .reference-card .reference-section-label-count strong {
  color: var(--w2g-body) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums !important;
}

/* Required-skills chip row stays compact under the open-roles row */
body.app-shell-v2 #teamList .reference-card .reference-role-block .chip-row {
  max-height: 54px !important;
}

/* Scoring-scope note closing the evidence panel — same inset rhythm as the
   competition method note, without the engine-terminology chips. */
body.app-shell-v2 #teamList .reference-card .why-context-note {
  margin: 8px 0 0 !important;
  padding-top: 6px !important;
  border-top: 1px solid color-mix(in srgb, var(--w2g-match-strong) 20%, transparent) !important;
  color: var(--w2g-muted) !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
}

html[data-theme="dark"] body.app-shell-v2 #teamList .reference-card .why-context-note {
  border-top-color: rgba(43, 179, 94, 0.18) !important;
}

html[data-theme="dark"] body.app-shell-v2 #teamList > .reference-card {
  background: var(--w2g-surface) !important;
  border-color: var(--w2g-line) !important;
}

html[data-theme="dark"] body.app-shell-v2 #teamList .reference-card .team-card-mark {
  background: var(--w2g-orange-soft) !important;
  border-color: var(--w2g-orange-line) !important;
}

/* Responsive: match the member grid's column steps */
@media (max-width: 1180px) {
  body.app-shell-v2 #teamList.card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  body.app-shell-v2 #teamList.card-grid {
    grid-template-columns: 1fr !important;
  }

  body.app-shell-v2 #teamList .reference-card-title-row {
    grid-template-columns: 44px minmax(0, 1fr) !important;
  }

  body.app-shell-v2 #teamList .reference-card .team-card-mark {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    flex: 0 0 44px !important;
    font-size: 15px !important;
  }
}