/* ── Reset & Base ── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      /* ── Reportworq Brand Palette ── */
      --teal:            #08594A;
      --teal-80:         #396f64;
      --teal-light:      #37A686;
      --teal-light-20:   #eaf6f2;
      --teal-light-40:   #c5e9df;
      --orange:          #F55E31;
      --orange-light:    #fde8e1;
      --navy:            #082868;
      --dark-blue:       #002C86;
      --blue:            #3143A7;
      --blue-light:      #e8ebf7;
      --charcoal-01:     #A6A6A6;
      --charcoal-02:     #3B3B3B;
      /* ── Neutrals ── */
      --gray-50:         #F8F9FA;
      --gray-100:        #F1F3F5;
      --gray-200:        #E9ECEF;
      --gray-300:        #DEE2E6;
      --gray-400:        #CED4DA;
      --gray-500:        #ADB5BD;
      --gray-600:        #6C757D;
      --gray-700:        #495057;
      --gray-800:        #343A40;
      --gray-900:        #212529;
      /* ── Layout ── */
      --radius-sm:       6px;
      --radius-md:       10px;
      --radius-lg:       14px;
      --shadow-sm:       0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
      --shadow-md:       0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.06);
    }
    html { font-size: 16px; }
    body {
      font-family: 'Roboto', Arial, sans-serif;
      background: var(--gray-50);
      color: var(--charcoal-02);
      min-height: 100vh;
      line-height: 1.6;
    }
    h1, h2, h3, h4 {
      font-family: 'Trebuchet MS', 'Trebuchet', Arial, sans-serif;
    }

    /* ── Top Nav ── */
    /* ── Top bar ── */
    .topbar {
      background: var(--teal);
      padding: 0 1.5rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 60px;
      flex-shrink: 0;
      box-shadow: 0 2px 8px rgba(0,0,0,.15);
      position: sticky; top: 0; z-index: 100;
    }
    .topbar-brand { display: flex; align-items: center; gap: 16px; text-decoration: none; }
    .topbar-logo img { height: 44px; width: auto; display: block; filter: brightness(0) invert(1); }
    .topbar-logo span { display: none; font-family: 'Trebuchet MS', Arial, sans-serif; font-size: 16px; font-weight: 700; color: #fff; }
    .topbar-divider { width: 1px; height: 22px; background: rgba(255,255,255,.3); }
    .topbar-product { display: flex; flex-direction: column; gap: 1px; }
    .topbar-product-name { font-family: 'Trebuchet MS', Arial, sans-serif; font-size: 14px; font-weight: 700; color: #fff; letter-spacing: .3px; }
    .topbar-product-sub  { font-size: 10px; color: rgba(255,255,255,.65); letter-spacing: .5px; text-transform: uppercase; }
    .topbar-right { display: flex; align-items: center; gap: 10px; }
    .topbar-user   { font-size: 12px; color: rgba(255,255,255,.85); background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); border-radius: 999px; padding: 5px 12px; }
    .topbar-logout { font-size: 12px; color: #fff; text-decoration: none; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); border-radius: 999px; padding: 5px 12px; }
    .topbar-logout:hover { background: rgba(255,255,255,.22); }

    /* ── App layout: sidebar + content ── */
    .app-layout { display: flex; min-height: calc(100vh - 104px); }

    /* ── Sidebar ── */
    .sidebar {
      width: 240px; flex-shrink: 0;
      background: #fff; border-right: 1px solid var(--gray-200);
      padding: 1.25rem 0;
      position: sticky; top: 60px;
      height: calc(100vh - 60px); overflow-y: auto;
    }
    .sidebar-nav { display: flex; flex-direction: column; }
    .sidebar-group { padding-bottom: .75rem; }
    .sidebar-group-label {
      font-size: 10px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase;
      color: var(--gray-400); padding: .5rem 1.25rem .25rem;
    }
    .sidebar-link {
      display: flex; align-items: center; gap: 9px;
      padding: 7px 1.25rem;
      font-family: 'Roboto', Arial, sans-serif;
      font-size: 13px; font-weight: 500;
      color: var(--gray-600);
      text-decoration: none;
      border-left: 3px solid transparent;
      transition: background .12s, color .12s, border-color .12s;
    }
    .sidebar-link svg { width: 15px; height: 15px; flex-shrink: 0; opacity: .65; transition: opacity .12s; }
    .sidebar-link:hover  { background: var(--teal-light-20); color: var(--teal); }
    .sidebar-link:hover svg { opacity: 1; }
    .sidebar-link.active { background: var(--teal-light-20); color: var(--teal); border-left-color: var(--teal); font-weight: 700; }
    .sidebar-link.active svg { opacity: 1; }
    .sidebar-group-bottom { border-top: 1px solid var(--gray-200); padding-top: .75rem; margin-top: .5rem; }
    .sidebar-content { flex: 1; min-width: 0; overflow-x: hidden; }

    /* ── Content area padding ── */
    .page { max-width: 960px; padding: 2rem 2rem 4rem; }


/* ── Hero ── */
    .hero { margin-bottom: 2rem; }
    .hero h1 {
      font-size: 26px; font-weight: 700;
      color: var(--teal);
      margin-bottom: 6px;
    }
    .hero p { font-size: 14px; color: var(--gray-600); max-width: 600px; }

    /* ── Input Card ── */
    .input-card {
      background: #fff;
      border: 1px solid var(--gray-200);
      border-top: 3px solid var(--teal);
      border-radius: var(--radius-lg);
      padding: 1.5rem;
      margin-bottom: 1.5rem;
      box-shadow: var(--shadow-sm);
    }
    .input-card h2 { font-size: 14px; font-weight: 600; color: var(--teal); margin-bottom: 1rem; }
    .input-row { display: flex; gap: 12px; align-items: center; }
    .companies-input {
	  flex: 1;
	  height: 44px;
	  padding: 0 14px;
	  font-family: 'Roboto', Arial, sans-serif;
	  font-size: 14px;
	  color: var(--charcoal-02);
	  border: 1.5px solid var(--gray-300);
	  border-radius: var(--radius-md);
	  background: #fff;
	}

	.companies-input:focus {
	  outline: none;
	  border-color: var(--teal-light);
	  box-shadow: 0 0 0 3px rgba(55,166,134,.15);
	}

	.company-input::placeholder {
		color: var(--gray-400);
	}
    .btn-analyze {
      padding: 0 24px;
      height: 44px;
      background: var(--teal);
      color: #fff;
      border: none;
      border-radius: var(--radius-md);
      font-family: 'Trebuchet MS', Arial, sans-serif;
      font-size: 14px; font-weight: 700;
      cursor: pointer;
      white-space: nowrap;
      transition: background .15s, transform .1s;
      display: flex; align-items: center; gap: 8px;
    }
    .btn-analyze:hover:not(:disabled) { background: var(--teal-80); }
    .btn-analyze:active:not(:disabled) { transform: scale(.98); }
    .btn-analyze:disabled { opacity: .5; cursor: default; }
    .btn-analyze svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; }
    .input-hint { font-size: 12px; color: var(--gray-500); margin-top: 8px; }

    /* ── Status & Error ── */
    .status-bar {
      display: none;
      align-items: center;
      gap: 10px;
      padding: 12px 16px;
      background: var(--teal-light-20);
      border: 1px solid var(--teal-light-40);
      border-radius: var(--radius-md);
      font-size: 13px; color: var(--teal);
      margin-bottom: 1rem;
    }
    .status-bar.show { display: flex; }
    .spinner {
      width: 16px; height: 16px;
      border: 2px solid var(--teal-light-40);
      border-top-color: var(--teal-light);
      border-radius: 50%;
      animation: spin .7s linear infinite;
      flex-shrink: 0;
    }
    @keyframes spin { to { transform: rotate(360deg); } }
    .error-bar {
      display: none;
      padding: 12px 16px;
      background: var(--orange-light);
      border: 1px solid #f5c4b3;
      border-radius: var(--radius-md);
      font-size: 13px; color: #a33a1a;
      margin-bottom: 1rem;
    }
    .error-bar.show { display: block; }

    /* ── Actions Bar ── */
    .actions-bar { display: none; gap: 8px; margin-bottom: 1rem; flex-wrap: wrap; }
    .actions-bar.show { display: flex; }
    .btn-secondary {
      padding: 0 16px; height: 36px;
      background: #fff; color: var(--teal);
      border: 1.5px solid var(--teal);
      border-radius: var(--radius-md);
      font-family: 'Roboto', Arial, sans-serif;
      font-size: 13px; font-weight: 500;
      cursor: pointer;
      display: flex; align-items: center; gap: 6px;
      transition: background .12s;
    }
    .btn-secondary:hover { background: var(--teal-light-20); }
    .btn-secondary svg { width: 14px; height: 14px; stroke: var(--teal); }

    /* ── Results Table ── */
    .results-section { display: none; margin-bottom: 2rem; }
    .results-section.show { display: block; }
    .section-header {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 10px;
    }
    .section-title {
      font-family: 'Trebuchet MS', Arial, sans-serif;
      font-size: 13px; font-weight: 700; color: var(--teal);
      text-transform: uppercase; letter-spacing: .05em;
    }
    .table-wrap { overflow-x: auto; background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
    table { width: 100%; border-collapse: collapse; font-size: 13px; }
    thead { background: var(--teal); border-bottom: none; }
    th {
      text-align: left; padding: 10px 14px;
      font-family: 'Trebuchet MS', Arial, sans-serif;
      font-size: 11px; font-weight: 700;
      color: rgba(255,255,255,.9); text-transform: uppercase; letter-spacing: .04em;
      white-space: nowrap;
    }
    td { padding: 12px 14px; border-bottom: 1px solid var(--gray-100); vertical-align: top; }
    tr:last-child td { border-bottom: none; }
    tr:hover td { background: var(--teal-light-20); }
    .company-cell { font-weight: 700; color: var(--teal); font-family: 'Trebuchet MS', Arial, sans-serif; }
    .platform-badge {
      display: inline-block; margin-top: 3px;
      font-size: 11px; font-weight: 500;
      padding: 1px 8px; border-radius: 999px;
      background: var(--blue-light); color: var(--blue);
    }
    .score-dots { display: flex; gap: 3px; align-items: center; }
    .dot { width: 9px; height: 9px; border-radius: 50%; }
    .dot.on  { background: var(--teal-light); }
    .dot.off { background: var(--gray-200); }
    .score-num { font-size: 12px; color: var(--gray-500); margin-left: 4px; }
    .pill {
      display: inline-block; padding: 3px 10px;
      border-radius: 999px; font-size: 11px; font-weight: 600;
    }
    .pill-high   { background: var(--teal-light-20); color: var(--teal); }
    .pill-mid    { background: #fef3cd; color: #7d5a00; }
    .pill-low    { background: var(--orange-light); color: #a33a1a; }
    .pill-conf   { background: var(--blue-light); color: var(--blue); }
    .pill-infer  { background: var(--gray-100); color: var(--gray-600); }
    .angle-tag { font-size: 12px; font-weight: 500; color: var(--charcoal-02); }

    /* ── Lead Cards ── */
    .leads-section { display: none; }
    .leads-section.show { display: block; }
    .lead-card {
      background: #fff;
      border: 1px solid var(--gray-200);
      border-radius: var(--radius-lg);
      padding: 1.5rem;
      margin-bottom: 1.25rem;
      box-shadow: var(--shadow-sm);
      border-top: 3px solid var(--teal-light);
    }
    .lead-card-header {
      display: flex; align-items: flex-start;
      justify-content: space-between; gap: 16px;
      margin-bottom: 1rem;
      padding-bottom: 1rem;
      border-bottom: 1px solid var(--gray-100);
    }
    .lead-company-name {
      font-family: 'Trebuchet MS', Arial, sans-serif;
      font-size: 18px; font-weight: 700; color: var(--teal);
    }
    .lead-meta { font-size: 13px; color: var(--gray-600); margin-top: 3px; }
    .lead-badges { display: flex; gap: 6px; flex-wrap: wrap; flex-shrink: 0; align-items: center; }

    .btn-create-task {
      display: inline-flex; align-items: center; gap: 5px;
      padding: 4px 10px; font-size: 11px; font-weight: 600;
      font-family: 'Trebuchet MS', Arial, sans-serif;
      background: #fff; color: var(--teal);
      border: 1.5px solid var(--teal); border-radius: var(--radius-md);
      cursor: pointer; transition: background .15s, color .15s;
      white-space: nowrap;
    }
    .btn-create-task:hover:not(:disabled) { background: var(--teal); color: #fff; }
    .btn-create-task:disabled { cursor: default; }
    .task-result { font-size: 11px; }
    .lead-hook {
      font-size: 14px; color: var(--charcoal-02); font-style: italic;
      border-left: 3px solid var(--orange);
      padding: 8px 14px;
      background: var(--orange-light);
      border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
      margin-bottom: 1.25rem;
      line-height: 1.5;
    }
    .msg-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
    .msg-block {}
    .msg-label {
      display: flex; align-items: center; gap: 7px;
      font-family: 'Trebuchet MS', Arial, sans-serif;
      font-size: 11px; font-weight: 700;
      color: var(--teal); text-transform: uppercase; letter-spacing: .05em;
      margin-bottom: 6px;
    }
    .msg-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
    .msg-dot-li    { background: var(--blue); }
    .msg-dot-email { background: var(--teal-light); }
    .msg-dot-fu    { background: var(--charcoal-01); }
    .msg-subject { font-size: 12px; font-weight: 700; color: var(--charcoal-02); margin-bottom: 5px; font-family: 'Trebuchet MS', Arial, sans-serif; }
    .msg-body {
      font-size: 13px; color: var(--charcoal-02); line-height: 1.65;
      background: var(--gray-50);
      border: 1px solid var(--gray-200);
      border-radius: var(--radius-md);
      padding: 12px 14px;
      white-space: pre-wrap;
      position: relative;
    }
    .copy-btn {
      position: absolute; top: 8px; right: 8px;
      padding: 3px 10px;
      background: #fff; border: 1px solid var(--teal);
      border-radius: var(--radius-sm);
      font-size: 11px; font-weight: 500; color: var(--teal);
      cursor: pointer; opacity: 0;
      transition: opacity .15s;
    }
    .msg-body:hover .copy-btn { opacity: 1; }
    .copy-btn:hover { background: var(--teal-light-20); }
    .copy-btn.copied { background: var(--teal); color: #fff; }


    /* ── Contact Panel ── */
    .contact-panel {
      background: var(--teal-light-20);
      border: 1px solid var(--teal-light-40);
      border-radius: var(--radius-md);
      padding: 12px 14px;
      margin-bottom: 1rem;
    }
    .contact-panel-title { margin-bottom: 8px; }
    .pdl-badge { font-size: 11px; font-weight: 600; color: var(--teal); }
    .inferred-badge { color: var(--gray-600); }
    .contact-grid { display: grid; grid-template-columns: 110px 1fr; gap: 4px 12px; font-size: 13px; }
    .cr-label { font-weight: 500; color: var(--gray-600); align-self: start; padding-top: 1px; }
    .cr-value { color: var(--charcoal-02); word-break: break-all; }

    /* ── Footer ── */
    .footer {
      text-align: center; font-size: 12px;
      color: var(--charcoal-01); padding-top: 2rem;
      border-top: 1px solid var(--gray-200); margin-top: 1rem;
    }

    /* ── Responsive ── */
    @media (max-width: 768px) {
      .sidebar { width: 200px; }
      .sidebar-link { font-size: 12px; padding: 7px 1rem; }
    }
    @media (max-width: 640px) {
      .sidebar { display: none; }
      .input-row { flex-direction: column; }
      .btn-analyze { width: 100%; justify-content: center; }
      .hero h1 { font-size: 20px; }
    }
/* ── FP&A Contact Card — append to bottom of assets/index.css ── */
.person-card {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  max-width: 420px;
  box-shadow: var(--shadow-sm);
  border-top: 3px solid var(--teal-light);
}
.person-header { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 1rem; padding-bottom: .75rem; border-bottom: 1px solid var(--gray-100); }
.person-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--teal); color: #fff; display: flex; align-items: center; justify-content: center; font-family: 'Trebuchet MS', Arial, sans-serif; font-size: 16px; font-weight: 700; flex-shrink: 0; }
.person-name { font-family: 'Trebuchet MS', Arial, sans-serif; font-size: 15px; font-weight: 700; color: var(--teal); }
.person-title { font-size: 12px; color: var(--charcoal-02); margin-top: 2px; }
.person-company { font-size: 12px; color: var(--gray-600); margin-top: 1px; }
.level-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.level-tag { font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 999px; background: var(--teal-light-20); color: var(--teal); text-transform: uppercase; }
.person-contacts { display: flex; flex-direction: column; gap: 6px; }
.person-contact-row { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; }
.person-contact-icon { flex-shrink: 0; margin-top: 1px; color: var(--gray-500); }
.person-contact-icon svg { display: block; }
.person-contact-text { color: var(--charcoal-02); word-break: break-all; }
.person-contact-text a { color: var(--blue); text-decoration: none; }
.person-contact-text a:hover { text-decoration: underline; }
.person-badge { font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 3px; margin-left: 5px; vertical-align: middle; }
.person-badge-confirmed { background: var(--teal-light-20); color: var(--teal); }
.person-badge-inferred  { background: var(--gray-100); color: var(--gray-600); }
.person-footer { margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--gray-100); display: flex; justify-content: space-between; align-items: center; }
.person-meta { font-size: 11px; color: var(--gray-500); }
.person-actions { display: flex; gap: 6px; }
.btn-card-action { padding: 0 10px; height: 28px; font-size: 11px; font-weight: 500; border-radius: var(--radius-sm); cursor: pointer; display: flex; align-items: center; gap: 4px; text-decoration: none; transition: background .12s; border: 1px solid; }
.btn-li { background: var(--blue-light); color: var(--blue); border-color: #c5cef0; }
.btn-li:hover { background: #d5dbf5; }
.btn-copy-email { background: var(--teal-light-20); color: var(--teal); border-color: var(--teal-light-40); }
.btn-copy-email:hover { background: var(--teal-light-40); }

/* ── HubSpot sync status badges ── */
.hubspot-status { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hs-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600; padding: 3px 10px;
  border-radius: 999px;
}
.hs-badge svg { flex-shrink: 0; }
.hs-badge-ok   { background: #eaf6f2; color: #08594A; border: 1px solid #c5e9df; }
.hs-badge-skip { background: #f1f3f5; color: #6C757D; border: 1px solid #dee2e6; }
.hs-badge-err  { background: #fde8e1; color: #a33a1a; border: 1px solid #f5c4b3; cursor: help; }

/* ── Usage bar ── */
.usage-bar {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--gray-600);
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: 6px 12px;
  margin-top: .75rem;
}
.usage-bar-label {
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 10px;
}
.usage-item {
  display: flex;
  align-items: center;
  gap: 5px;
}
.usage-item svg { flex-shrink: 0; opacity: .6; }
.usage-divider { color: var(--gray-300); }
.usage-cost { font-weight: 600; color: var(--teal); }
.usage-tokens { color: var(--gray-500); }

/* ── Overall Score Circle ── */
.score-circle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  color: #fff; font-size: 12px; font-weight: 700;
  font-family: 'Trebuchet MS', Arial, sans-serif;
}

/* ── Intelligence sections inside lead card ── */
.intel-section {
  margin: 0 0 1rem;
  padding: 0 0 1rem;
  border-bottom: 1px solid var(--gray-100);
}
.intel-section:last-of-type { border-bottom: none; }
.intel-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--gray-500); margin-bottom: 6px;
}
.intel-body {
  font-size: 13px; color: var(--charcoal-02); line-height: 1.6;
  white-space: pre-wrap;
}
.intel-facts  { color: var(--charcoal-02); }
.intel-infer  { color: var(--gray-600); font-style: italic; }
.intel-action { color: var(--teal); font-weight: 500; }
.intel-risks  { color: #b45309; }
.intel-two-col {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
}
@media (max-width: 700px) { .intel-two-col { grid-template-columns: 1fr; } }

/* ── Buying signal items ── */
.signal-item {
  background: var(--gray-50); border: 1px solid var(--gray-200);
  border-radius: var(--radius-md); padding: .75rem; margin-bottom: .5rem;
}
.signal-header {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 4px;
}
.signal-name { font-size: 13px; font-weight: 600; color: var(--charcoal-02); flex: 1; }
.signal-tier {
  font-size: 10px; font-weight: 700; padding: 2px 7px;
  border-radius: 999px; text-transform: uppercase; letter-spacing: .04em;
}
.tier-1 { background: #eaf6f2; color: #08594A; border: 1px solid #c5e9df; }
.tier-2 { background: #fff4e6; color: #b45309; border: 1px solid #fcd9a0; }
.tier-3 { background: var(--gray-100); color: var(--gray-600); }
.signal-evidence { font-size: 12px; color: var(--gray-600); margin-bottom: 3px; }
.signal-why { font-size: 12px; color: var(--charcoal-02); }

/* ── Recommendation chips row ── */
.intel-row-wrap {
  display: flex; flex-wrap: wrap; gap: 8px;
  border-bottom: 1px solid var(--gray-100); padding-bottom: 1rem; margin-bottom: 1rem;
}
.intel-chip {
  font-size: 12px; color: var(--charcoal-02);
  background: var(--gray-50); border: 1px solid var(--gray-200);
  border-radius: var(--radius-md); padding: 6px 10px;
  display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 160px;
}
.intel-chip-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--gray-500);
}
.rec-strong   { color: #08594A; font-weight: 600; }
.rec-moderate { color: #b45309; font-weight: 600; }
.rec-weak     { color: var(--gray-600); }
.rec-none     { color: var(--gray-500); }