/* Data Drive KYC/KYS — Single-page smart form */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--paper-bg);
  -webkit-font-smoothing: antialiased;
}

/* ============ LAYOUT ============ */
.page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
}

/* ============ SIDEBAR (sticky TOC + progress) ============ */
.sidebar {
  background: var(--brand-gradient);
  color: var(--fg-on-brand);
  padding: 28px 22px;
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 32px;
}
.brand-mark {
  width: 32px; height: 32px;
  position: relative;
  flex-shrink: 0;
}
.brand-mark::before, .brand-mark::after {
  content: "";
  position: absolute;
  width: 0; height: 0;
  top: 50%; transform: translateY(-50%);
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
}
.brand-mark::before { border-left: 18px solid var(--burg-300); left: 0; opacity: 0.8; }
.brand-mark::after  { border-left: 18px solid var(--gold-400); left: 7px; }

.brand-name {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.05;
  color: #FAF7F2;
}
.brand-sub {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-300);
  margin-top: 3px;
}

.toc-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-300);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.toc-label::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--gold-400), transparent);
  opacity: 0.3;
}

.toc {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.toc-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 7px;
  cursor: pointer;
  font-size: 13px;
  color: rgba(250, 247, 242, 0.7);
  font-weight: 500;
  transition: all 140ms ease;
  text-decoration: none;
  border: 0;
  background: transparent;
  text-align: left;
  width: 100%;
  font-family: inherit;
}
.toc-item:hover { background: rgba(255,255,255,0.06); color: #FAF7F2; }
.toc-item.active {
  background: rgba(0,0,0,0.25);
  color: #FAF7F2;
  font-weight: 600;
}
.toc-num {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(250, 247, 242, 0.25);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  transition: all 200ms ease;
}
.toc-item.complete .toc-num {
  background: var(--gold-400);
  border-color: var(--gold-400);
  color: var(--burg-800);
}
.toc-item.complete .toc-num::before { content: "✓"; }
.toc-item.complete .toc-num span { display: none; }
.toc-label-text { flex: 1; }
.toc-count {
  font-size: 10px;
  color: rgba(250, 247, 242, 0.4);
  font-variant-numeric: tabular-nums;
}

.sb-progress {
  margin-top: auto;
  padding-top: 20px;
}
.sb-progress-bar {
  height: 4px;
  background: rgba(0,0,0,0.3);
  border-radius: 2px;
  overflow: hidden;
}
.sb-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold-400), var(--gold-300));
  transition: width 400ms cubic-bezier(0.2,0.8,0.2,1);
}
.sb-progress-meta {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.sb-progress-meta .pct { color: var(--gold-300); }
.sb-progress-meta .lbl { color: rgba(250, 247, 242, 0.5); }

.save-status {
  margin-top: 14px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(250, 247, 242, 0.5);
  display: flex;
  align-items: center;
  gap: 6px;
}
.save-status .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green-500);
}
.save-status.saving .dot {
  background: var(--gold-400);
  animation: blink 1s infinite;
}
@keyframes blink { 50% { opacity: 0.3; } }

/* ============ MAIN ============ */
.main {
  padding: 0 0 200px;
  min-width: 0;
}

.hero {
  padding: 56px 64px 40px;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border-subtle);
}
.hero-glass {
  position: absolute;
  right: -120px;
  top: -40px;
  width: 380px;
  pointer-events: none;
  opacity: 0.85;
  transform: rotate(-8deg);
  filter: drop-shadow(0 20px 40px rgba(122,46,46,0.12));
}
.hero-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-brand);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.hero-eyebrow::before {
  content: "";
  width: 28px; height: 1px;
  background: var(--burg-600);
}
.hero h1 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 56px;
  line-height: 1.0;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  color: var(--fg-1);
  max-width: 720px;
}
.hero h1 em {
  font-style: italic;
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero p {
  font-size: 16px;
  line-height: 1.55;
  color: var(--fg-3);
  margin: 0;
  max-width: 580px;
}

/* ============ SECTIONS ============ */
.section {
  padding: 40px 64px;
  border-bottom: 1px solid var(--border-subtle);
  scroll-margin-top: 16px;
  position: relative;
}
.section:last-of-type { border-bottom: 0; }

.section-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 8px;
}
.section-num {
  font-family: var(--font-serif);
  font-size: 22px;
  font-style: italic;
  color: var(--fg-brand);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.section h2 {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 0;
  color: var(--fg-1);
}
.section-desc {
  font-size: 14px;
  color: var(--fg-3);
  margin: 4px 0 24px 38px;
  max-width: 640px;
  line-height: 1.5;
}
.section-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 9999px;
  margin-left: auto;
}
.section-status.complete { background: var(--green-100); color: var(--green-700); }
.section-status.partial { background: var(--gold-100); color: var(--gold-700); }
.section-status.empty { background: var(--paper-deep); color: var(--fg-3); }

/* ============ FIELDS ============ */
.row {
  display: grid;
  gap: 14px;
  margin-bottom: 14px;
}
.row.cols-2 { grid-template-columns: 1fr 1fr; }
.row.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.row.cols-1-2 { grid-template-columns: 1fr 2fr; }

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.field label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-2);
  display: flex;
  align-items: center;
  gap: 6px;
}
.field label .req { color: var(--gold-500); font-size: 12px; line-height: 1; }
.field label .hint { color: var(--fg-4); font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 11px; }

.input, .select, .textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--border-default);
  background: var(--paper-card);
  border-radius: 8px;
  font-size: 14px;
  color: var(--fg-1);
  font-family: inherit;
  font-weight: 500;
  outline: none;
  transition: border-color 140ms, box-shadow 140ms;
}
.input::placeholder { color: var(--fg-4); font-weight: 400; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--burg-300); }
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--burg-600);
  box-shadow: 0 0 0 3px rgba(122,46,46,0.10);
}
.textarea { resize: vertical; min-height: 80px; line-height: 1.5; font-weight: 400; }
.select { appearance: none; padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%237A2E2E' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

/* ============ CHIPS / MULTI-SELECT ============ */
.chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chip-btn {
  padding: 9px 14px;
  border: 1.5px solid var(--border-default);
  background: var(--paper-card);
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-2);
  cursor: pointer;
  font-family: inherit;
  transition: all 140ms ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.chip-btn:hover { border-color: var(--burg-400); color: var(--fg-1); }
.chip-btn.selected {
  background: var(--burg-600);
  color: #FAF7F2;
  border-color: var(--burg-600);
}
.chip-btn .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
}
.chip-btn.selected .dot { opacity: 1; background: var(--gold-300); }

/* ============ YES/NO ============ */
.yn {
  display: inline-flex;
  border: 1.5px solid var(--border-default);
  border-radius: 9999px;
  overflow: hidden;
  background: var(--paper-card);
  padding: 3px;
}
.yn-btn {
  padding: 7px 18px;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--fg-3);
  cursor: pointer;
  border-radius: 9999px;
  transition: all 140ms ease;
}
.yn-btn:hover { color: var(--fg-1); }
.yn-btn.on.yes {
  background: var(--burg-600);
  color: #FAF7F2;
}
.yn-btn.on.no {
  background: var(--ink-1);
  color: #FAF7F2;
}

/* Yes/No question row */
.qrow {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px dashed var(--border-subtle);
}
.qrow:last-child { border-bottom: 0; }
.qrow .qtext {
  flex: 1;
  font-size: 14px;
  color: var(--fg-1);
  font-weight: 500;
  line-height: 1.4;
}
.qrow .qtext .qhint {
  display: block;
  font-weight: 400;
  font-size: 12px;
  color: var(--fg-3);
  margin-top: 2px;
}

/* ============ CONDITIONAL BLOCK ============ */
.conditional {
  margin-top: 14px;
  padding: 18px 18px 6px;
  background: var(--burg-50);
  border-left: 3px solid var(--burg-600);
  border-radius: 4px 12px 12px 4px;
  animation: slideIn 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.conditional .cond-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--burg-600);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.conditional .cond-label::before { content: "↳"; font-size: 14px; }
@keyframes slideIn {
  from { opacity: 0; transform: translateY(-6px); max-height: 0; }
  to { opacity: 1; transform: translateY(0); max-height: 1000px; }
}

/* ============ ROLE CARDS ============ */
.role-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.role-card {
  position: relative;
  padding: 14px 16px;
  border: 1.5px solid var(--border-default);
  background: var(--paper-card);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: all 160ms ease;
}
.role-card:hover {
  border-color: var(--burg-300);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.role-card.on {
  border-color: var(--burg-600);
  background: var(--burg-50);
  box-shadow: 0 0 0 3px rgba(122,46,46,0.08);
}
.role-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--fg-1);
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.role-desc {
  font-size: 12px;
  color: var(--fg-3);
  line-height: 1.4;
}
.role-check {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--border-default);
  display: flex; align-items: center; justify-content: center;
  transition: all 160ms ease;
}
.role-card.on .role-check {
  background: var(--burg-600);
  border-color: var(--burg-600);
  color: #FAF7F2;
}
.role-card.on .role-check::before { content: "✓"; font-size: 10px; font-weight: 800; }

/* ============ DROPZONE / FILES ============ */
.dz {
  border: 1.5px dashed var(--border-default);
  border-radius: 10px;
  padding: 18px;
  text-align: center;
  background: var(--paper-card);
  cursor: pointer;
  transition: all 180ms ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 13px;
  color: var(--fg-3);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.dz:hover, .dz.drag {
  border-color: var(--burg-600);
  background: var(--burg-50);
  color: var(--fg-1);
}
.dz svg { color: var(--burg-600); }

.files {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}
.file {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--paper-card);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
}
.file-thumb {
  width: 28px; height: 28px;
  border-radius: 6px;
  background: var(--burg-50);
  color: var(--burg-600);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 800;
}
.file-info { flex: 1; min-width: 0; }
.file-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.file-meta {
  font-size: 11px;
  color: var(--fg-3);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}
.scan {
  flex: 1;
  max-width: 100px;
  height: 2px;
  background: var(--paper-deep);
  border-radius: 2px;
  overflow: hidden;
}
.scan-fill {
  height: 100%;
  background: var(--burg-600);
  transition: width 200ms linear;
}
.file-status-pill {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 9999px;
  flex-shrink: 0;
}
.file-status-pill.scan { background: var(--burg-50); color: var(--burg-600); flex: none; max-width: none; height: auto; }
.file-status-pill.ocr { background: var(--gold-50); color: var(--gold-700); }
.file-status-pill.clean { background: var(--green-100); color: var(--green-700); }
.file-x {
  background: transparent;
  border: 0;
  color: var(--fg-4);
  cursor: pointer;
  padding: 4px;
  font-size: 16px;
  line-height: 1;
}
.file-x:hover { color: var(--red-500); }

/* ============ DOC CHECKLIST ============ */
.doc-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.doc-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: var(--paper-card);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  cursor: pointer;
  transition: all 140ms ease;
  font-family: inherit;
  text-align: left;
  font-size: 13px;
  color: var(--fg-1);
  position: relative;
}
.doc-row:hover { border-color: var(--burg-300); }
.doc-row.uploaded { background: var(--green-100); border-color: var(--green-500); }
.doc-row .doc-icon {
  width: 24px; height: 24px;
  border-radius: 5px;
  background: var(--paper-deep);
  color: var(--fg-3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 800;
  margin-top: 1px;
}
.doc-row.uploaded .doc-icon { background: var(--green-500); color: #fff; }
.doc-row.uploaded .doc-icon::before { content: "✓"; }
.doc-row.uploaded .doc-icon span { display: none; }
.doc-info { flex: 1; min-width: 0; }
.doc-name { font-weight: 600; line-height: 1.3; }
.doc-name .req { color: var(--gold-500); margin-left: 3px; }
.doc-hint { font-size: 11px; color: var(--fg-3); margin-top: 2px; line-height: 1.4; }

/* ============ ADD/REMOVE BUTTONS ============ */
.linkbtn {
  background: transparent;
  border: 0;
  color: var(--fg-brand);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  padding: 8px 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
}
.linkbtn:hover { color: var(--burg-700); }
.linkbtn.danger { color: var(--red-500); }

.subcard {
  padding: 16px;
  background: var(--paper-deep);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  margin-bottom: 10px;
  position: relative;
}
.subcard-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-brand);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.subcard-x {
  position: absolute;
  top: 12px;
  right: 12px;
  background: transparent;
  border: 0;
  color: var(--fg-4);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 18px;
  line-height: 1;
}
.subcard-x:hover { background: rgba(192,57,43,0.1); color: var(--red-500); }

/* ============ STICKY BOTTOM BAR ============ */
.dock {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  margin-left: 140px; /* compensate for sidebar so it centers in main area */
  background: var(--paper-card);
  border: 1px solid var(--border-default);
  border-radius: 9999px;
  padding: 8px 8px 8px 22px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: var(--shadow-lg);
  z-index: 50;
  min-width: 540px;
}
.dock-progress {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.dock-progress-bar {
  height: 4px;
  background: var(--paper-deep);
  border-radius: 2px;
  overflow: hidden;
  width: 100%;
}
.dock-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--burg-600), var(--gold-400));
  transition: width 400ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.dock-meta {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.dock-meta .pct { color: var(--fg-1); }
.dock-flags {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 9999px;
  background: transparent;
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--fg-2);
  text-transform: uppercase;
}
.dock-flags .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green-500);
}
.dock-flags.amber { color: var(--amber-700); border-color: var(--amber-500); }
.dock-flags.amber .dot { background: var(--amber-500); animation: pulseA 2s infinite; }
.dock-flags.red { color: var(--red-700); border-color: var(--red-500); }
.dock-flags.red .dot { background: var(--red-500); animation: pulseR 1.4s infinite; }
@keyframes pulseA { 0%,100% { box-shadow: 0 0 0 0 rgba(217,119,6,0.5); } 50% { box-shadow: 0 0 0 6px rgba(217,119,6,0); } }
@keyframes pulseR { 0%,100% { box-shadow: 0 0 0 0 rgba(192,57,43,0.6); } 50% { box-shadow: 0 0 0 8px rgba(192,57,43,0); } }

.btn {
  padding: 11px 22px;
  border-radius: 9999px;
  font-family: inherit;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  border: 1.5px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 160ms ease;
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary {
  background: var(--burg-600);
  color: #FAF7F2;
}
.btn-primary:hover:not(:disabled) {
  background: var(--burg-500);
  transform: translateY(-1px);
  box-shadow: var(--shadow-brand);
}
.btn-primary:active:not(:disabled) { transform: translateY(0) scale(0.98); }
.btn-gold {
  background: var(--gold-gradient);
  color: var(--burg-800);
}
.btn-gold:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: var(--shadow-gold);
}

/* ============ FLAG TOAST ============ */
.toasts {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.toast {
  background: var(--paper-card);
  border: 1px solid var(--border-default);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  gap: 10px;
  width: 320px;
  box-shadow: var(--shadow-lg);
  animation: toastIn 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: auto;
}
@keyframes toastIn {
  from { transform: translateX(110%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
.toast.amber { border-left: 4px solid var(--amber-500); }
.toast.red { border-left: 4px solid var(--red-500); }
.toast-icon {
  width: 28px; height: 28px;
  border-radius: 6px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 12px;
}
.toast.amber .toast-icon { background: var(--amber-100); color: var(--amber-700); }
.toast.red .toast-icon { background: var(--red-100); color: var(--red-700); }
.toast-body { flex: 1; min-width: 0; }
.toast-title {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.toast.amber .toast-title { color: var(--amber-700); }
.toast.red .toast-title { color: var(--red-700); }
.toast-msg { font-size: 12px; color: var(--fg-2); line-height: 1.4; }

/* ============ SUBMIT MODAL ============ */
.modal-back {
  position: fixed; inset: 0;
  background: rgba(20,8,11,0.5);
  backdrop-filter: blur(6px);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  animation: fadeIn 200ms ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal {
  background: var(--paper-card);
  border-radius: 24px;
  padding: 48px;
  max-width: 540px;
  width: 100%;
  text-align: center;
  box-shadow: var(--shadow-xl);
  animation: modalIn 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
  position: relative;
  overflow: hidden;
}
.modal::before {
  content: ""; position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--gold-gradient);
}
@keyframes modalIn {
  from { transform: scale(0.92); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.modal-icon {
  width: 64px; height: 64px;
  border-radius: 16px;
  background: var(--gold-gradient);
  color: var(--burg-800);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  font-size: 28px;
  font-weight: 800;
}
.modal h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 36px;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}
.modal p {
  font-size: 15px;
  color: var(--fg-3);
  line-height: 1.55;
  margin: 0 0 24px;
}
.modal-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  text-align: left;
  background: var(--paper-deep);
  padding: 16px 20px;
  border-radius: 12px;
  margin-bottom: 24px;
}
.modal-meta-item .lbl {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 4px;
}
.modal-meta-item .val {
  font-size: 16px;
  font-weight: 700;
  color: var(--fg-1);
}
.modal-cta {
  display: flex;
  gap: 10px;
  justify-content: center;
}

/* ============ APPENDIX BANNER ============ */
.appendix-banner {
  background: linear-gradient(135deg, var(--burg-50) 0%, var(--gold-50) 100%);
  border: 1px solid var(--gold-200);
  border-left: 3px solid var(--gold-400);
  border-radius: 10px;
  padding: 12px 16px;
  margin: 0 0 20px 38px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--ink-2);
  max-width: 640px;
}
.appendix-banner strong { color: var(--burg-700); }

/* ============ HELPERS ============ */
.section-content { padding-left: 38px; }

@media (max-width: 1100px) {
  .page { grid-template-columns: 1fr; min-width: 0; }
  .main { min-width: 0; overflow-x: hidden; }
  .sidebar {
    position: sticky;
    top: 0;
    height: auto;
    padding: 12px 18px;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    z-index: 20;
    overflow: visible;
    min-width: 0;
  }
  .sidebar nav { flex: 1 1 0; min-width: 0; }
  .brand { margin-bottom: 0; flex-shrink: 0; }
  .brand-sub { display: none; }
  .brand-name { font-size: 15px; }
  .toc-label { display: none; }
  .toc {
    flex-direction: row;
    overflow-x: auto;
    margin: 0;
    flex: 1 1 0;
    min-width: 0;
    gap: 4px;
    scrollbar-width: thin;
  }
  .toc::-webkit-scrollbar { height: 2px; }
  .toc-item {
    flex-shrink: 0;
    padding: 6px 10px;
    font-size: 12px;
    white-space: nowrap;
  }
  .toc-item .toc-label-text { font-size: 12px; }
  .sb-progress {
    margin-top: 0;
    padding-top: 0;
    flex-shrink: 0;
    width: 140px;
  }
  .sb-progress-meta { font-size: 9px; }
  .save-status { display: none; }
  .section, .hero { padding-left: 32px; padding-right: 32px; }
  .hero { padding-top: 32px; padding-bottom: 28px; }
  .hero h1 { font-size: 40px; }
  .dock {
    margin-left: 0;
    min-width: auto;
    width: calc(100vw - 32px);
    max-width: 640px;
  }
}

@media (max-width: 720px) {
  .sidebar { flex-wrap: wrap; }
  .sb-progress { width: 100%; order: 3; }
  .toc { order: 2; width: 100%; }
  .row.cols-2, .row.cols-3, .row.cols-1-2 { grid-template-columns: 1fr; }
  .doc-list { grid-template-columns: 1fr; }
  .role-grid { grid-template-columns: 1fr; }
  .section, .hero { padding-left: 20px; padding-right: 20px; }
  .section-content { padding-left: 0; }
  .section-desc, .appendix-banner { margin-left: 0; }
  .hero h1 { font-size: 32px; }
}

/* =========================================================
   ─── EXTENDED: optional status, consent, export overlay,
       polish microanimations
   ========================================================= */

/* Optional section badge (gold) */
.section-status.optional {
  background: var(--gold-100);
  color: var(--gold-700);
  position: relative;
}
.section-status.optional::before {
  content: "★";
  margin-right: 4px;
  font-size: 9px;
  color: var(--gold-500);
}

/* Consent block — dedicated styling for the personal-data attestation */
.consent-card {
  margin-top: 18px;
  padding: 18px 20px;
  border: 1px solid var(--gold-200);
  border-left: 3px solid var(--gold-400);
  background: linear-gradient(135deg, var(--gold-50) 0%, var(--paper-card) 60%);
  border-radius: 4px 12px 12px 4px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.consent-check {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1.5px solid var(--burg-300);
  background: var(--paper-card);
  flex-shrink: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 200ms cubic-bezier(0.2,0.8,0.2,1);
  margin-top: 2px;
}
.consent-check:hover { border-color: var(--burg-600); }
.consent-check.on {
  background: var(--burg-600);
  border-color: var(--burg-600);
  box-shadow: 0 0 0 4px rgba(122,46,46,0.10);
  animation: checkPop 320ms cubic-bezier(0.2,0.8,0.2,1);
}
.consent-check.on::after {
  content: "";
  width: 11px; height: 6px;
  border-left: 2px solid var(--paper-card);
  border-bottom: 2px solid var(--paper-card);
  transform: rotate(-45deg) translate(1px, -1px);
  animation: checkDraw 280ms ease-out;
}
@keyframes checkPop {
  0%   { transform: scale(0.85); }
  60%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}
@keyframes checkDraw {
  from { opacity: 0; transform: rotate(-45deg) scale(0.4) translate(1px,-1px); }
  to   { opacity: 1; transform: rotate(-45deg) scale(1) translate(1px,-1px); }
}
.consent-text {
  flex: 1;
  font-size: 13px;
  color: var(--fg-1);
  line-height: 1.55;
}
.consent-text strong { color: var(--burg-700); font-weight: 700; }
.consent-text .consent-lead {
  display: block;
  font-weight: 700;
  color: var(--burg-700);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

/* Hero glass — gentle floating loop */
.hero-glass { animation: floatGlass 9s ease-in-out infinite; }
@keyframes floatGlass {
  0%, 100% { transform: rotate(-8deg) translateY(0); }
  50%      { transform: rotate(-6deg) translateY(-12px); }
}

/* Sidebar progress fill — subtle gold shimmer */
.sb-progress-fill, .dock-progress-fill {
  position: relative;
  overflow: hidden;
}
.sb-progress-fill::after, .dock-progress-fill::after {
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.55) 50%,
    transparent 100%);
  animation: shimmer 2.6s infinite;
}
@keyframes shimmer {
  0%   { left: -60%; }
  100% { left: 160%; }
}

/* TOC complete — subtle gold pulse on first transition */
.toc-item.complete .toc-num {
  animation: numPop 360ms cubic-bezier(0.2,0.8,0.2,1);
}
@keyframes numPop {
  0%   { transform: scale(0.8); }
  60%  { transform: scale(1.18); box-shadow: 0 0 0 4px rgba(201,169,97,0.35); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(201,169,97,0); }
}

/* Section status badge — gentle bounce on state change */
.section-status { transition: background 240ms ease, color 240ms ease; }
.section-status.complete {
  animation: badgePop 360ms cubic-bezier(0.2,0.8,0.2,1);
}
@keyframes badgePop {
  0%   { transform: scale(0.92); }
  55%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* Submit button (gold) — soft glow + flame highlight on hover */
.btn-gold {
  position: relative;
  overflow: hidden;
}
.btn-gold::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg,
    transparent 30%,
    rgba(255,255,255,0.55) 50%,
    transparent 70%);
  transform: translateX(-130%);
  transition: transform 700ms ease;
}
.btn-gold:hover:not(:disabled)::before { transform: translateX(130%); }

/* Dock — initial entrance */
.dock { animation: dockRise 520ms cubic-bezier(0.2,0.8,0.2,1) 200ms backwards; }
@keyframes dockRise {
  from { transform: translate(-50%, 24px); opacity: 0; }
  to   { transform: translate(-50%, 0);    opacity: 1; }
}

/* Hero entrance */
.hero h1   { animation: heroIn 760ms cubic-bezier(0.2,0.8,0.2,1) 80ms backwards; }
.hero p    { animation: heroIn 760ms cubic-bezier(0.2,0.8,0.2,1) 220ms backwards; }
.hero-eyebrow { animation: heroIn 700ms cubic-bezier(0.2,0.8,0.2,1) 0ms backwards; }
@keyframes heroIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =========================================================
   ─── EXPORT OVERLAY — cinematic multi-stage loader
   ========================================================= */
.export-back {
  position: fixed; inset: 0;
  background: radial-gradient(120% 100% at 50% 0%, rgba(36,12,16,0.78) 0%, rgba(20,8,11,0.92) 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  animation: fadeIn 260ms ease;
}

.export-card {
  width: 100%;
  max-width: 460px;
  background: linear-gradient(180deg, var(--paper-card) 0%, var(--paper-bg) 100%);
  border-radius: 22px;
  padding: 36px 36px 28px;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 40px 100px rgba(0,0,0,0.45),
    0 0 0 1px rgba(201,169,97,0.18);
  animation: exportRise 520ms cubic-bezier(0.2,0.8,0.2,1);
}
@keyframes exportRise {
  from { transform: translateY(28px) scale(0.96); opacity: 0; }
  to   { transform: translateY(0) scale(1);       opacity: 1; }
}

/* Top gold rule */
.export-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--gold-gradient);
}

/* Decorative seal at top-right */
.export-card::after {
  content: "";
  position: absolute;
  top: -90px; right: -90px;
  width: 240px; height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(201,169,97,0.22), transparent 60%);
  pointer-events: none;
}

.export-eyebrow {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-brand);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.export-eyebrow::before {
  content: "";
  width: 22px; height: 1px;
  background: var(--burg-600);
}
.export-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 30px;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0 0 6px;
  color: var(--fg-1);
}
.export-title em {
  font-style: italic;
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.export-subtitle {
  font-size: 13px;
  color: var(--fg-3);
  margin: 0 0 26px;
  line-height: 1.5;
}

/* Stage list */
.export-stages {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 22px;
}
.export-stage {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-4);
  background: transparent;
  transition: all 320ms ease;
  position: relative;
}
.export-stage.active {
  background: var(--burg-50);
  color: var(--fg-1);
}
.export-stage.done {
  color: var(--fg-2);
}
.export-stage-icon {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--border-default);
  background: var(--paper-card);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 800;
  position: relative;
  transition: all 280ms cubic-bezier(0.2,0.8,0.2,1);
}
.export-stage.active .export-stage-icon {
  border-color: var(--burg-600);
  background: var(--paper-card);
}
.export-stage.active .export-stage-icon::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1.5px solid var(--burg-600);
  border-right-color: transparent;
  border-bottom-color: transparent;
  animation: spinStage 0.9s linear infinite;
}
@keyframes spinStage { to { transform: rotate(360deg); } }
.export-stage.done .export-stage-icon {
  background: var(--gold-gradient);
  border-color: transparent;
  color: var(--burg-800);
  animation: stageDone 380ms cubic-bezier(0.2,0.8,0.2,1);
}
.export-stage.done .export-stage-icon::before { content: "✓"; }
@keyframes stageDone {
  0%   { transform: scale(0.7); }
  60%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}

.export-stage-label { flex: 1; line-height: 1.3; }
.export-stage-meta {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-4);
}
.export-stage.active .export-stage-meta { color: var(--burg-600); }
.export-stage.done   .export-stage-meta { color: var(--gold-600); }

/* Bottom progress bar */
.export-bar {
  height: 3px;
  background: var(--paper-deep);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 22px;
  position: relative;
}
.export-bar-fill {
  height: 100%;
  background: var(--gold-gradient);
  transition: width 480ms cubic-bezier(0.2,0.8,0.2,1);
}
.export-bar-fill::after {
  content: "";
  position: absolute;
  top: 0; left: -50%;
  width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7), transparent);
  animation: shimmer 1.6s infinite;
}

/* CTA row */
.export-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.export-actions .btn {
  font-size: 12px;
  padding: 10px 18px;
}
.btn-ghost {
  background: transparent;
  color: var(--fg-2);
  border-color: var(--border-default);
}
.btn-ghost:hover:not(:disabled) {
  background: var(--paper-deep);
  color: var(--fg-1);
}

/* Ready-state polish */
.export-card.ready .export-title em {
  animation: goldFlash 1s ease;
}
@keyframes goldFlash {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.4); }
}

/* Seal stamp on completion */
.export-seal {
  position: absolute;
  top: 22px; right: 22px;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--gold-gradient);
  color: var(--burg-800);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1;
  box-shadow: 0 8px 24px rgba(201,169,97,0.45);
  animation: sealStamp 540ms cubic-bezier(0.2,0.8,0.2,1) 200ms backwards;
}
.export-seal-inner {
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 1px dashed rgba(63,20,20,0.55);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
}
.export-seal-mark {
  font-size: 18px;
  font-weight: 700;
  font-family: var(--font-serif);
  font-style: italic;
}
@keyframes sealStamp {
  0%   { transform: scale(2.2) rotate(-22deg); opacity: 0; }
  60%  { transform: scale(0.92) rotate(-8deg); opacity: 1; }
  100% { transform: scale(1) rotate(-6deg);    opacity: 1; }
}

/* Modal — additional download row */
.modal-downloads {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0 0 18px;
}
.dl-btn {
  appearance: none;
  border: 1.5px solid var(--border-default);
  background: var(--paper-card);
  border-radius: 14px;
  padding: 16px 14px;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  transition: all 200ms cubic-bezier(0.2,0.8,0.2,1);
  position: relative;
  overflow: hidden;
}
.dl-btn:hover {
  border-color: var(--burg-600);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.dl-btn:active { transform: translateY(0) scale(0.98); }
.dl-icon {
  width: 36px; height: 36px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.08em;
  flex-shrink: 0;
  font-family: var(--font-mono);
}
.dl-icon.pdf  { background: var(--burg-50);  color: var(--burg-700); border: 1px solid var(--burg-200); }
.dl-icon.docx { background: var(--gold-50);  color: var(--gold-700); border: 1px solid var(--gold-200); }
.dl-info { flex: 1; min-width: 0; }
.dl-info .dl-title {
  font-weight: 700;
  font-size: 13px;
  color: var(--fg-1);
  letter-spacing: -0.01em;
}
.dl-info .dl-sub {
  font-size: 11px;
  color: var(--fg-3);
  margin-top: 2px;
}
.dl-arrow {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--paper-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--fg-3);
  transition: all 200ms ease;
  flex-shrink: 0;
}
.dl-btn:hover .dl-arrow {
  background: var(--burg-600);
  color: var(--paper-card);
  transform: translateX(2px);
}

/* Doc-section copy tweak when optional */
.optional-banner {
  background: linear-gradient(135deg, var(--gold-50) 0%, var(--paper-card) 100%);
  border: 1px solid var(--gold-200);
  border-left: 3px solid var(--gold-400);
  border-radius: 10px;
  padding: 10px 14px;
  margin: 0 0 16px 38px;
  font-size: 12px;
  color: var(--ink-2);
  max-width: 640px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.optional-banner strong { color: var(--gold-700); font-weight: 700; }

@media (max-width: 720px) {
  .modal-downloads { grid-template-columns: 1fr; }
  .optional-banner { margin-left: 0; }
  .export-card { padding: 28px 22px 22px; }
  .export-title { font-size: 24px; }
}

/* =========================================================
   ─── MOBILE — premium experience (≤ 720px)
   Slim sticky top bar · current-section indicator · hamburger
   drawer · card-based sections · large touch targets · full-width
   bottom dock with safe-area · fullscreen modal & export
   ========================================================= */

/* Mobile widgets are hidden on desktop by default */
.mobile-current,
.mobile-menu-btn,
.mobile-nav-drawer { display: none; }

@media (max-width: 720px) {
  body { background: var(--paper-deep); }

  /* ── Slim sticky top bar (replaces wrapped sidebar) ── */
  .sidebar {
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    padding-top: max(10px, env(safe-area-inset-top));
    height: auto;
    min-height: 56px;
    background: var(--brand-gradient);
    box-shadow: 0 8px 24px rgba(20,8,11,0.18);
    z-index: 30;
    overflow: visible;
    position: sticky;
    top: 0;
  }

  /* Hide desktop TOC list, label, and full progress UI on mobile —
     replaced by current-section + hamburger + drawer */
  .sidebar > nav { display: none; }
  .sidebar > .toc-label { display: none; }
  .sidebar > .sb-progress {
    /* Repurpose as a 2-pixel gold strip pinned to the bottom of the bar */
    position: absolute;
    left: 0; right: 0; bottom: 0;
    margin: 0; padding: 0;
    width: 100%;
  }
  .sidebar > .sb-progress .sb-progress-bar {
    height: 2px;
    border-radius: 0;
    background: rgba(0,0,0,0.35);
  }
  .sidebar > .sb-progress .sb-progress-meta { display: none; }
  .sidebar > .sb-progress .save-status     { display: none; }

  /* Brand compacts */
  .brand { margin-bottom: 0; flex-shrink: 0; gap: 8px; }
  .brand-mark { width: 26px; height: 26px; transform: scale(0.85); transform-origin: left center; }
  .brand-name { font-size: 14px; }
  .brand-sub  { display: none; }

  /* Current section indicator (centered, truncates) */
  .mobile-current {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    padding-right: 6px;
    line-height: 1.1;
    overflow: hidden;
  }
  .mobile-current .mobile-current-lbl {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold-300);
    margin-bottom: 3px;
  }
  .mobile-current strong {
    font-size: 13px;
    font-weight: 700;
    color: #FAF7F2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.005em;
  }

  /* Hamburger button */
  .mobile-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 9999px;
    background: rgba(0,0,0,0.30);
    border: 1px solid rgba(255,255,255,0.16);
    color: #FAF7F2;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 160ms ease;
  }
  .mobile-menu-btn:hover, .mobile-menu-btn:active {
    background: rgba(0,0,0,0.45);
    transform: scale(0.96);
  }

  /* ── HERO compact ── */
  .hero {
    padding: 28px 20px 24px;
  }
  .hero-glass { display: none; }
  .hero-eyebrow {
    font-size: 10px;
    margin-bottom: 10px;
  }
  .hero-eyebrow::before { width: 18px; }
  .hero h1 {
    font-size: 32px;
    line-height: 1.04;
    letter-spacing: -0.01em;
    margin-bottom: 12px;
  }
  .hero p { font-size: 14px; line-height: 1.5; }

  /* ── Card-based sections ── */
  .main {
    padding: 0 0 calc(140px + env(safe-area-inset-bottom));
  }
  .section {
    padding: 22px 18px 20px;
    margin: 12px 12px 0;
    background: var(--paper-card);
    border: 1px solid var(--border-subtle);
    border-radius: 18px;
    border-bottom: 1px solid var(--border-subtle);
    box-shadow: 0 2px 6px rgba(60,20,20,0.04), 0 8px 16px rgba(60,20,20,0.04);
  }
  .section:last-of-type { border-bottom: 1px solid var(--border-subtle); }
  .hero {
    border-bottom: 0;
    padding-bottom: 16px;
  }

  /* Section heads */
  .section-head { gap: 10px; flex-wrap: wrap; }
  .section h2 { font-size: 22px; line-height: 1.18; }
  .section-num { font-size: 18px; }
  .section-status {
    margin-left: auto;
    font-size: 9px;
    padding: 4px 8px;
  }
  .section-desc {
    margin: 6px 0 18px 0;
    font-size: 13px;
  }
  .section-content { padding-left: 0; }
  .appendix-banner, .optional-banner { margin-left: 0; padding: 10px 12px; font-size: 12px; }

  /* ── Bigger inputs (44–48px touch targets) ── */
  .input, .select, .textarea {
    padding: 13px 14px;
    font-size: 15px;
    border-radius: 11px;
  }
  .textarea { min-height: 110px; }
  .field label { font-size: 10.5px; }

  .row { gap: 12px; margin-bottom: 12px; }
  .row.cols-2, .row.cols-3, .row.cols-1-2 { grid-template-columns: 1fr; }

  /* Yes/No bigger pill, comfy */
  .yn { padding: 4px; }
  .yn-btn { padding: 11px 22px; font-size: 14px; min-height: 40px; }

  /* QRow stacks vertically (text on top, YN below) */
  .qrow {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 0;
  }
  .qrow .qtext { width: 100%; line-height: 1.45; font-size: 14px; }

  /* Chips bigger */
  .chip-grid { gap: 10px; }
  .chip-btn {
    padding: 12px 18px;
    font-size: 14px;
    min-height: 42px;
  }

  /* Role grid full-width */
  .role-grid { grid-template-columns: 1fr; gap: 10px; }
  .role-card { padding: 16px 18px; }
  .role-title { font-size: 15px; }
  .role-desc { font-size: 13px; line-height: 1.45; }
  .role-check { top: 14px; right: 14px; width: 18px; height: 18px; }

  /* Sub-cards (UBO, conditionals) */
  .subcard { padding: 14px; }
  .subcard-x { top: 8px; right: 8px; padding: 6px 10px; }
  .conditional {
    padding: 14px 14px 4px;
    margin-top: 12px;
  }

  /* Doc list single-col */
  .doc-list { grid-template-columns: 1fr; gap: 10px; }
  .doc-row { padding: 14px; }

  /* Dropzone & files breathable */
  .dz {
    padding: 22px 18px;
    flex-direction: column;
    gap: 8px;
    text-align: center;
    border-radius: 12px;
    font-size: 13px;
  }
  .file { padding: 12px; }

  /* Consent card on mobile */
  .consent-card {
    padding: 14px 14px;
    gap: 12px;
  }
  .consent-text { font-size: 13px; }
  .consent-check { width: 24px; height: 24px; }
  .consent-check.on::after { width: 12px; height: 7px; }

  /* ── Bottom dock — full width, two-row layout ── */
  .dock {
    left: 10px;
    right: 10px;
    bottom: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    margin-left: 0;
    transform: none;
    width: auto;
    max-width: none;
    min-width: 0;
    padding: 12px 14px;
    border-radius: 18px;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    box-shadow: 0 12px 32px rgba(20,8,11,0.22), 0 0 0 1px var(--border-default);
  }
  .dock-progress { order: 1; flex: 1 1 100%; gap: 4px; }
  .dock-progress-bar { height: 5px; }
  .dock-meta { font-size: 9.5px; }
  .dock-flags {
    order: 2;
    margin-right: auto;
    padding: 8px 12px;
    font-size: 10.5px;
    height: 36px;
  }
  .dock .btn-gold {
    order: 3;
    padding: 13px 22px;
    font-size: 13px;
    flex-shrink: 0;
    height: 42px;
    box-shadow: 0 6px 14px rgba(201,169,97,0.35);
  }

  /* ── Toasts: pinned to top of viewport just under the topbar ── */
  .toasts {
    top: calc(60px + env(safe-area-inset-top));
    left: 10px;
    right: 10px;
  }
  .toast { width: auto; }

  /* ── Submit modal: take more screen real estate ── */
  .modal-back { padding: 16px; align-items: flex-end; }
  .modal {
    padding: 28px 22px;
    border-radius: 22px;
    max-height: calc(100vh - 24px - env(safe-area-inset-top));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .modal h2 { font-size: 28px; }
  .modal p { font-size: 14px; }
  .modal-icon { width: 56px; height: 56px; font-size: 24px; }
  .modal-meta { padding: 12px 14px; gap: 10px; }
  .dl-btn { padding: 14px 12px; }
  .dl-icon { width: 38px; height: 38px; font-size: 11px; }

  /* ── Export overlay full-bleed feel ── */
  .export-back { padding: 16px; align-items: flex-end; }
  .export-card {
    width: 100%;
    max-width: none;
    border-radius: 22px;
    padding: 26px 20px 20px;
  }
  .export-seal {
    width: 56px;
    height: 56px;
    top: 18px;
    right: 18px;
    font-size: 8px;
  }
  .export-seal-inner { width: 48px; height: 48px; }
  .export-seal-mark { font-size: 14px; }
  .export-title { font-size: 24px; }
  .export-stage { padding: 9px 10px; font-size: 12.5px; }
  .export-stage-icon { width: 20px; height: 20px; }
}

/* Very narrow (iPhone SE etc.) */
@media (max-width: 380px) {
  .hero h1 { font-size: 28px; }
  .section { margin: 10px 8px 0; padding: 20px 14px; }
  .dock { padding: 10px 12px; }
  .dock .btn-gold { padding: 12px 16px; font-size: 12px; }
  .dock-flags { display: none; }
  .toasts { left: 8px; right: 8px; top: calc(56px + env(safe-area-inset-top)); }
}

/* ── Mobile nav drawer (rendered on all sizes when navOpen, but
   only relevant on small screens — desktop never opens it) ── */
.mobile-nav-drawer {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 250;
  background: rgba(20, 8, 11, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  justify-content: flex-end;
  animation: drawerBackdropIn 220ms ease-out;
}
@keyframes drawerBackdropIn { from { opacity: 0; } to { opacity: 1; } }
.mobile-nav-panel {
  width: min(86vw, 360px);
  height: 100%;
  background: var(--brand-gradient);
  color: var(--fg-on-brand);
  padding: max(20px, env(safe-area-inset-top)) 22px max(20px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: -16px 0 40px rgba(0,0,0,0.4);
  animation: drawerSlideIn 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes drawerSlideIn {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
.mobile-nav-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(250,247,242,0.12);
}
.mobile-nav-head .brand-name {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 22px;
  color: #FAF7F2;
  line-height: 1.05;
}
.mobile-nav-head .brand-sub {
  display: block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-300);
  margin-top: 4px;
}
.mobile-nav-close {
  width: 38px; height: 38px;
  border-radius: 9999px;
  background: rgba(0,0,0,0.30);
  border: 1px solid rgba(255,255,255,0.16);
  color: #FAF7F2;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 160ms ease;
}
.mobile-nav-close:hover, .mobile-nav-close:active {
  background: rgba(0,0,0,0.45);
  transform: scale(0.96);
}

/* Drawer's TOC list overrides the legacy mobile order/width rules */
.mobile-nav-panel .toc-label { display: flex; }
.mobile-nav-list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  order: 0 !important;
  width: auto !important;
}
.mobile-nav-list .toc-item {
  padding: 14px 14px;
  font-size: 14px;
  border-radius: 10px;
}
.mobile-nav-list .toc-num { width: 22px; height: 22px; font-size: 10.5px; }
.mobile-nav-list .toc-count {
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(250,247,242,0.4);
}
.mobile-nav-list .toc-item.complete .toc-count { color: var(--gold-300); }

.mobile-nav-foot {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid rgba(250,247,242,0.12);
}
.mobile-nav-foot .sb-progress-bar {
  height: 4px;
  background: rgba(0,0,0,0.3);
  border-radius: 2px;
  overflow: hidden;
}
.mobile-nav-foot .sb-progress-meta {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.mobile-nav-foot .sb-progress-meta .pct { color: var(--gold-300); }
.mobile-nav-foot .sb-progress-meta .lbl { color: rgba(250,247,242,0.5); }
.mobile-nav-foot .save-status {
  margin-top: 12px;
  font-size: 10px;
  color: rgba(250,247,242,0.5);
  display: flex;
  align-items: center;
  gap: 6px;
}
.mobile-nav-foot .save-status .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green-500);
}
.mobile-nav-foot .save-status.saving .dot {
  background: var(--gold-400);
  animation: blink 1s infinite;
}

/* =========================================================
   ─── SIGNATURE PAD
   Canvas-based signature capture with parchment background,
   thin gold/burgundy frame, baseline rule and Clear action.
   ========================================================= */
.sig-pad {
  margin-top: 22px;
  border: 1.5px solid var(--border-default);
  background: var(--paper-card);
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.sig-pad:hover { border-color: var(--burg-400); }
.sig-pad:focus-within {
  border-color: var(--burg-600);
  box-shadow: 0 0 0 3px rgba(122,46,46,0.10);
}

.sig-canvas-wrap {
  position: relative;
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(201,169,97,0.06), transparent 60%),
    var(--paper-card);
}
.sig-canvas {
  display: block;
  width: 100%;
  height: 200px;
  cursor: crosshair;
  touch-action: none;       /* enable smooth drawing on touch */
  user-select: none;
}
.sig-baseline {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 32px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--burg-300), transparent);
  opacity: 0.6;
  pointer-events: none;
}
.sig-baseline::before {
  content: "✕";
  position: absolute;
  left: 8px;
  top: -7px;
  font-size: 12px;
  color: var(--ink-4);
  font-weight: 700;
  opacity: 0.5;
}

.sig-hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  font-size: 13px;
  color: var(--fg-4);
  font-style: italic;
  letter-spacing: 0.01em;
  font-family: var(--font-serif);
}

.sig-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: var(--paper-deep);
  border-top: 1px solid var(--border-subtle);
}
.sig-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.sig-actions .linkbtn {
  padding: 4px 8px;
}
.sig-actions .linkbtn:disabled {
  color: var(--fg-4);
  cursor: not-allowed;
}

@media (max-width: 720px) {
  .sig-canvas { height: 180px; }
  .sig-baseline { left: 18px; right: 18px; bottom: 28px; }
}

/* =========================================================
   ─── OCR auto-fill — gold flash + clean status pill
   ========================================================= */

/* Gold pulse ring on a field that just received an auto-filled value */
.input.autofilled,
.select.autofilled,
.textarea.autofilled {
  animation: autofillPulse 1.6s cubic-bezier(0.2, 0.8, 0.2, 1);
  border-color: var(--gold-400);
}
@keyframes autofillPulse {
  0%   { box-shadow: 0 0 0 0   rgba(201,169,97,0.55); border-color: var(--gold-400); background: rgba(201,169,97,0.08); }
  35%  { box-shadow: 0 0 0 6px rgba(201,169,97,0.20); border-color: var(--gold-400); background: rgba(201,169,97,0.05); }
  100% { box-shadow: 0 0 0 0   rgba(201,169,97,0);    border-color: var(--border-default); background: var(--paper-card); }
}

/* The "✓ Auto-fill" pill on a file row */
.file-status-pill.clean {
  /* Allow longer label like "✓ Auto-fill" without truncation */
  white-space: nowrap;
}

/* =========================================================
   ─── SMART FILL PANEL — appears between Role and Company
   Hero card with two prominent dropzone tiles for OCR pre-fill
   ========================================================= */
.smart-fill-section {
  position: relative;
  padding: 32px 64px 28px;
  background: linear-gradient(135deg, var(--gold-50) 0%, var(--paper-card) 60%, var(--burg-50) 100%);
  border-bottom: 1px solid var(--border-subtle);
  scroll-margin-top: 16px;
  overflow: hidden;
}
.smart-fill-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 90% at 0% 0%, rgba(201,169,97,0.16), transparent 60%),
    radial-gradient(40% 70% at 100% 100%, rgba(122,46,46,0.10), transparent 60%);
  pointer-events: none;
}
.smart-fill-section > * { position: relative; z-index: 1; }

.smart-fill-eyebrow {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-600);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}
.smart-fill-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 32px;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0 0 8px;
  color: var(--fg-1);
}
.smart-fill-title em {
  font-style: italic;
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.smart-fill-lead {
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg-3);
  margin: 0 0 22px;
  max-width: 640px;
}

.smart-fill-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 18px;
}

.smart-fill-tile {
  background: var(--paper-card);
  border: 1.5px solid var(--gold-200);
  border-radius: 14px;
  padding: 18px 18px 16px;
  transition: all 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
  position: relative;
  overflow: hidden;
}
.smart-fill-tile:hover {
  border-color: var(--gold-400);
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(201,169,97,0.18);
}
.smart-fill-tile.tile-filled {
  border-color: var(--green-500);
  background: linear-gradient(180deg, rgba(220,238,226,0.4) 0%, var(--paper-card) 100%);
}
.smart-fill-tile.tile-filled::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--green-500), var(--gold-400));
}

.smart-fill-tile-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}
.smart-fill-tile-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--gold-gradient);
  color: var(--burg-800);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(201,169,97,0.3);
}
.smart-fill-tile.tile-filled .smart-fill-tile-icon {
  background: var(--green-500);
  color: var(--paper-card);
  box-shadow: 0 4px 12px rgba(45,134,89,0.3);
}
.smart-fill-tile-info { flex: 1; min-width: 0; }
.smart-fill-tile-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--fg-1);
  letter-spacing: -0.01em;
}
.smart-fill-tile-desc {
  font-size: 12px;
  color: var(--fg-3);
  margin-top: 3px;
  line-height: 1.4;
}
.smart-fill-tile-tag {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 9999px;
  background: var(--green-100);
  color: var(--green-700);
  flex-shrink: 0;
  white-space: nowrap;
}

.smart-fill-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--fg-3);
  padding-top: 14px;
  border-top: 1px dashed var(--border-subtle);
}
.smart-fill-foot strong { color: var(--burg-700); font-weight: 700; }
.smart-fill-foot svg { color: var(--burg-600); flex-shrink: 0; }

@media (max-width: 1100px) {
  .smart-fill-section { padding: 28px 32px 24px; }
}

@media (max-width: 720px) {
  .smart-fill-section {
    padding: 22px 18px 20px;
    margin: 12px 12px 0;
    background: linear-gradient(180deg, var(--gold-50) 0%, var(--paper-card) 100%);
    border: 1px solid var(--gold-200);
    border-radius: 18px;
    box-shadow: 0 2px 6px rgba(60,20,20,0.04), 0 8px 16px rgba(60,20,20,0.04);
    border-bottom: 1px solid var(--gold-200);
  }
  .smart-fill-title { font-size: 24px; }
  .smart-fill-lead { font-size: 13px; }
  .smart-fill-grid { grid-template-columns: 1fr; gap: 12px; }
  .smart-fill-tile { padding: 16px; }
}

/* =========================================================
   ─── SMART FILL — UBO #2 CTA tile + checklist anchor link
   ========================================================= */

/* "Add a second beneficial owner" CTA-style tile */
.smart-fill-tile.tile-cta {
  padding: 0;
  border-style: dashed;
  border-color: var(--gold-300);
  background: linear-gradient(135deg, var(--paper-card) 0%, var(--gold-50) 100%);
}
.smart-fill-add-cta {
  appearance: none;
  background: transparent;
  border: 0;
  width: 100%;
  padding: 22px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  border-radius: 14px;
  transition: all 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.smart-fill-add-cta:hover {
  background: var(--gold-50);
  transform: translateY(-1px);
}
.smart-fill-add-cta-plus {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--gold-gradient);
  color: var(--burg-800);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 800;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(201,169,97,0.3);
  transition: transform 200ms ease;
}
.smart-fill-add-cta:hover .smart-fill-add-cta-plus {
  transform: rotate(90deg) scale(1.06);
}
.smart-fill-add-cta-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--fg-1);
  letter-spacing: -0.01em;
}
.smart-fill-add-cta-desc {
  font-size: 12px;
  color: var(--fg-3);
  margin-top: 3px;
  line-height: 1.4;
}

/* Checklist anchor link in the smart-fill footer */
.smart-fill-foot {
  flex-wrap: wrap;
  row-gap: 10px;
}
.smart-fill-checklist-link {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 9999px;
  background: var(--burg-600);
  color: var(--paper-card);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: all 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.smart-fill-checklist-link:hover {
  background: var(--burg-700);
  transform: translateX(2px);
  box-shadow: var(--shadow-brand);
}
.smart-fill-checklist-link svg {
  transition: transform 180ms ease;
}
.smart-fill-checklist-link:hover svg {
  transform: translateX(2px);
}

/* =========================================================
   ─── PARSED-FIELD INLINE SUMMARY (inside the Dropzone file row)
   Compact label/value chips that sit under the filename when OCR
   has successfully extracted data. Used in both Smart Fill tiles
   and the Document checklist — single source of truth.
   ========================================================= */

/* Allow .file row to wrap its bottom-line summary onto a new line */
.file { flex-wrap: wrap; row-gap: 6px; }

.file-fields {
  flex-basis: 100%;
  margin-top: 4px;
  padding: 8px 10px;
  background: var(--gold-50);
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 11.5px;
  color: var(--fg-1);
  line-height: 1.4;
}

/* Route badge — shows where this file's data was sent (Trade license / UBO #N) */
.file-route {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 9999px;
  background: var(--burg-50);
  color: var(--burg-700);
  white-space: nowrap;
  flex-shrink: 0;
}
.file-route.license { background: var(--burg-50); color: var(--burg-700); }
.file-route.individual-ubo { background: var(--gold-50); color: var(--gold-700); }
.file-route.corporate-ubo { background: var(--paper-deep); color: var(--burg-600); }

/* Unified Smart Fill tile (single big upload area) */
.smart-fill-tile-unified {
  background: linear-gradient(135deg, var(--paper-card) 0%, var(--gold-50) 100%);
  transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}

/* When dragging files anywhere over the tile — entire tile highlights */
.smart-fill-tile-unified.tile-drag-over {
  border-color: var(--burg-600);
  border-style: solid;
  background: linear-gradient(135deg, var(--gold-50) 0%, var(--burg-50) 100%);
  box-shadow:
    0 0 0 4px rgba(122,46,46,0.10),
    0 16px 36px rgba(60,20,20,0.10);
  transform: translateY(-1px);
}
/* Inside the highlighted tile, the inner dz also looks active so the user
   sees both the wide hit zone and the explicit drop area cue */
.smart-fill-tile-unified.tile-drag-over .dz {
  border-color: var(--burg-600);
  background: var(--burg-50);
  color: var(--fg-1);
}
.file-fields .file-field {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
}
.file-fields .file-field .fk {
  font-weight: 800;
  font-size: 9px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--gold-700);
  flex-shrink: 0;
}
.file-fields .file-field .fv {
  font-weight: 600;
  color: var(--fg-1);
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 720px) {
  .smart-fill-checklist-link { margin-left: 0; width: 100%; justify-content: center; }
}

/* =========================================================
   ─── KYC TYPE TOGGLE — Company / Individual segmented switch
   ========================================================= */
.kyc-type-toggle {
  position: relative;
  display: inline-flex;
  margin-top: 22px;
  padding: 4px;
  border-radius: 9999px;
  background: rgba(122, 46, 46, 0.06);
  border: 1px solid var(--border-default);
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset;
}
.kyc-type-toggle button {
  appearance: none;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--fg-3);
  padding: 9px 22px;
  border-radius: 9999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 1;
  transition: color 200ms ease;
}
.kyc-type-toggle button.on {
  color: var(--burg-800);
}
.kyc-type-toggle button:hover:not(.on) {
  color: var(--fg-1);
}
.kyc-type-toggle svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.85;
}

/* Sliding gold thumb behind the active option */
.kyc-toggle-thumb {
  position: absolute;
  top: 4px;
  bottom: 4px;
  width: calc(50% - 4px);
  border-radius: 9999px;
  background: var(--gold-gradient);
  box-shadow: 0 4px 12px rgba(201,169,97,0.35), 0 1px 0 rgba(255,255,255,0.5) inset;
  transition: left 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.kyc-toggle-thumb.pos-company    { left: 4px; }
.kyc-toggle-thumb.pos-individual { left: calc(50%); }

/* When individual, Smart Fill collapses to a single tile */
.smart-fill-grid.one-col { grid-template-columns: 1fr; }

/* =========================================================
   ─── UBO TYPE TOGGLE + RECURSIVE NESTED UBO STYLING
   ========================================================= */

/* Per-UBO type toggle (Person / Company) — pin-button feel with gold liquid
   thumb, springy overshoot, idle shimmer and morphing icons. */
.ubo-node-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.ubo-type-toggle {
  position: relative;
  display: inline-flex;
  padding: 4px;
  border-radius: 9999px;
  background: linear-gradient(180deg, rgba(122,46,46,0.10) 0%, rgba(122,46,46,0.04) 100%);
  border: 1px solid var(--border-default);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.55) inset,
    0 2px 5px rgba(60,20,20,0.05) inset,
    0 1px 2px rgba(60,20,20,0.04);
  margin-left: auto;
  isolation: isolate;
  transition: box-shadow 200ms ease, transform 200ms ease;
}
.ubo-type-toggle:hover {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.55) inset,
    0 2px 5px rgba(60,20,20,0.06) inset,
    0 4px 14px rgba(201,169,97,0.18);
}
.ubo-type-toggle:active {
  transform: scale(0.985);
}

.ubo-type-toggle button {
  appearance: none;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--fg-3);
  padding: 7px 14px;
  border-radius: 9999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
  z-index: 2;
  transition:
    color 280ms cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ubo-type-toggle button.on { color: var(--burg-800); }
.ubo-type-toggle button:hover:not(.on) { color: var(--burg-600); }

.ubo-type-toggle svg {
  flex-shrink: 0;
  opacity: 0.7;
  transition:
    transform 380ms cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 240ms ease;
}
.ubo-type-toggle button.on svg {
  opacity: 1;
  transform: scale(1.18) rotate(-4deg);
  animation: uboIconBump 480ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes uboIconBump {
  0%   { transform: scale(0.85) rotate(0deg); }
  55%  { transform: scale(1.28) rotate(-7deg); }
  100% { transform: scale(1.18) rotate(-4deg); }
}

/* Sliding gold thumb — springy overshoot easing (the back curve gives a
   natural-feeling bounce on settle) */
.ubo-type-thumb {
  position: absolute;
  top: 4px;
  bottom: 4px;
  width: calc(50% - 4px);
  border-radius: 9999px;
  background: linear-gradient(135deg, #F5EBCB 0%, #D9BB6F 28%, #C9A961 55%, #B08F44 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 -1px 1px rgba(0,0,0,0.08) inset,
    0 6px 16px rgba(201,169,97,0.42),
    0 1px 2px rgba(0,0,0,0.10);
  z-index: 1;
  transition:
    left 460ms cubic-bezier(0.34, 1.56, 0.64, 1),
    transform 460ms cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
}
.ubo-type-thumb.pos-ind  { left: 4px; }
.ubo-type-thumb.pos-corp { left: 50%; }

/* Idle shine sweeping across the gold pin — gives it a "hot metal" feel */
.ubo-type-thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgba(255,255,255,0.55) 50%,
    transparent 70%
  );
  transform: translateX(-100%);
  animation: uboThumbShine 3.6s cubic-bezier(0.5, 0.05, 0.5, 0.95) infinite;
  pointer-events: none;
}
@keyframes uboThumbShine {
  0%, 35% { transform: translateX(-100%); opacity: 0; }
  55% { opacity: 0.95; }
  100% { transform: translateX(100%); opacity: 0; }
}

/* Soft inner highlight */
.ubo-type-thumb::after {
  content: "";
  position: absolute;
  top: 1px; left: 8%; right: 8%;
  height: 35%;
  border-radius: 9999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.65), transparent);
  pointer-events: none;
}

/* Click ripple emerging from the pressed button */
.ubo-type-toggle button::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: radial-gradient(circle, rgba(201,169,97,0.30) 0%, transparent 65%);
  opacity: 0;
  pointer-events: none;
}
.ubo-type-toggle button:active::before {
  animation: uboRippleBurst 540ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes uboRippleBurst {
  0%   { opacity: 1; transform: scale(0.5); }
  100% { opacity: 0; transform: scale(1.3); }
}

@media (prefers-reduced-motion: reduce) {
  .ubo-type-thumb { transition: left 200ms ease; }
  .ubo-type-thumb::before { animation: none; }
  .ubo-type-toggle button.on svg { animation: none; transform: none; }
}

/* Nested UBO container — visually indented to show ownership chain */
.nested-ubos {
  margin-top: 16px;
  padding: 16px 18px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(122,46,46,0.04) 0%, transparent 100%);
  border-left: 3px solid var(--burg-300);
}
.nested-ubos-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--border-subtle);
}
.nested-ubos-title {
  font-size: 13px;
  color: var(--fg-1);
  font-weight: 600;
}
.nested-ubos-title strong {
  font-weight: 700;
  color: var(--burg-700);
}
.nested-ubos-hint {
  font-size: 11px;
  color: var(--fg-3);
  font-style: italic;
}

/* Nested UBO cards get progressively darker / more indented */
.subcard.ubo-node {
  position: relative;
}
.subcard.ubo-node.depth-0 { /* default subcard styling */ }
.subcard.ubo-node.depth-1 {
  background: var(--paper-card);
  border-color: var(--burg-200);
}
.subcard.ubo-node.depth-2 {
  background: var(--paper-card);
  border-color: var(--burg-300);
}
.subcard.ubo-node.depth-3 {
  background: var(--paper-card);
  border-color: var(--burg-400);
}

/* Corporate UBO badge in title */
.subcard.ubo-node .subcard-title {
  /* "UBO #1.2 · Corporate" — already shows in the title text */
}

@media (max-width: 720px) {
  .ubo-node-head { gap: 8px; }
  .ubo-type-toggle { width: 100%; justify-content: stretch; }
  .ubo-type-toggle button { flex: 1; padding: 7px 10px; font-size: 11px; }
  .nested-ubos { padding: 12px; }
}

@media (max-width: 720px) {
  .kyc-type-toggle button { padding: 8px 16px; font-size: 12px; }
  .kyc-type-toggle button span { font-size: 12px; }
}

/* =========================================================
   ─── AML COMPLIANCE PORTAL — Officer-facing internal app
   Login → Dashboard → Case detail with animated screening matrix
   ========================================================= */

/* Subtle entry link in the KYC sidebar footer pointing to the portal */
.aml-portal-link {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(250, 247, 242, 0.45);
  text-decoration: none;
  padding: 6px 0;
  transition: color 160ms ease, transform 160ms ease;
}
.aml-portal-link:hover {
  color: var(--gold-300);
  transform: translateX(2px);
}
.aml-portal-link svg {
  flex-shrink: 0;
  opacity: 0.8;
}

/* ── LOGIN ── */
.aml-login-back {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(122,46,46,0.95) 0%, rgba(60,12,12,1) 60%),
    var(--burg-900);
  background-color: var(--burg-900);
  position: relative;
  overflow: hidden;
}
.aml-login-back::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(50% 60% at 30% 20%, rgba(201,169,97,0.18), transparent 60%),
    radial-gradient(40% 50% at 80% 90%, rgba(201,169,97,0.12), transparent 60%);
  pointer-events: none;
}
.aml-login-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  background: linear-gradient(180deg, var(--paper-card) 0%, var(--paper-bg) 100%);
  border-radius: 22px;
  padding: 40px 36px 28px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 40px 100px rgba(0,0,0,0.5),
    0 0 0 1px rgba(201,169,97,0.18);
  animation: amlLoginRise 520ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes amlLoginRise {
  from { transform: translateY(28px) scale(0.96); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}
.aml-login-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--gold-gradient);
  border-radius: 22px 22px 0 0;
}
.aml-login-mark {
  position: absolute;
  top: 20px; right: 22px;
  width: 36px; height: 22px;
}
.aml-login-tri {
  position: absolute;
  width: 0; height: 0;
  top: 50%; transform: translateY(-50%);
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  border-left: 18px solid var(--burg-600);
}
.aml-login-tri.gold {
  left: 9px;
  border-left-color: var(--gold-400);
}
.aml-login-eyebrow {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-brand);
  margin-bottom: 6px;
}
.aml-login-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 32px;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0 0 8px;
  color: var(--fg-1);
}
.aml-login-title em {
  font-style: italic;
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.aml-login-lead {
  font-size: 13px;
  color: var(--fg-3);
  margin: 0 0 26px;
  line-height: 1.5;
}
.aml-login-label {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin: 14px 0 6px;
}
.aml-login-input {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--border-default);
  background: var(--paper-card);
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
  font-weight: 500;
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.aml-login-input:focus {
  border-color: var(--burg-600);
  box-shadow: 0 0 0 3px rgba(122,46,46,0.10);
}
.aml-login-err {
  margin-top: 12px;
  padding: 8px 12px;
  background: var(--red-100);
  color: var(--red-700);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
}
.aml-login-btn {
  width: 100%;
  margin-top: 18px;
  justify-content: center;
}
.aml-login-hint {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dashed var(--border-subtle);
  font-size: 11px;
  color: var(--fg-3);
  text-align: center;
}
.aml-login-hint code {
  font-family: var(--font-mono);
  background: var(--paper-deep);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  color: var(--burg-700);
}

/* ── DASHBOARD + CASE shared shell ── */
.aml-shell {
  min-height: 100vh;
  background: var(--paper-deep);
}
.aml-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 28px;
  padding-top: max(12px, env(safe-area-inset-top));
  background: var(--brand-gradient);
  color: var(--fg-on-brand);
  box-shadow: 0 4px 14px rgba(20,8,11,0.18);
}
.aml-brand {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}
.aml-brand-tri {
  position: relative;
  width: 0; height: 0;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 16px solid var(--burg-300);
  flex-shrink: 0;
}
.aml-brand-tri.burg { left: 0; opacity: 0.8; }
.aml-brand-tri.gold {
  position: absolute;
  left: 7px;
  border-left-color: var(--gold-400);
}
.aml-brand-name {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 17px;
  color: #FAF7F2;
  line-height: 1.05;
}
.aml-brand-sub {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-300);
  margin-top: 2px;
}
.aml-topbar-right {
  display: flex;
  align-items: center;
  gap: 14px;
}
.aml-topbar-user {
  font-size: 12px;
  color: rgba(250,247,242,0.7);
}
.aml-topbar-user strong {
  color: #FAF7F2;
  font-family: var(--font-mono);
  font-weight: 700;
  margin-left: 2px;
}
.aml-topbar-logout {
  background: rgba(0,0,0,0.25);
  color: #FAF7F2;
  border-color: rgba(255,255,255,0.16);
}
.aml-topbar-logout:hover {
  background: rgba(0,0,0,0.4);
}

.aml-main {
  max-width: 1400px;
  margin: 0 auto;
  padding: 32px 28px 80px;
}
.aml-page-head {
  margin-bottom: 24px;
}
.aml-h1 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 38px;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
  color: var(--fg-1);
}
.aml-page-sub {
  font-size: 14px;
  color: var(--fg-3);
  margin: 0;
  line-height: 1.5;
}

/* Stat cards */
.aml-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.aml-stat {
  background: var(--paper-card);
  border: 1px solid var(--border-default);
  border-radius: 12px;
  padding: 14px 16px;
  position: relative;
  overflow: hidden;
}
.aml-stat::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--ink-3);
}
.aml-stat.amber::before { background: var(--amber-500); }
.aml-stat.green::before { background: var(--green-500); }
.aml-stat.gold::before  { background: var(--gold-400); }
.aml-stat.red::before   { background: var(--red-500); }
.aml-stat-num {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
}
.aml-stat-lbl {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-top: 2px;
}

/* Cases table */
.aml-table-wrap {
  background: var(--paper-card);
  border-radius: 14px;
  border: 1px solid var(--border-default);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.aml-table {
  width: 100%;
  border-collapse: collapse;
}
.aml-table thead {
  background: var(--paper-deep);
}
.aml-table th {
  text-align: left;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-3);
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-subtle);
}
.aml-table td {
  padding: 14px 16px;
  font-size: 13px;
  color: var(--fg-1);
  border-bottom: 1px solid var(--border-subtle);
}
.aml-row {
  cursor: pointer;
  transition: background 140ms ease;
}
.aml-row:hover {
  background: var(--gold-50);
}
.aml-row .mono {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--burg-700);
  font-weight: 700;
}
.aml-row-sub {
  display: block;
  font-size: 11px;
  color: var(--fg-3);
  margin-top: 2px;
}
.aml-row-arrow {
  text-align: right;
  color: var(--fg-4);
  font-size: 18px;
  width: 30px;
}
.aml-row:hover .aml-row-arrow {
  color: var(--burg-600);
}
.aml-empty {
  text-align: center;
  padding: 40px;
  color: var(--fg-3);
}
.aml-decision-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 9999px;
  background: var(--paper-deep);
  color: var(--fg-3);
}
.aml-decision-pill.pending  { background: var(--amber-100); color: var(--amber-700); }
.aml-decision-pill.approved { background: var(--green-100); color: var(--green-700); }
.aml-decision-pill.edd      { background: var(--gold-100);  color: var(--gold-700); }
.aml-decision-pill.rejected { background: var(--red-100);   color: var(--red-700); }

/* ── CASE DETAIL ── */
.aml-case-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.aml-case-eyebrow {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-brand);
  margin-bottom: 4px;
}
.aml-case-meta {
  font-size: 13px;
  color: var(--fg-3);
  margin: 8px 0 0;
}
.aml-case-verdict {
  text-align: right;
}
.aml-case-verdict-lbl {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
  display: block;
  margin-bottom: 4px;
}
.aml-verdict-big {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.aml-verdict-big.pending { background: var(--paper-deep); color: var(--fg-3); }
.aml-verdict-big.clean   { background: var(--green-100);  color: var(--green-700); }
.aml-verdict-big.review  { background: var(--amber-100);  color: var(--amber-700); }
.aml-verdict-big.hit     { background: var(--red-100);    color: var(--red-700); }

/* ── SCREENING MATRIX ── */
.aml-matrix {
  background: var(--paper-card);
  border: 1px solid var(--border-default);
  border-radius: 14px;
  padding: 22px 22px 14px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 24px;
  overflow-x: auto;
}
.aml-matrix-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.aml-matrix-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 4px;
  color: var(--fg-1);
}
.aml-matrix-sub {
  font-size: 12px;
  color: var(--fg-3);
  margin: 0;
}
.aml-run-btn {
  position: relative;
  overflow: hidden;
}
.aml-run-btn.is-running::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0;
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
  animation: amlRunBar 1.2s linear infinite;
}
@keyframes amlRunBar { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

/* Matrix grid: rows = entities (each row spans full width with sources as inline cells)
   Use CSS grid with: row-head + (one cell per source) */
.aml-matrix-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1.5fr) repeat(8, minmax(60px, 1fr));
  gap: 6px;
  align-items: stretch;
}
.aml-matrix-corner { /* empty top-left cell */ }
.aml-matrix-col-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 4px;
  border-bottom: 2px solid var(--burg-200);
  text-align: center;
}
.aml-matrix-col-name {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--fg-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.aml-matrix-col-region {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.aml-matrix-row-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--paper-bg);
  border-radius: 8px;
  border: 1px solid var(--border-subtle);
  min-width: 0;
}
.aml-matrix-kind {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.10em;
  padding: 3px 7px;
  border-radius: 4px;
  background: var(--paper-deep);
  color: var(--fg-3);
  flex-shrink: 0;
}
.aml-matrix-kind.kind-company       { background: var(--burg-50);  color: var(--burg-700); }
.aml-matrix-kind.kind-individual    { background: var(--gold-50);  color: var(--gold-700); }
.aml-matrix-kind.kind-corporate-ubo { background: var(--paper-deep); color: var(--burg-600); }
.aml-matrix-row-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--fg-1);
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.aml-matrix-row-sub {
  font-size: 11px;
  color: var(--fg-3);
  margin-top: 1px;
}
.aml-matrix-row-head > div { flex: 1; min-width: 0; }
.aml-verdict-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 9px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  border-radius: 9999px;
  background: var(--paper-deep);
  color: var(--fg-3);
  white-space: nowrap;
  flex-shrink: 0;
}
.aml-verdict-pill.clean   { background: var(--green-100);  color: var(--green-700); }
.aml-verdict-pill.review  { background: var(--amber-100);  color: var(--amber-700); }
.aml-verdict-pill.hit     { background: var(--red-100);    color: var(--red-700); }

/* Cells */
.aml-matrix-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper-bg);
  border-radius: 6px;
  border: 1px solid var(--border-subtle);
  min-height: 42px;
  color: var(--fg-4);
  transition: all 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.aml-matrix-cell.cell-clean  { background: var(--green-100); color: var(--green-700); border-color: var(--green-500); }
.aml-matrix-cell.cell-review { background: var(--amber-100); color: var(--amber-700); border-color: var(--amber-500); }
.aml-matrix-cell.cell-hit    { background: var(--red-100);   color: var(--red-700);   border-color: var(--red-500); }
.aml-matrix-cell.cell-just   { animation: amlCellPop 360ms cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes amlCellPop {
  0%   { transform: scale(0.6); opacity: 0; }
  60%  { transform: scale(1.18); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.aml-matrix-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--fg-4);
  opacity: 0.4;
}

/* ── DECISION PANEL ── */
.aml-decision {
  background: var(--paper-card);
  border: 1px solid var(--border-default);
  border-radius: 14px;
  padding: 22px;
  box-shadow: var(--shadow-sm);
}
.aml-decision-head {
  margin-bottom: 14px;
}
.aml-decision-head h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--fg-1);
}
.aml-decision-head p {
  font-size: 12px;
  color: var(--fg-3);
  margin: 0;
}
.aml-decision-notes {
  width: 100%;
  min-height: 90px;
  margin-bottom: 14px;
}
.aml-decision-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.aml-decision-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1.5px solid var(--border-default);
  background: var(--paper-card);
  border-radius: 9999px;
  font-family: inherit;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  cursor: pointer;
  color: var(--fg-2);
  transition: all 160ms ease;
}
.aml-decision-btn:hover { transform: translateY(-1px); }
.aml-decision-btn.approve { border-color: var(--green-500); color: var(--green-700); }
.aml-decision-btn.approve.on { background: var(--green-500); color: var(--paper-card); }
.aml-decision-btn.edd { border-color: var(--gold-500); color: var(--gold-700); }
.aml-decision-btn.edd.on { background: var(--gold-gradient); color: var(--burg-800); }
.aml-decision-btn.reject { border-color: var(--red-500); color: var(--red-700); }
.aml-decision-btn.reject.on { background: var(--red-500); color: var(--paper-card); }
.aml-export-btn {
  margin-left: auto;
}

@media (max-width: 1100px) {
  .aml-matrix-grid {
    grid-template-columns: minmax(220px, 1.2fr) repeat(8, minmax(48px, 1fr));
  }
  .aml-matrix-row-name { font-size: 12px; }
}

@media (max-width: 720px) {
  .aml-main { padding: 20px 14px 60px; }
  .aml-h1 { font-size: 28px; }
  .aml-topbar { padding: 10px 14px; }
  .aml-topbar-user { display: none; }
  .aml-stats { grid-template-columns: repeat(2, 1fr); }
  .aml-table th:nth-child(3), .aml-table td:nth-child(3) { display: none; }
  .aml-matrix { padding: 14px 10px; }
  .aml-matrix-grid {
    grid-template-columns: minmax(140px, 1fr) repeat(8, 36px);
    gap: 4px;
  }
  .aml-matrix-cell { min-height: 36px; }
  .aml-decision-btn { padding: 9px 14px; font-size: 11.5px; }
  .aml-export-btn { margin-left: 0; width: 100%; justify-content: center; }
}

/* ─────────────────────────────────────────────────────────
   AML — Wow upgrade: KPIs, search, chips, gauge, stepper,
   timeline, evidence cards, decision stamp, toasts, kbd help
   ───────────────────────────────────────────────────────── */

/* Eyebrow */
.aml-eyebrow {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--burg);
  margin-bottom: 8px;
  font-family: 'JetBrains Mono', monospace;
}

/* Page head — flex with search */
.aml-page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.aml-page-sub {
  font-size: 13px;
  color: var(--fg-3);
  margin: 6px 0 0;
}

/* Search */
.aml-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--paper-card);
  border: 1px solid var(--border-default);
  border-radius: 10px;
  padding: 0 12px;
  height: 42px;
  width: 360px;
  max-width: 100%;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.aml-search-wrap:focus-within {
  border-color: var(--burg);
  box-shadow: 0 0 0 3px rgba(122, 46, 46, 0.10);
}
.aml-search-icon { color: var(--fg-3); margin-right: 8px; flex-shrink: 0; }
.aml-search-input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-size: 13.5px;
  color: var(--fg-1);
  font-family: inherit;
}
.aml-search-input::placeholder { color: var(--fg-4); }
.aml-search-hint {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  background: var(--paper-deep);
  color: var(--fg-3);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--border-subtle);
}

/* KPI tiles */
.aml-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 22px;
}
.aml-kpi {
  background: var(--paper-card);
  border: 1px solid var(--border-default);
  border-radius: 14px;
  padding: 16px 18px 14px;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 200ms ease;
}
.aml-kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.aml-kpi::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--burg);
  opacity: 0.85;
}
.aml-kpi.amber::before { background: var(--gold-500); }
.aml-kpi.red::before   { background: var(--red-500); }
.aml-kpi.gold::before  { background: linear-gradient(90deg, var(--gold-500), var(--burg)); }
.aml-kpi-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.aml-kpi-lbl {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.aml-kpi-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 38px;
  font-weight: 600;
  color: var(--fg-1);
  letter-spacing: -0.02em;
  line-height: 1;
  display: flex;
  align-items: baseline;
}
.aml-kpi-unit {
  font-size: 16px;
  color: var(--fg-3);
  margin-left: 4px;
  font-family: inherit;
}
.aml-kpi-foot {
  font-size: 10.5px;
  color: var(--fg-4);
  margin-top: 6px;
  letter-spacing: 0.02em;
}
.aml-sparkline { display: block; }

/* Toolbar with chips + sort */
.aml-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.aml-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.aml-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: var(--paper-card);
  border: 1px solid var(--border-default);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--fg-2);
  cursor: pointer;
  transition: all 160ms ease;
  font-family: inherit;
}
.aml-chip:hover { border-color: var(--burg-200); color: var(--fg-1); }
.aml-chip.on {
  background: var(--burg);
  border-color: var(--burg);
  color: var(--paper);
  box-shadow: 0 2px 6px rgba(122, 46, 46, 0.25);
}
.aml-chip.amber.on { background: var(--gold-500); border-color: var(--gold-500); color: var(--burg-800); }
.aml-chip.red.on   { background: var(--red-500);  border-color: var(--red-500);  color: var(--paper); }
.aml-chip.gold.on  { background: linear-gradient(135deg, var(--gold-500), var(--burg)); border-color: var(--burg); color: var(--paper); }
.aml-chip.green.on { background: var(--green-500); border-color: var(--green-500); color: var(--paper); }
.aml-chip-num {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 800;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(0,0,0,0.07);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.02em;
}
.aml-chip.on .aml-chip-num { background: rgba(255,255,255,0.18); }

.aml-sort {
  display: flex;
  align-items: center;
  gap: 8px;
}
.aml-sort-lbl {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.aml-sort-sel {
  border: 1px solid var(--border-default);
  background: var(--paper-card);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 12.5px;
  color: var(--fg-1);
  font-family: inherit;
  cursor: pointer;
}
.aml-sort-sel:focus { outline: none; border-color: var(--burg); }

/* Risk bar in table */
.aml-risk-bar {
  position: relative;
  width: 80px;
  height: 6px;
  background: var(--paper-deep);
  border-radius: 3px;
  overflow: hidden;
}
.aml-risk-bar-fill {
  height: 100%;
  background: var(--green-500);
  border-radius: 3px;
  transition: width 800ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.aml-risk-bar.tier-mid .aml-risk-bar-fill  { background: var(--gold-500); }
.aml-risk-bar.tier-high .aml-risk-bar-fill { background: var(--red-500); }
.aml-risk-bar-num {
  position: absolute;
  top: -16px;
  right: 0;
  font-size: 10.5px;
  font-weight: 800;
  color: var(--fg-2);
  font-family: 'JetBrains Mono', monospace;
}

/* Hero — case header */
.aml-case-hero {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  background: var(--paper-card);
  border: 1px solid var(--border-default);
  border-radius: 16px;
  padding: 24px 26px;
  margin-bottom: 22px;
  box-shadow: var(--shadow-sm);
}
.aml-case-hero-main { min-width: 0; }
.aml-case-hero-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}
.aml-case-eyebrow {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--burg);
  margin-bottom: 6px;
  font-family: 'JetBrains Mono', monospace;
}
.aml-case-meta {
  font-size: 13px;
  color: var(--fg-3);
  margin: 4px 0 18px;
}

/* Workflow stepper */
.aml-stepper {
  display: flex;
  align-items: stretch;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
.aml-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0;
}
.aml-step:last-child { flex: 0 0 auto; }
.aml-step-row {
  display: flex;
  align-items: center;
  height: 30px;
  width: 100%;
}
.aml-step-bullet {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper-deep);
  color: var(--fg-3);
  font-size: 11px;
  font-weight: 800;
  border: 2px solid var(--border-default);
  flex-shrink: 0;
  transition: background 250ms, border-color 250ms, color 250ms, transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.aml-step.active .aml-step-bullet {
  background: var(--burg);
  border-color: var(--burg);
  color: var(--paper);
  transform: scale(1.1);
  box-shadow: 0 0 0 4px rgba(122, 46, 46, 0.15);
  animation: amlStepPulse 2s ease-in-out infinite;
}
.aml-step.done .aml-step-bullet {
  background: var(--green-500);
  border-color: var(--green-500);
  color: var(--paper);
}
@keyframes amlStepPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(122, 46, 46, 0.15); }
  50%      { box-shadow: 0 0 0 8px rgba(122, 46, 46, 0.05); }
}
.aml-step-text {
  min-width: 0;
  margin-top: 8px;
  padding-right: 8px;
}
.aml-step-label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--fg-2);
  letter-spacing: -0.005em;
}
.aml-step.active .aml-step-label { color: var(--fg-1); }
.aml-step.done .aml-step-label   { color: var(--fg-1); }
.aml-step-hint {
  font-size: 10.5px;
  color: var(--fg-4);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Connector line — fills the rest of the row between this bullet and the next step's bullet. */
.aml-step-line {
  flex: 1;
  height: 2px;
  background: var(--border-default);
  margin: 0 8px;
  align-self: center;
  border-radius: 1px;
  transition: background 280ms ease;
}
.aml-step.done .aml-step-line {
  background: var(--green-500);
}

/* Risk gauge */
.aml-gauge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: relative;
}
.aml-gauge-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}
.aml-gauge-score {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  line-height: 1;
}
.aml-gauge-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 32px;
  font-weight: 700;
  color: var(--fg-1);
  line-height: 1;
  letter-spacing: -0.02em;
}
.aml-gauge.tier-low  .aml-gauge-num { color: var(--green-700); }
.aml-gauge.tier-mid  .aml-gauge-num { color: var(--amber-700); }
.aml-gauge.tier-high .aml-gauge-num { color: var(--red-700); }
.aml-gauge-pct {
  font-size: 12px;
  color: var(--fg-4);
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.aml-gauge-tier {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--paper-deep);
}
.aml-gauge.tier-low  .aml-gauge-tier { background: var(--green-100); color: var(--green-700); }
.aml-gauge.tier-mid  .aml-gauge-tier { background: var(--amber-100); color: var(--amber-700); }
.aml-gauge.tier-high .aml-gauge-tier { background: var(--red-100); color: var(--red-700); }

.aml-verdict-card {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  padding: 8px 14px;
  border-radius: 10px;
  background: var(--paper-deep);
  min-width: 160px;
}
.aml-verdict-card-lbl {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-4);
}
.aml-verdict-card-val {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.aml-verdict-card.v-clean   { background: var(--green-100); color: var(--green-700); }
.aml-verdict-card.v-clean   .aml-verdict-card-val { color: var(--green-700); }
.aml-verdict-card.v-review  { background: var(--amber-100); }
.aml-verdict-card.v-review  .aml-verdict-card-val { color: var(--amber-700); }
.aml-verdict-card.v-hit     { background: var(--red-100); }
.aml-verdict-card.v-hit     .aml-verdict-card-val { color: var(--red-700); }

/* Case grid: matrix + decision on the left, side panels on the right */
.aml-case-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 20px;
  align-items: start;
}
.aml-case-col-main { min-width: 0; }
.aml-case-col-side { display: flex; flex-direction: column; gap: 14px; }

.aml-side-card {
  background: var(--paper-card);
  border: 1px solid var(--border-default);
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
}
.aml-side-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
}
.aml-side-card-head h4 {
  font-size: 13px;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.005em;
}
.aml-side-card-sub {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--fg-4);
}

/* Activity timeline */
.aml-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
.aml-timeline.empty {
  font-size: 12px;
  color: var(--fg-4);
  font-style: italic;
  padding: 12px 0;
}
.aml-tl-item {
  position: relative;
  display: flex;
  gap: 10px;
  padding: 8px 0 8px 18px;
  border-left: 2px solid var(--border-subtle);
  margin-left: 6px;
}
.aml-tl-item:first-child { border-top: 0; }
.aml-tl-dot {
  position: absolute;
  left: -6px;
  top: 12px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--burg);
  border: 2px solid var(--paper-card);
  box-shadow: 0 0 0 1px var(--burg);
}
.aml-tl-item.kind-screening .aml-tl-dot { background: var(--gold-500); box-shadow: 0 0 0 1px var(--gold-500); }
.aml-tl-item.kind-decision .aml-tl-dot  { background: var(--green-500); box-shadow: 0 0 0 1px var(--green-500); }
.aml-tl-item.kind-export .aml-tl-dot    { background: var(--burg); box-shadow: 0 0 0 1px var(--burg); }
.aml-tl-item.kind-viewed .aml-tl-dot    { background: var(--fg-4); box-shadow: 0 0 0 1px var(--fg-4); }
.aml-tl-msg {
  font-size: 12.5px;
  color: var(--fg-1);
  line-height: 1.4;
}
.aml-tl-meta {
  font-size: 10.5px;
  color: var(--fg-4);
  margin-top: 2px;
  font-family: 'JetBrains Mono', monospace;
}

/* Side keyboard reference */
.aml-side-kbd {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.aml-side-kbd li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--fg-2);
}
.aml-side-kbd li.more { padding-top: 4px; border-top: 1px dashed var(--border-subtle); margin-top: 2px; }
.aml-side-kbd kbd {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 700;
  background: var(--paper-deep);
  color: var(--burg);
  padding: 3px 7px;
  border-radius: 4px;
  border: 1px solid var(--border-subtle);
  min-width: 24px;
  text-align: center;
}
.btn-link {
  background: none;
  border: 0;
  color: var(--burg);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  padding: 0;
  font-family: inherit;
}
.btn-link:hover { text-decoration: underline; }

/* Progress bar above the matrix */
.aml-progress-bar {
  position: relative;
  height: 6px;
  background: var(--paper-deep);
  border-radius: 3px;
  margin-bottom: 14px;
  overflow: hidden;
}
.aml-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--burg), var(--gold-500));
  border-radius: 3px;
  transition: width 240ms ease;
}
.aml-progress-lbl {
  position: absolute;
  top: -16px;
  right: 0;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--fg-3);
  font-family: 'JetBrains Mono', monospace;
}

/* Matrix counts inline */
.aml-matrix-counts {
  margin-left: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
}
.aml-matrix-counts .m-clean  { color: var(--green-700); }
.aml-matrix-counts .m-review { color: var(--amber-700); margin-left: 4px; }
.aml-matrix-counts .m-hit    { color: var(--red-700); margin-left: 4px; }

/* Clickable row + chevron */
.aml-matrix-row-head.clickable {
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}
.aml-matrix-row-head.clickable:hover {
  background: var(--burg-50);
  border-color: var(--burg-200);
}
.aml-matrix-row-head.open { background: var(--burg-50); border-color: var(--burg-200); }
.aml-row-chev {
  margin-left: auto;
  color: var(--fg-3);
  display: flex;
  align-items: center;
  transition: transform 200ms ease;
}
.aml-row-chev.open { transform: rotate(180deg); color: var(--burg); }

/* Matrix cell tooltip cursor */
.aml-matrix-cell { cursor: pointer; }

/* Evidence rows */
.aml-matrix-evidence {
  background: var(--paper-deep);
  border-radius: 10px;
  padding: 10px 14px;
  margin: 4px 0 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  animation: amlEvdSlide 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes amlEvdSlide { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.aml-evd-row {
  display: grid;
  grid-template-columns: 200px 160px 1fr;
  gap: 12px;
  align-items: center;
  padding: 8px 10px;
  background: var(--paper-card);
  border-radius: 6px;
  border-left: 3px solid var(--border-subtle);
  font-size: 12px;
}
.aml-evd-row.st-clean  { border-left-color: var(--green-500); }
.aml-evd-row.st-review { border-left-color: var(--amber-500); }
.aml-evd-row.st-hit    { border-left-color: var(--red-500); }
.aml-evd-row.st-unavailable { border-left-color: var(--border-default); opacity: 0.7; }
.aml-evd-row.st-na          { border-left-color: var(--border-default); opacity: 0.6; }
.aml-evd-src strong { font-size: 12.5px; color: var(--fg-1); }
.aml-evd-region {
  display: block;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-4);
  margin-top: 1px;
  font-family: 'JetBrains Mono', monospace;
}
.aml-evd-status {
  display: flex;
  align-items: center;
  gap: 8px;
}
.aml-evd-pill {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
}
.aml-evd-pill.clean  { background: var(--green-100); color: var(--green-700); }
.aml-evd-pill.review { background: var(--amber-100); color: var(--amber-700); }
.aml-evd-pill.hit    { background: var(--red-100); color: var(--red-700); }
.aml-evd-pill.unavailable { background: var(--paper-deep); color: var(--fg-3); }
.aml-evd-pill.na          { background: var(--paper-deep); color: var(--fg-4); }
.aml-evd-conf {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--fg-3);
  font-family: 'JetBrains Mono', monospace;
}
.aml-evd-conf-bar {
  width: 50px;
  height: 4px;
  background: var(--paper-deep);
  border-radius: 2px;
  overflow: hidden;
}
.aml-evd-conf-bar > span {
  display: block;
  height: 100%;
  background: var(--burg);
}
.aml-evd-row.st-clean  .aml-evd-conf-bar > span { background: var(--green-500); }
.aml-evd-row.st-review .aml-evd-conf-bar > span { background: var(--amber-500); }
.aml-evd-row.st-hit    .aml-evd-conf-bar > span { background: var(--red-500); }
.aml-evd-note {
  color: var(--fg-2);
  line-height: 1.4;
}
.aml-evd-empty {
  font-size: 12px;
  color: var(--fg-4);
  font-style: italic;
  text-align: center;
  padding: 8px 0;
}

/* Verdict pill simplified — without unicode */
.aml-verdict-pill {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  margin-left: auto;
}
.aml-verdict-pill.pending { background: var(--paper-deep); color: var(--fg-3); }
.aml-verdict-pill.clean   { background: var(--green-100); color: var(--green-700); }
.aml-verdict-pill.review  { background: var(--amber-100); color: var(--amber-700); }
.aml-verdict-pill.hit     { background: var(--red-100); color: var(--red-700); }

/* Decision buttons get inline kbd */
.aml-decision-btn kbd {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 700;
  background: rgba(0,0,0,0.08);
  padding: 2px 5px;
  border-radius: 3px;
  margin-left: 6px;
  letter-spacing: 0.04em;
}
.aml-decision-btn.on kbd { background: rgba(255,255,255,0.22); color: inherit; }
.aml-decision-head kbd {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 700;
  background: var(--paper-deep);
  border: 1px solid var(--border-subtle);
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--burg);
}

/* Decision stamp overlay */
.aml-stamp-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 60;
}
.aml-stamp {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 18px 38px;
  border: 6px double currentColor;
  border-radius: 8px;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transform: rotate(-8deg) scale(0);
  animation: amlStampIn 1.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  background: rgba(255, 251, 245, 0.85);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.aml-stamp-text {
  font-size: 44px;
  font-weight: 800;
}
.aml-stamp-sub {
  font-size: 11px;
  font-weight: 700;
  margin-top: 4px;
  opacity: 0.7;
}
.aml-stamp-overlay.stamp-approved .aml-stamp { color: var(--green-700); }
.aml-stamp-overlay.stamp-edd      .aml-stamp { color: var(--amber-700); }
.aml-stamp-overlay.stamp-rejected .aml-stamp { color: var(--red-700); }
@keyframes amlStampIn {
  0%   { transform: rotate(-30deg) scale(0); opacity: 0; }
  35%  { transform: rotate(-8deg) scale(1.4); opacity: 1; }
  55%  { transform: rotate(-8deg) scale(1); opacity: 1; }
  85%  { transform: rotate(-8deg) scale(1); opacity: 1; }
  100% { transform: rotate(-8deg) scale(1); opacity: 0; }
}

/* Toast notifications */
.aml-toasts {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 70;
  pointer-events: none;
}
.aml-toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.20);
  animation: amlToastIn 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
  min-width: 240px;
}
.aml-toast.kind-ok   { background: var(--green-700); }
.aml-toast.kind-warn { background: var(--amber-700); }
.aml-toast.kind-err  { background: var(--red-700); }
@keyframes amlToastIn {
  from { transform: translateY(20px) scale(0.96); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

/* Keyboard help modal */
.aml-kbd-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 12, 12, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 80;
  animation: amlKbdFade 200ms ease;
}
@keyframes amlKbdFade { from { opacity: 0; } to { opacity: 1; } }
.aml-kbd-modal {
  background: var(--paper-card);
  border-radius: 14px;
  padding: 28px 32px;
  width: min(420px, 92vw);
  box-shadow: 0 24px 60px rgba(0,0,0,0.30);
  animation: amlKbdPop 240ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes amlKbdPop { from { transform: scale(0.92); } to { transform: scale(1); } }
.aml-kbd-modal h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}
.aml-kbd-modal ul {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.aml-kbd-modal li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  color: var(--fg-2);
}
.aml-kbd-modal kbd {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  font-weight: 700;
  background: var(--paper-deep);
  color: var(--burg);
  padding: 4px 10px;
  border-radius: 5px;
  border: 1px solid var(--border-subtle);
  min-width: 36px;
  text-align: center;
}

/* Old .aml-stats / .aml-case-head / .aml-verdict-big are kept for compat
   but the new shell uses .aml-kpis / .aml-case-hero / .aml-verdict-card. */

/* Mobile */
@media (max-width: 920px) {
  .aml-case-grid { grid-template-columns: 1fr; }
  .aml-case-hero { grid-template-columns: 1fr; }
  .aml-case-hero-side { flex-direction: row; align-items: center; flex-wrap: wrap; }
  .aml-kpis { grid-template-columns: repeat(2, 1fr); }
  .aml-stepper { flex-wrap: wrap; }
  .aml-step-line { display: none; }
}
@media (max-width: 640px) {
  .aml-search-wrap { width: 100%; }
  .aml-page-head { flex-direction: column; align-items: stretch; }
  .aml-toolbar { flex-direction: column; align-items: stretch; }
  .aml-kpi-num { font-size: 30px; }
  .aml-evd-row { grid-template-columns: 1fr; }
  .aml-table th:nth-child(4), .aml-table td:nth-child(4) { display: none; }
  .aml-stamp-text { font-size: 30px; }
}

/* ─────────────────────────────────────────────────────────
   CINEMATIC SCREENING STAGE
   ───────────────────────────────────────────────────────── */
.screen-stage {
  position: relative;
  background: linear-gradient(135deg, #1a0d0d 0%, #2a1515 50%, #1a0d0d 100%);
  border: 1px solid var(--burg-700);
  border-radius: 14px;
  padding: 22px 26px 18px;
  margin-bottom: 18px;
  overflow: hidden;
  color: var(--paper);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  animation: stageIn 480ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes stageIn { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }

.screen-stage-bg { position: absolute; inset: 0; pointer-events: none; opacity: 0.4; }
.screen-stage-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(201, 169, 97, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201, 169, 97, 0.06) 1px, transparent 1px);
  background-size: 40px 40px;
  animation: gridDrift 24s linear infinite;
}
@keyframes gridDrift { from { background-position: 0 0; } to { background-position: 40px 40px; } }
.screen-stage-beam {
  position: absolute; top: -50%; left: -20%;
  width: 50%; height: 200%;
  background: linear-gradient(90deg, transparent, rgba(201, 169, 97, 0.18), transparent);
  transform: rotate(20deg);
  animation: beamSweep 6s ease-in-out infinite;
}
@keyframes beamSweep {
  0%, 100% { transform: translateX(-100%) rotate(20deg); opacity: 0; }
  10%      { opacity: 1; }
  50%      { transform: translateX(300%) rotate(20deg); opacity: 0.7; }
  60%      { opacity: 0; }
}

.screen-stage-body {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 18px;
  align-items: center;
}
.screen-stage-icon-wrap {
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(201, 169, 97, 0.10);
  border: 1px solid rgba(201, 169, 97, 0.32);
  border-radius: 50%;
  color: var(--gold-500);
  position: relative;
}
.screen-stage-icon-wrap::after {
  content: ""; position: absolute; inset: -6px;
  border-radius: 50%;
  border: 1px solid rgba(201, 169, 97, 0.5);
  animation: iconPulse 2.4s ease-out infinite;
}
@keyframes iconPulse {
  0%   { transform: scale(0.85); opacity: 1; }
  100% { transform: scale(1.4);  opacity: 0; }
}
.ssi { width: 32px; height: 32px; color: inherit; }

.ssi-shield .ssi-check { stroke-dasharray: 30; stroke-dashoffset: 30; animation: drawCheck 1.6s ease-in-out infinite; }
@keyframes drawCheck { 0%, 100% { stroke-dashoffset: 30; } 50% { stroke-dashoffset: 0; } }
.ssi-radar .ssi-radar-arm { transform-origin: 24px 24px; animation: radarSweep 2s linear infinite; }
@keyframes radarSweep { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.ssi-radar circle { animation: radarRing 2s ease-in-out infinite; }
.ssi-radar circle:nth-of-type(2) { animation-delay: 0.3s; }
.ssi-radar circle:nth-of-type(3) { animation-delay: 0.6s; }
@keyframes radarRing { 50% { opacity: 1; } }
.ssi-compare-l, .ssi-compare-r { stroke-dasharray: 30; stroke-dashoffset: 30; animation: typeLine 2s ease-in-out infinite; }
.ssi-compare-r { animation-delay: 0.7s; }
.ssi-compare-link { animation: linkBlink 1.4s ease-in-out infinite; }
@keyframes typeLine { 0%, 100% { stroke-dashoffset: 30; } 50% { stroke-dashoffset: 0; } }
@keyframes linkBlink { 50% { stroke: var(--gold-500); } }
.ssi-news-l1, .ssi-news-l2, .ssi-news-l3 { stroke-dasharray: 28; stroke-dashoffset: 28; animation: typeLine 1.8s ease-in-out infinite; }
.ssi-news-l2 { animation-delay: 0.3s; }
.ssi-news-l3 { animation-delay: 0.6s; }
.ssi-bw { animation: windowBlink 2s ease-in-out infinite; }
.ssi-bw-1 { animation-delay: 0.2s; }
.ssi-bw-2 { animation-delay: 0.5s; }
.ssi-bw-3 { animation-delay: 0.8s; }
@keyframes windowBlink { 50% { fill: var(--gold-500); opacity: 1; } }
.ssi-gauge-needle { transform-origin: 24px 30px; animation: needleSwing 1.8s ease-in-out infinite; }
@keyframes needleSwing { 0%, 100% { transform: rotate(-50deg); } 50% { transform: rotate(50deg); } }
.ssi-final-ring { stroke-dasharray: 113; animation: ringDraw 1.4s ease-out forwards; }
@keyframes ringDraw { from { stroke-dashoffset: 113; } to { stroke-dashoffset: 0; } }
.ssi-final-check { stroke-dasharray: 30; stroke-dashoffset: 30; animation: drawCheck 1.4s 0.4s ease-out forwards; }

.screen-stage-text { min-width: 0; }
.screen-stage-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px; font-weight: 800;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold-500); margin-bottom: 6px;
}
.screen-stage-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold-500);
  box-shadow: 0 0 0 0 rgba(201, 169, 97, 0.7);
  animation: liveDot 1.4s ease-in-out infinite;
}
@keyframes liveDot {
  0%   { box-shadow: 0 0 0 0 rgba(201, 169, 97, 0.7); }
  70%  { box-shadow: 0 0 0 8px rgba(201, 169, 97, 0); }
  100% { box-shadow: 0 0 0 0 rgba(201, 169, 97, 0); }
}
.screen-stage-label {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px; font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
  color: var(--paper);
}
.screen-stage-ticker {
  display: flex; gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  color: rgba(248, 242, 231, 0.72);
  letter-spacing: 0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.screen-stage-ticker-prompt { color: var(--gold-500); font-weight: 700; }
.screen-stage-ticker-msg {
  display: inline-block;
  animation: tickerIn 240ms ease-out;
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
@keyframes tickerIn { from { transform: translateY(6px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.screen-stage-meta { text-align: right; font-family: 'JetBrains Mono', monospace; }
.screen-stage-pct {
  font-family: 'Cormorant Garamond', serif;
  font-size: 38px; font-weight: 600;
  color: var(--gold-500); line-height: 1;
  letter-spacing: -0.02em;
}
.screen-stage-meta-lbl {
  font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(248, 242, 231, 0.5); margin-top: 4px;
}

.screen-stage-progress {
  position: relative; height: 3px;
  background: rgba(201, 169, 97, 0.10);
  border-radius: 2px; margin-top: 16px; overflow: hidden;
}
.screen-stage-progress-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, var(--burg-200) 0%, var(--gold-500) 50%, var(--paper) 100%);
  border-radius: 2px;
  transition: width 600ms cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 10px rgba(201, 169, 97, 0.4);
}
.screen-stage-progress-fill::after {
  content: ""; position: absolute; right: 0; top: -3px; bottom: -3px;
  width: 30px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5));
  animation: progressGlow 1.4s ease-in-out infinite;
}
@keyframes progressGlow { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }

.screen-stage-cluster {
  display: flex; gap: 14px;
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid rgba(201, 169, 97, 0.14);
  flex-wrap: wrap; justify-content: space-between;
}
.scl-dot {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  flex: 1; min-width: 60px;
  opacity: 0.4;
  transition: opacity 280ms ease;
}
.scl-dot.on { opacity: 1; }
.scl-ring { width: 12px; height: 12px; border: 1px solid rgba(201, 169, 97, 0.5); border-radius: 50%; position: relative; }
.scl-core { position: absolute; width: 6px; height: 6px; top: 3px; background: rgba(201, 169, 97, 0.4); border-radius: 50%; }
.scl-dot.on .scl-core {
  background: var(--gold-500);
  box-shadow: 0 0 0 0 rgba(201, 169, 97, 0.8);
  animation: dotPulse 1.4s ease-out infinite;
}
@keyframes dotPulse { 0% { box-shadow: 0 0 0 0 rgba(201, 169, 97, 0.8); } 100% { box-shadow: 0 0 0 8px rgba(201, 169, 97, 0); } }
.scl-name {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(248, 242, 231, 0.55);
}
.scl-dot.on .scl-name { color: var(--gold-500); }

/* Cell drop-in: stronger pop than the simple fade */
.aml-matrix-cell.cell-just {
  animation: cellPop 600ms cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
@keyframes cellPop {
  0%   { transform: scale(0.3); opacity: 0; filter: blur(4px); }
  50%  { transform: scale(1.12); opacity: 1; filter: blur(0); }
  100% { transform: scale(1); opacity: 1; filter: blur(0); }
}

/* ─────────────────────────────────────────────────────────
   ADMIN PANEL
   ───────────────────────────────────────────────────────── */
.admin-grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 24px;
  padding: 24px 28px 60px;
  max-width: 1280px;
  margin: 0 auto;
}
.admin-side { position: sticky; top: 90px; align-self: start; }
.admin-side-title {
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg-3);
  margin: 0 0 12px 12px;
  font-family: 'JetBrains Mono', monospace;
}
.admin-nav { display: flex; flex-direction: column; gap: 4px; }
.admin-nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border: 0;
  background: transparent;
  color: var(--fg-2);
  font-family: inherit; font-size: 13.5px; font-weight: 500;
  cursor: pointer; border-radius: 8px;
  text-align: left;
  transition: all 160ms ease;
}
.admin-nav-item:hover { background: var(--paper-deep); color: var(--fg-1); }
.admin-nav-item.on {
  background: var(--burg); color: var(--paper); font-weight: 600;
  box-shadow: 0 4px 12px rgba(122, 46, 46, 0.20);
}
.admin-nav-item svg { flex-shrink: 0; }
.admin-side-foot {
  margin-top: 24px; padding: 14px;
  background: var(--paper-deep); border-radius: 8px;
}
.admin-side-foot-lbl {
  font-size: 9.5px; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-4); margin: 0 0 6px;
  font-family: 'JetBrains Mono', monospace;
}
.admin-side-foot-url {
  display: block; font-size: 11.5px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--burg); word-break: break-all;
}

.admin-main { min-width: 0; }
.admin-panel { display: flex; flex-direction: column; gap: 16px; }
.admin-panel-head { margin-bottom: 4px; }
.admin-panel-head h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 32px; font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 4px;
  color: var(--fg-1);
}
.admin-panel-head p { font-size: 13px; color: var(--fg-3); margin: 0; }

.admin-card {
  background: var(--paper-card);
  border: 1px solid var(--border-default);
  border-radius: 14px;
  padding: 22px 26px;
  box-shadow: var(--shadow-sm);
}
.admin-card h3 {
  font-size: 15px; font-weight: 700;
  margin: 0 0 14px;
  letter-spacing: -0.005em;
  color: var(--fg-1);
}
.admin-card-head-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.admin-card-head-row h3 { margin: 0; }
.admin-card-danger { border-color: var(--red-200); }
.admin-card-danger h3 { color: var(--red-700); }

.admin-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.admin-field.grow { flex: 1; }
.admin-field span {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--fg-3);
}
.admin-field input[type=text],
.admin-field input[type=number],
.admin-field select,
.admin-textarea {
  border: 1px solid var(--border-default);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13.5px;
  font-family: inherit;
  color: var(--fg-1);
  background: var(--paper-bg);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.admin-field input:focus,
.admin-field select:focus,
.admin-textarea:focus {
  outline: none;
  border-color: var(--burg);
  box-shadow: 0 0 0 3px rgba(122, 46, 46, 0.10);
}
.admin-textarea { min-height: 80px; resize: vertical; line-height: 1.5; }
.admin-hint { display: block; font-size: 11px; color: var(--fg-4); font-style: italic; margin-top: 4px; }

.admin-logo-row { display: flex; gap: 18px; align-items: center; }
.admin-logo-preview {
  width: 160px; height: 90px;
  border-radius: 10px;
  border: 1px dashed var(--border-default);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; flex-shrink: 0;
}
.admin-logo-preview img { max-height: 60px; max-width: 130px; }
.admin-logo-empty {
  font-size: 11px; color: var(--fg-4);
  font-style: italic; text-align: center; padding: 0 12px;
}
.admin-logo-actions { display: flex; flex-direction: column; gap: 8px; }
.admin-logo-actions .btn { display: inline-flex; align-items: center; cursor: pointer; }

.admin-presets {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin-bottom: 16px;
}
.admin-preset {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: var(--paper-bg);
  border: 1.5px solid var(--border-default);
  border-radius: 10px;
  cursor: pointer;
  transition: all 160ms ease;
  font-family: inherit;
  text-align: left;
}
.admin-preset:hover { border-color: var(--burg-200); transform: translateY(-1px); }
.admin-preset.on { border-color: var(--burg); box-shadow: 0 0 0 2px rgba(122, 46, 46, 0.15); }
.admin-preset-swatches { display: flex; gap: 0; }
.admin-preset-swatches > span {
  width: 18px; height: 18px;
  border-radius: 4px; margin-left: -3px;
  box-shadow: 0 0 0 1.5px var(--paper-card);
}
.admin-preset-swatches > span:first-child { margin-left: 0; }
.admin-preset-name { font-size: 12px; font-weight: 600; color: var(--fg-1); }

.admin-color-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.admin-color-field { display: flex; flex-direction: column; gap: 6px; }
.admin-color-input {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--border-default); border-radius: 8px;
  padding: 4px 8px 4px 4px;
  background: var(--paper-bg);
}
.admin-color-input input[type=color] {
  width: 28px; height: 28px; padding: 0; border: 0; background: transparent; cursor: pointer;
}
.admin-color-text {
  flex: 1; border: 0; background: transparent;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px; color: var(--fg-1); outline: none;
}

.admin-font-pairs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.admin-font-pair {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 16px;
  background: var(--paper-bg);
  border: 1.5px solid var(--border-default);
  border-radius: 10px;
  cursor: pointer;
  transition: all 160ms ease;
  text-align: left;
  font-family: inherit;
}
.admin-font-pair:hover { border-color: var(--burg-200); transform: translateY(-1px); }
.admin-font-pair.on { border-color: var(--burg); box-shadow: 0 0 0 2px rgba(122, 46, 46, 0.15); }
.admin-font-pair-name {
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--fg-3);
  font-family: 'JetBrains Mono', monospace;
}
.admin-font-pair-sample { font-size: 22px; color: var(--fg-1); letter-spacing: -0.01em; }
.admin-font-pair-sub { font-size: 10.5px; color: var(--fg-4); letter-spacing: 0.04em; }

.admin-preview {
  border: 1px solid var(--border-default);
  border-radius: 12px;
  overflow: hidden;
}
.admin-preview-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px;
  border-bottom: 2px solid var(--burg);
}
.admin-preview-body { padding: 24px 18px; }
.admin-preview-body h4 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px; font-weight: 600;
  margin: 0 0 6px;
}
.admin-preview-btn {
  margin-top: 14px;
  padding: 10px 18px;
  border: 0; border-radius: 8px;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.admin-sections { display: flex; flex-direction: column; gap: 8px; }
.admin-section-row {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 14px;
  padding: 12px 14px;
  background: var(--paper-bg);
  border: 1px solid var(--border-default);
  border-radius: 10px;
  cursor: pointer;
  transition: all 160ms ease;
}
.admin-section-row:hover { border-color: var(--burg-200); }
.admin-section-row.locked { background: var(--paper-deep); cursor: not-allowed; }
.admin-section-row input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--burg); }
.admin-section-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.admin-section-title { font-size: 13px; font-weight: 600; color: var(--fg-1); }
.admin-locked { font-style: italic; color: var(--fg-4); font-weight: 400; font-size: 11px; }
.admin-section-desc { font-size: 11.5px; color: var(--fg-4); }
.admin-section-pill {
  font-size: 9.5px; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 4px;
}
.admin-section-pill.on  { background: var(--green-100); color: var(--green-700); }
.admin-section-pill.off { background: var(--paper-deep); color: var(--fg-4); }

.admin-empty {
  font-size: 12.5px; color: var(--fg-4);
  font-style: italic;
  padding: 20px; text-align: center;
  background: var(--paper-bg);
  border-radius: 8px;
  border: 1px dashed var(--border-default);
}
.admin-custom-q {
  background: var(--paper-bg);
  border: 1px solid var(--border-default);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 8px;
}
.admin-custom-q-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.admin-custom-q-row .admin-field { margin-bottom: 0; flex: 1; min-width: 140px; }
.admin-checkbox-inline { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--fg-2); padding-bottom: 10px; }
.admin-q-remove { padding-bottom: 8px; }

.admin-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.admin-table th {
  text-align: left; padding: 8px 10px;
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg-3);
  border-bottom: 1px solid var(--border-default);
}
.admin-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-subtle);
}
.admin-table tr.is-self { background: var(--burg-50); }
.admin-self-tag {
  display: inline-block; margin-left: 6px;
  font-size: 9px; font-weight: 800;
  padding: 2px 6px; border-radius: 3px;
  background: var(--burg); color: var(--paper);
  letter-spacing: 0.10em;
}
.admin-inline-input,
.admin-inline-select {
  width: 100%;
  border: 1px solid transparent;
  background: transparent;
  padding: 5px 7px;
  border-radius: 5px;
  font-family: inherit;
  font-size: 12px;
  color: var(--fg-1);
}
.admin-inline-input:hover,
.admin-inline-select:hover { border-color: var(--border-default); background: var(--paper-bg); }
.admin-inline-input:focus,
.admin-inline-select:focus { outline: none; border-color: var(--burg); background: var(--paper-bg); }

.admin-add-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr) auto;
  gap: 12px;
  align-items: end;
}
.admin-add-row .admin-field { margin-bottom: 0; }
.admin-add-row .btn { padding: 10px 16px; }

@media (max-width: 920px) {
  .admin-grid { grid-template-columns: 1fr; padding: 16px; }
  .admin-side { position: static; }
  .admin-nav { flex-direction: row; flex-wrap: wrap; }
  .admin-nav-item { flex: 1; min-width: 140px; }
  .admin-presets { grid-template-columns: repeat(2, 1fr); }
  .admin-color-grid { grid-template-columns: repeat(2, 1fr); }
  .admin-font-pairs { grid-template-columns: 1fr; }
  .admin-add-row { grid-template-columns: 1fr 1fr; }
  .screen-stage-body { grid-template-columns: 48px 1fr; }
  .screen-stage-meta { grid-column: 1 / -1; text-align: left; }
  .screen-stage-pct { font-size: 28px; }
}

/* ─────────────────────────────────────────────────────────
   MATRIX v2 — explicit row layout, no auto-flow ambiguity.
   Each entity row is a flex container: 280px row-head + grid cells.
   ───────────────────────────────────────────────────────── */
.aml-matrix-table {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.aml-mt-thead {
  display: flex;
  align-items: stretch;
  gap: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 4px;
}
.aml-mt-corner { width: 280px; flex-shrink: 0; }
.aml-mt-cols {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(var(--cols, 8), minmax(0, 1fr));
  gap: 8px;
}
.aml-mt-col-head {
  display: flex; flex-direction: column; gap: 2px;
  align-items: center; justify-content: flex-end;
  padding: 4px 4px 6px;
  border-bottom: 2px solid var(--burg-100);
  text-align: center;
  min-width: 0;
}
.aml-mt-col-name {
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--fg-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  width: 100%;
}
.aml-mt-col-region {
  font-size: 8.5px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--fg-3);
}

/* TR — the entity row */
.aml-mt-tr {
  border-radius: 12px;
  transition: background 200ms ease, box-shadow 200ms ease;
}
.aml-mt-tr:hover { background: var(--paper-deep); }
.aml-mt-tr.open  { background: var(--paper-deep); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04); }
.aml-mt-tr.verdict-hit    { box-shadow: inset 4px 0 0 var(--red-500); padding-left: 0; }
.aml-mt-tr.verdict-review { box-shadow: inset 4px 0 0 var(--gold-500); padding-left: 0; }
.aml-mt-tr.verdict-clean  { box-shadow: inset 4px 0 0 var(--green-500); padding-left: 0; }

.aml-mt-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
  padding: 8px 10px;
}
.aml-mt-row-head {
  width: 280px; flex-shrink: 0;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: var(--paper-card);
  border: 1px solid var(--border-default);
  border-radius: 10px;
  cursor: pointer;
  transition: all 200ms ease;
  min-width: 0;
}
.aml-mt-row-head:hover {
  border-color: var(--burg-200);
  transform: translateX(2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.aml-mt-tr.open .aml-mt-row-head {
  border-color: var(--burg);
  background: var(--burg-50);
}
.aml-mt-kind {
  flex-shrink: 0;
  font-size: 9px; font-weight: 800;
  letter-spacing: 0.10em;
  padding: 4px 7px;
  border-radius: 5px;
  background: var(--paper-deep);
  color: var(--fg-3);
  font-family: 'JetBrains Mono', monospace;
}
.aml-mt-kind.kind-company       { background: var(--burg-50);  color: var(--burg-700); }
.aml-mt-kind.kind-individual    { background: var(--gold-50);  color: var(--gold-700); }
.aml-mt-kind.kind-corporate-ubo { background: var(--paper-deep); color: var(--burg-600); }
.aml-mt-row-text { flex: 1; min-width: 0; }
.aml-mt-row-name {
  font-size: 13px; font-weight: 700;
  color: var(--fg-1); letter-spacing: -0.005em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.aml-mt-row-sub {
  font-size: 10.5px; color: var(--fg-3);
  margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.aml-mt-verdict {
  font-size: 9.5px; font-weight: 800;
  letter-spacing: 0.10em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 4px;
  flex-shrink: 0;
}
.aml-mt-verdict.pending { background: var(--paper-deep); color: var(--fg-3); }
.aml-mt-verdict.clean   { background: var(--green-100); color: var(--green-700); }
.aml-mt-verdict.review  { background: var(--amber-100); color: var(--amber-700); }
.aml-mt-verdict.hit     { background: var(--red-100); color: var(--red-700); }
.aml-mt-chev {
  color: var(--fg-3);
  display: flex; align-items: center;
  transition: transform 240ms cubic-bezier(0.34, 1.56, 0.64, 1);
  flex-shrink: 0;
}
.aml-mt-chev.open { transform: rotate(180deg); color: var(--burg); }

/* Cells row */
.aml-mt-cells {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(var(--cols, 8), minmax(0, 1fr));
  gap: 8px;
}

.aml-mt-cell {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: 60px;
  border-radius: 10px;
  background: var(--paper-card);
  border: 1px solid var(--border-default);
  overflow: hidden;
  cursor: pointer;
  transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 200ms ease,
              border-color 200ms ease,
              background 280ms ease;
}
.aml-mt-cell:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.10); }

/* Pending state — animated radar */
.aml-mt-cell.st-pending { border-style: dashed; }
.aml-mt-cell-pending {
  position: relative; width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
}
.aml-mt-cell-pending::before,
.aml-mt-cell-pending::after {
  content: ''; position: absolute;
  border-radius: 50%; border: 1.4px solid var(--burg-200);
  animation: cellPing 2s ease-out infinite;
}
.aml-mt-cell-pending::before { width: 6px; height: 6px; }
.aml-mt-cell-pending::after  { width: 14px; height: 14px; opacity: 0.5; animation-delay: 0.6s; }
.aml-mt-cell-radar {
  width: 4px; height: 4px;
  background: var(--burg);
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(122, 46, 46, 0.5);
  animation: cellPing 1.4s ease-out infinite;
  z-index: 1;
}
@keyframes cellPing {
  0%   { transform: scale(0.6); opacity: 1; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* Scanning beam — when running and not yet filled */
.aml-mt-cell.scanning::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 0%, rgba(201, 169, 97, 0.0) 30%, rgba(201, 169, 97, 0.45) 50%, rgba(201, 169, 97, 0.0) 70%, transparent 100%);
  background-size: 200% 100%;
  animation: scanSweep 1.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes scanSweep {
  0%   { background-position: 200% 0; opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { background-position: -100% 0; opacity: 0; }
}

/* Resolved states */
.aml-mt-cell.st-clean {
  background: linear-gradient(180deg, var(--green-50) 0%, #FFFFFF 100%);
  border-color: var(--green-200);
  color: var(--green-700);
}
.aml-mt-cell.st-clean:hover { border-color: var(--green-500); box-shadow: 0 6px 16px rgba(45, 134, 89, 0.15); }
.aml-mt-cell.st-review {
  background: linear-gradient(180deg, var(--amber-50) 0%, #FFFFFF 100%);
  border-color: var(--amber-200);
  color: var(--amber-700);
}
.aml-mt-cell.st-review:hover { border-color: var(--amber-500); box-shadow: 0 6px 16px rgba(217, 119, 6, 0.15); }
.aml-mt-cell.st-unavailable {
  background: repeating-linear-gradient(
    -45deg,
    var(--paper-deep) 0px, var(--paper-deep) 4px,
    var(--paper-bg) 4px, var(--paper-bg) 8px
  );
  border-color: var(--border-default);
  color: var(--fg-4);
}
.aml-mt-cell.st-unavailable:hover { border-color: var(--fg-3); color: var(--fg-3); }
.aml-mt-cell.st-na {
  background: var(--paper-bg);
  border: 1px dashed var(--border-default);
  color: var(--fg-4);
}
.aml-mt-na {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-4);
}
.aml-mt-cell.st-hit {
  background: linear-gradient(180deg, var(--red-50) 0%, #FFEEEE 100%);
  border-color: var(--red-300);
  color: var(--red-700);
  animation: hitPulse 2.4s ease-in-out infinite;
}
.aml-mt-cell.st-hit:hover { border-color: var(--red-500); box-shadow: 0 6px 18px rgba(192, 57, 43, 0.25); }
@keyframes hitPulse {
  0%, 100% { box-shadow: inset 0 0 0 0 rgba(192, 57, 43, 0.0); }
  50%      { box-shadow: inset 0 0 12px 0 rgba(192, 57, 43, 0.18); }
}

/* Just-landed: pop in with spring + flash */
.aml-mt-cell.just {
  animation: cellLand 700ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes cellLand {
  0%   { transform: scale(0.4) rotate(-6deg); opacity: 0; filter: blur(6px); }
  60%  { transform: scale(1.08) rotate(0); opacity: 1; filter: blur(0); }
  100% { transform: scale(1) rotate(0); opacity: 1; filter: blur(0); }
}
.aml-mt-cell.just::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: 10px;
  background: radial-gradient(circle at 50% 50%, currentColor 0%, transparent 60%);
  opacity: 0;
  animation: cellFlash 700ms ease-out;
  pointer-events: none;
}
@keyframes cellFlash {
  0%   { opacity: 0.4; transform: scale(0.5); }
  100% { opacity: 0; transform: scale(1.6); }
}

/* Confidence percentage badge in non-clean cells */
.aml-mt-cell-conf {
  position: absolute;
  bottom: 4px; right: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 800;
  color: currentColor;
  opacity: 0.7;
  letter-spacing: 0.02em;
}

/* Evidence drawer */
.aml-mt-evidence {
  margin: 0 10px 10px 10px;
  padding: 14px 16px;
  background: var(--paper-bg);
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
  display: flex; flex-direction: column;
  gap: 6px;
  animation: evdSlide 260ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes evdSlide { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

/* Override old broken matrix grid with display none */
.aml-matrix-grid { display: none !important; }

/* Mobile responsiveness */
@media (max-width: 920px) {
  .aml-mt-row { flex-direction: column; }
  .aml-mt-row-head { width: auto; }
  .aml-mt-thead { display: none; }
  .aml-mt-cells { grid-template-columns: repeat(4, 1fr); }
  .aml-mt-cell { min-height: 48px; }
  .aml-mt-cell::before { display: none; }
}

/* Cross-area navigation chips in topbars */
.aml-nav-link {
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 6px;
  background: var(--paper-deep);
  color: var(--burg);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  border: 1px solid transparent;
  transition: all 160ms ease;
}
.aml-nav-link:hover {
  background: var(--burg);
  color: var(--paper);
  transform: translateY(-1px);
}

/* Floating staff link on the public KYC form */
.staff-fab {
  position: fixed;
  bottom: 18px; right: 18px;
  background: var(--burg);
  color: var(--paper);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 9px 14px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(122, 46, 46, 0.30);
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  opacity: 0.65;
  transition: opacity 200ms ease, transform 200ms ease;
}
.staff-fab:hover { opacity: 1; transform: translateY(-2px); }

/* ─────────────────────────────────────────────────────────
   UBO NETWORK GRAPH — ownership chain visualisation
   ───────────────────────────────────────────────────────── */
.ubo-graph {
  background: var(--paper-card);
  border: 1px solid var(--border-default);
  border-radius: 14px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: all 240ms ease;
}
.ubo-graph-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--border-subtle);
}
.ubo-graph-title { display: flex; align-items: center; gap: 12px; }
.ubo-graph-icon {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: var(--burg-50);
  color: var(--burg);
  border-radius: 50%;
  border: 1px solid var(--burg-200);
}
.ubo-graph-title h3 {
  font-size: 15px; font-weight: 700;
  margin: 0 0 2px;
  letter-spacing: -0.005em;
  color: var(--fg-1);
}
.ubo-graph-sub {
  font-size: 10.5px;
  color: var(--fg-3);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.04em;
}
.ubo-graph-actions {
  display: flex; align-items: center; gap: 12px;
}
.ubo-graph-pill {
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.04em;
  padding: 5px 11px;
  border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  white-space: nowrap;
}
.ubo-graph-pill.tone-clean   { background: var(--green-100); color: var(--green-700); }
.ubo-graph-pill.tone-review  { background: var(--amber-100); color: var(--amber-700); }
.ubo-graph-pill.tone-hit     { background: var(--red-100);   color: var(--red-700); }
.ubo-graph-pill.tone-pending { background: var(--paper-deep); color: var(--fg-3); }
.ubo-graph-toggle {
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 6px;
  background: var(--paper-deep);
  color: var(--burg);
  border: 1px solid transparent;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 160ms ease;
}
.ubo-graph-toggle:hover {
  background: var(--burg);
  color: var(--paper);
}

.ubo-graph-body {
  padding: 18px 18px 14px;
  background: linear-gradient(180deg, #FFFBF5 0%, #FAF5EB 100%);
  position: relative;
  animation: uboGraphIn 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes uboGraphIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.ubo-graph-svg { display: block; }

/* SVG Node — DO NOT apply CSS transform on hover, it conflicts with the
   SVG transform attribute used for positioning and causes jitter. Use the
   <rect> background's stroke/filter instead for a clean lift effect. */
.ubo-node { cursor: default; }
.ubo-node .ubo-node-bg {
  fill: #FFFFFF;
  stroke: var(--border-default);
  stroke-width: 1.2;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.04));
  transition: stroke-width 200ms ease, filter 200ms ease, fill 200ms ease;
}
.ubo-node:hover .ubo-node-bg {
  stroke-width: 1.8;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.10));
}
.ubo-node .ubo-node-kind {
  fill: var(--burg-50);
  stroke: var(--burg-200);
  stroke-width: 0.6;
}
/* Verdict-driven left bar + ring */
.ubo-node.verdict-clean   .ubo-node-bar  { fill: #2d8659; }
.ubo-node.verdict-review  .ubo-node-bar  { fill: #d97706; }
.ubo-node.verdict-hit     .ubo-node-bar  { fill: #c0392b; }
.ubo-node.verdict-pending .ubo-node-bar  { fill: #bbb3a8; }
.ubo-node.verdict-clean   .ubo-node-bg   { stroke: rgba(45, 134, 89, 0.32); }
.ubo-node.verdict-review  .ubo-node-bg   { stroke: rgba(217, 119, 6, 0.36); }
.ubo-node.verdict-hit     .ubo-node-bg   { stroke: rgba(192, 57, 43, 0.40); }

/* Kind-specific subtle background tint */
.ubo-node.kind-company    .ubo-node-bg   { fill: #FFFBF5; }
.ubo-node.kind-corporate  .ubo-node-bg   { fill: #FAF8F2; }
.ubo-node.kind-individual .ubo-node-bg   { fill: #FFFFFF; }

/* Counterparty node — emphasized as the focal subject of the screening */
.ubo-node.is-counterparty .ubo-node-bg {
  stroke-width: 2;
  stroke: var(--burg);
  fill: var(--burg-50);
  filter: drop-shadow(0 4px 12px rgba(122, 46, 46, 0.20));
}
.ubo-node.is-counterparty .ubo-node-bar { fill: var(--burg); }
.ubo-node.is-counterparty .ubo-node-kind {
  fill: var(--burg);
  stroke: var(--burg);
}
/* Override kind-text color when counterparty pill is filled burg */
.ubo-node.is-counterparty .ubo-node-content text:nth-of-type(1) { fill: var(--paper); }

/* Hit nodes pulse subtly to draw the eye */
.ubo-node.verdict-hit .ubo-node-bg {
  animation: uboHitGlow 2.4s ease-in-out infinite;
}
@keyframes uboHitGlow {
  0%, 100% { filter: drop-shadow(0 2px 4px rgba(192, 57, 43, 0.10)); }
  50%      { filter: drop-shadow(0 4px 12px rgba(192, 57, 43, 0.30)); }
}

/* Edges — drawn lines from parent to child */
.ubo-edge {
  stroke-dasharray: 1000;
  stroke-dashoffset: 0;
  animation: uboEdgeDraw 700ms ease-out forwards;
}
@keyframes uboEdgeDraw { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }

.ubo-graph-legend {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-subtle);
}
.leg {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-3);
  font-family: 'JetBrains Mono', monospace;
}
.leg .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
}
.leg.leg-clean   .dot { background: #2d8659; }
.leg.leg-review  .dot { background: #d97706; }
.leg.leg-hit     .dot { background: #c0392b; }
.leg.leg-pending .dot { background: #bbb3a8; }

/* Source documents panel inside the UBO graph */
.ubo-source-docs {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-subtle);
}
.ubo-source-docs-head {
  margin-bottom: 12px;
}
.ubo-source-docs-head h4 {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--burg);
  margin: 0 0 4px;
  font-family: 'JetBrains Mono', monospace;
}
.ubo-source-docs-head span {
  font-size: 11.5px;
  color: var(--fg-3);
  line-height: 1.4;
  font-style: italic;
}
.ubo-source-docs-empty {
  font-size: 12px;
  color: var(--amber-700);
  font-style: italic;
  background: var(--amber-100);
  border: 1px solid var(--amber-200);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 12px;
}
.ubo-source-docs-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.ubo-source-doc {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--paper-bg);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  font-size: 12px;
  transition: all 160ms ease;
}
.ubo-source-doc:hover { border-color: var(--burg-200); transform: translateX(2px); }
.ubo-source-doc-icon {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: var(--burg-50);
  color: var(--burg);
  border-radius: 6px;
}
.ubo-source-doc-meta { min-width: 0; }
.ubo-source-doc-meta strong {
  display: block;
  font-size: 12.5px;
  color: var(--fg-1);
  font-weight: 700;
}
.ubo-source-doc-meta span {
  font-size: 10.5px;
  color: var(--fg-3);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.02em;
  display: block;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ubo-source-doc-count {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--green-100);
  color: var(--green-700);
  font-family: 'JetBrains Mono', monospace;
}

.ubo-source-docs-verify {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  background: var(--green-50);
  border: 1px solid var(--green-200);
  border-radius: 10px;
  cursor: pointer;
  transition: all 160ms ease;
}
.ubo-source-docs-verify:has(input:checked) {
  background: var(--green-100);
  border-color: var(--green-500);
}
.ubo-source-docs-verify input[type=checkbox] {
  width: 18px; height: 18px;
  margin-top: 2px;
  accent-color: var(--green-700);
  flex-shrink: 0;
  cursor: pointer;
}
.ubo-source-docs-verify span {
  font-size: 12px;
  color: var(--fg-2);
  line-height: 1.5;
}
.ubo-source-docs-verify strong {
  display: block;
  color: var(--fg-1);
  font-weight: 700;
  margin-bottom: 2px;
}

/* ─────────────────────────────────────────────────────────
   AI NARRATIVE — Claude-synthesised risk summary
   ───────────────────────────────────────────────────────── */
.ai-narrative {
  background: linear-gradient(135deg, #1a0d0d 0%, #2a1515 50%, #1a0d0d 100%);
  border: 1px solid var(--burg-700);
  border-radius: 14px;
  padding: 22px 26px;
  margin-bottom: 18px;
  color: var(--paper);
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  animation: aiNarIn 480ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes aiNarIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

.ai-narrative::before {
  content: '';
  position: absolute;
  top: -40%; left: -10%; width: 30%; height: 200%;
  background: linear-gradient(90deg, transparent, rgba(201, 169, 97, 0.10), transparent);
  transform: rotate(20deg);
  pointer-events: none;
}
.ai-narrative.loading::before { animation: aiBeam 4s ease-in-out infinite; }
@keyframes aiBeam {
  0%   { transform: translateX(-50%) rotate(20deg); }
  100% { transform: translateX(400%) rotate(20deg); }
}

.ai-narrative-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 14px;
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}
.ai-narrative-title { display: flex; align-items: center; gap: 12px; }
.ai-narrative-icon {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(201, 169, 97, 0.14);
  border: 1px solid rgba(201, 169, 97, 0.34);
  border-radius: 50%;
  color: var(--gold-500);
  flex-shrink: 0;
}
.ai-narrative.loading .ai-narrative-icon {
  animation: aiIconSpin 2s linear infinite;
}
@keyframes aiIconSpin {
  0%   { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(180deg) scale(1.1); }
  100% { transform: rotate(360deg) scale(1); }
}
.ai-narrative-title h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--paper);
}
.ai-narrative-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-500);
}
.ai-narrative-actions { display: flex; align-items: center; gap: 10px; }
.ai-narrative-model {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.04em;
  color: rgba(248, 242, 231, 0.55);
  padding: 2px 7px;
  background: rgba(201, 169, 97, 0.10);
  border-radius: 4px;
}
.ai-regen-btn {
  background: var(--gold-500);
  color: var(--burg-800);
  border: 0;
  padding: 7px 14px;
  border-radius: 7px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.02em;
  cursor: pointer;
  font-family: inherit;
  transition: all 160ms ease;
}
.ai-regen-btn:hover:not(:disabled) {
  background: var(--paper);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(201, 169, 97, 0.30);
}
.ai-regen-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.ai-narrative-thinking {
  display: flex; align-items: center; gap: 6px;
  padding: 14px 0;
}
.ai-thinking-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold-500);
  animation: aiThinkPulse 1.4s ease-in-out infinite;
}
.ai-thinking-dot:nth-child(2) { animation-delay: 0.2s; }
.ai-thinking-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes aiThinkPulse {
  0%, 80%, 100% { opacity: 0.3; transform: scale(1); }
  40% { opacity: 1; transform: scale(1.4); }
}
.ai-thinking-text {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  color: rgba(248, 242, 231, 0.7);
  letter-spacing: 0.02em;
  margin-left: 6px;
}

.ai-narrative-body {
  position: relative;
  z-index: 1;
}
.ai-narrative-body p {
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px;
  line-height: 1.55;
  color: rgba(248, 242, 231, 0.92);
  margin: 0 0 12px;
  letter-spacing: -0.005em;
}
.ai-narrative-body p:last-child { margin-bottom: 0; }
.ai-narrative-body p::first-letter {
  font-size: 22px;
  color: var(--gold-500);
  font-weight: 600;
}

.ai-narrative-empty {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  color: rgba(248, 242, 231, 0.55);
  font-style: italic;
  padding: 12px 0;
}
.ai-narrative-empty.error { color: rgba(248, 200, 200, 0.85); }
.ai-narrative-empty code {
  background: rgba(201, 169, 97, 0.16);
  color: var(--gold-500);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 10.5px;
}

/* ─────────────────────────────────────────────────────────
   EDD WIZARD — Enhanced Due Diligence request package builder
   ───────────────────────────────────────────────────────── */
.edd-modal {
  width: min(960px, 100%);
}
.edd-summary {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 14px;
  align-items: center;
  padding: 14px 18px;
  background: var(--gold-50);
  border: 1px solid var(--amber-200);
  border-radius: 10px;
  margin-bottom: 16px;
}
.edd-stat {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
}
.edd-stat:last-child { justify-self: end; }
.edd-stat-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px; font-weight: 600;
  color: var(--amber-700); line-height: 1;
}
.edd-stat-lbl {
  font-size: 9.5px; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg-3);
  font-family: 'JetBrains Mono', monospace;
}
.edd-deadline {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--fg-3);
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
}
.edd-deadline input {
  width: 50px;
  padding: 4px 6px;
  border: 1px solid var(--border-default);
  border-radius: 4px;
  font-family: inherit;
  font-size: 13px;
  text-align: center;
}
.edd-cover { margin-bottom: 18px; }
.edd-cover label { display: flex; flex-direction: column; gap: 6px; }
.edd-cover label span {
  font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg-3);
}
.edd-cover textarea {
  border: 1px solid var(--border-default);
  border-radius: 8px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
  min-height: 60px;
  resize: vertical;
  background: var(--paper-bg);
  color: var(--fg-1);
}
.edd-cover textarea:focus {
  outline: none;
  border-color: var(--burg);
  box-shadow: 0 0 0 3px rgba(122, 46, 46, 0.10);
}

.edd-checklist {
  display: flex; flex-direction: column; gap: 16px;
  margin-bottom: 18px;
}
.edd-cat h4 {
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--burg);
  font-family: 'JetBrains Mono', monospace;
  margin: 0 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-subtle);
}
.edd-items { display: flex; flex-direction: column; gap: 4px; }
.edd-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 14px;
  background: var(--paper-bg);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  cursor: pointer;
  transition: all 160ms ease;
}
.edd-item:hover { border-color: var(--burg-200); transform: translateX(2px); }
.edd-item.on {
  background: var(--gold-50);
  border-color: var(--amber-500);
}
.edd-item.rec:not(.on) {
  border-color: var(--amber-200);
  background: rgba(254, 243, 220, 0.4);
}
.edd-item input[type=checkbox] {
  width: 16px; height: 16px;
  margin-top: 2px;
  accent-color: var(--amber-700);
  flex-shrink: 0;
}
.edd-item-text {
  flex: 1;
  font-size: 12.5px;
  color: var(--fg-1);
  line-height: 1.4;
}
.edd-tag {
  font-size: 9px; font-weight: 800;
  letter-spacing: 0.10em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 3px;
  background: var(--amber-100);
  color: var(--amber-700);
  font-family: 'JetBrains Mono', monospace;
  flex-shrink: 0;
  align-self: center;
}
.edd-item-remove {
  background: var(--red-100);
  color: var(--red-700);
  border: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.edd-item-remove:hover { background: var(--red-500); color: var(--paper); }

.edd-add-custom {
  display: flex; gap: 8px;
  margin-bottom: 18px;
}
.edd-add-custom input {
  flex: 1;
  border: 1px dashed var(--border-default);
  border-radius: 8px;
  padding: 10px 14px;
  font-family: inherit;
  font-size: 13px;
  background: var(--paper-bg);
  color: var(--fg-1);
}
.edd-add-custom input:focus {
  outline: none;
  border-color: var(--burg);
  border-style: solid;
}

/* Decision button badge for "EDD package size" indicator */
.aml-decision-badge {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--gold-500);
  color: var(--burg-800);
  font-size: 9.5px;
  font-weight: 800;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.04em;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  margin-left: 6px;
}

/* AML topbar — left zone with back button + brand */
.aml-topbar-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.btn-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  background: var(--paper-deep);
  color: var(--burg);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  white-space: nowrap;
  transition: all 160ms ease;
  flex-shrink: 0;
}
.btn-back:hover {
  background: var(--burg);
  color: var(--paper);
  border-color: var(--burg);
  transform: translateX(-2px);
  box-shadow: 0 4px 10px rgba(122, 46, 46, 0.20);
}
.btn-back:hover svg { transform: translateX(-2px); }
.btn-back svg { transition: transform 160ms ease; }
.btn-back span {
  font-size: 12.5px;
  letter-spacing: 0.01em;
}

@media (max-width: 720px) {
  .btn-back span { display: none; }
  .btn-back { padding: 8px 10px; }
}

/* ─────────────────────────────────────────────────────────
   DEEP DIVE MODAL — disambiguation analysis & question wizard
   ───────────────────────────────────────────────────────── */
.dd-overlay {
  position: fixed; inset: 0;
  background: rgba(20, 12, 12, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 90;
  display: flex; align-items: center; justify-content: center;
  padding: 30px;
  animation: ddOverlayIn 200ms ease;
}
@keyframes ddOverlayIn { from { opacity: 0; } to { opacity: 1; } }
.dd-modal {
  background: var(--paper-card);
  border-radius: 18px;
  width: min(900px, 100%);
  max-height: calc(100vh - 60px);
  overflow-y: auto;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.32);
  animation: ddModalIn 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes ddModalIn { from { transform: translateY(20px) scale(0.96); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }

.dd-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 24px 28px 20px;
  border-bottom: 1px solid var(--border-subtle);
}
.dd-eyebrow {
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--burg);
  font-family: 'JetBrains Mono', monospace;
  margin-bottom: 4px;
}
.dd-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px; font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--fg-1);
}
.dd-close {
  background: var(--paper-deep);
  border: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  font-size: 22px;
  color: var(--fg-3);
  cursor: pointer;
  transition: all 160ms ease;
  display: flex; align-items: center; justify-content: center;
}
.dd-close:hover { background: var(--burg); color: var(--paper); transform: rotate(90deg); }

/* Probability bar — always visible at top */
.dd-prob {
  padding: 22px 28px 8px;
  background: linear-gradient(180deg, var(--paper-deep) 0%, transparent 100%);
}
.dd-prob-track {
  position: relative;
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--green-100) 0%, var(--amber-100) 50%, var(--red-100) 100%);
  overflow: visible;
}
.dd-prob-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, var(--green-500) 0%, var(--amber-500) 50%, var(--red-500) 100%);
  background-size: 800% 100%;
  background-position: right;
  border-radius: 6px;
  transition: width 480ms cubic-bezier(0.34, 1.56, 0.64, 1);
  opacity: 0.85;
}
.dd-prob-marker {
  position: absolute; top: -4px;
  width: 4px; height: 20px;
  background: var(--ink);
  border-radius: 2px;
  transform: translateX(-50%);
  transition: left 480ms cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.dd-prob-labels {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 12px;
  font-family: 'JetBrains Mono', monospace;
}
.dd-prob-low, .dd-prob-high {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fg-3);
}
.dd-prob-low { color: var(--green-700); }
.dd-prob-high { color: var(--red-700); }
.dd-prob-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 32px; font-weight: 600;
  color: var(--fg-1);
  letter-spacing: -0.02em;
}

/* Body */
.dd-body { padding: 18px 28px 28px; }
.dd-section-title {
  font-size: 11.5px; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-3);
  margin: 0 0 14px;
}

/* Side-by-side comparison grid */
.dd-grid {
  display: grid;
  grid-template-columns: 1fr 28px 1fr;
  gap: 14px;
  margin-bottom: 22px;
}
.dd-col {
  background: var(--paper-bg);
  border: 1px solid var(--border-default);
  border-radius: 12px;
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 12px;
}
.dd-col.vs {
  background: transparent;
  border: 0;
  display: flex; align-items: center; justify-content: center;
}
.dd-col.vs span {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 28px;
  color: var(--burg);
  font-weight: 500;
}
.dd-col-head {
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--burg);
  font-family: 'JetBrains Mono', monospace;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-subtle);
}

.dd-attr {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  align-items: baseline;
  gap: 10px;
  font-size: 12.5px;
}
.dd-attr-label {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--fg-4);
}
.dd-attr-value {
  color: var(--fg-1); font-weight: 600;
  word-break: break-word;
}
.dd-attr-cmp {
  font-size: 9px; font-weight: 800;
  letter-spacing: 0.10em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 4px;
  background: var(--paper-deep);
  color: var(--fg-3);
}
.dd-attr-cmp.ok   { background: var(--green-100); color: var(--green-700); }
.dd-attr-cmp.warn { background: var(--amber-100); color: var(--amber-700); }
.dd-attr-cmp.bad  { background: var(--red-100);   color: var(--red-700); }
.dd-attr.differ .dd-attr-value { color: var(--red-700); }
.dd-attr.near .dd-attr-value   { color: var(--amber-700); }

/* Action buttons (compare stage) */
.dd-actions {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}
.dd-actions.resolved { grid-template-columns: 1fr 2fr; }
.dd-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 16px 18px;
  border-radius: 12px;
  border: 1.5px solid var(--border-default);
  background: var(--paper-card);
  font-family: inherit;
  cursor: pointer;
  transition: all 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
  text-align: center;
}
.dd-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.10); }
.dd-btn span:first-child {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--fg-1);
  letter-spacing: -0.005em;
}
.dd-btn small {
  font-size: 10.5px;
  color: var(--fg-3);
  font-style: italic;
}
.dd-btn.confirm:hover { border-color: var(--red-500); background: var(--red-50); }
.dd-btn.confirm:hover span:first-child { color: var(--red-700); }
.dd-btn.wizard {
  background: linear-gradient(135deg, var(--gold-500), var(--burg));
  border-color: var(--burg);
}
.dd-btn.wizard span:first-child, .dd-btn.wizard small { color: var(--paper); }
.dd-btn.wizard small { opacity: 0.85; }
.dd-btn.wizard:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 12px 28px rgba(122, 46, 46, 0.35); }
.dd-btn.fp:hover { border-color: var(--green-500); background: var(--green-50); }
.dd-btn.fp:hover span:first-child { color: var(--green-700); }

.dd-btn.back { padding: 12px 18px; flex-direction: row; gap: 8px; }
.dd-btn.save { padding: 14px 20px; flex-direction: row; gap: 0; font-weight: 700; }
.dd-btn.save.red   { background: var(--red-500); border-color: var(--red-500); color: var(--paper); }
.dd-btn.save.amber { background: var(--gold-500); border-color: var(--gold-500); color: var(--burg-800); }
.dd-btn.save.green { background: var(--green-500); border-color: var(--green-500); color: var(--paper); }
.dd-btn.save:hover { transform: translateY(-2px); }
.dd-btn.save span:first-child { color: inherit; font-size: 13.5px; }

/* Wizard stage */
.dd-wiz-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 16px;
}
.dd-wiz-step {
  font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--burg);
  font-family: 'JetBrains Mono', monospace;
}
.dd-wiz-progress {
  display: flex; gap: 8px;
}
.dd-wiz-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--paper-deep);
  border: 1.5px solid var(--border-default);
  transition: all 200ms ease;
}
.dd-wiz-dot.done { background: var(--burg); border-color: var(--burg); }
.dd-wiz-dot.active { background: var(--gold-500); border-color: var(--burg); transform: scale(1.4); box-shadow: 0 0 0 4px rgba(201, 169, 97, 0.18); }

.dd-wiz-card {
  background: var(--paper-bg);
  border: 1px solid var(--border-default);
  border-radius: 14px;
  padding: 24px 26px;
  animation: ddWizIn 360ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes ddWizIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
.dd-wiz-label {
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--burg);
  font-family: 'JetBrains Mono', monospace;
  margin-bottom: 8px;
}
.dd-wiz-prompt {
  font-family: 'Cormorant Garamond', serif;
  font-size: 19px;
  line-height: 1.4;
  color: var(--fg-1);
  margin: 0 0 22px;
  letter-spacing: -0.005em;
}

.dd-wiz-answers {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
.dd-ans {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1.5px solid var(--border-default);
  background: var(--paper-card);
  font-family: inherit;
  cursor: pointer;
  transition: all 180ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.dd-ans:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.10); }
.dd-ans-glyph {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 18px;
  font-weight: 800;
  background: var(--paper-deep);
  color: var(--fg-3);
  transition: all 180ms ease;
}
.dd-ans.yes:hover { border-color: var(--red-500); background: var(--red-50); }
.dd-ans.yes:hover .dd-ans-glyph { background: var(--red-500); color: var(--paper); }
.dd-ans.no:hover { border-color: var(--green-500); background: var(--green-50); }
.dd-ans.no:hover .dd-ans-glyph { background: var(--green-500); color: var(--paper); }
.dd-ans.unknown:hover { border-color: var(--gold-500); background: var(--gold-50); }
.dd-ans.unknown:hover .dd-ans-glyph { background: var(--gold-500); color: var(--burg-800); }
.dd-ans-text {
  font-size: 12px;
  font-weight: 700;
  color: var(--fg-1);
  text-align: center;
}
.dd-ans-hint {
  font-size: 10px;
  color: var(--fg-4);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.04em;
}

/* Resolved stage */
.dd-result {
  text-align: center;
  padding: 28px 20px;
  border-radius: 14px;
  margin-bottom: 22px;
}
.dd-result.tone-red    { background: linear-gradient(135deg, var(--red-50), var(--red-100));     border: 1px solid var(--red-200); }
.dd-result.tone-amber  { background: linear-gradient(135deg, var(--amber-50), var(--amber-100)); border: 1px solid var(--amber-200); }
.dd-result.tone-green  { background: linear-gradient(135deg, var(--green-50), var(--green-100)); border: 1px solid var(--green-200); }
.dd-result-prob {
  font-family: 'Cormorant Garamond', serif;
  font-size: 56px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
}
.dd-result.tone-red .dd-result-prob   { color: var(--red-700); }
.dd-result.tone-amber .dd-result-prob { color: var(--amber-700); }
.dd-result.tone-green .dd-result-prob { color: var(--green-700); }
.dd-result-label {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.14em;
  margin-top: 8px;
  margin-bottom: 4px;
}
.dd-result.tone-red .dd-result-label   { color: var(--red-700); }
.dd-result.tone-amber .dd-result-label { color: var(--amber-700); }
.dd-result.tone-green .dd-result-label { color: var(--green-700); }
.dd-result-sub {
  font-size: 12.5px;
  color: var(--fg-2);
  font-style: italic;
}

.dd-answers-summary {
  background: var(--paper-bg);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 16px;
}
.dd-answers-summary h4 {
  font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-3);
  margin: 0 0 12px;
}
.dd-answers-summary ul {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.dd-answers-summary li {
  display: grid;
  grid-template-columns: 50px 180px 1fr;
  align-items: baseline;
  gap: 12px;
  font-size: 12px;
}
.dd-ans-pill {
  font-size: 9.5px; font-weight: 800;
  letter-spacing: 0.10em;
  padding: 3px 8px; border-radius: 4px;
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
}
.dd-ans-pill.yes     { background: var(--red-100); color: var(--red-700); }
.dd-ans-pill.no      { background: var(--green-100); color: var(--green-700); }
.dd-ans-pill.unknown { background: var(--gold-100); color: var(--gold-700); }
.dd-ans-q { font-weight: 600; color: var(--fg-1); }
.dd-ans-msg { color: var(--fg-3); font-size: 11.5px; line-height: 1.4; }

.dd-followups {
  background: var(--gold-50);
  border: 1px solid var(--amber-200);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 16px;
}
.dd-followups h4 {
  font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--amber-700);
  margin: 0 0 12px;
}
.dd-followups ul {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.dd-followups li {
  font-size: 12px;
  color: var(--fg-2);
  line-height: 1.5;
  padding-left: 16px;
  position: relative;
}
.dd-followups li::before {
  content: '*'; position: absolute; left: 0; top: 0;
  color: var(--amber-700);
  font-weight: 800;
}

/* Evidence row gets a "Deep dive" button when status is hit/review */
.aml-evd-row {
  position: relative;
  display: grid !important;
  grid-template-columns: 200px 160px 1fr auto !important;
}
.aml-evd-actions {
  display: flex; align-items: center; gap: 10px;
  margin-left: 12px;
}
.aml-evd-divebtn {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--burg);
  color: var(--paper);
  border: 0;
  padding: 6px 11px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-family: inherit;
  cursor: pointer;
  transition: all 160ms ease;
  white-space: nowrap;
}
.aml-evd-divebtn:hover {
  background: var(--burg-700);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(122, 46, 46, 0.30);
}
.aml-evd-resolution {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.10em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
}
.aml-evd-resolution.res-confirmed { background: var(--red-100); color: var(--red-700); }
.aml-evd-resolution.res-cleared   { background: var(--green-100); color: var(--green-700); }
.aml-evd-resolution.res-review    { background: var(--amber-100); color: var(--amber-700); }
.aml-evd-resolution-prob {
  background: rgba(0,0,0,0.10);
  padding: 1px 5px; border-radius: 3px;
  font-size: 9px;
}

@media (max-width: 720px) {
  .dd-grid { grid-template-columns: 1fr; }
  .dd-col.vs { display: none; }
  .dd-actions { grid-template-columns: 1fr; }
  .dd-wiz-answers { grid-template-columns: 1fr; }
  .aml-evd-row { grid-template-columns: 1fr !important; }
  .aml-evd-actions { margin-left: 0; }
}

/* ─────────────────────────────────────────────────────────
   OFFICER CARDS in admin panel
   ───────────────────────────────────────────────────────── */
.admin-officers {
  display: flex; flex-direction: column; gap: 10px;
}
.admin-officer {
  background: var(--paper-bg);
  border: 1px solid var(--border-default);
  border-radius: 12px;
  overflow: hidden;
  transition: all 200ms ease;
}
.admin-officer:hover { border-color: var(--burg-200); }
.admin-officer.open  { border-color: var(--burg); box-shadow: 0 4px 14px rgba(0,0,0,0.05); }
.admin-officer.self  { background: var(--burg-50); }

.admin-officer-head {
  display: grid;
  grid-template-columns: 44px 1fr auto auto;
  gap: 14px;
  align-items: center;
  width: 100%;
  padding: 12px 16px;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}
.admin-officer-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-500), var(--burg));
  color: var(--paper);
  display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.admin-officer-meta { min-width: 0; }
.admin-officer-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--fg-1);
  letter-spacing: -0.005em;
  display: flex; align-items: center; gap: 8px;
}
.admin-officer-name em { font-style: italic; color: var(--fg-4); font-weight: 500; }
.admin-officer-sub {
  font-size: 11.5px;
  color: var(--fg-3);
  margin-top: 2px;
  display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap;
}
.admin-officer-role {
  font-size: 9px; font-weight: 800;
  letter-spacing: 0.10em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 4px;
  background: var(--paper-deep);
  color: var(--fg-3);
}
.admin-officer-role.role-admin    { background: var(--burg-100); color: var(--burg-700); }
.admin-officer-role.role-reviewer { background: var(--gold-100); color: var(--gold-700); }
.admin-officer-role.role-viewer   { background: var(--paper-deep); color: var(--fg-3); }
.admin-officer-flags {
  display: flex; gap: 8px;
}
.admin-officer-chk {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--paper-deep);
  color: var(--fg-4);
  font-family: 'JetBrains Mono', monospace;
}
.admin-officer-chk .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--fg-4);
}
.admin-officer-chk.on {
  background: var(--green-100);
  color: var(--green-700);
}
.admin-officer-chk.on .dot { background: var(--green-500); }
.admin-officer-chev {
  color: var(--fg-3);
  display: flex; align-items: center;
  transition: transform 240ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.admin-officer-chev.open { transform: rotate(180deg); color: var(--burg); }

.admin-officer-body {
  padding: 18px 22px 22px;
  border-top: 1px solid var(--border-subtle);
  background: var(--paper-card);
  animation: officerExpand 240ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes officerExpand {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.admin-officer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 18px;
}
.admin-field-wide { grid-column: span 2; }
.admin-field input[disabled] {
  background: var(--paper-deep);
  color: var(--fg-3);
  cursor: not-allowed;
}
.admin-field em {
  font-style: italic; font-weight: 400;
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: 10.5px;
  color: var(--fg-4);
  margin-left: 4px;
}

.admin-officer-sig {
  background: var(--paper-bg);
  border: 1px dashed var(--border-default);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 16px;
}
.admin-officer-sig-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 10px;
}
.admin-officer-sig-head h4 {
  font-size: 12px; font-weight: 700;
  margin: 0;
  letter-spacing: -0.005em;
  color: var(--fg-1);
}
.admin-officer-sig-head span {
  font-size: 11px; color: var(--fg-4); font-style: italic;
}
.admin-officer-actions {
  display: flex; justify-content: flex-end;
}

@media (max-width: 720px) {
  .admin-officer-head { grid-template-columns: 40px 1fr auto; }
  .admin-officer-flags { display: none; }
  .admin-officer-grid { grid-template-columns: 1fr; }
  .admin-field-wide { grid-column: span 1; }
}