/*
 * FPL Analyzer tactical redesign
 * THESIS: Weekly decisions read as a calm match-analysis workspace, not a neon card wall.
 * OWN-WORLD: Near-black planes, graphite controls, cyan interaction, and Kyoto red-to-gold brand accents.
 * STORY: Load a squad, see the important decision first, then reveal the evidence at the chosen density.
 * FIRST VIEWPORT: A compact utility bar and grouped rail frame one decisive hero with squad evidence beside it.
 * FORM: Brief-pinned tactical decision room; concept seed b1c4ddd8. FINISH: unreviewed and undocumented is unfinished; this build ends with the finish review, the verdict, DESIGN.md, and every shipping raster carrying its provenance.
 */

:root {
  color-scheme: dark;
  --pl-purple: #0a0a0b;
  --pl-purple2: #111113;
  --pl-purple3: #0a0a0b;
  --pl-card: #26262a;
  --pl-card2: #323238;
  --pl-overlay: rgba(10, 10, 11, 0.94);
  --pl-green: #22d3ee;
  --pl-cyan: #22d3ee;
  --pl-magenta: #5eead4;
  --pl-yellow: #ffac2e;
  --pl-red: #a52d25;
  --pl-orange: #ffac2e;
  --pl-deep: #111113;

  --gkp: #ffac2e;
  --def: #a0e0ab;
  --mid: #22d3ee;
  --fwd: #d86358;
  --fdr-1: #a0e0ab;
  --fdr-2: #cbe18d;
  --fdr-3: #8a8a8e;
  --fdr-4: #ffac2e;
  --fdr-5: #a52d25;

  --text-primary: #ffffff;
  --text-secondary: #c7c7cb;
  --text-muted: #8a8a8e;
  --border: rgba(255, 255, 255, 0.09);
  --border-bright: rgba(34, 211, 238, 0.48);
  --input-bg: #111113;
  --input-border: rgba(255, 255, 255, 0.13);
  --input-color: #ffffff;
  --header-bg: rgba(10, 10, 11, 0.92);
  --nav-bg: #0d0d0f;
  --nav-border: rgba(255, 255, 255, 0.09);
  --nav-btn-text: #8a8a8e;
  --nav-btn-hover: #ffffff;
  --nav-btn-hover-bg: rgba(255, 255, 255, 0.055);
  --nav-btn-active: #ffffff;

  --tac-canvas: #0a0a0b;
  --tac-plane: #111113;
  --tac-recessed: #18181b;
  --tac-surface: #26262a;
  --tac-raised: #323238;
  --tac-ink: #ffffff;
  --tac-muted: #8a8a8e;
  --tac-cyan: #22d3ee;
  --tac-teal: #5eead4;
  --tac-green: #a0e0ab;
  --tac-amber: #ffac2e;
  --tac-red: #a52d25;
  --tac-spectrum: var(--brand-gradient, linear-gradient(90deg, #c21500, #ffc500));
  --tac-font: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --tac-data: 'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, monospace;
  --tac-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --radius: 6px;
  --radius-sm: 4px;
  --shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
  --shadow-card: 0 14px 34px rgba(0, 0, 0, 0.22);
  --shadow-hover: 0 20px 42px rgba(0, 0, 0, 0.34);
  --glow-green: none;
  --transition: 180ms var(--tac-ease);
  --ease: var(--tac-ease);
  --font-head: var(--tac-font);
  --league-panel-bg: #26262a;
  --scrollbar-track: #0d0d0f;
  --scrollbar-thumb: #45454b;
  --scrollbar-thumb-hover: #22d3ee;
}

:root.light-mode {
  color-scheme: light;
  --pl-purple: #f7f7f5;
  --pl-purple2: #efefec;
  --pl-purple3: #f7f7f5;
  --pl-card: #ffffff;
  --pl-card2: #e8e8e5;
  --pl-overlay: rgba(247, 247, 245, 0.96);
  --pl-green: #087f91;
  --pl-cyan: #087f91;
  --pl-magenta: #0f766e;
  --text-primary: #101012;
  --text-secondary: #45454a;
  --text-muted: #69696f;
  --border: rgba(10, 10, 11, 0.1);
  --border-bright: rgba(8, 127, 145, 0.45);
  --input-bg: #ffffff;
  --input-border: rgba(10, 10, 11, 0.14);
  --input-color: #101012;
  --header-bg: rgba(247, 247, 245, 0.94);
  --nav-bg: #efefec;
  --nav-border: rgba(10, 10, 11, 0.1);
  --nav-btn-text: #69696f;
  --nav-btn-hover: #101012;
  --nav-btn-hover-bg: rgba(10, 10, 11, 0.055);
  --nav-btn-active: #101012;
  --tac-canvas: #f7f7f5;
  --tac-plane: #efefec;
  --tac-surface: #ffffff;
  --tac-raised: #e8e8e5;
  --tac-ink: #101012;
  --tac-muted: #69696f;
  --league-panel-bg: #ffffff;
  --pl-deep: #efefec;
  --scrollbar-track: #efefec;
  --scrollbar-thumb: #a7a7a2;
  --scrollbar-thumb-hover: #087f91;
}

* {
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  scrollbar-width: thin;
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

*::-webkit-scrollbar-thumb {
  min-height: 36px;
  border: 2px solid var(--scrollbar-track);
  border-radius: 999px;
  background: var(--scrollbar-thumb);
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

*::-webkit-scrollbar-corner {
  background: var(--scrollbar-track);
}

*::selection {
  color: #061014;
  background: var(--tac-cyan);
}

html {
  background: var(--tac-canvas);
  scroll-padding-top: 76px;
}

body {
  min-height: 100dvh;
  font-family: var(--tac-font);
  background: var(--tac-canvas);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 78% 8%, rgba(34, 211, 238, 0.055), transparent 28rem),
    radial-gradient(circle at 35% 100%, rgba(160, 224, 171, 0.03), transparent 36rem);
}

.bg-mesh {
  display: none;
}

a {
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
[role='button'],
a {
  -webkit-tap-highlight-color: transparent;
}

:where(button, input, select, textarea, a, [role='button']):focus-visible {
  outline: 2px solid var(--tac-cyan) !important;
  outline-offset: 3px !important;
  box-shadow: none !important;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 1200;
  transform: translateY(-160%);
  padding: 10px 14px;
  border-radius: 4px;
  color: #061014;
  background: var(--tac-cyan);
  font-weight: 700;
  transition: transform 140ms var(--tac-ease);
}

.skip-link:focus {
  transform: translateY(0);
}

/* Utility header */
.header {
  min-height: 64px;
  padding: 0 24px;
  background: var(--header-bg);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
}

.header-inner {
  min-height: 64px;
  max-width: none;
  padding: 8px 0;
  gap: 12px;
}

.header .logo {
  display: none;
}

.header-nav {
  width: 100%;
  gap: 8px;
  flex-wrap: nowrap;
  justify-content: flex-end;
}

.season-pill,
.gw-badge,
.auth-btn,
.x-follow,
.mini-league-join,
.mode-toggle-container {
  min-height: 38px;
  border-radius: 4px;
  box-shadow: none;
}

.season-pill {
  margin-right: auto;
  padding: 8px 11px;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--border);
  font-family: var(--tac-data);
  font-size: 0.67rem;
  letter-spacing: 0.04em;
}

.gw-badge {
  padding: 8px 11px;
  font-family: var(--tac-data);
  font-size: 0.7rem;
  background: var(--tac-plane);
  border-color: var(--border);
}

.gw-dot {
  width: 6px;
  height: 6px;
  animation: none;
  box-shadow: none;
}

.mode-toggle-container {
  gap: 2px;
  padding: 3px;
  background: var(--tac-plane);
  border: 1px solid var(--border);
}

.mode-toggle-btn {
  min-height: 30px;
  padding: 5px 10px;
  border: 0;
  border-radius: 3px;
  color: var(--text-muted);
  background: transparent;
  font-size: 0.72rem;
  transition: color 150ms ease, background-color 150ms ease, transform 120ms var(--tac-ease);
}

.mode-toggle-btn.active {
  color: var(--text-primary);
  background: var(--tac-raised);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.mode-toggle-btn:active,
.auth-btn:active,
.mc-btn:active,
.analyze-btn:active,
.cookie-btn:active {
  transform: scale(0.97);
}

.x-follow,
.mini-league-join,
.auth-btn {
  padding: 8px 11px;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--border);
  font-size: 0.72rem;
  font-weight: 650;
}

.auth-btn {
  color: #061014;
  background: var(--tac-cyan);
  border-color: transparent;
}

.theme-switch {
  transform: scale(0.78);
  transform-origin: center;
}

.tactical-context-bar {
  position: sticky;
  top: 72px;
  z-index: 72;
  width: 100%;
  max-width: 1480px;
  min-height: 0;
  margin: 0 auto;
  padding: 28px clamp(18px, 2.4vw, 36px) 0;
}

.tactical-context-bar:empty,
.tactical-context-bar[hidden] {
  display: none;
}

.tactical-context-bar .strategy-toggle-container {
  width: max-content;
  max-width: 100%;
  margin-left: 0;
  overflow-x: auto;
}

/* Navigation shell */
.main-tabs {
  background: var(--nav-bg);
  border-color: var(--nav-border);
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.tactical-nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 64px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
}

.tactical-nav-brand img {
  width: 34px;
  height: 34px;
  border-radius: 6px;
  box-shadow: none;
}

.tactical-nav-brand strong {
  font-size: 0.94rem;
  letter-spacing: -0.02em;
}

.tactical-nav-brand span {
  display: block;
  margin-top: 2px;
  color: var(--text-muted);
  font-family: var(--tac-data);
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tactical-nav-group {
  align-self: stretch;
  padding: 14px 12px 5px;
  color: var(--text-muted);
  font-family: var(--tac-data);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.tab-btn {
  color: var(--nav-btn-text);
  transition: color 150ms ease, background-color 150ms ease, transform 120ms var(--tac-ease);
}

.tab-btn svg {
  transition: none;
}

.tab-btn:hover,
.tab-btn.active {
  color: var(--nav-btn-active);
}

.tab-btn.active::before {
  background: var(--tac-spectrum);
  box-shadow: none;
}

.tab-btn.active svg {
  color: var(--tac-cyan);
  transform: none;
}

.tactical-sidebar-links {
  display: flex;
  gap: 8px;
  margin-top: auto;
  padding: 12px;
  border-top: 1px solid var(--border);
}

.tactical-sidebar-links a {
  flex: 1;
  padding: 8px;
  border-radius: 4px;
  color: var(--text-muted);
  background: var(--tac-plane);
  text-align: center;
  font-size: 0.62rem;
  text-decoration: none;
}

/* Main workspace */
.section-wrap {
  max-width: 1480px;
  padding: 28px clamp(18px, 2.4vw, 36px) 96px;
}

.section-wrap:not(:has(.page-view.active)) {
  display: none;
}

.page-view.active {
  animation: tactical-view-in 180ms var(--tac-ease) both;
}

@keyframes tactical-view-in {
  from { opacity: 0.7; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

h1,
h2,
h3,
h4,
h5,
h6,
.panel-hdr h3,
.simple-card-title,
.lc-title,
.mc-section-title {
  font-family: var(--tac-font);
  text-wrap: balance;
}

p,
li,
.hero-sub,
.lc-desc,
.simple-card-desc {
  text-wrap: pretty;
}

.panel,
.score-card,
.simple-card,
.simple-full-panel,
.landing-card,
.mc-final-card,
.auth-card,
.faa-card,
.cookie-card,
.modal,
.modal-overlay .modal,
.api-key-banner,
.upload-zone,
.landing-bar {
  border-radius: 6px !important;
  border: 1px solid var(--border) !important;
  background: var(--tac-surface) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.panel::before,
.score-card::before,
.landing-card::before,
.simple-card::before {
  box-shadow: none !important;
}

.panel,
.score-card,
.simple-card,
.landing-card,
.mc-final-card {
  transition: transform 160ms var(--tac-ease), border-color 160ms ease, background-color 160ms ease !important;
}

@media (hover: hover) and (pointer: fine) {
  .panel:hover,
  .score-card:hover,
  .simple-card:hover,
  .landing-card:hover,
  .mc-final-card:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(34, 211, 238, 0.3) !important;
    background: #303035 !important;
    box-shadow: var(--shadow-card) !important;
  }

  :root.light-mode .panel:hover,
  :root.light-mode .score-card:hover,
  :root.light-mode .simple-card:hover,
  :root.light-mode .landing-card:hover,
  :root.light-mode .mc-final-card:hover {
    background: #ffffff !important;
  }
}

.panel-hdr,
.section-hdr,
.league-hero,
.gw-hero {
  border-color: var(--border) !important;
}

/* The same tactical hero is shared by Scout, Gameweek Status and Admin.
   Override it once so no route can fall back to the retired magenta wash. */
.scout-hero {
  background: var(--tac-surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}

.scout-hero-icon {
  color: var(--tac-teal) !important;
  background: rgba(94, 234, 212, 0.07) !important;
  border: 1px solid rgba(94, 234, 212, 0.28) !important;
  border-radius: 4px !important;
}

/* Standard message composers. The full Supercomputer and the compact
   planner retain their own controls but share one familiar input surface. */
.chat-composer,
.planner-composer {
  background: var(--tac-plane) !important;
  border: 1px solid var(--input-border) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}

.chat-composer:focus-within,
.planner-composer:focus-within {
  border-color: var(--tac-cyan) !important;
  outline: 2px solid var(--tac-cyan);
  outline-offset: 2px;
  box-shadow: none !important;
}

.chat-composer #chatInput,
.planner-composer-input {
  min-height: 40px !important;
  color: var(--text-primary) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
}

.planner-composer {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 8px;
}

.planner-composer-input {
  flex: 1;
  max-height: 160px !important;
  padding: 9px 10px !important;
  resize: none;
}

.planner-composer-send {
  width: 40px !important;
  height: 40px !important;
  flex: 0 0 40px;
  color: #061014 !important;
  background: var(--tac-cyan) !important;
  border: 0 !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}

/* Chat owns its own history rail. The global navigation must not become a
   competing exit layer above it. */
body.chat-active-mode .main-tabs {
  display: none !important;
}

body.chat-active-mode #viewChatfpl {
  bottom: 0 !important;
}

.chatfpl-mobile-exit {
  display: none;
}

.chatfpl-sidebar-exit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  margin-top: auto;
  padding: 10px 12px;
  color: var(--text-primary);
  background: var(--tac-plane);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-weight: 650;
  cursor: pointer;
}

.chatfpl-sidebar-exit:hover {
  color: var(--tac-cyan);
  border-color: rgba(34, 211, 238, 0.36);
}

#viewScout .scout-card {
  background: var(--tac-surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}

@media (hover: hover) and (pointer: fine) {
  #viewScout .scout-card:hover {
    transform: translateY(-2px) !important;
    background: #303035 !important;
    border-color: rgba(34, 211, 238, 0.3) !important;
    box-shadow: var(--shadow-card) !important;
  }
}

#viewScout .scout-label-pill,
#viewScout .pos-filter-btn {
  border-radius: 4px !important;
}

#viewScout .pos-filter-btn {
  color: var(--text-muted) !important;
  background: var(--tac-plane) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
}

#viewScout .pos-filter-btn.active {
  color: #061014 !important;
  background: var(--tac-cyan) !important;
  border-color: var(--tac-cyan) !important;
}

#viewScout .text-opportunity {
  color: var(--tac-green) !important;
}

.tactical-scroll-cue {
  display: none;
}

.stats-tbl,
.mini-table,
table {
  font-variant-numeric: tabular-nums;
}

.stats-tbl th,
.stats-tbl td,
table th,
table td {
  border-color: var(--border) !important;
}

.stats-tbl th,
table th {
  color: var(--text-muted) !important;
  background: var(--tac-plane) !important;
  font-family: var(--tac-data);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
}

.stats-tbl td,
table td,
.score-val,
.kpi-val,
.lc-stat-val,
.simple-badge,
.fdr-cell,
[class*='metric'],
[class*='stat-val'] {
  font-variant-numeric: tabular-nums;
}

.stats-tbl tbody tr:hover,
table tbody tr:hover {
  background: rgba(34, 211, 238, 0.045) !important;
}

input,
select,
textarea,
.api-key-input,
.player-search {
  min-height: 42px;
  color: var(--input-color) !important;
  background: var(--input-bg) !important;
  border: 1px solid var(--input-border) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--text-muted) !important;
  opacity: 1;
}

.analyze-btn,
.mc-btn-primary,
.cookie-btn.primary,
.simple-primary-btn,
.primary-btn,
button[class*='primary'] {
  color: #061014 !important;
  background: var(--tac-cyan) !important;
  border-color: transparent !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}

.mc-btn-ghost,
.cookie-btn.secondary,
button[class*='secondary'],
.seg-btn {
  color: var(--text-primary) !important;
  background: var(--tac-plane) !important;
  border: 1px solid var(--border) !important;
  border-radius: 4px !important;
}

/* Landing and onboarding */
#viewLanding {
  --mc-abyss: var(--tac-canvas);
  --mc-surface: var(--tac-surface);
  --mc-interactive: var(--tac-raised);
  --mc-accent: var(--tac-cyan);
  --mc-accent-ghost: rgba(34, 211, 238, 0.09);
  --mc-on-accent: #061014;
  --mc-border: var(--border);
  --mc-border-strong: rgba(255, 255, 255, 0.16);
  --mc-text: var(--text-primary);
  --mc-text-2: var(--text-secondary);
  --mc-text-3: var(--text-muted);
  --mc-page-max: 1280px;
  --mc-section-gap: clamp(64px, 7vw, 104px);
  --mc-font-display: var(--tac-font);
  --mc-font-body: var(--tac-font);
}

#viewLanding .hero {
  overflow: visible;
}

#viewLanding .hero::before {
  content: '';
  position: absolute;
  top: -28px;
  right: 0;
  width: min(56vw, 760px);
  height: 1px;
  background: var(--tac-spectrum);
  opacity: 0.9;
}

#viewLanding .hero-inner {
  grid-template-columns: minmax(0, 1.25fr) minmax(270px, 0.75fr);
  align-items: end;
  gap: clamp(44px, 6vw, 92px);
  padding: clamp(52px, 7vw, 96px) 0 clamp(52px, 7vw, 88px);
}

#viewLanding .hero-eyebrow,
.mc-eyebrow {
  display: none !important;
}

#viewLanding .hero-title {
  max-width: 13ch;
  margin-bottom: 22px;
  color: var(--text-primary);
  font-size: clamp(3rem, 6.2vw, 5.8rem);
  font-weight: 650;
  line-height: 0.96;
  letter-spacing: -0.04em;
}

#viewLanding .hero-title em {
  color: var(--tac-green);
  background: none;
  -webkit-text-fill-color: currentColor;
  filter: none;
}

#viewLanding .hero-sub {
  max-width: 58ch;
  color: var(--text-secondary);
  font-size: clamp(1rem, 1.35vw, 1.16rem);
  line-height: 1.62;
}

.mc-cta-group {
  margin-bottom: 42px;
}

.mc-btn {
  min-height: 46px;
  padding: 13px 20px;
  border-radius: 4px;
  font-weight: 650;
  transition: transform 140ms var(--tac-ease), background-color 150ms ease, border-color 150ms ease;
}

#viewLanding .hero-kpis {
  gap: 0;
  max-width: 660px;
  padding-top: 0;
  border-top: 1px solid var(--border);
}

#viewLanding .kpi {
  flex: 1 1 120px;
  padding: 18px 20px 0 0;
}

#viewLanding .kpi-val {
  color: var(--text-primary);
  font-family: var(--tac-data);
  font-size: clamp(1.25rem, 2.2vw, 1.8rem);
  font-weight: 600;
  -webkit-text-fill-color: currentColor;
}

#viewLanding .kpi-label {
  color: var(--text-muted);
  font-family: var(--tac-data);
  font-size: 0.58rem;
  letter-spacing: 0.06em;
}

#viewLanding .hero-pitch {
  width: 100%;
  max-width: 360px;
  height: clamp(360px, 38vw, 470px);
  border-radius: 6px;
  border: 1px solid rgba(160, 224, 171, 0.18);
  background:
    linear-gradient(rgba(10, 10, 11, 0.08), rgba(10, 10, 11, 0.3)),
    linear-gradient(180deg, #173924, #10291b);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.32);
  animation: none;
}

#viewLanding .hero-pitch::after {
  content: 'ILLUSTRATIVE SQUAD SHAPE';
  position: absolute;
  right: 12px;
  bottom: 9px;
  z-index: 2;
  color: rgba(255, 255, 255, 0.5);
  font-family: var(--tac-data);
  font-size: 0.52rem;
  letter-spacing: 0.08em;
}

#viewLanding .mini-p {
  width: 48px;
  height: 60px;
  padding: 3px 3px 2px;
  flex-direction: column;
  gap: 1px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  color: var(--text-secondary);
  background: var(--tac-recessed);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24);
}

#viewLanding .mini-p img {
  width: 38px;
  height: 43px;
  object-fit: contain;
  transform: scale(1.08);
  transform-origin: center bottom;
}

#viewLanding .mini-p span {
  color: var(--text-muted);
  font-family: var(--tac-data);
  font-size: 0.43rem;
  letter-spacing: 0.04em;
}

#viewLanding .mini-p.gkp { border-top-color: var(--gkp); }
#viewLanding .mini-p.def { border-top-color: var(--def); }
#viewLanding .mini-p.mid { border-top-color: var(--mid); }
#viewLanding .mini-p.fwd { border-top-color: var(--fwd); }

#viewLanding .landing-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px;
  padding: 0;
}

#viewLanding .landing-card {
  grid-column: span 4;
  min-height: 250px;
  padding: 24px;
}

#viewLanding .landing-card:nth-child(1),
#viewLanding .landing-card:nth-child(4) {
  grid-column: span 8;
}

#viewLanding .landing-card:nth-child(1) {
  background:
    linear-gradient(135deg, rgba(34, 211, 238, 0.09), transparent 46%),
    var(--tac-surface) !important;
}

#viewLanding .lc-accent {
  width: 100%;
  height: 1px;
  background: var(--tac-spectrum) !important;
}

#viewLanding .lc-icon {
  width: 42px;
  height: 42px;
  border-radius: 4px;
  color: var(--tac-cyan);
  background: var(--tac-plane);
  border: 1px solid var(--border);
}

#viewLanding .lc-title {
  font-size: 1.3rem;
  font-weight: 650;
  letter-spacing: -0.02em;
}

#viewLanding .lc-desc {
  max-width: 54ch;
  color: var(--text-secondary);
  line-height: 1.55;
}

#viewLanding .lc-stats {
  margin-top: auto;
  border-color: var(--border);
}

#viewLanding .lc-stat-val,
#viewLanding .lc-cta {
  color: var(--tac-cyan);
  font-family: var(--tac-data);
}

.mc-stats {
  gap: 0;
  border-color: var(--border);
}

.mc-stat-item {
  min-height: 118px;
  padding: 24px;
  border-right: 1px solid var(--border);
}

.mc-stat-item:last-child {
  border-right: 0;
}

.mc-stat-num {
  font-family: var(--tac-data);
  font-size: clamp(1.8rem, 3.4vw, 2.9rem);
}

.mc-stat-num span,
.mc-quote blockquote .mc-mark,
.mc-final-card .mc-arrow {
  color: var(--tac-cyan);
}

.mc-press {
  display: none;
}

.mc-final {
  text-align: left;
}

.mc-final .mc-section-title,
.mc-final .mc-section-sub {
  margin-left: 0;
  margin-right: 0;
  text-align: left;
}

.mc-final-cards {
  grid-template-columns: 1.35fr 0.65fr;
  gap: 12px;
}

/* Team, pitch, and decisions */
.pitch-bg,
.hero-pitch {
  border-radius: 6px !important;
}

.pitch-bg {
  background: linear-gradient(180deg, #153621 0%, #183e26 50%, #12301d 100%) !important;
  border: 1px solid rgba(160, 224, 171, 0.16);
}

.player-card {
  border-radius: 5px !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.26) !important;
}

.player-card img,
.player-kit,
.pc-shirt,
.kit-img {
  transform: scale(1.06);
  transform-origin: center bottom;
}

.simple-dashboard-grid {
  gap: 12px !important;
}

.simple-card {
  min-height: 220px;
  padding: 22px !important;
}

.simple-card-title {
  font-size: 1.32rem;
  font-weight: 650;
  letter-spacing: -0.025em;
}

.simple-card-desc {
  color: var(--text-secondary);
  line-height: 1.55;
}

.simple-badge,
.gw-badge,
[class*='badge'] {
  border-radius: 3px !important;
  box-shadow: none !important;
}

/* Overlay surfaces */
.cookie-overlay,
.modal-overlay,
.tactical-more-overlay {
  background: rgba(0, 0, 0, 0.68) !important;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.cookie-card,
.modal-overlay .modal {
  border-top: 1px solid rgba(34, 211, 238, 0.32) !important;
}

.cookie-icon {
  display: none !important;
}

.footer {
  margin-top: 32px;
  padding: 34px 24px 110px;
  background: var(--tac-plane);
  border-top: 1px solid var(--border);
}

.footer-logo {
  color: var(--text-primary);
  font-weight: 650;
}

.footer-link {
  color: var(--text-muted);
}

.footer-link:hover {
  color: var(--tac-cyan);
}

#squadDraftsBar,
#benchView,
#overrideDashboardPanel {
  color: var(--text-primary) !important;
  background: var(--tac-surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}

#btnShareSquadCard {
  color: #061014 !important;
  -webkit-text-fill-color: #061014 !important;
  background: var(--tac-cyan) !important;
  border-color: transparent !important;
}

html body .modal-overlay,
html body #simpleModePromptModal,
html body #authModal {
  background: rgba(0, 0, 0, 0.76) !important;
}

/* Accessible mobile More drawer */
.tactical-more-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: grid;
  align-items: end;
  opacity: 0;
  visibility: hidden;
  transition: opacity 160ms ease, visibility 0s linear 160ms;
}

.tactical-more-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.tactical-more-sheet {
  width: 100%;
  max-height: min(78dvh, 680px);
  overflow: auto;
  padding: 18px 18px calc(22px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  border-radius: 12px 12px 0 0;
  background: var(--tac-plane);
  transform: translateY(100%);
  transition: transform 220ms var(--tac-ease);
}

.tactical-more-overlay.is-open .tactical-more-sheet {
  transform: translateY(0);
}

.tactical-more-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.tactical-more-head h2 {
  margin: 0;
  font-size: 1.2rem;
}

.tactical-more-close {
  width: 42px;
  height: 42px;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-primary);
  background: var(--tac-raised);
}

.tactical-more-group + .tactical-more-group {
  margin-top: 18px;
}

.tactical-more-label {
  margin: 0 0 8px;
  color: var(--text-muted);
  font-family: var(--tac-data);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tactical-more-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.tactical-more-action {
  min-height: 54px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-primary);
  background: var(--tac-surface);
  text-align: left;
  font-weight: 600;
}

.tactical-more-action small {
  display: block;
  margin-top: 3px;
  color: var(--text-muted);
  font-family: var(--tac-data);
  font-size: 0.56rem;
  font-weight: 500;
}

.tactical-mobile-more {
  display: none;
}

/* Desktop rail */
@media (min-width: 1100px) {
  body {
    padding-left: 232px;
  }

  .header {
    left: 232px;
  }

  .header .x-follow,
  .header .mini-league-join {
    display: none !important;
  }

  .main-tabs {
    top: 0;
    right: auto;
    bottom: 0;
    width: 232px;
    border-top: 0;
    border-right: 1px solid var(--nav-border);
  }

  .tabs-inner {
    max-width: none;
    height: calc(100dvh - 65px);
    padding: 7px;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .tab-btn {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    flex: 0 0 auto;
    flex-direction: row;
    justify-content: flex-start;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 4px;
  }

  .tab-btn:hover {
    background: var(--nav-btn-hover-bg);
  }

  .tab-btn.active {
    background: var(--tac-raised);
  }

  .tab-btn.active::before {
    top: 8px;
    right: auto;
    bottom: 8px;
    left: 0;
    width: 1px;
    height: auto;
    border-radius: 0;
  }

  .tab-btn svg {
    width: 18px;
    height: 18px;
  }

  .tab-btn span {
    font-size: 0.76rem;
  }

  .tabs-inner.simple-nav-tabs {
    padding-top: 18px;
  }

  #warroomNavBanner {
    position: fixed !important;
    top: 64px !important;
    left: 232px !important;
    right: 0 !important;
    width: auto !important;
    height: 44px !important;
  }

  .section-wrap {
    margin: 0 auto;
  }

  .footer {
    margin-left: 0;
  }
}

@media (max-width: 1099px) {
  .header {
    padding: 0 14px;
  }

  .header-inner {
    min-height: 58px;
  }

  .header-nav {
    flex: 1 1 auto;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .header .logo {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
  }

  .header .logo-img {
    width: 34px;
    height: 34px;
  }

  .header .logo-text {
    display: none;
  }

  .header-nav::-webkit-scrollbar {
    display: none;
  }

  .x-follow,
  .mini-league-join {
    display: none !important;
  }

  .main-tabs {
    border-radius: 0;
    box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.32);
  }

  .tactical-nav-brand,
  .tactical-nav-group,
  .tactical-sidebar-links {
    display: none;
  }

  .tabs-inner {
    max-width: none;
    height: calc(64px + env(safe-area-inset-bottom));
    padding: 0 max(4px, env(safe-area-inset-left)) env(safe-area-inset-bottom) max(4px, env(safe-area-inset-right));
    overflow: visible;
  }

  .header-nav:has(#gwStatusBadge:empty) {
    grid-template-columns: auto minmax(72px, 1fr);
    grid-template-areas:
      'theme auth'
      'modes modes';
  }

  #gwStatusBadge:empty {
    display: none !important;
  }

  .pro-nav-tabs .tab-btn:not(#tabLanding):not(#tabHome):not(#tabChatFPL):not(#tabTopTeams) {
    display: none !important;
  }

  .pro-nav-tabs .tab-btn,
  .tactical-mobile-more {
    flex: 1 1 20%;
    min-width: 0;
    min-height: 58px;
    padding: 7px 3px;
  }

  .tactical-mobile-more {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: var(--text-muted);
    background: transparent;
    border: 0;
    font-size: 0.67rem;
  }

  .tactical-mobile-more svg {
    width: 22px;
    height: 22px;
  }

  .tab-btn svg {
    width: 21px;
    height: 21px;
  }

  .tab-btn span {
    max-width: 100%;
    overflow: hidden;
    font-size: 0.63rem;
    text-overflow: ellipsis;
  }

  #tabChatFPL span {
    font-size: 0.55rem;
    letter-spacing: -0.02em;
  }

  .tab-btn.active::before {
    top: 0;
    bottom: auto;
    width: 32px;
    height: 1px;
  }

  .section-wrap {
    padding: 22px 16px calc(90px + env(safe-area-inset-bottom));
  }

  .tactical-context-bar {
    top: 66px;
    padding: 22px 16px 0;
  }

  .footer {
    padding-bottom: calc(92px + env(safe-area-inset-bottom));
  }

  #viewLanding .hero-inner {
    grid-template-columns: 1fr;
    gap: 30px;
    padding-top: 42px;
  }

  #viewLanding .hero-pitch {
    display: flex;
    width: min(100%, 420px);
    max-width: none;
    margin: 0;
  }

  #viewLanding .landing-card,
  #viewLanding .landing-card:nth-child(1),
  #viewLanding .landing-card:nth-child(4) {
    grid-column: span 6;
  }
}

@media (max-width: 900px) {
  .chatfpl-mobile-exit {
    position: absolute !important;
    top: 10px;
    right: 10px;
    z-index: 32;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 76px;
    min-height: 42px;
    padding: 0 12px;
    color: var(--text-primary);
    background: var(--tac-plane);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-weight: 650;
  }
}

@media (max-width: 600px) {
  body.chat-active-mode .header {
    display: block !important;
  }

  body.chat-active-mode .header-inner {
    flex-wrap: nowrap;
    justify-content: space-between;
  }

  body.chat-active-mode .header-nav {
    display: flex !important;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    justify-content: flex-end;
    overflow: visible;
  }

  body.chat-active-mode .header-nav > * {
    display: none !important;
  }

  body.chat-active-mode #gwStatusBadge,
  body.chat-active-mode .theme-switch {
    display: flex !important;
  }

  body.chat-active-mode #viewChatfpl {
    top: 61px !important;
    bottom: 0 !important;
  }

  body.chat-active-mode .chatfpl-input-zone {
    padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
  }
}

@media (max-width: 680px) {
  .season-pill {
    display: none !important;
  }

  .header {
    padding-right: max(10px, env(safe-area-inset-right));
    padding-left: max(10px, env(safe-area-inset-left));
  }

  .header-inner {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: start;
    min-height: 104px;
    gap: 8px;
    padding-block: 8px;
  }

  .header .logo {
    align-self: start;
    min-width: 36px;
    min-height: 36px;
  }

  .header .logo-img {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    box-shadow: none;
  }

  .header-nav {
    display: grid;
    grid-template-columns: minmax(94px, auto) auto minmax(72px, 1fr);
    grid-template-areas:
      'gw theme auth'
      'modes modes modes';
    width: 100%;
    min-width: 0;
    gap: 6px 8px;
    overflow: visible;
  }

  .header-nav:has(#gwStatusBadge:empty) {
    grid-template-columns: minmax(94px, auto) auto minmax(72px, 1fr);
    grid-template-areas:
      'gw theme auth'
      'modes modes modes';
  }

  #gwStatusBadge {
    display: flex !important;
    grid-area: gw;
    min-width: 0;
  }

  #gwStatusBadge:empty {
    display: flex !important;
    align-items: center;
    min-height: 36px;
    padding: 7px 8px;
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-muted);
    background: var(--tac-plane);
  }

  #gwStatusBadge:empty::before {
    content: 'GW STATUS';
    overflow: hidden;
    font-family: var(--tac-mono);
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-muted) !important;
    -webkit-text-fill-color: var(--text-muted) !important;
  }

  #gwStatusBadge.skel:empty::before {
    display: none;
  }

  #gwStatusBadge.skel::after {
    display: inline !important;
    color: var(--text-muted) !important;
    -webkit-text-fill-color: var(--text-muted) !important;
  }

  #gwStatusBadge .gw-badge {
    width: 100%;
    min-height: 36px;
    padding: 7px 8px;
    overflow: hidden;
    font-size: 0.58rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #gwStatusBadge .gw-status {
    display: inline !important;
  }

  .theme-switch {
    --ts-h: 36px;
    display: block !important;
    grid-area: theme;
    transform: none !important;
  }

  #modeToggleContainer {
    grid-area: modes;
  }

  .header .auth-btn {
    grid-area: auth;
  }

  .mode-toggle-container {
    width: 100%;
    max-width: none;
  }

  .mode-toggle-btn {
    flex: 1;
  }

  .auth-btn {
    white-space: nowrap;
  }

  #modeToggleContainer {
    min-width: 0;
    max-width: none;
  }

  #modeToggleContainer .mode-toggle-btn {
    min-width: 0;
    min-height: 34px;
    padding-inline: 8px;
    font-size: 0.66rem;
  }

  .header .auth-btn {
    width: 100%;
    max-width: none;
    min-width: 0;
    min-height: 36px;
    padding-inline: 8px;
    overflow: hidden;
    font-size: 0.66rem;
    text-overflow: ellipsis;
  }

  .tactical-context-bar {
    top: 112px;
  }

  #viewResults .results-header {
    display: grid;
    grid-template-columns: 1fr;
  }

  #viewResults .score-cards {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    gap: 8px;
  }

  #viewResults .score-card {
    min-width: 0;
    padding: 12px 6px;
  }

  #viewResults .score-val {
    overflow: hidden;
    font-size: clamp(1.25rem, 7vw, 1.65rem);
    text-overflow: ellipsis;
  }

  #viewResults .score-label {
    font-size: 0.56rem;
    letter-spacing: 0.04em;
  }

  #viewResults .results-subnav {
    padding-bottom: 8px !important;
    scrollbar-width: thin !important;
    scrollbar-color: var(--tac-cyan) transparent !important;
  }

  #viewResults .results-subnav::-webkit-scrollbar {
    display: block !important;
    height: 4px;
  }

  #viewResults .results-subnav::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: var(--tac-cyan);
  }

  #viewResults .tactical-scroll-cue {
    display: block;
    margin: -16px 2px 14px;
    color: var(--text-muted);
    font-family: var(--tac-data);
    font-size: 0.55rem;
    letter-spacing: 0.04em;
    text-align: right;
    text-transform: uppercase;
  }

  #viewLanding .hero::before {
    right: -16px;
    width: calc(100% + 16px);
  }

  #viewLanding .hero-title {
    max-width: 11ch;
    font-size: clamp(2.65rem, 13vw, 4.3rem);
  }

  #viewLanding .hero-sub {
    font-size: 0.98rem;
  }

  .mc-cta-group {
    display: grid;
    grid-template-columns: 1fr;
  }

  .mc-btn {
    justify-content: center;
    width: 100%;
  }

  #viewLanding .hero-kpis {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #viewLanding .kpi {
    padding: 14px 10px 0 0;
  }

  #viewLanding .hero-pitch {
    height: 340px;
  }

  #viewLanding .landing-grid {
    grid-template-columns: 1fr;
  }

  #viewLanding .landing-card,
  #viewLanding .landing-card:nth-child(1),
  #viewLanding .landing-card:nth-child(4) {
    grid-column: auto;
    min-height: auto;
    padding: 20px;
  }

  .mc-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mc-stat-item {
    min-height: 106px;
    padding: 18px 12px;
  }

  .mc-stat-item:nth-child(2) {
    border-right: 0;
  }

  .mc-stat-item:nth-child(-n + 2) {
    border-bottom: 1px solid var(--border);
  }

  .mc-final-cards {
    grid-template-columns: 1fr;
  }

  .panel,
  .simple-card,
  .simple-full-panel {
    padding: 16px !important;
  }

  .simple-card {
    min-height: 0;
  }

  .stats-tbl {
    min-width: 620px;
  }

  .panel,
  .simple-card,
  .simple-full-panel,
  .normal-two-col,
  #viewNormalDashboard,
  .page-view {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .panel button,
  .simple-card button,
  .mc-btn,
  .cookie-btn,
  .tactical-more-action {
    min-height: 44px;
  }

  .cookie-card {
    width: calc(100% - 20px) !important;
    padding: 20px !important;
  }
}

/* Retire the previous global liquid-glass button material. The original
   selector is deliberately matched at higher specificity because that layer
   used !important declarations to skin every dynamically injected button. */
html body button:not(.tab-btn):not(.rsnav-btn):not(.pos-filter-btn):not(.seg-btn):not(.ftab):not(.pm-tab):not(.theme-switch):not(.acct-kit):not(.amc-key):not(.amc-banner-btn),
html body .btn,
html body .mc-btn,
html body [class*='-btn']:not(.tab-btn):not(.rsnav-btn):not(.pos-filter-btn):not(.seg-btn),
html body [class*='btn-'] {
  color: var(--text-primary) !important;
  -webkit-text-fill-color: currentColor !important;
  background: var(--tac-plane) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html body button:not(.tab-btn):not(.rsnav-btn):not(.pos-filter-btn):not(.seg-btn):not(.ftab):not(.pm-tab):not(.theme-switch):not(.acct-kit):not(.amc-key):not(.amc-banner-btn)::after,
html body .mc-btn::after,
html body [class*='-btn']:not(.tab-btn):not(.rsnav-btn):not(.pos-filter-btn):not(.seg-btn)::after,
html body [class*='btn-']::after {
  display: none !important;
}

html body #viewLanding .mc-btn.mc-btn-primary,
html body #analyzeBtn,
html body #cookieOverlay .cookie-btn.cookie-btn.primary,
html body .simple-primary-btn,
html body .primary-btn,
html body #authBtn:not(.logged-in) {
  color: #061014 !important;
  -webkit-text-fill-color: #061014 !important;
  background: var(--tac-cyan) !important;
  border-color: transparent !important;
}

html body #tacticalMoreNav {
  color: var(--text-muted) !important;
  -webkit-text-fill-color: currentColor !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body #modeToggleContainer .mode-toggle-btn.mode-toggle-btn.active,
html body .seg-btn.seg-btn.active,
html body button.active:not(.tab-btn) {
  color: var(--text-primary) !important;
  -webkit-text-fill-color: currentColor !important;
  background: var(--tac-raised) !important;
  border-color: var(--border) !important;
}

#seasonPill.skel,
#gwStatusBadge.skel {
  min-width: 84px;
  color: transparent !important;
  background: var(--tac-plane) !important;
  animation: none !important;
}

#seasonPill.skel::after,
#gwStatusBadge.skel::after {
  color: var(--text-muted);
  font-family: var(--tac-data);
  font-size: 0.58rem;
  letter-spacing: 0.06em;
}

#seasonPill.skel::after { content: 'SEASON'; }
#gwStatusBadge.skel::after { content: 'SYNCING GW'; }

#viewLanding .kpi-val.skel {
  width: 3.5rem !important;
  min-width: 3.5rem !important;
  height: 1.3rem !important;
  color: transparent !important;
  background: var(--tac-raised) !important;
  animation: tactical-skeleton 1.5s ease-in-out infinite !important;
}

@keyframes tactical-skeleton {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 0.8; }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }

  .page-view.active,
  .tactical-more-sheet {
    transform: none !important;
  }
}

/* The general mobile header is a two-row grid. Supercomputer deliberately
   shows only the logo, Gameweek status and theme control, so it needs a
   compact one-row frame after the general mobile rules have resolved. */
@media (max-width: 600px) {
  body.chat-active-mode .header {
    min-height: calc(61px + env(safe-area-inset-top)) !important;
    height: calc(61px + env(safe-area-inset-top)) !important;
    padding: env(safe-area-inset-top) max(10px, env(safe-area-inset-right)) 0 max(10px, env(safe-area-inset-left)) !important;
  }

  body.chat-active-mode .header-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100%;
    min-height: 60px !important;
    height: 60px !important;
    padding: 6px 0 !important;
    gap: 10px !important;
  }

  body.chat-active-mode .header .logo {
    display: flex !important;
    align-self: center !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    min-width: 40px;
    min-height: 40px;
  }

  body.chat-active-mode .header .logo-img {
    width: 40px;
    height: 40px;
  }

  body.chat-active-mode .header-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    height: 48px;
    gap: 8px !important;
    overflow: visible;
  }

  body.chat-active-mode #gwStatusBadge {
    flex: 0 1 132px;
    max-width: 132px;
  }

  body.chat-active-mode .theme-switch {
    flex: 0 0 auto;
  }

  body.chat-active-mode #viewChatfpl {
    top: calc(61px + env(safe-area-inset-top)) !important;
  }
}