:root {
  --burgundy: #76092d;
  --burgundy-dark: #5a0722;
  --ink: #1d1d20;
  --muted: #6b6b73;
  --line: #e6e3e6;
  --bg: #f6f4f5;
  --card: #ffffff;
  --green: #1c7a4a;
  --red: #b3261e;
  --amber: #9a6700;
  --radius: 12px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.5;
}

/* ── Topbar ── */
.topbar {
  background: var(--burgundy);
  color: #fff;
}
.topbar .bar {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.brand {
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: .2px;
}
.brand span { opacity: .7; font-weight: 400; margin-left: 6px; }
.topnav { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.topnav a {
  color: #fff;
  text-decoration: none;
  font-size: .9rem;
  padding: 6px 10px;
  border-radius: 8px;
  opacity: .9;
}
.topnav a:hover { background: rgba(255,255,255,.14); opacity: 1; }
.topnav a.logout { opacity: .65; }

/* ── Layout ── */
.container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 28px 20px 64px;
}
h1 { font-size: 1.5rem; margin: 0 0 4px; }
h3 { margin: 0 0 4px; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
code { background: #efeef0; padding: 1px 5px; border-radius: 5px; font-size: .85em; }

/* ── Cards ── */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  margin: 18px 0;
  max-width: 640px;
}
.card.result { max-width: 100%; }
.card.center { text-align: center; }
.big { font-size: 1.6rem; font-weight: 700; margin: 6px 0; }

/* ── Dashboard grid ── */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
  margin-top: 20px;
}
.tool {
  display: block;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  text-decoration: none;
  color: inherit;
  transition: border-color .12s, transform .12s;
}
.tool:hover { border-color: var(--burgundy); transform: translateY(-2px); }
.tool h3 { color: var(--burgundy); }
.tool p { color: var(--muted); margin: 0; font-size: .92rem; }
.tool.ext { background: #fbf7f8; border-style: dashed; }

/* ── Forms ── */
label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: 14px; }
input, select, textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 10px 12px;
  font: inherit;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--burgundy);
  box-shadow: 0 0 0 3px rgba(118,9,45,.12);
}
textarea { resize: vertical; font-family: inherit; }
button, .btn {
  display: inline-block;
  background: var(--burgundy);
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 10px 18px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
button:hover, .btn:hover { background: var(--burgundy-dark); }
.btn.ghost, .btn.copy.ghost { background: #fff; color: var(--burgundy); border: 1px solid var(--burgundy); }
.btn.ghost:hover { background: #fbf2f5; }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.login { max-width: 380px; margin: 8vh auto 0; }

/* ── Flash / tag ── */
.flash {
  border-radius: 8px;
  padding: 10px 14px;
  margin: 12px 0;
  font-size: .92rem;
  border: 1px solid transparent;
}
.flash.danger { background: #fdecea; color: var(--red); border-color: #f5c6c0; }
.flash.warn { background: #fff7e6; color: var(--amber); border-color: #f3e0b3; }
.flash.success { background: #e8f5ee; color: var(--green); border-color: #bfe3cd; }
.cf-action { margin-top: 14px; }
.row form { margin: 0; }
.tag { display: inline-block; font-weight: 700; }
.tag.valid, .tag.no_contract { color: var(--green); }
.tag.late, .tag.payer_mismatch { color: var(--amber); }
.tag.not_found { color: var(--red); }

/* ── Tables ── */
.tablewrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; margin: 6px 0 18px; font-size: .9rem; }
table.data th, table.data td {
  text-align: left;
  padding: 7px 10px;
  border-bottom: 1px solid var(--line);
}
table.data th { color: var(--muted); font-weight: 600; }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }
.delta-h { margin-top: 14px; padding-left: 8px; border-left: 4px solid var(--line); }
.delta-h.add { border-color: var(--green); }
.delta-h.chg { border-color: var(--amber); }
.delta-h.del { border-color: var(--red); }

.promo-list { margin: 8px 0; padding-left: 20px; }
.promo-list li { margin: 4px 0; }
img.barcode { max-width: 100%; height: auto; }