:root {
  --bg: #f5f7fb;
  --card: #ffffff;
  --text: #1b2640;
  --muted: #4d5a7a;
  --primary: #365ef5;
  --primary-dark: #2b4ad1;
  --success: #1f8f4a;
  --warning: #9b6a00;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
}
header {
  background: linear-gradient(120deg, #3048a2, #4366ff);
  color: #fff;
  padding: 1.25rem 1rem;
}
header .bar, main {
  max-width: 1000px;
  margin: 0 auto;
}
nav a {
  color: #fff;
  text-decoration: none;
  margin-right: 1rem;
  font-weight: 600;
}
main { padding: 1rem; }
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}
.card {
  background: var(--card);
  border-radius: 12px;
  padding: 1rem;
  box-shadow: 0 10px 30px rgba(24, 39, 75, 0.08);
}
.button {
  display: inline-block;
  background: var(--primary);
  color: #fff;
  text-decoration: none;
  border: 0;
  border-radius: 8px;
  padding: 0.55rem 0.9rem;
  cursor: pointer;
}
.button:hover { background: var(--primary-dark); }
.button.alt {
  background: #ebefff;
  color: var(--primary-dark);
}
.tag {
  display: inline-block;
  font-size: 0.8rem;
  border-radius: 999px;
  padding: 0.25rem 0.6rem;
  margin-right: 0.4rem;
}
.tag.free { background: #e8fff1; color: var(--success); }
.tag.paid { background: #fff4e5; color: var(--warning); }
small, .muted { color: var(--muted); }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td {
  text-align: left;
  border-bottom: 1px solid #e7ecf5;
  padding: 0.5rem;
}
input, select {
  width: 100%;
  padding: 0.5rem;
  margin: 0.25rem 0;
  border-radius: 8px;
  border: 1px solid #cdd6e8;
}
form.inline { display: inline; }
.alert {
  padding: 0.75rem 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
  background: #edf3ff;
}