:root {
  --bg: #0b0f14;
  --card: #121826;
  --text: #f1f3f7;
  --muted: #9aa4b2;
  --border: #1e2636;

  --violet: #600094;
  --green: #2ecc71;
  --orange: #ff9f1c;
  --red: #ff4d4d;
}

* {
  box-sizing: border-box;
  font-family: Inter, system-ui, sans-serif;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
}

/* HEADER */
input:focus,
textarea:focus,
select:focus,
button:focus,
a:focus {
  outline: none; /* Removes the default outline */
}

.topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-bottom: 1px solid var(--border);
}

.logo {
  font-weight: 800;
  letter-spacing: 1px;
}

.tabs {
  display: flex;
  gap: 6px;
}

.tab {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  cursor: pointer;
}

.tab.active {
  color: var(--text);
  border-color: var(--violet);
}

.search input {
  background: #0f1623;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
}

/* MATCH LIST */
#matches {
  padding: 12px;
}

/* CARD */
.match-card {
  background: linear-gradient(180deg, #0f1623, #0b111b);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.match-card.hot {
  border: 1px solid var(--border);
}

.match-info {
  max-width: 70%;
}

.competition {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
}

.teams {
  font-size: 15px;
  font-weight: 600;
}

.score {
  font-size: 16px;
  font-weight: 700;
  margin: 4px 0;
}

.meta {
  font-size: 12px;
  color: var(--muted);
}

/* RIGHT */
.match-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.minute {
  font-size: 12px;
  color: var(--muted);
}

.gip {
  padding: 3px 6px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 700;
}

.gip.green { background: rgba(46,204,113,.15); color: var(--green); }
.gip.orange { background: rgba(255,159,28,.15); color: var(--orange); }
.gip.red { background: rgba(255,77,77,.15); color: var(--red); }

.footer {
  text-align: center;
  font-size: 11px;
  color: var(--muted);
  padding: 10px;
}