:root {
  color-scheme: light;
  --staff-ink: #1d3129;
  --staff-muted: #68776f;
  --staff-line: #dce5de;
  --staff-paper: #f1f5f2;
  --staff-surface: #fff;
  --staff-green: #1f6b4c;
  --staff-green-dark: #183b32;
  --staff-green-soft: #e8f3ec;
  --staff-red: #b2463e;
  --staff-gold: #b68b46;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--staff-paper); }
body.staff-app {
  min-width: 280px;
  min-height: 100vh;
  margin: 0;
  color: var(--staff-ink);
  background-color: var(--staff-paper);
  background-image: linear-gradient(135deg, rgb(31 107 76 / 4%) 25%, transparent 25%), linear-gradient(315deg, rgb(182 139 70 / 4%) 25%, transparent 25%);
  background-size: 30px 30px;
  font-family: "Avenir Next", Avenir, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

.staff-shell { width: min(100%, 680px); min-height: 100dvh; margin: 0 auto; padding: 18px 20px 24px; }
.staff-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 4px 0 18px; border-bottom: 1px solid var(--staff-line); }
.staff-brand { display: inline-flex; min-width: 0; align-items: center; gap: 10px; color: var(--staff-ink); text-decoration: none; }
.staff-brand img { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 10px; }
.staff-brand span { display: grid; min-width: 0; gap: 2px; }
.staff-brand strong { font-size: 14px; }
.staff-brand small { color: var(--staff-muted); font-size: 12px; }
.staff-profile { display: flex; min-width: 0; align-items: center; gap: 10px; }
.staff-profile > span { max-width: 140px; overflow: hidden; color: var(--staff-muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.staff-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin: 18px 0 20px; padding: 4px; border: 1px solid var(--staff-line); border-radius: 10px; background: var(--staff-surface); }
.staff-tab { min-height: 44px; padding: 8px 10px; border: 0; border-radius: 7px; color: var(--staff-muted); background: transparent; font-size: 14px; font-weight: 650; cursor: pointer; }
.staff-tab[aria-selected="true"] { color: #fff; background: var(--staff-green-dark); }
.staff-main { min-width: 0; }
.staff-section-heading { margin: 0 0 18px; }
.staff-eyebrow { margin: 0 0 7px; color: var(--staff-gold); font-size: 11px; font-weight: 750; }
.staff-section-heading h1, .staff-login-content h1 { margin: 0; font-size: 25px; line-height: 1.2; }
.staff-muted { margin: 7px 0 0; color: var(--staff-muted); font-size: 14px; line-height: 1.5; }
.staff-form { display: grid; gap: 15px; padding: 18px; border: 1px solid var(--staff-line); border-radius: 10px; background: var(--staff-surface); }
.staff-form label { display: grid; min-width: 0; gap: 7px; color: var(--staff-ink); font-size: 13px; font-weight: 650; }
.staff-form input, .staff-form select { width: 100%; min-width: 0; min-height: 48px; padding: 10px 12px; border: 1px solid #cbd8cf; border-radius: 7px; color: var(--staff-ink); background: #fff; font-size: 16px; font-weight: 400; }
.staff-form input:focus, .staff-form select:focus { outline: 2px solid rgb(31 107 76 / 20%); border-color: var(--staff-green); }
.staff-form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.staff-primary, .staff-quiet-button { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 8px; padding: 10px 16px; font-size: 14px; font-weight: 700; cursor: pointer; }
.staff-primary { color: #fff; background: var(--staff-green); }
.staff-primary:hover { background: #18583d; }
.staff-primary:disabled { cursor: wait; opacity: .65; }
.staff-quiet-button { border-color: var(--staff-line); color: var(--staff-ink); background: var(--staff-surface); }
.staff-message { margin: 0; padding: 11px 12px; border: 1px solid #cce2d2; border-radius: 7px; color: #22553a; background: var(--staff-green-soft); font-size: 13px; line-height: 1.45; }
.staff-message.is-error, .staff-error { border-color: #efc9c4; color: #8f302b; background: #fff1ef; }
.staff-history-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.staff-history-list { display: grid; gap: 9px; }
.staff-transaction { min-width: 0; padding: 14px; border: 1px solid var(--staff-line); border-radius: 8px; background: var(--staff-surface); }
.staff-transaction-heading { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.staff-transaction h2 { min-width: 0; margin: 0; font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.staff-transaction strong { flex: 0 0 auto; font-size: 14px; white-space: nowrap; }
.staff-transaction .is-income { color: var(--staff-green); }
.staff-transaction .is-expense { color: var(--staff-red); }
.staff-transaction p { margin: 7px 0 0; color: var(--staff-muted); font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
.staff-transaction .staff-transaction-description { color: var(--staff-ink); font-size: 13px; }
.staff-empty { margin: 0; padding: 24px 12px; border: 1px dashed #cbd8cf; border-radius: 8px; color: var(--staff-muted); text-align: center; font-size: 14px; }
.staff-footer { padding-top: 20px; color: var(--staff-muted); font-size: 11px; text-align: center; }
.staff-login { width: min(100%, 480px); min-height: 100dvh; margin: 0 auto; padding: 24px 20px; }
.staff-login-content { margin-top: clamp(44px, 12vh, 100px); }
.staff-login-content .staff-form { margin-top: 24px; }
.staff-login-content .staff-primary { width: 100%; }
.staff-error { margin: 0; padding: 10px 12px; border: 1px solid #efc9c4; border-radius: 7px; font-size: 13px; }
.staff-footnote { margin: 16px 0 0; color: var(--staff-muted); font-size: 12px; }

@media (max-width: 380px) {
  .staff-shell { padding-inline: 14px; }
  .staff-profile { gap: 6px; }
  .staff-profile > span { max-width: 86px; }
  .staff-form { padding: 14px; }
  .staff-form-row { grid-template-columns: 1fr; }
  .staff-history-heading { align-items: start; }
}