:root {
  --bb-blue: #0b2c6f;
  --bb-blue-dark: #061941;
  --bb-gold: #ffcc33;
  --bb-screen: #d8e7ff;
  --bb-panel: #f3f7ff;
  --bb-border: #153c8c;
  --bb-ok: #0d7d43;
  --bb-warn: #a65b00;
  --bb-bad: #992b2b;
  --bb-text: #08152d;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
  background: radial-gradient(circle at top, #214fa8 0%, #0a1f4c 45%, #041024 100%);
  color: var(--bb-text);
}
.app-shell {
  min-height: 100vh;
  padding: 16px;
}
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  color: white;
}
.brand {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--bb-gold);
}
.meta, .operator, #clock { font-size: 0.9rem; }
.panel {
  background: linear-gradient(180deg, #fefefe 0%, var(--bb-panel) 100%);
  border: 3px solid var(--bb-border);
  box-shadow: 0 0 0 3px rgba(255, 204, 51, 0.24), 0 12px 28px rgba(0,0,0,0.28);
}
.auth-gate, .hud, .workspace { margin-top: 12px; }
.auth-gate { padding: 14px; }
.panel-title {
  font-weight: 800;
  color: var(--bb-blue);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}
.auth-grid, .membership-grid, .manager-grid, .home-grid {
  display: grid;
  gap: 12px;
}
.auth-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.membership-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.home-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.manager-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-top: 12px; }
label { display: grid; gap: 6px; font-size: 0.9rem; font-weight: 700; }
input, select, button, textarea {
  font: inherit;
}
input, select {
  padding: 10px 12px;
  background: white;
  border: 2px solid #7e9fe0;
}
button {
  padding: 10px 12px;
  border: 2px solid var(--bb-blue-dark);
  background: #d9e6ff;
  color: var(--bb-blue-dark);
  font-weight: 800;
  cursor: pointer;
}
button.primary {
  background: var(--bb-gold);
}
button:hover, .nav-btn.active, .home-tile:hover {
  filter: brightness(0.96);
  transform: translateY(-1px);
}
.home-tile {
  min-height: 88px;
  font-size: 1rem;
  letter-spacing: 0.06em;
}
.auth-actions, .form-row, .shortcut-strip {
  display: flex;
  gap: 10px;
  align-items: end;
  flex-wrap: wrap;
}
.hint { font-size: 0.85rem; color: #2f467d; }
.hud { display: grid; gap: 10px; }
.message {
  padding: 12px 14px;
  font-weight: 700;
  border: 2px solid currentColor;
  background: white;
}
.message.info { color: var(--bb-blue); }
.message.warn { color: var(--bb-warn); }
.message.error { color: var(--bb-bad); }
.message.ok { color: var(--bb-ok); }
.shortcut-strip {
  padding: 8px 12px;
  background: rgba(255,255,255,0.12);
  color: white;
  border: 1px solid rgba(255,255,255,0.25);
}
.workspace {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 14px;
  padding: 14px;
  background: rgba(8, 22, 49, 0.4);
}
.sidebar, .content-area { min-height: 60vh; }
.sidebar { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.nav-btn { text-align: left; }
.space-top { margin-top: 14px; }
.content-area { display: grid; }
.screen { display: none; padding: 14px; }
.screen.active { display: block; }
.member-card, .checkin-result, .note-box, .manager-output {
  padding: 12px;
  background: var(--bb-screen);
  border: 2px solid #6f8fd2;
}
.member-card.compact { min-height: 110px; }
.checkout-layout {
  display: grid;
  grid-template-columns: 1fr 250px;
  gap: 14px;
}
.inset { padding: 12px; }
.totals-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 10px;
}
.stretch { width: 100%; margin-top: 14px; }
.table-wrap {
  margin-top: 12px;
  overflow-x: auto;
}
table {
  width: 100%;
  border-collapse: collapse;
  background: white;
}
th, td {
  border: 1px solid #8aa6df;
  padding: 8px;
  font-size: 0.92rem;
  text-align: left;
}
th {
  background: #dce8ff;
  color: var(--bb-blue-dark);
}
tr.selected { background: #fff4c8; }
.checkbox { align-self: center; }
.hidden { display: none; }
.manager-output {
  min-height: 180px;
  white-space: pre-wrap;
  margin-top: 12px;
}
.status-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  color: white;
  font-size: 0.8rem;
  font-weight: 800;
}
.status-active { background: var(--bb-ok); }
.status-blocked, .status-overdue { background: var(--bb-bad); }
.status-expired, .status-returned { background: var(--bb-warn); }
.status-open { background: var(--bb-blue); }

@media (max-width: 960px) {
  .workspace, .checkout-layout { grid-template-columns: 1fr; }
}