/* =========================================================
   PERFORMANCE LAYER
   Loaded last to keep the UI smooth on large lists.
========================================================= */

* {
  transition-duration: 120ms !important;
}

/* Shared language selector. */
.language-switch {
  align-items: center;
  background: rgba(8, 15, 29, 0.72);
  border: 1px solid rgba(71, 85, 105, 0.45);
  border-radius: 6px;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 2px;
  padding: 3px;
}

.language-switch button {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 4px;
  color: #94a3b8;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  height: 28px;
  justify-content: center;
  min-width: 32px;
  padding: 0 7px;
}

.language-switch button:hover,
.language-switch button:focus-visible {
  color: #f8fafc;
}

.language-switch button.active {
  background: rgba(34, 197, 94, 0.16);
  color: #6ee7a2;
}

body.light-mode .language-switch {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(100, 116, 139, 0.28);
}

body.light-mode .language-switch button {
  color: #475569;
}

body.light-mode .language-switch button.active {
  background: rgba(22, 163, 74, 0.12);
  color: #087a36;
}

@media (max-width: 760px) {
  .language-switch {
    margin-left: auto;
    padding: 2px;
  }

  .language-switch button {
    font-size: 10px;
    height: 26px;
    min-width: 29px;
    padding-inline: 5px;
  }
}

/* =========================================================
   GLOBAL UI POLISH
   Final shared layer for steadier desktop/mobile layouts.
========================================================= */
:root {
  --ui-page-max: 1240px;
  --ui-page-pad: clamp(16px, 3vw, 32px);
  --ui-panel-pad: clamp(14px, 2vw, 22px);
  --ui-radius: 8px;
  --ui-border: rgba(148, 163, 184, 0.2);
  --ui-surface: rgba(15, 23, 42, 0.82);
  --ui-surface-soft: rgba(2, 6, 23, 0.36);
  --ui-text: #e5e7eb;
  --ui-muted: #94a3b8;
  --ui-accent: #22c55e;
}

body.light-mode {
  --ui-border: rgba(15, 23, 42, 0.12);
  --ui-surface: rgba(255, 255, 255, 0.9);
  --ui-surface-soft: rgba(241, 245, 249, 0.9);
  --ui-text: #0f172a;
  --ui-muted: #64748b;
  --ui-accent: #16a34a;
}

html {
  scroll-padding-top: 84px;
}

body {
  color: var(--ui-text);
  text-rendering: optimizeLegibility;
}

img,
svg,
video,
canvas {
  max-width: 100%;
}

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

button,
a,
summary,
input,
select,
textarea {
  touch-action: manipulation;
}

input,
select,
textarea {
  min-width: 0;
}

::placeholder {
  color: color-mix(in srgb, var(--ui-muted) 78%, transparent);
}

.navbar {
  background: rgba(7, 12, 24, 0.94) !important;
  border-bottom: 1px solid var(--ui-border) !important;
}

body.light-mode .navbar {
  background: rgba(255, 255, 255, 0.96) !important;
}

.nav-container {
  width: min(var(--ui-page-max), 100%);
}

.nav-brand {
  gap: 10px !important;
  letter-spacing: 0 !important;
}

.nav-brand span {
  color: var(--ui-text);
  font-weight: 900;
}

.nav-links {
  align-items: center;
}

.nav-btn,
.theme-toggle,
.account-chip,
.mobile-tabbar a,
.mobile-tabbar button,
.mobile-menu-links a {
  border-radius: var(--ui-radius) !important;
}

.nav-btn {
  min-height: 38px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  line-height: 1.1;
}

.nav-btn:hover,
.nav-btn:focus-visible {
  border-color: rgba(34, 197, 94, 0.56) !important;
  background: rgba(34, 197, 94, 0.12) !important;
}

.hub-container,
.main,
.page-container,
.settings-shell,
.account-shell,
.legal-page,
.admin-shell,
.event-shell,
.calculator-shell,
.census-shell,
.builds-shell {
  width: min(var(--ui-page-max), calc(100% - (var(--ui-page-pad) * 2))) !important;
  margin-inline: auto !important;
}

.hub-container,
.main,
.page-container {
  padding-inline: 0 !important;
}

.hero,
.panel,
.management-panel,
.summary-card,
.stat-card,
.build-card,
.build-detail,
.build-panel,
.build-editor,
.my-builds-panel,
.account-panel,
.admin-card,
.event-card,
.calculator-panel,
.census-card,
.zone,
.feat,
.char {
  border-color: var(--ui-border) !important;
  border-radius: var(--ui-radius) !important;
}

.hero,
.panel,
.management-panel,
.summary-card,
.build-detail,
.build-panel,
.build-editor,
.my-builds-panel,
.account-panel,
.admin-card,
.event-card,
.calculator-panel,
.census-card {
  background: var(--ui-surface) !important;
}

.zone,
.feat,
.char,
.stat-card,
.build-card {
  background-color: var(--ui-surface) !important;
}

.hero h1,
.builds-heading h1,
.page-title,
.section-title,
h1,
h2,
h3 {
  letter-spacing: 0 !important;
  overflow-wrap: anywhere;
}

p,
li,
.hint,
.build-card-footer,
.build-row span,
.my-build-item span {
  line-height: 1.5;
}

label {
  min-width: 0;
}

input,
select,
textarea,
.search-input,
.filter-input {
  border-color: var(--ui-border) !important;
  border-radius: var(--ui-radius) !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(34, 197, 94, 0.66) !important;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.14) !important;
  outline: 0 !important;
}

button,
.nav-btn,
.hero-btn,
.quick-btn,
.build-detail-actions a {
  min-width: 0;
}

.builds-heading,
.build-detail-header,
.page-header,
.section-header,
.hero-actions,
.builds-heading-actions {
  min-width: 0;
}

.build-card,
.build-panel,
.build-editor-panel,
.my-build-item,
.build-row,
.stat-card,
.zone,
.feat,
.char {
  min-width: 0;
}

.build-card *,
.build-panel *,
.my-build-item *,
.stat-card *,
.zone *,
.feat *,
.char * {
  min-width: 0;
}

.mobile-tabbar,
.mobile-menu-card {
  border: 1px solid var(--ui-border) !important;
}

.mobile-tabbar {
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.36) !important;
}

body.light-mode .mobile-tabbar {
  box-shadow: 0 16px 42px rgba(15, 23, 42, 0.14) !important;
}

@media (min-width: 761px) {
  .nav-container {
    min-height: 48px;
  }

  .nav-links {
    overflow: visible;
  }
}

@media (max-width: 980px) {
  :root {
    --ui-page-pad: 20px;
  }

  .nav-brand span {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .builds-heading,
  .build-detail-header,
  .page-header,
  .section-header {
    align-items: start !important;
    display: grid !important;
    gap: 12px !important;
  }
}

@media (max-width: 760px) {
  :root {
    --ui-page-pad: 12px;
    --ui-panel-pad: 14px;
  }

  html {
    scroll-padding-top: 70px;
  }

  body {
    font-size: 15px;
  }

  .hub-container,
  .main,
  .page-container,
  .settings-shell,
  .account-shell,
  .legal-page,
  .admin-shell,
  .event-shell,
  .calculator-shell,
  .census-shell,
  .builds-shell {
    width: min(100% - 20px, var(--ui-page-max)) !important;
    padding-top: 18px !important;
  }

  .hero,
  .panel,
  .management-panel,
  .summary-card,
  .build-detail,
  .build-panel,
  .build-editor,
  .my-builds-panel,
  .account-panel,
  .admin-card,
  .event-card,
  .calculator-panel,
  .census-card {
    padding: var(--ui-panel-pad) !important;
  }

  .hero h1,
  .builds-heading h1,
  h1 {
    font-size: clamp(1.8rem, 9vw, 2.4rem) !important;
    line-height: 1.08 !important;
  }

  h2 {
    font-size: clamp(1.25rem, 6vw, 1.65rem) !important;
  }

  h3 {
    font-size: 1.04rem !important;
  }

  .builds-filters,
  .filters,
  .filter-bar,
  .controls,
  .toolbar {
    gap: 10px !important;
  }

  input,
  select,
  textarea,
  button,
  .nav-btn,
  .hero-btn,
  .quick-btn {
    min-height: 42px;
  }

  .mobile-menu-card {
    max-height: min(78vh, 640px);
    overflow: auto;
  }

  .mobile-menu-links,
  .mobile-menu-group {
    grid-template-columns: 1fr !important;
  }

  .mobile-tabbar {
    max-width: 520px;
    margin-inline: auto;
  }
}

@media (max-width: 420px) {
  .nav-brand span {
    max-width: 118px !important;
  }

  .account-chip {
    max-width: 104px !important;
  }

  .mobile-tabbar a,
  .mobile-tabbar button {
    font-size: 10px !important;
    padding-inline: 5px !important;
  }
}

:focus-visible {
  outline: 3px solid rgba(34, 197, 94, 0.72);
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  left: 14px;
  top: 14px;
  z-index: 100080;
  border: 1px solid rgba(34, 197, 94, 0.42);
  border-radius: 8px;
  background: rgba(10, 16, 30, 0.96);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.26);
  color: #bbf7d0;
  font-size: 13px;
  font-weight: 900;
  opacity: 0;
  padding: 10px 12px;
  pointer-events: none;
  text-decoration: none;
  transform: translateY(-8px);
  transition: opacity 140ms ease, transform 140ms ease;
}

.skip-link:focus-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

body.light-mode .skip-link {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(22, 163, 74, 0.28);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.14);
  color: #166534;
}

.command-palette {
  background: rgba(2, 6, 23, 0.64);
  display: grid;
  inset: 0;
  padding: 18px;
  place-items: start center;
  position: fixed;
  z-index: 100070;
}

.command-palette[hidden] {
  display: none !important;
}

.command-palette-card {
  background: rgba(10, 16, 30, 0.98);
  border: 1px solid rgba(34, 197, 94, 0.24);
  border-radius: 8px;
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.38);
  margin-top: min(12vh, 96px);
  overflow: hidden;
  width: min(680px, 100%);
}

.command-palette-head {
  align-items: center;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 14px;
}

.command-palette-head label {
  display: grid;
  gap: 7px;
}

.command-palette-head label span {
  color: #86efac;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.command-palette-input {
  background: rgba(15, 23, 42, 0.78) !important;
  border: 1px solid rgba(148, 163, 184, 0.18) !important;
  border-radius: 8px !important;
  color: #f8fafc !important;
  min-height: 46px !important;
  padding: 12px 13px !important;
  width: 100%;
}

.command-palette-close {
  align-self: end;
}

.command-palette-list {
  display: grid;
  gap: 6px;
  max-height: min(58vh, 520px);
  overflow: auto;
  padding: 10px;
}

.command-palette-item {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #e5e7eb;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 58px;
  padding: 11px 12px;
  text-decoration: none;
}

.command-palette-item.is-active,
.command-palette-item:hover {
  background: rgba(34, 197, 94, 0.1);
  border-color: rgba(34, 197, 94, 0.34);
}

.command-palette-item span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.command-palette-item strong {
  color: #f8fafc;
  font-size: 14px;
  overflow-wrap: anywhere;
}

.command-palette-item small {
  color: #94a3b8;
  font-size: 12px;
}

.command-palette-item kbd,
.command-palette-item em {
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 999px;
  color: #94a3b8;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  padding: 5px 8px;
}

.command-palette-item em {
  border-color: rgba(34, 197, 94, 0.28);
  color: #86efac;
}

.command-palette-empty {
  color: var(--ui-muted);
  padding: 22px 14px;
  text-align: center;
}

body.light-mode .command-palette {
  background: rgba(15, 23, 42, 0.22);
}

body.light-mode .command-palette-card {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(22, 163, 74, 0.18);
  box-shadow: 0 26px 80px rgba(15, 23, 42, 0.18);
}

body.light-mode .command-palette-head {
  border-bottom-color: rgba(15, 23, 42, 0.1);
}

body.light-mode .command-palette-input {
  background: #ffffff !important;
  color: #0f172a !important;
}

body.light-mode .command-palette-item {
  color: #0f172a;
}

body.light-mode .command-palette-item strong {
  color: #0f172a;
}

body.light-mode .command-palette-item small {
  color: #64748b;
}

html::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(2, 6, 23, 0);
  opacity: 0;
  pointer-events: none;
  transition: opacity 130ms ease, background 130ms ease;
}

html.page-leaving::before {
  background:
    radial-gradient(circle at 50% 42%, rgba(34, 197, 94, 0.14), transparent 260px),
    rgba(2, 6, 23, 0.78);
  opacity: 1;
}

html.page-leaving:has(body.light-mode)::before {
  background:
    radial-gradient(circle at 50% 42%, rgba(22, 163, 74, 0.14), transparent 260px),
    rgba(248, 250, 252, 0.9);
}

.page-loader {
  display: grid;
  inset: 0;
  opacity: 0;
  place-items: center;
  pointer-events: none;
  position: fixed;
  transform: translateY(8px) scale(0.985);
  transition: opacity 160ms ease, transform 180ms ease;
  visibility: hidden;
  z-index: 100001;
}

.page-loader-card {
  align-items: center;
  background: rgba(10, 16, 30, 0.96);
  border: 1px solid rgba(34, 197, 94, 0.28);
  border-radius: 8px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
  color: #e5e7eb;
  display: grid;
  gap: 8px;
  justify-items: center;
  min-width: min(320px, calc(100vw - 42px));
  overflow: hidden;
  padding: 20px 22px 18px;
  position: relative;
}

.page-loader-mark {
  border: 2px solid rgba(34, 197, 94, 0.24);
  border-radius: 999px;
  display: block;
  height: 34px;
  position: relative;
  width: 34px;
}

.page-loader-mark::before,
.page-loader-mark::after {
  border-radius: inherit;
  content: "";
  inset: 5px;
  position: absolute;
}

.page-loader-mark::before {
  animation: dcuoLoaderSpin 0.78s linear infinite;
  border: 2px solid transparent;
  border-top-color: #22c55e;
}

.page-loader-mark::after {
  background: #22c55e;
  box-shadow: 0 0 18px rgba(34, 197, 94, 0.58);
  height: 7px;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: 7px;
}

.page-loader-card strong {
  color: #f8fafc;
  font-size: 15px;
  line-height: 1.1;
}

.page-loader-card small {
  color: #94a3b8;
  font-size: 12px;
  line-height: 1.35;
}

.page-loader-bar {
  background: rgba(148, 163, 184, 0.16);
  border-radius: 999px;
  display: block;
  height: 3px;
  margin-top: 4px;
  overflow: hidden;
  width: 100%;
}

.page-loader-bar::before {
  animation: dcuoLoaderBar 1s ease-in-out infinite;
  background: linear-gradient(90deg, transparent, #22c55e, transparent);
  content: "";
  display: block;
  height: 100%;
  width: 55%;
}

html.page-leaving .page-loader {
  opacity: 1;
  transform: translateY(0) scale(1);
  visibility: visible;
}

html.page-leaving body.light-mode .page-loader-card {
  background: rgba(255, 255, 255, 0.97);
  border-color: rgba(22, 163, 74, 0.22);
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.16);
  color: #0f172a;
}

html.page-leaving body.light-mode .page-loader-card strong {
  color: #0f172a;
}

html.page-leaving body.light-mode .page-loader-card small {
  color: #64748b;
}

@keyframes dcuoLoaderSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes dcuoLoaderBar {
  0% {
    transform: translateX(-110%);
  }
  100% {
    transform: translateX(210%);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }

  .page-loader,
  html::before {
    transition: none !important;
  }
}

html.page-leaving .floating-tools,
html.page-leaving .feedback-modal {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

button,
a,
input,
select,
textarea,
summary {
  -webkit-tap-highlight-color: transparent;
}

button:disabled,
.is-disabled {
  cursor: not-allowed !important;
  opacity: 0.55 !important;
}

[hidden] {
  display: none !important;
}

.navbar,
.sidebar,
.panel,
.zone,
.feat,
.char,
.stat-card,
.hero,
.management-panel,
.summary-card,
.hero-metrics div,
.focus-item {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.zone,
.feat,
.char,
.stat-card,
.management-panel,
.summary-card,
.hero-metrics div,
.focus-item {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18) !important;
}

body.light-mode .zone,
body.light-mode .feat,
body.light-mode .char,
body.light-mode .stat-card,
body.light-mode .management-panel,
body.light-mode .summary-card,
body.light-mode .hero-metrics div,
body.light-mode .focus-item {
  box-shadow: 0 3px 12px rgba(15, 23, 42, 0.07) !important;
}

.zone::before,
.zone::after,
.feat::before,
.stat-card::before,
.sidebar::before {
  display: none !important;
}

.zone,
.feat,
.char {
  content-visibility: auto;
  contain-intrinsic-size: 260px;
}

.zone:hover,
.feat:hover,
.char:hover,
.stat-card:hover,
.quick-btn:hover,
.hero-btn:hover,
.panel button:hover,
.delete-btn:hover,
.nav-btn:hover {
  transform: none !important;
}

.theme-toggle:hover {
  transform: scale(1.04) !important;
}

.nav-links .nav-btn.active,
.nav-theme-toggle .nav-btn.active {
  border-color: rgba(34, 197, 94, 0.48) !important;
  background: rgba(34, 197, 94, 0.16) !important;
  color: #86efac !important;
}

.nav-container {
  gap: 14px;
  max-width: 1480px;
  min-width: 0;
}

.navbar {
  padding: 8px 24px;
}

.nav-links {
  flex: 1 1 auto;
  flex-wrap: nowrap;
  gap: 10px;
  justify-content: center;
  min-width: 0;
}

.nav-brand {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  min-width: 0;
}

.nav-brand img {
  flex: 0 0 auto;
}

.nav-brand span {
  line-height: 1.1;
  white-space: nowrap;
}

.nav-links .nav-btn {
  white-space: nowrap;
}

.nav-theme-toggle {
  flex: 0 0 auto;
  gap: 8px;
}

.nav-btn {
  padding: 9px 15px;
  white-space: nowrap;
}

.nav-brand {
  text-decoration: none;
}

.nav-dropdown,
.nav-tracker {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.nav-dropdown-button,
.nav-tracker-button {
  font: inherit;
  font-weight: 500;
  line-height: normal;
}

.nav-dropdown-menu,
.nav-tracker-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 150;
  display: none;
  min-width: 190px;
  padding: 8px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.98);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.34);
}

.nav-dropdown.is-open .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu,
.nav-dropdown:hover .nav-dropdown-menu,
.nav-tracker.is-open .nav-tracker-menu,
.nav-tracker:focus-within .nav-tracker-menu,
.nav-tracker:hover .nav-tracker-menu {
  display: grid;
  gap: 8px;
}

.nav-dropdown-menu .nav-btn,
.nav-tracker-menu .nav-btn {
  width: 100%;
  text-align: left;
}

.nav-dropdown-button.active,
.nav-dropdown:has(.nav-dropdown-menu a.active) .nav-dropdown-button,
.nav-tracker-button.active,
.nav-tracker:has(.nav-tracker-menu a.active) .nav-tracker-button {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
  border-color: #22c55e;
}

body.light-mode .nav-dropdown-menu,
body.light-mode .nav-tracker-menu {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(15, 23, 42, 0.12);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
}

body.light-mode .nav-links .nav-btn.active,
body.light-mode .nav-theme-toggle .nav-btn.active {
  background: rgba(22, 163, 74, 0.1) !important;
  color: #15803d !important;
}

.account-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  max-width: 220px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(96, 165, 250, 0.34);
  background: rgba(96, 165, 250, 0.1);
  color: #93c5fd;
  font-size: 12px;
  font-weight: 800;
  overflow: hidden;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-chip.is-connected {
  border-color: rgba(34, 197, 94, 0.35);
  background: rgba(34, 197, 94, 0.12);
  color: #86efac;
}

.bonus-nav-badge {
  align-items: center;
  border: 1px solid rgba(245, 158, 11, 0.38);
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.12);
  color: #fcd34d;
  display: inline-flex;
  font-size: 12px;
  font-weight: 900;
  min-height: 38px;
  padding: 8px 12px;
  text-decoration: none;
  text-transform: uppercase;
}

.mobile-bonus-dot {
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.16);
  color: #fcd34d;
  display: inline-flex;
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  margin-left: 4px;
  padding: 3px 5px;
  text-transform: uppercase;
}

.footer-links,
.app-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  color: var(--text-secondary);
  font-size: 13px;
}

.footer-links {
  margin-top: 10px;
}

.footer-links a,
.app-footer a {
  color: #22c55e;
  text-decoration: none;
}

.discord-link {
  border: 1px solid rgba(88, 101, 242, 0.42);
  border-radius: 999px;
  background: rgba(88, 101, 242, 0.14);
  color: #a5b4fc !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  padding: 7px 12px;
}

.hero-btn.discord-link {
  border-radius: 10px;
  min-height: 44px;
  padding: 12px 18px;
}

@media (max-width: 1280px) {
  .navbar {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .nav-container {
    gap: 8px !important;
  }

  .nav-brand {
    font-size: 20px !important;
    letter-spacing: 0 !important;
  }

  .nav-brand img {
    height: 34px !important;
  }

  .nav-brand span,
  .nav-links .nav-btn,
  .nav-theme-toggle .nav-btn {
    white-space: nowrap !important;
  }

  .nav-links {
    gap: 7px !important;
  }

  .nav-btn {
    font-size: 14px !important;
    padding: 8px 11px !important;
  }

  .theme-toggle {
    height: 42px !important;
    width: 42px !important;
  }
}

.discord-redirect {
  align-items: center;
  background: linear-gradient(135deg, #020617, #111827);
  display: flex;
  min-height: 100vh;
  padding: 24px;
}

.discord-card {
  width: min(560px, 100%);
  border: 1px solid rgba(88, 101, 242, 0.34);
  border-radius: 12px;
  background: rgba(10, 16, 30, 0.92);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.32);
  color: #e5e7eb;
  margin: 0 auto;
  padding: 30px;
}

.discord-kicker {
  color: #a5b4fc;
  font-weight: 900;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.discord-card h1 {
  color: #f8fafc;
  font-size: 36px;
  margin-bottom: 12px;
}

.discord-card p {
  color: #cbd5e1;
  line-height: 1.6;
}

.discord-big-button {
  display: inline-flex;
  border: 1px solid rgba(88, 101, 242, 0.42);
  border-radius: 10px;
  background: rgba(88, 101, 242, 0.16);
  color: #c7d2fe;
  font-weight: 900;
  margin-top: 18px;
  padding: 11px 14px;
  text-decoration: none;
}

.floating-tools {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 100010;
  display: grid;
  gap: 10px;
}

.floating-tools a,
.floating-tools button {
  min-width: 46px;
  min-height: 46px;
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 999px;
  background: rgba(10, 16, 30, 0.92);
  color: #86efac;
  cursor: pointer;
  font-size: 13px;
  font-weight: 900;
  padding: 10px 13px;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.26);
}

.mobile-add-button {
  display: none;
}

.scroll-top {
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
}

.scroll-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.save-status {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 100010;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 999px;
  background: rgba(10, 16, 30, 0.92);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
  color: #cbd5e1;
  font-size: 12px;
  font-weight: 900;
  padding: 9px 12px;
  pointer-events: none;
}

.save-status::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #94a3b8;
  margin-right: 7px;
  vertical-align: 1px;
}

.save-status.status-local-saved,
.save-status.status-local-only,
.save-status.status-idle {
  color: #cbd5e1;
}

.save-status.status-local-saved::before,
.save-status.status-local-only::before,
.save-status.status-idle::before {
  background: #94a3b8;
}

.save-status.status-syncing {
  color: #93c5fd;
}

.save-status.status-syncing::before {
  background: #60a5fa;
}

.save-status.status-synced {
  color: #86efac;
}

.save-status.status-synced::before {
  background: #22c55e;
}

.save-status.status-sync-error,
.save-status.status-offline {
  color: #fcd34d;
}

.save-status.status-sync-error::before,
.save-status.status-offline::before {
  background: #f59e0b;
}

.toast-stack {
  position: fixed;
  right: 18px;
  top: 18px;
  z-index: 100030;
  display: grid;
  gap: 10px;
  pointer-events: none;
}

.toast {
  width: min(360px, calc(100vw - 36px));
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 10px;
  background: rgba(10, 16, 30, 0.96);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.28);
  color: #e5e7eb;
  font-size: 13px;
  font-weight: 800;
  opacity: 0;
  padding: 12px 14px;
  transform: translateY(-8px) scale(0.98);
  transition: opacity 160ms ease, transform 180ms ease, border-color 160ms ease;
}

.toast.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.toast-success {
  border-color: rgba(34, 197, 94, 0.32);
  color: #bbf7d0;
}

.toast-warning {
  border-color: rgba(245, 158, 11, 0.34);
  color: #fde68a;
}

.toast-error {
  border-color: rgba(239, 68, 68, 0.34);
  color: #fecaca;
}

.sync-conflict-modal {
  position: fixed;
  inset: 0;
  z-index: 100050;
  display: grid;
  place-items: center;
  background: rgba(2, 6, 23, 0.58);
  padding: 18px;
}

.sync-conflict-card {
  width: min(430px, 100%);
  border: 1px solid rgba(245, 158, 11, 0.32);
  border-radius: 12px;
  background: rgba(10, 16, 30, 0.98);
  box-shadow: 0 22px 64px rgba(0, 0, 0, 0.34);
  color: #e5e7eb;
  padding: 18px;
}

.sync-conflict-card strong {
  display: block;
  color: #fde68a;
  font-size: 18px;
  margin-bottom: 8px;
}

.sync-conflict-card p {
  color: #cbd5e1;
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 16px;
}

.sync-conflict-card div {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.sync-conflict-card button {
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 900;
  padding: 10px 14px;
}

.sync-conflict-card .primary-action {
  background: #f59e0b;
  color: #111827;
}

.sync-conflict-card .secondary-action {
  background: rgba(148, 163, 184, 0.14);
  color: #e5e7eb;
}

.goal-invite-shortcut {
  background: rgba(15, 23, 42, 0.94);
  border: 1px solid rgba(34, 197, 94, 0.34);
  border-radius: 999px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
  color: #bbf7d0;
  font-size: 12px;
  font-weight: 900;
  padding: 10px 13px;
  position: fixed;
  right: 18px;
  text-decoration: none;
  top: 86px;
  z-index: 100020;
}

.floating-discord {
  border-color: rgba(88, 101, 242, 0.45) !important;
  color: #c7d2fe !important;
}

.feedback-open {
  border-color: rgba(245, 158, 11, 0.42) !important;
  color: #fcd34d !important;
}

.network-status {
  position: fixed;
  left: 50%;
  bottom: 22px;
  z-index: 130;
  transform: translate(-50%, 16px);
  border: 1px solid rgba(34, 197, 94, 0.34);
  border-radius: 999px;
  background: rgba(10, 16, 30, 0.94);
  color: #86efac;
  font-size: 13px;
  font-weight: 900;
  opacity: 0;
  padding: 10px 14px;
  pointer-events: none;
}

.offline-banner {
  align-items: center;
  background: rgba(10, 16, 30, 0.96);
  border: 1px solid rgba(245, 158, 11, 0.34);
  border-radius: 8px;
  bottom: 74px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
  color: #e5e7eb;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto;
  left: 18px;
  max-width: min(560px, calc(100vw - 36px));
  padding: 13px 14px;
  position: fixed;
  z-index: 100020;
}

.offline-banner[hidden] {
  display: none !important;
}

.offline-banner strong {
  color: #fde68a;
  display: block;
  font-size: 14px;
  margin-bottom: 3px;
}

.offline-banner span {
  color: #cbd5e1;
  display: block;
  font-size: 12px;
  line-height: 1.45;
}

.offline-banner button {
  border-color: rgba(245, 158, 11, 0.34) !important;
  color: #fde68a !important;
}

.network-status.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.network-status.is-offline {
  border-color: rgba(239, 68, 68, 0.42);
  color: #fca5a5;
}

.site-announcement {
  align-items: center;
  display: flex;
  gap: 14px;
  justify-content: center;
  border-bottom: 1px solid rgba(96, 165, 250, 0.2);
  background: rgba(15, 23, 42, 0.96);
  color: #dbeafe;
  padding: 12px 18px;
  position: sticky;
  top: 0;
  z-index: 160;
}

.site-announcement div {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.site-announcement strong {
  color: #93c5fd;
}

.site-announcement a {
  border: 1px solid rgba(96, 165, 250, 0.35);
  border-radius: 999px;
  color: #bfdbfe;
  font-weight: 900;
  padding: 7px 10px;
  text-decoration: none;
}

.site-announcement button {
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
}

.announcement-success {
  border-bottom-color: rgba(34, 197, 94, 0.28);
}

.announcement-success strong {
  color: #86efac;
}

.announcement-warning {
  border-bottom-color: rgba(245, 158, 11, 0.32);
}

.announcement-warning strong {
  color: #fcd34d;
}

.feedback-modal,
.page-help-modal {
  align-items: center;
  background: rgba(2, 6, 23, 0.72);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 20px;
  position: fixed;
  z-index: 100020;
}

.feedback-modal[hidden] {
  display: none;
}

.page-help-modal[hidden] {
  display: none !important;
}

.feedback-card,
.page-help-card {
  width: min(520px, 100%);
  border: 1px solid rgba(34, 197, 94, 0.24);
  border-radius: 12px;
  background: rgba(10, 16, 30, 0.98);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.34);
  padding: 20px;
}

.feedback-card-head,
.page-help-head {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.feedback-card-head strong,
.page-help-head strong {
  color: #22c55e;
  display: block;
  font-size: 22px;
}

.feedback-card-head span,
.page-help-head span,
.feedback-result {
  color: #94a3b8;
  font-size: 13px;
}

.page-help-close {
  align-items: center;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 10px;
  color: #cbd5e1;
  cursor: pointer;
  display: inline-flex;
  font-size: 18px;
  font-weight: 900;
  height: 38px;
  justify-content: center;
  width: 38px;
}

.page-help-steps {
  display: grid;
  gap: 10px;
  list-style-position: inside;
  margin: 0;
  padding: 0;
}

.page-help-steps li {
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 10px;
  color: #e5e7eb;
  line-height: 1.45;
  padding: 12px;
}

.feedback-close {
  border: 0;
  background: transparent;
  color: #cbd5e1;
  cursor: pointer;
  font-size: 24px;
}

.feedback-card input,
.feedback-card select,
.feedback-card textarea {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.86);
  color: #e5e7eb;
  margin-bottom: 10px;
  padding: 12px 14px;
}

.feedback-card button[type="submit"] {
  width: 100%;
  border: 1px solid rgba(34, 197, 94, 0.32);
  border-radius: 10px;
  background: rgba(34, 197, 94, 0.12);
  color: #86efac;
  cursor: pointer;
  font-weight: 900;
  min-height: 44px;
}

.mobile-tabbar {
  display: none;
}

.mobile-menu-sheet {
  display: none;
}

body.light-mode .floating-tools a,
body.light-mode .floating-tools button,
body.light-mode .network-status,
body.light-mode .feedback-card,
body.light-mode .page-help-card,
body.light-mode .save-status,
body.light-mode .toast {
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
}

body.light-mode .page-help-steps li {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.12);
  color: #1f2937;
}

body.light-mode .page-help-close {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.12);
  color: #334155;
}

body.light-mode .site-announcement {
  background: rgba(255, 255, 255, 0.98);
  color: #334155;
}

body.light-mode .feedback-card input,
body.light-mode .feedback-card select,
body.light-mode .feedback-card textarea {
  background: #ffffff;
  color: #1f2937;
  border-color: rgba(15, 23, 42, 0.12);
}

.app-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 28px;
  padding: 18px 8px 4px;
}

.page-footer {
  max-width: 1180px;
  margin: 0 auto 28px;
  padding: 18px 28px;
}

body.light-mode .app-footer {
  border-top-color: rgba(15, 23, 42, 0.1);
}

body.light-mode .account-chip {
  color: #2563eb;
  background: rgba(37, 99, 235, 0.08);
}

body.light-mode .bonus-nav-badge,
body.light-mode .mobile-bonus-dot {
  background: rgba(245, 158, 11, 0.1);
  color: #b45309;
}

body.light-mode .account-chip.is-connected {
  color: #15803d;
  background: rgba(22, 163, 74, 0.1);
}

body.light-mode .goal-invite-shortcut {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(22, 163, 74, 0.24);
  color: #15803d;
}

html.maintenance-checking {
  background: #020617;
}

html.maintenance-checking body > * {
  visibility: hidden !important;
}

html.maintenance-checking body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  background:
    radial-gradient(circle at 50% 44%, rgba(34, 197, 94, 0.14), transparent 210px),
    linear-gradient(135deg, #020617, #0f172a);
}

html.maintenance-checking body::after {
  content: "DCUO Tracker";
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 10000;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(34, 197, 94, 0.28);
  border-radius: 12px;
  background: rgba(10, 16, 30, 0.9);
  color: #86efac;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0;
  padding: 14px 18px;
}

.maintenance-lock {
  min-height: 100vh;
  overflow-y: auto;
}

.maintenance-screen {
  align-items: flex-start;
  background:
    radial-gradient(circle at 20% 10%, rgba(34, 197, 94, 0.2), transparent 30%),
    radial-gradient(circle at 82% 18%, rgba(96, 165, 250, 0.18), transparent 28%),
    linear-gradient(135deg, #020617, #0f172a 58%, #111827);
  display: flex;
  min-height: 100svh;
  overflow-y: auto;
  padding: clamp(14px, 4vh, 34px) 24px;
}

.maintenance-card {
  width: min(720px, 100%);
  max-height: none;
  border: 1px solid rgba(34, 197, 94, 0.28);
  border-radius: 18px;
  background: rgba(10, 16, 30, 0.88);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.32);
  color: #e5e7eb;
  margin: 0 auto;
  padding: clamp(24px, 5vw, 42px);
  text-align: center;
}

.maintenance-logo {
  display: block;
  width: min(280px, 72%);
  height: auto;
  margin: 0 auto 14px;
}

.maintenance-kicker {
  color: #22c55e;
  font-weight: 900;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.maintenance-card h1 {
  color: #f8fafc;
  font-size: clamp(30px, 5vw, 48px);
  line-height: 1.02;
  margin-bottom: 12px;
}

.maintenance-card p {
  color: #cbd5e1;
  line-height: 1.6;
}

.maintenance-estimate {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.22);
  border-radius: 8px;
  margin-top: 14px;
  padding: 10px 12px;
}

.maintenance-countdown {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0 12px;
}

.maintenance-countdown div {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.72);
  padding: 14px 10px;
}

.maintenance-countdown strong {
  color: #86efac;
  display: block;
  font-size: clamp(28px, 5vw, 44px);
  line-height: 1;
}

.maintenance-countdown span {
  color: #94a3b8;
  display: block;
  font-size: 12px;
  font-weight: 900;
  margin-top: 6px;
  text-transform: uppercase;
}

.maintenance-progress {
  height: 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.9);
  margin: 22px 0 14px;
  overflow: hidden;
}

.maintenance-progress span {
  display: block;
  width: 42%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #22c55e, #60a5fa);
  animation: maintenance-pulse 1.8s ease-in-out infinite alternate;
}

.maintenance-note {
  color: #dbeafe !important;
  font-weight: 700;
}

@keyframes maintenance-pulse {
  from {
    transform: translateX(-18%);
  }
  to {
    transform: translateX(160%);
  }
}

@media (max-width: 560px) {
  .maintenance-countdown {
    grid-template-columns: repeat(2, 1fr);
  }

  .maintenance-card {
    padding: 20px;
  }

  .maintenance-logo {
    width: min(220px, 70%);
  }
}

.create-panel {
  padding: 0 !important;
  overflow: hidden;
}

.create-panel summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 15px 18px;
  color: #22c55e;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.create-panel summary::-webkit-details-marker {
  display: none;
}

.create-panel summary::after {
  content: "+";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid rgba(34, 197, 94, 0.35);
  background: rgba(34, 197, 94, 0.1);
  color: #86efac;
  font-size: 18px;
  line-height: 1;
}

.create-panel[open] summary {
  border-bottom: 1px solid rgba(34, 197, 94, 0.16);
}

.create-panel[open] summary::after {
  content: "-";
}

.create-content {
  padding: 12px 18px 18px;
}

.create-content > :first-child {
  margin-top: 0 !important;
}

.page-guide {
  align-items: center;
  background: rgba(15, 23, 42, 0.42);
  border: 1px solid rgba(34, 197, 94, 0.14);
  border-radius: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
  padding: 12px;
}

.page-guide span {
  align-items: center;
  color: #cbd5e1;
  display: inline-flex;
  font-size: 13px;
  gap: 8px;
  min-height: 30px;
}

.page-guide strong {
  align-items: center;
  background: rgba(34, 197, 94, 0.16);
  border: 1px solid rgba(34, 197, 94, 0.22);
  border-radius: 999px;
  color: #86efac;
  display: inline-flex;
  font-size: 12px;
  height: 24px;
  justify-content: center;
  width: 24px;
}

body.light-mode .page-guide {
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(22, 163, 74, 0.16);
}

body.light-mode .page-guide span {
  color: #334155;
}

.progressive-ui .sidebar {
  gap: 12px !important;
}

.sidebar-search {
  display: grid;
}

.sidebar-section {
  border: 1px solid rgba(34, 197, 94, 0.14);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.32);
  overflow: hidden;
}

.sidebar-section summary {
  align-items: center;
  color: #bbf7d0;
  cursor: pointer;
  display: flex;
  font-size: 13px;
  font-weight: 900;
  justify-content: space-between;
  list-style: none;
  min-height: 42px;
  padding: 11px 12px;
  user-select: none;
}

.sidebar-section summary::-webkit-details-marker {
  display: none;
}

.sidebar-section summary::after {
  content: "+";
  border: 1px solid rgba(34, 197, 94, 0.25);
  border-radius: 8px;
  color: #86efac;
  display: inline-flex;
  font-size: 15px;
  height: 24px;
  justify-content: center;
  line-height: 1;
  align-items: center;
  width: 24px;
}

.sidebar-section[open] summary {
  border-bottom: 1px solid rgba(34, 197, 94, 0.1);
}

.sidebar-section[open] summary::after {
  content: "-";
}

.sidebar-section .menu,
.sidebar-section .user-directory {
  padding: 10px;
}

.card-details {
  background: rgba(15, 23, 42, 0.38);
  border: 1px solid rgba(34, 197, 94, 0.12);
  border-radius: 12px;
  overflow: hidden;
}

.card-details summary {
  align-items: center;
  color: #bbf7d0;
  cursor: pointer;
  display: flex;
  font-size: 13px;
  font-weight: 900;
  justify-content: space-between;
  list-style: none;
  min-height: 42px;
  padding: 11px 12px;
}

.card-details summary::-webkit-details-marker {
  display: none;
}

.card-details summary::after {
  content: "+";
  color: #86efac;
}

.card-details[open] summary {
  border-bottom: 1px solid rgba(34, 197, 94, 0.1);
}

.card-details[open] summary::after {
  content: "-";
}

.card-details-body {
  display: grid;
  gap: 10px;
  padding: 12px;
}

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

body.light-mode .sidebar-section,
body.light-mode .card-details {
  background: rgba(255, 255, 255, 0.78);
  border-color: rgba(22, 163, 74, 0.16);
}

body.light-mode .sidebar-section summary,
body.light-mode .card-details summary {
  color: #15803d;
}

.toolbar-split {
  justify-content: space-between;
  flex-wrap: wrap;
}

.toolbar-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.reset-actions {
  margin-left: auto;
}

.reset-actions button {
  border-color: rgba(96, 165, 250, 0.35) !important;
  background: rgba(96, 165, 250, 0.1) !important;
  color: #93c5fd !important;
}

body.light-mode .create-panel summary::after {
  color: #15803d;
  background: rgba(22, 163, 74, 0.1);
}

body.light-mode .reset-actions button {
  color: #2563eb !important;
  background: rgba(37, 99, 235, 0.08) !important;
}

@media (max-width: 760px) {
  html,
  body {
    height: auto !important;
    min-height: 100%;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body {
    font-size: 15px;
  }

  .navbar {
    position: sticky !important;
    top: 0;
    padding: 10px 12px !important;
  }

  .nav-container {
    align-items: stretch !important;
    flex-direction: column !important;
    gap: 10px;
  }

  .nav-brand {
    font-size: 20px !important;
    text-align: center;
  }

  .nav-links {
    display: none !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px !important;
    width: 100%;
  }

  .nav-btn {
    min-height: 42px;
    padding: 9px 10px !important;
    border-radius: 9px !important;
    font-size: 12px !important;
    text-align: center;
    white-space: normal;
  }

  .nav-theme-toggle {
    justify-content: center;
    flex-wrap: wrap;
  }

  .nav-theme-toggle .home-btn {
    display: none !important;
  }

  .account-chip {
    max-width: 100%;
  }

  .home-btn {
    width: auto !important;
    min-width: 92px;
  }

  .theme-toggle {
    width: 42px !important;
    height: 42px !important;
  }

  .app {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .sidebar {
    width: 100% !important;
    min-width: 0 !important;
    max-height: none !important;
    padding: 16px !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(34, 197, 94, 0.18);
    box-shadow: none !important;
  }

  .sidebar h2 {
    font-size: 20px !important;
  }

  .sidebar input,
  .panel input,
  .panel select,
  .note-field,
  .task-edit-row input,
  .task-edit-row select,
  .account-panel input {
    min-height: 44px;
    font-size: 16px !important;
  }

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

  .menu button {
    min-height: 42px;
    padding: 9px 10px !important;
    text-align: center !important;
    font-size: 12px !important;
  }

  .hint {
    margin-top: 0 !important;
  }

  .main,
  .hub-container,
  .settings-shell,
  .account-shell {
    padding: 16px !important;
    overflow: visible !important;
  }

  .hero {
    padding: 26px 16px !important;
    margin-bottom: 24px !important;
    border-radius: 12px !important;
  }

  .hub-container .hero-content > img {
    display: block !important;
    width: min(100%, 320px) !important;
    max-width: 100% !important;
    height: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .hero-content h1,
  .settings-hero h1,
  .account-hero h1 {
    font-size: 30px !important;
    line-height: 1.1;
  }

  .hero-content p,
  .settings-hero p,
  .account-hero p {
    font-size: 15px !important;
  }

  .hero-metrics,
  .stats-grid,
  .summary-grid,
  .settings-grid,
  .account-grid,
  .management-grid,
  .list {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .hero-buttons {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .hero-btn {
    width: 100%;
    min-height: 46px;
    padding: 12px 16px !important;
  }

  .stat-card {
    align-items: flex-start !important;
    gap: 14px !important;
    padding: 16px !important;
    border-radius: 12px !important;
  }

  .stat-icon {
    width: 48px !important;
    height: 48px !important;
    font-size: 20px !important;
  }

  .stat-number {
    font-size: 30px !important;
  }

  .hub-container .stat-card {
    display: grid !important;
    grid-template-columns: 60px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px !important;
    border-radius: 8px !important;
  }

  .hub-container .stat-icon {
    width: 60px !important;
    height: 60px !important;
    background: transparent !important;
  }

  .hub-container .stat-link {
    align-self: center !important;
    white-space: nowrap !important;
  }

  .panel,
  .zone,
  .feat,
  .char,
  .settings-panel,
  .account-panel,
  .management-panel,
  .summary-card {
    border-radius: 12px !important;
    padding: 16px !important;
  }

  .create-panel {
    padding: 0 !important;
  }

  .create-panel summary {
    min-height: 50px;
    padding: 14px 16px;
  }

  .create-content {
    padding: 12px 16px 16px;
  }

  .toggles,
  .mini-progress,
  .split-actions,
  .counter-row,
  .task-edit-row {
    grid-template-columns: 1fr !important;
  }

  .toggles {
    display: grid !important;
  }

  .row {
    gap: 12px;
    min-height: 44px;
    align-items: center;
  }

  .task-row span:first-child {
    align-items: flex-start !important;
  }

  .card-head {
    align-items: flex-start !important;
    flex-direction: column;
  }

  .pill,
  .priority {
    max-width: 100%;
  }

  .toolbar-split,
  .toolbar,
  .toolbar-group,
  .panel-actions,
  .data-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .reset-actions {
    margin-left: 0;
  }

  .toolbar button,
  .toolbar-group button,
  .panel-actions button,
  .data-actions button,
  .import-btn,
  .account-panel button,
  .settings-panel button,
  .delete-btn {
    width: 100%;
    min-height: 44px;
  }

  .focus-item {
    align-items: flex-start !important;
    flex-direction: column;
  }

  #remote-output {
    max-width: 100%;
    overflow-x: auto;
  }

  .app-footer,
  .footer-links {
    align-items: center;
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }

  .mobile-tabbar {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 140;
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 6px;
    border: 1px solid rgba(34, 197, 94, 0.22);
    border-radius: 14px;
    background: rgba(5, 7, 15, 0.96);
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.34);
    padding: 7px;
  }

  .mobile-tabbar a {
    align-items: center;
    border-radius: 10px;
    color: #94a3b8;
    display: flex;
    font-size: 11px;
    font-weight: 900;
    justify-content: center;
    min-height: 38px;
    text-decoration: none;
  }

  .mobile-tabbar a.active {
    background: rgba(34, 197, 94, 0.16);
    color: #86efac;
  }

  body.light-mode .mobile-tabbar {
    background: rgba(255, 255, 255, 0.96);
    border-color: rgba(15, 23, 42, 0.12);
    box-shadow: 0 16px 44px rgba(15, 23, 42, 0.14);
  }

  body.light-mode .mobile-tabbar a.active {
    color: #15803d;
  }

  .floating-tools {
    right: 12px;
    bottom: 76px;
  }

  .goal-invite-shortcut {
    bottom: 128px;
    right: 12px;
    top: auto;
  }

  .floating-discord {
    display: none !important;
  }

  .site-announcement {
    align-items: stretch;
    flex-direction: column;
    padding: 12px 14px;
    text-align: center;
  }

  .network-status {
    bottom: 82px;
  }

  .offline-banner {
    left: 12px;
    right: 12px;
    bottom: 122px;
    grid-template-columns: 1fr;
    max-width: none;
    padding: 11px 12px;
  }

  .offline-banner button {
    min-height: 36px !important;
    width: 100%;
  }

  .save-status {
    left: 12px;
    bottom: 76px;
    max-width: calc(100vw - 112px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .toast-stack {
    left: 12px;
    right: 12px;
    top: 12px;
  }

  .toast {
    width: 100%;
  }

  body {
    padding-bottom: 74px;
  }
}

@media (max-width: 420px) {
  .nav-links,
  .menu {
    grid-template-columns: 1fr !important;
  }

  .nav-links {
    display: none !important;
  }

  .main,
  .hub-container,
  .settings-shell,
  .account-shell {
    padding: 12px !important;
  }

  .stat-card {
    flex-direction: column;
  }

  .hub-container .stat-card {
    grid-template-columns: 54px minmax(0, 1fr) !important;
  }

  .hub-container .stat-icon {
    width: 54px !important;
    height: 54px !important;
  }

  .hub-container .stat-link {
    grid-column: 2 !important;
    justify-self: start !important;
  }
}

input[type="checkbox"]:checked + label::after {
  animation: none !important;
}

.row input[type="checkbox"]:not(.task-check-input),
input[type="checkbox"] + label::before,
input[type="checkbox"].toggle + label::before,
input[type="checkbox"].toggle + label::after {
  box-shadow: none !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================
   MOBILE REFOCUS
   Last layer: trims the app down on phones without touching desktop.
========================================================= */
@media (max-width: 760px) {
  :root {
    --mobile-page-pad: 12px;
    --mobile-panel-pad: 14px;
  }

  html,
  body {
    width: 100%;
    min-height: 100%;
    overflow-x: hidden !important;
  }

  body {
    background: #05070f !important;
    padding-bottom: calc(82px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.light-mode {
    background: #f6f8fb !important;
  }

  .navbar {
    position: sticky !important;
    top: 0;
    z-index: 120;
    min-height: 58px;
    padding: 8px var(--mobile-page-pad) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22) !important;
  }

  .nav-container {
    align-items: center !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
  }

  .nav-brand {
    justify-content: flex-start !important;
    min-width: 0 !important;
    text-align: left !important;
  }

  .nav-brand img {
    height: 30px !important;
  }

  .nav-brand span {
    max-width: 145px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .nav-links,
  .nav-theme-toggle .home-btn,
  .bonus-nav-badge {
    display: none !important;
  }

  .nav-theme-toggle {
    justify-content: end !important;
    min-width: 0;
  }

  .account-chip {
    max-width: 118px !important;
    min-height: 36px !important;
    padding: 8px 10px !important;
    font-size: 11px !important;
  }

  .theme-toggle {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    font-size: 18px !important;
  }

  .mobile-tabbar {
    left: 8px !important;
    right: 8px !important;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    display: grid !important;
    gap: 6px !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    overflow: visible !important;
    padding: 6px !important;
    border-radius: 16px !important;
    scrollbar-width: auto;
  }

  .mobile-tabbar::-webkit-scrollbar {
    display: none;
  }

  .mobile-tabbar a,
  .mobile-tabbar button {
    align-items: center;
    border: 0;
    border-radius: 11px;
    color: #94a3b8;
    display: grid;
    flex: none;
    font: inherit;
    font-size: 11px !important;
    font-weight: 900;
    justify-items: center;
    min-width: 0;
    min-height: 52px !important;
    padding: 6px 4px;
    text-decoration: none;
    white-space: nowrap;
  }

  .mobile-tabbar button {
    background: transparent;
    cursor: pointer;
  }

  .mobile-tabbar a span,
  .mobile-tabbar button span {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mobile-tabbar .mobile-tab-icon {
    align-items: center;
    background: rgba(148, 163, 184, 0.1);
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 9px;
    display: inline-flex;
    font-size: 15px;
    height: 26px;
    justify-content: center;
    line-height: 1;
    width: 26px;
  }

  .mobile-tabbar .mobile-tab-label {
    font-size: 9px;
    line-height: 1;
  }

  .mobile-tabbar a.active,
  .mobile-tabbar button.active {
    background: rgba(34, 197, 94, 0.16);
    color: #86efac;
  }

  .mobile-tabbar a.active .mobile-tab-icon,
  .mobile-tabbar button.active .mobile-tab-icon {
    background: rgba(34, 197, 94, 0.2);
    border-color: rgba(34, 197, 94, 0.34);
    box-shadow: 0 0 18px rgba(34, 197, 94, 0.14);
  }

  .mobile-tabbar .mobile-menu-open .mobile-tab-icon {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    border-color: rgba(134, 239, 172, 0.45);
    color: #03140a;
  }

  .mobile-menu-sheet {
    align-items: end;
    background: rgba(2, 6, 23, 0.56);
    bottom: 0;
    display: grid;
    left: 0;
    padding: 16px 12px calc(82px + env(safe-area-inset-bottom, 0px));
    position: fixed;
    right: 0;
    top: 0;
    z-index: 139;
  }

  body.mobile-menu-visible {
    overflow: hidden !important;
    touch-action: none;
  }

  .mobile-menu-sheet[hidden] {
    display: none !important;
  }

  .mobile-menu-card {
    background: rgba(7, 12, 24, 0.98);
    border: 1px solid rgba(34, 197, 94, 0.22);
    border-radius: 16px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.42);
    display: grid;
    gap: 10px;
    padding: 12px;
  }

  .mobile-menu-head {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding: 2px 2px 6px;
  }

  .mobile-menu-head strong {
    color: #e5e7eb;
    font-size: 14px;
  }

  .mobile-menu-close {
    align-items: center;
    background: rgba(148, 163, 184, 0.12);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 999px;
    color: #e5e7eb;
    display: flex;
    font-size: 20px;
    font-weight: 900;
    height: 34px;
    justify-content: center;
    width: 34px;
  }

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

  .mobile-menu-group {
    display: grid;
    gap: 8px;
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .mobile-menu-group > span {
    color: #86efac;
    font-size: 11px;
    font-weight: 900;
    grid-column: 1 / -1;
    text-transform: uppercase;
  }

  .mobile-menu-links a {
    align-items: center;
    background: rgba(15, 23, 42, 0.86);
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 11px;
    color: #cbd5e1;
    display: flex;
    font-size: 12px;
    font-weight: 900;
    justify-content: center;
    min-height: 42px;
    padding: 8px;
    text-decoration: none;
  }

  .mobile-menu-links a.active {
    background: rgba(34, 197, 94, 0.16);
    border-color: rgba(34, 197, 94, 0.3);
    color: #86efac;
  }

  body.light-mode .mobile-tabbar a,
  body.light-mode .mobile-tabbar button {
    color: #64748b;
  }

  body.light-mode .mobile-tabbar a.active,
  body.light-mode .mobile-tabbar button.active,
  body.light-mode .mobile-menu-links a.active {
    color: #15803d;
  }

  body.light-mode .mobile-menu-sheet {
    background: rgba(15, 23, 42, 0.34);
  }

  body.light-mode .mobile-menu-card {
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(15, 23, 42, 0.12);
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.16);
  }

  body.light-mode .mobile-menu-head strong {
    color: #0f172a;
  }

  body.light-mode .mobile-menu-close,
  body.light-mode .mobile-menu-links a {
    background: rgba(241, 245, 249, 0.94);
    border-color: rgba(15, 23, 42, 0.1);
    color: #334155;
  }

  .mobile-bonus-dot,
  .page-guide,
  .hint,
  .seo-intro,
  .seo-faq,
  .floating-discord,
  .feedback-open,
  .network-status {
    display: none !important;
  }

  .offline-banner {
    bottom: calc(118px + env(safe-area-inset-bottom, 0px)) !important;
    left: 12px !important;
    right: 12px !important;
    max-width: none !important;
    padding: 10px 11px !important;
  }

  .offline-banner strong {
    font-size: 12px;
  }

  .offline-banner span {
    font-size: 11px;
    line-height: 1.35;
  }

  .mobile-menu-open .mobile-bonus-dot {
    display: inline-flex !important;
  }

  .floating-tools {
    right: 12px !important;
    bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
    gap: 8px !important;
  }

  .floating-tools a,
  .floating-tools button {
    min-width: 42px !important;
    min-height: 42px !important;
    padding: 9px 11px !important;
  }

  .save-status {
    left: 12px !important;
    right: auto !important;
    bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
    max-width: calc(100vw - 78px) !important;
    padding: 8px 10px !important;
    font-size: 11px !important;
  }

  .toast-stack {
    top: 66px !important;
  }

  .app {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .main,
  .hub-container,
  .settings-shell,
  .account-shell,
  .legal-shell {
    width: 100% !important;
    max-width: 100% !important;
    padding: var(--mobile-page-pad) !important;
    overflow: visible !important;
  }

  .sidebar {
    width: 100% !important;
    min-width: 0 !important;
    max-height: none !important;
    gap: 10px !important;
    padding: var(--mobile-page-pad) !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(34, 197, 94, 0.14) !important;
    box-shadow: none !important;
  }

  .sidebar h2 {
    display: none !important;
  }

  .sidebar-search input,
  .sidebar > input,
  .panel input,
  .panel select,
  .panel textarea,
  .account-panel input,
  .settings-panel input,
  .settings-panel select,
  .note-field {
    min-height: 44px !important;
    font-size: 16px !important;
  }

  .sidebar-section {
    border-radius: 10px !important;
    background: rgba(15, 23, 42, 0.48) !important;
  }

  .sidebar-section summary {
    min-height: 40px !important;
    padding: 10px 12px !important;
  }

  .sidebar-section .menu,
  .sidebar-section .user-directory,
  .menu {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    padding: 8px !important;
  }

  .menu button,
  .toolbar button,
  .toolbar-group button,
  .panel-actions button,
  .data-actions button,
  .import-btn,
  .account-panel button,
  .settings-panel button,
  .delete-btn {
    width: 100% !important;
    min-height: 42px !important;
    padding: 10px 12px !important;
    text-align: center !important;
  }

  .hero,
  .settings-hero,
  .account-hero {
    margin: 0 0 12px !important;
    padding: 18px var(--mobile-panel-pad) !important;
    border-radius: 10px !important;
  }

  .hub-container .hero-content > img {
    width: 120px !important;
    margin-bottom: 8px !important;
  }

  .hero-content h1,
  .settings-hero h1,
  .account-hero h1 {
    font-size: 26px !important;
    line-height: 1.08 !important;
    margin-bottom: 8px !important;
  }

  .hero-content p,
  .settings-hero p,
  .account-hero p {
    display: none !important;
  }

  .hero-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin-top: 10px !important;
  }

  .hero-metrics div {
    min-width: 0;
    padding: 9px 6px !important;
  }

  .hero-metrics strong {
    font-size: 20px !important;
  }

  .hero-metrics span {
    font-size: 10px !important;
    line-height: 1.15;
  }

  .weekly-bonus,
  .site-announcement {
    margin: 0 0 12px !important;
    padding: 12px !important;
    border-radius: 10px !important;
  }

  .weekly-bonus {
    gap: 10px !important;
  }

  .weekly-bonus h2 {
    font-size: 18px !important;
  }

  .weekly-bonus p {
    font-size: 13px !important;
  }

  .weekly-bonus-period {
    min-width: 0 !important;
    padding: 10px !important;
    text-align: left !important;
  }

  .stats-section,
  .management-grid,
  .summary-grid,
  .list,
  .account-grid,
  .member-layout,
  .settings-grid {
    gap: 10px !important;
    margin-bottom: 12px !important;
  }

  .stats-section h2,
  .management-panel h2 {
    font-size: 18px !important;
    margin-bottom: 10px !important;
  }

  .summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .summary-card {
    min-width: 0;
    padding: 12px !important;
  }

  .summary-card strong {
    font-size: 22px !important;
  }

  .summary-card span {
    font-size: 10px !important;
  }

  .panel,
  .zone,
  .feat,
  .char,
  .goal,
  .settings-panel,
  .account-panel,
  .management-panel,
  .stat-card {
    border-radius: 10px !important;
    padding: var(--mobile-panel-pad) !important;
  }

  .create-panel {
    padding: 0 !important;
  }

  .create-panel summary {
    min-height: 46px !important;
    padding: 12px 14px !important;
  }

  .create-content {
    padding: 10px 14px 14px !important;
  }

  .list {
    grid-template-columns: 1fr !important;
  }

  .hub-container .stat-card {
    grid-template-columns: 48px minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  .hub-container .stat-icon,
  .stat-icon {
    width: 48px !important;
    height: 48px !important;
    font-size: 22px !important;
  }

  .stat-content h3 {
    font-size: 15px !important;
  }

  .stat-number {
    font-size: 24px !important;
  }

  .stat-label,
  .stat-progress {
    font-size: 11px !important;
  }

  .hub-container .stat-link {
    grid-column: 2 !important;
    justify-self: start !important;
    padding: 7px 9px !important;
  }

  .toolbar,
  .toolbar-split,
  .toolbar-group,
  .panel-actions,
  .data-actions,
  .goal-actions,
  .split-actions,
  .quick-char-actions,
  .field-grid,
  .add-participant,
  .counter-row,
  .task-edit-row {
    align-items: stretch !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .card-head,
  .invitation-card,
  .sync-history-item,
  .feedback-card-head {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  .card-head h3,
  .feat h3,
  .zone h3,
  .char h3 {
    font-size: 16px !important;
    line-height: 1.25 !important;
  }

  .pill,
  .priority,
  .due-badge {
    width: fit-content;
    max-width: 100%;
  }

  .row,
  .participant-row,
  .participant-row:has(.done-check) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
  }

  .participant-row input,
  .done-check,
  .status-pill {
    grid-column: 1 / -1 !important;
    justify-self: stretch !important;
    width: 100% !important;
  }

  .card-details,
  .goal-editor {
    border-radius: 10px !important;
  }

  .card-details summary,
  .goal-editor summary {
    min-height: 40px !important;
    padding: 10px 12px !important;
  }

  .card-details-body {
    padding: 10px !important;
  }

  .account-hero {
    display: block !important;
  }

  .account-hero-card,
  .panel-icon {
    display: none !important;
  }

  .panel-head {
    grid-template-columns: 1fr !important;
  }

  .sync-diagnostics {
    grid-template-columns: 1fr !important;
  }

  .footer-links,
  .app-footer,
  .hub-footer {
    margin-top: 18px !important;
    padding: 16px 8px !important;
  }
}

@media (max-width: 420px) {
  .hero-metrics,
  .summary-grid {
    grid-template-columns: 1fr !important;
  }

  .account-chip {
    max-width: 96px !important;
  }

  .mobile-tabbar a,
  .mobile-tabbar button {
    flex-basis: auto;
    min-width: 0;
    font-size: 10px !important;
  }
}

/* =========================================================
   PLAYER MOBILE MODE
   For the in-game workflow: add item, open item, check item.
========================================================= */
body.player-page .player-top-shortcuts {
  display: none;
}

@media (max-width: 760px) {
  body.player-page .sidebar,
  body.player-page .summary-grid,
  body.player-page .toolbar,
  body.player-page .page-guide,
  body.player-page .app-footer {
    display: none !important;
  }

  body.player-page .main {
    padding: 10px !important;
  }

  body.player-page .player-top-shortcuts {
    display: grid;
    gap: 8px;
    grid-template-columns: 1fr auto;
    margin-bottom: 10px;
  }

  body.player-page .player-settings-shortcut,
  body.player-page .player-census-shortcut {
    align-items: center;
    background: rgba(96, 165, 250, 0.12);
    border: 1px solid rgba(96, 165, 250, 0.24);
    border-radius: 10px;
    color: #bfdbfe;
    display: flex;
    font-size: 13px;
    font-weight: 900;
    justify-content: center;
    min-height: 42px;
    padding: 10px 12px;
    text-decoration: none;
  }

  body.player-page .player-settings-shortcut {
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.28);
    color: #86efac;
    font-size: 12px;
    min-width: 108px;
    padding-inline: 10px;
  }

  body.light-mode.player-page .player-settings-shortcut,
  body.light-mode.player-page .player-census-shortcut {
    background: rgba(37, 99, 235, 0.08);
    border-color: rgba(37, 99, 235, 0.18);
    color: #2563eb;
  }

  body.light-mode.player-page .player-settings-shortcut {
    background: rgba(22, 163, 74, 0.08);
    border-color: rgba(22, 163, 74, 0.2);
    color: #15803d;
  }

  body.player-page .create-panel {
    position: sticky;
    top: 58px;
    z-index: 70;
    margin: -2px 0 10px !important;
    border-color: rgba(34, 197, 94, 0.34) !important;
    background: rgba(7, 12, 24, 0.98) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28) !important;
  }

  body.player-page .create-panel:not([open]) {
    display: none !important;
  }

  body.light-mode.player-page .create-panel {
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12) !important;
  }

  body.player-page .create-panel summary {
    min-height: 48px !important;
    color: #dcfce7 !important;
    font-size: 15px !important;
  }

  body.light-mode.player-page .create-panel summary {
    color: #15803d !important;
  }

  body.player-page .create-content {
    display: grid !important;
    gap: 8px !important;
  }

  body.player-page .create-content input,
  body.player-page .create-content select,
  body.player-page .create-content button {
    margin: 0 !important;
  }

  body.player-page .list {
    gap: 6px !important;
  }

  body.player-page .zone,
  body.player-page .feat,
  body.player-page .char,
  body.player-page .goal {
    border-radius: 8px !important;
    padding: 9px 10px !important;
  }

  body.player-page .card-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 6px !important;
    margin-bottom: 4px !important;
  }

  body.player-page .card-head > div:first-child {
    display: grid !important;
    gap: 5px !important;
    min-width: 0 !important;
  }

  body.player-page .card-head h2,
  body.player-page .card-head h3 {
    font-size: 15px !important;
    line-height: 1.18 !important;
    margin: 0 !important;
  }

  body.player-page .card-head-actions {
    align-items: end !important;
    display: grid !important;
    gap: 4px !important;
    justify-items: end !important;
  }

  body.player-page .pill,
  body.player-page .priority {
    font-size: 10px !important;
    line-height: 1.1 !important;
    padding: 3px 6px !important;
  }

  body.player-page .progress-line {
    font-size: 11px !important;
    margin: 5px 0 4px !important;
  }

  body.player-page .progress-bar {
    height: 5px !important;
    margin-bottom: 6px !important;
  }

  body.player-page .card-details {
    margin-top: 6px !important;
  }

  body.player-page .row {
    gap: 6px !important;
    min-height: 32px !important;
    padding: 4px 0 !important;
  }

  body.player-page .row span,
  body.player-page .meta,
  body.player-page .note,
  body.player-page .hint {
    font-size: 12px !important;
  }

  body.player-personnages .quick-char-actions {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    margin-bottom: 6px !important;
  }

  body.player-personnages .quick-char-actions button {
    min-height: 34px !important;
    padding: 7px !important;
    font-size: 12px !important;
  }

  body.player-personnages .quick-char-actions button:nth-child(3) {
    display: none !important;
  }

  body.player-personnages .mini-progress {
    gap: 6px !important;
    margin-bottom: 6px !important;
  }

  body.player-personnages .card-details:not([open]) {
    background: transparent !important;
  }

  body.player-personnages .card-details summary {
    min-height: 34px !important;
    padding: 7px 9px !important;
  }

  body.player-personnages .card-details summary::before {
    content: "Ouvrir ";
    color: #94a3b8;
    font-weight: 800;
  }

  body.player-personnages .card-details[open] summary::before {
    content: "";
  }

  body.player-page .note-field,
  body.player-page .delete-btn,
  body.player-page .compact-actions {
    margin-top: 6px !important;
  }

  body.player-page .empty-state {
    padding: 18px !important;
  }

  body.player-page .floating-tools {
    display: none !important;
  }

  body.player-page .mobile-add-button {
    align-items: center;
    background: linear-gradient(135deg, #22c55e, #06b6d4);
    border: 0;
    border-radius: 999px;
    bottom: calc(88px + env(safe-area-inset-bottom));
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.34);
    color: #ffffff;
    display: flex;
    font-size: 30px;
    font-weight: 900;
    height: 56px;
    justify-content: center;
    line-height: 1;
    position: fixed;
    right: 16px;
    width: 56px;
    z-index: 180;
  }

  body.player-page .mobile-add-button.is-open {
    background: rgba(15, 23, 42, 0.98);
    border: 1px solid rgba(148, 163, 184, 0.28);
    color: #e5e7eb;
    font-size: 28px;
  }

  body.light-mode.player-page .mobile-add-button.is-open {
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.14);
    color: #0f172a;
  }

  body.player-page .mobile-add-button:active {
    transform: translateY(1px) scale(0.98);
  }

  body.utility-page .page-footer,
  body.utility-page .event-hero p,
  body.utility-page .calculator-hero p,
  body.utility-page .settings-hero p,
  body.utility-page .account-hero p,
  body.utility-page .census-hero p:not(.census-kicker),
  body.utility-page .section-head p,
  body.utility-page .panel-head p,
  body.utility-page .account-hero-card {
    display: none !important;
  }

  body.utility-page .event-shell,
  body.utility-page .calculator-shell,
  body.utility-page .settings-shell,
  body.utility-page .account-shell,
  body.utility-page .census-shell {
    padding: 10px !important;
  }

  body.utility-page .event-hero,
  body.utility-page .calculator-hero,
  body.utility-page .settings-hero,
  body.utility-page .account-hero,
  body.utility-page .census-hero {
    margin: 0 0 10px !important;
    padding: 14px !important;
    border-radius: 10px !important;
  }

  body.utility-page .event-hero h1,
  body.utility-page .calculator-hero h1,
  body.utility-page .settings-hero h1,
  body.utility-page .account-hero h1,
  body.utility-page .census-hero h1 {
    font-size: 25px !important;
    line-height: 1.08 !important;
    margin: 0 !important;
  }

  body.utility-page .event-kicker,
  body.utility-page .calculator-kicker,
  body.utility-page .account-kicker,
  body.utility-page .census-kicker {
    margin-bottom: 7px !important;
  }

  body.utility-page .event-meta {
    display: grid !important;
    gap: 6px !important;
    margin-top: 10px !important;
  }

  body.utility-page .event-grid,
  body.utility-page .calculator-grid,
  body.utility-page .settings-grid,
  body.utility-page .account-grid,
  body.utility-page .member-layout,
  body.utility-page .census-search,
  body.utility-page .summary-row,
  body.utility-page .result-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  body.utility-page .event-panel,
  body.utility-page .calculator-panel,
  body.utility-page .calculator-result,
  body.utility-page .settings-panel,
  body.utility-page .account-panel,
  body.utility-page .census-search,
  body.utility-page .census-options,
  body.utility-page .character-results,
  body.utility-page .feat-results,
  body.utility-page .census-status {
    border-radius: 10px !important;
    padding: 14px !important;
  }

  body.utility-page .event-panel h2,
  body.utility-page .calculator-panel h2,
  body.utility-page .settings-panel h2,
  body.utility-page .account-panel h2,
  body.utility-page .section-head h2 {
    font-size: 18px !important;
    margin-bottom: 10px !important;
  }

  body.utility-page .farm-results,
  body.utility-page .summary-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body.utility-page .farm-results div,
  body.utility-page .summary-row article {
    min-width: 0;
    padding: 10px !important;
  }

  body.utility-page .farm-results strong,
  body.utility-page .summary-row strong {
    font-size: 20px !important;
  }

  body.utility-page .calculator-tabs {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
  }

  body.utility-page .calculator-tabs button,
  body.utility-page .census-search button,
  body.utility-page .panel-actions button,
  body.utility-page .account-panel button,
  body.utility-page .settings-panel button,
  body.utility-page .import-btn {
    min-height: 42px !important;
    width: 100% !important;
  }

  body.utility-page .census-options {
    display: grid !important;
    gap: 8px !important;
  }

  body.utility-page .census-options label,
  body.utility-page .calculator-check {
    min-height: 40px !important;
  }

  body.utility-page .section-head {
    align-items: stretch !important;
    display: grid !important;
    gap: 10px !important;
  }

  body.utility-page .reward-row,
  body.utility-page .participant-row,
  body.utility-page .sync-history-item {
    align-items: stretch !important;
    grid-template-columns: 1fr !important;
  }

  body.utility-page #remote-output {
    max-height: 160px !important;
  }
}

/* Final layout locks after page-specific mobile overrides. */
.nav-container {
  gap: 24px !important;
}

.nav-brand {
  margin-right: 8px !important;
}

.nav-links {
  gap: 12px !important;
  padding-inline: 8px !important;
}

.nav-theme-toggle {
  gap: 10px !important;
  margin-left: 8px !important;
}

.hub-container,
.main,
.page-container,
.settings-shell,
.account-shell,
.legal-page,
.admin-shell,
.event-shell,
.calculator-shell,
.census-shell,
.builds-shell {
  margin-inline: auto !important;
}

@media (min-width: 821px) {
  body:not(.utility-page) .app {
    column-gap: 16px !important;
  }

  body:not(.utility-page) .sidebar {
    margin-right: 0 !important;
  }

  body:not(.utility-page) .main {
    min-width: 0 !important;
  }
}

@media (max-width: 760px) {
  .nav-container {
    gap: 8px !important;
  }

  .nav-brand,
  .nav-theme-toggle {
    margin-inline: 0 !important;
  }

  .nav-links {
    padding-inline: 0 !important;
  }

  .hub-container,
  .main,
  .page-container,
  .settings-shell,
  .account-shell,
  .legal-page,
  .admin-shell,
  .event-shell,
  .calculator-shell,
  .census-shell,
  .builds-shell {
    width: min(100% - 20px, var(--ui-page-max)) !important;
  }

  .mobile-menu-card {
    max-height: min(78vh, 640px);
    overflow: auto;
  }
}

/* =========================================================
   LIGHT THEME CONTRAST
   Shared fixes for readable text and surfaces in light mode.
========================================================= */
body.light-mode {
  color: #0f172a !important;
}

body.light-mode .navbar,
body.light-mode .sidebar,
body.light-mode .main,
body.light-mode .panel,
body.light-mode .hero,
body.light-mode .zone,
body.light-mode .feat,
body.light-mode .char,
body.light-mode .stat-card,
body.light-mode .management-panel,
body.light-mode .summary-card,
body.light-mode .focus-item,
body.light-mode .build-card,
body.light-mode .build-detail,
body.light-mode .build-panel,
body.light-mode .build-editor,
body.light-mode .build-editor-panel,
body.light-mode .my-builds-panel,
body.light-mode .my-build-item,
body.light-mode .build-completion,
body.light-mode .account-panel,
body.light-mode .admin-card,
body.light-mode .event-card,
body.light-mode .calculator-panel,
body.light-mode .calculator-result,
body.light-mode .census-card,
body.light-mode .settings-panel,
body.light-mode .legal-card {
  background: rgba(255, 255, 255, 0.94) !important;
  border-color: rgba(15, 23, 42, 0.14) !important;
  color: #0f172a !important;
}

body.light-mode .main {
  background: rgba(248, 250, 252, 0.76) !important;
}

body.light-mode h1,
body.light-mode h2,
body.light-mode h3,
body.light-mode h4,
body.light-mode strong,
body.light-mode .build-card h2,
body.light-mode .build-detail h2,
body.light-mode .build-panel h3,
body.light-mode .card-head h3,
body.light-mode .sidebar h2 {
  color: #0f172a !important;
}

body.light-mode p,
body.light-mode li,
body.light-mode label,
body.light-mode .hint,
body.light-mode .build-card-footer,
body.light-mode .build-row span,
body.light-mode .my-build-item span,
body.light-mode .builds-section-title p,
body.light-mode .build-pick-card span,
body.light-mode .build-pick-card small,
body.light-mode .build-completion span,
body.light-mode .sidebar-section summary,
body.light-mode .card-details summary {
  color: #475569 !important;
}

body.light-mode .builds-kicker,
body.light-mode .panel h2,
body.light-mode .zone h3,
body.light-mode .feat h3,
body.light-mode .char h3,
body.light-mode .summary-card h3,
body.light-mode .build-completion strong,
body.light-mode .build-picker-group h4,
body.light-mode .nav-dropdown-button.active,
body.light-mode .nav-tracker-button.active {
  color: #15803d !important;
}

body.light-mode input,
body.light-mode select,
body.light-mode textarea,
body.light-mode .sidebar input,
body.light-mode .panel input,
body.light-mode .panel select,
body.light-mode .panel textarea,
body.light-mode .build-editor-panel input,
body.light-mode .build-editor-panel select,
body.light-mode .build-editor-panel textarea,
body.light-mode .builds-filters input,
body.light-mode .builds-filters select,
body.light-mode .census-search input,
body.light-mode .calculator-panel input,
body.light-mode .calculator-panel select,
body.light-mode .settings-panel input,
body.light-mode .account-panel input {
  background: #ffffff !important;
  border-color: rgba(15, 23, 42, 0.18) !important;
  color: #0f172a !important;
}

body.light-mode input::placeholder,
body.light-mode textarea::placeholder {
  color: #64748b !important;
}

body.light-mode .nav-btn,
body.light-mode .menu button,
body.light-mode .user-directory button,
body.light-mode .toolbar button,
body.light-mode .goal button,
body.light-mode .pill,
body.light-mode .priority,
body.light-mode .due-badge,
body.light-mode .build-meta span,
body.light-mode .build-warning-count,
body.light-mode .build-picker-count,
body.light-mode .build-detail-actions a,
body.light-mode .builds-section-head button,
body.light-mode .build-editor-actions button:last-child {
  background: #f8fafc !important;
  border-color: rgba(15, 23, 42, 0.14) !important;
  color: #334155 !important;
}

body.light-mode .nav-btn:hover,
body.light-mode .menu button:hover,
body.light-mode .toolbar button:hover,
body.light-mode .build-detail-actions a:hover {
  background: rgba(22, 163, 74, 0.1) !important;
  border-color: rgba(22, 163, 74, 0.35) !important;
  color: #15803d !important;
}

body.light-mode .nav-links .nav-btn.active,
body.light-mode .nav-theme-toggle .nav-btn.active,
body.light-mode .mobile-tabbar a.active,
body.light-mode .mobile-tabbar button.active,
body.light-mode .mobile-menu-links a.active {
  background: rgba(22, 163, 74, 0.14) !important;
  border-color: rgba(22, 163, 74, 0.34) !important;
  color: #166534 !important;
}

body.light-mode .builds-heading-actions button,
body.light-mode .build-editor-actions button,
body.light-mode .my-build-item button,
body.light-mode .build-detail-actions button,
body.light-mode .builds-filters button,
body.light-mode .panel button[type="submit"],
body.light-mode .calculator-panel button[type="submit"] {
  background: #facc15 !important;
  color: #111827 !important;
}

body.light-mode .my-build-item button:last-child,
body.light-mode .delete-btn,
body.light-mode .danger,
body.light-mode [data-delete-build] {
  background: rgba(220, 38, 38, 0.1) !important;
  border-color: rgba(220, 38, 38, 0.26) !important;
  color: #991b1b !important;
}

body.light-mode .build-pick-card,
body.light-mode .stat-mode-card,
body.light-mode .build-selected-pill,
body.light-mode .build-picker-empty,
body.light-mode .sidebar-section,
body.light-mode .card-details,
body.light-mode .participant-row,
body.light-mode .selected-users-block,
body.light-mode .goal-editor,
body.light-mode .invitation-card,
body.light-mode .note-field,
body.light-mode .note-readonly,
body.light-mode .done-check {
  background: #f8fafc !important;
  border-color: rgba(15, 23, 42, 0.14) !important;
  color: #0f172a !important;
}

body.light-mode .build-pick-card:hover,
body.light-mode .build-pick-card.selected,
body.light-mode .stat-mode-card.selected {
  background: rgba(250, 204, 21, 0.18) !important;
  border-color: rgba(202, 138, 4, 0.42) !important;
}

body.light-mode .build-selected-pill {
  background: rgba(22, 163, 74, 0.1) !important;
  border-color: rgba(22, 163, 74, 0.24) !important;
  color: #166534 !important;
}

body.light-mode .build-warning-count,
body.light-mode .build-picker-empty,
body.light-mode .build-warning-list {
  color: #92400e !important;
}

body.light-mode .build-icon-pair img,
body.light-mode .build-items-preview img,
body.light-mode .build-row img,
body.light-mode .build-pick-card img,
body.light-mode .build-selected-pill img {
  background: #e2e8f0 !important;
}

body.light-mode .build-icon-pair img + img {
  border-color: #ffffff !important;
}

body.light-mode .build-stat-meter,
body.light-mode .build-completion-meter {
  background: #e2e8f0 !important;
}

body.light-mode .mobile-tabbar,
body.light-mode .mobile-menu-card {
  background: rgba(255, 255, 255, 0.98) !important;
  color: #0f172a !important;
}

body.light-mode .mobile-menu-links a,
body.light-mode .mobile-tabbar a,
body.light-mode .mobile-tabbar button {
  background: #f8fafc !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
  color: #334155 !important;
}

body.light-mode .floating-tools a,
body.light-mode .floating-tools button,
body.light-mode .network-status,
body.light-mode .toast,
body.light-mode .save-status {
  color: #0f172a !important;
}

body.light-mode .offline-banner {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(202, 138, 4, 0.28);
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.14);
  color: #0f172a;
}

body.light-mode .offline-banner strong {
  color: #92400e;
}

body.light-mode .offline-banner span {
  color: #475569;
}

/* Global polish pass */
html {
  text-rendering: optimizeLegibility;
}

body {
  scrollbar-color: rgba(34, 197, 94, 0.42) rgba(15, 23, 42, 0.22);
}

button,
a,
input,
select,
textarea,
summary {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid rgba(34, 197, 94, 0.72);
  outline-offset: 3px;
}

.floating-tools a,
.floating-tools button {
  backdrop-filter: blur(14px);
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, opacity 0.16s ease;
}

.floating-tools a:hover,
.floating-tools button:hover {
  border-color: rgba(34, 197, 94, 0.58);
  transform: translateY(-2px);
}

.page-help-open {
  font-size: 18px !important;
}

.page-help-card,
.feedback-card {
  max-height: min(680px, calc(100vh - 40px));
  overflow-y: auto;
}

.page-help-steps li {
  list-style-position: outside;
  margin-left: 20px;
}

.page-guide-card {
  width: min(760px, 100%) !important;
}

.guide-progress {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 2px 0 14px;
}

.guide-progress span {
  background: rgba(148, 163, 184, 0.18);
  border-radius: 999px;
  height: 5px;
}

.guide-progress span.active {
  background: linear-gradient(90deg, #22c55e, #86efac);
}

.page-guide-grid {
  display: grid;
}

.guide-topic-grid {
  display: grid;
  gap: 9px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.guide-topic-button {
  align-items: center;
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 12px;
  color: #f8fafc;
  cursor: pointer;
  display: grid;
  gap: 3px;
  grid-template-columns: 38px minmax(0, 1fr);
  min-height: 68px;
  padding: 10px;
  text-align: left;
}

.guide-topic-button:hover,
.guide-topic-button:focus-visible {
  background: rgba(34, 197, 94, 0.1);
  border-color: rgba(34, 197, 94, 0.5);
}

.guide-topic-button > span {
  align-items: center;
  background: rgba(34, 197, 94, 0.13);
  border-radius: 9px;
  display: inline-flex;
  font-size: 19px;
  grid-row: 1 / 3;
  height: 38px;
  justify-content: center;
  width: 38px;
}

.guide-topic-button strong {
  font-size: 14px;
  line-height: 1.15;
}

.guide-topic-button small {
  color: #94a3b8;
  font-size: 11px;
  line-height: 1.25;
  text-transform: none;
}

.guide-topic-detail {
  display: grid;
  gap: 12px;
}

.guide-topic-detail[hidden] {
  display: none;
}

.guide-topic-points {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.guide-topic-points li {
  align-items: start;
  background: rgba(15, 23, 42, 0.58);
  border: 1px solid rgba(148, 163, 184, 0.13);
  border-radius: 10px;
  color: #cbd5e1;
  display: grid;
  font-size: 13px;
  gap: 8px;
  grid-template-columns: 22px minmax(0, 1fr);
  line-height: 1.4;
  list-style: none;
  padding: 10px;
}

.guide-topic-points li::before {
  color: #86efac;
  content: "✓";
  font-weight: 950;
  text-align: center;
}

body.light-mode .guide-topic-button,
body.light-mode .guide-topic-points li {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(15, 23, 42, 0.12);
  color: #0f172a;
}

body.light-mode .guide-topic-button small,
body.light-mode .guide-topic-points li {
  color: #475569;
}

.page-guide-tile {
  display: none;
  gap: 12px;
}

.page-guide-tile.active {
  display: grid;
}

.page-guide-tile small {
  color: #86efac;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.page-guide-tile > div:first-of-type {
  align-items: center;
  display: flex;
  gap: 10px;
}

.page-guide-icon {
  align-items: center;
  background: rgba(34, 197, 94, 0.14);
  border: 1px solid rgba(34, 197, 94, 0.26);
  border-radius: 10px;
  display: inline-flex;
  height: 40px;
  justify-content: center;
  width: 40px;
}

.page-guide-tile strong {
  color: #f8fafc;
  font-size: 22px;
}

.page-guide-tile > p {
  color: #cbd5e1;
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
}

.page-guide-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.page-guide-badges span {
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.26);
  border-radius: 999px;
  color: #bbf7d0;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  padding: 7px 9px;
}

.page-guide-example {
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.18);
  border-radius: 10px;
  color: #d1fae5 !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  padding: 11px 12px;
}

.page-guide-mini {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 4px;
}

.page-guide-mini article {
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 10px;
  display: grid;
  gap: 6px;
  min-height: 132px;
  padding: 12px;
}

.page-guide-mini article span {
  font-size: 20px;
}

.page-guide-mini article strong {
  color: #bbf7d0;
  font-size: 14px;
}

.page-guide-mini article p {
  color: #94a3b8;
  font-size: 12px;
  line-height: 1.4;
  margin: 0;
}

.page-guide-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 16px;
}

.page-guide-actions button {
  min-height: 44px;
  min-width: 136px;
  padding-inline: 18px;
  white-space: nowrap;
}

.page-guide-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.page-guide-link {
  align-items: center;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  border: 1px solid rgba(134, 239, 172, 0.36);
  border-radius: 10px;
  color: #02130a !important;
  display: inline-flex;
  font-size: 14px;
  font-weight: 950;
  justify-content: center;
  justify-self: start;
  min-height: 42px;
  padding: 0 16px;
  text-decoration: none;
}

.page-guide-link:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.guide-nudge {
  align-items: center;
  background: rgba(10, 16, 30, 0.96);
  border: 1px solid rgba(34, 197, 94, 0.28);
  border-radius: 14px;
  bottom: 18px;
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.34);
  color: #e5e7eb;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto auto;
  left: 18px;
  max-width: min(520px, calc(100vw - 36px));
  padding: 12px;
  position: fixed;
  z-index: 100010;
}

.guide-nudge strong {
  color: #86efac;
  display: block;
  font-size: 14px;
}

.guide-nudge span {
  color: #94a3b8;
  display: block;
  font-size: 12px;
  line-height: 1.35;
  margin-top: 2px;
}

.guide-nudge button {
  background: rgba(34, 197, 94, 0.16);
  border: 1px solid rgba(34, 197, 94, 0.32);
  border-radius: 10px;
  color: #dcfce7;
  cursor: pointer;
  font-weight: 900;
  min-height: 36px;
  padding: 0 12px;
}

.guide-nudge [data-guide-dismiss] {
  align-items: center;
  background: rgba(15, 23, 42, 0.9);
  border-color: rgba(148, 163, 184, 0.2);
  display: inline-flex;
  font-size: 18px;
  justify-content: center;
  padding: 0;
  width: 36px;
}

body.light-mode .page-guide-tile strong {
  color: #0f172a;
}

body.light-mode .page-guide-tile > p,
body.light-mode .page-guide-mini article p,
body.light-mode .guide-nudge span {
  color: #475569;
}

body.light-mode .page-guide-example {
  background: rgba(22, 163, 74, 0.08);
  border-color: rgba(22, 163, 74, 0.2);
  color: #14532d !important;
}

body.light-mode .page-guide-badges span {
  background: rgba(22, 163, 74, 0.1);
  border-color: rgba(22, 163, 74, 0.24);
  color: #166534;
}

body.light-mode .page-guide-mini article,
body.light-mode .guide-nudge {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(15, 23, 42, 0.1);
}

body.light-mode .page-guide-mini article strong,
body.light-mode .guide-nudge strong {
  color: #15803d;
}

.summary-card,
.panel,
.goal,
.char,
.build-card,
.account-panel,
.admin-panel {
  overflow-wrap: anywhere;
}

.empty-state {
  background: rgba(15, 23, 42, 0.34);
}

body.light-mode .empty-state {
  background: rgba(255, 255, 255, 0.72);
  color: #475569;
}

body.light-mode button:focus-visible,
body.light-mode a:focus-visible,
body.light-mode input:focus-visible,
body.light-mode select:focus-visible,
body.light-mode textarea:focus-visible,
body.light-mode summary:focus-visible {
  outline-color: rgba(22, 163, 74, 0.7);
}

/* Mobile refit: keep every page inside the viewport and reduce stacked clutter. */
@media (max-width: 760px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  body {
    padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px));
  }

  .hub-container,
  .main,
  .page-container,
  .settings-shell,
  .account-shell,
  .legal-page,
  .event-shell,
  .calculator-shell,
  .census-shell,
  .builds-shell {
    width: min(100% - 16px, var(--ui-page-max)) !important;
    padding: 12px 0 18px !important;
  }

  .app,
  .layout,
  .content-grid,
  .management-grid,
  .hero-grid,
  .settings-grid,
  .event-grid,
  .calculator-grid,
  .account-grid,
  .member-layout,
  .build-list,
  .build-panel-grid,
  .build-editor-grid,
  .my-builds-list,
  .summary-grid,
  .stats-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  .hero,
  .panel,
  .management-panel,
  .summary-card,
  .stat-card,
  .build-card,
  .build-detail,
  .build-panel,
  .build-editor,
  .build-editor-panel,
  .my-builds-panel,
  .account-panel,
  .event-card,
  .calculator-panel,
  .calculator-result,
  .census-card,
  .settings-panel,
  .legal-card,
  .zone,
  .feat,
  .char,
  .goal {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
    padding: 12px !important;
  }

  .hero,
  .page-header,
  .section-header,
  .builds-heading,
  .build-detail-header,
  .panel-head,
  .card-head {
    gap: 10px !important;
    margin-bottom: 10px !important;
  }

  .hero h1,
  .builds-heading h1,
  .page-title,
  h1 {
    font-size: clamp(1.55rem, 8vw, 2.05rem) !important;
    line-height: 1.1 !important;
  }

  h2 {
    font-size: clamp(1.12rem, 5.8vw, 1.45rem) !important;
    line-height: 1.16 !important;
  }

  h3 {
    font-size: 1rem !important;
    line-height: 1.2 !important;
  }

  .builds-filters,
  .filters,
  .filter-bar,
  .toolbar,
  .controls,
  .panel-actions,
  .hero-actions,
  .builds-heading-actions,
  .build-detail-actions,
  .build-editor-actions,
  .result-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    align-items: stretch !important;
  }

  input,
  select,
  textarea {
    width: 100% !important;
    max-width: 100% !important;
  }

  button,
  .hero-btn,
  .quick-btn,
  .primary-action,
  .secondary-action,
  .danger-action,
  .build-detail-actions a {
    max-width: 100%;
    white-space: normal;
  }

  .build-meta,
  .build-badges,
  .build-tag-list,
  .build-social,
  .event-meta,
  .summary-row,
  .farm-results {
    gap: 6px !important;
  }

  .build-meta span,
  .pill,
  .priority,
  .due-badge,
  .build-warning-count {
    min-height: 26px !important;
    line-height: 1.15 !important;
    padding: 5px 8px !important;
    white-space: normal !important;
  }

  .build-row,
  .reward-row,
  .participant-row,
  .sync-history-item,
  .my-build-item {
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
  }

  .build-row {
    grid-template-columns: auto minmax(0, 1fr) !important;
  }

  pre,
  code,
  table,
  .table-wrap,
  #remote-output,
  .census-status {
    max-width: 100%;
    overflow-x: auto;
  }

  .floating-tools {
    right: 12px;
    bottom: calc(82px + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 760px) {
  .page-help-modal,
  .feedback-modal {
    align-items: flex-end;
    padding: 12px;
    padding-bottom: calc(82px + env(safe-area-inset-bottom, 0px));
  }

  .page-help-card,
  .feedback-card {
    border-radius: 14px;
    max-height: min(640px, calc(100vh - 112px));
    padding: 16px;
  }

  .page-help-head,
  .feedback-card-head {
    gap: 12px;
  }

  .page-help-head strong,
  .feedback-card-head strong {
    font-size: 19px;
  }

  .page-guide-card {
    width: 100% !important;
  }

  .guide-progress {
    margin-bottom: 12px;
  }

  .page-guide-tile {
    gap: 10px;
  }

  .page-guide-icon {
    height: 36px;
    width: 36px;
  }

  .page-guide-tile strong {
    font-size: 18px;
  }

  .page-guide-tile > p {
    font-size: 13px;
  }

  .page-guide-badges {
    gap: 6px;
  }

  .page-guide-badges span {
    font-size: 11px;
    padding: 6px 8px;
  }

  .page-guide-example {
    font-size: 12px !important;
    padding: 10px;
  }

  .page-guide-mini {
    grid-template-columns: 1fr;
  }

  .guide-topic-grid {
    grid-template-columns: 1fr;
  }

  .guide-topic-button {
    min-height: 60px;
    padding: 9px;
  }

  .guide-topic-points li {
    font-size: 12px;
    padding: 9px;
  }

  .page-guide-mini article {
    min-height: 0;
    padding: 10px;
  }

  .page-guide-actions {
    background: linear-gradient(180deg, rgba(10, 16, 30, 0), rgba(10, 16, 30, 0.98) 22%);
    bottom: -16px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-inline: -4px;
    padding: 18px 4px 16px;
    position: sticky;
    z-index: 2;
  }

  .page-guide-actions button {
    min-height: 46px;
    min-width: 0;
    padding-inline: 12px;
  }

  .page-guide-link {
    justify-self: stretch;
    min-height: 44px;
    width: 100%;
  }

  body.light-mode .page-guide-actions {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.98) 22%);
  }

  .guide-nudge {
    bottom: calc(82px + env(safe-area-inset-bottom, 0px));
    grid-template-columns: minmax(0, 1fr) auto;
    left: 10px;
    max-width: calc(100vw - 20px);
    padding: 10px;
    right: 10px;
  }

  .guide-nudge [data-guide-open] {
    grid-column: 1 / -1;
  }

  .guide-nudge [data-guide-dismiss] {
    grid-column: 2;
    grid-row: 1;
  }
}

/* Mobile focus mode: fewer secondary details on small screens. */
@media (max-width: 760px) {
  .hero p,
  .page-header p,
  .section-header p,
  .section-head p,
  .panel-head p,
  .hint,
  .meta,
  .note,
  .card-details summary::before,
  .build-card-footer,
  .builds-section-title p,
  .event-hero p,
  .calculator-hero p,
  .settings-hero p,
  .account-hero p,
  .census-hero p:not(.census-kicker) {
    display: none !important;
  }

  .hero,
  .page-header,
  .section-header,
  .builds-heading,
  .event-hero,
  .calculator-hero,
  .settings-hero,
  .account-hero,
  .census-hero {
    padding: 12px !important;
    margin-bottom: 10px !important;
  }

  .summary-card,
  .stat-card,
  .zone,
  .feat,
  .char,
  .goal,
  .build-card,
  .event-card,
  .calculator-panel,
  .account-panel,
  .settings-panel,
  .census-card {
    box-shadow: none !important;
  }

  .summary-card h3,
  .stat-card h3,
  .zone h3,
  .feat h3,
  .char h3,
  .goal h3,
  .card-head h2,
  .card-head h3 {
    font-size: 15px !important;
  }

  .summary-grid,
  .stats-grid,
  .hero-metrics,
  .farm-results {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .summary-card,
  .stat-card,
  .hero-metrics div,
  .farm-results div {
    min-height: 0 !important;
    padding: 10px !important;
  }

  .summary-card strong,
  .stat-card strong,
  .hero-metrics strong,
  .farm-results strong {
    font-size: 20px !important;
  }

  .toolbar,
  .controls,
  .filters,
  .filter-bar {
    position: sticky;
    top: 8px;
    z-index: 20;
    border: 1px solid var(--ui-border);
    border-radius: 10px;
    background: rgba(7, 12, 24, 0.96);
    padding: 8px !important;
  }

  body.light-mode .toolbar,
  body.light-mode .controls,
  body.light-mode .filters,
  body.light-mode .filter-bar {
    background: rgba(255, 255, 255, 0.96);
  }

  .floating-tools {
    display: none !important;
  }
}

@media (max-width: 420px) {
  .summary-grid,
  .stats-grid,
  .hero-metrics,
  .farm-results {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }

  .summary-card,
  .stat-card,
  .hero-metrics div,
  .farm-results div {
    padding: 8px !important;
  }
}

/* User mobile preferences from Parametres. */
@media (max-width: 760px) {
  body.mobile-density-comfort {
    font-size: 16px;
  }

  body.mobile-density-comfort .hub-container,
  body.mobile-density-comfort .main,
  body.mobile-density-comfort .page-container,
  body.mobile-density-comfort .settings-shell,
  body.mobile-density-comfort .account-shell,
  body.mobile-density-comfort .event-shell,
  body.mobile-density-comfort .calculator-shell,
  body.mobile-density-comfort .census-shell,
  body.mobile-density-comfort .builds-shell {
    width: min(100% - 24px, var(--ui-page-max)) !important;
  }

  body.mobile-density-comfort .hero,
  body.mobile-density-comfort .panel,
  body.mobile-density-comfort .management-panel,
  body.mobile-density-comfort .summary-card,
  body.mobile-density-comfort .stat-card,
  body.mobile-density-comfort .build-card,
  body.mobile-density-comfort .build-detail,
  body.mobile-density-comfort .build-panel,
  body.mobile-density-comfort .build-editor,
  body.mobile-density-comfort .build-editor-panel,
  body.mobile-density-comfort .my-builds-panel,
  body.mobile-density-comfort .account-panel,
  body.mobile-density-comfort .event-card,
  body.mobile-density-comfort .calculator-panel,
  body.mobile-density-comfort .settings-panel,
  body.mobile-density-comfort .census-card,
  body.mobile-density-comfort .zone,
  body.mobile-density-comfort .feat,
  body.mobile-density-comfort .char,
  body.mobile-density-comfort .goal {
    padding: 16px !important;
  }

  body.mobile-density-comfort input,
  body.mobile-density-comfort select,
  body.mobile-density-comfort textarea,
  body.mobile-density-comfort button,
  body.mobile-density-comfort .hero-btn,
  body.mobile-density-comfort .quick-btn {
    min-height: 48px !important;
  }

  body.mobile-density-compact {
    font-size: 14px;
  }

  body.mobile-density-compact .hub-container,
  body.mobile-density-compact .main,
  body.mobile-density-compact .page-container,
  body.mobile-density-compact .settings-shell,
  body.mobile-density-compact .account-shell,
  body.mobile-density-compact .event-shell,
  body.mobile-density-compact .calculator-shell,
  body.mobile-density-compact .census-shell,
  body.mobile-density-compact .builds-shell {
    width: min(100% - 12px, var(--ui-page-max)) !important;
    padding-top: 8px !important;
  }

  body.mobile-density-compact .hero,
  body.mobile-density-compact .panel,
  body.mobile-density-compact .management-panel,
  body.mobile-density-compact .summary-card,
  body.mobile-density-compact .stat-card,
  body.mobile-density-compact .build-card,
  body.mobile-density-compact .build-detail,
  body.mobile-density-compact .build-panel,
  body.mobile-density-compact .build-editor,
  body.mobile-density-compact .build-editor-panel,
  body.mobile-density-compact .my-builds-panel,
  body.mobile-density-compact .account-panel,
  body.mobile-density-compact .event-card,
  body.mobile-density-compact .calculator-panel,
  body.mobile-density-compact .settings-panel,
  body.mobile-density-compact .census-card,
  body.mobile-density-compact .zone,
  body.mobile-density-compact .feat,
  body.mobile-density-compact .char,
  body.mobile-density-compact .goal {
    padding: 9px !important;
  }

  body.mobile-density-compact .hero,
  body.mobile-density-compact .page-header,
  body.mobile-density-compact .section-header,
  body.mobile-density-compact .builds-heading,
  body.mobile-density-compact .event-hero,
  body.mobile-density-compact .calculator-hero,
  body.mobile-density-compact .settings-hero,
  body.mobile-density-compact .account-hero,
  body.mobile-density-compact .census-hero {
    margin-bottom: 8px !important;
  }

  body.mobile-show-secondary .hero p,
  body.mobile-show-secondary .page-header p,
  body.mobile-show-secondary .section-header p,
  body.mobile-show-secondary .section-head p,
  body.mobile-show-secondary .panel-head p,
  body.mobile-show-secondary .hint,
  body.mobile-show-secondary .meta,
  body.mobile-show-secondary .note,
  body.mobile-show-secondary .build-card-footer,
  body.mobile-show-secondary .builds-section-title p,
  body.mobile-show-secondary .event-hero p,
  body.mobile-show-secondary .calculator-hero p,
  body.mobile-show-secondary .settings-hero p,
  body.mobile-show-secondary .account-hero p,
  body.mobile-show-secondary .census-hero p:not(.census-kicker) {
    display: revert !important;
  }

  body.mobile-compact-cards .build-card-footer,
  body.mobile-compact-cards .build-card .build-items-preview,
  body.mobile-compact-cards .goal .note-readonly,
  body.mobile-compact-cards .zone .note,
  body.mobile-compact-cards .feat .note,
  body.mobile-compact-cards .char .note {
    display: none !important;
  }

  body.mobile-compact-cards .build-meta,
  body.mobile-compact-cards .build-badges,
  body.mobile-compact-cards .build-tag-list,
  body.mobile-compact-cards .summary-grid,
  body.mobile-compact-cards .stats-grid {
    gap: 5px !important;
  }

  body.mobile-keep-tools .floating-tools {
    display: grid !important;
  }
}

/* Absolute last safety: page CSS must never reveal hidden panels. */
[hidden] {
  display: none !important;
}

/* =========================================================
   PREMIUM DCUO POLISH
   Final visual pass: calmer surfaces, clearer actions, better hierarchy.
========================================================= */
:root {
  --ui-radius: 8px;
  --ui-card-bg: linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(9, 14, 27, 0.96));
  --ui-card-bg-soft: rgba(15, 23, 42, 0.7);
  --ui-card-border: rgba(148, 163, 184, 0.13);
  --ui-card-border-strong: rgba(34, 197, 94, 0.3);
  --ui-shadow-premium: 0 18px 48px rgba(0, 0, 0, 0.26);
  --ui-shadow-soft: 0 10px 28px rgba(0, 0, 0, 0.18);
  --ui-title: #f8fafc;
  --ui-primary-action: linear-gradient(135deg, #22c55e, #86efac);
  --ui-secondary-action: rgba(15, 23, 42, 0.78);
}

body.light-mode {
  --ui-card-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98));
  --ui-card-bg-soft: rgba(248, 250, 252, 0.86);
  --ui-card-border: rgba(15, 23, 42, 0.1);
  --ui-card-border-strong: rgba(22, 163, 74, 0.24);
  --ui-shadow-premium: 0 18px 42px rgba(15, 23, 42, 0.1);
  --ui-shadow-soft: 0 10px 24px rgba(15, 23, 42, 0.08);
  --ui-title: #0f172a;
  --ui-secondary-action: #ffffff;
}

body {
  background:
    linear-gradient(180deg, rgba(34, 197, 94, 0.08), rgba(34, 197, 94, 0) 270px),
    linear-gradient(135deg, #05070f 0%, #07111d 48%, #05070f 100%) !important;
}

body.light-mode {
  background:
    linear-gradient(180deg, rgba(22, 163, 74, 0.08), rgba(22, 163, 74, 0) 270px),
    linear-gradient(135deg, #f8fafc 0%, #eef2f7 100%) !important;
}

.navbar {
  border-bottom-color: rgba(148, 163, 184, 0.12) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.22) !important;
}

.nav-btn,
.account-chip,
.bonus-nav-badge,
.mobile-tabbar a,
.mobile-tabbar button,
.mobile-menu-links a {
  background: rgba(15, 23, 42, 0.64) !important;
  border-color: rgba(148, 163, 184, 0.12) !important;
  box-shadow: none !important;
  color: #dbeafe !important;
  font-weight: 800 !important;
}

.nav-btn:hover,
.nav-btn:focus-visible,
.account-chip:hover,
.mobile-tabbar a:hover,
.mobile-tabbar button:hover,
.mobile-menu-links a:hover {
  background: rgba(34, 197, 94, 0.12) !important;
  border-color: rgba(34, 197, 94, 0.34) !important;
  color: #bbf7d0 !important;
}

.nav-links .nav-btn.active,
.nav-theme-toggle .nav-btn.active,
.mobile-tabbar a.active,
.mobile-tabbar button.active,
.mobile-menu-links a.active {
  background: rgba(34, 197, 94, 0.16) !important;
  border-color: rgba(34, 197, 94, 0.42) !important;
  color: #86efac !important;
}

body.light-mode .nav-btn,
body.light-mode .account-chip,
body.light-mode .bonus-nav-badge,
body.light-mode .mobile-tabbar a,
body.light-mode .mobile-tabbar button,
body.light-mode .mobile-menu-links a {
  background: rgba(255, 255, 255, 0.88) !important;
  border-color: rgba(15, 23, 42, 0.1) !important;
  color: #334155 !important;
}

.hero,
.panel,
.management-panel,
.dashboard-panel,
.quick-launch,
.seo-intro,
.seo-faq article,
.summary-card,
.stat-card,
.focus-item,
.zone,
.feat,
.char,
.goal,
.build-card,
.build-detail,
.build-panel,
.build-editor,
.build-editor-panel,
.my-builds-panel,
.my-build-item,
.account-panel,
.admin-card,
.event-card,
.calculator-panel,
.calculator-result,
.calculator-info-card,
.catalyst-list-card,
.census-card,
.settings-panel,
.legal-card,
.objective-guide,
.objective-type-card,
.selected-users-block,
.goal-editor,
.invitation-card,
.user-result-card,
.build-pick-card,
.stat-mode-card,
.build-selected-pill,
.sidebar-section,
.card-details {
  background: var(--ui-card-bg) !important;
  border: 1px solid var(--ui-card-border) !important;
  border-radius: var(--ui-radius) !important;
  box-shadow: var(--ui-shadow-soft) !important;
}

.hero,
.build-detail,
.build-editor-panel,
.calculator-hero,
.settings-hero,
.account-hero,
.census-hero,
.event-hero {
  border-color: var(--ui-card-border-strong) !important;
  box-shadow: var(--ui-shadow-premium) !important;
}

.summary-card,
.stat-card,
.focus-item,
.zone,
.feat,
.char,
.goal,
.build-card,
.event-card,
.calculator-panel,
.census-card,
.settings-panel,
.account-panel {
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease !important;
}

.summary-card:hover,
.stat-card:hover,
.focus-item:hover,
.zone:hover,
.feat:hover,
.char:hover,
.goal:hover,
.build-card:hover,
.event-card:hover,
.calculator-panel:hover,
.census-card:hover,
.settings-panel:hover,
.account-panel:hover {
  border-color: rgba(34, 197, 94, 0.34) !important;
  box-shadow: var(--ui-shadow-premium) !important;
}

h1,
h2,
h3,
h4,
.hero-content h1,
.builds-heading h1,
.card-head h3,
.panel h2,
.summary-card h3,
.build-panel h3,
.settings-panel h2,
.calculator-panel h2,
.dashboard-panel h2,
.quick-launch h2 {
  color: var(--ui-title) !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

.hero-kicker,
.panel-kicker,
.builds-kicker,
.summary-card span,
.stat-label,
.field-line > span,
.field-grid label > span,
.numeric-progress-fields label > span,
.mobile-setting-card span,
.home-search span,
.user-search-box > span {
  color: #86efac !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

p,
li,
.hint,
.directory-help,
.goal-editor-help,
.builds-section-title p,
.build-card-footer,
.my-build-item span,
.calculator-hero p,
.settings-hero p,
.account-hero p,
.census-hero p,
.objective-guide span,
.objective-type-card span,
.quick-launch-card span,
.action-card span,
.home-search-results span,
.today-row span,
.search-empty {
  color: var(--ui-muted) !important;
}

button,
.hero-btn,
.quick-btn,
.primary-action,
.builds-heading-actions button,
.build-editor-actions button,
.my-build-item button,
.build-detail-actions button,
.builds-filters button,
.panel button,
.toolbar button,
.menu button,
.goal button,
.settings-panel button,
.panel-actions button,
.calculator-inline-actions button,
.panel-headline button,
.inventory-save-mode button,
.census-search button,
.data-actions button,
.import-btn {
  align-items: center !important;
  border: 1px solid rgba(34, 197, 94, 0.22) !important;
  border-radius: var(--ui-radius) !important;
  display: inline-flex !important;
  justify-content: center !important;
  min-height: 42px !important;
  box-shadow: none !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
}

.hero-btn:not(.secondary),
.primary-action,
.builds-heading-actions button,
.build-editor-actions button:first-child,
.panel button[type="submit"],
.calculator-panel button[type="submit"],
.data-actions button:first-child {
  background: var(--ui-primary-action) !important;
  border-color: transparent !important;
  color: #022c22 !important;
}

.hero-btn.secondary,
.quick-btn,
.build-editor-actions button,
.my-build-item button,
.build-detail-actions button,
.builds-filters button,
.panel button,
.toolbar button,
.menu button,
.goal button,
.settings-panel button,
.panel-actions button,
.calculator-inline-actions button,
.panel-headline button,
.inventory-save-mode button,
.census-search button {
  background: var(--ui-secondary-action) !important;
  color: #dcfce7 !important;
}

button:hover,
.hero-btn:hover,
.quick-btn:hover,
.primary-action:hover,
.build-detail-actions a:hover {
  border-color: rgba(34, 197, 94, 0.42) !important;
  filter: brightness(1.05);
}

.delete-btn,
.danger,
[data-delete-build],
.my-build-item button:last-child {
  background: rgba(239, 68, 68, 0.1) !important;
  border-color: rgba(239, 68, 68, 0.24) !important;
  color: #fca5a5 !important;
}

input,
select,
textarea,
.home-search input,
.build-editor-panel input,
.build-editor-panel select,
.build-editor-panel textarea,
.calculator-panel input,
.calculator-panel select,
.settings-panel input,
.settings-panel select,
.account-panel input,
.sidebar input,
.panel input,
.panel select,
.panel textarea {
  background: rgba(2, 6, 23, 0.42) !important;
  border-color: rgba(148, 163, 184, 0.14) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
  color: #e5e7eb !important;
}

.pill,
.priority,
.due-badge,
.visibility-badge,
.build-meta span,
.build-warning-count,
.build-picker-count,
.build-badges span,
.seo-tags span,
.build-tag-list button,
.status-pill,
.selected-users button {
  background: rgba(15, 23, 42, 0.62) !important;
  border-color: rgba(148, 163, 184, 0.14) !important;
  border-radius: 999px !important;
  color: #cbd5e1 !important;
}

.pill,
.build-badges span:first-child,
.visibility-open,
.selected-users button,
.status-pill {
  border-color: rgba(34, 197, 94, 0.32) !important;
  color: #bbf7d0 !important;
}

.empty-state,
.build-empty-smart,
.build-picker-empty,
.focus-empty,
.search-empty {
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.72), rgba(2, 6, 23, 0.42)) !important;
  border: 1px dashed rgba(34, 197, 94, 0.24) !important;
  border-radius: var(--ui-radius) !important;
  color: #cbd5e1 !important;
  box-shadow: none !important;
  padding: clamp(16px, 3vw, 28px) !important;
}

.empty-state::first-line,
.build-empty-smart strong {
  color: #f8fafc !important;
  font-weight: 900 !important;
}

.toolbar,
.controls,
.filters,
.filter-bar,
.builds-filters,
.build-quickbar,
.calculator-tabs,
.build-chip-group,
.panel-actions,
.builds-heading-actions,
.build-editor-actions,
.goal-actions {
  gap: 10px !important;
}

.toolbar,
.controls,
.filters,
.filter-bar,
.builds-filters,
.build-quickbar {
  background: rgba(2, 6, 23, 0.28) !important;
  border: 1px solid rgba(148, 163, 184, 0.1) !important;
  border-radius: var(--ui-radius) !important;
  padding: 10px !important;
}

.progress-bar,
.build-stat-meter,
.build-completion-meter {
  background: rgba(148, 163, 184, 0.14) !important;
}

.progress-bar span,
.build-stat-meter span,
.build-completion-meter span {
  background: linear-gradient(90deg, #22c55e, #86efac) !important;
}

body.light-mode button,
body.light-mode .hero-btn.secondary,
body.light-mode .quick-btn,
body.light-mode .build-editor-actions button,
body.light-mode .my-build-item button,
body.light-mode .build-detail-actions button,
body.light-mode .builds-filters button,
body.light-mode .panel button,
body.light-mode .toolbar button,
body.light-mode .menu button,
body.light-mode .goal button,
body.light-mode .settings-panel button,
body.light-mode .panel-actions button,
body.light-mode .calculator-inline-actions button,
body.light-mode .panel-headline button,
body.light-mode .inventory-save-mode button,
body.light-mode .census-search button {
  background: #ffffff !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
  color: #166534 !important;
}

body.light-mode input,
body.light-mode select,
body.light-mode textarea,
body.light-mode .home-search input,
body.light-mode .build-editor-panel input,
body.light-mode .build-editor-panel select,
body.light-mode .build-editor-panel textarea,
body.light-mode .calculator-panel input,
body.light-mode .calculator-panel select,
body.light-mode .settings-panel input,
body.light-mode .settings-panel select,
body.light-mode .account-panel input,
body.light-mode .sidebar input,
body.light-mode .panel input,
body.light-mode .panel select,
body.light-mode .panel textarea {
  background: #ffffff !important;
  border-color: rgba(15, 23, 42, 0.14) !important;
  color: #0f172a !important;
}

body.light-mode .pill,
body.light-mode .priority,
body.light-mode .due-badge,
body.light-mode .visibility-badge,
body.light-mode .build-meta span,
body.light-mode .build-warning-count,
body.light-mode .build-picker-count,
body.light-mode .build-badges span,
body.light-mode .seo-tags span,
body.light-mode .build-tag-list button,
body.light-mode .status-pill,
body.light-mode .selected-users button {
  background: #f8fafc !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
  color: #334155 !important;
}

body.light-mode .empty-state,
body.light-mode .build-empty-smart,
body.light-mode .build-picker-empty,
body.light-mode .focus-empty,
body.light-mode .search-empty {
  background: #ffffff !important;
  border-color: rgba(22, 163, 74, 0.22) !important;
  color: #475569 !important;
}

@media (max-width: 760px) {
  .hero,
  .panel,
  .management-panel,
  .dashboard-panel,
  .quick-launch,
  .summary-card,
  .stat-card,
  .focus-item,
  .zone,
  .feat,
  .char,
  .goal,
  .build-card,
  .build-detail,
  .build-panel,
  .build-editor-panel,
  .my-builds-panel,
  .account-panel,
  .event-card,
  .calculator-panel,
  .calculator-result,
  .census-card,
  .settings-panel {
    box-shadow: none !important;
  }

  .toolbar,
  .controls,
  .filters,
  .filter-bar,
  .builds-filters,
  .build-quickbar {
    padding: 8px !important;
  }

  button,
  .hero-btn,
  .quick-btn,
  .primary-action {
    min-height: 44px !important;
  }
}

/* =========================================================
   GLOBAL UX SYSTEM
   Auto-applied by global-ui.js for coherent headers, actions and empty states.
========================================================= */
.ui-page-heading,
.builds-heading,
.calculator-hero,
.settings-hero,
.account-hero,
.census-hero,
.event-hero {
  align-items: start !important;
  display: grid !important;
  gap: 12px !important;
}

.ui-page-heading:not(.hero):not(.calculator-hero):not(.settings-hero):not(.account-hero):not(.census-hero):not(.event-hero):not(.builds-heading) {
  margin-bottom: 14px !important;
}

.ui-page-heading > div:first-child,
.builds-heading > div:first-child,
.panel-title-row > div:first-child,
.section-title-row > div:first-child {
  min-width: 0 !important;
}

.ui-page-heading h1,
.ui-page-heading h2,
.ui-page-heading h3 {
  margin-bottom: 0 !important;
}

.ui-page-heading p,
.ui-page-heading span:not(.pill):not(.priority):not(.due-badge):not(.visibility-badge) {
  max-width: 760px;
}

.ui-heading-actions,
.hero-actions,
.builds-heading-actions,
.panel-actions,
.result-actions {
  align-items: center !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  justify-content: flex-start !important;
}

.ui-action {
  position: relative;
  text-decoration: none !important;
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, filter 0.16s ease !important;
}

.ui-action-primary {
  background: var(--ui-primary-action) !important;
  border-color: transparent !important;
  color: #022c22 !important;
}

.ui-action-secondary {
  background: rgba(15, 23, 42, 0.74) !important;
  border-color: rgba(148, 163, 184, 0.14) !important;
  color: #dcfce7 !important;
}

.ui-action-ghost {
  background: transparent !important;
  border-color: rgba(148, 163, 184, 0.16) !important;
  color: #cbd5e1 !important;
}

.ui-action-danger {
  background: rgba(239, 68, 68, 0.1) !important;
  border-color: rgba(239, 68, 68, 0.28) !important;
  color: #fecaca !important;
}

.ui-action-primary:hover,
.ui-action-secondary:hover,
.ui-action-ghost:hover {
  border-color: rgba(34, 197, 94, 0.44) !important;
}

.ui-action-danger:hover {
  border-color: rgba(239, 68, 68, 0.42) !important;
}

.ui-empty-state {
  align-content: center !important;
  display: grid !important;
  gap: 8px !important;
  justify-items: start !important;
  min-height: 118px !important;
  text-align: left !important;
}

.ui-empty-state::before {
  background: linear-gradient(135deg, #22c55e, #86efac);
  border-radius: 999px;
  box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.08);
  content: "";
  height: 9px;
  width: 9px;
}

.ui-empty-title {
  color: #f8fafc !important;
  display: block;
  font-size: 18px;
  line-height: 1.2;
}

.ui-empty-body {
  color: var(--ui-muted) !important;
  display: block;
  line-height: 1.5;
  max-width: 58ch;
}

.ui-loading-pill {
  align-items: center;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.54);
  color: #cbd5e1 !important;
  display: inline-flex;
  gap: 8px;
  min-height: 32px;
  padding: 6px 11px;
}

.ui-loading-pill::before {
  animation: dcuoPulse 0.9s ease-in-out infinite, dcuoLoaderGlow 1.6s ease-in-out infinite;
  background: var(--route-accent, #22c55e);
  border-radius: 999px;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.26);
  content: "";
  height: 8px;
  width: 8px;
}

.ui-loading-pill::after {
  animation: dcuoLoadingDots 1.2s steps(4, end) infinite;
  content: "";
  min-width: 18px;
  text-align: left;
}

@keyframes dcuoPulse {
  0%, 100% {
    opacity: 0.35;
    transform: scale(0.85);
  }
  50% {
    opacity: 1;
    transform: scale(1.18);
  }
}

@keyframes dcuoLoaderGlow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.24);
  }
  50% {
    box-shadow: 0 0 0 7px rgba(34, 197, 94, 0);
  }
}

@keyframes dcuoLoadingDots {
  0% {
    content: "";
  }
  25% {
    content: ".";
  }
  50% {
    content: "..";
  }
  75%, 100% {
    content: "...";
  }
}

body.light-mode .ui-action-secondary {
  background: #ffffff !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
  color: #166534 !important;
}

body.light-mode .ui-action-ghost {
  color: #334155 !important;
}

body.light-mode .ui-empty-title {
  color: #0f172a !important;
}

body.light-mode .ui-empty-state::before {
  box-shadow: 0 0 0 6px rgba(22, 163, 74, 0.1);
}

body.light-mode .ui-loading-pill {
  background: rgba(255, 255, 255, 0.86);
  border-color: rgba(15, 23, 42, 0.1);
  color: #334155 !important;
}

/* =========================================================
   SKELETON LOADERS
   First paint placeholders for data-heavy pages.
========================================================= */
.ui-skeleton-host {
  min-height: 84px;
}

.ui-skeleton-wrap {
  display: grid;
  gap: 10px;
  width: 100%;
}

.ui-skeleton-summary {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
}

.ui-skeleton-builds,
.ui-skeleton-cards,
.ui-skeleton-action,
.ui-skeleton-list,
.ui-skeleton-rows,
.ui-skeleton-search {
  grid-template-columns: 1fr;
}

.ui-skeleton-card,
.ui-skeleton-row {
  background: rgba(15, 23, 42, 0.62);
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}

.ui-skeleton-card {
  display: grid;
  gap: 10px;
  min-height: 112px;
  padding: 14px;
}

.ui-skeleton-row {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 58px;
  padding: 12px;
}

.ui-skeleton-build-card {
  align-items: center;
  grid-template-columns: auto minmax(0, 1fr);
  min-height: 128px;
}

.ui-skeleton-summary-card {
  min-height: 92px;
}

.ui-skeleton-action-card {
  min-height: 74px;
}

.ui-skeleton-line,
.ui-skeleton-dot,
.ui-skeleton-avatar,
.ui-skeleton-pill {
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent),
    rgba(148, 163, 184, 0.16);
  background-size: 220% 100%, 100% 100%;
  border-radius: 999px;
  display: block;
  overflow: hidden;
  position: relative;
  animation: dcuoSkeletonShimmer 1.25s ease-in-out infinite;
}

.ui-skeleton-title {
  height: 15px;
  width: min(72%, 320px);
}

.ui-skeleton-text {
  height: 11px;
  width: min(56%, 260px);
}

.ui-skeleton-wide {
  width: min(86%, 420px);
}

.ui-skeleton-kicker {
  height: 9px;
  width: 48px;
}

.ui-skeleton-number {
  height: 28px;
  width: 74px;
}

.ui-skeleton-short {
  height: 10px;
  width: 96px;
}

.ui-skeleton-dot {
  height: 10px;
  width: 10px;
}

.ui-skeleton-avatar {
  border-radius: 8px;
  height: 54px;
  width: 54px;
}

.ui-skeleton-pill {
  height: 22px;
  width: 76px;
}

.ui-skeleton-stack {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.ui-skeleton-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

body.light-mode .ui-skeleton-card,
body.light-mode .ui-skeleton-row {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(15, 23, 42, 0.1);
}

body.light-mode .ui-skeleton-line,
body.light-mode .ui-skeleton-dot,
body.light-mode .ui-skeleton-avatar,
body.light-mode .ui-skeleton-pill {
  background:
    linear-gradient(90deg, transparent, rgba(15, 23, 42, 0.06), transparent),
    rgba(15, 23, 42, 0.08);
}

@keyframes dcuoSkeletonShimmer {
  0% {
    background-position: 180% 0, 0 0;
  }
  100% {
    background-position: -80% 0, 0 0;
  }
}

@media (max-width: 760px) {
  .ui-skeleton-wrap {
    gap: 8px;
  }

  .ui-skeleton-card {
    min-height: 88px;
    padding: 10px;
  }

  .ui-skeleton-row {
    min-height: 48px;
    padding: 9px;
  }

  .ui-skeleton-build-card {
    min-height: 102px;
  }

  .ui-skeleton-avatar {
    height: 44px;
    width: 44px;
  }
}

@media (min-width: 761px) {
  .builds-heading,
  .hero .hero-content,
  .calculator-hero,
  .settings-hero,
  .account-hero,
  .census-hero,
  .event-hero {
    gap: 16px !important;
  }

  .builds-heading {
    align-items: center !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
  }
}

@media (max-width: 760px) {
  .ui-heading-actions,
  .hero-actions,
  .builds-heading-actions,
  .panel-actions,
  .result-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
  }

  .ui-action,
  .hero-btn,
  .quick-btn {
    width: 100% !important;
  }

  .ui-empty-state {
    min-height: 96px !important;
    padding: 14px !important;
  }

  .ui-empty-title {
    font-size: 16px;
  }
}

/* =========================================================
   APP MODERNIZATION PASS
   Route accents, forms, filters and small controls.
========================================================= */
body.route-builds { --route-accent: #22c55e; --route-accent-soft: rgba(34, 197, 94, 0.12); }
body.route-goals { --route-accent: #14b8a6; --route-accent-soft: rgba(20, 184, 166, 0.12); }
body.route-calculator { --route-accent: #facc15; --route-accent-soft: rgba(250, 204, 21, 0.12); }
body.route-census { --route-accent: #60a5fa; --route-accent-soft: rgba(96, 165, 250, 0.12); }
body.route-chars { --route-accent: #a78bfa; --route-accent-soft: rgba(167, 139, 250, 0.12); }
body.route-zones { --route-accent: #34d399; --route-accent-soft: rgba(52, 211, 153, 0.12); }

body.route-builds .builds-heading-actions button,
body.route-builds .build-editor-actions button:first-child,
body.route-builds .builds-section-head button {
  background: #22c55e !important;
  border-color: rgba(34, 197, 94, 0.42) !important;
  color: #04130a !important;
}

body.route-builds .builds-filters button,
body.route-builds .build-detail-actions button,
body.route-builds .build-editor-actions button,
body.route-builds .my-build-item button {
  background: rgba(34, 197, 94, 0.14) !important;
  border: 1px solid rgba(34, 197, 94, 0.28) !important;
  color: #f8fafc !important;
}

body.light-mode.route-builds .builds-filters button,
body.light-mode.route-builds .build-detail-actions button,
body.light-mode.route-builds .build-editor-actions button,
body.light-mode.route-builds .my-build-item button {
  background: #ecfdf5 !important;
  border-color: #86efac !important;
  color: #166534 !important;
}
body.route-feats { --route-accent: #f59e0b; --route-accent-soft: rgba(245, 158, 11, 0.12); }
body.route-settings { --route-accent: #22c55e; --route-accent-soft: rgba(34, 197, 94, 0.12); }

body[class*="route-"] .hero,
body[class*="route-"] .builds-heading,
body[class*="route-"] .calculator-hero,
body[class*="route-"] .settings-hero,
body[class*="route-"] .account-hero,
body[class*="route-"] .census-hero,
body[class*="route-"] .event-hero {
  position: relative;
  overflow: hidden;
}

body[class*="route-"] .hero::after,
body[class*="route-"] .builds-heading::after,
body[class*="route-"] .calculator-hero::after,
body[class*="route-"] .settings-hero::after,
body[class*="route-"] .account-hero::after,
body[class*="route-"] .census-hero::after,
body[class*="route-"] .event-hero::after {
  background: linear-gradient(90deg, var(--route-accent, #22c55e), transparent);
  bottom: 0;
  content: "";
  height: 2px;
  left: 0;
  opacity: 0.8;
  position: absolute;
  right: 0;
}

.ui-field {
  align-content: start;
  display: grid !important;
  gap: 7px !important;
  min-width: 0;
}

.ui-field > span:first-child,
.ui-field > strong:first-child {
  color: #86efac !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 0.04em !important;
  line-height: 1.2;
  text-transform: uppercase !important;
}

.ui-field input,
.ui-field select,
.ui-field textarea {
  margin: 0 !important;
}

.ui-field small {
  color: var(--ui-muted) !important;
  line-height: 1.45;
}

.ui-form-group {
  min-width: 0;
}

.builds-filters.ui-form-group,
.field-grid.ui-form-group,
.calculator-grid.ui-form-group,
.settings-grid.ui-form-group,
.account-grid.ui-form-group {
  align-items: end !important;
}

.ui-icon-button {
  aspect-ratio: 1 / 1;
  border-radius: 8px !important;
  font-size: 18px !important;
  min-height: 36px !important;
  min-width: 36px !important;
  padding: 0 !important;
  width: 36px !important;
}

.ui-icon-button:hover {
  background: var(--route-accent-soft, rgba(34, 197, 94, 0.12)) !important;
  border-color: var(--route-accent, rgba(34, 197, 94, 0.4)) !important;
}

.toolbar,
.controls,
.filters,
.filter-bar,
.builds-filters,
.build-quickbar,
.calculator-tabs {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

.build-chip-group,
.calculator-tabs {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
}

.build-chip-group button,
.calculator-tabs button,
.toolbar button,
.menu button {
  min-height: 38px !important;
}

.build-chip-group button.active,
.calculator-tabs button.active,
.build-view-toggle.active,
.objective-type-card.is-active,
.stat-mode-card.selected,
.build-pick-card.selected {
  background: var(--route-accent-soft, rgba(34, 197, 94, 0.14)) !important;
  border-color: color-mix(in srgb, var(--route-accent, #22c55e) 58%, transparent) !important;
}

.panel,
.build-panel,
.calculator-panel,
.settings-panel,
.account-panel,
.goal-editor,
.sidebar-section {
  position: relative;
}

.panel > summary,
.goal-editor summary,
.sidebar-section summary,
.card-details summary {
  border-radius: 8px;
  min-height: 36px;
  padding-inline: 2px;
}

.panel > summary:hover,
.goal-editor summary:hover,
.sidebar-section summary:hover,
.card-details summary:hover {
  color: var(--route-accent, #86efac) !important;
}

.summary-grid,
.stats-grid,
.build-list,
.quick-launch-grid,
.dashboard-grid,
.list {
  align-items: stretch !important;
}

.summary-card,
.stat-card {
  min-height: 98px;
}

.summary-card strong,
.stat-card strong,
.hero-metrics strong {
  color: var(--route-accent, #22c55e) !important;
}

body.light-mode .ui-field > span:first-child,
body.light-mode .ui-field > strong:first-child {
  color: #15803d !important;
}

body.light-mode .ui-icon-button:hover {
  background: var(--route-accent-soft, rgba(22, 163, 74, 0.1)) !important;
}

@media (max-width: 760px) {
  .builds-filters.ui-form-group,
  .field-grid.ui-form-group,
  .calculator-grid.ui-form-group,
  .settings-grid.ui-form-group,
  .account-grid.ui-form-group {
    align-items: stretch !important;
  }

  .ui-field {
    gap: 6px !important;
  }

  .ui-icon-button {
    min-height: 40px !important;
    width: 40px !important;
  }

  .summary-card,
  .stat-card {
    min-height: 0;
  }
}

/* Floating tools: one shape language for every shortcut. */
.floating-tools {
  justify-items: end;
}

.floating-tools a,
.floating-tools button,
.floating-tools .ui-icon-button {
  align-items: center !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  height: 44px !important;
  justify-content: center !important;
  line-height: 1 !important;
  min-height: 44px !important;
  min-width: 86px !important;
  padding: 0 14px !important;
  text-align: center !important;
  width: 86px !important;
}

.floating-tools .page-help-open,
.floating-tools .scroll-top {
  font-size: 18px !important;
}

.floating-tools .scroll-top {
  width: 86px !important;
}

@media (max-width: 760px) {
  .floating-tools a,
  .floating-tools button,
  .floating-tools .ui-icon-button {
    height: 42px !important;
    min-height: 42px !important;
    min-width: 76px !important;
    width: 76px !important;
  }

  .floating-tools .global-search-open {
    font-size: 11px !important;
  }

  .command-palette {
    align-items: start;
    padding: 10px;
  }

  .command-palette-card {
    margin-top: 64px;
  }

  .command-palette-head {
    padding: 11px;
  }

  .command-palette-input {
    min-height: 42px !important;
  }

  .command-palette-list {
    max-height: calc(100vh - 190px);
    padding: 8px;
  }

  .command-palette-item {
    min-height: 52px;
    padding: 10px;
  }
}

/* Personnages: keep task completion controls compact, even after global form polish. */
body.player-personnages .task-row {
  align-items: center !important;
  display: grid !important;
  gap: 10px !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  min-height: 38px !important;
  padding: 6px 0 !important;
}

body.player-personnages .task-row > span:first-child {
  align-items: center !important;
  display: inline-flex !important;
  gap: 8px !important;
  min-width: 0 !important;
}

body.player-personnages .task-check-input {
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  width: 1px !important;
}

body.player-personnages .task-check {
  align-items: center !important;
  aspect-ratio: auto !important;
  border: 1px solid rgba(148, 163, 184, 0.34) !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  height: 24px !important;
  justify-content: center !important;
  line-height: 1 !important;
  min-height: 24px !important;
  min-width: 24px !important;
  padding: 0 7px !important;
  width: auto !important;
}

body.player-personnages .task-check::before {
  background: rgba(148, 163, 184, 0.55) !important;
  border-radius: 999px !important;
  content: "" !important;
  height: 7px !important;
  width: 7px !important;
}

body.player-personnages .task-check-input:checked + .task-check {
  background: rgba(34, 197, 94, 0.13) !important;
  border-color: rgba(34, 197, 94, 0.42) !important;
  color: #bbf7d0 !important;
  min-width: 52px !important;
}

body.player-personnages .task-check-input:checked + .task-check::before {
  background: #22c55e !important;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.12) !important;
  margin-right: 6px !important;
}

body.player-personnages .card-details-body {
  display: grid !important;
  gap: 8px !important;
}

@media (max-width: 760px) {
  body.player-personnages .task-row {
    min-height: 34px !important;
    padding: 5px 0 !important;
  }
}

/* =========================================================
   MOBILE COMFORT PASS
   Final pass: denser cards, lighter filters, less vertical waste.
========================================================= */
@media (max-width: 760px) {
  :root {
    --mobile-page-pad: 10px;
    --mobile-panel-pad: 11px;
  }

  .hub-container,
  .main,
  .page-container,
  .settings-shell,
  .account-shell,
  .legal-page,
  .event-shell,
  .calculator-shell,
  .census-shell,
  .builds-shell {
    width: min(100% - 14px, var(--ui-page-max)) !important;
    padding-top: 10px !important;
  }

  .hero,
  .builds-heading,
  .event-hero,
  .calculator-hero,
  .settings-hero,
  .account-hero,
  .census-hero {
    padding: 11px !important;
    margin-bottom: 9px !important;
  }

  .hero h1,
  .builds-heading h1,
  .event-hero h1,
  .calculator-hero h1,
  .settings-hero h1,
  .account-hero h1,
  .census-hero h1 {
    font-size: clamp(1.35rem, 7vw, 1.85rem) !important;
    line-height: 1.08 !important;
  }

  .summary-grid,
  .stats-grid,
  .hero-metrics {
    gap: 7px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    margin-bottom: 9px !important;
  }

  .summary-card,
  .stat-card,
  .hero-metrics div {
    border-radius: 8px !important;
    min-height: 0 !important;
    padding: 8px !important;
  }

  .summary-card strong,
  .stat-card strong,
  .hero-metrics strong {
    font-size: 18px !important;
    line-height: 1.05 !important;
  }

  .summary-card span,
  .stat-card span,
  .hero-metrics span {
    font-size: 10px !important;
    line-height: 1.2 !important;
  }

  .toolbar,
  .toolbar-split,
  .toolbar-group,
  .controls,
  .filters,
  .filter-bar,
  .builds-filters,
  .build-quickbar,
  .calculator-tabs {
    border-radius: 8px !important;
    gap: 6px !important;
    margin-bottom: 9px !important;
    padding: 7px !important;
  }

  .toolbar button,
  .toolbar-group button,
  .builds-filters button,
  .build-chip-group button,
  .calculator-tabs button,
  .menu button {
    font-size: 12px !important;
    min-height: 34px !important;
    padding: 7px 9px !important;
  }

  input,
  select,
  textarea,
  .ui-field input,
  .ui-field select,
  .ui-field textarea {
    min-height: 38px !important;
    padding: 9px 10px !important;
  }

  .panel,
  .management-panel,
  .build-card,
  .build-detail,
  .build-panel,
  .build-editor,
  .build-editor-panel,
  .my-builds-panel,
  .account-panel,
  .event-card,
  .calculator-panel,
  .calculator-result,
  .census-card,
  .settings-panel,
  .zone,
  .feat,
  .char,
  .goal {
    border-radius: 8px !important;
    padding: 10px !important;
  }

  .card-head,
  .build-card-top,
  .build-detail-header,
  .panel-head,
  .builds-section-head {
    gap: 8px !important;
    margin-bottom: 8px !important;
  }

  .pill,
  .priority,
  .due-badge,
  .visibility-badge,
  .build-meta span,
  .build-badges span,
  .status-pill {
    font-size: 10px !important;
    min-height: 22px !important;
    padding: 4px 7px !important;
  }

  .progress-line {
    font-size: 11px !important;
    margin: 6px 0 5px !important;
  }

  .progress-bar {
    height: 7px !important;
    margin-bottom: 8px !important;
  }

  .empty-state,
  .ui-empty-state,
  .build-empty-smart,
  .build-picker-empty {
    min-height: 78px !important;
    padding: 12px !important;
  }

  .ui-empty-title {
    font-size: 15px !important;
  }

  .ui-empty-body {
    font-size: 12px !important;
  }

  .app-footer,
  .footer-links {
    font-size: 11px !important;
    gap: 8px !important;
    padding-bottom: 8px !important;
  }
}

@media (max-width: 760px) {
  body.player-personnages .char {
    display: grid !important;
    gap: 8px !important;
  }

  body.player-personnages .quick-char-actions {
    gap: 6px !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    margin-bottom: 6px !important;
  }

  body.player-personnages .quick-char-actions button {
    font-size: 10px !important;
    min-height: 32px !important;
    padding: 6px !important;
  }

  body.player-personnages .mini-progress {
    gap: 7px !important;
    margin-bottom: 6px !important;
  }

  body.player-personnages .task-row {
    gap: 8px !important;
    min-height: 30px !important;
    padding: 3px 0 !important;
  }

  body.player-personnages .cadence-badge {
    font-size: 9px !important;
    min-width: 38px !important;
    padding: 3px 6px !important;
  }

  body.player-personnages .task-check {
    height: 22px !important;
    min-height: 22px !important;
    min-width: 22px !important;
  }

  body.player-personnages .task-check-input:checked + .task-check {
    min-width: 48px !important;
  }

  body.player-personnages .note-field {
    min-height: 56px !important;
  }
}

@media (max-width: 760px) {
  .build-card {
    gap: 8px !important;
  }

  .build-card h2 {
    font-size: 16px !important;
    line-height: 1.15 !important;
  }

  .build-card-footer,
  .build-card .build-items-preview,
  .build-card .build-tag-list {
    margin-top: 4px !important;
  }

  .build-social-button {
    min-height: 34px !important;
    padding: 6px 8px !important;
  }

  .builds-filters label {
    gap: 5px !important;
  }

  .build-quickbar {
    position: static !important;
  }
}

@media (max-width: 760px) {
  body.player-objectifs .goal {
    gap: 10px !important;
  }

  body.player-objectifs .goal-editor {
    padding: 9px !important;
  }

  body.player-objectifs .goal-editor[open] {
    gap: 9px !important;
  }

  body.player-objectifs .participant-row {
    min-height: 44px !important;
    padding: 8px !important;
  }

  body.player-objectifs .goal-meta {
    gap: 5px !important;
  }

  body.player-objectifs .goal-actions {
    gap: 7px !important;
  }
}

@media (max-width: 420px) {
  .summary-grid,
  .stats-grid,
  .hero-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .summary-card strong,
  .stat-card strong,
  .hero-metrics strong {
    font-size: 16px !important;
  }

  body.player-personnages .quick-char-actions button {
    font-size: 9px !important;
  }
}

/* =========================================================
   UNIFIED COLOR SYSTEM
   Final pass: one modern DCUO green interaction language across pages.
========================================================= */
:root,
body[class*="route-"] {
  --route-accent: #22c55e;
  --route-accent-soft: rgba(34, 197, 94, 0.12);
  --ui-interactive: #22c55e;
  --ui-interactive-strong: #86efac;
  --ui-interactive-soft: rgba(34, 197, 94, 0.12);
  --ui-interactive-border: rgba(34, 197, 94, 0.36);
}

body.light-mode,
body.light-mode[class*="route-"] {
  --route-accent: #16a34a;
  --route-accent-soft: rgba(22, 163, 74, 0.1);
  --ui-interactive: #16a34a;
  --ui-interactive-strong: #166534;
  --ui-interactive-soft: rgba(22, 163, 74, 0.1);
  --ui-interactive-border: rgba(22, 163, 74, 0.3);
}

a:not(.discord-link):not(.floating-discord):not(.command-palette-item):not(.nav-btn):not(.hero-btn),
.app-footer a:not(.discord-link),
.footer-links a:not(.discord-link),
.stat-link,
.sidebar-action,
.census-link {
  color: var(--ui-interactive-strong) !important;
}

a:not(.discord-link):not(.floating-discord):not(.command-palette-item):not(.nav-btn):not(.hero-btn):hover,
.app-footer a:not(.discord-link):hover,
.footer-links a:not(.discord-link):hover,
.stat-link:hover,
.sidebar-action:hover,
.census-link:hover {
  border-color: var(--ui-interactive-border) !important;
  color: var(--ui-interactive-strong) !important;
}

.nav-btn:hover,
.nav-btn:focus-visible,
.nav-links .nav-btn.active,
.nav-theme-toggle .nav-btn.active,
.mobile-tabbar a:hover,
.mobile-tabbar button:hover,
.mobile-tabbar a.active,
.mobile-tabbar button.active,
.mobile-menu-links a:hover,
.mobile-menu-links a.active,
.nav-dropdown-button.active,
.nav-dropdown:has(.nav-dropdown-menu a.active) .nav-dropdown-button,
.nav-tracker-button.active,
.nav-tracker:has(.nav-tracker-menu a.active) .nav-tracker-button {
  background: var(--ui-interactive-soft) !important;
  border-color: var(--ui-interactive-border) !important;
  color: var(--ui-interactive-strong) !important;
}

button:not(.delete-btn):not(.danger):not(.danger-action):not(.feedback-open):not(.floating-discord):hover,
.ui-action-secondary:hover,
.ui-action-ghost:hover,
.hero-btn.secondary:hover,
.quick-btn:hover,
.toolbar button:hover,
.menu button:hover,
.build-chip-group button:hover,
.calculator-tabs button:hover,
.build-view-toggle:hover,
.objective-type-card:hover,
.stat-mode-card:hover,
.build-pick-card:hover {
  background: var(--ui-interactive-soft) !important;
  border-color: var(--ui-interactive-border) !important;
  color: var(--ui-interactive-strong) !important;
}

.build-chip-group button.active,
.calculator-tabs button.active,
.build-view-toggle.active,
.objective-type-card.is-active,
.stat-mode-card.selected,
.build-pick-card.selected,
.menu button.active,
.toolbar button.active {
  background: var(--ui-interactive-soft) !important;
  border-color: var(--ui-interactive-border) !important;
  color: var(--ui-interactive-strong) !important;
}

.hero-kicker,
.panel-kicker,
.builds-kicker,
.calculator-kicker,
.event-kicker,
.ui-field > span:first-child,
.ui-field > strong:first-child,
.summary-card strong,
.stat-card strong,
.hero-metrics strong,
.command-card span,
.management-panel h2,
.stats-section h2,
.quick-launch h2,
.seo-intro h2,
.seo-faq h2,
.card-head h2,
.panel-head h2,
.builds-section-head h2 {
  color: var(--ui-interactive-strong) !important;
}

.summary-card:hover,
.stat-card:hover,
.focus-item:hover,
.zone:hover,
.feat:hover,
.char:hover,
.goal:hover,
.build-card:hover,
.event-card:hover,
.calculator-panel:hover,
.calculator-result:hover,
.census-card:hover,
.settings-panel:hover,
.account-panel:hover,
.quick-launch-card:hover,
.home-search-results a:hover,
.action-card:hover,
.today-row:hover {
  background: var(--ui-interactive-soft) !important;
  border-color: var(--ui-interactive-border) !important;
}

body[class*="route-"] .hero::after,
body[class*="route-"] .builds-heading::after,
body[class*="route-"] .calculator-hero::after,
body[class*="route-"] .settings-hero::after,
body[class*="route-"] .account-hero::after,
body[class*="route-"] .census-hero::after,
body[class*="route-"] .event-hero::after {
  background: linear-gradient(90deg, var(--ui-interactive), transparent) !important;
}

.progress-fill,
.mini-progress-fill,
.bar-fill {
  background: linear-gradient(90deg, #22c55e, #86efac) !important;
}

body.light-mode .progress-fill,
body.light-mode .mini-progress-fill,
body.light-mode .bar-fill {
  background: linear-gradient(90deg, #16a34a, #22c55e) !important;
}

.discord-link,
.floating-discord {
  border-color: rgba(88, 101, 242, 0.42) !important;
  color: #c7d2fe !important;
}

.feedback-open {
  border-color: rgba(245, 158, 11, 0.34) !important;
  color: #fde68a !important;
}

/* =========================================================
   MOBILE NAV FINISHING TOUCHES
   Keeps the brand readable and the theme button compact.
========================================================= */
@media (max-width: 760px) {
  .nav-container {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  .nav-brand {
    gap: 6px !important;
    min-width: 0 !important;
  }

  .nav-brand img {
    height: 30px !important;
  }

  .nav-brand span {
    font-size: 15px !important;
    letter-spacing: 0 !important;
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }

  .nav-theme-toggle {
    gap: 5px !important;
  }

  .theme-toggle {
    font-size: 15px !important;
    height: 34px !important;
    min-height: 34px !important;
    min-width: 34px !important;
    padding: 0 !important;
    width: 34px !important;
  }
}

@media (max-width: 420px) {
  .nav-brand img {
    height: 28px !important;
  }

  .nav-brand span {
    font-size: 14px !important;
  }

  .theme-toggle {
    font-size: 14px !important;
    height: 32px !important;
    min-height: 32px !important;
    min-width: 32px !important;
    width: 32px !important;
  }
}

/* =========================================================
   TRACKER PAGES: CLEAN MAIN VIEW + ADD MODAL
   Zones, feats and characters keep their hidden filter state,
   but the visible workflow is focused on the list and add modal.
========================================================= */
body.player-zones .sidebar,
body.player-feats .sidebar,
body.player-personnages .sidebar {
  display: none !important;
}

body.player-zones .app,
body.player-feats .app,
body.player-personnages .app {
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

body.player-zones .main,
body.player-feats .main,
body.player-personnages .main {
  margin: 0 auto !important;
  max-width: min(1560px, calc(100vw - 72px)) !important;
  overflow: visible !important;
  padding-inline: clamp(18px, 2.2vw, 36px) !important;
  width: 100% !important;
}

body.player-zones,
body.player-feats,
body.player-personnages {
  height: auto !important;
  min-height: 100vh !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body.player-zones .page-guide,
body.player-feats .page-guide,
body.player-personnages .page-guide {
  display: none !important;
}

body.player-zones .toolbar,
body.player-feats .toolbar,
body.player-personnages .toolbar {
  display: none !important;
}

.tracker-actionbar {
  align-items: end;
  background: rgba(10, 16, 30, 0.72);
  border: 1px solid rgba(34, 197, 94, 0.16);
  border-radius: 12px;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(260px, 1fr) minmax(150px, 190px) auto;
  margin: 0 auto 14px;
  max-width: 1120px;
  padding: 12px;
}

.tracker-actionbar-zones,
.tracker-actionbar-feats {
  grid-template-columns: minmax(260px, 1fr) minmax(150px, 190px) auto;
}

body.player-zones .summary-grid,
body.player-feats .summary-grid,
body.player-personnages .summary-grid {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
  margin-inline: auto !important;
  max-width: 100% !important;
}

body.player-zones .summary-card,
body.player-feats .summary-card,
body.player-personnages .summary-card {
  min-height: 92px !important;
  padding: 16px !important;
}

body.player-zones .list,
body.player-feats .list,
body.player-personnages .list {
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)) !important;
}

@media (min-width: 1500px) {
  body.player-zones .list,
  body.player-feats .list,
  body.player-personnages .list {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

.tracker-actionbar label {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.tracker-actionbar label span {
  color: #86efac;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tracker-actionbar input,
.tracker-actionbar select,
.tracker-actionbar button {
  min-height: 38px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 9px;
  background: rgba(15, 23, 42, 0.8);
  color: #f8fafc;
  font: inherit;
  font-weight: 800;
  padding: 0 11px;
}

.tracker-actionbar select.has-custom-sort {
  border-color: rgba(250, 204, 21, 0.46) !important;
  color: #fde68a !important;
}

.tracker-results-count {
  align-self: center;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 900;
  justify-self: end;
  white-space: nowrap;
}

body.light-mode .tracker-actionbar {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(15, 23, 42, 0.1);
}

body.light-mode .tracker-actionbar input,
body.light-mode .tracker-actionbar select,
body.light-mode .tracker-actionbar button {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.12);
  color: #0f172a;
}

body.light-mode .tracker-results-count {
  color: #64748b;
}

body.player-zones .create-panel,
body.player-feats .create-panel,
body.player-personnages .create-panel {
  border-radius: 10px !important;
  margin: 0 0 14px !important;
}

body.player-zones .create-panel:not([open]),
body.player-feats .create-panel:not([open]),
body.player-personnages .create-panel:not([open]) {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  display: flex !important;
  justify-content: flex-end;
  overflow: visible;
}

body.player-zones .create-panel:not([open]) summary,
body.player-feats .create-panel:not([open]) summary,
body.player-personnages .create-panel:not([open]) summary {
  background: rgba(34, 197, 94, 0.14) !important;
  border: 1px solid rgba(34, 197, 94, 0.34) !important;
  border-radius: 999px !important;
  min-height: 40px !important;
  padding: 8px 14px !important;
  width: auto !important;
}

body.player-zones .create-panel[open],
body.player-feats .create-panel[open],
body.player-personnages .create-panel[open] {
  align-content: start !important;
  align-items: center !important;
  background: rgba(2, 6, 23, 0.74) !important;
  backdrop-filter: blur(12px);
  border: 0 !important;
  border-radius: 0 !important;
  bottom: 0 !important;
  box-shadow: none !important;
  display: grid !important;
  grid-template-columns: minmax(0, 440px) !important;
  grid-template-rows: auto auto !important;
  justify-content: center !important;
  justify-items: center !important;
  left: 0 !important;
  margin: 0 !important;
  overflow-y: auto !important;
  padding: 86px 14px 18px !important;
  position: fixed !important;
  right: 0 !important;
  top: 0 !important;
  z-index: 260 !important;
  row-gap: 0 !important;
}

body.tracker-create-open {
  overflow: hidden !important;
}

body.player-zones .create-panel[open] summary,
body.player-feats .create-panel[open] summary,
body.player-personnages .create-panel[open] summary,
body.player-zones .create-panel[open] .create-content,
body.player-feats .create-panel[open] .create-content,
body.player-personnages .create-panel[open] .create-content {
  background: rgba(10, 16, 30, 0.98) !important;
  border-color: rgba(34, 197, 94, 0.24) !important;
  box-sizing: border-box !important;
  max-width: 440px !important;
  min-width: 0 !important;
  width: min(100%, 440px) !important;
}

body.player-zones .create-panel[open] summary,
body.player-feats .create-panel[open] summary,
body.player-personnages .create-panel[open] summary {
  align-items: center !important;
  border: 1px solid rgba(34, 197, 94, 0.24) !important;
  border-bottom: 0 !important;
  border-radius: 14px 14px 0 0 !important;
  display: flex !important;
  justify-content: space-between !important;
  min-height: 48px !important;
  padding: 14px 16px !important;
}

body.player-zones .create-panel[open] summary::after,
body.player-feats .create-panel[open] summary::after,
body.player-personnages .create-panel[open] summary::after {
  content: "×" !important;
}

body.player-zones .create-panel[open] .create-content,
body.player-feats .create-panel[open] .create-content,
body.player-personnages .create-panel[open] .create-content {
  border: 1px solid rgba(34, 197, 94, 0.24) !important;
  border-radius: 0 0 14px 14px !important;
  display: grid !important;
  gap: 10px !important;
  padding: 14px 16px 16px !important;
}

body.player-zones .create-panel[open] input,
body.player-zones .create-panel[open] select,
body.player-zones .create-panel[open] button,
body.player-feats .create-panel[open] input,
body.player-feats .create-panel[open] select,
body.player-feats .create-panel[open] button,
body.player-personnages .create-panel[open] input,
body.player-personnages .create-panel[open] select,
body.player-personnages .create-panel[open] button {
  margin: 0 !important;
  width: 100% !important;
}

body.light-mode.player-zones .create-panel[open],
body.light-mode.player-feats .create-panel[open],
body.light-mode.player-personnages .create-panel[open] {
  background: rgba(15, 23, 42, 0.32) !important;
}

body.light-mode.player-zones .create-panel[open] summary,
body.light-mode.player-feats .create-panel[open] summary,
body.light-mode.player-personnages .create-panel[open] summary,
body.light-mode.player-zones .create-panel[open] .create-content,
body.light-mode.player-feats .create-panel[open] .create-content,
body.light-mode.player-personnages .create-panel[open] .create-content {
  background: rgba(255, 255, 255, 0.98) !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
}

@media (max-width: 760px) {
  body.player-zones .main,
  body.player-feats .main,
  body.player-personnages .main {
    padding: 10px !important;
  }

  .tracker-actionbar {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px;
    margin-bottom: 10px;
    padding: 8px;
    position: sticky;
    top: 58px;
    z-index: 90;
  }

  .tracker-actionbar label span {
    display: none;
  }

  .tracker-search-control {
    grid-column: 1;
  }

  .tracker-sort-control,
  .tracker-results-count {
    grid-column: 1 / -1;
  }

  .tracker-results-count {
    justify-self: start;
    margin-left: 2px;
  }

  .tracker-actionbar input,
  .tracker-actionbar select,
  .tracker-actionbar button {
    font-size: 12px;
    min-height: 36px;
    padding-inline: 10px;
  }

  body.player-zones .create-panel:not([open]),
  body.player-feats .create-panel:not([open]),
  body.player-personnages .create-panel:not([open]) {
    display: none !important;
  }

  body.player-zones .create-panel[open],
  body.player-feats .create-panel[open],
  body.player-personnages .create-panel[open] {
    align-items: stretch !important;
    height: 100vh !important;
    height: 100dvh !important;
    padding: max(12px, env(safe-area-inset-top)) 10px 14px !important;
  }

  body.player-zones .create-panel[open] summary,
  body.player-feats .create-panel[open] summary,
  body.player-personnages .create-panel[open] summary,
  body.player-zones .create-panel[open] .create-content,
  body.player-feats .create-panel[open] .create-content,
  body.player-personnages .create-panel[open] .create-content {
    max-width: none !important;
    width: 100% !important;
  }
}

/* =========================================================
   TRACKER MOBILE FINAL POLISH
========================================================= */
@media (max-width: 760px) {
  body.player-zones,
  body.player-feats,
  body.player-personnages {
    padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.player-zones .main,
  body.player-feats .main,
  body.player-personnages .main {
    padding-inline: 8px !important;
  }

  body.player-zones .tracker-actionbar,
  body.player-feats .tracker-actionbar,
  body.player-personnages .tracker-actionbar {
    display: none !important;
  }

  .tracker-actionbar {
    background: rgba(7, 12, 24, 0.96) !important;
    border-color: rgba(34, 197, 94, 0.22) !important;
    border-radius: 11px !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
    gap: 6px !important;
    top: 55px !important;
  }

  .tracker-search-input {
    font-size: 13px !important;
  }

  .tracker-sort-control {
    display: grid !important;
    grid-template-columns: 1fr;
  }

  .tracker-results-count {
    color: #86efac !important;
    font-size: 11px !important;
    line-height: 1 !important;
    margin-top: -1px;
  }

  body.player-page .list {
    gap: 8px !important;
  }

  body.player-page .zone,
  body.player-page .feat,
  body.player-page .char {
    border-radius: 10px !important;
    padding: 10px !important;
  }

  body.player-page .card-head {
    gap: 8px !important;
  }

  body.player-page .pill,
  body.player-page .priority {
    border-radius: 999px !important;
  }

  body.player-personnages .mini-progress {
    grid-template-columns: 1fr 1fr !important;
  }

  body.player-personnages .quick-char-actions {
    grid-template-columns: 1fr 1fr !important;
  }

  body.player-personnages .card-details[open] {
    margin-top: 8px !important;
  }

  body.player-personnages .task-row {
    border-radius: 8px !important;
    padding: 6px 0 !important;
  }

  body.player-zones .create-panel[open],
  body.player-feats .create-panel[open],
  body.player-personnages .create-panel[open] {
    padding: max(10px, env(safe-area-inset-top)) 8px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.player-zones .create-panel[open] summary,
  body.player-feats .create-panel[open] summary,
  body.player-personnages .create-panel[open] summary {
    border-radius: 12px 12px 0 0 !important;
    min-height: 46px !important;
    padding: 12px 14px !important;
  }

  body.player-zones .create-panel[open] .create-content,
  body.player-feats .create-panel[open] .create-content,
  body.player-personnages .create-panel[open] .create-content {
    border-radius: 0 0 12px 12px !important;
    gap: 9px !important;
    padding: 12px 14px 14px !important;
  }

  body.player-zones .create-panel[open] input,
  body.player-zones .create-panel[open] select,
  body.player-zones .create-panel[open] button,
  body.player-feats .create-panel[open] input,
  body.player-feats .create-panel[open] select,
  body.player-feats .create-panel[open] button,
  body.player-personnages .create-panel[open] input,
  body.player-personnages .create-panel[open] select,
  body.player-personnages .create-panel[open] button {
    min-height: 42px !important;
  }
}

/* =========================================================
   TRACKER CREATE MODAL WIDTH LOCK
========================================================= */
body.player-zones .create-panel[open],
body.player-feats .create-panel[open],
body.player-personnages .create-panel[open] {
  --tracker-create-modal-width: min(440px, calc(100vw - 32px));
  grid-template-columns: var(--tracker-create-modal-width) !important;
  justify-content: center !important;
  justify-items: stretch !important;
}

body.player-zones .create-panel[open] summary,
body.player-feats .create-panel[open] summary,
body.player-personnages .create-panel[open] summary,
body.player-zones .create-panel[open] .create-content,
body.player-feats .create-panel[open] .create-content,
body.player-personnages .create-panel[open] .create-content {
  justify-self: stretch !important;
  max-width: none !important;
  min-width: 0 !important;
  width: 100% !important;
}

body.player-zones .create-panel[open] .create-content > *,
body.player-feats .create-panel[open] .create-content > *,
body.player-personnages .create-panel[open] .create-content > * {
  box-sizing: border-box !important;
  max-width: 100% !important;
  min-width: 0 !important;
  width: 100% !important;
}

body.player-zones .create-panel[open] .toggles {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.player-zones .create-panel[open] .toggles label {
  min-width: 0;
  white-space: nowrap;
}

@media (max-width: 520px) {
  body.player-zones .create-panel[open],
  body.player-feats .create-panel[open],
  body.player-personnages .create-panel[open] {
    --tracker-create-modal-width: calc(100vw - 16px);
  }

  body.player-zones .create-panel[open] .toggles {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   TRACKER MOBILE FULL WIDTH RESTORE
========================================================= */
@media (max-width: 760px) {
  body.player-zones .app,
  body.player-feats .app,
  body.player-personnages .app {
    margin: 0 !important;
    max-width: none !important;
    width: 100% !important;
  }

  body.player-zones .main,
  body.player-feats .main,
  body.player-personnages .main {
    margin: 0 !important;
    max-width: none !important;
    padding: 8px 8px calc(96px + env(safe-area-inset-bottom, 0px)) !important;
    width: 100% !important;
  }

  body.player-zones .summary-grid,
  body.player-feats .summary-grid,
  body.player-personnages .summary-grid,
  body.player-zones .list,
  body.player-feats .list,
  body.player-personnages .list {
    margin-inline: 0 !important;
    max-width: none !important;
    width: 100% !important;
  }

  body.player-zones .list,
  body.player-feats .list,
  body.player-personnages .list {
    grid-template-columns: minmax(0, 1fr) !important;
  }

body.player-zones .zone,
body.player-feats .feat,
body.player-personnages .char {
    margin-inline: 0 !important;
    max-width: none !important;
    width: 100% !important;
  }
}

/* =========================================================
   CARD FEEDBACK AND PROGRESS
========================================================= */
.progress-card,
.interactive-card,
.build-pick-card {
  position: relative;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    opacity 160ms ease,
    transform 160ms ease;
}

.progress-card::before {
  background: linear-gradient(90deg, #22c55e var(--card-progress, 0%), rgba(148, 163, 184, 0.12) var(--card-progress, 0%));
  border-radius: 999px;
  content: "";
  height: 3px;
  left: 12px;
  position: absolute;
  right: 12px;
  top: 0;
}

.progress-card.is-done {
  border-color: rgba(34, 197, 94, 0.34) !important;
  box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.08);
}

.build-card.is-ready {
  border-color: rgba(34, 197, 94, 0.24) !important;
}

.build-card.needs-review {
  border-color: rgba(245, 158, 11, 0.24) !important;
}

.build-card.is-ready::before,
.build-card.needs-review::before {
  border-radius: 999px;
  content: "";
  height: 4px;
  left: 14px;
  position: absolute;
  right: 14px;
  top: 0;
}

.build-card.is-ready::before {
  background: linear-gradient(90deg, #22c55e, #14b8a6);
}

.build-card.needs-review::before {
  background: linear-gradient(90deg, #f59e0b, #f97316);
}

.task-row:has(input:checked) {
  background: rgba(34, 197, 94, 0.08);
  border-color: rgba(34, 197, 94, 0.2);
}

.task-row:has(input:checked) > span:first-child {
  color: #bbf7d0;
}

.build-pick-card.selected {
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.18), 0 12px 28px rgba(0, 0, 0, 0.18);
  transform: translateY(-2px);
}

.goal-editor > summary,
.card-details > summary {
  transition: background 160ms ease, color 160ms ease;
}

.goal-editor[open] > summary,
.card-details[open] > summary {
  background: rgba(34, 197, 94, 0.08);
  color: #bbf7d0;
}

body.light-mode .task-row:has(input:checked),
body.light-mode .goal-editor[open] > summary,
body.light-mode .card-details[open] > summary {
  background: rgba(22, 163, 74, 0.08);
  color: #166534;
}

@media (hover: hover) {
  .progress-card:hover,
  .interactive-card:hover {
    border-color: rgba(34, 197, 94, 0.34) !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
  }
}

@media (max-width: 760px) {
  .progress-card,
  .interactive-card {
    border-radius: 14px !important;
  }

  .progress-card::before {
    left: 10px;
    right: 10px;
  }

  .progress-card:active,
  .interactive-card:active,
  .build-pick-card:active {
    transform: scale(0.985);
  }

  .goal-players:not([open]) {
    background: rgba(15, 23, 42, 0.36);
  }
}

@media (prefers-reduced-motion: reduce) {
  .progress-card,
  .interactive-card,
  .build-pick-card,
  .goal-editor > summary,
  .card-details > summary {
    transition: none;
  }
}