:root {
  --bg: #f3f4f6;
  --surface: #ffffff;
  --text: #111827;
  --muted: #6b7280;
  --primary: #2563eb;
  --success: #16a34a;
  --danger: #dc2626;
  --warning: #d97706;
  --radius: 14px;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--text);
  background: var(--bg);
}
.container { max-width: 1080px; margin: 0 auto; padding: 16px; }
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: var(--surface); border-bottom: 1px solid #e5e7eb;
}
.topbar-inner { max-width: 1080px; margin: 0 auto; padding: 12px 16px; display:flex; justify-content:space-between; align-items:center; }
.brand { font-weight: 700; }
.badge { padding: 6px 10px; border-radius: 999px; font-size: 12px; background: #e5e7eb; color:#374151; }
.card {
  background: var(--surface); border-radius: var(--radius); padding: 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
.grid { display:grid; gap: 12px; grid-template-columns: 1fr; }
.grid-2 { display:grid; gap: 12px; grid-template-columns: 1fr; }
.kpi-value { font-size: 28px; font-weight: 700; }
.muted { color: var(--muted); font-size: 13px; }
.btn {
  border: 0; border-radius: 10px; padding: 12px 14px; font-size: 15px;
  cursor: pointer; background: var(--primary); color: #fff; text-decoration:none; display:inline-block;
}
.btn.secondary { background:#374151; }
.btn.success { background: var(--success); }
.btn.danger { background: var(--danger); }
.btn.ghost { background:#e5e7eb; color:#111827; }
.btn-row { display:grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.input {
  width: 100%; border: 1px solid #d1d5db; border-radius: 10px;
  padding: 10px 12px; font-size: 15px; background: #fff;
}
.table-wrap { overflow:auto; }
table { width:100%; border-collapse: collapse; background:#fff; }
th, td { border-bottom: 1px solid #e5e7eb; padding: 10px; text-align: left; font-size: 14px; }
.room-grid { display:grid; gap:8px; grid-template-columns: 1fr 1fr; }
.room-box { color: #fff; border-radius: 10px; padding: 14px; text-align:center; font-weight:700; }
.bottom-nav {
  position: fixed; left:0; right:0; bottom:0; background: #fff; border-top:1px solid #e5e7eb;
  display:flex; justify-content: space-around; padding: 8px 6px; z-index: 20;
}
.bottom-nav a { text-decoration:none; color:#374151; font-size:13px; }
.pad-bottom { height: 64px; }
@media (min-width: 900px) {
  .grid { grid-template-columns: repeat(4, 1fr); }
  .grid-2 { grid-template-columns: 2fr 1fr; }
  .bottom-nav { display:none; }
  .pad-bottom { display:none; }
}