/* ============================================================
   CardStack — Design System v1.0
   Poppins · Deep Navy · Electric Purple · Bright Blue · Cyan
   ============================================================ */

/* #279: Poppins/Space Mono are now self-hosted via /css/fonts.css, linked
   separately by every page that loads this stylesheet (not @import'd from
   here) — @import blocks parallel loading of whatever follows it in the
   same file, and a page-level <link> lets the browser fetch it alongside
   app.css instead of serially after it. */

/* ── Variables ── */
:root {
  --navy:    #0A0F1F;
  --navy2:   #141929;
  --purple:  #7C3AED;
  --purpleD: #5B21B6;
  --purpleL: #A78BFA;
  --purpleXL:#EDE9FE;
  --blue:    #2563EB;
  --blueL:   #EFF6FF;
  --cyan:    #00D4FF;
  --green:   #059669;
  --greenL:  #ECFDF5;
  --amber:   #D97706;
  --amberL:  #FFFBEB;
  --red:     #DC2626;
  --redL:    #FEF2F2;
  --gray:    #E5E7EB;
  --gray2:   #F3F4F6;
  --gray3:   #F9FAFB;
  --muted:   #6B7280;
  --body:    #1F2937;
  --white:   #FFFFFF;
  --font:    'Poppins', system-ui, -apple-system, sans-serif;
  --radius:  18px;
  --radiusS: 10px;
  --radiusXS: 6px;
  --shadow:  0 4px 24px rgba(10,15,31,.08);
  --shadowM: 0 8px 40px rgba(10,15,31,.12);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font); color: var(--body); background: #F1F0F8; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: var(--font); cursor: pointer; }
input, textarea, select { font-family: var(--font); }

/* ── App shell ── */
.app-shell { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }

/* ── Sidebar ── */
.sidebar {
  background: var(--navy);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
/* Shell text is Helvetica per the dashboard rebrand — the wordmark below is
   the deliberate exception and stays on --font (Poppins). */
.sidebar { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; }

.sidebar-logo { padding: 24px 20px 18px; border-bottom: 1px solid rgba(255,255,255,.07); }
.logo-link { display: block; }
.logo-text { font-family: var(--font); font-size: 20px; font-weight: 800; color: var(--white); letter-spacing: -.3px; }
.logo-accent { color: var(--purpleL); }
.logo-tag { font-size: 9px; color: rgba(255,255,255,.3); text-transform: uppercase; letter-spacing: .08em; margin-top: 3px; }

.sidebar-user { padding: 14px 20px; border-bottom: 1px solid rgba(255,255,255,.07); display: flex; align-items: center; gap: 10px; }
.user-avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--purple), var(--blue)); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; color: var(--white); flex-shrink: 0; }
.user-name { font-size: 13px; font-weight: 600; color: var(--white); line-height: 1.3; }
.user-tier { font-size: 10px; color: rgba(255,255,255,.4); margin-top: 1px; }

.sidebar-nav { padding: 10px; flex: 1; }
.nav-section { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.22); padding: 10px 10px 5px; }
.nav-item {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 10px; border-radius: var(--radiusS);
  color: rgba(255,255,255,.5); font-size: 13px; font-weight: 500;
  transition: all .14s; margin-bottom: 1px; position: relative;
}
.nav-item:hover { background: rgba(255,255,255,.06); color: var(--white); }
.nav-item.active { background: rgba(124,58,237,.22); color: var(--white); }
.nav-item--logout { color: rgba(255,255,255,.35); margin-top: 4px; }
.nav-icon { width: 16px; height: 16px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.nav-icon svg { width: 16px; height: 16px; }
.nav-ext { width: 11px; height: 11px; margin-left: auto; flex-shrink: 0; }
.nav-badge { margin-left: auto; background: var(--red); color: var(--white); font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 999px; min-width: 20px; text-align: center; }

.sidebar-upgrade { padding: 12px; border-top: 1px solid rgba(255,255,255,.07); }
.btn-upgrade { display: flex; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 9px; border-radius: 8px; background: rgba(124,58,237,.25); color: var(--purpleL); font-size: 12px; font-weight: 600; border: 1px solid rgba(124,58,237,.3); transition: all .15s; }
.btn-upgrade:hover { background: rgba(124,58,237,.4); }
.btn-upgrade svg { width: 13px; height: 13px; flex-shrink: 0; }

/* ── Main content ──
   No overflow here: an "overflow: auto" ancestor whose box never actually
   clips (this one grows with .app-shell's min-height) still becomes the
   nearest scrolling ancestor for position:sticky descendants, breaking
   sticky panels (preview rail, save bar) further down the tree. Let the
   document scroll instead — .sidebar pins itself independently. */
.main-content { }

/* ── Page header ── */
.page-header { background: var(--white); padding: 24px 32px 20px; border-bottom: 1px solid var(--gray); }
.page-title { font-size: 24px; font-weight: 800; color: var(--navy); letter-spacing: -.3px; }
.page-sub { font-size: 13px; color: var(--muted); margin-top: 4px; line-height: 1.5; }
.page-actions { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; align-items: center; }

/* ── Content padding ── */
.content { padding: 24px 32px; }

/* ── Cards / panels ── */
.panel { background: var(--white); border: 1px solid var(--gray); border-radius: var(--radius); padding: 24px; }
.panel + .panel { margin-top: 16px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 10px; }
.panel-title { font-size: 16px; font-weight: 700; color: var(--navy); }
.panel-title em { font-style: normal; font-size: 12px; font-weight: 500; color: var(--muted); margin-left: 8px; }

/* ── Stats strip ── */
.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-bottom: 20px; }
.stat { background: var(--white); border: 1px solid var(--gray); border-radius: var(--radius); padding: 20px 22px; }
.stat-num { font-size: 32px; font-weight: 800; line-height: 1; margin-bottom: 5px; }
.stat-label { font-size: 12px; color: var(--muted); font-weight: 500; }
.stat-sub { font-size: 11px; color: var(--muted); margin-top: 3px; }
.c-purple { color: var(--purple); }
.c-red    { color: var(--red); }
.c-green  { color: var(--green); }
.c-blue   { color: var(--blue); }

/* ── Buttons ── */
.btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 18px; border-radius: 999px; font-weight: 600; font-size: 14px; border: none; transition: all .15s; white-space: nowrap; line-height: 1.4; }
.btn-primary { background: var(--purple); color: var(--white) !important; }
.btn-primary:hover { background: var(--purpleD); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(124,58,237,.3); }
.btn-dark  { background: var(--navy);  color: var(--white) !important; }
.btn-dark:hover  { opacity: .88; }
.btn-green { background: var(--green); color: var(--white) !important; }
.btn-green:hover { background: #047857; }
.btn-ghost { background: var(--gray2); color: var(--body) !important; border: 1px solid var(--gray); }
.btn-ghost:hover { background: var(--gray); }
.btn-red   { background: var(--redL);  color: var(--red) !important; border: 1px solid rgba(220,38,38,.2); }
.btn-sm    { padding: 5px 13px; font-size: 12px; }
.btn-xs    { padding: 3px 10px; font-size: 11px; }
.btn-block { width: 100%; justify-content: center; }

/* ── Forms ── */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-full { grid-column: 1/-1; }
.form-field { display: flex; flex-direction: column; gap: 5px; }
.form-label { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.form-input, .form-select, .form-textarea {
  width: 100%; padding: 11px 14px;
  border: 1.5px solid var(--gray); border-radius: var(--radiusS);
  font-size: 14px; font-family: var(--font); color: var(--body);
  background: var(--white); transition: border-color .15s, box-shadow .15s;
  outline: none;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(124,58,237,.1);
}
.form-input:disabled, .form-input[disabled] { background: var(--gray3); color: var(--muted); cursor: not-allowed; }
.form-textarea { min-height: 90px; resize: vertical; line-height: 1.6; }
.form-hint { font-size: 11px; color: var(--muted); margin-top: 3px; }

/* ── Reminder picker ── */
.reminder-row { display: flex; gap: 8px; flex-wrap: wrap; }
.reminder-btn { padding: 7px 15px; border-radius: 999px; border: 1.5px solid var(--gray); background: var(--white); font-size: 13px; font-weight: 600; cursor: pointer; transition: all .15s; font-family: var(--font); }
.reminder-btn:hover { border-color: var(--purple); }
.reminder-btn.active { background: var(--purple); border-color: var(--purple); color: var(--white); }

/* ── Tags ── */
.tag-row { display: flex; flex-wrap: wrap; gap: 7px; }
.tag-chip { padding: 5px 14px; border-radius: 999px; border: 1.5px solid var(--gray); background: var(--white); font-size: 12px; font-weight: 600; cursor: pointer; transition: all .15s; }
.tag-chip.active { background: var(--purple); border-color: var(--purple); color: var(--white); }
.tag-pill { display: inline-block; padding: 2px 9px; border-radius: 999px; background: rgba(124,58,237,.1); color: var(--purple); font-size: 11px; font-weight: 600; }

/* ── Pipeline items ── */
.pipeline-item {
  display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: start;
  padding: 14px 16px; border: 1px solid var(--gray); border-radius: var(--radiusS);
  margin-bottom: 8px; background: var(--white); transition: box-shadow .15s;
}
.pipeline-item:hover { box-shadow: var(--shadow); }
.pipeline-item.overdue { border-color: rgba(220,38,38,.25); background: #FFF8F8; }
.pipeline-item.due-soon { border-color: rgba(217,119,6,.25); background: #FFFDF5; }
.pi-name { font-weight: 700; font-size: 14px; color: var(--navy); }
.pi-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.pi-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }

/* ── Due badges ── */
.due-badge { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.due-overdue  { background: var(--redL);   color: var(--red); }
.due-soon     { background: var(--amberL); color: var(--amber); }
.due-pending  { background: var(--blueL);  color: var(--blue); }
.due-done     { background: var(--greenL); color: var(--green); }

/* ── Contact rows ── */
.contact-row {
  display: grid; grid-template-columns: 38px 1fr auto; gap: 12px; align-items: start;
  padding: 14px 16px; border: 1px solid var(--gray); border-radius: var(--radiusS);
  margin-bottom: 8px; background: var(--white); transition: box-shadow .15s;
}
.contact-row:hover { box-shadow: var(--shadow); }
.contact-avatar { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg,var(--purple),var(--blue)); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; color: var(--white); flex-shrink: 0; }
.contact-name  { font-weight: 700; font-size: 15px; color: var(--navy); }
.contact-sub   { font-size: 12px; color: var(--muted); margin-top: 2px; }
.contact-event { font-size: 12px; color: var(--muted); margin-top: 3px; }
.contact-note  { font-size: 13px; font-style: italic; color: var(--body); margin-top: 5px; line-height: 1.5; }
.contact-tags  { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.contact-actions { display: flex; flex-direction: column; gap: 5px; min-width: 90px; align-items: flex-end; }

/* ── Bulk action bar (My Stack multi-select → add to collection) ── */
.bulk-bar {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 16px; z-index: 60;
  display: none; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--navy); color: var(--white); padding: 10px 14px;
  border-radius: 14px; box-shadow: var(--shadow); max-width: calc(100% - 24px);
}
.bulk-bar.show { display: flex; }
.bulk-bar select, .bulk-bar input {
  padding: 7px 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,.25);
  background: var(--white); color: var(--navy); font: inherit;
}
@media (max-width: 768px) { .bulk-bar { bottom: 74px; } }

/* ── Virtual card preview ── */
.card-preview {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy2) 100%);
  border-radius: 20px; padding: 28px; color: var(--white); position: relative; overflow: hidden;
}
.card-preview::before { content: ''; position: absolute; top: -40px; right: -40px; width: 200px; height: 200px; border-radius: 50%; background: rgba(124,58,237,.18); pointer-events: none; }
.card-preview::after  { content: ''; position: absolute; bottom: -30px; left: 60px; width: 150px; height: 150px; border-radius: 50%; background: rgba(37,99,235,.12); pointer-events: none; }
.card-avatar { width: 58px; height: 58px; border-radius: 50%; background: linear-gradient(135deg,var(--purple),var(--blue)); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 20px; color: var(--white); margin-bottom: 14px; position: relative; z-index: 1; border: 3px solid rgba(255,255,255,.12); }
.card-name { font-size: 22px; font-weight: 800; margin-bottom: 4px; position: relative; z-index: 1; }
.card-role { font-size: 14px; color: rgba(255,255,255,.6); margin-bottom: 14px; position: relative; z-index: 1; }
.card-intent { display: inline-flex; align-items: center; gap: 5px; background: rgba(124,58,237,.28); border: 1px solid rgba(124,58,237,.45); border-radius: 999px; padding: 4px 12px; font-size: 12px; font-weight: 600; color: var(--purpleL); margin-bottom: 14px; position: relative; z-index: 1; }
.card-contact { display: flex; align-items: center; gap: 9px; font-size: 13px; color: rgba(255,255,255,.7); margin-bottom: 7px; position: relative; z-index: 1; }
.card-contact-icon { width: 24px; height: 24px; border-radius: 6px; background: rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; font-size: 11px; flex-shrink: 0; }
.card-url { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1); border-radius: 8px; padding: 8px 12px; font-size: 12px; color: var(--purpleL); margin-top: 14px; position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; word-break: break-all; }
.card-edit-grid { display: grid; grid-template-columns: minmax(0,1fr) 360px; gap: 22px; align-items: start; }
@media (max-width: 860px) { .card-edit-grid { grid-template-columns: 1fr; } }

/* ── QR box ── */
.qr-box { background: var(--white); border: 1px solid var(--gray); border-radius: var(--radius); padding: 20px; text-align: center; }
.qr-box img { width: 140px; border-radius: 10px; margin: 0 auto 12px; display: block; }
.qr-label { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 12px; }

/* ── Share buttons ── */
.share-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.share-btn { display: flex; align-items: center; gap: 9px; padding: 10px 14px; border: 1px solid var(--gray); border-radius: var(--radiusS); background: var(--white); cursor: pointer; font-family: var(--font); font-size: 13px; font-weight: 500; color: var(--body); transition: all .15s; text-decoration: none; }
.share-btn:hover { border-color: var(--purple); background: var(--purpleXL); }
.share-icon { width: 28px; height: 28px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; }

/* ── NFC hint ── */
.nfc-hint { background: linear-gradient(135deg,rgba(0,212,255,.06),rgba(124,58,237,.06)); border: 1px solid rgba(124,58,237,.15); border-radius: var(--radiusS); padding: 10px 14px; font-size: 12px; color: var(--muted); text-align: center; margin-top: 10px; }

/* ── Analytics bars ── */
.an-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.an-bar-label { font-size: 12px; color: var(--muted); width: 72px; flex-shrink: 0; }
.an-bar-track { flex: 1; height: 6px; background: var(--gray); border-radius: 999px; overflow: hidden; }
.an-bar-fill { height: 100%; border-radius: 999px; background: var(--purple); transition: width .4s ease; }
.an-bar-count { font-size: 12px; font-weight: 600; color: var(--body); width: 28px; text-align: right; flex-shrink: 0; }

/* ── Search ── */
.search-bar { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.search-input { flex: 1; min-width: 180px; border: 1.5px solid var(--gray); border-radius: 999px; padding: 9px 18px; font-size: 14px; font-family: var(--font); outline: none; color: var(--body); }
.search-input:focus { border-color: var(--purple); box-shadow: 0 0 0 3px rgba(124,58,237,.08); }
.filter-select { border: 1.5px solid var(--gray); border-radius: 999px; padding: 9px 14px; font-size: 13px; font-family: var(--font); background: var(--white); color: var(--body); outline: none; }

/* ── Tab strip ── */
.tab-row { display: flex; gap: 4px; margin-bottom: 16px; flex-wrap: wrap; }
.tab { padding: 7px 16px; border-radius: 999px; font-size: 13px; font-weight: 600; cursor: pointer; border: 1.5px solid var(--gray); background: var(--white); color: var(--muted); transition: all .15s; font-family: var(--font); text-decoration: none; }
.tab.active { background: var(--navy); color: var(--white); border-color: var(--navy); }
.tab:hover:not(.active) { border-color: var(--purple); color: var(--purple); }

/* ── Toggle ── */
.toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--gray2); }
.toggle-row:last-child { border-bottom: none; }
.toggle-label { font-size: 14px; font-weight: 500; }
.toggle-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.toggle { width: 42px; height: 24px; border-radius: 999px; background: var(--gray); position: relative; cursor: pointer; transition: background .2s; flex-shrink: 0; border: none; outline: none; }
.toggle.on { background: var(--purple); }
.toggle::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--white); box-shadow: 0 1px 4px rgba(0,0,0,.2); transition: transform .2s; }
.toggle.on::after { transform: translateX(18px); }

/* ── Alert / flash ── */
.flash { padding: 14px 20px; font-size: 14px; font-weight: 500; margin: 16px 32px 0; border-radius: var(--radiusS); }
.flash--error   { background: var(--redL);   color: #991B1B; }
.flash--success { background: var(--greenL); color: var(--green); }
.alert { padding: 12px 16px; border-radius: var(--radiusS); font-size: 14px; font-weight: 500; margin-bottom: 16px; }
.alert-error   { background: var(--redL);   color: #991B1B; }
.alert-success { background: var(--greenL); color: var(--green); }
.alert-info    { background: var(--blueL);  color: #1E40AF; }

/* ── Empty state ── */
.empty { text-align: center; padding: 48px 20px; color: var(--muted); }
.empty-icon { font-size: 44px; margin-bottom: 14px; }
.empty p { font-size: 15px; }

/* ── Public card ── */
.public-wrap { min-height: 100vh; background: #F1F0F8; display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px 80px; }
.public-card { width: 100%; max-width: 380px; }
.public-card-inner { background: var(--white); border: 1px solid var(--gray); border-radius: 24px; overflow: hidden; box-shadow: var(--shadowM); }
.pub-header { background: linear-gradient(135deg,var(--navy),var(--navy2)); padding: 32px 28px 28px; position: relative; overflow: hidden; }
.pub-header::before { content: ''; position: absolute; top: -50px; right: -50px; width: 200px; height: 200px; border-radius: 50%; background: var(--accglow,rgba(124,58,237,.18)); pointer-events: none; }
.pub-photo { width: 72px; height: 72px; border-radius: 50%; background: linear-gradient(135deg,var(--acc1,var(--purple)),var(--acc2,var(--blue))); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 26px; color: var(--white); margin-bottom: 14px; border: 3px solid rgba(255,255,255,.12); position: relative; z-index: 1; }
.pub-photo img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.pub-name { font-size: 22px; font-weight: 800; color: var(--white); margin-bottom: 4px; position: relative; z-index: 1; }
.pub-role { font-size: 14px; color: rgba(255,255,255,.6); margin-bottom: 12px; position: relative; z-index: 1; }
.pub-intent { display: inline-flex; align-items: center; gap: 5px; background: rgba(255,255,255,.12); border: 1px solid var(--acc1,rgba(124,58,237,.45)); border-radius: 999px; padding: 3px 11px; font-size: 11px; font-weight: 600; color: #fff; position: relative; z-index: 1; }
.pub-body { padding: 24px; }
.pub-bio { font-size: 14px; line-height: 1.6; color: var(--muted); margin-bottom: 16px; }
.pub-contact { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.pub-contact-icon { width: 32px; height: 32px; border-radius: 8px; background: var(--gray2); display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.pub-contact-link { font-size: 13px; font-weight: 500; color: var(--blue); word-break: break-all; }
.pub-divider { border: none; border-top: 1px solid var(--gray); margin: 18px 0; }
.pub-actions { display: flex; flex-direction: column; gap: 8px; }
.pub-btn-primary { width: 100%; padding: 13px; border-radius: 999px; background: var(--acc1,var(--purple)); color: var(--white); font-weight: 700; font-size: 15px; font-family: var(--font); border: none; cursor: pointer; transition: all .15s; }
/* Darken the actual accent on hover, not a fixed purple -- this button's base
   colour is var(--acc1,var(--purple)), so every non-default accent used to
   flash purple on hover regardless of the card's real colour. color-mix has
   the same support floor already relied on elsewhere in this stylesheet
   (Terminal/Bold Split's relative-colour accent treatment). */
.pub-btn-primary:hover { background: color-mix(in srgb, var(--acc1,var(--purple)) 80%, black); }
.pub-btn-secondary { width: 100%; padding: 12px; border-radius: 999px; background: var(--white); color: var(--navy); font-weight: 600; font-size: 14px; font-family: var(--font); border: 1.5px solid var(--gray); cursor: pointer; transition: all .15s; }
.pub-btn-secondary:hover { background: var(--gray2); }
.pub-share-row { display: flex; gap: 8px; margin-top: 8px; }
.pub-share-btn { flex: 1; padding: 9px 6px; border-radius: var(--radiusS); background: var(--gray2); border: 1px solid var(--gray); font-size: 12px; font-weight: 600; font-family: var(--font); cursor: pointer; color: var(--body); transition: all .15s; text-align: center; }
.pub-share-btn:hover { background: var(--gray); }
.pub-powered { text-align: center; font-size: 11px; color: var(--muted); margin-top: 16px; padding-bottom: 2px; }
.pub-powered a { color: var(--purple); font-weight: 600; }

/* ── Card themes: accent vars (--acc1/--acc2/--accglow) set inline on .public-card-inner ── */
.pub-socials { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.pub-social { width: 38px; height: 38px; border-radius: 50%; background: var(--gray2); border: 1px solid var(--gray); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; color: var(--navy); text-decoration: none; transition: all .15s; }
.pub-social:hover { background: var(--gray); transform: translateY(-1px); }
.pub-social svg { width: 18px; height: 18px; flex-shrink: 0; }
.pub-cover { height: 84px; margin: 0 -28px 14px; background: linear-gradient(115deg,var(--acc1,var(--purple)),var(--acc2,var(--blue))); background-size: cover; background-position: center; }
.pub-theme-cover .pub-header { background: var(--white); padding: 0 28px 22px; text-align: center; }
.pub-theme-cover .pub-header::before { display: none; }
.pub-theme-cover .pub-photo { margin: -34px auto 12px; border: 4px solid var(--white); }
.pub-theme-cover .pub-name { color: var(--navy); }
.pub-theme-cover .pub-role { color: var(--muted); }
.pub-theme-cover .pub-intent { background: var(--gray2); border-color: var(--acc1,var(--purple)); color: var(--navy); }
.pub-theme-duotone .pub-header { background: linear-gradient(160deg,var(--acc1,var(--purple)),var(--acc2,var(--blue))); padding: 28px 28px 26px; }
.pub-theme-duotone .pub-header::before { display: none; }
.pub-theme-duotone .pub-photo { border-radius: 18px; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.4); }

/* Minimal — white header, accent top bar, dark text */
.pub-theme-minimal .pub-header { background: var(--white); border-top: 4px solid var(--acc1,var(--purple)); padding: 26px 28px 20px; }
.pub-theme-minimal .pub-header::before { display: none; }
.pub-theme-minimal .pub-photo { background: var(--gray2); color: var(--acc1,var(--purple)); border: 1px solid var(--gray); }
.pub-theme-minimal .pub-name { color: var(--navy); }
.pub-theme-minimal .pub-role { color: var(--muted); }
.pub-theme-minimal .pub-intent { background: var(--gray2); border-color: var(--acc1,var(--purple)); color: var(--navy); }

/* Spotlight — centered hero avatar with accent ring on white */
.pub-theme-spotlight .pub-header { background: var(--white); text-align: center; padding: 28px 28px 18px; }
.pub-theme-spotlight .pub-header::before { display: none; }
.pub-theme-spotlight .pub-photo { width: 84px; height: 84px; margin: 0 auto 14px; box-shadow: 0 0 0 4px var(--white), 0 0 0 9px var(--accglow,rgba(124,58,237,.3)); }
.pub-theme-spotlight .pub-name { color: var(--navy); }
.pub-theme-spotlight .pub-role { color: var(--muted); }
.pub-theme-spotlight .pub-intent { background: var(--gray2); border-color: var(--acc1,var(--purple)); color: var(--navy); }

/* Sidebar — accent column (avatar) + info column */
.pub-theme-sidebar.public-card-inner { display: flex; align-items: stretch; }
.pub-theme-sidebar .pub-header { width: 40%; flex-shrink: 0; display: flex; flex-direction: column; justify-content: center; padding: 22px 16px; background: linear-gradient(160deg,var(--acc1,var(--purple)),var(--acc2,var(--blue))); }
.pub-theme-sidebar .pub-header::before { display: none; }
.pub-theme-sidebar .pub-body { flex: 1; }

/* Photo background — full-bleed photo + scrim, text overlaid */
.pub-theme-photo .pub-header { position: relative; min-height: 200px; display: flex; flex-direction: column; justify-content: flex-end; padding: 22px; background-image: var(--photo,linear-gradient(135deg,var(--acc1,var(--purple)),var(--acc2,var(--blue)))); background-size: cover; background-position: center; }
.pub-theme-photo .pub-header::before { top: 0; left: 0; right: 0; bottom: 0; width: auto; height: auto; border-radius: 0; background: linear-gradient(to top,rgba(10,15,31,.92),rgba(10,15,31,.12)); }
.pub-theme-photo .pub-photo { display: none; }
.pub-theme-photo .pub-name, .pub-theme-photo .pub-role, .pub-theme-photo .pub-intent { position: relative; z-index: 1; }

/* Mono Ticket — cream ticket-stub look, monospace, dashed perforation.
   Accent carries the stub band + the printed-in-colour role line; the cream
   paper, mono type and perforation stay fixed (they are the identity).
   --tk-ink keeps a pale accent legible as "ink" on cream paper. */
.pub-theme-mono-ticket.public-card-inner { background: #fdfcf8; --tk-ink: color-mix(in srgb, var(--acc1,#a34a1a) 82%, #1a1206); }
.pub-theme-mono-ticket .pub-header { background: #fdfcf8; padding: 26px 24px 16px; border-bottom: 2px dashed #cfcabf; position: relative; }
.pub-theme-mono-ticket .pub-header::before { content: ''; display: block; position: absolute; top: 0; left: 0; right: 0; width: auto; height: 5px; border-radius: 0; background: var(--acc1,#a34a1a); }
.pub-theme-mono-ticket .pub-photo { display: none; }
.pub-theme-mono-ticket .pub-name { font-family: 'Space Mono', ui-monospace, monospace; font-weight: 700; color: #20242b; text-transform: uppercase; font-size: 19px; }
.pub-theme-mono-ticket .pub-role { font-family: 'Space Mono', ui-monospace, monospace; color: var(--tk-ink); font-weight: 700; text-transform: uppercase; font-size: 11px; letter-spacing: .04em; }
.pub-theme-mono-ticket .pub-intent { background: transparent; border-color: var(--tk-ink); color: var(--tk-ink); border-radius: 4px; font-family: 'Space Mono', ui-monospace, monospace; }
.pub-theme-mono-ticket .pub-body { background: #fdfcf8; }
.pub-theme-mono-ticket .pub-contact-icon { display: none; }
.pub-theme-mono-ticket .pub-contact { gap: 0; }
.pub-theme-mono-ticket .pub-contact-link { font-family: 'Space Mono', ui-monospace, monospace; font-size: 12px; color: #3a3a3a; }
.pub-theme-mono-ticket .pub-btn-primary, .pub-theme-mono-ticket .pub-btn-secondary { border-radius: 6px; font-family: 'Space Mono', ui-monospace, monospace; text-transform: uppercase; letter-spacing: .04em; }
.pub-theme-mono-ticket .pub-btn-primary { color: var(--accon,#fff); }
.pub-theme-mono-ticket .pub-btn-primary:hover { background: var(--tk-ink); }

/* Glass — translucent frosted panel over a purple/blue gradient */
.pub-theme-glass.public-card-inner { background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--acc1, #7C3AED) 75%, #fff 15%), var(--acc2, #2563EB) 65%); }
.pub-theme-glass .pub-header { background: transparent; padding-bottom: 18px; }
.pub-theme-glass .pub-header::before { display: none; }
.pub-theme-glass .pub-photo { background: rgba(255,255,255,.25); border: 1px solid rgba(255,255,255,.45); }
.pub-theme-glass .pub-name { color: #fff; }
.pub-theme-glass .pub-role { color: rgba(255,255,255,.85); }
.pub-theme-glass .pub-intent { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.4); }
.pub-theme-glass .pub-body { margin: 0 14px 14px; padding: 18px; background: rgba(255,255,255,.16); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.28); border-radius: 16px; }
.pub-theme-glass .pub-contact-icon { background: rgba(255,255,255,.18); }
.pub-theme-glass .pub-contact-link { color: #fff; }
.pub-theme-glass .pub-btn-secondary { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.4); }

/* Bold Split — narrow flat slab beside the body. The slab was a hardcoded
   #2b1f66; it now takes the accent's hue and chroma but has its lightness
   capped, so it stays a bold *flat* single-tone slab (not the Sidebar
   style's gradient) and stays dark enough for the white type even when the
   user picks something pale like cyan. First declaration is the old fixed
   colour, kept as the fallback for browsers without relative colour syntax. */
.pub-theme-bold-split.public-card-inner { display: flex; align-items: stretch; }
.pub-theme-bold-split .pub-header { width: 34%; flex-shrink: 0; background: #2b1f66; background: oklch(from var(--acc1,#7C3AED) min(l, 0.42) c h); display: flex; flex-direction: column; justify-content: flex-end; padding: 20px 14px; }
.pub-theme-bold-split .pub-header::before { display: none; }
.pub-theme-bold-split .pub-photo { width: 100%; height: auto; aspect-ratio: 1; border-radius: 12px; background: rgba(255,255,255,.12); font-size: 32px; }
.pub-theme-bold-split .pub-name { color: #fff; font-size: 17px; }
.pub-theme-bold-split .pub-role { color: rgba(255,255,255,.7); font-size: 11px; }
.pub-theme-bold-split .pub-intent { border-color: rgba(255,255,255,.45); }
.pub-theme-bold-split .pub-body { flex: 1; }
.pub-theme-bold-split .pub-btn-primary { color: var(--accon,#fff); }
.pub-theme-bold-split .pub-btn-primary:hover { background: #2b1f66; background: oklch(from var(--acc1,#7C3AED) min(l, 0.42) c h); color: #fff; }

/* Terminal — dark console, monospace, "$ whoami" prompt. The phosphor colour
   was hardcoded green (#5fd68a); it is now the user's accent. Real terminals
   ship in green/amber/blue phosphor, so an accent-tinted prompt is true to the
   look. --term-phosphor keeps the accent hue and chroma but floors its
   lightness, so even a very dark accent (e.g. navy) still glows legibly on
   the #12151c console. Each var() keeps the old green as a fallback for
   browsers without relative colour syntax. */
.pub-theme-terminal.public-card-inner { background: #12151c; --term-phosphor: oklch(from var(--acc1,#5fd68a) max(l, 0.76) c h); }
.pub-theme-terminal .pub-header { background: #12151c; padding: 22px 22px 4px; }
.pub-theme-terminal .pub-header::before { content: '$ whoami'; position: static; display: block; width: auto; height: auto; border-radius: 0; background: none; font-family: 'Space Mono', ui-monospace, monospace; font-size: 11px; color: var(--term-phosphor,#5fd68a); margin-bottom: 6px; }
.pub-theme-terminal .pub-photo { display: none; }
.pub-theme-terminal .pub-name { font-family: 'Space Mono', ui-monospace, monospace; color: #fff; font-size: 19px; }
.pub-theme-terminal .pub-role { font-family: 'Space Mono', ui-monospace, monospace; color: var(--term-phosphor,#5fd68a); font-size: 12px; }
.pub-theme-terminal .pub-intent { background: rgba(255,255,255,.06); border-color: var(--term-phosphor,#5fd68a); color: var(--term-phosphor,#5fd68a); border-radius: 4px; font-family: 'Space Mono', ui-monospace, monospace; }
.pub-theme-terminal .pub-body { background: #12151c; padding-top: 8px; }
.pub-theme-terminal .pub-contact-icon { display: none; }
.pub-theme-terminal .pub-contact-link { font-family: 'Space Mono', ui-monospace, monospace; color: #d7d9de; font-size: 12px; }
.pub-theme-terminal .pub-divider { background: #2a2f3a; }
.pub-theme-terminal .pub-btn-primary { border-radius: 6px; background: var(--term-phosphor,#5fd68a); color: #0d1a12; font-family: 'Space Mono', ui-monospace, monospace; }
.pub-theme-terminal .pub-btn-primary:hover { background: color-mix(in srgb, var(--term-phosphor,#5fd68a) 82%, #fff); }
.pub-theme-terminal .pub-btn-secondary { border-radius: 6px; background: transparent; border-color: #2a2f3a; color: #d7d9de; font-family: 'Space Mono', ui-monospace, monospace; }

/* Newsprint — newsprint paper, serif, double masthead rule. Previously all
   ink-and-paper with no accent at all. The accent now runs the masthead
   double rule and the italic byline — the two places a modern print masthead
   carries its section colour. --np-rule keeps the accent inky-rich so a pale
   pick doesn't wash out on newsprint. */
.pub-theme-newsprint.public-card-inner { background: #f7f5ee; --np-rule: color-mix(in srgb, var(--acc1,#222018) 78%, #17140e); }
.pub-theme-newsprint .pub-header { background: #f7f5ee; padding: 16px 22px 14px; border-bottom: 3px double var(--np-rule); text-align: center; }
.pub-theme-newsprint .pub-header::before { display: none; }
.pub-theme-newsprint .pub-photo { display: none; }
.pub-theme-newsprint .pub-name { font-family: Georgia, 'Times New Roman', serif; color: #17140e; text-align: left; }
.pub-theme-newsprint .pub-role { font-family: Georgia, serif; font-style: italic; color: var(--np-rule); text-align: left; }
.pub-theme-newsprint .pub-intent { background: transparent; border-color: var(--np-rule); color: var(--np-rule); font-family: Georgia, serif; }
.pub-theme-newsprint .pub-body { background: #f7f5ee; }
.pub-theme-newsprint .pub-contact-icon { display: none; }
.pub-theme-newsprint .pub-contact-link { font-family: Georgia, serif; color: #2c291f; }
.pub-theme-newsprint .pub-divider { background: #c9c4b4; }
.pub-theme-newsprint .pub-btn-primary, .pub-theme-newsprint .pub-btn-secondary { font-family: Georgia, serif; }
.pub-theme-newsprint .pub-btn-primary { color: var(--accon,#fff); }
.pub-theme-newsprint .pub-btn-primary:hover { background: var(--np-rule); color: #f7f5ee; }

/* Holographic — iridescent foil sheet with a frosted body panel. The foil was
   a fixed four-hue oklch sweep. Each stop is now blended with --holo (a
   pastel derived from the accent) so the whole sheet takes the user's hue
   while keeping the multi-hue shift that IS the holographic identity.
   Going via a pastel rather than the raw accent keeps the foil light enough
   for the dark name/role type even when the user picks a very dark accent. */
.pub-theme-holographic.public-card-inner {
  --holo: color-mix(in oklch, var(--acc1,#7C3AED) 58%, #FFFFFF);
  background: linear-gradient(120deg,
    color-mix(in oklch, var(--holo) 45%, oklch(0.75 0.18 320)),
    color-mix(in oklch, var(--holo) 45%, oklch(0.78 0.16 220)) 35%,
    color-mix(in oklch, var(--holo) 45%, oklch(0.82 0.17 150)) 65%,
    color-mix(in oklch, var(--holo) 45%, oklch(0.78 0.19 60)));
}
.pub-theme-holographic .pub-header { background: transparent; padding-bottom: 16px; }
.pub-theme-holographic .pub-header::before { display: none; }
.pub-theme-holographic .pub-photo { background: linear-gradient(135deg, var(--acc1,oklch(0.7 0.2 320)), var(--acc2,oklch(0.72 0.18 200))); color: var(--accon,#fff); }
.pub-theme-holographic .pub-name { color: oklch(0.22 0.02 285); }
.pub-theme-holographic .pub-role { color: oklch(0.4 0.02 285); }
.pub-theme-holographic .pub-intent { background: rgba(255,255,255,.5); border-color: var(--acc1,#7C3AED); color: oklch(0.25 0.02 285); }
.pub-theme-holographic .pub-body { margin: 0 14px 14px; padding: 18px; background: rgba(255,255,255,.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border-radius: 16px; border: 1px solid color-mix(in srgb, var(--acc1,#7C3AED) 30%, rgba(255,255,255,.7)); }
.pub-theme-holographic .pub-contact-link { color: oklch(0.25 0.02 285); }
.pub-theme-holographic .pub-divider { background: rgba(0,0,0,.12); }
.pub-theme-holographic .pub-btn-primary { color: var(--accon,#fff); }
.pub-theme-holographic .pub-btn-primary:hover { background: color-mix(in srgb, var(--acc1,#7C3AED) 82%, #000); }

/* Sticker Stack — collage of rotated stickers with hard offset shadows on
   kraft paper. The sticker colours were hardcoded (#e2662c photo tile,
   #b34a1c hard shadow, #e8d97a intent badge). They now derive from the
   accent, so the collage is in the user's colour while keeping the kraft
   paper, the rotation and the flat hard-shadow "die-cut sticker" identity.
   --stk-shade is the darker "shadow ply" of the same colour. */
.pub-theme-sticker-stack.public-card-inner { background: #fdf9ef; --stk-shade: color-mix(in srgb, var(--acc1,#e2662c) 64%, #000); }
.pub-theme-sticker-stack .pub-header { background: #fdf9ef; padding: 22px 22px 12px; }
.pub-theme-sticker-stack .pub-header::before { display: none; }
.pub-theme-sticker-stack .pub-photo { border-radius: 14px; background: var(--acc1,#e2662c); color: var(--accon,#fff); transform: rotate(-6deg); box-shadow: 0 4px 0 var(--stk-shade); margin-bottom: 10px; }
.pub-theme-sticker-stack .pub-name { color: #221f1a; }
.pub-theme-sticker-stack .pub-role { color: #6b665c; font-weight: 700; font-size: 12px; }
.pub-theme-sticker-stack .pub-intent { background: color-mix(in srgb, var(--acc1,#e8d97a) 22%, #fdf9ef); border-color: var(--acc1,#e8d97a); color: var(--stk-shade); border-radius: 10px; font-weight: 700; }
.pub-theme-sticker-stack .pub-body { background: #fdf9ef; }
.pub-theme-sticker-stack .pub-contact { border: 2px dashed color-mix(in srgb, var(--acc1,#d8d1bf) 34%, #d8d1bf); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; }
.pub-theme-sticker-stack .pub-contact-icon { background: transparent; }
.pub-theme-sticker-stack .pub-contact-link { font-weight: 700; color: #332f26; }
.pub-theme-sticker-stack .pub-btn-primary { border-radius: 14px; color: var(--accon,#fff); box-shadow: 0 4px 0 var(--stk-shade); }
.pub-theme-sticker-stack .pub-btn-primary:hover { background: var(--acc1,#e2662c); transform: translateY(2px); box-shadow: 0 2px 0 var(--stk-shade); }

/* ── Auth screens (rebrand: My Card visual language) ──────────────────
   Component per the approved mockup (OpenProject #185): oklch neutrals,
   Helvetica Neue body text, Poppins wordmark, 8-9px rectangle buttons —
   one auth-card shell reused across all 11 auth views. On narrow
   viewports the card chrome drops (border/radius/shadow) so the form
   reads as a native full-bleed mobile screen, matching the mockup's
   separate mobile artboards. */
.auth-wrap {
  min-height: 100vh; background: oklch(0.965 0.004 285); display: flex;
  align-items: center; justify-content: center; padding: 40px 24px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; position: relative;
}
.auth-corner-mark {
  position: absolute; top: 32px; left: 40px;
  font: 700 15px/1 'Poppins', 'Helvetica Neue', sans-serif; letter-spacing: -0.01em;
  color: oklch(0.75 0.01 285);
}
.auth-corner-mark span { color: oklch(0.7 0.1 285); }
.auth-col { width: 100%; max-width: 408px; }
.auth-box {
  background: var(--white); border: 1px solid oklch(0.92 0.008 285); border-radius: 16px;
  padding: 40px 36px 34px;
  box-shadow: 0 1px 2px oklch(0.2 0.02 285 / 0.04), 0 20px 40px -12px oklch(0.2 0.05 285 / 0.1);
}
.auth-logo { text-align: center; margin-bottom: 28px; }
.auth-logo-mark { font: 700 26px/1 'Poppins', 'Helvetica Neue', sans-serif; letter-spacing: -0.01em; color: oklch(0.2 0.015 285); }
.auth-logo-mark span { color: oklch(0.52 0.19 285); }
.auth-logo-tag { font: 400 13px/1.5 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.55 0.015 285); margin-top: 8px; }

/* Plain heading (Sign in / Create account / other form screens) */
.auth-heading { display: flex; flex-direction: column; gap: 5px; margin-bottom: 22px; }
.auth-title { font: 600 19px/1.2 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.18 0.015 285); letter-spacing: -0.01em; margin: 0; }
.auth-sub { font: 400 13px/1.5 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.55 0.015 285); margin: 0; }

/* Icon-badge heading (Forgot password / magic-link / "check your inbox" screens) */
.auth-icon-head { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-bottom: 24px; text-align: center; }
.auth-icon-badge { width: 48px; height: 48px; border-radius: 12px; background: oklch(0.52 0.19 285 / 0.1); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.auth-icon-badge svg { width: 22px; height: 22px; color: oklch(0.52 0.19 285); }

/* Inline error/expired alert with leading icon */
.auth-alert {
  display: flex; align-items: flex-start; gap: 9px;
  background: oklch(0.96 0.03 25); border: 1px solid oklch(0.85 0.08 25); border-radius: 9px;
  padding: 11px 13px; margin-bottom: 18px;
  font: 400 12.5px/1.5 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.4 0.1 25);
}
.auth-alert svg { width: 15px; height: 15px; color: oklch(0.5 0.19 25); flex-shrink: 0; margin-top: 1px; }
.auth-hint { font: 400 13px/1.5 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.55 0.015 285); margin: 0 0 14px; }

/* Fields + buttons, scoped to the auth card so the global .form-input/.btn
   system used across the rest of the app is untouched. */
.auth-box .form-field { gap: 6px; }
.auth-box .form-label { font: 500 13px/1.3 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.28 0.015 285); text-transform: none; letter-spacing: 0; }
.auth-box .form-input, .auth-box .form-select {
  height: 44px; padding: 0 14px; border: 1.5px solid oklch(0.87 0.01 285); border-radius: 9px;
  font: 400 14px/1 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.2 0.015 285); background: var(--white);
}
.auth-box .form-input::placeholder { color: oklch(0.68 0.01 285); }
.auth-box .form-input:focus, .auth-box .form-select:focus { border-color: oklch(0.52 0.19 285); box-shadow: 0 0 0 3px oklch(0.52 0.19 285 / 0.12); }
.auth-box .form-input:disabled, .auth-box .form-input[disabled] { background: oklch(0.97 0.004 285); color: oklch(0.6 0.015 285); }

.auth-box .btn { border-radius: 8px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; height: 44px; padding: 0 18px; }
.auth-box .btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.auth-box .btn-primary { background: oklch(0.52 0.19 285); font-weight: 600; font-size: 14px; box-shadow: 0 2px 8px -2px oklch(0.52 0.19 285 / 0.45); }
.auth-box .btn-primary:hover { background: oklch(0.46 0.19 285); transform: none; box-shadow: 0 2px 8px -2px oklch(0.52 0.19 285 / 0.45); }
.auth-box .btn-ghost { border: 1px solid oklch(0.9 0.008 285); background: oklch(0.98 0.004 285); color: oklch(0.32 0.015 285) !important; font-weight: 600; font-size: 13px; }
.auth-box .btn-ghost:hover { background: oklch(0.95 0.006 285); border-color: oklch(0.82 0.01 285); }

.auth-divider { display: flex; align-items: center; gap: 12px; margin: 22px 0; }
.auth-divider-line { flex: 1; height: 1px; background: oklch(0.9 0.008 285); }
.auth-divider-text { font: 400 11.5px/1 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.65 0.01 285); text-transform: uppercase; letter-spacing: .06em; }

.auth-footer { text-align: center; font: 400 13px/1.5 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.55 0.015 285); margin-top: 24px; }
.auth-footer a { color: oklch(0.52 0.19 285); font-weight: 600; }
.auth-footer a:hover { color: oklch(0.42 0.19 285); }

.auth-back { display: inline-flex; align-items: center; gap: 6px; font: 500 12.5px/1 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.52 0.19 285); margin-top: 22px; }
.auth-back:hover { color: oklch(0.42 0.19 285); }
.auth-back svg { width: 13px; height: 13px; }

.auth-copyright { text-align: center; font: 400 12px/1.5 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.65 0.01 285); margin-top: 20px; }

/* Invite screens' agency-branding override (accent top bar + optional
   logo) layers on the same shell — unchanged behaviour, restyled edges. */
.auth-brand-bar { text-align: center; margin: -1px -1px 14px; padding-top: 18px; border-top-left-radius: 15px; border-top-right-radius: 15px; }

@media (max-width: 480px) {
  .auth-wrap { background: var(--white); padding: 28px 24px 40px; }
  .auth-corner-mark { display: none; }
  .auth-col { max-width: 340px; }
  .auth-box { border: none; border-radius: 0; box-shadow: none; padding: 0; }
  .auth-box .form-input, .auth-box .form-select { height: 46px; font-size: 15px; }
  .auth-box .btn { height: 46px; font-size: 15px; }
  .auth-box .btn-ghost { font-size: 14px; }
  .auth-copyright { display: none; }
}

/* ── Mobile sticky nav ── */
.mobile-bar { display: none; }
.more-sheet { display: none; }

/* ── Responsive ── */
@media (max-width: 900px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .mobile-bar {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999;
    background: var(--white); border-top: 1px solid var(--gray);
    box-shadow: 0 -4px 20px rgba(10,15,31,.1);
    padding-bottom: env(safe-area-inset-bottom,0);
  }
  .mobile-bar, .more-sheet { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; }
  .mb-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px 4px 12px; color: var(--muted); font-size: 10px; font-weight: 600; text-decoration: none; gap: 3px; position: relative; transition: color .15s; }
  .mb-item.active { color: var(--purple); }
  .mb-icon { display: flex; align-items: center; justify-content: center; line-height: 1; }
  .mb-icon svg { width: 20px; height: 20px; }
  .mb-badge { position: absolute; top: 6px; right: calc(50% - 18px); background: var(--red); color: var(--white); font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 999px; }
  .mb-more { background: none; border: 0; cursor: pointer; font-family: inherit; }
  body { padding-bottom: 68px; }
  .content { padding: 16px; }
  .page-header { padding: 18px 16px 14px; }
  .form-grid { grid-template-columns: 1fr; }

  /* "More" overflow sheet */
  .more-sheet {
    display: none; position: fixed; inset: 0; z-index: 10000;
    background: rgba(10,15,31,.5);
  }
  .more-sheet.open { display: block; }
  .more-panel {
    position: fixed; left: 0; right: 0; bottom: 0;
    background: var(--white); border-radius: 18px 18px 0 0;
    padding: 8px 12px calc(16px + env(safe-area-inset-bottom,0));
    box-shadow: 0 -8px 30px rgba(10,15,31,.25);
    animation: moreUp .22s ease;
  }
  @keyframes moreUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
  .more-grabber { width: 38px; height: 4px; border-radius: 999px; background: var(--gray); margin: 8px auto 12px; }
  .more-link {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 12px; border-radius: 12px;
    color: var(--navy); text-decoration: none; font-weight: 600; font-size: 15px;
  }
  .more-link.active { background: rgba(124,58,237,.10); color: var(--purple); }
  .more-link:active { background: rgba(10,15,31,.05); }
  .more-ic { display: flex; align-items: center; justify-content: center; width: 22px; flex-shrink: 0; }
  .more-ic svg { width: 18px; height: 18px; }
  .more-ext { width: 11px; height: 11px; margin-left: auto; flex-shrink: 0; }
  .more-link--upgrade { color: var(--purple); }
  .more-link--logout { color: var(--red); }
}

@media (max-width: 600px) {
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat-num { font-size: 26px; }
  .pipeline-item, .contact-row { grid-template-columns: 1fr; }
  .pi-actions, .contact-actions { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; }
}

/* ── Utilities ── */
.text-muted { color: var(--muted); }
.text-purple { color: var(--purple); }
.text-sm { font-size: 13px; }
.text-xs { font-size: 11px; }
.fw-bold { font-weight: 700; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.d-flex { display: flex; }
.gap-1 { gap: 8px; }
.gap-2 { gap: 16px; }
.flex-wrap { flex-wrap: wrap; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }
.hr { border: none; border-top: 1px solid var(--gray); margin: 20px 0; }

/* ── Follow-Up Message Assistant (restyled to the My Stack rebrand's
   Helvetica Neue / oklch-neutral / 8px-radius-rectangle-button system —
   see FollowUpModal.dc.html; classes/ids kept as-is, only the look changed,
   so js/app.js's openFollowupAssistant()/closeFollowupAssistant()/faCopy()
   keep working unmodified) ─────────────────────────────────────────── */
.fa-overlay{position:fixed;inset:0;background:rgba(10,15,31,.55);display:none;align-items:center;justify-content:center;padding:20px;z-index:1000;}
.fa-overlay.open{display:flex;}
.fa-modal{background:#fff;border-radius:14px;box-shadow:0 24px 48px rgba(10,15,31,.28),0 8px 16px rgba(10,15,31,.14);width:100%;max-width:460px;padding:22px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;}
.fa-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:16px;}
.fa-title{font:600 17px/1.3 'Helvetica Neue',Helvetica,Arial,sans-serif;color:oklch(0.2 0.015 285);}
.fa-sub{color:oklch(0.55 0.015 285);font:400 12px/1.5 'Helvetica Neue',Helvetica,Arial,sans-serif;margin-top:2px;}
.fa-close{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;border:0;background:transparent;cursor:pointer;color:oklch(0.55 0.015 285);flex-shrink:0;}
.fa-close:hover{background:oklch(0.96 0.006 285);}
.fa-close svg{width:16px;height:16px;}
.fa-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;}
.fa-chip{border:1px solid oklch(0.9 0.008 285);background:oklch(0.98 0.004 285);color:oklch(0.35 0.015 285);border-radius:999px;padding:6px 14px;font:500 12px/1 'Helvetica Neue',Helvetica,Arial,sans-serif;cursor:pointer;}
.fa-chip.active{background:oklch(0.52 0.19 285);border-color:transparent;color:#fff;font-weight:600;}
.fa-textarea{width:100%;border:1px solid oklch(0.87 0.01 285);border-radius:10px;padding:12px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:13px;line-height:1.5;color:oklch(0.25 0.015 285);resize:vertical;box-sizing:border-box;margin-bottom:16px;}
.fa-textarea:focus{outline:none;border-color:oklch(0.52 0.19 285);box-shadow:0 0 0 3px oklch(0.52 0.19 285 / 0.12);}
.fa-actions{display:flex;gap:8px;flex-wrap:wrap;}
.fa-disabled{opacity:.4;pointer-events:none;}

/* ── Generic confirm dialog (privacy/sharing actions) ────── */
.mc-confirm-overlay{position:fixed;inset:0;background:rgba(10,15,31,.55);display:none;align-items:center;justify-content:center;padding:20px;z-index:1000;}
.mc-confirm-overlay.open{display:flex;}
.mc-confirm-modal{background:var(--white);border-radius:var(--radius);box-shadow:var(--shadowM);width:100%;max-width:420px;padding:22px;}
.mc-confirm-title{font-weight:700;font-size:16px;color:var(--navy);margin-bottom:8px;}
.mc-confirm-body{color:var(--muted);font-size:13px;line-height:1.5;}
.mc-confirm-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px;}
.mc-confirm-actions .mc-ghost-btn.is-danger{color:var(--red);border-color:var(--redL);}

/* ── My Card editor (task-based redesign) ────────────────── */
.mc-page { font-family: Helvetica Neue, Helvetica, Arial, sans-serif; }
.mc-header {
  background: var(--white); border-bottom: 1px solid oklch(0.93 0.008 285);
  padding: 22px 32px 18px; display: flex; justify-content: space-between;
  align-items: flex-end; gap: 24px; flex-wrap: wrap;
}
.mc-header-crumb { font: 400 12px/1 Helvetica, Arial, sans-serif; color: oklch(0.6 0.01 285); }
.mc-header-crumb span { color: oklch(0.78 0.01 285); }
.mc-header-title { margin: 6px 0 0; font: 600 25px/1.1 Helvetica, Arial, sans-serif; letter-spacing: -0.02em; color: oklch(0.2 0.015 285); }
.mc-header-sub { margin-top: 7px; font: 400 13px/1.4 Helvetica, Arial, sans-serif; color: oklch(0.52 0.015 285); max-width: 520px; }
.mc-header-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; flex-wrap: wrap; }
.mc-status { display: flex; align-items: center; gap: 7px; font: 400 12px/1 Helvetica, Arial, sans-serif; color: oklch(0.55 0.015 285); }
.mc-status-dot { width: 7px; height: 7px; border-radius: 50%; background: oklch(0.72 0.16 145); flex-shrink: 0; }
.mc-header-actions .btn { border-radius: 9px; }

.mc-content { padding: 26px 32px 120px; background: oklch(0.965 0.004 285); }
.mc-grid { display: grid; grid-template-columns: minmax(0,1fr) 336px; gap: 26px; min-width: 0; }
.mc-left { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

.mc-section {
  background: var(--white); border: 1px solid oklch(0.92 0.008 285); border-radius: 14px;
  padding: 24px 26px; display: grid; grid-template-columns: 206px minmax(0,1fr); gap: 32px;
}
.mc-section-head { display: flex; flex-direction: column; gap: 6px; }
.mc-section-title { font: 600 15px/1.2 Helvetica, Arial, sans-serif; color: oklch(0.2 0.015 285); letter-spacing: -0.01em; }
.mc-section-desc { font: 400 13px/1.5 Helvetica, Arial, sans-serif; color: oklch(0.56 0.015 285); }
.mc-section-body { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

.mc-field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mc-field { display: flex; flex-direction: column; gap: 6px; }
.mc-label { font: 500 13px/1.3 Helvetica, Arial, sans-serif; color: oklch(0.28 0.015 285); }
.mc-label .req { color: oklch(0.55 0.19 285); }
.mc-label .opt { color: oklch(0.6 0.015 285); font-weight: 400; }
.mc-hint { font: 400 12px/1.4 Helvetica, Arial, sans-serif; color: oklch(0.6 0.015 285); }
.mc-count { font: 400 12px/1.4 Helvetica, Arial, sans-serif; color: oklch(0.66 0.015 285); }

.mc-input, .mc-textarea, .mc-select {
  height: 40px; padding: 0 12px; border: 1px solid oklch(0.87 0.01 285); border-radius: 9px;
  font: 400 14px Helvetica, Arial, sans-serif; color: oklch(0.2 0.015 285); background: var(--white);
  outline: none; width: 100%; transition: border-color .15s;
}
.mc-textarea { height: auto; min-height: 70px; padding: 10px 12px; line-height: 1.5; resize: vertical; }
.mc-select { appearance: none; }
.mc-input:focus, .mc-textarea:focus, .mc-select:focus { border-color: oklch(0.52 0.19 285); }
.mc-input-prefixed { display: flex; align-items: center; height: 40px; border: 1px solid oklch(0.87 0.01 285); border-radius: 9px; background: var(--white); overflow: hidden; }
.mc-input-prefixed:focus-within { border-color: oklch(0.52 0.19 285); }
.mc-input-prefix { padding: 0 10px; font: 400 12px/1 ui-monospace, Menlo, monospace; color: oklch(0.6 0.015 285); background: oklch(0.97 0.004 285); height: 100%; display: flex; align-items: center; border-right: 1px solid oklch(0.91 0.008 285); flex-shrink: 0; }
.mc-input-prefixed input { flex: 1; min-width: 0; height: 100%; border: none; padding: 0 12px; font: 400 14px Helvetica, Arial, sans-serif; color: oklch(0.2 0.015 285); outline: none; background: transparent; }

.mc-photo-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.mc-photo-preview { width: 56px; height: 56px; border-radius: 50%; border: 1px solid oklch(0.89 0.01 285); background: var(--gray2); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; font: 700 16px Helvetica, Arial, sans-serif; color: oklch(0.5 0.015 285); flex-shrink: 0; overflow: hidden; }
.mc-photo-preview img { width: 100%; height: 100%; object-fit: cover; }

.mc-divider { border-top: 1px solid oklch(0.94 0.008 285); padding-top: 16px; margin-top: 2px; }

.mc-style-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
.mc-style-card { border: 1px solid oklch(0.89 0.01 285); border-radius: 11px; padding: 11px; display: flex; flex-direction: column; gap: 9px; cursor: pointer; background: var(--white); text-align: left; font: inherit; }
.mc-style-card:hover { border-color: oklch(0.7 0.05 285); }
.mc-style-card.active { border: 2px solid oklch(0.52 0.19 285); background: oklch(0.985 0.008 285); padding: 10px; }
.mc-style-name { font: 500 12px/1 Helvetica, Arial, sans-serif; color: oklch(0.25 0.015 285); }
.mc-style-card:not(.active) .mc-style-name { font-weight: 400; color: oklch(0.4 0.015 285); }

/* ── Card style thumbnails: illustrative mini mockups, not grey boxes ──
   One shared markup (deco slot + photo + two text bars); each style keys
   off [data-style] to rearrange/recolor it into a distinct layout hint. */
.mc-style-thumb {
  height: 56px; border-radius: 7px; background: #fff; border: 1px solid oklch(0.9 0.01 285);
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  justify-content: flex-end; padding: 8px; gap: 4px;
}
.mc-thumb-deco { display: none; }
.mc-thumb-photo { display: none; width: 14px; height: 14px; border-radius: 50%; background: oklch(0.7 0.06 285); flex-shrink: 0; }
.mc-thumb-name { height: 6px; width: 60%; border-radius: 2px; background: oklch(0.35 0.015 285); }
.mc-thumb-sub { height: 4px; width: 38%; border-radius: 2px; background: oklch(0.8 0.01 285); }

.mc-style-card[data-style="classic"] .mc-style-thumb { background: oklch(0.22 0.02 285); border-color: oklch(0.22 0.02 285); }
.mc-style-card[data-style="classic"] .mc-thumb-photo { display: block; position: absolute; top: 8px; left: 8px; background: oklch(0.55 0.19 285); }
.mc-style-card[data-style="classic"] .mc-thumb-name { background: oklch(0.85 0.01 285); }
.mc-style-card[data-style="classic"] .mc-thumb-sub { background: oklch(0.5 0.02 285); }

.mc-style-card[data-style="cover"] .mc-style-thumb { padding-top: 0; background: linear-gradient(180deg, oklch(0.75 0.08 285) 0%, oklch(0.75 0.08 285) 52%, #fff 52%); }
.mc-style-card[data-style="cover"] .mc-thumb-photo { display: block; position: absolute; top: 20px; left: 8px; width: 16px; height: 16px; background: #fff; box-shadow: 0 0 0 1px oklch(0.75 0.08 285); }
.mc-style-card[data-style="cover"] .mc-thumb-name, .mc-style-card[data-style="cover"] .mc-thumb-sub { margin-left: 20px; }

.mc-style-card[data-style="duotone"] .mc-style-thumb { background: linear-gradient(135deg, oklch(0.5 0.18 285), oklch(0.66 0.15 250)); align-items: center; justify-content: center; gap: 5px; border-color: transparent; }
.mc-style-card[data-style="duotone"] .mc-thumb-photo { display: block; width: 18px; height: 18px; background: rgba(255,255,255,.85); }
.mc-style-card[data-style="duotone"] .mc-thumb-name { background: rgba(255,255,255,.9); width: 50%; }
.mc-style-card[data-style="duotone"] .mc-thumb-sub { background: rgba(255,255,255,.55); width: 34%; }

.mc-style-card[data-style="minimal"] .mc-style-thumb { padding-left: 14px; }
.mc-style-card[data-style="minimal"] .mc-thumb-deco { display: block; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: oklch(0.52 0.19 285); }

.mc-style-card[data-style="sidebar"] .mc-style-thumb { flex-direction: row; align-items: center; justify-content: flex-start; padding: 8px 8px 8px 22px; gap: 6px; }
.mc-style-card[data-style="sidebar"] .mc-thumb-deco { display: block; position: absolute; left: 0; top: 0; bottom: 0; width: 16px; background: oklch(0.52 0.19 285); border-radius: 3px 0 0 3px; }
.mc-style-card[data-style="sidebar"] .mc-style-thumb { flex-wrap: wrap; }
.mc-style-card[data-style="sidebar"] .mc-thumb-name, .mc-style-card[data-style="sidebar"] .mc-thumb-sub { width: 100%; }

.mc-style-card[data-style="spotlight"] .mc-style-thumb { align-items: center; justify-content: center; gap: 5px; background: oklch(0.94 0.03 285); border-color: oklch(0.9 0.02 285); }
.mc-style-card[data-style="spotlight"] .mc-thumb-photo { display: block; width: 20px; height: 20px; background: oklch(0.7 0.06 285); }
.mc-style-card[data-style="spotlight"] .mc-thumb-name, .mc-style-card[data-style="spotlight"] .mc-thumb-sub { width: 40%; background: oklch(0.72 0.04 285); }
.mc-style-card[data-style="spotlight"] .mc-thumb-name { height: 4px; }

/* editorial uses the shared base styling as-is: white, bars bottom-left, no photo. */

.mc-style-card[data-style="mono-ticket"] .mc-style-thumb { background: #fdfcf8; border-bottom: 2px dashed #cfcabf; padding-bottom: 6px; }
.mc-style-card[data-style="mono-ticket"] .mc-thumb-name { background: #20242b; font-family: 'Space Mono', ui-monospace, monospace; }
.mc-style-card[data-style="mono-ticket"] .mc-thumb-sub { background: #a34a1a; }

.mc-style-card[data-style="glass"] .mc-style-thumb { background: radial-gradient(circle at 30% 20%, #7c6ce0, #5b8fd6 65%); align-items: center; justify-content: center; gap: 5px; border-color: transparent; }
.mc-style-card[data-style="glass"] .mc-thumb-photo { display: block; width: 18px; height: 18px; border-radius: 50%; background: rgba(255,255,255,.35); }
.mc-style-card[data-style="glass"] .mc-thumb-name { background: rgba(255,255,255,.9); width: 50%; }
.mc-style-card[data-style="glass"] .mc-thumb-sub { background: rgba(255,255,255,.6); width: 34%; }

.mc-style-card[data-style="bold-split"] .mc-style-thumb { flex-direction: row; align-items: flex-end; justify-content: flex-start; padding: 8px 8px 8px 30px; gap: 6px; }
.mc-style-card[data-style="bold-split"] .mc-thumb-deco { display: block; position: absolute; left: 0; top: 0; bottom: 0; width: 24px; background: #2b1f66; }

.mc-style-card[data-style="terminal"] .mc-style-thumb { background: #12151c; border-color: #12151c; }
.mc-style-card[data-style="terminal"] .mc-thumb-name { background: #fff; font-family: 'Space Mono', ui-monospace, monospace; }
.mc-style-card[data-style="terminal"] .mc-thumb-sub { background: #5fd68a; }

.mc-style-card[data-style="newsprint"] .mc-style-thumb { background: #f7f5ee; border-bottom: 3px double #222018; padding-bottom: 6px; }
.mc-style-card[data-style="newsprint"] .mc-thumb-name { background: #17140e; font-family: Georgia, serif; }
.mc-style-card[data-style="newsprint"] .mc-thumb-sub { background: #5a5648; }

.mc-style-card[data-style="holographic"] .mc-style-thumb { background: linear-gradient(120deg, oklch(0.75 0.18 320), oklch(0.78 0.16 220) 35%, oklch(0.82 0.17 150) 65%, oklch(0.78 0.19 60)); align-items: center; justify-content: center; gap: 5px; border-color: transparent; }
.mc-style-card[data-style="holographic"] .mc-thumb-photo { display: block; width: 18px; height: 18px; border-radius: 6px; background: rgba(255,255,255,.6); }
.mc-style-card[data-style="holographic"] .mc-thumb-name { background: rgba(255,255,255,.85); width: 50%; }
.mc-style-card[data-style="holographic"] .mc-thumb-sub { background: rgba(255,255,255,.55); width: 34%; }

.mc-style-card[data-style="sticker-stack"] .mc-style-thumb { background: #fdf9ef; align-items: flex-start; justify-content: flex-end; padding: 8px; }
.mc-style-card[data-style="sticker-stack"] .mc-thumb-photo { display: block; width: 16px; height: 16px; border-radius: 5px; background: #e2662c; transform: rotate(-8deg); }
.mc-style-card[data-style="sticker-stack"] .mc-thumb-name { background: #221f1a; }
.mc-style-card[data-style="sticker-stack"] .mc-thumb-sub { background: #e2662c; }

.mc-accent-swatches { display: flex; gap: 7px; flex-wrap: wrap; }
.mc-accent-swatch { width: 28px; height: 28px; border-radius: 8px; border: none; cursor: pointer; padding: 0; }
.mc-accent-swatch.active { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--swatch-color, oklch(0.52 0.19 285)); }
.mc-accent-hex { height: 28px; padding: 0 10px; border: 1px solid oklch(0.87 0.01 285); border-radius: 8px; display: flex; align-items: center; font: 400 12px/1 ui-monospace, Menlo, monospace; color: oklch(0.4 0.015 285); }
.mc-accent-picker { width: 28px; height: 28px; padding: 0; border: 1px solid oklch(0.87 0.01 285); border-radius: 8px; cursor: pointer; background: var(--white); }

.mc-dropzone { height: 40px; border: 1px dashed oklch(0.85 0.01 285); border-radius: 9px; display: flex; align-items: center; justify-content: center; gap: 6px; font: 400 12px/1 Helvetica, Arial, sans-serif; color: oklch(0.55 0.015 285); background: oklch(0.985 0.004 285); }
.mc-dropzone a, .mc-dropzone .mc-browse { color: oklch(0.52 0.19 285); font-weight: 500; }

.mc-privacy-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.mc-privacy-opt { border: 1px solid oklch(0.9 0.01 285); border-radius: 11px; padding: 14px; display: flex; flex-direction: column; gap: 6px; cursor: pointer; }
.mc-privacy-opt.active { border: 2px solid oklch(0.52 0.19 285); background: oklch(0.985 0.008 285); padding: 13px; }
.mc-privacy-head { display: flex; align-items: center; gap: 8px; }
.mc-privacy-radio { width: 15px; height: 15px; border-radius: 50%; border: 1px solid oklch(0.8 0.01 285); background: #fff; flex-shrink: 0; }
.mc-privacy-opt.active .mc-privacy-radio { border: 4px solid oklch(0.52 0.19 285); }
.mc-privacy-label { font: 500 13px/1 Helvetica, Arial, sans-serif; color: oklch(0.3 0.015 285); }
.mc-privacy-opt.active .mc-privacy-label { font-weight: 600; color: oklch(0.22 0.015 285); }
.mc-privacy-desc { font: 400 12px/1.5 Helvetica, Arial, sans-serif; color: oklch(0.5 0.015 285); }

.mc-ghost-btn { height: 32px; padding: 0 12px; border: 1px solid oklch(0.87 0.01 285); border-radius: 8px; display: inline-flex; align-items: center; font: 500 12px/1 Helvetica, Arial, sans-serif; color: oklch(0.3 0.015 285); background: var(--white); cursor: pointer; white-space: nowrap; }
.mc-ghost-btn:hover { background: oklch(0.97 0.004 285); }
.mc-ghost-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── Social links manager ── */
.mc-social-chip { height: 30px; padding: 0 11px; border-radius: 15px; background: oklch(0.96 0.006 285); border: 1px solid oklch(0.91 0.008 285); display: inline-flex; align-items: center; font: 400 12px/1 Helvetica, Arial, sans-serif; color: oklch(0.3 0.015 285); }
.mc-social-row { display: flex; gap: 8px; align-items: center; }
.mc-social-row .mc-input { height: 36px; }
.mc-social-row .mc-social-platform-select { max-width: 140px; flex-shrink: 0; }
.mc-social-row .mc-social-custom { max-width: 140px; flex-shrink: 0; }
.mc-social-remove { width: 32px; height: 32px; border-radius: 8px; border: 1px solid oklch(0.87 0.01 285); background: var(--white); color: oklch(0.5 0.015 285); cursor: pointer; flex-shrink: 0; font-size: 16px; line-height: 1; }
.mc-social-remove:hover { background: oklch(0.97 0.004 285); color: var(--red); }

/* ── Preview rail ──
   .mc-rail is the grid item and stretches to match .mc-left's full row
   height (CSS Grid's default align-items: stretch — deliberately NOT
   overridden to "start", which shrinks the item's own box to its content
   height in Safari/WebKit and leaves position:sticky with no room to move).
   The actual sticky behaviour lives on the inner .mc-rail-sticky wrapper,
   which then has the full stretched height as its containing block. */
.mc-rail { min-width: 0; }
.mc-rail-sticky { position: sticky; top: 22px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.mc-rail-head { display: flex; align-items: center; justify-content: space-between; }
.mc-rail-title { font: 600 13px/1 Helvetica, Arial, sans-serif; color: oklch(0.3 0.015 285); }
.mc-preview-toggle { display: flex; background: oklch(0.94 0.006 285); border-radius: 8px; padding: 3px; gap: 2px; }
.mc-preview-toggle button {
  height: 24px; padding: 0 10px; border-radius: 6px; border: none; background: transparent;
  font: 400 11px/1 Helvetica, Arial, sans-serif; color: oklch(0.5 0.015 285); cursor: pointer;
}
.mc-preview-toggle button.active { background: #fff; color: oklch(0.25 0.015 285); font-weight: 500; box-shadow: 0 1px 2px oklch(0.4 0.02 285 / 0.15); }
.mc-phone-frame { border-radius: 26px; background: oklch(0.22 0.02 285); padding: 9px; box-shadow: 0 18px 40px -22px oklch(0.4 0.05 285 / 0.5); transition: background .15s, padding .15s, box-shadow .15s; }
.mc-phone-frame.is-flat { background: transparent; padding: 0; box-shadow: none; }
.mc-phone-screen { border-radius: 18px; background: var(--white); overflow: hidden; }
.mc-phone-frame.is-flat .mc-phone-screen { border-radius: 14px; border: 1px solid oklch(0.92 0.008 285); }
.mc-phone-notch { height: 28px; background: oklch(0.98 0.004 285); display: flex; align-items: center; justify-content: center; }
.mc-phone-notch span { width: 52px; height: 4px; border-radius: 2px; background: oklch(0.88 0.01 285); }
.mc-phone-frame.is-flat .mc-phone-notch { display: none; }
.mc-phone-frame .public-card-inner { border: none; border-radius: 0; box-shadow: none; }
.mc-share-box { background: var(--white); border: 1px solid oklch(0.92 0.008 285); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.mc-share-title { font: 600 12px/1 Helvetica, Arial, sans-serif; color: oklch(0.3 0.015 285); }
.mc-qr-box { background: var(--white); border: 1px solid oklch(0.92 0.008 285); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.mc-qr-preview { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.mc-qr-preview img { width: 120px; height: 120px; border-radius: 8px; cursor: zoom-in; }

/* ── Sticky save bar ── */
.mc-savebar {
  position: sticky; bottom: 0; z-index: 40;
  background: oklch(1 0 0 / 0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid oklch(0.91 0.008 285); padding: 14px 32px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  margin: 0 -32px; opacity: 0; transform: translateY(6px); pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
}
.mc-savebar.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.mc-savebar-status { display: flex; align-items: center; gap: 8px; font: 400 13px/1.3 Helvetica, Arial, sans-serif; color: oklch(0.5 0.015 285); }
.mc-savebar-dot { width: 7px; height: 7px; border-radius: 50%; background: oklch(0.72 0.17 75); flex-shrink: 0; }
.mc-savebar-actions { display: flex; align-items: center; gap: 10px; }
.mc-savebar-discard { height: 38px; padding: 0 15px; border-radius: 9px; border: none; background: transparent; display: flex; align-items: center; font: 500 13px/1 Helvetica, Arial, sans-serif; color: oklch(0.42 0.015 285); cursor: pointer; }
.mc-savebar-discard:hover { background: oklch(0.96 0.006 285); }
.mc-savebar-save { height: 38px; padding: 0 20px; border-radius: 9px; border: none; background: oklch(0.52 0.19 285); display: flex; align-items: center; font: 600 13px/1 Helvetica, Arial, sans-serif; color: #fff; box-shadow: 0 2px 8px -2px oklch(0.52 0.19 285 / 0.6); cursor: pointer; }
.mc-savebar-save:hover { background: oklch(0.46 0.19 285); }

@media (max-width: 1440px) {
  .mc-section { grid-template-columns: minmax(0,1fr); gap: 14px; }
  .mc-grid { grid-template-columns: minmax(0,1fr) 300px; }
}
@media (max-width: 1100px) {
  .mc-grid { grid-template-columns: minmax(0,1fr); }
  .mc-rail-sticky { position: static; }
  .mc-field-pair { grid-template-columns: minmax(0,1fr); }
  .mc-style-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .mc-privacy-grid { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 900px) {
  .mc-savebar { bottom: 68px; }
}
@media (max-width: 640px) {
  .mc-header { padding: 16px 18px 14px; }
  .mc-content { padding: 18px 18px 120px; }
  .mc-section { padding: 18px 16px; gap: 16px; }
  .mc-style-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .mc-savebar { padding: 12px 18px; margin: 0 -18px; }
  .mc-field-pair { grid-template-columns: minmax(0,1fr); }
}

/* ── Dashboard (task-based redesign) ───────────────────────
   Scoped "db-" classes, same convention as the My Card editor's "mc-"
   classes above — kept separate from the shared .btn/.panel/.stat classes
   still used by other pages, so this pass doesn't reskin the whole app. */
.db-page { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; }

.db-header {
  background: var(--white); padding: 22px 32px 18px; border-bottom: 1px solid oklch(0.92 0.008 285);
  display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap;
}
.db-header-eyebrow { font: 400 12px/1 Helvetica, Arial, sans-serif; color: oklch(0.6 0.01 285); margin-bottom: 7px; }
.db-header-title { font: 600 25px/1.15 Helvetica, Arial, sans-serif; letter-spacing: -0.02em; color: oklch(0.2 0.015 285); }
.db-header-sub { font: 400 13px/1.5 Helvetica, Arial, sans-serif; color: oklch(0.5 0.015 285); margin-top: 5px; }
.db-streak-pill { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 3px 10px 3px 8px; border-radius: 999px; background: oklch(0.6 0.17 75 / 0.12); color: oklch(0.5 0.17 75); font: 600 14px/1 Helvetica, Arial, sans-serif; vertical-align: middle; }
.db-header-sub strong { color: oklch(0.55 0.22 25); font-weight: 600; }
.db-header-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; flex-shrink: 0; }

/* Buttons: 8px-radius rectangles (not pills) — matches the .mc-ghost-btn /
   .mc-savebar-save precedent from the My Card editor. */
.db-btn {
  border: none; cursor: pointer; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  display: inline-flex; align-items: center; gap: 7px; border-radius: 8px;
  transition: background .12s ease, box-shadow .12s ease, transform .12s ease;
  text-decoration: none; white-space: nowrap;
}
.db-btn:hover { transform: translateY(-1px); }
.db-icon { width: 16px; height: 16px; flex-shrink: 0; }

.db-btn-primary { padding: 9px 16px 9px 14px; background: oklch(0.52 0.19 285); color: #fff; font: 600 13px/1 Helvetica, Arial, sans-serif; box-shadow: 0 2px 8px -2px oklch(0.52 0.19 285 / 0.5); }
.db-btn-primary:hover { background: oklch(0.46 0.19 285); }
.db-btn-icon { width: 36px; height: 36px; justify-content: center; background: oklch(0.98 0.004 285); color: oklch(0.35 0.015 285); border: 1px solid oklch(0.92 0.008 285); position: relative; }
.db-btn-icon:hover { background: oklch(0.96 0.006 285); }
.db-btn-icon.is-copied { background: oklch(0.94 0.09 155); border-color: oklch(0.75 0.13 155); color: oklch(0.4 0.13 155); }
.db-copy-tip {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(2px);
  background: oklch(0.2 0.02 285); color: #fff; font: 600 11px/1 Helvetica, Arial, sans-serif;
  padding: 5px 9px; border-radius: 6px; white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity .12s ease, transform .12s ease;
}
.db-copy-tip::after {
  content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: oklch(0.2 0.02 285);
}
.is-copied .db-copy-tip { opacity: 1; transform: translateX(-50%) translateY(0); }
.db-btn-ghost { padding: 6px 13px; background: oklch(0.98 0.004 285); color: oklch(0.3 0.015 285); border: 1px solid oklch(0.92 0.008 285); font: 600 12px/1 Helvetica, Arial, sans-serif; }
.db-btn-ghost:hover { background: oklch(0.96 0.006 285); }
.db-btn-cta { padding: 8px 16px; background: oklch(0.52 0.19 285); color: #fff; font: 600 12px/1 Helvetica, Arial, sans-serif; flex-shrink: 0; }
.db-btn-cta:hover { background: oklch(0.46 0.19 285); }
.db-btn-green { padding: 7px 13px; background: oklch(0.55 0.16 150); color: #fff; font: 600 12px/1 Helvetica, Arial, sans-serif; }
.db-btn-green:hover { background: oklch(0.48 0.16 150); }
.db-btn-outline { padding: 7px 13px; background: oklch(0.98 0.004 285); color: oklch(0.3 0.015 285); border: 1px solid oklch(0.92 0.008 285); font: 600 12px/1 Helvetica, Arial, sans-serif; }
.db-btn-outline:hover { background: oklch(0.96 0.006 285); }

.db-content { padding: 26px 32px 60px; }

.db-nudge {
  background: var(--white); border: 1px solid oklch(0.92 0.008 285); border-left: 3px solid oklch(0.52 0.19 285);
  border-radius: 14px; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 16px;
}
.db-nudge.is-limit { border-left-color: oklch(0.55 0.22 25); }
.db-nudge-title { display: flex; align-items: center; gap: 7px; font: 600 13px/1 Helvetica, Arial, sans-serif; color: oklch(0.22 0.015 285); }
.db-nudge-title svg { width: 14px; height: 14px; color: oklch(0.52 0.19 285); flex-shrink: 0; }
.db-nudge.is-limit .db-nudge-title svg { color: oklch(0.55 0.22 25); }
.db-nudge-sub { font: 400 12px/1.5 Helvetica, Arial, sans-serif; color: oklch(0.5 0.015 285); margin-top: 3px; }

.db-stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin-bottom: 16px; }
.db-stat { background: var(--white); border: 1px solid oklch(0.92 0.008 285); border-radius: 14px; padding: 20px 22px; }
.db-stat-icon { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.db-stat-icon svg { width: 17px; height: 17px; }
.db-stat-num { font: 600 30px/1 Helvetica, Arial, sans-serif; letter-spacing: -0.01em; color: oklch(0.2 0.015 285); display: flex; align-items: baseline; gap: 6px; }
.db-stat-num small { font: 500 12px/1 Helvetica, Arial, sans-serif; }
.db-stat-label { font: 500 12px/1.4 Helvetica, Arial, sans-serif; color: oklch(0.55 0.015 285); margin-top: 5px; }
.db-stat-sub { font: 400 11px/1.4 Helvetica, Arial, sans-serif; color: oklch(0.6 0.015 285); margin-top: 2px; }
.db-stat.is-purple .db-stat-icon { background: oklch(0.52 0.19 285 / 0.1); color: oklch(0.52 0.19 285); }
.db-stat.is-red .db-stat-icon    { background: oklch(0.6 0.22 25 / 0.1);  color: oklch(0.6 0.22 25); }
.db-stat.is-red .db-stat-num, .db-stat.is-red .db-stat-num small { color: oklch(0.55 0.22 25); }
.db-stat.is-green .db-stat-icon  { background: oklch(0.7 0.16 150 / 0.12); color: oklch(0.55 0.16 150); }
.db-stat.is-blue .db-stat-icon   { background: oklch(0.55 0.18 255 / 0.1); color: oklch(0.5 0.18 255); }

.db-panel { background: var(--white); border: 1px solid oklch(0.92 0.008 285); border-radius: 14px; padding: 22px; }
.db-panel + .db-panel { margin-top: 16px; }
.db-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; flex-wrap: wrap; gap: 10px; }
.db-panel-heading { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.db-panel-title { font: 600 15px/1 Helvetica, Arial, sans-serif; color: oklch(0.22 0.015 285); }
.db-panel-meta { font: 400 12px/1 Helvetica, Arial, sans-serif; color: oklch(0.55 0.015 285); }

.db-empty { text-align: center; padding: 48px 20px; color: oklch(0.5 0.015 285); }
.db-empty svg { width: 40px; height: 40px; color: oklch(0.55 0.16 150); margin-bottom: 14px; }
.db-empty p { font: 400 14px/1.5 Helvetica, Arial, sans-serif; }

.db-pipeline-item {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid oklch(0.92 0.008 285);
  border-radius: 11px; margin-bottom: 8px; flex-wrap: wrap; transition: box-shadow .15s;
}
.db-pipeline-item:last-child { margin-bottom: 0; }
.db-pipeline-item:hover { box-shadow: var(--shadow); }
.db-pipeline-item.is-overdue { border-color: oklch(0.85 0.09 25 / 0.5); background: oklch(0.98 0.02 25); }
.db-pipeline-item.is-soon    { border-color: oklch(0.87 0.08 75 / 0.5); background: oklch(0.98 0.02 75); }

.db-avatar { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 600 13px/1 Helvetica, Arial, sans-serif; flex-shrink: 0; }

.db-pi-body { flex: 1 1 160px; min-width: 0; }
.db-pi-name { display: block; font: 600 14px/1.3 Helvetica, Arial, sans-serif; color: oklch(0.2 0.015 285); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-pi-name:hover { color: oklch(0.52 0.19 285); }
.db-pi-nudge { font: 500 11px/1.4 Helvetica, Arial, sans-serif; color: oklch(0.55 0.17 75); margin-top: 4px; }
.db-pi-meta { font: 400 12px/1.5 Helvetica, Arial, sans-serif; color: oklch(0.55 0.015 285); display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.db-pi-meta svg { width: 11px; height: 11px; color: oklch(0.6 0.015 285); flex-shrink: 0; }
.db-pi-tag { display: inline-block; margin-top: 5px; margin-right: 4px; font: 600 11px/1 Helvetica, Arial, sans-serif; color: oklch(0.52 0.19 285); background: oklch(0.52 0.19 285 / 0.1); padding: 2px 9px; border-radius: 999px; }

.db-pi-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.db-pi-actions form { display: inline-flex; }

/* Inline reschedule date picker (OpenProject #92) — sits alongside the
   fixed-offset snooze buttons in .db-pi-actions. */
.db-pi-reschedule { align-items: center; gap: 6px; }
.db-pi-date-input {
  width: 128px; padding: 6px 8px; border: 1px solid oklch(0.92 0.008 285); border-radius: 9px;
  background: var(--white); color: oklch(0.3 0.015 285); font: 500 12px/1 Helvetica, Arial, sans-serif;
}
.db-pi-date-input:focus { outline: 2px solid oklch(0.52 0.19 285 / 0.4); outline-offset: 1px; }

.db-badge { font: 600 11px/1 Helvetica, Arial, sans-serif; padding: 4px 10px; border-radius: 999px; white-space: nowrap; flex-shrink: 0; }
.db-badge.is-overdue  { color: oklch(0.55 0.22 25); background: oklch(0.6 0.22 25 / 0.1); }
.db-badge.is-soon     { color: oklch(0.55 0.17 75); background: oklch(0.6 0.17 75 / 0.12); }
.db-badge.is-upcoming { color: oklch(0.5 0.015 285); background: oklch(0.96 0.004 285); }
/* Added for My Stack's completed-follow-up state (only reachable via the
   Done tab's join — see WalletController::index()); additive, no other
   page uses this modifier. */
.db-badge.is-done     { display: inline-flex; align-items: center; gap: 5px; color: oklch(0.55 0.16 150); background: oklch(0.7 0.16 150 / 0.12); }
.db-badge.is-done svg { width: 11px; height: 11px; }

.db-analytics-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin-bottom: 22px; }
.db-analytics-cell { background: oklch(0.975 0.004 285); border-radius: 11px; padding: 16px; text-align: center; }
.db-analytics-num { font: 600 24px/1 Helvetica, Arial, sans-serif; }
.db-analytics-label { font: 500 11px/1.4 Helvetica, Arial, sans-serif; color: oklch(0.55 0.015 285); margin-top: 3px; }

.db-bar-heading { font: 700 11px/1 Helvetica, Arial, sans-serif; text-transform: uppercase; letter-spacing: .05em; color: oklch(0.55 0.015 285); margin-bottom: 12px; }
.db-bar-row { display: flex; align-items: center; gap: 12px; margin-bottom: 11px; }
.db-bar-row:last-child { margin-bottom: 0; }
.db-bar-label { width: 76px; flex-shrink: 0; display: flex; align-items: center; gap: 6px; font: 400 12px/1 Helvetica, Arial, sans-serif; color: oklch(0.5 0.015 285); }
.db-bar-label svg { width: 13px; height: 13px; flex-shrink: 0; }
.db-bar-track { flex: 1; height: 6px; background: oklch(0.93 0.008 285); border-radius: 999px; overflow: hidden; }
.db-bar-fill { height: 100%; background: oklch(0.52 0.19 285); border-radius: 999px; transition: width .4s ease; }
.db-bar-count { font: 600 12px/1 Helvetica, Arial, sans-serif; color: oklch(0.3 0.015 285); width: 26px; text-align: right; flex-shrink: 0; }

/* ── Billing confirmation pages (success/cancel) rebrand — reuses
   .db-page/.db-content/.db-btn from the Dashboard rebrand; adds just the
   centered confirmation-card treatment for these low-traffic, seen-once
   screens. */
.bc-content { min-height: 70vh; display: flex; align-items: center; justify-content: center; }
.bc-card { background: var(--white); border: 1px solid oklch(0.92 0.008 285); border-radius: 18px; padding: 44px 40px 40px; max-width: 440px; width: 100%; text-align: center; margin: 0 auto; }
.bc-icon { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 22px; }
.bc-icon svg { width: 30px; height: 30px; }
.bc-icon.is-success { background: oklch(0.7 0.16 150 / 0.14); color: oklch(0.55 0.16 150); }
.bc-icon.is-neutral  { background: oklch(0.52 0.19 285 / 0.1); color: oklch(0.52 0.19 285); }
.bc-icon.is-neutral svg { width: 28px; height: 28px; }
.bc-title { font: 600 23px/1.25 Helvetica, Arial, sans-serif; letter-spacing: -0.02em; color: oklch(0.2 0.015 285); margin-bottom: 10px; }
.bc-sub { font: 400 13.5px/1.6 Helvetica, Arial, sans-serif; color: oklch(0.5 0.015 285); max-width: 340px; margin: 0 auto 28px; }
.bc-actions { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }

@media (max-width: 900px) {
  .db-header { padding: 18px 16px 14px; }
  .db-content { padding: 16px 16px 90px; }
  .db-stats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .db-stat { padding: 14px 16px; }
  .db-stat-icon { display: none; }
  .db-stat-num { font-size: 24px; }
  .db-panel { padding: 16px; }

  .bc-content { min-height: 0; }
  .bc-card { padding: 32px 22px 28px; border-radius: 16px; }
  .bc-title { font-size: 19px; }
  .bc-actions { flex-direction: column; }
  .bc-actions .db-btn { width: 100%; justify-content: center; }

  /* Pipeline item: same markup as desktop, reflowed — avatar/name/badge stay
     on one line (job title + event + tags drop to save space), the action
     buttons wrap onto their own full-width row below, each taking 50%. */
  .db-pipeline-item { padding: 12px; gap: 10px; }
  .db-avatar { width: 34px; height: 34px; font-size: 12px; }
  .db-pi-title, .db-pi-sep, .db-pi-event, .db-pi-tag { display: none; }
  .db-pi-actions { flex-basis: 100%; margin-top: 10px; }
  .db-pi-actions form { flex: 1; }
  .db-pi-actions .db-btn { width: 100%; justify-content: center; }

  /* Follow-ups page: unlike the dashboard's condensed pipeline widget, this
     page IS the full list, so job title/event/tags stay visible on mobile
     (matches the approved follow-ups mockup) — scoped to .fup-page only so
     the dashboard's compact treatment is untouched. */
  .fup-page .db-pi-title, .fup-page .db-pi-sep { display: inline; }
  .fup-page .db-pi-event { display: flex; }
  .fup-page .db-pi-tag { display: inline-block; }
}

/* Follow-ups page tabs — the shared "db-" system has no tab component yet
   (dashboard has no tabs), so this adds one following the same conventions:
   8px-radius rectangle buttons, oklch neutrals, purple active state. */
.fup-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.fup-tab {
  padding: 8px 16px; border-radius: 8px; border: 1px solid oklch(0.92 0.008 285);
  background: oklch(0.98 0.004 285); color: oklch(0.35 0.015 285);
  font: 600 13px/1 'Helvetica Neue', Helvetica, Arial, sans-serif;
  cursor: pointer; transition: background .12s ease;
}
.fup-tab:hover { background: oklch(0.96 0.006 285); }
.fup-tab.is-active { background: oklch(0.52 0.19 285); color: #fff; border-color: transparent; }

/* Plain note for the Completed tab's 50-row server-side cap — a real
   pagination fix is a separate ticket, this just avoids implying the count
   is the full all-time history. */
.fup-cap-note {
  font: 400 12px/1.5 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: oklch(0.55 0.015 285); text-align: center; padding: 4px 0 16px;
}

/* ═══════════════════════════════════════════════════════════════════════
   My Stack rebrand (wallet/index.php) — same "db-" system as Dashboard /
   Follow-ups (Helvetica Neue, oklch neutrals, 14px card radius, 8px-radius
   rectangle buttons; pills reserved for status badges/tags). Scoped "ms-"
   classes are used only by this page; nothing here touches the legacy
   .contact-row/.search-bar/.filter-select/.tab-row/.bulk-bar rules above,
   which wallet/detail.php still relies on. See Main.dc.html / Mobile.dc.html.
   ═══════════════════════════════════════════════════════════════════════ */

/* Search + consolidated filter tabs (replaces the old dropdown + tab-strip
   duplication with one mechanism, per the earlier UX analysis). */
.ms-search { position: relative; margin-bottom: 14px; }
.ms-search svg.ms-search-icon {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: oklch(0.6 0.015 285); pointer-events: none;
}
.ms-search input {
  width: 100%; padding: 10px 38px 10px 38px; border-radius: 8px; box-sizing: border-box;
  border: 1px solid oklch(0.9 0.008 285); font: 400 13px/1 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: oklch(0.22 0.015 285); background: oklch(0.99 0.002 285);
}
.ms-search input:focus { outline: none; border-color: oklch(0.52 0.19 285); box-shadow: 0 0 0 3px oklch(0.52 0.19 285 / 0.12); }
.ms-search-clear {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
  border: none; background: transparent; color: oklch(0.55 0.015 285); cursor: pointer; border-radius: 6px;
}
.ms-search-clear:hover { background: oklch(0.94 0.006 285); }
.ms-search-clear svg { width: 13px; height: 13px; }

.ms-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.ms-tab {
  padding: 8px 16px; border-radius: 8px; border: 1px solid oklch(0.92 0.008 285);
  background: oklch(0.98 0.004 285); color: oklch(0.35 0.015 285);
  font: 600 13px/1 'Helvetica Neue', Helvetica, Arial, sans-serif;
  cursor: pointer; text-decoration: none; display: inline-flex; align-items: center;
  transition: background .12s ease;
}
.ms-tab:hover { background: oklch(0.96 0.006 285); }
.ms-tab.is-active { background: oklch(0.52 0.19 285); color: #fff; border-color: transparent; }
.ms-tab.is-overdue:not(.is-active) { color: oklch(0.55 0.22 25); }

/* Quick-filter collection chips (#102) — --chip-c defaults to the same
   purple every other unthemed collection affordance (banner border, tag
   pills) falls back to, so a collection with no colour set still reads as
   "chip-shaped", not just plain text. */
.ms-collection-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.ms-chip {
  --chip-c: oklch(0.52 0.19 285);
  display: inline-flex; align-items: center; gap: 4px; padding: 6px 13px; border-radius: 999px;
  font: 600 12px/1 'Helvetica Neue', Helvetica, Arial, sans-serif; text-decoration: none;
  background: oklch(0.98 0.004 285); color: oklch(0.3 0.015 285); border: 1px solid oklch(0.92 0.008 285);
}
.ms-chip:hover { border-color: var(--chip-c); color: var(--chip-c); }
.ms-chip.is-active { background: var(--chip-c); border-color: var(--chip-c); color: #fff; }

/* Active-collection banner */
.ms-collection-banner { display: flex; align-items: center; gap: 12px; border-left: 3px solid oklch(0.52 0.19 285); }
.ms-collection-banner svg { width: 16px; height: 16px; color: oklch(0.5 0.015 285); flex-shrink: 0; }
.ms-collection-banner-title { font: 600 13px/1.3 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.22 0.015 285); }
.ms-collection-banner-sub   { font: 400 11px/1.4 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.55 0.015 285); }

/* Contact list */
.ms-list { padding: 10px; }
.ms-empty { padding: 48px 20px; }

.ms-row {
  display: flex; align-items: flex-start; gap: 14px; padding: 16px 10px;
  border-radius: 11px; border-bottom: 1px solid oklch(0.94 0.006 285);
  transition: box-shadow .12s ease, border-color .12s ease;
}
.ms-row:last-child { border-bottom: none; }
.ms-row:hover { box-shadow: 0 2px 10px -4px rgba(10,15,31,.15); }
.ms-row.is-overdue { background: oklch(0.98 0.02 25); }
.ms-row.is-soon    { background: oklch(0.98 0.02 75); }

.ms-check { width: 16px; height: 16px; margin-top: 11px; cursor: pointer; accent-color: oklch(0.52 0.19 285); flex-shrink: 0; }
.ms-avatar {
  width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font: 600 13px/1 'Helvetica Neue', Helvetica, Arial, sans-serif; flex-shrink: 0; margin-top: 2px; text-decoration: none;
}
.ms-body { flex: 1 1 220px; min-width: 0; }
.ms-name-row { display: flex; align-items: center; gap: 6px; }
.ms-name { font: 600 14px/1.3 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.2 0.015 285); text-decoration: none; }
.ms-name:hover { color: oklch(0.52 0.19 285); }
.ms-scan-flag { display: inline-flex; color: oklch(0.6 0.015 285); flex-shrink: 0; }
.ms-scan-flag svg { width: 12px; height: 12px; }
.ms-meta { font: 400 12px/1.5 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.55 0.015 285); }
.ms-event { display: flex; align-items: center; gap: 5px; margin-top: 4px; }
.ms-event svg { width: 11px; height: 11px; color: oklch(0.6 0.015 285); flex-shrink: 0; }
.ms-note { font: 400 12px/1.6 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.62 0.01 285); margin-top: 5px; font-style: italic; }
.ms-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 8px; }
.ms-tag-col { display: inline-flex; align-items: center; gap: 4px; }
.ms-tag-col svg { width: 9px; height: 9px; }
.ms-links { font-size: 12px; margin-top: 6px; display: flex; gap: 12px; flex-wrap: wrap; }
.ms-links a { color: oklch(0.52 0.19 285); text-decoration: none; }
.ms-links a:hover { text-decoration: underline; }

/* Row actions + overflow menu / assign popover */
.ms-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin-top: 2px; position: relative; flex-wrap: wrap; justify-content: flex-end; }
.ms-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 8px;
  font: 600 12px/1 'Helvetica Neue', Helvetica, Arial, sans-serif; cursor: pointer; border: none;
  text-decoration: none; white-space: nowrap;
}
.ms-btn svg { width: 12px; height: 12px; flex-shrink: 0; }
.ms-btn-primary { background: oklch(0.52 0.19 285); color: #fff; }
.ms-btn-green   { background: oklch(0.55 0.16 150); color: #fff; }
.ms-btn-outline { background: oklch(0.98 0.004 285); color: oklch(0.3 0.015 285); border: 1px solid oklch(0.92 0.008 285); }
.ms-btn-icon    { width: 30px; height: 30px; padding: 0; justify-content: center; background: oklch(0.98 0.004 285); color: oklch(0.4 0.015 285); border: 1px solid oklch(0.92 0.008 285); }
.ms-btn-icon svg { width: 14px; height: 14px; }

.ms-menu, .ms-assign {
  position: absolute; top: 100%; right: 0; margin-top: 6px; background: #fff;
  border: 1px solid oklch(0.9 0.008 285); border-radius: 10px; box-shadow: 0 10px 30px rgba(10,15,31,.16);
  z-index: 20; display: none;
}
.ms-menu.open, .ms-assign.open { display: block; }
.ms-menu { width: 200px; padding: 6px; }
.ms-menu-item {
  width: 100%; display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 7px;
  background: transparent; border: none; color: oklch(0.28 0.015 285);
  font: 500 13px/1 'Helvetica Neue', Helvetica, Arial, sans-serif; text-align: left; cursor: pointer;
  text-decoration: none; box-sizing: border-box;
}
.ms-menu-item:hover { background: oklch(0.96 0.006 285); }
.ms-menu-item svg { width: 15px; height: 15px; flex-shrink: 0; }
.ms-menu-item.is-danger { color: oklch(0.55 0.22 25); }
.ms-menu form { margin: 0; }
.ms-menu-divider { height: 1px; background: oklch(0.93 0.008 285); margin: 4px 2px; }

.ms-assign { width: 230px; padding: 14px; }
.ms-assign-empty { font: 400 12px/1.5 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.55 0.015 285); margin-bottom: 10px; }
.ms-assign label {
  display: flex; align-items: center; gap: 8px; font: 400 13px/1.4 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: oklch(0.28 0.015 285); margin-bottom: 8px; cursor: pointer;
}
.ms-assign label input[type=checkbox] { accent-color: oklch(0.52 0.19 285); flex-shrink: 0; }
.ms-assign input[type=text] {
  width: 100%; padding: 7px 9px; border-radius: 6px; border: 1px solid oklch(0.9 0.008 285);
  font: 400 12px/1 'Helvetica Neue', Helvetica, Arial, sans-serif; margin: 4px 0 10px; box-sizing: border-box;
}
.ms-assign-actions { display: flex; gap: 6px; justify-content: flex-end; }

/* Bulk-select bar — desktop-only (mobile has no multi-select, see Mobile.dc.html) */
.ms-bulkbar {
  position: sticky; bottom: 20px; margin-top: 16px; background: oklch(0.16 0.02 285);
  border-radius: 11px; padding: 12px 18px; display: none; align-items: center; gap: 12px;
  flex-wrap: wrap; box-shadow: 0 8px 28px -8px rgba(10,15,31,.45); z-index: 40;
}
.ms-bulkbar.show { display: flex; }
.ms-bulkbar-count { color: #fff; font: 600 13px/1 'Helvetica Neue', Helvetica, Arial, sans-serif; }
.ms-bulkbar select, .ms-bulkbar input[type=text] {
  padding: 7px 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08); color: #fff; font: 500 12px/1 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.ms-bulkbar select option { color: #000; }
.ms-bulkbar .ms-btn-clear { margin-left: auto; background: transparent; color: rgba(255,255,255,.6); }

@media (max-width: 900px) {
  /* Mobile has no bulk multi-select (per the approved Mobile.dc.html canvas
     annotation) — hide the checkboxes and the bar entirely rather than
     shipping a half-working touch target. */
  .ms-check, .ms-bulkbar { display: none !important; }

  .ms-row { flex-wrap: wrap; padding: 14px 10px; }
  .ms-body { flex-basis: calc(100% - 54px); }
  .ms-actions { flex-basis: 100%; margin-top: 10px; justify-content: flex-start; }
  .ms-actions > .ms-btn:not(.ms-btn-icon) { flex: 1; justify-content: center; }
  /* Done/+2d are each wrapped in a <form> (CSRF field), so they're never a
     direct .ms-btn child of .ms-actions and the rule above always skipped
     them — they sat at their inline width while Follow up/Set reminder
     stretched to fill the row. Give the form the flex slot instead. */
  .ms-actions > form { flex: 1; display: flex; }
  .ms-actions > form > .ms-btn { flex: 1; justify-content: center; }
  .ms-menu, .ms-assign { right: 0; left: auto; }
}

/* ── Sequences list (OpenProject #163) ─────────────────────
   Scoped "seq-" classes on top of the shared "db-" system (db-page/
   db-header/db-content/db-btn/db-empty reused as-is). Status badges/tags
   stay pill-shaped (999px) per the design system's own carve-out; every
   rectangle button here keeps the 8px-radius rule. */
.seq-chip {
  background: var(--white); border: 1px solid oklch(0.92 0.008 285); border-radius: 11px;
  padding: 9px 16px; display: flex; flex-direction: column; gap: 1px; min-width: 84px;
}
.seq-chip-num { font: 600 19px/1.15 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.2 0.015 285); }
.seq-chip-label { font: 400 11px/1.2 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.6 0.015 285); }
.seq-chip.is-green { background: oklch(0.96 0.05 145); border-color: oklch(0.88 0.08 145); }
.seq-chip.is-green .seq-chip-num { color: oklch(0.42 0.14 145); }
.seq-chip.is-green .seq-chip-label { color: oklch(0.45 0.1 145); }

/* Toggled by the "New sequence" button — collapsed by default, expanded when
   clicked or when a flash error re-lands the user here mid-create. */
.seq-new-panel { display: none; margin-bottom: 16px; }
.seq-new-panel.is-open { display: block; }
.seq-new-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; }

.seq-card {
  background: var(--white); border: 1px solid oklch(0.92 0.008 285); border-radius: 14px;
  padding: 18px 22px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.seq-card:last-child { margin-bottom: 0; }
.seq-card:hover { box-shadow: var(--shadow); }
.seq-avatar {
  width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center;
  justify-content: center; font: 600 14px/1 'Helvetica Neue', Helvetica, Arial, sans-serif;
  flex-shrink: 0;
}
.seq-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.seq-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.seq-name { font: 600 16px/1.2 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.2 0.015 285); }
.seq-name:hover { color: oklch(0.52 0.19 285); text-decoration: none; }

.seq-badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px;
  font: 600 11px/1.3 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.seq-badge-dot { width: 6px; height: 6px; border-radius: 50%; }
.seq-badge.is-active { background: oklch(0.94 0.1 145); color: oklch(0.4 0.14 145); }
.seq-badge.is-active .seq-badge-dot { background: oklch(0.6 0.16 145); }
.seq-badge.is-paused { background: oklch(0.95 0.1 75); color: oklch(0.42 0.14 75); }
.seq-badge.is-paused .seq-badge-dot { background: oklch(0.65 0.17 75); }
.seq-badge.is-draft { background: oklch(0.95 0.004 285); color: oklch(0.45 0.015 285); }
.seq-badge.is-draft .seq-badge-dot { background: oklch(0.7 0.01 285); }

.seq-meta-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.seq-dots { display: flex; align-items: center; gap: 5px; }
.seq-dot { width: 7px; height: 7px; border-radius: 50%; background: oklch(0.9 0.008 285); }
.seq-dot.is-active { background: oklch(0.6 0.16 145); }
.seq-dot.is-paused { background: oklch(0.65 0.17 75); }
.seq-dot.is-draft { background: oklch(0.9 0.008 285); }
.seq-meta-text { font: 400 12.5px/1.4 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.56 0.015 285); }

.seq-actions { display: flex; gap: 8px; flex-shrink: 0; }
.seq-actions form { display: inline-flex; }
.seq-btn-pause { background: oklch(0.97 0.06 75); border: 1px solid oklch(0.85 0.09 75); color: oklch(0.45 0.14 75); }
.seq-btn-pause:hover { background: oklch(0.95 0.07 75); }

@media (max-width: 900px) {
  .seq-page .db-header-actions { width: 100%; }
  .seq-page .db-header-actions .db-btn-primary { flex: 1; justify-content: center; }
  .seq-chip { flex: 1; min-width: 0; }

  .seq-new-form { flex-direction: column; align-items: stretch; }
  .seq-new-form .db-btn { width: 100%; justify-content: center; }

  .seq-card { padding: 14px; gap: 12px; }
  .seq-title-row { width: 100%; }
  .seq-actions { flex-basis: 100%; margin-top: 4px; }
  .seq-actions form { flex: 1; }
  .seq-actions .db-btn { width: 100%; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Sequence Builder (create/edit) rebrand (sequences/edit.php) — same "db-"
   system as the Sequences LIST rebrand above; "seq-" classes are shared
   across both pages, edit-specific ones are prefixed the same way. Applies
   OpenProject #174's low-risk, no-new-backend UX pass: reorder arrows,
   merge-field chips, iconed enrollment badges, the 500-contact cap note and
   a computed cadence-length summary. */

.db-btn-danger { padding: 7px 13px; background: oklch(0.97 0.05 25); color: oklch(0.5 0.2 25); border: 1px solid oklch(0.85 0.1 25); font: 600 12px/1 Helvetica, Arial, sans-serif; }
.db-btn-danger:hover { background: oklch(0.95 0.06 25); }

.seq-back-link { color: oklch(0.55 0.015 285); text-decoration: none; }
.seq-back-link:hover { color: oklch(0.35 0.015 285); }

.seq-tip {
  display: flex; align-items: flex-start; gap: 10px; font: 400 12.5px/1.6 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: oklch(0.5 0.015 285); background: oklch(0.97 0.03 75); border: 1px solid oklch(0.9 0.06 75); border-radius: 10px;
  padding: 12px 14px; margin-bottom: 16px;
}
.seq-tip svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; color: oklch(0.55 0.14 75); }
.seq-tip strong { color: oklch(0.4 0.02 75); }

.seq-cadence-banner {
  display: inline-flex; align-items: center; gap: 7px; font: 600 12px/1 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: oklch(0.42 0.16 285); background: oklch(0.94 0.03 285); border-radius: 999px; padding: 6px 12px 6px 10px;
}
.seq-cadence-banner svg { width: 13px; height: 13px; flex-shrink: 0; }

.seq-step-card { border: 1px solid oklch(0.92 0.008 285); border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; }
.seq-step-card:last-child { margin-bottom: 0; }
.seq-step-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.seq-step-num {
  display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%;
  background: oklch(0.52 0.19 285 / 0.1); color: oklch(0.45 0.19 285); font: 700 12px/1 'Helvetica Neue', Helvetica, Arial, sans-serif;
  flex-shrink: 0;
}
.seq-step-arrows { display: flex; gap: 3px; flex-shrink: 0; }
.seq-arrow-btn {
  width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px;
  background: oklch(0.98 0.004 285); border: 1px solid oklch(0.92 0.008 285); color: oklch(0.4 0.015 285); cursor: pointer;
}
.seq-arrow-btn svg { width: 14px; height: 14px; }
.seq-arrow-btn:hover:not(:disabled) { background: oklch(0.96 0.006 285); color: oklch(0.2 0.015 285); }
.seq-arrow-btn:disabled { opacity: .35; cursor: not-allowed; }
.seq-step-remove { margin-left: auto; }
.seq-step-delay-field { max-width: 260px; }

.seq-merge-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.seq-merge-chips-label { font: 600 11px/1 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.55 0.015 285); text-transform: uppercase; letter-spacing: .04em; }
.seq-chip-btn {
  font: 600 11.5px/1 'SF Mono', 'Menlo', monospace; color: oklch(0.42 0.16 285); background: oklch(0.95 0.03 285);
  border: 1px solid oklch(0.87 0.06 285); border-radius: 999px; padding: 4px 10px; cursor: pointer; transition: background .12s ease;
}
.seq-chip-btn:hover { background: oklch(0.91 0.05 285); }

.seq-edit-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0; }

.seq-actions-panel { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.seq-actions-panel form { display: inline-flex; }
.seq-actions-delete { margin-left: auto; }

.seq-enroll-form { margin-bottom: 20px; }
.seq-enroll-search-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.seq-enroll-search-row #enr-search { flex: 1; min-width: 160px; }
.seq-enroll-search-row #enr-event { max-width: 220px; }
.seq-cap-note { font: 400 11.5px/1.4 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.6 0.015 285); margin-bottom: 8px; }

.seq-enr-picker { max-height: 240px; overflow-y: auto; border: 1px solid oklch(0.92 0.008 285); border-radius: 10px; padding: 6px; }
.seq-enr-picker-row { display: flex; align-items: center; gap: 8px; padding: 7px 6px; border-radius: 7px; cursor: pointer; }
.seq-enr-picker-row:hover { background: oklch(0.97 0.004 285); }
.seq-enr-picker-text { font: 400 13px/1.4 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.25 0.015 285); }
.seq-enr-picker-muted { color: oklch(0.58 0.015 285); font-size: 11.5px; }
.seq-enr-picker-empty { display: none; color: oklch(0.58 0.015 285); font: 400 13px/1.4 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 10px 6px; }

.seq-enroll-speed { margin-top: 10px; font: 400 13px/1.6 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.35 0.015 285); }
.seq-enroll-speed-label { color: oklch(0.58 0.015 285); margin-right: 8px; }
.seq-enroll-speed label { margin-right: 16px; cursor: pointer; }

.seq-enroll-bar { display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.seq-enr-count { font: 600 12px/1 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.5 0.015 285); }
.seq-enroll-submit { margin-left: auto; }

.seq-enr-list { display: flex; flex-direction: column; gap: 8px; }
.seq-enr-item {
  display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid oklch(0.92 0.008 285);
  border-radius: 11px; flex-wrap: wrap;
}
.seq-enr-body { flex: 1 1 200px; min-width: 0; }
.seq-enr-name-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.seq-enr-name { font: 600 13.5px/1.3 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.2 0.015 285); }
.seq-enr-badge-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 5px; }
.seq-enr-step, .seq-enr-next { font: 400 12px/1 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.55 0.015 285); }
.seq-enr-caption { font: 400 11.5px/1.4 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.58 0.015 285); margin-top: 4px; }
.seq-enr-actions { display: flex; gap: 6px; flex-shrink: 0; margin-left: auto; }
.seq-enr-actions form { display: inline-flex; }

.seq-enr-badge {
  display: inline-flex; align-items: center; gap: 5px; font: 600 11px/1 'Helvetica Neue', Helvetica, Arial, sans-serif;
  padding: 4px 10px 4px 8px; border-radius: 999px;
}
.seq-enr-badge svg { width: 12px; height: 12px; flex-shrink: 0; }
.seq-enr-badge.is-active       { background: oklch(0.94 0.1 145); color: oklch(0.4 0.14 145); }
.seq-enr-badge.is-completed    { background: oklch(0.93 0.06 255); color: oklch(0.42 0.16 255); }
.seq-enr-badge.is-stopped      { background: oklch(0.95 0.1 75);  color: oklch(0.42 0.14 75); }
.seq-enr-badge.is-unsubscribed { background: oklch(0.95 0.08 25); color: oklch(0.5 0.18 25); }
.seq-enr-badge.is-replied      { background: oklch(0.92 0.05 197); color: oklch(0.4 0.12 197); }
.seq-enr-badge.is-suppressed   { background: oklch(0.95 0.1 75);  color: oklch(0.42 0.14 75); }
.seq-enr-caption-warn { color: oklch(0.5 0.14 75); font-weight: 600; }

.seq-footnote { font: 400 12px/1.6 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.55 0.015 285); margin-top: 14px; }

@media (max-width: 900px) {
  .seq-edit-page .db-header-actions { width: 100%; }

  .seq-step-card { padding: 12px; }
  .seq-step-delay-field { max-width: none; }
  .seq-edit-actions .db-btn { width: 100%; justify-content: center; }

  .seq-actions-panel { flex-direction: column; align-items: stretch; }
  .seq-actions-panel form, .seq-actions-panel .db-btn { width: 100%; }
  .seq-actions-panel .db-btn { justify-content: center; }
  .seq-actions-delete { margin-left: 0; }

  .seq-enroll-bar { flex-direction: column; align-items: stretch; }
  .seq-enroll-bar .db-btn { width: 100%; justify-content: center; }
  .seq-enroll-submit { margin-left: 0; }

  .seq-enr-item { flex-direction: column; }
  .seq-enr-actions { margin-left: 0; width: 100%; }
  .seq-enr-actions form { flex: 1; }
  .seq-enr-actions .db-btn { width: 100%; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Contact detail rebrand (wallet/detail.php) — same "db-" system as
   Dashboard / Follow-ups / My Stack (Helvetica Neue, oklch neutrals, 14px
   card radius, 8px-radius rectangle buttons; pills reserved for status
   badges/tags). The header "More" overflow reuses the "ms-menu" component
   from wallet/index.php verbatim (position/box-shadow/item styling) rather
   than duplicating it. Scoped "cd-" classes are used only by this page.
   See Main.dc.html / Mobile.dc.html for the approved mockup. */
.cd-header { background: var(--white); padding: 20px 32px; border-bottom: 1px solid oklch(0.92 0.008 285); }
.cd-back { display: inline-flex; align-items: center; gap: 5px; font: 500 12px/1 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.55 0.015 285); margin-bottom: 14px; text-decoration: none; }
.cd-back:hover { color: oklch(0.35 0.015 285); }
.cd-back svg { width: 13px; height: 13px; flex-shrink: 0; }

.cd-header-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.cd-identity { display: flex; align-items: center; gap: 16px; }
.cd-avatar { width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 600 20px/1 'Helvetica Neue', Helvetica, Arial, sans-serif; flex-shrink: 0; }
.cd-name { font: 600 24px/1.2 'Helvetica Neue', Helvetica, Arial, sans-serif; letter-spacing: -0.01em; color: oklch(0.2 0.015 285); }
.cd-jobline { font: 400 13px/1.5 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.5 0.015 285); margin-top: 3px; }
.cd-subline { font: 400 11px/1.4 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.65 0.01 285); margin-top: 3px; }

.cd-header-actions { display: flex; gap: 8px; flex-shrink: 0; }
.cd-more-wrap { position: relative; }

.cd-content { padding: 24px 32px 60px; }
.cd-grid {
  display: grid; grid-template-columns: 340px 1fr; gap: 16px; align-items: start;
  /* Two columns for info/collections vs followup/context; the scan panel
     spans both since it holds the image + OCR text side-by-side and a
     single-column cell left it stranded next to an empty grid cell. */
  grid-template-areas: "info followup" "collections context" "scan scan";
}
.cd-grid > .db-panel { margin-top: 0; }
.cd-panel-info        { grid-area: info; }
.cd-panel-collections { grid-area: collections; }
.cd-panel-followup    { grid-area: followup; }
.cd-panel-context     { grid-area: context; }
.cd-panel-scan         { grid-area: scan; }
.cd-panel-followup.is-overdue { border-color: oklch(0.85 0.09 25 / 0.5); background: oklch(0.99 0.01 25); }
.cd-panel-followup.is-soon    { border-color: oklch(0.87 0.08 75 / 0.5); background: oklch(0.99 0.01 75); }

.cd-panel-title { font: 600 14px/1 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.22 0.015 285); }
.cd-panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; gap: 10px; flex-wrap: wrap; }

.cd-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid oklch(0.95 0.004 285); }
.cd-row:last-child { border-bottom: none; }
.cd-row.cd-row-top { align-items: flex-start; }
.cd-row-icon { width: 17px; height: 17px; color: oklch(0.55 0.015 285); flex-shrink: 0; }
.cd-row-icon.cd-row-icon-top { margin-top: 1px; }
.cd-row a { font: 400 13px/1.4 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.52 0.19 285); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }
.cd-row a:hover { text-decoration: underline; }
.cd-row-tag { font: 400 11px/1 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.65 0.01 285); margin-left: auto; flex-shrink: 0; }
.cd-row-text { font: 400 13px/1.5 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.35 0.015 285); white-space: pre-wrap; }
.cd-empty { font: 400 13px/1.5 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.55 0.015 285); }
.cd-empty a { color: oklch(0.52 0.19 285); }

/* Collections: current membership shown as read-only pills (reuses the
   .tag-pill look already used for this on wallet/index.php) plus click-toggle
   chips beneath for add/remove. Same POST /collections/assign + collections[]
   payload as the old <details> checkbox list — a checkbox still sits behind
   each chip, just visually hidden, so no JS is needed for the toggle: :has()
   drives the on/off style from the checkbox's native :checked state. */
.cd-current-pills { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.cd-add-label { font: 700 11px/1 'Helvetica Neue', Helvetica, Arial, sans-serif; text-transform: uppercase; letter-spacing: .05em; color: oklch(0.6 0.015 285); margin-bottom: 9px; }
.cd-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.cd-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
  font: 600 12px/1 'Helvetica Neue', Helvetica, Arial, sans-serif; cursor: pointer;
  border: 1px solid oklch(0.9 0.008 285); background: oklch(0.98 0.004 285); color: oklch(0.4 0.015 285);
  transition: background .12s ease, border-color .12s ease, color .12s ease; user-select: none;
}
.cd-chip:hover { background: oklch(0.96 0.006 285); }
.cd-chip-input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.cd-chip-check { display: none; width: 11px; height: 11px; flex-shrink: 0; }
.cd-chip:has(.cd-chip-input:checked) { background: oklch(0.52 0.19 285 / 0.12); border-color: oklch(0.52 0.19 285 / 0.4); color: oklch(0.45 0.19 285); }
.cd-chip:has(.cd-chip-input:checked) .cd-chip-check { display: inline-flex; }
.cd-chip-input:focus-visible ~ .cd-chip-check,
.cd-chip:has(.cd-chip-input:focus-visible) { outline: 2px solid oklch(0.52 0.19 285 / 0.5); outline-offset: 1px; }
.cd-chip-new { display: flex; gap: 8px; }
.cd-chip-new input[type=text] { flex: 1; padding: 8px 12px; border-radius: 8px; border: 1px solid oklch(0.9 0.008 285); font: 400 12px/1 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.3 0.015 285); background: oklch(0.99 0.002 285); box-sizing: border-box; }

/* Scanned card */
.cd-scan-sub { font: 400 12px/1.4 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.6 0.015 285); margin-bottom: 14px; }
.cd-scan-body { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.cd-scan-img-wrap { width: 220px; flex-shrink: 0; border-radius: 10px; border: 1px solid oklch(0.92 0.008 285); overflow: hidden; }
.cd-scan-img-wrap img { display: block; width: 100%; height: auto; }
.cd-scan-nophoto {
  width: 220px; flex-shrink: 0; aspect-ratio: 1.6/1; border-radius: 10px; border: 1px dashed oklch(0.87 0.008 285);
  background: oklch(0.975 0.004 285); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  color: oklch(0.6 0.015 285); text-align: center; padding: 12px;
}
.cd-scan-nophoto svg { width: 22px; height: 22px; }
.cd-scan-nophoto span { font: 400 12px/1.4 'Helvetica Neue', Helvetica, Arial, sans-serif; }
.cd-scan-side { flex: 1; min-width: 220px; }
.cd-scan-toggle {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 8px;
  background: oklch(0.98 0.004 285); color: oklch(0.3 0.015 285); border: 1px solid oklch(0.92 0.008 285);
  font: 600 12px/1 'Helvetica Neue', Helvetica, Arial, sans-serif; cursor: pointer; margin-bottom: 10px; list-style: none;
}
.cd-scan-toggle::-webkit-details-marker { display: none; }
.cd-scan-toggle svg { width: 12px; height: 12px; transition: transform .15s ease; }
details[open] > .cd-scan-toggle svg { transform: rotate(180deg); }
.cd-scan-text {
  background: oklch(0.975 0.004 285); border-radius: 8px; padding: 12px 14px;
  font: 400 11.5px/1.6 ui-monospace, 'SF Mono', Consolas, monospace; color: oklch(0.4 0.015 285);
  white-space: pre-wrap; margin: 0;
}

@media (max-width: 900px) {
  .cd-header { padding: 16px 16px 18px; }
  .cd-header-row { flex-direction: column; align-items: stretch; gap: 14px; }
  .cd-avatar { width: 52px; height: 52px; font-size: 18px; }
  .cd-name { font-size: 19px; }
  .cd-header-actions { width: 100%; }
  .cd-header-actions .db-btn:not(.db-btn-icon) { flex: 1; justify-content: center; }

  .cd-content { padding: 16px 16px 90px; }
  .cd-grid { grid-template-columns: 1fr; grid-template-areas: "followup" "context" "info" "collections" "scan"; }
  .cd-scan-img-wrap, .cd-scan-nophoto { width: 100%; }
}

/* Collections (collections/index.php) — real inline icons in place of the old
   ▤/🗑 dingbats, colour-tinted icon tiles + a .tag-pill-style member-count
   badge per card, a shared circular colour-swatch picker used by both the
   create form and the inline edit panel (was a raw hex text input before),
   and a distinct dashed/muted treatment for 0-member collections. */
.coll-form-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.coll-field-label { display: block; font: 600 11px/1 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.5 0.015 285); margin-bottom: 6px; }
.coll-field-name { flex: 1; min-width: 200px; }
.coll-input {
  width: 100%; padding: 10px 12px; border: 1px solid oklch(0.88 0.008 285); border-radius: 8px;
  font: 400 13px/1 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.22 0.015 285);
}
.coll-input:focus { outline: none; border-color: oklch(0.52 0.19 285); }

.coll-swatches { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; height: 38px; }
.coll-swatch-label { position: relative; cursor: pointer; display: inline-flex; }
.coll-swatch-label input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.coll-swatch {
  width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--white);
  box-shadow: 0 0 0 1px oklch(0.88 0.008 285); display: inline-block; pointer-events: none;
}
.coll-swatch-label input:checked + .coll-swatch { box-shadow: 0 0 0 2px oklch(0.52 0.19 285); }
.coll-swatch-label input:focus-visible + .coll-swatch { outline: 2px solid oklch(0.52 0.19 285); outline-offset: 2px; }

.coll-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.coll-card { background: var(--white); border: 1px solid oklch(0.92 0.008 285); border-radius: 14px; padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.coll-card.is-empty { background: oklch(0.98 0.003 285); border: 1px dashed oklch(0.85 0.01 285); }

.coll-card-top { display: flex; align-items: center; gap: 12px; }
.coll-tile { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.coll-tile svg { width: 18px; height: 18px; }
.coll-card.is-empty .coll-tile { opacity: .7; }
.coll-card-body { flex: 1; min-width: 0; }
.coll-name { display: block; font: 600 15px/1.3 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.2 0.015 285); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coll-name:hover { color: oklch(0.52 0.19 285); }
.coll-card.is-empty .coll-name { color: oklch(0.35 0.015 285); }
.coll-pill { display: inline-block; margin-top: 4px; font: 600 11px/1 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 3px 9px; border-radius: 999px; }
.coll-empty-label { display: inline-block; margin-top: 4px; font: 500 11px/1 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.6 0.015 285); }
.coll-hint { font: 400 12px/1.5 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.58 0.015 285); }

.coll-actions { display: flex; gap: 8px; align-items: center; }
.coll-edit-toggle { position: relative; }
.coll-edit-toggle > summary { list-style: none; cursor: pointer; }
.coll-edit-toggle > summary::-webkit-details-marker { display: none; }
.coll-edit-toggle[open] > summary { background: oklch(0.52 0.19 285 / 0.1); color: oklch(0.52 0.19 285); border-color: oklch(0.52 0.19 285 / 0.3); }

.coll-edit { margin-top: 12px; border-top: 1px solid oklch(0.94 0.006 285); padding-top: 16px; }
.coll-edit-head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font: 600 13px/1 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.22 0.015 285); }
.coll-edit-head svg { width: 14px; height: 14px; color: oklch(0.5 0.015 285); flex-shrink: 0; }
.coll-edit-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }

.coll-delete-row { margin-top: 14px; border-top: 1px solid oklch(0.94 0.006 285); padding-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.coll-delete-note { font: 400 12px/1.5 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.55 0.015 285); }
.coll-btn-danger {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 8px; border: 1px solid oklch(0.6 0.22 25 / 0.25);
  background: oklch(0.6 0.22 25 / 0.08); color: oklch(0.55 0.22 25); font: 600 12px/1 'Helvetica Neue', Helvetica, Arial, sans-serif;
  cursor: pointer; flex-shrink: 0;
}
.coll-btn-danger:hover { background: oklch(0.6 0.22 25 / 0.14); }

@media (max-width: 900px) {
  .coll-grid { grid-template-columns: 1fr; gap: 10px; }
  .coll-card { padding: 16px; }
  .coll-form-row { gap: 10px; }
  .coll-field-name { min-width: 0; flex-basis: 100%; }
  .coll-swatches { height: 36px; }
  .coll-actions .db-btn:not(.db-btn-icon) { flex: 1; justify-content: center; }
  .coll-edit-row > button { width: 100%; justify-content: center; }
  .coll-edit-row .coll-field-name,
  .coll-edit-row > div { flex-basis: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Add Contact rebrand (wallet/new.php) — same "db-" system as
   Dashboard / My Stack / Follow-ups / Contact detail (Helvetica Neue, oklch
   neutrals, 14px card radius, 8px-radius rectangle buttons; pills reserved
   for tags). Scoped "ac-" classes are used only by this page. See
   Main.dc.html / AtLimit.dc.html / Mobile.dc.html for the approved mockup
   (OpenProject #176).

   The free-plan usage nudge and the at-limit block state below only render
   if the view is handed an optional $usage array (same shape as
   SubscriptionService's usage tuple — contacts/contacts_max/
   contacts_at_limit/contacts_warning/pro). WalletController::create() (the
   GET handler) does not currently compute or pass one — wiring that up is
   a separate backend ticket (flagged again in #176); until then this page
   renders exactly as it did before, just restyled. */
.ac-back { display: inline-flex; align-items: center; gap: 5px; font: 500 12px/1 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.55 0.015 285); margin-bottom: 9px; text-decoration: none; }
.ac-back:hover { color: oklch(0.35 0.015 285); }
.ac-back svg { width: 13px; height: 13px; flex-shrink: 0; }

.ac-wrap { width: 100%; max-width: 680px; }

.ac-panel-title { margin-bottom: 18px; }
.ac-panel-head-icon { display: flex; align-items: center; gap: 9px; margin-bottom: 18px; }
.ac-icon-box { width: 28px; height: 28px; border-radius: 8px; background: oklch(0.52 0.19 285 / 0.1); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ac-icon-box svg { width: 14px; height: 14px; color: oklch(0.52 0.19 285); }

.ac-field { margin-bottom: 16px; }
.ac-field:last-child { margin-bottom: 0; }
.ac-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.ac-label { font: 600 12px/1 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.35 0.015 285); margin-bottom: 6px; display: block; }
.ac-req { color: oklch(0.55 0.22 25); }
.ac-opt { color: oklch(0.6 0.015 285); font-weight: 400; }
.ac-input, .ac-select, .ac-textarea {
  width: 100%; padding: 10px 13px; border-radius: 8px; border: 1px solid oklch(0.9 0.008 285);
  font: 400 13px/1.4 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.22 0.015 285);
  background: oklch(0.99 0.002 285); outline: none; transition: border-color .15s, box-shadow .15s;
}
.ac-input::placeholder, .ac-textarea::placeholder { color: oklch(0.65 0.01 285); }
.ac-input:focus, .ac-select:focus, .ac-textarea:focus { border-color: oklch(0.52 0.19 285); box-shadow: 0 0 0 3px oklch(0.52 0.19 285 / 0.12); }
.ac-input-lg { font-size: 15px; padding: 12px 14px; }
.ac-textarea { resize: vertical; }
.ac-hint { font: 400 11px/1.5 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.6 0.015 285); margin-top: 6px; }
.ac-input-icon-wrap { position: relative; }
.ac-input-icon-wrap svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: oklch(0.6 0.015 285); }
.ac-input-icon-wrap .ac-input { padding-left: 36px; }

/* Progressive disclosure for the rarely-used fields (mobile/fax/website/
   address) — same native <details>/<summary> pattern as the contact detail
   page's scanned-card toggle (.cd-scan-toggle). */
.ac-more-toggle {
  display: inline-flex; align-items: center; gap: 6px; padding: 0; background: none; border: none;
  color: oklch(0.52 0.19 285); font: 600 12px/1 'Helvetica Neue', Helvetica, Arial, sans-serif;
  cursor: pointer; margin-top: 2px; list-style: none;
}
.ac-more-toggle::-webkit-details-marker { display: none; }
.ac-more-toggle svg { width: 13px; height: 13px; transition: transform .15s ease; flex-shrink: 0; }
.ac-more[open] > .ac-more-toggle svg { transform: rotate(180deg); }
.ac-more[open] .ac-more-label-show,
.ac-more:not([open]) .ac-more-label-hide { display: none; }
.ac-more-body { margin-top: 16px; padding-top: 16px; border-top: 1px solid oklch(0.94 0.006 285); }

.ac-tag-presets { margin-top: 9px; display: flex; gap: 6px; flex-wrap: wrap; }
.ac-tag-preset {
  font: 600 11px/1 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.35 0.015 285);
  background: oklch(0.96 0.004 285); border: 1px solid oklch(0.9 0.008 285); padding: 5px 12px;
  border-radius: 999px; cursor: pointer; transition: background .12s ease, border-color .12s ease;
}
.ac-tag-preset:hover { background: oklch(0.94 0.006 285); border-color: oklch(0.85 0.012 285); }

.ac-actions { display: flex; gap: 10px; margin-top: 4px; }

/* Edit Contact rebrand (wallet/edit.php) — reuses the "ac-" system above
   as-is, with two additions unique to editing an existing record (see
   OpenProject #184): a "Last updated / added" meta line and a bottom
   danger-zone link. Deliberately laid out full-width in .db-content (no
   .ac-wrap centering column) to match Dashboard / My Stack / Follow-ups /
   Collections / Sequence Builder, per John's explicit review note on the
   approved mockup. */
.ac-meta { margin-top: 14px; text-align: center; font: 400 12px/1.6 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.6 0.015 285); }

.ac-danger-row { margin-top: 18px; padding-top: 18px; border-top: 1px solid oklch(0.94 0.006 285); text-align: center; }
.ac-danger-link {
  display: inline-flex; align-items: center; gap: 6px; background: none; border: none; padding: 0;
  font: 600 12px/1 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.55 0.22 25); cursor: pointer;
}
.ac-danger-link:hover { color: oklch(0.45 0.22 25); }
.ac-danger-link svg { width: 13px; height: 13px; flex-shrink: 0; }

/* At-limit block — replaces the form entirely when $usage['contacts_at_limit']
   is true (see AtLimit.dc.html). Not reachable today: the controller doesn't
   pass $usage yet (separate backend ticket, see #176). */
.ac-limit-panel { padding: 40px 36px; text-align: center; }
.ac-limit-icon { width: 52px; height: 52px; border-radius: 14px; background: oklch(0.6 0.22 25 / 0.1); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; }
.ac-limit-icon svg { width: 24px; height: 24px; color: oklch(0.55 0.22 25); }
.ac-limit-title { font: 600 19px/1.3 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.2 0.015 285); margin-bottom: 8px; }
.ac-limit-copy { font: 400 14px/1.6 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.5 0.015 285); max-width: 400px; margin: 0 auto 22px; }
.ac-limit-copy strong { color: oklch(0.35 0.015 285); }
.ac-limit-progress { background: oklch(0.975 0.004 285); border-radius: 11px; padding: 14px 16px; margin-bottom: 22px; }
.ac-limit-progress-label { font: 600 11px/1 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.5 0.015 285); text-align: center; margin-bottom: 8px; }
.ac-limit-track { height: 6px; background: oklch(0.93 0.008 285); border-radius: 999px; overflow: hidden; }
.ac-limit-fill { height: 100%; background: oklch(0.6 0.22 25); border-radius: 999px; }
.ac-limit-actions { display: flex; gap: 10px; justify-content: center; }
.ac-limit-tip { margin-top: 14px; font: 400 12px/1.6 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.55 0.015 285); text-align: center; }

@media (max-width: 900px) {
  .ac-wrap { max-width: none; }
  .ac-row-2 { grid-template-columns: 1fr; }
  .ac-panel { padding: 16px; }
  .ac-limit-panel { padding: 28px 20px; }

  /* Sticky bottom action bar (see Mobile.dc.html) — .db-content already
     reserves 90px of bottom padding at this breakpoint for exactly this. */
  .ac-actions {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    background: var(--white); border-top: 1px solid oklch(0.92 0.008 285);
    box-shadow: 0 -4px 20px rgba(10,15,31,.08); padding: 12px 16px; margin: 0;
  }
  .ac-actions .db-btn { flex: 1; justify-content: center; }
  .ac-actions .db-btn-primary { flex: 2; }
}

/* ── Scan Card rebrand (wallet/scan.php) ───────────────────────
   Scoped "sc-" classes, same convention as db-/ms-/mc-/cd- above. Mobile is
   the primary surface (this is a capture-then-review flow, used on a phone
   far more often than a desktop); the two-column layout only kicks in at
   the desktop breakpoint below. */
.sc-back { margin-bottom: 10px; }
.sc-grid { display: block; }
.sc-rail { margin-bottom: 16px; }

/* Capture panel — initial "take/choose a photo" state. */
.sc-capture { text-align: center; display: flex; flex-direction: column; align-items: center; }
.sc-capture-icon {
  width: 64px; height: 64px; border-radius: 50%; background: oklch(0.52 0.19 285 / 0.1);
  display: flex; align-items: center; justify-content: center; margin-bottom: 18px; color: oklch(0.52 0.19 285);
}
.sc-capture-icon svg { width: 30px; height: 30px; }
.sc-capture-title { font: 600 15px/1.4 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.2 0.015 285); margin-bottom: 6px; }
.sc-capture-sub { font: 400 12.5px/1.5 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.55 0.015 285); margin-bottom: 22px; max-width: 320px; }
.sc-capture .db-btn { width: 100%; justify-content: center; }
.sc-capture .db-btn + .db-btn { margin-top: 10px; }
.sc-tip { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding: 0 4px; text-align: left; }
.sc-tip svg { width: 15px; height: 15px; color: oklch(0.6 0.015 285); flex-shrink: 0; margin-top: 1px; }
.sc-tip-text { font: 400 12px/1.5 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.55 0.015 285); }
.sc-tip-text strong { color: oklch(0.4 0.015 285); font-weight: 600; }
.sc-status { font: 500 13px/1.5 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.55 0.22 25); margin-top: 12px; }

/* Crop panel — frame-the-card step (drag/resize box; JS in wallet/scan.php
   owns the coordinates, this only supplies the visual chrome). */
.sc-crop-hint { display: flex; align-items: center; gap: 6px; font: 400 12.5px/1.5 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.5 0.015 285); margin-bottom: 14px; }
.sc-crop-hint svg { width: 13px; height: 13px; color: oklch(0.55 0.16 150); flex-shrink: 0; }
.sc-crop-stage {
  position: relative; display: block; width: 100%; overflow: hidden; border-radius: 12px;
  touch-action: none; user-select: none; -webkit-user-select: none; background: oklch(0.2 0.015 285);
}
.sc-crop-img { display: block; width: 100%; border-radius: 12px; }
.sc-crop-box {
  position: absolute; border: 2px solid oklch(0.52 0.19 285); box-shadow: 0 0 0 9999px rgba(10,15,31,.5);
  box-sizing: border-box; cursor: move; border-radius: 8px;
}
.sc-crop-handle {
  position: absolute; right: -9px; bottom: -9px; width: 20px; height: 20px; background: oklch(0.52 0.19 285);
  border: 2px solid #fff; border-radius: 50%; cursor: nwse-resize; box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
.sc-crop-actions { margin-top: 14px; }
.sc-crop-actions .db-btn-primary { width: 100%; justify-content: center; }
.sc-crop-actions-row { display: flex; gap: 8px; margin-top: 10px; }
.sc-crop-actions-row .db-btn { flex: 1; justify-content: center; }

/* Processing panel — the three steps and the progress bar are driven by real
   signals: step 1 by the preprocess pass, steps 2/3 and the bar by
   Tesseract.js logger events (see runOcr()/onProgress in /js/cardscan.js). */
.sc-processing { align-items: center; text-align: center; }
.sc-proc-thumb {
  position: relative; width: 180px; max-width: 60%; aspect-ratio: 1.75/1; border-radius: 8px; overflow: hidden;
  box-shadow: 0 6px 18px rgba(10,15,31,.12); margin: 0 auto 22px; border: 1px solid oklch(0.9 0.008 285);
}
.sc-proc-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
@keyframes sc-spin { to { transform: rotate(360deg); } }
.sc-spinner { animation: sc-spin 1.1s linear infinite; transform-origin: 50% 50%; }
.sc-proc-title { font: 600 14px/1.4 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.22 0.015 285); margin-bottom: 14px; }
/* Real progress: width is set from Tesseract.js logger events (see
   CardScan's onProgress in /js/cardscan.js), not from a timer. */
.sc-progress { width: 100%; height: 5px; border-radius: 999px; background: oklch(0.93 0.008 285); overflow: hidden; margin-bottom: 20px; }
.sc-progress-bar { width: 0%; height: 100%; border-radius: 999px; background: oklch(0.52 0.19 285); transition: width .25s ease; }
/* Indeterminate: an upload retry, or waiting on a queued scan (#217). Neither
   has an honest percentage to report — the queue's depth is not visible from
   this browser and a retry's previous progress is gone — so the bar fills and
   goes striped rather than inventing a number that creeps toward a completion
   nobody computed. The stripes move, which is what distinguishes "working, no
   ETA" from "frozen at 100%". */
.sc-progress-bar.is-indeterminate {
  background-image: linear-gradient(115deg,
    rgba(255,255,255,.38) 25%, transparent 25%, transparent 50%,
    rgba(255,255,255,.38) 50%, rgba(255,255,255,.38) 75%, transparent 75%);
  background-size: 14px 14px;
  animation: sc-progress-stripes .9s linear infinite;
}
@keyframes sc-progress-stripes { from { background-position: 0 0; } to { background-position: 14px 0; } }
@media (prefers-reduced-motion: reduce) { .sc-progress-bar.is-indeterminate { animation: none; } }
.sc-steps { width: 100%; display: flex; flex-direction: column; gap: 12px; text-align: left; }
.sc-step { display: flex; align-items: center; gap: 10px; }
.sc-step-icon { position: relative; width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: 2px solid oklch(0.9 0.008 285); }
.sc-step-icon svg { width: 11px; height: 11px; color: #fff; }
.sc-step-check, .sc-step-spin { display: none; }
.sc-step-spin { width: 20px !important; height: 20px !important; position: absolute; inset: -2px; }
.sc-step-label { font: 500 13px/1 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.62 0.015 285); }
.sc-step.is-done .sc-step-icon { border: none; background: oklch(0.55 0.16 150); }
.sc-step.is-done .sc-step-check { display: block; }
.sc-step.is-done .sc-step-label { color: oklch(0.3 0.015 285); }
.sc-step.is-active .sc-step-icon { border: none; }
.sc-step.is-active .sc-step-spin { display: block; }
.sc-step.is-active .sc-step-label { color: oklch(0.22 0.015 285); font-weight: 600; }
.sc-cancel { margin-top: 18px; padding: 9px 6px; background: transparent; border: none; cursor: pointer; color: oklch(0.55 0.015 285); font: 500 13px/1 'Helvetica Neue', Helvetica, Arial, sans-serif; text-decoration: underline; }

/* Confidence banner — shown once a scan comes back, above the review form. */
.sc-confidence { display: flex; align-items: center; gap: 12px; }
.sc-conf-thumb { width: 52px; height: 38px; border-radius: 6px; overflow: hidden; border: 1px solid oklch(0.9 0.008 285); flex-shrink: 0; box-shadow: 0 2px 6px rgba(10,15,31,.08); }
.sc-conf-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sc-conf-body { flex: 1; min-width: 0; }
.sc-conf-title-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sc-conf-title { font: 600 13px/1 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.22 0.015 285); }
.sc-conf-pill { font: 600 10px/1 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.sc-conf-pill.is-good { color: oklch(0.55 0.16 150); background: oklch(0.55 0.16 150 / 0.12); }
.sc-conf-pill.is-fair { color: oklch(0.55 0.17 75); background: oklch(0.6 0.17 75 / 0.12); }
.sc-conf-pill.is-low  { color: oklch(0.55 0.22 25); background: oklch(0.6 0.22 25 / 0.1); }
.sc-conf-sub { font: 400 11.5px/1.4 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.55 0.015 285); margin-top: 3px; }
.sc-conf-capture { font: 400 11.5px/1.4 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.55 0.015 285); margin-top: 3px; }
.sc-conf-imgnote { font: 400 11.5px/1.4 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.55 0.17 75); margin-top: 5px; }
.sc-conf-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.sc-conf-actions a, .sc-conf-actions button { font: 600 12px/1 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.52 0.19 285); background: none; border: none; cursor: pointer; padding: 0; }
.sc-conf-actions a:hover, .sc-conf-actions button:hover { text-decoration: underline; }

/* Possible-duplicate warning — sits under the confidence banner. Amber, not red:
   saving a second entry is allowed and is sometimes what the user intends. */
.sc-duplicate { display: flex; align-items: center; gap: 12px; margin-top: 10px; border-left: 3px solid oklch(0.6 0.17 75); }
.sc-dup-body { flex: 1; min-width: 0; }
.sc-dup-title { font: 600 13px/1 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.45 0.17 75); }
.sc-dup-sub { font: 400 11.5px/1.4 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.55 0.015 285); margin-top: 3px; }
.sc-dup-link { font: 600 12px/1 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.52 0.19 285); flex-shrink: 0; }
.sc-dup-link:hover { text-decoration: underline; }

/* Review form. */
.sc-field { margin-bottom: 14px; }
.sc-field-row { display: flex; gap: 10px; }
.sc-field-row .sc-field { flex: 1; min-width: 0; }
.sc-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.sc-label-text { font: 600 12px/1 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.35 0.015 285); }
.sc-badge-auto { display: inline-flex; align-items: center; gap: 3px; font: 600 10px/1 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.52 0.19 285); white-space: nowrap; }
.sc-badge-auto svg { width: 10px; height: 10px; }
.sc-badge-missing { font: 500 10px/1 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.62 0.015 285); white-space: nowrap; }

/* Per-field confidence grading (OpenProject #244) — same thresholds as the
   overall .sc-conf-pill banner (>=70 good, >=40 fair). Modifier classes are
   added/removed by JS (wallet/scan.php + collect/index.php's shared
   gradeConfidence()) on the very ".sc-badge-auto" chip that already exists,
   so a later "✦ suggested" state (#224) can extend this same element —
   e.g. an .is-suggested modifier plus accept/dismiss controls inside it —
   without any markup rework. A missing/null score gets no modifier class at
   all, which is exactly today's plain purple "Auto-filled" look — the
   required fallback when field_confidence is absent or an engine (the
   Tesseract fallback, always) gives no per-line confidence to grade with. */
.sc-badge-auto.is-good { color: oklch(0.5 0.16 150); }
.sc-badge-auto.is-fair { color: oklch(0.5 0.17 75); }
.sc-badge-auto.is-low  { color: oklch(0.5 0.22 25); }
/* Amber/red also tint the whole field, not just the small badge text, so an
   attention-worthy field is easy to spot while skimming the form — the same
   "hint, not error" tone as .sc-duplicate's left-border treatment above. */
.sc-field.is-conf-fair { border-left: 3px solid oklch(0.6 0.17 75 / 0.55); background: oklch(0.6 0.17 75 / 0.06); border-radius: 6px; padding: 6px 8px 8px 6px; }
.sc-field.is-conf-low  { border-left: 3px solid oklch(0.6 0.22 25 / 0.55); background: oklch(0.6 0.22 25 / 0.06); border-radius: 6px; padding: 6px 8px 8px 6px; }
.sc-input {
  width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid oklch(0.88 0.008 285);
  font: 400 14px/1.4 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.2 0.015 285); background: #fff;
}
.sc-input:focus { outline: none; border-color: oklch(0.52 0.19 285); box-shadow: 0 0 0 3px oklch(0.52 0.19 285 / 0.12); }
.sc-input.filled { border-color: oklch(0.52 0.19 285 / 0.35); background: oklch(0.52 0.19 285 / 0.04); }
textarea.sc-input { resize: vertical; min-height: 64px; }

.sc-more-toggle {
  display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 0 4px;
  border-top: 1px solid oklch(0.94 0.006 285); margin-top: 4px; color: oklch(0.52 0.19 285);
  font: 600 12px/1 'Helvetica Neue', Helvetica, Arial, sans-serif; cursor: pointer; list-style: none;
}
.sc-more-toggle::-webkit-details-marker { display: none; }
.sc-more-toggle svg { width: 13px; height: 13px; transition: transform .15s ease; }
details[open] > .sc-more-toggle svg { transform: rotate(180deg); }
.sc-more-fields { padding-top: 14px; }

.sc-tagpicker { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.sc-tagpicker button {
  font: 600 11px/1 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.35 0.015 285);
  background: oklch(0.96 0.004 285); border: 1px solid oklch(0.9 0.008 285); padding: 5px 10px; border-radius: 999px;
  cursor: pointer;
}
.sc-tagpicker button:hover { background: oklch(0.93 0.006 285); }

.sc-actions { display: flex; gap: 10px; margin-top: 16px; }
.sc-actions .db-btn-primary { flex: 1; justify-content: center; }

@media (min-width: 901px) {
  .sc-grid { display: grid; grid-template-columns: 300px 1fr; gap: 20px; align-items: start; }
  .sc-rail { margin-bottom: 0; }
  .sc-form-col .db-panel { max-width: 680px; }
}

@media (max-width: 900px) {
  .sc-content { padding: 16px 16px 90px; }
}

/* ── Settings page (rebrand pass) — reuses .db-page/.db-header/.db-content/
   .db-panel/.db-btn from the Dashboard rebrand; these add only what's
   specific to Settings (field grids, toggle switches, danger rows). ── */
.set-col { width: 100%; max-width: 760px; display: flex; flex-direction: column; gap: 16px; }
.set-col > .db-panel, .set-col > form > .db-panel { margin-top: 0; } /* spacing here comes from .set-col's flex gap, not the .db-panel + .db-panel rule */
.set-col > form { display: flex; flex-direction: column; gap: 16px; }
.set-panel-label { font: 700 11px/1 'Helvetica Neue', Helvetica, Arial, sans-serif; text-transform: uppercase; letter-spacing: .06em; color: oklch(0.55 0.015 285); margin-bottom: 16px; }

.set-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.set-field-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.set-field { display: flex; flex-direction: column; gap: 6px; }
.set-field-label { font: 500 12px/1.3 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.35 0.015 285); }
.set-input, .set-select {
  height: 40px; padding: 0 12px; border: 1px solid oklch(0.87 0.01 285); border-radius: 9px;
  font: 400 14px 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.2 0.015 285); background: var(--white);
  outline: none; width: 100%; transition: border-color .15s;
}
.set-input:focus, .set-select:focus { border-color: oklch(0.52 0.19 285); }
.set-input:disabled { background: oklch(0.98 0.004 285); color: oklch(0.6 0.015 285); border-color: oklch(0.92 0.008 285); cursor: not-allowed; }
.set-select { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23808895' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; }

.set-divider { border-top: 1px solid oklch(0.94 0.008 285); margin: 18px 0; }

.set-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid oklch(0.95 0.006 285); }
.set-toggle-row:last-of-type { border-bottom: none; padding-bottom: 4px; }
.set-toggle-label { font: 500 14px/1.3 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.2 0.015 285); }
.set-toggle-sub { font: 400 12px/1.5 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.55 0.015 285); margin-top: 2px; }
.set-toggle { width: 40px; height: 22px; border-radius: 999px; background: oklch(0.9 0.008 285); position: relative; flex-shrink: 0; border: none; outline: none; cursor: pointer; padding: 0; transition: background .15s; }
.set-toggle.on { background: oklch(0.52 0.19 285); }
.set-toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(10,15,31,.25); transition: transform .15s; }
.set-toggle.on::after { transform: translateX(18px); }

.set-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 4px 0; }
.set-row + .set-row { margin-top: 14px; }
.set-row-icon { width: 34px; height: 34px; border-radius: 9px; background: oklch(0.98 0.004 285); border: 1px solid oklch(0.92 0.008 285); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: oklch(0.35 0.015 285); }
.set-row-icon svg { width: 17px; height: 17px; }
.set-row-icon.is-danger { color: oklch(0.58 0.21 25); background: oklch(0.97 0.03 25); border-color: oklch(0.85 0.09 25); }
.set-row-body { flex: 1; min-width: 0; }
.set-row-title { font: 500 14px/1.3 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.2 0.015 285); }
.set-row-title.is-danger { color: oklch(0.58 0.21 25); }
.set-row-sub { font: 400 12px/1.5 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.55 0.015 285); margin-top: 2px; }

.set-btn-danger-ghost { background: oklch(0.97 0.03 25); color: oklch(0.58 0.21 25); border: 1px solid oklch(0.85 0.09 25); }
.set-btn-danger-ghost:hover { background: oklch(0.95 0.04 25); }

.set-plan-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.set-plan-name { font: 600 16px/1.2 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.2 0.015 285); }
.set-plan-detail { font: 400 13px/1.5 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.55 0.015 285); margin-top: 3px; }
.set-badge { display: inline-flex; align-items: center; font: 600 11px/1 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 5px 11px; border-radius: 999px; }
.set-badge svg { width: 11px; height: 11px; margin-right: 4px; }
.set-badge.is-pro { background: oklch(0.7 0.16 150 / 0.12); color: oklch(0.55 0.16 150); }
.set-badge.is-cancelled, .set-badge.is-pastdue { background: oklch(0.97 0.03 25); color: oklch(0.58 0.21 25); }
.set-badge.is-free { background: oklch(0.98 0.004 285); color: oklch(0.5 0.015 285); border: 1px solid oklch(0.92 0.008 285); }

.set-danger-panel { border: 1px solid oklch(0.85 0.09 25); background: oklch(0.97 0.03 25); border-radius: 11px; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.set-danger-title { font: 600 13px/1.3 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.58 0.21 25); display: flex; align-items: center; gap: 6px; }
.set-danger-title svg { width: 15px; height: 15px; }
.set-danger-sub { font: 400 12px/1.5 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.4 0.06 25); margin-top: 4px; max-width: 420px; }
.set-danger-receipt { list-style: disc; margin: 8px 0 0 18px; padding: 0; font: 400 12px/1.6 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.4 0.06 25); }

@media (max-width: 700px) {
  .set-field-grid, .set-field-grid-3 { grid-template-columns: 1fr; }
  .set-row { flex-wrap: wrap; }
  .set-row .set-btn { width: 100%; justify-content: center; margin-top: 4px; }
  .set-danger-panel { flex-direction: column; align-items: flex-start; }
  .set-danger-panel .set-btn { width: 100%; justify-content: center; }
}

/* ── Follow-Up Composer rebrand (follow-up/compose.php) — "fc-" scoped
   classes; reuses .db-page/.db-header/.db-panel/.db-btn/.db-avatar from the
   Dashboard rebrand. Channel/template pickers are 8px-radius rects with a
   tinted active state (not pills — pills stay reserved for tags/status). ── */
.fc-callout {
  background: oklch(0.97 0.02 255); border: 1px solid oklch(0.85 0.06 255 / 0.5); border-radius: 14px;
  padding: 13px 18px; display: flex; align-items: flex-start; gap: 11px; margin-bottom: 18px;
}
.fc-callout svg { width: 16px; height: 16px; color: oklch(0.5 0.18 255); flex-shrink: 0; margin-top: 1px; }
.fc-callout div { font: 400 12.5px/1.55 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.35 0.02 255); }
.fc-callout strong { font-weight: 600; }

.fc-card-title { font: 600 15px/1 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.22 0.015 285); margin-bottom: 18px; }
.fc-sub { font: 400 12.5px/1.5 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.55 0.015 285); margin-bottom: 16px; }
.fc-label { font: 600 12px/1 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.35 0.015 285); margin-bottom: 8px; display: block; }
.fc-field { margin-bottom: 14px; }

.fc-opt {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 8px;
  font: 500 12.5px/1 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.4 0.015 285);
  background: #fff; border: 1px solid oklch(0.92 0.008 285); cursor: pointer;
}
.fc-opt svg { width: 14px; height: 14px; flex-shrink: 0; }
.fc-opt.active { font-weight: 600; color: oklch(0.52 0.19 285); background: oklch(0.52 0.19 285 / 0.1); border-color: oklch(0.52 0.19 285 / 0.35); }

.fc-tpl {
  padding: 7px 14px; border-radius: 999px; font: 600 12px/1 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: oklch(0.4 0.015 285); background: oklch(0.98 0.004 285); border: 1px solid oklch(0.92 0.008 285); cursor: pointer;
}
.fc-tpl:hover { color: oklch(0.52 0.19 285); background: oklch(0.52 0.19 285 / 0.08); border-color: oklch(0.52 0.19 285 / 0.3); }

.fc-input {
  width: 100%; padding: 10px 12px; border: 1px solid oklch(0.87 0.008 285); border-radius: 8px;
  font: 400 13.5px/1.4 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.2 0.015 285); background: #fff; box-sizing: border-box;
}
.fc-input:focus { outline: none; border-color: oklch(0.52 0.19 285); }
.fc-textarea { padding: 12px; line-height: 1.6; resize: vertical; }

.fc-note {
  display: flex; align-items: flex-start; gap: 8px; background: oklch(0.975 0.004 285); border-radius: 8px;
  padding: 10px 12px; margin: 12px 0 18px;
}
.fc-note svg { width: 14px; height: 14px; color: oklch(0.55 0.015 285); flex-shrink: 0; margin-top: 1px; }
.fc-note div { font: 400 12px/1.55 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.5 0.015 285); }
.fc-note strong { color: oklch(0.35 0.015 285); font-weight: 600; }

@media (max-width: 700px) {
  .fc-opt, .fc-tpl { flex: 1 1 auto; justify-content: center; }
}

/* ── Email signature rebrand (card/signature.php) — "sig-" scoped classes;
   reuses .db-page/.db-header/.db-panel from the Dashboard rebrand. This is
   page-chrome only: the 13 generated signature templates (TPL.* in the
   inline <script>) are email-client-safe HTML output, not restyled here —
   #sig-preview's CONTENTS are untouched by this CSS. Template picker moved
   from pill buttons to 8px-radius rects w/ a filled active state, matching
   the app-wide button-radius rule (pills stay reserved for tags/status). ── */
.sig-col { width: 100%; max-width: 780px; display: flex; flex-direction: column; gap: 16px; }
.sig-col > .db-panel, .sig-col > form > .db-panel { margin-top: 0; }
.sig-col > form { display: flex; flex-direction: column; gap: 16px; }
.sig-panel-label { font: 700 11px/1 'Helvetica Neue', Helvetica, Arial, sans-serif; text-transform: uppercase; letter-spacing: .06em; color: oklch(0.55 0.015 285); margin-bottom: 14px; }

.sig-stats { display: flex; gap: 32px; flex-wrap: wrap; }
.sig-stat-label { font: 400 12px/1 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.55 0.015 285); margin-bottom: 6px; }
.sig-stat-num { font: 600 22px/1 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.2 0.015 285); }

.sig-tpls { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.sig-opt {
  border: 1px solid oklch(0.87 0.01 285); background: oklch(0.98 0.004 285); color: oklch(0.3 0.015 285);
  border-radius: 8px; padding: 8px 14px; font: 600 12.5px/1 'Helvetica Neue', Helvetica, Arial, sans-serif; cursor: pointer;
}
.sig-opt.active { background: oklch(0.52 0.19 285); border-color: oklch(0.52 0.19 285); color: #fff; }

.sig-addons { display: flex; gap: 22px; flex-wrap: wrap; }
.sig-addon { display: flex; align-items: center; gap: 8px; font: 400 13.5px/1 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.25 0.015 285); cursor: pointer; }
.sig-addon input[type=checkbox] { width: 16px; height: 16px; accent-color: oklch(0.52 0.19 285); }
.sig-addon.is-disabled { color: oklch(0.6 0.015 285); cursor: not-allowed; }
.sig-addon-hint { font: 400 12px/1 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.6 0.015 285); }

.sig-preview-box { background: #fff; padding: 20px; border: 1px solid oklch(0.9 0.008 285); border-radius: 10px; overflow-x: auto; }
.sig-preview-actions { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }

.sig-btn { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 16px; border-radius: 8px; font: 600 13px/1 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 1px solid transparent; cursor: pointer; white-space: nowrap; }
.sig-btn svg { width: 15px; height: 15px; }
.sig-btn-primary { background: oklch(0.52 0.19 285); color: #fff; }
.sig-btn-ghost { background: oklch(0.98 0.004 285); color: oklch(0.3 0.015 285); border-color: oklch(0.92 0.008 285); }

.sig-field-label { font: 500 13px/1.4 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.25 0.015 285); margin-bottom: 8px; display: block; }
.sig-field-label .hint { color: oklch(0.55 0.015 285); font-weight: 400; }
.sig-textarea {
  width: 100%; padding: 12px 13px; border: 1px solid oklch(0.87 0.01 285); border-radius: 9px;
  font: 400 13.5px/1.5 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.2 0.015 285); resize: vertical; box-sizing: border-box;
}
.sig-textarea:focus { outline: none; border-color: oklch(0.52 0.19 285); }
.sig-textarea.is-code { font-family: ui-monospace, 'SF Mono', Consolas, monospace; font-size: 12px; line-height: 1.6; color: oklch(0.3 0.015 285); }
.sig-save-row { display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.sig-save-note { font: 400 12px/1.4 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.55 0.015 285); }

.sig-howto ol { margin: 0; padding-left: 18px; font: 400 13.5px/1.9 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.3 0.015 285); }
.sig-howto-title { font: 600 14px/1 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.2 0.015 285); margin-bottom: 10px; }
.sig-howto-free { font: 400 12px/1.5 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.55 0.015 285); margin-top: 12px; }

@media (max-width: 700px) {
  .sig-tpls { gap: 6px; }
  .sig-addons { gap: 14px; }
  .sig-preview-actions .sig-btn, .sig-save-row .sig-btn { flex: 1; justify-content: center; }
}

/* ── Upgrade to Pro rebrand (billing/upgrade.php) ──────────────────────
   Scoped "bl-" classes on top of the shared "db-" system (db-page/
   db-header/db-content), same convention as sig-/sc-/ac- above. Reuses
   uiIconPath() for check/star/clock/chevron-down/close/alert-triangle;
   the CTA arrow and trust-row lock/shield glyphs are inline (used once).
   Approved mockup: OpenProject #187. */
.bl-content { max-width: 900px; margin: 0 auto; }

/* Personalised usage banner — same visual language as .db-nudge, driven by
   the same SubscriptionService::usage() snapshot the Dashboard nudge uses. */
.bl-banner {
  background: var(--white); border: 1px solid oklch(0.92 0.008 285);
  border-left: 3px solid oklch(0.6 0.17 75); border-radius: 14px;
  padding: 16px 20px; margin-bottom: 24px;
}
.bl-banner.is-limit { border-left-color: oklch(0.55 0.22 25); }
.bl-banner-title { display: flex; align-items: center; gap: 7px; font: 600 13px/1 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.22 0.015 285); margin-bottom: 12px; }
.bl-banner-title svg { width: 14px; height: 14px; color: oklch(0.52 0.19 285); flex-shrink: 0; }
.bl-banner.is-limit .bl-banner-title svg { color: oklch(0.55 0.22 25); }
.bl-banner-bars { display: flex; gap: 28px; flex-wrap: wrap; }
.bl-banner-bar { min-width: 180px; flex: 1; }
.bl-banner-bar-label { display: flex; justify-content: space-between; font: 500 11px/1 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.55 0.015 285); margin-bottom: 6px; }
.bl-bar-track { height: 6px; background: oklch(0.9 0.008 285); border-radius: 999px; overflow: hidden; }
.bl-bar-fill { height: 100%; border-radius: 999px; background: oklch(0.6 0.17 75); }
.bl-bar-fill.is-limit { background: oklch(0.55 0.22 25); }

/* Billing period toggle */
.bl-toggle-wrap { display: flex; justify-content: center; margin-bottom: 24px; }
.bl-toggle { display: inline-flex; gap: 4px; background: var(--white); border: 1px solid oklch(0.92 0.008 285); border-radius: 999px; padding: 4px; }
.bl-seg-btn { border: none; background: transparent; cursor: pointer; font: 600 13px/1 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 9px 22px; border-radius: 999px; color: oklch(0.5 0.015 285); transition: background .15s, color .15s; }
.bl-seg-btn.is-active { background: oklch(0.52 0.19 285); color: #fff; box-shadow: 0 2px 8px -2px oklch(0.52 0.19 285 / 0.5); }

/* Plan cards */
.bl-plans { display: grid; grid-template-columns: 1fr 1.05fr; gap: 20px; align-items: stretch; margin-bottom: 28px; }
.bl-plan { background: var(--white); border: 1px solid oklch(0.92 0.008 285); border-radius: 16px; padding: 28px 26px; display: flex; flex-direction: column; }
.bl-plan-name { font: 700 15px/1 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.22 0.015 285); margin-bottom: 14px; }
.bl-plan-price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.bl-plan-price-amount { font: 700 34px/1 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.2 0.015 285); }
.bl-plan-price-unit { font: 500 14px/1 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.55 0.015 285); }
.bl-plan-badge { display: inline-flex; align-self: flex-start; font: 600 11px/1 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.55 0.16 150); background: oklch(0.7 0.16 150 / 0.12); padding: 4px 10px; border-radius: 999px; margin-bottom: 16px; }
.bl-plan-features { display: flex; flex-direction: column; gap: 11px; margin-bottom: 22px; flex: 1; }
.bl-plan-usage { margin-bottom: 4px; }
.bl-plan-usage + .bl-plan-usage { margin-top: 6px; }
.bl-plan-feature { display: flex; align-items: center; gap: 8px; font: 500 13px/1.4 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.25 0.015 285); }
.bl-plan-feature.is-muted { font-weight: 400; color: oklch(0.45 0.015 285); }
.bl-plan-feature.is-off { font-weight: 400; color: oklch(0.6 0.015 285); }
.bl-feature-icon { width: 16px; height: 16px; flex-shrink: 0; color: oklch(0.55 0.16 150); }
.bl-plan-feature.is-off .bl-feature-icon { color: oklch(0.7 0.01 285); }
.bl-feature-icon.is-pro { color: oklch(0.52 0.19 285); }
.bl-plan-current { align-self: flex-start; font: 600 12px/1 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.55 0.16 150); background: oklch(0.7 0.16 150 / 0.12); padding: 7px 14px; border-radius: 999px; }

/* Pro card gets the emphasis: border, shadow, ribbon */
.bl-plan-pro { position: relative; border: 2px solid oklch(0.52 0.19 285); box-shadow: 0 12px 32px -12px oklch(0.52 0.19 285 / 0.35); padding-top: 26px; }
.bl-plan-ribbon {
  position: absolute; top: -13px; left: 26px; display: flex; align-items: center; gap: 5px;
  background: oklch(0.52 0.19 285); color: #fff; font: 700 11px/1 'Helvetica Neue', Helvetica, Arial, sans-serif;
  padding: 6px 12px; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em;
}
.bl-plan-ribbon svg { width: 11px; height: 11px; }

/* CTA — real visual weight vs. the rest of the page: filled, shadowed,
   full width, icon + hover lift. Replaces the old unicode-star button. */
.bl-plan-form { margin-top: auto; }
.bl-cta-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; border: none; cursor: pointer;
  background: oklch(0.52 0.19 285); color: #fff; font: 700 15px/1 'Helvetica Neue', Helvetica, Arial, sans-serif;
  padding: 15px 20px; border-radius: 12px; box-shadow: 0 4px 16px -4px oklch(0.52 0.19 285 / 0.55);
  transition: background .15s, transform .15s;
}
.bl-cta-btn:hover { background: oklch(0.46 0.19 285); transform: translateY(-1px); }
.bl-cta-icon { width: 15px; height: 15px; flex-shrink: 0; }
.bl-plan-reassurance { text-align: center; font: 400 11px/1.4 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.6 0.015 285); margin-top: 10px; }

/* Trust row */
.bl-trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 40px; }
.bl-trust-item { display: flex; align-items: flex-start; gap: 12px; background: var(--white); border: 1px solid oklch(0.92 0.008 285); border-radius: 12px; padding: 16px 18px; }
.bl-trust-icon { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bl-trust-icon svg { width: 16px; height: 16px; }
.bl-trust-icon.is-purple { background: oklch(0.52 0.19 285 / 0.1); color: oklch(0.52 0.19 285); }
.bl-trust-icon.is-green  { background: oklch(0.55 0.16 150 / 0.12); color: oklch(0.55 0.16 150); }
.bl-trust-icon.is-blue   { background: oklch(0.55 0.18 255 / 0.1); color: oklch(0.5 0.18 255); }
.bl-trust-title { font: 600 13px/1.3 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.22 0.015 285); margin-bottom: 2px; }
.bl-trust-copy { font: 400 12px/1.4 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.55 0.015 285); }

/* FAQ accordion — same native <details>/<summary> pattern as the contact
   detail / Scan Card / Collections rebrands (cd-/sc-/coll- above). */
.bl-faq-heading { font: 700 18px/1.3 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.2 0.015 285); text-align: center; margin-bottom: 20px; }
.bl-faq { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.bl-faq-item { background: var(--white); border: 1px solid oklch(0.92 0.008 285); border-radius: 12px; padding: 16px 18px; }
.bl-faq-q { display: flex; align-items: center; justify-content: space-between; gap: 10px; font: 600 13px/1.4 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.22 0.015 285); list-style: none; cursor: pointer; }
.bl-faq-q::-webkit-details-marker { display: none; }
.bl-faq-chev { width: 15px; height: 15px; flex-shrink: 0; color: oklch(0.5 0.015 285); transition: transform .15s; }
.bl-faq-item[open] .bl-faq-chev { transform: rotate(180deg); }
.bl-faq-a { font: 400 13px/1.6 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.5 0.015 285); margin-top: 10px; }

.bl-footnote { font: 400 12px/1.5 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.6 0.015 285); text-align: center; margin: 0 0 8px; }

/* Sticky bottom price/CTA bar — mobile only. Hidden by default; shown fixed
   at the 900px breakpoint below (same pattern as .ac-actions above). */
.bl-sticky-cta { display: none; }

@media (max-width: 900px) {
  .bl-plans { display: flex; flex-direction: column; }
  /* Pro shown first on mobile — the primary action for someone hitting an
     upgrade prompt mid-task on a phone (per the approved mockup). */
  .bl-plan-pro  { order: 1; }
  .bl-plan-free { order: 2; }
  .bl-trust { grid-template-columns: 1fr; }

  /* .db-content already reserves 90px of bottom padding at this breakpoint
     for exactly this (see the Scan Card / Add Contact rebrands above). */
  .bl-sticky-cta {
    display: flex; flex-direction: column; gap: 10px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    background: var(--white); border-top: 1px solid oklch(0.92 0.008 285);
    box-shadow: 0 -6px 20px -8px rgba(10,15,31,.12);
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  }
  .bl-sticky-price { display: flex; align-items: center; justify-content: space-between; }
  .bl-sticky-price-label { font: 400 11px/1.3 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.55 0.015 285); }
  .bl-sticky-price-amount { font: 700 15px/1 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.2 0.015 285); }
  .bl-sticky-price-unit { font: 500 12px/1 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.55 0.015 285); }

  /* The in-flow Pro CTA is now redundant with the sticky bar on mobile —
     keep the card focused on plan comparison, not a second full-width button. */
  .bl-plan-pro .bl-plan-form,
  .bl-plan-pro .bl-plan-reassurance { display: none; }
}

/* ══════════════════════════════════════════════════════════════════
   CARD COLLECTOR — owner management + review queue (OpenProject #203)
   and the public visitor pages (#204). Follows the existing .db-*/.sc-*
   token vocabulary; nothing new is invented, the classes just compose
   the same oklch palette, 14px panel radius and 8px button radius.
   ══════════════════════════════════════════════════════════════════ */

/* Dashboard rollup tile (#203) — 5th slot alongside the existing four.
   is-cyan is a new accent because purple/red/blue/green are already taken
   by the other tiles on that row. */
.db-stat.is-cyan .db-stat-icon { background: oklch(0.72 0.13 205 / 0.14); color: oklch(0.5 0.12 205); }
.db-stats.is-five { grid-template-columns: repeat(5, minmax(0,1fr)); }

/* ── Management list ─────────────────────────────────────────── */
.cc-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; margin-bottom: 20px; }
/* A single collector (the entire Free plan, which caps at 1) otherwise sits
   in column 1 of a 2-column grid, leaving an empty second column and making
   the card look squeezed to half width right above the "Create a new
   collector" panel below it, which is a plain 660px-capped box, not a grid
   cell — the two never lined up. Match that same cap here instead. */
.cc-grid:has(.cc-card:only-child) { grid-template-columns: minmax(0, 660px); }
.cc-card { background: var(--white); border: 1px solid oklch(0.92 0.008 285); border-radius: 14px; padding: 20px; display: flex; gap: 16px; }
.cc-card.is-paused { background: oklch(0.985 0.003 285); }

.cc-qr-col { flex-shrink: 0; width: 88px; }
.cc-qr { display: block; width: 88px; height: 88px; border-radius: 10px; border: 1px solid oklch(0.9 0.008 285); background: #fff; }
.cc-qr-actions { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.cc-qr-btn {
  display: flex; align-items: center; justify-content: center; gap: 5px; width: 100%;
  padding: 6px; border-radius: 7px; background: #fff; border: 1px solid oklch(0.88 0.008 285);
  color: oklch(0.4 0.015 285); font: 600 10.5px/1 Helvetica, Arial, sans-serif; cursor: pointer;
}
.cc-qr-btn:hover { background: oklch(0.97 0.005 285); }
.cc-qr-btn svg { width: 11px; height: 11px; flex-shrink: 0; }
.cc-qr-btn.is-accent { background: oklch(0.52 0.19 285 / 0.08); border-color: oklch(0.52 0.19 285 / 0.25); color: oklch(0.45 0.17 285); }
.cc-qr-btn.is-accent:hover { background: oklch(0.52 0.19 285 / 0.14); }

.cc-body { flex: 1; min-width: 0; }
.cc-name { font: 600 15px/1.3 Helvetica, Arial, sans-serif; color: oklch(0.2 0.015 285); margin-bottom: 6px; }
.cc-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.cc-badge { display: inline-flex; align-items: center; gap: 4px; font: 600 10.5px/1 Helvetica, Arial, sans-serif; padding: 4px 9px; border-radius: 999px; background: oklch(0.96 0.004 285); color: oklch(0.4 0.015 285); }
.cc-badge svg { width: 10px; height: 10px; flex-shrink: 0; }
.cc-badge.is-muted  { color: oklch(0.55 0.015 285); }
.cc-badge.is-green  { background: oklch(0.55 0.16 150 / 0.12); color: oklch(0.4 0.14 150); }
.cc-badge.is-red    { background: oklch(0.62 0.2 25 / 0.12);   color: oklch(0.4 0.18 25); }
.cc-badge.is-blue   { background: oklch(0.55 0.18 255 / 0.1);  color: oklch(0.5 0.18 255); }
.cc-badge.is-amber  { background: oklch(0.8 0.16 85 / 0.18);   color: oklch(0.45 0.13 70); }

/* Per-collector analytics strip — sits between the badges and the copy-link
   row so it never competes with the primary "Review submissions" link. */
.cc-stats { display: flex; align-items: stretch; padding: 10px 0; margin-bottom: 10px; border-top: 1px solid oklch(0.94 0.006 285); border-bottom: 1px solid oklch(0.94 0.006 285); }
.cc-stat { flex: 1; min-width: 0; padding: 0 12px; }
.cc-stat:first-child { padding-left: 0; }
.cc-stat:last-child  { padding-right: 0; }
.cc-stat-rule { width: 1px; background: oklch(0.94 0.006 285); flex-shrink: 0; }
.cc-stat-num { font: 600 16px/1 Helvetica, Arial, sans-serif; color: oklch(0.2 0.015 285); }
.cc-stat-label { font: 500 10.5px/1.4 Helvetica, Arial, sans-serif; color: oklch(0.58 0.015 285); }
.cc-stat-inline { display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; }
.cc-stat-inline .is-approved { font: 600 16px/1 Helvetica, Arial, sans-serif; color: oklch(0.4 0.14 150); }
.cc-stat-inline .is-rejected { font: 600 16px/1 Helvetica, Arial, sans-serif; color: oklch(0.5 0.16 25); margin-left: 6px; }
.cc-spark { display: flex; align-items: flex-end; gap: 3px; height: 20px; margin-top: 5px; }
.cc-spark-bar { width: 7px; border-radius: 2px; background: oklch(0.52 0.19 285 / 0.3); }
.cc-spark-bar.is-mid  { background: oklch(0.52 0.19 285 / 0.55); }
.cc-spark-bar.is-peak { background: oklch(0.52 0.19 285); }
.cc-stats-empty { display: flex; align-items: center; padding: 9px 0; margin-bottom: 10px; border-top: 1px solid oklch(0.94 0.006 285); border-bottom: 1px solid oklch(0.94 0.006 285); font: 500 11.5px/1.4 Helvetica, Arial, sans-serif; color: oklch(0.65 0.015 285); }

.cc-linkrow { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid oklch(0.9 0.008 285); border-radius: 8px; background: oklch(0.98 0.004 285); }
.cc-linkrow span { font: 400 12px/1 Helvetica, Arial, sans-serif; color: oklch(0.5 0.015 285); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.cc-linkrow button { background: none; border: none; padding: 0; cursor: pointer; color: oklch(0.52 0.19 285); flex-shrink: 0; display: flex; }
.cc-linkrow button svg { width: 14px; height: 14px; }
.cc-footlinks { display: flex; gap: 16px; margin-top: 12px; flex-wrap: wrap; }
.cc-footlinks a, .cc-footlinks button, .cc-footlinks span { font: 600 12px/1 Helvetica, Arial, sans-serif; background: none; border: none; padding: 0; cursor: pointer; }
.cc-footlinks a { color: oklch(0.52 0.19 285); }
.cc-footlinks .is-muted, .cc-footlinks button { color: oklch(0.55 0.015 285); }
.cc-footlinks .is-empty { color: oklch(0.7 0.015 285); cursor: default; }

/* Create / edit form panel */
.cc-create { background: var(--white); border: 1px dashed oklch(0.8 0.01 285); border-radius: 14px; padding: 22px; max-width: 660px; }
.cc-create.is-editing { border-style: solid; border-color: oklch(0.52 0.19 285 / 0.35); }
.cc-create-title { font: 600 14px/1 Helvetica, Arial, sans-serif; color: oklch(0.2 0.015 285); margin-bottom: 3px; }
.cc-create-sub { font: 400 12.5px/1.5 Helvetica, Arial, sans-serif; color: oklch(0.55 0.015 285); margin-bottom: 16px; }
.cc-blocked-note {
  display: flex; align-items: center; gap: 8px; font: 600 12.5px/1.4 Helvetica, Arial, sans-serif;
  color: oklch(0.5 0.16 75); background: oklch(0.6 0.17 75 / 0.1); border-radius: 8px; padding: 10px 12px; margin-bottom: 16px;
}
.cc-blocked-note svg { width: 15px; height: 15px; flex-shrink: 0; }
.cc-blocked-note a { color: inherit; text-decoration: underline; }
/* Disabled form controls otherwise look identical to enabled ones — .sc-input
   and .db-btn-primary define no :disabled state anywhere in this file — so a
   blocked create form reads as broken rather than as locked. .cc-file wraps
   its (hidden, display:none) file input in a <label>, which cannot itself
   carry :disabled, hence :has() on the input inside it. */
.cc-create input:disabled, .cc-create select:disabled, .cc-create button:disabled { opacity: .5; cursor: not-allowed; }
.cc-create .cc-file:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.cc-create .cc-toggle:has(input:disabled) { cursor: not-allowed; }
.cc-help { font: 400 11px/1.4 Helvetica, Arial, sans-serif; color: oklch(0.6 0.015 285); margin-top: 5px; }
.cc-toggle { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border: 1px solid oklch(0.88 0.008 285); border-radius: 8px; background: #fff; cursor: pointer; }
.cc-toggle input { width: 16px; height: 16px; accent-color: oklch(0.52 0.19 285); flex-shrink: 0; margin: 0; }
.cc-toggle span { font: 400 13px/1.35 Helvetica, Arial, sans-serif; color: oklch(0.4 0.015 285); }
.cc-toggle.is-locked { background: oklch(0.975 0.004 285); cursor: not-allowed; }
.cc-toggle.is-locked span { color: oklch(0.6 0.015 285); }
.cc-file { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px dashed oklch(0.8 0.01 285); border-radius: 8px; background: oklch(0.98 0.004 285); cursor: pointer; }
.cc-file svg { width: 14px; height: 14px; color: oklch(0.55 0.015 285); flex-shrink: 0; }
.cc-file span { font: 400 13px/1 Helvetica, Arial, sans-serif; color: oklch(0.5 0.015 285); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-file input { display: none; }

/* ── Review / approve queue ──────────────────────────────────── */
.cc-tabs { display: flex; gap: 4px; margin-bottom: 18px; border-bottom: 1px solid oklch(0.92 0.008 285); }
.cc-tab { padding: 10px 16px; font: 500 13px/1 Helvetica, Arial, sans-serif; color: oklch(0.55 0.015 285); border-bottom: 2px solid transparent; }
.cc-tab.is-active { font-weight: 600; color: oklch(0.52 0.19 285); border-bottom-color: oklch(0.52 0.19 285); }

.cc-queue { display: flex; flex-direction: column; gap: 14px; max-width: 860px; }
.cc-sub { background: var(--white); border: 1px solid oklch(0.92 0.008 285); border-radius: 14px; padding: 16px 20px; }
.cc-sub.is-expanded { border-color: oklch(0.9 0.008 285); padding: 18px 20px; }
.cc-sub-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cc-sub-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.cc-sub-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cc-sub-name { font: 600 14px/1.3 Helvetica, Arial, sans-serif; color: oklch(0.2 0.015 285); }
.cc-sub-meta { font: 400 12px/1.4 Helvetica, Arial, sans-serif; color: oklch(0.55 0.015 285); overflow: hidden; text-overflow: ellipsis; }
.cc-sub-when { font: 400 11px/1 Helvetica, Arial, sans-serif; color: oklch(0.65 0.015 285); white-space: nowrap; }
.cc-sub-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.cc-sub-body { flex: 1; min-width: 0; }

.cc-dup { display: flex; align-items: flex-start; gap: 9px; background: oklch(0.8 0.16 85 / 0.16); border: 1px solid oklch(0.75 0.16 85 / 0.4); border-radius: 8px; padding: 9px 12px; margin-bottom: 14px; }
.cc-dup svg { width: 15px; height: 15px; color: oklch(0.5 0.14 70); flex-shrink: 0; margin-top: 1px; }
.cc-dup-text { font: 500 12.5px/1.4 Helvetica, Arial, sans-serif; color: oklch(0.4 0.12 70); }
.cc-dup-text a { color: oklch(0.4 0.12 70); text-decoration: underline; }

/* Approve-time drip-sequence picker — a first-class choice on every pending
   row, pre-set to the collector's default but changeable per submission. */
.cc-sub-seq { max-width: 420px; margin: 2px 0 14px; }
.cc-sub-seq .sc-input { margin-top: 4px; }

.cc-sub-actions { display: flex; gap: 10px; margin-top: 6px; flex-wrap: wrap; align-items: center; }
.cc-sub-actions form { display: inline-flex; }
.cc-btn-merge { display: flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 8px; background: #fff; color: oklch(0.4 0.12 70); border: 1px solid oklch(0.75 0.16 85 / 0.5); font: 600 13px/1 Helvetica, Arial, sans-serif; cursor: pointer; }
.cc-btn-merge svg { width: 13px; height: 13px; }
.cc-btn-approve { padding: 9px 18px; border-radius: 8px; background: oklch(0.52 0.19 285); color: #fff; font: 600 13px/1 Helvetica, Arial, sans-serif; border: none; cursor: pointer; }
.cc-btn-approve:hover { background: oklch(0.46 0.19 285); }
.cc-btn-reject { padding: 9px 16px; border-radius: 8px; background: #fff; color: oklch(0.5 0.16 25); border: 1px solid oklch(0.85 0.06 25); font: 600 13px/1 Helvetica, Arial, sans-serif; cursor: pointer; }
.cc-btn-reject:hover { background: oklch(0.98 0.02 25); }
.cc-sub-photo { margin-left: auto; align-self: center; font: 600 12px/1 Helvetica, Arial, sans-serif; color: oklch(0.55 0.015 285); }

/* ── Public visitor pages (#204) ─────────────────────────────── */
.cl-wrap { min-height: 100vh; background: oklch(0.965 0.004 285); display: flex; flex-direction: column; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; }
.cl-head { background: var(--white); padding: 22px 20px 18px; border-bottom: 1px solid oklch(0.92 0.008 285); text-align: center; }
.cl-avatar { width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, oklch(0.52 0.19 285), oklch(0.55 0.18 255)); display: flex; align-items: center; justify-content: center; font: 700 18px/1 Helvetica, Arial, sans-serif; color: #fff; margin: 0 auto 12px; }
.cl-title { font: 600 19px/1.3 Helvetica, Arial, sans-serif; letter-spacing: -0.02em; color: oklch(0.2 0.015 285); }
.cl-sub { font: 400 12.5px/1.5 Helvetica, Arial, sans-serif; color: oklch(0.55 0.015 285); margin-top: 6px; }
.cl-body { padding: 20px 16px 40px; flex: 1; width: 100%; max-width: 440px; margin: 0 auto; }
.cl-panel { background: var(--white); border: 1px solid oklch(0.92 0.008 285); border-radius: 14px; padding: 18px 16px; }
.cl-panel.is-capture { padding: 28px 20px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.cl-capture-icon { width: 64px; height: 64px; border-radius: 50%; background: oklch(0.52 0.19 285 / 0.1); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.cl-capture-icon svg { width: 30px; height: 30px; color: oklch(0.52 0.19 285); }
.cl-capture-title { font: 600 15px/1.4 Helvetica, Arial, sans-serif; color: oklch(0.2 0.015 285); margin-bottom: 6px; }
.cl-capture-sub { font: 400 12.5px/1.5 Helvetica, Arial, sans-serif; color: oklch(0.55 0.015 285); margin-bottom: 22px; max-width: 280px; }

.cl-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; border: none; cursor: pointer; font-family: inherit; border-radius: 8px; }
.cl-btn-primary { padding: 14px; background: oklch(0.52 0.19 285); color: #fff; font: 600 14px/1 Helvetica, Arial, sans-serif; box-shadow: 0 4px 14px -4px oklch(0.52 0.19 285 / 0.55); }
.cl-btn-primary:hover { background: oklch(0.46 0.19 285); }
.cl-btn-ghost { padding: 12px; background: #fff; color: oklch(0.35 0.015 285); border: 1px solid oklch(0.88 0.008 285); font: 600 13px/1 Helvetica, Arial, sans-serif; margin-top: 10px; }
.cl-btn svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Deliberately subordinate to the two primary CTAs — most walk-up visitors
   at a booth will not have an account (#204). */
.cl-signin { text-align: center; margin-bottom: 14px; }
.cl-signin a { display: inline-flex; align-items: center; gap: 5px; font: 500 11.5px/1.4 Helvetica, Arial, sans-serif; color: oklch(0.6 0.015 285); }
.cl-signin a svg { width: 12px; height: 12px; flex-shrink: 0; }
.cl-signin strong { color: oklch(0.52 0.19 285); font-weight: 600; }

.cl-tip { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding: 0 4px; }
.cl-tip svg { width: 15px; height: 15px; color: oklch(0.6 0.015 285); flex-shrink: 0; margin-top: 1px; }
.cl-tip-text { font: 400 12px/1.5 Helvetica, Arial, sans-serif; color: oklch(0.55 0.015 285); }

.cl-back { display: inline-flex; align-items: center; gap: 5px; font: 500 13px/1 Helvetica, Arial, sans-serif; color: oklch(0.55 0.015 285); background: none; border: none; padding: 0; cursor: pointer; margin-bottom: 10px; }
.cl-back svg { width: 14px; height: 14px; }

.cl-optin { background: oklch(0.98 0.004 285); border: 1px solid oklch(0.9 0.008 285); border-radius: 12px; padding: 14px 16px; margin-top: 14px; }
.cl-consent { background: var(--white); border: 1px solid oklch(0.52 0.19 285 / 0.3); border-radius: 12px; padding: 14px 16px; margin-top: 10px; }
.cl-consent.has-error { border-color: oklch(0.6 0.22 25 / 0.6); background: oklch(0.99 0.015 25); }
.cl-check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.cl-check input { width: 16px; height: 16px; margin-top: 1px; accent-color: oklch(0.52 0.19 285); flex-shrink: 0; }
.cl-check-title { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font: 500 12.5px/1.4 Helvetica, Arial, sans-serif; color: oklch(0.25 0.015 285); }
.cl-check-sub { display: block; font: 400 11.5px/1.4 Helvetica, Arial, sans-serif; color: oklch(0.6 0.015 285); margin-top: 2px; }
.cl-required { font: 700 9.5px/1 Helvetica, Arial, sans-serif; color: oklch(0.55 0.16 25); background: oklch(0.62 0.2 25 / 0.12); padding: 2px 6px; border-radius: 999px; }

.cl-error { font: 500 11.5px/1.4 Helvetica, Arial, sans-serif; color: oklch(0.55 0.22 25); margin-top: 5px; }
.cl-alert { background: oklch(0.99 0.015 25); border: 1px solid oklch(0.6 0.22 25 / 0.35); border-radius: 10px; padding: 11px 14px; margin-bottom: 14px; font: 500 12.5px/1.5 Helvetica, Arial, sans-serif; color: oklch(0.45 0.18 25); }

/* Honeypot: off-screen, not tab-reachable, no autofill. Never display:none —
   some bots skip hidden fields, which would defeat the trap. */
.cl-hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.cl-done { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 28px; }
.cl-done-icon { width: 72px; height: 72px; border-radius: 50%; background: oklch(0.55 0.16 150 / 0.12); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.cl-done-icon svg { width: 34px; height: 34px; color: oklch(0.4 0.14 150); }
.cl-done-icon.is-closed { background: oklch(0.52 0.19 285 / 0.1); }
.cl-done-icon.is-closed svg { color: oklch(0.52 0.19 285); }
.cl-done-title { font: 600 20px/1.3 Helvetica, Arial, sans-serif; letter-spacing: -0.02em; color: oklch(0.2 0.015 285); margin-bottom: 8px; }
.cl-done-sub { font: 400 13.5px/1.6 Helvetica, Arial, sans-serif; color: oklch(0.55 0.015 285); max-width: 300px; }
.cl-done .cl-btn { max-width: 300px; margin-top: 22px; }
.cl-upsell { margin-top: 20px; padding: 16px 18px; background: var(--white); border: 1px solid oklch(0.92 0.008 285); border-radius: 12px; max-width: 300px; }
.cl-upsell-text { font: 500 12.5px/1.5 Helvetica, Arial, sans-serif; color: oklch(0.4 0.015 285); }
.cl-upsell a { display: inline-block; margin-top: 10px; padding: 10px 18px; border-radius: 8px; background: #fff; color: oklch(0.52 0.19 285); border: 1px solid oklch(0.52 0.19 285 / 0.35); font: 600 12.5px/1 Helvetica, Arial, sans-serif; }

.cl-foot { text-align: center; padding: 0 16px 22px; font: 500 11px/1 Helvetica, Arial, sans-serif; color: oklch(0.68 0.015 285); }
.cl-foot b { font-weight: 700; color: oklch(0.5 0.015 285); }
.cl-foot b i { font-style: normal; color: oklch(0.52 0.19 285); }

@media (max-width: 900px) {
  .db-stats.is-five { grid-template-columns: 1fr 1fr; }
  .cc-grid { grid-template-columns: 1fr; gap: 12px; }
  .cc-card { padding: 16px; gap: 12px; }
  .cc-qr-col { width: 72px; }
  .cc-qr { width: 72px; height: 72px; }
  .cc-stats { flex-wrap: wrap; }
  .cc-stat { flex: 1 1 50%; padding: 0; }
  .cc-stat-rule { display: none; }
  .cc-create { padding: 16px; }
  .cc-sub-row { gap: 10px; }
  .cc-sub-seq { max-width: 100%; }
  .cc-sub-actions { width: 100%; }
  .cc-sub-actions form, .cc-sub-actions .cc-btn-merge { flex: 1; }
  .cc-sub-actions button { width: 100%; justify-content: center; }
  .cc-sub-photo { margin-left: 0; }
  .cc-tabs { overflow-x: auto; }
}

/* ── Collector analytics: opens-vs-submissions overlay, liveness, capture-method
   mix, duplicate rate (surfacing already-collected data, no new instrumentation). */
.cc-spark-col { position: relative; width: 7px; height: 20px; flex-shrink: 0; }
.cc-spark-bar-opens { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 2px; background: oklch(0.85 0.02 285); }
.cc-spark-col .cc-spark-bar { position: absolute; left: 1px; right: 1px; bottom: 0; width: auto; }
.cc-spark-legend { display: flex; gap: 10px; margin-top: 4px; }
.cc-spark-key { position: relative; padding-left: 12px; font: 500 9.5px/1.4 Helvetica, Arial, sans-serif; color: oklch(0.58 0.015 285); }
.cc-spark-key::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 2px; }
.cc-spark-key.is-opens::before { background: oklch(0.85 0.02 285); }
.cc-spark-key.is-subs::before  { background: oklch(0.52 0.19 285); }

.cc-liveline { display: flex; align-items: center; gap: 5px; margin-top: 10px; font: 500 11.5px/1.4 Helvetica, Arial, sans-serif; color: oklch(0.45 0.015 285); }
.cc-liveline svg { width: 12px; height: 12px; flex-shrink: 0; color: oklch(0.55 0.015 285); }
.cc-liveline .is-muted { color: oklch(0.65 0.015 285); }

.cc-insights { display: flex; align-items: stretch; gap: 0; padding: 14px 0; margin-bottom: 4px; border-bottom: 1px solid oklch(0.92 0.008 285); }
.cc-insight { flex: 1; min-width: 0; padding: 0 18px; }
.cc-insight:first-child { padding-left: 0; }
.cc-insight:last-child  { padding-right: 0; }
.cc-insight-wide { flex: 1.6; }
.cc-insight-rule { width: 1px; background: oklch(0.92 0.008 285); flex-shrink: 0; }
.cc-insight-num { font: 600 20px/1 Helvetica, Arial, sans-serif; color: oklch(0.2 0.015 285); }
.cc-insight-label { font: 500 11px/1.4 Helvetica, Arial, sans-serif; color: oklch(0.58 0.015 285); margin-top: 2px; }

.cc-capture-bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: oklch(0.94 0.006 285); margin-top: 6px; }
.cc-capture-bar span { height: 100%; }
.cc-capture-bar .is-ocr     { background: oklch(0.52 0.19 285); }
.cc-capture-bar .is-account { background: oklch(0.55 0.18 255); }
.cc-capture-bar .is-manual  { background: oklch(0.8 0.02 285); }
.cc-capture-legend { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.cc-capture-legend span { position: relative; padding-left: 12px; font: 500 10.5px/1.4 Helvetica, Arial, sans-serif; color: oklch(0.55 0.015 285); }
.cc-capture-legend span::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 2px; }
.cc-capture-legend .is-ocr::before     { background: oklch(0.52 0.19 285); }
.cc-capture-legend .is-account::before { background: oklch(0.55 0.18 255); }
.cc-capture-legend .is-manual::before  { background: oklch(0.8 0.02 285); }

@media (max-width: 900px) {
  .cc-insights { flex-wrap: wrap; gap: 14px; }
  .cc-insight { flex: 1 1 100%; padding: 0; }
  .cc-insight-wide { flex: 1 1 100%; }
  .cc-insight-rule { display: none; }
}

/* ── Sequence analytics: enrolled/replied/unsubscribed breakdown + per-step
   delivery funnel (surfacing already-computed counts — see
   SequenceController::index()/edit()). No new instrumentation. */
.seq-meta-extra { margin-top: 2px; color: oklch(0.58 0.015 285); }

.seq-stats-row { display: flex; gap: 0; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid oklch(0.92 0.008 285); }
.seq-stat { flex: 1; min-width: 0; padding: 0 16px; border-left: 1px solid oklch(0.92 0.008 285); display: flex; flex-direction: column; gap: 2px; }
.seq-stat:first-child { border-left: none; padding-left: 0; }
.seq-stat-num { font: 600 20px/1 Helvetica, Arial, sans-serif; color: oklch(0.2 0.015 285); }
.seq-stat-label { font: 500 11px/1.4 Helvetica, Arial, sans-serif; color: oklch(0.58 0.015 285); }

.seq-funnel { margin: 0 0 16px; padding: 12px 14px; border-radius: 12px; background: oklch(0.97 0.005 285); }
.seq-funnel-title { font: 600 11.5px/1.4 Helvetica, Arial, sans-serif; color: oklch(0.45 0.015 285); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; }
.seq-funnel-rows { display: flex; flex-direction: column; gap: 6px; }
.seq-funnel-row { display: flex; align-items: center; gap: 10px; }
.seq-funnel-label { flex: 0 0 52px; font: 500 12px/1.4 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.5 0.015 285); }
.seq-funnel-bar { flex: 1; height: 8px; border-radius: 4px; background: oklch(0.92 0.008 285); overflow: hidden; }
.seq-funnel-fill { display: block; height: 100%; background: oklch(0.52 0.19 285); border-radius: 4px; }
.seq-funnel-count { flex: 0 0 auto; font: 500 12px/1.4 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.4 0.02 285); }

@media (max-width: 640px) {
  .seq-stats-row { flex-wrap: wrap; row-gap: 12px; }
  .seq-stat { flex: 1 1 40%; border-left: none; padding-left: 0; }
}

/* ── Signature insights: per-link click breakdown + email-views/saves trend
   (surfacing already-computed / already-collected data — see
   CardController::signatureInsights()). No new instrumentation. */
.sig-clicks-breakdown { margin-top: 20px; padding-top: 16px; border-top: 1px solid oklch(0.92 0.008 285); }
.sig-clicks-row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.sig-clicks-label { flex: 0 0 72px; font: 500 12px/1.4 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.5 0.015 285); }
.sig-clicks-bar { flex: 1; height: 7px; border-radius: 4px; background: oklch(0.92 0.008 285); overflow: hidden; }
.sig-clicks-fill { display: block; height: 100%; background: oklch(0.52 0.19 285); border-radius: 4px; }
.sig-clicks-count { flex: 0 0 auto; font: 500 12px/1.4 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.4 0.02 285); }

.sig-trend { margin-top: 20px; padding-top: 16px; border-top: 1px solid oklch(0.92 0.008 285); }
.sig-trend-bars { display: flex; align-items: flex-end; gap: 4px; height: 64px; }
.sig-trend-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; }
.sig-trend-bar-track { position: relative; width: 100%; max-width: 16px; height: 48px; display: flex; align-items: flex-end; justify-content: center; }
.sig-trend-bar { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 2px 2px 0 0; background: oklch(0.85 0.05 285); min-height: 2px; }
.sig-trend-bar-saves { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 2px 2px 0 0; background: oklch(0.52 0.19 285); min-height: 2px; }
.sig-trend-daylabel { font: 500 9.5px/1 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.62 0.015 285); }
.sig-trend-legend { display: flex; gap: 14px; margin-top: 10px; }
.sig-trend-key { position: relative; padding-left: 14px; font: 500 11px/1.4 'Helvetica Neue', Helvetica, Arial, sans-serif; color: oklch(0.55 0.015 285); }
.sig-trend-key::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 9px; height: 9px; border-radius: 2px; }
.sig-trend-key.is-views::before { background: oklch(0.85 0.05 285); }
.sig-trend-key.is-saves::before { background: oklch(0.52 0.19 285); }

/* ══════════════════════════════════════════════════════════════════════
   INSIGHTS (/insights) — the end user's own analytics page.

   Additive only. The page is built almost entirely from the Dashboard's
   db-* vocabulary (db-page / db-header / db-content / db-stats / db-stat /
   db-panel / db-bar-* / db-empty / db-btn); what follows is only the parts
   that vocabulary does not already cover: the per-event table, the 30-day
   column chart, and two note/headline text treatments. Same oklch palette,
   same 14px panel radius, same Helvetica stack as the surrounding rules.
   ══════════════════════════════════════════════════════════════════════ */

/* Bar-fill accents. The base .db-bar-fill is purple; completion rate reads
   better with a red/amber/green ramp, and the snooze chart wants a warm
   colour so it is not mistaken for a "good number goes up" bar. */
.db-bar-fill.is-low  { background: oklch(0.6 0.22 25); }
.db-bar-fill.is-mid  { background: oklch(0.65 0.17 75); }
.db-bar-fill.is-warm { background: oklch(0.65 0.17 75); }

/* Wider label column than .db-bar-label's default 76px — event names and
   duration buckets ("30 min – 2 hrs") need the room. */
.ins-bar-label-wide { width: 132px; }

/* ── Per-event table ─────────────────────────────────────────────── */
/* Scrolls inside its own wrapper rather than widening the page. */
.ins-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ins-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.ins-table th {
  text-align: left; padding: 0 12px 10px; white-space: nowrap;
  font: 700 11px/1 Helvetica, Arial, sans-serif; text-transform: uppercase;
  letter-spacing: .05em; color: oklch(0.55 0.015 285);
  border-bottom: 1px solid oklch(0.92 0.008 285);
}
.ins-table td { padding: 13px 12px; border-bottom: 1px solid oklch(0.95 0.006 285); vertical-align: middle; }
.ins-table tbody tr:last-child td { border-bottom: 0; }
.ins-table tbody tr:hover { background: oklch(0.985 0.004 285); }
.ins-table th.ins-num, .ins-table td.ins-num { text-align: right; }
.ins-table td.ins-num { font: 600 14px/1 Helvetica, Arial, sans-serif; color: oklch(0.25 0.015 285); }
.ins-rate-col { width: 190px; min-width: 160px; }

.ins-event-name {
  display: block; font: 600 14px/1.3 Helvetica, Arial, sans-serif;
  color: oklch(0.2 0.015 285); text-decoration: none;
}
.ins-event-name:hover { color: oklch(0.52 0.19 285); }
.ins-event-sub { font: 400 11.5px/1.4 Helvetica, Arial, sans-serif; color: oklch(0.6 0.015 285); margin-top: 3px; }
.ins-muted { font: 500 12px/1 Helvetica, Arial, sans-serif; color: oklch(0.65 0.015 285); }

/* ── Notes & headlines ───────────────────────────────────────────── */
/* .ins-note is the plain-English sentence under a chart; .is-quiet is the
   same shape for caveats, which must be legible but must not compete with
   the number they qualify. */
.ins-note {
  margin-top: 16px; padding: 12px 15px; border-radius: 11px;
  background: oklch(0.52 0.19 285 / 0.06);
  font: 500 13px/1.6 Helvetica, Arial, sans-serif; color: oklch(0.3 0.015 285);
}
.ins-note.is-quiet {
  background: oklch(0.975 0.004 285);
  font-weight: 400; font-size: 12px; color: oklch(0.55 0.015 285);
}
.ins-headline { font: 400 17px/1.5 Helvetica, Arial, sans-serif; color: oklch(0.25 0.015 285); }
.ins-headline strong { font-weight: 600; color: oklch(0.52 0.19 285); }
.ins-headline.is-tentative { font-size: 14px; color: oklch(0.55 0.015 285); }

.ins-up   { color: oklch(0.55 0.16 150); font-weight: 600; }
.ins-down { color: oklch(0.55 0.22 25);  font-weight: 600; }

/* ── 30-day column chart ─────────────────────────────────────────── */
/* One column per local calendar day, zero-filled by the controller, so the
   chart always has the same number of columns regardless of activity. A
   day with no contacts still gets a 2px stub so the baseline reads as a
   row of days rather than gaps. */
.ins-chart { display: flex; align-items: flex-end; gap: 4px; height: 160px; padding-top: 6px; }
.ins-chart-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.ins-chart-bar {
  background: oklch(0.52 0.19 285); border-radius: 5px 5px 2px 2px;
  min-height: 2px; transition: height .4s ease;
  position: relative;
}
.ins-chart-bar.is-zero { background: oklch(0.92 0.008 285); }
/* Per-day count, drawn inside the bar. `position:relative` above is what the
   label anchors to. */
.ins-chart-val {
  position: absolute; left: 0; right: 0; top: 4px;
  text-align: center; white-space: nowrap;
  font: 600 10px/1 Helvetica, Arial, sans-serif;
  color: #fff;
  pointer-events: none;   /* never blocks the column's hover/title tooltip */
}
/* A bar under ~22% is shorter than the text it would contain, so the label
   sits just above it instead and switches to the dark ink — white on the panel
   background would be invisible. */
.ins-chart-bar.is-short .ins-chart-val {
  top: auto; bottom: calc(100% + 2px);
  color: oklch(0.42 0.02 285);
}
.ins-chart-col:hover .ins-chart-bar { background: oklch(0.44 0.19 285); }
.ins-chart-tick {
  height: 16px; margin-top: 6px; text-align: center; white-space: nowrap;
  font: 500 9.5px/16px Helvetica, Arial, sans-serif; color: oklch(0.62 0.015 285);
}

@media (max-width: 900px) {
  .ins-chart { height: 120px; gap: 2px; }
  .ins-chart-tick { font-size: 8.5px; }
  /* 30 columns across a phone is roughly 10px each — narrower than a two-digit
     number, so the labels would overflow into the neighbouring days and read as
     the wrong date. The per-day count stays available via the column's title,
     and the panel header already gives the period total. */
  .ins-chart-val { display: none; }
  .ins-bar-label-wide { width: 96px; font-size: 11px; }
  .ins-note { padding: 11px 13px; }
  .ins-headline { font-size: 15px; }
}