:root {
  --purple: #660099;
  --dark-bg: #1c1c1c;
  --light-bg: #f3f3f3;
  --card-dark: #222;
  --card-light: #fff;
  --text-dark: #fff;
  --text-light: #111;
  --accent: #FFD700;
  --red: #FF4C4C;
  --green: #4CFF4C;
}

body {
  font-family: "Segoe UI", system-ui, sans-serif;
  background-color: var(--dark-bg);
  color: var(--text-dark);
  margin: 0;
  transition: background .4s, color .4s;
}
body.light { background-color: var(--light-bg); color: var(--text-light); }

header {
  background-color: var(--purple); color: #fff; padding: 1rem;
  text-align: center; font-size: 1.6em; font-weight: bold; letter-spacing: 1px;
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
}

footer { padding: 1rem; text-align: center; opacity: .7; }

.hidden { display: none !important; }

.auth-banner { padding: 1rem; text-align: center; background: #2a2a2a; }
.auth-banner a { color: var(--accent); }

.top-controls { display: flex; justify-content: center; gap: .6rem; padding: 1rem; flex-wrap: wrap; }
.toggle-btn {
  background-color: var(--purple); color: #fff; border: none; border-radius: 8px;
  padding: .5rem 1rem; font-weight: bold; cursor: pointer; transition: background .3s, transform .2s;
}
.toggle-btn:hover { background-color: var(--accent); color: #111; transform: scale(1.05); }

.metrics { display: flex; justify-content: center; flex-wrap: wrap; gap: .5rem; margin: .5rem; }
.metric-card {
  background: var(--card-dark); border-radius: 14px; padding: .5rem .8rem; text-align: center;
  min-width: 130px; border: 2px solid var(--purple); box-shadow: 0 0 8px rgba(0,0,0,.3);
}
body.light .metric-card { background: var(--card-light); color: var(--text-light); }
.metric-value { font-size: 1.1rem; font-weight: bold; margin: .3rem 0; color: var(--accent); }

.coin-strip {
  margin: 1rem auto; max-width: 1100px; padding: 1rem;
  background: rgba(102, 0, 153, 0.15); border: 1px solid var(--purple); border-radius: 12px;
}
.coin-strip h3 { margin: 0 0 .5rem; }
.lb-row { display: grid; grid-template-columns: 60px 1fr 120px 140px; padding: .35rem .5rem; border-radius: 6px; }
.lb-row.tier-gold   { background: linear-gradient(90deg, rgba(255,215,0,.2), transparent); }
.lb-row.tier-silver { background: linear-gradient(90deg, rgba(192,192,192,.2), transparent); }
.lb-row.tier-bronze { background: linear-gradient(90deg, rgba(205,127,50,.2), transparent); }
.lb-projected { text-align: right; opacity: .8; }
.my-coins { margin-top: .8rem; padding-top: .6rem; border-top: 1px dashed #555; display: flex; gap: .8rem; align-items: center; }

table { width: 95%; margin: 0.8rem auto; border-collapse: collapse; border-radius: 10px; overflow: hidden; font-size: .85rem; }
th, td { padding: .35rem; text-align: center; border-bottom: 1px solid #333; }
th { background-color: var(--purple); color: #fff; font-weight: bold; }
tr:nth-child(even) { background-color: #2a2a2a; }
body.light tr:nth-child(even) { background-color: #eee; }