:root {
  --bg: #f4f1ea;
  --ink: #111;
  --yellow: #ffd93d;
  --pink: #ff6b6b;
  --blue: #4dabf7;
  --white: #fff;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
body {
  background: var(--bg); color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 700;
}
.card {
  background: var(--white);
  border: 3px solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}
.btn {
  background: var(--yellow);
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  padding: 0.6rem 1rem;
  font-weight: 700; cursor: pointer;
  text-transform: uppercase; font-size: 0.9rem;
}
.btn:active { transform: translate(4px, 4px); box-shadow: none; }
.btn.pink { background: var(--pink); color: #fff; }
.btn.blue { background: var(--blue); color: #fff; }
.btn.danger { background: #fff; color: var(--pink); }
input, select {
  border: 3px solid var(--ink);
  padding: 0.6rem; font-size: 1rem; font-weight: 700;
  background: var(--white); font-family: inherit;
}
table { width: 100%; border-collapse: collapse; }
th, td { border: 3px solid var(--ink); padding: 0.5rem; text-align: left; }
th { background: var(--yellow); }
#login-view { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.login-card { max-width: 400px; width: 100%; text-align: center; }
.login-card form { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1rem; }
.tagline { color: #555; font-weight: 400; margin-top: 0.3rem; }
.error { color: var(--pink); font-size: 0.85rem; min-height: 1.1em; }
#app-view { display: flex; min-height: 100vh; }
#sidebar {
  width: 240px; flex-shrink: 0;
  background: var(--yellow);
  border-right: 3px solid var(--ink);
  padding: 1rem; display: flex; flex-direction: column; gap: 1rem;
}
.brand { font-size: 1.1rem; }
#nav a {
  display: block; padding: 0.6rem 1rem; cursor: pointer;
  border: 3px solid var(--ink); background: var(--white);
  box-shadow: 4px 4px 0 var(--ink);
  margin-bottom: 0.5rem; text-decoration: none; color: var(--ink);
}
#nav a.active { background: var(--ink); color: var(--yellow); }
#nav a:active { transform: translate(4px, 4px); box-shadow: none; }
#logout { margin-top: auto; }
main { flex: 1; padding: 1.5rem; max-width: 1000px; }
.page-title { font-size: 1.8rem; margin-bottom: 1.25rem; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.25rem; }
.stat .stat-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; }
.stat .stat-value { font-size: 1.6rem; margin-top: 0.25rem; }
.stat.yellow { background: var(--yellow); }
.stat.pink { background: var(--pink); color: #fff; }
.stat.blue { background: var(--blue); color: #fff; }
.countdown { background: var(--pink); color: #fff; font-size: 1.5rem; text-align: center; }
.bar { border: 3px solid var(--ink); background: var(--white); height: 28px; }
.bar-fill { background: var(--blue); height: 100%; transition: width 0.3s; }
.form { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; }
.table-wrap { overflow-x: auto; }
.sub-table { margin: 0.5rem 0; }
.sub-table th, .sub-table td { border-width: 2px; padding: 0.35rem; }
.pay-form { display: flex; gap: 0.5rem; margin-top: 0.5rem; align-items: center; }
.pay-form input { max-width: 160px; }
.loading { padding: 2rem; text-align: center; }
@media (max-width: 720px) {
  #app-view { flex-direction: column; }
  #sidebar { width: 100%; border-right: none; border-bottom: 3px solid var(--ink); }
}