/* ─── BUTTONS ────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 18px; border-radius: 9px;
  font-size: .82rem; font-weight: 700;
  border: none; cursor: pointer;
  transition: all var(--t); text-decoration: none;
  white-space: nowrap; user-select: none;
}
.btn:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.btn-sm { padding: 6px 14px; font-size: .75rem; border-radius: 7px; }
.btn-lg { padding: 13px 26px; font-size: .9rem; border-radius: 11px; }

.btn-green   { background: var(--green); color: #000; }
.btn-green:hover   { filter: brightness(1.1); transform: translateY(-1px); }
.btn-gold    { background: var(--gold); color: #000; }
.btn-gold:hover    { filter: brightness(1.1); }
.btn-outline { background: transparent; color: var(--text); border: 1px solid var(--border2); }
.btn-outline:hover { background: rgba(255,255,255,.05); }
.btn-ghost   { background: transparent; color: var(--text2); }
.btn-ghost:hover   { color: var(--text); background: var(--card); }
.btn-danger  { background: rgba(255,74,110,.12); color: var(--red); border: 1px solid rgba(255,74,110,.25); }
.btn-danger:hover  { background: rgba(255,74,110,.2); }
.btn-full    { width: 100%; justify-content: center; }

.btn[disabled], .btn.loading { opacity: .5; pointer-events: none; }
.btn.loading::before {
  content: ''; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: spin .6s linear infinite;
}

/* ─── CARD ───────────────────────────────────────────── */
.card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}
.card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.card-title { font-size: .88rem; font-weight: 700; }
.card-action {
  font-size: .75rem; color: var(--green); cursor: pointer;
  background: none; border: none; font-weight: 600;
}
.card-action:hover { text-decoration: underline; }
.card-body { padding: 20px; }

/* ─── STAT CARD ──────────────────────────────────────── */
.stat-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px 20px;
}
.stat-label { font-size: .72rem; color: var(--text2); letter-spacing: .4px; margin-bottom: 6px; }
.stat-val { font-size: 1.6rem; font-weight: 900; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.stat-change { font-size: .7rem; margin-top: 4px; display: flex; align-items: center; gap: 4px; }
.change-up   { color: var(--green); }
.change-down { color: var(--red); }
.change-neu  { color: var(--text2); }

/* ─── TAGS / BADGES ──────────────────────────────────── */
.tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 20px;
  font-size: .68rem; font-weight: 700; letter-spacing: .3px;
}
.tag-green   { background: rgba(0,212,122,.1);  color: var(--green); border: 1px solid rgba(0,212,122,.2); }
.tag-gold    { background: var(--gold-lo);       color: var(--gold);  border: 1px solid rgba(255,184,0,.2); }
.tag-blue    { background: rgba(59,130,246,.12); color: var(--blue);  border: 1px solid rgba(59,130,246,.25); }
.tag-purple  { background: rgba(150,100,255,.1); color: #A888FF;      border: 1px solid rgba(150,100,255,.25); }
.tag-muted   { background: rgba(255,255,255,.06); color: var(--text2); border: 1px solid var(--border); }
.tag-red     { background: rgba(255,74,110,.1);  color: var(--red);   border: 1px solid rgba(255,74,110,.2); }

/* platform tags */
.tag-ps  { background: rgba(0,100,210,.15); color: #4A9EFF;  border: 1px solid rgba(0,100,210,.2); }
.tag-xb  { background: rgba(0,160,60,.12);  color: #3DCC70;  border: 1px solid rgba(0,160,60,.2); }
.tag-pc  { background: rgba(120,80,255,.12); color: #A080FF; border: 1px solid rgba(120,80,255,.2); }

/* ─── FORM INPUTS ────────────────────────────────────── */
.input {
  width: 100%;
  background: var(--card); border: 1px solid var(--border);
  color: var(--text); border-radius: 9px; padding: 10px 14px;
  font-size: .85rem; outline: none;
  transition: border-color var(--t);
}
.input:focus { border-color: var(--green); }
.input::placeholder { color: var(--text3); }
.input-label { font-size: .75rem; font-weight: 600; color: var(--text2); margin-bottom: 6px; display: block; }
.input-group { margin-bottom: 16px; }

.select {
  background: var(--card); border: 1px solid var(--border);
  color: var(--text); padding: 7px 12px; border-radius: 8px;
  font-size: .8rem; cursor: pointer; outline: none;
  transition: border-color var(--t);
}
.select:focus { border-color: var(--green); }

/* ─── FILTERS ────────────────────────────────────────── */
.filter-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.filter-btn {
  padding: 6px 14px; border-radius: 20px; font-size: .75rem; font-weight: 600;
  border: 1px solid var(--border); background: transparent;
  color: var(--text2); cursor: pointer; transition: all var(--t);
}
.filter-btn:hover, .filter-btn.active {
  background: var(--green-glow); border-color: rgba(0,212,122,.3); color: var(--green);
}

/* ─── TABS ───────────────────────────────────────────── */
.tabs {
  display: flex; gap: 4px; background: var(--card);
  border: 1px solid var(--border); border-radius: 10px;
  padding: 4px; width: fit-content; margin-bottom: 20px;
}
.tab-btn {
  padding: 7px 16px; border-radius: 7px; font-size: .8rem; font-weight: 600;
  cursor: pointer; transition: all var(--t); color: var(--text2);
  border: none; background: transparent;
}
.tab-btn.active { background: var(--green); color: #000; }
.tab-btn:hover:not(.active) { color: var(--text); }

/* ─── PROGRESS / ELO BAR ─────────────────────────────── */
.progress-wrap { margin-top: 12px; }
.progress-info { display: flex; justify-content: space-between; margin-bottom: 5px; font-size: .72rem; }
.progress-bar {
  height: 5px; border-radius: 3px;
  background: rgba(255,255,255,.06); overflow: hidden;
}
.progress-fill {
  height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, #007A46, var(--green));
  transition: width .6s ease;
}

/* ─── FORM BADGE (racha) ─────────────────────────────── */
.form-dots { display: flex; gap: 3px; align-items: center; }
.form-dot {
  width: 18px; height: 18px; border-radius: 4px;
  font-size: .58rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.form-w { background: rgba(0,212,122,.2);  color: var(--green); }
.form-d { background: rgba(255,184,0,.15); color: var(--gold); }
.form-l { background: rgba(255,74,110,.15);color: var(--red); }

/* ─── AVATAR ─────────────────────────────────────────── */
.avatar {
  border-radius: 8px; display: flex; align-items: center; justify-content: center;
  font-weight: 800; flex-shrink: 0; overflow: hidden;
}
.avatar-sm  { width: 28px; height: 28px; font-size: .68rem; border-radius: 7px; }
.avatar-md  { width: 36px; height: 36px; font-size: .82rem; }
.avatar-lg  { width: 52px; height: 52px; font-size: 1.1rem; border-radius: 12px; }
.avatar-xl  { width: 72px; height: 72px; font-size: 1.4rem; border-radius: 14px; }

/* ─── MATCH STATUS CHIPS ─────────────────────────────── */
.status-chip {
  font-size: .65rem; font-weight: 700; padding: 3px 9px;
  border-radius: 6px; white-space: nowrap;
}
.chip-pending { background: rgba(255,184,0,.12); color: var(--gold); }
.chip-soon    { background: rgba(59,130,246,.12); color: var(--blue); }
.chip-live    { background: rgba(0,212,122,.12);  color: var(--green); }
.chip-done    { background: rgba(255,255,255,.06); color: var(--text3); }
.chip-dispute { background: rgba(255,74,110,.12); color: var(--red); }

/* ─── EMPTY STATE ────────────────────────────────────── */
.empty-state {
  text-align: center; padding: 60px 24px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.empty-icon { font-size: 2.5rem; opacity: .4; }
.empty-title { font-size: .9rem; font-weight: 700; color: var(--text2); }
.empty-desc  { font-size: .8rem; color: var(--text3); max-width: 280px; }

/* ─── DIVIDER ────────────────────────────────────────── */
.divider { border: none; border-top: 1px solid var(--border); margin: 20px 0; }

/* ─── ZONE INDICATOR (liga) ──────────────────────────── */
.zone-up   { border-left: 3px solid var(--green) !important; }
.zone-down { border-left: 3px solid var(--red) !important; }