:root {
  color-scheme: light;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #24202a;
  background: #f6f3f7;
}

* { box-sizing: border-box; }
body { margin: 0; }
a { color: #8a326d; text-decoration: none; }
a:hover { text-decoration: underline; }

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1rem max(1rem, calc((100% - 1200px) / 2));
  background: #fff;
  border-bottom: 1px solid #e5dce7;
}

.brand { font-size: 1.2rem; font-weight: 700; }
nav, nav form, .actions, .actions form, .heading, .pager { display: flex; align-items: center; gap: .8rem; }
main { width: min(1200px, calc(100% - 2rem)); margin: 2rem auto; }

.card, .table {
  background: #fff;
  border: 1px solid #e5dce7;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgb(45 25 45 / 5%);
}

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; }
.stats .card { display: grid; gap: .3rem; padding: 1.25rem; }
.stats b { font-size: 2rem; }
.stats span, small { display: block; color: #716978; }
.login { width: min(420px, 100%); margin: 10vh auto; padding: 2rem; }
.form-card { max-width: 680px; padding: 1.5rem; }

form { margin: 0; }
label { display: grid; gap: .4rem; margin: 1rem 0; font-weight: 600; }
label.check { display: flex; align-items: center; }
input, textarea, button, .button {
  font: inherit;
  border: 1px solid #cfc3d2;
  border-radius: 7px;
  padding: .65rem .8rem;
}
input, textarea { width: 100%; background: #fff; }
textarea { resize: vertical; }
button, .button { border-color: #8a326d; background: #8a326d; color: #fff; cursor: pointer; }
button:hover, .button:hover { filter: brightness(.94); text-decoration: none; }
button.danger { border-color: #b4233b; background: #b4233b; }
button.muted { border-color: #716978; background: #716978; }
button.link { padding: 0; border: 0; background: none; color: #8a326d; }

.heading { justify-content: space-between; }
.search { display: flex; gap: .5rem; max-width: 500px; margin: 1rem 0; }
.table { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: .9rem; border-bottom: 1px solid #eee8ef; text-align: left; vertical-align: top; }
th { background: #fbf9fb; }
.actions { min-width: 340px; flex-wrap: wrap; }
.actions input { width: auto; }
.tag { display: inline-block; padding: .2rem .45rem; border-radius: 99px; background: #eee8ef; font-size: .8rem; }
.tag.approved { color: #176b45; background: #def5e9; }
.tag.rejected { color: #9d2036; background: #fbe1e5; }
.tag.pending { color: #855900; background: #fff0c2; }
.pager { justify-content: flex-end; margin-top: 1rem; }
.error { color: #9d2036; }
.success { color: #176b45; }

@media (max-width: 700px) {
  header, nav { align-items: flex-start; flex-direction: column; gap: .7rem; }
  main { margin-top: 1rem; }
  .actions { min-width: 260px; }
}