.countersign-app {
  --paper: #F4F6F3;
  --surface: #FFFFFF;
  --ink: #15302A;
  --ink-soft: #4A5A53;
  --line: #DCE1DA;
  --brand: #1C6B57;
  --brand-deep: #134E40;
  --pending: #B45A2B;
  --pending-bg: #FBEEE5;
  --confirmed-bg: #E5F0EB;
  --font-display: 'Newsreader', Georgia, serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  max-width: 720px;
  margin: 0 auto;
  padding: 22px 16px 48px;
  box-sizing: border-box;
}
.countersign-app * { box-sizing: border-box; }

.countersign-app .cs-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--brand); margin: 0 0 6px;
}
.countersign-app .cs-h {
  font-family: var(--font-display); font-size: 26px; font-weight: 600;
  color: var(--ink); margin: 0 0 16px; line-height: 1.15;
}
.countersign-app .cs-body { font-size: 14px; line-height: 1.55; color: var(--ink-soft); margin: 0 0 16px; }
.countersign-app .cs-note { margin: 12px 0 0; color: var(--ink); }
.countersign-app .cs-label {
  display: block; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 6px;
}
.countersign-app .cs-meta { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-soft); margin: 0; }

.countersign-app .cs-input {
  width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 8px;
  font-size: 14px; font-family: var(--font-body); color: var(--ink); background: var(--surface);
  margin-bottom: 8px;
}
.countersign-app .cs-input:focus { outline: 2px solid var(--brand); outline-offset: 2px; }
.countersign-app .cs-code-input { letter-spacing: .15em; font-family: var(--font-mono); text-transform: uppercase; }

.countersign-app .cs-btn {
  background: var(--brand); color: #fff; border: none; border-radius: 8px;
  padding: 11px 18px; font-size: 14px; font-weight: 600; font-family: var(--font-body);
  cursor: pointer; margin-top: 6px;
}
.countersign-app .cs-btn:hover { background: var(--brand-deep); }
.countersign-app .cs-btn:disabled { opacity: .6; cursor: default; }
.countersign-app .cs-btn-outline {
  background: var(--surface); color: var(--ink); border: 1px solid var(--line);
  border-radius: 8px; padding: 9px 14px; font-size: 13px; font-weight: 600;
  font-family: var(--font-body); cursor: pointer;
}

.countersign-app .cs-gate { max-width: 420px; }
.countersign-app .cs-error, .countersign-app .cs-statement { font-size: 14px; }
.countersign-app .cs-error { color: var(--pending); margin: 0 0 10px; }

.countersign-app .cs-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }

.countersign-app .cs-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 20px; margin-bottom: 12px;
}
.countersign-app .cs-empty-card { text-align: center; padding: 36px 22px; }
.countersign-app .cs-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.countersign-app .cs-card-title { font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--ink); margin: 0 0 4px; }

.countersign-app .cs-pill {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px;
}
.countersign-app .cs-pill::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; opacity: .9; }
.countersign-app .cs-ok { background: var(--confirmed-bg); color: var(--brand-deep); }
.countersign-app .cs-wait { background: var(--pending-bg); color: var(--pending); }

.countersign-app .cs-links { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 12px; }
.countersign-app .cs-link { color: var(--ink-soft); font-size: 13px; font-weight: 500; text-decoration: underline; }
.countersign-app .cs-link:hover { color: var(--brand-deep); }
.countersign-app .cs-statement { font-style: italic; color: var(--ink-soft); margin: 8px 0 6px; }
.countersign-app .cs-done { font-family: var(--font-mono); font-size: 11.5px; color: var(--brand-deep); margin-top: 14px; }
.countersign-app .cs-ack { margin-top: 14px; }

.cs-overlay {
  position: fixed; inset: 0; background: rgba(21,48,42,.45);
  display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 99999;
}
.cs-modal {
  background: var(--surface, #fff); border: 1px solid var(--line, #DCE1DA); border-radius: 12px; padding: 22px;
  max-width: 420px; width: 100%; font-family: var(--font-body, system-ui, sans-serif); color: var(--ink, #15302A);
}
.cs-modal .cs-card-title { font-family: var(--font-display, Georgia, serif); font-size: 18px; font-weight: 600; margin: 0; }
.cs-modal .cs-body { font-size: 14px; line-height: 1.55; color: var(--ink-soft, #4A5A53); }
.cs-modal .cs-statement { font-style: italic; }
.cs-modal .cs-meta { font-family: var(--font-mono, monospace); font-size: 11.5px; color: var(--ink-soft, #4A5A53); margin: 0 0 16px; }
.cs-modal-actions { display: flex; gap: 10px; }
.cs-modal .cs-btn { background: var(--brand, #1C6B57); color: #fff; border: none; border-radius: 8px; padding: 11px 18px; font-size: 14px; font-weight: 600; cursor: pointer; }
.cs-modal .cs-btn-outline { background: var(--surface, #fff); color: var(--ink, #15302A); border: 1px solid var(--line, #DCE1DA); border-radius: 8px; padding: 11px 16px; font-size: 13px; font-weight: 600; cursor: pointer; }

.cs-toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  background: var(--ink, #15302A); color: #fff; padding: 11px 18px; border-radius: 9px;
  font-size: 13.5px; font-family: var(--font-body, system-ui, sans-serif); z-index: 100000;
  box-shadow: 0 8px 24px rgba(21,48,42,.25); max-width: 90%; text-align: center;
}