/* Match & Meet components */

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin: var(--space-4) 0;
  box-shadow: var(--shadow-md);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 12px 20px;
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.005em;
  text-decoration: none;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
  white-space: nowrap;
  user-select: none;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary {
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hot) 100%);
  color: white;
  box-shadow: 0 4px 14px rgba(108, 99, 255, 0.32);
}
.btn-primary:hover { box-shadow: 0 6px 20px rgba(108, 99, 255, 0.42); }

.btn-secondary {
  background: var(--color-surface);
  color: var(--color-accent-hot);
  border: 1.5px solid var(--color-border-strong);
}
.btn-secondary:hover { background: var(--color-accent-soft); border-color: var(--color-accent); }

.btn-ghost {
  color: var(--color-text-soft);
  padding: 10px 14px;
}
.btn-ghost:hover { color: var(--color-accent-hot); background: var(--color-accent-soft); }

.btn-lg { padding: 14px 24px; font-size: 16px; }

.status-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.status-item {
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.status-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-faint);
}
.status-value {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--color-text);
  overflow-wrap: anywhere;
}
.status-value.status-ok { color: var(--color-success); }
.status-value.status-warn { color: var(--color-warn); }
.status-value.status-bad { color: var(--color-danger); }

.debug-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.debug-output {
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-ink);
  color: #E8E4FF;
  font-family: var(--font-mono);
  font-size: 12px;
  border-radius: var(--radius-md);
  white-space: pre-wrap;
  overflow-x: auto;
  max-height: 320px;
  overflow-y: auto;
}

/* === Phase 1 components === */

.screen-root { animation: fadeIn 0.18s ease; }
.screen-root.fading { opacity: 0.5; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: translateY(0); } }

/* Hero */
.hero {
  text-align: center;
  padding: var(--space-7) var(--space-3) var(--space-5);
}
.hero h1 {
  font-size: 36px;
  line-height: 1.15;
  margin-bottom: var(--space-3);
}
.hero-lede {
  color: var(--color-text-muted);
  font-size: 16px;
  max-width: 480px;
  margin: 0 auto var(--space-5);
}
.hero-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 320px;
  margin: 0 auto;
}
@media (min-width: 540px) {
  .hero-actions { flex-direction: row; justify-content: center; max-width: none; }
}
.btn-lg { padding: 14px 24px; font-size: 16px; }

.how-it-works .steps {
  list-style: none;
  padding: 0;
  margin: var(--space-3) 0 0;
  counter-reset: step;
}
.how-it-works .steps li {
  position: relative;
  padding: var(--space-3) 0 var(--space-3) 42px;
  border-bottom: 1px solid var(--color-border-soft);
  counter-increment: step;
}
.how-it-works .steps li:last-child { border-bottom: none; }
.how-it-works .steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: var(--space-3);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hot) 100%);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 12px rgba(108, 99, 255, 0.28);
}

.footnote {
  text-align: center;
  color: var(--color-text-faint);
  font-size: 12px;
  padding: var(--space-3) var(--space-4);
  max-width: 480px;
  margin: var(--space-3) auto 0;
  line-height: 1.5;
}

/* Form components */
.form-card { padding: var(--space-5) var(--space-5) var(--space-6); }
.back-link {
  display: block;
  color: var(--color-text-muted);
  font-size: 13px;
  font-weight: 500;
  margin-bottom: var(--space-3);
  text-decoration: none;
}
.back-link:hover { color: var(--color-accent-hot); }

.form { display: flex; flex-direction: column; gap: var(--space-4); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text);
}
.field-hint {
  font-size: 12px;
  color: var(--color-text-faint);
}
.field input[type="text"],
.field input[type="tel"],
.field input[type="number"],
.field input[type="email"],
.field input[type="url"],
.field input[type="password"],
.field select {
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  font-size: 15px;
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  width: 100%;
}
.field input:focus, .field select:focus {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-glow);
}

.form-error {
  background: #FFF4F3;
  color: #A21F1F;
  border: 1px solid #F3CFCB;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  font-size: 13px;
}

.form-actions { display: flex; gap: var(--space-3); margin-top: var(--space-3); }

.fieldset {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  /* min-width:0 lets the fieldset shrink below its content's intrinsic width
     when it's a flex/grid child (the default min-width is 'auto' = content).
     max-width:100% pins it inside the parent. Together these stop the
     Interest Categories card from bleeding past the right edge when long
     category names like "Psychology & Self-Development" appear in the 2-col
     grid. */
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.fieldset legend {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-ink);
  padding: 0 var(--space-2);
}

/* Toggle row */
.toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 0;
  cursor: pointer;
  font-size: 14px;
}
.toggle input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 38px;
  height: 22px;
  border-radius: 11px;
  background: var(--color-border-strong);
  position: relative;
  transition: background var(--transition-fast);
  flex-shrink: 0;
  cursor: pointer;
}
.toggle input[type="checkbox"]::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: white;
  transition: left var(--transition-fast);
}
.toggle input[type="checkbox"]:checked {
  background: var(--color-accent);
}
.toggle input[type="checkbox"]:checked::before { left: 18px; }

.share-row {
  display: flex;
  gap: var(--space-3);
  align-items: flex-end;
}
.share-toggle { flex-shrink: 0; padding-bottom: 6px; }

/* Photo */
.photo-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) 0;
}
.photo-preview {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-accent-soft) 0%, var(--color-accent-bg) 100%);
  border: 2px dashed var(--color-border-strong);
  display: grid;
  place-items: center;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.photo-preview:has(img) { border-style: solid; border-color: transparent; box-shadow: 0 6px 20px rgba(108, 99, 255, 0.25); }
.photo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.photo-placeholder {
  font-size: 36px;
  color: var(--color-accent);
  opacity: 0.7;
}

/* Chips */
.chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chip {
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-soft);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}
.chip:hover:not(.on) { border-color: var(--color-accent); color: var(--color-accent-hot); }
.chip.on {
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hot) 100%);
  border-color: var(--color-accent-hot);
  color: #fff;
  box-shadow: 0 2px 8px rgba(108, 99, 255, 0.3);
}
.chip.on:hover, .chip.on:focus, .chip.on:active {
  color: #fff;
  border-color: var(--color-accent-hot);
}

/* Free tag input */
.free-tags { display: flex; flex-direction: column; gap: 8px; margin-top: var(--space-3); }
.free-tags-input { display: flex; gap: 8px; }
.free-tags-input input { flex: 1; padding: 9px 12px; border-radius: var(--radius-md); border: 1px solid var(--color-border-strong); font-size: 14px; }
.tag-list { display: flex; flex-wrap: wrap; gap: 6px; }
.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: var(--color-accent-bg);
  border-radius: 12px;
  font-size: 12px;
  color: var(--color-ink);
}
.tag-x {
  background: none;
  border: none;
  color: var(--color-ink);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}

/* Walkthrough */
.walkthrough {
  text-align: center;
  padding: var(--space-6) var(--space-4) var(--space-5);
  max-width: 480px;
  margin: 0 auto;
}
.walkthrough-progress {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: var(--space-6);
}
.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-border-strong);
  transition: background var(--transition-fast), transform var(--transition-fast), width var(--transition-fast);
}
.dot.active {
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hot) 100%);
  width: 24px;
  border-radius: var(--radius-pill);
}
.dot.done { background: var(--color-accent); }
.walkthrough-icon {
  font-size: 56px;
  margin: 0 auto var(--space-4);
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-accent-soft) 0%, var(--color-accent-bg) 100%);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-md);
}
.walkthrough-body {
  color: var(--color-text-soft);
  font-size: 16px;
  line-height: 1.6;
  margin: var(--space-3) 0 var(--space-6);
}
.walkthrough-actions {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
}

/* Home / tabs */
.app-header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) 0 var(--space-3);
  margin-bottom: var(--space-3);
}
.app-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 18px;
  text-align: left;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  overflow-wrap: anywhere;
}
.avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hot) 100%);
  color: #fff;
  display: grid;
  place-items: center;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(108, 99, 255, 0.25);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-placeholder {
  font-family: var(--font-display);
  color: #fff;
  font-weight: 800;
  font-size: 18px;
}
.avatar-sm { width: 40px; height: 40px; }
.avatar-button {
  border: none;
  padding: 0;
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.avatar-button:hover { transform: scale(1.05); box-shadow: 0 6px 18px rgba(108, 99, 255, 0.4); }
.avatar-button:active { transform: scale(0.97); }
.avatar-button:focus-visible { outline: 3px solid var(--color-accent-soft); outline-offset: 2px; }

.tab-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-4);
}
.tab {
  padding: 10px 6px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted);
  background: transparent;
  border-radius: var(--radius-pill);
  transition: color var(--transition-fast), background var(--transition-fast);
  overflow-wrap: anywhere;
}
.tab:hover { color: var(--color-accent-hot); }
.tab.active {
  color: #fff;
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hot) 100%);
  box-shadow: 0 2px 8px rgba(108, 99, 255, 0.3);
}

.menu-popover {
  position: fixed;
  top: 64px;
  right: 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  min-width: 180px;
  z-index: 200;
  overflow: hidden;
}
.menu-popover a, .menu-popover button {
  padding: 12px 16px;
  text-align: left;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border-soft);
}
.menu-popover button { cursor: pointer; }
.menu-popover a:last-child, .menu-popover button:last-child { border-bottom: none; }
.menu-popover a:hover, .menu-popover button:hover { background: var(--color-accent-soft); color: var(--color-accent-hot); }

.placeholder-card h2 { color: var(--color-ink); }

/* === Phase 2 components === */

.empty-state { text-align: center; padding: var(--space-6) var(--space-5); }
.empty-state h2 { margin-bottom: var(--space-2); color: var(--color-ink); }

/* Match cards (browse pool) */
.match-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.match-card {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.match-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.match-card .avatar-lg {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hot) 100%);
  color: #fff;
  display: grid;
  place-items: center;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(108, 99, 255, 0.3);
}
.match-card .avatar-lg img { width: 100%; height: 100%; object-fit: cover; }
.avatar-placeholder.large {
  font-family: var(--font-display);
  font-size: 30px;
  color: #fff;
  font-weight: 800;
}
.match-meta { min-width: 0; }
.match-meta .match-name {
  margin: 0 0 2px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--color-ink);
  letter-spacing: -0.01em;
}
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.chip-mini {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  background: var(--color-accent-soft);
  color: var(--color-accent-hot);
  border-radius: var(--radius-pill);
  overflow-wrap: anywhere;
}
.match-actions { display: flex; justify-content: flex-end; }
.match-actions .btn { padding: 8px 14px; font-size: 13px; }

@media (max-width: 480px) {
  .match-card {
    grid-template-columns: 60px minmax(0, 1fr);
    grid-template-rows: auto auto;
    row-gap: var(--space-3);
  }
  .match-card .avatar-lg { width: 56px; height: 56px; }
  .match-actions { grid-column: 1 / -1; }
  .match-actions .btn { width: 100%; }
}

/* Match list (Meet tab) */
.match-list { display: flex; flex-direction: column; gap: var(--space-3); }
.match-row { padding: var(--space-4); }
.match-row-head {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
}
.match-row-name h3 { margin: 0; font-size: 15px; }
.match-row-cta { display: flex; align-items: center; }
.match-row-body { padding-top: var(--space-3); border-top: 1px solid var(--color-border); margin-top: var(--space-3); }
.match-line { margin: 0 0 var(--space-2); font-size: 14px; }

/* Status pills */
.status-pill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.status-pill.status-confirmed { background: var(--color-success-soft); color: var(--color-success); }
.status-pill.status-waiting   { background: var(--color-warn-soft); color: var(--color-warn); }

/* Propose screen */
.propose-card { padding: var(--space-5) var(--space-5) var(--space-6); }
.propose-target {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3) 0 var(--space-4);
  border-bottom: 1px solid var(--color-border-soft);
  margin-bottom: var(--space-4);
}
.propose-target .avatar-md {
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hot) 100%);
  color: #fff;
  overflow: hidden;
  display: grid; place-items: center;
  box-shadow: 0 4px 14px rgba(108, 99, 255, 0.25);
}
.propose-target .avatar-md img { width: 100%; height: 100%; object-fit: cover; }
.propose-target .avatar-md .avatar-placeholder { font-family: var(--font-display); color: #fff; font-weight: 800; font-size: 22px; }
.propose-target h2 { margin: 0; font-size: 18px; }

.city-tabs { display: flex; gap: 6px; margin-bottom: var(--space-3); flex-wrap: wrap; }
.city-tab {
  padding: 8px 16px;
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-soft);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}
.city-tab:hover { border-color: var(--color-accent); color: var(--color-accent-hot); }
.city-tab.on {
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hot) 100%);
  border-color: var(--color-accent-hot);
  color: #fff;
  box-shadow: 0 2px 8px rgba(108, 99, 255, 0.3);
}

.venue-list { display: flex; flex-direction: column; gap: 8px; }
.venue-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: var(--space-3);
  padding: 12px 14px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.venue-row:hover { border-color: var(--color-accent); background: var(--color-surface-2); }
.venue-row input { margin: 0; accent-color: var(--color-accent); }
.venue-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.venue-name { font-weight: 600; color: var(--color-ink); overflow-wrap: anywhere; }

.date-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
  gap: 8px;
}
.date-chip {
  padding: 10px 6px;
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}
.date-chip:hover { border-color: var(--color-accent); }
.date-chip.on {
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hot) 100%);
  border-color: var(--color-accent-hot);
  color: #fff;
  box-shadow: 0 2px 8px rgba(108, 99, 255, 0.3);
}
.date-dow { font-family: var(--font-display); font-size: 11px; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }
.date-num { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--color-ink); }
.date-chip.on .date-dow,
.date-chip.on .date-num { color: #fff; }

/* Respond radio rows */
.radio-list { display: flex; flex-direction: column; gap: 8px; }
.radio-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: var(--space-3);
  padding: 12px 14px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  align-items: center;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.radio-row:hover { border-color: var(--color-accent); background: var(--color-surface-2); }
.radio-row input { margin: 0; accent-color: var(--color-accent); }

/* === Phase 3 components === */

.match-row-clickable { cursor: pointer; transition: border-color var(--transition-fast); }
.match-row-clickable:hover { border-color: var(--color-accent); }

.meet-detail { padding: var(--space-5) var(--space-5) var(--space-6); }

.meet-header {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-2) 0 var(--space-4);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-4);
}
.meet-header .avatar-lg {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--color-accent-bg); overflow: hidden;
  display: grid; place-items: center;
}
.meet-header .avatar-lg img { width: 100%; height: 100%; object-fit: cover; }
.meet-with h2 { margin: 0; font-size: 20px; }
.meet-with .muted { margin: 0; }

.meet-info-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-3) 0;
}
.meet-info-row {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: var(--space-3);
}
.meet-info-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-faint);
  font-weight: 600;
  padding-top: 2px;
}
.meet-info-value { font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.link-inline { color: var(--color-accent); text-decoration: underline; }

.meet-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-4);
}
.meet-actions .btn { flex: 1 1 140px; }

.starters-area {
  margin-top: var(--space-5);
  padding: var(--space-4);
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}
.starters-area h3 { margin: 0 0 var(--space-2); font-size: 15px; }
.starter-list {
  list-style: none;
  padding: 0;
  margin: var(--space-3) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.starter-list li {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  padding: 10px 14px;
  border-radius: var(--radius-md);
  font-size: 14px;
  line-height: 1.5;
}
.btn-small { font-size: 12px; padding: 6px 10px; }

.meet-danger {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: center;
}
.meet-danger .btn-ghost { color: var(--color-danger, #B23A30); }

/* === Phase 4 components === */

.checkin-panel {
  margin-top: var(--space-5);
  padding: var(--space-4);
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}
.checkin-panel.checked-in { border-left: 3px solid var(--color-success, #2E8B57); }
.checkin-panel h3 { margin: 0 0 var(--space-2); font-size: 15px; }

.checkin-code-box {
  margin: var(--space-3) 0;
  padding: var(--space-4) var(--space-5);
  background: linear-gradient(135deg, var(--color-accent-soft) 0%, var(--color-accent-bg) 100%);
  border: 1.5px solid var(--color-accent-border);
  border-radius: var(--radius-lg);
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.checkin-code-label {
  font-family: var(--font-display);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-accent-hot);
  font-weight: 700;
}
.checkin-code-value {
  font-family: 'SFMono-Regular', 'Menlo', 'Consolas', monospace;
  font-size: 36px;
  letter-spacing: 4px;
  margin: var(--space-2) 0 0;
  color: var(--color-ink);
  font-weight: 800;
  user-select: all;
}

.checkin-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.checkin-actions .btn { width: 100%; }
.checkin-code-input {
  display: flex;
  gap: 6px;
}
.checkin-code-input input {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: 'SFMono-Regular', 'Menlo', 'Consolas', monospace;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 2px;
  background: var(--color-surface);
}

/* Feedback panel */
.feedback-panel {
  margin-top: var(--space-5);
  padding: var(--space-4);
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}
.feedback-panel.submitted { border-left: 3px solid var(--color-success, #2E8B57); }
.feedback-panel h3 { margin: 0 0 var(--space-2); font-size: 15px; }

.star-rating {
  display: flex;
  gap: 4px;
  margin: var(--space-3) 0;
}
.star-rating .star {
  background: none;
  border: none;
  font-size: 32px;
  line-height: 1;
  padding: 4px 6px;
  cursor: pointer;
  color: var(--color-border);
  transition: color var(--transition-fast);
}
.star-rating .star:hover { color: var(--color-accent); }
.star-rating .star.on { color: #F2B400; }

.toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  cursor: pointer;
}
.toggle input { width: 18px; height: 18px; cursor: pointer; accent-color: var(--color-accent); }
.toggle span { font-size: 14px; }

.feedback-notes {
  width: 100%;
  margin-top: var(--space-2);
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 14px;
  background: var(--color-surface);
  resize: vertical;
  min-height: 60px;
}

.flag-disclosure {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}
.flag-disclosure summary {
  cursor: pointer;
  padding: 4px 0;
}
.flag-disclosure .flag-body {
  padding: var(--space-2) 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.flag-disclosure input[type=text] {
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-family: inherit;
  font-size: 13px;
}

.connection-callout {
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-5);
  background: linear-gradient(135deg, var(--color-accent-soft) 0%, var(--color-accent-bg) 100%);
  border-radius: var(--radius-lg);
  border-left: 3px solid var(--color-accent);
  font-size: 14px;
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
}
.connection-callout p { margin: 0; }

/* === Phase 5 components === */

.connection-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.connection-card { padding: var(--space-4); }
.connection-head {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
  margin-bottom: var(--space-3);
}
.connection-head .avatar-md {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--color-accent-bg); overflow: hidden;
  display: grid; place-items: center;
}
.connection-head .avatar-md img { width: 100%; height: 100%; object-fit: cover; }
.connection-meta h3 { margin: 0; font-size: 16px; }
.connection-meta p { margin: 2px 0 0; }

.channel-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}
.channel-link {
  display: block;
  padding: 8px 12px;
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
  color: var(--color-accent);
  text-decoration: none;
  font-size: 14px;
  word-break: break-all;
}
.channel-link:hover { background: var(--color-accent-bg); }

/* === Phase 6b: weekly rounds === */
.system-matches {
  margin-bottom: var(--space-5);
  padding: var(--space-4);
  background: linear-gradient(135deg, var(--color-accent-bg) 0%, var(--color-surface) 100%);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-accent-border, var(--color-border));
}
.system-matches .section-title {
  margin: 0 0 4px;
  font-size: 18px;
  color: var(--color-accent);
}
.system-matches .section-hint {
  margin: 0 0 var(--space-3);
}
.match-card.system-match {
  border: 1px solid var(--color-accent-border, var(--color-accent));
}
.badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 500;
}
.badge-info {
  background: var(--color-accent-bg);
  color: var(--color-accent);
}
.manual-matches .section-title {
  margin: var(--space-4) 0 var(--space-3);
  font-size: 18px;
}

/* Brand logo header — the real SC mark on landing */
.brand-header-logo {
  display: flex;
  justify-content: center;
  padding: var(--space-5) 0 var(--space-3);
}
.brand-header-logo img {
  width: 84px;
  height: auto;
  display: block;
}
@media (min-width: 720px) {
  .brand-header-logo img { width: 96px; }
}

/* QR share section — "bring a friend" card with QR code */
.qr-share {
  text-align: center;
  margin-top: var(--space-4);
}
.qr-share h3 {
  margin-bottom: var(--space-3);
}
.qr-share .qr-lede {
  color: var(--color-text-soft);
  font-size: 14px;
  max-width: 320px;
  margin: 0 auto var(--space-4);
  line-height: 1.5;
}
.qr-frame {
  display: inline-block;
  padding: var(--space-3);
  background: #FFFFFF;
  border: 1.5px solid var(--color-accent-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.qr-frame > div {
  width: 180px;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.qr-frame svg {
  width: 100%;
  height: 100%;
  display: block;
}
.qr-frame svg rect:first-child { fill: #FFFFFF; }
.qr-frame svg path, .qr-frame svg rect:not(:first-child) { fill: var(--color-ink); }
.qr-share .qr-url {
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: 12px;
  word-break: break-all;
}

/* Vibe tab — opinion statement cards */
.vibe-header { margin-bottom: var(--space-3); }
.vibe-progress {
  display: flex;
  gap: var(--space-5);
  align-items: baseline;
  font-size: 14px;
  color: var(--color-text-soft);
  margin-bottom: var(--space-2);
}
.vibe-progress strong { color: var(--color-accent-hot); font-family: var(--font-display); font-size: 20px; margin-right: 4px; }
.vibe-progress-row { display: inline-flex; align-items: baseline; }

.vibe-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-soft);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-soft);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.chip:hover { color: var(--color-accent-hot); border-color: var(--color-accent-border); }
.chip.is-active {
  background: var(--color-accent-soft);
  color: var(--color-accent-hot);
  border-color: var(--color-accent);
}
.chip-count {
  display: inline-flex;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-muted);
}
.chip.is-active .chip-count { background: var(--color-accent); color: #fff; }

.vibe-list { display: flex; flex-direction: column; gap: var(--space-3); }
.vibe-card { padding: var(--space-4); }
.vibe-text {
  margin: 0 0 var(--space-3);
  font-size: 16px;
  line-height: 1.45;
  color: var(--color-ink);
  font-weight: 500;
}
.vibe-buttons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.vibe-resp {
  padding: 10px 8px;
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  border: 1.5px solid var(--color-border-soft);
  background: var(--color-surface);
  color: var(--color-text-soft);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
  overflow-wrap: anywhere;
}
.vibe-resp:hover { border-color: var(--color-accent-border); color: var(--color-accent-hot); }
.vibe-resp:active { transform: scale(0.97); }
.vibe-resp:disabled { opacity: 0.5; cursor: not-allowed; }
.vibe-resp.agree.is-active    { background: #1F8A50; border-color: #1F8A50; color: #fff; }
.vibe-resp.neutral.is-active  { background: var(--color-text-muted); border-color: var(--color-text-muted); color: #fff; }
.vibe-resp.disagree.is-active { background: var(--color-danger); border-color: var(--color-danger); color: #fff; }

/* V1 stance pills — agree / disagree (replaces thumbs). Words, not emoji. */
.vibe-stance {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: var(--space-4);
}
.vibe-stance-btn {
  padding: 14px;
  border-radius: var(--radius-lg);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-soft);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.vibe-stance-btn:active { transform: scale(0.97); }
.vibe-stance-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.vibe-stance-btn.dis:hover { border-color: var(--color-danger); color: var(--color-danger); }
.vibe-stance-btn.agr:hover { border-color: var(--color-accent); color: var(--color-accent-hot); }
.vibe-stance-btn.dis.is-active { background: #FBEAEA; border-color: var(--color-danger); color: var(--color-danger); }
.vibe-stance-btn.agr.is-active { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.vibe-stance-hint {
  text-align: center;
  font-size: 11.5px;
  color: var(--color-text-faint);
  margin: 10px 0 0;
}

.vibe-stars { display: flex; gap: 4px; justify-content: flex-end; }
.vibe-star {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: transparent;
  color: var(--color-border-strong);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: color var(--transition-fast), transform var(--transition-fast);
}
.vibe-star:hover { color: var(--color-accent); transform: scale(1.15); }
.vibe-star.is-filled { color: #FFC26D; }
.vibe-star:disabled { cursor: not-allowed; opacity: 0.5; }

.vibe-footer { margin-top: var(--space-4); text-align: center; }
.danger-link {
  color: var(--color-danger);
  font-weight: 600;
}
.danger-link:hover { color: var(--color-danger); background: var(--color-danger-soft); }

.empty-state { padding: var(--space-6) var(--space-4); text-align: center; }
.empty-state h2 { margin-bottom: var(--space-2); }

/* Split form-actions (Save + Log out side by side on profile edit) */
.form-actions-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
@media (max-width: 480px) {
  .form-actions-split { grid-template-columns: 1fr; }
}

/* ============================================================================
   Chunk C2a — animal emoji avatar, larger avatars, profile v2 sections
   ============================================================================ */

/* Emoji avatar styling — sized off the container avatar-*  parent */
.avatar-emoji {
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Twemoji Mozilla', 'Noto Color Emoji', sans-serif;
  line-height: 1;
  background: var(--color-accent-soft);
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}
.avatar-sm  .avatar-emoji, .avatar-sm  .avatar-placeholder { font-size: 22px; }
.avatar-md  .avatar-emoji, .avatar-md  .avatar-placeholder { font-size: 28px; }
.avatar-lg  .avatar-emoji, .avatar-lg  .avatar-placeholder { font-size: 38px; }
.avatar-xl  .avatar-emoji                                  { font-size: 64px; }

/* For .avatar-emoji we want the colored gradient background hidden, since the
   emoji itself carries the color. Keep the soft purple wash for emoji though. */
.avatar:has(.avatar-emoji) { background: transparent; box-shadow: none; }

/* Larger profile preview on /profile */
.avatar-xl {
  width: 120px;
  height: 120px;
}
.photo-section .avatar-xl {
  margin: 0 auto var(--space-3);
  box-shadow: 0 8px 24px rgba(108, 99, 255, 0.18);
}

/* Animal emoji picker grid */
.emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
@media (max-width: 480px) {
  .emoji-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.emoji-tile {
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border-soft);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
  display: grid;
  place-items: center;
}
.emoji-tile:hover { border-color: var(--color-accent-border); background: var(--color-accent-soft); }
.emoji-tile:active { transform: scale(0.92); }
.emoji-tile.is-selected {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
  box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.16);
}

/* Radio tile grid (gender / interested-in) */
.radio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-2);
}
.radio-tile {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border-soft);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-soft);
  overflow-wrap: anywhere;
}
.radio-tile input { accent-color: var(--color-accent); }
.radio-tile:hover { border-color: var(--color-accent-border); }
.radio-tile.is-selected {
  background: var(--color-accent-soft);
  border-color: var(--color-accent);
  color: var(--color-accent-hot);
  font-weight: 600;
}

/* Row of action buttons inside a fieldset */
.row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

/* Motto offer cards */
.motto-offer {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: var(--space-2) 0;
}
.motto-card {
  text-align: left;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border-soft);
  font-size: 14px;
  line-height: 1.4;
  color: var(--color-ink);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
  overflow-wrap: anywhere;
}
.motto-card:hover { border-color: var(--color-accent-border); background: var(--color-accent-soft); }
.motto-card.is-selected {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
  color: var(--color-accent-hot);
  font-weight: 600;
}

/* Languages section — ordered list of selected languages with reorder controls */
.lang-extra { margin-top: var(--space-3); }

/* Twemoji-based flags. Used because Windows doesn't render flag emojis
   natively (it falls back to showing the 2-letter regional indicator codes,
   e.g. "DE"). SVG from Twemoji renders identically on every platform. */
.flag-emoji,
.flagico {
  display: inline-block;
  height: 14px;
  width: auto;
  vertical-align: -2px;
  margin-right: 4px;
  flex-shrink: 0;
}

/* Selected languages list — shown above the picker, in priority order */
.lang-selected-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.lang-selected-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 6px 6px 12px;
  background: var(--color-accent);
  color: white;
  border-radius: var(--radius-pill, 999px);
  font-size: 14px;
  font-weight: 500;
}
.lang-selected-row .lang-name { white-space: nowrap; }
.lang-selected-row .lang-actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.lang-selected-row .lang-actions button {
  background: rgba(255,255,255,0.18);
  color: white;
  border: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  padding: 0;
  font-family: inherit;
}
.lang-selected-row .lang-actions button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.lang-selected-row .lang-actions button:not(:disabled):hover {
  background: rgba(255,255,255,0.32);
}
.lang-selected-row .lang-actions .lang-remove {
  background: rgba(255,255,255,0.28);
}

/* When at the cap, fade the picker so it's clear no more can be added */
.lang-picker.is-full .chip:not(.on),
.lang-picker.is-full input,
.lang-picker.is-full select {
  opacity: 0.45;
  pointer-events: none;
}
.lang-cap-hint {
  font-size: 12px;
  color: var(--color-muted);
  margin-top: var(--space-1);
}

/* Data policy banner (shown at top of profile when current version not accepted) */
.data-policy-banner {
  border: 2px solid var(--color-accent);
  background: var(--color-accent-soft);
  margin-bottom: var(--space-4);
}
.data-policy-banner h3 {
  margin: 0 0 var(--space-2);
  color: var(--color-accent-hot);
}
.data-policy-banner code {
  background: var(--color-surface);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
}

/* ============================================================================
   Chunk C2b — priority lists, profession rows, interest stars
   ============================================================================ */

/* Priority list (life goals, values) */
.priority-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.priority-row {
  display: grid;
  grid-template-columns: 32px 28px 1fr auto;
  align-items: center;
  gap: var(--space-2);
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--color-accent-soft);
  border: 1.5px solid var(--color-accent);
}
.priority-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  color: var(--color-accent-hot);
  text-align: center;
}
.priority-icon { font-size: 22px; line-height: 1; }
.priority-label {
  font-weight: 600;
  color: var(--color-ink);
  overflow-wrap: anywhere;
}
.priority-actions {
  display: inline-flex;
  gap: 4px;
}
.priority-actions button {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  font-size: 16px;
  cursor: pointer;
  color: var(--color-text-soft);
  display: grid;
  place-items: center;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.priority-actions button:hover { color: var(--color-accent-hot); border-color: var(--color-accent-border); }
.priority-actions button:disabled { opacity: 0.35; cursor: not-allowed; }
.prio-remove { color: var(--color-danger) !important; }

/* Profession list */
.profession-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.profession-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 10px 14px;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border-soft);
}
.profession-title {
  font-weight: 500;
  color: var(--color-ink);
  overflow-wrap: anywhere;
}
.prof-remove {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--color-border-soft);
  color: var(--color-danger);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.prof-remove:hover { background: var(--color-danger-soft); }

/* Interest chip with star — chip is now a span with role=button so the
   inner star <button> is valid HTML (a button can't be inside a button). */
.chip[role="button"] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
}
.chip.starable { padding-right: 6px; }
.chip-star {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid transparent;
  color: var(--color-text-muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
}
.chip-star:hover { color: #FFC26D; transform: scale(1.15); }
.chip-star.is-top { color: #FFC26D; background: rgba(255, 194, 109, 0.16); }
.chip.on .chip-star { background: rgba(255, 255, 255, 0.7); }

/* Free tag star */
.tag-star {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-left: 4px;
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  font-size: 13px;
  cursor: pointer;
}
.tag-star:hover { color: #FFC26D; }
.tag-star.is-top { color: #FFC26D; }
.tag.is-top { border-color: #FFC26D; background: rgba(255, 194, 109, 0.10); }

/* ============================================================================
   Chunk D1 — similarity-ranked match cards, similarity badge, shared row,
   reject button
   ============================================================================ */

.match-card.v2-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
}

.match-card-head {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}

.match-name-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.match-motto {
  margin: 6px 0 0;
  font-style: italic;
  color: var(--color-text-soft);
  font-size: 14px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.similarity-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 194, 109, 0.20), rgba(255, 113, 82, 0.16));
  border: 1px solid rgba(255, 194, 109, 0.55);
  color: var(--color-ink);
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
}
.similarity-badge .sim-icon { font-size: 13px; line-height: 1; }

.chip-prof {
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  color: var(--color-text-soft);
  font-weight: 500;
}

.match-shared {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--color-surface-alt, rgba(111, 92, 255, 0.06));
  border: 1px solid var(--color-border-soft);
}
.shared-chip {
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--color-ink);
}
.shared-chip strong { font-weight: 700; color: var(--color-accent-hot); }
.shared-chip em { font-style: italic; color: var(--color-text-soft); }
.shared-chip .small { font-size: 12px; }

.btn-reject {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  border: 1.5px solid var(--color-border-soft);
  color: var(--color-text-muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
  z-index: 1;
}
.btn-reject:hover {
  color: var(--color-danger);
  border-color: var(--color-danger);
  background: var(--color-danger-soft);
  transform: scale(1.08);
}

/* ============================================================================
   Chunk D — Match tab v2 (similarity cards, filters, empty states)
   ============================================================================ */

/* --- Tab header --- */
.match-tab-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: var(--space-3);
  padding: 0 var(--space-1);
}
.match-tab-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 28px;
  line-height: 1.15;
  margin: 0 0 4px;
  color: var(--color-ink);
  letter-spacing: -0.02em;
}
.match-tab-subtitle {
  font-size: 14px;
  color: var(--color-text-muted);
  margin: 0;
}

/* --- Filter bar --- */
.filter-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  padding: 10px 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 12px;
  z-index: 5;
  flex-wrap: wrap;
}
.filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 14px;
  background: var(--color-accent-bg);
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-accent-border);
  font-size: 13px;
}
.filter-pill .filter-label {
  font-weight: 600;
  color: var(--color-accent-hot);
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.filter-pill select,
.filter-pill .age-range input {
  background: transparent;
  border: none;
  outline: none;
  font: inherit;
  color: var(--color-ink);
  padding: 4px 4px;
  border-radius: 6px;
}
.filter-pill select { padding-right: 18px; cursor: pointer; }
.filter-pill .age-range {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.filter-pill .age-range input {
  width: 38px;
  text-align: center;
  -moz-appearance: textfield;
}
.filter-pill .age-range input::-webkit-inner-spin-button,
.filter-pill .age-range input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.age-dash { color: var(--color-text-faint); padding: 0 2px; }
.filter-reset {
  margin-left: auto;
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.filter-reset:hover { background: var(--color-accent-soft); color: var(--color-accent-hot); }

/* --- Pool meta line above stack --- */
.pool-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-1);
  margin-bottom: var(--space-3);
  font-size: 13px;
  color: var(--color-text-muted);
}
.pool-count { font-weight: 600; }
.link-btn {
  background: transparent;
  border: none;
  font: inherit;
  color: var(--color-accent-hot);
  cursor: pointer;
  font-weight: 600;
  padding: 0;
  text-decoration: underline;
  text-decoration-color: var(--color-accent-border);
  text-underline-offset: 3px;
}
.link-btn:hover { text-decoration-color: var(--color-accent-hot); }

/* --- Match stack --- */
.match-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* --- Match card v2 --- */
.match-card-v2 {
  position: relative;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border-soft);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: var(--space-5) var(--space-4) var(--space-4);
  overflow: hidden;
  transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1),
              opacity 220ms,
              box-shadow var(--transition-base);
}
.match-card-v2:hover {
  box-shadow: var(--shadow-lg);
}
/* Sketchy hand-drawn arc in the top-right corner (brand cue) */
.match-card-v2::before {
  content: '';
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border: 3px solid var(--color-accent-soft);
  border-radius: 50%;
  border-right-color: transparent;
  border-bottom-color: transparent;
  transform: rotate(-20deg);
  opacity: 0.5;
  pointer-events: none;
}

/* Slide-out animation on reject */
.match-card-v2.rejecting {
  transform: translateX(40%) rotate(4deg);
  opacity: 0;
}

.card-reject {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 20px;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 2;
  transition: all var(--transition-fast);
}
.card-reject:hover {
  border-color: var(--color-danger);
  color: var(--color-danger);
  background: var(--color-danger-soft);
  transform: scale(1.1);
}

.card-common-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: linear-gradient(135deg, #F3EFFF 0%, #FFE7D1 100%);
  color: var(--color-accent-hot);
  font-weight: 700;
  font-size: 12px;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-accent-border);
  z-index: 2;
  letter-spacing: 0.01em;
}

.card-hero {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-3);
}

.avatar-xl {
  width: 96px;
  height: 96px;
  font-size: 44px;
  border: 3px solid var(--color-accent-soft);
}

.card-body { text-align: center; padding: 0 var(--space-2); }
.card-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  margin: 0 0 2px;
  color: var(--color-ink);
  letter-spacing: -0.01em;
}
.card-meta {
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-2);
}
.card-motto {
  font-style: italic;
  font-size: 15px;
  color: var(--color-text-soft);
  margin: var(--space-2) 0;
  line-height: 1.5;
  padding: 0 var(--space-2);
}
.card-profs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-bottom: var(--space-3);
}
.prof-pill {
  display: inline-block;
  background: var(--color-accent-bg);
  color: var(--color-accent-hot);
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--color-accent-border);
}

/* "What you share" section */
.card-shared {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  text-align: left;
}
.shared-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.shared-divider::before,
.shared-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border-soft);
}
.shared-divider span {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-faint);
}
.shared-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.shared-list li {
  font-size: 14px;
  color: var(--color-text);
  line-height: 1.5;
  padding: 6px 10px;
  background: var(--color-bg-1);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-accent-border);
}
.shared-list li strong { color: var(--color-accent-hot); font-weight: 700; }
.card-shared-empty p {
  text-align: center;
  font-style: italic;
}

/* Similarity meter */
.similarity-meter {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding: 0 var(--space-1);
}
.meter-label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  min-width: 30px;
}
.meter-track {
  flex: 1;
  height: 6px;
  background: var(--color-border-soft);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.meter-fill {
  height: 100%;
  background: linear-gradient(90deg, #C5BDFF 0%, #6F5CFF 50%, #FFC26D 100%);
  border-radius: var(--radius-pill);
  transition: width 0.4s ease-out;
}

/* Card actions */
.card-actions {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--color-border-soft);
}
.btn-propose { width: 100%; }

/* --- Skeleton --- */
.skeleton-card { padding: var(--space-5) var(--space-4); }
.skeleton-card::before { display: none; }
.skel-circle {
  background: linear-gradient(90deg, var(--color-bg-1) 0%, var(--color-bg-2) 50%, var(--color-bg-1) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
  border-color: transparent !important;
}
.skel-line {
  height: 12px;
  background: linear-gradient(90deg, var(--color-bg-1) 0%, var(--color-bg-2) 50%, var(--color-bg-1) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
  border-radius: var(--radius-sm);
  margin: 8px auto;
}
.w-30 { width: 30%; }
.w-40 { width: 40%; }
.w-50 { width: 50%; }
.w-60 { width: 60%; }
.w-70 { width: 70%; }
.mt { margin-top: 14px; }
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* --- Empty / paused / error states --- */
.empty-state {
  text-align: center;
  padding: var(--space-7) var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  border: 1.5px dashed var(--color-border);
}
.empty-illu {
  font-size: 56px;
  margin-bottom: var(--space-3);
  filter: drop-shadow(0 6px 18px rgba(108, 99, 255, 0.18));
}
.empty-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  margin: 0 0 var(--space-2);
  color: var(--color-ink);
}
.empty-text {
  color: var(--color-text-soft);
  max-width: 380px;
  margin: 0 auto var(--space-4);
  line-height: 1.55;
}
.empty-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: center;
}
.empty-actions .btn { min-width: 220px; }

/* --- Toast --- */
.mm-toast {
  position: fixed;
  left: 50%;
  bottom: 96px;
  transform: translateX(-50%) translateY(40px);
  background: var(--color-ink);
  color: white;
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 1000;
  max-width: 90%;
  text-align: center;
}
.mm-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* --- Section title for system matches --- */
.system-matches { margin-bottom: var(--space-5); }
.section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  margin: 0 0 4px;
  color: var(--color-ink);
}
.section-hint { font-size: 13px; color: var(--color-text-muted); margin: 0 0 var(--space-3); }

/* ============================================================================
   Chunk D2 — match detail view + tappable card hint
   ============================================================================ */

/* Make the match card visibly tappable */
.match-card-v2 {
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.match-card-v2:hover {
  transform: translateY(-1px);
}
.match-card-v2:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Detail view layout */
.avatar-xl { width: 120px; height: 120px; border-radius: 50%; overflow: hidden; }
.avatar-xl .animal-emoji { font-size: 64px; }
.avatar-xl .avatar-letter { font-size: 56px; }

.match-detail-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
}

.md-header {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  flex-wrap: wrap;
}
.md-header .avatar-xl {
  border: 3px solid var(--color-accent);
  flex-shrink: 0;
}
.md-meta { flex: 1; min-width: 200px; }
.md-name-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.md-name {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 800;
  margin: 0;
  color: var(--color-ink);
}
.md-motto {
  margin: var(--space-2) 0 0;
  font-style: italic;
  font-size: 15px;
  color: var(--color-text-soft);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.md-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-border-soft);
}
.md-section:first-of-type { border-top: none; padding-top: 0; }
.md-section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--color-accent-hot);
  margin: 0;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.md-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Highlight shared section */
.md-shared-block .match-shared {
  border: 1.5px solid var(--color-accent);
  background: linear-gradient(135deg, rgba(111, 92, 255, 0.07), rgba(255, 194, 109, 0.07));
}

/* Priority list inside detail view */
.md-priority-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.md-priority-row {
  display: grid;
  grid-template-columns: 32px 28px 1fr auto;
  align-items: center;
  gap: var(--space-2);
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
}
.md-priority-row.is-shared {
  background: var(--color-accent-soft);
  border-color: var(--color-accent);
}
.md-priority-row .priority-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  color: var(--color-accent-hot);
  text-align: center;
}
.md-priority-row .priority-icon { font-size: 22px; line-height: 1; }
.md-priority-row .priority-label {
  font-weight: 600;
  color: var(--color-ink);
  overflow-wrap: anywhere;
}

.md-shared-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-accent);
  background: var(--color-accent-soft);
  padding: 4px 8px;
  border-radius: 999px;
}

/* + Add buttons for click-to-add */
.btn-add {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--color-surface);
  border: 1.5px dashed var(--color-accent);
  color: var(--color-accent-hot);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition-fast), border-style var(--transition-fast);
}
.btn-add:hover {
  background: var(--color-accent-soft);
  border-style: solid;
}

/* Addable / shared / starred variations on chips inside detail view */
.chip-shared {
  background: var(--color-accent-soft) !important;
  border-color: var(--color-accent) !important;
  color: var(--color-accent-hot);
  font-weight: 600;
}
.chip-addable {
  cursor: pointer;
  border-style: dashed !important;
}
.chip-addable:hover {
  background: var(--color-accent-soft);
}
.chip-starred {
  position: relative;
  background: #6F5CFF !important;
  border-color: #6F5CFF !important;
  color: #fff !important;
}
.chip-starred .add-plus { color: #fff; }
/* starred + shared: stay solid purple (shared sets an !important light bg). */
.chip-starred.chip-shared { background: #6F5CFF !important; color: #fff !important; }
.add-plus {
  display: inline-block;
  font-weight: 700;
  color: var(--color-accent);
}

/* Vibe rows in detail view */
.md-vibe-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.md-vibe-row {
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
}
.md-vibe-row.is-shared {
  background: var(--color-accent-soft);
  border-color: var(--color-accent);
}
.md-vibe-text {
  margin: 0;
  font-style: italic;
  font-size: 14px;
  color: var(--color-ink);
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.md-vibe-response {
  margin: 6px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-soft);
}

/* Detail-view footer actions */
.md-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

/* Toast */
.md-toast {
  position: fixed;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 18px;
  background: var(--color-ink);
  color: white;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  z-index: 999;
  animation: md-toast-in 200ms ease-out;
}
.md-toast.md-toast-out { animation: md-toast-out 400ms ease-in forwards; }
@keyframes md-toast-in {
  from { transform: translateX(-50%) translateY(12px); opacity: 0; }
  to   { transform: translateX(-50%) translateY(0); opacity: 1; }
}
@keyframes md-toast-out {
  to { transform: translateX(-50%) translateY(12px); opacity: 0; }
}

/* ============================================================================
   Chunk C4 — AI description section (Gemini-powered)
   ============================================================================ */

.ai-desc-fieldset {
  position: relative;
  background: linear-gradient(135deg, rgba(243, 239, 255, 0.4) 0%, rgba(255, 241, 230, 0.3) 100%);
  border: 1.5px solid var(--color-accent-border);
}
.ai-desc-fieldset legend {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ai-spark {
  display: inline-block;
  font-size: 18px;
  animation: ai-twinkle 3s ease-in-out infinite;
}
@keyframes ai-twinkle {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.15) rotate(15deg); }
}

.ai-desc-current {
  margin: var(--space-3) 0;
  min-height: 60px;
  transition: opacity 200ms;
}
.ai-desc-current.ai-desc-loading {
  opacity: 0.4;
}

.ai-desc-quote {
  font-style: italic;
  font-size: 16px;
  line-height: 1.55;
  color: var(--color-text);
  margin: 0;
  padding: 14px 18px;
  background: var(--color-surface);
  border-left: 3px solid var(--color-accent);
  border-radius: 6px var(--radius-md) var(--radius-md) 6px;
  box-shadow: var(--shadow-sm);
  position: relative;
}
.ai-desc-quote::before {
  content: '"';
  position: absolute;
  top: -4px;
  left: 8px;
  font-size: 28px;
  color: var(--color-accent-soft);
  font-family: var(--font-display);
}

.ai-desc-empty {
  font-size: 14px;
  color: var(--color-text-muted);
  font-style: italic;
  padding: 16px;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  border: 1px dashed var(--color-border);
  margin: 0;
  text-align: center;
}

/* Quota meter */
.ai-desc-quota {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: var(--space-3) 0 var(--space-2);
  font-size: 12px;
  color: var(--color-text-muted);
}
.ai-quota-label {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ai-quota-meter {
  display: inline-flex;
  gap: 3px;
}
.ai-dot {
  color: var(--color-border);
  font-size: 12px;
  line-height: 1;
}
.ai-dot.filled {
  color: var(--color-accent);
}
.ai-quota-text {
  font-weight: 700;
  color: var(--color-text);
  margin-left: auto;
}
.ai-quota-warn {
  font-size: 13px;
  color: var(--color-warn);
  margin: var(--space-2) 0 0;
  padding: 8px 12px;
  background: var(--color-warn-soft);
  border-radius: var(--radius-sm);
}

.ai-desc-actions { gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-3); }

/* Spinner */
.ai-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: ai-spin 0.8s linear infinite;
  margin-right: 6px;
  vertical-align: -3px;
}
@keyframes ai-spin { to { transform: rotate(360deg); } }

/* Manual editor */
.ai-desc-manual {
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
}
.ai-desc-manual textarea {
  width: 100%;
  resize: vertical;
  min-height: 80px;
  font-family: var(--font-body);
  font-size: 15px;
  padding: 10px 12px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  transition: border-color var(--transition-fast);
}
.ai-desc-manual textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: var(--shadow-glow);
}

/* History */
.ai-desc-history {
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
}
.ai-desc-history-title {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-2);
}
.ai-desc-history-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.ai-desc-history-item {
  padding: 12px;
  background: var(--color-bg-1);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--color-border);
}
.ai-desc-history-item.is-current {
  border-left-color: var(--color-accent);
  background: var(--color-accent-bg);
}
.history-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 12px;
  color: var(--color-text-muted);
}
.history-source { font-weight: 600; }
.history-date { color: var(--color-text-faint); }
.history-current {
  margin-left: auto;
  padding: 2px 8px;
  background: var(--color-accent);
  color: white;
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.history-text {
  font-style: italic;
  font-size: 14px;
  color: var(--color-text);
  margin: 0 0 8px;
  line-height: 1.5;
}
.btn-sm { padding: 4px 10px; font-size: 12px; }
.history-revert { width: auto; }

/* Inline toast (for inside profile-edit) */
.ai-inline-toast {
  position: fixed;
  left: 50%;
  bottom: 96px;
  transform: translateX(-50%) translateY(40px);
  background: var(--color-ink);
  color: white;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 1000;
  max-width: 90%;
  text-align: center;
}
.ai-inline-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* AI bio display on match cards — between motto and professions */
.card-bio {
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-text-soft);
  margin: var(--space-2) 0;
  padding: 10px 14px;
  background: var(--color-bg-1);
  border-radius: var(--radius-md);
  border-left: 2px solid var(--color-accent-soft);
  text-align: left;
}

/* ============================================================================
   Chunk C4 + C5 — AI description section + AI tidied badge
   ============================================================================ */

/* AI description fieldset — distinctive "AI" feel with gradient border accent */
.ai-desc-fieldset {
  position: relative;
  background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-surface-2) 100%);
  border: 1.5px solid var(--color-accent-border);
}
.ai-desc-fieldset legend {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.01em;
  color: var(--color-accent-hot);
}
.ai-spark {
  display: inline-block;
  font-size: 16px;
  animation: ai-spark-pulse 2.4s ease-in-out infinite;
}
@keyframes ai-spark-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.15) rotate(8deg); }
}

.ai-desc-quote {
  margin: 0 0 var(--space-3);
  padding: 14px 16px;
  border-left: 3px solid var(--color-accent);
  background: var(--color-accent-bg);
  border-radius: var(--radius-md);
  font-size: 15px;
  color: var(--color-ink);
  font-style: italic;
  line-height: 1.55;
}
.ai-desc-empty {
  margin: 0 0 var(--space-3);
  padding: 14px 16px;
  border: 1.5px dashed var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font-style: italic;
}

.ai-desc-quota {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--color-bg-1);
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-3);
  font-size: 12px;
}
.ai-quota-label {
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 11px;
}
.ai-quota-meter {
  display: inline-flex;
  gap: 4px;
}
.ai-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  font-size: 0;
  background: var(--color-border-soft);
  border-radius: 50%;
  transition: background var(--transition-base);
}
.ai-dot.filled { background: var(--color-accent); }
.ai-quota-text {
  margin-left: auto;
  font-weight: 700;
  color: var(--color-accent-hot);
}
.ai-quota-warn {
  margin: 0 0 var(--space-3);
  padding: 8px 12px;
  background: var(--color-warn-soft);
  border-radius: var(--radius-md);
  color: var(--color-warn);
  font-size: 13px;
}

.ai-desc-actions { gap: var(--space-2); flex-wrap: wrap; }

.ai-desc-manual {
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-soft);
}
.ai-desc-manual textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 14px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-border);
  resize: vertical;
  min-height: 80px;
}
.ai-desc-manual textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: var(--shadow-glow);
}
.ai-desc-clear { color: var(--color-danger); }

.ai-desc-history {
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: var(--color-bg-1);
  border-radius: var(--radius-md);
  font-size: 13px;
}
.ai-desc-history-item {
  padding: 10px 0;
  border-bottom: 1px dashed var(--color-border-soft);
}
.ai-desc-history-item:last-child { border-bottom: none; }
.ai-desc-history-item p { margin: 0 0 6px; color: var(--color-text); }
.ai-desc-history-item .meta {
  display: flex; gap: 8px; align-items: center;
  font-size: 11px; color: var(--color-text-muted);
}

/* AI "tidied this up" badge on professions */
.profession-row.ai-tidied {
  background: linear-gradient(135deg, var(--color-accent-bg) 0%, var(--color-bg-1) 100%);
  border: 1px solid var(--color-accent-border);
}
.ai-tidied-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  cursor: help;
  font-size: 13px;
  animation: ai-tidied-glow 1.5s ease-out;
}
@keyframes ai-tidied-glow {
  0%   { transform: scale(0); opacity: 0; }
  50%  { transform: scale(1.4); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* ============================================================================
   Chunk E1 — Meet tab restructure (3 sections + activity dots)
   ============================================================================ */

.meet-tab-header {
  margin-bottom: var(--space-4);
  padding: 0 var(--space-1);
}
.meet-tab-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 28px;
  line-height: 1.15;
  margin: 0 0 4px;
  color: var(--color-ink);
  letter-spacing: -0.02em;
}
.meet-tab-subtitle {
  font-size: 14px;
  color: var(--color-text-muted);
  margin: 0;
}

.meet-section {
  margin-bottom: var(--space-6);
}
.meet-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: var(--space-3);
  padding: 0 var(--space-1);
}
.meet-section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  margin: 0;
  color: var(--color-ink);
  letter-spacing: -0.01em;
}
.meet-section-subtitle {
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 0;
  text-align: right;
}

/* Requests section — slight urgency cue */
.meet-section-requests .meet-section-title {
  color: var(--color-accent-hot);
}
.meet-section-requests .meet-section-title::before {
  content: '👋 ';
  margin-right: 4px;
}
.meet-section-confirmed .meet-section-title::before {
  content: '✨ ';
  margin-right: 4px;
}
.meet-section-sent .meet-section-title::before {
  content: '⏳ ';
  margin-right: 4px;
}

.meet-section-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* --- Meet card base --- */
.meet-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.meet-card-clickable {
  cursor: pointer;
}
.meet-card-clickable:hover,
.meet-card-clickable:focus-visible {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-accent-border);
}

.meet-card-avatar {
  position: relative;
  display: grid;
  place-items: center;
}

.meet-card-body {
  min-width: 0; /* allow text truncation */
}
.meet-card-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 2px;
}
.meet-card-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  margin: 0;
  color: var(--color-ink);
}
.meet-card-ago {
  font-size: 11px;
  color: var(--color-text-faint);
  font-variant-numeric: tabular-nums;
}
.meet-card-soon {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-warn);
  padding: 2px 8px;
  background: var(--color-warn-soft);
  border-radius: var(--radius-pill);
}

.meet-card-line {
  font-size: 13px;
  color: var(--color-text);
  margin: 2px 0;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.meet-card-line-strong {
  font-weight: 600;
  color: var(--color-ink);
}
.meet-card-line-muted {
  color: var(--color-text-soft);
  font-style: italic;
}

.meet-card-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}
.meet-card-chevron {
  color: var(--color-text-faint);
  font-size: 22px;
  line-height: 1;
}

/* Request card — slight accent border */
.meet-card-request {
  border-color: var(--color-accent-border);
  background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-accent-bg) 100%);
  cursor: pointer;
}
.meet-card-request:hover {
  border-color: var(--color-accent);
  box-shadow: 0 8px 24px rgba(108, 99, 255, 0.18);
}
.meet-card-request .btn-primary {
  padding: 7px 14px;
  font-size: 13px;
  white-space: nowrap;
}

/* Sent — softer, patient feel */
.meet-card-sent {
  border-style: dashed;
  background: var(--color-surface-2);
}

/* Confirmed — celebratory */
.meet-card-confirmed {
  border-color: var(--color-success);
  border-width: 1.5px;
}
.meet-card-confirmed::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--color-success);
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

/* --- Activity dot --- */
.activity-dot {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--color-surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.activity-online { background: #2BA373; }
.activity-online::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: #2BA373;
  opacity: 0.3;
  animation: activity-pulse 2.5s ease-in-out infinite;
}
@keyframes activity-pulse {
  0%, 100% { transform: scale(1); opacity: 0.3; }
  50%      { transform: scale(1.5); opacity: 0; }
}
.activity-recent { background: #FFC26D; }
.activity-today  { background: #C5BDFF; }
.activity-week   { background: #DDD5F0; }

/* Status pills (used in cards) */
.status-pill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.status-confirmed {
  background: var(--color-success-soft);
  color: var(--color-success);
}
.status-waiting {
  background: var(--color-bg-1);
  color: var(--color-text-muted);
}

/* Skeleton for meet section */
.skeleton-meet { padding: var(--space-3) var(--space-4); }
.skeleton-meet .skel-circle { width: 48px; height: 48px; }

/* Empty state for whole Meet tab */
.empty-meet { padding: var(--space-6) var(--space-4); }

/* Responsive: stack actions below on narrow */
@media (max-width: 420px) {
  .meet-card {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
  }
  .meet-card-actions {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: flex-end;
    border-top: 1px dashed var(--color-border-soft);
    padding-top: var(--space-2);
  }
}

/* ============================================================================
   Chunk E2 — Home callout banner + tab badges
   ============================================================================ */

.home-callout {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding: 12px 16px;
  margin: 0 0 var(--space-4);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  animation: callout-enter 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes callout-enter {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.home-callout-requests {
  background: linear-gradient(135deg, #FFC26D 0%, #FF7152 100%);
  color: white;
}
.home-callout-today {
  background: linear-gradient(135deg, #6F5CFF 0%, #C5BDFF 100%);
  color: white;
}
.home-callout-soon {
  background: linear-gradient(135deg, #C5BDFF 0%, #FFF1E6 100%);
  color: var(--color-ink);
}

.callout-emoji {
  font-size: 28px;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.12));
}
.callout-body { min-width: 0; }
.callout-line {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.callout-title { font-size: 15px; }
.callout-title strong { font-weight: 700; }
.callout-subtitle { font-size: 12px; opacity: 0.85; margin-top: 2px; }

.callout-cta {
  background: rgba(255, 255, 255, 0.22);
  color: inherit;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-pill);
  padding: 7px 14px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: all var(--transition-fast);
  backdrop-filter: blur(4px);
}
.callout-cta:hover {
  background: rgba(255, 255, 255, 0.35);
  transform: translateY(-1px);
}
.home-callout-soon .callout-cta {
  background: rgba(108, 99, 255, 0.15);
  color: var(--color-accent-hot);
  border-color: var(--color-accent-border);
}
.home-callout-soon .callout-cta:hover {
  background: var(--color-accent-soft);
}

/* --- Tab badges (Pass 7: was a red bubble with a number — too loud. Now a
   small brand-orange dot. We still show counts to screen readers via the
   element text, but visually it's just "there's something new here") --- */
.tab {
  position: relative;
}
.tab-badge {
  position: absolute;
  top: 8px;
  right: calc(50% - 22px);
  width: 7px;
  height: 7px;
  padding: 0;
  border-radius: 50%;
  background: var(--color-warning, #FFC26D);
  color: transparent;          /* hide the number visually; still readable to AT */
  font-size: 0;
  line-height: 0;
  text-indent: -9999px;
  overflow: hidden;
  box-shadow: 0 0 0 2px var(--color-surface, #fff);  /* halo so it pops over any nav bg */
  letter-spacing: 0;
}
.tab.active .tab-badge {
  background: var(--color-primary, #6F5CFF);
}
.tab-badge.badge-active {
  animation: badge-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes badge-pop {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* Adjust tab padding when badge can be present */
.tab .tab-label { display: inline; }

/* ============================================================================
   Chunk E3 — Profile completeness widget
   ============================================================================ */

.completeness-card {
  background: linear-gradient(135deg, #FFF1E6 0%, #F3EFFF 100%);
  border: 1.5px solid var(--color-accent-border);
  border-radius: var(--radius-xl);
  padding: var(--space-4) var(--space-4) var(--space-3);
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}
/* Sketchy hand-drawn arc in corner */
.completeness-card::before {
  content: '';
  position: absolute;
  top: -30px;
  left: -30px;
  width: 100px;
  height: 100px;
  border: 3px solid var(--color-accent-soft);
  border-radius: 50%;
  border-top-color: transparent;
  border-right-color: transparent;
  opacity: 0.6;
  pointer-events: none;
}

.completeness-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: center;
  margin-bottom: var(--space-3);
}

.completeness-ring {
  position: relative;
  width: 72px;
  height: 72px;
}
.ring-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.ring-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.6);
  stroke-width: 3;
}
.ring-fg {
  fill: none;
  stroke: url(#ring-gradient);
  stroke: var(--color-accent);
  stroke-width: 3;
  stroke-linecap: round;
  transition: stroke-dasharray 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.completeness-starting_out .ring-fg { stroke: #FFC26D; }
.completeness-getting_there .ring-fg { stroke: var(--color-accent); }
.completeness-strong .ring-fg { stroke: var(--color-accent-hot); }
.completeness-complete .ring-fg { stroke: var(--color-success); }

.completeness-score {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  color: var(--color-ink);
  letter-spacing: -0.02em;
}
.completeness-percent {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-left: 2px;
}

.completeness-text { min-width: 0; }
.completeness-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  margin: 0 0 2px;
  color: var(--color-ink);
}
.completeness-body {
  font-size: 13px;
  color: var(--color-text-soft);
  margin: 0;
  line-height: 1.4;
}

/* Profile completion — option C: horizontal meter (no ring) */
.completeness-meter-head { min-width: 0; margin-bottom: var(--space-3); }
.completeness-meter { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.cm-bar { flex: 1; height: 9px; border-radius: 999px; background: rgba(255,255,255,0.75); overflow: hidden; }
.cm-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--color-accent), var(--color-accent-hot)); transition: width 0.6s cubic-bezier(0.34,1.56,0.64,1); }
.cm-pct { font-family: var(--font-display); font-weight: 800; font-size: 15px; min-width: 42px; text-align: right; color: var(--color-accent); letter-spacing: -0.01em; }
.completeness-starting_out .cm-bar span { background: linear-gradient(90deg, #FFC26D, #FF9F4D); }
.completeness-starting_out .cm-pct { color: #E08524; }
.completeness-strong .cm-pct { color: var(--color-accent-hot); }
.completeness-complete .cm-bar span { background: linear-gradient(90deg, #34C77B, var(--color-success)); }
.completeness-complete .cm-pct { color: var(--color-success); }

.completeness-next {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.completeness-jump {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 10px 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  font: inherit;
  font-size: 13px;
  color: var(--color-text);
  cursor: pointer;
  text-align: left;
  transition: all var(--transition-fast);
}
.completeness-jump:hover {
  border-color: var(--color-accent);
  background: var(--color-accent-bg);
  transform: translateX(2px);
}
.jump-label {
  font-weight: 600;
  color: var(--color-ink);
}
.jump-cta {
  font-size: 12px;
  color: var(--color-accent-hot);
  font-weight: 700;
  white-space: nowrap;
}
.jump-cta::after { content: ' →'; }

/* Jump-to-field highlight */
.jump-highlight {
  animation: jump-flash 1.8s ease-out;
  scroll-margin-top: 80px;
}
@keyframes jump-flash {
  0% { box-shadow: 0 0 0 0 rgba(108, 99, 255, 0.45); background-color: rgba(108, 99, 255, 0.08); }
  100% { box-shadow: 0 0 0 0 rgba(108, 99, 255, 0); background-color: transparent; }
}

/* ============================================================================
   Chunk E4 — Connect tab redesign
   ============================================================================ */

.connect-tab-header {
  margin-bottom: var(--space-4);
  padding: 0 var(--space-1);
}
.connect-tab-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 28px;
  line-height: 1.15;
  margin: 0 0 4px;
  color: var(--color-ink);
  letter-spacing: -0.02em;
}
.connect-tab-subtitle {
  font-size: 14px;
  color: var(--color-text-muted);
  margin: 0;
}

.connect-meta {
  display: flex;
  align-items: center;
  padding: 0 var(--space-1);
  margin-bottom: var(--space-3);
  font-size: 13px;
  color: var(--color-text-muted);
}
.connect-count {
  font-weight: 700;
  color: var(--color-accent-hot);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 11px;
}

.connect-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.connect-card {
  position: relative;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border-soft);
  border-radius: var(--radius-xl);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
  overflow: hidden;
}
.connect-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
/* Brand-aligned hand-drawn arc */
.connect-card::before {
  content: '';
  position: absolute;
  top: -25px;
  right: -25px;
  width: 80px;
  height: 80px;
  border: 3px solid var(--color-accent-soft);
  border-radius: 50%;
  border-bottom-color: transparent;
  border-left-color: transparent;
  opacity: 0.45;
  pointer-events: none;
}

.connect-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.connect-avatar {
  position: relative;
  flex-shrink: 0;
}

.connect-name-block { min-width: 0; flex: 1; }
.connect-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  margin: 0 0 2px;
  color: var(--color-ink);
  letter-spacing: -0.01em;
}
.connect-meta-line {
  font-size: 12px;
  color: var(--color-text-muted);
  margin: 0;
}
.connect-motto {
  font-size: 13px;
  color: var(--color-text-soft);
  font-style: italic;
  margin: 4px 0 0;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.connect-meet {
  font-size: 13px;
  color: var(--color-text-soft);
  margin: 0 0 var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--color-border-soft);
}
.connect-meet strong { color: var(--color-ink); }

.connect-channels {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.channel-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: var(--color-accent-bg);
  color: var(--color-accent-hot);
  border: 1px solid var(--color-accent-border);
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: all var(--transition-fast);
}
.channel-chip:hover {
  background: var(--color-accent);
  color: white;
  transform: translateY(-1px);
  box-shadow: var(--shadow-accent);
}
.channel-icon {
  font-size: 14px;
  line-height: 1;
}
.channel-instagram { background: linear-gradient(135deg, #FDE8F0 0%, #FFE0EC 100%); color: #C2185B; border-color: #F8BBD0; }
.channel-instagram:hover { background: linear-gradient(135deg, #E1306C 0%, #C2185B 100%); color: white; }
.channel-whatsapp { background: #DCFCE7; color: #166534; border-color: #BBF7D0; }
.channel-whatsapp:hover { background: #25D366; color: white; }
.channel-tiktok { background: #1A1A1A; color: white; border-color: #333; }
.channel-tiktok:hover { background: #000; }
.channel-linkedin { background: #DBEAFE; color: #1E40AF; border-color: #BFDBFE; }
.channel-linkedin:hover { background: #0A66C2; color: white; }

.connect-no-channels {
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 0;
  padding: 10px 14px;
  background: var(--color-bg-1);
  border-radius: var(--radius-md);
}

.skeleton-connect { padding: var(--space-4); }
.skeleton-connect .skel-circle { width: 48px; height: 48px; }
.empty-connect { padding: var(--space-6) var(--space-4); }

/* ============================================================================
   Chunk E — Meet tab v2 + Connect tab polish
   ============================================================================ */

/* Tab headers (shared with Match tab style) */
.meet-tab-header {
  margin-bottom: var(--space-4);
  padding: 0 var(--space-1);
}
.meet-tab-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 28px;
  line-height: 1.15;
  margin: 0 0 4px;
  color: var(--color-ink);
  letter-spacing: -0.02em;
}
.meet-tab-subtitle {
  font-size: 14px;
  color: var(--color-text-muted);
  margin: 0;
}

/* Section wrapper */
.meet-section {
  margin-bottom: var(--space-6);
}
.meet-section-head {
  margin-bottom: var(--space-3);
  padding: 0 var(--space-1);
}
.meet-section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-ink);
}
.meet-section-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  background: var(--color-accent);
  color: white;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 700;
}
.meet-section-hint {
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 2px 0 0;
}

/* Section-specific color treatments */
.meet-section-requests .meet-section-count { background: var(--color-warn); color: white; }
.meet-section-requests .meet-section-title::before { content: ''; }
.meet-section-confirmed .meet-section-count { background: var(--color-success); }

/* Body */
.meet-section-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Empty within section */
.meet-section-empty {
  padding: var(--space-4) var(--space-4);
  background: var(--color-surface);
  border: 1.5px dashed var(--color-border);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.meet-empty-illu {
  font-size: 28px;
  flex-shrink: 0;
}
.meet-empty-text {
  margin: 0;
  font-size: 13px;
  color: var(--color-text-soft);
  line-height: 1.5;
}

/* Meet row */
.meet-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.meet-row.is-clickable {
  cursor: pointer;
}
.meet-row.is-clickable:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.meet-row.is-actionable {
  border-color: var(--color-warn-soft);
  background: linear-gradient(180deg, #FFF8EE 0%, var(--color-surface) 100%);
  position: relative;
}
.meet-row.is-actionable::before {
  content: '';
  position: absolute;
  left: -1.5px;
  top: -1.5px;
  bottom: -1.5px;
  width: 4px;
  background: var(--color-warn);
  border-top-left-radius: var(--radius-lg);
  border-bottom-left-radius: var(--radius-lg);
}

/* Avatar column with activity dot */
.meet-row-avatar {
  position: relative;
  flex-shrink: 0;
}
.activity-dot {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--color-surface);
  font-size: 0;
  line-height: 0;
}
.activity-dot-now    { background: #21C97A; }   /* green */
.activity-dot-recent { background: #FFC26D; }   /* brand orange */

/* Body */
.meet-row-body { min-width: 0; }
.meet-row-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  margin: 0 0 2px;
  color: var(--color-ink);
}
.meet-line {
  margin: 0 0 4px;
  font-size: 14px;
  color: var(--color-text);
  line-height: 1.4;
}
.meet-detail {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.4;
}

/* Action column */
.meet-row-action { flex-shrink: 0; }
.btn-respond { white-space: nowrap; }
.meet-pill {
  display: inline-block;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.meet-pill-waiting {
  background: var(--color-accent-bg);
  color: var(--color-accent-hot);
  border: 1px solid var(--color-accent-border);
}
.meet-pill-confirmed {
  background: var(--color-success-soft);
  color: var(--color-success);
  border: 1px solid var(--color-success);
}

/* Skeleton row */
.skeleton-row { background: var(--color-surface); }

/* ============================================================================
   Connect tab polish
   ============================================================================ */
.connection-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.conn-card {
  position: relative;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border-soft);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4);
  overflow: hidden;
}
/* Sketchy peach corner accent (different from match cards) */
.conn-card::before {
  content: '';
  position: absolute;
  top: -25px;
  right: -25px;
  width: 90px;
  height: 90px;
  border: 3px solid #FFE7D1;
  border-radius: 50%;
  border-right-color: transparent;
  border-bottom-color: transparent;
  transform: rotate(-20deg);
  opacity: 0.6;
  pointer-events: none;
}
.conn-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.conn-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  margin: 0;
  color: var(--color-ink);
}
.conn-city {
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 2px 0 0;
}
.conn-meet-line {
  font-size: 12px;
  color: var(--color-text-faint);
  margin: 4px 0 0;
  font-style: italic;
}
.conn-channels {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.conn-channel {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px 7px 9px;
  background: var(--color-accent-bg);
  border: 1px solid var(--color-accent-border);
  border-radius: var(--radius-pill);
  font-size: 13px;
  text-decoration: none;
  color: var(--color-accent-hot);
  font-weight: 600;
  transition: all var(--transition-fast);
}
.conn-channel:hover {
  background: var(--color-accent);
  color: white;
  border-color: var(--color-accent);
  box-shadow: var(--shadow-accent);
}
.conn-channel-icon { font-size: 14px; line-height: 1; }
.conn-no-channels {
  margin: 0;
  padding: var(--space-3);
  background: var(--color-bg-1);
  border-radius: var(--radius-md);
  font-size: 13px;
  color: var(--color-text-muted);
  font-style: italic;
  text-align: center;
}

/* ============================================================================
   Chunk E5 — Cancel-proposal button styling
   ============================================================================ */

.link-btn-danger {
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: all var(--transition-fast);
}
.link-btn-danger:hover {
  color: var(--color-danger);
  text-decoration-color: var(--color-danger);
  background: var(--color-danger-soft);
}
.link-btn-danger:disabled {
  opacity: 0.5;
  cursor: wait;
  text-decoration: none;
  background: transparent !important;
}

/* Stack the Waiting pill above the Cancel link */
.meet-row-action {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

/* ============================================================================
   Landing page v2 — marketing-driven
   ============================================================================ */

.hero-v2 {
  text-align: center;
  padding: var(--space-7) var(--space-3) var(--space-6);
  position: relative;
  overflow: hidden;
}
.hero-v2::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -80px;
  width: 220px;
  height: 220px;
  border: 6px solid var(--color-accent-soft);
  border-radius: 50%;
  border-right-color: transparent;
  border-bottom-color: transparent;
  transform: rotate(-22deg);
  opacity: 0.6;
  pointer-events: none;
  z-index: 0;
}
.hero-v2::after {
  content: '';
  position: absolute;
  bottom: -40px;
  left: -50px;
  width: 140px;
  height: 140px;
  border: 4px solid #FFE7D1;
  border-radius: 50%;
  border-left-color: transparent;
  border-top-color: transparent;
  transform: rotate(35deg);
  opacity: 0.7;
  pointer-events: none;
  z-index: 0;
}
.hero-v2 > * { position: relative; z-index: 1; }
.hero-badge {
  display: inline-block;
  padding: 6px 14px;
  background: linear-gradient(135deg, var(--color-accent-bg) 0%, #FFE7D1 100%);
  color: var(--color-accent-hot);
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid var(--color-accent-border);
  margin-bottom: var(--space-4);
}
.hero-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 42px;
  line-height: 1.05;
  margin: 0 0 var(--space-4);
  color: var(--color-ink);
  letter-spacing: -0.03em;
}
.hero-title-accent {
  background: linear-gradient(135deg, var(--color-accent) 0%, #FFC26D 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}
.hero-lede {
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-soft);
  max-width: 460px;
  margin: 0 auto var(--space-5);
}
.hero-v2 .hero-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: stretch;
  max-width: 360px;
  margin: 0 auto var(--space-3);
}
@media (min-width: 480px) {
  .hero-v2 .hero-actions {
    flex-direction: row;
    justify-content: center;
  }
  .hero-v2 .hero-actions .btn { flex: 1; max-width: 220px; }
}
.hero-meta {
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 0;
}

/* Differentiator pillars */
.pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
@media (min-width: 720px) {
  .pillars { grid-template-columns: repeat(3, 1fr); }
}
.pillar {
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border-soft);
  border-radius: var(--radius-xl);
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.pillar:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.pillar-icon {
  font-size: 36px;
  margin-bottom: var(--space-2);
  filter: drop-shadow(0 4px 12px rgba(108, 99, 255, 0.18));
}
.pillar-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  margin: 0 0 var(--space-2);
  color: var(--color-ink);
}
.pillar-body {
  font-size: 14px;
  color: var(--color-text-soft);
  line-height: 1.55;
  margin: 0;
}

/* Section h2 — shared style */
.section-h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 24px;
  margin: 0 0 var(--space-4);
  color: var(--color-ink);
  text-align: center;
  letter-spacing: -0.01em;
}

/* How section */
.how-section {
  margin-bottom: var(--space-6);
  padding: var(--space-5) 0;
}
.how-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 580px;
  margin: 0 auto;
}
.how-steps li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-soft);
}
.how-step-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  font-size: 22px;
  background: #fff;
  box-shadow: 0 3px 9px rgba(18, 0, 154, 0.10);
}
/* Subtle per-step tint, cycling the brand palette */
.how-steps li:nth-child(1) .how-step-icon { background: linear-gradient(140deg, #efeaff, #fff); }
.how-steps li:nth-child(2) .how-step-icon { background: linear-gradient(140deg, #e7f0ff, #fff); }
.how-steps li:nth-child(3) .how-step-icon { background: linear-gradient(140deg, #efeaff, #fff); }
.how-steps li:nth-child(4) .how-step-icon { background: linear-gradient(140deg, #fff0ea, #fff); }
.how-steps li:nth-child(5) .how-step-icon { background: linear-gradient(140deg, #eafaf0, #fff); }
.how-step-body {
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-text);
}
.how-step-body strong { display: block; color: var(--color-ink); font-weight: 700; margin-bottom: 2px; }

/* AI showcase */
.ai-showcase {
  background: linear-gradient(135deg, var(--color-accent-bg) 0%, #FFF7E6 100%);
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-4);
  margin-bottom: var(--space-6);
  border: 1px solid var(--color-accent-border);
}
.ai-showcase-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: var(--space-4);
}
.ai-showcase-head .ai-spark { font-size: 24px; }
.ai-showcase-head .section-h2 { margin: 0; }
.ai-showcase-list {
  list-style: none;
  padding: 0;
  margin: 0 auto var(--space-3);
  max-width: 540px;
}
.ai-showcase-list li {
  padding: var(--space-3) 0;
  border-bottom: 1px dashed var(--color-accent-border);
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text);
}
.ai-showcase-list li:last-child { border-bottom: none; }
.ai-showcase-list strong { color: var(--color-accent-hot); }
.ai-showcase-foot { text-align: center; margin: 0; }

/* ============================================================================
   Signup + Walkthrough polish
   ============================================================================ */

/* Auth cards — used by signup + login */
.auth-card {
  position: relative;
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  border: 1.5px solid var(--color-border-soft);
  box-shadow: var(--shadow-md);
  padding: var(--space-5);
  margin: var(--space-4) auto;
  max-width: 460px;
  overflow: hidden;
}
.auth-card::before {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 130px;
  height: 130px;
  border: 4px solid var(--color-accent-soft);
  border-radius: 50%;
  border-right-color: transparent;
  border-bottom-color: transparent;
  transform: rotate(-22deg);
  opacity: 0.55;
  pointer-events: none;
}
.auth-card > * { position: relative; z-index: 1; }
.auth-head { text-align: center; margin-bottom: var(--space-5); }
.auth-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  margin: var(--space-3) 0 4px;
}
.auth-sub {
  font-size: 14px;
  color: var(--color-text-muted);
  margin: 0;
}

/* Per-field validation indicator */
.field-validated { position: relative; }
.field-tick {
  position: absolute;
  right: 14px;
  top: 38px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-success);
  color: white;
  font-size: 13px;
  font-weight: 700;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: scale(0.5);
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}
.field-validated.is-valid .field-tick { opacity: 1; transform: scale(1); }

/* Password row with show/hide toggle */
.password-row {
  position: relative;
  display: flex;
  align-items: center;
}
.password-row input { flex: 1; padding-right: 44px; }
.password-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  opacity: 0.65;
  transition: opacity var(--transition-fast);
}
.password-toggle:hover { opacity: 1; background: var(--color-bg-1); }

/* Password strength bar */
.password-strength {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.strength-bar {
  flex: 1;
  height: 4px;
  background: var(--color-border-soft);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.strength-fill {
  height: 100%;
  width: 0;
  border-radius: var(--radius-pill);
  transition: width 0.25s ease-out, background 0.25s;
}
.strength-fill.strength-none   { background: transparent; }
.strength-fill.strength-weak   { background: var(--color-danger); }
.strength-fill.strength-fair   { background: var(--color-warn); }
.strength-fill.strength-good   { background: var(--color-accent); }
.strength-fill.strength-strong { background: var(--color-success); }
.strength-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* Big block CTA */
.btn-block {
  width: 100%;
  margin: var(--space-3) 0 var(--space-3);
}
.spinner-inline {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  vertical-align: -2px;
  margin-right: 6px;
}
@keyframes spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* Trust line below CTA */
.trust-line {
  text-align: center;
  font-size: 12px;
  color: var(--color-text-muted);
  margin: var(--space-3) 0 var(--space-2);
  line-height: 1.5;
}
.trust-link {
  color: var(--color-accent-hot);
  text-decoration: underline;
  text-decoration-color: var(--color-accent-border);
  text-underline-offset: 2px;
}

.auth-altlink {
  text-align: center;
  font-size: 13px;
  color: var(--color-text-muted);
  margin: var(--space-3) 0 0;
}
.auth-altlink a { color: var(--color-accent-hot); font-weight: 600; text-decoration: none; }
.auth-altlink a:hover { text-decoration: underline; }

/* ============================================================================
   Walkthrough v2
   ============================================================================ */
.walkthrough-v2 {
  max-width: 460px;
  margin: var(--space-4) auto;
  padding: var(--space-3) var(--space-4);
}
.walkthrough-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}
.walkthrough-counter {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.walkthrough-skip {
  background: transparent;
  border: none;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  transition: all var(--transition-fast);
}
.walkthrough-skip:hover { background: var(--color-bg-1); color: var(--color-ink); }

/* Orange variant — used from step 2 onward so it stands out without
   showing up on the very first step (avoids people instantly bouncing).
   Solid Main Orange fill + Anthracite text so it actually reads as a
   button, not as a faint chip. */
.walkthrough-skip-orange {
  color: #262626;
  background: #FFC26D;
  font-weight: 700;
  padding: 8px 16px;
  box-shadow: 0 2px 6px rgba(255, 113, 82, 0.18);
}
.walkthrough-skip-orange:hover {
  background: #FF7152;
  color: #FFF1E6;
}

/* Reserves the same horizontal slot on step 1 so the counter stays
   left-aligned and the layout doesn't jump when skip appears. */
.walkthrough-skip-placeholder {
  display: inline-block;
  width: 60px;
  height: 28px;
}

.walkthrough-progress-bar {
  height: 4px;
  background: var(--color-border-soft);
  border-radius: var(--radius-pill);
  overflow: hidden;
  margin-bottom: var(--space-5);
}
.walkthrough-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-accent) 0%, #FFC26D 100%);
  border-radius: var(--radius-pill);
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.walkthrough-card {
  position: relative;
  text-align: center;
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  border: 1.5px solid var(--color-border-soft);
  box-shadow: var(--shadow-md);
  padding: var(--space-6) var(--space-4);
  margin-bottom: var(--space-4);
  overflow: hidden;
}
.walkthrough-card::before {
  content: '';
  position: absolute;
  top: -30px;
  left: -40px;
  width: 110px;
  height: 110px;
  border: 4px solid #FFE7D1;
  border-radius: 50%;
  border-left-color: transparent;
  border-top-color: transparent;
  transform: rotate(28deg);
  opacity: 0.55;
}
.walkthrough-card::after {
  content: '';
  position: absolute;
  bottom: -30px;
  right: -30px;
  width: 90px;
  height: 90px;
  border: 4px solid var(--color-accent-soft);
  border-radius: 50%;
  border-right-color: transparent;
  border-bottom-color: transparent;
  transform: rotate(-15deg);
  opacity: 0.55;
}
.walkthrough-card > * { position: relative; z-index: 1; }
.walkthrough-icon-large {
  font-size: 64px;
  margin-bottom: var(--space-3);
  filter: drop-shadow(0 6px 16px rgba(108, 99, 255, 0.22));
  animation: walkthrough-bounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes walkthrough-bounce {
  0%   { transform: scale(0.3); opacity: 0; }
  60%  { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); }
}
.walkthrough-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 24px;
  margin: 0 0 var(--space-2);
  color: var(--color-ink);
  letter-spacing: -0.01em;
}
.walkthrough-body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text-soft);
  margin: 0;
  max-width: 360px;
  margin-inline: auto;
}

.walkthrough-actions-v2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.walkthrough-actions-v2 .btn-primary { flex: 1; }
.action-spacer { width: 1px; }

/* ============================================================================
   Chunk G — Check-in + Feedback polish
   ============================================================================ */

/* Check-in panel */
.checkin-panel {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  border: 1.5px solid var(--color-accent-border);
  padding: var(--space-4);
  margin: var(--space-4) 0;
  box-shadow: var(--shadow-sm);
}
.checkin-head { margin-bottom: var(--space-3); }
.checkin-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  margin: 0 0 4px;
  color: var(--color-ink);
}
.checkin-sub {
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 0;
}

/* Method block (numbered) */
.checkin-method {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  padding: var(--space-3) 0;
}
.checkin-method-num {
  width: 28px;
  height: 28px;
  background: var(--color-accent);
  color: white;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 14px;
  flex-shrink: 0;
}
.checkin-method-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  margin: 0 0 8px;
  color: var(--color-ink);
}
.checkin-method-hint {
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-2);
  line-height: 1.45;
}

/* Ticket-style code display */
.checkin-code-display {
  background: linear-gradient(135deg, var(--color-accent-bg) 0%, #FFE7D1 100%);
  border-radius: var(--radius-lg);
  border: 1.5px dashed var(--color-accent);
  padding: var(--space-3);
  text-align: center;
  margin-bottom: var(--space-3);
  position: relative;
}
.checkin-code-display::before,
.checkin-code-display::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  background: var(--color-surface);
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
}
.checkin-code-display::before { left: -10px; }
.checkin-code-display::after  { right: -10px; }
.checkin-code-label {
  display: block;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--color-accent-hot);
  margin-bottom: 4px;
}
.checkin-code-value {
  display: block;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-weight: 800;
  font-size: 32px;
  letter-spacing: 0.15em;
  color: var(--color-ink);
  margin-bottom: 4px;
}
.checkin-code-hint {
  display: block;
  font-size: 12px;
  color: var(--color-text-muted);
}

/* Code entry row */
.checkin-code-entry-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 6px;
}
.code-input-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.code-input-row input {
  flex: 1;
  font-family: ui-monospace, monospace;
  font-size: 16px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--color-border);
  text-align: center;
  font-weight: 700;
}
.code-input-row input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: var(--shadow-glow);
}

/* "or" separator */
.checkin-or {
  text-align: center;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text-faint);
  position: relative;
  margin: var(--space-3) 0;
}
.checkin-or::before,
.checkin-or::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 30%;
  height: 1px;
  background: var(--color-border-soft);
}
.checkin-or::before { left: 0; }
.checkin-or::after  { right: 0; }

/* Checked-in success state */
.checkin-panel.checked-in {
  background: linear-gradient(135deg, var(--color-success-soft) 0%, var(--color-surface) 100%);
  border-color: var(--color-success);
}
.checkin-success-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--space-2);
}
.checkin-success-icon {
  width: 32px;
  height: 32px;
  background: var(--color-success);
  color: white;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 18px;
  animation: checkmark-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes checkmark-pop {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}
.checkin-success-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  color: var(--color-ink);
  margin: 0;
}
.checkin-success-meta {
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-3);
}
.checkin-both-in,
.checkin-waiting {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--color-surface);
  border-radius: var(--radius-pill);
  font-size: 13px;
  color: var(--color-text);
  border: 1px solid var(--color-border-soft);
}
.checkin-pulse-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-success);
  flex-shrink: 0;
}
.checkin-pulse-dot.pulsing {
  background: var(--color-warn);
  animation: pulse-glow 1.6s ease-in-out infinite;
}
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 173, 71, 0.6); }
  50%      { box-shadow: 0 0 0 8px rgba(255, 173, 71, 0); }
}

/* ============================================================================
   Feedback panel
   ============================================================================ */
.feedback-panel {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  border: 1.5px solid var(--color-border-soft);
  padding: var(--space-4);
  margin: var(--space-4) 0;
  box-shadow: var(--shadow-sm);
}
.feedback-head { margin-bottom: var(--space-3); }
.feedback-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  margin: 0 0 4px;
  color: var(--color-ink);
}
.feedback-sub {
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 0;
}

.feedback-fieldset {
  border: none;
  padding: 0;
  margin: 0 0 var(--space-4);
}
.feedback-legend {
  display: block;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 10px;
  padding: 0;
}
.optional-tag {
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  color: var(--color-text-faint);
  font-size: 11px;
}

/* Stars */
.star-rating {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}
.star {
  font-size: 32px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--color-border);
  padding: 4px;
  line-height: 1;
  transition: transform 0.15s, color 0.15s;
}
.star:hover { transform: scale(1.15); color: var(--color-warn); }
.star.on { color: var(--color-warn); }
.rating-helper {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted);
  min-height: 18px;
}

/* Quick check chips */
.quick-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.quick-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--color-bg-1);
  border: 1.5px solid var(--color-border-soft);
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-size: 13px;
  user-select: none;
  transition: all var(--transition-fast);
}
.quick-check:hover { border-color: var(--color-accent); }
.quick-check input {
  width: 14px;
  height: 14px;
  accent-color: var(--color-accent);
  cursor: pointer;
}
.quick-check input:checked + .quick-check-label { color: var(--color-accent-hot); font-weight: 700; }
.quick-check:has(input:checked) {
  background: var(--color-accent-bg);
  border-color: var(--color-accent);
}
.quick-check-label {
  color: var(--color-text);
  transition: color var(--transition-fast);
}

/* Connect toggle */
.feedback-connect {
  background: linear-gradient(135deg, var(--color-accent-bg) 0%, var(--color-surface) 100%);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  border: 1px solid var(--color-accent-border);
  margin-bottom: var(--space-4);
}
.connect-toggle {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
}
.connect-toggle input {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--color-accent);
  cursor: pointer;
  flex-shrink: 0;
}
.connect-toggle-body { display: flex; flex-direction: column; gap: 2px; }
.connect-toggle-title {
  font-weight: 700;
  color: var(--color-ink);
  font-size: 14px;
}
.connect-toggle-hint {
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.45;
}

/* Notes textarea */
.feedback-notes {
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--color-border);
  font-family: var(--font-body);
  font-size: 14px;
  resize: vertical;
  min-height: 60px;
}
.feedback-notes:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: var(--shadow-glow);
}

/* Flag disclosure */
.flag-disclosure {
  margin: var(--space-3) 0;
  padding: 0;
}
.flag-disclosure[open] .flag-summary {
  color: var(--color-warn);
}
.flag-summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--color-text-muted);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  list-style: none;
}
.flag-summary::-webkit-details-marker { display: none; }
.flag-summary:hover { background: var(--color-bg-1); }
.flag-body {
  margin-top: var(--space-2);
  padding: var(--space-3);
  background: var(--color-warn-soft);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.flag-reason-input {
  width: 100%;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  font-size: 13px;
}

/* Feedback success */
.feedback-panel.submitted {
  background: linear-gradient(135deg, var(--color-success-soft) 0%, var(--color-surface) 100%);
  border-color: var(--color-success);
}
.feedback-success-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--space-2);
}
.feedback-success-icon {
  width: 32px;
  height: 32px;
  background: var(--color-success);
  color: white;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 18px;
  animation: checkmark-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.feedback-success-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  color: var(--color-ink);
  margin: 0;
}
.feedback-success-meta {
  font-size: 14px;
  color: var(--color-text);
  margin: 0 0 var(--space-2);
}
.feedback-waiting {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--color-text-soft);
  margin: 0;
  padding: 10px 14px;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-soft);
  line-height: 1.45;
}

/* Connection callout — celebrate */
.connection-callout {
  margin: var(--space-4) 0;
  padding: var(--space-4);
  background: linear-gradient(135deg, var(--color-accent-bg) 0%, #FFE7D1 100%);
  border-radius: var(--radius-xl);
  border: 1.5px solid var(--color-accent);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.connection-callout::before {
  content: '🎉';
  position: absolute;
  top: -10px;
  left: -10px;
  font-size: 48px;
  opacity: 0.15;
  transform: rotate(-15deg);
}
.connection-callout::after {
  content: '🤝';
  position: absolute;
  bottom: -10px;
  right: -10px;
  font-size: 48px;
  opacity: 0.15;
  transform: rotate(15deg);
}
.connection-callout p {
  position: relative;
  margin: 0;
  color: var(--color-ink);
  font-size: 14px;
  line-height: 1.5;
}
.connection-callout strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  margin-bottom: 4px;
  color: var(--color-accent-hot);
}

/* ============================================================================
   Feature card — used for Saturday Rounds promo + similar marketing surfaces
   ============================================================================ */
.feature-card {
  background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-accent-bg) 100%);
  border: 1.5px solid var(--color-accent-border);
  border-radius: var(--radius-xl);
  padding: var(--space-4);
  margin: var(--space-4) 0;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
}
.feature-card.is-opted-in {
  background: linear-gradient(135deg, var(--color-success-soft) 0%, var(--color-surface) 100%);
  border-color: var(--color-success);
}
.feature-card::before {
  content: '';
  position: absolute;
  top: -30px;
  right: -30px;
  width: 110px;
  height: 110px;
  border: 4px solid var(--color-accent-soft);
  border-radius: 50%;
  border-right-color: transparent;
  border-bottom-color: transparent;
  transform: rotate(-22deg);
  opacity: 0.5;
  pointer-events: none;
}
.feature-card.is-opted-in::before {
  border-color: var(--color-success);
  opacity: 0.3;
}
.feature-card > * { position: relative; z-index: 1; }

.feature-card-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: var(--space-3);
}
.feature-card-icon {
  font-size: 38px;
  flex-shrink: 0;
  filter: drop-shadow(0 4px 12px rgba(108, 99, 255, 0.2));
}
.feature-card-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  margin: 0;
  color: var(--color-ink);
  letter-spacing: -0.01em;
}
.feature-card-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  background: var(--color-accent);
  color: white;
  border-radius: var(--radius-pill);
  margin-top: 4px;
}
.feature-card.is-opted-in .feature-card-badge {
  background: var(--color-success);
}

.feature-card-body {
  font-size: 14px;
  color: var(--color-text);
  line-height: 1.55;
  margin: 0 0 var(--space-3);
}
.feature-card-body strong {
  color: var(--color-accent-hot);
  font-weight: 700;
}
.feature-card.is-opted-in .feature-card-body strong {
  color: var(--color-success);
}

.feature-card-perks {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.feature-card-perks li {
  font-size: 13px;
  color: var(--color-text-soft);
  padding-left: 4px;
}

.feature-card-toggle {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1.5px solid var(--color-accent-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.feature-card-toggle:hover {
  border-color: var(--color-accent);
}
.feature-card-toggle input {
  width: 20px;
  height: 20px;
  margin-top: 1px;
  accent-color: var(--color-accent);
  cursor: pointer;
  flex-shrink: 0;
}
.feature-card-toggle-text {
  font-weight: 600;
  color: var(--color-ink);
  font-size: 14px;
  line-height: 1.45;
}
.feature-card.is-opted-in .feature-card-toggle {
  background: var(--color-surface);
  border-color: var(--color-success);
}

/* ============================================================================
   Chunk G — Trait picker on feedback
   ============================================================================ */
.feedback-traits-hint {
  font-size: 12px;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-3);
  font-style: italic;
}
.trait-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--space-2);
}
.trait-chip {
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  color: var(--color-text);
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  font-family: inherit;
}
.trait-chip:hover {
  border-color: var(--color-accent);
  color: var(--color-accent-hot);
}
.trait-chip.is-selected {
  background: linear-gradient(135deg, var(--color-accent) 0%, #5B52E8 100%);
  border-color: var(--color-accent);
  color: white;
  box-shadow: var(--shadow-accent);
  transform: scale(1.04);
}
.trait-chip.is-selected::before {
  content: '✓ ';
  margin-right: 2px;
}
.trait-counter {
  font-size: 12px;
  color: var(--color-text-muted);
  text-align: right;
  margin: 4px 0 0;
  transition: color var(--transition-fast);
}
.trait-counter strong { color: var(--color-accent-hot); }
.trait-counter.flash-warn { color: var(--color-warn); animation: trait-shake 0.4s ease; }
@keyframes trait-shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-3px); }
  75%      { transform: translateX(3px); }
}
.trait-loading { color: var(--color-text-faint); font-size: 12px; font-style: italic; }

/* ============================================================================
   Chunk C2c — Username field
   ============================================================================ */
.field-label-meta {
  font-weight: 400;
  color: var(--color-text-faint);
  font-size: 11px;
  margin-left: 4px;
}
.username-row {
  display: flex;
  align-items: stretch;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  overflow: hidden;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.username-row:focus-within {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-glow);
}
.username-prefix {
  padding: 10px 12px;
  background: var(--color-bg-1);
  color: var(--color-accent-hot);
  font-weight: 700;
  font-family: var(--font-mono);
}
.username-row input {
  flex: 1;
  border: none;
  outline: none;
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: 14px;
  background: transparent;
  color: var(--color-ink);
}
.field-username input.is-invalid + .field-tick { display: none; }
.field-username .username-row:has(input.is-invalid) {
  border-color: var(--color-danger);
}
.field-username .username-row:has(input.is-saved) {
  border-color: var(--color-success);
  animation: username-saved-pulse 0.7s ease;
}
@keyframes username-saved-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(43, 163, 115, 0.4); }
  100% { box-shadow: 0 0 0 8px rgba(43, 163, 115, 0); }
}
.field-error {
  display: block;
  font-size: 12px;
  color: var(--color-danger);
  margin-top: 4px;
}

/* ============================================================================
   Admin panel
   ============================================================================ */
.admin-shell {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--space-4);
}
.admin-header { margin-bottom: var(--space-4); }
.admin-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 28px;
  margin: 0 0 4px;
  color: var(--color-ink);
}
.admin-sub {
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-3);
}
.admin-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1.5px solid var(--color-border-soft);
}
.admin-tab {
  background: transparent;
  border: none;
  padding: 10px 16px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -1.5px;
  transition: all var(--transition-fast);
}
.admin-tab:hover { color: var(--color-ink); }
.admin-tab.is-active {
  color: var(--color-accent-hot);
  border-bottom-color: var(--color-accent);
}
.admin-body { padding: var(--space-4) 0; }

.admin-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.admin-stat-card {
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.admin-stat-value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 28px;
  color: var(--color-accent-hot);
  line-height: 1;
}
.admin-stat-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  margin-top: 6px;
}
.admin-stat-sub { font-size: 11px; color: var(--color-text-faint); margin-top: 4px; line-height: 1.3; }

.admin-section { margin-bottom: var(--space-5); }
.admin-section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  margin: 0 0 var(--space-3);
  color: var(--color-ink);
}
.admin-kv-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.admin-kv-list li {
  padding: 8px 12px;
  background: var(--color-bg-1);
  border-radius: var(--radius-sm);
  font-size: 13px;
}
.admin-kv-list strong { color: var(--color-accent-hot); }

.admin-photo-filters { margin-bottom: var(--space-3); font-size: 14px; }
.admin-photo-filters select {
  margin-left: 8px;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
}
.admin-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-3);
}
.admin-photo-tile {
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.admin-photo-img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
}
.admin-photo-meta {
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
}
.admin-photo-meta strong { font-size: 13px; }
.admin-photo-actions {
  display: flex;
  gap: 4px;
  padding: 0 8px 8px;
}
.admin-photo-actions .btn { flex: 1; font-size: 11px; padding: 4px 6px; }
.admin-foot-stat { font-size: 13px; color: var(--color-text-muted); margin: 0; }
.admin-meta { text-align: right; margin: var(--space-4) 0 0; }
.btn-small { padding: 4px 10px; font-size: 12px; }

/* ============================================================================
 * Pivot Pass 2: Start tab + Meet group view
 * ============================================================================ */

/* ---- Start tab ---- */
.start-shell { display: flex; flex-direction: column; gap: 16px; }
.start-header { padding: 4px 4px 0; }
.start-title { font-size: 22px; margin: 0 0 4px; font-weight: 700; }
.start-sub { font-size: 14px; color: var(--color-text-secondary); margin: 0; }
.start-eyebrow { font-size: 12px; margin: 0 0 6px; font-weight: 600; letter-spacing: 0.04em; }
.start-check-pill {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  background: #1aa769; color: #fff; font-size: 11px; vertical-align: 1px; margin-right: 6px;
}

.start-hero, .start-locked-card, .start-empty-card, .start-steps {
  background: #fff; border: 1px solid var(--color-border-tertiary, #ebeaf5);
  border-radius: 14px; padding: 18px 16px; box-shadow: 0 1px 2px rgba(18,0,154,0.04);
}
.start-hero-eyebrow {
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: #6F5CFF; margin: 0 0 6px; font-weight: 600;
}
.start-hero-headline { font-size: 20px; line-height: 1.25; margin: 0 0 8px; font-weight: 700; }
.start-hero-body { font-size: 14px; color: var(--color-text-secondary); margin: 0 0 16px; line-height: 1.5; }
.start-cta { margin-top: 4px; }
.start-cta-ext { margin-left: 6px; opacity: 0.85; }
.start-price-note { font-size: 12px; color: var(--color-text-secondary); margin: 8px 0 0; text-align: center; }

.start-code-disclosure { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--color-border-tertiary, #ebeaf5); }
.start-code-toggle {
  cursor: pointer; font-size: 13px; color: #6F5CFF; font-weight: 500; user-select: none;
  list-style: none;
}
.start-code-toggle::-webkit-details-marker { display: none; }
.start-code-toggle::before { content: '▸ '; transition: transform 0.15s ease; display: inline-block; }
details[open] .start-code-toggle::before { content: '▾ '; }

.start-code-form { margin-top: 10px; }
.start-code-hint { font-size: 12px; color: var(--color-text-secondary); margin: 0 0 8px; }
.start-code-row { display: flex; gap: 8px; }
.start-code-row input {
  flex: 1; padding: 10px 12px; font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase;
  border: 1px solid var(--color-border-tertiary, #ebeaf5); border-radius: 8px;
}
.start-code-error { font-size: 12px; color: #c93b3b; margin: 8px 0 0; }

.start-hero-foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--color-border-tertiary, #ebeaf5);
  font-size: 12px; color: var(--color-text-secondary);
}
.start-foot-icon { margin-right: 4px; }

/* First-time steps (variation C) */
.start-steps { list-style: none; padding: 8px 4px; margin: 0; display: flex; flex-direction: column; gap: 0; }
.start-step { display: flex; gap: 14px; padding: 12px 8px; align-items: flex-start; position: relative; }
.start-step + .start-step { border-top: 1px dashed var(--color-border-tertiary, #ebeaf5); }
.start-step-num {
  flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%;
  background: #f2f0fa; color: #6F5CFF; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600;
}
.start-step.is-done .start-step-num { background: #1aa769; color: #fff; }
.start-step.is-active .start-step-num { background: #6F5CFF; color: #fff; box-shadow: 0 0 0 4px rgba(111,92,255,0.15); }
.start-step-tick { font-size: 14px; }
.start-step-body { flex: 1; min-width: 0; }
.start-step-title { font-size: 14px; margin: 0; font-weight: 500; }
.start-step-meta { font-size: 12px; color: var(--color-text-secondary); margin: 4px 0 0; }
.start-step-cta { margin-top: 10px; }

/* Locked-in state */
.start-locked-card { padding: 16px; }
.start-locked-row { display: flex; gap: 12px; align-items: flex-start; }
.start-locked-icon { font-size: 28px; flex: 0 0 auto; }
.start-locked-line { font-size: 14px; margin: 0; }
.start-locked-sub { font-size: 13px; color: var(--color-text-secondary); margin: 4px 0 0; }
.start-locked-footer { background: #fafafe; }

/* No-event state */
.start-empty-card { text-align: center; padding: 24px 16px; }
.start-empty-illu { font-size: 36px; margin-bottom: 8px; }
.start-empty-body { font-size: 14px; color: var(--color-text-secondary); margin: 0; line-height: 1.5; }

/* ---- Empty state V2: illustration hero + progress-ring cards + IG bar ---- */
.se-hero { text-align: center; }
.se-illu { display: flex; justify-content: center; margin-bottom: 4px; }
.se-label {
  margin: 22px 4px 10px; font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase; color: #8a86a0;
}
.se-cards { display: flex; flex-direction: column; gap: 10px; }
.se-card {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  background: #fff; border: 1px solid #ECEAF6; border-radius: 16px;
  padding: 14px; cursor: pointer; font: inherit;
  transition: border-color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}
.se-card:hover { border-color: #C5BDFF; box-shadow: 0 4px 14px rgba(111,92,255,0.10); }
.se-card:active { transform: scale(0.99); }
.se-ring {
  --pct: 0; position: relative; width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center; flex-shrink: 0;
  background: conic-gradient(var(--ring-color, #6F5CFF) calc(var(--pct) * 1%), #EAE3F8 0);
  transition: background 0.5s ease;
}
.se-ring-prof { --ring-color: #1F8A50; }
.se-ring.is-done { --ring-color: #1F8A50; }
.se-ring-num {
  width: 42px; height: 42px; border-radius: 50%; background: #fff;
  display: grid; place-items: center;
  font-family: var(--font-display, inherit); font-weight: 700; font-size: 12px; color: #4a4458;
}
.se-card-txt { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.se-card-title { font-family: var(--font-display, inherit); font-weight: 700; font-size: 15px; color: #262626; }
.se-card-sub { font-size: 12.5px; color: #6b6680; line-height: 1.35; }
.se-card-go { font-size: 22px; color: #C5BDFF; font-weight: 700; flex-shrink: 0; }
.se-ig {
  display: flex; align-items: center; gap: 12px; margin-top: 16px;
  padding: 13px 15px; border-radius: 16px; text-decoration: none; color: #fff;
  background: linear-gradient(120deg, #FEDA75 0%, #FA7E1E 25%, #D62976 50%, #962FBF 75%, #4F5BD5 100%);
}
.se-ig-badge {
  width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
  display: grid; place-items: center; background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.se-ig-txt { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.3; }
.se-ig-txt b { font-size: 14px; font-weight: 700; }
.se-ig-txt small { font-size: 11.5px; opacity: 0.92; }
.se-ig-follow {
  flex-shrink: 0; background: #fff; color: #C32F6B; font-weight: 700; font-size: 13px;
  padding: 7px 16px; border-radius: 999px;
}

/* ---- Meet tab (group view) ---- */
.meet-shell { display: flex; flex-direction: column; gap: 14px; }
.meet-header { padding: 4px 4px 0; }
.meet-eyebrow { font-size: 12px; margin: 0 0 6px; }
.meet-pill {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  background: #fff0d4; color: #8b5a00; font-size: 11px; font-weight: 600;
}
.meet-pill-success { background: #d4f5e0; color: #0e6c3f; }
.meet-title { font-size: 22px; margin: 0 0 4px; font-weight: 700; }
.meet-sub { font-size: 13px; color: var(--color-text-secondary); margin: 0; }

.meet-venue-card, .meet-group-card, .meet-shared-card,
.meet-icebreakers-card, .meet-awaiting-card {
  background: #fff; border: 1px solid var(--color-border-tertiary, #ebeaf5);
  border-radius: 14px; padding: 16px;
  box-shadow: 0 1px 2px rgba(18,0,154,0.04);
}

.meet-venue-row { display: flex; gap: 12px; align-items: flex-start; }
.meet-venue-icon { font-size: 22px; flex: 0 0 auto; }
.meet-venue-name { font-size: 16px; font-weight: 600; margin: 0; }
.meet-venue-address { font-size: 13px; color: var(--color-text-secondary); margin: 2px 0 0; }
.meet-venue-time { font-size: 13px; color: var(--color-text-secondary); margin: 6px 0 0; }
.meet-venue-actions {
  display: flex; gap: 8px; margin-top: 14px; padding-top: 12px;
  border-top: 1px dashed var(--color-border-tertiary, #ebeaf5);
}
.meet-venue-actions .btn { flex: 1; font-size: 13px; padding: 8px 10px; }

.meet-section-title { font-size: 13px; font-weight: 600; margin: 0 0 12px; }

.meet-member-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.meet-member { display: flex; gap: 12px; align-items: center; }
.meet-member.is-you { background: #f8f6ff; border-radius: 10px; padding: 6px; margin: -6px; }
.meet-avatar { flex: 0 0 auto; }
.meet-member-body { flex: 1; min-width: 0; }
.meet-member-handle { font-family: var(--font-mono, ui-monospace, monospace); font-size: 14px; font-weight: 500; margin: 0; }
.meet-you-tag {
  font-family: inherit; font-size: 10px; padding: 1px 6px;
  background: #6F5CFF; color: #fff; border-radius: 999px; vertical-align: 1px;
  font-weight: 600; letter-spacing: 0.04em;
}
.meet-member-traits { font-size: 12px; color: var(--color-text-secondary); margin: 2px 0 0; }

.meet-trait-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.meet-trait-pill {
  font-size: 12px; padding: 4px 10px; border-radius: 999px;
  background: #f0eeff; color: #4a3fbf; font-weight: 500;
}

.meet-icebreaker-list {
  margin: 0; padding-left: 18px; font-size: 13px; color: var(--color-text-secondary);
  line-height: 1.7;
}
.meet-icebreaker-list li + li { margin-top: 4px; }

.meet-awaiting-card { text-align: center; padding: 24px 16px; }
.meet-awaiting-illu { font-size: 36px; margin-bottom: 10px; }
.meet-awaiting-title { font-size: 16px; margin: 0 0 8px; }
.meet-awaiting-body { font-size: 13px; color: var(--color-text-secondary); margin: 0; line-height: 1.55; }

/* M3 — "locked in" date card: a small calendar tile + status, no big "tba" title */
.meet-datecard {
  display: flex; align-items: center; gap: 14px;
  padding: var(--space-2) 0 var(--space-4);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-4);
}
.meet-cal {
  flex: 0 0 auto; width: 58px; border-radius: 12px; overflow: hidden;
  text-align: center; border: 1px solid #ece9f6; background: #fff;
}
.meet-cal-mo {
  background: var(--color-accent, #6F5CFF); color: #fff;
  font-size: 11px; font-weight: 800; padding: 3px 0; letter-spacing: 0.05em;
  font-family: var(--font-display, inherit);
}
.meet-cal-dy {
  font-family: var(--font-display, inherit); font-weight: 800;
  font-size: 24px; padding: 4px 0; color: #262626; line-height: 1.1;
}
.meet-datecard-info { min-width: 0; }
.meet-dc-title { font-family: var(--font-display, inherit); font-weight: 800; font-size: 17px; color: #262626; }
.meet-dc-sub { font-size: 12.5px; color: #8a87a0; margin-top: 2px; overflow-wrap: anywhere; }
.meet-dc-status { font-size: 11px; font-weight: 700; color: #0e7a49; margin-top: 5px; }

/* Readonly field styling for profile email */
.field-readonly input[readonly] {
  background: #fafafe;
  color: var(--color-text-secondary);
  cursor: not-allowed;
}
.field-label-meta {
  font-weight: 400; color: var(--color-text-secondary); font-size: 0.9em; margin-left: 4px;
}

/* ---- Admin events panel (Pass 3) ---- */
.admin-events-list { display: flex; flex-direction: column; gap: 14px; }
.admin-event-card {
  background: #fff; border: 1px solid var(--color-border-tertiary, #ebeaf5);
  border-radius: 12px; padding: 14px 16px;
}
.admin-event-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 10px;
}
.admin-event-venue { font-size: 16px; margin: 0; }
.admin-event-when { font-size: 13px; color: var(--color-text-secondary); margin: 2px 0 0; }
.admin-event-status {
  font-size: 11px; padding: 3px 9px; border-radius: 999px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em; flex: 0 0 auto;
}
.status-open { background: #d4f5e0; color: #0e6c3f; }
.status-closed { background: #fff0d4; color: #8b5a00; }
.status-running { background: #d4e4ff; color: #1c4587; }
.status-done { background: #e7e7e7; color: #555; }
.status-cancelled { background: #fde0e0; color: #b03030; }

.admin-event-meta {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin: 0 0 12px;
  font-size: 12px;
}
.admin-event-meta div { display: flex; flex-direction: column; min-width: 0; }
.admin-event-meta dt { color: var(--color-text-secondary); font-weight: 500; }
.admin-event-meta dd { margin: 0; word-break: break-word; }
.admin-event-meta a { color: #6F5CFF; }

.admin-event-counts {
  display: flex; flex-wrap: wrap; gap: 14px; padding: 10px 0;
  border-top: 1px dashed var(--color-border-tertiary, #ebeaf5);
  border-bottom: 1px dashed var(--color-border-tertiary, #ebeaf5);
  font-size: 13px; margin-bottom: 12px;
}
.admin-count strong { color: #12009A; font-weight: 700; }

.admin-event-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.admin-event-actions .btn { font-size: 13px; }

.admin-empty { text-align: center; padding: 24px 16px; }
.admin-empty p { margin: 0 0 6px; }

/* ============================================================================
 * Pass 4 — Profile flow polish
 * Merged photo+emoji section, inline data policy checkbox, autocomplete styling
 * ============================================================================ */

/* ---- Merged photo + emoji section ---- */
.avatar-section {
  background: #fff; border: 1px solid var(--color-border-tertiary, #ebeaf5);
  border-radius: 14px; padding: 16px; margin-bottom: 16px;
}
.avatar-section-row {
  display: flex; gap: 14px; align-items: center;
}
.avatar-section-preview { flex: 0 0 auto; }
.avatar-section-actions { flex: 1; min-width: 0; }
.avatar-section-title { font-size: 14px; font-weight: 600; margin: 0 0 4px; }
/* Photo moderation status shown to the OWNER under their photo. */
.ph-mod-row { margin-top: 8px; }
.ph-mod { display: block; font-size: 12px; line-height: 1.45; font-weight: 600; padding: 7px 10px; border-radius: 9px; }
.ph-mod-ok { color: #0e7a49; background: #e6f7ef; }
.ph-mod-pending { color: #b25c11; background: #fff1e0; }
.ph-mod-bad { color: #c0392b; background: #fde8e8; }
/* Photo / Animal switch (keeps the photo, just hides it). */
.avatar-mode-seg { display: inline-flex; background: #f1eefd; border-radius: 10px; padding: 3px; gap: 2px; margin: 2px 0 6px; }
.am-opt { border: 0; background: none; font: 700 12.5px 'DM Sans', sans-serif; color: #6F5CFF; padding: 6px 13px; border-radius: 8px; cursor: pointer; }
.am-opt.is-on { background: #fff; box-shadow: 0 1px 4px rgba(18,0,154,.12); color: #12009A; }
/* With the Photo/Animal switch present, show only the action for the active tab:
   Photo tab -> Replace photo; Animal tab -> Change animal (+ the "Animal: X" hint). */
.avatar-section.has-toggle[data-mode="photo"] .av-btn-animal,
.avatar-section.has-toggle[data-mode="photo"] .ph-animal-hint { display: none; }
.avatar-section.has-toggle[data-mode="animal"] .av-btn-photo { display: none; }
.avatar-section-buttons {
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px;
}
.avatar-section-buttons .btn { font-size: 13px; padding: 6px 12px; }

.avatar-emoji-picker {
  margin-top: 14px; padding-top: 14px;
  border-top: 1px dashed var(--color-border-tertiary, #ebeaf5);
  max-height: 600px; overflow: hidden; transition: max-height 0.25s ease, opacity 0.2s ease;
}
.avatar-emoji-picker.is-collapsed {
  max-height: 0; padding-top: 0; margin-top: 0; border-top: 0; opacity: 0;
  pointer-events: none;
}

/* ---- Inline data-policy checkbox (replaces old big banner card) ---- */
.data-policy-checkbox {
  background: #fff8ec; border: 1px solid #f5deaa;
  border-radius: 10px; padding: 12px 14px; margin: 12px 0;
}
.data-policy-checkbox .dp-row {
  display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
  font-size: 13px; line-height: 1.5;
}
.data-policy-checkbox input[type="checkbox"] {
  width: 18px; height: 18px; flex: 0 0 auto; margin-top: 2px;
  accent-color: #6F5CFF;
}
.data-policy-checkbox .dp-text a { color: #6F5CFF; font-weight: 500; }
.data-policy-checkbox .dp-text .muted.small {
  font-size: 11px; color: #888; margin-left: 4px;
}

/* ---- Datalist inputs feel more like type-ahead ---- */
input[list] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236F5CFF' d='M2 4l4 4 4-4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}

/* ============================================================================
 * Pass 5 — Cascade interests + accordion bottom sections
 * ============================================================================ */

/* ---- Interest category cards (cascade) ---- */
.interest-cards {
  display: flex; flex-direction: column; gap: 8px;
}
.interest-card {
  background: #fff; border: 1px solid #ebeaf5; border-radius: 12px;
  overflow: hidden; transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.interest-card.is-on {
  border-color: #C5BDFF;
  box-shadow: 0 0 0 1px rgba(111, 92, 255, 0.08);
}
.interest-cat-header {
  display: flex; align-items: center; gap: 10px;
  width: 100%; background: transparent; border: 0;
  padding: 12px 14px; cursor: pointer; text-align: left;
  font-size: 15px; font-weight: 500; color: #1a1a1a;
}
.interest-card.is-on .interest-cat-header {
  background: linear-gradient(to right, rgba(111,92,255,0.04), rgba(197,189,255,0.04));
}
.interest-cat-icon { font-size: 20px; flex: 0 0 auto; }
.interest-cat-name { flex: 1; min-width: 0; }
.interest-cat-plus,
.interest-cat-checkmark {
  flex: 0 0 auto; font-weight: 600; font-size: 14px;
  width: 24px; height: 24px; display: inline-flex;
  align-items: center; justify-content: center; border-radius: 50%;
}
.interest-cat-plus { color: #6F5CFF; background: rgba(111,92,255,0.1); }
.interest-cat-checkmark { color: #fff; background: #FF7152; font-size: 13px; }

.interest-cat-header .chip-star {
  background: transparent; border: 0; cursor: pointer; padding: 4px 6px;
  font-size: 16px; color: #aaa;
}
.interest-cat-header .chip-star.is-top { color: #FFC26D; }

.interest-cat-body {
  padding: 4px 14px 14px;
  border-top: 1px dashed #ebeaf5;
}
.interest-cat-body .field-hint { margin: 8px 0 6px; }
.interest-cat-body .free-tags-input {
  display: flex; gap: 6px; margin-bottom: 8px;
}
.interest-cat-body .free-tags-input input {
  flex: 1; min-width: 0;
}
.interest-cat-body .tag-list {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px;
}
.btn-sm { padding: 6px 12px; font-size: 13px; }

/* ---- Accordion (Share / Reminders / Notifications) ---- */
.accordion-section {
  background: #fff; border: 1px solid #ebeaf5; border-radius: 12px;
  margin-bottom: 10px; overflow: hidden;
}
.accordion-summary {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; cursor: pointer; list-style: none;
  font-size: 15px; font-weight: 500;
}
.accordion-summary::-webkit-details-marker { display: none; }
.accordion-title { flex: 0 0 auto; color: #1a1a1a; }
.accordion-hint {
  flex: 1; min-width: 0; font-size: 12px; color: #888; font-weight: 400;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.accordion-chevron {
  flex: 0 0 auto; color: #888; transition: transform 0.2s ease;
  font-size: 12px;
}
details[open] .accordion-chevron { transform: rotate(180deg); }
.accordion-body {
  padding: 4px 16px 16px;
  border-top: 1px dashed #ebeaf5;
  margin: 0;
}
.accordion-body legend { display: none; }

/* ---- OFF category chips (compact 2-column grid) ---- */
.interest-off-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px; margin-top: 8px;
  max-width: 100%;
}
.interest-off-chip {
  background: #fff; border: 1px solid #ebeaf5; border-radius: 999px;
  padding: 8px 12px; font-size: 13px; cursor: pointer;
  display: flex; align-items: center; gap: 6px;
  text-align: left; color: #444; font-weight: 500;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.interest-off-chip:hover, .interest-off-chip:focus {
  background: #f8f6ff; border-color: #C5BDFF;
}
.interest-off-icon { font-size: 16px; flex: 0 0 auto; }
.interest-off-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============================================================================
   Pass 7 — Popular interests + Main Interests
   ============================================================================ */

/* ---- Popular interests (quick-add chips, top 10 globally) ---- */
.popular-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.popular-chip {
  background: #fff;
  border: 1px dashed #C5BDFF;
  border-radius: 999px;
  padding: 6px 10px 6px 8px;
  font-size: 12px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
  color: #6F5CFF;
  font-weight: 500;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.popular-chip:hover, .popular-chip:focus {
  background: #f4f1fe;
  border-color: #6F5CFF;
  border-style: solid;
  transform: translateY(-1px);
}
.popular-chip-emoji { font-size: 14px; }
.popular-chip-label { white-space: nowrap; }

/* ---- Main Interests (tap-to-promote, with a horizontal divider line) ---- */
#main-interests-fieldset .main-int-above,
#main-interests-fieldset .main-int-below {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 36px;
}
#main-interests-fieldset .main-int-above {
  margin-top: 8px;
  padding: 8px;
  border-radius: 8px;
  background: rgba(111, 92, 255, 0.04);
}
#main-interests-fieldset .main-int-below {
  margin-top: 0;
  padding: 8px 4px 4px;
}
#main-interests-fieldset .main-int-divider {
  position: relative;
  text-align: center;
  margin: 8px 0;
}
#main-interests-fieldset .main-int-divider::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: linear-gradient(to right, transparent, #C5BDFF, transparent);
}
#main-interests-fieldset .main-int-divider span {
  position: relative;
  background: #fff;
  padding: 0 8px;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #888;
  font-weight: 500;
}
#main-interests-fieldset .main-int-empty {
  color: #aaa;
  font-size: 12px;
  margin: 4px 4px 0;
  font-style: italic;
}

.main-int-pill {
  background: #fff;
  border: 1px solid #C5BDFF;
  color: #6F5CFF;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease, color 0.15s ease;
}
.main-int-pill:hover, .main-int-pill:focus {
  transform: translateY(-1px);
}
.main-int-pill.is-main {
  background: #6F5CFF;
  color: #fff;
  border-color: #6F5CFF;
  box-shadow: 0 1px 3px rgba(111, 92, 255, 0.25);
}

/* ---- Header logout button (Pass 7+) ---- */
.app-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.header-logout {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #F3F2FA;
  border: 1px solid #E6E3F2;
  color: #5a5470;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  padding: 0;
}
.header-logout svg { width: 18px; height: 18px; }
.header-logout:hover, .header-logout:focus {
  background: #EEEAFB;
  border-color: #C5BDFF;
  color: #6F5CFF;
}

/* Top-5 popular subcategory chips shown inside an opened category card.
   Appear between the input row and the tag-list. Compact + tappable. */
.cat-popular-row {
  display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap;
  margin-top: 8px;
}
.cat-popular-label {
  font-size: 12px; color: #888; font-weight: 500;
  padding: 6px 0;
}
.cat-popular-chips {
  display: flex; flex-wrap: wrap; gap: 6px; flex: 1; min-width: 0;
}
.cat-popular-chip {
  background: #f8f6ff;
  border: 1px dashed #C5BDFF;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  color: #6F5CFF;
  cursor: pointer;
  transition: background 0.15s ease, border-style 0.15s ease;
}
.cat-popular-chip:hover, .cat-popular-chip:focus {
  background: #ede8ff;
  border-style: solid;
}

/* In-app confirm modal (scripts/modal.js).
   Sits above everything else, fades + slides in. */
.app-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(38, 38, 38, 0.55);
  backdrop-filter: blur(2px);
  z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.app-modal-overlay.is-open { opacity: 1; }
.app-modal {
  background: #fff;
  border-radius: 16px;
  width: 100%; max-width: 380px;
  padding: 24px 22px 18px;
  box-shadow: 0 20px 60px -10px rgba(18, 0, 154, 0.25);
  transform: translateY(8px);
  transition: transform 0.18s ease;
}
.app-modal-overlay.is-open .app-modal { transform: translateY(0); }
.app-modal-title {
  margin: 0 0 12px;
  font-size: 16px; font-weight: 600;
  color: #262626;
}
.app-modal-headline {
  margin: 0 0 8px;
  font-size: 18px; font-weight: 700;
  color: #6F5CFF;
  line-height: 1.3;
}
.app-modal-subtitle {
  margin: 0 0 8px;
  font-size: 14px; color: #555;
  line-height: 1.4;
}
.app-modal-actions {
  display: flex; gap: 8px;
  justify-content: flex-end;
  margin-top: 18px;
}
.app-modal-actions .btn { flex: 1; max-width: 160px; }

/* Option A — calmer modal: centred, soft icon, normal-weight message.
   Replaces the old all-bold-lavender body that had no hierarchy. */
.app-modal { text-align: center; }
.app-modal-icon {
  width: 46px; height: 46px;
  margin: 0 auto 12px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 22px;
  background: var(--color-accent-soft);
}
.app-modal.app-modal-danger .app-modal-icon { background: var(--color-danger-soft); }
.app-modal-icon svg { width: 26px; height: 26px; }
.app-modal-icon-emoji { background: var(--color-accent-soft); font-size: 22px; }
.app-modal-icon-lavender { background: rgba(111,92,255,.12); color: #6F5CFF; }
.app-modal-icon-red      { background: rgba(209,67,67,.12);  color: #D14343; }
.app-modal-icon-orange   { background: rgba(255,113,82,.14); color: #FF7152; }
.app-modal-icon-amber    { background: rgba(232,148,59,.15); color: #E8943B; }
.app-modal-icon-green    { background: rgba(20,158,96,.13);  color: #149e60; }
.app-modal-icon-grey     { background: rgba(64,64,64,.10);   color: #404040; }
.app-modal-message {
  margin: 0 0 8px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--color-text-soft);
  line-height: 1.45;
}
.app-modal-title + .app-modal-message { margin-top: 2px; }

/* Compact link variant — used for "Forgot password?" beneath the login button.
   Subtle on purpose: secondary action, not a primary CTA. */
.auth-altlink-small {
  font-size: 13px;
  text-align: center;
  margin: 8px 0 0;
}
.auth-altlink-small a {
  color: #6F5CFF;
  text-decoration: none;
}
.auth-altlink-small a:hover { text-decoration: underline; }

/* Confirmation message panel — same shape as .form-error but green. */
.form-success {
  background: #e6f8ee;
  color: #0b6b39;
  border: 1px solid #b3e4c9;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 14px;
  margin: 12px 0;
  line-height: 1.45;
}

/* Edit-mode collapsible profile sections.
   Used when an existing user returns to /profile (walkthrough_completed_at
   is set). First-time signup never uses these — sections render expanded.
   Tapping the summary expands the section in place; the actual editor UI
   (chips, cascade, etc.) is the same as signup. */
.profile-section-collapse {
  border: 1px solid var(--color-border, #e6e3f5);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
.profile-section-collapse[open] {
  border-color: #C5BDFF;
  box-shadow: 0 2px 10px -4px rgba(111, 92, 255, 0.18);
}
.profile-section-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background 0.15s ease;
}
.profile-section-summary::-webkit-details-marker { display: none; }
.profile-section-summary:hover { background: #faf9ff; }
.profile-section-collapse[open] .profile-section-summary {
  border-bottom: 1px solid #eeebff;
  background: #faf9ff;
}
.psc-label {
  font-size: 14px;
  font-weight: 600;
  color: #262626;
  flex: 0 0 auto;
}
.psc-peek {
  flex: 1 1 auto;
  font-size: 13px;
  color: #6b6b6b;
  /* one-line truncation; the full content shows on tap anyway */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
  padding-right: 4px;
}
.psc-peek:empty::before {
  content: 'Not set yet';
  color: #aaa;
  font-style: italic;
}
.psc-chevron {
  font-size: 14px;
  color: #888;
  transition: transform 0.2s ease;
  flex: 0 0 auto;
}
.profile-section-collapse[open] .psc-chevron {
  transform: rotate(180deg);
}
.profile-section-body {
  padding: 16px;
  background: #fff;
}
/* When the section's content is a .fieldset, drop the duplicated border
   since the collapse wrapper already has one. */
.profile-section-body > .fieldset {
  border: none;
  padding: 0;
  margin: 0;
}
.profile-section-body > .fieldset legend {
  display: none;
}

/* Read-only PREVIEW shown when a profile section is open but the user
   hasn't tapped Edit yet. Just a static display of what's selected. */
.psc-preview { padding: 4px 0; }
.psc-readonly {
  padding: 6px 0;
  font-size: 15px;
  color: #262626;
  font-weight: 500;
}
.psc-readonly-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 0 8px;
}
.psc-chip {
  display: inline-block;
  padding: 6px 12px;
  background: #f6f4ff;
  border: 1px solid #e6e0ff;
  border-radius: 999px;
  font-size: 13px;
  color: #262626;
  white-space: nowrap;
}
.psc-empty {
  color: #888;
  font-style: italic;
  font-size: 14px;
  margin: 4px 0 8px;
}

/* Interests preview groups tags under their category name */
.psc-interests-readonly {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 0 8px;
}
.psc-interest-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.psc-interest-cat {
  font-size: 13px;
  font-weight: 600;
  color: #6F5CFF;
}
.psc-interest-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Priority lists (life goals + values) preview — numbered medallions */
.psc-priority-readonly {
  list-style: none;
  padding: 0;
  margin: 4px 0 8px;
}
.psc-priority-readonly li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: 14px;
  color: #262626;
}
.psc-priority-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #6F5CFF;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  flex: 0 0 auto;
}
.psc-priority-em { font-size: 16px; }

/* Action row containing the Edit / Done buttons */
.psc-actions {
  display: flex;
  justify-content: flex-start;
  margin-top: 10px;
}
.psc-actions-end {
  justify-content: flex-end;
  margin-top: 16px;
}
.psc-edit-btn, .psc-done-btn { padding: 6px 18px; }

/* Photo cropper modal (scripts/photo-cropper.js).
   Above the in-app confirm modal so it can sit on top of the profile
   editor while photo selection is happening. */
.photo-cropper-overlay {
  position: fixed; inset: 0;
  background: rgba(38, 38, 38, 0.7);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 9100;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.photo-cropper-overlay.is-open { opacity: 1; }
.photo-cropper {
  background: #fff;
  border-radius: 16px;
  width: 100%; max-width: 380px;
  padding: 22px 22px 18px;
  box-shadow: 0 24px 60px -12px rgba(18, 0, 154, 0.32);
  transform: translateY(10px);
  transition: transform 0.18s ease;
}
.photo-cropper-overlay.is-open .photo-cropper { transform: translateY(0); }
.pcr-title {
  margin: 0 0 4px;
  font-size: 17px; font-weight: 600;
  color: #262626;
  text-align: center;
}
.pcr-subtitle {
  margin: 0 0 16px;
  font-size: 12px; color: #777;
  text-align: center;
}
.pcr-viewport {
  position: relative;
  width: 280px; height: 280px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 50%;
  background: #f3f0fa;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  /* Soft lavender ring to suggest the avatar circle */
  box-shadow: 0 0 0 3px rgba(111, 92, 255, 0.18), inset 0 0 0 1px rgba(0,0,0,0.04);
}
.pcr-viewport:active { cursor: grabbing; }
.pcr-img {
  position: absolute;
  left: 0; top: 0;
  transform-origin: 0 0;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
  /* Hint to the GPU that we're animating this */
  will-change: transform;
}
.pcr-controls {
  display: flex; align-items: center; gap: 10px;
  margin-top: 18px; padding: 0 4px;
}
.pcr-icon {
  font-size: 18px; color: #888;
  font-weight: 600;
}
.pcr-zoom {
  flex: 1;
  accent-color: #6F5CFF;
  height: 4px;
}
.pcr-actions {
  display: flex; gap: 10px;
  margin-top: 16px;
}
.pcr-actions .btn { flex: 1; }

/* ============================================================================
 * Special interests — tappable preview chips that star/unstar an interest.
 * Starred = "special", orange, sorted to the front of its category. Max 5
 * across all categories.
 * ============================================================================ */
.psc-star-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #6b6b6b;
  margin: 0 0 12px;
  padding: 8px 12px;
  background: #faf9ff;
  border-radius: 8px;
  border: 1px solid #eeebff;
}
.psc-star-hint strong { color: #262626; }
.psc-star-count {
  margin-left: auto;
  display: inline-block;
  padding: 2px 8px;
  background: #6F5CFF;
  color: #fff;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  flex: 0 0 auto;
}
.psc-chip-tappable {
  cursor: pointer;
  border: 1px solid #e6e0ff;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.05s;
}
.psc-chip-tappable:hover { border-color: #C5BDFF; }
.psc-chip-tappable:active { transform: scale(0.97); }
.psc-chip-star {
  background: #6F5CFF;
  border-color: #6F5CFF;
  color: #fff;
  font-weight: 700;
}
.psc-chip-star:hover { background: #5a45e0; border-color: #5a45e0; }

/* ============================================================================
 * Admin link inside the profile header — only visible to is_admin users.
 * ============================================================================ */
.admin-entry-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: linear-gradient(135deg, #6F5CFF, #5644cc);
  color: #fff;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(111, 92, 255, 0.3);
}
.admin-entry-link:hover { transform: translateY(-1px); }

/* ============================================================================
 * Admin Users tab — toolbar (filters + generate button), user cards grid.
 * ============================================================================ */
.admin-users-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid #eee;
}
.admin-filter {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.admin-filter label {
  font-size: 11px;
  font-weight: 600;
  color: #6b6b6b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.admin-filter select {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid #ddd;
  background: #fff;
  font-size: 13px;
  min-width: 140px;
}
.admin-toolbar-spacer { flex: 1; }
.admin-users-count {
  font-size: 12px;
  color: #6b6b6b;
  margin: 0 0 10px;
}
.admin-users-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.adm-user-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.adm-user-head { display: flex; align-items: center; gap: 10px; }
.adm-user-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  object-fit: cover;
  background: #f3f0fa;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
}
.adm-user-avatar-emoji { line-height: 1; }
.adm-user-meta { min-width: 0; flex: 1; }
.adm-user-name {
  font-size: 14px; font-weight: 600; color: #262626;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.adm-user-sub {
  font-size: 12px; color: #6b6b6b;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.adm-user-facts {
  display: flex; gap: 8px; flex-wrap: wrap;
  font-size: 12px; color: #555;
}
.adm-user-facts span {
  padding: 2px 8px;
  background: #f6f4ff;
  border-radius: 4px;
}
.adm-user-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.adm-tag {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
  text-transform: uppercase;
}
.adm-tag-admin { background: #FFC26D; color: #262626; }
.adm-tag-part { background: #6F5CFF; color: #fff; }
.adm-tag-warn { background: #ffe4e4; color: #8b1e1e; }
.adm-user-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding-top: 6px; border-top: 1px dashed #eee;
}
.adm-user-login { font-size: 11px; color: #888; }
.btn-sm { padding: 4px 10px; font-size: 12px; }

/* Special interests — tap a chip in the preview to mark/unmark it.
   Max 5 across all categories. Starred chips render orange and sort
   to the front of their category. */
.psc-chip-tappable {
  cursor: pointer;
  background: #f6f4ff;
  border: 1px solid #e6e0ff;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 13px;
  color: #262626;
  font-family: inherit;
  transition: transform 0.12s ease, box-shadow 0.12s ease,
              background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  white-space: nowrap;
}
.psc-chip-tappable:hover:not(.psc-chip-star) {
  border-color: #C5BDFF;
  background: #efeaff;
}
.psc-chip-tappable:active { transform: scale(0.96); }

/* Starred (special) state — solid brand purple, white font (S1). */
.psc-chip-star {
  background: #6F5CFF;
  border-color: #6F5CFF;
  color: #fff;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(111, 92, 255, 0.28);
}
.psc-chip-star:hover, .psc-chip-star:focus {
  color: #fff;
  background: #5a45e0;
}

/* Hint paragraph above the interests preview */
.psc-star-hint {
  margin: 0 0 12px;
  font-size: 13px;
  color: #4a4458;
  line-height: 1.5;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.psc-star-hint strong { color: #FF7152; font-weight: 700; }
.psc-star-count {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: #f6f4ff;
  border: 1px solid #e6e0ff;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: #6F5CFF;
  margin-left: auto;
}

/* Pinned "special interests" row at the top of the interests preview */
.psc-special {
  background: linear-gradient(135deg, #F3F0FF, #ECE8FB);
  border: 1px solid #DAD2F7;
  border-radius: 14px;
  padding: 12px 14px;
  margin: 0 0 14px;
}
.psc-special-hd {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin: 0 0 9px;
}
.psc-special-hd b { font-family: var(--font-display, inherit); font-weight: 700; font-size: 13px; color: #4a35d6; }
.psc-special-cnt {
  font-weight: 700; font-size: 11px; color: #6F5CFF;
  background: #fff; border-radius: 999px; padding: 2px 9px;
}
.psc-special-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.psc-special-empty { margin: 0; font-size: 12.5px; color: #9a8a6a; font-style: italic; }

/* Admin entry link on the profile screen (visible only when is_admin).
   Small lavender pill, not a primary action — admin is for tools, not the
   main user flow. */
.admin-entry-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: #f0eaff;
  border: 1px solid #d8cbff;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: #6F5CFF;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.1s ease;
}
.admin-entry-link:hover { background: #e6dcff; }
.admin-entry-link:active { transform: scale(0.97); }

/* === Admin screen === */
.admin-header-card { margin-bottom: 14px; }
.admin-header-row {
  display: flex; align-items: center; gap: 8px;
}
.admin-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #262626;
  text-align: center;
  flex: 1;
}
.admin-back-btn { padding: 4px 10px; }
.admin-spacer { width: 60px; } /* visually balances back button */
.admin-section-title {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 600;
  color: #262626;
}
.admin-gen-status {
  margin: 12px 0 0;
  font-size: 13px;
  color: #4a4458;
}
.admin-filters {
  display: flex;
  gap: 12px;
  margin: 8px 0 16px;
  flex-wrap: wrap;
}
.admin-filter {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 140px;
}
.admin-filter-label {
  font-size: 12px;
  font-weight: 600;
  color: #6b6b6b;
}
.admin-filter select {
  padding: 8px 12px;
  border-radius: 10px;
  border: 1.5px solid #e6e0ff;
  font-size: 14px;
  background: #fff;
  cursor: pointer;
}
.admin-users-count {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  color: #6b6b6b;
}
.admin-users-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.au-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: #fafafe;
  border: 1px solid #eeebff;
  border-radius: 12px;
}
.au-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: #f3f0fa;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  flex: 0 0 auto;
  font-size: 22px;
}
.au-avatar-img {
  width: 100%; height: 100%; object-fit: cover;
}
.au-info { flex: 1; min-width: 0; }
.au-name {
  font-size: 14px;
  font-weight: 600;
  color: #262626;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.au-username { color: #888; font-weight: 500; }
.au-sub {
  font-size: 12px;
  color: #6b6b6b;
  margin-top: 2px;
}
.au-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
  align-items: center;
}
.au-login {
  font-size: 11px;
  color: #888;
}
.au-badges { display: flex; gap: 4px; flex-wrap: wrap; }
.au-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.au-badge-admin       { background: #fce8b3; color: #7a4706; }
.au-badge-demo        { background: #ECE8FB; color: #5a45e0; }
.au-badge-participating { background: #ffd6a2; color: #7a2e0b; }
.au-badge-incomplete  { background: #ebdbde; color: #822111; }

/* === Match-round countdown card on Start tab === */
.round-countdown-card {
  background: linear-gradient(135deg, #6F5CFF 0%, #12009A 100%);
  border-radius: 20px;
  padding: 28px 24px;
  color: #fff;
  text-align: center;
  box-shadow: 0 12px 32px -8px rgba(18, 0, 154, 0.35);
  margin-top: 12px;
}
.round-phase-computing {
  background: linear-gradient(135deg, #FFC26D 0%, #FF7152 100%);
}
.round-phase-confirmed {
  background: linear-gradient(135deg, #43d692 0%, #16a766 100%);
}
.round-countdown-value {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 56px;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 1;
  margin: 0 0 6px;
  font-variant-numeric: tabular-nums;
}
.round-countdown-label {
  font-size: 14px;
  opacity: 0.88;
}
.round-countdown-footer {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.22);
  font-size: 13px;
  opacity: 0.92;
}
.round-map-link {
  display: inline-block;
  margin-top: 12px;
  padding: 6px 14px;
  background: rgba(255,255,255,0.18);
  border-radius: 999px;
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
}
.round-map-link:hover { background: rgba(255,255,255,0.28); }
.round-test-badge {
  display: inline-block;
  padding: 2px 8px;
  background: #FFC26D;
  color: #262626;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  vertical-align: middle;
  margin-left: 8px;
}

/* === Admin: venues === */
.admin-venue-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}
.admin-venue-card {
  background: #fafafe;
  border: 1px solid #eeebff;
  border-radius: 12px;
  padding: 12px 14px;
}
.admin-venue-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 8px; margin-bottom: 4px;
}
.admin-venue-city {
  font-size: 11px;
  color: #6F5CFF;
  background: #f0eaff;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
}
.admin-venue-addr, .admin-venue-coords-row {
  font-size: 12px;
  color: #666;
  margin-top: 2px;
}
.admin-venue-coords {
  color: #6F5CFF;
  font-family: ui-monospace, monospace;
  font-size: 11px;
}
.admin-venue-desc {
  margin: 6px 0 0;
  font-size: 13px;
  color: #4a4458;
}
.admin-venue-actions {
  display: flex; gap: 6px; margin-top: 8px;
}
.admin-venue-delete-btn { color: #cc3a21; }

/* === Admin: match rounds === */
.admin-round-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}
.admin-round-card {
  background: #fafafe;
  border: 1px solid #eeebff;
  border-radius: 12px;
  padding: 12px 14px;
}
.admin-round-card.admin-round-signup_open { border-left: 4px solid #6F5CFF; }
.admin-round-card.admin-round-computing  { border-left: 4px solid #FFC26D; }
.admin-round-card.admin-round-confirmed  { border-left: 4px solid #43d692; }
.admin-round-card.admin-round-past       { opacity: 0.55; }
.admin-round-card.admin-round-test {
  background: linear-gradient(0deg, #fff8eb 0%, #fafafe 60%);
}
.admin-round-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
}
.admin-round-phase {
  font-size: 11px;
  color: #6F5CFF;
  background: #f0eaff;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.admin-round-cancelled {
  font-size: 11px; color: #cc3a21;
  background: #fce4e0;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
}
.admin-round-times {
  font-size: 13px; color: #4a4458;
  display: flex; flex-direction: column; gap: 2px;
}
.admin-round-venue { font-size: 13px; margin-top: 6px; color: #6F5CFF; }
.admin-round-meta { font-size: 11px; color: #888; margin-top: 4px; }
.admin-round-actions { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; align-items: center; }
.admin-round-actions .btn { white-space: nowrap; }
.admin-round-test-toggle {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px;
  background: #fff8eb;
  border: 1px solid #ffe6c7;
  border-radius: 10px;
  margin-bottom: 12px;
  font-size: 13px;
  color: #4a4458;
  cursor: pointer;
}
.admin-round-test-toggle input { margin-top: 2px; flex: 0 0 auto; }

/* === Admin: modal overlay (shared for venue + round forms) === */
.admin-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(38, 38, 38, 0.6);
  z-index: 9050;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.admin-modal {
  background: #fff;
  border-radius: 16px;
  width: 100%; max-width: 420px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 22px;
  box-shadow: 0 20px 50px -10px rgba(18, 0, 154, 0.32);
}
.admin-modal-wide { max-width: 480px; }
.admin-modal h3 {
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 600;
  color: #262626;
}
.admin-modal .field { margin-bottom: 12px; }
.admin-modal-row {
  display: flex;
  gap: 10px;
}
.admin-modal-row .field { flex: 1; }
.admin-modal-error {
  margin: 8px 0;
  padding: 8px 12px;
  background: #fce4e0;
  border-radius: 8px;
  color: #cc3a21;
  font-size: 13px;
}
.admin-modal-actions {
  display: flex; gap: 10px;
  justify-content: flex-end;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #eeebff;
}

/* === Group review modal === */
.admin-modal-xwide { max-width: 720px; }
.admin-modal-headrow {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px;
}
.admin-modal-headrow h3 { margin: 0; }
.admin-round-review {
  font-size: 11px;
  color: #7a4706;
  background: #fce8b3;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
}
.admin-round-confirmed {
  font-size: 11px;
  color: #076239;
  background: #c6f3de;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
}

.gr-groups {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 10px;
  max-height: 65vh;
  overflow-y: auto;
  padding-right: 4px;
}
.gr-group {
  background: #fafafe;
  border: 1px solid #eeebff;
  border-radius: 14px;
  padding: 12px 14px;
}
.gr-group-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px;
}
.gr-group-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  background: #6F5CFF;
  color: #fff;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  flex: 0 0 auto;
}
.gr-name-input {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid #e6e0ff;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #262626;
  background: #fff;
}
.gr-name-input:focus { outline: none; border-color: #6F5CFF; }
.gr-name-magic {
  border: 1px solid #FFC26D;
  background: linear-gradient(135deg, #FFC26D 0%, #FF7152 100%);
  color: #fff;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  flex: 0 0 auto;
}
.gr-name-magic:hover { transform: scale(1.04); }
.gr-name-magic:disabled { opacity: 0.6; cursor: wait; }
.gr-members {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gr-member {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background: #fff;
  border: 1px solid #eeebff;
  border-radius: 10px;
}
.gr-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #f3f0fa;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  flex: 0 0 auto;
  font-size: 18px;
}
.gr-avatar-img { width: 100%; height: 100%; object-fit: cover; }
.gr-member-info { flex: 1; min-width: 0; }
.gr-member-name {
  font-size: 13px;
  font-weight: 600;
  color: #262626;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gr-username { color: #888; font-weight: 500; }
.gr-member-sub { font-size: 11px; color: #888; margin-top: 1px; }
.gr-move {
  font-size: 12px;
  padding: 4px 6px;
  border: 1px solid #e6e0ff;
  border-radius: 8px;
  background: #fff;
  max-width: 130px;
}
.gr-group-meta {
  font-size: 11px;
  color: #888;
  margin-top: 8px;
  text-align: right;
}

/* === Meet tab countdown === */
.meet-countdown-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, #6F5CFF 0%, #12009A 100%);
  color: #fff;
  border-radius: 16px;
  padding: 18px 16px;
  margin: 0 0 14px;
  text-align: center;
}
.meet-countdown-label {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
}
.meet-countdown-clock {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 40px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.meet-countdown-card.meet-countdown-live {
  background: linear-gradient(135deg, #16a766 0%, #076239 100%);
}
/* Paused: the round is frozen by an admin — mute the card so the held
   countdown clearly reads as "not ticking". */
.meet-countdown-card.meet-countdown-paused {
  background: linear-gradient(135deg, #8c88a6 0%, #5f5b78 100%);
}
.meet-countdown-card.meet-countdown-paused .meet-countdown-clock { opacity: 0.85; }

/* Beacon: a full-screen Match & Meet sign you hold up at the meeting point so
   your group can spot each other. Triggered from the Location panel. */
.meet-beacon-btn { width: 100%; margin-top: 6px; }
.meet-beacon-hint { font-size: 12.5px; color: #8a87a0; margin: 8px 4px 2px; line-height: 1.45; text-align: center; }
/* Tappable meeting point in the Meet-up step: centres the map on it. */
.meet-meetpoint-btn {
  display: flex; align-items: center; gap: 6px; width: 100%; text-align: left;
  border: 1px solid #ECE8F8; background: #F7F5FF; color: #6F5CFF;
  font-size: 13px; font-weight: 700; padding: 9px 12px; border-radius: 10px;
  cursor: pointer; margin-bottom: 8px;
}
.meet-meetpoint-btn span { color: #9C93C9; font-weight: 600; }
.meet-meetpoint-btn:hover { background: #F1EEFF; border-color: #D9CFFB; }
/* Custom controls on the venue map: recenter (🎯) and locate-me (📍) */
.meet-map-btn {
  width: 34px; height: 34px; padding: 0; border: none; border-radius: 8px;
  background: #fff; box-shadow: 0 1px 4px rgba(18,0,154,0.25);
  display: grid; place-items: center; cursor: pointer;
}
.meet-map-btn:hover { background: #f4f2fb; }
.meet-map-btn svg { display: block; }
.meet-map-toast {
  position: absolute; left: 8px; bottom: 8px; z-index: 1000;
  background: rgba(20,0,30,0.82); color: #fff; font-size: 11.5px; font-weight: 600;
  padding: 6px 10px; border-radius: 8px; max-width: 72%; line-height: 1.3;
}

/* Contact nudge: add a way to stay in touch besides email (profile + Connect) */
.contact-nudge {
  display: flex; align-items: flex-start; gap: 11px;
  background: #f3f1ff; border: 1px solid #e2dcff; border-radius: 14px;
  padding: 13px 14px; margin: 12px 0;
}
.contact-nudge-emoji { font-size: 20px; line-height: 1.2; flex: 0 0 auto; }
.contact-nudge-body { flex: 1; min-width: 0; }
.contact-nudge-body strong { font-size: 14px; display: block; }
.contact-nudge-body p { font-size: 12.5px; color: #6f6c84; margin: 3px 0 0; line-height: 1.45; }
.contact-nudge-cta { flex: 0 0 auto; align-self: center; }
.connect-contact-nudge {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  background: #f3f1ff; border: 1px solid #e2dcff; border-radius: 14px;
  padding: 12px 14px; margin: 0 0 14px; cursor: pointer; font: inherit; color: inherit;
}
.connect-contact-nudge .ccn-emoji { font-size: 20px; flex: 0 0 auto; }
.connect-contact-nudge .ccn-text { flex: 1; font-size: 12.5px; color: #6f6c84; line-height: 1.4; }
.connect-contact-nudge .ccn-text strong { display: block; color: #262626; font-size: 13.5px; margin-bottom: 1px; }
.connect-contact-nudge .ccn-arrow { flex: 0 0 auto; color: var(--color-accent, #6F5CFF); font-weight: 800; }

/* Meet agenda (item 6) — reveal timeline below the beacon, reuses .mm-tl-* */
.meet-agenda { margin: 2px 0 14px; }
.meet-agenda-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.meet-agenda-name { font-size: 14px; font-weight: 700; color: #262626; }
.mm-tl-done .meet-agenda-name { color: #8a86a0; font-weight: 600; }
.mm-tl-upcoming .meet-agenda-name { color: #6b6680; font-weight: 600; }
.meet-agenda-sub { font-size: 11.5px; color: #8a86a0; line-height: 1.3; overflow-wrap: anywhere; }
.meet-agenda-detail-row { list-style: none; padding: 2px 0 8px 37px; }
.meet-agenda-detail { background: #f7f6fd; border: 1px solid #ece9f6; border-radius: 11px; padding: 10px; }
.meet-agenda-walk-h { font-size: 12px; font-weight: 700; margin: 0 0 7px; }
.meet-agenda-note { font-size: 12px; color: #4a4860; background: #fbf7ee; border: 1px solid #f1e6cf; border-radius: 9px; padding: 7px 9px; margin: 0 0 9px; line-height: 1.45; }
.meet-walk-list { display: flex; flex-direction: column; gap: 6px; }
.meet-walk-spot { display: flex; align-items: center; gap: 9px; background: #fff; border: 1px solid #ece9f6; border-radius: 10px; padding: 6px 8px; cursor: pointer; transition: border-color .12s, background .12s; }
.meet-walk-spot:hover { border-color: #FFC9B8; }
.meet-walk-spot.is-voted { border-color: #c9bdff; background: #f6f3ff; }
/* The tapped walking spot (now shown in orange on the map). */
.meet-walk-spot.is-selected { border-color: #FF7152; background: #FFF1EC; }
.meet-walk-spot .meet-walk-map { flex: 0 0 auto; margin-left: auto; opacity: .65; }
.meet-walk-spot.is-selected .meet-walk-map { opacity: 1; }
.meet-walk-emoji { font-size: 17px; flex: 0 0 auto; }
.meet-walk-name { flex: 1; font-size: 12.5px; font-weight: 700; color: #262626; line-height: 1.15; min-width: 0; }
.meet-walk-name small { display: block; font-weight: 500; color: #8a87a0; font-size: 10.5px; }
.meet-walk-vote { flex: 0 0 auto; border: 1px solid #e2dcff; background: #f4f2fb; color: #6F5CFF; font: 700 11.5px/1 'DM Sans', sans-serif; padding: 5px 9px; border-radius: 999px; cursor: pointer; }
.meet-walk-spot.is-voted .meet-walk-vote { background: #6F5CFF; color: #fff; border-color: #6F5CFF; }
.meet-walk-map { flex: 0 0 auto; border: none; background: transparent; font-size: 15px; cursor: pointer; padding: 4px; }
.meet-agenda-swap { font-size: 11px; color: #6f6c84; margin: 8px 0 0; line-height: 1.4; background: #fbf7ee; border: 1px solid #f1e6cf; border-radius: 9px; padding: 7px 9px; }
.meet-agenda-swap b { color: #b25c11; }
.mm-beacon {
  position: fixed; inset: 0; z-index: 9999;
  background-image: linear-gradient(125deg, #ff2db4, #9b2bff, #ff2db4, #5b2bff); /* fallback; set per group inline */
  background-size: 300% 300%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; cursor: pointer; padding: 24px;
  animation: mm-beacon-shift 5.5s ease infinite, mm-beacon-fade 0.18s ease-out;
}
@keyframes mm-beacon-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes mm-beacon-fade { from { opacity: 0; } to { opacity: 1; } }
.mm-beacon-kicker {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-weight: 800;
  font-size: 14px; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255,255,255,0.92); margin-bottom: 14px;
}
.mm-beacon-title {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-weight: 800;
  color: #fff; font-size: clamp(46px, 17vw, 108px); line-height: 0.95; letter-spacing: -0.01em;
  padding: 0 12px; overflow-wrap: anywhere; text-shadow: 0 0 30px rgba(255,255,255,0.5);
}
.mm-beacon-foot {
  position: absolute; bottom: 38px; left: 0; right: 0;
  color: #fff; font-weight: 600; font-size: 14px; opacity: 0.88;
}
@media (prefers-reduced-motion: reduce) {
  .mm-beacon { animation: mm-beacon-fade 0.18s ease-out; }
}

/* Profile: shown in place of the Message button until you are mutually connected */
.md-no-message { text-align: center; font-size: 13px; line-height: 1.5; color: var(--color-text-secondary); margin: 4px 8px 2px; }

/* === Admin desktop mode ===
   Activated by body.admin-desktop-mode (set on /admin when the admin opts in).
   Gated to wide viewports so flipping it on a phone stays single-column. */
.admin-layout-toggle { white-space: nowrap; }

@media (min-width: 760px) {
  body.admin-desktop-mode #app {
    max-width: none;
    width: 100%;
    padding-left: 28px;
    padding-right: 28px;
  }
  /* Header + tab nav + each tab panel all span full width. Inside the
     active tab panel, multiple .card children flow side-by-side in a
     2-column grid — that's where the "wide" feel comes from. */
  body.admin-desktop-mode #screen-root {
    display: block;
  }
  body.admin-desktop-mode #screen-root > .admin-header-card,
  body.admin-desktop-mode #screen-root > .admin-tabs,
  body.admin-desktop-mode #screen-root > .admin-tab-panel {
    margin-bottom: 16px;
  }
  /* Within a tab panel, lay multiple cards in 2 columns; last-of-type
     spans full width so it doesn't get orphaned in one column. */
  body.admin-desktop-mode .admin-tab-panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
  }
  /* [hidden] must win over display: grid — without this, every tab panel
     renders simultaneously even though the inactive ones are marked hidden. */
  body.admin-desktop-mode .admin-tab-panel[hidden] {
    display: none;
  }
  body.admin-desktop-mode .admin-tab-panel > .card {
    margin: 0;
  }
  body.admin-desktop-mode .admin-tab-panel > .card:only-child,
  body.admin-desktop-mode .admin-tab-panel > .card:last-child {
    grid-column: 1 / -1;
  }
  /* Users + Locations stay LISTS on desktop, not card walls (DL2). One
     column each so rows read top-to-bottom instead of reflowing into tiles. */
  body.admin-desktop-mode .admin-users-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }
  body.admin-desktop-mode .admin-venue-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }
  body.admin-desktop-mode .admin-round-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 14px;
  }

  /* Locations tab — DL2 two-pane: the map sticks on the left while the
     location list scrolls on the right. Keeps the map from stretching wide. */
  body.admin-desktop-mode .admin-loc-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;   /* map takes ~50% of the window */
    gap: 22px;
    align-items: start;
  }
  body.admin-desktop-mode .admin-loc-left {
    position: sticky;
    top: 16px;
  }
  body.admin-desktop-mode #admin-venues-map {
    height: 560px;
  }
  /* All-events board: cap the card column so cards don't stretch absurdly
     wide on a big screen, and centre it under the create button. */
  body.admin-desktop-mode .aev-cards,
  body.admin-desktop-mode .aev-more,
  body.admin-desktop-mode .aev-pager {
    max-width: 620px;
    margin-left: 0;
    margin-right: auto;
  }
  /* Events tab is a single column on desktop — the create button + editor +
     board read top-to-bottom instead of an odd half-empty two-column split. */
  body.admin-desktop-mode .admin-tab-panel[data-tab-panel="process"] {
    grid-template-columns: 1fr;
  }

  /* Group review modal: go wide and lay groups out as cards in a grid
     (the "second pane" feel — many groups visible at once). */
  body.admin-desktop-mode .admin-modal-xwide {
    max-width: 1040px;
    width: 94vw;
  }
  body.admin-desktop-mode .gr-groups {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
    max-height: 72vh;
  }
}

/* The toggle is still tappable on phones; it just won't widen the layout
   until the viewport is large enough. Give a hint via a subtle outline. */
body.admin-desktop-mode .admin-layout-toggle {
  border-color: #6F5CFF;
  color: #6F5CFF;
}

/* === Meeting-point modal: map + toolbar === */
.vm-map-wrap { margin: 12px 0; }
.vm-map {
  height: 320px;
  width: 100%;
  border-radius: 12px;
  border: 1px solid #e6e0ff;
  overflow: hidden;
  background: #f3f0fa;
}
.admin-mp-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 10px;
}
.admin-mp-filter {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #e6e0ff;
  border-radius: 10px;
  font-size: 14px;
  background: #fff;
}
.admin-mp-filter:focus { outline: none; border-color: #6F5CFF; }
.admin-mp-count { font-size: 12px; color: #888; white-space: nowrap; }

/* Locations overview map + bulk controls + walking emoji pins */
#admin-venues-map { height: 220px; border-radius: 13px; overflow: hidden; margin: 4px 0 10px; }
.admin-mp-bulk { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; }
.admin-mp-bulk-label { font-size: 12px; color: #8a87a0; }
.admin-venue-pin { background: none; border: none; }
.admin-venue-pin span {
  display: grid; place-items: center; width: 30px; height: 30px;
  font-size: 21px; line-height: 1; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.45));
}
.admin-venue-flash { box-shadow: 0 0 0 3px #6F5CFF; transition: box-shadow 0.25s ease; }

/* Admin: meet-agenda timings editor in the round settings */
.round-agenda-editor { margin-top: 10px; border-top: 1px solid #f0edf9; padding-top: 9px; }
.round-agenda-editor > summary { cursor: pointer; font-weight: 700; font-size: 13px; color: #5036d6; list-style: none; }
.round-agenda-editor > summary::-webkit-details-marker { display: none; }
.round-agenda-grid { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.round-agenda-note { width: 100%; padding: 8px 10px; border: 1px solid #e6e2f5; border-radius: 9px; font: inherit; resize: vertical; }
.round-agenda-actions { margin-top: 8px; display: flex; align-items: center; gap: 8px; }
.round-agenda-status { font-size: 12px; }

/* Admin: event-details editor (name/icon/type/walking points/recurring) */
.round-event-editor { margin: 8px 0 6px; border: 1px solid #ece9f6; border-radius: 12px; padding: 10px 12px; background: #fbfaff; }
.round-event-editor > summary { cursor: pointer; font-weight: 800; font-size: 13.5px; color: #5036d6; list-style: none; }
.round-event-editor > summary::-webkit-details-marker { display: none; }
.round-event-editor .input-label { font: 700 11.5px 'DM Sans', sans-serif; color: #5036d6; display: block; margin-bottom: 3px; }
.round-event-editor .hint { font-size: 11px; color: #8a86a0; margin: 3px 0 0; }
.round-ev-seg { display: flex; gap: 8px; margin-top: 4px; }
.round-ev-opt { flex: 1; border: 1.5px solid #e6e2f5; border-radius: 11px; padding: 8px; text-align: center; font-weight: 700; font-size: 13px; cursor: pointer; background: #fff; }
.round-ev-opt small { display: block; font-weight: 500; font-size: 10px; color: #8a86a0; margin-top: 2px; }
.round-ev-opt:has(input:checked) { border-color: #6F5CFF; background: #f3f1ff; color: #6F5CFF; }
.round-ev-walks { display: flex; flex-direction: column; gap: 5px; max-height: 150px; overflow-y: auto; margin-top: 4px; }
.round-ev-walk { font-size: 13px; display: flex; align-items: center; gap: 7px; cursor: pointer; }

/* Admin: all-events overview */
.admin-event-row { display: flex; align-items: center; gap: 11px; padding: 10px; border: 1px solid #ece9f6; border-radius: 12px; margin-bottom: 8px; }
.admin-event-ic { width: 38px; height: 38px; border-radius: 10px; background: linear-gradient(135deg,#efeaff,#d9d2ff); display: grid; place-items: center; font-size: 19px; flex: 0 0 auto; }
.admin-event-info { flex: 1; min-width: 0; }
.admin-event-info b { font: 800 14px 'Plus Jakarta Sans', sans-serif; }
.admin-event-meta { font-size: 11.5px; color: #8a86a0; margin-top: 1px; }
.aev-st { font-size: 10px; font-weight: 800; padding: 1px 7px; border-radius: 999px; }
.aev-done { color: #0e7a49; background: #e6f7ef; }
.aev-cancel { color: #b5302f; background: #fdeeee; }
.aev-live { color: #6F5CFF; background: #ece8ff; }
.aev-draft { color: #8a86a0; background: #efeef4; }
.aev-recur { font-size: 10px; font-weight: 800; color: #b25c11; background: #fff1e0; padding: 1px 7px; border-radius: 999px; }

/* E3 event rows */
.aev2-row { display: flex; align-items: center; gap: 12px; padding: 11px; border: 1px solid #efedf6; border-radius: 13px; margin-bottom: 9px; box-shadow: 0 2px 8px rgba(18,0,154,.03); }
.aev2-row.is-done { opacity: .82; background: #faf9fd; }
.aev2-ic { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; background: #f4f2fb; }
.aev2-ic svg { width: 23px; height: 23px; }
.aev2-ic.di-walk { color: #1f9d55; background: #e9f7ef; }
.aev2-ic.di-ming { color: #c2691a; background: #fdf1e3; }
.aev2-main { flex: 1; min-width: 0; }
.aev2-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.aev2-name { font: 700 14.5px 'Plus Jakarta Sans', sans-serif; color: #1d1b29; letter-spacing: -.01em; }
.evtag { font: 700 9.5px 'DM Sans', sans-serif; padding: 2px 8px; border-radius: 6px; letter-spacing: .02em; }
.evtag.t-free { color: #137a43; background: #e3f6ec; }
.evtag.t-tk { color: #c2691a; background: #fff0db; }
.evtag.t-wk { color: #5036d6; background: #efeaff; }
.aev2-bar { height: 6px; border-radius: 6px; background: #eceaf4; margin: 7px 0 0; overflow: hidden; max-width: 240px; }
.aev2-bar i { display: block; height: 100%; background: linear-gradient(90deg,#6F5CFF,#9b8bff); border-radius: 6px; }
.aev2-when { font-size: 11.5px; color: #8a86a0; margin-top: 5px; font-variant-numeric: tabular-nums; }
.aev2-acts { display: flex; flex-direction: column; gap: 5px; flex: 0 0 auto; }

/* L4 location rows + kebab menu */
.lv-row { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border: 1px solid #efedf6; border-radius: 12px; background: #fff; margin-bottom: 8px; }
.lv-row.lv-inactive { opacity: .58; }
.lv-main { flex: 1; min-width: 0; }
.lv-name { font: 700 13.5px 'Plus Jakarta Sans', sans-serif; color: #1d1b29; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lv-addr { font-size: 11.5px; color: #8a86a0; margin-top: 2px; overflow-wrap: anywhere; }
.lvc { font: 700 9.5px 'DM Sans', sans-serif; padding: 2px 8px; border-radius: 6px; display: inline-flex; align-items: center; gap: 4px; }
.lvc .d { width: 6px; height: 6px; border-radius: 50%; }
.lvc-walk { color: #137a43; background: #e6f7ee; } .lvc-walk .d { background: #1f9d55; }
.lvc-meet { color: #5036d6; background: #efeaff; } .lvc-meet .d { background: #6F5CFF; }
.lv-toggle { position: relative; flex: 0 0 auto; cursor: pointer; width: 38px; height: 22px; }
.lv-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.lv-track { position: absolute; inset: 0; border-radius: 999px; background: #cfcadf; transition: background .15s; }
.lv-track:after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .15s; }
.lv-toggle input:checked + .lv-track { background: #1f9d55; }
.lv-toggle input:checked + .lv-track:after { left: 18px; }
.lv-menu-wrap { position: relative; flex: 0 0 auto; }
.lv-kebab { width: 30px; height: 30px; border-radius: 8px; border: 0; background: #f6f4fb; color: #8a86a0; font-size: 18px; cursor: pointer; line-height: 1; }
.lv-menu { position: absolute; right: 0; top: 34px; z-index: 30; background: #fff; border: 1px solid #efedf6; border-radius: 11px; box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 5px; width: 162px; }
.lv-menu button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 9px 11px; border-radius: 8px; font-size: 13px; color: #1d1b29; cursor: pointer; }
.lv-menu button:hover { background: #f5f3fb; }
.lv-menu .lv-del { color: #c9405f; }
.admin-event-acts { display: flex; flex-direction: column; gap: 5px; flex: 0 0 auto; }
.admin-event-acts .act { white-space: nowrap; }

/* Active toggle on meeting point cards */
.admin-venue-toggle {
  display: flex; align-items: center; gap: 8px;
  margin-top: 10px;
  font-size: 12px;
  color: #404040;
  cursor: pointer;
}
.admin-venue-toggle input { margin: 0; }
.admin-venue-inactive { opacity: 0.55; }
.admin-venue-inactive .admin-venue-head strong { text-decoration: line-through; }

/* === Round card: signup code + auto-restart + new phases === */
.admin-round-code {
  display: inline-block;
  background: #FFF1E6;
  color: #7a4706;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  margin-top: 6px;
}
.admin-round-code code {
  font-family: 'JetBrains Mono', 'Menlo', monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.round-auto-badge {
  font-size: 11px;
  background: #c6f3de;
  color: #076239;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
}
/* Phase-coloured left borders */
.admin-round-card.admin-round-signup_open { border-left: 4px solid #6F5CFF; }
.admin-round-card.admin-round-computing { border-left: 4px solid #FFC26D; }
.admin-round-card.admin-round-awaiting_confirmation { border-left: 4px solid #FFAD46; }
.admin-round-card.admin-round-confirmed { border-left: 4px solid #16a766; }
.admin-round-card.admin-round-meeting { border-left: 4px solid #43d692; background: #f0fdf4; }
.admin-round-card.admin-round-post_meet_review { border-left: 4px solid #c5bdff; background: #faf9ff; }
.admin-round-card.admin-round-completed { border-left: 4px solid #ccc; opacity: 0.75; }
.admin-round-card.admin-round-cancelled { border-left: 4px solid #fb4c2f; opacity: 0.6; }

/* Phase-grid in the round modal (demo timers) */
.rm-phase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  margin: 8px 0;
}

/* === User status badges === */
.au-badge.au-status-matched {
  background: #c6f3de; color: #076239;
}
.au-badge.au-status-signed_up {
  background: #FFF1E6; color: #7a4706;
}
.au-badge.au-status-active {
  background: #e3d7ff; color: #41236d;
}
.au-badge.au-status-inactive {
  background: #efefef; color: #666;
}

/* === Tab bar flow arrow (between Match and Meet) ===
   Sits inline in the .tab-bar flex row, dims to a subtle hint glyph. */
.tab-bar .tab-flow-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #6F5CFF;
  opacity: 0.55;
  font-size: 16px;
  font-weight: 600;
  user-select: none;
  pointer-events: none;
  padding: 0 2px;
}

/* === Match round settings panel (admin) ===
   Sits atop the rounds list. Exposes the recurring round's parameters
   inline + a prominent pause/resume control. */
.admin-round-settings {
  border: 1px solid #E5E5F4;
  border-radius: 12px;
  background: #FAFAFE;
  padding: 14px 16px;
  margin: 0 0 16px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.admin-round-settings-empty {
  background: #FFFFFF;
  border-style: dashed;
  padding: 12px 16px;
  margin-bottom: 12px;
}
.admin-round-settings-paused {
  background: #FFF6E8;
  border-color: #FFC26D;
}
.admin-round-settings-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.admin-round-settings-title {
  font-weight: 600;
  font-size: 15px;
  color: #262626;
}
.admin-round-settings-spacer { flex: 1 1 auto; }
.admin-round-live-pill {
  font-size: 11px;
  font-weight: 600;
  color: #149e60;
  background: #E8F8EF;
  border-radius: 999px;
  padding: 2px 9px;
  letter-spacing: 0.02em;
}
.admin-round-paused-pill {
  font-size: 11px;
  font-weight: 700;
  color: #7A4706;
  background: #FFE6C7;
  border-radius: 999px;
  padding: 2px 9px;
  letter-spacing: 0.04em;
}
.admin-round-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
}
.admin-round-settings-grid .field {
  display: flex; flex-direction: column; gap: 4px; margin: 0;
}
.admin-round-settings-grid .field-label {
  font-size: 12px; color: #404040; font-weight: 500;
}
.admin-round-settings-grid .field input,
.admin-round-settings-grid .field select {
  padding: 6px 9px;
  font-size: 14px;
  border: 1px solid #D9D9E6;
  border-radius: 7px;
  background: #FFFFFF;
}
.admin-round-settings-venue { grid-column: 1 / -1; }
.admin-round-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 14px;
  color: #262626;
}
.admin-round-toggle input[type="checkbox"] {
  width: 18px; height: 18px; accent-color: #6F5CFF; cursor: pointer;
}
.admin-round-settings-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.admin-round-code-pill {
  font-size: 12px;
  color: #404040;
  background: #EFEEFB;
  border-radius: 999px;
  padding: 4px 10px;
}
.admin-round-code-pill code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-weight: 700;
  color: #12009A;
  letter-spacing: 0.05em;
}

/* Paused round card variant — softens the green / lavender accent to
   indicate the cycle isn't ticking. */
.admin-round-card.admin-round-paused {
  border-left-color: #FFC26D !important;
  background: #FFF8EE !important;
}
.admin-round-card.admin-round-paused .admin-round-phase {
  color: #7A4706;
  background: #FFE6C7;
}

@media (min-width: 760px) {
  .admin-round-settings-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .admin-round-settings-venue { grid-column: 1 / -1; }
}

/* === Admin tabs (between header card and tab panels) ===================== */
/* V2 admin nav — app bottom-nav style: icon on top, short label below, all five
   tabs fit on one row (no horizontal scroll), active = soft lavender chip. */
.admin-tabs {
  display: flex;
  gap: 4px;
  margin: 0 0 14px 0;
  padding: 6px;
  background: #FFFFFF;
  border: 1px solid #E5E5F4;
  border-radius: 16px;
}
.admin-tab {
  flex: 1 1 0;
  min-width: 0;
  background: transparent;
  border: none;
  padding: 8px 2px;
  border-radius: 12px;
  color: #8C8C95;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  transition: background 0.15s, color 0.15s;
}
.admin-tab .admin-tab-i { font-size: 19px; line-height: 1; }
.admin-tab .admin-tab-l { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 10.5px; line-height: 1.1; }
.admin-tab:hover { background: #F4F2FF; }
.admin-tab.active { background: #F1EDFF; color: #6F5CFF; }
.admin-tab-panel { display: block; }
.admin-tab-panel[hidden] { display: none; }

/* === Round parameters — vertical staircase =============================== */
.round-staircase {
  border: 1px solid #E5E5F4;
  border-radius: 14px;
  background: #FAFAFE;
  padding: 18px 20px 14px;
  margin: 0 0 18px 0;
}
.round-staircase-paused {
  background: #FFF6E8;
  border-color: #FFC26D;
}
.round-staircase-empty {
  background: #FFFFFF;
  border-style: dashed;
  text-align: center;
  padding: 22px;
}
.round-staircase-empty .btn { margin-top: 10px; }

.round-staircase-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px dashed #E5E5F4;
}
.round-staircase-title {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 19px;
  letter-spacing: 0.04em;
  color: #262626;
}
.round-staircase-spacer { flex: 1 1 auto; }
.round-live-pill {
  font-size: 11px; font-weight: 700; letter-spacing: 0.05em;
  color: #149e60; background: #E8F8EF;
  padding: 3px 10px; border-radius: 999px;
}
.round-paused-pill {
  font-size: 11px; font-weight: 700; letter-spacing: 0.05em;
  color: #7A4706; background: #FFE6C7;
  padding: 3px 10px; border-radius: 999px;
}
.round-demo-pill {
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  color: #7A4706; background: #FFC26D;
  padding: 3px 9px; border-radius: 999px;
}
.round-toggle {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px;
}
.round-toggle input[type="checkbox"] {
  width: 17px; height: 17px; accent-color: #6F5CFF; cursor: pointer;
}

/* Staircase rows */
.round-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.round-step {
  display: grid;
  grid-template-columns: 56px minmax(0, 1.4fr) minmax(180px, 1fr) 110px;
  gap: 14px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px dashed #ECEAF7;
  position: relative;
}
.round-step:last-child { border-bottom: none; }
.round-step-marker {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 2px solid #D9D9E6;
  background: #FFFFFF;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px; color: #8C8C95;
  position: relative;
  flex-shrink: 0;
  font-family: 'DM Sans', system-ui, sans-serif;
  letter-spacing: 0.02em;
}
.round-step-conn {
  position: absolute;
  left: 50%;
  top: calc(100% + 2px);
  width: 2px;
  height: 28px;
  background: #D9D9E6;
  transform: translateX(-50%);
}
.round-step-conn::after {
  content: '▼';
  position: absolute;
  left: 50%;
  bottom: -4px;
  transform: translateX(-50%);
  font-size: 9px;
  color: #C5BDFF;
  background: #FAFAFE;
  padding: 0 1px;
  line-height: 1;
}
.round-staircase-paused .round-step-conn::after { background: #FFF6E8; }
.round-step-done .round-step-marker {
  background: #E8F8EF; border-color: #149e60; color: #149e60;
}
.round-step-done .round-step-conn { background: #149e60; }
.round-step-done .round-step-conn::after { color: #149e60; }
.round-step-active .round-step-marker {
  background: #FFF6E3; border-color: #FFB347; color: #7A4706;
  box-shadow: 0 0 0 4px rgba(255,179,71,0.18);
}
.round-step-active {
  background: linear-gradient(90deg, rgba(255,194,109,0.08) 0%, rgba(255,194,109,0) 100%);
  border-radius: 8px;
  padding-left: 8px; padding-right: 8px;
  margin-left: -8px; margin-right: -8px;
}
.round-step-body { min-width: 0; }
.round-step-name {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 19px;
  letter-spacing: 0.03em;
  color: #262626;
}
.round-step-sub {
  font-size: 12px;
  color: #8C8C95;
  margin-top: 1px;
}
.round-step-input .input-label,
.round-staircase-footer .input-label {
  font-size: 11px;
  font-weight: 600;
  color: #404040;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 3px;
}
.round-step-input input,
.round-step-input select {
  width: 100%;
  padding: 7px 9px;
  border: 1px solid #D9D9E6;
  border-radius: 7px;
  background: #FFFFFF;
  font-size: 14px;
}
.round-step-state { text-align: right; }
.step-state {
  font-size: 12px;
  font-weight: 600;
  display: inline-block;
}
.step-state-done   { color: #149e60; }
.step-state-upc    { color: #8C8C95; }
.step-state-active {
  color: #7A4706;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.step-state-paused {
  color: #7A4706;
  font-weight: 700;
}

/* Footer row */
.round-staircase-footer {
  display: grid;
  grid-template-columns: 1.5fr 0.5fr 0.5fr auto;
  gap: 14px;
  align-items: end;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed #E5E5F4;
}
.round-staircase-footer select,
.round-staircase-footer input {
  width: 100%;
  padding: 7px 9px;
  border: 1px solid #D9D9E6;
  border-radius: 7px;
  background: #FFFFFF;
  font-size: 14px;
}
.round-code-pill {
  font-size: 12px;
  color: #404040;
  background: #EFEEFB;
  border-radius: 999px;
  padding: 6px 12px;
  align-self: end;
}
.round-code-pill code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-weight: 700;
  color: #12009A;
  letter-spacing: 0.05em;
}

/* Mobile: collapse step rows into 2-column (marker + body | input + state) */
@media (max-width: 759px) {
  .round-step {
    grid-template-columns: 44px 1fr;
    gap: 10px;
    align-items: start;
  }
  .round-step-input { grid-column: 1 / -1; padding-left: 54px; }
  .round-step-state { grid-column: 1 / -1; padding-left: 54px; text-align: left; }
  .round-step-marker { width: 32px; height: 32px; font-size: 13px; }
  .round-step-conn { height: 24px; }
  .round-staircase-footer {
    grid-template-columns: 1fr;
  }
  .round-staircase-head { gap: 6px; }
  .admin-tabs { padding: 3px; }
  .admin-tab { padding: 8px 10px; font-size: 13px; }
}

/* === Match round hero countdown ========================================== */
.round-hero {
  background: linear-gradient(135deg, #FFF6E3 0%, #FFF1E6 60%, #EFEEFB 100%);
  border: 1px solid #FFC26D;
  border-radius: 14px;
  padding: 22px 28px;
  display: flex;
  align-items: center;
  gap: 22px;
  margin: 0 0 16px 0;
  flex-wrap: wrap;
}
.round-hero-paused {
  background: linear-gradient(135deg, #FFE6C7 0%, #FFC26D 100%);
  border-color: #FF7152;
}
.round-hero-archived {
  background: linear-gradient(135deg, #EFEEFB 0%, #F4F2FF 100%);
  border-color: #C5BDFF;
}
.round-hero-left { min-width: 0; }
.round-hero-label,
.round-hero-timer-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #404040;
  text-transform: uppercase;
}
.round-hero-phase {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 44px;
  letter-spacing: 0.04em;
  color: #12009A;
  line-height: 1;
  margin: 4px 0 6px;
}
.round-hero-paused .round-hero-phase { color: #7A4706; }
.round-hero-archived .round-hero-phase { color: #6F5CFF; }
.round-hero-meta {
  font-size: 13px;
  color: #404040;
}
.round-hero-spacer { flex: 1 1 auto; min-width: 16px; }
.round-hero-right { text-align: right; }
.round-hero-timer-label { display: block; margin-bottom: 4px; }
.round-hero-timer {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 56px;
  font-weight: 700;
  color: #7A4706;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.round-hero-paused .round-hero-timer { color: #5a2a06; }
.round-hero-archived .round-hero-timer { color: #6F5CFF; font-size: 32px; }

/* === Round actions strip (under staircase footer) ======================== */
.round-staircase-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed #E5E5F4;
}
.round-staircase-actions .btn { white-space: nowrap; }
.round-staircase-actions-spacer { flex: 1 1 auto; }
.round-action-danger { color: #a44; }
.round-action-danger:hover { background: #FCE8E8; }

/* Mobile: hero stacks vertically, timer drops in size a touch */
@media (max-width: 759px) {
  .round-hero {
    padding: 18px 18px;
    gap: 12px;
  }
  .round-hero-spacer { display: none; }
  .round-hero-right { text-align: left; }
  .round-hero-phase { font-size: 36px; }
  .round-hero-timer { font-size: 44px; }
}

/* === In-app modal — destructive + single-button variants ================ */
.app-modal-actions.app-modal-actions-single {
  justify-content: flex-end;
}
.app-modal.app-modal-danger .app-modal-title { color: #a44; }
.btn-danger {
  background: #FF7152;
  color: white;
  border: 1px solid #FF7152;
}
.btn-danger:hover { background: #e85d3f; border-color: #e85d3f; }
.btn-danger:disabled { background: #f5beae; border-color: #f5beae; cursor: not-allowed; }

/* === Match screen join flow (Buy ticket → Code) ======================== */
.start-join-flow {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.start-buy-ticket {
  /* placeholder mode — looks like the real CTA but pops a "soon" modal */
  letter-spacing: 0.02em;
}
.start-or-sep {
  text-align: center;
  font-size: 12px;
  color: #8C8C95;
  margin: 0;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Missed-this-round phase: softer accent so it doesn't compete with active states.
   Dark text on the light lavender so it's actually readable. */
.round-phase-missed {
  background: linear-gradient(135deg, #EFEEFB 0%, #F4F2FF 100%);
  border-color: #C5BDFF;
  color: #262626;
}
.round-phase-missed .round-countdown-value { color: #12009A; }
.round-phase-missed .round-countdown-label { color: #404040; opacity: 1; }
.round-phase-missed .round-countdown-footer {
  color: #404040;
  border-top-color: rgba(18, 0, 154, 0.18);
  opacity: 1;
}

/* === Meet tab — sub-tabs + chat + icebreaker topics (Pass E) =========== */

/* Sub-tab pill bar (smaller than the lower tab bar; lavender pill on active) */
.meet-subtabs {
  display: flex;
  gap: 6px;
  background: #EFEEFB;
  padding: 4px;
  border-radius: 999px;
  margin: 14px 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.meet-subtabs::-webkit-scrollbar { display: none; }
.meet-subtab {
  flex: 1 0 auto;
  min-width: 0;
  border: none;
  background: transparent;
  font: inherit;
  font-weight: 600;
  font-size: 13px;
  color: #404040;
  padding: 9px 8px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  text-align: center;
  transition: all var(--transition-fast);
}
.meet-subtab:hover { color: #6F5CFF; }
.meet-subtab.is-active {
  background: #6F5CFF;
  color: white;
  box-shadow: 0 1px 3px rgba(111, 92, 255, 0.32);
}
.meet-subpanel[hidden] { display: none; }
.meet-subpanel > * + * { margin-top: 12px; }

/* === Group chat panel === */
.meet-chat-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: white;
  border-radius: 14px;
  border: 1px solid #E5E5F4;
}
.meet-chat-log {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 380px;
  overflow-y: auto;
  padding: 4px 2px;
  scroll-behavior: smooth;
}
.meet-chat-empty {
  text-align: center;
  padding: 28px 12px;
  margin: 0;
}
.meet-chat-msg {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 10px;
  align-items: start;
}
.meet-chat-msg.is-me {
  grid-template-columns: 1fr 32px;
}
.meet-chat-msg.is-me .meet-chat-avatar { order: 2; }
.meet-chat-msg.is-me .meet-chat-body   { order: 1; text-align: right; }
.meet-chat-avatar {
  width: 32px; height: 32px;
}
.meet-chat-body {
  min-width: 0;
}
.meet-chat-meta {
  display: flex;
  gap: 8px;
  font-size: 11px;
  color: #8C8C95;
  margin: 0 0 2px 0;
  align-items: baseline;
}
.meet-chat-msg.is-me .meet-chat-meta { justify-content: flex-end; }
.meet-chat-handle { font-weight: 600; color: #404040; }
.meet-chat-text {
  display: inline-block;
  background: #F4F2FF;
  border-radius: 12px;
  padding: 8px 12px;
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  color: #262626;
  white-space: pre-wrap;
  word-break: break-word;
  text-align: left;
  max-width: 100%;
}
.meet-chat-msg.is-me .meet-chat-text {
  background: #6F5CFF;
  color: white;
}
.meet-chat-form {
  display: flex;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px dashed #E5E5F4;
}
.meet-chat-input {
  flex: 1;
  padding: 9px 12px;
  border: 1px solid #D9D9E6;
  border-radius: 999px;
  font-size: 14px;
  background: #FAFAFC;
}
.meet-chat-input:focus {
  outline: none;
  border-color: #6F5CFF;
  background: white;
}
.meet-chat-send {
  white-space: nowrap;
  padding-left: 16px;
  padding-right: 16px;
}

/* === Icebreaker topic chips === */
.meet-topics-card {
  background: white;
  border-radius: 14px;
  padding: 16px;
  border: 1px solid #E5E5F4;
}
.meet-topics-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 4px;
}
.meet-topics-refresh {
  font-size: 12px;
  padding: 4px 10px;
}
.meet-topics-hint {
  color: #8C8C95;
  font-size: 12px;
  margin: 0 0 12px 0;
}
.meet-topics-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.meet-topic {
  display: grid;
  grid-template-columns: 20px 1fr 30px;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 10px 14px;
  background: #F4F2FF;
  border: 1px solid transparent;
  border-radius: 12px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.meet-topic:hover { background: #EFEEFB; border-color: #C5BDFF; }
.meet-topic.is-voted {
  background: #FFE6C7;
  border-color: #FFC26D;
}
.meet-topic-cat { font-size: 16px; line-height: 1; width: 20px; text-align: center; flex-shrink: 0; }
.meet-topic-text {
  font-size: 14px;
  color: #262626;
  line-height: 1.35;
}
.meet-topic-votes {
  background: white;
  color: #6F5CFF;
  font-weight: 700;
  font-size: 12px;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid #E5E5F4;
}
.meet-topic.is-voted .meet-topic-votes {
  background: #FF7152;
  color: white;
  border-color: #FF7152;
}

/* === Participants list === */
.meet-participants-card {
  background: white;
  border-radius: 14px;
  padding: 16px;
  border: 1px solid #E5E5F4;
}
.meet-participants-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.meet-participant {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 8px;
  border-radius: 10px;
  cursor: pointer;
  transition: background var(--transition-fast);
}
.meet-participant:hover { background: #F4F2FF; }
.meet-participant.is-you { cursor: pointer; opacity: 0.92; }
.meet-participant-body { min-width: 0; }
.meet-participant-handle {
  margin: 0;
  font-weight: 700;
  font-size: 15px;
  color: #262626;
}
.meet-participant-traits {
  margin: 2px 0 0 0;
  font-size: 12px;
  color: #8C8C95;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.meet-participant-chevron {
  font-size: 22px;
  color: #C5BDFF;
  font-weight: 400;
}
.meet-you-tag {
  display: inline-block;
  font-size: 10px;
  background: #FFC26D;
  color: #262626;
  padding: 1px 6px;
  border-radius: 999px;
  font-weight: 700;
  margin-left: 6px;
  vertical-align: middle;
}

/* === Post-meet flow (Pass F) ============================================ */
.post-meet-header { margin-bottom: 16px; }
.post-meet-eyebrow {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
  color: #6F5CFF;
  font-weight: 700;
}
.post-meet-title {
  margin: 4px 0 6px 0;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 28px;
  line-height: 1.1;
  color: #262626;
}
.post-meet-sub { margin: 0; color: #404040; font-size: 14px; line-height: 1.4; }
.post-meet-note { margin: 10px 0 0; padding: 8px 12px; background: #f0eaff; border-radius: 10px; color: #4a3fb0; font-size: 13px; line-height: 1.45; }

/* Phase 1 — pick grid */
.post-meet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.post-meet-pick {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: white;
  border: 2px solid transparent;
  border-radius: 14px;
  padding: 14px 8px;
  cursor: pointer;
  transition: all var(--transition-fast);
  font: inherit;
}
.post-meet-pick:hover { border-color: #C5BDFF; }
.post-meet-pick.is-picked {
  border-color: #6F5CFF;
  background: #F4F2FF;
  box-shadow: 0 2px 8px rgba(111, 92, 255, 0.18);
}
.post-meet-pick-avatar { width: 76px; height: 76px; }
.post-meet-pick-check {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  background: #6F5CFF;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  opacity: 0;
  transform: scale(0.6);
  transition: all var(--transition-fast);
}
.post-meet-pick.is-picked .post-meet-pick-check { opacity: 1; transform: scale(1); }
.post-meet-pick-handle { margin: 0; font-size: 13px; font-weight: 600; color: #262626; }

/* Phase 2 — rate */
.post-meet-rate-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  background: white;
  border-radius: 16px;
  padding: 22px 16px;
  margin-bottom: 18px;
  border: 1px solid #E5E5F4;
}
.post-meet-rate-avatar { width: 96px; height: 96px; }
.post-meet-attrs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.post-meet-attr {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #F4F2FF;
  border: 2px solid transparent;
  border-radius: 999px;
  padding: 9px 14px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: #262626;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.post-meet-attr:hover { background: #EFEEFB; border-color: #C5BDFF; }
.post-meet-attr.is-selected {
  background: #FFE6C7;
  border-color: #FF7152;
  color: #262626;
}
.post-meet-attr-emoji { font-size: 16px; line-height: 1; }
.post-meet-attr-word { line-height: 1; }

/* Footer (shared) */
.post-meet-footer {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  align-items: center;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed #E5E5F4;
}
.post-meet-footer .btn-primary { flex: 1; }

/* Submitting + done */
.post-meet-submitting {
  text-align: center;
  padding: 60px 12px;
  color: #404040;
}
.post-meet-submitting .spinner {
  margin: 0 auto 16px;
  width: 28px;
  height: 28px;
  border: 3px solid #C5BDFF;
  border-top-color: #6F5CFF;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.post-meet-done {
  text-align: center;
  padding: 40px 16px 24px;
}
.post-meet-done-illu { font-size: 48px; line-height: 1; margin-bottom: 12px; }
.post-meet-done-title {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 28px;
  color: #262626;
  margin: 0 0 8px 0;
}
.post-meet-done-body { color: #404040; max-width: 360px; margin: 0 auto 22px; }
.post-meet-done-grid {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 18px;
}
.post-meet-done-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.post-meet-done-card p {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: #262626;
}

/* === Connect tab (Pass G) =============================================== */
.connect-header { margin-bottom: 14px; }
.connect-title {
  margin: 0;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 30px;
  color: #262626;
  line-height: 1.05;
}
.connect-sub { margin: 4px 0 0 0; color: #404040; font-size: 14px; }

.connect-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.connect-card {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  background: white;
  border: 1px solid #E5E5F4;
  border-radius: 14px;
  padding: 12px 14px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.connect-card:hover {
  border-color: #C5BDFF;
  background: #FAFAFC;
  transform: translateY(-1px);
}
.connect-avatar { width: 56px; height: 56px; }
.connect-body { min-width: 0; }
.connect-handle {
  margin: 0;
  font-weight: 700;
  font-size: 16px;
  color: #262626;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.connect-meta {
  margin: 2px 0 0 0;
  font-size: 13px;
  color: #404040;
}
.connect-source {
  margin: 4px 0 0 0;
  font-size: 12px;
  color: #8C8C95;
  font-style: italic;
}
.connect-chevron {
  font-size: 22px;
  color: #C5BDFF;
  font-weight: 400;
}

/* "Your people" row: a profile card (tap → profile) + a round message button
   with an orange unread badge (C1 layout + C3 message button). */
.connect-person-row { display: flex; align-items: stretch; gap: 8px; }
.connect-person-row .connect-card { flex: 1; min-width: 0; }
.connect-view { font-size: 12px; font-weight: 700; color: #6F5CFF; white-space: nowrap; align-self: center; }
.connect-msg-btn {
  position: relative; flex: 0 0 auto; width: 52px; border: 0;
  background: #6F5CFF; color: #fff; border-radius: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
  transition: all var(--transition-fast);
}
.connect-msg-btn:hover { background: #5a45e0; transform: translateY(-1px); }
.connect-msg-badge {
  position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px;
  background: #FF7152; color: #fff; font-size: 11px; font-weight: 800;
  border-radius: 999px; display: flex; align-items: center; justify-content: center;
  padding: 0 5px; border: 2px solid #fff;
}

/* === Phase band (Pass H) ================================================ */
/* Slim always-visible strip above the lower tab bar that ticks down to the
   next phase boundary. Tappable: dispatches mm-switch-tab to home.js. */
.phase-band {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: linear-gradient(135deg, #F4F2FF 0%, #EFEEFB 100%);
  border: 1px solid #C5BDFF;
  border-radius: 12px;
  padding: 10px 14px;
  margin: 0 0 10px 0;
  font: inherit;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-align: left;
}
.phase-band:hover    { transform: translateY(-1px); box-shadow: 0 4px 10px -2px rgba(111, 92, 255, 0.18); }
.phase-band:active   { transform: translateY(0);    box-shadow: none; }

.phase-band-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #6F5CFF;
  flex-shrink: 0;
}
.phase-band-text {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.phase-band-label {
  font-size: 13px;
  font-weight: 600;
  color: #404040;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.phase-band-value {
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  color: #12009A;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.phase-band-arrow {
  font-size: 18px;
  color: #6F5CFF;
  font-weight: 600;
  line-height: 1;
}

/* Phase-specific accents. Dot + arrow + value pick up the phase colour;
   background gradient stays a single soft tint so the strip never shouts. */
.phase-band--signup_open           .phase-band-dot { background: #6F5CFF; }
.phase-band--signup_open           .phase-band-arrow { color: #6F5CFF; }

.phase-band--computing             { background: linear-gradient(135deg, #FFF1E6 0%, #FFE6C7 100%); border-color: #FFC26D; }
.phase-band--computing             .phase-band-dot   { background: #FFC26D; animation: phase-pulse 1.4s ease-in-out infinite; }
.phase-band--computing             .phase-band-value { color: #7A4706; }
.phase-band--computing             .phase-band-arrow { color: #FF7152; }

.phase-band--awaiting_confirmation .phase-band-dot   { background: #FFC26D; }
.phase-band--awaiting_confirmation .phase-band-arrow { color: #FFC26D; }

.phase-band--confirmed             .phase-band-dot   { background: #6F5CFF; }
.phase-band--confirmed             .phase-band-arrow { color: #6F5CFF; }

.phase-band--meeting               { background: linear-gradient(135deg, #DAF7E8 0%, #B9E4D0 100%); border-color: #43d692; }
.phase-band--meeting               .phase-band-dot   { background: #16a766; animation: phase-pulse 1.6s ease-in-out infinite; }
.phase-band--meeting               .phase-band-value { color: #04502e; }
.phase-band--meeting               .phase-band-arrow { color: #16a766; }

.phase-band--post_meet_review      { background: linear-gradient(135deg, #FFE6C7 0%, #FFC8AF 100%); border-color: #FF7152; }
.phase-band--post_meet_review      .phase-band-dot   { background: #FF7152; }
.phase-band--post_meet_review      .phase-band-value { color: #8A1C0A; }
.phase-band--post_meet_review      .phase-band-arrow { color: #FF7152; }

.phase-band--paused                { background: linear-gradient(135deg, #EFEFEF 0%, #E7E7E7 100%); border-color: #CCC; }
.phase-band--paused                .phase-band-dot   { background: #999; }
.phase-band--paused                .phase-band-arrow { color: #666; }
.phase-band--paused                .phase-band-label { color: #666; }

@keyframes phase-pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.85); }
}

/* === Segmented countdown cells (hero) =================================== */
/* Calm launch-countdown pattern: number + unit label per cell, thin colon
   separators. Replaces the single oversized condensed-caps timer. */
.round-countdown-cells {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  margin: 2px 0 4px;
}
.cd-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 52px;
}
.cd-num {
  font-family: inherit;            /* brand body font, not the display face */
  font-size: 44px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
}
.cd-unit {
  margin-top: 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.7;
}
.cd-colon {
  font-size: 34px;
  font-weight: 700;
  line-height: 1.1;
  opacity: 0.35;
  font-variant-numeric: tabular-nums;
}
/* Inherit phase-appropriate colours from the card. On the active (gradient)
   cards the text is white; on the missed (light) card the overrides below
   set dark tones. */
.round-phase-missed .cd-num   { color: #12009A; }
.round-phase-missed .cd-unit  { color: #404040; opacity: 1; }
.round-phase-missed .cd-colon { color: rgba(18,0,154,0.3); }

/* Meet-card countdown cells: smaller than the Match hero (tighter card) */
.meet-countdown-card .round-countdown-cells { gap: 8px; margin: 2px 0 0; }
.meet-countdown-card .cd-num { font-size: 34px; }
.meet-countdown-card .cd-colon { font-size: 26px; }
.meet-countdown-card .cd-unit { font-size: 10px; margin-top: 4px; }

/* === Meet group header (redesign — was a cramped avatar grid) =========== */
.meet-group-header {
  padding: 4px 2px 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--color-border);
}
.meet-group-header .meet-pill-success {
  display: inline-block;
  background: #d4f5e0;
  color: #0e6c3f;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.meet-group-name {
  margin: 10px 0 4px;
  font-size: 26px;
  line-height: 1.1;
  font-weight: 800;
  color: #262626;
}
.meet-group-sub {
  margin: 0;
  font-size: 14px;
  color: var(--color-text-secondary, #404040);
}

/* Member row: shared-interests pill + aside */
.meet-participant-aside { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.meet-shared-pill {
  background: #EFEEFB; color: #6F5CFF;
  font-size: 11px; font-weight: 700;
  padding: 4px 9px; border-radius: 999px; white-space: nowrap;
}

/* Post-meet rate: "+ more words" expander */
.post-meet-more-btn {
  display: inline-block;
  margin-top: 12px;
  background: none; border: none;
  color: #6F5CFF; font: inherit; font-weight: 700; font-size: 14px;
  cursor: pointer; padding: 6px 4px;
}
.post-meet-more-btn:hover { text-decoration: underline; }

/* People row: language flags + looking-for chips */
.meet-participant-flags { font-size: 13px; letter-spacing: 1px; }
.meet-lf-row { margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 5px; }
.meet-lf-chip {
  background: #FFF1E6; color: #8b5a00;
  font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}

/* Report link + modal */
.md-report-link {
  display: block; width: 100%; margin-top: 10px;
  background: none; border: none; cursor: pointer;
  color: #9a9a9a; font: inherit; font-size: 13px; font-weight: 600; padding: 6px;
}
.md-report-link:hover { color: #FF7152; }
.report-modal { max-width: 420px; }
.report-reasons { display: flex; flex-direction: column; gap: 2px; margin: 8px 0 12px; }
.report-reason {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px; border-radius: 12px; cursor: pointer;
  font-size: 14px; color: #262626; transition: background var(--transition-fast);
}
.report-reason:hover { background: #F4F2FF; }
.report-reason input { accent-color: #6F5CFF; width: 18px; height: 18px; flex-shrink: 0; }
.report-message {
  width: 100%; border: 1px solid #E5E5F4; border-radius: 12px;
  padding: 10px 12px; font: inherit; font-size: 14px; resize: vertical; box-sizing: border-box;
}
.report-message.is-error { border-color: #FF7152; background: #fff5f2; }

/* === Messaging (Connect inbox + thread) ============================== */
.connect-section { margin-bottom: 22px; }
.connect-section-title { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #6F5CFF; margin: 0 2px 10px; }
.dm-thread-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.dm-thread-list li { list-style: none; }
.dm-thread-row { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: #fff; border: 1px solid #ECEAF6; border-radius: 14px; cursor: pointer; text-align: left; font: inherit; }
.dm-thread-row.is-unread { background: #FFF6F2; border-color: #FFD9CC; }
.dm-row-body { min-width: 0; flex: 1; }
.dm-row-name { margin: 0; font-weight: 700; font-size: 15px; color: #262626; }
.dm-row-preview { margin: 2px 0 0; font-size: 13px; color: #7a7a7a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-thread-row.is-unread .dm-row-preview { color: #262626; font-weight: 600; }
.dm-row-unread { background: #FF7152; color: #fff; font-weight: 800; font-size: 12px; min-width: 22px; height: 22px; border-radius: 999px; display: flex; align-items: center; justify-content: center; padding: 0 6px; flex-shrink: 0; }
.dm-thread { display: flex; flex-direction: column; min-height: calc(100vh - 96px); }
.dm-header { display: flex; align-items: center; gap: 10px; padding: 10px 2px 12px; border-bottom: 1px solid #ECEAF6; }
.dm-back { background: none; border: none; font-size: 22px; color: #6F5CFF; cursor: pointer; padding: 0 6px 0 0; }
.dm-head-name { font-weight: 700; font-size: 16px; }
.dm-messages { flex: 1; overflow-y: auto; padding: 14px 2px; display: flex; flex-direction: column; gap: 8px; }
.dm-bubble { max-width: 78%; padding: 9px 13px; border-radius: 16px; font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.dm-bubble.is-me { align-self: flex-end; background: #6F5CFF; color: #fff; border-bottom-right-radius: 5px; }
.dm-bubble.is-them { align-self: flex-start; background: #F1EFFB; color: #262626; border-bottom-left-radius: 5px; }
.dm-composer { display: flex; gap: 8px; padding: 10px 2px; border-top: 1px solid #ECEAF6; }
.dm-input { flex: 1; border: 1px solid #E5E5F4; border-radius: 18px; padding: 10px 14px; font: inherit; font-size: 14px; resize: none; max-height: 120px; box-sizing: border-box; }
.dm-send { background: #6F5CFF; color: #fff; border: none; border-radius: 18px; padding: 0 18px; font: inherit; font-weight: 700; cursor: pointer; }
.dm-send:disabled { opacity: .5; }
/* D2 — Connect unread shows a count pill pinned to the tab's right edge.
   Overrides the base dot (which hid the number and sat near centre). */
.tab-badge.badge-unread {
  top: 4px;
  right: 6px;
  left: auto;
  min-width: 18px;
  width: auto;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background: #FF7152;
  color: #fff;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  text-indent: 0;
  overflow: visible;
  box-shadow: 0 0 0 2px var(--color-surface, #fff);
}
.tab.active .tab-badge.badge-unread { background: #FF7152; }

/* Profile: description + expand-all */
.md-description { margin: 4px 0 14px; font-size: 15px; line-height: 1.5; color: #404040; }
.md-expand-btn { display: block; width: 100%; margin: 6px 0 2px; background: #F4F2FF; border: none; border-radius: 12px; color: #6F5CFF; font: inherit; font-weight: 700; font-size: 14px; padding: 12px; cursor: pointer; }
.md-expand-btn:hover { background: #EFEEFB; }
.md-expandable[hidden] { display: none; }
.md-expandable { margin-top: 6px; }

/* Vibe — one-by-one */
.vibe-one { padding: 4px 2px; }
.vibe-top { margin-bottom: 16px; }
.vibe-progress-bar { height: 6px; background: #ECEAF6; border-radius: 999px; overflow: hidden; }
.vibe-progress-bar span { display: block; height: 100%; background: linear-gradient(90deg,#6F5CFF,#C5BDFF); transition: width .35s; }
.vibe-progress-text { margin: 8px 2px 0; font-size: 13px; color: #404040; }
.vibe-big-card { background: #fff; border: 1px solid #ECEAF6; border-radius: 20px; padding: 26px 22px; box-shadow: 0 6px 22px rgba(18,0,154,0.07); animation: vibe-in 260ms cubic-bezier(.2,.7,.3,1); }
@keyframes vibe-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.vibe-cat { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.vibe-cat-emoji { font-size: 22px; }
.vibe-cat-label { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #6F5CFF; }
.vibe-big-text { font-size: 22px; line-height: 1.32; font-weight: 700; color: #262626; margin: 0 0 22px; }
.vibe-buttons { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.vibe-resp { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 13px 6px; border-radius: 14px; border: 1.5px solid #ECEAF6; background: #FAFAFE; font: inherit; font-size: 13px; font-weight: 600; color: #404040; cursor: pointer; }
.vibe-resp-emoji { font-size: 22px; }
.vibe-resp:hover { border-color: #C5BDFF; background: #F4F2FF; }
.vibe-resp.is-active { border-color: #6F5CFF; background: #6F5CFF; color: #fff; }
.vibe-resp-agree.is-active { background: #2e9e63; border-color: #2e9e63; }
.vibe-resp-disagree.is-active { background: #FF7152; border-color: #FF7152; }
.vibe-resp-neutral.is-active { background: #8a8a8a; border-color: #8a8a8a; }
.vibe-strong { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; }
.vibe-strong-label { font-size: 13px; color: #9a9a9a; }
.vibe-stars { display: flex; gap: 4px; }
.vibe-star { background: none; border: none; font-size: 22px; line-height: 1; color: #DAD7EC; cursor: pointer; padding: 0; }
.vibe-star.is-filled { color: #FFC26D; }
.vibe-nav { display: flex; justify-content: space-between; margin-top: 16px; }
.vibe-nav-btn { background: none; border: none; color: #6F5CFF; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; padding: 8px 4px; }
.vibe-nav-btn:disabled { color: #C5C2DA; }
.vibe-done { text-align: center; padding: 40px 20px; }
.vibe-done-emoji { font-size: 48px; }
.vibe-done-title { font-size: 22px; font-weight: 800; margin: 12px 0 6px; }
.vibe-done-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; }

/* The "Review & edit your answers" entry point — a real secondary button. */
.vibe-review-open {
  display: block; width: 100%; max-width: 340px; margin: 18px auto 0;
  background: #fff; border: 1px solid #E1DCF3; color: #6F5CFF;
  font: 700 14px 'DM Sans', sans-serif; padding: 12px 16px; border-radius: 12px;
  cursor: pointer; box-shadow: 0 2px 8px rgba(18,0,154,0.05); transition: background .12s, border-color .12s;
}
.vibe-review-open:hover { background: #F7F5FF; border-color: #C5BDFF; }
.vibe-review-open:active { background: #F1EEFF; }

/* Vibe — Review answers overview (variant 5: summary header + editable list) */
.vibe-review { padding: 4px 0 24px; }
.vr-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.vr-back { background: none; border: none; color: var(--color-accent); font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; padding: 4px 0; }
.vr-title { font-family: var(--font-display); font-weight: 800; font-size: 20px; margin: 0; }
.vr-summary { display: flex; gap: 10px; margin-bottom: 16px; }
.vr-sum { flex: 1; background: #F6F4FF; border: 1px solid #ECE8FB; border-radius: 12px; padding: 12px; text-align: center; }
.vr-sum b { font-family: var(--font-display); font-weight: 800; font-size: 22px; display: block; line-height: 1.1; }
.vr-sum span { font-size: 11.5px; color: var(--color-text-muted); font-weight: 600; }
.vr-sum-ag b { color: var(--color-accent); }
.vr-sum-di b { color: #D14343; }
.vr-list { display: flex; flex-direction: column; }
.vr-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid #F1EFFA; }
.vr-row:first-child { border-top: none; }
.vr-q { flex: 1; font-size: 13.5px; line-height: 1.35; color: #3f3a52; }
.vr-seg { display: inline-flex; border: 1px solid #E3DEF7; border-radius: 999px; overflow: hidden; flex: none; }
.vr-opt { background: #fff; border: none; font: inherit; font-weight: 700; font-size: 11.5px; padding: 7px 12px; color: var(--color-text-muted); cursor: pointer; transition: background 0.12s ease, color 0.12s ease; }
.vr-opt.agr { border-left: 1px solid #E3DEF7; }
.vr-opt.dis.on { background: #FBEAEA; color: #D14343; }
.vr-opt.agr.on { background: var(--color-accent); color: #fff; }
.vr-reset { display: block; width: 100%; margin-top: 18px; background: #fff; border: 1px solid #F0C9C9; border-radius: 12px; color: #D14343; font: inherit; font-weight: 700; font-size: 13.5px; padding: 13px; cursor: pointer; }
.vr-reset:active { background: #FDF1F1; }

/* Admin → Reports */
.admin-reports-list { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.admin-report-row { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: start; padding: 14px; border: 1px solid #ECEAF6; border-radius: 14px; background: #fff; }
.admin-report-avatar { width: 40px; height: 40px; border-radius: 50%; background: #F4F2FF; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.admin-report-body { min-width: 0; }
.admin-report-name { margin: 0 0 6px; font-weight: 700; font-size: 15px; color: #262626; }
.admin-report-reasons { display: flex; flex-wrap: wrap; gap: 6px; }
.admin-report-reason { background: #FFE9E2; color: #c2410c; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; }
.admin-report-msgs { margin-top: 8px; }
.admin-report-msg { margin: 4px 0 0; font-size: 13px; color: #555; font-style: italic; background: #FAFAFE; border-left: 3px solid #E5E5F4; padding: 6px 10px; border-radius: 6px; }
.admin-report-meta { margin: 8px 0 0; font-size: 12px; color: #9a9a9a; }
.admin-report-count { background: #FF7152; color: #fff; font-weight: 800; font-size: 16px; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* Post-meet pick: corner report button */
.post-meet-pick { position: relative; }
.post-meet-pick-report { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border-radius: 50%; border: none; background: rgba(255,255,255,0.85); color: #b0b0b0; font-size: 13px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0.7; }
.post-meet-pick-report:hover { color: #FF7152; background: #fff; opacity: 1; }

/* Return-to-tabs bar on sub-screens (profile editor, match-detail). */
.tab-bar-return { margin-bottom: 16px; }

/* Vibe — swipe card + thumbs (no stars) */
.vibe-card-wrap { position: relative; min-height: 220px; }
.vibe-big-card { touch-action: pan-y; user-select: none; -webkit-user-select: none; position: relative; will-change: transform; }
.vibe-big-card.dragging { transition: none; }
.vibe-swipe-label { position: absolute; top: 16px; font-family: 'Bebas Neue', sans-serif; font-size: 26px; padding: 2px 12px; border-radius: 10px; opacity: 0; transition: opacity .12s; border: 3px solid; pointer-events: none; }
.vibe-swipe-yes { right: 16px; color: #2e9e63; border-color: #2e9e63; transform: rotate(12deg); }
.vibe-swipe-no { left: 16px; color: #FF7152; border-color: #FF7152; transform: rotate(-12deg); }
.vibe-big-card.show-yes .vibe-swipe-yes { opacity: 1; }
.vibe-big-card.show-no .vibe-swipe-no { opacity: 1; }
.vibe-buttons { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; }
.vibe-resp { width: 64px; height: 64px; border-radius: 50%; border: 2px solid #ECEAF6; background: #fff; font-size: 30px; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 14px rgba(18,0,154,.08); transition: transform .12s; }
.vibe-resp:active { transform: scale(.92); }
.vibe-resp-disagree.is-active { background: #FF7152; border-color: #FF7152; }
.vibe-resp-agree.is-active { background: #2e9e63; border-color: #2e9e63; }
.vibe-skip-btn { background: none; border: none; color: #9a9a9a; font: inherit; font-weight: 600; font-size: 13px; cursor: pointer; }
.vibe-hint { font-size: 12px; color: #b0b0b0; }
.match-vibe-nudge { display: block; width: 100%; margin-top: 18px; background: linear-gradient(135deg, #FFC26D 0%, #FF7152 100%); border: none; border-radius: 14px; color: #fff; font: inherit; font-weight: 700; font-size: 14px; padding: 14px; cursor: pointer; box-shadow: 0 4px 12px rgba(255,113,82,0.28); }
.match-vibe-nudge:hover { filter: brightness(1.03); }
.match-vibe-nudge:active { transform: scale(0.99); filter: brightness(0.98); }

/* ===== Admin process flow — Option B: slim timeline rail ===== */
.round-hero { padding: 13px 16px; gap: 14px; }
.round-hero-phase { font-size: 26px; margin: 2px 0; }
.round-hero-timer { font-size: 30px; }
.round-hero-archived .round-hero-timer { font-size: 22px; }
.round-hero-label, .round-hero-timer-label { font-size: 10px; letter-spacing: .08em; }
.round-hero-meta { font-size: 12px; }

.round-step {
  grid-template-columns: 24px 1fr auto;
  grid-template-areas: "marker body state" "rail input input";
  column-gap: 12px; row-gap: 4px;
  align-items: start;
  padding: 11px 0 11px 16px;
  border-bottom: none;
}
/* Left rail: a continuous bar down the far left; each step's segment is
   coloured by state (done = green, active = amber, upcoming = grey). The marker
   sits to the right of the rail, so nothing shifts and the line never jogs. */
.round-step::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #E2E0EF; }
.round-step:first-child::before { top: 6px; border-radius: 2px 2px 0 0; }
.round-step:last-child::before { bottom: 6px; border-radius: 0 0 2px 2px; }
.round-step-done::before { background: #149e60; }
.round-step-active::before { background: #FFB347; }
.round-step-marker { grid-area: marker; width: 22px; height: 22px; font-size: 11px; border-width: 2px; position: relative; z-index: 1; background: #fff; align-self: start; margin-top: 1px; box-shadow: none; }
.round-step-active .round-step-marker { box-shadow: 0 0 0 4px rgba(255,179,71,0.18); }
/* Active highlight is background-only now (no left shift), so the rail stays straight. */
.round-step-active { margin-left: 0; margin-right: 0; padding-left: 16px; padding-right: 0; }
.round-step-conn { display: none; }
.round-step-body { grid-area: body; }
.round-step-name { font-size: 15px; font-weight: 700; letter-spacing: 0; }
.round-step-sub { font-size: 11px; }
.round-step-input { grid-area: input; }
.round-step-input:empty { display: none; }
.round-step-input input, .round-step-input select { max-width: 210px; padding: 6px 8px; font-size: 13px; }
.round-step-state { grid-area: state; text-align: right; align-self: start; margin-top: 1px; }
.step-state { padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.step-state-done { background: #E8F8EF; color: #149e60; }
.step-state-upc { background: #EFEFF4; color: #9a9a9a; }
.step-state-active { background: #FFE6C7; color: #7A4706; font-size: 12px; }
.step-state-paused { background: #FFE6C7; color: #7A4706; border-radius: 999px; padding: 3px 9px; }

/* ===== Editor restructure: step Details panels + N2 pager + slim footer ===== */
/* Left rail moves onto the wrap so it stays continuous THROUGH an open Details
   panel — no gap when a step is expanded. */
.round-step::before { display: none; }
.round-step-wrap { position: relative; }
.round-step-wrap::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #E2E0EF; }
.round-step-wrap:first-child::before { top: 6px; border-radius: 2px 2px 0 0; }
.round-step-wrap:last-child::before { bottom: 6px; border-radius: 0 0 2px 2px; }
.round-step-wrap-done::before { background: #149e60; }
.round-step-wrap-active::before { background: #FFB347; }
.round-step-details { font-size: 12px; padding: 5px 11px; margin-top: 0; }
.round-step-btns { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.round-step-panel {
  margin: 4px 0 0 28px;
  padding: 12px 14px;
  background: #F7F6FD;
  border: 1px solid #E9E6F7;
  border-radius: 12px;
}
.round-step-panel[hidden] { display: none; }
.round-step-panel .rs-sec-h { margin: 0 0 8px; }
.rsp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rsp-grid input { width: 100%; padding: 8px 10px; border: 1px solid #e6e2f5; border-radius: 9px; font-size: 14px; }
/* Smart (Gemini) / Classic (word list) group-naming toggle. */
.rs-namemode { display: inline-flex; background: #f1eefd; border-radius: 10px; padding: 3px; gap: 2px; }
.rs-nm-opt { border: 0; background: none; font: 700 13px 'DM Sans', sans-serif; color: #6F5CFF; padding: 7px 13px; border-radius: 8px; cursor: pointer; }
.rs-nm-opt.is-on { background: #fff; box-shadow: 0 1px 4px rgba(18,0,154,.12); color: #12009A; }

.rs-venue-select {
  width: 100%; padding: 8px 10px; border: 1px solid #e6e2f5;
  border-radius: 9px; font-size: 14px; background: #fff;
}

/* N2 phase pager — skip the round forward/back a stage. */
.rs-pager {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 4px 0 12px; padding: 8px 10px;
  background: #fff; border: 1px solid #ECEAF6; border-radius: 12px;
}
.rs-pager-btn {
  border: 1px solid #E0DCF3; background: #F7F6FD; color: #6F5CFF;
  font: inherit; font-weight: 700; font-size: 13px; padding: 7px 12px;
  border-radius: 9px; cursor: pointer; white-space: nowrap;
}
.rs-pager-btn:disabled { opacity: .4; cursor: default; }
.rs-pager-label { display: flex; flex-direction: column; align-items: center; line-height: 1.2; text-align: center; }
.rs-pager-label strong { font-size: 14px; color: #262626; }
.rs-pager-label small { font-size: 11px; color: #8C8C95; }

/* Slim Flow footer (just the code pill now) + Create-event row. */
.round-staircase-footer-slim {
  display: flex; justify-content: center;
  grid-template-columns: none; gap: 0;
  margin-top: 14px; padding-top: 0; border-top: none;
}
.rs-create-row { display: flex; flex-direction: column; gap: 6px; align-items: stretch; margin-top: 14px; }
.rs-create-btns { display: flex; gap: 8px; align-items: stretch; }
.rs-create-btns .rs-publish-btn { flex: 1; font-weight: 700; }
.rs-create-btns .rs-cancel-btn { flex: 0 0 auto; }
.rs-create-row .hint { text-align: center; }
.rs-lockdemo-row { width: 100%; margin-top: 2px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rs-lockdemo-row input { width: 72px; padding: 7px 9px; border: 1px solid #e6e2f5; border-radius: 9px; font-size: 14px; }
.rs-lockdemo-row .hint { flex: 1; min-width: 120px; }
.rs-done-orange { background: #FF7152; color: #fff; border: 0; font-weight: 700; width: 100%; padding: 12px; font-size: 15px; border-radius: 11px; }
.rs-done-orange:hover { background: #f15a36; }

/* ===== #5 — slim admin chrome (mobile) ===== */
.admin-header-card { padding: 9px 14px; margin-bottom: 10px; }
.admin-title { font-size: 18px; }
.admin-back-btn { padding: 4px 8px; font-size: 13px; }
.admin-tabs { margin-bottom: 10px; }
.admin-section-title { font-size: 15px; }
.admin-filters { margin: 6px 0 12px; gap: 8px; }
.au-row { padding: 8px 10px; gap: 10px; }
.au-avatar { width: 36px; height: 36px; font-size: 18px; }

/* ===== #5 — slim profile chrome (mobile) ===== */
.form-card { padding: 16px 14px 20px; }
.completeness-card { padding: 13px 14px 11px; margin-bottom: 12px; }
.completeness-head { gap: 12px; margin-bottom: 10px; }
.completeness-ring { width: 58px; height: 58px; }
.completeness-title { font-size: 15px; }
.completeness-body { font-size: 12px; }

/* Home tab panels (flicker fix) */
.tab-panel { display: block; }
.tab-panel[hidden] { display: none; }

/* ===== UX pass 0.2.49 ===== */
/* Vibe: center the two thumbs, move Skip to the nav row */
.vibe-buttons { justify-content: center; gap: 56px; margin-top: 22px; }
.vibe-resp { width: 68px; height: 68px; }
.vibe-hint-center { text-align: center; margin: 14px 0 0; font-size: 12px; color: #b0b0b0; }
.vibe-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.vibe-skip-btn { background: none; border: none; color: #6F5CFF; font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; padding: 4px 2px; }

/* Inbox: unread = clean dot (single) pinned hard-right; count pill only when 2+ */
.dm-row-unread { margin-left: auto; align-self: center; }
.dm-row-unread:empty { min-width: 10px; width: 10px; height: 10px; padding: 0; }
.connect-chevron { margin-left: auto; }

/* Match: centered hero + breathing room + stacked code entry */
.start-header { text-align: center; padding: 6px 10px 0; }
.start-sub { max-width: 38ch; margin: 0 auto; }
.start-join-flow { margin-top: 24px; gap: 16px; }
.start-or-sep { display: flex; align-items: center; gap: 12px; }
.start-or-sep::before, .start-or-sep::after { content: ''; flex: 1 1 auto; height: 1px; background: #ECEAF6; }
.start-code-row { display: flex; flex-direction: column; gap: 10px; }
.start-code-row > #start-code-input { width: 100%; text-align: center; letter-spacing: 0.35em; font-size: 18px; padding: 13px 14px; border: 1.5px solid #E5E5F4; border-radius: 12px; }
.start-code-row > #start-code-submit { width: 100%; padding: 13px; }
.start-code-hint { text-align: center; font-size: 13px; color: #8C8C95; margin: 0 0 6px; }

/* Inbox unread = WhatsApp/Telegram-style count badge, right-aligned, proper mass */
.dm-row-unread { min-width: 20px; width: auto; height: 20px; padding: 0 7px; border-radius: 999px; font-size: 12px; font-weight: 800; margin-left: auto; align-self: center; box-shadow: 0 1px 3px rgba(255,113,82,0.4); }
.dm-row-unread:empty { display: none; }

/* ---- User-facing process timeline (P2) — Match tab, enrolled members ---- */
.mm-timeline { margin-top: 14px; }
.mm-timeline-label {
  margin: 0 0 8px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: #8a86a0;
}
.mm-tl-list { list-style: none; margin: 0; padding: 0; }
.mm-tl-step { position: relative; display: flex; align-items: center; gap: 12px; padding: 9px 0; }
.mm-tl-step::before {
  content: ''; position: absolute; left: 12px; top: 0; bottom: 0; width: 2px; background: #E6E3F2;
}
.mm-tl-step:first-child::before { top: 50%; }
.mm-tl-step:last-child::before { bottom: 50%; }
.mm-tl-dot {
  position: relative; z-index: 1; flex-shrink: 0;
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff; border: 2px solid #D9D6EA; color: #9a96ad;
  font-size: 11px; font-weight: 700; font-family: var(--font-display, inherit);
}
.mm-tl-done .mm-tl-dot { background: #E8F8EF; border-color: #1F8A50; color: #1F8A50; }
.mm-tl-active .mm-tl-dot {
  background: var(--color-accent, #6F5CFF); border-color: var(--color-accent, #6F5CFF); color: #fff;
  box-shadow: 0 0 0 4px rgba(111,92,255,0.16);
}
.mm-tl-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: #6b6680; overflow-wrap: anywhere; }
.mm-tl-active .mm-tl-name { color: #262626; font-weight: 700; }
.mm-tl-done .mm-tl-name { color: #8a86a0; }
.mm-tl-when { flex-shrink: 0; margin-left: auto; padding-left: 10px; font-size: 11.5px; color: #9a96ad; }
.mm-tl-now {
  flex-shrink: 0; background: var(--color-accent, #6F5CFF); color: #fff;
  font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; letter-spacing: 0.02em;
}

/* Peer-rated traits — read-only weighted cloud (variation A). Chip size/weight
   set inline per trait by trait-display.js; these are the static layout rules. */
.trait-cloud-section { margin: var(--space-3) 0; }
.trait-cloud-framing {
  font-size: 12.5px;
  color: var(--color-text-secondary);
  margin: 0 0 8px;
  font-weight: 500;
}
.trait-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.trait-cloud-chip {
  border-radius: 999px;
  padding: 6px 12px;
  color: #4b3fb0;
  border: 1px solid;
  white-space: nowrap;
  line-height: 1.1;
}
/* Own-profile traits block (read-only + Reset). */
.my-traits-card .trait-cloud-framing { color: var(--color-text-secondary); }
.my-traits-empty { font-size: 13px; color: var(--color-text-secondary); margin: 4px 0 0; }
.my-traits-reset {
  margin-top: 12px;
  background: none;
  border: 0;
  color: var(--color-accent);
  font-weight: 700;
  font-size: 12.5px;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}

/* "See all traits" expander on the meet feedback picker. */
.trait-seeall {
  margin-top: 10px;
  background: none;
  border: 0;
  color: var(--color-accent);
  font-weight: 700;
  font-size: 12.5px;
  cursor: pointer;
  padding: 0;
}
.trait-seeall:hover { text-decoration: underline; }

/* ===== End-of-round flow: circle-grid pick + "how was the meet" feedback ===== */
.post-meet-footer-single { display: block; }
.pm-circle-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px 8px;
  margin: var(--space-4) 0;
}
.pm-circle {
  background: none; border: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 0;
}
/* Wrapper does NOT clip, so the check can sit OUTSIDE the round avatar. */
.pm-circle-avwrap { position: relative; display: inline-flex; }
.pm-circle-av { position: relative; }
.pm-circle-check {
  position: absolute; top: -4px; right: -4px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--color-success, #149e60); color: #fff;
  display: none; align-items: center; justify-content: center;
  font-size: 12px; border: 2px solid var(--color-background-primary, #fff);
  z-index: 2;
}
.pm-circle.is-picked .pm-circle-av .avatar,
.pm-circle.is-picked .pm-circle-av { box-shadow: 0 0 0 3px var(--color-accent); border-radius: 50%; }
.pm-circle.is-picked .pm-circle-check { display: flex; }
.pm-circle-name { font-weight: 700; font-size: 12.5px; color: var(--color-text-primary); }
.pm-circle.is-picked .pm-circle-name { color: var(--color-accent-hot); }
.pm-circle-report { font-size: 12px; color: var(--color-text-tertiary); }

.pm-stars { display: flex; gap: 6px; justify-content: center; margin: var(--space-3) 0 var(--space-4); }
.pm-star { background: none; border: 0; cursor: pointer; font-size: 34px; line-height: 1; color: #d9d4ea; padding: 0; }
.pm-star.on { color: #FFB020; }

.pm-fb-label { font-size: 13px; font-weight: 700; margin: var(--space-3) 0 8px; }
.pm-fb-label.pm-fb-good { color: #14794a; }
.pm-fb-label.pm-fb-off { color: #b5482b; }
.pm-fb-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pm-fb-chip {
  border-radius: 999px; padding: 7px 13px; font-weight: 600; font-size: 13px;
  background: var(--color-background-primary, #fff); color: var(--color-text-secondary);
  border: 1.5px solid var(--color-border-tertiary, #e6e2f2); cursor: pointer;
}
.pm-fb-chip.like.sel { background: #E3F6EC; color: #14794a; border-color: #bfe8d0; }
.pm-fb-chip.dis.sel { background: #FFE9E0; color: #c0492b; border-color: #ffd2c2; }
.pm-fb-text {
  width: 100%; margin-top: 10px; border-radius: var(--border-radius-md, 8px);
  border: 1px solid var(--color-border-tertiary, #e0dcf0); padding: 9px 11px;
  font: inherit; font-size: 13px; resize: vertical; background: var(--color-background-primary, #fff);
}

/* ===== Connect tab — layout D (zones, needs-you cards, pending) ===== */
.connect-zone { margin-bottom: var(--space-5); }
.connect-zone-title {
  font-size: 13px; font-weight: 800; letter-spacing: .02em;
  color: var(--color-text-secondary); margin: 0 0 10px; text-transform: none;
}
.connect-zone-empty { font-size: 13px; color: var(--color-text-secondary); padding: 4px 2px; }
.connect-zone-n {
  display: inline-block; min-width: 18px; text-align: center; vertical-align: middle;
  background: #FFE8D6; color: #C2410C; font-size: 11px; font-weight: 800;
  border-radius: 999px; padding: 1px 7px; margin-left: 4px;
}
.connect-zone-support { margin-top: 2px; padding-top: 16px; border-top: 1px dashed #E6E2F5; }
.connect-team-av {
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; background: #EEEBFF;
}
.needs-card { align-items: flex-start; }
.needs-card-dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--color-orange, #FF9F4D);
  margin: 7px 12px 0 2px; flex-shrink: 0; align-self: flex-start;
}
.needs-card-status { font-size: 12.5px; font-weight: 700; color: var(--color-orange-hot, #FF7152); margin-top: 3px; }
.connect-pending { opacity: .62; }
.connect-pending .connect-avatar { filter: grayscale(0.5); }
.connect-pending-tag {
  font-size: 11px; font-weight: 700; color: var(--color-text-tertiary);
  border: 1px solid var(--color-border-tertiary, #e6e2f2); border-radius: 999px;
  padding: 3px 9px; white-space: nowrap;
}

/* ===== Meet venue: interactive pin map (variation 1) ===== */
.meet-venue-map {
  width: 100%;
  height: 180px;
  border-radius: var(--border-radius-md, 12px) var(--border-radius-md, 12px) 0 0;
  overflow: hidden;
  margin: calc(-1 * var(--space-3, 14px)) calc(-1 * var(--space-3, 14px)) var(--space-3, 14px);
  width: calc(100% + 2 * var(--space-3, 14px));
  z-index: 0;
}
.meet-venue-map .leaflet-control-attribution {
  font-size: 9px; background: rgba(255,255,255,.7);
}
.meet-venue-card { overflow: hidden; }

/* Group identity blurb under the group name on the Meet header. */
.meet-group-desc {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--color-text-secondary);
  margin: 10px 0 0;
  max-width: 52ch;
}

/* ==========================================================================
   EVENTS — member-facing cards (Match top + Meet between-rounds)
   ========================================================================== */
.events-section { margin: 4px 0 18px; }
.events-section--meet { margin-top: 0; }
.events-head { margin-bottom: 10px; }
.events-head .section-hint,
.events-section .section-hint {
  margin: 2px 0 0; font-size: 13px; color: var(--color-text-secondary);
}
.events-list { display: flex; flex-direction: column; gap: 12px; }

.event-card {
  position: relative;
  background: #fff;
  border: 1px solid #ECE8F8;
  border-radius: 16px;
  padding: 14px 14px 12px;
  box-shadow: 0 2px 10px rgba(18,0,154,0.04);
}
.event-card.is-going {
  border-color: #C5BDFF;
  background: linear-gradient(180deg, #FBFAFF 0%, #FFFFFF 60%);
}

/* Card E1: left colour strip (icon + date) + body with a dot stepper. */
.event-card--strip { display: flex; padding: 0; overflow: hidden; }
.event-card--strip.is-going { background: #fff; }
.event-strip {
  flex: 0 0 78px; background: linear-gradient(160deg, #6F5CFF, #4a35d6); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 14px 6px;
}
.event-strip-ic { margin-bottom: 6px; line-height: 0; }
.event-strip-ic .femoji { filter: drop-shadow(0 1px 2px rgba(0,0,0,.22)); }
.event-strip-wd { font-weight: 800; font-size: 12px; opacity: .95; }
.event-strip-dy { font-size: 24px; font-weight: 800; line-height: 1; }
.event-strip-mo { font-size: 10px; opacity: .85; }
.event-strip-tm { font-size: 12px; font-weight: 800; opacity: .95; margin-top: 5px; letter-spacing: .02em; }
.event-body { flex: 1; min-width: 0; padding: 14px 15px; }
.event-card--strip .event-name { padding-right: 56px; }

.event-dsteps { display: flex; align-items: flex-start; margin: 12px 0 10px; }
.event-dsteps .dstep { display: flex; flex-direction: column; align-items: center; gap: 5px; flex: 0 0 auto; width: 42px; }
.event-dsteps .ddot {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12px; font-weight: 800; background: #fff; border: 2px solid #ddd6f3; color: transparent;
}
.event-dsteps .dlbl { font-size: 10px; font-weight: 700; color: #b7afd9; }
.event-dsteps .dseg { flex: 1; height: 2px; margin-top: 11px; background: #ece8f6; border-radius: 2px; }
.event-dsteps .dseg.dn { background: #6F5CFF; }
.event-dsteps .done .ddot { background: #6F5CFF; border-color: #6F5CFF; color: #fff; }
.event-dsteps .done .dlbl { color: #9b93c9; }
.event-dsteps .now .ddot { background: #6F5CFF; border-color: #6F5CFF; box-shadow: 0 0 0 4px rgba(111,92,255,.18); }
.event-dsteps .now .dlbl { color: #6F5CFF; }
.event-going-badge {
  position: absolute; top: 12px; right: 12px;
  background: #1f9d55; color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  padding: 3px 9px; border-radius: 999px;
}

.event-card-top { display: flex; gap: 12px; align-items: center; }
/* Keep the title clear of the "Going" badge in the top-right corner. */
.event-card.is-going .event-head { padding-right: 64px; }
.event-ic {
  flex: 0 0 auto;
  width: 48px; height: 48px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
  background: #F1EEFD;
}
.femoji { vertical-align: middle; display: inline-block; }
.event-ic .femoji { display: block; }
.event-head { min-width: 0; }
.event-name {
  margin: 0; font-size: 17px; font-weight: 700; color: #262626;
  overflow-wrap: anywhere;
}
.event-meta { display: flex; align-items: center; gap: 8px; margin-top: 3px; flex-wrap: wrap; }
.event-type-chip {
  font-size: 12px; font-weight: 600; color: #6F5CFF;
  background: rgba(111,92,255,0.10); padding: 2px 8px; border-radius: 999px;
}
.event-count { font-size: 12.5px; color: var(--color-text-secondary); }

.event-when { margin: 10px 0 8px; font-size: 13px; color: var(--color-text-secondary); }

.event-steps { display: flex; align-items: center; gap: 0; margin: 8px 0 12px; }
.event-step {
  font-size: 11px; font-weight: 600; color: #B7AEDB;
  white-space: nowrap;
}
.event-step.is-done { color: #9C93C9; }
.event-step.is-now {
  color: #fff; background: #6F5CFF;
  padding: 2px 9px; border-radius: 999px;
}
.event-step-sep {
  flex: 1; height: 2px; min-width: 8px; margin: 0 6px;
  background: #ECE8F8; border-radius: 2px;
}

.event-card-foot {
  display: flex; flex-direction: column; align-items: stretch; gap: 10px;
}
.event-loc { font-size: 13px; color: #262626; overflow-wrap: anywhere; }
.event-loc-open { color: #6F5CFF; font-weight: 600; text-decoration: none; }
.event-loc-locked { color: #9C93C9; font-style: italic; }
.event-closed { font-size: 12.5px; color: #9C93C9; text-align: center; padding: 6px 0; }
.event-action { margin-left: auto; }
.event-action-full .btn { width: 100%; }
.event-action-full .event-signed { display: inline-block; }

/* Stat box (card V2): sign-ups-close / going, with a capacity bar below. */
.event-stat {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: #F7F5FF; border-radius: 12px; padding: 10px 14px; margin: 12px 0 8px;
}
.event-stat-cell { min-width: 0; }
.event-stat-right { text-align: right; }
.event-stat-lbl {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em;
  color: #8a86a0; font-weight: 700; margin-bottom: 2px;
}
.event-stat-val { font-size: 18px; font-weight: 800; color: #262626; font-variant-numeric: tabular-nums; }
.event-stat-val .event-cd { font-size: 18px; }
.event-stat-sub { color: #B7AEDB; font-weight: 700; }
.event-cap {
  height: 7px; border-radius: 999px; background: #ECE8F8; overflow: hidden; margin: 0 0 4px;
}
.event-cap > i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #6F5CFF, #C5BDFF);
  transition: width .4s ease;
}
.event-cap.is-full > i { background: linear-gradient(90deg, #1f9d55, #46c47e); }

/* Ticketed expand: revealed only after Sign up is pressed. */
.event-buy { border-top: 1px dashed #E6E2F5; margin-top: 4px; padding-top: 12px; }
.event-buy-btn { width: 100%; margin-bottom: 8px; }
.event-or { font-size: 11.5px; color: #8a86a0; text-align: center; margin: 6px 0 8px; }
.event-code-row { display: flex; gap: 8px; }
.event-code-in {
  flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid #D8D2EC;
  border-radius: 10px; font-size: 15px; letter-spacing: .04em; text-transform: uppercase;
}
.event-code-in::placeholder { text-transform: none; letter-spacing: normal; }
.event-code-go { white-space: nowrap; }
.event-code-err { margin: 8px 0 0; font-size: 12.5px; color: #FF7152; }

/* Admin-only controls on the member event card (pause / next cycle). */
.event-admin {
  display: flex; flex-direction: column; gap: 7px;
  margin-top: 10px; padding-top: 10px; border-top: 1px dashed #E6E2F5;
}
.event-admin-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
/* The live phase controls stay on one line, equal width. */
.event-admin-live { flex-wrap: nowrap; }
.event-admin-live .event-admin-btn { flex: 1; padding: 5px 4px; font-size: 11.5px; text-align: center; white-space: nowrap; }
.event-admin-tag {
  font-size: 9.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: #6F5CFF; background: rgba(111,92,255,.10); padding: 3px 8px; border-radius: 6px;
}
.event-admin-btn {
  border: 1px solid #E3DEF5; background: #fff; color: #4a4458;
  font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 8px; cursor: pointer;
}
.event-admin-btn:hover { background: #F4F1FD; }
.event-admin-cancel { color: #C2410C; border-color: #FFD9C2; }
.event-admin-cancel:hover { background: #FFF1E9; }

/* Ticketing */
.event-ticket-chip {
  font-size: 11.5px; font-weight: 600; color: #C2691A;
  background: rgba(255,194,109,0.22); padding: 2px 8px; border-radius: 999px;
}
.event-ticket-need { font-size: 12.5px; font-weight: 600; color: #C2691A; }
.event-free-chip {
  font-size: 11.5px; font-weight: 700; color: #1f7a4d;
  background: rgba(31,157,85,0.14); padding: 2px 8px; border-radius: 999px;
}

/* Left strip colour states: green = signed up, orange = too late, purple = open. */
.event-card--rib-joined .event-strip { background: linear-gradient(160deg, #2bb673, #128a52); }
.event-card--rib-late   .event-strip { background: linear-gradient(160deg, #FFC26D, #FF7152); }

/* Member card: soft top header band (replaces the left strip). The title +
   date live in the band; the band's top corners curve into the card. */
.event-card--band { display: block; padding: 0; overflow: hidden; border-radius: 18px; }
.event-card--band.is-going { background: #fff; border-color: #C5BDFF; }
.event-band { display: flex; align-items: center; gap: 13px; padding: 13px 16px; color: #fff; }
.event-band-ic {
  width: 46px; height: 46px; border-radius: 13px; flex: 0 0 auto; line-height: 0;
  background: rgba(255,255,255,.18); display: grid; place-items: center;
}
.event-band-ic .femoji { filter: drop-shadow(0 1px 2px rgba(0,0,0,.22)); }
.event-band-txt { min-width: 0; }
.event-band-name {
  margin: 0; font: 800 19px 'Plus Jakarta Sans', 'DM Sans', sans-serif;
  line-height: 1.08; color: #fff; overflow-wrap: anywhere;
}
.event-band-date { font-size: 12.5px; opacity: .95; margin-top: 3px; font-weight: 600; }
.event-card--bandrib-open   .event-band { background: linear-gradient(135deg, #6F5CFF, #4a35d6); }
.event-card--bandrib-joined .event-band { background: linear-gradient(135deg, #2bb673, #128a52); }
.event-card--bandrib-late   .event-band { background: linear-gradient(135deg, #FFB153, #FF7152); }
/* Admin board: the band carries a status badge top-right, so keep the title clear of it. */
.event-card--admin .event-band { padding-right: 96px; }
.event-card--admin .event-going-badge { top: 14px; right: 14px; }
/* Read-only derived meeting length shown in the Flow Meeting step. */
.rs-step-derived { font-weight: 800; color: #6F5CFF; font-size: 14px; padding: 6px 2px; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* 6-box code entry (OTP-style) — makes the 6-character code obvious. */
.code6 { display: flex; gap: 7px; justify-content: center; flex-wrap: nowrap; }
.event-code6 { margin: 2px 0 10px; }
.code6-box {
  width: 100%; max-width: 44px; height: 48px; min-width: 0;
  text-align: center; font-size: 20px; font-weight: 700; color: #262626;
  border: 1.5px solid #E1DCF3; border-radius: 10px; background: #fff;
  text-transform: uppercase; padding: 0; caret-color: #6F5CFF;
}
.code6-box:focus { outline: none; border-color: #6F5CFF; box-shadow: 0 0 0 3px rgba(111,92,255,0.16); }
.event-buy .event-code-go { width: 100%; margin-top: 2px; }

/* Always-on corner timer (T2), coloured to match the left strip state. */
.event-timer-pill {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  font-size: 13px; font-weight: 800; color: #fff; padding: 5px 11px;
  border-radius: 999px; font-variant-numeric: tabular-nums;
  display: inline-flex; align-items: center; gap: 4px;
  box-shadow: 0 2px 8px rgba(18,0,154,.14);
}
.event-timer-open   { background: linear-gradient(160deg, #6F5CFF, #4a35d6); }
.event-timer-joined { background: linear-gradient(160deg, #2bb673, #128a52); }
.event-timer-late   { background: linear-gradient(160deg, #FFC26D, #FF7152); }
/* Demo tag on demo (test_mode) events. */
.event-demo-chip {
  font-size: 11px; font-weight: 800; color: #5a45e0; background: #ECE8FB;
  padding: 2px 8px; border-radius: 999px; letter-spacing: .02em;
}
/* Signed-up / closed status, shown in the pill row to save space. */
.event-mchip { font-size: 11px; font-weight: 800; padding: 2px 9px; border-radius: 999px; }
.event-mchip-on  { color: #1f7a4d; background: rgba(31,157,85,0.16); }
.event-mchip-off { color: #C2410C; background: #FFE8D6; }
/* The status-box countdown is the big purple number (the always-on timer). */
.event-stat-val .event-cd-big { color: #6F5CFF; }
/* Matching phase (sign-ups closed, before the meet): groups are forming. */
.event-stat-val .event-matching-note { color: #6F5CFF; font-weight: 700; font-size: 15px; line-height: 1.2; }

/* "Your group is set" badge + description moved into the Location panel. */
.meet-group-set { display: inline-block; margin: 0 0 10px; }
.meet-subpanel .meet-group-desc { margin: 0 0 12px; }

.events-head-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.events-ticket-toggle {
  border: 1px solid #ECE8F8; background: #fff; color: #6F5CFF;
  font-size: 12.5px; font-weight: 600; padding: 6px 11px; border-radius: 999px;
  cursor: pointer; white-space: nowrap;
}
.events-ticket-toggle:hover { background: #F7F5FF; }
.events-ticket-form { margin-top: 10px; }
.events-ticket-row { display: flex; gap: 8px; }
.events-ticket-row input {
  flex: 1; min-width: 0; padding: 9px 12px; border: 1px solid #D8D2EC;
  border-radius: 10px; font-size: 15px; letter-spacing: .04em; text-transform: uppercase;
}
.events-ticket-row input::placeholder { text-transform: none; letter-spacing: normal; }
.events-ticket-hint { margin: 0 0 8px; font-size: 12.5px; color: var(--color-text-secondary); }
.events-ticket-error { margin: 6px 0 0; font-size: 12.5px; color: #FF7152; }

/* Card countdown + signed-up state */
.event-cd { font-weight: 700; color: #6F5CFF; font-variant-numeric: tabular-nums; }
.event-signed {
  font-size: 12.5px; font-weight: 700; color: #1f9d55;
  background: #e6f7ef; padding: 4px 11px; border-radius: 999px;
}
/* Same shape as Signed up, but orange with an ✗ — sign-ups have closed. */
.event-late {
  display: inline-block; font-size: 12.5px; font-weight: 700; color: #C2410C;
  background: #FFE8D6; padding: 4px 11px; border-radius: 999px;
}
.event-leave {
  border: none; background: none; cursor: pointer;
  font-size: 12px; color: #9C93C9; margin-left: 8px; text-decoration: underline;
}

/* Shared short description line (member card + admin events board). */
.event-desc {
  margin: 8px 0 2px; font-size: 13px; line-height: 1.5; color: #5a566e;
  overflow-wrap: anywhere;
}

/* Admin "All events" board — the member card reused with admin actions. */
.aev-cards { display: flex; flex-direction: column; gap: 12px; }
/* Status filter + Upcoming/Archive sections on the admin events board. */
.aev-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.aev-filter-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #ECE8F8; background: #FAF9FF; color: #5a566e; font-size: 12.5px; font-weight: 700; padding: 5px 10px; border-radius: 9px; cursor: pointer; }
.aev-filter-chip.is-on { background: #6F5CFF; border-color: #6F5CFF; color: #fff; }
.aev-filter-n { background: rgba(0,0,0,.08); border-radius: 999px; padding: 0 6px; font-size: 10px; font-weight: 800; }
.aev-filter-chip.is-on .aev-filter-n { background: rgba(255,255,255,.25); }
.aev-section-head { font: 800 14px 'Plus Jakarta Sans', 'DM Sans', sans-serif; color: #12009A; display: flex; align-items: center; gap: 8px; margin: 18px 0 10px; }
.aev-section-head .aev-count { font: 700 11px 'DM Sans', sans-serif; background: #ECE8FB; color: #6F5CFF; border-radius: 999px; padding: 2px 8px; }
.aev-arch-head { color: #8a86a0; margin-top: 24px; border-top: 1px dashed #E6E2F5; padding-top: 16px; }
.aev-arch-head .aev-count { background: #eee; color: #8a86a0; }
.aev-empty { padding: 8px 2px; }
/* Admin board: same E1 card body as Match; footer holds the admin actions. */
.event-card--admin .event-card-foot { flex-direction: row; justify-content: flex-end; flex-wrap: wrap; }
.aev-acts { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; width: 100%; }
.aev-acts .act {
  border: 1px solid #E3DEF5; background: #fff; color: #4a4458;
  font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 9px; cursor: pointer;
}
.aev-acts .act:hover { background: #F4F1FD; }
.aev-acts .act-edit { color: #fff; background: #6F5CFF; border-color: #6F5CFF; }
.aev-acts .act-edit:hover { background: #5a45e0; }
.aev-acts .act.danger { color: #c0392b; border-color: #f1c9c2; }
.aev-acts .act.danger:hover { background: #fdecea; }
/* Status badges reuse the going-badge slot, recoloured per state. */
.ev-badge-live   { background: #1f9d55; }
.ev-badge-done   { background: #8a86a0; }
.ev-badge-cancel { background: #c0392b; }
.ev-badge-draft  { background: #6F5CFF; }
.ev-badge-paused { background: #C2691A; }

/* All-events pagination: Show more (10 → 25) then numbered pages. */
.aev-more {
  display: block; width: 100%; margin-top: 12px;
  border: 1px solid #E3DEF5; background: #fff; color: #6F5CFF;
  font-size: 13.5px; font-weight: 700; padding: 11px; border-radius: 12px; cursor: pointer;
}
.aev-more:hover { background: #F4F1FD; }
.aev-pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.aev-pager .act {
  border: 1px solid #E3DEF5; background: #fff; color: #4a4458;
  font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 10px; cursor: pointer;
}
.aev-pager .act:disabled { opacity: .4; cursor: default; }
.aev-pageinfo { font-size: 12.5px; color: #8a86a0; font-weight: 600; text-align: center; }

/* Contact-method icons (post-connection on others; own on your profile) */
.contact-icons { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
/* C3: white circle, the channel's logo + a matching ring, both in brand colour. */
.contact-icon {
  width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 2px solid currentColor; text-decoration: none; flex: 0 0 auto;
}
.contact-icon svg { width: 18px; height: 18px; }
.contact-icons.is-small .contact-icon { width: 31px; height: 31px; }
.contact-icons.is-small .contact-icon svg { width: 15px; height: 15px; }
.contact-icon.ci-ig { color: #E1306C; }
.contact-icon.ci-tt { color: #010101; }
.contact-icon.ci-wa { color: #25D366; }
.contact-icon.ci-li { color: #0A66C2; }
.contact-icon.ci-em { color: #6F5CFF; }
.md-contacts { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.md-contacts-label, .profile-contacts-label {
  font-size: 12.5px; font-weight: 600; color: var(--color-text-secondary);
}
.connect-contacts { padding: 6px 12px 2px 64px; }
.profile-contacts {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 14px; padding: 10px 14px; background: #fff;
  border: 1px solid #ECE8F8; border-radius: 14px;
}

/* Profile identity header (avatar + name + @username + contacts) */
.profile-id-card { display: flex; align-items: center; gap: 14px; padding: 16px; margin-bottom: 14px; }
.pid-av { width: 60px; height: 60px; flex: 0 0 auto; }
.pid-main { flex: 1; min-width: 0; }
.pid-name-row { display: flex; align-items: center; gap: 8px; }
.pid-name { font: 800 20px 'Plus Jakarta Sans', sans-serif; color: #262626; letter-spacing: -.01em; }
.pid-edit {
  width: 28px; height: 28px; border-radius: 8px; border: 0; background: #f2f0fa; color: #6F5CFF;
  font-size: 14px; cursor: pointer; display: inline-grid; place-items: center; flex: 0 0 auto;
}
.pid-edit:hover { background: #e7e3fb; }
.pid-sub { font-size: 13px; color: var(--color-text-secondary); margin-top: 2px; }
.pid-contacts { margin-top: 10px; }
.pid-name-input { flex: 1; min-width: 0; padding: 7px 11px; border: 1px solid #d8d2ec; border-radius: 9px; font: 700 17px 'Plus Jakarta Sans', sans-serif; }
/* P2: name + edit live inside the photo section; smaller there than a hero. */
.avatar-section-actions .pid-name { font-size: 18px; }
.avatar-section-actions .pid-name-row { margin-bottom: 1px; }
/* P2 "Where to find me" socials footer */
.profile-socials { margin: 6px 0 0; padding-top: 12px; border-top: 1px solid #efedf6; }
.profile-socials-h { font: 700 11px 'DM Sans', sans-serif; text-transform: uppercase; letter-spacing: .05em; color: #8a86a0; margin: 0 0 8px; }
.profile-socials-row { margin-bottom: 10px; }

/* Map location needle (Meet venue map) */
.venue-needle { background: transparent; border: 0; }
.venue-needle svg { display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); }

/* Admin user search */
.admin-user-search {
  width: 100%; margin: 4px 0 10px; padding: 10px 12px;
  border: 1px solid #e6e2f5; border-radius: 10px; font-size: 14px;
}
.admin-user-search:focus { outline: none; border-color: #6F5CFF; }
.admin-team-restricted {
  font-size: 10px; font-weight: 800; color: #b5302f; background: #fdeeee;
  padding: 1px 6px; border-radius: 999px; margin-left: 6px; white-space: nowrap;
}
.admin-events-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.admin-events-head .admin-section-title { margin: 0; }
.admin-create-event-top { width: 100%; padding: 14px; font-size: 15.5px; font-weight: 700; margin-bottom: 14px; border-radius: 14px; }
.admin-round-editor { border: 2px solid #d9d2ff; }

/* Event editor: tabs + sections */
.rs-tabs { display: flex; gap: 6px; background: #f3f1fa; border-radius: 11px; padding: 4px; margin: 12px 0 14px; }
.rs-tab { flex: 1; border: 0; background: none; padding: 9px; border-radius: 8px; font: 700 13px 'DM Sans', sans-serif; color: #8a86a0; cursor: pointer; }
.rs-tab.active { background: #fff; color: #6F5CFF; box-shadow: 0 1px 4px rgba(18,0,154,.08); }
.round-event-open { border: 1px solid #efedf6; border-radius: 13px; padding: 13px; margin-bottom: 12px; }
.rs-sec-h { font: 800 14px 'Plus Jakarta Sans', sans-serif; color: #6F5CFF; margin: 0 0 4px; }
.rs-icon-select { width: 100%; padding: 7px; font-size: 20px; text-align: center; border: 1px solid #e6e2f5; border-radius: 9px; background: #fff; }
.rs-spots-filled { font-size: 12.5px; font-weight: 600; color: #6F5CFF; white-space: nowrap; }
.rs-master { margin: 8px 0; }
.rs-master-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #f1eefd; border: 1px dashed #c9bcff; border-radius: 10px; padding: 9px 12px; }
.rs-master-row span { font-size: 12.5px; font-weight: 700; color: #5036d6; }
.rs-master-row small { font-weight: 500; color: #8a86a0; }
.rs-master-row code { font-size: 15px; font-weight: 800; letter-spacing: .08em; color: #262626; }
.rs-flow-toggles { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 12px; padding: 11px; background: #faf9fd; border-radius: 11px; }
.rs-flow-toggles small { display: block; font-weight: 500; color: #8a86a0; font-size: 11px; }

/* Flow controls: pause / restart / cancel + demo / auto, grouped on top. */
.rs-controls {
  margin-bottom: 14px; padding: 12px; border: 1px solid #ECE8F8; border-radius: 13px;
  background: #faf9fd; display: flex; flex-direction: column; gap: 11px;
}
.rs-controls-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.rs-controls-row .btn { flex: 1 1 auto; }
.rs-controls-toggles { display: flex; gap: 18px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid #ECE8F8; }
.rs-controls-toggles small { display: block; font-weight: 500; color: #8a86a0; font-size: 11px; }

/* Walking points W3: chips + add dropdown */
.rs-walk-chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 6px 0 8px; }
.rs-walk-chip { display: inline-flex; align-items: center; gap: 6px; background: #f1eefd; color: #5a45e0; border-radius: 999px; padding: 5px 8px 5px 12px; font-weight: 600; font-size: 12.5px; }
.rs-walk-x { border: 0; background: none; color: #9b93c9; cursor: pointer; font-size: 12px; padding: 0 2px; line-height: 1; }
.rs-walk-x:hover { color: #c0392b; }
.rs-walk-add { width: 100%; max-width: 360px; padding: 9px 11px; border: 1px solid #e6e2f5; border-radius: 9px; font-size: 13.5px; background: #fff; }

/* Agenda A4 cards: icon · editable label (ellipsis) · aligned minutes column */
.rs-agenda { margin-top: 12px; }
.rs-ag-card { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.rs-ag-icon { flex: 0 0 auto; padding: 8px 4px; border: 1px solid #e6e2f5; border-radius: 9px; font-size: 16px; background: #fff; }
.rs-ag-label { flex: 1 1 auto; min-width: 0; padding: 9px 11px; border: 1px solid #e6e2f5; border-radius: 9px; font-size: 14px; text-overflow: ellipsis; }
.rs-ag-minwrap { flex: 0 0 100px; display: flex; align-items: center; gap: 5px; justify-content: flex-end; }
.rs-ag-mins { width: 62px; padding: 9px 6px; border: 1px solid #e6e2f5; border-radius: 9px; font-size: 14px; text-align: center; }
.rs-ag-minwrap small { color: #8a86a0; font-size: 12px; }
.rs-apply-row { margin-top: 14px; padding-top: 12px; border-top: 1px solid #efedf6; text-align: center; }
.rs-flow-status { font-size: 12.5px; color: #8a86a0; font-weight: 600; }
.rs-done-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid #efedf6; }
.rs-done-btn { color: #c0392b; border-color: #f1c9c2; }
.rs-done-btn:hover { background: #fdecea; }
.admin-map-legend {
  background: rgba(255,255,255,.92); border-radius: 9px; padding: 6px 9px;
  font-size: 11.5px; font-weight: 600; color: #262626; display: flex; flex-direction: column; gap: 3px;
  box-shadow: 0 1px 5px rgba(0,0,0,.15);
}
.admin-map-legend span { display: flex; align-items: center; gap: 6px; }
.admin-map-legend i { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.admin-map-chips { display: flex; gap: 5px; }
.admin-map-chips button {
  border: 0; background: #fff; color: #6F5CFF; font-size: 11.5px; font-weight: 600;
  padding: 5px 11px; border-radius: 999px; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.15);
}
.admin-map-chips button.on { background: #6F5CFF; color: #fff; }

/* Admin ticket panel */
.round-ticket-need { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 13.5px; }
.round-ticket-summary { margin: 10px 0 6px; font-size: 12.5px; font-weight: 600; color: #6F5CFF; }
.round-ticket-list { margin-top: 4px; max-height: 220px; overflow-y: auto; }
.round-ticket-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 5px 8px; border-radius: 8px; font-size: 12.5px;
}
.round-ticket-row:nth-child(odd) { background: #F7F5FF; }
.round-ticket-row code { font-size: 14px; font-weight: 700; letter-spacing: .06em; color: #262626; }
.round-ticket-row span { color: #8a87a0; }
.round-ticket-row.is-redeemed code { color: #9C93C9; text-decoration: line-through; }
.round-ticket-row.is-redeemed span { color: #0e7a49; }
.round-ticket-signups { margin: 4px 0 10px; }
.round-signup-names { display: flex; flex-wrap: wrap; gap: 5px; }
.round-signup-names span {
  font-size: 12px; color: #6F5CFF; background: #f2f0fa;
  padding: 2px 8px; border-radius: 999px;
}