:root {
  --green: #245e8f;
  --green-dark: #19486e;
  --primary: #245e8f;
  --bg: #f1f5f9;
  --card: #ffffff;
  --surface: #ffffff;
  --surface-soft: #f5f8fc;
  --surface-hover: #e8f1fa;
  --text: #172a3c;
  --muted: #51667a;
  --border: #ccd8e3;
  --success-bg: #e5f3ed;
  --code-bg: #edf3f8;
  --count-green: #245e8f;
  --count-bg: #f1f5f9;
  --count-card: #ffffff;
  --count-text: #172a3c;
  --count-muted: #51667a;
  --count-border: #ccd8e3;
  --ui-header: #152d43;
  --ui-shadow: 0 4px 18px rgba(27, 49, 70, .06);
  --ui-focus: #1672b9;
}

html[data-theme="dark"] {
  --green: #3974a2;
  --green-dark: #a7d4f5;
  --primary: #a7d4f5;
  --bg: #101b27;
  --card: #182838;
  --surface: #203344;
  --surface-soft: #1c2d3d;
  --surface-hover: #294357;
  --text: #edf5fa;
  --muted: #b6c8d6;
  --border: #42586a;
  --success-bg: #234136;
  --code-bg: #263b4b;
  --count-green: #3974a2;
  --count-bg: #101b27;
  --count-card: #182838;
  --count-text: #edf5fa;
  --count-muted: #b6c8d6;
  --count-border: #42586a;
  --ui-header: #101c29;
  --ui-shadow: 0 4px 18px rgba(0, 0, 0, .18);
  --ui-focus: #80c4f4;
}

body {
  line-height: 1.45;
  letter-spacing: .005em;
}

h1, h2, h3 {
  letter-spacing: -.025em;
  line-height: 1.2;
}

h2 { font-size: 1.3rem; }
h3 { font-size: 1.05rem; }

.card {
  border-radius: 14px;
  box-shadow: var(--ui-shadow);
}

.topbar,
.count-topbar {
  background: var(--ui-header);
  box-shadow: 0 3px 14px rgba(10, 28, 44, .15);
}

.inventory-module .topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.inventory-module .club-logo {
  grid-column: 2;
  grid-row: 1;
}

.inventory-module .top-left-controls {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
}

.inventory-module .page-heading {
  grid-column: 1 / -1;
  grid-row: 2;
}

.inventory-module .topbar > .install-button {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
}

.topbar h1,
.count-topbar h1 {
  color: #fff;
  font-size: 1.1rem;
  font-weight: 750;
}

.topbar .muted,
.count-identity {
  color: #d3e2ed;
  font-size: .82rem;
  opacity: 1;
}

.topbar button.ghost,
.topbar .menu-trigger,
.count-top-actions button {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(220, 235, 246, .42);
  color: #fff;
}

.topbar button.ghost:hover,
.topbar .menu-trigger:hover,
.count-top-actions button:hover {
  background: rgba(255, 255, 255, .18);
}

button, input, select, textarea {
  border-radius: 9px;
}

button {
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

button:not(:disabled):hover {
  border-color: var(--green);
}

button.primary,
.count-module button.primary {
  background: #245e8f;
  border-color: #245e8f;
  color: #fff;
}

button.primary:not(:disabled):hover,
.count-module button.primary:not(:disabled):hover {
  background: #19486e;
  border-color: #19486e;
}

html[data-theme="dark"] button.primary,
html[data-theme="dark"] .count-module button.primary {
  background: #3974a2;
  border-color: #3974a2;
  color: #fff;
}

html[data-theme="dark"] button.primary:not(:disabled):hover,
html[data-theme="dark"] .count-module button.primary:not(:disabled):hover {
  background: #285d87;
  border-color: #285d87;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
  outline: 3px solid var(--ui-focus);
  outline-offset: 2px;
}

.topbar button:focus-visible,
.count-topbar button:focus-visible {
  outline-color: #a7d9ff;
}

label {
  color: var(--text);
  font-weight: 650;
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  min-height: 44px;
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--green);
}

.login {
  background: radial-gradient(circle at 50% 0, #e1edf6, var(--bg) 62%);
}

html[data-theme="dark"] .login {
  background: radial-gradient(circle at 50% 0, #263d50, var(--bg) 62%);
}

.login .card {
  max-width: 430px;
  padding: clamp(24px, 5vw, 36px);
  border-top: 4px solid var(--green);
  box-shadow: 0 16px 48px rgba(24, 49, 72, .12);
}

.login h1 { font-size: 1.7rem; }
.login label { margin-top: 22px; }
.login button.primary { width: 100%; margin-top: 16px; }

.login-eyebrow {
  margin: 0 0 12px;
  color: var(--green-dark);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.main-menu-panel {
  padding: 10px;
  border-radius: 14px;
  box-shadow: 0 18px 45px rgba(10, 28, 44, .22);
}

.main-menu-panel button {
  font-weight: 600;
}

#count-how-to-dialog {
  width: min(520px, calc(100vw - 28px));
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
  color: var(--text);
}

#count-how-to-dialog li { margin: 10px 0; }
#count-how-to-dialog::backdrop { background: rgba(0, 0, 0, .58); }

.metric {
  border-top: 3px solid #78a8c9;
}

.metric span {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.metric strong { font-variant-numeric: tabular-nums; }

.report-table th,
.count-table-wrap th {
  letter-spacing: .04em;
  font-weight: 750;
}

.report-table td,
.count-table-wrap td {
  vertical-align: middle;
}

.count-area-button {
  gap: 12px;
  border-left: 4px solid var(--green);
  background: var(--count-card);
  color: var(--count-text);
}

.count-area-button span {
  color: var(--green-dark);
  font-size: .85rem;
  font-weight: 700;
}

.count-area-button:hover {
  background: var(--surface-hover);
}

.count-workspace-head {
  border-left: 4px solid var(--green);
}

.count-table-wrap th {
  color: var(--count-muted);
  background: var(--surface-soft);
  font-size: .76rem;
  text-transform: uppercase;
}

.requisition-module .submit-bar {
  box-shadow: 0 -6px 20px rgba(27, 49, 70, .08);
}

.pull-module .quantity-summary div {
  border: 1px solid var(--border);
  background: var(--surface-soft);
}

@media (max-width: 680px) {
  .login .card { padding: 24px; }
  .topbar-actions, .count-top-actions { gap: 6px; }
  .count-topbar { flex-wrap: wrap; }
  .count-top-actions { display: flex; flex-wrap: wrap; }
  .count-area-button { padding: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  button { transition: none; }
}