@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

#crmView {
  --pi-bg: #000;
  --pi-panel: #000;
  --pi-panel-2: #080808;
  --pi-ink: #fff;
  --pi-muted: #aaa;
  --pi-dim: #777;
  --pi-line: #353535;
  --pi-soft-line: #242424;
  --pi-fill: #f2f2ef;
  --pi-fill-ink: #0b0b0b;
  --pi-font: 'Manrope', 'Avenir Next', sans-serif;
  --pi-mono: 'DM Mono', 'SFMono-Regular', Consolas, monospace;
  color: var(--pi-ink);
  background: var(--pi-bg);
  font-family: var(--pi-font);
  min-height: 0;
}
html[data-color-mode="light"] #crmView {
  --pi-bg: #fff;
  --pi-panel: #fff;
  --pi-panel-2: #f0f0ed;
  --pi-ink: #101010;
  --pi-muted: #444;
  --pi-dim: #666;
  --pi-line: #222;
  --pi-soft-line: #d6d6d2;
  --pi-fill: #111;
  --pi-fill-ink: #fff;
}
#crmView * { box-sizing: border-box; }
.pi-view-switch {
  min-height: 56px; padding: 0 26px; display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--pi-line); background:var(--pi-bg); flex-shrink:0;
}
.pi-brand { display:flex; align-items:center; gap:11px; font:500 10px var(--pi-mono); letter-spacing:.14em; }
.pi-brand i { font-style:normal; color:var(--pi-dim); }
.pi-mark { width:23px;height:23px;display:grid;place-items:center;background:var(--pi-fill);color:var(--pi-fill-ink);font:500 10px var(--pi-mono); }
.pi-switch-buttons { display:flex; gap:4px; padding:3px; border:1px solid var(--pi-soft-line); }
.pi-view-btn { border:0;background:transparent;color:var(--pi-muted);padding:7px 14px;font:600 11px var(--pi-mono);cursor:pointer; }
.pi-view-btn.is-active { background:var(--pi-fill);color:var(--pi-fill-ink); }
.pi-root { flex:1; min-height:0; overflow:auto; background:var(--pi-bg); }
.pi-shell { max-width:1580px; margin:0 auto; padding:28px clamp(16px,3vw,46px) 42px; }
.pi-topline { display:flex; align-items:flex-start; justify-content:space-between; gap:22px; margin-bottom:24px; }
.pi-kicker,.pi-eyebrow { font:500 10px var(--pi-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--pi-muted); }
.pi-title { font-size:clamp(26px,3.2vw,42px); line-height:1.05; letter-spacing:-.055em; margin:8px 0 9px; font-weight:700; }
.pi-subtitle { color:var(--pi-muted); font-size:13px; line-height:1.55; max-width:650px; margin:0; }
.pi-live { white-space:nowrap; display:flex;align-items:center;gap:8px;font:500 10px var(--pi-mono);color:var(--pi-muted);padding-top:5px; }
.pi-live:before { content:""; width:7px;height:7px;background:var(--pi-fill);border:1px solid var(--pi-ink);border-radius:50%; }
.pi-search { display:grid;grid-template-columns:minmax(180px,1fr) minmax(180px,1fr) auto; gap:10px; padding:12px; border:1px solid var(--pi-line); background:var(--pi-panel); margin-bottom:18px; }
.pi-field { width:100%;border:1px solid var(--pi-soft-line);background:var(--pi-bg);color:var(--pi-ink);padding:12px 13px;font:500 12px var(--pi-font);outline:none;min-width:0; }
.pi-field:focus { border-color:var(--pi-ink); }
.pi-field::placeholder { color:var(--pi-dim); }
.pi-button { border:1px solid var(--pi-ink);background:var(--pi-fill);color:var(--pi-fill-ink);padding:0 18px;min-height:42px;font:700 11px var(--pi-mono);letter-spacing:.02em;cursor:pointer;transition:transform .18s,opacity .18s; }
.pi-button:hover { transform:translateY(-1px); }
.pi-button:disabled { opacity:.45;cursor:not-allowed;transform:none; }
.pi-button.secondary { background:transparent;color:var(--pi-ink); }
.pi-button.danger { border-color:var(--pi-line);background:transparent;color:var(--pi-ink); }
.pi-message { display:none; border:1px solid var(--pi-line); padding:11px 14px; margin:0 0 16px; font-size:12px;line-height:1.5; }
.pi-message.show { display:block; }
.pi-message.error { border-left:3px solid var(--pi-ink); }
.pi-research-state { border:1px solid var(--pi-line);background:var(--pi-panel);padding:14px 16px;margin-bottom:18px;display:none; }
.pi-research-state.show { display:block; }
.pi-progress-line { display:flex;align-items:center;justify-content:space-between;gap:12px;font:500 11px var(--pi-mono); }
.pi-progress-track { height:2px;background:var(--pi-soft-line);margin-top:12px;overflow:hidden; }
.pi-progress-track span { display:block;height:100%;background:var(--pi-fill);transition:width .35s; }
.pi-workspace { display:grid;grid-template-columns:244px minmax(0,1fr) 300px;gap:14px;align-items:stretch; }
.pi-panel { border:1px solid var(--pi-line);background:var(--pi-panel);min-width:0; }
.pi-panel-head { display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 14px;border-bottom:1px solid var(--pi-soft-line); }
.pi-panel-head h3 { margin:0;font:500 10px var(--pi-mono);letter-spacing:.1em;text-transform:uppercase; }
.pi-count { color:var(--pi-muted);font:10px var(--pi-mono); }
.pi-recent { min-height:320px; }
.pi-recent-list { padding:5px; }
.pi-recent-item { padding:11px 10px;border-bottom:1px solid var(--pi-soft-line);cursor:pointer;display:block;width:100%;text-align:left;color:var(--pi-ink);background:none;border-top:0;border-left:0;border-right:0;font-family:inherit; }
.pi-recent-item:hover,.pi-recent-item.selected { background:var(--pi-panel-2); }
.pi-recent-name { font-size:12px;font-weight:700;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.pi-recent-meta { display:flex;justify-content:space-between;gap:8px;color:var(--pi-muted);font:9px var(--pi-mono);margin-top:7px; }
.pi-recent-empty { padding:20px 12px;color:var(--pi-muted);font-size:11px;line-height:1.6; }
.pi-recent-actions { display:flex;gap:6px;margin-top:9px; }
.pi-mini { background:none;border:1px solid var(--pi-line);color:var(--pi-muted);font:9px var(--pi-mono);padding:5px 7px;cursor:pointer; }
.pi-main { min-width:0;display:flex;flex-direction:column;gap:14px; }
.pi-profile { border:1px solid var(--pi-line);background:var(--pi-panel);padding:18px 20px; }
.pi-profile-top { display:flex;justify-content:space-between;gap:18px;align-items:flex-start; }
.pi-person-name { font-size:clamp(21px,2.5vw,32px);line-height:1.1;letter-spacing:-.045em;margin:5px 0 5px; }
.pi-legal { color:var(--pi-muted);font-size:12px; }
.pi-profile-summary { color:var(--pi-muted);font-size:12px;line-height:1.6;max-width:860px;margin:12px 0 0; }
.pi-actions { display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end; }
.pi-actions .pi-button { min-height:33px;padding:0 10px;font-size:9px; }
.pi-facts { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:16px; }
.pi-fact { border-top:1px solid var(--pi-soft-line);padding-top:9px;min-width:0; }
.pi-fact-title { color:var(--pi-dim);font:9px var(--pi-mono);letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px; }
.pi-fact-list { display:flex;flex-wrap:wrap;gap:5px; }
.pi-chip { border:1px solid var(--pi-line);padding:4px 7px;font-size:10px;line-height:1.35; }
.pi-chip a { color:inherit;text-decoration:underline;text-underline-offset:2px; }
.pi-evidence { display:inline-flex;align-items:baseline;gap:3px;margin-left:4px;vertical-align:baseline;white-space:nowrap; }
.pi-evidence a { color:var(--pi-ink);font:9px var(--pi-mono);text-decoration:none;border:1px solid var(--pi-line);padding:0 3px; }
.pi-evidence a:hover,.pi-evidence a:focus-visible { color:var(--pi-fill-ink);background:var(--pi-fill);outline:none; }
.pi-graph-panel { display:flex;flex-direction:column;height:520px;min-height:0; }
.pi-graph-toolbar { padding:10px 12px;display:flex;justify-content:space-between;align-items:center;gap:8px;border-bottom:1px solid var(--pi-soft-line);flex-wrap:wrap; }
.pi-filters { display:flex;gap:5px;flex-wrap:wrap; }
.pi-filter { border:1px solid var(--pi-line);background:transparent;color:var(--pi-muted);padding:5px 8px;font:9px var(--pi-mono);cursor:pointer; }
.pi-filter.active { background:var(--pi-fill);color:var(--pi-fill-ink);border-color:var(--pi-fill); }
.pi-tools { display:flex;gap:5px; }
.pi-tool { border:1px solid var(--pi-line);background:transparent;color:var(--pi-ink);padding:5px 8px;font:9px var(--pi-mono);cursor:pointer; }
.pi-graph { position:relative;min-height:0;flex:1;background-color:var(--pi-bg);background-image:radial-gradient(var(--pi-soft-line) .7px,transparent .7px);background-size:19px 19px; }
.pi-graph canvas { outline:none; }
.pi-graph-empty { position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:30px;color:var(--pi-muted);font-size:12px;line-height:1.7;pointer-events:none; }
.pi-inspector { min-height:430px; }
.pi-inspector-body { padding:15px; }
.pi-inspector-empty { color:var(--pi-muted);font-size:11px;line-height:1.7; }
.pi-detail-title { font-size:17px;line-height:1.25;letter-spacing:-.03em;margin:6px 0 8px; }
.pi-detail-copy { color:var(--pi-muted);font-size:11px;line-height:1.65;margin:0 0 14px; }
.pi-detail-row { border-top:1px solid var(--pi-soft-line);padding:9px 0; }
.pi-detail-label { font:9px var(--pi-mono);color:var(--pi-dim);text-transform:uppercase;letter-spacing:.08em;margin-bottom:5px; }
.pi-detail-value { font-size:11px;line-height:1.5; }
.pi-source-list { display:flex;flex-direction:column;gap:8px;margin-top:8px; }
.pi-source { color:var(--pi-ink);text-decoration:none;border-left:2px solid var(--pi-ink);padding:2px 0 2px 8px;font-size:10px;line-height:1.45; }
.pi-source:hover { text-decoration:underline; }
.pi-source small { display:block;color:var(--pi-muted);font:9px var(--pi-mono);margin-top:3px; }
.pi-lower { display:grid;grid-template-columns:1.1fr .9fr;gap:14px; }
.pi-lower-content { padding:14px; }
.pi-gap { border-left:2px solid var(--pi-ink);padding:2px 0 2px 9px;margin-bottom:11px;font-size:11px;line-height:1.55; }
.pi-gap strong { display:block;font-size:10px;margin-bottom:3px; }
.pi-disclaimer { font-size:10px;line-height:1.65;color:var(--pi-muted); }
.pi-skeleton { min-height:120px;background:linear-gradient(90deg,var(--pi-panel) 25%,var(--pi-panel-2) 38%,var(--pi-panel) 62%);background-size:400% 100%;animation:piShimmer 1.4s ease infinite; }
@keyframes piShimmer { 0%{background-position:100% 0}100%{background-position:0 0} }
@media(max-width:1100px) { .pi-workspace { grid-template-columns:210px minmax(0,1fr); } .pi-inspector { grid-column:2; } }
@media(max-width:760px) {
  .pi-view-switch { padding:0 14px;min-height:50px; } .pi-brand { font-size:8px;gap:7px; } .pi-switch-buttons { gap:0; }
  .pi-view-btn { padding:7px 9px;font-size:9px; }
  .pi-shell { padding:22px 13px 30px; }
  .pi-topline { flex-direction:column;gap:8px;margin-bottom:18px; }
  .pi-search { grid-template-columns:1fr; }
  .pi-search .pi-button { min-height:42px; }
  .pi-workspace,.pi-lower { grid-template-columns:1fr; }
  .pi-recent { min-height:unset; }
  .pi-recent-list { max-height:240px;overflow:auto; }
  .pi-inspector { grid-column:auto; }
  .pi-profile-top { flex-direction:column; }
  .pi-actions { justify-content:flex-start; }
  .pi-facts { grid-template-columns:1fr; }
  .pi-graph-panel { height:620px;min-height:0; }
}

/* Unified CRM list (people + companies, with research status) */
.pi-list-filter { display:flex; gap:6px; padding:10px 10px 4px; }
.pi-list-filter .pi-filter { flex:1; }
.pi-recent-sub { display:block; margin-top:3px; color:var(--pi-muted); font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pi-status { letter-spacing:.06em; }
.pi-status-done { color:#22c55e; }
.pi-status-active { color:var(--pi-ink); }
.pi-status-failed { color:#ef4444; }
.pi-status-none { color:var(--pi-muted); }
.pi-edit-form { display:grid; gap:8px; margin-top:14px; max-width:560px; }
.pi-edit-form[hidden] { display:none; }
.pi-edit-form textarea { resize:vertical; font-family:inherit; }
.pi-legal .pi-mini { margin-left:8px; vertical-align:middle; }

/* Avatar hero: the person's 3D avatar above their info */
.pi-hero { position:relative; border:1px solid var(--pi-line); background:radial-gradient(ellipse at 50% 35%, color-mix(in srgb, var(--pi-ink) 7%, var(--pi-panel)) 0%, var(--pi-panel) 70%); height:340px; overflow:hidden; }
.pi-hero[hidden] { display:none; }
.pi-hero-stage { position:absolute; inset:0; }
.pi-hero-stage canvas { cursor:grab; }
.pi-hero-note { position:absolute; left:50%; bottom:16px; transform:translateX(-50%); color:var(--pi-muted); font:10px var(--pi-mono); letter-spacing:.06em; pointer-events:none; text-align:center; }
.pi-hero-note[hidden] { display:none; }
.pi-hero-tools { position:absolute; top:12px; right:12px; display:flex; gap:6px; z-index:2; }
.pi-hero-tools .pi-mini { background:var(--pi-panel); }

/* 9:16 view (vertical, for phone screenshots / short videos): avatar on top, then info and graph */
.pi-wide { position:fixed; inset:0; z-index:100002; background:rgba(0,0,0,.82); display:flex; align-items:center; justify-content:center; padding:24px; }
.pi-wide-frame { position:relative; height:min(calc(100vh - 48px), calc((100vw - 48px) * 16 / 9)); aspect-ratio:9 / 16; background:var(--pi-bg, var(--console-bg, #000)); color:var(--pi-ink); border:1px solid var(--pi-line); display:grid; grid-template-rows:42% minmax(0, 1fr); overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.5); container-type:size; }
.pi-wide-avatar { position:relative; background:radial-gradient(ellipse at 50% 55%, color-mix(in srgb, var(--pi-ink) 9%, transparent) 0%, transparent 70%); }
.pi-wide-info { display:flex; flex-direction:column; gap:2.2cqh; padding:0 7cqw 9cqh; min-height:0; }
.pi-wide-name { margin:0; font-size:7.6cqw; line-height:1.03; letter-spacing:-.02em; font-weight:800; }
.pi-wide-summary { margin:0; color:var(--pi-muted); font-size:3.4cqw; line-height:1.5; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.pi-wide-info .pi-fact-list .pi-chip { font-size:2.8cqw; }
.pi-wide-graph { flex:1; min-height:0; border:1px solid var(--pi-soft-line); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.pi-wide-graph img { width:100%; height:100%; object-fit:contain; }
.pi-wide-brand { position:absolute; left:50%; bottom:2.6cqh; transform:translateX(-50%); }
.pi-wide-brand .brand-logo { height:3.2cqh; }
.pi-wide-close { position:fixed; top:16px; right:20px; width:40px; height:40px; border-radius:10px; border:1px solid rgba(255,255,255,.3); background:rgba(0,0,0,.6); color:#fff; font-size:22px; cursor:pointer; }

/* Person page: avatar on the left, info on the right; graph and the rest below at full width. */
.pi-main { display:grid !important; grid-template-columns:minmax(280px, 38%) minmax(0, 1fr); align-items:stretch; }
.pi-main > * { grid-column:1 / -1; }
.pi-main > .pi-hero { grid-column:1; grid-row:1; height:auto; min-height:360px; }
.pi-main > .pi-profile { grid-column:2; grid-row:1; min-width:0; }
.pi-main > .pi-hero[hidden] + .pi-profile { grid-column:1 / -1; }
.pi-main > .pi-hero .pi-hero-tools { left:12px; right:12px; justify-content:space-between; }
@media (max-width: 900px) {
  .pi-main { grid-template-columns:minmax(0, 1fr); }
  .pi-main > .pi-hero, .pi-main > .pi-profile { grid-column:1; grid-row:auto; }
}

/* 9:16 quick-reference sheet: plain label / value rows in mono, no prose, no graph */
.pi-wide-frame { grid-template-rows:46% minmax(0, 1fr) !important; }
.pi-sheet { margin:0; padding:1cqh 7cqw 9cqh; display:flex; flex-direction:column; justify-content:flex-start; font-family:var(--pi-mono); min-height:0; }
.pi-sheet-row { display:grid; grid-template-columns:30% 1fr; gap:3cqw; align-items:baseline; padding:1.15cqh 0; border-bottom:1px solid var(--pi-soft-line); }
.pi-sheet-row:first-child { border-top:1px solid var(--pi-line); }
.pi-sheet dt { margin:0; color:var(--pi-muted); font-size:2.6cqw; letter-spacing:.14em; text-transform:uppercase; }
.pi-sheet dd { margin:0; color:var(--pi-ink); font-size:3.3cqw; line-height:1.35; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.pi-sheet [data-field="name"] dd { font-family:var(--pi-font); font-weight:800; font-size:5.2cqw; letter-spacing:-.01em; -webkit-line-clamp:1; }
.pi-sheet dd.is-pending { color:var(--pi-muted); animation:pi-sheet-blink 1s steps(2) infinite; }
@keyframes pi-sheet-blink { 50% { opacity:.25; } }

/* 9:16 "terminal" sheet */
.pi-term { display:flex; flex-direction:column; min-height:0; padding:0 7cqw 9cqh; font-family:var(--pi-mono); }
.pi-term .pi-sheet { padding:0; }
.pi-term-head { display:flex; justify-content:space-between; align-items:center; color:var(--pi-muted); font-size:2.4cqw; letter-spacing:.16em; padding:.6cqh 0 .9cqh; }
.pi-term-status { color:#22c55e; animation:pi-sheet-blink 1s steps(2) infinite; }
.pi-term-status.is-done { animation:none; }
.pi-term-bar { height:2px; background:var(--pi-soft-line); margin-bottom:1.2cqh; overflow:hidden; }
.pi-term-bar span { display:block; height:100%; width:0; background:#22c55e; box-shadow:0 0 8px #22c55e; transition:width .35s ease; }
.pi-sheet-row { transition:opacity .25s ease, transform .25s ease; }
.pi-sheet-row.is-hidden { opacity:0; transform:translateX(-8px); }
.pi-sheet dt { display:flex; gap:2cqw; align-items:baseline; }
.pi-sheet-idx { color:#22c55e; opacity:.8; }
.pi-sheet dd.is-pending { color:color-mix(in srgb, #22c55e 70%, var(--pi-muted)); animation:none; letter-spacing:.06em; }
.pi-sheet-row.is-active dd:not(.is-done)::after,
.pi-sheet-row.is-active dd.is-done::after { content:'▌'; color:#22c55e; margin-left:.4ch; animation:pi-sheet-blink 1s steps(2) infinite; }
.pi-flag-item { display:inline-flex; align-items:center; gap:.5ch; margin-right:1.4ch; white-space:nowrap; }
.pi-flag { font-size:1.25em; line-height:1; font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif; }
.pi-scanlines { position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(to bottom, rgba(255,255,255,.025) 0 1px, transparent 1px 3px); mix-blend-mode:overlay; }
@media (prefers-reduced-motion: reduce) { .pi-term-status, .pi-sheet-row.is-active dd::after { animation:none; } }
.pi-wide-frame { grid-template-rows:40% minmax(0, 1fr) !important; }
.pi-term { padding-bottom:11cqh; }
.pi-sheet-row { grid-template-columns:36% 1fr; }
.pi-sheet [data-field="name"] dd { -webkit-line-clamp:2; font-size:4.6cqw; line-height:1.1; }

/* 1:1 view: avatar | sheet side by side (data-side on .pi-wide picks the avatar's side) */
.pi-wide--square .pi-wide-frame { height:min(calc(100vh - 48px), calc(100vw - 48px)); aspect-ratio:1 / 1; grid-template-rows:none !important; grid-template-columns:44% minmax(0, 1fr); }
.pi-wide--square .pi-wide-avatar { grid-row:1; grid-column:1; }
.pi-wide--square .pi-term { grid-row:1; grid-column:2; justify-content:center; padding:5cqh 4.5cqw 9cqh 3.5cqw; }
.pi-wide--square[data-side="right"] .pi-wide-frame { grid-template-columns:minmax(0, 1fr) 44%; }
.pi-wide--square[data-side="right"] .pi-wide-avatar { grid-column:2; }
.pi-wide--square[data-side="right"] .pi-term { grid-column:1; padding:5cqh 3.5cqw 9cqh 4.5cqw; }
.pi-wide--square .pi-term-head { font-size:1.35cqw; }
.pi-wide--square .pi-sheet-row { padding:1.25cqh 0; grid-template-columns:34% 1fr; gap:1.6cqw; }
.pi-wide--square .pi-sheet dt { font-size:1.35cqw; gap:1cqw; }
.pi-wide--square .pi-sheet dd { font-size:1.8cqw; }
.pi-wide--square .pi-sheet [data-field="name"] dd { font-size:3cqw; -webkit-line-clamp:2; }
.pi-wide--square .pi-wide-brand { bottom:3cqh; }
.pi-wide--square .pi-wide-brand .brand-logo { height:3cqh; }
.pi-wide-swap { position:fixed; top:16px; right:72px; height:40px; padding:0 14px; border-radius:10px; border:1px solid rgba(255,255,255,.3); background:rgba(0,0,0,.6); color:#fff; font:600 12px/1 var(--pi-mono, monospace); letter-spacing:.08em; cursor:pointer; }
.pi-wide-swap:hover, .pi-wide-close:hover { background:rgba(255,255,255,.12); }
.pi-wide--square .pi-wide-brand { left:72%; }
.pi-wide--square[data-side="right"] .pi-wide-brand { left:28%; }