@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Text&display=swap');

:root {
  --ink: #29364d;
  --muted: rgba(41, 54, 77, .68);
  --paper: #fafafa;
  --white: #fff;
  --green: #29364d;
  --navy: #29364d;
  --gold: #d4af37;
  --cream: #f9f4e9;
  --border: rgba(41, 54, 77, .16);
  --danger: #a41919;
}

body {
  background:
    linear-gradient(180deg, rgba(212, 175, 55, .07), transparent 180px),
    var(--paper);
  color: var(--ink);
  font-family: "DM Serif Text", Georgia, serif;
  font-size: 15px;
  letter-spacing: .025em;
}

header {
  background: #fff;
  color: var(--navy);
  border-top: 7px solid var(--navy);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 8px 28px rgba(41, 54, 77, .06);
}

header > div:first-child {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 14px;
  align-items: center;
}

header > div:first-child .brand-logo {
  grid-row: 1 / span 3;
}

header > div:first-child > p {
  grid-column: 2;
}

header .subtitle {
  color: var(--muted);
}

.brand-logo {
  display: block;
  width: 72px;
  height: auto;
  object-fit: contain;
}

h1, h2, h3, th, button, input, select, textarea {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

h1 {
  color: var(--navy);
  font-size: 30px;
  font-weight: 400;
  letter-spacing: .015em;
}

h2, h3 {
  color: var(--navy);
  font-weight: 500;
}

.eyebrow, .brand {
  color: var(--gold) !important;
  font-family: "DM Serif Text", Georgia, serif;
  font-weight: 400;
  letter-spacing: .2em;
}

button, select, input, textarea {
  border-color: var(--border);
  border-radius: 3px;
}

button {
  background: var(--navy);
  color: var(--cream);
  border-color: var(--navy);
  font-weight: 600;
  letter-spacing: .025em;
}

button:hover:not(:disabled) {
  filter: brightness(1.08);
}

header button {
  background: var(--navy);
  color: var(--cream);
  border: 1px solid var(--navy);
}

#sync, #refresh {
  background: var(--gold);
  color: var(--navy);
  border-color: var(--gold);
}

.panel, .card {
  background: #fff;
  border-color: var(--border);
  border-radius: 5px;
  box-shadow: 0 10px 32px rgba(41, 54, 77, .045);
}

.cards .card {
  position: relative;
  overflow: hidden;
}

.cards .card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--gold);
}

.card strong {
  color: var(--navy);
}

.connection {
  border-left: 4px solid var(--gold);
}

.toolbar, th {
  background: rgba(249, 244, 233, .58);
}

th {
  color: var(--navy);
  font-weight: 700;
  letter-spacing: .1em;
}

tbody tr:hover {
  background: rgba(212, 175, 55, .075);
}

dialog {
  border-radius: 6px;
  border-top: 5px solid var(--gold);
}

dialog::backdrop {
  background: rgba(41, 54, 77, .72);
}

.reply-composer button, button.restore {
  background: var(--navy);
  color: var(--cream);
  border-color: var(--navy);
}

.connection-actions button.secondary,
.connection-actions .danger-outline {
  background: #fff;
  color: var(--danger);
  border: 1px solid rgba(164, 25, 25, .42);
}

.connection-actions button.secondary:hover:not(:disabled),
.connection-actions .danger-outline:hover:not(:disabled) {
  background: rgba(164, 25, 25, .06);
  filter: none;
}

.message.INBOUND {
  background: rgba(212, 175, 55, .16);
}

.message.OUTBOUND {
  background: rgba(41, 54, 77, .075);
}

.login {
  border-radius: 6px !important;
  border-top: 5px solid var(--gold) !important;
  box-shadow: 0 22px 65px rgba(41, 54, 77, .12) !important;
}

.login .brand-logo {
  width: 92px;
  margin-bottom: 12px;
}

.login button {
  background: var(--navy) !important;
  color: var(--cream) !important;
  border-radius: 3px !important;
}

.grid .card {
  border-radius: 6px;
  border-top: 3px solid var(--gold);
}

.grid .card:hover {
  border-color: var(--gold);
  box-shadow: 0 18px 42px rgba(41, 54, 77, .11);
}

.tag {
  background: var(--cream) !important;
  color: var(--navy) !important;
  border: 1px solid rgba(212, 175, 55, .34);
}

.open, a {
  color: var(--navy);
}

@media (max-width: 720px) {
  header > div:first-child {
    grid-template-columns: auto 1fr;
  }
  .brand-logo { width: 62px; }
}