*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: #0f0f23;
  color: #e2e8f0;
  min-height: 100vh;
  line-height: 1.5;
}

a {
  text-decoration: none;
  color: inherit;
}

ul, ol {
  list-style: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
  color: inherit;
}

input, select, textarea {
  font-family: inherit;
  color: inherit;
}


/* ===== Utility classes (no inline styles initiative) ===== */
.hero-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.flex { display: flex; }
.flex-1 { flex: 1; min-width: 0; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-6 { gap: 6px; }
.gap-8 { gap: 8px; }
.gap-10 { gap: 10px; }
.gap-12 { gap: 12px; }
.gap-20 { gap: 20px; }
.mt-2 { margin-top: 2px; }
.mt-4 { margin-top: 4px; }
.mt-8 { margin-top: 8px; }
.mb-2 { margin-bottom: 2px; }
.mb-4 { margin-bottom: 4px; }
.mb-6 { margin-bottom: 6px; }
.mb-8 { margin-bottom: 8px; }
.mb-10 { margin-bottom: 10px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.mb-28 { margin-bottom: 28px; }
.ml-auto { margin-left: auto; }
.p-8 { padding: 8px; }
.p-16 { padding: 16px; }
.p-24 { padding: 24px; }
.px-18 { padding-left: 18px; }
.py-4 { padding-top: 4px; padding-bottom: 4px; }
.py-8 { padding-top: 8px; padding-bottom: 8px; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-uppercase { text-transform: uppercase; }
.fw-400 { font-weight: 400; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.fw-800 { font-weight: 800; }
.fw-900 { font-weight: 900; }
.text-dark { color: #1e293b; }
.text-body { color: #475569; }
.text-muted { color: #64748b; }
.text-muted2 { color: #94a3b8; }
.text-brand { color: #d4562a; }
.text-green { color: #22c55e; }
.text-yellow { color: #eab308; }
.text-red { color: #ef4444; }
.bg-subtle { background: #f8f9fa; }
.bg-muted { background: #f1f5f9; }
.bg-white { background: #fff; }
.rounded-6 { border-radius: 6px; }
.rounded-8 { border-radius: 8px; }
.rounded-10 { border-radius: 10px; }
.rounded-12 { border-radius: 12px; }
.rounded-999 { border-radius: 999px; }
.border { border: 1px solid #e2e8f0; }
.no-underline { text-decoration: none; }
.tabular-nums { font-variant-numeric: tabular-nums; }
.leading-15 { line-height: 1.5; }
.leading-16 { line-height: 1.6; }
.fs-9 { font-size: 9px; }
.fs-10 { font-size: 10px; }
.fs-11 { font-size: 11px; }
.fs-12 { font-size: 12px; }
.fs-13 { font-size: 13px; }
.fs-14 { font-size: 14px; }
.fs-15 { font-size: 15px; }
.fs-16 { font-size: 16px; }
.fs-18 { font-size: 18px; }
.fs-20 { font-size: 20px; }
.fs-22 { font-size: 22px; }
.fs-24 { font-size: 24px; }
.fs-28 { font-size: 28px; }

    .hidden { display: none; }
    .inline-flex { display: inline-flex; }
    .px-12 { padding-left: 12px; padding-right: 12px; }
    .pt-20 { padding-top: 20px; }
    .border-top { border-top: 1px solid #e2e8f0; }
    .p-40 { padding: 40px; }
    .p-14 { padding: 14px; }
    .italic { font-style: italic; }
.letter-spacing-002n { letter-spacing: -0.02em; }
    .truncate { overflow: hidden; text-overflow: ellipsis; }
    .m-0 { margin: 0; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.page {
  display: none;
  padding: 16px;
}

.page--active {
  display: block;
  animation: fadeIn 0.25s ease-out;
}

.app {
  min-height: 100dvh;
}

.glass {
  background: rgba(22, 33, 62, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.gradient-text {
  background: linear-gradient(135deg, #60a5fa, #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.scrollbar::-webkit-scrollbar {
  width: 6px;
}

.scrollbar::-webkit-scrollbar-track {
  background: #0f0f23;
}

.scrollbar::-webkit-scrollbar-thumb {
  background: #1e40af;
  border-radius: 3px;
}

@media (max-width: 767px) {
  body { font-size: 14px; }
}

@media (min-width: 768px) and (max-width: 1079px) {
  body { font-size: 15px; }
}

@media (min-width: 1080px) {
  body { font-size: 16px; }

  .app {
    max-width: 1200px;
    margin: 0 auto;
  }
}

/* ===== LIGHT THEME (HOME proof-of-concept) ===== */

.theme--light {
  --bg: #ffffff;
  --text: #1e293b;
  --text-muted: #64748b;
  --text-label: #94a3b8;
  --card-bg: #ffffff;
  --card-border: #e2e8f0;
  --card-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --header-bg: #ffffff;
  --header-border: #e2e8f0;
  --accent: #d4562a;
  --accent-blue: #1a5276;
  --nav-active: #d4562a;
  --badge-bg: rgba(212, 86, 42, 0.12);
}

.theme--light {
  background: var(--bg);
  color: var(--text);
}

.theme--light .glass {
  background: var(--card-bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-color: var(--card-border);
  box-shadow: var(--card-shadow);
}

.theme--light .header {
  background: var(--header-bg);
  border-bottom-color: var(--header-border);
}

.theme--light .header__logo-icon {
  background: linear-gradient(135deg, var(--accent), #e2724a);
}

.theme--light .header__logo-text {
  color: var(--text);
}

.theme--light .header__competition {
  background: #f1f5f9;
}

.theme--light .header__competition select {
  color: var(--text);
}

.theme--light .header__search {
  color: var(--text-muted);
}

.theme--light .header__user {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
}

.theme--light .header__user:hover {
  border-color: #cbd5e1;
}

.theme--light .header__user-avatar {
  background: linear-gradient(135deg, var(--accent), #e2724a);
  color: #ffffff;
}

.theme--light .header__user-name {
  color: var(--text);
}

.theme--light .header__user-name {
  color: var(--text);
}

.theme--light .header__user-dropdown {
  background: var(--card-bg);
  border-color: var(--card-border);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

.theme--light .header__user-dropdown-item {
  color: var(--text);
}

.theme--light .header__user-dropdown-item:hover {
  background: rgba(212, 86, 42, 0.08);
}

.theme--light .header__user-dropdown-item--muted {
  color: var(--text-muted);
}

.theme--light .header__user-dropdown-divider {
  background: var(--card-border);
}

.theme--light .nav {
  background: var(--header-bg);
  border-bottom-color: var(--header-border);
}

.theme--light .nav__link {
  color: var(--text-muted);
}

.theme--light .nav__link:hover {
  color: var(--text);
}

.theme--light .nav__link--active {
  color: var(--accent);
}

.theme--light .nav__link--active::after {
  background: var(--accent);
}

.theme--light .footer {
  background: var(--header-bg);
  border-top-color: var(--header-border);
  color: var(--text-muted);
}

.theme--light .hero {
  background: linear-gradient(135deg, rgba(212, 86, 42, 0.08), rgba(26, 82, 118, 0.06));
  border-color: var(--card-border);
}

.theme--light .hero__badge {
  background: var(--badge-bg);
  color: var(--accent);
}

.theme--light .hero__subtitle {
  color: var(--text-muted);
}

.theme--light .hero__countdown-label {
  color: var(--text-muted);
}

.theme--light .hero__cta {
  background: linear-gradient(135deg, var(--accent), #e2724a);
}

.theme--light .stats-grid__card {
  background: var(--card-bg);
  border-color: var(--card-border);
  box-shadow: var(--card-shadow);
}

.theme--light .stats-grid__card:hover {
  box-shadow: 0 0 20px rgba(212, 86, 42, 0.1);
}

.theme--light .stats-grid__card-value {
  color: var(--text);
}

.theme--light .stats-grid__card-label {
  color: var(--text-muted);
}

.theme--light .stats-grid__card-extra {
  color: var(--text-label);
}

.theme--light .stats-grid__card-arrow {
  color: var(--text-label);
}

.theme--light .panel {
  background: var(--card-bg);
  border-color: var(--card-border);
  box-shadow: var(--card-shadow);
}

.theme--light .panel__title {
  color: var(--text);
}

.theme--light .panel__row {
  border-bottom-color: #f1f5f9;
}

.theme--light .panel__row:last-child {
  border-bottom: none;
}

.theme--light .panel__row-meta {
  color: var(--text-label);
}

.theme--light .panel__row-name {
  color: var(--text);
}

.theme--light .panel__row-percent {
  color: #1e293b;
}

.theme--light .panel__row-percent-label {
  color: var(--text-label);
}

.theme--light .panel__row-price--highlight {
  color: var(--accent);
}

.theme--light .panel__more {
  color: var(--accent);
}

.theme--light .gradient-text {
  background: linear-gradient(135deg, var(--accent), var(--accent-blue));
  -webkit-background-clip: text;
  background-clip: text;
}

.theme--light .header__lang {
  background: #f1f5f9;
}

.theme--light .header__lang-arrow {
  color: var(--text-muted);
}

.theme--light .dropdown__trigger {
  background: #f1f5f9;
}

.theme--light .dropdown__trigger:hover {
  background: #e2e8f0;
}

.theme--light .dropdown__trigger-label {
  color: var(--text);
}

.theme--light .dropdown__menu {
  background: #ffffff;
  border-color: var(--card-border);
  box-shadow: 0 8px 32px rgba(0,0,0,0.1);
}

.theme--light .dropdown__item {
  color: var(--text);
}

.theme--light .dropdown__item:hover {
  background: rgba(212, 86, 42, 0.08);
}

.theme--light .dropdown__item--active {
  background: rgba(212, 86, 42, 0.12);
  color: var(--accent);
}

.theme--light .dropdown__item-title {
  color: var(--text);
}

.theme--light .dropdown__item-sub {
  color: var(--text-muted);
}

.theme--light .dropdown__item--disabled {
  color: var(--text-muted);
}

.theme--light .dropdown__arrow {
  color: var(--text-muted);
}

.theme--light .dropdown--lang .dropdown__menu .dropdown__item {
  color: var(--text-muted);
}

.theme--light .dropdown--lang .dropdown__menu .dropdown__item--active {
  color: var(--accent);
}

.theme--light .dropdown__trophy {
  color: var(--accent);
}

.theme--light .bottom-nav {
  background: var(--header-bg);
  border-top-color: var(--header-border);
}

.theme--light .bottom-nav__link {
  color: var(--text-muted);
}

.theme--light .bottom-nav__link--active {
  color: var(--accent);
}

/* ===== TEAM PAGE ===== */

.theme--light .table-page__budget-text {
  color: var(--text-muted);
}

.theme--light .table-page__budget-bar {
  background: #e2e8f0;
}

.theme--light .table-page__budget-fill {
  background: linear-gradient(90deg, var(--accent), #e2724a);
}

.theme--light .table-page__status {
  background: rgba(34, 197, 94, 0.12);
  color: #16a34a;
}

.theme--light .table-page__minicard {
  background: var(--card-bg);
  border-color: var(--card-border);
  box-shadow: var(--card-shadow);
}

.theme--light .table-page__minicard-value {
  color: var(--text);
}

.theme--light .table-page__minicard-label {
  color: var(--text-muted);
}

.theme--light .table-page__table-wrapper {
  background: var(--card-bg);
  border-color: var(--card-border);
  box-shadow: var(--card-shadow);
}

.theme--light .table-page__table th {
  color: var(--text-muted);
  border-bottom-color: var(--card-border);
}

.theme--light .table-page__table td {
  border-bottom-color: #f1f5f9;
}

.theme--light .table-page__table tr:hover td {
  background: rgba(212, 86, 42, 0.04);
}

.theme--light .table-page__pts {
  color: var(--accent-blue);
}

.theme--light .table-page__remove {
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
}

.theme--light .table-page__add-btn {
  background: rgba(212, 86, 42, 0.1);
  color: var(--accent);
}

.theme--light .table-page__empty {
  color: var(--text-muted);
}

.theme--light .table-page__warning {
  color: #d97706;
}

.theme--light .table-page__btn--secondary {
  background: #f1f5f9;
  color: var(--text);
}

.theme--light .table-page__btn--primary {
  background: linear-gradient(135deg, var(--accent), #e2724a);
}

/* ===== MARKET PAGE ===== */

.theme--light .market-page__budget {
  color: var(--text-muted);
}

.theme--light .market-page__budget strong {
  color: var(--accent);
}

.theme--light .market-page__filters {
  background: var(--card-bg);
  border-color: var(--card-border);
  box-shadow: var(--card-shadow);
}

.theme--light .market-page__filter-group label {
  color: var(--text-muted);
}

.theme--light .market-page__filter-group select,
.theme--light .market-page__filter-group input {
  background: #f8f9fa;
  border-color: var(--card-border);
  color: var(--text);
}

.theme--light .market-page__filter-group select:focus,
.theme--light .market-page__filter-group input:focus {
  border-color: var(--accent);
}

.theme--light .market-page__filter-group input[type="range"] {
  accent-color: var(--accent);
}

.theme--light .market-page__search-icon {
  color: var(--text-muted);
}

.theme--light .market-card {
  background: var(--card-bg);
  border-color: var(--card-border);
  box-shadow: var(--card-shadow);
}

.theme--light .market-card:hover {
  box-shadow: 0 0 24px rgba(212, 86, 42, 0.12);
}

.theme--light .market-card__price--high {
  background: rgba(249, 115, 22, 0.1);
  color: #d97706;
}

.theme--light .market-card__price--mid {
  background: rgba(100, 116, 139, 0.1);
  color: var(--text-muted);
}

.theme--light .market-card__event {
  color: var(--text-muted);
}

.theme--light .market-card__stats {
  border-top-color: #f1f5f9;
}

.theme--light .market-card__stat-label {
  color: var(--text-muted);
}

.theme--light .market-card__popular {
  color: #ca8a04;
}

.theme--light .market-card__btn {
  background: rgba(212, 86, 42, 0.1);
  color: var(--accent);
}

.theme--light .market-card__btn:hover {
  background: rgba(212, 86, 42, 0.18);
}

.theme--light .market-page__page-btn {
  background: #f1f5f9;
  color: var(--text-muted);
}

.theme--light .market-page__page-btn:hover {
  background: #e2e8f0;
}

.theme--light .market-page__page-btn--active {
  background: var(--accent);
  color: #fff;
}

/* ===== STANDINGS PAGE ===== */

.theme--light .standings-page__tabs {
  background: #f1f5f9;
}

.theme--light .standings-page__tab {
  color: var(--text-muted);
}

.theme--light .standings-page__tab:hover {
  color: var(--text);
}

.theme--light .standings-page__tab--active {
  background: var(--accent);
  color: #fff;
}

.theme--light .standings-page__table-wrapper {
  background: var(--card-bg);
  border-color: var(--card-border);
  box-shadow: var(--card-shadow);
}

.theme--light .standings-page__table th {
  color: var(--text-muted);
  border-bottom-color: var(--card-border);
}

.theme--light .standings-page__table td {
  border-bottom-color: #f1f5f9;
}

.theme--light .standings-page__table tr:hover td {
  background: rgba(212, 86, 42, 0.04);
}

.theme--light .standings-page__rank-badge--gold {
  background: rgba(234, 179, 8, 0.12);
  color: #ca8a04;
}

.theme--light .standings-page__rank-badge--silver {
  background: rgba(100, 116, 139, 0.1);
  color: var(--text-muted);
}

.theme--light .standings-page__rank-badge--bronze {
  background: rgba(251, 146, 60, 0.12);
  color: #d97706;
}

.theme--light .standings-page__highlight {
  background: rgba(212, 86, 42, 0.06);
}

.theme--light .standings-page__highlight td {
  color: var(--accent);
}

.theme--light .standings-page__you-tag {
  color: var(--accent);
}

.theme--light .standings-page__pct--good { color: #16a34a; }
.theme--light .standings-page__pct--mid { color: #ca8a04; }
.theme--light .standings-page__pct--bad { color: #dc2626; }
.theme--light .standings-page__diff--negative { color: #dc2626; }
.theme--light .standings-page__diff--positive { color: #16a34a; }

/* ===== LEAGUES PAGE ===== */

.theme--light .leagues-page__btn--secondary {
  background: #f1f5f9;
  color: var(--text);
}

.theme--light .leagues-page__btn--primary {
  background: linear-gradient(135deg, var(--accent), #e2724a);
}

.theme--light .leagues-page__panel {
  background: var(--card-bg);
  border-color: var(--card-border);
  box-shadow: var(--card-shadow);
}

.theme--light .leagues-page__panel-title {
  color: var(--text);
}

.theme--light .leagues-page__league-card {
  background: #f8f9fa;
  border-color: #e2e8f0;
}

.theme--light .leagues-page__league-card:hover {
  border-color: var(--accent);
}

.theme--light .leagues-page__league-meta {
  color: var(--text-muted);
}

.theme--light .leagues-page__league-rank--blue {
  background: rgba(212, 86, 42, 0.1);
  color: var(--accent);
}

.theme--light .leagues-page__league-rank--gray {
  background: rgba(100, 116, 139, 0.1);
  color: var(--text-muted);
}

.theme--light .leagues-page__code-value {
  background: #f1f5f9;
  color: var(--accent);
}

.theme--light .leagues-page__copy-btn {
  color: var(--accent);
}

.theme--light .leagues-page__detail-row {
  border-bottom-color: #f1f5f9;
}

.theme--light .leagues-page__detail-rank--gold { color: #ca8a04; }
.theme--light .leagues-page__detail-rank--silver { color: var(--text-muted); }
.theme--light .leagues-page__detail-rank--bronze { color: #d97706; }

.theme--light .leagues-page__detail-highlight {
  background: rgba(212, 86, 42, 0.06);
}

.theme--light .leagues-page__detail-you {
  color: var(--accent);
}

.theme--light .leagues-page__detail-gap {
  color: #dc2626;
}

.theme--light .leagues-page__invite {
  border-top-color: var(--card-border);
  color: var(--text-muted);
}

/* ===== SNACKBAR ===== */

@keyframes snackbar-in {
  from { transform: translateY(150%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.snackbar {
  position: fixed;
  bottom: 60px;
  left: 0;
  right: 0;
  z-index: 9999;
  padding: 14px 24px;
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  color: #fff;
  background: #16a34a;
  animation: snackbar-in 0.5s ease forwards;
  pointer-events: none;
}

body.page--settings-active .snackbar {
  bottom: 0;
}

@media (min-width: 768px) {
  .snackbar {
    bottom: 0;
  }
}

body.page--settings-active .snackbar {
  bottom: 0;
}

/* Desktop: no bottom-nav, snackbar at bottom */
@media (min-width: 768px) {
  .snackbar {
    bottom: 0;
  }
}

/* ===== LOGIN PAGE ===== */

.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 68px);
  padding: 24px;
}

.login-page__card {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  box-shadow: var(--card-shadow);
  padding: 40px 32px;
  text-align: center;
}

.login-page__logo {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--accent), #e2724a);
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

.login-page__title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}

.login-page__sub {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 28px;
}

.login-page__form {
  text-align: left;
}

.login-page__field {
  margin-bottom: 18px;
}

.login-page__label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 6px;
}

.login-page__input {
  width: 100%;
  padding: 10px 14px;
  font-size: 14px;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  background: #f8f9fa;
  color: var(--text);
  outline: none;
  transition: border-color 0.15s;
}

.login-page__input:focus {
  border-color: var(--accent);
}

.login-page__input::placeholder {
  color: var(--text-label);
}

.login-page__btn {
  width: 100%;
  padding: 12px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), #e2724a);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: opacity 0.15s;
  margin-top: 4px;
}

.login-page__btn:hover {
  opacity: 0.9;
}

.login-page__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.login-page__btn--success {
  background: #16a34a !important;
}

.login-page__error {
  margin-top: 14px;
  font-size: 13px;
  color: #dc2626;
  text-align: center;
}

.login-page__footer {
  margin-top: 20px;
}

.login-page__back {
  font-size: 13px;
  color: var(--text-muted);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.login-page__back:hover {
  color: var(--accent);
}

/* Mobile */
@media (max-width: 767px) {
  .login-page {
    padding: 16px;
    min-height: calc(100vh - 58px);
  }
  .login-page__card {
    padding: 28px 20px;
  }
  .login-page__title {
    font-size: 20px;
  }
}