/* Edutain Hub foundations. Logo colours are preserved; muted text uses a darker neutral. */
:root {
  color-scheme: light;
  --brand-magenta: #b40486;
  --brand-grey: #848484;
  --bg: #f8f7f9;
  --surface: #ffffff;
  --surface-muted: #f3f0f4;
  --border: #ded9e1;
  --text: #27232c;
  --muted: #655f6b;
  --accent: var(--brand-magenta);
  --accent-strong: #8b0368;
  --accent-soft: #fbeaf6;
  --focus: #b40486;
  --success: #166534;
  --success-bg: #f0fdf4;
  --success-border: #86c89b;
  --danger: #b42318;
  --warning-bg: #fff7ed;
  --warning-border: #fed7aa;
  --font-body: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --radius-control: 0.5rem;
  --radius-panel: 0.75rem;
  --shadow-panel: 0 2px 8px rgb(39 35 44 / 4%);
  --shadow-menu: 0 12px 32px rgb(39 35 44 / 12%);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.5;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem clamp(1rem, 4vw, 2rem);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

header strong {
  color: var(--accent-strong);
  font-size: 1.1rem;
}

header > div {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.account-link {
  color: var(--text);
  text-decoration: none;
}

.account-link:hover,
.account-link[aria-current="page"] {
  color: var(--accent-strong);
  text-decoration: underline;
  text-underline-offset: 0.25rem;
}

nav {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

nav a {
  color: var(--text);
  text-decoration: none;
}

nav a:hover {
  color: var(--accent-strong);
  text-decoration: underline;
}

nav a[aria-current="page"] {
  color: var(--accent-strong);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

main {
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: clamp(1rem, 4vw, 2rem);
}

button,
.button {
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  padding: 0.45rem 0.7rem;
}

.button-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
  text-decoration: none;
}

a {
  color: var(--accent-strong);
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: 0.7rem 0.75rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}

th {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

tbody tr:last-child td {
  border-bottom: 0;
}

.messages {
  display: grid;
  gap: 0.5rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.messages li {
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--surface);
  padding: 0.65rem 0.75rem;
}

.messages .success {
  border-color: var(--success-border);
  background: var(--success-bg);
}

.messages .error {
  border-color: #fecaca;
  background: #fef2f2;
  color: var(--danger);
}

.messages .warning {
  border-color: var(--warning-border);
  background: var(--warning-bg);
  color: var(--text);
}

@media (max-width: 760px) {
  header {
    align-items: flex-start;
    flex-direction: column;
  }

  header > div {
    justify-content: flex-start;
  }

  .responsive-table {
    overflow-x: auto;
  }
}