/* Bidli admin.
   Same language as bidli.ai: a draftsman's sheet. White paper, ink #060c26, blue used
   sparingly. Archivo expanded-900 uppercase poster headlines, IBM Plex Mono for nav,
   labels, tags and fine print, Inter for body. Ruled section heads, grid-paper texture,
   square ink buttons, bordered mono tags, offset paper shadows, underline form fields.
   Tokens lifted from ~/bidli-landing/css/styles.css.

   Fonts are self-hosted, so there is no external request and the content security policy
   stays at font-src 'self' with no unsafe-inline anywhere. */

@font-face { font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-stretch: 125%; font-display: swap; src: url(/static/fonts/archivo-wd125-700.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(/static/fonts/ibm-plex-mono-400.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(/static/fonts/ibm-plex-mono-500.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url(/static/fonts/ibm-plex-mono-600.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/static/fonts/inter-400.woff2) format("woff2"); }

:root {
  color-scheme: light;
  --bg: #ffffff;
  --paper: #fcfcfa;
  --bg-raised: #f4f5f8;
  --ink: #060c26;
  --ink-soft: #494f68;
  --ink-faint: #6e7389;
  --line: rgba(7, 14, 41, 0.12);
  --line-2: rgba(7, 14, 41, 0.22);
  --rule: rgba(7, 14, 41, 0.85);

  --cyan: #0fbffb;
  --blue: #0077fa;
  --violet: #7d34fe;
  --accent-text: #0b4cc9;
  --blue-wash: rgba(0, 119, 250, 0.10);
  --green: #047857;
  --green-wash: rgba(4, 120, 87, 0.10);
  --red: #a81b14;
  --red-wash: rgba(168, 27, 20, 0.08);
  --amber: #8a5a00;
  --amber-wash: rgba(214, 150, 20, 0.14);

  --font-display: "Archivo", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;

  --r-md: 12px;
  --r-sm: 8px;
  --shadow-offset: 9px 9px 0 -1px rgba(6, 12, 38, 0.05);
  --grid-paper:
    linear-gradient(rgba(6, 12, 38, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(6, 12, 38, 0.035) 1px, transparent 1px);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
::selection { background: rgba(0, 119, 250, 0.18); }

h1, h2 {
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.98;
  letter-spacing: 0;
  margin: 0 0 22px;
}
h1 { font-size: clamp(28px, 3.1vw, 40px); }
h2 { font-size: clamp(20px, 2vw, 25px); margin: 38px 0 14px; }
h3 { font-family: var(--font-body); font-size: 18px; font-weight: 650; line-height: 1.3; margin: 0 0 10px; letter-spacing: -0.01em; }
p { margin: 0 0 14px; }
a { color: var(--accent-text); text-decoration-thickness: 1.5px; text-underline-offset: 2px; }
a:hover { color: var(--ink); }

/* ---------- banners ---------- */

.banner {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  padding: 9px 20px;
  border-bottom: 2px solid var(--rule);
}
.banner-dry { background: var(--ink); color: #ffffff; border-bottom-color: var(--ink); }
.banner-warn { background: var(--amber-wash); color: var(--amber); }

/* ---------- top bar ---------- */

.topbar {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
  max-width: 1140px;
  margin: 0 auto;
  padding: 14px 28px;
}
.topbar-outer { border-bottom: 2px solid var(--rule); background: var(--bg); }
.brand { display: inline-flex; align-items: center; }
.brand img { height: 30px; width: auto; }
.nav { display: flex; gap: 26px; flex-wrap: wrap; }
.nav a {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
}
.nav a:hover { color: var(--ink); }
.who {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.user { color: var(--ink); font-weight: 600; }
.linkish {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--ink-soft);
  border-bottom: 2px solid var(--ink);
}
.linkish:hover { color: var(--ink); }
.inline { display: inline; }

.wrap { max-width: 1140px; margin: 0 auto; padding: 34px 28px 72px; }
.foot {
  border-top: 2px solid var(--rule);
  margin-top: 24px;
}
.foot-row {
  max-width: 1140px;
  margin: 0 auto;
  padding: 22px 28px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-faint);
}
.foot-mark { height: 22px; width: auto; }

/* ---------- mono utilities ---------- */

.kicker, .sect-label {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.kicker { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; }
.kicker::before { content: ""; width: 26px; height: 2px; background: var(--rule); }

.sect-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  border-top: 2px solid var(--rule);
  padding-top: 13px;
  margin: 40px 0 22px;
}
.sect-num { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--ink); }
.sect-count { margin-left: auto; font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-faint); }

.muted { color: var(--ink-soft); }
.small { font-size: 13px; }
.mono, .fine {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.02em;
}
.fine { color: var(--ink-faint); }
.break { word-break: break-all; }
.missing {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red);
  border: 1px solid currentColor;
  border-radius: 4px;
  padding: 2px 7px;
}
.ok { color: var(--green); }
.error { color: var(--red); font-weight: 600; }
.warn { color: var(--amber); font-weight: 600; }
.empty {
  border: 2px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--paper);
  background-image: var(--grid-paper);
  background-size: 28px 28px;
  box-shadow: var(--shadow-offset);
  padding: 48px 28px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}

.rowbar { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 26px; }
.rowbar .button, .rowbar .right { margin-left: auto; }

/* ---------- buttons: square ink, never a gradient pill ---------- */

button, .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  border: 2px solid var(--ink);
  border-radius: var(--r-sm);
  padding: 14px 24px;
  cursor: pointer;
  color: #ffffff;
  background: var(--ink);
  transition: background-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease, color 0.16s ease;
}
button:hover, .button:hover {
  background: var(--accent-text);
  border-color: var(--accent-text);
  color: #ffffff;
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 rgba(6, 12, 38, 0.18);
}
button:disabled { opacity: 0.45; cursor: default; transform: none; box-shadow: none; }
.button.secondary, button.secondary {
  background: #ffffff;
  color: var(--ink);
  border-color: var(--line-2);
}
.button.secondary:hover, button.secondary:hover {
  background: #ffffff;
  color: var(--ink);
  border-color: var(--ink);
  box-shadow: 3px 3px 0 rgba(6, 12, 38, 0.14);
}
button.danger { background: #ffffff; color: var(--red); border-color: var(--red); }
button.danger:hover { background: var(--red); color: #ffffff; border-color: var(--red); }
button.big { font-size: 17px; padding: 18px 32px; }
.actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin: 26px 0; }

/* ---------- tables: ruled sheet, mono headers ---------- */

.group { margin-bottom: 34px; }
table.grid {
  width: 100%;
  border-collapse: collapse;
  background: #ffffff;
  border: 2px solid var(--rule);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-offset);
}
table.grid th, table.grid td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
table.grid thead th {
  background: var(--bg-raised);
  border-bottom: 2px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
table.grid tbody tr:last-child td { border-bottom: 0; }
table.grid td.num, table.grid th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.grid td.num { font-family: var(--font-mono); font-size: 14px; }
table.grid td.when, table.grid th.when {
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-faint);
}
table.grid td a { font-weight: 600; color: var(--ink); text-decoration-color: var(--line-2); }
table.grid td a:hover { color: var(--accent-text); }
.sub { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-faint); margin-top: 3px; }
table.audit td { font-size: 13px; }

/* ---------- status tags: bordered mono, never a filled pill ---------- */

.pill {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  border-radius: 4px;
  padding: 3px 8px;
  color: var(--ink-faint);
}
.pill-draft { color: var(--ink-faint); }
.pill-contract_sent { color: var(--accent-text); }
.pill-viewed { color: var(--blue); }
.pill-signed { color: var(--violet); }
.pill-payment_sent { color: var(--amber); }
.pill-paid { color: var(--green); background: var(--green-wash); }
.pill-refunded { color: var(--red); }
.pill-cancelled { color: var(--ink-faint); }

/* ---------- facts sheet ---------- */

dl.facts {
  display: grid;
  grid-template-columns: 240px 1fr;
  background: #ffffff;
  border: 2px solid var(--rule);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-offset);
  overflow: hidden;
  margin: 0 0 26px;
}
dl.facts dt {
  padding: 11px 16px;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  background: var(--bg-raised);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
dl.facts dd { padding: 11px 16px; margin: 0; border-bottom: 1px solid var(--line); }
dl.facts dt:last-of-type, dl.facts dd:last-of-type { border-bottom: 0; }

/* ---------- forms: mono labels, underline fields ---------- */

.form, .narrow { max-width: 660px; }
fieldset {
  border: 0;
  border-top: 2px solid var(--rule);
  padding: 0;
  margin: 0 0 34px;
}
legend {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 0 10px 0 0;
}
label {
  display: block;
  margin: 20px 0 2px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
input, select, textarea {
  width: 100%;
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--line-2);
  border-radius: 0;
  padding: 9px 2px;
  transition: border-color 0.15s ease;
}
input:hover, select:hover, textarea:hover { border-bottom-color: var(--ink-soft); }
input:focus, select:focus, textarea:focus { outline: none; border-bottom-color: var(--blue); }
input::placeholder, textarea::placeholder { color: var(--ink-faint); }
select { appearance: none; padding-right: 24px; cursor: pointer; }
textarea { resize: vertical; border: 2px solid var(--line-2); border-radius: var(--r-sm); padding: 10px 12px; }
textarea:focus { border-color: var(--blue); }

.computed {
  margin: 26px 0 2px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.computed strong { font-family: var(--font-body); font-size: 20px; letter-spacing: -0.01em; color: var(--ink); text-transform: none; }

.warnlist {
  border: 2px solid var(--amber);
  border-radius: var(--r-md);
  background: var(--amber-wash);
  color: var(--amber);
  padding: 14px 16px 14px 34px;
  margin: 0 0 26px;
  font-size: 14.5px;
}

/* ---------- the new deal screen: one form, search first ----------
   Three numbered steps on one sheet. The only things typed by hand in the normal case are
   the two fees and the day count, so those get the width and everything GoHighLevel
   already knows is shown back as a confirmed card rather than as inputs. */

.form.newdeal { max-width: 840px; }

.step { margin: 0 0 38px; }
.step-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  border-top: 2px solid var(--rule);
  padding-top: 12px;
  margin: 0 0 18px;
}
.step-num { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--ink); }
.step-label {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* the search bar: the first and biggest thing on the page */

.seek { display: flex; align-items: stretch; gap: 0; }
.seek-input {
  flex: 1 1 auto;
  font-size: 21px;
  padding: 14px 14px;
  border: 2px solid var(--ink);
  border-right: 0;
  border-radius: var(--r-sm) 0 0 var(--r-sm);
  background: #ffffff;
}
.seek-input:hover { border-color: var(--ink); }
.seek-input:focus { border-color: var(--blue); outline: 2px solid var(--blue-wash); outline-offset: 0; }
.seek-go {
  flex: 0 0 auto;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: 14px 34px;
  font-size: 16px;
}
.seek-go:hover { transform: none; box-shadow: none; }
.seek-hint { margin: 9px 0 0; font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); }

.seek-msg { margin-top: 20px; }
.seek-note { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-faint); }
.seek-none {
  border: 2px dashed var(--line-2);
  border-radius: var(--r-md);
  padding: 24px 22px;
  background: var(--paper);
}
.seek-none-head { font-weight: 650; margin-bottom: 4px; }
.seek-none p:last-child { margin-bottom: 0; }

/* results: whole card is the button */

.hits-count {
  margin: 20px 0 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.hits { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hit {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  text-align: left;
  padding: 16px 18px;
  background: #ffffff;
  color: var(--ink);
  border: 2px solid var(--line-2);
  border-radius: var(--r-md);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.4;
}
.hit:hover, .hit:focus-visible {
  background: #ffffff;
  color: var(--ink);
  border-color: var(--ink);
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 -1px rgba(15, 191, 251, 0.3);
  outline: none;
}
.hit-name { font-size: 18px; font-weight: 650; letter-spacing: -0.01em; }
.hit-co { font-size: 14.5px; color: var(--ink-soft); }
.hit-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-faint);
  word-break: break-word;
}
.hit-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }

/* the confirmed contact, read back at a glance */

.picked {
  margin-top: 20px;
  border: 2px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--paper);
  background-image: var(--grid-paper);
  background-size: 28px 28px;
  box-shadow: var(--shadow-offset);
  padding: 16px 20px 18px;
}
.picked-head { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.picked-src {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green);
  border: 1px solid currentColor;
  border-radius: 4px;
  padding: 2px 7px;
}
.picked-change { margin-left: auto; padding: 8px 18px; font-size: 13px; }
.picked-name {
  margin: 0;
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.02;
}
.picked-co { margin: 2px 0 12px; font-size: 15.5px; color: var(--ink-soft); }
.picked-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px 22px;
  border-top: 1.5px dashed var(--line-2);
  padding-top: 12px;
}
.picked-facts li { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pf-k {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.pf-v { font-size: 15px; word-break: break-word; }
.pf-v .missing { font-size: 10px; }
.picked-gap {
  margin: 12px 0 0;
  padding-top: 11px;
  border-top: 1.5px dashed var(--line-2);
  font-size: 13.5px;
  color: var(--amber);
  font-weight: 600;
}

/* the old column of inputs, folded away */

.fixer { margin-top: 18px; }
.fixer > summary {
  cursor: pointer;
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  border-bottom: 1.5px solid var(--line-2);
  padding-bottom: 2px;
}
.fixer > summary:hover { color: var(--ink); border-bottom-color: var(--ink); }
.fixer > summary::marker { color: var(--ink-faint); }
.fixer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 26px;
  margin-top: 12px;
  padding: 16px 20px 20px;
  border: 2px solid var(--line-2);
  border-radius: var(--r-md);
}
.fixer-cell { min-width: 0; }
.fixer-cell label, .money-cell label, .agree-cell label { margin-top: 14px; }

/* the numbers */

.money-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 26px; }
.money-cell { min-width: 0; }
.money-cell input { font-family: var(--font-mono); font-size: 19px; font-variant-numeric: tabular-nums; }

.agree-row { display: grid; grid-template-columns: 260px 1fr; gap: 0 26px; align-items: start; }
.agree-cell { min-width: 0; }
.agree-note textarea { font-size: 14.5px; margin-top: 2px; }
.agree-fixed { margin: 6px 0 4px; font-family: var(--font-body); font-size: 16px; color: var(--ink); }

/* ---------- panels ---------- */

.panel {
  border: 2px solid var(--rule);
  border-radius: var(--r-md);
  background: #ffffff;
  padding: 20px 22px;
  margin: 26px 0;
  box-shadow: var(--shadow-offset);
}
.panel h2 { margin-top: 0; font-size: 19px; }
.panel ul { margin: 0 0 14px; padding-left: 20px; }
.panel-warn { border-color: var(--amber); background: var(--amber-wash); color: var(--amber); box-shadow: 9px 9px 0 -1px rgba(214, 150, 20, 0.16); }
.panel-stop { border-color: var(--red); background: var(--red-wash); color: var(--red); box-shadow: 9px 9px 0 -1px rgba(168, 27, 20, 0.14); }

/* ---------- the confirm screen: the hard gate, so it gets the poster treatment ---------- */

.confirm {
  border: 2px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--paper);
  background-image: var(--grid-paper);
  background-size: 32px 32px;
  box-shadow: 12px 12px 0 -2px rgba(15, 191, 251, 0.22);
  padding: 6px 26px;
  margin: 0 0 30px;
}
.confirm-bad { box-shadow: 12px 12px 0 -2px rgba(168, 27, 20, 0.16); border-color: var(--red); }
.confirm-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 26px;
  padding: 18px 0;
  border-bottom: 1.5px dashed var(--line-2);
}
.confirm-row:last-child { border-bottom: 0; }
.confirm-label {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  max-width: 54%;
}
.confirm-value {
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: 900;
  font-size: clamp(26px, 3.2vw, 36px);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.confirm-total { border-top: 2px solid var(--rule); }
.confirm-total .confirm-label { color: var(--ink); font-weight: 600; }
.confirm-total .confirm-value { font-size: clamp(32px, 4.2vw, 46px); }

/* ---------- sign-in and one-time secrets ---------- */

body.centered {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 64px 20px 80px;
  background-color: var(--paper);
  background-image: var(--grid-paper);
  background-size: 36px 36px;
}
.card {
  width: 100%;
  max-width: 560px;
  background: #ffffff;
  border: 2px solid var(--rule);
  border-radius: var(--r-md);
  box-shadow: 12px 12px 0 -2px rgba(15, 191, 251, 0.22);
  padding: 34px 36px 40px;
}
.card .card-logo { height: 32px; width: auto; margin-bottom: 26px; }
.card h1 { margin-top: 0; }
.card h2 { font-size: 17px; margin-top: 30px; }
.card button { width: 100%; margin-top: 26px; }
.codeblock {
  font-family: var(--font-mono);
  font-size: 13.5px;
  letter-spacing: 0.04em;
  background: var(--bg-raised);
  border: 1.5px solid var(--line-2);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  word-break: break-all;
}
.codeblock.inline { display: inline-block; padding: 2px 7px; font-size: 12px; }
ul.codes { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }

/* ---------- module screens inherit all of the above ---------- */

.stat-list { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 10px; }
.stat-list li { display: flex; align-items: baseline; gap: 12px; }
.stat-value {
  font-family: var(--font-mono);
  font-size: 19px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.stat-label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  border-radius: 4px;
  padding: 2px 7px;
  color: var(--ink-faint);
}
.tag-ok { color: var(--green); }
.tag-warn { color: var(--amber); }
.tag-stop { color: var(--red); }
.tag-info { color: var(--accent-text); }

/* ---------- module: finance (modules/finance.js) ----------
   The module emits semantic markup with class names only. Its look lives here so the
   screen reads as the same sheet as the rest of the portal. */

.fin-section { margin-bottom: 44px; }
.fin-bar { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 26px; }
.fin-bar-meta { margin: 0; font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-faint); }
.fin-refresh { margin-left: auto; }

.fin-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0;
  border: 2px solid var(--rule);
  border-radius: var(--r-md);
  background: #ffffff;
  box-shadow: var(--shadow-offset);
  overflow: hidden;
  margin: 0 0 24px;
  list-style: none;
  padding: 0;
}
.fin-kpi {
  padding: 18px 20px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fin-kpi:last-child { border-right: 0; }
.fin-kpi-value {
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: 900;
  font-size: 26px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.fin-kpi-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

table.fin-table {
  width: 100%;
  border-collapse: collapse;
  background: #ffffff;
  border: 2px solid var(--rule);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-offset);
  margin: 0 0 18px;
}
table.fin-table th, table.fin-table td {
  text-align: left;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
table.fin-table thead th {
  background: var(--bg-raised);
  border-bottom: 2px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}
table.fin-table tbody tr:last-child td { border-bottom: 0; }
table.fin-table tfoot td, tr.fin-total td {
  border-top: 2px solid var(--rule);
  border-bottom: 0;
  background: var(--bg-raised);
  font-weight: 650;
}
.fin-caption {
  caption-side: top;
  text-align: left;
  padding: 0 0 10px 16px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}
.fin-num { font-family: var(--font-mono); font-size: 13.5px; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
th.fin-num { text-align: right; }

.fin-state {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  border-radius: 4px;
  padding: 2px 7px;
  color: var(--ink-faint);
}
.fin-state.fin-state-open { color: var(--green); }
.fin-state.fin-state-soon { color: var(--amber); }
.fin-state.fin-state-expired { color: var(--red); }
/* The module also puts the state class on the row. Rows get a wash, never a text colour. */
tr.fin-state-soon > td { background: var(--amber-wash); }
tr.fin-state-expired > td { color: var(--ink-faint); }

.fin-warn {
  border: 2px solid var(--amber);
  border-radius: var(--r-md);
  background: var(--amber-wash);
  color: var(--amber);
  padding: 14px 16px;
  margin: 0 0 22px;
  font-size: 14.5px;
}
.fin-note { font-family: var(--font-mono); font-size: 12px; line-height: 1.6; color: var(--ink-faint); margin: 0 0 18px; }
.fin-empty {
  border: 2px dashed var(--line-2);
  border-radius: var(--r-md);
  padding: 30px 20px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  margin: 0 0 22px;
}

@media (max-width: 760px) {
  .money-row, .fixer-grid, .agree-row { grid-template-columns: 1fr; }
  .seek { flex-direction: column; }
  .seek-input { border-right: 2px solid var(--ink); border-radius: var(--r-sm) var(--r-sm) 0 0; font-size: 18px; }
  .seek-go { border-radius: 0 0 var(--r-sm) var(--r-sm); width: 100%; }
  .picked-head { flex-wrap: wrap; }
  dl.facts { grid-template-columns: 1fr; }
  dl.facts dt { border-right: 0; border-bottom: 0; padding-bottom: 2px; background: #ffffff; }
  .confirm-label { max-width: 100%; }
  .confirm-row { flex-direction: column; gap: 6px; align-items: flex-start; }
  .topbar { gap: 18px; }
  .who { margin-left: 0; }
}