:root {
  --bg: #0f172a; --card: #1e293b; --accent: #2563eb; --ok: #16a34a;
  --warn: #d97706; --err: #dc2626; --text: #e2e8f0; --muted: #94a3b8;
}
* { box-sizing: border-box; }
body {
  margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--bg); color: var(--text); line-height: 1.5;
}
.wrap { max-width: 480px; margin: 0 auto; padding: 24px 16px; }
.wide { max-width: 1000px; }
.card {
  background: var(--card); border-radius: 14px; padding: 24px;
  box-shadow: 0 6px 24px rgba(0,0,0,.35); margin-bottom: 16px;
}
h1 { font-size: 1.4rem; margin: 0 0 4px; }
h2 { font-size: 1.1rem; margin: 0 0 12px; }
.muted { color: var(--muted); font-size: .9rem; }
label { display: block; margin: 14px 0 6px; font-weight: 600; }
input[type=text], input[type=password], input[type=email], input[type=tel], select {
  width: 100%; padding: 14px; font-size: 1.1rem; border-radius: 10px;
  border: 1px solid #334155; background: #0b1220; color: var(--text);
}
.otp { letter-spacing: .3em; text-align: center; text-transform: uppercase; font-size: 1.6rem; }
button, .btn {
  display: inline-block; width: 100%; margin-top: 18px; padding: 15px;
  font-size: 1.1rem; font-weight: 700; border: 0; border-radius: 10px;
  background: var(--accent); color: white; cursor: pointer; text-decoration: none; text-align: center;
}
button.sm, .btn.sm { width: auto; padding: 8px 12px; font-size: .85rem; margin: 2px; }
.btn.gray { background: #475569; } .btn.warn { background: var(--warn); } .btn.err { background: var(--err); }
.alert { padding: 12px 14px; border-radius: 10px; margin: 12px 0; }
.alert.err { background: #7f1d1d; } .alert.ok { background: #14532d; } .alert.warn { background: #78350f; }
.big-locker { font-size: 3rem; font-weight: 800; text-align: center; margin: 8px 0; }
.center { text-align: center; }
.spinner { font-size: 2rem; text-align: center; animation: pulse 1.2s infinite; }
@keyframes pulse { 0%,100%{opacity:.4} 50%{opacity:1} }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid #334155; }
th { color: var(--muted); font-weight: 600; }
.pill { padding: 2px 8px; border-radius: 999px; font-size: .78rem; font-weight: 700; }
.pill.available { background:#14532d } .pill.occupied { background:#7f1d1d }
.pill.reserved { background:#78350f } .pill.maintenance { background:#475569 }
.pill.offline { background:#1f2937 } .pill.on { background:#14532d } .pill.off { background:#7f1d1d }
nav.top { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
nav.top a { color: var(--text); text-decoration:none; background:#334155; padding:8px 12px; border-radius:8px; font-size:.9rem; }
nav.top a:hover { background: var(--accent); }
form.inline { display:inline; }