:root {
    --bg: #faf9f7;
    --surface: #ffffff;
    --border: #e8e4de;
    --text-primary: #1a1815;
    --text-secondary: #6b6560;
    --text-muted: #a09890;
    --accent: #2c4a3e;
    --accent-light: #e8f0ec;
    --gold: #b8923a;
    --nav-height: 54px;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }

  body {
    font-family: Arial, sans-serif;
    background: var(--bg);
    color: var(--text-primary);
    min-height: 100vh;
  }

  /* ── NAV ── */
  nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    height: var(--nav-height);
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center;
    padding: 0 32px;
    justify-content: space-between;
  }
  .nav-brand {
    font-family: Georgia, serif;
    font-size: 16px; font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--text-primary);
    text-decoration: none;
  }
  .nav-links { display: flex; gap: 28px; }
  .nav-links a {
    font-size: 12px; font-weight: 400;
    font-family: Arial, sans-serif;
    letter-spacing: 0.03em;
    color: var(--text-secondary);
    text-decoration: none;
  }
  .nav-links a:hover { color: var(--text-primary); }
  .nav-links a.active {
    color: var(--text-primary);
    font-weight: 500;
    border-bottom: 2px solid #2d6e4a;
    padding-bottom: 2px;
  }

  /* ── PAGE ── */
  .page {
    padding-top: calc(var(--nav-height) + 32px);
    padding-bottom: 80px;
    max-width: 1600px;
    margin: 0 auto;
    padding-left: 2rem;
    padding-right: 2rem;
  }

  /* ── HEADER BAR ── */
  .page-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 20px;
    gap: 16px;
  }
  .page-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .page-title {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 22px;
    font-weight: 500;
    color: var(--text-primary);
  }
  .page-count-pill {
    font-family: Arial, sans-serif;
    font-size: 11px;
    color: var(--text-muted);
    background: #f0ece6;
    border-radius: 20px;
    padding: 3px 10px;
    letter-spacing: 0.04em;
  }

  /* ── IMPORT ── */
  .import-btn {
    font-size: 11px;
    font-family: Arial, sans-serif;
    letter-spacing: 0.07em;
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 14px;
    cursor: pointer;
    background: none;
    transition: color 0.2s, border-color 0.2s;
    white-space: nowrap;
  }
  .import-btn:hover { color: var(--text-secondary); border-color: var(--text-muted); }
  .import-status {
    font-size: 11px;
    font-family: Arial, sans-serif;
    color: var(--accent);
    margin-top: 4px;
    min-height: 16px;
    text-align: right;
  }

  /* ── ACTIVITY MATCH BADGE ── */
  .activity-match-badge {
    display: inline-block;
    background: #E6F1FB;
    color: #0C447C;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
    white-space: nowrap;
    letter-spacing: 0.01em;
  }

  /* ── SEARCH ROW ── */
  .search-row {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
    align-items: center;
  }
  .search-wrap {
    position: relative;
    flex: 1;
  }
  .search-wrap svg {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    color: var(--text-muted); pointer-events: none;
  }
  .search-input {
    width: 100%;
    padding: 10px 14px 10px 40px;
    font-family: Arial, sans-serif;
    font-size: 13px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text-primary);
    outline: none;
    transition: border-color 0.2s;
  }
  .search-input:focus { border-color: var(--accent); }
  .search-input::placeholder { color: var(--text-muted); }
  .filter-btn {
    padding: 10px 16px;
    font-size: 12px;
    font-family: Arial, sans-serif;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.2s, color 0.2s;
  }
  .filter-btn:hover { border-color: var(--text-muted); color: var(--text-primary); }
  .filter-btn.active { border-color: var(--accent); color: var(--accent); }

  /* ── CHIPS ROW ── */
  .chips-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    align-items: center;
  }
  .chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--accent-light);
    border: 1px solid #c8ddd5;
    border-radius: 20px;
    font-size: 12px;
    font-family: Arial, sans-serif;
    color: var(--accent);
  }
  .chip-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.07em; }
  .chip-x {
    background: none; border: none; cursor: pointer;
    color: var(--accent); font-size: 14px; line-height: 1;
    padding: 0; margin-left: 2px;
  }
  .chip-x:hover { color: var(--text-primary); }

  /* ── FILTER PANEL ── */
  .filter-panel-overlay {
    display: none;
    position: fixed; inset: 0; z-index: 200;
    background: rgba(26,24,21,0.45);
    backdrop-filter: blur(3px);
    align-items: center;
    justify-content: center;
    padding: 24px;
  }
  .filter-panel-overlay.open { display: flex; }
  .filter-panel {
    background: var(--surface);
    border-radius: 14px;
    width: 100%; max-width: 420px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.16);
    animation: slideUp 0.2s ease;
  }
  .filter-panel-header {
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .filter-panel-title {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 18px;
    font-weight: 500;
    color: var(--text-primary);
  }
  .filter-panel-body {
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  .filter-section-label {
    font-family: Arial, sans-serif;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 6px;
  }
  .typeahead-wrap {
    position: relative;
  }
  .typeahead-input {
    width: 100%;
    padding: 9px 12px;
    font-size: 13px;
    font-family: Arial, sans-serif;
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg);
    outline: none;
    transition: border-color 0.2s;
  }
  .typeahead-input:focus { border-color: var(--accent); }
  .suggestions-dropdown {
    position: absolute;
    top: calc(100% + 2px);
    left: 0; right: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.09);
    z-index: 10;
    max-height: 180px;
    overflow-y: auto;
    display: none;
  }
  .suggestion-item {
    padding: 9px 14px;
    font-size: 13px;
    font-family: Arial, sans-serif;
    color: var(--text-secondary);
    cursor: pointer;
  }
  .suggestion-item:hover { background: #f7f5f2; color: var(--text-primary); }
  .filter-panel-footer {
    padding: 14px 24px 20px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .btn-clear-all {
    font-size: 12px;
    font-family: Arial, sans-serif;
    color: var(--text-muted);
    background: none;
    border: none;
    cursor: pointer;
    letter-spacing: 0.03em;
  }
  .btn-clear-all:hover { color: var(--text-secondary); }

  .status-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .status-chip {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border: 1px solid var(--border);
    border-radius: 20px;
    font-size: 12px;
    font-family: Arial, sans-serif;
    color: var(--text-secondary);
    background: var(--bg);
    cursor: pointer;
    user-select: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
  }
  .status-chip.active {
    background: var(--accent-light);
    border-color: #c8ddd5;
    color: var(--accent);
  }

  /* ── LAST CONTACT CELL ── */
  .last-contact-display {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
  }
  .lc-pill {
    display: inline-block;
    font-size: 10px;
    font-family: Arial, sans-serif;
    font-weight: 500;
    letter-spacing: 0.06em;
    border-radius: 4px;
    padding: 2px 6px;
  }
  .lc-pill-email   { background: #e6f1fb; color: #185fa5; }
  .lc-pill-meeting { background: #e1f5ee; color: #0f6e56; }
  .lc-pill-virtual { background: #fef0d0; color: #8a6a00; }

  /* ── LAST CONTACT INLINE EDITOR ── */
  .lc-editor {
    display: inline-flex;
    flex-direction: column;
    gap: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.10);
    min-width: 200px;
  }
  .date-picker-inline {
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 5px 8px;
    font-size: 12px;
    font-family: Arial, sans-serif;
    color: var(--text-primary);
    background: var(--bg);
    outline: none;
    width: 100%;
  }
  .date-picker-inline:focus { border-color: var(--accent); }
  .lc-type-toggle {
    display: flex;
    gap: 6px;
  }
  .lc-type-btn {
    flex: 1;
    padding: 5px 0;
    font-size: 11px;
    font-family: Arial, sans-serif;
    letter-spacing: 0.05em;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: none;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
  }
  .lc-type-btn:hover { border-color: var(--text-muted); }
  .lc-type-btn.active-email   { background: #e6f1fb; color: #185fa5; border-color: #a8cef0; }
  .lc-type-btn.active-meeting { background: #e1f5ee; color: #0f6e56; border-color: #8fd4b8; }
  .lc-type-btn.active-virtual { background: #fef0d0; color: #8a6a00; border-color: #e8c97a; }
  .lc-editor-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
  }
  .lc-save-btn {
    padding: 4px 12px;
    font-size: 11px;
    font-family: Arial, sans-serif;
    color: #fff;
    background: var(--accent);
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  .lc-save-btn:hover { opacity: 0.88; }
  .lc-cancel-btn {
    padding: 4px 10px;
    font-size: 11px;
    font-family: Arial, sans-serif;
    color: var(--text-muted);
    background: none;
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
  }

  /* ── OVERDUE / SNOOZE ROW HIGHLIGHTS ── */
  tr.row-overdue td { background: #fac5c5; }
  tr.row-snoozed td { background: #fef0d0; }
  tr.row-selected td { background: #fff3f3; }
  #deleteSelectedBtn:disabled, #exportSelectedBtn:disabled { opacity: 0.45; cursor: default; pointer-events: none; }

  /* ── FOLLOW-UP TRACKING SECTION ── */
  .overdue-section {
    border-top: 1px solid var(--border);
    padding-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .overdue-section-title {
    font-family: Arial, sans-serif;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .overdue-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }
  .overdue-label {
    font-size: 12px;
    color: var(--text-secondary);
    min-width: 90px;
  }
  .threshold-group { display: flex; gap: 4px; }
  .threshold-btn {
    padding: 4px 10px;
    font-size: 11px;
    font-family: Arial, sans-serif;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: none;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
  }
  .threshold-btn:hover { border-color: var(--text-muted); }
  .threshold-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
  .snooze-btn {
    padding: 5px 12px;
    font-size: 11px;
    font-family: Arial, sans-serif;
    letter-spacing: 0.03em;
    color: #b8923a;
    background: #fdf6e8;
    border: 1px solid #e8d4a0;
    border-radius: 4px;
    cursor: pointer;
  }
  .snooze-btn:hover { background: #faefd0; }
  .snooze-until {
    font-size: 11px;
    color: var(--text-muted);
  }
  .ft-confirm-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #f7f5f2;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 12px;
    color: var(--text-secondary);
  }
  .ft-confirm-bar button {
    padding: 4px 12px;
    font-size: 11px;
    font-family: Arial, sans-serif;
    border-radius: 4px;
    cursor: pointer;
  }
  .ft-confirm-save {
    background: var(--accent); color: #fff; border: none;
  }
  .ft-confirm-save:hover { opacity: 0.88; }
  .ft-confirm-cancel {
    background: none; color: var(--text-secondary); border: 1px solid var(--border);
  }
  .ft-confirm-cancel:hover { border-color: var(--text-muted); }
  .overdue-toggle-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
  }

  /* ── TABLE ── */
  .table-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
  }
  .loc-toggle-btn {
    font-size: 11px;
    font-family: Arial, sans-serif;
    letter-spacing: 0.03em;
    color: var(--text-muted);
    background: none;
    border: 0.5px solid var(--border);
    border-radius: 5px;
    padding: 4px 10px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
  }
  .loc-toggle-btn:hover { color: var(--text-secondary); border-color: var(--text-muted); }

  .table-wrap {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
  }
  .table-scroll {
    overflow-x: auto;
  }

  table {
    width: 100%;
    min-width: 900px;
    border-collapse: collapse;
  }

  /* Location column visibility toggle */
  .table-wrap.loc-hidden .col-location { display: none; }

  thead tr {
    border-bottom: 1px solid var(--border);
    background: #f7f5f2;
  }

  th {
    padding: 12px 20px;
    text-align: left;
    font-family: Arial, sans-serif;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
  }
  th:hover { color: var(--text-secondary); }
  th.sorted { color: var(--accent); }

  tbody tr {
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.15s;
  }
  tbody tr:last-child { border-bottom: none; }
  tbody tr:hover { background: #f7f5f2; }

  td {
    padding: 14px 20px;
    font-size: 13px;
    color: #1a1a1a;
    font-weight: 400;
    vertical-align: middle;
  }

  .td-name {
    white-space: nowrap;
    vertical-align: middle;
  }
  .td-name-first {
    white-space: nowrap;
    vertical-align: middle;
  }
  .td-name .honorific {
    display: block;
    font-size: 10px;
    color: var(--gold);
    letter-spacing: 0.04em;
    margin-bottom: 1px;
  }
  .td-name-first .contact-prefix {
    position: relative;
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: #BA7517;
    line-height: 1.2;
  }
  .td-name-first .contact-first {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-primary);
  }

  .td-firm {
    max-width: 220px;
  }

  .td-title {
    max-width: 200px;
  }

  .td-city, .td-country {
    white-space: nowrap;
  }

  .td-contact {
    font-family: Arial, sans-serif;
  }

  .modal-map {
    margin-top: 12px;
    border-radius: 8px;
    overflow: hidden;
    line-height: 0;
  }
  .td-contact a {
    color: var(--text-secondary);
    text-decoration: none;
  }
  .td-contact a:hover { color: var(--accent); }

  .has-notes {
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--gold);
  }

  .no-results {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
    font-size: 14px;
  }

  /* ── MODAL ── */
  .modal-overlay {
    display: none;
    position: fixed; inset: 0; z-index: 200;
    background: rgba(26,24,21,0.55);
    backdrop-filter: blur(4px);
    align-items: center;
    justify-content: center;
    padding: 24px;
  }
  .modal-overlay.open { display: flex; }

  .modal {
    background: var(--surface);
    border-radius: 16px;
    width: 100%; max-width: 600px;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 24px 80px rgba(0,0,0,0.18);
    animation: slideUp 0.2s ease;
  }
  @keyframes slideUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .modal-header {
    padding: 28px 32px 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
  }
  .modal-name {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 30px; font-weight: 500;
    line-height: 1.2;
    color: var(--text-primary);
  }
  .modal-title {
    font-size: 14px;
    color: var(--text-muted);
    margin-top: 4px;
  }
  .modal-firm {
    font-size: 14px;
    color: var(--text-muted);
    font-weight: 500;
    margin-top: 4px;
  }
  .modal-dept {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 3px;
  }
  .modal-avatar {
    width: 80px; height: 80px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
  }
  .modal-avatar-mono {
    width: 80px; height: 80px;
    border-radius: 50%;
    background: var(--gold);
    display: flex; align-items: center; justify-content: center;
    font-size: 26px; font-weight: 500;
    color: #fff;
    font-family: Georgia, serif;
    flex-shrink: 0;
  }
  .modal-close {
    background: none; border: none;
    cursor: pointer; padding: 4px;
    color: var(--text-muted);
    font-size: 22px; line-height: 1;
    flex-shrink: 0;
  }
  .modal-close:hover { color: var(--text-primary); }

  .modal-body {
    padding: 24px 32px 32px;
    display: flex; flex-direction: column; gap: 20px;
  }

  .detail-row {
    display: flex; gap: 8px;
    align-items: flex-start;
  }
  .detail-label {
    font-family: Arial, sans-serif;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    min-width: 80px;
    margin-top: 2px;
  }
  .detail-value {
    font-size: 14px;
    color: var(--text-secondary);
    flex: 1;
  }
  .detail-value a {
    color: var(--accent);
    text-decoration: none;
  }
  .detail-value a:hover { text-decoration: underline; }

  .notes-box {
    background: #f7f5f2;
    border-radius: 10px;
    padding: 16px 20px;
  }

  /* ── RELATIONSHIP SUMMARY ── */
  .rs-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .rs-btn {
    font-size: 11px;
    font-family: Arial, sans-serif;
    letter-spacing: 0.05em;
    color: #185fa5;
    background: none;
    border: 1px solid #185fa5;
    border-radius: 6px;
    padding: 5px 12px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.15s;
  }
  .rs-btn:hover { background: #e6f1fb; }
  .rs-btn:disabled { opacity: 0.5; cursor: default; }
  .rs-output {
    margin-top: 10px;
    background: #f2f5fb;
    border-radius: 8px;
    padding: 14px 16px;
    font-size: 13px;
    font-family: Arial, sans-serif;
    line-height: 1.65;
    color: var(--text-secondary);
    white-space: pre-wrap;
  }
  .rs-generated {
    font-size: 11px;
    font-family: Arial, sans-serif;
    color: var(--text-muted);
    margin-top: 5px;
  }
  .notes-label {
    font-family: Arial, sans-serif;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 10px;
  }
  .notes-text {
    font-size: 13px;
    line-height: 1.65;
    color: var(--text-secondary);
    white-space: pre-wrap;
  }

  .empty-state {
    padding: 48px 32px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
  }

  /* ── MODAL FOOTER ── */
  .modal-footer {
    padding: 16px 32px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .btn-edit {
    padding: 8px 20px;
    font-size: 12px;
    font-family: Arial, sans-serif;
    letter-spacing: 0.05em;
    color: #fff;
    background: var(--accent);
    border: none;
    border-radius: 6px;
    cursor: pointer;
  }
  .btn-edit:hover { opacity: 0.88; }
  .btn-delete {
    padding: 8px 20px;
    font-size: 12px;
    font-family: Arial, sans-serif;
    letter-spacing: 0.05em;
    color: #b83232;
    background: none;
    border: 1px solid #e0c0c0;
    border-radius: 6px;
    cursor: pointer;
  }
  .btn-delete:hover { background: #fff0f0; border-color: #b83232; }

  /* ── NEW CONTACT DROPDOWN ── */
  .new-contact-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }
  .new-contact-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.10);
    min-width: 160px;
    z-index: 150;
    overflow: hidden;
  }
  .new-contact-option {
    padding: 10px 16px;
    font-size: 12px;
    font-family: Arial, sans-serif;
    color: var(--text-secondary);
    cursor: pointer;
    letter-spacing: 0.03em;
  }
  .new-contact-option:hover {
    background: #f7f5f2;
    color: var(--text-primary);
  }
  .new-contact-option + .new-contact-option {
    border-top: 1px solid var(--border);
  }

  /* ── MANUAL ENTRY FORM ── */
  .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .form-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }
  .form-field.full {
    grid-column: 1 / -1;
  }
  .form-label {
    font-family: Arial, sans-serif;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .form-input {
    padding: 9px 12px;
    font-size: 13px;
    font-family: Arial, sans-serif;
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg);
    outline: none;
    transition: border-color 0.2s;
  }
  .form-input:focus { border-color: var(--accent); }
  .form-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 8px;
  }
  .btn-cancel {
    padding: 9px 20px;
    font-size: 12px;
    font-family: Arial, sans-serif;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    background: none;
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
  }
  .btn-cancel:hover { border-color: var(--text-muted); color: var(--text-primary); }
  .btn-save {
    padding: 9px 20px;
    font-size: 12px;
    font-family: Arial, sans-serif;
    letter-spacing: 0.05em;
    color: #fff;
    background: var(--accent);
    border: none;
    border-radius: 6px;
    cursor: pointer;
  }
  .btn-save:hover { opacity: 0.88; }

  /* ── ACTIVITY LOG ── */
  .al-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
  }
  .al-modal-subtitle {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 4px;
  }
  .al-log-btn {
    padding: 7px 14px;
    font-size: 12px;
    font-family: Arial, sans-serif;
    letter-spacing: 0.04em;
    color: var(--accent);
    background: none;
    border: 1px solid var(--accent);
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .al-log-btn:hover { background: var(--accent-light); }
  .al-entry {
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
  }
  .al-entry:last-child { border-bottom: none; }
  .al-entry-top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
  }
  .al-entry-date {
    font-size: 12px;
    color: var(--text-muted);
  }
  .al-entry-firm {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
  }
  .al-entry-preview {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .al-view-link {
    font-size: 11px;
    color: var(--accent);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    letter-spacing: 0.02em;
  }
  .al-view-link:hover { text-decoration: underline; }
  .al-empty {
    padding: 40px 0;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
  }
  .al-form-body {
    padding: 24px 32px 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .md-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 14px;
  }
  .md-label {
    font-family: Arial, sans-serif;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .md-value {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.55;
    white-space: pre-wrap;
  }

  /* ── ATTENDEE / RECIPIENT CHIP TYPEAHEAD ── */
  .la-chips-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg);
    cursor: text;
    min-height: 40px;
    align-items: center;
  }
  .la-chips-wrap:focus-within { border-color: var(--accent); }
  .la-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--accent-light);
    color: var(--accent);
    font-size: 12px;
    padding: 3px 8px 3px 10px;
    border-radius: 20px;
    white-space: nowrap;
  }
  .la-chip-x {
    background: none; border: none; cursor: pointer;
    color: var(--accent); font-size: 15px; line-height: 1;
    padding: 0; opacity: 0.55;
  }
  .la-chip-x:hover { opacity: 1; }
  .la-typeahead-input {
    border: none; outline: none; background: transparent;
    font-size: 13px; font-family: Arial, sans-serif;
    color: var(--text-primary); min-width: 100px; flex: 1;
    white-space: nowrap; overflow: hidden;
    cursor: text; line-height: 1.4;
  }
  .la-typeahead-input:empty::before {
    content: attr(data-placeholder);
    color: var(--text-muted);
    pointer-events: none;
  }
  .la-suggestions {
    position: absolute; top: calc(100% + 2px); left: 0; right: 0;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.10);
    z-index: 350; max-height: 200px; overflow-y: auto; display: none;
  }
  .la-suggestion-item {
    padding: 9px 14px; font-size: 13px; cursor: pointer;
    color: var(--text-secondary);
  }
  .la-suggestion-item:hover { background: #f7f5f2; color: var(--text-primary); }
  .la-suggestion-item + .la-suggestion-item { border-top: 1px solid var(--border); }
  .la-suggestion-freetext { font-style: italic; color: var(--text-muted); }
  .al-entry-attendees {
    font-size: 12px; color: var(--text-secondary);
    margin-top: 3px;
  }

  /* ── COMPANY TYPEAHEAD IN CONTACT FORM ── */
  .co-typeahead-wrap { position: relative; }
  .co-suggestions-dropdown {
    position: absolute; top: calc(100% + 2px); left: 0; right: 0;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 6px; box-shadow: 0 6px 20px rgba(0,0,0,0.09);
    z-index: 320; max-height: 220px; overflow-y: auto; display: none;
  }
  .co-suggestion-item {
    padding: 9px 14px; font-size: 13px; font-family: Arial, sans-serif;
    color: var(--text-secondary); cursor: pointer;
  }
  .co-suggestion-item:hover { background: #f7f5f2; color: var(--text-primary); }
  .co-add-option {
    padding: 9px 14px; font-size: 13px; font-family: Arial, sans-serif;
    color: var(--text-muted); cursor: pointer; border-top: 1px solid var(--border);
  }
  .co-add-option:hover { background: #f7f5f2; color: var(--accent); }

  /* ── ADD COMPANY MODAL (from contacts) ── */
  .acf-section-label {
    font-family: Arial, sans-serif; font-size: 10px; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--text-muted);
    grid-column: 1 / -1; padding-top: 4px; margin-bottom: -4px;
  }