:root {
  --bg: #f3f6f5;
  --ink: #0b2430;
  --sea: #0a3544;
  --aqua: #2bb8a8;
  --line: #d7e2df;
  --white: #fff;
  --font: "Sora", sans-serif;
}
* { box-sizing: border-box; }
body {
  margin: 0; font-family: var(--font); color: var(--ink);
  background: linear-gradient(180deg, #eef5f3, var(--bg));
  min-height: 100vh;
}
button, input, select, textarea { font: inherit; }
.login {
  min-height: 100vh; display: grid; place-items: center; padding: 1.5rem;
}
.login-card {
  width: min(420px, 100%); background: var(--white); border: 1px solid var(--line);
  border-radius: 18px; padding: 1.6rem; display: grid; gap: .8rem;
  box-shadow: 0 20px 50px rgba(11,36,48,.08);
}
.login-card h1 { margin: 0; font-size: 1.5rem; }
.login-card h1 span { color: var(--aqua); }
.login-card p { margin: 0 0 .4rem; color: #5b6f78; }
.login-card label, .form label { display: grid; gap: .3rem; font-size: .85rem; font-weight: 600; }
.login-card input, .form input, .form select, .form textarea {
  border: 1px solid var(--line); border-radius: 10px; padding: .7rem .8rem;
}
.login-card button, .btn {
  border: 0; border-radius: 999px; padding: .75rem 1.1rem; font-weight: 600; cursor: pointer;
  background: var(--sea); color: #fff;
}
.btn.secondary { background: #fff; color: var(--sea); border: 1px solid var(--line); }
.top {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.25rem; background: var(--sea); color: #fff; position: sticky; top: 0; z-index: 10;
}
.top nav { display: flex; gap: .4rem; flex-wrap: wrap; }
.top nav button {
  background: transparent; border: 1px solid rgba(255,255,255,.25); color: #fff;
  border-radius: 999px; padding: .45rem .9rem; cursor: pointer;
}
.top nav button.active, .top nav button:hover { background: var(--aqua); border-color: var(--aqua); color: var(--ink); }
#logout { background: transparent; border: 1px solid rgba(255,255,255,.35); color: #fff; border-radius: 999px; padding: .45rem .9rem; cursor: pointer; }
.wrap { width: min(1100px, calc(100% - 2rem)); margin: 1.5rem auto 3rem; }
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; margin-bottom: 1.5rem; }
.card {
  background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 1rem;
}
.card b { display: block; font-size: 1.6rem; margin-top: .3rem; }
.table-wrap { overflow: auto; background: var(--white); border: 1px solid var(--line); border-radius: 14px; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: .75rem .9rem; border-bottom: 1px solid var(--line); text-align: left; font-size: .92rem; vertical-align: top; }
th { background: #f7fbfa; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: #5b6f78; }
.row-actions { display: flex; gap: .4rem; flex-wrap: wrap; }
.badge { display: inline-block; padding: .2rem .55rem; border-radius: 999px; background: #e7f6f3; color: var(--sea); font-size: .75rem; font-weight: 600; }
.badge.pending { background: #fff3d8; color: #8a6200; }
.badge.confirmed { background: #dff7e8; color: #146c3a; }
.badge.cancelled { background: #ffe1e1; color: #9b1c1c; }
.panel { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 1rem; margin-top: 1rem; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.form .full { grid-column: 1 / -1; }
.muted { color: #5b6f78; }
@media (max-width: 900px) {
  .cards { grid-template-columns: 1fr 1fr; }
  .form { grid-template-columns: 1fr; }
  .top { flex-wrap: wrap; }
}