/* Hook Me Up customers — Marketing Funnel tray */
.hc { --hc-ink: #17212b; --hc-acc: #e2573b; --hc-soft: #fbeee9; --hc-line: #ece6e1; --hc-teal: #1f6b72; --hc-tsoft: #e2eff0; }
.hc-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.hc-bar .st-btn, .hc .st-btn { margin-top: 0; }
.hc-seg { display: inline-flex; border: 1.5px solid #111; border-radius: 999px; overflow: hidden; }
.hc-seg-btn { border: 0; background: #fff; color: #111; padding: 9px 16px; font: 700 13.5px inherit; font-family: inherit; cursor: pointer; }
.hc-seg-btn.on { background: #111; color: #fff; }
.hc-search { flex: 1 1 200px; min-width: 0; }
.hc-source { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: #8a7f78; margin-bottom: 10px; font-weight: 600; }
.hc-ro { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: #f1efed; color: #77706a; letter-spacing: .04em; }
.hc-stats { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.hc-stat { background: #faf7f4; border: 1px solid var(--hc-line); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hc-stat span { font-size: 11.5px; color: #6b625c; font-weight: 600; }
.hc-stat b { font-size: 20px; font-weight: 800; color: var(--hc-ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.hc-stat.acc { background: var(--hc-soft); border-color: #f2cfc4; } .hc-stat.acc b { color: var(--hc-acc); }
.hc-fixtures { border: 1.5px dashed #d8cfc9; border-radius: 12px; padding: 10px 12px; margin-bottom: 14px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 12.5px; color: #6b625c; }
.hc-fixtures strong { color: var(--hc-ink); margin-right: 4px; }
.hc-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.hc-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #8a7f78; padding: 6px 8px; border-bottom: 1px solid var(--hc-line); }
.hc-table td { padding: 9px 8px; border-bottom: 1px solid var(--hc-line); vertical-align: middle; font-variant-numeric: tabular-nums; }
.hc-table tr.hc-row { cursor: pointer; } .hc-table tr.hc-row:hover td { background: #fdf8f6; }
.hc-table tr.hc-open td { background: var(--hc-soft); }
.hc-user { font-weight: 800; color: var(--hc-ink); background: none; border: 0; padding: 0; font: inherit; font-weight: 800; cursor: pointer; text-align: left; }
.hc-user:focus-visible { outline: 2px solid var(--hc-acc); outline-offset: 2px; }
.hc-pill { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: #f1efed; color: #77706a; text-transform: capitalize; white-space: nowrap; }
.hc-pill.on { background: var(--hc-tsoft); color: var(--hc-teal); }
.hc-num { font-family: "JetBrains Mono", monospace; }
.hc-detail td { padding: 0 !important; background: #fff !important; }
.hc-det { padding: 14px; border-left: 3px solid var(--hc-acc); display: grid; gap: 14px; }
.hc-det h5 { margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: #8a7f78; }
.hc-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 6px 14px; margin: 0; }
.hc-kv dt { font-size: 11px; color: #8a7f78; font-weight: 600; } .hc-kv dd { margin: 0; font-weight: 700; color: var(--hc-ink); overflow-wrap: anywhere; }
.hc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hc-mini { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow: auto; border: 1px solid var(--hc-line); border-radius: 10px; }
.hc-mini li { display: grid; grid-template-columns: 1fr auto; gap: 1px 10px; padding: 7px 10px; border-bottom: 1px solid var(--hc-line); font-size: 12.5px; }
.hc-mini li:last-child { border-bottom: 0; }
.hc-mini .t { font-size: 11px; color: #8a7f78; } .hc-mini .v { font-family: "JetBrains Mono", monospace; font-weight: 700; grid-row: span 2; align-self: center; }
.hc-mini .pos { color: var(--hc-teal); } .hc-mini .neg { color: var(--hc-acc); }
.hc-none { font-size: 12.5px; color: #a39a94; font-style: italic; padding: 8px 0; }
.hc-convo { border: 1px solid var(--hc-line); border-radius: 10px; margin-bottom: 8px; }
.hc-convo summary { cursor: pointer; padding: 8px 10px; font-size: 12.5px; font-weight: 700; }
.hc-msgs { padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow: auto; }
.hc-msg { max-width: 80%; padding: 6px 10px; border-radius: 12px; font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; background: #f3eeea; }
.hc-msg.out { align-self: flex-end; background: var(--hc-ink); color: #fff; }
.hc-msg small { display: block; font-size: 10.5px; opacity: .65; margin-top: 2px; }
.hc-adj { border: 1px solid #f2cfc4; background: #fdf8f6; border-radius: 12px; padding: 12px; }
.hc-adj p { margin: 0 0 8px; font-size: 12.5px; color: #8b2c18; }
.hc-adj form { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.hc-adj label { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; font-weight: 600; color: #6b625c; }
.hc-adj .d { width: 110px; } .hc-adj .r { flex: 1 1 220px; }
.hc-error { border: 1px solid #f0c7bd; background: #fdf3f0; border-radius: 12px; padding: 14px; color: #8b2c18; }
.hc-error p { margin: 0 0 6px; }
.hc-empty { border: 1.5px dashed #d8cfc9; border-radius: 14px; padding: 22px; text-align: center; color: #6b625c; font-size: 13px; }
.hc-empty strong { display: block; color: var(--hc-ink); }
.hc-pager { display: flex; align-items: center; gap: 12px; justify-content: center; margin-top: 12px; font-size: 12.5px; }
.hc-skel { display: grid; gap: 10px; } .hc-sk { background: #f3eeea; border-radius: 12px; height: 64px; animation: hcPulse 1.2s ease-in-out infinite; } .hc-sk.b { height: 200px; }
@keyframes hcPulse { 50% { opacity: .5; } }
.hc-wrap { overflow-x: auto; }
@media (max-width: 768px) {
  .hc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hc-cols { grid-template-columns: 1fr; }
  .hc-table .hc-hide { display: none; }
}