:root {
  --brand-ink: #1e2925;
  --brand-green: #497c69;
  --brand-action: #315e4f;
  --brand-muted: #63716a;
  --brand-border: #dce3df;
  --brand-surface: #f5f7f6;
}

body {
  background: var(--brand-surface);
  color: var(--brand-ink);
}

body, body * { letter-spacing: 0; }

.test {
  background: #faf1cf;
  color: #6e581d;
  font-size: 11px;
}

.app-header { padding-block: 14px; }
.app-header form { flex: 0 0 auto; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 48px;
}

.brand img {
  display: block;
  width: 48px;
  height: 48px;
  object-fit: contain;
  flex: 0 0 48px;
}

.brand .brand-name,
.brand .brand-plus {
  display: inline;
  font-size: 26px;
  line-height: 1.2;
  font-weight: 750;
  color: var(--brand-ink);
  white-space: nowrap;
}

.brand .brand-plus { color: var(--brand-green); }
.brand:focus-visible { outline: 3px solid #90b6a5; outline-offset: 4px; }

p, .muted, footer { color: var(--brand-muted); }
.eyebrow { color: var(--brand-muted); }
button { background: var(--brand-action); border-color: var(--brand-action); }
button:not(:disabled):hover { filter: brightness(.95); }
.secondary { background: white; color: var(--brand-action); border-color: #c8d5ce; }
input, select, textarea { color: var(--brand-ink); border-color: #bdcbc3; }
.tabs a { color: var(--brand-action); }
.tabs a[aria-current] { background: #e7efea; }
.patient-item { background: white; color: var(--brand-ink); border-color: var(--brand-border); }
.patient-item[aria-current=true] { background: #edf4ef; border-color: var(--brand-green); }
.patient-item span { color: var(--brand-muted); }
.room, .panel, .login { border-color: var(--brand-border); border-radius: 8px; }
.login h1 { margin-bottom: 24px; }

@media (max-width: 700px) {
  .app-header { padding: 12px 16px; gap: 10px; }
  .brand { gap: 4px; min-height: 44px; }
  .brand img { width: 40px; height: 40px; flex-basis: 40px; }
  .brand .brand-name, .brand .brand-plus { font-size: 21px; }
  .app-header button { padding: 9px 12px; font-size: 14px; }
}

@media (max-width: 360px) {
  .brand img { width: 32px; height: 32px; flex-basis: 32px; }
  .brand .brand-name, .brand .brand-plus { font-size: 18px; }
}