/* SORP Management Consulting — KYC / KYS Portal · License No 710560 */

* { 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: 'Manrope', 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: 'Manrope', 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: 'Manrope', 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: 'Manrope', 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: 'Manrope', 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: 'Manrope', 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: 'Manrope', 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: 'Manrope', 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: 'Manrope', 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: 'Manrope', 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: 'Manrope', 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: 'Manrope', 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: 'Manrope', 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: 'Manrope', 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: 'Manrope', 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: 'Manrope', 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; }
}

/* ═══════════════════════════════════════════════════════════════════
   SORP REDESIGN — comprehensive UI overrides per brand brief
   Palette: Deep Violet #332AB7 · Electric #4C44D9 · Coral #E3454E
   Font: Manrope · Cards 24px radius · Inputs 52px · Buttons 54px
   ═══════════════════════════════════════════════════════════════════ */

/* ---------- Page canvas ---------- */
body, html {
  font-family: var(--font-sans);
  background: var(--sorp-bg);
  color: var(--sorp-text);
  letter-spacing: -0.005em;
  font-size: 16px;
  font-weight: var(--fw-medium);
}

/* ---------- Typography baseline — Manrope everywhere, no exceptions ---------- */
*, *::before, *::after {
  font-family: var(--font-sans);
}
h1, h2, h3, h4, h5, h6,
.role-title, .opt-title,
.section h2, .section-title,
.qtitle, .qlabel,
.brand-name, .brand-sub,
.hero h1, .modal h2,
.export-title, .smart-fill-title,
.aml-login-title, .aml-brand-name,
.section-num {
  font-family: var(--font-sans) !important;
  font-style: normal !important;
  color: var(--sorp-text);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--fw-extrabold);
}
/* Keep mono only where explicitly needed (e.g., codes, IDs) */
.mono, code, kbd, pre, .font-mono { font-family: var(--font-mono) !important; }
h1 { font-size: 36px; letter-spacing: -0.022em; line-height: 1.12; }
h2 { font-size: 28px; letter-spacing: -0.018em; line-height: 1.18; }
h3 { font-size: 22px; letter-spacing: -0.012em; line-height: 1.25; }
p { font-size: 16px; line-height: var(--lh-relaxed); font-weight: var(--fw-medium); }
strong, b { font-weight: var(--fw-bold); }

/* ---------- Existing sidebar TOC items — beef up ---------- */
.toc-item {
  font-size: 15px !important;
  font-weight: var(--fw-semibold) !important;
  letter-spacing: -0.005em;
}
.toc-item.active {
  font-weight: var(--fw-extrabold) !important;
}
.toc-label {
  font-size: 12px !important;
  font-weight: var(--fw-bold) !important;
  letter-spacing: var(--tracking-caps);
}
.brand-name {
  font-size: 22px !important;
  font-weight: var(--fw-extrabold) !important;
}
.brand-sub {
  font-size: 12px !important;
  font-weight: var(--fw-semibold) !important;
  letter-spacing: var(--tracking-caps);
}

/* ---------- Form sections — apply CARD treatment to the actual <section> ---------- */
.main {
  padding: 32px 48px 200px !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
}
.hero {
  padding: 56px 32px 40px !important;
  max-width: 880px !important;
  border-bottom: 0 !important;
}
.hero h1 { font-size: 48px !important; line-height: 1.08 !important; }

.section {
  background: var(--sorp-card) !important;
  border: 1px solid var(--sorp-lavender-line) !important;
  border-radius: var(--radius-2xl) !important;
  box-shadow: var(--shadow-lg) !important;
  padding: 36px 40px !important;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--sorp-lavender-line) !important; /* override original red-burg bottom-border */
}
.section + .section { margin-top: 0; }
.section-content { padding-left: 0 !important; }
.section h2 {
  font-size: 26px !important;
  font-weight: var(--fw-extrabold) !important;
  color: var(--sorp-text) !important;
  letter-spacing: -0.015em !important;
}
.section-num {
  font-family: var(--font-sans) !important;
  font-style: normal !important;
  font-weight: var(--fw-extrabold) !important;
  color: var(--sorp-violet) !important;
  font-size: 18px !important;
  background: var(--sorp-violet-tint) !important;
  border-radius: var(--radius-pill);
  padding: 4px 12px;
  letter-spacing: 0;
}
.section-desc { font-size: 15px !important; color: var(--sorp-text-secondary) !important; line-height: 1.55 !important; }
.section-status {
  font-family: var(--font-sans) !important;
  font-weight: var(--fw-bold);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--sorp-lavender-soft);
  color: var(--sorp-text-muted);
}
.section-status.complete { background: var(--green-100); color: var(--green-700); }
.section-status.partial  { background: var(--amber-100); color: var(--amber-700); }

/* Legacy card-like containers, keep matching */
.section-card,
.card,
.qcard,
.role-block,
.attest-block,
.summary-card,
.compliance-card,
.preview-card {
  background: var(--sorp-card);
  border: 1px solid var(--sorp-lavender-line);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
  padding: 28px;
}
.section-card + .section-card { margin-top: 24px; }

.section-card .section-title,
.qcard .qtitle,
.card h2,
.card h3 {
  font-size: 28px;
  font-weight: var(--fw-extrabold);
  color: var(--sorp-text);
  letter-spacing: -0.018em;
  margin: 0 0 10px 0;
  line-height: 1.15;
}
.section-card .section-sub,
.qcard .qsub,
.card .sub {
  font-size: 16px;
  color: var(--sorp-text-secondary);
  margin: 0 0 24px 0;
  line-height: var(--lh-base);
  font-weight: var(--fw-medium);
}

/* ---------- Inputs — 52px height, 14px radius, focus violet glow ---------- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="search"],
input[type="url"],
input[type="password"],
select,
textarea,
.field input,
.field select,
.field textarea {
  height: 56px;
  padding: 0 18px;
  background: var(--sorp-card);
  border: 1.5px solid var(--sorp-text-line);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: 17px;
  color: var(--sorp-text);
  font-weight: var(--fw-semibold);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
  width: 100%;
  box-sizing: border-box;
}
textarea,
.field textarea {
  height: auto;
  min-height: 120px;
  padding: 14px 16px;
  line-height: var(--lh-base);
  resize: vertical;
}
input::placeholder,
textarea::placeholder { color: var(--sorp-text-muted); font-weight: var(--fw-regular); }

input:hover,
select:hover,
textarea:hover { border-color: var(--sorp-lavender); }

input:focus,
select:focus,
textarea:focus,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  border-color: var(--sorp-violet-electric);
  box-shadow: var(--shadow-focus);
  background: var(--sorp-card);
}

input:disabled,
select:disabled,
textarea:disabled {
  background: var(--sorp-card-input);
  color: var(--sorp-text-muted);
  cursor: not-allowed;
}

input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: var(--sorp-coral);
  box-shadow: var(--shadow-focus-error);
}

/* ---------- Date input — styled with violet calendar icon ---------- */
input[type="date"],
input.input-date {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%234C44D9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 48px;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
/* Make the native calendar trigger cover the whole input so click anywhere opens it */
input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute;
  right: 0; top: 0;
  width: 100%; height: 100%;
  padding: 0;
  margin: 0;
  cursor: pointer;
  opacity: 0;            /* hide default icon — we drew our own via background */
}
input[type="date"] {
  position: relative;
}
/* Style the placeholder state (empty value) — show muted hint colour */
input[type="date"]:not(:focus):invalid,
input[type="date"][value=""] { color: var(--sorp-text-muted); }
input[type="date"]::-webkit-datetime-edit-text { color: var(--sorp-text-muted); padding: 0 2px; }
input[type="date"]::-webkit-datetime-edit-year-field,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-day-field { color: var(--sorp-text); }
/* When focused, accent the segment being edited */
input[type="date"]::-webkit-datetime-edit-year-field:focus,
input[type="date"]::-webkit-datetime-edit-month-field:focus,
input[type="date"]::-webkit-datetime-edit-day-field:focus {
  background: var(--sorp-violet-tint);
  color: var(--sorp-violet);
  border-radius: 4px;
  outline: none;
}

/* ---------- Custom select chevron ---------- */
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234F4B65' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 44px;
}

/* ---------- Labels ---------- */
label,
.field-label,
.qlabel {
  font-size: 15px;
  font-weight: var(--fw-bold);
  color: var(--sorp-text);
  letter-spacing: -0.005em;
  margin-bottom: 10px;
  display: block;
}
.field-hint,
.qhint,
.field small {
  font-size: 13px;
  color: var(--sorp-text-muted);
  margin-top: 8px;
  display: block;
  font-weight: var(--fw-medium);
}

/* ---------- Primary CTA — coral red, 54px, 16px radius ---------- */
.btn-primary,
button.primary,
.button-primary,
.cta,
.btn.cta,
.next-button,
.submit-button,
.btn.btn-gold,
.dock .btn,
.dock button {
  height: 58px !important;
  padding: 0 32px !important;
  background: var(--sorp-coral) !important;
  background-image: none !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: var(--radius-lg) !important;
  font-family: var(--font-sans) !important;
  font-weight: var(--fw-extrabold) !important;
  font-size: 17px !important;
  letter-spacing: 0.005em !important;
  cursor: pointer;
  transition: background .15s ease, transform .12s ease, box-shadow .18s ease;
  box-shadow: var(--shadow-gold) !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.btn.btn-gold:disabled,
.dock .btn:disabled,
.dock button:disabled {
  background: var(--sorp-lavender) !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
  cursor: not-allowed;
}
.btn-primary:hover,
button.primary:hover,
.button-primary:hover,
.cta:hover,
.next-button:hover,
.submit-button:hover {
  background: var(--sorp-coral-hover);
  transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(227, 69, 78, 0.4);
}
.btn-primary:active,
button.primary:active,
.cta:active,
.next-button:active {
  background: var(--sorp-coral-active);
  transform: translateY(0);
}
.btn-primary:disabled,
button.primary:disabled,
.cta:disabled,
.next-button:disabled {
  background: var(--sorp-lavender);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

/* ---------- Secondary button — white card with violet border ---------- */
.btn-secondary,
button.secondary,
.button-secondary,
.back-button,
.prev-button {
  height: 58px;
  padding: 0 28px;
  background: var(--sorp-card);
  color: var(--sorp-violet);
  border: 1.5px solid var(--sorp-text-line);
  border-radius: var(--radius-lg);
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: 16px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.btn-secondary:hover,
button.secondary:hover,
.back-button:hover,
.prev-button:hover {
  border-color: var(--sorp-violet);
  background: var(--sorp-violet-tint);
}

/* ---------- Ghost button — text only ---------- */
.btn-ghost,
button.ghost,
.link-button {
  background: transparent;
  border: none;
  color: var(--sorp-violet-electric);
  font-weight: var(--fw-semibold);
  font-size: 14px;
  padding: 8px 12px;
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: background .15s ease;
}
.btn-ghost:hover,
button.ghost:hover,
.link-button:hover { background: var(--sorp-violet-tint); color: var(--sorp-violet); }

/* ---------- Role grid: 2-column at desktop, lots of breathing room ---------- */
.role-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
}
@media (max-width: 720px) {
  .role-grid { grid-template-columns: 1fr !important; }
}

/* ---------- Selectable role cards — vertical layout, generous padding ---------- */
.role-card,
.option-card,
.selectable-card {
  background: var(--sorp-card);
  border: 1.5px solid var(--sorp-text-line);
  border-radius: var(--radius-lg);
  padding: 28px 28px 26px 28px !important;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, box-shadow .2s ease, transform .14s ease;
  position: relative;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  align-items: stretch !important;
  text-align: left;
  min-height: 132px;
}
.role-card:hover,
.option-card:hover,
.selectable-card:hover {
  border-color: var(--sorp-lavender);
  background: var(--sorp-violet-tint);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.role-card.on,
.role-card[data-selected="true"],
.role-card.selected,
.option-card.selected,
.selectable-card.selected,
.role-card[aria-pressed="true"] {
  border-color: var(--sorp-violet-electric);
  background: var(--sorp-violet-tint-strong);
  box-shadow: var(--shadow-focus);
}

/* Decorative coral accent strip on the left edge when selected */
.role-card.on::before,
.role-card[data-selected="true"]::before,
.role-card.selected::before {
  content: "";
  position: absolute;
  top: 22px;
  bottom: 22px;
  left: 0;
  width: 3px;
  background: var(--sorp-coral);
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
}

.role-card .role-title,
.option-card .opt-title {
  font-size: 19px !important;
  font-weight: var(--fw-extrabold) !important;
  color: var(--sorp-text) !important;
  margin: 0 0 4px 0 !important;
  letter-spacing: -0.012em !important;
  line-height: 1.22 !important;
  display: block !important;
  padding-right: 32px; /* leave room for check pip in corner */
}
.role-card .role-desc,
.option-card .opt-desc {
  font-size: 14px !important;
  color: var(--sorp-text-secondary) !important;
  margin: 0 !important;
  line-height: 1.55 !important;
  font-weight: var(--fw-medium) !important;
  max-width: 100%;
}

/* Re-position the existing .role-check pip to top-right and re-style with violet */
.role-card .role-check {
  position: absolute !important;
  top: 22px !important;
  right: 22px !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  border: 2px solid var(--sorp-text-line) !important;
  background: var(--sorp-card) !important;
  transition: all .15s ease;
}
.role-card.on .role-check,
.role-card[data-selected="true"] .role-check {
  background: var(--sorp-violet-electric) !important;
  border-color: var(--sorp-violet-electric) !important;
  color: #FFFFFF !important;
}
.role-card.on .role-check::before {
  content: "✓" !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  color: #FFFFFF !important;
}

/* (legacy ::after pip removed — using actual .role-check element instead) */
.option-card.selected::after,
.selectable-card.selected::after {
  content: "";
  position: absolute;
  top: 14px;
  right: 14px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--sorp-violet-electric);
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* ---------- Sidebar — branded deep violet column, sticky on scroll ---------- */
.app-sidebar,
.left-rail,
.sidebar {
  background: var(--brand-gradient);
  color: #FFFFFF;
  padding: 36px 32px;
  border-radius: 0;
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  max-height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
}
.app-sidebar::-webkit-scrollbar,
.sidebar::-webkit-scrollbar { width: 4px; }
.app-sidebar::-webkit-scrollbar-thumb,
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); border-radius: 4px; }
.app-sidebar::before {
  content: "";
  position: absolute;
  top: -120px;
  right: -120px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(227, 69, 78, 0.18) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.app-sidebar::after {
  content: "";
  position: absolute;
  bottom: -80px;
  left: -80px;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(157, 153, 228, 0.25) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
}
.app-sidebar .brand-logo,
.sidebar-logo {
  position: relative;
  z-index: 1;
  margin-bottom: 32px;
}
.app-sidebar .brand-name {
  font-size: 22px;
  font-weight: var(--fw-extrabold);
  color: #FFFFFF;
  letter-spacing: -0.015em;
  margin-bottom: 6px;
}

/* SORP logo image — white-on-violet, sized for sidebar header */
.brand-logo-img {
  display: block;
  height: 36px;
  width: auto;
  margin-bottom: 8px;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.18));
}
.sidebar .brand,
.app-sidebar .brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-bottom: 36px;
}
.sidebar .brand-sub,
.app-sidebar .brand-sub {
  margin-bottom: 0 !important;
  font-size: 12px;
  color: var(--sorp-lavender);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  font-weight: var(--fw-semibold);
}
.mobile-nav-head .brand-logo-img { height: 28px; }
.app-sidebar .brand-sub {
  font-size: 13px;
  color: var(--sorp-lavender);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  margin-bottom: 32px;
  font-weight: var(--fw-semibold);
}

/* ---------- Vertical stepper ---------- */
.stepper-vertical {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 24px;
}
.stepper-vertical .step {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  color: var(--sorp-lavender);
  font-size: 16px;
  font-weight: var(--fw-semibold);
  position: relative;
  cursor: pointer;
  transition: color .15s ease;
  letter-spacing: -0.005em;
}
.stepper-vertical .step .step-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid rgba(255, 255, 255, 0.24);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: var(--fw-bold);
  color: var(--sorp-lavender);
  flex-shrink: 0;
  transition: all .2s ease;
}
.stepper-vertical .step.is-complete .step-dot {
  background: var(--sorp-violet-electric);
  border-color: var(--sorp-violet-electric);
  color: #FFFFFF;
}
.stepper-vertical .step.is-active .step-dot {
  background: var(--sorp-coral);
  border-color: var(--sorp-coral);
  color: #FFFFFF;
  box-shadow: 0 0 0 4px rgba(227, 69, 78, 0.25);
}
.stepper-vertical .step.is-active,
.stepper-vertical .step.is-complete {
  color: #FFFFFF;
  font-weight: var(--fw-semibold);
}
.stepper-vertical .step:hover { color: #FFFFFF; }
.stepper-vertical .step + .step::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 13.5px;
  width: 1.5px;
  height: 16px;
  background: rgba(255, 255, 255, 0.18);
}
.stepper-vertical .step.is-complete + .step::before { background: var(--sorp-violet-electric); }

/* ---------- Progress bar ---------- */
.progress-bar,
.progress-track {
  height: 6px;
  background: var(--sorp-lavender-soft);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.progress-bar .progress-fill,
.progress-track .progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--sorp-violet-electric), var(--sorp-violet));
  border-radius: var(--radius-pill);
  transition: width .35s ease;
}

/* ---------- Upload / dropzone ---------- */
.dropzone,
.upload-zone,
.upload-area {
  background: var(--sorp-card);
  border: 2px dashed var(--sorp-lavender);
  border-radius: var(--radius-lg);
  padding: 32px 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}
.dropzone:hover,
.upload-zone:hover { border-color: var(--sorp-violet-electric); background: var(--sorp-violet-tint); }
.dropzone.is-dragover,
.upload-zone.is-dragover { border-color: var(--sorp-coral); background: rgba(227, 69, 78, 0.04); }

/* ---------- Info / compliance card ---------- */
.info-card,
.compliance-note,
.notice {
  background: var(--sorp-violet-tint);
  border: 1px solid var(--sorp-lavender-line);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  color: var(--sorp-text-secondary);
  font-size: 13px;
  line-height: var(--lh-base);
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.info-card strong,
.compliance-note strong { color: var(--sorp-violet); font-weight: var(--fw-semibold); }

/* ---------- Brand rule / divider ---------- */
.brand-rule,
hr.brand {
  height: 3px;
  width: 44px;
  background: var(--sorp-coral);
  border: none;
  border-radius: var(--radius-pill);
  margin: 0 0 16px 0;
}

/* ---------- Badges / chips ---------- */
.badge,
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.badge.violet,
.chip.violet { background: var(--sorp-violet-tint); color: var(--sorp-violet); }
.badge.coral,
.chip.coral { background: var(--gold-50); color: var(--sorp-coral); }
.badge.success { background: var(--green-100); color: var(--green-700); }
.badge.warn { background: var(--amber-100); color: var(--amber-700); }

/* ---------- Checkboxes & radios ---------- */
input[type="checkbox"],
input[type="radio"] {
  width: 20px;
  height: 20px;
  accent-color: var(--sorp-violet-electric);
  cursor: pointer;
  margin-right: 8px;
}

/* ---------- Person / Company toggle (SORP segmented control) ---------- */
.kyc-type-toggle {
  position: relative !important;
  display: inline-flex !important;
  margin-top: 22px;
  padding: 5px !important;
  border-radius: var(--radius-pill) !important;
  background: var(--sorp-lavender-soft) !important;
  border: 1px solid var(--sorp-lavender-line) !important;
  box-shadow: none !important;
  gap: 0 !important;
}
.kyc-type-toggle button {
  appearance: none;
  border: 0 !important;
  background: transparent !important;
  font-family: var(--font-sans) !important;
  font-weight: var(--fw-semibold) !important;
  font-size: 14px !important;
  letter-spacing: 0 !important;
  color: var(--sorp-text-muted) !important;
  padding: 10px 24px !important;
  border-radius: var(--radius-pill) !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 1;
  transition: color 220ms ease;
  height: auto !important;
  box-shadow: none !important;
}
.kyc-type-toggle button.on {
  color: var(--sorp-violet) !important;
  font-weight: var(--fw-bold) !important;
}
.kyc-type-toggle button:hover:not(.on) {
  color: var(--sorp-text) !important;
}
.kyc-type-toggle svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  stroke: currentColor;
  opacity: 1;
}

/* Sliding WHITE thumb behind the active option — soft violet shadow */
.kyc-toggle-thumb,
.ubo-type-thumb {
  position: absolute;
  top: 5px;
  bottom: 5px;
  width: calc(50% - 5px);
  border-radius: var(--radius-pill);
  background: var(--sorp-card) !important;
  background-image: none !important;
  box-shadow:
    0 2px 6px rgba(20, 18, 32, 0.06),
    0 1px 2px rgba(20, 18, 32, 0.04),
    0 0 0 1px rgba(76, 68, 217, 0.08) !important;
  transition: left 320ms cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}
.kyc-toggle-thumb.pos-company    { left: 5px; }
.kyc-toggle-thumb.pos-individual { left: calc(50%); }
.ubo-type-thumb.pos-ind  { left: 5px !important; }
.ubo-type-thumb.pos-corp { left: 50% !important; }

/* Kill the shine pseudo-element on UBO thumb (was for "hot metal" effect) */
.ubo-type-thumb::before,
.ubo-type-thumb::after { display: none !important; }

/* UBO type toggle container — match the top-level kyc-type-toggle look */
.ubo-type-toggle {
  position: relative !important;
  display: inline-flex !important;
  padding: 5px !important;
  border-radius: var(--radius-pill) !important;
  background: var(--sorp-lavender-soft) !important;
  border: 1px solid var(--sorp-lavender-line) !important;
  box-shadow: none !important;
  gap: 0 !important;
}
.ubo-type-toggle button {
  appearance: none;
  border: 0 !important;
  background: transparent !important;
  font-family: var(--font-sans) !important;
  font-weight: var(--fw-semibold) !important;
  font-size: 13px !important;
  letter-spacing: 0 !important;
  color: var(--sorp-text-muted) !important;
  padding: 8px 18px !important;
  border-radius: var(--radius-pill) !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
  z-index: 1;
  transition: color 220ms ease;
  height: auto !important;
  box-shadow: none !important;
}
.ubo-type-toggle button.on {
  color: var(--sorp-violet) !important;
  font-weight: var(--fw-bold) !important;
}
.ubo-type-toggle button:hover:not(.on) {
  color: var(--sorp-text) !important;
}
.ubo-type-toggle svg {
  width: 13px !important;
  height: 13px !important;
  flex-shrink: 0;
  stroke: currentColor !important;
  opacity: 1 !important;
}

/* Generic segmented control (used elsewhere) — match same style */
.toggle-group,
.segmented-control {
  display: inline-flex;
  background: var(--sorp-lavender-soft);
  padding: 5px;
  border-radius: var(--radius-pill);
  gap: 0;
  border: 1px solid var(--sorp-lavender-line);
}
.toggle-group button,
.segmented-control button {
  background: transparent;
  border: none;
  padding: 10px 22px;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: var(--fw-semibold);
  color: var(--sorp-text-muted);
  cursor: pointer;
  transition: color .2s ease;
  height: auto;
}
.toggle-group button.active,
.toggle-group button[aria-pressed="true"],
.segmented-control button.active {
  background: var(--sorp-card);
  color: var(--sorp-violet);
  font-weight: var(--fw-bold);
  box-shadow: 0 2px 6px rgba(20, 18, 32, 0.06), 0 0 0 1px rgba(76, 68, 217, 0.08);
}

/* ---------- Attestation / consent block ---------- */
.consent-card,
.attest-block {
  background: var(--sorp-violet-tint);
  border: 1px solid var(--sorp-lavender-line);
  border-radius: var(--radius-lg);
  padding: 20px;
}
.consent-card label,
.attest-block label {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 14px;
  color: var(--sorp-text);
  font-weight: var(--fw-regular);
  margin-bottom: 12px;
  cursor: pointer;
}
.consent-card label:last-child,
.attest-block label:last-child { margin-bottom: 0; }

/* ---------- Success screen ---------- */
.success-screen,
.completion-screen {
  background: var(--sorp-card);
  border-radius: var(--radius-3xl);
  box-shadow: var(--shadow-xl);
  padding: 56px 48px;
  text-align: center;
  max-width: 560px;
  margin: 64px auto;
  border: 1px solid var(--sorp-lavender-line);
}
.success-screen .success-icon,
.completion-screen .success-icon {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--sorp-violet-electric);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 28px auto;
  color: #FFFFFF;
  box-shadow: 0 12px 36px rgba(76, 68, 217, 0.32);
}
.success-screen h1,
.completion-screen h1 {
  font-size: 28px;
  font-weight: var(--fw-bold);
  color: var(--sorp-text);
  margin: 0 0 12px 0;
}
.success-screen p,
.completion-screen p {
  color: var(--sorp-text-secondary);
  font-size: 15px;
  line-height: var(--lh-relaxed);
  margin: 0 0 28px 0;
}

/* ---------- Dock / sticky footer ---------- */
.dock,
.form-dock,
.sticky-actions {
  position: sticky;
  bottom: 0;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--sorp-lavender-line);
  padding: 16px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  z-index: 20;
}

/* ============================================================
   MOBILE / TABLET — SORP redesign reconciliation
   ============================================================ */

/* ── Tablet (≤960px): squeeze sidebar a bit, but keep desktop layout ── */
@media (max-width: 960px) and (min-width: 721px) {
  .page { grid-template-columns: 240px minmax(0, 1fr); }
  .sidebar { padding: 24px 18px; }
  .section { padding: 32px 36px; }
  .role-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* ── PHONE (≤720px) — single column, slim top bar (existing UX), full-width cards ── */
@media (max-width: 720px) {
  /* Page becomes a single column — sidebar collapses to top bar */
  .page {
    grid-template-columns: 1fr !important;
    display: block !important;
  }

  /* CRITICAL: reset desktop sidebar height/position so it doesn't eat the viewport */
  .sidebar,
  .app-sidebar,
  .left-rail {
    height: auto !important;
    max-height: none !important;
    min-height: 56px !important;
    padding: 10px 14px !important;
    padding-top: max(10px, env(safe-area-inset-top)) !important;
    align-self: start !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    overflow: visible !important;
  }
  /* Hide decorative pseudo-glows on the top bar */
  .app-sidebar::before, .app-sidebar::after,
  .sidebar::before, .sidebar::after { display: none !important; }

  /* Hide bottom bits of sidebar (TOC, progress, compliance link) — drawer handles it */
  .sidebar > nav,
  .sidebar > .toc-label,
  .sidebar > .sb-progress { display: none !important; }

  /* Logo: keep visible in the top bar, compact size */
  .brand-logo-img {
    height: 22px !important;
    margin-bottom: 0 !important;
    filter: none !important;
  }
  .sidebar .brand,
  .app-sidebar .brand {
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 0 !important;
    flex-shrink: 0;
  }
  .sidebar .brand-sub,
  .app-sidebar .brand-sub { display: none !important; }

  /* Role cards: 1 column, looser */
  .role-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .role-card,
  .option-card,
  .selectable-card {
    padding: 22px 22px 20px 22px !important;
    min-height: auto !important;
  }
  .role-card .role-title,
  .option-card .opt-title { font-size: 17px !important; }
  .role-card .role-desc,
  .option-card .opt-desc { font-size: 13.5px !important; }

  /* Section cards / qcards: phone-sized padding and radius */
  .section-card,
  .card,
  .qcard {
    padding: 22px 20px !important;
    border-radius: var(--radius-xl) !important;
  }
  .section-card .section-title,
  .qcard .qtitle,
  .card h2 { font-size: 22px !important; line-height: 1.2 !important; }
  .section-card .section-sub,
  .card .sub { font-size: 14px !important; margin-bottom: 18px !important; }

  /* Inputs: 56→52px, 16px font to block iOS zoom */
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="number"], input[type="date"], input[type="search"],
  input[type="url"], input[type="password"],
  select, textarea, .field input, .field select, .field textarea {
    height: 52px !important;
    font-size: 16px !important;
    padding: 0 14px !important;
  }
  textarea, .field textarea { height: auto !important; padding: 12px 14px !important; min-height: 100px !important; }

  /* Labels and hints */
  label, .field-label, .qlabel { font-size: 14px !important; margin-bottom: 8px !important; }
  .field-hint, .qhint { font-size: 12.5px !important; }

  /* CTA: full-width on phone, tighter */
  .btn-primary, button.primary, .button-primary, .cta, .next-button, .submit-button {
    width: 100%;
    height: 54px;
    font-size: 16px;
    padding: 0 24px;
  }
  .btn-secondary, button.secondary, .back-button, .prev-button {
    width: 100%;
    height: 52px;
    font-size: 15px;
  }

  /* Dock: stack actions on phone */
  .dock, .form-dock, .sticky-actions {
    flex-direction: column-reverse;
    padding: 14px 16px;
    padding-bottom: max(14px, env(safe-area-inset-bottom));
    gap: 10px;
  }
  .dock > *, .form-dock > * { width: 100%; }

  /* Consent / info card: shrink padding */
  .consent-card, .attest-block, .info-card, .compliance-note {
    padding: 16px !important;
    border-radius: var(--radius-md) !important;
  }

  /* Success screen */
  .success-screen, .completion-screen {
    padding: 36px 22px !important;
    margin: 20px 14px !important;
    border-radius: var(--radius-2xl) !important;
  }
  .success-screen h1, .completion-screen h1 { font-size: 24px !important; }

  /* Body globally: smaller base text */
  body, html { font-size: 15px !important; }
  h1 { font-size: 28px !important; line-height: 1.15 !important; }
  h2 { font-size: 22px !important; }
  h3 { font-size: 18px !important; }
  p { font-size: 15px !important; }

  /* Hero — kill horizontal overflow on phone */
  .hero {
    padding: 32px 20px 24px !important;
    max-width: 100% !important;
  }
  .hero h1 {
    font-size: 32px !important;
    line-height: 1.1 !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
  }

  /* Form sections — phone padding */
  .section {
    padding: 22px 18px !important;
    border-radius: var(--radius-xl) !important;
    margin-bottom: 14px;
  }
  .section h2 { font-size: 19px !important; }
  .section-num { font-size: 14px !important; padding: 3px 9px !important; }
  .section-desc { font-size: 14px !important; }

  /* Main — full width on phone */
  .main {
    padding: 0 0 200px !important;
    max-width: 100% !important;
  }

  /* Hide floating Staff fab on phone (already accessible via drawer menu) */
  .staff-fab { display: none !important; }

  /* Dock — compact phone */
  .dock {
    height: auto !important;
    padding: 12px 16px !important;
    padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
  }
  .dock .dock-progress { display: none !important; }
  .dock .btn, .dock button { width: 100% !important; height: 52px !important; font-size: 16px !important; }

  /* Stepper (in mobile drawer) — keep vertical */
  .mobile-nav-list { padding: 0; }

  /* Stop any sticky overflow */
  .sidebar, .app-sidebar { overflow-x: hidden !important; }
}

/* ── SMALL PHONE (≤380px) — tighten further ── */
@media (max-width: 380px) {
  .section-card, .card, .qcard { padding: 18px 16px !important; }
  .section-card .section-title, .qcard .qtitle { font-size: 20px !important; }
  .role-card { padding: 18px 18px 16px 18px !important; }
  .role-card .role-title { font-size: 16px !important; }
  .brand-logo-img { height: 20px !important; }
}

/* ═══════════════════════════════════════════════════════════════
   THANK-YOU / SUBMIT CELEBRATION
   - Animated SVG check that draws itself
   - Concentric pulsing halos
   - Refined floating sparkles in brand colors (NOT confetti)
   ═══════════════════════════════════════════════════════════════ */

.celebrate-back {
  background: rgba(20, 18, 32, 0.55) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: celebrateBackIn .4s ease-out;
}
@keyframes celebrateBackIn {
  from { opacity: 0; backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); }
  to   { opacity: 1; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
}

.celebrate-modal {
  position: relative;
  background: var(--sorp-card) !important;
  border: 1px solid var(--sorp-lavender-line);
  border-radius: var(--radius-3xl) !important;
  box-shadow:
    0 32px 80px rgba(51, 42, 183, 0.18),
    0 12px 32px rgba(20, 18, 32, 0.12) !important;
  padding: 56px 48px 40px !important;
  max-width: 560px !important;
  width: 92%;
  overflow: hidden !important;
  text-align: center;
  animation: celebrateModalIn .55s cubic-bezier(0.2, 0.9, 0.3, 1.15);
}
@keyframes celebrateModalIn {
  from { opacity: 0; transform: translateY(24px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Animated check with concentric halos ── */
.celebrate-mark {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0 auto 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.celebrate-mark .halo {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--sorp-violet-electric);
  opacity: 0;
  animation: haloPulse 2.4s ease-out infinite;
}
.celebrate-mark .halo-1 { animation-delay: 0ms;   }
.celebrate-mark .halo-2 { animation-delay: 600ms; }
.celebrate-mark .halo-3 { animation-delay: 1200ms; }
@keyframes haloPulse {
  0%   { transform: scale(0.7); opacity: 0.6; border-color: var(--sorp-violet-electric); }
  60%  { opacity: 0.18; }
  100% { transform: scale(1.6); opacity: 0; border-color: var(--sorp-coral); }
}

.check-svg {
  position: relative;
  z-index: 2;
  width: 88px;
  height: 88px;
  filter: drop-shadow(0 8px 24px rgba(76, 68, 217, 0.32));
}
.check-svg .check-circle {
  fill: var(--sorp-violet-electric);
  stroke: var(--sorp-violet);
  stroke-width: 0;
  transform-origin: center;
  animation: checkCirclePop .55s cubic-bezier(0.2, 0.9, 0.3, 1.4) both;
}
.check-svg .check-path {
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: checkDraw .5s cubic-bezier(0.65, 0, 0.45, 1) .35s forwards;
}
@keyframes checkCirclePop {
  0%   { transform: scale(0.2); opacity: 0; }
  60%  { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); }
}
@keyframes checkDraw {
  to { stroke-dashoffset: 0; }
}

/* ── Floating sparkles (refined, not confetti) ── */
.celebrate-sparks {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
.celebrate-sparks .spark {
  position: absolute;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  opacity: 0;
  animation: sparkFloat 2.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  will-change: transform, opacity;
}
/* 6 spark variants — sizes, shapes, colors */
.celebrate-sparks .spark-1 { background: var(--sorp-violet-electric); width: 10px; height: 10px; }
.celebrate-sparks .spark-2 { background: var(--sorp-coral); width: 6px; height: 6px; }
.celebrate-sparks .spark-3 { background: var(--sorp-lavender); width: 8px; height: 8px; transform: rotate(45deg); border-radius: 2px; }
.celebrate-sparks .spark-4 { background: var(--sorp-violet); width: 4px; height: 4px; }
.celebrate-sparks .spark-5 {
  width: 12px; height: 12px;
  background: none;
  border: 2px solid var(--sorp-coral);
  border-radius: 50%;
}
.celebrate-sparks .spark-6 {
  width: 6px; height: 6px;
  background: var(--sorp-violet-electric);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--sorp-violet-electric);
}
@keyframes sparkFloat {
  0%   { transform: translate(0, 0) scale(0); opacity: 0; }
  15%  { opacity: 1; transform: translate(0, -10px) scale(1); }
  100% {
    transform:
      translate(var(--dx, 0), -220px) scale(0.4) rotate(360deg);
    opacity: 0;
  }
}
/* Give each spark a horizontal drift via nth-child */
.celebrate-sparks .spark:nth-child(3n)   { --dx: -60px; }
.celebrate-sparks .spark:nth-child(3n+1) { --dx: 40px; }
.celebrate-sparks .spark:nth-child(3n+2) { --dx: -20px; }
.celebrate-sparks .spark:nth-child(5n)   { --dx: 80px; }
.celebrate-sparks .spark:nth-child(7n)   { --dx: -100px; }

/* ── Titles & body copy ── */
.celebrate-title {
  position: relative;
  z-index: 2;
  font-size: 36px !important;
  font-weight: var(--fw-extrabold) !important;
  color: var(--sorp-text) !important;
  letter-spacing: -0.025em !important;
  margin: 0 0 14px 0 !important;
  line-height: 1.1;
}
.celebrate-title .dot {
  color: var(--sorp-coral);
}
.celebrate-lead {
  position: relative;
  z-index: 2;
  font-size: 17px !important;
  font-weight: var(--fw-semibold) !important;
  color: var(--sorp-violet) !important;
  margin: 0 0 12px 0 !important;
  line-height: 1.4;
}
.celebrate-body {
  position: relative;
  z-index: 2;
  font-size: 15px !important;
  color: var(--sorp-text-secondary) !important;
  margin: 0 0 28px 0 !important;
  line-height: 1.6;
}
.celebrate-body strong {
  color: var(--sorp-text) !important;
  font-weight: var(--fw-bold) !important;
}

/* Reduce motion preference — keep it dignified */
@media (prefers-reduced-motion: reduce) {
  .celebrate-back, .celebrate-modal,
  .check-circle, .check-path,
  .halo, .spark {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  .check-path { stroke-dashoffset: 0 !important; }
}

/* ═══════════════════════════════════════════════════════════════
   INVITATIONS REGISTRY + SETTINGS — admin tabs
   ═══════════════════════════════════════════════════════════════ */

.aml-page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 24px;
}
.aml-page-head .btn-primary { flex-shrink: 0; }

/* Status pills for invitations */
.aml-status-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.aml-status-pill.status-pending   { background: var(--amber-100); color: var(--amber-700); }
.aml-status-pill.status-opened    { background: var(--sorp-violet-tint); color: var(--sorp-violet); }
.aml-status-pill.status-submitted { background: var(--sorp-violet-tint-strong); color: var(--sorp-violet); }
.aml-status-pill.status-approved  { background: var(--green-100); color: var(--green-700); }
.aml-status-pill.status-edd       { background: var(--amber-100); color: var(--amber-700); }
.aml-status-pill.status-rejected  { background: var(--gold-50); color: var(--sorp-coral); }

/* Risk pills used in companies registry */
.aml-risk-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
  font-family: var(--font-mono);
}
.aml-risk-pill.risk-low  { background: var(--green-100); color: var(--green-700); }
.aml-risk-pill.risk-mid  { background: var(--amber-100); color: var(--amber-700); }
.aml-risk-pill.risk-high { background: var(--gold-50);   color: var(--sorp-coral); }

/* AmoCRM deep-link styling */
.amo-link {
  display: inline-flex;
  align-items: center;
  color: var(--sorp-violet-electric);
  text-decoration: none;
  font-weight: var(--fw-semibold);
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--sorp-violet-tint);
  transition: all .15s ease;
}
.amo-link:hover {
  background: var(--sorp-violet-tint-strong);
  color: var(--sorp-violet);
}
.amo-link .mono { font-family: var(--font-mono); font-size: 12.5px; }

/* Inline AmoCRM section heading icon */
.amo-h3::before {
  background: linear-gradient(135deg, #FFCE2D 0%, #FF8E2D 60%, #FF5C2D 100%) !important;
}

/* Row actions in registry tables */
.aml-row-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}
.aml-row-btn {
  font-size: 12px !important;
  padding: 4px 10px !important;
  height: 28px !important;
  border: 1px solid var(--sorp-text-line);
  border-radius: 6px !important;
}
.aml-row-btn:hover {
  border-color: var(--sorp-violet-electric);
  color: var(--sorp-violet) !important;
}

/* Companies registry: extra stat-row width on 6 columns */
.aml-stats-row { flex-wrap: wrap; }

.aml-copy-btn {
  font-size: 13px;
  padding: 6px 12px;
  min-width: 90px;
}
.btn-icon-del {
  background: transparent;
  border: 1px solid var(--sorp-text-line);
  border-radius: 6px;
  width: 28px; height: 28px;
  font-size: 18px;
  line-height: 1;
  color: var(--sorp-text-muted);
  cursor: pointer;
  transition: all .15s ease;
}
.btn-icon-del:hover {
  background: var(--gold-50);
  border-color: var(--sorp-coral);
  color: var(--sorp-coral);
}

.aml-table-empty {
  text-align: center;
  padding: 48px 24px !important;
  color: var(--sorp-text-muted);
  font-size: 14px;
}
.aml-cell-strong { font-weight: var(--fw-bold); color: var(--sorp-text); }
.aml-cell-sub    { font-size: 12px; color: var(--sorp-text-muted); margin-top: 2px; }

.aml-case-link {
  color: var(--sorp-violet-electric);
  text-decoration: none;
  font-weight: var(--fw-semibold);
}
.aml-case-link:hover { text-decoration: underline; }

/* Create-invitation modal */
.invite-modal {
  background: var(--sorp-card) !important;
  border-radius: var(--radius-2xl) !important;
  padding: 36px 36px 28px !important;
  max-width: 520px !important;
  width: 92%;
}
.invite-modal h2 {
  font-size: 22px !important;
  font-weight: var(--fw-extrabold) !important;
  margin: 0 0 6px 0 !important;
  color: var(--sorp-text) !important;
}
.invite-modal .modal-sub {
  font-size: 14px;
  color: var(--sorp-text-secondary);
  margin: 0 0 24px 0;
  line-height: 1.5;
}
.invite-modal .field { margin-bottom: 16px; }
.invite-modal .field label {
  font-size: 13px;
  font-weight: var(--fw-bold);
  color: var(--sorp-text);
  margin-bottom: 6px;
  display: block;
}
.invite-modal .field small {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--sorp-text-muted);
}
.invite-modal .row.cols-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.modal-error {
  background: var(--gold-50);
  border: 1px solid var(--sorp-coral);
  color: var(--sorp-coral);
  padding: 10px 14px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: var(--fw-semibold);
  margin: 8px 0 16px;
}
.modal-cta {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--sorp-lavender-line);
}

/* Generated link display box */
.invite-link-box {
  display: flex;
  gap: 8px;
  margin: 16px 0 20px;
  padding: 12px;
  background: var(--sorp-violet-tint);
  border-radius: var(--radius-md);
  border: 1px solid var(--sorp-lavender-line);
}
.invite-link-box input {
  flex: 1;
  background: var(--sorp-card) !important;
  border: 1px solid var(--sorp-text-line) !important;
  font-size: 13px !important;
  height: 44px !important;
}
.invite-link-box .btn { flex-shrink: 0; height: 44px; font-size: 13px; padding: 0 18px; }

/* Settings page */
.aml-settings-card {
  background: var(--sorp-card);
  border: 1px solid var(--sorp-lavender-line);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-md);
  padding: 32px;
  max-width: 880px;
  margin-top: 24px;
}
.aml-settings-head h3 {
  font-size: 22px;
  font-weight: var(--fw-extrabold);
  color: var(--sorp-text);
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.aml-settings-head h3::before {
  content: "";
  width: 24px; height: 24px;
  background: linear-gradient(135deg, #34A853 0%, #FBBC04 50%, #4285F4 100%);
  border-radius: 6px;
  flex-shrink: 0;
}
.aml-settings-head p {
  font-size: 14px;
  color: var(--sorp-text-secondary);
  margin: 0 0 24px 0;
  line-height: 1.55;
}
.aml-settings-card .field { margin-bottom: 16px; }
.aml-settings-card .field label {
  font-size: 13px;
  font-weight: var(--fw-bold);
  color: var(--sorp-text);
}
.aml-settings-card .field small {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--sorp-text-muted);
  line-height: 1.55;
}
.aml-settings-card .field small code {
  font-family: var(--font-mono);
  background: var(--sorp-lavender-soft);
  color: var(--sorp-violet);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
}
.aml-settings-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.aml-settings-result {
  font-size: 13px;
  font-weight: var(--fw-semibold);
}
.aml-settings-result.ok  { color: var(--green-700); }
.aml-settings-result.err { color: var(--sorp-coral); }

.aml-script-details {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--sorp-lavender-line);
}
.aml-script-details summary {
  font-weight: var(--fw-bold);
  font-size: 14px;
  color: var(--sorp-violet);
  cursor: pointer;
  padding: 8px 0;
  list-style: none;
}
.aml-script-details summary::before {
  content: "▶ ";
  font-size: 10px;
  transition: transform .2s ease;
  display: inline-block;
}
.aml-script-details[open] summary::before { transform: rotate(90deg); }
.aml-script-steps {
  padding-left: 20px;
  margin: 16px 0;
}
.aml-script-steps li {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--sorp-text-secondary);
  margin-bottom: 6px;
}
.aml-script-steps a {
  color: var(--sorp-violet-electric);
  font-weight: var(--fw-semibold);
}
.aml-script-codebox {
  position: relative;
  background: #141220;
  border-radius: var(--radius-md);
  padding: 16px;
  margin-top: 8px;
}
.aml-script-codebox pre {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  color: #E2DFFA;
  overflow-x: auto;
  white-space: pre;
}
.aml-script-codebox .aml-copy-code {
  position: absolute;
  top: 8px; right: 8px;
  background: rgba(255,255,255,0.08) !important;
  color: #FFFFFF !important;
  font-size: 12px;
  padding: 4px 10px;
  height: auto;
}
.aml-script-codebox .aml-copy-code:hover {
  background: rgba(255,255,255,0.18) !important;
}

/* ---------- Selection highlight ---------- */
::selection { background: var(--sorp-violet-electric); color: #FFFFFF; }

/* ---------- Scrollbar — subtle violet ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--sorp-bg); }
::-webkit-scrollbar-thumb { background: var(--sorp-lavender); border-radius: var(--radius-pill); border: 2px solid var(--sorp-bg); }
::-webkit-scrollbar-thumb:hover { background: var(--sorp-violet-electric); }