@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;600;700&display=swap");

:root {
  --agent-bg: #02070d;
  --agent-surface: rgba(9, 20, 31, 0.94);
  --agent-surface-2: rgba(12, 27, 42, 0.96);
  --agent-line: rgba(142, 116, 190, 0.28);
  --agent-accent: #a855f7;
  --agent-accent-dim: rgba(168, 85, 247, 0.12);
  --agent-accent-glow: rgba(168, 85, 247, 0.28);
  --agent-text: #f4f7f8;
  --agent-muted: #9da9b7;
  --agent-soft: #5e7183;
  --accent: #a855f7 !important;
  --accent-dim: rgba(168, 85, 247, 0.12) !important;
  --accent-glow: rgba(168, 85, 247, 0.28) !important;
  --accent-bright: #d8b4fe !important;
  --bg-deep: #02070d !important;
  --bg-primary: #02070d !important;
  --bg-secondary: #06111a !important;
  --bg-tertiary: #09141f !important;
  --bg-card: rgba(9, 20, 31, 0.94) !important;
  --bg-input: rgba(1, 8, 13, 0.72) !important;
  --bg-0: #02070d !important;
  --bg-1: #06111a !important;
  --bg-2: #09141f !important;
  --border: rgba(104, 133, 158, 0.24) !important;
  --border-light: rgba(151, 178, 199, 0.28) !important;
  --border-accent: rgba(168, 85, 247, 0.34) !important;
  --border-yellow: rgba(168, 85, 247, 0.34) !important;
  --yellow: #a855f7 !important;
  --gold: #a855f7 !important;
  --shadow-accent: 0 4px 20px rgba(168, 85, 247, 0.22) !important;
  --text-primary: #f4f7f8 !important;
  --text-secondary: #c5ced8 !important;
  --text-muted: #9da9b7 !important;
  --text-dim: #5e7183 !important;
}

html {
  background: var(--agent-bg);
  height: auto !important;
  min-height: auto !important;
  overflow-x: clip !important;
  overflow-y: visible !important;
}

body {
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  background:
    radial-gradient(circle at 72% 12%, rgba(168, 85, 247, 0.14), transparent 26rem),
    linear-gradient(115deg, transparent 0 44%, rgba(168, 85, 247, 0.055) 45%, transparent 46% 72%, rgba(192, 132, 252, 0.045) 73%, transparent 74%),
    linear-gradient(180deg, #050b12 0%, #02070d 100%) !important;
  color: var(--agent-text) !important;
  height: auto !important;
  min-height: auto !important;
  overflow-x: clip !important;
  overflow-y: visible !important;
}

html:has(body.league-tool) {
  overflow-x: auto !important;
}

body.league-tool {
  min-width: 2200px;
  overflow-x: visible !important;
}

body.league-tool .header,
body.league-tool .controls,
body.league-tool .status-container,
body.league-tool .table-wrapper,
body.league-tool .footer {
  max-width: none !important;
}

body.league-tool .table-wrapper,
body.league-tool #table-container {
  overflow-x: visible !important;
}

body.league-tool .league-table {
  min-width: 2100px;
}

@media (max-width: 900px) {
  html:has(body.league-tool) {
    overflow-x: hidden !important;
  }

  body.league-tool {
    min-width: 0 !important;
    overflow-x: hidden !important;
    padding: 16px 12px 32px !important;
  }

  body.league-tool .header,
  body.league-tool .controls,
  body.league-tool .status-container,
  body.league-tool .table-wrapper,
  body.league-tool .footer {
    width: 100% !important;
    max-width: 100% !important;
  }

  body.league-tool .header {
    padding: 24px 18px !important;
  }

  body.league-tool .search-container {
    grid-template-columns: 1fr !important;
  }

  body.league-tool .table-wrapper,
  body.league-tool #table-container {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  body.league-tool .league-table {
    width: max-content;
    min-width: 1120px;
  }

  body.league-tool .league-table thead th:first-child,
  body.league-tool .team-row td:first-child {
    position: sticky;
    left: 0;
    z-index: 4;
    background: rgba(7, 16, 28, 0.98);
    box-shadow: 1px 0 0 rgba(151, 178, 199, 0.12);
  }

  body.league-tool .league-table thead th:first-child {
    z-index: 6;
  }
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(168, 85, 247, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168, 85, 247, 0.055) 1px, transparent 1px);
  background-size: 92px 72px;
  opacity: 0.4;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(100deg, transparent 0 40%, rgba(192, 132, 252, 0.08) 41%, transparent 42%),
    linear-gradient(0deg, transparent 0 49%, rgba(168, 85, 247, 0.045) 50%, transparent 51%);
  background-size: 240px 100%, 100% 120px;
  mix-blend-mode: screen;
  opacity: 0.35;
}

body > * {
  position: relative;
  z-index: 1;
}

header,
.header,
.app-header,
.controls,
.status-container,
.table-wrapper,
.section,
.overview-card,
.modal-content,
#app,
#uploadScreen,
.card,
.club-card,
.player-card {
  border-color: var(--agent-line) !important;
  background-color: var(--agent-surface) !important;
  background-image:
    linear-gradient(180deg, rgba(168, 85, 247, 0.075), transparent 42%),
    linear-gradient(90deg, transparent, rgba(192, 132, 252, 0.08), transparent) !important;
  box-shadow: inset 0 1px 0 rgba(192, 132, 252, 0.1), 0 18px 42px rgba(0, 0, 0, 0.28), 0 0 34px rgba(91, 33, 182, 0.12) !important;
}

body,
button,
input,
select,
textarea,
.btn,
.field input,
.search-input,
.wallet-input,
.status-bar,
.status-text,
.team-name,
.suggestion-name,
.suggestion-meta {
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  letter-spacing: 0 !important;
}

h1,
h2,
h3,
.header h1,
.upload-title,
.comparison-title,
.competition-title,
.saved-analysis-name {
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  letter-spacing: 0 !important;
}

.field label,
.section-title,
.section-label,
.header-badge,
.favorites-title,
.agent-club-field label,
.record-label,
.modal-title {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace !important;
}

h1,
.header h1,
.upload-title,
.section-title,
.section-label,
.header-badge,
.modal-title,
.favorites-title {
  color: var(--agent-accent) !important;
}

button,
.btn,
#calculate-btn,
#btnLoad,
#btnLoadSave {
  border-radius: 8px !important;
}

.btn-primary,
#calculate-btn,
#btnLoad.ready,
#load-btn {
  background: linear-gradient(135deg, #c084fc, #8b5cf6) !important;
  color: #170523 !important;
  border-color: transparent !important;
  box-shadow: 0 10px 28px rgba(168, 85, 247, 0.18) !important;
}

.btn-secondary,
.btn-info,
.btn-success,
.btn-warning,
#favorite-btn,
#clear-cache-btn {
  background: rgba(1, 8, 13, 0.48) !important;
  border-color: rgba(151, 178, 199, 0.26) !important;
  color: var(--agent-text) !important;
}

input,
select,
textarea,
.wallet-input,
.filter-input,
.search-input {
  border-color: rgba(151, 178, 199, 0.26) !important;
  background: rgba(1, 8, 13, 0.68) !important;
  color: var(--agent-text) !important;
}

input:focus,
select:focus,
textarea:focus,
.wallet-input:focus,
.filter-input:focus,
.search-input:focus {
  border-color: var(--agent-accent) !important;
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.14) !important;
}

a,
.accent,
.total,
.total-rewards,
.reward-value,
.header-badge,
.section-title.yellow,
.modal-title,
.status-text.loading,
.footer a {
  color: var(--agent-accent) !important;
}

.header-badge,
.comp-badge,
.agent-club-field {
  border-color: rgba(168, 85, 247, 0.34) !important;
  background: rgba(168, 85, 247, 0.08) !important;
}

.agent-club-field {
  display: flex;
  flex: initial;
  flex-direction: column;
  gap: 8px;
  min-width: 260px;
  min-height: 78px;
  padding: 12px;
  border: 1px solid rgba(168, 85, 247, 0.34);
  border-radius: 8px;
}

.agent-club-field label {
  color: var(--agent-accent) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
}

.agent-club-control {
  display: flex;
  gap: 10px;
}

.agent-club-select {
  flex: 1;
  min-width: 0;
}

.agent-club-load {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: linear-gradient(135deg, #c084fc, #8b5cf6);
  color: #170523;
  font-weight: 800;
  cursor: pointer;
}

.agent-club-meta {
  min-height: 18px;
  color: var(--agent-muted);
  font-size: 12px;
  line-height: 1.35;
}

.agent-club-field.error {
  border-color: rgba(255, 107, 107, 0.42) !important;
  background: rgba(255, 107, 107, 0.08) !important;
}

* {
  scrollbar-color: auto !important;
  scrollbar-width: auto !important;
}

::-webkit-scrollbar,
::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb:hover {
  all: revert !important;
}

.main-layout {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

.squad-nav,
.squad-list,
.squad-view {
  max-height: none !important;
  overflow: visible !important;
}

#appScreen,
#uploadScreen {
  min-height: 0 !important;
  overflow: visible !important;
}

@media (max-width: 768px) {
  body {
    overflow-x: hidden !important;
  }

  .header,
  .controls,
  .status-container,
  .planner-shell,
  .container,
  .section,
  .panel,
  .card,
  .table-wrapper,
  .footer {
    max-width: 100% !important;
  }

  .table-wrapper,
  .table-wrap,
  .player-table-wrapper {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .agent-club-field {
    flex: 0 1 auto;
    min-width: 0;
    width: 100%;
  }

  .agent-club-control {
    flex-direction: column;
  }

  .agent-club-load {
    width: 100%;
  }
}

@media (prefers-reduced-motion: no-preference) {
  body::before {
    animation: agentGridDrift 22s linear infinite;
  }
}

@keyframes agentGridDrift {
  from { background-position: 0 0, 0 0; }
  to { background-position: 92px 72px, 92px 72px; }
}