/* ================================================================
   kontaqo — App Design System
   Verbindungen schaffen Zukunft.
   Font: Poppins (Google Fonts — SIL Open Font License)
   Colors: #2563EB primary · #06B6D4 secondary · #0F172A dark
   ================================================================ */

/* ── 1. Design Tokens ────────────────────────────────────────── */
:root {
  --bg:           #e7eef9;
  --surface:      rgba(255, 255, 255, 0.9);
  --ink:          #0f172a;
  --ink-2:        #334155;
  --muted:        #64748b;
  --muted-2:      #94a3b8;
  --line:         rgba(148, 163, 184, 0.09);
  --line-light:   rgba(148, 163, 184, 0.05);
  --accent:       #2563EB;
  --accent-dk:    #1D4ED8;
  --accent-lt:    #93C5FD;
  --accent-faint: #EFF6FF;
  --focus:        #2563EB;
  --ok:           #16a34a;
  --danger:       #dc2626;
  --danger-lt:    #fee2e2;

  --sh1: 0 1px 2px rgba(15,23,42,.06);
  --sh2: 0 10px 28px rgba(15,23,42,.1);
  --sh3: 0 8px 20px rgba(37,99,235,.18);
  --sh4: 0 20px 52px rgba(2,6,23,.16);

  --r: 16px;
  --r-sm: 7px;

  /* Organisation entry card backgrounds */
  --org-entry-bg-top: rgba(0, 0, 0, 0.02);
  --org-entry-bg-bottom: rgba(0, 0, 0, 0.01);
  --org-entry-sub-bg-top: rgba(0, 0, 0, 0.01);
  --org-entry-sub-bg-bottom: rgba(0, 0, 0, 0.005);

  /* Cluster accent palette */
  --ca-private:    #f59e0b;
  --ca-private-lt: #fef3c7;
  --ca-private-bg: #fffbeb;
  --ca-business:   #3b82f6;
  --ca-business-lt:#dbeafe;
  --ca-business-bg:#eff6ff;
  --ca-hobby:      #8b5cf6;
  --ca-hobby-lt:   #ede9fe;
  --ca-hobby-bg:   #f5f3ff;
}

*, *::before, *::after { box-sizing: border-box; }

/* ── Dark theme ──────────────────────────────────────────────── */
[data-theme="dark"] {
  --bg:           #0f172a;
  --surface:      rgba(15, 23, 42, 0.86);
  --ink:          #f1f5f9;
  --ink-2:        rgba(203, 213, 225, 0.85);
  --muted:        #94a3b8;
  --muted-2:      #64748b;
  --line:         rgba(255, 255, 255, 0.04);
  --line-light:   rgba(255, 255, 255, 0.02);
  --accent:       #2563eb;
  --accent-dk:    #1d4ed8;
  --accent-lt:    #475569;
  --accent-faint: #1e3a8a;

  /* Organisation entry card backgrounds - dark mode */
  --org-entry-bg-top: rgba(255, 255, 255, 0.04);
  --org-entry-bg-bottom: rgba(255, 255, 255, 0.02);
  --org-entry-sub-bg-top: rgba(255, 255, 255, 0.03);
  --org-entry-sub-bg-bottom: rgba(255, 255, 255, 0.01);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  display: none;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at top center, rgba(6, 182, 212, 0.06), transparent 45%);
  opacity: 1;
}

[data-theme="dark"] body {
  background: #0f172a;
}

/* ── 2. Topbar ───────────────────────────────────────────────── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 34px;
  height: 74px;
  backdrop-filter: none;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  /* needed so the mobile nav drawer is positioned relative to the bar */
  isolation: isolate;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.045em;
  margin-right: 14px;
}

.brand-mark {
  width: 31px;
  height: 31px;
  display: block;
}

.brand-name {
  line-height: 1;
}

/* Primary nav: desktop — inline links after brand */
.primary-nav {
  display: flex;
  align-items: center;
  gap: 2px;
}

/* Hamburger — hidden on desktop */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: var(--r-sm);
}
.hamburger:hover { background: var(--line-light); }
.hamburger-bar {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--ink-2);
  border-radius: 2px;
  transition: opacity 140ms, transform 140ms;
}

.nav-link {
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  cursor: pointer;
  border: none;
  background: transparent;
  font-family: inherit;
  transition: background 120ms, color 120ms;
}

.nav-link:hover,
.nav-link.active {
  background: var(--line-light);
  color: var(--ink);
}

.nav-link.active {
  font-weight: 600;
}

.topbar-spacer {
  flex: 1;
}

.topbar-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
  border: 1px solid #2563eb;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.topbar-handle {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
}

/* ── Topbar user menu ────────────────────────────────────────── */
.topbar-user-wrap {
  position: relative;
}

.topbar-user {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: background 120ms;
}

.topbar-user:hover {
  background: var(--line-light);
}

.topbar-user-plain {
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
}

.topbar-username {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.topbar-caret {
  color: var(--muted);
  transition: transform 180ms;
}

.topbar-user[aria-expanded="true"] .topbar-caret {
  transform: rotate(180deg);
}

.settings-panel {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 220px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh4);
  z-index: 300;
  overflow: hidden;
}

.account-panel {
  width: 180px;
}

.settings-panel.open {
  display: block;
}

.settings-link {
  display: block;
  padding: 12px 16px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

.settings-link:hover {
  background: var(--line-light);
}

.settings-header {
  padding: 10px 16px 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  cursor: pointer;
}

.settings-row:hover {
  background: var(--line-light);
}

.settings-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}

.toggle-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.toggle-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-track {
  width: 34px;
  height: 20px;
  background: var(--muted-2);
  border-radius: 10px;
  display: flex;
  align-items: center;
  padding: 2px;
  transition: background 180ms;
  cursor: pointer;
}

.toggle-input:checked + .toggle-track {
  background: var(--focus);
}

.toggle-thumb {
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  transition: transform 180ms;
}

.toggle-input:checked + .toggle-track .toggle-thumb {
  transform: translateX(14px);
}

.settings-divider {
  height: 1px;
  background: var(--line);
  margin: 4px 0;
}

.settings-logout {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 16px;
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--danger);
  cursor: pointer;
}

.settings-logout:hover {
  background: var(--danger-lt);
}

/* ── 3. Layout ───────────────────────────────────────────────── */
.container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 56px 26px 98px;
}

.page {
  max-width: 1120px;
  margin: 0 auto;
  padding: 56px 26px 98px;
}

.subpage-back-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.subpage-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}

.subpage-back-row-spaced {
  margin-top: 20px;
  margin-bottom: 0;
}

.page-hdr {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 36px;
}

.page-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.4px;
}

.page-sub {
  font-size: 13px;
  color: var(--muted);
  margin-top: 3px;
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 15px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--ink-2);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  box-shadow: none;
  transition: border-color 150ms, box-shadow 150ms;
}

.btn-ghost:hover {
  border-color: var(--muted-2);
  box-shadow: var(--sh2);
}

.save-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  margin-bottom: 22px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: var(--r-sm);
  color: var(--ok);
  font-size: 13px;
  font-weight: 500;
}

.save-banner.hidden {
  display: none;
}

.data-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh1);
  margin-bottom: 18px;
  overflow: visible;
  transition: box-shadow 200ms;
}

.data-card:hover {
  box-shadow: var(--sh2);
}

.data-card[data-accent=private] {
  border-left: 4px solid #f59e0b;
}

.data-card[data-accent=work] {
  border-left: 4px solid #3b82f6;
}

.data-card[data-accent=social] {
  border-left: 4px solid #8b5cf6;
}

.data-card[data-accent=family] {
  border-left: 4px solid #f43f5e;
}

.data-card[data-accent=sensitive] {
  border-left: 4px solid #dc2626;
  background:
    linear-gradient(180deg, rgba(220, 38, 38, 0.04), rgba(220, 38, 38, 0)) 0 0 / 100% 80px no-repeat,
    var(--surface, #fff);
}

.data-card[data-accent=general] {
  border-left: 4px solid #1e293b;
}

.data-card[data-accent=default] {
  border-left: 4px solid #94a3b8;
}

.card-hdr {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px 14px;
  border-bottom: 1px solid var(--line);
}

.card-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.card-title-input {
  flex: 1;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  outline: none;
  min-width: 0;
  letter-spacing: -.2px;
}

.card-title-input:focus {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
}

.card-title-static {
  flex: 1;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.2px;
  color: var(--ink);
}

.card-badge {
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
  background: var(--line-light);
  border-radius: 99px;
  padding: 2px 9px;
}

.card-del {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  border-radius: var(--r-sm);
  color: var(--muted-2);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 120ms, color 120ms;
}

.card-del:hover {
  background: var(--danger-lt);
  color: var(--danger);
}

.card-body {
  padding: 20px;
}

.fields-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 24px;
}

.field-block {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.field-block.full {
  grid-column: 1 / -1;
}

.field-lbl {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .5px;
}

.field-input {
  width: 100%;
  padding: 8px 12px;
  border: none;
  border-radius: var(--r-sm);
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  background: var(--surface);
  outline: none;
  transition: background 120ms, box-shadow 120ms;
}

.field-input:focus {
  background: var(--surface);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, .15);
}

.field-input::placeholder {
  color: var(--muted-2);
}

textarea.field-input {
  resize: vertical;
  line-height: 1.5;
}

.field-input[type="date"] {
  color-scheme: light;
}

[data-theme="dark"] .field-input[type="date"] {
  color-scheme: dark;
}

.card {
  background: var(--surface);
  border: none;
  border-radius: 20px;
  padding: 28px;
  box-shadow: none;
  backdrop-filter: none;
}

.auth-landing {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, .9fr);
  gap: 28px;
  align-items: start;
}

.auth-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.12), transparent 38%),
    linear-gradient(180deg, rgba(241, 245, 249, 0.95), rgba(255, 255, 255, 1));
}

[data-theme="dark"] .auth-hero {
  background:
    radial-gradient(circle at top right, rgba(96, 165, 250, 0.18), transparent 36%),
    linear-gradient(180deg, rgba(30, 41, 59, 1), rgba(15, 23, 42, 1));
}

.auth-kicker {
  display: inline-flex;
  margin-bottom: 12px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.06);
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.auth-lead {
  font-size: 1rem;
  color: var(--ink-2);
}

.auth-pitch {
  margin: 18px 0 20px;
}

.auth-highlights {
  margin: 0;
  padding-left: 18px;
  color: var(--ink-2);
}

.auth-highlights li + li {
  margin-top: 8px;
}

.auth-form-card h2 {
  margin-top: 0;
}

.narrow { max-width: 440px; }

/* Modal overlay */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}
.modal-box {
  position: relative;
  width: 100%;
  max-width: 440px;
  max-height: 90vh;
  overflow-y: auto;
}
.modal-close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}
.modal-close:hover {
  color: var(--text);
  background: var(--surface-raised, rgba(0,0,0,0.06));
}

.stack { display: grid; gap: 18px; }
.grid  { display: grid; gap: 18px; }
.two   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.full-row { grid-column: 1 / -1; }

/* ── 5. Typography ───────────────────────────────────────────── */
h1, h2, h3, h4 { margin: 0 0 .52em; line-height: 1.22; }
h1, h2, h3 { font-family: 'Outfit', 'Poppins', sans-serif; letter-spacing: -0.03em; }
h1 { font-size: 2.625rem; font-weight: 700; letter-spacing: -0.03em; margin-bottom: 0.3em; }
h2 { font-size: 1.5rem; font-weight: 650; }
h3 { font-size: 1.1rem; font-weight: 600; }
h4 { font-size: 0.95rem; font-weight: 600; }
p  { margin: 0 0 .9em; line-height: 1.6; }
p:last-child { margin-bottom: 0; }

.muted   { color: var(--muted); line-height: 1.5; }
.small   { font-size: 0.89rem; }
.tiny    { font-size: 0.8rem; }
.subhead { margin-top: 30px; }

/* ── 6. Form elements ────────────────────────────────────────── */
label {
  display: grid;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink-2);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

input, select, textarea {
  font: inherit;
  font-size: 0.95rem;
  padding: 11px 13px;
  border-radius: 11px;
  border: none;
  background: var(--surface);
  color: var(--ink);
  width: 100%;
  /* Remove all transitions and backdrop-filter for perf */
  transition: none;
  backdrop-filter: none;
}

/* Dropdown perf: remove blur/filter work from native select menus. */
select {
  appearance: auto;
  -webkit-appearance: menulist;
  /* Remove all custom backgrounds and borders for native perf */
  background: initial;
  border: initial;
  box-shadow: none;
  transition: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

select option {
  background: var(--surface);
  color: var(--ink);
}

select:focus {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent);
}

input:focus, select:focus, textarea:focus {
  outline: none;
  background: var(--surface);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, .2);
}

.fast-select {
  position: relative;
  width: 100%;
}

.fast-select-native {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.fast-select-trigger {
  width: 100%;
  min-height: 40px;
  text-align: left;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: none;
}

.fast-select.open .fast-select-trigger {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
}

.fast-select-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 280px;
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.15);
  z-index: 220;
}

.fast-select.open .fast-select-menu {
  display: block;
}

.fast-select-group-label {
  padding: 8px 12px 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.fast-select-option {
  width: 100%;
  text-align: left;
  border: 0;
  border-radius: 0;
  padding: 8px 12px;
  background: transparent;
  color: var(--ink);
  font-size: 14px;
  box-shadow: none;
}

.fast-select-option:hover,
.fast-select-option.is-active {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

textarea { resize: vertical; }

/* ── 7. Buttons ──────────────────────────────────────────────── */
button {
  font: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 10px 20px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, box-shadow .15s, transform .1s;
}

button:hover  { background: rgba(255, 255, 255, 0.12); }
button:active { transform: translateY(1px); box-shadow: none; }

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--accent);
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  padding: 9px 18px;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.22);
  transition: background .15s, border-color .15s, box-shadow .15s, transform .1s;
}

.btn-primary:hover {
  background: var(--accent-dk);
  border-color: var(--accent-dk);
  box-shadow: 0 12px 28px rgba(30, 64, 175, 0.26);
}

.btn-primary-soft {
  background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
  border-color: #2563eb;
}

.btn-primary-soft:hover {
  background: linear-gradient(180deg, #1d4ed8 0%, #1e40af 100%);
  border-color: #1d4ed8;
}

.secondary-btn,
.toggle-btn {
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink-2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-weight: 500;
  box-shadow: none;
  border-radius: 8px;
}

.secondary-btn:hover,
.toggle-btn:hover {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

.danger-btn {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}

.danger-btn:hover { background: #b91c1c; box-shadow: none; }

.btn-danger-outline {
  background: transparent;
  color: var(--danger);
  border: 1px solid var(--danger);
  box-shadow: none;
}

.btn-danger-outline:hover {
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  color: var(--danger);
  border-color: var(--danger);
}

.btn-success {
  background: var(--ok);
  border: 1px solid var(--ok);
  color: #fff;
  box-shadow: none;
}

.btn-success:hover {
  background: color-mix(in srgb, var(--ok) 86%, black 14%);
  border-color: color-mix(in srgb, var(--ok) 86%, black 14%);
}

.link-btn {
  background: transparent;
  border: none;
  color: var(--accent);
  padding: 6px 10px;
  font-weight: 500;
  box-shadow: none;
}

.link-btn:hover {
  background: var(--accent-faint);
  color: var(--accent-dk);
  box-shadow: none;
}

.small-btn { padding: 6px 12px;  font-size: 0.82rem; border-radius: 8px; }
.mini-btn  { padding: 5px 10px;  font-size: 0.78rem; border-radius: 7px; }

.btn-sm {
  padding: 6px 14px;
  font-size: 13px;
  border-radius: var(--r-sm);
  font-weight: 600;
}

.btn-md {
  padding: 8px 20px;
  font-size: 14px;
  border-radius: var(--r-sm);
  font-weight: 600;
}

.btn-wide {
  width: 100%;
  justify-content: center;
}

.btn-nowrap {
  white-space: nowrap;
}

a.button {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  padding: 9px 20px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9rem;
  transition: background .15s, box-shadow .15s;
}

a.button:hover { background: rgba(255, 255, 255, 0.12); }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  border: none;
  border-radius: 999px;
  padding: 8px 16px;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink-2);
  font-size: 0.88rem;
  font-weight: 500;
  transition: background 150ms;
}

.btn-secondary:hover { background: rgba(255, 255, 255, 0.08); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  border: none;
  border-radius: 8px;
  padding: 7px 12px;
  text-decoration: none;
  background: transparent;
  color: var(--muted);
  font-size: 0.83rem;
  font-weight: 500;
  transition: color 150ms, background 150ms;
}

.btn-ghost:hover { color: var(--ink-2); background: rgba(255, 255, 255, 0.03); }

.save-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  flex-wrap: wrap;
}

.save-hint {
  font-size: 12px;
  color: var(--muted);
}

.btn-save,
.toolbar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--accent);
  border-radius: 9px;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.2);
}

.btn-save:hover,
.toolbar-btn:hover {
  background: var(--accent-dk);
  border-color: var(--accent-dk);
}

.card-toolbar {
  /* Remove flex to avoid any layout/compositing cost for dropdown container */
  display: block;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.card-toolbar select {
  flex: 1;
  min-width: 180px;
}

.profile-add-btn {
  min-width: 84px;
  padding: 8px 14px;
}

.profile-add-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

.preset-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.preset-chip:hover {
  border-color: color-mix(in srgb, var(--line) 40%, transparent);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
}

.preset-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  flex-shrink: 0;
}

.cluster-empty {
  margin-top: 8px;
  border: 1px dashed color-mix(in srgb, var(--line) 70%, transparent);
  border-radius: 12px;
  padding: 16px;
  color: var(--muted);
  font-size: 13px;
}

.cluster-empty strong {
  display: block;
  color: var(--ink-2);
  margin-bottom: 4px;
}

/* ── 8. Links ────────────────────────────────────────────────── */
a { color: var(--accent); }
a:hover { color: var(--accent-dk); }

/* ── 9. Inline utilities ─────────────────────────────────────── */
.inline-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-end;
  margin-top: 10px;
}

.field-row  { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
.gap        { display: flex; gap: 8px; }
.inline-gap { margin-top: 8px; }

.collapse-panel {
  margin-top: 8px;
}

.collapse-panel-left {
  text-align: left;
}

.collapse-summary-link {
  font-size: 12px;
  color: var(--focus);
  cursor: pointer;
  list-style: none;
}

.collapse-content-box {
  margin-top: 6px;
  background: var(--line-light);
  padding: 8px 10px;
  border-radius: var(--r-sm);
  font-size: 12px;
  word-break: break-all;
}

/* ── 10. Badges & Chips ──────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #fff;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 1px 7px;
  margin-left: 6px;
  vertical-align: middle;
}

.badge-contact-org {
  background: #3b82f6;
  color: #fff;
  font-size: 0.72rem;
}

.badge-contact-personal {
  background: #22c55e;
  color: #fff;
  font-size: 0.72rem;
}

.badge-contact-shared-org {
  background: #dbeafe;
  color: #1d4ed8;
  font-size: 0.72rem;
}

.invitation-status-badge {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.invitation-status-badge.is-pending { background: var(--focus); color: #fff; }
.invitation-status-badge.is-accepted { background: var(--ok); color: #fff; }
.invitation-status-badge.is-revoked { background: var(--muted); color: #fff; }
.invitation-status-badge.is-neutral {
  background: var(--line);
  color: var(--ink);
  border: 1px solid var(--line);
}

.identifier-type-badge {
  font-size: 0.72rem;
}

.identifier-type-badge.is-handle { background: #fdf5e0; color: #7a5500; }
.identifier-type-badge.is-static { background: #edf6f1; color: #1a6642; }
.identifier-type-badge.is-dynamic { background: #eaf2fb; color: #1a4d7c; }
.identifier-type-badge.is-onetime { background: #f2edfc; color: #4c2080; }

.identifier-state-badge.is-inactive { background: #fdf0f0; color: #8c2222; }

.badge-collection-cluster {
  background: #e0e7ff;
  color: #3730a3;
}

.badge-collection-partial {
  background: #fff7ed;
  color: #9a3412;
}

.badge-collection-field {
  background: #f3f4f6;
  color: #374151;
}

.prop-pill {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 0.8rem;
  font-weight: 700;
}

.check-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 6px 12px;
  background: var(--surface);
  color: var(--ink);
  font-size: 0.82rem;
  cursor: pointer;
  transition: border-color .15s;
}

.check-chip:hover { border-color: var(--accent); }
.check-chip input { min-height: auto; width: auto; }

.cluster-chip-label {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.8rem;
  color: var(--muted);
}

/* ── 11. Toast / Flash ───────────────────────────────────────── */
.toast-container {
  position: fixed;
  top: 68px;
  right: 18px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 340px;
}

.toast {
  padding: 12px 18px;
  border-radius: 12px;
  font-size: 0.88rem;
  font-weight: 500;
  box-shadow: var(--sh4);
  transition: opacity .4s ease;
}

.toast-success { background: #d1fae5; color: #065f46; border-left: 4px solid var(--accent); }
.toast-error   { background: #fee2e2; color: #991b1b; border-left: 4px solid var(--danger); }
.toast-info    { background: #e0f2fe; color: #0c4a6e; border-left: 4px solid #0ea5e9; }

/* ── 12. Propagation box ─────────────────────────────────────── */
.propagation-box {
  background: var(--accent-lt);
  border-left: 4px solid var(--accent);
  border-radius: 12px;
  padding: 14px 18px;
}

/* ── 13. Lists ───────────────────────────────────────────────── */
.list { display: grid; gap: 8px; margin-bottom: 16px; }

.list-item {
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--surface);
  transition: border-color .15s, box-shadow .15s;
}

.list-item:hover { border-color: #c7d3df; box-shadow: var(--sh1); }

.mini-card {
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: none;
  box-shadow: var(--sh1);
}

/* ── 14. Contact components ──────────────────────────────────── */
.contact-avatar {
  width: 42px;
  box-shadow: none;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  flex-shrink: 0;
}

.contact-avatar-img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.contact-info { display: flex; flex-direction: column; gap: 4px; width: 100%; }

.contact-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
  font-size: 0.85rem;
  color: var(--muted);
}

.contact-card { align-items: flex-start; gap: 12px; }

.contacts-alpha-index {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 20px;
}

.contacts-alpha-index a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  min-height: 34px;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  text-decoration: none;
  background: var(--surface);
  color: var(--ink-2);
  font-size: 0.82rem;
  font-weight: 600;
  transition: all .15s;
}

.contacts-alpha-index a:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-faint);
}

.contacts-group  { margin-bottom: 22px; }

.contacts-letter {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  margin: 0 0 8px;
}

.contact-expander {
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}

.contact-expander:hover          { border-color: #c7d3df; box-shadow: var(--sh2); }
.contact-expander + .contact-expander { margin-top: 8px; }
.contact-expander summary        { list-style: none; cursor: pointer; }
.contact-expander summary::-webkit-details-marker { display: none; }

.contact-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 11px 14px;
}

.contact-summary:hover       { background: var(--line-light); }
.contact-summary-main        { display: grid; gap: 2px; }
.contact-summary-meta        { white-space: nowrap; }

.contact-expander-body {
  border-top: 1.5px solid var(--line);
  padding: 14px;
  display: grid;
  gap: 16px;
}

.contact-section h3 { margin: 0 0 12px; font-size: 0.9rem; }

.contact-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
}

.contact-detail-item {
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 9px 12px;
  background: var(--line-light);
}

.contact-detail-item strong {
  display: block;
  font-size: 0.74rem;
  color: var(--muted);
  margin-bottom: 3px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.contact-detail-item p {
  margin: 0;
  font-size: 0.9rem;
  word-break: break-word;
}

/* ── 15. QR / Identifiers ────────────────────────────────────── */
.qr-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px;
  margin: 12px 0 20px;
  border: 1.5px solid var(--line);
  border-radius: 16px;
  background: var(--line-light);
}

.qr-block canvas,
.qr-block img,
.qr-code-frame,
.connections-share-qr canvas,
.connections-share-qr img {
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--line) 80%, #fff 20%);
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
}

.qr-code-host {
  width: min(100%, 380px);
  margin: 10px auto 0;
}

.qr-code-host canvas,
.qr-code-host img,
.connections-share-qr canvas,
.connections-share-qr img {
  width: 100% !important;
  height: auto !important;
  display: block;
}

.hero-share-card {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(220px, 0.8fr);
  gap: 20px;
  padding: 20px;
  margin: 16px 0 22px;
  border: 1.5px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--sh2);
}

.hero-share-qr { margin: 0; }
.identifier-advanced-box { margin-top: 18px; }
.identifier-advanced-box summary { cursor: pointer; font-weight: 500; }

/* ── 16. Tables ──────────────────────────────────────────────── */
.info-table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}

.info-table th,
.info-table td {
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  font-size: 0.88rem;
}

.info-table th {
  color: var(--muted);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.info-table.compact th,
.info-table.compact td { font-size: 0.82rem; padding: 6px 10px; }

/* ── 17. Status indicators ───────────────────────────────────── */
.success { color: var(--ok); }
.error   { color: var(--danger); }

.status-list {
  list-style: none;
  padding: 0;
  margin: 12px 0;
  display: grid;
  gap: 10px;
}

.status-item {
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 10px 14px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.status-item.ok   { border-color: #a7f3d0; background: #f0fdf4; }
.status-item.fail { border-color: #fecaca; background: #fff5f5; }

.status-dot {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--line-light);
  color: var(--ink-2);
}

.status-dot.ok   { background: var(--accent-lt); color: var(--ok); }
.status-dot.fail { background: var(--danger-lt); color: var(--danger); }

/* ── 18. Dashboard widgets ───────────────────────────────────── */
.progress-strip { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }

.next-step-box {
  border: 1.5px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 18px;
  background: var(--accent-faint);
}

.next-step-box h2 { margin: 0 0 8px; }

/* ── 19. Misc utilities ──────────────────────────────────────── */
.big-code {
  font-size: 1.1rem;
  word-break: break-all;
  font-family: ui-monospace, "SF Mono", "Cascadia Code", monospace;
}

.copy-btn {
  font-size: 0.75rem;
  padding: 2px 8px;
  margin-left: 6px;
  background: var(--surface);
  color: var(--ink);
  border: 1.5px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
  vertical-align: middle;
  transition: background .15s, color .15s;
}

.copy-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: none; }

.alert-success {
  background: var(--accent-lt);
  border: 1.5px solid #86efac;
  border-radius: 12px;
  padding: 12px 16px;
  margin: 12px 0;
}

details {
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 14px 18px;
  margin: 12px 0;
  background: var(--surface);
}

details summary { cursor: pointer; padding: 4px 0; font-weight: 500; }
details ol, details ul { margin: 10px 0 4px 20px; }
details li { margin-bottom: 6px; font-size: 0.9rem; }

/* ── 19.5. Collapsible Cards ─────────────────────────────────── */
.collapsible-card {
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 0;
  margin: 12px 0;
  background: var(--surface);
  overflow: hidden;
}

.collapsible-card[open] {
  box-shadow: var(--sh1);
}

.collapsible-card summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 18px;
  font-weight: 500;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  user-select: none;
  transition: background .15s ease;
}

.collapsible-card summary::-webkit-details-marker {
  display: none;
}

.collapsible-card summary:hover {
  background: var(--line-light);
}

.collapsible-card[open] summary {
  border-bottom: 1.5px solid var(--line);
  background: var(--line-light);
}

.collapsible-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.collapsible-title {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.collapsible-eyebrow {
  display: block;
  font-size: 0.82rem;
  color: var(--muted);
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.collapsible-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--muted-2);
  font-size: 0.9rem;
  transition: transform .2s ease;
  font-weight: bold;
}

.collapsible-card[open] .collapsible-caret {
  transform: rotateZ(180deg);
}

.collapsible-card-body {
  padding: 14px 18px;
  display: grid;
  gap: 12px;
}

.small-label { display: grid; gap: 4px; min-width: 200px; font-size: 0.82rem; color: var(--muted); }

/* ── 20. Preset actions ──────────────────────────────────────── */
.preset-box {
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: var(--line-light);
  padding: 16px;
  display: grid;
  gap: 10px;
}

.preset-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ── 21. Release fields ──────────────────────────────────────── */
.release-fields-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 6px;
  width: 100%;
}

.cluster-inline-group { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* ── 22. Organisations ───────────────────────────────────────── */
.group-item   { align-items: stretch; gap: 14px; }
.group-main   { min-width: 260px; }
.group-members { flex: 1; }

.org-list {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

.org-entry-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.org-entry {
  border: 1.5px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(180deg, var(--org-entry-bg-top) 0%, var(--org-entry-bg-bottom) 100%);
  padding: 18px;
  display: grid;
  gap: 14px;
  box-shadow: var(--sh1);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.org-entry-link:hover .org-entry,
.org-entry-link:focus-visible .org-entry {
  transform: translateY(-1px);
  box-shadow: var(--sh2);
  border-color: #cbd5e1;
}

.org-entry-sub {
  margin-left: 18px;
  background: linear-gradient(180deg, var(--org-entry-sub-bg-top) 0%, var(--org-entry-sub-bg-bottom) 100%);
}

.org-entry-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.org-entry-stats {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

.org-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  margin-bottom: 22px;
}

.org-page-title {
  font-size: 2.625rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.22;
  margin: 0 0 .3em;
}

.org-page-sub {
  margin-top: 8px;
  max-width: 74ch;
}

.org-toolbar-controls {
  display: flex;
  justify-content: flex-end;
}

.org-section-card {
  background: color-mix(in srgb, var(--surface) 95%, transparent);
  border: 1px solid color-mix(in srgb, var(--line) 58%, transparent);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.09);
}

.org-section-title {
  font-size: 1.25rem;
  font-weight: 640;
}

.org-create-form {
  display: none;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  border: 1px solid color-mix(in srgb, var(--line) 58%, transparent);
  border-radius: var(--r);
  padding: 18px;
  margin-bottom: 24px;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.09);
}

.org-create-form-stack {
  max-width: 520px;
  gap: 14px;
}

.org-create-form label {
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
  letter-spacing: 0;
  text-transform: none;
}

.org-create-form input,
.org-create-form select {
  background: color-mix(in srgb, var(--surface) 82%, rgba(255, 255, 255, 0.05));
  border: 1px solid color-mix(in srgb, var(--line) 72%, rgba(255, 255, 255, 0.06));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  transition: border-color 150ms, background 150ms, box-shadow 150ms;
}

.org-create-form input:hover,
.org-create-form select:hover {
  background: color-mix(in srgb, var(--surface) 86%, rgba(255, 255, 255, 0.06));
  border-color: color-mix(in srgb, var(--line) 50%, rgba(255, 255, 255, 0.12));
}

.org-create-form input:focus,
.org-create-form select:focus {
  outline: none;
  border-color: rgba(59, 130, 246, 0.55);
  background: color-mix(in srgb, var(--surface) 88%, rgba(255, 255, 255, 0.08));
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.12);
}

.org-form-help {
  margin-top: 4px;
}

.org-create-actions {
  display: flex;
  gap: 10px;
}

.org-entry-invitation {
  background: color-mix(in srgb, var(--surface) 93%, rgba(59, 130, 246, 0.04));
}

.org-entry-name {
  font-size: 1.05rem;
}

.org-entry-desc {
  margin: 6px 0 0;
}

.org-entry-meta-line {
  margin: 4px 0 0;
}

.org-entry-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.org-role-badge {
  background: var(--accent);
}

.org-role-member {
  background: var(--muted);
}

.org-role-inherited {
  background: #8b5cf6;
  color: #fff;
}

.org-role-generic {
  background: var(--muted-2);
}

.org-invite-status.is-pending { background: var(--accent); }
.org-invite-status.is-accepted { background: #22c55e; }
.org-invite-status.is-other { background: var(--muted); }

.org-invite-role {
  background: var(--muted);
  margin-left: 4px;
}

.org-member-role.is-admin { background: var(--accent); }
.org-member-role.is-default { background: var(--muted); }

.org-detail-card {
  border: 1px solid color-mix(in srgb, var(--line) 62%, transparent);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12);
}

.org-detail-topbar {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 16px;
}

.org-detail-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 20px;
}

.org-detail-title-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}

.org-detail-avatar {
  width: 56px;
  height: 56px;
  font-size: 1.4rem;
}

.org-detail-block {
  margin: 20px 0;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--line) 68%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
}

.org-detail-footer-back {
  margin-top: 20px;
}

.org-stat-block {
  min-width: 92px;
}

.org-stat-label {
  margin: 0;
  font-size: .73rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
}

.org-stat-value {
  margin: 0;
  font-weight: 700;
  font-size: 1.1rem;
}

.group-member-list {
  list-style: none;
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
}

.group-member-list li {
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 8px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

/* ── 23. Broadcasts ──────────────────────────────────────────── */
.broadcast-item { align-items: flex-start; }

/* ── 24. Profile / Userdata legacy classes ───────────────────── */
.profile-shell          { display: grid; gap: 24px; }
.profile-header-row     { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.profile-header-row-strong h1 { margin-bottom: 6px; }
.profile-header-link    { white-space: nowrap; padding-top: 8px; }
.profile-form-shell,
.profile-main-column    { display: grid; gap: 22px; }
.profile-side-column    { display: grid; gap: 16px; }
.profile-layout         { display: grid; gap: 28px; grid-template-columns: minmax(0, 1.7fr) minmax(280px, 0.9fr); align-items: start; }

.profile-panel {
  border: 1.5px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  padding: 18px;
  box-shadow: var(--sh2);
}

.profile-identity-panel-modern  { background: linear-gradient(135deg, var(--accent-faint) 0%, var(--surface) 60%); }
.profile-avatar-stack   { display: flex; gap: 14px; align-items: center; margin-bottom: 18px; }
.profile-avatar-large   { width: 76px; height: 76px; font-size: 1.8rem; }
.profile-hero-stack     { align-items: center; }
.profile-hero-meta      { display: grid; gap: 2px; }
.profile-hero-name      { font-size: 1.45rem; line-height: 1.2; font-weight: 700; }
.profile-core-grid input,
.profile-core-grid textarea,
.profile-core-grid select { border-radius: 10px; }
.profile-submit-row     { display: flex; justify-content: flex-start; }

/* Legacy cluster editor classes */
.cluster-editor-panel-modern  { background: var(--surface); }
.cluster-editor-head          { display: flex; gap: 16px; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
.cluster-preset-actions       { margin-bottom: 14px; }
.cluster-tools-inline         { margin-bottom: 10px; }
.cluster-board                { display: grid; gap: 14px; }
.cluster-empty-state          { margin-top: 6px; }

.cluster-card {
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  padding: 16px;
  display: grid;
  gap: 12px;
  box-shadow: var(--sh1);
  transition: border-color .2s, box-shadow .2s;
}

.cluster-card:hover           { border-color: #c7d3df; box-shadow: var(--sh3); }
.cluster-card-head            { display: flex; gap: 10px; align-items: center; }
.cluster-name-input           { font-weight: 700; font-size: 1rem; }
.cluster-quick-bar            { display: grid; grid-template-columns: minmax(140px, 1fr) auto minmax(140px, 1fr) auto; gap: 8px; align-items: center; }
.cluster-select               { min-height: 38px; }
.cluster-field-list           { display: grid; gap: 8px; }

.cluster-field-row {
  display: grid;
  grid-template-columns: auto minmax(110px, .8fr) minmax(0, 1.4fr) auto;
  gap: 8px;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 6px 8px;
  background: var(--line-light);
  transition: border-color .15s;
}

.cluster-field-row:hover    { border-color: var(--line); }
.cluster-field-actions      { display: flex; gap: 6px; }

.cluster-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 34px;
  padding: 0 8px;
  border: 1px dashed var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  cursor: grab;
  user-select: none;
}

.cluster-field-row-dragging     { opacity: .4; }
.cluster-field-row-drop-target  { border-color: var(--accent); background: var(--accent-faint); }
.cluster-field-list-active      { padding: 8px; border: 2px dashed var(--accent); border-radius: 12px; background: var(--accent-faint); }
.cluster-summary                { display: grid; gap: 8px; }
.cluster-summary-item           { display: flex; justify-content: space-between; gap: 8px; border: 1.5px solid var(--line); border-radius: 10px; padding: 9px 12px; background: var(--surface); font-size: 0.88rem; }
.cluster-side-hints             { margin-top: 12px; border: 1.5px dashed var(--line); border-radius: 12px; padding: 12px 16px; background: var(--line-light); }
.cluster-side-hints h4          { margin: 0 0 8px; font-size: 0.88rem; }
.cluster-side-hints ul          { margin: 0; padding-left: 18px; color: var(--muted); font-size: 0.84rem; display: grid; gap: 4px; }

/* ── 25. New Userdata page (ud-*) ────────────────────────────── */
.ud-page { display: grid; gap: 24px; }

/* Identity card */
.ud-identity {
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: 20px;
  padding: 22px;
  box-shadow: var(--sh2);
}

.ud-identity-top {
  display: flex;
  gap: 18px;
  align-items: center;
  margin-bottom: 22px;
  padding-bottom: 20px;
  border-bottom: 1.5px solid var(--line);
}

.ud-identity-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.ud-section-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0;
}

.ud-badge {
  font-size: 0.7rem;
  color: var(--muted);
  font-weight: 500;
  background: var(--line-light);
  border-radius: 999px;
  padding: 3px 11px;
}

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

.ud-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent) 0%, #047857 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.7rem;
  box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--accent-lt);
}

.ud-avatar-img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--accent-lt);
}

.ud-identity-meta           { flex: 1; min-width: 0; }
.ud-identity-meta h1        { font-size: 1.35rem; margin-bottom: 3px; }
.ud-handle {
  font-size: 0.84rem;
  color: var(--muted);
  font-family: ui-monospace, "SF Mono", monospace;
}

.ud-view-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  text-decoration: none;
  font-size: 0.84rem;
  font-weight: 500;
  padding: 7px 14px;
  border: 1.5px solid var(--accent-lt);
  border-radius: 999px;
  background: var(--accent-faint);
  transition: all .15s;
  white-space: nowrap;
  flex-shrink: 0;
}

.ud-view-link:hover { background: var(--accent-lt); border-color: var(--accent); color: var(--accent-dk); }

.ud-core-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
}

.ud-core-fields .full-row { grid-column: 1 / -1; }

.ud-photo-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--line-light);
}

.ud-photo-row label          { margin: 0; font-size: 0.84rem; color: var(--muted); flex: 1; cursor: default; }
.ud-photo-row input[type=file] { width: auto; font-size: 0.84rem; padding: 4px 8px; border: none; background: transparent; box-shadow: none; }

/* Clusters section */
.ud-clusters-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
  gap: 16px;
}

.ud-clusters-header h2 { margin: 0; }

/* Empty / onboarding */
.ud-setup-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.ud-setup-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 22px 20px;
  border: 2px dashed var(--line);
  border-radius: 18px;
  background: var(--surface);
  cursor: default;
  transition: border-color .2s, background .2s;
}

.ud-setup-card:hover { border-color: var(--accent); background: var(--accent-faint); }
.ud-setup-card:hover button { background: var(--accent); color: #fff; box-shadow: var(--sh3); }
.ud-setup-icon          { font-size: 2rem; line-height: 1; }
.ud-setup-card h3       { margin: 0; font-size: 1rem; }
.ud-setup-card p        { margin: 0; font-size: 0.84rem; color: var(--muted); flex: 1; }
.ud-setup-card button   { margin-top: 4px; font-size: 0.84rem; padding: 7px 16px; border-radius: 8px; }

/* Cluster grid */
.ud-cluster-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

/* Cluster card */
.ud-cluster-card {
  --cc:    var(--accent);
  --cc-lt: var(--accent-lt);
  --cc-bg: var(--accent-faint);
  display: flex;
  flex-direction: column;
  border: none;
  border-top: 2px solid var(--cc);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: var(--sh1);
  overflow: hidden;
  transition: box-shadow .2s, border-color .2s;
}

.ud-cluster-card:hover { box-shadow: var(--sh2); }

.ud-cluster-card[data-accent="private"]  { --cc: #f59e0b;  --cc-lt: #fef3c7;  --cc-bg: #fffbeb; }
.ud-cluster-card[data-accent="work"] { --cc: #3b82f6; --cc-lt: #dbeafe; --cc-bg: #eff6ff; }
.ud-cluster-card[data-accent="social"]    { --cc: #8b5cf6;    --cc-lt: #ede9fe;    --cc-bg: #f5f3ff; }

.ud-cluster-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.ud-cluster-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--cc);
}

.ud-cluster-name {
  flex: 1;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.2px;
  border: none;
  background: transparent;
  color: var(--ink);
  padding: 0;
  min-height: 0;
  box-shadow: none;
  width: auto;
  outline: 0;
}

.ud-cluster-name:focus {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
}

.ud-cluster-actions { display: flex; gap: 4px; }

.ud-cluster-del {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  min-height: 0;
  box-shadow: none;
  flex-shrink: 0;
  transition: background .15s, color .15s;
}

.ud-cluster-del:hover { background: var(--danger-lt); color: var(--danger); box-shadow: none; }

/* Field body */
.ud-cluster-body {
  flex: 1;
  padding: 20px;
  display: grid;
  gap: 0;
}

.ud-field-row {
  display: grid;
  grid-template-columns: minmax(80px, .75fr) minmax(0, 1.5fr) 28px;
  gap: 5px;
  align-items: center;
  padding: 5px 0;
  border-bottom: 1px solid var(--line-light);
}

.ud-field-row:last-of-type { border-bottom: none; }

.ud-field-label,
.ud-field-value {
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  padding: 8px 12px;
  font-size: 14px;
  background: transparent;
  min-height: 0;
  width: 100%;
  box-shadow: none;
  outline: 0;
  transition: border-color .15s, background .15s;
}

.ud-field-label { 
  color: var(--muted); 
  font-weight: 600; 
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.ud-field-value { color: var(--ink); }

.ud-field-label:focus,
.ud-field-value:focus {
  background: var(--surface);
  border-color: var(--cc);
  box-shadow: 0 0 0 2px var(--cc-lt);
  outline: none;
}

.ud-field-del {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 0.9rem;
  padding: 0;
  cursor: pointer;
  opacity: 0;
  min-height: 0;
  box-shadow: none;
  flex-shrink: 0;
  transition: opacity .15s, background .15s, color .15s;
}

.ud-field-row:hover .ud-field-del { opacity: 1; }
.ud-field-del:hover { background: var(--danger-lt); color: var(--danger); box-shadow: none; }

.ud-cluster-empty-hint {
  color: var(--muted);
  font-size: 0.84rem;
  margin: 8px 0 4px;
  font-style: italic;
}

/* Cluster toolbar */
.ud-cluster-toolbar {
  padding: 12px 20px;
  border-top: 1px solid var(--line);
  background: var(--line-light);
  display: flex;
  align-items: center;
  gap: 6px;
}

.ud-add-field-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.ud-add-field-select {
  flex: 1;
  font-size: 0.84rem;
  padding: 6px 10px;
  border-radius: 8px;
  min-height: 0;
  border-color: var(--line);
}

.ud-add-field-btn {
  font-size: 0.82rem;
  padding: 6px 14px;
  border-radius: 8px;
  min-height: 0;
  background: var(--cc);
  color: #fff;
  border: none;
  white-space: nowrap;
  font-weight: 600;
  box-shadow: none;
  transition: filter .15s, transform .1s;
}

.ud-add-field-btn:hover { filter: brightness(.9); box-shadow: none; }

/* Save row */
.ud-save-row {
  display: flex;
  justify-content: flex-end;
  padding: 4px 0 8px;
}

.ud-save-btn {
  padding: 11px 32px;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 12px;
}

/* ── 26. Connections + Collections pages ────────────────────── */
.connections-title {
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.connections-subtitle { margin-bottom: 20px; }

.connections-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: var(--r-sm);
  padding: 10px 14px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.connections-strip-warning {
  background: #fef3c7;
  border: 1px solid #fcd34d;
}

.connections-strip-neutral {
  background: var(--line-light);
  border: 1px solid var(--line);
}

.connections-strip-count {
  font-weight: 600;
  font-size: 14px;
}

.connections-strip-count-regular { font-weight: 500; }

.connections-strip-link {
  margin-left: auto;
  font-size: 13px;
  color: var(--focus);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.connections-section-gap { margin-bottom: 28px; }

.connections-token-link {
  font-size: 12px;
  color: var(--focus);
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
}

.connections-share-intro {
  margin-bottom: 14px;
  font-size: 13px;
}

.connections-token-pills {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.connections-token-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 2px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: all 120ms;
}

.connections-token-pill-active {
  border-color: var(--focus);
  background: var(--focus);
  color: #fff;
}

.connections-token-input { display: none; }

.connections-share-grid {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.connections-share-qr {
  flex-shrink: 0;
  width: min(100%, 340px);
}

.connections-share-meta {
  flex: 1;
  min-width: 200px;
}

.connections-share-kicker {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--muted);
  margin: 0 0 6px;
}

.connections-share-link-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.connections-share-link {
  font-size: 13px;
  color: var(--focus);
  font-weight: 600;
  text-decoration: none;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.connections-copy-btn {
  padding: 5px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  color: var(--ink);
}

.connections-share-hint {
  font-size: 12px;
  color: var(--muted);
  margin: 0;
  line-height: 1.4;
}

.connections-detail-row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 10px;
  padding: 8px;
  background: var(--bg);
  border-radius: var(--r-sm);
}

.connections-pending-card { border-left: 4px solid #fbbf24; }

.connections-card-title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 12px;
  padding: 16px 20px 0;
}

.connections-badge-warning {
  background: #f59e0b;
  color: #fff;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
}

.connections-list-body {
  display: grid;
  gap: 10px;
  padding: 0 20px 20px;
}

.connections-pending-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--line-light);
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
}

.connections-pending-avatar {
  width: 40px;
  height: 40px;
  font-size: 14px;
}

.connections-pending-name-wrap {
  flex: 1;
  min-width: 0;
}

.connections-pending-name { font-weight: 600; }
.connections-pending-name-block { display: block; }

.connections-pending-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

.connections-accept-form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  margin: 0;
}

.connections-accept-row {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

.connections-accept-select {
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 13px;
  background: var(--surface);
}

.connections-btn-accept,
.connections-btn-decline,
.connections-btn-danger,
.connections-btn-primary {
  padding: 6px 14px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.connections-btn-accept {
  background: var(--ok);
  color: #fff;
}

.connections-btn-decline {
  background: var(--line);
  color: var(--ink-2);
}

.connections-btn-danger {
  background: transparent;
  color: var(--danger);
  border: 1px solid var(--danger);
}

.connections-btn-primary {
  background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
  border: 1px solid #2563eb;
  color: #fff;
  padding: 6px 16px;
}

.connections-btn-primary:hover {
  background: linear-gradient(180deg, #1d4ed8 0%, #1e40af 100%);
  border-color: #1d4ed8;
}

.connections-contact-avatar {
  background: linear-gradient(180deg, #0ea5e9 0%, #0284c7 100%);
  border: 1px solid #0284c7;
}

.connections-collection-badge {
  background: color-mix(in srgb, #0ea5e9 24%, var(--surface) 76%);
  border: 1px solid color-mix(in srgb, #0284c7 42%, var(--line) 58%);
  color: #e6f7ff;
}

.connections-collection-badge.is-empty {
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  color: var(--muted);
}

.connections-inline-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  justify-self: start;
}

.connections-inline-danger {
  background: transparent;
  color: var(--danger);
  border-color: var(--danger);
}

.connections-accept-summary {
  font-size: 11px;
  line-height: 1.3;
}

.connections-inline-form {
  display: inline;
  margin: 0;
}

.connections-contact-expander {
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--surface);
}

.connections-contact-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
  transition: background 120ms;
}

.connections-contact-expander-body {
  padding: 20px;
  background: var(--bg);
  border-top: 1px solid var(--line);
}

.connections-blocked-card {
  margin-bottom: 20px;
  border-left: 4px solid var(--danger);
}

.connections-blocked-summary {
  appearance: auto;
  -webkit-appearance: menulist;
  background: initial;
  border: initial;
  border-radius: initial;
  box-shadow: none;
  font-size: inherit;
  padding: initial;
  transition: none;
  display: flex;
  align-items: center;
  gap: 8px;
  appearance: auto;
  -webkit-appearance: menulist;
  background: initial;
  border: initial;
  border-radius: initial;
  box-shadow: none;
  font-size: inherit;
  padding: initial;
  transition: none;
  user-select: none;
}

  appearance: auto;
  -webkit-appearance: menulist;
  background: initial;
  border: initial;
  border-radius: initial;
  box-shadow: none;
  font-size: inherit;
  padding: initial;
  transition: none;
.connections-badge-danger-count {
  background: var(--danger);
  color: #fff;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  margin-left: 6px;
}

.connections-blocked-body {
  padding: 0 20px 20px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

.connections-blocked-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #fee2e2;
  border-radius: var(--r-sm);
  border: 1px solid var(--danger);
}

.connections-blocked-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--danger);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}

.connections-forward-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  background: #fff7ed;
  border-radius: var(--r-sm);
  border: 1px solid #fdba74;
}

.connections-forward-avatar {
  width: 40px;
  height: 40px;
  background: #ea580c;
  font-size: 14px;
}

.connections-forward-meta {
  font-size: 12px;
  margin: 2px 0 6px;
}

.connections-forward-note {
  padding: 8px 10px;
  background: rgba(255,255,255,.7);
  border: 1px solid #fed7aa;
  border-radius: var(--r-sm);
  font-size: 13px;
  line-height: 1.45;
}

.connections-search-form {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.connections-search-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 14px;
}

.connections-search-btn {
  padding: 8px 20px;
  background: var(--accent);
  color: #fff;
  border-radius: var(--r-sm);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.connections-results-grid {
  display: grid;
  gap: 8px;
  margin-bottom: 20px;
}

.connections-search-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--line-light);
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
}

.connections-search-avatar {
  width: 36px;
  height: 36px;
  font-size: 13px;
}

.connections-search-meta {
  font-size: 13px;
  margin: 0;
}

.connections-empty-note { margin-bottom: 16px; }

.connections-divider-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.connections-divider-line {
  flex: 1;
  height: 1px;
  background: var(--line);
}

.connections-divider-text {
  font-size: 12px;
  white-space: nowrap;
}

.connections-invite-form {
  display: grid;
  gap: 10px;
  max-width: 520px;
}

.connections-invite-inputs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.connections-invite-input {
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 14px;
}

.connections-invite-input-email {
  flex: 1;
  min-width: 180px;
}

.connections-invite-input-message {
  flex: 2;
  min-width: 180px;
}

.connections-invite-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.connections-invite-btn {
  padding: 8px 18px;
  background: var(--accent);
  color: #fff;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.connections-invite-link {
  font-size: 13px;
  color: var(--focus);
  text-decoration: none;
  font-weight: 600;
}

.connections-contacts-title {
  font-size: 1.05rem;
  font-weight: 700;
  padding: 16px 20px 0;
  margin-bottom: 14px;
}

.connections-contacts-count {
  font-weight: 400;
  font-size: 14px;
  margin-left: 8px;
}

.connections-contacts-empty { 
  padding: 36px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  margin-top: 12px;
  border: 1.5px dashed var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 50%, transparent);
}

.connections-alpha-index-wrap {
  gap: 4px;
  margin: 0 20px 20px;
  padding: 8px;
  background: var(--line-light);
  border-radius: var(--r-sm);
}

.connections-alpha-link {
  padding: 4px 10px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 600;
}

.connections-contacts-body { padding: 0 20px 20px; }

.connections-letter-section { margin-bottom: 32px; }

.connections-letter-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--line);
}

.collection-card {
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--line) 58%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 95%, transparent);
  box-shadow:
    0 18px 44px rgba(15, 23, 42, 0.1),
    0 1px 0 rgba(255, 255, 255, 0.04) inset;
}

.collection-card-default {
  background: color-mix(in srgb, var(--surface) 97%, rgba(37, 99, 235, 0.03));
  box-shadow:
    0 26px 62px rgba(56, 189, 248, 0.14),
    0 0 0 1px color-mix(in srgb, #38bdf8 32%, var(--line) 68%);
}

.collection-card-trusted {
  background: color-mix(in srgb, var(--surface) 95%, rgba(37, 99, 235, 0.04));
  box-shadow:
    0 24px 56px rgba(37, 99, 235, 0.09),
    0 1px 0 rgba(255, 255, 255, 0.05) inset;
}

.collection-card-inactive {
  opacity: 1;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  border-color: color-mix(in srgb, var(--line) 72%, transparent);
}

.collection-card-inactive .collections-card-title,
.collection-card-inactive .collections-card-desc,
.collection-card-inactive .collections-meta-block {
  opacity: 0.94;
}

.collection-card-inactive .collections-chip,
.collection-card-inactive .collections-detail-group-value {
  opacity: 0.96;
}

.collections-alert-gap { margin: 16px 0; }

.collections-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  margin-bottom: 22px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.collections-page-title {
  font-size: 2.625rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.22;
  margin: 0 0 .3em;
}

.collections-page-sub {
  margin-top: 8px;
  max-width: 74ch;
}

.collections-toolbar-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.collections-toolbar-search {
  min-width: 220px;
}

.collections-toolbar-filter {
  min-width: 140px;
}

.collections-create-form {
  display: none;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  border: 1px solid color-mix(in srgb, var(--line) 58%, transparent);
  border-radius: var(--r);
  padding: 18px;
  margin-bottom: 24px;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.09);
}

.collections-create-form .stack {
  gap: 14px;
}

.collections-create-form label {
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
  letter-spacing: 0;
  text-transform: none;
}

.collections-create-form input,
.collections-create-form select,
.collections-create-form textarea {
  background: color-mix(in srgb, var(--surface) 82%, rgba(255, 255, 255, 0.05));
  border: 1px solid color-mix(in srgb, var(--line) 72%, rgba(255, 255, 255, 0.06));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  transition: border-color 150ms, background 150ms, box-shadow 150ms;
}

.collections-create-form input:hover,
.collections-create-form select:hover,
.collections-create-form textarea:hover {
  background: color-mix(in srgb, var(--surface) 86%, rgba(255, 255, 255, 0.06));
  border-color: color-mix(in srgb, var(--line) 50%, rgba(255, 255, 255, 0.12));
}

.collections-create-form input:focus,
.collections-create-form select:focus,
.collections-create-form textarea:focus {
  outline: none;
  border-color: rgba(59, 130, 246, 0.55);
  background: color-mix(in srgb, var(--surface) 88%, rgba(255, 255, 255, 0.08));
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.12);
}

.collections-create-form input::placeholder,
.collections-create-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.34);
}

.collections-create-form textarea {
  min-height: 120px;
}

.collections-fieldset {
  border: none;
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  padding: 14px;
  border-radius: var(--r-sm);
}

.collections-legend { font-weight: 600; }
.collections-legend-sub { margin: 0 0 12px; }
.collections-cluster-grid { display: grid; gap: 10px; }

.collections-cluster-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}

.collections-cluster-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.collections-fields-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.collections-checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
}

.collections-default-label {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 10px;
  row-gap: 2px;
  align-items: start;
}

.collections-default-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  grid-row: 1 / span 2;
}

.collections-default-label strong {
  font-size: 14px;
  line-height: 1.25;
}

.collections-default-label .muted {
  font-size: 12px;
}

.collections-btn-row {
  display: flex;
  gap: 10px;
}

.collections-btn-row button[type="submit"] {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: #fff;
  border-radius: 10px;
  font-weight: 600;
  box-shadow: 0 8px 22px rgba(37, 99, 235, 0.25);
}

.collections-btn-row button[type="submit"]:hover {
  background: var(--accent-dk);
  border-color: var(--accent-dk);
}

.collections-create-form .btn-secondary {
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--line) 56%, transparent);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  color: var(--ink-2);
}

.collections-create-form .btn-secondary:hover {
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border-color: color-mix(in srgb, var(--line) 36%, transparent);
}

.collections-section-title { margin-top: 40px; }
.collections-section-title-own { margin-top: 44px; }
.collections-section-sub { margin-bottom: 20px; }

.collections-list-grid {
  display: grid;
  gap: 32px;
  width: 100%;
  max-width: none;
}

.collections-card-shell {
  display: block;
}

.collection-usage-list {
  display: grid;
  gap: 8px;
  margin-bottom: 32px;
}

.collection-usage-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
}

.collection-usage-main {
  display: flex;
  align-items: center;
  gap: 10px;
}

.collection-usage-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
  flex-shrink: 0;
}

.collection-usage-avatar-contact { background: var(--accent); }
.collection-usage-avatar-org { background: #6366f1; }

.collection-usage-link {
  text-decoration: none;
  white-space: nowrap;
}

.collection-empty-card {
  padding: 16px;
  text-align: center;
}

.collections-card-main { flex: 1; }

.collections-card-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.collections-card-title { margin: 0; }
.collections-card-desc { margin: 6px 0; }

.collections-card-meta-grid {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.collections-meta-block {
  min-width: 0;
}

.collections-meta-label {
  display: block;
  font-size: 12px;
  opacity: 0.6;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.collections-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.collections-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 90%, #2563eb 10%);
  color: var(--ink-2);
  font-size: 0.78rem;
  font-weight: 500;
  border: 1px solid color-mix(in srgb, var(--line) 64%, transparent);
}

.collections-exceptions-note {
  margin: 8px 0 0;
  font-size: 0.78rem;
  color: var(--muted);
}

.collections-detail-groups {
  display: grid;
  gap: 7px;
}

.collections-detail-groups p {
  margin: 0;
  display: block;
}

.collections-detail-group-key {
  display: block;
  font-size: 0.76rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 2px;
}

.collections-detail-group-value {
  color: var(--ink-2);
  font-size: 0.9rem;
  line-height: 1.32;
}

.collections-card-inline-meta {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--line) 44%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 12px;
  width: 100%;
  justify-content: flex-end;
}

.collections-side-stats {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.collections-side-stats:first-child::after {
  content: "•";
  margin-left: 2px;
  color: color-mix(in srgb, var(--muted) 70%, transparent);
}

.collections-side-stats strong {
  font-size: 0.9rem;
  color: color-mix(in srgb, var(--ink-2) 84%, var(--muted) 16%);
}

.collections-side-label {
  font-size: .7rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.collections-card-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 10px;
  align-items: center;
  margin-left: auto;
}

.collections-link-btn { text-decoration: none; }
.collections-inline-form { display: inline; margin: 0; }

.collections-card-actions .collections-inline-form {
  display: inline-flex;
  margin: 0;
}

/* Collections action palette:
   primary   -> Activate
   secondary -> Details/Edit
   ghost-danger -> Deactivate
   solid-danger -> Delete */

.collections-btn-details {
  padding: 6px 12px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  border: 1px solid color-mix(in srgb, var(--line) 52%, transparent);
  color: var(--ink);
}

.collections-btn-details:hover {
  background: color-mix(in srgb, #2563eb 86%, var(--surface) 14%);
  border-color: color-mix(in srgb, #2563eb 66%, var(--line) 34%);
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.28);
}

.collections-btn-activate {
  padding: 6px 12px;
  border-radius: 9px;
  background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
  border: 1px solid #2563eb;
  color: #ffffff;
  font-weight: 600;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.22);
}

.collections-btn-activate:hover {
  background: linear-gradient(180deg, #1d4ed8 0%, #1e40af 100%);
  border-color: #1d4ed8;
  color: #ffffff;
  box-shadow: 0 10px 22px rgba(29, 78, 216, 0.28);
}

.collections-btn-details:focus-visible,
.collections-btn-activate:focus-visible {
  outline: 2px solid color-mix(in srgb, #2563eb 58%, white 42%);
  outline-offset: 2px;
}

.collections-btn-deactivate {
  padding: 5px 8px;
  border-radius: 8px;
  color: rgba(248, 113, 113, 0.82);
  background: transparent;
  border: 1px solid transparent;
}

.collections-btn-deactivate:hover {
  color: rgba(252, 165, 165, 0.95);
  background: rgba(127, 29, 29, 0.08);
}

.collections-btn-delete {
  border-radius: 9px;
  padding: 6px 12px;
}

.collections-btn-star {
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--line) 56%, transparent);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  color: color-mix(in srgb, #fbbf24 72%, var(--muted) 28%);
  font-size: 0.88rem;
  line-height: 1;
}

.collections-btn-star:hover:not(:disabled) {
  color: #fde68a;
  border-color: color-mix(in srgb, #fbbf24 44%, var(--line) 56%);
  box-shadow: 0 6px 14px rgba(251, 191, 36, 0.18);
}

.collections-btn-star.is-default {
  background: color-mix(in srgb, #fbbf24 18%, var(--surface) 82%);
  border-color: color-mix(in srgb, #fbbf24 56%, var(--line) 44%);
  color: #facc15;
}

.collections-btn-star:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.collections-btn-edit,
.collections-btn-delete {
  padding: 6px 10px;
  border-radius: 8px;
}

.collections-section-title {
  margin-top: 48px;
  font-size: 1.26rem;
  font-weight: 640;
}

.collections-section-title-own { margin-top: 52px; }

.collections-edit-form {
  display: none;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid color-mix(in srgb, var(--line) 48%, transparent);
}

.collections-help-box {
  margin-top: 32px;
  padding: 16px;
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  border-radius: var(--r);
  border: none;
}

.collections-help-title { margin-top: 0; }

.collections-help-list {
  margin: 8px 0 0;
  line-height: 1.6;
}

.collections-rules-dialog {
  border: none;
  border-radius: 16px;
  padding: 0;
  max-width: 420px;
  width: min(92vw, 420px);
}

.collections-rules-dialog-form {
  padding: 20px;
  display: grid;
  gap: 14px;
}

.collections-rules-title {
  margin: 0 0 6px;
}

.collections-rules-sub { margin: 0; }

.collections-rules-options {
  display: grid;
  gap: 8px;
}

.collections-rules-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.badge-default { background: var(--accent); color: #fff; }
.badge-inactive { background: #6b7280; color: #fff; }
.badge-sensitive { background: #dc2626; color: #fff; }
.badge-cluster { background: #e0e7ff; color: #3730a3; }
.badge-cluster-exception { background: #fff7ed; color: #9a3412; }
.badge-base-field { background: #f3f4f6; color: #374151; }

@media (max-width: 960px) {
  .collections-toolbar {
    grid-template-columns: 1fr;
    align-items: center;
  }

  .collections-toolbar-controls {
    justify-content: flex-start;
  }

  .collections-card-meta-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .collections-card-inline-meta {
    display: grid;
    align-content: start;
    gap: 8px;
  }

  .collections-card-actions {
    justify-content: flex-start;
    margin-left: 0;
  }

  .collections-card-actions .small-btn {
    width: auto;
  }
}

/* ── 27. Responsive ──────────────────────────────────────────── */
@media (max-width: 760px) {
  .auth-landing { grid-template-columns: 1fr; }
  .auth-form-card { max-width: none; }

  /* Topbar: keep brand + user-menu on one row; hamburger shows nav */
  .topbar {
    padding: 0 16px;
    flex-wrap: nowrap;
  }

  .hamburger {
    display: inline-flex;
    order: 10;           /* right of brand, left of spacer */
    margin-right: 4px;
  }

  .topbar-spacer { order: 20; }
  .topbar-user-wrap { order: 30; }

  /* Primary nav: hidden drawer below topbar */
  .primary-nav {
    display: none;
    position: absolute;
    top: 74px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--sh2);
    z-index: 99;
    padding: 6px 0;
  }
  .primary-nav.open { display: flex; }

  .primary-nav .nav-link {
    padding: 12px 20px;
    border-radius: 0;
    font-size: 14px;
  }

  .container { margin: 8px auto; padding: 0 14px 24px; }
  .page      { padding: 24px 14px 44px; }
  .card      { padding: 18px; border-radius: 16px; }
  .two       { grid-template-columns: 1fr; }
  .hero-share-card { grid-template-columns: 1fr; }
  .profile-layout  { grid-template-columns: 1fr; }

  .profile-header-row,
  .cluster-editor-head,
  .cluster-card-head,
  .cluster-field-row,
  .profile-avatar-stack {
    flex-direction: column;
    align-items: flex-start;
  }

  .cluster-quick-bar    { grid-template-columns: 1fr; }
  .cluster-field-row    { grid-template-columns: 1fr; }
  .cluster-field-actions { flex-wrap: wrap; }

  /* Userdata responsive */
  .ud-identity-top { flex-direction: column; align-items: flex-start; }
  .ud-core-fields  { grid-template-columns: 1fr; }
  .ud-setup-grid   { grid-template-columns: 1fr; }
  .ud-cluster-grid { grid-template-columns: 1fr; }
  .ud-field-row    { grid-template-columns: minmax(70px, .7fr) minmax(0, 1.5fr) 28px; }

  input, select, textarea, button {
    min-height: 42px;
    font-size: 16px;
  }

  textarea { min-height: 90px; }

  .contact-avatar,
  .contact-avatar-img { width: 46px; height: 46px; }

  .list-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .contact-summary      { grid-template-columns: auto minmax(0, 1fr); }
  .contact-summary-meta { grid-column: 1 / -1; }
  .contact-details-grid { grid-template-columns: 1fr; }
  .small-label          { min-width: 100%; }
  .small-btn            { width: 100%; }
  .release-fields-grid  { grid-template-columns: 1fr; }
  .ud-save-row          { justify-content: stretch; }
  .ud-save-btn          { width: 100%; }
  .fields-grid          { grid-template-columns: 1fr; }
  .field-group-box      { grid-template-columns: 1fr; }

  /* Expanded details/collapsible content */
  details { padding: 12px 14px; }
  details ol,
  details ul { margin-left: 16px; }
  .collapsible-card summary { padding: 12px 14px; }
  .collapsible-card-body { padding: 12px 14px; }

  /* Hide username text in topbar — keep avatar + caret only */
  .topbar-username { display: none; }

  /* Reduce oversized page titles */
  .org-page-title,
  .collections-page-title,
  .connections-title { font-size: 1.6rem; letter-spacing: -0.02em; }

  /* Org page — stack toolbar and detail hero */
  .org-toolbar { grid-template-columns: 1fr; gap: 10px; }
  .org-toolbar-controls { justify-content: flex-start; }
  .org-detail-hero { flex-direction: column; }
  .org-stat-block { min-width: 0; }
  .org-create-form-stack { max-width: none; }
  .org-create-actions { flex-wrap: wrap; }

  /* Make info-table cells wrap long values (URLs, passwords) */
  .info-table td,
  .info-table th { word-break: break-all; overflow-wrap: break-word; }

  /* Fast-select: make menu font match mobile scale */
  .fast-select-trigger { font-size: 16px; }
  .fast-select-option  { font-size: 15px; padding: 11px 14px; }

  /* Connections — ensure pending actions wrap cleanly */
  .connections-pending-row { flex-wrap: wrap; }
  .connections-accept-row  { flex-wrap: wrap; }
  .connections-detail-row { grid-template-columns: 1fr; gap: 4px; }

  /* Collections card meta — stack to 1 col below 760 too (960 handles wider) */
  .collections-card-meta-grid { grid-template-columns: 1fr; }
  .collections-card-inline-meta { flex-direction: column; align-items: flex-start; }
  .collections-card-actions { flex-wrap: wrap; justify-content: flex-start; }

  /* Subpage back-row buttons full-width */
  .subpage-back-row { flex-wrap: wrap; }

  /* QR codes — scale down if generated at fixed pixel size */
  .qr-block img,
  .qr-block canvas { max-width: 100%; height: auto; }

  .qr-code-host,
  .connections-share-qr,
  .qr-code-frame {
    width: 100%;
    max-width: none;
  }

  /* Tab bars — allow wrapping on narrow screens */
  .tab-bar { flex-wrap: wrap; }

  /* Code blocks and pre — prevent horizontal overflow */
  pre { overflow-x: auto; max-width: 100%; }
}

/* ── Profile Page - New Cluster-based Layout ──────────────── */
.card-photo-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

.card-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #e2e8f0;
  border: 2px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  color: var(--muted);
  flex-shrink: 0;
  overflow: hidden;
}

.card-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.card-avatar-meta {
  flex: 1;
}

.card-avatar-name {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.3px;
  margin-bottom: 2px;
}

.card-avatar-sub {
  font-size: 13px;
  color: var(--muted);
}

.card-photo-btn {
  padding: 6px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color 150ms;
}

.card-photo-btn:hover {
  border-color: var(--muted-2);
}

.card-photo-input {
  display: none;
}

.dyn-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.dyn-field .field-lbl-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dyn-field-del {
  width: 18px;
  height: 18px;
  border: none;
  background: transparent;
  border-radius: 4px;
  color: var(--muted-2);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 100ms, background 120ms, color 120ms;
}

.dyn-field:hover .dyn-field-del {
  opacity: 1;
}

.dyn-field-del:hover {
  background: var(--danger-lt);
  color: var(--danger);
}

.dyn-label-input {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  border: none;
  background: transparent;
  outline: none;
  font-family: inherit;
  width: 100%;
  padding: 0;
}

.dyn-label-input:focus {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
  color: var(--focus);
}

.field-group-box {
  grid-column: 1 / -1;
  position: relative;
  border: 1px solid var(--line);
  border-left: 3px solid var(--focus);
  border-radius: var(--r-sm);
  padding: 22px 14px 14px 14px;
  margin-top: 10px;
  background: rgba(59, 130, 246, .02);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 20px;
}

.field-group-title {
  position: absolute;
  top: -10px;
  left: 12px;
  grid-column: 1 / -1;
  padding: 2px 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-2);
}

@media (max-width: 760px) {
  .field-group-box {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 20px 12px 12px 12px;
  }
}

.card-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 20px;
  background: var(--line-light);
  border-top: 1px solid var(--line);
}

.card-toolbar select {
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font: inherit;
  font-size: 12px;
  color: var(--ink-2);
  background: var(--surface);
  outline: none;
  cursor: pointer;
  flex: 1;
  min-width: 0;
}

.card-toolbar select:focus {
  border-color: var(--focus);
}

.toolbar-btn {
  padding: 6px 14px;
  background: var(--accent);
  border: none;
  border-radius: var(--r-sm);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  transition: background 120ms;
}

.toolbar-btn:hover {
  background: var(--accent-dk);
}

.section-hdr {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.section-title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.3px;
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 8px;
  background: var(--line-light);
  color: var(--muted);
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: linear-gradient(180deg, #2563EB 0%, #1D4ED8 100%);
  color: #fff;
  border: none;
  border-radius: var(--r-sm);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms;
}

.btn-primary:hover {
  background: linear-gradient(180deg, #1D4ED8 0%, #1E40AF 100%);
}

.presets-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
}

.presets-lbl {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
  margin-right: 2px;
}

.preset-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 13px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 99px;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color 120ms, background 120ms;
}

.preset-chip:hover {
  border-color: var(--accent);
  background: var(--line-light);
}

.preset-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.cluster-empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--muted);
  font-size: 13px;
  border: 1.5px dashed var(--line);
  border-radius: var(--r);
  background: color-mix(in srgb, var(--surface) 50%, transparent);
  transition: border-color .2s ease, background .2s ease;
}

.cluster-empty:hover {
  border-color: var(--muted-2);
  background: var(--line-light);
}

.cluster-empty-icon {
  font-size: 42px;
  display: block;
  margin-bottom: 12px;
  opacity: 0.6;
}

.cluster-empty strong {
  display: block;
  color: var(--ink-2);
  margin-bottom: 6px;
  font-weight: 600;
}

.save-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  padding-top: 6px;
}

.save-hint {
  font-size: 12px;
  color: var(--muted);
}

.btn-save {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 28px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--r-sm);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--sh1);
  transition: background 120ms, box-shadow 150ms;
}

.btn-save:hover {
  background: var(--accent-dk);
  box-shadow: var(--sh2);
}

.mt-20 { margin-top: 20px; }
.mt-28 { margin-top: 28px; }

/* ---------- UX improvements 2026-04-29 ---------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink, #0f172a);
  color: #fff;
  padding: 8px 14px;
  border-radius: 4px;
  font-weight: 600;
  z-index: 10000;
}
.skip-link:focus {
  left: 12px;
  top: 12px;
  outline: 2px solid var(--focus, #3b82f6);
  outline-offset: 2px;
}

/* Visible keyboard focus across interactive elements */
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--focus, #3b82f6);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Auto-fit grid: replaces .grid.two on responsive pages */
.grid.auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* Responsive QR block (identifiers, sync) */
.qr-block,
#onetime-qrcode {
  max-width: 100%;
}
#onetime-qrcode img,
#onetime-qrcode canvas {
  max-width: 100%;
  height: auto !important;
}

/* Mobile: collapse Base Infos 3-col grid */
@media (max-width: 580px) {
  .fields-grid[style*="repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
  }
}


/* %% 17. Organisation page layout %%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
.org-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
  margin-top: 24px;
}